@zeyos/zx 5.0.0 → 5.2.0

package/src/components/multi-value-editor/multi-value-editor.css

@@ -97,7 +97,7 @@
 }
 
 .zx-multi-value-editor__handle:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 

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

@@ -35,7 +35,8 @@ export function registerNumberFieldAdapter() {
         }
       },
       focus: () => numberField.focus(),
-      setDisabled: (value) => (value ? numberField.disable() : numberField.enable())
+      setDisabled: (value) => (value ? numberField.disable() : numberField.enable()),
+      setReadonly: (value) => { numberField.setReadonly(value); }
     };
   });
 }

package/src/components/pagination/pagination.css

@@ -1,8 +1,8 @@
 /*
  * Pagination — the footer bar of a server-backed list.
  *
- * One row that wraps: the summary is pushed to the start, the page-size select and the pager sit
- * at the end. Page buttons are ordinary `.zx-btn` controls so they inherit the library's control
+ * One row that wraps: the summary and the page-size select describe the slice and sit at the
+ * start, the pager sits alone at the end. Page buttons are ordinary `.zx-btn` controls so they inherit the library's control
  * height, radius, and focus ring; the current page takes the neutral current fill — it is where
  * you are, not a call to action.
  */
@@ -22,8 +22,8 @@
   white-space: nowrap;
 }
 
-/* Absorbs the slack, so summary and controls end up at opposite ends of a wide bar and simply
-   stack when there is no room. */
+/* Absorbs the slack, so the summary and page size end up at the start and the pager at the end of
+   a wide bar, and they simply stack when there is no room. */
 .zx-pagination__spacer {
   flex: 1 1 var(--zx-space-4);
 }
@@ -43,7 +43,7 @@
 }
 
 .zx-pagination__select:focus-visible {
-  outline: 0;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 

package/src/components/pagination/pagination.js

@@ -95,9 +95,23 @@ export function paginationRange({ page = 1, pages = 1, siblings = 1, boundaries
 
 /**
  * The pager for a server-backed list. It owns no data: it reports which slice the user asked for
- * and lets the application fetch it, which is exactly the shape `zeyosTable()` expects —
- * `offset`/`pageSize` for `load()` in `pages` mode, or one `change` per `loadMore()` in
- * `loadmore` mode.
+ * — `page`, `pageSize`, and the zero-based row `offset = (page - 1) * pageSize` — and lets the
+ * application fetch it.
+ *
+ * The pager is one-based and defaults to 25 rows per page. The ZeyOS bindings are zero-based,
+ * default to 50 rows, and append pages above zero unless told to replace, so connecting the two
+ * takes a small mapping rather than a direct hand-off:
+ *
+ * ```js
+ * const binding = zeyosTable(client, 'contacts', { pageSize: 25 });
+ * const pager = new Pagination(host, { pageSize: binding.pageSize });
+ * pager.on('change', async ({ detail }) => {
+ *   const result = await binding.load({ page: detail.page - 1, pageSize: detail.pageSize, replace: true });
+ *   pager.setTotal(result.count ?? 0);
+ * });
+ * ```
+ *
+ * In `loadmore` mode each `change` stands for one `binding.loadMore()`, which appends.
  *
  * `page` is clamped into `[1, pages]` after every state change, so shrinking `total` under the
  * user's feet can never leave the pager pointing past the end of the data.
@@ -163,8 +177,10 @@ export class Pagination extends Component {
     if (this.options.showSummary) {
       children.push(h('span', { class: 'zx-pagination__summary', ref: 'summary', ariaLive: 'polite' }));
     }
-    children.push(h('span', { class: 'zx-pagination__spacer' }));
+    // The summary and the page size describe the slice and sit together at the start; the pager
+    // walks the slice and sits alone at the end, where the next-page action is reached last.
     if (this.options.showPageSize) children.push(this._renderPageSize());
+    children.push(h('span', { class: 'zx-pagination__spacer' }));
     children.push(this.options.mode === 'pages' ? this._renderPages() : this._renderLoadMore());
     root.replaceChildren(...children);
 

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-shadow-1);
+  box-shadow: var(--zx-surface-shadow);
 }
 
 /* The header is a row, not one big button: the collapse control takes the title area and the
@@ -49,7 +49,8 @@ button.zx-panel__toggle:hover {
 
 /* Inset, because the panel clips its own overflow and would cut an outside ring. */
 button.zx-panel__toggle:focus-visible {
-  outline: 0;
+  outline-color: transparent;
+  outline-offset: -2px;
   box-shadow: inset var(--zx-focus-ring);
 }
 

package/src/components/questionnaire/questionnaire.css

@@ -51,11 +51,11 @@
 }
 
 .zx-questionnaire__item:focus {
-  outline: none;
+  outline-color: transparent;
 }
 
 .zx-questionnaire__item:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
   border-radius: var(--zx-questionnaire-radius);
 }
@@ -275,7 +275,7 @@
 }
 
 .zx-questionnaire__freeform-input:focus-visible {
-  outline: none;
+  outline-color: transparent;
   border-color: var(--zx-color-accent);
   box-shadow: var(--zx-focus-ring);
 }
