@threadlabs/looma 0.10.9 → 0.10.10

package/vue/components.css

@@ -1131,7 +1131,7 @@ button[data-v-0bd7ecc4] {
   display: none;
 }
 
-[data-component~="ui-dialog"][data-v-d43d3a22] {
+[data-component~="ui-dialog"][data-v-0fd6654c] {
   position: fixed;
   inset: 0;
   box-sizing: border-box;
@@ -1160,17 +1160,17 @@ button[data-v-0bd7ecc4] {
     display var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete,
     overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
 }
-[data-component~="ui-dialog"][open][data-v-d43d3a22] {
+[data-component~="ui-dialog"][open][data-v-0fd6654c] {
   display: flex;
   visibility: visible;
   pointer-events: auto;
   opacity: 1;
   transform: scale(1);
-  animation: ui-dialog-enter-d43d3a22 var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease);
+  animation: ui-dialog-enter-0fd6654c var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease);
 }
 
 /* Header and actions stay pinned; only the body scrolls when content is long. */
-header[data-v-d43d3a22] {
+header[data-v-0fd6654c] {
   display: flex;
   align-items: center;
   gap: var(--ui-space-3);
@@ -1180,7 +1180,7 @@ header[data-v-d43d3a22] {
 }
 
 /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
-[data-component~="ui-dialog"] .title[data-v-d43d3a22] {
+[data-component~="ui-dialog"] .title[data-v-0fd6654c] {
   flex: 1;
   min-inline-size: 0;
   margin: 0;
@@ -1192,7 +1192,7 @@ header[data-v-d43d3a22] {
   font-weight: var(--ui-font-semibold);
   line-height: var(--ui-line-height-tight);
 }
-.close[data-v-d43d3a22] {
+.close[data-v-0fd6654c] {
   display: inline-grid;
   place-items: center;
   flex: none;
@@ -1211,8 +1211,8 @@ header[data-v-d43d3a22] {
 }
 
 /* A CSS-drawn X. */
-.close[data-v-d43d3a22]::before,
-.close[data-v-d43d3a22]::after {
+.close[data-v-0fd6654c]::before,
+.close[data-v-0fd6654c]::after {
   content: "";
   grid-area: 1 / 1;
   inline-size: 0.875rem;
@@ -1221,37 +1221,58 @@ header[data-v-d43d3a22] {
   background: currentColor;
   transform: rotate(45deg);
 }
-.close[data-v-d43d3a22]::after {
+.close[data-v-0fd6654c]::after {
   transform: rotate(-45deg);
 }
-.close[data-v-d43d3a22]:hover {
+.close[data-v-0fd6654c]:hover {
   background: var(--ui-surface-muted);
   color: var(--ui-text-primary);
 }
-.close[data-v-d43d3a22]:focus-visible {
+.close[data-v-0fd6654c]:focus-visible {
   outline: 2px solid var(--ui-focus-ring);
   outline-offset: 2px;
 }
 
 /* A touch target, like Button on coarse pointers. */
 @media (pointer: coarse) {
-.close[data-v-d43d3a22] {
+.close[data-v-0fd6654c] {
     inline-size: var(--ui-control-min-block-size);
     block-size: var(--ui-control-min-block-size);
 }
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-dialog"] .close[data-v-d43d3a22] {
+html[data-ui-input-modality="touch"] [data-component~="ui-dialog"] .close[data-v-0fd6654c] {
   inline-size: var(--ui-control-min-block-size);
   block-size: var(--ui-control-min-block-size);
 }
-.body[data-v-d43d3a22] {
+.body[data-v-0fd6654c] {
   flex: 1 1 auto;
   min-block-size: 0;
   overflow: auto;
   overscroll-behavior: contain;
   padding: var(--ui-space-5);
-}
-footer[data-v-d43d3a22] {
+  /* 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[data-v-0fd6654c] {
   display: flex;
   flex: none;
   flex-wrap: wrap;
@@ -1260,28 +1281,28 @@ footer[data-v-d43d3a22] {
   padding: var(--ui-space-3) var(--ui-space-5);
   border-block-start: 1px solid var(--ui-border-default);
 }
-footer[data-v-d43d3a22]:empty {
+footer[data-v-0fd6654c]:empty {
   display: none;
 }
-@keyframes ui-dialog-enter-d43d3a22 {
+@keyframes ui-dialog-enter-0fd6654c {
 from {
     opacity: 0;
     transform: scale(0.96);
 }
 }
-[data-component~="ui-dialog"][data-v-d43d3a22]::backdrop {
+[data-component~="ui-dialog"][data-v-0fd6654c]::backdrop {
   background-color: transparent;
   transition:
     background-color var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease),
     display var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete,
     overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
 }
-[data-component~="ui-dialog"][open][data-v-d43d3a22]::backdrop {
+[data-component~="ui-dialog"][open][data-v-0fd6654c]::backdrop {
   background-color: var(--ui-overlay-backdrop);
-  animation: ui-dialog-backdrop-enter-d43d3a22 var(--ui-dialog-duration, var(--ui-motion-base))
+  animation: ui-dialog-backdrop-enter-0fd6654c var(--ui-dialog-duration, var(--ui-motion-base))
     var(--ui-motion-ease);
 }
-@keyframes ui-dialog-backdrop-enter-d43d3a22 {
+@keyframes ui-dialog-backdrop-enter-0fd6654c {
 from {
     background-color: transparent;
 }
@@ -1549,10 +1570,10 @@ from {
   display: none;
 }
 
-[data-component~="ui-editor-mention-menu"][data-v-9c76e661] {
+[data-component~="ui-editor-mention-menu"][data-v-a6db8e19] {
   user-select: none;
 }
-[data-component~="ui-editor-mention-menu"][data-v-9c76e661] {
+[data-component~="ui-editor-mention-menu"][data-v-a6db8e19] {
   display: flex;
   overflow: hidden;
   flex-direction: column;
@@ -1561,7 +1582,7 @@ from {
   border-radius: var(--ui-radius-dialog);
   box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
 }
-.header[data-v-9c76e661] {
+.header[data-v-a6db8e19] {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1572,22 +1593,43 @@ from {
   font-size: var(--ui-font-size-xs);
   font-weight: var(--ui-font-semibold);
 }
-.hint[data-v-9c76e661] {
+.hint[data-v-a6db8e19] {
   overflow: hidden;
   color: var(--ui-text-muted);
   font-weight: var(--ui-font-normal);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.list[data-v-9c76e661] {
+.list[data-v-a6db8e19] {
   max-height: 280px;
   padding: var(--ui-space-1) 0;
   margin: 0;
   overflow-y: auto;
   overscroll-behavior: contain;
   list-style: none;
-}
-.item[data-v-9c76e661] {
+  /* 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[data-v-a6db8e19] {
   display: flex;
   align-items: center;
   min-height: 44px;
@@ -1595,10 +1637,10 @@ from {
   gap: var(--ui-space-3);
   cursor: pointer;
 }
-.item.active[data-v-9c76e661] {
+.item.active[data-v-a6db8e19] {
   background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
 }
-.avatar[data-v-9c76e661] {
+.avatar[data-v-a6db8e19] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1611,41 +1653,41 @@ from {
   font-size: var(--ui-font-size-xs);
   font-weight: var(--ui-font-semibold);
 }
-.body[data-v-9c76e661] {
+.body[data-v-a6db8e19] {
   display: flex;
   min-width: 0;
   flex-direction: column;
 }
-.label[data-v-9c76e661],
-.detail[data-v-9c76e661] {
+.label[data-v-a6db8e19],
+.detail[data-v-a6db8e19] {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.label[data-v-9c76e661] {
+.label[data-v-a6db8e19] {
   color: var(--ui-text-primary);
   font-size: var(--ui-font-size-sm);
   font-weight: var(--ui-font-medium);
 }
-.detail[data-v-9c76e661],
-.loading[data-v-9c76e661] {
+.detail[data-v-a6db8e19],
+.loading[data-v-a6db8e19] {
   color: var(--ui-text-muted);
   font-size: var(--ui-font-size-xs);
 }
-.loading[data-v-9c76e661] {
+.loading[data-v-a6db8e19] {
   min-height: 44px;
   padding: var(--ui-space-3);
 }
 @media (max-width: 767px) {
-[data-component~="ui-editor-mention-menu"][data-v-9c76e661] {
+[data-component~="ui-editor-mention-menu"][data-v-a6db8e19] {
     border-bottom: 0;
     border-radius: var(--ui-radius-dialog) var(--ui-radius-dialog) 0 0;
 }
-.list[data-v-9c76e661] {
+.list[data-v-a6db8e19] {
     max-height: calc(60dvh - 48px);
 }
 }
-[data-component~="ui-editor-mention-menu"][hidden][data-v-9c76e661] {
+[data-component~="ui-editor-mention-menu"][hidden][data-v-a6db8e19] {
   display: none;
 }
 
@@ -1666,10 +1708,10 @@ svg[data-v-3d48bd86] {
   display: none;
 }
 
-[data-component~="ui-editor-slash-menu"][data-v-afcbaee6] {
+[data-component~="ui-editor-slash-menu"][data-v-dcc1f07d] {
   user-select: none;
 }
-[data-component~="ui-editor-slash-menu"][data-v-afcbaee6] {
+[data-component~="ui-editor-slash-menu"][data-v-dcc1f07d] {
   background: var(--ui-surface);
   border: 1px solid var(--ui-border);
   border-radius: var(--ui-radius-dialog);
@@ -1679,12 +1721,12 @@ svg[data-v-3d48bd86] {
   flex-direction: column;
 }
 @media (max-width: 767px) {
-[data-component~="ui-editor-slash-menu"][data-v-afcbaee6] {
+[data-component~="ui-editor-slash-menu"][data-v-dcc1f07d] {
     border-radius: var(--ui-radius-dialog) var(--ui-radius-dialog) 0 0;
     border-bottom: none;
 }
 }
-.header[data-v-afcbaee6] {
+.header[data-v-dcc1f07d] {
   display: none;
   align-items: center;
   gap: var(--ui-space-2);
@@ -1697,11 +1739,11 @@ svg[data-v-3d48bd86] {
   letter-spacing: 0.05em;
 }
 @media (max-width: 767px) {
-.header[data-v-afcbaee6] {
+.header[data-v-dcc1f07d] {
     display: flex;
 }
 }
-.header-query[data-v-afcbaee6] {
+.header-query[data-v-dcc1f07d] {
   background: var(--ui-surface-hover);
   border-radius: var(--ui-radius-sm);
   padding: 0.1em 0.4em;
@@ -1711,21 +1753,42 @@ svg[data-v-3d48bd86] {
   text-transform: none;
   letter-spacing: 0;
 }
-.list[data-v-afcbaee6] {
+.list[data-v-dcc1f07d] {
   list-style: none;
   margin: 0;
   padding: var(--ui-space-1) 0;
   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) {
-.list[data-v-afcbaee6] {
+.list[data-v-dcc1f07d] {
     max-height: calc(60dvh - 80px);
     padding: var(--ui-space-1) 0 var(--ui-space-2);
 }
 }
-.item[data-v-afcbaee6] {
+.item[data-v-dcc1f07d] {
   display: flex;
   align-items: center;
   gap: var(--ui-space-3);
@@ -1734,10 +1797,10 @@ svg[data-v-3d48bd86] {
   cursor: pointer;
   transition: background-color 120ms ease;
 }
-.item.active[data-v-afcbaee6] {
+.item.active[data-v-dcc1f07d] {
   background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
 }
-.icon[data-v-afcbaee6] {
+.icon[data-v-dcc1f07d] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1753,22 +1816,22 @@ svg[data-v-3d48bd86] {
   flex-shrink: 0;
   line-height: 1;
 }
-.item.active .icon[data-v-afcbaee6] {
+.item.active .icon[data-v-dcc1f07d] {
   background: var(--ui-accent);
   border-color: var(--ui-accent);
   color: var(--ui-accent-contrast);
 }
-.icon[data-v-afcbaee6] {
+.icon[data-v-dcc1f07d] {
   --ui-icon-size: 1rem;
   --ui-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
 }
-.body[data-v-afcbaee6] {
+.body[data-v-dcc1f07d] {
   display: flex;
   min-width: 0;
   flex-direction: column;
   gap: 1px;
 }
-.title[data-v-afcbaee6] {
+.title[data-v-dcc1f07d] {
   font-size: var(--ui-font-size-sm);
   font-weight: var(--ui-font-medium);
   color: var(--ui-text);
@@ -1776,14 +1839,14 @@ svg[data-v-3d48bd86] {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.description[data-v-afcbaee6] {
+.description[data-v-dcc1f07d] {
   font-size: var(--ui-font-size-xs);
   color: var(--ui-text-muted);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.footer[data-v-afcbaee6] {
+.footer[data-v-dcc1f07d] {
   display: none;
   padding: var(--ui-space-2) var(--ui-space-3);
   border-top: 1px solid var(--ui-border);
@@ -1791,11 +1854,11 @@ svg[data-v-3d48bd86] {
   color: var(--ui-text-muted);
 }
 @media (min-width: 768px) {
-.footer[data-v-afcbaee6] {
+.footer[data-v-dcc1f07d] {
     display: block;
 }
 }
-[data-component~="ui-editor-slash-menu"] kbd[data-v-afcbaee6] {
+[data-component~="ui-editor-slash-menu"] kbd[data-v-dcc1f07d] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1807,7 +1870,7 @@ svg[data-v-3d48bd86] {
   padding: 0 3px;
   color: var(--ui-text-secondary);
 }
-[data-component~="ui-editor-slash-menu"][hidden][data-v-afcbaee6] {
+[data-component~="ui-editor-slash-menu"][hidden][data-v-dcc1f07d] {
   display: none;
 }
 
@@ -2349,10 +2412,7 @@ svg[data-v-3d48bd86] {
   display: none;
 }
 
-[data-component~="ui-editor-toolbar"][data-v-8f7cefb2] {
-  /* The colour the edge fades blend into: whatever the toolbar is painted with. */
-  --_matte: var(--ui-editor-toolbar-surface, var(--ui-surface));
-
+[data-component~="ui-editor-toolbar"][data-v-3076bb8c] {
   position: sticky;
   top: 0;
   z-index: var(--ui-editor-toolbar-z-index, 10);
@@ -2367,7 +2427,7 @@ svg[data-v-3d48bd86] {
 
 /* One row, always. When the controls outgrow the space, the row scrolls sideways rather than
    wrapping into several lines, and a fade at each edge that has more to show says so. */
-.strip[data-v-8f7cefb2] {
+.strip[data-v-3076bb8c] {
   display: flex;
   flex: 1 1 auto;
   align-items: center;
@@ -2379,52 +2439,48 @@ svg[data-v-3d48bd86] {
   overscroll-behavior-inline: contain;
   scrollbar-width: none;
 }
-.strip[data-v-8f7cefb2]::-webkit-scrollbar {
+.strip[data-v-3076bb8c]::-webkit-scrollbar {
   display: none;
 }
-.strip > [data-v-8f7cefb2-s] {
+.strip > [data-v-3076bb8c-s] {
   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"][data-v-8f7cefb2]::before,
-[data-component~="ui-editor-toolbar"][data-v-8f7cefb2]::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"][data-v-8f7cefb2]::before {
-  inset-inline-start: 0;
-  background: linear-gradient(to right, var(--_matte), transparent);
-}
-[data-component~="ui-editor-toolbar"][data-v-8f7cefb2]::after {
-  inset-inline-end: 0;
-  background: linear-gradient(to left, var(--_matte), transparent);
-}
-[data-component~="ui-editor-toolbar"][data-v-8f7cefb2]:dir(rtl)::before {
-  background: linear-gradient(to left, var(--_matte), transparent);
-}
-[data-component~="ui-editor-toolbar"][data-v-8f7cefb2]:dir(rtl)::after {
-  background: linear-gradient(to right, var(--_matte), transparent);
-}
-[data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="overflowStart"][data-v-8f7cefb2]::before,
-[data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="overflowEnd"][data-v-8f7cefb2]::after {
-  opacity: 1;
-}
-.divider[data-v-8f7cefb2-s] {
+/* 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[data-v-3076bb8c] {
+  --_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"]:dir(rtl) .strip[data-v-3076bb8c] {
+  --_ui-scroll-fade-direction: to left;
+}
+.divider[data-v-3076bb8c-s] {
   width: 1px;
   height: 20px;
   background: var(--ui-editor-toolbar-divider, var(--ui-border));
   flex-shrink: 0;
   margin: 0 var(--ui-editor-toolbar-divider-margin, 4px);
 }
-[data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"][data-v-8f7cefb2] {
+[data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"][data-v-3076bb8c] {
   position: relative;
   top: auto;
   width: max-content;
@@ -2445,7 +2501,7 @@ svg[data-v-3d48bd86] {
   backdrop-filter: blur(10px);
 }
 @media (max-width: 767px) {
-[data-component~="ui-editor-toolbar"][data-v-8f7cefb2] {
+[data-component~="ui-editor-toolbar"][data-v-3076bb8c] {
     position: fixed;
     top: auto;
     bottom: env(safe-area-inset-bottom);
@@ -2456,7 +2512,7 @@ svg[data-v-3d48bd86] {
     border-bottom: none;
     box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
 }
-[data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"][data-v-8f7cefb2] {
+[data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"][data-v-3076bb8c] {
     position: relative;
     inset: auto;
     min-height: auto;
@@ -2470,9 +2526,7 @@ svg[data-v-3d48bd86] {
 }
 
 /* Inside LoomaEditor's sticky shell, the shell is the sticky surface. */
-.looma-editor__sticky-toolbar-shell [data-component~="ui-editor-toolbar"][data-v-8f7cefb2] {
-  --_matte: var(--ui-editor-toolbar-surface, var(--ui-surface));
-
+.looma-editor__sticky-toolbar-shell [data-component~="ui-editor-toolbar"][data-v-3076bb8c] {
   position: relative;
   min-height: var(--ui-editor-toolbar-min-height, 48px);
   background: transparent;
@@ -2482,7 +2536,7 @@ svg[data-v-3d48bd86] {
 
 /* Inside LoomaEditor's mobile shell, the toolbar is a scroll-snapping strip. */
 .looma-editor__mobile-toolbar-shell
-  [data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"][data-v-8f7cefb2] {
+  [data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"][data-v-3076bb8c] {
   width: 100%;
   max-width: none;
   min-height: 100%;
@@ -2495,12 +2549,12 @@ svg[data-v-3d48bd86] {
 }
 .looma-editor__mobile-toolbar-shell
   [data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"]
-  .strip[data-v-8f7cefb2] {
+  .strip[data-v-3076bb8c] {
   scroll-snap-type: x mandatory;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-editor-toolbar"][hidden][data-v-8f7cefb2] {
+[data-component~="ui-editor-toolbar"][hidden][data-v-3076bb8c] {
   display: none;
 }
 
@@ -3134,7 +3188,7 @@ legend[data-v-b97195d1] + * {
   display: none;
 }
 
-[data-component~="ui-reel"][data-v-b373e396] {
+[data-component~="ui-reel"][data-v-eb18d6be] {
   --_reel-gap: var(--ui-space-4);
   --_reel-item-width: auto;
   display: flex;
@@ -3147,46 +3201,122 @@ legend[data-v-b97195d1] + * {
   overflow-y: hidden;
   overscroll-behavior-inline: contain;
 }
-[data-component~="ui-reel"] > [data-v-b373e396-s] {
+
+/* Each end that hides items fades: the scroll fade every Looma scroller uses (see ui-scroll-area). */
+[data-component~="ui-reel"][data-v-eb18d6be] {
+  --_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"][data-v-eb18d6be]:dir(rtl) {
+  --_ui-scroll-fade-direction: to left;
+}
+[data-component~="ui-reel"] > [data-v-eb18d6be-s] {
   min-inline-size: 0;
   flex: 0 0 var(--ui-reel-item-width, var(--_reel-item-width));
 }
-[data-component~="ui-reel"][data-ui-reel-state~="gap=xs"][data-v-b373e396] {
+[data-component~="ui-reel"][data-ui-reel-state~="gap=xs"][data-v-eb18d6be] {
   --_reel-gap: var(--ui-space-2);
 }
-[data-component~="ui-reel"][data-ui-reel-state~="gap=s"][data-v-b373e396] {
+[data-component~="ui-reel"][data-ui-reel-state~="gap=s"][data-v-eb18d6be] {
   --_reel-gap: var(--ui-space-3);
 }
-[data-component~="ui-reel"][data-ui-reel-state~="gap=m"][data-v-b373e396] {
+[data-component~="ui-reel"][data-ui-reel-state~="gap=m"][data-v-eb18d6be] {
   --_reel-gap: var(--ui-space-4);
 }
-[data-component~="ui-reel"][data-ui-reel-state~="gap=l"][data-v-b373e396] {
+[data-component~="ui-reel"][data-ui-reel-state~="gap=l"][data-v-eb18d6be] {
   --_reel-gap: var(--ui-space-5);
 }
-[data-component~="ui-reel"][data-ui-reel-state~="gap=xl"][data-v-b373e396] {
+[data-component~="ui-reel"][data-ui-reel-state~="gap=xl"][data-v-eb18d6be] {
   --_reel-gap: var(--ui-space-6);
 }
-[data-component~="ui-reel"][data-ui-reel-state~="itemWidth=sm"][data-v-b373e396] {
+[data-component~="ui-reel"][data-ui-reel-state~="itemWidth=sm"][data-v-eb18d6be] {
   --_reel-item-width: 12rem;
 }
-[data-component~="ui-reel"][data-ui-reel-state~="itemWidth=md"][data-v-b373e396] {
+[data-component~="ui-reel"][data-ui-reel-state~="itemWidth=md"][data-v-eb18d6be] {
   --_reel-item-width: 16rem;
 }
-[data-component~="ui-reel"][data-ui-reel-state~="itemWidth=lg"][data-v-b373e396] {
+[data-component~="ui-reel"][data-ui-reel-state~="itemWidth=lg"][data-v-eb18d6be] {
   --_reel-item-width: 20rem;
 }
-[data-component~="ui-reel"][data-ui-reel-state~="snap"][data-v-b373e396] {
+[data-component~="ui-reel"][data-ui-reel-state~="snap"][data-v-eb18d6be] {
   scroll-snap-type: inline mandatory;
 }
-[data-component~="ui-reel"][data-ui-reel-state~="snap=start"] > [data-v-b373e396-s] {
+[data-component~="ui-reel"][data-ui-reel-state~="snap=start"] > [data-v-eb18d6be-s] {
   scroll-snap-align: start;
 }
-[data-component~="ui-reel"][data-ui-reel-state~="snap=center"] > [data-v-b373e396-s] {
+[data-component~="ui-reel"][data-ui-reel-state~="snap=center"] > [data-v-eb18d6be-s] {
   scroll-snap-align: center;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-reel"][hidden][data-v-b373e396] {
+[data-component~="ui-reel"][hidden][data-v-eb18d6be] {
+  display: none;
+}
+
+/* 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"][data-v-858d7508] {
+  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"][data-v-858d7508] {
+  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"][data-v-858d7508]: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][data-v-858d7508] {
   display: none;
 }
 
@@ -3267,10 +3397,10 @@ legend[data-v-b97195d1] + * {
   display: none;
 }
 
-[data-component~="ui-search-shell"][data-v-d749a869] {
+[data-component~="ui-search-shell"][data-v-2ba71171] {
   display: contents;
 }
-dialog[data-v-d749a869] {
+dialog[data-v-2ba71171] {
   position: fixed;
   inset: 0;
   z-index: var(--ui-search-shell-z-index, 400);
@@ -3288,10 +3418,10 @@ dialog[data-v-d749a869] {
   background: var(--ui-overlay-backdrop);
   color: var(--ui-text-primary);
 }
-dialog[data-v-d749a869]::backdrop {
+dialog[data-v-2ba71171]::backdrop {
   background: var(--ui-overlay-backdrop);
 }
-.panel[data-v-d749a869] {
+.panel[data-v-2ba71171] {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -3304,7 +3434,7 @@ dialog[data-v-d749a869]::backdrop {
   border-radius: var(--ui-search-shell-radius, var(--ui-radius-dialog));
   box-shadow: var(--ui-search-shell-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl)));
 }
-.search[data-v-d749a869] {
+.search[data-v-2ba71171] {
   padding: var(--ui-space-3);
   border-block-end: 1px solid var(--ui-border-default);
   transition:
@@ -3313,11 +3443,11 @@ dialog[data-v-d749a869]::backdrop {
 }
 
 /* The search region shows where typing goes, whatever the author put in it. */
-.search[data-v-d749a869]:focus-within {
+.search[data-v-2ba71171]:focus-within {
   border-block-end-color: var(--ui-search-shell-focus-color, var(--ui-control-focus));
   box-shadow: inset 0 -1px 0 var(--ui-search-shell-focus-color, var(--ui-control-focus));
 }
-input[slot="search"][data-v-d749a869-s] {
+input[slot="search"][data-v-2ba71171-s] {
   box-sizing: border-box;
   inline-size: 100%;
   min-block-size: var(--ui-control-min-block-size);
@@ -3329,24 +3459,24 @@ input[slot="search"][data-v-d749a869-s] {
   font: inherit;
   box-shadow: var(--ui-shadow-xs);
 }
-input[slot="search"][data-v-d749a869-s]:focus-visible {
+input[slot="search"][data-v-2ba71171-s]:focus-visible {
   border-color: var(--ui-control-focus);
   outline: 2px solid var(--ui-focus-ring);
   outline-offset: 2px;
 }
-.status[data-v-d749a869],
-.footer[data-v-d749a869] {
+.status[data-v-2ba71171],
+.footer[data-v-2ba71171] {
   flex-shrink: 0;
   padding: var(--ui-space-2) var(--ui-space-4);
   color: var(--ui-text-secondary);
   font-size: var(--ui-font-size-sm);
 }
-.status[data-v-d749a869] {
+.status[data-v-2ba71171] {
   border-block-end: 1px solid var(--ui-border-default);
 }
 
 /* Laid out like the dialog's action row: actions right-aligned, spaced as buttons, no fill. */
-.footer[data-v-d749a869] {
+.footer[data-v-2ba71171] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -3355,21 +3485,42 @@ input[slot="search"][data-v-d749a869-s]:focus-visible {
   padding: var(--ui-space-3) var(--ui-space-4);
   border-block-start: 1px solid var(--ui-border-default);
 }
-.status[data-v-d749a869]:empty,
-.footer[data-v-d749a869]:empty {
+.status[data-v-2ba71171]:empty,
+.footer[data-v-2ba71171]:empty {
   display: none;
 }
-.body[data-v-d749a869] {
+.body[data-v-2ba71171] {
   flex: 1;
   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) {
-dialog[data-v-d749a869] {
+dialog[data-v-2ba71171] {
     padding: 0;
 }
-.panel[data-v-d749a869] {
+.panel[data-v-2ba71171] {
     inline-size: 100%;
     min-block-size: 100dvh;
     max-block-size: none;
@@ -3379,7 +3530,7 @@ dialog[data-v-d749a869] {
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-search-shell"][hidden][data-v-d749a869] {
+[data-component~="ui-search-shell"][hidden][data-v-2ba71171] {
   display: none;
 }
 
@@ -3470,7 +3621,7 @@ hr[aria-orientation="vertical"][data-v-357ad177] {
   border-inline-start: 1px solid var(--ui-separator-color, var(--ui-border-default));
 }
 
-[data-component~="ui-sidebar"][data-v-d5bc9278] {
+[data-component~="ui-sidebar"][data-v-20117052] {
   position: relative;
   box-sizing: border-box;
   display: flex;
@@ -3482,21 +3633,44 @@ hr[aria-orientation="vertical"][data-v-357ad177] {
   background: var(--ui-sidebar-surface, var(--ui-surface-default));
   border-inline-end: 1px solid var(--ui-sidebar-border, var(--ui-border-default));
 }
-[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][data-v-d5bc9278] {
+[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][data-v-20117052] {
   border-inline-end: 0;
   border-inline-start: 1px solid var(--ui-sidebar-border, var(--ui-border-default));
 }
-.content[data-v-d5bc9278] {
+
+/* The panel's content scrolls, and each edge that hides content fades: the scroll fade every
+   Looma scroller uses (see ui-scroll-area). */
+.content[data-v-20117052] {
   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. */
-[data-component~="ui-sidebar"][data-ui-sidebar-state~="internalCollapsed"][data-v-d5bc9278]:not([popover]) {
+[data-component~="ui-sidebar"][data-ui-sidebar-state~="internalCollapsed"][data-v-20117052]:not([popover]) {
   display: none;
 }
-.resizer[data-v-d5bc9278] {
+.resizer[data-v-20117052] {
   position: absolute;
   z-index: 1;
   inset-block: 0;
@@ -3509,15 +3683,15 @@ hr[aria-orientation="vertical"][data-v-357ad177] {
   touch-action: none;
   outline: none;
 }
-.resizer[hidden][data-v-d5bc9278] {
+.resizer[hidden][data-v-20117052] {
   display: none;
 }
-[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"] .resizer[data-v-d5bc9278] {
+[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"] .resizer[data-v-20117052] {
   inset-inline-end: auto;
   inset-inline-start: 0;
   transform: translateX(-50%);
 }
-.resizer[data-v-d5bc9278]::after {
+.resizer[data-v-20117052]::after {
   content: "";
   position: absolute;
   inset-block: 0;
@@ -3533,7 +3707,7 @@ hr[aria-orientation="vertical"][data-v-357ad177] {
     background-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
     opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
 }
-.guide[data-v-d5bc9278] {
+.guide[data-v-20117052] {
   position: absolute;
   inset-block-start: 50%;
   inset-inline-start: 50%;
@@ -3547,16 +3721,16 @@ hr[aria-orientation="vertical"][data-v-357ad177] {
   transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
   pointer-events: none;
 }
-.resizer[data-v-d5bc9278]:is(:hover, :focus-visible)::after {
+.resizer[data-v-20117052]:is(:hover, :focus-visible)::after {
   background: var(--ui-affordance-direct-color, var(--ui-accent-solid, var(--ui-focus-ring)));
   opacity: 1;
 }
-.resizer:is(:hover, :focus-visible) > .guide[data-v-d5bc9278] {
+.resizer:is(:hover, :focus-visible) > .guide[data-v-20117052] {
   opacity: 1;
 }
 
 /* Drawer: a popover in the top layer, sliding in from its edge. Closed popovers are hidden by the UA. */
-[data-component~="ui-sidebar"][popover][data-v-d5bc9278] {
+[data-component~="ui-sidebar"][popover][data-v-20117052] {
   position: fixed;
   inset-block: 0;
   inset-inline-start: 0;
@@ -3576,36 +3750,36 @@ hr[aria-orientation="vertical"][data-v-357ad177] {
 }
 
 /* The author display above would otherwise override the UA rule that hides a closed popover. */
-[data-component~="ui-sidebar"][popover][data-v-d5bc9278]:not(:popover-open) {
+[data-component~="ui-sidebar"][popover][data-v-20117052]:not(:popover-open) {
   display: none;
   transform: translateX(-100%);
 }
-[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover][data-v-d5bc9278] {
+[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover][data-v-20117052] {
   inset-inline-start: auto;
   inset-inline-end: 0;
 }
-[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover][data-v-d5bc9278]:not(:popover-open) {
+[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover][data-v-20117052]:not(:popover-open) {
   transform: translateX(100%);
 }
 @starting-style {
-[data-component~="ui-sidebar"][popover][data-v-d5bc9278]:popover-open {
+[data-component~="ui-sidebar"][popover][data-v-20117052]:popover-open {
     transform: translateX(-100%);
 }
-[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover][data-v-d5bc9278]:popover-open {
+[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover][data-v-20117052]:popover-open {
     transform: translateX(100%);
 }
 }
-[data-component~="ui-sidebar"][popover][data-v-d5bc9278]::backdrop {
+[data-component~="ui-sidebar"][popover][data-v-20117052]::backdrop {
   background: var(--ui-sidebar-backdrop, rgb(0 0 0 / 0.32));
 }
 @media (prefers-reduced-motion: reduce) {
-[data-component~="ui-sidebar"][popover][data-v-d5bc9278] {
+[data-component~="ui-sidebar"][popover][data-v-20117052] {
     transition: none;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-sidebar"][hidden][data-v-d5bc9278] {
+[data-component~="ui-sidebar"][hidden][data-v-20117052] {
   display: none;
 }