# Tabs

A set of layered sections of content, known as tab panels, that are displayed one at a time.

Use Tabs for compact settings surfaces, dashboards, account forms, and any view where related panels should share the same page location.

## Import

```ts
import {
  TabsComponent,
  TabsContentComponent,
  TabsListComponent,
  TabsTriggerComponent,
} from '@edsis/component/tabs';
```

## Composition

The Angular structure mirrors shadcn and Radix while using Angular selectors and native button triggers.

```text
Tabs
├── TabsList
│   ├── button[TabsTrigger]
│   └── button[TabsTrigger]
├── TabsContent
└── TabsContent
```

## Basic usage

Pair every trigger value with a matching panel value. Bind `[(value)]` when the parent should seed the active tab or observe changes.

```ts
const activeTab = signal<string | null>('account');
```

```html
<Tabs [(value)]="activeTab" class="w-full max-w-md">
  <TabsList>
    <button TabsTrigger value="account">Account</button>
    <button TabsTrigger value="password">Password</button>
  </TabsList>

  <TabsContent value="account">Make changes to your account here.</TabsContent>
  <TabsContent value="password">Change your password here.</TabsContent>
</Tabs>
```

## Common patterns

### Line variant

Use `variant="line"` on `TabsList` for the underline treatment from the shadcn examples.

```ts
const lineTab = signal<string | null>('overview');
```

```html
<Tabs [(value)]="lineTab">
  <TabsList variant="line">
    <button TabsTrigger value="overview">Overview</button>
    <button TabsTrigger value="analytics">Analytics</button>
    <button TabsTrigger value="reports">Reports</button>
  </TabsList>

  <TabsContent value="overview">Overview metrics are selected.</TabsContent>
  <TabsContent value="analytics">Analytics metrics are selected.</TabsContent>
  <TabsContent value="reports">Reports metrics are selected.</TabsContent>
</Tabs>
```

### Vertical orientation

Set `orientation="vertical"` on `Tabs` when triggers should stack beside the active panel.

```ts
const verticalTab = signal<string | null>('account');
```

```html
<Tabs [(value)]="verticalTab" orientation="vertical" class="w-full max-w-2xl">
  <TabsList class="min-w-40">
    <button TabsTrigger value="account">Account</button>
    <button TabsTrigger value="password">Password</button>
    <button TabsTrigger value="notifications">Notifications</button>
  </TabsList>

  <TabsContent value="account" class="mt-0 flex-1 rounded-lg border border-border p-4">
    Account preferences and details live in this panel.
  </TabsContent>
</Tabs>
```

### Disabled triggers

Disable a trigger with `[disabled]="true"`. Disabled triggers remain visible, expose disabled state, and are skipped by arrow-key navigation.

```ts
const disabledTab = signal<string | null>('home');
```

```html
<Tabs [(value)]="disabledTab">
  <TabsList>
    <button TabsTrigger value="home">Home</button>
    <button TabsTrigger value="settings" [disabled]="true">Disabled</button>
  </TabsList>

  <TabsContent value="home">Home content stays reachable.</TabsContent>
  <TabsContent value="settings">Settings is intentionally unavailable.</TabsContent>
</Tabs>
```

### Icons

Project icon components or inline SVG before trigger text. The trigger includes icon and label spacing.

```html
<Tabs value="preview">
  <TabsList>
    <button TabsTrigger value="preview">
      <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24">...</svg>
      Preview
    </button>
    <button TabsTrigger value="code">
      <svg aria-hidden="true" class="size-4" viewBox="0 0 24 24">...</svg>
      Code
    </button>
  </TabsList>

  <TabsContent value="preview">Rendered preview is selected.</TabsContent>
  <TabsContent value="code">Code sample is selected.</TabsContent>
</Tabs>
```

### RTL

Set `dir="rtl"` on the tabs root or an ancestor container when the surrounding interface runs right to left.

```html
<Tabs value="overview" dir="rtl" lang="ar" class="w-full max-w-md text-right">
  <TabsList>
    <button TabsTrigger value="overview">نظرة عامة</button>
    <button TabsTrigger value="analytics">التحليلات</button>
    <button TabsTrigger value="reports">التقارير</button>
    <button TabsTrigger value="settings">الإعدادات</button>
  </TabsList>

  <TabsContent value="overview">لديك ١٢ مشروعًا نشطًا و٣ مهام معلقة.</TabsContent>
</Tabs>
```

## API reference

### `TabsComponent`

| Input           | Type                         | Default        |
| --------------- | ---------------------------- | -------------- |
| `value` (model) | `string \| null`             | `null`         |
| `orientation`   | `'horizontal' \| 'vertical'` | `'horizontal'` |
| `class`         | `string`                     | `''`           |

### `TabsListComponent`

| Input     | Type                  | Default     |
| --------- | --------------------- | ----------- |
| `variant` | `'default' \| 'line'` | `'default'` |
| `class`   | `string`              | `''`        |

### `TabsTriggerComponent`

| Input      | Type      | Default |
| ---------- | --------- | ------- |
| `value`    | `string`  | —       |
| `disabled` | `boolean` | `false` |
| `class`    | `string`  | `''`    |

### `TabsContentComponent`

| Input   | Type     | Default |
| ------- | -------- | ------- |
| `value` | `string` | —       |
| `class` | `string` | `''`    |

## Styling and theming

The default list uses `bg-muted` and active triggers use `bg-background`, `text-foreground`, and `shadow-sm` to match the shadcn look.

The line variant uses `border-border` on the list and an active `border-foreground` underline on the trigger. Pass `class` to the root, list, trigger, or content to tune width, grid layouts, spacing, and panel framing.

## Accessibility

- `TabsList` renders `role="tablist"` and `aria-orientation`.
- `button[TabsTrigger]` renders `role="tab"`, `aria-selected`, roving `tabindex`, `aria-controls`, and `aria-disabled` when disabled.
- `TabsContent` renders `role="tabpanel"`, `aria-labelledby`, `tabindex="0"`, and `hidden` when inactive.
- Keep trigger labels concise and unique. Icons inside triggers should be decorative or have their own accessible text outside the icon.

## Keyboard interactions

- `ArrowRight` and `ArrowLeft` move selection and focus through horizontal tabs.
- `ArrowDown` and `ArrowUp` move selection and focus through vertical tabs.
- `Home` and `End` jump to the first and last enabled trigger.
- Disabled triggers are skipped by arrow-key, Home, and End navigation.
- Enter and Space retain native button activation behavior.

## Angular notes

- The component uses Angular signal-based `model()` binding for `value`.
- Use `signal<string | null>()` with `[(value)]` as the Angular equivalent of shadcn `defaultValue` when parent state matters.
- Values are strings and should be unique within a tabs root.
- `variant="line"` belongs to `TabsList`, matching the upstream shadcn API.
- Icons are projected content; bring an app icon component or inline SVG where needed.

## Source parity

This Angular implementation follows the current shadcn Tabs docs: preview card tabs, usage, composition, line, vertical, disabled, icons, RTL, and Radix API guidance. React props are translated to Angular selectors, native buttons, and signal-friendly state.