@zeyos/zx 4.3.4 → 5.0.0

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

@@ -29,7 +29,8 @@
   padding-inline: var(--zx-space-2);
   color: var(--zx-color-accent);
   font-size: var(--zx-text-xl);
-  font-weight: 750;
+  font-weight: 650;
+  letter-spacing: var(--zx-tracking-title);
 }
 
 .zx-navigation-bar__navigation {
@@ -51,10 +52,11 @@
   gap: var(--zx-space-2);
   border: 0;
   border-radius: var(--zx-control-radius);
-  background: var(--zx-color-bg-raised);
+  background: transparent;
   padding-inline: var(--zx-control-pad-x);
   color: var(--zx-color-text-muted);
   font: inherit;
+  font-weight: var(--zx-weight-medium);
   text-decoration: none;
   cursor: pointer;
 }
@@ -64,11 +66,12 @@
   color: var(--zx-color-text);
 }
 
+/* Where you are, not a pick: the neutral current fill, the full text colour, a heavier label. */
 .zx-navigation-bar__item[aria-current="page"],
 .zx-navigation-bar__item[aria-selected="true"] {
-  background: var(--zx-color-bg-selected);
-  color: var(--zx-color-accent);
-  font-weight: 650;
+  background: var(--zx-color-bg-current);
+  color: var(--zx-color-text);
+  font-weight: var(--zx-weight-semibold);
 }
 
 .zx-navigation-bar__item[aria-disabled="true"] {
@@ -81,18 +84,24 @@
   box-shadow: var(--zx-focus-ring);
 }
 
+/* A count beside a label, not a call to action: neutral, like the Tabbox count. */
 .zx-navigation-bar__badge {
   min-inline-size: var(--zx-space-4);
   border-radius: var(--zx-radius-full);
-  background: var(--zx-color-accent);
+  background: var(--zx-color-bg-current);
   padding-inline: var(--zx-space-1);
-  color: var(--zx-color-on-accent);
-  font-size: var(--zx-text-sm);
-  font-weight: 700;
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--zx-weight-medium);
   line-height: var(--zx-space-4);
   text-align: center;
 }
 
+.zx-navigation-bar__item:is([aria-current="page"], [aria-selected="true"]) .zx-navigation-bar__badge {
+  color: var(--zx-color-text);
+}
+
 .zx-navigation-bar__more {
   display: none;
 }
@@ -138,12 +147,87 @@
   box-shadow: inset var(--zx-focus-ring);
 }
 
