# swc-tab

An individual tab placed inside a `swc-tabs` container. The `<label>` wrapper from 1st-gen shadow DOM has been removed.

```js
import '@adobe/spectrum-wc/components/tabs/index.js';
// <swc-tab></swc-tab>
```

## Attributes

| Name       | Type      | Default | Description                                                                                                                                                                       |
| ---------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `disabled` | `boolean` | `false` | Whether this tab is disabled. Disabled tabs are announced as unavailable by assistive technology and cannot be activated, but remain focusable via arrow keys within the tablist. |
| `selected` | `boolean` | `false` | Whether this tab is currently selected. Managed by the parent `swc-tabs` container — consumers should not set this directly. Use `swc-tabs[selected]` instead.                    |
| `vertical` | `boolean` | `false` | Whether the tab is displayed in vertical orientation.                                                                                                                             |
| `tab-id`   | `string`  | `''`    | Unique identifier for this tab. Used by the parent `swc-tabs` to match this tab to its corresponding `swc-tab-panel`.                                                             |

## Slots

| Name        | Description                              |
| ----------- | ---------------------------------------- |
| `(default)` | Text label of the tab                    |
| `icon`      | Optional icon displayed before the label |

## CSS Custom Properties

| Name                          | Description                     |
| ----------------------------- | ------------------------------- |
| `--swc-tab-height`            | Block size of the tab.          |
| `--swc-tab-padding-block`     | Block padding of the tab.       |
| `--swc-tab-padding-block-end` | Block-end padding of the tab.   |
| `--swc-tab-text-color`        | Color of the tab label text.    |
| `--swc-tab-text-color`        | Text color of the tab label.    |
| `--swc-tab-height`            | Block size of the tab.          |
| `--swc-tab-padding-block`     | Block-start padding of the tab. |
| `--swc-tab-padding-block-end` | Block-end padding of the tab.   |