# M3 Svelte

This is M3 Svelte, a Svelte component library that implements the Material 3 design system by @KTibow.

## Documentation pages (Svelte source)

These are the actual Svelte files from the docs site. They're authoritative for getting started and building blocks:

### Quick Start page

```svelte
<svelte:head><title>Quick start</title></svelte:head>
<ol>
  <li>
    <h2>
      <div class="number">
        1
        <Icon icon={iconDownload} />
      </div>
      <div class="text">Install M3 Svelte</div>
      <Button label>
        <input type="checkbox" bind:checked={useTokenShaker} />
        Use token-shaker?
      </Button>
    </h2>
    {#if useTokenShaker}
      <Snippet
        name="install.sh"
        html={/* sh */ `pnpm install m3-svelte vite-plugin-functions-mixins vite-plugin-token-shaker -D`}
      />
    {:else}
      <Snippet
        name="install.sh"
        html={/* sh */ `pnpm install m3-svelte vite-plugin-functions-mixins -D`}
      />
    {/if}
  </li>
  <li>
    <h2>
      <div class="number">
        2
        <Icon icon={iconConfig} />
      </div>
      <div class="text">Enable plugins</div>
      <Button label>
        <input type="checkbox" bind:checked={useVite} />
        Use pure Vite?
      </Button>
    </h2>
    {#if useVite}
      {#if useTokenShaker}
        <Snippet
          name="vite.config.ts"
          html={/* typescript */ `import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { functionsMixins } from "vite-plugin-functions-mixins";
import { tokenShaker } from "vite-plugin-token-shaker";

export default defineConfig({
  plugins: [svelte(), functionsMixins({ deps: ["m3-svelte"] }), tokenShaker()],
});`}
        />
      {:else}
        <Snippet
          name="vite.config.ts"
          html={/* typescript */ `import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { functionsMixins } from "vite-plugin-functions-mixins";

export default defineConfig({
  plugins: [svelte(), functionsMixins({ deps: ["m3-svelte"] })],
});`}
        />
      {/if}
    {:else if useTokenShaker}
      <Snippet
        name="vite.config.ts"
        html={/* typescript */ `import { defineConfig } from "vite";
import { sveltekit } from "@sveltejs/kit/vite";
import { functionsMixins } from "vite-plugin-functions-mixins";
import { tokenShaker } from "vite-plugin-token-shaker";

export default defineConfig({
  plugins: [sveltekit(), functionsMixins({ deps: ["m3-svelte"] }), tokenShaker()],
});`}
      />
    {:else}
      <Snippet
        name="vite.config.ts"
        html={/* typescript */ `import { defineConfig } from "vite";
import { sveltekit } from "@sveltejs/kit/vite";
import { functionsMixins } from "vite-plugin-functions-mixins";

export default defineConfig({
  plugins: [sveltekit(), functionsMixins({ deps: ["m3-svelte"] })],
});`}
      />
    {/if}
  </li>
  <li>
    <h2>
      <div class="number">
        3
        <Icon icon={iconPalette} />
      </div>
      <div class="text">Enable your <a href={resolve("/theme")}>theme snippet</a></div>
    </h2>
    {#if useVite}
      <Snippet name="index.ts" html={/* typescript */ `import "./app.css";`} />
    {:else}
      <Snippet
        name="+layout.svelte"
        html={/* svelte */ `<${""}script>
import "../app.css";
</${""}script>`}
      />
    {/if}
    <Snippet name="app.css" html={/* css */ `/* Your theme snippet */`} />
  </li>
  <li>
    <h2>
      <div class="number">
        4
        <Icon icon={iconType} />
      </div>
      <div class="text">Enable a font</div>
      <Button label>
        <input type="checkbox" bind:checked={useCustomFont} />
        Use custom font?
      </Button>
    </h2>
    {#if useCustomFont}
      <Snippet
        name="app.css"
        html={/* css */ `:root {
  --m3-font: [your font], system-ui;
}`}
      />
    {:else}
      <Snippet
        name={useVite ? "index.html" : "app.html"}
        html={/* html */ `<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,400..700&display=swap" />`}
      />
    {/if}
  </li>
</ol>
<div class="stack">
  <Snippet
    name="Now you can start using components"
    html={/* svelte */ `<${""}script>
  import { Button } from "m3-svelte";
</${""}script>

<${""}Button onclick={() => alert("Hello world")}>Click me</${""}Button>`}
    stretch
  />
  <a class="m3-layer" href={resolve("/docs/detailed-walkthrough")}>
    <Icon icon={iconNext} size={24} />
    Keep learning
  </a>
</div>

