@threadlabs/looma 0.23.21 → 0.23.23

package/vue/chunks/UiButton.js

@@ -1,8 +1,9 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { n as preserveRootFocus, r as useComponentHost, t as createDispatch } from "./host.js";
 import { i as vPropValidity, n as propValidityState, t as checkedProp } from "./props.js";
+import { t as UiIcon_default } from "./UiIcon.js";
 import { t as UiSpinner_default } from "./UiSpinner.js";
-import { computed, createCommentVNode, createElementBlock, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, unref, useTemplateRef, watchSyncEffect, withDirectives } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, unref, useTemplateRef, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiButton.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"href",
@@ -27,11 +28,61 @@ var _hoisted_1 = [
 	"data-variant",
 	"data-ui-button-state"
 ];
-var _hoisted_2 = {
+var _hoisted_2 = { class: "card-icon" };
+var _hoisted_3 = { class: "card-content" };
+var _hoisted_4 = { class: "card-action" };
+var _hoisted_5 = [
+	"type",
+	"disabled",
+	"aria-disabled",
+	"aria-busy",
+	"data-align",
+	"data-as",
+	"data-disabled",
+	"data-href",
+	"data-loading",
+	"data-pending",
+	"data-rel",
+	"data-shape",
+	"data-size",
+	"data-stretch",
+	"data-target",
+	"data-tone",
+	"data-type",
+	"data-variant",
+	"data-ui-button-state"
+];
+var _hoisted_6 = { class: "card-icon" };
+var _hoisted_7 = { class: "card-content" };
+var _hoisted_8 = { class: "card-action" };
+var _hoisted_9 = [
+	"href",
+	"target",
+	"rel",
+	"aria-disabled",
+	"aria-busy",
+	"tabindex",
+	"data-align",
+	"data-as",
+	"data-disabled",
+	"data-href",
+	"data-loading",
+	"data-pending",
+	"data-rel",
+	"data-shape",
+	"data-size",
+	"data-stretch",
+	"data-target",
+	"data-tone",
+	"data-type",
+	"data-variant",
+	"data-ui-button-state"
+];
+var _hoisted_10 = {
 	key: 0,
 	class: "spinner-wrap"
 };
-var _hoisted_3 = [
+var _hoisted_11 = [
 	"type",
 	"disabled",
 	"aria-disabled",
@@ -52,7 +103,7 @@ var _hoisted_3 = [
 	"data-variant",
 	"data-ui-button-state"
 ];
-var _hoisted_4 = {
+var _hoisted_12 = {
 	key: 0,
 	class: "spinner-wrap"
 };
@@ -277,13 +328,14 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				},
 				required: false,
 				target: { attribute: "variant" },
-				description: "Emphasis: how loudly the button asks. solid fills with its tone, outline draws its tone at the edge over a wash of it, ghost carries only text until it is\n      hovered, and link is an inline text action that reads as a link. danger is solid in the danger tone, kept for the call sites that name it.",
+				description: "Emphasis: how loudly the button asks. solid fills with its tone, outline draws its tone at the edge over a wash of it, ghost carries only text until it is\n      hovered, and link is an inline text action that reads as a link. danger is solid in the danger tone, kept for the call sites that name it. card uses the\n      same tone on a full-width action with an icon slot, wrapping content, and a centered action slot.",
 				values: [
 					"outline",
 					"solid",
 					"danger",
 					"ghost",
-					"link"
+					"link",
+					"card"
 				],
 				default: "outline"
 			}
@@ -438,8 +490,64 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				false: null
 			}, concat(checkedProps.value.loading || checkedProps.value.pending)));
 		});
