## Collapse
A single expandable panel that hides secondary content until asked.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-collapse> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, dashboard, settings.
Props:
- open: boolean, default false. Whether the panel is expanded; toggled on header click (observed → aria-expanded synced)
- accordion: boolean, default false. Opening this panel closes sibling accordion panels under the same parent (one-open-at-a-time)
- ghost: boolean, default false. Borderless, transparent surface that sits seamlessly on the page
- size: 'small', default —. Denser header + body padding
- icon-position: 'start' | 'end', default start. Caret on the leading or trailing edge of the header
- disabled: boolean, default false. Non-interactive, dimmed panel (observed → aria-disabled synced)
- header: slot, default Section. The always-visible summary row
- extra: slot, default —. A trailing header accessory (a tag, a count, an icon)
- toggle: CustomEvent<{open}>, default —. Composed event; read e.detail.open
Tokens: bg-container, border, split, radius-default, text-default, text-secondary, text-disabled, bg-hover, icon-default, border-focus, font-product.
Use when: 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).