### Usage Example

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/api-reference/container-components.md

Example demonstrating how to use the Menu and MenuItem components with a Button trigger.

```APIDOC
## Usage

```svelte
<script>
  import Menu, MenuItem, Button from 'm3-svelte'
  import moreIcon from '@ktibow/iconset-material-symbols/more-vert'
  import editIcon from '@ktibow/iconset-material-symbols/edit'
  import deleteIcon from '@ktibow/iconset-material-symbols/delete'
  
  let menuOpen = $state(false)
  let menuAnchor = $state()
</script>

<Button 
  size="xs" 
  iconType="full"
  bind:element={menuAnchor}
  onclick={() => menuOpen = !menuOpen}
>
  <Icon icon={moreIcon} />
</Button>

<Menu bind:open={menuOpen} anchorEl={menuAnchor}>
  <MenuItem icon={editIcon} headline="Edit" onclick={() => {}} />
  <MenuItem icon={deleteIcon} headline="Delete" onclick={() => {}} />
</Menu>
```
```

--------------------------------

### Basic M3 Svelte Button Setup

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/README.md

Demonstrates basic setup and usage of an M3 Svelte Button component. Includes importing necessary styles and defining custom primary colors.

```svelte
<script>
  import 'm3-svelte/etc/recommended-styles.css'
  import Button from 'm3-svelte'
</script>

<Button onclick={() => alert('clicked')}>
  Click me
</Button>

<style>
  :global(:root) {
    --m3c-primary: #6366F1;
    --m3c-on-primary: #FFFFFF;
    /* ... other color tokens */
  }
</style>
```

--------------------------------

### Install Theming Dependencies

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/configuration.md

Install the material-color-utilities-nightly package for dynamic theming and vite-plugin-functions-mixins for density customization.

```bash
npm install @ktibow/material-color-utilities-nightly
npm install --save-dev vite-plugin-functions-mixins
```

--------------------------------

### Install M3 Svelte

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/README.md

Install the m3-svelte package using npm.

```bash
npm install m3-svelte
```

--------------------------------

### Configure SvelteKit Adapter

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/configuration.md

Example svelte.config.js configuration for SvelteKit projects. Ensures compatibility with the build process.

```javascript
import adapter from '@sveltejs/adapter-auto'

export default {
  kit: {
    adapter: adapter(),
  },
}
```

--------------------------------

### Minimal M3 Svelte List Demo

Source: https://github.com/ktibow/m3-svelte/blob/main/src/demos.md

A basic example demonstrating how to use the ListItem component with just a headline.

```svelte
<div>
  <ListItem headline="Hello" />
  <ListItem headline="Hello" />
</div>
```

--------------------------------

### Snackbar Usage Example

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/api-reference/container-components.md

Demonstrates how to integrate the Snackbar component into an application and trigger notifications. It shows adding the Snackbar to the app root and using the `snackbar` function with and without actions.

```svelte
<script>
  import Snackbar, { snackbar } from 'm3-svelte'
</script>

<!-- Add once at app root -->
<Snackbar />

<!-- Trigger notifications -->
<button onclick={() => {
  snackbar('Item deleted', {
    'Undo': undoDelete,
    'Details': showDetails
  }, true, 5000)
}}>
  Delete Item
</button>

<!-- Simple message -->
<button onclick={() => {
  snackbar('Changes saved successfully')
}}>
  Save
</button>
```

--------------------------------

### Install vite-plugin-token-shaker

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/configuration.md

Install the vite-plugin-token-shaker package to optimize CSS variables by removing unused ones. This plugin helps in reducing the final CSS bundle size.

```bash
npm install --save-dev vite-plugin-token-shaker
```

--------------------------------

### TabsLink Usage Example

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/api-reference/navigation-components.md

Demonstrates how to implement TabsLink for URL-based navigation within a Svelte application. Ensure to import necessary components and stores.

```svelte
<script>
  import TabsLink from 'm3-svelte'
  import { page } from '$app/stores'
</script>

<TabsLink 
  href={$page.url.pathname}
  items={[
    { name: 'Overview', href: '/dashboard' },
    { name: 'Analytics', href: '/dashboard/analytics' },
    { name: 'Reports', href: '/dashboard/reports' },
  ]}
/>
```

--------------------------------

### Install M3 Svelte with npm, pnpm, or yarn

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/configuration.md