@@ -301,7 +301,7 @@
 }
 
 .zx-questionnaire__review:focus {
-  outline: none;
+  outline-color: transparent;
 }
 
 

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

@@ -28,7 +28,8 @@ export function registerRatingFieldAdapter() {
         }
       },
       focus: () => rating.focus(),
-      setDisabled: (value) => (value ? rating.disable() : rating.enable())
+      setDisabled: (value) => (value ? rating.disable() : rating.enable()),
+      setReadonly: (value) => { rating.setReadonly(value); }
     };
   });
 }

package/src/components/rating/rating.css

@@ -76,7 +76,7 @@
 }
 
 .zx-rating__radio:focus-visible {
-  outline: 0;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 

package/src/components/search/search.css

@@ -13,8 +13,11 @@
 }
 
 /* The input reserves room for the clear button, which floats over its trailing edge, so showing
-   or hiding the button never changes the control's total width. */
+   or hiding the button never changes the control's total width. It takes every bit of width the
+   field is given — a toolbar stretches the field, and the submit glyph must stay on its trailing
+   edge rather than stopping where the input's own width ran out. */
 .zx-search__input {
+  flex: 1 1 auto;
   min-inline-size: 12rem;
   min-block-size: 0;
   border: 0;

package/src/components/select/select.js

@@ -251,6 +251,15 @@ export class Select extends Component {
     this.set(id);
   }
 
+  /**
+   * Returns the selected item ID, or null: the same as reading `value`, under the `get()`/`set()`
+   * pair the other value components share.
+   * @returns {unknown}
+   */
+  get() {
+    return this.value;
+  }
+
   /** Selected item, or null. @returns {SelectItem|null} */
   get selected() {
     return this._selected;

package/src/components/sheet/sheet.css

@@ -249,7 +249,7 @@
 }
 
 .zx-sheet__handle:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 

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 {

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

@@ -41,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);
 }
 

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

package/src/components/tabbox/tabbox.css

@@ -113,7 +113,8 @@
 
 .zx-tabbox[data-variant="divided"] .zx-tabbox__tab:focus-visible {
   z-index: 1;
-  outline: 0;
+  outline-color: transparent;
+  outline-offset: -2px;
   box-shadow: inset var(--zx-focus-ring);
 }
 
@@ -155,7 +156,8 @@
 
 .zx-tabbox[data-variant="bracket"] .zx-tabbox__tab:focus-visible {
   z-index: 1;
-  outline: 0;
+  outline-color: transparent;
+  outline-offset: -2px;
   box-shadow: inset var(--zx-focus-ring);
 }
 
@@ -183,7 +185,8 @@
 
 .zx-tabbox[data-variant="line"] .zx-tabbox__tab:focus-visible {
   z-index: 1;
-  outline: 0;
+  outline-color: transparent;
+  outline-offset: -2px;
   box-shadow: inset var(--zx-focus-ring);
 }
 
@@ -220,7 +223,7 @@
 
 .zx-tabbox[data-variant="segmented"] .zx-tabbox__tab:focus-visible {
   z-index: 1;
-  outline: 0;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 
@@ -291,6 +294,7 @@
 }
 
 .zx-tabbox__panel:focus-visible {
-  outline: 0;
+  outline-color: transparent;
+  outline-offset: -2px;
   box-shadow: inset var(--zx-focus-ring);
 }

package/src/components/table/table.css

@@ -108,7 +108,7 @@
 }
 
 .zx-table__column-move:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 
@@ -298,17 +298,21 @@
 }
 
 .zx-table__sort-button {
+  /* At least 24px tall (WCAG 2.5.8 target size) without making the header any taller: the height
+     the label's line lacks is padding, handed back by a negative margin of the same size. */
+  --zx-table-sort-slack: max(0px, (24px - 1lh) / 2);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--zx-space-2);
   inline-size: 100%;
