@threadlabs/looma 0.5.1 → 0.6.0-rc.1

package/vue/chunks/UiAffordanceScope.js

@@ -10,33 +10,26 @@ var UiAffordanceScope_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 	__name: "UiAffordanceScope",
 	props: { nearRadius: { default: 16 } },
 	setup(__props) {
-		const hn = { t: (v) => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false) };
 		const props = __props;
 		const root = ref(null);
-		const refs = {};
-		const state_engaged = ref(false);
+		const engaged = ref(false);
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [engaged.value && "engaged"].filter(Boolean).join(" "));
 		/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-		const dispatch = (name, detail) => {
+		function dispatch(name, detail) {
 			return root.value?.dispatchEvent(new CustomEvent(name, {
 				bubbles: true,
 				composed: true,
 				detail
 			})) ?? true;
-		};
-		/** The resolved values the styles' :host-state() rules test. */
-		const hostState = computed(() => ["engaged"].flatMap((name) => {
-			const value = read(name);
-			const tokens = hn.t(value) ? [name] : [];
-			if (typeof value === "string" || typeof value === "number") tokens.push(`${name}=${encodeURIComponent(String(value))}`);
-			return tokens;
-		}).join(" "));
+		}
 		function read(name) {
-			if (name === "engaged") return state_engaged.value;
+			if (name === "engaged") return engaged.value;
 			return props[name];
 		}
 		function write(name, value) {
 			if (name === "engaged") {
-				state_engaged.value = value;
+				engaged.value = value;
 				return true;
 			}
 			throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
@@ -50,7 +43,7 @@ var UiAffordanceScope_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 				get: (_target, name) => typeof name === "string" ? read(name) : void 0,
 				set: (_target, name, value) => typeof name === "string" && write(name, value)
 			}),
-			refs,
+			refs: {},
 			elements: new Proxy({}, { get: (_target, name) => {
 				if (typeof name !== "string" || root.value === null) return void 0;
 				return (root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form"))?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? void 0;
@@ -107,6 +100,6 @@ var UiAffordanceScope_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-650ceaf5"]]);
+}), [["__scopeId", "data-v-3d8ef4c3"]]);
 //#endregion
 export { UiAffordanceScope_default as t };

package/vue/chunks/UiAvatar.js

@@ -1,5 +1,5 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, shallowRef, toDisplayString, watchEffect } from "vue";
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, shallowRef, toDisplayString, useTemplateRef, watchEffect } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-avatar/ui-avatar.js";
 //#region .build/vue/UiAvatar.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["src", "hidden"];
@@ -16,43 +16,37 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		src: {}
 	},
 	setup(__props) {
-		const hn = {
-			t: (v) => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false),
-			text: (v) => v === void 0 || v === null ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? "" : String(v),
-			attr: (v) => v === void 0 || v === null || v === false ? void 0 : v === true ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? void 0 : String(v),
-			enumerated: (v) => typeof v === "boolean" ? String(v) : hn.attr(v)
-		};
 		const props = __props;
 		const root = ref(null);
-		const refs = {};
-		const state_hasImage = ref(false);
-		const state_hasAuthoredImage = ref(false);
-		const state_initials = ref("?");
+		const imageElement = useTemplateRef("image");
+		const hasImage = ref(false);
+		const hasAuthoredImage = ref(false);
+		const initials = ref("?");
 		/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-		const dispatch = (name, detail) => {
+		function dispatch(name, detail) {
 			return root.value?.dispatchEvent(new CustomEvent(name, {
 				bubbles: true,
 				composed: true,
 				detail
 			})) ?? true;
-		};
+		}
 		function read(name) {
-			if (name === "hasImage") return state_hasImage.value;
-			if (name === "hasAuthoredImage") return state_hasAuthoredImage.value;
-			if (name === "initials") return state_initials.value;
+			if (name === "hasImage") return hasImage.value;
+			if (name === "hasAuthoredImage") return hasAuthoredImage.value;
+			if (name === "initials") return initials.value;
 			return props[name];
 		}
 		function write(name, value) {
 			if (name === "hasImage") {
-				state_hasImage.value = value;
+				hasImage.value = value;
 				return true;
 			}
 			if (name === "hasAuthoredImage") {
-				state_hasAuthoredImage.value = value;
+				hasAuthoredImage.value = value;
 				return true;
 			}
 			if (name === "initials") {
-				state_initials.value = value;
+				initials.value = value;
 				return true;
 			}
 			throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
@@ -66,7 +60,9 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				get: (_target, name) => typeof name === "string" ? read(name) : void 0,
 				set: (_target, name, value) => typeof name === "string" && write(name, value)
 			}),