Install the m3-svelte package using your preferred package manager. This is the first step to using M3 Svelte components.

```bash
npm install m3-svelte
# or
pnpm add m3-svelte
# or
yarn add m3-svelte
```

--------------------------------

### NavigationRail Usage Example

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/api-reference/navigation-components.md

Shows how to set up a vertical NavigationRail with NavigationRailItems. Icons must be imported from a compatible icon set. State management is required for selected items.

```svelte
<script>
  import NavigationRail, NavigationRailItem from 'm3-svelte'
  import homeIcon from '@ktibow/iconset-material-symbols/home'
  import settingsIcon from '@ktibow/iconset-material-symbols/settings'
  import profileIcon from '@ktibow/iconset-material-symbols/person'
  
  let currentNav = $state('home')
</script>

<NavigationRail labeled>
  <NavigationRailItem 
    icon={homeIcon}
    label="Home"
    selected={currentNav === 'home'}
    onclick={() => currentNav = 'home'}
  />
  <NavigationRailItem 
    icon={settingsIcon}
    label="Settings"
    selected={currentNav === 'settings'}
    onclick={() => currentNav = 'settings'}
  />
  <NavigationRailItem 
    icon={profileIcon}
    label="Profile"
    badge={3}
    selected={currentNav === 'profile'}
    onclick={() => currentNav = 'profile'}
  />
</NavigationRail>
```

--------------------------------

### Tree-shaking Example

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/configuration.md

Demonstrates how unused components are automatically removed by modern bundlers when only specific components are imported. Ensure only necessary components are imported to leverage tree-shaking.

```javascript
// Only imported components are bundled
import { Button } from 'm3-svelte'
import TextField from 'm3-svelte'
```

--------------------------------

### Code Splitting Example

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/configuration.md

Shows how to manually control code splitting in SvelteKit by dynamically importing components. This is useful for optimizing load times by splitting code per route or component.

```javascript
import { browser } from '$app/environment'

let Dialog
if (browser) {
  Dialog = (await import('m3-svelte')).Dialog
}
```

--------------------------------

### SplitButton Usage Example

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/api-reference/button-components.md

Demonstrates how to use the SplitButton component with a main action and menu items. Ensure the SplitButton component is imported from 'm3-svelte'.

```svelte
<script>
  import SplitButton from 'm3-svelte'
</script>

<SplitButton
  mainAction={() => doMainAction()}
  menuItems={[
    { label: 'Option 1', onclick: () => opt1() },
    { label: 'Option 2', onclick: () => opt2() },
  ]}>
  Save
</SplitButton>
```

--------------------------------

### Minimal Button Demo

Source: https://github.com/ktibow/m3-svelte/blob/main/src/demos.md

A basic example of using the Button component with an elevated variant and a simple click handler.

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

--------------------------------

### FAB Usage Example (Icon-only)

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/api-reference/button-components.md

Shows how to implement an icon-only Floating Action Button (FAB). This is typically used for a primary action on the screen. Ensure FAB and Icon components are imported.

```svelte
<script>
  import FAB from 'm3-svelte'
  import addIcon from '@ktibow/iconset-material-symbols/add'
</script>

<!-- Icon-only FAB -->
<FAB onclick={handleCreate}>
  <Icon icon={addIcon} />
</FAB>
```

--------------------------------

### Full FAB Configuration

Source: https://github.com/ktibow/m3-svelte/blob/main/src/demos.md

Demonstrates a configurable Floating Action Button with options for color, size, and content (icon, text, or both). Requires setup for state variables and component imports.

```typescript
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");
```

```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}
```

--------------------------------

### Peer Dependencies for Theming

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/configuration.md

Includes essential peer dependencies for dynamic theming and density customization. Install these for advanced theming features.

```json
{
  "peerDependencies": {
    "@ktibow/material-color-utilities-nightly": "^0.4.1768930731000",
    "vite-plugin-functions-mixins": "^0.4.1"
  }
}
```

--------------------------------

### Switch Usage

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/api-reference/form-components.md

Illustrates the use of the Switch component for on/off states. The example shows how to bind the toggle state to a variable.

```svelte
<script>
  import Switch from 'm3-svelte'
  let darkMode = $state(false)
</script>

<label>
  Dark Mode
  <Switch bind:checked={darkMode} />
</label>
```

--------------------------------

### Full ConnectedButtons Demo Configuration

Source: https://github.com/ktibow/m3-svelte/blob/main/src/demos.md

