@threadlabs/looma 0.10.8 → 0.10.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.10.8",
+  "version": "0.10.10",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-dialog.css

@@ -135,6 +135,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/styles/ui-editor-mention-menu.css

@@ -41,6 +41,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/styles/ui-editor-slash-menu.css

@@ -58,6 +58,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/styles/ui-editor-toolbar.css

@@ -1,9 +1,6 @@
 /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
 @scope ([data-component~="ui-editor-toolbar"]) to ([data-component], [data-slotted]) {
 :scope {
-      /* 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);
@@ -34,41 +31,29 @@
       display: none;
     }
 
-    /* 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. */
-    :scope::before,
-    :scope::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);
-    }
-
-    :scope::before {
-      inset-inline-start: 0;
-      background: linear-gradient(to right, var(--_matte), transparent);
-    }
-
-    :scope::after {
-      inset-inline-end: 0;
-      background: linear-gradient(to left, var(--_matte), transparent);
-    }
-
-    :scope:dir(rtl)::before {
-      background: linear-gradient(to left, var(--_matte), transparent);
-    }
-
-    :scope:dir(rtl)::after {
-      background: linear-gradient(to right, var(--_matte), transparent);
-    }
-
-    :scope[data-ui-editor-toolbar-state~="overflowStart"]::before,
-    :scope[data-ui-editor-toolbar-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%;
+    }
+
+    :scope:dir(rtl) .strip {
+      --_ui-scroll-fade-direction: to left;
     }
 
     :scope[data-ui-editor-toolbar-state~="floating"] {
@@ -110,8 +95,6 @@
 
     /* Inside LoomaEditor's sticky shell, the shell is the sticky surface. */
     .looma-editor__sticky-toolbar-shell :scope {
-      --_matte: var(--ui-editor-toolbar-surface, var(--ui-surface));
-
       position: relative;
       min-height: var(--ui-editor-toolbar-min-height, 48px);
       background: transparent;
@@ -149,8 +132,8 @@
       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. */
+    /* 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. */
 
     :where([data-slotted], [data-slotted] *):is(.divider) {
       width: 1px;

package/styles/ui-reel.css

@@ -14,6 +14,30 @@
       overscroll-behavior-inline: contain;
     }
 
+    /* Each end that hides items fades: the scroll fade every Looma scroller uses (see ui-scroll-area). */
+    :scope {
+      --_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%;
+    }
+
+    :scope:dir(rtl) {
+      --_ui-scroll-fade-direction: to left;
+    }
+
     :scope[data-ui-reel-state~="gap=xs"] {
       --_reel-gap: var(--ui-space-2);
     }
@@ -48,7 +72,9 @@
     }
 }
 @scope ([data-component~="ui-reel"]) to ([data-component]) {
-:scope > :where([data-slotted], [data-slotted] *):is(*) {
+/* Each end that hides items fades: the scroll fade every Looma scroller uses (see ui-scroll-area). */
+
+    :scope > :where([data-slotted], [data-slotted] *):is(*) {
       min-inline-size: 0;
       flex: 0 0 var(--ui-reel-item-width, var(--_reel-item-width));
     }

package/styles/ui-scroll-area.css

@@ -0,0 +1,57 @@
+/* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@scope ([data-component~="ui-scroll-area"]) to ([data-component], [data-slotted]) {
+/* 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. */
+    :scope {
+      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%;
+    }
+
+    :scope[data-ui-scroll-area-state~="orientation=horizontal"] {
+      overflow-x: auto;
+      overflow-y: hidden;
+      --_ui-scroll-fade-direction: var(--_ui-scroll-fade-inline);
+      animation-timeline: scroll(self inline);
+    }
+
+    :scope:dir(rtl) {
+      --_ui-scroll-fade-inline: to left;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-scroll-area"]) to ([data-component]) {
+/* 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. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-search-shell.css

@@ -85,6 +85,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/styles/ui-sidebar.css

@@ -18,10 +18,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. */
@@ -150,7 +168,10 @@
     }
 }
 @scope ([data-component~="ui-sidebar"]) to ([data-component]) {
-/* Collapsed while docked. */
+/* The panel's content scrolls, and each edge that hides content fades: the scroll fade every
+       Looma scroller uses (see ui-scroll-area). */
+
+    /* Collapsed while docked. */
 
     /* Drawer: a popover in the top layer, sliding in from its edge. Closed popovers are hidden by the UA. */
 

package/tokens.css

@@ -61,6 +61,9 @@
     --ui-motion-fast: 120ms;
     --ui-motion-ease: cubic-bezier(0.2, 0, 0.2, 1);
 
+    /* Scrolling: how far the fade reaches at each edge of a scroller that hides content. */
+    --ui-scroll-fade-size: 24px;
+
     /* Controls: the contract every button and field shares. */
     --ui-control-size: 2.5rem;
     --ui-control-size-sm: 2rem;
@@ -219,3 +222,44 @@
     }
   }
 }
