@threadlabs/looma 0.28.12 → 0.28.14

package/vue/chunks/UiTreeItem.js

@@ -8,32 +8,42 @@ var _hoisted_1 = [
 	"aria-level",
 	"aria-selected",
 	"aria-disabled",
-	"data-accepts",
-	"data-actions-visible",
-	"data-container",
-	"data-disabled",
+	"data-item-id",
 	"data-drag-type",
-	"data-drop-depth",
 	"data-drop-scope",
-	"data-expanded",
-	"data-item-id",
-	"data-label",
-	"data-lazy",
-	"data-marquee",
-	"data-selected",
-	"data-sortable",
+	"data-accepts",
+	"data-drop-depth",
 	"data-subtree-depth",
+	"data-ui-tree-item-prop-accepts",
+	"data-ui-tree-item-prop-actions-visible",
+	"data-ui-tree-item-prop-container",
+	"data-ui-tree-item-prop-disabled",
+	"data-ui-tree-item-prop-drag-type",
+	"data-ui-tree-item-prop-drop-depth",
+	"data-ui-tree-item-prop-drop-scope",
+	"data-ui-tree-item-prop-expanded",
+	"data-ui-tree-item-prop-item-id",
+	"data-ui-tree-item-prop-label",
+	"data-ui-tree-item-prop-lazy",
+	"data-ui-tree-item-prop-marquee",
+	"data-ui-tree-item-prop-selected",
+	"data-ui-tree-item-prop-sortable",
+	"data-ui-tree-item-prop-subtree-depth",
 	"data-ui-tree-item-state"
 ];
 var _hoisted_2 = ["aria-label"];
 var _hoisted_3 = ["disabled", "hidden"];
-var _hoisted_4 = { class: "selection-hit" };
+var _hoisted_4 = {
+	class: "selection-hit",
+	"data-hn-ui-tree-item": ""
+};
 var _hoisted_5 = [
 	"^checked",
 	"disabled",
 	"aria-label"
 ];
-var _hoisted_6 = ["hidden"];
+var _hoisted_6 = { "data-hn-ui-tree-item": "" };
+var _hoisted_7 = ["hidden"];
 //#endregion
 //#region .build/vue/UiTreeItem.vue
 var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -395,7 +405,7 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		provide("html-next:ui-tree-item:isContainer", isContainer);
 		provide("html-next:ui-tree-item:moving", moving);
 		checkHydratedRoot("div", "ui-tree-item");