Configures variant, multiselect, and size for ConnectedButtons. Use this for dynamic button group setups.

```use
ConnectedButtons
Button
```

```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);
```

```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}
```

--------------------------------

### Show StandardSideSheet Example

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/api-reference/container-components.md

Illustrates the use of the StandardSideSheet component for displaying navigation. The sheet's visibility and content are managed via bound variables and child components.

```svelte
<script>
  import StandardSideSheet, NavigationRail, NavigationRailItem from 'm3-svelte'
  
  let sidebarOpen = $state(true)
</script>

<StandardSideSheet bind:open={sidebarOpen} headline="Navigation">
  <NavigationRail>
    <NavigationRailItem icon={homeIcon} label="Home" />
    <NavigationRailItem icon={settingsIcon} label="Settings" />
  </NavigationRail>
</StandardSideSheet>
```

--------------------------------

### Minimal Shapes Component Demo

Source: https://github.com/ktibow/m3-svelte/blob/main/src/demos.md

Shows the minimal setup for using shape paths, intended for use within an SVG element.

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

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

--------------------------------

### Menu and MenuItem Usage Example

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/api-reference/container-components.md

This snippet shows how to use the Menu and MenuItem components to create a context menu triggered by a button. It demonstrates binding menu visibility and anchoring the menu to a specific element. Ensure necessary icons are imported.

```svelte
<script>
  import Menu, MenuItem, Button from 'm3-svelte'
  import moreIcon from '@ktibow/iconset-material-symbols/more-vert'
  import editIcon from '@ktibow/iconset-material-symbols/edit'
  import deleteIcon from '@ktibow/iconset-material-symbols/delete'
  
  let menuOpen = $state(false)
  let menuAnchor = $state()
</script>

<Button 
  size="xs" 
  iconType="full"
  bind:element={menuAnchor}
  onclick={() => menuOpen = !menuOpen}
>
  <Icon icon={moreIcon} />
</Button>

<Menu bind:open={menuOpen} anchorEl={menuAnchor}>
  <MenuItem icon={editIcon} headline="Edit" onclick={() => {}} />
  <MenuItem icon={deleteIcon} headline="Delete" onclick={() => {}} />
</Menu>
```

--------------------------------

### Show BottomSheet Example

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/api-reference/container-components.md

Demonstrates how to use the BottomSheet component to display filter options. The sheet's visibility is controlled by a bound boolean variable.

```svelte
<script>
  import BottomSheet, Button from 'm3-svelte'
  
  let filterOpen = $state(false)
</script>

<BottomSheet bind:open={filterOpen} headline="Filter Options">
  <!-- Filter controls -->
</BottomSheet>

<Button onclick={() => filterOpen = true}>
  Show Filters
</Button>
```

--------------------------------

### Tabs and VariableTabs Usage Example

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/api-reference/navigation-components.md

Demonstrates how to implement both primary Tabs and secondary VariableTabs components, including binding the active tab and conditionally rendering content based on the selected tab.

```svelte
<script>
  import Tabs, VariableTabs from 'm3-svelte'
  import homeIcon from '@ktibow/iconset-material-symbols/home'
  import settingsIcon from '@ktibow/iconset-material-symbols/settings'
  
  let activeTab = $state('home')
  let activeSecondary = $state('recent')
</script>

<!-- Primary Tabs -->
<Tabs 
  bind:tab={activeTab}
  items={[
    { name: 'Home', value: 'home', icon: homeIcon },
    { name: 'Activity', value: 'activity' },
    { name: 'Settings', value: 'settings', icon: settingsIcon },
  ]}
/>

{#if activeTab === 'home'}
  <div>Home content</div>
{:else if activeTab === 'activity'}
  <div>Activity content</div>
{:else}
  <div>Settings content</div>
{/if}

<!-- Secondary Tabs -->
<VariableTabs 
  bind:tab={activeSecondary}
  secondary={true}
  items={[
    { name: 'Recent', value: 'recent' },
    { name: 'Favorites', value: 'favorites' },
    { name: 'Archived', value: 'archived' },
  ]}
/>
```

--------------------------------

### Vertical Navigation with Badges

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/api-reference/navigation-components.md

Demonstrates a vertical navigation layout using NavCMLX and NavCMLXItem. Includes examples of displaying numerical badges and boolean dot indicators, along with managing the active state.

