@threadlabs/looma 0.17.3 → 0.18.0

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-search-result-row/ui-search-result-row.html

@@ -61,18 +61,14 @@
       align-items: flex-start;
       gap: var(--ui-search-result-row-gap, var(--ui-space-3));
       background: var(--ui-search-result-row-surface, transparent);
-      border: none;
-      border-block-end: 1px solid var(--ui-search-result-row-border, var(--ui-border-divider));
+      border: 1px solid var(--ui-search-result-row-border, transparent);
+      border-radius: var(--ui-radius-md);
       color: inherit;
       cursor: pointer;
       text-align: left;
       transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
-    :host:last-child {
-      border-block-end: none;
-    }
-
     :host:hover:enabled {
       background: var(--ui-search-result-row-hover-surface, color-mix(in srgb, var(--ui-surface) 85%, black 3%));
     }

package/components/ui-search-shell/ui-search-shell.html

@@ -117,14 +117,6 @@
 
     .search {
       padding: var(--ui-space-3);
-      border-block-end: 1px solid var(--ui-border-divider);
-      transition: border-color var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
-    }
-
-    /* The search region shows where typing goes, whatever the author put in it. */
-    .search:focus-within {
-      border-block-end-color: var(--_ui-search-shell-focus-color, var(--ui-control-focus));
-      box-shadow: inset 0 -1px 0 var(--_ui-search-shell-focus-color, var(--ui-control-focus));
     }
 
     :slotted(input[slot="search"]) {
@@ -141,7 +133,7 @@
     }
 
     :slotted(input[slot="search"]:focus-visible) {
-      border-color: var(--ui-control-focus);
+      border-color: var(--_ui-search-shell-focus-color, var(--ui-control-focus));
       outline: 2px solid var(--ui-focus-ring);
       outline-offset: 2px;
     }
@@ -155,7 +147,7 @@
     }
 
     .status {
-      border-block-end: 1px solid var(--ui-border-divider);
+      padding-block-start: 0;
     }
 
     /* Laid out like the dialog's action row: actions right-aligned, spaced as buttons, no fill. */
@@ -166,7 +158,6 @@
       justify-content: flex-end;
       gap: var(--ui-space-2);
       padding: var(--ui-space-3) var(--ui-space-4);
-      border-block-start: 1px solid var(--ui-border-divider);
     }
 
     .status:empty,

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)));
     }
 

package/components/ui-spinner/ui-spinner.html

@@ -9,16 +9,22 @@
     class="ring"
     :role="{ true: 'status', false: null }[format('%s', label != '')]"
     :aria-label="{ true: label, false: null }[format('%s', label != '')]"
+    :aria-live="{ true: 'polite', false: null }[format('%s', label != '')]"
     :aria-hidden="{ true: null, false: 'true' }[format('%s', label != '')]"
-  ></span>
+  >
+    <svg viewBox="0 0 50 50" fill="none" aria-hidden="true" focusable="false">
+      <circle class="track" cx="25" cy="25" r="20"></circle>
+      <circle class="arc" cx="25" cy="25" r="20"></circle>
+    </svg>
+  </span>
   <style>
-    /* Something is on its way. The ring chases in the current text colour; with reduced motion it holds still,
-       and the label (or the text beside it) still says what is happening. */
+    /* A rounded SVG arc grows and recedes over a quiet full-circle track. */
     :host {
       display: inline-flex;
       flex: none;
       align-items: center;
       justify-content: center;
+      box-sizing: border-box;
       inline-size: 1em;
       block-size: 1em;
       color: currentColor;
@@ -26,36 +32,57 @@
       line-height: 1;
     }
 
-    .ring {
+    :host-state([size="sm"]) {
+      font-size: var(--ui-font-size-md);
+    }
+
+    svg {
       display: block;
-      box-sizing: border-box;
       inline-size: 100%;
       block-size: 100%;
-      border: 2px solid transparent;
-      border-block-start-color: currentColor;
-      border-inline-end-color: color-mix(in srgb, currentColor 52%, transparent);
-      border-radius: 50%;
-      animation: ui-spinner-chase 1s linear infinite;
+      animation: ui-spinner-rotate 2s linear infinite;
     }
 
-    :host-state([size="sm"]) {
-      font-size: var(--ui-font-size-md);
+    circle {
+      stroke-width: 3;
+      stroke-linecap: round;
+    }
+
+    .track {
+      stroke: color-mix(in srgb, currentColor 16%, transparent);
+    }
+
+    .arc {
+      stroke: currentColor;
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: 0;
+      animation: ui-spinner-dash 1.5s ease-in-out infinite;
     }
 
-    @keyframes ui-spinner-chase {
+    @keyframes ui-spinner-rotate {
+      100% {
+        transform: rotate(1turn);
+      }
+    }
+
+    @keyframes ui-spinner-dash {
       0% {
-        transform: rotate(0);
+        stroke-dasharray: 1, 150;
+        stroke-dashoffset: 0;
       }
-      70% {
-        transform: rotate(160deg);
+      50% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -35;
       }
       100% {
-        transform: rotate(1turn);
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -124;
       }
     }
 
     @media (prefers-reduced-motion: reduce) {
-      .ring {
+      svg,
+      .arc {
         animation: none;
       }
     }

package/components/ui-textarea/ui-textarea.html

@@ -74,7 +74,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-control-border-hover, var(--ui-text-secondary));
     }
 

package/components/ui-tooltip/ui-tooltip.html

@@ -172,14 +172,14 @@
       inset-inline-start: auto;
       inset-inline-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
       border-inline-end-width: 1px;
-      border-block-end-width: 1px;
+      border-block-start-width: 1px;
     }
 
     :host[data-ui-actual-placement="right"] .surface::after {
       inset-inline-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
       inset-inline-end: auto;
       border-inline-start-width: 1px;
-      border-block-start-width: 1px;
+      border-block-end-width: 1px;
     }
 
     :host[data-ui-actual-placement="left"][data-ui-actual-align="start"] .surface::after,