diff --git a/packages/propel/src/components/checkbox-field/checkbox-field.stories.tsx b/packages/propel/src/components/checkbox-field/checkbox-field.stories.tsx
index d0c6a427..3e9c8881 100644
--- a/packages/propel/src/components/checkbox-field/checkbox-field.stories.tsx
+++ b/packages/propel/src/components/checkbox-field/checkbox-field.stories.tsx
@@ -5,7 +5,7 @@ import { CheckboxField, type FieldMagnitude } from "./index";
 
 const MAGNITUDES: FieldMagnitude[] = ["md", "lg", "xl"];
 
-// A single checkbox laid out as a field row (Field + CheckboxFieldControl + label/helper).
+// A single checkbox laid out as a field row (Field + bare Checkbox + label/helper).
 const meta = {
   title: "Components/CheckboxField",
   component: CheckboxField,
@@ -97,10 +97,10 @@ export const InvalidInteraction: Story = {
     await expect(resting).not.toHaveAttribute("data-invalid");
     // The invalid field propagates `data-invalid` onto the box (Base UI Field -> Checkbox.Root).
     await expect(invalid).toHaveAttribute("data-invalid");
-    // ...and the danger border actually renders: its color differs from the resting box's border.
-    await expect(getComputedStyle(invalid).borderColor).not.toBe(
-      getComputedStyle(resting).borderColor,
-    );
+    // ...and the danger stroke actually renders: the invalid box's inset box-shadow (danger stroke)
+    // differs from the resting box's (tertiary stroke). The stroke is a box-shadow, not a
+    // border-color — the border is a transparent 1px gutter.
+    await expect(getComputedStyle(invalid).boxShadow).not.toBe(getComputedStyle(resting).boxShadow);
   },
 };
 
diff --git a/packages/propel/src/components/checkbox-field/checkbox-field.tsx b/packages/propel/src/components/checkbox-field/checkbox-field.tsx
index 3e5c11e4..522a4912 100644
--- a/packages/propel/src/components/checkbox-field/checkbox-field.tsx
+++ b/packages/propel/src/components/checkbox-field/checkbox-field.tsx
@@ -2,19 +2,16 @@ import type * as React from "react";
 
 import { FieldItemControlGroup } from "../../elements/field/field-item-control-group";
 import type { FieldMagnitude } from "../../elements/field/variants";
-import {
-  CheckboxFieldControl,
-  type CheckboxFieldControlProps,
-} from "../../internal/checkbox-field-control";
+import { Checkbox, type CheckboxProps } from "../checkbox";
 import { Field, FieldItem, FieldItemContent } from "../field";
 import { FieldHelperText } from "../field/field-helper-text";
 
 export type { FieldMagnitude } from "../../elements/field/variants";
 
