@cl-light-ds/ui 0.2.0 → 0.4.0

package/src/components/popover/PopoverTitle.astro

@@ -1,18 +1,18 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"div"> {
-  class?: string;
-}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<div
-  {...rest}
-  data-slot="popover-title"
-  class={cn("font-medium", className)}
->
-  <slot />
-</div>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="popover-title"
+  class={cn("font-medium", className)}
+>
+  <slot />
+</div>

package/src/components/popover/PopoverTrigger.astro

@@ -1,35 +1,35 @@
----
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import { Button } from "../button";
-import type { Props as ButtonProps } from "../button/Button.astro";
-
-type Props = ButtonProps & {
-  class?: string;
-  /** Radix-like: render wrapper so the child can be the interactive element */
-  asChild?: boolean;
-};
-
-const {
-  class: className = "",
-  asChild = false,
-  variant = "outline",
-  ...rest
-} = Astro.props as Props;
----
-
-{
-  asChild ? (
-    <div data-slot="popover-trigger" data-as-child class={cn("", "inline-flex items-center", className)}>
-      <slot />
-    </div>
-  ) : (
-    <Button
-      data-slot="popover-trigger"
-      variant={variant}
-      class={cn("", "inline-flex items-center", className)}
-      {...rest as any}
-    >
-      <slot />
-    </Button>
-  )
-}
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { Button } from "../button";
+import type { Props as ButtonProps } from "../button/Button.astro";
+
+type Props = ButtonProps & {
+  class?: string;
+  /** Radix-like: render wrapper so the child can be the interactive element */
+  asChild?: boolean;
+};
+
+const {
+  class: className = "",
+  asChild = false,
+  variant = "outline",
+  ...rest
+} = Astro.props as Props;
+---
+
+{
+  asChild ? (
+    <div data-slot="popover-trigger" data-as-child class={cn("", "inline-flex items-center", className)}>
+      <slot />
+    </div>
+  ) : (
+    <Button
+      data-slot="popover-trigger"
+      variant={variant}
+      class={cn("", "inline-flex items-center", className)}
+      {...rest as any}
+    >
+      <slot />
+    </Button>
+  )
+}

package/src/components/popover/index.ts

@@ -1,7 +1,7 @@
-export { default as Popover } from "./Popover.astro";
-export { default as PopoverClose } from "./PopoverClose.astro";
-export { default as PopoverContent } from "./PopoverContent.astro";
-export { default as PopoverDescription } from "./PopoverDescription.astro";
-export { default as PopoverHeader } from "./PopoverHeader.astro";
-export { default as PopoverTitle } from "./PopoverTitle.astro";
-export { default as PopoverTrigger } from "./PopoverTrigger.astro";
+export { default as Popover } from "./Popover.astro";
+export { default as PopoverClose } from "./PopoverClose.astro";
+export { default as PopoverContent } from "./PopoverContent.astro";
+export { default as PopoverDescription } from "./PopoverDescription.astro";
+export { default as PopoverHeader } from "./PopoverHeader.astro";
+export { default as PopoverTitle } from "./PopoverTitle.astro";
+export { default as PopoverTrigger } from "./PopoverTrigger.astro";

package/src/components/radio-group/CHANGELOG.md

