combobox

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/combobox/Combobox.astro directly.
3/**
4 * @component Combobox
5 * @title Combobox
6 * @description A searchable dropdown (autocomplete) that lets users filter and select from a list of options with full keyboard navigation and accessibility support.
7 *
8 * @preview
9 * <Combobox class="w-[200px]">
10 *   <ComboboxInput placeholder="Select framework..." showClear />
11 *   <ComboboxContent>
12 *     <ComboboxList>
13 *       <ComboboxEmpty>No results found.</ComboboxEmpty>
14 *       <ComboboxItem value="astro">Astro</ComboboxItem>
15 *       <ComboboxItem value="next">Next.js</ComboboxItem>
16 *       <ComboboxItem value="nuxt">Nuxt</ComboboxItem>
17 *       <ComboboxItem value="remix">Remix</ComboboxItem>
18 *       <ComboboxItem value="svelte">SvelteKit</ComboboxItem>
19 *     </ComboboxList>
20 *   </ComboboxContent>
21 * </Combobox>
22 *
23 * @usage
24 *
25 * ```astro nocollapse
26 * ---
27 * import {
28 *   Combobox,
29 *   ComboboxInput,
30 *   ComboboxContent,
31 *   ComboboxList,
32 *   ComboboxItem,
33 *   ComboboxEmpty,
34 *   ComboboxGroup,
35 *   ComboboxLabel,
36 *   ComboboxSeparator,
37 * } from '@bejamas/ui/components/combobox';
38 * ---
39 *
40 * <Combobox name="framework">
41 *   <ComboboxInput placeholder="Select framework..." />
42 *   <ComboboxContent>
43 *     <ComboboxList>
44 *       <ComboboxEmpty>No results found.</ComboboxEmpty>
45 *       <ComboboxItem value="astro">Astro</ComboboxItem>
46 *       <ComboboxItem value="next">Next.js</ComboboxItem>
47 *     </ComboboxList>
48 *   </ComboboxContent>
49 * </Combobox>
50 * ```
51 *
52 * @api
53 *
54 * ### Events
55 *
56 * The combobox emits custom events that you can listen to:
57 *
58 * | Event | Detail | Description |
59 * |-------|--------|-------------|
60 * | `combobox:change` | `{ value: string \| null }` | Fired when a new value is selected |
61 * | `combobox:open-change` | `{ open: boolean }` | Fired when the dropdown opens or closes |
62 * | `combobox:input-change` | `{ inputValue: string }` | Fired when the user types in the input |
63 *
64 * ```astro nocollapse
65 * <Combobox id="my-combobox">
66 *   <ComboboxInput placeholder="Search..." />
67 *   <ComboboxContent>
68 *     <ComboboxList>
69 *       <ComboboxItem value="option1">Option 1</ComboboxItem>
70 *       <ComboboxItem value="option2">Option 2</ComboboxItem>
71 *     </ComboboxList>
72 *   </ComboboxContent>
73 * </Combobox>
74 * ```
75 *
76 * ```js nocollapse
77 *   const combobox = document.getElementById('my-combobox');
78 *
79// … truncated