@databricks/design-system 2.0.5 → 2.0.6

package/dist/index.css

@@ -16046,7 +16046,7 @@ span.du-bois-light-typography-ellipsis-single-line {
 
   --db-surface-selected: var(--db-color-table-background-selected-hover);
   --db-surface-selected-hover: initial; /* TODO */;
-  --db-surface-selected-active: initial; /* TODO */;
+  --db-surface-selected-active: var(--db-color-table-background-selected-hover); /* no distinct active value */
 
   /* Surface alpha-blending modifiers */
   --db-surface-backdrop: initial; /* TODO */;
@@ -16072,7 +16072,7 @@ span.du-bois-light-typography-ellipsis-single-line {
   --db-accent-surface-strong: var(--db-color-action-primary-background-hover);
 
   --db-accent-surface-hover: var(--db-color-action-primary-background-hover);
-  --db-accent-surface-active: initial; /* TODO */
+  --db-accent-surface-active: var(--db-color-action-primary-background-press); /* no distinct active value */
   --db-accent-surface-selected: var(--db-color-action-primary-background-press);
 
   /* In the current design, the text color for an accent surface does not change with hover, active, etc. */
@@ -16089,7 +16089,7 @@ span.du-bois-light-typography-ellipsis-single-line {
   --db-negative-surface-strong: var(--db-color-action-danger-primary-background-hover);
 
   --db-negative-surface-hover: var(--db-color-action-danger-primary-background-hover);
-  --db-negative-surface-active: initial; /* TODO */
+  --db-negative-surface-active: var(--db-color-action-danger-primary-background-press); /* no distinct active value */
   --db-negative-surface-selected: var(--db-color-action-danger-primary-background-press);
 
   --db-negative-text: var(--db-color-text-validation-danger);
@@ -16130,6 +16130,11 @@ span.du-bois-light-typography-ellipsis-single-line {
   --db-positive-border: initial; /* TODO */
   --db-positive-border-hover: initial; /* TODO */
   --db-positive-border-active: initial; /* TODO */
+
+  /* Branded */
+  --db-ai-gradient-start: #4299e0;
+  --db-ai-gradient-mid: #ca42e0;
+  --db-ai-gradient-end: #ff5f46;
 }
 
 
@@ -16210,6 +16215,47 @@ span.du-bois-light-typography-ellipsis-single-line {
   --db-shape-pill: 999px;
 }
 
+:where(:root), :where(.du-bois-light) {
+  /* Shape */
+  /* Mirrors the ShapeTokens host-override var used by list items; falls back to the theme radius. */
+  --db-list-item-border-radius: var(--list-item-border-radius, 4px);
+
+  /* Color */
+  --db-list-surface: var(--db-surface-base);
+  --db-list-text: var(--db-text-base);
+  --db-list-header-text: var(--db-text-subtle);
+  --db-list-separator: var(--db-border-subtle);
+
+  --db-list-item-surface-hover: var(--db-surface-hover);
+  --db-list-item-surface-active: var(--db-surface-active);
+  --db-list-item-surface-selected: var(--db-accent-surface-subtle);
+  --db-list-item-surface-disabled: var(--db-surface-disabled);
+
+  --db-list-item-text-selected: var(--db-accent-text);
+  --db-list-item-text-disabled: var(--db-text-disabled);
+
+  --db-list-item-danger-text: var(--db-negative-text);
+  --db-list-item-danger-surface-hover: var(--db-negative-surface-subtle);
+
+  /* Density */
+  --db-list-item-padding: var(--db-space-2);
+  --db-list-item-height: var(--db-size-8);
+}
+
+:where(:root), :where(.du-bois-light) {
+  /* Shape */
+  /* Mirrors the ShapeTokens host-override var; falls back to the v1 value (borderRadiusSm). */
+  --db-popup-border-radius: var(--popup-border-radius, 4px);
+
+  /* Color */
+  --db-popup-surface: var(--db-surface-base);
+  --db-popup-text: var(--db-text-base);
+  --db-popup-border: var(--db-border-base);
+
+  /* Elevation */
+  --db-popup-elevation: var(--db-elevation-med);
+}
+
 :where(:root), :where(.du-bois-light) {
   /* Shape */
   --db-selection-toggle-border-radius: 4px;
@@ -16221,15 +16267,15 @@ span.du-bois-light-typography-ellipsis-single-line {
   --db-selection-toggle-border: var(--db-border-strong);
 
   --db-selection-toggle-surface-hover: var(--db-surface-hover);
-  --db-selection-toggle-surface-press: var(--db-surface-selected);
+  --db-selection-toggle-surface-active: var(--db-surface-selected-active);
   --db-selection-toggle-surface-checked: var(--db-accent-surface);
   --db-selection-toggle-surface-checked-hover: var(--db-accent-surface-hover);
-  --db-selection-toggle-surface-checked-press: var(--db-accent-surface-selected);
+  --db-selection-toggle-surface-checked-active: var(--db-accent-surface-active);
   --db-selection-toggle-surface-disabled: var(--db-surface-disabled);
   --db-selection-toggle-surface-checked-disabled: var(--db-surface-disabled);
 
   --db-selection-toggle-border-hover: var(--db-accent-surface-hover);
-  --db-selection-toggle-border-press: var(--db-accent-surface-selected);
+  --db-selection-toggle-border-active: var(--db-accent-surface-active);
   --db-selection-toggle-border-disabled: var(--db-border-base);
 
   --db-selection-toggle-mark-disabled: var(--db-text-disabled);
@@ -16245,1322 +16291,1638 @@ span.du-bois-light-typography-ellipsis-single-line {
   --db-selection-toggle-transition-duration: 120ms;
 }
 
-:where(:root), :where(.du-bois-light) {
-  /* Shape */
-  --db-checkbox-border-radius: var(--db-selection-toggle-border-radius);
-  --db-checkbox-border-width: 1px;
-
-  /* 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: 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-focus-ring: var(--db-focus-ring-color);
-  --db-checkbox-border-disabled: var(--db-color-action-disabled-border);
 
-  --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);
+/* Component-tier tokens for the native <Button>, grouped by area (density, shape, typography, color).
+ * Colors alias the action-* system tokens; sizes alias the system density scale.
+ *
+ * Follows the mortar/action.css pattern: one semantic set (surface / border / text, each with
+ * -hover / -active / -disabled) whose defaults are the secondary variant. The variant classes that
+ * re-set these tokens per variant live in NativeButton.css; this file declares only tokens. */
 
-  /* 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-2); /* 8px */
-  --db-checkbox-indeterminate-mark-height: calc(var(--db-size-1) * 0.75); /* 3px */
+/* Declared under the theme classes too (not just :root) so the var() chain re-resolves inside a
+ * `.du-bois-dark` subtree (or a portal that re-applies the theme class) instead of freezing at the root values. */
+:where(:root), :where(.du-bois-light) {
+  /* ── Density ──────────────────────────────────────────────────────────── */
+  --db-btn-height: var(--db-size-8);
+  --db-btn-height-small: var(--db-size-6);
+  --db-btn-icon-size: var(--db-size-4);
+  --db-btn-border-width: 1px;
+  --db-btn-padding-vertical: var(--db-space-1);
+  --db-btn-padding-horizontal: var(--db-space-3);
+  --db-btn-padding-horizontal-small: var(--db-space-2);
+  /* Icon/force-icon horizontal padding: half the standard horizontal padding. */
+  --db-btn-padding-horizontal-icon: calc(var(--db-space-3) / 2); /* 6px */
+  --db-btn-gap: var(--db-space-1);
+  --db-btn-end-icon-gap: var(--db-space-2);
+  --db-btn-end-icon-gap-small: var(--db-space-1);
+  /* Width of a content-less button while loading, so the standalone spinner has room. */
+  --db-btn-loading-empty-width: var(--db-size-10);
 
-  /* Motion */
-  --db-checkbox-transition-duration: var(--db-selection-toggle-transition-duration);
-}
+  /* ── Shape ────────────────────────────────────────────────────────────── */
+  --db-btn-border-radius: var(--db-shape-control);
 
-/* Native-input <Checkbox> styles. Classic CSS only — no native nesting (the
- * `&`-style nesting feature ships in Chrome/Edge 120, Safari 17.2, Firefox 117
- * which leaves a non-trivial slice of our production traffic uncovered today;
- * see PR #1954620 thread). `:has()` lookups are still used to read state from
- * the native <input>; that feature has the support coverage we need.
- *
- * Structure (assumed by the React component):
- *
- *   <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="db-checkbox-label">{children}</span>
- *   </label>
- *
- * 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. */
+  /* ── Typography ───────────────────────────────────────────────────────── */
+  --db-btn-font-size: var(--db-font-size-base);
+  --db-btn-icon-only-font-size: var(--db-font-size-lg); /* 15px */
+  --db-btn-font-weight: var(--db-font-weight-normal);
+  /* Line heights are hard-coded until the typography scale ships computed per-level line-height tokens. */
+  --db-btn-line-height: 1.25rem; /* 20px */
+  --db-btn-line-height-small: 1rem; /* 16px */
 
-.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
-   * lower under the native checkbox than under the AntD checkbox (which itself is
-   * wrapped in a block `<div>`, so its label's inline-line-box is consumed inside
-   * that div and never leaks into sibling spacing). `width: fit-content` keeps the
-   * label behaving like an inline-flex item inside a flex-row parent (the group,
-   * or any consumer's flex container). */
-  display: flex;
-  align-items: flex-start;
-  position: relative;
-  cursor: pointer;
-  user-select: none;
-  /* No `gap` here — spacing between indicator and label, plus the trailing
-   * whitespace that gives sibling checkboxes their visual separation, lives
-   * 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;
-}
+  /* ── Color: semantic set (defaults = secondary variant) ───────────────── */
+  --db-btn-surface: var(--db-color-action-default-background-default);
+  --db-btn-surface-hover: var(--db-color-action-default-background-hover);
+  --db-btn-surface-active: var(--db-color-action-default-background-press);
+  --db-btn-surface-disabled: transparent;
+  --db-btn-border: var(--db-color-action-default-border-default);
+  --db-btn-border-hover: var(--db-color-action-default-border-hover);
+  --db-btn-border-active: var(--db-color-action-default-border-press);
+  --db-btn-border-disabled: var(--db-color-action-disabled-border);
+  --db-btn-text: var(--db-color-action-default-text-default);
+  --db-btn-text-hover: var(--db-color-action-default-text-hover);
+  --db-btn-text-active: var(--db-color-action-default-text-press);
+  --db-btn-text-disabled: var(--db-color-action-disabled-text);
 
-/* 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. */
-.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);
+  /* ── Focus & icon ─────────────────────────────────────────────────────── */
+  --db-btn-focus-ring: var(--db-color-action-default-border-focus);
+  --db-btn-danger-focus-ring: var(--db-color-action-danger-primary-background-default);
+  --db-btn-icon-glyph: var(--db-color-text-secondary);
 }
 
-.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);
-}
+/* Native <Button> visual styles. Consumes the component-tier `--db-btn-*` tokens (see tokens.css);
+ * the variant classes below re-set those tokens per variant and the rules that follow paint them.
+ * Shipped via mortar.css. */
 
-/* Selected fill — checked and indeterminate share the same surface. */
-.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);
+/* ── 0. Variant token re-sets ──────────────────────────────────────────────
+ * Each variant class re-sets the semantic tokens declared in tokens.css; combined classes win by
+ * specificity, which beats the `:where(:root)` (specificity 0) defaults regardless of file order. */
+.db-btn-primary {
+  --db-btn-surface: var(--db-color-action-primary-background-default);
+  --db-btn-surface-hover: var(--db-color-action-primary-background-hover);
+  --db-btn-surface-active: var(--db-color-action-primary-background-press);
+  --db-btn-surface-disabled: var(--db-color-action-disabled-border);
+  --db-btn-border: transparent;
+  --db-btn-border-hover: transparent;
+  --db-btn-border-active: transparent;
+  --db-btn-border-disabled: transparent;
+  --db-btn-text: var(--db-color-action-primary-text-default);
+  --db-btn-text-hover: var(--db-color-action-primary-text-hover);
+  --db-btn-text-active: var(--db-color-action-primary-text-press);
+  --db-btn-text-disabled: var(--db-color-action-primary-text-default);
 }
-
-.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);
+.db-btn-tertiary,
+.db-btn-link {
+  --db-btn-surface: var(--db-color-action-tertiary-background-default);
+  --db-btn-surface-disabled: var(--db-color-action-tertiary-background-default);
+  --db-btn-border: var(--db-color-action-tertiary-background-default);
+  --db-btn-border-hover: transparent;
+  --db-btn-border-active: transparent;
+  --db-btn-border-disabled: transparent;
+  --db-btn-text: var(--db-color-action-tertiary-text-default);
+  --db-btn-text-hover: var(--db-color-action-tertiary-text-hover);
+  --db-btn-text-active: var(--db-color-action-tertiary-text-press);
+  --db-btn-text-disabled: var(--db-color-action-disabled-text);
 }
-
-.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);
+.db-btn-tertiary {
+  --db-btn-surface-hover: var(--db-color-action-tertiary-background-hover);
+  --db-btn-surface-active: var(--db-color-action-tertiary-background-press);
 }
