@zeyos/zx 4.3.4 → 5.0.0

package/src/components/master-panel/master-panel.css

@@ -26,6 +26,8 @@
   margin: 0;
   flex: 1;
   font-size: var(--zx-text-xl);
+  font-weight: 650;
+  letter-spacing: var(--zx-tracking-title);
 }
 
 .zx-master-panel__buttons {

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

@@ -11,15 +11,23 @@
 }
 
 .zx-menu-button__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;
+  /* 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;
 }
 
 .zx-menu-button__item:hover,
@@ -37,11 +45,85 @@
   opacity: .65;
 }
 
-.zx-menu-button__icon {
+.zx-menu-button__leading,
+.zx-menu-button__meta {
   display: inline-flex;
+  align-items: center;
+  gap: var(--zx-space-2);
   flex: none;
 }
 
+.zx-menu-button__meta {
+  justify-content: flex-end;
+}
+
+.zx-menu-button__leading {
+  justify-content: center;
+  inline-size: var(--zx-space-4);
+}
+
+.zx-menu-button__body {
+  display: flex;
+  min-inline-size: 0;
+  flex-direction: column;
+}
+
+.zx-menu-button__label,
+.zx-menu-button__description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.zx-menu-button__description,
+.zx-menu-button__shortcut,
+.zx-menu-button__adornment {
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+}
+
+.zx-menu-button__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-menu-button__shortcut {
+  border: 0;
+  background: transparent;
+  padding: 0;
+  font-family: var(--zx-font-mono);
+}
+
+.zx-menu-button__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-menu-button__check[data-check-kind="radio"] {
+  border-radius: var(--zx-radius-full);
+}
+
+.zx-menu-button__item[aria-checked="true"] .zx-menu-button__check {
+  border-color: var(--zx-color-accent);
+  background: var(--zx-color-accent);
+  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-menu-button__heading {
+  padding: var(--zx-space-1) var(--zx-space-2);
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+  font-weight: 600;
+}
+
 .zx-menu-button__separator {
   block-size: 1px;
   margin: var(--zx-space-1) var(--zx-space-2);

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

@@ -1,21 +1,17 @@
 import { Component } from '../../core/component.js';
 import { h, resolveElement } from '../../core/dom.js';
+import { uid } from '../../core/util.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';
 
-const MENU_ITEM_SELECTOR = '[role="menuitem"]';
-
-/**
- * @typedef {Object} MenuItem
- * @property {string} label Item label.
- * @property {string} [icon] Kernel icon name.
- * @property {unknown} [value] Value emitted on selection.
- * @property {boolean} [disabled=false] Whether selection is disabled.
- * @property {boolean} [danger=false] Whether the action is dangerous.
- * @property {(value: unknown, item: MenuItem, menuButton: MenuButton) => void} [onselect] Selection callback.
- */
-/** @typedef {MenuItem|'-'} MenuButtonItem */
+/** @typedef {import('../../internal/menu-items.js').MenuItem} MenuItem */
+/** @typedef {import('../../internal/menu-items.js').MenuEntry} MenuButtonItem */
 /**
  * @typedef {Object} MenuButtonOptions
  * @property {string} [label=''] Trigger label.
@@ -28,8 +24,19 @@ const MENU_ITEM_SELECTOR = '[role="menuitem"]';
  * @property {(event: CustomEvent<Record<string, never>>) => void} [onclose] Close event listener.
  */
 
+/**
+ * @typedef {Object} MenuButtonOpenOptions
+ * @property {boolean|HTMLElement} [returnFocus=true] Where focus goes when this opening ends with a
+ *   selection or Escape: `true` is the trigger, an element is that element (the trigger again if
+ *   it has left the document), and `false` leaves focus alone.
+ */
+
 /**
  * APG menu-button trigger backed by an anchored Dropdown.
+ *
+ * Choosing an item closes the menu and puts focus back on the trigger before the `select` event
+ * and the item's `onselect` run, so whatever they open — a dialog, a sheet — records the trigger
+ * as the place to return to, and focus they move themselves stays where they put it.
  * @fires MenuButton#select
  * @fires MenuButton#open
  * @fires MenuButton#close
@@ -59,6 +66,8 @@ export class MenuButton extends Component {
   #items = [];
   /** @type {{attributes: Array<[string, string]>, children: Node[]}|null} */
   #original = null;
+  /** @type {boolean|HTMLElement} Focus destination for the current opening. */
+  #returnFocus = true;
   #created = false;
   #destroyed = false;
 