```svelte
<script>
  import NavCMLX, NavCMLXItem from 'm3-svelte'
  import inboxIcon from '@ktibow/iconset-material-symbols/inbox'
  import sentIcon from '@ktibow/iconset-material-symbols/send'
  import draftIcon from '@ktibow/iconset-material-symbols/draft'
  
  let activeNav = $state('inbox')
</script>

<NavCMLX orientation="vertical">
  <NavCMLXItem
    icon={inboxIcon}
    label="Inbox"
    badge={5}
    selected={activeNav === 'inbox'}
    onclick={() => activeNav = 'inbox'}
  />
  <NavCMLXItem
    icon={sentIcon}
    label="Sent"
    selected={activeNav === 'sent'}
    onclick={() => activeNav = 'sent'}
  />
  <NavCMLXItem
    icon={draftIcon}
    label="Drafts"
    badge={true}
    selected={activeNav === 'drafts'}
    onclick={() => activeNav = 'drafts'}
  />
</NavCMLX>
```

--------------------------------

### Svelte Snippet Prop Example

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/API-OVERVIEW.md

Demonstrates the use of the `Snippet` prop for flexible content rendering in container components like Dialog. It shows how to define buttons with a render function.

```svelte
<Dialog headline="Delete?" buttons={({ render: closeButton }) => {...}}>
  Confirm deletion?
</Dialog>
```

--------------------------------

### Change Theme Dynamically at Runtime

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/configuration.md

Update CSS variables on-the-fly to change color schemes dynamically. This example demonstrates changing the theme based on a color input.

```svelte
<script>
  import { genCSS, colors } from 'm3-svelte'
  import { SchemeExpressive } from '@ktibow/material-color-utilities-nightly'
  
  function changeTheme(seedColor) {
    const lightScheme = SchemeExpressive.light(seedColor)
    const darkScheme = SchemeExpressive.dark(seedColor)
    
    const cssString = genCSS(lightScheme, darkScheme, colors)
    
    // Insert into style tag
    const style = document.querySelector('style[data-theme]') || 
                  document.createElement('style')
    style.setAttribute('data-theme', '')
    style.textContent = cssString
    document.head.appendChild(style)
  }
</script>

<input 
  type="color" 
  onchange={(e) => changeTheme(parseInt(e.target.value.slice(1), 16) + 0xFF000000)}
/>
```

--------------------------------

### FAB Usage Example (Extended)

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/api-reference/button-components.md

Demonstrates an extended Floating Action Button (FAB) which includes both an icon and text. This variant is suitable for actions that benefit from a descriptive label. Ensure FAB and Icon components are imported.

```svelte
<script>
  import FAB from 'm3-svelte'
  import editIcon from '@ktibow/iconset-material-symbols/edit'
</script>

<!-- Extended FAB with text -->
<FAB extended variant="secondary" onclick={handleEdit}>
  <Icon icon={editIcon} />
  Edit Profile
</FAB>
```

--------------------------------

### Importing Components and Utilities from m3-svelte

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/COMPONENT-INVENTORY.md

Demonstrates how to import all components and specific utilities from the main 'm3-svelte' entry point, or how to import individual components and utilities.

```typescript
// From 'm3-svelte'
import Button, { 
  ConnectedButtons, 
  FAB, 
  SplitButton,
  TextField,
  // ... all others
  Snackbar,
  { snackbar }
} from 'm3-svelte'

// Or individual imports
import Button from 'm3-svelte'
import { Snackbar, snackbar } from 'm3-svelte'
```

--------------------------------

### Full Dialog Demo with Open Button

Source: https://github.com/ktibow/m3-svelte/blob/main/src/demos.md

Demonstrates opening a Dialog using a button. The dialog includes an icon, headline, extensive content, and action buttons. Requires 'Button' and 'Dialog' imports.

```ts
let open = $state(false);
```

```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}
```

--------------------------------

### Basic Icon Usage

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/api-reference/navigation-components.md

Demonstrates how to import and use the Icon component with default sizing.

```svelte
<script>
  import Icon from 'm3-svelte'
  import addIcon from '@ktibow/iconset-material-symbols/add'
</script>

<!-- Default size (1em) -->
<Icon icon={addIcon} />
```

--------------------------------

### Minimal Radio Animation Demo

Source: https://github.com/ktibow/m3-svelte/blob/main/src/demos.md

