@zeyos/zx 2.2.1 → 3.0.0

package/src/components/modal/modal.js

@@ -52,6 +52,7 @@ export class Modal extends Component {
       if (!this.options.closable || cancelEvent.defaultPrevented) event.preventDefault();
     });
     this.listen(this.el, 'close', () => {
+      if (!this._isRealClose()) return;
       this.el.dataset.state = 'closed';
       delete this.el.dataset.zxOverlayOrder;
       const result = this.#hasPendingResult ? this.#pendingResult : (this.el.returnValue || undefined);
@@ -66,6 +67,40 @@ export class Modal extends Component {
     });
   }
 
+  /**
+   * Element the owned dialog is appended to. Overridden by subclasses that live inside a host
+   * rather than at the document level.
+   *
+   * Called from `render()`, which the base constructor runs before any subclass field
+   * initializers, so an override may read `this.options` but must not touch instance state.
+   * @returns {Element}
+   */
+  mountTarget() {
+    return document.body;
+  }
+
+  /**
+   * Puts the dialog on screen. Overridden by subclasses that open non-modally.
+   * @returns {void}
+   */
+  _show() {
+    this.el.showModal();
+  }
+
+  /**
+   * Whether an incoming `close` event is a real dismissal.
+   *
+   * A dialog cannot move between the top layer and the page flow while it is open, so a subclass
+   * that re-hosts itself has to close and immediately reopen. `close` is dispatched in a queued
+   * task, not synchronously, so that stale event arrives once the dialog is already open again —
+   * late enough to clobber `data-state`, fire a `close` nobody asked for, and trip
+   * `destroyOnClose`. Returning false from an override drops it at the source instead.
+   * @returns {boolean}
+   */
+  _isRealClose() {
+    return true;
+  }
+
   /**
    * Creates the owned native dialog.
    * @returns {HTMLDialogElement}
@@ -75,7 +110,7 @@ export class Modal extends Component {
       class: 'zx-modal'
     }, h('div', { class: 'zx-modal__content', ref: 'content' })));
     dialog.dataset.state = 'closed';
-    document.body.append(dialog);
+    this.mountTarget().append(dialog);
     return dialog;
   }
 
@@ -89,7 +124,7 @@ export class Modal extends Component {
     this.el.dataset.zxOverlayOrder = String(nextOverlayOrder());
     this.el.returnValue = '';
     try {
-      this.el.showModal();
+      this._show();
     } catch (error) {
       delete this.el.dataset.zxOverlayOrder;
       throw error;

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

@@ -1,12 +1,22 @@
+/* Deliberately not a size container. Inline-size containment removes an element's own intrinsic
+   width, so every host that sizes to its contents — a flex row, an inline-block, a grid `auto`
+   track, a table cell — measured this editor as nothing and the rows spilled out of a 26px sliver.
+   `inline-size: 100%` does not rescue it either: the percentage resolves against a containing
+   block that was itself measured from the contribution containment had already zeroed. The row
+   below reflows on its own instead, which reads the width that actually matters — the row's.
+
+   Without containment `inline-size: 100%` does work: a percentage that has no definite containing
+   block to resolve against counts as `auto` while the host measures its contents, so the editor
+   contributes its real width and then fills whatever the host settled on. */
 .zx-multi-value-editor {
   display: grid;
   gap: var(--zx-space-3);
   min-inline-size: 0;
+  inline-size: 100%;
   padding: var(--zx-space-3);
   border: 1px solid var(--zx-color-border);
   border-radius: var(--zx-radius-lg);
   background: var(--zx-color-bg-surface);
-  container-type: inline-size;
 }
 
 .zx-multi-value-editor__rows {
@@ -15,19 +25,32 @@
 }
 
 .zx-multi-value-editor__row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  /* A grid item refuses to go under its min-content width unless told to, which in a pane narrower
+     than the control cluster pushed the whole row back out through the editor's side. */
+  min-inline-size: 0;
   gap: var(--zx-space-2);
   align-items: center;
 }
 
