@databricks/design-system 2.0.9 → 2.0.10

package/dist/design-system/Checkbox/NativeCheckbox.css

@@ -0,0 +1,258 @@
+/* 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. */
+
+.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. 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-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 — 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);
+}
+
+.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-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);
+}
+
+/* Mark visibility. */
+.db-checkbox:has(.db-checkbox-input:checked) .db-checkbox-checkmark {
+  opacity: 1;
+}
+
+.db-checkbox:has(.db-checkbox-input:indeterminate) .db-checkbox-dash {
+  opacity: 1;
+}
+
+/* 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 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-checkbox:has(.db-checkbox-input:disabled) .db-checkbox-label {
+  color: var(--db-checkbox-text-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-checkbox:has(.db-checkbox-input:disabled) .db-checkbox-checkmark {
+  color: var(--db-checkbox-mark-disabled);
+}
+
+.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 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;
+}
+
+/* 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-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-checkbox .db-checkbox-indicator > .db-checkbox-checkmark path {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.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;
+}
+
+/* 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;
+}
+
+/* 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;
+}
+
+/* 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);
+}
+
+/* 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;
+}
+
+/* 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;
+}
+
+/* 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);
+}

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

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

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

@@ -0,0 +1,18 @@
+:where(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  /* Color */
+  --db-context-menu-label-text: var(--db-text-subtle);
+
+  /* Density */
+  --db-context-menu-label-padding-vertical: calc(var(--db-space-1) * 1.5);
+  --db-context-menu-label-padding-horizontal: var(--db-space-2);
+  --db-context-menu-hint-padding-start: var(--db-space-2);
+  --db-context-menu-item-indicator-padding-end: var(--db-space-1);
+  --db-context-menu-icon-width: var(--db-size-4);
+  --db-context-menu-radio-unchecked-indent: calc(
+    var(--db-context-menu-icon-width) + var(--db-context-menu-item-indicator-padding-end) +
+      var(--db-menu-item-padding-horizontal)
+  );
+  --db-context-menu-checkbox-gap: calc(
+    var(--db-context-menu-icon-width) + var(--db-context-menu-item-indicator-padding-end)
+  );
+}

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

