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

## class: `Tab`, `btu-tab`

### Superclass

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

### Mixins

| Name                | Module                         | Package |
| ------------------- | ------------------------------ | ------- |
| `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 |
| -------------- | ------- | ------------------------- | ----------- | ----------------------------------------------------------------------------------------------------- | -------------- |
| `name`         |         | `string \| undefined`     |             | Value that identifies this tab and links it to panel elements that share the same \`name\` attribute. |                |
| `label`        |         | `string \| undefined`     |             | Text displayed in the tab.                                                                            |                |
| `description`  |         | `string \| undefined`     |             | Accessibility description for screen readers.                                                         |                |
| `disabled`     |         | `boolean`                 | `false`     | Whether the tab is disabled and non-interactive.                                                      |                |
| `symbol`       |         | `string \| undefined`     |             | Lucide icon symbol to display.                                                                        |                |
| `iconPosition` |         | `'leading' \| 'trailing'` | `'leading'` | Placement of the icon relative to the label.                                                          |                |
| `iconOnly`     |         | `boolean`                 | `false`     | When true, hides the label visually while maintaining accessibility.                                  |                |
| `error`        |         | `boolean`                 | `false`     | When true, displays an error badge on the tab.                                                        |                |
| `badge`        |         | `string \| undefined`     |             | Displays a badge with the given value alongside the label.                                            |                |

### 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-tab-ready`  | `CustomEvent`                 | Fired after first render                             |                |
| `btu-tab-change` | `CustomEvent<{name: string}>` | Fired when a non-disabled tab with a name is clicked |                |

### Attributes

| Name            | Field        | Inherited From |
| --------------- | ------------ | -------------- |
| `name`          | name         |                |
| `label`         | label        |                |
| `description`   | description  |                |
| `disabled`      | disabled     |                |
| `symbol`        | symbol       |                |
| `icon-position` | iconPosition |                |
| `icon-only`     | iconOnly     |                |
| `error`         | error        |                |
| `badge`         | badge        |                |

### CSS Properties

| Name                       | Default | Description                                                      |
| -------------------------- | ------- | ---------------------------------------------------------------- |
| `--badge-color-background` |         | Background color of the count indicator badge (default: gray-50) |
| `--badge-color-foreground` |         | Text color of the count indicator badge (default: gray-700)      |

<hr/>

## Exports

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