@zeyos/zx 4.1.1 → 4.3.0

package/src/components/select/select.css

@@ -96,10 +96,14 @@
   inline-size: max-content;
   max-inline-size: calc(100vw - var(--zx-space-4));
   overflow: hidden;
-  border: 1px solid var(--zx-color-border-strong);
+  border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-md);
-  background: var(--zx-color-bg-raised);
-  box-shadow: var(--zx-overlay-shadow);
+  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-overlay-shadow);
   color: var(--zx-color-text);
   padding: var(--zx-space-1);
 }
@@ -126,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 {
@@ -146,7 +150,7 @@
   position: sticky;
   z-index: 1;
   inset-block-start: 0;
-  background: var(--zx-color-bg-raised);
+  background: var(--zx-color-overlay-scrim);
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
   font-weight: 700;
@@ -155,10 +159,24 @@
   text-transform: uppercase;
 }
 
+@media (prefers-reduced-transparency: reduce) {
+  .zx-select__panel,
+  .zx-select__group {
+    background: var(--zx-color-bg-raised);
+  }
+
+  .zx-select__panel {
+    border-color: var(--zx-color-border-strong);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    box-shadow: var(--zx-overlay-shadow);
+  }
+}
+
 .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-overlay-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;
     }
@@ -156,6 +174,9 @@
   min-inline-size: 0;
   min-block-size: 0;
   border-radius: 0;
+  background: var(--zx-color-bg-raised);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
   box-shadow: none;
 }
 

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

@@ -33,15 +33,32 @@
   inset-inline-end: 0;
   display: grid;
   min-inline-size: 190px;
-  border: 1px solid var(--zx-color-border-strong);
+  border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-md);
-  background: var(--zx-color-bg-raised);
-  box-shadow: var(--zx-overlay-shadow);
+  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-overlay-shadow);
   padding: var(--zx-space-2);
+  max-block-size: min(360px, 70vh);
+  overflow: auto;
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .zx-table__column-list {
+    border-color: var(--zx-color-border-strong);
+    background: var(--zx-color-bg-raised);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    box-shadow: var(--zx-overlay-shadow);
+  }
 }
 
 .zx-table__column-option {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   gap: var(--zx-space-2);
   min-block-size: var(--zx-control-height);
@@ -49,7 +66,68 @@
   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 {
+  display: flex;
+  align-items: center;
+  gap: var(--zx-space-2);
+  min-inline-size: 0;
+}
+
+.zx-table__column-option > label > span,
+.zx-table__column-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.zx-table__column-order {
+  display: inline-flex;
+}
+
+.zx-table__column-move {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 26px;
+  block-size: 26px;
+  border: 0;
+  border-radius: var(--zx-radius-sm);
+  background: transparent;
+  color: var(--zx-color-text-muted);
+  cursor: pointer;
+}
+
+.zx-table__column-move:hover:not(:disabled) {
+  background: var(--zx-color-bg-hover);
+  color: var(--zx-color-text);
+}
+
+.zx-table__column-move:focus-visible {
+  outline: none;
+  box-shadow: var(--zx-focus-ring);
+}
+
+.zx-table__column-move:disabled {
+  opacity: .35;
+  cursor: not-allowed;
+}
+
+.zx-table__column-status {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .zx-table__column-move {
+    transition: color var(--zx-dur-fast) var(--zx-ease),
+      background var(--zx-dur-fast) var(--zx-ease), opacity var(--zx-dur-fast) var(--zx-ease);
+  }
+}
 
 .zx-table__reorder-column,
 .zx-table__reorder-header,