Collapsible

A single-panel disclosure primitive: a standalone collapsible block with no container that manages its own open state. Relationship with oas-collapse — collapse orchestrates a container with multiple panels (panel state is driven by the container); collapsible is one independent panel, suited to file-tree nodes, form section folding, sidebar groups, and any "this block folds itself" scenario.

Basic Usage

Click the trigger to toggle

When expanded, more filters are shown: date range, tags, assignees, and so on.

Example

Collapsed by default; clicking the trigger area toggles it. The open state is managed by the component itself (uncontrolled).

Uncontrolled Initial Value

default-open — expanded initially

Expanded on the first frame via default-open; afterwards the state is managed internally and never written back to an attribute.

Example

default-open only seeds the uncontrolled initial value; once the open attribute is present the component is controlled and default-open no longer applies.

Controlled Mode

Controlled open + oas-toggle event

Toggle externally

Controlled mode: when the open attribute is present the displayed state follows the attribute (any value other than "false" means open); clicks write the attribute back and emit the event.

Current state: Open

Example

Controlled contract: the open attribute present = controlled (any value other than "false" means open, open="false" means collapsed); after a click the component writes the attribute back and emits oas-toggle (optimistic update). Removing the open attribute returns to uncontrolled mode; the internal state is seeded from the last displayed value so nothing jumps.

Framework binding note: the value semantics of open work correctly under Vue CSR, React, and plain HTML (frameworks serialize :open="false" into the attribute open="false"). However, Vue SSR/SSG (Nuxt, the Vitepress build) normalizes a boolean false into attribute removal (open is an HTML boolean attribute name) — an SSR-rendered controlled collapse degrades to uncontrolled, and a string "false" binding is normalized into a valueless open (expanded). For SSR hosts, declare the initial state with a static attribute and take over on the client by listening to oas-toggle, or bind via a JS property (el.open = false) on the host side.

Events

oas-toggle is emitted after every toggle, detail: { open }, in both controlled and uncontrolled modes.

Disabled

disabled trigger

Disabled state: the trigger cannot be focused or clicked and emits no events.

Example

disabled renders dimmed; the config-provider global disabled injection applies as well.

Rich Trigger Content

slot="header" custom trigger

Release plan (a sprint every two weeks)

Trigger content comes from slot="header" and takes precedence over the header attribute; icons, tags, and any other content are allowed.

Example

Custom Toggle Icon

template[slot="toggle"] custom toggle icon

The toggle icon is replaced with a downward chevron that rotates with the open state.

Example

Form Section Folding

Scenario: settings page sections

Email notifications, desktop notifications, and do-not-disturb hours.

Visibility, data sharing, and history cleanup.

Example

Multiple collapsibles toggle independently (no accordion exclusivity — use oas-collapse accordion for orchestrated exclusivity).

No-JS Fallback

When the component is not upgraded (no JS), the light DOM content renders as plain visible content — folding capability degrades, information is not lost.

API

oas-collapsible

Attributes

Attribute	Description	Type	Default
default-open	Uncontrolled initial open state (value semantics: anything other than "false" opens, so framework-serialized "false" bindings collapse correctly): seeds the first frame, afterwards self-managed and never written back; ignored when the open attribute is present (controlled mode)	—	—
disabled	Disables the trigger: not focusable, not clickable, emits no events; the config-provider global disabled injection applies as well	boolean	—
header	Trigger text (rendered inside the trigger button; rich content via slot="header", slot wins)	string	—
open	Open state (controlled switch): attribute absent = uncontrolled self-managed (seeded by default-open on the first frame); attribute present = controlled (any value other than "false" is open, "false" is collapsed), clicks flip, write the attribute back and emit (optimistic update)	—	—

Events

Event	Description
oas-toggle	Emitted after the open state changes, detail { open } (both controlled and uncontrolled modes)

Slots

Name	Description
default	Collapsible body content
header	Rich trigger content slot, overrides the header attribute text
template[slot="toggle"]	Custom toggle icon template (built-in arrow by default)