@zeyos/zx 4.4.0 → 5.2.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

@@ -7,8 +7,10 @@ import { badge } from '../badge/badge.js';
 import { Search } from '../search/search.js';
 
 /**
- * Built-in view shapes, so `views: ['auto', 'cards', 'table']` needs no labels of its own. A host
- * that wants other words hands descriptors instead.
+ * Built-in view shapes, so `views: ['table', 'list', 'cards', 'gallery', 'board']` needs no labels
+ * of its own. A host that wants other words hands descriptors instead. Each shape has the glyph
+ * the overview tools people already use give it: a ruled grid for the table, lines for the list,
+ * tiles for cards, a picture for the gallery, and columns for the board.
  *
  * `auto` deliberately carries no icon: no glyph in the set says "whatever fits", and an icon that
  * has to be explained is worse than the word.
@@ -16,9 +18,11 @@ import { Search } from '../search/search.js';
  */
 const VIEW_PRESETS = Object.freeze({
   auto: { icon: null, key: 'listToolbar.viewAuto', fallback: 'Auto' },
-  cards: { icon: 'copy', key: 'listToolbar.viewCards', fallback: 'Cards' },
-  table: { icon: 'list', key: 'listToolbar.viewTable', fallback: 'Table' },
-  list: { icon: 'list', key: 'listToolbar.viewList', fallback: 'List' }
+  table: { icon: 'table', key: 'listToolbar.viewTable', fallback: 'Table' },
+  list: { icon: 'list', key: 'listToolbar.viewList', fallback: 'List' },
+  cards: { icon: 'grid', key: 'listToolbar.viewCards', fallback: 'Cards' },
+  gallery: { icon: 'image', key: 'listToolbar.viewGallery', fallback: 'Gallery' },
+  board: { icon: 'columns', key: 'listToolbar.viewBoard', fallback: 'Board' }
 });
 
 /**
@@ -88,7 +92,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.
@@ -378,8 +382,10 @@ export class ListToolbar extends Component {
   }
 
   /**
-   * Optional sugar for a `TableView` or `CardView`: it wires the shape switch to the view and
-   * mounts the view's field chooser into this bar.
+   * Optional sugar for a `TableView`, `CardView`, or `KanbanView`: it wires the shape switch to
+   * the view and mounts the view's field chooser into this bar — through the view's public
+   * `mountFieldControls()` when it has one, which every `RecordView` does. A `TableView` with the
+   * default `fieldControls: true` contributes its Table's column chooser.
    *
    * Nothing is imported and nothing is required — every capability is feature-detected, so a view
    * that offers none of them still works and still gets `viewchange`, and the host swaps the view
@@ -409,10 +415,19 @@ export class ListToolbar extends Component {
    * @returns {this}
    */
   unbind() {
+    const bound = this._bound;
     this._bound = null;
     if (this._chooser) {
-      restorePosition(this._chooser, this.el);
+      const chooser = this._chooser;
       this._chooser = null;
+      const view = bound?.view;
+      // The view put it here and knows where it came from; hand it back only while it is still
+      // ours, since a destroyed view has already taken it away.
+      if (chooser.viaView && view && typeof view.mountFieldControls === 'function') {
+        if (this.el.contains(chooser.element)) view.mountFieldControls(null);
+      } else {
+        restorePosition(chooser, this.el);
+      }
     }
     return this;
   }
@@ -597,21 +612,28 @@ export class ListToolbar extends Component {
     if (view.options?.fieldControls === false) return;
     const element = this._findFieldControls(view);
     if (!element || this.el.contains(element)) return;
+    if (typeof view.mountFieldControls === 'function') {
+      const mounted = view.mountFieldControls(this.refs.tools);
+      if (isElement(mounted) && this.el.contains(mounted)) {
+        this._chooser = { element: mounted, parent: null, next: null, viaView: true };
+      }
+      return;
+    }
     this._chooser = capturePosition(element);
     this.refs.tools.append(element);
   }
 
   /**
-   * Finds a view's field chooser without importing the view, newest accessor first.
+   * Finds a view's field chooser without importing the view: its public `getFieldControls()`,
+   * else — for an object that only looks like a record view — the shared chooser's class.
    * @param {Record<string, any>} view Bound view.
    * @returns {Element|null}
    */
   _findFieldControls(view) {
     if (typeof view.getFieldControls === 'function') {
       const element = view.getFieldControls();
-      if (isElement(element)) return element;
+      return isElement(element) ? element : null;
     }
-    if (isElement(view._viewFieldControls)) return view._viewFieldControls;
     const root = typeof view.toElement === 'function' ? view.toElement() : null;
     return isElement(root) ? root.querySelector('.zx-record-view__field-controls') : null;
   }
