@threadlabs/looma 0.19.1 → 0.21.0

package/vue/chunks/UiNavItem.js

@@ -1,17 +1,31 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, renderSlot } from "vue";
+import { n as preserveRootFocus } from "./host.js";
+import { t as checkedProp } from "./props.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, useTemplateRef, watchSyncEffect } from "vue";
 //#region .build/vue/UiNavItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"href",
 	"target",
 	"rel",
-	"aria-current"
+	"aria-current",
+	"data-as",
+	"data-current",
+	"data-href",
+	"data-rel",
+	"data-target"
 ];
 var _hoisted_2 = { class: "leading" };
 var _hoisted_3 = { class: "content" };
 var _hoisted_4 = { class: "label" };
 var _hoisted_5 = { class: "description" };
-var _hoisted_6 = ["aria-current"];
+var _hoisted_6 = [
+	"aria-current",
+	"data-as",
+	"data-current",
+	"data-href",
+	"data-rel",
+	"data-target"
+];
 var _hoisted_7 = { class: "leading" };
 var _hoisted_8 = { class: "content" };
 var _hoisted_9 = { class: "label" };
@@ -22,16 +36,84 @@ var UiNavItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 	inheritAttrs: false,
 	__name: "UiNavItem",
 	props: {
-		as: { default: "button" },
+		as: {
+			type: null,
+			default: "button"
+		},
 		current: {
-			type: [Boolean, String],
-			default: false
+			type: null,
+			default: "false"
+		},
+		href: {
+			type: null,
+			default: null
 		},
-		href: {},
-		rel: {},
-		target: {}
+		rel: {
+			type: null,
+			default: null
+		},
+		target: {
+			type: null,
+			default: null
+		}
 	},
 	setup(__props) {
+		const props = __props;
+		const checkedProps = computed(() => ({
+			as: checkedProp(props["as"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "as", void 0, ["button", "a"]),
+			current: checkedProp(props["current"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "current", void 0, [
+				"true",
+				"false",
+				"page",
+				"step",
+				"location"
+			]),
+			href: checkedProp(props["href"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "href", void 0, void 0),
+			rel: checkedProp(props["rel"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "rel", void 0, void 0),
+			target: checkedProp(props["target"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "target", void 0, void 0)
+		}));
+		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 root = useTemplateRef("@html-next/root");
+		preserveRootFocus(root);
+		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-nav-item> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-nav-item> has an incompatible root."
+			})
+		});
 		function text(value) {
 			if (Array.isArray(value)) return value.map(text).join(" ");
 			return value === null || value === void 0 || typeof value === "object" ? "" : String(value);
@@ -41,32 +123,38 @@ var UiNavItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			return value === true ? "" : text(value);
 		}
 		return (_ctx, _cache) => {
-			return __props.as === "a" ? (openBlock(), createElementBlock("a", mergeProps({
+			return checkedProps.value.as === "a" ? (openBlock(), createElementBlock("a", mergeProps({
 				key: 0,
 				"data-component": "ui-nav-item"
-			}, _ctx.$attrs, {
-				href: __props.href,
-				target: __props.target,
-				rel: __props.rel,
+			}, nativeAttrs(_ctx.$attrs), {
+				href: checkedProps.value.href ?? void 0,
+				target: checkedProps.value.target ?? void 0,
+				rel: checkedProps.value.rel ?? void 0,
 				"aria-current": typeof {
 					true: "page",
 					false: null,
 					page: "page",
 					step: "step",
 					location: "location"
-				}[`${__props.current}`] === "boolean" ? String({
+				}[`${checkedProps.value.current ?? ""}`] === "boolean" ? String({
 					true: "page",
 					false: null,
 					page: "page",
 					step: "step",
 					location: "location"
-				}[`${__props.current}`]) : attribute({
+				}[`${checkedProps.value.current ?? ""}`]) : attribute({
 					true: "page",
 					false: null,
 					page: "page",
 					step: "step",
 					location: "location"
-				}[`${__props.current}`])
+				}[`${checkedProps.value.current ?? ""}`]),
+				"data-as": reflectedProp("as", "as", checkedProps.value.as, void 0, false),
+				"data-current": reflectedProp("current", "current", checkedProps.value.current, void 0, false),
+				"data-href": reflectedProp("href", "href", checkedProps.value.href, void 0, false),
+				"data-rel": reflectedProp("rel", "rel", checkedProps.value.rel, void 0, false),
+				"data-target": reflectedProp("target", "target", checkedProps.value.target, void 0, false),
+				ref: "@html-next/root"
 			}), [
 				_cache[0] || (_cache[0] = createElementVNode("span", {
 					class: "indicator",
@@ -78,25 +166,33 @@ var UiNavItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 				key: 1,
 				"data-component": "ui-nav-item",
 				type: "button"
-			}, _ctx.$attrs, { "aria-current": typeof {
-				true: "page",
-				false: null,
-				page: "page",
-				step: "step",
-				location: "location"
-			}[`${__props.current}`] === "boolean" ? String({
-				true: "page",
-				false: null,
-				page: "page",
-				step: "step",
-				location: "location"
-			}[`${__props.current}`]) : attribute({
-				true: "page",
-				false: null,
-				page: "page",
-				step: "step",
-				location: "location"
-			}[`${__props.current}`]) }), [
+			}, nativeAttrs(_ctx.$attrs), {
+				"aria-current": typeof {
+					true: "page",
+					false: null,
+					page: "page",
+					step: "step",
+					location: "location"
+				}[`${checkedProps.value.current ?? ""}`] === "boolean" ? String({
+					true: "page",
+					false: null,
+					page: "page",
+					step: "step",
+					location: "location"
+				}[`${checkedProps.value.current ?? ""}`]) : attribute({
+					true: "page",
+					false: null,
+					page: "page",
+					step: "step",
+					location: "location"
+				}[`${checkedProps.value.current ?? ""}`]),
+				"data-as": reflectedProp("as", "as", checkedProps.value.as, void 0, false),
+				"data-current": reflectedProp("current", "current", checkedProps.value.current, void 0, false),
+				"data-href": reflectedProp("href", "href", checkedProps.value.href, void 0, false),
+				"data-rel": reflectedProp("rel", "rel", checkedProps.value.rel, void 0, false),
+				"data-target": reflectedProp("target", "target", checkedProps.value.target, void 0, false),
+				ref: "@html-next/root"
+			}), [
 				_cache[1] || (_cache[1] = createElementVNode("span", {
 					class: "indicator",
 					"aria-hidden": "true"
@@ -106,6 +202,6 @@ var UiNavItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			], 16, _hoisted_6));
 		};
 	}
-}), [["__scopeId", "data-v-7c04111b"]]);
+}), [["__scopeId", "data-v-d77d3aef"]]);
 //#endregion
 export { UiNavItem_default as t };

package/vue/chunks/UiPageHeader.js

@@ -1,7 +1,8 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, renderSlot } from "vue";
+import { t as checkedProp } from "./props.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, watchSyncEffect } from "vue";
 //#region .build/vue/UiPageHeader.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["data-ui-page-header-state"];
+var _hoisted_1 = ["data-align", "data-ui-page-header-state"];
 var _hoisted_2 = { class: "leading" };
 var _hoisted_3 = { class: "copy" };
 var _hoisted_4 = { class: "eyebrow" };
@@ -13,13 +14,47 @@ var _hoisted_7 = { class: "actions" };
 var UiPageHeader_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "UiPageHeader",
-	props: { align: { default: "start" } },
+	props: { align: {
+		type: null,
+		default: "start"
+	} },
 	setup(__props) {
 		const props = __props;
+		const checkedProps = computed(() => ({ align: checkedProp(props["align"], {
+			kind: "terminal",
+			name: "keyword"
+		}, false, "align", void 0, ["start", "center"]) }));
+		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 hydrationNode = getCurrentInstance()?.vnode.el;
+		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "header")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-page-header> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-page-header> has an incompatible root."
+			})
+		});
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [props.align && `align align=${props.align}`].filter(Boolean).join(" "));
+		const hostState = computed(() => [checkedProps.value.align && "align", checkedProps.value.align != null && `align=${encodeURIComponent(checkedProps.value.align)}`].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("header", mergeProps({ "data-component": "ui-page-header" }, _ctx.$attrs, { "data-ui-page-header-state": hostState.value || void 0 }), [
+			return openBlock(), createElementBlock("header", mergeProps({ "data-component": "ui-page-header" }, nativeAttrs(_ctx.$attrs), {
+				"data-align": reflectedProp("align", "align", checkedProps.value.align, void 0, false),
+				"data-ui-page-header-state": hostState.value || void 0
+			}), [
 				createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "leading", {}, void 0, true)]),
 				createElementVNode("span", _hoisted_3, [
 					createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "eyebrow", {}, void 0, true)]),
@@ -30,6 +65,6 @@ var UiPageHeader_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-db66b0a4"]]);
+}), [["__scopeId", "data-v-63c59f67"]]);
 //#endregion
 export { UiPageHeader_default as t };

