@threadlabs/looma 0.19.1 → 0.21.0

package/vue/chunks/UiCombobox.js

@@ -1,11 +1,37 @@
 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 UiBadge_default } from "./UiBadge.js";
+import { r as vBindControl } from "./control.js";
 import { t as UiTooltip_default } from "./UiTooltip.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, useTemplateRef, withCtx } from "vue";
-import * as controllerModule from "@threadlabs/looma/components/ui-combobox/ui-combobox.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, h, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useTemplateRef, watchSyncEffect, withCtx, withDirectives } from "vue";
 //#region .build/vue/UiCombobox.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["data-ui-combobox-state"];
+var _hoisted_1 = [
+	"data-allow-create",
+	"data-allow-free-text",
+	"data-clearable",
+	"data-disabled",
+	"data-disclosure",
+	"data-filter",
+	"data-help",
+	"data-invalid",
+	"data-items",
+	"data-label",
+	"data-label-visibility",
+	"data-loading",
+	"data-multiple",
+	"data-name",
+	"data-open-on-focus",
+	"data-placeholder",
+	"data-query",
+	"data-readonly",
+	"data-required",
+	"data-selected-values",
+	"data-size",
+	"data-token-separators",
+	"data-value",
+	"data-ui-combobox-state"
+];
 var _hoisted_2 = ["for"];
 var _hoisted_3 = { class: "control" };
 var _hoisted_4 = {
@@ -24,7 +50,6 @@ var _hoisted_7 = [
 	"aria-expanded",
 	"aria-invalid",
 	"aria-busy",
-	".value",
 	"placeholder",
 	"disabled",
 	"readonly",
@@ -32,12 +57,12 @@ var _hoisted_7 = [
 ];
 var _hoisted_8 = [
 	"name",
-	"value",
+	"^value",
 	"disabled"
 ];
 var _hoisted_9 = [
 	"name",
-	"value",
+	"^value",
 	"disabled"
 ];
 var _hoisted_10 = ["disabled"];
@@ -108,61 +133,97 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 	__name: "UiCombobox",
 	props: {
 		allowCreate: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
 		allowFreeText: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
 		clearable: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
 		disabled: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
 		disclosure: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
-		filter: { default: "label" },
-		help: { default: "" },
+		filter: {
+			type: null,
+			default: "label"
+		},
+		help: {
+			type: null,
+			default: ""
+		},
 		invalid: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
-		items: {},
-		label: { default: "" },
-		labelVisibility: { default: "visible" },
+		items: {
+			type: null,
+			default: null
+		},
+		label: {
+			type: null,
+			default: ""
+		},
+		labelVisibility: {
+			type: null,
+			default: "visible"
+		},
 		loading: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
 		multiple: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
-		name: { default: "" },
+		name: {
+			type: null,
+			default: ""
+		},
 		openOnFocus: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
-		placeholder: { default: "" },
-		query: {},
+		placeholder: {
+			type: null,
+			default: ""
+		},
+		query: {
+			type: null,
+			default: null
+		},
 		readonly: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
 		required: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
-		selectedValues: {},
-		size: { default: "md" },
-		tokenSeparators: {},
-		value: {}
+		selectedValues: {
+			type: null,
+			default: null
+		},
+		size: {
+			type: null,
+			default: "md"
+		},
+		tokenSeparators: {
+			type: null,
+			default: null
+		},
+		value: {
+			type: null,
+			default: null
+		}
 	},
 	emits: [
 		"update:query",
@@ -170,6 +231,7 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		"update:value",
 		"query-change",
 		"value-change",
+		"items-change",
 		"free-entry",
 		"create-entry",
 		"validation-change",
@@ -181,6 +243,249 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 	],
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
+		const checkedProps = computed(() => ({
+			allowCreate: checkedProp(props["allowCreate"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "allowCreate", void 0, void 0),
+			allowFreeText: checkedProp(props["allowFreeText"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "allowFreeText", void 0, void 0),
+			clearable: checkedProp(props["clearable"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "clearable", void 0, void 0),
+			disabled: checkedProp(props["disabled"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "disabled", void 0, void 0),
+			disclosure: checkedProp(props["disclosure"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "disclosure", void 0, void 0),
+			filter: checkedProp(props["filter"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "filter", void 0, ["label", "none"]),
+			help: checkedProp(props["help"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "help", void 0, void 0),
+			invalid: checkedProp(props["invalid"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "invalid", void 0, void 0),
+			items: checkedProp(props["items"], {
+				kind: "list",
+				item: {
+					kind: "object",
+					fields: [
+						{
+							name: "id",
+							type: {
+								kind: "terminal",
+								name: "string"
+							},
+							optional: false
+						},
+						{
+							name: "value",
+							type: {
+								kind: "terminal",
+								name: "string"
+							},
+							optional: false
+						},
+						{
+							name: "label",
+							type: {
+								kind: "terminal",
+								name: "string"
+							},
+							optional: false
+						},
+						{
+							name: "group",
+							type: {
+								kind: "terminal",
+								name: "string"
+							},
+							optional: true
+						},
+						{
+							name: "disabled",
+							type: {
+								kind: "terminal",
+								name: "boolean"
+							},
+							optional: true
+						},
+						{
+							name: "description",
+							type: {
+								kind: "terminal",
+								name: "string"
+							},
+							optional: true
+						},
+						{
+							name: "tag",
+							type: {
+								kind: "object",
+								fields: [
+									{
+										name: "label",
+										type: {
+											kind: "terminal",
+											name: "string"
+										},
+										optional: false
+									},
+									{
+										name: "tone",
+										type: {
+											kind: "constrained",
+											base: {
+												kind: "terminal",
+												name: "keyword"
+											},
+											values: [
+												"neutral",
+												"accent",
+												"info",
+												"success",
+												"warning",
+												"danger"
+											]
+										},
+										optional: true
+									},
+									{
+										name: "color",
+										type: {
+											kind: "terminal",
+											name: "string"
+										},
+										optional: true
+									}
+								],
+								open: false
+							},
+							optional: true
+						}
+					],
+					open: false
+				}
+			}, false, "items", void 0, void 0),
+			label: checkedProp(props["label"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "label", void 0, void 0),
+			labelVisibility: checkedProp(props["labelVisibility"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "labelVisibility", void 0, ["visible", "sr-only"]),
+			loading: checkedProp(props["loading"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "loading", 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),
+			openOnFocus: checkedProp(props["openOnFocus"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "openOnFocus", void 0, void 0),
+			placeholder: checkedProp(props["placeholder"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "placeholder", void 0, void 0),
+			query: checkedProp(props["query"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "query", void 0, void 0),
+			readonly: checkedProp(props["readonly"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "readonly", void 0, void 0),
+			required: checkedProp(props["required"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "required", void 0, void 0),
+			selectedValues: checkedProp(props["selectedValues"], {
+				kind: "list",
+				item: {
+					kind: "terminal",
+					name: "string"
+				}
+			}, false, "selectedValues", void 0, void 0),
+			size: checkedProp(props["size"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "size", void 0, [
+				"sm",
+				"md",
+				"lg"
+			]),
+			tokenSeparators: checkedProp(props["tokenSeparators"], {
+				kind: "list",
+				item: {
+					kind: "terminal",
+					name: "string"
+				}
+			}, false, "tokenSeparators", void 0, void 0),
+			value: checkedProp(props["value"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "value", 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 fieldElement = useTemplateRef("field");
@@ -211,13 +516,32 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		const message = ref("");
 		const statusText = ref("");
 		const validationStatus = ref("pristine");
+		let guardedPrevious;
+		const guarded = computed(() => {
+			if (!(internalItems.value?.["0"] == null || typeof internalItems.value?.["0"] === "object" && internalItems.value?.["0"] !== null && !Array.isArray(internalItems.value?.["0"]))) return guardedPrevious;
+			return guardedPrevious = checkedProps.value.required && !(checkedProps.value.multiple && internalItems.value[0]);
+		});
+		let guardedBindingPrevious;
+		const guardedBinding = computed(() => {
+			if (!(selected.value == null || typeof selected.value === "string" || selected.value === null)) return guardedBindingPrevious;
+			return guardedBindingPrevious = checkedProps.value.disabled || checkedProps.value.readonly || !raw.value && (checkedProps.value.multiple || selected.value === null);
+		});
+		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-combobox> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-combobox> has an incompatible root."
+			})
+		});
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [
-			props.size && `size size=${props.size}`,
+			checkedProps.value.size && "size",
+			checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
 			validationStatus.value && "validationStatus",
 			`validationStatus=${encodeURIComponent(validationStatus.value)}`,
-			props.invalid && "invalid",
-			props.multiple && "multiple"
+			checkedProps.value.invalid && "invalid",
+			checkedProps.value.multiple && "multiple"
 		].filter(Boolean).join(" "));
 		const isQueryChangeDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["query"] === "string" && typeof detail["display"] === "string" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
 			"query",
@@ -242,7 +566,8 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			"option",
 			"kind",
 			"trigger"
-		].includes(key)) || Array.isArray(detail) && detail.every((item) => item !== null && typeof item === "object" && !Array.isArray(item) && typeof item["id"] === "string" && typeof item["value"] === "string" && typeof item["label"] === "string" && (item["group"] === void 0 || typeof item["group"] === "string") && (item["disabled"] === void 0 || typeof item["disabled"] === "boolean") && (item["description"] === void 0 || typeof item["description"] === "string") && (item["tag"] === void 0 || item["tag"] !== null && typeof item["tag"] === "object" && !Array.isArray(item["tag"]) && typeof item["tag"]["label"] === "string" && (item["tag"]["tone"] === void 0 || item["tag"]["tone"] === "neutral" || item["tag"]["tone"] === "accent" || item["tag"]["tone"] === "info" || item["tag"]["tone"] === "success" || item["tag"]["tone"] === "warning" || item["tag"]["tone"] === "danger") && (item["tag"]["color"] === void 0 || typeof item["tag"]["color"] === "string") && Object.keys(item["tag"]).every((key) => [
+		].includes(key));
+		const isItemsChangeDetail = (detail) => Array.isArray(detail) && detail.every((item) => item !== null && typeof item === "object" && !Array.isArray(item) && typeof item["id"] === "string" && typeof item["value"] === "string" && typeof item["label"] === "string" && (item["group"] === void 0 || typeof item["group"] === "string") && (item["disabled"] === void 0 || typeof item["disabled"] === "boolean") && (item["description"] === void 0 || typeof item["description"] === "string") && (item["tag"] === void 0 || item["tag"] !== null && typeof item["tag"] === "object" && !Array.isArray(item["tag"]) && typeof item["tag"]["label"] === "string" && (item["tag"]["tone"] === void 0 || item["tag"]["tone"] === "neutral" || item["tag"]["tone"] === "accent" || item["tag"]["tone"] === "info" || item["tag"]["tone"] === "success" || item["tag"]["tone"] === "warning" || item["tag"]["tone"] === "danger") && (item["tag"]["color"] === void 0 || typeof item["tag"]["color"] === "string") && Object.keys(item["tag"]).every((key) => [
 			"label",
 			"tone",
 			"color"
@@ -255,25 +580,6 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			"description",
 			"tag"
 		].includes(key)));
-		const isFreeEntryDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && (typeof detail["value"] === "string" || detail["value"] === null) && typeof detail["query"] === "string" && (detail["option"] !== null && typeof detail["option"] === "object" && !Array.isArray(detail["option"]) && typeof detail["option"]["id"] === "string" && typeof detail["option"]["value"] === "string" && typeof detail["option"]["label"] === "string" && (detail["option"]["group"] === void 0 || typeof detail["option"]["group"] === "string") && (detail["option"]["disabled"] === void 0 || typeof detail["option"]["disabled"] === "boolean") && (detail["option"]["description"] === void 0 || typeof detail["option"]["description"] === "string") && (detail["option"]["tag"] === void 0 || detail["option"]["tag"] !== null && typeof detail["option"]["tag"] === "object" && !Array.isArray(detail["option"]["tag"]) && typeof detail["option"]["tag"]["label"] === "string" && (detail["option"]["tag"]["tone"] === void 0 || detail["option"]["tag"]["tone"] === "neutral" || detail["option"]["tag"]["tone"] === "accent" || detail["option"]["tag"]["tone"] === "info" || detail["option"]["tag"]["tone"] === "success" || detail["option"]["tag"]["tone"] === "warning" || detail["option"]["tag"]["tone"] === "danger") && (detail["option"]["tag"]["color"] === void 0 || typeof detail["option"]["tag"]["color"] === "string") && Object.keys(detail["option"]["tag"]).every((key) => [
-			"label",
-			"tone",
-			"color"
-		].includes(key))) && Object.keys(detail["option"]).every((key) => [
-			"id",
-			"value",
-			"label",
-			"group",
-			"disabled",
-			"description",
-			"tag"
-		].includes(key)) || detail["option"] === null) && (detail["kind"] === "selection" || detail["kind"] === "clear" || detail["kind"] === "free-entry" || detail["kind"] === "create") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
-			"value",
-			"query",
-			"option",
-			"kind",
-			"trigger"
-		].includes(key));
 		const isValidationChangeDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && (detail["status"] === "pristine" || detail["status"] === "pending" || detail["status"] === "valid" || detail["status"] === "warning" || detail["status"] === "error") && typeof detail["touched"] === "boolean" && typeof detail["dirty"] === "boolean" && Array.isArray(detail["issues"]) && detail["issues"].every((item) => item !== null && typeof item === "object" && !Array.isArray(item) && typeof item["message"] === "string" && (item["path"] === void 0 || Array.isArray(item["path"]) && item["path"].every((item) => true)) && (item["severity"] === void 0 || item["severity"] === "error" || item["severity"] === "warning") && Object.keys(item).every((key) => [
 			"message",
 			"path",
@@ -285,19 +591,6 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			"issues",
 			"output"
 		].includes(key));
-		const isOptionsChangeDetail = (detail) => Array.isArray(detail) && detail.every((item) => item !== null && typeof item === "object" && !Array.isArray(item) && typeof item["id"] === "string" && typeof item["value"] === "string" && typeof item["label"] === "string" && (item["group"] === void 0 || typeof item["group"] === "string") && (item["disabled"] === void 0 || typeof item["disabled"] === "boolean") && (item["description"] === void 0 || typeof item["description"] === "string") && (item["tag"] === void 0 || item["tag"] !== null && typeof item["tag"] === "object" && !Array.isArray(item["tag"]) && typeof item["tag"]["label"] === "string" && (item["tag"]["tone"] === void 0 || item["tag"]["tone"] === "neutral" || item["tag"]["tone"] === "accent" || item["tag"]["tone"] === "info" || item["tag"]["tone"] === "success" || item["tag"]["tone"] === "warning" || item["tag"]["tone"] === "danger") && (item["tag"]["color"] === void 0 || typeof item["tag"]["color"] === "string") && Object.keys(item["tag"]).every((key) => [
-			"label",
-			"tone",
-			"color"
-		].includes(key))) && Object.keys(item).every((key) => [
-			"id",
-			"value",
-			"label",
-			"group",
-			"disabled",
-			"description",
-			"tag"
-		].includes(key)));
 		const isAddItemDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && detail["item"] !== null && typeof detail["item"] === "object" && !Array.isArray(detail["item"]) && typeof detail["item"]["id"] === "string" && typeof detail["item"]["value"] === "string" && typeof detail["item"]["label"] === "string" && (detail["item"]["group"] === void 0 || typeof detail["item"]["group"] === "string") && (detail["item"]["disabled"] === void 0 || typeof detail["item"]["disabled"] === "boolean") && (detail["item"]["description"] === void 0 || typeof detail["item"]["description"] === "string") && (detail["item"]["tag"] === void 0 || detail["item"]["tag"] !== null && typeof detail["item"]["tag"] === "object" && !Array.isArray(detail["item"]["tag"]) && typeof detail["item"]["tag"]["label"] === "string" && (detail["item"]["tag"]["tone"] === void 0 || detail["item"]["tag"]["tone"] === "neutral" || detail["item"]["tag"]["tone"] === "accent" || detail["item"]["tag"]["tone"] === "info" || detail["item"]["tag"]["tone"] === "success" || detail["item"]["tag"]["tone"] === "warning" || detail["item"]["tag"]["tone"] === "danger") && (detail["item"]["tag"]["color"] === void 0 || typeof detail["item"]["tag"]["color"] === "string") && Object.keys(detail["item"]["tag"]).every((key) => [
 			"label",
 			"tone",
@@ -321,10 +614,11 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			checks: {
 				"query-change": isQueryChangeDetail,
 				"value-change": isValueChangeDetail,
-				"free-entry": isFreeEntryDetail,
-				"create-entry": isFreeEntryDetail,
+				"items-change": isItemsChangeDetail,
+				"free-entry": isValueChangeDetail,
+				"create-entry": isValueChangeDetail,
 				"validation-change": isValidationChangeDetail,
-				"options-change": isOptionsChangeDetail,
+				"options-change": isItemsChangeDetail,
 				"add-item": isAddItemDetail,
 				"remove-item": isAddItemDetail,
 				"create-item": isCreateItemDetail,
@@ -336,10 +630,14 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				"value"
 			]
 		});
-		const { host, ready } = useComponentHost(controllerModule.default, {
+		const { host, ready } = useComponentHost(() => import("@threadlabs/looma/components/ui-combobox/ui-combobox.js"), {
 			root,
 			dispatch,
-			props,
+			controllerSource: {
+				specifier: "../components/ui-combobox/ui-combobox.js",
+				definition: "./components/ui-combobox/ui-combobox.html"
+			},
+			props: checkedProps,
 			refs: {
 				field: fieldElement,
 				input: inputElement,
@@ -370,80 +668,159 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		});
 		__expose({
 			validate: async (...args) => {
-				await ready();
-				return controllerModule["validate"](host, ...args);
+				const controllerModule = await ready();
+				if (controllerModule === void 0) throw new TypeError("Controller method `validate` is not ready for <ui-combobox>.");
+				const method = Reflect.get(controllerModule, "validate");
+				if (typeof method !== "function") throw Object.assign(/* @__PURE__ */ new Error("HJ003: Controller does not export method `validate`."), {
+					name: "HtmlDiagnosticError",
+					diagnostic: Object.freeze({
+						code: "HJ003",
+						message: "Controller does not export method `validate`."
+					})
+				});
+				return method(host, ...args);
 			},
 			focusInput: async (...args) => {
-				await ready();
-				return controllerModule["focusInput"](host, ...args);
+				const controllerModule = await ready();
+				if (controllerModule === void 0) throw new TypeError("Controller method `focusInput` is not ready for <ui-combobox>.");
+				const method = Reflect.get(controllerModule, "focusInput");
+				if (typeof method !== "function") throw Object.assign(/* @__PURE__ */ new Error("HJ003: Controller does not export method `focusInput`."), {
+					name: "HtmlDiagnosticError",
+					diagnostic: Object.freeze({
+						code: "HJ003",
+						message: "Controller does not export method `focusInput`."
+					})
+				});
+				return method(host, ...args);
 			}
 		});
+		function text(value) {
+			if (Array.isArray(value)) return value.map(text).join(" ");
+			return value === null || value === void 0 || typeof value === "object" ? "" : String(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-combobox" }, _ctx.$attrs, {
+			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-combobox" }, nativeAttrs(_ctx.$attrs), {
+				"data-allow-create": reflectedProp("allowCreate", "allow-create", checkedProps.value.allowCreate, void 0, false),
+				"data-allow-free-text": reflectedProp("allowFreeText", "allow-free-text", checkedProps.value.allowFreeText, void 0, false),
+				"data-clearable": reflectedProp("clearable", "clearable", checkedProps.value.clearable, void 0, false),
+				"data-disabled": reflectedProp("disabled", "disabled", checkedProps.value.disabled, void 0, false),
+				"data-disclosure": reflectedProp("disclosure", "disclosure", checkedProps.value.disclosure, void 0, false),
+				"data-filter": reflectedProp("filter", "filter", checkedProps.value.filter, void 0, false),
+				"data-help": reflectedProp("help", "help", checkedProps.value.help, void 0, false),
+				"data-invalid": reflectedProp("invalid", "invalid", checkedProps.value.invalid, void 0, false),
+				"data-items": reflectedProp("items", "items", checkedProps.value.items, void 0, false),
+				"data-label": reflectedProp("label", "label", checkedProps.value.label, void 0, false),
+				"data-label-visibility": reflectedProp("labelVisibility", "label-visibility", checkedProps.value.labelVisibility, void 0, false),
+				"data-loading": reflectedProp("loading", "loading", checkedProps.value.loading, 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-open-on-focus": reflectedProp("openOnFocus", "open-on-focus", checkedProps.value.openOnFocus, void 0, false),
+				"data-placeholder": reflectedProp("placeholder", "placeholder", checkedProps.value.placeholder, void 0, false),
+				"data-query": reflectedProp("query", "query", checkedProps.value.query, void 0, false),
+				"data-readonly": reflectedProp("readonly", "readonly", checkedProps.value.readonly, void 0, false),
+				"data-required": reflectedProp("required", "required", checkedProps.value.required, void 0, false),
+				"data-selected-values": reflectedProp("selectedValues", "selected-values", checkedProps.value.selectedValues, void 0, false),
+				"data-size": reflectedProp("size", "size", checkedProps.value.size, void 0, false),
+				"data-token-separators": reflectedProp("tokenSeparators", "token-separators", checkedProps.value.tokenSeparators, void 0, false),
+				"data-value": reflectedProp("value", "value", checkedProps.value.value, void 0, false),
 				"data-ui-combobox-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
 			}), [
 				createElementVNode("label", {
 					for: `${uid.value}-input`,
-					class: normalizeClass({ "sr-only": __props.labelVisibility === "sr-only" })
-				}, [createTextVNode(toDisplayString(__props.label) + " ", 1), __props.required ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(" *")], 64)) : createCommentVNode("v-if", true)], 10, _hoisted_2),
+					class: normalizeClass({ "sr-only": checkedProps.value.labelVisibility === "sr-only" })
+				}, [createTextVNode(toDisplayString(checkedProps.value.label) + " ", 1), checkedProps.value.required ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(" *")], 64)) : createCommentVNode("v-if", true)], 10, _hoisted_2),
 				createElementVNode("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [
 					createElementVNode("div", _hoisted_5, [
 						renderSlot(_ctx.$slots, "start", {}, void 0, true),
-						__props.multiple ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(internalItems.value, (item, index) => {
-							return openBlock(), createElementBlock("button", {
-								key: item.id,
-								class: "item",
-								type: "button",
-								tabindex: "-1",
-								"data-index": index,
-								disabled: __props.disabled || __props.readonly || item.disabled,
-								"aria-label": `${item.label}, press Delete or Backspace to remove`
-							}, [renderSlot(_ctx.$slots, `item-${item.id}`, {}, () => [createVNode(UiBadge_default, null, {
-								default: withCtx(() => [createTextVNode(toDisplayString(item.label), 1)]),
-								_: 2
-							}, 1024)], true)], 8, _hoisted_6);
-						}), 128)) : createCommentVNode("v-if", true),
-						createElementVNode("input", {
+						checkedProps.value.multiple ? (openBlock(), createBlock(unref(KeyedBoundary), { key: 0 }, {
+							default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(uniqueKeys(internalItems.value, (item, index, loop) => item.id), (item, index) => {
+								return openBlock(), createElementBlock("button", {
+									key: item.id,
+									class: "item",
+									type: "button",
+									tabindex: "-1",
+									"data-index": index,
+									disabled: checkedProps.value.disabled || checkedProps.value.readonly || item.disabled,
+									"aria-label": `${item.label}, press Delete or Backspace to remove`
+								}, [renderSlot(_ctx.$slots, `item-${item.id}`, {}, () => [createVNode(UiBadge_default, null, {
+									default: withCtx(() => [createTextVNode(toDisplayString(item.label), 1)]),
+									_: 2
+								}, 1024)], true)], 8, _hoisted_6);
+							}), 128))]),
+							_: 3
+						})) : createCommentVNode("v-if", true),
+						withDirectives(createElementVNode("input", {
 							role: "combobox",
 							"aria-autocomplete": "list",
 							autocomplete: "off",
 							id: `${uid.value}-input`,
 							"aria-controls": `${uid.value}-listbox`,
 							"aria-expanded": expanded.value,
-							"aria-invalid": __props.invalid || validationStatus.value === "error",
-							"aria-busy": __props.loading || validationStatus.value === "pending",
-							".value": display.value,
-							placeholder: __props.placeholder,
-							disabled: __props.disabled,
-							readonly: __props.readonly,
-							required: __props.required && !(__props.multiple && internalItems.value[0]),
+							"aria-invalid": checkedProps.value.invalid || validationStatus.value === "error",
+							"aria-busy": checkedProps.value.loading || validationStatus.value === "pending",
+							placeholder: checkedProps.value.placeholder ?? void 0,
+							disabled: checkedProps.value.disabled ?? void 0,
+							readonly: checkedProps.value.readonly ?? void 0,
+							required: guarded.value,
 							ref: "input"
-						}, null, 40, _hoisted_7)
+						}, null, 8, _hoisted_7), [[unref(vBindControl), {
+							tag: "input",
+							name: "value",
+							value: display.value,
+							nativeProperty: true,
+							defaultValue: ""
+						}]])
 					]),
-					__props.name && !__props.multiple ? (openBlock(), createElementBlock("input", {
+					checkedProps.value.name && !checkedProps.value.multiple ? (openBlock(), createElementBlock("input", {
 						key: 0,
 						type: "hidden",
-						name: __props.name,
-						value: submitted.value,
-						disabled: __props.disabled
+						name: checkedProps.value.name ?? void 0,
+						"^value": submitted.value,
+						disabled: checkedProps.value.disabled ?? void 0
 					}, null, 8, _hoisted_8)) : createCommentVNode("v-if", true),
-					__props.name && __props.multiple ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(internalItems.value, (item) => {
-						return openBlock(), createElementBlock("input", {
-							key: item.id,
-							type: "hidden",
-							name: __props.name,
-							value: item.value,
-							disabled: __props.disabled
-						}, null, 8, _hoisted_9);
-					}), 128)) : createCommentVNode("v-if", true),
-					__props.clearable ? (openBlock(), createElementBlock("button", {
+					checkedProps.value.name && checkedProps.value.multiple ? (openBlock(), createBlock(unref(KeyedBoundary), { key: 1 }, {
+						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(uniqueKeys(internalItems.value, (item, index, loop) => item.id), (item) => {
+							return openBlock(), createElementBlock("input", {
+								key: item.id,
+								type: "hidden",
+								name: checkedProps.value.name ?? void 0,
+								"^value": item.value,
+								disabled: checkedProps.value.disabled ?? void 0
+							}, null, 8, _hoisted_9);
+						}), 128))]),
+						_: 1
+					})) : createCommentVNode("v-if", true),
+					checkedProps.value.clearable ? (openBlock(), createElementBlock("button", {
 						key: 2,
 						type: "button",
 						"data-combobox-action": "clear",
 						"aria-label": "Clear",
-						disabled: __props.disabled || __props.readonly || !raw.value && (__props.multiple || selected.value === null)
+						disabled: guardedBinding.value
 					}, [..._cache[0] || (_cache[0] = [createElementVNode("svg", {
 						class: "affordance-icon",
 						"aria-hidden": "true",
@@ -453,14 +830,14 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 						"stroke-width": "2",
 						"stroke-linecap": "round"
 					}, [createElementVNode("path", { d: "M7 7l10 10M17 7 7 17" })], -1)])], 8, _hoisted_10)) : createCommentVNode("v-if", true),
-					__props.disclosure ? (openBlock(), createElementBlock("button", {
+					checkedProps.value.disclosure ? (openBlock(), createElementBlock("button", {
 						key: 3,
 						type: "button",
 						"data-combobox-action": "disclosure",
 						tabindex: "-1",
 						"aria-label": "Show suggestions",
 						"aria-controls": `${uid.value}-listbox`,
-						disabled: __props.disabled || __props.readonly
+						disabled: checkedProps.value.disabled || checkedProps.value.readonly
 					}, [..._cache[1] || (_cache[1] = [createElementVNode("svg", {
 						class: "affordance-icon",
 						"aria-hidden": "true",
@@ -471,13 +848,13 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 						"stroke-linecap": "round",
 						"stroke-linejoin": "round"
 					}, [createElementVNode("path", { d: "m6 9 6 6 6-6" })], -1)])], 8, _hoisted_11)) : createCommentVNode("v-if", true)
-				], 512), __props.help ? (openBlock(), createElementBlock("button", {
+				], 512), checkedProps.value.help ? (openBlock(), createElementBlock("button", {
 					key: 0,
 					class: "help",
 					type: "button",
 					"aria-label": "Help",
 					id: `${uid.value}-help`,
-					disabled: __props.disabled
+					disabled: checkedProps.value.disabled ?? void 0
 				}, [..._cache[2] || (_cache[2] = [createElementVNode("svg", {
 					class: "help-icon",
 					"aria-hidden": "true",
@@ -496,13 +873,13 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 					createElementVNode("path", { d: "M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3" }),
 					createElementVNode("path", { d: "M12 17h.01" })
 				], -1)])], 8, _hoisted_12)) : createCommentVNode("v-if", true)]),
-				__props.help ? (openBlock(), createBlock(UiTooltip_default, {
+				checkedProps.value.help ? (openBlock(), createBlock(UiTooltip_default, {
 					key: 0,
 					trigger: "click",
 					id: `${uid.value}-help-text`,
 					for: `${uid.value}-help`
 				}, {
-					default: withCtx(() => [createTextVNode(toDisplayString(__props.help), 1)]),
+					default: withCtx(() => [createTextVNode(toDisplayString(checkedProps.value.help), 1)]),
 					_: 1
 				}, 8, ["id", "for"])) : createCommentVNode("v-if", true),
 				createElementVNode("div", {
@@ -512,70 +889,76 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				}, [createElementVNode("div", {
 					role: "listbox",
 					id: `${uid.value}-listbox`,
-					"aria-label": `${__props.label} suggestions`,
-					"aria-busy": __props.loading,
+					"aria-label": `${checkedProps.value.label ?? ""} suggestions`,
+					"aria-busy": checkedProps.value.loading ?? void 0,
 					ref: "listbox"
 				}, [
-					(openBlock(true), createElementBlock(Fragment, null, renderList(groups.value, (group) => {
-						return openBlock(), createElementBlock("div", {
-							key: group.name,
-							role: group.role,
-							"aria-label": group.label ?? void 0
-						}, [group.name ? (openBlock(), createElementBlock("div", _hoisted_16, toDisplayString(group.name), 1)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(group.rows, (row) => {
+					createVNode(unref(KeyedBoundary), null, {
+						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(uniqueKeys(groups.value, (group, indexLoop, loop) => group.name), (group) => {
 							return openBlock(), createElementBlock("div", {
-								key: row.id,
-								class: normalizeClass(["option", { active: row.index === active.value }]),
-								role: "option",
-								"data-ui-choice-option": "",
-								"data-multiple": __props.multiple ? "" : void 0,
-								id: `${uid.value}-option-${row.index}`,
-								"aria-selected": row.selected,
-								"aria-disabled": row.disabled,
-								"data-index": row.index,
-								"aria-labelledby": row.labelledBy ?? void 0,
-								"aria-describedby": row.detail ?? void 0
-							}, [renderSlot(_ctx.$slots, `option-${row.id}`, {}, () => [row.detail ? (openBlock(), createElementBlock("span", _hoisted_18, [createElementVNode("span", _hoisted_19, [createElementVNode("span", {
-								class: "primary",
-								id: `${uid.value}-option-${row.index}-label`
-							}, toDisplayString(row.label), 9, _hoisted_20), row.tag ? (openBlock(), createBlock(UiBadge_default, {
-								key: 0,
-								tone: row.tag?.tone,
-								style: normalizeStyle({ "--ui-badge-color": row.tag?.color })
-							}, {
-								default: withCtx(() => [createElementVNode("span", { id: `${uid.value}-option-${row.index}-tag` }, toDisplayString(row.tag?.label), 9, _hoisted_21)]),
+								key: group.name,
+								role: group.role,
+								"aria-label": group.label ?? void 0
+							}, [group.name ? (openBlock(), createElementBlock("div", _hoisted_16, toDisplayString(group.name), 1)) : createCommentVNode("v-if", true), createVNode(unref(KeyedBoundary), null, {
+								default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(uniqueKeys(group.rows, (row, indexLoop2, loop) => row.id), (row) => {
+									return openBlock(), createElementBlock("div", {
+										key: row.id,
+										class: normalizeClass(["option", { active: row.index === active.value }]),
+										role: "option",
+										"data-ui-choice-option": "",
+										"data-multiple": checkedProps.value.multiple ? "" : void 0,
+										id: `${uid.value}-option-${row.index}`,
+										"aria-selected": row.selected,
+										"aria-disabled": row.disabled,
+										"data-index": row.index,
+										"aria-labelledby": row.labelledBy ?? void 0,
+										"aria-describedby": row.detail ?? void 0
+									}, [renderSlot(_ctx.$slots, `option-${row.id}`, {}, () => [row.detail ? (openBlock(), createElementBlock("span", _hoisted_18, [createElementVNode("span", _hoisted_19, [createElementVNode("span", {
+										class: "primary",
+										id: `${uid.value}-option-${row.index}-label`
+									}, toDisplayString(row.label), 9, _hoisted_20), row.tag ? (openBlock(), createBlock(UiBadge_default, {
+										key: 0,
+										tone: row.tag?.tone,
+										style: normalizeStyle({ "--ui-badge-color": row.tag?.color ?? void 0 })
+									}, {
+										default: withCtx(() => [createElementVNode("span", { id: `${uid.value}-option-${row.index}-tag` }, toDisplayString(row.tag?.label), 9, _hoisted_21)]),
+										_: 2
+									}, 1032, ["tone", "style"])) : createCommentVNode("v-if", true)]), row.description ? (openBlock(), createElementBlock("span", {
+										key: 0,
+										class: "description",
+										id: `${uid.value}-option-${row.index}-description`
+									}, toDisplayString(row.description), 9, _hoisted_22)) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true), !row.detail ? (openBlock(), createElementBlock("span", _hoisted_23, toDisplayString(row.label), 1)) : createCommentVNode("v-if", true)], true)], 10, _hoisted_17);
+								}), 128))]),
 								_: 2
-							}, 1032, ["tone", "style"])) : createCommentVNode("v-if", true)]), row.description ? (openBlock(), createElementBlock("span", {
-								key: 0,
-								class: "description",
-								id: `${uid.value}-option-${row.index}-description`
-							}, toDisplayString(row.description), 9, _hoisted_22)) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true), !row.detail ? (openBlock(), createElementBlock("span", _hoisted_23, toDisplayString(row.label), 1)) : createCommentVNode("v-if", true)], true)], 10, _hoisted_17);
-						}), 128))], 8, _hoisted_15);
-					}), 128)),
+							}, 1024)], 8, _hoisted_15);
+						}), 128))]),
+						_: 3
+					}),
 					creatable.value ? (openBlock(), createElementBlock("div", {
 						key: 0,
 						class: normalizeClass(["option", { active: createIndex.value === active.value }]),
 						role: "option",
 						"data-ui-choice-option": "",
 						"aria-selected": "false",
-						"data-multiple": __props.multiple ? "" : void 0,
+						"data-multiple": checkedProps.value.multiple ? "" : void 0,
 						id: `${uid.value}-option-${createIndex.value}`,
 						"data-index": createIndex.value
 					}, toDisplayString(`Create “${raw.value}”`), 11, _hoisted_24)) : createCommentVNode("v-if", true),
 					message.value ? (openBlock(), createElementBlock("div", _hoisted_25, toDisplayString(message.value), 1)) : createCommentVNode("v-if", true),
-					!__props.loading && !rows.value[0] && !creatable.value && !lookupError.value ? (openBlock(), createElementBlock("div", _hoisted_26, [renderSlot(_ctx.$slots, "empty", {}, () => [_cache[3] || (_cache[3] = createTextVNode("No suggestions.", -1))], true)])) : createCommentVNode("v-if", true)
+					!checkedProps.value.loading && !rows.value[0] && !creatable.value && !lookupError.value ? (openBlock(), createElementBlock("div", _hoisted_26, [renderSlot(_ctx.$slots, "empty", {}, () => [_cache[3] || (_cache[3] = createTextVNode("No suggestions.", -1))], true)])) : createCommentVNode("v-if", true)
 				], 8, _hoisted_14), renderSlot(_ctx.$slots, "footer", {}, void 0, true)], 8, _hoisted_13),
 				createElementVNode("div", {
 					class: "message",
 					id: `${uid.value}-validation`,
 					hidden: !validation.value.issues.length
-				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(validation.value.issues, (issue, index) => {
-					return openBlock(), createElementBlock("div", { key: index }, toDisplayString(issue.message), 1);
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(validation.value.issues, (issue, indexLoop3) => {
+					return openBlock(), createElementBlock("div", { key: indexLoop3 }, toDisplayString(issue.message), 1);
 				}), 128))], 8, _hoisted_27),
 				createElementVNode("div", _hoisted_28, toDisplayString(statusText.value), 1),
 				createElementVNode("div", _hoisted_29, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 512)
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-f90db7fa"]]);
+}), [["__scopeId", "data-v-bdf82123"]]);
 //#endregion
 export { UiCombobox_default as t };