@zeyos/zx 4.2.0 → 4.3.0

package/src/components/modal/modal.js

@@ -1,5 +1,6 @@
 import { Component } from '../../core/component.js';
 import { h } from '../../core/dom.js';
+import { overlayHost } from '../../core/overlay-host.js';
 
 /**
  * @typedef {Object} ModalOptions
@@ -8,6 +9,7 @@ import { h } from '../../core/dom.js';
  * @property {boolean} [closable=true] Whether Escape may close the modal.
  * @property {boolean} [lightDismiss=false] Whether a backdrop click closes the modal.
  * @property {boolean} [destroyOnClose=false] Whether to destroy the modal after it closes.
+ * @property {Element|string|null} [scope=null] Element whose nearest Zx theme scope owns the overlay; defaults to the opener.
  * @property {(event: CustomEvent<Record<string, never>>) => void} [onopen] Open event listener.
  * @property {(event: CustomEvent<{result: unknown}>) => void} [onclose] Close event listener.
  * @property {(event: CustomEvent<Record<string, never>>) => void} [oncancel] Cancel event listener.
@@ -30,15 +32,19 @@ export class Modal extends Component {
     width: 'auto',
     closable: true,
     lightDismiss: false,
-    destroyOnClose: false
+    destroyOnClose: false,
+    scope: null
   };
 
-  #pendingResult;
-  #hasPendingResult = false;
+  /** @type {Map<number, {result: unknown}>} */
+  #pendingResults = new Map();
   #destroying = false;
+  #presentation = 0;
+  /** @type {number[]} */
+  #nativeClosingPresentations = [];
 
   /**
-   * Creates a modal appended to `document.body`.
+   * Creates a modal in the configured theme scope, or at document level when none is present.
    * @param {Element|string|null} [_target=null] Ignored; Modal always owns its root dialog.
    * @param {ModalOptions} [options={}] Modal options.
    */
