@threadlabs/looma 0.10.9 → 0.10.11

package/vanilla/UiTreeItem.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-tree-item/ui-tree-item.js";
 import "../styles/ui-tree-item.css";
 
-const definition = {...{"contract":{"tag":"ui-tree-item","props":{"accepts":{"type":"string","required":false,"target":{"attribute":"data-accepts"},"default":""},"container":{"type":"boolean","required":false,"target":{"attribute":"container"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"aria-disabled"},"default":false},"dragType":{"type":"string","required":false,"target":{"attribute":"data-drag-type"},"default":"item"},"dropDepth":{"type":"number","required":false,"target":{"attribute":"data-drop-depth"}},"dropScope":{"type":"string","required":false,"target":{"attribute":"data-drop-scope"},"default":""},"expanded":{"type":"boolean","required":false,"target":{"attribute":"expanded"},"default":false},"itemId":{"type":"string","required":false,"target":{"attribute":"data-item-id"},"default":""},"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":""},"marquee":{"type":"boolean","required":false,"target":{"attribute":"marquee"},"default":false},"selected":{"type":"boolean","required":false,"target":{"attribute":"aria-selected"},"default":false},"sortable":{"type":"boolean","required":false,"target":{"attribute":"sortable"},"default":false},"subtreeDepth":{"type":"number","required":false,"target":{"attribute":"data-subtree-depth"}}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"treeitem"},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}},{"kind":"attribute","name":"aria-level","expression":"structuralLevel","expressionPlan":{"source":"structuralLevel","ast":{"kind":"id","name":"structuralLevel"},"dependencies":["structuralLevel"]}},{"kind":"attribute","name":"aria-selected","expression":"selected","expressionPlan":{"source":"selected","ast":{"kind":"id","name":"selected"},"dependencies":["selected"]}},{"kind":"attribute","name":"aria-disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"data-item-id","expression":"itemId","expressionPlan":{"source":"itemId","ast":{"kind":"id","name":"itemId"},"dependencies":["itemId"]}},{"kind":"attribute","name":"data-drag-type","expression":"dragType","expressionPlan":{"source":"dragType","ast":{"kind":"id","name":"dragType"},"dependencies":["dragType"]}},{"kind":"attribute","name":"data-drop-scope","expression":"dropScope","expressionPlan":{"source":"dropScope","ast":{"kind":"id","name":"dropScope"},"dependencies":["dropScope"]}},{"kind":"attribute","name":"data-accepts","expression":"accepts","expressionPlan":{"source":"accepts","ast":{"kind":"id","name":"accepts"},"dependencies":["accepts"]}},{"kind":"attribute","name":"data-drop-depth","expression":"dropDepth","expressionPlan":{"source":"dropDepth","ast":{"kind":"id","name":"dropDepth"},"dependencies":["dropDepth"]}},{"kind":"attribute","name":"data-subtree-depth","expression":"subtreeDepth","expressionPlan":{"source":"subtreeDepth","ast":{"kind":"id","name":"subtreeDepth"},"dependencies":["subtreeDepth"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"row"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"drag-handle"},{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"draggable","value":"true"},{"kind":"attribute","name":"aria-label","expression":"format('Drag %s to reorder', label)","expressionPlan":{"source":"format('Drag %s to reorder', label)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"Drag %s to reorder"},{"kind":"id","name":"label"}]},"dependencies":["label"]}}],"children":[{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"aria-hidden","value":"true"},{"kind":"literal","name":"focusable","value":"false"},{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2"},{"kind":"literal","name":"stroke-linecap","value":"round"},{"kind":"literal","name":"stroke-linejoin","value":"round"}],"children":[{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"9"},{"kind":"literal","name":"cy","value":"12"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"9"},{"kind":"literal","name":"cy","value":"5"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"9"},{"kind":"literal","name":"cy","value":"19"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"15"},{"kind":"literal","name":"cy","value":"12"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"15"},{"kind":"literal","name":"cy","value":"5"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"15"},{"kind":"literal","name":"cy","value":"19"},{"kind":"literal","name":"r","value":"1"}],"children":[]}]}],"flow":{"kind":"if","test":"sortable and not disabled","testPlan":{"source":"sortable and not disabled","ast":{"kind":"binary","op":"and","left":{"kind":"id","name":"sortable"},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"disabled"}}},"dependencies":["disabled","sortable"]}},"ref":"dragHandle"},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"disclosure"},{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"hidden","expression":"not isContainer","expressionPlan":{"source":"not isContainer","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"isContainer"}},"dependencies":["isContainer"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"disclosure-icon"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}],"ref":"disclosure"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"leading"}],"children":[{"kind":"slot","fallback":[],"name":"leading"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label-text"}],"children":[{"kind":"slot","fallback":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[]}],"name":"label"}],"ref":"labelText"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"actions"}],"children":[{"kind":"slot","fallback":[],"name":"actions"}],"ref":"actions"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"drop-indicator row-drop-indicator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}],"ref":"row"},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"children"},{"kind":"literal","name":"role","value":"group"},{"kind":"attribute","name":"hidden","expression":"not (isContainer and internalExpanded)","expressionPlan":{"source":"not (isContainer and internalExpanded)","ast":{"kind":"unary","op":"not","operand":{"kind":"binary","op":"and","left":{"kind":"id","name":"isContainer"},"right":{"kind":"id","name":"internalExpanded"}}},"dependencies":["internalExpanded","isContainer"]}}],"children":[{"kind":"slot"}],"ref":"children"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"drop-indicator subtree-drop-indicator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}]},"declarations":[{"kind":"state","name":"internalExpanded","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"structuralLevel","expression":{"source":"1","ast":{"kind":"literal","value":1},"dependencies":[]}},{"kind":"state","name":"tabStop","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"isContainer","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"expand","type":"object({ id: string, expanded: boolean, trigger: keyboard | pointer | programmatic })","bubbles":false,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-tree-item","props":{"accepts":{"type":"string","required":false,"target":{"attribute":"data-accepts"},"default":""},"container":{"type":"boolean","required":false,"target":{"attribute":"container"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"aria-disabled"},"default":false},"dragType":{"type":"string","required":false,"target":{"attribute":"data-drag-type"},"default":"item"},"dropDepth":{"type":"number","required":false,"target":{"attribute":"data-drop-depth"}},"dropScope":{"type":"string","required":false,"target":{"attribute":"data-drop-scope"},"default":""},"expanded":{"type":"boolean","required":false,"target":{"attribute":"expanded"},"default":false},"itemId":{"type":"string","required":false,"target":{"attribute":"data-item-id"},"default":""},"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":""},"marquee":{"type":"boolean","required":false,"target":{"attribute":"marquee"},"default":false},"selected":{"type":"boolean","required":false,"target":{"attribute":"aria-selected"},"default":false},"sortable":{"type":"boolean","required":false,"target":{"attribute":"sortable"},"default":false},"subtreeDepth":{"type":"number","required":false,"target":{"attribute":"data-subtree-depth"}}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"treeitem"},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}},{"kind":"attribute","name":"aria-level","expression":"structuralLevel","expressionPlan":{"source":"structuralLevel","ast":{"kind":"id","name":"structuralLevel"},"dependencies":["structuralLevel"]}},{"kind":"attribute","name":"aria-selected","expression":"selected","expressionPlan":{"source":"selected","ast":{"kind":"id","name":"selected"},"dependencies":["selected"]}},{"kind":"attribute","name":"aria-disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"data-item-id","expression":"itemId","expressionPlan":{"source":"itemId","ast":{"kind":"id","name":"itemId"},"dependencies":["itemId"]}},{"kind":"attribute","name":"data-drag-type","expression":"dragType","expressionPlan":{"source":"dragType","ast":{"kind":"id","name":"dragType"},"dependencies":["dragType"]}},{"kind":"attribute","name":"data-drop-scope","expression":"dropScope","expressionPlan":{"source":"dropScope","ast":{"kind":"id","name":"dropScope"},"dependencies":["dropScope"]}},{"kind":"attribute","name":"data-accepts","expression":"accepts","expressionPlan":{"source":"accepts","ast":{"kind":"id","name":"accepts"},"dependencies":["accepts"]}},{"kind":"attribute","name":"data-drop-depth","expression":"dropDepth","expressionPlan":{"source":"dropDepth","ast":{"kind":"id","name":"dropDepth"},"dependencies":["dropDepth"]}},{"kind":"attribute","name":"data-subtree-depth","expression":"subtreeDepth","expressionPlan":{"source":"subtreeDepth","ast":{"kind":"id","name":"subtreeDepth"},"dependencies":["subtreeDepth"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"row"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"drag-handle"},{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"draggable","value":"true"},{"kind":"attribute","name":"aria-label","expression":"format('Drag %s to reorder', label)","expressionPlan":{"source":"format('Drag %s to reorder', label)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"Drag %s to reorder"},{"kind":"id","name":"label"}]},"dependencies":["label"]}}],"children":[{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"aria-hidden","value":"true"},{"kind":"literal","name":"focusable","value":"false"},{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2"},{"kind":"literal","name":"stroke-linecap","value":"round"},{"kind":"literal","name":"stroke-linejoin","value":"round"}],"children":[{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"9"},{"kind":"literal","name":"cy","value":"12"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"9"},{"kind":"literal","name":"cy","value":"5"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"9"},{"kind":"literal","name":"cy","value":"19"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"15"},{"kind":"literal","name":"cy","value":"12"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"15"},{"kind":"literal","name":"cy","value":"5"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"15"},{"kind":"literal","name":"cy","value":"19"},{"kind":"literal","name":"r","value":"1"}],"children":[]}]}],"flow":{"kind":"if","test":"sortable and not disabled","testPlan":{"source":"sortable and not disabled","ast":{"kind":"binary","op":"and","left":{"kind":"id","name":"sortable"},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"disabled"}}},"dependencies":["disabled","sortable"]}},"ref":"dragHandle"},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"disclosure"},{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"hidden","expression":"not isContainer","expressionPlan":{"source":"not isContainer","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"isContainer"}},"dependencies":["isContainer"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"disclosure-icon"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}],"ref":"disclosure"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"leading"}],"children":[{"kind":"slot","fallback":[],"name":"leading"}],"ref":"leading"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label-text"}],"children":[{"kind":"slot","fallback":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[]}],"name":"label"}],"ref":"labelText"}],"ref":"label"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"actions"}],"children":[{"kind":"slot","fallback":[],"name":"actions"}],"ref":"actions"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"drop-indicator row-drop-indicator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}],"ref":"row"},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"children"},{"kind":"literal","name":"role","value":"group"},{"kind":"attribute","name":"hidden","expression":"not (isContainer and internalExpanded)","expressionPlan":{"source":"not (isContainer and internalExpanded)","ast":{"kind":"unary","op":"not","operand":{"kind":"binary","op":"and","left":{"kind":"id","name":"isContainer"},"right":{"kind":"id","name":"internalExpanded"}}},"dependencies":["internalExpanded","isContainer"]}}],"children":[{"kind":"slot"}],"ref":"children"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"drop-indicator subtree-drop-indicator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}]},"declarations":[{"kind":"state","name":"internalExpanded","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"structuralLevel","expression":{"source":"1","ast":{"kind":"literal","value":1},"dependencies":[]}},{"kind":"state","name":"tabStop","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"isContainer","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"expand","type":"object({ id: string, expanded: boolean, trigger: keyboard | pointer | programmatic })","bubbles":false,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiTreeItem(options = {}) {
   const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;

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) {

package/vue/UiEditorToolbar.vue

@@ -1,8 +1,6 @@
 <!-- Generated by HTML Next 1.0.0-alpha.5 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, ref, useTemplateRef } from 'vue'
-import * as controllerModule from '../components/ui-editor-toolbar/ui-editor-toolbar.js'
-import { createDispatch, useComponentHost } from './host'
+import { computed, useTemplateRef } from 'vue'
 
 defineOptions({ inheritAttrs: false })
 
@@ -15,29 +13,14 @@ const props = withDefaults(
   },
 )
 
