@threadlabs/looma 0.19.1 → 0.21.0

package/vue/chunks/UiListItem.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 } from "vue";
+import { t as checkedProp } from "./props.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, watchSyncEffect } from "vue";
 //#region .build/vue/UiListItem.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["aria-current", "data-ui-list-item-state"];
+var _hoisted_1 = [
+	"aria-current",
+	"data-current",
+	"data-variant",
+	"data-ui-list-item-state"
+];
 var _hoisted_2 = { class: "leading" };
 var _hoisted_3 = { class: "content" };
 var _hoisted_4 = { class: "title" };
@@ -14,18 +20,61 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 	__name: "UiListItem",
 	props: {
 		current: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
-		variant: { default: "row" }
+		variant: {
+			type: null,
+			default: "row"
+		}
 	},
 	setup(__props) {
 		const props = __props;
+		const checkedProps = computed(() => ({
+			current: checkedProp(props["current"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "current", void 0, void 0),
+			variant: checkedProp(props["variant"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "variant", void 0, ["row", "card"])
+		}));
+		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 !== "li")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-list-item> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-list-item> has an incompatible root."
+			})
+		});
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [props.variant && `variant variant=${props.variant}`, props.current && "current"].filter(Boolean).join(" "));
+		const hostState = computed(() => [
+			checkedProps.value.variant && "variant",
+			checkedProps.value.variant != null && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
+			checkedProps.value.current && "current"
+		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("li", mergeProps({ "data-component": "ui-list-item" }, _ctx.$attrs, {
-				"aria-current": __props.current,
+			return openBlock(), createElementBlock("li", mergeProps({ "data-component": "ui-list-item" }, nativeAttrs(_ctx.$attrs), {
+				"aria-current": checkedProps.value.current ?? void 0,
+				"data-current": reflectedProp("current", "current", checkedProps.value.current, void 0, false),
+				"data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
 				"data-ui-list-item-state": hostState.value || void 0
 			}), [
 				createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "leading")]),
@@ -34,6 +83,6 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-3d168104"]]);
+}), [["__scopeId", "data-v-4933b673"]]);
 //#endregion
 export { UiListItem_default as t };

package/vue/chunks/UiListbox.js

@@ -1,15 +1,23 @@
 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 { r as useComponentHost, t as createDispatch } from "./host.js";
+import { t as checkedProp } from "./props.js";
 import { t as UiScrollArea_default } from "./UiScrollArea.js";
-import { Fragment, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, useTemplateRef, withCtx } from "vue";
-import * as controllerModule from "@threadlabs/looma/components/ui-listbox/ui-listbox.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, getCurrentInstance, h, mergeProps, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useTemplateRef, watchSyncEffect, withCtx } from "vue";
 //#region .build/vue/UiListbox.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"tabindex",
 	"aria-multiselectable",
 	"aria-disabled",
 	"aria-required",
-	"aria-invalid"
+	"aria-invalid",
+	"data-disabled",
+	"data-invalid",
+	"data-multiple",
+	"data-name",
+	"data-required",
+	"data-rows",
+	"data-value",
+	"data-values"
 ];
 var _hoisted_2 = [
 	"data-multiple",
@@ -25,10 +33,10 @@ var _hoisted_3 = [
 	"required",
 	"name"
 ];
-var _hoisted_4 = ["name", "value"];
+var _hoisted_4 = ["name", "^value"];
 var _hoisted_5 = [
 	"required",
-	"checked",
+	"^checked",
 	"disabled"
 ];
 //#endregion
@@ -38,25 +46,37 @@ var UiListbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 	__name: "UiListbox",
 	props: {
 		disabled: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
 		invalid: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
 		multiple: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
-		name: { default: "" },
+		name: {
+			type: null,
+			default: ""
+		},
 		required: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
-		rows: { default: 5 },
-		value: {},
-		values: {}
+		rows: {
+			type: null,
+			default: 5
+		},
+		value: {
+			type: null,
+			default: null
+		},
+		values: {
+			type: null,
+			default: null
+		}
 	},
 	emits: [
 		"update:value",
@@ -65,6 +85,84 @@ var UiListbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 	],
 	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),
