@zeyos/zx 4.4.0 → 5.2.0

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

@@ -47,7 +47,8 @@ import {
  * @property {'outlined'|'raised'|'filled'} [variant='outlined'] Card surface treatment.
  * @property {number} [loadingCount=6] Skeleton cards shown while loading.
  * @property {1|2|3|4|5|6} [headingLevel=3] Per-card title heading level.
- * @property {string} [label='Card view'] Accessible collection label.
+ * @property {string|null} [label=null] Accessible collection label; null resolves message
+ *   `cardView.label`, "Card view".
  * @property {(event:CustomEvent<Record<string,unknown>>)=>void} [onrecordaction]
  */
 
@@ -96,7 +97,7 @@ export class CardView extends RecordView {
     variant: 'outlined',
     loadingCount: 6,
     headingLevel: 3,
-    label: 'Card view'
+    label: null
   };
 
   /**
@@ -126,7 +127,7 @@ export class CardView extends RecordView {
     this._cardHeadingLevel = normalizeHeadingLevel(options.headingLevel);
     try {
       this._initRecordView(root);
-      root.setAttribute('aria-label', String(options.label || 'Card view'));
+      root.setAttribute('aria-label', String(options.label || this.msg('cardView.label')));
       const sort = h('label', { ref: 'sortWrap', class: 'zx-card-view__sort' },
         h('span', { class: 'zx-card-view__sort-label' }, this._message('cardView.sort', 'Sort')),
         h('select', { ref: 'sort', ariaLabel: this._message('cardView.sortCards', 'Sort cards') }));
@@ -258,7 +259,7 @@ export class CardView extends RecordView {
       return;
     }
     const groups = groupCardRecords(this._viewData, this._cardOptions().groupBy,
-      this._cardGroupOrder, this._viewFields);
+      this._cardGroupOrder, this._viewFields, this.msg('cardView.ungrouped'));
     if (this._viewData.length === 0 && groups.length === 0) {
       content.replaceChildren(this._createCardEmpty());
       return;
@@ -298,13 +299,14 @@ export class CardView extends RecordView {
         selectionTrigger: options.selectionTrigger,
         selected: this._isViewSelected(id),
         variant: this._cardVariant,
-        headingLevel: this._cardHeadingLevel
+        headingLevel: this._cardHeadingLevel,
+        message: (key, ...args) => this.msg(key, ...args)
       });
       this._cardNodesById.set(id, card);
       list.append(card);
     }
     if (group.records.length === 0) {
-      list.append(h('li', { class: 'zx-card-view__group-empty' }, 'No records in this group.'));
+      list.append(h('li', { class: 'zx-card-view__group-empty' }, this.msg('cardView.groupEmpty')));
     }
     if (group.id === null) return list;
     return h('section', { class: 'zx-card-view__group', ariaLabelledby: headingId },
@@ -339,7 +341,8 @@ export class CardView extends RecordView {
     for (const [id, card] of this._cardNodesById) {
       const selected = this._isViewSelected(id);
       card.dataset.selected = String(selected);
-      if (this.options.selectable) card.setAttribute('aria-description', selected ? 'Selected' : 'Not selected');
+      if (this.options.selectable) card.setAttribute('aria-description',
+        this.msg(selected ? 'recordCard.selected' : 'recordCard.notSelected'));
       const checkbox = /** @type {HTMLInputElement|null} */ (card.querySelector('[data-record-selection]'));
       if (checkbox) checkbox.checked = selected;
     }
