@threadlabs/looma 0.10.9 → 0.10.11

package/components/ui-dialog/ui-dialog.html

@@ -146,6 +146,23 @@
       overflow: auto;
       overscroll-behavior: contain;
       padding: var(--ui-space-5);
+      /* Each edge that hides content fades: the scroll fade every Looma scroller uses (see ui-scroll-area). */
+      --_ui-scroll-fade-direction: to bottom;
+      --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
+      mask-image: linear-gradient(
+        var(--_ui-scroll-fade-direction),
+        transparent,
+        #000 var(--_ui-scroll-fade-start),
+        #000 calc(100% - var(--_ui-scroll-fade-end)),
+        transparent
+      );
+      animation: ui-scroll-fade-start linear, ui-scroll-fade-start-hold linear, ui-scroll-fade-end-hold linear, ui-scroll-fade-end linear;
+      animation-timeline: scroll(self block);
+      animation-range:
+        0 var(--_ui-scroll-fade-size),
+        var(--_ui-scroll-fade-size) calc(100% + 1px),
+        -1px calc(100% - var(--_ui-scroll-fade-size)),
+        calc(100% - var(--_ui-scroll-fade-size)) 100%;
     }
 
     footer {

package/components/ui-editor-mention-menu/ui-editor-mention-menu.html

@@ -82,6 +82,23 @@
       overflow-y: auto;
       overscroll-behavior: contain;
       list-style: none;
+      /* Each edge that hides content fades: the scroll fade every Looma scroller uses (see ui-scroll-area). */
+      --_ui-scroll-fade-direction: to bottom;
+      --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
+      mask-image: linear-gradient(
+        var(--_ui-scroll-fade-direction),
+        transparent,
+        #000 var(--_ui-scroll-fade-start),
+        #000 calc(100% - var(--_ui-scroll-fade-end)),
+        transparent
+      );
+      animation: ui-scroll-fade-start linear, ui-scroll-fade-start-hold linear, ui-scroll-fade-end-hold linear, ui-scroll-fade-end linear;
+      animation-timeline: scroll(self block);
+      animation-range:
+        0 var(--_ui-scroll-fade-size),
+        var(--_ui-scroll-fade-size) calc(100% + 1px),
+        -1px calc(100% - var(--_ui-scroll-fade-size)),
+        calc(100% - var(--_ui-scroll-fade-size)) 100%;
     }
 
     .item {

package/components/ui-editor-slash-menu/ui-editor-slash-menu.html

@@ -90,6 +90,23 @@
       overflow-y: auto;
       max-height: 280px;
       overscroll-behavior: contain;
+      /* Each edge that hides content fades: the scroll fade every Looma scroller uses (see ui-scroll-area). */
+      --_ui-scroll-fade-direction: to bottom;
+      --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
+      mask-image: linear-gradient(
+        var(--_ui-scroll-fade-direction),
+        transparent,
+        #000 var(--_ui-scroll-fade-start),
+        #000 calc(100% - var(--_ui-scroll-fade-end)),
+        transparent
+      );
+      animation: ui-scroll-fade-start linear, ui-scroll-fade-start-hold linear, ui-scroll-fade-end-hold linear, ui-scroll-fade-end linear;
+      animation-timeline: scroll(self block);
+      animation-range:
+        0 var(--_ui-scroll-fade-size),
+        var(--_ui-scroll-fade-size) calc(100% + 1px),
+        -1px calc(100% - var(--_ui-scroll-fade-size)),
+        calc(100% - var(--_ui-scroll-fade-size)) 100%;
     }
 
     @media (max-width: 767px) {

package/components/ui-editor-toolbar/ui-editor-toolbar.html

@@ -1,15 +1,10 @@
-<template component="ui-editor-toolbar" controller="./ui-editor-toolbar.js">
+<template component="ui-editor-toolbar">
   <defs>
     <prop name="floating" type="boolean" default="false">Shows the toolbar as a floating bar beside the selection rather than pinned to the editor.</prop>
-    <state name="overflowStart" :value="false"></state>
-    <state name="overflowEnd" :value="false"></state>
   </defs>
   <div role="toolbar" aria-label="Editor toolbar"><div class="strip" $ref="strip"><slot></slot></div></div>
   <style>
     :host {
-      /* The colour the edge fades blend into: whatever the toolbar is painted with. */
-      --_matte: var(--ui-editor-toolbar-surface, var(--ui-surface));
-
       position: sticky;
       top: 0;
       z-index: var(--ui-editor-toolbar-z-index, 10);
@@ -44,41 +39,29 @@
       flex: 0 0 auto;
     }
 
-    /* The fades are mattes laid over the strip in the toolbar's own colour, not a mask, so a floating
-       toolbar's border and shadow stay whole. Each appears only while that edge hides controls. */
-    :host::before,
-    :host::after {
-      position: absolute;
-      z-index: 1;
-      inset-block: 0;
-      inline-size: var(--ui-editor-toolbar-fade-size, 32px);
-      content: "";
-      opacity: 0;
-      pointer-events: none;
-      transition: opacity var(--ui-motion-fast, 120ms) var(--ui-motion-ease, ease);
-    }
-
-    :host::before {
-      inset-inline-start: 0;
-      background: linear-gradient(to right, var(--_matte), transparent);
-    }
-
-    :host::after {
-      inset-inline-end: 0;
-      background: linear-gradient(to left, var(--_matte), transparent);
-    }
-
-    :host:dir(rtl)::before {
-      background: linear-gradient(to left, var(--_matte), transparent);
-    }
-
-    :host:dir(rtl)::after {
-      background: linear-gradient(to right, var(--_matte), transparent);
-    }
-
-    :host-state([overflowStart])::before,
-    :host-state([overflowEnd])::after {
-      opacity: 1;
+    /* The edge fades are the scroll fade every Looma scroller uses (see ui-scroll-area), a mask on the
+       strip, so a floating toolbar's border and shadow stay whole. */
+    .strip {
+      --_ui-scroll-fade-direction: to right;
+      --_ui-scroll-fade-size: var(--ui-editor-toolbar-fade-size, var(--ui-scroll-fade-size, 24px));
+      mask-image: linear-gradient(
+        var(--_ui-scroll-fade-direction),
+        transparent,
+        #000 var(--_ui-scroll-fade-start),
+        #000 calc(100% - var(--_ui-scroll-fade-end)),
+        transparent
+      );
+      animation: ui-scroll-fade-start linear, ui-scroll-fade-start-hold linear, ui-scroll-fade-end-hold linear, ui-scroll-fade-end linear;
+      animation-timeline: scroll(self inline);
+      animation-range:
+        0 var(--_ui-scroll-fade-size),
+        var(--_ui-scroll-fade-size) calc(100% + 1px),
+        -1px calc(100% - var(--_ui-scroll-fade-size)),
+        calc(100% - var(--_ui-scroll-fade-size)) 100%;
+    }
+
+    :host:dir(rtl) .strip {
+      --_ui-scroll-fade-direction: to left;
     }
 
     :slotted(.divider) {
@@ -128,8 +111,6 @@
 
     /* Inside LoomaEditor's sticky shell, the shell is the sticky surface. */
     .looma-editor__sticky-toolbar-shell :host {
-      --_matte: var(--ui-editor-toolbar-surface, var(--ui-surface));
-
       position: relative;
       min-height: var(--ui-editor-toolbar-min-height, 48px);
       background: transparent;

package/components/ui-reel/ui-reel.html

@@ -26,6 +26,30 @@
       overscroll-behavior-inline: contain;
     }
 
+    /* Each end that hides items fades: the scroll fade every Looma scroller uses (see ui-scroll-area). */
+    :host {
+      --_ui-scroll-fade-direction: to right;
+      --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
+      mask-image: linear-gradient(
+        var(--_ui-scroll-fade-direction),
+        transparent,
+        #000 var(--_ui-scroll-fade-start),
+        #000 calc(100% - var(--_ui-scroll-fade-end)),
+        transparent
+      );
+      animation: ui-scroll-fade-start linear, ui-scroll-fade-start-hold linear, ui-scroll-fade-end-hold linear, ui-scroll-fade-end linear;
+      animation-timeline: scroll(self inline);
+      animation-range:
+        0 var(--_ui-scroll-fade-size),
+        var(--_ui-scroll-fade-size) calc(100% + 1px),
+        -1px calc(100% - var(--_ui-scroll-fade-size)),
+        calc(100% - var(--_ui-scroll-fade-size)) 100%;
+    }
+
+    :host:dir(rtl) {
+      --_ui-scroll-fade-direction: to left;
+    }
+
     :host > :slotted(*) {
       min-inline-size: 0;
       flex: 0 0 var(--ui-reel-item-width, var(--_reel-item-width));

package/components/ui-scroll-area/ui-scroll-area.html

@@ -0,0 +1,56 @@
+<template component="ui-scroll-area">
+  <defs>
+    <prop name="orientation" type="vertical | horizontal" default="vertical"
+    >The direction the content scrolls. Vertical scrolls up and down and clips sideways overflow; horizontal scrolls sideways and clips vertical
+      overflow.</prop>
+  </defs>
+  <div><slot></slot></div>
+  <style>
+    /* A region that scrolls when its content outgrows it. Each edge that hides content fades, growing
+       in as the content leaves that edge (the scroll fade in tokens.css), so the reader can tell there
+       is more; an edge with nothing past it stays crisp, and content that fits shows no fade. The
+       fade is a mask, so it blends into whatever is behind the area without knowing its colour. */
+    :host {
+      display: block;
+      box-sizing: border-box;
+      min-block-size: 0;
+      min-inline-size: 0;
+      overflow-x: hidden;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      --_ui-scroll-fade-direction: to bottom;
+      --_ui-scroll-fade-inline: to right;
+      --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
+      mask-image: linear-gradient(
+        var(--_ui-scroll-fade-direction),
+        transparent,
+        #000 var(--_ui-scroll-fade-start),
+        #000 calc(100% - var(--_ui-scroll-fade-end)),
+        transparent
+      );
+      animation: ui-scroll-fade-start linear, ui-scroll-fade-start-hold linear, ui-scroll-fade-end-hold linear, ui-scroll-fade-end linear;
+      animation-timeline: scroll(self block);
+      animation-range:
+        0 var(--_ui-scroll-fade-size),
+        var(--_ui-scroll-fade-size) calc(100% + 1px),
+        -1px calc(100% - var(--_ui-scroll-fade-size)),
+        calc(100% - var(--_ui-scroll-fade-size)) 100%;
+    }
+
+    :host-state([orientation="horizontal"]) {
+      overflow-x: auto;
+      overflow-y: hidden;
+      --_ui-scroll-fade-direction: var(--_ui-scroll-fade-inline);
+      animation-timeline: scroll(self inline);
+    }
+
+    :host:dir(rtl) {
+      --_ui-scroll-fade-inline: to left;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-search-shell/ui-search-shell.html

@@ -125,6 +125,23 @@
       min-block-size: 0;
       overflow: auto;
       padding: var(--ui-space-2);
+      /* Each edge that hides content fades: the scroll fade every Looma scroller uses (see ui-scroll-area). */
+      --_ui-scroll-fade-direction: to bottom;
+      --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
+      mask-image: linear-gradient(
+        var(--_ui-scroll-fade-direction),
+        transparent,
+        #000 var(--_ui-scroll-fade-start),
+        #000 calc(100% - var(--_ui-scroll-fade-end)),
+        transparent
+      );
+      animation: ui-scroll-fade-start linear, ui-scroll-fade-start-hold linear, ui-scroll-fade-end-hold linear, ui-scroll-fade-end linear;
+      animation-timeline: scroll(self block);
+      animation-range:
+        0 var(--_ui-scroll-fade-size),
+        var(--_ui-scroll-fade-size) calc(100% + 1px),
+        -1px calc(100% - var(--_ui-scroll-fade-size)),
+        calc(100% - var(--_ui-scroll-fade-size)) 100%;
     }
 
     @media (max-width: 47.9375rem) {

package/components/ui-sidebar/ui-sidebar.html

@@ -49,10 +49,28 @@
       border-inline-start: 1px solid var(--ui-sidebar-border, var(--ui-border-default));
     }
 
+    /* The panel's content scrolls, and each edge that hides content fades: the scroll fade every
+       Looma scroller uses (see ui-scroll-area). */
     .content {
       flex: 1;
       min-block-size: 0;
       overflow: auto;
+      --_ui-scroll-fade-direction: to bottom;
+      --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
+      mask-image: linear-gradient(
+        var(--_ui-scroll-fade-direction),
+        transparent,
+        #000 var(--_ui-scroll-fade-start),
+        #000 calc(100% - var(--_ui-scroll-fade-end)),
+        transparent
+      );
+      animation: ui-scroll-fade-start linear, ui-scroll-fade-start-hold linear, ui-scroll-fade-end-hold linear, ui-scroll-fade-end linear;
+      animation-timeline: scroll(self block);
+      animation-range:
+        0 var(--_ui-scroll-fade-size),
+        var(--_ui-scroll-fade-size) calc(100% + 1px),
+        -1px calc(100% - var(--_ui-scroll-fade-size)),
+        calc(100% - var(--_ui-scroll-fade-size)) 100%;
     }
 
     /* Collapsed while docked. */

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");
   };