---

## Accordion
Collapsible content sections with expand/collapse animation.
Supports single or multiple open items, keyboard navigation, and ARIA accordion pattern.

**Import:** `import { Accordion } from '@urbicon-ui/blocks';`

### Examples
```svelte
<Accordion>
  <AccordionItem value="faq-1" title="What is Urbicon UI?">
    A Svelte 5 component library with built-in i18n and design tokens.
  </AccordionItem>
  <AccordionItem value="faq-2" title="How does dark mode work?">
    Semantic tokens automatically handle light/dark via the CSS light-dark() function.
  </AccordionItem>
</Accordion>
```

```svelte
<Accordion type="multiple" variant="card" bind:value={openItems}>
  <AccordionItem value="section-1" title="Section 1">Content</AccordionItem>
  <AccordionItem value="section-2" title="Section 2">Content</AccordionItem>
</Accordion>
```

### Variants
- variant: card, default, ghost (default: default)
- size: lg, md, sm (default: md)
- expanded: false, true

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| children | `Snippet` | yes |  | Accordion items |
| ...AccordionVariants | `VariantProps` | no |  | Styling variants from AccordionVariants |
| ...HTMLAttributes<HTMLDivElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
| class | `string` | no |  | Custom CSS class. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| collapsible | `boolean` | no | true | Whether items can be fully collapsed |
| defaultValue | `string | string[]` | no |  | Default open item(s) |
| disabled | `boolean` | no | false | Disable all items |
| onValueChange | `(value: string | string[]) => void` | no |  | Callback when open items change |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Accordion: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project. |
| size | `'sm' | 'md' | 'lg'` | no | 'md' | Size |
| slotClasses | `Partial<Record<AccordionSlots, string>>` | no |  | Per-slot class overrides, accordion-wide: the item slots (item | trigger | chevron | content | contentInner) apply to every AccordionItem; an item's own slotClasses win their bucket. Slots: base | item | trigger | chevron | content | contentInner. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| transitionDuration | `number` | no |  | Override every item's expand/collapse animation duration in milliseconds. Defaults to the `--blocks-collapse-duration` token (the `normal` 250ms). Respects `prefers-reduced-motion`. |
| transitionEasing | `string` | no |  | Override every item's expand/collapse easing as a CSS `<easing-function>` — e.g. `'ease-in-out'`, `'cubic-bezier(0.4,0,0.2,1)'`, or a token like `'var(--blocks-ease-springy)'`. Defaults to the `--blocks-collapse-easing` token. (A CSS string, not the `(t) => number` easing function the overlay components take — Accordion animates via CSS.) |
| type | `'single' | 'multiple'` | no | 'single' | Allow single or multiple items open at once |
| unstyled | `boolean` | no |  | Remove default styles |
| value | `string | string[]` | no |  | Controlled open item(s) – string for single, string[] for multiple |
| variant | `'default' | 'card' | 'ghost'` | no | 'default' | Visual style |
| expanded | `'false' | 'true'` | no |  | Controls the expanded behavior and appearance of the Accordion component. Available options: false, true. |

Inherited from:
- AccordionVariants (external)
- Omit<HTMLAttributes<HTMLDivElement>, 'children'> (omit-pattern)

### Types
```ts
interface AccordionContext {
toggle: (value: string) => void;
  isOpen: (value: string) => boolean;
  variant: AccordionVariants['variant'];
  size: AccordionVariants['size'];
  disabled: boolean;
  /**
   * The accordion-level slotClasses, shared with every item. The Accordion
   * prop TYPE always declared the item slots (trigger, contentInner, …), but
   * only `base` ever reached the DOM — an accordion-wide
   * `slotClasses={{ trigger: 'px-4' }}` was a type-checked no-op until
   * 2026-08-16. Item-own slotClasses merge after these and win their bucket.
   */
  readonly slotClasses: Partial<Record<Exclude<AccordionSlots, 'base'>, string>> | undefined;
}
```

### Slots (slotClasses keys)
`base`, `item`, `trigger`, `chevron`, `content`, `contentInner`