+			multiple: checkedProp(props["multiple"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "multiple", void 0, void 0),
+			name: checkedProp(props["name"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "name", void 0, void 0),
+			required: checkedProp(props["required"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "required", void 0, void 0),
+			rows: checkedProp(props["rows"], {
+				kind: "terminal",
+				name: "number"
+			}, false, "rows", void 0, void 0),
+			value: checkedProp(props["value"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "value", void 0, void 0),
+			values: checkedProp(props["values"], {
+				kind: "list",
+				item: {
+					kind: "terminal",
+					name: "string"
+				}
+			}, false, "values", 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 KeyedFailure = defineComponent({
+			props: { error: {
+				type: null,
+				required: true
+			} },
+			setup(props) {
+				return () => {
+					throw props.error;
+				};
+			}
+		});
+		const KeyedBoundary = defineComponent({ setup(_props, { slots }) {
+			let last = [];
+			return () => {
+				try {
+					last = slots.default?.() ?? [];
+					return last;
+				} catch (error) {
+					if (!(error instanceof Error) || error.diagnostic?.code !== "HR004") throw error;
+					if (typeof window === "undefined") throw error;
+					return [...last, h(KeyedFailure, { error })];
+				}
+			};
+		} });
+		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 choicesElement = useTemplateRef("choices");
@@ -76,6 +174,29 @@ var UiListbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		const active = ref(-1);
 		const uid = ref("");
 		const validationError = ref(false);
+		let guardedPrevious;
+		const guarded = computed(() => {
+			if (!(validationError.value == null || typeof validationError.value === "boolean")) return guardedPrevious;
+			return guardedPrevious = checkedProps.value.invalid || validationError.value;
+		});
+		let guardedBindingPrevious;
+		const guardedBinding = computed(() => {
+			if (!(hasSelection.value == null || typeof hasSelection.value === "boolean")) return guardedBindingPrevious;
+			return guardedBindingPrevious = checkedProps.value.required && !hasSelection.value && !checkedProps.value.disabled;
+		});
+		let guardedBinding2Previous;
+		const guardedBinding2 = computed(() => {
+			if (!(hasSelection.value == null || typeof hasSelection.value === "boolean")) return guardedBinding2Previous;
+			return guardedBinding2Previous = hasSelection.value ? true : void 0;
+		});
+		const hydrationNode = hydrationInstance?.vnode.el;
+		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "div")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-listbox> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-listbox> has an incompatible root."
+			})
+		});
 		const isChangeDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && (typeof detail["value"] === "string" || detail["value"] === null) && Array.isArray(detail["values"]) && detail["values"].every((item) => typeof item === "string") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer") && Object.keys(detail).every((key) => [
 			"value",
 			"values",
@@ -85,10 +206,14 @@ var UiListbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			checks: { change: isChangeDetail },
 			modeled: ["value", "values"]
 		});
