@zeyos/zx 4.4.0 → 5.2.0

package/src/components/sheet/sheet.js

@@ -1,6 +1,6 @@
 import { STEP, STEP_LARGE, dragAxis, resolveSize } from '../../core/drag-axis.js';
 import { focusTrap } from '../../core/keyboard.js';
-import { h } from '../../core/dom.js';
+import { h, resolveElement } from '../../core/dom.js';
 import { clamp } from '../../core/util.js';
 import { Dialog } from '../dialog/dialog.js';
 
@@ -112,36 +112,24 @@ export class Sheet extends Dialog {
      * field would be undefined at best and a private one would throw.
      */
     this._dock = null;
+    /** @type {Element|null} The element focus was on when the current `open()` began. */
+    this._openedFrom = null;
     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);
     this.refs.close.hidden = !this.options.closeButton;
 
-    if (this.options.modal !== true) {
-      /*
-       * Escape and outside-click are free for a modal dialog and absent for a non-modal one: the
-       * browser only wires `cancel` for `showModal()`, and there is no `::backdrop` to click.
-       */
-      this.listen(this.el, 'keydown', (event) => {
-        const keyboardEvent = /** @type {KeyboardEvent} */ (event);
-        if (keyboardEvent.key !== 'Escape' || !this.options.closable || this._dock) return;
-        keyboardEvent.preventDefault();
-        if (!this.emit('cancel').defaultPrevented) this.close();
-      });
-      if (this.options.lightDismiss) {
-        this.listen(document, 'pointerdown', (event) => {
-          const target = /** @type {Node} */ (event.target);
-          if (!this.isOpen() || this._dock || this.el.contains(target)) return;
-          this.close();
-        });
-      }
-    }
-
     /*
      * Registered after Dialog's own restore listener, so focus lands on the opener either way:
      * the trap captured the same element, because `open()` activates it before the sheet shows.
      */
     this.on('close', () => this.#trap?.deactivate());
+    // A sheet that was hosted inside a modal it was opened from goes home once it closes, so it
+    // neither sits in that dialog's focus search nor goes with the dialog when it is removed.
+    this.on('close', () => {
+      const home = super.mountTarget();
+      if (!this._dock && this.el.parentElement !== home && this.el.parentElement?.closest('dialog')) home.append(this.el);
+    });
 
     if (this.#wantsHandle()) this.#buildHandle();
   }
@@ -320,7 +308,19 @@ export class Sheet extends Dialog {
    * @returns {Element}
    */
   mountTarget() {
-    return this._dock?.el ?? super.mountTarget();
+    if (this._dock) return this._dock.el;
+    /*
+     * A floating non-modal sheet opened from inside a modal dialog lives inside that dialog: its
+     * popover still rises above it, but outside the dialog's subtree `showModal()` would leave it
+     * inert. Only asked while opening — `this.el` is unset during `render()` — so a sheet at rest
+     * stays in its theme scope. A modal sheet stacks above any dialog wherever it lives.
+     */
+    if (this.el && this.options.modal !== true) {
+      const opener = this._openedFrom ?? resolveElement(this.options.scope);
+      const modal = modalAround(opener, this.el);
+      if (modal) return modal;
+    }
+    return super.mountTarget();
   }
 
   /**
@@ -362,11 +362,43 @@ export class Sheet extends Dialog {
     this.el.returnValue = '';
     this._present();
     this.el.dataset.state = 'open';
-    if (this._dock) delete /** @type {HTMLElement} */ (this.el).dataset.zxOverlayOrder;
-    else this.el.dataset.zxOverlayOrder = String(nextOverlayOrder());
+    this._syncOverlay();
   }
 
 
+  /**
+   * Describes the presentation for the overlay stack. A docked sheet is part of the layout and
+   * stays off it.
+   *
+   * Escape and outside-click are free for a modal dialog and absent for a non-modal one — the
+   * browser only wires `cancel` for `showModal()`, and there is no `::backdrop` to click — so a
+   * floating non-modal sheet takes both from the stack. That is what makes it aware of what it
+   * opened: Escape reaches it only once no popup above it takes the key, and a press inside a menu
+   * anchored in the sheet counts as inside the sheet, wherever the menu's panel lives.
+   * @returns {import('../../core/overlay-stack.js').OverlayEntryOptions|null}
+   * @protected
+   */
+  _overlayEntry() {
+    if (this._dock) return null;
+    const entry = super._overlayEntry();
+    if (!entry || this.options.modal === true) return entry;
+    return {
+      ...entry,
+      // An Escape pressed outside the sheet and everything it opened is not addressed to it.
+      onEscape: (event) => {
+        if (!this.options.closable || !this._overlayContains(/** @type {Node|null} */ (event.target))) return false;
+        if (!this.emit('cancel').defaultPrevented) this.close();
+        return undefined;
+      },
+      onOutsidePointer: this.options.lightDismiss ? () => { this.close(); } : undefined,
+      // Hosted inside a modal that has now closed, the sheet would stay open but never be seen.
+      onParentClose: () => {
+        const holder = this.el.parentElement?.closest('dialog');
+        if (holder && !holder.open && !holder.matches(':popover-open')) this.close();
+      }
+    };
+  }
+
   /**
    * Opens the sheet, trapping focus first where the modality asks for it.
    * @returns {this}
@@ -374,11 +406,17 @@ export class Sheet extends Dialog {
    */
   open() {
     if (this.isOpen()) return this;
+    // Read before the trap moves focus: the element the reader was on decides where the sheet lives.
+    this._openedFrom = document.activeElement;
     if (this.options.modal === 'trap-focus') {
       this.#trap ??= focusTrap(this.el);
       this.#trap.activate();
     }
-    super.open();
+    try {
+      super.open();
+    } finally {
+      this._openedFrom = null;
+    }
     // The handle is built while the sheet is still closed, where it measures zero; only now is
     // there a real size to report to a screen reader.
     this.#syncHandleAria();
@@ -507,14 +545,18 @@ export class Sheet extends Dialog {
 }
 
 /**
- * Next free overlay order. Same bookkeeping `Modal` and `Dropdown` each carry a copy of; the three
- * should converge on one kernel helper.
- * @returns {number}
+ * The open modal dialog around an element, other than the sheet itself, or null.
+ * @param {Element|null|undefined} element
+ * @param {Element} self
+ * @returns {Element|null}
  */
-function nextOverlayOrder() {
-  const orders = Array.from(document.querySelectorAll('[data-zx-overlay-order]'), (element) =>
-    Number(element.getAttribute('data-zx-overlay-order')) || 0);
-  return Math.max(0, ...orders) + 1;
+function modalAround(element, self) {
+  if (!element || typeof element.closest !== 'function' || self.contains(element)) return null;
+  try {
+    return element.closest('dialog:modal');
+  } catch {
+    return null;
+  }
 }
 
 /**

package/src/components/slider/field-adapter.js

@@ -15,9 +15,13 @@ export function registerSliderFieldAdapter() {
       ...(options.props ?? {})
     }));
     let setting = false;
+    // The range input's native `change` bubbles out of the slider after the slider has reported
+    // the same commit; without this the Field would emit `change` twice per edit.
+    field.listen(slider.el, 'change', (event) => event.stopImmediatePropagation());
     slider.on('change', (event) => {
       if (!setting) field.emit('change', { value: event.detail.value });
     });
+    slider.on('input', (event) => field.emit('input', { value: event.detail.value }));
     return {
       el: slider.el,
       get: () => slider.get(),
@@ -30,7 +34,8 @@ export function registerSliderFieldAdapter() {
         }
       },
       focus: () => slider.focus(),
-      setDisabled: (value) => (value ? slider.disable() : slider.enable())
+      setDisabled: (value) => (value ? slider.disable() : slider.enable()),
+      setReadonly: (value) => { slider.setReadonly(value); }
     };
   });
 }

package/src/components/slider/slider.css

@@ -119,7 +119,7 @@
   border: 2px solid var(--zx-color-bg-surface);
   border-radius: var(--zx-radius-full);
   background: var(--zx-color-accent);
-  box-shadow: var(--zx-shadow-1);
+  box-shadow: var(--zx-surface-shadow);
 }
 
 .zx-slider__input::-moz-range-thumb {
@@ -128,7 +128,7 @@
   border: 2px solid var(--zx-color-bg-surface);
   border-radius: var(--zx-radius-full);
   background: var(--zx-color-accent);
-  box-shadow: var(--zx-shadow-1);
+  box-shadow: var(--zx-surface-shadow);
 }
 
 .zx-slider__input:focus-visible {
@@ -147,17 +147,31 @@
   font-variant-numeric: tabular-nums;
 }
 
+/*
+ * A mark sits under the thumb's centre at its value — half a thumb in from either end of the rail
+ * — and centres its label there, except that a label is never pushed past either end of the
+ * track: the outermost ones end flush with it instead of spilling out of the component.
+ * `--zx-slider-mark` is the value's position on the scale, from 0 to 1.
+ */
 .zx-slider__marks {
   position: relative;
+  inline-size: 100%;
   block-size: var(--zx-space-5);
   margin-block-start: var(--zx-space-1);
+  container-type: inline-size;
 }
 
 .zx-slider__mark {
+  --zx-slider-mark-at: calc(var(--zx-slider-thumb) / 2
+    + (100cqi - var(--zx-slider-thumb)) * var(--zx-slider-mark, 0));
   position: absolute;
   inset-block-start: 0;
-  inset-inline-start: var(--zx-slider-mark, 0%);
-  transform: translateX(-50%);
+  inset-inline-start: var(--zx-slider-mark-at);
+  transform: translateX(clamp(
+    -1 * var(--zx-slider-mark-at),
+    -50%,
+    100cqi - var(--zx-slider-mark-at) - 100%
+  ));
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
   white-space: nowrap;

package/src/components/slider/slider.js

@@ -279,7 +279,7 @@ export class Slider extends Component {
       const label = typeof mark === 'number' ? this._format(value) : String(mark.label ?? this._format(value));
       element.append(h('span', {
         class: 'zx-slider__mark',
-        style: { '--zx-slider-mark': `${this._ratio(value) * 100}%` }
+        style: { '--zx-slider-mark': String(this._ratio(value)) }
       }, label));
     }
     return element;

package/src/components/sort-control/sort-control.css

@@ -10,8 +10,11 @@
 .zx-sort-control__direction {
   inline-size: var(--zx-control-height);
   padding: 0;
-  border-radius: var(--zx-radius-full);
+  border-radius: var(--zx-control-radius);
 }
 
 .zx-sort-control__direction:focus-visible { box-shadow: var(--zx-focus-ring); }
+/* The arrow is the current direction, not decoration, so it keeps the text colour a ghost glyph
+   would otherwise give up. */
+.zx-sort-control .zx-sort-control__direction > .zx-icon { color: var(--zx-color-text); }
 .zx-sort-control .zx-select__control { background: var(--zx-color-bg-control); }

package/src/components/split-view/split-view.css

@@ -99,7 +99,7 @@
 }
 
 .zx-split-view__divider:focus-visible {
-  outline: 0;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
   /* The ring sits outside an 8px-wide element, so it must draw over both panes. */
   z-index: 1;

package/src/components/stat-tile/stat-tile.css

@@ -1,14 +1,17 @@
 /*
- * The tile is a size ladder, not a colour: the value is the loudest thing on it, the label is
- * small above it, and the delta and sparkline are quieter than both. `kind` tints the icon and
- * the sparkline only — never the value, which has to stay at full text contrast whatever intent
- * a server assigns the metric.
+ * The tile is a size ladder, not a colour: the value is the loudest thing on it, the label is a
+ * quiet sentence-case line above it, and the caption, delta and sparkline are quieter than both.
+ * The icon is a muted glyph, not a coloured chip. `kind` tints the sparkline only — never the
+ * value, which has to stay at full text contrast whatever intent a server assigns the metric.
+ *
+ * A column, with the sparkline pushed to the foot: tiles in one row are as tall as the tallest,
+ * so their labels, values and sparklines line up whether or not each tile has every part.
  */
 .zx-stat-tile {
   --zx-stat-tile-value-size: var(--zx-text-2xl);
-  display: grid;
-  gap: var(--zx-space-2);
-  align-content: start;
+  display: flex;
+  flex-direction: column;
+  gap: var(--zx-space-1);
   min-inline-size: 0;
   padding: var(--zx-space-4);
   border: 1px solid var(--zx-color-border);
@@ -38,7 +41,7 @@ button.zx-stat-tile:hover {
 
 a.zx-stat-tile:focus-visible,
 button.zx-stat-tile:focus-visible {
-  outline: 0;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 
@@ -60,25 +63,19 @@ button.zx-stat-tile:focus-visible {
 .zx-stat-tile__label {
   min-inline-size: 0;
   overflow: hidden;
-  font-size: var(--zx-text-xs);
-  font-weight: 600;
-  letter-spacing: 0.04em;
+  font-size: var(--zx-text-sm);
+  font-weight: var(--zx-weight-medium);
   line-height: 1.4;
-  text-transform: uppercase;
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--zx-color-text-muted);
 }
 
 .zx-stat-tile__icon {
-  display: grid;
+  display: inline-grid;
   flex: none;
   place-items: center;
-  inline-size: 1.75rem;
-  block-size: 1.75rem;
-  border-radius: var(--zx-radius-full);
-  background: var(--zx-color-bg-muted);
-  color: var(--zx-color-text-muted);
+  color: var(--zx-color-text-subtle);
 }
 
 /*
@@ -87,21 +84,35 @@ button.zx-stat-tile:focus-visible {
  */
 .zx-stat-tile__value {
   min-inline-size: 0;
+  margin-block-start: var(--zx-space-1);
   font-size: var(--zx-stat-tile-value-size);
-  font-weight: 600;
+  font-weight: 650;
   font-variant-numeric: tabular-nums;
+  letter-spacing: var(--zx-tracking-title);
   line-height: 1.15;
   overflow-wrap: break-word;
   color: var(--zx-color-text);
 }
 
+/* What the value is out of, or measured in: one muted line, read with the value. */
+.zx-stat-tile__caption {
+  min-inline-size: 0;
+  overflow: hidden;
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-sm);
+  font-variant-numeric: tabular-nums;
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .zx-stat-tile__delta {
   display: flex;
   gap: var(--zx-space-1);
   align-items: baseline;
   min-inline-size: 0;
   font-size: var(--zx-text-xs);
-  font-weight: 600;
+  font-weight: var(--zx-weight-medium);
   font-variant-numeric: tabular-nums;
   line-height: 1.4;
   color: var(--zx-color-text-muted);
@@ -124,6 +135,12 @@ button.zx-stat-tile:focus-visible {
   align-self: center;
 }
 
+.zx-stat-tile__delta-value {
+  /* A figure never breaks ("+23" over "pcs"); the comparison beside it gives way first. */
+  flex: none;
+  white-space: nowrap;
+}
+
 .zx-stat-tile__delta-label {
   min-inline-size: 0;
   overflow: hidden;
@@ -136,9 +153,12 @@ button.zx-stat-tile:focus-visible {
 
 .zx-stat-tile__trend {
   display: block;
+  flex: none;
+  box-sizing: content-box;
   inline-size: 100%;
   block-size: 2rem;
-  margin-block-start: var(--zx-space-1);
+  margin-block-start: auto;
+  padding-block-start: var(--zx-space-2);
   color: var(--zx-color-text-placeholder);
 }
 
@@ -147,32 +167,7 @@ button.zx-stat-tile:focus-visible {
   gap: var(--zx-space-2);
 }
 
-/* Intent. The icon carries it as a tint, the sparkline as its stroke. */
-.zx-stat-tile[data-kind="accent"] .zx-stat-tile__icon {
-  background: var(--zx-color-accent-subtle);
-  color: var(--zx-color-accent);
-}
-
-.zx-stat-tile[data-kind="success"] .zx-stat-tile__icon {
-  background: var(--zx-color-success-bg);
-  color: var(--zx-color-success);
-}
-
-.zx-stat-tile[data-kind="warning"] .zx-stat-tile__icon {
-  background: var(--zx-color-warning-bg);
-  color: var(--zx-color-warning);
-}
-
-.zx-stat-tile[data-kind="danger"] .zx-stat-tile__icon {
-  background: var(--zx-color-danger-bg);
-  color: var(--zx-color-danger);
-}
-
-.zx-stat-tile[data-kind="info"] .zx-stat-tile__icon {
-  background: var(--zx-color-info-bg);
-  color: var(--zx-color-info);
-}
-
+/* Intent. The sparkline carries it as its stroke; the icon stays a muted glyph. */
 .zx-stat-tile[data-kind="accent"] .zx-stat-tile__trend {
   color: var(--zx-color-accent);
 }

package/src/components/stat-tile/stat-tile.js

@@ -25,6 +25,7 @@ import { skeleton } from '../skeleton/skeleton.js';
  * @typedef {Object} StatTileNameParts
  * @property {string} [label] The metric's name.
  * @property {string} [value] The formatted value.
+ * @property {string} [caption] The context line under the value, e.g. `'of 13,184'`.
  * @property {string} [delta] The change, already worded for speech (`'up 2'`, not `'+2'`).
  * @property {string} [deltaLabel] What the change is measured against.
  */
@@ -36,6 +37,8 @@ import { skeleton } from '../skeleton/skeleton.js';
  * @property {StatTileFormat} [format='number'] How a numeric value is rendered: a named mode, a
  *   callback receiving the raw value, or null to print the value unformatted.
  * @property {string|null} [currency=null] ISO 4217 code used by `format: 'currency'`.
+ * @property {string} [caption=''] A muted context line under the value — what the number is out
+ *   of or measured in, e.g. `'of 13,184'` or `'open tickets'`. Part of the accessible name.
  * @property {string} [locale] BCP 47 tag for every formatter; defaults to the active language.
  * @property {number|string|null} [delta=null] Change against the previous period. Rendered with
  *   its own sign and an arrow, never with colour alone.
@@ -46,9 +49,10 @@ import { skeleton } from '../skeleton/skeleton.js';
  * @property {string} [deltaLabel=''] What the change is measured against, e.g. `'vs. last week'`.
  * @property {number[]} [trend=[]] Values for a decorative sparkline. Fewer than two usable numbers
  *   render nothing.
- * @property {string|null} [icon=null] Icon name from `icons.js`, shown beside the label.
- * @property {StatTileKind} [kind='neutral'] Semantic intent. It tints the icon and the sparkline
- *   and never the value, which stays at full text contrast whatever intent a record carries.
+ * @property {string|null} [icon=null] Icon name from `icons.js`, shown muted beside the label —
+ *   a glyph, not a coloured chip.
+ * @property {StatTileKind} [kind='neutral'] Semantic intent. It tints the sparkline and never the
+ *   value, which stays at full text contrast whatever intent a record carries.
  * @property {string|null} [href=null] Destination. A tile with an href is an `<a>`.
  * @property {boolean} [clickable=false] Renders a `<button>` without an href. Passing `onclick`
  *   sets this implicitly; set it directly to subscribe with `on('click', …)` instead.
@@ -93,6 +97,7 @@ const defaults = Object.freeze({
   value: null,
   format: 'number',
   currency: null,
+  caption: '',
   delta: null,
   deltaKind: 'neutral',
   deltaLabel: '',
@@ -306,17 +311,19 @@ export function statTileTag(options = {}) {
 }
 
 /**
- * Composes the tile's accessible name: label, then value, then how it changed.
+ * Composes the tile's accessible name: label, then value with its caption, then how it changed.
  *
  * The sparkline is decoration and contributes nothing, and the delta arrives already worded —
- * `'up 2'` rather than `'+2'` — because a screen reader should not have to interpret a glyph.
+ * `'up 2'` rather than `'+2'` — because a screen reader should not have to interpret a glyph. The
+ * caption is read with the value it qualifies (`'2,184 of 13,184'`), not as a separate clause.
  *
  * @param {StatTileNameParts} [parts={}] The pieces, already formatted and translated.
  * @returns {string} The name, with empty pieces dropped rather than left as stray punctuation.
  */
 export function statTileName(parts = {}) {
+  const value = [parts.value, parts.caption].map(trimmed).filter(Boolean).join(' ');
   const change = [parts.delta, parts.deltaLabel].map(trimmed).filter(Boolean).join(' ');
-  return [trimmed(parts.label), trimmed(parts.value), change].filter(Boolean).join(', ');
+  return [trimmed(parts.label), value, change].filter(Boolean).join(', ');
 }
 
 /**
@@ -391,10 +398,12 @@ function fillStatTile(root, options, message) {
     currency: options.currency
   });
   const deltaLabel = asText(options.deltaLabel);
+  const caption = asText(options.caption).trim();
 
   applyName(root, statTileName({
     label,
     value,
+    caption,
     delta: delta === null ? '' : spokenDelta(delta, message),
     deltaLabel
   }));
@@ -407,6 +416,7 @@ function fillStatTile(root, options, message) {
   // `Element`, not `HTMLElement`: the sparkline is an SVG element and belongs in the same list.
   /** @type {Element[]} */
   const children = [header, h('div', { class: 'zx-stat-tile__value' }, value)];
+  if (caption) children.push(h('div', { class: 'zx-stat-tile__caption' }, caption));
   if (delta !== null) children.push(deltaBody(delta, deltaLabel, options.deltaKind));
   const trend = trendBody(options.trend);
   if (trend) children.push(trend);
@@ -481,6 +491,7 @@ function loadingBody(options) {
     h('div', { class: 'zx-stat-tile__header' }, skeleton({ width: '55%', height: '0.75rem' })),
     skeleton({ width: '70%', height: '1.75rem', radius: 'md' })
   ];
+  if (asText(options.caption).trim()) blocks.push(skeleton({ width: '35%', height: '0.75rem' }));
   if (options.delta !== null && options.delta !== undefined) {
     blocks.push(skeleton({ width: '40%', height: '0.75rem' }));
   }

package/src/components/stepper/stepper.css

@@ -70,7 +70,7 @@ button.zx-stepper__control:disabled {
 }
 
 .zx-stepper__control:focus-visible {
-  outline: 0;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }