@threadlabs/looma 0.6.4 → 0.7.0

package/vue/chunks/UiRadioGroup.js

@@ -1,5 +1,6 @@
+import { n as useComponentHost, t as createDispatch } from "./host.js";
 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, openBlock, ref, renderSlot, toDisplayString } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-radio-group/ui-radio-group.js";
 //#region .build/vue/UiRadioGroup.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-ui-radio-group-state"];
@@ -34,111 +35,28 @@ var UiRadioGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		const internalValue = ref("");
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [props.orientation && `orientation orientation=${props.orientation}`].filter(Boolean).join(" "));
-		/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-		function dispatch(name, detail) {
-			const declared = {
-				select: {
-					bubbles: true,
-					composed: true,
-					cancelable: false
-				},
-				change: {
-					bubbles: true,
-					composed: true,
-					cancelable: false
-				}
-			};
-			const checks = {
-				select: (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["value"] === "string" && typeof detail["previousValue"] === "string" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
-					"value",
-					"previousValue",
-					"trigger"
-				].includes(key)),
-				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.`);
-			const emitEvent = emit;
-			emitEvent(name, detail);
-			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;
-		}
-		function read(name) {
-			if (name === "internalValue") return internalValue.value;
-			return props[name];
-		}
-		function write(name, value) {
-			if (name === "internalValue") {
-				internalValue.value = value;
-				return true;
-			}
-			throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
-		}
-		const stops = [];
-		const host = {
-			get element() {
-				return root.value;
+		const isSelectDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["value"] === "string" && typeof detail["previousValue"] === "string" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
+			"value",
+			"previousValue",
+			"trigger"
+		].includes(key));
+		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",
+			"trigger"
+		].includes(key));
+		const dispatch = createDispatch(root, emit, {
+			checks: {
+				select: isSelectDetail,
+				change: isChangeDetail
 			},
-			state: new Proxy({}, {
-				get: (_target, name) => typeof name === "string" ? read(name) : void 0,
-				set: (_target, name, value) => typeof name === "string" && write(name, value)
-			}),
-			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;
-			} }),
-			signal(initialValue) {
-				const value = shallowRef(initialValue);
-				return {
-					get: () => value.value,
-					set: (next) => {
-						if (!Object.is(value.value, next)) value.value = next;
-					},
-					update: (next) => {
-						const updated = next(value.value);
-						if (!Object.is(value.value, updated)) value.value = updated;
-					}
-				};
-			},
-			computed(compute) {
-				const value = computed(compute);
-				return { get: () => value.value };
-			},
-			effect(run) {
-				const stop = watchEffect((onCleanup) => {
-					const cleanup = run();
-					if (typeof cleanup === "function") onCleanup(cleanup);
-				}, { flush: "post" });
-				stops.push(stop);
-				return stop;
-			},
-			on(event, listener) {
-				const element = root.value;
-				element?.addEventListener(event, listener);
-				const off = () => element?.removeEventListener(event, listener);
-				stops.push(off);
-				return off;
-			},
-			dispatch
-		};
-		let cleanup;
-		onMounted(() => {
-			Promise.resolve(controllerModule.default(host)).then((result) => {
-				cleanup = result;
-			});
+			modeled: ["value"]
 		});
-		onBeforeUnmount(() => {
-			for (const stop of stops.splice(0)) stop();
-			if (typeof cleanup === "function") cleanup();
+		useComponentHost(controllerModule.default, {
+			root,
+			dispatch,
+			props,
+			state: { internalValue }
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("fieldset", mergeProps({
@@ -151,6 +69,6 @@ var UiRadioGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}), [createElementVNode("legend", null, toDisplayString(__props.label), 1), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-df092584"]]);
+}), [["__scopeId", "data-v-cd639df6"]]);
 //#endregion
 export { UiRadioGroup_default as t };

package/vue/chunks/UiReel.js

@@ -28,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-0dde8279"]]);
+}), [["__scopeId", "data-v-0d41608a"]]);
 //#endregion
 export { UiReel_default as t };

package/vue/chunks/UiSearchResultRow.js

@@ -45,6 +45,6 @@ var UiSearchResultRow_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-7d88a5d4"]]);
+}), [["__scopeId", "data-v-9f29c4b0"]]);
 //#endregion
 export { UiSearchResultRow_default as t };

package/vue/chunks/UiSearchShell.js

@@ -1,5 +1,6 @@
+import { n as useComponentHost, t as createDispatch } from "./host.js";
 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, useTemplateRef, watchEffect } from "vue";
+import { createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, useTemplateRef } 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"];
@@ -35,99 +36,21 @@ var UiSearchShell_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 		const root = ref(null);
 		const dialogElement = useTemplateRef("dialog");
 		const internalOpen = ref(false);
-		/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-		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) => [
-				"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.`);
-			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 internalOpen.value;
-			return props[name];
-		}
-		function write(name, value) {
-			if (name === "internalOpen") {
-				internalOpen.value = value;
-				return true;
-			}
-			throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
-		}
-		const stops = [];
-		const host = {
-			get element() {
-				return root.value;
-			},
-			state: new Proxy({}, {
-				get: (_target, name) => typeof name === "string" ? read(name) : void 0,
-				set: (_target, name, value) => typeof name === "string" && write(name, value)
-			}),
-			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;
-			} }),
-			signal(initialValue) {
-				const value = shallowRef(initialValue);
-				return {
-					get: () => value.value,
-					set: (next) => {
-						if (!Object.is(value.value, next)) value.value = next;
-					},
-					update: (next) => {
-						const updated = next(value.value);
-						if (!Object.is(value.value, updated)) value.value = updated;
-					}
-				};
-			},
-			computed(compute) {
-				const value = computed(compute);
-				return { get: () => value.value };
-			},
-			effect(run) {
-				const stop = watchEffect((onCleanup) => {
-					const cleanup = run();
-					if (typeof cleanup === "function") onCleanup(cleanup);
-				}, { flush: "post" });
-				stops.push(stop);
-				return stop;
-			},
-			on(event, listener) {
-				const element = root.value;
-				element?.addEventListener(event, listener);
-				const off = () => element?.removeEventListener(event, listener);
-				stops.push(off);
-				return off;
-			},
-			dispatch
-		};
-		let cleanup;
-		onMounted(() => {
-			Promise.resolve(controllerModule.default(host)).then((result) => {
-				cleanup = result;
-			});
+		const isCloseDetail = (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));
+		const dispatch = createDispatch(root, emit, {
+			checks: { close: isCloseDetail },
+			modeled: ["open"]
 		});
-		onBeforeUnmount(() => {
-			for (const stop of stops.splice(0)) stop();
-			if (typeof cleanup === "function") cleanup();
+		useComponentHost(controllerModule.default, {
+			root,
+			dispatch,
+			props,
+			refs: { dialog: dialogElement },
+			state: { internalOpen }
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-search-shell" }, _ctx.$attrs, {
@@ -144,6 +67,6 @@ var UiSearchShell_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			])], 8, _hoisted_1)], 16);
 		};
 	}
