@zeyos/zx 4.4.0 → 5.0.0

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

@@ -68,10 +68,11 @@
 }
 
 /*
- * WCAG 2.5.5 Target Size: 44 px, in both densities. Density tightens a layout; it does not make
- * a finger smaller, so this floor is deliberately not expressed through --zx-control-height
- * (32 px cozy, 28 px compact) the way the rest of the controls in this row are. The chrome is flat
- * until the tool is hovered, focused, or pressed, so a target this size does not read as a slab.
+ * WCAG 2.5.5 Target Size: 44 px, whatever the theme does to spacing. A tighter theme tightens a
+ * layout; it does not make a finger smaller, so this floor is deliberately not expressed through
+ * --zx-control-height (30 px by default) the way the rest of the controls in this row are. The
+ * chrome is flat until the tool is hovered, focused, or pressed, so a target this size does not
+ * read as a slab.
  */
 .zx-list-toolbar__tool {
   position: relative;
@@ -100,11 +101,12 @@
   box-shadow: var(--zx-focus-ring);
 }
 
-/* A pressed tool is marked three ways — the state in `aria-pressed`, a filled ground, and a
-   border where the other states have none — so it never rests on colour alone. */
+/* A pressed tool is marked three ways — the state in `aria-pressed`, the neutral current fill, and
+   a border where the other states have none — so it never rests on colour alone. A toggled filter
+   is a mode the list is in, not a pick, so the fill is neutral rather than the accent tint. */
 .zx-list-toolbar__tool[aria-pressed="true"] {
   border-color: var(--zx-color-border-strong);
-  background: var(--zx-color-bg-selected);
+  background: var(--zx-color-bg-current);
 }
 
 .zx-list-toolbar__tool:disabled {
@@ -150,9 +152,12 @@
   box-shadow: var(--zx-focus-ring);
 }
 
+/* The current view is where you are: the neutral current fill, the full text colour, a heavier
+   label. Hover stays a lighter step of the same fill. */
 .zx-list-toolbar__view[aria-pressed="true"] {
-  background: var(--zx-color-bg-selected);
+  background: var(--zx-color-bg-current);
   color: var(--zx-color-text);
+  font-weight: var(--zx-weight-semibold);
 }
 
 @media (prefers-reduced-motion: no-preference) {

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

@@ -88,7 +88,7 @@ const VIEW_PRESETS = Object.freeze({
  *   control, rather than found separately beside it.
  * - **The count line is a live region**, and `setCount(null)` clears it. The previous number
  *   describes the previous filters, and a stale count during a load is worse than none.
- * - **Tool buttons meet the 44 px target** in both densities. An icon button sized to its glyph is
+ * - **Tool buttons meet the 44 px target** at any spacing. An icon button sized to its glyph is
  *   the control people miss twice before hitting once.
  *
  * `bind()` is optional sugar; the toolbar is fully functional without it.

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

@@ -16,12 +16,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;
 }
@@ -112,8 +116,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-menu-button__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/menu-button/menu-button.js

@@ -1,5 +1,6 @@
 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 {
@@ -23,8 +24,19 @@ import { Dropdown } from '../dropdown/dropdown.js';
  * @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
@@ -54,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;
 
@@ -89,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);
 
@@ -100,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 {
@@ -143,9 +164,12 @@ export class MenuButton extends Component {
 
   /**
    * 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;
   }
@@ -177,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;
   }
@@ -231,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') {
@@ -258,9 +291,21 @@ export class MenuButton extends Component {
       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) {
       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 {
@@ -270,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,6 +108,18 @@
   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 trailing top corner without stretching the toast.
    Trailing, not right: in an RTL document the close control belongs on the left, and a