Disclosure

A single collapsible region — chevron trigger plus an optional trailing slot — for nesting detail under a header without the weight of an accordion.

Import

import { Disclosure } from "@roger-emerson/ploxum-primitives";

Usage

<Disclosure
  defaultOpen
  trailing={<span className="font-mono text-[12px] tabular-nums">12</span>}
  trigger="North concourse cameras"
>
  <ul className="px-2 py-1 text-[13px] text-[var(--ploxum-color-text-secondary)]">
    <li>CAM-204 · online</li>
    <li>CAM-205 · degraded</li>
  </ul>
</Disclosure>

Props

Prop	Type	Default	Description
`trigger`	`ReactNode`	—	Header content, rendered inside the toggle button. Required.
`children`	`ReactNode`	—	The disclosed region. Stays mounted; hidden via `hidden` when closed. Required.
`trailing`	`ReactNode`	—	Right-aligned slot in the trigger row — typically a count or static KPI.
`open`	`boolean`	—	Controlled open state. When set, the component is controlled and ignores internal state.
`defaultOpen`	`boolean`	`false`	Initial open state in uncontrolled mode.
`disabled`	`boolean`	`false`	Dims the trigger and blocks toggling.
`onOpenChange`	`(open: boolean) => void`	—	Fires on every toggle with the next state. Required for controlled use.
`className`	`string`	—	Merged onto the root `<div>`.
`ref`	`Ref<HTMLDivElement>`	—	Forwarded to the root `<div>`.

Controlled and uncontrolled are both supported: pass open + onOpenChange to control it, or defaultOpen to let it manage itself.

Design rules

Only the chevron animates — a rotate-90 on a transition-transform that is gated off under motion-reduce. The region itself snaps; no height animation.
The disclosed region stays mounted and keeps a stable id, so the trigger's aria-controls stays valid whether open or closed. Toggling flips aria-expanded and the hidden attribute.
trailing is a non-interactive slot — it lives inside the trigger button, so any control placed there would be swallowed by the toggle. Keep it to counts and static metrics.
For more than one peer region where only one should be open at a time, compose multiple Disclosures with controlled open state — there is no built-in single-open accordion mode.

Storybook

Primitives/Disclosure ↗