Basic example of a radio button with the RadioAnim1 component.

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

--------------------------------

### Minimal ConnectedButtons Demo

Source: https://github.com/ktibow/m3-svelte/blob/main/src/demos.md

A basic example of using the ConnectedButtons component with two checkbox inputs.

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

--------------------------------

### TextField with Trailing Button

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/api-reference/form-components.md

Illustrates using a trailing button within the TextField, for example, to clear the input.

```svelte
<script>
  import TextField from 'm3-svelte'
  import clearIcon from '@ktibow/iconset-material-symbols/clear'
  let email = $state('')
</script>

<!-- With trailing button (clear) -->
<TextField
  label="Email"
  type="email"
  bind:value={email}
  trailing={{
    icon: clearIcon,
    onclick: () => email = ''
  }}
/>
```

--------------------------------

### Full Progress Demo Configuration

Source: https://github.com/ktibow/m3-svelte/blob/main/src/demos.md

Sets up state variables for controlling the type, estimation, thickness, and percentage of progress indicators. This allows for dynamic configuration of the progress display.

```typescript
let type: "linear" | "linear-wavy" | "circular" = $state("linear");
let estimate = $state(false);
let thick = $state(false);
let percent = $state(10);
```

--------------------------------

### TypeScript Configuration

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/configuration.md

Basic tsconfig.json setup for M3 Svelte projects, specifying target, libraries, and module resolution.

```json
{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020", "DOM"],
    "moduleResolution": "bundler"
  }
}
```

--------------------------------

### Full NavCMLX Demo with State

Source: https://github.com/ktibow/m3-svelte/blob/main/src/demos.md

A comprehensive demo of the NavCMLX component demonstrating dynamic variant and item selection using Svelte state management.

```typescript
let variant: "compact" | "medium" | "large" | "extra-large" | "auto" = $state("auto");
let item = $state("a");

```

```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>
```

--------------------------------

### SnackbarItem Usage

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/api-reference/container-components.md

Example of using the SnackbarItem component to display a notification message with an action button. Import the component from 'm3-svelte'.

```svelte
<SnackbarItem>
  <p>Notification message</p>
  <button>Action</button>
</SnackbarItem>
```

--------------------------------

### Minimal Switch Demo

Source: https://github.com/ktibow/m3-svelte/blob/main/src/demos.md

A basic implementation of the Switch component.

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

--------------------------------

### Full Menu Demo with Icons Toggle

Source: https://github.com/ktibow/m3-svelte/blob/main/src/demos.md

Demonstrates the Menu and MenuItem components with an option to toggle icons on and off. Requires 'Menu' and 'MenuItem' imports.

```ts
let icons = $state(false);
```

```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}
```

--------------------------------

### Full Icon Component Demo

Source: https://github.com/ktibow/m3-svelte/blob/main/src/demos.md

A full demonstration of the Icon component, allowing dynamic size adjustment via a Slider.

```ts
let size = $state(24);
```

```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}
```

--------------------------------

### ConnectedButtons Usage Example

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/api-reference/button-components.md

Demonstrates how to group multiple buttons together using the ConnectedButtons component. Ensure Button components are imported alongside ConnectedButtons.

```svelte
<script>
  import ConnectedButtons, { Button } from 'm3-svelte'
</script>

<ConnectedButtons>
  <Button variant="tonal">Cancel</Button>
  <Button variant="filled">Confirm</Button>
</ConnectedButtons>
```

--------------------------------

### Minimal Icon Component Demo

Source: https://github.com/ktibow/m3-svelte/blob/main/src/demos.md

Demonstrates the minimal usage of the Icon component with a specific icon import.

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

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

--------------------------------

### Minimal Menu Demo

Source: https://github.com/ktibow/m3-svelte/blob/main/src/demos.md

A basic implementation of the Menu component with three menu items.

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

--------------------------------

### Full Select Demo

Source: https://github.com/ktibow/m3-svelte/blob/main/src/demos.md

Demonstrates the Select and SelectOutlined components with options for variant, icons, and enabled state. Requires Select, SelectOutlined, and icon definitions to be imported.

```svelte
<script>
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" },
]);
</script>

<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}
```

--------------------------------

### Full Button Configuration Demo

Source: https://github.com/ktibow/m3-svelte/blob/main/src/demos.md

This comprehensive demo allows interactive customization of the Button component's appearance and behavior. It requires the Button component and associated state management.