+
+/* The scroll fade every Looma scroller uses (see ui-scroll-area). Scroll-driven animations grow each
+   edge's fade in as content leaves that edge, up to the scroller's --_ui-scroll-fade-size, and take it
+   away as the last content arrives. A scroller whose content fits has no active scroll timeline, so it
+   shows no fade; a browser without scroll-driven animations shows none either.
+
+   Each edge is a ramp and a hold, neither with a fill, whose ranges never end inside the scroll range
+   with a value left over: an animation that finishes holding a value keeps it (in Chromium) after its
+   scroller stops overflowing, which would leave a fade over content that fits.
+
+   Registered here, at the top level, because a component's scoped styles cannot register properties
+   or declare keyframes. */
+@property --_ui-scroll-fade-start {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --_ui-scroll-fade-end {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@keyframes ui-scroll-fade-start {
+  from { --_ui-scroll-fade-start: 0px; }
+  to { --_ui-scroll-fade-start: var(--_ui-scroll-fade-size, 24px); }
+}
+
+@keyframes ui-scroll-fade-start-hold {
+  from, to { --_ui-scroll-fade-start: var(--_ui-scroll-fade-size, 24px); }
+}
+
+@keyframes ui-scroll-fade-end-hold {
+  from, to { --_ui-scroll-fade-end: var(--_ui-scroll-fade-size, 24px); }
+}
+
+@keyframes ui-scroll-fade-end {
+  from { --_ui-scroll-fade-end: var(--_ui-scroll-fade-size, 24px); }
+  to { --_ui-scroll-fade-end: 0px; }
+}

package/vanilla/UiEditorToolbar.js

@@ -1,9 +1,8 @@
 // Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
 import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
-import * as controller from "../components/ui-editor-toolbar/ui-editor-toolbar.js";
 import "../styles/ui-editor-toolbar.css";
 
-const definition = {...{"contract":{"tag":"ui-editor-toolbar","props":{"floating":{"type":"boolean","required":false,"target":{"attribute":"floating"},"default":false}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"toolbar"},{"kind":"literal","name":"aria-label","value":"Editor toolbar"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"strip"}],"children":[{"kind":"slot"}],"ref":"strip"}]},"declarations":[{"kind":"state","name":"overflowStart","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"overflowEnd","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-editor-toolbar","props":{"floating":{"type":"boolean","required":false,"target":{"attribute":"floating"},"default":false}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"toolbar"},{"kind":"literal","name":"aria-label","value":"Editor toolbar"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"strip"}],"children":[{"kind":"slot"}],"ref":"strip"}]},"declarations":[],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiEditorToolbar(options = {}) {
   const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
@@ -28,7 +27,6 @@ export function createUiEditorToolbar(options = {}) {
   }
   element.append(element0);
   manageComponentLifecycle(element, definition, { props: componentProps, projected,
-    controller,
   });
   return element;
 }

package/vanilla/UiScrollArea.d.ts

@@ -0,0 +1,14 @@
+// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+export interface UiScrollAreaEventMap {
+}
+export interface UiScrollAreaElement extends HTMLDivElement {
+  addEventListener<K extends keyof UiScrollAreaEventMap>(type: K, listener: (this: UiScrollAreaElement, event: UiScrollAreaEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiScrollAreaEventMap>(type: K, listener: (this: UiScrollAreaElement, event: UiScrollAreaEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiScrollAreaProps {
+  orientation?: "vertical" | "horizontal" | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiScrollArea(props?: UiScrollAreaProps): UiScrollAreaElement;

package/vanilla/UiScrollArea.js

@@ -0,0 +1,28 @@
+// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
+import "../styles/ui-scroll-area.css";
+
+export function createUiScrollArea(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const prop0 = componentProps["orientation"] === undefined ? "vertical" : componentProps["orientation"];
+  const element = document.createElement("div");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === undefined || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  element.setAttribute("data-component", "ui-scroll-area");
+  if (children.length > 0) {
+    for (const child of children) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, ""]);
+      element.append(node);
+    }
+  } else {
+  }
+  manageGeneratedProps(element, [
+    { name: "orientation", attribute: "data-orientation", value: componentProps["orientation"], default: "vertical", type: ["vertical","horizontal"], required: false },
+  ]);
+  return element;
+}
+

package/vanilla/index.js

@@ -31,6 +31,7 @@ export * from "./UiPopover.js";
 export * from "./UiRadio.js";
 export * from "./UiRadioGroup.js";
 export * from "./UiReel.js";
+export * from "./UiScrollArea.js";
 export * from "./UiSearchResultRow.js";
 export * from "./UiSearchShell.js";
 export * from "./UiSelect.js";

package/vue/UiDialog.vue

@@ -202,6 +202,27 @@ html[data-ui-input-modality="touch"] [data-component~="ui-dialog"] .close {
   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/vue/UiEditorMentionMenu.vue

@@ -144,6 +144,27 @@ useComponentHost(controllerModule.default, {
   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/vue/UiEditorSlashMenu.vue

@@ -152,6 +152,27 @@ useComponentHost(controllerModule.default, {
   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) {