@@ -1,31 +1,31 @@
-# Changelog
-
-All notable changes to the `RadioGroup` component family (`RadioGroup`, `RadioGroupItem`) are documented in this file.
-
-## Unreleased
-
-### Fixed
-
-- Restored interactivity: `@data-slot/radio-group` (already the correct import in `RadioGroup.astro`) was never added as a dependency and was aliased to a no-op stub so builds wouldn't crash, leaving RadioGroup fully static. Added the real package as a dependency and removed the stub alias.
-
-## 2026-09-18 — Figma alignment (ClickLearn Lightning Design Library, node `50-3604`)
-
-Figma documents Radio across four pages: Variants (Default, Checked), States (Default, Hover, Focus, Disabled), Sizes (Small 16px, Large 20px), and Contents (Clean, Label, Label and Caption).
-
-### Fixed
-
-- Updated `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library link.
-- **Checked-state color was backwards** — the real, visually significant bug here. The code filled the whole circle with `bg-primary` + a white (`bg-primary-foreground`) center dot when checked. Figma shows the opposite: the circle stays white (`card`) with a `border-primary` ring, and only the small center dot is `bg-primary` — a standard bordered radio with a colored dot, not a filled disc. Fixed by removing `data-checked:bg-primary`/`data-checked:text-primary-foreground` and changing the indicator dot from `bg-primary-foreground` to `bg-primary`.
-- Background: added an explicit, unconditional `bg-card` — previously the root only had `dark:bg-input/30` with nothing for light mode, same category of fix already made to `Input`/`InputGroup`/`DialogContent`.
-- Added `size?: "default" | "lg"` to `RadioGroupItem` (16px / 20px, matching Figma's Small/Large) — previously hard-coded to `size-4` (16px) only. The indicator dot scales proportionally (8px / 10px, matching Figma's exact 0.5 dot-to-circle ratio at both sizes measured directly from the Figma node).
-
-### Added
-
-- Storybook examples for Sizes, "Label and caption" (via `Field`/`FieldLabel`/`FieldDescription`, matching Figma's third content variant — `RadioGroupItem` already carries the `data-slot="radio-group-item"` marker that `Field`'s alignment selector targets, from the earlier Checkbox alignment work, so no additional alignment fix was needed here), and Disabled — none of these were previously demonstrated.
-
-### Notes
-
-- Focus (`focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50`) and error/`aria-invalid` styling already matched Figma's tokens exactly (`ring` = `#5f9de6`) — no changes needed.
-- Hover isn't implemented, per the standing project direction to skip hover states.
-- Disabled's exact color treatment in Figma is ambiguous from the extracted tokens (bound to what look like incidental, non-muted swatch names at reduced opacity rather than a clear flat color swap like Checkbox/Input had) — left as the existing `disabled:opacity-50` fade rather than guessing a specific flat-color replacement.
-- "Clean" and "Label" content variants were already fully supported (a bare `RadioGroupItem`, or paired with a sibling `Label`) — no changes needed.
+# Changelog
+
+All notable changes to the `RadioGroup` component family (`RadioGroup`, `RadioGroupItem`) are documented in this file.
+
+## Unreleased
+
+### Fixed
+
+- Restored interactivity: `@data-slot/radio-group` (already the correct import in `RadioGroup.astro`) was never added as a dependency and was aliased to a no-op stub so builds wouldn't crash, leaving RadioGroup fully static. Added the real package as a dependency and removed the stub alias.
+
+## 2026-09-18 — Figma alignment (ClickLearn Lightning Design Library, node `50-3604`)
+
+Figma documents Radio across four pages: Variants (Default, Checked), States (Default, Hover, Focus, Disabled), Sizes (Small 16px, Large 20px), and Contents (Clean, Label, Label and Caption).
+
+### Fixed
+
+- Updated `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library link.
+- **Checked-state color was backwards** — the real, visually significant bug here. The code filled the whole circle with `bg-primary` + a white (`bg-primary-foreground`) center dot when checked. Figma shows the opposite: the circle stays white (`card`) with a `border-primary` ring, and only the small center dot is `bg-primary` — a standard bordered radio with a colored dot, not a filled disc. Fixed by removing `data-checked:bg-primary`/`data-checked:text-primary-foreground` and changing the indicator dot from `bg-primary-foreground` to `bg-primary`.
+- Background: added an explicit, unconditional `bg-card` — previously the root only had `dark:bg-input/30` with nothing for light mode, same category of fix already made to `Input`/`InputGroup`/`DialogContent`.
+- Added `size?: "default" | "lg"` to `RadioGroupItem` (16px / 20px, matching Figma's Small/Large) — previously hard-coded to `size-4` (16px) only. The indicator dot scales proportionally (8px / 10px, matching Figma's exact 0.5 dot-to-circle ratio at both sizes measured directly from the Figma node).
+
+### Added
+
+- Storybook examples for Sizes, "Label and caption" (via `Field`/`FieldLabel`/`FieldDescription`, matching Figma's third content variant — `RadioGroupItem` already carries the `data-slot="radio-group-item"` marker that `Field`'s alignment selector targets, from the earlier Checkbox alignment work, so no additional alignment fix was needed here), and Disabled — none of these were previously demonstrated.
+
+### Notes
+
+- Focus (`focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50`) and error/`aria-invalid` styling already matched Figma's tokens exactly (`ring` = `#5f9de6`) — no changes needed.
+- Hover isn't implemented, per the standing project direction to skip hover states.
+- Disabled's exact color treatment in Figma is ambiguous from the extracted tokens (bound to what look like incidental, non-muted swatch names at reduced opacity rather than a clear flat color swap like Checkbox/Input had) — left as the existing `disabled:opacity-50` fade rather than guessing a specific flat-color replacement.
+- "Clean" and "Label" content variants were already fully supported (a bare `RadioGroupItem`, or paired with a sibling `Label`) — no changes needed.

