@zeyos/zx 4.3.4 → 5.0.0

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

@@ -6,13 +6,19 @@
   min-inline-size: 0;
 }
 
-.zx-table-view[data-loading="true"] .zx-table__column-controls {
+.zx-table-view__toolbar {
+  min-inline-size: 0;
+}
+
+.zx-table-view[data-loading="true"] .zx-table__column-controls,
+.zx-table-view[data-loading="true"] .zx-record-view__field-controls {
   pointer-events: none;
   opacity: .62;
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .zx-table-view .zx-table__column-controls {
+  .zx-table-view .zx-table__column-controls,
+  .zx-table-view .zx-record-view__field-controls {
     transition: opacity var(--zx-dur-fast) var(--zx-ease);
   }
 }

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

@@ -1,7 +1,7 @@
 // @ts-check
 import { h, restoreTarget, snapshotTarget } from '../../core/dom.js';
 import { formatTableCell, Table } from '../table/table.js';
-import { RecordView, readViewField } from '../view/record-view.js';
+import { normalizeViewFieldControls, RecordView, readViewField } from '../view/record-view.js';
 
 /** @typedef {Record<string, any>} TableViewRecord */
 /** @typedef {import('../view/record-view.js').ViewField} ViewField */
@@ -20,7 +20,10 @@ import { RecordView, readViewField } from '../view/record-view.js';
  * @property {unknown[]} [selection=[]] Initially selected record ids.
  * @property {string[]} [fieldOrder=[]] Preferred stable field order.
  * @property {string[]} [hiddenFields=[]] Initially hidden field ids.
- * @property {boolean} [fieldControls=true] Show the accessible visibility and reorder disclosure.
+ * @property {boolean|import('../view/record-view.js').ViewFieldControlsConfig} [fieldControls=true]
+ * Show the accessible visibility and reorder disclosure. `true` keeps the composed Table's own
+ * column chooser and `false` omits it; an object renders the shared record-view chooser instead,
+ * with a translated `label` and, with `target`, mounted into a host element.
  * @property {string|Node|(()=>string|Node)|null} [emptyText=null] Empty-result content.
  * @property {TableOptions} [table={}] Advanced low-level Table options. Shared options win where
  * their contracts overlap; all other options and callbacks are forwarded unchanged.
@@ -74,9 +77,15 @@ export class TableView extends RecordView {
     this._tableViewDestroyed = false;
     this._tableHost = h('div', { class: 'zx-table-view__table' });
     this._initRecordView(root);
+    // Only a `fieldControls` object replaces Table's own chooser, and only an unresolved target
+    // keeps that replacement inside the view — so `true` and `false` render exactly as before.
+    const fieldControls = normalizeViewFieldControls(this.options.fieldControls);
+    this._tableViewToolbar = fieldControls.custom && !this._viewFieldControlsTarget
+      ? h('div', { class: 'zx-record-view__toolbar zx-table-view__toolbar' })
+      : null;
 
     try {
-      root.replaceChildren(this._tableHost);
+      root.replaceChildren(...[this._tableViewToolbar, this._tableHost].filter(Boolean));
       const viewOptions = /** @type {Readonly<TableViewOptions>} */ (this.options);
       const options = tableOptionsForView(viewOptions.table, {
         fields: this.getFields(),
@@ -93,9 +102,11 @@ export class TableView extends RecordView {
       // Seed selection before bridging events so construction stays silent like RecordView itself.
       this.table.setSelection(this.getSelectionIds());
       this._bridgeTableEvents();
+      if (fieldControls.custom) this._mountViewFieldControls(this._tableViewToolbar ?? root);
       return root;
     } catch (error) {
       this.table?.destroy();
+      this._removeViewFieldControls();
       if (!created) restoreTarget(root, this._tableViewOriginal);
       throw error;
     }
@@ -302,10 +313,14 @@ export function fieldsToTableColumns(fields) {
  * Builds the composed Table configuration. Shared options deliberately overwrite overlapping
  * low-level options; every advanced option remains untouched.
  * @param {TableOptions|undefined} table Advanced Table options.
- * @param {{fields:ViewField[],data:TableViewRecord[],recordId:string|((record:TableViewRecord)=>unknown),sort:ViewSort|null,sortMode:'local'|'server',selectable:false|'single'|'multi',hiddenFields:string[],fieldControls:boolean,emptyText:string|Node|(()=>string|Node)|null}} shared Shared state.
+ * @param {{fields:ViewField[],data:TableViewRecord[],recordId:string|((record:TableViewRecord)=>unknown),sort:ViewSort|null,sortMode:'local'|'server',selectable:false|'single'|'multi',hiddenFields:string[],fieldControls:boolean|import('../view/record-view.js').ViewFieldControlsConfig,emptyText:string|Node|(()=>string|Node)|null}} shared Shared state.
  * @returns {TableOptions} Table configuration.
  */
 export function tableOptionsForView(table, shared) {
+  // A customised chooser is rendered by TableView from the shared field state, so Table's own one
+  // stands down; `true`/`false` keep Table's chooser exactly as it has always been.
+  const controls = normalizeViewFieldControls(shared.fieldControls);
+  const tableChooser = controls.enabled && !controls.custom;
   return {
     ...(table && typeof table === 'object' ? table : {}),
     columns: fieldsToTableColumns(shared.fields),
@@ -315,8 +330,8 @@ export function tableOptionsForView(table, shared) {
     sortMode: shared.sortMode,
     selectable: shared.selectable,
     hiddenColumns: [...shared.hiddenFields],
-    columnVisibility: Boolean(shared.fieldControls),
-    columnReorder: Boolean(shared.fieldControls),
+    columnVisibility: tableChooser,
+    columnReorder: tableChooser,
     emptyText: shared.emptyText
   };
 }

package/src/components/tag-picker/tag-picker.css

@@ -10,7 +10,9 @@
   align-items: center;
   gap: var(--zx-space-1);
   min-block-size: var(--zx-control-height);
-  padding: 3px 3px 3px var(--zx-space-2);
+  padding: 3px;
+  /* The tags sit further from the field's leading edge than from its other three. */
+  padding-inline-start: var(--zx-space-2);
   border: 1px solid var(--zx-color-border-control);
   border-radius: var(--zx-control-radius);
   background: var(--zx-color-bg-control);
@@ -30,6 +32,12 @@
   cursor: default;
 }
 
+/* Read-only, the picker is its tags: nothing to type into and no list to open, so no input and no
+   chevron — and a full row of tags does not wrap them onto an empty second line. */
+.zx-tag-picker[data-readonly] :is(.zx-tag-picker__input, .zx-tag-picker__toggle) {
+  display: none;
+}
+
 .zx-tag-picker__tags {
   display: contents;
 }
@@ -63,6 +71,38 @@
   color: var(--zx-tag-color, var(--zx-color-accent));
 }
 
+/* A categorical tone: the tag takes the Badge tone palette — the tone's tint as fill, its ink as
+   text, no border — and an icon tile the same pair, so a label keeps one colour everywhere. */
+.zx-tag-picker__tag[data-tone] {
+  border-color: transparent;
+  background: var(--zx-tag-tone-bg);
+  color: var(--zx-tag-tone-fg);
+}
+
+.zx-tag-picker__visual[data-tone] {
+  background: var(--zx-tag-tone-bg);
+  color: var(--zx-tag-tone-fg);
+}
+
+.zx-tag-picker .zx-tag-picker__tag[data-tone] .zx-tag-picker__remove {
+  color: inherit;
+}
+
+.zx-tag-picker .zx-tag-picker__tag[data-tone] .zx-tag-picker__remove:hover {
+  background: color-mix(in srgb, currentColor 14%, transparent);
+  color: inherit;
+}
+
+:is(.zx-tag-picker__tag, .zx-tag-picker__visual)[data-tone="blue"] { --zx-tag-tone-bg: var(--zx-color-tone-blue-bg); --zx-tag-tone-fg: var(--zx-color-tone-blue-fg); }
+:is(.zx-tag-picker__tag, .zx-tag-picker__visual)[data-tone="teal"] { --zx-tag-tone-bg: var(--zx-color-tone-teal-bg); --zx-tag-tone-fg: var(--zx-color-tone-teal-fg); }
+:is(.zx-tag-picker__tag, .zx-tag-picker__visual)[data-tone="green"] { --zx-tag-tone-bg: var(--zx-color-tone-green-bg); --zx-tag-tone-fg: var(--zx-color-tone-green-fg); }
+:is(.zx-tag-picker__tag, .zx-tag-picker__visual)[data-tone="amber"] { --zx-tag-tone-bg: var(--zx-color-tone-amber-bg); --zx-tag-tone-fg: var(--zx-color-tone-amber-fg); }
+:is(.zx-tag-picker__tag, .zx-tag-picker__visual)[data-tone="orange"] { --zx-tag-tone-bg: var(--zx-color-tone-orange-bg); --zx-tag-tone-fg: var(--zx-color-tone-orange-fg); }
+:is(.zx-tag-picker__tag, .zx-tag-picker__visual)[data-tone="red"] { --zx-tag-tone-bg: var(--zx-color-tone-red-bg); --zx-tag-tone-fg: var(--zx-color-tone-red-fg); }
+:is(.zx-tag-picker__tag, .zx-tag-picker__visual)[data-tone="pink"] { --zx-tag-tone-bg: var(--zx-color-tone-pink-bg); --zx-tag-tone-fg: var(--zx-color-tone-pink-fg); }
+:is(.zx-tag-picker__tag, .zx-tag-picker__visual)[data-tone="violet"] { --zx-tag-tone-bg: var(--zx-color-tone-violet-bg); --zx-tag-tone-fg: var(--zx-color-tone-violet-fg); }
+:is(.zx-tag-picker__tag, .zx-tag-picker__visual)[data-tone="slate"] { --zx-tag-tone-bg: var(--zx-color-tone-slate-bg); --zx-tag-tone-fg: var(--zx-color-tone-slate-fg); }
+
 .zx-tag-picker__tag:not(:has(.zx-tag-picker__remove)) {
   padding-inline-end: var(--zx-space-2);
 }
@@ -123,7 +163,7 @@
   max-inline-size: calc(100vw - var(--zx-space-4));
   overflow: hidden;
   border: 1px solid var(--zx-color-overlay-border);
-  border-radius: var(--zx-radius-md);
+  border-radius: var(--zx-radius-lg);
   background-color: var(--zx-color-overlay-surface);
   background-image: var(--zx-overlay-surface-image);
   background-clip: padding-box;
@@ -154,8 +194,11 @@
   display: flex;
   align-items: center;
   gap: var(--zx-space-2);
-  padding: var(--zx-space-2) var(--zx-space-2);
-  border-radius: var(--zx-radius-md);
+  /* The same row as a Select option and a menu item. */
+  min-block-size: calc(var(--zx-control-height) - 2px);
+  padding: var(--zx-space-1) var(--zx-space-2);
+  border-radius: var(--zx-radius-sm);
+  line-height: 1.35;
   cursor: pointer;
 }
 
@@ -163,9 +206,9 @@
   background: var(--zx-color-overlay-hover);
 }
 
+/* A chosen tag keeps its check mark; the row itself stays in the text colour. */
 .zx-tag-picker__option[aria-selected="true"] {
-  color: var(--zx-color-accent);
-  font-weight: 550;
+  color: var(--zx-color-text);
 }
 
 .zx-tag-picker__option[aria-disabled="true"] {
@@ -200,3 +243,40 @@
   font-size: var(--zx-text-sm);
   text-align: center;
 }
+
+/*
+ * Quiet fields. Inside `[data-zx-fields="quiet"]` the tags read as the value: no border, no fill,
+ * no chevron. Hover brings the hover fill and the chevron back; focus or an open list brings back
+ * the border, the control fill and the focus ring. Disabled and read-only pickers never light up.
+ */
+[data-zx-fields="quiet"] .zx-tag-picker__control {
+  border-color: transparent;
+  background: transparent;
+}
+
+[data-zx-fields="quiet"] .zx-tag-picker__toggle {
+  opacity: 0;
+}
+
+[data-zx-fields="quiet"] .zx-tag-picker:not([data-disabled], [data-readonly]):hover .zx-tag-picker__control {
+  background: var(--zx-color-bg-hover);
+}
+
+[data-zx-fields="quiet"] .zx-tag-picker:not([data-disabled], [data-readonly]):is(:hover, [data-focus], [data-state="open"]) .zx-tag-picker__toggle {
+  opacity: 1;
+}
+
+[data-zx-fields="quiet"] .zx-tag-picker:not([data-disabled], [data-readonly]):is([data-focus], [data-state="open"]) .zx-tag-picker__control {
+  border-color: var(--zx-color-border-control);
+  background: var(--zx-color-bg-control);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  [data-zx-fields="quiet"] .zx-tag-picker__control {
+    transition: background-color var(--zx-dur-fast) var(--zx-ease), border-color var(--zx-dur-fast) var(--zx-ease);
+  }
+
+  [data-zx-fields="quiet"] .zx-tag-picker__toggle {
+    transition: opacity var(--zx-dur-fast) var(--zx-ease);
+  }
+}

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

@@ -2,7 +2,9 @@ import { Component } from '../../core/component.js';
 import { h, restoreTarget, snapshotTarget } from '../../core/dom.js';
 import { icon } from '../../core/icons.js';
 import { position } from '../../core/position.js';
-import { isCssColor, uid } from '../../core/util.js';
+import { uid } from '../../core/util.js';
+import { normalizeBadgeTone } from '../badge/badge.js';
+import { itemColor } from '../select/color.js';
 import { matchItems } from '../select/filter.js';
 
 /** @typedef {Record<string, any>|string|number} TagItem */
@@ -15,7 +17,12 @@ import { matchItems } from '../select/filter.js';
  * @property {TagValueReader} [valueKey='ID'] Item ID property or reader.
  * @property {TagLabelReader} [labelKey='name'] Item label property or reader.
  * @property {TagValueReader} [iconKey='icon'] Optional item icon property or reader.
- * @property {TagValueReader} [colorKey='color'] Optional item colour property or reader.
+ * @property {TagValueReader} [colorKey='color'] Optional item colour property or reader: a CSS colour
+ * or a token reference such as `var(--zx-color-tone-blue-fg)`.
+ * @property {TagValueReader} [toneKey='tone'] Optional item tone property or reader: a categorical
+ * tone name from the Badge palette (`blue`, `teal`, `green`, `amber`, `orange`, `red`, `pink`,
+ * `violet`, `slate`). A toned tag takes the palette's fill and ink, as a Badge with that `tone`
+ * does; a tone wins over a colour, and unknown names are ignored.
  * @property {Array<TagValueReader>|null} [searchKeys=null] Fields searched by local filtering.
  * @property {'local'|((query: string) => Promise<TagItem[]>|TagItem[])} [filter='local'] Filtering mode.
  * @property {number} [minQuery=0] Minimum async query length.
@@ -26,7 +33,8 @@ import { matchItems } from '../select/filter.js';
  * @property {string} [placeholder=''] Empty-state input text.
  * @property {number} [listHeight=260] Maximum list height in pixels.
  * @property {boolean} [disabled=false] Whether interaction is disabled.
- * @property {boolean} [readonly=false] Whether tags may be added or removed.
+ * @property {boolean} [readonly=false] When true the picker shows only its tags — no input, chevron, or
+ * remove buttons.
  * @property {((item: TagItem) => Node|string)|null} [renderItem=null] Option renderer.
  * @property {((item: TagItem) => Node|string)|null} [renderTag=null] Tag-label renderer.
  * @property {Record<string, string>|Record<string, Record<string, string>>} [msg] Localized messages.
@@ -69,6 +77,7 @@ export class TagPicker extends Component {
     labelKey: 'name',
     iconKey: 'icon',
     colorKey: 'color',
+    toneKey: 'tone',
     searchKeys: null,
     filter: 'local',
     minQuery: 0,
@@ -415,12 +424,13 @@ export class TagPicker extends Component {
   _renderTags() {
     const tags = this._selected.map((item) => {
       const label = this._labelOf(item);
-      const color = this._colorOf(item);
+      const tone = this._toneOf(item);
+      const color = tone ? null : this._colorOf(item);
       const content = this.options.renderTag ? this.options.renderTag(item)
         : [this._iconOf(item), h('span', { class: 'zx-tag-picker__tag-label' }, label)];
       const tag = h('span', {
         class: 'zx-tag-picker__tag',
-        dataset: { colored: String(Boolean(color)) },
+        dataset: { colored: String(Boolean(color)), tone: tone ?? undefined },
         style: color ? { '--zx-tag-color': color } : null
       }, content);
       if (!this._readonly && !this._disabled) {
@@ -790,17 +800,24 @@ export class TagPicker extends Component {
       ? /** @type {Node} */ (value).cloneNode(true)
       : typeof value === 'string' && value.trim() ? icon(value, { size: 12 }) : null;
     if (!visual) return null;
+    const tone = this._toneOf(item);
+    const color = tone ? null : this._colorOf(item);
     return h('span', {
       class: 'zx-tag-picker__visual',
-      style: this._colorOf(item) ? { '--zx-tag-color': this._colorOf(item) } : null,
+      dataset: { tone: tone ?? undefined },
+      style: color ? { '--zx-tag-color': color } : null,
       ariaHidden: 'true'
     }, visual);
   }
 
   /** @param {unknown} item @returns {string|null} */
   _colorOf(item) {
-    const value = this._readItem(item, this.options.colorKey);
-    return isCssColor(value) ? value : null;
+    return itemColor(this._readItem(item, this.options.colorKey));
+  }
+
+  /** @param {unknown} item @returns {string|null} */
+  _toneOf(item) {
+    return normalizeBadgeTone(this._readItem(item, this.options.toneKey));
   }
 
   /** @param {unknown} item @param {unknown} reader @returns {unknown} */

package/src/components/timebox/timebox.css

@@ -28,14 +28,14 @@
 
 .zx-timebox__separator {
   color: var(--zx-color-text-muted);
-  font-weight: 700;
+  font-weight: var(--zx-weight-medium);
 }
 
 .zx-timebox__sign {
   min-inline-size: var(--zx-control-height);
   padding: 0;
   border-color: var(--zx-color-border-control);
-  font-weight: 750;
+  font-weight: var(--zx-weight-semibold);
 }
 
 .zx-timebox__sign[data-state="positive"] {
@@ -49,3 +49,23 @@
   background: var(--zx-color-danger-bg);
   color: var(--zx-color-danger);
 }
+
+/*
+ * Quiet fields. The hour and minute segments are native inputs, which the base quiet-fields rule
+ * already quiets. The sign button follows them: no border and no fill until hover or focus, its
+ * glyph keeping the colour that says which way the duration runs.
+ */
+[data-zx-fields="quiet"] .zx-timebox__sign,
+[data-zx-fields="quiet"] .zx-timebox__sign[data-state] {
+  border-color: transparent;
+  background: transparent;
+}
+
+[data-zx-fields="quiet"] .zx-timebox:not([aria-disabled="true"]) .zx-timebox__sign:hover {
+  background: var(--zx-color-bg-hover);
+}
+
+[data-zx-fields="quiet"] .zx-timebox__sign:focus-visible {
+  border-color: var(--zx-color-border-control);
+  background: var(--zx-color-bg-control);
+}

package/src/components/timebox/timebox.js

@@ -75,7 +75,9 @@ export class Timebox extends Component {
     const content = h('div', {
       class: 'zx-timebox__content',
       role: 'group',
-      ariaLabel: this.options.seconds ? 'Duration in hours, minutes, and seconds' : 'Duration in hours and minutes'
+      ariaLabel: this.options.seconds
+        ? this._message('timebox.durationWithSeconds', 'Duration in hours, minutes, and seconds')
+        : this._message('timebox.duration', 'Duration in hours and minutes')
     });
     this._content = content;
 
@@ -84,7 +86,7 @@ export class Timebox extends Component {
         ref: 'sign',
         class: 'zx-timebox__sign',
         type: 'button',
-        ariaLabel: 'Toggle duration sign',
+        ariaLabel: this._message('timebox.toggleSign', 'Toggle duration sign'),
         ariaPressed: 'false'
       }, '+'));
       this.listen(this.refs.sign, 'click', () => {
@@ -95,12 +97,12 @@ export class Timebox extends Component {
       });
     }
 
-    this._addSegment(content, 'hours', 'Hours', false);
+    this._addSegment(content, 'hours', this._message('timebox.hours', 'Hours'), false);
     content.append(h('span', { class: 'zx-timebox__separator', ariaHidden: 'true' }, ':'));
-    this._addSegment(content, 'minutes', 'Minutes', true);
+    this._addSegment(content, 'minutes', this._message('timebox.minutes', 'Minutes'), true);
     if (this.options.seconds) {
       content.append(h('span', { class: 'zx-timebox__separator', ariaHidden: 'true' }, ':'));
-      this._addSegment(content, 'seconds', 'Seconds', true);
+      this._addSegment(content, 'seconds', this._message('timebox.seconds', 'Seconds'), true);
     }
     root.append(content);
     this.set(this.options.value, this.options.unit, { silent: true });
@@ -237,6 +239,17 @@ export class Timebox extends Component {
   _emitChange() {
     this.emit('change', { value: this.get(this.options.unit) });
   }
+
+  /**
+   * 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;
+  }
 }
 
 /** @event Timebox#change @type {CustomEvent<{value: number}>} */

package/src/components/toggle/toggle.css

@@ -1,7 +1,11 @@
+/* A label reads like text beside the switch: start-aligned, wrapping within the available width,
+   with the track level with its first line. A one-line toggle is still a control's height tall,
+   its track and its text centred in it. */
 .zx-toggle {
   display: inline-flex;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--zx-space-2);
+  max-inline-size: 100%;
   min-block-size: var(--zx-control-height);
   border: 0;
   background: none;
@@ -9,6 +13,7 @@
   padding: 0;
   font: inherit;
   font-size: var(--zx-control-font-size);
+  text-align: start;
   cursor: pointer;
 }
 
@@ -31,12 +36,18 @@
   flex: none;
   inline-size: 34px;
   block-size: 20px;
+  margin-block-start: max(0px, (var(--zx-control-height) - 20px) / 2);
   border: 1px solid var(--zx-color-border-strong);
   border-radius: var(--zx-radius-full);
   background: var(--zx-color-bg-control);
   padding: 2px;
 }
 
+.zx-toggle__label {
+  min-inline-size: 0;
+  padding-block: max(0px, (var(--zx-control-height) - 1lh) / 2);
+}
+
 .zx-toggle__thumb {
   display: block;
   inline-size: 14px;

package/src/components/toolbar/toolbar.js

@@ -80,8 +80,8 @@ export class Toolbar extends Component {
   /** Inline size of the last completed measure pass; `-1` forces the next one. */
   #lastWidth = -1;
   /**
-   * Block size of the last completed measure pass. Switching density resizes the controls without
-   * changing the row width, so the height belongs in the cache key.
+   * Block size of the last completed measure pass. A theme change (control height, spacing unit)
+   * resizes the controls without changing the row width, so the height belongs in the cache key.
    */
   #lastHeight = -1;
   /** Handle of the frame a pending observer-driven measure pass is scheduled in; `0` if none. */

package/src/components/tooltip/tooltip.css

@@ -5,6 +5,10 @@
  */
 
 .zx-tooltip {
+  /* As wide as its text up to the maximum, never narrower: squeezed into too little room beside its
+     anchor, the bubble overflows instead of wrapping word by word, which is what makes the
+     position fall back to the other side, or above or below. */
+  inline-size: max-content;
   max-inline-size: var(--zx-tooltip-max-inline-size, 260px);
   border: 1px solid var(--zx-color-overlay-border);
   border-radius: var(--zx-radius-md);

package/src/components/tooltip/tooltip.js

@@ -1,6 +1,6 @@
 import { Component } from '../../core/component.js';
 import { h, resolveElement } from '../../core/dom.js';
-import { overlayHost } from '../../core/overlay-host.js';
+import { connectedOverlayHost, overlayHost } from '../../core/overlay-host.js';
 import { position } from '../../core/position.js';
 import { uid } from '../../core/util.js';
 
@@ -96,7 +96,8 @@ export class Tooltip extends Component {
     super(null, options);
 
     this.#anchor = resolved;
-    overlayHost(resolved).append(this.el);
+    // A detached anchor has no theme scope yet: the bubble waits and finds its host in show().
+    connectedOverlayHost(resolved)?.append(this.el);
     this.#content = this.options.content;
     this.#disabled = Boolean(this.options.disabled);
     this.#describedBy = resolved.getAttribute('aria-describedby');
@@ -174,11 +175,17 @@ export class Tooltip extends Component {
     if (node === null) return this;
 
     this.el.replaceChildren(node);
+    const placement = PLACEMENTS.has(this.options.placement) ? this.options.placement : 'top';
     this.#position = position(this.#anchor, /** @type {HTMLElement} */ (this.el), {
-      placement: PLACEMENTS.has(this.options.placement) ? this.options.placement : 'top',
+      placement,
       offset: Number(this.options.offset),
       flip: true
     });
+    // A bubble beside its anchor that fits on neither side goes above or below it instead. Only
+    // the anchor-positioned path sets fallbacks; the script fallback clamps into the viewport.
+    if (/^(left|right)/.test(placement) && this.el.style.getPropertyValue('position-try-fallbacks')) {
+      this.el.style.setProperty('position-try-fallbacks', 'flip-inline, top span-all, bottom span-all');
+    }
     this.el.dataset.state = 'open';
     this.#anchor.setAttribute('aria-describedby', appendToken(this.#describedBy, this.el.id));
     this.emit('open');

package/src/components/tree/tree.css

@@ -1,5 +1,7 @@
 .zx-tree {
-  --zx-tree-indent: 18px;
+  /* One step per level: enough to read the nesting, not so much that a deep branch walks off the
+     edge of a sidebar. */
+  --zx-tree-indent: var(--zx-space-3);
   display: block;
   min-inline-size: 0;
   color: var(--zx-color-text);
@@ -10,10 +12,12 @@
   display: flex;
   align-items: center;
   gap: var(--zx-space-2);
-  min-block-size: calc(var(--zx-control-height) - 6px);
-  padding-inline: var(--zx-space-2);
+  /* The same row as a Finder column: a space-1 margin round one line of text. */
+  min-block-size: calc(var(--zx-control-height) - var(--zx-space-1));
+  padding: var(--zx-space-1) var(--zx-space-2);
   padding-inline-start: calc(var(--zx-space-2) + var(--zx-tree-level, 0) * var(--zx-tree-indent));
-  border-radius: var(--zx-radius-md);
+  border-radius: var(--zx-radius-sm);
+  line-height: 1.25;
   cursor: pointer;
 }
 
@@ -21,10 +25,18 @@
   background: var(--zx-color-bg-hover);
 }
 
+/* The selected node of a single-selection tree is where you are, not something you picked: the
+   neutral current fill, the full text colour and a heavier label. A multi-selection is a set of
+   picks and keeps the accent tint, so the two never read as the same thing. */
 .zx-tree__row[aria-selected="true"] {
+  background: var(--zx-color-bg-current);
+  color: var(--zx-color-text);
+  font-weight: var(--zx-weight-semibold);
+}
+
+.zx-tree[aria-multiselectable="true"] .zx-tree__row[aria-selected="true"] {
   background: var(--zx-color-bg-selected);
-  color: var(--zx-color-accent);
-  font-weight: 550;
+  font-weight: inherit;
 }
 
 .zx-tree__row:focus-visible {
@@ -38,7 +50,7 @@
   inline-size: 14px;
   block-size: 14px;
   flex: none;
-  color: var(--zx-color-text-muted);
+  color: var(--zx-color-text-subtle);
 }
 
 .zx-tree__row[aria-expanded="true"] .zx-tree__twisty {
@@ -60,19 +72,17 @@
   margin: 0;
 }
 
+/* Icons are quieter than labels, folders included: a branch is told apart by its glyph and its
+   twisty, not by borrowing a status colour. The current row's icon takes the text colour. */
 .zx-tree__icon {
   display: inline-grid;
   place-items: center;
   flex: none;
-  color: var(--zx-color-text-muted);
-}
-
-.zx-tree__row[data-branch] .zx-tree__icon {
-  color: var(--zx-color-warning);
+  color: var(--zx-color-text-subtle);
 }
 
 .zx-tree__row[aria-selected="true"] .zx-tree__icon {
-  color: inherit;
+  color: var(--zx-color-text);
 }
 
 .zx-tree__label {
@@ -83,11 +93,10 @@
 
 .zx-tree__badge {
   margin-inline-start: auto;
-  padding-inline: var(--zx-space-2);
-  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);
+  font-weight: var(--zx-weight-medium);
   font-variant-numeric: tabular-nums;
 }
 

package/src/components/tree/tree.js

@@ -611,6 +611,11 @@ export class TreeView extends Component {
         this._expandSiblings(row);
         return;
       default:
+        // A printable key typed on a row belongs to the type-ahead: claimed, so the browser's
+        // find-as-you-type and the page's single-key shortcuts do not act on it as well. Typing
+        // into a control that `renderLabel` placed in a row stays that control's.
+        if (!isTreeTypeaheadKey(event) || isTextEntry(event.target)) return;
+        event.preventDefault();
         this._handleTypeahead(event);
     }
   }
@@ -782,3 +787,29 @@ function cloneNodes(nodes) {
 function toIterable(value) {
   return Array.isArray(value) ? value : [];
 }
+
+/**
+ * Whether a key press is one the type-ahead consumes: a single printable character, not a space
+ * (Space selects), with no Ctrl, Meta, or Alt (those are shortcuts). Shift is allowed, since it
+ * only changes the letter's case.
+ * @param {{key?: string, ctrlKey?: boolean, metaKey?: boolean, altKey?: boolean}} event Key event.
+ * @returns {boolean}
+ */
+export function isTreeTypeaheadKey(event) {
+  if (!event || event.ctrlKey || event.metaKey || event.altKey) return false;
+  const key = typeof event.key === 'string' ? event.key : '';
+  // The same test the shared type-ahead applies, so a key is claimed exactly when it is used.
+  return key.length === 1 && !/\s/.test(key);
+}
+
+/** @param {EventTarget|null} target @returns {boolean} Whether typing into the target edits text. */
+function isTextEntry(target) {
+  const element = /** @type {HTMLElement|null} */ (target && /** @type {Node} */ (target).nodeType === 1
+    ? target : null);
+  if (!element) return false;
+  if (element.isContentEditable) return true;
+  if (element.localName === 'textarea' || element.localName === 'select') return true;
+  if (element.localName !== 'input') return false;
+  return !['checkbox', 'radio', 'button', 'submit', 'reset', 'image', 'range', 'color', 'file']
+    .includes(/** @type {HTMLInputElement} */ (element).type);
+}