@cl-light-ds/ui 0.2.0 → 0.3.0

package/src/components/combobox/Combobox.astro

@@ -1,365 +1,365 @@
----
-/**
- * @component Combobox
- * @title Combobox
- * @description A searchable dropdown (autocomplete) that lets users filter and select from a list of options with full keyboard navigation and accessibility support.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=5455-12863
- *
- * @preview
- * <Combobox class="w-[200px]">
- *   <ComboboxInput placeholder="Select framework..." showClear />
- *   <ComboboxContent>
- *     <ComboboxList>
- *       <ComboboxEmpty>No results found.</ComboboxEmpty>
- *       <ComboboxItem value="astro">Astro</ComboboxItem>
- *       <ComboboxItem value="next">Next.js</ComboboxItem>
- *       <ComboboxItem value="nuxt">Nuxt</ComboboxItem>
- *       <ComboboxItem value="remix">Remix</ComboboxItem>
- *       <ComboboxItem value="svelte">SvelteKit</ComboboxItem>
- *     </ComboboxList>
- *   </ComboboxContent>
- * </Combobox>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import {
- *   Combobox,
- *   ComboboxInput,
- *   ComboboxContent,
- *   ComboboxList,
- *   ComboboxItem,
- *   ComboboxEmpty,
- *   ComboboxGroup,
- *   ComboboxLabel,
- *   ComboboxSeparator,
- * } from '@bejamas/ui/components/combobox';
- * ---
- *
- * <Combobox name="framework">
- *   <ComboboxInput placeholder="Select framework..." />
- *   <ComboboxContent>
- *     <ComboboxList>
- *       <ComboboxEmpty>No results found.</ComboboxEmpty>
- *       <ComboboxItem value="astro">Astro</ComboboxItem>
- *       <ComboboxItem value="next">Next.js</ComboboxItem>
- *     </ComboboxList>
- *   </ComboboxContent>
- * </Combobox>
- * ```
- *
- * @api
- *
- * ### Events
- *
- * The combobox emits custom events that you can listen to:
- *
- * | Event | Detail | Description |
- * |-------|--------|-------------|
- * | `combobox:change` | `{ value: string \| null }` | Fired when a new value is selected |
- * | `combobox:open-change` | `{ open: boolean }` | Fired when the dropdown opens or closes |
- * | `combobox:input-change` | `{ inputValue: string }` | Fired when the user types in the input |
- *
- * ```astro nocollapse
- * <Combobox id="my-combobox">
- *   <ComboboxInput placeholder="Search..." />
- *   <ComboboxContent>
- *     <ComboboxList>
- *       <ComboboxItem value="option1">Option 1</ComboboxItem>
- *       <ComboboxItem value="option2">Option 2</ComboboxItem>
- *     </ComboboxList>
- *   </ComboboxContent>
- * </Combobox>
- * ```
- *
- * ```js nocollapse
- *   const combobox = document.getElementById('my-combobox');
- *
- *   combobox.addEventListener('combobox:change', (e) => {
- *     console.log('Selected value:', e.detail.value);
- *   });
- *
- *   combobox.addEventListener('combobox:input-change', (e) => {
- *     console.log('Input text:', e.detail.inputValue);
- *   });
- * ```
- *
- * ### Programmatic Control
- *
- * You can control the combobox programmatically by dispatching a `combobox:set` event:
- *
- * ```js nocollapse
- * const combobox = document.getElementById('my-combobox');
- *
- * // Set a specific value
- * combobox.dispatchEvent(new CustomEvent('combobox:set', {
- *   detail: { value: 'option2' }
- * }));
- *
- * // Clear the value
- * combobox.dispatchEvent(new CustomEvent('combobox:set', {
- *   detail: { value: null }
- * }));
- *
- * // Open the dropdown
- * combobox.dispatchEvent(new CustomEvent('combobox:set', {
- *   detail: { open: true }
- * }));
- *
- * // Set the input text
- * combobox.dispatchEvent(new CustomEvent('combobox:set', {
- *   detail: { inputValue: 'search term' }
- * }));
- *
- * // Custom display text for selected value
- * // itemToStringValue — (item: HTMLElement | null, value: string | null) => string
- * // Controls what text appears in the input after selection.
- * // Useful when items contain rich content (icons, descriptions).
- * combobox.dispatchEvent(new CustomEvent('combobox:set', {
- *   detail: {
- *     itemToStringValue: (item, value) => value ? `TZ: ${value}` : ''
- *   }
- * }));
- * ```
- *
- * ### Data Attributes
- *
- * The combobox sets these data attributes that you can use for styling or querying state:
- *
- * | Attribute | Element | Description |
- * |-----------|---------|-------------|
- * | `data-open` | combobox, combobox-content | Present when the popup is open |
- * | `data-closed` | combobox, combobox-content | Present when the popup is closed |
- * | `data-side` | combobox-content | Resolved popup side |
- * | `data-align` | combobox-content | Resolved popup alignment |
- * | `data-value` | combobox | Currently selected value |
- * | `data-selected` | combobox-item | Present when item is selected |
- * | `data-highlighted` | combobox-item | Present when item is focused/highlighted |
- * | `data-disabled` | combobox, combobox-item | Present when disabled |
- * | `data-empty` | combobox-content | Present when no items match the filter |
- *
- * ### Positioning
- *
- * Placement options are configured on `ComboboxContent`:
- *
- * ```astro nocollapse nopreview
- * <Combobox>
- *   <ComboboxInput />
- *   <ComboboxContent side="top" align="start" sideOffset={8}>
- *     ...
- *   </ComboboxContent>
- * </Combobox>
- * ```
- *
- * @examples
- *
- * ### Clear Button
- *
- * Use the `showClear` prop to show a clear button in the input.
- *
- * <Combobox class="w-[200px]">
- *   <ComboboxInput placeholder="Select framework..." showClear />
- *   <ComboboxContent>
- *     <ComboboxList>
- *       <ComboboxEmpty>No results found.</ComboboxEmpty>
- *       <ComboboxItem value="astro">Astro</ComboboxItem>
- *       <ComboboxItem value="next">Next.js</ComboboxItem>
- *       <ComboboxItem value="nuxt">Nuxt</ComboboxItem>
- *       <ComboboxItem value="remix">Remix</ComboboxItem>
- *     </ComboboxList>
- *   </ComboboxContent>
- * </Combobox>
- *
- * ### Sizing
- *
- * Use the `size` prop on `ComboboxInput` to match button/input sizing.
- *
- * <div class="grid w-full max-w-sm gap-3">
- *   <Combobox>
- *     <ComboboxInput size="sm" placeholder="Small (h-8)" />
- *     <ComboboxContent>
- *       <ComboboxList>
- *         <ComboboxItem value="astro-sm">Astro</ComboboxItem>
- *         <ComboboxItem value="next-sm">Next.js</ComboboxItem>
- *       </ComboboxList>
- *     </ComboboxContent>
- *   </Combobox>
- *   <Combobox>
- *     <ComboboxInput placeholder="Default (h-9)" />
- *     <ComboboxContent>
- *       <ComboboxList>
- *         <ComboboxItem value="astro-default">Astro</ComboboxItem>
- *         <ComboboxItem value="next-default">Next.js</ComboboxItem>
- *       </ComboboxList>
- *     </ComboboxContent>
- *   </Combobox>
- *   <Combobox>
- *     <ComboboxInput size="lg" placeholder="Large (h-10)" />
- *     <ComboboxContent>
- *       <ComboboxList>
- *         <ComboboxItem value="astro-lg">Astro</ComboboxItem>
- *         <ComboboxItem value="next-lg">Next.js</ComboboxItem>
- *       </ComboboxList>
- *     </ComboboxContent>
- *   </Combobox>
- * </div>
- *
- * ### Groups
- *
- * Use the `ComboboxGroup` and `ComboboxLabel` to group items and add a label to the group.
- *
- * <Combobox class="w-[200px]">
- *   <ComboboxInput placeholder="Select framework..." />
- *   <ComboboxContent>
- *     <ComboboxList>
- *       <ComboboxEmpty>No results found.</ComboboxEmpty>
- *       <ComboboxGroup>
- *         <ComboboxLabel>Frontend</ComboboxLabel>
- *         <ComboboxItem value="astro">Astro</ComboboxItem>
- *         <ComboboxItem value="next">Next.js</ComboboxItem>
- *         <ComboboxItem value="nuxt">Nuxt</ComboboxItem>
- *       </ComboboxGroup>
- *       <ComboboxSeparator />
- *       <ComboboxGroup>
- *         <ComboboxLabel>Backend</ComboboxLabel>
- *         <ComboboxItem value="express">Express</ComboboxItem>
- *         <ComboboxItem value="hono">Hono</ComboboxItem>
- *       </ComboboxGroup>
- *     </ComboboxList>
- *   </ComboboxContent>
- * </Combobox>
- *
- * ### Invalid
- *
- * Use the `aria-invalid="true"` attribute on the `ComboboxInput` to mark the combobox as invalid.
- *
- * <Combobox class="w-[200px]">
- *   <ComboboxInput placeholder="Select framework..." aria-invalid="true" />
- *   <ComboboxContent>
- *     <ComboboxList>
- *       <ComboboxItem value="astro">Astro</ComboboxItem>
- *       <ComboboxItem value="next">Next.js</ComboboxItem>
- *     </ComboboxList>
- *   </ComboboxContent>
- * </Combobox>
- *
- * ### Disabled
- *
- * Use the `disabled` prop to disable the combobox.
- *
- * <Combobox disabled class="w-[200px]">
- *   <ComboboxInput placeholder="Select framework..." disabled />
- *   <ComboboxContent>
- *     <ComboboxList>
- *       <ComboboxItem value="astro">Astro</ComboboxItem>
- *       <ComboboxItem value="next">Next.js</ComboboxItem>
- *     </ComboboxList>
- *   </ComboboxContent>
- * </Combobox>
- *
- * ### Auto Highlight
- *
- * Use the `autoHighlight` prop to automatically highlight the first item on filter.
- *
- * <Combobox autoHighlight class="w-[200px]">
- *   <ComboboxInput placeholder="Start typing..." />
- *   <ComboboxContent>
- *     <ComboboxList>
- *       <ComboboxEmpty>No results found.</ComboboxEmpty>
- *       <ComboboxItem value="astro">Astro</ComboboxItem>
- *       <ComboboxItem value="next">Next.js</ComboboxItem>
- *       <ComboboxItem value="nuxt">Nuxt</ComboboxItem>
- *       <ComboboxItem value="remix">Remix</ComboboxItem>
- *     </ComboboxList>
- *   </ComboboxContent>
- * </Combobox>
- *
- * ### Search in Popup
- *
- * You can trigger the combobox from a button or any other component by using the render prop. Move the `ComboboxInput` inside the `ComboboxContent`.
- *
- * <Combobox class="w-[200px]">
- *   <ComboboxTrigger>
- *     <ComboboxValue placeholder="Select country..." />
- *   </ComboboxTrigger>
- *   <ComboboxContent>
- *     <ComboboxInput showTrigger={false} placeholder="Search countries..." />
- *     <ComboboxList>
- *       <ComboboxEmpty>No countries found.</ComboboxEmpty>
- *       <ComboboxItem value="brazil" label="Brazil">Brazil</ComboboxItem>
- *       <ComboboxItem value="canada" label="Canada">Canada</ComboboxItem>
- *       <ComboboxItem value="france" label="France">France</ComboboxItem>
- *       <ComboboxItem value="germany" label="Germany">Germany</ComboboxItem>
- *       <ComboboxItem value="japan" label="Japan">Japan</ComboboxItem>
- *     </ComboboxList>
- *   </ComboboxContent>
- * </Combobox>
- */
-
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"div"> {
-  class?: string;
-  name?: string;
-  defaultValue?: string;
-  placeholder?: string;
-  disabled?: boolean;
-  required?: boolean;
-  openOnFocus?: boolean;
-  autoHighlight?: boolean;
-}
-
-const {
-  class: className = "",
-  name,
-  defaultValue,
-  placeholder,
-  disabled = false,
-  required = false,
-  openOnFocus,
-  autoHighlight,
-  ...rest
-} = Astro.props as Props;
----
-
-<div
-  {...rest}
-  data-slot="combobox"
-  data-name={name}
-  data-default-value={defaultValue}
-  data-placeholder={placeholder}
-  data-disabled={disabled ? "" : undefined}
-  data-required={required ? "" : undefined}
-  data-open-on-focus={openOnFocus !== undefined
-    ? String(openOnFocus)
-    : undefined}
-  data-auto-highlight={autoHighlight !== undefined
-    ? String(autoHighlight)
-    : undefined}
-  class={cn("", "group/combobox relative inline-block", className)}
->
-  <slot />
-</div>
-
-<script>
-  import { createCombobox } from "@data-slot/combobox";
-
-  document.querySelectorAll('[data-slot="combobox"]').forEach((el) => {
-    createCombobox(el);
-  });
-
-  // Clear button delegation
-  document.addEventListener("click", (e) => {
-    const target = e.target as Element;
-    const clear = target.closest('[data-slot="combobox-clear"]');
-    if (!clear) return;
-    const root = clear.closest('[data-slot="combobox"]');
-    if (root) {
-      root.dispatchEvent(
-        new CustomEvent("combobox:set", { detail: { value: null } }),
-      );
-    }
-  });
-</script>
+---
+/**
+ * @component Combobox
+ * @title Combobox
+ * @description A searchable dropdown (autocomplete) that lets users filter and select from a list of options with full keyboard navigation and accessibility support.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=5455-12863
+ *
+ * @preview
+ * <Combobox class="w-[200px]">
+ *   <ComboboxInput placeholder="Select framework..." showClear />
+ *   <ComboboxContent>
+ *     <ComboboxList>
+ *       <ComboboxEmpty>No results found.</ComboboxEmpty>
+ *       <ComboboxItem value="astro">Astro</ComboboxItem>
+ *       <ComboboxItem value="next">Next.js</ComboboxItem>
+ *       <ComboboxItem value="nuxt">Nuxt</ComboboxItem>
+ *       <ComboboxItem value="remix">Remix</ComboboxItem>
+ *       <ComboboxItem value="svelte">SvelteKit</ComboboxItem>
+ *     </ComboboxList>
+ *   </ComboboxContent>
+ * </Combobox>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import {
+ *   Combobox,
+ *   ComboboxInput,
+ *   ComboboxContent,
+ *   ComboboxList,
+ *   ComboboxItem,
+ *   ComboboxEmpty,
+ *   ComboboxGroup,
+ *   ComboboxLabel,
+ *   ComboboxSeparator,
+ * } from '@bejamas/ui/components/combobox';
+ * ---
+ *
+ * <Combobox name="framework">
+ *   <ComboboxInput placeholder="Select framework..." />
+ *   <ComboboxContent>
+ *     <ComboboxList>
+ *       <ComboboxEmpty>No results found.</ComboboxEmpty>
+ *       <ComboboxItem value="astro">Astro</ComboboxItem>
+ *       <ComboboxItem value="next">Next.js</ComboboxItem>
+ *     </ComboboxList>
+ *   </ComboboxContent>
+ * </Combobox>
+ * ```
+ *
+ * @api
+ *
+ * ### Events
+ *
+ * The combobox emits custom events that you can listen to:
+ *
+ * | Event | Detail | Description |
+ * |-------|--------|-------------|
+ * | `combobox:change` | `{ value: string \| null }` | Fired when a new value is selected |
+ * | `combobox:open-change` | `{ open: boolean }` | Fired when the dropdown opens or closes |
+ * | `combobox:input-change` | `{ inputValue: string }` | Fired when the user types in the input |
+ *
+ * ```astro nocollapse
+ * <Combobox id="my-combobox">
+ *   <ComboboxInput placeholder="Search..." />
+ *   <ComboboxContent>
+ *     <ComboboxList>
+ *       <ComboboxItem value="option1">Option 1</ComboboxItem>
+ *       <ComboboxItem value="option2">Option 2</ComboboxItem>
+ *     </ComboboxList>
+ *   </ComboboxContent>
+ * </Combobox>
+ * ```
+ *
+ * ```js nocollapse
+ *   const combobox = document.getElementById('my-combobox');
+ *
+ *   combobox.addEventListener('combobox:change', (e) => {
+ *     console.log('Selected value:', e.detail.value);
+ *   });
+ *
+ *   combobox.addEventListener('combobox:input-change', (e) => {
+ *     console.log('Input text:', e.detail.inputValue);
+ *   });
+ * ```
+ *
+ * ### Programmatic Control
+ *
+ * You can control the combobox programmatically by dispatching a `combobox:set` event:
+ *
+ * ```js nocollapse
+ * const combobox = document.getElementById('my-combobox');
+ *
+ * // Set a specific value
+ * combobox.dispatchEvent(new CustomEvent('combobox:set', {
+ *   detail: { value: 'option2' }
+ * }));
+ *
+ * // Clear the value
+ * combobox.dispatchEvent(new CustomEvent('combobox:set', {
+ *   detail: { value: null }
+ * }));
+ *
+ * // Open the dropdown
+ * combobox.dispatchEvent(new CustomEvent('combobox:set', {
+ *   detail: { open: true }
+ * }));
+ *
+ * // Set the input text
+ * combobox.dispatchEvent(new CustomEvent('combobox:set', {
+ *   detail: { inputValue: 'search term' }
+ * }));
+ *
+ * // Custom display text for selected value
+ * // itemToStringValue — (item: HTMLElement | null, value: string | null) => string
+ * // Controls what text appears in the input after selection.
+ * // Useful when items contain rich content (icons, descriptions).
+ * combobox.dispatchEvent(new CustomEvent('combobox:set', {
+ *   detail: {
+ *     itemToStringValue: (item, value) => value ? `TZ: ${value}` : ''
+ *   }
+ * }));
+ * ```
+ *
+ * ### Data Attributes
+ *
+ * The combobox sets these data attributes that you can use for styling or querying state:
+ *
+ * | Attribute | Element | Description |
+ * |-----------|---------|-------------|
+ * | `data-open` | combobox, combobox-content | Present when the popup is open |
+ * | `data-closed` | combobox, combobox-content | Present when the popup is closed |
+ * | `data-side` | combobox-content | Resolved popup side |
+ * | `data-align` | combobox-content | Resolved popup alignment |
+ * | `data-value` | combobox | Currently selected value |
+ * | `data-selected` | combobox-item | Present when item is selected |
+ * | `data-highlighted` | combobox-item | Present when item is focused/highlighted |
+ * | `data-disabled` | combobox, combobox-item | Present when disabled |
+ * | `data-empty` | combobox-content | Present when no items match the filter |
+ *
+ * ### Positioning
+ *
+ * Placement options are configured on `ComboboxContent`:
+ *
+ * ```astro nocollapse nopreview
+ * <Combobox>
+ *   <ComboboxInput />
+ *   <ComboboxContent side="top" align="start" sideOffset={8}>
+ *     ...
+ *   </ComboboxContent>
+ * </Combobox>
+ * ```
+ *
+ * @examples
+ *
+ * ### Clear Button
+ *
+ * Use the `showClear` prop to show a clear button in the input.
+ *
+ * <Combobox class="w-[200px]">
+ *   <ComboboxInput placeholder="Select framework..." showClear />
+ *   <ComboboxContent>
+ *     <ComboboxList>
+ *       <ComboboxEmpty>No results found.</ComboboxEmpty>
+ *       <ComboboxItem value="astro">Astro</ComboboxItem>
+ *       <ComboboxItem value="next">Next.js</ComboboxItem>
+ *       <ComboboxItem value="nuxt">Nuxt</ComboboxItem>
+ *       <ComboboxItem value="remix">Remix</ComboboxItem>
+ *     </ComboboxList>
+ *   </ComboboxContent>
+ * </Combobox>
+ *
+ * ### Sizing
+ *
+ * Use the `size` prop on `ComboboxInput` to match button/input sizing.
+ *
+ * <div class="grid w-full max-w-sm gap-3">
+ *   <Combobox>
+ *     <ComboboxInput size="sm" placeholder="Small (h-8)" />
+ *     <ComboboxContent>
+ *       <ComboboxList>
+ *         <ComboboxItem value="astro-sm">Astro</ComboboxItem>
+ *         <ComboboxItem value="next-sm">Next.js</ComboboxItem>
+ *       </ComboboxList>
+ *     </ComboboxContent>
+ *   </Combobox>
+ *   <Combobox>
+ *     <ComboboxInput placeholder="Default (h-9)" />
+ *     <ComboboxContent>
+ *       <ComboboxList>
+ *         <ComboboxItem value="astro-default">Astro</ComboboxItem>
+ *         <ComboboxItem value="next-default">Next.js</ComboboxItem>
+ *       </ComboboxList>
+ *     </ComboboxContent>
+ *   </Combobox>
+ *   <Combobox>
+ *     <ComboboxInput size="lg" placeholder="Large (h-10)" />
+ *     <ComboboxContent>
+ *       <ComboboxList>
+ *         <ComboboxItem value="astro-lg">Astro</ComboboxItem>
+ *         <ComboboxItem value="next-lg">Next.js</ComboboxItem>
+ *       </ComboboxList>
+ *     </ComboboxContent>
+ *   </Combobox>
+ * </div>
+ *
+ * ### Groups
+ *
+ * Use the `ComboboxGroup` and `ComboboxLabel` to group items and add a label to the group.
+ *
+ * <Combobox class="w-[200px]">
+ *   <ComboboxInput placeholder="Select framework..." />
+ *   <ComboboxContent>
+ *     <ComboboxList>
+ *       <ComboboxEmpty>No results found.</ComboboxEmpty>
+ *       <ComboboxGroup>
+ *         <ComboboxLabel>Frontend</ComboboxLabel>
+ *         <ComboboxItem value="astro">Astro</ComboboxItem>
+ *         <ComboboxItem value="next">Next.js</ComboboxItem>
+ *         <ComboboxItem value="nuxt">Nuxt</ComboboxItem>
+ *       </ComboboxGroup>
+ *       <ComboboxSeparator />
+ *       <ComboboxGroup>
+ *         <ComboboxLabel>Backend</ComboboxLabel>
+ *         <ComboboxItem value="express">Express</ComboboxItem>
+ *         <ComboboxItem value="hono">Hono</ComboboxItem>
+ *       </ComboboxGroup>
+ *     </ComboboxList>
+ *   </ComboboxContent>
+ * </Combobox>
+ *
+ * ### Invalid
+ *
+ * Use the `aria-invalid="true"` attribute on the `ComboboxInput` to mark the combobox as invalid.
+ *
+ * <Combobox class="w-[200px]">
+ *   <ComboboxInput placeholder="Select framework..." aria-invalid="true" />
+ *   <ComboboxContent>
+ *     <ComboboxList>
+ *       <ComboboxItem value="astro">Astro</ComboboxItem>
+ *       <ComboboxItem value="next">Next.js</ComboboxItem>
+ *     </ComboboxList>
+ *   </ComboboxContent>
+ * </Combobox>
+ *
+ * ### Disabled
+ *
+ * Use the `disabled` prop to disable the combobox.
+ *
+ * <Combobox disabled class="w-[200px]">
+ *   <ComboboxInput placeholder="Select framework..." disabled />
+ *   <ComboboxContent>
+ *     <ComboboxList>
+ *       <ComboboxItem value="astro">Astro</ComboboxItem>
+ *       <ComboboxItem value="next">Next.js</ComboboxItem>
+ *     </ComboboxList>
+ *   </ComboboxContent>
+ * </Combobox>
+ *
+ * ### Auto Highlight
+ *
+ * Use the `autoHighlight` prop to automatically highlight the first item on filter.
+ *
+ * <Combobox autoHighlight class="w-[200px]">
+ *   <ComboboxInput placeholder="Start typing..." />
+ *   <ComboboxContent>
+ *     <ComboboxList>
+ *       <ComboboxEmpty>No results found.</ComboboxEmpty>
+ *       <ComboboxItem value="astro">Astro</ComboboxItem>
+ *       <ComboboxItem value="next">Next.js</ComboboxItem>
+ *       <ComboboxItem value="nuxt">Nuxt</ComboboxItem>
+ *       <ComboboxItem value="remix">Remix</ComboboxItem>
+ *     </ComboboxList>
+ *   </ComboboxContent>
+ * </Combobox>
+ *
+ * ### Search in Popup
+ *
+ * You can trigger the combobox from a button or any other component by using the render prop. Move the `ComboboxInput` inside the `ComboboxContent`.
+ *
+ * <Combobox class="w-[200px]">
+ *   <ComboboxTrigger>
+ *     <ComboboxValue placeholder="Select country..." />
+ *   </ComboboxTrigger>
+ *   <ComboboxContent>
+ *     <ComboboxInput showTrigger={false} placeholder="Search countries..." />
+ *     <ComboboxList>
+ *       <ComboboxEmpty>No countries found.</ComboboxEmpty>
+ *       <ComboboxItem value="brazil" label="Brazil">Brazil</ComboboxItem>
+ *       <ComboboxItem value="canada" label="Canada">Canada</ComboboxItem>
+ *       <ComboboxItem value="france" label="France">France</ComboboxItem>
+ *       <ComboboxItem value="germany" label="Germany">Germany</ComboboxItem>
+ *       <ComboboxItem value="japan" label="Japan">Japan</ComboboxItem>
+ *     </ComboboxList>
+ *   </ComboboxContent>
+ * </Combobox>
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+  name?: string;
+  defaultValue?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  openOnFocus?: boolean;
+  autoHighlight?: boolean;
+}
+
+const {
+  class: className = "",
+  name,
+  defaultValue,
+  placeholder,
+  disabled = false,
+  required = false,
+  openOnFocus,
+  autoHighlight,
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="combobox"
+  data-name={name}
+  data-default-value={defaultValue}
+  data-placeholder={placeholder}
+  data-disabled={disabled ? "" : undefined}
+  data-required={required ? "" : undefined}
+  data-open-on-focus={openOnFocus !== undefined
+    ? String(openOnFocus)
+    : undefined}
+  data-auto-highlight={autoHighlight !== undefined
+    ? String(autoHighlight)
+    : undefined}
+  class={cn("", "group/combobox relative inline-block", className)}
+>
+  <slot />
+</div>
+
+<script>
+  import { createCombobox } from "@data-slot/combobox";
+
+  document.querySelectorAll('[data-slot="combobox"]').forEach((el) => {
+    createCombobox(el);
+  });
+
+  // Clear button delegation
+  document.addEventListener("click", (e) => {
+    const target = e.target as Element;
+    const clear = target.closest('[data-slot="combobox-clear"]');
+    if (!clear) return;
+    const root = clear.closest('[data-slot="combobox"]');
+    if (root) {
+      root.dispatchEvent(
+        new CustomEvent("combobox:set", { detail: { value: null } }),
+      );
+    }
+  });
+</script>