@@ -444,9 +447,10 @@ export class CardView extends RecordView {
  * @param {CardViewOptions['groupBy']} groupBy Group field or resolver.
  * @param {unknown[]} [groupOrder=[]] Preferred group ids.
  * @param {ViewField[]} [fields=[]] Complete fields for accessor-aware grouping.
+ * @param {string} [ungroupedLabel='Ungrouped'] Label of the group collecting records without a value.
  * @returns {CardRecordGroup[]} Deterministic groups.
  */
-export function groupCardRecords(records, groupBy, groupOrder = [], fields = []) {
+export function groupCardRecords(records, groupBy, groupOrder = [], fields = [], ungroupedLabel = 'Ungrouped') {
   if (!Array.isArray(records)) throw new TypeError('Card view records must be an array');
   if (groupBy == null) return records.length ? [{ id: null, label: '', records: [...records] }] : [];
   const preferred = normalizeGroupOrder(groupOrder);
@@ -461,7 +465,7 @@ export function groupCardRecords(records, groupBy, groupOrder = [], fields = [])
   }
   return [...groups].map(([id, grouped]) => ({
     id,
-    label: id || 'Ungrouped',
+    label: id || ungroupedLabel,
     records: grouped
   }));
 }

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

@@ -1,6 +1,7 @@
 // @ts-check
 import { h, safeHref } from '../../core/dom.js';
 import { icon } from '../../core/icons.js';
+import { translate } from '../../core/i18n.js';
 import { uid } from '../../core/util.js';
 import { readViewField, renderViewField } from '../view/record-view.js';
 
@@ -67,6 +68,10 @@ import { readViewField, renderViewField } from '../view/record-view.js';
  * @property {'outlined'|'raised'|'filled'} [variant='outlined'] Surface treatment.
  * @property {1|2|3|4|5|6} [headingLevel=3] Card title heading level.
  * @property {Node[]} [controls=[]] Listener-free, owner-created controls such as a move handle.
+ * @property {(key: string, ...args: unknown[]) => string} [message] Resolves the card's built-in strings
+ *   (`recordCard.select`, `recordCard.actions`, `recordCard.untitled`, `recordCard.selected`,
+ *   `recordCard.notSelected`). An owning component passes its own `msg()`; omitted, the host
+ *   translator and then the default English catalogue answer.
  */
 
 /**
@@ -111,6 +116,11 @@ export function createRecordCard(record, index, options = {}) {
   const selected = Boolean(options.selected);
   const headingId = uid('zx-record-card-title');
   const headingLevel = normalizeHeadingLevel(options.headingLevel);
+  /** @type {(key: string, ...args: unknown[]) => string} */
+  const message = typeof options.message === 'function'
+    ? options.message
+    : (key, ...args) => translate(key, args);
+  const name = textAlternative(title) || message('recordCard.untitled');
 
   const headingContent = link
     ? h('a', {
@@ -137,13 +147,13 @@ export function createRecordCard(record, index, options = {}) {
     type: 'checkbox',
     checked: selected,
     dataset: { recordSelection: '' },
-    ariaLabel: `Select ${textAlternative(title) || 'record'}`
+    ariaLabel: message('recordCard.select', name)
   })) : null;
   const actionNodes = actions.map(createAction);
   const actionArea = actionNodes.length || controls.length ? h('div', {
     class: 'zx-record-card__actions',
     role: 'group',
-    ariaLabel: `Actions for ${textAlternative(title) || 'record'}`
+    ariaLabel: message('recordCard.actions', name)
   }, controls, actionNodes) : null;
   const header = h('header', { class: 'zx-record-card__header' }, selection,
     h('div', { class: 'zx-record-card__titles' }, titleRow,
@@ -154,7 +164,8 @@ export function createRecordCard(record, index, options = {}) {
   const card = /** @type {HTMLLIElement} */ (h('li', {
     class: 'zx-record-card',
     tabindex: 0,
-    ariaDescription: selectable ? selected ? 'Selected' : 'Not selected' : undefined,
+    ariaDescription: selectable
+      ? message(selected ? 'recordCard.selected' : 'recordCard.notSelected') : undefined,
     ariaLabelledby: headingId,
     ariaKeyshortcuts: selectable && options.selectionTrigger === 'card' ? 'Space Enter' : undefined,
     dataset: {

package/src/components/chart/chart.css

@@ -8,6 +8,9 @@
 .zx-chart__viewport {
   position: relative;
   inline-size: 100%;
+  /* The automatic minimum width would carry the 220px floor through the aspect ratio (587px at
+     16 / 6) and push the canvas out of a narrow card; narrow, the chart grows taller instead. */
+  min-inline-size: 0;
   min-block-size: 220px;
   aspect-ratio: var(--zx-chart-aspect-ratio, 16 / 9);
 }
@@ -54,7 +57,7 @@
   border-collapse: collapse;
 }
 
-.zx-chart__table caption { margin-block-end: var(--zx-space-2); font-weight: 700; text-align: start; }
+.zx-chart__table caption { margin-block-end: var(--zx-space-2); font-weight: var(--zx-weight-semibold); text-align: start; }
 .zx-chart__table th,
 .zx-chart__table td { border-block-end: 1px solid var(--zx-color-border); padding: var(--zx-space-2); text-align: end; }
 .zx-chart__table th:first-child,

package/src/components/chart/chart.js

@@ -1,5 +1,6 @@
 import { Component } from '../../core/component.js';
 import { h } from '../../core/dom.js';
+import { prefersReducedMotion, watchMotion } from '../../core/motion.js';
 import { uid } from '../../core/util.js';
 
 /** @typedef {{label?: string, data?: unknown[], [key: string]: unknown}} ChartDataset */
@@ -9,6 +10,9 @@ import { uid } from '../../core/util.js';
  * @property {string} type Chart type.
  * @property {ChartData} data Chart data.
  * @property {Record<string, unknown>} options Engine-specific options.
+ * @property {boolean} reducedMotion Whether the chart must not animate: the operating system asks
+ *   for reduced motion, or the host sits inside a `data-zx-motion="reduced"` region. An adapter turns
+ *   its engine's own animation off when this is true; `ChartJsAdapter` sets `animation: false`.
  * @property {(detail: ChartSelectDetail) => void} onSelect Point-selection callback.
  */
 /**
@@ -145,6 +149,9 @@ export class Chart extends Component {
 
     this._observer = typeof ResizeObserver === 'function' ? new ResizeObserver(() => this.resize()) : null;
     this._observer?.observe(viewport);
+    // The engine tweens in script, where no stylesheet can reach it: when motion is reduced, or
+    // stops being reduced, the mounted chart is updated with the new answer in its spec.
+    this._stopWatchingMotion = watchMotion(root, () => this._mountOrUpdate(false));
     return root;
   }
 
@@ -232,6 +239,7 @@ export class Chart extends Component {
     this._destroyed = true;
     const original = this._original;
     this._observer?.disconnect();
+    this._stopWatchingMotion?.();
     this._destroyHandle();
     super.destroy();
     if (!this._createdRoot && original) {
@@ -277,6 +285,7 @@ export class Chart extends Component {
         ...themeChartOptions(/** @type {HTMLElement} */ (this.el)),
         ...cloneChartValue(this._chartOptions)
       },
+      reducedMotion: prefersReducedMotion(this.el),
       onSelect: (detail) => this.emit('select', detail)
     };
   }
@@ -386,6 +395,9 @@ function chartJsConfig(spec, defaults, getInstance) {
     ...cloneChartValue(defaults),
     ...supplied
   };
+  // Reduced motion wins over any animation the application configured: a person who asked for
+  // less motion gets it from every chart, not only from the ones that remembered to ask.
+  if (spec.reducedMotion) options.animation = false;
   const originalClick = options.onClick;
   options.onClick = (event, elements, chart) => {
     if (typeof originalClick === 'function') originalClick(event, elements, chart);

package/src/components/check-button/check-button.css

@@ -11,6 +11,7 @@
   padding-inline: var(--zx-control-pad-x);
   font: inherit;
   font-size: var(--zx-control-font-size);
+  font-weight: var(--zx-control-font-weight);
   cursor: pointer;
 }
 
@@ -18,9 +19,16 @@
   background: var(--zx-color-bg-hover);
 }
 
+/* Pressed is a state the button is in, so the button itself goes neutral — the current fill, a
+   stronger border, the full text colour — and only the check glyph, which is the mark, keeps the
+   accent, as a checkbox would. */
 .zx-check-button[aria-pressed="true"] {
-  border-color: var(--zx-color-accent);
-  background: var(--zx-color-bg-selected);
+  border-color: var(--zx-color-border-strong);
+  background: var(--zx-color-bg-current);
+  color: var(--zx-color-text);
+}
+
+.zx-check-button__on {
   color: var(--zx-color-accent);
 }
 

package/src/components/checklist/checklist.css

@@ -7,7 +7,9 @@
 }
 
 .zx-checklist__label {
-  font-weight: 650;
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-sm);
+  font-weight: var(--zx-weight-medium);
 }
 
 .zx-checklist__search {
@@ -31,10 +33,12 @@
   display: flex;
   align-items: center;
   gap: var(--zx-space-2);
-  min-block-size: var(--zx-control-height);
+  /* The same row as a listbox option. */
+  min-block-size: calc(var(--zx-control-height) - 2px);
   border-radius: var(--zx-radius-sm);
   cursor: pointer;
   padding: var(--zx-space-1) var(--zx-space-2);
+  line-height: 1.35;
 }
 
 .zx-checklist__item:hover {
@@ -45,8 +49,11 @@
   background: var(--zx-color-bg-selected);
 }
 
