@zeyos/zx 4.3.4 → 4.4.0

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

@@ -16,15 +16,19 @@
 }
 
 .zx-context-menu__item {
-  display: flex;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
   gap: var(--zx-space-2);
   inline-size: 100%;
   min-block-size: var(--zx-control-height);
-  border-color: transparent;
+  border: 1px solid transparent;
   background: transparent;
   padding-inline: var(--zx-control-pad-x);
+  color: inherit;
+  font: inherit;
   text-align: start;
+  text-decoration: none;
 }
 
 .zx-context-menu__item:hover,
@@ -42,11 +46,84 @@
   opacity: 0.65;
 }
 
-.zx-context-menu__icon {
+.zx-context-menu__leading,
+.zx-context-menu__meta {
   display: inline-flex;
+  align-items: center;
+  gap: var(--zx-space-2);
   flex: none;
 }
 
+.zx-context-menu__meta {
+  justify-content: flex-end;
+}
+
+.zx-context-menu__leading {
+  justify-content: center;
+  inline-size: var(--zx-space-4);
+}
+
+.zx-context-menu__body {
+  display: flex;
+  min-inline-size: 0;
+  flex-direction: column;
+}
+
+.zx-context-menu__label,
+.zx-context-menu__description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.zx-context-menu__description,
+.zx-context-menu__shortcut,
+.zx-context-menu__adornment {
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+}
+
+.zx-context-menu__badge {
+  min-inline-size: var(--zx-space-4);
+  border-radius: var(--zx-radius-full);
+  background: var(--zx-color-bg-muted);
+  padding-inline: var(--zx-space-1);
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+  text-align: center;
+}
+
+.zx-context-menu__shortcut {
+  border: 0;
+  background: transparent;
+  padding: 0;
+  font-family: var(--zx-font-mono);
+}
+
+.zx-context-menu__check {
+  inline-size: var(--zx-space-3);
+  block-size: var(--zx-space-3);
+  border: 1px solid var(--zx-color-border-strong);
+  border-radius: var(--zx-radius-sm);
+}
+
+.zx-context-menu__check[data-check-kind="radio"] {
+  border-radius: var(--zx-radius-full);
+}
+
+.zx-context-menu__item[aria-checked="true"] .zx-context-menu__check {
+  border-color: var(--zx-color-accent);
+  background: var(--zx-color-accent);
+  box-shadow: inset 0 0 0 2px var(--zx-color-bg-raised);
+}
+
+.zx-context-menu__heading {
+  padding: var(--zx-space-2) var(--zx-control-pad-x) var(--zx-space-1);
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+  font-weight: 600;
+}
+
 .zx-context-menu__separator {
   block-size: 1px;
   margin: var(--zx-space-1) var(--zx-space-2);

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

@@ -1,11 +1,15 @@
 import { Component } from '../../core/component.js';
 import { h, resolveElement } from '../../core/dom.js';
-import { icon } from '../../core/icons.js';
 import { rovingTabindex, typeahead } from '../../core/keyboard.js';
+import {
+  isMenuItem,
+  MENU_ITEM_SELECTOR,
+  renderMenuEntries
+} from '../../internal/menu-items.js';
 import { Dropdown } from '../dropdown/dropdown.js';
 
-/** @typedef {import('../menu-button/menu-button.js').MenuItem} MenuItem */
-/** @typedef {MenuItem|'-'} ContextMenuEntry */
+/** @typedef {import('../../internal/menu-items.js').MenuItem} MenuItem */
+/** @typedef {import('../../internal/menu-items.js').MenuEntry} ContextMenuEntry */
 
 /**
  * @typedef {Object} ContextMenuOptions
@@ -22,8 +26,6 @@ import { Dropdown } from '../dropdown/dropdown.js';
  * @property {(event: CustomEvent<Record<string, never>>) => void} [onclose] Close listener.
  */
 
-const MENU_ITEM_SELECTOR = '[role="menuitem"]';
-
 /**
  * Right-click menu for a region, implementing the APG menu pattern.
  *
@@ -107,7 +109,7 @@ export class ContextMenu extends Component {
     this.listen(this.#target, 'keydown', (event) => this.#onTargetKeydown(event));
     this.listen(this.#panel, 'click', (event) => {
       const item = event.target.closest?.(MENU_ITEM_SELECTOR);
-      if (item && this.#panel.contains(item)) this.#select(item);
+      if (item && this.#panel.contains(item)) this.#select(item, event);
     });
     this.listen(this.#panel, 'keydown', (event) => this.#onMenuKeydown(event));
   }
@@ -127,25 +129,7 @@ export class ContextMenu extends Component {
    */
   setItems(items) {
     this.#items = Array.isArray(items) ? items.slice() : [];
-    this.#panel.replaceChildren();
-    this.#items.forEach((item, index) => {
-      if (item === '-') {
-        this.#panel.append(h('div', { class: 'zx-context-menu__separator', role: 'separator' }));
-        return;
-      }
-      const children = [];
-      if (item.icon) children.push(h('span', { class: 'zx-context-menu__icon' }, icon(item.icon)));
-      children.push(h('span', { class: 'zx-context-menu__label' }, String(item.label ?? '')));
-      this.#panel.append(h('button', {
-        class: 'zx-context-menu__item',
-        type: 'button',
-        role: 'menuitem',
-        tabindex: '-1',
-        'data-menu-item': String(index),
-        'data-danger': item.danger ? 'true' : null,
-        ariaDisabled: item.disabled ? 'true' : null
-      }, children));
-    });
+    this.#panel.replaceChildren(...renderMenuEntries(this.#items, 'context-menu'));
     return this;
   }
 
