# Accordion

## Overview

_[Design to fill]_

- **When to use**: _[Design to fill]_
- **When not to use**: _[Design to fill]_

## Anatomy

_[Design to fill]_

## Variants

| Prop       | Effect                                                                    |
| ---------- | ------------------------------------------------------------------------- |
| `multiple` | Set to let several items stay open at once. Omit for a single-open group. |

## Props / API

Accordion is a compound component: `Accordion` composes `Accordion.Item`, `Accordion.Header`, `Accordion.Content`, and `Accordion.Chevron`.

### `Accordion`

| Prop       | Type      | Default | Description                                                                                         |
| ---------- | --------- | ------- | --------------------------------------------------------------------------------------------------- |
| `multiple` | `boolean` | `false` | When `false`, opening one item collapses any other open one. When `true`, items open independently. |

Extends `React.HTMLAttributes<HTMLDivElement>`. Renders a `<div>` and forwards all standard attributes via `...rest`.

### `Accordion.Item`

| Prop          | Type      | Default | Description                                                  |
| ------------- | --------- | ------- | ------------------------------------------------------------ |
| `defaultOpen` | `boolean` | -       | Renders the item open by default.                            |
| `disabled`    | `boolean` | `false` | Locks the item so it cannot be toggled by mouse or keyboard. |

Extends `Omit<React.DetailsHTMLAttributes<HTMLDetailsElement>, "name">`. Renders a native `<details>` element.

### `Accordion.Header`

Extends `React.HTMLAttributes<HTMLElement>`. Renders a native `<summary>`. Reads the parent item's `disabled` state: when disabled, clicks are prevented and the element is removed from the tab order. A custom `onClick` is forwarded only when the item is enabled.

### `Accordion.Content`

Extends `React.HTMLAttributes<HTMLDivElement>`. Renders a `<div>` wrapper for the collapsible body and forwards all standard attributes via `...rest`.

### `Accordion.Chevron`

Extends `React.HTMLAttributes<HTMLSpanElement>`. Renders a `<span>` containing a `chevron-down` as the open/closed indicator. Forwards all standard attributes via `...rest`.

## States

- Collapsed
- Expanded
- Focus-visible on the header
- Disabled

## Code examples

```tsx
import { Accordion, Icon } from "@mylighthouse/prism-react";

export default function AccordionExample(): React.ReactElement {
  return (
    <Accordion>
      <Accordion.Item defaultOpen>
        <Accordion.Header>
          <div className="flex gap-200 items-center">
            <Icon name="bookmark-outline" size="small" />
            <span className="text-300--medium">First section</span>
          </div>
          <Accordion.Chevron />
        </Accordion.Header>
        <Accordion.Content>
          Opening another section will collapse this one.
        </Accordion.Content>
      </Accordion.Item>

      <Accordion.Item>
        <Accordion.Header>
          <div className="flex gap-200 items-center">
            <Icon name="bookmark-outline" size="small" />
            <span className="text-300--medium">Second section</span>
          </div>
          <Accordion.Chevron />
        </Accordion.Header>
        <Accordion.Content>Second section content.</Accordion.Content>
      </Accordion.Item>
    </Accordion>
  );
}
```

## A11y intent

_[Design to fill]_

- Built on the native `<details>`/`<summary>` pattern, so expand/collapse, keyboard operation (Enter/Space on the header), and open/closed state are handled by the browser.