@zeyos/zx 4.3.4 → 5.0.0

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

@@ -29,8 +29,8 @@
   max-inline-size: 100%;
   padding-inline: var(--zx-space-2);
   border: 1px solid var(--zx-color-border);
-  border-radius: var(--zx-radius-full);
-  background: var(--zx-color-bg-selected);
+  border-radius: var(--zx-radius-md);
+  background: var(--zx-color-bg-muted);
   color: var(--zx-color-text);
   cursor: grab;
 }
@@ -50,7 +50,7 @@
   place-items: center;
   min-inline-size: 1.25rem;
   min-block-size: 1.25rem;
-  border-radius: var(--zx-radius-full);
+  border-radius: var(--zx-radius-sm);
   color: var(--zx-color-text-muted);
   cursor: pointer;
 }

package/src/components/value-list/value-list.js

@@ -1,5 +1,6 @@
 import { Component } from '../../core/component.js';
 import { h } from '../../core/dom.js';
+import { printf } from '../../core/i18n.js';
 import { uid } from '../../core/util.js';
 
 /**
@@ -49,14 +50,14 @@ export class ValueList extends Component {
     this._list = h('ul', {
       class: 'zx-value-list__list',
       role: 'listbox',
-      ariaLabel: 'Values',
+      ariaLabel: this._message('valueList.values', 'Values'),
       ariaOrientation: 'horizontal'
     });
     this._input = h('input', {
       class: 'zx-value-list__input',
       type: 'text',
       placeholder: String(this.options.placeholder ?? ''),
-      ariaLabel: 'Add value',
+      ariaLabel: this._message('valueList.add', 'Add value'),
       ariaDescribedby: instructionsId
     });
     this._status = h('div', {
@@ -67,7 +68,8 @@ export class ValueList extends Component {
     this._instructions = h('span', {
       class: 'zx-value-list__instructions',
       id: instructionsId
-    }, 'Press Enter to add. Focus a value and press Ctrl plus Left or Right to reorder.');
+    }, this._message('valueList.instructions',
+      'Press Enter to add. Focus a value and press Ctrl plus Left or Right to reorder.'));
     this._ownedNodes.push(this._list, this._input, this._status, this._instructions);
     root.append(this._list, this._input, this._status, this._instructions);
 
@@ -120,13 +122,14 @@ export class ValueList extends Component {
     const normalized = String(value ?? '').trim();
     if (!normalized) return false;
     if (this.options.unique && this._values.includes(normalized)) {
-      this._showError('This value already exists.');
+      this._showError(this._message('valueList.duplicate', 'This value already exists.'));
       return false;
     }
     if (typeof this.options.validate === 'function') {
       const result = this.options.validate(normalized);
       if (result !== true) {
-        this._showError(typeof result === 'string' ? result : 'This value is not valid.');
+        this._showError(typeof result === 'string' ? result
+          : this._message('valueList.invalid', 'This value is not valid.'));
         return false;
       }
     }
@@ -196,7 +199,8 @@ export class ValueList extends Component {
       draggable: Boolean(this.options.sortable) && !this._disabled,
       ariaSelected: 'false',
       ariaDisabled: String(this._disabled),
-      ariaLabel: this.options.deletable ? `${value}. Press Delete to remove.` : value,
+      ariaLabel: this.options.deletable
+        ? this._message('valueList.removable', '%1. Press Delete to remove.', value) : value,
       dataset: { index }
     }, h('span', { class: 'zx-value-list__value' }, value), this.options.deletable ? h('span', {
       class: 'zx-value-list__remove',
@@ -302,6 +306,18 @@ export class ValueList extends Component {
     this._input.setAttribute('aria-invalid', 'true');
   }
 
+  /**
+   * Resolves a message through the host translator, falling back to the built-in English text.
+   * @param {string} key Message key.
+   * @param {string} fallback Built-in text, with `%1`-style placeholders.
+   * @param {...unknown} args Interpolation values.
+   * @returns {string}
+   */
+  _message(key, fallback, ...args) {
+    const message = this.msg(key, ...args);
+    return message === key ? printf(fallback, args) : message;
+  }
+
   /** @returns {void} */
   destroy() {
     for (const node of this._ownedNodes ?? []) node.remove();

package/src/components/view/record-view.css

@@ -17,6 +17,11 @@
   margin-inline-start: auto;
 }
 
