Collapsible

A single disclosure section — an icon + title summary over a slotted body — built on native

for free accessibility, keyboard support, and open/close state with no JS. It is a single disclosure, not a single-open accordion group: stack several and each opens independently.

Inherited .astro import EsaCollapsible from '@esa/ecology/esa-collapsible.astro';

Basic

A required title, an optional leading icon, and slotted body content. Compose a stack for a sidebar of detail groups; open controls the initial state per section.

Soil properties

pH, texture, drainage class, and available water capacity.

Limitations

Scope notes and screening-level disclaimers.

<EsaCollapsible title="Soil properties" icon="database" open>
  pH, texture, drainage class, and available water capacity.
</EsaCollapsible>
<EsaCollapsible title="Limitations" icon="info">
  Scope notes and screening-level disclaimers.
</EsaCollapsible>

Without an icon

The icon is optional — omit it for a plain title summary. The caret still leads the open/close affordance from the right.

Methodology

How the 0–100 score is derived.

<EsaCollapsible title="Methodology">
  How the 0–100 score is derived.
</EsaCollapsible>

Flush

With flush, the card chrome drops away — for stacked drawer or sidebar sections where the host supplies its own dividers.

Tracking

Ruleset version and dataset refresh dates.

Details

Read-only assessment metadata.

<EsaCollapsible title="Tracking" icon="history" flush open>
  Ruleset version and dataset refresh dates.
</EsaCollapsible>

API

Prop	Type	Default	Description
`title`	`string`	—	Summary label (required).
`icon`	`string`	—	Optional leading Lucide icon name (kebab-case).
`iconPaths`	`string`	—	Inner SVG markup for an icon outside esa-icon’s built-in registry (passed through to esa-icon).
`open`	`boolean`	`false`	Render expanded on load.
`flush`	`boolean`	`false`	No card chrome (border/radius/background, flush horizontal padding) — for stacked sidebar sections separated by the host’s own dividers.