@threadlabs/looma 0.5.1 → 0.6.0-rc.1

package/vue/chunks/UiReel.js

@@ -13,22 +13,13 @@ var UiReel_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		snap: {}
 	},
 	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. */
+		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [
-			"gap",
-			"itemWidth",
-			"snap"
-		].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];
-		}
+			props.gap && `gap gap=${props.gap}`,
+			props.itemWidth && `itemWidth itemWidth=${props.itemWidth}`,
+			props.snap && `snap snap=${props.snap}`
+		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
 				"data-component": "ui-reel",
@@ -37,6 +28,6 @@ var UiReel_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}, _ctx.$attrs, { "data-ui-reel-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-6d8ec8a0"]]);
+}), [["__scopeId", "data-v-0dde8279"]]);
 //#endregion
 export { UiReel_default as t };

package/vue/chunks/UiSearchResultRow.js

@@ -15,37 +15,24 @@ var UiSearchResultRow_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 	__name: "UiSearchResultRow",
 	props: {
 		disabled: {
-			type: [Boolean, null],
+			type: Boolean,
 			default: false
 		},
 		selected: {
-			type: [Boolean, null],
+			type: Boolean,
 			default: false
 		}
 	},
 	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(() => ["selected"].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.selected && "selected"].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("button", mergeProps({
 				"data-component": "ui-search-result-row",
 				type: "button"
 			}, _ctx.$attrs, {
-				disabled: hn.attr(props.disabled),
+				disabled: __props.disabled,
 				"data-ui-search-result-row-state": hostState.value || void 0
 			}), [
 				createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "leading")]),
@@ -58,6 +45,6 @@ var UiSearchResultRow_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-a8b3c5dd"]]);
+}), [["__scopeId", "data-v-7d88a5d4"]]);
 //#endregion
 export { UiSearchResultRow_default as t };

package/vue/chunks/UiSearchShell.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-search-shell/ui-search-shell.js";
 //#region .build/vue/UiSearchShell.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-label"];
@@ -15,59 +15,56 @@ var UiSearchShell_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 	__name: "UiSearchShell",
 	props: {
 		dismissible: {
-			type: [Boolean, null],
+			type: Boolean,
 			default: false
 		},
 		label: { default: "Search" },
 		modal: {
-			type: [Boolean, null],
+			type: Boolean,
 			default: false
 		},
 		open: {
-			type: [Boolean, null],
+			type: Boolean,
 			default: false
 		}
 	},
-	emits: ["close"],
+	emits: ["update:open", "close"],
 	setup(__props, { emit: __emit }) {
-		const hn = {
-			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 emit = __emit;
 		const root = ref(null);
-		const refs = {};
-		const state_internalOpen = ref(false);
+		const dialogElement = useTemplateRef("dialog");
+		const internalOpen = ref(false);
 		/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-		const dispatch = (name, detail) => {
-			const declared = { "close": {
-				"bubbles": true,
-				"composed": true,
-				"cancelable": false
+		function dispatch(name, detail) {
+			const declared = { close: {
+				bubbles: true,
+				composed: true,
+				cancelable: false
 			} };
-			const checks = { "close": (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) => [
+			const checks = { close: (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) => [
 				"open",
 				"reason",
 				"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" && "open" in detail) emitEvent("update:open", detail["open"]);
 			return root.value?.dispatchEvent(new CustomEvent(name, {
 				bubbles: true,
 				composed: true,
 				...declared[name],
 				detail
 			})) ?? true;
-		};
+		}
 		function read(name) {
-			if (name === "internalOpen") return state_internalOpen.value;
+			if (name === "internalOpen") return internalOpen.value;
 			return props[name];
 		}
 		function write(name, value) {
 			if (name === "internalOpen") {
-				state_internalOpen.value = value;
+				internalOpen.value = value;
 				return true;
 			}
 			throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
@@ -81,7 +78,9 @@ var UiSearchShell_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 dialog() {
+				return dialogElement.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;
@@ -135,10 +134,8 @@ var UiSearchShell_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 				ref_key: "root",
 				ref: root
 			}), [createElementVNode("dialog", {
-				"aria-label": hn.enumerated(props.label),
-				ref: (element) => {
-					refs["dialog"] = element;
-				}
+				"aria-label": __props.label,
+				ref: "dialog"
 			}, [createElementVNode("div", _hoisted_2, [
 				createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "search")]),
 				createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "status")]),
@@ -147,6 +144,6 @@ var UiSearchShell_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			])], 8, _hoisted_1)], 16);
 		};
 	}
-}), [["__scopeId", "data-v-8d1491f1"]]);
+}), [["__scopeId", "data-v-976b649d"]]);
 //#endregion
 export { UiSearchShell_default as t };

