@databricks/design-system 2.0.2 → 2.0.3

package/dist/fonts/dm-mono/dm-mono.css

@@ -0,0 +1,11 @@
+/* latin */
+@font-face {
+  font-family: 'DM Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./DMMono-Regular.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

package/dist/index-dark.css

@@ -16249,123 +16249,251 @@ span.du-bois-dark-typography-ellipsis-single-line {
   --db-color-tooltip-text-tooltip: #11171c;
 }
 
-/* Layout primitive classes — internal Du Bois use for now (not a published
- * consumer API yet; see the Stefan/Sheng weekly decision to "give it a try
- * just within the Du Bois components"). Two primitives, both plain CSS so they
- * ride the mortar cascade like the other component styles:
- *
- *   .ds-stack    — vertical flow, even gap between direct children.
- *   .ds-cluster  — horizontal group that wraps, even gap between children.
- *
- * Each primitive exposes a small set of `--ds-*` knobs, defaulted on the class
- * itself (not via a `var()` fallback, which would freeze the default at every
- * call site). Override any of them on the element — inline
- * `style={{ '--ds-stack-gap': ... }}` or a more specific selector — without a
- * new modifier class:
- *
- *   stack:   --ds-stack-gap (spacing), --ds-stack-align (align-items)
- *   cluster: --ds-cluster-gap (spacing), --ds-cluster-align (align-items),
- *            --ds-cluster-justify (justify-content)
- *
- * Gap defaults point at the system spacing scale (`--db-space-*`). Padding is
- * intentionally NOT a knob — a layout primitive owns the space between children,
- * not its own box padding. */
+/*
+  Vertical "stack" of elements.
+  Use this for any layout where items are laid out vertically.
 
-/* Cluster wraps by design: a long row reflows onto multiple lines rather than
- * overflowing. A row that must NOT wrap (e.g. a single-line control strip) is
- * not a cluster — keep it bespoke. */
+  \3c !-- Basic: default gap between each child -->
+  <div class="ds-stack">
+    <h2>Title</h2>
+    <p>Body</p>
+    <button>Action</button>
+  </div>
 
-/* Category-tier tokens shared by selection-control components:
- * <Checkbox>, <Switch>, <Radio>. Each value here references a SYSTEM token
- * from system-tokens.css — never a raw hex/px literal — so the only place a
- * brand-level theme change has to land is the system tier.
- *
- * Component-tier files (e.g. design-system/Checkbox/tokens.css) inherit from
- * these via `var()` so consumers can override a single selection control by
- * targeting only its component tokens. */
+  \3c !-- Wider gap for this instance -->
+  <div class="ds-stack" style="--ds-stack-gap: var(--db-spacing-lg)">…</div>
+
+  \3c !-- Don't stretch children to full width (e.g. left-aligned buttons) -->
+  <div class="ds-stack" style="--ds-stack-align: flex-start">…</div>
+ */
+
+/**
+  Responsive, horizontal "cluster" of elements.
+  Use this for any layout where items are laid out horizontally and should wrap on smaller viewport sizes.
+
+    \3c !-- Basic: items wrap as needed -->
+    <div class="ds-cluster">
+      <span>one</span>
+      <span>two</span>
+      <span>three</span>
+    </div>
+
+    \3c !-- Push children apart (e.g. title left, actions right) -->
+    <div class="ds-cluster" style="--ds-cluster-justify: space-between">…</div>
+
+    \3c !-- Looser gap for this instance -->
+    <div class="ds-cluster" style="--ds-cluster-gap: var(--db-spacing-sm)">…</div>
+ */
+
+
+
+:where(.du-bois-dark) {
+  /* Neutral */
+  --db-neutral-surface: var(--db-color-background-primary);
+  --db-subtle-neutral-surface: var(--db-color-background-secondary);
+  --db-strong-neutral-surface: initial; /* TODO */
+
+  --db-text-on-neutral-surface: var(--db-color-text-primary);
+  --db-subtle-text-on-neutral-surface: var(--db-color-text-secondary);
+  --db-strong-text-on-neutral-surface: initial; /* TODO */
+
+  --db-neutral-border: var(--db-color-border);
+  --db-subtle-neutral-border: initial; /* TODO */
+  --db-strong-neutral-border: var(--db-color-border-accessible);
+
+  --db-neutral-surface-active: var(--db-color-table-background-selected-default);
+  --db-neutral-surface-hover: var(--db-color-table-background-unselected-hover);
+  --db-neutral-surface-pressed: var(--db-color-table-background-selected-hover);
+  --db-neutral-surface-disabled: var(--db-color-action-disabled-background);
+  --db-text-on-neutral-surface-disabled: var(--db-color-action-disabled-text);
 
-/* Re-declared under both theme classes as well as :root: these values are
- * `var()` indirections onto SYSTEM tokens, and a custom property resolves its
- * var() at its DECLARATION site. Declared only at :root, they would freeze at
- * the root (light) system values and never re-read the dark system tokens
- * inside a `.du-bois-dark` subtree. Re-declaring at every theme boundary makes
- * the indirection re-resolve per theme. See DUBOIS-448 dark-mode scoping. */
-:where(:root, .du-bois-light, .du-bois-dark) {
-  --db-selection-toggle-bg-default: var(--db-color-background-primary);
-  --db-selection-toggle-bg-hover: var(--db-color-action-default-background-hover);
-  --db-selection-toggle-bg-press: var(--db-color-action-default-background-press);
-  --db-selection-toggle-bg-checked: var(--db-color-action-primary-background-default);
-  --db-selection-toggle-bg-checked-hover: var(--db-color-action-primary-background-hover);
-  --db-selection-toggle-bg-checked-press: var(--db-color-action-primary-background-press);
-  --db-selection-toggle-bg-disabled: var(--db-color-action-disabled-background);
+  /* Primary */
+  --db-primary-surface: var(--db-color-action-primary-background-default);
+  --db-subtle-primary-surface: var(--db-color-action-default-background-hover);
+  --db-strong-primary-surface: var(--db-color-action-primary-background-hover);
 
-  --db-selection-toggle-border-default: var(--db-color-action-default-border-default);
-  --db-selection-toggle-border-hover: var(--db-color-action-primary-background-hover);
-  --db-selection-toggle-border-press: var(--db-color-action-primary-background-press);
-  --db-selection-toggle-border-focus: var(--db-color-action-default-border-focus);
-  --db-selection-toggle-border-disabled: var(--db-color-action-disabled-border);
+  --db-text-on-primary-surface: var(--db-color-action-primary-text-default);
+  --db-primary-text-on-neutral-surface: var(--db-color-action-link-default);
+  --db-subtle-text-on-primary-surface: initial; /* TODO */
+  --db-strong-text-on-primary-surface: var(--db-color-action-primary-text-default);
 
-  /* Raw literal, not a system token (exception to the file rule above): the mark
-   * sits on the theme-invariant blue checked fill, so it must stay white in BOTH
-   * themes. No non-flipping white system token exists — action-primary-icon flips
-   * to near-black under .du-bois-dark, which made the mark nearly invisible. */
-  --db-selection-toggle-icon-color: #ffffff;
-  --db-selection-toggle-icon-color-disabled: var(--db-color-action-disabled-text);
-  --db-selection-toggle-text: var(--db-color-text-primary);
-  --db-selection-toggle-text-disabled: var(--db-color-action-disabled-text);
+  --db-primary-border: var(--db-color-action-primary-background-default);
+  --db-subtle-primary-border: initial; /* TODO */
+  --db-strong-primary-border: var(--db-color-action-primary-background-press);
 
-  --db-selection-toggle-size: 16px;
-  --db-selection-toggle-border-radius: var(--db-radius-sm);
-  --db-selection-toggle-spacing: var(--db-space-sm);
+  --db-primary-surface-active: initial; /* TODO */
+  --db-primary-surface-hover: var(--db-color-action-primary-background-hover);
+  --db-primary-surface-pressed: var(--db-color-action-primary-background-press);
+  --db-primary-surface-disabled: var(--db-color-action-disabled-background);
+  --db-text-on-primary-surface-disabled: var(--db-color-action-disabled-text);
+
+  /* Error */
+  --db-error-surface: var(--db-color-action-danger-primary-background-default);
+  --db-subtle-error-surface: var(--db-color-background-danger);
+  --db-strong-error-surface: var(--db-color-action-danger-primary-background-hover);
+
+  --db-text-on-error-surface: var(--db-color-action-danger-primary-text);
+  --db-error-text-on-neutral-surface: var(--db-color-text-validation-danger);
+  --db-subtle-text-on-error-surface: initial; /* TODO */
+  --db-strong-text-on-error-surface: var(--db-color-action-danger-primary-text);
+
+  --db-error-border: var(--db-color-action-danger-default-border-default);
+  --db-subtle-error-border: var(--db-color-border-danger);
+  --db-strong-error-border: var(--db-color-action-danger-primary-background-press);
+
+  --db-error-surface-active: initial; /* TODO */
+  --db-error-surface-hover: var(--db-color-action-danger-primary-background-hover);
+  --db-error-surface-pressed: var(--db-color-action-danger-primary-background-press);
+  --db-error-surface-disabled: var(--db-color-action-disabled-background);
+  --db-text-on-error-surface-disabled: var(--db-color-action-disabled-text);
+
+  /* Warning */
+  --db-warning-surface: initial; /* TODO */
+  --db-subtle-warning-surface: var(--db-color-background-warning);
+
+  --db-text-on-warning-surface: initial; /* TODO */
+  --db-warning-text-on-neutral-surface: var(--db-color-text-validation-warning);
+
+  --db-warning-border: var(--db-color-border-warning);
+
+  /* Success */
+  --db-success-surface: initial; /* TODO */
+  --db-subtle-success-surface: var(--db-color-background-success);
+
+  --db-text-on-success-surface: initial; /* TODO */
+  --db-success-text-on-neutral-surface: var(--db-color-text-validation-success);
+
+  --db-success-border: initial; /* TODO */
+}
+
+:where(.du-bois-dark) {
+  --db-layout-unit: 0.25rem; /* 4px */
+  --db-density-scalar: 1;
+  --db-size-scalar: 1;
+  --db-spacing-scalar: 1;
+
+  /* Size and spacing are the same steps, but with their own scalars included in the calc. */
+
+  --db-size-3xs: calc(var(--db-layout-unit) * 1 * var(--db-density-scalar) * var(--db-size-scalar)); /* 4px */
+  --db-size-2xs: calc(var(--db-layout-unit) * 2 * var(--db-density-scalar) * var(--db-size-scalar)); /* 8px */
+  --db-size-xs: calc(var(--db-layout-unit) * 4 * var(--db-density-scalar) * var(--db-size-scalar)); /* 16px */
+  --db-size-sm: calc(var(--db-layout-unit) * 6 * var(--db-density-scalar) * var(--db-size-scalar)); /* 24px */
+  --db-size-md: calc(var(--db-layout-unit) * 8 * var(--db-density-scalar) * var(--db-size-scalar)); /* 32px */
+  --db-size-lg: calc(var(--db-layout-unit) * 10 * var(--db-density-scalar) * var(--db-size-scalar)); /* 40px */
+
+  --db-spacing-3xs: calc(var(--db-layout-unit) * 1 * var(--db-density-scalar) * var(--db-spacing-scalar)); /* 4px */
+  --db-spacing-2xs: calc(var(--db-layout-unit) * 2 * var(--db-density-scalar) * var(--db-spacing-scalar)); /* 8px */
+  --db-spacing-xs: calc(var(--db-layout-unit) * 4 * var(--db-density-scalar) * var(--db-spacing-scalar)); /* 16px */
+  --db-spacing-sm: calc(var(--db-layout-unit) * 6 * var(--db-density-scalar) * var(--db-spacing-scalar)); /* 24px */
+  --db-spacing-md: calc(var(--db-layout-unit) * 8 * var(--db-density-scalar) * var(--db-spacing-scalar)); /* 32px */
+  --db-spacing-lg: calc(var(--db-layout-unit) * 10 * var(--db-density-scalar) * var(--db-spacing-scalar)); /* 40px */
+}
+
+:where(.du-bois-dark) {
+  --db-font-family:
+    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --db-mono-font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+
+  --db-font-size-2xs: 0.6875rem; /* 11px */
+  --db-font-size-xs: 0.75rem; /* 12px */
+  --db-font-size-base: 0.8125rem; /* 13px */
+  --db-font-size-md: 0.875rem; /* 14px */
+  --db-font-size-lg: 0.9375rem; /* 15px */
+  --db-font-size-xl: 1rem; /* 16px */
+  --db-font-size-2xl: 1.25rem; /* 20px */
+  --db-font-size-3xl: 1.5rem; /* 24px */
+  --db-font-size-4xl: 2rem; /* 32px */
+
+  /* Du Bois v1 ships 400 and 600 only */
+  --db-font-weight-normal: 400;
+  --db-font-weight-medium: initial; /*  TODO */
+  --db-font-weight-semibold: 600;
+  --db-font-weight-bold: initial; /*  TODO */
+}
+
+:where(.du-bois-dark) {
+  --db-elevation-inset: initial; /*  TODO */
+  --db-elevation-low: 0px 2px 3px -1px rgba(0, 0, 0, 0.05), 0px 1px 0px 0px rgba(0, 0, 0, 0.02);
+  --db-elevation-med: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
+  --db-elevation-high: 0px 8px 40px 0px rgba(0, 0, 0, 0.13);
+}
+
+:where(.du-bois-dark) {
+  --db-focus-ring-color: var(--db-color-action-default-border-focus);
+  --db-focus-ring-width: 2px;
+}
+
+:where(.du-bois-dark) {
+  /* Shape */
+  --db-selection-toggle-border-radius: 4px;
+
+  /* Color */
+  --db-selection-toggle-surface: var(--db-neutral-surface);
+  --db-selection-toggle-mark: var(--db-text-on-primary-surface);
+  --db-selection-toggle-text: var(--db-text-on-neutral-surface);
+  --db-selection-toggle-border: var(--db-strong-neutral-border);
+
+  --db-selection-toggle-surface-hover: var(--db-neutral-surface-hover);
+  --db-selection-toggle-surface-press: var(--db-neutral-surface-pressed);
+  --db-selection-toggle-surface-checked: var(--db-primary-surface);
+  --db-selection-toggle-surface-checked-hover: var(--db-primary-surface-hover);
+  --db-selection-toggle-surface-checked-press: var(--db-primary-surface-pressed);
+  --db-selection-toggle-surface-disabled: var(--db-neutral-surface-disabled);
+  --db-selection-toggle-surface-checked-disabled: var(--db-neutral-surface-disabled);
+
+  --db-selection-toggle-border-hover: var(--db-primary-surface-hover);
+  --db-selection-toggle-border-press: var(--db-primary-surface-pressed);
+  --db-selection-toggle-border-disabled: var(--db-neutral-border);
+
+  --db-selection-toggle-mark-disabled: var(--db-text-on-neutral-surface-disabled);
+  --db-selection-toggle-text-disabled: var(--db-text-on-neutral-surface-disabled);
 
-  /* Focus ring matches AntD legacy variant; offset keeps it outside the toggle.
-   * Hard-coded for now — Figma export doesn't include shadow tokens. */
   --db-selection-toggle-shadow-checked: 0 0 0 1px var(--db-color-action-primary-background-default);
-  --db-selection-toggle-focus-ring-width: 2px;
-  --db-selection-toggle-focus-ring-offset: 2px;
+
+  /* Density */
+  --db-selection-toggle-size: var(--db-size-xs);
+  --db-selection-toggle-label-spacing: var(--db-spacing-2xs);
+
+  /* Motion */
   --db-selection-toggle-transition-duration: 120ms;
 }
 
-/* Component-tier tokens for <Checkbox>. Each value defaults to a CATEGORY
- * (selection-toggle) token via var(); consumers can override here to retheme
- * checkboxes without affecting switch / radio. */
-
-/* Re-declared under both theme classes (not just :root) so the var() chain onto
- * category/system tokens re-resolves inside a `.du-bois-dark` subtree instead of
- * freezing at the root (light) values. See DUBOIS-448 dark-mode scoping. */
-:where(:root, .du-bois-light, .du-bois-dark) {
-  --db-checkbox-size: var(--db-selection-toggle-size);
+:where(.du-bois-dark) {
+  /* Shape */
   --db-checkbox-border-radius: var(--db-selection-toggle-border-radius);
   --db-checkbox-border-width: 1px;
-  --db-checkbox-spacing: var(--db-selection-toggle-spacing);
 
-  --db-checkbox-bg-default: var(--db-selection-toggle-bg-default);
-  --db-checkbox-bg-hover: var(--db-selection-toggle-bg-hover);
-  --db-checkbox-bg-press: var(--db-selection-toggle-bg-press);
-  --db-checkbox-bg-checked: var(--db-selection-toggle-bg-checked);
-  --db-checkbox-bg-checked-hover: var(--db-selection-toggle-bg-checked-hover);
-  --db-checkbox-bg-checked-press: var(--db-selection-toggle-bg-checked-press);
-  --db-checkbox-bg-disabled: var(--db-selection-toggle-bg-disabled);
+  /* Color */
+  --db-checkbox-surface: var(--db-selection-toggle-surface);
+  --db-checkbox-surface-hover: var(--db-color-action-default-background-hover);
+  --db-checkbox-surface-press: var(--db-color-action-default-background-press);
+  --db-checkbox-surface-checked: var(--db-selection-toggle-surface-checked);
+  --db-checkbox-surface-checked-hover: var(--db-selection-toggle-surface-checked-hover);
+  --db-checkbox-surface-checked-press: var(--db-selection-toggle-surface-checked-press);
+  --db-checkbox-surface-disabled: var(--db-selection-toggle-surface-disabled);
 
-  --db-checkbox-border-default: var(--db-selection-toggle-border-default);
+  --db-checkbox-border: var(--db-color-action-default-border-default);
   --db-checkbox-border-hover: var(--db-selection-toggle-border-hover);
   --db-checkbox-border-press: var(--db-selection-toggle-border-press);
-  --db-checkbox-border-focus: var(--db-selection-toggle-border-focus);
-  --db-checkbox-border-disabled: var(--db-selection-toggle-border-disabled);
+  --db-checkbox-focus-ring: var(--db-focus-ring-color);
+  --db-checkbox-border-disabled: var(--db-color-action-disabled-border);
 
-  --db-checkbox-icon-color: var(--db-selection-toggle-icon-color);
-  --db-checkbox-icon-color-disabled: var(--db-selection-toggle-icon-color-disabled);
+  --db-checkbox-mark: #ffffff;
+  --db-checkbox-mark-disabled: var(--db-selection-toggle-mark-disabled);
   --db-checkbox-text: var(--db-selection-toggle-text);
   --db-checkbox-text-disabled: var(--db-selection-toggle-text-disabled);
 
   --db-checkbox-shadow-checked: var(--db-selection-toggle-shadow-checked);
-  --db-checkbox-focus-ring-width: var(--db-selection-toggle-focus-ring-width);
-  --db-checkbox-focus-ring-offset: var(--db-selection-toggle-focus-ring-offset);
-  --db-checkbox-transition-duration: var(--db-selection-toggle-transition-duration);
 
-  /* Indeterminate mark — the horizontal dash shown in the mixed state. */
-  --db-checkbox-indeterminate-mark-width: 8px;
-  --db-checkbox-indeterminate-mark-height: 3px;
+  /* Density */
+  --db-checkbox-size: var(--db-selection-toggle-size);
+  --db-checkbox-label-spacing: var(--db-selection-toggle-label-spacing);
+  --db-checkbox-focus-ring-width: var(--db-focus-ring-width);
+  --db-checkbox-indeterminate-mark-width: var(--db-size-2xs); /* 8px */
+  --db-checkbox-indeterminate-mark-height: calc(var(--db-size-3xs) * 0.75); /* 3px */
+
+  /* Motion */
+  --db-checkbox-transition-duration: var(--db-selection-toggle-transition-duration);
 }
 
 /* Native-input <Checkbox> styles. Classic CSS only — no native nesting (the
@@ -16390,10 +16518,9 @@ span.du-bois-dark-typography-ellipsis-single-line {
  * field) inside the label children, and a descendant `input` selector would hide
  * / absolutely-position that field and mis-drive the `:has(…)` state rules. */
 
-/* Hover/press live on the root (label), not on the input: the input has
- * `pointer-events: none` (so a single click target stays on the label and
- * label/input association toggles the box), which means `input:hover` would
- * never match. Putting `:hover` on the root also makes the entire label area
+/* Hover/press live on the root (label), not on the input: the input is
+ * visually hidden (opacity:0), so an `input:hover` rule wouldn't be visible
+ * anyway. Putting `:hover` on the root also makes the entire label area
  * — not just the indicator square — drive the visual feedback. */
 
 /* Selected fill — checked and indeterminate share the same surface. */
@@ -16406,9 +16533,15 @@ span.du-bois-dark-typography-ellipsis-single-line {
  * `input:disabled` so the standalone-disabled and group-disabled paths both
  * land here without needing a separate root modifier class. */
 
-/* Visually-hidden native input, kept interactive and in the tab order so
- * `:has()` lookups above can read its state. Pointer events fall through to
- * the label, so clicking anywhere toggles the box. */
+/* Visually-hidden native input (opacity:0) overlaying the indicator square,
+ * kept interactive and in the tab order so `:has()` lookups above can read its
+ * state. It stays pointer-clickable — matching AntD's `.ant-checkbox-input` —
+ * so it is the top-most hit-test target over the box: `getByRole('checkbox').click()`
+ * (Playwright, and any coordinate click that lands on the box) resolves to the
+ * real control instead of the decorative indicator overlay. Making the input
+ * `pointer-events: none` (the prior native-only behavior) is what regressed
+ * interaction tests vs. the AntD variant. `cursor: inherit` tracks the label's
+ * pointer / disabled `not-allowed` cursor so the box keeps AntD's cursor too. */
 
 /* Indicator — square with the border/fill that responds to state above.
  * Vertical math: aligns the indicator to the cap-height of the first text
@@ -16452,73 +16585,42 @@ span.du-bois-dark-typography-ellipsis-single-line {
 
 /* Vertical: .ds-stack supplies flex-direction + gap; we only retarget the knob. */
 
-/* Component-tier tokens for <Radio>. Each value defaults to a CATEGORY
- * (selection-toggle) token via var(); consumers can override here to retheme
- * radios without affecting checkbox / switch.
- *
- * Radio differs from Checkbox in two ways: the indicator is a full circle
- * (border-radius) and the "mark" is a filled dot rather than a checkmark/dash. */
-
-/* Re-declared under both theme classes (not just :root) so the var() chain onto
- * category/system tokens re-resolves inside a `.du-bois-dark` subtree instead of
- * freezing at the root (light) values. See DUBOIS-448 dark-mode scoping. */
-:where(:root, .du-bois-light, .du-bois-dark) {
-  --db-radio-size: var(--db-selection-toggle-size);
-  /* Circle, not a rounded square — the one shape token that does NOT inherit
-   * the category (square) radius. */
+:where(.du-bois-dark) {
+  /* Shape */
   --db-radio-border-radius: var(--db-radius-full);
   --db-radio-border-width: 1px;
-  --db-radio-spacing: var(--db-selection-toggle-spacing);
 
-  --db-radio-bg-default: var(--db-selection-toggle-bg-default);
-  --db-radio-bg-hover: var(--db-selection-toggle-bg-hover);
-  --db-radio-bg-press: var(--db-selection-toggle-bg-press);
-  --db-radio-bg-checked: var(--db-selection-toggle-bg-checked);
-  --db-radio-bg-checked-hover: var(--db-selection-toggle-bg-checked-hover);
-  /* AntD checked active/press background is actionDefaultBackgroundPress (NOT the
-   * primary press), so this maps to the default press bg category token — see
-   * getRadioInputStyles checked active in AntDRadioInternal.tsx. */
-  --db-radio-bg-checked-press: var(--db-selection-toggle-bg-press);
-  --db-radio-bg-disabled: var(--db-selection-toggle-bg-disabled);
+  /* Color */
+  --db-radio-surface: var(--db-selection-toggle-surface);
+  --db-radio-surface-hover: var(--db-color-action-default-background-hover);
+  --db-radio-surface-press: var(--db-color-action-default-background-press);
+  --db-radio-surface-checked: var(--db-selection-toggle-surface-checked);
+  --db-radio-surface-checked-hover: var(--db-selection-toggle-surface-checked-hover);
+  --db-radio-surface-checked-press: var(--db-color-action-default-background-press);
+  --db-radio-surface-disabled: var(--db-selection-toggle-surface-disabled);
 
-  --db-radio-border-default: var(--db-selection-toggle-border-default);
+  --db-radio-border: var(--db-color-action-default-border-default);
   --db-radio-border-hover: var(--db-selection-toggle-border-hover);
   --db-radio-border-press: var(--db-selection-toggle-border-press);
-  --db-radio-border-focus: var(--db-selection-toggle-border-focus);
-  --db-radio-border-disabled: var(--db-selection-toggle-border-disabled);
-
-  /* Two-tone checked hover/press border ring (AntD getRadioInputStyles checked
-   * states): the border is a DARKER shade than the fill, not equal to it.
-   * - checked hover border = actionPrimaryBackgroundPress (== the press category
-   *   token, which is action-primary-background-press).
-   * - checked press border = actionDefaultBorderPress; no selection-toggle
-   *   category token equals this color, so reference the system token directly. */
+  --db-radio-border-focus: var(--db-focus-ring-color);
+  --db-radio-border-disabled: var(--db-color-action-disabled-border);
   --db-radio-border-checked-hover: var(--db-selection-toggle-border-press);
   --db-radio-border-checked-press: var(--db-color-action-default-border-press);
+  --db-radio-border-unchecked-focus: var(--db-color-action-primary-background-default);
+  --db-radio-outline-checked-focus: var(--db-color-action-primary-background-default);
 
-  /* Unchecked keyboard-focus border (AntD getRadioInputStyles unchecked focus):
-   * borderColor = actionPrimaryBackgroundDefault, with NO outline ring. No
-   * selection-toggle category token equals this color (the closest is a bg
-   * token), so reference the system token directly. */
-  --db-radio-border-focus-unchecked: var(--db-color-action-primary-background-default);
-  /* Checked focus-visible outline color (AntD: outline 1px solid
-   * actionPrimaryBackgroundDefault, outlineOffset 1). */
-  --db-radio-focus-outline-checked-color: var(--db-color-action-primary-background-default);
-
-  /* The dot. Shares the category icon-color token (white over the filled
-   * primary surface) so a retheme moves checkbox checkmark + radio dot together. */
-  --db-radio-dot-color: var(--db-selection-toggle-icon-color);
-  --db-radio-dot-color-disabled: var(--db-selection-toggle-icon-color-disabled);
+  --db-radio-mark: #ffffff;
+  --db-radio-mark-disabled: var(--db-selection-toggle-mark-disabled);
   --db-radio-text: var(--db-selection-toggle-text);
   --db-radio-text-disabled: var(--db-selection-toggle-text-disabled);
 
-  --db-radio-focus-ring-width: var(--db-selection-toggle-focus-ring-width);
-  --db-radio-focus-ring-offset: var(--db-selection-toggle-focus-ring-offset);
-  --db-radio-transition-duration: var(--db-selection-toggle-transition-duration);
+  /* Density */
+  --db-radio-size: var(--db-selection-toggle-size);
+  --db-radio-label-spacing: var(--db-selection-toggle-label-spacing);
+  --db-radio-mark-size: var(--db-size-3xs);
 
-  /* Diameter of the inner dot. Mirrors the AntD checked `::after` size, which uses
-   * `theme.spacing.xs` (4px) — see getRadioInputStyles in AntDRadioInternal.tsx. */
-  --db-radio-dot-size: var(--db-space-xs);
+  /* Motion */
+  --db-radio-transition-duration: var(--db-selection-toggle-transition-duration);
 }
 
 /* Native-input <Radio> styles. Classic CSS only — no native nesting (the
@@ -16545,9 +16647,9 @@ span.du-bois-dark-typography-ellipsis-single-line {
  * TODO(DUBOIS-452): the indicator/dot state styles below are identical to
  * NativeCheckbox.css — consolidate them into a shared `.ds-selection-toggle` class. */
 
-/* Hover/press live on the root (label), not on the input: the input has
- * `pointer-events: none`, so `input:hover` would never match, and the whole
- * label area should drive the feedback. */
+/* Hover/press live on the root (label), not on the input: the input is
+ * visually hidden (opacity:0), so an `input:hover` rule wouldn't be visible
+ * anyway, and the whole label area should drive the feedback. */
 
 /* Selected fill. */
 
@@ -16572,9 +16674,15 @@ span.du-bois-dark-typography-ellipsis-single-line {
 /* Disabled (covers checked and unchecked). Sourced from `input:disabled` so the
  * standalone-disabled and group-disabled paths both land here. */
 
-/* Visually-hidden native input, kept interactive and in the tab order so the
- * `:has()` lookups above can read its state. Pointer events fall through to the
- * label, so clicking anywhere toggles the radio. */
+/* Visually-hidden native input (opacity:0) overlaying the indicator circle,
+ * kept interactive and in the tab order so the `:has()` lookups above can read
+ * its state. It stays pointer-clickable — matching AntD's `.ant-radio-input` —
+ * so it is the top-most hit-test target over the circle: `getByRole('radio').click()`
+ * (Playwright, and any coordinate click that lands on the circle) resolves to the
+ * real control instead of the decorative indicator overlay. Making the input
+ * `pointer-events: none` (the prior native-only behavior) is what regressed
+ * interaction tests vs. the AntD variant. `cursor: inherit` tracks the label's
+ * pointer / disabled `not-allowed` cursor so the circle keeps AntD's cursor too. */
 
 /* Indicator — circle with the border/fill that responds to state above.
  * Vertical math aligns the indicator to the cap-height of the first text line
@@ -16645,54 +16753,42 @@ span.du-bois-dark-typography-ellipsis-single-line {
 /* AntD `&& + form-message { marginTop: sm }` (horizontal): a form-message following
  * the whole group is separated by sm. */
 
-/* Component-tier tokens for <Switch>. Colors default to the selection-toggle category tokens;
- * geometry is hand-authored (the pill track + sliding thumb are unique to Switch). */
-
-/* Re-declared under both theme classes (not just :root) so the var() chain onto
- * category/system tokens re-resolves inside a `.du-bois-dark` subtree instead of
- * freezing at the root (light) values. See DUBOIS-448 dark-mode scoping. */
-:where(:root, .du-bois-light, .du-bois-dark) {
-  --db-switch-track-width: 28px;
-  --db-switch-track-height: 16px;
-  /* Thumb fills the track height by design; expressed via track-height so the two can't drift. */
-  --db-switch-thumb-size: var(--db-switch-track-height);
-  /* Pill radius overrides the category (square) radius, mirroring Radio's circular override. */
+:where(.du-bois-dark) {
+  /* Shape */
   --db-switch-border-radius: var(--db-radius-full);
   --db-switch-border-width: 1px;
-  --db-switch-spacing: var(--db-selection-toggle-spacing);
 
-  --db-switch-bg-default: var(--db-selection-toggle-bg-default);
-  --db-switch-bg-hover: var(--db-selection-toggle-bg-hover);
-  --db-switch-bg-press: var(--db-selection-toggle-bg-press);
-  --db-switch-bg-checked: var(--db-selection-toggle-bg-checked);
-  --db-switch-bg-checked-hover: var(--db-selection-toggle-bg-checked-hover);
-  --db-switch-bg-checked-press: var(--db-selection-toggle-bg-checked-press);
-  --db-switch-bg-disabled: var(--db-selection-toggle-bg-disabled);
+  /* Color */
+  --db-switch-surface: var(--db-selection-toggle-surface);
+  --db-switch-surface-hover: var(--db-color-action-default-background-hover);
+  --db-switch-surface-press: var(--db-color-action-default-background-press);
+  --db-switch-surface-checked: var(--db-selection-toggle-surface-checked);
+  --db-switch-surface-checked-hover: var(--db-selection-toggle-surface-checked-hover);
+  --db-switch-surface-checked-press: var(--db-selection-toggle-surface-checked-press);
+  --db-switch-surface-disabled: var(--db-selection-toggle-surface-disabled);
+  --db-switch-surface-checked-disabled: var(--db-color-action-disabled-text);
 
-  --db-switch-border-default: var(--db-selection-toggle-border-default);
+  --db-switch-border: var(--db-color-action-default-border-default);
   --db-switch-border-hover: var(--db-selection-toggle-border-hover);
   --db-switch-border-press: var(--db-selection-toggle-border-press);
-  --db-switch-border-disabled: var(--db-selection-toggle-border-disabled);
-  /* AntD paints the checked track border equal to the checked fill, so these alias the checked bg. */
-  --db-switch-border-checked: var(--db-selection-toggle-bg-checked);
-  --db-switch-border-checked-hover: var(--db-selection-toggle-bg-checked-hover);
-  --db-switch-border-checked-press: var(--db-selection-toggle-bg-checked-press);
-  --db-switch-border-focus: var(--db-selection-toggle-bg-checked);
-  /* AntD fills the disabled+checked track with actionDisabledText; no category token matches, so
-   * reference the system token directly (same escape hatch Radio uses for its checked-press border). */
-  --db-switch-bg-checked-disabled: var(--db-color-action-disabled-text);
+  --db-switch-border-disabled: var(--db-color-action-disabled-border);
+  --db-switch-border-checked: var(--db-selection-toggle-surface-checked);
+  --db-switch-border-checked-hover: var(--db-selection-toggle-surface-checked-hover);
+  --db-switch-border-checked-press: var(--db-selection-toggle-surface-checked-press);
+  --db-switch-border-focus: var(--db-selection-toggle-surface-checked);
 
-  /* AntD paints the handle the off-track surface color in every state. */
-  --db-switch-thumb-color: var(--db-selection-toggle-bg-default);
+  --db-switch-thumb: var(--db-selection-toggle-surface);
 
-  /* A token (not inherit) so the label text flips in dark mode. */
-  --db-switch-text: var(--db-color-text-primary);
+  --db-switch-text: var(--db-selection-toggle-text);
   --db-switch-text-disabled: var(--db-selection-toggle-text-disabled);
 
-  /* AntD's focus ring is a 1px outline (the category default is 2px). */
-  --db-switch-focus-ring-width: 1px;
-  --db-switch-focus-ring-offset: 1px;
-  --db-switch-focus-ring-color: var(--db-selection-toggle-border-focus);
+  /* Density */
+  --db-switch-track-width: calc(var(--db-size-xs) * 1.75); /* 28px */
+  --db-switch-track-height: var(--db-size-xs); /* 16px */
+  --db-switch-thumb-size: var(--db-switch-track-height);
+  --db-switch-label-spacing: var(--db-selection-toggle-label-spacing);
+
+  /* Motion */
   --db-switch-transition-duration: var(--db-selection-toggle-transition-duration);
 }
 
@@ -16704,7 +16800,9 @@ span.du-bois-dark-typography-ellipsis-single-line {
 /* `<label for>` propagates `:hover` to the input, so scope hover/press to the control, not `input:hover`. */
 
 /* On focus, recolor the border to the checked-fill color on top of the outline ring. Matching AntD,
- * the ring sits flush when off and gains a 1px offset when checked. */
+ * the ring sits flush when off and gains a 1px offset when checked.
+ * TODO: width/offset are hardcoded 1px to preserve the AntD look; adopt the system 2px focus ring
+ * (var(--db-focus-ring-width)) in a separate change. */
 
 /* Disabled + on: more specific than the plain disabled rule, so it wins regardless of source order. */