+/* Below roughly this basis the controls wrap onto a line of their own, which is what the container
+   query used to do — except a row measures the space the row actually has. */
 .zx-multi-value-editor__value {
-  inline-size: 100%;
+  flex: 1 1 11rem;
+  min-inline-size: 0;
 }
 
+/* Wide enough and this keeps its natural size at the end of the row; narrower than the buttons it
+   holds, and they wrap among themselves rather than out through the side. */
 .zx-multi-value-editor__controls {
   display: inline-flex;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  min-inline-size: 0;
   gap: var(--zx-space-1);
+  margin-inline-start: auto;
 }
 
 .zx-multi-value-editor__controls .zx-btn {
@@ -35,22 +58,83 @@
   padding-inline: var(--zx-space-2);
 }
 
-.zx-multi-value-editor__controls .zx-btn:last-child {
+.zx-multi-value-editor__controls .zx-btn[data-action="remove"] {
   color: var(--zx-color-danger);
 }
 
+/* A row at either end keeps its move button focusable and merely announces that it cannot go
+   further, so pressing it repeatedly never drops focus to the document. */
+.zx-multi-value-editor__controls .zx-btn[aria-disabled="true"] {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.zx-multi-value-editor__controls .zx-btn[aria-disabled="true"]:hover {
+  background: var(--zx-color-bg-control);
+}
+
+.zx-multi-value-editor__handle {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  min-block-size: var(--zx-control-height);
+  min-inline-size: var(--zx-space-6);
+  padding: 0;
+  border: 0;
+  border-radius: var(--zx-control-radius);
+  background: none;
+  color: var(--zx-color-text-muted);
+  cursor: grab;
+  touch-action: none;
+  transition: color var(--zx-dur-fast) var(--zx-ease),
+    background-color var(--zx-dur-fast) var(--zx-ease);
+}
+
+.zx-multi-value-editor__handle:hover:not(:disabled) {
+  background: var(--zx-color-bg-hover);
+  color: var(--zx-color-text);
+}
+
+.zx-multi-value-editor__handle:focus-visible {
+  outline: none;
+  box-shadow: var(--zx-focus-ring);
+}
+
+.zx-multi-value-editor__handle:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+.zx-multi-value-editor[data-state="dragging"] .zx-multi-value-editor__handle {
+  cursor: grabbing;
+}
+
+.zx-multi-value-editor__row[data-dragging="true"] {
+  opacity: 0.45;
+}
+
+/* The line sits in the gap between two rows, so it reads as "it lands here", not "it replaces
+   this row". */
+.zx-multi-value-editor__row[data-drop]::after {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  block-size: 2px;
+  border-radius: var(--zx-radius-full);
+  background: var(--zx-color-accent);
+}
+
+.zx-multi-value-editor__row[data-drop="before"]::after {
+  inset-block-start: calc(var(--zx-space-2) / -2 - 1px);
+}
+
+.zx-multi-value-editor__row[data-drop="after"]::after {
+  inset-block-end: calc(var(--zx-space-2) / -2 - 1px);
+}
+
 .zx-multi-value-editor__add {
   justify-self: start;
   border-color: var(--zx-color-accent);
   color: var(--zx-color-accent);
 }
-
-@container (max-width: 24rem) {
-  .zx-multi-value-editor__row {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
-  .zx-multi-value-editor__controls {
-    justify-self: end;
-  }
-}

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

@@ -1,15 +1,39 @@
 import { Component } from '../../core/component.js';
 import { h } from '../../core/dom.js';
+import { icon } from '../../core/icons.js';
 
 /**
  * @typedef {Object} MultiValueEditorOptions
  * @property {unknown[]} [values=[]] Initial ordered values.
  * @property {unknown[]|Record<string, string>|null} [options=null] Allowed values; null uses text inputs.
  * @property {string} [addLabel='Add value'] Add-row button text.
+ * @property {'both'|'buttons'|'drag'|'none'} [reorder='both'] Reordering affordances each row gets:
+ *   a drag handle, the up/down buttons, both, or neither.
+ * @property {(event: CustomEvent<{values: string[]}>) => void} [onchange] Values change listener.
  */
 
+/** Affordances each `reorder` setting turns on. */
+const REORDER = Object.freeze({
+  both: { drag: true, buttons: true },
+  buttons: { drag: false, buttons: true },
+  drag: { drag: true, buttons: false },
+  none: { drag: false, buttons: false }
+});
+
+/** Focusable parts of a row, so a re-render can put focus back where the reader left it. */
+const PARTS = Object.freeze({
+  value: '.zx-multi-value-editor__value',
+  handle: '.zx-multi-value-editor__handle',
+  up: '[data-action="up"]',
+  down: '[data-action="down"]'
+});
+
 /**
  * Ordered value editor with explicit editable rows and controls.
+ *
+ * Rows reorder by dragging their handle or by pressing the up/down buttons — `reorder` picks which
+ * of the two a row offers. The handle is also a keyboard control (arrows, Home, End), so drag-only
+ * mode still reorders without a pointer.
  * @fires MultiValueEditor#change
  * @extends {Component<MultiValueEditorOptions>}
  */
@@ -17,13 +41,18 @@ export class MultiValueEditor extends Component {
   static cssName = 'multi-value-editor';
 
   /** @type {MultiValueEditorOptions} */
-  static defaults = { values: [], options: null, addLabel: 'Add value' };
+  static defaults = { values: [], options: null, addLabel: 'Add value', reorder: 'both' };
 
   /** @returns {HTMLElement} */
   render() {
     const root = /** @type {HTMLElement} */ (this.el ?? h('div'));
+    this.el = root;
     this._values = Array.isArray(this.options.values) ? this.options.values.map(String) : [];
     this._ownedNodes = [];
+    this._initialState = root.getAttribute('data-state');
+    this._dragIndex = -1;
+    /** @type {HTMLElement|null} Row made draggable by a pointer press on its handle. */
+    this._armed = null;
     this._rows = h('div', { class: 'zx-multi-value-editor__rows' });
     this._add = h('button', {
       class: 'zx-btn zx-multi-value-editor__add',
@@ -34,6 +63,19 @@ export class MultiValueEditor extends Component {
     root.append(this._rows, this._add);
     this.listen(root, 'click', (event) => this._handleClick(event));
     this.listen(this._rows, 'change', (event) => this._handleChange(event));
+    this.listen(this._rows, 'keydown', (event) => this._handleKeydown(event));
+    if (this._reorder().drag) {
+      this.listen(this._rows, 'pointerdown', (event) => this._handlePointerDown(event));
+      this.listen(this._rows, 'dragstart', (event) => this._handleDragStart(event));
+      this.listen(this._rows, 'dragover', (event) => this._handleDragOver(event));
+      this.listen(this._rows, 'dragleave', (event) => this._handleDragLeave(event));
+      this.listen(this._rows, 'drop', (event) => this._handleDrop(event));
+      this.listen(this._rows, 'dragend', () => this._finishDrag());
+      // A press that never became a drag still has to disarm the row, and its pointerup can land
+      // anywhere — including outside the component.
+      this.listen(document, 'pointerup', () => this._disarm());
+      this.listen(document, 'pointercancel', () => this._disarm());
+    }
     this._renderRows();
     return root;
   }
@@ -59,16 +101,32 @@ export class MultiValueEditor extends Component {
     return this;
   }
 
-  /** @param {number} [focusIndex=-1] @returns {void} */
-  _renderRows(focusIndex = -1) {
+  /** @returns {{drag: boolean, buttons: boolean}} */
+  _reorder() {
+    return REORDER[this.options.reorder] ?? REORDER.both;
+  }
+
+  /**
+   * @param {number} [focusIndex=-1] Row to focus after the render, or -1 for none.
+   * @param {keyof PARTS} [focusPart='value'] Which control of that row takes focus.
+   * @returns {void}
+   */
+  _renderRows(focusIndex = -1, focusPart = 'value') {
     const choices = normalizeOptions(this.options.options);
     const useSelect = this.options.options !== null;
+    const { drag, buttons } = this._reorder();
+    const last = this._values.length - 1;
     const rows = this._values.map((value, index) => {
+      // An option list that has lost a stored value still has to round-trip it, or `getValues()`
+      // would quietly return something the select never showed.
+      const entries = !useSelect || choices.some(([option]) => option === value)
+        ? choices
+        : [[value, value], ...choices];
       const control = useSelect ? h('select', {
         class: 'zx-multi-value-editor__value',
         ariaLabel: `Value ${index + 1}`,
         dataset: { index }
-      }, choices.map(([optionValue, label]) => h('option', {
+      }, entries.map(([optionValue, label]) => h('option', {
         value: optionValue,
         selected: optionValue === value
       }, label))) : h('input', {
@@ -79,39 +137,52 @@ export class MultiValueEditor extends Component {
         dataset: { index }
       });
       return h('div', { class: 'zx-multi-value-editor__row', dataset: { row: index } },
+        drag ? h('button', {
+          class: 'zx-multi-value-editor__handle',
+          type: 'button',
+          ariaLabel: `Reorder value ${index + 1}. Use the arrow keys to move it.`,
+          dataset: { action: 'grab', index }
+        }, icon('drag', { size: 12 })) : null,
         control,
         h('div', { class: 'zx-multi-value-editor__controls' },
-          h('button', {
+          buttons ? h('button', {
             class: 'zx-btn',
             type: 'button',
-            disabled: index === 0,
+            // `aria-disabled` rather than `disabled`: the buttons re-render on every move, and a
+            // control that disables itself under the reader's finger drops focus to the document.
+            ariaDisabled: String(index === 0),
             ariaLabel: `Move value ${index + 1} up`,
             dataset: { action: 'up', index }
-          }, '↑'),
-          h('button', {
+          }, icon('chevron-up', { size: 12 })) : null,
+          buttons ? h('button', {
             class: 'zx-btn',
             type: 'button',
-            disabled: index === this._values.length - 1,
+            ariaDisabled: String(index === last),
             ariaLabel: `Move value ${index + 1} down`,
             dataset: { action: 'down', index }
-          }, '↓'),
+          }, icon('chevron-down', { size: 12 })) : null,
           h('button', {
             class: 'zx-btn',
             type: 'button',
             ariaLabel: `Remove value ${index + 1}`,
             dataset: { action: 'remove', index }
-          }, '×')
+          }, icon('x', { size: 12 }))
         )
       );
     });
     this._rows.replaceChildren(...rows);
-    if (focusIndex >= 0) rows[focusIndex]?.querySelector('.zx-multi-value-editor__value')?.focus();
+    if (focusIndex >= 0) {
+      const row = rows[Math.min(focusIndex, rows.length - 1)];
+      /** @type {HTMLElement|null|undefined} */
+      (row?.querySelector(PARTS[focusPart] ?? PARTS.value))?.focus();
+    }
   }
 
   /** @param {MouseEvent} event @returns {void} */
   _handleClick(event) {
     const button = event.target instanceof Element ? event.target.closest('[data-action]') : null;
     if (!button || !this.el.contains(button)) return;
+    if (button.getAttribute('aria-disabled') === 'true') return;
     const action = button.dataset.action;
     const index = Number(button.dataset.index);
     if (action === 'add') {
@@ -124,24 +195,169 @@ export class MultiValueEditor extends Component {
       this._renderRows(Math.min(index, this._values.length - 1));
       this._emitChange();
     } else if ((action === 'up' || action === 'down') && Number.isInteger(index)) {
-      const target = index + (action === 'up' ? -1 : 1);
-      if (target < 0 || target >= this._values.length) return;
-      [this._values[index], this._values[target]] = [this._values[target], this._values[index]];
-      this._renderRows(target);
-      this._emitChange();
+      // Focus stays on the button that moved the row, so the reader can press it again.
+      this._move(index, index + (action === 'up' ? -1 : 1), action);
     }
   }
 
   /** @param {Event} event @returns {void} */
   _handleChange(event) {
     const control = event.target instanceof Element ? event.target.closest('[data-index]') : null;
-    if (!control) return;
+    if (!control || !('value' in control)) return;
     const index = Number(control.dataset.index);
     if (!Number.isInteger(index) || index < 0 || index >= this._values.length) return;
     this._values[index] = control.value;
     this._emitChange();
   }
 
+  /**
+   * The handle is the keyboard equivalent of dragging it, so `reorder: 'drag'` is still operable
+   * without a pointer.
+   * @param {KeyboardEvent} event
+   * @returns {void}
+   */
+  _handleKeydown(event) {
+    const handle = event.target instanceof Element
+      ? event.target.closest('.zx-multi-value-editor__handle')
+      : null;
+    if (!handle) return;
+    const index = Number(handle.dataset.index);
+    const target = event.key === 'ArrowUp' ? index - 1
+      : event.key === 'ArrowDown' ? index + 1
+        : event.key === 'Home' ? 0
+          : event.key === 'End' ? this._values.length - 1
+            : -1;
+    if (target < 0 || target >= this._values.length) return;
+    event.preventDefault();
+    this._move(index, target, 'handle');
+  }
+
+  /**
+   * Arms the row for dragging. Only the handle does this, so text selection inside a row's input
+   * keeps working and a stray drag cannot reorder anything.
+   * @param {PointerEvent} event
+   * @returns {void}
+   */
+  _handlePointerDown(event) {
+    const handle = event.target instanceof Element
+      ? event.target.closest('.zx-multi-value-editor__handle')
+      : null;
+    this._disarm();
+    if (!handle || handle.disabled) return;
+    const row = /** @type {HTMLElement|null} */ (handle.closest('.zx-multi-value-editor__row'));
+    if (!row) return;
+    row.draggable = true;
+    this._armed = row;
+  }
+
+  /** @returns {void} */
+  _disarm() {
+    if (this._armed) this._armed.draggable = false;
+    this._armed = null;
+  }
+
+  /** @param {DragEvent} event @returns {void} */
+  _handleDragStart(event) {
+    const row = event.target instanceof Element
+      ? event.target.closest('.zx-multi-value-editor__row')
+      : null;
+    if (!row || row !== this._armed) {
+      event.preventDefault();
+      return;
+    }
+    this._dragIndex = Number(row.dataset.row);
+    row.dataset.dragging = 'true';
+    this.el.setAttribute('data-state', 'dragging');
+    event.dataTransfer?.setData('text/plain', String(this._dragIndex));
+    if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move';
+  }
+
+  /** @param {DragEvent} event @returns {void} */
+  _handleDragOver(event) {
+    if (this._dragIndex < 0) return;
+    event.preventDefault();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';
+    this._showDrop(this._dropTarget(event.clientY));
+  }
+
+  /** @param {DragEvent} event @returns {void} */
+  _handleDragLeave(event) {
+    const to = event.relatedTarget;
+    if (to instanceof Node && this._rows.contains(to)) return;
+    this._clearDrop();
+  }
+
+  /** @param {DragEvent} event @returns {void} */
+  _handleDrop(event) {
+    if (this._dragIndex < 0) return;
+    event.preventDefault();
+    const from = this._dragIndex;
+    const slot = this._dropTarget(event.clientY);
+    this._finishDrag();
+    // The slot is an insertion point in the list as it stands; lifting the row out shifts every
+    // slot after it down by one.
+    this._move(from, slot > from ? slot - 1 : slot, 'handle');
+  }
+
+  /** @returns {void} */
+  _finishDrag() {
+    this._dragIndex = -1;
+    this._disarm();
+    this._clearDrop();
+    for (const row of this._rows.children) delete (/** @type {HTMLElement} */ (row)).dataset.dragging;
+    if (this._initialState === null) this.el.removeAttribute('data-state');
+    else this.el.setAttribute('data-state', this._initialState);
+  }
+
+  /**
+   * Insertion slot (0…length) for a pointer at `clientY`.
+   * @param {number} clientY Pointer position.
+   * @returns {number}
+   */
+  _dropTarget(clientY) {
+    const rows = [...this._rows.children];
+    for (const [index, row] of rows.entries()) {
+      const box = row.getBoundingClientRect();
+      if (clientY < box.top + box.height / 2) return index;
+    }
+    return rows.length;
+  }
+
+  /** @param {number} slot Insertion slot to mark. @returns {void} */
+  _showDrop(slot) {
+    const rows = [...this._rows.children];
+    // Dropping either side of the row being dragged puts it back where it was; showing a line
+    // there would promise a move that does not happen.
+    const inert = slot === this._dragIndex || slot === this._dragIndex + 1;
+    for (const [index, row] of rows.entries()) {
+      const cell = /** @type {HTMLElement} */ (row);
+      if (!inert && index === slot) cell.dataset.drop = 'before';
+      else if (!inert && slot === rows.length && index === rows.length - 1) cell.dataset.drop = 'after';
+      else delete cell.dataset.drop;
+    }
+  }
+
+  /** @returns {void} */
+  _clearDrop() {
+    for (const row of this._rows.children) delete (/** @type {HTMLElement} */ (row)).dataset.drop;
+  }
+
+  /**
+   * @param {number} from Index to move.
+   * @param {number} to Destination index.
+   * @param {keyof PARTS} part Control of the moved row that takes focus.
+   * @returns {boolean} Whether anything moved.
+   */
+  _move(from, to, part) {
+    const size = this._values.length;
+    if (from === to || from < 0 || to < 0 || from >= size || to >= size) return false;
+    const [value] = this._values.splice(from, 1);
+    this._values.splice(to, 0, value);
+    this._renderRows(to, part);
+    this._emitChange();
+    return true;
+  }
+
   /** @returns {void} */
   _emitChange() {
     this.emit('change', { values: this.getValues() });
@@ -149,6 +365,8 @@ export class MultiValueEditor extends Component {
 
   /** @returns {void} */
   destroy() {
+    if (this._initialState === null) this.el?.removeAttribute('data-state');
+    else this.el?.setAttribute('data-state', this._initialState);
     for (const node of this._ownedNodes ?? []) node.remove();
     super.destroy();
   }
@@ -166,5 +384,5 @@ function normalizeOptions(options) {
 /**
  * Ordered values changed event.
  * @event MultiValueEditor#change
- * @type {CustomEvent<{values: string[]}>
+ * @type {CustomEvent<{values: string[]}>}
  */

package/src/components/navigation-bar/navigation-bar.css

@@ -1,6 +1,13 @@
 .zx-navigation-bar {
   min-inline-size: 0;
   container-type: inline-size;
+  /* A size container takes no width from its own contents, so in a shrink-to-fit host — a flex
+     row, an inline-block, a grid `auto` track — it would collapse to nothing and spill. Only the
+     host can size it, so it always fills the host. That covers every host with a width of its
+     own; a host that shrink-wraps *its* contents still collapses, because 100% then resolves
+     against a containing block this element's own containment zeroed. Dropping containment is the
+     only fix for that — see multi-value-editor.css. */
+  inline-size: 100%;
 }
 
 .zx-navigation-bar__bar {