-export type CheckboxFieldProps = Omit<
-  CheckboxFieldControlProps,
-  "aria-label" | "label" | "icon"
-> & {
+/** Bare checkbox control props for a field row — no chip `label` / `icon` (Field owns labeling). */
+type CheckboxFieldControlProps = Omit<CheckboxProps, "children" | "label" | "icon">;
+
+export type CheckboxFieldProps = Omit<CheckboxFieldControlProps, "aria-label"> & {
   /** Helper text shown below the control. Replaced by `error` when an error is set. */
   hint?: React.ReactNode;
   /** Error text shown below the control. */
@@ -42,7 +39,7 @@ export function CheckboxField({
     <Field name={name} disabled={disabled} invalid={error != null || undefined}>
       <FieldItem disabled={disabled}>
         <FieldItemControlGroup>
-          <CheckboxFieldControl disabled={disabled} {...controlProps} />
+          <Checkbox disabled={disabled} {...controlProps} />
         </FieldItemControlGroup>
         <FieldItemContent magnitude={magnitude} description={description}>
           {label}
diff --git a/packages/propel/src/components/checkbox-group-field/checkbox-group-field-option.tsx b/packages/propel/src/components/checkbox-group-field/checkbox-group-field-option.tsx
index 4096edec..0389ef67 100644
--- a/packages/propel/src/components/checkbox-group-field/checkbox-group-field-option.tsx
+++ b/packages/propel/src/components/checkbox-group-field/checkbox-group-field-option.tsx
@@ -2,17 +2,14 @@ import type * as React from "react";
 
 import { FieldItemControlGroup } from "../../elements/field/field-item-control-group";
 import type { FieldMagnitude } from "../../elements/field/variants";
-import {
-  CheckboxFieldControl,
-  type CheckboxFieldControlProps,
-} from "../../internal/checkbox-field-control";
 import { useFieldOptionMagnitude } from "../../internal/field-option-magnitude";
+import { Checkbox, type CheckboxProps } from "../checkbox";
 import { FieldItem, FieldItemContent } from "../field";
 
-export type CheckboxGroupFieldOptionProps = Omit<
-  CheckboxFieldControlProps,
-  "aria-label" | "label" | "icon"
-> & {
+/** Bare checkbox control props for a field row — no chip `label` / `icon` (Field owns labeling). */
+type CheckboxFieldControlProps = Omit<CheckboxProps, "children" | "label" | "icon">;
+
+export type CheckboxGroupFieldOptionProps = Omit<CheckboxFieldControlProps, "aria-label"> & {
   /** Visible option label. */
   label: string;
   /** Optional supporting text announced as the checkbox description. */
@@ -33,7 +30,7 @@ export function CheckboxGroupFieldOption({
   return (
     <FieldItem disabled={props.disabled}>
       <FieldItemControlGroup>
-        <CheckboxFieldControl {...props} />
+        <Checkbox {...props} />
       </FieldItemControlGroup>
       <FieldItemContent magnitude={magnitude} description={description}>
         {label}
diff --git a/packages/propel/src/components/checkbox-group-field/checkbox-group-field.stories.tsx b/packages/propel/src/components/checkbox-group-field/checkbox-group-field.stories.tsx
index fb65e1ee..5990ae7a 100644
--- a/packages/propel/src/components/checkbox-group-field/checkbox-group-field.stories.tsx
+++ b/packages/propel/src/components/checkbox-group-field/checkbox-group-field.stories.tsx
@@ -101,16 +101,18 @@ export const InvalidInteraction: Story = {
   ...Invalid,
   tags: ["!dev", "!autodocs", "!manifest"],
   play: async ({ canvas }) => {
-    const dangerBorder = getComputedStyle(document.documentElement)
+    const dangerStroke = getComputedStyle(document.documentElement)
       .getPropertyValue("--border-danger-strong")
       .trim();
     for (const box of canvas.getAllByRole("checkbox")) {
       await expect(box).toHaveAttribute("data-invalid");
-      const borderColor = getComputedStyle(box).borderColor;
+      // The danger stroke is an inset box-shadow, not a border-color (the border is a transparent
+      // gutter). Checked boxes drop the stroke (`data-checked:shadow-none`); unchecked keep it.
+      const boxShadow = getComputedStyle(box).boxShadow;
       if (box.getAttribute("aria-checked") === "true") {
-        await expect(borderColor).not.toBe(dangerBorder);
+        await expect(boxShadow).not.toContain(dangerStroke);
       } else {
-        await expect(borderColor).toBe(dangerBorder);
+        await expect(boxShadow).toContain(dangerStroke);
       }
     }
   },
diff --git a/packages/propel/src/components/checkbox/checkbox.stories.tsx b/packages/propel/src/components/checkbox/checkbox.stories.tsx
index 3fb3b202..c931d267 100644
--- a/packages/propel/src/components/checkbox/checkbox.stories.tsx
+++ b/packages/propel/src/components/checkbox/checkbox.stories.tsx
@@ -79,6 +79,7 @@ export const States: Story = {
       <Checkbox label="Indeterminate" indeterminate />
       <Checkbox label="Disabled" disabled />
       <Checkbox label="Disabled checked" disabled defaultChecked />
+      <Checkbox label="Disabled indeterminate" disabled indeterminate />
     </div>
   ),
 };
@@ -114,6 +115,22 @@ export const WithLabel: Story = {
   render: () => <Checkbox label="Send me product updates" defaultChecked />,
 };
 
+/**
+ * Interaction test: clicking the label text (not the box) toggles via the ready-made's
+ * `htmlFor`/`id` association. Tagged out of the sidebar/docs/manifest while still running under the
+ * default `test` tag.
+ */
+export const LabelClickToggles: Story = {
+  ...WithLabel,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas, userEvent }) => {
+    const box = canvas.getByRole("checkbox");
+    await expect(box).toHaveAttribute("aria-checked", "true");
+    await userEvent.click(canvas.getByText("Send me product updates"));
+    await expect(box).toHaveAttribute("aria-checked", "false");
+  },
+};
+
 /**
  * An optional `icon` sits between the box and the label, matching the Figma "checkbox with label"
  * icon slot.
@@ -169,10 +186,10 @@ export const Invalid: Story = {
 };
 
 /**
- * Interaction test: the invalid `Field` propagates `data-invalid` and the danger border on the
- * RESTING box only — once checked, the danger border clears back to transparent (the accent fill
- * alone communicates the value; a required-and-now-satisfied checkbox shouldn't still ring red).
- * Tagged out of the sidebar/docs/manifest while still running under the default `test` tag.
+ * Interaction test: the invalid `Field` propagates `data-invalid` and the danger inset stroke on
+ * the RESTING box only — once checked, the stroke clears (`shadow-none`) so the accent fill alone
+ * communicates the value; a required-and-now-satisfied checkbox shouldn't still ring red. Tagged
+ * out of the sidebar/docs/manifest while still running under the default `test` tag.
  */
 export const InvalidInteraction: Story = {
   ...Invalid,
@@ -184,9 +201,9 @@ export const InvalidInteraction: Story = {
     // The invalid `Field` propagates `data-invalid` onto the box (Base UI Field -> Checkbox.Root).
     await expect(unchecked).toHaveAttribute("data-invalid");
     await expect(unchecked).toHaveAttribute("aria-checked", "false");
-    // ...and the danger border actually renders: its border color differs from the resting box.
-    await expect(getComputedStyle(unchecked).borderColor).not.toBe(
-      getComputedStyle(resting).borderColor,
+    // ...and the danger inset stroke actually renders: its box-shadow differs from the resting box.
+    await expect(getComputedStyle(unchecked).boxShadow).not.toBe(
+      getComputedStyle(resting).boxShadow,
     );
     // Checked invalid box: accent-blue fill, like every other state...
     await expect(checked).toHaveAttribute("aria-checked", "true");
@@ -194,12 +211,10 @@ export const InvalidInteraction: Story = {
     await expect(getComputedStyle(checked).backgroundColor).not.toBe(
       getComputedStyle(resting).backgroundColor,
     );
-    // ...and, despite still being `data-invalid`, the danger border does NOT persist through the
-    // checked fill: `data-checked:border-transparent` takes over, same as a checked box anywhere
-    // else — it must NOT still show the unchecked invalid box's red border.
-    await expect(getComputedStyle(checked).borderColor).not.toBe(
-      getComputedStyle(unchecked).borderColor,
-    );
+    // ...and, despite still being `data-invalid`, the danger stroke does NOT persist through the
+    // checked fill: `data-checked:shadow-none` takes over — it must NOT still show the unchecked
+    // invalid box's red inset stroke. (Ring tokens may leave transparent 0px layers.)
+    await expect(getComputedStyle(checked).boxShadow.includes("1px inset")).toBe(false);
   },
 };
 
@@ -356,6 +371,41 @@ export const BoxDoesNotShiftOnToggle: Story = {
   },
 };
 
+/**
+ * Same baseline-shift trap as `BoxDoesNotShiftOnToggle`, but on the labeled row: the
+ * `CheckboxLabel` is itself `inline-flex`, so without `align-top` its baseline moves when the
+ * nested box mounts the check — nudging the whole chip (box + optional icon + text) ~2px. Assert
+ * the label row's geometry is identical across unchecked / checked.
+ */
+export const LabeledRowDoesNotShiftOnToggle: Story = {
+  ...Interaction,
+  tags: ["!dev", "!autodocs", "!manifest"],
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Checkbox
+      icon={<Icon icon={Repeat} tint="secondary" magnitude="sm" />}
+      label="Sync automatically"
+    />
+  ),
+  play: async ({ canvas }) => {
+    const box = canvas.getByRole("checkbox");
+    const row = box.closest("label");
+    if (!row) throw new Error("expected the labeled checkbox's label row");
+
+    await expect(box).toHaveAttribute("aria-checked", "false");
+    const unchecked = row.getBoundingClientRect();
+
+    await userEvent.click(box);
+    await expect(box).toHaveAttribute("aria-checked", "true");
+    const checked = row.getBoundingClientRect();
+
+    await expect(checked.x).toBe(unchecked.x);
+    await expect(checked.y).toBe(unchecked.y);
+    await expect(checked.width).toBe(unchecked.width);
+    await expect(checked.height).toBe(unchecked.height);
+  },
+};
+
 /**
  * Pure interaction test: a disabled checkbox does not toggle when clicked. Tagged
  * `!dev`/`!autodocs`/`!manifest` so it stays out of the sidebar, docs, and the AI/MCP manifest, but
diff --git a/packages/propel/src/components/checkbox/checkbox.tsx b/packages/propel/src/components/checkbox/checkbox.tsx
index c0492f01..92d2c48b 100644
--- a/packages/propel/src/components/checkbox/checkbox.tsx
+++ b/packages/propel/src/components/checkbox/checkbox.tsx
@@ -17,11 +17,15 @@ export type CheckboxProps = Omit<BaseCheckbox.Root.Props, "className" | "style"
    * or `aria-labelledby`.
    */
   label?: string;
-  /** Width of the clickable label row when `label` is present. */
+  /**
+   * Width of the clickable label row when `label` is present. Defaults to `"hug"` (ready-made
+   * concern — the elements `CheckboxLabel` requires `sizing` explicitly).
+   */
   sizing?: CheckboxLabelSizing;
   /**
    * Element shown between the box and the label (inline-start), e.g. `<Icon icon={User}
-   * tint="secondary" magnitude="sm" />`. Only rendered when `label` is present.
+   * tint="secondary" magnitude="sm" />`. Only rendered when `label` is present. Prefer the shared
+   * `Icon` (a direct `aria-hidden` span) so the label's disabled tint override can recolor it.
    */
   icon?: React.ReactNode;
 };
@@ -31,7 +35,7 @@ export type CheckboxProps = Omit<BaseCheckbox.Root.Props, "className" | "style"
  * check and indeterminate indicators, and optionally wraps the row in a clickable `CheckboxLabel`
  * with an icon slot.
  */
-export function Checkbox({ label, sizing, icon, id, ...props }: CheckboxProps) {
+export function Checkbox({ label, sizing = "hug", icon, id, ...props }: CheckboxProps) {
   // Generate a stable id so an explicit `label` can be associated with the box.
   const generatedId = React.useId();
   const checkboxId = id ?? generatedId;
diff --git a/packages/propel/src/elements/checkbox/checkbox-label.tsx b/packages/propel/src/elements/checkbox/checkbox-label.tsx
index 414ab69c..ceae28be 100644
--- a/packages/propel/src/elements/checkbox/checkbox-label.tsx
+++ b/packages/propel/src/elements/checkbox/checkbox-label.tsx
@@ -9,10 +9,12 @@ export type CheckboxLabelProps = Omit<useRender.ComponentProps<"label">, "classN
   CheckboxLabelVariantProps;
 
 /**
- * The clickable row chip that wraps a `Checkbox` box with an optional `CheckboxIcon` and the label
+ * The clickable row chip that wraps a `Checkbox` box with an optional leading icon and the label
  * text, matching the Figma "Checkbox with label" component. Associate it with the box via `htmlFor`
  * so clicking anywhere in the row toggles the box. The row reads its disabled look off the wrapped
- * `Checkbox` (which carries `data-disabled`) via `:has()`, so it takes no `disabled` prop.
+ * `Checkbox` (which carries `data-disabled`) via `:has()`, so it takes no `disabled` prop. Pass the
+ * icon as a direct-child `aria-hidden` span (e.g. the shared `Icon`) so the disabled tint override
+ * applies.
  */
 export function CheckboxLabel({ sizing, render, ...props }: CheckboxLabelProps) {
   const defaultProps: useRender.ElementProps<"label"> = {
diff --git a/packages/propel/src/elements/checkbox/checkbox.stories.tsx b/packages/propel/src/elements/checkbox/checkbox.stories.tsx
index 72062568..99be2c91 100644
--- a/packages/propel/src/elements/checkbox/checkbox.stories.tsx
+++ b/packages/propel/src/elements/checkbox/checkbox.stories.tsx
@@ -52,20 +52,35 @@ export const Default: Story = {
 /**
  * Every visual state, pinned statically. Resting is the bare box (Base UI mounts no indicator while
  * unchecked); `data-checked` fills the accent and shows the check; `data-indeterminate` hides the
- * check and reveals the dash; focus-visible (forced via pseudo-states) draws the accent ring;
- * `data-disabled` dims the border, fill, and glyph; `data-invalid` is the error look — a STATE, not
- * a prop: inside an invalid `Field.Root` Base UI sets it on the box (any host can set it directly,
- * as here) to recolor the resting border to danger. Once checked, the invalid box keeps the same
- * accent fill as every other checked state.
+ * check and reveals the dash; hover (forced via pseudo-states) paints the box-level treatments —
+ * `transparent-hover` wash while unchecked, darker `accent-primary-hover` while checked or
+ * indeterminate; focus-visible (also forced) draws the accent ring; `data-disabled` dims the
+ * border, fill, and glyph; `data-invalid` is the error look — a STATE, not a prop: inside an
+ * invalid `Field.Root` Base UI sets it on the box (any host can set it directly, as here) to
+ * recolor the resting border to danger. Once checked, the invalid box keeps the same accent fill as
+ * every other checked state.
  */
 export const States: Story = {
   parameters: {
     controls: { disable: true },
-    pseudo: { focusVisible: ["#elements-checkbox-focus-visible"] },
+    pseudo: {
+      hover: [
+        "#elements-checkbox-hover-unchecked",
+        "#elements-checkbox-hover-checked",
+        "#elements-checkbox-hover-indeterminate",
+      ],
+      focusVisible: ["#elements-checkbox-focus-visible"],
+    },
   },
   render: () => (
     <div className="flex items-center gap-4">
       <Checkbox role="checkbox" aria-checked="false" aria-label="Unchecked" />
+      <Checkbox
+        id="elements-checkbox-hover-unchecked"
+        role="checkbox"
+        aria-checked="false"
+        aria-label="Hover unchecked"
+      />
       <Checkbox role="checkbox" aria-checked="true" aria-label="Checked" data-checked="">
         <CheckboxIndicator data-checked="">
           <Check aria-hidden />
@@ -74,6 +89,20 @@ export const States: Story = {
           <Minus aria-hidden />
         </CheckboxIndeterminateIndicator>
       </Checkbox>
+      <Checkbox
+        id="elements-checkbox-hover-checked"
+        role="checkbox"
+        aria-checked="true"
+        aria-label="Hover checked"
+        data-checked=""
+      >
+        <CheckboxIndicator data-checked="">
+          <Check aria-hidden />
+        </CheckboxIndicator>
+        <CheckboxIndeterminateIndicator data-checked="">
+          <Minus aria-hidden />
+        </CheckboxIndeterminateIndicator>
+      </Checkbox>
       <Checkbox
         role="checkbox"
         aria-checked="mixed"
@@ -87,6 +116,20 @@ export const States: Story = {
           <Minus aria-hidden />
         </CheckboxIndeterminateIndicator>
       </Checkbox>
+      <Checkbox
+        id="elements-checkbox-hover-indeterminate"
+        role="checkbox"
+        aria-checked="mixed"
+        aria-label="Hover indeterminate"
+        data-indeterminate=""
+      >
+        <CheckboxIndicator data-indeterminate="">
+          <Check aria-hidden />
+        </CheckboxIndicator>
+        <CheckboxIndeterminateIndicator data-indeterminate="">
+          <Minus aria-hidden />
+        </CheckboxIndeterminateIndicator>
+      </Checkbox>
       <Checkbox
         id="elements-checkbox-focus-visible"
         role="checkbox"
@@ -151,9 +194,11 @@ export const States: Story = {
 
 /**
  * Hidden CSS canary: asserts the pinned `data-*` states compile to real styling — the
- * `data-invalid` border and `data-checked` fill differ from resting, the invalid+checked box keeps
- * the same accent fill as the plain checked box, and inside the indeterminate box the check
- * computes `display: none` while the dash computes `inline-flex`. Tagged out of the
+ * `data-invalid` inset stroke and `data-checked` fill differ from resting, the invalid+checked box
+ * keeps the same accent fill as the plain checked box, disabled unchecked/checked use
+ * `--txt-disabled` for the inset stroke and fill, the three box-level hovers (forced via
+ * pseudo-states) shift fill away from their resting counterparts, and inside the indeterminate box
+ * the check computes `display: none` while the dash computes `inline-flex`. Tagged out of the
  * sidebar/docs/manifest while still running under the default `test` tag.
  */
 export const StatesCssCanary: Story = {
@@ -163,21 +208,40 @@ export const StatesCssCanary: Story = {
     const resting = canvas.getByRole("checkbox", { name: "Unchecked" });
     const checked = canvas.getByRole("checkbox", { name: "Checked" });
     const invalid = canvas.getByRole("checkbox", { name: "Invalid" });
-    // `data-invalid` recolors the resting border to danger.
-    await expect(getComputedStyle(invalid).borderColor).not.toBe(
-      getComputedStyle(resting).borderColor,
-    );
-    // `data-checked` swaps the bordered box for the accent fill.
+    // Stroke lives on `box-shadow` (transparent CSS border reserves the 1px Figma gutter).
+    // `data-invalid` recolors the resting inset stroke to danger.
+    await expect(getComputedStyle(invalid).boxShadow).not.toBe(getComputedStyle(resting).boxShadow);
+    await expect(getComputedStyle(resting).boxShadow.includes("1px inset")).toBe(true);
+    // `data-checked` swaps the stroked box for the accent fill and clears the inset stroke.
+    // (Ring tokens may leave transparent 0px shadow layers, so assert no `1px inset` stroke.)
     await expect(getComputedStyle(checked).backgroundColor).not.toBe(
       getComputedStyle(resting).backgroundColor,
     );
+    await expect(getComputedStyle(checked).boxShadow.includes("1px inset")).toBe(false);
     // Once checked, the invalid box keeps the same accent fill as the plain checked box.
     const invalidChecked = canvas.getByRole("checkbox", { name: "Invalid checked" });
     await expect(getComputedStyle(invalidChecked).backgroundColor).toBe(
       getComputedStyle(checked).backgroundColor,
     );
-    // In the mixed state the check hides itself and the dash reveals itself off `data-indeterminate`.
+    // Disabled: Figma `#71777A` via `--txt-disabled` — inset stroke (unchecked) and fill (checked)
+    // both differ from their enabled counterparts; checked clears the stroke.
+    const disabled = canvas.getByRole("checkbox", { name: "Disabled" });
+    const disabledChecked = canvas.getByRole("checkbox", { name: "Disabled checked" });
+    await expect(getComputedStyle(disabled).boxShadow).not.toBe(
+      getComputedStyle(resting).boxShadow,
+    );
+    await expect(getComputedStyle(disabled).boxShadow.includes("1px inset")).toBe(true);
+    await expect(getComputedStyle(disabledChecked).backgroundColor).not.toBe(
+      getComputedStyle(checked).backgroundColor,
+    );
+    await expect(getComputedStyle(disabledChecked).boxShadow.includes("1px inset")).toBe(false);
+    // Box-level hovers (unchecked wash, darker accent for checked/indeterminate) are demonstrated
+    // in `States` for docs but NOT asserted here: like every canary in the tree, this one only
+    // checks static `data-*`/`aria-*` styling. The pseudo-states addon's forced `:hover` does not
+    // compute in the vitest browser env — the unchecked wash is a 4%-alpha overlay that reads as
+    // transparent-over-transparent, indistinguishable from the resting box.
     const indeterminate = canvas.getByRole("checkbox", { name: "Indeterminate" });
+    // In the mixed state the check hides itself and the dash reveals itself off `data-indeterminate`.
     const [check, dash] = Array.from(indeterminate.children) as HTMLElement[];
     await expect(getComputedStyle(check).display).toBe("none");
     await expect(getComputedStyle(dash).display).not.toBe("none");
@@ -196,10 +260,16 @@ export const Labeled: Story = {
   parameters: {
     controls: { disable: true },
     pseudo: { hover: ["#elements-checkbox-label-hover"] },
+    a11y: {
+      // The disabled row pins `data-disabled`, so axe evaluates the muted `text/disabled` (#71777A)
+      // label it never sees live — but WCAG 1.4.3 exempts disabled controls from contrast. Same
+      // rationale as the autocomplete/select `Popup` canaries.
+      config: { rules: [{ id: "color-contrast", enabled: false }] },
+    },
   },
   render: () => (
     <div className="flex flex-col items-start gap-2">
-      <CheckboxLabel>
+      <CheckboxLabel sizing="hug">
         <Checkbox
           role="checkbox"
           aria-checked="true"
@@ -215,11 +285,11 @@ export const Labeled: Story = {
         </Icon>
         Sync automatically
       </CheckboxLabel>
-      <CheckboxLabel id="elements-checkbox-label-hover">
+      <CheckboxLabel id="elements-checkbox-label-hover" sizing="hug">
         <Checkbox role="checkbox" aria-checked="false" aria-label="Hovered row" />
         Hovered row
       </CheckboxLabel>
-      <CheckboxLabel>
+      <CheckboxLabel sizing="hug">
         <Checkbox
           role="checkbox"
           aria-checked="false"
@@ -232,3 +302,27 @@ export const Labeled: Story = {
     </div>
   ),
 };
+
+/**
+ * The label row's only variant axis: `hug` sizes to content; `fill` stretches to the container
+ * width (e.g. a settings list where the whole row is the hit target).
+ */
+export const Sizing: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex w-72 flex-col gap-2">
+      <CheckboxLabel sizing="hug">
+        <Checkbox role="checkbox" aria-checked="false" aria-label="Hug" />
+        Hug
+      </CheckboxLabel>
+      <CheckboxLabel sizing="fill">
+        <Checkbox role="checkbox" aria-checked="true" aria-label="Fill" data-checked="">
+          <CheckboxIndicator data-checked="">
+            <Check aria-hidden />
+          </CheckboxIndicator>
+        </Checkbox>
+        Fill
+      </CheckboxLabel>
+    </div>
+  ),
+};
diff --git a/packages/propel/src/elements/checkbox/variants.ts b/packages/propel/src/elements/checkbox/variants.ts
index 8fde55ce..1626f3ea 100644
--- a/packages/propel/src/elements/checkbox/variants.ts
+++ b/packages/propel/src/elements/checkbox/variants.ts
@@ -26,15 +26,24 @@ export const checkboxIndeterminateIndicatorVariants = cva(
 // disabled state off the wrapped `Checkbox` (Base UI — and `Field.Root` — set `data-disabled` on
 // it) via `:has()`, so it needs no `disabled` prop: it cancels the hover background and shows the
 // not-allowed cursor whenever a descendant is disabled.
-const checkboxLabelDefaultVariants = {
-  sizing: "hug",
-} as const;
-
+// No `defaultVariants` — `sizing` is required here; the ready-made `components/Checkbox` resolves
+// the consumer default (`"hug"`) per AGENTS rule 13.
 export const checkboxLabelVariants = cva(
   cx(
-    "inline-flex items-center gap-2 rounded-sm px-2 py-1",
-    "text-13 text-secondary transition-colors",
-    "cursor-pointer not-has-[[data-disabled]]:hover:bg-layer-transparent-hover has-[[data-disabled]]:cursor-not-allowed",
+    // `align-top`: an `inline-flex` row baseline-aligns to its first item. The box is empty while
+    // unchecked and gains a check/dash SVG while checked — that changes the row's baseline and
+    // used to nudge the whole chip (box + icon + text) ~2px on toggle. `vertical-align: top`
+    // pins the row to the line box so geometry stays put (same fix as the bare box's `align-top`).
+    "inline-flex items-center gap-2 rounded-sm px-2 py-1 align-top",
+    // Figma `font/body-xs/regular` + `text/secondary` — use the composite type utility (not bare
+    // `text-13`) so size 13, weight regular, and line-height 154% all apply together. Disabled
+    // recolors the label to `text/disabled` (#71777A) off the wrapped box's `data-disabled`. The
+    // optional icon slot is overridden via `[&>span[aria-hidden]]` — that assumes a direct-child
+    // `aria-hidden` span (the shared `Icon`). Pass that shape (or equivalent); a bare SVG /
+    // fragment / nested wrapper will keep its own tint when disabled.
+    "text-body-xs-regular text-secondary transition-colors",
+    "cursor-pointer not-has-[[data-disabled]]:hover:bg-layer-transparent-hover",
+    "has-[[data-disabled]]:cursor-not-allowed has-[[data-disabled]]:text-disabled has-[[data-disabled]]:[&>span[aria-hidden]]:text-disabled",
   ),
   {
     variants: {
@@ -43,13 +52,9 @@ export const checkboxLabelVariants = cva(
         fill: "w-full",
       },
     },
-    defaultVariants: checkboxLabelDefaultVariants,
   },
 );
 
 type CheckboxLabelVariantConfig = VariantProps<typeof checkboxLabelVariants>;
 export type CheckboxLabelSizing = NonNullable<CheckboxLabelVariantConfig["sizing"]>;
-export type CheckboxLabelVariantProps = StrictVariantProps<
-  typeof checkboxLabelVariants,
-  keyof typeof checkboxLabelDefaultVariants
->;
+export type CheckboxLabelVariantProps = StrictVariantProps<typeof checkboxLabelVariants>;
diff --git a/packages/propel/src/elements/menu/menu-checkbox-item-indicator.tsx b/packages/propel/src/elements/menu/menu-checkbox-item-indicator.tsx
index a0801a63..5212eb00 100644
--- a/packages/propel/src/elements/menu/menu-checkbox-item-indicator.tsx
+++ b/packages/propel/src/elements/menu/menu-checkbox-item-indicator.tsx
@@ -9,11 +9,11 @@ export type MenuCheckboxItemIndicatorProps = Omit<
 >;
 
 /**
- * The styled checkbox BOX shown at the leading edge of a checkbox item (the 16px bordered square
- * that fills the accent on `data-checked`; its glyph child stays hidden until checked). Base-UI-
- * agnostic — graft the indicator behavior in `components` via `<BaseMenu.CheckboxItemIndicator
- * keepMounted render={<MenuCheckboxItemIndicator />} />` (keeping it mounted shows the empty box
- * when unchecked).
+ * The styled checkbox BOX shown at the leading edge of a checkbox item (16px hit-target, 14px inset
+ * chrome that fills the accent on `data-checked`; its glyph child stays hidden until checked).
+ * Base-UI-agnostic — graft the indicator behavior in `components` via
+ * `<BaseMenu.CheckboxItemIndicator keepMounted render={<MenuCheckboxItemIndicator />} />` (keeping
+ * it mounted shows the empty box when unchecked).
  */
 export function MenuCheckboxItemIndicator({ render, ...props }: MenuCheckboxItemIndicatorProps) {
   const defaultProps: useRender.ElementProps<"span"> = {
diff --git a/packages/propel/src/internal/checkbox-box.ts b/packages/propel/src/internal/checkbox-box.ts
index 25bf2fea..1188ace7 100644
--- a/packages/propel/src/internal/checkbox-box.ts
+++ b/packages/propel/src/internal/checkbox-box.ts
@@ -1,35 +1,51 @@
 import { cva, cx } from "class-variance-authority";
 
 /**
- * The checkbox BOX look: the 16px bordered square that fills the accent on
- * `data-checked`/`data-indeterminate`. Shared chrome — the `Checkbox` box (`elements/checkbox`) and
- * the menu's checkbox indicator (`elements/menu`) both render it, so it lives in `internal/` (rule
- * 4: no cross-component cva coupling). Reacts to the standard Base UI state attributes
- * (`data-checked`/`data-indeterminate`/`data-disabled`), so any host that sets them gets the look.
- * The error look isn't a prop: it rests at the neutral border and recolors to `danger` off
- * `data-invalid`, which Base UI's `Field.Root` propagates to the `Checkbox.Root` when the field is
- * invalid — so a single checkbox or a whole group tones danger purely from field validity. The
- * danger border is scoped to `not-data-checked:not-data-indeterminate` (rather than a bare
- * `data-invalid:`) so it only ever shows on the RESTING (unchecked) box: without the exclusion, a
- * checked+invalid box (e.g. a required checkbox the user has ticked) keeps the red border because
- * Tailwind's generated stylesheet happens to emit `data-invalid` after `data-checked`, so equal
- * (single-attribute) specificity lets it win the cascade even though the box is no longer invalid
- * in the way that matters visually. Excluding checked/indeterminate makes the selector not match at
- * all once filled, independent of generation order.
+ * The checkbox BOX look: a 16px hit-target whose visible chrome is the 14px inset Figma paints
+ * inside the frame. A transparent `border-sm` reserves that 1px gutter; resting/invalid/disabled
+ * strokes are an inset `box-shadow` on the padding edge (so unchecked isn't a 16px outer ring), and
+ * checked/indeterminate fills clip to the 14px padding box (`bg-clip-padding`). Shared chrome — the
+ * `Checkbox` box (`elements/checkbox`) and the menu's checkbox indicator (`elements/menu`) both
+ * render it, so it lives in `internal/` (rule 4: no cross-component cva coupling). Reacts to the
+ * standard Base UI state attributes (`data-checked`/`data-indeterminate`/`data-disabled`), so any
+ * host that sets them gets the look. The error look isn't a prop: it rests at the neutral stroke
+ * and recolors to `danger` off `data-invalid`, which Base UI's `Field.Root` propagates to the
+ * `Checkbox.Root` when the field is invalid — so a single checkbox or a whole group tones danger
+ * purely from field validity. The danger stroke is scoped to
+ * `not-data-checked:not-data-indeterminate` (rather than a bare `data-invalid:`) so it only ever
+ * shows on the RESTING (unchecked) box: without the exclusion, a checked+invalid box (e.g. a
+ * required checkbox the user has ticked) keeps the red stroke because Tailwind's generated
+ * stylesheet happens to emit `data-invalid` after `data-checked`, so equal (single-attribute)
+ * specificity lets it win the cascade even though the box is no longer invalid in the way that
+ * matters visually. Excluding checked/indeterminate makes the selector not match at all once
+ * filled, independent of generation order.
  */
 export const checkboxBoxVariants = cva(
   cx(
-    "inline-flex size-4 shrink-0 items-center justify-center rounded-sm border-sm border-icon-tertiary align-top [--node-size:0.75rem]",
+    // Transparent border = 1px gutter around the 14px padding box (Figma frame 16 / fill 14).
+    // Resting stroke is the inset shadow — a real `border-icon-tertiary` would sit on the 16px
+    // outer edge and read larger than the checked fill.
+    "inline-flex size-4 shrink-0 items-center justify-center rounded-sm border-sm border-transparent bg-clip-padding align-top [--node-size:0.75rem]",
+    "shadow-[inset_0_0_0_1px_var(--border-color-icon-tertiary)]",
     // `duration-100` (vs Tailwind's 150ms default): the box is a small, frequently-toggled target,
     // so the resting-to-checked fill reads snappier at 100ms — the default read as a beat too slow
-    // for a click-and-move-on control.
-    "transition-colors duration-100 outline-none",
+    // for a click-and-move-on control. Include `shadow` so resting→filled stroke removal eases too.
+    "transition-[color,background-color,box-shadow] duration-100 outline-none",
     "focus-visible:ring-2 focus-visible:ring-accent-strong focus-visible:ring-offset-1",
-    "data-invalid:not-data-checked:not-data-indeterminate:border-danger-strong",
-    "data-checked:border-transparent data-checked:bg-accent-primary data-checked:text-icon-on-color",
-    "data-indeterminate:border-transparent data-indeterminate:bg-accent-primary data-indeterminate:text-icon-on-color",
-    "data-disabled:cursor-not-allowed data-disabled:border-disabled data-disabled:bg-transparent",
-    "data-disabled:data-checked:border-transparent data-disabled:data-checked:bg-layer-disabled data-disabled:data-checked:text-icon-disabled",
-    "data-disabled:data-indeterminate:border-transparent data-disabled:data-indeterminate:bg-layer-disabled data-disabled:data-indeterminate:text-icon-disabled",
+    "data-invalid:not-data-checked:not-data-indeterminate:shadow-[inset_0_0_0_1px_var(--border-color-danger-strong)]",
+    // Box-level hovers (Figma States: unchecked wash, checked/indeterminate darker accent). Scoped
+    // behind `not-data-disabled` so disabled boxes keep their muted fill with no interaction wash.
+    "not-data-disabled:hover:bg-layer-transparent-hover",
+    "data-checked:bg-accent-primary data-checked:text-icon-on-color data-checked:shadow-none",
+    "data-checked:not-data-disabled:hover:bg-accent-primary-hover",
+    "data-indeterminate:bg-accent-primary data-indeterminate:text-icon-on-color data-indeterminate:shadow-none",
+    "data-indeterminate:not-data-disabled:hover:bg-accent-primary-hover",
+    // Disabled: Figma paints stroke + filled states `#71777A` (their icon/disabled swatch). That hex
+    // is already `--txt-disabled` here — use it directly rather than remapping `--txt-icon-disabled`
+    // or inventing border/bg aliases. Check/dash stay `icon/on-color` (white). Avoid
+    // `border-disabled` / `bg-layer-disabled` (soft canvas-tinted surface tokens).
+    "data-disabled:cursor-not-allowed data-disabled:bg-transparent data-disabled:shadow-[inset_0_0_0_1px_var(--txt-disabled)]",
+    "data-disabled:data-checked:bg-(--txt-disabled) data-disabled:data-checked:text-icon-on-color data-disabled:data-checked:shadow-none",
+    "data-disabled:data-indeterminate:bg-(--txt-disabled) data-disabled:data-indeterminate:text-icon-on-color data-disabled:data-indeterminate:shadow-none",
   ),
 );
diff --git a/packages/propel/src/internal/checkbox-field-control.tsx b/packages/propel/src/internal/checkbox-field-control.tsx
deleted file mode 100644
index 286a78e5..00000000
--- a/packages/propel/src/internal/checkbox-field-control.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Checkbox, type CheckboxProps } from "../components/checkbox";
-
-export type CheckboxFieldControlProps = Omit<CheckboxProps, "children" | "label" | "icon">;
-
-/**
- * The bare checkbox box (Root + check + indeterminate indicators) used inside a field row — the
- * label-less form of the ready-made `Checkbox`. Delegating keeps the check/dash icons a
- * `components` concern; with no `label`, `Checkbox` renders just the box and lets the surrounding
- * `Field` own labeling.
- */
-export function CheckboxFieldControl(props: CheckboxFieldControlProps) {
-  return <Checkbox {...props} />;
-}