ropav 0.1.2 → 0.1.3

package/dist/scroll-area2.js

@@ -0,0 +1,23 @@
+//#region src/components/scroll-area/types.ts
+var scrollAreaParts = [
+	"root",
+	"viewport",
+	"content",
+	"scrollbar",
+	"thumb",
+	"corner"
+];
+var scrollAreaTypes = [
+	"auto",
+	"always",
+	"hover",
+	"scroll",
+	"never"
+];
+var scrollAreaScrollbars = [
+	"x",
+	"y",
+	"both"
+];
+//#endregion
+export { scrollAreaScrollbars as n, scrollAreaTypes as r, scrollAreaParts as t };

package/dist/select.css

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

package/dist/select.js

@@ -5,6 +5,7 @@ import { n as useStylesApi, t as presence } from "./styles-api.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { i as useFormControl, o as useControllableValue } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.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, 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);
@@ -111,9 +112,8 @@ function getSelectDisplayLabel(options, value) {
 function getSelectActiveDescendantId(baseId, focusedIndex) {
 	return focusedIndex < 0 ? void 0 : `${baseId}-option-${focusedIndex}`;
 }
-function useSelect(props, emitUpdate, getValue = () => props.modelValue ?? null) {
+function useSelect(props, emitUpdate, getValue = () => props.modelValue ?? null, triggerRef = ref(null)) {
 	const selectRef = ref(null);
-	const triggerRef = ref(null);
 	const isOpen = ref(false);
 	const selectId = useId();
 	const listboxId = `${selectId}-listbox`;
@@ -170,6 +170,11 @@ function useSelect(props, emitUpdate, getValue = () => props.modelValue ?? null)
 	function onOptionMouseenter(option, index) {
 		if (!option.disabled) focusedIndex.value = index;
 	}
+	function onFocusout(event) {
+		const nextTarget = event.relatedTarget;
+		if (nextTarget instanceof Node && selectRef.value?.contains(nextTarget)) return;
+		close();
+	}
 	function selectFocusedOption() {
 		if (focusedIndex.value < 0 || focusedIndex.value >= visibleOptions.value.length) return;
 		selectOption(visibleOptions.value[focusedIndex.value]);
@@ -225,6 +230,13 @@ 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,
@@ -245,17 +257,112 @@ function useSelect(props, emitUpdate, getValue = () => props.modelValue ?? null)
 		selectOption,
 		clearSelection,
 		onOptionMouseenter,
+		onFocusout,
 		onTriggerKeydown
 	};
 }
 //#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-5c4e4e6a> ");
-var t1 = template("<button data-v-5c4e4e6a></button>");
+var t0 = template("<option data-v-d7a0b110> ");
+var t1 = template("<button data-v-d7a0b110></button>");
 var t2 = template("No options", 2);
-var t3 = template("<div data-v-5c4e4e6a>");
-var t4 = template("<div data-v-5c4e4e6a> ");
-var t5 = template("<div data-v-5c4e4e6a><select data-v-5c4e4e6a><option data-v-5c4e4e6a value></option></select><div data-v-5c4e4e6a><span data-v-5c4e4e6a> </span><span data-v-5c4e4e6a><span data-v-5c4e4e6a class=rp-select__arrow aria-hidden=true>", 1);
+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");
 //#endregion
 //#region src/components/select/select.vue
@@ -302,81 +409,13 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const nativeSelectRef = ref(null);
-		const controllable = useControllableValue({
-			modelValue: () => props.modelValue,
-			defaultValue: () => props.defaultValue,
-			onChange: (value) => emit("update:modelValue", value)
-		});
-		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));
-		}
-		const { selectRef, triggerRef, isOpen, selectId, listboxId, control, visibleOptions, focusedIndex, activeDescendantId, rootClass, hasValue, displayLabel, canClear, toggle, selectOption, clearSelection, onOptionMouseenter, onTriggerKeydown } = useSelect(props, requestValueUpdate, () => controllable.value.value);
-		useFormControl({
-			elements: () => [nativeSelectRef.value],
-			isControlled: () => controllable.isControlled.value,
-			validationMessage: () => props.validationMessage,
-			readResetValue(elements) {
-				controllable.resetValue(getNativeValue(elements[0]));
-			},
-			syncControlledValue() {
-				syncNativeSelection(controllable.value.value);
-			}
-		});
-		watchEffect(syncNativeDefaultSelection, { flush: "post" });
-		watchEffect(() => syncNativeSelection(controllable.value.value), { flush: "post" });
-		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);
-				}
-			};
-		});
+		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 { 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)
@@ -393,7 +432,7 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		const n11 = next(n4, 1);
 		const n10 = child(n11, 1);
 		renderEffect(() => {
-			const _nativeInputAttrs = nativeInputAttrs.value;
+			const _nativeInputAttrs = unref(nativeInputAttrs);
 			const _control = unref(control);
 			setDynamicProps(n26, [rootAttrs.value]);
 			setDynamicProps(n3, [_nativeInputAttrs, {
@@ -474,61 +513,60 @@ var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		setInsertionState(n26, null, 2);
 		createComponent(VaporTransition, { name: "rp-select-dropdown" }, extend(() => {
 			return createIf(() => unref(isOpen), () => {
-				const n24 = t3();
-				renderEffect(() => setDynamicProps(n24, [unref(getPartAttrs)("content", { class: "rp-select__dropdown" }), {
+				return createComponent(scroll_area_default, { $: [() => unref(getPartAttrs)("content", { class: "rp-select__dropdown" }), {
 					role: "listbox",
-					id: unref(listboxId),
-					"data-state": unref(isOpen) ? "open" : "closed"
-				}]));
-				setInsertionState(n24, null, 0);
-				createIf(() => unref(visibleOptions).length === 0, () => {
-					const n20 = t3();
-					renderEffect(() => setDynamicProps(n20, [unref(getPartAttrs)("empty", { class: "rp-select__empty" })]));
-					setInsertionState(n20, null, 0);
-					createSlot("empty", null, () => {
-						return t2();
-					}, 1);
-					return n20;
-				});
-				setInsertionState(n24, null, 1);
-				createFor(() => unref(visibleOptions), (_for_item0, _for_key0) => {
-					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));
-					renderEffect(() => {
-						const _index = _for_key0.value;
-						const _option = _for_item0.value;
-						const _controllable = unref(controllable);
-						const _presence = unref(presence);
-						const _focusedIndex = unref(focusedIndex);
-						const _option_value = _option.value;
-						const _controllable_value = _controllable.value;
-						const _option_disabled = _option.disabled;
-						setDynamicProps(n23, [{
-							role: "option",
-							id: `${unref(selectId)}-option-${_index}`,
-							"aria-selected": _option_value === _controllable_value.value,
-							"aria-disabled": _option_disabled || void 0,
-							"data-selected": _presence(_option_value === _controllable_value.value),
-							"data-highlighted": _presence(_index === _focusedIndex),
-							"data-disabled": _presence(_option.disabled)
-						}, unref(getPartAttrs)("option", { class: ["rp-select__option", {
-							"rp-select__option--selected": _option_value === _controllable_value.value,
-							"rp-select__option--focused": _index === _focusedIndex,
-							"rp-select__option--disabled": _option_disabled
-						}] })]);
-						setText(x23, toDisplayString(_option.label));
-					});
-					return n23;
-				}, (option, index) => option.value, 8);
-				return n24;
+					id: () => unref(listboxId),
+					embedded: "",
+					type: "auto",
+					scrollbars: "y",
+					"viewport-attrs": () => ({ tabindex: -1 }),
+					"data-state": () => unref(isOpen) ? "open" : "closed"
+				}] }, extend(() => {
+					return [createIf(() => unref(visibleOptions).length === 0, () => {
+						const n20 = t3();
+						renderEffect(() => setDynamicProps(n20, [unref(getPartAttrs)("empty", { class: "rp-select__empty" })]));
+						setInsertionState(n20, null, 0);
+						createSlot("empty", null, () => {
+							return t2();
+						}, 1);
+						return n20;
+					}, 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, "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 _focusedIndex = unref(focusedIndex);
+							const _option_value = _option.value;
+							const _option_disabled = _option.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)
+							}, 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
+							}] })]);
+							setText(x23, toDisplayString(_option.label));
+						});
+						return n23;
+					}, (option, index) => option.value, 40)];
+				}, { _: 8 }));
 			}, null, 129);
 		}, { _: 8 }));
 		_setTemplateRef(n26, selectRef, null, "selectRef");
 		return n26;
 	}
-}), [["__scopeId", "data-v-5c4e4e6a"]]);
+}), [["__scopeId", "data-v-d7a0b110"]]);
 //#endregion
 //#region src/components/select/types.ts
 var selectParts = [