<style>
  ol {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    padding: 0;
    margin: 0;
    margin-bottom: 4rem;
    list-style-type: none;
  }
  ol > li {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  h2 {
    @apply --m3-title-large;
    display: flex;
    @media (width < 37.5rem) {
      flex-direction: column;
      align-items: start;
    }
    gap: 0.5rem;
    margin: 0;
  }
  .number {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    height: 2.5rem;
    border-radius: 3rem;
    padding: 0 1rem;
    background-color: var(--m3c-primary-container);
    color: var(--m3c-on-primary-container);
  }
  .text {
    display: flex;
    align-items: center;
    gap: 0.25em;

    min-height: 2.5rem;
    border-radius: 3rem;
    padding: 0 1rem;
    background-color: var(--m3c-secondary-container);
    color: var(--m3c-on-secondary-container);
  }
  a {
    color: inherit;
  }

  .stack {
    display: grid;
    gap: 4rem;
    @media (width >= 37.5rem) {
      grid-template-columns: 1fr 1fr;
    }
  }
  .stack > a {
    @apply --m3-title-large;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background-color: var(--m3c-primary-container-subtle);
    color: var(--m3c-on-primary-container-subtle);
    padding: 1.5rem;
    border-radius: 1rem;
    text-decoration: none;
  }
</style>

```

### Detailed Walkthrough page

```svelte
<svelte:head><title>Walkthrough</title></svelte:head>

<p>
  Welcome to M3 Svelte! If you haven't already, play around with the components on the home page.
  It's rather fun. They even adapt to the theme you pick. You should also check out the Discord and
  GitHub if you want to keep track of this project.
</p>

<p>
  The rest of this page covers some finer details of M3 Svelte. It isn't the place to look for
  component-specific info - the home page is.
</p>

<h2>
  Make your own components
  <ConnectedButtons>
    <Button variant="tonal" square label
      ><input type="radio" value="vanilla" bind:group={$appType} />Vanilla</Button
    >
    <Button variant="tonal" square label
      ><input type="radio" value="tailwind" bind:group={$appType} />Tailwind</Button
    >
  </ConnectedButtons>
</h2>
{#if $appType == "tailwind"}
  <p>
    ⚠️ Tailwind <a href="https://github.com/tailwindlabs/tailwindcss/pull/19427"
      >may not support mixins yet</a
    >. You may need to stay on M3 Svelte v5 for now.
  </p>
{/if}
<p>
  Chances are M3 doesn't have everything you need. That's where you can make your own components
  while still using Material 3 elements. Here's an example.
</p>
{#if $appType == "tailwind"}
  <Snippet
    name="Component.svelte"
    html={/* svelte */ `<${""}button class="rounded-full bg-surface-container-low text-primary shadow-1 m3-layer">Click me</${""}button>`}
  />
{:else}
  <Snippet
    name="Component.svelte"
    html={/* svelte */ `<${""}button class="m3-layer">Click me</${""}button>
<${""}style>
  button {
    background-color: var(--m3c-surface-container-low);
    color: var(--m3c-primary);
    box-shadow: var(--m3-elevation-1);
    border-radius: var(--m3-shape-full);
  }
</${""}style>`}
  />
{/if}
<p>
  If layers don't work on your own components, or even in M3 Svelte's, you may need to <code
    >import "m3-svelte/etc/layer"</code
  >.
</p>

<h2>Apply your theme</h2>
{#if $appType == "tailwind"}
  <Snippet
    name="app.html"
    html={/* html */ `<html class="m3-font-body-large bg-surface text-on-surface" lang="en">`}
  />
{:else}
  <Snippet
    name="app.css"
    html={/* css */ `:root {
  @apply --m3-body-large;
  background-color: var(--m3c-surface);
  color: var(--m3c-on-surface);
}`}
  />
{/if}

<h2>So what's going on here?</h2>
<p>We're using M3 Svelte globals.</p>
<p class="styles-defined">
  Some globals are defined in <a
    href="https://github.com/KTibow/m3-svelte/blob/main/src/lib/etc/styles.css">styles.css</a
  >. If you want to change them, nothing's stopping you from overriding them in your own theme.
</p>
<p class="theme-defined">
  Other globals are defined directly in your theme - you can read and write them there.
</p>
<h3>Tokens</h3>
<p>
  These live in <code>@layer tokens</code>. M3 Svelte defines many, like
  <span class="styles-defined">elevations</span>
  (<code class="styles-defined">--m3-elevation-0</code> through
  <code class="styles-defined">--m3-elevation-5</code>) and
  <span class="styles-defined">shapes</span> (<code class="styles-defined">--m3-shape-[size]</code>
  where size is none, extra-small, small, medium, large, extra-large, or full).
  <span class="theme-defined">Colors</span>, the
  <code class="theme-defined">--m3c-</code> variables, are also tokens.
</p>
<p>Want these to be minified and inlined? The "Use token-shaker" option from setup does that.</p>
<h3>Variables</h3>
<p>These start with <code>--m3v-</code>, and let you send information to M3 Svelte.</p>
<ul>
  <li>Set <code>--m3v-bottom-offset</code> to shift up snackbars</li>
  <li>Set <code>--m3v-background</code> to calibrate the color of an outlined field's box</li>
</ul>
<h3>Functions</h3>
<p>These are shorthands for specific logic, like:</p>
<ul>
  <li>
    <code class="styles-defined">--translucent([color], [opacity])</code> makes a color semitransparent
  </li>
  <li><code class="theme-defined">--m3-density([size])</code> adjusts a size</li>
</ul>
<h3>Mixins</h3>
<p>
  These are shorthands for specific properties, applied with <code>@apply --[name]</code>.
</p>
<p>
  M3 Svelte's built in mixins: <span class="styles-defined">font styles</span>
  (<code class="styles-defined">@apply --m3-[scale]-[size]</code>. scales: display, headline, title,
  body, label. sizes: large, medium, small) and <span class="styles-defined">focus styles</span>
  (<code class="styles-defined">@apply --m3-focus-inward</code> and
  <code class="styles-defined">@apply --m3-focus-none</code>).
</p>

<style>
  p {
    margin: 0;
    max-width: 100ch;
  }
  p:first-child ~ :global(*) {
    margin-top: 1em;
  }
  h2 {
    @apply --m3-headline-large;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
  }
  h3 {
    @apply --m3-headline-small;
    margin: 0;
  }
  code {
    font-size: 0.9rem;
    background-color: var(--m3c-surface-container-highest);
    padding-inline: 2px;
    border-radius: 0.25rem;
  }
  a {
    color: var(--m3c-primary);
  }
  .styles-defined {
    background-color: var(--m3c-primary-container-subtle);
    color: var(--m3c-on-primary-container-subtle);
  }
  .theme-defined {
    background-color: var(--m3c-tertiary-container-subtle);
    color: var(--m3c-on-tertiary-container-subtle);
  }
  p.styles-defined,
  p.theme-defined {
    padding-inline: 0.25rem;
    margin-inline: -0.25rem;
    border-radius: var(--m3-shape-small);
    align-self: start;
  }
</style>

```

## Tips

M3 Svelte is more and less than the typical component framework.

On one hand, Material 3 consists of guidelines across color, shadow, easing, animation, and spacing, and M3 Svelte is all of that. You don't have to make your own components or animations - you could use components like `Card` and animate them with the `sharedAxisTransition`, eased with `easeEmphasized`.

On the other hand, M3 Svelte doesn't give you a template. There are many things you have to do yourself, like:

- Generating and pasting your theme
- Including your font
- Resetting CSS
- Setting up your own layout (ideally a responsive one)
- Styling your components (if you need something M3 doesn't have)
- Slotting in <input>s
- Rendering icons

If you're ever unsure about something, you might want to check the [source code](https://github.com/KTibow/m3-svelte). The M3 Svelte demo website is built with M3 Svelte and might have implemented what you're trying to do.

## Troubleshooting

You should avoid trying to restyle components. You can't set a `class` and due to Svelte scoped styles, even if you could, it wouldn't work. I repeat, you CANNOT set a `class` on M3 Svelte components. Always look for alternatives, like using `gap` instead of `margin`. If you _must_ do this, you would have to do something like `.my-container > :global(.m3-container)`.

You must wrap Checkbox, Radio, and Switch in <label>s.

M3 Svelte uses the Iconify ecosystem. M3 Svelte imports icons from NPM and renders them as SVG. Some components render icons for you:

```svelte
<script>
  import { FAB } from "m3-svelte";
  import iconPlus from "@ktibow/iconset-material-symbols/add";
</script>

<FAB icon={iconPlus} />
```

While in other cases, you render them yourselves:

```svelte
<script>
  import { ListItem, Icon } from "m3-svelte";
  import iconPlus from "@ktibow/iconset-material-symbols/add";
</script>

<ListItem headline="User">
  {#snippet leading()}
    <Icon icon={iconPlus} />
  {/snippet}
</ListItem>
```

## Examples

Here's an example todo list component:

```svelte
<script>
  import { TextField, Button, ListItem, Icon, Checkbox } from "m3-svelte";
  import iconPlus from "@ktibow/iconset-material-symbols/add";
  import iconDelete from "@ktibow/iconset-material-symbols/delete";

  let tasks = [
    { id: 1, text: "Learn M3 Svelte", completed: false },
    { id: 2, text: "Build a prototype", completed: false },
    { id: 3, text: "Test components", completed: true },
  ];

  let newTaskText = "";

  function addTask() {
    newTaskText = newTaskText.trim();
    if (!newTaskText) return;

    tasks = [
      ...tasks,
      {
        id: Math.max(...tasks.map((t) => t.id)) + 1,
        text: newTaskText,
        completed: false,
      },
    ];
    newTaskText = "";
  }
</script>

<div class="tasks">
  {#each tasks as task (task.id)}
    <ListItem headline={task.text}>
      <label class="box-wrapper" slot="leading">
        <Checkbox>
          <input type="checkbox" bind:checked={task.completed} />
        </Checkbox>
      </label>
      <label slot="trailing">
        <Button
          variant="text"
          iconType="full"
          onclick={() => (tasks = tasks.filter((t) => t.id != task.id))}
        >
          <Icon icon={iconDelete} />
        </Button>
      </label>
    </ListItem>
  {/each}
</div>
<TextField
  label="Task name"
  trailingIcon={iconPlus}
  bind:value={newTaskText}
  on:enter={addTask}
  on:trailingClick={addTask}
/>

<style>
  .tasks {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-grow: 1;
  }
  .box-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 1.5rem;
    align-self: stretch;
  }
</style>

```

Here's an example notes app:

```svelte
<script lang="ts">
  import {
    FAB,
    Dialog,
    Button,
    ListItem,
    TextFieldMultiline,
    Snackbar,
    snackbar,
    Card,
    Icon,
  } from "m3-svelte";
  import iconAdd from "@ktibow/iconset-material-symbols/add";
  import iconDelete from "@ktibow/iconset-material-symbols/delete";
  import iconEdit from "@ktibow/iconset-material-symbols/edit";

  type Note = {
    id: number;
    title: string;
    content: string;
    date: string;
  };

  let notes: Note[] = [];
  let dialog: { open: boolean; editingId?: number; title: string; content: string } = {
    open: false,
    title: "",
    content: "",
  };

  function addNote() {
    const newNote = {
      id: Date.now(),
      title: dialog.title.trim(),
      content: dialog.content.trim(),
      date: new Date().toLocaleDateString(),
    };

    notes = [newNote, ...notes];
    closeDialog();
  }

  function updateNote() {
    if (!dialog.editingId) return;

    notes = notes.map((note) =>
      note.id == dialog.editingId
        ? { ...note, title: dialog.title.trim(), content: dialog.content.trim() }
        : note,
    );
    closeDialog();
  }

  function deleteNote(id: number) {
    notes = notes.filter((note) => note.id !== id);
    snackbar("Note deleted", undefined, true);
  }

  function openNewNoteDialog() {
    dialog = { open: true, title: "", content: "" };
  }

  function closeDialog() {
    dialog = { open: false, title: "", content: "" };
  }
</script>

<div class="container">
  {#if notes.length}
    {#each notes as note (note.id)}
      <ListItem headline={note.title} supporting={note.content} overline={note.date}>
        <div slot="trailing" class="actions">
          <Button
            variant="text"
            iconType="full"
            onclick={() =>
              (dialog = {
                open: true,
                editingId: note.id,
                title: note.title,
                content: note.content,
              })}
          >
            <Icon icon={iconEdit} />
          </Button>
          <Button variant="text" iconType="full" onclick={() => deleteNote(note.id)}>
            <Icon icon={iconDelete} />
          </Button>
        </div>
      </ListItem>
    {/each}
  {:else}
    <Card variant="outlined">
      <div class="empty-content">
        <p class="large">No notes yet</p>
        <p class="medium">Click the + button to create one</p>
      </div>
    </Card>
  {/if}
</div>

<Dialog headline={dialog.editingId ? "New note" : "Edit note"} bind:open={dialog.open}>
  <div class="dialog-content">
    <TextFieldMultiline label="Title" bind:value={dialog.title} />
    <TextFieldMultiline label="Content" bind:value={dialog.content} />
  </div>
  {#snippet buttons()}
    <Button variant="text" onclick={closeDialog}>Cancel</Button>
    {#if dialog.editingId}
      <Button variant="filled" disabled={!dialog.title || !dialog.content} onclick={updateNote}>
        Update
      </Button>
    {:else}
      <Button variant="filled" disabled={!dialog.title || !dialog.content} onclick={addNote}>
        Add
      </Button>
    {/if}
  {/snippet}
</Dialog>

<div class="fab">
  <FAB color="primary" icon={iconAdd} onclick={openNewNoteDialog} />
</div>

<Snackbar />

<style>
  .container {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    padding: 1rem;
    overflow-y: auto;
    box-sizing: border-box;
  }

  .empty-content {
    text-align: center;
  }
  .empty-content > .large {
    @apply --m3-body-large;
  }
  .empty-content > .medium {
    @apply --m3-body-medium;
  }

  .actions {
    display: flex;
    gap: 0.5rem;
  }

  .dialog-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .fab {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
  }
</style>

```

Here's an even more complicated example - a partial clone of the M3 documentation website, using SvelteKit:

```css layout.css
@import url("https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,400..700&display=swap");

/* snip: theme snippet */

:root {
  @apply --m3-body-large;
  background: var(--m3c-surface);
  color: var(--m3c-on-surface);
}
body {
  display: flex;
  height: 100dvh;
  margin: 0;
  box-sizing: border-box;
}
@media (width < 52.5rem) {
  body {
    flex-direction: column-reverse;
    --m3v-bottom-offset: 5rem;
  }
}
img {
  max-width: 100%;
}
/* not implemented: a comprehensive css reset */

```

```svelte +layout.svelte
<script lang="ts">
  import { NavCMLX, NavCMLXItem, FAB } from "m3-svelte";
  import iconSearch from "@ktibow/iconset-material-symbols/search";
  import iconHome from "@ktibow/iconset-material-symbols/home";
  import iconApps from "@ktibow/iconset-material-symbols/apps";
  import iconCode from "@ktibow/iconset-material-symbols/code";
  import iconBook from "@ktibow/iconset-material-symbols/book";
  import iconPalette from "@ktibow/iconset-material-symbols/palette";
  import iconExtension from "@ktibow/iconset-material-symbols/extension";
  import iconPages from "@ktibow/iconset-material-symbols/pages";
  import "./layout.css";

  // not implemented: using an outlined icon if not selected
  const navItems = [
    { icon: iconHome, label: "Home", id: "home" },
    { icon: iconApps, label: "Get started", id: "get-started" },
    { icon: iconCode, label: "Develop", id: "develop" },
    { icon: iconBook, label: "Foundations", id: "foundations" },
    { icon: iconPalette, label: "Styles", id: "styles" },
    { icon: iconExtension, label: "Components", id: "components" },
    { icon: iconPages, label: "Blog", id: "blog" },
  ];
</script>

<div class="nav">
  <NavCMLX variant="auto">
    <div class="search">
      <FAB icon={iconSearch} onclick={() => {}} />
    </div>
    {#each navItems as item}
      <!-- not implemented: the ability to click on a destination -->
      <!-- (you would set an `href` and use better `selected` logic then) -->
      <NavCMLXItem
        variant="auto"
        icon={item.icon}
        text={item.label}
        selected={item.id == "components"}
      />
    {/each}
  </NavCMLX>
</div>
<div class="main">
  <slot />
</div>

<style>
  .main {
    padding: 0.5rem;
    overflow-y: auto;
    flex: 1;
  }

  @media (width < 37.5rem) {
    .nav {
      background: var(--m3c-surface-container);
    }
    .search {
      position: fixed;
      right: 1.5rem;
      bottom: calc(var(--m3v-bottom-offset, 0) + 1.5rem);
    }
  }

  @media (width >= 37.5rem) {
    .nav {
      width: 5rem;
      height: 100dvh;
    }
    .search {
      align-self: center;
    }
  }
</style>

```

```svelte +page.svelte
<script lang="ts">
  import { Icon } from "m3-svelte";
  import iconInfo from "@ktibow/iconset-material-symbols/info";
  import iconSpecs from "@ktibow/iconset-material-symbols/rule";
  import iconGuidelines from "@ktibow/iconset-material-symbols/lightbulb";
  import iconAccessibility from "@ktibow/iconset-material-symbols/accessibility";

  let currentTab = "overview";
  const tabs = [
    { icon: iconInfo, label: "Overview", id: "overview" },
    { icon: iconSpecs, label: "Specs", id: "specs" },
    { icon: iconGuidelines, label: "Guidelines", id: "guidelines" },
    { icon: iconAccessibility, label: "Accessibility", id: "accessibility" },
  ];
</script>

<div class="header">
  <div class="info">
    <h1>Lists</h1>
    <p>Lists are continuous, vertical indexes of text and images</p>
  </div>
  <img
    src="https://picsum.photos/id/12/1000/562"
    alt="A list in a recipe app"
    class="preview-image"
  />
</div>

<div class="tabs">
  {#each tabs as tab}
    <button disabled={currentTab == tab.id} onclick={() => (currentTab = tab.id)}>
      <Icon icon={tab.icon} size={24} />
      {tab.label}
    </button>
  {/each}
</div>

<article>
  {Array.from({ length: 200 }, () => "Lorem ipsum.").join(" ")}
</article>

<style>
  .header {
    display: flex;
    gap: 0.5rem;

    > * {
      border-radius: var(--m3-shape-large);
      min-width: 0;
      flex: 1;
    }
    > .info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-color: var(--m3c-surface-container);
      padding: 2rem;

      > * {
        margin: 0;
      }
      > h1 {
        @apply --m3-display-large;
      }
      > p {
        @apply --m3-title-large;
      }
    }
  }

  .tabs {
    display: flex;
    flex-direction: column;
    background-color: var(--m3c-surface-container);
    border-radius: 3rem;
    margin-top: 0.5rem;
    flex-shrink: 0;

    @media (width >= 37.5rem) {
      flex-direction: row;

      > * {
        flex: 1;
      }
    }

    > * {
      @apply --m3-title-medium;
      display: flex;
      gap: 1rem;
      align-items: center;
      justify-content: center;

      padding: 0;
      border: none;
      height: 6rem;
      border-radius: inherit;
      background-color: inherit;
      color: inherit;
      flex-shrink: 0;

      transition: 200ms;
      cursor: pointer;

      &:disabled {
        background-color: var(--m3c-secondary-container);
        color: var(--m3c-on-surface-container);
      }
    }
  }
</style>

```

## Components

Okay, now on to the components. Again, if you're unsure about how a component works, you can look at [its source code](https://github.com/KTibow/m3-svelte).

### Button

Minimal demo:
```svelte
<Button variant="elevated" onclick={() => alert("!")}>Hello</Button>
```

The M3 Svelte interactive demo for this component uses Button with the TS `let variant: "elevated" | "filled" | "tonal" | "outlined" | "text" = $state("filled");
let action: "click" | "link" | "toggle" = $state("click");
let square = $state(false);
let iconType: "none" | "left" | "full" = $state("none");
const sizes = ["xs", "s", "m", "l", "xl"] as const;
const sizeLabels = ["Extra small", "Small", "Medium", "Large", "Extra large"] as const;
let sizeIndex = $state(1);
let enabled = $state(true);` to make this demo:
```svelte
<label>
  <Arrows
    list={["elevated", "filled", "tonal", "outlined", "text"]}
    bind:value={variant}
    initialIndex={1}
  />
  {variant[0].toUpperCase() + variant.slice(1)}
</label>
<label>
  <Arrows list={["click", "link", "toggle"]} bind:value={action} />
  {action[0].toUpperCase() + action.slice(1)}
</label>
<label>
  <Switch bind:checked={square} />
  {square ? "Square" : "Round"}
</label>
<label>
  <Arrows list={["none", "left", "full"]} bind:value={iconType} />
  {iconType == "none" ? "No icon" : iconType == "left" ? "Left icon" : "Icon"}
</label>
<Slider bind:value={sizeIndex} min={0} max={4} step={1} stops format={(n) => sizeLabels[n]} />
<label>
  <Switch bind:checked={enabled} />
  {enabled ? "Enabled" : "Disabled"}
</label>
{#snippet demo()}
  <div>
    <Button
      {variant}
      {square}
      size={sizes[sizeIndex]}
      {...{
        click: { onclick: () => {}, disabled: !enabled },
        link: { href: "https://example.com" },
        toggle: { label: true },
      }[action]}
      {iconType}
    >
      {#if action == "toggle"}
        <input type="checkbox" disabled={!enabled} />
      {/if}
      {#if iconType == "none"}
        Hello
      {:else if iconType == "left"}
        <Icon icon={iconCircle} /> Hello
      {:else}
        <Icon icon={iconCircle} />
      {/if}
    </Button>
  </div>
{/snippet}

<style>
  #button-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
</style>
```

### Connected buttons

Minimal demo:
```svelte
<ConnectedButtons>
  <Button><input type="checkbox" bind:checked={itemA} />A</Button>
  <Button><input type="checkbox" bind:checked={itemB} />B</Button>
</ConnectedButtons>
```

The M3 Svelte interactive demo for this component uses ConnectedButtons, Button with the TS `let variant: "filled" | "tonal" = $state("filled");
let multiselect = $state(true);
const sizes = ["xs", "s", "m", "l", "xl"] as const;
const sizeLabels = ["Extra small", "Small", "Medium", "Large", "Extra large"] as const;
let sizeIndex = $state(1);` to make this demo:
```svelte
<label>
  <Arrows list={["filled", "tonal"]} bind:value={variant} />
  {variant[0].toUpperCase() + variant.slice(1)}
</label>
<label>
  <Switch bind:checked={multiselect} />
  {multiselect ? "Multi-select" : "Single-select"}
</label>
<Slider bind:value={sizeIndex} min={0} max={4} step={1} stops format={(n) => sizeLabels[n]} />
{#snippet demo()}
  {@const size = sizes[sizeIndex]}
  <ConnectedButtons>
    <Button {variant} {size} square label>
      <input type={multiselect ? "checkbox" : "radio"} checked name="connectedbuttons" />Alpha
    </Button>
    <Button {variant} {size} square label>
      <input type={multiselect ? "checkbox" : "radio"} name="connectedbuttons" />Beta
    </Button>
    <Button {variant} {size} square label>
      <input type={multiselect ? "checkbox" : "radio"} name="connectedbuttons" />Charlie
    </Button>
  </ConnectedButtons>
{/snippet}
```

### Split button

Minimal demo:
```svelte
<SplitButton variant="filled" onclick={() => alert("!")}>
  Hello
  {#snippet menu()}
    and more
  {/snippet}
</SplitButton>
```

The M3 Svelte interactive demo for this component uses SplitButton, Menu, MenuItem with the TS `let variant: "elevated" | "filled" | "tonal" | "outlined" = $state("filled");
let position: "inner-down" | "inner-up" | "right-down" | "right-up" = $state("inner-down");
let iconType: "none" | "left" | "full" = $state("none");` to make this demo:
```svelte
<label>
  <Arrows
    list={["elevated", "filled", "tonal", "outlined"]}
    bind:value={variant}
    initialIndex={1}
  />
  {variant[0].toUpperCase() + variant.slice(1)}
</label>
<label>
  <Arrows list={["inner-down", "inner-up", "right-down", "right-up"]} bind:value={position} />
  {position[0].toUpperCase() + position.slice(1).replace("-", " ")}
</label>
<label>
  <Arrows list={["none", "left", "full"]} bind:value={iconType} />
  {iconType == "none" ? "No icon" : iconType == "left" ? "Left icon" : "Icon"}
</label>

{#snippet demo()}
  <div>
    <SplitButton
      {variant}
      x={position.startsWith("inner") ? "inner" : "right"}
      y={position.endsWith("down") ? "down" : "up"}
      onclick={() => {}}
    >
      {#if iconType == "none"}
        Hello
      {:else if iconType == "left"}
        <Icon icon={iconCircle} /> Hello
      {:else}
        <Icon icon={iconCircle} />
      {/if}
      {#snippet menu()}
        <Menu>
          <MenuItem icon={iconCircle} onclick={() => {}}>Alpha</MenuItem>
          <MenuItem icon={iconSquare} onclick={() => {}}>Beta</MenuItem>
          <MenuItem icon={iconTriangle} onclick={() => {}}>Charlie</MenuItem>
        </Menu>
      {/snippet}
    </SplitButton>
  </div>
{/snippet}
```

### FAB

Minimal demo:
```svelte
<FAB color="primary" icon={iconCircle} onclick={() => alert("!")} />
```

The M3 Svelte interactive demo for this component uses FAB with the TS `let color:
  | "primary-container"
  | "secondary-container"
  | "tertiary-container"
  | "primary"
  | "secondary"
  | "tertiary" = $state("primary-container");
const sizes = ["normal", "medium", "large"] as const;
let sizeIndex = $state(0);
let iconTextSetup: "icon" | "both" | "text" = $state("icon");` to make this demo:
```svelte
<label>
  <Arrows
    list={[
      "primary-container",
      "secondary-container",
      "tertiary-container",
      "primary",
      "secondary",
      "tertiary",
    ]}
    bind:value={color}
  />
  {color[0].toUpperCase() + color.slice(1).replace("-", " ")}
</label>
<Slider
  bind:value={sizeIndex}
  min={0}
  max={2}
  step={1}
  stops
  format={(n) => sizes[n][0].toUpperCase() + sizes[n].slice(1)}
/>
<label>
  <Arrows list={["icon", "both", "text"]} bind:value={iconTextSetup} />
  {iconTextSetup == "icon" ? "Icon only" : iconTextSetup == "both" ? "Icon and text" : "Text only"}
</label>
{#snippet demo()}
  {@const size = sizes[sizeIndex]}
  <div>
    <FAB
      {color}
      {size}
      {...iconTextSetup == "icon"
        ? { icon: iconCircle }
        : iconTextSetup == "both"
          ? { icon: iconCircle, text: "Hello" }
          : { text: "Hello" }}
      onclick={() => {}}
    />
  </div>
{/snippet}
```

### Card

Minimal demo:
```svelte
<Card variant="filled">Hello</Card>
<Card variant="filled" onclick={() => alert("!")}>Hello</Card>
```

The M3 Svelte interactive demo for this component uses Card with the TS `let variant: "filled" | "outlined" | "elevated" = $state("filled");
let clickable = $state(false);` to make this demo:
```svelte
<label>
  <Arrows list={["filled", "outlined", "elevated"]} bind:value={variant} />
  {variant[0].toUpperCase() + variant.slice(1)}
</label>
<label>
  <Switch bind:checked={clickable} />
  {clickable ? "Clickable" : "Not clickable"}
</label>
{#snippet demo()}
  <Card {variant} {...clickable ? { onclick: () => {} } : {}}>Hello</Card>
{/snippet}
```

### List

Minimal demo:
```svelte
<div>
  <ListItem headline="Hello" />
  <ListItem headline="Hello" />
</div>
```

The M3 Svelte interactive demo for this component uses ListItem, Checkbox, Divider with the TS `const headline = "Hello";

let lines: "1" | "2" | "3" = $state("1");
let type: "div" | "button" | "label" | "a" = $state("div");

let supporting = $derived(
  lines == "1"
    ? undefined
    : lines == "2"
      ? "Welcome to ZomboCom!"
      : "Welcome to ZomboCom! Anything is possible at ZomboCom! You can do anything at ZomboCom!",
);` to make this demo:
```svelte
<label>
  <Arrows list={["1", "2", "3"]} bind:value={lines} />
  {lines}
  {lines == "1" ? "line" : "lines"}
</label>
<label>
  <Arrows list={["div", "button", "label", "a"]} bind:value={type} />
  {"<" + type + ">"}
</label>
{#snippet demo()}
  {#snippet leading()}
    {#if type == "label"}
      <div class="box-wrapper">
        <Checkbox><input type="checkbox" /></Checkbox>
      </div>
    {:else}
      <Icon icon={iconCircle} />
    {/if}
  {/snippet}
  <ListItem
    {leading}
    {headline}
    {supporting}
    lines={+lines}
    {...type == "label"
      ? { label: true }
      : type == "button"
        ? { onclick: () => {} }
        : type == "a"
          ? { href: "https://example.com" }
          : {}}
  />
  <Divider />
  <ListItem
    {leading}
    {headline}
    {supporting}
    lines={+lines}
    {...type == "label"
      ? { label: true }
      : type == "button"
        ? { onclick: () => {} }
        : type == "a"
          ? { href: "https://example.com" }
          : {}}
  />
{/snippet}

<style>
  .box-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
  }
</style>
```

### Menu

Minimal demo:
```svelte
<Menu>
  <MenuItem icon={iconCircle}>Alpha</MenuItem>
  <MenuItem icon={iconSquare}>Beta</MenuItem>
  <MenuItem icon={iconTriangle}>Charlie</MenuItem>
</Menu>
```

The M3 Svelte interactive demo for this component uses Menu, MenuItem with the TS `let icons = $state(false);` to make this demo:
```svelte
<label>
  <Switch bind:checked={icons} />
  {icons ? "Icons" : "No icons"}
</label>
{#snippet demo()}
  <Menu>
    <MenuItem icon={icons ? iconCircle : undefined} onclick={() => {}}>Alpha</MenuItem>
    <MenuItem icon={icons ? iconSquare : undefined} onclick={() => {}}>Beta</MenuItem>
    <MenuItem icon={icons ? iconTriangle : undefined} disabled onclick={() => {}}>Charlie</MenuItem>
  </Menu>
{/snippet}
```

### Bottom sheet

Minimal demo:
```svelte
{#if open}
  <BottomSheet close={() => (open = false)}>Hello</BottomSheet>
{/if}
```

The M3 Svelte interactive demo for this component uses Button, BottomSheet with the TS `let open = $state(false);` to make this demo:
```svelte
{#snippet demo()}
  <Button variant="tonal" onclick={() => (open = true)}>Open</Button>
  {#if open}
    <BottomSheet close={() => (open = false)}>
      {"Anything is possible at ZomboCom! You can do anything at ZomboCom! The infinite is possible at ZomboCom! The unattainable is unknown at ZomboCom! ".repeat(
        20,
      )}
    </BottomSheet>
  {/if}
{/snippet}
```

### Dialog

Minimal demo:
```svelte
<Dialog headline="Hello" bind:open>
  I'm alive
  {#snippet buttons()}
    <Button variant="tonal">OK</Button>
  {/snippet}
</Dialog>
```

The M3 Svelte interactive demo for this component uses Button, Dialog with the TS `let open = $state(false);` to make this demo:
```svelte
{#snippet demo()}
  <Button variant="tonal" onclick={() => (open = true)}>Open</Button>
  <Dialog icon={iconCircle} headline="Hello" bind:open>
    Anything is possible at ZomboCom! You can do anything at ZomboCom! The infinite is possible at
    ZomboCom! The unattainable is unknown at ZomboCom!
    {#snippet buttons()}
      <Button variant="tonal">OK</Button>
    {/snippet}
  </Dialog>
{/snippet}
```

### Snackbar

Minimal demo:
```svelte
<script lang="ts">
  import { snackbar } from "m3-svelte";
</script>

<Button variant="tonal" onclick={() => snackbar("Hello", undefined, true)}>Show</Button>
<Snackbar />
```

The M3 Svelte interactive demo for this component uses Button, Snackbar with the TS `import { snackbar } from "$lib/containers/Snackbar.svelte";` to make this demo:
```svelte
{#snippet demo()}
  <Button variant="tonal" onclick={() => snackbar("Hello", undefined, true)}>Show</Button>
{/snippet}
```

### Checkbox

Minimal demo:
```svelte
<label>
  <Checkbox>
    <input type="checkbox" bind:checked={on} />
  </Checkbox>
</label>
```

The M3 Svelte interactive demo for this component uses Checkbox with the TS `let enabled = $state(true);` to make this demo:
```svelte
<label>
  <Switch bind:checked={enabled} />
  {enabled ? "Enabled" : "Disabled"}
</label>
{#snippet demo()}
  <label>
    <Checkbox>
      <input type="checkbox" checked disabled={!enabled} />
    </Checkbox>
  </label>
{/snippet}
```

### Chip

Minimal demo:
```svelte
<Chip variant="general" icon={iconCircle} onclick={() => alert("!")}>Hello</Chip>
```

The M3 Svelte interactive demo for this component uses Chip with the TS `let style: "input" | "assist" | "assist elevated" | "general" | "general elevated" =
  $state("input");
let iconType: "none" | "left" | "right" = $state("none");
let enabled = $state(true);
let selected = $state(false);` to make this demo:
```svelte
<label>
  <Arrows
    list={["input", "assist", "assist elevated", "general", "general elevated"]}
    bind:value={style}
  />
  {style[0].toUpperCase() + style.slice(1)}
</label>
<label>
  <Arrows list={["none", "left", "right"]} bind:value={iconType} />
  {iconType == "none" ? "No icon" : iconType == "left" ? "Left icon" : "Right icon"}
</label>
<label>
  <Switch bind:checked={enabled} />
  {enabled ? "Enabled" : "Disabled"}
</label>

{#snippet demo()}
  <div>
    <Chip
      variant={style.startsWith("assist")
        ? "assist"
        : style.startsWith("general")
          ? "general"
          : "input"}
      elevated={style.endsWith("elevated")}
      icon={iconType == "left" ? iconCircle : undefined}
      trailingIcon={iconType == "right" ? iconSquare : undefined}
      disabled={!enabled}
      {selected}
      onclick={() => (selected = !selected)}
    >
      Hello
    </Chip>
  </div>
{/snippet}
```

### Progress

Minimal demo:
```svelte
<LinearProgress percent={60} title="Loading data" />
<LinearProgressEstimate sToHalfway={2} title="Loading data" />
<WavyLinearProgress percent={60} title="Loading data" />
<WavyLinearProgressEstimate sToHalfway={2} title="Loading data" />
<CircularProgress percent={60} title="Loading data" />
<CircularProgressEstimate sToHalfway={2} title="Loading data" />
```

The M3 Svelte interactive demo for this component uses LinearProgress, LinearProgressEstimate, WavyLinearProgress, WavyLinearProgressEstimate, CircularProgress, CircularProgressEstimate, Button, Slider with the TS `let type: "linear" | "linear-wavy" | "circular" = $state("linear");
let estimate = $state(false);
let thick = $state(false);
let percent = $state(10);` to make this demo:
```svelte
<label>
  <Arrows list={["linear", "linear-wavy", "circular"]} bind:value={type} />
  {type[0].toUpperCase() + type.slice(1).replace("-", " ")}
</label>
<label>
  <Switch bind:checked={thick} />
  {thick ? "Thicker" : "Thinner"}
</label>
<label>
  <Switch bind:checked={estimate} />
  {estimate ? "Estimated" : "Percent"}
</label>
{#if !estimate}
  <Slider bind:value={percent} endStops={false} format={(n) => `${n.toFixed(0)}%`} />
{/if}

{#snippet demo()}
  {#if estimate && type == "linear"}
    <LinearProgressEstimate sToHalfway={2} height={thick ? 8 : undefined} title="Loading data" />
  {:else if estimate && type == "linear-wavy"}
    <WavyLinearProgressEstimate
      height={thick ? 14 : undefined}
      thickness={thick ? 8 : undefined}
      title="Loading data"
    />
  {:else if estimate && type == "circular"}
    <CircularProgressEstimate
      sToHalfway={2}
      thickness={thick ? 8 : undefined}
      title="Loading data"
    />
  {:else if type == "linear"}
    <LinearProgress {percent} height={thick ? 8 : undefined} title="Loading data" />
  {:else if type == "linear-wavy"}
    <WavyLinearProgress
      {percent}
      height={thick ? 14 : undefined}
      thickness={thick ? 8 : undefined}
      title="Loading data"
    />
  {:else if type == "circular"}
    <CircularProgress {percent} thickness={thick ? 8 : undefined} title="Loading data" />
  {/if}
{/snippet}

<style>
  #estimate-toggle {
    display: none;
  }
</style>
```

### Loading

Minimal demo:
```svelte
<LoadingIndicator />
```

The M3 Svelte interactive demo for this component uses LoadingIndicator with the TS `let container = $state(false);` to make this demo:
```svelte
<label>
  <Switch bind:checked={container} />
  {container ? "Contained" : "Raw"}
</label>

{#snippet demo()}
  <LoadingIndicator {container} />
{/snippet}
```

### Radio

Minimal demo:
```svelte
<label>
  <RadioAnim1><input type="radio" name="stuff" value="one" bind:group={stuff} /></RadioAnim1>
</label>
```

The M3 Svelte interactive demo for this component uses RadioAnim1, RadioAnim2, RadioAnim3 with the TS `let animation: "1" | "2" | "3" = $state("1");
let enabled = $state(true);

let Component = $derived(
  animation == "1" ? RadioAnim1 : animation == "2" ? RadioAnim2 : RadioAnim3,
);` to make this demo:
```svelte
<label>
  <Arrows list={["1", "2", "3"]} bind:value={animation} />
  Animation {animation}
</label>
<label>
  <Switch bind:checked={enabled} />
  {enabled ? "Enabled" : "Disabled"}
</label>

{#snippet demo()}
  <div style:display="flex" style:gap="0.5rem">
    <label>
      <Component>
        <input type="radio" name="radio" checked disabled={!enabled} />
      </Component>
    </label>
    <label>
      <Component>
        <input type="radio" name="radio" disabled={!enabled} />
      </Component>
    </label>
    <label>
      <Component>
        <input type="radio" name="radio" disabled={!enabled} />
      </Component>
    </label>
  </div>
{/snippet}
```

### Select

Minimal demo:
```svelte
<Select
  label="Select"
  options={[
    { text: "A", value: "a" },
    { text: "B", value: "b" },
  ]}
  bind:value
/>
```

The M3 Svelte interactive demo for this component uses Select, SelectOutlined with the TS `let variant: "filled" | "outlined" = $state("filled");
let icons = $state(false);
let enabled = $state(true);
let options = $derived([
  { icon: icons ? iconCircle : undefined, text: "Alpha", value: "alpha" },
  { icon: icons ? iconSquare : undefined, text: "Beta", value: "beta" },
  { icon: icons ? iconTriangle : undefined, text: "Charlie", value: "charlie" },
]);` to make this demo:
```svelte
<label>
  <Arrows list={["filled", "outlined"]} bind:value={variant} />
  {variant[0].toUpperCase() + variant.slice(1)}
</label>
<label>
  <Switch bind:checked={icons} />
  {icons ? "Icons" : "No icons"}
</label>
<label>
  <Switch bind:checked={enabled} />
  {enabled ? "Enabled" : "Disabled"}
</label>

{#snippet demo()}
  {#if variant === "filled"}
    <Select label="Select" {options} disabled={!enabled} value="alpha" />
  {:else}
    <SelectOutlined label="Select" {options} disabled={!enabled} value="alpha" />
  {/if}
{/snippet}
```

### Slider

Minimal demo:
```svelte
<Slider bind:value={n} />
```

The M3 Svelte interactive demo for this component uses Slider with the TS `let precision = $state<"continuous" | "discrete" | "discrete-stops">("continuous");
const sizes = ["xs", "s", "m", "l", "xl"] as const;
const sizeLabels = ["Extra small", "Small", "Medium", "Large", "Extra large"] as const;
let sizeIndex = $state(0);
let trailingIcon = $state<boolean>(false);
let leadingIcon = $state<boolean>(false);
let endStops = $state<boolean>(true);
let enabled = $state<boolean>(true);
let vertical = $state<boolean>(false);` to make this demo:
```svelte
<label>
  <Arrows list={["continuous", "discrete", "discrete-stops"]} bind:value={precision} />
  {precision == "continuous"
    ? "Continuous"
    : precision == "discrete"
      ? "Discrete"
      : "Discrete (stops)"}
</label>
<Slider bind:value={sizeIndex} min={0} max={4} step={1} stops format={(n) => sizeLabels[n]} />
<label>
  <Switch bind:checked={enabled} />
  {enabled ? "Enabled" : "Disabled"}
</label>
<label>
  <Switch bind:checked={vertical} />
  {vertical ? "Vertical" : "Horizontal"}
</label>
{#if sizeIndex > 1}
  <label>
    <Switch bind:checked={leadingIcon} />
    {leadingIcon ? "Leading icon" : "No leading icon"}
  </label>
  <label>
    <Switch bind:checked={trailingIcon} />
    {trailingIcon ? "Trailing icon" : "No trailing icon"}
  </label>
{/if}
{#if precision != "discrete-stops" && !trailingIcon}
  <label>
    <Switch bind:checked={endStops} />
    {endStops ? "Endstops" : "No endstops"}
  </label>
{/if}

{#snippet demo()}
  <Slider
    step={precision == "continuous" ? "any" : 10}
    value={10}
    disabled={!enabled}
    size={sizes[sizeIndex]}
    {vertical}
    stops={precision == "discrete-stops"}
    {endStops}
    leadingIcon={leadingIcon ? iconCircle : undefined}
    trailingIcon={trailingIcon ? iconSquare : undefined}
  />
{/snippet}
```

### Switch

Minimal demo:
```svelte
<label>
  <Switch bind:checked={on} />
</label>
```

The M3 Svelte interactive demo for this component uses Switch with the TS `let icons: "checked" | "both" | "none" = $state("checked");
let enabled = $state(true);` to make this demo:
```svelte
<label>
  <Arrows list={["checked", "both", "none"]} bind:value={icons} />
  {icons == "checked" ? "Checked icon" : icons == "both" ? "Both icons" : "No icons"}
</label>
<label>
  <Switch bind:checked={enabled} />
  {enabled ? "Enabled" : "Disabled"}
</label>

{#snippet demo()}
  <label>
    <Switch disabled={!enabled} {icons} />
  </label>
{/snippet}
```

### Text field

Minimal demo:
```svelte
<TextField label="Field" bind:value={text} />
```

The M3 Svelte interactive demo for this component uses TextField, TextFieldOutlined, TextFieldMultiline, TextFieldOutlinedMultiline with the TS `let type: "filled" | "filled_multiline" | "outlined" | "outlined_multiline" = $state("filled");
let option: "text" | "password" | "number" | "file" = $state("text");
let leadingIcon = $state(false);
let trailingIcon = $state(false);
let errored = $state(false);
let enabled = $state(true);` to make this demo:
```svelte
<label>
  <Arrows
    list={["filled", "filled_multiline", "outlined", "outlined_multiline"]}
    bind:value={type}
  />
  {type == "filled"
    ? "Filled"
    : type == "filled_multiline"
      ? "Filled multiline"
      : type == "outlined"
        ? "Outlined"
        : "Outlined multiline"}
</label>
<label>
  <Arrows list={["text", "password", "number", "file"]} bind:value={option} />
  {option == "text"
    ? "Text"
    : option == "password"
      ? "Password"
      : option == "number"
        ? "Number"
        : "File"}
</label>
<label>
  <Switch bind:checked={leadingIcon} />
  {leadingIcon ? "Leading icon" : "No leading icon"}
</label>
<label>
  <Switch bind:checked={trailingIcon} />
  {trailingIcon ? "Trailing icon" : "No trailing icon"}
</label>
<label>
  <Switch bind:checked={errored} />
  {errored ? "Errored" : "Not errored"}
</label>
<label>
  <Switch bind:checked={enabled} />
  {enabled ? "Enabled" : "Disabled"}
</label>

{#snippet demo()}
  {#if type === "filled"}
    <TextField
      label="Field"
      leadingIcon={leadingIcon ? iconCircle : undefined}
      trailing={trailingIcon ? { icon: iconSquare, onclick: () => {} } : undefined}
      error={errored}
      disabled={!enabled}
      type={option}
    />
  {:else if type === "outlined"}
    <TextFieldOutlined
      label="Field"
      leadingIcon={leadingIcon ? iconCircle : undefined}
      trailing={trailingIcon ? { icon: iconSquare, onclick: () => {} } : undefined}
      error={errored}
      disabled={!enabled}
      type={option}
    />
  {:else if type === "filled_multiline"}
    <TextFieldMultiline
      label="Field"
      leadingIcon={leadingIcon ? iconCircle : undefined}
      error={errored}
      disabled={!enabled}
    />
  {:else if type === "outlined_multiline"}
    <TextFieldOutlinedMultiline
      label="Field"
      leadingIcon={leadingIcon ? iconCircle : undefined}
      error={errored}
      disabled={!enabled}
    />
  {/if}
{/snippet}
```

### Date field

Minimal demo:
```svelte
<DateField label="Date" bind:value />
<DateFieldOutlined label="Date" bind:value />
```

The M3 Svelte interactive demo for this component uses DateField, DateFieldOutlined with the TS `let variant: "filled" | "outlined" = $state("filled");
let enabled = $state(true);
let errored = $state(false);` to make this demo:
```svelte
<label>
  <Arrows list={["filled", "outlined"]} bind:value={variant} />
  {variant[0].toUpperCase() + variant.slice(1)}
</label>
<label>
  <Switch bind:checked={errored} />
  {errored ? "Errored" : "Not errored"}
</label>
<label>
  <Switch bind:checked={enabled} />
  {enabled ? "Enabled" : "Disabled"}
</label>

{#snippet demo()}
  {#if variant === "filled"}
    <DateField label="Date" disabled={!enabled} error={errored} />
  {:else}
    <DateFieldOutlined label="Date" disabled={!enabled} error={errored} />
  {/if}
{/snippet}
```

### Tabs

Minimal demo:
```svelte
<Tabs
  items={[
    { name: "A", value: "a" },
    { name: "B", value: "b" },
  ]}
  bind:tab
/>
```

The M3 Svelte interactive demo for this component uses Tabs, VariableTabs with the TS `let type: "primary" | "secondary" = $state("primary");
let icons = $state(false);
let variable = $state(false);
let tab = $state("hello");

let items = $derived(
  icons
    ? [
        { icon: iconCircle, name: "Hello", value: "hello" },
        { icon: iconSquare, name: "World", value: "world" },
        { icon: iconTriangle, name: "The longest item", value: "long" },
      ]
    : [
        { name: "Hello", value: "hello" },
        { name: "World", value: "world" },
        { name: "The longest item", value: "long" },
      ],
);` to make this demo:
```svelte
<label>
  <Arrows list={["primary", "secondary"]} bind:value={type} />
  {type == "primary" ? "Primary" : "Secondary"}
</label>
<label>
  <Switch bind:checked={icons} />
  {icons ? "Icons" : "No icons"}
</label>
<label>
  <Switch bind:checked={variable} />
  {variable ? "Variable" : "Fixed"}
</label>

{#snippet demo()}
  {#if variable}
    <VariableTabs bind:tab secondary={type == "secondary"} {items} />
  {:else}
    <Tabs bind:tab secondary={type == "secondary"} {items} />
  {/if}
{/snippet}
```

### Nav for C/M/L/X

Minimal demo:
```svelte
<NavCMLX variant="auto">
  <NavCMLXItem
    variant="auto"
    icon={iconCircle}
    text="A"
    selected={$page.url.pathname == "/a"}
    href="/a"
  />
  <NavCMLXItem
    variant="auto"
    icon={iconSquare}
    text="B"
    selected={$page.url.pathname == "/b"}
    href="/b"
  />
</NavCMLX>
```

The M3 Svelte interactive demo for this component uses NavCMLX, NavCMLXItem with the TS `let variant: "compact" | "medium" | "large" | "extra-large" | "auto" = $state("auto");
let item = $state("a");` to make this demo:
```svelte
<label>
  <Arrows
    list={["compact", "medium", "large", "extra-large", "auto"]}
    bind:value={variant}
    initialIndex={4}
  />
  {variant[0].toUpperCase() + variant.slice(1).replace("-", " ")}
</label>
{#snippet demo()}
  <div class="nav-demo">
    <NavCMLX {variant}>
      <NavCMLXItem
        {variant}
        icon={iconCircle}
        text="Alpha"
        selected={item == "a"}
        onclick={() => (item = "a")}
      />
      <NavCMLXItem
        {variant}
        icon={iconSquare}
        text="Beta"
        selected={item == "b"}
        onclick={() => (item = "b")}
      />
      <NavCMLXItem
        {variant}
        icon={iconTriangle}
        text="Charlie"
        selected={item == "c"}
        onclick={() => (item = "c")}
      />
    </NavCMLX>
  </div>
{/snippet}

<style>
  .nav-demo {
    display: grid;
    place-content: center;
  }
</style>
```

### Navigation Rail

Minimal demo:
```svelte
<NavigationRail>
  {#snippet fab(open)}
    <FAB
      color="primary-container"
      text={open ? "Label" : undefined}
      elevation="none"
      onclick={() => alert("!")}
    />
  {/snippet}

  <NavigationRailItem label="Label" icon={iconStars} active />

  <NavigationRailItem label="Label" icon={iconStarsOutline} />

  <NavigationRailItem label="Label" icon={addBadge(iconStarsOutline, 3)} />

  <NavigationRailItem label="Label" icon={addBadge(iconStarsOutline)} />
</NavigationRail>
```

The M3 Svelte interactive demo for this component uses FAB, NavigationRail, NavigationRailItem with the TS `import iconCircleFilled from "@ktibow/iconset-material-symbols/circle";
import iconEdit from "@ktibow/iconset-material-symbols/edit";
import { addBadge } from "$lib/misc/badge";

let collapse: "full" | "normal" | "no" = $state("normal");
let alignment: "top" | "center" = $state("center");
let iconType: "full" | "left" = $state("left");
let modal = $state(false);
let open = $state(false);` to make this demo:
```svelte
<label>
  <Switch bind:checked={modal} />
  {modal ? "Modal" : "Normal"}
</label>
<label>
  <Arrows list={["left", "full"]} bind:value={iconType} />
  {iconType == "left" ? "Icon and text" : "Icon"}
</label>
<label>
  <Arrows list={["top", "center"]} bind:value={alignment} />
  {alignment == "top" ? "Top" : "Center"}
</label>
<label>
  <Arrows list={["normal", "full", "no"]} bind:value={collapse} />
  {collapse == "normal" ? "Collapse" : collapse == "full" ? "Fully collapse" : "Don't collapse"}
</label>

{#snippet demo()}
  <NavigationRail {collapse} {alignment} {iconType} {modal} {open}>
    {#snippet fab(open)}
      <FAB
        color="primary-container"
        icon={iconEdit}
        text={open ? "Label" : undefined}
        elevation="none"
        onclick={() => {}}
      />
    {/snippet}
    <NavigationRailItem label="Label" icon={iconCircleFilled} active />
    <NavigationRailItem label="Label" icon={addBadge(iconTriangle, 3)} />
  </NavigationRail>
{/snippet}
```

### UI transitions

Minimal demo:
```svelte
<script>
  import { containerTransform, sharedAxisTransition } from "m3-svelte";
</script>
```

The M3 Svelte interactive demo for this component uses Button with the TS `import { containerTransform, sharedAxisTransition } from "$lib/misc/animation";
let mode: "X" | "Y" | "Z" | "container" = $state("X");
let affected = $state(false);
const [send, receive] = containerTransform({ duration: 1000 });` to make this demo:
```svelte
<label>
  <Arrows list={["X", "Y", "Z", "container"]} bind:value={mode} />
  {mode[0].toUpperCase() + mode.slice(1)}
</label>

{#snippet demo()}
  <article>
    {#if mode == "container"}
      {#if affected}
        <div class="expanded" in:receive={{ key: "container" }} out:send={{ key: "container" }}>
          <p>More info now!</p>
          <button onclick={() => (affected = false)}>Close</button>
        </div>
      {:else}
        <button
          class="btn"
          onclick={() => (affected = true)}
          in:receive={{ key: "container" }}
          out:send={{ key: "container" }}
        >
          Click
        </button>
      {/if}
    {:else if mode == "Z"}
      {#if affected}
        <div
          class="pane"
          in:sharedAxisTransition={{
            direction: "Z",
            leaving: false,
          }}
          out:sharedAxisTransition={{
            direction: "Z",
            leaving: true,
          }}
        >
          <Button onclick={() => (affected = false)}>Beta</Button>
        </div>
      {:else}
        <div
          class="pane"
          in:sharedAxisTransition={{
            direction: "Z",
            leaving: false,
          }}
          out:sharedAxisTransition={{
            direction: "Z",
            leaving: true,
          }}
        >
          <Button onclick={() => (affected = true)}>Alpha</Button>
        </div>
      {/if}
    {:else if affected}
      <div
        class="pane"
        transition:sharedAxisTransition={{
          direction: mode,
          rightSeam: false,
        }}
      >
        <Button onclick={() => (affected = false)}>Beta</Button>
      </div>
    {:else}
      <div
        class="pane"
        transition:sharedAxisTransition={{
          direction: mode,
          rightSeam: true,
        }}
      >
        <Button onclick={() => (affected = true)}>Alpha</Button>
      </div>
    {/if}
  </article>
{/snippet}

<style>
  article {
    display: grid;
    height: 4rem;
    > * {
      grid-column: 1;
      grid-row: 1;
    }
  }
  .pane {
    display: grid;
    place-items: center;
    background-color: var(--m3c-surface);
    overflow: hidden;
  }
  .btn {
    @apply --m3-label-large;
    display: flex;
    align-items: center;
    place-self: center;

    background-color: var(--m3c-primary);
    color: var(--m3c-on-primary);
    border: none;
    height: 2.5rem;
    border-radius: 1.25rem;
    padding: 0 1rem;
    cursor: pointer;
  }
  .expanded {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background-image: linear-gradient(
      to bottom right,
      var(--m3c-primary-container-subtle),
      var(--m3c-tertiary-container-subtle)
    );
    > p {
      margin: 0;
    }
    > button {
      background-color: unset;
      border: none;
      padding: 0;
      margin: 0;
      font: unset;
      font-weight: bold;
      text-align: start;
      cursor: pointer;
    }
  }
</style>
```

### Layer

Minimal demo:
```svelte
<script>
  // you may need to import "m3-svelte/etc/layer"
</script>

<button class="m3-layer">Hello</button>
```

The M3 Svelte interactive demo for this component uses  with the TS `` to make this demo:
```svelte
{#snippet demo()}
  <button class="m3-layer layer-demo" role="presentation"></button>
  <style>
    .layer-demo {
      min-height: 10rem;
      border-radius: 1rem;
      position: relative;
      border: none;
      cursor: pointer;
      background-color: transparent;
    }
  </style>
{/snippet}
```

### Icons

Minimal demo:
```svelte
<script>
  import iconCircle from "@ktibow/iconset-material-symbols/circle-outline";
</script>

<Icon icon={iconCircle} />
```

The M3 Svelte interactive demo for this component uses Icon, Slider with the TS `let size = $state(24);` to make this demo:
```svelte
<Slider bind:value={size} min={16} max={96} format={(n) => n.toFixed(0) + "px"} />

{#snippet demo()}
  <div
    style:display="flex"
    style:gap="1rem"
    style:align-items="center"
    style:justify-content="center"
  >
    <Icon icon={iconCircle} {size} />
    <Icon icon={iconSquare} {size} />
    <Icon icon={iconTriangle} {size} />
  </div>
{/snippet}
```

### Shapes

Minimal demo:
```svelte
<script>
  import { squarePath } from "m3-svelte";
</script>

<!-- go use it in an svg -->
```

The M3 Svelte interactive demo for this component uses Button with the TS `import iconGo from "@ktibow/iconset-material-symbols/arrow-forward-rounded";
import * as _paths from "$lib/misc/shapes";
import * as _pathsAnimatable from "$lib/misc/shapesAnimatable";
import * as _pathsAnimatableSmall from "$lib/misc/shapesAnimatableSmall";
import { snackbar } from "$lib/containers/Snackbar.svelte";
import ShapeSelector from "/src/routes/ShapeSelector.svelte";

const paths = _paths as Record<string, string>;
const pathsAnimatable = _pathsAnimatable as Record<string, string>;
const pathsAnimatableSmall = _pathsAnimatableSmall as Record<string, string>;
let shape = $state("pathArch");
let mode: "normal" | "animatable" | "animatable small" = $state("normal");` to make this demo:
```svelte
<ShapeSelector bind:shape />
<label>
  <Arrows list={["normal", "animatable", "animatable small"]} bind:value={mode} />
  {mode[0].toUpperCase() + mode.slice(1)} paths
</label>

{#snippet demo()}
  {@const d =
    mode == "animatable small"
      ? pathsAnimatableSmall[shape.replace("path", "pathAnimatableSmall")]
      : mode == "animatable"
        ? pathsAnimatable[shape.replace("path", "pathAnimatable")]
        : paths[shape]}
  {#if d}
    <svg
      width="4rem"
      height="4rem"
      style:margin="auto"
      viewBox={mode == "animatable small" ? "0 0 48 48" : "0 0 380 380"}
    >
      <path class="shape" {d} fill="var(--m3c-primary)" />
    </svg>
  {:else}
    <p style:display="flex" style:align-items="center" style:justify-content="center" style:height="4rem" style:margin="0">this shape-settings combination is unavailable</p>
  {/if}
{/snippet}

<style>
  path.shape {
    transition: d 200ms;
  }
</style>
```