ropav 0.1.3 → 0.1.5

package/dist/radio.js

@@ -3,7 +3,8 @@ import { t as bem } from "./bem.js";
 import { n as useStylesApi, t as presence } from "./styles-api.js";
 import { n as getComponentColorValue, r as getComponentContrastColor } from "./componentColors.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 useControllableValue } from "./useControllableValue.js";
+import { i as useFormControl } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
 import { child, computed, createIf, createSlot, defineVaporComponent, inject, next, onBeforeUnmount, onMounted, provide, ref, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, shallowRef, template, unref, useId } from "vue";
 //#region src/components/radio/types.ts
@@ -17,13 +18,16 @@ var radioGroupParts = ["root"];
 var radioGroupKey = Symbol("radioGroup");
 //#endregion
 //#region src/components/radio/useRadio.ts
-function getRadioColorStyle(color, autoContrast) {
+function getRadioColorStyle(color, autoContrast, contrastColor) {
 	const colorValue = getComponentColorValue(color);
 	if (color && !colorValue) return void 0;
-	if (!colorValue && !autoContrast) return void 0;
+	if (!colorValue && autoContrast === false && contrastColor === void 0) return void 0;
 	const style = {};
 	if (colorValue) style["--_rp-radio-color"] = colorValue;
-	if (autoContrast) style["--_rp-radio-on-color"] = getComponentContrastColor(color ?? "primary", { autoContrast });
+	if (autoContrast !== false || contrastColor !== void 0) style["--_rp-radio-on-color"] = getComponentContrastColor(color ?? "primary", {
+		autoContrast,
+		contrastColor
+	});
 	return style;
 }
 function useRadio(props, emitChange) {
@@ -39,6 +43,7 @@ function useRadio(props, emitChange) {
 	const variant = computed(() => props.variant ?? group?.variant);
 	const color = computed(() => props.color ?? group?.color);
 	const autoContrast = computed(() => props.autoContrast ?? group?.autoContrast);
+	const contrastColor = computed(() => props.contrastColor ?? group?.contrastColor);
 	const size = computed(() => props.size ?? group?.size);
 	const rootClass = computed(() => bem("rp-radio", {
 		checked: isChecked.value,
@@ -47,7 +52,7 @@ function useRadio(props, emitChange) {
 		[variant.value ?? ""]: Boolean(variant.value),
 		[`size-${size.value}`]: Boolean(size.value)
 	}));
-	const rootStyle = computed(() => getRadioColorStyle(color.value, autoContrast.value));
+	const rootStyle = computed(() => getRadioColorStyle(color.value, autoContrast.value, contrastColor.value));
 	function onSelect(event) {
 		if (isDisabled.value) return;
 		group?.select(props.value);
@@ -163,6 +168,9 @@ function useRadioGroup(props, emitUpdate) {
 		get autoContrast() {
 			return props.autoContrast;
 		},
+		get contrastColor() {
+			return props.contrastColor;
+		},
 		get size() {
 			return props.size;
 		},
@@ -205,6 +213,7 @@ var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			type: Boolean,
 			default: void 0
 		},
+		contrastColor: {},
 		size: { default: void 0 },
 		disabled: {
 			type: Boolean,
@@ -325,6 +334,7 @@ var radio_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			type: Boolean,
 			default: void 0
 		},
+		contrastColor: {},
 		size: { default: void 0 },
 		orientation: { default: "vertical" },
 		disabled: {

package/dist/scroll-area.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-scroll-area[data-v-bf91f9cc] {
+.rp-scroll-area[data-v-f5c4e940] {
     --_rp-scroll-area-scrollbar-size: 10px;
     --_rp-scroll-area-scrollbar-padding: 2px;
     --_rp-scroll-area-thumb-bg: var(--rp-color-dimmed);
@@ -11,7 +11,7 @@
     min-width: 0;
     overflow: hidden;
 }
-.rp-scroll-area__viewport[data-v-bf91f9cc] {
+.rp-scroll-area__viewport[data-v-f5c4e940] {
     box-sizing: border-box;
     flex: 1 1 auto;
     width: 100%;
@@ -22,33 +22,33 @@
     scrollbar-width: none;
     outline: none;
 }
-.rp-scroll-area__viewport[data-v-bf91f9cc]::-webkit-scrollbar {
+.rp-scroll-area__viewport[data-v-f5c4e940]::-webkit-scrollbar {
     display: none;
 }
-.rp-scroll-area__viewport[data-v-bf91f9cc]:focus-visible {
+.rp-scroll-area__viewport[data-v-f5c4e940]:focus-visible {
     outline: var(--rp-border-width-medium) solid var(--rp-color-focus-ring);
     outline-offset: calc(-1 * var(--rp-border-width-medium));
 }
-.rp-scroll-area[data-scrollbars=both] .rp-scroll-area__viewport[data-v-bf91f9cc] {
+.rp-scroll-area[data-scrollbars=both] .rp-scroll-area__viewport[data-v-f5c4e940] {
     overflow: scroll;
 }
-.rp-scroll-area[data-scrollbars=x] .rp-scroll-area__viewport[data-v-bf91f9cc] {
+.rp-scroll-area[data-scrollbars=x] .rp-scroll-area__viewport[data-v-f5c4e940] {
     overflow-x: scroll;
     overflow-y: hidden;
 }
-.rp-scroll-area[data-scrollbars=y] .rp-scroll-area__viewport[data-v-bf91f9cc] {
+.rp-scroll-area[data-scrollbars=y] .rp-scroll-area__viewport[data-v-f5c4e940] {
     overflow-x: hidden;
     overflow-y: scroll;
 }
-.rp-scroll-area[data-scrollbars=none] .rp-scroll-area__viewport[data-v-bf91f9cc] {
+.rp-scroll-area[data-scrollbars=none] .rp-scroll-area__viewport[data-v-f5c4e940] {
     overflow: hidden;
 }
-.rp-scroll-area__content[data-v-bf91f9cc] {
+.rp-scroll-area__content[data-v-f5c4e940] {
     display: table;
     box-sizing: border-box;
     min-width: 100%;
 }
-.rp-scroll-area__scrollbar[data-v-bf91f9cc] {
+.rp-scroll-area__scrollbar[data-v-f5c4e940] {
     position: absolute;
     z-index: 1;
     box-sizing: border-box;
@@ -60,54 +60,54 @@
     user-select: none;
     transition: opacity var(--rp-transition-fast);
 }
-.rp-scroll-area__scrollbar[data-visible][data-v-bf91f9cc] {
+.rp-scroll-area__scrollbar[data-visible][data-v-f5c4e940] {
     opacity: 1;
     pointer-events: auto;
 }
-.rp-scroll-area__scrollbar[data-v-bf91f9cc]:focus-visible {
+.rp-scroll-area__scrollbar[data-v-f5c4e940]:focus-visible {
     outline: var(--rp-border-width-medium) solid var(--rp-color-focus-ring);
     outline-offset: calc(-1 * var(--rp-border-width-medium));
 }
-.rp-scroll-area__scrollbar--horizontal[data-v-bf91f9cc] {
+.rp-scroll-area__scrollbar--horizontal[data-v-f5c4e940] {
     inset-inline: 0;
     bottom: 0;
     align-items: center;
     width: auto;
     height: var(--_rp-scroll-area-scrollbar-size);
 }
-.rp-scroll-area__scrollbar--vertical[data-v-bf91f9cc] {
+.rp-scroll-area__scrollbar--vertical[data-v-f5c4e940] {
     inset-block: 0;
     inset-inline-end: 0;
     justify-content: center;
     width: var(--_rp-scroll-area-scrollbar-size);
     height: auto;
 }
-.rp-scroll-area[data-scrollbar-y-active] .rp-scroll-area__scrollbar--horizontal[data-v-bf91f9cc] {
+.rp-scroll-area[data-scrollbar-y-active] .rp-scroll-area__scrollbar--horizontal[data-v-f5c4e940] {
     inset-inline-end: var(--_rp-scroll-area-scrollbar-size);
 }
-.rp-scroll-area[data-scrollbar-x-active] .rp-scroll-area__scrollbar--vertical[data-v-bf91f9cc] {
+.rp-scroll-area[data-scrollbar-x-active] .rp-scroll-area__scrollbar--vertical[data-v-f5c4e940] {
     inset-block-end: var(--_rp-scroll-area-scrollbar-size);
 }
-.rp-scroll-area__thumb[data-v-bf91f9cc] {
+.rp-scroll-area__thumb[data-v-f5c4e940] {
     flex: 0 0 auto;
     background: var(--_rp-scroll-area-thumb-bg);
     border-radius: var(--rp-radius-full);
     transition: background-color var(--rp-transition-fast);
 }
-.rp-scroll-area__scrollbar:hover .rp-scroll-area__thumb[data-v-bf91f9cc], .rp-scroll-area__scrollbar:focus-visible .rp-scroll-area__thumb[data-v-bf91f9cc] {
+.rp-scroll-area__scrollbar:hover .rp-scroll-area__thumb[data-v-f5c4e940], .rp-scroll-area__scrollbar:focus-visible .rp-scroll-area__thumb[data-v-f5c4e940] {
     background: var(--_rp-scroll-area-thumb-bg-hover);
 }
-.rp-scroll-area__scrollbar--horizontal .rp-scroll-area__thumb[data-v-bf91f9cc] {
+.rp-scroll-area__scrollbar--horizontal .rp-scroll-area__thumb[data-v-f5c4e940] {
     width: var(--_rp-scroll-area-thumb-size);
     height: 100%;
     transform: translateX(var(--_rp-scroll-area-thumb-offset));
 }
-.rp-scroll-area__scrollbar--vertical .rp-scroll-area__thumb[data-v-bf91f9cc] {
+.rp-scroll-area__scrollbar--vertical .rp-scroll-area__thumb[data-v-f5c4e940] {
     width: 100%;
     height: var(--_rp-scroll-area-thumb-size);
     transform: translateY(var(--_rp-scroll-area-thumb-offset));
 }
-.rp-scroll-area__corner[data-v-bf91f9cc] {
+.rp-scroll-area__corner[data-v-f5c4e940] {
     position: absolute;
     right: 0;
     bottom: 0;
@@ -118,13 +118,13 @@
     pointer-events: none;
     transition: opacity var(--rp-transition-fast);
 }
-.rp-scroll-area__corner[data-visible][data-v-bf91f9cc] {
+.rp-scroll-area__corner[data-visible][data-v-f5c4e940] {
     opacity: 1;
 }
 @media (prefers-reduced-motion: reduce) {
-.rp-scroll-area__scrollbar[data-v-bf91f9cc],
-    .rp-scroll-area__corner[data-v-bf91f9cc],
-    .rp-scroll-area__thumb[data-v-bf91f9cc] {
+.rp-scroll-area__scrollbar[data-v-f5c4e940],
+    .rp-scroll-area__corner[data-v-f5c4e940],
+    .rp-scroll-area__thumb[data-v-f5c4e940] {
       transition: none;
 }
 }

package/dist/scroll-area.js

@@ -38,14 +38,62 @@ function getLengthValue(value) {
 //#endregion
 //#region src/components/scroll-area/useScrollAreaControls.ts
 function useScrollAreaControls(options) {
+	let previousPosition = {
+		x: 0,
+		y: 0
+	};
 	function onViewportScroll(event) {
 		options.metrics.update();
 		options.showDuringScroll();
+		const position = {
+			x: options.metrics.getPosition("x"),
+			y: options.metrics.getPosition("y")
+		};
+		const reachedBoundaries = getReachedBoundaries(position);
+		previousPosition = position;
 		options.emitScroll(event);
 		options.emitPositionChange({
 			x: options.metrics.metrics.x,
 			y: options.metrics.metrics.y
 		});
+		for (const boundary of reachedBoundaries) emitReachedBoundary(boundary, event);
+	}
+	function getReachedBoundaries(position) {
+		const boundaries = [];
+		if (options.metrics.getOverflow("y")) {
+			const maxPosition = options.metrics.getMaxPosition("y");
+			if (position.y <= 1 && previousPosition.y > 1) boundaries.push("top");
+			if (position.y >= maxPosition - 1 && previousPosition.y < maxPosition - 1) boundaries.push("bottom");
+		}
+		if (options.metrics.getOverflow("x")) {
+			const maxPosition = options.metrics.getMaxPosition("x");
+			const reachedStart = position.x <= 1 && previousPosition.x > 1;
+			const reachedEnd = position.x >= maxPosition - 1 && previousPosition.x < maxPosition - 1;
+			if (reachedStart || reachedEnd) {
+				const viewport = options.viewportRef.value;
+				const view = viewport?.ownerDocument.defaultView;
+				const rtl = viewport ? view?.getComputedStyle(viewport).direction === "rtl" : false;
+				if (reachedStart) boundaries.push(rtl ? "right" : "left");
+				if (reachedEnd) boundaries.push(rtl ? "left" : "right");
+			}
+		}
+		return boundaries;
+	}
+	function emitReachedBoundary(boundary, event) {
+		switch (boundary) {
+			case "top":
+				options.emitReachTop(event);
+				break;
+			case "bottom":
+				options.emitReachBottom(event);
+				break;
+			case "left":
+				options.emitReachLeft(event);
+				break;
+			case "right":
+				options.emitReachRight(event);
+				break;
+		}
 	}
 	function writeAxisPosition(axis, value) {
 		const viewport = options.viewportRef.value;
@@ -446,7 +494,11 @@ function useScrollArea(options) {
 		metrics: measurements,
 		showDuringScroll: visibility.showDuringScroll,
 		emitScroll: options.emitScroll,
-		emitPositionChange: options.emitPositionChange
+		emitPositionChange: options.emitPositionChange,
+		emitReachTop: options.emitReachTop,
+		emitReachBottom: options.emitReachBottom,
+		emitReachLeft: options.emitReachLeft,
+		emitReachRight: options.emitReachRight
 	});
 	const pointer = useScrollAreaPointer({
 		horizontalScrollbarRef,
@@ -523,7 +575,17 @@ function useScrollAreaPresentation(props, scrollArea) {
 			}
 		};
 	});
-	const contentAttrs = computed(() => getPartAttrs("content", { class: "rp-scroll-area__content" }));
+	const contentAttrs = computed(() => {
+		const { class: compatibilityClass, style: compatibilityStyle, ...attrs } = props.contentAttrs ?? {};
+		return {
+			...attrs,
+			...getPartAttrs("content", {
+				class: "rp-scroll-area__content",
+				compatibilityClass,
+				compatibilityStyle
+			})
+		};
+	});
 	const horizontalScrollbarAttrs = computed(() => getScrollbarAttrs("x"));
 	const verticalScrollbarAttrs = computed(() => getScrollbarAttrs("y"));
 	const horizontalThumbAttrs = computed(() => getThumbAttrs("x"));
@@ -592,9 +654,9 @@ function hasAccessibleName(props, attrs) {
 }
 //#endregion
 //#region src/components/scroll-area/scroll-area.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<div data-v-bf91f9cc><div data-v-bf91f9cc></div>");
-var t1 = template("<div data-v-bf91f9cc>");
-var t2 = template("<div data-v-bf91f9cc><div data-v-bf91f9cc><div data-v-bf91f9cc></div></div>", 1);
+var t0 = template("<div data-v-f5c4e940><div data-v-f5c4e940></div>");
+var t1 = template("<div data-v-f5c4e940>");
+var t2 = template("<div data-v-f5c4e940><div data-v-f5c4e940><div data-v-f5c4e940></div></div>", 1);
 delegateEvents("pointerdown", "keydown");
 //#endregion
 //#region src/components/scroll-area/scroll-area.vue
@@ -603,33 +665,54 @@ var scroll_area_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 	inheritAttrs: false,
 	__name: "scroll-area",
 	props: {
-		id: {},
+		id: String,
 		embedded: {
 			type: Boolean,
 			default: false
 		},
-		type: { default: "hover" },
+		type: {
+			type: String,
+			default: "hover"
+		},
 		scrollbars: {
-			type: Boolean,
+			type: [String, Boolean],
 			default: "both"
 		},
-		scrollbarSize: { default: 10 },
-		scrollHideDelay: { default: 600 },
-		ariaLabel: {},
-		ariaLabelledby: {},
-		ariaDescribedby: {},
-		viewportAttrs: {},
-		classNames: {},
-		styles: {}
+		scrollbarSize: {
+			type: [Number, String],
+			default: 10
+		},
+		scrollHideDelay: {
+			type: Number,
+			default: 600
+		},
+		ariaLabel: String,
+		ariaLabelledby: String,
+		ariaDescribedby: String,
+		viewportAttrs: Object,
+		contentAttrs: Object,
+		classNames: Object,
+		styles: Object
 	},
-	emits: ["scroll", "scrollPositionChange"],
+	emits: [
+		"scroll",
+		"scrollPositionChange",
+		"reachTop",
+		"reachBottom",
+		"reachLeft",
+		"reachRight"
+	],
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
 		const scrollArea = useScrollArea({
 			props,
 			emitScroll: (event) => emit("scroll", event),
-			emitPositionChange: (position) => emit("scrollPositionChange", position)
+			emitPositionChange: (position) => emit("scrollPositionChange", position),
+			emitReachTop: (event) => emit("reachTop", event),
+			emitReachBottom: (event) => emit("reachBottom", event),
+			emitReachLeft: (event) => emit("reachLeft", event),
+			emitReachRight: (event) => emit("reachRight", event)
 		});
 		const { rootRef, viewportRef, contentRef, horizontalScrollbarRef, verticalScrollbarRef, renderHorizontalScrollbar, renderVerticalScrollbar, onScrollbarKeydown, onScrollbarWheel, onScrollbarPointerdown, onThumbPointerdown, scrollTo, scrollBy, update } = scrollArea;
 		const { rootAttrs, viewportAttrs, contentAttrs, horizontalScrollbarAttrs, verticalScrollbarAttrs, horizontalThumbAttrs, verticalThumbAttrs, cornerAttrs, slotProps } = useScrollAreaPresentation(props, scrollArea);
@@ -691,6 +774,6 @@ var scroll_area_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		_setTemplateRef(n14, rootRef, null, "rootRef");
 		return n14;
 	}
-}), [["__scopeId", "data-v-bf91f9cc"]]);
+}), [["__scopeId", "data-v-f5c4e940"]]);
 //#endregion
 export { scroll_area_default as t };

package/dist/select.js

@@ -3,10 +3,12 @@ import { t as x_default } from "./x.js";
 import { t as bem } from "./bem.js";
 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 useControllableValue } from "./useControllableValue.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 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";
+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) {
@@ -39,61 +41,61 @@ function useClickOutside(target, active, callback) {
 	});
 }
 //#endregion
-//#region src/composables/useListNavigation.ts
-function useListNavigation(options) {
-	const localFocusedIndex = ref(-1);
+//#region src/composables/useCollectionNavigation.ts
+function useCollectionNavigation(options) {
+	const activeKey = shallowRef(null);
+	const isDisabled = options.isDisabled ?? (() => false);
 	const loop = options.loop ?? true;
-	const enabledIndexes = computed(() => options.items().map((item, index) => item.disabled ? -1 : index).filter((index) => index >= 0));
-	function resetFocus() {
-		localFocusedIndex.value = -1;
+	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 setNearest(index, direction) {
-		const indexes = enabledIndexes.value;
-		if (indexes.length === 0) {
-			resetFocus();
-			return;
-		}
-		if (options.items()[index] && !options.items()[index]?.disabled) {
-			localFocusedIndex.value = index;
-			return;
-		}
-		let next;
-		if (direction === 1) next = indexes.find((i) => i > index);
-		else for (let i = indexes.length - 1; i >= 0; i -= 1) {
-			const candidate = indexes[i];
-			if (candidate < index) {
-				next = candidate;
-				break;
-			}
-		}
-		if (next !== void 0) localFocusedIndex.value = next;
-		else if (loop) localFocusedIndex.value = direction === 1 ? indexes[0] : indexes[indexes.length - 1];
+	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) && !item.disabled) : -1;
-		if (selectedIndex >= 0) localFocusedIndex.value = selectedIndex;
+		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];
-		localFocusedIndex.value = first ?? -1;
+		if (first === void 0) resetActive();
+		else setActiveIndex(first);
 	}
 	function focusLast() {
 		const indexes = enabledIndexes.value;
-		localFocusedIndex.value = indexes[indexes.length - 1] ?? -1;
+		const last = indexes[indexes.length - 1];
+		if (last === void 0) resetActive();
+		else setActiveIndex(last);
 	}
-	function moveFocus(delta) {
-		if (localFocusedIndex.value < 0) {
-			if (delta === 1) focusFirst();
+	function moveFocus(direction) {
+		if (activeIndex.value < 0) {
+			if (direction === 1) focusFirst();
 			else focusLast();
 			return;
 		}
-		setNearest(localFocusedIndex.value + delta, delta);
+		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 {
-		focusedIndex: localFocusedIndex,
-		resetFocus,
+		activeKey,
+		activeIndex,
+		enabledIndexes,
+		resetActive,
+		setActiveIndex,
 		focusSelected,
 		focusFirst,
 		focusLast,
@@ -109,8 +111,8 @@ function getSelectDisplayLabel(options, value) {
 	if (!hasSelectValue(value)) return "";
 	return options?.find((option) => option.value === value)?.label ?? "";
 }
-function getSelectActiveDescendantId(baseId, focusedIndex) {
-	return focusedIndex < 0 ? void 0 : `${baseId}-option-${focusedIndex}`;
+function getSelectActiveDescendantId(baseId, focusedIndex, isOpen) {
+	return !isOpen || focusedIndex < 0 ? void 0 : `${baseId}-option-${focusedIndex}`;
 }
 function useSelect(props, emitUpdate, getValue = () => props.modelValue ?? null, triggerRef = ref(null)) {
 	const selectRef = ref(null);
@@ -120,12 +122,26 @@ function useSelect(props, emitUpdate, getValue = () => props.modelValue ?? null,
 	const control = useControlState(props);
 	const visibleOptions = computed(() => props.options ?? []);
 	const value = computed(getValue);
-	const navigation = useListNavigation({
+	const navigation = useCollectionNavigation({
 		items: () => visibleOptions.value,
+		getKey: (item) => item.value,
+		isDisabled: (item) => Boolean(item.disabled),
 		isSelected: (item) => item.value === value.value
 	});
-	const focusedIndex = navigation.focusedIndex;
-	const activeDescendantId = computed(() => getSelectActiveDescendantId(selectId, focusedIndex.value));
+	const focusedIndex = navigation.activeIndex;
+	const selectedIndex = computed(() => visibleOptions.value.findIndex((option) => option.value === value.value && !option.disabled));
+	const activeDescendantId = computed(() => getSelectActiveDescendantId(selectId, focusedIndex.value, isOpen.value));
+	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);
+		}
+	});
 	const rootClass = computed(() => bem("rp-select", {
 		open: isOpen.value,
 		[`size-${props.size}`]: Boolean(props.size),
@@ -141,12 +157,14 @@ function useSelect(props, emitUpdate, getValue = () => props.modelValue ?? null,
 	}
 	function open() {
 		if (control.disabled || isOpen.value) return;
+		typeahead.reset();
 		isOpen.value = true;
 		navigation.focusSelected();
 	}
 	function close() {
 		isOpen.value = false;
-		navigation.resetFocus();
+		navigation.resetActive();
+		typeahead.reset();
 	}
 	function toggle() {
 		if (control.disabled) return;
@@ -168,7 +186,7 @@ function useSelect(props, emitUpdate, getValue = () => props.modelValue ?? null,
 		focusTrigger();
 	}
 	function onOptionMouseenter(option, index) {
-		if (!option.disabled) focusedIndex.value = index;
+		if (!option.disabled) navigation.setActiveIndex(index);
 	}
 	function onFocusout(event) {
 		const nextTarget = event.relatedTarget;
@@ -181,6 +199,7 @@ function useSelect(props, emitUpdate, getValue = () => props.modelValue ?? null,
 	}
 	function onTriggerKeydown(e) {
 		if (control.disabled) return;
+		if (typeahead.handleKey(e)) return;
 		switch (e.key) {
 			case "Enter":
 				e.preventDefault();