@zeyos/zx 5.0.0 → 5.2.0

package/src/components/filter-panel/filter-panel.js

@@ -74,6 +74,11 @@ const FLOAT_STEP = 0.01;
  *   applies every committed edit.
  * @property {FilterPanelSerialize} [serialize='seconds'] How a date leaves the component. A range's
  *   lower bound takes the start of its day and its upper bound the end, so a one-day range matches.
+ * @property {string|null} [timeZone=null] IANA zone the calendar days are counted in, such as the
+ *   ZeyOS instance's `Europe/Vienna`. A day serializes as the first (or last) instant of that day
+ *   in this zone, and an incoming instant shows as the day it falls on there — the same rule
+ *   `zeyosForm()` and `zeyosTable()` apply to date-only fields. Null uses the runtime's own zone.
+ *   An unknown zone throws a `RangeError`.
  * @property {string|null} [emptyText=null] Text shown when `fields` is empty; null resolves
  *   `filterPanel.empty`.
  * @property {Record<string, string>|Record<string, Record<string, string>>} [msg] Localized messages.
@@ -111,6 +116,7 @@ export class FilterPanel extends Component {
     value: {},
     mode: 'draft',
     serialize: 'seconds',
+    timeZone: null,
     emptyText: null
   };
 
@@ -130,9 +136,10 @@ export class FilterPanel extends Component {
     const root = /** @type {HTMLElement} */ (this.el ?? h('div'));
     this.el = root;
 
+    this._timeZone = normalizePanelTimeZone(this.options.timeZone);
     this._fields = orderFields(this.options.fields, this.options.order);
-    this._draft = toDraft(this.options.value, this.options.fields);
-    this._applied = serializeFilterValue(this._draft, this.options.fields, this.options.serialize);
+    this._draft = toDraft(this.options.value, this.options.fields, this._timeZone);
+    this._applied = serializeFilterValue(this._draft, this.options.fields, this.options.serialize, this._timeZone);
     this._appliedDraft = draftKey(this._draft);
 
     const children = [];
@@ -187,7 +194,7 @@ export class FilterPanel extends Component {
    * @fires FilterPanel#change
    */
   setValue(value) {
-    this._draft = toDraft(value, this.options.fields);
+    this._draft = toDraft(value, this.options.fields, this._timeZone);
     this._commit(this._draftValue());
     this._writeControls();
     this._syncActions();
@@ -219,7 +226,7 @@ export class FilterPanel extends Component {
    * @fires FilterPanel#apply
    */
   reset() {
-    return this._replaceDraft(toDraft(this.options.value, this.options.fields));
+    return this._replaceDraft(toDraft(this.options.value, this.options.fields, this._timeZone));
   }
 
   /**
@@ -233,7 +240,7 @@ export class FilterPanel extends Component {
    * @fires FilterPanel#apply
    */
   clear() {
-    return this._replaceDraft(toDraft({}, this.options.fields), { commit: true });
+    return this._replaceDraft(toDraft({}, this.options.fields, this._timeZone), { commit: true });
   }
 
   /** Destroys the composed controls and puts an enhanced target back as found. @returns {void} */
@@ -584,7 +591,7 @@ export class FilterPanel extends Component {
 
   /** @returns {Record<string, unknown>} The draft, serialized and pruned. */
   _draftValue() {
-    return serializeFilterValue(this._draft, this.options.fields, this.options.serialize);
+    return serializeFilterValue(this._draft, this.options.fields, this.options.serialize, this._timeZone);
   }
 
   /** Pushes the draft back into the controls without re-entering the edit path. @returns {void} */
@@ -703,42 +710,48 @@ export function pruneValue(value) {
 
 /**
  * Converts anything a calendar day can arrive as — a `YYYY-MM-DD` string, an ISO timestamp, a
- * `Date`, Unix seconds or milliseconds — into the local calendar day a native date input holds.
+ * `Date`, Unix seconds or milliseconds — into the calendar day a native date input holds.
  * Numbers below 1e11 are read as seconds, which is the boundary between the two epochs in use.
+ * An instant — Unix seconds or milliseconds, an ISO timestamp — names the day it falls on in
+ * `timeZone`. A `Date` is read as a picked day and keeps its local calendar day, matching
+ * `calendarDayToUnixSeconds()` in the ZeyOS binding.
  * @param {unknown} value Candidate day.
+ * @param {string|null} [timeZone=null] IANA zone instants are read in; null for the runtime's own.
  * @returns {string} `YYYY-MM-DD`, or an empty string when there is no day in it.
  */
-export function toDateInput(value) {
+export function toDateInput(value, timeZone = null) {
   if (value === null || value === undefined || value === '') return '';
-  if (value instanceof Date) return Number.isNaN(value.getTime()) ? '' : localDay(value);
+  // A Date is a picked day — what Datebox and DatePicker hold — so its local day counts, as in
+  // `calendarDayToUnixSeconds()`; numbers and timestamps are instants, read in the zone.
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? '' : zoneDay(value.getTime(), null);
   if (typeof value === 'number') {
     if (!Number.isFinite(value)) return '';
-    return localDay(new Date(Math.abs(value) < SECONDS_CUTOFF ? value * 1000 : value));
+    return zoneDay(Math.abs(value) < SECONDS_CUTOFF ? value * 1000 : value, timeZone);
   }
   const text = String(value).trim();
   if (/^\d{4}-\d{2}-\d{2}$/.test(text)) return text;
-  if (/^-?\d+(\.\d+)?$/.test(text)) return toDateInput(Number(text));
+  if (/^-?\d+(\.\d+)?$/.test(text)) return toDateInput(Number(text), timeZone);
   const parsed = new Date(text);
-  return Number.isNaN(parsed.getTime()) ? '' : localDay(parsed);
+  return Number.isNaN(parsed.getTime()) ? '' : zoneDay(parsed.getTime(), timeZone);
 }
 
 /**
  * Serializes one calendar day at one edge of a range. The `from` edge takes the first instant of
- * its local day and the `to` edge the last, so a range whose ends name the same day still matches
- * everything recorded on it.
+ * its day and the `to` edge the last, so a range whose ends name the same day still matches
+ * everything recorded on it. The day is counted in `timeZone`: with `Europe/Vienna`, 2026-03-10
+ * starts at 23:00 UTC on the 9th whatever zone the browser is in.
  * @param {unknown} day Calendar day in any form `toDateInput()` accepts.
  * @param {FilterPanelEdge} edge Which end of the range the day is.
  * @param {FilterPanelSerialize} [serialize='seconds'] Output format, or a function receiving the
  *   edge instant as a `Date`.
+ * @param {string|null} [timeZone=null] IANA zone the day is counted in; null for the runtime's own.
  * @returns {unknown} The serialized day, or null when there is no day.
  */
-export function serializeDate(day, edge, serialize = 'seconds') {
-  const text = toDateInput(day);
+export function serializeDate(day, edge, serialize = 'seconds', timeZone = null) {
+  const text = toDateInput(day, timeZone);
   if (!text) return null;
   const [year, month, date] = text.split('-').map(Number);
-  const instant = edge === 'to'
-    ? new Date(year, month - 1, date, 23, 59, 59, 999)
-    : new Date(year, month - 1, date, 0, 0, 0, 0);
+  const instant = new Date(dayEdge(year, month - 1, date, edge, timeZone));
   if (typeof serialize === 'function') return serialize(instant, edge);
   if (serialize === 'ms') return instant.getTime();
   if (serialize === 'iso') return instant.toISOString();
@@ -775,9 +788,10 @@ export function normalizeOptions(options) {
  * Running it on a draft returns the same draft, so it is safe on either shape.
  * @param {Record<string, unknown>|null|undefined} value Incoming values keyed by field.
  * @param {Record<string, FilterPanelField>} fields Field metadata.
+ * @param {string|null} [timeZone=null] IANA zone incoming instants are read in.
  * @returns {Record<string, unknown>}
  */
-export function toDraft(value, fields) {
+export function toDraft(value, fields, timeZone = null) {
   const source = isPlainObject(value) ? value : {};
   /** @type {Record<string, unknown>} */
   const draft = {};
@@ -792,8 +806,8 @@ export function toDraft(value, fields) {
       draft[key] = selectionOf(raw, normalizeOptions(field.options));
     } else if (spec.kind === 'date') {
       draft[key] = spec.range
-        ? { from: toDateInput(readEdge(raw, 'from')), to: toDateInput(readEdge(raw, 'to')) }
-        : toDateInput(raw);
+        ? { from: toDateInput(readEdge(raw, 'from'), timeZone), to: toDateInput(readEdge(raw, 'to'), timeZone) }
+        : toDateInput(raw, timeZone);
     } else {
       draft[key] = spec.range
         ? { from: toNumberValue(readEdge(raw, 'from'), spec), to: toNumberValue(readEdge(raw, 'to'), spec) }
@@ -809,10 +823,11 @@ export function toDraft(value, fields) {
  * @param {Record<string, unknown>|null|undefined} value Values keyed by field, raw or drafted.
  * @param {Record<string, FilterPanelField>} fields Field metadata.
  * @param {FilterPanelSerialize} [serialize='seconds'] Date output format.
+ * @param {string|null} [timeZone=null] IANA zone calendar days are counted in.
  * @returns {Record<string, unknown>}
  */
-export function serializeFilterValue(value, fields, serialize = 'seconds') {
-  const draft = toDraft(value, fields);
+export function serializeFilterValue(value, fields, serialize = 'seconds', timeZone = null) {
+  const draft = toDraft(value, fields, timeZone);
   /** @type {Record<string, unknown>} */
   const result = {};
   for (const [key, declared] of Object.entries(fields ?? {})) {
@@ -832,14 +847,14 @@ export function serializeFilterValue(value, fields, serialize = 'seconds') {
     if (spec.kind === 'date') {
       if (!spec.range) {
         // A single date names a day, so it serializes as that day's first instant.
-        if (raw) result[key] = serializeDate(raw, 'from', serialize);
+        if (raw) result[key] = serializeDate(raw, 'from', serialize, timeZone);
         continue;
       }
       const days = /** @type {{from: string, to: string}} */ (raw);
       /** @type {Record<string, unknown>} */
       const range = {};
-      if (days.from) range.from = serializeDate(days.from, 'from', serialize);
-      if (days.to) range.to = serializeDate(days.to, 'to', serialize);
+      if (days.from) range.from = serializeDate(days.from, 'from', serialize, timeZone);
+      if (days.to) range.to = serializeDate(days.to, 'to', serialize, timeZone);
       if (Object.keys(range).length > 0) result[key] = range;
       continue;
     }
@@ -917,11 +932,113 @@ function toNumberValue(raw, spec) {
   return spec.integer ? Math.trunc(parsed) : parsed;
 }
 
-/** @param {Date} date Instant. @returns {string} Local `YYYY-MM-DD`. */
-function localDay(date) {
-  const month = String(date.getMonth() + 1).padStart(2, '0');
-  const day = String(date.getDate()).padStart(2, '0');
-  return `${date.getFullYear()}-${month}-${day}`;
+/**
+ * Validates the `timeZone` option.
+ * @param {unknown} timeZone IANA zone name; nullish or empty means the runtime's own zone.
+ * @returns {string|null} Canonical zone name, or null for the runtime's own zone.
+ * @throws {RangeError} When the runtime does not know the zone.
+ */
+export function normalizePanelTimeZone(timeZone) {
+  if (timeZone === null || timeZone === undefined || timeZone === '') return null;
+  try {
+    return new Intl.DateTimeFormat('en-US', { timeZone: String(timeZone) }).resolvedOptions().timeZone;
+  } catch {
+    throw new RangeError(`Unknown time zone "${String(timeZone)}"`);
+  }
+}
+
+/**
+ * The calendar day an instant falls on, as `YYYY-MM-DD`, in a zone or the runtime's own.
+ * @param {number} milliseconds Epoch milliseconds.
+ * @param {string|null} timeZone IANA zone, or null.
+ * @returns {string}
+ */
+function zoneDay(milliseconds, timeZone) {
+  if (!timeZone) {
+    const date = new Date(milliseconds);
+    return isoDay(date.getFullYear(), date.getMonth(), date.getDate());
+  }
+  const wall = wallClock(milliseconds, timeZone);
+  return isoDay(wall.year, wall.month, wall.day);
+}
+
+/**
+ * Epoch milliseconds of the first (`from`) or last (`to`) instant of a calendar day in a zone.
+ * The last instant is one millisecond before the next day starts, which keeps a day that a
+ * daylight-saving change shortens or lengthens whole.
+ * @param {number} year Full year.
+ * @param {number} month Zero-based month.
+ * @param {number} day Day of the month.
+ * @param {FilterPanelEdge} edge Edge of the day.
+ * @param {string|null} timeZone IANA zone, or null for the runtime's own.
+ * @returns {number}
+ */
+function dayEdge(year, month, day, edge, timeZone) {
+  if (!timeZone) {
+    return (edge === 'to'
+      ? new Date(year, month, day, 23, 59, 59, 999)
+      : new Date(year, month, day, 0, 0, 0, 0)).getTime();
+  }
+  if (edge !== 'to') return zoneMidnight(year, month, day, timeZone);
+  const next = new Date(Date.UTC(year, month, day + 1));
+  return zoneMidnight(next.getUTCFullYear(), next.getUTCMonth(), next.getUTCDate(), timeZone) - 1;
+}
+
+/**
+ * The first instant of a calendar day in a zone: its midnight, or the first minute after a
+ * daylight-saving gap that swallows midnight. Two offset corrections settle it on either side of
+ * a change. This is the rule `zeyos/query.js` `calendarZone().midnightOf()` follows, so a day the
+ * panel serializes is the day a ZeyOS form stores.
+ * @param {number} year Full year.
+ * @param {number} month Zero-based month.
+ * @param {number} day Day of the month.
+ * @param {string} timeZone IANA zone.
+ * @returns {number} Epoch milliseconds.
+ */
+function zoneMidnight(year, month, day, timeZone) {
+  const target = Date.UTC(year, month, day);
+  const offsetAt = (milliseconds) => {
+    const wall = wallClock(milliseconds, timeZone);
+    return Date.UTC(wall.year, wall.month, wall.day) + wall.seconds * 1000
+      - Math.floor(milliseconds / 1000) * 1000;
+  };
+  const first = target - offsetAt(target);
+  const second = target - offsetAt(first);
+  let best = null;
+  for (const candidate of [second, first]) {
+    const wall = wallClock(candidate, timeZone);
+    if (wall.year !== year || wall.month !== month || wall.day !== day) continue;
+    if (!best || wall.seconds < best.seconds) best = { candidate, seconds: wall.seconds };
+  }
+  return best ? best.candidate : second;
+}
+
+/**
+ * The wall clock of an instant in a zone.
+ * @param {number} milliseconds Epoch milliseconds.
+ * @param {string} timeZone IANA zone.
+ * @returns {{year: number, month: number, day: number, seconds: number}} Zero-based month and
+ *   seconds since the zone's midnight.
+ */
+function wallClock(milliseconds, timeZone) {
+  const formatter = new Intl.DateTimeFormat('en-US', {
+    timeZone, hourCycle: 'h23', year: 'numeric', month: 'numeric', day: 'numeric',
+    hour: 'numeric', minute: 'numeric', second: 'numeric'
+  });
+  /** @type {Record<string, number>} */
+  const parts = {};
+  for (const part of formatter.formatToParts(new Date(milliseconds))) parts[part.type] = Number(part.value);
+  return {
+    year: parts.year,
+    month: parts.month - 1,
+    day: parts.day,
+    seconds: (parts.hour % 24) * 3600 + parts.minute * 60 + parts.second
+  };
+}
+
+/** @param {number} year @param {number} month Zero-based. @param {number} day @returns {string} `YYYY-MM-DD`. */
+function isoDay(year, month, day) {
+  return `${String(year).padStart(4, '0')}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
 }
 
 /**

package/src/components/finder/finder.css

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

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

@@ -134,7 +134,7 @@
 .zx-kanban-view__collapse:focus-visible,
 .zx-kanban-view__move-handle:focus-visible,
 .zx-kanban-view .zx-record-card:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 
@@ -188,7 +188,7 @@
 }
 
 .zx-kanban-view :where(.zx-record-card[data-variant="outlined"]) {
-  box-shadow: var(--zx-shadow-1);
+  box-shadow: var(--zx-surface-shadow);
 }
 
 /* The shared card anatomy stays intact; Kanban constrains media to a compact thumbnail. */
@@ -563,7 +563,7 @@
 }
 
 .zx-kanban-view__add:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 

package/src/components/kanban-view/kanban-view.js

@@ -434,10 +434,11 @@ export class KanbanView extends RecordView {
 
       this._toolbar = h('div', { class: 'zx-record-view__toolbar zx-kanban-view__toolbar' });
       // A label the host passed in the object form wins; otherwise Kanban's own
-      // message bag supplies it, which is where this label has always come from.
+      // message bag supplies it, which is where this label has always come from. Mounted through
+      // the shared path so `fieldControls.target` places it in a host element, as in every view.
       if (options.fieldControls) {
         const configured = normalizeViewFieldControls(options.fieldControls).label;
-        this._toolbar.append(this._createViewFieldControls(configured ?? this._text('fields')));
+        this._mountViewFieldControls(this._toolbar, configured ?? this._text('fields'));
       }
       if (options.searchControl) this._toolbar.append(this._createSearchControl());
       if (options.historyControls) this._toolbar.append(this._createHistoryControls());
@@ -468,6 +469,8 @@ export class KanbanView extends RecordView {
       if (options.contextMenu) this._createContextMenu();
       return root;
     } catch (error) {
+      // An external `fieldControls.target` must not keep a chooser whose view never came to be.
+      this._removeViewFieldControls();
       if (this._kanbanSnapshot) restoreTarget(root, this._kanbanSnapshot);
       throw error;
     }

package/src/components/launcher/launcher.css

@@ -85,7 +85,7 @@
   flex: 1 1 0;
   min-inline-size: 0;
   border: 0;
-  outline: 0;
+  outline-color: transparent;
   background: transparent;
   color: inherit;
   font-size: var(--zx-text-lg);

package/src/components/launcher/launcher.js

@@ -2,7 +2,8 @@ import { Component } from '../../core/component.js';
 import { h, safeHref } from '../../core/dom.js';
 import { icon } from '../../core/icons.js';
 import { printf } from '../../core/i18n.js';
-import { connectedOverlayHost, overlayHost } from '../../core/overlay-host.js';
+import { connectedOverlayHost, overlayScope } from '../../core/overlay-host.js';
+import { pushOverlay } from '../../core/overlay-stack.js';
 import { uid } from '../../core/util.js';
 
 /**
@@ -158,6 +159,8 @@ export class Launcher extends Component {
       throw new TypeError('Launcher target must be a <dialog> element');
     }
     this._createdRoot = this.el === null;
+    /** @type {import('../../core/overlay-stack.js').OverlayHandle|null} Entry on the overlay stack while open. */
+    this._overlay = null;
     const dialog = /** @type {HTMLDialogElement} */ (this.el ?? h('dialog'));
     this.el = dialog;
     this._original = this._createdRoot ? null : {
@@ -266,7 +269,9 @@ export class Launcher extends Component {
     dialog.dataset.state = 'closed';
     // A scope that is not in the document yet cannot say which themed region owns the dialog; it
     // stays detached until open() hosts it.
-    if (this._createdRoot) connectedOverlayHost(this.options.scope)?.append(dialog);
+    // The theme scope, never an open dialog: a modal opened from inside another stacks above it in
+    // the top layer wherever it lives, and nested it would vanish if the outer one closed first.
+    if (this._createdRoot) connectedOverlayHost(this.options.scope, { dialog: false })?.append(dialog);
 
     this.listen(input, 'input', () => {
       this._query = /** @type {HTMLInputElement} */ (input).value;
@@ -299,6 +304,7 @@ export class Launcher extends Component {
       this.close();
     });
     this.listen(dialog, 'close', () => {
+      if (!dialog.open) this._releaseOverlay();
       dialog.dataset.state = 'closed';
       input.setAttribute('aria-expanded', 'false');
       this._abortRequest();
@@ -336,11 +342,18 @@ export class Launcher extends Component {
       return this;
     }
     if (this._createdRoot) {
-      const host = overlayHost(this.options.scope);
+      const host = overlayScope(this.options.scope);
       if (this.el.parentElement !== host) host.append(this.el);
     }
     const before = this._pages.map((entry) => entry.page);
+    const opener = document.activeElement;
     this.el.showModal();
+    /*
+     * A modal on the overlay stack, like every Modal: Escape and presses inside it then reach no
+     * popup left open behind it, and toast regions move into it while it is open.
+     */
+    this._releaseOverlay();
+    this._overlay = pushOverlay({ kind: 'modal', root: this.el, owner: this, anchor: opener });
     this.el.dataset.state = 'open';
     this.refs.input.setAttribute('aria-expanded', 'true');
     this._goTo(target == null ? [] : this._pagePath(target), { emit: false });
@@ -443,6 +456,17 @@ export class Launcher extends Component {
     return this;
   }
 
+  /**
+   * Takes the launcher off the overlay stack. Safe to call repeatedly.
+   * @returns {void}
+   * @private
+   */
+  _releaseOverlay() {
+    const overlay = this._overlay;
+    this._overlay = null;
+    overlay?.release();
+  }
+
   /** Aborts sources and removes the owned dialog. @returns {void} */
   destroy() {
     if (this._destroyed) return;
@@ -450,6 +474,8 @@ export class Launcher extends Component {
     const original = this._original;
     this._abortRequest();
     if (this.isOpen()) this.el.close();
+    // The queued close that would release it never arrives once listeners are aborted.
+    this._releaseOverlay();
     super.destroy();
     if (!this._createdRoot && original) {
       for (const attribute of Array.from(this.el.attributes)) this.el.removeAttribute(attribute.name);

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' }
 });
 
 /**
@@ -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.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

@@ -129,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;
+  }
+}