Collapsible

Overview

Collapsible expands and collapses a panel of content. It can be controlled (@bind-Open) or uncontrolled (DefaultOpen), publishes --collapsible-panel-height / -width custom properties so CSS height/width transitions work as a drop-in, and can keep its panel mounted through the open and close transitions (or as hidden="until-found" so the browser’s in-page find can reveal it).

Anatomy

@using Navius.Primitives.Components.Collapsible

<NaviusCollapsible>
    <NaviusCollapsibleTrigger />
    <NaviusCollapsiblePanel />
</NaviusCollapsible>

Root

Prop	Type	Default	Description
`Open`	`bool`	`false`	Controlled open state. Pair with `OpenChanged` (`@bind-Open`).
`OpenChanged`	`EventCallback<bool>`	-	Fires when the controlled `Open` value should change.
`DefaultOpen`	`bool`	`false`	Initial open state when used uncontrolled.
`Disabled`	`bool`	`false`	Disables the trigger and panel.
`ChildContent`	`RenderFragment?`	-	The collapsible’s parts.
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `div`.

Trigger

Prop	Type	Default	Description
`ChildContent`	`RenderFragment?`	-	Trigger label content.
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `button`.

Panel

Prop	Type	Default	Description
`KeepMounted`	`bool`	`false`	Keeps the panel mounted while closed, for exit animations.
`HiddenUntilFound`	`bool`	`false`	Keeps the panel mounted as `hidden="until-found"` so the browser’s in-page find can reveal it; a match opens the collapsible. Implies `KeepMounted`.
`ChildContent`	`RenderFragment?`	-	The panel’s content.
`Attributes`	`IDictionary<string, object>?`	-	Forwarded to the rendered `div`.

Data attributes

Part	Attribute	Description
Trigger	`data-panel-open`	Present while the panel is open.
Trigger	`data-disabled`	Present when disabled.
Panel	`data-open`	Present while open.
Panel	`data-closed`	Present while closing (through the exit transition).
Panel	`data-starting-style`	Present at the start of the open transition.
Panel	`data-ending-style`	Present at the start of the close transition.
Panel	`data-disabled`	Present when disabled.

Keyboard interactions

Key	Behavior
`Space`	Opens/closes the collapsible.
`Enter`	Opens/closes the collapsible.

ARIA mechanism

Implements the roles, states, and keyboard map of the disclosure WAI-ARIA APG pattern: the Trigger wires aria-expanded and aria-controls pointing at the Panel’s id. This behavior is covered by the Playwright browser test suite and gated by axe-core in CI.