Disclosure

Headless UI React's Disclosure is the closest library match to the canonical Disclosure by naming (it ships `Disclosure` / `DisclosureButton` / `DisclosurePanel` rather than Radix's `Collapsible.*`). The divergences are fewer and less structural than the modal audit but follow the same library-level pattern: 1. Unstyled by design. Variants (inline / standalone), density, and the icon slot are all omitted — styling is consumer CSS driven by `data-open` / `data-closed` attributes. 2. Uncontrolled-only root. `Disclosure` only ships `defaultOpen`; there is no controlled `open` + `onOpenChange` pair. Consumers needing controlled state must lift state up and use `static={true}` on `DisclosurePanel` or rely on `useClose()` for imperative close. 3. No intermediate animation states. Canonical models four states (closed / expanding / expanded / collapsing). Headless UI's binary open/closed state plus `data-enter` / `data-leave` on `DisclosurePanel` (when `transition={true}`) provides animation hooks without discrete intermediate states in the component's own reducer. 4. No openChange callback. The absence of a boolean change event is the sharpest API gap. In-panel close is handled instead via the extended `CloseButton` / `useClose()` affordances — a pragmatic workaround but not equivalent to an event-driven open/close contract. 5. aria-labelledby gap. Canonical requires the panel to carry `aria-labelledby` referencing the trigger. Headless UI wires only `aria-controls` (button → panel) but not the reverse (`aria-labelledby` on the panel). Consumers applying `role="region"` to `DisclosurePanel` must add `aria-labelledby` manually.

Radix Collapsible is the closest Radix primitive to the canonical Disclosure. The accessibility contract is fully implemented: Collapsible.Trigger ships a real `<button>` with `aria-expanded` and `aria-controls` auto-wired; the content region carries the matching `id`. The ARIA Disclosure pattern (W3C APG) is honoured at the core. Divergence is concentrated in three areas. First, the naming layer: Radix calls this component Collapsible (not Disclosure), calls the state prop `defaultOpen` (not `defaultExpanded`), and uses `onOpenChange` for the event. Second, the variant and styling surface: Radix deliberately ships nothing — no icon slot, no density, no variant classification — because these are design-system concerns above the primitive. Third, the motion surface: Radix replaces the canonical four-state transition graph with a two-state `data-state` attribute plus CSS custom properties for dimension-based animations, offloading all timing and easing to the consumer. The overall pattern matches other Radix audits: the primitive owns the accessibility wiring; design-system specifics (variants, density, motion timing, icon composition) are a layer that consumers compose above Radix.

React Aria Disclosure is a behaviour-first primitive that wires the aria-expanded / aria-controls / aria-labelledby contract and provides controlled + uncontrolled state management, leaving all visual composition (icon placement, density, variant styling, animation timing) to the consumer. The deepest structural divergences are: 1. The canonical `trigger` slot is split across two React Aria layers: an optional `DisclosureHeader` wrapper (heading semantics) and a mandatory `<Button slot="trigger">` (ARIA wiring). Consumers opt into heading semantics explicitly. 2. `DisclosurePanel` defaults `role="group"` rather than `role="region"`. This avoids landmark pollution on pages with many disclosures but means consumers must opt into landmark semantics for regional content. 3. The canonical `expanding` / `collapsing` intermediate states are absent; React Aria substitutes CSS custom properties (`--disclosure-panel-height`) to enable pure-CSS height transitions, shifting animation-state responsibility to consumer CSS. 4. `DisclosureGroup` collapses the canonical Accordion component into a grouping layer on top of Disclosure, unifying the two separate canon components into one composable primitive.