ropav 0.1.3 → 0.1.5

package/dist/components/scroll-area/scroll-area.d.ts

@@ -1,11 +1,45 @@
-import { ScrollAreaProps } from './types.js';
+import { PropType } from 'vue';
+import { ScrollAreaProps, ScrollAreaScrollbars } from './types.js';
 declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import('vue').PublicProps & __VLS_PrettifyLocal<ScrollAreaProps & {
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<import('vue').ExtractPublicPropTypes<{
+        id: StringConstructor;
+        embedded: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        type: {
+            type: PropType<ScrollAreaProps["type"]>;
+            default: string;
+        };
+        scrollbars: {
+            type: PropType<ScrollAreaScrollbars | false>;
+            default: string;
+        };
+        scrollbarSize: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: number;
+        };
+        scrollHideDelay: {
+            type: NumberConstructor;
+            default: number;
+        };
+        ariaLabel: StringConstructor;
+        ariaLabelledby: StringConstructor;
+        ariaDescribedby: StringConstructor;
+        viewportAttrs: PropType<ScrollAreaProps["viewportAttrs"]>;
+        contentAttrs: PropType<ScrollAreaProps["contentAttrs"]>;
+        classNames: PropType<ScrollAreaProps["classNames"]>;
+        styles: PropType<ScrollAreaProps["styles"]>;
+    }> & {
         onScroll?: ((event: Event) => any) | undefined;
         onScrollPositionChange?: ((position: {
             x: number;
             y: number;
         }) => any) | undefined;
+        onReachTop?: ((event: Event) => any) | undefined;
+        onReachBottom?: ((event: Event) => any) | undefined;
+        onReachLeft?: ((event: Event) => any) | undefined;
+        onReachRight?: ((event: Event) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -29,7 +63,7 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
     emit: ((evt: "scroll", event: Event) => void) & ((evt: "scrollPositionChange", position: {
         x: number;
         y: number;
-    }) => void);
+    }) => void) & ((evt: "reachTop", event: Event) => void) & ((evt: "reachBottom", event: Event) => void) & ((evt: "reachLeft", event: Event) => void) & ((evt: "reachRight", event: Event) => void);
 }>) => import('vue').VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/dist/components/scroll-area/types.d.ts

@@ -30,4 +30,5 @@ export interface ScrollAreaProps extends StylesApiProps<ScrollAreaPart> {
     ariaLabelledby?: string;
     ariaDescribedby?: string;
     viewportAttrs?: HTMLAttributes;
+    contentAttrs?: HTMLAttributes;
 }

package/dist/components/scroll-area/useScrollArea.d.ts

