@cl-light-ds/ui 0.2.0 → 0.4.0

package/src/components/dropdown-menu/DropdownMenuRadioGroup.astro

@@ -1,13 +1,13 @@
----
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"div"> {
-  class?: string;
-}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<div {...rest} data-slot="dropdown-menu-radio-group" class={className}>
-  <slot />
-</div>
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<div {...rest} data-slot="dropdown-menu-radio-group" class={className}>
+  <slot />
+</div>

package/src/components/dropdown-menu/DropdownMenuRadioItem.astro

@@ -1,101 +1,101 @@
----
-/**
- * @component DropdownMenuRadioItem
- * @title Dropdown Menu Radio Item
- * @description A real, interactive `menuitemradio` row — selected state is tracked by the DropdownMenu runtime, not by this component.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=7392-10142
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { DropdownMenuRadioItem } from '@bejamas/ui/components/dropdown-menu';
- * ---
- *
- * <DropdownMenuRadioItem value="pro">Pro</DropdownMenuRadioItem>
- * ```
- *
- * For a purely decorative radio glyph on a plain, non-interactive row, use `DropdownMenuItem`'s
- * own `showRadio`/`checked` props instead — this component is for real, runtime-managed selection.
- */
-
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import { itemVariants } from "./dropdown-menu-item-variants";
-import DropdownMenuItemContent from "./DropdownMenuItemContent.astro";
-
-interface Props extends HTMLAttributes<"div"> {
-  disabled?: boolean;
-  inset?: boolean;
-  value: string;
-  defaultChecked?: boolean;
-  leadingIcon?: boolean;
-  avatar?: boolean;
-  showBadge?: boolean;
-  showSubmenuIcon?: boolean;
-  supportiveText?: boolean;
-  class?: string;
-}
-
-const hasLeadingIconSlot = Astro.slots.has("leading-icon");
-const hasAvatarSlot = Astro.slots.has("avatar");
-const hasBadgeSlot = Astro.slots.has("badge");
-const hasSupportiveTextSlot = Astro.slots.has("supportive-text");
-
-const {
-  disabled = false,
-  inset = false,
-  value,
-  defaultChecked = false,
-  leadingIcon = hasLeadingIconSlot,
-  avatar = hasAvatarSlot,
-  showBadge = hasBadgeSlot,
-  showSubmenuIcon = false,
-  supportiveText = hasSupportiveTextSlot,
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<div
-  {...rest}
-  role="menuitemradio"
-  tabindex={disabled ? -1 : 0}
-  data-slot="dropdown-menu-radio-item"
-  data-value={value}
-  data-disabled={disabled ? "" : undefined}
-  data-inset={inset ? "" : undefined}
-  data-default-checked={defaultChecked ? "" : undefined}
-  class={cn(itemVariants({ variant: "default" }), className)}
->
-  <DropdownMenuItemContent
-    hasLeadingControl
-    leadingIcon={leadingIcon}
-    avatar={avatar}
-    showBadge={showBadge}
-    showSubmenuIcon={showSubmenuIcon}
-    supportiveText={supportiveText}
-  >
-    <span
-      slot="leading-control"
-      data-slot="dropdown-menu-radio-item-indicator"
-      class="border-input group-data-checked/dropdown-menu-item:border-primary group-data-checked/dropdown-menu-item:bg-primary relative flex size-5 shrink-0 items-center justify-center rounded-full border transition-colors"
-      aria-hidden="true"
-    >
-      <span class="bg-primary-foreground size-2 rounded-full opacity-0 transition-opacity group-data-checked/dropdown-menu-item:opacity-100" />
-    </span>
-    <slot />
-    <Fragment slot="supportive-text">
-      <slot name="supportive-text" />
-    </Fragment>
-    <Fragment slot="leading-icon">
-      <slot name="leading-icon" />
-    </Fragment>
-    <Fragment slot="avatar">
-      <slot name="avatar" />
-    </Fragment>
-    <Fragment slot="badge">
-      <slot name="badge" />
-    </Fragment>
-  </DropdownMenuItemContent>
-</div>
+---
+/**
+ * @component DropdownMenuRadioItem
+ * @title Dropdown Menu Radio Item
+ * @description A real, interactive `menuitemradio` row — selected state is tracked by the DropdownMenu runtime, not by this component.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=7392-10142
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { DropdownMenuRadioItem } from '@bejamas/ui/components/dropdown-menu';
+ * ---
+ *
+ * <DropdownMenuRadioItem value="pro">Pro</DropdownMenuRadioItem>
+ * ```
+ *
+ * For a purely decorative radio glyph on a plain, non-interactive row, use `DropdownMenuItem`'s
+ * own `showRadio`/`checked` props instead — this component is for real, runtime-managed selection.
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { itemVariants } from "./dropdown-menu-item-variants";
+import DropdownMenuItemContent from "./DropdownMenuItemContent.astro";
+
+interface Props extends HTMLAttributes<"div"> {
+  disabled?: boolean;
+  inset?: boolean;
+  value: string;
+  defaultChecked?: boolean;
+  leadingIcon?: boolean;
+  avatar?: boolean;
+  showBadge?: boolean;
+  showSubmenuIcon?: boolean;
+  supportiveText?: boolean;
+  class?: string;
+}
+
+const hasLeadingIconSlot = Astro.slots.has("leading-icon");
+const hasAvatarSlot = Astro.slots.has("avatar");
+const hasBadgeSlot = Astro.slots.has("badge");
+const hasSupportiveTextSlot = Astro.slots.has("supportive-text");
+
+const {
+  disabled = false,
+  inset = false,
+  value,
+  defaultChecked = false,
+  leadingIcon = hasLeadingIconSlot,
+  avatar = hasAvatarSlot,
+  showBadge = hasBadgeSlot,
+  showSubmenuIcon = false,
+  supportiveText = hasSupportiveTextSlot,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  role="menuitemradio"
+  tabindex={disabled ? -1 : 0}
+  data-slot="dropdown-menu-radio-item"
+  data-value={value}
+  data-disabled={disabled ? "" : undefined}
+  data-inset={inset ? "" : undefined}
+  data-default-checked={defaultChecked ? "" : undefined}
+  class={cn(itemVariants({ variant: "default" }), className)}
+>
+  <DropdownMenuItemContent
+    hasLeadingControl
+    leadingIcon={leadingIcon}
+    avatar={avatar}
+    showBadge={showBadge}
+    showSubmenuIcon={showSubmenuIcon}
+    supportiveText={supportiveText}
+  >
+    <span
+      slot="leading-control"
+      data-slot="dropdown-menu-radio-item-indicator"
+      class="border-input group-data-checked/dropdown-menu-item:border-primary group-data-checked/dropdown-menu-item:bg-primary relative flex size-5 shrink-0 items-center justify-center rounded-full border transition-colors"
+      aria-hidden="true"
+    >
+      <span class="bg-primary-foreground size-2 rounded-full opacity-0 transition-opacity group-data-checked/dropdown-menu-item:opacity-100" />
+    </span>
+    <slot />
+    <Fragment slot="supportive-text">
+      <slot name="supportive-text" />
+    </Fragment>
+    <Fragment slot="leading-icon">
+      <slot name="leading-icon" />
+    </Fragment>
+    <Fragment slot="avatar">
+      <slot name="avatar" />
+    </Fragment>
+    <Fragment slot="badge">
+      <slot name="badge" />
+    </Fragment>
+  </DropdownMenuItemContent>
+</div>

package/src/components/dropdown-menu/DropdownMenuSeparator.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}
-  role="separator"
-  data-slot="dropdown-menu-separator"
-  class={cn("bg-border -mx-1 my-1 h-px", className)}
->
-</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}
+  role="separator"
+  data-slot="dropdown-menu-separator"
+  class={cn("bg-border -mx-1 my-1 h-px", className)}
+>
+</div>

package/src/components/dropdown-menu/DropdownMenuShortcut.astro

@@ -1,18 +1,18 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"span"> {
-  class?: string;
-}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<span
-  {...rest}
-  data-slot="dropdown-menu-shortcut"
-  class={cn("text-muted-foreground group-focus/dropdown-menu-item:text-foreground ml-auto text-xs tracking-widest", className)}
->
-  <slot />
-</span>
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"span"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+---
+
+<span
+  {...rest}
+  data-slot="dropdown-menu-shortcut"
+  class={cn("text-muted-foreground group-focus/dropdown-menu-item:text-foreground ml-auto text-xs tracking-widest", className)}
+>
+  <slot />
+</span>

package/src/components/dropdown-menu/DropdownMenuTrigger.astro

@@ -1,49 +1,49 @@
----
-import { ChevronDown } from "@lucide/astro";
-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 hasTailIconSlot = Astro.slots.has("tail-icon");
-
-const {
-  class: className = "",
-  asChild = false,
-  variant = "outline",
-  tailIcon = true,
-  ...rest
-} = Astro.props as Props;
----
-
-{
-  asChild ? (
-    <div data-slot="dropdown-menu-trigger" data-as-child class={cn("", "inline-flex items-center", className)}>
-      <slot />
-    </div>
-  ) : (
-    <Button
-      data-slot="dropdown-menu-trigger"
-      class={cn("", "inline-flex items-center", className)}
-      variant={variant}
-      tailIcon={tailIcon}
-      {...rest as any}
-    >
-      <slot />
-      {tailIcon &&
-        (hasTailIconSlot ? (
-          <slot name="tail-icon" slot="tail-icon" />
-        ) : (
-          <ChevronDown
-            slot="tail-icon"
-            class="transition-transform group-data-[state=open]/dropdown-menu:rotate-180"
-          />
-        ))}
-    </Button>
-  )
-}
+---
+import { ChevronDown } from "@lucide/astro";
+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 hasTailIconSlot = Astro.slots.has("tail-icon");
+
+const {
+  class: className = "",
+  asChild = false,
+  variant = "outline",
+  tailIcon = true,
+  ...rest
+} = Astro.props as Props;
+---
+
+{
+  asChild ? (
+    <div data-slot="dropdown-menu-trigger" data-as-child class={cn("", "inline-flex items-center", className)}>
+      <slot />
+    </div>
+  ) : (
+    <Button
+      data-slot="dropdown-menu-trigger"
+      class={cn("", "inline-flex items-center", className)}
+      variant={variant}
+      tailIcon={tailIcon}
+      {...rest as any}
+    >
+      <slot />
+      {tailIcon &&
+        (hasTailIconSlot ? (
+          <slot name="tail-icon" slot="tail-icon" />
+        ) : (
+          <ChevronDown
+            slot="tail-icon"
+            class="transition-transform group-data-[state=open]/dropdown-menu:rotate-180"
+          />
+        ))}
+    </Button>
+  )
+}

package/src/components/dropdown-menu/dropdown-menu-item-variants.ts

@@ -1,24 +1,24 @@
-import { cva } from "class-variance-authority";
-
-/**
- * Shared box classes for DropdownMenuItem / DropdownMenuCheckboxItem / DropdownMenuRadioItem.
- * Kept in one place so all three item components stay pixel-identical at rest.
- */
-export const itemVariants = cva(
-  "group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-lg border border-transparent outline-hidden transition-colors select-none data-inset:pl-8 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-chart-1 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "p-2 text-xs font-semibold text-foreground hover:bg-background-hover hover:text-foreground",
-        destructive:
-          "p-2 text-xs font-semibold text-destructive hover:bg-background-hover hover:text-destructive dark:hover:bg-destructive/20 [&_svg]:text-destructive",
-        category: "pointer-events-none gap-1 pt-1 pr-1 pb-0 pl-1 text-xs font-medium text-muted-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-export type ItemVariant = "default" | "destructive" | "category";
+import { cva } from "class-variance-authority";
+
+/**
+ * Shared box classes for DropdownMenuItem / DropdownMenuCheckboxItem / DropdownMenuRadioItem.
+ * Kept in one place so all three item components stay pixel-identical at rest.
+ */
+export const itemVariants = cva(
+  "group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-lg border border-transparent outline-hidden transition-colors select-none data-inset:pl-8 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-chart-1 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "p-2 text-xs font-semibold text-foreground hover:bg-background-hover hover:text-foreground",
+        destructive:
+          "p-2 text-xs font-semibold text-destructive hover:bg-background-hover hover:text-destructive dark:hover:bg-destructive/20 [&_svg]:text-destructive",
+        category: "pointer-events-none gap-1 pt-1 pr-1 pb-0 pl-1 text-xs font-medium text-muted-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export type ItemVariant = "default" | "destructive" | "category";

package/src/components/dropdown-menu/index.ts

@@ -1,12 +1,12 @@
-export { default as DropdownMenu } from "./DropdownMenu.astro";
-export { default as DropdownMenuCheckboxItem } from "./DropdownMenuCheckboxItem.astro";
-export { default as DropdownMenuContent } from "./DropdownMenuContent.astro";
-export { default as DropdownMenuGroup } from "./DropdownMenuGroup.astro";
-export { default as DropdownMenuItem } from "./DropdownMenuItem.astro";
-export { default as DropdownMenuLabel } from "./DropdownMenuLabel.astro";
-export { default as DropdownMenuPortal } from "./DropdownMenuPortal.astro";
-export { default as DropdownMenuRadioGroup } from "./DropdownMenuRadioGroup.astro";
-export { default as DropdownMenuRadioItem } from "./DropdownMenuRadioItem.astro";
-export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.astro";
-export { default as DropdownMenuShortcut } from "./DropdownMenuShortcut.astro";
-export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger.astro";
+export { default as DropdownMenu } from "./DropdownMenu.astro";
+export { default as DropdownMenuCheckboxItem } from "./DropdownMenuCheckboxItem.astro";
+export { default as DropdownMenuContent } from "./DropdownMenuContent.astro";
+export { default as DropdownMenuGroup } from "./DropdownMenuGroup.astro";
+export { default as DropdownMenuItem } from "./DropdownMenuItem.astro";
+export { default as DropdownMenuLabel } from "./DropdownMenuLabel.astro";
+export { default as DropdownMenuPortal } from "./DropdownMenuPortal.astro";
+export { default as DropdownMenuRadioGroup } from "./DropdownMenuRadioGroup.astro";
+export { default as DropdownMenuRadioItem } from "./DropdownMenuRadioItem.astro";
+export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.astro";
+export { default as DropdownMenuShortcut } from "./DropdownMenuShortcut.astro";
+export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger.astro";

package/src/components/field/CHANGELOG.md

@@ -1,33 +1,33 @@
-# Changelog
-
-All notable changes to the `Field` component will be documented in this file.
-
-## 2026-09-09 — Fixed control-to-label vertical alignment for native checkbox/radio
-
-### Fixed
-
-- `Field` (`orientation="horizontal"` with a `FieldContent` child, e.g. checkbox/radio + label + description): the `mt-px` nudge that vertically aligns the control against the label's line was written as `[&>[role=checkbox],[role=radio]]` — a CSS selector bug where the `>` (direct-child) combinator only bound to the first alternative (`[role=checkbox]`); the second (`[role=radio]`) was an unscoped, effectively dead alternative. Separately, the selector only matched an explicit `role="checkbox"`/`role="radio"` **attribute**, which Radix-style custom controls set but a plain native `<input type="checkbox">` never does (the role is implicit/computed, not a literal attribute) — so the nudge silently never applied to native checkbox/radio inputs.
-- Rewrote the selector as `[&_[role=checkbox],&_[role=radio],&_input[type=checkbox],&_input[type=radio]]` — correctly repeats the combinator for every alternative, switches from a direct-child (`>`) to a descendant (`_`) combinator (since `Checkbox` wraps its native input in its own `<label>`/`<span>`, so the input is not a direct child of `Field`), and adds explicit matching for native `input[type=checkbox]`/`input[type=radio]`.
-- Verified live: a `Checkbox` inside `Field`/`FieldContent` (checkbox + label + description) now measures ~1px margin-top, centering the 16px box against the label's line to within a sub-pixel difference — previously 0px (top-aligned, visibly off-center against the label specifically once a description pushed the block taller).
-
-### Notes
-
-- Same underlying bug also affects `RadioGroupItem` (also a plain element with no explicit `role` attribute) when used the same way — not otherwise touched in this pass, but now covered by this same fix since it targets `Field`.
-
-## 2026-09-09 — Follow-up: target the whole control, not just its native input
-
-The `input[type=checkbox]`/`input[type=radio]` matching added above was itself incomplete: `Checkbox` renders its icon overlay as an `absolute inset-0` sibling positioned relative to a *different* wrapping `<span>`, not relative to the `<input>`. Nudging the input alone with `margin-top` moved the box border but left the overlaid checkmark/dash icon in place, desyncing them by the nudge amount.
-
-### Changed
-
-- Selector updated (again) to `[&_[role=checkbox],&_[role=radio],&_[data-slot=checkbox],&_[data-slot=radio-group-item]]` — dropped the raw `input[type=checkbox]`/`input[type=radio]` matching in favor of `[data-slot=checkbox]`, a new marker `Checkbox` now sets on its outermost `<label>` (the element that actually contains the input *and* its icon overlay as one atomic unit). `RadioGroupItem` already exposes `data-slot="radio-group-item"` on its own root element, so it needed no changes.
-- Verified live: box and icon now move together (0px delta between them) when the `Field` nudge applies.
-
-## 2026-09-09 — Nudge value corrected to match Figma's actual mechanism (`mt-px` → `mt-0.5`)
-
-The `mt-px` (1px) value above was a derived approximation, not sourced from Figma. Checked Figma's actual "Checkbox Combo" node directly: it wraps the checkbox in `p-0.5` (2px padding on all sides, effectively a 2px top offset) inside an `items-start` row, and its label uses an explicit `leading-[20px]` (20px line-height) — not `FieldLabel`'s `leading-snug` (19.25px) approximation. With a 16px checkbox: `(20 - 16) / 2 = 2px` offset centers it exactly.
-
-### Changed
-
-- `mt-px` → `mt-0.5` in both the `horizontal` and `responsive` variant selectors, matching Figma's literal `p-0.5` mechanism instead of a derived guess.
-- Verified live: with `FieldLabel`'s actual 19.25px line-height, this leaves a ~0.375px residual (imperceptible) rather than a guessed value that happened to look close. A sibling demo using Figma's exact `leading-[20px]` (see `checkbox`'s "Selectable card" changelog entry) now centers to **0.000px**.
+# Changelog
+
+All notable changes to the `Field` component will be documented in this file.
+
+## 2026-09-09 — Fixed control-to-label vertical alignment for native checkbox/radio
+
+### Fixed
+
+- `Field` (`orientation="horizontal"` with a `FieldContent` child, e.g. checkbox/radio + label + description): the `mt-px` nudge that vertically aligns the control against the label's line was written as `[&>[role=checkbox],[role=radio]]` — a CSS selector bug where the `>` (direct-child) combinator only bound to the first alternative (`[role=checkbox]`); the second (`[role=radio]`) was an unscoped, effectively dead alternative. Separately, the selector only matched an explicit `role="checkbox"`/`role="radio"` **attribute**, which Radix-style custom controls set but a plain native `<input type="checkbox">` never does (the role is implicit/computed, not a literal attribute) — so the nudge silently never applied to native checkbox/radio inputs.
+- Rewrote the selector as `[&_[role=checkbox],&_[role=radio],&_input[type=checkbox],&_input[type=radio]]` — correctly repeats the combinator for every alternative, switches from a direct-child (`>`) to a descendant (`_`) combinator (since `Checkbox` wraps its native input in its own `<label>`/`<span>`, so the input is not a direct child of `Field`), and adds explicit matching for native `input[type=checkbox]`/`input[type=radio]`.
+- Verified live: a `Checkbox` inside `Field`/`FieldContent` (checkbox + label + description) now measures ~1px margin-top, centering the 16px box against the label's line to within a sub-pixel difference — previously 0px (top-aligned, visibly off-center against the label specifically once a description pushed the block taller).
+
+### Notes
+
+- Same underlying bug also affects `RadioGroupItem` (also a plain element with no explicit `role` attribute) when used the same way — not otherwise touched in this pass, but now covered by this same fix since it targets `Field`.
+
+## 2026-09-09 — Follow-up: target the whole control, not just its native input
+
+The `input[type=checkbox]`/`input[type=radio]` matching added above was itself incomplete: `Checkbox` renders its icon overlay as an `absolute inset-0` sibling positioned relative to a *different* wrapping `<span>`, not relative to the `<input>`. Nudging the input alone with `margin-top` moved the box border but left the overlaid checkmark/dash icon in place, desyncing them by the nudge amount.
+
+### Changed
+
+- Selector updated (again) to `[&_[role=checkbox],&_[role=radio],&_[data-slot=checkbox],&_[data-slot=radio-group-item]]` — dropped the raw `input[type=checkbox]`/`input[type=radio]` matching in favor of `[data-slot=checkbox]`, a new marker `Checkbox` now sets on its outermost `<label>` (the element that actually contains the input *and* its icon overlay as one atomic unit). `RadioGroupItem` already exposes `data-slot="radio-group-item"` on its own root element, so it needed no changes.
+- Verified live: box and icon now move together (0px delta between them) when the `Field` nudge applies.
+
+## 2026-09-09 — Nudge value corrected to match Figma's actual mechanism (`mt-px` → `mt-0.5`)
+
+The `mt-px` (1px) value above was a derived approximation, not sourced from Figma. Checked Figma's actual "Checkbox Combo" node directly: it wraps the checkbox in `p-0.5` (2px padding on all sides, effectively a 2px top offset) inside an `items-start` row, and its label uses an explicit `leading-[20px]` (20px line-height) — not `FieldLabel`'s `leading-snug` (19.25px) approximation. With a 16px checkbox: `(20 - 16) / 2 = 2px` offset centers it exactly.
+
+### Changed
+
+- `mt-px` → `mt-0.5` in both the `horizontal` and `responsive` variant selectors, matching Figma's literal `p-0.5` mechanism instead of a derived guess.
+- Verified live: with `FieldLabel`'s actual 19.25px line-height, this leaves a ~0.375px residual (imperceptible) rather than a guessed value that happened to look close. A sibling demo using Figma's exact `leading-[20px]` (see `checkbox`'s "Selectable card" changelog entry) now centers to **0.000px**.