Accordion — Loidolt Theme

import { Accordion } from '@loidolt/theme-svelte';

Example

Materials

3mm birch ply, grain running along the long edge.

Tolerances

Finishing

Keep headingLevel in step with the surrounding outline: panels sit one level below the heading that introduces them.

Generated from the component source, so it cannot drift from the implementation.

Accordion props
Prop	Type	Default	Notes
`children` required	`Snippet<[{ value: T }]>`	`—`	Panel body, rendered for each item with the item's own value.
`items` required	`Disclosure<T>[]`	`—`
`class`	`string`	`—`
`contentClass`	`string`	`—`
`disabled`	`boolean`	`false`
`headingLevel`	`HeadingLevel`	`3`	Heading level of every trigger's wrapper. Panels sit at one level below whatever heading introduces the accordion, so keep this in step with the surrounding outline.
`id`	`string`	`—`	Narrowed from the DOM attribute: the Bits root this spreads onto rejects `null`.
`itemClass`	`string`	`—`
`multiple`	`boolean`	`false`	Lets more than one panel stay open. `value` is then an array.
`onValueChange`	`(value: T \| T[]) => void`	`—`
`ref` bindable	`HTMLDivElement \| null`	`null`
`value` bindable	`T \| T[]`	`—`	Open panel, or panels when `multiple`. Bindable.

Plus the attributes of Omit<HTMLAttributes<HTMLDivElement>, 'children'>, forwarded to the root element.