@zeyos/zx 4.3.0 → 4.4.0

package/src/components/launcher/launcher.js

@@ -42,12 +42,12 @@ import { uid } from '../../core/util.js';
  * @property {number} [debounce=250] Source-query delay in milliseconds.
  * @property {number} [minQuery=0] Global source minimum query length.
  * @property {number} [maxResults=100] Maximum combined results.
- * @property {string} [placeholder='Search applications and records'] Search-field placeholder.
- * @property {string} [label='Launcher'] Dialog and field label.
- * @property {string} [closeLabel='Close launcher'] Close-button accessible label.
- * @property {string} [resultsLabel='Launcher results'] Results-region accessible label.
- * @property {string} [emptyText='No results'] Empty-state text.
- * @property {string} [loadingText='Searching…'] Loading-state text.
+ * @property {string} [placeholder] Search-field placeholder. Omitted resolves `launcher.placeholder`, English `Search applications and records`.
+ * @property {string} [label] Dialog and field label. Omitted resolves `launcher.label`, English `Launcher`.
+ * @property {string} [closeLabel] Close-button accessible label. Omitted resolves `launcher.close`, English `Close launcher`.
+ * @property {string} [resultsLabel] Results-region accessible label. Omitted resolves `launcher.results`, English `Launcher results`.
+ * @property {string} [emptyText] Empty-state text. Omitted resolves `launcher.empty`, English `No results`.
+ * @property {string} [loadingText] Loading-state text. Omitted resolves `launcher.loading`, English `Searching…`.
  * @property {'mod+k'|false} [shortcut='mod+k'] Optional global keyboard shortcut.
  * @property {false|{move?: string, open?: string, close?: string}} [hints] Visible keyboard hints, or false.
  * @property {Element|string|null} [scope=null] Element whose nearest Zx theme scope owns an internally created launcher; defaults to the opener.
@@ -80,14 +80,20 @@ export class Launcher extends Component {
     debounce: 250,
     minQuery: 0,
     maxResults: 100,
-    placeholder: 'Search applications and records',
-    label: 'Launcher',
-    closeLabel: 'Close launcher',
-    resultsLabel: 'Launcher results',
-    emptyText: 'No results',
-    loadingText: 'Searching…',
+    /*
+     * The six labels default to null rather than to their English text so that an application
+     * which installs a translator and passes no labels still gets a translated launcher. The
+     * documented default is what `_message()` falls back to, so an untranslated application
+     * renders exactly the same words as before.
+     */
+    placeholder: null,
+    label: null,
+    closeLabel: null,
+    resultsLabel: null,
+    emptyText: null,
+    loadingText: null,
     shortcut: 'mod+k',
-    hints: { move: 'Move', open: 'Open', close: 'Close' },
+    hints: null,
     scope: null
   };
 