package/vue/chunks/UiPopover.js

@@ -1,9 +1,14 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { n as useComponentHost, t as createDispatch } from "./host.js";
-import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, ref, renderSlot } from "vue";
-import * as controllerModule from "@threadlabs/looma/components/ui-popover/ui-popover.js";
+import { r as useComponentHost, t as createDispatch } from "./host.js";
+import { t as checkedProp } from "./props.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderSlot, watchSyncEffect } from "vue";
 //#region .build/vue/UiPopover.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["data-ui-popover-state"];
+var _hoisted_1 = [
+	"data-for",
+	"data-open",
+	"data-placement",
+	"data-ui-popover-state"
+];
 var _hoisted_2 = { class: "surface" };
 //#endregion
 //#region .build/vue/UiPopover.vue
@@ -11,12 +16,18 @@ var UiPopover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 	inheritAttrs: false,
 	__name: "UiPopover",
 	props: {
-		for: { default: "" },
+		for: {
+			type: null,
+			default: ""
+		},
 		open: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
-		placement: { default: "bottom-start" }
+		placement: {
+			type: null,
+			default: "bottom-start"
+		}
 	},
 	emits: [
 		"update:open",
@@ -25,9 +36,61 @@ var UiPopover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const checkedProps = computed(() => ({
+			for: checkedProp(props["for"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "for", void 0, void 0),
+			open: checkedProp(props["open"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "open", void 0, void 0),
+			placement: checkedProp(props["placement"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "placement", void 0, [
+				"top",
+				"top-start",
+				"top-end",
+				"bottom",
+				"bottom-start",
+				"bottom-end",
+				"left",
+				"left-start",
+				"left-end",
+				"right",
+				"right-start",
+				"right-end"
+			])
+		}));
+		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 internalOpen = ref(false);
+		const hydrationNode = hydrationInstance?.vnode.el;
+		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "span")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-popover> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-popover> has an incompatible root."
+			})
+		});
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [internalOpen.value && "internalOpen"].filter(Boolean).join(" "));
 		const isOpenDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["open"] === "boolean" && (detail["reason"] === "action" || detail["reason"] === "programmatic" || detail["reason"] === "light-dismiss" || detail["reason"] === "escape") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