@@ -52,14 +58,7 @@ export class Modal extends Component {
       if (!this.options.closable || cancelEvent.defaultPrevented) event.preventDefault();
     });
     this.listen(this.el, 'close', () => {
-      if (!this._isRealClose()) return;
-      this.el.dataset.state = 'closed';
-      delete this.el.dataset.zxOverlayOrder;
-      const result = this.#hasPendingResult ? this.#pendingResult : (this.el.returnValue || undefined);
-      this.#pendingResult = undefined;
-      this.#hasPendingResult = false;
-      this.emit('close', { result });
-      if (this.options.destroyOnClose && !this.#destroying) this.destroy();
+      this._settleClose(this.#nativeClosingPresentations.shift());
     });
     this.listen(this.el, 'click', (event) => {
       if (!this.options.lightDismiss || event.target !== this.el || !isBackdropClick(this.el, event)) return;
@@ -76,7 +75,7 @@ export class Modal extends Component {
    * @returns {Element}
    */
   mountTarget() {
-    return document.body;
+    return overlayHost(this.options.scope);
   }
 
   /**
@@ -87,17 +86,85 @@ export class Modal extends Component {
     this.el.showModal();
   }
 
+  /**
+   * Removes the dialog from its current presentation layer.
+   * Subclasses may replace native dialog presentation while preserving Modal lifecycle events.
+   * @param {string} [result=''] Native string return value.
+   * @param {number} [presentation=this.#presentation] Presentation generation being hidden.
+   * @returns {void}
+   */
+  _hide(result = '', presentation = this.#presentation) {
+    this.#nativeClosingPresentations.push(presentation);
+    try {
+      this.el.close(result);
+    } catch (error) {
+      this.#nativeClosingPresentations.pop();
+      throw error;
+    }
+  }
+
+  /**
+   * Shows a new presentation and gives it a generation of its own. Close events are queued by the
+   * platform, so the generation lets an event from an earlier presentation expire harmlessly if
+   * the same overlay has already reopened.
+   * @returns {void}
+   */
+  _present() {
+    this._show();
+    this.#presentation += 1;
+  }
+
+  /**
+   * Hides the current presentation and records which generation its queued close event belongs to.
+   * @param {string} [result=''] Native string return value.
+   * @returns {void}
+   */
+  _dismiss(result = '') {
+    this._hide(result, this.#presentation);
+  }
+
+  /**
+   * Reports whether the current presentation layer is visible.
+   * @returns {boolean}
+   */
+  _isShown() {
+    return this.el.open;
+  }
+
   /**
    * Whether an incoming `close` event is a real dismissal.
    *
-   * A dialog cannot move between the top layer and the page flow while it is open, so a subclass
-   * that re-hosts itself has to close and immediately reopen. `close` is dispatched in a queued
-   * task, not synchronously, so that stale event arrives once the dialog is already open again —
-   * late enough to clobber `data-state`, fire a `close` nobody asked for, and trip
-   * `destroyOnClose`. Returning false from an override drops it at the source instead.
+   * `close` is dispatched in a queued task, not synchronously. By the time it arrives the overlay
+   * may have reopened or crossed presentation layers, so only the event for the current hidden
+   * generation may settle state, emit lifecycle events, or trigger `destroyOnClose`.
+   * @param {number|undefined} closingPresentation Presentation that produced the event, if known.
    * @returns {boolean}
    */
-  _isRealClose() {
+  _isRealClose(closingPresentation) {
+    if (closingPresentation !== undefined && closingPresentation !== this.#presentation) return false;
+    return !this._isShown();
+  }
+
+  /**
+   * Settles one presentation's close without allowing a queued event to invalidate a newer one.
+   * Popover-based subclasses call this directly; native dialog events arrive through the listener.
+   * @param {number|undefined} closingPresentation Presentation that was hidden, if known.
+   * @returns {boolean} Whether this event closed the current presentation.
+   */
+  _settleClose(closingPresentation) {
+    if (!this._isRealClose(closingPresentation)) {
+      if (closingPresentation !== undefined) this.#pendingResults.delete(closingPresentation);
+      return false;
+    }
+    this.el.dataset.state = 'closed';
+    delete this.el.dataset.zxOverlayOrder;
+    const pending = closingPresentation === undefined
+      ? undefined
+      : this.#pendingResults.get(closingPresentation);
+    if (closingPresentation !== undefined) this.#pendingResults.delete(closingPresentation);
+    const result = pending ? pending.result : (this.el.returnValue || undefined);
+    this.emit('close', { result });
+    if (this.options.destroyOnClose && !this.#destroying) this.destroy();
     return true;
   }
 
@@ -121,10 +188,12 @@ export class Modal extends Component {
    */
   open() {
     if (this.isOpen()) return this;
+    const host = this.mountTarget();
+    if (this.el.parentElement !== host) host.append(this.el);
     this.el.dataset.zxOverlayOrder = String(nextOverlayOrder());
     this.el.returnValue = '';
     try {
-      this._show();
+      this._present();
     } catch (error) {
       delete this.el.dataset.zxOverlayOrder;
       throw error;
@@ -141,9 +210,14 @@ export class Modal extends Component {
    */
   close(result) {
     if (!this.isOpen()) return this;
-    this.#pendingResult = result;
-    this.#hasPendingResult = true;
-    this.el.close(typeof result === 'string' ? result : '');
+    const presentation = this.#presentation;
+    this.#pendingResults.set(presentation, { result });
+    try {
+      this._dismiss(typeof result === 'string' ? result : '');
+    } catch (error) {
+      this.#pendingResults.delete(presentation);
+      throw error;
+    }
     return this;
   }
 
@@ -162,7 +236,7 @@ export class Modal extends Component {
    * @returns {boolean}
    */
   isOpen() {
-    return this.el.open;
+    return this._isShown();
   }
 
   /**
@@ -172,7 +246,7 @@ export class Modal extends Component {
   destroy() {
     if (this.#destroying) return;
     this.#destroying = true;
-    if (this.isOpen()) this.el.close();
+    if (this.isOpen()) this._dismiss();
     super.destroy();
   }
 

package/src/components/select/select.css

@@ -98,10 +98,12 @@
   overflow: hidden;
   border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-md);
-  background: var(--zx-color-overlay-surface);
+  background-color: var(--zx-color-overlay-surface);
+  background-image: var(--zx-overlay-surface-image);
+  background-clip: padding-box;
   -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
   backdrop-filter: var(--zx-glass-filter-overlay);
-  box-shadow: var(--zx-glass-raised-shadow);
+  box-shadow: var(--zx-glass-overlay-shadow);
   color: var(--zx-color-text);
   padding: var(--zx-space-1);
 }
@@ -128,15 +130,15 @@
 }
 
 .zx-select__option[data-active="true"] {
-  background: var(--zx-color-bg-hover);
+  background: var(--zx-color-overlay-hover);
 }
 
 .zx-select__option:hover {
-  background: var(--zx-color-bg-hover);
+  background: var(--zx-color-overlay-hover);
 }
 
 .zx-select__option[aria-selected="true"] {
-  background: var(--zx-color-bg-selected);
+  background: var(--zx-color-overlay-selected);
 }
 
 .zx-select__option > .zx-icon {
@@ -148,7 +150,7 @@
   position: sticky;
   z-index: 1;
   inset-block-start: 0;
-  background: var(--zx-color-overlay-surface);
+  background: var(--zx-color-overlay-scrim);
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
   font-weight: 700;
@@ -174,7 +176,7 @@
 .zx-select__separator {
   block-size: 1px;
   margin: var(--zx-space-1) var(--zx-control-pad-x);
-  background: var(--zx-color-border);
+  background: var(--zx-color-overlay-divider);
 }
 
 .zx-select__empty {

package/src/components/sheet/sheet.css

@@ -12,7 +12,7 @@
   border-radius: 0;
   /* The header and footer stay put; `.zx-dialog__body` is what scrolls. */
   overflow: hidden;
-  box-shadow: var(--zx-glass-raised-shadow);
+  box-shadow: var(--zx-glass-panel-shadow);
 }
 
 /* Horizontal sheets: full height, sized across the inline axis. */
@@ -26,14 +26,14 @@
 .zx-sheet[data-side="start"] {
   inset-inline-start: 0;
   inset-inline-end: auto;
-  border-inline-end: 1px solid var(--zx-color-border);
+  border-inline-end: 1px solid var(--zx-color-overlay-border);
   --zx-sheet-enter: -100% 0;
 }
 
 .zx-sheet[data-side="end"] {
   inset-inline-start: auto;
   inset-inline-end: 0;
-  border-inline-start: 1px solid var(--zx-color-border);
+  border-inline-start: 1px solid var(--zx-color-overlay-border);
   --zx-sheet-enter: 100% 0;
 }
 
@@ -56,7 +56,7 @@
 .zx-sheet[data-side="top"] {
   inset-block-start: 0;
   inset-block-end: auto;
-  border-block-end: 1px solid var(--zx-color-border);
+  border-block-end: 1px solid var(--zx-color-overlay-border);
   border-end-start-radius: var(--zx-sheet-radius, var(--zx-radius-xl));
   border-end-end-radius: var(--zx-sheet-radius, var(--zx-radius-xl));
   --zx-sheet-enter: 0 -100%;
@@ -65,7 +65,7 @@
 .zx-sheet[data-side="bottom"] {
   inset-block-start: auto;
   inset-block-end: 0;
-  border-block-start: 1px solid var(--zx-color-border);
+  border-block-start: 1px solid var(--zx-color-overlay-border);
   border-start-start-radius: var(--zx-sheet-radius, var(--zx-radius-xl));
   border-start-end-radius: var(--zx-sheet-radius, var(--zx-radius-xl));
   --zx-sheet-enter: 0 100%;
@@ -80,9 +80,26 @@
 }
 
 .zx-sheet[data-backdrop="blur"]::backdrop {
+  -webkit-backdrop-filter: blur(var(--zx-overlay-blur));
   backdrop-filter: blur(var(--zx-overlay-blur));
 }
 
+/* A non-modal Sheet uses the popover top layer to escape transformed/clipped application shells,
+   but it must not gain a visual or interactive modal backdrop in the process. */
+.zx-sheet[data-modality="none"]::backdrop,
+.zx-sheet[data-modality="trap-focus"]::backdrop {
+  background: transparent;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
+@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
+  .zx-sheet[data-backdrop="blur"]::backdrop {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}
+
 /*
  * Entry and exit both animate. A `<dialog>` normally cannot animate out — `close()` applies
  * `display: none` immediately — so `display` and `overlay` transition with `allow-discrete`, which
@@ -103,13 +120,14 @@
     animation: none;
   }
 
-  .zx-sheet:not([open]) {
+  .zx-sheet:not([open]):not(:popover-open) {
     translate: var(--zx-sheet-enter, 0 0);
     opacity: 0;
   }
 
   @starting-style {
-    .zx-sheet[open] {
+    .zx-sheet[open],
+    .zx-sheet:popover-open {
       translate: var(--zx-sheet-enter, 0 0);
       opacity: 0;
     }

package/src/components/sheet/sheet.js

@@ -45,6 +45,7 @@ const GROW_SIGN = Object.freeze({ start: 1, end: -1, top: 1, bottom: -1 });
  * @property {boolean} [lightDismiss=true] Whether a click outside closes the sheet — the backdrop
  *   when modal, a document-level pointer press when not.
  * @property {boolean} [destroyOnClose=false] Whether to destroy the sheet after it closes.
+ * @property {Element|string|null} [scope=null] Element whose nearest Zx theme scope owns a floating sheet; defaults to the opener.
  * @property {(event: CustomEvent<Record<string, never>>) => void} [onopen] Open event listener.
  * @property {(event: CustomEvent<{result: unknown}>) => void} [onclose] Close event listener.
  * @property {(event: CustomEvent<Record<string, never>>) => void} [oncancel] Cancel event listener.
@@ -61,9 +62,11 @@ const GROW_SIGN = Object.freeze({ start: 1, end: -1, top: 1, bottom: -1 });
  *
  * Modality is a three-way choice rather than a boolean because the three real behaviours do not
  * collapse into two: a modal sheet delegates focus containment, page inertness, and Escape to the
- * browser via `showModal()`; the other two open with `show()` and re-implement only what they still
- * want. That is also why `backdrop` applies only to `modal: true` — `::backdrop` does not render
- * for a non-modal dialog, and painting a fake one would make a sheet look blocking while it is not.
+ * browser via `showModal()`; floating non-modal sheets use the manual Popover top layer so a
+ * transformed or clipped application scope cannot displace them, and re-implement only what they
+ * still want. Docked sheets remain native non-modal dialogs in flow. That is also why `backdrop`
+ * applies only to `modal: true`: painting one for either non-modal mode would make the sheet look
+ * blocking while it is not.
  * @fires Sheet#open
  * @fires Sheet#close
  * @fires Sheet#cancel
@@ -109,7 +112,6 @@ export class Sheet extends Dialog {
      * field would be undefined at best and a private one would throw.
      */
     this._dock = null;
-    this._handoff = false;
     this.setSide(this.options.side);
     this.el.dataset.backdrop = BACKDROPS.has(this.options.backdrop) ? this.options.backdrop : 'dim';
     this.el.dataset.modality = modality(this.options.modal);
@@ -318,7 +320,7 @@ export class Sheet extends Dialog {
    * @returns {Element}
    */
   mountTarget() {
-    return this._dock?.el ?? document.body;
+    return this._dock?.el ?? super.mountTarget();
   }
 
   /**
@@ -347,35 +349,23 @@ export class Sheet extends Dialog {
   /**
    * Moves the dialog to its current mount and, when it was open, reopens it there.
    *
-   * The close is unavoidable — a dialog cannot cross between the top layer and the flow while
-   * open — but it is invisible: `_isRealClose()` drops the stale event, and reopening bypasses
-   * `open()` so no lifecycle event is emitted for what is only a change of address.
+   * The close is unavoidable — a dialog cannot cross between presentation layers while open —
+   * but it is invisible: Modal's presentation generation drops the stale event, and reopening
+   * bypasses `open()` so no lifecycle event is emitted for what is only a change of address.
    * @returns {void}
    */
   _rehost() {
     const wasOpen = this.isOpen();
-    if (wasOpen) {
-      this._handoff = true;
-      /** @type {HTMLDialogElement} */ (this.el).close();
-    }
+    if (wasOpen) this._dismiss();
     this.mountTarget().append(this.el);
     if (!wasOpen) return;
     this.el.returnValue = '';
-    this._show();
+    this._present();
     this.el.dataset.state = 'open';
     if (this._dock) delete /** @type {HTMLElement} */ (this.el).dataset.zxOverlayOrder;
     else this.el.dataset.zxOverlayOrder = String(nextOverlayOrder());
   }
 
-  /**
-   * Drops the stale `close` a re-hosting handoff leaves behind.
-   * @returns {boolean}
-   */
-  _isRealClose() {
-    if (!this._handoff) return true;
-    this._handoff = false;
-    return false;
-  }
 
   /**
    * Opens the sheet, trapping focus first where the modality asks for it.
@@ -465,10 +455,40 @@ export class Sheet extends Dialog {
    */
   _show() {
     if (this.options.modal === true && !this._dock) {
+      this.el.removeAttribute('popover');
+      this.el.removeAttribute('aria-modal');
       super._show();
       return;
     }
-    /** @type {HTMLDialogElement} */ (this.el).show();
+    this.el.setAttribute('aria-modal', 'false');
+    if (this._dock) {
+      this.el.removeAttribute('popover');
+      /** @type {HTMLDialogElement} */ (this.el).show();
+      return;
+    }
+    this.el.setAttribute('popover', 'manual');
+    /** @type {HTMLElement} */ (this.el).showPopover();
+  }
+
+  /**
+   * Hides a native dialog or a non-modal Sheet promoted through the popover top layer.
+   * @param {string} [result=''] Native string return value.
+   * @param {number} [presentation] Presentation generation being hidden.
+   * @returns {void}
+   */
+  _hide(result = '', presentation) {
+    if (!this.el.matches(':popover-open')) {
+      super._hide(result, presentation);
+      return;
+    }
+    this.el.returnValue = result;
+    /** @type {HTMLElement} */ (this.el).hidePopover();
+    queueMicrotask(() => this._settleClose(presentation));
+  }
+
+  /** @returns {boolean} */
+  _isShown() {
+    return this.el.matches(':popover-open') || super._isShown();
   }
 
   /**

package/src/components/table/table.css

@@ -35,10 +35,12 @@
   min-inline-size: 190px;
   border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-md);
-  background: var(--zx-color-overlay-surface);
+  background-color: var(--zx-color-overlay-surface);
+  background-image: var(--zx-overlay-surface-image);
+  background-clip: padding-box;
   -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
   backdrop-filter: var(--zx-glass-filter-overlay);
-  box-shadow: var(--zx-glass-raised-shadow);
+  box-shadow: var(--zx-glass-overlay-shadow);
   padding: var(--zx-space-2);
   max-block-size: min(360px, 70vh);
   overflow: auto;
@@ -64,7 +66,7 @@
   padding-inline: var(--zx-space-2);
 }
 
-.zx-table__column-option:hover { background: var(--zx-color-bg-hover); }
+.zx-table__column-option:hover { background: var(--zx-color-overlay-hover); }
 
 .zx-table__column-option > label,
 .zx-table__column-label {

package/src/components/tag-picker/tag-picker.css

@@ -124,10 +124,12 @@
   overflow: hidden;
   border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-md);
-  background: var(--zx-color-overlay-surface);
+  background-color: var(--zx-color-overlay-surface);
+  background-image: var(--zx-overlay-surface-image);
+  background-clip: padding-box;
   -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
   backdrop-filter: var(--zx-glass-filter-overlay);
-  box-shadow: var(--zx-glass-raised-shadow);
+  box-shadow: var(--zx-glass-overlay-shadow);
   color: var(--zx-color-text);
   padding: var(--zx-space-1);
 }
@@ -158,7 +160,7 @@
 }
 
 .zx-tag-picker__option[data-active] {
-  background: var(--zx-color-bg-hover);
+  background: var(--zx-color-overlay-hover);
 }
 
 .zx-tag-picker__option[aria-selected="true"] {

package/src/components/tooltip/tooltip.css

@@ -8,10 +8,12 @@
   max-inline-size: var(--zx-tooltip-max-inline-size, 260px);
   border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-md);
-  background: var(--zx-color-overlay-surface);
+  background-color: var(--zx-color-overlay-surface);
+  background-image: var(--zx-overlay-surface-image);
+  background-clip: padding-box;
   -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
   backdrop-filter: var(--zx-glass-filter-overlay);
-  box-shadow: var(--zx-glass-raised-shadow);
+  box-shadow: var(--zx-glass-overlay-shadow);
   padding: var(--zx-space-1) var(--zx-space-2);
   color: var(--zx-color-text);
   font-size: var(--zx-text-sm);

package/src/components/tooltip/tooltip.js

@@ -1,5 +1,6 @@
 import { Component } from '../../core/component.js';
 import { h, resolveElement } from '../../core/dom.js';
+import { overlayHost } from '../../core/overlay-host.js';
 import { position } from '../../core/position.js';
 import { uid } from '../../core/util.js';
 
@@ -95,6 +96,7 @@ export class Tooltip extends Component {
     super(null, options);
 
     this.#anchor = resolved;
+    overlayHost(resolved).append(this.el);
     this.#content = this.options.content;
     this.#disabled = Boolean(this.options.disabled);
     this.#describedBy = resolved.getAttribute('aria-describedby');
@@ -154,7 +156,6 @@ export class Tooltip extends Component {
       popover: 'manual'
     });
     panel.dataset.state = 'closed';
-    document.body.append(panel);
     return panel;
   }
 
@@ -167,6 +168,8 @@ export class Tooltip extends Component {
   show() {
     if (this.#destroyed || this.#disabled || this.isOpen()) return this;
     this.#cancelTimers();
+    const host = overlayHost(this.#anchor);
+    if (this.el.parentElement !== host) host.append(this.el);
     const node = resolveContent(this.#content);
     if (node === null) return this;
 

package/src/core/overlay-host.js

@@ -0,0 +1,23 @@
+import { resolveElement } from './dom.js';
+
+const SCOPE_SELECTOR = '.zx-scope, [data-zx-theme], [data-zx-density], [data-zx-preset]';
+
+/**
+ * Finds the closest styling scope for a top-layer element.
+ *
+ * Popovers and dialogs escape clipping even when their DOM parent is inside an application shell,
+ * so keeping them below that parent preserves inherited theme, density, material, and product
+ * token overrides without sacrificing top-layer behaviour. The document body remains the safe
+ * fallback for unscoped applications.
+ *
+ * @param {Element|string|null} [source=null] Element or selector whose styling scope should own the overlay.
+ * @returns {Element}
+ */
+export function overlayHost(source = null) {
+  const context = source == null
+    ? (document.activeElement instanceof Element ? document.activeElement : null)
+    : resolveElement(source);
+  const scope = context?.closest?.(SCOPE_SELECTOR) ?? null;
+  if (!scope || scope === document.documentElement || scope === document.body) return document.body;
+  return scope;
+}

package/styles/tokens/dark.css

@@ -19,6 +19,8 @@
   --zx-color-bg-hover: color-mix(in srgb, var(--zx-gray-0) 8%, transparent);
   --zx-color-bg-selected: color-mix(in srgb, var(--zx-accent-400) 18%, var(--zx-gray-900));
   --zx-color-bg-backdrop: color-mix(in srgb, var(--zx-gray-950) 75%, transparent);
+  --zx-color-overlay-base: color-mix(in srgb, var(--zx-color-bg-raised) 42%, var(--zx-color-bg-page));
+  --zx-color-overlay-backdrop: color-mix(in srgb, var(--zx-gray-950) 38%, transparent);
   --zx-color-border: color-mix(in srgb, var(--zx-gray-0) 10%, transparent);
   --zx-color-border-strong: color-mix(in srgb, var(--zx-gray-0) 28%, transparent);
   --zx-color-border-control: color-mix(in srgb, var(--zx-gray-0) 15%, transparent);
@@ -57,6 +59,8 @@
     --zx-color-bg-hover: color-mix(in srgb, var(--zx-gray-0) 8%, transparent);
     --zx-color-bg-selected: color-mix(in srgb, var(--zx-accent-400) 18%, var(--zx-gray-900));
     --zx-color-bg-backdrop: color-mix(in srgb, var(--zx-gray-950) 75%, transparent);
+    --zx-color-overlay-base: color-mix(in srgb, var(--zx-color-bg-raised) 42%, var(--zx-color-bg-page));
+    --zx-color-overlay-backdrop: color-mix(in srgb, var(--zx-gray-950) 38%, transparent);
     --zx-color-border: color-mix(in srgb, var(--zx-gray-0) 10%, transparent);
     --zx-color-border-strong: color-mix(in srgb, var(--zx-gray-0) 28%, transparent);
     --zx-color-border-control: color-mix(in srgb, var(--zx-gray-0) 15%, transparent);