Disclosure

Accordion

Collapsible sections built on native <details>.

stableEnhancer: enhanceAccordionBuilt on <details>hydrateless/accordion.css

Collapsible sections built on the native <details>/<summary> elements. CSS handles open and close with zero JavaScript. The optional enhancer enforces single-panel-open behavior, adds the APG header navigation (Up/Down/Home/End move focus between summaries), and exposes the open items as a value.

Accordion

With the enhancer, opening one panel closes the others and arrow keys move between headers. Toggle JS off and each <details> works on its own.

Live

What is Hydrateless?

A library of accessible UI primitives that work with semantic HTML and CSS first, with optional JS enhancers.

Does it require JavaScript?

No. Most components work with CSS alone. JS is loaded only where an interaction truly needs it.

Is it themeable?

Yes. Every component is driven by CSS variables, with dark mode built in.

JavaScript

This component ships an optional enhancer. With auto-init it loads automatically; to wire it yourself, import it directly:

import { enhanceAccordion } from '@hydrateless/enhancers/accordion';

const handle = enhanceAccordion(document);
// handle.api  -> imperative controls
// handle.destroy()  -> tear everything down

Props

The framework bindings expose these props (and forward the rest to the root element).

Prop	Type	Default	Description
value	string[]	Not set	Controlled open item values; pair with `onValueChange` (Vue: `v-model`, Svelte: `bind:value`).
defaultValue	string[]	Not set	Uncontrolled initially open items. Falls back to the `open` attributes in the markup.
onValueChange	(value: string[]) => void	Not set	Called with the open item values, in document order, after every change.
allowMultiple	boolean	false	Let several panels stay open at once.
AccordionItem.value	string	Not set	Identifier used in `value`; rendered as `data-hl-value`. Defaults to the index.

Events and callbacks

Event / Callback	Payload	Description
hl:change	{ value: string[] }	Fires when the set of open panels changes (also the `onValueChange` callback).

CSS variables

Override these on any ancestor to theme the component. See the theme studio to preview changes live.

CSS variable	Used for
--hl-border	Divider between items.
--hl-fg	Summary text color.

Accessibility

• Native <details> gives each section a real disclosure button and Space/Enter toggling; aria-expanded is implicit.
• With the enhancer, Up/Down and Home/End move focus between headers, matching the APG accordion pattern.

Related

DisclosureA single expandable section via native <details>.TabsA tabbed interface with full ARIA roles and keyboard support.