-			refs,
+			refs: { get image() {
+				return imageElement.value;
+			} },
 			elements: new Proxy({}, { get: (_target, name) => {
 				if (typeof name !== "string" || root.value === null) return void 0;
 				return (root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form"))?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? void 0;
@@ -125,20 +121,18 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 					class: "image",
 					alt: "",
 					"aria-hidden": "true",
-					src: hn.attr(props.src),
-					hidden: hn.attr(hn.t(state_hasAuthoredImage.value) || hn.t(!hn.t(state_hasImage.value))),
-					ref: (element) => {
-						refs["image"] = element;
-					}
+					src: __props.src,
+					hidden: hasAuthoredImage.value || !hasImage.value,
+					ref: "image"
 				}, null, 8, _hoisted_1),
 				createElementVNode("span", {
 					class: "fallback",
-					"aria-hidden": hn.enumerated(state_hasImage.value),
-					hidden: hn.attr(state_hasImage.value)
-				}, toDisplayString(hn.text(state_initials.value)), 9, _hoisted_2)
+					"aria-hidden": hasImage.value,
+					hidden: hasImage.value
+				}, toDisplayString(initials.value), 9, _hoisted_2)
 			], 16);
 		};
 	}
-}), [["__scopeId", "data-v-110795c3"]]);
+}), [["__scopeId", "data-v-038b6eb1"]]);
 //#endregion
 export { UiAvatar_default as t };

package/vue/chunks/UiAvatarGroup.js

@@ -1,5 +1,5 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, shallowRef, toDisplayString, watchEffect } from "vue";
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, shallowRef, toDisplayString, useTemplateRef, watchEffect } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-avatar-group/ui-avatar-group.js";
 //#region .build/vue/UiAvatarGroup.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-label"];
@@ -14,48 +14,25 @@ var UiAvatarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 		max: { default: 5 }
 	},
 	setup(__props) {
-		const hn = {
-			t: (v) => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false),
-			n: (v) => typeof v === "number" && v === v ? v : void 0,
-			text: (v) => v === void 0 || v === null ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? "" : String(v),
-			attr: (v) => v === void 0 || v === null || v === false ? void 0 : v === true ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? void 0 : String(v),
-			enumerated: (v) => typeof v === "boolean" ? String(v) : hn.attr(v),
-			call: (fn, ...args) => {
-				if (fn === "format") {
-					let index = 1;
-					return typeof args[0] === "string" ? args[0].replace(/%s/g, () => index < args.length ? hn.text(args[index++]) : "%s") : void 0;
-				}
-				const n = args.map(hn.n);
-				if (n.some((value) => value === void 0)) return void 0;
-				const v = n;
-				switch (fn) {
-					case "abs": return v.length === 1 ? Math.abs(v[0]) : void 0;
-					case "round": return v.length === 1 ? Math.round(v[0]) : void 0;
-					case "min": return v.length > 0 ? Math.min(...v) : void 0;
-					case "max": return v.length > 0 ? Math.max(...v) : void 0;
-					case "clamp": return v.length === 3 ? Math.min(Math.max(v[0], v[1]), v[2]) : void 0;
-				}
-			}
-		};
 		const props = __props;
 		const root = ref(null);
-		const refs = {};
-		const state_overflowCount = ref(0);
+		const overflowElement = useTemplateRef("overflow");
+		const overflowCount = ref(0);
 		/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-		const dispatch = (name, detail) => {
+		function dispatch(name, detail) {
 			return root.value?.dispatchEvent(new CustomEvent(name, {
 				bubbles: true,
 				composed: true,
 				detail
 			})) ?? true;
-		};
+		}
 		function read(name) {
-			if (name === "overflowCount") return state_overflowCount.value;
+			if (name === "overflowCount") return overflowCount.value;
 			return props[name];
 		}
 		function write(name, value) {
 			if (name === "overflowCount") {
-				state_overflowCount.value = value;
+				overflowCount.value = value;
 				return true;
 			}
 			throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
@@ -69,7 +46,9 @@ var UiAvatarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 				get: (_target, name) => typeof name === "string" ? read(name) : void 0,
 				set: (_target, name, value) => typeof name === "string" && write(name, value)
 			}),
