# `PUI.Accordion`

Accordion primitives for progressively revealing related content.

The components in this module use the native HTML `<details>` and `<summary>`
elements, so they work without extra JavaScript while still matching the
shadcn-inspired styling used throughout PUI.

Use `accordion/1` as the outer wrapper, then compose it with
`accordion_item/1`, `accordion_trigger/1`, and `accordion_content/1`.

Items that share the same `name` attribute behave like a single-open group,
while items without `name` can all stay open at the same time.

## Basic Usage

    <.accordion class="max-w-xl">
      <.accordion_item name="faq" open>
        <.accordion_trigger>Is it accessible?</.accordion_trigger>
        <.accordion_content>
          Yes. It uses native details and summary elements.
        </.accordion_content>
      </.accordion_item>
      <.accordion_item name="faq">
        <.accordion_trigger>Can I open multiple items?</.accordion_trigger>
        <.accordion_content>
          Omit the shared `name` attribute to allow multiple open items.
        </.accordion_content>
      </.accordion_item>
    </.accordion>

## Unstyled / Headless

Use `variant="unstyled"` on each primitive when you want PUI to keep the
structure but leave presentation entirely up to you:

    <.accordion variant="unstyled" class="space-y-3">
      <.accordion_item variant="unstyled" class="rounded-2xl border">
        <.accordion_trigger
          variant="unstyled"
          class="flex w-full items-center justify-between px-4 py-3"
        >
          Custom trigger
        </.accordion_trigger>
        <.accordion_content variant="unstyled" class="px-4 pb-4 text-sm">
          Fully custom content styling.
        </.accordion_content>
      </.accordion_item>
    </.accordion>

## Attributes

### `accordion/1`

| Attribute | Type | Default | Description |
|-----------|------|---------|-------------|
| `variant` | `string` | `"default"` | `"default"` or `"unstyled"` |
| `class` | `string` | `""` | Additional wrapper classes |
| `rest` | `global` | - | Global HTML attributes |

### `accordion_item/1`

| Attribute | Type | Default | Description |
|-----------|------|---------|-------------|
| `name` | `string` | `nil` | Shared group name for single-open behavior |
| `open` | `boolean` | `false` | Whether the item starts expanded |
| `variant` | `string` | `"default"` | `"default"` or `"unstyled"` |
| `class` | `string` | `""` | Additional item classes |

### `accordion_trigger/1`

| Attribute | Type | Default | Description |
|-----------|------|---------|-------------|
| `icon` | `boolean` | `true` | Show the default chevron icon |
| `variant` | `string` | `"default"` | `"default"` or `"unstyled"` |
| `class` | `string` | `""` | Additional trigger classes |

### `accordion_content/1`

| Attribute | Type | Default | Description |
|-----------|------|---------|-------------|
| `variant` | `string` | `"default"` | `"default"` or `"unstyled"` |
| `class` | `string` | `""` | Additional content classes |

## Slots

| Slot | Description |
|------|-------------|
| `inner_block` | The nested content for each primitive |

# `accordion`

Renders the outer accordion wrapper.

The wrapper is intentionally lightweight. Single-open behavior is controlled
by giving related `accordion_item/1` entries the same `name` attribute.

## Examples

    <.accordion class="max-w-xl">
      <.accordion_item name="faq" open>
        <.accordion_trigger>Question</.accordion_trigger>
        <.accordion_content>Answer</.accordion_content>
      </.accordion_item>
    </.accordion>

## Attributes

* `class` (`:string`) - Defaults to `""`.
* `variant` (`:string`) - Defaults to `"default"`. Must be one of `"default"`, or `"unstyled"`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

# `accordion_content`

Renders the accordion panel content below a trigger.

Place this component directly after `accordion_trigger/1` inside an
`accordion_item/1`.

## Examples

    <.accordion_content>
      Answers, body copy, and custom markup go here.
    </.accordion_content>

## Attributes

* `class` (`:string`) - Defaults to `""`.
* `variant` (`:string`) - Defaults to `"default"`. Must be one of `"default"`, or `"unstyled"`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

# `accordion_item`

Renders a single accordion item using the native `<details>` element.

Use the same `name` on sibling items to create single-open behavior similar
to a traditional accordion. Leave `name` empty to allow multiple items to
stay expanded.

## Examples

    <.accordion_item name="faq" open>
      <.accordion_trigger>Question</.accordion_trigger>
      <.accordion_content>Answer</.accordion_content>
    </.accordion_item>

## Attributes

* `class` (`:string`) - Defaults to `""`.
* `name` (`:string`) - Defaults to `nil`.
* `open` (`:boolean`) - Defaults to `false`.
* `variant` (`:string`) - Defaults to `"default"`. Must be one of `"default"`, or `"unstyled"`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

# `accordion_trigger`

Renders the clickable accordion summary row.

By default the trigger includes a chevron that rotates when its parent item
is open. Set `icon={false}` to hide it.

## Examples

    <.accordion_trigger>Billing & shipping</.accordion_trigger>
    <.accordion_trigger icon={false}>Plain trigger</.accordion_trigger>

## Attributes

* `class` (`:string`) - Defaults to `""`.
* `icon` (`:boolean`) - Defaults to `true`.
* `variant` (`:string`) - Defaults to `"default"`. Must be one of `"default"`, or `"unstyled"`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

---

*Consult [api-reference.md](api-reference.md) for complete listing*