@@ -661,7 +683,10 @@ export class ListToolbar extends Component {
  * @property {((event: MouseEvent) => void)|null} onclick Descriptor callback.
  */
 
-/** @typedef {{element: Element, parent: Node|null, next: Node|null}} AdoptedElement */
+/**
+ * @typedef {{element: Element, parent: Node|null, next: Node|null, viaView?: boolean}} AdoptedElement
+ * `viaView` marks a field chooser the bound view moved here itself and takes back on `unbind()`.
+ */
 
 /**
  * @typedef {Object} RecordViewCapabilities
@@ -669,7 +694,8 @@ export class ListToolbar extends Component {
  * @property {string|null} setShape Method that changes the view shape, if any.
  * @property {string|null} getShape Method that reads the view shape, if any.
  * @property {boolean} events Whether the object emits component events.
- * @property {boolean} fieldControls Whether the object offers its field chooser through a method.
+ * @property {boolean} fieldControls Whether the object offers its field chooser through a method
+ *   (`getFieldControls()`, which every `RecordView` has).
  */
 
 /**

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/master-panel/master-panel.js

@@ -89,7 +89,6 @@ export class MasterPanel extends Component {
 
     const moduleName = normalizeModule(this.options.module);
     root.dataset.module = moduleName;
-    root.style.setProperty('--zx-master-panel-accent', `var(--zx-module-${moduleName})`);
     this.setTitle(this.options.title);
     if (this.options.content !== null) this.setContent(this.options.content);
     else content.append(...originalContent);

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;
@@ -124,3 +129,66 @@
   margin: var(--zx-space-1) var(--zx-space-2);
   background: var(--zx-color-overlay-divider);
 }
+
+/*
+ * A choice: a setting chosen in place — its label, then a small segmented control of options, the
+ * checked one lifted out of the track. Neutral, not the accent: it is a state, not an action.
+ */
+.zx-menu-button__choice {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--zx-space-3);
+  min-block-size: var(--zx-control-height);
+  padding: var(--zx-space-1) var(--zx-space-2);
+}
+
+.zx-menu-button__choice-label {
+  color: var(--zx-color-text);
+  font-size: var(--zx-text-md);
+}
+
+.zx-menu-button__choice-options {
+  display: inline-flex;
+  flex: none;
+  gap: 2px;
+  border-radius: var(--zx-radius-md);
+  background: var(--zx-color-bg-hover);
+  padding: 2px;
+}
+
+.zx-menu-button__choice-option {
+  display: grid;
+  place-items: center;
+  inline-size: var(--zx-space-6);
+  block-size: var(--zx-space-6);
+  border: 0;
+  border-radius: var(--zx-radius-sm);
+  background: transparent;
+  padding: 0;
+  color: var(--zx-color-text-muted);
+  cursor: pointer;
+}
+
+.zx-menu-button__choice-option:hover { color: var(--zx-color-text); }
+
+.zx-menu-button__choice-option[aria-checked="true"] {
+  background: var(--zx-color-bg-surface);
+  box-shadow: 0 0 0 1px var(--zx-color-border-subtle);
+  color: var(--zx-color-text);
+}
+
+.zx-menu-button__choice-option[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
+
+.zx-menu-button__choice-option:focus-visible {
+  outline-color: transparent;
+  box-shadow: var(--zx-focus-ring);
+}
+
+@media (forced-colors: active) {
+  .zx-menu-button__choice-option[aria-checked="true"] {
+    background: Highlight;
+    color: HighlightText;
+    forced-color-adjust: none;
+  }
+}

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;
 
@@ -87,8 +101,15 @@ export class MenuButton extends Component {
       content: null
     });
     this.#panel = this.#dropdown.getPanel();