-}), [["__scopeId", "data-v-976b649d"]]);
+}), [["__scopeId", "data-v-d27d0d8a"]]);
 //#endregion
 export { UiSearchShell_default as t };

package/vue/chunks/UiSelect.js

@@ -1,11 +1,11 @@
+import { n as useComponentHost, t as createDispatch } from "./host.js";
 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, vModelSelect, watchEffect, withDirectives } from "vue";
+import { computed, createElementBlock, defineComponent, mergeProps, openBlock, ref, renderSlot, vModelSelect, 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 = [
 	"disabled",
 	"required",
-	"multiple",
 	"aria-invalid"
 ];
 //#endregion
@@ -22,10 +22,6 @@ var UiSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			type: Boolean,
 			default: false
 		},
-		multiple: {
-			type: Boolean,
-			default: false
-		},
 		required: {
 			type: Boolean,
 			default: false
@@ -42,83 +38,16 @@ var UiSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			set: (value) => emit("update:modelValue", value)
 		});
 		const root = ref(null);
-		/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-		function dispatch(name, detail) {
-			return root.value?.dispatchEvent(new CustomEvent(name, {
-				bubbles: true,
-				composed: true,
-				detail
-			})) ?? true;
-		}
-		function read(name) {
-			return props[name];
-		}
-		function write(name, value) {
-			throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
-		}
-		const stops = [];
-		const host = {
-			get element() {
-				return root.value;
-			},
-			state: new Proxy({}, {
-				get: (_target, name) => typeof name === "string" ? read(name) : void 0,
-				set: (_target, name, value) => typeof name === "string" && write(name, value)
-			}),
-			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;
-			} }),
-			signal(initialValue) {
-				const value = shallowRef(initialValue);
-				return {
-					get: () => value.value,
-					set: (next) => {
-						if (!Object.is(value.value, next)) value.value = next;
-					},
-					update: (next) => {
-						const updated = next(value.value);
-						if (!Object.is(value.value, updated)) value.value = updated;
-					}
-				};
-			},
-			computed(compute) {
-				const value = computed(compute);
-				return { get: () => value.value };
-			},
-			effect(run) {
-				const stop = watchEffect((onCleanup) => {
-					const cleanup = run();
-					if (typeof cleanup === "function") onCleanup(cleanup);
-				}, { flush: "post" });
-				stops.push(stop);
-				return stop;
-			},
-			on(event, listener) {
-				const element = root.value;
-				element?.addEventListener(event, listener);
-				const off = () => element?.removeEventListener(event, listener);
-				stops.push(off);
-				return off;
-			},
-			dispatch
-		};
-		let cleanup;
-		onMounted(() => {
-			Promise.resolve(controllerModule.default(host)).then((result) => {
-				cleanup = result;
-			});
-		});
-		onBeforeUnmount(() => {
-			for (const stop of stops.splice(0)) stop();
-			if (typeof cleanup === "function") cleanup();
+		const dispatch = createDispatch(root);
+		useComponentHost(controllerModule.default, {
+			root,
+			dispatch,
+			props
 		});
 		return (_ctx, _cache) => {
 			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",
@@ -126,6 +55,6 @@ var UiSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)), [[vModelSelect, model.value]]);
 		};
 	}
