@threadlabs/looma 0.17.4 → 0.18.0

package/components/ui-avatar/ui-avatar.html

@@ -18,8 +18,8 @@
     <prop name="shape" type="circle | square" default="circle">Circle by default; square uses the theme's medium radius.</prop>
     <prop name="decorative" type="boolean" default="false">Hides the avatar from assistive technology when adjacent text already identifies the person.</prop>
     <prop name="active" type="boolean" default="false"
-    >Marks the person as active now, such as editing the same page: a ring in the success colour around the avatar. The ring is not announced, so say what it
-      means in alt ("Ada Lovelace, editing").</prop>
+    >Marks the person as active now, such as editing the same page: a fine accent ring around the avatar. The ring is not announced, so say what it means in alt
+      ("Ada Lovelace, editing").</prop>
     <state name="hasImage" :value="false"></state>
     <state name="hasAuthoredImage" :value="false"></state>
     <state name="initials" :value="'?'"></state>
@@ -64,7 +64,7 @@
       inline-size: 2.5rem;
       block-size: 2.5rem;
       border-radius: var(--ui-avatar-radius, var(--ui-radius-round));
-      border: 1px solid var(--ui-avatar-border, var(--ui-border-strong));
+      border: 1px solid var(--ui-avatar-border, color-mix(in srgb, var(--ui-accent-solid) 35%, var(--ui-surface-default)));
       background: var(--ui-avatar-surface, var(--ui-accent-soft));
       color: var(--ui-avatar-text, var(--ui-accent-subtle-text, var(--ui-accent-solid)));
       font: inherit;
@@ -80,6 +80,10 @@
       font-size: var(--ui-font-size-xs);
     }
 
+    :host-state([hasImage]) {
+      border-color: var(--ui-avatar-border, var(--ui-border-strong));
+    }
+
     :host-state([shape="square"]) {
       border-radius: var(--ui-avatar-radius, var(--ui-radius-md));
     }
@@ -87,7 +91,7 @@
     /* An outline, not a dot: the avatar clips its content to the circle, and an outline is drawn
        outside the box, so the ring survives the clip and the overlap in an Avatar Group. */
     :host-state([active]) {
-      outline: 2px solid var(--ui-avatar-active-ring, var(--ui-success));
+      outline: 1px solid var(--ui-avatar-active-ring, var(--ui-accent-solid));
       outline-offset: 1px;
     }
 

package/components/ui-badge/ui-badge.html

