@databricks/design-system 2.0.8 → 2.0.10

package/dist/index.css

@@ -16038,39 +16038,39 @@ span.du-bois-light-typography-ellipsis-single-line {
   /* Neutral */
   --db-surface-base: var(--db-color-background-primary);
   --db-surface-subtle: var(--db-color-background-secondary);
-  --db-surface-strong: initial; /* TODO */
+  --db-surface-strong: #f5f5f5;
 
-  --db-surface-inverse: initial; /* TODO */
+  --db-surface-inverse: var(--db-color-tooltip-background-tooltip);
   --db-surface-active: var(--db-color-table-background-selected-default);
   --db-surface-hover: var(--db-color-table-background-unselected-hover);
   --db-surface-disabled: var(--db-color-action-disabled-background);
 
   --db-surface-selected: var(--db-color-table-background-selected-hover);
-  --db-surface-selected-hover: initial; /* TODO */;
+  --db-surface-selected-hover: var(--db-color-table-background-selected-hover);
   --db-surface-selected-active: var(--db-color-table-background-selected-hover); /* no distinct active value */
 
   /* Surface alpha-blending modifiers */
-  --db-surface-backdrop: initial; /* TODO */;
+  --db-surface-backdrop: var(--db-color-overlay-overlay);
   /* TODO: surface-tint for containers that distinguish some content */
 
   --db-text-base: var(--db-color-text-primary);
   --db-text-subtle: var(--db-color-text-secondary);
-  --db-text-strong: initial; /* TODO */
+  --db-text-strong: var(--db-color-text-primary);
   --db-text-disabled: var(--db-color-action-disabled-text);
-  --db-text-suggestion: initial; /* TODO - e.g. input placeholder, loading text */
-  --db-text-inverse: initial; /* TODO, stark contrast e.g. tooltip text */
+  --db-text-suggestion: var(--db-color-text-placeholder);
+  --db-text-inverse: var(--db-color-tooltip-text-tooltip);
 
   --db-border-base: var(--db-color-border);
-  --db-border-subtle: initial; /* TODO */
+  --db-border-subtle: #f5f5f5;
   --db-border-strong: var(--db-color-border-accessible);
-  --db-border-hover: initial; /* TODO */
-  --db-border-active: initial; /* TODO */
-  --db-border-disabled: initial; /* TODO */
+  --db-border-hover: #737373;
+  --db-border-active: #a3a3a3;
+  --db-border-disabled: var(--db-color-action-disabled-border);
 
   /* Accent */
   --db-accent-surface: var(--db-color-action-primary-background-default);
   --db-accent-surface-subtle: var(--db-color-action-default-background-hover);
-  --db-accent-surface-strong: var(--db-color-action-primary-background-hover);
+  --db-accent-surface-strong: var(--db-color-action-primary-background-default);
 
   --db-accent-surface-hover: var(--db-color-action-primary-background-hover);
   --db-accent-surface-active: var(--db-color-action-primary-background-press); /* no distinct active value */
@@ -16081,56 +16081,56 @@ span.du-bois-light-typography-ellipsis-single-line {
   --db-text-on-accent-surface: var(--db-color-action-primary-text-default);
 
   --db-accent-border: var(--db-color-action-primary-background-default);
-  --db-accent-border-hover: var(--db-color-action-primary-background-press);
-  --db-accent-border-active:  initial; /* TODO */;
+  --db-accent-border-hover: var(--db-color-action-primary-background-hover);
+  --db-accent-border-active: var(--db-color-action-primary-background-press);
 
   /* Negative */
   --db-negative-surface: var(--db-color-action-danger-primary-background-default);
   --db-negative-surface-subtle: var(--db-color-background-danger);
-  --db-negative-surface-strong: var(--db-color-action-danger-primary-background-hover);
+  --db-negative-surface-strong: var(--db-color-action-danger-primary-background-default);
 
   --db-negative-surface-hover: var(--db-color-action-danger-primary-background-hover);
   --db-negative-surface-active: var(--db-color-action-danger-primary-background-press); /* no distinct active value */
-  --db-negative-surface-selected: var(--db-color-action-danger-primary-background-press);
+  --db-negative-surface-selected: #fbd0d8;
 
   --db-negative-text: var(--db-color-text-validation-danger);
   --db-text-on-negative-surface: var(--db-color-action-danger-primary-text);
 
   --db-negative-border: var(--db-color-action-danger-default-border-default);
-  --db-negative-border-hover: initial; /* TODO */
-  --db-negative-border-active: initial; /* TODO */
+  --db-negative-border-hover: var(--db-color-action-danger-default-border-hover);
+  --db-negative-border-active: var(--db-color-action-danger-default-border-press);
 
   /* Caution */
-  --db-caution-surface: initial; /* TODO */
+  --db-caution-surface: #fceaca;
   --db-caution-surface-subtle: var(--db-color-background-warning);
-  --db-caution-surface-strong: initial; /* TODO */
+  --db-caution-surface-strong: #de7921;
 
-  --db-caution-surface-hover: initial; /* TODO */
-  --db-caution-surface-active: initial; /* TODO */
-  --db-caution-surface-selected: initial; /* TODO */
+  --db-caution-surface-hover: #be501e;
+  --db-caution-surface-active: #93320b;
+  --db-caution-surface-selected: #f2be88;
 
   --db-caution-text: var(--db-color-text-validation-warning);
-  --db-text-on-caution-surface: initial; /* TODO */
+  --db-text-on-caution-surface: #141414;
 
   --db-caution-border: var(--db-color-border-warning);
-  --db-caution-border-hover: initial; /* TODO */
-  --db-caution-border-active: initial; /* TODO */
+  --db-caution-border-hover: #be501e;
+  --db-caution-border-active: #93320b;
 
   /* Positive */
-  --db-positive-surface: initial; /* TODO */
+  --db-positive-surface: #d4f7df;
   --db-positive-surface-subtle: var(--db-color-background-success);
-  --db-positive-surface-strong: initial; /* TODO */
+  --db-positive-surface-strong: #277c43;
 
-  --db-positive-surface-hover: initial; /* TODO */
-  --db-positive-surface-active: initial; /* TODO */
-  --db-positive-surface-selected: initial; /* TODO */
+  --db-positive-surface-hover: #115026;
+  --db-positive-surface-active: #093919;
+  --db-positive-surface-selected: #b1ecc5;
 
   --db-positive-text: var(--db-color-text-validation-success);
-  --db-text-on-positive-surface: initial; /* TODO */
+  --db-text-on-positive-surface: #ffffff;
 
-  --db-positive-border: initial; /* TODO */
-  --db-positive-border-hover: initial; /* TODO */
-  --db-positive-border-active: initial; /* TODO */
+  --db-positive-border: #3ba65e;
+  --db-positive-border-hover: #277c43;
+  --db-positive-border-active: #115026;
 
   /* Branded */
   --db-ai-gradient-start: #4299e0;
@@ -16187,7 +16187,7 @@ span.du-bois-light-typography-ellipsis-single-line {
 
   /* TODO: media query for mobile font sizes */
 
-  /* Du Bois v1 ships 400 and 600 only */
+  /* dbui v1 ships 400 and 600 only */
   --db-font-weight-normal: 400;
   --db-font-weight-medium: initial; /*  TODO */
   --db-font-weight-semibold: 600;
@@ -16218,14 +16218,13 @@ span.du-bois-light-typography-ellipsis-single-line {
 
 :where(:root), :where(.du-bois-light) {
   /* Shape */
-  /* Mirrors the ShapeTokens host-override var used by Card; falls back to the theme radius. */
-  --db-card-border-radius: var(--info-container-border-radius, 8px);
+  --db-card-border-radius: var(--db-radius-md);
 
   /* Color */
   --db-card-surface: var(--db-surface-base);
   --db-card-text: var(--db-text-base);
   --db-card-border: var(--db-border-base);
-  --db-card-border-hover: var(--db-border-strong);
+  --db-card-border-hover: var(--db-color-action-default-border-hover);
 }
 
 :where(:root), :where(.du-bois-light) {
@@ -16304,6 +16303,88 @@ span.du-bois-light-typography-ellipsis-single-line {
   --db-selection-toggle-transition-duration: 120ms;
 }
 
+/*
+  Shared token primitives for the input family: the text Input and input-like controls such as
+  DatePicker and TypeaheadCombobox.
+ */
+:where(:root), :where(.du-bois-light) {
+  /* Shape */
+  --db-input-border-radius: var(--input-border-radius, 4px); /* From design-system/src/design-system/shape-tokens.ts */
+  --db-input-border-width: 1px;
+
+  /* Color */
+  --db-input-surface: transparent;
+  --db-input-surface-disabled: var(--db-surface-disabled);
+  --db-input-surface-locked: var(--db-surface-subtle); /* Read-only "locked" fill (v2 → v1 background-secondary). */
+  --db-input-addon-surface: var(--db-surface-subtle); /* Bordered addon-cell fill. */
+
+  --db-input-text: var(--db-text-base);
+  --db-input-text-placeholder: var(--db-color-text-placeholder);
+  --db-input-text-disabled: var(--db-text-disabled);
+  --db-input-text-affix: var(--db-text-subtle); /* prefix & suffix connect, typically icons */
+
+  --db-input-border: var(--db-color-action-default-border-default);
+  --db-input-border-hover: var(--db-accent-surface-hover);
+  --db-input-border-focus: var(--db-focus-ring-color);
+  --db-input-border-disabled: var(--db-color-action-disabled-border);
+  --db-input-border-error: var(--db-negative-surface);
+  --db-input-border-warning: var(--db-caution-text);
+  --db-input-border-success: var(--db-positive-text);
+
+  /* Density */
+  --db-input-height: var(--db-size-8);
+  --db-input-height-small: var(--db-size-6);
+
+  --db-input-spacing-vertical: calc(var(--db-space-1) * 1.25); /* Scale to match Du Bois v1 */
+  --db-input-spacing-horizontal: calc(var(--db-space-2) * 1.5); /* Scale to match Du Bois v1 */
+  --db-input-spacing-vertical-small: 0;
+  --db-input-spacing-horizontal-small: var(--db-space-2);
+
+  --db-input-affix-gap: var(--db-space-2); /* Gap between an affix (prefix/suffix) and the input value. */
+
+  /* Typography */
+  --db-input-font-size: var(--db-font-size-base);
+  --db-input-line-height: calc(20 / 13); /* 20:13 ratio scales with the user's text-size setting. */
+}
+
+:where(:root), :where(.du-bois-light) {
+  /* Shape */
+  --db-menu-border-radius: var(--db-popup-border-radius);
+  --db-menu-separator-height: 1px;
+  /* No token for the control-specific focus inset. TODO(FEINF-6188): adopt a v2 token when one lands. */
+  --db-menu-item-focus-ring-offset: -1px;
+
+  /* Color */
+  --db-menu-surface: var(--db-popup-surface);
+  --db-menu-text: var(--db-popup-text);
+  --db-menu-border: var(--db-popup-border);
+  --db-menu-separator: var(--db-border-base);
+  /* No v2 token holds the action-tint item highlight yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-menu-item-surface-hover: var(--db-color-action-tertiary-background-hover);
+  --db-menu-item-focus-ring: var(--db-focus-ring-color);
+  --db-menu-item-text-disabled: var(--db-list-item-text-disabled);
+  --db-menu-meta-text: var(--db-text-subtle);
+  --db-menu-info-icon-text: var(--db-text-subtle);
+
+  /* Density */
+  --db-menu-content-padding-vertical: var(--db-space-1);
+  --db-menu-item-padding-horizontal: var(--db-space-3);
+  /* No exact density step for 6px. TODO(FEINF-6188): adopt a direct step if the scale adds one. */
+  --db-menu-item-padding-vertical: calc(var(--db-space-1) * 1.5);
+  --db-menu-separator-margin-vertical: var(--db-space-1);
+  --db-menu-separator-margin-horizontal: var(--db-space-2);
+  --db-menu-info-icon-padding-start: var(--db-space-1);
+  --db-menu-item-focus-ring-width: var(--db-focus-ring-width);
+
+  /* Typography */
+  --db-menu-meta-font-size: var(--db-font-size-sm);
+}
+
+:where(:root), :where(.du-bois-light) {
+  /* Elevation */
+  --db-menu-elevation: var(--db-elevation-med);
+}
+
 :where(:root), :where(.du-bois-light) {
   /* Shape */
   --db-avatar-border-radius: var(--db-radius-sm);
@@ -16328,6 +16409,64 @@ span.du-bois-light-typography-ellipsis-single-line {
 }
 
 
+:where(:root), :where(.du-bois-light) {
+  /* Color */
+  --db-breadcrumb-text: var(--db-accent-text);
+  /* TODO(FEINF-6179): Replace these fallbacks when v2 link-hover and placeholder semantic tokens exist. */
+  --db-breadcrumb-text-hover: var(--db-color-action-link-hover);
+  --db-breadcrumb-separator-text: var(--db-color-text-placeholder);
+  --db-breadcrumb-focus-ring: var(--db-focus-ring-color);
+
+  /* Density and typography */
+  --db-breadcrumb-separator-spacing: var(--db-space-1);
+  --db-breadcrumb-separator-font-size: var(--db-font-size-xl);
+  --db-breadcrumb-icon-size: var(--db-font-size-base);
+}
+
+.db-breadcrumb a {
+  color: var(--db-breadcrumb-text);
+  text-decoration: none;
+}
+
+.db-breadcrumb a:hover,
+.db-breadcrumb a:focus {
+  color: var(--db-breadcrumb-text-hover);
+}
+
+.db-breadcrumb a:focus-visible {
+  outline-color: var(--db-breadcrumb-focus-ring);
+  outline-style: auto;
+}
+
+.db-breadcrumb-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--db-breadcrumb-separator-spacing);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.db-breadcrumb-item,
+.db-breadcrumb-separator {
+  display: inline-flex;
+  align-items: center;
+}
+
+.db-breadcrumb-separator {
+  color: var(--db-breadcrumb-separator-text);
+  font-size: var(--db-breadcrumb-separator-font-size);
+  user-select: none;
+}
+
+.db-breadcrumb-separator :is(.anticon),
+.db-breadcrumb-separator :is(.db-icon) {
+  font-size: var(--db-breadcrumb-icon-size);
+  /* The chevron path is optically top-heavy even when its box is mathematically centered. */
+  transform: translateY(1px);
+}
+
 /* Component-tier tokens for the native <Button>, grouped by area (density, shape, typography, color).
  * Colors alias the action-* system tokens; sizes alias the system density scale.
  *
@@ -16752,6 +16891,27 @@ span.du-bois-light-typography-ellipsis-single-line {
   width: var(--db-btn-height-small) !important;
 }
 
+/* Component-tier tokens for Card. Shared surface, text, border, and container radius come from the cards
+ * family (design-tokens/family-tokens/cards-tokens.css); Card-only shape, density, and elevation tokens
+ * live here. Card CSS reads only --db-card-* tokens. */
+
+:where(:root), :where(.du-bois-light) {
+  /* Shape */
+  --db-card-bar-border-radius: var(--db-radius-sm);
+
+  /* Density */
+  --db-card-padding: var(--db-space-4);
+  --db-card-bar-spacing-vertical: var(--db-space-2);
+  --db-card-content-padding: var(--db-space-6);
+}
+
+:where(:root), :where(.du-bois-light) {
+  /* Elevation */
+  --db-card-shadow: var(--db-elevation-low);
+  /* The hover shadow (v1 shadows.md, 3px/6px) matches no --db-elevation-* step; held as a literal.
+   * TODO(FEINF-6178): adopt a v2 elevation token when one exists. */
+  --db-card-shadow-hover: 0px 3px 6px 0px rgba(0, 0, 0, 0.05);
+}
 
 :where(:root), :where(.du-bois-light) {
   /* Shape */
@@ -17050,7 +17210,96 @@ span.du-bois-light-typography-ellipsis-single-line {
   --db-stack-gap: var(--db-checkbox-label-spacing);
 }
 
+:where(:root), :where(.du-bois-light) {
+  /* 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)
+  );
+}
+
+:where(:root),
+:where(.du-bois-light) {
+  /* 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(:root), :where(.du-bois-light) {
   /* Density */
@@ -17077,6 +17326,29 @@ span.du-bois-light-typography-ellipsis-single-line {
   --db-drawer-shadow: var(--db-elevation-high);
 }
 
+:where(:root), :where(.du-bois-light) {
+  /* 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;
+}
 
 :where(:root), :where(.du-bois-light) {
   /* Color */
@@ -17093,9 +17365,39 @@ span.du-bois-light-typography-ellipsis-single-line {
 
 
 
+:where(:root), :where(.du-bois-light) {
+  /* 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);
+}
+
+
+:where(:root), :where(.du-bois-light) {
+  /* 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);
+}
 
 /* Component tokens for the native Icon. */
 :where(:root),
@@ -17207,6 +17509,284 @@ span.du-bois-light-typography-ellipsis-single-line {
   }
 }
 
+/*
+  The shared surface for the "input" family of controls: the text Input and input-like controls
+  such as DatePicker and TypeaheadCombobox. A component applies `.db-input` to whichever element
+  carries the border (the <input> itself, or a container wrapping it) and layers its own internal
+  composition on top.
+*/
+
+.db-input {
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-block-size: var(--db-input-height);
+  padding-block: var(--db-input-spacing-vertical);
+  padding-inline: var(--db-input-spacing-horizontal);
+
+  border: var(--db-input-border-width) solid var(--db-input-border);
+  border-radius: var(--db-input-border-radius);
+
+  background-color: var(--db-input-surface);
+  color: var(--db-input-text);
+
+  font-size: var(--db-input-font-size);
+  line-height: var(--db-input-line-height);
+}
+
+.db-input::placeholder {
+  color: var(--db-input-text-placeholder);
+}
+
+.db-input:hover {
+  border-color: var(--db-input-border-hover);
+}
+
+/* Focus swaps the border for an inset ring so the box does not shift by a pixel. `:focus-within`
+   covers composite controls, where focus lands on an inner element rather than the bordered box. */
+.db-input:focus,
+.db-input:focus-within {
+  border-color: transparent;
+  outline: var(--db-focus-ring-width) solid var(--db-input-border-focus);
+  outline-offset: calc(-1 * var(--db-focus-ring-width));
+}
+
+.db-input:disabled {
+  background-color: var(--db-input-surface-disabled);
+  color: var(--db-input-text-disabled);
+  border-color: var(--db-input-border-disabled);
+}
+
+/* Locked: read-only, kept legible on a subtle fill (unlike the greyed-out disabled state). */
+.db-input-locked {
+  background-color: var(--db-input-surface-locked);
+}
+
+/* Small: a fixed shorter height with tighter horizontal padding. */
+.db-input-small {
+  min-block-size: auto;
+  block-size: var(--db-input-height-small);
+  padding-block: var(--db-input-spacing-vertical-small);
+  padding-inline: var(--db-input-spacing-horizontal-small);
+}
+
+/* Validation state colors the border (and the focus ring) instead of the resting/hover color. */
+.db-input-error,
+.db-input-error:hover {
+  border-color: var(--db-input-border-error);
+}
+.db-input-warning,
+.db-input-warning:hover {
+  border-color: var(--db-input-border-warning);
+}
+.db-input-success,
+.db-input-success:hover {
+  border-color: var(--db-input-border-success);
+}
+
+.db-input-error:focus,
+.db-input-error:focus-within {
+  outline-color: var(--db-input-border-error);
+}
+.db-input-warning:focus,
+.db-input-warning:focus-within {
+  outline-color: var(--db-input-border-warning);
+}
+.db-input-success:focus,
+.db-input-success:focus-within {
+  outline-color: var(--db-input-border-success);
+}
+
+/*
+  Composition of the native Input and Password, layered on the shared `.db-input` building blocks
+  from `mortar/input.css`.
+*/
+
+/* Affix container: the .db-input border box becomes a flex row holding an optional prefix, the
+   borderless inner <input>, and an optional suffix (a clear button and/or trailing content). */
+.db-input-affix-container {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--db-input-affix-gap);
+}
+
+/* The inner <input> is transparent and borderless; the container owns the border, fill, padding,
+   height, and typography, which the input inherits. */
+.db-input-affix-container input {
+  flex: 1;
+  min-inline-size: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  color: inherit;
+  font: inherit;
+}
+.db-input-affix-container input::placeholder {
+  color: var(--db-input-text-placeholder);
+}
+
+.db-input-prefix,
+.db-input-suffix {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--db-input-affix-gap);
+  color: var(--db-input-text-affix);
+}
+
+/* TODO: confirm this doesn't breaks buttons passed as `suffix` content. */
+/* Icon buttons for e.g. clear, password visibility toggle, etc. */
+.db-input-suffix > button {
+  display: inline-flex;
+  align-items: center;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--db-input-text-affix);
+  cursor: pointer;
+}
+
+.db-input-suffix > button:hover {
+  color: var(--db-input-text);
+}
+
+/* AntD renders the clear affix smaller than the standard DS icon (12px vs 16px). Match that here,
+   scoped to the clear button, so the native input stays visually backwards-compatible with the AntD
+   input through the migration. The @ant-design icon is a 1em-sized <svg>, so its font-size sets its
+   box. Color is left on the muted affix token: the DS standardizes muted icons at that grey and has
+   no token for AntD's lighter clear grey (which would also be invisible in dark). */
+.db-input-clear svg {
+  font-size: 12px;
+}
+
+/* Disabled affix container: :disabled matches only the inner <input>, so the container (which carries
+   the border and fill) takes the disabled treatment via :has(). */
+.db-input-affix-container:has(input:disabled) {
+  background-color: var(--db-input-surface-disabled);
+  border-color: var(--db-input-border-disabled);
+}
+.db-input-affix-container:has(input:disabled) input {
+  color: var(--db-input-text-disabled);
+}
+
+/* Addon group: lays the addon cell and the field out as one joined, full-width control; the field
+   flexes to fill. Distinct from the button group (`.db-input-group`, group/NativeGroup.css) — that
+   one shrinks to its content, whereas an addon-input stays full width like a plain field. */
+.db-input-addon-group {
+  display: inline-flex;
+  inline-size: 100%;
+  align-items: stretch;
+}
+.db-input-addon-group > .db-input {
+  flex: 1;
+  min-inline-size: 0;
+}
+
+/* Addon: a bordered cell holding the input's `addonBefore` content — a static label that sits just
+   outside the field's border and joins seamlessly to it (e.g. a `#` prefix or a fixed path prefix). */
+.db-input-addon {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  padding-inline: var(--db-input-spacing-horizontal);
+  border: var(--db-input-border-width) solid var(--db-input-border);
+  border-radius: var(--db-input-border-radius);
+  background-color: var(--db-input-addon-surface);
+  color: var(--db-input-text);
+  font-size: var(--db-input-font-size);
+  line-height: var(--db-input-line-height);
+}
+
+/* Seam between the addon and the field: square the touching corners and drop the doubled border. */
+.db-input-addon-group > .db-input-addon {
+  border-inline-end: none;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+.db-input-addon-group > .db-input-addon + .db-input {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+
+/*
+  Native TextArea specifics, layered on the shared `.db-input` surface from `mortar/input.css`:
+  block layout, vertical resize, and auto-grow via CSS `field-sizing` where the browser supports it
+  (the component falls back to JS measurement otherwise).
+*/
+
+.db-input-textarea {
+  display: block;
+  resize: vertical;
+}
+
+/* Auto-grow controls the height, so manual resizing is disabled. */
+.db-input-textarea-autosize {
+  resize: none;
+}
+
+@supports (field-sizing: content) {
+  .db-input-textarea-autosize {
+    field-sizing: content;
+    /* Cap growth at maxRows when the component sets --db-textarea-max-rows; the large default leaves
+       it effectively uncapped (autoSize: true). The row floor (minRows, or one row) comes from the
+       `rows` attribute, which field-sizing treats as the minimum height. */
+    max-height: calc(
+      var(--db-textarea-max-rows, 9999) * 1lh + 2 * var(--db-input-spacing-vertical) + 2 * var(--db-input-border-width)
+    );
+  }
+}
+
+/*
+  Input group composes an input and a button in one seamless control.
+  A `buttonSide` prop (left == start, right == end) controls which side the button appears.
+
+  Avoid direct-child selectors (`>`) here, as there may be intermediate elements with `display: contents`.
+*/
+/* A button group shrinks to its content (an inline-flex box is auto-width), like the AntD group. */
+.db-input-group {
+  display: inline-flex;
+}
+
+/* The field grows to fill the group but keeps its own width as the flex basis, so the auto-width
+   group doesn't collapse the field to its content. */
+.db-input-group .db-input {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
+
+/* A disabled field hides its border so the disabled button's border is the group's only seam line;
+   the field then shows just its disabled fill, matching the AntD group (which drops the border here).
+   Transparent rather than removed keeps the field's box the same size as when enabled. */
+.db-input-group .db-input:disabled {
+  border-color: transparent;
+}
+
+/*
+  A *compact* input group collapses spacing and borders between the input and adjacent button.
+  We un-round the border-radius so the input and the button seamlessly fit together.
+  We target buttons that are not contained within .db-input-affix-container to avoid
+    affecting prefix/suffix icon buttons.
+*/
+
+.db-input-group-compact.db-input-group-button-end .db-input,
+.db-input-group-compact.db-input-group-button-start button:not(.db-input-affix-container button) {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.db-input-group-compact.db-input-group-button-start .db-input,
+.db-input-group-compact.db-input-group-button-end button:not(.db-input-affix-container button) {
+  margin-inline-start: calc(-1 * var(--db-input-border-width));
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+
+/* Lift the hovered or focused member so its border and focus ring paint over the shared seam. */
+.db-input-group-compact .db-input:is(:hover, :focus-within), .db-input-group-compact button:not(.db-input-affix-container button):is(:hover, :focus-within) {
+  position: relative;
+  z-index: 1;
+}
+
 
 :where(:root), :where(.du-bois-light) {
   /* Shape */
@@ -17224,6 +17804,42 @@ span.du-bois-light-typography-ellipsis-single-line {
   --db-listbox-empty-spacing-vertical: calc(var(--db-space-2) * 0.75);
 }
 
+:where(:root), :where(.du-bois-light) {
+  /* Shape */
+  --db-modal-border-radius: var(--info-container-border-radius, 12px);
+  --db-modal-overlay-border-radius: var(--db-radius-sm);
+
+  /* Color */
+  --db-modal-surface: var(--db-surface-base);
+  --db-modal-text: var(--db-text-base);
+  /* No v2 token holds the overlay scrim yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-modal-overlay-surface: var(--db-color-overlay-overlay);
+  --db-modal-danger-icon: var(--db-negative-text);
+
+  /* Density */
+  --db-modal-content-padding-bottom: var(--db-space-6);
+  --db-modal-header-padding-top: var(--db-space-4);
+  --db-modal-header-padding-right: var(--db-space-4);
+  --db-modal-header-padding-bottom: var(--db-space-4);
+  --db-modal-header-padding-left: var(--db-space-6);
+  --db-modal-title-padding-right: var(--db-space-6);
+  --db-modal-title-padding-right-non-closable: var(--db-space-2);
+  --db-modal-body-padding-horizontal: var(--db-space-6);
+  --db-modal-body-padding-vertical: var(--db-space-2);
+  --db-modal-footer-padding-top: var(--db-space-4);
+  --db-modal-footer-padding-horizontal: var(--db-space-6);
+  --db-modal-footer-button-gap: var(--db-space-2);
+  --db-modal-close-offset: var(--db-space-4);
+  --db-modal-mobile-margin: var(--db-space-2);
+
+  /* Typography */
+  --db-modal-body-font-size: var(--db-font-size-base);
+}
+
+:where(:root), :where(.du-bois-light) {
+  /* Elevation */
+  --db-modal-shadow: var(--db-elevation-high);
+}
 
 :where(:root), :where(.du-bois-light) {
   /* Shape */
@@ -17291,7 +17907,83 @@ span.du-bois-light-typography-ellipsis-single-line {
   --db-overflow-menu-spacing: var(--db-space-1);
 }
 
+:where(:root), :where(.du-bois-light) {
+  /* Density */
+  --db-page-wrapper-spacing-horizontal: var(--db-space-4);
+}
+
+:where(:root), :where(.du-bois-light) {
+  /* Color */
+  --db-page-wrapper-surface: transparent;
+}
 
+/* PillControl is a Radix RadioGroup rendered as action-shaped pills, so its colors alias the v1
+ * --db-color-action-* semantics (as Button does) rather than the selection-toggle accent family.
+ * Declared under the theme classes too, so the var() chain re-resolves inside a `.du-bois-dark`
+ * subtree instead of freezing at the root values. */
+:where(:root), :where(.du-bois-light) {
+  /* Shape */
+  --db-pill-control-border-radius: var(--db-shape-pill);
+  --db-pill-control-border-width: 1px;
+
+  /* Color */
+  /* No v2 token holds the action-pill surface yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-pill-control-surface: var(--db-color-action-default-background-default);
+  --db-pill-control-surface-hover: var(--db-color-action-default-background-hover);
+  --db-pill-control-surface-active: var(--db-color-action-default-background-press);
+  --db-pill-control-surface-checked: var(--db-color-action-default-background-press);
+  --db-pill-control-surface-disabled: var(--db-color-action-disabled-background);
+
+  /* No v2 token holds the action-pill border yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-pill-control-border: var(--db-color-action-default-border-default);
+  --db-pill-control-border-hover: var(--db-color-action-link-hover);
+  --db-pill-control-border-active: var(--db-color-action-link-press);
+  --db-pill-control-border-checked: transparent;
+  --db-pill-control-border-checked-hover: var(--db-color-action-link-press);
+  --db-pill-control-border-disabled: var(--db-color-action-disabled-border);
+
+  /* No v2 token holds the action-pill text yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-pill-control-text: var(--db-color-text-primary);
+  --db-pill-control-text-hover: var(--db-color-action-default-text-hover);
+  --db-pill-control-text-active: var(--db-color-action-default-text-press);
+  --db-pill-control-text-checked: var(--db-color-action-default-text-press);
+  --db-pill-control-text-disabled: var(--db-color-action-disabled-text);
+
+  /* No v2 token holds the pill icon colors yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-pill-control-icon: var(--db-color-text-secondary);
+  --db-pill-control-icon-surface-hover: var(--db-color-action-icon-background-hover);
+  --db-pill-control-icon-surface-active: var(--db-color-action-icon-background-press);
+  --db-pill-control-icon-surface-checked: var(--db-color-action-icon-background-press);
+
+  --db-pill-control-focus-ring: var(--db-focus-ring-color);
+
+  /* Density */
+  --db-pill-control-size: var(--db-size-8);
+  --db-pill-control-size-small: var(--db-size-6);
+  --db-pill-control-size-large: calc(var(--db-size-10) * 1.1);
+  --db-pill-control-gap: var(--db-space-2);
+  --db-pill-control-padding-inline: var(--db-space-3);
+  --db-pill-control-padding-inline-small: var(--db-space-2);
+  --db-pill-control-padding-inline-large: var(--db-space-4);
+  --db-pill-control-padding-inline-start-large: calc(var(--db-space-3) / 2);
+  --db-pill-control-icon-gap: var(--db-space-1);
+  --db-pill-control-icon-gap-large: var(--db-space-2);
+  --db-pill-control-icon-surface-padding: var(--db-space-2);
+  --db-pill-control-focus-ring-width: var(--db-focus-ring-width);
+
+  /* Typography */
+  --db-pill-control-font-size: var(--db-font-size-base);
+  --db-pill-control-font-weight: var(--db-font-weight-normal);
+
+  /* Motion */
+  --db-pill-control-transition-duration: 200ms;
+}
+
+:where(:root), :where(.du-bois-light) {
+  /* Color */
+  /* No v2 token holds the large-size icon chip surface yet (v1 grey100). TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-pill-control-icon-surface: #e8ecf0;
+}
 
 /* Popover is a neutral-card member of the popup family: surface, text, border, and radius come
  * from --db-popup-*. Link, focus, and spacing are popover-specific and reference system tokens
@@ -17737,8 +18429,49 @@ span.du-bois-light-typography-ellipsis-single-line {
   margin-top: var(--db-space-2);
 }
 
+:where(:root), :where(.du-bois-light) {
+  /* 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;
+}
 
 
+:where(:root), :where(.du-bois-light) {
+  /* 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);
+}
 
 
 :where(:root), :where(.du-bois-light) {
@@ -17747,7 +18480,7 @@ span.du-bois-light-typography-ellipsis-single-line {
 
   /* Color */
   /* No v2 token holds the track + disabled-range surface yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
-  --db-slider-track-surface: #e8ecf0;
+  --db-slider-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;
@@ -17767,29 +18500,29 @@ span.du-bois-light-typography-ellipsis-single-line {
 :where(:root), :where(.du-bois-light) {
   /* Shape */
   /* TODO(FEINF-6505): adopt --db-shape-container-* once a 4px container radius exists; kept on --db-radius-sm to preserve 4px. */
-  --db-snackbar-border-radius: var(--db-radius-sm);
+  --db-snack-bar-border-radius: var(--db-radius-sm);
 
   /* Density */
-  --db-snackbar-spacing-vertical: var(--db-space-3);
-  --db-snackbar-spacing-horizontal: var(--db-space-4);
-  --db-snackbar-close-button-spacing: var(--db-space-2);
+  --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-snackbar-text: #ffffff;
+  --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-snackbar-close-icon: #e8ecf0;
-  --db-snackbar-close-icon-hover: #8acaff;
-  --db-snackbar-close-icon-active: #bae1fc;
+  --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-snackbar-surface: #11171c;
+  --db-snack-bar-surface: #11171c;
 
   /* Elevation */
-  --db-snackbar-shadow: var(--db-elevation-med);
+  --db-snack-bar-shadow: var(--db-elevation-med);
 }
 
 /* Spacer's height is a spacing step. The size prop (xs/sm/mid/md/lg) selects one component token,
@@ -18060,6 +18793,42 @@ span.du-bois-light-typography-ellipsis-single-line {
 }
 
 
+:where(:root), :where(.du-bois-light) {
+  /* Shape */
+  --db-toggle-button-border-radius: var(--action-border-radius, 4px);
+
+  /* Color */
+  --db-toggle-button-surface: transparent;
+  /* No v2 token holds the action surface tint yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-toggle-button-surface-hover: var(--db-color-action-default-background-hover);
+  --db-toggle-button-surface-selected: var(--db-color-action-default-background-press);
+  /* No v2 token holds the action text yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-toggle-button-text: var(--db-color-action-default-text-default);
+  --db-toggle-button-text-hover: var(--db-color-action-default-text-hover);
+  --db-toggle-button-text-selected: var(--db-color-action-default-text-press);
+  --db-toggle-button-text-disabled: var(--db-color-action-disabled-text);
+  /* No v2 token holds the off-state icon color yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-toggle-button-icon: var(--db-color-text-secondary);
+  /* No v2 token holds the action border yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-toggle-button-border: var(--db-color-action-default-border-default);
+  --db-toggle-button-border-hover: var(--db-color-action-default-border-hover);
+  --db-toggle-button-border-selected: var(--db-color-action-default-border-press);
+  --db-toggle-button-border-disabled: var(--db-color-action-disabled-border);
+  /* No v2 token holds the checkbox-glyph stroke yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
+  --db-toggle-button-icon-stroke: var(--db-color-border);
+
+  /* Typography */
+  --db-toggle-button-font-size: var(--db-font-size-base);
+
+  /* Density */
+  --db-toggle-button-border-width: 1px;
+  --db-toggle-button-height: var(--db-size-8);
+  --db-toggle-button-height-small: var(--db-size-6);
+  --db-toggle-button-padding-vertical: var(--db-space-1);
+  --db-toggle-button-padding-horizontal: var(--db-space-3);
+  --db-toggle-button-padding-horizontal-small: var(--db-space-2);
+  --db-toggle-button-icon-gap: var(--db-space-1);
+}
 
 :where(:root), :where(.du-bois-light) {
   /* Shape */
@@ -18109,4 +18878,3 @@ span.du-bois-light-typography-ellipsis-single-line {
   /* Elevation */
   --db-tooltip-shadow: var(--db-elevation-med);
 }
-