@zeyos/zx 4.4.0 → 5.2.0

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

@@ -29,7 +29,8 @@ export function registerTagPickerFieldAdapter() {
         }
       },
       focus: () => picker.focus(),
-      setDisabled: (value) => (value ? picker.disable() : picker.enable())
+      setDisabled: (value) => (value ? picker.disable() : picker.enable()),
+      setReadonly: (value) => { picker.setReadonly(value); }
     };
   });
 }

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

@@ -32,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;
 }
@@ -65,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);
 }
@@ -125,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;
@@ -156,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;
 }
 
@@ -165,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"] {
@@ -202,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/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,7 @@
 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 { pushOverlay } from '../../core/overlay-stack.js';
 import { position } from '../../core/position.js';
 import { uid } from '../../core/util.js';
 
@@ -82,6 +83,10 @@ export class Tooltip extends Component {
   #closeTimer = 0;
   /** True between `pointerdown` and `pointerup`, so a click-induced focus cannot re-open. */
   #pointerActive = false;
+  /** Whether the tooltip dismisses itself (every trigger but `manual`). */
+  #dismissible = false;
+  /** @type {import('../../core/overlay-stack.js').OverlayHandle|null} */
+  #overlay = null;
   #disabled = false;
   #destroyed = false;
 
@@ -96,7 +101,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, { dialog: false })?.append(this.el);
     this.#content = this.options.content;
     this.#disabled = Boolean(this.options.disabled);
     this.#describedBy = resolved.getAttribute('aria-describedby');
@@ -104,6 +110,7 @@ export class Tooltip extends Component {
 
     const trigger = TRIGGERS.has(this.options.trigger) ? this.options.trigger : 'both';
     if (trigger === 'manual') return;
+    this.#dismissible = true;
 
     if (trigger === 'hover' || trigger === 'both') {
       this.listen(this.#anchor, 'pointerenter', (event) => {
@@ -123,26 +130,18 @@ export class Tooltip extends Component {
       this.listen(this.#anchor, 'focusout', () => this.#scheduleHide(Number(this.options.hideDelay)));
     }
 
-    // Dismissal. Escape satisfies WCAG 1.4.13; the pointer and focus rules also keep two tooltips
-    // from ever being visible at once without a module-level registry to coordinate them.
-    this.listen(document, 'keydown', (event) => {
-      if (/** @type {KeyboardEvent} */ (event).key !== 'Escape' || !this.isOpen()) return;
-      event.preventDefault();
-      this.hide();
-    });
-    this.listen(document, 'pointerdown', () => {
+    // A press on the anchor closes the bubble and cancels a pending open, and the focus that
+    // arrives with it is not a request for one. Presses elsewhere, Escape, and focus moving away
+    // reach an open bubble through the overlay stack, so a closed tooltip listens to nothing
+    // outside its own anchor.
+    this.listen(this.#anchor, 'pointerdown', () => {
       this.#pointerActive = true;
       this.#cancelTimers();
       this.hide();
-    }, { capture: true });
-    this.listen(document, 'pointerup', () => { this.#pointerActive = false; }, { capture: true });
-    this.listen(document, 'pointercancel', () => { this.#pointerActive = false; }, { capture: true });
-    this.listen(document, 'focusin', (event) => {
-      if (!this.isOpen()) return;
-      const path = event.composedPath();
-      if (path.includes(this.#anchor)) return;
-      this.hide();
     });
+    for (const type of ['pointerup', 'pointercancel', 'pointerleave']) {
+      this.listen(this.#anchor, type, () => { this.#pointerActive = false; });
+    }
   }
 
   /**
@@ -174,13 +173,36 @@ 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));
+    /*
+     * On the stack even when manual, so the order is shared and a closing parent takes the bubble
+     * with it; only a dismissible tooltip takes Escape (WCAG 1.4.13), presses, and focus. Escape
+     * reaches it only while it is the topmost layer that takes Escape, so one press never closes
+     * both a tooltip and the menu beneath it.
+     */
+    this.#overlay = pushOverlay({
+      kind: 'tooltip',
+      root: this.el,
+      owner: this,
+      anchor: this.#anchor,
+      inside: [this.#anchor],
+      onEscape: this.#dismissible ? () => { this.hide(); } : undefined,
+      onOutsidePointer: this.#dismissible ? () => this.hide() : undefined,
+      onFocusOutside: this.#dismissible ? () => this.hide() : undefined,
+      onParentClose: () => this.hide()
+    });
     this.emit('open');
     return this;
   }
@@ -198,6 +220,9 @@ export class Tooltip extends Component {
     this.el.dataset.state = 'closed';
     this.el.replaceChildren();
     this.#restoreDescribedBy();
+    const overlay = this.#overlay;
+    this.#overlay = null;
+    overlay?.release();
     this.emit('close');
     return this;
   }

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,14 +25,22 @@
   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 {
-  outline: 0;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 
@@ -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);
+}

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

@@ -29,8 +29,8 @@
   max-inline-size: 100%;
   padding-inline: var(--zx-space-2);
   border: 1px solid var(--zx-color-border);
-  border-radius: var(--zx-radius-full);
-  background: var(--zx-color-bg-selected);
+  border-radius: var(--zx-radius-md);
+  background: var(--zx-color-bg-muted);
   color: var(--zx-color-text);
   cursor: grab;
 }
@@ -50,7 +50,7 @@
   place-items: center;
   min-inline-size: 1.25rem;
   min-block-size: 1.25rem;
-  border-radius: var(--zx-radius-full);
+  border-radius: var(--zx-radius-sm);
   color: var(--zx-color-text-muted);
   cursor: pointer;
 }

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

@@ -93,7 +93,7 @@
 }
 
 .zx-record-view__field-move:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }