# Tabs
> Generated from tabs.contract.json — do not edit by hand.

Switch between sibling content panels from a tab bar — line, primary or card, in two sizes, with per-tab icons.

Tier: **leaf-lit**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: editor, dashboard, settings.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `value` | number | `0` | Zero-based index of the active tab |
| `type` | 'line' | 'primary' | 'card' | `line` | Underline (line), emphasised Bold underline (primary), or filled bg-accent segment (card) |
| `size` | 'default' | 'small' | `default` | Bar height / label size — small is a tighter, shorter bar |
| `tab-position` | 'top' | 'left' | `top` | Orientation — top (horizontal bar, default) or left (vertical rail with the panel to the right; active indicator becomes a side border, arrow-key nav flips to up/down) |
| `items` | JSON array | `—` | Label-only bar (no panels): [{key?,label,icon?,disabled?}]. Omit to use slotted panels instead |
| `[data-tab]` | attribute on each panel child | `—` | The tab label for that panel; optional data-icon (icon name) + data-disabled |
| `change` | CustomEvent<{value}> | `—` | Composed event; read e.detail.value (index) |

## Visual standard (measured)
- Bar: gap 24, 1px border bottom (border #E3E3E3) — card drops the rule, gap 8
- Tab: SemiBold 600 14 / line-height 21, pad 8 0, 8px gap to a 16px leading icon
- Line (default): active color-primary #6A1EBB text + 2px color-primary underline
- Primary: same underline, active label Bold 700
- Card: active in a bg-accent #F9F5FF pill, radius-sm 6, no underline; hover bg-hover
- Inactive: text-secondary #4A4A4A → text-default on hover
- Disabled: text-disabled #B5B5B5, not-allowed, skipped by arrow-key nav
- Small: 13px label, tighter padding + gap
- Left rail: tab-position=left — vertical rail, right-edge 1px rule; active moves to a 2px color-primary side border (line/primary), card keeps its pill; up/down arrow-key nav

## When to use
- **Tabs** — several peer content panels the user moves between within one screen
- **Segmented** — switching a compact view or mode, not larger panels
- **Select** — the choices are many or space is tight

Keep labels to one or two words, sentence case. Order tabs by expected use, most common first, and don't hide critical content behind a rarely-picked tab. Use line/primary for in-page view switching; reach for card when the bar sits on a tinted surface and needs a filled active chip.