# M3 Svelte

## Importing components

```svelte
import { ComponentName } from "m3-svelte";
```

## Available components

**Buttons**
- Button
- ButtonLink
- SegmentedButtonContainer
- SegmentedButtonItem
- FAB

**Containers**
- Card
- CardClickable
- Dialog
- Snackbar
- SnackbarAnim
- SnackbarItem
- BottomSheet
- ListItem
- ListItemButton
- ListItemLabel
- Menu
- MenuItem

**Progress**
- LinearProgress
- LinearProgressIndeterminate
- CircularProgress
- CircularProgressIndeterminate

**Inputs**
- RadioAnim1
- RadioAnim2
- RadioAnim3
- Checkbox
- CheckboxAnim
- Switch
- Slider
- SliderTicks

**Textfields**
- TextField
- TextFieldMultiline
- TextFieldOutlined
- TextFieldOutlinedMultiline

**Pickers**
- DatePickerDocked

**Chips**
- Chip

**Nav**
- NavDrawer
- NavDrawerButton
- NavDrawerLink
- NavList
- NavListButton
- NavListLink
- Tabs
- TabsLink
- VariableTabs
- VariableTabsLink

**Utils**
- ChipChooser
- Divider
- DateField

**Misc**
- StyleFromScheme
- Icon
- Layer

## Components

### Button
- Types: elevated, filled, tonal, outlined, text
- Optional icon: none, left, full
- Props:
  - display: string
  - extraOptions: HTMLButtonAttributes
  - iconType: "none" | "left" | "full"
  - type: "elevated" | "filled" | "tonal" | "outlined" | "text"
  - disabled: boolean
- Has a slot
Example:
```svelte
<Button type="filled" on:click={() => alert("Hello world!")}>
  Click me
</Button>
```

### ButtonLink
- Props:
  - display: string
  - extraOptions: HTMLAnchorAttributes
  - iconType: "none" | "left" | "full"
  - type: "elevated" | "filled" | "tonal" | "outlined" | "text"
  - href: string
- Has a slot

### FAB
- Props:
  - display: string
  - extraOptions: HTMLButtonAttributes
  - color: "primary" | "surface" | "secondary" | "tertiary"
  - size: "small" | "normal" | "large"
  - elevation: "normal" | "lowered" | "none"
  - icon: IconifyIcon | undefined
  - text: string | undefined
Example:
```svelte
<FAB
  color="primary"
  size="normal"
  icon={iconEdit}
  text="Hello"
/>
```

### SegmentedButtonContainer
- Props:
  - display: string
  - extraOptions: HTMLAttributes<HTMLDivElement>
- Has a slot
Example:
```svelte
<SegmentedButtonContainer>
  <input type="radio" name="group" id="tab-a" checked />
  <SegmentedButtonItem input="tab-a">Tab A</SegmentedButtonItem>
  <input type="radio" name="group" id="tab-b" />
  <SegmentedButtonItem input="tab-b">Tab B</SegmentedButtonItem>
</SegmentedButtonContainer>
```

### SegmentedButtonItem
- Props:
  - display: string
  - extraOptions: HTMLLabelAttributes
  - input: string
  - icon: IconifyIcon | undefined
- Has a slot

### BottomSheet
- Has a slot

### Card
- Types: elevated, filled, outlined
- Props:
  - display: string
  - extraOptions: HTMLAttributes<HTMLDivElement> & HTMLButtonAttributes
  - type: "elevated" | "filled" | "outlined"
- Has a slot
Example:
```svelte
<Card type="elevated">Hello</Card>
<CardClickable type="elevated">Click me</CardClickable>
```

### CardClickable
- Props:
  - display: string
  - extraOptions: HTMLAttributes<HTMLDivElement> & HTMLButtonAttributes
  - type: "elevated" | "filled" | "outlined"
- Has a slot

### Dialog
- Props:
  - display: string
  - extraOptions: HTMLDialogAttributes
  - icon: IconifyIcon | undefined
  - headline: string
  - open: boolean
  - closeOnEsc: boolean
  - closeOnClick: boolean
- Slots:
  - default
  - buttons
Example:
```svelte
<Dialog icon={iconTrash} headline="Delete?" bind:open>
  Delete these items?
  <svelte:fragment slot="buttons">
    <Button type="text" on:click={() => (open = false)}>Cancel</Button>
    <Button type="tonal" on:click={() => (open = false)}>Delete</Button>
  </svelte:fragment>
</Dialog>
```

### ListItem
- Props:
  - display: string
  - extraOptions: HTMLAttributes<HTMLDivElement>
  - overline: string
  - headline: string
  - supporting: string
  - lines: number | undefined
- Slots:
  - leading
  - trailing

### ListItemButton
- Props:
  - display: string
  - extraOptions: HTMLButtonAttributes
  - overline: string
  - headline: string
  - supporting: string
  - lines: number | undefined
