# swc-tabs

A tabbed interface for organizing content into separate views where only one view is visible at a time.

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

## Attributes

| Name                  | Type                 | Default        | Description                                                                                                                                       |
| --------------------- | -------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| `keyboard-activation` | `KeyboardActivation` | -              | Whether selection follows keyboard focus (`automatic`, default) or the user must press Enter or Space to activate (`manual`).                     |
| `density`             | `TabDensity`         | -              | Layout density: `regular` (default) or `compact` (reduced tab spacing).                                                                           |
| `direction`           | `TabsDirection`      | `'horizontal'` | The layout direction of the tab list: `horizontal` (default) or `vertical`.                                                                       |
| `disabled`            | `boolean`            | `false`        | Whether the entire tab list is disabled. When `true`, `aria-disabled="true"` is applied to the tablist element and all interaction is suppressed. |
| `accessible-label`    | `string`             | `''`           | Accessible label for the tablist. Rendered as `aria-label` on the element with `role="tablist"` in the concrete template.                         |
| `selected`            | `string`             | `''`           | The `tab-id` of the currently selected tab. Setting this property updates which tab appears selected and which panel is visible.                  |

## Slots

| Name        | Description                                  |
| ----------- | -------------------------------------------- |
| `(default)` | Tab items (`swc-tab` elements)               |
| `tab-panel` | Tab panel content (`swc-tab-panel` elements) |

## Events

| Name     | Description                                                                                  |
| -------- | -------------------------------------------------------------------------------------------- |
| `change` | The selected tab has changed. Cancelable — calling `preventDefault()` reverts the selection. |

## CSS Custom Properties

| Name                         | Description                          |
| ---------------------------- | ------------------------------------ |
| `--swc-tabs-indicator-color` | Color of the selected tab indicator. |
| `--swc-tabs-indicator-color` | Color of the selection indicator.    |