-		useComponentHost(controllerModule.default, {
+		useComponentHost(() => import("@threadlabs/looma/components/ui-listbox/ui-listbox.js"), {
 			root,
 			dispatch,
-			props,
+			controllerSource: {
+				specifier: "../components/ui-listbox/ui-listbox.js",
+				definition: "./components/ui-listbox/ui-listbox.html"
+			},
+			props: checkedProps,
 			refs: {
 				choices: choicesElement,
 				options: optionsElement,
@@ -111,20 +236,51 @@ var UiListbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			if (value === null || value === void 0 || value === false || typeof value === "object" && !Array.isArray(value)) return void 0;
 			return value === true ? "" : text(value);
 		}
+		function uniqueKeys(items, keyOf) {
+			const seen = /* @__PURE__ */ new Set();
+			for (let index = 0; index < items.length; index += 1) {
+				const key = keyOf(items[index], index, {
+					index,
+					first: index === 0,
+					last: index === items.length - 1,
+					count: items.length
+				});
+				if (seen.has(key)) {
+					const message = `A keyed list produced duplicate key \`${text(key)}\`.`;
+					throw Object.assign(/* @__PURE__ */ new Error(`HR004: ${message}`), {
+						name: "HtmlDiagnosticError",
+						diagnostic: Object.freeze({
+							code: "HR004",
+							message
+						})
+					});
+				}
+				seen.add(key);
+			}
+			return items;
+		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
 				"data-component": "ui-listbox",
 				role: "listbox"
-			}, _ctx.$attrs, {
+			}, nativeAttrs(_ctx.$attrs), {
 				tabindex: attribute({
 					true: "-1",
 					false: "0"
-				}[`${__props.disabled}`]),
-				"aria-multiselectable": __props.multiple,
-				"aria-disabled": __props.disabled,
-				"aria-required": __props.required,
-				"aria-invalid": __props.invalid || validationError.value,
-				style: { "--_rows": __props.rows },
+				}[`${checkedProps.value.disabled ?? ""}`]),
+				"aria-multiselectable": checkedProps.value.multiple ?? void 0,
+				"aria-disabled": checkedProps.value.disabled ?? void 0,
+				"aria-required": checkedProps.value.required ?? void 0,
+				"aria-invalid": guarded.value,
+				style: { "--_rows": checkedProps.value.rows ?? 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-multiple": reflectedProp("multiple", "multiple", checkedProps.value.multiple, void 0, false),
+				"data-name": reflectedProp("name", "name", checkedProps.value.name, void 0, false),
+				"data-required": reflectedProp("required", "required", checkedProps.value.required, void 0, false),
+				"data-rows": reflectedProp("rows", "rows", checkedProps.value.rows, void 0, false),
+				"data-value": reflectedProp("value", "value", checkedProps.value.value, void 0, false),
+				"data-values": reflectedProp("values", "values", checkedProps.value.values, void 0, false),
 				ref_key: "root",
 				ref: root
 			}), [
@@ -133,37 +289,40 @@ var UiListbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					ref_key: "choices",
 					ref: choices
 				}, {
-					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(choices.value, (choice) => {
-						return openBlock(), createElementBlock("div", {
-							key: choice.index,
-							class: normalizeClass(["option", { active: choice.index === active.value }]),
-							role: "option",
-							"data-ui-choice-option": "",
-							"data-multiple": __props.multiple ? "" : void 0,
-							id: `${uid.value}-option-${choice.index}`,
-							"data-index": choice.index,
-							"aria-selected": choice.selected,
-							"aria-disabled": choice.disabled
-						}, [createElementVNode("span", null, toDisplayString(choice.label), 1)], 10, _hoisted_2);
-					}), 128))]),
+					default: withCtx(() => [createVNode(unref(KeyedBoundary), null, {
+						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(uniqueKeys(choices.value, (choice, index, loop) => choice.index), (choice) => {
+							return openBlock(), createElementBlock("div", {
+								key: choice.index,
+								class: normalizeClass(["option", { active: choice.index === active.value }]),
+								role: "option",
+								"data-ui-choice-option": "",
+								"data-multiple": checkedProps.value.multiple ? "" : void 0,
+								id: `${uid.value}-option-${choice.index}`,
+								"data-index": choice.index,
+								"aria-selected": choice.selected,
+								"aria-disabled": choice.disabled
+							}, [createElementVNode("span", null, toDisplayString(choice.label), 1)], 10, _hoisted_2);
+						}), 128))]),
+						_: 1
+					})]),
 					_: 1
 				}, 512),
 				createElementVNode("select", {
 					class: "fallback",
 					"aria-label": "Choices",
-					size: __props.rows,
-					multiple: __props.multiple,
-					disabled: __props.disabled,
-					required: __props.required,
-					name: __props.name,
+					size: checkedProps.value.rows ?? void 0,
+					multiple: checkedProps.value.multiple ?? void 0,
+					disabled: checkedProps.value.disabled ?? void 0,
+					required: checkedProps.value.required ?? void 0,
+					name: checkedProps.value.name ?? void 0,
 					ref: "options"
 				}, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 8, _hoisted_3),
-				__props.name && !__props.disabled ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(selection.value, (selected, index) => {
+				checkedProps.value.name && !checkedProps.value.disabled ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(selection.value, (selected, indexLoop) => {
 					return openBlock(), createElementBlock("input", {
-						key: index,
+						key: indexLoop,
 						type: "hidden",
-						name: __props.name,
-						value: selected
+						name: checkedProps.value.name ?? void 0,
+						"^value": selected
 					}, null, 8, _hoisted_4);
 				}), 128)) : createCommentVNode("v-if", true),
 				createElementVNode("input", {
@@ -171,14 +330,14 @@ var UiListbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					type: "checkbox",
 					"aria-hidden": "true",
 					tabindex: "-1",
-					required: __props.required && !hasSelection.value && !__props.disabled,
-					checked: hasSelection.value,
-					disabled: __props.disabled,
+					required: guardedBinding.value,
+					"^checked": guardedBinding2.value,
+					disabled: checkedProps.value.disabled ?? void 0,
 					ref: "validity"
 				}, null, 8, _hoisted_5)
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-db56e4d0"]]);
+}), [["__scopeId", "data-v-46a34212"]]);
 //#endregion
 export { UiListbox_default as t };

package/vue/chunks/UiMenu.js

@@ -1,9 +1,16 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { n as useComponentHost, t as createDispatch } from "./host.js";
-import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, ref, renderSlot } from "vue";
-import * as controllerModule from "@threadlabs/looma/components/ui-menu/ui-menu.js";
+import { r as useComponentHost, t as createDispatch } from "./host.js";
+import { t as checkedProp } from "./props.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderSlot, watchSyncEffect } from "vue";
 //#region .build/vue/UiMenu.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["data-ui-menu-state"];
+var _hoisted_1 = [
+	"data-density",
+	"data-for",
+	"data-inline",
+	"data-open",
+	"data-placement",
+	"data-ui-menu-state"
+];
 var _hoisted_2 = { class: "surface" };
 //#endregion
 //#region .build/vue/UiMenu.vue
