@threadlabs/looma 0.14.7 → 0.15.0

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

@@ -29,10 +29,19 @@ export default function controller(host) {
   let tabStop = null;
   let hoverTimer = null;
   let hoverKey = null;
+  let typed = "";
+  let lastTyped = 0;
+  let moveMode = false;
+  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";
+  document.body.append(announcer);
+  const announce = (message) => { announcer.textContent = message; };
 
   const allItems = () => Array.from(element.querySelectorAll(itemSelector));
   const visibleItems = () => allItems().filter((item) => item.getClientRects().length > 0 && item.getAttribute("aria-disabled") !== "true");
   const rowFor = (item) => item.querySelector(":scope > .row");
+  const selectionMode = () => String(host.state.selection || "none");
   // Only a branch has aria-expanded.
   const acceptsChildren = (item) => item.hasAttribute("aria-expanded") && item.getAttribute("aria-disabled") !== "true";
   const metadata = (item) => ({
@@ -91,6 +100,8 @@ export default function controller(host) {
     cancelHover();
   };
   const finish = () => {
+    moveMode = false;
+    element.removeAttribute("data-move-mode");
     source?.removeAttribute("data-dragging");
     source = null;
     clearTarget();
@@ -100,15 +111,12 @@ export default function controller(host) {
   };
   const itemFromEvent = (event) => event.composedPath().find((node) => node instanceof HTMLElement && node.matches?.(itemSelector)) ?? null;
   const itemAtPoint = (x, y) => document.elementFromPoint(x, y)?.closest?.(itemSelector) ?? null;
-  const updateTarget = (nextTarget, y, transfer) => {
+  const chooseTarget = (nextTarget, nextPosition, transfer) => {
     if (!source || !nextTarget || nextTarget === source) {
       clearTarget();
       rejection = rejectedTarget = rejectedPosition = null;
       return false;
     }
-    const row = rowFor(nextTarget);
-    if (!row) return false;
-    const nextPosition = classify(row.getBoundingClientRect(), y, acceptsChildren(nextTarget));
     const nextRejection = rejected(source, nextTarget, nextPosition);
     if (nextRejection) {
       if (transfer) transfer.dropEffect = "none";
@@ -132,21 +140,126 @@ export default function controller(host) {
     else cancelHover();
     return true;
   };
-  const dispatchReorder = (from, to, nextPosition) => {
+  const updateTarget = (nextTarget, y, transfer) => {
+    const row = nextTarget && rowFor(nextTarget);
+    return row ? chooseTarget(nextTarget, classify(row.getBoundingClientRect(), y, acceptsChildren(nextTarget)), transfer) : false;
+  };
+  const dispatchReorder = (from, to, nextPosition, how = "pointer") => {
     const sourceId = itemId(from);
     const targetId = itemId(to);
     if (!sourceId || !targetId) return;
     if (nextPosition === "inside") expandTarget(targetId);
     const fromMeta = metadata(from);
     const toMeta = metadata(to);
-    host.dispatch("reorder", { sourceId, targetId, position: nextPosition, sourceType: fromMeta.type, targetType: toMeta.type, sourceScope: fromMeta.scope, targetScope: toMeta.scope, trigger: "pointer" });
+    host.dispatch("reorder", { sourceId, targetId, position: nextPosition, sourceType: fromMeta.type, targetType: toMeta.type, sourceScope: fromMeta.scope, targetScope: toMeta.scope, trigger: how });
   };
-  const dispatchRejected = (from, to, nextPosition, detail) => {
+  const dispatchRejected = (from, to, nextPosition, detail, how = "pointer") => {
     const sourceId = itemId(from);
     const targetId = itemId(to);
-    if (sourceId && targetId) host.dispatch("reorder-rejected", { sourceId, targetId, position: nextPosition, reason: "max-depth", maxDepth: detail.maxDepth, resultingDepth: detail.resultingDepth, trigger: "pointer" });
+    if (sourceId && targetId) host.dispatch("reorder-rejected", { sourceId, targetId, position: nextPosition, reason: "max-depth", maxDepth: detail.maxDepth, resultingDepth: detail.resultingDepth, trigger: how });
+  };
+  const nameOf = (item) => item.getAttribute("aria-label") || itemId(item) || "item";
+  const beginMove = (item) => {
+    if (!itemId(item) || item.getAttribute("aria-disabled") === "true") return;
+    finish();
+    moveMode = true;
+    source = item;
+    source.setAttribute("data-dragging", "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.`);
+  };
+  const commitMove = (how) => {
+    if (!source) return;
+    if (target && position) {
+      const message = `Move requested: ${nameOf(source)} ${position} ${nameOf(target)}.`;
+      dispatchReorder(source, target, position, how);
+      finish();
+      announce(message);
+    } else if (rejection && rejectedTarget && rejectedPosition) {
+      dispatchRejected(source, rejectedTarget, rejectedPosition, rejection, how);
+      finish();
+      announce(`Cannot move ${nameOf(source)} there: maximum depth exceeded.`);
+    } else announce("Choose another destination row.");
+  };
+  const onMoveClick = (event) => {
+    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);
+      return;
+    }
+    if (!moveMode) {
+      if (selectionMode() === "none") return;
+      const item = itemFromEvent(event);
+      if (!item || item.getAttribute("aria-disabled") === "true") return;
+      const path = event.composedPath();
+      const checkbox = path.some((node) => node instanceof HTMLElement && node.classList.contains("selection-checkbox"));
+      const control = path.some((node) => node instanceof HTMLElement && node !== item && node.matches?.('a, button, input, select, textarea, [role="button"], [role="link"]'));
+      if (control && !checkbox) return;
+      event.preventDefault();
+      event.stopPropagation();
+      selectItem(item, "pointer");
+      focusItem(item);
+      return;
+    }
+    const item = itemFromEvent(event);
+    if (!item) return;
+    event.preventDefault();
+    event.stopPropagation();
+    if (updateTarget(item, event.clientY)) commitMove("pointer");
+    else if (rejection) commitMove("pointer");
+    else announce("Choose another destination row.");
+  };
+  const onMovePointer = (event) => {
+    if (!moveMode) return;
+    const item = itemFromEvent(event);
+    if (item && item !== source) updateTarget(item, event.clientY);
+  };
+  const onMoveKeydown = (event) => {
+    if (!moveMode) return false;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      finish();
+      announce("Move cancelled.");
+      return true;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      commitMove("keyboard");
+      return true;
+    }
+    if (event.key === "ArrowRight" && target) {
+      event.preventDefault();
+      if (chooseTarget(target, "inside")) announce(`Move ${nameOf(source)} inside ${nameOf(target)}.`);
+      else announce("That item cannot contain this one.");
+      return true;
+    }
+    if (event.key === "ArrowLeft" && target) {
+      event.preventDefault();
+      const side = allItems().indexOf(target) < allItems().indexOf(source) ? "before" : "after";
+      if (chooseTarget(target, side)) announce(`Move ${nameOf(source)} ${side} ${nameOf(target)}.`);
+      return true;
+    }
+    if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return false;
+    event.preventDefault();
+    const items = visibleItems();
+    const step = event.key === "ArrowDown" ? 1 : -1;
+    let index = items.indexOf(target ?? source);
+    while (index + step >= 0 && index + step < items.length) {
+      index += step;
+      const candidate = items[index];
+      const side = step < 0 ? "before" : "after";
+      if (candidate !== source && chooseTarget(candidate, side)) {
+        announce(`Move ${nameOf(source)} ${side} ${nameOf(candidate)}. Press Enter to place.`);
+        break;
+      }
+    }
+    return true;
   };
   const onDragStart = (event) => {
+    if (moveMode) finish();
     const item = itemFromEvent(event);
     // An item renders its drag handle only while it is sortable and enabled.
     const fromHandle = event.composedPath().some((node) => node instanceof HTMLElement && node.classList.contains("drag-handle"));
@@ -204,9 +317,52 @@ export default function controller(host) {
     tabStop = next;
     for (const item of items) item.dispatchEvent(new CustomEvent("ui-tree-roving-tab-stop", { detail: { active: item === next } }));
   };
+  const syncSelection = () => {
+    const mode = selectionMode();
+    if (mode === "multiple") element.setAttribute("aria-multiselectable", "true");
+    else element.removeAttribute("aria-multiselectable");
+    for (const item of allItems()) {
+      if (mode === "multiple") item.setAttribute("data-selection-mode", "multiple");
+      else item.removeAttribute("data-selection-mode");
+      const checkbox = rowFor(item)?.querySelector(".selection-checkbox");
+      if (checkbox) {
+        const descendants = Array.from(item.querySelectorAll(itemSelector));
+        checkbox.indeterminate = mode === "multiple" && descendants.some((child) => child.getAttribute("aria-selected") === "true")
+          && (item.getAttribute("aria-selected") !== "true" || descendants.some((child) => child.getAttribute("aria-selected") !== "true"));
+      }
+    }
+  };
+  const selectItem = (item, how) => {
+    const mode = selectionMode();
+    const id = itemId(item);
+    if (mode === "none" || !id) return;
+    if (mode === "single") {
+      if (item.getAttribute("aria-selected") !== "true") host.dispatch("select", { ids: [id], trigger: how });
+      return;
+    }
+    const items = allItems();
+    const selected = new Set(items.filter((candidate) => candidate.getAttribute("aria-selected") === "true").map(itemId).filter(Boolean));
+    const subtree = [item, ...item.querySelectorAll(itemSelector)].filter((candidate) => candidate.getAttribute("aria-disabled") !== "true");
+    const adding = !selected.has(id);
+    for (const candidate of subtree) {
+      const candidateId = itemId(candidate);
+      if (!candidateId) continue;
+      if (adding) selected.add(candidateId);
+      else selected.delete(candidateId);
+    }
+    let ancestor = parentItem(item, element);
+    while (ancestor) {
+      const children = items.filter((candidate) => parentItem(candidate, element) === ancestor);
+      if (children.length && children.every((child) => selected.has(itemId(child)))) selected.add(itemId(ancestor));
+      else selected.delete(itemId(ancestor));
+      ancestor = parentItem(ancestor, element);
+    }
+    host.dispatch("select", { ids: items.map(itemId).filter((candidate) => candidate && selected.has(candidate)), trigger: how });
+  };
   const syncStructure = () => {
     for (const item of allItems()) item.dispatchEvent(new CustomEvent("ui-tree-structure-sync"));
     syncTabStop();
+    syncSelection();
   };
   const interactive = (event) => {
     for (const node of event.composedPath()) {
@@ -219,9 +375,15 @@ export default function controller(host) {
   const onFocusin = (event) => { if (!interactive(event)) { const item = itemFromEvent(event); if (item) syncTabStop(item); } };
   const onExpansion = () => requestAnimationFrame(() => syncTabStop());
   const onKeydown = (event) => {
+    if (onMoveKeydown(event)) return;
     if (interactive(event)) return;
     const current = itemFromEvent(event);
     if (!current) return;
+    if (event.key === " " && selectionMode() !== "none") {
+      event.preventDefault();
+      selectItem(current, "keyboard");
+      return;
+    }
     const items = visibleItems();
     const index = items.indexOf(current);
     if (index < 0) return;
@@ -234,17 +396,34 @@ export default function controller(host) {
       if (current.getAttribute("aria-expanded") === "false") { event.preventDefault(); current.dispatchEvent(new CustomEvent("ui-tree-request-expanded", { detail: { expanded: true, trigger: "keyboard" } })); }
       else if (current.getAttribute("aria-expanded") === "true") { const child = items.find((item) => parentItem(item, element) === current); if (child) { event.preventDefault(); focusItem(child); } }
     }
+    if (event.key.length === 1 && /^[\p{L}\p{N}]$/u.test(event.key) && !event.altKey && !event.ctrlKey && !event.metaKey) {
+      const now = Date.now();
+      typed = `${now - lastTyped < 700 ? typed : ""}${event.key.toLocaleLowerCase()}`;
+      lastTyped = now;
+      const candidates = [...items.slice(index + 1), ...items.slice(0, index + 1)];
+      const match = candidates.find((item) => (item.getAttribute("aria-label") || item.textContent || "").trim().toLocaleLowerCase().startsWith(typed));
+      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, "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, pointermove: onMovePointer, "ui-tree-expansion-change": onExpansion };
   for (const [name, listener] of Object.entries(listeners)) element.addEventListener(name, listener);
-  const observer = new MutationObserver(syncStructure);
-  observer.observe(element, { childList: true, subtree: true });
-  const stop = host.effect(() => element.setAttribute("aria-label", String(host.state.label || "Tree")));
+  element.addEventListener("click", onMoveClick, true);
+  const observer = new MutationObserver((records) => {
+    if (records.some((record) => record.type === "childList")) syncStructure();
+    else syncSelection();
+  });
+  observer.observe(element, { childList: true, subtree: true, attributes: true, attributeFilter: ["aria-selected"] });
+  const stop = host.effect(() => {
+    element.setAttribute("aria-label", String(host.state.label || "Tree"));
+    syncSelection();
+  });
   syncStructure();
   return () => {
     stop();
     observer.disconnect();
     cancelHover();
+    announcer.remove();
     for (const [name, listener] of Object.entries(listeners)) element.removeEventListener(name, listener);
+    element.removeEventListener("click", onMoveClick, true);
   };
 }

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

@@ -13,9 +13,12 @@
     <prop name="container" type="boolean" default="false"
     >Makes the item a branch even before it has children: it gets the expand button and aria-expanded, and accepts drops inside it. An item with nested items is
       a branch without it.</prop>
+    <prop name="lazy" type="boolean" default="false"
+    >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 drag handle, shown on hover, so it can be dragged to a new place in the tree. The tree reports the drop as a reorder event and leaves
-      moving the item to you. Needs itemId; a disabled item, and any item under touch input, shows no handle.</prop>
+    >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>
     <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>
@@ -29,8 +32,8 @@
     >Whether the branch shows its children, initially or when set externally. The expand button, a click on the row, and the arrow keys toggle it from there,
       each reported as an expand event. Only meaningful for a branch.</prop>
     <prop name="selected" type="boolean" default="false"
-    >Marks the item selected: it sets aria-selected and gives the row the highlighted surface. The tree does not select on click, so drive it from your own
-      state.</prop>
+    >Marks the item selected: it sets aria-selected and highlights the row. This is controlled state; respond to the parent Tree's select request by updating
+      it.</prop>
     <prop name="marquee" type="boolean" default="false"
     >Scrolls a name too long for its row while the row is hovered or focused, then puts it back. Off by default: a tree of short names should not move, and a
       product decides whether reading the whole name matters more than a still list.</prop>
@@ -85,6 +88,14 @@
       <button class="disclosure" $ref="disclosure" type="button" :disabled="disabled" :hidden="not isContainer">
         <span class="disclosure-icon" aria-hidden="true"></span>
       </button>
+      <label class="selection-hit"><input
+          class="selection-checkbox"
+          type="checkbox"
+          tabindex="-1"
+          :checked="selected"
+          :disabled="disabled"
+          :aria-label="format('Select %s', label)"
+        ></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>
@@ -204,6 +215,35 @@
       display: none;
     }
 
+    .selection-hit {
+      display: none;
+      grid-column: 2;
+      grid-row: 1;
+      place-items: center;
+      inline-size: 1.25rem;
+      block-size: var(--_ui-tree-item-min-block-size, var(--_tree-row-min-height));
+      cursor: pointer;
+    }
+    .selection-checkbox {
+      inline-size: 1rem;
+      block-size: 1rem;
+      margin: 0;
+      accent-color: var(--ui-accent-solid);
+    }
+
+    :host[data-selection-mode="multiple"] > .row {
+      grid-template-columns: var(--_tree-disclosure-size) 1.25rem auto minmax(0, 1fr);
+    }
+    :host[data-selection-mode="multiple"] > .row > .selection-hit {
+      display: grid;
+    }
+    :host[data-selection-mode="multiple"] > .row > .leading {
+      grid-column: 3;
+    }
+    :host[data-selection-mode="multiple"] > .row > .label {
+      grid-column: 4;
+    }
+
     .disclosure:hover {
       color: var(--ui-text-primary);
       background: var(--ui-surface-elevated);
@@ -472,7 +512,7 @@
       inset-inline: 1px;
       display: none;
       block-size: 2px;
-      border-radius: 999px;
+      border-radius: var(--ui-radius-round);
       background: var(--_ui-tree-drop-color, var(--ui-accent-solid));
       pointer-events: none;
     }
@@ -485,7 +525,7 @@
       inline-size: 7px;
       block-size: 7px;
       border: 2px solid var(--_ui-tree-drop-color, var(--ui-accent-solid));
-      border-radius: 999px;
+      border-radius: var(--ui-radius-round);
       background: var(--ui-surface-elevated);
       transform: translateY(-50%);
     }
@@ -515,8 +555,47 @@
       --_tree-row-min-height: 44px;
     }
 
-    html[data-ui-input-modality="touch"] :host .drag-handle {
-      display: none;
+    html[data-ui-input-modality="touch"] :host .row {
+      grid-template-columns: 44px var(--_tree-disclosure-size) auto minmax(0, 1fr);
+    }
+
+    html[data-ui-input-modality="touch"] :host .drag-handle,
+    html[data-ui-input-modality="touch"] :host-state([isContainer]) > .row > .drag-handle {
+      position: relative;
+      grid-column: 1;
+      grid-row: 1;
+      inset: auto;
+      inline-size: 44px;
+      block-size: 44px;
+      padding: 14px;
+      opacity: 1;
+      transform: none;
+      cursor: pointer;
+    }
+
+    html[data-ui-input-modality="touch"] :host .disclosure {
+      grid-column: 2;
+    }
+    html[data-ui-input-modality="touch"] :host .leading {
+      grid-column: 3;
+    }
+    html[data-ui-input-modality="touch"] :host .label {
+      grid-column: 4;
+    }
+
+    html[data-ui-input-modality="touch"] :host[data-selection-mode="multiple"] > .row {
+      grid-template-columns: 44px var(--_tree-disclosure-size) 44px auto minmax(0, 1fr);
+    }
+    html[data-ui-input-modality="touch"] :host[data-selection-mode="multiple"] > .row > .selection-hit {
+      grid-column: 3;
+      inline-size: 44px;
+      block-size: 44px;
+    }
+    html[data-ui-input-modality="touch"] :host[data-selection-mode="multiple"] > .row > .leading {
+      grid-column: 4;
+    }
+    html[data-ui-input-modality="touch"] :host[data-selection-mode="multiple"] > .row > .label {
+      grid-column: 5;
     }
 
     @media (prefers-reduced-motion: reduce) {

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

@@ -27,7 +27,7 @@ export default function controller(host) {
   let lastExternalExpanded = Boolean(host.state.expanded);
   host.state.internalExpanded = lastExternalExpanded;
 
-  const isContainer = () => Boolean(host.state.container) || childItems().length > 0;
+  const isContainer = () => Boolean(host.state.container) || Boolean(host.state.lazy) || childItems().length > 0;
   const updateLevel = () => {
     const tree = element.closest('[role="tree"]');
     let ancestor = parentItem(element);
@@ -52,6 +52,8 @@ export default function controller(host) {
     // A leaf has no aria-expanded at all; "false" would announce it as a collapsed branch.
     if (container) element.setAttribute("aria-expanded", String(expanded));
     else element.removeAttribute("aria-expanded");
+    if (host.state.lazy && expanded && childItems().length === 0) element.setAttribute("aria-busy", "true");
+    else element.removeAttribute("aria-busy");
     element.tabIndex = host.state.disabled || !host.state.tabStop ? -1 : 0;
     element.style.setProperty("--ui-tree-item-depth", String(Number(host.state.structuralLevel ?? 1) - 1));
     disclosure.setAttribute("aria-expanded", String(expanded));