ropav 0.1.6 → 0.1.8

package/dist/select.js

@@ -1,126 +1,18 @@
 import './select.css';
-import { t as useControllableValue } from "./useControllableValue.js";
-import { n as useStylesApi, t as presence } from "./styles-api.js";
+import { t as useStylesApi } from "./styles-api.js";
+import { n as toPresenceAttribute } from "./attributes.js";
 import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as x_default } from "./x.js";
-import { i as useFormControl } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
-import { n as getNextEnabledIndex, r as useTypeahead, t as getEnabledIndexes } from "./collectionNavigation.js";
+import { t as resolveHTMLElementRef } from "./componentRef.js";
+import { i as isNodeWithinElement } from "./events.js";
+import { t as useFloatingPosition } from "./useFloatingPosition.js";
+import { n as useClickOutside, r as chevrons_up_down_default, t as useFlatOptionCollection } from "./useFlatOptionCollection.js";
 import { t as scroll_area_default } from "./scroll-area.js";
-import { VaporTransition, child, computed, createComponent, createFor, createIf, createInvoker, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, extend, markRaw, next, nextTick, on, onBeforeUnmount, onMounted, ref, renderEffect, setDynamicProps, setInsertionState, setProp, setText, setValue, shallowRef, template, toDisplayString, txt, unref, useId, watch, watchEffect, withModifiers, withVaporModifiers } from "vue";
-//#region ~icons/lucide/chevrons-up-down
-var t0$1 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"m7 15l5 5l5-5M7 9l5-5l5 5\">", 3, 1);
-function render(_ctx) {
-	return t0$1();
-}
-var chevrons_up_down_default = markRaw(defineVaporComponent({
-	name: "lucide-chevrons-up-down",
-	render
-}));
-//#endregion
-//#region src/internal/composables/useClickOutside.ts
-function isEventInside(event, element) {
-	if (event.composedPath().includes(element)) return true;
-	const eventTarget = event.target;
-	const NodeConstructor = element.ownerDocument.defaultView?.Node;
-	return Boolean(eventTarget && NodeConstructor && eventTarget instanceof NodeConstructor && element.contains(eventTarget));
-}
-function useClickOutside(target, active, callback) {
-	const targets = Array.isArray(target) ? target : [target];
-	const listeningDocuments = /* @__PURE__ */ new Set();
-	let stopWatch;
-	function handler(event) {
-		if (!targets.some((current) => {
-			const element = current.value;
-			return element ? isEventInside(event, element) : false;
-		})) callback(event);
-	}
-	function detachListeners() {
-		for (const document of listeningDocuments) document.removeEventListener("click", handler, true);
-		listeningDocuments.clear();
-	}
-	function syncListeners() {
-		detachListeners();
-		if (!active.value) return;
-		for (const current of targets) {
-			const document = current.value?.ownerDocument;
-			if (!document || listeningDocuments.has(document)) continue;
-			document.addEventListener("click", handler, true);
-			listeningDocuments.add(document);
-		}
-	}
-	onMounted(() => {
-		stopWatch = watch([active, ...targets], syncListeners, { immediate: true });
-	});
-	onBeforeUnmount(() => {
-		stopWatch?.();
-		detachListeners();
-	});
-}
-//#endregion
-//#region src/internal/composables/useCollectionNavigation.ts
-function useCollectionNavigation(options) {
-	const activeKey = shallowRef(null);
-	const isDisabled = options.isDisabled ?? (() => false);
-	const loop = options.loop ?? true;
-	const activeIndex = computed(() => {
-		if (activeKey.value == null) return -1;
-		return options.items().findIndex((item) => options.getKey(item) === activeKey.value && !isDisabled(item));
-	});
-	const enabledIndexes = computed(() => getEnabledIndexes(options.items(), isDisabled));
-	function resetActive() {
-		activeKey.value = null;
-	}
-	function setActiveIndex(index) {
-		const item = options.items()[index];
-		if (!item || isDisabled(item)) return false;
-		activeKey.value = options.getKey(item);
-		return true;
-	}
-	function focusSelected() {
-		const items = options.items();
-		const selectedIndex = options.isSelected ? items.findIndex((item) => options.isSelected(item) && !isDisabled(item)) : -1;
-		if (selectedIndex >= 0) setActiveIndex(selectedIndex);
-		else focusFirst();
-	}
-	function focusFirst() {
-		const first = enabledIndexes.value[0];
-		if (first === void 0) resetActive();
-		else setActiveIndex(first);
-	}
-	function focusLast() {
-		const indexes = enabledIndexes.value;
-		const last = indexes[indexes.length - 1];
-		if (last === void 0) resetActive();
-		else setActiveIndex(last);
-	}
-	function moveFocus(direction) {
-		if (activeIndex.value < 0) {
-			if (direction === 1) focusFirst();
-			else focusLast();
-			return;
-		}
-		const nextIndex = getNextEnabledIndex(options.items(), activeIndex.value, direction, isDisabled, loop);
-		if (nextIndex === void 0) resetActive();
-		else setActiveIndex(nextIndex);
-	}
-	watch(activeIndex, (index) => {
-		if (activeKey.value != null && index < 0) resetActive();
-	}, { flush: "sync" });
-	return {
-		activeKey,
-		activeIndex,
-		enabledIndexes,
-		resetActive,
-		setActiveIndex,
-		focusSelected,
-		focusFirst,
-		focusLast,
-		moveFocus
-	};
-}
-//#endregion
+import { i as useHiddenSelectChoiceTransaction, n as createSingleNativeChoiceAdapter } from "./nativeChoice.js";
+import { t as useTypeahead } from "./useTypeahead.js";
+import { VaporTransition, child, computed, createComponent, createFor, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, next, nextTick, on, ref, renderEffect, setDynamicProps, setInsertionState, setProp, setTemplateRefBinding, setText, setValue, template, toDisplayString, txt, unref, useId, withModifiers } from "vue";
 //#region src/components/select/useSelect.ts
 function hasSelectValue(value) {
 	return value != null && value !== "";
@@ -129,36 +21,72 @@ function getSelectDisplayLabel(options, value) {
 	if (!hasSelectValue(value)) return "";
 	return options?.find((option) => option.value === value)?.label ?? "";
 }
-function getSelectActiveDescendantId(baseId, focusedIndex, isOpen) {
-	return !isOpen || focusedIndex < 0 ? void 0 : `${baseId}-option-${focusedIndex}`;
+function useSelectTransaction(props, emitUpdate, triggerRef) {
+	const transaction = useHiddenSelectChoiceTransaction({
+		value: {
+			modelValue: () => props.modelValue,
+			defaultValue: () => props.defaultValue ?? null,
+			onChange: emitUpdate
+		},
+		native: {
+			adapter: createSingleNativeChoiceAdapter({
+				emptyValue: null,
+				options: () => props.options
+			}),
+			attributes: () => props.inputAttrs,
+			className: "rp-select__native",
+			focusVisible: () => triggerRef.value?.focus(),
+			validationMessage: () => props.validationMessage
+		}
+	});
+	return {
+		nativeSelectRef: transaction.nativeSelectRef,
+		nativeInputAttrs: transaction.nativeSelectAttrs,
+		requestValueUpdate: transaction.requestValueUpdate,
+		selectedValue: transaction.value
+	};
 }
-function useSelect(props, emitUpdate, getValue = () => props.modelValue ?? null, triggerRef = ref(null)) {
+function useSelect(props, emitUpdate) {
 	const selectRef = ref(null);
+	const triggerRef = ref(null);
+	const dropdownRef = ref(null);
 	const isOpen = ref(false);
+	const transaction = useSelectTransaction(props, emitUpdate, triggerRef);
+	const value = transaction.selectedValue;
 	const selectId = useId();
 	const popupId = `${selectId}-popup`;
 	const listboxId = `${popupId}-viewport`;
 	const control = useControlState(props);
 	const visibleOptions = computed(() => props.options ?? []);
-	const value = computed(getValue);
-	const navigation = useCollectionNavigation({
+	const optionCollection = useFlatOptionCollection({
 		items: () => visibleOptions.value,
+		baseId: selectId,
+		isOpen: () => isOpen.value,
+		collectionRef: selectRef,
 		getKey: (item) => item.value,
 		isDisabled: (item) => Boolean(item.disabled),
 		isSelected: (item) => item.value === value.value
 	});
-	const focusedIndex = navigation.activeIndex;
+	const renderedOptions = optionCollection.options;
+	const focusedIndex = optionCollection.activeIndex;
 	const selectedIndex = computed(() => visibleOptions.value.findIndex((option) => option.value === value.value && !option.disabled));
-	const activeDescendantId = computed(() => getSelectActiveDescendantId(selectId, focusedIndex.value, isOpen.value));
+	const activeDescendantId = optionCollection.activeDescendantId;
+	const floating = useFloatingPosition({
+		reference: triggerRef,
+		floating: dropdownRef,
+		open: isOpen,
+		placement: "bottom-start"
+	});
+	const placementSide = computed(() => floating.actualPlacement.value.split("-")[0]);
 	const typeahead = useTypeahead({
 		items: () => visibleOptions.value,
 		activeIndex: () => isOpen.value ? focusedIndex.value : selectedIndex.value,
 		getKey: (item) => item.value,
 		getTextValue: (item) => item.label,
 		isDisabled: (item) => Boolean(item.disabled),
-		onMatch(item, index) {
-			if (isOpen.value) navigation.setActiveIndex(index);
-			else if (item.value !== value.value) emitUpdate(item.value);
+		onMatch(item) {
+			if (isOpen.value) optionCollection.activate(item);
+			else if (item.value !== value.value) transaction.requestValueUpdate(item.value);
 		}
 	});
 	const rootClass = computed(() => bem("rp-select", {
@@ -171,6 +99,11 @@ function useSelect(props, emitUpdate, getValue = () => props.modelValue ?? null,
 	const hasValue = computed(() => hasSelectValue(value.value));
 	const displayLabel = computed(() => getSelectDisplayLabel(props.options, value.value));
 	const canClear = computed(() => Boolean(props.clearable && hasValue.value && !control.disabled));
+	function setDropdownElement(elementRef) {
+		resolveHTMLElementRef(elementRef, popupId, (resolved) => {
+			dropdownRef.value = resolved;
+		});
+	}
 	function focusTrigger() {
 		nextTick(() => triggerRef.value?.focus());
 	}
@@ -178,11 +111,11 @@ function useSelect(props, emitUpdate, getValue = () => props.modelValue ?? null,
 		if (control.disabled || isOpen.value) return;
 		typeahead.reset();
 		isOpen.value = true;
-		navigation.focusSelected();
+		optionCollection.activate("selected");
 	}
 	function close() {
 		isOpen.value = false;
-		navigation.resetActive();
+		optionCollection.reset();
 		typeahead.reset();
 	}
 	function toggle() {
@@ -194,22 +127,21 @@ function useSelect(props, emitUpdate, getValue = () => props.modelValue ?? null,
 	}
 	function selectOption(option) {
 		if (option.disabled) return;
-		emitUpdate(option.value);
+		transaction.requestValueUpdate(option.value);
 		close();
 		focusTrigger();
 	}
 	function clearSelection() {
 		if (!canClear.value) return;
-		emitUpdate(null);
+		transaction.requestValueUpdate(null);
 		close();
 		focusTrigger();
 	}
-	function onOptionMouseenter(option, index) {
-		if (!option.disabled) navigation.setActiveIndex(index);
+	function onOptionMouseenter(option) {
+		optionCollection.activate(option);
 	}
 	function onFocusout(event) {
-		const nextTarget = event.relatedTarget;
-		if (nextTarget instanceof Node && selectRef.value?.contains(nextTarget)) return;
+		if (isNodeWithinElement(event.relatedTarget, selectRef.value)) return;
 		close();
 	}
 	function selectFocusedOption() {
@@ -233,25 +165,25 @@ function useSelect(props, emitUpdate, getValue = () => props.modelValue ?? null,
 			case "ArrowDown":
 				e.preventDefault();
 				if (!isOpen.value) open();
-				else navigation.moveFocus(1);
+				else optionCollection.move(1);
 				break;
 			case "ArrowUp":
 				e.preventDefault();
 				if (!isOpen.value) {
 					open();
-					navigation.focusLast();
-				} else navigation.moveFocus(-1);
+					optionCollection.activate("last");
+				} else optionCollection.move(-1);
 				break;
 			case "Home":
 				if (isOpen.value) {
 					e.preventDefault();
-					navigation.focusFirst();
+					optionCollection.activate("first");
 				}
 				break;
 			case "End":
 				if (isOpen.value) {
 					e.preventDefault();
-					navigation.focusLast();
+					optionCollection.activate("last");
 				}
 				break;
 			case "Delete":
@@ -268,30 +200,31 @@ function useSelect(props, emitUpdate, getValue = () => props.modelValue ?? null,
 				break;
 		}
 	}
-	watch(focusedIndex, (index) => {
-		if (!isOpen.value || index < 0) return;
-		nextTick(() => {
-			if (!isOpen.value || focusedIndex.value !== index) return;
-			selectRef.value?.querySelector(`[id="${selectId}-option-${index}"]`)?.scrollIntoView?.({ block: "nearest" });
-		});
-	});
 	useClickOutside(selectRef, isOpen, close);
 	return {
-		selectRef,
-		triggerRef,
+		templateRefs: {
+			select: selectRef,
+			trigger: triggerRef,
+			native: transaction.nativeSelectRef
+		},
+		nativeInputAttrs: transaction.nativeInputAttrs,
 		isOpen,
-		selectId,
 		popupId,
 		listboxId,
 		control,
 		visibleOptions,
+		renderedOptions,
 		focusedIndex,
 		activeDescendantId,
 		rootClass,
+		floatingStyle: floating.floatingStyle,
+		actualPlacement: floating.actualPlacement,
+		placementSide,
 		hasValue,
 		displayLabel,
-		value,
+		selectedValue: value,
 		canClear,
+		setDropdownElement,
 		toggle,
 		selectOption,
 		clearSelection,
@@ -301,108 +234,13 @@ function useSelect(props, emitUpdate, getValue = () => props.modelValue ?? null,
 	};
 }
 //#endregion
-//#region src/components/select/useSelectNativeValue.ts
-function useSelectNativeValue(props, emitUpdate) {
-	const nativeSelectRef = ref(null);
-	const controllable = useControllableValue({
-		modelValue: () => props.modelValue,
-		defaultValue: () => props.defaultValue ?? null,
-		onChange: emitUpdate
-	});
-	function getNativeValue(select) {
-		if (select.selectedIndex <= 0) return null;
-		return props.options?.[select.selectedIndex - 1]?.value ?? null;
-	}
-	function syncNativeSelection(value) {
-		const select = nativeSelectRef.value;
-		if (!select) return;
-		select.selectedIndex = (props.options?.findIndex((option) => option.value === value) ?? -1) + 1;
-	}
-	function syncNativeDefaultSelection() {
-		const select = nativeSelectRef.value;
-		if (!select) return;
-		const optionIndex = props.options?.findIndex((option) => option.value === controllable.initialValue) ?? -1;
-		for (const [index, option] of [...select.options].entries()) option.defaultSelected = index === optionIndex + 1;
-	}
-	function requestValueUpdate(value) {
-		const select = nativeSelectRef.value;
-		if (!select) {
-			controllable.setValue(value);
-			return;
-		}
-		syncNativeSelection(value);
-		select.dispatchEvent(new Event("input", {
-			bubbles: true,
-			cancelable: true
-		}));
-		select.dispatchEvent(new Event("change", {
-			bubbles: true,
-			cancelable: true
-		}));
-		if (controllable.isControlled.value) queueMicrotask(() => syncNativeSelection(controllable.value.value));
-	}
-	watchEffect(syncNativeDefaultSelection, { flush: "post" });
-	watchEffect(() => syncNativeSelection(controllable.value.value), { flush: "post" });
-	return {
-		nativeSelectRef,
-		controllable,
-		getNativeValue,
-		syncNativeSelection,
-		requestValueUpdate
-	};
-}
-//#endregion
-//#region src/components/select/useSelectNativeControl.ts
-function useSelectNativeControl(props, emitUpdate, triggerRef) {
-	const nativeValue = useSelectNativeValue(props, emitUpdate);
-	const { nativeSelectRef, controllable, getNativeValue, syncNativeSelection } = nativeValue;
-	useFormControl({
-		elements: () => [nativeSelectRef.value],
-		isControlled: () => controllable.isControlled.value,
-		validationMessage: () => props.validationMessage,
-		readResetValue(elements) {
-			controllable.resetValue(getNativeValue(elements[0]));
-		},
-		syncControlledValue() {
-			syncNativeSelection(controllable.value.value);
-		}
-	});
-	const nativeInputAttrs = computed(() => {
-		const { class: compatibilityClass, style: compatibilityStyle, onInput: compatibilityOnInput, onChange: compatibilityOnChange, onInvalid: compatibilityOnInvalid, ...attrs } = props.inputAttrs ?? {};
-		return {
-			...attrs,
-			class: ["rp-select__native", compatibilityClass],
-			style: compatibilityStyle,
-			onInput(event) {
-				controllable.setValue(getNativeValue(event.currentTarget));
-				compatibilityOnInput?.(event);
-			},
-			onChange(event) {
-				compatibilityOnChange?.(event);
-			},
-			onInvalid(event) {
-				event.preventDefault();
-				triggerRef.value?.focus();
-				compatibilityOnInvalid?.(event);
-			}
-		};
-	});
-	return {
-		nativeSelectRef,
-		selectedValue: controllable.value,
-		nativeInputAttrs,
-		requestValueUpdate: nativeValue.requestValueUpdate
-	};
-}
-//#endregion
 //#region src/components/select/select.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<option data-v-7eb8ed79> ");
-var t1 = template("<button data-v-7eb8ed79></button>");
+var t0 = template("<option data-v-097d7f90> ");
+var t1 = template("<button data-v-097d7f90></button>");
 var t2 = template("No options", 2);
-var t3 = template("<div data-v-7eb8ed79>");
-var t4 = template("<div data-v-7eb8ed79> ");
-var t5 = template("<div data-v-7eb8ed79><select data-v-7eb8ed79><option data-v-7eb8ed79 value></option></select><div data-v-7eb8ed79><span data-v-7eb8ed79> </span><span data-v-7eb8ed79><span data-v-7eb8ed79 class=rp-select__arrow aria-hidden=true>", 1);
-delegateEvents("mousedown", "click", "keydown");
+var t3 = template("<div data-v-097d7f90>");
+var t4 = template("<div data-v-097d7f90> ");
+var t5 = template("<div data-v-097d7f90><select data-v-097d7f90><option data-v-097d7f90 value></option></select><div data-v-097d7f90><span data-v-097d7f90> </span><span data-v-097d7f90><span data-v-097d7f90 class=rp-select__arrow aria-hidden=true>", 1);
 //#endregion
 //#region src/components/select/select.vue
 var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -448,20 +286,26 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const triggerRef = ref(null);
-		const { nativeSelectRef, selectedValue, nativeInputAttrs, requestValueUpdate } = useSelectNativeControl(props, (value) => emit("update:modelValue", value), triggerRef);
-		const { selectRef, isOpen, selectId, popupId, listboxId, control, visibleOptions, focusedIndex, activeDescendantId, rootClass, hasValue, displayLabel, canClear, toggle, selectOption, clearSelection, onOptionMouseenter, onFocusout, onTriggerKeydown } = useSelect(props, requestValueUpdate, () => selectedValue.value, triggerRef);
+		const { templateRefs, nativeInputAttrs, isOpen, popupId, listboxId, control, visibleOptions, renderedOptions, activeDescendantId, rootClass, floatingStyle, actualPlacement, placementSide, hasValue, displayLabel, canClear, setDropdownElement, toggle, selectOption, clearSelection, onOptionMouseenter, onFocusout, onTriggerKeydown } = useSelect(props, (value) => emit("update:modelValue", value));
 		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
 		const rootAttrs = computed(() => getRootAttrs({
 			class: rootClass.value,
 			onFocusout,
 			"data-state": isOpen.value ? "open" : "closed",
-			"data-disabled": presence(control.disabled),
-			"data-invalid": presence(control.invalid)
+			"data-disabled": toPresenceAttribute(control.disabled),
+			"data-invalid": toPresenceAttribute(control.invalid)
+		}));
+		const contentAttrs = computed(() => ({
+			...getPartAttrs("content", {
+				class: "rp-select__dropdown",
+				style: floatingStyle.value
+			}),
+			"data-placement": actualPlacement.value,
+			"data-side": placementSide.value
 		}));
 		__expose({
-			nativeElement: nativeSelectRef,
-			focus: () => triggerRef.value?.focus()
+			nativeElement: templateRefs.native,
+			focus: () => templateRefs.trigger.value?.focus()
 		});
 		const _setTemplateRef = createTemplateRefSetter();
 		const n26 = t5();
@@ -495,13 +339,13 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			});
 			return n2;
 		}, (option) => option.value, 8);
-		_setTemplateRef(n3, nativeSelectRef, null, "nativeSelectRef");
 		const x4 = txt(n4);
 		renderEffect(() => {
 			const _control = unref(control);
 			const _getPartAttrs = unref(getPartAttrs);
 			const _isOpen = unref(isOpen);
 			const _control_disabled = _control.disabled;
+			_setTemplateRef(n3, unref(templateRefs).native);
 			setDynamicProps(n12, [
 				{ id: _control.id },
 				_getPartAttrs("trigger", { class: "rp-select__trigger" }),
@@ -518,8 +362,8 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 					"aria-labelledby": _control.ariaLabelledby,
 					"aria-describedby": _control.ariaDescribedby,
 					"data-state": _isOpen ? "open" : "closed",
-					"data-disabled": unref(presence)(_control.disabled),
-					"data-invalid": unref(presence)(_control.invalid),
+					"data-disabled": unref(toPresenceAttribute)(_control.disabled),
+					"data-invalid": unref(toPresenceAttribute)(_control.invalid),
 					tabindex: _control_disabled ? -1 : 0
 				}
 			]);
@@ -540,19 +384,19 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			]));
 			setInsertionState(n8, null, 0);
 			createComponent(unref(x_default));
-			n8.$evtmousedown = withVaporModifiers(() => {}, ["prevent"]);
+			on(n8, "mousedown", withModifiers(() => {}, ["prevent"]));
 			on(n8, "click", withModifiers((e) => unref(clearSelection)(e), ["stop"]));
 			return n8;
 		});
 		setInsertionState(n10, null, 0);
 		createComponent(unref(chevrons_up_down_default));
-		n12.$evtclick = createInvoker((e) => unref(toggle)(e));
-		n12.$evtkeydown = createInvoker((e) => unref(onTriggerKeydown)(e));
-		_setTemplateRef(n12, triggerRef, null, "triggerRef");
+		on(n12, "click", (e) => unref(toggle)(e));
+		on(n12, "keydown", (e) => unref(onTriggerKeydown)(e));
+		setTemplateRefBinding(n12, () => unref(templateRefs).trigger);
 		setInsertionState(n26, null, 2);
 		createComponent(VaporTransition, { name: "rp-select-dropdown" }, extend(() => {
 			return createIf(() => unref(isOpen), () => {
-				return createComponent(scroll_area_default, { $: [() => unref(getPartAttrs)("content", { class: "rp-select__dropdown" }), {
+				const n24 = createComponent(scroll_area_default, { $: [() => contentAttrs.value, {
 					id: () => unref(popupId),
 					embedded: "",
 					type: "auto",
@@ -571,43 +415,41 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 							return t2();
 						}, 1);
 						return n20;
-					}, null, 129), createFor(() => unref(visibleOptions), (_for_item0, _for_key0) => {
+					}, null, 129), createFor(() => unref(renderedOptions), (_for_item0) => {
 						const n23 = t4();
 						const x23 = txt(n23);
-						n23.$evtclick = createInvoker(() => unref(selectOption)(_for_item0.value));
-						on(n23, "mouseenter", () => unref(onOptionMouseenter)(_for_item0.value, _for_key0.value));
+						on(n23, "click", () => unref(selectOption)(_for_item0.value.option));
+						on(n23, "mouseenter", () => unref(onOptionMouseenter)(_for_item0.value.option));
 						renderEffect(() => {
-							const _index = _for_key0.value;
-							const _option = _for_item0.value;
-							const _selectedValue = unref(selectedValue);
-							const _presence = unref(presence);
-							const _focusedIndex = unref(focusedIndex);
-							const _option_value = _option.value;
-							const _option_disabled = _option.disabled;
+							const _optionState = _for_item0.value;
+							const _optionState_selected = _optionState.selected;
+							const _optionState_disabled = _optionState.disabled;
 							setDynamicProps(n23, [{
 								role: "option",
-								id: `${unref(selectId)}-option-${_index}`,
-								"aria-selected": _option_value === _selectedValue,
-								"aria-disabled": _option_disabled || void 0,
-								"data-selected": _presence(_option_value === _selectedValue),
-								"data-highlighted": _presence(_index === _focusedIndex),
-								"data-disabled": _presence(_option.disabled)
+								id: _optionState.id,
+								"aria-selected": _optionState_selected,
+								"aria-disabled": _optionState_disabled || void 0,
+								"data-selected": unref(toPresenceAttribute)(_optionState.selected),
+								"data-highlighted": unref(toPresenceAttribute)(_optionState.active),
+								"data-disabled": unref(toPresenceAttribute)(_optionState.disabled)
 							}, unref(getPartAttrs)("option", { class: ["rp-select__option", {
-								"rp-select__option--selected": _option_value === _selectedValue,
-								"rp-select__option--focused": _index === _focusedIndex,
-								"rp-select__option--disabled": _option_disabled
+								"rp-select__option--selected": _optionState_selected,
+								"rp-select__option--focused": _optionState.active,
+								"rp-select__option--disabled": _optionState_disabled
 							}] })]);
-							setText(x23, toDisplayString(_option.label));
+							setText(x23, toDisplayString(_optionState.option.label));
 						});
 						return n23;
-					}, (option, index) => option.value, 40)];
+					}, (optionState) => optionState.option.value, 40)];
 				}, { _: 8 }));
+				setTemplateRefBinding(n24, () => setDropdownElement, _setTemplateRef, void 0, "setDropdownElement");
+				return n24;
 			}, null, 129);
 		}, { _: 8 }));
-		_setTemplateRef(n26, selectRef, null, "selectRef");
+		setTemplateRefBinding(n26, () => unref(templateRefs).select);
 		return n26;
 	}
-}), [["__scopeId", "data-v-7eb8ed79"]]);
+}), [["__scopeId", "data-v-097d7f90"]]);
 //#endregion
 //#region src/components/select/types.ts
 var selectParts = [