@databricks/design-system 2.0.8 → 2.0.10

package/dist/design-system/Radio/NativeRadio.css

@@ -0,0 +1,323 @@
+/* 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;
+}
+
+/* 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);
+}
+
+.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);
+}
+
+/* Selected fill. */
+.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). */
+.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). */
+.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);
+}
+
+/* Dot visibility. */
+.db-radio:has(input:checked) .db-radio-dot {
+  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);
+}
+
+/* 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;
+}
+
+/* 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;
+  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;
+}
+
+.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;
+}
+
+/* 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);
+}
+
+/* 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;
+}
+
+/* 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;
+}
+
+/* AntD `& > label { paddingBottom: sm }`. */
+.db-radio-group.db-stack > .db-radio {
+  padding-bottom: var(--db-space-2);
+}
+
+/* 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);
+}
+
+/* Equal column widths: AntD `gridAutoColumns: minmax(0, 1fr)`. */
+.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 `> .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;
+}
+
+/* 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);
+}

package/dist/design-system/Radio/tokens.css

@@ -0,0 +1,37 @@
+:where(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  /* 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-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);
+}

package/dist/design-system/ResourceStatusIndicator/tokens.css

@@ -0,0 +1,5 @@
+:where(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  /* Color */
+  /* No v1/v2 token holds this theme-invariant grey. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-resource-status-indicator-text: #5f7281;
+}

package/dist/design-system/Sidebar/tokens.css

@@ -0,0 +1,36 @@
+:where(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  /* Shape */
+  --db-sidebar-nav-button-active-border-radius: var(--db-shape-control);
+
+  /* Elevation */
+  /* No v2 token holds this highlight shadow. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-sidebar-edge-highlight-shadow: 0px 0px 8px rgba(0, 0, 0, 0.33);
+
+  /* Color */
+  --db-sidebar-surface: var(--db-surface-base);
+  --db-sidebar-border: var(--db-border-base);
+  --db-sidebar-panel-header-text: var(--db-text-base);
+  --db-sidebar-collapse-button-surface: var(--db-surface-base);
+  --db-sidebar-collapse-button-icon: var(--db-text-subtle);
+  --db-sidebar-collapse-button-focus-ring: var(--db-focus-ring-color);
+  /* No v2 token holds these action colors yet. TODO(FEINF-6505): adopt v2 tokens when they land. */
+  --db-sidebar-nav-button-active-surface: var(--db-color-action-default-background-press);
+  --db-sidebar-nav-button-active-icon: var(--db-color-action-tertiary-text-press);
+  --db-sidebar-border-hover: var(--db-color-action-default-border-hover);
+
+  /* Density */
+  --db-sidebar-nav-gap: var(--db-space-1);
+  --db-sidebar-nav-padding: var(--db-space-1);
+  --db-sidebar-panel-header-min-height: var(--db-size-8);
+  --db-sidebar-panel-header-padding-start: var(--db-space-2);
+  --db-sidebar-panel-header-padding-end: var(--db-space-1);
+  --db-sidebar-panel-header-buttons-gap: var(--db-space-1);
+  --db-sidebar-panel-header-buttons-padding-end: var(--db-space-1);
+  --db-sidebar-panel-header-title-close-button-offset: var(--db-space-6);
+  --db-sidebar-panel-body-padding-horizontal: var(--db-space-2);
+  --db-sidebar-compact-toggle-spacing: var(--db-space-4);
+  --db-sidebar-collapsed-strip-width: var(--db-space-4);
+
+  /* Typography */
+  --db-sidebar-panel-header-font-weight: var(--db-font-weight-semibold);
+}

package/dist/design-system/Slider/tokens.css

@@ -0,0 +1,22 @@
+:where(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  /* 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; /* TODO: --db-surface-disabled */
+  --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 */
+}

package/dist/design-system/SnackBar/tokens.css

@@ -0,0 +1,37 @@
+:where(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  /* Shape */
+  /* TODO(FEINF-6505): adopt --db-shape-container-* once a 4px container radius exists; kept on --db-radius-sm to preserve 4px. */
+  --db-snack-bar-border-radius: var(--db-radius-sm);
+
+  /* Density */
+  --db-snack-bar-spacing-vertical: var(--db-space-3);
+  --db-snack-bar-spacing-horizontal: var(--db-space-4);
+  --db-snack-bar-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-snack-bar-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-snack-bar-close-icon: #e8ecf0;
+  --db-snack-bar-close-icon-hover: #8acaff;
+  --db-snack-bar-close-icon-active: #bae1fc;
+}
+
+: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-snack-bar-surface: #11171c;
+
+  /* Elevation */
+  --db-snack-bar-shadow: var(--db-elevation-med);
+}
+
+:where(.du-bois-dark) {
+  /* 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-snack-bar-surface: #445461;
+
+  /* Elevation */
+  /* No v1/v2 system token holds this dark shadow; --db-elevation-med is theme-invariant (light). TODO(FEINF-6505): adopt a v2 system token when one is added. */
+  --db-snack-bar-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.61);
+}

package/dist/design-system/Spacer/tokens.css

@@ -0,0 +1,11 @@
+/* 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), :where(.du-bois-dark) {
+  /* 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 */
+}

package/dist/design-system/Switch/NativeSwitch.css

@@ -0,0 +1,172 @@
+.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);
+}
+
+.db-switch:has(.db-switch-input:disabled) {
+  cursor: not-allowed;
+}
+
+/* The track. `appearance: none` strips the native checkbox rendering so the input itself can be styled.
+ * Scoped via the `.db-switch-input` class, never a bare `input`: `.db-switch .db-switch-input` is
+ * specificity (0,2,0), which out-ranks a host app's `input[type='checkbox'] { width: auto }` reset
+ * (e.g. Bootstrap, loaded in webapp). A bare `.db-switch input` (0,1,1) merely ties that reset and, losing
+ * on load order, has its `inline-size` overridden to `auto` — collapsing the track to zero width and
+ * leaving only the floating thumb. Mirrors NativeCheckbox's `.db-checkbox-input`. */
+.db-switch .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;
+}
+
+/* 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 .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 .db-switch-input:not(:disabled):not(:checked) {
+  background-color: var(--db-switch-surface-hover);
+  border-color: var(--db-switch-border-hover);
+}
+
+.db-switch:active .db-switch-input:not(:disabled):not(:checked) {
+  background-color: var(--db-switch-surface-active);
+  border-color: var(--db-switch-border-active);
+}
+
+.db-switch .db-switch-input:checked {
+  background-color: var(--db-switch-surface-checked);
+  border-color: var(--db-switch-border-checked);
+}
+
+.db-switch:hover .db-switch-input:checked:not(:disabled) {
+  background-color: var(--db-switch-surface-checked-hover);
+  border-color: var(--db-switch-border-checked-hover);
+}
+
+.db-switch:active .db-switch-input:checked:not(:disabled) {
+  background-color: var(--db-switch-surface-checked-active);
+  border-color: var(--db-switch-border-checked-active);
+}
+
+.db-switch .db-switch-input:checked::before {
+  transform: translateY(-50%) translateX(calc(var(--db-switch-track-width) - var(--db-switch-thumb-size)));
+}
+
+/* On focus, recolor the border to the checked-fill color on top of the outline ring. Matching AntD,
+ * the ring sits flush when off and gains a 1px offset when checked.
+ * 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 .db-switch-input:focus-visible {
+  border-color: var(--db-switch-border-focus);
+  outline: 1px solid var(--db-focus-ring-color);
+  outline-offset: 0;
+}
+
+.db-switch .db-switch-input:checked:focus-visible {
+  outline-offset: 1px;
+}
+
+.db-switch .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. */
+.db-switch .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) {
+  .db-switch .db-switch-input,
+  .db-switch .db-switch-input::before {
+    transition: 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);
+}
+
+/* Target the <Label>'s class, not a bare `label` — that would also match the .db-switch root <label>. */
+.db-switch-wrapper:has(.db-switch-input:disabled) .du-bois-light-label,
+.db-switch-wrapper:has(.db-switch-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. 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));
+}
+
+: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;
+}