@zeyos/zx 4.2.0 → 4.3.0

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

@@ -29,7 +29,7 @@
 
 .zx-context-menu__item:hover,
 .zx-context-menu__item:focus-visible {
-  background: var(--zx-color-bg-hover);
+  background: var(--zx-color-overlay-hover);
 }
 
 .zx-context-menu__item[data-danger="true"] {
@@ -50,5 +50,5 @@
 .zx-context-menu__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/context-menu/context-menu.js

@@ -82,7 +82,11 @@ export class ContextMenu extends Component {
     this.#target = resolved;
     document.body.append(this.el);
 
-    this.#dropdown = new Dropdown(this.el, { openOn: 'manual', placement: 'bottom-start' });
+    this.#dropdown = new Dropdown(this.el, {
+      openOn: 'manual',
+      placement: 'bottom-start',
+      scope: resolved
+    });
     this.#panel = this.#dropdown.getPanel();
     this.#panel.classList.add('zx-context-menu');
     this.#panel.setAttribute('role', 'menu');

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

@@ -31,14 +31,14 @@
   place-items: center;
   min-inline-size: var(--zx-control-height);
   padding: 0;
-  border-color: var(--zx-color-bg-surface);
-  background: inherit;
+  border-color: transparent;
+  background: transparent;
 }
 
 .zx-date-picker__heading {
   overflow: hidden;
-  border-color: var(--zx-color-bg-surface);
-  background: inherit;
+  border-color: transparent;
+  background: transparent;
   font-weight: 650;
   text-overflow: ellipsis;
   text-wrap: nowrap;
@@ -76,9 +76,9 @@
   min-inline-size: 0;
   min-block-size: var(--zx-control-height);
   padding: 0;
-  border-color: var(--zx-color-bg-surface);
+  border-color: transparent;
   border-radius: var(--zx-radius-md);
-  background: inherit;
+  background: transparent;
   font-variant-numeric: tabular-nums;
 }
 
@@ -125,10 +125,12 @@
   inset: var(--zx-space-3);
   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-3);
 }
 
@@ -157,11 +159,16 @@
 .zx-month-picker__month {
   min-inline-size: 0;
   padding-inline: var(--zx-space-1);
-  border-color: var(--zx-color-bg-surface);
-  background: inherit;
+  border-color: transparent;
+  background: transparent;
+}
+
+.zx-date-picker__quick-month[aria-selected="true"] {
+  background: var(--zx-color-overlay-selected);
+  color: var(--zx-color-accent);
+  font-weight: 700;
 }
 
-.zx-date-picker__quick-month[aria-selected="true"],
 .zx-month-picker__month[aria-selected="true"] {
   background: var(--zx-color-bg-selected);
   color: var(--zx-color-accent);

package/src/components/datebox/date-range-box.css

@@ -124,10 +124,12 @@
 .zx-date-range-box__popover .zx-date-range-picker__surface {
   max-inline-size: none;
   border-color: var(--zx-color-overlay-border);
-  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);
 }
 
 @media (prefers-reduced-transparency: reduce) {

package/src/components/datebox/datebox.css

@@ -104,10 +104,12 @@
 
 .zx-datebox__popover .zx-date-picker__surface {
   border-color: var(--zx-color-overlay-border);
-  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);
 }
 
 @media (prefers-reduced-transparency: reduce) {

package/src/components/dialog/dialog.css

@@ -3,7 +3,8 @@
   padding: 0;
 }
 
