@threadlabs/looma 0.19.1 → 0.20.0

package/vue/chunks/UiSection.js

@@ -1,7 +1,13 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, renderSlot, toDisplayString } from "vue";
+import { t as checkedProp } from "./props.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, toDisplayString, watchSyncEffect } from "vue";
 //#region .build/vue/UiSection.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["data-ui-section-state"];
+var _hoisted_1 = [
+	"data-heading",
+	"data-tone",
+	"data-variant",
+	"data-ui-section-state"
+];
 var _hoisted_2 = { class: "head" };
 var _hoisted_3 = { class: "copy" };
 var _hoisted_4 = ["hidden"];
@@ -14,21 +20,82 @@ var UiSection_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 	inheritAttrs: false,
 	__name: "UiSection",
 	props: {
-		heading: { default: "" },
-		tone: { default: "neutral" },
-		variant: { default: "plain" }
+		heading: {
+			type: null,
+			default: ""
+		},
+		tone: {
+			type: null,
+			default: "neutral"
+		},
+		variant: {
+			type: null,
+			default: "plain"
+		}
 	},
 	setup(__props) {
 		const props = __props;
+		const checkedProps = computed(() => ({
+			heading: checkedProp(props["heading"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "heading", void 0, void 0),
+			tone: checkedProp(props["tone"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "tone", void 0, ["neutral", "danger"]),
+			variant: checkedProp(props["variant"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "variant", void 0, [
+				"plain",
+				"card",
+				"divided"
+			])
+		}));
+		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 !== "section")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-section> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-section> has an incompatible root."
+			})
+		});
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [props.variant && `variant variant=${props.variant}`, props.tone && `tone tone=${props.tone}`].filter(Boolean).join(" "));
+		const hostState = computed(() => [
+			checkedProps.value.variant && "variant",
+			checkedProps.value.variant != null && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
+			checkedProps.value.tone && "tone",
+			checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`
+		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("section", mergeProps({ "data-component": "ui-section" }, _ctx.$attrs, { "data-ui-section-state": hostState.value || void 0 }), [createElementVNode("span", _hoisted_2, [createElementVNode("span", _hoisted_3, [createElementVNode("h2", {
+			return openBlock(), createElementBlock("section", mergeProps({ "data-component": "ui-section" }, nativeAttrs(_ctx.$attrs), {
+				"data-heading": reflectedProp("heading", "heading", checkedProps.value.heading, void 0, false),
+				"data-tone": reflectedProp("tone", "tone", checkedProps.value.tone, void 0, false),
+				"data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
+				"data-ui-section-state": hostState.value || void 0
+			}), [createElementVNode("span", _hoisted_2, [createElementVNode("span", _hoisted_3, [createElementVNode("h2", {
 				class: "heading",
-				hidden: !__props.heading
-			}, toDisplayString(__props.heading), 9, _hoisted_4), createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "description", {}, void 0, true)])]), createElementVNode("span", _hoisted_6, [renderSlot(_ctx.$slots, "actions", {}, void 0, true)])]), createElementVNode("span", _hoisted_7, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1);
+				hidden: !checkedProps.value.heading
+			}, toDisplayString(checkedProps.value.heading), 9, _hoisted_4), createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "description", {}, void 0, true)])]), createElementVNode("span", _hoisted_6, [renderSlot(_ctx.$slots, "actions", {}, void 0, true)])]), createElementVNode("span", _hoisted_7, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-39aaec7c"]]);
+}), [["__scopeId", "data-v-f8d6670f"]]);
 //#endregion
 export { UiSection_default as t };

package/vue/chunks/UiSelect.js

@@ -1,12 +1,18 @@
 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, defineComponent, mergeProps, openBlock, ref, renderSlot, vModelSelect, withDirectives } from "vue";
-import * as controllerModule from "@threadlabs/looma/components/ui-select/ui-select.js";
+import { r as useComponentHost, t as createDispatch } from "./host.js";
+import { t as checkedProp } from "./props.js";
+import { n as readBoundControl, r as vBindControl, t as SelectedOptions } from "./control.js";
+import { computed, createElementBlock, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderSlot, unref, watchSyncEffect, withCtx, withDirectives } from "vue";
 //#region .build/vue/UiSelect.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"disabled",
 	"required",
 	"aria-invalid",
+	"data-disabled",
+	"data-invalid",
+	"data-required",
+	"data-size",
+	"data-value",
 	"data-ui-select-state"
 ];
 //#endregion
@@ -16,50 +22,132 @@ var UiSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 	__name: "UiSelect",
 	props: {
 		disabled: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
 		invalid: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
 		required: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
-		size: { default: "md" },
-		value: {},
-		modelValue: {}
+		size: {
+			type: null,
+			default: "md"
+		},
+		value: {
+			type: null,
+			default: null
+		},
+		modelValue: { type: null }
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const checkedProps = computed(() => ({
+			disabled: checkedProp(props["disabled"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "disabled", void 0, void 0),
+			invalid: checkedProp(props["invalid"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "invalid", 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),
+			modelValue: checkedProp(props.modelValue, {
+				kind: "terminal",
+				name: "string"
+			}, false, "modelValue", 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 model = computed({
-			get: () => props.modelValue ?? props.value ?? void 0,
+			get: () => checkedProps.value.modelValue ?? checkedProps.value.value ?? void 0,
 			set: (value) => emit("update:modelValue", value)
 		});
 		const root = ref(null);
+		const hydrationNode = hydrationInstance?.vnode.el;
+		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "select")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-select> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-select> has an incompatible root."
+			})
+		});
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [props.size && `size size=${props.size}`].filter(Boolean).join(" "));
+		const hostState = computed(() => [checkedProps.value.size && "size", checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`].filter(Boolean).join(" "));
 		const dispatch = createDispatch(root);
