@zeyos/zx 5.0.0 → 5.2.0

package/src/components/breadcrumb/breadcrumb.css

@@ -58,7 +58,7 @@
 }
 
 .zx-breadcrumb__link:focus-visible {
-  outline: 0;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 

package/src/components/calendar/calendar.css

@@ -118,7 +118,7 @@
 .zx-calendar__more:focus-visible,
 .zx-calendar__month-week-number:focus-visible {
   z-index: 4;
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 

package/src/components/calendar/calendar.js

@@ -47,7 +47,9 @@ import {
  * @property {CalendarReader} [eventEditable='editable'] Per-event move reader.
  * @property {CalendarReader} [eventDurationEditable='durationEditable'] Per-event resize reader.
  * @property {'milliseconds'|'seconds'} [dateUnit='milliseconds'] Unit for numeric event dates.
- * @property {Record<string, string>} [msg] Localized component messages.
+ * @property {Record<string, string>} [msg] Per-instance messages, keyed `calendar.*` (`calendar.today`,
+ *   `calendar.next`, …). The bare keys of earlier versions (`today`, `next`) are still read, after the
+ *   namespaced key, until the next major version.
  * @property {(event: CalendarEvent) => Node|string|null} [renderEvent] Optional safe event-content renderer.
  * @property {(event: CustomEvent<{events: CalendarEvent[]}>) => void} [oneventschange] Programmatic event-data listener.
  * @property {(event: CustomEvent<{view: CalendarView, oldView: CalendarView}>) => void} [onviewchange] View listener.
@@ -73,31 +75,6 @@ import {
 
 /** @typedef {{silent?: boolean}} CalendarSetOptions */
 
-const DEFAULT_MESSAGES = {
-  today: 'Today',
-  new: 'New',
-  agenda: 'Agenda',
-  day: 'Day',
-  week: 'Week',
-  month: 'Month',
-  year: 'Year',
-  previous: 'Previous period',
-  next: 'Next period',
-  allDay: 'All day',
-  noEvents: 'No events',
-  more: '+%1 more',
-  loading: 'Loading calendar…',
-  move: 'Move %1',
-  resize: 'Resize %1',
-  moveStarted: 'Moving %1. Use arrow keys, Space to drop, or Escape to cancel.',
-  resizeStarted: 'Resizing %1. Use arrow keys, Space to drop, or Escape to cancel.',
-  editPreview: '%1, %2 to %3',
-  editCancelled: 'Calendar edit cancelled.',
-  editCommitted: '%1 updated.',
-  calendar: 'Calendar',
-  weekNumber: 'Week %1'
-};
-
 /**
  * Accessible, dependency-free agenda/day/week/month/year scheduling surface.
  * @fires Calendar#viewchange
@@ -147,8 +124,7 @@ export class Calendar extends Component {
     eventLocation: 'location',
     eventEditable: 'editable',
     eventDurationEditable: 'durationEditable',
-    dateUnit: 'milliseconds',
-    msg: DEFAULT_MESSAGES
+    dateUnit: 'milliseconds'
   };
 
   /** @returns {HTMLElement} */
@@ -178,9 +154,9 @@ export class Calendar extends Component {
     this._nowTimer = null;
 
     const navigation = h('div', { class: 'zx-calendar__navigation' },
-      this._toolbarButton('previous', this.msg('previous'), 'chevron-left'),
-      this._toolbarButton('today', this.msg('today')),
-      this._toolbarButton('next', this.msg('next'), 'chevron-right'));
+      this._toolbarButton('previous', this.msg('calendar.previous'), 'chevron-left'),
+      this._toolbarButton('today', this.msg('calendar.today')),
+      this._toolbarButton('next', this.msg('calendar.next'), 'chevron-right'));
     const heading = h('h2', {
       ref: 'heading',
       class: 'zx-calendar__heading',
@@ -196,14 +172,14 @@ export class Calendar extends Component {
       class: 'zx-calendar__view-button',
       dataset: { calendarAction: 'view', view },
       disabled: this.options.disabled
-    }, this.msg(view))));
+    }, this.msg(`calendar.${view}`))));
     const commands = h('div', { class: 'zx-calendar__commands' }, views,
       h('button', {
         type: 'button',
         class: 'zx-calendar__new',
         dataset: { calendarAction: 'new' },
         disabled: this.options.disabled
-      }, icon('plus'), h('span', {}, this.msg('new'))));
+      }, icon('plus'), h('span', {}, this.msg('calendar.new'))));
     const toolbar = h('header', { class: 'zx-calendar__toolbar' }, navigation, heading, commands);
     const body = h('div', { ref: 'body', class: 'zx-calendar__body' });
     const loading = h('div', {
@@ -211,7 +187,7 @@ export class Calendar extends Component {
       class: 'zx-calendar__loading',
       role: 'status',
       hidden: true
-    }, this.msg('loading'));
+    }, this.msg('calendar.loading'));
     const status = h('div', {
       ref: 'status',
       class: 'zx-calendar__status',
@@ -220,7 +196,7 @@ export class Calendar extends Component {
       ariaAtomic: 'true'
     });
     root.replaceChildren(toolbar, body, loading, status);
-    root.setAttribute('aria-label', this.msg('calendar'));
+    root.setAttribute('aria-label', this.msg('calendar.label'));
     root.dataset.view = this._view;
     root.dataset.state = 'ready';
 
@@ -470,7 +446,7 @@ export class Calendar extends Component {
         }, this._format(day, { weekday: 'long', day: 'numeric', month: 'long' })));
       const entries = h('div', { class: 'zx-calendar__agenda-events', role: 'gridcell' });
       if (!events.length) {
-        entries.append(h('p', { class: 'zx-calendar__agenda-empty' }, this.msg('noEvents')));
+        entries.append(h('p', { class: 'zx-calendar__agenda-empty' }, this.msg('calendar.noEvents')));
       } else {
         for (const event of events) entries.append(this._eventElement(event, { variant: 'agenda', day }));
       }