-}), [["__scopeId", "data-v-01335c35"]]);
+}), [["__scopeId", "data-v-2a885e02"]]);
 //#endregion
 export { UiSelect_default as t };

package/vue/chunks/UiSeparator.js

@@ -13,6 +13,6 @@ var UiSeparator_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			return openBlock(), createElementBlock("hr", mergeProps({ "data-component": "ui-separator" }, _ctx.$attrs, { "aria-orientation": __props.orientation }), null, 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-f0034397"]]);
+}), [["__scopeId", "data-v-f07c3800"]]);
 //#endregion
 export { UiSeparator_default as t };

package/vue/chunks/UiSidebar.js

@@ -1,5 +1,6 @@
+import { n as useComponentHost, t as createDispatch } from "./host.js";
 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, useTemplateRef, watchEffect } from "vue";
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, useTemplateRef } 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"];
@@ -41,114 +42,28 @@ var UiSidebar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		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. */
-		function dispatch(name, detail) {
-			const declared = {
-				resize: {
-					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) => [
-					"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.`);
-			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;
-		}
-		function read(name) {
-			if (name === "internalCollapsed") return internalCollapsed.value;
-			if (name === "drawer") return drawer.value;
-			return props[name];
-		}
-		function write(name, value) {
-			if (name === "internalCollapsed") {
-				internalCollapsed.value = value;
-				return true;
-			}
-			if (name === "drawer") {
-				drawer.value = value;
-				return true;
-			}
-			throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
-		}
-		const stops = [];
-		const host = {
-			get element() {
-				return root.value;
-			},
-			state: new Proxy({}, {
-				get: (_target, name) => typeof name === "string" ? read(name) : void 0,
-				set: (_target, name, value) => typeof name === "string" && write(name, value)
-			}),
-			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;
-			} }),
-			signal(initialValue) {
-				const value = shallowRef(initialValue);
-				return {
-					get: () => value.value,
-					set: (next) => {
-						if (!Object.is(value.value, next)) value.value = next;
-					},
-					update: (next) => {
-						const updated = next(value.value);
-						if (!Object.is(value.value, updated)) value.value = updated;
-					}
-				};
-			},
-			computed(compute) {
-				const value = computed(compute);
-				return { get: () => value.value };
+		const isResizeDetail = (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));
+		const isToggleDetail = (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));
+		const dispatch = createDispatch(root, emit, {
+			checks: {
+				resize: isResizeDetail,
+				toggle: isToggleDetail
 			},
-			effect(run) {
-				const stop = watchEffect((onCleanup) => {
-					const cleanup = run();
-					if (typeof cleanup === "function") onCleanup(cleanup);
-				}, { flush: "post" });
-				stops.push(stop);
-				return stop;
-			},
-			on(event, listener) {
-				const element = root.value;
-				element?.addEventListener(event, listener);
-				const off = () => element?.removeEventListener(event, listener);
-				stops.push(off);
-				return off;
-			},
-			dispatch
-		};
-		let cleanup;
-		onMounted(() => {
-			Promise.resolve(controllerModule.default(host)).then((result) => {
-				cleanup = result;
-			});
+			modeled: ["width"]
 		});
-		onBeforeUnmount(() => {
-			for (const stop of stops.splice(0)) stop();
-			if (typeof cleanup === "function") cleanup();
+		useComponentHost(controllerModule.default, {
+			root,
+			dispatch,
+			props,
+			refs: { resizer: resizerElement },
+			state: {
+				internalCollapsed,
+				drawer
+			}
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("aside", mergeProps({ "data-component": "ui-sidebar" }, _ctx.$attrs, {
@@ -170,6 +85,6 @@ var UiSidebar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			}, null, -1)])], 8, _hoisted_3)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-a2e22569"]]);
+}), [["__scopeId", "data-v-4bcdb743"]]);
 //#endregion
 export { UiSidebar_default as t };

package/vue/chunks/UiStack.js

@@ -24,6 +24,6 @@ var UiStack_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			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-9a903e2b"]]);
+}), [["__scopeId", "data-v-43678d8b"]]);
 //#endregion
 export { UiStack_default as t };