---

## Tab
Tab container that manages tab switching and content display.
Supports horizontal/vertical orientation, visual variants, and keyboard navigation.

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

### Examples
```svelte
<Tab
  tabs={[
    { value: 'overview', label: 'Overview' },
    { value: 'settings', label: 'Settings' },
    { value: 'billing', label: 'Billing' }
  ]}
  bind:value={activeTab}
>
  {#snippet panels()}
    {#if activeTab === 'overview'}<p>Overview content</p>{/if}
    {#if activeTab === 'settings'}<p>Settings content</p>{/if}
    {#if activeTab === 'billing'}<p>Billing content</p>{/if}
  {/snippet}
</Tab>
```

```svelte
<Tab
  tabs={[
    { value: 'code', label: 'Code' },
    { value: 'preview', label: 'Preview' }
  ]}
  variant="underline"
  size="sm"
  defaultValue="code"
>
  {#snippet panels()}
    <div>Tab panel content</div>
  {/snippet}
</Tab>
```

### Variants
- variant: enclosed, line, pills, solid (default: line)
- size: lg, md, sm (default: md)
- fullWidth: true (default: false)
- orientation: horizontal, vertical (default: horizontal)
- tier: commit, modify (default: modify)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| class | `string` | no |  | Additional CSS class merged onto the root element. |
| defaultValue | `string` | no |  | Default active tab for uncontrolled mode. Ignored when `value` is set. |
| disabled | `boolean` | no | false | Disables all tabs, preventing interaction and dimming the UI. |
| fullWidth | `boolean` | no | false | Stretch triggers to fill the available width. Only meaningful on horizontal tabs. |
| mint | `MintProp` | no | 'none' | Micro-interaction animation applied to each tab trigger (per-item, not the container). |
| onValueChange | `(value: string) => void` | no |  | Fires when the active tab changes. Receives the new tab value string. |
| orientation | `'horizontal' | 'vertical'` | no | 'horizontal' | Tab strip axis. Determines whether triggers stack horizontally or vertically. |
| panels | `Snippet` | no |  | Snippet containing TabPanel components for the content area. |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Tab: {...} }}>`. 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. |
| slotClasses | `Partial<Record<TabSlots, string>>` | no |  | Per-slot class overrides merged with (or replacing when unstyled) tv() styles. Slots: base | list | trigger | icon | label | badge | panel | indicator |
| tabs | `Snippet` | no |  | Snippet containing TabItem components for the tab strip. |
| tier | `InteractiveTier` | no | 'modify' | Semantic radius tier propagated to every TabItem. Default `modify` — tabs read as navigation tap surfaces. Set to `commit` (or inherit via TierContext from a wrapping `<Toolbar tier="commit">`) for full-pill tab strips in marketing/product-overview contexts. Only the `pills`, `solid`, and `enclosed` variants render a visible corner; `line` is radius-agnostic. |
| unstyled | `boolean` | no |  | Strip all default tv() styles from the container and children. |
| value | `string` | no |  | Controlled active tab value. Use with `bind:value` for two-way binding. When set, the component is controlled — you must handle `onValueChange` to update it. |
| variant | `'enclosed' | 'line' | 'pills' | 'solid'` | no | line | Controls the visual style and presentation of the Tab. Determines the component's visual treatment. Available options: enclosed, line, pills, solid. |
| size | `'lg' | 'md' | 'sm'` | no | md | Controls the dimensions, padding, and text size of the Tab. Affects the component's physical footprint. Available options: lg, md, sm. |