-		/** The values the styles' :host-state() rules test. */
+		/** The values the styles' :host() prop and state rules test. */
 		const hostState = computed(() => [
 			checkedProps.value.selected && "selected",
 			checkedProps.value.disabled && "disabled",
@@ -495,31 +505,40 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				class: "ui-tree-item",
 				role: "treeitem"
 			}, unref(nativeAttrs)(_ctx.$attrs), {
+				"data-hn": "",
+				"data-hn-ui-tree-item": "",
 				"aria-label": checkedProps.value.label ?? void 0,
 				"aria-level": structuralLevel.value,
 				"aria-selected": checkedProps.value.selected ?? void 0,
 				"aria-disabled": checkedProps.value.disabled ?? void 0,
-				"data-accepts": unref(reflectedProp)("accepts", "accepts", checkedProps.value.accepts, void 0, true),
-				"data-actions-visible": unref(reflectedProp)("actionsVisible", "actions-visible", checkedProps.value.actionsVisible, void 0, false),
-				"data-container": unref(reflectedProp)("container", "container", checkedProps.value.container, void 0, false),
-				"data-disabled": unref(reflectedProp)("disabled", "disabled", checkedProps.value.disabled, void 0, false),
-				"data-drag-type": unref(reflectedProp)("dragType", "drag-type", checkedProps.value.dragType, void 0, true),
-				"data-drop-depth": unref(reflectedProp)("dropDepth", "drop-depth", checkedProps.value.dropDepth, void 0, true),
-				"data-drop-scope": unref(reflectedProp)("dropScope", "drop-scope", checkedProps.value.dropScope, void 0, true),
-				"data-expanded": unref(reflectedProp)("expanded", "expanded", checkedProps.value.expanded, void 0, false),
-				"data-item-id": unref(reflectedProp)("itemId", "item-id", checkedProps.value.itemId, void 0, true),
-				"data-label": unref(reflectedProp)("label", "label", checkedProps.value.label, void 0, false),
-				"data-lazy": unref(reflectedProp)("lazy", "lazy", checkedProps.value.lazy, void 0, false),
-				"data-marquee": unref(reflectedProp)("marquee", "marquee", checkedProps.value.marquee, void 0, false),
-				"data-selected": unref(reflectedProp)("selected", "selected", checkedProps.value.selected, void 0, false),
-				"data-sortable": unref(reflectedProp)("sortable", "sortable", checkedProps.value.sortable, void 0, false),
-				"data-subtree-depth": unref(reflectedProp)("subtreeDepth", "subtree-depth", checkedProps.value.subtreeDepth, void 0, true),
+				"data-item-id": checkedProps.value.itemId ?? void 0,
+				"data-drag-type": checkedProps.value.dragType ?? void 0,
+				"data-drop-scope": checkedProps.value.dropScope ?? void 0,
+				"data-accepts": checkedProps.value.accepts ?? void 0,
+				"data-drop-depth": checkedProps.value.dropDepth ?? void 0,
+				"data-subtree-depth": checkedProps.value.subtreeDepth ?? void 0,
+				"data-ui-tree-item-prop-accepts": unref(reflectedProp)("accepts", "accepts", checkedProps.value.accepts, void 0, false),
+				"data-ui-tree-item-prop-actions-visible": unref(reflectedProp)("actionsVisible", "actions-visible", checkedProps.value.actionsVisible, void 0, false),
+				"data-ui-tree-item-prop-container": unref(reflectedProp)("container", "container", checkedProps.value.container, void 0, false),
+				"data-ui-tree-item-prop-disabled": unref(reflectedProp)("disabled", "disabled", checkedProps.value.disabled, void 0, false),
+				"data-ui-tree-item-prop-drag-type": unref(reflectedProp)("dragType", "drag-type", checkedProps.value.dragType, void 0, false),
+				"data-ui-tree-item-prop-drop-depth": unref(reflectedProp)("dropDepth", "drop-depth", checkedProps.value.dropDepth, void 0, false),
+				"data-ui-tree-item-prop-drop-scope": unref(reflectedProp)("dropScope", "drop-scope", checkedProps.value.dropScope, void 0, false),
+				"data-ui-tree-item-prop-expanded": unref(reflectedProp)("expanded", "expanded", checkedProps.value.expanded, void 0, false),
+				"data-ui-tree-item-prop-item-id": unref(reflectedProp)("itemId", "item-id", checkedProps.value.itemId, void 0, false),
+				"data-ui-tree-item-prop-label": unref(reflectedProp)("label", "label", checkedProps.value.label, void 0, false),
+				"data-ui-tree-item-prop-lazy": unref(reflectedProp)("lazy", "lazy", checkedProps.value.lazy, void 0, false),
+				"data-ui-tree-item-prop-marquee": unref(reflectedProp)("marquee", "marquee", checkedProps.value.marquee, void 0, false),
+				"data-ui-tree-item-prop-selected": unref(reflectedProp)("selected", "selected", checkedProps.value.selected, void 0, false),
+				"data-ui-tree-item-prop-sortable": unref(reflectedProp)("sortable", "sortable", checkedProps.value.sortable, void 0, false),
+				"data-ui-tree-item-prop-subtree-depth": unref(reflectedProp)("subtreeDepth", "subtree-depth", checkedProps.value.subtreeDepth, void 0, false),
 				"data-ui-tree-item-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
 			}), [
 				createElementVNode("div", {
 					class: "row",
+					"data-hn-ui-tree-item": "",
 					ref_key: "rowElement",
 					ref: rowElement
 				}, [
@@ -528,6 +547,7 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 						class: "drag-handle",
 						type: "button",
 						draggable: "true",
+						"data-hn-ui-tree-item": "",
 						"aria-label": guarded.value,
 						ref_key: "dragHandleElement",
 						ref: dragHandleElement
@@ -539,74 +559,88 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 						stroke: "currentColor",
 						"stroke-width": "2",
 						"stroke-linecap": "round",
-						"stroke-linejoin": "round"
+						"stroke-linejoin": "round",
+						"data-hn-ui-tree-item": ""
 					}, [
 						createElementVNode("circle", {
 							cx: "9",
 							cy: "12",
-							r: "1"
+							r: "1",
+							"data-hn-ui-tree-item": ""
 						}),
 						createElementVNode("circle", {
 							cx: "9",
 							cy: "5",
-							r: "1"
+							r: "1",
+							"data-hn-ui-tree-item": ""
 						}),
 						createElementVNode("circle", {
 							cx: "9",
 							cy: "19",
-							r: "1"
+							r: "1",
+							"data-hn-ui-tree-item": ""
 						}),
 						createElementVNode("circle", {
 							cx: "15",
 							cy: "12",
-							r: "1"
+							r: "1",
+							"data-hn-ui-tree-item": ""
 						}),
 						createElementVNode("circle", {
 							cx: "15",
 							cy: "5",
-							r: "1"
+							r: "1",
+							"data-hn-ui-tree-item": ""
 						}),
 						createElementVNode("circle", {
 							cx: "15",
 							cy: "19",
-							r: "1"
+							r: "1",
+							"data-hn-ui-tree-item": ""
 						})
 					], -1)])], 8, _hoisted_2)) : createCommentVNode("v-if", true),
 					createElementVNode("button", {
 						class: "disclosure",
 						type: "button",
+						"data-hn-ui-tree-item": "",
 						disabled: checkedProps.value.disabled ?? void 0,
 						hidden: !isContainer.value,
 						ref_key: "disclosureElement",
 						ref: disclosureElement
 					}, [..._cache[1] || (_cache[1] = [createElementVNode("span", {
 						class: "disclosure-icon",
-						"aria-hidden": "true"
+						"aria-hidden": "true",
+						"data-hn-ui-tree-item": ""
 					}, null, -1)])], 8, _hoisted_3),
 					createElementVNode("label", _hoisted_4, [createElementVNode("input", {
 						class: "selection-checkbox",
 						type: "checkbox",
 						tabindex: "-1",
+						"data-hn-ui-tree-item": "",
 						"^checked": checkedProps.value.selected ? true : void 0,
 						disabled: checkedProps.value.disabled ?? void 0,
 						"aria-label": guardedBinding.value
 					}, null, 8, _hoisted_5)]),
 					createElementVNode("span", {
 						class: "leading",
+						"data-hn-ui-tree-item": "",
 						ref_key: "leadingElement",
 						ref: leadingElement
-					}, [renderSlot(_ctx.$slots, "leading")], 512),
+					}, [renderSlot(_ctx.$slots, "leading", {}, void 0, true)], 512),
 					createElementVNode("span", {
 						class: "label",
+						"data-hn-ui-tree-item": "",
 						ref_key: "labelElement",
 						ref: labelElement
 					}, [createElementVNode("span", {
 						class: "label-text",
+						"data-hn-ui-tree-item": "",
 						ref_key: "labelTextElement",
 						ref: labelTextElement
-					}, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(checkedProps.value.label), 1)])], 512)], 512),
+					}, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(checkedProps.value.label), 1)], true)], 512)], 512),
 					createElementVNode("span", {
 						class: "actions",
+						"data-hn-ui-tree-item": "",
 						ref_key: "actionsElement",
 						ref: actionsElement
 					}, [moving.value ? (openBlock(), createBlock(UiButton_default, {
@@ -620,22 +654,25 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 					}, {
 						default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode("Cancel", -1)])]),
 						_: 1
-					})) : createCommentVNode("v-if", true), createElementVNode("span", null, [renderSlot(_ctx.$slots, "actions")])], 512),
+					})) : createCommentVNode("v-if", true), createElementVNode("span", _hoisted_6, [renderSlot(_ctx.$slots, "actions", {}, void 0, true)])], 512),
 					_cache[3] || (_cache[3] = createElementVNode("span", {
 						class: "drop-indicator row-drop-indicator",
-						"aria-hidden": "true"
+						"aria-hidden": "true",
+						"data-hn-ui-tree-item": ""
 					}, null, -1))
 				], 512),
 				createElementVNode("div", {
 					class: "children",
 					role: "group",
+					"data-hn-ui-tree-item": "",
 					hidden: !(isContainer.value && internalExpanded.value),
 					ref_key: "childrenElement",
 					ref: childrenElement
-				}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_6),
+				}, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 8, _hoisted_7),
 				_cache[4] || (_cache[4] = createElementVNode("span", {
 					class: "drop-indicator subtree-drop-indicator",
-					"aria-hidden": "true"
+					"aria-hidden": "true",
+					"data-hn-ui-tree-item": ""
 				}, null, -1))
 			], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
