@zeyos/zx 4.1.1 → 4.3.0

package/src/components/launcher/launcher.css

@@ -1,16 +1,30 @@
 .zx-launcher {
   inline-size: min(760px, calc(100vw - (2 * var(--zx-space-4))));
   max-block-size: min(720px, calc(100vh - (2 * var(--zx-space-6))));
-  border: 1px solid var(--zx-color-border);
+  border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-xl);
-  background: var(--zx-color-bg-raised);
-  box-shadow: var(--zx-overlay-shadow);
+  background-color: var(--zx-color-overlay-panel);
+  background-image: var(--zx-overlay-panel-image);
+  background-clip: padding-box;
+  -webkit-backdrop-filter: var(--zx-glass-filter-panel);
+  backdrop-filter: var(--zx-glass-filter-panel);
+  box-shadow: var(--zx-glass-panel-shadow);
   color: var(--zx-color-text);
   padding: 0;
 }
 
+@media (prefers-reduced-transparency: reduce) {
+  .zx-launcher {
+    border-color: var(--zx-color-border);
+    background: var(--zx-color-bg-raised);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    box-shadow: var(--zx-overlay-shadow);
+  }
+}
+
 .zx-launcher::backdrop {
-  background: var(--zx-color-bg-backdrop);
+  background: var(--zx-color-overlay-backdrop);
 }
 
 .zx-launcher__surface {
@@ -24,7 +38,7 @@
   grid-template-columns: auto minmax(0, 1fr) auto auto;
   align-items: center;
   gap: var(--zx-space-3);
-  border-block-end: 1px solid var(--zx-color-border);
+  border-block-end: 1px solid var(--zx-color-overlay-divider);
   padding: var(--zx-space-3) var(--zx-space-4);
 }
 
@@ -117,11 +131,12 @@
 
 .zx-launcher__option[aria-selected="true"],
 .zx-launcher__option:hover {
-  background: var(--zx-color-bg-hover);
+  background: var(--zx-color-overlay-hover);
 }
 
 .zx-launcher__option[aria-current="page"] {
-  box-shadow: inset 2px 0 var(--zx-color-accent);
+  background: var(--zx-color-overlay-selected);
+  color: var(--zx-color-accent);
 }
 
 .zx-launcher__option[data-kind="application"] {
@@ -135,7 +150,7 @@
 }
 
 .zx-launcher__option[data-kind="application"][aria-current="page"] {
-  box-shadow: inset 0 -2px var(--zx-color-accent);
+  background: var(--zx-color-overlay-selected);
 }
 
 .zx-launcher__option[data-kind="application"] .zx-launcher__icon {
@@ -174,7 +189,7 @@
   justify-content: end;
   gap: var(--zx-space-4);
   padding: var(--zx-space-2) var(--zx-space-4);
-  border-block-start: 1px solid var(--zx-color-border);
+  border-block-start: 1px solid var(--zx-color-overlay-divider);
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
 }

package/src/components/launcher/launcher.js

@@ -1,6 +1,7 @@
 import { Component } from '../../core/component.js';
 import { h, safeHref } from '../../core/dom.js';
 import { icon } from '../../core/icons.js';
+import { overlayHost } from '../../core/overlay-host.js';
 import { uid } from '../../core/util.js';
 
 /**
@@ -49,6 +50,7 @@ import { uid } from '../../core/util.js';
  * @property {string} [loadingText='Searching…'] Loading-state text.
  * @property {'mod+k'|false} [shortcut='mod+k'] Optional global keyboard shortcut.
  * @property {false|{move?: string, open?: string, close?: string}} [hints] Visible keyboard hints, or false.
+ * @property {Element|string|null} [scope=null] Element whose nearest Zx theme scope owns an internally created launcher; defaults to the opener.
  * @property {(event: CustomEvent<LauncherSelectDetail>) => void} [onselect] Preventable selection listener.
  * @property {(event: CustomEvent<{query: string}>) => void} [onquery] Query-change listener.
  * @property {(event: CustomEvent<Record<string, never>>) => void} [onopen] Open listener.
@@ -85,7 +87,8 @@ export class Launcher extends Component {
     emptyText: 'No results',
     loadingText: 'Searching…',
     shortcut: 'mod+k',
-    hints: { move: 'Move', open: 'Open', close: 'Close' }
+    hints: { move: 'Move', open: 'Open', close: 'Close' },
+    scope: null
   };
 
   /**
@@ -172,7 +175,7 @@ export class Launcher extends Component {
       results,
       footer));
     dialog.dataset.state = 'closed';
-    if (this._createdRoot) document.body.append(dialog);
+    if (this._createdRoot) overlayHost(this.options.scope).append(dialog);
 
     this.listen(input, 'input', () => {
       this._query = /** @type {HTMLInputElement} */ (input).value;
