# Collapsible

Style native disclosure groups without replacing details. (CSS only.)

Reference: https://timeless.build/docs/components/collapsible/

> **Choosing between components.** One expandable region or a whole stack of them: both are `<details>` with `.ui-collapsible`, so there is no second component to choose. Give every `<details>` in a stack the same `name` to get an accordion where only one panel is open at a time — the browser closes the previous one, so no script is involved. Omit `name` and the panels open independently.

## Markup

```html
<div>
  <details class="ui-collapsible" name="catalog-collapsible" open>
    <summary>What ships?</summary>
    <div>
      <p>CSS, explicit element definitions, and public types.</p>
    </div>
  </details>
  <details class="ui-collapsible" name="catalog-collapsible">
    <summary>Does it need JavaScript?</summary>
    <div>
      <p>No. Native details and summary own the open state, the keyboard, and find-in-page.</p>
    </div>
  </details>
</div>
```

## Install

```js
import '@timelessui/components/css/tokens.css'
import '@timelessui/components/css/core/collapsible.css'
import '@timelessui/components/css/themes/atmosphere/tokens.css'
import '@timelessui/components/css/themes/atmosphere/collapsible.css'
```

## Attributes

Every value below is implemented by the stylesheets this component ships. Boolean attributes
are presence-based: author the attribute with no value, or omit it.

| Attribute | Values | Default | Description |
| --- | --- | --- | --- |
| `data-ui-density` | `compact` · `normal` | `normal` | Summary and content padding. |

## Styling

Root identity: `ui-collapsible`.
Required stylesheets: `tokens.css`, `core/collapsible.css`, `themes/atmosphere/tokens.css`, `themes/atmosphere/collapsible.css`.

Set these custom properties to restyle the component:

| Custom property | Controls |
| --- | --- |
| `--ui-collapsible-line` | Divider color between rows. |
| `--ui-collapsible-trigger-min-block-size` | Minimum summary height. |
| `--ui-collapsible-trigger-padding-block` | Block padding inside the summary. |
| `--ui-collapsible-trigger-gap` | Gap between the summary text and the indicator. |
| `--ui-collapsible-panel-padding-block-end` | Block-end padding below the panel. |
| `--ui-collapsible-icon-size` | Size of the chevron indicator. |
| `--ui-collapsible-duration` | Indicator and panel transition duration. |

Design tokens this component reads (10), global and set at the theme level: `--ui-accent`, `--ui-duration-fast`, `--ui-ease-standard`, `--ui-fg`, `--ui-fg-muted`, `--ui-focus`, `--ui-line`, `--ui-space-3`, `--ui-space-4`, `--ui-space-5`.

## Accessibility

Keep the native elements, roles, and relationships shown in the markup. Timeless adds only the
state and keyboard coordination the platform does not already provide, and it never supplies
your accessible names — those depend on your content.

Follows the [Disclosure pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) from the ARIA Authoring Practices Guide.

Every key comes from native `<details>` and `<summary>`: Enter and Space toggle, Tab reaches the summary, and find-in-page opens a closed panel to reveal a match. Timeless adds no script and no ARIA, because the platform already exposes the button, its expanded state, and the region it controls. For an accordion where only one panel is open at a time, give every `<details>` in the stack the same `name`; the browser closes the previously open one, with no JavaScript involved.

## Before JavaScript runs

This primitive is CSS only. There is nothing to register and nothing to wait for.