@@ -126,6 +132,7 @@ export class Launcher extends Component {
     this._destroyed = false;
 
     const listId = uid('zx-launcher-results');
+    const label = String(this.options.label ?? this._message('launcher.label', 'Launcher'));
     const input = h('input', {
       ref: 'input',
       class: 'zx-launcher__input',
@@ -136,15 +143,15 @@ export class Launcher extends Component {
       ariaAutocomplete: 'list',
       ariaControls: listId,
       ariaExpanded: 'false',
-      ariaLabel: this.options.label,
-      placeholder: this.options.placeholder,
+      ariaLabel: label,
+      placeholder: this.options.placeholder ?? this._message('launcher.placeholder', 'Search applications and records'),
       value: this._query
     });
     const close = h('button', {
       ref: 'close',
       class: 'zx-icon-btn zx-launcher__close',
       type: 'button',
-      ariaLabel: this.options.closeLabel
+      ariaLabel: this.options.closeLabel ?? this._message('launcher.close', 'Close launcher')
     }, icon('x'));
     const status = h('div', {
       ref: 'status',
@@ -157,14 +164,18 @@ export class Launcher extends Component {
       class: 'zx-launcher__results',
       id: listId,
       role: 'listbox',
-      ariaLabel: this.options.resultsLabel
+      ariaLabel: this.options.resultsLabel ?? this._message('launcher.results', 'Launcher results')
     });
     const shortcut = this.options.shortcut === 'mod+k' ? h('kbd', {
       class: 'zx-launcher__shortcut',
       ariaHidden: 'true'
     }, launcherShortcutLabel()) : null;
-    const footer = launcherHints(this.options.hints);
-    dialog.setAttribute('aria-label', String(this.options.label));
+    const footer = launcherHints(this.options.hints, {
+      move: this._message('launcher.hintMove', 'Move'),
+      open: this._message('launcher.hintOpen', 'Open'),
+      close: this._message('launcher.hintClose', 'Close')
+    });
+    dialog.setAttribute('aria-label', label);
     dialog.replaceChildren(
     h('div', { class: 'zx-launcher__surface' },
       h('div', {
@@ -458,9 +469,15 @@ export class Launcher extends Component {
 
   /** @returns {void} */
   _renderStatus() {
-    if (this._busy) this.refs.status.textContent = String(this.options.loadingText);
-    else if (this._results.length === 0) this.refs.status.textContent = String(this.options.emptyText);
-    else this.refs.status.textContent = '';
+    if (this._busy) {
+      this.refs.status.textContent = String(this.options.loadingText
+        ?? this._message('launcher.loading', 'Searching…'));
+    } else if (this._results.length === 0) {
+      this.refs.status.textContent = String(this.options.emptyText
+        ?? this._message('launcher.empty', 'No results'));
+    } else {
+      this.refs.status.textContent = '';
+    }
     this.refs.status.hidden = !this.refs.status.textContent;
   }
 
@@ -566,6 +583,17 @@ export class Launcher extends Component {
     event.preventDefault();
     this.open();
   }
+
+  /**
+   * 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;
+  }
 }
 
 /** @returns {string} */
@@ -575,14 +603,18 @@ function launcherShortcutLabel() {
   return /mac|iphone|ipad/i.test(platform) ? '⌘ K' : 'Ctrl K';
 }
 
-/** @param {LauncherOptions['hints']} hints @returns {HTMLElement|null} */
-function launcherHints(hints) {
+/**
+ * @param {LauncherOptions['hints']} hints Host-supplied hint labels, or false to omit the row.
+ * @param {{move: string, open: string, close: string}} defaults Resolved built-in labels.
+ * @returns {HTMLElement|null}
+ */
+function launcherHints(hints, defaults) {
   if (hints === false) return null;
   const labels = hints && typeof hints === 'object' ? hints : {};
   return h('footer', { class: 'zx-launcher__hints', ariaHidden: 'true' },
-    h('span', {}, h('kbd', {}, '↑↓←→'), labels.move ?? 'Move'),
-    h('span', {}, h('kbd', {}, '↵'), labels.open ?? 'Open'),
-    h('span', {}, h('kbd', {}, 'Esc'), labels.close ?? 'Close'));
+    h('span', {}, h('kbd', {}, '↑↓←→'), labels.move ?? defaults.move),
+    h('span', {}, h('kbd', {}, '↵'), labels.open ?? defaults.open),
+    h('span', {}, h('kbd', {}, 'Esc'), labels.close ?? defaults.close));
 }
 
 /** @param {LauncherItem} item @returns {Node|null} */

package/src/components/list-toolbar/list-toolbar.css

@@ -0,0 +1,189 @@
+/*
+ * The bar above a record view. It wraps rather than collapsing: `Toolbar` moves what no longer
+ * fits into an overflow menu, and the first thing that menu would swallow is the tool whose badge
+ * explains why the list is showing four rows out of twenty.
+ */
+.zx-list-toolbar {
+  /* A size container so the labels answer to the width of the bar rather than of the window: the
+     same toolbar sits above a full-page list and inside a narrow master panel. The width it
+     cannot derive from its own contents is declared here, as size containment requires. */
+  container-type: inline-size;
+  inline-size: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--zx-space-2);
+  min-inline-size: 0;
+}
+
+/*
+ * The search field takes the slack and gives it back first. Its hypothetical width is what decides
+ * whether the row fits on one line — flex breaks lines on base sizes, not on shrunk ones — so the
+ * field is declared narrow and allowed to grow into whatever the tools leave, up to a width past
+ * which a longer text box helps nobody.
+ */
+.zx-list-toolbar > .zx-list-toolbar__search {
+  flex: 1 1 12rem;
+  max-inline-size: 22rem;
+  min-inline-size: 0;
+}
+
+.zx-list-toolbar > .zx-list-toolbar__search .zx-search__input {
+  min-inline-size: 8rem;
+}
+
+/*
+ * The live count line. It is never hidden and never given `display: none`: a live region has to be
+ * in the accessibility tree before its text changes, and an empty inline element in a row that
+ * already ends in blank space costs nothing to leave in place.
+ */
+.zx-list-toolbar__count {
+  flex: 0 1 auto;
+  min-inline-size: 0;
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-sm);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.zx-list-toolbar__spacer {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
+
+.zx-list-toolbar__tools,
+.zx-list-toolbar__views {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--zx-space-1);
+}
+
+.zx-list-toolbar__views {
+  gap: 0;
+  border: 1px solid var(--zx-color-border-control);
+  border-radius: var(--zx-control-radius);
+  padding: 2px;
+}
+
+/*
+ * WCAG 2.5.5 Target Size: 44 px, in both densities. Density tightens a layout; it does not make
+ * a finger smaller, so this floor is deliberately not expressed through --zx-control-height
+ * (32 px cozy, 28 px compact) the way the rest of the controls in this row are. The chrome is flat
+ * until the tool is hovered, focused, or pressed, so a target this size does not read as a slab.
+ */
+.zx-list-toolbar__tool {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--zx-space-2);
+  min-block-size: 44px;
+  min-inline-size: 44px;
+  padding-inline: var(--zx-space-2);
+  border: 1px solid transparent;
+  border-radius: var(--zx-control-radius);
+  background: none;
+  color: var(--zx-color-text);
+  font-size: var(--zx-control-font-size);
+  font-weight: var(--zx-control-font-weight);
+  line-height: 1.2;
+  cursor: pointer;
+}
+
+.zx-list-toolbar__tool:hover:not(:disabled) {
+  background: var(--zx-color-bg-hover);
+}
+
+.zx-list-toolbar__tool:focus-visible {
+  box-shadow: var(--zx-focus-ring);
+}
+
+/* A pressed tool is marked three ways — the state in `aria-pressed`, a filled ground, and a
+   border where the other states have none — so it never rests on colour alone. */
+.zx-list-toolbar__tool[aria-pressed="true"] {
+  border-color: var(--zx-color-border-strong);
+  background: var(--zx-color-bg-selected);
+}
+
+.zx-list-toolbar__tool:disabled {
+  color: var(--zx-color-text-placeholder);
+  cursor: default;
+}
+
+.zx-list-toolbar__tool-label {
+  white-space: nowrap;
+}
+
+/* The badge is decoration here: its number is already in the button's accessible name, so it must
+   not swallow the click that names it either. */
+.zx-list-toolbar__badge {
+  pointer-events: none;
+}
+
+.zx-list-toolbar__view {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--zx-space-1);
+  min-block-size: 44px;
+  min-inline-size: 44px;
+  padding-inline: var(--zx-space-2);
+  border: 0;
+  border-radius: calc(var(--zx-control-radius) - 2px);
+  background: none;
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-control-font-size);
+  font-weight: var(--zx-control-font-weight);
+  line-height: 1.2;
+  cursor: pointer;
+}
+
+.zx-list-toolbar__view:hover {
+  color: var(--zx-color-text);
+  background: var(--zx-color-bg-hover);
+}
+
+.zx-list-toolbar__view:focus-visible {
+  box-shadow: var(--zx-focus-ring);
+}
+
+.zx-list-toolbar__view[aria-pressed="true"] {
+  background: var(--zx-color-bg-selected);
+  color: var(--zx-color-text);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .zx-list-toolbar__tool,
+  .zx-list-toolbar__view {
+    transition: background-color var(--zx-dur-fast) var(--zx-ease),
+      color var(--zx-dur-fast) var(--zx-ease),
+      border-color var(--zx-dur-fast) var(--zx-ease);
+  }
+}
+
+/*
+ * Below a phone-width bar the labels go and the row becomes: field, count, icons. The targets stay
+ * 44 px — a narrow viewport is where that matters most — and the names survive in `aria-label`,
+ * which is where a tool's badge already lives.
+ *
+ * Only a control that has an icon left to stand for it gives up its word: `:has()` keeps a
+ * label-only entry — the `auto` shape, which no glyph in the set honestly describes — readable
+ * instead of collapsing it into an empty button. The label is clipped rather than removed, so it
+ * stays the accessible name of a view button either way.
+ */
+@container (max-inline-size: 30rem) {
+  .zx-list-toolbar__tool:has(.zx-icon) .zx-list-toolbar__tool-label,
+  .zx-list-toolbar__view:has(.zx-icon) .zx-list-toolbar__view-label {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+}