npm package: @litforge/tabs
Description: A tabs component for organizing content into multiple panels with different variants and orientations.
Latest version: 0.1.22

# @litforge/tabs

A tabs component for organizing content into multiple panels with different variants and orientations.

## Installation

```bash
npm install @litforge/tabs
# or
pnpm add @litforge/tabs
# or
yarn add @litforge/tabs
```

## Usage

```typescript
import '@litforge/tabs';
```

```html
<lf-tabs
  active-tab="preview"
  variant="default"
  orientation="horizontal"
  @tab-change="${handleTabChange}"
>
  <lf-tab-item id="preview" label="Preview">
    Preview content here
  </lf-tab-item>
  <lf-tab-item id="metadata" label="Metadata">
    Metadata content here
  </lf-tab-item>
</lf-tabs>
```

## Props

### `lf-tabs`

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `activeTab` | `string` | `''` | ID of the currently active tab |
| `variant` | `'default' \| 'pills' \| 'underline'` | `'default'` | Visual variant |
| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout orientation |

### `lf-tab-item`

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `id` | `string` | `''` | Unique identifier for the tab |
| `label` | `string` | `''` | Display label for the tab button |
| `active` | `boolean` | `false` | Whether the tab is active (managed by parent) |

## Events

### `tab-change`

Fired when a tab is clicked.

```typescript
interface TabChangeDetail {
  tabId: string;
}
```

## Variants

- **default**: Standard tabs with bottom border indicator
- **pills**: Rounded pill-style tabs with filled background
- **underline**: Minimal tabs with underline indicator

## Examples

### Basic Usage

```html
<lf-tabs active-tab="tab1">
  <lf-tab-item id="tab1" label="Tab 1">
    Content 1
  </lf-tab-item>
  <lf-tab-item id="tab2" label="Tab 2">
    Content 2
  </lf-tab-item>
</lf-tabs>
```

### Pills Variant

```html
<lf-tabs active-tab="tab1" variant="pills">
  <lf-tab-item id="tab1" label="Tab 1">Content 1</lf-tab-item>
  <lf-tab-item id="tab2" label="Tab 2">Content 2</lf-tab-item>
</lf-tabs>
```

### Vertical Orientation

```html
<lf-tabs active-tab="tab1" orientation="vertical">
  <lf-tab-item id="tab1" label="Tab 1">Content 1</lf-tab-item>
  <lf-tab-item id="tab2" label="Tab 2">Content 2</lf-tab-item>
</lf-tabs>
```

### With Event Handler

```html
<lf-tabs
  active-tab="${activeTab}"
  @tab-change="${(e) => {
    activeTab = e.detail.tabId;
  }}"
>
  <lf-tab-item id="preview" label="Preview">Preview content</lf-tab-item>
  <lf-tab-item id="metadata" label="Metadata">Metadata content</lf-tab-item>
</lf-tabs>
```

## CSS Variables

The component uses CSS variables for theming:

- `--lf-tabs-font-family`
- `--lf-tabs-gap`
- `--lf-tabs-border`
- `--lf-tab-padding-y`
- `--lf-tab-padding-x`
- `--lf-tab-color`
- `--lf-tab-active-color`
- `--lf-tab-active-border`
- `--lf-tab-hover-bg`
- `--lf-tab-content-padding`

## Framework Integration

### Vue 3 / Nuxt

```vue
<script setup>
import '@litforge/tabs';
import { ref } from 'vue';

const activeTab = ref('preview');

const handleTabChange = (e) => {
  activeTab.value = e.detail.tabId;
};
</script>

<template>
  <lf-tabs :active-tab="activeTab" @tab-change="handleTabChange">
    <lf-tab-item id="preview" label="Preview">
      Preview content
    </lf-tab-item>
    <lf-tab-item id="metadata" label="Metadata">
      Metadata content
    </lf-tab-item>
  </lf-tabs>
</template>
```

Register in `nuxt.config.ts`:

```typescript
vue: {
  compilerOptions: {
    isCustomElement: (tag) => ['lf-tabs', 'lf-tab-item'].includes(tag)
  }
}
```