+/* Mounted into a host toolbar the view does not own: the host decides where it sits. */
+.zx-record-view__field-controls[data-mounted="external"] {
+  margin-inline-start: 0;
+}
+
 .zx-record-view__field-controls > summary {
   display: inline-flex;
   align-items: center;

package/src/components/view/record-view.js

@@ -1,7 +1,8 @@
 // @ts-check
 import { Component } from '../../core/component.js';
-import { h, restoreTarget, snapshotTarget } from '../../core/dom.js';
+import { h, resolveElement, restoreTarget, snapshotTarget } from '../../core/dom.js';
 import { icon } from '../../core/icons.js';
+import { printf } from '../../core/i18n.js';
 import { sortRows } from '../table/sort.js';
 
 /** @typedef {Record<string, any>} ViewRecord */
@@ -31,6 +32,23 @@ import { sortRows } from '../table/sort.js';
  * @property {ViewSortDirection} dir Sort direction.
  */
 
+/**
+ * Trigger customisation for the shared field chooser. Passing this object in place of `true` keeps
+ * the control and its state model exactly as they are; only its wording and mount point change.
+ * @typedef {Object} ViewFieldControlsConfig
+ * @property {string} [label] Trigger label. Omitted resolves `recordView.fields`, English `Fields`.
+ * @property {Element|string|null} [target=null] Element or selector the disclosure is mounted into
+ * instead of the view's own toolbar. An unresolvable target falls back to the view.
+ */
+
+/**
+ * @typedef {Object} ViewFieldControlsSettings
+ * @property {boolean} enabled Whether a concrete view renders the chooser at all.
+ * @property {boolean} custom Whether the option was given as a `ViewFieldControlsConfig` object.
+ * @property {string|null} label Configured trigger label, or null to resolve the message.
+ * @property {Element|string|null} target Configured mount point, before resolution.
+ */
+
 /**
  * @typedef {Object} RecordViewState
  * @property {1} version State schema version.
@@ -50,7 +68,10 @@ import { sortRows } from '../table/sort.js';
  * @property {unknown[]} [selection=[]] Initially selected record ids.
  * @property {string[]} [fieldOrder=[]] Field ids in preferred order.
  * @property {string[]} [hiddenFields=[]] Initially hidden field ids.
- * @property {boolean} [fieldControls=true] Whether concrete views show the shared field chooser.
+ * @property {boolean|ViewFieldControlsConfig} [fieldControls=true] Whether concrete views show the
+ * shared field chooser. `true` renders it in the view's own toolbar and `false` omits it; a
+ * `ViewFieldControlsConfig` object renders the same control with a translated `label` and, with
+ * `target`, mounts it into a host element such as a list toolbar.
  * @property {string|Node|(() => string|Node)|null} [emptyText=null] Empty-result content.
  * @property {(event: CustomEvent<Record<string, unknown>>) => void} [onrecordclick]
  * @property {(event: CustomEvent<Record<string, unknown>>) => void} [onrecorddblclick]
@@ -117,6 +138,7 @@ export class RecordView extends Component {
     this._recordViewDestroyed = true;
     const root = this.el;
     const snapshot = this._recordViewOriginal;
+    this._removeViewFieldControls();
     super.destroy();
     if (snapshot && root) restoreTarget(root, snapshot);
   }
@@ -139,6 +161,9 @@ export class RecordView extends Component {
     this._viewSelectionAnchor = null;
     this._viewFieldControls = null;
     this._viewFieldList = null;
+    this._viewFieldSettings = normalizeViewFieldControls(this.options.fieldControls);
+    // Resolved once, here, so the mount point cannot drift between render and destroy.
+    this._viewFieldControlsTarget = resolveElement(this._viewFieldSettings.target);
     this._viewInitialized = true;
     if (this._viewSort && this.options.sortMode === 'local') this._sortViewData();
     this._setInitialSelection(this.options.selection);
@@ -467,13 +492,15 @@ export class RecordView extends Component {
   /**
    * Builds the shared show/hide and ordering disclosure for a concrete view toolbar.
    * @protected
-   * @param {string} [label='Fields'] Trigger label.
+   * @param {string|null} [label=null] Explicit trigger label. Omitted resolves the configured
+   * `fieldControls.label` and then the `recordView.fields` message.
    * @returns {HTMLElement} Disclosure element.
    */
-  _createViewFieldControls(label = 'Fields') {
+  _createViewFieldControls(label = null) {
+    const text = label ?? this._viewFieldControlsLabel();
     const list = h('div', { class: 'zx-record-view__field-list' });
     const details = h('details', { class: 'zx-record-view__field-controls' },
-      h('summary', { class: 'zx-button zx-button--sm' }, icon('fields', { size: 13 }), label),
+      h('summary', { class: 'zx-btn', dataset: { size: 'sm', kind: 'ghost' } }, icon('fields'), text),
       list);
     this._viewFieldControls = details;
     this._viewFieldList = list;
@@ -498,6 +525,58 @@ export class RecordView extends Component {
     return details;
   }
 
+  /**
+   * Builds the shared field disclosure and mounts it where `fieldControls` asks for it: the host
+   * element named by `target`, or the view's own toolbar when no target resolves.
+   * @protected
+   * @param {Element} toolbar The view's own toolbar.
+   * @param {string|null} [label=null] Explicit trigger label, for views that own their wording.
+   * @returns {HTMLElement} The mounted disclosure.
+   */
+  _mountViewFieldControls(toolbar, label = null) {
+    const controls = this._createViewFieldControls(label);
+    const target = this._viewFieldControlsTarget;
+    if (target) controls.dataset.mounted = 'external';
+    (target ?? toolbar).append(controls);
+    return controls;
+  }
+
+  /**
+   * Removes the shared field disclosure from wherever it was mounted. An external `target` keeps
+   * every node it had before the view was created.
+   * @protected
+   * @returns {void}
+   */
+  _removeViewFieldControls() {
+    this._viewFieldControls?.remove?.();
+    this._viewFieldControls = null;
+    this._viewFieldList = null;
+    this._viewFieldControlsTarget = null;
+  }
+
+  /**
+   * Resolves the field-chooser trigger label: the configured one, else the translated message.
+   * @protected
+   * @returns {string} Trigger label.
+   */
+  _viewFieldControlsLabel() {
+    const settings = this._viewFieldSettings ?? normalizeViewFieldControls(this.options.fieldControls);
+    return settings.label ?? this._message('recordView.fields', 'Fields');
+  }
+
+  /**
+   * Resolves a message through the host translator, falling back to the built-in English text.
+   * @protected
+   * @param {string} key Message key.
+   * @param {string} fallback Built-in text, with `%1`-style placeholders.
+   * @param {...unknown} args Interpolation values.
+   * @returns {string} Translated or built-in text.
+   */
+  _message(key, fallback, ...args) {
+    const message = this.msg(key, ...args);
+    return message === key ? printf(fallback, args) : message;
+  }
+
   /** Concrete renderers override this hook. @protected @param {string} _reason Refresh reason. @returns {void} */
   _refreshView(_reason) {}
 
@@ -567,14 +646,14 @@ export class RecordView extends Component {
       const up = h('button', {
         class: 'zx-record-view__field-move',
         type: 'button',
-        ariaLabel: `Move ${field.label} up`,
+        ariaLabel: this._message('recordView.moveFieldUp', 'Move %1 up', field.label),
         disabled: index === 0,
         dataset: { viewFieldAction: 'up', fieldId: field.id }
       }, icon('chevron-up', { size: 11 }));
       const down = h('button', {
         class: 'zx-record-view__field-move',
         type: 'button',
-        ariaLabel: `Move ${field.label} down`,
+        ariaLabel: this._message('recordView.moveFieldDown', 'Move %1 down', field.label),
         disabled: index === fields.length - 1,
         dataset: { viewFieldAction: 'down', fieldId: field.id }
       }, icon('chevron-down', { size: 11 }));
@@ -593,6 +672,20 @@ export class RecordView extends Component {
   }
 }
 
+/**
+ * Reads the `fieldControls` option in its three shapes. `true` and `false` keep their exact
+ * meaning; an object additionally carries the trigger label and the host element to mount into.
+ * @param {boolean|ViewFieldControlsConfig|null|undefined} value Raw option value.
+ * @returns {ViewFieldControlsSettings} Normalized settings.
+ */
+export function normalizeViewFieldControls(value) {
+  if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
+    const label = value.label == null ? null : String(value.label);
+    return { enabled: true, custom: true, label, target: value.target ?? null };
+  }
+  return { enabled: Boolean(value), custom: false, label: null, target: null };
+}
+
 /**
  * Validates and clones field descriptors.
  * @param {ViewField[]} fields Fields.

package/src/core/breakpoint.js

@@ -6,7 +6,7 @@
  * used inside a media query, so a `--zx-bp-*` token would be a value no stylesheet could read.
  * Zx's own layout utilities avoid the problem entirely — `.zx-grid` reflows on intrinsic track
  * widths, not on breakpoints — which leaves this module for the cases only script can decide:
- * rendering a Table as cards below a width, collapsing a MasterPanel, choosing a chart density.
+ * rendering a Table as cards below a width, collapsing a MasterPanel, choosing how many labels a chart shows.
  * @module zx/core/breakpoint
  */