@@ -292,20 +276,28 @@ export class ContextMenu extends Component {
     if (key.key === 'Enter' || key.key === ' ') {
       const item = /** @type {Element} */ (key.target).closest?.(MENU_ITEM_SELECTOR);
       if (!item || !this.#panel.contains(item)) return;
+      if (key.key === 'Enter' && item.tagName === 'A') return;
       event.preventDefault();
-      this.#select(item);
+      /** @type {HTMLElement} */ (item).click();
       return;
     }
     this.#typeahead(key);
   }
 
-  /** @param {Element} element @returns {void} */
-  #select(element) {
+  /** @param {Element} element @param {Event|null} [event=null] @returns {void} */
+  #select(element, event = null) {
     const index = Number(element.getAttribute('data-menu-item'));
     const item = this.#items[index];
-    if (!item || item === '-' || item.disabled) return;
+    if (!isMenuItem(item) || item.disabled) {
+      event?.preventDefault();
+      return;
+    }
     const context = this.#context;
-    this.emit('select', { value: item.value, item, context });
+    const selected = this.emit('select', { value: item.value, item, context });
+    if (selected.defaultPrevented) {
+      event?.preventDefault();
+      return;
+    }
     try {
       item.onselect?.(item.value, item, this);
     } finally {

package/src/components/date-picker/date-picker.js

@@ -2,6 +2,7 @@ import { Component } from '../../core/component.js';
 import { addDays, addMonths, formatDate, getWeekStart, isSameDay, parseDate } from '../../core/date.js';
 import { h } from '../../core/dom.js';
 import { icon } from '../../core/icons.js';
+import { printf } from '../../core/i18n.js';
 import { TimePicker } from './time-picker.js';
 
 /**
@@ -55,7 +56,7 @@ export class DatePicker extends Component {
           ref: 'previous',
           class: 'zx-date-picker__nav',
           type: 'button',
-          ariaLabel: 'Previous month'
+          ariaLabel: this._message('datePicker.previousMonth', 'Previous month')
         }, icon('chevron-left')),
         h('button', {
           ref: 'heading',
@@ -68,7 +69,7 @@ export class DatePicker extends Component {
           ref: 'next',
           class: 'zx-date-picker__nav',
           type: 'button',
-          ariaLabel: 'Next month'
+          ariaLabel: this._message('datePicker.nextMonth', 'Next month')
         }, icon('chevron-right'))
       ),
       h('div', {
@@ -81,14 +82,14 @@ export class DatePicker extends Component {
           ref: 'quickPrevious',
           class: 'zx-date-picker__nav',
           type: 'button',
-          ariaLabel: 'Previous year'
+          ariaLabel: this._message('datePicker.previousYear', 'Previous year')
         }, icon('chevron-left')),
         h('span', { ref: 'quickYear', class: 'zx-date-picker__quick-year', ariaLive: 'polite' }),
         h('button', {
           ref: 'quickNext',
           class: 'zx-date-picker__nav',
           type: 'button',
-          ariaLabel: 'Next year'
+          ariaLabel: this._message('datePicker.nextYear', 'Next year')
         }, icon('chevron-right'))
       ),
       h('div', { ref: 'quickGrid', class: 'zx-date-picker__quick-grid', role: 'grid' })),
@@ -96,7 +97,7 @@ export class DatePicker extends Component {
         ref: 'grid',
         class: 'zx-date-picker__grid',
         role: 'grid',
-        ariaLabel: 'Calendar'
+        ariaLabel: this._message('datePicker.calendar', 'Calendar')
       },
       h('thead', { ref: 'weekdays' }),
       h('tbody', { ref: 'days' }))
@@ -203,7 +204,7 @@ export class DatePicker extends Component {
       row.append(h('th', {
         class: 'zx-date-picker__week-heading',
         scope: 'col',
-        ariaLabel: 'Week number'
+        ariaLabel: this._message('datePicker.weekNumber', 'Week number')
       }, '#'));
     }
     const sunday = new Date(2023, 0, 1);
@@ -224,7 +225,8 @@ export class DatePicker extends Component {
     const offset = (first.getDay() - this._weekStart + 7) % 7;
     const start = addDays(first, -offset);
     this.refs.heading.textContent = formatDate(first, '%B %Y');
-    this.refs.heading.setAttribute('aria-label', `Choose month and year, ${formatDate(first, '%B %Y')}`);
+    this.refs.heading.setAttribute('aria-label',
+      this._message('datePicker.chooseMonthYear', 'Choose month and year, %1', formatDate(first, '%B %Y')));
     const rows = [];
 
     for (let week = 0; week < 6; week += 1) {
@@ -234,7 +236,7 @@ export class DatePicker extends Component {
         row.append(h('th', {
           class: 'zx-date-picker__week',
           scope: 'row',
-          ariaLabel: `Week ${isoWeekNumber(rowStart)}`
+          ariaLabel: this._message('datePicker.week', 'Week %1', isoWeekNumber(rowStart))
         }, String(isoWeekNumber(rowStart))));
       }
       for (let column = 0; column < 7; column += 1) {
@@ -450,6 +452,18 @@ export class DatePicker extends Component {
   _buttonForDate(date) {
     return this.refs.days.querySelector(`[data-date="${formatDate(date, '%Y-%m-%d')}"]`);
   }
+
+  /**
+   * 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;
+  }
 }
 
 /**

package/src/components/date-picker/month-picker.js

@@ -47,21 +47,21 @@ export class MonthPicker extends DatePicker {
           ref: 'previousYear',
           class: 'zx-month-picker__nav',
           type: 'button',
-          ariaLabel: 'Previous year'
+          ariaLabel: this._message('monthPicker.previousYear', 'Previous year')
         }, icon('chevron-left')),
         h('span', { ref: 'year', class: 'zx-month-picker__year', ariaLive: 'polite' }),
         h('button', {
           ref: 'nextYear',
           class: 'zx-month-picker__nav',
           type: 'button',
-          ariaLabel: 'Next year'
+          ariaLabel: this._message('monthPicker.nextYear', 'Next year')
         }, icon('chevron-right'))
       ),
       h('div', {
         ref: 'grid',
         class: 'zx-month-picker__grid',
         role: 'grid',
-        ariaLabel: 'Choose month'
+        ariaLabel: this._message('monthPicker.chooseMonth', 'Choose month')
       })
     );
     this._content = content;

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

@@ -48,15 +48,15 @@ export class TimePicker extends Component {
     const content = h('div', {
       class: 'zx-time-picker__segments',
       role: 'group',
-      ariaLabel: 'Time'
+      ariaLabel: this._message('timePicker.label', 'Time')
     });
     this._content = content;
-    this._addSpin(content, 'h', 'Hour', 23);
+    this._addSpin(content, 'h', this._message('timePicker.hour', 'Hour'), 23);
     content.append(h('span', { class: 'zx-time-picker__separator', ariaHidden: 'true' }, ':'));
-    this._addSpin(content, 'm', 'Minute', 59);
+    this._addSpin(content, 'm', this._message('timePicker.minute', 'Minute'), 59);
     if (this.options.seconds) {
       content.append(h('span', { class: 'zx-time-picker__separator', ariaHidden: 'true' }, ':'));
-      this._addSpin(content, 's', 'Second', 59);
+      this._addSpin(content, 's', this._message('timePicker.second', 'Second'), 59);
     }
     root.append(content);
 
@@ -66,7 +66,7 @@ export class TimePicker extends Component {
         ref: 'clockToggle',
         class: 'zx-icon-btn zx-time-picker__clock-toggle',
         type: 'button',
-        ariaLabel: 'Pick the time on a clock',
+        ariaLabel: this._message('timePicker.clock', 'Pick the time on a clock'),
         ariaExpanded: 'false',
         ariaControls: clockId
       }, icon('clock', { size: 15 })));
@@ -223,7 +223,7 @@ export class TimePicker extends Component {
           ref: 'headHour',
           class: 'zx-time-picker__clock-unit',
           type: 'button',
-          ariaLabel: 'Select the hour',
+          ariaLabel: this._message('timePicker.selectHour', 'Select the hour'),
           dataset: { unit: 'h' }
         }),
         h('span', { class: 'zx-time-picker__clock-colon', ariaHidden: 'true' }, ':'),
@@ -231,7 +231,7 @@ export class TimePicker extends Component {
           ref: 'headMinute',
           class: 'zx-time-picker__clock-unit',
           type: 'button',
-          ariaLabel: 'Select the minutes',
+          ariaLabel: this._message('timePicker.selectMinutes', 'Select the minutes'),
           dataset: { unit: 'm' }
         })),
       h('div', { ref: 'dial', class: 'zx-time-picker__dial', role: 'radiogroup' },
@@ -290,7 +290,8 @@ export class TimePicker extends Component {
     this.refs.headMinute.textContent = pad(this._display.m);
     this.refs.headHour.setAttribute('aria-pressed', String(hours));
     this.refs.headMinute.setAttribute('aria-pressed', String(!hours));
-    this.refs.dial.setAttribute('aria-label', hours ? 'Hour' : 'Minutes');
+    this.refs.dial.setAttribute('aria-label', hours
+      ? this._message('timePicker.hour', 'Hour') : this._message('timePicker.minutes', 'Minutes'));
     if (!this._clockOpen) return;
 
     const selected = hours ? this._display.h : this._display.m;
@@ -330,6 +331,17 @@ export class TimePicker extends Component {
     element.setAttribute('aria-checked', String(checked));
     element.tabIndex = checked ? 0 : -1;
   }
+
+  /**
+   * 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;
+  }
 }
 
 /**