@zeyos/zx 2.2.1 → 2.3.0

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

@@ -1,15 +1,38 @@
 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.
  */
 
+/** 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 +40,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 +62,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 +100,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 +136,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 +194,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 +364,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();
   }

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 {

package/src/components/permission/permission.js

@@ -18,6 +18,9 @@ import { Select } from '../select/select.js';
 /**
  * Record-permission choice for private, public, and group access.
  *
+ * @deprecated Use `Select.permission(target, {groups})`, which carries the same tri-state value in
+ * one control and accepts a loader function for installations whose group list is too long to ship
+ * with the form. This class stays for `gx.zeyos.Permission` and will be removed in 3.0.
  * @fires Permission#change
  * @extends {Component<PermissionOptions>}
  */

package/src/components/search/search.css

@@ -22,10 +22,18 @@
   padding-inline: var(--zx-control-pad-x) var(--zx-control-height);
 }
 
-.zx-search__input:focus-visible,
+/* The field draws one ring for the whole control (:focus-within above). Inner controls must not
+   add a second, smaller ring — an outset ring on the input cut the submit button out of the field.
+   The input rides the field ring; the buttons mark themselves with an inset one, as .zx-icon-btn
+   does, so the field's outline stays whole. The transparent outline from base.css is left in place
+   for forced-colors mode. */
+.zx-search__input:focus-visible {
+  box-shadow: none;
+}
+
 .zx-search__clear:focus-visible,
 .zx-search__submit:focus-visible {
-  box-shadow: var(--zx-focus-ring);
+  box-shadow: inset var(--zx-focus-ring);
 }
 
 .zx-search__input::-webkit-search-cancel-button {

package/src/components/select/select.css

@@ -137,6 +137,12 @@
   text-transform: uppercase;
 }
 
