@threadlabs/looma 0.23.10 → 0.23.12

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

@@ -2,7 +2,7 @@
   <defs>
     <prop name="variant" type="keyword" values="solid, subtle, outline" default="subtle"
     >Emphasis. subtle sets toned text over a soft wash; solid fills with the tone and uses contrasting text; outline keeps the surface with a toned edge.
-      Neutral looks the same in solid and subtle.</prop>
+      Neutral looks the same in solid and subtle. When space is constrained, the label truncates with an ellipsis while its full text remains available.</prop>
     <prop name="tone" type="keyword" values="neutral, accent, info, success, warning, danger" default="neutral"
     >Which colour the badge speaks in. neutral is a quiet grey for plain labels; accent draws the eye in the accent colour; info, success, warning, and danger
       mark a status, so match the tone to what the badge says. For a category rather than a status, set the --ui-badge-color hook on the badge instead: any CSS
@@ -89,7 +89,9 @@
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      max-width: 100%;
+      box-sizing: border-box;
+      min-inline-size: 0;
+      max-inline-size: 100%;
       padding: var(--ui-badge-padding-block, var(--ui-space-0-5)) var(--ui-badge-padding-inline, var(--ui-space-2));
       border: var(--ui-border-width) solid var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
       border-radius: var(--ui-radius-round);
@@ -102,6 +104,15 @@
       white-space: nowrap;
     }
 
+    /* A constrained badge keeps its surface intact and ellipsizes only its label. The full
+       text stays in the DOM for accessible names and consumers' selected values. */
+    .label {
+      display: block;
+      min-inline-size: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
     /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
      * Trimming applies to block containers; an inline-block is one and, like the inline-flex it
      * replaces, still sizes to its label rather than filling its container. */

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

@@ -54,6 +54,12 @@
     >How the list narrows as the user types. label lists the options whose label contains the typed text, ignoring case. none lists every authored option, for
       options already narrowed elsewhere, such as a server search, so a result that matched on data other than its label still shows. Leaving the field still
       commits an option whose label matches the text, or the only one listed.</prop>
+    <prop name="autoHighlight" type="keyword" values="none, single" default="none"
+    >single highlights the only enabled authored suggestion while typing. Ambiguous results and an empty query stay unhighlighted. none preserves manual
+      highlighting with the arrow keys.</prop>
+    <prop name="selectOnTab" type="boolean" default="false"
+    >Commits a highlighted authored suggestion on forward Tab, then lets focus advance normally. In multiple mode a selected suggestion is retained without
+      duplication or removal. Shift+Tab does not commit, and Tab never chooses the create offer.</prop>
     <prop name="allowFreeText" type="boolean" default="false">Allows values that do not match an authored option.</prop>
     <prop name="allowCreate" type="boolean" default="false"
     >Offers the current query as a new option, reported as create-item. When nothing else matches, the offer is highlighted, so Enter creates it; with nothing

package/components/ui-combobox/ui-combobox.js

@@ -174,6 +174,10 @@ export default function controller(host) {
       // When nothing matches what was typed, the offer to create it is the only choice, so it is
       // the one Enter makes, and it is highlighted as such.
       if (query && !host.state.rows.some((row) => !row.disabled) && canCreate()) host.state.active = host.state.rows.length;
+      if (query && host.props.autoHighlight.value === "single") {
+        const enabled = host.state.rows.flatMap((row, index) => row.disabled ? [] : [index]);
+        if (enabled.length === 1) host.state.active = enabled[0];
+      }
       // Options in their declared shape: a row's `selected` flag is the list's own view state.
       host.dispatch("options-change", host.state.rows.map(asItem));
     };
@@ -441,7 +445,19 @@ export default function controller(host) {
       if (!host.state.raw && (input.selectionStart ?? 0) === 0 && event.key === "Backspace" && items().length) { event.preventDefault(); removeItemAt(items().length - 1, "keyboard"); return; }
     }
     if (event.key === "Escape" && host.state.expanded) { event.preventDefault(); event.stopPropagation(); close(); }
-    else if (event.key === "Tab") { resolveTyped("keyboard"); close(); }
+    else if (event.key === "Tab") {
+      const highlighted = host.state.expanded ? (host.state.rows ?? [])[host.state.active] : undefined;
+      if (host.props.selectOnTab.value && !event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey && highlighted && !highlighted.disabled) {
+        if (host.props.multiple.value) {
+          setMultiQuery("", "keyboard");
+          if (!selectedSet().has(highlighted.value)) addSelectedItem(highlighted, "keyboard");
+        } else {
+          commit(highlighted.value, highlighted.label, asItem(highlighted), "selection", "keyboard");
+          queueMicrotask(() => void validateCurrent());
+        }
+      } else if (!host.props.selectOnTab.value) resolveTyped("keyboard");
+      close();
+    }
     else if (!event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey && ["ArrowDown", "ArrowUp"].includes(event.key)) { event.preventDefault(); if (!host.state.expanded) open("disclosure"); move(event.key); }
     else if (["Home", "End"].includes(event.key) && host.state.expanded && host.state.active >= 0) { event.preventDefault(); move(event.key); }
     else if (event.key === "Enter" && host.state.expanded) {