package/src/components/radio-group/RadioGroup.astro

@@ -1,81 +1,81 @@
----
-/**
- * @component RadioGroup
- * @title Radio Group
- * @description A group of options where users can select exactly one choice.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=50-3604
- *
- * @preview
- *
- * <RadioGroup name="plan" defaultValue="free">
- *   <div class="flex items-center gap-2">
- *     <RadioGroupItem value="free" id="free" />
- *     <Label for="free">Free</Label>
- *   </div>
- *   <div class="flex items-center gap-2">
- *     <RadioGroupItem value="pro" id="pro" />
- *     <Label for="pro">Pro</Label>
- *   </div>
- * </RadioGroup>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { RadioGroup, RadioGroupItem } from '@bejamas/ui/components/radio-group';
- * import { Label } from '@bejamas/ui/components/label';
- * ---
- *
- * <RadioGroup name="plan" defaultValue="free">
- *   <div class="flex items-center gap-2">
- *     <RadioGroupItem value="free" id="free" />
- *     <Label for="free">Free</Label>
- *   </div>
- * </RadioGroup>
- * ```
- */
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"div"> {
-  class?: string;
-  defaultValue?: string;
-  name?: string;
-  disabled?: boolean;
-  readOnly?: boolean;
-  required?: boolean;
-  "aria-label"?: string;
-  "aria-labelledby"?: string;
-}
-
-const {
-  class: className = "",
-  defaultValue,
-  name,
-  disabled = false,
-  readOnly = false,
-  required = false,
-  ...rest
-} = Astro.props as Props;
----
-
-<div
-  {...rest}
-  data-slot="radio-group"
-  data-default-value={defaultValue}
-  data-name={name}
-  data-disabled={disabled ? "true" : undefined}
-  data-read-only={readOnly ? "true" : undefined}
-  data-required={required ? "true" : undefined}
-  class={cn("grid gap-3", className)}
->
-  <slot />
-</div>
-
-<script>
-  import { createRadioGroup } from "@data-slot/radio-group";
-
-  document
-    .querySelectorAll('[data-slot="radio-group"]')
-    .forEach((el) => createRadioGroup(el));
-</script>
+---
+/**
+ * @component RadioGroup
+ * @title Radio Group
+ * @description A group of options where users can select exactly one choice.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=50-3604
+ *
+ * @preview
+ *
+ * <RadioGroup name="plan" defaultValue="free">
+ *   <div class="flex items-center gap-2">
+ *     <RadioGroupItem value="free" id="free" />
+ *     <Label for="free">Free</Label>
+ *   </div>
+ *   <div class="flex items-center gap-2">
+ *     <RadioGroupItem value="pro" id="pro" />
+ *     <Label for="pro">Pro</Label>
+ *   </div>
+ * </RadioGroup>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { RadioGroup, RadioGroupItem } from '@bejamas/ui/components/radio-group';
+ * import { Label } from '@bejamas/ui/components/label';
+ * ---
+ *
+ * <RadioGroup name="plan" defaultValue="free">
+ *   <div class="flex items-center gap-2">
+ *     <RadioGroupItem value="free" id="free" />
+ *     <Label for="free">Free</Label>
+ *   </div>
+ * </RadioGroup>
+ * ```
+ */
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+  defaultValue?: string;
+  name?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+}
+
+const {
+  class: className = "",
+  defaultValue,
+  name,
+  disabled = false,
+  readOnly = false,
+  required = false,
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="radio-group"
+  data-default-value={defaultValue}
+  data-name={name}
+  data-disabled={disabled ? "true" : undefined}
+  data-read-only={readOnly ? "true" : undefined}
+  data-required={required ? "true" : undefined}
+  class={cn("grid gap-3", className)}
+>
+  <slot />
+</div>
+
+<script>
+  import { createRadioGroup } from "@data-slot/radio-group";
+
+  document
+    .querySelectorAll('[data-slot="radio-group"]')
+    .forEach((el) => createRadioGroup(el));
+</script>

package/src/components/radio-group/RadioGroupItem.astro

@@ -1,51 +1,51 @@
----
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"span"> {
-  value: string;
-  size?: "default" | "lg";
-  class?: string;
-  disabled?: boolean;
-  id?: string;
-  "aria-invalid"?: boolean | "true" | "false";
-}
-
-const {
-  class: className = "",
-  id = "",
-  value,
-  size = "default",
-  disabled = false,
-  "aria-invalid": ariaInvalid,
-  ...rest
-} = Astro.props as Props;
----
-
-<span
-  {...rest}
-  id={id}
-  data-slot="radio-group-item"
-  data-value={value}
-  data-size={size}
-  data-disabled={disabled ? "true" : undefined}
-  aria-invalid={ariaInvalid}
-  class={cn(
-    "border-input bg-card data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 flex rounded-full focus-visible:ring-3 aria-invalid:ring-3 group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
-    size === "lg" ? "size-5" : "size-4",
-    className,
-  )}
->
-  <span
-    aria-hidden="true"
-    data-slot="radio-group-indicator"
-    class={cn("flex items-center justify-center data-unchecked:hidden", size === "lg" ? "size-5" : "size-4")}
-  >
-    <span
-      class={cn(
-        "bg-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",
-        size === "lg" ? "size-2.5" : "size-2",
-      )}
-    ></span>
-  </span>
-</span>
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"span"> {
+  value: string;
+  size?: "default" | "lg";
+  class?: string;
+  disabled?: boolean;
+  id?: string;
+  "aria-invalid"?: boolean | "true" | "false";
+}
+
+const {
+  class: className = "",
+  id = "",
+  value,
+  size = "default",
+  disabled = false,
+  "aria-invalid": ariaInvalid,
+  ...rest
+} = Astro.props as Props;
+---
+
+<span
+  {...rest}
+  id={id}
+  data-slot="radio-group-item"
+  data-value={value}
+  data-size={size}
+  data-disabled={disabled ? "true" : undefined}
+  aria-invalid={ariaInvalid}
+  class={cn(
+    "border-input bg-card data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 flex rounded-full focus-visible:ring-3 aria-invalid:ring-3 group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
+    size === "lg" ? "size-5" : "size-4",
+    className,
+  )}
+>
+  <span
+    aria-hidden="true"
+    data-slot="radio-group-indicator"
+    class={cn("flex items-center justify-center data-unchecked:hidden", size === "lg" ? "size-5" : "size-4")}
+  >
+    <span
+      class={cn(
+        "bg-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",
+        size === "lg" ? "size-2.5" : "size-2",
+      )}
+    ></span>
+  </span>
+</span>

package/src/components/radio-group/index.ts

@@ -1,3 +1,3 @@
-export { default as RadioGroup } from "./RadioGroup.astro";
-export { default as RadioGroupItem } from "./RadioGroupItem.astro";
-
+export { default as RadioGroup } from "./RadioGroup.astro";
+export { default as RadioGroupItem } from "./RadioGroupItem.astro";
+

package/src/components/select/CHANGELOG.md

@@ -1,39 +1,39 @@
-# Changelog
-
-All notable changes to the `Select` component will be documented in this file.
-
-## Date 14th Sep 2026
-## Figma alignment (node 2329-7946) + props audit
-
-### Fixed
-
-- `SelectTrigger`: vertical padding was `py-2` (8px); Figma specifies `py-1` (4px) on all sizes.
-- `SelectTrigger`: `size="lg"` had no explicit height at all (`h-9`/`h-8` were defined, `h-10` for `lg` was missing) — the Large variant silently fell back to whatever height its padding produced instead of Figma's 40px. Added `data-[size=lg]:h-10`.
-- `SelectTrigger`: focus-visible style used the plain-form-field pattern (`ring-ring/50`, opacity-blended). Figma's focus state is a solid `border-ring` + 2px `chart-1` shadow — the same "interactive control" pattern already used by `Button`, `Card`, and `DropdownMenuItem`. Switched to `focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-chart-1`.
-- `SelectTrigger`: disabled state relied only on `opacity-50`. Figma shows an explicit muted background/text. Added `disabled:bg-muted disabled:text-muted-foreground`, matching `Input`'s existing disabled convention.
-- `SelectTrigger`: removed a stray `-mr-0.75` negative margin on the chevron icon (not present in Figma) and dropped a few classes that `cn()`/tailwind-merge were already silently overriding (`rounded-md`, `pr-2`, `pl-2.5`).
-- `SelectItem`: `rounded-sm` → `rounded-lg` and `text-xs` → `text-sm`, matching Figma's 8px item radius and 14px item text — `ComboboxItem` already used the correct values, `SelectItem` had drifted from it.
-- `SelectContent`: the viewport had no padding at all unless items were wrapped in a `SelectGroup` (which carries its own `p-1`). A plain, ungrouped item list — the common case — sat flush against the popover's rounded corners. Added `p-1 gap-1` to the viewport so grouped and ungrouped content both get consistent spacing.
-
-### Changed
-
-- **`size` now actually propagates.** `Select`, `SelectTrigger`, and `SelectContent` each declared an independent `size` prop, but nothing ever synced them — `data-size` on the `Select` wrapper was purely decorative (confirmed by tracing `@data-slot/select`'s compiled runtime, which syncs `disabled` and `defaultValue` from the wrapper but never touched `size`). Setting `size="lg"` only on `<Select>` — the one place a consumer would naturally expect to control it — had zero visual effect. `Select`'s mount script now mirrors its `data-size` onto its `SelectTrigger` descendant at runtime, so `size` set on `<Select>` is authoritative; `SelectTrigger`'s own `size` prop is still available for standalone use outside a `Select` wrapper.
-- Removed the unused `size` prop from `SelectContent` — nothing in its class list ever branched on it, and Figma doesn't vary dropdown-item sizing by Select size either. A prop with no effect is worse than no prop for a team that needs to know which controls actually do something.
-
-### Added
-
-- `Select`'s JSDoc now documents every sub-component's props in an `@api` table (mirroring `Field`'s format), and calls out which state is auto-synced from `<Select>` (`disabled`, `defaultValue`, and now `size`) versus what must be set per sub-component.
-- Added a "With Label" example to `Select`'s JSDoc and to its Storybook page. `Select` has no label prop by design — label pairing stays composition-only via `Label`/`FieldLabel`, the same convention `Input` already uses (also already documented as the recommended pairing in `Field`'s own docs).
-
-### Not changed (checked, no gap found)
-
-- `border-input` resolves to the same `zinc-200` as `--border` — already matches Figma.
-- The trigger's Hover state is visually identical to Default in light mode in Figma — matches the component's existing dark-mode-only hover classes.
-- Figma renders item hover text as `accent-foreground`; the code uses `foreground`. Left as-is since `ComboboxItem` makes the same choice — a consistent system-wide simplification, not a `Select`-specific bug.
-- `disabled` on `<Select>` already correctly disables `SelectTrigger` at runtime (unlike `size`) — no fix needed, just now documented explicitly.
-
-## Unreleased
-
-### Fixed
-
-- Restored interactivity: the component's `<script>` was importing its runtime behavior from `@repo/lib/select`, a module that never existed in this repo — it was aliased to a no-op stub so builds wouldn't crash, leaving Select fully static. Fixed the import to point at `@data-slot/select` (the real published package the component's API already matched) and added it as a dependency. Select now opens/closes, supports keyboard navigation, and fires `select:change` / `select:open-change` as designed.
+# Changelog
+
+All notable changes to the `Select` component will be documented in this file.
+
+## Date 14th Sep 2026
+## Figma alignment (node 2329-7946) + props audit
+
+### Fixed
+
+- `SelectTrigger`: vertical padding was `py-2` (8px); Figma specifies `py-1` (4px) on all sizes.
+- `SelectTrigger`: `size="lg"` had no explicit height at all (`h-9`/`h-8` were defined, `h-10` for `lg` was missing) — the Large variant silently fell back to whatever height its padding produced instead of Figma's 40px. Added `data-[size=lg]:h-10`.
+- `SelectTrigger`: focus-visible style used the plain-form-field pattern (`ring-ring/50`, opacity-blended). Figma's focus state is a solid `border-ring` + 2px `chart-1` shadow — the same "interactive control" pattern already used by `Button`, `Card`, and `DropdownMenuItem`. Switched to `focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-chart-1`.
+- `SelectTrigger`: disabled state relied only on `opacity-50`. Figma shows an explicit muted background/text. Added `disabled:bg-muted disabled:text-muted-foreground`, matching `Input`'s existing disabled convention.
+- `SelectTrigger`: removed a stray `-mr-0.75` negative margin on the chevron icon (not present in Figma) and dropped a few classes that `cn()`/tailwind-merge were already silently overriding (`rounded-md`, `pr-2`, `pl-2.5`).
+- `SelectItem`: `rounded-sm` → `rounded-lg` and `text-xs` → `text-sm`, matching Figma's 8px item radius and 14px item text — `ComboboxItem` already used the correct values, `SelectItem` had drifted from it.
+- `SelectContent`: the viewport had no padding at all unless items were wrapped in a `SelectGroup` (which carries its own `p-1`). A plain, ungrouped item list — the common case — sat flush against the popover's rounded corners. Added `p-1 gap-1` to the viewport so grouped and ungrouped content both get consistent spacing.
+
+### Changed
+
+- **`size` now actually propagates.** `Select`, `SelectTrigger`, and `SelectContent` each declared an independent `size` prop, but nothing ever synced them — `data-size` on the `Select` wrapper was purely decorative (confirmed by tracing `@data-slot/select`'s compiled runtime, which syncs `disabled` and `defaultValue` from the wrapper but never touched `size`). Setting `size="lg"` only on `<Select>` — the one place a consumer would naturally expect to control it — had zero visual effect. `Select`'s mount script now mirrors its `data-size` onto its `SelectTrigger` descendant at runtime, so `size` set on `<Select>` is authoritative; `SelectTrigger`'s own `size` prop is still available for standalone use outside a `Select` wrapper.
+- Removed the unused `size` prop from `SelectContent` — nothing in its class list ever branched on it, and Figma doesn't vary dropdown-item sizing by Select size either. A prop with no effect is worse than no prop for a team that needs to know which controls actually do something.
+
+### Added
+
+- `Select`'s JSDoc now documents every sub-component's props in an `@api` table (mirroring `Field`'s format), and calls out which state is auto-synced from `<Select>` (`disabled`, `defaultValue`, and now `size`) versus what must be set per sub-component.
+- Added a "With Label" example to `Select`'s JSDoc and to its Storybook page. `Select` has no label prop by design — label pairing stays composition-only via `Label`/`FieldLabel`, the same convention `Input` already uses (also already documented as the recommended pairing in `Field`'s own docs).
+
+### Not changed (checked, no gap found)
+
+- `border-input` resolves to the same `zinc-200` as `--border` — already matches Figma.
+- The trigger's Hover state is visually identical to Default in light mode in Figma — matches the component's existing dark-mode-only hover classes.
+- Figma renders item hover text as `accent-foreground`; the code uses `foreground`. Left as-is since `ComboboxItem` makes the same choice — a consistent system-wide simplification, not a `Select`-specific bug.
+- `disabled` on `<Select>` already correctly disables `SelectTrigger` at runtime (unlike `size`) — no fix needed, just now documented explicitly.
+
+## Unreleased
+
+### Fixed
+
+- Restored interactivity: the component's `<script>` was importing its runtime behavior from `@repo/lib/select`, a module that never existed in this repo — it was aliased to a no-op stub so builds wouldn't crash, leaving Select fully static. Fixed the import to point at `@data-slot/select` (the real published package the component's API already matched) and added it as a dependency. Select now opens/closes, supports keyboard navigation, and fires `select:change` / `select:open-change` as designed.