+		let guardedBinding4Previous = null;
+		const guardedBinding4 = computed(() => {
+			if (((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
+				true: null,
+				false: checkedProps.value.href
+			}, concat(checkedProps.value.disabled || checkedProps.value.loading || checkedProps.value.pending)) === Symbol.for("html-next.invalid-result")) return guardedBinding4Previous;
+			return guardedBinding4Previous = attribute(((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
+				true: null,
+				false: checkedProps.value.href
+			}, concat(checkedProps.value.disabled || checkedProps.value.loading || checkedProps.value.pending)));
+		});
+		let guardedBinding5Previous = null;
+		const guardedBinding5 = computed(() => {
+			if (((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
+				true: "true",
+				false: null
+			}, concat(checkedProps.value.disabled || checkedProps.value.loading || checkedProps.value.pending)) === Symbol.for("html-next.invalid-result")) return guardedBinding5Previous;
+			return guardedBinding5Previous = typeof ((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
+				true: "true",
+				false: null
+			}, concat(checkedProps.value.disabled || checkedProps.value.loading || checkedProps.value.pending)) === "boolean" ? String(((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
+				true: "true",
+				false: null
+			}, concat(checkedProps.value.disabled || checkedProps.value.loading || checkedProps.value.pending))) : attribute(((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
+				true: "true",
+				false: null
+			}, concat(checkedProps.value.disabled || checkedProps.value.loading || checkedProps.value.pending)));
+		});
+		let guardedBinding6Previous = null;
+		const guardedBinding6 = computed(() => {
+			if (((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
+				true: "0",
+				false: null
+			}, concat((checkedProps.value.loading || checkedProps.value.pending) && !checkedProps.value.disabled)) === Symbol.for("html-next.invalid-result")) return guardedBinding6Previous;
+			return guardedBinding6Previous = attribute(((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
+				true: "0",
+				false: null
+			}, concat((checkedProps.value.loading || checkedProps.value.pending) && !checkedProps.value.disabled)));
+		});
+		let guardedBinding7Previous = null;
+		const guardedBinding7 = computed(() => {
+			if (((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
+				true: "true",
+				false: null
+			}, concat(checkedProps.value.loading || checkedProps.value.pending)) === Symbol.for("html-next.invalid-result")) return guardedBinding7Previous;
+			return guardedBinding7Previous = typeof ((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
+				true: "true",
+				false: null
+			}, concat(checkedProps.value.loading || checkedProps.value.pending)) === "boolean" ? String(((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
+				true: "true",
+				false: null
+			}, concat(checkedProps.value.loading || checkedProps.value.pending))) : attribute(((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
+				true: "true",
+				false: null
+			}, concat(checkedProps.value.loading || checkedProps.value.pending)));
+		});
 		const hydrationNode = hydrationInstance?.vnode.el;
