# Tabs

Underline-style tabs. This is `tabs.css` in `@layer components`.

```html
<div class="tabs">
  <div class="tab-list">
    <button class="tab is-active">General</button>
    <button class="tab">Billing</button>
  </div>

  <div class="tab-panel">General settings…</div>
</div>
```

## Parts

| Class | Role |
|---|---|
| `.tabs` | The container (a vertical flex column) |
| `.tab-list` | The row of tabs with a bottom rule |
| `.tab` | A single tab: quiet by default, an accent underline when active |
| `.tab.is-active` | The current tab: `--ink` text and an accent bottom border |
| `.tab-panel` | The content region below the list |

A `.tab` is typically a `<button>`, but the styling works on any element you
give the class.

## You supply the toggle

Tabs are CSS-only. The styling gives you the look and the `is-active` state
hook; it does **not** switch panels. Your app's JavaScript moves `is-active`
between tabs and shows the matching panel. There is no tab behavior in this
package. Switching is your code (or use the `@elements/ui` interactive tabs when
that package ships).