@zeyos/zx 4.2.0 → 4.3.4

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/component.js

@@ -157,21 +157,26 @@ export class Component extends EventTarget {
    * Dispatches a component event and a bubbling, composed `zx-*` DOM event.
    * @param {string} type Lowercase event name.
    * @param {Record<string, unknown>} [detail={}] Single event detail object.
+   * @param {{honorDomCancellation?:boolean}} [options={}] Mirrored DOM-event behavior. Components
+   * with a cancelable mutation boundary may opt into treating `preventDefault()` on the bubbling
+   * `zx-*` event exactly like cancellation of the component event.
    * @returns {Event & {detail: Record<string, unknown>}}
    * @fires Component#event
    */
-  emit(type, detail = {}) {
+  emit(type, detail = {}, options = {}) {
     if (detail === null || typeof detail !== 'object' || Array.isArray(detail)) {
       throw new TypeError('Event detail must be an object');
     }
     const componentEvent = createCustomEvent(type, detail, { cancelable: true });
     this.dispatchEvent(componentEvent);
     if (this.el) {
-      this.el.dispatchEvent(createCustomEvent(`zx-${type}`, detail, {
+      const domEvent = createCustomEvent(`zx-${type}`, detail, {
         bubbles: true,
         composed: true,
         cancelable: true
-      }));
+      });
+      this.el.dispatchEvent(domEvent);
+      if (options.honorDomCancellation && domEvent.defaultPrevented) componentEvent.preventDefault();
     }
     return componentEvent;
   }

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/src/index.js

@@ -136,9 +136,9 @@ export {
 export { Timebox, splitTime, joinTime } from './components/timebox/timebox.js';
 export { Calendar } from './components/calendar/calendar.js';
 export {
-  CALENDAR_VIEWS, addCalendarDays, calendarDayDifference, calendarDayKey,
-  calendarEventIntersects, calendarEventSpansDays, calendarRange, cloneCalendarEvent,
-  layoutCalendarSpans, layoutTimedCalendarEvents, normalizeCalendarEvents,
+  CALENDAR_VIEWS, addCalendarDays, addCalendarMonths, calendarDayDifference, calendarDayKey,
+  calendarEventIntersects, calendarEventSpansDays, calendarPageDate, calendarRange,
+  cloneCalendarEvent, layoutCalendarSpans, layoutTimedCalendarEvents, normalizeCalendarEvents,
   shiftCalendarEvent, startOfCalendarDay, startOfCalendarWeek
 } from './components/calendar/calendar-model.js';
 export {
@@ -149,6 +149,11 @@ export { Table, reorderTableRows } from './components/table/table.js';
 export { TableView } from './components/table-view/table-view.js';
 export { CardView } from './components/card-view/card-view.js';
 export { KanbanView } from './components/kanban-view/kanban-view.js';
+export {
+  absoluteKanbanIndex, allowsKanbanTransition, createKanbanHistory, evaluateKanbanMove,
+  kanbanSearchTerms, locateKanbanRecord, matchesKanbanSearch, normalizeKanbanRules,
+  reorderKanbanRecords, resolveKanbanRules
+} from './components/kanban-view/kanban-policy.js';
 export { Grid, billingColumns, isBillingLine } from './components/grid/grid.js';
 export {
   Chart, ChartJsAdapter, chartSummaryTable, cloneChartValue, isEmptyChartData

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);

package/styles/tokens/semantic.css

@@ -70,10 +70,33 @@
   --zx-color-glass-chrome: color-mix(in srgb, var(--zx-color-bg-surface) 90%, transparent);
   --zx-color-glass-control: color-mix(in srgb, var(--zx-color-bg-control) 88%, transparent);
   --zx-color-glass-control-hover: color-mix(in srgb, var(--zx-color-bg-hover) 76%, var(--zx-color-glass-surface));
-  /* Compact overlays can show more of the page; reading-sized panels stay quieter and more opaque. */
-  --zx-color-overlay-surface: color-mix(in srgb, var(--zx-color-bg-raised) 88%, transparent);
-  --zx-color-overlay-panel: color-mix(in srgb, var(--zx-color-bg-raised) 94%, transparent);
-  --zx-color-overlay-border: color-mix(in srgb, var(--zx-color-border-strong) 72%, var(--zx-color-glass-highlight));
+  /* Overlay glass is composed from four roles: a neutral base, translucent colour, a restrained
+     reflection, and the backdrop behind modal panels. Keeping them separate makes the material
+     visibly react to Aurora/content without baking decoration into each component. */
+  --zx-color-overlay-base: var(--zx-color-bg-raised);
+  --zx-color-overlay-surface: color-mix(in srgb, var(--zx-color-overlay-base) 72%, transparent);
+  --zx-color-overlay-panel: color-mix(in srgb, var(--zx-color-overlay-base) 80%, transparent);
+  --zx-color-overlay-backdrop: color-mix(in srgb, var(--zx-gray-950) 28%, transparent);
+  --zx-color-overlay-border: color-mix(in srgb, var(--zx-color-text) 14%, transparent);
+  --zx-color-overlay-hover: color-mix(in srgb, var(--zx-color-text) 8%, transparent);
+  --zx-color-overlay-selected: color-mix(in srgb, var(--zx-color-accent) 18%, transparent);
+  --zx-color-overlay-divider: color-mix(in srgb, var(--zx-color-text) 11%, transparent);
+  --zx-color-overlay-scrim: color-mix(in srgb, var(--zx-color-overlay-base) 28%, transparent);
+  --zx-overlay-specular-strength: 48%;
+  --zx-overlay-surface-image: linear-gradient(145deg,
+    color-mix(in srgb, var(--zx-color-glass-highlight-strong) var(--zx-overlay-specular-strength), transparent) 0%,
+    color-mix(in srgb, var(--zx-color-glass-highlight) 16%, transparent) 28%,
+    transparent 54%), radial-gradient(120% 100% at 8% -12%,
+    color-mix(in srgb, var(--zx-color-accent) 8%, transparent), transparent 58%);
+  --zx-overlay-toast-image: radial-gradient(120% 160% at 0% 0%,
+    color-mix(in srgb, var(--zx-message-kind, var(--zx-color-info)) 18%, transparent), transparent 62%),
+    var(--zx-overlay-surface-image);
+  --zx-overlay-panel-image: radial-gradient(140% 100% at 0% 0%,
+    color-mix(in srgb, var(--zx-color-glass-highlight-strong) var(--zx-overlay-specular-strength), transparent) 0%,
+    transparent 58%), radial-gradient(100% 70% at 100% 0%,
+    color-mix(in srgb, var(--zx-color-accent) 5%, transparent), transparent 64%),
+    linear-gradient(180deg, color-mix(in srgb, var(--zx-color-glass-highlight) 16%, transparent) 0%,
+    transparent 28%);
   --zx-glass-blur: 8px;
   --zx-glass-saturation: 130%;
   --zx-glass-color-strength: 82%;
@@ -82,13 +105,15 @@
   --zx-glass-filter-control: blur(6px) saturate(116%);
   --zx-glass-filter-raised: blur(8px) saturate(120%);
   --zx-glass-filter-chrome: blur(10px) saturate(122%);
-  --zx-glass-filter-overlay: blur(12px) saturate(128%);
-  --zx-glass-filter-panel: blur(9px) saturate(120%);
+  --zx-glass-filter-overlay: blur(16px) saturate(140%);
+  --zx-glass-filter-panel: blur(14px) saturate(132%);
   --zx-app-icon-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 14%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--zx-gray-950) 28%, transparent), 0 2px 6px color-mix(in srgb, var(--zx-color-app-icon-shade) 24%, transparent);
   --zx-app-icon-shadow-hover: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 20%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--zx-gray-950) 32%, transparent), 0 4px 10px color-mix(in srgb, var(--zx-color-app-icon-shade) 30%, transparent);
   --zx-glass-control-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 18%, transparent), var(--zx-shadow-1);
   --zx-glass-chrome-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 16%, transparent), var(--zx-shadow-1);
   --zx-glass-raised-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-gray-0) 18%, transparent), var(--zx-overlay-shadow);
