@threadlabs/looma 0.28.13 → 0.28.15

package/vue/chunks/UiFloatingActionButton.js

@@ -5,9 +5,9 @@ import { computed, createElementBlock, defineComponent, mergeProps, openBlock, r
 var _hoisted_1 = [
 	"aria-label",
 	"disabled",
-	"data-disabled",
-	"data-label",
-	"data-mobile-only",
+	"data-ui-floating-action-button-prop-disabled",
+	"data-ui-floating-action-button-prop-label",
+	"data-ui-floating-action-button-prop-mobile-only",
 	"data-ui-floating-action-button-state"
 ];
 //#endregion
@@ -88,25 +88,27 @@ var UiFloatingActionButton_default = /*#__PURE__*/ _plugin_vue_export_helper_def
 		});
 		const reflectedProp = useReflectedProp();
 		checkHydratedRoot("button", "ui-floating-action-button");
-		/** The values the styles' :host-state() rules test. */
+		/** The values the styles' :host() prop and state rules test. */
 		const hostState = computed(() => [checkedProps.value.mobileOnly && "mobileOnly"].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
 			return withDirectives((openBlock(), createElementBlock("button", mergeProps({
 				class: "ui-floating-action-button",
 				type: "button"
 			}, unref(nativeAttrs)(_ctx.$attrs), {
+				"data-hn": "",
+				"data-hn-ui-floating-action-button": "",
 				"aria-label": checkedProps.value.label ?? void 0,
 				disabled: checkedProps.value.disabled ?? void 0,
-				"data-disabled": unref(reflectedProp)("disabled", "disabled", checkedProps.value.disabled, void 0, false),
-				"data-label": unref(reflectedProp)("label", "label", checkedProps.value.label, void 0, false),
-				"data-mobile-only": unref(reflectedProp)("mobileOnly", "mobile-only", checkedProps.value.mobileOnly, void 0, false),
+				"data-ui-floating-action-button-prop-disabled": unref(reflectedProp)("disabled", "disabled", checkedProps.value.disabled, void 0, false),
+				"data-ui-floating-action-button-prop-label": unref(reflectedProp)("label", "label", checkedProps.value.label, void 0, false),
+				"data-ui-floating-action-button-prop-mobile-only": unref(reflectedProp)("mobileOnly", "mobile-only", checkedProps.value.mobileOnly, void 0, false),
 				"data-ui-floating-action-button-state": hostState.value || void 0
-			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1)), [[unref(vPropValidity), {
+			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-3d55b8dc"]]);
+}), [["__scopeId", "data-v-edbc112b"]]);
 //#endregion
 export { UiFloatingActionButton_default as t };

package/vue/chunks/UiFormField.js

@@ -3,15 +3,27 @@ import { a as vPropValidity, n as checkedProp, r as propValidityState } from "./
 import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderSlot, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiFormField.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
-	"data-disabled",
-	"data-invalid",
-	"data-required",
+	"data-ui-form-field-prop-disabled",
+	"data-ui-form-field-prop-invalid",
+	"data-ui-form-field-prop-required",
 	"data-ui-form-field-state"
 ];
-var _hoisted_2 = { class: "label" };
-var _hoisted_3 = { class: "label-action" };
-var _hoisted_4 = { class: "help" };
-var _hoisted_5 = { class: "error" };
+var _hoisted_2 = {
+	class: "label",
+	"data-hn-ui-form-field": ""
+};
+var _hoisted_3 = {
+	class: "label-action",
+	"data-hn-ui-form-field": ""
+};
+var _hoisted_4 = {
+	class: "help",
+	"data-hn-ui-form-field": ""
+};
+var _hoisted_5 = {
+	class: "error",
+	"data-hn-ui-form-field": ""
+};
 //#endregion
 //#region .build/vue/UiFormField.vue
 var UiFormField_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -92,7 +104,7 @@ var UiFormField_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		const hydrationInstance = getCurrentInstance();
 		const root = ref(null);
 		checkHydratedRoot("div", "ui-form-field");
-		/** The values the styles' :host-state() rules test. */
+		/** The values the styles' :host() prop and state rules test. */
 		const hostState = computed(() => [checkedProps.value.invalid && "invalid"].filter(Boolean).join(" "));
 		const dispatch = createDispatch(root);
 		useComponentHost(() => import("@threadlabs/looma/components/ui-form-field/ui-form-field.js"), {
@@ -120,23 +132,25 @@ var UiFormField_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		});
 		return (_ctx, _cache) => {
 			return withDirectives((openBlock(), createElementBlock("div", mergeProps({ class: "ui-form-field" }, unref(nativeAttrs)(_ctx.$attrs), {
-				"data-disabled": unref(reflectedProp)("disabled", "disabled", checkedProps.value.disabled, void 0, false),
-				"data-invalid": unref(reflectedProp)("invalid", "invalid", checkedProps.value.invalid, void 0, false),
-				"data-required": unref(reflectedProp)("required", "required", checkedProps.value.required, void 0, false),
+				"data-hn": "",
+				"data-hn-ui-form-field": "",
+				"data-ui-form-field-prop-disabled": unref(reflectedProp)("disabled", "disabled", checkedProps.value.disabled, void 0, false),
+				"data-ui-form-field-prop-invalid": unref(reflectedProp)("invalid", "invalid", checkedProps.value.invalid, void 0, false),
+				"data-ui-form-field-prop-required": unref(reflectedProp)("required", "required", checkedProps.value.required, void 0, false),
 				"data-ui-form-field-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
 			}), [
-				createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "label"), createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "label-action")])]),
-				renderSlot(_ctx.$slots, "default"),
-				createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "help")]),
-				createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "error")])
+				createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "label", {}, void 0, true), createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "label-action", {}, void 0, true)])]),
+				renderSlot(_ctx.$slots, "default", {}, void 0, true),
+				createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "help", {}, void 0, true)]),
+				createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "error", {}, void 0, true)])
 			], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-50ee887a"]]);
