---

## Toggle
Accessible switch control for boolean on/off states.
Built on a hidden native input with semantic intents and Mint micro-interactions.

**Import:** `import { Toggle } from '@urbicon-ui/blocks';`

### Examples
```svelte
<Toggle label="Enable notifications" bind:checked />
```

```svelte
<Toggle
  intent="success"
  size="lg"
  withBorder
  onCheckedChange={(val) => console.log('toggled', val)}
/>
```

### Variants
- intent: danger, neutral, primary, secondary, success, warning (default: primary)
- size: lg, md, sm, xs (default: md)
- appearance: default, dot (default: default)
- disabled: true (default: false)
- tier: commit, modify (default: commit)
- withBorder: false, true (default: false)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| ...HTMLInputAttributes | `HTMLAttributes` | no |  | HTML attributes (excluding: 'type' | 'size' | 'checked' | 'class' | 'children') |
| ...ToggleVariants | `VariantProps` | no |  | Styling variants from ToggleVariants |
| appearance | `ToggleVariants['appearance']` | no | 'default' | Visual style. `default` renders a classic Switch-Pill (track + sliding thumb). `dot` renders a small monochrome circular indicator instead — outline-only when off, filled in the intent colour when on. Use `dot` for dense settings rows, inline-toolbars, or anywhere the Switch-Pill is visually too loud. |
| checked | `boolean` | no |  | Current on/off state. Supports two-way binding via `bind:checked`. |
| class | `string` | no |  | Extra classes merged onto the outermost wrapper element. |
| disabled | `boolean` | no |  | Prevent interaction and dim the control. |
| helper | `string` | no |  | Hint text shown below the control. Useful for explaining side-effects of the toggle. |
| id | `string` | no |  | Explicit `id` to link `<label>` and `<input>`. Auto-generated if omitted. |
| label | `string` | no |  | Text label displayed to the right of the toggle track. |
| mint | `MintProp` | no |  | Micro-interaction preset applied to the control area on hover/click. |
| name | `string` | no |  | The `name` attribute of the underlying `<input>`. Used for form submission. |
| onCheckedChange | `(checked: boolean) => void` | no |  | Fired after the checked state changes. Receives the new `checked` value. |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Toggle: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project. |
| required | `boolean` | no |  | Mark the native input as required for form validation. |
| slotClasses | `Partial<Record<ToggleSlots, string>>` | no |  | Per-slot class overrides merged with (or replacing, when `unstyled`) the default styles. Slots: wrapper (root — what `class` also targets) | control (the `<label>` wrapping the input) | track | thumb | label | message. |
| tier | `InteractiveTier` | no |  | Semantic radius tier. Default `commit` — a toggle declares status (on/off identity), and reads as a pill. Set to `modify` (usually via a wrapping `<Toolbar tier="modify">` propagating through TierContext) for inline-toolbar contexts where the Pill feels oversized — the track and thumb shrink to a soft-rectangle.  Inherited from TierContext when omitted; falls back to `commit` outside of any tier-aware container. |
| unstyled | `boolean` | no |  | Strip all default tailwind-variants classes. Use with `slotClasses` for a fully custom look. The track exposes `data-state` for conditional styling. |
| value | `string` | no |  | The value submitted when checked. Defaults to `'on'`. |
| withBorder | `boolean` | no |  | Draw a subtle border around the track. Helps distinguish the control on busy backgrounds. |
| intent | `'danger' | 'neutral' | 'primary' | 'secondary' | 'success' | 'warning'` | no | primary | Controls the color theme and semantic meaning of the Toggle. Affects the overall appearance and user perception. Available options: danger, neutral, primary, and 3 more. |
| size | `'lg' | 'md' | 'sm' | 'xs'` | no | md | Controls the dimensions, padding, and text size of the Toggle. Affects the component's physical footprint. Available options: lg, md, sm, xs. |

Inherited from:
- Omit<ToggleVariants, 'checked'> (omit-pattern)
- Omit<HTMLInputAttributes, 'type' | 'size' | 'checked' | 'class' | 'children'> (omit-pattern)