@threadlabs/looma 0.10.10 → 0.10.11

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

@@ -85,8 +85,8 @@
       <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"><span class="label-text" $ref="labelText"><slot name="label"><template $value="label"></template></slot></span></span>
+      <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="drop-indicator row-drop-indicator" aria-hidden="true"></span>
     </div>
@@ -221,6 +221,9 @@
       block-size: 1em;
       margin-inline-start: var(--ui-space-1);
       color: var(--ui-text-muted);
+      /* Above the label, so a sliding name passes under the icon. */
+      position: relative;
+      z-index: 1;
     }
 
     .leading:empty {
@@ -248,6 +251,9 @@
       /* 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));
+      /* The length of the fade before the controls. The label's one flex child lays out no gap; this
+         is where the controller reads the length in pixels to stop a sliding name before the fade. */
+      column-gap: var(--ui-space-3);
     }
 
     /* Slotted label content fills the cell, so a link is the row's hit area rather than sizing to
@@ -268,6 +274,27 @@
       min-inline-size: 0;
     }
 
+    /* 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 {
+      text-overflow: clip;
+      mask-image: linear-gradient(
+        to right,
+        #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
+        transparent calc(100% - var(--_tree-actions-width, 1.75rem))
+      );
+    }
+
+    .row:hover > .label:dir(rtl),
+    .row:focus-within > .label:dir(rtl) {
+      mask-image: linear-gradient(
+        to left,
+        #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
+        transparent calc(100% - var(--_tree-actions-width, 1.75rem))
+      );
+    }
+
     /* 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
@@ -279,13 +306,17 @@
       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. */
+    /* This comes after the hover fade, which it replaces at the same specificity. While the name
+       slides, the label reaches back under the icon (the controller measures how far) with its text
+       where it was, and fades out across that stretch, gone by the icon's middle: the name slips
+       under the icon rather than stopping at a hard edge beside it. */
     .row[data-ui-marquee] > .label {
+      margin-inline-start: calc(-1 * var(--_marquee-lead, 0px));
+      padding-inline-start: calc(var(--_marquee-lead, 0px) + var(--ui-tree-item-label-padding-inline, var(--ui-space-2)));
       mask-image: linear-gradient(
         to right,
-        transparent 0,
-        #000 var(--ui-space-2),
+        transparent calc(var(--_marquee-lead, 0px) / 2),
+        #000 calc(var(--_marquee-lead, 0px) + var(--ui-tree-item-label-padding-inline, 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))
       );
@@ -294,8 +325,8 @@
     .row[data-ui-marquee] > .label:dir(rtl) {
       mask-image: linear-gradient(
         to left,
-        transparent 0,
-        #000 var(--ui-space-2),
+        transparent calc(var(--_marquee-lead, 0px) / 2),
+        #000 calc(var(--_marquee-lead, 0px) + var(--ui-tree-item-label-padding-inline, 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))
       );
@@ -318,27 +349,6 @@
       }
     }
 
-    /* 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 {
-      text-overflow: clip;
-      mask-image: linear-gradient(
-        to right,
-        #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
-        transparent calc(100% - var(--_tree-actions-width, 1.75rem))
-      );
-    }
-
-    .row:hover > .label:dir(rtl),
-    .row:focus-within > .label:dir(rtl) {
-      mask-image: linear-gradient(
-        to left,
-        #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
-        transparent calc(100% - var(--_tree-actions-width, 1.75rem))
-      );
-    }
-
     .row:hover > .label > :slotted(*),
     .row:focus-within > .label > :slotted(*) {
       text-overflow: clip;

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

@@ -19,7 +19,7 @@ const CONTROLS = [
 
 export default function controller(host) {
   const element = host.element;
-  const { row, disclosure, children, actions, labelText } = host.refs;
+  const { row, disclosure, children, leading, label, 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 ?? [])
@@ -98,23 +98,28 @@ export default function controller(host) {
   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.
+   * A hovered row reads its whole name. The label box always fills the row, so the name is measured
+   * at its own width; it has to end where the fade before the controls begins, since the controls
+   * overlay the label's end rather than taking width from it.
    */
   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;
+    if (!labelText || !label || !marqueeWanted()) return;
+    labelText.style.flex = "none";
+    labelText.style.inlineSize = "max-content";
+    const text = labelText.getBoundingClientRect();
+    labelText.style.flex = labelText.style.inlineSize = "";
+    const cell = label.getBoundingClientRect();
+    const icon = leading?.getBoundingClientRect();
+    const stop = (actions?.offsetWidth ?? 0) + parseFloat(getComputedStyle(label).columnGap);
     const rightToLeft = getComputedStyle(element).direction === "rtl";
+    const distance = Math.ceil(rightToLeft ? cell.left + stop - text.left : text.right - (cell.right - stop));
+    if (distance <= 0) return;
+    const lead = icon?.width ? (rightToLeft ? icon.right - cell.right : cell.left - icon.left) : 0;
+    row.style.setProperty("--_marquee-lead", `${Math.max(0, lead)}px`);
     row.style.setProperty("--_marquee-distance", `${rightToLeft ? distance : -distance}px`);
     row.style.setProperty(
       "--_marquee-duration",
@@ -124,6 +129,7 @@ export default function controller(host) {
   };
   const stopMarquee = () => {
     delete row.dataset.uiMarquee;
+    row.style.removeProperty("--_marquee-lead");
     row.style.removeProperty("--_marquee-distance");
     row.style.removeProperty("--_marquee-duration");
   };