@threadlabs/looma 0.10.9 → 0.10.11

package/vue/UiTreeItem.vue

@@ -51,6 +51,8 @@ const root = ref<HTMLElement | null>(null)
 const rowElement = useTemplateRef<HTMLElement>('row')
 const dragHandleElement = useTemplateRef<HTMLElement>('dragHandle')
 const disclosureElement = useTemplateRef<HTMLElement>('disclosure')
+const leadingElement = useTemplateRef<HTMLElement>('leading')
+const labelElement = useTemplateRef<HTMLElement>('label')
 const labelTextElement = useTemplateRef<HTMLElement>('labelText')
 const actionsElement = useTemplateRef<HTMLElement>('actions')
 const childrenElement = useTemplateRef<HTMLElement>('children')
@@ -92,6 +94,8 @@ useComponentHost(controllerModule.default, {
     row: rowElement,
     dragHandle: dragHandleElement,
     disclosure: disclosureElement,
+    leading: leadingElement,
+    label: labelElement,
     labelText: labelTextElement,
     actions: actionsElement,
     children: childrenElement,
@@ -154,8 +158,8 @@ useComponentHost(controllerModule.default, {
       >
         <span class="disclosure-icon" aria-hidden="true"></span>
       </button>
-      <span class="leading"><slot name="leading" /></span>
-      <span class="label"><span class="label-text" ref="labelText"><slot name="label">{{
+      <span class="leading" ref="leading"><slot name="leading" /></span>
+      <span class="label" ref="label"><span class="label-text" ref="labelText"><slot name="label">{{
             label
           }}</slot></span></span>
       <span class="actions" ref="actions"><slot name="actions" /></span>
@@ -296,6 +300,9 @@ useComponentHost(controllerModule.default, {
   block-size: 1em;
   margin-inline-start: var(--ui-space-1);
   color: var(--ui-text-muted);
+  /* Above the label, so a sliding name passes under the icon. */
+  position: relative;
+  z-index: 1;
 }
 
 .leading:empty {
@@ -324,6 +331,9 @@ useComponentHost(controllerModule.default, {
   overflow: hidden;
   padding: var(--ui-tree-item-label-padding-block, var(--ui-space-1))
     var(--ui-tree-item-label-padding-inline, var(--ui-space-2));
+  /* The length of the fade before the controls. The label's one flex child lays out no gap; this
+     is where the controller reads the length in pixels to stop a sliding name before the fade. */
+  column-gap: var(--ui-space-3);
 }
 
 /* Slotted label content fills the cell, so a link is the row's hit area rather than sizing to
@@ -344,6 +354,27 @@ useComponentHost(controllerModule.default, {
   min-inline-size: 0;
 }
 
+/* The controls sit over the label's end, so the text fades out where they begin. The fade is
+   the truncation mark while it shows: an ellipsis under it would read as a second one. */
+.row:hover > .label,
+.row:focus-within > .label {
+  text-overflow: clip;
+  mask-image: linear-gradient(
+    to right,
+    #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
+    transparent calc(100% - var(--_tree-actions-width, 1.75rem))
+  );
+}
+
+.row:hover > .label:dir(rtl),
+.row:focus-within > .label:dir(rtl) {
+  mask-image: linear-gradient(
+    to left,
+    #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
+    transparent calc(100% - var(--_tree-actions-width, 1.75rem))
+  );
+}
+
 /* A hovered row reads its whole name: the label slides far enough to show the end, waits
    there, and comes back. Only when it actually overflows — the controller measures by how
    much — after the controls have taken their place over its end — and hands over the distance
@@ -355,13 +386,21 @@ useComponentHost(controllerModule.default, {
   will-change: transform;
 }
 
-/* While it slides, the start fades too: the name is leaving the cell at both ends, and a hard
-   edge beside the icon reads as a collision rather than as more text. */
+/* This comes after the hover fade, which it replaces at the same specificity. While the name
+   slides, the label reaches back under the icon (the controller measures how far) with its text
+   where it was, and fades out across that stretch, gone by the icon's middle: the name slips
+   under the icon rather than stopping at a hard edge beside it. */
 .row[data-ui-marquee] > .label {
+  margin-inline-start: calc(-1 * var(--_marquee-lead, 0px));
+  padding-inline-start: calc(
+    var(--_marquee-lead, 0px) + var(--ui-tree-item-label-padding-inline, var(--ui-space-2))
+  );
   mask-image: linear-gradient(
     to right,
-    transparent 0,
-    #000 var(--ui-space-2),
+    transparent calc(var(--_marquee-lead, 0px) / 2),
+    #000 calc(
+      var(--_marquee-lead, 0px) + var(--ui-tree-item-label-padding-inline, var(--ui-space-2))
+    ),
     #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
     transparent calc(100% - var(--_tree-actions-width, 1.75rem))
   );
@@ -370,8 +409,10 @@ useComponentHost(controllerModule.default, {
 .row[data-ui-marquee] > .label:dir(rtl) {
   mask-image: linear-gradient(
     to left,
-    transparent 0,
-    #000 var(--ui-space-2),
+    transparent calc(var(--_marquee-lead, 0px) / 2),
+    #000 calc(
+      var(--_marquee-lead, 0px) + var(--ui-tree-item-label-padding-inline, var(--ui-space-2))
+    ),
     #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
     transparent calc(100% - var(--_tree-actions-width, 1.75rem))
   );
@@ -394,27 +435,6 @@ useComponentHost(controllerModule.default, {
   }
 }
 
-/* The controls sit over the label's end, so the text fades out where they begin. The fade is
-   the truncation mark while it shows: an ellipsis under it would read as a second one. */
-.row:hover > .label,
-.row:focus-within > .label {
-  text-overflow: clip;
-  mask-image: linear-gradient(
-    to right,
-    #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
-    transparent calc(100% - var(--_tree-actions-width, 1.75rem))
-  );
-}
-
-.row:hover > .label:dir(rtl),
-.row:focus-within > .label:dir(rtl) {
-  mask-image: linear-gradient(
-    to left,
-    #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
-    transparent calc(100% - var(--_tree-actions-width, 1.75rem))
-  );
-}
-
 .row:hover > .label > :slotted(*),
 .row:focus-within > .label > :slotted(*) {
   text-overflow: clip;

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 };

package/vue/chunks/UiTreeItem.js

@@ -22,8 +22,14 @@ var _hoisted_2 = {
 };
 var _hoisted_3 = ["aria-label"];
 var _hoisted_4 = ["disabled", "hidden"];
-var _hoisted_5 = { class: "leading" };
-var _hoisted_6 = { class: "label" };
+var _hoisted_5 = {
+	class: "leading",
+	ref: "leading"
+};
+var _hoisted_6 = {
+	class: "label",
+	ref: "label"
+};
 var _hoisted_7 = {
 	class: "label-text",
 	ref: "labelText"
@@ -79,6 +85,8 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		const rowElement = useTemplateRef("row");
 		const dragHandleElement = useTemplateRef("dragHandle");
 		const disclosureElement = useTemplateRef("disclosure");
+		const leadingElement = useTemplateRef("leading");
+		const labelElement = useTemplateRef("label");
 		const labelTextElement = useTemplateRef("labelText");
 		const actionsElement = useTemplateRef("actions");
 		const childrenElement = useTemplateRef("children");
@@ -114,6 +122,8 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				row: rowElement,
 				dragHandle: dragHandleElement,
 				disclosure: disclosureElement,
+				leading: leadingElement,
+				label: labelElement,
 				labelText: labelTextElement,
 				actions: actionsElement,
 				children: childrenElement
@@ -203,8 +213,8 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 						class: "disclosure-icon",
 						"aria-hidden": "true"
 					}, null, -1)])], 8, _hoisted_4),
-					createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "leading")]),
-					createElementVNode("span", _hoisted_6, [createElementVNode("span", _hoisted_7, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])], 512)]),
+					createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "leading")], 512),
+					createElementVNode("span", _hoisted_6, [createElementVNode("span", _hoisted_7, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])], 512)], 512),
 					createElementVNode("span", _hoisted_8, [renderSlot(_ctx.$slots, "actions")], 512),
 					_cache[2] || (_cache[2] = createElementVNode("span", {
 						class: "drop-indicator row-drop-indicator",
@@ -224,6 +234,6 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-a950b4d2"]]);
+}), [["__scopeId", "data-v-3778b642"]]);
 //#endregion
 export { UiTreeItem_default as t };