@@ -11,17 +18,26 @@ var UiMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 	inheritAttrs: false,
 	__name: "UiMenu",
 	props: {
-		density: { default: "comfortable" },
-		for: { default: "" },
+		density: {
+			type: null,
+			default: "comfortable"
+		},
+		for: {
+			type: null,
+			default: ""
+		},
 		inline: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
 		open: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
-		placement: { default: "bottom-start" }
+		placement: {
+			type: null,
+			default: "bottom-start"
+		}
 	},
 	emits: [
 		"update:open",
@@ -31,14 +47,62 @@ var UiMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const checkedProps = computed(() => ({
+			density: checkedProp(props["density"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "density", void 0, ["comfortable", "compact"]),
+			for: checkedProp(props["for"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "for", void 0, void 0),
+			inline: checkedProp(props["inline"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "inline", void 0, void 0),
+			open: checkedProp(props["open"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "open", void 0, void 0),
+			placement: checkedProp(props["placement"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "placement", 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 internalOpen = ref(false);
+		const hydrationNode = hydrationInstance?.vnode.el;
+		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "div")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-menu> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-menu> has an incompatible root."
+			})
+		});
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [
-			props.density && `density density=${props.density}`,
+			checkedProps.value.density && "density",
+			checkedProps.value.density != null && `density=${encodeURIComponent(checkedProps.value.density)}`,
 			internalOpen.value && "internalOpen",
-			props.inline && "inline"
+			checkedProps.value.inline && "inline"
 		].filter(Boolean).join(" "));
 		const isSelectDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["value"] === "string" && (detail["checked"] === void 0 || typeof detail["checked"] === "boolean") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
 			"value",
@@ -63,10 +127,14 @@ var UiMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			},
 			modeled: ["open"]
 		});
-		useComponentHost(controllerModule.default, {
+		useComponentHost(() => import("@threadlabs/looma/components/ui-menu/ui-menu.js"), {
 			root,
 			dispatch,
-			props,
+			controllerSource: {
+				specifier: "../components/ui-menu/ui-menu.js",
+				definition: "./components/ui-menu/ui-menu.html"
+			},
+			props: checkedProps,
 			state: { internalOpen }
 		});
 		return (_ctx, _cache) => {
@@ -74,13 +142,18 @@ var UiMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				"data-component": "ui-menu",
 				role: "menu",
 				"aria-orientation": "vertical"
-			}, _ctx.$attrs, {
+			}, nativeAttrs(_ctx.$attrs), {
+				"data-density": reflectedProp("density", "density", checkedProps.value.density, void 0, false),
+				"data-for": reflectedProp("for", "for", checkedProps.value.for, void 0, false),
+				"data-inline": reflectedProp("inline", "inline", checkedProps.value.inline, void 0, false),
+				"data-open": reflectedProp("open", "open", checkedProps.value.open, void 0, false),
+				"data-placement": reflectedProp("placement", "placement", checkedProps.value.placement, void 0, false),
 				"data-ui-menu-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
 			}), [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-bdedd263"]]);
+}), [["__scopeId", "data-v-e7589d5b"]]);
 //#endregion
 export { UiMenu_default as t };

package/vue/chunks/UiMenuGroup.js

@@ -1,7 +1,8 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { createCommentVNode, createElementBlock, defineComponent, mergeProps, openBlock, renderSlot, toDisplayString } from "vue";
+import { t as checkedProp } from "./props.js";
+import { computed, createCommentVNode, createElementBlock, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, toDisplayString, watchSyncEffect } from "vue";
 //#region .build/vue/UiMenuGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["aria-label"];
+var _hoisted_1 = ["aria-label", "data-label"];
 var _hoisted_2 = {
 	key: 0,
 	class: "heading"
@@ -11,15 +12,50 @@ var _hoisted_2 = {
 var UiMenuGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "UiMenuGroup",
-	props: { label: { default: "" } },
+	props: { label: {
+		type: null,
+		default: ""
+	} },
 	setup(__props) {
+		const props = __props;
+		const checkedProps = computed(() => ({ label: checkedProp(props["label"], {
+			kind: "terminal",
+			name: "string"
+		}, false, "label", 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 hydrationNode = getCurrentInstance()?.vnode.el;
+		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "div")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-menu-group> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-menu-group> has an incompatible root."
+			})
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
 				"data-component": "ui-menu-group",
 				role: "group"
-			}, _ctx.$attrs, { "aria-label": __props.label }), [__props.label ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(__props.label), 1)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
+			}, nativeAttrs(_ctx.$attrs), {
+				"aria-label": checkedProps.value.label ?? void 0,
+				"data-label": reflectedProp("label", "label", checkedProps.value.label, void 0, false)
+			}), [checkedProps.value.label ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(checkedProps.value.label), 1)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-53e0d9bc"]]);
+}), [["__scopeId", "data-v-f740eea8"]]);
 //#endregion
 export { UiMenuGroup_default as t };