@astryx-vue/core 0.3.0 → 0.4.1

package/dist/MultiSelector-C7NCAtwW.js

@@ -0,0 +1,1456 @@
+import { n as useButtonTooltip } from "./Button-ONOoHdkg.js";
+import { t as _sfc_main$2 } from "./ButtonTooltip-CNKOQHYR.js";
+import { t as useAnnounce } from "./announce-B210eJVf.js";
+import { t as useCombobox } from "./useCombobox-CTo5C-gc.js";
+import { n as useDevWarning } from "./useDevWarning-DznOpOHT.js";
+import { t as useDisclosureHandle } from "./useDisclosureHandle-Df3HhAfC.js";
+import { a as isImeKeyEvent } from "./layerDepth-CNDh-IHb.js";
+import { t as useFieldControlState } from "./useFieldControlState-voICDrys.js";
+import { n as focusElement } from "./focus-l8jVTcqd.js";
+import { n as isKeyboardModality, r as trackInteractionModality } from "./interactionModality-ACpTMhak.js";
+import { t as _sfc_main$3 } from "./Icon-KDnUyY7f.js";
+import { s as useAstryxMessages } from "./context-CM-cjGg_.js";
+import { n as useOverflow } from "./useOverflow-VrwF5oek.js";
+import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
+import { t as _sfc_main$4 } from "./BottomSheet-B4sc3F1S.js";
+import { t as _sfc_main$5 } from "./Spinner-BY8iQz--.js";
+import { t as useIndicator } from "./useIndicator-D9Y0dJsm.js";
+import { t as _sfc_main$6 } from "./Field-JIxT3xCh.js";
+import { n as useInputGroupContext } from "./context-IvbU9c3T.js";
+import { t as useFieldPartStyling } from "./fieldParts--SyRZVQG.js";
+import { n as fieldStatusPlacement, t as normalizeTriggerVariant } from "./triggerVariant-BsL8jMHs.js";
+import { n as _sfc_main$7, t as searchResultMessage } from "./searchResultMessage-DtyScdZs.js";
+import { t as _sfc_main$8 } from "./Token-DhsAtAH6.js";
+import { n as useAnchoredListbox, t as scrollOptionIntoView } from "./useAnchoredListbox-DGxxKHZb.js";
+import { n as OptionAction, r as isOptionAction, t as useOptionActionGrid } from "./useOptionActionGrid-CkJcuvaU.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onMounted, onScopeDispose, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, useAttrs, useId, useSlots, useTemplateRef, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
+import "../styles/layer.css";
+import "../styles/button.css";
+import "../styles/visually-hidden-utility.css";
+import "../styles/multi-selector.css";
+//#region src/MultiSelector/options.ts
+const SELECT_ALL_VALUE = "__astryx_select_all__";
+function isDivider(option) {
+	return typeof option === "object" && option !== null && "type" in option && option.type === "divider";
+}
+function isSection(option) {
+	return typeof option === "object" && option !== null && "type" in option && option.type === "section";
+}
+function normalizeOption(option) {
+	if (typeof option === "string") return {
+		value: option,
+		label: option
+	};
+	return option;
+}
+function matches(option, query) {
+	if (query === "") return true;
+	return option.label.toLowerCase().includes(query) || (option.description?.toLowerCase().includes(query) ?? false);
+}
+/**
+* 把字符串、对象、分隔线和分组收成渲染行。搜索时丢掉对不上的选项和因此变空的分组。
+*/
+function flattenOptions(options, query) {
+	const normalizedQuery = query.trim().toLowerCase();
+	const rows = [];
+	let pendingDivider = false;
+	function pushDivider() {
+		if (!pendingDivider || rows.length === 0) return;
+		rows.push({
+			kind: "divider",
+			key: `divider-${rows.length}`
+		});
+		pendingDivider = false;
+	}
+	function pushOption(option, key) {
+		if (!matches(option, normalizedQuery)) return;
+		pushDivider();
+		rows.push({
+			kind: "option",
+			key,
+			option
+		});
+	}
+	options.forEach((option, index) => {
+		if (typeof option === "string") {
+			pushOption(normalizeOption(option), `option-${option}`);
+			return;
+		}
+		if (isDivider(option)) {
+			pendingDivider = true;
+			return;
+		}
+		if (isSection(option)) {
+			const children = option.options.map(normalizeOption).filter((item) => matches(item, normalizedQuery));
+			if (children.length === 0) return;
+			pendingDivider = rows.length > 0;
+			pushDivider();
+			rows.push({
+				kind: "heading",
+				key: `heading-${option.label}-${index}`,
+				label: option.label
+			});
+			for (const child of children) rows.push({
+				kind: "option",
+				key: `${option.label}-${String(child.value)}`,
+				option: child
+			});
+			return;
+		}
+		pushOption(option, `option-${String(option.value)}`);
+	});
+	return rows;
+}
+//#endregion
+//#region src/MultiSelector/MultiSelectorPanel.vue
+const _hoisted_1$1 = ["data-keyboard-focus"];
+const _hoisted_2$1 = [
+	"id",
+	"aria-label",
+	"aria-controls",
+	"aria-activedescendant",
+	"placeholder",
+	"value"
+];
+const _hoisted_3$1 = ["aria-label"];
+const _hoisted_4$1 = ["id", "data-option-id"];
+const _hoisted_5$1 = { class: "astryx-multi-selector-option-label" };
+const _hoisted_6$1 = ["id", "data-option-id"];
+const _hoisted_7$1 = { class: "astryx-multi-selector-option-label" };
+const _hoisted_8$1 = ["id"];
+const _hoisted_9$1 = [
+	"id",
+	"aria-selected",
+	"data-option-id"
+];
+const _hoisted_10$1 = { class: "astryx-multi-selector-option-label" };
+const _hoisted_11$1 = ["aria-selected"];
+const _hoisted_12$1 = ["id", "data-option-id"];
+const _hoisted_13 = { class: "astryx-multi-selector-option-label" };
+const _hoisted_14 = ["id"];
+const _hoisted_15 = {
+	key: 0,
+	class: "astryx-multi-selector-divider",
+	role: "separator"
+};
+const _hoisted_16 = {
+	key: 1,
+	class: "astryx-multi-selector-heading",
+	role: "presentation"
+};
+const _hoisted_17 = ["aria-label"];
+const _hoisted_18 = { "aria-hidden": "true" };
+const _hoisted_19 = [
+	"id",
+	"aria-selected",
+	"aria-disabled",
+	"data-option-id",
+	"onMouseenter",
+	"onClick"
+];
+const _hoisted_20 = { class: "astryx-multi-selector-option-copy" };
+const _hoisted_21 = { class: "astryx-multi-selector-option-label" };
+const _hoisted_22 = {
+	key: 0,
+	class: "astryx-multi-selector-option-description"
+};
+const _hoisted_23 = ["aria-selected", "aria-disabled"];
+const _hoisted_24 = [
+	"id",
+	"data-option-id",
+	"onMouseenter",
+	"onClick"
+];
+const _hoisted_25 = { class: "astryx-multi-selector-option-copy" };
+const _hoisted_26 = { class: "astryx-multi-selector-option-label" };
+const _hoisted_27 = {
+	key: 0,
+	class: "astryx-multi-selector-option-description"
+};
+const _hoisted_28 = ["id"];
+const _hoisted_29 = {
+	key: 6,
+	class: "astryx-multi-selector-empty",
+	role: "presentation"
+};
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	name: "AstryxMultiSelectorPanel",
+	__name: "MultiSelectorPanel",
+	props: {
+		searchable: { type: Boolean },
+		query: {},
+		searchId: {},
+		searchPlaceholder: {},
+		clearLabel: {},
+		listboxId: {},
+		activeIndex: {},
+		activeDescendant: {},
+		grid: { type: Boolean },
+		actionIndex: {},
+		createOption: {},
+		selectAll: { type: Boolean },
+		selectAllIndex: {},
+		selectAllLabel: {},
+		selectAllState: {},
+		checkboxPosition: {},
+		size: {},
+		loading: { type: Boolean },
+		realMatchCount: {},
+		rows: {},
+		showEmpty: { type: Boolean },
+		emptyText: {},
+		emptySearchText: {},
+		searchKeyboardFocus: { type: Boolean },
+		mark: {},
+		isSelected: { type: Function },
+		checkboxState: { type: Function },
+		optionIndex: { type: Function },
+		optionDomId: { type: Function },
+		actionDomId: { type: Function }
+	},
+	emits: [
+		"query",
+		"keydown",
+		"clearQuery",
+		"searchFocus",
+		"searchBlur",
+		"toggle",
+		"highlight"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const searchRef = useTemplateRef("searchRef");
+		const markSize = computed(() => props.size === "lg" ? "md" : "sm");
+		__expose({
+			focusSearch: () => searchRef.value?.focus(),
+			searchInput: searchRef
+		});
+		function actionOf(option) {
+			return option?.action;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", null, [
+				__props.searchable ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: "astryx-multi-selector-search",
+					"data-keyboard-focus": __props.searchKeyboardFocus ? "true" : void 0
+				}, [
+					createVNode(_sfc_main$3, {
+						class: "astryx-multi-selector-search-icon",
+						icon: "search",
+						size: "sm"
+					}),
+					createElementVNode("input", {
+						id: __props.searchId,
+						ref_key: "searchRef",
+						ref: searchRef,
+						class: "astryx-multi-selector-search-input",
+						type: "text",
+						role: "combobox",
+						autocomplete: "off",
+						"aria-label": __props.searchPlaceholder,
+						"aria-expanded": "true",
+						"aria-controls": __props.listboxId,
+						"aria-autocomplete": "list",
+						"aria-activedescendant": __props.activeDescendant,
+						placeholder: __props.searchPlaceholder,
+						value: __props.query,
+						onInput: _cache[0] || (_cache[0] = ($event) => emit("query", $event)),
+						onFocus: _cache[1] || (_cache[1] = ($event) => emit("searchFocus")),
+						onBlur: _cache[2] || (_cache[2] = ($event) => emit("searchBlur")),
+						onKeydown: _cache[3] || (_cache[3] = ($event) => emit("keydown", $event))
+					}, null, 40, _hoisted_2$1),
+					__props.query ? (openBlock(), createElementBlock("button", {
+						key: 0,
+						type: "button",
+						class: "astryx-multi-selector-search-clear",
+						"aria-label": __props.clearLabel,
+						onClick: _cache[4] || (_cache[4] = withModifiers(($event) => emit("clearQuery"), ["stop"]))
+					}, [createVNode(_sfc_main$3, {
+						icon: "close",
+						size: "sm"
+					})], 8, _hoisted_3$1)) : createCommentVNode("v-if", true)
+				], 8, _hoisted_1$1)) : createCommentVNode("v-if", true),
+				createCommentVNode(" eslint-disable-next-line vue-a11y/click-events-have-key-events, vue-a11y/mouse-events-have-key-events -- 创建行不进 Tab 序，方向键和回车由组合框处理。 "),
+				__props.createOption && !__props.grid ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					id: __props.optionDomId(0),
+					class: normalizeClass(["astryx-multi-selector-option is-create", { "is-active": __props.activeIndex === 0 }]),
+					role: "option",
+					"aria-selected": false,
+					"data-option-id": String(__props.createOption.value),
+					tabindex: "-1",
+					onMousedown: _cache[5] || (_cache[5] = withModifiers(() => {}, ["prevent"])),
+					onMouseenter: _cache[6] || (_cache[6] = ($event) => emit("highlight", 0)),
+					onClick: _cache[7] || (_cache[7] = ($event) => emit("toggle", __props.createOption.value))
+				}, [createElementVNode("span", _hoisted_5$1, toDisplayString(__props.createOption.label), 1)], 42, _hoisted_4$1)) : __props.createOption ? (openBlock(), createElementBlock("div", {
+					key: 2,
+					class: normalizeClass(["astryx-multi-selector-option is-create", { "is-active": __props.activeIndex === 0 }]),
+					role: "row",
+					"aria-selected": false
+				}, [
+					createCommentVNode(" eslint-disable-next-line vue-a11y/click-events-have-key-events, vue-a11y/mouse-events-have-key-events -- 创建行不进 Tab 序，方向键和回车由组合框处理。 "),
+					createElementVNode("div", {
+						id: __props.optionDomId(0),
+						class: "astryx-multi-selector-option-main",
+						role: "gridcell",
+						tabindex: "-1",
+						"data-option-id": String(__props.createOption.value),
+						onMousedown: _cache[8] || (_cache[8] = withModifiers(() => {}, ["prevent"])),
+						onMouseenter: _cache[9] || (_cache[9] = ($event) => emit("highlight", 0)),
+						onClick: _cache[10] || (_cache[10] = ($event) => emit("toggle", __props.createOption.value))
+					}, [createElementVNode("span", _hoisted_7$1, toDisplayString(__props.createOption.label), 1)], 40, _hoisted_6$1),
+					createElementVNode("div", {
+						id: __props.actionDomId(0),
+						class: "astryx-multi-selector-option-action",
+						role: "gridcell"
+					}, null, 8, _hoisted_8$1)
+				], 2)) : createCommentVNode("v-if", true),
+				createCommentVNode(" eslint-disable-next-line vue-a11y/click-events-have-key-events, vue-a11y/mouse-events-have-key-events -- 全选行不进 Tab 序，方向键和空格由组合框处理。 "),
+				__props.selectAll && !__props.loading && __props.realMatchCount > 0 && !__props.grid ? (openBlock(), createElementBlock("div", {
+					key: 3,
+					id: __props.optionDomId(__props.selectAllIndex),
+					class: normalizeClass(["astryx-multi-selector-option is-select-all", { "is-active": __props.activeIndex === __props.selectAllIndex }]),
+					role: "option",
+					"aria-selected": __props.selectAllState === "checked",
+					"data-option-id": unref(SELECT_ALL_VALUE),
+					tabindex: "-1",
+					onMousedown: _cache[11] || (_cache[11] = withModifiers(() => {}, ["prevent"])),
+					onMouseenter: _cache[12] || (_cache[12] = ($event) => emit("highlight", __props.selectAllIndex)),
+					onClick: _cache[13] || (_cache[13] = ($event) => emit("toggle", unref("__astryx_select_all__")))
+				}, [
+					__props.checkboxPosition === "start" ? (openBlock(), createBlock(resolveDynamicComponent(__props.mark), {
+						key: 0,
+						state: __props.selectAllState,
+						size: markSize.value
+					}, null, 8, ["state", "size"])) : createCommentVNode("v-if", true),
+					createElementVNode("span", _hoisted_10$1, toDisplayString(__props.selectAllLabel), 1),
+					__props.checkboxPosition === "end" ? (openBlock(), createBlock(resolveDynamicComponent(__props.mark), {
+						key: 1,
+						state: __props.selectAllState,
+						size: markSize.value
+					}, null, 8, ["state", "size"])) : createCommentVNode("v-if", true)
+				], 42, _hoisted_9$1)) : __props.selectAll && !__props.loading && __props.realMatchCount > 0 ? (openBlock(), createElementBlock("div", {
+					key: 4,
+					class: normalizeClass(["astryx-multi-selector-option is-select-all", { "is-active": __props.activeIndex === __props.selectAllIndex }]),
+					role: "row",
+					"aria-selected": __props.selectAllState === "checked"
+				}, [
+					createCommentVNode(" eslint-disable-next-line vue-a11y/click-events-have-key-events, vue-a11y/mouse-events-have-key-events -- 全选行不进 Tab 序，方向键和空格由组合框处理。 "),
+					createElementVNode("div", {
+						id: __props.optionDomId(__props.selectAllIndex),
+						class: "astryx-multi-selector-option-main",
+						role: "gridcell",
+						tabindex: "-1",
+						"data-option-id": unref(SELECT_ALL_VALUE),
+						onMousedown: _cache[14] || (_cache[14] = withModifiers(() => {}, ["prevent"])),
+						onMouseenter: _cache[15] || (_cache[15] = ($event) => emit("highlight", __props.selectAllIndex)),
+						onClick: _cache[16] || (_cache[16] = ($event) => emit("toggle", unref("__astryx_select_all__")))
+					}, [
+						__props.checkboxPosition === "start" ? (openBlock(), createBlock(resolveDynamicComponent(__props.mark), {
+							key: 0,
+							state: __props.selectAllState,
+							size: markSize.value
+						}, null, 8, ["state", "size"])) : createCommentVNode("v-if", true),
+						createElementVNode("span", _hoisted_13, toDisplayString(__props.selectAllLabel), 1),
+						__props.checkboxPosition === "end" ? (openBlock(), createBlock(resolveDynamicComponent(__props.mark), {
+							key: 1,
+							state: __props.selectAllState,
+							size: markSize.value
+						}, null, 8, ["state", "size"])) : createCommentVNode("v-if", true)
+					], 40, _hoisted_12$1),
+					createElementVNode("div", {
+						id: __props.actionDomId(__props.selectAllIndex),
+						class: "astryx-multi-selector-option-action",
+						role: "gridcell"
+					}, null, 8, _hoisted_14)
+				], 10, _hoisted_11$1)) : createCommentVNode("v-if", true),
+				!__props.loading ? (openBlock(true), createElementBlock(Fragment, { key: 5 }, renderList(__props.rows, (row) => {
+					return openBlock(), createElementBlock(Fragment, { key: row.key }, [row.kind === "divider" ? (openBlock(), createElementBlock("div", _hoisted_15)) : row.kind === "heading" && !__props.grid ? (openBlock(), createElementBlock("div", _hoisted_16, toDisplayString(row.label), 1)) : row.kind === "heading" ? (openBlock(), createElementBlock("div", {
+						key: 2,
+						class: "astryx-multi-selector-heading",
+						role: "rowgroup",
+						"aria-label": row.label
+					}, [createElementVNode("span", _hoisted_18, toDisplayString(row.label), 1)], 8, _hoisted_17)) : row.option && !__props.grid ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [createCommentVNode(" eslint-disable-next-line vue-a11y/click-events-have-key-events, vue-a11y/mouse-events-have-key-events -- 选项不进 Tab 序，方向键和空格由组合框处理。 "), createElementVNode("div", {
+						id: __props.optionDomId(__props.optionIndex(row.option.value)),
+						class: normalizeClass(["astryx-multi-selector-option", {
+							"is-active": __props.optionIndex(row.option.value) === __props.activeIndex,
+							"is-disabled": row.option.disabled
+						}]),
+						role: "option",
+						"aria-selected": __props.isSelected(row.option.value),
+						"aria-disabled": row.option.disabled || void 0,
+						"data-option-id": String(row.option.value),
+						tabindex: "-1",
+						onMousedown: _cache[17] || (_cache[17] = withModifiers(() => {}, ["prevent"])),
+						onMouseenter: ($event) => emit("highlight", __props.optionIndex(row.option.value)),
+						onClick: ($event) => emit("toggle", row.option.value)
+					}, [
+						__props.checkboxPosition === "start" ? (openBlock(), createBlock(resolveDynamicComponent(__props.mark), {
+							key: 0,
+							state: __props.checkboxState(row.option),
+							size: markSize.value,
+							"is-disabled": row.option.disabled
+						}, null, 8, [
+							"state",
+							"size",
+							"is-disabled"
+						])) : createCommentVNode("v-if", true),
+						createElementVNode("span", _hoisted_20, [_ctx.$slots.option ? renderSlot(_ctx.$slots, "option", {
+							option: row.option,
+							selected: __props.isSelected(row.option.value),
+							active: __props.optionIndex(row.option.value) === __props.activeIndex
+						}, void 0, void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("span", _hoisted_21, toDisplayString(row.option.label), 1), row.option.description ? (openBlock(), createElementBlock("span", _hoisted_22, toDisplayString(row.option.description), 1)) : createCommentVNode("v-if", true)], 64))]),
+						__props.checkboxPosition === "end" ? (openBlock(), createBlock(resolveDynamicComponent(__props.mark), {
+							key: 1,
+							state: __props.checkboxState(row.option),
+							size: markSize.value,
+							"is-disabled": row.option.disabled
+						}, null, 8, [
+							"state",
+							"size",
+							"is-disabled"
+						])) : createCommentVNode("v-if", true)
+					], 42, _hoisted_19)], 2112)) : row.option ? (openBlock(), createElementBlock("div", {
+						key: 4,
+						class: normalizeClass(["astryx-multi-selector-option", {
+							"is-active": __props.optionIndex(row.option.value) === __props.activeIndex,
+							"is-disabled": row.option.disabled
+						}]),
+						role: "row",
+						"aria-selected": __props.isSelected(row.option.value),
+						"aria-disabled": row.option.disabled || void 0
+					}, [
+						createCommentVNode(" eslint-disable-next-line vue-a11y/click-events-have-key-events, vue-a11y/mouse-events-have-key-events -- 选项不进 Tab 序，方向键和空格由组合框处理。 "),
+						createElementVNode("div", {
+							id: __props.optionDomId(__props.optionIndex(row.option.value)),
+							class: "astryx-multi-selector-option-main",
+							role: "gridcell",
+							tabindex: "-1",
+							"data-option-id": String(row.option.value),
+							onMousedown: _cache[18] || (_cache[18] = withModifiers(() => {}, ["prevent"])),
+							onMouseenter: ($event) => emit("highlight", __props.optionIndex(row.option.value)),
+							onClick: ($event) => emit("toggle", row.option.value)
+						}, [
+							__props.checkboxPosition === "start" ? (openBlock(), createBlock(resolveDynamicComponent(__props.mark), {
+								key: 0,
+								state: __props.checkboxState(row.option),
+								size: markSize.value,
+								"is-disabled": row.option.disabled
+							}, null, 8, [
+								"state",
+								"size",
+								"is-disabled"
+							])) : createCommentVNode("v-if", true),
+							createElementVNode("span", _hoisted_25, [_ctx.$slots.option ? renderSlot(_ctx.$slots, "option", {
+								option: row.option,
+								selected: __props.isSelected(row.option.value),
+								active: __props.optionIndex(row.option.value) === __props.activeIndex
+							}, void 0, void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("span", _hoisted_26, toDisplayString(row.option.label), 1), row.option.description ? (openBlock(), createElementBlock("span", _hoisted_27, toDisplayString(row.option.description), 1)) : createCommentVNode("v-if", true)], 64))]),
+							__props.checkboxPosition === "end" ? (openBlock(), createBlock(resolveDynamicComponent(__props.mark), {
+								key: 1,
+								state: __props.checkboxState(row.option),
+								size: markSize.value,
+								"is-disabled": row.option.disabled
+							}, null, 8, [
+								"state",
+								"size",
+								"is-disabled"
+							])) : createCommentVNode("v-if", true)
+						], 40, _hoisted_24),
+						createElementVNode("div", {
+							id: unref(isOptionAction)(actionOf(row.option)) ? void 0 : __props.actionDomId(__props.optionIndex(row.option.value)),
+							class: normalizeClass(["astryx-multi-selector-option-action", { "is-active": __props.actionIndex === __props.optionIndex(row.option.value) }]),
+							role: "gridcell",
+							onMousedown: _cache[19] || (_cache[19] = withModifiers(() => {}, ["stop"])),
+							onClick: _cache[20] || (_cache[20] = withModifiers(() => {}, ["stop"]))
+						}, [unref(isOptionAction)(actionOf(row.option)) ? (openBlock(), createBlock(unref(OptionAction), {
+							key: 0,
+							node: actionOf(row.option),
+							"dom-id": __props.actionDomId(__props.optionIndex(row.option.value))
+						}, null, 8, ["node", "dom-id"])) : createCommentVNode("v-if", true)], 42, _hoisted_28)
+					], 10, _hoisted_23)) : createCommentVNode("v-if", true)], 64);
+				}), 128)) : createCommentVNode("v-if", true),
+				__props.showEmpty ? (openBlock(), createElementBlock("div", _hoisted_29, [!__props.query.trim() ? renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(__props.emptyText), 1)], void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(__props.emptySearchText), 1)], 64))])) : createCommentVNode("v-if", true)
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/MultiSelector/createOption.ts
+/** 创建行的值永远不是真实选项。选中它会走创建，而不是切换勾选。 */
+const CREATE_VALUE_PREFIX = "__astryx_multi_selector_create__";
+function createOptionValue(query) {
+	return `${CREATE_VALUE_PREFIX}${query}`;
+}
+function readCreateQuery(value) {
+	if (typeof value !== "string" || !value.startsWith("__astryx_multi_selector_create__")) return null;
+	return value.slice(32);
+}
+/**
+* 输入去掉首尾空白后，和任何选项标签都不相同（忽略大小写）时，返回可以创建的文本。
+* 空字符串、加载中、没开搜索，都不提供创建行。
+*/
+function resolveCreateQuery(input) {
+	if (!input.enabled) return null;
+	const trimmed = input.query.trim();
+	if (trimmed === "") return null;
+	const wanted = trimmed.toLowerCase();
+	return input.labels.some((label) => label.toLowerCase() === wanted) ? null : trimmed;
+}
+//#endregion
+//#region src/MultiSelector/multiSelectorKeyboard.ts
+/** 多选面板的按键。输入法组合期间不处理。调用方要先放行选项操作那一列。 */
+function applyMultiSelectorKey(event, ctx) {
+	if (!ctx.canActivate) return;
+	const searchInput = ctx.searchable && event.target instanceof HTMLInputElement;
+	switch (event.key) {
+		case "ArrowDown":
+			event.preventDefault();
+			if (!ctx.isOpen) ctx.open();
+			else ctx.highlightNext();
+			break;
+		case "ArrowUp":
+			event.preventDefault();
+			if (!ctx.isOpen) {
+				ctx.open();
+				ctx.highlightLast();
+			} else ctx.highlightPrevious();
+			break;
+		case "Home":
+			if (!searchInput && ctx.isOpen) {
+				event.preventDefault();
+				ctx.highlightFirst();
+			}
+			break;
+		case "End":
+			if (!searchInput && ctx.isOpen) {
+				event.preventDefault();
+				ctx.highlightLast();
+			}
+			break;
+		case "PageUp":
+			if (ctx.isOpen) {
+				event.preventDefault();
+				ctx.highlightFirst();
+			}
+			break;
+		case "PageDown":
+			if (ctx.isOpen) {
+				event.preventDefault();
+				ctx.highlightLast();
+			}
+			break;
+		case "Enter":
+		case " ":
+			if (event.key === " " && searchInput) break;
+			event.preventDefault();
+			if (ctx.isOpen && ctx.activeIndex >= 0) {
+				const option = ctx.optionAt(ctx.activeIndex);
+				if (option && !option.disabled) ctx.toggleValue(option.value);
+			} else if (ctx.isOpen && ctx.createQuery != null) ctx.commitCreate(ctx.createQuery);
+			else if (!ctx.isOpen) ctx.open();
+			break;
+		case "Escape":
+			if (ctx.isOpen) {
+				event.preventDefault();
+				ctx.close();
+				ctx.focusTrigger();
+			}
+			break;
+		case "Tab":
+			if (ctx.isOpen) ctx.close();
+			break;
+		case "Backspace":
+		case "Delete":
+			if (!searchInput && !ctx.isOpen && ctx.selectedCount > 0) {
+				event.preventDefault();
+				ctx.clearSelection();
+			}
+			break;
+		default: if (!searchInput && event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+			event.preventDefault();
+			if (!ctx.isOpen) ctx.open();
+			ctx.jumpToMatch(event.key);
+		}
+	}
+}
+//#endregion
+//#region src/MultiSelector/useMultiSelectorMenu.ts
+/** 多选面板的列表、创建行和选项操作。触发器自己的展示留在组件里。 */
+function useMultiSelectorMenu(host) {
+	const query = ref("");
+	const selectedValues = computed(() => host.props.modelValue ?? []);
+	const searchPlaceholder = computed(() => host.props.searchPlaceholder ?? host.messages.value.multiSelector.search);
+	const selectAllLabel = computed(() => host.props.selectAllLabel ?? host.messages.value.multiSelector.selectAll);
+	const emptyText = computed(() => host.props.emptyText ?? host.messages.value.multiSelector.empty);
+	const emptySearchText = computed(() => host.props.emptySearchText ?? host.messages.value.multiSelector.emptySearch);
+	const rows = computed(() => flattenOptions(host.props.options, query.value));
+	const optionByValue = computed(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const row of flattenOptions(host.props.options, "")) if (row.kind === "option" && row.option) map.set(row.option.value, row.option);
+		return map;
+	});
+	const createQuery = computed(() => resolveCreateQuery({
+		enabled: host.props.hasCreate === true && host.props.searchable === true && !host.isLoading.value,
+		query: query.value,
+		labels: [...optionByValue.value.values()].map((option) => option.label)
+	}));
+	const createOption = computed(() => {
+		if (createQuery.value == null) return null;
+		return {
+			value: createOptionValue(createQuery.value),
+			label: host.messages.value.multiSelector.create(createQuery.value)
+		};
+	});
+	const selectable = computed(() => {
+		const items = rows.value.flatMap((row) => row.kind === "option" && row.option ? [row.option] : []);
+		const head = [];
+		if (createOption.value) head.push(createOption.value);
+		if (host.props.selectAll) head.push({
+			value: SELECT_ALL_VALUE,
+			label: selectAllLabel.value
+		});
+		return [...head, ...items];
+	});
+	const comboboxOptions = computed(() => selectable.value.map((option) => ({
+		value: option.value,
+		label: option.label,
+		disabled: option.disabled ?? false,
+		description: option.description
+	})));
+	const dummyValue = ref(null);
+	let openingFromMount = false;
+	const selectAllIndex = computed(() => host.props.selectAll ? createOption.value ? 1 : 0 : -1);
+	const combobox = useCombobox({
+		options: comboboxOptions,
+		modelValue: dummyValue,
+		isEnabled: host.canActivate,
+		isSearchable: ref(false),
+		onChange: () => {},
+		onOpenChange: (isOpen) => {
+			host.emitOpenChange(isOpen);
+			if (isOpen && host.props.searchable && !openingFromMount) nextTick(() => host.getSearchInput()?.focus());
+			if (!isOpen) query.value = "";
+		}
+	});
+	const selectedOptions = computed(() => selectedValues.value.flatMap((value) => {
+		const option = optionByValue.value.get(value);
+		return option ? [option] : [];
+	}));
+	const enabledValues = computed(() => selectable.value.filter((option) => option.value !== "__astryx_select_all__" && readCreateQuery(option.value) == null && !option.disabled).map((option) => option.value));
+	const selectedEnabledCount = computed(() => enabledValues.value.filter((value) => selectedValues.value.includes(value)).length);
+	const selectAllState = computed(() => {
+		if (selectedEnabledCount.value === 0) return "unchecked";
+		if (selectedEnabledCount.value === enabledValues.value.length) return "checked";
+		return "indeterminate";
+	});
+	const realMatchCount = computed(() => rows.value.filter((row) => row.kind === "option").length);
+	const showEmpty = computed(() => !host.isLoading.value && realMatchCount.value === 0 && createOption.value == null);
+	const announcement = computed(() => searchResultMessage({
+		isOpen: combobox.isOpen.value,
+		isLoading: host.isLoading.value,
+		query: query.value,
+		matchCount: realMatchCount.value,
+		hasCreateRow: createOption.value != null,
+		emptyText: emptyText.value,
+		emptySearchText: emptySearchText.value,
+		resultCount: host.messages.value.multiSelector.resultCount
+	}));
+	const gridLatched = ref(false);
+	watch(optionByValue, (map) => {
+		if ([...map.values()].some((option) => isOptionAction(option.action))) gridLatched.value = true;
+	}, { immediate: true });
+	const gridMode = computed(() => gridLatched.value);
+	function optionDomId(index) {
+		return `${host.listboxId}-option-${index}`;
+	}
+	function actionDomId(index) {
+		return `${host.listboxId}-action-${index}`;
+	}
+	function rowHasAction(index) {
+		const option = selectable.value[index];
+		if (option == null) return false;
+		return isOptionAction(optionByValue.value.get(option.value)?.action);
+	}
+	const actionGrid = useOptionActionGrid({
+		enabled: () => gridMode.value,
+		isOpen: () => combobox.isOpen.value,
+		activeIndex: combobox.activeIndex,
+		rowHasAction,
+		getListbox: () => host.listboxRef.value,
+		optionId: optionDomId,
+		actionId: actionDomId
+	});
+	const popupKind = computed(() => {
+		if (host.props.presentation === "bottom-sheet") return "dialog";
+		return gridMode.value ? "grid" : "listbox";
+	});
+	watch(query, (value) => {
+		host.emitSearch(value);
+		if (combobox.isOpen.value) combobox.highlightFirst();
+	});
+	watch(announcement, (message) => {
+		if (message) host.announce(message);
+	});
+	watch(() => [host.props.hasCreate, host.props.searchable], ([create, search]) => {
+		const dev = import.meta.env?.DEV === true;
+		if (create && !search && dev) console.warn("[MultiSelector] hasCreate 需要同时开启 searchable，否则不会出现创建行。");
+	}, { immediate: true });
+	watch(() => combobox.activeIndex.value, (index) => {
+		if (!combobox.isOpen.value || index < 0) return;
+		const option = selectable.value[index];
+		nextTick(() => scrollOptionIntoView(host.listboxRef.value, option ? String(option.value) : void 0));
+	});
+	function commit(next, change) {
+		host.emitUpdate(next);
+		host.emitChange(next, change);
+	}
+	function commitCreate(created) {
+		commit([...selectedValues.value, created], {
+			type: "create",
+			query: created
+		});
+		host.announce(host.messages.value.multiSelector.created(created));
+		query.value = "";
+	}
+	function isSelected(value) {
+		return selectedValues.value.includes(value);
+	}
+	function toggleValue(value) {
+		if (!host.canActivate.value || host.isLoading.value) return;
+		const created = readCreateQuery(value);
+		if (created != null) {
+			commitCreate(created);
+			return;
+		}
+		if (value === "__astryx_select_all__") {
+			const allOn = selectAllState.value === "checked";
+			const enabled = new Set(enabledValues.value);
+			commit(allOn ? selectedValues.value.filter((item) => !enabled.has(item)) : [.../* @__PURE__ */ new Set([...selectedValues.value, ...enabledValues.value])]);
+			return;
+		}
+		if (optionByValue.value.get(value)?.disabled) return;
+		commit(isSelected(value) ? selectedValues.value.filter((item) => item !== value) : [...selectedValues.value, value]);
+	}
+	function optionIndex(value) {
+		return selectable.value.findIndex((option) => option.value === value);
+	}
+	function highlight(index) {
+		const option = selectable.value[index];
+		if (option && !option.disabled) combobox.activeIndex.value = index;
+	}
+	function checkboxState(option) {
+		if (option.value === "__astryx_select_all__") return selectAllState.value;
+		return isSelected(option.value) ? "checked" : "unchecked";
+	}
+	function onKeyDown(event) {
+		if (isImeKeyEvent(event) || event.isComposing) return;
+		if (actionGrid.onKeyDown(event)) return;
+		applyMultiSelectorKey(event, {
+			canActivate: host.canActivate.value,
+			searchable: host.props.searchable === true,
+			isOpen: combobox.isOpen.value,
+			activeIndex: combobox.activeIndex.value,
+			createQuery: createQuery.value,
+			selectedCount: selectedValues.value.length,
+			optionAt: (index) => selectable.value[index],
+			open: () => combobox.open(),
+			close: () => combobox.close(),
+			highlightNext: () => combobox.highlightNext(),
+			highlightPrevious: () => combobox.highlightPrevious(),
+			highlightFirst: () => combobox.highlightFirst(),
+			highlightLast: () => combobox.highlightLast(),
+			jumpToMatch: (char) => combobox.jumpToMatch(char),
+			toggleValue,
+			commitCreate,
+			clearSelection: () => commit([]),
+			focusTrigger: host.focusTrigger
+		});
+	}
+	function openFromMount() {
+		openingFromMount = true;
+		if (host.canActivate.value) combobox.open();
+		openingFromMount = false;
+	}
+	function onSearchInput(event) {
+		query.value = event.target.value;
+	}
+	return {
+		query,
+		combobox,
+		rows,
+		createOption,
+		selectAllIndex,
+		selectAllLabel,
+		selectAllState,
+		selectedValues,
+		selectedOptions,
+		realMatchCount,
+		showEmpty,
+		emptyText,
+		emptySearchText,
+		searchPlaceholder,
+		gridMode,
+		actionGrid,
+		popupKind,
+		optionDomId,
+		optionIndex,
+		isSelected,
+		toggleValue,
+		highlight,
+		checkboxState,
+		commit,
+		onKeyDown,
+		onSearchInput,
+		openFromMount,
+		open: () => {
+			if (host.canActivate.value) combobox.open();
+		},
+		close: () => combobox.close()
+	};
+}
+//#endregion
+//#region src/MultiSelector/MultiSelector.vue
+const _hoisted_1 = ["data-variant"];
+const _hoisted_2 = {
+	key: 0,
+	class: "astryx-multi-selector-icon",
+	"aria-hidden": "true"
+};
+const _hoisted_3 = [
+	"disabled",
+	"aria-disabled",
+	"aria-readonly",
+	"aria-busy",
+	"role",
+	"aria-haspopup",
+	"aria-expanded",
+	"aria-controls",
+	"aria-autocomplete",
+	"aria-activedescendant",
+	"aria-describedby"
+];
+const _hoisted_4 = {
+	key: 0,
+	class: "astryx-multi-selector-placeholder"
+};
+const _hoisted_5 = {
+	key: 1,
+	class: "astryx-multi-selector-value"
+};
+const _hoisted_6 = {
+	key: 2,
+	class: "astryx-multi-selector-value"
+};
+const _hoisted_7 = {
+	key: 0,
+	class: "astryx-multi-selector-more"
+};
+const _hoisted_8 = ["aria-label"];
+const _hoisted_9 = {
+	class: "astryx-multi-selector-more",
+	"data-overflow-indicator": ""
+};
+const _hoisted_10 = [
+	"name",
+	"value",
+	"disabled"
+];
+const _hoisted_11 = { class: "astryx-multi-selector-sheet-title" };
+const _hoisted_12 = [
+	"role",
+	"aria-label",
+	"data-placement"
+];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxMultiSelector",
+	inheritAttrs: false,
+	__name: "MultiSelector",
+	props: {
+		modelValue: { default: () => [] },
+		options: {},
+		label: {},
+		isLabelHidden: { type: Boolean },
+		labelHidden: {
+			type: Boolean,
+			default: false
+		},
+		description: {},
+		placeholder: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		disabledMessage: {},
+		disabledReason: {},
+		status: { default: "default" },
+		statusMessage: {},
+		statusVariant: { default: "attached" },
+		size: { default: "md" },
+		variant: { default: "input" },
+		presentation: { default: "popover" },
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		hasClear: { type: Boolean },
+		isDefaultOpen: { type: Boolean },
+		searchable: {
+			type: Boolean,
+			default: false
+		},
+		searchPlaceholder: {},
+		selectAll: {
+			type: Boolean,
+			default: false
+		},
+		selectAllLabel: {},
+		triggerDisplay: { default: "count" },
+		maxBadges: { default: 3 },
+		checkboxPosition: { default: "start" },
+		required: {
+			type: Boolean,
+			default: false
+		},
+		optional: {
+			type: Boolean,
+			default: false
+		},
+		name: {},
+		width: {},
+		isReadOnly: {
+			type: Boolean,
+			default: false
+		},
+		isLoading: {
+			type: Boolean,
+			default: false
+		},
+		formatValue: {},
+		hasCreate: {
+			type: Boolean,
+			default: false
+		},
+		handleRef: {},
+		emptyText: {},
+		emptySearchText: {},
+		containerClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		containerStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		controlClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		controlStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"search",
+		"openChange",
+		"click",
+		"focus",
+		"keydown"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const attrs = useAttrs();
+		const parts = useFieldPartStyling({
+			component: "MultiSelector",
+			props,
+			attrs,
+			reservedAttrs: [
+				"id",
+				"role",
+				"aria-label",
+				"aria-labelledby",
+				"aria-describedby",
+				"aria-expanded",
+				"aria-controls",
+				"aria-haspopup",
+				"aria-activedescendant",
+				"aria-autocomplete",
+				"aria-disabled",
+				"aria-required",
+				"aria-busy",
+				"aria-readonly"
+			]
+		});
+		const triggerVariant = computed(() => normalizeTriggerVariant(props.variant));
+		const CheckboxMark = useIndicator("checkbox");
+		const messages = useAstryxMessages();
+		const announce = useAnnounce();
+		const inputGroup = useInputGroupContext();
+		const inGroup = computed(() => inputGroup != null);
+		const control = useFieldControlState({
+			disabled: () => props.disabled || (inputGroup?.disabled.value ?? false),
+			readOnly: () => props.isReadOnly,
+			loading: () => props.isLoading
+		});
+		const triggerId = `astryx-multi-selector-${useId()}`;
+		const listboxId = `${triggerId}-listbox`;
+		const searchId = `${triggerId}-search`;
+		const disabledId = `${triggerId}-disabled`;
+		const anchorRef = useTemplateRef("anchorRef");
+		const listboxRef = useTemplateRef("listboxRef");
+		const triggerRef = useTemplateRef("triggerRef");
+		useScrollbars(listboxRef);
+		const readOnlyId = `${triggerId}-readonly`;
+		const disabledTooltipId = `${triggerId}-disabled-tooltip`;
+		/** 旧名 disabledReason 和新名 disabledMessage 等价。 */
+		const resolvedDisabledMessage = computed(() => props.disabledMessage?.trim() || props.disabledReason?.trim());
+		const showsDisabledMessage = computed(() => control.isDisabled.value && !!resolvedDisabledMessage.value);
+		const disabledTooltip = useButtonTooltip(showsDisabledMessage);
+		const hasClear = computed(() => props.hasClear || props.clearable);
+		const hasCustomTrigger = computed(() => slots.trigger != null);
+		const customAnchor = shallowRef(null);
+		const anchor = computed(() => customAnchor.value ?? anchorRef.value);
+		function setCustomTrigger(element) {
+			customAnchor.value = element instanceof HTMLElement ? element : null;
+		}
+		const placeholder = computed(() => props.placeholder ?? messages.value.multiSelector.placeholder);
+		const fieldStatus = computed(() => {
+			if (!props.statusMessage || props.status === "default") return void 0;
+			return {
+				type: props.status,
+				message: props.statusMessage
+			};
+		});
+		const effectiveStatusVariant = computed(() => fieldStatusPlacement(props.variant, props.statusVariant));
+		const statusGlyph = computed(() => {
+			if (props.status === "default" || effectiveStatusVariant.value === "detached") return void 0;
+			return props.status;
+		});
+		const panelRef = useTemplateRef("panelRef");
+		const menu = useMultiSelectorMenu({
+			props,
+			emitUpdate: (value) => emit("update:modelValue", value),
+			emitChange: (value, change) => emit("change", value, change),
+			emitSearch: (value) => emit("search", value),
+			emitOpenChange: (isOpen) => emit("openChange", isOpen),
+			canActivate: control.canActivate,
+			isLoading: control.isLoading,
+			messages,
+			announce,
+			listboxRef,
+			getSearchInput: () => panelRef.value ? panelRef.value.searchInput ?? null : null,
+			focusTrigger: () => {
+				const trigger = triggerRef.value ?? customAnchor.value;
+				if (trigger != null) nextTick(() => focusElement(trigger));
+			},
+			listboxId
+		});
+		const { combobox, selectedValues, selectedOptions } = menu;
+		trackInteractionModality();
+		const searchKeyboardFocus = ref(false);
+		const sheetSlot = useTemplateRef("sheetSlot");
+		const isSheet = computed(() => props.presentation === "bottom-sheet");
+		const sheetOpen = computed({
+			get: () => isSheet.value && combobox.isOpen.value,
+			set: (open) => {
+				if (!open && combobox.isOpen.value) combobox.close();
+			}
+		});
+		const listboxTarget = computed(() => isSheet.value && sheetSlot.value ? sheetSlot.value : "body");
+		function onSearchFocus() {
+			searchKeyboardFocus.value = isKeyboardModality();
+		}
+		function onSearchBlur() {
+			searchKeyboardFocus.value = false;
+		}
+		const anchored = useAnchoredListbox({
+			anchor,
+			layer: listboxRef,
+			isOpen: computed(() => combobox.isOpen.value && !isSheet.value),
+			onDismiss: () => {
+				combobox.close();
+			}
+		});
+		const badgeCount = computed(() => selectedOptions.value.length);
+		const overflow = useOverflow(badgeCount, { gap: 4 });
+		const visibleBadgeCount = computed(() => Math.min(overflow.visibleCount.value, props.maxBadges, badgeCount.value));
+		const hiddenBadgeCount = computed(() => Math.max(0, badgeCount.value - visibleBadgeCount.value));
+		const measureMoreLabel = computed(() => messages.value.multiSelector.more(Math.max(hiddenBadgeCount.value, 1)));
+		const labelText = computed(() => {
+			const labels = selectedOptions.value.map((option) => option.label);
+			const shown = labels.slice(0, props.maxBadges);
+			const extra = labels.length - shown.length;
+			if (shown.length === 0) return "";
+			return extra > 0 ? `${shown.join(", ")} ${messages.value.multiSelector.more(extra)}` : shown.join(", ");
+		});
+		const formattedValue = computed(() => {
+			if (selectedOptions.value.length === 0 || props.formatValue == null || props.triggerDisplay === "badges") return void 0;
+			return props.formatValue(selectedOptions.value.map((option) => ({
+				value: option.value,
+				label: option.label
+			})));
+		});
+		const describedBy = computed(() => {
+			return [
+				inGroup.value ? inputGroup?.describedBy.value : void 0,
+				!inGroup.value && props.description ? `${triggerId}-description` : void 0,
+				!inGroup.value && props.statusMessage ? `${triggerId}-status` : void 0,
+				showsDisabledMessage.value ? disabledId : void 0
+			].filter(Boolean).join(" ") || void 0;
+		});
+		useDevWarning("MultiSelector", "`containerClass`/`containerStyle` have no effect on a custom trigger.", () => hasCustomTrigger.value && (props.containerClass != null || props.containerStyle != null));
+		useDevWarning("MultiSelector", "`controlClass`/`controlStyle` have no effect on a custom trigger.", () => hasCustomTrigger.value && (props.controlClass != null || props.controlStyle != null));
+		function onTriggerClick(event) {
+			if (control.canActivate.value) combobox.toggle();
+			emit("click", event);
+		}
+		function onTriggerFocus(event) {
+			emit("focus", event);
+			disabledTooltip.onFocus(event);
+		}
+		function onTriggerKeyDown(event) {
+			menu.onKeyDown(event);
+			if (!event.defaultPrevented) emit("keydown", event);
+		}
+		/** 选项和操作按钮上的 Escape 不会经过搜索框，在列表根上接住并回到触发器。 */
+		function onListboxEscape(event) {
+			if (event.key !== "Escape" || event.defaultPrevented || event.isComposing) return;
+			menu.onKeyDown(event);
+		}
+		watch(listboxRef, (el, prev) => {
+			prev?.removeEventListener("keydown", onListboxEscape);
+			el?.addEventListener("keydown", onListboxEscape);
+		}, { flush: "sync" });
+		onScopeDispose(() => listboxRef.value?.removeEventListener("keydown", onListboxEscape));
+		const triggerProps = computed(() => ({
+			"id": triggerId,
+			"onClick": onTriggerClick,
+			"onKeyDown": onTriggerKeyDown,
+			"onFocus": onTriggerFocus,
+			"aria-haspopup": menu.popupKind.value,
+			"aria-expanded": combobox.isOpen.value,
+			"aria-controls": listboxId,
+			"aria-busy": control.isLoading.value ? true : void 0,
+			"triggerRef": setCustomTrigger
+		}));
+		onMounted(() => {
+			if (!props.isDefaultOpen) return;
+			menu.openFromMount();
+		});
+		const handle = {
+			open: () => menu.open(),
+			close: () => menu.close(),
+			toggle: () => {
+				if (combobox.isOpen.value) menu.close();
+				else menu.open();
+			},
+			isOpen: () => combobox.isOpen.value
+		};
+		useDisclosureHandle(() => props.handleRef, handle);
+		__expose({
+			focus: () => {
+				if (props.searchable && combobox.isOpen.value) panelRef.value?.focusSearch();
+				else anchor.value?.focus();
+			},
+			blur: () => anchor.value?.blur(),
+			...handle
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [
+				hasCustomTrigger.value ? renderSlot(_ctx.$slots, "trigger", normalizeProps(guardReactiveProps(triggerProps.value)), void 0, void 0, 0) : (openBlock(), createBlock(_sfc_main$6, {
+					key: 1,
+					class: normalizeClass(["astryx-multi-selector", [
+						unref(parts).containerClass.value,
+						`size-${props.size}`,
+						`variant-${triggerVariant.value}`
+					]]),
+					style: normalizeStyle(unref(parts).containerStyle.value),
+					label: props.label,
+					"input-id": props.searchable && unref(combobox).isOpen.value ? searchId : triggerId,
+					"is-label-hidden": inGroup.value || props.isLabelHidden || props.labelHidden,
+					"is-disabled": unref(control).isDisabled.value,
+					"is-required": inGroup.value ? false : props.required,
+					"is-optional": inGroup.value ? false : props.optional,
+					description: inGroup.value ? void 0 : props.description,
+					status: inGroup.value ? void 0 : fieldStatus.value,
+					"status-variant": effectiveStatusVariant.value,
+					width: props.width
+				}, {
+					default: withCtx(() => [createElementVNode("div", {
+						ref_key: "anchorRef",
+						ref: anchorRef,
+						class: normalizeClass(["astryx-multi-selector-control", [
+							unref(parts).controlClass(),
+							`status-${props.status}`,
+							{
+								"is-open": unref(combobox).isOpen.value,
+								"is-disabled": unref(control).isDisabled.value,
+								"is-readonly": unref(control).isReadOnly.value,
+								"is-loading": unref(control).isLoading.value,
+								"is-ghost": triggerVariant.value === "ghost"
+							}
+						]]),
+						style: normalizeStyle(unref(parts).controlStyle()),
+						"data-variant": triggerVariant.value,
+						onPointerenter: _cache[2] || (_cache[2] = (...args) => unref(disabledTooltip).onPointerEnter && unref(disabledTooltip).onPointerEnter(...args)),
+						onPointerleave: _cache[3] || (_cache[3] = (...args) => unref(disabledTooltip).onPointerLeave && unref(disabledTooltip).onPointerLeave(...args))
+					}, [
+						_ctx.$slots.icon ? (openBlock(), createElementBlock("span", _hoisted_2, [renderSlot(_ctx.$slots, "icon")])) : createCommentVNode("v-if", true),
+						createElementVNode("button", mergeProps(unref(parts).forwardedAttrs(), {
+							id: triggerId,
+							ref_key: "triggerRef",
+							ref: triggerRef,
+							type: "button",
+							class: "astryx-multi-selector-trigger",
+							disabled: unref(control).isDisabled.value && !showsDisabledMessage.value,
+							"aria-disabled": showsDisabledMessage.value ? "true" : void 0,
+							"aria-readonly": unref(control).isReadOnly.value || void 0,
+							"aria-busy": unref(control).isLoading.value || void 0,
+							role: props.searchable && !unref(control).isReadOnly.value ? void 0 : "combobox",
+							"aria-haspopup": unref(control).isReadOnly.value ? void 0 : unref(menu).popupKind.value,
+							"aria-expanded": unref(control).isReadOnly.value ? false : unref(combobox).isOpen.value,
+							"aria-controls": unref(control).isReadOnly.value ? void 0 : listboxId,
+							"aria-autocomplete": props.searchable ? void 0 : "none",
+							"aria-activedescendant": !props.searchable ? unref(menu).actionGrid.activeDescendant.value : void 0,
+							"aria-describedby": [describedBy.value, unref(control).isReadOnly.value ? readOnlyId : void 0].filter(Boolean).join(" ") || void 0,
+							onClick: onTriggerClick,
+							onFocus: onTriggerFocus,
+							onBlur: _cache[0] || (_cache[0] = (...args) => unref(disabledTooltip).onBlur && unref(disabledTooltip).onBlur(...args)),
+							onKeydown: onTriggerKeyDown
+						}), [unref(selectedOptions).length === 0 ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(placeholder.value), 1)) : props.triggerDisplay === "count" ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(formattedValue.value ?? unref(messages).multiSelector.selected(unref(selectedOptions).length)), 1)) : props.triggerDisplay === "labels" ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(formattedValue.value ?? labelText.value), 1)) : (openBlock(), createElementBlock("span", {
+							key: 3,
+							ref: unref(overflow).containerRef,
+							class: "astryx-multi-selector-badges"
+						}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(selectedOptions).slice(0, visibleBadgeCount.value), (option) => {
+							return openBlock(), createBlock(_sfc_main$8, {
+								key: option.value,
+								label: option.label,
+								size: props.size === "lg" ? "md" : "sm"
+							}, null, 8, ["label", "size"]);
+						}), 128)), hiddenBadgeCount.value > 0 ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(unref(messages).multiSelector.more(hiddenBadgeCount.value)), 1)) : createCommentVNode("v-if", true)], 512))], 16, _hoisted_3),
+						unref(control).isLoading.value ? (openBlock(), createBlock(_sfc_main$5, {
+							key: 1,
+							class: "astryx-multi-selector-spinner",
+							size: "sm",
+							"aria-label": unref(messages).multiSelector.loading
+						}, null, 8, ["aria-label"])) : createCommentVNode("v-if", true),
+						hasClear.value && unref(selectedValues).length > 0 && unref(control).canActivate.value ? (openBlock(), createElementBlock("button", {
+							key: 2,
+							type: "button",
+							class: "astryx-multi-selector-clear",
+							"aria-label": unref(messages).multiSelector.clearAll(props.label),
+							onClick: _cache[1] || (_cache[1] = withModifiers(($event) => unref(menu).commit([]), ["stop"]))
+						}, [createVNode(_sfc_main$3, {
+							icon: "close",
+							size: "sm"
+						})], 8, _hoisted_8)) : createCommentVNode("v-if", true),
+						statusGlyph.value ? (openBlock(), createBlock(_sfc_main$7, {
+							key: 3,
+							type: statusGlyph.value,
+							message: fieldStatus.value?.message,
+							tooltip: effectiveStatusVariant.value === "tooltip"
+						}, null, 8, [
+							"type",
+							"message",
+							"tooltip"
+						])) : unref(control).canActivate.value ? (openBlock(), createBlock(_sfc_main$3, {
+							key: 4,
+							class: normalizeClass(["astryx-multi-selector-chevron", { "is-open": unref(combobox).isOpen.value }]),
+							icon: "chevronDown",
+							size: "sm"
+						}, null, 8, ["class"])) : createCommentVNode("v-if", true),
+						unref(control).isReadOnly.value ? (openBlock(), createElementBlock("span", {
+							key: 5,
+							id: readOnlyId,
+							class: "astryx-visually-hidden"
+						}, toDisplayString(unref(messages).multiSelector.readOnly), 1)) : createCommentVNode("v-if", true),
+						props.triggerDisplay === "badges" ? (openBlock(), createElementBlock("span", {
+							key: 6,
+							ref: unref(overflow).measureRef,
+							class: "astryx-multi-selector-measure",
+							"aria-hidden": "true"
+						}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(selectedOptions), (option) => {
+							return openBlock(), createBlock(_sfc_main$8, {
+								key: option.value,
+								label: option.label,
+								size: props.size === "lg" ? "md" : "sm"
+							}, null, 8, ["label", "size"]);
+						}), 128)), createElementVNode("span", _hoisted_9, toDisplayString(measureMoreLabel.value), 1)], 512)) : createCommentVNode("v-if", true),
+						showsDisabledMessage.value ? (openBlock(), createElementBlock("span", {
+							key: 7,
+							id: disabledId,
+							class: "astryx-visually-hidden"
+						}, toDisplayString(resolvedDisabledMessage.value), 1)) : createCommentVNode("v-if", true),
+						(openBlock(true), createElementBlock(Fragment, null, renderList(unref(selectedValues), (value) => {
+							return openBlock(), createElementBlock("input", {
+								key: value,
+								type: "hidden",
+								name: props.name,
+								value,
+								disabled: !props.name
+							}, null, 8, _hoisted_10);
+						}), 128))
+					], 46, _hoisted_1)]),
+					_: 3
+				}, 8, [
+					"class",
+					"style",
+					"label",
+					"input-id",
+					"is-label-hidden",
+					"is-disabled",
+					"is-required",
+					"is-optional",
+					"description",
+					"status",
+					"status-variant",
+					"width"
+				])),
+				isSheet.value ? (openBlock(), createBlock(_sfc_main$4, {
+					key: 2,
+					"is-open": sheetOpen.value,
+					"onUpdate:isOpen": _cache[4] || (_cache[4] = ($event) => sheetOpen.value = $event),
+					height: "hug",
+					label: props.label,
+					padding: 2
+				}, {
+					default: withCtx(() => [createElementVNode("div", {
+						ref_key: "sheetSlot",
+						ref: sheetSlot,
+						class: "astryx-multi-selector-sheet"
+					}, [createElementVNode("div", _hoisted_11, toDisplayString(props.label), 1)], 512)]),
+					_: 1
+				}, 8, ["is-open", "label"])) : createCommentVNode("v-if", true),
+				(openBlock(), createBlock(Teleport, { to: listboxTarget.value }, [withDirectives(createElementVNode("div", {
+					id: listboxId,
+					ref_key: "listboxRef",
+					ref: listboxRef,
+					class: normalizeClass(["astryx-multi-selector-listbox astryx-layer", { "is-sheet": isSheet.value }]),
+					role: unref(menu).gridMode.value ? "grid" : "listbox",
+					"aria-multiselectable": "true",
+					"aria-label": props.label,
+					"data-placement": isSheet.value ? void 0 : unref(anchored).position.value.placement,
+					style: normalizeStyle(isSheet.value ? void 0 : unref(anchored).style.value),
+					tabindex: "-1"
+				}, [createVNode(_sfc_main$1, {
+					ref_key: "panelRef",
+					ref: panelRef,
+					searchable: Boolean(props.searchable),
+					query: unref(menu).query.value,
+					"search-id": searchId,
+					"search-placeholder": unref(menu).searchPlaceholder.value,
+					"clear-label": unref(messages).multiSelector.clear,
+					"listbox-id": listboxId,
+					"active-index": unref(combobox).activeIndex.value,
+					"active-descendant": unref(menu).actionGrid.activeDescendant.value,
+					grid: unref(menu).gridMode.value,
+					"action-index": unref(menu).actionGrid.column.value === "action" ? unref(combobox).activeIndex.value : -1,
+					"create-option": unref(menu).createOption.value,
+					"select-all": Boolean(props.selectAll),
+					"select-all-index": unref(menu).selectAllIndex.value,
+					"select-all-label": unref(menu).selectAllLabel.value,
+					"select-all-state": unref(menu).selectAllState.value,
+					"checkbox-position": props.checkboxPosition,
+					size: props.size,
+					loading: unref(control).isLoading.value,
+					"real-match-count": unref(menu).realMatchCount.value,
+					rows: unref(menu).rows.value,
+					"show-empty": unref(menu).showEmpty.value,
+					"empty-text": unref(menu).emptyText.value,
+					"empty-search-text": unref(menu).emptySearchText.value,
+					"search-keyboard-focus": searchKeyboardFocus.value,
+					mark: unref(CheckboxMark),
+					"is-selected": unref(menu).isSelected,
+					"checkbox-state": unref(menu).checkboxState,
+					"option-index": unref(menu).optionIndex,
+					"option-dom-id": unref(menu).optionDomId,
+					"action-dom-id": (index) => `${listboxId}-action-${index}`,
+					onQuery: unref(menu).onSearchInput,
+					onKeydown: unref(menu).onKeyDown,
+					onClearQuery: _cache[5] || (_cache[5] = ($event) => unref(menu).query.value = ""),
+					onSearchFocus,
+					onSearchBlur,
+					onToggle: unref(menu).toggleValue,
+					onHighlight: unref(menu).highlight
+				}, createSlots({ _: 2 }, [_ctx.$slots.option ? {
+					name: "option",
+					fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps(slotProps)))]),
+					key: "0"
+				} : void 0, _ctx.$slots.empty ? {
+					name: "empty",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "empty")]),
+					key: "1"
+				} : void 0]), 1032, [
+					"searchable",
+					"query",
+					"search-placeholder",
+					"clear-label",
+					"active-index",
+					"active-descendant",
+					"grid",
+					"action-index",
+					"create-option",
+					"select-all",
+					"select-all-index",
+					"select-all-label",
+					"select-all-state",
+					"checkbox-position",
+					"size",
+					"loading",
+					"real-match-count",
+					"rows",
+					"show-empty",
+					"empty-text",
+					"empty-search-text",
+					"search-keyboard-focus",
+					"mark",
+					"is-selected",
+					"checkbox-state",
+					"option-index",
+					"option-dom-id",
+					"action-dom-id",
+					"onQuery",
+					"onKeydown",
+					"onToggle",
+					"onHighlight"
+				])], 14, _hoisted_12), [[vShow, unref(combobox).isOpen.value]])], 8, ["to"])),
+				showsDisabledMessage.value ? (openBlock(), createBlock(_sfc_main$2, {
+					key: 3,
+					id: disabledTooltipId,
+					anchor: anchor.value,
+					open: unref(disabledTooltip).isOpen.value,
+					text: resolvedDisabledMessage.value ?? "",
+					onPointerEnter: unref(disabledTooltip).onTooltipPointerEnter,
+					onPointerLeave: unref(disabledTooltip).onTooltipPointerLeave
+				}, null, 8, [
+					"anchor",
+					"open",
+					"text",
+					"onPointerEnter",
+					"onPointerLeave"
+				])) : createCommentVNode("v-if", true)
+			], 64);
+		};
+	}
+});
+//#endregion
+export { SELECT_ALL_VALUE as n, flattenOptions as r, _sfc_main as t };