@threadlabs/looma 0.5.1 → 0.6.0-rc.1

package/vue/chunks/UiCombobox.js

@@ -1,17 +1,21 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as UiBadge_default } from "./UiBadge.js";
 import { t as UiTooltip_default } from "./UiTooltip.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, shallowRef, toDisplayString, watchEffect, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, shallowRef, toDisplayString, useTemplateRef, watchEffect, withCtx } from "vue";
 import * as controllerModule from "@threadlabs/looma/components/ui-combobox/ui-combobox.js";
 //#region .build/vue/UiCombobox.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-ui-combobox-state"];
 var _hoisted_2 = ["for"];
-var _hoisted_3 = [
+var _hoisted_3 = {
+	class: "field",
+	ref: "field"
+};
+var _hoisted_4 = [
 	"data-index",
 	"disabled",
 	"aria-label"
 ];
-var _hoisted_4 = [
+var _hoisted_5 = [
 	"id",
 	"aria-controls",
 	"aria-expanded",
@@ -24,44 +28,50 @@ var _hoisted_4 = [
 	"readonly",
 	"required"
 ];
-var _hoisted_5 = {
+var _hoisted_6 = {
 	key: 1,
 	type: "button",
 	"data-combobox-action": "clear",
 	"aria-label": "Clear"
 };
-var _hoisted_6 = ["id", "disabled"];
-var _hoisted_7 = ["aria-controls"];
-var _hoisted_8 = ["hidden"];
-var _hoisted_9 = [
+var _hoisted_7 = ["id", "disabled"];
+var _hoisted_8 = ["aria-controls"];
+var _hoisted_9 = ["hidden"];
+var _hoisted_10 = [
 	"id",
 	"aria-label",
 	"aria-busy"
 ];
-var _hoisted_10 = ["role", "aria-label"];
-var _hoisted_11 = {
+var _hoisted_11 = ["role", "aria-label"];
+var _hoisted_12 = {
 	key: 0,
 	class: "group"
 };
-var _hoisted_12 = [
+var _hoisted_13 = [
 	"id",
 	"aria-selected",
 	"aria-disabled",
 	"data-index"
 ];
-var _hoisted_13 = { class: "primary" };
-var _hoisted_14 = ["id", "data-index"];
-var _hoisted_15 = {
+var _hoisted_14 = { class: "primary" };
+var _hoisted_15 = ["id", "data-index"];
+var _hoisted_16 = {
 	key: 1,
 	class: "message"
 };
-var _hoisted_16 = ["id", "hidden"];
-var _hoisted_17 = {
+var _hoisted_17 = ["id", "hidden"];
+var _hoisted_18 = {
 	class: "sr-only",
 	role: "status",
 	"aria-live": "polite",
 	"aria-atomic": "true"
 };
+var _hoisted_19 = {
+	class: "authored-options",
+	hidden: "",
+	"aria-hidden": "true",
+	ref: "options"
+};
 //#endregion
 //#region .build/vue/UiCombobox.vue
 var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -69,23 +79,23 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 	__name: "UiCombobox",
 	props: {
 		allowCreate: {
-			type: [Boolean, null],
+			type: Boolean,
 			default: false
 		},
 		allowFreeText: {
-			type: [Boolean, null],
+			type: Boolean,
 			default: false
 		},
 		clearable: {
-			type: [Boolean, null],
+			type: Boolean,
 			default: false
 		},
 		disabled: {
-			type: [Boolean, null],
+			type: Boolean,
 			default: false
 		},
 		disclosure: {
-			type: [Boolean, null],
+			type: Boolean,
 			default: false
 		},
 		help: { default: "" },
@@ -93,18 +103,18 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		label: { default: "" },
 		labelVisibility: { default: "visible" },
 		multiple: {
-			type: [Boolean, null],
+			type: Boolean,
 			default: false
 		},
 		name: { default: "" },
 		placeholder: { default: "" },
 		query: {},
 		readonly: {
-			type: [Boolean, null],
+			type: Boolean,
 			default: false
 		},
 		required: {
-			type: [Boolean, null],
+			type: Boolean,
 			default: false
 		},
 		size: { default: "md" },
@@ -112,6 +122,8 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		value: {}
 	},
 	emits: [
+		"update:query",
+		"update:value",
 		"query-change",
 		"value-change",
 		"free-entry",
@@ -123,134 +135,90 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		"create-item"
 	],
 	setup(__props, { expose: __expose, emit: __emit }) {
-		const hn = {
-			t: (v) => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false),
-			n: (v) => typeof v === "number" && v === v ? v : void 0,
-			op: (op, a, b) => {
-				const x = hn.n(a), y = hn.n(b);
-				if (x === void 0 || y === void 0) return void 0;
-				switch (op) {
-					case "<": return x < y;
-					case "<=": return x <= y;
-					case ">": return x > y;
-					case ">=": return x >= y;
-					case "+": return x + y;
-					case "-": return x - y;
-					case "*": return x * y;
-					case "/": return x / y;
-					case "%": return x % y;
-				}
-			},
-			text: (v) => v === void 0 || v === null ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? "" : String(v),
-			attr: (v) => v === void 0 || v === null || v === false ? void 0 : v === true ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? void 0 : String(v),
-			enumerated: (v) => typeof v === "boolean" ? String(v) : hn.attr(v),
-			call: (fn, ...args) => {
-				if (fn === "format") {
-					let index = 1;
-					return typeof args[0] === "string" ? args[0].replace(/%s/g, () => index < args.length ? hn.text(args[index++]) : "%s") : void 0;
-				}
-				const n = args.map(hn.n);
-				if (n.some((value) => value === void 0)) return void 0;
-				const v = n;
-				switch (fn) {
-					case "abs": return v.length === 1 ? Math.abs(v[0]) : void 0;
-					case "round": return v.length === 1 ? Math.round(v[0]) : void 0;
-					case "min": return v.length > 0 ? Math.min(...v) : void 0;
-					case "max": return v.length > 0 ? Math.max(...v) : void 0;
-					case "clamp": return v.length === 3 ? Math.min(Math.max(v[0], v[1]), v[2]) : void 0;
-				}
-			},
-			shape: (items, where, sort, limit) => {
-				let list = Array.isArray(items) ? items.slice() : [];
-				if (where !== void 0) list = list.filter((item) => hn.t(where(item)));
-				if (sort.length > 0) {
-					const field = (item, path) => item !== null && typeof item === "object" && !Array.isArray(item) ? path.split(".").reduce((value, key) => value?.[key], item) : item;
-					const compare = (a, b) => typeof a === "number" && typeof b === "number" ? a - b : hn.text(a).localeCompare(hn.text(b));
-					list.sort((a, b) => {
-						for (const key of sort) {
-							const descending = key.startsWith("-");
-							const order = compare(field(a, descending ? key.slice(1) : key), field(b, descending ? key.slice(1) : key));
-							if (order !== 0) return descending ? -order : order;
-						}
-						return 0;
-					});
-				}
-				return typeof limit === "number" ? list.slice(0, Math.max(0, Math.trunc(limit))) : list;
-			}
-		};
 		const props = __props;
 		const emit = __emit;
 		const root = ref(null);
-		const refs = {};
-		const state_raw = ref("");
-		const state_display = ref("");
-		const state_selected = ref(null);
-		const state_expanded = ref(false);
-		const state_rows = ref([]);
-		const state_active = ref(hn.op("-", 0, 1));
-		const state_loading = ref(false);
-		const state_helpOpen = ref(false);
-		const state_lookupError = ref("");
-		const state_validation = ref({
-			"status": "pristine",
-			"touched": false,
-			"dirty": false,
-			"issues": []
+		const fieldElement = useTemplateRef("field");
+		const inputElement = useTemplateRef("input");
+		const popupElement = useTemplateRef("popup");
+		const listboxElement = useTemplateRef("listbox");
+		const optionsElement = useTemplateRef("options");
+		const raw = ref("");
+		const display = ref("");
+		const selected = ref(null);
+		const expanded = ref(false);
+		const rows = ref([]);
+		const active = ref(-1);
+		const loading = ref(false);
+		const helpOpen = ref(false);
+		const lookupError = ref("");
+		const validation = ref({
+			status: "pristine",
+			touched: false,
+			dirty: false,
+			issues: []
 		});
-		const state_uid = ref("");
-		const state_groups = ref([]);
-		const state_creatable = ref(false);
-		const state_createIndex = ref(0);
-		const state_message = ref("");
-		const state_statusText = ref("");
-		const state_validationStatus = ref("pristine");
+		const uid = ref("");
+		const groups = ref([]);
+		const creatable = ref(false);
+		const createIndex = ref(0);
+		const message = ref("");
+		const statusText = ref("");
+		const validationStatus = ref("pristine");
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [
+			props.size && `size size=${props.size}`,
+			validationStatus.value && "validationStatus",
+			`validationStatus=${encodeURIComponent(validationStatus.value)}`,
+			props.multiple && "multiple"
+		].filter(Boolean).join(" "));
 		/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
-		const dispatch = (name, detail) => {
+		function dispatch(name, detail) {
 			const declared = {
 				"query-change": {
-					"bubbles": true,
-					"composed": true,
-					"cancelable": false
+					bubbles: true,
+					composed: true,
+					cancelable: false
 				},
 				"value-change": {
-					"bubbles": true,
-					"composed": true,
-					"cancelable": false
+					bubbles: true,
+					composed: true,
+					cancelable: false
 				},
 				"free-entry": {
-					"bubbles": true,
-					"composed": true,
-					"cancelable": false
+					bubbles: true,
+					composed: true,
+					cancelable: false
 				},
 				"create-entry": {
-					"bubbles": true,
-					"composed": true,
-					"cancelable": false
+					bubbles: true,
+					composed: true,
+					cancelable: false
 				},
 				"validation-change": {
-					"bubbles": true,
-					"composed": true,
-					"cancelable": false
+					bubbles: true,
+					composed: true,
+					cancelable: false
 				},
 				"options-change": {
-					"bubbles": true,
-					"composed": true,
-					"cancelable": false
+					bubbles: true,
+					composed: true,
+					cancelable: false
 				},
 				"add-item": {
-					"bubbles": true,
-					"composed": true,
-					"cancelable": false
+					bubbles: true,
+					composed: true,
+					cancelable: false
 				},
 				"remove-item": {
-					"bubbles": true,
-					"composed": true,
-					"cancelable": false
+					bubbles: true,
+					composed: true,
+					cancelable: false
 				},
 				"create-item": {
-					"bubbles": true,
-					"composed": true,
-					"cancelable": false
+					bubbles: true,
+					composed: true,
+					cancelable: false
 				}
 			};
 			const checks = {
@@ -347,112 +315,104 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				"create-item": (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["query"] === "string" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => ["query", "trigger"].includes(key))
 			};
 			if (detail !== void 0 && checks[name] !== void 0 && !checks[name](detail)) throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`);
-			emit(name, detail);
+			const emitEvent = emit;
+			emitEvent(name, detail);
+			if (detail !== null && typeof detail === "object" && "query" in detail) emitEvent("update:query", detail["query"]);
+			if (detail !== null && typeof detail === "object" && "value" in detail) emitEvent("update:value", detail["value"]);
 			return root.value?.dispatchEvent(new CustomEvent(name, {
 				bubbles: true,
 				composed: true,
 				...declared[name],
 				detail
 			})) ?? true;
-		};
-		/** The resolved values the styles' :host-state() rules test. */
-		const hostState = computed(() => [
-			"size",
-			"validationStatus",
-			"multiple"
-		].flatMap((name) => {
-			const value = read(name);
-			const tokens = hn.t(value) ? [name] : [];
-			if (typeof value === "string" || typeof value === "number") tokens.push(`${name}=${encodeURIComponent(String(value))}`);
-			return tokens;
-		}).join(" "));
+		}
 		function read(name) {
-			if (name === "raw") return state_raw.value;
-			if (name === "display") return state_display.value;
-			if (name === "selected") return state_selected.value;
-			if (name === "expanded") return state_expanded.value;
-			if (name === "rows") return state_rows.value;
-			if (name === "active") return state_active.value;
-			if (name === "loading") return state_loading.value;
-			if (name === "helpOpen") return state_helpOpen.value;
-			if (name === "lookupError") return state_lookupError.value;
-			if (name === "validation") return state_validation.value;
-			if (name === "uid") return state_uid.value;
-			if (name === "groups") return state_groups.value;
-			if (name === "creatable") return state_creatable.value;
-			if (name === "createIndex") return state_createIndex.value;
-			if (name === "message") return state_message.value;
-			if (name === "statusText") return state_statusText.value;
-			if (name === "validationStatus") return state_validationStatus.value;
+			if (name === "raw") return raw.value;
+			if (name === "display") return display.value;
+			if (name === "selected") return selected.value;
+			if (name === "expanded") return expanded.value;
+			if (name === "rows") return rows.value;
+			if (name === "active") return active.value;
+			if (name === "loading") return loading.value;
+			if (name === "helpOpen") return helpOpen.value;
+			if (name === "lookupError") return lookupError.value;
+			if (name === "validation") return validation.value;
+			if (name === "uid") return uid.value;
+			if (name === "groups") return groups.value;
+			if (name === "creatable") return creatable.value;
+			if (name === "createIndex") return createIndex.value;
+			if (name === "message") return message.value;
+			if (name === "statusText") return statusText.value;
+			if (name === "validationStatus") return validationStatus.value;
 			return props[name];
 		}
 		function write(name, value) {
 			if (name === "raw") {
-				state_raw.value = value;
+				raw.value = value;
 				return true;
 			}
 			if (name === "display") {
-				state_display.value = value;
+				display.value = value;
 				return true;
 			}
 			if (name === "selected") {
-				state_selected.value = value;
+				selected.value = value;
 				return true;
 			}
 			if (name === "expanded") {
-				state_expanded.value = value;
+				expanded.value = value;
 				return true;
 			}
 			if (name === "rows") {
-				state_rows.value = value;
+				rows.value = value;
 				return true;
 			}
 			if (name === "active") {
-				state_active.value = value;
+				active.value = value;
 				return true;
 			}
 			if (name === "loading") {
-				state_loading.value = value;
+				loading.value = value;
 				return true;
 			}
 			if (name === "helpOpen") {
-				state_helpOpen.value = value;
+				helpOpen.value = value;
 				return true;
 			}
 			if (name === "lookupError") {
-				state_lookupError.value = value;
+				lookupError.value = value;
 				return true;
 			}
 			if (name === "validation") {
-				state_validation.value = value;
+				validation.value = value;
 				return true;
 			}
 			if (name === "uid") {
-				state_uid.value = value;
+				uid.value = value;
 				return true;
 			}
 			if (name === "groups") {
-				state_groups.value = value;
+				groups.value = value;
 				return true;
 			}
 			if (name === "creatable") {
-				state_creatable.value = value;
+				creatable.value = value;
 				return true;
 			}
 			if (name === "createIndex") {
-				state_createIndex.value = value;
+				createIndex.value = value;
 				return true;
 			}
 			if (name === "message") {
-				state_message.value = value;
+				message.value = value;
 				return true;
 			}
 			if (name === "statusText") {
-				state_statusText.value = value;
+				statusText.value = value;
 				return true;
 			}
 			if (name === "validationStatus") {
-				state_validationStatus.value = value;
+				validationStatus.value = value;
 				return true;
 			}
 			throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
@@ -466,7 +426,23 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				get: (_target, name) => typeof name === "string" ? read(name) : void 0,
 				set: (_target, name, value) => typeof name === "string" && write(name, value)
 			}),
-			refs,
+			refs: {
+				get field() {
+					return fieldElement.value;
+				},
+				get input() {
+					return inputElement.value;
+				},
+				get popup() {
+					return popupElement.value;
+				},
+				get listbox() {
+					return listboxElement.value;
+				},
+				get options() {
+					return optionsElement.value;
+				}
+			},
 			elements: new Proxy({}, { get: (_target, name) => {
 				if (typeof name !== "string" || root.value === null) return void 0;
 				return (root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form"))?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? void 0;
@@ -533,50 +509,43 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				ref: root
 			}), [
 				createElementVNode("label", {
-					for: hn.attr(hn.call("format", "%s-input", state_uid.value)),
-					class: normalizeClass({ "sr-only": hn.t(props.labelVisibility === "sr-only") })
-				}, [createTextVNode(toDisplayString(hn.text(props.label)), 1), hn.t(props.required) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(" *")], 64)) : createCommentVNode("v-if", true)], 10, _hoisted_2),
-				createElementVNode("div", {
-					class: "field",
-					ref: (element) => {
-						refs["field"] = element;
-					}
-				}, [
+					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),
+				createElementVNode("div", _hoisted_3, [
 					renderSlot(_ctx.$slots, "start", {}, void 0, true),
-					hn.t(props.multiple) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(hn.shape(props.items, void 0, [], void 0), (item, index) => {
+					__props.multiple ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(__props.items, (item, index) => {
 						return openBlock(), createElementBlock("button", {
-							key: item?.id,
+							key: item.id,
 							class: "item",
 							type: "button",
 							tabindex: "-1",
-							"data-index": hn.attr(index),
-							disabled: hn.attr(hn.t(hn.t(props.disabled) || hn.t(props.readonly)) || hn.t(item?.disabled)),
-							"aria-label": hn.enumerated(hn.call("format", "%s, press Delete or Backspace to remove", item?.label))
-						}, [renderSlot(_ctx.$slots, hn.call("format", "item-%s", item?.id), {}, () => [createVNode(UiBadge_default, null, {
-							default: withCtx(() => [createTextVNode(toDisplayString(hn.text(item?.label)), 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_3);
+						}, 1024)], true)], 8, _hoisted_4);
 					}), 128)) : createCommentVNode("v-if", true),
 					createElementVNode("input", {
 						role: "combobox",
 						"aria-autocomplete": "list",
 						autocomplete: "off",
-						id: hn.attr(hn.call("format", "%s-input", state_uid.value)),
-						"aria-controls": hn.enumerated(hn.call("format", "%s-listbox", state_uid.value)),
-						"aria-expanded": hn.enumerated(state_expanded.value),
-						"aria-invalid": hn.enumerated(state_validationStatus.value === "error"),
-						"aria-busy": hn.enumerated(state_validationStatus.value === "pending"),
-						".value": state_display.value,
-						placeholder: hn.attr(props.placeholder),
-						name: hn.attr(props.name),
-						disabled: hn.attr(props.disabled),
-						readonly: hn.attr(props.readonly),
-						required: hn.attr(props.required),
-						ref: (element) => {
-							refs["input"] = element;
-						}
-					}, null, 40, _hoisted_4),
-					hn.t(props.clearable) ? (openBlock(), createElementBlock("button", _hoisted_5, [..._cache[0] || (_cache[0] = [createElementVNode("svg", {
+						id: `${uid.value}-input`,
+						"aria-controls": `${uid.value}-listbox`,
+						"aria-expanded": expanded.value,
+						"aria-invalid": validationStatus.value === "error",
+						"aria-busy": validationStatus.value === "pending",
+						".value": display.value,
+						placeholder: __props.placeholder,
+						name: __props.name,
+						disabled: __props.disabled,
+						readonly: __props.readonly,
+						required: __props.required,
+						ref: "input"
+					}, null, 40, _hoisted_5),
+					__props.clearable ? (openBlock(), createElementBlock("button", _hoisted_6, [..._cache[0] || (_cache[0] = [createElementVNode("svg", {
 						class: "affordance-icon",
 						"aria-hidden": "true",
 						viewBox: "0 0 24 24",
@@ -585,20 +554,20 @@ 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)])])) : createCommentVNode("v-if", true),
-					hn.t(props.help) ? (openBlock(), createElementBlock("button", {
+					__props.help ? (openBlock(), createElementBlock("button", {
 						key: 2,
 						type: "button",
 						"aria-label": "Help",
-						id: hn.attr(hn.call("format", "%s-help", state_uid.value)),
-						disabled: hn.attr(props.disabled)
-					}, [..._cache[1] || (_cache[1] = [createElementVNode("span", { "aria-hidden": "true" }, "?", -1)])], 8, _hoisted_6)) : createCommentVNode("v-if", true),
-					hn.t(props.disclosure) ? (openBlock(), createElementBlock("button", {
+						id: `${uid.value}-help`,
+						disabled: __props.disabled
+					}, [..._cache[1] || (_cache[1] = [createElementVNode("span", { "aria-hidden": "true" }, "?", -1)])], 8, _hoisted_7)) : createCommentVNode("v-if", true),
+					__props.disclosure ? (openBlock(), createElementBlock("button", {
 						key: 3,
 						type: "button",
 						"data-combobox-action": "disclosure",
 						tabindex: "-1",
 						"aria-label": "Show suggestions",
-						"aria-controls": hn.enumerated(hn.call("format", "%s-listbox", state_uid.value))
+						"aria-controls": `${uid.value}-listbox`
 					}, [..._cache[2] || (_cache[2] = [createElementVNode("svg", {
 						class: "affordance-icon",
 						"aria-hidden": "true",
@@ -608,77 +577,66 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 						"stroke-width": "2.25",
 						"stroke-linecap": "round",
 						"stroke-linejoin": "round"
-					}, [createElementVNode("path", { d: "m6 9 6 6 6-6" })], -1)])], 8, _hoisted_7)) : createCommentVNode("v-if", true)
+					}, [createElementVNode("path", { d: "m6 9 6 6 6-6" })], -1)])], 8, _hoisted_8)) : createCommentVNode("v-if", true)
 				], 512),
-				hn.t(props.help) ? (openBlock(), createBlock(UiTooltip_default, {
+				__props.help ? (openBlock(), createBlock(UiTooltip_default, {
 					key: 0,
-					id: hn.call("format", "%s-help-text", state_uid.value),
-					for: hn.call("format", "%s-help", state_uid.value)
+					id: `${uid.value}-help-text`,
+					for: `${uid.value}-help`
 				}, {
-					default: withCtx(() => [createTextVNode(toDisplayString(hn.text(props.help)), 1)]),
+					default: withCtx(() => [createTextVNode(toDisplayString(__props.help), 1)]),
 					_: 1
 				}, 8, ["id", "for"])) : createCommentVNode("v-if", true),
 				createElementVNode("div", {
 					class: "popup",
-					hidden: hn.attr(!hn.t(state_expanded.value)),
-					ref: (element) => {
-						refs["popup"] = element;
-					}
+					hidden: !expanded.value,
+					ref: "popup"
 				}, [createElementVNode("div", {
 					role: "listbox",
-					id: hn.attr(hn.call("format", "%s-listbox", state_uid.value)),
-					"aria-label": hn.enumerated(hn.call("format", "%s suggestions", props.label)),
-					"aria-busy": hn.enumerated(state_loading.value),
-					ref: (element) => {
-						refs["listbox"] = element;
-					}
+					id: `${uid.value}-listbox`,
+					"aria-label": `${__props.label} suggestions`,
+					"aria-busy": loading.value,
+					ref: "listbox"
 				}, [
-					(openBlock(true), createElementBlock(Fragment, null, renderList(hn.shape(state_groups.value, void 0, [], void 0), (group, index) => {
+					(openBlock(true), createElementBlock(Fragment, null, renderList(groups.value, (group) => {
 						return openBlock(), createElementBlock("div", {
-							key: group?.name,
-							role: hn.attr(group?.role),
-							"aria-label": hn.enumerated(group?.label)
-						}, [hn.t(group?.name) ? (openBlock(), createElementBlock("div", _hoisted_11, toDisplayString(hn.text(group?.name)), 1)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(hn.shape(group?.rows, void 0, [], void 0), (row, index) => {
+							key: group.name,
+							role: group.role,
+							"aria-label": group.label ?? void 0
+						}, [group.name ? (openBlock(), createElementBlock("div", _hoisted_12, toDisplayString(group.name), 1)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(group.rows, (row) => {
 							return openBlock(), createElementBlock("div", {
-								key: row?.id,
-								class: normalizeClass(["option", { "active": hn.t(row?.index === state_active.value) }]),
+								key: row.id,
+								class: normalizeClass(["option", { active: row.index === active.value }]),
 								role: "option",
-								id: hn.attr(hn.call("format", "%s-option-%s", state_uid.value, row?.index)),
-								"aria-selected": hn.enumerated(row?.value === state_selected.value),
-								"aria-disabled": hn.enumerated(row?.disabled),
-								"data-index": hn.attr(row?.index)
-							}, [renderSlot(_ctx.$slots, hn.call("format", "option-%s", row?.id), {}, () => [createElementVNode("span", _hoisted_13, toDisplayString(hn.text(row?.label)), 1)], true)], 10, _hoisted_12);
-						}), 128))], 8, _hoisted_10);
+								id: `${uid.value}-option-${row.index}`,
+								"aria-selected": row.value === selected.value,
+								"aria-disabled": row.disabled,
+								"data-index": row.index
+							}, [renderSlot(_ctx.$slots, `option-${row.id}`, {}, () => [createElementVNode("span", _hoisted_14, toDisplayString(row.label), 1)], true)], 10, _hoisted_13);
+						}), 128))], 8, _hoisted_11);
 					}), 128)),
-					hn.t(state_creatable.value) ? (openBlock(), createElementBlock("div", {
+					creatable.value ? (openBlock(), createElementBlock("div", {
 						key: 0,
-						class: normalizeClass(["option", { "active": hn.t(state_createIndex.value === state_active.value) }]),
+						class: normalizeClass(["option", { active: createIndex.value === active.value }]),
 						role: "option",
 						"aria-selected": "false",
-						id: hn.attr(hn.call("format", "%s-option-%s", state_uid.value, state_createIndex.value)),
-						"data-index": hn.attr(state_createIndex.value)
-					}, toDisplayString(hn.text(hn.call("format", "Create “%s”", state_raw.value))), 11, _hoisted_14)) : createCommentVNode("v-if", true),
-					hn.t(state_message.value) ? (openBlock(), createElementBlock("div", _hoisted_15, toDisplayString(hn.text(state_message.value)), 1)) : createCommentVNode("v-if", true)
-				], 8, _hoisted_9), renderSlot(_ctx.$slots, "footer", {}, void 0, true)], 8, _hoisted_8),
+						id: `${uid.value}-option-${createIndex.value}`,
+						"data-index": createIndex.value
+					}, toDisplayString(`Create “${raw.value}”`), 11, _hoisted_15)) : createCommentVNode("v-if", true),
+					message.value ? (openBlock(), createElementBlock("div", _hoisted_16, toDisplayString(message.value), 1)) : createCommentVNode("v-if", true)
+				], 8, _hoisted_10), renderSlot(_ctx.$slots, "footer", {}, void 0, true)], 8, _hoisted_9),
 				createElementVNode("div", {
 					class: "message",
-					id: hn.attr(hn.call("format", "%s-validation", state_uid.value)),
-					hidden: hn.attr(!hn.t((state_validation.value?.issues)?.length))
-				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(hn.shape(state_validation.value?.issues, void 0, [], void 0), (issue, index) => {
-					return openBlock(), createElementBlock("div", { key: index }, toDisplayString(hn.text(issue?.message)), 1);
-				}), 128))], 8, _hoisted_16),
-				createElementVNode("div", _hoisted_17, toDisplayString(hn.text(state_statusText.value)), 1),
-				createElementVNode("div", {
-					class: "authored-options",
-					hidden: "",
-					"aria-hidden": "true",
-					ref: (element) => {
-						refs["options"] = element;
-					}
-				}, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 512)
+					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);
+				}), 128))], 8, _hoisted_17),
+				createElementVNode("div", _hoisted_18, toDisplayString(statusText.value), 1),
+				createElementVNode("div", _hoisted_19, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 512)
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-540c961c"]]);
+}), [["__scopeId", "data-v-147b231f"]]);
 //#endregion
 export { UiCombobox_default as t };