-
-/* Mark visibility. */
-.db-checkbox:has(.db-checkbox-input:checked) .db-checkbox-checkmark {
-  opacity: 1;
+/* Link is borderless and text-only, so its hover/press surface stays transparent. */
+.db-btn-link {
+  --db-btn-surface-hover: transparent;
+  --db-btn-surface-active: transparent;
 }
-
-.db-checkbox:has(.db-checkbox-input:indeterminate) .db-checkbox-dash {
-  opacity: 1;
+/* Every danger button (icon included) disables to the filled treatment. */
+.db-btn-danger {
+  --db-btn-surface-disabled: var(--db-color-action-disabled-border);
+  --db-btn-border-disabled: transparent;
+  --db-btn-text-disabled: var(--db-color-action-primary-text-default);
 }
-
-/* Focus-visible (keyboard only). */
-.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;
+/* Danger, filled (primary): re-set only the surface; text/transparent border come from primary. */
+.db-btn-primary.db-btn-danger:not(.db-btn-icon-only) {
+  --db-btn-surface: var(--db-color-action-danger-primary-background-default);
+  --db-btn-surface-hover: var(--db-color-action-danger-primary-background-hover);
+  --db-btn-surface-active: var(--db-color-action-danger-primary-background-press);
 }
-
-/* 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. */
-.db-checkbox:has(.db-checkbox-input:disabled) {
-  cursor: not-allowed;
+/* Danger, secondary/outlined. */
+.db-btn-danger:not(.db-btn-primary):not(.db-btn-tertiary):not(.db-btn-link):not(.db-btn-icon-only) {
+  --db-btn-surface: var(--db-color-action-danger-default-background-default);
+  --db-btn-surface-hover: var(--db-color-action-danger-default-background-hover);
+  --db-btn-surface-active: var(--db-color-action-danger-default-background-press);
+  --db-btn-border: var(--db-color-action-danger-default-border-default);
+  --db-btn-border-hover: var(--db-color-action-danger-default-border-hover);
+  --db-btn-border-active: var(--db-color-action-danger-default-border-press);
+  --db-btn-text: var(--db-color-action-danger-default-text-default);
+  --db-btn-text-hover: var(--db-color-action-danger-default-text-hover);
+  --db-btn-text-active: var(--db-color-action-danger-default-text-press);
 }
-
-.db-checkbox:has(.db-checkbox-input:disabled) .db-checkbox-label {
-  color: var(--db-checkbox-text-disabled);
+/* Danger, tertiary/link: danger text everywhere, danger surface on hover/press; resting/disabled
+ * surface stay the tertiary ghost (override the filled danger-disabled set above). */
+.db-btn-tertiary.db-btn-danger,
+.db-btn-link.db-btn-danger {
+  --db-btn-surface-hover: var(--db-color-action-danger-default-background-hover);
+  --db-btn-surface-active: var(--db-color-action-danger-default-background-press);
+  --db-btn-surface-disabled: var(--db-color-action-tertiary-background-default);
+  --db-btn-text: var(--db-color-action-danger-default-text-default);
+  --db-btn-text-hover: var(--db-color-action-danger-default-text-hover);
+  --db-btn-text-active: var(--db-color-action-danger-default-text-press);
+  --db-btn-text-disabled: var(--db-color-action-disabled-text);
 }
-
-.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;
+/* Icon-only renders as the ghost (tertiary) treatment regardless of variant; re-set the semantic set
+ * so the icon-only rules paint from these component tokens. */
+.db-btn-icon-only {
+  --db-btn-surface: var(--db-color-action-tertiary-background-default);
+  --db-btn-surface-hover: var(--db-color-action-tertiary-background-hover);
+  --db-btn-surface-active: var(--db-color-action-tertiary-background-press);
+  --db-btn-text: var(--db-color-action-tertiary-text-default);
+  --db-btn-text-hover: var(--db-color-action-tertiary-text-hover);
+  --db-btn-text-active: var(--db-color-action-tertiary-text-press);
 }
-
-.db-checkbox:has(.db-checkbox-input:disabled) .db-checkbox-checkmark {
-  color: var(--db-checkbox-mark-disabled);
+/* Danger icon-only keeps the ghost resting surface (inherited above) but uses danger text and a
+ * danger hover/press surface. */
+.db-btn-icon-only.db-btn-danger {
+  --db-btn-surface-hover: var(--db-color-action-danger-default-background-hover);
+  --db-btn-surface-active: var(--db-color-action-danger-default-background-press);
+  --db-btn-text: var(--db-color-action-danger-default-text-default);
+  --db-btn-text-hover: var(--db-color-action-danger-default-text-hover);
+  --db-btn-text-active: var(--db-color-action-danger-default-text-press);
 }
 
-.db-checkbox:has(.db-checkbox-input:disabled) .db-checkbox-dash {
-  background-color: var(--db-checkbox-mark-disabled);
+/* ── 1. Base — paints the default (secondary) variant ────────────────────── */
+.db-btn {
+  appearance: none;
+  box-sizing: border-box;
+  position: relative; /* anchors the loading spinner */
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  vertical-align: middle;
+  white-space: nowrap;
+  user-select: none;
+  cursor: pointer;
+  height: var(--db-btn-height) !important;
+  font-family: inherit;
+  font-size: var(--db-btn-font-size);
+  font-weight: var(--db-btn-font-weight);
+  line-height: var(--db-btn-line-height) !important;
+  text-decoration: none !important;
+  border: var(--db-btn-border-width) solid var(--db-btn-border);
+  border-color: var(--db-btn-border) !important;
+  border-radius: var(--db-btn-border-radius) !important;
+  box-shadow: none !important;
+  background-color: var(--db-btn-surface) !important;
+  color: var(--db-btn-text) !important;
 }
 
-/* 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;
-  cursor: inherit;
+/* ── 2. Padding ──────────────────────────────────────────────────────────── */
+.db-btn.db-btn:where(:not(.db-btn-icon-only, .db-btn-force-icon, .db-btn-link)) {
+  padding: var(--db-btn-padding-vertical) var(--db-btn-padding-horizontal) !important;
 }
-
-/* 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. */
-.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);
-  border-radius: var(--db-checkbox-border-radius);
-  background-color: var(--db-checkbox-surface);
-  box-sizing: border-box;
-  transition:
-    background-color var(--db-checkbox-transition-duration) ease,
-    border-color var(--db-checkbox-transition-duration) ease,
-    box-shadow var(--db-checkbox-transition-duration) ease;
+.db-btn.db-btn-small:where(:not(.db-btn-icon-only, .db-btn-force-icon, .db-btn-link)) {
+  padding: 0 var(--db-btn-padding-horizontal-small) !important;
 }
-
-.db-checkbox .db-checkbox-indicator > .db-checkbox-checkmark {
-  grid-area: 1 / 1;
-  inline-size: 100%;
-  block-size: 100%;
-  color: var(--db-checkbox-mark);
-  opacity: 0;
-  transition: opacity var(--db-checkbox-transition-duration) ease;
+.db-btn.db-btn-link {
+  padding: 0 !important;
 }
-
-.db-checkbox .db-checkbox-indicator > .db-checkbox-checkmark path {
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
+.db-btn.db-btn-force-icon {
+  padding: 0 var(--db-btn-padding-horizontal-icon) !important;
 }
 
-.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-mark);
-  opacity: 0;
-  transition: opacity var(--db-checkbox-transition-duration) ease;
+/* ── 3. Interactive states ───────────────────────────────────────────────── */
+.db-btn:hover:not(:disabled, .db-btn-loading) {
+  background-color: var(--db-btn-surface-hover) !important;
+  border-color: var(--db-btn-border-hover) !important;
+  color: var(--db-btn-text-hover) !important;
 }
-
-/* Padding-inline replicates AntD's `.{prefix}-checkbox + span { padding: 0 8px }`.
- * `padding-left` provides the visible gap between indicator and label text.
- * `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. */
-.db-checkbox .db-checkbox-label {
-  color: var(--db-checkbox-text);
-  padding-inline: var(--db-checkbox-label-spacing);
-  word-break: break-word;
+.db-btn:active:not(:disabled, .db-btn-loading) {
+  background-color: var(--db-btn-surface-active) !important;
+  border-color: var(--db-btn-border-active) !important;
+  color: var(--db-btn-text-active) !important;
 }
 
-/* Form-flow integration: when a checkbox or group sits next to a `<Hint>` or
- * `<FormMessage>` in a form layout, collapse the inherited sibling margin and
- * align the helper text under the checkbox label. Mirrors the AntD-era rules
- * carried in `getWrapperStyle` and `getNativeCheckboxWrapperStyles`.
- *
- * Each helper-text class is listed once per theme (`du-bois-light-*` /
- * `du-bois-dark-*`). The selectors deliberately repeat the root/group class
- * (`.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. */
-
-/* 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. */
-.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-space-6);
-  margin-top: 0;
+/* ── 4. Focus ────────────────────────────────────────────────────────────── */
+.db-btn:focus-visible {
+  outline: 2px solid var(--db-btn-focus-ring);
+  outline-offset: -2px;
 }
-
-/* 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 + .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-space-2);
+.db-btn-primary:focus-visible {
+  outline-offset: 1px;
 }
-
-/* 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 `.db-cluster` won't do. Both wire their gap to the
- * checkbox spacing token so a retheme moves with the rest of the component. */
-.db-checkbox-group {
-  display: flex;
+.db-btn-use-focus-pseudo-class:focus {
+  outline: 2px solid var(--db-btn-focus-ring);
+  outline-offset: 1px;
 }
 
-/* Horizontal (default): single non-wrapping row. `:not(.db-stack)` keeps this
- * off the vertical element so it never fights the stack primitive's gap. */
-.db-checkbox-group:not(.db-stack) {
-  flex-wrap: nowrap;
-  column-gap: var(--db-checkbox-label-spacing);
-  row-gap: 0;
+/* ── 5. Small / block (full-width) / empty ────────────────────────────────── */
+.db-btn-small {
+  height: var(--db-btn-height-small) !important;
 }
-
-/* 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);
+.db-btn-block {
+  width: 100%;
+}
+.db-btn-empty {
+  background-color: transparent !important;
+  border-color: transparent !important;
+}
+.db-btn-default.db-btn-empty {
+  color: var(--db-btn-icon-glyph) !important;
+}
+.db-btn-empty.db-btn-loading {
+  width: var(--db-btn-loading-empty-width);
 }
 
-:where(:root), :where(.du-bois-light) {
-  /* Shape */
-  --db-radio-border-radius: var(--db-radius-full);
-  --db-radio-border-width: 1px;
-
-  /* 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: 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-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);
-
-  --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);
-
-  /* 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-1);
+/* ── 6. Tertiary & link ──────────────────────────────────────────────────── */
+.db-btn-link {
+  height: auto !important;
+  border: none !important;
+}
+/* Re-declare the text color for a non-icon-only tertiary/link at two-class weight so a plain
+ * call-site `color` override loses; an icon-only glyph stays at base weight so its override wins. */
+.db-btn-tertiary:not(.db-btn-icon-only),
+.db-btn-link:not(.db-btn-icon-only) {
+  color: var(--db-btn-text) !important;
+}
+/* Keep the resting border at two-class weight (parity with the shielded border-color). */
+.db-btn.db-btn-tertiary,
+.db-btn.db-btn-link {
+  border-color: var(--db-btn-border) !important;
+}
 
-  /* Motion */
-  --db-radio-transition-duration: var(--db-selection-toggle-transition-duration);
+/* ── 7. Danger ───────────────────────────────────────────────────────────── */
+.db-btn-danger:focus-visible {
+  outline-color: var(--db-btn-danger-focus-ring);
 }
 
-/* Native-input <Radio> styles. Classic CSS only — no native nesting (the
- * `&`-style nesting feature ships in Chrome/Edge 120, Safari 17.2, Firefox 117
- * which leaves a non-trivial slice of our production traffic uncovered today;
- * see PR #1954620 thread). `:has()` lookups are still used to read state from
- * the native <input>; that feature has the support coverage we need.
- *
- * Structure (assumed by the React component):
- *
- *   <label class="db-radio">
- *     <input type="radio" />
- *     <span  class="db-radio-indicator">     ← circle border + fill react to state
- *       <span class="db-radio-dot" />        ← visible when :checked
- *     </span>
- *     <span class="db-radio-label">{children}</span>
- *   </label>
- *
- * The root only ever has one <input> descendant, so a bare `input` selector is
- * safe and clearer than a class. Mirrors NativeCheckbox.css; the differences are
- * the circular indicator (border-radius: full) and the filled dot instead of a
- * checkmark/dash, and there is no indeterminate state.
+/* ── 8. Icon-only ────────────────────────────────────────────────────────── */
+.db-btn-icon-only {
+  padding: 0;
+  border: none !important;
+  background-color: var(--db-btn-surface) !important;
+  font-size: var(--db-btn-icon-only-font-size);
+}
+/* `:where()` keeps this at (0,1,0) so a call-site `css` width override wins, as it does for `height`. */
+.db-btn-icon-only:where(:not(.db-btn-small)) {
+  width: var(--db-btn-height) !important;
+}
+.db-btn-icon-only:not(.db-btn-link, .db-btn-tertiary, [href], :hover, :active, :disabled) {
+  color: var(--db-btn-icon-glyph) !important;
+}
+/* `:where()` on the exclusion holds this at (0,2,0): enough to tint an un-overridden icon-only link
+ * over the base color, while still letting a consumer's own icon-color override win on source order. */
+.db-btn-icon-only[href]:where(:not(.db-btn-tertiary, .db-btn-link, .db-btn-danger, :disabled)) {
+  color: var(--db-btn-text) !important;
+}
+.db-btn-icon-only:where(.db-btn-small) {
+  width: var(--db-btn-height-small);
+}
+.db-btn-icon-only.db-btn-small {
+  line-height: var(--db-btn-line-height-small) !important;
+}
+.db-btn-icon-only:hover:not(:disabled, .db-btn-loading) {
+  background-color: var(--db-btn-surface-hover) !important;
+  color: var(--db-btn-text-hover) !important;
+}
+.db-btn-icon-only:active:not(:disabled, .db-btn-loading) {
+  background-color: var(--db-btn-surface-active) !important;
+  color: var(--db-btn-text-active) !important;
+}
+.db-btn-icon-only:enabled:not(.db-btn-primary, .db-btn-tertiary, .db-btn-link, .db-btn-danger, :hover, :active)
+  > .anticon {
+  color: var(--db-btn-icon-glyph);
+}
+.db-btn-icon-only.db-btn-danger:not(:hover, :active) > .anticon {
+  color: var(--db-btn-text);
+}
+.db-btn-icon-only.db-btn-danger:hover:not(:disabled, .db-btn-loading) {
+  background-color: var(--db-btn-surface-hover) !important;
+  color: var(--db-btn-text-hover) !important;
+}
+.db-btn-icon-only.db-btn-danger:active:not(:disabled, .db-btn-loading) {
+  background-color: var(--db-btn-surface-active) !important;
+  color: var(--db-btn-text-active) !important;
+}
+
+/* ── 9. Disabled — base rules paint the per-variant `*-disabled` tokens (see tokens.css) ──────── */
+.db-btn:disabled {
+  cursor: not-allowed;
+  background-color: var(--db-btn-surface-disabled) !important;
+  color: var(--db-btn-text-disabled) !important;
+}
+/* Empty disabled buttons keep a transparent border (set elsewhere), so exclude them.
+ * `:where()` on the exclusion holds this at (0,2,0): enough to beat the base border, while still
+ * letting a consumer's own `[disabled]` border override win on source order. */
+.db-btn:disabled:where(:not(.db-btn-empty)) {
+  border-color: var(--db-btn-border-disabled) !important;
+}
+.db-btn-icon-only:disabled {
+  border: none;
+}
+.db-btn-icon-only:disabled:hover {
+  background-color: transparent !important;
+}
+.db-btn:disabled > .anticon {
+  color: inherit !important;
+}
+
+/* ── 10. Icon & content layout ───────────────────────────────────────────── */
+/* The leading icon renders unwrapped as the button's direct `.anticon` child (see NativeButton.tsx),
+ * so `> .anticon` targets only a real icon glyph — a non-glyph `icon` (e.g. a Spinner) keeps its own
+ * sizing — and out-specifies AntD's runtime-injected global `.anticon` rule. */
+.db-btn > .anticon,
+.db-btn-end-icon,
+.db-btn-end-icon > .anticon {
+  display: inline-flex;
+  align-items: center;
+  font-size: var(--db-btn-icon-size) !important;
+  line-height: 0;
+}
+.db-btn-small > .anticon .anticon {
+  line-height: 0;
+}
+.db-btn > .db-btn-content > .anticon {
+  display: inline-flex;
+  align-items: center;
+  line-height: 0;
+}
+.db-btn-content {
+  display: inline-flex;
+  align-items: center;
+}
+.db-btn > .anticon + .db-btn-content {
+  margin-inline-start: var(--db-btn-gap) !important;
+}
+.db-btn-end-icon {
+  margin-inline-start: var(--db-btn-end-icon-gap) !important;
+}
+.db-btn-small .db-btn-end-icon {
+  margin-inline-start: var(--db-btn-end-icon-gap-small) !important;
+}
+.db-btn-default:not(.db-btn-danger, [href], :hover, :active, :disabled) > .anticon {
+  color: var(--db-btn-icon-glyph);
+}
+.db-btn-default[href]:not(.db-btn-danger, :hover, :active, :disabled) .db-btn-end-icon {
+  color: var(--db-btn-icon-glyph);
+}
+.db-btn-default:not([href], .db-btn-danger, :hover, :active, :disabled)
+  > .db-btn-content
+  > .db-btn-end-icon
+  > .anticon {
+  color: var(--db-btn-icon-glyph);
+}
+
+/* ── 11. Loading ─────────────────────────────────────────────────────────── */
+.db-btn-loading {
+  cursor: default;
+}
+.db-btn-force-icon.db-btn-loading:disabled {
+  border-color: transparent !important;
+}
+.db-btn-spinner {
+  color: inherit !important;
+  pointer-events: none;
+}
+.db-btn-loading-with-icon .db-btn-content {
+  padding-inline-start: calc(var(--db-btn-icon-size) + var(--db-btn-gap));
+}
+.db-btn-loading .db-btn-spinner {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.db-btn-loading.db-btn-icon-only .db-btn-spinner {
+  position: static;
+  transform: none;
+}
+
+/* ── 12. dangerouslySetForceIconStyles ───────────────────────────────────── */
+.db-btn-force-icon {
+  width: var(--db-btn-height) !important;
+  color: var(--db-btn-icon-glyph) !important;
+}
+.db-btn-force-icon.db-btn-small {
+  width: var(--db-btn-height-small) !important;
+}
+
+
+:where(:root), :where(.du-bois-light) {
+  /* Shape */
+  --db-checkbox-border-radius: var(--db-selection-toggle-border-radius);
+  --db-checkbox-border-width: 1px;
+
+  /* Color */
+  --db-checkbox-surface: var(--db-selection-toggle-surface);
+  --db-checkbox-surface-hover: var(--db-color-action-default-background-hover);
+  --db-checkbox-surface-active: 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-active: var(--db-selection-toggle-surface-checked-active);
+  --db-checkbox-surface-disabled: var(--db-selection-toggle-surface-disabled);
+
+  --db-checkbox-border: var(--db-color-action-default-border-default);
+  --db-checkbox-border-hover: var(--db-selection-toggle-border-hover);
+  --db-checkbox-border-active: var(--db-selection-toggle-border-active);
+  --db-checkbox-focus-ring: var(--db-focus-ring-color);
+  --db-checkbox-border-disabled: var(--db-color-action-disabled-border);
+
+  --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);
+
+  /* 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-2); /* 8px */
+  --db-checkbox-indeterminate-mark-height: calc(var(--db-size-1) * 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
+ * `&`-style nesting feature ships in Chrome/Edge 120, Safari 17.2, Firefox 117
+ * which leaves a non-trivial slice of our production traffic uncovered today;
+ * see PR #1954620 thread). `:has()` lookups are still used to read state from
+ * the native <input>; that feature has the support coverage we need.
  *
- * TODO(DUBOIS-452): the indicator/dot state styles below are identical to
- * NativeCheckbox.css — consolidate them into a shared `.db-selection-toggle` class. */
+ * Structure (assumed by the React component):
+ *
+ *   <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="db-checkbox-label">{children}</span>
+ *   </label>
+ *
+ * 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. */
 
-.db-radio {
-  /* `display: flex` (block-level), NOT `inline-flex`: see NativeCheckbox.css for
-   * the line-box / sibling-spacing rationale. */
+.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
+   * lower under the native checkbox than under the AntD checkbox (which itself is
+   * wrapped in a block `<div>`, so its label's inline-line-box is consumed inside
+   * that div and never leaks into sibling spacing). `width: fit-content` keeps the
+   * label behaving like an inline-flex item inside a flex-row parent (the group,
+   * or any consumer's flex container). */
   display: flex;
   align-items: flex-start;
   position: relative;
   cursor: pointer;
   user-select: none;
+  /* No `gap` here — spacing between indicator and label, plus the trailing
+   * whitespace that gives sibling checkboxes their visual separation, lives
+   * 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 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);
+ * anyway. Putting `:hover` on the root also makes the entire label area
+ * — not just the indicator square — drive the visual feedback. */
+.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);
 }
 
-.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);
+.db-checkbox:active:has(.db-checkbox-input:not(:disabled, :checked, :indeterminate)) .db-checkbox-indicator {
+  background-color: var(--db-checkbox-surface-active);
+  border-color: var(--db-checkbox-border-active);
 }
 
-/* Selected fill. */
-.db-radio:has(input:checked) .db-radio-indicator {
-  background-color: var(--db-radio-surface-checked);
-  border-color: var(--db-radio-surface-checked);
+/* Selected fill — checked and indeterminate share the same surface. */
+.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);
 }
 
-/* AntD getRadioInputStyles checked hover: background = actionPrimaryBackgroundHover,
- * borderColor = actionPrimaryBackgroundPress (a darker ring than the fill). */
-.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);
+.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);
 }
 
-/* AntD getRadioInputStyles checked active: background = actionDefaultBackgroundPress,
- * borderColor = actionDefaultBorderPress (two-tone, not flat). */
-.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);
+.db-checkbox:active:has(.db-checkbox-input:is(:checked, :indeterminate):not(:disabled)) .db-checkbox-indicator {
+  background-color: var(--db-checkbox-surface-checked-active);
+  border-color: var(--db-checkbox-surface-checked-active);
 }
 
-/* Dot visibility. */
-.db-radio:has(input:checked) .db-radio-dot {
+/* Mark visibility. */
+.db-checkbox:has(.db-checkbox-input:checked) .db-checkbox-checkmark {
   opacity: 1;
 }
 
-/* Focus-visible (keyboard only). AntD getRadioInputStyles splits focus by checked
- * state, so we do too.
- *
- * UNCHECKED focus (AntD `&:not(disabled) > input:focus + inner`): only the border
- * color changes to actionPrimaryBackgroundDefault — NO outline ring. */
-.db-radio:has(input:focus-visible:not(:checked)) .db-radio-indicator {
-  border-color: var(--db-radio-border-unchecked-focus);
+.db-checkbox:has(.db-checkbox-input:indeterminate) .db-checkbox-dash {
+  opacity: 1;
 }
 
-/* CHECKED focus-visible (AntD `&.checked &:not(disabled) > input:focus-visible + inner`):
- * background = actionPrimaryBackgroundDefault, borderColor = actionDefaultBorderFocus,
- * outline = 1px solid actionPrimaryBackgroundDefault, outlineOffset = 1. */
-.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-outline-checked-focus);
-  outline-offset: 1px;
+/* Focus-visible (keyboard only). */
+.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 checked and unchecked). Sourced from `input:disabled` so the
- * standalone-disabled and group-disabled paths both land here. */
-.db-radio:has(input:disabled) {
+/* 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. */
+.db-checkbox:has(.db-checkbox-input:disabled) {
   cursor: not-allowed;
 }
 
-.db-radio:has(input:disabled) .db-radio-label {
-  color: var(--db-radio-text-disabled);
+.db-checkbox:has(.db-checkbox-input:disabled) .db-checkbox-label {
+  color: var(--db-checkbox-text-disabled);
 }
 
-.db-radio:has(input:disabled) .db-radio-indicator {
-  background-color: var(--db-radio-surface-disabled);
-  border-color: var(--db-radio-border-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;
 }
 
-.db-radio:has(input:disabled) .db-radio-dot {
-  background-color: var(--db-radio-mark-disabled);
+.db-checkbox:has(.db-checkbox-input:disabled) .db-checkbox-checkmark {
+  color: var(--db-checkbox-mark-disabled);
 }
 
-/* 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
+.db-checkbox:has(.db-checkbox-input:disabled) .db-checkbox-dash {
+  background-color: var(--db-checkbox-mark-disabled);
+}
+
+/* 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 circle keeps AntD's cursor too. */
-.db-radio input {
+ * 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-radio-size);
-  block-size: var(--db-radio-size);
+  inline-size: var(--db-checkbox-size);
+  block-size: var(--db-checkbox-size);
   margin: 0;
   opacity: 0;
   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. */
-.db-radio .db-radio-indicator {
+/* 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. */
+.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 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. */
+   * 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-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);
-  border-radius: var(--db-radio-border-radius);
-  background-color: var(--db-radio-surface);
+  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);
+  border-radius: var(--db-checkbox-border-radius);
+  background-color: var(--db-checkbox-surface);
   box-sizing: border-box;
   transition:
-    background-color var(--db-radio-transition-duration) ease,
-    border-color var(--db-radio-transition-duration) ease,
-    box-shadow var(--db-radio-transition-duration) ease;
+    background-color var(--db-checkbox-transition-duration) ease,
+    border-color var(--db-checkbox-transition-duration) ease,
+    box-shadow var(--db-checkbox-transition-duration) ease;
 }
 
-.db-radio .db-radio-indicator > .db-radio-dot {
+.db-checkbox .db-checkbox-indicator > .db-checkbox-checkmark {
   grid-area: 1 / 1;
-  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-mark);
+  inline-size: 100%;
+  block-size: 100%;
+  color: var(--db-checkbox-mark);
   opacity: 0;
-  transition: opacity var(--db-radio-transition-duration) ease;
+  transition: opacity var(--db-checkbox-transition-duration) ease;
 }
 
-/* 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) {
-  .db-radio .db-radio-indicator,
-  .db-radio .db-radio-indicator > .db-radio-dot {
-    transition: none;
-  }
+.db-checkbox .db-checkbox-indicator > .db-checkbox-checkmark path {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
 }
 
-/* Padding-inline replicates the AntD `.{prefix} + span` label gap and the
- * trailing whitespace that separates adjacent radios in a row. */
-.db-radio .db-radio-label {
-  color: var(--db-radio-text);
-  padding-inline: var(--db-radio-label-spacing);
-  word-break: break-word;
+.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-mark);
+  opacity: 0;
+  transition: opacity var(--db-checkbox-transition-duration) ease;
 }
 
-/* Form-flow integration: align helper text under the radio label. The `paddingLeft`
- * 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. */
-.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-space-6);
-  margin-top: 0;
+/* Padding-inline replicates AntD's `.{prefix}-checkbox + span { padding: 0 8px }`.
+ * `padding-left` provides the visible gap between indicator and label text.
+ * `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. */
+.db-checkbox .db-checkbox-label {
+  color: var(--db-checkbox-text);
+  padding-inline: var(--db-checkbox-label-spacing);
+  word-break: break-word;
 }
 
-/* Vertical hint rhythm (AntD getVerticalRadioGroupStyles, vertical-only): a hint
- * 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 .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. */
-.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-space-2));
-  margin-bottom: var(--db-space-2);
-}
+/* Form-flow integration: when a checkbox or group sits next to a `<Hint>` or
+ * `<FormMessage>` in a form layout, collapse the inherited sibling margin and
+ * align the helper text under the checkbox label. Mirrors the AntD-era rules
+ * carried in `getWrapperStyle` and `getNativeCheckboxWrapperStyles`.
+ *
+ * Each helper-text class is listed once per theme (`du-bois-light-*` /
+ * `du-bois-dark-*`). The selectors deliberately repeat the root/group class
+ * (`.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. */
 
-/* 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. */
-.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 {
+/* 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. */
+.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-space-6);
   margin-top: 0;
 }
 
