@databricks/design-system 2.0.3 → 2.0.4

package/dist/index.css

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