- Slots:
  - leading
  - trailing

### ListItemLabel
- Props:
  - display: string
  - extraOptions: HTMLLabelAttributes
  - overline: string
  - headline: string
  - supporting: string
  - lines: number | undefined
- Slots:
  - leading
  - trailing

### Menu
- Props:
  - display: string
- Has a slot
Example:
```svelte
<Menu>
  <MenuItem icon={iconUndo}>Undo</MenuItem>
  <MenuItem icon={iconRedo} disabled>Redo</MenuItem>
</Menu>
```

### MenuItem
- Props:
  - icon: IconifyIcon | "space" | undefined
  - disabled: boolean
- Has a slot

### Snackbar
- Props:
  - extraWrapperOptions: HTMLAttributes<HTMLDivElement>
  - extraOptions: ComponentProps<SnackbarItem>
Example:
```svelte
<script>
let snackbar: (data: SnackbarIn) => void;
</script>
<Button on:click={() => snackbar({
  message: "Hello",
  actions: { Undo: () => {} },
  closable: true
})}>Show</Button>
<Snackbar bind:show={snackbar} />
```
Tip:
Set the CSS variable `--m3-util-bottom-offset` to a size to move all snackbars upwards.

### SnackbarAnim
- Props:
  - extraWrapperOptions: HTMLAttributes<HTMLDivElement>
  - extraOptions: ComponentProps<SnackbarItem>

### SnackbarItem
- Props:
  - display: string
  - extraOptions: HTMLAttributes<HTMLDivElement>
- Has a slot

### Checkbox
- Props:
  - display: string
  - extraOptions: HTMLAttributes<HTMLDivElement>
- Has a slot

### CheckboxAnim
- Props:
  - display: string
  - extraOptions: HTMLAttributes<HTMLDivElement>
- Has a slot

### Chip
- Props:
  - display: string
  - extraOptions: HTMLButtonAttributes
  - type: "input" | "assist" | "general"
  - icon: IconifyIcon | null
  - trailingIcon: IconifyIcon | null
  - elevated: boolean
  - disabled: boolean
  - selected: boolean
- Has a slot

### CircularProgress
- Props:
  - display: string
  - extraOptions: HTMLAttributes<SVGElement>
  - percent: number

### CircularProgressIndeterminate
- Props:
  - display: string
  - extraOptions: HTMLAttributes<SVGElement>

