# Tabs (w-tabs)

## Description

Tabs are used to organize content by grouping similar information on the same page.

[Warp component reference](https://warp-ds.github.io/docs/components/tabs/frameworks/elements)

## Usage

The tabs component consists of three custom elements that work together:

- `<w-tabs>` - The container that manages tab state and keyboard navigation
- `<w-tab>` - Individual tab buttons
- `<w-tab-panel>` - Content panels associated with each tab

Each `<w-tab>` has a `for` attribute that matches the `id` of its corresponding `<w-tab-panel>`.

## Accessibility

The tabs component follows the WAI-ARIA Tabs pattern:

- The tab list gets `role="tablist"`
- Each tab button gets `role="tab"` with `aria-selected` reflecting its active state
- Each tab button gets `aria-controls` pointing to its associated panel
- Each panel gets `role="tabpanel"` with `aria-labelledby` pointing to its associated tab
- Keyboard navigation is supported:
  - `ArrowLeft`/`ArrowRight`: Navigate between tabs
  - `Home`: Move to first tab
  - `End`: Move to last tab

## Examples

<elements-example>

```html
<w-tabs>
  <w-tab for="roald-amundsen">Tab 1</w-tab>
  <w-tab for="fridtjof-nansen">Tab 2</w-tab>
  <w-tab for="tor-heyerdahl">Tab 3</w-tab>
  <w-tab-panel id="roald-amundsen">Tab one selected!</w-tab-panel>
  <w-tab-panel id="fridtjof-nansen">Tab two selected!</w-tab-panel>
  <w-tab-panel id="tor-heyerdahl">Tab three selected!</w-tab-panel>
</w-tabs>

<script type="module">
  const tabs = document.querySelector('w-tabs');

  tabs.addEventListener('change', (event) => {
    // event.detail = { panelId: string }
    console.log('Active panel:', event.detail.panelId);
  });
</script>
```

</elements-example>

### Tabs with icons

Icons can be added to tabs using the `icon` slot. By default, icons appear beside the label.

<elements-example>

```html
<w-tabs active="fridtjof-nansen">
  <w-tab for="roald-amundsen">
    <w-icon name="Info" slot="icon"></w-icon>
    Tab 1
  </w-tab>
  <w-tab for="fridtjof-nansen">
    <w-icon name="Success" slot="icon"></w-icon>
    Tab 2
  </w-tab>
  <w-tab-panel id="roald-amundsen">Content one</w-tab-panel>
  <w-tab-panel id="fridtjof-nansen">Content two</w-tab-panel>
</w-tabs>
```

</elements-example>

Use the `over` attribute to position icons above the label:

<elements-example>

```html
<w-tabs>
  <w-tab for="roald-amundsen" over>
    <w-icon name="Info" slot="icon"></w-icon>
    Tab 1
  </w-tab>
  <w-tab for="fridtjof-nansen" over>
    <w-icon name="Success" slot="icon"></w-icon>
    Tab 2
  </w-tab>
  <w-tab-panel id="roald-amundsen">Content one</w-tab-panel>
  <w-tab-panel id="fridtjof-nansen">Content two</w-tab-panel>
</w-tabs>
```

</elements-example>

## Styling API

## `<w-tabs>` API

Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

### Properties

| Name | Type | Default | Summary |
|-|-|-|-|
| active | `string \| undefined` | `"" (Shows the first tab)` | The `id` of the panel that should be active. |

### Property Details

#### active

The `id` of the panel that should be active.

- Type: `string | undefined`
- Default: `"" (Shows the first tab)`

### Events

#### change

Includes `details.panelId` with the now active tab panel's ID

- Type: [`WarpTabsChangeEvent`](#warptabschangeevent)


### Types

#### WarpTabsChangeEvent

`{ detail: { panelId: string }, initCustomEvent: {  }, bubbles: false | true, cancelBubble: false | true, cancelable: false | true, composed: false | true, currentTarget: null | { addEventListener: {  }, dispatchEvent: {  }, removeEventListener: {  } }, defaultPrevented: false | true, eventPhase: number, isTrusted: false | true, returnValue: false | true, srcElement: null | { addEventListener: {  }, dispatchEvent: {  }, removeEventListener: {  } }, target: null | { addEventListener: {  }, dispatchEvent: {  }, removeEventListener: {  } }, timeStamp: number, type: string, composedPath: {  }, initEvent: {  }, preventDefault: {  }, stopImmediatePropagation: {  }, stopPropagation: {  }, NONE: 0, CAPTURING_PHASE: 1, AT_TARGET: 2, BUBBLING_PHASE: 3 }`