---

## 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.

**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 |  | Content to render inside the Collapsible component |
| ...CollapsibleVariants | `VariantProps` | no |  | Styling variants from CollapsibleVariants |
| ...HTMLAttributes<HTMLDivElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
| class | `string` | no |  | Additional CSS classes to apply to the Collapsible component |
| defaultOpen | `boolean` | no | false | Initial open state for uncontrolled usage |
| disabled | `boolean` | no | false | Whether the Collapsible is disabled and non-interactive |
| name | `string` | no |  | Base name for generating ARIA IDs. Defaults to auto-generated. |
| onOpenChange | `(open: boolean) => void` | no |  | Callback fired when open state changes |
| open | `boolean` | no |  | Whether the content is visible. Supports bind:open. |
| 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 |
| title | `string` | no |  | Trigger label text (used by the default trigger) |
| 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)