@threadlabs/looma 0.4.0 → 0.5.0

package/vue/chunks/UiCombobox.js

@@ -0,0 +1,684 @@
+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 * 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 = [
+	"data-index",
+	"disabled",
+	"aria-label"
+];
+var _hoisted_4 = [
+	"id",
+	"aria-controls",
+	"aria-expanded",
+	"aria-invalid",
+	"aria-busy",
+	".value",
+	"placeholder",
+	"name",
+	"disabled",
+	"readonly",
+	"required"
+];
+var _hoisted_5 = {
+	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 = [
+	"id",
+	"aria-label",
+	"aria-busy"
+];
+var _hoisted_10 = ["role", "aria-label"];
+var _hoisted_11 = {
+	key: 0,
+	class: "group"
+};
+var _hoisted_12 = [
+	"id",
+	"aria-selected",
+	"aria-disabled",
+	"data-index"
+];
+var _hoisted_13 = { class: "primary" };
+var _hoisted_14 = ["id", "data-index"];
+var _hoisted_15 = {
+	key: 1,
+	class: "message"
+};
+var _hoisted_16 = ["id", "hidden"];
+var _hoisted_17 = {
+	class: "sr-only",
+	role: "status",
+	"aria-live": "polite",
+	"aria-atomic": "true"
+};
+//#endregion
+//#region .build/vue/UiCombobox.vue
+var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiCombobox",
+	props: {
+		allowCreate: {
+			type: [Boolean, null],
+			default: false
+		},
+		allowFreeText: {
+			type: [Boolean, null],
+			default: false
+		},
+		clearable: {
+			type: [Boolean, null],
+			default: false
+		},
+		disabled: {
+			type: [Boolean, null],
+			default: false
+		},
+		disclosure: {
+			type: [Boolean, null],
+			default: false
+		},
+		help: { default: "" },
+		items: {},
+		label: { default: "" },
+		labelVisibility: { default: "visible" },
+		multiple: {
+			type: [Boolean, null],
+			default: false
+		},
+		name: { default: "" },
+		placeholder: { default: "" },
+		query: {},
+		readonly: {
+			type: [Boolean, null],
+			default: false
+		},
+		required: {
+			type: [Boolean, null],
+			default: false
+		},
+		size: { default: "md" },
+		tokenSeparators: {},
+		value: {}
+	},
+	emits: [
+		"query-change",
+		"value-change",
+		"free-entry",
+		"create-entry",
+		"validation-change",
+		"options-change",
+		"add-item",
+		"remove-item",
+		"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 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");
+		/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
+		const dispatch = (name, detail) => {
+			const declared = {
+				"query-change": {
+					"bubbles": true,
+					"composed": true,
+					"cancelable": false
+				},
+				"value-change": {
+					"bubbles": true,
+					"composed": true,
+					"cancelable": false
+				},
+				"free-entry": {
+					"bubbles": true,
+					"composed": true,
+					"cancelable": false
+				},
+				"create-entry": {
+					"bubbles": true,
+					"composed": true,
+					"cancelable": false
+				},
+				"validation-change": {
+					"bubbles": true,
+					"composed": true,
+					"cancelable": false
+				},
+				"options-change": {
+					"bubbles": true,
+					"composed": true,
+					"cancelable": false
+				},
+				"add-item": {
+					"bubbles": true,
+					"composed": true,
+					"cancelable": false
+				},
+				"remove-item": {
+					"bubbles": true,
+					"composed": true,
+					"cancelable": false
+				},
+				"create-item": {
+					"bubbles": true,
+					"composed": true,
+					"cancelable": false
+				}
+			};
+			const checks = {
+				"query-change": (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",
+					"display",
+					"trigger"
+				].includes(key)),
+				"value-change": (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") && Object.keys(detail["option"]).every((key) => [
+					"id",
+					"value",
+					"label",
+					"group",
+					"disabled"
+				].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)) || 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") && Object.keys(item).every((key) => [
+					"id",
+					"value",
+					"label",
+					"group",
+					"disabled"
+				].includes(key))),
+				"free-entry": (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") && Object.keys(detail["option"]).every((key) => [
+					"id",
+					"value",
+					"label",
+					"group",
+					"disabled"
+				].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)),
+				"create-entry": (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") && Object.keys(detail["option"]).every((key) => [
+					"id",
+					"value",
+					"label",
+					"group",
+					"disabled"
+				].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)),
+				"validation-change": (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",
+					"severity"
+				].includes(key))) && (detail["output"] === void 0 || true) && Object.keys(detail).every((key) => [
+					"status",
+					"touched",
+					"dirty",
+					"issues",
+					"output"
+				].includes(key)),
+				"options-change": (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") && Object.keys(item).every((key) => [
+					"id",
+					"value",
+					"label",
+					"group",
+					"disabled"
+				].includes(key))),
+				"add-item": (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") && Object.keys(detail["item"]).every((key) => [
+					"id",
+					"value",
+					"label",
+					"group",
+					"disabled"
+				].includes(key)) && Number.isInteger(detail["index"]) && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
+					"item",
+					"index",
+					"trigger"
+				].includes(key)),
+				"remove-item": (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") && Object.keys(detail["item"]).every((key) => [
+					"id",
+					"value",
+					"label",
+					"group",
+					"disabled"
+				].includes(key)) && Number.isInteger(detail["index"]) && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
+					"item",
+					"index",
+					"trigger"
+				].includes(key)),
+				"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);
+			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;
+			return props[name];
+		}
+		function write(name, value) {
+			if (name === "raw") {
+				state_raw.value = value;
+				return true;
+			}
+			if (name === "display") {
+				state_display.value = value;
+				return true;
+			}
+			if (name === "selected") {
+				state_selected.value = value;
+				return true;
+			}
+			if (name === "expanded") {
+				state_expanded.value = value;
+				return true;
+			}
+			if (name === "rows") {
+				state_rows.value = value;
+				return true;
+			}
+			if (name === "active") {
+				state_active.value = value;
+				return true;
+			}
+			if (name === "loading") {
+				state_loading.value = value;
+				return true;
+			}
+			if (name === "helpOpen") {
+				state_helpOpen.value = value;
+				return true;
+			}
+			if (name === "lookupError") {
+				state_lookupError.value = value;
+				return true;
+			}
+			if (name === "validation") {
+				state_validation.value = value;
+				return true;
+			}
+			if (name === "uid") {
+				state_uid.value = value;
+				return true;
+			}
+			if (name === "groups") {
+				state_groups.value = value;
+				return true;
+			}
+			if (name === "creatable") {
+				state_creatable.value = value;
+				return true;
+			}
+			if (name === "createIndex") {
+				state_createIndex.value = value;
+				return true;
+			}
+			if (name === "message") {
+				state_message.value = value;
+				return true;
+			}
+			if (name === "statusText") {
+				state_statusText.value = value;
+				return true;
+			}
+			if (name === "validationStatus") {
+				state_validationStatus.value = value;
+				return true;
+			}
+			throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
+		}
+		const stops = [];
+		const host = {
+			get element() {
+				return root.value;
+			},
+			state: new Proxy({}, {
+				get: (_target, name) => typeof name === "string" ? read(name) : void 0,
+				set: (_target, name, value) => typeof name === "string" && write(name, value)
+			}),
+			refs,
+			elements: new Proxy({}, { get: (_target, name) => {
+				if (typeof name !== "string" || root.value === null) return void 0;
+				return (root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form"))?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? void 0;
+			} }),
+			signal(initialValue) {
+				const value = shallowRef(initialValue);
+				return {
+					get: () => value.value,
+					set: (next) => {
+						if (!Object.is(value.value, next)) value.value = next;
+					},
+					update: (next) => {
+						const updated = next(value.value);
+						if (!Object.is(value.value, updated)) value.value = updated;
+					}
+				};
+			},
+			computed(compute) {
+				const value = computed(compute);
+				return { get: () => value.value };
+			},
+			effect(run) {
+				const stop = watchEffect((onCleanup) => {
+					const cleanup = run();
+					if (typeof cleanup === "function") onCleanup(cleanup);
+				}, { flush: "post" });
+				stops.push(stop);
+				return stop;
+			},
+			on(event, listener) {
+				const element = root.value;
+				element?.addEventListener(event, listener);
+				const off = () => element?.removeEventListener(event, listener);
+				stops.push(off);
+				return off;
+			},
+			dispatch
+		};
+		let cleanup;
+		let ready;
+		onMounted(() => {
+			ready = Promise.resolve(controllerModule.default(host)).then((result) => {
+				cleanup = result;
+			});
+		});
+		onBeforeUnmount(() => {
+			for (const stop of stops.splice(0)) stop();
+			if (typeof cleanup === "function") cleanup();
+		});
+		__expose({
+			validate: async (...args) => {
+				await ready;
+				return controllerModule["validate"](host, ...args);
+			},
+			focusInput: async (...args) => {
+				await ready;
+				return controllerModule["focusInput"](host, ...args);
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-combobox" }, _ctx.$attrs, {
+				"data-ui-combobox-state": hostState.value || void 0,
+				ref_key: "root",
+				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;
+					}
+				}, [
+					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) => {
+						return openBlock(), createElementBlock("button", {
+							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)]),
+							_: 2
+						}, 1024)], true)], 8, _hoisted_3);
+					}), 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", {
+						class: "affordance-icon",
+						"aria-hidden": "true",
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						"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", {
+						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", {
+						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))
+					}, [..._cache[2] || (_cache[2] = [createElementVNode("svg", {
+						class: "affordance-icon",
+						"aria-hidden": "true",
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						"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)
+				], 512),
+				hn.t(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)
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(hn.text(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;
+					}
+				}, [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;
+					}
+				}, [
+					(openBlock(true), createElementBlock(Fragment, null, renderList(hn.shape(state_groups.value, void 0, [], void 0), (group, index) => {
+						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) => {
+							return openBlock(), createElementBlock("div", {
+								key: row?.id,
+								class: normalizeClass(["option", { "active": hn.t(row?.index === state_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);
+					}), 128)),
+					hn.t(state_creatable.value) ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass(["option", { "active": hn.t(state_createIndex.value === state_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),
+				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)
+			], 16, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-540c961c"]]);
+//#endregion
+export { UiCombobox_default as t };