-.zx-dialog[open] {
+.zx-dialog[open],
+.zx-dialog:popover-open {
   display: grid;
 }
 
@@ -17,7 +18,7 @@
 
 .zx-dialog__header {
   justify-content: space-between;
-  border-block-end: 1px solid var(--zx-color-border);
+  border-block-end: 1px solid var(--zx-color-overlay-divider);
 }
 
 .zx-dialog__title {
@@ -40,7 +41,7 @@
 
 .zx-dialog__footer {
   justify-content: flex-end;
-  border-block-start: 1px solid var(--zx-color-border);
+  border-block-start: 1px solid var(--zx-color-overlay-divider);
 }
 
 .zx-dialog__footer[hidden] {

package/src/components/dialog/dialog.js

@@ -22,6 +22,7 @@ const FOCUSABLE_SELECTOR = [
  * @property {DialogButton[]} [buttons=[]] Footer buttons.
  * @property {boolean} [closable=true] Whether Escape and the header button may close the dialog.
  * @property {Node|string|number|{toElement: () => Node|null}|null} [content=null] Body content.
+ * @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.
@@ -89,7 +90,7 @@ export class Dialog extends Modal {
   #opener = null;
 
   /**
-   * Creates a structured dialog appended to `document.body`.
+   * Creates a structured dialog in the configured theme scope, or at document level when unscoped.
    * @param {Element|string|null} [_target=null] Ignored; Dialog always owns its root.
    * @param {DialogOptions} [options={}] Dialog options.
    */

package/src/components/dropdown/dropdown.css

@@ -4,10 +4,12 @@
   overflow: auto;
   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-3);
 }

package/src/components/dropdown/dropdown.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';
 
@@ -14,6 +15,7 @@ const HANDLE_ESCAPE_DISMISS = Symbol('zxDropdownEscapeDismiss');
  * @property {boolean} [matchWidth=false] Whether the panel matches the anchor width.
  * @property {'click'|'manual'} [openOn='click'] Trigger behavior.
  * @property {boolean} [closeOnSelect=false] Whether a click within the panel closes it.
+ * @property {Element|string|null} [scope=null] Element whose nearest Zx theme scope owns the panel; defaults to the anchor.
  * @property {(event: CustomEvent<Record<string, never>>) => void} [onopen] Open event listener.
  * @property {(event: CustomEvent<Record<string, never>>) => void} [onclose] Close event listener.
  */
@@ -34,7 +36,8 @@ export class Dropdown extends Component {
     offset: 4,
     matchWidth: false,
     openOn: 'click',
-    closeOnSelect: false
+    closeOnSelect: false,
+    scope: null
   };
 
   /** @type {Element} */
@@ -55,6 +58,7 @@ export class Dropdown extends Component {
     if (!resolved) throw new TypeError('Dropdown anchor could not be resolved');
     super(null, options);
     this.#anchor = resolved;
+    overlayHost(this.options.scope ?? resolved).append(this.el);
     this.#rememberAnchorAttribute('aria-expanded');
     this.#rememberAnchorAttribute('aria-controls');
     this.#anchor.setAttribute('aria-expanded', 'false');
@@ -79,7 +83,6 @@ export class Dropdown extends Component {
       popover: 'manual'
     });
     panel.dataset.state = 'closed';
-    document.body.append(panel);
     return panel;
   }
 
@@ -90,6 +93,8 @@ export class Dropdown extends Component {
    */
   open() {
     if (this.isOpen() || this.#destroyed) return this;
+    const host = overlayHost(this.options.scope ?? this.#anchor);
+    if (this.el.parentElement !== host) host.append(this.el);
     this.#position = position(this.#anchor, this.el, {
       placement: this.options.placement,
       offset: Number(this.options.offset),

package/src/components/launcher/launcher.css

@@ -3,10 +3,12 @@
   max-block-size: min(720px, calc(100vh - (2 * var(--zx-space-6))));
   border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-xl);
-  background: var(--zx-color-overlay-panel);
+  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-raised-shadow);
+  box-shadow: var(--zx-glass-panel-shadow);
   color: var(--zx-color-text);
   padding: 0;
 }
@@ -22,7 +24,7 @@
 }
 
 .zx-launcher::backdrop {
-  background: var(--zx-color-bg-backdrop);
+  background: var(--zx-color-overlay-backdrop);
 }
 
 .zx-launcher__surface {
@@ -36,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);
 }
 
@@ -129,11 +131,11 @@
 
 .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"] {
-  background: var(--zx-color-bg-selected);
+  background: var(--zx-color-overlay-selected);
   color: var(--zx-color-accent);
 }
 
@@ -148,7 +150,7 @@
 }
 
 .zx-launcher__option[data-kind="application"][aria-current="page"] {
-  background: var(--zx-color-bg-selected);
+  background: var(--zx-color-overlay-selected);
 }
 
 .zx-launcher__option[data-kind="application"] .zx-launcher__icon {
@@ -187,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/menu-button/menu-button.css

@@ -24,7 +24,7 @@
 
 .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

@@ -55,24 +55,15 @@
   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) 34%, var(--zx-color-overlay-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: inset 0 0 0 1px var(--zx-message-kind), var(--zx-glass-raised-shadow);
-  }
-
-  .zx-message__toast[data-kind="success"] {
-    background: color-mix(in srgb, var(--zx-color-success-bg) 34%, var(--zx-color-overlay-surface));
-  }
-
-  .zx-message__toast[data-kind="warning"] {
-    background: color-mix(in srgb, var(--zx-color-warning-bg) 34%, var(--zx-color-overlay-surface));
-  }
-
-  .zx-message__toast[data-kind="error"] {
-    background: color-mix(in srgb, var(--zx-color-danger-bg) 34%, var(--zx-color-overlay-surface));
+    box-shadow: var(--zx-glass-overlay-shadow);
   }
 }
 
@@ -111,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

@@ -4,10 +4,12 @@
   overflow: auto;
   border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-lg);
-  background: var(--zx-color-overlay-panel);
+  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-raised-shadow);
+  box-shadow: var(--zx-glass-panel-shadow);
   color: var(--zx-color-text);
   padding: 0;
 }
@@ -23,7 +25,7 @@
 }
 
 .zx-modal::backdrop {
-  background: var(--zx-color-bg-backdrop);
+  background: var(--zx-color-overlay-backdrop);
 }
 
 .zx-modal__content {
@@ -34,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;
 }