+/* The base control height is for text fields; a checkbox that inherited it would make every row
+   a field tall. */
 .zx-checklist__item input {
   flex: none;
+  min-block-size: 0;
   accent-color: var(--zx-color-accent);
 }
 

package/src/components/checklist/checklist.js

@@ -13,6 +13,9 @@ import { matchItems } from '../select/filter.js';
  * @property {boolean} [search=true] Whether the search field is shown.
  * @property {number} [height=280] Maximum list height in pixels.
  * @property {boolean} [defaultChecked=false] Fallback initial checked state.
+ * @property {boolean} [hideLabel=false] Whether the heading is left out. The group keeps the
+ *   heading text as its accessible name (`aria-label`); a Field labelling the checklist names it
+ *   instead, which is why the `checklist` field type sets this.
  * @property {(() => Promise<ChecklistItem[]>|ChecklistItem[])|null} [load=null] Async item loader.
  * @property {Record<string, string>|Record<string, Record<string, string>>} [msg] Localized messages.
  * @property {(event: CustomEvent<ChecklistChangeDetail>) => void} [onchange] Change listener.
@@ -40,6 +43,7 @@ export class Checklist extends Component {
     search: true,
     height: 280,
     defaultChecked: false,
+    hideLabel: false,
     load: null
   };
 