@@ -212,6 +215,10 @@ export class Launcher extends Component {
   /** Opens the launcher and focuses/selects its query. @returns {this} @fires Launcher#open */
   open() {
     if (this.isOpen() || this._destroyed) return this;
+    if (this._createdRoot) {
+      const host = overlayHost(this.options.scope);
+      if (this.el.parentElement !== host) host.append(this.el);
+    }
     this.el.showModal();
     this.el.dataset.state = 'open';
     this.refs.input.setAttribute('aria-expanded', 'true');

package/src/components/master-panel/master-panel.css

@@ -6,7 +6,7 @@
   overflow: hidden;
   border: 1px solid var(--zx-color-border);
   border-radius: var(--zx-radius-lg);
-  background: var(--zx-color-bg-surface);
+  background: var(--zx-color-glass-chrome);
 }
 
 .zx-master-panel__header {
@@ -15,9 +15,9 @@
   align-items: center;
   gap: var(--zx-space-4);
   min-block-size: calc(var(--zx-control-height) + var(--zx-space-4));
-  border-block-start: 4px solid var(--zx-master-panel-accent, var(--zx-module-default));
   border-block-end: 1px solid var(--zx-color-border);
-  background: var(--zx-color-bg-raised);
+  background: var(--zx-color-glass-chrome);
+  box-shadow: var(--zx-glass-chrome-shadow);
   padding: var(--zx-space-2) var(--zx-space-4);
 }
 
@@ -49,3 +49,14 @@
   padding: var(--zx-space-3) var(--zx-space-4);
   color: var(--zx-color-text-muted);
 }
+
+@media (prefers-reduced-transparency: reduce) {
+  .zx-master-panel {
+    background: var(--zx-color-bg-surface);
+  }
+
+  .zx-master-panel__header {
+    background: var(--zx-color-bg-raised);
+    box-shadow: none;
+  }
+}

package/src/components/menu-button/menu-button.css

@@ -16,15 +16,15 @@
   gap: var(--zx-space-2);
   inline-size: 100%;
   min-block-size: var(--zx-control-height);
-  border-color: var(--zx-color-bg-raised);
-  background: var(--zx-color-bg-raised);
+  border-color: transparent;
+  background: transparent;
   padding-inline: var(--zx-control-pad-x);
   text-align: start;
 }
 
 .zx-menu-button__item:hover,
 .zx-menu-button__item:focus-visible {
-  background: var(--zx-color-bg-hover);
+  background: var(--zx-color-overlay-hover);
 }
 
 .zx-menu-button__item[data-danger="true"] {
@@ -45,5 +45,5 @@
 .zx-menu-button__separator {
   block-size: 1px;
   margin: var(--zx-space-1) var(--zx-space-2);
-  background: var(--zx-color-border);
+  background: var(--zx-color-overlay-divider);
 }

package/src/components/message/message.css

@@ -32,11 +32,10 @@
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: start;
   gap: var(--zx-space-3);
-  border: 1px solid var(--zx-color-border);
-  border-inline-start: 4px solid var(--zx-message-kind);
+  border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-md);
   background: var(--zx-color-info-bg);
-  box-shadow: var(--zx-overlay-shadow);
+  box-shadow: inset 0 0 0 1px var(--zx-message-kind), var(--zx-glass-raised-shadow);
   padding: var(--zx-space-3);
   color: var(--zx-color-text);
 }
@@ -56,31 +55,24 @@
   background: var(--zx-color-danger-bg);
 }
 