+.zx-select__separator {
+  block-size: 1px;
+  margin: var(--zx-space-1) var(--zx-control-pad-x);
+  background: var(--zx-color-border);
+}
+
 .zx-select__empty {
   color: var(--zx-color-text-muted);
   padding: var(--zx-space-3) var(--zx-control-pad-x);

package/src/components/select/select.js

@@ -13,6 +13,7 @@ import { matchItems } from './filter.js';
 /**
  * @typedef {Object} SelectOptions
  * @property {SelectItem[]} [items=[]] Available values.
+ * @property {SelectItem[]} [fixedItems=[]] Choices pinned above the list, kept through filtering and async loads.
  * @property {SelectValueReader} [valueKey='ID'] Item ID property or reader.
  * @property {SelectLabelReader} [labelKey='name'] Item label property or reader.
  * @property {((item: SelectItem) => Node|string)|null} [renderItem=null] Option renderer.
@@ -65,6 +66,7 @@ export class Select extends Component {
   /** @type {SelectOptions} */
   static defaults = {
     items: [],
+    fixedItems: [],
     valueKey: 'ID',
     labelKey: 'name',
     renderItem: null,
@@ -86,7 +88,7 @@ export class Select extends Component {
   render() {
     // Instance state initialized here because render() runs inside the base
     // constructor, before class-field initializers would run (and clobber it).
-    this._items = []; this._visibleItems = []; this._selected = null; this._optionEntries = []; this._activeIndex = -1; this._open = false; this._disabled = false; this._loading = false; this._requestSequence = 0; this._queryTimer = null; this._position = null; this._createdRoot = false; this._root = null; this._originalChildren = []; this._originalAttributes = new Map();
+    this._items = []; this._visibleItems = []; this._fixedItems = []; this._visibleFixed = []; this._selected = null; this._optionEntries = []; this._activeIndex = -1; this._open = false; this._disabled = false; this._loading = false; this._requestSequence = 0; this._queryTimer = null; this._position = null; this._createdRoot = false; this._root = null; this._originalChildren = []; this._originalAttributes = new Map();
     this._createdRoot = this.el === null;
     const root = /** @type {HTMLElement} */ (this.el ?? h('div'));
     this.el = root;
@@ -151,6 +153,8 @@ export class Select extends Component {
 
     this._items = Array.isArray(this.options.items) ? this.options.items.slice() : [];
     this._visibleItems = this._items.slice();
+    this._fixedItems = Array.isArray(this.options.fixedItems) ? this.options.fixedItems.slice() : [];
+    this._visibleFixed = this._fixedItems.slice();
     this._disabled = Boolean(this.options.disabled);
     this._handleTypeahead = typeahead(
       () => this._optionEntries.filter((entry) => !entry.clear).map((entry) => entry.element),
@@ -228,8 +232,23 @@ export class Select extends Component {
     const selectedValue = this.value;
     this._items = Array.isArray(items) ? items.slice() : [];
     this._visibleItems = this._items.slice();
-    this._selected = selectedValue == null ? null :
-      this._items.find((item) => Object.is(this._itemValue(item), selectedValue)) ?? null;
+    this._selected = selectedValue == null ? null : this._findItem(selectedValue);
+    this._syncInputValue();
+    this._renderOptions();
+    this._position?.update();
+    return this;
+  }
+
+  /**
+   * Replaces the pinned choices and preserves selection by ID when possible.
+   * @param {SelectItem[]} items New fixed items.
+   * @returns {this}
+   */
+  setFixedItems(items) {
+    const selectedValue = this.value;
+    this._fixedItems = Array.isArray(items) ? items.slice() : [];
+    this._visibleFixed = this._fixedItems.slice();
+    this._selected = selectedValue == null ? null : this._findItem(selectedValue);
     this._syncInputValue();
     this._renderOptions();
     this._position?.update();
@@ -283,6 +302,7 @@ export class Select extends Component {
     this.refs.input.removeAttribute('aria-activedescendant');
     this._activeIndex = -1;
     this._visibleItems = this._items.slice();
+    this._visibleFixed = this._fixedItems.slice();
     this._syncInputValue();
     this.emit('close', {});
     return this;
@@ -341,6 +361,40 @@ export class Select extends Component {
     return select;
   }
 
+  /**
+   * Creates the record-permission picker: the fixed Private and Public choices above the groups a
+   * record can be shared with. The value is the tri-state ZeyOS stores — `false` for private,
+   * `true` for public, or a group ID — so the control binds straight to the record field.
+   *
+   * @param {Element|string|null} target Component target.
+   * @param {SelectOptions & {groups?: SelectItem[]|((query: string) => Promise<SelectItem[]>|SelectItem[])}} [options={}]
+   *   Select overrides other than the fixed choices; `groups` holds the shareable groups, either as
+   *   an array (filtered locally) or as a loader function (queried remotely).
+   * @returns {Select}
+   */
+  static permission(target, options = {}) {
+    const { groups = [], value = true, valueKey = 'ID', labelKey = 'name', ...rest } = options;
+    const loader = typeof groups === 'function' ? groups : null;
+    const shareable = loader ? [] : groups;
+    const choices = [{ ID: false, name: 'Private' }, { ID: true, name: 'Public' }];
+    const select = new Select(target, {
+      filter: loader ?? 'local',
+      ...rest,
+      value: null,
+      items: shareable,
+      fixedItems: [],
+      // The two choices carry their own ID and label, so a caller's group readers stay untouched.
+      valueKey: (item) => choices.includes(item) ? item.ID : readItem(item, valueKey),
+      labelKey: (item) => choices.includes(item) ?
+        item.name : String(readItem(item, labelKey) ?? '')
+    });
+    choices[0].name = select._message('permission.private', 'Private');
+    choices[1].name = select._message('permission.public', 'Public');
+    select.setFixedItems(choices);
+    select.set(value, { silent: true });
+    return select;
+  }
+
   /** Cleans up the panel, pending async work, and enhanced target contents. @returns {void} */
   destroy() {
     this._cancelQuery();
@@ -407,8 +461,8 @@ export class Select extends Component {
     const query = /** @type {HTMLInputElement} */ (this.refs.input).value;
     if (!this._open) this.open();
     if (this.options.filter === 'local') {
-      const keys = this.options.searchKeys ?? [this.options.labelKey];
-      this._visibleItems = matchItems(this._items, query, keys);
+      this._visibleFixed = this._matchFixed(query);
+      this._visibleItems = matchItems(this._items, query, this._searchKeys());
       this._renderOptions();
       this._setActive(this._optionEntries.length > 0 ? 0 : -1);
       this._position?.update();
@@ -466,6 +520,11 @@ export class Select extends Component {
     if (this.options.clearable) {
       this._appendOption(null, true, this.options.placeholder || this._message('select.none', 'No selection'));
     }
+    for (const item of this._visibleFixed) this._appendOption(item, false);
+    // A group heading already divides the two sections, and a rule right above one reads as a slip.
+    if (this._visibleFixed.length > 0 && this._visibleItems.length > 0 && !this.options.groupKey) {
+      list.append(h('div', { class: 'zx-select__separator', role: 'presentation' }));
+    }
     for (const item of this._visibleItems) {
       if (this.options.groupKey) {
         const group = this._read(item, this.options.groupKey);
@@ -479,7 +538,7 @@ export class Select extends Component {
       }
       this._appendOption(item, false);
     }
-    if (this._visibleItems.length === 0 && !this._loading) {
+    if (this._visibleItems.length === 0 && this._visibleFixed.length === 0 && !this._loading) {
       list.append(h('div', {
         class: 'zx-select__empty',
         role: 'status'
@@ -521,6 +580,7 @@ export class Select extends Component {
     if (this._queryTimer !== null) clearTimeout(this._queryTimer);
     this._requestSequence += 1;
     const sequence = this._requestSequence;
+    this._visibleFixed = this._matchFixed(query);
     if (query.length < Math.max(0, Number(this.options.minQuery) || 0)) {
       this._setLoading(false);
       this._visibleItems = [];
@@ -601,11 +661,14 @@ export class Select extends Component {
 
   /** @param {unknown} candidate @returns {SelectItem|null} */
   _findItem(candidate) {
-    const direct = this._items.find((item) => item === candidate);
+    // Fixed choices are searched too: an async filter replaces the item list on every query, so a
+    // pinned value would otherwise stop resolving the moment the first result arrived.
+    const pool = this._fixedItems.length === 0 ? this._items : [...this._fixedItems, ...this._items];
+    const direct = pool.find((item) => item === candidate);
     if (direct !== undefined) return direct;
     const value = candidate !== null && typeof candidate === 'object' ?
       this._itemValue(/** @type {SelectItem} */ (candidate)) : candidate;
-    return this._items.find((item) => Object.is(this._itemValue(item), value)) ?? null;
+    return pool.find((item) => Object.is(this._itemValue(item), value)) ?? null;
   }
 
   /** @param {SelectItem|null} item @returns {unknown} */
@@ -621,9 +684,22 @@ export class Select extends Component {
 
   /** @param {SelectItem|null} item @param {SelectValueReader|SelectLabelReader} reader @returns {unknown} */
   _read(item, reader) {
-    if (typeof reader === 'function') return reader(item);
-    if (item === null || typeof item !== 'object') return item;
-    return item[reader];
+    return readItem(item, reader);
+  }
+
+  /** @returns {Array<SelectValueReader|SelectLabelReader>} */
+  _searchKeys() {
+    return this.options.searchKeys ?? [this.options.labelKey];
+  }
+
+  /**
+   * Narrows the pinned choices. They are always matched here and never handed to a filter
+   * function: a fixed choice belongs to the control, not to whatever the remote source returns.
+   * @param {string} query Search text.
+   * @returns {SelectItem[]}
+   */
+  _matchFixed(query) {
+    return matchItems(this._fixedItems, query, this._searchKeys());
   }
 
   /** @returns {number} */
@@ -657,6 +733,18 @@ export class Select extends Component {
 /** Async-query start notification. @event Select#query @type {CustomEvent<SelectQueryDetail>} */
 /** Async results notification. @event Select#loaded @type {CustomEvent<SelectLoadedDetail>} */
 
+/**
+ * Reads a value off an item through a property name or a reader function.
+ * @param {SelectItem|null} item Item to read.
+ * @param {SelectValueReader|SelectLabelReader} reader Property name or reader.
+ * @returns {unknown}
+ */
+function readItem(item, reader) {
+  if (typeof reader === 'function') return reader(item);
+  if (item === null || typeof item !== 'object') return item;
+  return item[reader];
+}
+
 /** @param {KeyboardEvent} event @returns {boolean} */
 function isPrintable(event) {
   return event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;

package/src/components/stepper/stepper.css

@@ -175,13 +175,23 @@ button.zx-stepper__control:disabled {
   gap: var(--zx-space-2);
 }
 
+/* Every step but the last one grows, and inside it only the connector can take the extra, so the
+   rail spans its container: the labels stay their own width and the rules stretch between them.
+   The last step is left shrink-to-fit — growing it would strand the space behind its label. */
 .zx-stepper[data-orientation="horizontal"] .zx-stepper__step {
   flex: 0 1 auto;
   gap: var(--zx-space-2);
 }
 
-/* The connector doubles as the flexible gap, so the steps size to their labels and the rules
-   absorb whatever is left over. */
+.zx-stepper[data-orientation="horizontal"] .zx-stepper__step:not(:last-child) {
+  flex: 1 1 auto;
+}
+
+/* The slack belongs to the connector, not to the label, so hover chrome keeps hugging the text. */
+.zx-stepper[data-orientation="horizontal"] .zx-stepper__control {
+  flex: 0 1 auto;
+}
+
 .zx-stepper[data-orientation="horizontal"] .zx-stepper__step:not(:last-child)::after {
   content: "";
   flex: 1 1 var(--zx-space-6);