@threadlabs/looma 0.10.9 → 0.10.10

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. */