@databricks/design-system 2.0.2 → 2.0.4

package/dist/index.css

@@ -15836,7 +15836,7 @@ span.du-bois-light-typography-ellipsis-single-line {
  * Source: design-system/src/theme/tokens/*.json
  * Regenerate via: yarn theme-regenerate */
 
-:where(:root, .du-bois-light) {
+:where(:root), :where(.du-bois-light) {
   --db-radius-0: 0px;
   --db-radius-full: 999px;
   --db-radius-lg: 12px;
@@ -15975,142 +15975,273 @@ span.du-bois-light-typography-ellipsis-single-line {
  * Source: design-system/src/theme/tokens/*.json
  * Regenerate via: yarn theme-regenerate */
 
-/* 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.
+
+  \3c !-- Basic: default gap between each child -->
+  <div class="db-stack">
+    <h2>Title</h2>
+    <p>Body</p>
+    <button>Action</button>
+  </div>
+
+  \3c !-- Wider gap for this instance -->
+  <div class="db-stack" style="--db-stack-gap: var(--db-spacing-lg)">…</div>
+
+  \3c !-- Don't stretch children to full width (e.g. left-aligned buttons) -->
+  <div class="db-stack" style="--db-stack-align: flex-start">…</div>
+ */
+.db-stack {
+  /* These variables act as the *parameters* for the stack instance. */
+  --db-stack-gap: var(--db-spacing-xs);
+  --db-stack-align: stretch;
 
-.ds-stack {
-  --ds-stack-gap: var(--db-space-md);
-  --ds-stack-align: stretch;
   display: flex;
   flex-direction: column;
-  align-items: var(--ds-stack-align);
-  gap: var(--ds-stack-gap);
+  align-items: var(--db-stack-align);
+  gap: var(--db-stack-gap);
 }
 
-/* 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. */
-.ds-cluster {
-  --ds-cluster-gap: var(--db-space-sm);
-  --ds-cluster-align: center;
-  --ds-cluster-justify: flex-start;
+/**
+  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="db-cluster">
+      <span>one</span>
+      <span>two</span>
+      <span>three</span>
+    </div>
+
+    \3c !-- Push children apart (e.g. title left, actions right) -->
+    <div class="db-cluster" style="--db-cluster-justify: space-between">…</div>
+
+    \3c !-- Looser gap for this instance -->
+    <div class="db-cluster" style="--db-cluster-gap: var(--db-spacing-sm)">…</div>
+ */
+.db-cluster {
+  /* These variables act as the *parameters* for the cluster instance. */
+  --db-cluster-gap: var(--db-spacing-2xs);
+  --db-cluster-align: center;
+  --db-cluster-justify: flex-start;
+
   display: flex;
   flex-wrap: wrap;
-  align-items: var(--ds-cluster-align);
-  justify-content: var(--ds-cluster-justify);
-  gap: var(--ds-cluster-gap);
+  align-items: var(--db-cluster-align);
+  justify-content: var(--db-cluster-justify);
+  gap: var(--db-cluster-gap);
 }
 
-/* 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. */
+:where(:root), :where(.du-bois-light) {
+  /* 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);
+
+  /* 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-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);
+
+  --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-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(:root), :where(.du-bois-light) {
+  --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. */
 
-/* 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);
+  --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-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-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(:root), :where(.du-bois-light) {
+  --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(:root), :where(.du-bois-light) {
+  --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(:root), :where(.du-bois-light) {
+  --db-focus-ring-color: var(--db-color-action-default-border-focus);
+  --db-focus-ring-width: 2px;
+}
+
+:where(:root), :where(.du-bois-light) {
+  /* Shape */
+  --db-selection-toggle-border-radius: 4px;
 
-  /* 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);
+  /* 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-size: 16px;
-  --db-selection-toggle-border-radius: var(--db-radius-sm);
-  --db-selection-toggle-spacing: var(--db-space-sm);
+  --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(:root), :where(.du-bois-light) {
+  /* 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
@@ -16121,21 +16252,21 @@ span.du-bois-light-typography-ellipsis-single-line {
  *
  * Structure (assumed by the React component):
  *
- *   <label class="ds-checkbox">
- *     <input type="checkbox" class="ds-checkbox-input" />
- *     <span  class="ds-checkbox-indicator">         ← border + fill react to state
- *       <svg class="ds-checkbox-checkmark" .../>    ← visible when :checked
- *       <span class="ds-checkbox-dash" />           ← visible when :indeterminate
+ *   <label class="db-checkbox">
+ *     <input type="checkbox" class="db-checkbox-input" />
+ *     <span  class="db-checkbox-indicator">         ← border + fill react to state
+ *       <svg class="db-checkbox-checkmark" .../>    ← visible when :checked
+ *       <span class="db-checkbox-dash" />           ← visible when :indeterminate
  *     </span>
- *     <span class="ds-checkbox-label">{children}</span>
+ *     <span class="db-checkbox-label">{children}</span>
  *   </label>
  *
- * State and hiding rules target `.ds-checkbox-input` — the checkbox's OWN input —
+ * State and hiding rules target `.db-checkbox-input` — the checkbox's OWN input —
  * never a bare `input`: consumers may render an inline <input> (e.g. a number
  * field) inside the label children, and a descendant `input` selector would hide
  * / absolutely-position that field and mis-drive the `:has(…)` state rules. */
 
-.ds-checkbox {
+.db-checkbox {
   /* `display: flex` (block-level), NOT `inline-flex`: an inline-flex root puts
    * the label inside an inline-line-box whose leading pushes block-level siblings
    * (e.g. `<FormMessage>`) down by a few pixels — making validation messages sit
@@ -16151,110 +16282,121 @@ span.du-bois-light-typography-ellipsis-single-line {
   user-select: none;
   /* No `gap` here — spacing between indicator and label, plus the trailing
    * whitespace that gives sibling checkboxes their visual separation, lives
-   * on `.ds-checkbox-label` as padding-inline. Matches AntD's `.{prefix}-checkbox + span`
+   * on `.db-checkbox-label` as padding-inline. Matches AntD's `.{prefix}-checkbox + span`
    * rule and the prior Emotion-based NativeCheckbox implementation. */
   min-height: var(--db-line-height-base, 20px);
   width: fit-content;
 }
 
-/* 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. */
-.ds-checkbox:hover:has(.ds-checkbox-input:not(:disabled, :checked, :indeterminate)) .ds-checkbox-indicator {
-  background-color: var(--db-checkbox-bg-hover);
+.db-checkbox:hover:has(.db-checkbox-input:not(:disabled, :checked, :indeterminate)) .db-checkbox-indicator {
+  background-color: var(--db-checkbox-surface-hover);
   border-color: var(--db-checkbox-border-hover);
 }
 
-.ds-checkbox:active:has(.ds-checkbox-input:not(:disabled, :checked, :indeterminate)) .ds-checkbox-indicator {
-  background-color: var(--db-checkbox-bg-press);
+.db-checkbox:active:has(.db-checkbox-input:not(:disabled, :checked, :indeterminate)) .db-checkbox-indicator {
+  background-color: var(--db-checkbox-surface-press);
   border-color: var(--db-checkbox-border-press);
 }
 
 /* Selected fill — checked and indeterminate share the same surface. */
-.ds-checkbox:has(.ds-checkbox-input:is(:checked, :indeterminate)) .ds-checkbox-indicator {
-  background-color: var(--db-checkbox-bg-checked);
-  border-color: var(--db-checkbox-bg-checked);
+.db-checkbox:has(.db-checkbox-input:is(:checked, :indeterminate)) .db-checkbox-indicator {
+  background-color: var(--db-checkbox-surface-checked);
+  border-color: var(--db-checkbox-surface-checked);
 }
 
-.ds-checkbox:hover:has(.ds-checkbox-input:is(:checked, :indeterminate):not(:disabled)) .ds-checkbox-indicator {
-  background-color: var(--db-checkbox-bg-checked-hover);
-  border-color: var(--db-checkbox-bg-checked-hover);
+.db-checkbox:hover:has(.db-checkbox-input:is(:checked, :indeterminate):not(:disabled)) .db-checkbox-indicator {
+  background-color: var(--db-checkbox-surface-checked-hover);
+  border-color: var(--db-checkbox-surface-checked-hover);
 }
 
-.ds-checkbox:active:has(.ds-checkbox-input:is(:checked, :indeterminate):not(:disabled)) .ds-checkbox-indicator {
-  background-color: var(--db-checkbox-bg-checked-press);
-  border-color: var(--db-checkbox-bg-checked-press);
+.db-checkbox:active:has(.db-checkbox-input:is(:checked, :indeterminate):not(:disabled)) .db-checkbox-indicator {
+  background-color: var(--db-checkbox-surface-checked-press);
+  border-color: var(--db-checkbox-surface-checked-press);
 }
 
 /* Mark visibility. */
-.ds-checkbox:has(.ds-checkbox-input:checked) .ds-checkbox-checkmark {
+.db-checkbox:has(.db-checkbox-input:checked) .db-checkbox-checkmark {
   opacity: 1;
 }
 
-.ds-checkbox:has(.ds-checkbox-input:indeterminate) .ds-checkbox-dash {
+.db-checkbox:has(.db-checkbox-input:indeterminate) .db-checkbox-dash {
   opacity: 1;
 }
 
 /* Focus-visible (keyboard only). */
-.ds-checkbox:has(.ds-checkbox-input:focus-visible) .ds-checkbox-indicator {
-  outline: var(--db-checkbox-focus-ring-width) solid var(--db-checkbox-border-focus);
-  outline-offset: var(--db-checkbox-focus-ring-offset);
+.db-checkbox:has(.db-checkbox-input:focus-visible) .db-checkbox-indicator {
+  outline: var(--db-checkbox-focus-ring-width) solid var(--db-checkbox-focus-ring);
+  outline-offset: 4px;
 }
 
 /* Disabled (covers unchecked, checked, indeterminate). Sourced from
  * `input:disabled` so the standalone-disabled and group-disabled paths both
  * land here without needing a separate root modifier class. */
-.ds-checkbox:has(.ds-checkbox-input:disabled) {
+.db-checkbox:has(.db-checkbox-input:disabled) {
   cursor: not-allowed;
 }
 
-.ds-checkbox:has(.ds-checkbox-input:disabled) .ds-checkbox-label {
+.db-checkbox:has(.db-checkbox-input:disabled) .db-checkbox-label {
   color: var(--db-checkbox-text-disabled);
 }
 
-.ds-checkbox:has(.ds-checkbox-input:disabled) .ds-checkbox-indicator {
-  background-color: var(--db-checkbox-bg-disabled);
+.db-checkbox:has(.db-checkbox-input:disabled) .db-checkbox-indicator {
+  background-color: var(--db-checkbox-surface-disabled);
   border-color: var(--db-checkbox-border-disabled);
   box-shadow: none;
 }
 
-.ds-checkbox:has(.ds-checkbox-input:disabled) .ds-checkbox-checkmark {
-  color: var(--db-checkbox-icon-color-disabled);
+.db-checkbox:has(.db-checkbox-input:disabled) .db-checkbox-checkmark {
+  color: var(--db-checkbox-mark-disabled);
 }
 
-.ds-checkbox:has(.ds-checkbox-input:disabled) .ds-checkbox-dash {
-  background-color: var(--db-checkbox-icon-color-disabled);
+.db-checkbox:has(.db-checkbox-input:disabled) .db-checkbox-dash {
+  background-color: var(--db-checkbox-mark-disabled);
 }
 
-/* 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. */
-.ds-checkbox .ds-checkbox-input {
+/* 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. */
+.db-checkbox .db-checkbox-input {
   position: absolute;
   inset: 0;
   inline-size: var(--db-checkbox-size);
   block-size: var(--db-checkbox-size);
   margin: 0;
   opacity: 0;
-  pointer-events: none;
+  cursor: inherit;
 }
 
 /* Indicator — square with the border/fill that responds to state above.
  * Vertical math: aligns the indicator to the cap-height of the first text
  * line so checkbox + label sit on the same visual baseline even when the
  * label wraps. */
-.ds-checkbox .ds-checkbox-indicator {
+.db-checkbox .db-checkbox-indicator {
   display: grid;
   place-items: center;
   flex-shrink: 0;
+  /* Decorative only — the overlaid input owns hit-testing. Without this, the
+   * indicator (and its inherited checkmark/dash children) intercept
+   * `getByRole('checkbox').click()`; clicks on any edge sliver the input does
+   * not cover fall through to the label, which toggles via label/input
+   * association. */
+  pointer-events: none;
   inline-size: var(--db-checkbox-size);
   block-size: var(--db-checkbox-size);
   margin-top: calc((var(--db-line-height-base, 20px) - var(--db-checkbox-size)) / 2);
-  border: var(--db-checkbox-border-width) solid var(--db-checkbox-border-default);
+  border: var(--db-checkbox-border-width) solid var(--db-checkbox-border);
   border-radius: var(--db-checkbox-border-radius);
-  background-color: var(--db-checkbox-bg-default);
+  background-color: var(--db-checkbox-surface);
   box-sizing: border-box;
   transition:
     background-color var(--db-checkbox-transition-duration) ease,
@@ -16262,16 +16404,16 @@ span.du-bois-light-typography-ellipsis-single-line {
     box-shadow var(--db-checkbox-transition-duration) ease;
 }
 
-.ds-checkbox .ds-checkbox-indicator > .ds-checkbox-checkmark {
+.db-checkbox .db-checkbox-indicator > .db-checkbox-checkmark {
   grid-area: 1 / 1;
   inline-size: 100%;
   block-size: 100%;
-  color: var(--db-checkbox-icon-color);
+  color: var(--db-checkbox-mark);
   opacity: 0;
   transition: opacity var(--db-checkbox-transition-duration) ease;
 }
 
-.ds-checkbox .ds-checkbox-indicator > .ds-checkbox-checkmark path {
+.db-checkbox .db-checkbox-indicator > .db-checkbox-checkmark path {
   fill: none;
   stroke: currentColor;
   stroke-width: 2;
@@ -16279,14 +16421,14 @@ span.du-bois-light-typography-ellipsis-single-line {
   stroke-linejoin: round;
 }
 
-.ds-checkbox .ds-checkbox-indicator > .ds-checkbox-dash {
+.db-checkbox .db-checkbox-indicator > .db-checkbox-dash {
   grid-area: 1 / 1;
   inline-size: var(--db-checkbox-indeterminate-mark-width);
   block-size: var(--db-checkbox-indeterminate-mark-height);
   /* CSS clamps this to half the 3px height, giving fully rounded end caps so the
    * dash reads as a pill rather than a flat bar. */
   border-radius: 4px;
-  background-color: var(--db-checkbox-icon-color);
+  background-color: var(--db-checkbox-mark);
   opacity: 0;
   transition: opacity var(--db-checkbox-transition-duration) ease;
 }
@@ -16296,9 +16438,9 @@ span.du-bois-light-typography-ellipsis-single-line {
  * `padding-right` extends the checkbox's bounding box so adjacent checkboxes in a
  * flex row sit ~16px apart (8px trailing + 8px group `gap`) — same visual rhythm
  * as the AntD variant. */
-.ds-checkbox .ds-checkbox-label {
+.db-checkbox .db-checkbox-label {
   color: var(--db-checkbox-text);
-  padding-inline: var(--db-checkbox-spacing);
+  padding-inline: var(--db-checkbox-label-spacing);
   word-break: break-word;
 }
 
@@ -16309,7 +16451,7 @@ span.du-bois-light-typography-ellipsis-single-line {
  *
  * Each helper-text class is listed once per theme (`du-bois-light-*` /
  * `du-bois-dark-*`). The selectors deliberately repeat the root/group class
- * (`.ds-checkbox.ds-checkbox`) to push specificity to (0,3,0). That
+ * (`.db-checkbox.db-checkbox`) to push specificity to (0,3,0). That
  * overrides `FormMessage`'s own `&&`-doubled `margin-top: 8px` declared with
  * Emotion at runtime — without doubling we'd lose on the specificity tie and
  * the validation message would keep an 8px gap below the checkbox. */
@@ -16317,115 +16459,84 @@ span.du-bois-light-typography-ellipsis-single-line {
 /* Single checkbox followed by Hint and/or FormMessage. Indents the helper text
  * by 24px so it aligns with the start of the label, and removes the default
  * vertical margin Hint/FormMessage carry. */
-.ds-checkbox.ds-checkbox + .du-bois-light-hint,
-.ds-checkbox.ds-checkbox + .du-bois-dark-hint,
-.ds-checkbox.ds-checkbox + .du-bois-light-form-message,
-.ds-checkbox.ds-checkbox + .du-bois-dark-form-message,
-.ds-checkbox.ds-checkbox + .du-bois-light-hint + .du-bois-light-form-message,
-.ds-checkbox.ds-checkbox + .du-bois-dark-hint + .du-bois-dark-form-message {
-  padding-left: var(--db-space-lg);
+.db-checkbox.db-checkbox + .du-bois-light-hint,
+.db-checkbox.db-checkbox + .du-bois-dark-hint,
+.db-checkbox.db-checkbox + .du-bois-light-form-message,
+.db-checkbox.db-checkbox + .du-bois-dark-form-message,
+.db-checkbox.db-checkbox + .du-bois-light-hint + .du-bois-light-form-message,
+.db-checkbox.db-checkbox + .du-bois-dark-hint + .du-bois-dark-form-message {
+  padding-left: var(--db-spacing-sm);
   margin-top: 0;
 }
 
 /* Group spacing against sibling form text — 8px gap above the group when it
  * follows a Hint, 8px gap above a FormMessage when it follows the group.
  * Doubled class on the group side beats FormMessage's `&&` for the same reason. */
-.du-bois-light-hint + .ds-checkbox-group.ds-checkbox-group,
-.du-bois-dark-hint + .ds-checkbox-group.ds-checkbox-group,
-.ds-checkbox-group.ds-checkbox-group + .du-bois-light-form-message,
-.ds-checkbox-group.ds-checkbox-group + .du-bois-dark-form-message {
-  margin-top: var(--db-space-sm);
+.du-bois-light-hint + .db-checkbox-group.db-checkbox-group,
+.du-bois-dark-hint + .db-checkbox-group.db-checkbox-group,
+.db-checkbox-group.db-checkbox-group + .du-bois-light-form-message,
+.db-checkbox-group.db-checkbox-group + .du-bois-dark-form-message {
+  margin-top: var(--db-spacing-2xs);
 }
 
-/* CheckboxGroup layout. Vertical delegates to the `.ds-stack` primitive; the
+/* CheckboxGroup layout. Vertical delegates to the `.db-stack` primitive; the
  * horizontal default stays bespoke because it must NOT wrap (a long row of
  * checkboxes overflows horizontally rather than reflowing onto multiple lines),
- * which is the one thing `.ds-cluster` won't do. Both wire their gap to the
+ * which is the one thing `.db-cluster` won't do. Both wire their gap to the
  * checkbox spacing token so a retheme moves with the rest of the component. */
-.ds-checkbox-group {
+.db-checkbox-group {
   display: flex;
 }
 
-/* Horizontal (default): single non-wrapping row. `:not(.ds-stack)` keeps this
+/* Horizontal (default): single non-wrapping row. `:not(.db-stack)` keeps this
  * off the vertical element so it never fights the stack primitive's gap. */
-.ds-checkbox-group:not(.ds-stack) {
+.db-checkbox-group:not(.db-stack) {
   flex-wrap: nowrap;
-  column-gap: var(--db-checkbox-spacing);
+  column-gap: var(--db-checkbox-label-spacing);
   row-gap: 0;
 }
 
-/* Vertical: .ds-stack supplies flex-direction + gap; we only retarget the knob. */
-.ds-checkbox-group.ds-stack {
-  --ds-stack-gap: var(--db-checkbox-spacing);
+/* Vertical: .db-stack supplies flex-direction + gap; we only retarget the knob. */
+.db-checkbox-group.db-stack {
+  --db-stack-gap: var(--db-checkbox-label-spacing);
 }
 
-/* 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(:root), :where(.du-bois-light) {
+  /* 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
@@ -16436,12 +16547,12 @@ span.du-bois-light-typography-ellipsis-single-line {
  *
  * Structure (assumed by the React component):
  *
- *   <label class="ds-radio">
+ *   <label class="db-radio">
  *     <input type="radio" />
- *     <span  class="ds-radio-indicator">     ← circle border + fill react to state
- *       <span class="ds-radio-dot" />        ← visible when :checked
+ *     <span  class="db-radio-indicator">     ← circle border + fill react to state
+ *       <span class="db-radio-dot" />        ← visible when :checked
  *     </span>
- *     <span class="ds-radio-label">{children}</span>
+ *     <span class="db-radio-label">{children}</span>
  *   </label>
  *
  * The root only ever has one <input> descendant, so a bare `input` selector is
@@ -16450,9 +16561,9 @@ span.du-bois-light-typography-ellipsis-single-line {
  * checkmark/dash, and there is no indeterminate state.
  *
  * TODO(DUBOIS-452): the indicator/dot state styles below are identical to
- * NativeCheckbox.css — consolidate them into a shared `.ds-selection-toggle` class. */
+ * NativeCheckbox.css — consolidate them into a shared `.db-selection-toggle` class. */
 
-.ds-radio {
+.db-radio {
   /* `display: flex` (block-level), NOT `inline-flex`: see NativeCheckbox.css for
    * the line-box / sibling-spacing rationale. */
   display: flex;
@@ -16464,41 +16575,41 @@ span.du-bois-light-typography-ellipsis-single-line {
   width: fit-content;
 }
 
-/* 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. */
-.ds-radio:hover:has(input:not(:disabled, :checked)) .ds-radio-indicator {
-  background-color: var(--db-radio-bg-hover);
+/* 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. */
+.db-radio:hover:has(input:not(:disabled, :checked)) .db-radio-indicator {
+  background-color: var(--db-radio-surface-hover);
   border-color: var(--db-radio-border-hover);
 }
 
-.ds-radio:active:has(input:not(:disabled, :checked)) .ds-radio-indicator {
-  background-color: var(--db-radio-bg-press);
+.db-radio:active:has(input:not(:disabled, :checked)) .db-radio-indicator {
+  background-color: var(--db-radio-surface-press);
   border-color: var(--db-radio-border-press);
 }
 
 /* Selected fill. */
-.ds-radio:has(input:checked) .ds-radio-indicator {
-  background-color: var(--db-radio-bg-checked);
-  border-color: var(--db-radio-bg-checked);
+.db-radio:has(input:checked) .db-radio-indicator {
+  background-color: var(--db-radio-surface-checked);
+  border-color: var(--db-radio-surface-checked);
 }
 
 /* AntD getRadioInputStyles checked hover: background = actionPrimaryBackgroundHover,
  * borderColor = actionPrimaryBackgroundPress (a darker ring than the fill). */
-.ds-radio:hover:has(input:checked:not(:disabled)) .ds-radio-indicator {
-  background-color: var(--db-radio-bg-checked-hover);
+.db-radio:hover:has(input:checked:not(:disabled)) .db-radio-indicator {
+  background-color: var(--db-radio-surface-checked-hover);
   border-color: var(--db-radio-border-checked-hover);
 }
 
 /* AntD getRadioInputStyles checked active: background = actionDefaultBackgroundPress,
  * borderColor = actionDefaultBorderPress (two-tone, not flat). */
-.ds-radio:active:has(input:checked:not(:disabled)) .ds-radio-indicator {
-  background-color: var(--db-radio-bg-checked-press);
+.db-radio:active:has(input:checked:not(:disabled)) .db-radio-indicator {
+  background-color: var(--db-radio-surface-checked-press);
   border-color: var(--db-radio-border-checked-press);
 }
 
 /* Dot visibility. */
-.ds-radio:has(input:checked) .ds-radio-dot {
+.db-radio:has(input:checked) .db-radio-dot {
   opacity: 1;
 }
 
@@ -16507,66 +16618,77 @@ span.du-bois-light-typography-ellipsis-single-line {
  *
  * UNCHECKED focus (AntD `&:not(disabled) > input:focus + inner`): only the border
  * color changes to actionPrimaryBackgroundDefault — NO outline ring. */
-.ds-radio:has(input:focus-visible:not(:checked)) .ds-radio-indicator {
-  border-color: var(--db-radio-border-focus-unchecked);
+.db-radio:has(input:focus-visible:not(:checked)) .db-radio-indicator {
+  border-color: var(--db-radio-border-unchecked-focus);
 }
 
 /* CHECKED focus-visible (AntD `&.checked &:not(disabled) > input:focus-visible + inner`):
  * background = actionPrimaryBackgroundDefault, borderColor = actionDefaultBorderFocus,
  * outline = 1px solid actionPrimaryBackgroundDefault, outlineOffset = 1. */
-.ds-radio:has(input:focus-visible:checked) .ds-radio-indicator {
-  background-color: var(--db-radio-bg-checked);
+.db-radio:has(input:focus-visible:checked) .db-radio-indicator {
+  background-color: var(--db-radio-surface-checked);
   border-color: var(--db-radio-border-focus);
-  outline: 1px solid var(--db-radio-focus-outline-checked-color);
+  outline: 1px solid var(--db-radio-outline-checked-focus);
   outline-offset: 1px;
 }
 
 /* Disabled (covers checked and unchecked). Sourced from `input:disabled` so the
  * standalone-disabled and group-disabled paths both land here. */
-.ds-radio:has(input:disabled) {
+.db-radio:has(input:disabled) {
   cursor: not-allowed;
 }
 
-.ds-radio:has(input:disabled) .ds-radio-label {
+.db-radio:has(input:disabled) .db-radio-label {
   color: var(--db-radio-text-disabled);
 }
 
-.ds-radio:has(input:disabled) .ds-radio-indicator {
-  background-color: var(--db-radio-bg-disabled);
+.db-radio:has(input:disabled) .db-radio-indicator {
+  background-color: var(--db-radio-surface-disabled);
   border-color: var(--db-radio-border-disabled);
   box-shadow: none;
 }
 
-.ds-radio:has(input:disabled) .ds-radio-dot {
-  background-color: var(--db-radio-dot-color-disabled);
+.db-radio:has(input:disabled) .db-radio-dot {
+  background-color: var(--db-radio-mark-disabled);
 }
 
-/* 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. */
-.ds-radio input {
+/* 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. */
+.db-radio input {
   position: absolute;
   inset: 0;
   inline-size: var(--db-radio-size);
   block-size: var(--db-radio-size);
   margin: 0;
   opacity: 0;
-  pointer-events: none;
+  cursor: inherit;
 }
 
 /* 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
  * so radio + label sit on the same visual baseline even when the label wraps. */
-.ds-radio .ds-radio-indicator {
+.db-radio .db-radio-indicator {
   display: grid;
   place-items: center;
   flex-shrink: 0;
+  /* Decorative only — the overlaid input owns hit-testing. Without this, the
+   * indicator (and its inherited dot child) intercept `getByRole('radio').click()`;
+   * clicks on any edge sliver the input does not cover fall through to the label,
+   * which toggles via label/input association. */
+  pointer-events: none;
   inline-size: var(--db-radio-size);
   block-size: var(--db-radio-size);
   margin-top: calc((var(--db-line-height-base, 20px) - var(--db-radio-size)) / 2);
-  border: var(--db-radio-border-width) solid var(--db-radio-border-default);
+  border: var(--db-radio-border-width) solid var(--db-radio-border);
   border-radius: var(--db-radio-border-radius);
-  background-color: var(--db-radio-bg-default);
+  background-color: var(--db-radio-surface);
   box-sizing: border-box;
   transition:
     background-color var(--db-radio-transition-duration) ease,
@@ -16574,12 +16696,12 @@ span.du-bois-light-typography-ellipsis-single-line {
     box-shadow var(--db-radio-transition-duration) ease;
 }
 
-.ds-radio .ds-radio-indicator > .ds-radio-dot {
+.db-radio .db-radio-indicator > .db-radio-dot {
   grid-area: 1 / 1;
-  inline-size: var(--db-radio-dot-size);
-  block-size: var(--db-radio-dot-size);
+  inline-size: var(--db-radio-mark-size);
+  block-size: var(--db-radio-mark-size);
   border-radius: var(--db-radius-full);
-  background-color: var(--db-radio-dot-color);
+  background-color: var(--db-radio-mark);
   opacity: 0;
   transition: opacity var(--db-radio-transition-duration) ease;
 }
@@ -16587,17 +16709,17 @@ span.du-bois-light-typography-ellipsis-single-line {
 /* Honour the user's reduced-motion preference: drop the state-change
  * transitions on the indicator and dot so checking/hovering is instant. */
 @media (prefers-reduced-motion: reduce) {
-  .ds-radio .ds-radio-indicator,
-  .ds-radio .ds-radio-indicator > .ds-radio-dot {
+  .db-radio .db-radio-indicator,
+  .db-radio .db-radio-indicator > .db-radio-dot {
     transition: none;
   }
 }
 
 /* Padding-inline replicates the AntD `.{prefix} + span` label gap and the
  * trailing whitespace that separates adjacent radios in a row. */
-.ds-radio .ds-radio-label {
+.db-radio .db-radio-label {
   color: var(--db-radio-text);
-  padding-inline: var(--db-radio-spacing);
+  padding-inline: var(--db-radio-label-spacing);
   word-break: break-word;
 }
 
@@ -16605,13 +16727,13 @@ span.du-bois-light-typography-ellipsis-single-line {
  * indent comes from AntD's getCommonRadioGroupStyles (`& > label + hint`) and applies
  * to BOTH layouts. The doubled root class pushes specificity to (0,3,0) to beat
  * FormMessage's runtime `&&` margin. */
-.ds-radio.ds-radio + .du-bois-light-hint,
-.ds-radio.ds-radio + .du-bois-dark-hint,
-.ds-radio.ds-radio + .du-bois-light-form-message,
-.ds-radio.ds-radio + .du-bois-dark-form-message,
-.ds-radio.ds-radio + .du-bois-light-hint + .du-bois-light-form-message,
-.ds-radio.ds-radio + .du-bois-dark-hint + .du-bois-dark-form-message {
-  padding-inline-start: var(--db-space-lg);
+.db-radio.db-radio + .du-bois-light-hint,
+.db-radio.db-radio + .du-bois-dark-hint,
+.db-radio.db-radio + .du-bois-light-form-message,
+.db-radio.db-radio + .du-bois-dark-form-message,
+.db-radio.db-radio + .du-bois-light-hint + .du-bois-light-form-message,
+.db-radio.db-radio + .du-bois-dark-hint + .du-bois-dark-form-message {
+  padding-inline-start: var(--db-spacing-sm);
   margin-top: 0;
 }
 
@@ -16619,71 +16741,71 @@ span.du-bois-light-typography-ellipsis-single-line {
  * after a radio gets `marginTop: -sm` (cancels the preceding radio's
  * `paddingBottom: sm` so the hint tucks directly under its label) and
  * `marginBottom: sm` (gap before the next radio). The negative top margin relies on
- * the .ds-stack gap being 0 (set below). Scoped to .ds-stack so it never perturbs
+ * the .db-stack gap being 0 (set below). Scoped to .db-stack so it never perturbs
  * the horizontal grid, where hints are positioned by grid-row instead. */
-.ds-radio-group.ds-stack > .ds-radio.ds-radio + .du-bois-light-hint,
-.ds-radio-group.ds-stack > .ds-radio.ds-radio + .du-bois-dark-hint,
-.ds-radio-group.ds-stack > .ds-radio.ds-radio + .du-bois-light-form-message,
-.ds-radio-group.ds-stack > .ds-radio.ds-radio + .du-bois-dark-form-message,
-.ds-radio-group.ds-stack > .ds-radio.ds-radio + .du-bois-light-hint + .du-bois-light-form-message,
-.ds-radio-group.ds-stack > .ds-radio.ds-radio + .du-bois-dark-hint + .du-bois-dark-form-message {
-  margin-top: calc(-1 * var(--db-space-sm));
-  margin-bottom: var(--db-space-sm);
+.db-radio-group.db-stack > .db-radio.db-radio + .du-bois-light-hint,
+.db-radio-group.db-stack > .db-radio.db-radio + .du-bois-dark-hint,
+.db-radio-group.db-stack > .db-radio.db-radio + .du-bois-light-form-message,
+.db-radio-group.db-stack > .db-radio.db-radio + .du-bois-dark-form-message,
+.db-radio-group.db-stack > .db-radio.db-radio + .du-bois-light-hint + .du-bois-light-form-message,
+.db-radio-group.db-stack > .db-radio.db-radio + .du-bois-dark-hint + .du-bois-dark-form-message {
+  margin-top: calc(-1 * var(--db-spacing-2xs));
+  margin-bottom: var(--db-spacing-2xs);
 }
 
 /* AntD `& > label:last-of-type + hint { marginTop: 0 }`: the last radio has no
  * `paddingBottom` to cancel, so its trailing hint keeps its natural top position. */
-.ds-radio-group.ds-stack > .ds-radio.ds-radio:last-of-type + .du-bois-light-hint,
-.ds-radio-group.ds-stack > .ds-radio.ds-radio:last-of-type + .du-bois-dark-hint,
-.ds-radio-group.ds-stack > .ds-radio.ds-radio:last-of-type + .du-bois-light-form-message,
-.ds-radio-group.ds-stack > .ds-radio.ds-radio:last-of-type + .du-bois-dark-form-message,
-.ds-radio-group.ds-stack > .ds-radio.ds-radio:last-of-type + .du-bois-light-hint + .du-bois-light-form-message,
-.ds-radio-group.ds-stack > .ds-radio.ds-radio:last-of-type + .du-bois-dark-hint + .du-bois-dark-form-message {
+.db-radio-group.db-stack > .db-radio.db-radio:last-of-type + .du-bois-light-hint,
+.db-radio-group.db-stack > .db-radio.db-radio:last-of-type + .du-bois-dark-hint,
+.db-radio-group.db-stack > .db-radio.db-radio:last-of-type + .du-bois-light-form-message,
+.db-radio-group.db-stack > .db-radio.db-radio:last-of-type + .du-bois-dark-form-message,
+.db-radio-group.db-stack > .db-radio.db-radio:last-of-type + .du-bois-light-hint + .du-bois-light-form-message,
+.db-radio-group.db-stack > .db-radio.db-radio:last-of-type + .du-bois-dark-hint + .du-bois-dark-form-message {
   margin-top: 0;
 }
 
-.du-bois-light-hint + .ds-radio-group.ds-radio-group,
-.du-bois-dark-hint + .ds-radio-group.ds-radio-group,
-.ds-radio-group.ds-radio-group + .du-bois-light-form-message,
-.ds-radio-group.ds-radio-group + .du-bois-dark-form-message {
-  margin-top: var(--db-space-sm);
+.du-bois-light-hint + .db-radio-group.db-radio-group,
+.du-bois-dark-hint + .db-radio-group.db-radio-group,
+.db-radio-group.db-radio-group + .du-bois-light-form-message,
+.db-radio-group.db-radio-group + .du-bois-dark-form-message {
+  margin-top: var(--db-spacing-2xs);
 }
 
 /* RadioGroup layout. Vertical (the default) delegates flex-direction to the
- * .ds-stack primitive; horizontal is a two-row grid (mirroring AntD). */
-.ds-radio-group {
+ * .db-stack primitive; horizontal is a two-row grid (mirroring AntD). */
+.db-radio-group {
   display: flex;
 }
 
-/* Vertical: .ds-stack supplies flex-direction: column. AntD's vertical helper
+/* Vertical: .db-stack supplies flex-direction: column. AntD's vertical helper
  * (getVerticalRadioGroupStyles) produces its item rhythm purely from
  * `& > label { paddingBottom: sm }` plus the negative-margin hint trick above — it
  * uses NO flex gap. The negative `marginTop` on hints only works if the stack adds
  * no gap of its own, so we zero out the gap and reproduce the rhythm via
  * padding-bottom on each radio. */
-.ds-radio-group.ds-stack {
-  --ds-stack-gap: var(--db-space-0);
+.db-radio-group.db-stack {
+  --db-stack-gap: 0;
 }
 
 /* AntD `& > label { paddingBottom: sm }`. */
-.ds-radio-group.ds-stack > .ds-radio {
-  padding-bottom: var(--db-space-sm);
+.db-radio-group.db-stack > .db-radio {
+  padding-bottom: var(--db-spacing-2xs);
 }
 
 /* AntD `& > label:last-of-type { paddingBottom: 0 }`. */
-.ds-radio-group.ds-stack > .ds-radio:last-of-type {
+.db-radio-group.db-stack > .db-radio:last-of-type {
   padding-bottom: 0;
 }
 
 /* AntD getVerticalRadioGroupStyles `.${prefix}-radio-tile + .${prefix}-radio-tile {
- * marginTop: md }`: RadioTiles are not matched by the `.ds-radio` padding-bottom
+ * marginTop: md }`: RadioTiles are not matched by the `.db-radio` padding-bottom
  * rhythm above (the tile's own class is du-bois-{light,dark}-radio-tile), so space
- * consecutive tiles explicitly. The .ds-stack gap is 0, so this margin is the spacing. */
-.ds-radio-group.ds-stack > .du-bois-light-radio-tile + .du-bois-light-radio-tile,
-.ds-radio-group.ds-stack > .du-bois-light-radio-tile + .du-bois-dark-radio-tile,
-.ds-radio-group.ds-stack > .du-bois-dark-radio-tile + .du-bois-light-radio-tile,
-.ds-radio-group.ds-stack > .du-bois-dark-radio-tile + .du-bois-dark-radio-tile {
-  margin-top: var(--db-space-md);
+ * consecutive tiles explicitly. The .db-stack gap is 0, so this margin is the spacing. */
+.db-radio-group.db-stack > .du-bois-light-radio-tile + .du-bois-light-radio-tile,
+.db-radio-group.db-stack > .du-bois-light-radio-tile + .du-bois-dark-radio-tile,
+.db-radio-group.db-stack > .du-bois-dark-radio-tile + .du-bois-light-radio-tile,
+.db-radio-group.db-stack > .du-bois-dark-radio-tile + .du-bois-dark-radio-tile {
+  margin-top: var(--db-spacing-xs);
 }
 
 /* Horizontal: AntD `getHorizontalRadioGroupStyles` is a TWO-ROW grid (NOT a flex
@@ -16692,105 +16814,93 @@ span.du-bois-light-typography-ellipsis-single-line {
  * group class here matches that.
  * AntD: `display: grid; gridTemplateRows: [label] auto [hint] auto;
  * gridAutoColumns: max-content; gridColumnGap: md`. */
-.ds-radio-group--horizontal.ds-radio-group--horizontal {
+.db-radio-group--horizontal.db-radio-group--horizontal {
   display: grid;
   grid-template-rows: [label] auto [hint] auto;
   grid-auto-columns: max-content;
-  column-gap: var(--db-space-md);
+  column-gap: var(--db-spacing-xs);
 }
 
 /* Equal column widths: AntD `gridAutoColumns: minmax(0, 1fr)`. */
-.ds-radio-group--horizontal.ds-radio-group--equal-width {
+.db-radio-group--horizontal.db-radio-group--equal-width {
   grid-auto-columns: minmax(0, 1fr);
 }
 
 /* AntD `& > label, & > .${prefix}-radio-tile { gridRow: label / label; marginRight: 0 }`:
  * every radio (and every RadioTile button, whose own class is
- * du-bois-{light,dark}-radio-tile and is NOT matched by `> .ds-radio`) lives in the
+ * du-bois-{light,dark}-radio-tile and is NOT matched by `> .db-radio`) lives in the
  * label row. grid-auto-flow defaults to row, so successive items advance the implicit
  * column. */
-.ds-radio-group--horizontal > .ds-radio,
-.ds-radio-group--horizontal > .du-bois-light-radio-tile,
-.ds-radio-group--horizontal > .du-bois-dark-radio-tile {
+.db-radio-group--horizontal > .db-radio,
+.db-radio-group--horizontal > .du-bois-light-radio-tile,
+.db-radio-group--horizontal > .du-bois-dark-radio-tile {
   grid-row: label / label;
   margin-inline-end: 0;
 }
 
 /* AntD `& > label + hint { display: inline-block; gridRow: hint / hint }`: a hint
  * following a radio drops into the hint row of the column its radio occupies. The
- * vertical negative-margin rules are scoped to .ds-stack, so nothing to reset here. */
-.ds-radio-group--horizontal > .du-bois-light-hint,
-.ds-radio-group--horizontal > .du-bois-dark-hint {
+ * vertical negative-margin rules are scoped to .db-stack, so nothing to reset here. */
+.db-radio-group--horizontal > .du-bois-light-hint,
+.db-radio-group--horizontal > .du-bois-dark-hint {
   display: inline-block;
   grid-row: hint / hint;
 }
 
 /* AntD `:has(> hint) { marginTop: sm }`: when the horizontal group contains a hint,
  * the group itself gets a top margin (room above the two-row grid). */
-.ds-radio-group--horizontal:has(> .du-bois-light-hint),
-.ds-radio-group--horizontal:has(> .du-bois-dark-hint) {
-  margin-top: var(--db-space-sm);
+.db-radio-group--horizontal:has(> .du-bois-light-hint),
+.db-radio-group--horizontal:has(> .du-bois-dark-hint) {
+  margin-top: var(--db-spacing-2xs);
 }
 
 /* AntD `&& + form-message { marginTop: sm }` (horizontal): a form-message following
  * the whole group is separated by sm. */
-.ds-radio-group--horizontal + .du-bois-light-form-message,
-.ds-radio-group--horizontal + .du-bois-dark-form-message {
-  margin-top: var(--db-space-sm);
+.db-radio-group--horizontal + .du-bois-light-form-message,
+.db-radio-group--horizontal + .du-bois-dark-form-message {
+  margin-top: var(--db-spacing-2xs);
 }
 
-/* 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(:root), :where(.du-bois-light) {
+  /* 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);
 }
 
-.ds-switch {
+.db-switch {
   /* flex, not inline-flex: an inline-flex root's line-box leading pushes block siblings
    * (e.g. a following FormMessage) down a few px, breaking the form-flow spacing. */
   display: flex;
@@ -16798,15 +16908,15 @@ span.du-bois-light-typography-ellipsis-single-line {
   cursor: pointer;
   user-select: none;
   width: fit-content;
-  margin-inline-end: var(--db-switch-spacing);
+  margin-inline-end: var(--db-switch-label-spacing);
 }
 
-.ds-switch:has(input:disabled) {
+.db-switch:has(input:disabled) {
   cursor: not-allowed;
 }
 
 /* The track. `appearance: none` strips the native checkbox rendering so the input itself can be styled. */
-.ds-switch input {
+.db-switch input {
   appearance: none;
   position: relative;
   flex-shrink: 0;
@@ -16814,9 +16924,9 @@ span.du-bois-light-typography-ellipsis-single-line {
   cursor: pointer;
   inline-size: var(--db-switch-track-width);
   block-size: var(--db-switch-track-height);
-  border: var(--db-switch-border-width) solid var(--db-switch-border-default);
+  border: var(--db-switch-border-width) solid var(--db-switch-border);
   border-radius: var(--db-switch-border-radius);
-  background-color: var(--db-switch-bg-default);
+  background-color: var(--db-switch-surface);
   box-sizing: border-box;
   transition:
     background-color var(--db-switch-transition-duration) ease,
@@ -16825,7 +16935,7 @@ span.du-bois-light-typography-ellipsis-single-line {
 
 /* The thumb. A pseudo-element keeps the input the switch's only element, so nothing can overlay it
  * and intercept clicks. Offset left by the border width to sit flush with the track's outer edge. */
-.ds-switch input::before {
+.db-switch input::before {
   content: '';
   position: absolute;
   top: 50%;
@@ -16835,110 +16945,112 @@ span.du-bois-light-typography-ellipsis-single-line {
   border: var(--db-switch-border-width) solid;
   border-color: inherit;
   border-radius: var(--db-switch-border-radius);
-  background-color: var(--db-switch-thumb-color);
+  background-color: var(--db-switch-thumb);
   box-sizing: border-box;
   transform: translateY(-50%);
   transition: transform var(--db-switch-transition-duration) ease;
 }
 
 /* `<label for>` propagates `:hover` to the input, so scope hover/press to the control, not `input:hover`. */
-.ds-switch:hover input:not(:disabled):not(:checked) {
-  background-color: var(--db-switch-bg-hover);
+.db-switch:hover input:not(:disabled):not(:checked) {
+  background-color: var(--db-switch-surface-hover);
   border-color: var(--db-switch-border-hover);
 }
 
-.ds-switch:active input:not(:disabled):not(:checked) {
-  background-color: var(--db-switch-bg-press);
+.db-switch:active input:not(:disabled):not(:checked) {
+  background-color: var(--db-switch-surface-press);
   border-color: var(--db-switch-border-press);
 }
 
-.ds-switch input:checked {
-  background-color: var(--db-switch-bg-checked);
+.db-switch input:checked {
+  background-color: var(--db-switch-surface-checked);
   border-color: var(--db-switch-border-checked);
 }
 
-.ds-switch:hover input:checked:not(:disabled) {
-  background-color: var(--db-switch-bg-checked-hover);
+.db-switch:hover input:checked:not(:disabled) {
+  background-color: var(--db-switch-surface-checked-hover);
   border-color: var(--db-switch-border-checked-hover);
 }
 
-.ds-switch:active input:checked:not(:disabled) {
-  background-color: var(--db-switch-bg-checked-press);
+.db-switch:active input:checked:not(:disabled) {
+  background-color: var(--db-switch-surface-checked-press);
   border-color: var(--db-switch-border-checked-press);
 }
 
-.ds-switch input:checked::before {
+.db-switch input:checked::before {
   transform: translateY(-50%) translateX(calc(var(--db-switch-track-width) - var(--db-switch-thumb-size)));
 }
 
 /* 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. */
-.ds-switch input:focus-visible {
+ * 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. */
+.db-switch input:focus-visible {
   border-color: var(--db-switch-border-focus);
-  outline: var(--db-switch-focus-ring-width) solid var(--db-switch-focus-ring-color);
+  outline: 1px solid var(--db-focus-ring-color);
   outline-offset: 0;
 }
 
-.ds-switch input:checked:focus-visible {
-  outline-offset: var(--db-switch-focus-ring-offset);
+.db-switch input:checked:focus-visible {
+  outline-offset: 1px;
 }
 
-.ds-switch input:disabled {
+.db-switch input:disabled {
   cursor: not-allowed;
-  background-color: var(--db-switch-bg-disabled);
+  background-color: var(--db-switch-surface-disabled);
   border-color: var(--db-switch-border-disabled);
 }
 
 /* Disabled + on: more specific than the plain disabled rule, so it wins regardless of source order. */
-.ds-switch input:checked:disabled {
-  background-color: var(--db-switch-bg-checked-disabled);
-  border-color: var(--db-switch-bg-checked-disabled);
+.db-switch input:checked:disabled {
+  background-color: var(--db-switch-surface-checked-disabled);
+  border-color: var(--db-switch-surface-checked-disabled);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .ds-switch input,
-  .ds-switch input::before {
+  .db-switch input,
+  .db-switch input::before {
     transition: none;
   }
 }
 
-.ds-switch-wrapper {
+.db-switch-wrapper {
   display: flex;
   align-items: center;
 }
 
-.ds-switch-wrapper .ds-switch-state-message {
+.db-switch-wrapper .db-switch-state-message {
   margin-inline-start: auto;
-  margin-inline-end: var(--db-switch-spacing);
+  margin-inline-end: var(--db-switch-label-spacing);
 }
 
 /* `:first-child` scopes this to the label-first layout; the plain layout renders the label last. */
-.ds-switch-wrapper > .du-bois-light-label:first-child,
-.ds-switch-wrapper > .du-bois-dark-label:first-child {
-  margin-inline-end: var(--db-switch-spacing);
+.db-switch-wrapper > .du-bois-light-label:first-child,
+.db-switch-wrapper > .du-bois-dark-label:first-child {
+  margin-inline-end: var(--db-switch-label-spacing);
 }
 
-.ds-switch-state-message {
+.db-switch-state-message {
   color: var(--db-switch-text);
 }
 
-/* Target the <Label>'s class, not a bare `label` — that would also match the .ds-switch root <label>. */
-.ds-switch-wrapper:has(input:disabled) .du-bois-light-label,
-.ds-switch-wrapper:has(input:disabled) .du-bois-dark-label {
+/* Target the <Label>'s class, not a bare `label` — that would also match the .db-switch root <label>. */
+.db-switch-wrapper:has(input:disabled) .du-bois-light-label,
+.db-switch-wrapper:has(input:disabled) .du-bois-dark-label {
   color: var(--db-switch-text-disabled);
 }
 
 /* Indent a following hint/message past the track. The class is doubled to out-specify FormMessage's
  * own margin rule. */
-:is(.ds-switch.ds-switch, .ds-switch-wrapper.ds-switch-wrapper)
-  + :is(.du-bois-light-hint, .du-bois-dark-hint, .du-bois-light-form-message, .du-bois-dark-form-message), :is(.ds-switch.ds-switch, .ds-switch-wrapper.ds-switch-wrapper)
+:is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper)
+  + :is(.du-bois-light-hint, .du-bois-dark-hint, .du-bois-light-form-message, .du-bois-dark-form-message), :is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper)
   + :is(.du-bois-light-hint, .du-bois-dark-hint)
   + :is(.du-bois-light-form-message, .du-bois-dark-form-message) {
-  padding-inline-start: calc(var(--db-space-sm) + var(--db-switch-track-width));
+  padding-inline-start: calc(var(--db-spacing-2xs) + var(--db-switch-track-width));
 }
 
-:is(.ds-switch.ds-switch, .ds-switch-wrapper.ds-switch-wrapper)
-  + :is(.du-bois-light-form-message, .du-bois-dark-form-message), :is(.ds-switch.ds-switch, .ds-switch-wrapper.ds-switch-wrapper)
+:is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper)
+  + :is(.du-bois-light-form-message, .du-bois-dark-form-message), :is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper)
   + :is(.du-bois-light-hint, .du-bois-dark-hint)
   + :is(.du-bois-light-form-message, .du-bois-dark-form-message) {
   margin-top: 0;