@zeyos/zx 4.4.0 → 5.2.0

package/src/components/select/select.css

@@ -30,7 +30,10 @@
   padding-inline-start: var(--zx-space-2) !important;
 }
 
-.zx-select__control:has(.zx-select__input:focus-visible) {
+/* The ring follows keyboard focus. A text input matches :focus-visible on a click as well, so the
+   component marks a pointer focus on a read-only input (`data-focus-origin="pointer"`) and the ring
+   waits for the first key. An editable input keeps it on click, as any text field does. */
+.zx-select:not([data-focus-origin="pointer"]) .zx-select__control:has(.zx-select__input:focus-visible) {
   box-shadow: var(--zx-focus-ring);
 }
 
@@ -85,9 +88,17 @@
   border-radius: var(--zx-radius-full);
 }
 
+/* Disabled reads the way a disabled Field does: text and frame fade together, nothing else
+   changes. Inside a disabled Field the field has already faded, so the Select does not again. */
+.zx-select[aria-disabled="true"] {
+  opacity: 0.65;
+}
+
+.zx-field[data-disabled="true"] .zx-select[aria-disabled="true"] {
+  opacity: 1;
+}
+
 .zx-select[aria-disabled="true"] .zx-select__control {
-  background: var(--zx-color-bg-page);
-  color: var(--zx-color-text-muted);
   cursor: default;
 }
 
@@ -97,7 +108,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;
@@ -118,10 +129,12 @@
   display: flex;
   align-items: center;
   gap: var(--zx-space-2);
-  min-block-size: var(--zx-control-height);
+  /* The same row as a menu item: a little under a control, the smallest radius. */
+  min-block-size: calc(var(--zx-control-height) - 2px);
   border-radius: var(--zx-radius-sm);
   cursor: default;
-  padding: var(--zx-space-1) var(--zx-control-pad-x);
+  padding: var(--zx-space-1) var(--zx-space-2);
+  line-height: 1.35;
 }
 
 .zx-select__option-content {
@@ -137,6 +150,8 @@
   background: var(--zx-color-overlay-hover);
 }
 
+/* The highlighted option (keyboard or pointer) is a neutral step; a chosen option is a pick and
+   keeps the accent tint and its check mark. */
 .zx-select__option[aria-selected="true"] {
   background: var(--zx-color-overlay-selected);
 }
@@ -146,6 +161,7 @@
   color: var(--zx-color-accent);
 }
 
+/* A caption for the options under it, in sentence case: quieter than the options, never louder. */
 .zx-select__group {
   position: sticky;
   z-index: 1;
@@ -153,10 +169,8 @@
   background: var(--zx-color-overlay-scrim);
   color: var(--zx-color-text-muted);
   font-size: var(--zx-text-xs);
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  padding: var(--zx-space-2) var(--zx-control-pad-x) var(--zx-space-1);
-  text-transform: uppercase;
+  font-weight: var(--zx-weight-semibold);
+  padding: var(--zx-space-1) var(--zx-space-2);
 }
 
 @media (prefers-reduced-transparency: reduce) {
@@ -175,13 +189,13 @@
 
 .zx-select__separator {
   block-size: 1px;
-  margin: var(--zx-space-1) var(--zx-control-pad-x);
+  margin: var(--zx-space-1) var(--zx-space-2);
   background: var(--zx-color-overlay-divider);
 }
 
 .zx-select__empty {
   color: var(--zx-color-text-muted);
-  padding: var(--zx-space-3) var(--zx-control-pad-x);
+  padding: var(--zx-space-3) var(--zx-space-2);
   text-align: center;
 }
 
@@ -191,30 +205,59 @@
   gap: var(--zx-space-2);
 }
 