-			refs,
+			refs: { get overflow() {
+				return overflowElement.value;
+			} },
 			elements: new Proxy({}, { get: (_target, name) => {
 				if (typeof name !== "string" || root.value === null) return void 0;
 				return (root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form"))?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? void 0;
@@ -123,20 +102,18 @@ var UiAvatarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 				"data-component": "ui-avatar-group",
 				role: "group"
 			}, _ctx.$attrs, {
-				"aria-label": hn.enumerated(props.label),
+				"aria-label": __props.label,
 				ref_key: "root",
 				ref: root
 			}), [renderSlot(_ctx.$slots, "default"), createElementVNode("span", {
 				class: "overflow",
 				role: "img",
-				hidden: hn.attr(!hn.t(state_overflowCount.value)),
-				"aria-label": hn.enumerated(hn.call("format", "%s more", state_overflowCount.value)),
-				ref: (element) => {
-					refs["overflow"] = element;
-				}
-			}, toDisplayString(hn.text(hn.call("format", "+%s", state_overflowCount.value))), 9, _hoisted_2)], 16, _hoisted_1);
+				hidden: !overflowCount.value,
+				"aria-label": `${overflowCount.value} more`,
+				ref: "overflow"
+			}, toDisplayString(`+${overflowCount.value}`), 9, _hoisted_2)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-e211803c"]]);
+}), [["__scopeId", "data-v-6029679e"]]);
 //#endregion
 export { UiAvatarGroup_default as t };

package/vue/chunks/UiBadge.js

@@ -12,22 +12,13 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 		variant: { default: "subtle" }
 	},
 	setup(__props) {
-		const hn = { t: (v) => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false) };
 		const props = __props;
-		/** The resolved values the styles' :host-state() rules test. */
-		const hostState = computed(() => ["tone", "variant"].flatMap((name) => {
-			const value = read(name);
-			const tokens = hn.t(value) ? [name] : [];
-			if (typeof value === "string" || typeof value === "number") tokens.push(`${name}=${encodeURIComponent(String(value))}`);
-			return tokens;
-		}).join(" "));
-		function read(name) {
-			return props[name];
-		}
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [props.tone && `tone tone=${props.tone}`, props.variant && `variant variant=${props.variant}`].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("span", mergeProps({ "data-component": "ui-badge" }, _ctx.$attrs, { "data-ui-badge-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-35c8472c"]]);
+}), [["__scopeId", "data-v-43aa138f"]]);
 //#endregion
 export { UiBadge_default as t };

package/vue/chunks/UiButton.js

@@ -8,40 +8,37 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 	inheritAttrs: false,
 	__name: "UiButton",
 	props: {
+		align: { default: "center" },
 		disabled: {
-			type: [Boolean, null],
+			type: Boolean,
 			default: false
 		},
 		size: { default: "md" },
+		stretch: {
+			type: Boolean,
+			default: false
+		},
 		variant: { default: "outline" }
 	},
 	setup(__props) {
-		const hn = {
-			t: (v) => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false),
-			text: (v) => v === void 0 || v === null ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? "" : String(v),
-			attr: (v) => v === void 0 || v === null || v === false ? void 0 : v === true ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? void 0 : String(v)
-		};
 		const props = __props;