+  --zx-glass-overlay-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-color-glass-highlight-strong) 42%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--zx-color-glass-highlight) 20%, transparent), var(--zx-overlay-shadow);
+  --zx-glass-panel-shadow: inset 0 1px 0 color-mix(in srgb, var(--zx-color-glass-highlight-strong) 34%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--zx-color-glass-highlight) 14%, transparent), var(--zx-overlay-shadow);
   --zx-header-bg: var(--zx-gray-900);
   --zx-header-text: var(--zx-gray-50);
 }
@@ -97,13 +122,25 @@
    chrome outside a component stylesheet, receives the same deterministic opaque fallback. */
 @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
   :root,
-  [data-zx-theme] {
+  .zx-scope,
+  [data-zx-theme],
+  [data-zx-density],
+  [data-zx-preset] {
     --zx-color-glass-chrome: var(--zx-color-bg-surface) !important;
     --zx-color-glass-surface: var(--zx-color-bg-raised) !important;
     --zx-color-glass-control: var(--zx-color-bg-control) !important;
     --zx-color-glass-control-hover: var(--zx-color-bg-hover) !important;
     --zx-color-overlay-surface: var(--zx-color-bg-raised) !important;
     --zx-color-overlay-panel: var(--zx-color-bg-raised) !important;
+    --zx-color-overlay-backdrop: var(--zx-color-bg-backdrop) !important;
+    --zx-color-overlay-hover: var(--zx-color-bg-hover) !important;
+    --zx-color-overlay-selected: var(--zx-color-bg-selected) !important;
+    --zx-color-overlay-divider: var(--zx-color-border) !important;
+    --zx-color-overlay-scrim: var(--zx-color-bg-raised) !important;
+    --zx-overlay-specular-strength: 0% !important;
+    --zx-overlay-surface-image: none !important;
+    --zx-overlay-toast-image: none !important;
+    --zx-overlay-panel-image: none !important;
     --zx-app-icon-core-strength: 68% !important;
     --zx-app-icon-rim-strength: 62% !important;
     --zx-app-icon-bloom-strength: 0% !important;
@@ -116,21 +153,59 @@
     --zx-glass-filter-chrome: none !important;
     --zx-glass-filter-overlay: none !important;
     --zx-glass-filter-panel: none !important;
+    --zx-glass-overlay-shadow: var(--zx-overlay-shadow) !important;
+    --zx-glass-panel-shadow: var(--zx-overlay-shadow) !important;
   }
 }
 
 @media (forced-colors: active) {
   :root,
-  [data-zx-theme] {
+  .zx-scope,
+  [data-zx-theme],
+  [data-zx-density],
+  [data-zx-preset] {
     --zx-color-glass-chrome: Canvas !important;
     --zx-color-glass-surface: Canvas !important;
     --zx-color-glass-control: ButtonFace !important;
     --zx-color-glass-control-hover: Highlight !important;
     --zx-color-overlay-surface: Canvas !important;
     --zx-color-overlay-panel: Canvas !important;
+    --zx-color-overlay-backdrop: transparent !important;
     --zx-color-overlay-border: CanvasText !important;
+    --zx-color-overlay-hover: Highlight !important;
+    --zx-color-overlay-selected: Highlight !important;
+    --zx-color-overlay-divider: CanvasText !important;
+    --zx-color-overlay-scrim: Canvas !important;
+    --zx-overlay-specular-strength: 0% !important;
+    --zx-overlay-surface-image: none !important;
+    --zx-overlay-toast-image: none !important;
+    --zx-overlay-panel-image: none !important;
     --zx-glass-control-shadow: none !important;
     --zx-glass-chrome-shadow: none !important;
     --zx-glass-raised-shadow: none !important;
+    --zx-glass-filter-overlay: none !important;
+    --zx-glass-filter-panel: none !important;
+    --zx-glass-overlay-shadow: none !important;
+    --zx-glass-panel-shadow: none !important;
+  }
+}
+
+/* Browsers without backdrop filtering get an intentionally opaque material instead of a washed
+   translucent colour. This is a capability fallback, independent of user preference fallbacks. */
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  :root,
+  .zx-scope,
+  [data-zx-theme],
+  [data-zx-density],
+  [data-zx-preset] {
+    --zx-color-overlay-surface: var(--zx-color-bg-raised) !important;
+    --zx-color-overlay-panel: var(--zx-color-bg-raised) !important;
+    --zx-color-overlay-backdrop: var(--zx-color-bg-backdrop) !important;
+    --zx-overlay-specular-strength: 0% !important;
+    --zx-overlay-surface-image: none !important;
+    --zx-overlay-toast-image: none !important;
+    --zx-overlay-panel-image: none !important;
+    --zx-glass-filter-overlay: none !important;
+    --zx-glass-filter-panel: none !important;
   }
 }