-@supports (backdrop-filter: blur(1px)) {
+@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
   .zx-message__toast {
-    background: color-mix(in srgb, var(--zx-color-info-bg) 38%, var(--zx-color-glass-surface));
-    -webkit-backdrop-filter: blur(var(--zx-glass-blur)) saturate(var(--zx-glass-saturation));
-    backdrop-filter: blur(var(--zx-glass-blur)) saturate(var(--zx-glass-saturation));
-    box-shadow: var(--zx-glass-raised-shadow);
-  }
-
-  .zx-message__toast[data-kind="success"] {
-    background: color-mix(in srgb, var(--zx-color-success-bg) 38%, var(--zx-color-glass-surface));
-  }
-
-  .zx-message__toast[data-kind="warning"] {
-    background: color-mix(in srgb, var(--zx-color-warning-bg) 38%, var(--zx-color-glass-surface));
-  }
-
-  .zx-message__toast[data-kind="error"] {
-    background: color-mix(in srgb, var(--zx-color-danger-bg) 38%, var(--zx-color-glass-surface));
+    border-color: color-mix(in srgb, var(--zx-message-kind) 28%, var(--zx-color-overlay-border));
+    background-color: var(--zx-color-overlay-surface);
+    background-image: var(--zx-overlay-toast-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-overlay-shadow);
   }
 }
 
 @media (prefers-reduced-transparency: reduce) {
   .zx-message__toast {
+    border-color: var(--zx-color-border);
     -webkit-backdrop-filter: none;
     backdrop-filter: none;
+    box-shadow: var(--zx-overlay-shadow);
   }
   .zx-message__toast[data-kind="info"] { background: var(--zx-color-info-bg); }
   .zx-message__toast[data-kind="success"] { background: var(--zx-color-success-bg); }
@@ -110,7 +102,7 @@
   block-size: 4px;
   margin-block-start: var(--zx-space-2);
   border-radius: var(--zx-radius-full);
-  background: var(--zx-color-border);
+  background: var(--zx-color-overlay-divider);
 }
 
 .zx-message__progress-fill {

package/src/components/message/message.js

@@ -1,6 +1,7 @@
 import { Component } from '../../core/component.js';
 import { h } from '../../core/dom.js';
 import { icon } from '../../core/icons.js';
+import { overlayHost } from '../../core/overlay-host.js';
 
 /** @typedef {'info'|'success'|'warning'|'error'} MessageKind */
 
@@ -9,6 +10,7 @@ import { icon } from '../../core/icons.js';
  * @property {MessageKind|'danger'} [kind='info'] Message intent (`danger` aliases `error`).
  * @property {number} [timeout=4000] Auto-dismiss delay in milliseconds; zero persists.
  * @property {boolean} [closable=true] Whether to render a close button.
+ * @property {Element|string|null} [scope=null] Element whose nearest Zx theme scope owns a floating toast.
  */
 
 /**
@@ -133,8 +135,8 @@ export class Message extends Component {
     maxVisible: 5
   };
 
-  /** @type {Message|null} */
-  static #floating = null;
+  /** @type {WeakMap<Element, Message>} */
+  static #floating = new WeakMap();
 
   /** @returns {HTMLElement} */
   render() {
@@ -217,16 +219,17 @@ export class Message extends Component {
    * @returns {MessageHandle}
    */
   static show(msg, options = {}) {
-    return this.#floatingRegion().show(msg, options);
+    return this.#floatingRegion(options.scope).show(msg, options);
   }
 
   /**
    * Shows a floating progress status.
    * @param {string} text Initial status text.
+   * @param {{scope?: Element|string|null}} [options={}] Floating-region scope.
    * @returns {ProgressHandle}
    */
-  static progress(text) {
-    return this.#floatingRegion()._progress(text);
+  static progress(text, options = {}) {
+    return this.#floatingRegion(options.scope)._progress(text);
   }
 
   /** @returns {void} */
@@ -414,19 +417,22 @@ export class Message extends Component {
     this._queue.remove(entry);
   }
 
-  /** @returns {Message} */
-  static #floatingRegion() {
-    if (this.#floating) return this.#floating;
+  /** @param {Element|string|null|undefined} scope @returns {Message} */
+  static #floatingRegion(scope) {
+    const host = overlayHost(scope ?? null);
+    const existing = this.#floating.get(host);
+    if (existing) return existing;
     const region = h('div', {
       class: 'zx-message-region',
       popover: 'manual',
       role: 'status',
       ariaLive: 'polite'
     });
-    document.body.append(region);
-    this.#floating = new Message(region);
+    host.append(region);
+    const floating = new Message(region);
+    this.#floating.set(host, floating);
     if (typeof region.showPopover === 'function') region.showPopover();
-    return this.#floating;
+    return floating;
   }
 }
 

package/src/components/modal/modal.css

@@ -2,16 +2,30 @@
   max-inline-size: calc(100vw - (2 * var(--zx-space-4)));
   max-block-size: calc(100vh - (2 * var(--zx-space-4)));
   overflow: auto;
-  border: 1px solid var(--zx-color-border);
+  border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-lg);
-  background: var(--zx-color-bg-raised);
-  box-shadow: var(--zx-overlay-shadow);
+  background-color: var(--zx-color-overlay-panel);
+  background-image: var(--zx-overlay-panel-image);
+  background-clip: padding-box;
+  -webkit-backdrop-filter: var(--zx-glass-filter-panel);
+  backdrop-filter: var(--zx-glass-filter-panel);
+  box-shadow: var(--zx-glass-panel-shadow);
   color: var(--zx-color-text);
   padding: 0;
 }
 
+@media (prefers-reduced-transparency: reduce) {
+  .zx-modal {
+    border-color: var(--zx-color-border);
+    background: var(--zx-color-bg-raised);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    box-shadow: var(--zx-overlay-shadow);
+  }
+}
+
 .zx-modal::backdrop {
-  background: var(--zx-color-bg-backdrop);
+  background: var(--zx-color-overlay-backdrop);
 }
 
 .zx-modal__content {
@@ -22,7 +36,7 @@
  * `:modal` rather than `[open]`: only a dialog opened with `showModal()` blocks the page, and a
  * non-modal one (Sheet's `modal: false`) must leave the page scrollable behind it.
  */
-body:has(> .zx-modal:modal) {
+body:has(.zx-modal:modal) {
   overflow: hidden;
   overscroll-behavior: none;
 }

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/navigation-bar/navigation-bar.css

@@ -15,11 +15,13 @@
   min-inline-size: 0;
   align-items: center;
   gap: var(--zx-space-3);
-  border: 1px solid var(--zx-color-border);
+  border: 1px solid var(--zx-color-glass-border);
   border-radius: var(--zx-radius-lg);
-  background: var(--zx-color-bg-raised);
+  background: var(--zx-color-glass-chrome);
   padding: var(--zx-space-2) var(--zx-space-3);
-  box-shadow: var(--zx-overlay-shadow);
+  -webkit-backdrop-filter: var(--zx-glass-filter-chrome);
+  backdrop-filter: var(--zx-glass-filter-chrome);
+  box-shadow: var(--zx-glass-chrome-shadow);
 }
 
 .zx-navigation-bar__brand {
@@ -113,9 +115,19 @@
 
 .zx-navigation-bar__panels {
   border: 1px solid var(--zx-color-border);
-  border-block-start: 0;
-  border-radius: 0 0 var(--zx-radius-lg) var(--zx-radius-lg);
+  border-radius: var(--zx-radius-lg);
   background: var(--zx-color-bg-surface);
+  margin-block-start: var(--zx-space-2);
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .zx-navigation-bar__bar {
+    border-color: var(--zx-color-border);
+    background: var(--zx-color-bg-raised);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    box-shadow: var(--zx-overlay-shadow);
+  }
 }
 
 .zx-navigation-bar__panel {

package/src/components/panel/panel.css

@@ -3,7 +3,7 @@
   border: 1px solid var(--zx-color-border);
   border-radius: var(--zx-radius-lg);
   background: var(--zx-color-bg-surface);
-  box-shadow: var(--zx-overlay-shadow);
+  box-shadow: var(--zx-shadow-1);
 }
 
 /* The header is a row, not one big button: the collapse control takes the title area and the
@@ -13,7 +13,15 @@
   align-items: center;
   gap: var(--zx-space-2);
   min-block-size: var(--zx-control-height);
-  background: var(--zx-panel-header-bg, var(--zx-color-bg-raised));
+  background: var(--zx-panel-header-bg, var(--zx-color-glass-chrome));
+  box-shadow: var(--zx-glass-chrome-shadow);
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .zx-panel__header {
+    background: var(--zx-panel-header-bg, var(--zx-color-bg-raised));
+    box-shadow: none;
+  }
 }
 
 .zx-panel__toggle {