@@ -576,7 +552,7 @@ export class Calendar extends Component {
   /** @param {Date[]} days @returns {HTMLElement} */
   _renderAllDayRail(days) {
     const rail = h('div', { class: 'zx-calendar__all-day' },
-      h('span', { class: 'zx-calendar__all-day-label' }, this.msg('allDay')));
+      h('span', { class: 'zx-calendar__all-day-label' }, this.msg('calendar.allDay')));
     const layer = h('div', {
       class: 'zx-calendar__all-day-grid',
       role: 'row',
@@ -625,7 +601,7 @@ export class Calendar extends Component {
         type: 'button',
         class: 'zx-calendar__month-week-number',
         dataset: { calendarAction: 'week', date: calendarDayKey(start) },
-        ariaLabel: this.msg('weekNumber', isoWeek(start)),
+        ariaLabel: this.msg('calendar.weekNumber', isoWeek(start)),
         disabled: this.options.disabled
       }, String(isoWeek(start))));
       const days = h('div', { class: 'zx-calendar__month-days' });
@@ -666,7 +642,7 @@ export class Calendar extends Component {
           dataset: { calendarAction: 'more', date: calendarDayKey(day), count: String(count) },
           style: { gridColumn: String(index + 1), gridRow: String(eventLimit + 1) },
           disabled: this.options.disabled
-        }, this.msg('more', count)));
+        }, this.msg('calendar.more', count)));
       }
       row.append(days, lanes);
       wrapper.append(row);
@@ -758,7 +734,7 @@ export class Calendar extends Component {
         type: 'button',
         class: 'zx-calendar__event-resize',
         dataset: { eventAction: 'resize', eventId: key },
-        ariaLabel: this.msg('resize', event.title),
+        ariaLabel: this.msg('calendar.resize', event.title),
         disabled: this.options.disabled
       }, h('span', { ariaHidden: 'true' })));
     }
@@ -886,7 +862,7 @@ export class Calendar extends Component {
       };
       control.setAttribute('aria-grabbed', 'true');
       control.closest('.zx-calendar__event')?.setAttribute('data-state', 'grabbed');
-      this._announce(this.msg(resize ? 'resizeStarted' : 'moveStarted', item.title));
+      this._announce(this.msg(resize ? 'calendar.resizeStarted' : 'calendar.moveStarted', item.title));
       return;
     }
     if (!this._keyboardEdit || String(this._keyboardEdit.event.id) !== String(item.id)) return;
@@ -919,7 +895,7 @@ export class Calendar extends Component {
       if (proposed.end > proposed.start) edit.event = proposed;
     }
     edit.control.closest('.zx-calendar__event')?.setAttribute('data-preview', this._eventTime(edit.event, edit.event.start));
-    this._announce(this.msg('editPreview', edit.event.title,
+    this._announce(this.msg('calendar.editPreview', edit.event.title,
       this._dateTimeLabel(edit.event.start), this._dateTimeLabel(edit.event.end)));
   }
 
@@ -1065,7 +1041,7 @@ export class Calendar extends Component {
       }
       wrapper.dataset.preview = this._eventTime(proposed, proposed.start);
     }