-  min-block-size: auto;
+  min-block-size: 24px;
   border: 0;
   border-radius: var(--zx-radius-sm);
   background: inherit;
   color: inherit;
-  padding: 0;
+  margin-block: calc(-1 * var(--zx-table-sort-slack));
+  padding: var(--zx-table-sort-slack) 0;
   /* The header's type, not a control's: base.css sets buttons in the control size and weight, and
      the browser resets their tracking, so a sortable label would not match its unsortable
      neighbours. */
@@ -405,13 +409,77 @@
 }
 
 
+/*
+ * The selection checkboxes are drawn rather than native. A native checkbox paints its glyph across
+ * its whole box, so the only way to give it a 24px target (WCAG 2.5.8) would be a 24px glyph. Here
+ * the box stays the --zx-space-4 square it always was and a transparent border around it makes up
+ * the rest of the target — the inset shadow that draws the box's edge sits inside that border.
+ * Forced colours get the native control back, which the system paints in its own colours.
+ */
 .zx-table__checkbox {
-  display: block;
+  --zx-table-checkbox-slack: max(0px, (24px - var(--zx-space-4)) / 2);
+  appearance: none;
+  display: grid;
+  place-content: center;
+  box-sizing: content-box;
   inline-size: var(--zx-space-4);
-  min-block-size: auto;
   block-size: var(--zx-space-4);
+  min-block-size: auto;
   margin: 0 auto;
-  accent-color: var(--zx-color-accent);
+  border: var(--zx-table-checkbox-slack) solid transparent;
+  border-radius: calc(var(--zx-radius-sm) + var(--zx-table-checkbox-slack));
+  padding: 0;
+  background: var(--zx-color-bg-control) padding-box;
+  box-shadow: inset 0 0 0 1px var(--zx-color-text-subtle);
+  color: var(--zx-color-on-accent);
+  cursor: pointer;
+}
+
+.zx-table__checkbox::before {
+  content: "";
+  inline-size: calc(var(--zx-space-4) * .625);
+  block-size: calc(var(--zx-space-4) * .625);
+  background: currentColor;
+  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
+  visibility: hidden;
+}
+
+.zx-table__checkbox:hover:not(:disabled) {
+  box-shadow: inset 0 0 0 1px var(--zx-color-text-muted);
+}
+
+.zx-table__checkbox:is(:checked, :indeterminate) {
+  background-color: var(--zx-color-accent);
+  box-shadow: inset 0 0 0 1px var(--zx-color-accent);
+}
+
+.zx-table__checkbox:is(:checked, :indeterminate)::before {
+  visibility: visible;
+}
+
+.zx-table__checkbox:indeterminate::before {
+  clip-path: inset(40% 5%);
+}
+
+.zx-table__checkbox:focus-visible {
+  outline-color: transparent;
+  outline-offset: calc(-1 * var(--zx-table-checkbox-slack));
+  box-shadow: inset 0 0 0 1px var(--zx-color-accent), var(--zx-focus-ring);
+}
+
+.zx-table__checkbox:disabled {
+  opacity: .5;
+  cursor: not-allowed;
+}
+
+@media (forced-colors: active) {
+  .zx-table__checkbox {
+    appearance: auto;
+  }
+
+  .zx-table__checkbox::before {
+    content: none;
+  }
 }
 
 .zx-table__empty {
@@ -455,7 +523,7 @@
 }
 
 .zx-table__tree-toggle:focus-visible {
-  outline: 0;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 
@@ -519,13 +587,20 @@
   cursor: cell;
 }
 
-/* Cells carry a roving tabindex, so their ring must sit inside the cell box — an outer ring would
-   be painted over by the neighbouring cell. */
-.zx-table__body td[data-editable="true"]:focus-visible {
-  outline: 0;
+/* Rows and cells carry the grid's roving tabindex, so their ring sits inside the box — an outer
+   ring would be painted over by the neighbouring row or cell, or clipped by the scroll region. The
+   outline stays, transparent, for forced colours to paint. */
+.zx-table__body :is(tr[data-row], td, th)[tabindex]:focus-visible {
+  outline-color: transparent;
+  outline-offset: -2px;
   box-shadow: inset var(--zx-focus-ring);
 }
 
+/* A row moved to by keyboard scrolls clear of the sticky header rather than behind it. */
+.zx-table__body > tr[data-row] {
+  scroll-margin-block: calc(var(--zx-control-height) + var(--zx-space-2)) var(--zx-space-2);
+}
+
 .zx-table__body td[data-editing="true"] {
   position: relative;
 }