@@ -42,20 +105,27 @@ var UiPopover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			},
 			modeled: ["open"]
 		});
-		useComponentHost(controllerModule.default, {
+		useComponentHost(() => import("@threadlabs/looma/components/ui-popover/ui-popover.js"), {
 			root,
 			dispatch,
-			props,
+			controllerSource: {
+				specifier: "../components/ui-popover/ui-popover.js",
+				definition: "./components/ui-popover/ui-popover.html"
+			},
+			props: checkedProps,
 			state: { internalOpen }
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("span", mergeProps({ "data-component": "ui-popover" }, _ctx.$attrs, {
+			return openBlock(), createElementBlock("span", mergeProps({ "data-component": "ui-popover" }, nativeAttrs(_ctx.$attrs), {
+				"data-for": reflectedProp("for", "for", checkedProps.value.for, void 0, false),
+				"data-open": reflectedProp("open", "open", checkedProps.value.open, void 0, false),
+				"data-placement": reflectedProp("placement", "placement", checkedProps.value.placement, void 0, false),
 				"data-ui-popover-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
 			}), [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-fd69c5a5"]]);
+}), [["__scopeId", "data-v-8f2ec7df"]]);
 //#endregion
 export { UiPopover_default as t };

package/vue/chunks/UiRadio.js

@@ -1,14 +1,22 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { n as useComponentHost, t as createDispatch } from "./host.js";
-import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, useTemplateRef } from "vue";
-import * as controllerModule from "@threadlabs/looma/components/ui-radio/ui-radio.js";
+import { r as useComponentHost, t as createDispatch } from "./host.js";
+import { t as checkedProp } from "./props.js";
+import { r as vBindControl } from "./control.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderSlot, unref, useTemplateRef, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiRadio.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["data-ui-radio-state"];
+var _hoisted_1 = [
+	"data-checked",
+	"data-disabled",
+	"data-name",
+	"data-required",
+	"data-size",
+	"data-value",
+	"data-ui-radio-state"
+];
 var _hoisted_2 = [
-	".checked",
 	"disabled",
 	"required",
-	"value",
+	"^value",
 	"name"
 ];
 var _hoisted_3 = { class: "text" };
@@ -25,20 +33,29 @@ var UiRadio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 	__name: "UiRadio",
 	props: {
 		checked: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
 		disabled: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
-		name: { default: "" },
+		name: {
+			type: null,
+			default: ""
+		},
 		required: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
-		size: { default: "md" },
-		value: { default: "on" }
+		size: {
+			type: null,
+			default: "md"
+		},
+		value: {
+			type: null,
+			default: "on"
+		}
 	},
 	emits: [
 		"update:checked",
@@ -47,13 +64,72 @@ var UiRadio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const checkedProps = computed(() => ({
+			checked: checkedProp(props["checked"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "checked", void 0, void 0),
+			disabled: checkedProp(props["disabled"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "disabled", void 0, void 0),
+			name: checkedProp(props["name"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "name", void 0, void 0),
+			required: checkedProp(props["required"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "required", void 0, void 0),
+			size: checkedProp(props["size"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "size", void 0, [
+				"sm",
+				"md",
+				"lg"
+			]),
+			value: checkedProp(props["value"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "value", void 0, void 0)
+		}));
+		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 inputElement = useTemplateRef("input");
 		const descriptionElement = useTemplateRef("description");
 		const internalChecked = ref(false);
+		const hydrationNode = hydrationInstance?.vnode.el;
+		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "label")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-radio> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-radio> has an incompatible root."
+			})
+		});
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [props.disabled && "disabled", props.size && `size size=${props.size}`].filter(Boolean).join(" "));
+		const hostState = computed(() => [
+			checkedProps.value.disabled && "disabled",
+			checkedProps.value.size && "size",
+			checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`
+		].filter(Boolean).join(" "));
 		const isChangeDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["checked"] === "boolean" && typeof detail["value"] === "string" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
 			"checked",
 			"value",
@@ -63,10 +139,14 @@ var UiRadio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			checks: { change: isChangeDetail },
 			modeled: ["checked", "value"]
 		});
-		useComponentHost(controllerModule.default, {
+		useComponentHost(() => import("@threadlabs/looma/components/ui-radio/ui-radio.js"), {
 			root,
 			dispatch,
-			props,
+			controllerSource: {
+				specifier: "../components/ui-radio/ui-radio.js",
+				definition: "./components/ui-radio/ui-radio.html"
+			},
+			props: checkedProps,
 			refs: {
 				input: inputElement,
 				description: descriptionElement
@@ -74,21 +154,32 @@ var UiRadio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			state: { internalChecked }
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("label", mergeProps({ "data-component": "ui-radio" }, _ctx.$attrs, {
+			return openBlock(), createElementBlock("label", mergeProps({ "data-component": "ui-radio" }, nativeAttrs(_ctx.$attrs), {
+				"data-checked": reflectedProp("checked", "checked", checkedProps.value.checked, void 0, false),
+				"data-disabled": reflectedProp("disabled", "disabled", checkedProps.value.disabled, void 0, false),
+				"data-name": reflectedProp("name", "name", checkedProps.value.name, void 0, false),
+				"data-required": reflectedProp("required", "required", checkedProps.value.required, void 0, false),
+				"data-size": reflectedProp("size", "size", checkedProps.value.size, void 0, false),
+				"data-value": reflectedProp("value", "value", checkedProps.value.value, void 0, false),
 				"data-ui-radio-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
-			}), [createElementVNode("input", {
+			}), [withDirectives(createElementVNode("input", {
 				type: "radio",
-				".checked": internalChecked.value,
-				disabled: __props.disabled,
-				required: __props.required,
-				value: __props.value,
-				name: __props.name,
+				disabled: checkedProps.value.disabled ?? void 0,
+				required: checkedProps.value.required ?? void 0,
+				"^value": checkedProps.value.value ?? void 0,
+				name: checkedProps.value.name ?? void 0,
 				ref: "input"
-			}, null, 40, _hoisted_2), createElementVNode("span", _hoisted_3, [createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]), createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "description", {}, void 0, true)], 512)])], 16, _hoisted_1);
+			}, null, 8, _hoisted_2), [[unref(vBindControl), {
+				tag: "input",
+				name: "checked",
+				value: internalChecked.value,
+				nativeProperty: true,
+				defaultChecked: false
+			}]]), createElementVNode("span", _hoisted_3, [createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]), createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "description", {}, void 0, true)], 512)])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-4e6e9ccd"]]);
+}), [["__scopeId", "data-v-b2abeed2"]]);
 //#endregion
 export { UiRadio_default as t };