-.zx-select__priority-icon {
+/* The priority glyph — `priorityIcon()`, and the one Select.priority() draws, which also carries
+   `.zx-select__priority-icon`. Priority is read by height, not by hue: four signal bars, the filled
+   ones in muted ink and the rest a step quieter. Only the top level, the one that needs attention,
+   is coloured — a danger square with an exclamation mark. "No priority" is a row of dashes. Every
+   glyph takes the same box, so the labels after them line up. */
+.zx-priority-icon {
   display: inline-flex;
-  gap: 2px;
   flex: none;
-  color: var(--zx-color-warning);
+  vertical-align: middle;
+  align-items: flex-end;
+  gap: 1px;
+  box-sizing: border-box;
+  inline-size: 15px;
+  block-size: 14px;
+  padding-block: 1px;
+  color: var(--zx-color-text-muted);
 }
 
-.zx-select__priority-icon > span {
-  inline-size: 7px;
-  block-size: 7px;
-  border: 1px solid currentColor;
-  border-radius: 2px;
+.zx-priority-icon > span {
+  inline-size: 3px;
+  border-radius: 1px;
+  background: var(--zx-color-border-strong);
 }
 
-.zx-select__priority-icon > span[data-filled="true"] { background: currentColor; }
-.zx-select__priority-icon[data-level="0"] { color: var(--zx-color-success); }
-.zx-select__priority-icon[data-level="1"] {
-  color: color-mix(in srgb, var(--zx-color-success) 35%, var(--zx-color-warning));
+.zx-priority-icon > span:nth-child(1) { block-size: 25%; }
+.zx-priority-icon > span:nth-child(2) { block-size: 50%; }
+.zx-priority-icon > span:nth-child(3) { block-size: 75%; }
+.zx-priority-icon > span:nth-child(4) { block-size: 100%; }
+.zx-priority-icon > span[data-filled="true"] { background: currentColor; }
+
+.zx-priority-icon[data-level="none"] { align-items: center; }
+.zx-priority-icon[data-level="none"] > span {
+  block-size: 2px;
+  background: currentColor;
 }
-.zx-select__priority-icon[data-level="2"] { color: var(--zx-color-warning); }
-.zx-select__priority-icon[data-level="3"] {
-  color: color-mix(in srgb, var(--zx-color-warning) 35%, var(--zx-color-danger));
+
+.zx-priority-icon[data-level="4"] {
+  align-items: center;
+  justify-content: center;
+  inline-size: 14px;
+  margin-inline-end: 1px;
+  padding: 0;
+  border-radius: var(--zx-radius-sm);
+  background: var(--zx-color-danger);
+  color: var(--zx-color-on-accent);
+  font-size: 11px;
+  font-weight: var(--zx-weight-semibold);
+  line-height: 1;
+}
+
+.zx-priority-icon[data-level="4"]::before {
+  content: "!";
 }
-.zx-select__priority-icon[data-level="4"] { color: var(--zx-color-danger); }
 
 .zx-select__status {
   display: grid;
@@ -223,13 +266,20 @@
   gap: var(--zx-space-2);
 }
 
+/* An entity without a colour of its own is a neutral tile with muted ink; one with a colour is
+   filled with it and drawn in the inverse text colour. */
 .zx-select__entity-glyph {
   display: inline-grid;
   place-items: center;
   inline-size: 20px;
   block-size: 20px;
   border-radius: var(--zx-radius-sm);
-  background: var(--zx-select-entity-color, var(--zx-color-accent-subtle));
+  background: var(--zx-color-bg-muted);
+  color: var(--zx-color-text-muted);
+}
+
+.zx-select__entity-glyph[style*="--zx-select-entity-color"] {
+  background: var(--zx-select-entity-color);
   color: var(--zx-color-text-invert);
 }
 
@@ -256,10 +306,14 @@
   font-size: var(--zx-text-xs);
 }
 
-.zx-select__status-indicator {
+/* The workflow-status glyph — `statusIcon()`, and the one Select.status() draws, which also carries
+   `.zx-select__status-indicator`. Each status is a shape first and a colour second. */
+.zx-status-icon {
   position: relative;
   display: inline-grid;
   place-items: center;
+  box-sizing: border-box;
+  vertical-align: middle;
   inline-size: 14px;
   block-size: 14px;
   flex: none;
@@ -268,37 +322,37 @@
   color: var(--zx-color-text-muted);
 }
 
-.zx-select__status-indicator[data-tone="neutral"] { color: var(--zx-color-border-strong); }
-.zx-select__status-indicator[data-tone="warning"] { color: var(--zx-color-warning); }
-.zx-select__status-indicator[data-tone="info"] { color: var(--zx-color-info); }
-.zx-select__status-indicator[data-tone="accent"] { color: var(--zx-color-accent); }
-.zx-select__status-indicator[data-tone="success"] { color: var(--zx-color-success); }
-.zx-select__status-indicator[data-tone="danger"] { color: var(--zx-color-danger); }
+.zx-status-icon[data-tone="neutral"] { color: var(--zx-color-border-strong); }
+.zx-status-icon[data-tone="warning"] { color: var(--zx-color-warning); }
+.zx-status-icon[data-tone="info"] { color: var(--zx-color-info); }
+.zx-status-icon[data-tone="accent"] { color: var(--zx-color-accent); }
+.zx-status-icon[data-tone="success"] { color: var(--zx-color-success); }
+.zx-status-icon[data-tone="danger"] { color: var(--zx-color-danger); }
 
-.zx-select__status-indicator[data-indicator="dotted"] { border-style: dotted; }
-.zx-select__status-indicator[data-indicator="progress"]::after {
+.zx-status-icon[data-indicator="dotted"] { border-style: dotted; }
+.zx-status-icon[data-indicator="progress"]::after {
   content: "";
   inline-size: 4px;
   block-size: 4px;
   border-radius: inherit;
   background: currentColor;
 }
-.zx-select__status-indicator[data-indicator="review"] {
+.zx-status-icon[data-indicator="review"] {
   background: linear-gradient(90deg, currentColor 50%, transparent 50%);
 }
-.zx-select__status-indicator[data-indicator="ready"] {
+.zx-status-icon[data-indicator="ready"] {
   background: conic-gradient(currentColor 0 35%, transparent 35% 100%);
 }
-.zx-select__status-indicator[data-indicator="waiting"] {
+.zx-status-icon[data-indicator="waiting"] {
   background: conic-gradient(currentColor 0 70%, transparent 70% 100%);
 }
-.zx-select__status-indicator:is([data-indicator="done"], [data-indicator="canceled"]) {
+.zx-status-icon:is([data-indicator="done"], [data-indicator="canceled"]) {
   background: currentColor;
 }
-.zx-select__status-indicator:is([data-indicator="done"], [data-indicator="canceled"]) > .zx-icon {
+.zx-status-icon:is([data-indicator="done"], [data-indicator="canceled"]) > .zx-icon {
   color: var(--zx-color-bg-raised);
 }
-.zx-select__status-indicator[data-indicator="duplicate"]::after {
+.zx-status-icon[data-indicator="duplicate"]::after {
   content: "";
   inline-size: 8px;
   block-size: 2px;
@@ -343,7 +397,7 @@
 
 @media (prefers-reduced-motion: no-preference) {
   .zx-select__loading {
-    animation: zx-select-spin var(--zx-dur-slow) linear infinite;
+    animation: zx-select-spin 720ms linear infinite;
   }
 }
 
@@ -352,3 +406,42 @@
     transform: rotate(1turn);
   }
 }
+
+/*
+ * Quiet fields. Inside `[data-zx-fields="quiet"]` — a property panel, an inspector — the control
+ * reads as its value: no border, no fill, no chevron or clear button. 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. A disabled control never lights up.
+ */
+[data-zx-fields="quiet"] .zx-select__control,
+[data-zx-fields="quiet"] .zx-select[aria-disabled="true"] .zx-select__control {
+  border-color: transparent;
+  background: transparent;
+}
+
+[data-zx-fields="quiet"] .zx-select :is(.zx-select__toggle, .zx-select__clear) {
+  opacity: 0;
+}
+
+[data-zx-fields="quiet"] .zx-select:not([aria-disabled="true"]):hover .zx-select__control {
+  background: var(--zx-color-bg-hover);
+}
+
+[data-zx-fields="quiet"] .zx-select:not([aria-disabled="true"]):is(:hover, :focus-within, [data-state="open"]) :is(.zx-select__toggle, .zx-select__clear) {
+  opacity: 1;
+}
+
+[data-zx-fields="quiet"] .zx-select:not([aria-disabled="true"]):is(:focus-within, [data-state="open"]) .zx-select__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-select__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-select :is(.zx-select__toggle, .zx-select__clear) {
+    transition: opacity var(--zx-dur-fast) var(--zx-ease);
+  }
+}

package/src/components/select/select.js

@@ -3,8 +3,12 @@ import { h, restoreTarget, snapshotTarget } from '../../core/dom.js';
 import { icon } from '../../core/icons.js';
 import { typeahead } from '../../core/keyboard.js';
 import { position } from '../../core/position.js';
-import { isCssColor, uid } from '../../core/util.js';
+import { uid } from '../../core/util.js';
+import { itemColor } from './color.js';
 import { matchItems } from './filter.js';
+import {
+  DEFAULT_STATUSES, STATUS_INDICATORS, STATUS_TONES, normalizePriorityLevel, priorityIcon, statusIcon
+} from './glyphs.js';
 
 /** @typedef {string|number|boolean|symbol|bigint|null|undefined} Primitive */
 /** @typedef {Record<string, any>|Primitive} SelectItem */
@@ -49,7 +53,9 @@ import { matchItems } from './filter.js';
  * @property {string} [recentLabel='Recent'] Heading above recent choices.
  * @property {boolean|SelectAction} [create=false] Optional create command at the bottom.
  * @property {string|((item: SelectItem)=>unknown)} [iconKey='icon'] Item icon reader.
- * @property {string|((item: SelectItem)=>unknown)} [colorKey='color'] Optional icon colour reader.
+ * @property {string|((item: SelectItem)=>unknown)} [colorKey='color'] Optional icon colour reader: a CSS
+ * colour or a token reference such as `var(--zx-color-tone-blue-fg)`. Without one the glyph is a
+ * neutral tile in muted ink.
  * @property {string|((item: SelectItem)=>unknown)} [subtitleKey='description'] Secondary-text reader.
  * @property {((item: SelectItem, context:{selected:boolean})=>Node|string|null)|null} [renderIcon=null] Entity icon renderer.
  */
@@ -69,18 +75,6 @@ const PRIORITY_KEYS = [
 ];
 const PRIORITY_FALLBACKS = ['Lowest', 'Low', 'Medium', 'High', 'Highest'];
 
-const DEFAULT_STATUSES = Object.freeze([
-  ['backlog', 'status.backlog', 'Backlog', 'dotted', 'muted'],
-  ['todo', 'status.todo', 'Todo', 'ring', 'neutral'],
-  ['in-progress', 'status.inProgress', 'In Progress', 'progress', 'warning'],
-  ['in-review', 'status.inReview', 'In Review', 'review', 'info'],
-  ['ready', 'status.ready', 'Ready to Merge', 'ready', 'accent'],
-  ['waiting', 'status.waiting', 'Waiting for feedback', 'waiting', 'warning'],
-  ['done', 'status.done', 'Done', 'done', 'info'],
-  ['canceled', 'status.canceled', 'Canceled', 'canceled', 'muted'],
-  ['duplicate', 'status.duplicate', 'Duplicate', 'duplicate', 'muted']
-]);
-
 /**
  * APG editable combobox with optional local or asynchronous filtering.
  *
@@ -125,7 +119,7 @@ export class Select extends Component {
   render() {
     // Instance state initialized here because render() runs inside the base
     // constructor, before class-field initializers would run (and clobber it).
-    this._items = []; this._visibleItems = []; this._fixedItems = []; this._visibleFixed = []; this._actions = []; this._selected = null; this._optionEntries = []; this._activeIndex = -1; this._open = false; this._disabled = false; this._loading = false; this._requestSequence = 0; this._queryTimer = null; this._position = null; this._createdRoot = false; this._root = null; this._snapshot = null;
+    this._items = []; this._visibleItems = []; this._fixedItems = []; this._visibleFixed = []; this._actions = []; this._selected = null; this._optionEntries = []; this._activeIndex = -1; this._open = false; this._disabled = false; this._loading = false; this._requestSequence = 0; this._queryTimer = null; this._position = null; this._createdRoot = false; this._root = null; this._snapshot = null; this._pointerModality = false;
     this._createdRoot = this.el === null;
     const root = /** @type {HTMLElement} */ (this.el ?? h('div'));
     this.el = root;
@@ -209,7 +203,22 @@ export class Select extends Component {
 
     this.listen(input, 'click', () => this.open());
     this.listen(input, 'input', () => this._onInput());
-    this.listen(input, 'keydown', (event) => this._onKeydown(/** @type {KeyboardEvent} */ (event)));
+    this.listen(input, 'keydown', (event) => {
+      if (!isModifierKey(/** @type {KeyboardEvent} */ (event))) root.removeAttribute('data-focus-origin');
+      this._onKeydown(/** @type {KeyboardEvent} */ (event));
+    });
+    // A text input matches :focus-visible however it was focused, read-only or not, so a click on
+    // a read-only Select would draw the keyboard ring. Track how the user last interacted and mark
+    // a pointer focus; the ring then follows keyboard focus only, and returns on the first key.
+    this.listen(input, 'focus', () => {
+      if (this._pointerModality && /** @type {HTMLInputElement} */ (input).readOnly) {
+        root.setAttribute('data-focus-origin', 'pointer');
+      } else root.removeAttribute('data-focus-origin');
+    });
+    this.listen(input, 'blur', () => root.removeAttribute('data-focus-origin'));
+    this.listen(document, 'keydown', (event) => {
+      if (!isModifierKey(/** @type {KeyboardEvent} */ (event))) this._pointerModality = false;
+    }, { capture: true });
     this.listen(toggle, 'click', () => {
       this.focus();
       if (this._open) this.close();
@@ -222,6 +231,7 @@ export class Select extends Component {
     this.listen(panel, 'pointerdown', (event) => event.preventDefault());
     this.listen(panel, 'click', (event) => this._onOptionClick(event));
     this.listen(document, 'pointerdown', (event) => {
+      this._pointerModality = true;
       if (this._open && !root.contains(/** @type {Node} */ (event.target))) this.close();
     }, { capture: true });
 
@@ -241,6 +251,15 @@ export class Select extends Component {
     this.set(id);
   }
 
+  /**
+   * Returns the selected item ID, or null: the same as reading `value`, under the `get()`/`set()`
+   * pair the other value components share.
+   * @returns {unknown}
+   */
+  get() {
+    return this.value;
+  }
+
   /** Selected item, or null. @returns {SelectItem|null} */
   get selected() {
     return this._selected;
@@ -381,26 +400,44 @@ export class Select extends Component {
   }
 
   /**
-   * Creates the five-level priority preset.
+   * Creates the five-level priority preset: values 0 (lowest) to 4 (highest), each drawn as grey
+   * signal bars filled to its level, except the highest, which is the one coloured level — a
+   * danger square with an exclamation mark. A "No priority" row (value null, a row of dashes)
+   * heads the list and labels the empty control; `clearable: false` removes it.
    * @param {Element|string|null} target Component target.
-   * @param {SelectOptions} [options={}] Select overrides other than fixed items and renderer.
+   * @param {SelectOptions} [options={}] Select overrides other than items and renderers.
+   *   `clearable` defaults to true here; `noneLabel` and `placeholder` default to the
+   *   `priority.none` message ("No priority").
    * @returns {Select}
    */
   static priority(target, options = {}) {
     const requestedValue = options.value ?? null;
-    const select = new Select(target, {
+    const clearable = options.clearable ?? true;
+    /** @type {Select|null} */
+    let select = null;
+    // The constructor renders the list once before `select` is assigned; the label is settled by
+    // the setItems() below, which renders it again.
+    const noneLabel = () => options.noneLabel
+      ?? (select ? select._message('priority.none', 'No priority') : 'No priority');
+    select = new Select(target, {
       ...options,
+      clearable,
       value: null,
       items: [],
       renderItem(item) {
         return priorityContent(item, true);
       },
+      renderNone: options.renderNone ?? (() => priorityContent({ level: null, name: noneLabel() }, true)),
       renderValueAdornment(item) { return priorityIndicator(item.level); }
     });
+    if (clearable && !options.placeholder) {
+      /** @type {HTMLInputElement} */ (select.refs.input).placeholder = noneLabel();
+    }
+    const preset = select;
     select.setItems(PRIORITY_KEYS.map((key, level) => {
-      let name = level === 2 ? select.msg('priority.medium') : key;
-      if (name === 'priority.medium') name = select._message(key, PRIORITY_FALLBACKS[level]);
-      else if (level !== 2) name = select._message(key, PRIORITY_FALLBACKS[level]);
+      let name = level === 2 ? preset.msg('priority.medium') : key;
+      if (name === 'priority.medium') name = preset._message(key, PRIORITY_FALLBACKS[level]);
+      else if (level !== 2) name = preset._message(key, PRIORITY_FALLBACKS[level]);
       return { ID: level, name, level };
     }));
     select.set(requestedValue, { silent: true });
@@ -453,10 +490,10 @@ export class Select extends Component {
       const value = readSelectItem(item, iconKey);
       if (value && typeof value === 'object' && typeof value.nodeType === 'number') return value.cloneNode(true);
       if (typeof value !== 'string' || !value) return null;
-      const color = readSelectItem(item, colorKey);
+      const color = itemColor(readSelectItem(item, colorKey));
       return h('span', {
         class: 'zx-select__entity-glyph',
-        style: isCssColor(color) ? { '--zx-select-entity-color': String(color) } : null,
+        style: color ? { '--zx-select-entity-color': color } : null,
         ariaHidden: 'true'
       }, icon(value, { size: 14 }));
     };
@@ -992,28 +1029,26 @@ function priorityContent(item, label) {
     label ? h('span', {}, String(item.name)) : null);
 }
 
-/** @param {unknown} level @returns {Node} */
+/**
+ * The priority glyph `priorityIcon()` draws, carrying the Select's own class as well so styles
+ * written against it keep applying.
+ * @param {unknown} level Priority level 0–4, or null for none.
+ * @returns {Node}
+ */
 function priorityIndicator(level) {
-  const normalized = Math.max(0, Math.min(4, Math.trunc(Number(level) || 0)));
-  return h('span', {
-    class: 'zx-select__priority-icon',
-    dataset: { level: normalized },
-    ariaHidden: 'true'
-  }, Array.from({ length: 5 }, (_, index) => h('span', {
-    dataset: { filled: String(index <= normalized) }
-  })));
+  const glyph = priorityIcon(/** @type {number|null} */ (normalizePriorityLevel(level)));
+  glyph.classList.add('zx-select__priority-icon');
+  return glyph;
 }
 
 /** @param {unknown} input @returns {Record<string, any>|null} */
 function normalizeStatusItem(input) {
   if (!input || typeof input !== 'object' || input.ID == null || input.name == null) return null;
-  const indicators = ['dotted', 'ring', 'progress', 'review', 'ready', 'waiting', 'done', 'canceled', 'duplicate'];
-  const tones = ['muted', 'neutral', 'warning', 'info', 'accent', 'success', 'danger'];
   return {
     ...input,
     name: String(input.name),
-    indicator: indicators.includes(String(input.indicator)) ? String(input.indicator) : 'ring',
-    tone: tones.includes(String(input.tone)) ? String(input.tone) : 'muted',
+    indicator: STATUS_INDICATORS.includes(String(input.indicator)) ? String(input.indicator) : 'ring',
+    tone: STATUS_TONES.includes(String(input.tone)) ? String(input.tone) : 'muted',
     description: input.description == null ? '' : String(input.description),
     shortcut: input.shortcut == null ? '' : String(input.shortcut)
   };
@@ -1029,17 +1064,16 @@ function statusContent(item) {
     item.shortcut ? h('kbd', { class: 'zx-select__status-shortcut' }, item.shortcut) : null);
 }
 
-/** @param {Record<string, any>} item @returns {Node} */
+/**
+ * The status glyph `statusIcon()` draws for a settled status item, carrying the Select's own class
+ * as well so styles written against it keep applying.
+ * @param {Record<string, any>} item Normalized status item.
+ * @returns {Node}
+ */
 function statusIndicator(item) {
-  const indicator = String(item.indicator ?? 'ring');
-  const marker = h('span', {
-    class: 'zx-select__status-indicator',
-    dataset: { indicator, tone: String(item.tone ?? 'muted') },
-    ariaHidden: 'true'
-  });
-  if (indicator === 'done') marker.append(icon('check', { size: 8 }));
-  if (indicator === 'canceled') marker.append(icon('x', { size: 7 }));
-  return marker;
+  const glyph = statusIcon({ indicator: item.indicator ?? 'ring', tone: item.tone ?? 'muted' });
+  glyph.classList.add('zx-select__status-indicator');
+  return glyph;
 }
 
 /** Change emitted when the selected value changes. @event Select#change @type {CustomEvent<SelectChangeDetail>} */
@@ -1061,6 +1095,17 @@ function readItem(item, reader) {
   return item[reader];
 }
 
+/**
+ * Reports a key press that says nothing about how the user is moving focus: a lone modifier, or a
+ * shortcut chord the page or the browser handles.
+ * @param {KeyboardEvent} event Key event.
+ * @returns {boolean}
+ */
+function isModifierKey(event) {
+  return ['Shift', 'Control', 'Alt', 'Meta', 'CapsLock'].includes(event.key)
+    || event.ctrlKey || event.metaKey;
+}
+
 /** @param {KeyboardEvent} event @returns {boolean} */
 function isPrintable(event) {
   return event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;

package/src/components/sheet/sheet.css

@@ -57,8 +57,8 @@
   inset-block-start: 0;
   inset-block-end: auto;
   border-block-end: 1px solid var(--zx-color-overlay-border);
-  border-end-start-radius: var(--zx-sheet-radius, var(--zx-radius-xl));
-  border-end-end-radius: var(--zx-sheet-radius, var(--zx-radius-xl));
+  border-end-start-radius: var(--zx-sheet-radius, var(--zx-radius-lg));
+  border-end-end-radius: var(--zx-sheet-radius, var(--zx-radius-lg));
   --zx-sheet-enter: 0 -100%;
 }
 
@@ -66,8 +66,8 @@
   inset-block-start: auto;
   inset-block-end: 0;
   border-block-start: 1px solid var(--zx-color-overlay-border);
-  border-start-start-radius: var(--zx-sheet-radius, var(--zx-radius-xl));
-  border-start-end-radius: var(--zx-sheet-radius, var(--zx-radius-xl));
+  border-start-start-radius: var(--zx-sheet-radius, var(--zx-radius-lg));
+  border-start-end-radius: var(--zx-sheet-radius, var(--zx-radius-lg));
   --zx-sheet-enter: 0 100%;
 }
 
@@ -105,11 +105,14 @@
  * `display: none` immediately — so `display` and `overlay` transition with `allow-discrete`, which
  * defers the discrete jump until the rest of the transition has finished. `@starting-style` gives
  * the entry its from-state. Where either is unsupported the sheet simply appears and disappears.
+ *
+ * The slide runs on the drawer curve — most of the distance at once, then a settle — while the
+ * fade keeps the ordinary ease, so the panel arrives decisively without flashing in.
  */
 @media (prefers-reduced-motion: no-preference) {
   .zx-sheet {
     transition:
-      translate var(--zx-dur-base) var(--zx-ease),
+      translate var(--zx-dur-base) var(--zx-ease-drawer),
       opacity var(--zx-dur-base) var(--zx-ease),
       display var(--zx-dur-base) allow-discrete,
       overlay var(--zx-dur-base) allow-discrete;
@@ -193,7 +196,7 @@
 @media (prefers-reduced-motion: no-preference) {
   .zx-sheet[data-docked] {
     transition:
-      flex-basis var(--zx-dur-base) var(--zx-ease),
+      flex-basis var(--zx-dur-base) var(--zx-ease-drawer),
       opacity var(--zx-dur-base) var(--zx-ease),
       display var(--zx-dur-base) allow-discrete,
       overlay var(--zx-dur-base) allow-discrete;
@@ -246,7 +249,7 @@
 }
 
 .zx-sheet__handle:focus-visible {
-  outline: none;
+  outline-color: transparent;
   box-shadow: var(--zx-focus-ring);
 }
 
@@ -363,8 +366,8 @@
 @media (prefers-reduced-motion: no-preference) {
   .zx-sheet[data-stack] {
     transition:
-      transform var(--zx-dur-base) var(--zx-ease),
-      translate var(--zx-dur-base) var(--zx-ease),
+      transform var(--zx-dur-base) var(--zx-ease-drawer),
+      translate var(--zx-dur-base) var(--zx-ease-drawer),
       opacity var(--zx-dur-base) var(--zx-ease),
       display var(--zx-dur-base) allow-discrete,
       overlay var(--zx-dur-base) allow-discrete;