History

dev d5f96aedf9 Normalize Soma root service references		5 months ago
..
components	remove backward-compat re-export shims	5 months ago
README.md	soma: gesture layer, drawer component, full audit fixes across 26 components	6 months ago
collapsible-provider.svelte.ts	Normalize Soma root service references	5 months ago
exports.ts	soma: gesture layer, drawer component, full audit fixes across 26 components	6 months ago
index.ts	Add soma foundation + air components (Pagination, Editable, PinInput, RatingGroup, Stepper, FileUpload)	6 months ago
types.ts	soma: gesture layer, drawer component, full audit fixes across 26 components	6 months ago

README.md

Collapsible

A component that expands and collapses a content section.

Anatomy

<Collapsible.Provider bind:open>
	<Collapsible.Trigger>Toggle</Collapsible.Trigger>
	<Collapsible.Content>Collapsible content here.</Collapsible.Content>
</Collapsible.Provider>

Parts

Part	Element	Description
`Provider`	`<div>`	Root container. Manages open state.
`Trigger`	`<button>`	Toggles the content on click.
`Content`	`<div>`	Collapsible content panel. Hidden when closed.

ARIA

Part	Attribute	Value
Trigger	`aria-expanded`	`true` \| `false`
Trigger	`aria-controls`	ID of the associated Content
Content	`role`	`region`
Content	`aria-labelledby`	ID of the associated Trigger

Data Attributes

Part	Attribute	Values
Provider	`data-collapsible`	Always present
Provider	`data-state`	`open` \| `closed`
Provider	`data-disabled`	Present when disabled
Trigger	`data-collapsible-trigger`	Always present
Trigger	`data-state`	`open` \| `closed`
Trigger	`data-disabled`	Present when disabled
Content	`data-collapsible-content`	Always present
Content	`data-state`	`open` \| `closed`
Content	`data-disabled`	Present when disabled

Keyboard

Key	Action
`Enter` / `Space`	Toggle the content (on trigger)

Usage

Basic

<script>
	import { Collapsible } from '$soma/components';

	let open = $state(false);
</script>

<Collapsible.Provider bind:open>
	<Collapsible.Trigger>Show more</Collapsible.Trigger>
	<Collapsible.Content>
		<p>This content can be toggled.</p>
	</Collapsible.Content>
</Collapsible.Provider>

Disabled

<Collapsible.Provider disabled>
	<!-- Trigger is disabled, cannot toggle -->
</Collapsible.Provider>

Default open

<Collapsible.Provider open={true}>
	<!-- Starts expanded -->
</Collapsible.Provider>