---

## Collapsible
A single expand/collapse panel with animated content, trigger button,
and full ARIA support. Can be used standalone or as the foundation for compound
components like Accordion.

Need the wiring without the layout — trigger and content as siblings, e.g. two
rows of one grid? `useDisclosure()` from `@urbicon-ui/blocks` is the same
contract without the markup: open state, one toggle, and the attribute records
to spread. Collapsible itself is built on it.

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

### Examples
```svelte
<Collapsible title="Show details">
  <p>Hidden content revealed when expanded.</p>
</Collapsible>
```

```svelte
<Collapsible bind:open={isOpen} variant="card">
  {#snippet trigger({ open, toggle })}
    <button onclick={toggle}>
      {open ? 'Hide' : 'Show'} settings
    </button>
  {/snippet}
  <SettingsForm />
</Collapsible>
```

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

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| children | `Snippet` | yes |  | Collapsible content |
| ...CollapsibleVariants | `VariantProps` | no |  | Styling variants from CollapsibleVariants |
| ...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. |
| defaultOpen | `boolean` | no | false | Initial open state for uncontrolled usage |
| disabled | `boolean` | no | false | Disable the trigger |
| name | `string` | no |  | Base name for generating ARIA IDs. Defaults to auto-generated. |
| onOpenChange | `(open: boolean) => void` | no |  | Callback fired once per trigger-driven open transition, after the state is applied. Not fired for consumer writes via `bind:open`. |
| open | `boolean` | no |  | Whether the content is visible. Supports bind:open. Trigger-driven transitions are applied optimistically: `open` is updated first, then `onOpenChange` reports the change. When passing `open` without `bind:`, mirror every `onOpenChange` back into your state — an ignored change leaves the component and your source of truth diverged. To conditionally reject transitions, drive `open` from your own state and toggle it from a custom `trigger` snippet instead of calling the provided `toggle`. |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Collapsible: {...} }}>`. 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. |
| slotClasses | `Partial<Record<CollapsibleSlots, string>>` | no |  | Per-slot class overrides. Slots: base | 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. |
| title | `string` | no |  | Trigger label text (used by the default trigger) |
| transitionDuration | `number` | no |  | Override the expand/collapse animation duration in milliseconds. Defaults to the `--blocks-collapse-duration` token (the `normal` 250ms). Set globally via that CSS custom property or per-instance here. Respects `prefers-reduced-motion` (near-instant). |
| transitionEasing | `string` | no |  | Override the expand/collapse easing as a CSS `<easing-function>` — e.g. `'ease-in-out'`, `'cubic-bezier(0.4,0,0.2,1)'`, or a token such as `'var(--blocks-ease-springy)'`. Defaults to the `--blocks-collapse-easing` token.  Note: unlike the overlay components (Dialog/Drawer), whose Svelte transitions take an easing **function** `(t: number) => number`, Collapsible animates via CSS — so its easing is a CSS string. Same intent, representation follows the transition mechanism. |
| trigger | `Snippet<[
      {
        open: boolean;
        toggle: () => void;
        disabled: boolean;
        triggerId: string;
        contentId: string;
      }
    ]>` | no |  | Custom trigger snippet — receives open state, toggle fn, disabled flag, and ARIA IDs |
| unstyled | `boolean` | no |  | Remove default styles |
| variant | `'card' | 'default' | 'ghost'` | no | default | Controls the visual style and presentation of the Collapsible. Determines the component's visual treatment. Available options: card, default, ghost. |
| size | `'lg' | 'md' | 'sm'` | no | md | Controls the dimensions, padding, and text size of the Collapsible. Affects the component's physical footprint. Available options: lg, md, sm. |

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

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