@@ -59,7 +59,7 @@
     }
 
     :host {
-      --_badge-surface: var(--ui-surface-subtle);
+      --_badge-surface: color-mix(in srgb, var(--ui-surface-subtle) 80%, var(--ui-surface-default));
       --_badge-text: var(--ui-text-secondary);
       /* Sit between the soft fill and its stronger theme ink. */
       --_badge-border: color-mix(in srgb, var(--_badge-surface) 75%, var(--_badge-text) 25%);
@@ -67,7 +67,7 @@
          surface, text, and border hooks. Each value is invalid, so the tone shows, while it is unset. The
          mixes keep 4.5:1 text contrast for any colour, in a light theme or a dark one. */
       --_ui-badge-color: var(--ui-badge-color);
-      --_badge-color-wash: color-mix(in oklab, var(--_ui-badge-color) 15%, var(--ui-surface-default));
+      --_badge-color-wash: color-mix(in oklab, var(--_ui-badge-color) 13%, var(--ui-surface-default));
       --_badge-color-ink: color-mix(in oklab, var(--_ui-badge-color) 35%, var(--ui-text-primary));
       --_badge-color-surface: var(--_badge-color-wash);
       --_badge-color-border: color-mix(in srgb, var(--_badge-color-wash) 75%, var(--_badge-color-ink) 25%);
@@ -135,32 +135,32 @@
     }
 
     :host-state([variant="subtle"][tone="accent"]) {
-      --_badge-surface: color-mix(in srgb, var(--ui-accent-solid) 22%, var(--ui-surface-default));
-      --_badge-border: color-mix(in srgb, var(--ui-accent-solid) 28%, var(--ui-surface-default));
+      --_badge-surface: color-mix(in srgb, var(--ui-accent-solid) 19%, var(--ui-surface-default));
+      --_badge-border: color-mix(in srgb, var(--ui-accent-solid) 25%, var(--ui-surface-default));
       --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
     }
 
     :host-state([variant="subtle"][tone="danger"]) {
-      --_badge-surface: color-mix(in srgb, var(--ui-danger-solid) 22%, var(--ui-surface-default));
-      --_badge-border: color-mix(in srgb, var(--ui-danger-solid) 28%, var(--ui-surface-default));
+      --_badge-surface: color-mix(in srgb, var(--ui-danger-solid) 19%, var(--ui-surface-default));
+      --_badge-border: color-mix(in srgb, var(--ui-danger-solid) 25%, var(--ui-surface-default));
       --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
     }
 
     :host-state([variant="subtle"][tone="success"]) {
-      --_badge-surface: color-mix(in srgb, var(--ui-success-solid) 22%, var(--ui-surface-default));
-      --_badge-border: color-mix(in srgb, var(--ui-success-solid) 28%, var(--ui-surface-default));
+      --_badge-surface: color-mix(in srgb, var(--ui-success-solid) 19%, var(--ui-surface-default));
+      --_badge-border: color-mix(in srgb, var(--ui-success-solid) 25%, var(--ui-surface-default));
       --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
     }
 
     :host-state([variant="subtle"][tone="warning"]) {
-      --_badge-surface: color-mix(in srgb, var(--ui-warning-solid) 22%, var(--ui-surface-default));
-      --_badge-border: color-mix(in srgb, var(--ui-warning-solid) 28%, var(--ui-surface-default));
+      --_badge-surface: color-mix(in srgb, var(--ui-warning-solid) 19%, var(--ui-surface-default));
+      --_badge-border: color-mix(in srgb, var(--ui-warning-solid) 25%, var(--ui-surface-default));
       --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
     }
 
     :host-state([variant="subtle"][tone="info"]) {
-      --_badge-surface: color-mix(in srgb, var(--ui-info-solid) 22%, var(--ui-surface-default));
-      --_badge-border: color-mix(in srgb, var(--ui-info-solid) 28%, var(--ui-surface-default));
+      --_badge-surface: color-mix(in srgb, var(--ui-info-solid) 19%, var(--ui-surface-default));
+      --_badge-border: color-mix(in srgb, var(--ui-info-solid) 25%, var(--ui-surface-default));
       --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
     }
 
@@ -206,54 +206,48 @@
       --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
     }
 
-    /* A tag is flat at the start and points at the end. The point is cut from the box, so it has no
-       outline to follow: the edge is the fill. The end padding grows by the point's depth so the
-       label never runs into it. */
+    /* The clipped point needs an inset surface over an outer border-colour shape: a native border
+       has no diagonal edge to follow. Keep this edge for every tag variant. */
     :host-state([shape="tag"]) {
       --_badge-point: var(--ui-badge-point, var(--ui-space-2));
 
+      position: relative;
+      isolation: isolate;
       border-color: transparent;
       border-radius: 0;
+      background: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
       padding-inline-end: calc(var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point));
       clip-path: polygon(0 0, calc(100% - var(--_badge-point)) 0, 100% 50%, calc(100% - var(--_badge-point)) 100%, 0 100%);
     }
 
