# Tabs

A navigation component that organizes content into multiple panels with clickable tabs.

## Usage

Use standalone.
```svelte
<Tabs {...props} />
```

## Anatomy

The `class` attribute values represent part names. Other attributes represent their corresponding props.

```svelte
<div class="whole">
  <div class="top" {...rest} role="tablist" aria-orientation={orientation} aria-label>
    {#each tabs as tab}
      <button class="label" type="button" role="tab">{tab.label}</button>
    {/each}
  </div>
  {#each tabs as tab}
    <div class="main" role="tabpanel" hidden={!selected}>{tab.panel}</div>
  {/each}
</div>
```

## Props

| Name | Type | Default | Description |
|---|---|---|---|
| `tabs*` | `TabItem[]` | - | Array of tabs; each needs a unique `value`, a `label`, and a `panel`; `disabled` prevents selection |
| `current` | `string` | - | Bindable selected tab `value`; defaults to the first enabled tab |
| `manual` | `boolean` | `false` | Manual activation: arrows move focus only, Enter/Space selects |
| `orientation` | `<enum>` | `"horizontal"` | Tablist orientation for keyboard nav and `aria-orientation` |
| `styling` | `SVSClass` | - | Styling override |
| `variant` | `SVSVariant` | `NEUTRAL` | Variant |
`*` required. Other `<div>` attributes are passed to the `role="tablist"` element via rest props; `class` is merged onto the tablist.

Name the tablist with `aria-label` / `aria-labelledby` through the rest props.

## Styling

To learn more, see [Styling](/docs/styling).

### Variant Management

The selected tab (`button`) gets `active`; a disabled tab gets `inactive`; all remaining tabs follow `variant`.

### Default Class Name

`svs-tabs`

## Accessibility

### Keyboard Interactions

| Key | Description |
| --- | --- |
| `ArrowRight` / `ArrowLeft` | With `orientation="horizontal"` (default), moves focus to the next or previous selectable tab, wrapping at the ends |
| `ArrowDown` / `ArrowUp` | With `orientation="vertical"`, moves focus to the next or previous selectable tab, wrapping at the ends |
| `Home` / `End` | Moves focus to the first or last selectable tab |
| `Enter` / `Space` | With `manual` set, selects the focused tab |
Disabled tabs are skipped. By default, activation follows focus; with `manual` set, arrow keys only move focus and `Enter` or `Space` selects the focused tab.

### ARIA Roles and Attributes

The component applies these automatically:

- Tab list (`top`): `role="tablist"` and `aria-orientation`.
- Tab button (`label`): `role="tab"`, `aria-selected`, `aria-controls` pointing to its panel, `aria-disabled` when disabled, and roving `tabindex`.
- Panel (`main`): `role="tabpanel"`, `aria-labelledby` pointing to its tab, and `hidden` when inactive.

Each tab's accessible name comes from its `label` content. Name the tablist with `aria-label` or `aria-labelledby` through rest props when the tab group needs a separate name.

## Exports

### Types

```ts
type TabComponent = { component: Component<any>; props?: Record<string, unknown> };
type TabItem = {
  value: string; // REQUIRED, unique within `tabs`
  label: string | Snippet | TabComponent;
  panel: Snippet | TabComponent;
  disabled?: boolean; // (false)
};
interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "aria-orientation" | "onfocusin"> {
  tabs: TabItem[];
  current?: string; // bindable (first enabled tab value)
  manual?: boolean; // (false) manual activation: Arrow keys move focus only; Enter/Space selects
  orientation?: "horizontal" | "vertical"; // ("horizontal")
  styling?: SVSClass;
  variant?: SVSVariant; // (VARIANT.NEUTRAL)
  // other div attributes are passed to the role="tablist" element via ...rest; `class` is merged onto the tablist
  // aria-label / aria-labelledby name the tablist
}
type TabsReqdProps = "tabs";
type TabsBindProps = "current";
```

### Others

```ts
// Wraps a component and optional props as a TabComponent for use as a `label` or `panel`.
function toPanel(component: Component<any>, props?: Record<string, unknown>): TabComponent;
```

## Examples

The example code uses Tailwind CSS along with `SVSClass`.

### Basic

**Code**

```svelte src=TabsBasic.svelte
<script lang="ts">
  import { Tabs } from "svseeds";

  const tabs = [
    { value: "1", label: "Tab 1", panel: panel1 },
    { value: "2", label: "Tab 2", panel: panel2 },
    { value: "3", label: "Tab 3", panel: panel3 },
  ];
  const styling = {
    whole: "w-80",
    top: "flex border-b-2 border-gray-400",
    label: {
      base: "-mb-[2px] px-2 py-1 border-b-2 font-medium cursor-pointer",
      neutral: "border-transparent",
      active: "border-teal-500",
    },
    main: "p-2",
  };
  const myProps = {
    tabs,
    orientation: "horizontal" as const,
    styling,
  };
</script>

{#snippet panel1()}
  Diam facilisi consequat sadipscing in. Illum eleifend sit sit lorem takimata diam ut vel amet elitr duo.
{/snippet}
{#snippet panel2()}
  Justo sea et. Sea est accusam sanctus feugait sed dolore lorem consectetuer est.
{/snippet}
{#snippet panel3()}
  No dolore aliquip et aliquip sed lorem et qui nihil dolor sit lorem no sit. Esse sed ipsum et diam takimata.
{/snippet}

<Tabs {...myProps} />
```
### With Interactive Variant

**Code**

```svelte src=TabsPract.svelte
<script lang="ts">
  import { Tabs } from "svseeds";
  import CircleUserRound from "@lucide/svelte/icons/circle-user-round";
  import Folder from "@lucide/svelte/icons/folder";
  import Settings from "@lucide/svelte/icons/settings";

  let { variant = $bindable() } = $props();
  const variantStyle1 = {
    neutral: "border-gray-400",
    active: "border-teal-500",
    inactive: "border-red-500",
    blue: "border-blue-500",
    yellow: "border-yellow-500",
    sky: "border-sky-500",
  };
  const variantStyle2 = {
    neutral: "bg-transparent",
    active: "bg-white dark:bg-black",
  };
  const styling = {
    whole: {
      base: "flex p-4 w-110 rounded-md border",
      ...variantStyle1,
    },
    top: "flex flex-col justify-center items-center p-1 rounded-md bg-gray-500",
    label: {
      base: "flex justify-center items-center gap-1 p-1 w-26 rounded-sm font-medium cursor-pointer",
      ...variantStyle2,
    },
    main: "p-2",
  };
  const myProps = {
    tabs: [
      { value: "1", label: label1, panel: panel1 },
      { value: "2", label: label2, panel: panel2 },
      { value: "3", label: label3, panel: panel3 },
    ],
    orientation: "vertical" as const,
    styling,
  };
</script>

<Tabs {variant} {...myProps} />

{#snippet label1()}
  <CircleUserRound class="size-5" />
  Members
{/snippet}
{#snippet label2()}
  <Folder class="size-5" />
  Projects
{/snippet}
{#snippet label3()}
  <Settings class="size-5" />
  Settings
{/snippet}
{#snippet panel1()}
  Diam facilisi consequat sadipscing in. Illum eleifend sit sit lorem takimata diam ut vel amet elitr duo.
{/snippet}
{#snippet panel2()}
  Justo sea et. Sea est accusam sanctus feugait sed dolore lorem consectetuer est.
{/snippet}
{#snippet panel3()}
  No dolore aliquip et aliquip sed lorem et qui nihil dolor sit lorem no sit. Esse sed ipsum et diam takimata.
{/snippet}
```