+    // Escape reaches the menu through the overlay stack, which offers it only to the topmost layer;
+    // the menu decides where focus goes. Items are reached with the arrow keys, not Tab.
+    this.#dropdown._configure({ onEscape: () => this.#dismiss(), tabReach: false });
     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,12 +121,15 @@ 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 {
         this.open();
-        this.#roving.focusFirst();
+        this.#focusFirstItem();
       }
     });
     this.listen(this.el, 'keydown', (event) => this.#onTriggerKeydown(event));
@@ -114,6 +138,9 @@ export class MenuButton extends Component {
       if (item && this.#panel.contains(item)) this.#selectElement(item, event);
     });
     this.listen(this.#panel, 'keydown', (event) => this.#onMenuKeydown(event));
+    // A choice row runs across, not down: Left and Right move within it, Up and Down leave it.
+    // Capture, so the menu's own roving focus never sees the keys this takes.
+    this.listen(this.#panel, 'keydown', (event) => this.#onChoiceKeydown(event), { capture: true });
   }
 
   /**
@@ -137,15 +164,18 @@ export class MenuButton extends Component {
    */
   setItems(items) {
     this.#items = Array.isArray(items) ? items.slice() : [];
-    this.#panel.replaceChildren(...renderMenuEntries(this.#items, 'menu-button'));
+    this.#panel.replaceChildren(...renderMenuEntries(this.#items, 'menu-button', { choices: true }));
     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;
   }
@@ -159,6 +189,15 @@ export class MenuButton extends Component {
     return this;
   }
 
+  /**
+   * Opens the menu when it is closed, and closes it when it is open. Opening this way moves no
+   * focus; `focusFirst()` opens with focus on the first item.
+   * @returns {this}
+   */
+  toggle() {
+    return this.isOpen() ? this.close() : this.open();
+  }
+
   /**
    * Reports whether the menu is open.
    * @returns {boolean}
@@ -177,16 +216,24 @@ export class MenuButton extends Component {
     return this.#panel;
   }
 
-  /** Opens the menu and focuses its first enabled item. @returns {this} */
-  focusFirst() {
-    this.open();
-    this.#roving.focusFirst();
+  /**
+   * Opens the menu and focuses its first enabled item.
+   * @param {MenuButtonOpenOptions} [options={}] Passed to `open()`.
+   * @returns {this}
+   */
+  focusFirst(options = {}) {
+    this.open(options);
+    this.#focusFirstItem();
     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;
   }
@@ -224,17 +271,11 @@ export class MenuButton extends Component {
     event.preventDefault();
     this.open();
     if (event.key === 'ArrowUp') this.#roving.focusLast();
-    else this.#roving.focusFirst();
+    else this.#focusFirstItem();
   }
 
   /** @param {KeyboardEvent} event @returns {void} */
   #onMenuKeydown(event) {
-    if (event.key === 'Escape') {
-      event.preventDefault();
-      this.close();
-      this.el.focus();
-      return;
-    }
     if (event.key === 'Tab') {
       this.close();
       return;
@@ -250,17 +291,107 @@ export class MenuButton extends Component {
     this.#typeahead(event);
   }
 
+  /**
+   * Escape, as the overlay stack routes it here: closes the menu, and returns focus when the menu
+   * held it (or it had already fallen to the body).
+   * @returns {void}
+   */
+  #dismiss() {
+    const active = document.activeElement;
+    const reclaim = !active || active === document.body || this.#panel.contains(active);
+    const target = this.#returnTarget();
+    this.close();
+    if (reclaim) target?.focus();
+  }
+
+  /** Focuses the first item, or, when that is a choice row, its checked option. @returns {void} */
+  #focusFirstItem() {
+    this.#roving.focusFirst();
+    const first = this.#menuItems()[0];
+    const checked = first?.hasAttribute('data-menu-option')
+      ? first.parentElement?.querySelector('[aria-checked="true"]') : null;
+    if (checked instanceof HTMLElement) checked.focus();
+  }
+
+  /** @param {KeyboardEvent} event @returns {void} */
+  #onChoiceKeydown(event) {
+    const option = /** @type {Element|null} */ (event.target)?.closest?.('[data-menu-option]');
+    if (!(option instanceof HTMLElement) || !this.#panel.contains(option)) {
+      // Arriving at a choice row from another item lands on its checked option, not its nearest.
+      if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+      const items = this.#menuItems();
+      const index = items.indexOf(/** @type {HTMLElement} */ (event.target));
+      if (index < 0) return;
+      const next = items[(index + (event.key === 'ArrowDown' ? 1 : -1) + items.length) % items.length];
+      const row = next?.hasAttribute('data-menu-option') ? next.parentElement : null;
+      if (!row) return;
+      event.preventDefault();
+      event.stopPropagation();
+      /** @type {HTMLElement} */ (row.querySelector('[aria-checked="true"]') ?? next).focus();
+      return;
+    }
+    const row = /** @type {HTMLElement[]} */ ([...(option.parentElement?.children ?? [])]);
+    const items = this.#menuItems();
+    let target = null;
+    if (event.key === 'ArrowLeft') target = row[(row.indexOf(option) - 1 + row.length) % row.length];
+    else if (event.key === 'ArrowRight') target = row[(row.indexOf(option) + 1) % row.length];
+    else if (event.key === 'ArrowDown') target = items[(items.indexOf(row.at(-1)) + 1) % items.length];
+    else if (event.key === 'ArrowUp') target = items[(items.indexOf(row[0]) - 1 + items.length) % items.length];
+    else return;
+    event.preventDefault();
+    event.stopPropagation();
+    // Into another choice row, focus lands on its checked option.
+    const checked = target?.closest('[role="group"]')?.querySelector('[data-menu-option][aria-checked="true"]');
+    const next = event.key === 'ArrowDown' || event.key === 'ArrowUp' ? /** @type {HTMLElement} */ (checked ?? target) : target;
+    next?.focus();
+  }
+
+  /** @param {HTMLElement} element @param {Record<string, any>} entry @param {Event|null} event @returns {void} */
+  #selectChoice(element, entry, event) {
+    const option = entry.options?.[Number(element.getAttribute('data-menu-option'))];
+    if (!option || option.disabled) {
+      event?.preventDefault();
+      return;
+    }
+    // A setting changes in place and the menu stays open, so its effect shows.
+    for (const sibling of element.parentElement?.children ?? []) {
+      sibling.setAttribute('aria-checked', String(sibling === element));
+    }
+    element.focus();
+    entry.onselect?.(option.value, entry, this);
+    // A handler that closed the menu leaves focus on a hidden option: it goes where a close sends it.
+    if (!this.isOpen() && (element.contains(document.activeElement) || document.activeElement === document.body)) {
+      this.#returnTarget()?.focus();
+    }
+  }
+
   /** @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 && typeof item === 'object' && item.type === 'choice') {
+      this.#selectChoice(/** @type {HTMLElement} */ (element), item, event);
+      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) {
       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 +401,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