-    this._announce(this.msg('editPreview', proposed.title,
+    this._announce(this.msg('calendar.editPreview', proposed.title,
       this._dateTimeLabel(proposed.start), this._dateTimeLabel(proposed.end)));
   }
 
@@ -1255,7 +1231,7 @@ export class Calendar extends Component {
     edit.control.removeAttribute('aria-grabbed');
     edit.control.closest('.zx-calendar__event')?.removeAttribute('data-state');
     this._keyboardEdit = null;
-    this._announce(this.msg('editCancelled'));
+    this._announce(this.msg('calendar.editCancelled'));
     this._renderView({ preserveFocus: true });
   }
 
@@ -1286,7 +1262,7 @@ export class Calendar extends Component {
       this._replaceNormalizedEvent(oldEvent);
       this._mutationVersions.delete(key);
       this._renderView({ preserveFocus: true });
-      this._announce(this.msg('editCancelled'));
+      this._announce(this.msg('calendar.editCancelled'));
       return true;
     };
     const detail = {
@@ -1299,7 +1275,7 @@ export class Calendar extends Component {
     };
     const emitted = this.emit('eventchange', detail);
     if (emitted.defaultPrevented) revert();
-    else this._announce(this.msg('editCommitted', proposed.title));
+    else this._announce(this.msg('calendar.editCommitted', proposed.title));
   }
 
   /** @param {CalendarEvent} event @returns {void} */
@@ -1364,11 +1340,11 @@ export class Calendar extends Component {
 
   /** @param {CalendarEvent} event @param {Date} day @returns {string} */
   _eventTime(event, day) {
-    if (event.allDay) return this.msg('allDay');
+    if (event.allDay) return this.msg('calendar.allDay');
     if (calendarEventSpansDays(event)) {
       if (sameCalendarDay(event.start, day)) return `${formatDateTime(event.start, this.options.locale)} →`;
       if (sameCalendarDay(event.end, day)) return `→ ${formatDateTime(event.end, this.options.locale)}`;
-      return this.msg('allDay');
+      return this.msg('calendar.allDay');
     }
     const start = formatTimeDate(event.start, this.options.locale);
     if (event.end <= event.start) return start;
@@ -1490,10 +1466,8 @@ export class Calendar extends Component {
   }
 
   /**
-   * Resolves a message through the host translator, falling back to the built-in English text.
-   *
-   * Distinct from `msg()`: the built-in `msg` option answers the calendar's own vocabulary, so a
-   * dotted key falls past it to the host translator, which is what these strings never had.
+   * Resolves a message through `msg()`, falling back to the built-in English text. Redundant now
+   * that `msg()` ends in the default catalogue; kept until the private copies are removed.
    * @param {string} key Message key.
    * @param {string} fallback Built-in text, with `%1`-style placeholders.
    * @param {...unknown} args Interpolation values.

package/src/components/card/card.css

@@ -51,7 +51,7 @@
 }
 
 .zx-card:has(.zx-card__primary:focus-visible) {
-  outline: 0;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 
@@ -129,7 +129,7 @@
 }
 
 .zx-card__primary:focus-visible {
-  outline: 0;
+  outline-color: transparent;
 }
 
 .zx-card__actions,

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

@@ -38,7 +38,7 @@
 }
 
 .zx-card-view__sort select:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 
@@ -103,7 +103,7 @@
 }
 
 .zx-record-card:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 
@@ -179,7 +179,7 @@
 }
 
 .zx-record-card__selection input:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 
@@ -246,7 +246,7 @@
 
 .zx-record-card__primary:focus-visible {
   border-radius: var(--zx-radius-sm);
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 
@@ -291,7 +291,7 @@
 }
 
 .zx-record-card__action:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 

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/code-editor/code-editor.css

@@ -45,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);

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.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-input.css

@@ -54,7 +54,7 @@
 }
 
 .zx-copy-input__field:focus-visible {
-  outline: 0;
+  outline-color: transparent;
   box-shadow: none;
 }
 

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]
  */
 

package/src/components/date-picker/time-picker.css

@@ -84,7 +84,7 @@
 }
 
 .zx-time-picker__clock-unit:focus-visible {
-  outline: 0;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 
@@ -146,7 +146,7 @@
 }
 
 .zx-time-picker__mark:focus-visible {
-  outline: 0;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 

package/src/components/dock/dock.css

@@ -83,7 +83,7 @@
 .zx-dock__toggle:disabled .zx-dock__chevron { visibility: hidden; }
 
 .zx-dock__toggle:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 
@@ -141,7 +141,7 @@
 }
 
 .zx-dock__tab:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 
@@ -172,7 +172,8 @@
 }
 
 .zx-dock__panel:focus-visible {
-  outline: none;
+  outline-color: transparent;
+  outline-offset: -2px;
   box-shadow: inset var(--zx-focus-ring);
 }
 
@@ -222,7 +223,7 @@
 }
 
 .zx-dock__divider:focus-visible {
-  outline: none;
+  outline-color: transparent;
   z-index: 1;
   box-shadow: var(--zx-focus-ring);
 }