-const root = ref<HTMLElement | null>(null)
 const stripElement = useTemplateRef<HTMLElement>('strip')
-const overflowStart = ref(false)
-const overflowEnd = ref(false)
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
-    overflowStart.value && 'overflowStart',
-    overflowEnd.value && 'overflowEnd',
     props.floating && 'floating',
   ].filter(Boolean).join(' ')
 )
-
-const dispatch = createDispatch(root)
-
-useComponentHost(controllerModule.default, {
-  root,
-  dispatch,
-  props,
-  refs: { strip: stripElement },
-  state: { overflowStart, overflowEnd },
-})
 </script>
 
 <template>
@@ -47,7 +30,6 @@ useComponentHost(controllerModule.default, {
     aria-label="Editor toolbar"
     v-bind="$attrs"
     :data-ui-editor-toolbar-state="hostState || undefined"
-    ref="root"
   >
     <div class="strip" ref="strip"><slot /></div>
   </div>
@@ -55,9 +37,6 @@ useComponentHost(controllerModule.default, {
 
 <style scoped>
 [data-component~="ui-editor-toolbar"] {
-  /* 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);
@@ -93,41 +72,33 @@ useComponentHost(controllerModule.default, {
   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. */
-[data-component~="ui-editor-toolbar"]::before,
-[data-component~="ui-editor-toolbar"]::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);
-}
-
-[data-component~="ui-editor-toolbar"]::before {
-  inset-inline-start: 0;
-  background: linear-gradient(to right, var(--_matte), transparent);
-}
-
-[data-component~="ui-editor-toolbar"]::after {
-  inset-inline-end: 0;
-  background: linear-gradient(to left, var(--_matte), transparent);
-}
-
-[data-component~="ui-editor-toolbar"]:dir(rtl)::before {
-  background: linear-gradient(to left, var(--_matte), transparent);
-}
-
-[data-component~="ui-editor-toolbar"]:dir(rtl)::after {
-  background: linear-gradient(to right, var(--_matte), transparent);
+/* 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%;
 }
 
-[data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="overflowStart"]::before,
-[data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="overflowEnd"]::after {
-  opacity: 1;
+[data-component~="ui-editor-toolbar"]:dir(rtl) .strip {
+  --_ui-scroll-fade-direction: to left;
 }
 
 :slotted(.divider) {
@@ -187,8 +158,6 @@ useComponentHost(controllerModule.default, {
 
 /* Inside LoomaEditor's sticky shell, the shell is the sticky surface. */
 .looma-editor__sticky-toolbar-shell [data-component~="ui-editor-toolbar"] {
-  --_matte: var(--ui-editor-toolbar-surface, var(--ui-surface));
-
   position: relative;
   min-height: var(--ui-editor-toolbar-min-height, 48px);
   background: transparent;

package/vue/UiReel.vue

@@ -47,6 +47,34 @@ const hostState = computed(() =>
   overscroll-behavior-inline: contain;
 }
 
+/* Each end that hides items fades: the scroll fade every Looma scroller uses (see ui-scroll-area). */
+[data-component~="ui-reel"] {
+  --_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%;
+}
+
+[data-component~="ui-reel"]:dir(rtl) {
+  --_ui-scroll-fade-direction: to left;
+}
+
 [data-component~="ui-reel"] > :slotted(*) {
   min-inline-size: 0;
   flex: 0 0 var(--ui-reel-item-width, var(--_reel-item-width));

package/vue/UiScrollArea.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    orientation?: 'vertical' | 'horizontal';
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    orientation: "vertical" | "horizontal";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/vue/UiScrollArea.js

@@ -0,0 +1,2 @@
+import { t as UiScrollArea_default } from "./chunks/UiScrollArea.js";
+export { UiScrollArea_default as default };

package/vue/UiScrollArea.vue

@@ -0,0 +1,85 @@
+<!-- Generated by HTML Next 1.0.0-alpha.5 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    orientation?: 'vertical' | 'horizontal'
+  }>(),
+  {
+    orientation: 'vertical',
+  },
+)
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.orientation && `orientation orientation=${props.orientation}`,
+  ].filter(Boolean).join(' ')
+)
+</script>
+
+<template>
+  <div
+    data-component="ui-scroll-area"
+    v-bind="$attrs"
+    :data-ui-scroll-area-state="hostState || undefined"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+/* 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. */
+[data-component~="ui-scroll-area"] {
+  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%;
+}
+
+[data-component~="ui-scroll-area"][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);
+}
+
+[data-component~="ui-scroll-area"]:dir(rtl) {
+  --_ui-scroll-fade-inline: to left;
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-scroll-area"][hidden] {
+  display: none;
+}
+</style>

package/vue/UiSearchShell.vue

@@ -183,6 +183,27 @@ dialog::backdrop {
   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/vue/UiSidebar.vue

@@ -133,10 +133,32 @@ useComponentHost(controllerModule.default, {
   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. */