# <aihio-tabs>

Switches between sibling panels of content with a row of tabs, such as the sections of a settings page. Arrow keys move between tabs.

Intents: `tabs`, `navigation`, `layout`.

## Attributes

- `value` (string): The currently active tab value.

## <aihio-tab-list>

Container for tab triggers.

## <aihio-tab>

Individual tab trigger.

### <aihio-tab> attributes

- `value` (string): Stable value that matches a corresponding aihio-tab-panel.
- `disabled` (boolean): Disables the tab and removes it from keyboard navigation. Default: `false`.

### Events

- `aihio-tab-select` (detail: value: string): Fired when the tab is activated; aihio-tabs listens for this to drive selection.

## <aihio-tab-panel>

Content panel for a tab.

### <aihio-tab-panel> attributes

- `value` (string): Stable value that matches a corresponding aihio-tab.

## Accessibility obligations

- (error, tabs-value-pairs) When every aihio-tab and aihio-tab-panel: Match each tab's value to exactly one panel's value. Mismatched values leave panels orphaned.

## Examples

### Two panels

```html
<aihio-tabs value="one">
  <aihio-tab-list>
    <aihio-tab value="one">Tab 1</aihio-tab>
    <aihio-tab value="two">Tab 2</aihio-tab>
  </aihio-tab-list>
  <aihio-tab-panel value="one">Content 1</aihio-tab-panel>
  <aihio-tab-panel value="two">Content 2</aihio-tab-panel>
</aihio-tabs>
```

## Mistakes

### aihio-tab must sit inside an aihio-tab-list; keyboard navigation is bound to the list.

Don't (aihio lint: missing-required-child):

```html
<aihio-tabs>
  <aihio-tab value="a">A</aihio-tab>
  <aihio-tab-panel value="a">Content</aihio-tab-panel>
</aihio-tabs>
```

Do:

```html
<aihio-tabs value="a">
  <aihio-tab-list>
    <aihio-tab value="a">A</aihio-tab>
  </aihio-tab-list>
  <aihio-tab-panel value="a">Content</aihio-tab-panel>
</aihio-tabs>
```

### Panel value does not match any tab value; the panel will never activate.

Don't (aihio lint: tabs-value-pairs):

```html
<aihio-tabs value="a">
  <aihio-tab-list>
    <aihio-tab value="a">A</aihio-tab>
  </aihio-tab-list>
  <aihio-tab-panel value="b">Content</aihio-tab-panel>
</aihio-tabs>
```

Do:

```html
<aihio-tabs value="a">
  <aihio-tab-list>
    <aihio-tab value="a">A</aihio-tab>
  </aihio-tab-list>
  <aihio-tab-panel value="a">Content</aihio-tab-panel>
</aihio-tabs>
```