@astryx-vue/core 0.2.6 → 0.4.0

package/dist/Selector-DuVozKNq.js

@@ -1,675 +0,0 @@
-import { t as _sfc_main$1 } from "./VisuallyHidden-C7NN3VEP.js";
-import { n as useButtonTooltip } from "./Button-B6Hj_O_s.js";
-import { t as _sfc_main$2 } from "./ButtonTooltip-nWWrth8j.js";
-import { t as useAnnounce } from "./announce-Cnio10Wk.js";
-import { t as useCombobox } from "./useCombobox-CTo5C-gc.js";
-import { n as useDismiss, t as usePositionedLayer } from "./usePositionedLayer-Cru9_00b.js";
-import { t as useFieldControlState } from "./useFieldControlState-voICDrys.js";
-import { o as useAstryxMessages } from "./context-iABt_ueM.js";
-import { t as _sfc_main$3 } from "./BottomSheet-eJ3FzTBD.js";
-import { t as _sfc_main$4 } from "./Icon-bteSId7T.js";
-import { t as _sfc_main$5 } from "./Spinner-9cYUCnDy.js";
-import { t as useIndicator } from "./useIndicator-i1NORM7W.js";
-import { t as _sfc_main$6 } from "./Field-D5gUEGw4.js";
-import { t as INPUT_GROUP_KEY } from "./context-D5-MwxnN.js";
-import { n as fieldStatusPlacement, r as _sfc_main$7, t as searchResultMessage } from "./searchResultMessage-hXXNOFJP.js";
-import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useSlots, useTemplateRef, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
-import "../styles/button.css";
-import "../styles/visually-hidden-utility.css";
-import "../styles/selector.css";
-//#region src/Selector/Selector.vue
-const _hoisted_1 = [
-	"disabled",
-	"role",
-	"aria-haspopup",
-	"aria-expanded",
-	"aria-controls",
-	"aria-readonly",
-	"aria-disabled",
-	"aria-busy",
-	"aria-required",
-	"aria-label",
-	"aria-describedby",
-	"aria-autocomplete",
-	"aria-activedescendant"
-];
-const _hoisted_2 = { class: "astryx-selector-value-label" };
-const _hoisted_3 = ["aria-label"];
-const _hoisted_4 = { class: "astryx-selector-sheet-title" };
-const _hoisted_5 = ["data-placement"];
-const _hoisted_6 = {
-	key: 0,
-	class: "astryx-selector-search"
-};
-const _hoisted_7 = [
-	"id",
-	"aria-label",
-	"aria-expanded",
-	"aria-activedescendant",
-	"placeholder",
-	"value"
-];
-const _hoisted_8 = ["aria-label"];
-const _hoisted_9 = {
-	key: 1,
-	class: "astryx-selector-options"
-};
-const _hoisted_10 = {
-	key: 0,
-	class: "astryx-selector-section",
-	role: "presentation"
-};
-const _hoisted_11 = [
-	"id",
-	"aria-selected",
-	"aria-disabled",
-	"onClick",
-	"onKeydown"
-];
-const _hoisted_12 = {
-	key: 0,
-	class: "astryx-selector-option-mark"
-};
-const _hoisted_13 = { class: "astryx-selector-option-body" };
-const _hoisted_14 = { class: "astryx-selector-option-copy" };
-const _hoisted_15 = { class: "astryx-selector-option-label" };
-const _hoisted_16 = {
-	key: 0,
-	class: "astryx-selector-option-description"
-};
-const _hoisted_17 = {
-	key: 1,
-	class: "astryx-selector-option-mark"
-};
-const _hoisted_18 = {
-	key: 2,
-	class: "astryx-selector-empty",
-	role: "presentation"
-};
-const _hoisted_19 = [
-	"id",
-	"name",
-	"value",
-	"disabled",
-	"aria-label"
-];
-const _hoisted_20 = ["value"];
-const _sfc_main = /*@__PURE__*/ defineComponent({
-	name: "AstryxSelector",
-	inheritAttrs: false,
-	__name: "Selector",
-	props: {
-		modelValue: { default: null },
-		options: {},
-		placeholder: {},
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		disabledMessage: {},
-		disabledReason: {},
-		status: { default: "default" },
-		statusMessage: {},
-		statusVariant: { default: "attached" },
-		size: { default: "md" },
-		variant: { default: "default" },
-		presentation: { default: "popover" },
-		searchable: {
-			type: Boolean,
-			default: false
-		},
-		searchPlaceholder: {},
-		clearable: {
-			type: Boolean,
-			default: false
-		},
-		hasClear: { type: Boolean },
-		clearLabel: {},
-		emptyText: {},
-		emptySearchText: {},
-		label: {},
-		isLabelHidden: {
-			type: Boolean,
-			default: false
-		},
-		description: {},
-		width: {},
-		name: {},
-		isReadOnly: {
-			type: Boolean,
-			default: false
-		},
-		isLoading: {
-			type: Boolean,
-			default: false
-		},
-		isOptional: {
-			type: Boolean,
-			default: false
-		},
-		isRequired: {
-			type: Boolean,
-			default: false
-		},
-		indicatorPosition: { default: "end" }
-	},
-	emits: [
-		"update:modelValue",
-		"change",
-		"search",
-		"click",
-		"focus",
-		"keydown"
-	],
-	setup(__props, { emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const slots = useSlots();
-		const SelectionMark = useIndicator("check");
-		const selectorId = `astryx-selector-${useId()}`;
-		const listboxId = `${selectorId}-listbox`;
-		const messages = useAstryxMessages();
-		const resolvedPlaceholder = computed(() => props.placeholder ?? messages.value.selector.placeholder);
-		const resolvedSearchPlaceholder = computed(() => props.searchPlaceholder ?? messages.value.selector.search);
-		const resolvedClearLabel = computed(() => props.clearLabel ?? messages.value.selector.clear);
-		/** 值上的清除按钮带着字段名，读屏能听出清的是哪一项。 */
-		const valueClearLabel = computed(() => props.clearLabel ?? messages.value.selector.clearField(props.label));
-		const resolvedEmptyText = computed(() => props.emptyText ?? messages.value.selector.empty);
-		const resolvedEmptySearchText = computed(() => props.emptySearchText ?? messages.value.selector.emptySearch);
-		const inputGroup = inject(INPUT_GROUP_KEY, null);
-		const inGroup = computed(() => inputGroup != null);
-		const control = useFieldControlState({
-			disabled: () => props.disabled || (inputGroup?.disabled.value ?? false),
-			readOnly: () => props.isReadOnly,
-			loading: () => props.isLoading
-		});
-		const announce = useAnnounce();
-		const readOnlyId = `${selectorId}-readonly`;
-		const disabledMessageId = `${selectorId}-disabled-message`;
-		const disabledTooltipId = `${selectorId}-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 fieldRef = useTemplateRef("fieldRef");
-		const listboxRef = useTemplateRef("listboxRef");
-		const searchInputRef = useTemplateRef("searchInputRef");
-		const sheetSlot = useTemplateRef("sheetSlot");
-		const isSheet = computed(() => props.presentation === "bottom-sheet");
-		const sheetLabel = computed(() => props.label || resolvedPlaceholder.value);
-		const isEnabled = control.canActivate;
-		const isSearchable = computed(() => props.searchable && control.canActivate.value);
-		function isSection(entry) {
-			return typeof entry === "object" && entry !== null && "type" in entry && entry.type === "section";
-		}
-		function asOption(entry) {
-			if (typeof entry === "string") return {
-				value: entry,
-				label: entry
-			};
-			return entry;
-		}
-		const normalizedEntries = computed(() => props.options.map((entry) => {
-			if (isSection(entry)) return {
-				...entry,
-				options: entry.options.map(asOption)
-			};
-			return asOption(entry);
-		}));
-		const flatOptions = computed(() => normalizedEntries.value.flatMap((entry) => isSection(entry) ? entry.options : [entry]));
-		const comboboxOptions = computed(() => flatOptions.value.map((opt) => ({
-			value: opt.value,
-			label: opt.label,
-			disabled: opt.disabled ?? false
-		})));
-		const modelValueRef = computed({
-			get: () => props.modelValue,
-			set: (value) => {
-				emit("update:modelValue", value);
-				emit("change", value);
-			}
-		});
-		const combobox = useCombobox({
-			options: comboboxOptions,
-			modelValue: modelValueRef,
-			isEnabled,
-			isSearchable,
-			onChange: (value) => {
-				modelValueRef.value = value;
-			},
-			onOpenChange: (isOpen) => {
-				if (isOpen && props.searchable) nextTick(() => {
-					searchInputRef.value?.focus();
-				});
-			}
-		});
-		const sheetOpen = computed({
-			get: () => isSheet.value && combobox.isOpen.value,
-			set: (open) => {
-				if (!open && combobox.isOpen.value) combobox.close();
-			}
-		});
-		const popoverOpen = computed(() => combobox.isOpen.value && !isSheet.value);
-		const listboxTarget = computed(() => isSheet.value && sheetSlot.value ? sheetSlot.value : "body");
-		const { position } = usePositionedLayer({
-			anchor: fieldRef,
-			layer: listboxRef,
-			isOpen: popoverOpen,
-			placement: computed(() => "below"),
-			alignment: computed(() => "start"),
-			gap: 4
-		});
-		useDismiss({
-			container: listboxRef,
-			trigger: fieldRef,
-			isEnabled: popoverOpen,
-			enableEscape: ref(true),
-			onDismiss: () => {
-				combobox.close();
-			}
-		});
-		const selectedOption = computed(() => {
-			if (props.modelValue == null) return null;
-			return flatOptions.value.find((opt) => opt.value === props.modelValue) ?? null;
-		});
-		const fieldLabel = computed(() => props.label || resolvedPlaceholder.value);
-		const hideLabel = computed(() => props.isLabelHidden || !props.label);
-		const statusType = computed(() => {
-			const status = props.status;
-			if (status == null || status === "default") return "default";
-			if (typeof status === "string") return status;
-			return status.type;
-		});
-		const fieldStatus = computed(() => {
-			const status = props.status;
-			if (status && typeof status === "object") return status;
-			if (!props.statusMessage || statusType.value === "default") return void 0;
-			return {
-				type: statusType.value,
-				message: props.statusMessage
-			};
-		});
-		const effectiveStatusVariant = computed(() => fieldStatusPlacement(props.variant, props.statusVariant));
-		const statusGlyph = computed(() => {
-			const type = statusType.value;
-			if (type !== "error" && type !== "warning" && type !== "success" || effectiveStatusVariant.value === "detached") return void 0;
-			return type;
-		});
-		const displayRows = computed(() => {
-			const indexByValue = new Map(combobox.filteredOptions.value.map((option, index) => [option.value, index]));
-			const rows = [];
-			for (const entry of normalizedEntries.value) {
-				if (isSection(entry)) {
-					const children = entry.options.filter((option) => indexByValue.has(option.value));
-					if (children.length === 0) continue;
-					rows.push({
-						kind: "section",
-						title: entry.title
-					});
-					for (const option of children) rows.push({
-						kind: "option",
-						option,
-						index: indexByValue.get(option.value)
-					});
-					continue;
-				}
-				if (!indexByValue.has(entry.value)) continue;
-				rows.push({
-					kind: "option",
-					option: entry,
-					index: indexByValue.get(entry.value)
-				});
-			}
-			return rows;
-		});
-		const displayText = computed(() => {
-			return selectedOption.value?.label ?? resolvedPlaceholder.value;
-		});
-		const isEmpty = computed(() => {
-			return combobox.filteredOptions.value.length === 0;
-		});
-		const isSearching = computed(() => props.searchable && combobox.searchQuery.value.trim() !== "");
-		const showEmpty = computed(() => isEmpty.value && !control.isLoading.value);
-		const describedBy = computed(() => {
-			return [
-				inGroup.value ? inputGroup?.describedBy.value : void 0,
-				control.isReadOnly.value ? readOnlyId : void 0,
-				showsDisabledMessage.value ? disabledMessageId : void 0
-			].filter(Boolean).join(" ") || void 0;
-		});
-		const announcement = computed(() => searchResultMessage({
-			isOpen: combobox.isOpen.value,
-			isLoading: control.isLoading.value,
-			query: combobox.searchQuery.value,
-			matchCount: combobox.filteredOptions.value.length,
-			emptyText: resolvedEmptyText.value,
-			emptySearchText: resolvedEmptySearchText.value,
-			resultCount: messages.value.selector.resultCount
-		}));
-		watch(announcement, (message) => {
-			if (message) announce(message);
-		});
-		function onTriggerClick(event) {
-			emit("click", event);
-			if (control.canActivate.value) combobox.toggle();
-		}
-		function onTriggerFocus(event) {
-			emit("focus", event);
-			disabledTooltip.onFocus(event);
-		}
-		function onTriggerKeyDown(event) {
-			combobox.onKeyDown(event);
-			if (!event.defaultPrevented) emit("keydown", event);
-		}
-		/** 搜索框里的按键只走键盘模型，不当作触发器的事件透出。 */
-		function onSearchKeyDown(event) {
-			combobox.onKeyDown(event);
-		}
-		function onOptionClick(option) {
-			if (!option.disabled) combobox.select(option.value);
-		}
-		function onClear(event) {
-			event.stopPropagation();
-			if (!control.canActivate.value) return;
-			modelValueRef.value = null;
-			combobox.close();
-		}
-		function clearSearch(event) {
-			event.stopPropagation();
-			combobox.setSearchQuery("");
-			emit("search", "");
-			searchInputRef.value?.focus();
-		}
-		function onSearchInput(event) {
-			const target = event.target;
-			combobox.setSearchQuery(target.value);
-			emit("search", target.value);
-		}
-		function getOptionId(index) {
-			return `${listboxId}-option-${index}`;
-		}
-		const anchorWidth = ref(0);
-		function syncAnchorWidth() {
-			anchorWidth.value = fieldRef.value?.getBoundingClientRect().width ?? 0;
-		}
-		const listboxStyle = computed(() => isSheet.value ? void 0 : {
-			top: `${position.value.top}px`,
-			left: `${position.value.left}px`,
-			minWidth: anchorWidth.value > 0 ? `${anchorWidth.value}px` : void 0
-		});
-		watch(combobox.isOpen, (open) => {
-			if (open) syncAnchorWidth();
-		}, { flush: "pre" });
-		onMounted(syncAnchorWidth);
-		watch(() => combobox.activeIndex.value, (index) => {
-			if (index >= 0 && combobox.isOpen.value) nextTick(() => {
-				const listbox = listboxRef.value;
-				const optionEl = listbox?.querySelector(`#${getOptionId(index)}`);
-				if (!listbox || !optionEl) return;
-				const listboxRect = listbox.getBoundingClientRect();
-				const optionRect = optionEl.getBoundingClientRect();
-				if (optionRect.top < listboxRect.top) listbox.scrollTop -= listboxRect.top - optionRect.top;
-				else if (optionRect.bottom > listboxRect.bottom) listbox.scrollTop += optionRect.bottom - listboxRect.bottom;
-			});
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(_sfc_main$6, {
-				class: normalizeClass(["astryx-selector", [
-					`size-${props.size}`,
-					`status-${statusType.value}`,
-					`variant-${props.variant}`
-				]]),
-				label: fieldLabel.value,
-				"input-id": selectorId,
-				"is-label-hidden": inGroup.value || hideLabel.value,
-				"is-disabled": unref(control).isDisabled.value,
-				"is-optional": inGroup.value ? false : props.isOptional,
-				"is-required": inGroup.value ? false : props.isRequired,
-				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: "fieldRef",
-						ref: fieldRef,
-						class: normalizeClass(["astryx-selector-field", {
-							"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": props.variant === "ghost"
-						}]),
-						onPointerenter: _cache[1] || (_cache[1] = (...args) => unref(disabledTooltip).onPointerEnter && unref(disabledTooltip).onPointerEnter(...args)),
-						onPointerleave: _cache[2] || (_cache[2] = (...args) => unref(disabledTooltip).onPointerLeave && unref(disabledTooltip).onPointerLeave(...args))
-					}, [
-						createElementVNode("button", {
-							id: selectorId,
-							type: "button",
-							class: normalizeClass(["astryx-selector-trigger", {
-								"is-open": unref(combobox).isOpen.value,
-								"is-disabled": unref(control).isDisabled.value
-							}]),
-							disabled: unref(control).isDisabled.value && !showsDisabledMessage.value,
-							role: unref(control).isReadOnly.value || !props.searchable ? "combobox" : void 0,
-							"aria-haspopup": unref(control).isReadOnly.value ? void 0 : "listbox",
-							"aria-expanded": unref(control).isReadOnly.value ? false : unref(combobox).isOpen.value,
-							"aria-controls": unref(control).isReadOnly.value ? void 0 : listboxId,
-							"aria-readonly": unref(control).isReadOnly.value || void 0,
-							"aria-disabled": showsDisabledMessage.value || void 0,
-							"aria-busy": unref(control).isLoading.value || void 0,
-							"aria-required": props.isRequired || void 0,
-							"aria-label": props.label,
-							"aria-describedby": describedBy.value,
-							"aria-autocomplete": props.searchable ? void 0 : "none",
-							"aria-activedescendant": !props.searchable && !unref(control).isReadOnly.value && unref(combobox).activeIndex.value >= 0 ? getOptionId(unref(combobox).activeIndex.value) : void 0,
-							onClick: onTriggerClick,
-							onFocus: onTriggerFocus,
-							onBlur: _cache[0] || (_cache[0] = (...args) => unref(disabledTooltip).onBlur && unref(disabledTooltip).onBlur(...args)),
-							onKeydown: onTriggerKeyDown
-						}, [createElementVNode("span", { class: normalizeClass(["astryx-selector-value", {
-							"is-placeholder": !selectedOption.value,
-							"is-rich": unref(slots).selected,
-							"is-grouped": inGroup.value
-						}]) }, [unref(slots).selected ? renderSlot(_ctx.$slots, "selected", { option: selectedOption.value }, void 0, void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [selectedOption.value?.icon ? (openBlock(), createElementBlock("span", {
-							key: 0,
-							class: normalizeClass(["astryx-selector-value-icon", selectedOption.value.icon]),
-							"aria-hidden": "true"
-						}, null, 2)) : createCommentVNode("v-if", true), createElementVNode("span", _hoisted_2, toDisplayString(displayText.value), 1)], 64))], 2)], 42, _hoisted_1),
-						unref(control).isLoading.value ? (openBlock(), createBlock(_sfc_main$5, {
-							key: 0,
-							class: "astryx-selector-spinner",
-							size: "sm",
-							"aria-label": unref(messages).selector.loading
-						}, null, 8, ["aria-label"])) : createCommentVNode("v-if", true),
-						hasClear.value && selectedOption.value && unref(control).canActivate.value ? (openBlock(), createElementBlock("button", {
-							key: 1,
-							type: "button",
-							class: "astryx-selector-clear",
-							"aria-label": valueClearLabel.value,
-							onClick: onClear
-						}, [createVNode(_sfc_main$4, {
-							icon: "close",
-							size: "sm"
-						})], 8, _hoisted_3)) : createCommentVNode("v-if", true),
-						statusGlyph.value ? (openBlock(), createBlock(_sfc_main$7, {
-							key: 2,
-							type: statusGlyph.value,
-							message: fieldStatus.value?.message,
-							tooltip: effectiveStatusVariant.value === "tooltip"
-						}, null, 8, [
-							"type",
-							"message",
-							"tooltip"
-						])) : unref(control).canActivate.value ? (openBlock(), createBlock(_sfc_main$4, {
-							key: 3,
-							class: "astryx-selector-icon",
-							icon: "chevronDown",
-							size: "sm"
-						})) : createCommentVNode("v-if", true),
-						unref(control).isReadOnly.value ? (openBlock(), createElementBlock("span", {
-							key: 4,
-							id: readOnlyId,
-							class: "astryx-visually-hidden"
-						}, toDisplayString(unref(messages).selector.readOnly), 1)) : createCommentVNode("v-if", true)
-					], 34),
-					showsDisabledMessage.value ? (openBlock(), createBlock(_sfc_main$1, {
-						key: 0,
-						id: disabledMessageId
-					}, {
-						default: withCtx(() => [createTextVNode(toDisplayString(resolvedDisabledMessage.value), 1)]),
-						_: 1
-					})) : createCommentVNode("v-if", true),
-					showsDisabledMessage.value ? (openBlock(), createBlock(_sfc_main$2, {
-						key: 1,
-						id: disabledTooltipId,
-						anchor: fieldRef.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),
-					isSheet.value ? (openBlock(), createBlock(_sfc_main$3, {
-						key: 2,
-						"is-open": sheetOpen.value,
-						"onUpdate:isOpen": _cache[3] || (_cache[3] = ($event) => sheetOpen.value = $event),
-						height: "hug",
-						label: sheetLabel.value,
-						padding: 2
-					}, {
-						default: withCtx(() => [createElementVNode("div", {
-							ref_key: "sheetSlot",
-							ref: sheetSlot,
-							class: "astryx-selector-sheet"
-						}, [createElementVNode("div", _hoisted_4, toDisplayString(sheetLabel.value), 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,
-						role: "listbox",
-						class: normalizeClass(["astryx-selector-listbox", { "is-sheet": isSheet.value }]),
-						"data-placement": isSheet.value ? void 0 : unref(position).placement,
-						style: normalizeStyle(listboxStyle.value),
-						tabindex: "-1"
-					}, [props.searchable ? (openBlock(), createElementBlock("div", _hoisted_6, [
-						createVNode(_sfc_main$4, {
-							class: "astryx-selector-search-icon",
-							icon: "search",
-							size: "sm"
-						}),
-						createElementVNode("input", {
-							id: `${selectorId}-search`,
-							ref_key: "searchInputRef",
-							ref: searchInputRef,
-							type: "text",
-							class: "astryx-selector-search-input",
-							role: "combobox",
-							autocomplete: "off",
-							"aria-label": resolvedSearchPlaceholder.value,
-							"aria-expanded": unref(combobox).isOpen.value,
-							"aria-controls": listboxId,
-							"aria-autocomplete": "list",
-							"aria-activedescendant": unref(combobox).activeIndex.value >= 0 ? getOptionId(unref(combobox).activeIndex.value) : void 0,
-							placeholder: resolvedSearchPlaceholder.value,
-							value: unref(combobox).searchQuery.value,
-							onInput: onSearchInput,
-							onKeydown: onSearchKeyDown
-						}, null, 40, _hoisted_7),
-						unref(combobox).searchQuery.value ? (openBlock(), createElementBlock("button", {
-							key: 0,
-							type: "button",
-							class: "astryx-selector-search-clear",
-							"aria-label": resolvedClearLabel.value,
-							onClick: clearSearch
-						}, [createVNode(_sfc_main$4, {
-							icon: "close",
-							size: "sm"
-						})], 8, _hoisted_8)) : createCommentVNode("v-if", true)
-					])) : createCommentVNode("v-if", true), !unref(control).isLoading.value && !isEmpty.value ? (openBlock(), createElementBlock("div", _hoisted_9, [(openBlock(true), createElementBlock(Fragment, null, renderList(displayRows.value, (row, rowIndex) => {
-						return openBlock(), createElementBlock(Fragment, { key: row.kind === "section" ? `section-${rowIndex}` : row.option?.value }, [row.kind === "section" ? (openBlock(), createElementBlock("div", _hoisted_10, toDisplayString(row.title), 1)) : row.option && row.index != null ? (openBlock(), createElementBlock("div", {
-							key: 1,
-							id: getOptionId(row.index),
-							role: "option",
-							tabindex: "0",
-							class: normalizeClass(["astryx-selector-option", {
-								"is-active": row.index === unref(combobox).activeIndex.value,
-								"is-selected": row.option.value === props.modelValue,
-								"is-disabled": row.option.disabled
-							}]),
-							"aria-selected": row.option.value === props.modelValue,
-							"aria-disabled": row.option.disabled,
-							onClick: ($event) => onOptionClick(row.option),
-							onKeydown: [withKeys(($event) => onOptionClick(row.option), ["enter"]), withKeys(withModifiers(($event) => onOptionClick(row.option), ["prevent"]), ["space"])]
-						}, [
-							props.indicatorPosition === "start" ? (openBlock(), createElementBlock("span", _hoisted_12, [(openBlock(), createBlock(resolveDynamicComponent(unref(SelectionMark)), {
-								class: "astryx-selector-check",
-								state: row.option.value === props.modelValue ? "checked" : "unchecked",
-								size: "sm",
-								"is-disabled": row.option.disabled
-							}, null, 8, ["state", "is-disabled"]))])) : createCommentVNode("v-if", true),
-							createElementVNode("span", _hoisted_13, [unref(slots).option ? renderSlot(_ctx.$slots, "option", {
-								option: row.option,
-								isActive: row.index === unref(combobox).activeIndex.value,
-								isSelected: row.option.value === props.modelValue
-							}, void 0, void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [row.option.icon ? (openBlock(), createElementBlock("span", {
-								key: 0,
-								class: normalizeClass(["astryx-selector-option-icon", row.option.icon]),
-								"aria-hidden": "true"
-							}, null, 2)) : createCommentVNode("v-if", true), createElementVNode("span", _hoisted_14, [createElementVNode("span", _hoisted_15, toDisplayString(row.option.label), 1), row.option.description ? (openBlock(), createElementBlock("span", _hoisted_16, toDisplayString(row.option.description), 1)) : createCommentVNode("v-if", true)])], 64))]),
-							props.indicatorPosition === "end" ? (openBlock(), createElementBlock("span", _hoisted_17, [(openBlock(), createBlock(resolveDynamicComponent(unref(SelectionMark)), {
-								class: "astryx-selector-check",
-								state: row.option.value === props.modelValue ? "checked" : "unchecked",
-								size: "sm",
-								"is-disabled": row.option.disabled
-							}, null, 8, ["state", "is-disabled"]))])) : createCommentVNode("v-if", true)
-						], 42, _hoisted_11)) : createCommentVNode("v-if", true)], 64);
-					}), 128))])) : showEmpty.value ? (openBlock(), createElementBlock("div", _hoisted_18, [!isSearching.value && unref(slots).empty ? renderSlot(_ctx.$slots, "empty", {}, void 0, void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(isSearching.value ? resolvedEmptySearchText.value : resolvedEmptyText.value), 1)], 64))])) : createCommentVNode("v-if", true)], 14, _hoisted_5), [[vShow, unref(combobox).isOpen.value]])], 8, ["to"])),
-					props.name ? (openBlock(), createElementBlock("select", {
-						key: 3,
-						id: `${selectorId}-hidden-select`,
-						name: props.name,
-						value: props.modelValue ?? "",
-						disabled: unref(control).isDisabled.value,
-						"aria-label": props.label || resolvedPlaceholder.value,
-						tabindex: "-1",
-						style: {
-							"position": "absolute",
-							"left": "-9999px",
-							"width": "1px",
-							"height": "1px"
-						}
-					}, [_cache[4] || (_cache[4] = createElementVNode("option", { value: "" }, null, -1)), (openBlock(true), createElementBlock(Fragment, null, renderList(flatOptions.value, (option) => {
-						return openBlock(), createElementBlock("option", {
-							key: option.value,
-							value: option.value
-						}, toDisplayString(option.label), 9, _hoisted_20);
-					}), 128))], 8, _hoisted_19)) : createCommentVNode("v-if", true)
-				]),
-				_: 3
-			}, 8, [
-				"class",
-				"label",
-				"is-label-hidden",
-				"is-disabled",
-				"is-optional",
-				"is-required",
-				"description",
-				"status",
-				"status-variant",
-				"width"
-			]);
-		};
-	}
-});
-//#endregion
-export { _sfc_main as t };