@cl-light-ds/ui 0.1.0

package/src/components/collapsible/Collapsible.astro

@@ -0,0 +1,202 @@
+---
+/**
+ * @component Collapsible
+ * @title Collapsible
+ * @description An interactive component that expands and collapses content sections.
+ *
+ * @preview
+ *
+ * <Collapsible class="w-[350px] flex flex-col gap-2">
+ *   <div class="flex items-center justify-between gap-4 px-4">
+ *     <span class="text-sm font-semibold">@thomkrupa starred 3 repositories</span>
+ *     <CollapsibleTrigger asChild>
+ *       <Button variant="ghost" size="icon" class="size-8">
+ *         <ChevronsUpDownIcon class="size-4" />
+ *         <span class="sr-only">Toggle</span>
+ *       </Button>
+ *     </CollapsibleTrigger>
+ *   </div>
+ *   <div class="rounded-md border px-4 py-2 font-mono text-sm">@data-slot/collapsible</div>
+ *   <CollapsibleContent animation="slide" class="flex flex-col gap-2">
+ *     <div class="rounded-md border px-4 py-2 font-mono text-sm">@bejamas/ui</div>
+ *     <div class="rounded-md border px-4 py-2 font-mono text-sm">@astrojs/astro</div>
+ *   </CollapsibleContent>
+ * </Collapsible>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@bejamas/ui/components/collapsible';
+ * import { Button } from '@bejamas/ui/components/button';
+ * ---
+ *
+ * <Collapsible>
+ *   <CollapsibleTrigger>
+ *     <Button variant="ghost">Toggle</Button>
+ *   </CollapsibleTrigger>
+ *   <CollapsibleContent animation="slide">
+ *     Hidden content here
+ *   </CollapsibleContent>
+ * </Collapsible>
+ * ```
+ *
+ * @api
+ *
+ * ### Props
+ *
+ * | Prop | Element | Values | Default |
+ * |------|---------|--------|---------|
+ * | `open` | collapsible | `boolean` | `false` |
+ * | `hiddenUntilFound` | collapsible | `boolean` | `false` |
+ * | `animation` | collapsible-content | `none`, `slide` | `none` |
+ *
+ * `slide` uses `--collapsible-panel-height` for smooth height transitions.
+ *
+ * ### Events
+ *
+ * The collapsible emits custom events that you can listen to:
+ *
+ * | Event | Detail | Description |
+ * |-------|--------|-------------|
+ * | `collapsible:change` | `{ open: boolean }` | Fired when the open state changes |
+ *
+ * ```astro nocollapse
+ * <Collapsible id="my-collapsible">
+ *   <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+ *   <CollapsibleContent>Hidden content</CollapsibleContent>
+ * </Collapsible>
+ * ```
+ *
+ * ```js nocollapse
+ *   const collapsible = document.getElementById('my-collapsible');
+ *
+ *   collapsible.addEventListener('collapsible:change', (e) => {
+ *     console.log('Is open:', e.detail.open);
+ *   });
+ * ```
+ *
+ * ### Programmatic Control
+ *
+ * You can control the collapsible programmatically by dispatching a `collapsible:set` event:
+ *
+ * ```js nocollapse
+ * const collapsible = document.getElementById('my-collapsible');
+ *
+ * // Open the collapsible
+ * collapsible.dispatchEvent(new CustomEvent('collapsible:set', {
+ *   detail: { open: true }
+ * }));
+ *
+ * // Close the collapsible
+ * collapsible.dispatchEvent(new CustomEvent('collapsible:set', {
+ *   detail: { open: false }
+ * }));
+ * ```
+ *
+ * ### Data Attributes
+ *
+ * The collapsible sets these data attributes that you can use for styling or querying state:
+ *
+ * | Attribute | Element | Description |
+ * |-----------|---------|-------------|
+ * | `data-state` | collapsible, collapsible-content | Current state (`open` or `closed`) |
+ * | `data-hidden-until-found` | collapsible | Enables `hidden="until-found"` when closed |
+ * | `data-starting-style` | collapsible-content | Added while enter transition styles are applied |
+ * | `data-ending-style` | collapsible-content | Added while exit transition styles are applied |
+ *
+ * ### CSS Variables
+ *
+ * The collapsible content exposes size variables for dimension animations:
+ *
+ * | Variable | Element | Description |
+ * |----------|---------|-------------|
+ * | `--collapsible-panel-height` | collapsible-content | Measured panel height |
+ * | `--collapsible-panel-width` | collapsible-content | Measured panel width |
+ *
+ * @examples
+ *
+ * ### Default open
+ *
+ * <Collapsible open class="w-[350px] flex flex-col gap-2">
+ *   <div class="flex items-center justify-between gap-4 px-4">
+ *     <span class="text-sm font-semibold">Expanded by default</span>
+ *     <CollapsibleTrigger asChild>
+ *       <Button variant="ghost" size="icon" class="size-8">
+ *         <ChevronsUpDownIcon class="size-4" />
+ *         <span class="sr-only">Toggle</span>
+ *       </Button>
+ *     </CollapsibleTrigger>
+ *   </div>
+ *   <CollapsibleContent class="flex flex-col gap-2">
+ *     <div class="rounded-md border px-4 py-2 font-mono text-sm">This content is visible by default</div>
+ *   </CollapsibleContent>
+ * </Collapsible>
+ *
+ * ### Animated content
+ *
+ * <Collapsible class="w-[350px] flex flex-col gap-2">
+ *   <CollapsibleTrigger asChild>
+ *     <Button variant="outline">Toggle with slide</Button>
+ *   </CollapsibleTrigger>
+ *   <CollapsibleContent animation="slide" class="pt-2">
+ *     <div class="rounded-md border px-4 py-2 text-sm">
+ *       This content animates panel height using CSS variables.
+ *     </div>
+ *   </CollapsibleContent>
+ * </Collapsible>
+ *
+ * ### Find-in-page support
+ *
+ * <Collapsible hiddenUntilFound class="w-[350px] flex flex-col gap-2">
+ *   <CollapsibleTrigger asChild>
+ *     <Button variant="outline">Toggle hidden-until-found content</Button>
+ *   </CollapsibleTrigger>
+ *   <CollapsibleContent class="pt-2">
+ *     <div class="rounded-md border px-4 py-2 text-sm">
+ *       Search this sentence with browser find to auto-expand.
+ *     </div>
+ *   </CollapsibleContent>
+ * </Collapsible>
+ *
+ */
+
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+  open?: boolean;
+  hiddenUntilFound?: boolean;
+}
+
+const {
+  class: className = "",
+  open = false,
+  hiddenUntilFound = false,
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="collapsible"
+  data-state={open ? "open" : "closed"}
+  data-default-open={open ? true : undefined}
+  data-hidden-until-found={hiddenUntilFound ? "" : undefined}
+  class={cn(
+    "",
+    "group/collapsible data-[state=closed]:[&_[data-slot=collapsible-content]]:hidden",
+    className,
+  )}
+>
+  <slot />
+</div>
+
+<script>
+  import { createCollapsible } from "@data-slot/collapsible";
+
+  document.querySelectorAll<HTMLElement>('[data-slot="collapsible"]').forEach((el) => {
+    createCollapsible(el);
+  });
+</script>

package/src/components/collapsible/CollapsibleContent.astro

@@ -0,0 +1,36 @@
+---
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends VariantProps<typeof collapsibleContentVariants>, HTMLAttributes<"div"> {
+  class?: string;
+}
+
+export const collapsibleContentVariants = cva("overflow-hidden", {
+  variants: {
+    animation: {
+      none: "",
+      slide:
+        "h-(--collapsible-panel-height) transition-[height] duration-200 ease-out motion-reduce:transition-none",
+    },
+  },
+  defaultVariants: {
+    animation: "none",
+  },
+});
+
+const {
+  class: className = "",
+  animation = "none",
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="collapsible-content"
+  class={cn("", collapsibleContentVariants({ animation }), className)}
+>
+  <slot />
+</div>

package/src/components/collapsible/CollapsibleTrigger.astro

@@ -0,0 +1,34 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"button"> {
+  class?: string;
+  /** Radix-like: render wrapper so the child can be the interactive element */
+  asChild?: boolean;
+}
+
+const {
+  class: className = "",
+  asChild = false,
+  type = "button",
+  ...rest
+} = Astro.props as Props;
+---
+
+{
+  asChild ? (
+    <div data-slot="collapsible-trigger" data-as-child class={cn("font-semibold", className)}>
+      <slot />
+    </div>
+  ) : (
+    <button
+      {...rest}
+      type={type}
+      data-slot="collapsible-trigger"
+      class={cn("font-semibold", className)}
+    >
+      <slot />
+    </button>
+  )
+}

package/src/components/collapsible/index.ts

@@ -0,0 +1,4 @@
+export { default as Collapsible } from "./Collapsible.astro";
+export { default as CollapsibleTrigger } from "./CollapsibleTrigger.astro";
+export { default as CollapsibleContent } from "./CollapsibleContent.astro";
+export { collapsibleContentVariants } from "./CollapsibleContent.astro";

package/src/components/combobox/CHANGELOG.md

@@ -0,0 +1,27 @@
+# Changelog
+
+All notable changes to the `Combobox` component family (`Combobox`, `ComboboxInput`, `ComboboxContent`, `ComboboxList`, `ComboboxItem`, `ComboboxGroup`, `ComboboxLabel`, `ComboboxSeparator`, `ComboboxEmpty`, `ComboboxTrigger`, `ComboboxValue`) are documented in this file.
+
+## 2026-09-08 — Figma alignment (ClickLearn Lightning Design Library, node `5455-12863`)
+
+Styling-only pass — no props, components, or behavior were added or removed. The implementation (including the shared `InputGroup`/`InputGroupInput` it delegates trigger styling to) was already close to Figma; this fixed the remaining concrete mismatches found by comparing computed styles against the Figma spec.
+
+### Fixed
+
+- `ComboboxContent` (popover): computed border-radius was rendering at 8px instead of Figma's 6px, because the class string set both `rounded-md` and a later, conflicting `rounded-lg` — removed the erroneous `rounded-lg`.
+- `ComboboxItem`: radius was `rounded-sm` (4px); Figma specifies `rounded-lg` (8px) for items.
+- `ComboboxLabel` (group label, e.g. "Frontend"/"Backend"): was missing `font-medium` — Figma's group label is medium (500) weight, not the browser default.
+- `ComboboxList`: removed a duplicate, malformed `max-h-[...]` utility (`calc(--spacing(72)---spacing(9))` — invalid calc syntax) that was redundant with the correct `max-h-[min(18rem,calc(var(--available-height)-var(--anchor-height)))]` already present later in the same class string.
+
+### Added
+
+- `@figmaUrl` JSDoc tag on `Combobox.astro` (previously had none).
+
+### Changed (docs only)
+
+- Removed the "Sizes" preview section from the storybook page (`apps/web/.../_sections/combobox.astro`), since Figma has no distinct size variants for this component and showcasing one there implied it was a designed feature. The underlying `size` prop on `ComboboxInput` itself (`"sm" | "default" | "lg"`, delegated to `InputGroup`) was **not** removed — it's real, pre-existing functionality shared with other inputs, just no longer given its own demo/prop-table framing as a Figma-specified variant.
+
+### Notes
+
+- Figma's trigger box (border, radius, shadow, Default/Hover/Focus/Invalid/Disabled states), item hover highlight (`bg-background-hover`), and the selected-item checkmark visibility already matched exactly — verified via computed styles in the browser, not just source reading.
+- No new props/components were introduced, per explicit instruction — this was a pure token/styling correction pass.

package/src/components/combobox/Combobox.astro

@@ -0,0 +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>