niuma-ui 2.0.3 → 2.0.9

package/dist/components/select/src/RsSelect.impl.js

@@ -1,74 +1,173 @@
 import { RS_COMPONENT_SIZE_ICON_PX } from "../../../theme/types.js";
-import { ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxPortal, ComboboxRoot, ComboboxTrigger, ComboboxViewport, ComboboxVirtualizer } from "../../_shared/src/reka.js";
 import { useRsI18n } from "../../../composables/useRsI18n.js";
 import RsIcon_default from "../../icon/src/RsIcon.js";
 import { buildLocalInputRules, runFormFieldRules } from "../../form/src/form-rules.js";
 import { isRsFormItemBoundControl, useRsFormContext, useRsFormField, useRsFormItemContext } from "../../form/src/form-utils.js";
 import { useResolvedRsComponentSize } from "../../_shared/src/resolve-size.js";
 import { rsRadiusCss, useResolvedRsRadius } from "../../_shared/src/resolve-radius.js";
+import { placeAnchoredPopup, stepEnabledIndex } from "../../_shared/src/overlay-utils.js";
 import { isSelectOptionGroup, splitSelectLabelHighlight, toComboboxValue } from "./select-utils.js";
 import { useRsSelect } from "./use-rs-select.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, isRef, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useAttrs, useModel, watch, withCtx, withModifiers } from "vue";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useAttrs, useId, useModel, useTemplateRef, vModelText, watch, withDirectives, withModifiers } from "vue";
 //#region src/components/select/src/RsSelect.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = {
+var _hoisted_1 = ["name", "value"];
+var _hoisted_2 = ["name", "value"];
+var _hoisted_3 = [
+	"id",
+	"aria-expanded",
+	"aria-controls",
+	"aria-activedescendant",
+	"aria-invalid",
+	"aria-disabled",
+	"disabled",
+	"data-disabled",
+	"data-state"
+];
+var _hoisted_4 = {
 	key: 0,
 	class: "rs-select__prefix"
 };