```typescript
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);
```

```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]} />
{#if action == "click" || action == "toggle"}
  <label>
    <Switch bind:checked={enabled} />
    {enabled ? "Enabled" : "Disabled"}
  </label>
{/if}
{#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>
```

--------------------------------

### Dialog Component Usage

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/api-reference/container-components.md

Example of how to use the Dialog component to create a confirmation dialog for deleting an item. Includes import statements and state management for dialog visibility.

```svelte
<script>
  import Dialog, Button from 'm3-svelte'
  import deleteIcon from '@ktibow/iconset-material-symbols/delete'
  
  let deleteOpen = $state(false)
  
  const confirmDelete = () => {
    deleteItem()
    deleteOpen = false
  }
</script>

<Dialog 
  bind:open={deleteOpen}
  icon={deleteIcon}
  headline="Delete this item?"
  buttons={() => (
    <>
      <Button variant="text" onclick={() => deleteOpen = false}>
        Cancel
      </Button>
      <Button variant="filled" onclick={confirmDelete}>
        Delete
      </Button>
    </>
  )}>
  This action cannot be undone.
</Dialog>

<Button onclick={() => deleteOpen = true}>
  Delete Item
</Button>
```

--------------------------------

### Basic TextField Usage

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/api-reference/form-components.md

Demonstrates the basic usage of the TextField component for capturing user input.

```svelte
<script>
  import TextField from 'm3-svelte'
  import searchIcon from '@ktibow/iconset-material-symbols/search'
  let username = $state('')
</script>

<!-- Basic TextField -->
<TextField label="Username" bind:value={username} />
```

--------------------------------

### Minimal Tabs Demo

Source: https://github.com/ktibow/m3-svelte/blob/main/src/demos.md

Demonstrates the basic usage of the Tabs component with predefined items.

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

--------------------------------

### Radio Button Animation Styles

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/api-reference/form-components.md

Shows how to implement radio buttons using different animation styles (Fill, Bounce, Scale) provided by m3-svelte. This example uses RadioAnim1.

```svelte
<script>
  import RadioAnim1 from 'm3-svelte'
  let size = $state('medium')
</script>

<div>
  <label>
    <RadioAnim1 bind:group={size} value="small" />
    Small
  </label>
  <label>
    <RadioAnim1 bind:group={size} value="medium" />
    Medium
  </label>
  <label>
    <RadioAnim1 bind:group={size} value="large" />
    Large
  </label>
</div>
```

--------------------------------

### Animatable SVG Shape

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/api-reference/utility-functions.md

Provides an example of using an SVG with an animate element to transition between different path values, creating an animatable shape. This is typically used for advanced animations.

```svelte
<svg>
  <animate
    attributeName="d"
    values="{pathSquare};{pathCircle};{pathSquare}"
    dur="3s"
    repeatCount="indefinite"
  />
</svg>
```

--------------------------------

### Full Switch Demo Configuration

Source: https://github.com/ktibow/m3-svelte/blob/main/src/demos.md

Configures the Switch component with different icon states and enables/disables it.

```ts
let icons: "checked" | "both" | "none" = $state("checked");
let enabled = $state(true);
```

```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}
```

--------------------------------

### Svelte Usage of addBadge Function

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/api-reference/utility-functions.md

Example of using the addBadge function in a Svelte component to add a notification badge to an icon. The 'icon' parameter is the base icon, and 'n' is the optional count.

```svelte
<script>
  import { addBadge } from 'm3-svelte'
  import Icon from 'm3-svelte'
  import inboxIcon from '@ktibow/iconset-material-symbols/inbox'
  
  const badgedIcon = addBadge(inboxIcon, 5)
</script>

<Icon icon={badgedIcon} size={24} />
```

--------------------------------

### Use Key Blocks for List Animations

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/QUICK-REFERENCE.md

Employ key blocks within `#each` statements to enable efficient list animations and updates. Assign a unique key to each item for proper tracking.

```svelte
{#each items as item (item.id)}
  <div>{item.name}</div>
{/each}
```

--------------------------------

### Minimal NavCMLX Demo

Source: https://github.com/ktibow/m3-svelte/blob/main/src/demos.md

A basic implementation of the NavCMLX component with two items. It uses the 'auto' variant for adaptive behavior.

```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>
```

--------------------------------

### Full M3 Svelte List Demo Configuration

