@threadlabs/looma 0.12.0 → 0.12.2

package/components/ui-form-field/ui-form-field.js

@@ -23,8 +23,9 @@ export default function controller(host) {
   const wire = () => {
     const label = element.querySelector('[slot="label"], label');
     const input = element.querySelector("input, textarea, select");
-    const help = element.querySelector('[slot="help"]');
-    const error = element.querySelector('[slot="error"], [role="alert"]');
+    // A Vue named slot carries no slot attribute, so the help and error regions are read too.
+    const help = element.querySelector(':scope > .help > *, [slot="help"]');
+    const error = element.querySelector(':scope > .error > *, [slot="error"], [role="alert"]');
     if (input !== activeInput) {
       removeOwned(activeInput);
       activeInput = input;

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

@@ -15,11 +15,11 @@
       display: inline-block;
       inline-size: 100%;
       min-inline-size: 0;
-      min-block-size: var(--ui-control-size-md);
+      min-block-size: var(--ui-input-min-block-size, var(--ui-control-size-md));
       margin: 0;
       padding: var(--ui-space-2) var(--ui-space-3);
       appearance: none;
-      border: 1px solid var(--ui-input-border, var(--ui-control-border, var(--ui-border-strong)));
+      border: var(--ui-input-border-width, 1px) solid var(--ui-input-border, var(--ui-control-border, var(--ui-border-strong)));
       border-radius: var(--ui-input-radius, var(--ui-radius-md));
       background: var(--ui-input-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
       color: var(--ui-text-primary);
@@ -74,6 +74,14 @@
       cursor: not-allowed;
     }
 
+    /* Forced colors drop box shadows, so the focus ring becomes an outline. */
+    @media (forced-colors: active) {
+      :host:focus-visible {
+        outline: var(--ui-input-focus-outline, 2px solid Highlight);
+        outline-offset: 1px;
+      }
+    }
+
     /* No text-box-trim here: trimming a native input's line box below its line height lets the text
      * scroll vertically inside the field. Native inputs already center their single line. */
 

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

@@ -1,4 +1,4 @@
-<template component="ui-input-group">
+<template component="ui-input-group" controller="./ui-input-group.js">
   <defs>
     <prop name="disabled" type="boolean" default="false">Fades the group's framing to match a disabled input inside it. Disable the input itself too.</prop>
   </defs>
@@ -6,6 +6,7 @@
     <span class="affix"><slot name="prefix"></slot></span>
     <span class="field"><slot></slot></span>
     <span class="affix"><slot name="suffix"></slot></span>
+    <span class="action"><slot name="action"></slot></span>
   </div>
   <style>
     /* An input with fixed text before or after it, such as a domain after a site's name
@@ -13,8 +14,13 @@
        focus ring around the input and its affixes together; the input inside drops its own through
        its custom properties, so it is still the one ui-input, with its form behaviour intact. The
        affixes are plain text beside the input, so name the input with a label that says what the
-       whole value is. */
+       whole value is. The action slot takes one button at the end, inside the border, for the one
+       thing the field is for ("Continue" after a site's address), so it reads as the field's action
+       and not the form's. */
     :host {
+      /* The group's own border and height stand for the input's, so the group is a lone Input's height. */
+      --ui-input-border-width: 0;
+      --ui-input-min-block-size: 0;
       --ui-input-border: transparent;
       --ui-input-border-hover: transparent;
       --ui-input-focus-border: transparent;
@@ -22,6 +28,7 @@
       --ui-input-invalid-focus-shadow: none;
       --ui-input-shadow: none;
       --ui-input-focus-shadow: none;
+      --ui-input-focus-outline: none;
       --ui-input-radius: 0;
       --ui-input-surface: transparent;
 
@@ -31,20 +38,25 @@
       inline-size: 100%;
       min-inline-size: 0;
       min-block-size: var(--ui-control-size-md);
-      border: 1px solid var(--ui-border-strong);
+      /* The frame reads the shared control tokens with a lone Input's fallbacks, so the two match. */
+      border: 1px solid var(--ui-control-border, var(--ui-border-strong));
       border-radius: var(--ui-radius-md);
-      background: var(--ui-surface-elevated);
+      background: var(--ui-control-surface, var(--ui-surface-elevated));
       box-shadow: var(--ui-control-inset);
       overflow: hidden;
+      /* A press anywhere in the frame focuses the input. */
+      cursor: text;
       transition: border-color var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
-    :host:hover:not(:focus-within) {
-      border-color: var(--ui-text-secondary);
+    :host:hover:not(:has(input:focus, input:disabled)) {
+      border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
     }
 
-    :host:focus-within {
-      border-color: var(--ui-accent-solid);
+    /* The ring shows when the field's input would show its own: when it is focus-visible, which a
+       text input is for a pointer as well as a keyboard. A focused action button draws its own. */
+    :host:has(.field input:focus-visible) {
+      border-color: var(--ui-control-focus, var(--ui-accent-solid));
       box-shadow:
         var(--ui-control-inset),
         var(--ui-control-focus-halo-shadow);
@@ -54,9 +66,25 @@
       border-color: var(--ui-danger-solid);
     }
 
-    :host-state([disabled]) {
-      background: var(--ui-surface-muted);
+    :host:has(input:is([aria-invalid="true"], :user-invalid):focus-visible) {
+      box-shadow:
+        var(--ui-control-inset),
+        0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
+    }
+
+    /* Forced colors drop box shadows, so the focus ring becomes an outline. */
+    @media (forced-colors: active) {
+      :host:has(input:focus-visible) {
+        outline: 2px solid Highlight;
+        outline-offset: 1px;
+      }
+    }
+
+    :host-state([disabled]),
+    :host:has(input:disabled) {
+      background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
       box-shadow: none;
+      cursor: not-allowed;
     }
 
     .field {
@@ -76,7 +104,17 @@
       white-space: nowrap;
     }
 
-    .affix:empty {
+    /* Centred rather than padded above and below: the group is exactly a lone Input's height, so a
+       small button sits inside it with the difference split evenly, and the field keeps its height. */
+    .action {
+      display: flex;
+      flex: none;
+      align-items: center;
+      padding-inline: var(--ui-space-1);
+    }
+
+    .affix:empty,
+    .action:empty {
       display: none;
     }
 

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

@@ -0,0 +1,60 @@
+let nextAffixId = 0;
+// An affix holding a control keeps it: its clicks are its own, and it is not hidden or described.
+const INTERACTIVE = "a[href], button, input, select, textarea, [tabindex], [contenteditable]";
+
+function descriptionIds(input) {
+  return (input.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean);
+}
+
+// A text affix is hidden from assistive technology and linked to the input as its description
+// instead, so the input's name stays its label and the affix is read once, with the input. The
+// consumer's own aria-describedby (or a Form Field's) is kept. A press on an affix, or anywhere in
+// the box outside the input, focuses the input without moving its caret or selecting the affix.
+export default function controller(host) {
+  const element = host.element;
+  let owned = [];
+  let described = null;
+  const wire = () => {
+    const input = element.querySelector(".field input");
+    const affixes = Array.from(element.querySelectorAll(":scope > .affix")).filter((affix) => {
+      const text = affix.textContent.trim() !== "" && !affix.querySelector(INTERACTIVE);
+      if (text) affix.setAttribute("aria-hidden", "true");
+      else affix.removeAttribute("aria-hidden");
+      return text;
+    });
+    for (const affix of affixes) affix.id ||= `ui-input-group-affix-${(nextAffixId += 1)}`;
+    if (described && described !== input) {
+      const rest = descriptionIds(described).filter((id) => !owned.includes(id));
+      if (rest.length) described.setAttribute("aria-describedby", rest.join(" "));
+      else described.removeAttribute("aria-describedby");
+    }
+    described = input;
+    if (!input) return;
+    const external = descriptionIds(input).filter((id) => !owned.includes(id));
+    owned = affixes.map((affix) => affix.id);
+    const next = [...owned, ...external].join(" ");
+    if (next && input.getAttribute("aria-describedby") !== next) input.setAttribute("aria-describedby", next);
+    else if (!next && input.hasAttribute("aria-describedby")) input.removeAttribute("aria-describedby");
+  };
+  const pressedAround = (event) => !(event.target instanceof Element && event.target.closest(INTERACTIVE));
+  // Keep focus, and the caret, where they are, and start no text selection on the affix.
+  const onMousedown = (event) => {
+    if (pressedAround(event)) event.preventDefault();
+  };
+  // Click, not pointerdown: a tap's click is a user activation, so a touch keyboard opens.
+  const onClick = (event) => {
+    if (pressedAround(event) && !host.state.disabled) element.querySelector(".field input")?.focus();
+  };
+  element.addEventListener("mousedown", onMousedown);
+  element.addEventListener("click", onClick);
+  // Re-link when the input, an affix, or a description set elsewhere changes. Only aria-describedby
+  // is watched, and it is written only when it differs, so this settles.
+  const observer = new MutationObserver(() => queueMicrotask(wire));
+  observer.observe(element, { childList: true, characterData: true, subtree: true, attributes: true, attributeFilter: ["aria-describedby"] });
+  wire();
+  return () => {
+    observer.disconnect();
+    element.removeEventListener("mousedown", onMousedown);
+    element.removeEventListener("click", onClick);
+  };
+}