package/vue/chunks/UiSelect.js

@@ -1,5 +1,5 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { computed, createElementBlock, defineComponent, mergeProps, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, shallowRef, watchEffect } from "vue";
+import { computed, createElementBlock, defineComponent, mergeProps, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, shallowRef, vModelSelect, watchEffect, withDirectives } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-select/ui-select.js";
 //#region .build/vue/UiSelect.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
@@ -15,19 +15,19 @@ var UiSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 	__name: "UiSelect",
 	props: {
 		disabled: {
-			type: [Boolean, null],
+			type: Boolean,
 			default: false
 		},
 		invalid: {
-			type: [Boolean, null],
+			type: Boolean,
 			default: false
 		},
 		multiple: {
-			type: [Boolean, null],
+			type: Boolean,
 			default: false
 		},
 		required: {
-			type: [Boolean, null],
+			type: Boolean,
 			default: false
 		},
 		value: {},
@@ -35,24 +35,21 @@ var UiSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
-		const hn = {
-			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 emit = __emit;
-		const updateModel = (event) => emit("update:modelValue", event.target.value);
+		const model = computed({
+			get: () => props.modelValue ?? props.value ?? void 0,
+			set: (value) => emit("update:modelValue", value)
+		});
 		const root = ref(null);
-		const refs = {};
 		/** 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) {
 			return props[name];
 		}
@@ -68,7 +65,7 @@ var UiSelect_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: {},
 			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;
@@ -118,17 +115,17 @@ var UiSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			if (typeof cleanup === "function") cleanup();
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("select", mergeProps({ "data-component": "ui-select" }, _ctx.$attrs, {
-				disabled: hn.attr(props.disabled),
-				required: hn.attr(props.required),
-				multiple: hn.attr(props.multiple),
-				"aria-invalid": hn.enumerated(props.invalid),
-				onChange: updateModel,
+			return withDirectives((openBlock(), createElementBlock("select", mergeProps({ "data-component": "ui-select" }, _ctx.$attrs, {
+				disabled: __props.disabled,
+				required: __props.required,
+				multiple: __props.multiple,
+				"aria-invalid": __props.invalid,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
 				ref_key: "root",
 				ref: root
-			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
+			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)), [[vModelSelect, model.value]]);
 		};
 	}
-}), [["__scopeId", "data-v-a5498df1"]]);
+}), [["__scopeId", "data-v-01335c35"]]);
 //#endregion
 export { UiSelect_default as t };

package/vue/chunks/UiSeparator.js

@@ -9,16 +9,10 @@ var UiSeparator_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 	__name: "UiSeparator",
 	props: { orientation: { default: "horizontal" } },
 	setup(__props) {
-		const hn = {
-			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;
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("hr", mergeProps({ "data-component": "ui-separator" }, _ctx.$attrs, { "aria-orientation": hn.enumerated(props.orientation) }), null, 16, _hoisted_1);
+			return openBlock(), createElementBlock("hr", mergeProps({ "data-component": "ui-separator" }, _ctx.$attrs, { "aria-orientation": __props.orientation }), null, 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-30b5bbe9"]]);
+}), [["__scopeId", "data-v-f0034397"]]);
 //#endregion
 export { UiSeparator_default as t };

package/vue/chunks/UiSidebar.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-sidebar/ui-sidebar.js";
 //#region .build/vue/UiSidebar.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-ui-sidebar-state"];
@@ -13,13 +13,13 @@ var UiSidebar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 	props: {
 		breakpoint: { default: "md" },
 		collapsed: {
-			type: [Boolean, null],
+			type: Boolean,
 			default: false
 		},
 		maxWidth: { default: 480 },
 		minWidth: { default: 200 },
 		resizable: {
-			type: [Boolean, null],
+			type: Boolean,
 			default: false
 		},
 		resizeLabel: { default: "Resize sidebar" },
@@ -27,70 +27,65 @@ var UiSidebar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		side: { default: "start" },
 		width: { default: 0 }
 	},
-	emits: ["resize", "toggle"],
+	emits: [
+		"update:width",
+		"resize",
+		"toggle"
+	],
 	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),
-			enumerated: (v) => typeof v === "boolean" ? String(v) : hn.attr(v)
-		};
 		const props = __props;
 		const emit = __emit;
 		const root = ref(null);
-		const refs = {};
-		const state_internalCollapsed = ref(false);
-		const state_drawer = ref(false);
+		const resizerElement = useTemplateRef("resizer");
+		const internalCollapsed = ref(false);
+		const drawer = ref(false);
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [props.side && `side side=${props.side}`, internalCollapsed.value && "internalCollapsed"].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) {
 			const declared = {
-				"resize": {
-					"bubbles": true,
-					"composed": true,
-					"cancelable": false
+				resize: {
+					bubbles: true,
+					composed: true,
+					cancelable: false
 				},
-				"toggle": {
-					"bubbles": true,
-					"composed": true,
-					"cancelable": false
+				toggle: {
+					bubbles: true,
+					composed: true,
+					cancelable: false
 				}
 			};
 			const checks = {
-				"resize": (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["width"] === "number" && Number.isFinite(detail["width"]) && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => ["width", "trigger"].includes(key)),
-				"toggle": (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["open"] === "boolean" && (detail["mode"] === "docked" || detail["mode"] === "drawer") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
+				resize: (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["width"] === "number" && Number.isFinite(detail["width"]) && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => ["width", "trigger"].includes(key)),
+				toggle: (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["open"] === "boolean" && (detail["mode"] === "docked" || detail["mode"] === "drawer") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
 					"open",
 					"mode",
 					"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" && "width" in detail) emitEvent("update:width", detail["width"]);
 			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(() => ["side", "internalCollapsed"].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 === "internalCollapsed") return state_internalCollapsed.value;
-			if (name === "drawer") return state_drawer.value;
+			if (name === "internalCollapsed") return internalCollapsed.value;
+			if (name === "drawer") return drawer.value;
 			return props[name];
 		}
 		function write(name, value) {
 			if (name === "internalCollapsed") {
-				state_internalCollapsed.value = value;
+				internalCollapsed.value = value;
 				return true;
 			}
 			if (name === "drawer") {
-				state_drawer.value = value;
+				drawer.value = value;
 				return true;
 			}
 			throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
@@ -104,7 +99,9 @@ var UiSidebar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 				get: (_target, name) => typeof name === "string" ? read(name) : void 0,
 				set: (_target, name, value) => typeof name === "string" && write(name, value)
 			}),
-			refs,
+			refs: { get resizer() {
+				return resizerElement.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;
@@ -164,17 +161,15 @@ var UiSidebar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 				"aria-orientation": "vertical",
 				tabindex: "0",
 				"data-ui-affordance": "resize",
-				"aria-label": hn.enumerated(props.resizeLabel),
-				hidden: hn.attr(hn.t(hn.t(!hn.t(props.resizable)) || hn.t(state_drawer.value)) || hn.t(state_internalCollapsed.value)),
-				ref: (element) => {
-					refs["resizer"] = element;
-				}
+				"aria-label": __props.resizeLabel,
+				hidden: !__props.resizable || drawer.value || internalCollapsed.value,
+				ref: "resizer"
 			}, [..._cache[0] || (_cache[0] = [createElementVNode("span", {
 				class: "guide",
 				"aria-hidden": "true"
 			}, null, -1)])], 8, _hoisted_3)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-2f64215a"]]);
+}), [["__scopeId", "data-v-a2e22569"]]);
 //#endregion
 export { UiSidebar_default as t };

package/vue/chunks/UiStack.js

@@ -13,26 +13,17 @@ var UiStack_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 		justify: {}
 	},
 	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. */
+		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [
-			"gap",
-			"align",
-			"justify"
-		].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];
-		}
+			props.gap && `gap gap=${props.gap}`,
+			props.align && `align align=${props.align}`,
+			props.justify && `justify justify=${props.justify}`
+		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-stack" }, _ctx.$attrs, { "data-ui-stack-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-48cfa668"]]);
+}), [["__scopeId", "data-v-aa8062a9"]]);
 //#endregion
 export { UiStack_default as t };

package/vue/chunks/UiSwitch.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-switch/ui-switch.js";
 //#region .build/vue/UiSwitch.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-ui-switch-state"];
@@ -17,66 +17,63 @@ var UiSwitch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 	__name: "UiSwitch",
 	props: {
 		checked: {
-			type: [Boolean, null],
+			type: Boolean,
 			default: false
 		},
 		disabled: {
-			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.`);
@@ -90,7 +87,9 @@ var UiSwitch_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 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;
@@ -147,16 +146,14 @@ var UiSwitch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}), [createElementVNode("input", {
 				type: "checkbox",
 				role: "switch",
-				".checked": state_internalChecked.value,
-				disabled: hn.attr(props.disabled),
-				required: hn.attr(props.required),
-				value: hn.attr(props.value),
-				ref: (element) => {
-					refs["input"] = element;
-				}
+				".checked": internalChecked.value,
+				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-fb5ff799"]]);
+}), [["__scopeId", "data-v-44eb48fd"]]);
 //#endregion
 export { UiSwitch_default as t };