@databricks/design-system 2.0.3 → 2.0.4

package/dist/index-dark.css

@@ -16254,17 +16254,17 @@ span.du-bois-dark-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>
  */
 
 /**
@@ -16272,17 +16272,17 @@ span.du-bois-dark-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>
  */
 
 
@@ -16504,16 +16504,16 @@ span.du-bois-dark-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. */
@@ -16561,7 +16561,7 @@ span.du-bois-dark-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. */
@@ -16574,16 +16574,16 @@ span.du-bois-dark-typography-ellipsis-single-line {
  * 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. */
 
-/* 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. */
 
-/* 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. */
 
-/* Vertical: .ds-stack supplies flex-direction + gap; we only retarget the knob. */
+/* Vertical: .db-stack supplies flex-direction + gap; we only retarget the knob. */
 
 :where(.du-bois-dark) {
   /* Shape */
@@ -16631,12 +16631,12 @@ span.du-bois-dark-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
@@ -16645,7 +16645,7 @@ span.du-bois-dark-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. */
 
 /* 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
@@ -16703,16 +16703,16 @@ span.du-bois-dark-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. */
 
 /* 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. */
 
 /* RadioGroup layout. Vertical (the default) delegates flex-direction to the
- * .ds-stack primitive; horizontal is a two-row grid (mirroring AntD). */
+ * .db-stack primitive; horizontal is a two-row grid (mirroring AntD). */
 
-/* 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
@@ -16724,9 +16724,9 @@ span.du-bois-dark-typography-ellipsis-single-line {
 /* AntD `& > label:last-of-type { paddingBottom: 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. */
+ * consecutive tiles explicitly. The .db-stack gap is 0, so this margin is the spacing. */
 
 /* 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
@@ -16739,13 +16739,13 @@ span.du-bois-dark-typography-ellipsis-single-line {
 
 /* 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. */
 
 /* 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. */
+ * vertical negative-margin rules are scoped to .db-stack, so nothing to reset here. */
 
 /* 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). */
@@ -16808,7 +16808,7 @@ span.du-bois-dark-typography-ellipsis-single-line {
 
 /* `:first-child` scopes this to the label-first layout; the plain layout renders the label last. */
 
-/* Target the <Label>'s class, not a bare `label` — that would also match the .ds-switch root <label>. */
+/* Target the <Label>'s class, not a bare `label` — that would also match the .db-switch root <label>. */
 
 /* Indent a following hint/message past the track. The class is doubled to out-specify FormMessage's
  * own margin rule. */

package/dist/index-dark.mitigated.css

@@ -16080,17 +16080,17 @@ span.du-bois-dark-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>
  */
 
 /**
@@ -16098,17 +16098,17 @@ span.du-bois-dark-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>
  */
 
 
@@ -16330,16 +16330,16 @@ span.du-bois-dark-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. */
@@ -16387,7 +16387,7 @@ span.du-bois-dark-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. */
@@ -16400,16 +16400,16 @@ span.du-bois-dark-typography-ellipsis-single-line {
  * 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. */
 
-/* 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. */
 
-/* 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. */
 
-/* Vertical: .ds-stack supplies flex-direction + gap; we only retarget the knob. */
+/* Vertical: .db-stack supplies flex-direction + gap; we only retarget the knob. */
 
 :where(.du-bois-dark) {
   /* Shape */
@@ -16457,12 +16457,12 @@ span.du-bois-dark-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
@@ -16471,7 +16471,7 @@ span.du-bois-dark-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. */
 
 /* 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
@@ -16529,16 +16529,16 @@ span.du-bois-dark-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. */
 
 /* 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. */
 
 /* RadioGroup layout. Vertical (the default) delegates flex-direction to the
- * .ds-stack primitive; horizontal is a two-row grid (mirroring AntD). */
+ * .db-stack primitive; horizontal is a two-row grid (mirroring AntD). */
 
-/* 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
@@ -16550,9 +16550,9 @@ span.du-bois-dark-typography-ellipsis-single-line {
 /* AntD `& > label:last-of-type { paddingBottom: 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. */
+ * consecutive tiles explicitly. The .db-stack gap is 0, so this margin is the spacing. */
 
 /* 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
@@ -16565,13 +16565,13 @@ span.du-bois-dark-typography-ellipsis-single-line {
 
 /* 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. */
 
 /* 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. */
+ * vertical negative-margin rules are scoped to .db-stack, so nothing to reset here. */
 
 /* 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). */
@@ -16634,7 +16634,7 @@ span.du-bois-dark-typography-ellipsis-single-line {
 
 /* `:first-child` scopes this to the label-first layout; the plain layout renders the label last. */
 
-/* Target the <Label>'s class, not a bare `label` — that would also match the .ds-switch root <label>. */
+/* Target the <Label>'s class, not a bare `label` — that would also match the .db-switch root <label>. */
 
 /* Indent a following hint/message past the track. The class is doubled to out-specify FormMessage's
  * own margin rule. */