-    :host-state([shape="tag"]):dir(rtl) {
-      padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
-      padding-inline-start: calc(var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point));
-      clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
-    }
-
-    /* The tag clips its point, including the native border. Draw the outer shape in the border
-       colour and an inset inner shape in the surface colour to keep a visible diagonal edge. */
-    :host-state([variant="outline"][shape="tag"]) {
-      position: relative;
-      isolation: isolate;
-      background: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
-    }
-
-    :host-state([variant="outline"][shape="tag"])::before {
+    :host-state([shape="tag"])::before {
       content: "";
       position: absolute;
-      inset: 1px;
+      inset: 0;
       z-index: -1;
       background: var(--_badge-outline-surface);
       clip-path: polygon(0 0, calc(100% - var(--_badge-point)) 0, 100% 50%, calc(100% - var(--_badge-point)) 100%, 0 100%);
       pointer-events: none;
     }
 
-    :host-state([variant="outline"][shape="tag"]):dir(rtl)::before {
+    :host-state([shape="tag"]):dir(rtl) {
+      padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
+      padding-inline-start: calc(var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point));
+      clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
+    }
+
+    :host-state([shape="tag"]):dir(rtl)::before {
       clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
     }
 
     @media (forced-colors: active) {
-      :host-state([variant="outline"][shape="tag"]) {
+      :host-state([shape="tag"]) {
         forced-color-adjust: none;
         background: CanvasText;
         color: CanvasText;
       }
 
-      :host-state([variant="outline"][shape="tag"])::before {
+      :host-state([shape="tag"])::before {
         background: Canvas;
       }
     }

package/components/ui-combobox/ui-combobox.html

@@ -244,6 +244,8 @@
             class="option"
             class:active="row.index = active"
             role="option"
+            data-ui-choice-option
+            :data-multiple="multiple"
             :id="format('%s-option-%s', uid, row.index)"
             :aria-selected="row.selected"
             :aria-disabled="row.disabled"
@@ -271,6 +273,8 @@
           class="option"
           class:active="createIndex = active"
           role="option"
+          data-ui-choice-option
+          :data-multiple="multiple"
           aria-selected="false"
           :id="format('%s-option-%s', uid, createIndex)"
           :data-index="createIndex"
@@ -543,21 +547,6 @@
     [hidden] {
       display: none;
     }
-    .option {
-      padding: var(--ui-space-2) var(--ui-space-3);
-      border-radius: var(--ui-radius-sm);
-      cursor: pointer;
-      overflow-wrap: anywhere;
-    }
-    .option:hover, .option.active {
-      background: var(--ui-surface-muted);
-      outline: 1px solid var(--ui-focus-ring);
-      outline-offset: -1px;
-    }
-    .option[aria-disabled="true"] {
-      color: var(--ui-disabled-text);
-      cursor: not-allowed;
-    }
     .option[aria-disabled="true"] .primary,
     .option[aria-disabled="true"] .secondary {
       color: var(--ui-disabled-text);
@@ -625,39 +614,6 @@
       }
     }
 
-    /* Multiple mode: every option carries a checkbox, so a list that takes several answers says so
-       before anything is picked. aria-selected is the state; this draws it.
-       Longhands, not shorthands: lowering drops a shorthand that omits a component. */
-    :host-state([multiple]) .option {
-      display: flex;
-      gap: var(--ui-space-2);
-      align-items: center;
-    }
-
-    :host-state([multiple]) .option::before {
-      content: "";
-      flex: none;
-      inline-size: 1.125rem;
-      block-size: 1.125rem;
-      border-style: solid;
-      border-width: 1px;
-      border-color: var(--ui-control-border-hover, var(--ui-border-strong));
-      border-radius: var(--ui-radius-sm);
-      background-color: var(--ui-control-surface, var(--ui-surface-default));
-      background-repeat: no-repeat;
-      background-position: center;
-      background-size: 0.7rem;
-    }
-
-    :host-state([multiple]) .option[aria-selected="true"]::before {
-      border-color: var(--ui-accent-solid);
-      background-color: var(--ui-accent-solid);
-      background-image: var(
-        --_ui-combobox-option-check,
-        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-9'/%3E%3C/svg%3E")
-      );
-    }
-
     /* Multiple mode keeps one control height. Chips and the input scroll within the entry,
        while the clear and disclosure controls remain fixed at the end of the field. */
     :host-state([multiple]) .field {

package/components/ui-input/ui-input.html

@@ -127,7 +127,7 @@
       opacity: 1;
     }
 
-    :host:hover:not(:focus):not(:disabled) {
+    :host:hover:not(:focus):not(:disabled):not(:read-only):not([aria-invalid="true"]):not(:user-invalid) {
       border-color: var(--ui-input-border-hover, var(--_ui-default-input-border-hover, var(--ui-control-border-hover, var(--ui-text-secondary))));
     }
 

package/components/ui-input-group/ui-input-group.html

@@ -77,7 +77,7 @@
       }
     }
 
-    :host:hover:not(:has(input:focus, input:disabled)) {
+    :host:hover:not(:has(input:focus, input:disabled, input:read-only, [aria-invalid="true"], :user-invalid)) {
       border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
     }
 

package/components/ui-listbox/ui-listbox.html

@@ -1,14 +1,65 @@
+<link rel="component" href="../ui-scroll-area/ui-scroll-area.html">
 <template component="ui-listbox" controller="./ui-listbox.js">
   <defs>
-    <prop name="rows" type="number" default="5">The number of option rows visible at once. Use at least two.</prop>
-    <prop name="multiple" type="boolean" default="false">Allows several options to be selected with native keyboard and pointer behavior.</prop>
+    <prop name="rows" type="number" default="5">The maximum number of choices visible before the list scrolls. Use at least two.</prop>
+    <prop name="multiple" type="boolean" default="false">Allows several choices, each shown with a checkmark when selected.</prop>
+    <prop name="name" type="string" default="">The form field name used for each selected value.</prop>
     <prop name="value" type="string">The initial or externally set single selection. Authored selected options work when it is omitted.</prop>
     <prop name="values" type="list(string)">The initial or externally set selections in multiple mode. Authored selected options work when it is omitted.</prop>
     <prop name="disabled" type="boolean" default="false">Prevents selection and form submission.</prop>
-    <prop name="required" type="boolean" default="false">Requires at least one selection for form validation.</prop>
+    <prop name="required" type="boolean" default="false">Requires at least one choice before form submission.</prop>
     <prop name="invalid" type="boolean" default="false">Exposes invalid state to assistive technology and styling.</prop>
+    <state name="choices" type="list(object({ value: string, label: string, disabled: boolean, selected: boolean, index: integer }))" :value="[]"></state>
+    <state name="selection" type="list(string)" :value="[]"></state>
+    <state name="hasSelection" type="boolean" :value="false"></state>
+    <state name="active" type="integer" :value="-1"></state>
+    <state name="uid" type="string" :value="''"></state>
+    <state name="validationError" type="boolean" :value="false"></state>
+    <event name="change" type="object({ value: string | null, values: list(string), trigger: keyboard | pointer })"></event>
   </defs>
-  <select :size="rows" :multiple="multiple" :disabled="disabled" :required="required" :aria-invalid="invalid"><slot></slot></select>
+  <div
+    role="listbox"
+    :tabindex="{ true: '-1', false: '0' }[format('%s', disabled)]"
+    :aria-multiselectable="multiple"
+    :aria-disabled="disabled"
+    :aria-required="required"
+    :aria-invalid="invalid or validationError"
+    style:--_rows="rows"
+  >
+    <ui-scroll-area class="choices" $ref="choices">
+      <div
+        $each="choice of choices"
+        $key="choice.index"
+        class="option"
+        class:active="choice.index = active"
+        role="option"
+        data-ui-choice-option
+        :data-multiple="multiple"
+        :id="format('%s-option-%s', uid, choice.index)"
+        :data-index="choice.index"
+        :aria-selected="choice.selected"
+        :aria-disabled="choice.disabled"
+      >
+        <span $value="choice.label"></span>
+      </div>
+    </ui-scroll-area>
+    <select class="fallback" $ref="options" :size="rows" :multiple="multiple" :disabled="disabled" :required="required" :name="name" aria-label="Choices">
+      <slot></slot>
+    </select>
+    <template $if="name and not disabled">
+      <input $each="selected of selection" type="hidden" :name="name" :value="selected">
+    </template>
+    <input
+      class="validity"
+      $ref="validity"
+      type="checkbox"
+      :required="required and not hasSelection and not disabled"
+      :checked="hasSelection"
+      :disabled="disabled"
+      aria-hidden="true"
+      tabindex="-1"
+    >
+  </div>
   <style>
     @property --ui-listbox-radius {
       syntax: "*";
@@ -32,29 +83,55 @@
     }
 
     :host {
+      position: relative;
       box-sizing: border-box;
       display: block;
       inline-size: 100%;
       min-inline-size: 0;
-      min-block-size: var(--ui-control-min-block-size);
       margin: 0;
       padding: var(--ui-space-1);
       border: 1px solid var(--ui-listbox-border, var(--ui-control-border));
       border-radius: var(--ui-listbox-radius, var(--ui-field-radius, var(--ui-radius-md)));
       background: var(--ui-listbox-surface, var(--ui-control-surface));
       color: var(--ui-text-primary);
-      color-scheme: light dark;
       font: inherit;
       line-height: var(--ui-line-height-md);
       box-shadow: var(--ui-control-inset);
+      outline: none;
     }
 
-    :host option,
-    :host optgroup {
-      padding: var(--ui-space-2);
+    .choices {
+      max-block-size: calc(max(2, var(--_rows, 5)) * var(--ui-control-size-md));
+    }
+
+    :host:not([data-enhanced]) {
+      padding: 0;
+      border: 0;
+      background: transparent;
+      box-shadow: none;
+    }
+
+    :host:not([data-enhanced]) .choices,
+    :host[data-enhanced] .fallback {
+      display: none;
+    }
+
+    .fallback {
+      box-sizing: border-box;
+      inline-size: 100%;
       font: inherit;
     }
 
+    .validity {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      opacity: 0;
+      pointer-events: none;
+    }
+
     :host:focus-visible {
       border-color: var(--ui-control-focus);
       outline: 2px solid var(--ui-focus-ring);
@@ -62,12 +139,11 @@
       box-shadow: var(--ui-listbox-focus-shadow, var(--ui-focus-halo));
     }
 
-    :host[aria-invalid="true"],
-    :host:user-invalid {
+    :host[aria-invalid="true"] {
       border-color: var(--ui-listbox-invalid-border, var(--ui-field-danger, var(--ui-danger)));
     }
 
-    :host:disabled {
+    :host[aria-disabled="true"] {
       background: var(--ui-control-surface-disabled);
       color: var(--ui-disabled-text);
       box-shadow: none;

package/components/ui-listbox/ui-listbox.js

@@ -1,27 +1,171 @@
-// Keep externally supplied selections in sync when options arrive after the listbox upgrades.
-// Without value or values, the native select owns selection, keyboard behavior, and form reset.
+let nextId = 0;
+
+const same = (left, right) => JSON.stringify(left) === JSON.stringify(right);
+
+// Authored options remain the source of labels, order, disabled state, and default selections.
+function readOptions(container) {
+  return Array.from(container.querySelectorAll("option"), (option, index) => ({
+    value: option.value,
+    label: option.label || option.textContent?.trim() || option.value,
+    disabled: option.disabled || Boolean(option.closest("optgroup[disabled]")),
+    selected: option.hasAttribute("selected"),
+    index,
+  }));
+}
+
 export default function controller(host) {
-  const select = host.element;
-  const apply = () => {
+  const element = host.element;
+  const { options: authored, validity } = host.refs;
+  const form = element.closest("form");
+  host.state.uid = `ui-listbox-${++nextId}`;
+  if (element.id && !element.hasAttribute("aria-label") && !element.hasAttribute("aria-labelledby")) {
+    const label = Array.from(element.ownerDocument.querySelectorAll("label[for]")).find((candidate) => candidate.htmlFor === element.id);
+    if (label) {
+      label.id ||= `${host.state.uid}-label`;
+      element.setAttribute("aria-labelledby", label.id);
+    }
+  }
+  let options = [];
+  let initial = [];
+  let initialized = false;
+  let external = "";
+  let typeahead = "";
+  let typeaheadTimer;
+
+  const selected = () => Array.isArray(host.state.selection) ? host.state.selection : [];
+  const externallySelected = () => host.state.multiple
+    ? (Array.isArray(host.state.values) ? Array.from(new Set(host.state.values.map(String))) : null)
+    : (host.state.value === undefined || host.state.value === null ? null : [String(host.state.value)]);
+  const defaultSelection = () => externallySelected()
+    ?? options.filter((option) => option.selected).map((option) => option.value).slice(0, host.state.multiple ? undefined : 1);
+  const enabledIndices = () => options.filter((option) => !option.disabled).map((option) => option.index);
+  const render = () => {
+    const set = new Set(selected());
+    const rows = options.map((option) => ({
+      value: option.value,
+      label: option.label,
+      disabled: option.disabled,
+      selected: set.has(option.value),
+      index: option.index,
+    }));
+    if (!same(host.state.choices, rows)) host.state.choices = rows;
+    const active = host.state.active;
+    if (active < 0 || !options[active] || options[active].disabled) element.removeAttribute("aria-activedescendant");
+    else element.setAttribute("aria-activedescendant", `${host.state.uid}-option-${active}`);
+  };
+  const setSelection = (values, trigger) => {
+    const next = Array.from(new Set(values.map(String)));
+    if (same(selected(), next)) return;
+    host.state.selection = next;
+    host.state.hasSelection = next.some((value) => value !== "");
+    host.state.validationError = false;
+    render();
+    if (trigger) host.dispatch("change", { value: next[0] ?? null, values: next, trigger });
+  };
+  const syncOptions = () => {
+    const next = readOptions(authored);
+    if (same(options, next) && initialized) return;
+    const hadOptions = options.length > 0;
+    options = next;
+    if (!initialized || (!hadOptions && options.length && !selected().length)) {
+      initial = defaultSelection();
+      host.state.selection = initial;
+      host.state.hasSelection = initial.some((value) => value !== "");
+      initialized = true;
+    }
+    render();
+  };
+  const activate = (index) => {
+    if (index < 0 || options[index]?.disabled || !options[index]) return;
+    host.state.active = index;
+    render();
+    element.querySelector(`[data-index="${index}"]`)?.scrollIntoView({ block: "nearest" });
+  };
+  const choose = (index, trigger) => {
+    const option = options[index];
+    if (!option || option.disabled || host.state.disabled) return;
+    activate(index);
     if (host.state.multiple) {
-      if (host.state.values === undefined || host.state.values === null) return;
-      const values = new Set(host.state.values.map(String));
-      for (const option of select.options) {
-        option.defaultSelected = values.has(option.value);
-        option.selected = values.has(option.value);
+      const current = selected();
+      setSelection(current.includes(option.value)
+        ? current.filter((value) => value !== option.value)
+        : options.filter((candidate) => current.includes(candidate.value) || candidate.value === option.value).map((candidate) => candidate.value), trigger);
+    } else setSelection([option.value], trigger);
+  };
+  const move = (key) => {
+    const indices = enabledIndices();
+    if (!indices.length) return;
+    const current = indices.indexOf(host.state.active);
+    const next = key === "Home" ? indices[0]
+      : key === "End" ? indices[indices.length - 1]
+        : key === "ArrowDown" ? indices[(current + 1) % indices.length]
+          : indices[(current <= 0 ? indices.length : current) - 1];
+    activate(next);
+    if (!host.state.multiple) choose(next, "keyboard");
+  };
+  const onClick = (event) => {
+    if (host.state.disabled) return;
+    const row = event.target.closest("[data-index]");
+    if (!row || !element.contains(row)) return;
+    element.focus();
+    choose(Number(row.dataset.index), "pointer");
+  };
+  const onKeydown = (event) => {
+    if (host.state.disabled || event.altKey || event.metaKey || event.ctrlKey) return;
+    if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+      event.preventDefault();
+      move(event.key);
+    } else if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      choose(host.state.active >= 0 ? host.state.active : enabledIndices()[0], "keyboard");
+    } else if (event.key.length === 1 && !event.shiftKey) {
+      typeahead += event.key.toLocaleLowerCase();
+      clearTimeout(typeaheadTimer);
+      typeaheadTimer = setTimeout(() => { typeahead = ""; }, 700);
+      const match = options.find((option) => !option.disabled && option.label.toLocaleLowerCase().startsWith(typeahead));
+      if (match) {
+        activate(match.index);
+        if (!host.state.multiple) choose(match.index, "keyboard");
       }
-      return;
     }
-    if (host.state.value === undefined || host.state.value === null) return;
-    const value = String(host.state.value);
-    for (const option of select.options) option.defaultSelected = option.value === value;
-    if (select.value !== value) select.value = value;
-  };
-  const observer = new MutationObserver(apply);
-  observer.observe(select, { childList: true, subtree: true });
-  const stop = host.effect(apply);
+  };
+  const onReset = () => queueMicrotask(() => {
+    setSelection(initial);
+    host.state.validationError = false;
+  });
+  const onInvalid = (event) => {
+    event.preventDefault();
+    host.state.validationError = true;
+    requestAnimationFrame(() => element.focus());
+  };
+
+  const observer = new MutationObserver(syncOptions);
+  observer.observe(authored, { childList: true, subtree: true, attributes: true, attributeFilter: ["selected", "disabled", "value", "label"] });
+  syncOptions();
+  authored.disabled = true;
+  element.setAttribute("data-enhanced", "");
+  const stop = host.effect(() => {
+    const signature = JSON.stringify([host.state.multiple, host.state.value, host.state.values]);
+    if (signature !== external) {
+      external = signature;
+      initial = defaultSelection();
+      setSelection(initial);
+    }
+    render();
+  });
+  element.addEventListener("click", onClick);
+  element.addEventListener("keydown", onKeydown);
+  form?.addEventListener("reset", onReset);
+  validity.addEventListener("invalid", onInvalid);
   return () => {
     stop();
     observer.disconnect();
+    authored.disabled = host.state.disabled;
+    element.removeAttribute("data-enhanced");
+    clearTimeout(typeaheadTimer);
+    element.removeEventListener("click", onClick);
+    element.removeEventListener("keydown", onKeydown);
+    form?.removeEventListener("reset", onReset);
+    validity.removeEventListener("invalid", onInvalid);
   };
 }

package/components/ui-select/ui-select.html

@@ -92,7 +92,7 @@
       background-size: 1.125rem 1.125rem;
     }
 
-    :host:hover:not(:focus):not(:disabled) {
+    :host:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(:user-invalid) {
       border-color: var(--ui-select-border-hover, var(--ui-control-border-hover, var(--ui-text-secondary)));
     }