# swc-accordion-item

An accordion item component that wraps a single expandable content section.

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

## Attributes

| Name       | Type                         | Default | Description                                                                                                                                          |
| ---------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| `open`     | `boolean`                    | -       | Whether the accordion item panel is expanded.                                                                                                        |
| `disabled` | `boolean`                    | `false` | Whether the accordion item is disabled. A disabled item keeps its header in the tab order but blocks toggling.                                       |
| `size`     | `AccordionSize \| undefined` | -       | The size of the item. Inherited from the parent accordion; controls which chevron icon is displayed. Has no effect when the item is used standalone. |

## Slots

| Name        | Description                                                                                                            |
| ----------- | ---------------------------------------------------------------------------------------------------------------------- |
| `label`     | The heading text for this accordion item.                                                                              |
| `actions`   | Optional actions rendered adjacent to the heading, outside the toggle button so they remain independently interactive. |
| `(default)` | The panel content revealed when the item is open.                                                                      |

## Events

| Name                        | Description                                                                                        |
| --------------------------- | -------------------------------------------------------------------------------------------------- |
| `swc-accordion-item-toggle` | Dispatched when the item open state is toggled. Cancelable; `preventDefault()` reverts the change. |
| `swc-open`                  | Dispatched when the item begins opening.                                                           |
| `swc-close`                 | Dispatched when the item begins closing.                                                           |
| `swc-after-open`            | Dispatched after the item has fully opened.                                                        |
| `swc-after-close`           | Dispatched after the item has fully closed.                                                        |
| `undefined`                 |                                                                                                    |

## CSS Custom Properties

| Name                                                 | Description                                                     |
| ---------------------------------------------------- | --------------------------------------------------------------- |
| `--swc-accordion-item-focus-indicator-corner-radius` | Corner radius of the focus ring drawn around the header button. |
| `--swc-accordion-item-header-corner-radius`          | Corner radius of the header button background.                  |
| `--swc-accordion-item-padding-top`                   | Block-start padding of the header button.                       |
| `--swc-accordion-item-padding-bottom`                | Block-end padding of the header button.                         |
| `--swc-accordion-item-disclosure-indicator-gap`      | Gap between the chevron indicator and the header label.         |
| `--swc-accordion-item-edge-to-content-area`          | Inline padding of the header button.                            |
| `--swc-accordion-item-header-font-size`              | Font size of the header label.                                  |
| `--swc-accordion-item-content-padding-inline`        | Inline padding of the content panel.                            |
| `--swc-accordion-item-divider-color`                 | Color of the item's top and bottom divider borders.             |