ropav 0.1.5 → 0.1.7

package/dist/select.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-select[data-v-d7a0b110] {
+.rp-select[data-v-b42a5b2f] {
     --_rp-select-height: var(--rp-size-control-md);
     --_rp-select-padding-x: calc(var(--rp-size-control-md) / 3);
     --_rp-select-font-size: var(--rp-font-size-md);
@@ -15,7 +15,7 @@
     font-weight: var(--rp-font-weight-normal);
     line-height: 1;
 }
-.rp-select__native[data-v-d7a0b110] {
+.rp-select__native[data-v-b42a5b2f] {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -26,42 +26,42 @@
     white-space: nowrap;
     border-width: 0;
 }
-.rp-select--size-xs[data-v-d7a0b110] {
+.rp-select--size-xs[data-v-b42a5b2f] {
     --_rp-select-height: var(--rp-size-control-xs);
     --_rp-select-padding-x: calc(var(--rp-size-control-xs) / 3);
     --_rp-select-font-size: var(--rp-font-size-xs);
     --_rp-select-option-min-height: calc(var(--rp-size-control-xs) - var(--rp-spacing-2));
     --_rp-select-option-padding-y: calc(var(--rp-spacing-1) / 2);
 }
-.rp-select--size-sm[data-v-d7a0b110] {
+.rp-select--size-sm[data-v-b42a5b2f] {
     --_rp-select-height: var(--rp-size-control-sm);
     --_rp-select-padding-x: calc(var(--rp-size-control-sm) / 3);
     --_rp-select-font-size: var(--rp-font-size-sm);
     --_rp-select-option-min-height: calc(var(--rp-size-control-sm) - var(--rp-spacing-3));
     --_rp-select-option-padding-y: var(--rp-spacing-1);
 }
-.rp-select--size-md[data-v-d7a0b110] {
+.rp-select--size-md[data-v-b42a5b2f] {
     --_rp-select-height: var(--rp-size-control-md);
     --_rp-select-padding-x: calc(var(--rp-size-control-md) / 3);
     --_rp-select-font-size: var(--rp-font-size-md);
     --_rp-select-option-min-height: calc(var(--rp-size-control-md) - var(--rp-spacing-4));
     --_rp-select-option-padding-y: var(--rp-spacing-1);
 }
-.rp-select--size-lg[data-v-d7a0b110] {
+.rp-select--size-lg[data-v-b42a5b2f] {
     --_rp-select-height: var(--rp-size-control-lg);
     --_rp-select-padding-x: calc(var(--rp-size-control-lg) / 3);
     --_rp-select-font-size: var(--rp-font-size-lg);
     --_rp-select-option-min-height: calc(var(--rp-size-control-lg) - var(--rp-spacing-5));
     --_rp-select-option-padding-y: calc(var(--rp-spacing-3) / 2);
 }
-.rp-select--size-xl[data-v-d7a0b110] {
+.rp-select--size-xl[data-v-b42a5b2f] {
     --_rp-select-height: var(--rp-size-control-xl);
     --_rp-select-padding-x: calc(var(--rp-size-control-xl) / 3);
     --_rp-select-font-size: var(--rp-font-size-xl);
     --_rp-select-option-min-height: calc(var(--rp-size-control-xl) - var(--rp-spacing-6));
     --_rp-select-option-padding-y: var(--rp-spacing-2);
 }
-html.dark .rp-select[data-v-d7a0b110], [data-rp-color-scheme=dark] .rp-select[data-v-d7a0b110] {
+html.dark .rp-select[data-v-b42a5b2f], [data-rp-color-scheme=dark] .rp-select[data-v-b42a5b2f] {
     --_rp-select-invalid-border: var(--rp-color-red-light-color);
     --_rp-select-invalid-ring: color-mix(
         in srgb,
@@ -70,11 +70,11 @@ html.dark .rp-select[data-v-d7a0b110], [data-rp-color-scheme=dark] .rp-select[da
     );
     --_rp-select-option-focused-bg: var(--rp-color-default-hover);
 }
-.rp-select--disabled[data-v-d7a0b110] {
+.rp-select--disabled[data-v-b42a5b2f] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
-.rp-select__trigger[data-v-d7a0b110] {
+.rp-select__trigger[data-v-b42a5b2f] {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -91,81 +91,81 @@ html.dark .rp-select[data-v-d7a0b110], [data-rp-color-scheme=dark] .rp-select[da
     transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
     gap: var(--rp-spacing-2);
 }
-.rp-select__trigger[data-v-d7a0b110]:hover {
+.rp-select__trigger[data-v-b42a5b2f]:hover {
     border-color: var(--rp-color-control-border-hover);
 }
-.rp-select__trigger[data-v-d7a0b110]:focus-visible {
+.rp-select__trigger[data-v-b42a5b2f]:focus-visible {
     outline: none;
     border-color: var(--rp-color-control-border-focus);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-select--radius-xs[data-v-d7a0b110] {
+.rp-select--radius-xs[data-v-b42a5b2f] {
     --_rp-select-radius: var(--rp-radius-xs);
 }
-.rp-select--radius-sm[data-v-d7a0b110] {
+.rp-select--radius-sm[data-v-b42a5b2f] {
     --_rp-select-radius: var(--rp-radius-sm);
 }
-.rp-select--radius-md[data-v-d7a0b110] {
+.rp-select--radius-md[data-v-b42a5b2f] {
     --_rp-select-radius: var(--rp-radius-md);
 }
-.rp-select--radius-lg[data-v-d7a0b110] {
+.rp-select--radius-lg[data-v-b42a5b2f] {
     --_rp-select-radius: var(--rp-radius-lg);
 }
-.rp-select--radius-xl[data-v-d7a0b110] {
+.rp-select--radius-xl[data-v-b42a5b2f] {
     --_rp-select-radius: var(--rp-radius-xl);
 }
-.rp-select--open .rp-select__trigger[data-v-d7a0b110] {
+.rp-select--open .rp-select__trigger[data-v-b42a5b2f] {
     border-color: var(--rp-color-control-border-focus);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-select--invalid .rp-select__trigger[data-v-d7a0b110] {
+.rp-select--invalid .rp-select__trigger[data-v-b42a5b2f] {
     border-color: var(--_rp-select-invalid-border);
 }
-.rp-select--invalid .rp-select__trigger[data-v-d7a0b110]:focus-visible, .rp-select--open.rp-select--invalid .rp-select__trigger[data-v-d7a0b110] {
+.rp-select--invalid .rp-select__trigger[data-v-b42a5b2f]:focus-visible, .rp-select--open.rp-select--invalid .rp-select__trigger[data-v-b42a5b2f] {
     border-color: var(--_rp-select-invalid-border);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-select-invalid-ring);
 }
-.rp-select__value[data-v-d7a0b110] {
+.rp-select__value[data-v-b42a5b2f] {
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     color: var(--rp-color-control-fg);
 }
-.rp-select__placeholder[data-v-d7a0b110] {
+.rp-select__placeholder[data-v-b42a5b2f] {
     color: var(--rp-color-control-placeholder);
 }
-.rp-select__indicator[data-v-d7a0b110] {
+.rp-select__indicator[data-v-b42a5b2f] {
     display: inline-flex;
     align-items: center;
     width: 1em;
     height: 1em;
     flex-shrink: 0;
 }
-.rp-select__indicator svg[data-v-d7a0b110] {
+.rp-select__indicator svg[data-v-b42a5b2f] {
     width: 100%;
     height: 100%;
 }
-.rp-select__indicator[data-v-d7a0b110] {
+.rp-select__indicator[data-v-b42a5b2f] {
     position: relative;
     color: var(--rp-color-control-icon);
     transform: translateX(var(--rp-spacing-1));
 }
-.rp-select__arrow[data-v-d7a0b110] {
+.rp-select__arrow[data-v-b42a5b2f] {
     display: inline-flex;
     align-items: center;
     width: 1em;
     height: 1em;
     flex-shrink: 0;
 }
-.rp-select__arrow svg[data-v-d7a0b110] {
+.rp-select__arrow svg[data-v-b42a5b2f] {
     width: 100%;
     height: 100%;
 }
-.rp-select__arrow[data-v-d7a0b110] {
+.rp-select__arrow[data-v-b42a5b2f] {
     transition: opacity var(--rp-transition-fast);
 }
-.rp-select__clear[data-v-d7a0b110] {
+.rp-select__clear[data-v-b42a5b2f] {
     padding: 0;
     font: inherit;
     background: none;
@@ -177,11 +177,11 @@ html.dark .rp-select[data-v-d7a0b110], [data-rp-color-scheme=dark] .rp-select[da
     height: 1em;
     flex-shrink: 0;
 }
-.rp-select__clear svg[data-v-d7a0b110] {
+.rp-select__clear svg[data-v-b42a5b2f] {
     width: 100%;
     height: 100%;
 }
-.rp-select__clear[data-v-d7a0b110] {
+.rp-select__clear[data-v-b42a5b2f] {
     position: absolute;
     inset: 0;
     z-index: 1;
@@ -190,17 +190,17 @@ html.dark .rp-select[data-v-d7a0b110], [data-rp-color-scheme=dark] .rp-select[da
     pointer-events: none;
     transition: color var(--rp-transition-fast), opacity var(--rp-transition-fast);
 }
-.rp-select__clear[data-v-d7a0b110]:hover {
+.rp-select__clear[data-v-b42a5b2f]:hover {
     color: var(--rp-color-control-fg);
 }
-.rp-select__trigger:hover .rp-select__clear[data-v-d7a0b110] {
+.rp-select__trigger:hover .rp-select__clear[data-v-b42a5b2f] {
     opacity: 1;
     pointer-events: auto;
 }
-.rp-select__trigger:hover .rp-select__clear + .rp-select__arrow[data-v-d7a0b110] {
+.rp-select__trigger:hover .rp-select__clear + .rp-select__arrow[data-v-b42a5b2f] {
     opacity: 0;
 }
-.rp-select__dropdown[data-v-d7a0b110] {
+.rp-select__dropdown[data-v-b42a5b2f] {
     position: absolute;
     top: calc(100% + var(--rp-spacing-2));
     left: 0;
@@ -214,10 +214,10 @@ html.dark .rp-select[data-v-d7a0b110], [data-rp-color-scheme=dark] .rp-select[da
     max-height: 240px;
     padding: var(--rp-spacing-1);
 }
-.rp-select__dropdown[data-v-d7a0b110] .rp-scroll-area__viewport {
+.rp-select__dropdown[data-v-b42a5b2f] .rp-scroll-area__viewport {
     scroll-padding-block: var(--rp-spacing-1);
 }
-.rp-select__option[data-v-d7a0b110] {
+.rp-select__option[data-v-b42a5b2f] {
     display: flex;
     align-items: center;
     min-height: var(--_rp-select-option-min-height);
@@ -228,17 +228,17 @@ html.dark .rp-select[data-v-d7a0b110], [data-rp-color-scheme=dark] .rp-select[da
     transition: color var(--rp-transition-fast);
     color: var(--rp-color-control-fg);
 }
-.rp-select__option--focused[data-v-d7a0b110] {
+.rp-select__option--focused[data-v-b42a5b2f] {
     background-color: var(--_rp-select-option-focused-bg);
 }
-.rp-select__option--selected[data-v-d7a0b110] {
+.rp-select__option--selected[data-v-b42a5b2f] {
     color: var(--rp-primary-color-light-color);
 }
-.rp-select__option--disabled[data-v-d7a0b110] {
+.rp-select__option--disabled[data-v-b42a5b2f] {
     color: var(--rp-color-disabled-color);
     cursor: not-allowed;
 }
-.rp-select__empty[data-v-d7a0b110] {
+.rp-select__empty[data-v-b42a5b2f] {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -246,12 +246,12 @@ html.dark .rp-select[data-v-d7a0b110], [data-rp-color-scheme=dark] .rp-select[da
     color: var(--rp-color-dimmed);
     font-size: var(--_rp-select-font-size);
 }
-.rp-select-dropdown-enter-active[data-v-d7a0b110],
-  .rp-select-dropdown-leave-active[data-v-d7a0b110] {
+.rp-select-dropdown-enter-active[data-v-b42a5b2f],
+  .rp-select-dropdown-leave-active[data-v-b42a5b2f] {
     transition: opacity var(--rp-transition-fast), transform var(--rp-transition-fast);
 }
-.rp-select-dropdown-enter-from[data-v-d7a0b110],
-  .rp-select-dropdown-leave-to[data-v-d7a0b110] {
+.rp-select-dropdown-enter-from[data-v-b42a5b2f],
+  .rp-select-dropdown-leave-to[data-v-b42a5b2f] {
     opacity: 0;
     transform: translateY(calc(-1 * var(--rp-spacing-1)));
 }

package/dist/select.js

@@ -1,14 +1,18 @@
 import './select.css';
-import { t as x_default } from "./x.js";
+import { t as useControllableValue } from "./useControllableValue.js";
+import { t as useStylesApi } from "./styles-api.js";
+import { n as toPresenceAttribute } from "./attributes.js";
 import { t as bem } from "./bem.js";
-import { n as useStylesApi, t as presence } from "./styles-api.js";
+import { n as getNextEnabledIndex, t as getEnabledIndexes } from "./collectionNavigation.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { t as useControllableValue } from "./useControllableValue.js";
+import { t as x_default } from "./x.js";
 import { i as useFormControl } from "./useFormControl.js";
+import { o as splitCompatibilityAttributes, t as composeEventHandlers } from "./attributes2.js";
 import { t as useControlState } from "./useControlState.js";
-import { n as getNextEnabledIndex, r as useTypeahead, t as getEnabledIndexes } from "./collectionNavigation.js";
+import { i as isNodeWithinElement, n as isEventWithinElement } from "./events.js";
+import { t as useTypeahead } from "./useTypeahead.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";
+import { VaporTransition, child, computed, createComponent, createFor, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, markRaw, next, nextTick, on, onBeforeUnmount, onMounted, ref, renderEffect, setDynamicProps, setInsertionState, setProp, setTemplateRefBinding, setText, setValue, shallowRef, template, toDisplayString, txt, unref, useId, watch, watchEffect, withModifiers } 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) {
@@ -19,29 +23,41 @@ var chevrons_up_down_default = markRaw(defineVaporComponent({
 	render
 }));
 //#endregion
-//#region src/composables/useClickOutside.ts
+//#region src/internal/composables/useClickOutside.ts
 function useClickOutside(target, active, callback) {
-	let isListening = false;
+	const targets = Array.isArray(target) ? target : [target];
+	const listeningDocuments = /* @__PURE__ */ new Set();
 	let stopWatch;
-	function handler(e) {
-		if (!(Array.isArray(target) ? target : [target]).some((current) => current.value?.contains(e.target))) callback(e);
+	function handler(event) {
+		if (!targets.some((current) => {
+			const element = current.value;
+			return element ? isEventWithinElement(event, element) : false;
+		})) callback(event);
+	}
+	function detachListeners() {
+		for (const document of listeningDocuments) document.removeEventListener("click", handler, true);
+		listeningDocuments.clear();
 	}
-	function setListening(value) {
-		if (typeof document === "undefined" || value === isListening) return;
-		isListening = value;
-		if (value) document.addEventListener("click", handler, true);
-		else document.removeEventListener("click", handler, true);
+	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, setListening, { immediate: true });
+		stopWatch = watch([active, ...targets], syncListeners, { immediate: true });
 	});
 	onBeforeUnmount(() => {
 		stopWatch?.();
-		setListening(false);
+		detachListeners();
 	});
 }
 //#endregion
-//#region src/composables/useCollectionNavigation.ts
+//#region src/internal/composables/useCollectionNavigation.ts
 function useCollectionNavigation(options) {
 	const activeKey = shallowRef(null);
 	const isDisabled = options.isDisabled ?? (() => false);
@@ -118,7 +134,8 @@ function useSelect(props, emitUpdate, getValue = () => props.modelValue ?? null,
 	const selectRef = ref(null);
 	const isOpen = ref(false);
 	const selectId = useId();
-	const listboxId = `${selectId}-listbox`;
+	const popupId = `${selectId}-popup`;
+	const listboxId = `${popupId}-viewport`;
 	const control = useControlState(props);
 	const visibleOptions = computed(() => props.options ?? []);
 	const value = computed(getValue);
@@ -189,8 +206,7 @@ function useSelect(props, emitUpdate, getValue = () => props.modelValue ?? null,
 		if (!option.disabled) navigation.setActiveIndex(index);
 	}
 	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() {
@@ -262,6 +278,7 @@ function useSelect(props, emitUpdate, getValue = () => props.modelValue ?? null,
 		triggerRef,
 		isOpen,
 		selectId,
+		popupId,
 		listboxId,
 		control,
 		visibleOptions,
@@ -348,23 +365,18 @@ function useSelectNativeControl(props, emitUpdate, triggerRef) {
 		}
 	});
 	const nativeInputAttrs = computed(() => {
-		const { class: compatibilityClass, style: compatibilityStyle, onInput: compatibilityOnInput, onChange: compatibilityOnChange, onInvalid: compatibilityOnInvalid, ...attrs } = props.inputAttrs ?? {};
+		const compatibilityAttrs = props.inputAttrs ?? {};
+		const { compatibilityClass, compatibilityStyle, forwardedAttributes } = splitCompatibilityAttributes(compatibilityAttrs);
 		return {
-			...attrs,
+			...forwardedAttributes,
 			class: ["rp-select__native", compatibilityClass],
 			style: compatibilityStyle,
-			onInput(event) {
-				controllable.setValue(getNativeValue(event.currentTarget));
-				compatibilityOnInput?.(event);
-			},
-			onChange(event) {
-				compatibilityOnChange?.(event);
-			},
-			onInvalid(event) {
+			onInput: composeEventHandlers((event) => controllable.setValue(getNativeValue(event.currentTarget)), compatibilityAttrs.onInput),
+			onChange: compatibilityAttrs.onChange,
+			onInvalid: composeEventHandlers((event) => {
 				event.preventDefault();
 				triggerRef.value?.focus();
-				compatibilityOnInvalid?.(event);
-			}
+			}, compatibilityAttrs.onInvalid)
 		};
 	});
 	return {
@@ -376,13 +388,12 @@ function useSelectNativeControl(props, emitUpdate, triggerRef) {
 }
 //#endregion
 //#region src/components/select/select.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<option data-v-d7a0b110> ");
-var t1 = template("<button data-v-d7a0b110></button>");
+var t0 = template("<option data-v-b42a5b2f> ");
+var t1 = template("<button data-v-b42a5b2f></button>");
 var t2 = template("No options", 2);
-var t3 = template("<div data-v-d7a0b110>");
-var t4 = template("<div data-v-d7a0b110> ");
-var t5 = template("<div data-v-d7a0b110><select data-v-d7a0b110><option data-v-d7a0b110 value></option></select><div data-v-d7a0b110><span data-v-d7a0b110> </span><span data-v-d7a0b110><span data-v-d7a0b110 class=rp-select__arrow aria-hidden=true>", 1);
-delegateEvents("mousedown", "click", "keydown");
+var t3 = template("<div data-v-b42a5b2f>");
+var t4 = template("<div data-v-b42a5b2f> ");
+var t5 = template("<div data-v-b42a5b2f><select data-v-b42a5b2f><option data-v-b42a5b2f value></option></select><div data-v-b42a5b2f><span data-v-b42a5b2f> </span><span data-v-b42a5b2f><span data-v-b42a5b2f 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({
@@ -430,14 +441,15 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		const emit = __emit;
 		const triggerRef = ref(null);
 		const { nativeSelectRef, selectedValue, nativeInputAttrs, requestValueUpdate } = useSelectNativeControl(props, (value) => emit("update:modelValue", value), triggerRef);
-		const { selectRef, isOpen, selectId, listboxId, control, visibleOptions, focusedIndex, activeDescendantId, rootClass, hasValue, displayLabel, canClear, toggle, selectOption, clearSelection, onOptionMouseenter, onFocusout, onTriggerKeydown } = useSelect(props, requestValueUpdate, () => selectedValue.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 = { select: selectRef };
 		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)
 		}));
 		__expose({
 			nativeElement: nativeSelectRef,
@@ -498,8 +510,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
 				}
 			]);
@@ -520,25 +532,27 @@ 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));
+		on(n12, "click", (e) => unref(toggle)(e));
+		on(n12, "keydown", (e) => unref(onTriggerKeydown)(e));
 		_setTemplateRef(n12, triggerRef, null, "triggerRef");
 		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" }), {
-					role: "listbox",
-					id: () => unref(listboxId),
+					id: () => unref(popupId),
 					embedded: "",
 					type: "auto",
 					scrollbars: "y",
-					"viewport-attrs": () => ({ tabindex: -1 }),
+					"viewport-attrs": () => ({
+						role: "listbox",
+						tabindex: -1
+					}),
 					"data-state": () => unref(isOpen) ? "open" : "closed"
 				}] }, extend(() => {
 					return [createIf(() => unref(visibleOptions).length === 0, () => {
@@ -552,13 +566,13 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 					}, null, 129), createFor(() => unref(visibleOptions), (_for_item0, _for_key0) => {
 						const n23 = t4();
 						const x23 = txt(n23);
-						n23.$evtclick = createInvoker(() => unref(selectOption)(_for_item0.value));
+						on(n23, "click", () => unref(selectOption)(_for_item0.value));
 						on(n23, "mouseenter", () => unref(onOptionMouseenter)(_for_item0.value, _for_key0.value));
 						renderEffect(() => {
 							const _index = _for_key0.value;
 							const _option = _for_item0.value;
 							const _selectedValue = unref(selectedValue);
-							const _presence = unref(presence);
+							const _toPresenceAttribute = unref(toPresenceAttribute);
 							const _focusedIndex = unref(focusedIndex);
 							const _option_value = _option.value;
 							const _option_disabled = _option.disabled;
@@ -567,9 +581,9 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 								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)
+								"data-selected": _toPresenceAttribute(_option_value === _selectedValue),
+								"data-highlighted": _toPresenceAttribute(_index === _focusedIndex),
+								"data-disabled": _toPresenceAttribute(_option.disabled)
 							}, unref(getPartAttrs)("option", { class: ["rp-select__option", {
 								"rp-select__option--selected": _option_value === _selectedValue,
 								"rp-select__option--focused": _index === _focusedIndex,
@@ -582,10 +596,10 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				}, { _: 8 }));
 			}, null, 129);
 		}, { _: 8 }));
-		_setTemplateRef(n26, selectRef, null, "selectRef");
+		setTemplateRefBinding(n26, () => templateRefs.select);
 		return n26;
 	}
-}), [["__scopeId", "data-v-d7a0b110"]]);
+}), [["__scopeId", "data-v-b42a5b2f"]]);
 //#endregion
 //#region src/components/select/types.ts
 var selectParts = [