# Details

> Source: https://design.nanatec.co.ke/components/details/
> A disclosure / expandable panel. A clickable summary toggles a smoothly animated content region. Compose the body from any markup via the default slot, and add a leading `icon` or trailing `badge`. Group several together with a shared `name` for accordion behaviour (one open at a time).

A disclosure / expandable panel. A clickable summary toggles a smoothly animated content region. Compose the body from any markup via the default slot, and add a leading `icon` or trailing `badge`. Group several together with a shared `name` for accordion behaviour (one open at a time).

## Preview

```html
<nana-details summary="What is Nana UI?" style="width:100%">
  A framework-agnostic web component library built with Lit.
</nana-details>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/details";
```

## Basic usage

```html
<nana-details summary="What is Nana UI?" style="width:100%">
  A framework-agnostic web component library built with Lit.
</nana-details>
```

## Variants

```html
<nana-details variant="default" summary="Default" style="width:100%">Content.</nana-details>
<nana-details variant="outlined" summary="Outlined" style="width:100%">Content.</nana-details>
<nana-details variant="filled" summary="Filled" style="width:100%">Content.</nana-details>
<nana-details variant="card" summary="Card" style="width:100%">Content.</nana-details>
<nana-details variant="minimal" summary="Minimal" style="width:100%">Content.</nana-details>
<nana-details variant="divider" summary="Divider" style="width:100%">Content.</nana-details>
```

## Indicators

The `indicator` attribute sets the expand affordance — `chevron`, `plus`, or
`none`.

```html
<nana-details indicator="chevron" summary="Chevron" style="width:100%">Content.</nana-details>
<nana-details indicator="plus" summary="Plus" style="width:100%">Content.</nana-details>
<nana-details indicator="none" summary="No indicator" style="width:100%">Content.</nana-details>
```

## API

## Events

| Event | Type | Description |
|---|---|---|
| `nana-toggle` | `CustomEvent` | Fired whenever the open state changes (`detail.open`) |
| `nana-show` | `CustomEvent` | Fired when expanded |
| `nana-hide` | `CustomEvent` | Fired when collapsed |

## Slots

| Slot | Description |
|---|---|
| `(default)` | The collapsible content |
| `summary` | Custom summary content (overrides `summary` / `description`) |
| `icon` | Leading icon in the summary |
| `badge` | Trailing badge / status before the indicator |

## CSS Variables

| Variable | Default | Description |
|---|---|---|
| `--nana-details-radius` | — | Corner radius |
| `--nana-details-padding` | — | Summary / content padding |
| `--nana-details-duration` | — | Expand / chevron animation duration |

## CSS Parts

| Part | Description |
|---|---|
| `base` | The outer container |
| `summary` | The clickable trigger |
| `content` | The content region |

## Accessibility

<ul class="a11y-grid not-content">
  <li>Keyboard accessible</li>
  <li>Screen-reader labels</li>
  <li>Focus-visible states</li>
  <li>ARIA roles and states</li>
  <li>WCAG 2.2 AA contrast</li>
</ul>

## Related components

<ul class="related not-content">
  <li><a href="/components/card/">Card</a></li>
  <li><a href="/components/divider/">Divider</a></li>
  <li><a href="/components/dialog/">Dialog</a></li>
  <li><a href="/components/drawer/">Drawer</a></li>
  <li><a href="/components/popup/">Popup</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-details--docs