@@ -53,15 +57,16 @@ export class Checklist extends Component {
     const root = /** @type {HTMLElement} */ (this.el ?? h('div'));
     this.el = root;
     if (!this._createdRoot) this._originalChildren = Array.from(root.childNodes);
-    for (const name of ['role', 'aria-labelledby', 'data-state']) {
+    for (const name of ['role', 'aria-label', 'aria-labelledby', 'data-state']) {
       this._originalAttributes.set(name, root.getAttribute(name));
     }
 
+    const labelText = this._message('checklist.label', 'Checklist');
     const labelId = uid('zx-checklist-label');
-    const title = h('div', {
+    const title = this.options.hideLabel ? null : h('div', {
       class: 'zx-checklist__label',
       id: labelId
-    }, this._message('checklist.label', 'Checklist'));
+    }, labelText);
     const search = h('input', {
       ref: 'search',
       class: 'zx-checklist__search',
@@ -76,9 +81,10 @@ export class Checklist extends Component {
       class: 'zx-checklist__list'
     });
     list.style.maxBlockSize = `${Math.max(0, Number(this.options.height) || 0)}px`;
-    root.replaceChildren(title, search, list);
+    root.replaceChildren(...[title, search, list].filter(Boolean));
     root.setAttribute('role', 'group');
-    root.setAttribute('aria-labelledby', labelId);
+    if (title) root.setAttribute('aria-labelledby', labelId);
+    else root.setAttribute('aria-label', labelText);
 
     this.listen(search, 'input', () => this.search(/** @type {HTMLInputElement} */ (search).value));
     this.listen(list, 'change', (event) => {

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

@@ -7,7 +7,9 @@ import { Checklist } from './checklist.js';
  */
 export function registerChecklistFieldAdapter() {
   Field.register('checklist', (field, options) => {
-    const checklist = field.own(new Checklist(null, { ...(options.props ?? {}) }));
+    // The Field's label names the list (`aria-labelledby`), so the checklist draws no heading of
+    // its own under it.
+    const checklist = field.own(new Checklist(null, { hideLabel: true, ...(options.props ?? {}) }));
     let disabled = false;
     let setting = false;
     const syncDisabled = () => {

package/src/components/code-editor/code-editor.css

@@ -17,17 +17,18 @@
   min-block-size: var(--zx-control-height);
   padding-inline: var(--zx-space-3);
   border-block-end: 1px solid var(--zx-color-border);
-  background: var(--zx-color-bg-subtle);
+  background: var(--zx-color-bg-muted);
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
 }
 
+/* The language is an identifier (`json`, `sql`), so it is shown as one — in the mono face, as
+   written — rather than shouted in letter-spaced capitals. */
 .zx-code-editor__language {
   overflow: hidden;
-  font-weight: 600;
-  letter-spacing: 0.04em;
+  font-family: var(--zx-font-mono);
+  font-weight: var(--zx-weight-medium);
   text-overflow: ellipsis;
-  text-transform: uppercase;
   text-wrap: nowrap;
 }
 
@@ -44,7 +45,7 @@
   padding: var(--zx-space-3);
   border: 0;
   border-radius: 0;
-  outline: 0;
+  outline-color: transparent;
   background: transparent;
   box-shadow: none;
   color: var(--zx-color-text);
@@ -59,7 +60,7 @@
 }
 
 .zx-code-editor[data-readonly="true"] {
-  background: var(--zx-color-bg-subtle);
+  background: var(--zx-color-bg-muted);
 }
 
 .zx-code-editor[data-disabled="true"] {

package/src/components/code-editor/code-editor.js

@@ -19,10 +19,17 @@ import { h } from '../../core/dom.js';
  * @property {(event: CustomEvent<{value:string}>) => void} [onchange] Change listener.
  */
 
+/** Keys that only modify the next one: pressing them is not the keystroke that ends a Tab release. */
+const MODIFIER_KEYS = new Set(['Shift', 'Control', 'Alt', 'Meta', 'AltGraph', 'CapsLock', 'Fn', 'OS']);
+
 /**
  * Dependency-free source editor for structured text, Markdown, JSON and code. It deliberately uses
  * a native textarea: values remain text-safe, browser undo and IME behavior stay intact, and Tab /
  * Shift+Tab provide predictable indentation without a third-party editor runtime.
+ *
+ * Capturing Tab is what a code surface has to do, and it would be a keyboard trap if nothing undid
+ * it: Escape releases the capture until the next keystroke in the editor, so Escape then Tab (or
+ * Shift+Tab) moves focus out of the editor as it would leave any other field.
  * @fires CodeEditor#input
  * @fires CodeEditor#change
  * @extends {Component<CodeEditorOptions>}
@@ -81,8 +88,11 @@ export class CodeEditor extends Component {
     root.dataset.readonly = String(Boolean(this.options.readOnly));
     root.dataset.disabled = String(Boolean(this.options.disabled));
     root.replaceChildren(this._header, this._input);
+    /** Set by Escape: the next Tab moves focus instead of indenting. */
+    this._tabReleased = false;
 
     this.listen(this._input, 'keydown', (event) => this._handleKeydown(event));
+    this.listen(this._input, 'blur', () => { this._tabReleased = false; });
     this.listen(this._input, 'input', () => {
       this._updatePosition();
       this.emit('input', { value: this.getValue() });
@@ -139,7 +149,15 @@ export class CodeEditor extends Component {
 
   /** @param {KeyboardEvent} event @returns {void} */
   _handleKeydown(event) {
-    if (event.key !== 'Tab' || event.altKey || event.ctrlKey || event.metaKey ||
+    if (event.isComposing || MODIFIER_KEYS.has(event.key)) return;
+    if (event.key === 'Escape') {
+      this._tabReleased = true;
+      return;
+    }
+    // Any other keystroke ends the release, the Tab it was for included.
+    const released = this._tabReleased;
+    this._tabReleased = false;
+    if (released || event.key !== 'Tab' || event.altKey || event.ctrlKey || event.metaKey ||
         this._input.readOnly || this._input.disabled) return;
     const indent = String(this.options.indent ?? '\t');
     if (!indent) return;

package/src/components/code-editor/field-adapter.js

@@ -16,9 +16,15 @@ export function registerCodeEditorFieldAdapter() {
       value: options.value
     }));
     let setting = false;
-    editor.on('input', (event) => {
+    // The textarea's native `change` bubbles out of the editor after the editor has reported the
+    // same commit; without this the Field would emit `change` twice per edit.
+    field.listen(editor.el, 'change', (event) => event.stopImmediatePropagation());
+    // `change` on commit (the editor's own, when the textarea loses focus after an edit); every
+    // keystroke as `input`.
+    editor.on('change', (event) => {
       if (!setting) field.emit('change', { value: event.detail.value });
     });
+    editor.on('input', (event) => field.emit('input', { value: event.detail.value }));
     return {
       el: editor.el,
       get: () => editor.getValue(),
@@ -28,7 +34,8 @@ export function registerCodeEditorFieldAdapter() {
         finally { setting = false; }
       },
       focus: () => editor.focus(),
-      setDisabled: (value) => (value ? editor.disable() : editor.enable())
+      setDisabled: (value) => (value ? editor.disable() : editor.enable()),
+      setReadonly: (value) => { editor.setReadOnly(value); }
     };
   });
 }

package/src/components/context-menu/context-menu.css

@@ -21,12 +21,16 @@
   align-items: center;
   gap: var(--zx-space-2);
   inline-size: 100%;
-  min-block-size: var(--zx-control-height);
-  border: 1px solid transparent;
+  /* A menu row sits a little under a control so a list of them reads lighter than a column of
+     fields; the radius is the smallest step, inset inside the panel's own. */
+  min-block-size: calc(var(--zx-control-height) - 2px);
+  border: 0;
+  border-radius: var(--zx-radius-sm);
   background: transparent;
-  padding-inline: var(--zx-control-pad-x);
+  padding: var(--zx-space-1) var(--zx-space-2);
   color: inherit;
   font: inherit;
+  line-height: 1.35;
   text-align: start;
   text-decoration: none;
 }
@@ -117,8 +121,9 @@
   box-shadow: inset 0 0 0 2px var(--zx-color-bg-raised);
 }
 
+/* A section label is a caption, never taller than the rows it introduces. */
 .zx-context-menu__heading {
-  padding: var(--zx-space-2) var(--zx-control-pad-x) var(--zx-space-1);
+  padding: var(--zx-space-1) var(--zx-space-2);
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
   font-weight: 600;

package/src/components/context-menu/context-menu.js

@@ -9,7 +9,11 @@ import {
 import { Dropdown } from '../dropdown/dropdown.js';
 
 /** @typedef {import('../../internal/menu-items.js').MenuItem} MenuItem */
-/** @typedef {import('../../internal/menu-items.js').MenuEntry} ContextMenuEntry */
+/**
+ * A context menu's entries: the shared menu model without `choice` rows, which a menu that closes
+ * on every activation cannot hold.
+ * @typedef {import('../../internal/menu-items.js').MenuItem|import('../../internal/menu-items.js').MenuHeading|import('../../internal/menu-items.js').MenuSeparator|'-'} ContextMenuEntry
+ */
 
 /**
  * @typedef {Object} ContextMenuOptions
@@ -90,6 +94,8 @@ export class ContextMenu extends Component {
       scope: resolved
     });
     this.#panel = this.#dropdown.getPanel();
+    // Escape arrives through the overlay stack; closing returns focus where the menu came from.
+    this.#dropdown._configure({ onEscape: () => this.close(), tabReach: false });
     this.#panel.classList.add('zx-context-menu');
     this.#panel.setAttribute('role', 'menu');
 
@@ -268,7 +274,7 @@ export class ContextMenu extends Component {
   /** @param {Event} event @returns {void} */
   #onMenuKeydown(event) {
     const key = /** @type {KeyboardEvent} */ (event);
-    if (key.key === 'Escape' || key.key === 'Tab') {
+    if (key.key === 'Tab') {
       event.preventDefault();
       this.close();
       return;

package/src/components/copy/copy-button.css

@@ -1,4 +1,8 @@
+/* Positioned so the hidden status line below is placed inside the button. Without a positioned
+   ancestor it would hang off the page instead, adding scrollable overflow that focus() can scroll
+   into view. */
 .zx-copy-button {
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: var(--zx-space-2);
@@ -19,6 +23,8 @@
  */
 .zx-copy-button__status {
   position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   clip-path: inset(50%);
   inline-size: 1px;
   block-size: 1px;

package/src/components/copy/copy-input.css

@@ -1,18 +1,23 @@
 .zx-copy-input {
+  /* Holds the visually hidden label below, which would otherwise hang off the page. */
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--zx-space-1);
   inline-size: 100%;
 }
 
+/* The same quiet label a Field draws, so a copy field sits in a form without standing out. */
 .zx-copy-input__label {
-  color: var(--zx-color-text);
-  font-size: var(--zx-control-font-size);
-  font-weight: 500;
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-sm);
+  font-weight: var(--zx-weight-medium);
 }
 
 .zx-copy-input[data-hide-label] .zx-copy-input__label {
   position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   clip-path: inset(50%);
   inline-size: 1px;
   block-size: 1px;
@@ -49,7 +54,7 @@
 }
 
 .zx-copy-input__field:focus-visible {
-  outline: 0;
+  outline-color: transparent;
   box-shadow: none;
 }
 

package/src/components/data-filter/data-filter.css

@@ -28,18 +28,19 @@
 .zx-data-filter__label {
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-sm);
-  font-weight: 650;
+  font-weight: var(--zx-weight-medium);
 }
 
 .zx-data-filter__badge {
   align-self: center;
   min-inline-size: var(--zx-control-height);
   border-radius: var(--zx-radius-full);
-  background: var(--zx-color-bg-selected);
-  color: var(--zx-color-accent);
+  background: var(--zx-color-bg-current);
+  color: var(--zx-color-text);
   padding: var(--zx-space-1) var(--zx-space-2);
   font-size: var(--zx-text-sm);
-  font-weight: 650;
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--zx-weight-medium);
   text-align: center;
 }
 

package/src/components/data-filter/data-filter.js

@@ -20,7 +20,7 @@ import {
  * @property {Array<string|((row: DataFilterRow) => unknown)>} [fields] Row fields combined with OR.
  * @property {(row: DataFilterRow) => unknown} [get] Custom value accessor.
  * @property {Array<unknown|DataFilterOption>} [options] Explicit options; omitted derives distinct values.
- * @property {string} [emptyLabel] Empty option label.
+ * @property {string} [emptyLabel] Empty option label; omitted resolves message `dataFilter.all`, "All".
  */
 
 /**
@@ -48,7 +48,7 @@ import {
  * @property {FilterDefinition[]} [filters=[]] Declarative filters.
  * @property {DataFilterRow[]} [data=[]] Rows to filter.
  * @property {boolean} [autoApply=true] Apply and emit whenever a control changes.
- * @property {string|null} [clearLabel=null] Clear button label; null resolves `dataFilter.clear`.
+ * @property {string|null} [clearLabel=null] Clear button label; null resolves message `dataFilter.clear`, "Clear".
  * @property {(event: CustomEvent<DataFilterEventDetail>) => void} [onfilter]
  */