@@ -0,0 +1,78 @@
+:where(:root),
+:where(.du-bois-light),
+:where(.du-bois-dark) {
+  /* Shape */
+  --db-dialog-combobox-trigger-border-radius: var(--db-shape-control);
+  --db-dialog-combobox-count-badge-border-radius: var(--db-shape-control);
+
+  /* Color */
+  --db-dialog-combobox-trigger-text: var(--db-text-base);
+  --db-dialog-combobox-trigger-icon: var(--db-text-subtle);
+  --db-dialog-combobox-trigger-text-disabled: var(--db-text-disabled);
+  --db-dialog-combobox-trigger-focus-ring: var(--db-focus-ring-color);
+
+  /* No v2 token holds the action-default trigger border and hover surface yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-dialog-combobox-trigger-border: var(--db-color-action-default-border-default);
+  --db-dialog-combobox-trigger-border-hover: var(--db-color-action-default-border-hover);
+  --db-dialog-combobox-trigger-surface-hover: var(--db-color-action-default-background-hover);
+
+  /* No v2 token holds the disabled trigger surface and border yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-dialog-combobox-trigger-surface-disabled: var(--db-color-action-disabled-background);
+  --db-dialog-combobox-trigger-border-disabled: var(--db-color-action-disabled-border);
+
+  /* No v2 token holds the placeholder text yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-dialog-combobox-trigger-placeholder-text: var(--db-color-text-placeholder);
+
+  /* No v2 token holds the validation-state trigger borders yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-dialog-combobox-trigger-error-border: var(--db-color-action-danger-primary-background-default);
+  --db-dialog-combobox-trigger-warning-border: var(--db-color-text-validation-warning);
+  --db-dialog-combobox-trigger-success-border: var(--db-color-text-validation-success);
+
+  --db-dialog-combobox-option-icon: var(--db-text-subtle);
+  --db-dialog-combobox-option-focus-ring: var(--db-focus-ring-color);
+
+  /* No v2 token holds the tertiary option hover and focus surface yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-dialog-combobox-option-surface-hover: var(--db-color-action-tertiary-background-hover);
+
+  --db-dialog-combobox-hint-text: var(--db-text-subtle);
+  --db-dialog-combobox-hint-text-disabled: var(--db-text-disabled);
+
+  --db-dialog-combobox-search-surface: var(--db-surface-base);
+
+  /* Typography */
+  --db-dialog-combobox-trigger-font-size: var(--db-font-size-base);
+  --db-dialog-combobox-count-badge-font-size: var(--db-font-size-base);
+  --db-dialog-combobox-hint-font-size: var(--db-font-size-sm);
+
+  /* Density */
+  --db-dialog-combobox-trigger-height: var(--db-size-8);
+  --db-dialog-combobox-trigger-height-small: var(--db-size-6);
+  --db-dialog-combobox-trigger-padding-vertical: calc(var(--db-space-2) * 0.75);
+  --db-dialog-combobox-trigger-padding-horizontal: var(--db-space-2);
+  --db-dialog-combobox-trigger-padding-horizontal-start: var(--db-space-3);
+  --db-dialog-combobox-trigger-value-gap: var(--db-space-1);
+  --db-dialog-combobox-trigger-message-spacing: var(--db-space-2);
+
+  --db-dialog-combobox-count-badge-padding-vertical: var(--db-space-0-5);
+  --db-dialog-combobox-count-badge-padding-horizontal: var(--db-space-1);
+
+  --db-dialog-combobox-option-icon-spacing: var(--db-space-2);
+  --db-dialog-combobox-option-info-icon-spacing: var(--db-space-0-5);
+
+  --db-dialog-combobox-search-padding-vertical: var(--db-space-2);
+  --db-dialog-combobox-search-padding-horizontal: var(--db-space-3);
+  --db-dialog-combobox-search-gap: var(--db-space-2);
+}
+
+:where(:root),
+:where(.du-bois-light) {
+  /* Color */
+  /* No v2 token holds the count-badge tag surface yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-dialog-combobox-count-badge-surface: #e8ecf0;
+}
+
+:where(.du-bois-dark) {
+  /* Color */
+  /* No v2 token holds the count-badge tag surface yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-dialog-combobox-count-badge-surface: #37444f;
+}

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

@@ -0,0 +1,30 @@
+:where(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  /* 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);
+
+  /* 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);
+}
+
+:where(:root), :where(.du-bois-light) {
+  /* Elevation */
+  --db-drawer-shadow: var(--db-elevation-high);
+}
+
+:where(.du-bois-dark) {
+  /* Elevation */
+  /* No v2 token holds the dark drawer elevation yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-drawer-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.87);
+}

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

@@ -0,0 +1,23 @@
+:where(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  /* Color */
+  --db-dropdown-menu-arrow-fill: var(--db-popup-surface);
+  --db-dropdown-menu-arrow-stroke: var(--db-popup-border);
+  --db-dropdown-menu-icon-text: var(--db-text-subtle);
+  --db-dropdown-menu-label-text: var(--db-text-subtle);
+  --db-dropdown-menu-indicator-text: var(--db-text-subtle);
+  /* No v2 token holds the action-tint sub-trigger open state yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-dropdown-menu-subtrigger-surface-open: var(--db-color-action-tertiary-background-hover);
+  --db-dropdown-menu-item-danger-text: var(--db-negative-text);
+  /* No v2 token holds the danger-item hover yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-dropdown-menu-item-danger-surface-hover: var(--db-color-action-danger-default-background-hover);
+
+  /* Density */
+  --db-dropdown-menu-icon-size: var(--db-size-4);
+  --db-dropdown-menu-icon-padding-end: var(--db-space-2);
+  --db-dropdown-menu-indicator-icon-size: var(--db-size-4);
+  --db-dropdown-menu-indicator-offset: calc((var(--db-size-4) + var(--db-space-2)) * -1);
+  --db-dropdown-menu-checkbox-indent: calc(var(--db-size-4) + var(--db-space-3) + var(--db-space-2));
+  --db-dropdown-menu-submenu-icon-size: var(--db-size-6);
+  --db-dropdown-menu-submenu-icon-margin: calc(var(--db-menu-item-padding-vertical) / -2)
+    calc(var(--db-menu-item-padding-vertical) - var(--db-space-2) * 1.5) calc(var(--db-menu-item-padding-vertical) / -2) auto;
+}

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

