@cl-light-ds/ui 0.1.0 → 0.2.0

package/src/components/select/Select.astro

@@ -1,373 +1,373 @@
----
-/**
- * @component Select
- * @title Select
- * @description A dropdown control that lets users pick one option from a list with full keyboard navigation and accessibility support.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=2329-7946
- *
- * @preview
- * <Select defaultValue="apple" class="w-[200px]">
- *   <SelectTrigger>
- *     <SelectValue placeholder="Select a fruit" />
- *   </SelectTrigger>
- *   <SelectContent>
- *     <SelectItem value="apple">Apple</SelectItem>
- *     <SelectItem value="banana">Banana</SelectItem>
- *     <SelectItem value="cherry">Cherry</SelectItem>
- *   </SelectContent>
- * </Select>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import {
- *   Select,
- *   SelectTrigger,
- *   SelectValue,
- *   SelectContent,
- *   SelectItem,
- *   SelectGroup,
- *   SelectLabel,
- *   SelectSeparator
- * } from '@bejamas/ui/components/select';
- * ---
- *
- * <Select name="fruit" defaultValue="apple">
- *   <SelectTrigger>
- *     <SelectValue placeholder="Select a fruit" />
- *   </SelectTrigger>
- *   <SelectContent>
- *     <SelectItem value="apple">Apple</SelectItem>
- *     <SelectItem value="banana">Banana</SelectItem>
- *   </SelectContent>
- * </Select>
- * ```
- *
- * @api
- *
- * ### Props
- *
- * #### Select
- *
- * | Prop | Type | Default | Notes |
- * |------|------|---------|-------|
- * | `name` | `string` | - | Rendered as `data-name`; read by form submission helpers. |
- * | `defaultValue` | `string` | - | Initial selected value. |
- * | `placeholder` | `string` | - | Forwarded as `data-placeholder`; pair with `SelectValue`'s own `placeholder`. |
- * | `disabled` | `boolean` | `false` | Auto-synced to `SelectTrigger` at runtime — do not also pass `disabled` to `SelectTrigger`. |
- * | `required` | `boolean` | `false` | - |
- * | `size` | `"sm" \| "default" \| "lg"` | `"default"` | Auto-synced to `SelectTrigger` at runtime — set it here, not on `SelectTrigger`, unless you're using `SelectTrigger` standalone outside a `Select` wrapper. |
- *
- * #### SelectTrigger
- *
- * | Prop | Type | Default | Notes |
- * |------|------|---------|-------|
- * | `size` | `"sm" \| "default" \| "lg"` | `"default"` | Controls trigger height (32/36/40px). Overridden by the parent `Select`'s `size` once mounted. |
- * | `class` | `string` | - | - |
- *
- * #### SelectValue
- *
- * | Prop | Type | Default | Notes |
- * |------|------|---------|-------|
- * | `placeholder` | `string` | `""` | Text shown while no value is selected. |
- *
- * #### SelectContent
- *
- * | Prop | Type | Default | Notes |
- * |------|------|---------|-------|
- * | `position` | `"item-aligned" \| "popper"` | `"item-aligned"` | See Position Modes below. |
- * | `align` | `"start" \| "center" \| "end"` | `"center"` | Popper mode only. |
- * | `alignOffset` | `number` | `0` | Popper mode only. |
- * | `side` | `"top" \| "bottom"` | `"bottom"` | Popper mode only. |
- * | `sideOffset` | `number` | `4` | Popper mode only. |
- *
- * #### SelectItem
- *
- * | Prop | Type | Default | Notes |
- * |------|------|---------|-------|
- * | `value` | `string` | required | - |
- * | `disabled` | `boolean` | `false` | - |
- *
- * #### SelectGroup / SelectLabel / SelectSeparator
- *
- * Layout-only wrappers — each accepts just `class` plus native `div` attributes.
- *
- * ### Events
- *
- * The select emits custom events that you can listen to:
- *
- * | Event | Detail | Description |
- * |-------|--------|-------------|
- * | `select:change` | `{ value: string }` | Fired when a new value is selected |
- * | `select:open-change` | `{ open: boolean }` | Fired when the dropdown opens or closes |
- *
- * ```astro nocollapse console
- * <Select id="my-select">
- *   <SelectTrigger>
- *     <SelectValue placeholder="Choose..." />
- *   </SelectTrigger>
- *   <SelectContent>
- *     <SelectItem value="option1">Option 1</SelectItem>
- *     <SelectItem value="option2">Option 2</SelectItem>
- *   </SelectContent>
- * </Select>
- * ```
- *
- * ```js nocollapse
- *   const select = document.getElementById('my-select');
- *
- *   select.addEventListener('select:change', (e) => {
- *     console.log('Selected value:', e.detail.value);
- *   });
- *
- *   select.addEventListener('select:open-change', (e) => {
- *     console.log('Is open:', e.detail.open);
- *   });
- * ```
- *
- * ### Programmatic Control
- *
- * You can control the select programmatically by dispatching a `select:set` event:
- *
- * ```js nocollapse
- * const select = document.getElementById('my-select');
- *
- * // Set a specific value
- * select.dispatchEvent(new CustomEvent('select:set', {
- *   detail: { value: 'option2' }
- * }));
- *
- * // Open the select dropdown
- * select.dispatchEvent(new CustomEvent('select:set', {
- *   detail: { open: true }
- * }));
- *
- * // Close the select dropdown
- * select.dispatchEvent(new CustomEvent('select:set', {
- *   detail: { open: false }
- * }));
- * ```
- *
- * ### Data Attributes
- *
- * The select sets these data attributes that you can use for styling or querying state:
- *
- * | Attribute | Element | Description |
- * |-----------|---------|-------------|
- * | `data-state` | select, select-trigger, select-content | Current state (`open` or `closed`) |
- * | `data-open` / `data-closed` | select, select-trigger, select-content | Presence attributes for style-driven open/close animations |
- * | `data-value` | select | Currently selected value |
- * | `data-selected` | select-item | Present when item is selected |
- * | `data-highlighted` | select-item | Present when item is focused/highlighted |
- * | `data-disabled` | select, select-trigger, select-item | Present when disabled |
- * | `data-placeholder` | select-trigger | Present when showing placeholder (no value selected) |
- * | `data-align-trigger` | select-content | Present when item-aligned positioning is active |
- * | `data-position` | select-content, select-viewport | Positioning mode (`item-aligned` or `popper`) |
- *
- * ### Position Modes
- *
- * The `position` prop on `SelectContent` controls how the dropdown is positioned:
- *
- * - **`item-aligned`** (default): The dropdown aligns with the selected item, similar to native select behavior
- * - **`popper`**: Uses floating UI positioning with configurable placement options on `SelectContent`
- *
- * ```astro nocollapse nopreview
- * <!-- Item-aligned (default) -->
- * <Select>
- *   <SelectContent>...</SelectContent>
- * </Select>
- *
- * <!-- Popper mode -->
- * <Select>
- *   <SelectContent position="popper">...</SelectContent>
- * </Select>
- *
- * <!-- Custom positioning on content -->
- * <Select>
- *   <SelectContent position="popper" side="bottom" align="start" sideOffset={8}>
- *     ...
- *   </SelectContent>
- * </Select>
- * ```
- *
- * @examples
- *
- * ### With Label
- *
- * Pair `Select` with `FieldLabel` (or a bare `Label`) the same way you would with `Input` — `Select` itself has no label prop.
- *
- * <Field class="w-[200px]">
- *   <FieldLabel for="fruit-select">Fruit</FieldLabel>
- *   <Select>
- *     <SelectTrigger id="fruit-select">
- *       <SelectValue placeholder="Select a fruit" />
- *     </SelectTrigger>
- *     <SelectContent>
- *       <SelectItem value="apple">Apple</SelectItem>
- *       <SelectItem value="banana">Banana</SelectItem>
- *     </SelectContent>
- *   </Select>
- * </Field>
- *
- * ### With Groups
- *
- * <Select class="w-[200px]">
- *   <SelectTrigger>
- *     <SelectValue placeholder="Select food" />
- *   </SelectTrigger>
- *   <SelectContent>
- *     <SelectGroup>
- *       <SelectLabel>Fruits</SelectLabel>
- *       <SelectItem value="apple">Apple</SelectItem>
- *       <SelectItem value="banana">Banana</SelectItem>
- *     </SelectGroup>
- *     <SelectSeparator />
- *     <SelectGroup>
- *       <SelectLabel>Vegetables</SelectLabel>
- *       <SelectItem value="carrot">Carrot</SelectItem>
- *       <SelectItem value="broccoli">Broccoli</SelectItem>
- *     </SelectGroup>
- *   </SelectContent>
- * </Select>
- *
- * ### Sizes
- *
- * <div class="flex flex-col items-start gap-4 sm:flex-row" >
- *   <Select class="w-[180px]" size="sm">
- *     <SelectTrigger>
- *       <SelectValue placeholder="Small (h-8)" />
- *     </SelectTrigger>
- *     <SelectContent>
- *       <SelectItem value="apple">Apple</SelectItem>
- *       <SelectItem value="banana">Banana</SelectItem>
- *       <SelectItem value="cherry">Cherry</SelectItem>
- *     </SelectContent>
- *   </Select>
- *   <Select class="w-[180px]" size="default">
- *     <SelectTrigger>
- *       <SelectValue placeholder="Default (h-9)" />
- *     </SelectTrigger>
- *     <SelectContent>
- *       <SelectItem value="apple">Apple</SelectItem>
- *       <SelectItem value="banana">Banana</SelectItem>
- *       <SelectItem value="cherry">Cherry</SelectItem>
- *     </SelectContent>
- *   </Select>
- *   <Select class="w-[180px]" size="lg">
- *     <SelectTrigger size="lg">
- *       <SelectValue placeholder="Large (h-10)" />
- *     </SelectTrigger>
- *     <SelectContent>
- *       <SelectItem value="apple">Apple</SelectItem>
- *       <SelectItem value="banana">Banana</SelectItem>
- *       <SelectItem value="cherry">Cherry</SelectItem>
- *     </SelectContent>
- *   </Select>
- * </div>
- *
- * ### Disabled
- *
- * <Select disabled class="w-[200px]">
- *   <SelectTrigger>
- *     <SelectValue placeholder="Disabled" />
- *   </SelectTrigger>
- *   <SelectContent>
- *     <SelectItem value="apple">Apple</SelectItem>
- *     <SelectItem value="banana">Banana</SelectItem>
- *     <SelectItem value="cherry">Cherry</SelectItem>
- *   </SelectContent>
- * </Select>
- *
- * ### With Disabled Items
- *
- * <Select class="w-[200px]" placeholder="Choose...">
- *   <SelectTrigger>
- *     <SelectValue placeholder="Choose..." />
- *   </SelectTrigger>
- *   <SelectContent>
- *     <SelectItem value="available">Available</SelectItem>
- *     <SelectItem value="unavailable" disabled>Unavailable</SelectItem>
- *     <SelectItem value="another">Another option</SelectItem>
- *   </SelectContent>
- * </Select>
- *
- * ### Popper Mode
- *
- * <div class="flex flex-wrap items-start gap-4">
- *   <Select class="w-[160px]">
- *     <SelectTrigger>
- *       <SelectValue placeholder="Bottom" />
- *     </SelectTrigger>
- *     <SelectContent position="popper" side="bottom">
- *       <SelectItem value="option1">Option 1</SelectItem>
- *       <SelectItem value="option2">Option 2</SelectItem>
- *       <SelectItem value="option3">Option 3</SelectItem>
- *     </SelectContent>
- *   </Select>
- *   <Select class="w-[160px]">
- *     <SelectTrigger>
- *       <SelectValue placeholder="Top" />
- *     </SelectTrigger>
- *     <SelectContent position="popper" side="top">
- *       <SelectItem value="option1">Option 1</SelectItem>
- *       <SelectItem value="option2">Option 2</SelectItem>
- *       <SelectItem value="option3">Option 3</SelectItem>
- *     </SelectContent>
- *   </Select>
- * </div>
- */
-
-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;
-  size?: "sm" | "default" | "lg";
-}
-
-const {
-  class: className = "",
-  name,
-  defaultValue,
-  placeholder,
-  disabled = false,
-  required = false,
-  size = "default",
-  ...rest
-} = Astro.props as Props;
----
-
-<div
-  {...rest}
-  data-slot="select"
-  data-name={name}
-  data-default-value={defaultValue}
-  data-placeholder={placeholder}
-  data-disabled={disabled ? "" : undefined}
-  data-required={required ? "" : undefined}
-  data-size={size}
-  class={cn("", "group/select relative inline-block", className)}
->
-  <slot />
-</div>
-
-<script>
-  import { createSelect } from "@data-slot/select";
-
-  document.querySelectorAll('[data-slot="select"]').forEach((el) => {
-    createSelect(el);
-
-    const size = (el as HTMLElement).dataset.size;
-    if (size) {
-      el.querySelectorAll('[data-slot="select-trigger"]').forEach((trigger) => {
-        (trigger as HTMLElement).dataset.size = size;
-      });
-    }
-  });
-</script>
+---
+/**
+ * @component Select
+ * @title Select
+ * @description A dropdown control that lets users pick one option from a list with full keyboard navigation and accessibility support.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=2329-7946
+ *
+ * @preview
+ * <Select defaultValue="apple" class="w-[200px]">
+ *   <SelectTrigger>
+ *     <SelectValue placeholder="Select a fruit" />
+ *   </SelectTrigger>
+ *   <SelectContent>
+ *     <SelectItem value="apple">Apple</SelectItem>
+ *     <SelectItem value="banana">Banana</SelectItem>
+ *     <SelectItem value="cherry">Cherry</SelectItem>
+ *   </SelectContent>
+ * </Select>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import {
+ *   Select,
+ *   SelectTrigger,
+ *   SelectValue,
+ *   SelectContent,
+ *   SelectItem,
+ *   SelectGroup,
+ *   SelectLabel,
+ *   SelectSeparator
+ * } from '@bejamas/ui/components/select';
+ * ---
+ *
+ * <Select name="fruit" defaultValue="apple">
+ *   <SelectTrigger>
+ *     <SelectValue placeholder="Select a fruit" />
+ *   </SelectTrigger>
+ *   <SelectContent>
+ *     <SelectItem value="apple">Apple</SelectItem>
+ *     <SelectItem value="banana">Banana</SelectItem>
+ *   </SelectContent>
+ * </Select>
+ * ```
+ *
+ * @api
+ *
+ * ### Props
+ *
+ * #### Select
+ *
+ * | Prop | Type | Default | Notes |
+ * |------|------|---------|-------|
+ * | `name` | `string` | - | Rendered as `data-name`; read by form submission helpers. |
+ * | `defaultValue` | `string` | - | Initial selected value. |
+ * | `placeholder` | `string` | - | Forwarded as `data-placeholder`; pair with `SelectValue`'s own `placeholder`. |
+ * | `disabled` | `boolean` | `false` | Auto-synced to `SelectTrigger` at runtime — do not also pass `disabled` to `SelectTrigger`. |
+ * | `required` | `boolean` | `false` | - |
+ * | `size` | `"sm" \| "default" \| "lg"` | `"default"` | Auto-synced to `SelectTrigger` at runtime — set it here, not on `SelectTrigger`, unless you're using `SelectTrigger` standalone outside a `Select` wrapper. |
+ *
+ * #### SelectTrigger
+ *
+ * | Prop | Type | Default | Notes |
+ * |------|------|---------|-------|
+ * | `size` | `"sm" \| "default" \| "lg"` | `"default"` | Controls trigger height (32/36/40px). Overridden by the parent `Select`'s `size` once mounted. |
+ * | `class` | `string` | - | - |
+ *
+ * #### SelectValue
+ *
+ * | Prop | Type | Default | Notes |
+ * |------|------|---------|-------|
+ * | `placeholder` | `string` | `""` | Text shown while no value is selected. |
+ *
+ * #### SelectContent
+ *
+ * | Prop | Type | Default | Notes |
+ * |------|------|---------|-------|
+ * | `position` | `"item-aligned" \| "popper"` | `"item-aligned"` | See Position Modes below. |
+ * | `align` | `"start" \| "center" \| "end"` | `"center"` | Popper mode only. |
+ * | `alignOffset` | `number` | `0` | Popper mode only. |
+ * | `side` | `"top" \| "bottom"` | `"bottom"` | Popper mode only. |
+ * | `sideOffset` | `number` | `4` | Popper mode only. |
+ *
+ * #### SelectItem
+ *
+ * | Prop | Type | Default | Notes |
+ * |------|------|---------|-------|
+ * | `value` | `string` | required | - |
+ * | `disabled` | `boolean` | `false` | - |
+ *
+ * #### SelectGroup / SelectLabel / SelectSeparator
+ *
+ * Layout-only wrappers — each accepts just `class` plus native `div` attributes.
+ *
+ * ### Events
+ *
+ * The select emits custom events that you can listen to:
+ *
+ * | Event | Detail | Description |
+ * |-------|--------|-------------|
+ * | `select:change` | `{ value: string }` | Fired when a new value is selected |
+ * | `select:open-change` | `{ open: boolean }` | Fired when the dropdown opens or closes |
+ *
+ * ```astro nocollapse console
+ * <Select id="my-select">
+ *   <SelectTrigger>
+ *     <SelectValue placeholder="Choose..." />
+ *   </SelectTrigger>
+ *   <SelectContent>
+ *     <SelectItem value="option1">Option 1</SelectItem>
+ *     <SelectItem value="option2">Option 2</SelectItem>
+ *   </SelectContent>
+ * </Select>
+ * ```
+ *
+ * ```js nocollapse
+ *   const select = document.getElementById('my-select');
+ *
+ *   select.addEventListener('select:change', (e) => {
+ *     console.log('Selected value:', e.detail.value);
+ *   });
+ *
+ *   select.addEventListener('select:open-change', (e) => {
+ *     console.log('Is open:', e.detail.open);
+ *   });
+ * ```
+ *
+ * ### Programmatic Control
+ *
+ * You can control the select programmatically by dispatching a `select:set` event:
+ *
+ * ```js nocollapse
+ * const select = document.getElementById('my-select');
+ *
+ * // Set a specific value
+ * select.dispatchEvent(new CustomEvent('select:set', {
+ *   detail: { value: 'option2' }
+ * }));
+ *
+ * // Open the select dropdown
+ * select.dispatchEvent(new CustomEvent('select:set', {
+ *   detail: { open: true }
+ * }));
+ *
+ * // Close the select dropdown
+ * select.dispatchEvent(new CustomEvent('select:set', {
+ *   detail: { open: false }
+ * }));
+ * ```
+ *
+ * ### Data Attributes
+ *
+ * The select sets these data attributes that you can use for styling or querying state:
+ *
+ * | Attribute | Element | Description |
+ * |-----------|---------|-------------|
+ * | `data-state` | select, select-trigger, select-content | Current state (`open` or `closed`) |
+ * | `data-open` / `data-closed` | select, select-trigger, select-content | Presence attributes for style-driven open/close animations |
+ * | `data-value` | select | Currently selected value |
+ * | `data-selected` | select-item | Present when item is selected |
+ * | `data-highlighted` | select-item | Present when item is focused/highlighted |
+ * | `data-disabled` | select, select-trigger, select-item | Present when disabled |
+ * | `data-placeholder` | select-trigger | Present when showing placeholder (no value selected) |
+ * | `data-align-trigger` | select-content | Present when item-aligned positioning is active |
+ * | `data-position` | select-content, select-viewport | Positioning mode (`item-aligned` or `popper`) |
+ *
+ * ### Position Modes
+ *
+ * The `position` prop on `SelectContent` controls how the dropdown is positioned:
+ *
+ * - **`item-aligned`** (default): The dropdown aligns with the selected item, similar to native select behavior
+ * - **`popper`**: Uses floating UI positioning with configurable placement options on `SelectContent`
+ *
+ * ```astro nocollapse nopreview
+ * <!-- Item-aligned (default) -->
+ * <Select>
+ *   <SelectContent>...</SelectContent>
+ * </Select>
+ *
+ * <!-- Popper mode -->
+ * <Select>
+ *   <SelectContent position="popper">...</SelectContent>
+ * </Select>
+ *
+ * <!-- Custom positioning on content -->
+ * <Select>
+ *   <SelectContent position="popper" side="bottom" align="start" sideOffset={8}>
+ *     ...
+ *   </SelectContent>
+ * </Select>
+ * ```
+ *
+ * @examples
+ *
+ * ### With Label
+ *
+ * Pair `Select` with `FieldLabel` (or a bare `Label`) the same way you would with `Input` — `Select` itself has no label prop.
+ *
+ * <Field class="w-[200px]">
+ *   <FieldLabel for="fruit-select">Fruit</FieldLabel>
+ *   <Select>
+ *     <SelectTrigger id="fruit-select">
+ *       <SelectValue placeholder="Select a fruit" />
+ *     </SelectTrigger>
+ *     <SelectContent>
+ *       <SelectItem value="apple">Apple</SelectItem>
+ *       <SelectItem value="banana">Banana</SelectItem>
+ *     </SelectContent>
+ *   </Select>
+ * </Field>
+ *
+ * ### With Groups
+ *
+ * <Select class="w-[200px]">
+ *   <SelectTrigger>
+ *     <SelectValue placeholder="Select food" />
+ *   </SelectTrigger>
+ *   <SelectContent>
+ *     <SelectGroup>
+ *       <SelectLabel>Fruits</SelectLabel>
+ *       <SelectItem value="apple">Apple</SelectItem>
+ *       <SelectItem value="banana">Banana</SelectItem>
+ *     </SelectGroup>
+ *     <SelectSeparator />
+ *     <SelectGroup>
+ *       <SelectLabel>Vegetables</SelectLabel>
+ *       <SelectItem value="carrot">Carrot</SelectItem>
+ *       <SelectItem value="broccoli">Broccoli</SelectItem>
+ *     </SelectGroup>
+ *   </SelectContent>
+ * </Select>
+ *
+ * ### Sizes
+ *
+ * <div class="flex flex-col items-start gap-4 sm:flex-row" >
+ *   <Select class="w-[180px]" size="sm">
+ *     <SelectTrigger>
+ *       <SelectValue placeholder="Small (h-8)" />
+ *     </SelectTrigger>
+ *     <SelectContent>
+ *       <SelectItem value="apple">Apple</SelectItem>
+ *       <SelectItem value="banana">Banana</SelectItem>
+ *       <SelectItem value="cherry">Cherry</SelectItem>
+ *     </SelectContent>
+ *   </Select>
+ *   <Select class="w-[180px]" size="default">
+ *     <SelectTrigger>
+ *       <SelectValue placeholder="Default (h-9)" />
+ *     </SelectTrigger>
+ *     <SelectContent>
+ *       <SelectItem value="apple">Apple</SelectItem>
+ *       <SelectItem value="banana">Banana</SelectItem>
+ *       <SelectItem value="cherry">Cherry</SelectItem>
+ *     </SelectContent>
+ *   </Select>
+ *   <Select class="w-[180px]" size="lg">
+ *     <SelectTrigger size="lg">
+ *       <SelectValue placeholder="Large (h-10)" />
+ *     </SelectTrigger>
+ *     <SelectContent>
+ *       <SelectItem value="apple">Apple</SelectItem>
+ *       <SelectItem value="banana">Banana</SelectItem>
+ *       <SelectItem value="cherry">Cherry</SelectItem>
+ *     </SelectContent>
+ *   </Select>
+ * </div>
+ *
+ * ### Disabled
+ *
+ * <Select disabled class="w-[200px]">
+ *   <SelectTrigger>
+ *     <SelectValue placeholder="Disabled" />
+ *   </SelectTrigger>
+ *   <SelectContent>
+ *     <SelectItem value="apple">Apple</SelectItem>
+ *     <SelectItem value="banana">Banana</SelectItem>
+ *     <SelectItem value="cherry">Cherry</SelectItem>
+ *   </SelectContent>
+ * </Select>
+ *
+ * ### With Disabled Items
+ *
+ * <Select class="w-[200px]" placeholder="Choose...">
+ *   <SelectTrigger>
+ *     <SelectValue placeholder="Choose..." />
+ *   </SelectTrigger>
+ *   <SelectContent>
+ *     <SelectItem value="available">Available</SelectItem>
+ *     <SelectItem value="unavailable" disabled>Unavailable</SelectItem>
+ *     <SelectItem value="another">Another option</SelectItem>
+ *   </SelectContent>
+ * </Select>
+ *
+ * ### Popper Mode
+ *
+ * <div class="flex flex-wrap items-start gap-4">
+ *   <Select class="w-[160px]">
+ *     <SelectTrigger>
+ *       <SelectValue placeholder="Bottom" />
+ *     </SelectTrigger>
+ *     <SelectContent position="popper" side="bottom">
+ *       <SelectItem value="option1">Option 1</SelectItem>
+ *       <SelectItem value="option2">Option 2</SelectItem>
+ *       <SelectItem value="option3">Option 3</SelectItem>
+ *     </SelectContent>
+ *   </Select>
+ *   <Select class="w-[160px]">
+ *     <SelectTrigger>
+ *       <SelectValue placeholder="Top" />
+ *     </SelectTrigger>
+ *     <SelectContent position="popper" side="top">
+ *       <SelectItem value="option1">Option 1</SelectItem>
+ *       <SelectItem value="option2">Option 2</SelectItem>
+ *       <SelectItem value="option3">Option 3</SelectItem>
+ *     </SelectContent>
+ *   </Select>
+ * </div>
+ */
+
+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;
+  size?: "sm" | "default" | "lg";
+}
+
+const {
+  class: className = "",
+  name,
+  defaultValue,
+  placeholder,
+  disabled = false,
+  required = false,
+  size = "default",
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="select"
+  data-name={name}
+  data-default-value={defaultValue}
+  data-placeholder={placeholder}
+  data-disabled={disabled ? "" : undefined}
+  data-required={required ? "" : undefined}
+  data-size={size}
+  class={cn("", "group/select relative inline-block", className)}
+>
+  <slot />
+</div>
+
+<script>
+  import { createSelect } from "@data-slot/select";
+
+  document.querySelectorAll('[data-slot="select"]').forEach((el) => {
+    createSelect(el);
+
+    const size = (el as HTMLElement).dataset.size;
+    if (size) {
+      el.querySelectorAll('[data-slot="select-trigger"]').forEach((trigger) => {
+        (trigger as HTMLElement).dataset.size = size;
+      });
+    }
+  });
+</script>