@threadlabs/looma 0.23.9 → 0.23.11

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) {

package/components/ui-disclosure/ui-disclosure.html

@@ -3,7 +3,8 @@
     <prop name="density" type="keyword" values="comfortable, compact" default="comfortable"
     >Compact trades padding and type size for rows that fit more on screen.</prop>
     <prop name="variant" type="keyword" values="plain, navigation" default="plain"
-    >Navigation shares icon columns, spacing, type, hover, and corners with Nav Item. Plain retains the standard disclosure treatment.</prop>
+    >Navigation shares icon columns, spacing, type, hover, and corners with Nav Item, while keeping expanded sections neutral: opening content is not route
+      selection. Plain retains the standard disclosure treatment.</prop>
     <prop name="requiredOpen" type="boolean" default="false"
     >In a named exclusive group, keeps at least one member open. Clicking the last open trigger does not close it; opening another member transfers the open
       state.</prop>
@@ -227,9 +228,6 @@
       background: var(--ui-nav-hover-surface);
       color: var(--ui-text-primary);
     }
-    :host-state([variant="navigation"][internalOpen]) .trigger {
-      color: var(--ui-selection-text);
-    }
     :host-state([variant="navigation"]) :is(.leading, .indicator) {
       inline-size: var(--ui-nav-icon-size);
       font-size: var(--ui-nav-icon-size);

package/components/ui-tree/ui-tree.html

@@ -17,6 +17,10 @@
     <prop name="marquee" type="boolean" default="false"
     >Scrolls a name too long for its row while that row is hovered or keyboard focused, rests at the end, then scrolls it again. Off by default: a tree of names
       that fit should not move. An item may set its own marquee to opt in or out on its own.</prop>
+    <prop name="moveActivation" type="keyword" values="click, keyboard-touch" default="click"
+    >Which handle activations start guided moving. click preserves two-click moving with any pointer. keyboard-touch leaves ordinary mouse and pen clicks inert
+      while retaining keyboard activation and touch taps. Actual pointer dragging works in either mode. Guided moves show Cancel on the source row; Escape or
+      reactivating that source handle also cancels without requesting a reorder.</prop>
     <event
       name="reorder"
       type="object"

package/components/ui-tree/ui-tree.js

@@ -32,6 +32,7 @@ export default function controller(host) {
   let typed = "";
   let lastTyped = 0;
   let moveMode = false;
+  let handlePointerType = null;
   const announcer = document.createElement("span");
   announcer.setAttribute("role", "status");
   announcer.style.cssText = "position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap";
@@ -103,6 +104,8 @@ export default function controller(host) {
     moveMode = false;
     element.removeAttribute("data-move-mode");
     source?.removeAttribute("data-dragging");
+    source?.removeAttribute("data-move-source");
+    source?.dispatchEvent(new CustomEvent("ui-tree-move-state", { detail: { moving: false } }));
     source = null;
     clearTarget();
     rejection = null;
@@ -165,8 +168,16 @@ export default function controller(host) {
     moveMode = true;
     source = item;
     source.setAttribute("data-dragging", "true");
+    source.setAttribute("data-move-source", "");
+    source.dispatchEvent(new CustomEvent("ui-tree-move-state", { detail: { moving: true } }));
     element.setAttribute("data-move-mode", "");
-    announce(`Moving ${nameOf(item)}. Choose a destination by click or the arrow keys. Press Enter to place or Escape to cancel.`);
+    announce(`Moving ${nameOf(item)}. Choose a destination by click or the arrow keys. Press Enter to place, or use Cancel or Escape to cancel.`);
+  };
+  const cancelMove = () => {
+    const handle = source && rowFor(source)?.querySelector(".drag-handle");
+    finish();
+    handle?.focus();
+    announce("Move cancelled.");
   };
   const commitMove = (how) => {
     if (!source) return;
@@ -182,12 +193,21 @@ export default function controller(host) {
     } else announce("Choose another destination row.");
   };
   const onMoveClick = (event) => {
+    if (moveMode && event.composedPath().some((node) => node instanceof HTMLElement && node.hasAttribute("data-tree-cancel-move"))) {
+      event.preventDefault();
+      event.stopPropagation();
+      cancelMove();
+      return;
+    }
     const handle = event.composedPath().find((node) => node instanceof HTMLElement && node.classList.contains("drag-handle"));
     if (handle) {
       event.preventDefault();
       event.stopPropagation();
       const item = itemFromEvent(event);
-      if (item) beginMove(item);
+      if (moveMode && item === source) cancelMove();
+      else if (item && (host.props.moveActivation.value !== "keyboard-touch" || event.detail === 0
+        || (event.pointerType ?? handlePointerType) === "touch")) beginMove(item);
+      handlePointerType = null;
       return;
     }
     if (!moveMode) {
@@ -214,6 +234,7 @@ export default function controller(host) {
     else if (rejection) commitMove("pointer");
     else announce("Choose another destination row.");
   };
+  const onHandlePointerDown = (event) => { handlePointerType = event.pointerType; };
   const onMovePointer = (event) => {
     if (!moveMode) return;
     const item = itemFromEvent(event);
@@ -223,13 +244,15 @@ export default function controller(host) {
     if (!moveMode) return false;
     if (event.key === "Escape") {
       event.preventDefault();
-      finish();
-      announce("Move cancelled.");
+      cancelMove();
       return true;
     }
     if (event.key === "Enter" || event.key === " ") {
       event.preventDefault();
-      commitMove("keyboard");
+      const cancelling = event.composedPath().some((node) => node instanceof HTMLElement
+        && (node.hasAttribute("data-tree-cancel-move") || (node.classList.contains("drag-handle") && itemFromEvent(event) === source)));
+      if (cancelling) cancelMove();
+      else commitMove("keyboard");
       return true;
     }
     if (event.key === "ArrowRight" && target) {
@@ -254,6 +277,7 @@ export default function controller(host) {
       const candidate = items[index];
       const side = step < 0 ? "before" : "after";
       if (candidate !== source && chooseTarget(candidate, side)) {
+        focusItem(candidate);
         announce(`Move ${nameOf(source)} ${side} ${nameOf(candidate)}. Press Enter to place.`);
         break;
       }
@@ -364,6 +388,7 @@ export default function controller(host) {
     host.dispatch("select", { ids: items.map(itemId).filter((candidate) => candidate && selected.has(candidate)), trigger: how });
   };
   const syncStructure = () => {
+    if (source && !element.contains(source)) finish();
     for (const item of allItems()) item.dispatchEvent(new CustomEvent("ui-tree-structure-sync"));
     syncTabStop();
     syncSelection();
@@ -416,7 +441,7 @@ export default function controller(host) {
       if (match) { event.preventDefault(); focusItem(match); }
     }
   };
-  const listeners = { dragstart: onDragStart, drag: onDrag, dragenter: onDragOver, dragover: onDragOver, dragleave: onDragLeave, drop: onDrop, dragend: onDragEnd, keydown: onKeydown, focusin: onFocusin, pointermove: onMovePointer, "ui-tree-expansion-change": onExpansion };
+  const listeners = { dragstart: onDragStart, drag: onDrag, dragenter: onDragOver, dragover: onDragOver, dragleave: onDragLeave, drop: onDrop, dragend: onDragEnd, keydown: onKeydown, focusin: onFocusin, pointerdown: onHandlePointerDown, pointermove: onMovePointer, "ui-tree-expansion-change": onExpansion };
   for (const [name, listener] of Object.entries(listeners)) element.addEventListener(name, listener);
   element.addEventListener("click", onMoveClick, true);
   const observer = new MutationObserver((records) => {
@@ -430,6 +455,7 @@ export default function controller(host) {
   });
   syncStructure();
   return () => {
+    finish();
     stop();
     observer.disconnect();
     cancelHover();

package/components/ui-tree-item/ui-tree-item.html

@@ -1,3 +1,4 @@
+<link rel="component" href="../ui-button/ui-button.html">
 <template component="ui-tree-item" controller="./ui-tree-item.js">
   <defs>
     <prop name="itemId" type="string" default=""
@@ -17,8 +18,8 @@
     >Keeps an empty item expandable while its children are supplied later. Expanding emits expand; the item is aria-busy until child Tree Items are appended.
       Clear lazy if loading finishes with no children.</prop>
     <prop name="sortable" type="boolean" default="false"
-    >Gives the item a move handle. Drag it, or activate it and choose a target by a second click or the keyboard. The tree reports reorder and leaves moving the
-      item to you. Needs itemId; disabled items show no handle.</prop>
+    >Gives the item a move handle. Drag it, or activate it according to the tree's moveActivation and choose a target by a second click or the keyboard. A
+      guided move exposes Cancel on this row. The tree reports reorder and leaves moving the item to you. Needs itemId; disabled items show no handle.</prop>
     <prop name="dragType" type="string" default="item"
     >The item's kind, for drag rules: it can be dropped before or after only items of the same type, and inside a branch only if that branch's accepts allows
       it. Reported as sourceType and targetType.</prop>
@@ -44,6 +45,7 @@
     <state type="integer" name="structuralLevel" value="1"></state>
     <state type="boolean" name="tabStop" value="false"></state>
     <state type="boolean" name="isContainer" value="false"></state>
+    <state type="boolean" name="moving" value="false"></state>
     <event name="expand" bubbles="false" type="object">
       <prop name="id" required type="string"></prop>
       <prop name="expanded" required type="boolean"></prop>
@@ -70,7 +72,7 @@
         $ref="dragHandle"
         type="button"
         draggable="true"
-        from:aria-label="format('Drag %s to reorder', label)"
+        from:aria-label="{ true: format('Cancel moving %s', label), false: format('Drag %s to reorder', label) }[format('%s', moving)]"
       >
         <svg
           aria-hidden="true"
@@ -103,7 +105,10 @@
         ></label>
       <span class="leading" $ref="leading"><slot name="leading"></slot></span>
       <span class="label" $ref="label"><span class="label-text" $ref="labelText"><slot name="label"><template $value="label"></template></slot></span></span>
-      <span class="actions" $ref="actions"><slot name="actions"></slot></span>
+      <span class="actions" $ref="actions">
+        <ui-button $if="moving" data-tree-cancel-move variant="ghost" tone="neutral" size="sm" aria-label="Cancel move">Cancel</ui-button>
+        <span $else><slot name="actions"></slot></span>
+      </span>
       <span class="drop-indicator row-drop-indicator" aria-hidden="true"></span>
     </div>
     <div class="children" $ref="children" role="group" from:hidden="not (isContainer and internalExpanded)"><slot></slot></div>
@@ -187,7 +192,12 @@
       background: var(--ui-disabled-surface);
     }
 
-    :host[data-dragging] .row {
+    :host[data-dragging]:not([data-move-source]) .row {
+      opacity: 0.42;
+    }
+
+    :host[data-move-source] > .row > .label,
+    :host[data-move-source] > .row > .leading {
       opacity: 0.42;
     }
 
@@ -360,7 +370,8 @@
     /* The controls sit over the label's end, so the text fades out where they begin. The fade is
        the truncation mark while it shows: an ellipsis under it would read as a second one. */
     .row:hover > .label,
-    .row:focus-within > .label {
+    .row:focus-within > .label,
+    :host[data-move-source] > .row > .label {
       text-overflow: clip;
       mask-image: linear-gradient(
         to right,
@@ -370,7 +381,8 @@
     }
 
     .row:hover > .label:dir(rtl),
-    .row:focus-within > .label:dir(rtl) {
+    .row:focus-within > .label:dir(rtl),
+    :host[data-move-source] > .row > .label:dir(rtl) {
       mask-image: linear-gradient(
         to left,
         #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-1)),
@@ -451,7 +463,8 @@
     }
 
     .row:hover > .actions,
-    .row:focus-within > .actions {
+    .row:focus-within > .actions,
+    :host[data-move-source] > .row > .actions {
       opacity: 1;
       pointer-events: auto;
     }

package/components/ui-tree-item/ui-tree-item.js

@@ -90,7 +90,9 @@ export default function controller(host) {
   };
   const onStructure = () => { updateLevel(); apply(); };
   const onAutoExpand = () => setExpanded(true, "pointer");
+  const onMoveState = (event) => { host.state.moving = Boolean(event.detail?.moving); };
 
+  element.addEventListener("ui-tree-move-state", onMoveState);
   element.addEventListener("ui-tree-auto-expand", onAutoExpand);
   element.addEventListener("ui-tree-structure-sync", onStructure);
   element.addEventListener("ui-tree-roving-tab-stop", onRoving);
@@ -219,6 +221,7 @@ export default function controller(host) {
     element.removeEventListener("focusout", onFocusOut);
     labelText?.removeEventListener("animationend", onMarqueeEnd);
     element.removeEventListener("ui-tree-auto-expand", onAutoExpand);
+    element.removeEventListener("ui-tree-move-state", onMoveState);
     element.removeEventListener("ui-tree-structure-sync", onStructure);
     element.removeEventListener("ui-tree-roving-tab-stop", onRoving);
     element.removeEventListener("ui-tree-request-expanded", onExpansionRequest);