-var _hoisted_2 = {
+var _hoisted_5 = {
 	key: 1,
 	class: "rs-select__value rs-select__value--multiple"
 };
-var _hoisted_3 = { class: "rs-select__tag-label" };
-var _hoisted_4 = ["aria-label", "onClick"];
-var _hoisted_5 = ["title"];
-var _hoisted_6 = {
+var _hoisted_6 = { class: "rs-select__tag-label" };
+var _hoisted_7 = ["aria-label", "onClick"];
+var _hoisted_8 = ["title"];
+var _hoisted_9 = {
 	key: 1,
 	class: "rs-select__placeholder"
 };
-var _hoisted_7 = {
+var _hoisted_10 = {
 	key: 2,
 	class: "rs-select__value"
 };
-var _hoisted_8 = {
+var _hoisted_11 = {
 	key: 0,
 	class: "rs-select__single-label"
 };
-var _hoisted_9 = {
+var _hoisted_12 = {
 	key: 1,
 	class: "rs-select__placeholder"
 };
-var _hoisted_10 = { class: "rs-select__actions" };
-var _hoisted_11 = ["aria-label"];
-var _hoisted_12 = {
+var _hoisted_13 = { class: "rs-select__actions" };
+var _hoisted_14 = ["aria-label"];
+var _hoisted_15 = {
 	key: 1,
 	class: "rs-select__suffix"
 };
-var _hoisted_13 = {
+var _hoisted_16 = [
+	"id",
+	"data-placement",
+	"data-rs-theme"
+];
+var _hoisted_17 = {
+	key: 0,
+	class: "rs-select__panel-header"
+};
+var _hoisted_18 = {
 	key: 1,
 	class: "rs-select__search-bar"
 };
-var _hoisted_14 = { class: "rs-select__search-wrap" };
-var _hoisted_15 = {
+var _hoisted_19 = { class: "rs-select__search-wrap" };
+var _hoisted_20 = [
+	"placeholder",
+	"aria-label",
+	"aria-controls",
+	"aria-activedescendant"
+];
+var _hoisted_21 = {
 	key: 2,
 	class: "rs-select__status"
 };
-var _hoisted_16 = { class: "rs-select__item-label" };
-var _hoisted_17 = {
+var _hoisted_22 = {
+	key: 3,
+	class: "rs-select__empty",
+	role: "status"
+};
+var _hoisted_23 = ["aria-multiselectable", "aria-label"];
+var _hoisted_24 = [
+	"id",
+	"data-value",
+	"data-highlighted",
+	"data-state",
+	"data-disabled",
+	"aria-selected",
+	"aria-disabled",
+	"title",
+	"onClick"
+];
+var _hoisted_25 = { class: "rs-select__item-label" };
+var _hoisted_26 = {
 	key: 0,
 	class: "rs-select__mark"
 };
-var _hoisted_18 = { class: "rs-select__item-label" };
-var _hoisted_19 = { class: "rs-select__item-label" };
-var _hoisted_20 = {
+var _hoisted_27 = {
+	key: 0,
+	class: "rs-select__item-check"
+};
+var _hoisted_28 = [
+	"id",
+	"data-value",
+	"data-highlighted",
+	"data-state",
+	"aria-selected"
+];
+var _hoisted_29 = { class: "rs-select__item-label" };
+var _hoisted_30 = {
+	key: 0,
+	class: "rs-select__item-check"
+};
+var _hoisted_31 = ["aria-label"];
+var _hoisted_32 = { class: "rs-select__group-label" };
+var _hoisted_33 = [
+	"id",
+	"data-value",
+	"data-highlighted",
+	"data-state",
+	"data-disabled",
+	"aria-selected",
+	"aria-disabled",
+	"title",
+	"onClick"
+];
+var _hoisted_34 = { class: "rs-select__item-label" };
+var _hoisted_35 = {
 	key: 0,
 	class: "rs-select__mark"
 };
-var _hoisted_21 = { class: "rs-select__item-label" };
-var _hoisted_22 = {
+var _hoisted_36 = {
+	key: 0,
+	class: "rs-select__item-check"
+};
+var _hoisted_37 = [
+	"id",
+	"data-value",
+	"data-highlighted",
+	"data-state",
+	"data-disabled",
+	"aria-selected",
+	"aria-disabled",
+	"title",
+	"onClick"
+];
+var _hoisted_38 = { class: "rs-select__item-label" };
+var _hoisted_39 = {
 	key: 0,
 	class: "rs-select__mark"
 };
+var _hoisted_40 = {
+	key: 0,
+	class: "rs-select__item-check"
+};
+var _hoisted_41 = {
+	key: 5,
+	class: "rs-select__panel-footer"
+};
+var ITEM_ESTIMATE = 36;
+var VIRTUAL_OVERSCAN = 6;
 var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsSelect",
 	inheritAttrs: false,
 	__name: "RsSelect",
 	props: /*@__PURE__*/ mergeModels({
@@ -211,14 +310,19 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		const emit = __emit;
 		const { t } = useRsI18n();
 		const attrs = useAttrs();
+		const listId = useId();
 		const formContext = useRsFormContext();
 		const formItem = useRsFormItemContext();
 		const boundToItem = computed(() => isRsFormItemBoundControl(formItem, {
 			id: props.id,
 			name: props.name
 		}));
-		const anchorRef = ref(null);
-		const { resolvedPlaceholder, resolvedSearchPlaceholder, resolvedEmptyText, resolvedLoadingText, isMultiple, isSearchable, labelMap, useVirtual, useManualFilter, displayOptions, createValue, canCreate, createOptionLabel, virtualValues, selectedValues, hasValue, visibleTagTokens, omittedTagCount, omittedTagLabel, omittedTagTitle, singleDisplayLabel, comboboxModel, tokenLabel, truncateTagLabel, optionFromToken, optionOrCreate, isOptionLimited, isTokenDisabled, restoreTokenValue, onSearchKeydown, onClear, removeTag, setValue, resetSearch } = useRsSelect(props, model, open, searchQuery, emit, t);
+		const rootRef = useTemplateRef("rootRef");
+		const triggerRef = useTemplateRef("triggerRef");
+		const contentRef = useTemplateRef("contentRef");
+		const searchInputRef = useTemplateRef("searchInputRef");
+		const viewportRef = useTemplateRef("viewportRef");
+		const { resolvedPlaceholder, resolvedSearchPlaceholder, resolvedEmptyText, resolvedLoadingText, isMultiple, isSearchable, labelMap, useVirtual, displayOptions, createValue, canCreate, createOptionLabel, virtualValues, selectedValues, hasValue, visibleTagTokens, omittedTagCount, omittedTagLabel, omittedTagTitle, singleDisplayLabel, pickToken, tokenLabel, truncateTagLabel, optionFromToken, optionOrCreate, isOptionLimited, isTokenDisabled, restoreTokenValue, onSearchKeydown, onClear, removeTag, setValue, resetSearch } = useRsSelect(props, model, open, searchQuery, emit, t);
 		const resolvedDisabled = computed(() => props.disabled || formContext?.disabled.value || false);
 		const resolvedSize = useResolvedRsComponentSize(() => props.size);
 		const resolvedRadius = useResolvedRsRadius(() => props.radius, "sm");
@@ -228,10 +332,9 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			"--rs-select-list-height": `${props.listHeight}px`
 		}));
 		const portalTo = computed(() => {
-			if (!props.getPopupContainer) return void 0;
-			const raw = anchorRef.value;
-			const el = raw instanceof HTMLElement ? raw : raw?.$el;
-			return props.getPopupContainer(el instanceof HTMLElement ? el : void 0);
+			if (!props.getPopupContainer) return "body";
+			const el = triggerRef.value ?? void 0;
+			return props.getPopupContainer(el) ?? "body";
 		});
 		const autoMessage = ref("");
 		const isInvalid = computed(() => Boolean(props.invalid || props.status === "error" || boundToItem.value && formItem?.invalid.value || autoMessage.value));
@@ -271,19 +374,360 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 				autoMessage.value = message;
 			}
 		}));
+		function focus() {
+			triggerRef.value?.focus();
+		}
+		function blur() {
+			triggerRef.value?.blur();
+			searchInputRef.value?.blur();
+		}
 		__expose({
 			setValue,
 			clearValidation,
-			validate: runValidate
+			validate: runValidate,
+			focus,
+			blur
 		});
+		const listRows = computed(() => {
+			const rows = [];
+			if (canCreate.value) rows.push({
+				token: createValue.value,
+				label: createOptionLabel.value,
+				disabled: false,
+				isCreate: true
+			});
+			for (const entry of displayOptions.value) if (isSelectOptionGroup(entry)) for (const opt of entry.options) rows.push({
+				token: toComboboxValue(opt.value),
+				label: opt.label,
+				disabled: Boolean(opt.disabled || isOptionLimited(opt)),
+				isCreate: false,
+				option: opt,
+				title: opt.title
+			});
+			else rows.push({
+				token: toComboboxValue(entry.value),
+				label: entry.label,
+				disabled: Boolean(entry.disabled || isOptionLimited(entry)),
+				isCreate: false,
+				option: entry,
+				title: entry.title
+			});
+			return rows;
+		});
+		const highlight = ref(0);
+		const virtualStart = ref(0);
+		const popup = ref({
+			top: 0,
+			left: 0,
+			width: 0,
+			minWidth: 0,
+			placement: "bottom"
+		});
+		/** 面板挂到 body 后仍跟触发器最近的 data-rs-theme（深色岛 / 混主题页）。 */
+		const panelTheme = ref();
+		function syncPanelTheme() {
+			const el = triggerRef.value ?? rootRef.value;
+			if (!el) {
+				panelTheme.value = void 0;
+				return;
+			}
+			panelTheme.value = el.closest("[data-rs-theme]")?.getAttribute("data-rs-theme") ?? void 0;
+		}
+		const highlightedToken = computed(() => listRows.value[highlight.value]?.token);
+		const activeOptionId = computed(() => open.value && highlightedToken.value ? `${listId}-${highlightedToken.value}` : void 0);
+		const virtualSlice = computed(() => {
+			const all = virtualValues.value;
+			if (!useVirtual.value) return {
+				items: all,
+				padTop: 0,
+				padBottom: 0,
+				totalH: all.length * ITEM_ESTIMATE
+			};
+			const start = Math.max(0, virtualStart.value - VIRTUAL_OVERSCAN);
+			const viewCount = Math.ceil(props.listHeight / ITEM_ESTIMATE) + VIRTUAL_OVERSCAN * 2;
+			const items = all.slice(start, start + viewCount);
+			return {
+				items,
+				padTop: start * ITEM_ESTIMATE,
+				padBottom: Math.max(0, (all.length - start - items.length) * ITEM_ESTIMATE),
+				totalH: all.length * ITEM_ESTIMATE
+			};
+		});
+		const emptyVisible = computed(() => !props.loading && !canCreate.value && displayOptions.value.length === 0);
+		function placePopup() {
+			const trigger = triggerRef.value;
+			const content = contentRef.value;
+			if (!trigger || !open.value) return;
+			const anchor = trigger.getBoundingClientRect();
+			const measured = content?.getBoundingClientRect();
+			const height = measured?.height || Math.min(props.listHeight, 320);
+			const prefWidth = props.matchTriggerWidth ? anchor.width : Math.max(anchor.width, measured?.width || anchor.width);
+			const gap = 4;
+			const vw = window.innerWidth;
+			const vh = window.innerHeight;
+			if (props.placement === "left" || props.placement === "right") {
+				const width = Math.min(prefWidth, Math.max(0, vw - gap * 2));
+				const leftPos = anchor.left - width - gap;
+				const rightPos = anchor.right + gap;
+				let side = props.placement;
+				let left = side === "left" ? leftPos : rightPos;
+				if (side === "left" && leftPos < gap && rightPos + width <= vw - gap) {
+					side = "right";
+					left = rightPos;
+				} else if (side === "right" && rightPos + width > vw - gap && leftPos >= gap) {
+					side = "left";
+					left = leftPos;
+				}
+				left = Math.min(Math.max(gap, left), Math.max(gap, vw - width - gap));
+				const top = Math.min(Math.max(gap, anchor.top), Math.max(gap, vh - height - gap));
+				popup.value = {
+					top,
+					left,
+					width,
+					minWidth: anchor.width,
+					placement: side
+				};
+				return;
+			}
+			const box = placeAnchoredPopup({
+				top: anchor.top,
+				left: anchor.left,
+				height: anchor.height,
+				width: anchor.width
+			}, {
+				width: prefWidth,
+				height
+			}, {
+				width: vw,
+				height: vh
+			}, gap);
+			if (props.placement === "top") {
+				const above = anchor.top - height - gap;
+				if (above >= gap) {
+					popup.value = {
+						...box,
+						top: above,
+						minWidth: anchor.width,
+						placement: "top"
+					};
+					return;
+				}
+			}
+			popup.value = {
+				...box,
+				minWidth: anchor.width
+			};
+		}
+		let frame = 0;
+		let overlayBound = false;
+		function requestPlace() {
+			if (typeof window === "undefined") return;
+			if (frame) return;
+			frame = window.requestAnimationFrame(() => {
+				frame = 0;
+				placePopup();
+			});
+		}
+		function syncHighlight() {
+			const rows = listRows.value;
+			const selected = rows.findIndex((row) => selectedValues.value.includes(row.token) && !row.disabled);
+			highlight.value = selected >= 0 ? selected : stepEnabledIndex(rows, -1, 1);
+		}
+		function escapeToken(token) {
+			if (typeof CSS !== "undefined" && typeof CSS.escape === "function") return CSS.escape(token);
+			return token.replace(/\\/g, "\\\\").replace(/"/g, "\\\"");
+		}
+		function scrollHighlightIntoView() {
+			const token = highlightedToken.value;
+			if (!token) return;
+			const el = contentRef.value?.querySelector(`[data-value="${escapeToken(token)}"]`);
+			if (el && "scrollIntoView" in el) el.scrollIntoView({ block: "nearest" });
+		}
+		function toggleOpen() {
+			if (resolvedDisabled.value) return;
+			open.value = !open.value;
+		}
+		function onDocPointerDown(event) {
+			const target = event.target;
+			if (!target) return;
+			if (rootRef.value?.contains(target)) return;
+			if (contentRef.value?.contains(target)) return;
+			open.value = false;
+		}
+		function onWindowChange() {
+			if (open.value) requestPlace();
+		}
+		function attachOverlay() {
+			if (overlayBound || typeof window === "undefined") return;
+			overlayBound = true;
+			if (typeof document !== "undefined") document.addEventListener("pointerdown", onDocPointerDown);
+			window.addEventListener("resize", onWindowChange);
+			window.addEventListener("scroll", onWindowChange, true);
+		}
+		function detachOverlay() {
+			if (frame && typeof window !== "undefined") {
+				window.cancelAnimationFrame(frame);
+				frame = 0;
+			}
+			if (!overlayBound) return;
+			overlayBound = false;
+			if (typeof document !== "undefined") document.removeEventListener("pointerdown", onDocPointerDown);
+			if (typeof window !== "undefined") {
+				window.removeEventListener("resize", onWindowChange);
+				window.removeEventListener("scroll", onWindowChange, true);
+			}
+		}
+		function moveHighlight(delta) {
+			highlight.value = stepEnabledIndex(listRows.value, highlight.value, delta);
+			scrollHighlightIntoView();
+		}
+		function commitHighlight() {
+			const row = listRows.value[highlight.value];
+			if (!row || row.disabled) return;
+			pickToken(row.token);
+		}
+		function onTriggerKeydown(event) {
+			if (resolvedDisabled.value || event.isComposing) return;
+			if (event.key === "Escape") {
+				if (!open.value) return;
+				event.preventDefault();
+				open.value = false;
+				return;
+			}
+			if (event.key === "ArrowDown") {
+				event.preventDefault();
+				if (!open.value) {
+					open.value = true;
+					return;
+				}
+				moveHighlight(1);
+				return;
+			}
+			if (event.key === "ArrowUp") {
+				event.preventDefault();
+				if (!open.value) {
+					open.value = true;
+					return;
+				}
+				moveHighlight(-1);
+				return;
+			}
+			if (event.key === "Home" && open.value) {
+				event.preventDefault();
+				highlight.value = stepEnabledIndex(listRows.value, -1, 1);
+				scrollHighlightIntoView();
+				return;
+			}
+			if (event.key === "End" && open.value) {
+				event.preventDefault();
+				highlight.value = stepEnabledIndex(listRows.value, listRows.value.length, -1);
+				scrollHighlightIntoView();
+				return;
+			}
+			if (event.key === "Enter" && open.value) {
+				event.preventDefault();
+				commitHighlight();
+				return;
+			}
+			if (isSearchable.value) return;
+			if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) return;
+			onTypeahead(event.key);
+		}
+		function onPanelSearchKeydown(event) {
+			if (event.isComposing) return;
+			if (event.key === "Escape") {
+				event.preventDefault();
+				open.value = false;
+				triggerRef.value?.focus();
+				return;
+			}
+			if (event.key === "ArrowDown") {
+				event.preventDefault();
+				moveHighlight(1);
+				return;
+			}
+			if (event.key === "ArrowUp") {
+				event.preventDefault();
+				moveHighlight(-1);
+				return;
+			}
+			if (event.key === "Home") {
+				event.preventDefault();
+				highlight.value = stepEnabledIndex(listRows.value, -1, 1);
+				scrollHighlightIntoView();
+				return;
+			}
+			if (event.key === "End") {
+				event.preventDefault();
+				highlight.value = stepEnabledIndex(listRows.value, listRows.value.length, -1);
+				scrollHighlightIntoView();
+				return;
+			}
+			if (event.key === "Enter") {
+				event.preventDefault();
+				if (canCreate.value) {
+					onSearchKeydown(event);
+					return;
+				}
+				commitHighlight();
+			}
+		}
+		let typeahead = "";
+		let typeaheadTimer;
+		function onTypeahead(key) {
+			typeahead += key.toLowerCase();
+			if (typeaheadTimer) clearTimeout(typeaheadTimer);
+			typeaheadTimer = setTimeout(() => {
+				typeahead = "";
+				typeaheadTimer = void 0;
+			}, 500);
+			if (!open.value) open.value = true;
+			const idx = listRows.value.findIndex((row) => !row.disabled && row.label.toLowerCase().startsWith(typeahead));
+			if (idx >= 0) highlight.value = idx;
+		}
+		function onViewportScroll(event) {
+			emit("popupScroll", event);
+			if (!useVirtual.value) return;
+			const el = event.target;
+			virtualStart.value = Math.floor(el.scrollTop / ITEM_ESTIMATE);
+		}
+		function onViewportPointerOver(event) {
+			const raw = event.target;
+			if (!(raw instanceof Element)) return;
+			const item = raw.closest(".rs-select__item");
+			if (!item || !viewportRef.value?.contains(item)) return;
+			if (item.hasAttribute("data-disabled")) return;
+			const token = item.getAttribute("data-value");
+			if (!token) return;
+			const idx = listRows.value.findIndex((row) => row.token === token);
+			if (idx >= 0) highlight.value = idx;
+		}
+		function itemState(token) {
+			return selectedValues.value.includes(token) ? "checked" : void 0;
+		}
 		watch(open, (isOpen) => {
 			emit("dropdownVisibleChange", isOpen);
+			if (isOpen) {
+				virtualStart.value = 0;
+				syncPanelTheme();
+				syncHighlight();
+				attachOverlay();
+				nextTick(() => {
+					requestPlace();
+					if (isSearchable.value) searchInputRef.value?.focus();
+					else scrollHighlightIntoView();
+				});
+				return;
+			}
+			detachOverlay();
+		});
+		watch(listRows, () => {
+			if (!open.value) return;
+			syncHighlight();
+			requestPlace();
 		});
 		onMounted(() => {
-			if (!props.autoFocus) return;
-			const el = anchorRef.value;
-			const node = el instanceof HTMLElement ? el : el?.$el;
-			((node instanceof HTMLElement ? node : void 0)?.querySelector?.(".rs-select__trigger"))?.focus();
+			if (props.autoFocus) triggerRef.value?.focus();
 		});
 		const responsiveTagCap = ref(null);
 		let tagResize;
@@ -292,13 +736,11 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 				responsiveTagCap.value = null;
 				return;
 			}
-			const el = anchorRef.value;
-			const node = el instanceof HTMLElement ? el : el?.$el;
-			const trigger = (node instanceof HTMLElement ? node : void 0)?.querySelector?.(".rs-select__value--multiple");
-			if (!trigger) return;
-			const budget = trigger.clientWidth - 48;
+			const row = triggerRef.value?.querySelector(".rs-select__value--multiple");
+			if (!row) return;
+			const budget = row.clientWidth - 48;
 			if (budget <= 0) return;
-			const tags = Array.from(trigger.querySelectorAll(".rs-select__tag"));
+			const tags = Array.from(row.querySelectorAll(".rs-select__tag"));
 			if (!tags.length) {
 				responsiveTagCap.value = selectedValues.value.length;
 				return;
@@ -318,13 +760,15 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			if (typeof ResizeObserver === "undefined") return;
 			tagResize = new ResizeObserver(() => measureResponsiveTags());
 			nextTick(() => {
-				const el = anchorRef.value;
-				const node = el instanceof HTMLElement ? el : el?.$el;
-				if (node instanceof HTMLElement) tagResize?.observe(node);
+				if (triggerRef.value) tagResize?.observe(triggerRef.value);
 				measureResponsiveTags();
 			});
 		});
-		onUnmounted(() => tagResize?.disconnect());
+		onUnmounted(() => {
+			tagResize?.disconnect();
+			if (typeaheadTimer) clearTimeout(typeaheadTimer);
+			detachOverlay();
+		});
 		watch(() => [
 			selectedValues.value.join("\0"),
 			props.maxTagCount,
@@ -338,12 +782,19 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		function highlightParts(label) {
 			return splitSelectLabelHighlight(label, isSearchable.value ? searchQuery.value : "");
 		}
+		const contentStyle = computed(() => ({
+			position: "fixed",
+			top: `${popup.value.top}px`,
+			left: `${popup.value.left}px`,
+			"--rs-select-list-height": `${props.listHeight}px`,
+			"--rs-select-trigger-width": `${popup.value.minWidth || popup.value.width}px`,
+			...props.matchTriggerWidth ? { width: `${popup.value.width}px` } : {},
+			...props.dropdownStyle
+		}));
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(ComboboxRoot), {
-				modelValue: unref(comboboxModel),
-				"onUpdate:modelValue": _cache[9] || (_cache[9] = ($event) => isRef(comboboxModel) ? comboboxModel.value = $event : null),
-				open: open.value,
-				"onUpdate:open": _cache[10] || (_cache[10] = ($event) => open.value = $event),
+			return openBlock(), createElementBlock("div", {
+				ref_key: "rootRef",
+				ref: rootRef,
 				class: normalizeClass(["rs-select", {
 					"rs-select--multiple": unref(isMultiple),
 					"rs-select--searchable": unref(isSearchable),
@@ -352,269 +803,233 @@ var RsSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 					[`rs-select--${unref(resolvedSize)}`]: true,
 					[`rs-select--${__props.variant}`]: true
 				}]),
-				style: normalizeStyle(rootStyle.value),
-				multiple: unref(isMultiple),
-				disabled: resolvedDisabled.value,
-				"ignore-filter": unref(useManualFilter),
-				"reset-search-term-on-select": __props.autoClearSearchValue,
-				"open-on-click": ""
-			}, {
-				default: withCtx(() => [createVNode(unref(ComboboxAnchor), {
-					ref_key: "anchorRef",
-					ref: anchorRef,
-					"as-child": ""
-				}, {
-					default: withCtx(() => [createVNode(unref(ComboboxTrigger), mergeProps(unref(attrs), {
-						id: __props.id,
-						class: ["rs-select__trigger", [__props.classNames?.trigger, {
-							"rs-select__trigger--invalid": isInvalid.value,
-							"rs-select__trigger--warning": isWarning.value
-						}]],
-						"aria-invalid": isInvalid.value || void 0,
-						onFocus: _cache[3] || (_cache[3] = ($event) => emit("focus", $event)),
-						onBlur: _cache[4] || (_cache[4] = ($event) => emit("blur", $event))
-					}), {
-						default: withCtx(() => [
-							_ctx.$slots.prefix ? (openBlock(), createElementBlock("span", _hoisted_1, [renderSlot(_ctx.$slots, "prefix", {}, void 0, true)])) : createCommentVNode("", true),
-							unref(isMultiple) ? (openBlock(), createElementBlock("span", _hoisted_2, [unref(hasValue) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [(openBlock(true), createElementBlock(Fragment, null, renderList(shownTagTokens.value, (value) => {
-								return openBlock(), createElementBlock("span", {
-									key: value,
-									class: "rs-select__tag"
-								}, [renderSlot(_ctx.$slots, "tag", {
-									value: unref(restoreTokenValue)(value),
-									label: unref(tokenLabel)(value),
-									closable: true
-								}, () => [createElementVNode("span", _hoisted_3, toDisplayString(unref(truncateTagLabel)(unref(tokenLabel)(value))), 1), createElementVNode("button", {
-									type: "button",
-									class: "rs-select__tag-remove",
-									"aria-label": unref(t)("select.clear"),
-									onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"])),
-									onClick: ($event) => unref(removeTag)(value, $event)
-								}, [createVNode(RsIcon_default, {
-									name: "x",
-									size: 12
-								})], 40, _hoisted_4)], true)]);
-							}), 128)), shownOmittedCount.value > 0 ? (openBlock(), createElementBlock("span", {
-								key: 0,
-								class: "rs-select__tag rs-select__tag--rest",
-								title: unref(omittedTagTitle)
-							}, [renderSlot(_ctx.$slots, "maxTagPlaceholder", { omitted: shownOmittedCount.value }, () => [createTextVNode(toDisplayString(typeof __props.maxTagPlaceholder === "function" ? __props.maxTagPlaceholder(shownOmittedCount.value) : unref(omittedTagLabel)), 1)], true)], 8, _hoisted_5)) : createCommentVNode("", true)], 64)) : (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(unref(resolvedPlaceholder)), 1))])) : (openBlock(), createElementBlock("span", _hoisted_7, [unref(hasValue) ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(unref(singleDisplayLabel)), 1)) : (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(unref(resolvedPlaceholder)), 1))])),
-							createElementVNode("span", _hoisted_10, [__props.clearable && unref(hasValue) && !resolvedDisabled.value ? (openBlock(), createElementBlock("button", {
-								key: 0,
-								type: "button",
-								class: "rs-select__clear",
-								"aria-label": unref(t)("select.clear"),
-								onPointerdown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"])),
-								onClick: _cache[2] || (_cache[2] = (...args) => unref(onClear) && unref(onClear)(...args))
-							}, [renderSlot(_ctx.$slots, "clearIcon", {}, () => [createVNode(RsIcon_default, {
-								name: "x",
+				style: normalizeStyle(rootStyle.value)
+			}, [
+				__props.name ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [unref(isMultiple) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(selectedValues), (token) => {
+					return openBlock(), createElementBlock("input", {
+						key: token,
+						type: "hidden",
+						name: __props.name,
+						value: String(unref(restoreTokenValue)(token))
+					}, null, 8, _hoisted_1);
+				}), 128)) : (openBlock(), createElementBlock("input", {
+					key: 1,
+					type: "hidden",
+					name: __props.name,
+					value: unref(hasValue) ? String(unref(restoreTokenValue)(unref(selectedValues)[0])) : ""
+				}, null, 8, _hoisted_2))], 64)) : createCommentVNode("", true),
+				createElementVNode("button", mergeProps({
+					ref_key: "triggerRef",
+					ref: triggerRef
+				}, unref(attrs), {
+					id: __props.id,
+					type: "button",
+					class: ["rs-select__trigger", [__props.classNames?.trigger, {
+						"rs-select__trigger--invalid": isInvalid.value,
+						"rs-select__trigger--warning": isWarning.value
+					}]],
+					role: "combobox",
+					"aria-haspopup": "listbox",
+					"aria-expanded": open.value ? "true" : "false",
+					"aria-controls": open.value ? unref(listId) : void 0,
+					"aria-activedescendant": activeOptionId.value,
+					"aria-invalid": isInvalid.value || void 0,
+					"aria-disabled": resolvedDisabled.value ? "true" : void 0,
+					disabled: resolvedDisabled.value,
+					"data-disabled": resolvedDisabled.value ? "" : void 0,
+					"data-state": open.value ? "open" : "closed",
+					onClick: toggleOpen,
+					onKeydown: onTriggerKeydown,
+					onFocus: _cache[3] || (_cache[3] = ($event) => emit("focus", $event)),
+					onBlur: _cache[4] || (_cache[4] = ($event) => emit("blur", $event))
+				}), [
+					_ctx.$slots.prefix ? (openBlock(), createElementBlock("span", _hoisted_4, [renderSlot(_ctx.$slots, "prefix", {}, void 0, true)])) : createCommentVNode("", true),
+					unref(isMultiple) ? (openBlock(), createElementBlock("span", _hoisted_5, [unref(hasValue) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [(openBlock(true), createElementBlock(Fragment, null, renderList(shownTagTokens.value, (value) => {
+						return openBlock(), createElementBlock("span", {
+							key: value,
+							class: "rs-select__tag"
+						}, [renderSlot(_ctx.$slots, "tag", {
+							value: unref(restoreTokenValue)(value),
+							label: unref(tokenLabel)(value),
+							closable: true
+						}, () => [createElementVNode("span", _hoisted_6, toDisplayString(unref(truncateTagLabel)(unref(tokenLabel)(value))), 1), createElementVNode("button", {
+							type: "button",
+							class: "rs-select__tag-remove",
+							"aria-label": unref(t)("select.clear"),
+							onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"])),
+							onClick: ($event) => unref(removeTag)(value, $event)
+						}, [createVNode(RsIcon_default, {
+							name: "x",
+							size: 12
+						})], 40, _hoisted_7)], true)]);
+					}), 128)), shownOmittedCount.value > 0 ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						class: "rs-select__tag rs-select__tag--rest",
+						title: unref(omittedTagTitle)
+					}, [renderSlot(_ctx.$slots, "maxTagPlaceholder", { omitted: shownOmittedCount.value }, () => [createTextVNode(toDisplayString(typeof __props.maxTagPlaceholder === "function" ? __props.maxTagPlaceholder(shownOmittedCount.value) : unref(omittedTagLabel)), 1)], true)], 8, _hoisted_8)) : createCommentVNode("", true)], 64)) : (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(unref(resolvedPlaceholder)), 1))])) : (openBlock(), createElementBlock("span", _hoisted_10, [unref(hasValue) ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(unref(singleDisplayLabel)), 1)) : (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString(unref(resolvedPlaceholder)), 1))])),
+					createElementVNode("span", _hoisted_13, [__props.clearable && unref(hasValue) && !resolvedDisabled.value ? (openBlock(), createElementBlock("button", {
+						key: 0,
+						type: "button",
+						class: "rs-select__clear",
+						"aria-label": unref(t)("select.clear"),
+						onPointerdown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"])),
+						onClick: _cache[2] || (_cache[2] = (...args) => unref(onClear) && unref(onClear)(...args))
+					}, [renderSlot(_ctx.$slots, "clearIcon", {}, () => [createVNode(RsIcon_default, {
+						name: "x",
+						size: 14
+					})], true)], 40, _hoisted_14)) : createCommentVNode("", true), __props.showArrow ? (openBlock(), createElementBlock("span", _hoisted_15, [renderSlot(_ctx.$slots, "suffixIcon", {}, () => [createVNode(RsIcon_default, {
+						name: "chevron-down",
+						size: triggerIconSize.value,
+						class: "rs-select__icon"
+					}, null, 8, ["size"])], true)])) : createCommentVNode("", true)])
+				], 16, _hoisted_3),
+				(openBlock(), createBlock(Teleport, {
+					to: portalTo.value,
+					disabled: !open.value
+				}, [open.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					id: unref(listId),
+					ref_key: "contentRef",
+					ref: contentRef,
+					class: normalizeClass(["rs-select__content", [
+						`rs-select__content--${unref(resolvedSize)}`,
+						__props.popupClassName,
+						__props.classNames?.popup,
+						{ "rs-select__content--match-trigger": __props.matchTriggerWidth }
+					]]),
+					"data-placement": popup.value.placement,
+					"data-rs-theme": panelTheme.value,
+					style: normalizeStyle(contentStyle.value)
+				}, [renderSlot(_ctx.$slots, "dropdownRender", {}, () => [
+					_ctx.$slots.header ? (openBlock(), createElementBlock("div", _hoisted_17, [renderSlot(_ctx.$slots, "header", {}, void 0, true)])) : createCommentVNode("", true),
+					unref(isSearchable) ? (openBlock(), createElementBlock("div", _hoisted_18, [createElementVNode("div", _hoisted_19, [createVNode(RsIcon_default, {
+						name: "search",
+						size: 14,
+						class: "rs-select__search-icon",
+						"aria-hidden": "true"
+					}), withDirectives(createElementVNode("input", {
+						ref_key: "searchInputRef",
+						ref: searchInputRef,
+						"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => searchQuery.value = $event),
+						type: "text",
+						class: "rs-select__search",
+						placeholder: unref(resolvedSearchPlaceholder),
+						"aria-label": unref(resolvedSearchPlaceholder),
+						autocomplete: "off",
+						role: "searchbox",
+						"aria-controls": unref(listId),
+						"aria-activedescendant": activeOptionId.value,
+						onKeydown: onPanelSearchKeydown
+					}, null, 40, _hoisted_20), [[vModelText, searchQuery.value]])])])) : createCommentVNode("", true),
+					__props.loading ? (openBlock(), createElementBlock("div", _hoisted_21, [renderSlot(_ctx.$slots, "loading", {}, () => [createTextVNode(toDisplayString(unref(resolvedLoadingText)), 1)], true)])) : emptyVisible.value ? (openBlock(), createElementBlock("div", _hoisted_22, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(unref(resolvedEmptyText)), 1)], true)])) : createCommentVNode("", true),
+					!__props.loading ? (openBlock(), createElementBlock("div", {
+						key: 4,
+						ref_key: "viewportRef",
+						ref: viewportRef,
+						class: "rs-select__viewport",
+						role: "listbox",
+						"aria-multiselectable": unref(isMultiple) ? "true" : void 0,
+						"aria-label": unref(t)("select.listbox"),
+						onScroll: onViewportScroll,
+						onPointerover: onViewportPointerOver
+					}, [unref(useVirtual) ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: "rs-select__virtual",
+						style: normalizeStyle({ height: `${virtualSlice.value.totalH}px` })
+					}, [createElementVNode("div", { style: normalizeStyle({
+						transform: `translateY(${virtualSlice.value.padTop}px)`,
+						paddingBottom: `${virtualSlice.value.padBottom}px`
+					}) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(virtualSlice.value.items, (token) => {
+						return openBlock(), createElementBlock("div", {
+							id: `${unref(listId)}-${token}`,
+							key: token,
+							role: "option",
+							class: normalizeClass(["rs-select__item", { "rs-select__item--create": unref(canCreate) && token === unref(createValue) }]),
+							"data-value": token,
+							"data-highlighted": highlightedToken.value === token ? "" : void 0,
+							"data-state": itemState(token),
+							"data-disabled": unref(isTokenDisabled)(token) ? "" : void 0,
+							"aria-selected": unref(selectedValues).includes(token) ? "true" : "false",
+							"aria-disabled": unref(isTokenDisabled)(token) ? "true" : void 0,
+							title: unref(optionFromToken)(token)?.title,
+							onClick: ($event) => unref(pickToken)(token)
+						}, [createElementVNode("span", _hoisted_25, [renderSlot(_ctx.$slots, "option", {
+							option: unref(optionOrCreate)(token),
+							selected: unref(selectedValues).includes(token)
+						}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(highlightParts(unref(canCreate) && token === unref(createValue) ? unref(createOptionLabel) : unref(labelMap).get(token) ?? String(token)), (part, i) => {
+							return openBlock(), createElementBlock(Fragment, { key: i }, [part.highlight ? (openBlock(), createElementBlock("mark", _hoisted_26, toDisplayString(part.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(part.text), 1)], 64))], 64);
+						}), 128))], true)]), unref(selectedValues).includes(token) ? (openBlock(), createElementBlock("span", _hoisted_27, [createVNode(RsIcon_default, {
+							name: "check",
+							size: 14
+						})])) : createCommentVNode("", true)], 10, _hoisted_24);
+					}), 128))], 4)], 4)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [unref(canCreate) ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						id: `${unref(listId)}-${unref(createValue)}`,
+						role: "option",
+						class: "rs-select__item rs-select__item--create",
+						"data-value": unref(createValue),
+						"data-highlighted": highlightedToken.value === unref(createValue) ? "" : void 0,
+						"data-state": itemState(unref(createValue)),
+						"aria-selected": unref(selectedValues).includes(unref(createValue)) ? "true" : "false",
+						onClick: _cache[6] || (_cache[6] = ($event) => unref(pickToken)(unref(createValue)))
+					}, [createElementVNode("span", _hoisted_29, toDisplayString(unref(createOptionLabel)), 1), unref(selectedValues).includes(unref(createValue)) ? (openBlock(), createElementBlock("span", _hoisted_30, [createVNode(RsIcon_default, {
+						name: "check",
+						size: 14
+					})])) : createCommentVNode("", true)], 8, _hoisted_28)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(displayOptions), (entry, index) => {
+						return openBlock(), createElementBlock(Fragment, { key: index }, [unref(isSelectOptionGroup)(entry) ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							class: "rs-select__group",
+							role: "group",
+							"aria-label": entry.label
+						}, [createElementVNode("div", _hoisted_32, toDisplayString(entry.label), 1), (openBlock(true), createElementBlock(Fragment, null, renderList(entry.options, (opt) => {
+							return openBlock(), createElementBlock("div", {
+								id: `${unref(listId)}-${unref(toComboboxValue)(opt.value)}`,
+								key: unref(toComboboxValue)(opt.value),
+								role: "option",
+								class: "rs-select__item",
+								"data-value": unref(toComboboxValue)(opt.value),
+								"data-highlighted": highlightedToken.value === unref(toComboboxValue)(opt.value) ? "" : void 0,
+								"data-state": itemState(unref(toComboboxValue)(opt.value)),
+								"data-disabled": opt.disabled || unref(isOptionLimited)(opt) ? "" : void 0,
+								"aria-selected": unref(selectedValues).includes(unref(toComboboxValue)(opt.value)) ? "true" : "false",
+								"aria-disabled": opt.disabled || unref(isOptionLimited)(opt) ? "true" : void 0,
+								title: opt.title,
+								onClick: ($event) => unref(pickToken)(unref(toComboboxValue)(opt.value))
+							}, [createElementVNode("span", _hoisted_34, [renderSlot(_ctx.$slots, "option", {
+								option: opt,
+								selected: unref(selectedValues).includes(unref(toComboboxValue)(opt.value))
+							}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(highlightParts(opt.label), (part, i) => {
+								return openBlock(), createElementBlock(Fragment, { key: i }, [part.highlight ? (openBlock(), createElementBlock("mark", _hoisted_35, toDisplayString(part.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(part.text), 1)], 64))], 64);
+							}), 128))], true)]), unref(selectedValues).includes(unref(toComboboxValue)(opt.value)) ? (openBlock(), createElementBlock("span", _hoisted_36, [createVNode(RsIcon_default, {
+								name: "check",
 								size: 14
-							})], true)], 40, _hoisted_11)) : createCommentVNode("", true), __props.showArrow ? (openBlock(), createElementBlock("span", _hoisted_12, [renderSlot(_ctx.$slots, "suffixIcon", {}, () => [createVNode(RsIcon_default, {
-								name: "chevron-down",
-								size: triggerIconSize.value,
-								class: "rs-select__icon"
-							}, null, 8, ["size"])], true)])) : createCommentVNode("", true)])
-						]),
-						_: 3
-					}, 16, [
-						"id",
-						"class",
-						"aria-invalid"
-					])]),
-					_: 3
-				}, 512), createVNode(unref(ComboboxPortal), { to: portalTo.value }, {
-					default: withCtx(() => [createVNode(unref(ComboboxContent), {
-						class: normalizeClass(["rs-select__content", [
-							`rs-select__content--${unref(resolvedSize)}`,
-							__props.popupClassName,
-							__props.classNames?.popup,
-							{ "rs-select__content--match-trigger": __props.matchTriggerWidth }
-						]]),
-						style: normalizeStyle({
-							"--rs-select-list-height": `${__props.listHeight}px`,
-							...__props.dropdownStyle
-						}),
-						align: "start",
-						side: __props.placement,
-						"side-offset": 4,
-						position: "popper"
-					}, {
-						default: withCtx(() => [renderSlot(_ctx.$slots, "dropdownRender", {}, () => [
-							_ctx.$slots.header ? (openBlock(), createElementBlock("div", {
-								key: 0,
-								class: "rs-select__panel-header",
-								onMousedown: _cache[5] || (_cache[5] = withModifiers(() => {}, ["prevent"]))
-							}, [renderSlot(_ctx.$slots, "header", {}, void 0, true)], 32)) : createCommentVNode("", true),
-							unref(isSearchable) ? (openBlock(), createElementBlock("div", _hoisted_13, [createElementVNode("div", _hoisted_14, [createVNode(RsIcon_default, {
-								name: "search",
-								size: 14,
-								class: "rs-select__search-icon",
-								"aria-hidden": "true"
-							}), createVNode(unref(ComboboxInput), {
-								modelValue: searchQuery.value,
-								"onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => searchQuery.value = $event),
-								class: "rs-select__search",
-								placeholder: unref(resolvedSearchPlaceholder),
-								"auto-focus": "",
-								onKeydown: unref(onSearchKeydown)
-							}, null, 8, [
-								"modelValue",
-								"placeholder",
-								"onKeydown"
-							])])])) : createCommentVNode("", true),
-							__props.loading ? (openBlock(), createElementBlock("div", _hoisted_15, [renderSlot(_ctx.$slots, "loading", {}, () => [createTextVNode(toDisplayString(unref(resolvedLoadingText)), 1)], true)])) : createCommentVNode("", true),
-							!__props.loading && !unref(canCreate) ? (openBlock(), createBlock(unref(ComboboxEmpty), {
-								key: 3,
-								class: "rs-select__empty"
-							}, {
-								default: withCtx(() => [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(unref(resolvedEmptyText)), 1)], true)]),
-								_: 3
-							})) : createCommentVNode("", true),
-							createVNode(unref(ComboboxViewport), {
-								class: "rs-select__viewport",
-								onScroll: _cache[7] || (_cache[7] = ($event) => emit("popupScroll", $event))
-							}, {
-								default: withCtx(() => [unref(useVirtual) ? (openBlock(), createBlock(unref(ComboboxVirtualizer), {
-									key: 0,
-									options: unref(virtualValues),
-									"text-content": (value) => unref(labelMap).get(String(value)) ?? String(value),
-									"estimate-size": 36
-								}, {
-									default: withCtx(({ option }) => [createVNode(unref(ComboboxItem), {
-										value: option,
-										disabled: unref(isTokenDisabled)(String(option)),
-										"text-value": unref(labelMap).get(String(option)) ?? String(option),
-										class: normalizeClass(["rs-select__item", { "rs-select__item--create": unref(canCreate) && String(option) === unref(createValue) }]),
-										title: unref(optionFromToken)(String(option))?.title
-									}, {
-										default: withCtx(() => [createElementVNode("span", _hoisted_16, [renderSlot(_ctx.$slots, "option", {
-											option: unref(optionOrCreate)(String(option)),
-											selected: unref(selectedValues).includes(String(option))
-										}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(highlightParts(unref(canCreate) && String(option) === unref(createValue) ? unref(createOptionLabel) : unref(labelMap).get(String(option)) ?? String(option)), (part, i) => {
-											return openBlock(), createElementBlock(Fragment, { key: i }, [part.highlight ? (openBlock(), createElementBlock("mark", _hoisted_17, toDisplayString(part.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(part.text), 1)], 64))], 64);
-										}), 128))], true)]), createVNode(unref(ComboboxItemIndicator), { class: "rs-select__item-check" }, {
-											default: withCtx(() => [createVNode(RsIcon_default, {
-												name: "check",
-												size: 14
-											})]),
-											_: 1
-										})]),
-										_: 2
-									}, 1032, [
-										"value",
-										"disabled",
-										"text-value",
-										"class",
-										"title"
-									])]),
-									_: 3
-								}, 8, ["options", "text-content"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [unref(canCreate) ? (openBlock(), createBlock(unref(ComboboxItem), {
-									key: 0,
-									value: unref(createValue),
-									"text-value": unref(createValue),
-									class: "rs-select__item rs-select__item--create"
-								}, {
-									default: withCtx(() => [createElementVNode("span", _hoisted_18, toDisplayString(unref(createOptionLabel)), 1), createVNode(unref(ComboboxItemIndicator), { class: "rs-select__item-check" }, {
-										default: withCtx(() => [createVNode(RsIcon_default, {
-											name: "check",
-											size: 14
-										})]),
-										_: 1
-									})]),
-									_: 1
-								}, 8, ["value", "text-value"])) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(displayOptions), (entry, index) => {
-									return openBlock(), createElementBlock(Fragment, { key: index }, [unref(isSelectOptionGroup)(entry) ? (openBlock(), createBlock(unref(ComboboxGroup), {
-										key: 0,
-										class: "rs-select__group"
-									}, {
-										default: withCtx(() => [createVNode(unref(ComboboxLabel), { class: "rs-select__group-label" }, {
-											default: withCtx(() => [createTextVNode(toDisplayString(entry.label), 1)]),
-											_: 2
-										}, 1024), (openBlock(true), createElementBlock(Fragment, null, renderList(entry.options, (opt) => {
-											return openBlock(), createBlock(unref(ComboboxItem), {
-												key: unref(toComboboxValue)(opt.value),
-												value: unref(toComboboxValue)(opt.value),
-												disabled: opt.disabled || unref(isOptionLimited)(opt),
-												"text-value": opt.label,
-												class: "rs-select__item",
-												title: opt.title
-											}, {
-												default: withCtx(() => [createElementVNode("span", _hoisted_19, [renderSlot(_ctx.$slots, "option", {
-													option: opt,
-													selected: unref(selectedValues).includes(unref(toComboboxValue)(opt.value))
-												}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(highlightParts(opt.label), (part, i) => {
-													return openBlock(), createElementBlock(Fragment, { key: i }, [part.highlight ? (openBlock(), createElementBlock("mark", _hoisted_20, toDisplayString(part.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(part.text), 1)], 64))], 64);
-												}), 128))], true)]), createVNode(unref(ComboboxItemIndicator), { class: "rs-select__item-check" }, {
-													default: withCtx(() => [createVNode(RsIcon_default, {
-														name: "check",
-														size: 14
-													})]),
-													_: 1
-												})]),
-												_: 2
-											}, 1032, [
-												"value",
-												"disabled",
-												"text-value",
-												"title"
-											]);
-										}), 128))]),
-										_: 2
-									}, 1024)) : (openBlock(), createBlock(unref(ComboboxItem), {
-										key: unref(toComboboxValue)(entry.value),
-										value: unref(toComboboxValue)(entry.value),
-										disabled: entry.disabled || unref(isOptionLimited)(entry),
-										"text-value": entry.label,
-										class: "rs-select__item",
-										title: entry.title
-									}, {
-										default: withCtx(() => [createElementVNode("span", _hoisted_21, [renderSlot(_ctx.$slots, "option", {
-											option: entry,
-											selected: unref(selectedValues).includes(unref(toComboboxValue)(entry.value))
-										}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(highlightParts(entry.label), (part, i) => {
-											return openBlock(), createElementBlock(Fragment, { key: i }, [part.highlight ? (openBlock(), createElementBlock("mark", _hoisted_22, toDisplayString(part.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(part.text), 1)], 64))], 64);
-										}), 128))], true)]), createVNode(unref(ComboboxItemIndicator), { class: "rs-select__item-check" }, {
-											default: withCtx(() => [createVNode(RsIcon_default, {
-												name: "check",
-												size: 14
-											})]),
-											_: 1
-										})]),
-										_: 2
-									}, 1032, [
-										"value",
-										"disabled",
-										"text-value",
-										"title"
-									]))], 64);
-								}), 128))], 64))]),
-								_: 3
-							}),
-							_ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
-								key: 4,
-								class: "rs-select__panel-footer",
-								onMousedown: _cache[8] || (_cache[8] = withModifiers(() => {}, ["prevent"]))
-							}, [renderSlot(_ctx.$slots, "footer", {}, void 0, true)], 32)) : createCommentVNode("", true)
-						], true)]),
-						_: 3
-					}, 8, [
-						"class",
-						"style",
-						"side"
-					])]),
-					_: 3
-				}, 8, ["to"])]),
-				_: 3
-			}, 8, [
-				"modelValue",
-				"open",
-				"class",
-				"style",
-				"multiple",
-				"disabled",
-				"ignore-filter",
-				"reset-search-term-on-select"
-			]);
+							})])) : createCommentVNode("", true)], 8, _hoisted_33);
+						}), 128))], 8, _hoisted_31)) : (openBlock(), createElementBlock("div", {
+							id: `${unref(listId)}-${unref(toComboboxValue)(entry.value)}`,
+							key: unref(toComboboxValue)(entry.value),
+							role: "option",
+							class: "rs-select__item",
+							"data-value": unref(toComboboxValue)(entry.value),
+							"data-highlighted": highlightedToken.value === unref(toComboboxValue)(entry.value) ? "" : void 0,
+							"data-state": itemState(unref(toComboboxValue)(entry.value)),
+							"data-disabled": entry.disabled || unref(isOptionLimited)(entry) ? "" : void 0,
+							"aria-selected": unref(selectedValues).includes(unref(toComboboxValue)(entry.value)) ? "true" : "false",
+							"aria-disabled": entry.disabled || unref(isOptionLimited)(entry) ? "true" : void 0,
+							title: entry.title,
+							onClick: ($event) => unref(pickToken)(unref(toComboboxValue)(entry.value))
+						}, [createElementVNode("span", _hoisted_38, [renderSlot(_ctx.$slots, "option", {
+							option: entry,
+							selected: unref(selectedValues).includes(unref(toComboboxValue)(entry.value))
+						}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(highlightParts(entry.label), (part, i) => {
+							return openBlock(), createElementBlock(Fragment, { key: i }, [part.highlight ? (openBlock(), createElementBlock("mark", _hoisted_39, toDisplayString(part.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(part.text), 1)], 64))], 64);
+						}), 128))], true)]), unref(selectedValues).includes(unref(toComboboxValue)(entry.value)) ? (openBlock(), createElementBlock("span", _hoisted_40, [createVNode(RsIcon_default, {
+							name: "check",
+							size: 14
+						})])) : createCommentVNode("", true)], 8, _hoisted_37))], 64);
+					}), 128))], 64))], 40, _hoisted_23)) : createCommentVNode("", true),
+					_ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_41, [renderSlot(_ctx.$slots, "footer", {}, void 0, true)])) : createCommentVNode("", true)
+				], true)], 14, _hoisted_16)) : createCommentVNode("", true)], 8, ["to", "disabled"]))
+			], 6);
 		};
 	}
 });