# `src/components/tabs/Tabs.ts`:

## class: `Tabs`, `btu-tabs`

### Superclass

| Name         | Module | Package |
| ------------ | ------ | ------- |
| `LitElement` |        | lit     |

### Mixins

| Name                  | Module                           | Package |
| --------------------- | -------------------------------- | ------- |
| `RovingTabindexMixin` | /src/util/RovingTabindexMixin.js |         |
| `EventEmitterMixin`   | /src/util/EventEmitterMixin.js   |         |
| `ReadyMixin`          | /src/util/ReadyMixin.js          |         |

### Static Fields

| Name      | Privacy | Type | Default | Description | Inherited From |
| --------- | ------- | ---- | ------- | ----------- | -------------- |
| `tagName` |         |      |         |             |                |

### Fields

| Name             | Privacy | Type                           | Default  | Description                                                                                                                                                                          | Inherited From |
| ---------------- | ------- | ------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- |
| `size`           |         | `'xs' \| 'sm' \| 'md' \| 'lg'` | `'md'`   | Size variant applied to all child tabs.                                                                                                                                              |                |
| `activeTab`      |         | `string \| undefined`          |          | The \`name\` value of the currently active tab.                                                                                                                                      |                |
| `variant`        |         | `'full' \| 'menu'`             | `'full'` | Layout variant.&#xA;- 'full': tabs scroll horizontally when they overflow (default)&#xA;- 'menu': all tabs are hidden; the active tab label and a chevron dropdown are shown instead |                |
| `menuWrapper`    | private | `HTMLElement \| null`          | `null`   |                                                                                                                                                                                      |                |
| `menuDropdown`   | private | `Dropdown \| null`             | `null`   |                                                                                                                                                                                      |                |
| `menuLabel`      | private | `HTMLSpanElement \| null`      | `null`   |                                                                                                                                                                                      |                |
| `menuIcon`       | private | `HTMLElement \| null`          | `null`   |                                                                                                                                                                                      |                |
| `menuErrorBadge` | private | `HTMLElement \| null`          | `null`   |                                                                                                                                                                                      |                |
| `_dropdownSize`  | private | `'sm' \| 'md' \| 'lg'`         |          |                                                                                                                                                                                      |                |
| `_menuIconSize`  | private | `'sm' \| 'md'`                 |          |                                                                                                                                                                                      |                |

### Methods

| Name   | Privacy | Description                                                                                                                                                                                                                                                                        | Parameters                                              | Return    | Inherited From    |
| ------ | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | --------- | ----------------- |
| `emit` |         | Dispatches a type-safe CustomEvent with standardized configuration.&#xA;&#xA;All events are configured with:&#xA;- bubbles: true (event propagates up the DOM tree)&#xA;- cancelable: false (event cannot be cancelled)&#xA;- composed: true (event crosses shadow DOM boundaries) | `type: K, detail: UnpackCustomEvent<CustomEventMap[K]>` | `boolean` | EventEmitterMixin |

### Events

| Name             | Type                          | Description                                                           | Inherited From |
| ---------------- | ----------------------------- | --------------------------------------------------------------------- | -------------- |
| `btu-tabs-ready` | `CustomEvent`                 | Fired after first render and initialization                           |                |
| `btu-tabs-show`  | `CustomEvent<{name: string}>` | Fired when a tab becomes active                                       |                |
| `btu-tabs-hide`  | `CustomEvent<{name: string}>` | Fired when a tab is deactivated                                       |                |
| `btu-tab-change` | `CustomEvent<{name: string}>` | Fired when a tab is selected (bubbles from btu-tab)                   |                |
| `btu-tab-ready`  | `CustomEvent`                 | Fired when a child tab finishes initialization (bubbles from btu-tab) |                |

### Attributes

| Name         | Field     | Inherited From |
| ------------ | --------- | -------------- |
| `size`       | size      |                |
| `active-tab` | activeTab |                |
| `variant`    | variant   |                |

### CSS Properties

| Name                            | Default | Description                                                                                             |
| ------------------------------- | ------- | ------------------------------------------------------------------------------------------------------- |
| `--tabs-active-color`           |         | Text and icon color of the active tab (default: gray-700)                                               |
| `--tabs-active-indicator-color` |         | Color of the active tab underline indicator (default: primary-500 → primary-700 → primary-900 gradient) |
| `--tabs-border-color`           |         | Color of the bottom border divider (default: gray-200)                                                  |
| `--tabs-color`                  |         | Text and icon color for all tabs (default: gray-500; active/hover tabs use gray-700)                    |
| `--tabs-background`             |         | Background color for all tab buttons (default: transparent)                                             |
| `--tabs-container-background`   |         | Background color of the tabs container (default: theme white)                                           |
| `--tabs-hover-background`       |         | Background color of a tab on hover (default: gray-100)                                                  |
| `--tabs-hover-color`            |         | Text and icon color of a tab on hover (default: gray-700)                                               |
| `--tabs-gap`                    |         | Spacing between tabs (default: 1rem)                                                                    |

<hr/>

## Exports

| Kind                        | Name       | Declaration | Module                      | Package |
| --------------------------- | ---------- | ----------- | --------------------------- | ------- |
| `js`                        | `default`  | Tabs        | src/components/tabs/Tabs.ts |         |
| `custom-element-definition` | `btu-tabs` | Tabs        | src/components/tabs/Tabs.ts |         |