+/*
+ * Overflow.
+ *
+ * Three modes, written by the component onto the root as `data-overflow`:
+ *
+ *   all      — every item collapses (the default, `minVisible: 0`): the row is taken out and the
+ *              More button replaces it, which is what a top app bar wants.
+ *   partial  — `minVisible` items stay in the row and the rest move into the menu. The row and
+ *              the button are then on screen together, which is the one case the navigation has
+ *              to lay them out side by side.
+ *   off      — `overflow: false` or `overflowBelow: false`: nothing ever collapses, and the
+ *              More button never appears at any width.
+ *
+ * The threshold is the awkward part, because a container query cannot read a custom property. So
+ * the default threshold lives here, in the query below, and any other one is measured by the
+ * component, which writes `data-overflow-below` (stand down, this bar has its own threshold) and
+ * `data-narrow`. The two blocks carry the same three declarations for that reason — a change to
+ * one belongs in the other.
+ */
+.zx-navigation-bar[data-overflow="partial"] .zx-navigation-bar__navigation {
+  display: flex;
+  align-items: center;
+  gap: var(--zx-space-1);
+}
+
+/*
+ * `partial` and `off` are the two modes that keep items in the row at a width the row was never
+ * going to fit: `minVisible` is a promise that those items stay, not that they fit, and
+ * `overflow: false` is the same promise for all of them. They give way by truncating their own
+ * labels rather than by spilling out of the bar. The badge and the More button keep their size —
+ * a count that says "4" and a button that says "More" have nothing to give.
+ *
+ * The default `all` mode is deliberately not in this list: it takes the whole row out instead, and
+ * it never has both on screen at once.
+ */
+.zx-navigation-bar[data-overflow="partial"] .zx-navigation-bar__item,
+.zx-navigation-bar[data-overflow="partial"] .zx-navigation-bar__label,
+.zx-navigation-bar[data-overflow="off"] .zx-navigation-bar__item,
+.zx-navigation-bar[data-overflow="off"] .zx-navigation-bar__label {
+  min-inline-size: 0;
+}
+
+.zx-navigation-bar[data-overflow="partial"] .zx-navigation-bar__label,
+.zx-navigation-bar[data-overflow="off"] .zx-navigation-bar__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.zx-navigation-bar[data-overflow="partial"] .zx-navigation-bar__badge,
+.zx-navigation-bar[data-overflow="partial"] .zx-navigation-bar__more,
+.zx-navigation-bar[data-overflow="off"] .zx-navigation-bar__badge {
+  flex: none;
+}
+
 @container (max-width: 44rem) {
-  .zx-navigation-bar__items {
+  .zx-navigation-bar[data-overflow="all"]:not([data-overflow-below]) .zx-navigation-bar__items {
     display: none;
   }
 
-  .zx-navigation-bar__more:not([data-empty="true"]) {
+  .zx-navigation-bar[data-overflow="partial"]:not([data-overflow-below])
+    .zx-navigation-bar__item[data-collapsed="true"] {
+    display: none;
+  }
+
+  .zx-navigation-bar:not([data-overflow="off"]):not([data-overflow-below])
+    .zx-navigation-bar__more:not([data-empty="true"]) {
     display: inline-flex;
   }
 }
+
+.zx-navigation-bar[data-overflow="all"][data-narrow="true"] .zx-navigation-bar__items {
+  display: none;
+}
+
+.zx-navigation-bar[data-overflow="partial"][data-narrow="true"]
+  .zx-navigation-bar__item[data-collapsed="true"] {
+  display: none;
+}
+
+.zx-navigation-bar[data-narrow="true"]:not([data-overflow="off"])
+  .zx-navigation-bar__more:not([data-empty="true"]) {
+  display: inline-flex;
+}

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

@@ -35,9 +35,29 @@ import { MenuButton } from '../menu-button/menu-button.js';
  * @property {NavigationItem[]} [items=[]] Navigation items.
  * @property {string|null} [active=null] Initially active item, or the first enabled item.
  * @property {NavigationAction[]} [actions=[]] Right-aligned action elements or descriptors.
+ * @property {boolean} [overflow=true] Whether items collapse into the overflow menu at all.
+ *   `false` keeps every item in the bar at every width and never shows the More button.
+ * @property {string|number|false} [overflowBelow='44rem'] Container inline size at or below which
+ *   items collapse, as a `px` or `rem` length (a number is read as `px`); `false` disables
+ *   collapsing exactly as `overflow: false` does. The default is the threshold the stylesheet's
+ *   own container query carries, and a bar that keeps it collapses in CSS without measuring
+ *   itself; any other value is watched with a `ResizeObserver`.
+ * @property {number} [minVisible=0] How many items, counted from the start, never collapse. The
+ *   default collapses all of them, which is right for a top app bar and wrong for a phone bottom
+ *   bar — `minVisible: 4` is what makes that bar usable.
  * @property {(event: CustomEvent<{name: string}>) => void} [onchange] Change callback.
  */
 
+/**
+ * The container width `navigation-bar.css` collapses at. A bar that keeps this exact threshold is
+ * served by the stylesheet's container query, so it needs no measurement and no script at all;
+ * anything else has to be watched. Keep it in step with the `@container` rule.
+ */
+export const OVERFLOW_BELOW = '44rem';
+
+/** The lengths a threshold may be written in — the two a `ResizeObserver` can resolve alone. */
+const OVERFLOW_LENGTH = /^\d+(?:\.\d+)?(?:px|rem)$/;
+
 /**
  * @typedef {Object} NavigationRecord
  * @property {NavigationItem} definition Normalized item definition.
@@ -60,7 +80,10 @@ export class NavigationBar extends Component {
     title: '',
     items: [],
     active: null,
-    actions: []
+    actions: [],
+    overflow: true,
+    overflowBelow: OVERFLOW_BELOW,
+    minVisible: 0
   };
 
   /**
@@ -85,6 +108,7 @@ export class NavigationBar extends Component {
       if (record.definition.href) globalThis.location?.assign(record.definition.href);
     });
     this._syncOverflow();
+    this._observeWidth();
   }
 
   /** @returns {HTMLElement} */
@@ -100,6 +124,8 @@ export class NavigationBar extends Component {
     this._activeName = null;
     this._tabMode = false;
     this._overflow = null;
+    this._observer = null;
+    this._frame = 0;
 
     const bar = h('header', { class: 'zx-navigation-bar__bar' },
       h('div', { class: 'zx-navigation-bar__brand', ref: 'title' }),
@@ -257,6 +283,10 @@ export class NavigationBar extends Component {
   destroy() {
     if (this._cleaned) return;
     this._cleaned = true;
+    if (this._frame && typeof cancelAnimationFrame === 'function') cancelAnimationFrame(this._frame);
+    this._frame = 0;
+    this._observer?.disconnect();
+    this._observer = null;
     this._overflow?.destroy();
     super.destroy();
     if (!this._createdRoot && this._original) restore(this.el, this._original);
@@ -382,11 +412,34 @@ export class NavigationBar extends Component {
     }
   }
 
-  /** @returns {void} */
+  /**
+   * Republishes the overflow state: which items may collapse, which mode the stylesheet should
+   * apply, and what the More menu contains. With the default `minVisible: 0` every item collapses
+   * and the menu lists them all, which is what it has always done.
+   * @returns {void}
+   */
   _syncOverflow() {
+    const below = resolveOverflowBelow(this.options);
+    const minVisible = below === null
+      ? this._items.length
+      : resolveMinVisible(this.options, this._items.length);
+    const collapsing = this._items.slice(minVisible);
+    const root = /** @type {HTMLElement} */ (this.el);
+
+    for (const [index, record] of this._items.entries()) {
+      record.item.dataset.collapsed = String(index >= minVisible);
+    }
+    root.dataset.overflow = below === null ? 'off' : (minVisible === 0 ? 'all' : 'partial');
+    /*
+     * The attribute is the stylesheet's own switch: present means "a threshold I do not know", so
+     * the container query stands down and the observer below drives `data-narrow` instead.
+     */
+    if (below === null || below === OVERFLOW_BELOW) delete root.dataset.overflowBelow;
+    else root.dataset.overflowBelow = below;
+
     if (!this._overflow) return;
-    this.refs.more.dataset.empty = this._items.length === 0 ? 'true' : 'false';
-    this._overflow.setItems(this._items.map((record) => ({
+    this.refs.more.dataset.empty = collapsing.length === 0 ? 'true' : 'false';
+    this._overflow.setItems(collapsing.map((record) => ({
       label: record.definition.badge === null ? record.definition.title :
         `${record.definition.title} (${record.definition.badge})`,
       value: record.definition.name,
@@ -394,6 +447,53 @@ export class NavigationBar extends Component {
     })));
   }
 
+  /**
+   * Watches the bar's own inline size when `overflowBelow` names a threshold the stylesheet cannot
+   * express. A bar on the default threshold installs nothing: its container query has already
+   * decided before the first frame of script, which is why the default path stays exactly as it
+   * was.
+   * @returns {void}
+   */
+  _observeWidth() {
+    const below = resolveOverflowBelow(this.options);
+    if (below === null || below === OVERFLOW_BELOW) return;
+    if (typeof ResizeObserver !== 'function') return;
+    const root = /** @type {HTMLElement} */ (this.el);
+
+    const measure = () => {
+      const width = root.getBoundingClientRect().width;
+      /*
+       * Zero is not a narrow bar, it is no measurement at all — what an element reports before it
+       * has been laid out. Recording it would latch the collapsed state and never notice the real
+       * width, which is the failure `src/core/breakpoint.js` documents.
+       */
+      if (!width) return;
+      const rootElement = globalThis.document?.documentElement;
+      const rootFontSize = rootElement
+        ? Number.parseFloat(globalThis.getComputedStyle(rootElement).fontSize)
+        : Number.NaN;
+      // `<=`, because the container query this replaces is a `max-width` and that is inclusive.
+      root.dataset.narrow = String(width <= lengthToPixels(below, rootFontSize));
+    };
+
+    this._observer = new ResizeObserver(() => {
+      /*
+       * Answered on the next frame rather than inside the callback: collapsing the bar resizes the
+       * very element being observed, which the browser reports as an undelivered-notification loop.
+       */
+      if (this._frame || typeof requestAnimationFrame !== 'function') {
+        if (typeof requestAnimationFrame !== 'function') measure();
+        return;
+      }
+      this._frame = requestAnimationFrame(() => {
+        this._frame = 0;
+        measure();
+      });
+    });
+    this._observer.observe(root);
+    measure();
+  }
+
   /** @param {NavigationRecord} record @returns {void} */
   _focusTab(record) {
     for (const item of this._items) item.item.tabIndex = item === record ? 0 : -1;
@@ -424,6 +524,73 @@ export class NavigationBar extends Component {
  * @type {CustomEvent<{name: string}>}
  */
 
+/**
+ * Resolves the container inline size at or below which items collapse into the overflow menu.
+ *
+ * Two options can switch collapsing off, because they answer two different questions: `overflow`
+ * is whether the bar has an overflow menu at all, and `overflowBelow` is where it starts using it.
+ * Either being `false` means the same thing to the stylesheet — nothing ever collapses — so both
+ * resolve to `null` here and the caller has one state to handle rather than two.
+ * @param {NavigationBarOptions} [options={}] Navigation options, whole or partial.
+ * @returns {string|null} A `px` or `rem` length, or `null` when nothing ever collapses.
+ */
+export function resolveOverflowBelow(options = {}) {
+  const enabled = options.overflow ?? true;
+  if (typeof enabled !== 'boolean') {
+    throw new TypeError('NavigationBar overflow must be a boolean');
+  }
+  const below = options.overflowBelow ?? OVERFLOW_BELOW;
+  if (!enabled || below === false) return null;
+  if (typeof below === 'number') {
+    if (!Number.isFinite(below) || below < 0) {
+      throw new RangeError(`NavigationBar overflowBelow must not be negative: ${below}`);
+    }
+    return `${below}px`;
+  }
+  if (typeof below !== 'string' || !OVERFLOW_LENGTH.test(below.trim())) {
+    throw new TypeError(
+      `NavigationBar overflowBelow must be a px or rem length, a number of pixels, or false: ${String(below)}`
+    );
+  }
+  return below.trim();
+}
+
+/**
+ * How many items, counted from the start, stay in the bar when it collapses.
+ *
+ * Clamping to the item count is the whole arithmetic: `minVisible: 4` on a three-item bar keeps
+ * three, so the overflow menu is empty rather than holding a phantom fourth entry, and the bar
+ * hides its More button instead of opening onto nothing.
+ * @param {NavigationBarOptions} [options={}] Navigation options, whole or partial.
+ * @param {number} [count=0] How many items the bar currently has.
+ * @returns {number} A count between 0 and `count`.
+ */
+export function resolveMinVisible(options = {}, count = 0) {
+  const requested = options.minVisible ?? 0;
+  if (!Number.isInteger(requested) || requested < 0) {
+    throw new TypeError(`NavigationBar minVisible must be a non-negative integer: ${String(requested)}`);
+  }
+  const total = Number.isInteger(count) && count > 0 ? count : 0;
+  return Math.min(requested, total);
+}
+
+/**
+ * Converts an overflow threshold to pixels, so a measured width can be compared with it.
+ * @param {string|number} length A `px` or `rem` length, or a number of pixels.
+ * @param {number} [rootFontSize=16] Computed root font size; anything unusable falls back to 16.
+ * @returns {number} The threshold in pixels.
+ */
+export function lengthToPixels(length, rootFontSize = 16) {
+  const value = typeof length === 'number' ? `${length}px` : String(length).trim();
+  if (!OVERFLOW_LENGTH.test(value)) {
+    throw new TypeError(`NavigationBar cannot measure the length "${String(length)}"`);
+  }
+  const size = Number.parseFloat(value);
+  if (!value.endsWith('rem')) return size;
+  const root = Number(rootFontSize);
+  return size * (Number.isFinite(root) && root > 0 ? root : 16);
+}
+
 /** @param {unknown} content @returns {content is NavigationPanelContent} */
 function isPanelContent(content) {
   if (typeof content === 'function' || content instanceof Component) return true;

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

@@ -11,6 +11,7 @@ export function registerNumberFieldAdapter() {
       label: options.label ? String(options.label) : undefined,
       placeholder: options.placeholder,
       required: options.required,
+      name: field.name || null,
       ...(options.props ?? {})
     }));
     let setting = false;

package/src/components/number-field/number-field.css

@@ -75,3 +75,73 @@
   border-end-end-radius: var(--zx-control-radius);
   border-inline-start: 1px solid var(--zx-color-border-control);
 }
+
+/* In a Field the control fills its column, as a text input does, and gives way in a narrow one. */
+.zx-field__control > .zx-number-field {
+  display: flex;
+  inline-size: 100%;
+}
+
+.zx-field__control > .zx-number-field .zx-number-field__input {
+  min-inline-size: 0;
+}
+
+/*
+ * Quiet fields. Inside `[data-zx-fields="quiet"]` the number reads as text: no border, no fill,
+ * and the value at the start, where the text of the quiet fields around it starts. The steppers
+ * move after it, both at the trailing end, and stay hidden until hover or focus — kept in the
+ * layout, so nothing moves when they return. Focus brings back the border, the control fill and
+ * the focus ring. Disabled and read-only fields never light up.
+ */
+[data-zx-fields="quiet"] .zx-number-field {
+  border-color: transparent;
+  background: transparent;
+}
+
+[data-zx-fields="quiet"] .zx-number-field__input {
+  padding-inline-start: var(--zx-control-pad-x);
+  text-align: start;
+}
+
+[data-zx-fields="quiet"] .zx-number-field__step {
+  border-color: transparent;
+  opacity: 0;
+}
+
+[data-zx-fields="quiet"] .zx-number-field__step[data-step="down"] {
+  order: 1;
+  border-inline-end: 0;
+  border-inline-start: 1px solid transparent;
+  border-radius: 0;
+}
+
+[data-zx-fields="quiet"] .zx-number-field__step[data-step="up"] {
+  order: 2;
+}
+
+[data-zx-fields="quiet"] .zx-number-field:not([data-disabled], [data-readonly]):hover {
+  background: var(--zx-color-bg-hover);
+}
+
+[data-zx-fields="quiet"] .zx-number-field:not([data-disabled], [data-readonly]):is(:hover, :focus-within) .zx-number-field__step {
+  opacity: 1;
+}
+
+[data-zx-fields="quiet"] .zx-number-field:not([data-disabled], [data-readonly]):focus-within {
+  border-color: var(--zx-color-border-control);
+  background: var(--zx-color-bg-control);
+}
+
+[data-zx-fields="quiet"] .zx-number-field:not([data-disabled], [data-readonly]):focus-within .zx-number-field__step {
+  border-color: var(--zx-color-border-control);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  [data-zx-fields="quiet"] .zx-number-field {
+    transition: background-color var(--zx-dur-fast) var(--zx-ease), border-color var(--zx-dur-fast) var(--zx-ease);
+  }
+
+  [data-zx-fields="quiet"] .zx-number-field__step {
+    transition: opacity var(--zx-dur-fast) var(--zx-ease), border-color var(--zx-dur-fast) var(--zx-ease);
+  }
+}

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

@@ -336,6 +336,8 @@ export class NumberField extends Component {
   /** @param {KeyboardEvent} event @returns {void} */
   _onKeydown(event) {
     if (this._disabled || this._readonly) return;
+    // Chords belong to the page — Mod+Enter submits the form or dialog the field is in.
+    if (event.altKey || event.ctrlKey || event.metaKey) return;
     const large = Math.max(1, Math.trunc(Number(this.options.largeStep) || 1));
     const actions = {
       ArrowUp: () => this._stepBy(1),

package/src/components/pagination/pagination.css

@@ -3,7 +3,8 @@
  *
  * 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
- * height, radius, and focus ring; only the current page repaints in the accent colour.
+ * height, radius, and focus ring; the current page takes the neutral current fill — it is where
+ * you are, not a call to action.
  */
 
 .zx-pagination {
@@ -70,15 +71,16 @@
   font-variant-numeric: tabular-nums;
 }
 
+/* The page you are on: the neutral current fill and a heavier figure, not a solid accent. */
 .zx-pagination__page[aria-current="page"] {
-  border-color: var(--zx-color-accent);
-  background: var(--zx-color-accent);
-  color: var(--zx-color-on-accent);
+  border-color: transparent;
+  background: var(--zx-color-bg-current);
+  color: var(--zx-color-text);
+  font-weight: var(--zx-weight-semibold);
 }
 
 .zx-pagination__page[aria-current="page"]:hover:not(:disabled) {
-  border-color: var(--zx-color-accent-hover);
-  background: var(--zx-color-accent-hover);
+  background: var(--zx-color-bg-current);
 }
 
 /* Decorative gap marker: never focusable, never announced. */

package/src/components/panel/panel.css

@@ -35,7 +35,7 @@
   padding: var(--zx-space-3) var(--zx-space-4);
   color: var(--zx-color-text);
   font: inherit;
-  font-weight: 650;
+  font-weight: var(--zx-weight-semibold);
   text-align: start;
 }
 

package/src/components/panel/panel.js

@@ -103,7 +103,7 @@ export class Panel extends Component {
         class: 'zx-panel__buttons',
         ref: 'buttons',
         role: 'group',
-        ariaLabel: 'Panel actions'
+        ariaLabel: this._message('panel.actions', 'Panel actions')
       })
     );
     const content = h('div', {
@@ -125,7 +125,7 @@ export class Panel extends Component {
       class: 'zx-panel__footer-buttons',
       ref: 'footerButtons',
       role: 'group',
-      ariaLabel: 'Panel footer actions'
+      ariaLabel: this._message('panel.footerActions', 'Panel footer actions')
     }));
     root.replaceChildren(header, body, footer);
 
@@ -286,6 +286,17 @@ export class Panel extends Component {
       return element;
     });
   }
+
+  /**
+   * Resolves a message through the host translator, falling back to the built-in English text.
+   * @param {string} key Message key.
+   * @param {string} fallback English default.
+   * @returns {string}
+   */
+  _message(key, fallback) {
+    const message = this.msg(key);
+    return message === key ? fallback : message;
+  }
 }
 
 /**

package/src/components/rating/rating.css

@@ -30,6 +30,13 @@
   clip-path: inset(0 calc(100% - var(--zx-rating-fill)) 0 0);
 }
 
+/* The icons are outlines; a chosen star is a solid one, so the two states differ in shape as well
+   as in colour. */
+.zx-rating__glyph[data-part="on"],
+.zx-rating__glyph[data-part="on"] .zx-icon {
+  fill: currentColor;
+}
+
 .zx-rating__symbol[data-preview] .zx-rating__glyph[data-part="on"] {
   color: var(--zx-color-warning);
   opacity: 0.75;

package/src/components/search/search.js

@@ -39,27 +39,28 @@ export class Search extends Component {
     this._original = created ? null : snapshot(root);
     this._inputTimer = null;
     root.setAttribute('role', 'search');
+    const clearLabel = this._message('search.clear', 'Clear search');
     const input = h('input', {
       class: 'zx-search__input',
       ref: 'input',
       type: 'search',
       placeholder: String(this.options.placeholder),
       value: String(this.options.value),
-      ariaLabel: String(this.options.placeholder || 'Search')
+      ariaLabel: String(this.options.placeholder || this._message('search.label', 'Search'))
     });
     const clear = this.options.clearable ? h('button', {
       class: 'zx-search__clear',
       ref: 'clear',
       type: 'button',
-      ariaLabel: 'Clear search',
-      title: 'Clear search'
+      ariaLabel: clearLabel,
+      title: clearLabel
     }, icon('x', { size: 15 })) : null;
     const submit = h('button', {
       class: 'zx-search__submit',
       ref: 'submit',
       type: root.localName === 'form' ? 'submit' : 'button',
-      ariaLabel: 'Submit search',
-      title: 'Search'
+      ariaLabel: this._message('search.submit', 'Submit search'),
+      title: this._message('search.submitTitle', 'Search')
     }, icon('search', { size: 16 }));
     root.replaceChildren(...[input, clear, submit].filter(Boolean));
     this._syncClear();
@@ -157,6 +158,17 @@ export class Search extends Component {
       /** @type {HTMLButtonElement} */ (this.refs.clear).hidden = this.get() === '';
     }
   }
+
+  /**
+   * Resolves a message through the host translator, falling back to the built-in English text.
+   * @param {string} key Message key.
+   * @param {string} fallback English default.
+   * @returns {string}
+   */
+  _message(key, fallback) {
+    const message = this.msg(key);
+    return message === key ? fallback : message;
+  }
 }
 
 /**

package/src/components/select/color.js

@@ -0,0 +1,22 @@
+import { isCssColor } from '../../core/util.js';
+
+/** A reference to one custom property, such as `var(--zx-color-tone-blue-fg)`. */
+const TOKEN_REFERENCE = /^var\(\s*--[\w-]+\s*\)$/;
+
+/**
+ * Accepts an item colour for an inline custom property: a CSS colour literal (`#0b7285`, `rgb(…)`,
+ * `oklch(…)`, a named colour) or a reference to a design token (`var(--zx-color-tone-blue-fg)`),
+ * so an item can follow the theme rather than fix one colour for light and dark alike. Anything
+ * else — other functions, declarations, a `var()` with a fallback — is refused.
+ *
+ * Shared by `Select.entity()` and `TagPicker`, the two components that take a colour per item.
+ *
+ * @param {unknown} value Candidate colour.
+ * @returns {string|null} The trimmed colour, or null when the value is not one.
+ */
+export function itemColor(value) {
+  if (typeof value !== 'string') return null;
+  const text = value.trim();
+  if (TOKEN_REFERENCE.test(text)) return text;
+  return isCssColor(text) ? text : null;
+}

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

@@ -9,8 +9,13 @@ export function registerSelectFieldAdapter() {
   Field.register('zxselect', (field, options) => {
     const props = options.props ?? {};
     const preset = props.preset;
-    const selectOptions = { ...props, value: options.value };
+    const selectOptions = { ...props, value: options.value, label: options.label || props.label, placeholder: props.placeholder ?? options.placeholder };
+    field.listen(field.el, 'click', (event) => {
+      if (event.target.closest?.('.zx-field__label')) field.adapter.focus();
+    });
     delete selectOptions.preset;
+    // The priority preset offers "No priority" (null) by default; a required field cannot hold it.
+    if (preset === 'priority' && props.clearable === undefined) selectOptions.clearable = !options.required;
     const select = field.own(preset === 'priority'
       ? Select.priority(null, selectOptions)
       : preset === 'status'