### DatePickerDocked
- Props:
  - display: string
  - date: string
  - clearable: boolean
  - focusedMonth: number
  - dateValidator: (date

### LinearProgress
- Props:
  - display: string
  - extraOptions: HTMLAttributes<HTMLDivElement>
  - percent: number

### LinearProgressIndeterminate
- Props:
  - display: string
  - extraOptions: HTMLAttributes<HTMLDivElement>

### RadioAnim
- Variants: Style 1 (RadioAnim1), Style 2 (RadioAnim2), Style 3 (RadioAnim3)
- Props:
  - display: string
  - extraOptions: HTMLAttributes<HTMLDivElement>
- Has a slot
Example:
```svelte
<RadioAnim1>
  <input type="radio" name="a-group" value="1" bind:group={value} />
</RadioAnim1>
```

### Slider
- Variants: Continuous (Slider), With Ticks (SliderTicks)
- Variant-specific props:
  Continuous:
  - Props:
    - extraWrapperOptions: HTMLAttributes<HTMLDivElement>
    - extraOptions: HTMLInputAttributes
    - value: number
    - min: number
    - max: number
    - step: number | "any"
    - disabled: boolean
    - showValue: boolean
    - format: (n
  With Ticks:
  - Props:
    - extraWrapperOptions: HTMLAttributes<HTMLDivElement>
    - extraOptions: HTMLInputAttributes
    - value: number
    - min: number
    - max: number
    - step: number
    - disabled: boolean
    - showValue: boolean
    - format: (n
- Props:
  - extraWrapperOptions: HTMLAttributes<HTMLDivElement>
  - extraOptions: HTMLInputAttributes
  - value: number
  - min: number
  - max: number
  - step: number | "any"
  - disabled: boolean
  - showValue: boolean
  - format: (n
Example:
```svelte
<Slider step="any" bind:value />
<SliderTicks step={1} max={6} bind:value />
```

### Switch
- Props:
  - display: string
  - extraWrapperOptions: HTMLAttributes<HTMLDivElement>
  - extraOptions: HTMLAttributes<HTMLDivElement>
  - checked: boolean
  - disabled: boolean
Example:
```svelte
<Switch bind:checked />
```

### TextField
- Variants: TextField (TextField), Multiline (TextFieldMultiline), Outlined (TextFieldOutlined), Outlined Multiline (TextFieldOutlinedMultiline)
- Variant-specific props:
  TextField:
  - Props:
    - display: string
    - extraWrapperOptions: HTMLAttributes<HTMLDivElement>
    - extraOptions: HTMLInputAttributes
    - name: string
    - leadingIcon: IconifyIcon | undefined
    - trailingIcon: IconifyIcon | undefined
    - disabled: boolean
    - required: boolean
    - error: boolean
    - value: string
  Multiline:
  - Props:
    - display: string
    - extraWrapperOptions: HTMLAttributes<HTMLDivElement>
    - extraOptions: HTMLTextareaAttributes
    - name: string
    - leadingIcon: IconifyIcon | undefined
    - disabled: boolean
    - required: boolean
    - error: boolean
    - value: string
  Outlined:
  - Props:
    - display: string
    - extraWrapperOptions: HTMLAttributes<HTMLDivElement>
    - extraOptions: HTMLInputAttributes
    - name: string
    - leadingIcon: IconifyIcon | undefined
    - trailingIcon: IconifyIcon | undefined
    - disabled: boolean
    - required: boolean
    - error: boolean
    - value: string
  Outlined Multiline:
  - Props:
    - display: string
    - extraWrapperOptions: HTMLAttributes<HTMLDivElement>
    - extraOptions: HTMLTextareaAttributes
    - name: string
    - leadingIcon: IconifyIcon | undefined
    - disabled: boolean
    - required: boolean
    - error: boolean
    - value: string
- Props:
  - display: string
  - extraWrapperOptions: HTMLAttributes<HTMLDivElement>
  - extraOptions: HTMLInputAttributes
  - name: string
  - leadingIcon: IconifyIcon | undefined
  - trailingIcon: IconifyIcon | undefined
  - disabled: boolean
  - required: boolean
  - error: boolean
  - value: string
Example:
```svelte
<TextField
  name="Field"
  leadingIcon={iconEdit}
  error={false}
  disabled={false}
/>
```
Tip:
For outlined text fields on a surface that isn't the default background, set the CSS variable `--m3-util-background` to the current background make the text field fit in.

### Layer

### StyleFromScheme
- Props:
  - lightScheme: SerializedScheme
  - darkScheme: SerializedScheme

### NavDrawer
- Props:
  - display: string
  - extraOptions: HTMLAttributes<HTMLElement>
- Has a slot

### NavList
- Props:
  - display: string
  - extraOptions: HTMLAttributes<HTMLElement>
  - type: "rail" | "bar" | "auto"
- Has a slot

### NavListButton
- Props:
  - display: string
  - extraOptions: HTMLButtonAttributes
  - type: "rail" | "bar" | "auto"
  - selected: boolean
  - icon: IconifyIcon
- Has a slot

### NavListLink
- Props:
  - display: string
  - extraOptions: HTMLAnchorAttributes
  - type: "rail" | "bar" | "auto"
  - href: string
  - selected: boolean
  - icon: IconifyIcon
- Has a slot

### Tabs
- Props:
  - display: string
  - extraWrapperOptions: HTMLAttributes<HTMLDivElement>
  - extraOptions: HTMLInputAttributes
  - secondary: boolean
  - tab: string
  - items: {
Example:
```svelte
<Tabs bind:tab secondary={false} items={[
  { name: "Tab 1", value: "tab1" },
  { name: "Tab 2", value: "tab2" }
]} />
```

### TabsLink
- Props:
  - display: string
  - extraWrapperOptions: HTMLAttributes<HTMLDivElement>
  - extraOptions: HTMLAnchorAttributes
  - secondary: boolean
  - tab: string
  - items: {

### VariableTabs
- Props:
  - display: string
  - extraWrapperOptions: HTMLAttributes<HTMLDivElement>
  - extraOptions: HTMLInputAttributes
  - secondary: boolean
  - tab: string
  - items: {

### VariableTabsLink
- Props:
  - display: string
  - extraWrapperOptions: HTMLAttributes<HTMLDivElement>
  - extraOptions: HTMLAnchorAttributes
  - secondary: boolean
  - tab: string
  - items: {

### NavDrawerButton
- Props:
  - selected: boolean
  - extraOptions: HTMLButtonAttributes
  - icon: IconifyIcon
- Has a slot

### NavDrawerLink
- Props:
  - href: string
  - selected: boolean
  - extraOptions: HTMLAnchorAttributes
  - icon: IconifyIcon
- Has a slot

### ChipChooser
- Props:
  - options: { label
  - chosenOptions: string[]

### DateField
- Props:
  - name: string
  - date: string
  - required: boolean
  - disabled: boolean
  - extraOptions: HTMLInputAttributes
Example:
```svelte
<DateField name="Date" bind:date />
```
Tip:
This component is like DatePickerDocked but it has a field and it's easier to use

### Divider
- Props:
  - inset: boolean