hp-collapsible

Trigger + content pair. The slotted trigger toggles the open state; default-slot content expands / collapses via a smooth grid-template-rows transition. Auto-stamps aria-expanded / aria-controls on the trigger and aria-labelledby on the content.

Examples

API

Intent

Changelog

show details

Hidden by default. The button toggles open on the host.

Smooth height transition uses grid-template-rows: 0fr → 1fr.

<body> <hp-collapsible> <hp-button slot="trigger">show details</hp-button> <p>Revealed content goes here.</p> </hp-collapsible> </body>

hide details

Visible at mount because open is set as an attribute.

<body> <hp-collapsible open> <hp-button slot="trigger">hide details</hp-button> <p>Visible at mount.</p> </hp-collapsible> </body>

Install

bun add @hexpunk/core lit

import "@hexpunk/core";

Properties

Property	Attribute	Type	Default	Description
`open`	`open`	`boolean`	`false`	Open / closed state. Reflects to the host.
`disabled`	`disabled`	`boolean`	`false`	Disabled — blocks the trigger and removes it from the tab order.

Events

Event	Type	Description
	`CustomEvent`
`hp-collapsible-open`	`Event`	When the panel opens
`hp-collapsible-close`	`Event`	When the panel closes

Slots

Slot	Description
`trigger`	The element that toggles open / close
`(default)`	Revealed content (default slot)

CSS Parts

Part	Description
`trigger`	The trigger container
`content`	The collapsible content region

Accessibility

Trigger gets aria-expanded + aria-controls pointing at the content region's id; content gets role="region" + aria-labelledby pointing back at the trigger. The browser exposes the pair as a disclosure widget.