Source: https://github.com/ktibow/m3-svelte/blob/main/src/demos.md

Defines state variables for headline, lines, and type, which control the appearance and behavior of the ListItem. Use this for complex list item setups.

```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!",
);
```

--------------------------------

### Minimal Select Demo

Source: https://github.com/ktibow/m3-svelte/blob/main/src/demos.md

A basic implementation of the Select component with two options.

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

--------------------------------

### M3 Svelte List Full Demo with Controls

Source: https://github.com/ktibow/m3-svelte/blob/main/src/demos.md

Renders interactive controls for 'lines' and 'type' states, and a comprehensive ListItem example. This snippet demonstrates dynamic content and element types for ListItems.

```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>
```

--------------------------------

### Import Recommended M3 Svelte Styles

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/configuration.md

Import the recommended M3 Svelte styles, which include base tokens. This is the preferred method for comprehensive styling.

```svelte
<!-- OR Recommended styles (includes base tokens) -->
<script>
  import 'm3-svelte/etc/recommended-styles.css'
</script>
```

--------------------------------

### Minimal TextField Demo

Source: https://github.com/ktibow/m3-svelte/blob/main/src/demos.md

A basic implementation of the TextField component.

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

--------------------------------

### ListItem Component Usage

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/api-reference/container-components.md

Shows how to implement the ListItem component with headline, supporting text, leading and trailing icons, and click handling. Requires importing icons.

```svelte
<script>
  import ListItem from 'm3-svelte'
  import phoneIcon from '@ktibow/iconset-material-symbols/phone'
  import emailIcon from '@ktibow/iconset-material-symbols/mail'
  
  let selectedContact = $state(null)
</script>

<ListItem
  headline="John Doe"
  supportingText="john@example.com"
  leadingIcon={phoneIcon}
  trailingIcon={emailIcon}
  onclick={() => { selectedContact = 'john' }}
/>
```

--------------------------------

### Bindable Values for Svelte State Management

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/types.md

Demonstrates the use of Svelte's `$bindable()` directive for creating two-way bound properties in components. Examples cover string, boolean, number, and string types for various UI elements.

```typescript
// TextField
value: string = $bindable()

// Checkbox, Switch
checked: boolean = $bindable()

// Slider
value: number = $bindable()

// Tabs
tab: string = $bindable()

// Select
value: string = $bindable()
```

--------------------------------

### Basic Slider with Icons

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/api-reference/form-components.md

Implement a basic volume slider with leading and trailing icons to indicate the range. Ensure icons are imported from a compatible icon set.

```svelte
<script>
  import Slider from 'm3-svelte'
  import volumeHighIcon from '@ktibow/iconset-material-symbols/volume-high'
  import volumeOffIcon from '@ktibow/iconset-material-symbols/volume-off'
  
  let volume = $state(50)
</script>

<!-- Basic volume slider -->
<Slider 
  bind:value={volume}
  min={0}
  max={100}
  leadingIcon={volumeOffIcon}
  trailingIcon={volumeHighIcon}
/>
```

--------------------------------

### Basic Chip with Icon and Click Handler

Source: https://github.com/ktibow/m3-svelte/blob/main/src/demos.md

Demonstrates a basic Chip component with an icon and an onclick event handler. The 'iconCircle' variable is assumed to be defined elsewhere.

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

--------------------------------

### Full Tabs Demo Configuration

Source: https://github.com/ktibow/m3-svelte/blob/main/src/demos.md

Configures tab type, icon visibility, and variable tab behavior.

```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" },
      ],
);
```

--------------------------------

### Import m3-svelte Utilities

Source: https://github.com/ktibow/m3-svelte/blob/main/_autodocs/QUICK-REFERENCE.md

Import utility functions and constants for animations, color manipulation, and helper functions from the 'm3-svelte' package. These are used for enhancing UI behavior and customization.

```svelte
<script>
  import {
    containerTransform,
    sharedAxisTransition,
    outroClass,
    easeEmphasized,
    easeStandard,
    addBadge,
    pathCircle,
    pathSquare,
    colors,
    materialColors,
    genCSS
  } from 'm3-svelte'
</script>
```

--------------------------------

### Full Slider Demo with Options

Source: https://github.com/ktibow/m3-svelte/blob/main/src/demos.md

Demonstrates a fully configurable Slider component with options for precision, size, icons, and orientation. Requires state management for various properties.

```typescript
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);
```

```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}
```