#Collapsible

Uses the native details element to contain secondary explanation while preserving a clear label, state, and no-script fallback.

npm install @a3s-lab/ui@0.4.0

<details class="collapsible" open>
  <summary>Why this permission is needed</summary><div data-collapsible-content>The folder is read only until access is approved.</div>
</details>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#Usage

<details class="collapsible" open>
  <summary>Why this permission is needed</summary><div data-collapsible-content>The folder is read only until access is approved.</div>
</details>

#Contract

#Product boundary

Collapsible is for supplemental content. Never hide required fields, errors, or primary actions inside it. Use Accordion when several sections need coordinated exclusivity.

The component publishes a reusable interaction boundary only. Data fetching, persistence, permission, trusted content, and business entities remain host-owned.

#Accessibility

The summary retains native keyboard behavior and visible focus. Disabled state blocks pointer and keyboard use, and collapsing never changes reading order.