@threadlabs/looma 0.4.0 → 0.5.0

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

@@ -0,0 +1,122 @@
+<template component="ui-tooltip" controller="./ui-tooltip.js">
+  <defs>
+    <prop name="for" type="string" default="">ID of the control described and visually anchored by the tooltip.</prop>
+    <prop name="open" type="boolean" default="false">Whether the tooltip is open initially or when set externally.</prop>
+    <prop name="placement" type="string" default="top-start">Positions the description relative to its trigger.</prop>
+    <prop name="showDelay" type="number" default="500">Waits this many milliseconds before showing after pointer entry.</prop>
+    <prop name="hideDelay" type="number" default="100">Waits this many milliseconds before hiding after pointer exit.</prop>
+    <prop name="inverse" type="boolean" default="false">Use the high-contrast inverse surface (dark on light themes, light on dark themes).</prop>
+    <state name="internalOpen" :value="false"></state>
+    <event
+      name="open"
+      type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"
+    ></event>
+    <event
+      name="close"
+      type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"
+    ></event>
+  </defs>
+  <span role="tooltip" :hidden="not internalOpen"><div class="surface"><slot></slot></div></span>
+  <style>
+    :host {
+      position: fixed;
+      inset: auto;
+      margin: 0;
+      display: inline-block;
+      box-sizing: border-box;
+      padding: 0;
+      border: 0;
+      outline: 0;
+      border-radius: 0;
+      background: transparent;
+      /* The UA popover default (overflow: auto) would clip the arrow. */
+      overflow: visible;
+      opacity: 0;
+      transform: translateY(4px);
+      transition:
+        opacity var(--ui-motion-fast) var(--ui-motion-ease),
+        transform var(--ui-motion-fast) var(--ui-motion-ease),
+        display var(--ui-motion-fast) allow-discrete,
+        overlay var(--ui-motion-fast) allow-discrete;
+    }
+
+    .surface {
+      --_tooltip-line: var(--ui-tooltip-border, var(--ui-border-default));
+      position: relative;
+      box-sizing: border-box;
+      max-inline-size: var(--ui-tooltip-max-inline-size, 18rem);
+      border: 1px solid var(--_tooltip-line);
+      border-radius: var(--ui-tooltip-radius, var(--ui-radius-1));
+      background: var(--ui-tooltip-surface, var(--ui-surface-elevated));
+      color: var(--ui-tooltip-text, var(--ui-text-primary));
+      padding: var(--ui-space-1) var(--ui-space-2);
+      font-family: var(--ui-font-family-sans);
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height-tight);
+      box-shadow: var(--ui-tooltip-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md)));
+    }
+
+    :host-state([inverse]) .surface {
+      --_tooltip-line: var(--ui-tooltip-inverse-surface, var(--ui-text-primary));
+      background: var(--ui-tooltip-inverse-surface, var(--ui-text-primary));
+      color: var(--ui-tooltip-inverse-text, var(--ui-surface-default));
+    }
+
+    /* A rotated square shares the surface fill and draws the two outward border edges. Its centre sits on
+     * the surface border line, so the fill covers that stretch of border and the outline runs unbroken. */
+    .surface::after {
+      content: "";
+      position: absolute;
+      z-index: 1;
+      inset-inline-start: var(--ui-space-3);
+      inset-block-end: calc(var(--ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
+      inline-size: var(--ui-tooltip-arrow-size, 0.5rem);
+      block-size: var(--ui-tooltip-arrow-size, 0.5rem);
+      box-sizing: border-box;
+      background: inherit;
+      border: 0 solid var(--_tooltip-line);
+      border-inline-end-width: 1px;
+      border-block-end-width: 1px;
+      border-end-end-radius: 1px;
+      transform: rotate(45deg);
+    }
+
+    :is(:host-state([placement="bottom"]), :host-state([placement="bottom-start"]), :host-state([placement="bottom-end"])) .surface::after {
+      inset-block-start: calc(var(--ui-tooltip-arrow-size, 0.5rem) / -2 - 0.5px);
+      inset-block-end: auto;
+      border-inline-end-width: 0;
+      border-block-end-width: 0;
+      border-inline-start-width: 1px;
+      border-block-start-width: 1px;
+      border-end-end-radius: 0;
+      border-start-start-radius: 1px;
+    }
+
+    :is(:host-state([placement="top-end"]), :host-state([placement="bottom-end"])) .surface::after {
+      inset-inline-start: auto;
+      inset-inline-end: var(--ui-space-3);
+    }
+
+    :host:popover-open {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    @starting-style {
+      :host:popover-open {
+        opacity: 0;
+        transform: translateY(4px);
+      }
+    }
+
+    :host[hidden] {
+      display: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host {
+        transition: none;
+      }
+    }
+  </style>
+</template>

package/components/ui-tooltip/ui-tooltip.js

@@ -0,0 +1,134 @@
+import { closeOverlay, createAnchoredSurface, createIdResolver, openOverlay } from "../shared/overlay.js";
+
+export default function controller(host) {
+  const element = host.element;
+  const document = element.ownerDocument;
+  const overlayId = element.id || `ui-tooltip-${Math.random().toString(36).slice(2, 11)}`;
+  if (!element.id) element.id = overlayId;
+  let focused = false;
+  let trigger = null;
+  let surface = null;
+  let showTimer = null;
+  let hideTimer = null;
+  let lastFor;
+  let lastPlacement;
+  let lastExternalOpen = Boolean(host.state.open);
+  host.state.internalOpen = lastExternalOpen;
+
+  const clearShow = () => { if (showTimer !== null) clearTimeout(showTimer); showTimer = null; };
+  const clearHide = () => { if (hideTimer !== null) clearTimeout(hideTimer); hideTimer = null; };
+  const clearTimers = () => { clearShow(); clearHide(); };
+  const setOpen = (open, input) => {
+    if (Boolean(host.state.internalOpen) === open) return;
+    host.state.internalOpen = open;
+    host.dispatch(open ? "open" : "close", { open, reason: "action", trigger: input });
+  };
+  const onKeydown = (event) => { if (event.key === "Escape") clearTimers(); };
+  const onEnter = (event) => {
+    if (event.pointerType === "touch") return;
+    clearHide();
+    if (host.state.internalOpen || showTimer !== null) return;
+    showTimer = setTimeout(() => {
+      showTimer = null;
+      setOpen(true, "pointer");
+    }, Math.max(0, Number(host.state.showDelay ?? 500)));
+  };
+  const onLeave = () => {
+    clearShow();
+    if (focused || !host.state.internalOpen || hideTimer !== null) return;
+    hideTimer = setTimeout(() => {
+      hideTimer = null;
+      setOpen(false, "pointer");
+    }, Math.max(0, Number(host.state.hideDelay ?? 100)));
+  };
+  const onFocusin = () => {
+    focused = true;
+    clearTimers();
+    setOpen(true, "keyboard");
+  };
+  const onFocusout = (event) => {
+    if (event.relatedTarget && element.contains(event.relatedTarget)) return;
+    focused = false;
+    clearTimers();
+    setOpen(false, "keyboard");
+  };
+  const detach = () => {
+    if (!trigger) return;
+    const ids = (trigger.getAttribute("aria-describedby") ?? "").split(/\s+/).filter((id) => id && id !== element.id);
+    if (ids.length) trigger.setAttribute("aria-describedby", ids.join(" "));
+    else trigger.removeAttribute("aria-describedby");
+    trigger.removeEventListener("keydown", onKeydown);
+    trigger.removeEventListener("pointerenter", onEnter);
+    trigger.removeEventListener("pointerleave", onLeave);
+    trigger.removeEventListener("focusin", onFocusin);
+    trigger.removeEventListener("focusout", onFocusout);
+  };
+  const attach = () => {
+    if (!trigger) return;
+    const ids = new Set((trigger.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean));
+    ids.add(element.id);
+    trigger.setAttribute("aria-describedby", [...ids].join(" "));
+    trigger.addEventListener("keydown", onKeydown);
+    trigger.addEventListener("pointerenter", onEnter);
+    trigger.addEventListener("pointerleave", onLeave);
+    trigger.addEventListener("focusin", onFocusin);
+    trigger.addEventListener("focusout", onFocusout);
+  };
+  const ids = createIdResolver(document, () => {
+    lastFor = undefined;
+    apply();
+  });
+  const setup = () => {
+    const nextFor = String(host.state.for ?? "");
+    const nextPlacement = String(host.state.placement ?? "top-start");
+    if (surface && nextFor === lastFor && nextPlacement === lastPlacement) return;
+    lastFor = nextFor;
+    lastPlacement = nextPlacement;
+    const nextTrigger = ids.get(nextFor);
+    if (nextTrigger !== trigger) {
+      detach();
+      trigger = nextTrigger;
+      attach();
+    }
+    surface?.destroy();
+    surface = createAnchoredSurface(element, { anchor: trigger, placement: nextPlacement });
+  };
+  const close = (reason, input) => {
+    if (reason !== "escape" && reason !== "light-dismiss") return;
+    clearTimers();
+    host.state.internalOpen = false;
+    host.dispatch("close", { open: false, reason, trigger: input });
+  };
+  const apply = () => {
+    const externalOpen = Boolean(host.state.open);
+    if (externalOpen !== lastExternalOpen) {
+      lastExternalOpen = externalOpen;
+      host.state.internalOpen = externalOpen;
+    }
+    setup();
+    const open = Boolean(host.state.internalOpen);
+    element.hidden = !open;
+    if (open) {
+      surface?.show();
+      openOverlay({ id: overlayId, modal: false, element, relatedElements: trigger ? [trigger] : [], dismissible: true, requestClose: close });
+    } else {
+      surface?.hide();
+      closeOverlay(document, overlayId);
+    }
+  };
+  const onSurfaceEnter = () => clearHide();
+  element.addEventListener("pointerenter", onSurfaceEnter);
+  element.addEventListener("pointerleave", onLeave);
+  const stop = host.effect(apply);
+  apply();
+  return () => {
+    stop();
+    ids.stop();
+    clearTimers();
+    detach();
+    surface?.destroy();
+    element.removeEventListener("pointerenter", onSurfaceEnter);
+    element.removeEventListener("pointerleave", onLeave);
+    closeOverlay(document, overlayId);
+  };
+}

package/components/ui-top-bar/ui-top-bar.html

@@ -0,0 +1,53 @@
+<template component="ui-top-bar">
+  <header>
+    <div class="leading"><slot name="leading"></slot></div>
+    <div class="title"><slot></slot></div>
+    <div class="search"><slot name="search"></slot></div>
+    <div class="actions"><slot name="actions"></slot></div>
+  </header>
+  <style>
+    :host {
+      position: sticky;
+      inset-block-start: 0;
+      z-index: var(--ui-top-bar-z-index, 100);
+      min-block-size: calc(var(--ui-top-bar-height, 56px) + env(safe-area-inset-top));
+      display: flex;
+      align-items: center;
+      gap: var(--ui-top-bar-gap, var(--ui-space-3, 0.75rem));
+      padding-block-start: env(safe-area-inset-top);
+      padding-inline-start: max(var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem)), env(safe-area-inset-left));
+      padding-inline-end: max(var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem)), env(safe-area-inset-right));
+      background: var(--ui-top-bar-bg, var(--ui-surface-elevated));
+      border-block-end: 1px solid var(--ui-top-bar-border, var(--ui-border-default));
+    }
+
+    .leading,
+    .search,
+    .actions {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+    }
+
+    .actions {
+      gap: var(--ui-top-bar-actions-gap, var(--ui-space-1, 0.25rem));
+    }
+
+    .title {
+      min-inline-size: 0;
+      flex: 1;
+    }
+
+    /* An unused region takes no space, so it adds no gap. */
+    .leading:empty,
+    .search:empty,
+    .actions:empty {
+      display: none;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

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

@@ -0,0 +1,29 @@
+<link rel="component" href="../ui-tree-item/ui-tree-item.html">
+<template component="ui-tree" controller="./ui-tree.js">
+  <defs>
+    <prop name="label" type="string" default="Tree">label token.</prop>
+    <prop name="hoverExpandDelay" type="number" default="700">hoverExpandDelay token.</prop>
+    <prop name="maxDepth" type="number" default="0">maxDepth token.</prop>
+    <event
+      name="reorder"
+      type="object({ sourceId: string, targetId: string, position: before | inside | after, sourceType: string, targetType: string, sourceScope: string, targetScope: string, trigger: keyboard | pointer | programmatic })"
+    ></event>
+    <event
+      name="reorder-rejected"
+      type="object({ sourceId: string, targetId: string, position: before | inside | after, reason: max-depth, maxDepth: integer, resultingDepth: integer, trigger: keyboard | pointer | programmatic })"
+    ></event>
+  </defs>
+  <div role="tree"><slot></slot></div>
+  <style>
+    :host {
+      display: block;
+      min-inline-size: 0;
+      padding-inline-start: var(--ui-tree-gutter, 0px);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

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

@@ -0,0 +1,250 @@
+function classify(rect, y, acceptsChildren) {
+  const progress = rect.height > 0 ? Math.min(1, Math.max(0, (y - rect.top) / rect.height)) : 0.5;
+  if (!acceptsChildren) return progress < 0.5 ? "before" : "after";
+  if (progress < 0.25) return "before";
+  if (progress > 0.75) return "after";
+  return "inside";
+}
+
+// Items publish their identity and drag rules as data attributes for the tree.
+function itemId(item) {
+  return item.dataset.itemId || "";
+}
+
+function parentItem(item, tree) {
+  const parent = item.parentElement?.closest('[data-component~="ui-tree-item"]') ?? null;
+  return parent && tree.contains(parent) ? parent : null;
+}
+
+export default function controller(host) {
+  const element = host.element;
+  const document = element.ownerDocument;
+  const itemSelector = '[data-component~="ui-tree-item"]';
+  let source = null;
+  let target = null;
+  let position = null;
+  let rejection = null;
+  let rejectedTarget = null;
+  let rejectedPosition = null;
+  let tabStop = null;
+  let hoverTimer = null;
+  let hoverKey = null;
+
+  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");
+  // Only a branch has aria-expanded.
+  const acceptsChildren = (item) => item.hasAttribute("aria-expanded") && item.getAttribute("aria-disabled") !== "true";
+  const metadata = (item) => ({
+    type: item.dataset.dragType || "item",
+    scope: item.dataset.dropScope || "",
+    accepts: (item.dataset.accepts || "").split(",").map((value) => value.trim()).filter(Boolean),
+  });
+  const depth = (item) => Number(item.dataset.dropDepth) || Number(item.getAttribute("aria-level")) || 1;
+  const subtreeDepth = (item) => {
+    const override = item.dataset.subtreeDepth;
+    if (override != null) return Math.max(0, Math.floor(Number(override)));
+    return Array.from(item.querySelectorAll(itemSelector)).reduce((deepest, descendant) => {
+      let nesting = 0;
+      let ancestor = parentItem(descendant, element);
+      while (ancestor && ancestor !== item) {
+        nesting += 1;
+        ancestor = parentItem(ancestor, element);
+      }
+      return ancestor === item ? Math.max(deepest, nesting + 1) : deepest;
+    }, 0);
+  };
+  const rejected = (from, to, nextPosition) => {
+    if (from.contains(to)) return { reason: "descendant" };
+    const fromMeta = metadata(from);
+    const toMeta = metadata(to);
+    if (nextPosition === "inside") {
+      if (!acceptsChildren(to) || (toMeta.accepts.length && !toMeta.accepts.includes(fromMeta.type))) return { reason: "incompatible" };
+    } else if (fromMeta.type !== toMeta.type) return { reason: "incompatible" };
+    const maxDepth = Math.max(0, Math.floor(Number(host.state.maxDepth ?? 0)));
+    if (maxDepth > 0) {
+      const resultingDepth = Math.max(0, Math.floor(depth(to))) + (nextPosition === "inside" ? 1 : 0) + subtreeDepth(from);
+      if (resultingDepth > maxDepth) return { reason: "max-depth", maxDepth, resultingDepth };
+    }
+    return null;
+  };
+  const cancelHover = () => { if (hoverTimer !== null) clearTimeout(hoverTimer); hoverTimer = null; hoverKey = null; };
+  const expandTarget = (id) => {
+    const item = allItems().find((candidate) => itemId(candidate) === id);
+    if (item?.getAttribute("aria-expanded") === "false") item.dispatchEvent(new CustomEvent("ui-tree-auto-expand"));
+  };
+  const scheduleHover = (id) => {
+    if (hoverKey === id && hoverTimer !== null) return;
+    cancelHover();
+    hoverKey = id;
+    hoverTimer = setTimeout(() => {
+      const key = hoverKey;
+      hoverTimer = null;
+      hoverKey = null;
+      if (key) expandTarget(key);
+    }, Math.max(0, Number(host.state.hoverExpandDelay ?? 700)));
+  };
+  const clearTarget = () => {
+    target?.removeAttribute("data-drop-position");
+    target = null;
+    position = null;
+    cancelHover();
+  };
+  const finish = () => {
+    source?.removeAttribute("data-dragging");
+    source = null;
+    clearTarget();
+    rejection = null;
+    rejectedTarget = null;
+    rejectedPosition = null;
+  };
+  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) => {
+    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";
+      clearTarget();
+      if (nextRejection.reason === "max-depth") {
+        rejection = nextRejection;
+        rejectedTarget = nextTarget;
+        rejectedPosition = nextPosition;
+      } else rejection = rejectedTarget = rejectedPosition = null;
+      return false;
+    }
+    rejection = rejectedTarget = rejectedPosition = null;
+    if (transfer) transfer.dropEffect = "move";
+    if (target !== nextTarget || position !== nextPosition) {
+      clearTarget();
+      target = nextTarget;
+      position = nextPosition;
+      target.setAttribute("data-drop-position", position);
+    }
+    if (position === "inside" && target.getAttribute("aria-expanded") === "false") scheduleHover(itemId(target));
+    else cancelHover();
+    return true;
+  };
+  const dispatchReorder = (from, to, nextPosition) => {
+    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" });
+  };
+  const dispatchRejected = (from, to, nextPosition, detail) => {
+    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" });
+  };
+  const onDragStart = (event) => {
+    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"));
+    if (!item || !fromHandle) {
+      event.preventDefault();
+      return;
+    }
+    const id = itemId(item);
+    const row = rowFor(item);
+    if (!id || !row) { event.preventDefault(); return; }
+    source = item;
+    item.setAttribute("data-dragging", "true");
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = "move";
+      event.dataTransfer.setData("text/plain", id);
+      if (typeof event.dataTransfer.setDragImage === "function") event.dataTransfer.setDragImage(row, 16, Math.max(0, row.getBoundingClientRect().height / 2));
+    }
+  };
+  const onDrag = (event) => {
+    if (!source || (!event.clientX && !event.clientY)) return;
+    const item = itemAtPoint(event.clientX, event.clientY);
+    if (item) updateTarget(item, event.clientY, event.dataTransfer);
+  };
+  const onDragOver = (event) => { if (source && updateTarget(itemFromEvent(event), event.clientY, event.dataTransfer)) event.preventDefault(); };
+  const onDragLeave = (event) => {
+    if (event.relatedTarget && element.contains(event.relatedTarget)) return;
+    if (!itemAtPoint(event.clientX, event.clientY)) {
+      clearTarget();
+      rejection = rejectedTarget = rejectedPosition = null;
+    }
+  };
+  const onDrop = (event) => {
+    if (!source || !target || !position) return;
+    event.preventDefault();
+    dispatchReorder(source, target, position);
+    finish();
+  };
+  const onDragEnd = (event) => {
+    if (source && rejectedTarget && rejectedPosition && rejection) dispatchRejected(source, rejectedTarget, rejectedPosition, rejection);
+    else if (source) {
+      const item = itemAtPoint(event.clientX, event.clientY);
+      const row = item && item !== source ? rowFor(item) : null;
+      if (item && row) {
+        const nextPosition = classify(row.getBoundingClientRect(), event.clientY, acceptsChildren(item));
+        const nextRejection = rejected(source, item, nextPosition);
+        if (!nextRejection) dispatchReorder(source, item, nextPosition);
+        else if (nextRejection.reason === "max-depth") dispatchRejected(source, item, nextPosition, nextRejection);
+      }
+    }
+    finish();
+  };
+  const syncTabStop = (preferred = null) => {
+    const items = visibleItems();
+    const next = preferred && items.includes(preferred) ? preferred : tabStop && items.includes(tabStop) ? tabStop : items[0] ?? null;
+    tabStop = next;
+    for (const item of items) item.dispatchEvent(new CustomEvent("ui-tree-roving-tab-stop", { detail: { active: item === next } }));
+  };
+  const syncStructure = () => {
+    for (const item of allItems()) item.dispatchEvent(new CustomEvent("ui-tree-structure-sync"));
+    syncTabStop();
+  };
+  const interactive = (event) => {
+    for (const node of event.composedPath()) {
+      if (node instanceof HTMLElement && node.matches?.(itemSelector)) break;
+      if (node instanceof HTMLElement && node.matches('a, button, input, select, textarea, [role="button"], [role="link"]')) return true;
+    }
+    return false;
+  };
+  const focusItem = (item) => { syncTabStop(item); item.focus(); };
+  const onFocusin = (event) => { if (!interactive(event)) { const item = itemFromEvent(event); if (item) syncTabStop(item); } };
+  const onExpansion = () => requestAnimationFrame(() => syncTabStop());
+  const onKeydown = (event) => {
+    if (interactive(event)) return;
+    const current = itemFromEvent(event);
+    if (!current) return;
+    const items = visibleItems();
+    const index = items.indexOf(current);
+    if (index < 0) return;
+    const next = event.key === "ArrowDown" ? items[index + 1] : event.key === "ArrowUp" ? items[index - 1] : event.key === "Home" ? items[0] : event.key === "End" ? items.at(-1) : null;
+    if (next) { event.preventDefault(); focusItem(next); return; }
+    if (event.key === "ArrowLeft") {
+      if (current.getAttribute("aria-expanded") === "true") { event.preventDefault(); current.dispatchEvent(new CustomEvent("ui-tree-request-expanded", { detail: { expanded: false, trigger: "keyboard" } })); }
+      else { const parent = parentItem(current, element); if (parent) { event.preventDefault(); focusItem(parent); } }
+    } else if (event.key === "ArrowRight") {
+      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); } }
+    }
+  };
+  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 };
+  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")));
+  syncStructure();
+  return () => {
+    stop();
+    observer.disconnect();
+    cancelHover();
+    for (const [name, listener] of Object.entries(listeners)) element.removeEventListener(name, listener);
+  };
+}