1<!doctype html> 2<html prefix="og: http://ogp.me/ns#" lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 <meta 6 name="description" 7 content="Material UI Components for Svelte, ready to use in your app." 8 /> 9 10 <!-- Open Graph data --> 11 <meta property="og:title" content="Svelte Material UI" /> 12 <meta property="og:url" content="https://sveltematerialui.com/" /> 13 <meta 14 property="og:image" 15 content="https://sveltematerialui.com/header.png" 16 /> 17 <meta 18 property="og:description" 19 content="Material UI Components for Svelte, ready to use in your app." 20 /> 21 <meta property="og:type" content="website" /> 22 23 <!-- Icons --> 24 <link 25 rel="apple-touch-icon" 26 sizes="57x57" 27 href="./icons/apple-icon-57x57.png" 28 /> 29 <link 30 rel="apple-touch-icon" 31 sizes="60x60" 32 href="./icons/apple-icon-60x60.png" 33 /> 34 <link 35 rel="apple-touch-icon" 36 sizes="72x72" 37 href="./icons/apple-icon-72x72.png" 38 /> 39 <link 40 rel="apple-touch-icon" 41 sizes="76x76" 42 href="./icons/apple-icon-76x76.png" 43 /> 44 <link 45 rel="apple-touch-icon" 46 sizes="114x114" 47 href="./icons/apple-icon-114x114.png" 48 /> 49 <link 50 rel="apple-touch-icon" 51 sizes="120x120" 52 href="./icons/apple-icon-120x120.png" 53 /> 54 <link 55 rel="apple-touch-icon" 56 sizes="144x144" 57 href="./icons/apple-icon-144x144.png" 58 /> 59 <link 60 rel="apple-touch-icon" 61 sizes="152x152" 62 href="./icons/apple-icon-152x152.png" 63 /> 64 <link 65 rel="apple-touch-icon" 66 sizes="180x180" 67 href="./icons/apple-icon-180x180.png" 68 /> 69 <link 70 rel="icon" 71 type="image/png" 72 sizes="192x192" 73 href="./icons/android-icon-192x192.png" 74 /> 75 <link 76 rel="icon" 77 type="image/png" 78 sizes="32x32" 79 href="./icons/favicon-32x32.png" 80 /> 81 <link 82 rel="icon" 83 type="image/png" 84 sizes="96x96" 85 href="./icons/favicon-96x96.png" 86 /> 87 <link 88 rel="icon" 89 type="image/png" 90 sizes="16x16" 91 href="./icons/favicon-16x16.png" 92 /> 93 <link rel="manifest" href="./manifest.json" /> 94 <meta name="msapplication-TileColor" content="#ffffff" /> 95 <meta 96 name="msapplication-TileImage" 97 content="./ms-icon-144x144.png" 98 /> 99 <meta name="theme-color" content="#ffffff" /> 100 101 <!-- Fonts and CSS --> 102 103 <!-- Hint where we get fonts from. --> 104 <link rel="preconnect" href="https://fonts.googleapis.com" /> 105 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> 106 107 <!-- Material Icons, Roboto, and Roboto Mono fonts --> 108 <link 109 href="https://fonts.googleapis.com/css2?family=Material+Icons&Roboto+Mono:ital@0;1&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" 110 rel="stylesheet" 111 /> 112 113 <!-- Highlight.js Theme (For Markdown Pages) --> 114 <link 115 rel="stylesheet" 116 href="https://cdn.jsdelivr.net/npm/[email protected]/styles/obsidian.css" 117 /> 118 119 <meta name="viewport" content="width=device-width, initial-scale=1" /> 120 121 <style> 122 html, 123 body { 124 margin: 0; 125 padding: 0; 126 } 127 </style> 128 129 <link href="./_app/immutable/entry/start.CrBwZ__W.js" rel="modulepreload"> 130 <link href="./_app/immutable/chunks/BEce9HXa.js" rel="modulepreload"> 131 <link href="./_app/immutable/chunks/Bf_DJP33.js" rel="modulepreload"> 132 <link href="./_app/immutable/chunks/DyID_KVz.js" rel="modulepreload"> 133 <link href="./_app/immutable/entry/app.C9dKaIEz.js" rel="modulepreload"> 134 <link href="./_app/immutable/chunks/xihTtKlq.js" rel="modulepreload"> 135 <link href="./_app/immutable/nodes/0.DXLf7NCn.js" rel="modulepreload"> 136 <link href="./_app/immutable/chunks/EvgqFCLZ.js" rel="modulepreload"> 137 <link href="./_app/immutable/chunks/JL0yVdW4.js" rel="modulepreload"> 138 <link href="./_app/immutable/chunks/Dv4kbAvS.js" rel="modulepreload"> 139 <link href="./_app/immutable/chunks/BXgRjqYv.js" rel="modulepreload"> 140 <link href="./_app/immutable/chunks/BkjHx8cA.js" rel="modulepreload"> 141 <link href="./_app/immutable/chunks/D_lCWsfQ.js" rel="modulepreload"> 142 <link href="./_app/immutable/chunks/D7N2I7Df.js" rel="modulepreload"> 143 <link href="./_app/immutable/chunks/CtjIQ59i.js" rel="modulepreload"> 144 <link href="./_app/immutable/chunks/Ch__h6FN.js" rel="modulepreload"> 145 <link href="./_app/immutable/chunks/CG61PKIU.js" rel="modulepreload"> 146 <link href="./_app/immutable/chunks/PTETN2PC.js" rel="modulepreload"> 147 <link href="./_app/immutable/chunks/DyaKBINf.js" rel="modulepreload"> 148 <link href="./_app/immutable/nodes/2.TAUEXVrF.js" rel="modulepreload"> 149 <link href="./_app/immutable/chunks/B_anq4TC.js" rel="modulepreload"> 150 <link href="./_app/immutable/chunks/CnHWlhZi.js" rel="modulepreload"> 151 <!--12qhfyh--><link rel="stylesheet" href="./smui.css" class="svelte-12qhfyh"/> <link rel="stylesheet" href="./site.css" class="svelte-12qhfyh"/> <!----><style>/*! 152 Theme: Material Darker 153 Author: Nate Peterson 154 License: ~ MIT (or more permissive) [via base16-schemes-source] 155 Maintainer: @highlightjs/core-team 156 Version: 2021.09.0 157*/pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#EEFFFF;background:#212121}.hljs::selection, 158.hljs ::selection{background-color:#353535;color:#EEFFFF}.hljs-comment{color:#4A4A4A}.hljs-tag{color:#B2CCD6}.hljs-subst, 159.hljs-punctuation, 160.hljs-operator{color:#EEFFFF}.hljs-operator{opacity:0.7}.hljs-bullet, 161.hljs-variable, 162.hljs-template-variable, 163.hljs-selector-tag, 164.hljs-name, 165.hljs-deletion{color:#F07178}.hljs-symbol, 166.hljs-number, 167.hljs-link, 168.hljs-attr, 169.hljs-variable.constant_, 170.hljs-literal{color:#F78C6C}.hljs-title,.hljs-class .hljs-title,.hljs-title.class_,.hljs-strong{color:#FFCB6B}.hljs-strong{font-weight:bold}.hljs-code, 171.hljs-addition, 172.hljs-title.class_.inherited__, 173.hljs-string{color:#C3E88D}.hljs-built_in, 174.hljs-doctag, 175.hljs-quote, 176.hljs-keyword.hljs-atrule, 177.hljs-regexp{color:#89DDFF}.hljs-function .hljs-title, 178.hljs-attribute, 179.ruby .hljs-property,
180.hljs-title.function_, 181.hljs-section{color:#82AAFF}.hljs-type,.hljs-template-tag,.diff .hljs-meta,.hljs-keyword,.hljs-emphasis{color:#C792EA}.hljs-emphasis{font-style:italic}.hljs-meta, 182.hljs-meta .hljs-keyword, 183.hljs-meta .hljs-string{color:#FF5370}.hljs-meta .hljs-keyword, 184.hljs-meta-keyword{font-weight:bold}.hljs-selector-id{color:#B2CCD6}.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo{color:#F07178}.hljs-params{color:#C792EA}.hljs-formula{color:#C3E88D}</style><!----> <!--[--><link rel="preload" href="./smui-material.css" as="style" class="svelte-12qhfyh"/> <link rel="preload" href="./smui-material-dark.css" as="style" class="svelte-12qhfyh"/><link rel="preload" href="./smui-fixation.css" as="style" class="svelte-12qhfyh"/> <link rel="preload" href="./smui-fixation-dark.css" as="style" class="svelte-12qhfyh"/><link rel="preload" href="./smui-muted.css" as="style" class="svelte-12qhfyh"/> <link rel="preload" href="./smui-muted-dark.css" as="style" class="svelte-12qhfyh"/><link rel="preload" href="./smui-bubblegum.css" as="style" class="svelte-12qhfyh"/> <link rel="preload" href="./smui-bubblegum-dark.css" as="style" class="svelte-12qhfyh"/><link rel="preload" href="./smui-metro.css" as="style" class="svelte-12qhfyh"/> <link rel="preload" href="./smui-metro-dark.css" as="style" class="svelte-12qhfyh"/><link rel="preload" href="./smui-unity.css" as="style" class="svelte-12qhfyh"/> <link rel="preload" href="./smui-unity-dark.css" as="style" class="svelte-12qhfyh"/><!--]--> <!--[2--><link rel="stylesheet" href="./smui-dark.css" media="screen and (prefers-color-scheme: dark)" class="svelte-12qhfyh"/> <link rel="stylesheet" href="./site-dark.css" media="screen and (prefers-color-scheme: dark)" class="svelte-12qhfyh"/><!--]--> <!--[0--><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/index.css" class="svelte-12qhfyh"/><!--]--><!----><!--1uha8ag--><!----><title>Svelte Material UI</title> 185 <link href="./_app/immutable/assets/0.Bm1AVxb4.css" rel="stylesheet"> 186 <link href="./_app/immutable/assets/2.DexzmoZT.css" rel="stylesheet"> 187 188 <!-- Global site tag (gtag.js) - Google Analytics -->
vendor: 80 bytes, lines 188-191
188 189 <script 190 async 191 src="https://www.googletagmanager.com/gtag/js?id=
191G-79MKYND6TX
vendor: 21 bytes, lines 191-193
191" 192 ></script> 193
193<script> 194
vendor: 163 bytes, lines 194-200
194window.dataLayer = window.dataLayer || []; 195 function gtag() { 196 dataLayer.push(arguments); 197 } 198 gtag('js', new Date()); 199 200 gtag('config', '
200G-79MKYND6TX
vendor: 8 bytes, lines 200-201
200'); 201
201</script>
201 202 </head> 203 <body class="ukraine transrights"> 204 <div id="smui-app"><!--[--><!--[0--><!--[--><!--[-1--><header class="mdc-top-app-bar smui-top-app-bar--static demo-top-app-bar" style=""><!--[--><!--[-1--><!----><div class="mdc-top-app-bar__row"><section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"><!--[-1--><!--]--> <!--[--><!--[-1--><!----><a class="mdc-top-app-bar__title mdc-theme--on-surface" href="/" style="color: inherit; "><!---->Svelte Material UI<!----><!----><!----><!----></a><!----><!--]--><!--]--><!----><!----></section><!----> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar" style="color: var(--mdc-on-surface, #000);"><!--[!--><!--[--><!--[-1--><!----><a class="mdc-icon-button mdc-icon-button--display-flex mdc-top-app-bar__action-item" style="" href="https://github.com/hperrin/svelte-material-ui" title="SMUI on GitHub"><div class="mdc-icon-button__ripple"></div> <!--[0--><span class="mdc-icon-button__focus-ring"></span><!--]--> <!--[--><!--[0--><svg class="mdc-icon-button__icon" aria-hidden="true" focusable="false" tabindex="-1" viewBox="0 0 24 24"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" class="svelte-12qhfyh"></path><!----><!----></svg><!--]--><!--]--><!----><!--[-1--><!--]--><!----><!----></a><!----><!--]--><!--]--><!--]--> <div style="display: inline-block;" class="svelte-12qhfyh"><!--[--><!--[-1--><!----><button class="mdc-icon-button mdc-icon-button--display-flex mdc-top-app-bar__action-item" style="" title="Pick a theme or toggle dark mode."><div class="mdc-icon-button__ripple"></div> <!--[0--><span class="mdc-icon-button__focus-ring"></span><!--]--> <!--[--><!--[0--><svg class="mdc-icon-button__icon" aria-hidden="true" focusable="false" tabindex="-1" viewBox="0 0 24 24"><path fill="currentColor" d="M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z" class="svelte-12qhfyh"></path><!----><!----></svg><!--]--><!--]--><!----><!--[-1--><!--]--><!----><!----></button><!----><!--]--><!--]--><!----> <div class="mdc-menu-surface mdc-menu" style="" role="dialog"><!--[--><!--[-1--><!----><ul class="mdc-deprecated-list" role="menu"><li><ul class="mdc-menu__selection-group"><!--[--><!--[-1--><!----><li class="mdc-deprecated-list-item mdc-deprecated-list-item--selected mdc-menu-item--selected" style="" role="menuitem" aria-disabled="false" tabindex="0"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><span class="mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon" tag="div"><i class="material-icons svelte-12qhfyh">check</i><!----><!----><!----></span><!--]--><!----> <!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text"><!---->Follow System<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----><!----></li><!----><!--]--><!--]--><!----> <!--[--><!--[--><!--[-1--><!----><li class="mdc-deprecated-list-item" style="" role="menuitem" aria-disabled="false" tabindex="-1"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><span class="mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon" tag="div"><i class="material-icons svelte-12qhfyh">check</i><!----><!----><!----></span><!--]--><!----> <!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text"><!---->Light<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----><!----></li><!----><!--]--><!--]--><!--[--><!--[-1--><!----><li class="mdc-deprecated-list-item" style="" role="menuitem" aria-disabled="false" tabindex="-1"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><span class="mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon" tag="div"><i class="material-icons svelte-12qhfyh">check</i><!----><!----><!----></span><!--]--><!----> <!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text"><!---->Dark<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----><!----></li><!----><!--]--><!--]--><!--]--><!----></ul></li><!----> <!--[--><!--[-1--><!----><li class="mdc-deprecated-list-divider" role="separator"><!----><!----></li><!----><!--]--><!--]--><!----> <li><ul class="mdc-menu__selection-group"><!--[--><!--[-1--><!----><li class="mdc-deprecated-list-item mdc-deprecated-list-item--selected mdc-menu-item--selected" style="" role="menuitem" aria-disabled="false" tabindex="0"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><span class="mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon" tag="div"><i class="material-icons svelte-12qhfyh">check</i><!----><!----><!----></span><!--]--><!----> <!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text"><!---->Svelte<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----><!----></li><!----><!--]--><!--]--><!----> <!--[--><!--[--><!--[-1--><!----><li class="mdc-deprecated-list-item" style="" role="menuitem" aria-disabled="false" tabindex="-1"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><span class="mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon" tag="div"><i class="material-icons svelte-12qhfyh">check</i><!----><!----><!----></span><!--]--><!----> <!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text"><!---->Material<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----><!----></li><!----><!--]--><!--]--><!--[--><!--[-1--><!----><li class="mdc-deprecated-list-item" style="" role="menuitem" aria-disabled="false" tabindex="-1"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><span class="mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon" tag="div"><i class="material-icons svelte-12qhfyh">check</i><!----><!----><!----></span><!--]--><!----> <!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text"><!---->Fixation<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----><!----></li><!----><!--]--><!--]--><!--[--><!--[-1--><!----><li class="mdc-deprecated-list-item" style="" role="menuitem" aria-disabled="false" tabindex="-1"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><span class="mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon" tag="div"><i class="material-icons svelte-12qhfyh">check</i><!----><!----><!----></span><!--]--><!----> <!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text"><!---->Muted<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----><!----></li><!----><!--]--><!--]--><!--[--><!--[-1--><!----><li class="mdc-deprecated-list-item" style="" role="menuitem" aria-disabled="false" tabindex="-1"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><span class="mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon" tag="div"><i class="material-icons svelte-12qhfyh">check</i><!----><!----><!----></span><!--]--><!----> <!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text"><!---->Bubblegum<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----><!----></li><!----><!--]--><!--]--><!--[--><!--[-1--><!----><li class="mdc-deprecated-list-item" style="" role="menuitem" aria-disabled="false" tabindex="-1"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><span class="mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon" tag="div"><i class="material-icons svelte-12qhfyh">check</i><!----><!----><!----></span><!--]--><!----> <!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text"><!---->Metro<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----><!----></li><!----><!--]--><!--]--><!--[--><!--[-1--><!----><li class="mdc-deprecated-list-item" style="" role="menuitem" aria-disabled="false" tabindex="-1"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><span class="mdc-deprecated-list-item__graphic mdc-menu__selection-group-icon" tag="div"><i class="material-icons svelte-12qhfyh">check</i><!----><!----><!----></span><!--]--><!----> <!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text"><!---->Unity<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----><!----></li><!----><!--]--><!--]--><!--]--><!----></ul></li><!----> <!--[--><!--[-1--><!----><li class="mdc-deprecated-list-divider" role="separator"><!----><!----></li><!----><!--]--><!--]--><!----> <!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="color: inherit;" role="menuitem" aria-disabled="false" tabindex="-1" href="/THEMING.md"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text"><!---->Learn about theming<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!----> <!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="color: inherit;" role="menuitem" aria-disabled="false" tabindex="-1" href="https://github.com/hperrin/svelte-material-ui/tree/master/packages/site/src/theme" target="_blank" rel="noreferrer noorigin"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text"><!---->See the theme source<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!----><!----><!----><!----></ul><!----><!--]--><!--]--><!----><!----></div><!----></div><!----></section><!----><!----><!----><!----><!----></div><!----><!--]--><!--]--><!----></header><!---->
204 <div class="drawer-container svelte-12qhfyh"><aside class="mdc-drawer demo-drawer mdc-theme--secondary-bg hide-initial-small"><!--[--><!--[-1--><!----><div class="mdc-drawer__content" style="padding-bottom: 44px;"><!--[--><!--[-1--><!----><nav class="mdc-deprecated-list" role="list"><!--[--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="" tabindex="-1" href="/INSTALL.md"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Installation<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="margin-left: 25px;" tabindex="-1" href="/SVELTEKIT.md"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->SvelteKit<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="" tabindex="-1" href="/THEMING.md"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Theming<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="" tabindex="-1" href="/MIGRATING.md"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Migrating<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[0--><!--[--><!--[1--><!----><hr class="mdc-deprecated-list-divider" role="separator"><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="" tabindex="-1" href="/demo/quick-guide/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Quick Guide<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[0--><!--[--><!--[1--><!----><hr class="mdc-deprecated-list-divider" role="separator"><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="" tabindex="-1" href="/demo/accordion/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Accordion<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item mdc-deprecated-list-item--activated smui-menu-item--non-interactive" style="" aria-current="page" tabindex="-1"><!--[-1--><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Action Buttons<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></span><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="margin-left: 25px;" tabindex="-1" href="/demo/button/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Button<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="margin-left: 25px;" tabindex="-1" href="/demo/fab/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Floating Action Button<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="margin-left: 25px;" tabindex="-1" href="/demo/icon-button/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Icon Button<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item mdc-deprecated-list-item--activated smui-menu-item--non-interactive" style="" aria-current="page" tabindex="-1"><!--[-1--><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->App Bars<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></span><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="margin-left: 25px;" tabindex="-1" href="/demo/bottom-app-bar/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Bottom App Bar<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="margin-left: 25px;" tabindex="-1" href="/demo/top-app-bar/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Top App Bar<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="" tabindex="-1" href="/demo/badge/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Badge<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="" tabindex="-1" href="/demo/banner/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Banner<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="" tabindex="-1" href="/demo/card/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Cards<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="" tabindex="-1" href="/demo/common/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Common<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="" tabindex="-1" href="/demo/data-table/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Data Table<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="" tabindex="-1" href="/demo/dialog/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Dialog<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="" tabindex="-1" href="/demo/drawer/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Drawer<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="" tabindex="-1" href="/demo/elevation/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Elevation<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="" tabindex="-1" href="/demo/flyout-panel/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Flyout Panel<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="" tabindex="-1" href="/demo/image-list/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Image List<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item mdc-deprecated-list-item--activated smui-menu-item--non-interactive" style="" aria-current="page" tabindex="-1"><!--[-1--><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Inputs and Controls<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></span><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="margin-left: 25px;" tabindex="-1" href="/demo/autocomplete/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Autocomplete<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="margin-left: 25px;" tabindex="-1" href="/demo/checkbox/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Checkbox<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="margin-left: 25px;" tabindex="-1" href="/demo/chips/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Chips<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="margin-left: 25px;" tabindex="-1" href="/demo/chip-input/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Chip Input<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="margin-left: 25px;" tabindex="-1" href="/demo/form-field/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Form Field<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="margin-left: 25px;" tabindex="-1" href="/demo/radio/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Radio Button<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="margin-left: 25px;" tabindex="-1" href="/demo/segmented-button/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Segmented Button<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="margin-left: 25px;" tabindex="-1" href="/demo/select/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Select Menu<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="margin-left: 25px;
204" tabindex="-1" href="/demo/slider/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Slider<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="margin-left: 25px;" tabindex="-1" href="/demo/switch/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Switch<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="margin-left: 25px;" tabindex="-1" href="/demo/textfield/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Text Field<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="" tabindex="-1" href="/demo/layout-grid/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Layout Grid<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="" tabindex="-1" href="/demo/list/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->List<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="" tabindex="-1" href="/demo/menu-surface/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Menu Surface<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="" tabindex="-1" href="/demo/menu/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Menu<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="" tabindex="-1" href="/demo/paper/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Paper<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item mdc-deprecated-list-item--activated smui-menu-item--non-interactive" style="" aria-current="page" tabindex="-1"><!--[-1--><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Progress Indicators<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></span><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="margin-left: 25px;" tabindex="-1" href="/demo/circular-progress/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Circular Progress<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="margin-left: 25px;" tabindex="-1" href="/demo/linear-progress/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Linear Progress<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="" tabindex="-1" href="/demo/ripple/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Ripple<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="" tabindex="-1" href="/demo/snackbar/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Snackbar<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="" tabindex="-1" href="/demo/tabs/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Tabs<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="" tabindex="-1" href="/demo/tooltip/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Tooltip<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="" tabindex="-1" href="/demo/touch-target/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Touch Target<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--[-1--><!--[--><!--[-1--><!----><a class="mdc-deprecated-list-item" style="" tabindex="-1" href="/demo/typography/"><!--[0--><span class="mdc-deprecated-list-item__ripple"></span><!--]--><!--[--><!--[-1--><!----><span class="mdc-deprecated-list-item__text mdc-theme--on-secondary"><!---->Typography<!----><!----><!----><!----></span><!----><!--]--><!--]--><!----><!----><!----></a><!----><!--]--><!--]--><!--]--><!--]--><!----><!----><!----></nav><!----><!--]--><!--]--><!----><!----><!----><!----></div><!----><!--]--><!--]--><!----></aside><!----> <!--[-1--><!--]--> <!--[--><!--[-1--><!----><div class="mdc-drawer-app-content demo-app-content"><main class="demo-main-content svelte-12qhfyh"><!--[--><section class="svelte-1uha8ag"><div style="margin: 5em 0 6em;"><h2 style="margin-bottom: 0;">Svelte Material UI</h2> <p class="mdc-typography--subtitle1">Material UI components for Svelte apps</p></div> <div style="margin: 4em 0;"><div class="boxes svelte-1uha8ag"><div class="smui-paper smui-paper--raised smui-paper--elevation-z1 smui-paper--rounded smui-paper--color-primary box"><!--[--><!--[-1--><!----><h5 class="smui-paper__title" style="display: flex; justify-content: space-between; align-items: center;"><span>Svelte</span> <!--[--><!--[0--><svg class="" aria-hidden="true" focusable="false" tabindex="-1" style="width: 1em; height: auto;" viewBox="0 0 24 24">
204<path fill="currentColor" d="M10.354 21.125a4.44 4.44 0 0 1-4.765-1.767 4.109 4.109 0 0 1-.703-3.107 3.898 3.898 0 0 1 .134-.522l.105-.321.287.21a7.21 7.21 0 0 0 2.186 1.092l.208.063-.02.208a1.253 1.253 0 0 0 .226.83 1.337 1.337 0 0 0 1.435.533 1.231 1.231 0 0 0 .343-.15l5.59-3.562a1.164 1.164 0 0 0 .524-.778 1.242 1.242 0 0 0-.211-.937 1.338 1.338 0 0 0-1.435-.533 1.23 1.23 0 0 0-.343.15l-2.133 1.36a4.078 4.078 0 0 1-1.135.499 4.44 4.44 0 0 1-4.765-1.766 4.108 4.108 0 0 1-.702-3.108 3.855 3.855 0 0 1 1.742-2.582l5.589-3.563a4.072 4.072 0 0 1 1.135-.499 4.44 4.44 0 0 1 4.765 1.767 4.109 4.109 0 0 1 .703 3.107 3.943 3.943 0 0 1-.134.522l-.105.321-.286-.21a7.204 7.204 0 0 0-2.187-1.093l-.208-.063.02-.207a1.255 1.255 0 0 0-.226-.831 1.337 1.337 0 0 0-1.435-.532 1.231 1.231 0 0 0-.343.15L8.62 9.368a1.162 1.162 0 0 0-.524.778 1.24 1.24 0 0 0 .211.937 1.338 1.338 0 0 0 1.435.533 1.235 1.235 0 0 0 .344-.151l2.132-1.36a4.067 4.067 0 0 1 1.135-.498 4.44 4.44 0 0 1 4.765 1.766 4.108 4.108 0 0 1 .702 3.108 3.857 3.857 0 0 1-1.742 2.583l-5.589 3.562a4.072 4.072 0 0 1-1.135.499m10.358-17.95C18.484-.015 14.082-.96 10.9 1.068L5.31 4.63a6.412 6.412 0 0 0-2.896 4.295 6.753 6.753 0 0 0 .666 4.336 6.43 6.43 0 0 0-.96 2.396 6.833 6.833 0 0 0 1.168 5.167c2.229 3.19 6.63 4.135 9.812 2.108l5.59-3.562a6.41 6.41 0 0 0 2.896-4.295 6.756 6.756 0 0 0-.665-4.336 6.429 6.429 0 0 0 .958-2.396 6.831 6.831 0 0 0-1.167-5.168Z"></path><!----><!----></svg><!--]--><!--]--><!----><!----><!----><!----><!----></h5><!----><!--]--><!--]--><!----> <!--[--><!--[-1--><!----><div class="smui-paper__content"><!---->SMUI provides strictly typed Svelte components and actions for a wide 205 variety of interface elements. SMUI also provides helper utilities for 206 building custom and advanced UI components.<!----><!----><!----><!----></div><!----><!--]--><!--]--><!----><!----></div><!----> <div class="smui-paper smui-paper--raised smui-paper--elevation-z1 smui-paper--rounded smui-paper--color-svelte-blue box"><!--[--><!--[-1--><!----><h5 class="smui-paper__title" style="display: flex; justify-content: space-between; align-items: center;"><span>Material</span> <!--[--><!--[0--><svg class="" aria-hidden="true" focusable="false" tabindex="-1" style="width: 1em; height: auto;" viewBox="0 0 24 24"><path fill="currentColor" d="M11.9998 23.9997c-1.6545 0-3.218-.309-4.691-.927-1.4544-.6364-2.7269-1.4909-3.8179-2.5639-1.073-1.0905-1.9274-2.3634-2.5634-3.8179C.3085 15.2179 0 13.6545 0 12c0-1.6725.309-3.2364.927-4.6909.6365-1.4545 1.491-2.718 2.564-3.791C4.5818 2.4278 5.8543 1.5733 7.3087.9548c1.473-.6365 3.0365-.9545 4.691-.9545 1.673 0 3.2364.318 4.6909.955 1.4544.618 2.7179 1.4725 3.7909 2.563 1.091 1.073 1.945 2.3364 2.5634 3.7909C23.6815 8.7641 24 10.3275 24 12c0 1.655-.3185 3.218-.955 4.6909-.618 1.4545-1.4724 2.7274-2.5634 3.818-1.073 1.0729-2.3365 1.9274-3.791 2.5639-1.455.618-3.0179.927-4.6909.927zm-7.6364-5.8633V5.8636A9.4843 9.4843 0 0 0 2.755 8.7001C2.373 9.7365 2.1825 10.8365 2.1825 12s.1905 2.2725.5724 3.3274a9.5713 9.5713 0 0 0 1.609 2.809zm1.5-13.7727H18.163a9.4848 9.4848 0 0 0-2.836-1.609c-1.0549-.382-2.1639-.5725-3.3273-.5725-1.1635 0-2.2725.1905-3.327.5725a9.5713 9.5713 0 0 0-2.8094 1.609Zm6.1364 10.3637 4.1179-8.1818H7.9088Zm1.091 2.727h4.3633V8.7276Zm-6.5454 0h4.3634L6.5454 8.7276Zm8.7813 3.791c1.0545-.382 2-.918 2.836-1.609H5.8628a9.5713 9.5713 0 0 0 2.8094 1.609c1.0545.3819 2.1635.5724 3.327.5724 1.0543 0 2.1823-.1579 3.3274-.5725zm4.3089-3.109a9.5713 9.5713 0 0 0 1.609-2.809c.382-1.055.5724-2.164.5724-3.3274 0-1.1635-.1905-2.2635-.5724-3.3-.382-1.055-.918-1.9999-1.609-2.8364Z"></path><!----><!----></svg><!--]--><!--]--><!----><!----><!----><!----><!----></h5><!----><!--]--><!--]--><!----> <!--[--><!--[-1--><!----><div class="smui-paper__content"><!---->SMUI components follow the <a style="color: #fff;" href="https://m2.material.io/" target="_blank">Material Spec</a>, by Google. As well as implementing the components from the spec as 207 closely as possible, SMUI provides additional components that aim to 208 match the Material design while giving you flexibility and ease of 209 development.<!----><!----><!----><!----></div><!----><!--]--><!--]--><!----><!----></div><!----> <div class="smui-paper smui-paper--raised smui-paper--elevation-z1 smui-paper--rounded smui-paper--color-secondary box"><!--[--><!--[-1--><!----><h5 class="smui-paper__title" style="display: flex; justify-content: space-between; align-items: center;"><span>Sass</span> <!--[--><!--[0--><svg class="" aria-hidden="true" focusable="false" tabindex="-1" style="width: 1em; height: auto;" viewBox="0 0 24 24">
209<path fill="currentColor" d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zM9.615 15.998c.175.645.156 1.248-.024 1.792l-.065.18c-.024.061-.052.12-.078.176-.14.29-.326.56-.555.81-.698.759-1.672 1.047-2.09.805-.45-.262-.226-1.335.584-2.19.871-.918 2.12-1.509 2.12-1.509v-.003l.108-.061zm9.911-10.861c-.542-2.133-4.077-2.834-7.422-1.645-1.989.707-4.144 1.818-5.693 3.267C4.568 8.48 4.275 9.98 4.396 10.607c.427 2.211 3.457 3.657 4.703 4.73v.006c-.367.18-3.056 1.529-3.686 2.925-.675 1.47.105 2.521.615 2.655 1.575.436 3.195-.36 4.065-1.649.84-1.261.766-2.881.404-3.676.496-.135 1.08-.195 1.83-.104 2.101.24 2.521 1.56 2.43 2.1-.09.539-.523.854-.674.944-.15.091-.195.12-.181.181.015.09.091.09.21.075.165-.03 1.096-.45 1.141-1.471.045-1.29-1.186-2.729-3.375-2.7-.9.016-1.471.091-1.875.256-.03-.045-.061-.075-.105-.105-1.35-1.455-3.855-2.475-3.75-4.41.03-.705.285-2.564 4.8-4.814 3.705-1.846 6.661-1.335 7.171-.21.733 1.604-1.576 4.59-5.431 5.024-1.47.165-2.235-.404-2.431-.615-.209-.225-.239-.24-.314-.194-.12.06-.045.255 0 .375.12.3.585.825 1.396 1.095.704.225 2.43.359 4.5-.45 2.324-.899 4.139-3.405 3.614-5.505l.073.067z"></path><!----><!----></svg><!--]--><!--]--><!----><!----><!----><!----><!----></h5><!----><!--]--><!--]--><!----> <!--[--><!--[-1--><!----><div class="smui-paper__content"><!---->SMUI is styled with Sass. SMUI provides variables to customize the 210 look of the UI and mixins to help style your own elements. You can 211 customize the look of your UI with <a style="color: #fff;" href="https://github.com/hperrin/svelte-material-ui/blob/master/packages/site/src/theme/_smui-theme.scss" target="_blank">just a few variables</a>.<!----><!----><!----><!----></div><!----><!--]--><!--]--><!----><!----></div><!----></div> <div style="margin: 0.5em 0 6.5em; text-align: center;"><div><!--[--><!--[-1--><!----><a class="mdc-icon-button mdc-icon-button--display-flex" style="color: var(--mdc-on-surface);" href="https://matrix.to/#/#smui:matrix.port87.help" title="Join the Matrix Space"><div class="mdc-icon-button__ripple"></div> <!--[0--><span class="mdc-icon-button__focus-ring"></span><!--]--> <!--[--><!--[0--><svg class="mdc-icon-button__icon" aria-hidden="true" focusable="false" tabindex="-1" viewBox="0 0 24 24"><path fill="currentColor" d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.337-.439.595-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z"></path><!----><!----></svg><!--]--><!--]--><!----><!--[-1--><!--]--><!----><!----></a><!----><!--]--><!--]--><!----> <!--[--><!--[-1--><!----><a class="mdc-icon-button mdc-icon-button--display-flex" style="color: var(--mdc-on-surface);" href="https://discord.gg/aFzmkrmg9P" title="Join the Discord Server"><div class="mdc-icon-button__ripple"></div> <!--[0--><span class="mdc-icon-button__focus-ring"></span><!--]--> <!--[--><!--[0--><svg class="mdc-icon-button__icon" aria-hidden="true" focusable="false" tabindex="-1" viewBox="0 0 24 24"><path fill="currentColor" d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"></path><!----><!----></svg><!--]--><!--]--><!----><!--[-1--><!--]--><!----><!----></a><!----><!--]--><!--]--><!----> <!--[--><!--[-1--><!----><a class="mdc-icon-button mdc-icon-button--display-flex" style="color: var(--mdc-on-surface);" href="https://port87.social/@hperrin" title="Hunter Perrin (SMUI Author) on Mastodon"><div class="mdc-icon-button__ripple"></div> <!--[0--><span class="mdc-icon-button__focus-ring"></span><!--]--> <!--[--><!--[0--><svg class="mdc-icon-button__icon" aria-hidden="true" focusable="false" tabindex="-1" viewB
211ox="0 0 24 24"><path fill="currentColor" d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"></path><!----><!----></svg><!--]--><!--]--><!----><!--[-1--><!--]--><!----><!----></a><!----><!--]--><!--]--><!----></div> <h4 class="mdc-typography--headline6">Made with â¤ï¸ by <a style="color: var(--mdc-on-surface);" href="https://port87.com/" target="_blank">Port87 Email</a></h4></div> <div class="features-list svelte-1uha8ag"><div class="smui-paper smui-paper--outlined smui-paper--rounded smui-paper--color-primary"><div style="width: 40px;"><!--[--><!--[0--><svg class="" aria-hidden="true" focusable="false" tabindex="-1" style="width: 40px; height: 40px;" viewBox="0 0 24 24"><path fill="currentColor" d="M3,3H21V21H3V3M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86M13,11.25H8V12.75H9.5V20H11.25V12.75H13V11.25Z"></path><!----><!----></svg><!--]--><!--]--><!----></div> <div style="flex-grow: 1;"><!--[--><!--[-1--><!----><h5 class="smui-paper__title"><!---->Fully, Strictly Typed<!----><!----><!----><!----></h5><!----><!--]--><!--]--><!----> <!--[--><!--[-1--><!----><div class="smui-paper__content"><!---->SMUI is strictly typed with TypeScript. This not only helps catch 212 bugs early, it helps while developing as every property is 213 autocompleted by modern IDEs.<!----><!----><!----><!----></div><!----><!--]--><!--]--><!----></div><!----></div><!----> <div class="smui-paper smui-paper--outlined smui-paper--rounded smui-paper--color-secondary"><div style="width: 40px;"><!--[--><!--[0--><svg class="" aria-hidden="true" focusable="false" tabindex="-1" style="width: 40px; height: 40px;" viewBox="0 0 24 24"><path fill="currentColor" d="M21,9H15V22H13V16H11V22H9V9H3V7H21M12,2A2,2 0 0,1 14,4A2,2 0 0,1 12,6C10.89,6 10,5.1 10,4C10,2.89 10.89,2 12,2Z"></path><!----><!----></svg><!--]--><!--]--><!----></div> <div style="flex-grow: 1;"><!--[--><!--[-1--><!----><h5 class="smui-paper__title"><!---->Accessible by Default<!----><!----><!----><!----></h5><!----><!--]--><!--]--><!----> <!--[--><!--[-1--><!----><div class="smui-paper__content"><!---->SMUI automatically adds appropriate ARIA attributes to components to 214 provide accessibility to screen readers. SMUI is also fully keyboard 215 accessible, meaning motor impaired users can easily use SMUI 216 components.<!----><!----><!----><!----></div><!----><!--]--><!--]--><!----></div><!----></div><!----> <div class="smui-paper smui-paper--outlined smui-paper--rounded smui-paper--color-primary"><div style="width: 40px;"><!--[--><!--[0--><svg class="" aria-hidden="true" focusable="false" tabindex="-1" style="width: 40px; height: 40px;" viewBox="0 0 24 24">
216<path fill="currentColor" d="M10,9A1,1 0 0,1 11,8A1,1 0 0,1 12,9V13.47L13.21,13.6L18.15,15.79C18.68,16.03 19,16.56 19,17.14V21.5C18.97,22.32 18.32,22.97 17.5,23H11C10.62,23 10.26,22.85 10,22.57L5.1,18.37L5.84,17.6C6.03,17.39 6.3,17.28 6.58,17.28H6.8L10,19V9M11,5A4,4 0 0,1 15,9C15,10.5 14.2,11.77 13,12.46V11.24C13.61,10.69 14,9.89 14,9A3,3 0 0,0 11,6A3,3 0 0,0 8,9C8,9.89 8.39,10.69 9,11.24V12.46C7.8,11.77 7,10.5 7,9A4,4 0 0,1 11,5Z"></path><!----><!----></svg><!--]--><!--]--><!----></div> <div style="flex-grow: 1;"><!--[--><!--[-1--><!----><h5 class="smui-paper__title"><!---->Touch Friendly<!----><!----><!----><!----></h5><!----><!--]--><!--]--><!----> <!--[--><!--[-1--><!----><div class="smui-paper__content"><!---->SMUI provides increased touch targets to allow ease of use on mobile 217 devices, conforming to the Material Spec requirement of minimum 48px 218 x 48px touch targets.<!----><!----><!----><!----></div><!----><!--]--><!--]--><!----></div><!----></div><!----> <div class="smui-paper smui-paper--outlined smui-paper--rounded smui-paper--color-secondary"><div style="width: 40px;"><!--[--><!--[0--><svg class="" aria-hidden="true" focusable="false" tabindex="-1" style="width: 40px; height: 40px;" viewBox="0 0 24 24"><path fill="currentColor" d="M9,6H5V10H7V8H9M19,10H17V12H15V14H19M21,16H3V4H21M21,2H3C1.89,2 1,2.89 1,4V16A2,2 0 0,0 3,18H10V20H8V22H16V20H14V18H21A2,2 0 0,0 23,16V4C23,2.89 22.1,2 21,2"></path><!----><!----></svg><!--]--><!--]--><!----></div> <div style="flex-grow: 1;"><!--[--><!--[-1--><!----><h5 class="smui-paper__title"><!---->Server Side Rendering<!----><!----><!----><!----></h5><!----><!--]--><!--]--><!----> <!--[--><!--[-1--><!----><div class="smui-paper__content"><!---->SMUI can be fully rendered on the server, meaning faster time to 219 first meaningful paint. SMUI fully supports SvelteKit. In fact, the 220 site you're looking at is a SvelteKit app.<!----><!----><!----><!----></div><!----><!--]--><!--]--><!----></div><!----></div><!----> <div class="smui-paper smui-paper--outlined smui-paper--rounded smui-paper--color-primary"><div style="width: 40px;"><!--[--><!--[0--><svg class="" aria-hidden="true" focusable="false" tabindex="-1" style="width: 40px; height: 40px;" viewBox="0 0 24 24"><path fill="currentColor" d="M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z"></path><!----><!----></svg><!--]--><!--]--><!----></div> <div style="flex-grow: 1;"><!--[--><!--[-1--><!----><h5 class="smui-paper__title"><!---->Fully Themable<!----><!----><!----><!----></h5><!----><!--]--><!--]--><!----> <!--[--><!--[-1--><!----><div class="smui-paper__content"><!---->Components are themable using Sass variables. Everything from their 221 shape, color, density, borders, interaction states, and more is 222 themable.<!----><!----><!----><!----></div><!----><!--]--><!--]--><!----></div><!----></div><!----> <div class="smui-paper smui-paper--outlined smui-paper--rounded smui-paper--color-secondary"><div style="width: 40px;"><!--[--><!--[0--><svg class="" aria-hidden="true" focusable="false" tabindex="-1" style="width: 40px; height: 40px;" viewBox="0 0 24 24"><path fill="currentColor" d="M20 2H4C2.9 2 2 2.9 2 4V16C2 17.1 2.9 18 4 18H8V21C8 21.6 8.4 22 9 22H9.5C9.7 22 10 21.9 10.2 21.7L13.9 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2M16 11H11.5L13.3 12.8L12 14L8 10L12 6L13.2 7.2L11.5 9H16V11Z"></path><!----><!----></svg><!--]--><!--]--><!----></div> <div style="flex-grow: 1;"><!--[--><!--[-1--><!----><h5 class="smui-paper__title"><!---->RTL/Internationalization Support<!----><!----><!----><!----></h5><!----><!--]--><!--]--><!----> <!--[--><!--[-1--><!----><div class="smui-paper__content"><!---->SMUI is RTL aware, and components will adapt their design to suit 223 the language of the user.<!----><!----><!----><!----></div><!----><!--]--><!--]--><!----></div><!----></div><!----> <div class="smui-paper smui-paper--outlined smui-paper--rounded smui-paper--color-primary"><div style="width: 40px;"><!--[--><!--[0--><svg class="" aria-hidden="true" focusable="false" tabindex="-1" style="width: 40px; height: 40px;" viewBox="0 0 24 24">
223<path fill="currentColor" d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z"></path><!----><!----></svg><!--]--><!--]--><!----></div> <div style="flex-grow: 1;"><!--[--><!--[-1--><!----><h5 class="smui-paper__title"><!---->Widely Used, a Growing Community<!----><!----><!----><!----></h5><!----><!--]--><!--]--><!----> <!--[--><!--[-1--><!----><div class="smui-paper__content"><!---->With over <a href="https://github.com/hperrin/svelte-material-ui/network/dependents?package_id=UGFja2FnZS01NTM5MDg5MDQ" target="_blank">3,000 projects</a> using SMUI components, it is the most popular Svelte UI library. For 224 good reason, too. It is the most versatile and adaptable Svelte UI library, 225 guaranteed.<!----><!----><!----><!----></div><!----><!--]--><!--]--><!----></div><!----></div><!----> <div class="smui-paper smui-paper--outlined smui-paper--rounded smui-paper--color-secondary"><div style="width: 40px;"><!--[--><!--[0--><svg class="" aria-hidden="true" focusable="false" tabindex="-1" style="width: 40px; height: 40px;" viewBox="0 0 24 24"><path fill="currentColor" d="M10,4V1L14,5L10,9V6A6,6 0 0,0 4,12L4.08,13H2.06L2,12A8,8 0 0,1 10,4M17,2H20A2,2 0 0,1 22,4V20A2,2 0 0,1 20,22H17A2,2 0 0,1 15,20V4A2,2 0 0,1 17,2M4,15H13V22H4A2,2 0 0,1 2,20V17A2,2 0 0,1 4,15Z"></path><!----><!----></svg><!--]--><!--]--><!----></div> <div style="flex-grow: 1;"><!--[--><!--[-1--><!----><h5 class="smui-paper__title"><!---->Adaptable, Versatile<!----><!----><!----><!----></h5><!----><!--]--><!--]--><!----> <!--[--><!--[-1--><!----><div class="smui-paper__content"><!---->SMUI supports adding arbitrary attributes and actions to every 226 component and many internal elements within them. SMUI forwards all 227 events from every component, and supports event modifiers, including 228 passive. SMUI works in the Svelte REPL, meaning you can <a href="https://svelte.dev/repl/aa857c3bb5eb478cbe6b1fd6c6da522a" target="_blank">play with it right now</a>.<!----><!----><!----><!----></div><!----><!--]--><!--]--><!----></div><!----></div><!----> <div class="smui-paper smui-paper--outlined smui-paper--rounded smui-paper--color-primary"><div style="width: 40px;"><!--[--><!--[0--><svg class="" aria-hidden="true" focusable="false" tabindex="-1" style="width: 40px; height: 40px;" viewBox="0 0 24 24"><path fill="currentColor" d="M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3M19,3H14.82C14.4,1.84 13.3,1 12,1C10.7,1 9.6,1.84 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3Z"></path><!----><!----></svg><!--]--><!--]--><!----></div> <div style="flex-grow: 1;"><!--[--><!--[-1--><!----><h5 class="smui-paper__title"><!---->Material Design Compliant<!----><!----><!----><!----></h5><!----><!--]--><!--]--><!----> <!--[--><!--[-1--><!----><div class="smui-paper__content"><!---->Every SMUI component fully follows the Material Design 229 specification. You can build up-to-spec UIs with SMUI.<!----><!----><!----><!----></div><!----><!--]--><!--]--><!----></div><!----></div><!----></div></div> <div style="margin: 4em 0;"><p>[ <a href="https://matrix.to/#/#smui:matrix.port87.help">Matrix</a> | <a href="https://discord.gg/aFzmkrmg9P">Discord</a> | <a href="https://github.com/hperrin/svelte-material-ui">GitHub</a> | <a href="https://github.com/hperrin/svelte-material-ui/issues">Issue Tracker</a> | © 2019-2026 Hunter Perrin ]</p></div></section><!--]--><!----></main><!----><!----><!----><!----></div><!----><!--]--><!--]--><!----></div><!--]--><!--]--><!--]--> <!--[-1--><!--]--><!--]--> 230 231
231<script> 232 { 233 __sveltekit_c5rzhx = { 234 base: new URL(".", location).pathname.slice(0, -1) 235 }; 236 237 const element = document.currentScript.parentElement; 238 239 Promise.all([ 240 import("./_app/immutable/entry/start.CrBwZ__W.js"), 241 import("./_app/immutable/entry/app.C9dKaIEz.js") 242 ]).then(([kit, app]) => { 243 kit.start(app, element, { 244 node_ids: [0, 2], 245 data: [null,null], 246 form: null, 247 error: null 248 }); 249 }); 250 } 251 </script>
251 252 </div> 253
253<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"a4b1faf6310540f08b65d3d15a2ffe02","r":1,"spa":2}' crossorigin="anonymous"></script>
253 254</body> 255</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.