-		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== (checkedProps.value.as === "a" ? "a" : "button"))) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-button> has an incompatible root."), {
+		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== (checkedProps.value.variant === "card" && checkedProps.value.as === "a" ? "a" : checkedProps.value.variant === "card" ? "button" : checkedProps.value.as === "a" ? "a" : "button"))) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-button> has an incompatible root."), {
 			name: "HtmlDiagnosticError",
 			diagnostic: Object.freeze({
 				code: "HR005",
@@ -512,7 +620,7 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			return values.map((value) => value === null ? "" : String(value)).join("");
 		}
 		return (_ctx, _cache) => {
-			return checkedProps.value.as === "a" ? withDirectives((openBlock(), createElementBlock("a", mergeProps({
+			return checkedProps.value.variant === "card" && checkedProps.value.as === "a" ? withDirectives((openBlock(), createElementBlock("a", mergeProps({
 				key: 0,
 				"data-component": "ui-button"
 			}, nativeAttrs(_ctx.$attrs), {
@@ -538,10 +646,20 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				"data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
 				"data-ui-button-state": hostState.value || void 0,
 				ref: "@html-next/root"
-			}), [checkedProps.value.loading || checkedProps.value.pending ? (openBlock(), createElementBlock("span", _hoisted_2, [createVNode(UiSpinner_default, { size: "sm" })])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)), [[unref(vPropValidity), {
+			}), [
+				createElementVNode("span", _hoisted_2, [checkedProps.value.loading || checkedProps.value.pending ? (openBlock(), createBlock(UiSpinner_default, {
+					key: 0,
+					size: "sm"
+				})) : createCommentVNode("v-if", true), !(checkedProps.value.loading || checkedProps.value.pending) ? renderSlot(_ctx.$slots, "icon", {}, void 0, true, 1) : createCommentVNode("v-if", true)]),
+				createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+				createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "action", {}, () => [createVNode(UiIcon_default, {
+					name: "chevron-right",
+					"aria-hidden": "true"
+				})], true)])
+			], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
-			}]]) : withDirectives((openBlock(), createElementBlock("button", mergeProps({
+			}]]) : checkedProps.value.variant === "card" ? withDirectives((openBlock(), createElementBlock("button", mergeProps({
 				key: 1,
 				"data-component": "ui-button"
 			}, nativeAttrs(_ctx.$attrs), {
@@ -565,12 +683,78 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				"data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
 				"data-ui-button-state": hostState.value || void 0,
 				ref: "@html-next/root"
-			}), [checkedProps.value.loading || checkedProps.value.pending ? (openBlock(), createElementBlock("span", _hoisted_4, [createVNode(UiSpinner_default, { size: "sm" })])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_3)), [[unref(vPropValidity), {
+			}), [
+				createElementVNode("span", _hoisted_6, [checkedProps.value.loading || checkedProps.value.pending ? (openBlock(), createBlock(UiSpinner_default, {
+					key: 0,
+					size: "sm"
+				})) : createCommentVNode("v-if", true), !(checkedProps.value.loading || checkedProps.value.pending) ? renderSlot(_ctx.$slots, "icon", {}, void 0, true, 1) : createCommentVNode("v-if", true)]),
+				createElementVNode("span", _hoisted_7, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+				createElementVNode("span", _hoisted_8, [renderSlot(_ctx.$slots, "action", {}, () => [createVNode(UiIcon_default, {
+					name: "chevron-right",
+					"aria-hidden": "true"
+				})], true)])
+			], 16, _hoisted_5)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...props }
+			}]]) : checkedProps.value.as === "a" ? withDirectives((openBlock(), createElementBlock("a", mergeProps({
+				key: 2,
+				"data-component": "ui-button"
+			}, nativeAttrs(_ctx.$attrs), {
+				href: guardedBinding4.value,
+				target: checkedProps.value.target ?? void 0,
+				rel: checkedProps.value.rel ?? void 0,
+				"aria-disabled": guardedBinding5.value,
+				"aria-busy": checkedProps.value.loading || checkedProps.value.pending,
+				tabindex: guardedBinding6.value,
+				"data-align": reflectedProp("align", "align", checkedProps.value.align, void 0, false),
+				"data-as": reflectedProp("as", "as", checkedProps.value.as, void 0, false),
+				"data-disabled": reflectedProp("disabled", "disabled", checkedProps.value.disabled, void 0, false),
+				"data-href": reflectedProp("href", "href", checkedProps.value.href, void 0, false),
+				"data-loading": reflectedProp("loading", "loading", checkedProps.value.loading, void 0, false),
+				"data-pending": reflectedProp("pending", "pending", checkedProps.value.pending, void 0, false),
+				"data-rel": reflectedProp("rel", "rel", checkedProps.value.rel, void 0, false),
+				"data-shape": reflectedProp("shape", "shape", checkedProps.value.shape, void 0, false),
+				"data-size": reflectedProp("size", "size", checkedProps.value.size, void 0, false),
+				"data-stretch": reflectedProp("stretch", "stretch", checkedProps.value.stretch, void 0, false),
+				"data-target": reflectedProp("target", "target", checkedProps.value.target, void 0, false),
+				"data-tone": reflectedProp("tone", "tone", checkedProps.value.tone, void 0, false),
+				"data-type": reflectedProp("type", "type", checkedProps.value.type, void 0, false),
+				"data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
+				"data-ui-button-state": hostState.value || void 0,
+				ref: "@html-next/root"
+			}), [checkedProps.value.loading || checkedProps.value.pending ? (openBlock(), createElementBlock("span", _hoisted_10, [createVNode(UiSpinner_default, { size: "sm" })])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_9)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...props }
+			}]]) : withDirectives((openBlock(), createElementBlock("button", mergeProps({
+				key: 3,
+				"data-component": "ui-button"
+			}, nativeAttrs(_ctx.$attrs), {
+				type: checkedProps.value.type ?? void 0,
+				disabled: checkedProps.value.disabled ?? void 0,
+				"aria-disabled": guardedBinding7.value,
+				"aria-busy": checkedProps.value.loading || checkedProps.value.pending,
+				"data-align": reflectedProp("align", "align", checkedProps.value.align, void 0, false),
+				"data-as": reflectedProp("as", "as", checkedProps.value.as, void 0, false),
+				"data-disabled": reflectedProp("disabled", "disabled", checkedProps.value.disabled, void 0, false),
+				"data-href": reflectedProp("href", "href", checkedProps.value.href, void 0, false),
+				"data-loading": reflectedProp("loading", "loading", checkedProps.value.loading, void 0, false),
+				"data-pending": reflectedProp("pending", "pending", checkedProps.value.pending, void 0, false),
+				"data-rel": reflectedProp("rel", "rel", checkedProps.value.rel, void 0, false),
+				"data-shape": reflectedProp("shape", "shape", checkedProps.value.shape, void 0, false),
+				"data-size": reflectedProp("size", "size", checkedProps.value.size, void 0, false),
+				"data-stretch": reflectedProp("stretch", "stretch", checkedProps.value.stretch, void 0, false),
+				"data-target": reflectedProp("target", "target", checkedProps.value.target, void 0, false),
+				"data-tone": reflectedProp("tone", "tone", checkedProps.value.tone, void 0, false),
+				"data-type": reflectedProp("type", "type", checkedProps.value.type, void 0, false),
+				"data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
+				"data-ui-button-state": hostState.value || void 0,
+				ref: "@html-next/root"
+			}), [checkedProps.value.loading || checkedProps.value.pending ? (openBlock(), createElementBlock("span", _hoisted_12, [createVNode(UiSpinner_default, { size: "sm" })])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_11)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-07b59e63"]]);
+}), [["__scopeId", "data-v-e0bdc48b"]]);
 //#endregion
 export { UiButton_default as t };

package/vue/chunks/UiImage.js

@@ -0,0 +1,313 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { r as useComponentHost, t as createDispatch } from "./host.js";
+import { i as vPropValidity, n as propValidityState, t as checkedProp } from "./props.js";
+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-state"
+];
+var _hoisted_2 = {
+	class: "frame",
+	ref: "frame"
+};
+var _hoisted_3 = [
+	"src",
+	"alt",
+	"width",
+	"height"
+];
+var _hoisted_4 = ["hidden"];
+//#endregion
+//#region .build/vue/UiImage.vue
+var UiImage_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiImage",
+	props: {
+		alt: {
+			type: null,
+			default: ""
+		},
+		height: {
+			type: null,
+			default: null
+		},
+		placement: {
+			type: null,
+			default: "block"
+		},
+		resizable: {
+			type: null,
+			default: false
+		},
+		selected: {
+			type: null,
+			default: false
+		},
+		src: {
+			type: null,
+			default: ""
+		},
+		width: {
+			type: null,
+			default: null
+		}
+	},
+	emits: [
+		"update:height",
+		"update:width",
+		"resize"
+	],
+	setup(__props, { emit: __emit }) {
+		const propValidityContract = { props: {
+			alt: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "alt" },
+				description: "A text alternative for the image.",
+				default: ""
+			},
+			height: {
+				type: {
+					kind: "terminal",
+					name: "integer"
+				},
+				required: false,
+				target: { attribute: "height" },
+				description: "Image height in CSS pixels; resizing preserves the intrinsic aspect ratio."
+			},
+			placement: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "placement" },
+				description: "Block keeps text below; center centers the image; wrap-left and wrap-right let following text flow beside it.",
+				values: [
+					"block",
+					"center",
+					"wrap-left",
+					"wrap-right"
+				],
+				default: "block"
+			},
+			resizable: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "resizable" },
+				description: "Shows four corner handles while selected. Drag to resize, or focus a handle and use arrow keys; Shift uses a larger increment.",
+				default: false
+			},
+			selected: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "selected" },
+				description: "Outlines the media as the current selection.",
+				default: false
+			},
+			src: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "src" },
+				description: "The image source, used by the default media.",
+				default: ""
+			},
+			width: {
+				type: {
+					kind: "terminal",
+					name: "integer"
+				},
+				required: false,
+				target: { attribute: "width" },
+				description: "Image width in CSS pixels; omitted uses intrinsic size in block/center placement or responsive sizing when wrapping."
+			}
+		} };
+		const props = __props;
+		const acceptedProps = {
+			alt: "",
+			height: null,
+			placement: "block",
+			resizable: false,
+			selected: false,
+			src: "",
+			width: null
+		};
+		const checkedProps = computed(() => ({
+			alt: checkedProp(props["alt"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "alt", acceptedProps),
+			height: checkedProp(props["height"], {
+				kind: "terminal",
+				name: "integer"
+			}, false, "height", acceptedProps),
+			placement: checkedProp(props["placement"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "placement", acceptedProps),
+			resizable: checkedProp(props["resizable"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "resizable", acceptedProps),
+			selected: checkedProp(props["selected"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "selected", acceptedProps),
+			src: checkedProp(props["src"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "src", acceptedProps),
+			width: checkedProp(props["width"], {
+				kind: "terminal",
+				name: "integer"
+			}, false, "width", acceptedProps)
+		}));
+		checkedProps.value;
+		watchSyncEffect(() => {
+			checkedProps.value;
+		});
+		function nativeAttrs(attrs) {
+			const names = Object.keys(attrs);
+			if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs;
+			return Object.fromEntries(names.map((name) => [Object.hasOwn(Object.prototype, name) ? name === "__proto__" ? "__Proto__" : name[0].toUpperCase() + name.slice(1) : name, attrs[name]]));
+		}
+		const componentInstance = getCurrentInstance();
+		function reflectedProp(name, kebab, value, fallback, bound, separator) {
+			const incoming = componentInstance?.vnode.props;
+			if (!bound && (incoming === null || incoming === void 0 || !Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab))) return fallback;
+			if (value === null || value === void 0) return void 0;
+			return Array.isArray(value) && separator !== void 0 ? value.join(separator) : typeof value === "object" ? JSON.stringify(value) : String(value);
+		}
+		const hydrationInstance = getCurrentInstance();
+		const emit = __emit;
+		const root = ref(null);
+		const frameElement = useTemplateRef("frame");
+		const hydrationNode = hydrationInstance?.vnode.el;
+		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "figure")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-image> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-image> has an incompatible root."
+			})
+		});
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [
+			checkedProps.value.placement && "placement",
+			checkedProps.value.placement != null && `placement=${encodeURIComponent(checkedProps.value.placement)}`,
+			checkedProps.value.selected && "selected"
+		].filter(Boolean).join(" "));
+		const isResizeDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && Number.isInteger(detail["width"]) && Number.isInteger(detail["height"]) && (detail["phase"] === "preview" || detail["phase"] === "commit" || detail["phase"] === "cancel") && (detail["trigger"] === "pointer" || detail["trigger"] === "keyboard") && Object.keys(detail).every((key) => [
+			"width",
+			"height",
+			"phase",
+			"trigger"
+		].includes(key));
+		const dispatch = createDispatch(root, emit, {
+			checks: { resize: isResizeDetail },
+			modeled: ["height", "width"]
+		});
+		useComponentHost(() => import("@threadlabs/looma/components/ui-image/ui-image.js"), {
+			root,
+			dispatch,
+			controllerSource: {
+				specifier: "../components/ui-image/ui-image.js",
+				definition: "./components/ui-image/ui-image.html"
+			},
+			props: checkedProps,
+			propInputs: (name) => {
+				const incoming = hydrationInstance?.vnode.props;
+				const kebab = name.replace(/[A-Z]/g, (letter) => "-" + letter.toLowerCase());
+				return incoming !== null && incoming !== void 0 ? incoming[name] ?? incoming[kebab] ?? null : null;
+			},
+			propNames: [
+				"alt",
+				"height",
+				"placement",
+				"resizable",
+				"selected",
+				"src",
+				"width"
+			],
+			propValidity: (name) => propValidityState({
+				contract: propValidityContract,
+				values: { ...props }
+			}, name),
+			refs: { frame: frameElement }
+		});
+		return (_ctx, _cache) => {
+			return withDirectives((openBlock(), createElementBlock("figure", mergeProps({ "data-component": "ui-image" }, nativeAttrs(_ctx.$attrs), {
+				"data-alt": reflectedProp("alt", "alt", checkedProps.value.alt, void 0, false),
+				"data-height": reflectedProp("height", "height", checkedProps.value.height, void 0, false),
+				"data-placement": reflectedProp("placement", "placement", checkedProps.value.placement, void 0, false),
+				"data-resizable": reflectedProp("resizable", "resizable", checkedProps.value.resizable, void 0, false),
+				"data-selected": reflectedProp("selected", "selected", checkedProps.value.selected, void 0, false),
+				"data-src": reflectedProp("src", "src", checkedProps.value.src, void 0, false),
+				"data-width": reflectedProp("width", "width", checkedProps.value.width, void 0, false),
+				"data-ui-image-state": hostState.value || void 0,
+				ref_key: "root",
+				ref: root
+			}), [createElementVNode("div", _hoisted_2, [
+				renderSlot(_ctx.$slots, "media", {}, () => [createElementVNode("img", {
+					src: checkedProps.value.src ?? void 0,
+					alt: checkedProps.value.alt ?? void 0,
+					width: checkedProps.value.width ?? void 0,
+					height: checkedProps.value.height ?? void 0
+				}, null, 8, _hoisted_3)]),
+				createElementVNode("div", {
+					class: "handles",
+					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"
+					}, null, -1),
+					createElementVNode("button", {
+						type: "button",
+						class: "handle",
+						"data-corner": "top-right",
+						"aria-label": "Resize image from top right"
+					}, null, -1),
+					createElementVNode("button", {
+						type: "button",
+						class: "handle",
+						"data-corner": "bottom-left",
+						"aria-label": "Resize image from bottom left"
+					}, null, -1),
+					createElementVNode("button", {
+						type: "button",
+						class: "handle",
+						"data-corner": "bottom-right",
+						"aria-label": "Resize image from bottom right"
+					}, null, -1)
+				])], 8, _hoisted_4),
+				renderSlot(_ctx.$slots, "controls")
+			], 512)], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...props }
+			}]]);
+		};
+	}
+}), [["__scopeId", "data-v-2895fbac"]]);
+//#endregion
+export { UiImage_default as t };