FilterPanel — Loidolt Theme

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

Example

Notes

The toggle is yours: a Button with aria-expanded and aria-controls pointing at the panel id.
Closed, the controls are inert — out of the tab order and the accessibility tree — while the height still animates.
Set --ldt-min to change the column width. "Clear all" appears when activeCount is above zero and onClear is given.

Props

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

FilterPanel props
Prop	Type	Default	Notes
`children` required	`Snippet`	`—`	The filter controls, laid out on an auto-fit grid (`--ldt-min` sets the column width).
`activeCount`	`number`	`0`	How many filters are set; shows "Clear all" when above zero and `onClear` is given.
`class`	`string`	`—`
`clearLabel`	`string`	`'Clear all'`
`label`	`string`	`'Filters'`	Accessible name of the region.
`onClear`	`() => void`	`—`
`open` bindable	`boolean`	`false`	Whether the panel is expanded. The toggle is yours — a `Button` with `aria-expanded={open}` and `aria-controls` set to this panel's `id`.
`ref` bindable	`HTMLDivElement \| null`	`null`

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