@threadlabs/looma 0.4.0 → 0.5.0

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

@@ -0,0 +1,326 @@
+<template component="ui-tree-item" controller="./ui-tree-item.js">
+  <defs>
+    <prop name="itemId" type="string" default="">itemId token.</prop>
+    <prop name="label" type="string" default="">The item's accessible name, also shown as the row text unless the label slot supplies content.</prop>
+    <prop name="dropDepth" type="number">dropDepth token.</prop>
+    <prop name="subtreeDepth" type="number">subtreeDepth token.</prop>
+    <prop name="container" type="boolean" default="false">container token.</prop>
+    <prop name="sortable" type="boolean" default="false">sortable token.</prop>
+    <prop name="dragType" type="string" default="item">dragType token.</prop>
+    <prop name="dropScope" type="string" default="">dropScope token.</prop>
+    <prop name="accepts" type="string" default="">accepts token.</prop>
+    <prop name="expanded" type="boolean" default="false">expanded token.</prop>
+    <prop name="selected" type="boolean" default="false">selected token.</prop>
+    <prop name="disabled" type="boolean" default="false">disabled token.</prop>
+    <state name="internalExpanded" :value="false"></state>
+    <state name="structuralLevel" :value="1"></state>
+    <state name="tabStop" :value="false"></state>
+    <state name="isContainer" :value="false"></state>
+    <event name="expand" bubbles="false" type="object({ id: string, expanded: boolean, trigger: keyboard | pointer | programmatic })"></event>
+  </defs>
+  <div
+    role="treeitem"
+    :aria-label="label"
+    :aria-level="structuralLevel"
+    :aria-selected="selected"
+    :aria-disabled="disabled"
+    :data-item-id="itemId"
+    :data-drag-type="dragType"
+    :data-drop-scope="dropScope"
+    :data-accepts="accepts"
+    :data-drop-depth="dropDepth"
+    :data-subtree-depth="subtreeDepth"
+  >
+    <div class="row" $ref="row">
+      <button
+        $if="sortable and not disabled"
+        class="drag-handle"
+        $ref="dragHandle"
+        type="button"
+        draggable="true"
+        :aria-label="format('Drag %s to reorder', label)"
+      >
+        <svg
+          aria-hidden="true"
+          focusable="false"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <circle cx="9" cy="12" r="1"></circle>
+          <circle cx="9" cy="5" r="1"></circle>
+          <circle cx="9" cy="19" r="1"></circle>
+          <circle cx="15" cy="12" r="1"></circle>
+          <circle cx="15" cy="5" r="1"></circle>
+          <circle cx="15" cy="19" r="1"></circle>
+        </svg>
+      </button>
+      <button class="disclosure" $ref="disclosure" type="button" :disabled="disabled" :hidden="not isContainer">
+        <span class="disclosure-icon" aria-hidden="true"></span>
+      </button>
+      <span class="leading"><slot name="leading"></slot></span>
+      <span class="label"><slot name="label"><template $value="label"></template></slot></span>
+      <span class="actions"><slot name="actions"></slot></span>
+      <span class="drop-indicator row-drop-indicator" aria-hidden="true"></span>
+    </div>
+    <div class="children" $ref="children" role="group" :hidden="not (isContainer and internalExpanded)"><slot></slot></div>
+    <span class="drop-indicator subtree-drop-indicator" aria-hidden="true"></span>
+  </div>
+  <style>
+    :host {
+      --_tree-row-min-height: 32px;
+
+      position: relative;
+      display: block;
+      min-inline-size: 0;
+      margin-inline-start: calc(var(--ui-tree-item-depth, 0) * var(--ui-tree-indent, 16px));
+    }
+
+    .row {
+      position: relative;
+      display: grid;
+      grid-template-columns: 20px auto minmax(0, 1fr) auto;
+      align-items: center;
+      min-block-size: var(--ui-tree-row-min-height, var(--_tree-row-min-height));
+      min-inline-size: 0;
+      font-size: var(--ui-tree-font-size, var(--ui-font-size-ui, 0.9375rem));
+      border-radius: var(--ui-radius-md);
+      color: var(--ui-text-secondary);
+      transition:
+        background-color var(--ui-motion-fast) var(--ui-motion-ease),
+        color var(--ui-motion-fast) var(--ui-motion-ease),
+        opacity var(--ui-motion-fast) var(--ui-motion-ease),
+        box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+        min-block-size var(--ui-motion-base) var(--ui-motion-ease);
+    }
+
+    .row:hover,
+    :host-state([selected]) .row,
+    .row:focus-within {
+      color: var(--ui-text-primary);
+      background: var(--ui-surface-muted);
+    }
+
+    :host-state([disabled]) .row {
+      opacity: 0.55;
+    }
+
+    :host[data-dragging] .row {
+      opacity: 0.42;
+    }
+
+    :host:focus {
+      outline: none;
+    }
+
+    :host:focus-visible .row {
+      box-shadow: 0 0 0 2px var(--ui-focus-ring);
+    }
+
+    :host[data-drop-position="inside"] .row {
+      background: var(--ui-accent-subtle);
+      box-shadow: inset 0 0 0 1px var(--ui-tree-drop-color, var(--ui-accent-solid));
+    }
+
+    .disclosure,
+    .disclosure-spacer {
+      grid-column: 1;
+      grid-row: 1;
+      inline-size: 20px;
+      block-size: 28px;
+    }
+
+    .disclosure {
+      display: grid;
+      place-items: center;
+      padding: 0;
+      color: var(--ui-text-muted);
+      background: transparent;
+      border: 0;
+      border-radius: var(--ui-radius-sm);
+      cursor: pointer;
+    }
+
+    .disclosure[hidden] {
+      display: none;
+    }
+
+    .disclosure:hover {
+      color: var(--ui-text-primary);
+      background: var(--ui-surface-elevated);
+    }
+
+    .disclosure-icon {
+      display: grid;
+      place-items: center;
+      inline-size: 14px;
+      block-size: 14px;
+      transform: rotate(-90deg);
+      transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    .disclosure-icon::before {
+      display: block;
+      inline-size: 0.45rem;
+      block-size: 0.45rem;
+      border-inline-end: 2px solid currentColor;
+      border-block-end: 2px solid currentColor;
+      content: "";
+      /* A chevron's ink sits below its box centre; lift it so it centres optically (in either rotation). */
+      transform: translateY(-20%) rotate(45deg);
+    }
+
+    :host[aria-expanded="true"] .disclosure-icon {
+      transform: rotate(0deg);
+    }
+
+    /* Lucide grip-vertical, filling the handle as in Looma 0.2. */
+    .drag-handle svg {
+      display: block;
+      inline-size: 100%;
+      block-size: 100%;
+    }
+
+    /* Slotted content is outside this scope, so :has() cannot see it; hide only a truly empty slot. */
+    .leading {
+      display: inline-grid;
+      place-items: center;
+      grid-column: 2;
+      grid-row: 1;
+      inline-size: 1em;
+      block-size: 1em;
+      margin-inline-start: var(--ui-space-1);
+      color: var(--ui-text-muted);
+    }
+
+    .leading:empty {
+      display: none;
+    }
+
+    /* Icons match the label's size (as in Knit's tree): an unsized SVG would otherwise render 300×150. */
+    :slotted(svg),
+    :slotted(img) {
+      display: block;
+      inline-size: 1em;
+      block-size: 1em;
+      flex: none;
+    }
+
+    .label {
+      grid-column: 3;
+      grid-row: 1;
+      min-inline-size: 0;
+      padding: var(--ui-space-1) var(--ui-space-2);
+    }
+
+    .actions {
+      grid-column: 4;
+      grid-row: 1;
+      display: inline-flex;
+      align-items: center;
+      min-inline-size: 0;
+    }
+
+    .drag-handle {
+      position: absolute;
+      z-index: 2;
+      inset-block-start: 50%;
+      inset-inline-start: -22px;
+      inline-size: 20px;
+      block-size: 32px;
+      display: grid;
+      place-items: center;
+      padding: 7px 3px;
+      color: var(--ui-text-muted);
+      background: var(--ui-surface-elevated);
+      border: 1px solid transparent;
+      border-radius: var(--ui-radius-sm);
+      cursor: grab;
+      /* Hidden until the row is hovered, but always hittable: the handle sits outside the row, and moving
+         the pointer onto it must not hide it on the way. */
+      opacity: 0;
+      transform: translateY(-50%);
+      transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    .row:hover .drag-handle,
+    .drag-handle:hover,
+    .drag-handle:focus-visible,
+    :host[data-dragging] .drag-handle {
+      opacity: 1;
+    }
+
+    .drag-handle:active {
+      cursor: grabbing;
+    }
+
+    .drop-indicator {
+      position: absolute;
+      z-index: 3;
+      inset-inline: 1px;
+      display: none;
+      block-size: 2px;
+      border-radius: 999px;
+      background: var(--ui-tree-drop-color, var(--ui-accent-solid));
+      pointer-events: none;
+    }
+
+    .drop-indicator::before,
+    .drop-indicator::after {
+      content: "";
+      position: absolute;
+      inset-block-start: 50%;
+      inline-size: 7px;
+      block-size: 7px;
+      border: 2px solid var(--ui-tree-drop-color, var(--ui-accent-solid));
+      border-radius: 999px;
+      background: var(--ui-surface-elevated);
+      transform: translateY(-50%);
+    }
+
+    .drop-indicator::before {
+      inset-inline-start: -1px;
+    }
+    .drop-indicator::after {
+      inset-inline-end: -1px;
+    }
+
+    :host[data-drop-position="before"] .row-drop-indicator {
+      display: block;
+      inset-block-start: -1px;
+    }
+
+    :host[data-drop-position="after"] .subtree-drop-indicator {
+      display: block;
+      inset-block-end: -1px;
+    }
+
+    .children[hidden] {
+      display: none;
+    }
+
+    html[data-ui-input-modality="touch"] :host {
+      --_tree-row-min-height: 44px;
+    }
+
+    html[data-ui-input-modality="touch"] :host .drag-handle {
+      display: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .row,
+      .disclosure-icon,
+      .drag-handle {
+        transition: 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-item/ui-tree-item.js

@@ -0,0 +1,94 @@
+import { trackInputModality } from "../shared/input-modality.js";
+
+function triggerFor(event) {
+  return event.detail === 0 ? "keyboard" : "pointer";
+}
+
+function parentItem(element) {
+  return element.parentElement?.closest('[data-component~="ui-tree-item"]') ?? null;
+}
+
+/** Synchronizes an inferred tree hierarchy after nested component lowering. */
+export default function controller(host) {
+  const element = host.element;
+  const { row, disclosure, children } = host.refs;
+  // Touch use enlarges rows and hides drag handles (see the template's styles).
+  trackInputModality(element.ownerDocument);
+  const childItems = () => Array.from(children?.children ?? [])
+    .filter((child) => child.matches?.('[data-component~="ui-tree-item"]'));
+  let lastExternalExpanded = Boolean(host.state.expanded);
+  host.state.internalExpanded = lastExternalExpanded;
+
+  const isContainer = () => Boolean(host.state.container) || childItems().length > 0;
+  const updateLevel = () => {
+    const tree = element.closest('[data-component~="ui-tree"]');
+    let ancestor = parentItem(element);
+    let level = 1;
+    while (ancestor && tree?.contains(ancestor)) {
+      level += 1;
+      ancestor = parentItem(ancestor);
+    }
+    host.state.structuralLevel = level;
+  };
+
+  const apply = () => {
+    const externalExpanded = Boolean(host.state.expanded);
+    if (externalExpanded !== lastExternalExpanded) {
+      lastExternalExpanded = externalExpanded;
+      host.state.internalExpanded = externalExpanded;
+    }
+    const container = isContainer();
+    const expanded = container && Boolean(host.state.internalExpanded);
+    const name = String(host.state.label || "Unnamed item");
+    host.state.isContainer = container;
+    // 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");
+    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));
+    disclosure.setAttribute("aria-label", `${expanded ? "Collapse" : "Expand"} ${name}`);
+  };
+
+  const setExpanded = (next, trigger) => {
+    if (!isContainer() || host.state.disabled || Boolean(host.state.internalExpanded) === next) return;
+    host.state.internalExpanded = next;
+    apply();
+    host.dispatch("expand", { id: String(host.state.itemId || ""), expanded: next, trigger });
+    element.dispatchEvent(new CustomEvent("ui-tree-expansion-change", { bubbles: true }));
+  };
+  const onDisclosureClick = (event) => { event.stopPropagation(); setExpanded(!Boolean(host.state.internalExpanded), triggerFor(event)); };
+  const onRowClick = (event) => {
+    if (!isContainer() || host.state.disabled) return;
+    const interactive = event.composedPath().some((node) => node instanceof HTMLElement && node.matches?.('a, button, input, select, textarea, [role="button"], [role="link"]'));
+    if (!interactive) setExpanded(!Boolean(host.state.internalExpanded), triggerFor(event));
+  };
+  const onRoving = (event) => { host.state.tabStop = Boolean(event.detail?.active) && !host.state.disabled; apply(); };
+  const onExpansionRequest = (event) => {
+    if (typeof event.detail?.expanded === "boolean") setExpanded(event.detail.expanded, event.detail.trigger ?? "keyboard");
+  };
+  const onStructure = () => { updateLevel(); apply(); };
+  const onAutoExpand = () => setExpanded(true, "pointer");
+
+  element.addEventListener("ui-tree-auto-expand", onAutoExpand);
+  element.addEventListener("ui-tree-structure-sync", onStructure);
+  element.addEventListener("ui-tree-roving-tab-stop", onRoving);
+  element.addEventListener("ui-tree-request-expanded", onExpansionRequest);
+  disclosure.addEventListener("click", onDisclosureClick);
+  row.addEventListener("click", onRowClick);
+  const observer = new MutationObserver(() => { updateLevel(); apply(); });
+  observer.observe(children, { childList: true });
+  updateLevel();
+  const stop = host.effect(apply);
+  apply();
+  return () => {
+    stop?.();
+    observer.disconnect();
+    element.removeEventListener("ui-tree-auto-expand", onAutoExpand);
+    element.removeEventListener("ui-tree-structure-sync", onStructure);
+    element.removeEventListener("ui-tree-roving-tab-stop", onRoving);
+    element.removeEventListener("ui-tree-request-expanded", onExpansionRequest);
+    disclosure.removeEventListener("click", onDisclosureClick);
+    row.removeEventListener("click", onRowClick);
+  };
+}