@@ -643,6 +680,6 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-89627b2f"]]);
+}), [["__scopeId", "data-v-54a4ba48"]]);
 //#endregion
 export { UiTreeItem_default as t };

package/vue/chunks/_plugin-vue_export-helper.js

@@ -123,6 +123,16 @@ function dispatchToTargets(recorded, send) {
 	const targets = (recorded instanceof Set ? [...recorded] : Array.isArray(recorded) ? [...recorded] : [recorded]).map((ref) => ref?.nodeType === 1 ? ref : ref?.$el).filter((element) => element?.nodeType === 1 && element.isConnected).sort((a, b) => a === b ? 0 : a.compareDocumentPosition(b) & 4 ? -1 : 1);
 	for (const target of targets) if (target.isConnected) send(target);
 }
+/** Vue refs a component invocation as its public instance; the ref is the root element it lowered to. */
+function refElement(ref) {
+	return ref == null || ref.nodeType === 1 ? ref : ref.$el;
+}
+/** The root ref as an element: a delegating component's root ref holds the invoked component. */
+function rootElement(root) {
+	return { get value() {
+		return refElement(root.value);
+	} };
+}
 var runtimeKey = Symbol.for("@nextwebwg/html-next.runtime.v1");
 function observeConnection(element, check) {
 	const document = element.ownerDocument;
@@ -156,7 +166,8 @@ function observeConnection(element, check) {
 	};
 }
 /** Keep native focus on the corresponding control when a root-level $match replaces its element. */