@@ -3,6 +3,10 @@ interface UseScrollAreaOptions {
     props: Readonly<ScrollAreaProps>;
     emitScroll: (event: Event) => void;
     emitPositionChange: (position: ScrollAreaPosition) => void;
+    emitReachTop: (event: Event) => void;
+    emitReachBottom: (event: Event) => void;
+    emitReachLeft: (event: Event) => void;
+    emitReachRight: (event: Event) => void;
 }
 export declare function useScrollArea(options: UseScrollAreaOptions): {
     onScrollbarPointerdown: (axis: import('./scrollAreaCore.js').ScrollAxis, event: PointerEvent) => void;

package/dist/components/scroll-area/useScrollAreaControls.d.ts

@@ -8,6 +8,10 @@ interface UseScrollAreaControlsOptions {
     showDuringScroll: () => void;
     emitScroll: (event: Event) => void;
     emitPositionChange: (position: ScrollAreaPosition) => void;
+    emitReachTop: (event: Event) => void;
+    emitReachBottom: (event: Event) => void;
+    emitReachLeft: (event: Event) => void;
+    emitReachRight: (event: Event) => void;
 }
 export declare function useScrollAreaControls(options: UseScrollAreaControlsOptions): {
     onViewportScroll: (event: Event) => void;

package/dist/components/scroll-area/useScrollAreaPresentation.d.ts

@@ -4,7 +4,7 @@ import { ScrollAreaOrientation, ScrollAreaProps, ScrollAreaSlotProps } from './t
 export declare function useScrollAreaPresentation(props: Readonly<ScrollAreaProps>, scrollArea: ScrollAreaController): {
     rootAttrs: import('vue').ComputedRef<Record<string, unknown>>;
     viewportAttrs: import('vue').ComputedRef<HTMLAttributes>;
-    contentAttrs: import('vue').ComputedRef<Pick<HTMLAttributes, "class" | "style">>;
+    contentAttrs: import('vue').ComputedRef<HTMLAttributes>;
     horizontalScrollbarAttrs: import('vue').ComputedRef<{
         role: string;
         tabindex: number;

package/dist/components/select/useSelect.d.ts

@@ -10,7 +10,7 @@ export declare function useSelect(props: Readonly<SelectBehaviorProps>, emitUpda
     listboxId: string;
     control: import('../../composables/useControlState.js').ControlState;
     visibleOptions: import('vue').ComputedRef<SelectOption[]>;
-    focusedIndex: Ref<number, number>;
+    focusedIndex: import('vue').ComputedRef<number>;
     activeDescendantId: import('vue').ComputedRef<string | undefined>;
     rootClass: import('vue').ComputedRef<string[]>;
     hasValue: import('vue').ComputedRef<boolean>;

package/dist/components/slider/range-slider-tooltip.d.ts

@@ -5,6 +5,8 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
     props: import('vue').PublicProps & __VLS_PrettifyLocal<{
         arrow?: boolean;
         color?: TooltipColor;
+        autoContrast?: boolean;
+        contrastColor?: string;
         content: [string, string];
         ids: [string | undefined, string | undefined];
         mergedContent: string;

package/dist/components/slider/types.d.ts

@@ -23,7 +23,7 @@ export type RangeSliderEndpointValueText = string | SliderValueFormatter;
 export type RangeSliderAriaValueText = RangeSliderEndpointValueText | [RangeSliderEndpointValueText, RangeSliderEndpointValueText];
 export type RangeSliderValidationMessage = string | [string | undefined, string | undefined];
 export type SliderTooltipMode = 'hover' | 'always';
-type SliderTooltipBaseOptions = Pick<TooltipProps, 'id' | 'placement' | 'color' | 'offset' | 'openDelay' | 'arrow'>;
+type SliderTooltipBaseOptions = Pick<TooltipProps, 'id' | 'placement' | 'color' | 'autoContrast' | 'contrastColor' | 'offset' | 'openDelay' | 'arrow'>;
 export type SliderTooltipAnchor = 'thumb' | 'pointer';
 export type SliderTooltipOptions = (SliderTooltipBaseOptions & {
     anchor?: 'thumb';

package/dist/components/slider/useRangeSlider.d.ts

@@ -42,6 +42,8 @@ export declare function useRangeSlider(props: RangeSliderStateProps, emitUpdate:
     tooltipIds: import('vue').ComputedRef<[string | undefined, string | undefined]>;
     mergedTooltipId: import('vue').ComputedRef<string | undefined>;
     tooltipColor: import('vue').ComputedRef<import('../../utils/componentColors.js').ComponentColorValue | undefined>;
+    tooltipAutoContrast: import('vue').ComputedRef<boolean | undefined>;
+    tooltipContrastColor: import('vue').ComputedRef<string | undefined>;
     tooltipOffset: import('vue').ComputedRef<import('../floating/index.js').FloatingOffset | undefined>;
     tooltipOpenDelay: import('vue').ComputedRef<number>;
     tooltipArrow: import('vue').ComputedRef<boolean>;

package/dist/components/slider/useSlider.d.ts

@@ -38,6 +38,8 @@ export declare function useSlider(props: SliderStateProps, emitUpdate: (value: n
     tooltipPlacement: import('vue').ComputedRef<import('../tooltip/index.js').TooltipPlacement>;
     tooltipId: import('vue').ComputedRef<string | undefined>;
     tooltipColor: import('vue').ComputedRef<import('../../utils/componentColors.js').ComponentColorValue | undefined>;
+    tooltipAutoContrast: import('vue').ComputedRef<boolean | undefined>;
+    tooltipContrastColor: import('vue').ComputedRef<string | undefined>;
     tooltipOffset: import('vue').ComputedRef<import('../floating/index.js').FloatingOffset | undefined>;
     tooltipOpenDelay: import('vue').ComputedRef<number>;
     tooltipArrow: import('vue').ComputedRef<boolean>;

package/dist/components/toast/types.d.ts

@@ -27,6 +27,7 @@ export interface ToastProps extends StylesApiProps<ToastPart> {
     variant?: ToastVariant;
     color?: ToastColor;
     autoContrast?: boolean;
+    contrastColor?: string;
     radius?: ToastRadius;
     role?: ToastRole;
     duration?: number;
@@ -61,6 +62,7 @@ export interface ToastStoreOptions {
     variant?: ToastVariant;
     color?: ToastColor;
     autoContrast?: boolean;
+    contrastColor?: string;
     radius?: ToastRadius;
     role?: ToastRole;
     pauseOnHover?: boolean;

package/dist/components/toast/useToastColor.d.ts

@@ -1,3 +1,3 @@
 import { CSSProperties } from 'vue';
 import { ToastColor, ToastVariant } from './types.js';
-export declare function getToastColorStyle(color: ToastColor | undefined, variant: ToastVariant | undefined, autoContrast: boolean | undefined): CSSProperties | undefined;
+export declare function getToastColorStyle(color: ToastColor | undefined, variant: ToastVariant | undefined, autoContrast: boolean | undefined, contrastColor?: string): CSSProperties | undefined;

package/dist/components/tooltip/types.d.ts

@@ -25,6 +25,7 @@ export interface TooltipProps extends FloatingPositionProps<TooltipPlacement>, S
     content?: string;
     color?: TooltipColor;
     autoContrast?: boolean;
+    contrastColor?: string;
     open?: boolean;
     openDelay?: number;
     disabled?: boolean;

package/dist/components/tooltip/useTooltip.d.ts

@@ -2,7 +2,7 @@ import { CSSProperties } from 'vue';
 import { TooltipOffset, TooltipProps, TooltipTriggerProps } from './types.js';
 type TooltipBehaviorProps = Omit<TooltipProps, 'classNames' | 'styles'>;
 export declare function resolveTooltipOffsetStyle(offset: TooltipOffset | undefined): CSSProperties | undefined;
-export declare function resolveTooltipColorStyleWithContrast(color: TooltipProps['color'], autoContrast: TooltipProps['autoContrast']): CSSProperties | undefined;
+export declare function resolveTooltipColorStyleWithContrast(color: TooltipProps['color'], autoContrast: TooltipProps['autoContrast'], contrastColor?: TooltipProps['contrastColor']): CSSProperties | undefined;
 export declare function useTooltip(props: Readonly<TooltipBehaviorProps>, emitOpenChange?: (open: boolean) => void): {
     rootRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
     contentRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;

package/dist/dropdown-menu.js

@@ -5,7 +5,9 @@ import { t as useRequiredInject } from "./useRequiredInject.js";
 import { n as useOverlayZIndex, r as useOverlayLayer } from "./useOverlayZIndex.js";
 import { n as useFloatingPosition, r as useFloatingTarget, t as isElementReference } from "./useFloatingPosition.js";
 import { n as useTeleportPositioningKey, r as useTeleportTarget, t as provideTeleportTarget } from "./useTeleportTarget.js";
-import { VaporTeleport, VaporTransition, child, computed, createComponent, createComponentWithFallback, createDynamicComponent, createFor, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, isRef, markRaw, mergeProps, nextTick, onBeforeUnmount, onMounted, onUnmounted, provide, ref, renderEffect, resolveComponent, setAttr, setDynamicProps, setInsertionState, setStaticTemplateRef, setStyle, setTemplateRefBinding, setText, shallowRef, template, toDisplayString, txt, unref, useAttrs, useId, watch } from "vue";
+import { n as getNextEnabledIndex, r as useTypeahead, t as getEnabledIndexes } from "./collectionNavigation.js";
+import { t as chevron_right_default } from "./chevron-right.js";
+import { VaporTeleport, VaporTransition, child, computed, createComponent, createComponentWithFallback, createDynamicComponent, createFor, createIf, createSlot, createTemplateRefSetter, defineVaporComponent, extend, isRef, mergeProps, nextTick, onBeforeUnmount, onMounted, onUnmounted, provide, ref, renderEffect, resolveComponent, setAttr, setDynamicProps, setInsertionState, setStaticTemplateRef, setStyle, setTemplateRefBinding, setText, shallowRef, template, toDisplayString, txt, unref, useAttrs, useId, watch } from "vue";
 //#region src/components/dropdown-menu/dropdown-menu-primitive-core.ts
 var rootKey = Symbol("dropdown-menu-root");
 var menuKey = Symbol("dropdown-menu-content");
@@ -156,6 +158,17 @@ function createMenuContext(options) {
 		const item = enabledItems[((currentIndex < 0 ? direction === 1 ? -1 : 0 : currentIndex) + direction + enabledItems.length) % enabledItems.length];
 		if (item) setActive(item.id);
 	}
+	const typeahead = useTypeahead({
+		items: () => sortItems(items.value),
+		activeIndex: () => sortItems(items.value).findIndex((item) => item.id === activeId.value),
+		getKey: (item) => item.id,
+		getTextValue: (item) => item.textValue(),
+		isDisabled: (item) => item.disabled(),
+		onMatch: (item) => setActive(item.id)
+	});
+	watch(computed(() => options.parentSub?.isOpen.value ?? options.root.isOpen.value), (open) => {
+		if (!open) typeahead.reset();
+	}, { flush: "sync" });
 	function onHorizontalKeydown(event, active) {
 		if (options.parentSub && event.key === getCloseDirection(context)) {
 			event.preventDefault();
@@ -169,6 +182,10 @@ function createMenuContext(options) {
 		active.submenu.open("first");
 	}
 	function onKeydown(event) {
+		if (typeahead.handleKey(event)) {
+			event.stopPropagation();
+			return;
+		}
 		const active = items.value.find((item) => item.id === activeId.value);
 		switch (event.key) {
 			case "ArrowDown":
@@ -249,6 +266,7 @@ function usePrimitiveItem(componentName, props, emitSelect, options) {
 			return id.value;
 		},
 		element: () => element.value,
+		textValue: () => props.textValue ?? element.value?.textContent?.trim() ?? "",
 		disabled: () => isDisabled.value,
 		activate
 	};
@@ -302,6 +320,7 @@ var dropdown_menu_checkbox_item_default = /* @__PURE__ */ defineVaporComponent({
 		},
 		id: {},
 		as: { default: "button" },
+		textValue: {},
 		disabled: {
 			type: Boolean,
 			default: false
@@ -569,7 +588,7 @@ function useDropdownMenuPrimitiveContent(props, attrs, events, submenu) {
 }
 //#endregion
 //#region src/components/dropdown-menu/dropdown-menu-content.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$3 = template("<span class=rp-dropdown-menu__arrow aria-hidden=true>");
+var t0$2 = template("<span class=rp-dropdown-menu__arrow aria-hidden=true>");
 //#endregion
 //#region src/components/dropdown-menu/dropdown-menu-content.vue
 var dropdown_menu_content_default = /* @__PURE__ */ defineVaporComponent({
@@ -625,7 +644,7 @@ var dropdown_menu_content_default = /* @__PURE__ */ defineVaporComponent({
 		return createIf(() => unref(shouldRender), () => {
 			const n6 = createDynamicComponent(() => __props.as, { $: [() => unref(rootAttrs)] }, extend(() => {
 				return [createIf(() => __props.arrow, () => {
-					const n4 = t0$3();
+					const n4 = t0$2();
 					_setTemplateRef(n4, arrowElement, null, "arrowElement");
 					renderEffect(() => {
 						setAttr(n4, "data-side", unref(placementSide));
@@ -781,6 +800,7 @@ var dropdown_menu_item_default = /* @__PURE__ */ defineVaporComponent({
 		id: {},
 		as: { default: "button" },
 		value: {},
+		textValue: {},
 		disabled: {
 			type: Boolean,
 			default: false
@@ -970,6 +990,7 @@ var dropdown_menu_radio_item_default = /* @__PURE__ */ defineVaporComponent({
 		value: {},
 		id: {},
 		as: { default: "button" },
+		textValue: {},
 		disabled: {
 			type: Boolean,
 			default: false
@@ -1347,6 +1368,7 @@ var dropdown_menu_sub_trigger_default = /* @__PURE__ */ defineVaporComponent({
 	props: {
 		id: {},
 		as: { default: "button" },
+		textValue: {},
 		disabled: {
 			type: Boolean,
 			default: false
@@ -1366,6 +1388,7 @@ var dropdown_menu_sub_trigger_default = /* @__PURE__ */ defineVaporComponent({
 				return id.value;
 			},
 			element: () => sub.trigger.value,
+			textValue: () => props.textValue ?? sub.trigger.value?.textContent?.trim() ?? "",
 			disabled: () => isDisabled.value,
 			activate: () => sub.open("first"),
 			submenu: sub
@@ -1495,16 +1518,6 @@ var dropdown_menu_trigger_default = /* @__PURE__ */ defineVaporComponent({
 		return n1;
 	}
 });
-//#endregion
-//#region ~icons/lucide/chevron-right
-var t0$2 = 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=\"m9 18l6-6l-6-6\">", 3, 1);
-function render(_ctx) {
-	return t0$2();
-}
-var chevron_right_default = markRaw(defineVaporComponent({
-	name: "lucide-chevron-right",
-	render
-}));
 var DEFAULT_FOCUS_TARGET = "first";
 function getOpenFocusTarget(options) {
 	if (typeof options === "string") return options;
@@ -1552,19 +1565,6 @@ function hasMeasuredRect(rect) {
 function isPointInRect(point, rect, padding = 0) {
 	return point.x >= rect.left - padding && point.x <= rect.right + padding && point.y >= rect.top - padding && point.y <= rect.bottom + padding;
 }
-function getEnabledIndexes(items) {
-	return items.map((item, index) => item.disabled ? -1 : index).filter((index) => index >= 0);
-}
-function getNextEnabledIndex(items, index, direction) {
-	const enabledIndexes = getEnabledIndexes(items);
-	if (enabledIndexes.length === 0) return void 0;
-	if (direction === 1) return enabledIndexes.find((candidate) => candidate > index) ?? enabledIndexes[0];
-	for (let i = enabledIndexes.length - 1; i >= 0; i -= 1) {
-		const candidate = enabledIndexes[i];
-		if (candidate < index) return candidate;
-	}
-	return enabledIndexes[enabledIndexes.length - 1];
-}
 //#endregion
 //#region src/components/dropdown-menu/dropdown-menu-item-row.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0$1 = template("<div>");
@@ -1979,7 +1979,7 @@ function useDropdownMenuHoverIntent({ openSubmenuPath, getItemElement, getSubmen
 }
 //#endregion
 //#region src/components/dropdown-menu/useDropdownMenuInteractions.ts
-function useDropdownMenuInteractions({ props, emit, isDisabled, focusedPath, openSubmenuPath, getItemAtPath, focusItem, moveFocus, submenus, hoverIntent, disclosure, isSubmenuOpeningLeft }) {
+function useDropdownMenuInteractions({ props, emit, isDisabled, focusedPath, openSubmenuPath, getItemAtPath, focusItem, moveFocus, handleTypeahead, submenus, hoverIntent, disclosure, isSubmenuOpeningLeft }) {
 	function activateItem(item, path, event) {
 		if (item.disabled) return;
 		if (hasItemSubmenu(item)) {
@@ -2062,6 +2062,7 @@ function useDropdownMenuInteractions({ props, emit, isDisabled, focusedPath, ope
 	}
 	function onMenuKeydown(event) {
 		hoverIntent.resetHoverIntent();
+		if (handleTypeahead(event)) return;
 		switch (event.key) {
 			case "ArrowDown":
 				event.preventDefault();
@@ -2150,7 +2151,7 @@ function useDropdownMenuNavigation(items) {
 		return getItemsAtPath(getParentPath(path))[path[path.length - 1]];
 	}
 	function focusItem(target, menuPath = []) {
-		const enabledIndexes = getEnabledIndexes(getItemsAtPath(menuPath));
+		const enabledIndexes = getEnabledIndexes(getItemsAtPath(menuPath), (item) => Boolean(item.disabled));
 		const index = target === "last" ? enabledIndexes[enabledIndexes.length - 1] : enabledIndexes[0];
 		if (index === void 0) {
 			if (menuPath.length === 0) focusedPath.value = [];
@@ -2162,13 +2163,19 @@ function useDropdownMenuNavigation(items) {
 	function resetFocus() {
 		focusedPath.value = [];
 	}
+	function setFocusedIndex(index, menuPath = []) {
+		const item = getItemsAtPath(menuPath)[index];
+		if (!item || item.disabled) return false;
+		focusedPath.value = [...menuPath, index];
+		return true;
+	}
 	function isItemFocused(indexOrPath) {
 		return arePathsEqual(normalizePath(indexOrPath), focusedPath.value);
 	}
 	function moveFocus(direction) {
 		const menuPath = getParentPath(focusedPath.value);
 		const itemsAtPath = getItemsAtPath(menuPath);
-		const nextIndex = getNextEnabledIndex(itemsAtPath, focusedPath.value.length === 0 ? direction === 1 ? -1 : itemsAtPath.length : focusedPath.value[focusedPath.value.length - 1], direction);
+		const nextIndex = getNextEnabledIndex(itemsAtPath, focusedPath.value.length === 0 ? direction === 1 ? -1 : itemsAtPath.length : focusedPath.value[focusedPath.value.length - 1], direction, (item) => Boolean(item.disabled));
 		if (nextIndex === void 0) {
 			focusedPath.value = [];
 			return;
@@ -2183,6 +2190,7 @@ function useDropdownMenuNavigation(items) {
 		getItemAtPath,
 		focusItem,
 		resetFocus,
+		setFocusedIndex,
 		isItemFocused,
 		moveFocus
 	};
@@ -2398,13 +2406,26 @@ function useDropdownMenu(props, emit = {}) {
 		]
 	});
 	const placementSide = computed(() => actualPlacement.value.split("-")[0]);
-	const { focusedPath, focusedIndex, getItemAtPath, focusItem, resetFocus, isItemFocused, moveFocus } = useDropdownMenuNavigation(visibleItems);
+	const { focusedPath, focusedIndex, getItemsAtPath, getItemAtPath, focusItem, resetFocus, setFocusedIndex, isItemFocused, moveFocus } = useDropdownMenuNavigation(visibleItems);
 	const submenus = useDropdownSubmenus({
 		focusedPath,
 		getItemAtPath,
 		focusItem
 	});
 	const { openSubmenuPath, isSubmenuOpen } = submenus;
+	const activeMenuPath = computed(() => getParentPath(focusedPath.value));
+	const typeahead = useTypeahead({
+		items: () => getItemsAtPath(activeMenuPath.value),
+		activeIndex: () => focusedPath.value.at(-1) ?? -1,
+		getKey: (item) => item.value,
+		getTextValue: (item) => item.label,
+		isDisabled: (item) => Boolean(item.disabled),
+		scopeKey: () => activeMenuPath.value.join("/"),
+		onMatch(_item, index) {
+			const menuPath = activeMenuPath.value;
+			if (setFocusedIndex(index, menuPath)) submenus.closeSubmenusAfter(menuPath);
+		}
+	});
 	const { activeDescendantId, focusMenu, focusTrigger, getItemId, getSubmenuId, getItemElement, getSubmenuElement, isSubmenuOpeningLeft, getMenuActiveDescendant } = useDropdownMenuDom({
 		menuId,
 		rootRef,
@@ -2447,6 +2468,7 @@ function useDropdownMenu(props, emit = {}) {
 		getItemAtPath,
 		focusItem,
 		moveFocus,
+		handleTypeahead: typeahead.handleKey,
 		submenus,
 		hoverIntent,
 		disclosure,
@@ -2510,6 +2532,9 @@ function useDropdownMenu(props, emit = {}) {
 			target.removeEventListener("keydown", onTriggerKeydown);
 		});
 	}, { flush: "sync" });
+	watch(isVisible, (visible) => {
+		if (!visible) typeahead.reset();
+	}, { flush: "sync" });
 	watch([
 		isExplicitTarget,
 		targetElement,

package/dist/icon-button.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-button[data-v-cda9a84b] {
+.rp-button[data-v-5d5bd5fa] {
     --_rp-button-bg: var(--rp-color-default);
     --_rp-button-bg-hover: var(--rp-color-default-hover);
     --_rp-button-bg-active: var(--rp-color-disabled);
@@ -7,6 +7,8 @@
     --_rp-button-border-hover: var(--_rp-button-border);
     --_rp-button-border-active: var(--_rp-button-border-hover);
     --_rp-button-fg: var(--rp-color-default-color);
+    --_rp-button-fg-hover: var(--_rp-button-fg);
+    --_rp-button-fg-active: var(--_rp-button-fg-hover);
     --_rp-button-height: var(--rp-size-control-md);
     --_rp-button-padding-x: 22px;
     --_rp-button-font-size: var(--rp-font-size-md);
@@ -29,7 +31,7 @@
     color: var(--_rp-button-fg);
     cursor: pointer;
     text-decoration: none;
-    transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast), border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast), transform var(--rp-transition-fast);
+    transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast), transform var(--rp-transition-fast);
     white-space: nowrap;
     user-select: none;
     height: var(--_rp-button-height);
@@ -37,108 +39,110 @@
     font-size: var(--_rp-button-font-size);
     border-radius: var(--_rp-button-radius);
 }
-.rp-button[data-v-cda9a84b]:hover:not(:disabled):not(.rp-button--disabled) {
+.rp-button[data-v-5d5bd5fa]:hover:not(:disabled):not(.rp-button--disabled) {
     background-color: var(--_rp-button-bg-hover);
     border-color: var(--_rp-button-border-hover);
     box-shadow: var(--_rp-button-shadow-hover);
+    color: var(--_rp-button-fg-hover);
 }
-.rp-button[data-v-cda9a84b]:active:not(:disabled):not(.rp-button--disabled) {
+.rp-button[data-v-5d5bd5fa]:active:not(:disabled):not(.rp-button--disabled) {
     background-color: var(--_rp-button-bg-active);
     border-color: var(--_rp-button-border-active);
     box-shadow: var(--_rp-button-shadow-active);
+    color: var(--_rp-button-fg-active);
     transform: translateY(1px);
 }
-.rp-button--size-xs[data-v-cda9a84b] {
+.rp-button--size-xs[data-v-5d5bd5fa] {
     --_rp-button-height: var(--rp-size-control-xs);
     --_rp-button-padding-x: 14px;
     --_rp-button-font-size: var(--rp-font-size-xs);
 }
-.rp-button--size-sm[data-v-cda9a84b] {
+.rp-button--size-sm[data-v-5d5bd5fa] {
     --_rp-button-height: var(--rp-size-control-sm);
     --_rp-button-padding-x: 18px;
     --_rp-button-font-size: var(--rp-font-size-sm);
 }
-.rp-button--size-md[data-v-cda9a84b] {
+.rp-button--size-md[data-v-5d5bd5fa] {
     --_rp-button-height: var(--rp-size-control-md);
     --_rp-button-padding-x: 22px;
     --_rp-button-font-size: var(--rp-font-size-md);
 }
-.rp-button--size-lg[data-v-cda9a84b] {
+.rp-button--size-lg[data-v-5d5bd5fa] {
     --_rp-button-height: var(--rp-size-control-lg);
     --_rp-button-padding-x: 26px;
     --_rp-button-font-size: var(--rp-font-size-lg);
 }
-.rp-button--size-xl[data-v-cda9a84b] {
+.rp-button--size-xl[data-v-5d5bd5fa] {
     --_rp-button-height: var(--rp-size-control-xl);
     --_rp-button-padding-x: 32px;
     --_rp-button-font-size: var(--rp-font-size-xl);
 }
-.rp-button--radius-xs[data-v-cda9a84b] {
+.rp-button--radius-xs[data-v-5d5bd5fa] {
     --_rp-button-radius: var(--rp-radius-xs);
 }
-.rp-button--radius-sm[data-v-cda9a84b] {
+.rp-button--radius-sm[data-v-5d5bd5fa] {
     --_rp-button-radius: var(--rp-radius-sm);
 }
-.rp-button--radius-md[data-v-cda9a84b] {
+.rp-button--radius-md[data-v-5d5bd5fa] {
     --_rp-button-radius: var(--rp-radius-md);
 }
-.rp-button--radius-lg[data-v-cda9a84b] {
+.rp-button--radius-lg[data-v-5d5bd5fa] {
     --_rp-button-radius: var(--rp-radius-lg);
 }
-.rp-button--radius-xl[data-v-cda9a84b] {
+.rp-button--radius-xl[data-v-5d5bd5fa] {
     --_rp-button-radius: var(--rp-radius-xl);
 }
-.rp-button--subtle[data-v-cda9a84b] {
+.rp-button--subtle[data-v-5d5bd5fa] {
     --_rp-button-shadow: none;
     --_rp-button-shadow-hover: none;
     --_rp-button-shadow-active: none;
 }
-.rp-button--surface[data-v-cda9a84b] {
+.rp-button--surface[data-v-5d5bd5fa] {
     --_rp-button-shadow: none;
     --_rp-button-shadow-hover: none;
     --_rp-button-shadow-active: none;
 }
-.rp-button--outline[data-v-cda9a84b] {
+.rp-button--outline[data-v-5d5bd5fa] {
     --_rp-button-shadow: none;
     --_rp-button-shadow-hover: none;
     --_rp-button-shadow-active: none;
 }
-.rp-button--ghost[data-v-cda9a84b] {
+.rp-button--ghost[data-v-5d5bd5fa] {
     --_rp-button-shadow: none;
     --_rp-button-shadow-hover: none;
     --_rp-button-shadow-active: none;
 }
-.rp-button--plain[data-v-cda9a84b] {
+.rp-button--plain[data-v-5d5bd5fa] {
     --_rp-button-shadow: none;
     --_rp-button-shadow-hover: none;
     --_rp-button-shadow-active: none;
 }
-.rp-button[data-v-cda9a84b]:disabled, .rp-button--disabled[data-v-cda9a84b] {
+.rp-button[data-v-5d5bd5fa]:disabled, .rp-button--disabled[data-v-5d5bd5fa] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
     box-shadow: none;
     transform: none;
 }
-.rp-button[data-v-cda9a84b]:focus-visible {
+.rp-button[data-v-5d5bd5fa]: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-button--loading .rp-button__content[data-v-cda9a84b] {
+.rp-button--loading .rp-button__content[data-v-5d5bd5fa] {
     opacity: 0;
 }
-.rp-button__content[data-v-cda9a84b] {
+.rp-button__content[data-v-5d5bd5fa] {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: var(--rp-spacing-2);
 }
-.rp-button__left[data-v-cda9a84b], .rp-button__right[data-v-cda9a84b] {
+.rp-button__left[data-v-5d5bd5fa], .rp-button__right[data-v-5d5bd5fa] {
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;
 }
-.rp-button__loading[data-v-cda9a84b] {
+.rp-button__loading[data-v-5d5bd5fa] {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -147,49 +151,49 @@
     left: 50%;
     translate: -50% -50%;
 }
-.rp-button__spinner[data-v-cda9a84b] {
+.rp-button__spinner[data-v-5d5bd5fa] {
     display: block;
     width: 1em;
     height: 1em;
     flex-shrink: 0;
     transform-origin: center;
-    animation: rp-spinner-spin-cda9a84b 700ms linear infinite;
+    animation: rp-spinner-spin-5d5bd5fa 700ms linear infinite;
 }
-@keyframes rp-spinner-spin-cda9a84b {
+@keyframes rp-spinner-spin-5d5bd5fa {
 to {
       transform: rotate(360deg);
 }
 }
 }@layer ropav.components {
-.rp-icon-button[data-v-cda9a84b] {
+.rp-icon-button[data-v-5d5bd5fa] {
     width: var(--_rp-button-height);
     padding: 0;
 }
-.rp-icon-button__icon[data-v-cda9a84b] {
+.rp-icon-button__icon[data-v-5d5bd5fa] {
     width: 1em;
     height: 1em;
     flex-shrink: 0;
 }
-.rp-icon-button__icon[data-v-cda9a84b] {
+.rp-icon-button__icon[data-v-5d5bd5fa] {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     line-height: 0;
 }
-.rp-icon-button__icon[data-v-cda9a84b] >  svg {
+.rp-icon-button__icon[data-v-5d5bd5fa] >  svg {
     display: block;
     width: 1em;
     height: 1em;
 }
-.rp-icon-button__spinner[data-v-cda9a84b] {
+.rp-icon-button__spinner[data-v-5d5bd5fa] {
     display: block;
     width: 1em;
     height: 1em;
     flex-shrink: 0;
     transform-origin: center;
-    animation: rp-spinner-spin-cda9a84b 700ms linear infinite;
+    animation: rp-spinner-spin-5d5bd5fa 700ms linear infinite;
 }
-@keyframes rp-spinner-spin-cda9a84b {
+@keyframes rp-spinner-spin-5d5bd5fa {
 to {
       transform: rotate(360deg);
 }