@threadlabs/looma 0.10.9 → 0.10.10

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

package/vue/chunks/UiDialog.js

@@ -75,6 +75,6 @@ var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-d43d3a22"]]);
+}), [["__scopeId", "data-v-0fd6654c"]]);
 //#endregion
 export { UiDialog_default as t };

package/vue/chunks/UiEditorMentionMenu.js

@@ -101,6 +101,6 @@ var UiEditorMentionMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_defaul
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-9c76e661"]]);
+}), [["__scopeId", "data-v-a6db8e19"]]);
 //#endregion
 export { UiEditorMentionMenu_default as t };

package/vue/chunks/UiEditorSlashMenu.js

@@ -95,6 +95,6 @@ var UiEditorSlashMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-afcbaee6"]]);
+}), [["__scopeId", "data-v-dcc1f07d"]]);
 //#endregion
 export { UiEditorSlashMenu_default as t };

package/vue/chunks/UiEditorToolbar.js

@@ -1,7 +1,5 @@
-import { n as useComponentHost, t as createDispatch } from "./host.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, useTemplateRef } from "vue";
-import * as controllerModule from "@threadlabs/looma/components/ui-editor-toolbar/ui-editor-toolbar.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, renderSlot, useTemplateRef } from "vue";
 //#region .build/vue/UiEditorToolbar.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-ui-editor-toolbar-state"];
 var _hoisted_2 = {
@@ -19,39 +17,17 @@ var UiEditorToolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 	} },
 	setup(__props) {
 		const props = __props;
-		const root = ref(null);
-		const stripElement = useTemplateRef("strip");
-		const overflowStart = ref(false);
-		const overflowEnd = ref(false);
+		useTemplateRef("strip");
 		/** 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
-			}
-		});
+		const hostState = computed(() => [props.floating && "floating"].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
 				"data-component": "ui-editor-toolbar",
 				role: "toolbar",
 				"aria-label": "Editor toolbar"
-			}, _ctx.$attrs, {
-				"data-ui-editor-toolbar-state": hostState.value || void 0,
-				ref_key: "root",
-				ref: root
-			}), [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")], 512)], 16, _hoisted_1);
+			}, _ctx.$attrs, { "data-ui-editor-toolbar-state": hostState.value || void 0 }), [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")], 512)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-8f7cefb2"]]);
+}), [["__scopeId", "data-v-3076bb8c"]]);
 //#endregion
 export { UiEditorToolbar_default as t };

package/vue/chunks/UiReel.js

@@ -28,6 +28,6 @@ var UiReel_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}, _ctx.$attrs, { "data-ui-reel-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-b373e396"]]);
+}), [["__scopeId", "data-v-eb18d6be"]]);
 //#endregion
 export { UiReel_default as t };

package/vue/chunks/UiScrollArea.js

@@ -0,0 +1,21 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { computed, createElementBlock, defineComponent, mergeProps, openBlock, renderSlot } from "vue";
+//#region .build/vue/UiScrollArea.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-ui-scroll-area-state"];
+//#endregion
+//#region .build/vue/UiScrollArea.vue
+var UiScrollArea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiScrollArea",
+	props: { orientation: { default: "vertical" } },
+	setup(__props) {
+		const props = __props;
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [props.orientation && `orientation orientation=${props.orientation}`].filter(Boolean).join(" "));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-scroll-area" }, _ctx.$attrs, { "data-ui-scroll-area-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-858d7508"]]);
+//#endregion
+export { UiScrollArea_default as t };

package/vue/chunks/UiSearchShell.js

@@ -67,6 +67,6 @@ var UiSearchShell_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			])], 8, _hoisted_1)], 16);
 		};
 	}
-}), [["__scopeId", "data-v-d749a869"]]);
+}), [["__scopeId", "data-v-2ba71171"]]);
 //#endregion
 export { UiSearchShell_default as t };

package/vue/chunks/UiSidebar.js

@@ -85,6 +85,6 @@ var UiSidebar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			}, null, -1)])], 8, _hoisted_3)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-d5bc9278"]]);
+}), [["__scopeId", "data-v-20117052"]]);
 //#endregion
 export { UiSidebar_default as t };