# Tabs

`Tabs` shows one panel at a time within the page, selected from a scrollable row of tabs with an accent indicator.

## Usage

Load `@dg/ui/styles.css` once in the root layout. Declare each panel as a snippet and pass it with its tab.

```svelte
<script>
  import { Section, Tabs } from "@dg/ui";
  let value = $state("description");
</script>

<Section padding="none" gap="none">
  <Tabs
    label="Artwork details"
    bind:value
    items={[
      { value: "description", label: "Description", panel: description },
      { value: "provenance", label: "Provenance", panel: provenance },
    ]}
  />
</Section>

{#snippet description()}<p>A crypto-jukebox played by its collectors.</p>{/snippet}
{#snippet provenance()}<p>Produced by the collective in 2018.</p>{/snippet}
```

## Notes

- Native HTML attributes, DOM callbacks, class and style are forwarded to the root element.
- Forwarding uses native attribute types; unknown props are not supported. Pass class as a string. `Tabs` renders its items, not a children snippet.
- Every panel is rendered; unselected panels are hidden, so prerendered content stays in the document. Selecting a tab does not change the URL.
- The tab row scrolls horizontally when it overflows and follows the UI typography role. The row and the panels use the layout insets, so they align with a `Section` that has `padding="none"`.
- For navigation between pages, use native links in `Header` or in the page content instead.

## Parameters

| Name    | Type                                                 | Default     | Description                                                                                                       |
| ------- | ---------------------------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------- |
| `items` | `{ value: string, label: string, panel: Snippet }[]` | `[]`        | Tabs and the panels they show. Values must be unique.                                                             |
| `value` | `string · bindable`                                  | `""`        | Selected tab value. Use bind:value to read or set it; an empty or unknown value selects the first tab.            |
| `label` | `string`                                             | `undefined` | Accessible name of the tab list, such as "Artwork details". Defaults to the built-in text in the `Page` language. |

## Accessibility

`Tabs` follows the WAI-ARIA tabs pattern: a `tablist` of `tab` buttons, each controlling a `tabpanel` labelled by its tab. Only the selected tab is in the tab order. Left and Right arrows move to the previous or next tab and wrap around; Home and End reach the first and last tab. Selection follows focus. Tab then moves into the selected panel, which is focusable so its content can be scrolled and read.