# SvAccordion
A WAI-ARIA accordion of collapsible sections, with single- or multiple-expand
and roving header focus.
`SvAccordion` stacks labelled sections whose bodies are rendered through a `panel`
snippet. It is controlled - you own the open ids via `expanded` and `onChange` -
and every color comes from the grid's `--sg-*` tokens so it matches the rest of
the kit in light and dark. The expand logic, keyboard handling, and ARIA wiring
live in a headless `createAccordion` core; this component is one styled renderer.
Related: [SvTabs](https://svgrid.com/docs/help/ui-components/sv-tabs/) · [SvSplitter](https://svgrid.com/docs/help/ui-components/sv-splitter/) · [Layout & composite overview](https://svgrid.com/docs/help/ui-components/layout/)
## Installation
Add it with the CLI - this drops a ready-to-edit `SvAccordion` starter into your app:
Prefer to see it first? `npx @svgrid/ui try accordion` opens it in a throwaway sandbox - no project needed.
Or install the package and import it directly. `SvAccordion` ships free in
`@svgrid/grid` (dependency-free):
```ts
import { SvAccordion } from '@svgrid/grid'
```
## Example
> Live demo: Accordion - https://svgrid.com/demos/285-accordion/
```svelte
(expanded = ids)}>
{#snippet panel(item)}
Details for {item.label}.
{/snippet}
```
## Props
| Prop | Type | Default | Description |
| ------------ | --------------------------------------- | ---------- | ----------------------------------------------------------- |
| `items` | `ReadonlyArray` | - | The section items. See [AccordionItem](#accordionitem). |
| `expanded` | `string[]` | `[]` | Expanded item ids (bindable). Controlled via `onChange`. |
| `onChange` | `(expandedIds: string[]) => void` | - | Fired when the set of open sections changes. |
| `expandMode` | `AccordionExpandMode` (`single` \| `multiple`) | `single` | `single` keeps at most one open; `multiple` allows any. |
| `disabled` | `boolean` | `false` | Disables the whole accordion. |
| `dir` | `EditorDir` (`ltr` \| `rtl` \| `auto`) | - | Text direction. `rtl` mirrors layout and the chevron. |
| `panel` | `Snippet<[AccordionItem]>` | - | Renders a section body; receives the item. |
### AccordionItem
```ts
type AccordionItem = { id: string; label: string; disabled?: boolean }
type AccordionExpandMode = 'single' | 'multiple'
```
## Examples
### Multiple open sections
Set `expandMode="multiple"` for a settings-style list where several panels can be
open at once:
```svelte
(expanded = ids)}>
{#snippet panel(item)}{/snippet}
```
### FAQ list
The default `single` mode gives a classic FAQ where opening one answer collapses
the last - keep `expanded` in `$state` and mirror it in `onChange`.
### Filter sidebar
Group a long filter set into collapsible sections that can stay open together with
`expandMode="multiple"`, and seed which groups start open:
```svelte
(expanded = ids)}>
{#snippet panel(item)}
{#if item.id === 'price'}
{:else if item.id === 'brand'}
{:else}{/if}
{/snippet}
```
**Tip:** `disabled` items are skipped by keyboard navigation and cannot be
toggled, so mark a section `disabled` (rather than dropping it) to keep its place
in the list while its data loads.
## Accessibility
- Each header is a real `