@@ -94,6 +103,10 @@ export class MenuButton extends Component {
     this.#panel = this.#dropdown.getPanel();
     this.#panel.classList.add('zx-menu-button__menu');
     this.#panel.setAttribute('role', 'menu');
+    // The menu is named by its trigger, as the APG menu-button pattern has it. An id given here to
+    // an enhanced trigger goes again on destroy(), with the rest of the attributes it gained.
+    if (!this.el.id) this.el.id = uid('zx-menu-button');
+    this.#panel.setAttribute('aria-labelledby', this.el.id);
     this.el.setAttribute('aria-haspopup', 'menu');
     if (existing && hasExplicitLabel) this.setLabel(this.options.label);
 
@@ -105,7 +118,10 @@ export class MenuButton extends Component {
     );
 
     this.#dropdown.on('open', () => this.emit('open'));
-    this.#dropdown.on('close', () => this.emit('close'));
+    this.#dropdown.on('close', () => {
+      this.#returnFocus = true;
+      this.emit('close');
+    });
     this.listen(this.el, 'click', () => {
       if (this.isOpen()) this.close();
       else {
@@ -116,7 +132,7 @@ export class MenuButton extends Component {
     this.listen(this.el, 'keydown', (event) => this.#onTriggerKeydown(event));
     this.listen(this.#panel, 'click', (event) => {
       const item = event.target.closest?.(MENU_ITEM_SELECTOR);
-      if (item && this.#panel.contains(item)) this.#selectElement(item);
+      if (item && this.#panel.contains(item)) this.#selectElement(item, event);
     });
     this.listen(this.#panel, 'keydown', (event) => this.#onMenuKeydown(event));
   }
@@ -142,33 +158,18 @@ export class MenuButton 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-menu-button__separator', role: 'separator' }));
-        return;
-      }
-      const children = [];
-      if (item.icon) children.push(h('span', { class: 'zx-menu-button__icon' }, icon(item.icon)));
-      children.push(h('span', { class: 'zx-menu-button__label' }, item.label));
-      this.#panel.append(h('button', {
-        class: 'zx-menu-button__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, 'menu-button'));
     return this;
   }
 
   /**
    * Opens the menu.
+   * @param {MenuButtonOpenOptions} [options={}] Where focus returns when this opening ends; ignored
+   *   while the menu is already open.
    * @returns {this}
    */
-  open() {
+  open(options = {}) {
+    if (!this.isOpen()) this.#returnFocus = options?.returnFocus ?? true;
     this.#dropdown.open();
     return this;
   }
@@ -200,16 +201,24 @@ export class MenuButton extends Component {
     return this.#panel;
   }
 
-  /** Opens the menu and focuses its first enabled item. @returns {this} */
-  focusFirst() {
-    this.open();
+  /**
+   * Opens the menu and focuses its first enabled item.
+   * @param {MenuButtonOpenOptions} [options={}] Passed to `open()`.
+   * @returns {this}
+   */
+  focusFirst(options = {}) {
+    this.open(options);
     this.#roving.focusFirst();
     return this;
   }
 
-  /** Opens the menu and focuses its last enabled item. @returns {this} */
-  focusLast() {
-    this.open();
+  /**
+   * Opens the menu and focuses its last enabled item.
+   * @param {MenuButtonOpenOptions} [options={}] Passed to `open()`.
+   * @returns {this}
+   */
+  focusLast(options = {}) {
+    this.open(options);
     this.#roving.focusLast();
     return this;
   }
@@ -254,8 +263,9 @@ export class MenuButton extends Component {
   #onMenuKeydown(event) {
     if (event.key === 'Escape') {
       event.preventDefault();
+      const target = this.#returnTarget();
       this.close();
-      this.el.focus();
+      target?.focus();
       return;
     }
     if (event.key === 'Tab') {
@@ -265,20 +275,39 @@ export class MenuButton extends Component {
     if (event.key === 'Enter' || event.key === ' ') {
       const item = event.target.closest?.(MENU_ITEM_SELECTOR);
       if (!item || !this.#panel.contains(item)) return;
+      if (event.key === 'Enter' && item.tagName === 'A') return;
       event.preventDefault();
-      this.#selectElement(item);
+      /** @type {HTMLElement} */ (item).click();
       return;
     }
     this.#typeahead(event);
   }
 
-  /** @param {Element} element @returns {void} */
-  #selectElement(element) {
+  /** @param {Element} element @param {Event|null} [event=null] @returns {void} */
+  #selectElement(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;
+    }
+    /*
+     * Focus goes back first, as the APG pattern has it, and only if it is still the menu's to give:
+     * inside the panel, or already lost to the body. A dialog opened by a listener below then
+     * records the trigger as its opener rather than an item that is about to be hidden, and focus
+     * a listener moves on purpose is left where it was put.
+     */
+    const target = this.#returnTarget();
+    const active = document.activeElement;
+    const reclaim = Boolean(target) && (!active || active === document.body || this.#panel.contains(active));
+    if (reclaim) target?.focus();
     const selected = this.emit('select', { value: item.value, item });
-    if (selected.defaultPrevented) return;
+    if (selected.defaultPrevented) {
+      event?.preventDefault();
+      // The menu stays open, so focus returns to the item, unless a listener has moved it again.
+      if (reclaim && document.activeElement === target && element instanceof HTMLElement) element.focus();
+      return;
+    }
     try {
       item.onselect?.(item.value, item, this);
     } finally {
@@ -286,6 +315,17 @@ export class MenuButton extends Component {
     }
   }
 
+  /**
+   * The element focus returns to when the current opening ends, or null when it should stay put.
+   * @returns {HTMLElement|null}
+   */
+  #returnTarget() {
+    const target = this.#returnFocus;
+    if (target === false) return null;
+    if (target instanceof HTMLElement && target.isConnected) return target;
+    return /** @type {HTMLElement} */ (this.el);
+  }
+
   /** @returns {HTMLElement[]} */
   #menuItems() {
     return Array.from(this.#panel.querySelectorAll(MENU_ITEM_SELECTOR));

package/src/components/message/message.css

@@ -25,12 +25,30 @@
   align-content: start;
 }
 
+/* On a phone the toasts rise from the foot of the screen, full width, where they cover content
+   rather than the header's controls, and sit where a thumb can reach their action. */
+@media (max-width: 640px) {
+  .zx-message-region {
+    inset-block-start: auto;
+    inset-block-end: var(--zx-space-4);
+    inset-inline: var(--zx-space-4);
+    inline-size: auto;
+  }
+
+  .zx-message-region:popover-open {
+    align-content: end;
+  }
+}
+
 .zx-message__toast {
   --zx-message-kind: var(--zx-color-info);
   --zx-message-fallback-bg: var(--zx-color-info-bg);
   position: relative;
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
+  /* Icon and text, then whatever follows — the action, the close button — in columns of their own. */
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-auto-columns: auto;
+  grid-auto-flow: column;
   align-items: start;
   gap: var(--zx-space-3);
   border: 1px solid var(--zx-color-overlay-border);
@@ -64,8 +82,8 @@
     background-clip: padding-box;
     -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
     backdrop-filter: var(--zx-glass-filter-overlay);
-    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--zx-message-kind) 72%,
-      var(--zx-color-glass-highlight-strong)), var(--zx-glass-overlay-shadow);
+    /* No bar on the leading edge: the kind shows in the icon and the tinted border. */
+    box-shadow: var(--zx-glass-overlay-shadow);
   }
 }
 
@@ -90,10 +108,25 @@
   overflow-wrap: anywhere;
 }
 
+/* A leading visual — an avatar, say — keeps its own size, centred on the first line of text. */
+.zx-message__toast[data-leading] > .zx-message__icon {
+  margin-block: calc(-0.5 * var(--zx-space-1)) 0;
+}
+
+/* The action sits level with the close button: both are pulled up the same step so their centres
+   meet the first line of text rather than hanging below it. */
+.zx-message__action {
+  margin-block: calc(-1 * var(--zx-space-1)) 0;
+  white-space: nowrap;
+}
+
 /* Visual chrome comes from the shared .zx-icon-btn utility; only alignment is set here so
-   the close control sits flush with the top-right corner without stretching the toast. */
+   the close control sits flush with the trailing top corner without stretching the toast.
+   Trailing, not right: in an RTL document the close control belongs on the left, and a
+   four-value `margin` shorthand is the one place a logical property cannot be spelled. */
 .zx-message__close {
-  margin: calc(-1 * var(--zx-space-1)) calc(-1 * var(--zx-space-1)) 0 0;
+  margin-block: calc(-1 * var(--zx-space-1)) 0;
+  margin-inline: 0 calc(-1 * var(--zx-space-1));
 }
 
 .zx-message__progress {