select

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/select/Select.astro directly.
3/**
4 * @component Select
5 * @title Select
6 * @description A dropdown control that lets users pick one option from a list with full keyboard navigation and accessibility support.
7 * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2549-18530&t=YFStJ3V8fXEO8QD8-4
8 *
9 * @preview
10 * <Select defaultValue="apple" class="w-[200px]">
11 *   <SelectTrigger>
12 *     <SelectValue placeholder="Select a fruit" />
13 *   </SelectTrigger>
14 *   <SelectContent>
15 *     <SelectItem value="apple">Apple</SelectItem>
16 *     <SelectItem value="banana">Banana</SelectItem>
17 *     <SelectItem value="cherry">Cherry</SelectItem>
18 *   </SelectContent>
19 * </Select>
20 *
21 * @usage
22 *
23 * ```astro nocollapse
24 * ---
25 * import {
26 *   Select,
27 *   SelectTrigger,
28 *   SelectValue,
29 *   SelectContent,
30 *   SelectItem,
31 *   SelectGroup,
32 *   SelectLabel,
33 *   SelectSeparator
34 * } from '@bejamas/ui/components/select';
35 * ---
36 *
37 * <Select name="fruit" defaultValue="apple">
38 *   <SelectTrigger>
39 *     <SelectValue placeholder="Select a fruit" />
40 *   </SelectTrigger>
41 *   <SelectContent>
42 *     <SelectItem value="apple">Apple</SelectItem>
43 *     <SelectItem value="banana">Banana</SelectItem>
44 *   </SelectContent>
45 * </Select>
46 * ```
47 *
48 * @api
49 *
50 * ### Events
51 *
52 * The select emits custom events that you can listen to:
53 *
54 * | Event | Detail | Description |
55 * |-------|--------|-------------|
56 * | `select:change` | `{ value: string }` | Fired when a new value is selected |
57 * | `select:open-change` | `{ open: boolean }` | Fired when the dropdown opens or closes |
58 *
59 * ```astro nocollapse console
60 * <Select id="my-select">
61 *   <SelectTrigger>
62 *     <SelectValue placeholder="Choose..." />
63 *   </SelectTrigger>
64 *   <SelectContent>
65 *     <SelectItem value="option1">Option 1</SelectItem>
66 *     <SelectItem value="option2">Option 2</SelectItem>
67 *   </SelectContent>
68 * </Select>
69 * ```
70 *
71 * ```js nocollapse
72 *   const select = document.getElementById('my-select');
73 *
74 *   select.addEventListener('select:change', (e) => {
75 *     console.log('Selected value:', e.detail.value);
76 *   });
77 *
78 *   select.addEventListener('select:open-change', (e) => {
79 *     console.log('Is open:', e.detail.open);
80 *   });
81 * ```
82 *
83 * ### Programmatic Control
84 *
85 * You can control the select programmatically by dispatching a `select:set` event:
86 *
87 * ```js nocollapse
88// … truncated