# Sveltier

> A Svelte 5 UI framework with five built-in design languages, a zero-dependency theme engine and flash-free server-side theming.

## Setup

```sh
pnpm add sveltier
```

```svelte
<!-- src/routes/+layout.svelte -->
<script>
  import { UIProvider } from 'sveltier';
  import { monolith } from 'sveltier/themes/monolith';
  let { children } = $props();
</script>

<!-- Monolith, light or dark following the OS -->
<UIProvider themes={monolith}>
  {@render children()}
</UIProvider>
```

## Conventions

Install `sveltier`, wrap the app in `UIProvider` with at least one theme pack (for example `monolith` from `sveltier/themes/monolith`), and import components from `sveltier`.

- Svelte 5 only: runes (`$state`, `$derived`, `$effect`, `$props`, `$bindable`), snippets and callback props. Never write Svelte 4 syntax: no `export let`, no `on:click` (use `onclick`), no `<slot>` (use snippets and `{@render}`), no `createEventDispatcher`, no `$:`. Svelte's own tools for agents, including an MCP server and an autofixer, are listed at https://svelte.dev/docs/ai.
- Every component takes the same names for the same things: `variant` (elevated, flat, tonal, outlined, text, plain), `size` (xs to xl), `density` (compact, default, comfortable), `color` (an intent such as primary or error, neutral, or a custom colour), `rounded`, `disabled`, `loading`.
- Content goes in snippets (`children`, `prepend`, `append`, `actions`), events are callback props (`onclick`), and two-way values use `bind:` (`bind:value`, `bind:selected`, `bind:open`).
- Every component passes other attributes to its root element, merges `class`, and exposes the element as a bindable `ref`. Form fields are the exception: their attributes and `ref` go to the native control (`name`, `placeholder`, `autocomplete` reach the `<input>`), while `class` and `style` stay on the field.
- Form fields validate with the HTML constraints first (`required`, `minlength`, `maxlength`, `pattern`, `type="email"`), then `rules` (functions returning `true` or a message), and show `error` from outside (a server's answer) as given. Messages appear when the user leaves a field they changed, then follow every change.
- Defaults for a whole app or section go in the `defaults` of `UIProvider` or a `DefaultsProvider`, by component name; a prop on the component still wins.
- Style your own elements with the theme's CSS variables, never fixed values: `--sv-color-*` for colour, `--sv-space-*` for spacing, `--sv-radius-md` for one-line controls. A theme may make `--sv-radius-md` a pill, so a box that grows with its content takes `min(var(--sv-radius-md), var(--sv-radius-lg))`.

## Components

### Alert

Docs: ./components/alert

A message about something that happened or needs attention.

```svelte
<script>
  import { Alert, Button } from 'sveltier';
</script>

<Alert type="error" title="Payment declined">
  The card ending 4471 was declined by the issuer.
  {#snippet actions()}
    <Button size="sm" variant="tonal" color="error">Try another card</Button>
  {/snippet}
</Alert>

<Alert type="success" closable>Transfer sent.</Alert>
```

`AlertProps`:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `'elevated' \| 'flat' \| 'tonal' \| 'outlined' \| 'text' \| 'plain'` | `'tonal'` | Visual weight. |
| `color` | `Color` | `'info'` | The colour, when there is no `type` to take it from. |
| `density` | `'compact' \| 'default' \| 'comfortable'` | `'default'` | Multiplies the padding. |
| `rounded` | `boolean \| 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | `true` | Corner rounding. `true` keeps the theme's radius. |
| `type` | `'info' \| 'success' \| 'warning' \| 'error'` |  | What kind of message: sets the colour and the icon. Warnings and errors are announced at once (`role="alert"`), the others politely (`role="status"`). |
| `title` | `string` |  | A short summary, above the text. |
| `icon` | `boolean` | `true` | Shows the icon of the `type`. |
| `open` | `boolean` | `true` | Shown while true; a closable alert sets it to false. Bindable. |
| `closable` | `boolean` | `false` | Adds a button that closes the alert and calls `onclose`. |
| `closeLabel` | `string` |  | The name of the close button. Defaults to the locale's `close`. |
| `onclose` | `() => void` |  | Called when the close button closes the alert. |
| `prepend` | `Snippet` |  | Content in place of the type's icon. |
| `actions` | `Snippet` |  | Buttons or links after the text, such as `Retry`. |
| `children` | `Snippet` |  | The message. |
| `class` | `ClassValue \| null` |  | Classes added after the component's own: a string, an array or an object. |
| `ref` | `HTMLDivElement \| null` |  | The root element, bindable with `bind:ref`. |

### Avatar

Docs: ./components/avatar

A picture of a person or an account: an image, or initials or an icon when there is none
or it fails to load.

```svelte
<script>
  import { Avatar } from 'sveltier';
</script>

<!-- A name is shown next to it, so the avatar is decorative. -->
<Avatar src={user.photo}>AM</Avatar> Alex Morgan

<!-- On its own, it needs alt text. -->
<Avatar src={user.photo} alt="Alex Morgan" size="lg">AM</Avatar>
```

`AvatarProps`:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Width and height: the control height of the size. |
| `variant` | `'elevated' \| 'flat' \| 'tonal' \| 'outlined' \| 'text' \| 'plain'` | `'tonal'` | How the fallback is painted. |
| `color` | `Color` | `'neutral'` | The colour of the fallback. |
| `rounded` | `boolean \| 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | `'full'` | Corner rounding. |
| `src` | `string` |  | The image. |
| `alt` | `string` |  | Who or what the avatar shows, for screen readers. Leave it out when a name is shown next to the avatar: it is then decorative and hidden from them. |
| `children` | `Snippet` |  | Initials or an icon, shown while there is no image or it failed to load. |
| `class` | `ClassValue \| null` |  | Classes added after the component's own: a string, an array or an object. |
| `ref` | `HTMLSpanElement \| null` |  | The root element, bindable with `bind:ref`. |

### Badge

Docs: ./components/badge

A count or a dot pinned to the top end corner of its content, or standing alone in a line
when it has none. A count of 0 hides it.

```svelte
<script>
  import { Badge, Button, Icon } from 'sveltier';
</script>

<!-- The button is described by the badge's text, so the count is heard on focus. -->
<Badge id="inbox" content={3} label="unread messages">
  <Button icon aria-label="Messages" aria-describedby="inbox-label">
    <Icon path={mdiEmail} />
  </Button>
</Badge>

<!-- Alone in a line. -->
Savings <Badge content="New" />
```

`BadgeProps`:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `color` | `Color` | `'primary'` | The badge's fill. |
| `max` | `number` | `99` | Counts above it show as `max+`. |
| `content` | `number \| string` |  | What the badge says: usually a count. |
| `dot` | `boolean` | `false` | A dot instead of the content. |
| `label` | `string` |  | What the content counts, read after it by screen readers: `unread messages` reads "3 unread messages". With `dot`, the whole announcement. With an `id`, this text has the id `{id}-label`, for the `aria-describedby` of a button the badge is pinned to. |
| `children` | `Snippet` |  | The content the badge is pinned to. |
| `class` | `ClassValue \| null` |  | Classes added after the component's own: a string, an array or an object. |
| `ref` | `HTMLSpanElement \| null` |  | The root element, bindable with `bind:ref`. |

### Button

Docs: ./components/button

A button, or a link that looks like one (`href`). Every other attribute of `<button>` and
`<a>` passes through to the element.

```svelte
<script>
  import { Button } from 'sveltier';
</script>

<Button onclick={() => (open = true)}>New transfer</Button>
<Button variant="outlined" color="error">Cancel payment</Button>
```

`ButtonProps`:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `'elevated' \| 'flat' \| 'tonal' \| 'outlined' \| 'text' \| 'plain'` | `'flat'` | Visual weight. |
| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Height and text size. |
| `density` | `'compact' \| 'default' \| 'comfortable'` | `'default'` | Multiplies the height and padding, never the text. |
| `color` | `Color` | `'primary'` | The colour the variant is painted with. |
| `rounded` | `boolean \| 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | `true` | Corner rounding. `true` keeps the theme's radius. |
| `block` | `boolean` | `false` | Takes the full width of its container. |
| `disabled` | `boolean` | `false` | A disabled button cannot be focused or pressed; a disabled link loses its `href`. |
| `as` | `'button' \| 'a'` |  | The element to render. Defaults to `'a'` when `href` is given, otherwise `'button'`. |
| `icon` | `boolean` | `false` | Square, for a single icon as the content. Give it an `aria-label`. |
| `loading` | `boolean` | `false` | Shows a spinner and ignores presses, while the button keeps focus and its label for screen readers, which also hear that it is loading. |
| `prepend` | `Snippet` |  | Content before the label, usually an icon. |
| `append` | `Snippet` |  | Content after the label, usually an icon. |
| `children` | `Snippet` |  | The label. |
| `class` | `ClassValue \| null` |  | Classes added after the component's own: a string, an array or an object. |
| `ref` | `HTMLButtonElement \| HTMLAnchorElement \| null` |  | The root element, bindable with `bind:ref`. |

### ButtonGroup

Docs: ./components/button-group

Buttons joined into one control: shared borders, square inner corners, and the same
variant, size, density and colour unless a Button says otherwise. Give it an `aria-label`.

```svelte
<script>
  import { Button, ButtonGroup } from 'sveltier';
</script>

<ButtonGroup aria-label="Export">
  <Button onclick={exportCsv}>CSV</Button>
  <Button onclick={exportPdf}>PDF</Button>
</ButtonGroup>
```

`ButtonGroupProps`:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `'elevated' \| 'flat' \| 'tonal' \| 'outlined' \| 'text' \| 'plain'` | `'outlined'` | The variant of the Buttons. |
| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | The size of the Buttons. |
| `density` | `'compact' \| 'default' \| 'comfortable'` | `'default'` | The density of the Buttons. |
| `color` | `Color` | `'primary'` | The colour of the Buttons. |
| `rounded` | `boolean \| 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | `true` | The rounding of the group's outer corners; inner corners are square. |
| `children` | `Snippet` |  | The Buttons. |
| `class` | `ClassValue \| null` |  | Classes added after the component's own: a string, an array or an object. |
| `ref` | `HTMLDivElement \| null` |  | The root element, bindable with `bind:ref`. |

### Card

Docs: ./components/card

A surface that groups content about one thing: a header, the content and actions. Links
and buttons inside it are what is clickable, not the card.

```svelte
<script>
  import { Avatar, Button, Card } from 'sveltier';
</script>

<Card title="Savings" subtitle="Instant access" level={3}>
  {#snippet prepend()}<Avatar color="success">SV</Avatar>{/snippet}
  <p>$12,480.00</p>
  {#snippet actions()}
    <Button variant="tonal">Add money</Button>
    <Button variant="text">Statement</Button>
  {/snippet}
</Card>
```

`CardProps`:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `'elevated' \| 'flat' \| 'tonal' \| 'outlined' \| 'text' \| 'plain'` | `'elevated'` | Visual weight: a raised surface by default. |
| `color` | `Color` | `'neutral'` | The colour the variant is painted with. Neutral cards use the theme's surface, text and border colours. |
| `density` | `'compact' \| 'default' \| 'comfortable'` | `'default'` | Multiplies the padding and the space between sections. |
| `rounded` | `boolean \| 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | `true` | Corner rounding. `true` keeps the theme's radius. |
| `title` | `string` |  | The title, in the header. |
| `subtitle` | `string` |  | A line under the title. |
| `level` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` |  | Makes the title a heading of this level (`<h2>`, `<h3>`…), so it is in the page's outline. Without it the title is styled text. |
| `prepend` | `Snippet` |  | Content before the title, such as an avatar or an icon. |
| `append` | `Snippet` |  | Content after the title, such as a menu button. |
| `actions` | `Snippet` |  | Buttons or links at the bottom. |
| `children` | `Snippet` |  | The content. |
| `class` | `ClassValue \| null` |  | Classes added after the component's own: a string, an array or an object. |
| `ref` | `HTMLDivElement \| null` |  | The root element, bindable with `bind:ref`. |

### Chip

Docs: ./components/chip

A compact label: a tag (optionally `closable`), a filter that toggles (`selected`), an
action (`onclick`) or a link (`href`).

```svelte
<script>
  import { Chip } from 'sveltier';
  let card = $state(true);
  let transfer = $state(false);
</script>

<Chip bind:selected={card}>Card</Chip>
<Chip bind:selected={transfer}>Transfer</Chip>
```

`ChipProps`:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `'elevated' \| 'flat' \| 'tonal' \| 'outlined' \| 'text' \| 'plain'` | `'tonal'` | Visual weight. A selected chip is `flat`. |
| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'sm'` | Height and text size. |
| `density` | `'compact' \| 'default' \| 'comfortable'` | `'default'` | Multiplies the height and padding, never the text. |
| `color` | `Color` | `'neutral'` | The colour the variant is painted with. |
| `rounded` | `boolean \| 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | `true` | Corner rounding. `true` keeps the pill. |
| `disabled` | `boolean` | `false` | A disabled chip cannot be pressed; a disabled link loses its `href`. |
| `selected` | `boolean` |  | Makes the chip a toggle button (`aria-pressed`) that flips it when pressed: a filter. Bindable. Shows a check while selected. |
| `closable` | `boolean` | `false` | Adds a button that removes the chip by calling `onclose`. Only for chips that are not themselves buttons or links. |
| `closeLabel` | `string` |  | The name of the close button, such as `Remove Euro`. Defaults to the locale's `close`. |
| `onclose` | `() => void` |  | Called by the close button. |
| `prepend` | `Snippet` |  | Content before the label, usually an icon or an avatar. |
| `append` | `Snippet` |  | Content after the label. |
| `children` | `Snippet` |  | The label. |
| `class` | `ClassValue \| null` |  | Classes added after the component's own: a string, an array or an object. |
| `ref` | `HTMLSpanElement \| HTMLButtonElement \| HTMLAnchorElement \| null` |  | The root element, bindable with `bind:ref`. |

### Divider

Docs: ./components/divider

A hairline between groups of content: an `<hr>`, which assistive technology reads as a separator.

```svelte
<script>
  import { Divider } from 'sveltier';
</script>

<p>Available</p>
<Divider />
<p>Pending</p>

<!-- In a row, a vertical divider is as tall as the row. -->
<div style="display: flex">
  <Button variant="text">Week</Button>
  <Divider vertical />
  <Button variant="text">Export</Button>
</div>
```

`DividerProps`:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `vertical` | `boolean` | `false` | Runs top to bottom, between items in a row, and stretches to the row's height. |
| `class` | `ClassValue \| null` |  | Classes added after the component's own: a string, an array or an object. |
| `ref` | `HTMLHRElement \| null` |  | The root element, bindable with `bind:ref`. |

### Icon

Docs: ./components/icon

An icon: SVG path data, or any icon of your own as `children`. Decorative unless it has a
`label`.

```svelte
<script>
  import { Icon } from 'sveltier';
  // Path-based sets export path strings, for example Material Design Icons.
  import { mdiBank } from '@mdi/js';
</script>

<Icon path={mdiBank} />
<Icon path={mdiBank} size="lg" color="primary" />
```

`IconProps`:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `path` | `string` |  | SVG path data, filled with the current colour: the format of path-based icon sets such as Material Design Icons. Several shapes go in one string (`M… Z M… Z`). |
| `viewBox` | `string` | `'0 0 24 24'` | The coordinate box of `path`. |
| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` |  | The text size the icon is drawn at, φ^½ larger. Without it, the icon follows the text around it. |
| `color` | `Color` |  | The icon's colour. Without it, the icon takes the colour of the text around it. |
| `label` | `string` |  | A name for an icon that means something on its own, for assistive technology. Without it, the icon is decorative and hidden from it. |
| `children` | `Snippet` |  | Any other icon (an `<svg>`, an icon component), sized and coloured like a path. |
| `class` | `ClassValue \| null` |  | Classes added after the component's own: a string, an array or an object. |
| `ref` | `HTMLSpanElement \| null` |  | The root element, bindable with `bind:ref`. |

### List and ListItem

Docs: ./components/list

A list of rows: `ListItem`s. Density and colour are set here, for every item.

```svelte
<script>
  import { List, ListItem } from 'sveltier';
</script>

<nav aria-label="Banking">
  <List nav>
    <ListItem title="Overview" href="/" active />
    <ListItem title="Cards" href="/cards" />
  </List>
</nav>

<List>
  <ListItem title="Savings" subtitle="Instant access">
    {#snippet append()}$12,480.00{/snippet}
  </ListItem>
</List>
```

`ListProps`:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `density` | `'compact' \| 'default' \| 'comfortable'` | `'default'` | Multiplies the height and padding of its items. |
| `color` | `Color` | `'primary'` | The colour of the active item. |
| `nav` | `boolean` | `false` | Rounded rows set in from the edges, for navigation. |
| `children` | `Snippet` |  | The `ListItem`s. |
| `class` | `ClassValue \| null` |  | Classes added after the component's own: a string, an array or an object. |
| `ref` | `HTMLUListElement \| null` |  | The root element, bindable with `bind:ref`. |

`ListItemProps`:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` |  | The main line. |
| `subtitle` | `string` |  | A second line, under the title. |
| `href` | `string` |  | Makes the row a link. |
| `target` | `HTMLAnchorAttributes['target']` |  | Where a link opens, as on `<a>`. |
| `rel` | `string` |  | The relationship of a link, as on `<a>`. |
| `onclick` | `(event: MouseEvent) => void` |  | Makes the row a button that calls this. |
| `active` | `boolean` | `false` | The current page or the selected row: tinted in the list's colour, and `aria-current="page"` on a link. |
| `disabled` | `boolean` | `false` | A disabled row cannot be pressed; a disabled link loses its `href`. |
| `prepend` | `Snippet` |  | Content before the text, such as an avatar or an icon. |
| `append` | `Snippet` |  | Content after the row's link or button, such as a value or a menu button. |
| `children` | `Snippet` |  | More content under the title and subtitle. |
| `class` | `ClassValue \| null` |  | Classes added after the component's own: a string, an array or an object. |
| `ref` | `HTMLLIElement \| null` |  | The root element, bindable with `bind:ref`. |

### ProgressLinear and ProgressCircular

Docs: ./components/progress

A horizontal progress bar.

```svelte
<script>
  import { ProgressCircular, ProgressLinear } from 'sveltier';
</script>

<ProgressLinear value={uploaded} label="Uploading statement" />
<ProgressCircular value={62} size="lg">62%</ProgressCircular>
<ProgressCircular indeterminate label="Loading accounts" />
```

`ProgressLinearProps`:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `color` | `Color` | `'primary'` | The colour of the bar; its track is a tint of it. |
| `value` | `number` |  | How far along, from 0 to 100. Values outside are clamped. |
| `indeterminate` | `boolean` | `false` | Busy for an unknown time: no value, and moving. |
| `label` | `string` |  | The name screen readers give the bar, such as `Uploading statement`. Defaults to the locale's `loading` when indeterminate and `progress` otherwise. |
| `class` | `ClassValue \| null` |  | Classes added after the component's own: a string, an array or an object. |
| `ref` | `HTMLDivElement \| null` |  | The root element, bindable with `bind:ref`. |

`ProgressCircularProps`:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `color` | `Color` | `'primary'` | The colour of the arc; its track is a tint of it. |
| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | The diameter: the control height of the size. |
| `value` | `number` |  | How far along, from 0 to 100. Values outside are clamped. |
| `indeterminate` | `boolean` | `false` | Busy for an unknown time: no value, and moving. |
| `label` | `string` |  | The name screen readers give the bar, such as `Uploading statement`. Defaults to the locale's `loading` when indeterminate and `progress` otherwise. |
| `children` | `Snippet` |  | Content in the centre, such as the percentage. |
| `class` | `ClassValue \| null` |  | Classes added after the component's own: a string, an array or an object. |
| `ref` | `HTMLDivElement \| null` |  | The root element, bindable with `bind:ref`. |

### SegmentedControl

Docs: ./components/segmented-control

One choice among a few options, side by side, as a radio group with one tab stop. Name it
with `aria-label`.

```svelte
<script>
  import { SegmentedControl } from 'sveltier';
  let range = $state('1M');
</script>

<SegmentedControl
  aria-label="Chart range"
  options={[
    { value: '1W', label: '1W' },
    { value: '1M', label: '1M' },
    { value: '1Y', label: '1Y' }
  ]}
  bind:value={range}
/>
```

`SegmentedControlProps`:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `'elevated' \| 'flat' \| 'tonal' \| 'outlined' \| 'text' \| 'plain'` | `'elevated'` | How the selected segment is painted: a raised surface by default. |
| `color` | `Color` | `'neutral'` | The colour of the selected segment. |
| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Height and text size. |
| `density` | `'compact' \| 'default' \| 'comfortable'` | `'default'` | Multiplies the height and padding, never the text. |
| `rounded` | `boolean \| 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | `true` | Corner rounding. `true` keeps the theme's radius. |
| `options` | `readonly SegmentedControlOption<T>[]` |  | The choices, in order. |
| `value` | `T` |  | The chosen value. Bindable. |
| `onchange` | `(value: T) => void` |  | Called with the value the user picks. |
| `disabled` | `boolean` | `false` | Disables every option. |
| `class` | `ClassValue \| null` |  | Classes added after the component's own: a string, an array or an object. |
| `ref` | `HTMLDivElement \| null` |  | The root element, bindable with `bind:ref`. |

### Skeleton

Docs: ./components/skeleton

A placeholder in the shape of content that is still loading. Hidden from assistive
technology: mark the region that is loading with `aria-busy="true"` instead.

```svelte
<script>
  import { Skeleton } from 'sveltier';
</script>

<!-- aria-busy tells assistive technology to wait for the real content. -->
<section aria-busy={loading}>
  {#if loading}
    <Skeleton type="circle" />
    <Skeleton lines={2} />
    <Skeleton type="rect" />
  {:else}
    …
  {/if}
</section>
```

`SkeletonProps`:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `type` | `'text' \| 'rect' \| 'circle'` | `'text'` | Lines of text, a golden rectangle that fills the width (an image, a chart), or a circle (an avatar). |
| `lines` | `number` | `1` | Lines of text; the last of several is φ⁻¹ as wide. |
| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | The diameter of a circle: the control height of the size. |
| `class` | `ClassValue \| null` |  | Classes added after the component's own: a string, an array or an object. |
| `ref` | `HTMLSpanElement \| null` |  | The root element, bindable with `bind:ref`. |

### Tabs

Docs: ./components/tabs

Tabs and the panel of the selected one. Name the tab list with `aria-label` or
`aria-labelledby`, which go to it.

```svelte
<script>
  import { Tabs } from 'sveltier';
  let section = $state('overview');
</script>

<Tabs
  aria-label="Account"
  items={[
    { value: 'overview', label: 'Overview' },
    { value: 'activity', label: 'Activity' }
  ]}
  bind:value={section}
>
  {#snippet panel(item)}
    <AccountSection name={item.value} />
  {/snippet}
</Tabs>
```

`TabsProps`:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `color` | `Color` | `'primary'` | The colour of the selected tab and its underline. |
| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Height and text size of the tabs. |
| `density` | `'compact' \| 'default' \| 'comfortable'` | `'default'` | Multiplies the height and padding of the tabs, never the text. |
| `grow` | `boolean` | `false` | Tabs share the full width equally. |
| `items` | `readonly TabsItem<T>[]` |  | The tabs, in order. |
| `value` | `T` |  | The selected tab. Bindable; the first enabled tab when not set. |
| `onchange` | `(value: T) => void` |  | Called with the value of the tab the user selects. |
| `activation` | `'automatic' \| 'manual'` | `'automatic'` | `automatic` selects a tab as soon as the arrow keys reach it; `manual` waits for Enter or Space, for panels that are slow to show. |
| `panel` | `Snippet<[TabsItem<T>]>` |  | The content of the selected tab's panel. |
| `class` | `ClassValue \| null` |  | Classes added after the component's own: a string, an array or an object. |
| `ref` | `HTMLDivElement \| null` |  | The root element, bindable with `bind:ref`. |

## Forms

### Form

Docs: ./forms/form

A `<form>` that checks its fields when it is submitted. An invalid form does not submit: every
field shows its message and the first invalid one takes focus. A valid form calls `onsubmit`,
or submits as HTML does when there is no `onsubmit`, so SvelteKit form actions work as they
are. Other attributes go to the `<form>`. Through `bind:this` it offers `validate()`,
`reset()` and `resetValidation()`.

```svelte
<script>
  import { enhance } from '$app/forms';
  import { fromAction } from 'svelte/attachments';
  import { Button, Form, TextField } from 'sveltier';

  // What the form action returned, such as { errors: { email: 'This email is taken' } }.
  let { form } = $props();
</script>

<!-- Without JavaScript the form posts to the action as HTML does; with it, enhance sends it,
     and only once every field is valid. -->
<Form method="POST" action="?/signup" {@attach fromAction(enhance)}>
  <TextField label="Email" type="email" name="email" required error={form?.errors?.email} />
  <TextField label="Password" type="password" name="password" minlength={8} required />
  <Button type="submit">Create account</Button>
</Form>
```

`FormProps`:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `validateOn` | `'blur' \| 'input' \| 'submit'` | `'blur'` | When the fields show their messages, unless a field sets its own. |
| `disabled` | `boolean` | `false` | Disables every control inside, Buttons included, for example while a submission runs. |
| `onsubmit` | `(event: SubmitEvent & {         currentTarget: EventTarget & HTMLFormElement;     }) => void` |  | Called when the form is submitted and every field is valid. Without it, the form submits as HTML does; call `event.preventDefault()` to handle the submission yourself. |
| `children` | `Snippet` |  | The fields and buttons. |
| `class` | `ClassValue \| null` |  | Classes added after the component's own: a string, an array or an object. |
| `ref` | `HTMLFormElement \| null` |  | The root element, bindable with `bind:ref`. |

### TextField

Docs: ./forms/text-field

A single line of text with a label, a hint and validation. `class` and `style` apply to the
field; `id`, `ref` and every other attribute (`name`, `placeholder`, `autocomplete`,
`minlength`, `pattern`, events) go to the `<input>`.

```svelte
<script>
  import { TextField } from 'sveltier';

  // The result of a SvelteKit form action, with the server's own errors.
  let { form } = $props();
  let username = $state('');

  const rules = [
    (value) => /^[a-z0-9_]+$/.test(value) || 'Use lowercase letters, digits and _',
    (value) => !value.startsWith('_') || 'Start with a letter or a digit'
  ];
</script>

<TextField
  label="Username"
  name="username"
  required
  minlength={3}
  maxlength={20}
  {rules}
  error={form?.errors?.username}
  bind:value={username}
/>
```

`TextFieldProps`:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `'outlined' \| 'tonal' \| 'elevated' \| 'text' \| 'plain'` | `'outlined'` | How the box is drawn. |
| `color` | `Color` | `'primary'` | The accent of the focused field. An invalid field uses `error`. |
| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Height and text size, matching a Button of the same size. |
| `density` | `'compact' \| 'default' \| 'comfortable'` | `'default'` | Multiplies the height and padding, never the text. |
| `rounded` | `boolean \| 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | `true` | Corner rounding. `true` keeps the theme's radius. |
| `disabled` | `boolean` | `false` | Mutes the field and disables its control. |
| `label` | `string` |  | The visible label, linked to the control. Without it, name the control with `aria-label`. |
| `hint` | `string` |  | Help under the field. An error replaces it. |
| `error` | `FieldError` |  | An error from outside the field, such as the server's answer: a message, a list of which the first is shown, or `true` for an invalid state described elsewhere. |
| `prepend` | `Snippet` |  | Content at the start of the box, usually an icon. |
| `append` | `Snippet` |  | Content at the end of the box: an icon, a unit or a button. |
| `value` | `string` |  | The text. Bindable. |
| `type` | `'text' \| 'email' \| 'password' \| 'search' \| 'tel' \| 'url'` | `'text'` | The kind of text: it picks the keyboard and autofill, and `email` and `url` are checked. |
| `rules` | `readonly Rule<string>[]` |  | Checks run in order after the HTML constraints. The first message is shown. |
| `validateOn` | `'blur' \| 'input' \| 'submit'` |  | When the message shows. Defaults to the form's setting, else `'blur'`. |
| `required` | `boolean` | `false` | The field must not be empty. Adds an asterisk to the label. |
| `readonly` | `boolean` | `false` | The text can be read, selected and copied but not changed. |
| `style` | `string \| null` |  | Inline style of the field's root element. |
| `class` | `ClassValue \| null` |  | Classes added after the component's own: a string, an array or an object. |
| `ref` | `HTMLInputElement \| null` |  | The root element, bindable with `bind:ref`. |

### Textarea

Docs: ./forms/textarea

Several lines of text with a label, a hint and validation. `class` and `style` apply to the
field; `id`, `ref` and every other attribute (`name`, `placeholder`, `minlength`,
`maxlength`, events) go to the `<textarea>`.

```svelte
<script>
  import { Textarea } from 'sveltier';
  let note = $state('');
</script>

<!-- Grows with its text from 2 to 8 lines, then scrolls. -->
<Textarea
  label="Note to the payee"
  name="note"
  hint="They see it on their statement"
  maxlength={280}
  rows={2}
  autoGrow
  maxRows={8}
  bind:value={note}
/>
```

`TextareaProps`:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `'outlined' \| 'tonal' \| 'elevated' \| 'text' \| 'plain'` | `'outlined'` | How the box is drawn. |
| `color` | `Color` | `'primary'` | The accent of the focused field. An invalid field uses `error`. |
| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Height and text size, matching a Button of the same size. |
| `density` | `'compact' \| 'default' \| 'comfortable'` | `'default'` | Multiplies the height and padding, never the text. |
| `rounded` | `boolean \| 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | `true` | Corner rounding. `true` keeps the theme's radius. |
| `disabled` | `boolean` | `false` | Mutes the field and disables its control. |
| `label` | `string` |  | The visible label, linked to the control. Without it, name the control with `aria-label`. |
| `hint` | `string` |  | Help under the field. An error replaces it. |
| `error` | `FieldError` |  | An error from outside the field, such as the server's answer: a message, a list of which the first is shown, or `true` for an invalid state described elsewhere. |
| `prepend` | `Snippet` |  | Content at the start of the box, usually an icon. |
| `append` | `Snippet` |  | Content at the end of the box: an icon, a unit or a button. |
| `value` | `string` |  | The text. Bindable. |
| `rows` | `number` | `3` | Visible lines, and the fewest it shows when it grows. |
| `autoGrow` | `boolean` | `false` | Grows with its text instead of scrolling, up to `maxRows`. |
| `maxRows` | `number` |  | With `autoGrow`, the most lines it grows to before it scrolls. Unlimited when not set. |
| `rules` | `readonly Rule<string>[]` |  | Checks run in order after the HTML constraints. The first message is shown. |
| `validateOn` | `'blur' \| 'input' \| 'submit'` |  | When the message shows. Defaults to the form's setting, else `'blur'`. |
| `required` | `boolean` | `false` | The field must not be empty. Adds an asterisk to the label. |
| `readonly` | `boolean` | `false` | The text can be read, selected and copied but not changed. |
| `style` | `string \| null` |  | Inline style of the field's root element. |
| `class` | `ClassValue \| null` |  | Classes added after the component's own: a string, an array or an object. |
| `ref` | `HTMLTextAreaElement \| null` |  | The root element, bindable with `bind:ref`. |

### NumberField

Docs: ./forms/number-field

A number typed in the app's locale, stepped with the arrow keys or the buttons, and checked
against `min`, `max` and `step`. The field shows the number formatted, for example
`1,234.50`, and binds and submits the plain number. `class` and `style` apply to the field;
`id`, `ref` and other attributes go to the `<input>`.

```svelte
<script>
  import { NumberField } from 'sveltier';
  let quantity = $state(1);
  let amount = $state(null);
</script>

<NumberField label="Quantity" name="quantity" min={1} max={99} step={1} bind:value={quantity} />

<!-- Digits only in format: the currency goes in prepend, so the text stays editable. -->
<NumberField
  label="Amount"
  name="amount"
  min={0}
  format={{ minimumFractionDigits: 2, maximumFractionDigits: 2 }}
  required
  bind:value={amount}
>
  {#snippet prepend()}USD{/snippet}
</NumberField>
```

`NumberFieldProps`:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `'outlined' \| 'tonal' \| 'elevated' \| 'text' \| 'plain'` | `'outlined'` | How the box is drawn. |
| `color` | `Color` | `'primary'` | The accent of the focused field. An invalid field uses `error`. |
| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Height and text size, matching a Button of the same size. |
| `density` | `'compact' \| 'default' \| 'comfortable'` | `'default'` | Multiplies the height and padding, never the text. |
| `rounded` | `boolean \| 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | `true` | Corner rounding. `true` keeps the theme's radius. |
| `disabled` | `boolean` | `false` | Mutes the field and disables its control. |
| `label` | `string` |  | The visible label, linked to the control. Without it, name the control with `aria-label`. |
| `hint` | `string` |  | Help under the field. An error replaces it. |
| `error` | `FieldError` |  | An error from outside the field, such as the server's answer: a message, a list of which the first is shown, or `true` for an invalid state described elsewhere. |
| `prepend` | `Snippet` |  | Content at the start of the box, usually an icon. |
| `append` | `Snippet` |  | Content at the end of the box: an icon, a unit or a button. |
| `value` | `number \| null` |  | The number, or `null` when the field is empty. Bindable. |
| `min` | `number` |  | The smallest value. The keys and buttons stop here; a smaller typed value is an error. |
| `max` | `number` |  | The largest value. The keys and buttons stop here; a larger typed value is an error. |
| `step` | `number` |  | How far the arrow keys and the buttons move; Page Up and Page Down move ten steps. When set, a typed value off the steps, counted from `min`, is an error. When not set, they move by 1 and any number is accepted, decimals included. |
| `format` | `Intl.NumberFormatOptions` | `{ maximumFractionDigits: 20 }` | How the number is written once the user leaves the field, as `Intl.NumberFormat` options in the app's locale: digits only, such as `{ minimumFractionDigits: 2 }`, so the user can edit what they see. Put a currency or a unit in `prepend` or `append`. |
| `controls` | `boolean` | `true` | Shows decrease and increase buttons at the end of the field. |
| `rules` | `readonly Rule<number>[]` |  | Checks run in order after the HTML constraints, with the number. The first message is shown. |
| `validateOn` | `'blur' \| 'input' \| 'submit'` |  | When the message shows. Defaults to the form's setting, else `'blur'`. |
| `required` | `boolean` | `false` | The field must not be empty. Adds an asterisk to the label. |
| `readonly` | `boolean` | `false` | The number can be read and copied but not changed. |
| `name` | `string` |  | Submits the plain number, such as `1234.5`, under this name in a form. |
| `style` | `string \| null` |  | Inline style of the field's root element. |
| `class` | `ClassValue \| null` |  | Classes added after the component's own: a string, an array or an object. |
| `ref` | `HTMLInputElement \| null` |  | The root element, bindable with `bind:ref`. |

### NativeSelect

Docs: ./forms/native-select

One choice from a list, as the platform's own `<select>` in a Field: the phone's picker and the
browser's keyboard behaviour come for free. `class` and `style` apply to the field; `id`, `ref`,
`name` and other attributes go to the `<select>`. The end of the box holds its arrow, so there
is no `append`.

```svelte
<script>
  import { NativeSelect } from 'sveltier';
  let country = $state(null);
</script>

<NativeSelect
  label="Country"
  name="country"
  placeholder="Choose a country"
  required
  options={[
    { value: 'gb', label: 'United Kingdom' },
    { value: 'jp', label: 'Japan' },
    { value: 'vn', label: 'Vietnam' }
  ]}
  bind:value={country}
/>
```

`NativeSelectProps`:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `'outlined' \| 'tonal' \| 'elevated' \| 'text' \| 'plain'` | `'outlined'` | How the box is drawn. |
| `color` | `Color` | `'primary'` | The accent of the focused field. An invalid field uses `error`. |
| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Height and text size, matching a Button of the same size. |
| `density` | `'compact' \| 'default' \| 'comfortable'` | `'default'` | Multiplies the height and padding, never the text. |
| `rounded` | `boolean \| 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | `true` | Corner rounding. `true` keeps the theme's radius. |
| `disabled` | `boolean` | `false` | Mutes the field and disables its control. |
| `error` | `FieldError` |  | An error from outside the field, such as the server's answer: a message, a list of which the first is shown, or `true` for an invalid state described elsewhere. |
| `prepend` | `Snippet` |  | Content at the start of the box, usually an icon. |
| `label` | `string` |  | The visible label, linked to the control. Without it, name the control with `aria-label`. |
| `hint` | `string` |  | Help under the field. An error replaces it. |
| `options` | `readonly NativeSelectOption<T>[]` |  | The choices, in order. |
| `value` | `T \| null` |  | The chosen value, or `null` for none. Bindable. |
| `placeholder` | `string` |  | A first option that stands for no choice, such as "Choose a country". |
| `rules` | `readonly Rule<T>[]` |  | Checks run in order after `required`, with the chosen value. The first message is shown. |
| `validateOn` | `'blur' \| 'input' \| 'submit'` |  | When the message shows. Defaults to the form's setting, else `'blur'`. |
| `required` | `boolean` | `false` | A choice must be made. Adds an asterisk to the label, and the placeholder cannot be chosen again once the user has picked something. |
| `style` | `string \| null` |  | Inline style of the field's root element. |
| `class` | `ClassValue \| null` |  | Classes added after the component's own: a string, an array or an object. |
| `ref` | `HTMLSelectElement \| null` |  | The root element, bindable with `bind:ref`. |

### Field

Docs: ./forms/field

A label, a box for a control, and its hint or error. Wrap your own control in it: the
children snippet receives the id, ARIA links and state to spread onto the control. Other
attributes go to the root element.

```svelte
<script>
  import { Field } from 'sveltier';
  let start = $state('');
</script>

<Field label="Start date" hint="The first payment goes out on this day" required>
  {#snippet children(attributes)}
    <input type="date" name="start" {...attributes} bind:value={start} />
  {/snippet}
</Field>
```

`FieldProps`:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `'outlined' \| 'tonal' \| 'elevated' \| 'text' \| 'plain'` | `'outlined'` | How the box is drawn. |
| `color` | `Color` | `'primary'` | The accent of the focused field. An invalid field uses `error`. |
| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Height and text size, matching a Button of the same size. |
| `density` | `'compact' \| 'default' \| 'comfortable'` | `'default'` | Multiplies the height and padding, never the text. |
| `rounded` | `boolean \| 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | `true` | Corner rounding. `true` keeps the theme's radius. |
| `disabled` | `boolean` | `false` | Mutes the field and disables its control. |
| `label` | `string` |  | The visible label, linked to the control. Without it, name the control with `aria-label`. |
| `hint` | `string` |  | Help under the field. An error replaces it. |
| `error` | `FieldError` |  | An error from outside the field, such as the server's answer: a message, a list of which the first is shown, or `true` for an invalid state described elsewhere. |
| `prepend` | `Snippet` |  | Content at the start of the box, usually an icon. |
| `append` | `Snippet` |  | Content at the end of the box: an icon, a unit or a button. |
| `id` | `string \| null` |  | The id of the control. Generated when not given. |
| `required` | `boolean` | `false` | Adds an asterisk to the label. The control carries `required` itself. |
| `readonly` | `boolean` | `false` | The control can be read and focused but not changed. |
| `children` | `Snippet<[FieldControlAttributes]>` |  | The control. Spread the attributes it receives onto it. |
| `class` | `ClassValue \| null` |  | Classes added after the component's own: a string, an array or an object. |
| `ref` | `HTMLDivElement \| null` |  | The root element, bindable with `bind:ref`. |

`FieldControlAttributes`:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `id` | `string` |  | The id the label points at. |
| `class` | `string` |  | `sv-field__control`: fills the box and takes its text style. |
| `aria-describedby` | `string \| undefined` |  | The hint or the error, whichever is shown. |
| `aria-invalid` | `true \| undefined` |  | Set while the field shows an error. |
| `required` | `boolean` |  |  |
| `disabled` | `boolean` |  |  |
| `readonly` | `boolean` |  |  |

## Primitives

Behaviour for your own components: attachments (`{@attach focusTrap()}`) and helpers.

### focusTrap

Docs: ./primitives/focus

`FocusTrapOptions`:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `initialFocus` | `FocusableElement \| string \| false` |  | Where focus goes when the trap starts, unless it is already inside: an element, a selector inside the container, or `false` to leave it where it is. Defaults to the first tabbable element, else the container. |
| `returnFocus` | `boolean \| FocusableElement \| null` |  | Where focus goes when the trap ends: `true` for the element that had it when the trap started, an element (pass the trigger: Safari does not focus a button on click, so the element that had focus may be the page itself), or `false` to leave it. Defaults to `true`. |

### rovingFocus

Docs: ./primitives/focus

`RovingFocusOptions`:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `orientation` | `'horizontal' \| 'vertical' \| 'both'` |  | Which arrow keys move: left/right, up/down, or both. Defaults to `'horizontal'`. |
| `loop` | `boolean` |  | Wrap from the last item to the first and back. Defaults to `true`. |
| `items` | `string` |  | Selector for the items, inside the container. Defaults to `[data-sv-item]`. |

### dismissable

Docs: ./primitives/layers

`DismissableOptions`:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onDismiss` | `(reason: DismissReason) => void` |  | Called when the user dismisses the layer. The component decides whether to close. |
| `escape` | `boolean` |  | Dismiss on Escape, unless something inside handled it first. Defaults to `true`. |
| `outside` | `boolean` |  | Dismiss on a pointer press outside. Defaults to `true`. |
| `focusOutside` | `boolean` |  | Dismiss when focus moves outside, as menus do on Tab. Defaults to `false`. |
| `inside` | `Elements \| (() => Elements)` |  | Elements that count as inside, such as the trigger, which toggles instead. |

### Portal

Docs: ./primitives/modality

`PortalProps`:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `target` | `HTMLElement \| string` |  | Where the content goes: an element or a selector. Defaults to `document.body`. |
| `children` | `Snippet` |  |  |

### anchored

Docs: ./primitives/positioning

`AnchoredOptions`:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `anchor` | `Element \| null \| undefined` |  | The element to place against. Nothing happens until it exists. |
| `side` | `'top' \| 'bottom' \| 'start' \| 'end'` |  | Defaults to `'bottom'`. |
| `align` | `'start' \| 'center' \| 'end'` |  | Defaults to `'start'`. |
| `offset` | `number` |  | Gap between the anchor and the floating element, in px. Defaults to 5. |
| `flip` | `boolean` |  | Move to the opposite side when there is not enough room. Defaults to `true`. |

### typeahead

Docs: ./primitives/keyboard

`TypeaheadOptions`:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `string` |  | Selector for the items, inside the container. Defaults to `[data-sv-item]`. |
| `timeout` | `number` |  | How long typed characters keep building one search, in ms. Defaults to 500. |
| `onMatch` | `(item: HTMLElement) => void` |  | What a match does. Defaults to focusing the item. |

### Motion transitions

Docs: ./primitives/motion

`TransitionOptions`:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `duration` | `number` |  | In ms. Defaults to the theme's normal duration. |
| `delay` | `number` |  |  |

### virtualList

Docs: ./primitives/virtual-lists

`VirtualListOptions`:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `count` | `number` |  | How many items the list has. |
| `itemSize` | `number \| ((index: number) => number)` |  | Item height in px: one number when every item is as tall, or an estimate per index. Items with the `measure` attachment are measured, and the measurement wins. |
| `overscan` | `number` |  | Items rendered beyond each edge of the viewport. Defaults to 3. |
| `key` | `(index: number) => VirtualKey` |  | A stable key per item, so measured heights follow items that move. Defaults to the index. Once items are measured it is read for every item when sizes change: keep large data in `$state.raw`, not deep `$state`. |
| `ssrHeight` | `number` |  | Viewport height in px assumed until the viewport is measured, as on the server. Defaults to 0. |

`VirtualList`:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `VirtualItem[]` |  | The items to render: those in view, plus the overscan. |
| `totalSize` | `number` |  | Height of all the items together in px: the height of the element that holds them. |
| `viewport` | `Attachment<HTMLElement>` |  | For the scroll container. |
| `measure` | `Attachment<HTMLElement>` |  | For item elements, with `data-index={item.index}`, to measure their real height. |
| `scrollToIndex` | `(index: number, options?: ScrollToIndexOptions) => void` |  | Scrolls the viewport, at once, so the item is in view, and renders it in the same update. Indexes outside the list are ignored. |

## Errors

Messages start with `[sveltier SVxxxx]`, say what to do, and link to ./errors. Errors are thrown in every build; warnings are logged in development only.

- `SV1001` The root ThemeProvider has no themes. The outermost `<ThemeProvider>`, which `<UIProvider>` renders, registers the themes an app can show. None were passed, so there is nothing to paint. Fix: Pass at least one theme pack: `themes={monolith}` from `'sveltier/themes/monolith'`, or several at once: `themes={{ ...monolith, ...maison }}`.
- `SV1002` Unknown theme. A theme was chosen by a name that is not registered: through the `theme` prop, `useTheme().set()`, or the `light`, `dark` or `fallback` options of `themeCss()`. Fix: Use a registered name, such as `"monolith-light"`, or `"system"` to follow the operating system. To offer another theme, register it in the `themes` of the root provider.
- `SV1003` Invalid colour or variable name. The colours and variables of a theme become CSS custom properties, so their names must be valid identifiers. Fix: Start the name with a letter and use only letters, digits, `-` and `_`, for example `brand` or `radius-card`.
- `SV1004` Unsafe theme value. Theme values are written into a `<style>` element. A value containing `<`, `>`, `{`, `}` or `;` could end the rule or the element early. Fix: Use a plain CSS value, such as `oklch(0.62 0.19 255)` or `8px`.
- `SV1005` Invalid theme name. Theme names are written into the `data-sv-theme` attribute and its CSS selectors. Fix: Start the name with a letter and use only letters, digits, `-` and `_`. `"system"` is reserved for following the operating system.
- `SV1006` Invalid nonce. The nonce is copied into the attributes of the theme's `<style>` and `<script>`, so it must be a plain base64 value. Fix: Pass the nonce of your Content Security Policy as it is, for example SvelteKit's `%sveltekit.nonce%`.
- `SV1007` useTheme() outside a ThemeProvider. `useTheme()` reads the theme from the component tree, and there is no `<UIProvider>` or `<ThemeProvider>` above the component that called it. Fix: Wrap the app in `<UIProvider>` in the root layout, and call `useTheme()` while a component inside it initialises.
- `SV2001` Display thresholds out of order. Breakpoints are minimum widths, so each one must be wider than the one before it. Fix: Give widths that increase from `sm` to `xxl`, for example `{ sm: 600, md: 960, lg: 1280, xl: 1920, xxl: 2560 }`.
- `SV2002` (development warning) Invalid prop value. A prop that takes one of a fixed set of values got another one, for example `variant="primary"` on a `Button`. Types catch this when the code is checked; the warning catches values that get past them, such as data from an API. Fix: Use one of the values the message lists. The type of the prop and the props table of the component list them too.
- `SV3001` Portal target not found. A Portal moves its content into its target, and no element matched the target selector when the Portal mounted. Fix: Render the target before the Portal, correct the selector, or pass the element itself.
- `SV3002` Invalid item size. `virtualList` places items by their sizes, so every size must be a positive number of pixels. Fix: Pass a positive number, or a function that returns one for every index. For items whose size is unknown, pass an estimate and measure them with `{@attach list.measure}`.
- `SV3003` Measured item without an index. `list.measure` reads the index of each measured element from its `data-index` attribute. Fix: Add `data-index={item.index}` to every element that has `{@attach list.measure}`.
- `SV4001` Closable chip that is also a button or a link. A closable chip contains a close button, and a button cannot be placed inside another button or a link. Fix: Keep the chip `closable` and put its action in a `Button` next to it, or remove `closable`.
- `SV5001` (development warning) Field without an accessible name. Assistive technology announces a form control by its name, and this control has no label, `aria-label` or `aria-labelledby`. Fix: Give the field a `label`, or name the control with `aria-label`, or with `aria-labelledby` when its label is visible elsewhere.