-		useComponentHost(controllerModule.default, {
+		useComponentHost(() => import("@threadlabs/looma/components/ui-select/ui-select.js"), {
 			root,
 			dispatch,
-			props
+			controllerSource: {
+				specifier: "../components/ui-select/ui-select.js",
+				definition: "./components/ui-select/ui-select.html"
+			},
+			props: checkedProps
 		});
 		return (_ctx, _cache) => {
-			return withDirectives((openBlock(), createElementBlock("select", mergeProps({ "data-component": "ui-select" }, _ctx.$attrs, {
-				disabled: __props.disabled,
-				required: __props.required,
-				"aria-invalid": __props.invalid,
-				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+			return withDirectives((openBlock(), createElementBlock("select", mergeProps({ "data-component": "ui-select" }, nativeAttrs(_ctx.$attrs), {
+				disabled: checkedProps.value.disabled ?? void 0,
+				required: checkedProps.value.required ?? void 0,
+				"aria-invalid": checkedProps.value.invalid ?? void 0,
+				"data-disabled": reflectedProp("disabled", "disabled", checkedProps.value.disabled, void 0, false),
+				"data-invalid": reflectedProp("invalid", "invalid", checkedProps.value.invalid, 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),
+				onChange: _cache[0] || (_cache[0] = ($event) => model.value = unref(readBoundControl)($event.currentTarget)),
 				"data-ui-select-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
-			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)), [[vModelSelect, model.value]]);
+			}), [createVNode(unref(SelectedOptions), {
+				value: model.value,
+				multiple: false,
+				"native-property": false
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+				_: 3
+			}, 8, ["value"])], 16, _hoisted_1)), [[unref(vBindControl), {
+				tag: "select",
+				name: "value",
+				value: model.value,
+				defaultValue: ""
+			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-699dcb22"]]);
+}), [["__scopeId", "data-v-3ed66548"]]);
 //#endregion
 export { UiSelect_default as t };

package/vue/chunks/UiSeparator.js

@@ -1,18 +1,54 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { createElementBlock, defineComponent, mergeProps, openBlock } from "vue";
+import { t as checkedProp } from "./props.js";
+import { computed, createElementBlock, defineComponent, getCurrentInstance, mergeProps, openBlock, watchSyncEffect } from "vue";
 //#region .build/vue/UiSeparator.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["aria-orientation"];
+var _hoisted_1 = ["aria-orientation", "data-orientation"];
 //#endregion
 //#region .build/vue/UiSeparator.vue
 var UiSeparator_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "UiSeparator",
-	props: { orientation: { default: "horizontal" } },
+	props: { orientation: {
+		type: null,
+		default: "horizontal"
+	} },
 	setup(__props) {
+		const props = __props;
+		const checkedProps = computed(() => ({ orientation: checkedProp(props["orientation"], {
+			kind: "terminal",
+			name: "keyword"
+		}, false, "orientation", void 0, ["horizontal", "vertical"]) }));
+		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 !== "hr")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-separator> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-separator> has an incompatible root."
+			})
+		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("hr", mergeProps({ "data-component": "ui-separator" }, _ctx.$attrs, { "aria-orientation": __props.orientation }), null, 16, _hoisted_1);
+			return openBlock(), createElementBlock("hr", mergeProps({ "data-component": "ui-separator" }, nativeAttrs(_ctx.$attrs), {
+				"aria-orientation": checkedProps.value.orientation ?? void 0,
+				"data-orientation": reflectedProp("orientation", "orientation", checkedProps.value.orientation, void 0, false)
+			}), null, 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-d12933d8"]]);
+}), [["__scopeId", "data-v-ffeb7a5b"]]);
 //#endregion
 export { UiSeparator_default as t };

package/vue/chunks/UiSidebar.js

@@ -1,9 +1,20 @@
 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-sidebar/ui-sidebar.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, useTemplateRef, watchSyncEffect } from "vue";
 //#region .build/vue/UiSidebar.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["data-ui-sidebar-state"];
+var _hoisted_1 = [
+	"data-breakpoint",
+	"data-collapsed",
+	"data-max-width",
+	"data-min-width",
+	"data-resizable",
+	"data-resize-label",
+	"data-resize-step",
+	"data-side",
+	"data-width",
+	"data-ui-sidebar-state"
+];
 var _hoisted_2 = { class: "content" };
 var _hoisted_3 = ["aria-label", "hidden"];
 //#endregion
@@ -12,21 +23,42 @@ var UiSidebar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 	inheritAttrs: false,
 	__name: "UiSidebar",
 	props: {
-		breakpoint: { default: "md" },
+		breakpoint: {
+			type: null,
+			default: "md"
+		},
 		collapsed: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
-		maxWidth: { default: 480 },
-		minWidth: { default: 200 },
+		maxWidth: {
+			type: null,
+			default: 480
+		},
+		minWidth: {
+			type: null,
+			default: 200
+		},
 		resizable: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
-		resizeLabel: { default: "Resize sidebar" },
-		resizeStep: { default: 16 },
-		side: { default: "start" },
-		width: { default: 0 }
+		resizeLabel: {
+			type: null,
+			default: "Resize sidebar"
+		},
+		resizeStep: {
+			type: null,
+			default: 16
+		},
+		side: {
+			type: null,
+			default: "start"
+		},
+		width: {
+			type: null,
+			default: 0
+		}
 	},
 	emits: [
 		"update:width",
@@ -35,13 +67,84 @@ var UiSidebar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const checkedProps = computed(() => ({
+			breakpoint: checkedProp(props["breakpoint"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "breakpoint", void 0, [
+				"sm",
+				"md",
+				"lg"
+			]),
+			collapsed: checkedProp(props["collapsed"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "collapsed", void 0, void 0),
+			maxWidth: checkedProp(props["maxWidth"], {
+				kind: "terminal",
+				name: "number"
+			}, false, "maxWidth", void 0, void 0),
+			minWidth: checkedProp(props["minWidth"], {
+				kind: "terminal",
+				name: "number"
+			}, false, "minWidth", void 0, void 0),
+			resizable: checkedProp(props["resizable"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "resizable", void 0, void 0),
+			resizeLabel: checkedProp(props["resizeLabel"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "resizeLabel", void 0, void 0),
+			resizeStep: checkedProp(props["resizeStep"], {
+				kind: "terminal",
+				name: "number"
+			}, false, "resizeStep", void 0, void 0),
+			side: checkedProp(props["side"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "side", void 0, ["start", "end"]),
+			width: checkedProp(props["width"], {
+				kind: "terminal",
+				name: "number"
+			}, false, "width", 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 resizerElement = useTemplateRef("resizer");
 		const internalCollapsed = ref(false);
 		const drawer = ref(false);
+		const hydrationNode = hydrationInstance?.vnode.el;
+		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "aside")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-sidebar> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-sidebar> has an incompatible root."
+			})
+		});
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [props.side && `side side=${props.side}`, internalCollapsed.value && "internalCollapsed"].filter(Boolean).join(" "));
+		const hostState = computed(() => [
+			checkedProps.value.side && "side",
+			checkedProps.value.side != null && `side=${encodeURIComponent(checkedProps.value.side)}`,
+			internalCollapsed.value && "internalCollapsed"
+		].filter(Boolean).join(" "));
 		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",
@@ -55,10 +158,14 @@ var UiSidebar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			},
 			modeled: ["width"]
 		});
-		useComponentHost(controllerModule.default, {
+		useComponentHost(() => import("@threadlabs/looma/components/ui-sidebar/ui-sidebar.js"), {
 			root,
 			dispatch,
-			props,
+			controllerSource: {
+				specifier: "../components/ui-sidebar/ui-sidebar.js",
+				definition: "./components/ui-sidebar/ui-sidebar.html"
+			},
+			props: checkedProps,
 			refs: { resizer: resizerElement },
 			state: {
 				internalCollapsed,
@@ -66,7 +173,16 @@ var UiSidebar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			}
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("aside", mergeProps({ "data-component": "ui-sidebar" }, _ctx.$attrs, {
+			return openBlock(), createElementBlock("aside", mergeProps({ "data-component": "ui-sidebar" }, nativeAttrs(_ctx.$attrs), {
+				"data-breakpoint": reflectedProp("breakpoint", "breakpoint", checkedProps.value.breakpoint, void 0, false),
+				"data-collapsed": reflectedProp("collapsed", "collapsed", checkedProps.value.collapsed, void 0, false),
+				"data-max-width": reflectedProp("maxWidth", "max-width", checkedProps.value.maxWidth, void 0, false),
+				"data-min-width": reflectedProp("minWidth", "min-width", checkedProps.value.minWidth, void 0, false),
+				"data-resizable": reflectedProp("resizable", "resizable", checkedProps.value.resizable, void 0, false),
+				"data-resize-label": reflectedProp("resizeLabel", "resize-label", checkedProps.value.resizeLabel, void 0, false),
+				"data-resize-step": reflectedProp("resizeStep", "resize-step", checkedProps.value.resizeStep, void 0, false),
+				"data-side": reflectedProp("side", "side", checkedProps.value.side, void 0, false),
+				"data-width": reflectedProp("width", "width", checkedProps.value.width, void 0, false),
 				"data-ui-sidebar-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
@@ -76,8 +192,8 @@ var UiSidebar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 				"aria-orientation": "vertical",
 				tabindex: "0",
 				"data-ui-affordance": "resize",
-				"aria-label": __props.resizeLabel,
-				hidden: !__props.resizable || drawer.value || internalCollapsed.value,
+				"aria-label": checkedProps.value.resizeLabel ?? void 0,
+				hidden: !checkedProps.value.resizable || drawer.value || internalCollapsed.value,
 				ref: "resizer"
 			}, [..._cache[0] || (_cache[0] = [createElementVNode("span", {
 				class: "guide",
@@ -85,6 +201,6 @@ var UiSidebar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			}, null, -1)])], 8, _hoisted_3)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-5707dc88"]]);
+}), [["__scopeId", "data-v-eeb834e1"]]);
 //#endregion
 export { UiSidebar_default as t };