@ryanhelsing/ry-ui/docs/components/tabs.md

Framework-agnostic, Light DOM web components. CSS is the source of truth.

# Tabs

## `<ry-tabs>`

| Attribute (on tab) | Values | Description |
|---------------------|--------|-------------|
| `title` | string | Tab label |
| `active` | boolean | Initially selected |

Events: `ry:change` — `e.detail.index`, `e.detail.title`

```html
<ry-tabs>
  <ry-tab title="Overview" active><p>Overview content.</p></ry-tab>
  <ry-tab title="Settings"><p>Settings content.</p></ry-tab>
</ry-tabs>
```

JS:
```js
const tabs = document.querySelector('ry-tabs');

tabs.addEventListener('ry:change', (e) => {
  console.log(e.detail.index); // 0, 1, 2...
  console.log(e.detail.title); // "Overview"
});

// Switch programmatically
tabs.activeIndex = 1;
```