+}), [["__scopeId", "data-v-f690f447"]]);
 //#endregion
 export { UiFormField_default as t };

package/vue/chunks/UiGrid.js

@@ -3,9 +3,9 @@ import { a as vPropValidity, n as checkedProp } from "./props.js";
 import { computed, createElementBlock, defineComponent, mergeProps, openBlock, renderSlot, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiGrid.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
-	"data-columns",
-	"data-gap",
-	"data-min",
+	"data-ui-grid-prop-columns",
+	"data-ui-grid-prop-gap",
+	"data-ui-grid-prop-min",
 	"data-ui-grid-state"
 ];
 //#endregion
@@ -95,7 +95,7 @@ var UiGrid_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		});
 		const reflectedProp = useReflectedProp();
 		checkHydratedRoot("div", "ui-grid");
-		/** The values the styles' :host-state() rules test. */
+		/** The values the styles' :host() prop and state rules test. */
 		const hostState = computed(() => [
 			checkedProps.value.gap && "gap",
 			checkedProps.value.gap != null && `gap=${encodeURIComponent(checkedProps.value.gap)}`,
@@ -104,10 +104,12 @@ var UiGrid_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
 			return withDirectives((openBlock(), createElementBlock("div", mergeProps({ class: "ui-grid" }, unref(nativeAttrs)(_ctx.$attrs), {
+				"data-hn": "",
+				"data-hn-ui-grid": "",
 				style: { "--_grid-column-cap": checkedProps.value.columns?.toString() },
-				"data-columns": unref(reflectedProp)("columns", "columns", checkedProps.value.columns, void 0, false),
-				"data-gap": unref(reflectedProp)("gap", "gap", checkedProps.value.gap, void 0, false),
-				"data-min": unref(reflectedProp)("min", "min", checkedProps.value.min, void 0, false),
+				"data-ui-grid-prop-columns": unref(reflectedProp)("columns", "columns", checkedProps.value.columns, void 0, false),
+				"data-ui-grid-prop-gap": unref(reflectedProp)("gap", "gap", checkedProps.value.gap, void 0, false),
+				"data-ui-grid-prop-min": unref(reflectedProp)("min", "min", checkedProps.value.min, void 0, false),
 				"data-ui-grid-state": hostState.value || void 0
 			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
@@ -115,6 +117,6 @@ var UiGrid_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-30a8e139"]]);
+}), [["__scopeId", "data-v-4961099f"]]);
 //#endregion
 export { UiGrid_default as t };

package/vue/chunks/UiIcon.js

@@ -2,7 +2,7 @@ import { d as list, i as checkHydratedRoot, p as nativeAttrs, r as attribute, s
 import { a as vPropValidity, n as checkedProp } from "./props.js";
 import { Fragment, computed, createCommentVNode, createElementBlock, defineComponent, mergeProps, openBlock, renderList, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiIcon.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["data-name"];
+var _hoisted_1 = ["data-ui-icon-prop-name"];
 var _hoisted_2 = {
 	viewBox: "0 0 24 24",
 	fill: "none",
@@ -1161,7 +1161,10 @@ var UiIcon_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			return withDirectives((openBlock(), createElementBlock("span", mergeProps({
 				class: "ui-icon",
 				"aria-hidden": "true"
-			}, unref(nativeAttrs)(_ctx.$attrs), { "data-name": unref(reflectedProp)("name", "name", checkedProps.value.name, void 0, false) }), [(openBlock(), createElementBlock("svg", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(list)(unref(shapes)), (shape, index) => {
+			}, unref(nativeAttrs)(_ctx.$attrs), {
+				"data-hn": "",
+				"data-ui-icon-prop-name": unref(reflectedProp)("name", "name", checkedProps.value.name, void 0, false)
+			}), [(openBlock(), createElementBlock("svg", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(list)(unref(shapes)), (shape, index) => {
 				return openBlock(), createElementBlock("g", { key: index }, [
 					shape.tag === "path" ? (openBlock(), createElementBlock("path", {
 						key: 0,
@@ -1196,6 +1199,6 @@ var UiIcon_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-9f31f684"]]);
+}), [["__scopeId", "data-v-267808b7"]]);
 //#endregion
 export { UiIcon_default as t };

package/vue/chunks/UiIconButton.js

@@ -6,22 +6,26 @@ import { computed, createBlock, createCommentVNode, createElementBlock, createEl
 var _hoisted_1 = [
 	"disabled",
 	"aria-label",
+	"data-match-button",
 	"aria-disabled",
 	"aria-busy",
-	"data-anticipatory",
-	"data-disabled",
-	"data-guide",
-	"data-label",
-	"data-loading",
-	"data-match-button",
-	"data-pending",
-	"data-round",
-	"data-size",
-	"data-tone",
-	"data-variant",
+	"data-ui-icon-button-prop-anticipatory",
+	"data-ui-icon-button-prop-disabled",
+	"data-ui-icon-button-prop-guide",
+	"data-ui-icon-button-prop-label",
+	"data-ui-icon-button-prop-loading",
+	"data-ui-icon-button-prop-match-button",
+	"data-ui-icon-button-prop-pending",
+	"data-ui-icon-button-prop-round",
+	"data-ui-icon-button-prop-size",
+	"data-ui-icon-button-prop-tone",
+	"data-ui-icon-button-prop-variant",
 	"data-ui-icon-button-state"
 ];
-var _hoisted_2 = { class: "content" };
+var _hoisted_2 = {
+	class: "content",
+	"data-hn-ui-icon-button": ""
+};
 //#endregion
 //#region .build/vue/UiIconButton.vue
 var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -281,7 +285,7 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}, concat(checkedProps.value.loading || checkedProps.value.pending)));
 		});
 		checkHydratedRoot("button", "ui-icon-button");
-		/** The values the styles' :host-state() rules test. */
+		/** The values the styles' :host() prop and state rules test. */
 		const hostState = computed(() => [
 			checkedProps.value.tone && "tone",
 			checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`,
@@ -334,21 +338,24 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				class: "ui-icon-button",
 				type: "button"
 			}, unref(nativeAttrs)(_ctx.$attrs), {
+				"data-hn": "",
+				"data-hn-ui-icon-button": "",
 				disabled: checkedProps.value.disabled ?? void 0,
 				"aria-label": checkedProps.value.label ?? void 0,
+				"data-match-button": checkedProps.value.matchButton ? "" : void 0,
 				"aria-disabled": guarded.value,
 				"aria-busy": checkedProps.value.loading || checkedProps.value.pending,
-				"data-anticipatory": unref(reflectedProp)("anticipatory", "anticipatory", checkedProps.value.anticipatory, void 0, false),
-				"data-disabled": unref(reflectedProp)("disabled", "disabled", checkedProps.value.disabled, void 0, false),
-				"data-guide": unref(reflectedProp)("guide", "guide", checkedProps.value.guide, void 0, false),
-				"data-label": unref(reflectedProp)("label", "label", checkedProps.value.label, void 0, false),
-				"data-loading": unref(reflectedProp)("loading", "loading", checkedProps.value.loading, void 0, false),
-				"data-match-button": unref(reflectedProp)("matchButton", "match-button", checkedProps.value.matchButton, void 0, true),
-				"data-pending": unref(reflectedProp)("pending", "pending", checkedProps.value.pending, void 0, false),
-				"data-round": unref(reflectedProp)("round", "round", checkedProps.value.round, void 0, false),
-				"data-size": unref(reflectedProp)("size", "size", checkedProps.value.size, void 0, false),
-				"data-tone": unref(reflectedProp)("tone", "tone", checkedProps.value.tone, void 0, false),
-				"data-variant": unref(reflectedProp)("variant", "variant", checkedProps.value.variant, void 0, false),
+				"data-ui-icon-button-prop-anticipatory": unref(reflectedProp)("anticipatory", "anticipatory", checkedProps.value.anticipatory, void 0, false),
+				"data-ui-icon-button-prop-disabled": unref(reflectedProp)("disabled", "disabled", checkedProps.value.disabled, void 0, false),
+				"data-ui-icon-button-prop-guide": unref(reflectedProp)("guide", "guide", checkedProps.value.guide, void 0, false),
+				"data-ui-icon-button-prop-label": unref(reflectedProp)("label", "label", checkedProps.value.label, void 0, false),
+				"data-ui-icon-button-prop-loading": unref(reflectedProp)("loading", "loading", checkedProps.value.loading, void 0, false),
+				"data-ui-icon-button-prop-match-button": unref(reflectedProp)("matchButton", "match-button", checkedProps.value.matchButton, void 0, false),
+				"data-ui-icon-button-prop-pending": unref(reflectedProp)("pending", "pending", checkedProps.value.pending, void 0, false),
+				"data-ui-icon-button-prop-round": unref(reflectedProp)("round", "round", checkedProps.value.round, void 0, false),
+				"data-ui-icon-button-prop-size": unref(reflectedProp)("size", "size", checkedProps.value.size, void 0, false),
+				"data-ui-icon-button-prop-tone": unref(reflectedProp)("tone", "tone", checkedProps.value.tone, void 0, false),
+				"data-ui-icon-button-prop-variant": unref(reflectedProp)("variant", "variant", checkedProps.value.variant, void 0, false),
 				"data-ui-icon-button-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
@@ -356,12 +363,12 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				key: 0,
 				class: "ui-spinner",
 				size: "sm"
-			})) : createCommentVNode("v-if", true), createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "default")])], 16, _hoisted_1)), [[unref(vPropValidity), {
+			})) : createCommentVNode("v-if", true), createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-4a58a364"]]);
+}), [["__scopeId", "data-v-7ed663c9"]]);
 //#endregion
 export { UiIconButton_default as t };

package/vue/chunks/UiImage.js

@@ -3,13 +3,13 @@ import { a as vPropValidity, n as checkedProp, r as propValidityState } from "./
 import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderSlot, unref, useTemplateRef, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiImage.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
-	"data-alt",
-	"data-height",
-	"data-placement",
-	"data-resizable",
-	"data-selected",
-	"data-src",
-	"data-width",
+	"data-ui-image-prop-alt",
+	"data-ui-image-prop-height",
+	"data-ui-image-prop-placement",
+	"data-ui-image-prop-resizable",
+	"data-ui-image-prop-selected",
+	"data-ui-image-prop-src",
+	"data-ui-image-prop-width",
 	"data-ui-image-state"
 ];
 var _hoisted_2 = [
@@ -186,7 +186,7 @@ var UiImage_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 		const root = ref(null);
 		const frameElement = useTemplateRef("frameElement");
 		checkHydratedRoot("figure", "ui-image");
-		/** The values the styles' :host-state() rules test. */
+		/** The values the styles' :host() prop and state rules test. */
 		const hostState = computed(() => [
 			checkedProps.value.placement && "placement",
 			checkedProps.value.placement != null && `placement=${encodeURIComponent(checkedProps.value.placement)}`,
@@ -232,63 +232,72 @@ var UiImage_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 		});
 		return (_ctx, _cache) => {
 			return withDirectives((openBlock(), createElementBlock("figure", mergeProps({ class: "ui-image" }, unref(nativeAttrs)(_ctx.$attrs), {
-				"data-alt": unref(reflectedProp)("alt", "alt", checkedProps.value.alt, void 0, false),
-				"data-height": unref(reflectedProp)("height", "height", checkedProps.value.height, void 0, false),
-				"data-placement": unref(reflectedProp)("placement", "placement", checkedProps.value.placement, void 0, false),
-				"data-resizable": unref(reflectedProp)("resizable", "resizable", checkedProps.value.resizable, void 0, false),
-				"data-selected": unref(reflectedProp)("selected", "selected", checkedProps.value.selected, void 0, false),
-				"data-src": unref(reflectedProp)("src", "src", checkedProps.value.src, void 0, false),
-				"data-width": unref(reflectedProp)("width", "width", checkedProps.value.width, void 0, false),
+				"data-hn": "",
+				"data-hn-ui-image": "",
+				"data-ui-image-prop-alt": unref(reflectedProp)("alt", "alt", checkedProps.value.alt, void 0, false),
+				"data-ui-image-prop-height": unref(reflectedProp)("height", "height", checkedProps.value.height, void 0, false),
+				"data-ui-image-prop-placement": unref(reflectedProp)("placement", "placement", checkedProps.value.placement, void 0, false),
+				"data-ui-image-prop-resizable": unref(reflectedProp)("resizable", "resizable", checkedProps.value.resizable, void 0, false),
+				"data-ui-image-prop-selected": unref(reflectedProp)("selected", "selected", checkedProps.value.selected, void 0, false),
+				"data-ui-image-prop-src": unref(reflectedProp)("src", "src", checkedProps.value.src, void 0, false),
+				"data-ui-image-prop-width": unref(reflectedProp)("width", "width", checkedProps.value.width, void 0, false),
 				"data-ui-image-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
 			}), [createElementVNode("div", {
 				class: "frame",
+				"data-hn-ui-image": "",
 				ref_key: "frameElement",
 				ref: frameElement
 			}, [
 				renderSlot(_ctx.$slots, "media", {}, () => [createElementVNode("img", {
+					"data-hn-ui-image": "",
 					src: checkedProps.value.src ?? void 0,
 					alt: checkedProps.value.alt ?? void 0,
 					width: checkedProps.value.width?.toString(),
 					height: checkedProps.value.height?.toString()
-				}, null, 8, _hoisted_2)]),
+				}, null, 8, _hoisted_2)], true),
 				createElementVNode("div", {
 					class: "handles",
+					"data-hn-ui-image": "",
 					hidden: !(checkedProps.value.selected && checkedProps.value.resizable)
 				}, [..._cache[0] || (_cache[0] = [
 					createElementVNode("button", {
 						type: "button",
 						class: "handle",
 						"data-corner": "top-left",
-						"aria-label": "Resize image from top left"
+						"aria-label": "Resize image from top left",
+						"data-hn-ui-image": ""
 					}, null, -1),
 					createElementVNode("button", {
 						type: "button",
 						class: "handle",
 						"data-corner": "top-right",
-						"aria-label": "Resize image from top right"
+						"aria-label": "Resize image from top right",
+						"data-hn-ui-image": ""
 					}, null, -1),
 					createElementVNode("button", {
 						type: "button",
 						class: "handle",
 						"data-corner": "bottom-left",
-						"aria-label": "Resize image from bottom left"
+						"aria-label": "Resize image from bottom left",
+						"data-hn-ui-image": ""
 					}, null, -1),
 					createElementVNode("button", {
 						type: "button",
 						class: "handle",
 						"data-corner": "bottom-right",
-						"aria-label": "Resize image from bottom right"
+						"aria-label": "Resize image from bottom right",
+						"data-hn-ui-image": ""
 					}, null, -1)
 				])], 8, _hoisted_3),
-				renderSlot(_ctx.$slots, "controls")
+				renderSlot(_ctx.$slots, "controls", {}, void 0, true)
 			], 512)], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-73881051"]]);
+}), [["__scopeId", "data-v-e34c48dd"]]);
 //#endregion
 export { UiImage_default as t };

package/vue/chunks/UiInput.js

@@ -9,13 +9,13 @@ var _hoisted_1 = [
 	"readonly",
 	"required",
 	"aria-invalid",
-	"data-disabled",
-	"data-invalid",
-	"data-readonly",
-	"data-required",
-	"data-size",
-	"data-type",
-	"data-value",
+	"data-ui-input-prop-disabled",
+	"data-ui-input-prop-invalid",
+	"data-ui-input-prop-readonly",
+	"data-ui-input-prop-required",
+	"data-ui-input-prop-size",
+	"data-ui-input-prop-type",
+	"data-ui-input-prop-value",
 	"data-ui-input-state"
 ];
 //#endregion
@@ -635,7 +635,7 @@ var UiInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 		});
 		const root = ref(null);
 		checkHydratedRoot("input", "ui-input");
-		/** The values the styles' :host-state() rules test. */
+		/** The values the styles' :host() prop and state rules test. */
 		const hostState = computed(() => [checkedProps.value.size && "size", checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`].filter(Boolean).join(" "));
 		const dispatch = createDispatch(root);
 		useComponentHost(() => import("@threadlabs/looma/components/ui-input/ui-input.js"), {
@@ -670,18 +670,19 @@ var UiInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 		});
 		return (_ctx, _cache) => {
 			return withDirectives((openBlock(), createElementBlock("input", mergeProps({ class: "ui-input" }, unref(nativeAttrs)(_ctx.$attrs), {
+				"data-hn": "",
 				type: checkedProps.value.type ?? void 0,
 				disabled: checkedProps.value.disabled ?? void 0,
 				readonly: checkedProps.value.readonly ?? void 0,
 				required: checkedProps.value.required ?? void 0,
 				"aria-invalid": checkedProps.value.invalid ?? void 0,
-				"data-disabled": unref(reflectedProp)("disabled", "disabled", checkedProps.value.disabled, void 0, false),
-				"data-invalid": unref(reflectedProp)("invalid", "invalid", checkedProps.value.invalid, void 0, false),
-				"data-readonly": unref(reflectedProp)("readonly", "readonly", checkedProps.value.readonly, void 0, false),
-				"data-required": unref(reflectedProp)("required", "required", checkedProps.value.required, void 0, false),
-				"data-size": unref(reflectedProp)("size", "size", checkedProps.value.size, void 0, false),
-				"data-type": unref(reflectedProp)("type", "type", checkedProps.value.type, void 0, false),
-				"data-value": unref(reflectedProp)("value", "value", checkedProps.value.value, void 0, false),
+				"data-ui-input-prop-disabled": unref(reflectedProp)("disabled", "disabled", checkedProps.value.disabled, void 0, false),
+				"data-ui-input-prop-invalid": unref(reflectedProp)("invalid", "invalid", checkedProps.value.invalid, void 0, false),
+				"data-ui-input-prop-readonly": unref(reflectedProp)("readonly", "readonly", checkedProps.value.readonly, void 0, false),
+				"data-ui-input-prop-required": unref(reflectedProp)("required", "required", checkedProps.value.required, void 0, false),
+				"data-ui-input-prop-size": unref(reflectedProp)("size", "size", checkedProps.value.size, void 0, false),
+				"data-ui-input-prop-type": unref(reflectedProp)("type", "type", checkedProps.value.type, void 0, false),
+				"data-ui-input-prop-value": unref(reflectedProp)("value", "value", checkedProps.value.value, void 0, false),
 				onInput: _cache[0] || (_cache[0] = ($event) => model.value = unref(readBoundControl)($event.currentTarget)),
 				"data-ui-input-state": hostState.value || void 0,
 				ref_key: "root",
@@ -701,6 +702,6 @@ var UiInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-a8c06d86"]]);
+}), [["__scopeId", "data-v-111fdd7d"]]);
 //#endregion
 export { UiInput_default as t };

package/vue/chunks/UiInputGroup.js

@@ -3,17 +3,29 @@ import { a as vPropValidity, n as checkedProp, r as propValidityState } from "./
 import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderSlot, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiInputGroup.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
-	"data-action-position",
-	"data-disabled",
-	"data-multiline",
-	"data-prefix-kind",
-	"data-variant",
+	"data-ui-input-group-prop-action-position",
+	"data-ui-input-group-prop-disabled",
+	"data-ui-input-group-prop-multiline",
+	"data-ui-input-group-prop-prefix-kind",
+	"data-ui-input-group-prop-variant",
 	"data-ui-input-group-state"
 ];
-var _hoisted_2 = { class: "affix" };
-var _hoisted_3 = { class: "field" };
-var _hoisted_4 = { class: "affix" };
-var _hoisted_5 = { class: "action" };
+var _hoisted_2 = {
+	class: "affix",
+	"data-hn-ui-input-group": ""
+};
+var _hoisted_3 = {
+	class: "field",
+	"data-hn-ui-input-group": ""
+};
+var _hoisted_4 = {
+	class: "affix",
+	"data-hn-ui-input-group": ""
+};
+var _hoisted_5 = {
+	class: "action",
+	"data-hn-ui-input-group": ""
+};
 //#endregion
 //#region .build/vue/UiInputGroup.vue
 var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -135,7 +147,7 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		const hydrationInstance = getCurrentInstance();
 		const root = ref(null);
 		checkHydratedRoot("div", "ui-input-group");
-		/** The values the styles' :host-state() rules test. */
+		/** The values the styles' :host() prop and state rules test. */
 		const hostState = computed(() => [
 			checkedProps.value.variant && "variant",
 			checkedProps.value.variant != null && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
@@ -174,11 +186,13 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		});
 		return (_ctx, _cache) => {
 			return withDirectives((openBlock(), createElementBlock("div", mergeProps({ class: "ui-input-group" }, unref(nativeAttrs)(_ctx.$attrs), {
-				"data-action-position": unref(reflectedProp)("actionPosition", "action-position", checkedProps.value.actionPosition, void 0, false),
-				"data-disabled": unref(reflectedProp)("disabled", "disabled", checkedProps.value.disabled, void 0, false),
-				"data-multiline": unref(reflectedProp)("multiline", "multiline", checkedProps.value.multiline, void 0, false),
-				"data-prefix-kind": unref(reflectedProp)("prefixKind", "prefix-kind", checkedProps.value.prefixKind, void 0, false),
-				"data-variant": unref(reflectedProp)("variant", "variant", checkedProps.value.variant, void 0, false),
+				"data-hn": "",
+				"data-hn-ui-input-group": "",
+				"data-ui-input-group-prop-action-position": unref(reflectedProp)("actionPosition", "action-position", checkedProps.value.actionPosition, void 0, false),
+				"data-ui-input-group-prop-disabled": unref(reflectedProp)("disabled", "disabled", checkedProps.value.disabled, void 0, false),
+				"data-ui-input-group-prop-multiline": unref(reflectedProp)("multiline", "multiline", checkedProps.value.multiline, void 0, false),
+				"data-ui-input-group-prop-prefix-kind": unref(reflectedProp)("prefixKind", "prefix-kind", checkedProps.value.prefixKind, void 0, false),
+				"data-ui-input-group-prop-variant": unref(reflectedProp)("variant", "variant", checkedProps.value.variant, void 0, false),
 				"data-ui-input-group-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
@@ -193,6 +207,6 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-8b90cc23"]]);
+}), [["__scopeId", "data-v-b4376c4a"]]);
 //#endregion
 export { UiInputGroup_default as t };