@@ -0,0 +1,11 @@
+:where(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  /* Color */
+  --db-empty-text: var(--db-text-subtle);
+  --db-empty-image-color: var(--db-text-disabled);
+
+  /* Density */
+  --db-empty-image-size: calc(var(--db-size-8) * 2);
+  --db-empty-image-spacing: var(--db-space-4);
+  --db-empty-description-spacing: var(--db-space-4);
+  --db-empty-max-width: 600px;
+}

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

@@ -0,0 +1,10 @@
+:where(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  /* Density */
+  --db-header-title-row-gap: var(--db-space-2);
+  --db-header-title-padding-vertical: var(--db-space-0-5);
+  --db-header-title-margin-top: var(--db-space-0-5);
+  --db-header-breadcrumb-margin-bottom: var(--db-space-1);
+  --db-header-buttons-margin-start: var(--db-space-2);
+  --db-header-title-add-ons-margin-start: var(--db-space-2);
+  --db-header-title-add-ons-gap: var(--db-space-1);
+}

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

@@ -0,0 +1,26 @@
+:where(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  /* Shape */
+  --db-hover-card-border-radius: var(--db-popup-border-radius);
+
+  /* Color */
+  --db-hover-card-surface: var(--db-popup-surface);
+  --db-hover-card-text: var(--db-popup-text);
+  --db-hover-card-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-hover-card-link-text: var(--db-color-action-tertiary-text-default);
+  --db-hover-card-link-text-hover: var(--db-color-action-tertiary-text-hover);
+  --db-hover-card-focus-ring: var(--db-focus-ring-color);
+
+  /* Density */
+  --db-hover-card-padding: var(--db-space-2);
+}
+
+:where(:root), :where(.du-bois-light) {
+  /* Elevation */
+  --db-hover-card-elevation: var(--db-popup-elevation);
+}
+
+:where(.du-bois-dark) {
+  /* No v2 system token holds the dark popup shadow; --db-elevation-med carries the light value in both themes. TODO(FEINF-6188): adopt a dark elevation token when one lands. */
+  --db-hover-card-elevation: 0px 2px 16px 0px rgba(0, 0, 0, 0.61);
+}

package/dist/design-system/Icon/NativeIcon.css

@@ -0,0 +1,97 @@
+/* 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-icon svg {
+  display: inline-block;
+  line-height: 1;
+}
+
+/* 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;
+}
+
+/* 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-icon-warning {
+  color: var(--db-icon-color-warning);
+}
+
+.db-icon-success {
+  color: var(--db-icon-color-success);
+}
+
+.db-icon-ai svg path,
+.db-icon-ai svg rect,
+.db-icon-ai svg circle,
+.db-icon-ai svg ellipse,
+.db-icon-ai svg line,
+.db-icon-ai svg polygon,
+.db-icon-ai svg polyline,
+.db-icon-ai svg text,
+.db-icon-ai svg tspan,
+.db-icon-ai svg textPath,
+.db-icon-ai svg use {
+  fill: var(--db-icon-gradient);
+}
+
+.db-icon-ai-gradient-start {
+  stop-color: var(--db-icon-ai-gradient-start);
+}
+
+.db-icon-ai-gradient-mid {
+  stop-color: var(--db-icon-ai-gradient-mid);
+}
+
+.db-icon-ai-gradient-end {
+  stop-color: var(--db-icon-ai-gradient-end);
+}
+
+.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-icon-spin {
+  display: inline-block;
+  animation: db-icon-loading-circle 1s infinite linear;
+}
+
+@keyframes db-icon-loading-circle {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .db-icon-spin {
+    animation: none;
+  }
+}

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

@@ -0,0 +1,12 @@
+/* Component tokens for the native Icon. */
+:where(:root),
+:where(.du-bois-light),
+:where(.du-bois-dark) {
+  --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);
+}