Collapsible

Preview

<Collapsible title="Permit conditions">
  <p>Body content, revealed on toggle.</p>
</Collapsible>

Icon and default state

A leading icon reads as a quiet, secondary glyph — it labels the section, it doesn't decorate it. open renders the section expanded on load.

<Collapsible title="Site details" icon="map-pin" open>…</Collapsible>
<Collapsible title="Attachments" icon="file-text">…</Collapsible>

Flush

flush strips the card chrome and the horizontal padding, so sections sit directly in a drawer, sidebar, or filter rail where the host already supplies the dividers and gutter.

<Collapsible title="Status" icon="circle-check" flush open>…</Collapsible>
<Collapsible title="Date range" icon="calendar" flush>…</Collapsible>

Stacking — not an accordion

This is a single disclosure, not a single-open accordion group. Stack several for a set and each opens independently, matching native <details> semantics. There is deliberately no group component: "only one open at a time" is a behavior that costs readers the comparison they usually want, and it takes JS to enforce something the platform gives you for free otherwise.

<Collapsible title="Overview" icon="info" open>…</Collapsible>
<Collapsible title="Conditions" icon="notepad-text">…</Collapsible>
<Collapsible title="History" icon="history">…</Collapsible>

API

Slots

Accessibility

• Native <details>/<summary>: the expanded state, the button role, Enter/Space activation, and focus all come from the platform. No ARIA is added, and none should be — hand-written aria-expanded on a summary fights the element.
• The entire summary row is the hit target, not just the caret — a full-width tap target, which is the point of using the native element.
• The caret is a CSS ::after and the native marker is hidden, so nothing is announced twice.
• Collapsed content is genuinely hidden from find-in-page in some browsers. Don't hide content a reader must be able to search for — and never a form field carrying a validation error.
• title is a <span>, not a heading. If the sections are page structure rather than a widget, wrap each summary's label in the right <h*> at the call site.

Theming surface

Every public token this component reads, extracted from its source at build time, split by blast radius: the hooks that belong to this component, then the shared and system tokens it consumes alongside everything else. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.

Type roles it names

This component does not set a size, weight, face or tracking of its own — it names a composite, and the composite carries all five. A composite is a class rather than a token, so none of it appears in the tables below; re-theme text by re-pointing the token family, not by editing the component.

Wired to this component

None. This component has no hooks of its own — it themes entirely through the shared tokens below, so every override here also moves its siblings.

Shared tokens it reads

Owned by a family or by the semantic layer. Still overridable — but scope the override (esa-foo { --form-border-color: … }) unless you mean to move everything that reads it. Reach says what else that is.