# Collapse
> Generated from collapse.contract.json — do not edit by hand.

A single expandable panel that hides secondary content until asked.

Tier: **leaf-lit**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: editor, dashboard, settings.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `open` | boolean | `false` | Whether the panel is expanded; toggled on header click (observed → aria-expanded synced) |
| `accordion` | boolean | `false` | Opening this panel closes sibling accordion panels under the same parent (one-open-at-a-time) |
| `ghost` | boolean | `false` | Borderless, transparent surface that sits seamlessly on the page |
| `size` | 'small' | `—` | Denser header + body padding |
| `icon-position` | 'start' | 'end' | `start` | Caret on the leading or trailing edge of the header |
| `disabled` | boolean | `false` | Non-interactive, dimmed panel (observed → aria-disabled synced) |
| `header` | slot | `Section` | The always-visible summary row |
| `extra` | slot | `—` | A trailing header accessory (a tag, a count, an icon) |
| `toggle` | CustomEvent<{open}> | `—` | Composed event; read e.detail.open |

## Visual standard (measured)
- Panel: border 1px #E3E3E3 · radius 8px · bg #FFFFFF (ghost: borderless, transparent)
- Header: padding 14/16 · 15/22 SemiBold #1A1A1A · hover #F7F7F7 (small: 8/12 · 14/20)
- Caret: system-caret-right <aha-icon>, rotate 0°→90° on open, motion-mid ease-in-out
- Icon position: start (leading, default) or end (trailing edge, via order)
- Body: grid-rows 0fr→1fr, motion-mid ease-in-out · 14/22 #4A4A4A
- Disabled: text-disabled #B5B5B5, not-allowed, hover suppressed, aria-disabled

## When to use
- **Collapse** — hiding secondary detail (advanced settings, an FAQ answer) until wanted
- **Tabs** — switching between peer views of equal importance
- **Card** — content that should always be visible

Header text names what's inside — 'Advanced settings', not 'More'. Keep panels shallow; deep nesting hides content people never find.