-		/** The resolved values the styles' :host-state() rules test. */
-		const hostState = computed(() => ["variant", "size"].flatMap((name) => {
-			const value = read(name);
-			const tokens = hn.t(value) ? [name] : [];
-			if (typeof value === "string" || typeof value === "number") tokens.push(`${name}=${encodeURIComponent(String(value))}`);
-			return tokens;
-		}).join(" "));
-		function read(name) {
-			return props[name];
-		}
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [
+			props.variant && `variant variant=${props.variant}`,
+			props.align && `align align=${props.align}`,
+			props.stretch && "stretch",
+			props.size && `size size=${props.size}`
+		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("button", mergeProps({
 				"data-component": "ui-button",
 				type: "button"
 			}, _ctx.$attrs, {
-				disabled: hn.attr(props.disabled),
+				disabled: __props.disabled,
 				"data-ui-button-state": hostState.value || void 0
 			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-d75759c7"]]);
+}), [["__scopeId", "data-v-d0355403"]]);
 //#endregion
 export { UiButton_default as t };

package/vue/chunks/UiCallout.js

@@ -59,24 +59,15 @@ var UiCallout_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 	__name: "UiCallout",
 	props: { tone: { default: "info" } },
 	setup(__props) {
-		const hn = { t: (v) => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false) };
 		const props = __props;
-		/** The resolved values the styles' :host-state() rules test. */
-		const hostState = computed(() => ["tone"].flatMap((name) => {
-			const value = read(name);
-			const tokens = hn.t(value) ? [name] : [];
-			if (typeof value === "string" || typeof value === "number") tokens.push(`${name}=${encodeURIComponent(String(value))}`);
-			return tokens;
-		}).join(" "));
-		function read(name) {
-			return props[name];
-		}
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [props.tone && `tone tone=${props.tone}`].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
 				"data-component": "ui-callout",
 				role: "note"
 			}, _ctx.$attrs, { "data-ui-callout-state": hostState.value || void 0 }), [createElementVNode("span", _hoisted_2, [
-				hn.t(props.tone === "info") ? (openBlock(), createElementBlock("svg", _hoisted_3, [..._cache[0] || (_cache[0] = [
+				__props.tone === "info" ? (openBlock(), createElementBlock("svg", _hoisted_3, [..._cache[0] || (_cache[0] = [
 					createElementVNode("circle", {
 						cx: "12",
 						cy: "12",
@@ -85,22 +76,22 @@ var UiCallout_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					createElementVNode("path", { d: "M12 16v-4" }, null, -1),
 					createElementVNode("path", { d: "M12 8h.01" }, null, -1)
 				])])) : createCommentVNode("v-if", true),
-				hn.t(props.tone === "note") ? (openBlock(), createElementBlock("svg", _hoisted_4, [..._cache[1] || (_cache[1] = [
+				__props.tone === "note" ? (openBlock(), createElementBlock("svg", _hoisted_4, [..._cache[1] || (_cache[1] = [
 					createElementVNode("path", { d: "M13.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8.5L13.5 2Z" }, null, -1),
 					createElementVNode("path", { d: "M13 2v7h7" }, null, -1),
 					createElementVNode("path", { d: "m9.5 17.5 4-4 2 2-4 4H9.5v-2Z" }, null, -1)
 				])])) : createCommentVNode("v-if", true),
-				hn.t(props.tone === "warning") ? (openBlock(), createElementBlock("svg", _hoisted_5, [..._cache[2] || (_cache[2] = [
+				__props.tone === "warning" ? (openBlock(), createElementBlock("svg", _hoisted_5, [..._cache[2] || (_cache[2] = [
 					createElementVNode("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }, null, -1),
 					createElementVNode("path", { d: "M12 9v4" }, null, -1),
 					createElementVNode("path", { d: "M12 17h.01" }, null, -1)
 				])])) : createCommentVNode("v-if", true),
-				hn.t(props.tone === "success") ? (openBlock(), createElementBlock("svg", _hoisted_6, [..._cache[3] || (_cache[3] = [createElementVNode("circle", {
+				__props.tone === "success" ? (openBlock(), createElementBlock("svg", _hoisted_6, [..._cache[3] || (_cache[3] = [createElementVNode("circle", {
 					cx: "12",
 					cy: "12",
 					r: "10"
 				}, null, -1), createElementVNode("path", { d: "m9 12 2 2 4-4" }, null, -1)])])) : createCommentVNode("v-if", true),
-				hn.t(props.tone === "danger") ? (openBlock(), createElementBlock("svg", _hoisted_7, [..._cache[4] || (_cache[4] = [
+				__props.tone === "danger" ? (openBlock(), createElementBlock("svg", _hoisted_7, [..._cache[4] || (_cache[4] = [
 					createElementVNode("circle", {
 						cx: "12",
 						cy: "12",
@@ -112,6 +103,6 @@ var UiCallout_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			]), createElementVNode("div", _hoisted_8, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-347d550e"]]);
+}), [["__scopeId", "data-v-31ee6589"]]);
 //#endregion
 export { UiCallout_default as t };

package/vue/chunks/UiCheckbox.js

@@ -1,5 +1,5 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, shallowRef, watchEffect } from "vue";
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, shallowRef, useTemplateRef, watchEffect } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-checkbox/ui-checkbox.js";
 //#region .build/vue/UiCheckbox.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-ui-checkbox-state"];
@@ -18,70 +18,67 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 	__name: "UiCheckbox",
 	props: {
 		checked: {
-			type: [Boolean, null],
+			type: Boolean,
 			default: false
 		},
 		disabled: {
-			type: [Boolean, null],
+			type: Boolean,
 			default: false
 		},
 		indeterminate: {
-			type: [Boolean, null],
+			type: Boolean,
 			default: false
 		},
 		required: {
-			type: [Boolean, null],
+			type: Boolean,
 			default: false
 		},
 		value: { default: "on" }
 	},
-	emits: ["change"],
+	emits: [
+		"update:checked",
+		"update:value",
+		"change"
+	],
 	setup(__props, { emit: __emit }) {
-		const hn = {
-			t: (v) => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false),
-			text: (v) => v === void 0 || v === null ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? "" : String(v),
-			attr: (v) => v === void 0 || v === null || v === false ? void 0 : v === true ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? void 0 : String(v)
-		};
 		const props = __props;
 		const emit = __emit;
 		const root = ref(null);
-		const refs = {};
-		const state_internalChecked = ref(false);
+		const inputElement = useTemplateRef("input");
+		const internalChecked = ref(false);
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [props.disabled && "disabled"].filter(Boolean).join(" "));
 		/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-		const dispatch = (name, detail) => {
-			const declared = { "change": {
-				"bubbles": true,
-				"composed": true,
-				"cancelable": false
+		function dispatch(name, detail) {
+			const declared = { change: {
+				bubbles: true,
+				composed: true,
+				cancelable: false
 			} };
-			const checks = { "change": (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) => [
+			const checks = { change: (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",
 				"trigger"
 			].includes(key)) };
 			if (detail !== void 0 && checks[name] !== void 0 && !checks[name](detail)) throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`);
-			emit(name, detail);
+			const emitEvent = emit;
+			emitEvent(name, detail);
+			if (detail !== null && typeof detail === "object" && "checked" in detail) emitEvent("update:checked", detail["checked"]);
+			if (detail !== null && typeof detail === "object" && "value" in detail) emitEvent("update:value", detail["value"]);
 			return root.value?.dispatchEvent(new CustomEvent(name, {
 				bubbles: true,
 				composed: true,
 				...declared[name],
 				detail
 			})) ?? true;
-		};
-		/** The resolved values the styles' :host-state() rules test. */
-		const hostState = computed(() => ["disabled"].flatMap((name) => {
-			const value = read(name);
-			const tokens = hn.t(value) ? [name] : [];
-			if (typeof value === "string" || typeof value === "number") tokens.push(`${name}=${encodeURIComponent(String(value))}`);
-			return tokens;
-		}).join(" "));
+		}
 		function read(name) {
-			if (name === "internalChecked") return state_internalChecked.value;
+			if (name === "internalChecked") return internalChecked.value;
 			return props[name];
 		}
 		function write(name, value) {
 			if (name === "internalChecked") {
-				state_internalChecked.value = value;
+				internalChecked.value = value;
 				return true;
 			}
 			throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
@@ -95,7 +92,9 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				get: (_target, name) => typeof name === "string" ? read(name) : void 0,
 				set: (_target, name, value) => typeof name === "string" && write(name, value)
 			}),
-			refs,
+			refs: { get input() {
+				return inputElement.value;
+			} },
 			elements: new Proxy({}, { get: (_target, name) => {
 				if (typeof name !== "string" || root.value === null) return void 0;
 				return (root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form"))?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? void 0;
@@ -151,17 +150,15 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				ref: root
 			}), [createElementVNode("input", {
 				type: "checkbox",
-				".checked": state_internalChecked.value,
-				".indeterminate": props.indeterminate,
-				disabled: hn.attr(props.disabled),
-				required: hn.attr(props.required),
-				value: hn.attr(props.value),
-				ref: (element) => {
-					refs["input"] = element;
-				}
+				".checked": internalChecked.value,
+				".indeterminate": __props.indeterminate,
+				disabled: __props.disabled,
+				required: __props.required,
+				value: __props.value,
+				ref: "input"
 			}, null, 40, _hoisted_2), createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-d4d97fc0"]]);
+}), [["__scopeId", "data-v-acf71232"]]);
 //#endregion
 export { UiCheckbox_default as t };

package/vue/chunks/UiCluster.js

@@ -12,22 +12,13 @@ var UiCluster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		gap: {}
 	},
 	setup(__props) {
-		const hn = { t: (v) => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false) };
 		const props = __props;
-		/** The resolved values the styles' :host-state() rules test. */
-		const hostState = computed(() => ["gap", "align"].flatMap((name) => {
-			const value = read(name);
-			const tokens = hn.t(value) ? [name] : [];
-			if (typeof value === "string" || typeof value === "number") tokens.push(`${name}=${encodeURIComponent(String(value))}`);
-			return tokens;
-		}).join(" "));
-		function read(name) {
-			return props[name];
-		}
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [props.gap && `gap gap=${props.gap}`, props.align && `align align=${props.align}`].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-cluster" }, _ctx.$attrs, { "data-ui-cluster-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-f41ac461"]]);
+}), [["__scopeId", "data-v-06d4310a"]]);
 //#endregion
 export { UiCluster_default as t };