collapsible

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/collapsible/Collapsible.astro directly.
3/**
4 * @component Collapsible
5 * @title Collapsible
6 * @description An interactive component that expands and collapses content sections.
7 *
8 * @preview
9 *
10 * <Collapsible class="w-[350px] flex flex-col gap-2">
11 *   <div class="flex items-center justify-between gap-4 px-4">
12 *     <span class="text-sm font-semibold">@thomkrupa starred 3 repositories</span>
13 *     <CollapsibleTrigger asChild>
14 *       <Button variant="ghost" size="icon" class="size-8">
15 *         <ChevronsUpDownIcon class="size-4" />
16 *         <span class="sr-only">Toggle</span>
17 *       </Button>
18 *     </CollapsibleTrigger>
19 *   </div>
20 *   <div class="rounded-md border px-4 py-2 font-mono text-sm">@data-slot/collapsible</div>
21 *   <CollapsibleContent animation="slide" class="flex flex-col gap-2">
22 *     <div class="rounded-md border px-4 py-2 font-mono text-sm">@bejamas/ui</div>
23 *     <div class="rounded-md border px-4 py-2 font-mono text-sm">@astrojs/astro</div>
24 *   </CollapsibleContent>
25 * </Collapsible>
26 *
27 * @usage
28 *
29 * ```astro nocollapse
30 * ---
31 * import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@bejamas/ui/components/collapsible';
32 * import { Button } from '@bejamas/ui/components/button';
33 * ---
34 *
35 * <Collapsible>
36 *   <CollapsibleTrigger>
37 *     <Button variant="ghost">Toggle</Button>
38 *   </CollapsibleTrigger>
39 *   <CollapsibleContent animation="slide">
40 *     Hidden content here
41 *   </CollapsibleContent>
42 * </Collapsible>
43 * ```
44 *
45 * @api
46 *
47 * ### Props
48 *
49 * | Prop | Element | Values | Default |
50 * |------|---------|--------|---------|
51 * | `open` | collapsible | `boolean` | `false` |
52 * | `hiddenUntilFound` | collapsible | `boolean` | `false` |
53 * | `animation` | collapsible-content | `none`, `slide` | `none` |
54 *
55 * `slide` uses `--collapsible-panel-height` for smooth height transitions.
56 *
57 * ### Events
58 *
59 * The collapsible emits custom events that you can listen to:
60 *
61 * | Event | Detail | Description |
62 * |-------|--------|-------------|
63 * | `collapsible:change` | `{ open: boolean }` | Fired when the open state changes |
64 *
65 * ```astro nocollapse
66 * <Collapsible id="my-collapsible">
67 *   <CollapsibleTrigger>Toggle</CollapsibleTrigger>
68 *   <CollapsibleContent>Hidden content</CollapsibleContent>
69 * </Collapsible>
70 * ```
71 *
72 * ```js nocollapse
73 *   const collapsible = document.getElementById('my-collapsible');
74 *
75// … truncated