accordion

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/accordion/Accordion.astro directly.
3/**
4 * @component Accordion
5 * @title Accordion
6 * @description Vertically stacked collapsible sections that let users show and hide content panels.
7 * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/BejamasUI---Design-System?node-id=2589-14086&t=YFStJ3V8fXEO8QD8-4
8 *
9 * @preview
10 *
11 * <Accordion class="w-full max-w-[420px] self-start mt-10" defaultValue="accordion-item-1">
12 *   <AccordionItem value="accordion-item-1">
13 *     <AccordionTrigger>
14 *       Is it accessible?
15 *     </AccordionTrigger>
16 *     <AccordionContent>
17 *       Yes. It adheres to WAI-ARIA design patterns.
18 *     </AccordionContent>
19 *   </AccordionItem>
20 *   <AccordionItem value="accordion-item-2">
21 *     <AccordionTrigger>
22 *       Can I customize the icon?
23 *     </AccordionTrigger>
24 *     <AccordionContent>
25 *       Yes you can.
26 *     </AccordionContent>
27 *   </AccordionItem>
28 * </Accordion>
29 *
30 * @usage
31 *
32 * ```astro nocollapse
33 * ---
34 * import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@bejamas/ui/components/accordion';
35 * ---
36 *
37 * <Accordion class="w-full max-w-[420px] self-start" defaultValue="accordion-item-1">
38 *   <AccordionItem value="accordion-item-1">
39 *     <AccordionTrigger>
40 *       Is it accessible?
41 *     </AccordionTrigger>
42 *     <AccordionContent>
43 *       Yes. It adheres to WAI-ARIA design patterns.
44 *     </AccordionContent>
45 *   </AccordionItem>
46 * </Accordion>
47 * ```
48 *
49 * @api
50 *
51 * ### Events
52 *
53 * The accordion emits custom events that you can listen to:
54 *
55 * | Event | Detail | Description |
56 * |-------|--------|-------------|
57 * | `accordion:change` | `{ value: string[] }` | Fired when expanded items change |
58 *
59 * ```astro nocollapse
60 * <Accordion id="my-accordion">
61 *   <AccordionItem value="item-1">
62 *     <AccordionTrigger>Item 1</AccordionTrigger>
63 *     <AccordionContent>Content 1</AccordionContent>
64 *   </AccordionItem>
65 * </Accordion>
66 * ```
67 *
68 * ```js nocollapse
69 *   const accordion = document.getElementById('my-accordion');
70 *
71 *   accordion.addEventListener('accordion:change', (e) => {
72 *     console.log('Expanded items:', e.detail.value);
73 *   });
74 * ```
75 *
76 * ### Programmatic Control
77 *
78 * You can control the accordion programmatically by dispatching an `accordion:set` event:
79 *
80 * ```js nocollapse
81 * const accordion = document.getElementById('my-accordion');
82 *
83// … truncated