@threadlabs/looma 0.10.1 → 0.10.3

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

@@ -9,6 +9,9 @@
     <prop name="maxDepth" type="number" default="0"
     >The deepest level a drag may produce, counting the top level as 1. A drop that would place the dragged item, or any item beneath it, deeper than this is
       refused and reported as reorder-rejected. 0 means no limit.</prop>
+    <prop name="marquee" type="boolean" default="false"
+    >Scrolls a name too long for its row while that row is hovered or focused, then puts it back. 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>
     <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 })"
@@ -20,6 +23,12 @@
   </defs>
   <div role="tree"><slot></slot></div>
   <style>
+    /* Reaches the items the way density does, so the setting lives on the tree the way a reader
+       thinks about it: this list scrolls its long names. */
+    :host-state([marquee]) {
+      --ui-tree-item-marquee: 1;
+    }
+
     :host-state([density="compact"]) {
       --ui-tree-item-min-block-size: var(--ui-control-size-sm);
       --ui-tree-item-font-size: var(--ui-font-size-sm);

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

@@ -31,6 +31,9 @@
     <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>
+    <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>
     <prop name="disabled" type="boolean" default="false"
     >Makes the item unavailable: faded, skipped by keyboard navigation, unable to expand or be dragged, and closed to drops inside it.</prop>
     <state name="internalExpanded" :value="false"></state>
@@ -83,7 +86,7 @@
         <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="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="drop-indicator row-drop-indicator" aria-hidden="true"></span>
     </div>
@@ -242,16 +245,79 @@
       display: flex;
       align-items: center;
       min-inline-size: 0;
+      /* The cell clips: a name longer than the row slides inside it rather than over its icons. */
+      overflow: hidden;
       padding: var(--ui-tree-item-label-padding-block, var(--ui-space-1)) var(--ui-tree-item-label-padding-inline, var(--ui-space-2));
     }
 
     /* Slotted label content fills the cell, so a link is the row's hit area rather than sizing to
        its own text and reading as overflow. */
-    .label > :slotted(*) {
+    .label-text {
+      display: flex;
+      align-items: center;
+      /* Stretches, so slotted content can still be the row's full-height hit area. */
+      align-self: stretch;
+      block-size: 100%;
+      min-inline-size: 0;
+      inline-size: 100%;
+      white-space: nowrap;
+    }
+
+    .label-text > :slotted(*) {
       flex: 1 1 auto;
       min-inline-size: 0;
     }
 
+    /* A hovered row reads its whole name: the label slides far enough to show the end, waits
+       there, and comes back. Only when it actually overflows — the controller measures by how
+       much — after the controls have taken their place over its end — and hands over the distance
+       and a duration from it, so a longer name travels no faster. */
+    .row[data-ui-marquee] > .label > .label-text {
+      /* Once, and it stays at the end while the pointer is there: a name that keeps sliding back
+         and forth under the pointer is harder to read than one that arrives and holds. */
+      animation: ui-tree-item-marquee var(--_marquee-duration) linear 0.5s 1 normal forwards;
+      will-change: transform;
+    }
+
+    /* While it slides, the start fades too: the name is leaving the cell at both ends, and a hard
+       edge beside the icon reads as a collision rather than as more text. */
+    .row[data-ui-marquee] > .label {
+      mask-image: linear-gradient(
+        to right,
+        transparent 0,
+        #000 var(--ui-space-2),
+        #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
+        transparent calc(100% - var(--_tree-actions-width, 1.75rem))
+      );
+    }
+
+    .row[data-ui-marquee] > .label:dir(rtl) {
+      mask-image: linear-gradient(
+        to left,
+        transparent 0,
+        #000 var(--ui-space-2),
+        #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
+        transparent calc(100% - var(--_tree-actions-width, 1.75rem))
+      );
+    }
+
+    @keyframes ui-tree-item-marquee {
+      from {
+        transform: translateX(0);
+      }
+
+      to {
+        transform: translateX(var(--_marquee-distance));
+      }
+    }
+
+    /* Reduced motion keeps the fade, which already says the name continues. */
+    @media (prefers-reduced-motion: reduce) {
+      .row[data-ui-marquee] > .label > .label-text {
+        animation: none;
+      }
+    }
+
     /* 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,

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

@@ -11,7 +11,7 @@ function parentItem(element) {
 /** Synchronizes an inferred tree hierarchy after nested component lowering. */
 export default function controller(host) {
   const element = host.element;
-  const { row, disclosure, children, actions } = host.refs;
+  const { row, disclosure, children, actions, labelText } = host.refs;
   // Touch use enlarges rows and hides drag handles (see the template's styles).
   trackInputModality(element.ownerDocument);
   const childItems = () => Array.from(children?.children ?? [])
@@ -81,6 +81,42 @@ export default function controller(host) {
   updateLevel();
   const stop = host.effect(apply);
   apply();
+  /**
+   * A hovered row reads its whole name. The controls overlay the label's end rather than taking
+   * width from it, so the width the name actually has while hovered is the label minus them:
+   * measuring against the full label scrolls short and leaves the tail under the controls.
+   */
+  const MARQUEE_SPEED = 36; // CSS pixels per second.
+  const MARQUEE_SLACK = 4; // So the tail clears the edge rather than stopping on it.
+  // The tree sets this for its items; an item's own prop overrides it either way.
+  const marqueeWanted = () => host.state.marquee
+    || getComputedStyle(element).getPropertyValue("--ui-tree-item-marquee").trim() === "1";
+  const startMarquee = () => {
+    if (!labelText || !marqueeWanted()) return;
+    const covered = actions?.offsetWidth ?? 0;
+    const visible = labelText.clientWidth - covered;
+    const overflow = Math.round(labelText.scrollWidth - visible);
+    if (overflow <= 0) return;
+    const distance = overflow + MARQUEE_SLACK;
+    const rightToLeft = getComputedStyle(element).direction === "rtl";
+    row.style.setProperty("--_marquee-distance", `${rightToLeft ? distance : -distance}px`);
+    row.style.setProperty(
+      "--_marquee-duration",
+      `${Math.min(10, Math.max(1.4, distance / MARQUEE_SPEED)).toFixed(2)}s`
+    );
+    row.dataset.uiMarquee = "";
+  };
+  const stopMarquee = () => {
+    delete row.dataset.uiMarquee;
+    row.style.removeProperty("--_marquee-distance");
+    row.style.removeProperty("--_marquee-duration");
+  };
+  // Pointer and focus both count: a keyboard walk through a tree reads the same names.
+  row.addEventListener("pointerenter", startMarquee);
+  row.addEventListener("pointerleave", stopMarquee);
+  row.addEventListener("focusin", startMarquee);
+  row.addEventListener("focusout", stopMarquee);
+
   // The label's fade has to end where the controls begin, and only the controls know their width.
   const actionsSize = new ResizeObserver(([entry]) => {
     const width = entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;
@@ -92,6 +128,10 @@ export default function controller(host) {
     stop?.();
     observer.disconnect();
     actionsSize.disconnect();
+    row.removeEventListener("pointerenter", startMarquee);
+    row.removeEventListener("pointerleave", stopMarquee);
+    row.removeEventListener("focusin", startMarquee);
+    row.removeEventListener("focusout", stopMarquee);
     element.removeEventListener("ui-tree-auto-expand", onAutoExpand);
     element.removeEventListener("ui-tree-structure-sync", onStructure);
     element.removeEventListener("ui-tree-roving-tab-stop", onRoving);