-function preserveRootFocus(root) {
+function preserveRootFocus(componentRoot) {
+	const root = rootElement(componentRoot);
 	const focusable = "a[href], button, input, select, textarea, summary, [tabindex], [contenteditable]";
 	let previous = null;
 	let active = null;
@@ -190,7 +201,8 @@ function slottedElements(nodes) {
 * and reinsertion without treating an in-tree move as a new connection.
 */
 function useComponentHost(controllerLoader, options) {
-	const { root, dispatch, props, propInputs = () => null, propNames = [], refs = {}, state = {}, computed: computedValues = {}, data = {}, context = {} } = options;
+	const root = rootElement(options.root);
+	const { dispatch, props, propInputs = () => null, propNames = [], refs = {}, state = {}, computed: computedValues = {}, data = {}, context = {} } = options;
 	const vueSlots = useSlots();
 	const component = getCurrentInstance();
 	const report = (error) => {
@@ -290,7 +302,7 @@ function useComponentHost(controllerLoader, options) {
 		props: Object.freeze(propHandles),
 		refs: Object.defineProperties({}, Object.fromEntries(Object.entries(refs).map(([name, ref]) => [name, {
 			enumerable: true,
-			get: () => Array.isArray(ref.value) ? inDocumentOrder(ref.value) : ref.value
+			get: () => Array.isArray(ref.value) ? inDocumentOrder(ref.value.map(refElement)) : refElement(ref.value)
 		}]))),
 		slots: new Proxy({}, {
 			get: (_target, name) => {
@@ -415,7 +427,8 @@ var HtmlDiagnosticError = class extends Error {
 	}
 };
 /** Reports declared CustomEvents to Vue and dispatches them through the DOM. */
-function createDispatch(root, emit, options = {}) {
+function createDispatch(componentRoot, emit, options = {}) {
+	const root = rootElement(componentRoot);
 	const { declared = {}, checks = {}, modeled = [] } = options;
 	const reported = /* @__PURE__ */ new Map();
 	return (name, detail, targets) => {