-.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 {
+/* Group spacing against sibling form text — 8px gap above the group when it
+ * follows a Label or 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-label + .db-checkbox-group.db-checkbox-group,
+.du-bois-dark-label + .db-checkbox-group.db-checkbox-group,
+.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-space-2);
 }
 
-/* RadioGroup layout. Vertical (the default) delegates flex-direction to the
- * .db-stack primitive; horizontal is a two-row grid (mirroring AntD). */
-.db-radio-group {
+/* 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 `.db-cluster` won't do. Both wire their gap to the
+ * checkbox spacing token so a retheme moves with the rest of the component. */
+.db-checkbox-group {
   display: flex;
 }
 
-/* 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. */
-.db-radio-group.db-stack {
-  --db-stack-gap: 0;
+/* Horizontal (default): single non-wrapping row. `:not(.db-stack)` keeps this
+ * off the vertical element so it never fights the stack primitive's gap. */
+.db-checkbox-group:not(.db-stack) {
+  flex-wrap: nowrap;
+  column-gap: var(--db-checkbox-label-spacing);
+  row-gap: 0;
 }
 
-/* AntD `& > label { paddingBottom: sm }`. */
-.db-radio-group.db-stack > .db-radio {
-  padding-bottom: var(--db-space-2);
+/* 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);
 }
 
-/* AntD `& > label:last-of-type { paddingBottom: 0 }`. */
-.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 `.db-radio` padding-bottom
- * rhythm above (the tile's own class is du-bois-{light,dark}-radio-tile), so space
- * 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-space-4);
-}
 
-/* Horizontal: AntD `getHorizontalRadioGroupStyles` is a TWO-ROW grid (NOT a flex
- * row) so each radio sits in the [label] row and its following hint drops into the
- * [hint] row of the same auto-column. `&&` in AntD doubles specificity; the doubled
- * group class here matches that.
- * AntD: `display: grid; gridTemplateRows: [label] auto [hint] auto;
- * gridAutoColumns: max-content; gridColumnGap: md`. */
-.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-4);
-}
+:where(:root), :where(.du-bois-light) {
+  /* Density */
+  --db-drawer-padding-horizontal: var(--db-space-6);
+  --db-drawer-padding-horizontal-small: var(--db-space-4);
+  --db-drawer-content-padding-top: var(--db-space-4);
+  --db-drawer-content-padding-top-small: var(--db-space-2);
+  --db-drawer-footer-padding-top: var(--db-space-4);
+  --db-drawer-footer-padding-bottom: var(--db-space-6);
+  --db-drawer-footer-padding-bottom-small: var(--db-space-4);
+  --db-drawer-title-margin-bottom: var(--db-space-2);
+  --db-drawer-close-button-margin: var(--db-space-1);
 
-/* Equal column widths: AntD `gridAutoColumns: minmax(0, 1fr)`. */
-.db-radio-group--horizontal.db-radio-group--equal-width {
-  grid-auto-columns: minmax(0, 1fr);
+  /* Color */
+  --db-drawer-surface: var(--db-surface-base);
+  --db-drawer-text: var(--db-text-base);
+  --db-drawer-border: var(--db-border-base);
+  /* No v2 token holds the drawer scrim yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-drawer-overlay: var(--db-color-overlay-overlay);
 }
 
-/* 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 `> .db-radio`) lives in the
- * label row. grid-auto-flow defaults to row, so successive items advance the implicit
- * column. */
-.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;
+:where(:root), :where(.du-bois-light) {
+  /* Elevation */
+  --db-drawer-shadow: var(--db-elevation-high);
 }
 
-/* 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 .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). */
-.db-radio-group--horizontal:has(> .du-bois-light-hint),
-.db-radio-group--horizontal:has(> .du-bois-dark-hint) {
-  margin-top: var(--db-space-2);
-}
 
-/* AntD `&& + form-message { marginTop: sm }` (horizontal): a form-message following
- * the whole group is separated by sm. */
-.db-radio-group--horizontal + .du-bois-light-form-message,
-.db-radio-group--horizontal + .du-bois-dark-form-message {
-  margin-top: var(--db-space-2);
-}
 
-:where(:root), :where(.du-bois-light) {
-  /* Shape */
-  --db-switch-border-radius: var(--db-radius-full);
-  --db-switch-border-width: 1px;
 
-  /* 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: 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-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);
 
-  --db-switch-thumb: var(--db-selection-toggle-surface);
 
-  --db-switch-text: var(--db-selection-toggle-text);
-  --db-switch-text-disabled: var(--db-selection-toggle-text-disabled);
 
-  /* Density */
-  --db-switch-track-width: calc(var(--db-size-4) * 1.75); /* 28px */
-  --db-switch-track-height: var(--db-size-4); /* 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);
+/* Component tokens for the native Icon. */
+:where(:root),
+:where(.du-bois-light) {
+  --db-icon-size: var(--db-font-size-xl);
+  --db-icon-color-danger: var(--db-color-text-validation-danger);
+  --db-icon-color-warning: var(--db-color-text-validation-warning);
+  --db-icon-color-success: var(--db-color-text-validation-success);
+  --db-icon-ai-gradient-start: var(--db-ai-gradient-start);
+  --db-icon-ai-gradient-mid: var(--db-ai-gradient-mid);
+  --db-icon-ai-gradient-end: var(--db-ai-gradient-end);
 }
 
-.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;
-  align-items: center;
-  cursor: pointer;
-  user-select: none;
-  width: fit-content;
-  margin-inline-end: var(--db-switch-label-spacing);
+/* Native Icon styles. Ships through mortar.css and reads only component-tier --db-icon-* tokens.
+ * Icon size is driven solely by the `--db-icon-size` design token: to resize an icon, set that
+ * token in scope (default 16px in tokens.css) rather than overriding `font-size`. */
+.db-icon {
+  display: inline-block;
+  color: inherit;
+  font-style: normal;
+  font-size: var(--db-icon-size);
+  line-height: 0;
+  text-align: center;
+  text-transform: none;
+  vertical-align: -0.125em;
+  text-rendering: optimizelegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-.db-switch:has(input:disabled) {
-  cursor: not-allowed;
+.db-icon svg {
+  display: inline-block;
+  line-height: 1;
 }
 
-/* The track. `appearance: none` strips the native checkbox rendering so the input itself can be styled. */
-.db-switch input {
-  appearance: none;
-  position: relative;
-  flex-shrink: 0;
-  margin: 0;
+/* TODO: remove once clickable-icon callsites are gone. Kept for backwards compatibility with the
+ * AntD icon, which made icons clickable via onClick; some callsites still rely on it. Actual icons
+ * should never carry a tabindex — a clickable icon belongs inside a button. */
+.db-icon[tabindex] {
   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);
-  border-radius: var(--db-switch-border-radius);
-  background-color: var(--db-switch-surface);
-  box-sizing: border-box;
-  transition:
-    background-color var(--db-switch-transition-duration) ease,
-    border-color var(--db-switch-transition-duration) ease;
-}
-
-/* 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. */
-.db-switch input::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: calc(-1 * var(--db-switch-border-width));
-  inline-size: var(--db-switch-thumb-size);
-  block-size: var(--db-switch-thumb-size);
-  border: var(--db-switch-border-width) solid;
-  border-color: inherit;
-  border-radius: var(--db-switch-border-radius);
-  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`. */
-.db-switch:hover input:not(:disabled):not(:checked) {
-  background-color: var(--db-switch-surface-hover);
-  border-color: var(--db-switch-border-hover);
+/* Semantic colors set `color` only; the SVG glyph paints its `fill`/`stroke` from `currentColor`,
+ * so setting the text color recolors the icon. */
+.db-icon-danger {
+  color: var(--db-icon-color-danger);
 }
 
-.db-switch:active input:not(:disabled):not(:checked) {
-  background-color: var(--db-switch-surface-press);
-  border-color: var(--db-switch-border-press);
+.db-icon-warning {
+  color: var(--db-icon-color-warning);
 }
 
-.db-switch input:checked {
-  background-color: var(--db-switch-surface-checked);
-  border-color: var(--db-switch-border-checked);
+.db-icon-success {
+  color: var(--db-icon-color-success);
 }
 
-.db-switch:hover input:checked:not(:disabled) {
-  background-color: var(--db-switch-surface-checked-hover);
-  border-color: var(--db-switch-border-checked-hover);
+.db-icon-ai svg * {
+  fill: var(--db-icon-gradient);
 }
 
-.db-switch:active input:checked:not(:disabled) {
-  background-color: var(--db-switch-surface-checked-press);
-  border-color: var(--db-switch-border-checked-press);
+.db-icon-ai-gradient-start {
+  stop-color: var(--db-icon-ai-gradient-start);
 }
 
-.db-switch input:checked::before {
-  transform: translateY(-50%) translateX(calc(var(--db-switch-track-width) - var(--db-switch-thumb-size)));
+.db-icon-ai-gradient-mid {
+  stop-color: var(--db-icon-ai-gradient-mid);
 }
 
-/* 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.
- * 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: 1px solid var(--db-focus-ring-color);
-  outline-offset: 0;
+.db-icon-ai-gradient-end {
+  stop-color: var(--db-icon-ai-gradient-end);
 }
 
-.db-switch input:checked:focus-visible {
-  outline-offset: 1px;
+.db-icon-gradient-definitions {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
 
-.db-switch input:disabled {
-  cursor: not-allowed;
-  background-color: var(--db-switch-surface-disabled);
-  border-color: var(--db-switch-border-disabled);
+.db-icon-spin {
+  display: inline-block;
+  animation: db-icon-loading-circle 1s infinite linear;
 }
 
-/* Disabled + on: more specific than the plain disabled rule, so it wins regardless of source order. */
-.db-switch input:checked:disabled {
-  background-color: var(--db-switch-surface-checked-disabled);
-  border-color: var(--db-switch-surface-checked-disabled);
+@keyframes db-icon-loading-circle {
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .db-switch input,
-  .db-switch input::before {
-    transition: none;
+  .db-icon-spin {
+    animation: none;
   }
 }
 
-.db-switch-wrapper {
-  display: flex;
-  align-items: center;
-}
 
-.db-switch-wrapper .db-switch-state-message {
-  margin-inline-start: auto;
-  margin-inline-end: var(--db-switch-label-spacing);
-}
 
-/* `:first-child` scopes this to the label-first layout; the plain layout renders the label last. */
-.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);
-}
 
-.db-switch-state-message {
-  color: var(--db-switch-text);
-}
+:where(:root), :where(.du-bois-light) {
+  /* Shape */
+  /* Must not scale with density; no non-scaling system token holds it. TODO(FEINF-6505): adopt a v2 system token when one is added. */
+  --db-navigation-menu-indicator-thickness: 4px;
+  /* No system token holds this control-specific inset. TODO(FEINF-6505): adopt a v2 system token when one is added. */
+  --db-navigation-menu-focus-ring-offset: -1px;
 
-/* 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);
-}
+  /* Color */
+  --db-navigation-menu-indicator: var(--db-accent-surface);
+  --db-navigation-menu-focus-ring: var(--db-focus-ring-color);
+  --db-navigation-menu-text: var(--db-text-subtle);
+  --db-navigation-menu-text-selected: var(--db-text-base);
+  /* No v2 semantic for default-action link text yet; bridges on the v1 --db-color-* token. */
+  --db-navigation-menu-text-hover: var(--db-color-action-default-text-hover);
+  --db-navigation-menu-text-active: var(--db-color-action-default-text-press);
 
-/* Indent a following hint/message past the track. The class is doubled to out-specify FormMessage's
- * own margin rule. Each rule's key (rightmost) selector is a single class, not a multi-item :is(),
- * so Chromium can hash-reject it instead of attempting the match against every element on every
- * recalc (the leading/middle :is() groups aren't the key selector, so they're left as-is). */
-:is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper) + .du-bois-light-hint, :is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper) + .du-bois-dark-hint, :is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper) + .du-bois-light-form-message, :is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper) + .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)
-  + .du-bois-light-form-message, :is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper)
-  + :is(.du-bois-light-hint, .du-bois-dark-hint)
-  + .du-bois-dark-form-message {
-  padding-inline-start: calc(var(--db-space-2) + var(--db-switch-track-width));
+  /* Density */
+  --db-navigation-menu-item-height: var(--db-size-8);
+  --db-navigation-menu-item-min-width: var(--db-size-6);
+  --db-navigation-menu-link-padding-top: var(--db-space-1);
+  --db-navigation-menu-link-padding-bottom: var(--db-space-2);
+  --db-navigation-menu-focus-ring-width: var(--db-focus-ring-width);
 }
 
-:is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper) + .du-bois-light-form-message, :is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper) + .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)
-  + .du-bois-light-form-message, :is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper)
-  + :is(.du-bois-light-hint, .du-bois-dark-hint)
-  + .du-bois-dark-form-message {
-  margin-top: 0;
+
+:where(:root), :where(.du-bois-light) {
+  /* Color */
+  /* No v2 token holds tertiary action-text states yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-overflow-trigger-text: var(--db-color-action-tertiary-text-default);
+  --db-overflow-trigger-text-hover: var(--db-color-action-tertiary-text-hover);
+  --db-overflow-trigger-text-press: var(--db-color-action-tertiary-text-press);
+
+  /* Density */
+  --db-overflow-spacing: var(--db-space-2);
+  --db-overflow-menu-spacing: var(--db-space-1);
 }
 
-/* Component-tier tokens for the native <Button>, grouped by area (density, shape, typography, color).
- * Colors alias the action-* system tokens; sizes alias the system density scale.
- *
- * Follows the mortar/action.css pattern: one semantic set (surface / border / text, each with
- * -hover / -press / -disabled) whose defaults are the secondary variant. The variant classes that
- * re-set these tokens per variant live in NativeButton.css; this file declares only tokens. */
 
-/* Declared under the theme classes too (not just :root) so the var() chain re-resolves inside a
- * `.du-bois-dark` subtree (or a portal that re-applies the theme class) instead of freezing at the root values. */
+
+/* Popover is a neutral-card member of the popup family: surface, text, border, and radius come
+ * from --db-popup-*. Link, focus, and spacing are popover-specific and reference system tokens
+ * directly. The popup elevation scale is light-only, so the dark shadow is re-declared below. */
+
 :where(:root), :where(.du-bois-light) {
-  /* ── Density ──────────────────────────────────────────────────────────── */
-  --db-btn-height: var(--db-size-8);
-  --db-btn-height-small: var(--db-size-6);
-  --db-btn-icon-size: var(--db-size-4);
-  --db-btn-border-width: 1px;
-  --db-btn-padding-vertical: var(--db-space-1);
-  --db-btn-padding-horizontal: var(--db-space-3);
-  --db-btn-padding-horizontal-small: var(--db-space-2);
-  /* Icon/force-icon horizontal padding: half the standard horizontal padding. */
-  --db-btn-padding-horizontal-icon: calc(var(--db-space-3) / 2); /* 6px */
-  --db-btn-gap: var(--db-space-1);
-  --db-btn-end-icon-gap: var(--db-space-2);
-  --db-btn-end-icon-gap-small: var(--db-space-1);
-  /* Width of a content-less button while loading, so the standalone spinner has room. */
-  --db-btn-loading-empty-width: var(--db-size-10);
+  /* Shape */
+  --db-popover-border-radius: var(--db-popup-border-radius);
 
-  /* ── Shape ────────────────────────────────────────────────────────────── */
-  --db-btn-border-radius: var(--db-shape-control);
+  /* Color */
+  --db-popover-surface: var(--db-popup-surface);
+  --db-popover-text: var(--db-popup-text);
+  --db-popover-border: var(--db-popup-border);
+  /* No v2 token holds the tertiary link text yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-popover-link-text: var(--db-color-action-tertiary-text-default);
+  --db-popover-link-text-hover: var(--db-color-action-tertiary-text-hover);
+  --db-popover-focus-ring: var(--db-focus-ring-color);
 
-  /* ── Typography ───────────────────────────────────────────────────────── */
-  --db-btn-font-size: var(--db-font-size-base);
-  --db-btn-icon-only-font-size: var(--db-font-size-lg); /* 15px */
-  --db-btn-font-weight: var(--db-font-weight-normal);
-  /* Line heights are hard-coded until the typography scale ships computed per-level line-height tokens. */
-  --db-btn-line-height: 1.25rem; /* 20px */
-  --db-btn-line-height-small: 1rem; /* 16px */
+  /* Density */
+  --db-popover-spacing: var(--db-space-2);
+  --db-popover-focus-ring-width: var(--db-focus-ring-width);
 
-  /* ── Color: semantic set (defaults = secondary variant) ───────────────── */
-  --db-btn-surface: var(--db-color-action-default-background-default);
-  --db-btn-surface-hover: var(--db-color-action-default-background-hover);
-  --db-btn-surface-press: var(--db-color-action-default-background-press);
-  --db-btn-surface-disabled: transparent;
-  --db-btn-border: var(--db-color-action-default-border-default);
-  --db-btn-border-hover: var(--db-color-action-default-border-hover);
-  --db-btn-border-press: var(--db-color-action-default-border-press);
-  --db-btn-border-disabled: var(--db-color-action-disabled-border);
-  --db-btn-text: var(--db-color-action-default-text-default);
-  --db-btn-text-hover: var(--db-color-action-default-text-hover);
-  --db-btn-text-press: var(--db-color-action-default-text-press);
-  --db-btn-text-disabled: var(--db-color-action-disabled-text);
+  /* Elevation */
+  --db-popover-shadow: var(--db-popup-elevation);
+}
 
-  /* ── Focus & icon ─────────────────────────────────────────────────────── */
-  --db-btn-focus-ring: var(--db-color-action-default-border-focus);
-  --db-btn-danger-focus-ring: var(--db-color-action-danger-primary-background-default);
-  --db-btn-icon-glyph: var(--db-color-text-secondary);
+
+/* Declared under the theme classes too (not just :root) so the var() chain re-resolves inside a
+ * `.du-bois-dark` subtree instead of freezing at the light values. */
+:where(:root), :where(.du-bois-light) {
+  /* Shape */
+  --db-progress-border-radius: var(--db-shape-pill);
+
+  /* Color */
+  --db-progress-track: var(--db-color-progress-track);
+  --db-progress-fill: var(--db-color-progress-fill);
+
+  /* Density */
+  --db-progress-size: var(--db-size-2);
+
+  /* Motion */
+  /* No v2 motion token holds this duration. TODO(FEINF-6505): adopt a v2 motion token when one is added. */
+  --db-progress-transition-duration: 300ms;
 }
 
-/* Native <Button> visual styles. Consumes the component-tier `--db-btn-*` tokens (see tokens.css);
- * the variant classes below re-set those tokens per variant and the rules that follow paint them.
- * Shipped via mortar.css. */
+:where(:root), :where(.du-bois-light) {
+  /* Shape */
+  --db-radio-border-radius: var(--db-radius-full);
+  --db-radio-border-width: 1px;
 
-/* ── 0. Variant token re-sets ──────────────────────────────────────────────
- * Each variant class re-sets the semantic tokens declared in tokens.css; combined classes win by
- * specificity, which beats the `:where(:root)` (specificity 0) defaults regardless of file order. */
-.db-btn-primary {
-  --db-btn-surface: var(--db-color-action-primary-background-default);
-  --db-btn-surface-hover: var(--db-color-action-primary-background-hover);
-  --db-btn-surface-press: var(--db-color-action-primary-background-press);
-  --db-btn-surface-disabled: var(--db-color-action-disabled-border);
-  --db-btn-border: transparent;
-  --db-btn-border-hover: transparent;
-  --db-btn-border-press: transparent;
-  --db-btn-border-disabled: transparent;
-  --db-btn-text: var(--db-color-action-primary-text-default);
-  --db-btn-text-hover: var(--db-color-action-primary-text-hover);
-  --db-btn-text-press: var(--db-color-action-primary-text-press);
-  --db-btn-text-disabled: var(--db-color-action-primary-text-default);
+  /* Color */
+  --db-radio-surface: var(--db-selection-toggle-surface);
+  --db-radio-surface-hover: var(--db-color-action-default-background-hover);
+  --db-radio-surface-active: 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-active: var(--db-color-action-default-background-press);
+  --db-radio-surface-disabled: var(--db-selection-toggle-surface-disabled);
+
+  --db-radio-border: var(--db-color-action-default-border-default);
+  --db-radio-border-hover: var(--db-selection-toggle-border-hover);
+  --db-radio-border-active: var(--db-selection-toggle-border-active);
+  --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-active);
+  --db-radio-border-checked-active: 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);
+
+  --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);
+
+  /* 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-1);
+
+  /* Motion */
+  --db-radio-transition-duration: var(--db-selection-toggle-transition-duration);
 }
-.db-btn-tertiary,
-.db-btn-link {
-  --db-btn-surface: var(--db-color-action-tertiary-background-default);
-  --db-btn-surface-disabled: var(--db-color-action-tertiary-background-default);
-  --db-btn-border: var(--db-color-action-tertiary-background-default);
-  --db-btn-border-hover: transparent;
-  --db-btn-border-press: transparent;
-  --db-btn-border-disabled: transparent;
-  --db-btn-text: var(--db-color-action-tertiary-text-default);
-  --db-btn-text-hover: var(--db-color-action-tertiary-text-hover);
-  --db-btn-text-press: var(--db-color-action-tertiary-text-press);
-  --db-btn-text-disabled: var(--db-color-action-disabled-text);
+
+/* Native-input <Radio> styles. Classic CSS only — no native nesting (the
+ * `&`-style nesting feature ships in Chrome/Edge 120, Safari 17.2, Firefox 117
+ * which leaves a non-trivial slice of our production traffic uncovered today;
+ * see PR #1954620 thread). `:has()` lookups are still used to read state from
+ * the native <input>; that feature has the support coverage we need.
+ *
+ * Structure (assumed by the React component):
+ *
+ *   <label class="db-radio">
+ *     <input type="radio" />
+ *     <span  class="db-radio-indicator">     ← circle border + fill react to state
+ *       <span class="db-radio-dot" />        ← visible when :checked
+ *     </span>
+ *     <span class="db-radio-label">{children}</span>
+ *   </label>
+ *
+ * The root only ever has one <input> descendant, so a bare `input` selector is
+ * safe and clearer than a class. Mirrors NativeCheckbox.css; the differences are
+ * the circular indicator (border-radius: full) and the filled dot instead of a
+ * 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 `.db-selection-toggle` class. */
+
+.db-radio {
+  /* `display: flex` (block-level), NOT `inline-flex`: see NativeCheckbox.css for
+   * the line-box / sibling-spacing rationale. */
+  display: flex;
+  align-items: flex-start;
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+  min-height: var(--db-line-height-base, 20px);
+  width: fit-content;
 }
-.db-btn-tertiary {
-  --db-btn-surface-hover: var(--db-color-action-tertiary-background-hover);
-  --db-btn-surface-press: var(--db-color-action-tertiary-background-press);
+
+/* 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);
 }
-/* Link is borderless and text-only, so its hover/press surface stays transparent. */
-.db-btn-link {
-  --db-btn-surface-hover: transparent;
-  --db-btn-surface-press: transparent;
+
+.db-radio:active:has(input:not(:disabled, :checked)) .db-radio-indicator {
+  background-color: var(--db-radio-surface-active);
+  border-color: var(--db-radio-border-active);
 }
-/* Every danger button (icon included) disables to the filled treatment. */
-.db-btn-danger {
-  --db-btn-surface-disabled: var(--db-color-action-disabled-border);
-  --db-btn-border-disabled: transparent;
-  --db-btn-text-disabled: var(--db-color-action-primary-text-default);
+
+/* Selected fill. */
+.db-radio:has(input:checked) .db-radio-indicator {
+  background-color: var(--db-radio-surface-checked);
+  border-color: var(--db-radio-surface-checked);
 }
-/* Danger, filled (primary): re-set only the surface; text/transparent border come from primary. */
-.db-btn-primary.db-btn-danger:not(.db-btn-icon-only) {
-  --db-btn-surface: var(--db-color-action-danger-primary-background-default);
-  --db-btn-surface-hover: var(--db-color-action-danger-primary-background-hover);
-  --db-btn-surface-press: var(--db-color-action-danger-primary-background-press);
+
+/* AntD getRadioInputStyles checked hover: background = actionPrimaryBackgroundHover,
+ * borderColor = actionPrimaryBackgroundPress (a darker ring than the fill). */
+.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);
 }
-/* Danger, secondary/outlined. */
-.db-btn-danger:not(.db-btn-primary):not(.db-btn-tertiary):not(.db-btn-link):not(.db-btn-icon-only) {
-  --db-btn-surface: var(--db-color-action-danger-default-background-default);
-  --db-btn-surface-hover: var(--db-color-action-danger-default-background-hover);
-  --db-btn-surface-press: var(--db-color-action-danger-default-background-press);
-  --db-btn-border: var(--db-color-action-danger-default-border-default);
-  --db-btn-border-hover: var(--db-color-action-danger-default-border-hover);
-  --db-btn-border-press: var(--db-color-action-danger-default-border-press);
-  --db-btn-text: var(--db-color-action-danger-default-text-default);
-  --db-btn-text-hover: var(--db-color-action-danger-default-text-hover);
-  --db-btn-text-press: var(--db-color-action-danger-default-text-press);
+
+/* AntD getRadioInputStyles checked active: background = actionDefaultBackgroundPress,
+ * borderColor = actionDefaultBorderPress (two-tone, not flat). */
+.db-radio:active:has(input:checked:not(:disabled)) .db-radio-indicator {
+  background-color: var(--db-radio-surface-checked-active);
+  border-color: var(--db-radio-border-checked-active);
 }
-/* Danger, tertiary/link: danger text everywhere, danger surface on hover/press; resting/disabled
- * surface stay the tertiary ghost (override the filled danger-disabled set above). */
-.db-btn-tertiary.db-btn-danger,
-.db-btn-link.db-btn-danger {
-  --db-btn-surface-hover: var(--db-color-action-danger-default-background-hover);
-  --db-btn-surface-press: var(--db-color-action-danger-default-background-press);
-  --db-btn-surface-disabled: var(--db-color-action-tertiary-background-default);
-  --db-btn-text: var(--db-color-action-danger-default-text-default);
-  --db-btn-text-hover: var(--db-color-action-danger-default-text-hover);
-  --db-btn-text-press: var(--db-color-action-danger-default-text-press);
-  --db-btn-text-disabled: var(--db-color-action-disabled-text);
+
+/* Dot visibility. */
+.db-radio:has(input:checked) .db-radio-dot {
+  opacity: 1;
 }
-/* Icon-only renders as the ghost (tertiary) treatment regardless of variant; re-set the semantic set
- * so the icon-only rules paint from these component tokens. */
-.db-btn-icon-only {
-  --db-btn-surface: var(--db-color-action-tertiary-background-default);
-  --db-btn-surface-hover: var(--db-color-action-tertiary-background-hover);
-  --db-btn-surface-press: var(--db-color-action-tertiary-background-press);
-  --db-btn-text: var(--db-color-action-tertiary-text-default);
-  --db-btn-text-hover: var(--db-color-action-tertiary-text-hover);
-  --db-btn-text-press: var(--db-color-action-tertiary-text-press);
+
+/* Focus-visible (keyboard only). AntD getRadioInputStyles splits focus by checked
+ * state, so we do too.
+ *
+ * UNCHECKED focus (AntD `&:not(disabled) > input:focus + inner`): only the border
+ * color changes to actionPrimaryBackgroundDefault — NO outline ring. */
+.db-radio:has(input:focus-visible:not(:checked)) .db-radio-indicator {
+  border-color: var(--db-radio-border-unchecked-focus);
 }
-/* Danger icon-only keeps the ghost resting surface (inherited above) but uses danger text and a
- * danger hover/press surface. */
-.db-btn-icon-only.db-btn-danger {
-  --db-btn-surface-hover: var(--db-color-action-danger-default-background-hover);
-  --db-btn-surface-press: var(--db-color-action-danger-default-background-press);
-  --db-btn-text: var(--db-color-action-danger-default-text-default);
-  --db-btn-text-hover: var(--db-color-action-danger-default-text-hover);
-  --db-btn-text-press: var(--db-color-action-danger-default-text-press);
+
+/* CHECKED focus-visible (AntD `&.checked &:not(disabled) > input:focus-visible + inner`):
+ * background = actionPrimaryBackgroundDefault, borderColor = actionDefaultBorderFocus,
+ * outline = 1px solid actionPrimaryBackgroundDefault, outlineOffset = 1. */
+.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-outline-checked-focus);
+  outline-offset: 1px;
 }
 
-/* ── 1. Base — paints the default (secondary) variant ────────────────────── */
-.db-btn {
-  appearance: none;
+/* Disabled (covers checked and unchecked). Sourced from `input:disabled` so the
+ * standalone-disabled and group-disabled paths both land here. */
+.db-radio:has(input:disabled) {
+  cursor: not-allowed;
+}
+
+.db-radio:has(input:disabled) .db-radio-label {
+  color: var(--db-radio-text-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;
+}
+
+.db-radio:has(input:disabled) .db-radio-dot {
+  background-color: var(--db-radio-mark-disabled);
+}
+
+/* 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;
+  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. */
+.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);
+  border-radius: var(--db-radio-border-radius);
+  background-color: var(--db-radio-surface);
   box-sizing: border-box;
-  position: relative; /* anchors the loading spinner */
-  display: inline-flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  vertical-align: middle;
-  white-space: nowrap;
-  user-select: none;
-  cursor: pointer;
-  height: var(--db-btn-height) !important;
-  font-family: inherit;
-  font-size: var(--db-btn-font-size);
-  font-weight: var(--db-btn-font-weight);
-  line-height: var(--db-btn-line-height) !important;
-  text-decoration: none !important;
-  border: var(--db-btn-border-width) solid var(--db-btn-border);
-  border-color: var(--db-btn-border) !important;
-  border-radius: var(--db-btn-border-radius) !important;
-  box-shadow: none !important;
-  background-color: var(--db-btn-surface) !important;
-  color: var(--db-btn-text) !important;
+  transition:
+    background-color var(--db-radio-transition-duration) ease,
+    border-color var(--db-radio-transition-duration) ease,
+    box-shadow var(--db-radio-transition-duration) ease;
 }
 
-/* ── 2. Padding ──────────────────────────────────────────────────────────── */
-.db-btn.db-btn:where(:not(.db-btn-icon-only, .db-btn-force-icon, .db-btn-link)) {
-  padding: var(--db-btn-padding-vertical) var(--db-btn-padding-horizontal) !important;
+.db-radio .db-radio-indicator > .db-radio-dot {
+  grid-area: 1 / 1;
+  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-mark);
+  opacity: 0;
+  transition: opacity var(--db-radio-transition-duration) ease;
 }
-.db-btn.db-btn-small:where(:not(.db-btn-icon-only, .db-btn-force-icon, .db-btn-link)) {
-  padding: 0 var(--db-btn-padding-horizontal-small) !important;
+
+/* 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) {
+  .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. */
+.db-radio .db-radio-label {
+  color: var(--db-radio-text);
+  padding-inline: var(--db-radio-label-spacing);
+  word-break: break-word;
+}
+
+/* Form-flow integration: align helper text under the radio label. The `paddingLeft`
+ * 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. */
+.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-space-6);
+  margin-top: 0;
+}
+
+/* Vertical hint rhythm (AntD getVerticalRadioGroupStyles, vertical-only): a hint
+ * 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 .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. */
+.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-space-2));
+  margin-bottom: var(--db-space-2);
+}
+
+/* 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. */
+.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-label + .db-radio-group.db-radio-group,
+.du-bois-dark-label + .db-radio-group.db-radio-group,
+.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-space-2);
 }
-.db-btn.db-btn-link {
-  padding: 0 !important;
+
+/* RadioGroup layout. Vertical (the default) delegates flex-direction to the
+ * .db-stack primitive; horizontal is a two-row grid (mirroring AntD). */
+.db-radio-group {
+  display: flex;
 }
-.db-btn.db-btn-force-icon {
-  padding: 0 var(--db-btn-padding-horizontal-icon) !important;
+
+/* 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. */
+.db-radio-group.db-stack {
+  --db-stack-gap: 0;
 }
 
-/* ── 3. Interactive states ───────────────────────────────────────────────── */
-.db-btn:hover:not(:disabled, .db-btn-loading) {
-  background-color: var(--db-btn-surface-hover) !important;
-  border-color: var(--db-btn-border-hover) !important;
-  color: var(--db-btn-text-hover) !important;
+/* AntD `& > label { paddingBottom: sm }`. */
+.db-radio-group.db-stack > .db-radio {
+  padding-bottom: var(--db-space-2);
 }
-.db-btn:active:not(:disabled, .db-btn-loading) {
-  background-color: var(--db-btn-surface-press) !important;
-  border-color: var(--db-btn-border-press) !important;
-  color: var(--db-btn-text-press) !important;
+
+/* AntD `& > label:last-of-type { paddingBottom: 0 }`. */
+.db-radio-group.db-stack > .db-radio:last-of-type {
+  padding-bottom: 0;
 }
 
-/* ── 4. Focus ────────────────────────────────────────────────────────────── */
-.db-btn:focus-visible {
-  outline: 2px solid var(--db-btn-focus-ring);
-  outline-offset: -2px;
+/* AntD getVerticalRadioGroupStyles `.${prefix}-radio-tile + .${prefix}-radio-tile {
+ * 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 .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-space-4);
 }
-.db-btn-primary:focus-visible {
-  outline-offset: 1px;
+
+/* Horizontal: AntD `getHorizontalRadioGroupStyles` is a TWO-ROW grid (NOT a flex
+ * row) so each radio sits in the [label] row and its following hint drops into the
+ * [hint] row of the same auto-column. `&&` in AntD doubles specificity; the doubled
+ * group class here matches that.
+ * AntD: `display: grid; gridTemplateRows: [label] auto [hint] auto;
+ * gridAutoColumns: max-content; gridColumnGap: md`. */
+.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-4);
 }
-.db-btn-use-focus-pseudo-class:focus {
-  outline: 2px solid var(--db-btn-focus-ring);
-  outline-offset: 1px;
+
+/* Equal column widths: AntD `gridAutoColumns: minmax(0, 1fr)`. */
+.db-radio-group--horizontal.db-radio-group--equal-width {
+  grid-auto-columns: minmax(0, 1fr);
 }
 
-/* ── 5. Small / full-width / empty ────────────────────────────────────────── */
-.db-btn-small {
-  height: var(--db-btn-height-small) !important;
+/* 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 `> .db-radio`) lives in the
+ * label row. grid-auto-flow defaults to row, so successive items advance the implicit
+ * column. */
+.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;
 }
-.db-btn-full-width {
-  width: 100%;
+
+/* 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 .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;
 }
-.db-btn-empty {
-  background-color: transparent !important;
-  border-color: transparent !important;
+
+/* 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). */
+.db-radio-group--horizontal:has(> .du-bois-light-hint),
+.db-radio-group--horizontal:has(> .du-bois-dark-hint) {
+  margin-top: var(--db-space-2);
 }
-.db-btn-default.db-btn-empty {
-  color: var(--db-btn-icon-glyph) !important;
+
+/* AntD `&& + form-message { marginTop: sm }` (horizontal): a form-message following
+ * the whole group is separated by sm. */
+.db-radio-group--horizontal + .du-bois-light-form-message,
+.db-radio-group--horizontal + .du-bois-dark-form-message {
+  margin-top: var(--db-space-2);
 }
-.db-btn-empty.db-btn-loading {
-  width: var(--db-btn-loading-empty-width);
+
+
+
+
+
+:where(:root), :where(.du-bois-light) {
+  /* Shape */
+  --db-slider-border-radius: var(--db-shape-pill);
+
+  /* Color */
+  /* No v2 token holds the track + disabled-range surface yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-slider-track-surface: #e8ecf0;
+  --db-slider-range-surface-disabled: #e8ecf0;
+  /* No v2 token holds the range fill yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-slider-range-surface: #2272b4;
+
+  --db-slider-thumb-surface: var(--db-accent-surface);
+  --db-slider-thumb-surface-hover: var(--db-accent-surface-hover);
+  --db-slider-thumb-surface-press: var(--db-accent-surface-active);
+  /* No v2 token holds the disabled thumb yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-slider-thumb-surface-disabled: #d1d9e1;
+
+  /* Density */
+  --db-slider-size: var(--db-size-5); /* 20px */
+  --db-slider-thumb-size: var(--db-size-5); /* 20px */
+  --db-slider-track-thickness: calc(var(--db-size-1) * 0.75); /* 3px */
 }
 
-/* ── 6. Tertiary & link ──────────────────────────────────────────────────── */
-.db-btn-link {
-  height: auto !important;
-  border: none !important;
+:where(:root), :where(.du-bois-light) {
+  /* Shape */
+  /* TODO(FEINF-6505): adopt --db-shape-container-* once a 4px container radius exists; kept on --db-radius-sm to preserve 4px. */
+  --db-snackbar-border-radius: var(--db-radius-sm);
+
+  /* Density */
+  --db-snackbar-spacing-vertical: var(--db-space-3);
+  --db-snackbar-spacing-horizontal: var(--db-space-4);
+  --db-snackbar-close-button-spacing: var(--db-space-2);
+
+  /* Color */
+  /* No v1/v2 system token holds this theme-invariant white. TODO(FEINF-6505): adopt a v2 system token when one is added. */
+  --db-snackbar-text: #ffffff;
+  /* No v1/v2 system token holds these theme-invariant close-icon colors. TODO(FEINF-6505): adopt a v2 system token when one is added. */
+  --db-snackbar-close-icon: #e8ecf0;
+  --db-snackbar-close-icon-hover: #8acaff;
+  --db-snackbar-close-icon-active: #bae1fc;
 }
-/* Re-declare the text color for a non-icon-only tertiary/link at two-class weight so a plain
- * call-site `color` override loses; an icon-only glyph stays at base weight so its override wins. */
-.db-btn-tertiary:not(.db-btn-icon-only),
-.db-btn-link:not(.db-btn-icon-only) {
-  color: var(--db-btn-text) !important;
+
+:where(:root), :where(.du-bois-light) {
+  /* Color */
+  /* No v1/v2 system token holds this light/dark surface pair. TODO(FEINF-6505): adopt a v2 system token when one is added. */
+  --db-snackbar-surface: #11171c;
+
+  /* Elevation */
+  --db-snackbar-shadow: var(--db-elevation-med);
 }
-/* Keep the resting border at two-class weight (parity with the shielded border-color). */
-.db-btn.db-btn-tertiary,
-.db-btn.db-btn-link {
-  border-color: var(--db-btn-border) !important;
+
+/* Spacer's height is a spacing step. The size prop (xs/sm/mid/md/lg) selects one component token,
+ * each aliasing the system space scale — theme-invariant, so a single block (no light/dark split). */
+
+:where(:root), :where(.du-bois-light) {
+  /* Density */
+  --db-spacer-size-xs: var(--db-space-1); /* 4px */
+  --db-spacer-size-sm: var(--db-space-2); /* 8px */
+  --db-spacer-size-mid: var(--db-space-3); /* 12px */
+  --db-spacer-size-md: var(--db-space-4); /* 16px */
+  --db-spacer-size-lg: var(--db-space-6); /* 24px */
 }
 
-/* ── 7. Danger ───────────────────────────────────────────────────────────── */
-.db-btn-danger:focus-visible {
-  outline-color: var(--db-btn-danger-focus-ring);
+
+
+:where(:root), :where(.du-bois-light) {
+  /* Shape */
+  --db-switch-border-radius: var(--db-radius-full);
+  --db-switch-border-width: 1px;
+
+  /* Color */
+  --db-switch-surface: var(--db-selection-toggle-surface);
+  --db-switch-surface-hover: var(--db-color-action-default-background-hover);
+  --db-switch-surface-active: 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-active: var(--db-selection-toggle-surface-checked-active);
+  --db-switch-surface-disabled: var(--db-selection-toggle-surface-disabled);
+  --db-switch-surface-checked-disabled: var(--db-color-action-disabled-text);
+
+  --db-switch-border: var(--db-color-action-default-border-default);
+  --db-switch-border-hover: var(--db-selection-toggle-border-hover);
+  --db-switch-border-active: var(--db-selection-toggle-border-active);
+  --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-active: var(--db-selection-toggle-surface-checked-active);
+  --db-switch-border-focus: var(--db-selection-toggle-surface-checked);
+
+  --db-switch-thumb: var(--db-selection-toggle-surface);
+
+  --db-switch-text: var(--db-selection-toggle-text);
+  --db-switch-text-disabled: var(--db-selection-toggle-text-disabled);
+
+  /* Density */
+  --db-switch-track-width: calc(var(--db-size-4) * 1.75); /* 28px */
+  --db-switch-track-height: var(--db-size-4); /* 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);
 }
 
-/* ── 8. Icon-only ────────────────────────────────────────────────────────── */
-.db-btn-icon-only {
-  padding: 0;
-  border: none !important;
-  background-color: var(--db-btn-surface) !important;
-  font-size: var(--db-btn-icon-only-font-size);
+.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;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  width: fit-content;
+  margin-inline-end: var(--db-switch-label-spacing);
 }
-/* `:where()` keeps this at (0,1,0) so a call-site `css` width override wins, as it does for `height`. */
-.db-btn-icon-only:where(:not(.db-btn-small)) {
-  width: var(--db-btn-height) !important;
+
+.db-switch:has(input:disabled) {
+  cursor: not-allowed;
 }
-.db-btn-icon-only:not(.db-btn-link, .db-btn-tertiary, [href], :hover, :active, :disabled) {
-  color: var(--db-btn-icon-glyph) !important;
+
+/* The track. `appearance: none` strips the native checkbox rendering so the input itself can be styled. */
+.db-switch input {
+  appearance: none;
+  position: relative;
+  flex-shrink: 0;
+  margin: 0;
+  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);
+  border-radius: var(--db-switch-border-radius);
+  background-color: var(--db-switch-surface);
+  box-sizing: border-box;
+  transition:
+    background-color var(--db-switch-transition-duration) ease,
+    border-color var(--db-switch-transition-duration) ease;
 }
-/* `:where()` on the exclusion holds this at (0,2,0): enough to tint an un-overridden icon-only link
- * over the base color, while still letting a consumer's own icon-color override win on source order. */
-.db-btn-icon-only[href]:where(:not(.db-btn-tertiary, .db-btn-link, .db-btn-danger, :disabled)) {
-  color: var(--db-btn-text) !important;
+
+/* 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. */
+.db-switch input::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: calc(-1 * var(--db-switch-border-width));
+  inline-size: var(--db-switch-thumb-size);
+  block-size: var(--db-switch-thumb-size);
+  border: var(--db-switch-border-width) solid;
+  border-color: inherit;
+  border-radius: var(--db-switch-border-radius);
+  background-color: var(--db-switch-thumb);
+  box-sizing: border-box;
+  transform: translateY(-50%);
+  transition: transform var(--db-switch-transition-duration) ease;
 }
-.db-btn-icon-only:where(.db-btn-small) {
-  width: var(--db-btn-height-small);
+
+/* `<label for>` propagates `:hover` to the input, so scope hover/press to the control, not `input:hover`. */
+.db-switch:hover input:not(:disabled):not(:checked) {
+  background-color: var(--db-switch-surface-hover);
+  border-color: var(--db-switch-border-hover);
 }
-.db-btn-icon-only.db-btn-small {
-  line-height: var(--db-btn-line-height-small) !important;
+
+.db-switch:active input:not(:disabled):not(:checked) {
+  background-color: var(--db-switch-surface-active);
+  border-color: var(--db-switch-border-active);
 }
-.db-btn-icon-only:hover:not(:disabled, .db-btn-loading) {
-  background-color: var(--db-btn-surface-hover) !important;
-  color: var(--db-btn-text-hover) !important;
+
+.db-switch input:checked {
+  background-color: var(--db-switch-surface-checked);
+  border-color: var(--db-switch-border-checked);
 }
-.db-btn-icon-only:active:not(:disabled, .db-btn-loading) {
-  background-color: var(--db-btn-surface-press) !important;
-  color: var(--db-btn-text-press) !important;
+
+.db-switch:hover input:checked:not(:disabled) {
+  background-color: var(--db-switch-surface-checked-hover);
+  border-color: var(--db-switch-border-checked-hover);
 }
-.db-btn-icon-only:enabled:not(.db-btn-primary, .db-btn-tertiary, .db-btn-link, .db-btn-danger, :hover, :active)
-  > .anticon {
-  color: var(--db-btn-icon-glyph);
+
+.db-switch:active input:checked:not(:disabled) {
+  background-color: var(--db-switch-surface-checked-active);
+  border-color: var(--db-switch-border-checked-active);
 }
-.db-btn-icon-only.db-btn-danger:not(:hover, :active) > .anticon {
-  color: var(--db-btn-text);
+
+.db-switch input:checked::before {
+  transform: translateY(-50%) translateX(calc(var(--db-switch-track-width) - var(--db-switch-thumb-size)));
 }
-.db-btn-icon-only.db-btn-danger:hover:not(:disabled, .db-btn-loading) {
-  background-color: var(--db-btn-surface-hover) !important;
-  color: var(--db-btn-text-hover) !important;
+
+/* 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.
+ * 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: 1px solid var(--db-focus-ring-color);
+  outline-offset: 0;
 }
-.db-btn-icon-only.db-btn-danger:active:not(:disabled, .db-btn-loading) {
-  background-color: var(--db-btn-surface-press) !important;
-  color: var(--db-btn-text-press) !important;
+
+.db-switch input:checked:focus-visible {
+  outline-offset: 1px;
 }
 
-/* ── 9. Disabled — base rules paint the per-variant `*-disabled` tokens (see tokens.css) ──────── */
-.db-btn:disabled {
+.db-switch input:disabled {
   cursor: not-allowed;
-  background-color: var(--db-btn-surface-disabled) !important;
-  color: var(--db-btn-text-disabled) !important;
-}
-/* Empty and loading disabled buttons keep a transparent border (set elsewhere), so exclude them.
- * `:where()` on the exclusion holds this at (0,2,0): enough to beat the base border, while still
- * letting a consumer's own `[disabled]` border override win on source order. */
-.db-btn:disabled:where(:not(.db-btn-empty, .db-btn-loading)) {
-  border-color: var(--db-btn-border-disabled) !important;
-}
-.db-btn-icon-only:disabled {
-  border: none;
-}
-.db-btn-icon-only:disabled:hover {
-  background-color: transparent !important;
-}
-.db-btn:disabled > .anticon {
-  color: inherit !important;
+  background-color: var(--db-switch-surface-disabled);
+  border-color: var(--db-switch-border-disabled);
 }
 
-/* ── 10. Icon & content layout ───────────────────────────────────────────── */
-/* The leading icon renders unwrapped as the button's direct `.anticon` child (see NativeButton.tsx),
- * so `> .anticon` targets only a real icon glyph — a non-glyph `icon` (e.g. a Spinner) keeps its own
- * sizing — and out-specifies AntD's runtime-injected global `.anticon` rule. */
-.db-btn > .anticon,
-.db-btn-end-icon,
-.db-btn-end-icon > .anticon {
-  display: inline-flex;
-  align-items: center;
-  font-size: var(--db-btn-icon-size) !important;
-  line-height: 0;
-}
-.db-btn-small > .anticon .anticon {
-  line-height: 0;
+/* Disabled + on: more specific than the plain disabled rule, so it wins regardless of source order. */
+.db-switch input:checked:disabled {
+  background-color: var(--db-switch-surface-checked-disabled);
+  border-color: var(--db-switch-surface-checked-disabled);
 }
-.db-btn > .db-btn-content > .anticon {
-  display: inline-flex;
-  align-items: center;
-  line-height: 0;
+
+@media (prefers-reduced-motion: reduce) {
+  .db-switch input,
+  .db-switch input::before {
+    transition: none;
+  }
 }
-.db-btn-content {
-  display: inline-flex;
+
+.db-switch-wrapper {
+  display: flex;
   align-items: center;
 }
-.db-btn > .anticon + .db-btn-content {
-  margin-inline-start: var(--db-btn-gap) !important;
-}
-.db-btn-end-icon {
-  margin-inline-start: var(--db-btn-end-icon-gap) !important;
-}
-.db-btn-small .db-btn-end-icon {
-  margin-inline-start: var(--db-btn-end-icon-gap-small) !important;
-}
-.db-btn-default:not(.db-btn-danger, [href], :hover, :active, :disabled) > .anticon {
-  color: var(--db-btn-icon-glyph);
-}
-.db-btn-default[href]:not(.db-btn-danger, :hover, :active, :disabled) .db-btn-end-icon {
-  color: var(--db-btn-icon-glyph);
-}
-.db-btn-default:not([href], .db-btn-danger, :hover, :active, :disabled)
-  > .db-btn-content
-  > .db-btn-end-icon
-  > .anticon {
-  color: var(--db-btn-icon-glyph);
-}
 
-/* ── 11. Loading ─────────────────────────────────────────────────────────── */
-.db-btn-loading {
-  cursor: default;
-}
-.db-btn-loading:disabled {
-  border-color: transparent !important;
-}
-.db-btn-spinner {
-  color: inherit !important;
-  pointer-events: none;
+.db-switch-wrapper .db-switch-state-message {
+  margin-inline-start: auto;
+  margin-inline-end: var(--db-switch-label-spacing);
 }
-.db-btn-loading-with-icon .db-btn-content {
-  padding-inline-start: calc(var(--db-btn-icon-size) + var(--db-btn-gap));
+
+/* `:first-child` scopes this to the label-first layout; the plain layout renders the label last. */
+.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);
 }
-.db-btn-loading .db-btn-spinner {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
+
+.db-switch-state-message {
+  color: var(--db-switch-text);
 }
-.db-btn-loading.db-btn-icon-only .db-btn-spinner {
-  position: static;
-  transform: none;
+
+/* 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);
 }
 
-/* ── 12. dangerouslySetForceIconStyles ───────────────────────────────────── */
-.db-btn-force-icon {
-  width: var(--db-btn-height) !important;
-  color: var(--db-btn-icon-glyph) !important;
+/* Indent a following hint/message past the track. The class is doubled to out-specify FormMessage's
+ * own margin rule. Each rule's key (rightmost) selector is a single class, not a multi-item :is(),
+ * so Chromium can hash-reject it instead of attempting the match against every element on every
+ * recalc (the leading/middle :is() groups aren't the key selector, so they're left as-is). */
+:is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper) + .du-bois-light-hint, :is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper) + .du-bois-dark-hint, :is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper) + .du-bois-light-form-message, :is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper) + .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)
+  + .du-bois-light-form-message, :is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper)
+  + :is(.du-bois-light-hint, .du-bois-dark-hint)
+  + .du-bois-dark-form-message {
+  padding-inline-start: calc(var(--db-space-2) + var(--db-switch-track-width));
 }
-.db-btn-force-icon.db-btn-small {
-  width: var(--db-btn-height-small) !important;
+
+:is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper) + .du-bois-light-form-message, :is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper) + .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)
+  + .du-bois-light-form-message, :is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper)
+  + :is(.du-bois-light-hint, .du-bois-dark-hint)
+  + .du-bois-dark-form-message {
+  margin-top: 0;
 }
 
+/* Component tokens for Tabs (no family). Re-declared under the theme classes, not only :root, so the
+ * var() chain re-resolves inside a .du-bois-dark subtree instead of freezing at the light value. */
 :where(:root), :where(.du-bois-light) {
-  /* Shape */
-  /* Must not scale with density; no non-scaling system token holds it. TODO(FEINF-6505): adopt a v2 system token when one is added. */
-  --db-navigation-menu-indicator-thickness: 4px;
-  /* No system token holds this control-specific inset. TODO(FEINF-6505): adopt a v2 system token when one is added. */
-  --db-navigation-menu-focus-ring-offset: -1px;
+  /* ── Density ──────────────────────────────────────────────────────────── */
+  --db-tabs-height: var(--db-size-8);
+  --db-tabs-trigger-min-width: var(--db-size-6);
+  --db-tabs-trigger-min-width-closable: var(--db-size-10);
+  --db-tabs-list-margin-bottom: var(--db-space-4);
+  --db-tabs-trigger-gap: var(--db-space-4);
+  --db-tabs-trigger-padding-top: var(--db-space-1);
+  --db-tabs-trigger-padding-bottom: var(--db-space-2);
+  --db-tabs-close-icon-gap: var(--db-space-1);
+  --db-tabs-add-button-margin-top: var(--db-space-0-5);
+  /* No 1.5-unit space step exists; synthesize 6px from the nearest. TODO: use a direct step if one lands. */
+  --db-tabs-add-button-margin-bottom: calc(var(--db-space-1) * 1.5);
 
-  /* Color */
-  --db-navigation-menu-indicator: var(--db-accent-surface);
-  --db-navigation-menu-focus-ring: var(--db-focus-ring-color);
-  --db-navigation-menu-text: var(--db-text-subtle);
-  --db-navigation-menu-text-active: var(--db-text-base);
-  /* No v2 semantic for default-action link text yet; bridges on the v1 --db-color-* token. */
-  --db-navigation-menu-text-hover: var(--db-color-action-default-text-hover);
-  --db-navigation-menu-text-press: var(--db-color-action-default-text-press);
+  /* ── Shape ────────────────────────────────────────────────────────────── */
+  --db-tabs-scrollbar-radius: var(--db-shape-control);
+  --db-tabs-focus-ring-width: var(--db-focus-ring-width);
 
-  /* Density */
-  --db-navigation-menu-item-height: var(--db-size-8);
-  --db-navigation-menu-item-min-width: var(--db-size-6);
-  --db-navigation-menu-link-padding-top: var(--db-space-1);
-  --db-navigation-menu-link-padding-bottom: var(--db-space-2);
-  --db-navigation-menu-focus-ring-width: var(--db-focus-ring-width);
+  /* ── Typography ───────────────────────────────────────────────────────── */
+  --db-tabs-font-size: var(--db-font-size-base);
+  --db-tabs-font-weight: var(--db-font-weight-semibold);
+  /* No v2 token holds the tab line-height yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-tabs-line-height: 1.25rem;
+
+  /* ── Color ────────────────────────────────────────────────────────────── */
+  /* No v2 token holds the tab text / hover / press / active / disabled colors yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-tabs-text: var(--db-color-text-secondary);
+  --db-tabs-text-hover: var(--db-color-action-default-text-hover);
+  --db-tabs-text-press: var(--db-color-action-default-text-press);
+  --db-tabs-text-active: var(--db-color-text-primary);
+  --db-tabs-text-disabled: var(--db-color-action-disabled-text);
+  /* No v2 token holds the tab panel content text color yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-tabs-content-text: var(--db-color-text-primary);
+  /* No v2 token holds the active-tab underline yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-tabs-indicator: var(--db-color-action-primary-background-default);
+  /* No v2 token holds the list divider yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-tabs-border: var(--db-color-action-default-border-default);
+  /* No v2 token holds the focus ring color yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-tabs-focus-ring: var(--db-color-action-default-border-focus);
 }
 
+/* No v2 token holds the scrollbar thumb yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
 :where(:root), :where(.du-bois-light) {
-  /* Shape */
-  /* TODO(FEINF-6505): adopt --db-shape-container-* once a 4px container radius exists; kept on --db-radius-sm to preserve 4px. */
-  --db-snackbar-border-radius: var(--db-radius-sm);
+  --db-tabs-scrollbar-thumb: rgba(17, 23, 28, 0.2);
+  --db-tabs-scrollbar-thumb-hover: rgba(17, 23, 28, 0.3);
+}
 
-  /* Density */
-  --db-snackbar-spacing-vertical: var(--db-space-3);
-  --db-snackbar-spacing-horizontal: var(--db-space-4);
-  --db-snackbar-close-button-spacing: var(--db-space-2);
 
-  /* Color */
-  /* No v1/v2 system token holds this theme-invariant white. TODO(FEINF-6505): adopt a v2 system token when one is added. */
-  --db-snackbar-text: #ffffff;
-  /* No v1/v2 system token holds these theme-invariant close-icon colors. TODO(FEINF-6505): adopt a v2 system token when one is added. */
-  --db-snackbar-close-icon: #e8ecf0;
-  --db-snackbar-close-icon-hover: #8acaff;
-  --db-snackbar-close-icon-press: #bae1fc;
-}
 
 :where(:root), :where(.du-bois-light) {
+  /* Shape */
+  --db-toolbar-border-radius: var(--db-shape-control);
+
   /* Color */
-  /* No v1/v2 system token holds this light/dark surface pair. TODO(FEINF-6505): adopt a v2 system token when one is added. */
-  --db-snackbar-surface: #11171c;
+  --db-toolbar-surface: var(--db-surface-subtle);
+  --db-toolbar-border: var(--db-border-base);
+  --db-toolbar-separator-surface: var(--db-border-base);
+  --db-toolbar-toggle-item-text: var(--db-text-base);
+  /* No v2 token holds the toggle hover / press text yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-toolbar-toggle-item-text-hover: var(--db-color-action-default-text-hover);
+  --db-toolbar-toggle-item-text-press: var(--db-color-action-default-text-press);
+  --db-toolbar-shadow: var(--db-elevation-med);
 
-  /* Elevation */
-  --db-snackbar-shadow: var(--db-elevation-med);
+  /* Density */
+  --db-toolbar-gap: var(--db-space-4);
+  --db-toolbar-spacing: var(--db-space-2);
 }
 
 /* Tooltip renders an inverted surface (dark chip in light mode, light chip in dark mode), so it does
@@ -17587,38 +17949,9 @@ span.du-bois-light-typography-ellipsis-single-line {
   /* v1 blue primitives, held as literals until a v2 link-on-tooltip semantic exists. */
   --db-tooltip-link-text: #4299e0; /* blue500 */
   --db-tooltip-link-text-hover: #8acaff; /* blue400 */
-  --db-tooltip-link-text-press: #bae1fc; /* blue300 */
+  --db-tooltip-link-text-active: #bae1fc; /* blue300 */
 
   /* Elevation */
   --db-tooltip-shadow: var(--db-elevation-med);
 }
 
-/* Declared under the theme classes too (not just :root) so the var() chain re-resolves inside a
- * `.du-bois-dark` subtree instead of freezing at the light values. */
-:where(:root), :where(.du-bois-light) {
-  /* Shape */
-  --db-progress-border-radius: var(--db-shape-pill);
-
-  /* Color */
-  --db-progress-track: var(--db-color-progress-track);
-  --db-progress-fill: var(--db-color-progress-fill);
-
-  /* Density */
-  --db-progress-size: var(--db-size-2);
-
-  /* Motion */
-  /* No v2 motion token holds this duration. TODO(FEINF-6505): adopt a v2 motion token when one is added. */
-  --db-progress-transition-duration: 300ms;
-}
-
-:where(:root), :where(.du-bois-light) {
-  /* Color */
-  /* No v2 token holds tertiary action-text states yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
-  --db-overflow-trigger-text: var(--db-color-action-tertiary-text-default);
-  --db-overflow-trigger-text-hover: var(--db-color-action-tertiary-text-hover);
-  --db-overflow-trigger-text-press: var(--db-color-action-tertiary-text-press);
-
-  /* Density */
-  --db-overflow-spacing: var(--db-space-2);
-  --db-overflow-menu-spacing: var(--db-space-1);
-}