ropav 0.1.4 → 0.1.6

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/sliderCore.d.ts

@@ -6,7 +6,8 @@ export interface SliderBounds {
 }
 interface SliderMarkStyleProperties {
     position: `--_rp-${string}`;
-    colors: readonly `--_rp-${string}`[];
+    decorativeColors: readonly `--_rp-${string}`[];
+    foregroundColors: readonly `--_rp-${string}`[];
 }
 interface SliderThumbStyleProperties {
     size: `--${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

@@ -13,7 +13,7 @@ export declare function normalizeRangeSliderMinRange(minRange: number, min: numb
 export declare function normalizeRangeSliderValue(value: RangeSliderValue, min: number, max: number, step: number | 'any', minRange?: number): RangeSliderValue;
 export declare function getClosestRangeSliderThumb(value: number, range: RangeSliderValue, activeThumb?: RangeSliderThumb): RangeSliderThumb;
 export declare function useRangeSlider(props: RangeSliderStateProps, emitUpdate: (value: RangeSliderValue) => void, getValue?: () => RangeSliderValue): {
-    control: import('../../composables/useControlState.js').ControlState;
+    control: import('../../internal/composables/useControlState.js').ControlState;
     nativeMin: import('vue').ComputedRef<RangeSliderValue>;
     nativeMax: import('vue').ComputedRef<RangeSliderValue>;
     nativeStep: import('vue').ComputedRef<number | "any">;
@@ -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

@@ -10,7 +10,7 @@ type SliderStateProps = Readonly<SliderProps & {
     orientation: NonNullable<SliderProps['orientation']>;
 }>;
 export declare function useSlider(props: SliderStateProps, emitUpdate: (value: number) => void, getValue?: () => number): {
-    control: import('../../composables/useControlState.js').ControlState;
+    control: import('../../internal/composables/useControlState.js').ControlState;
     nativeMin: import('vue').ComputedRef<number>;
     nativeMax: import('vue').ComputedRef<number>;
     nativeStep: import('vue').ComputedRef<number | "any">;
@@ -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/switch/useSwitch.d.ts

@@ -2,7 +2,7 @@ import { CSSProperties } from 'vue';
 import { SwitchProps } from './types.js';
 export declare function useSwitch(props: Readonly<SwitchProps>, emitUpdate: (value: boolean) => void, getValue?: () => boolean): {
     inputRef: import('vue').Ref<HTMLInputElement | null, HTMLInputElement | null>;
-    control: import('../../composables/useControlState.js').ControlState;
+    control: import('../../internal/composables/useControlState.js').ControlState;
     rootClass: import('vue').ComputedRef<string[]>;
     rootStyle: import('vue').ComputedRef<CSSProperties | undefined>;
     onChange: (e: Event) => void;

package/dist/components/textarea/useTextarea.d.ts

@@ -1,7 +1,7 @@
 import { TextareaProps } from './types.js';
 export declare function useTextarea(props: Readonly<TextareaProps>, emitUpdate: (value: string) => void, getValue?: () => string): {
     textareaRef: import('vue').Ref<HTMLTextAreaElement | null, HTMLTextAreaElement | null>;
-    control: import('../../composables/useControlState.js').ControlState;
+    control: import('../../internal/composables/useControlState.js').ControlState;
     rootClass: import('vue').ComputedRef<string[]>;
     nativeRows: import('vue').ComputedRef<number | undefined>;
     onInput: (e: Event) => void;

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/composables/index.d.ts

@@ -0,0 +1,2 @@
+export { useControllableValue } from './useControllableValue.js';
+export type { UseControllableValueOptions, UseControllableValueReturn, } from './useControllableValue.js';

package/dist/composables/index.js

@@ -0,0 +1,2 @@
+import { t as useControllableValue } from "../useControllableValue.js";
+export { useControllableValue };

package/dist/composables/useControllableValue.d.ts

@@ -0,0 +1,14 @@
+import { ComputedRef } from 'vue';
+export interface UseControllableValueOptions<T> {
+    modelValue: () => T | undefined;
+    defaultValue: () => T;
+    onChange: (value: T) => void;
+}
+export interface UseControllableValueReturn<T> {
+    initialValue: T;
+    isControlled: ComputedRef<boolean>;
+    value: ComputedRef<T>;
+    setValue: (value: T) => void;
+    resetValue: (value?: T) => void;
+}
+export declare function useControllableValue<T>(options: Readonly<UseControllableValueOptions<T>>): UseControllableValueReturn<T>;

package/dist/dialog.js

@@ -1,3 +1,4 @@
+import { t as useControllableValue } from "./useControllableValue.js";
 import { t as useRequiredInject } from "./useRequiredInject.js";
 import { i as useOverlayLayerBranch, n as useOverlayZIndex, r as useOverlayLayer } from "./useOverlayZIndex.js";
 import { t as useFocusTrap } from "./useFocusTrap.js";
@@ -340,8 +341,12 @@ var dialog_root_default = /* @__PURE__ */ defineVaporComponent({
 		const props = __props;
 		const emit = __emit;
 		const generatedId = useId();
-		const uncontrolledOpen = ref(props.defaultOpen);
-		const isOpen = computed(() => props.open ?? uncontrolledOpen.value);
+		const controllableOpen = useControllableValue({
+			modelValue: () => props.open,
+			defaultValue: () => props.defaultOpen,
+			onChange: (value) => emit("update:open", value)
+		});
+		const isOpen = controllableOpen.value;
 		const modal = computed(() => props.modal);
 		const closeOnEscape = computed(() => props.closeOnEscape);
 		const closeOnOutsideClick = computed(() => props.closeOnOutsideClick);
@@ -366,9 +371,7 @@ var dialog_root_default = /* @__PURE__ */ defineVaporComponent({
 			})
 		});
 		function setOpen(value) {
-			const previous = isOpen.value;
-			if (props.open === void 0) uncontrolledOpen.value = value;
-			if (previous !== value) emit("update:open", value);
+			if (isOpen.value !== value) controllableOpen.setValue(value);
 		}
 		function rememberFocus() {
 			if (typeof document === "undefined" || restoreFocusTo) return;

package/dist/dropdown-menu.js

@@ -1,11 +1,14 @@
 import './dropdown-menu.css';
-import { t as bem } from "./bem.js";
+import { t as useControllableValue } from "./useControllableValue.js";
 import { n as useStylesApi, t as presence } from "./styles-api.js";
 import { t as useRequiredInject } from "./useRequiredInject.js";
+import { t as bem } from "./bem.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 +159,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 +183,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 +267,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 +321,7 @@ var dropdown_menu_checkbox_item_default = /* @__PURE__ */ defineVaporComponent({
 		},
 		id: {},
 		as: { default: "button" },
+		textValue: {},
 		disabled: {
 			type: Boolean,
 			default: false
@@ -320,14 +340,17 @@ var dropdown_menu_checkbox_item_default = /* @__PURE__ */ defineVaporComponent({
 		const props = __props;
 		const emit = __emit;
 		const attrs = useAttrs();
-		const uncontrolled = ref(props.defaultValue);
-		const value = computed(() => props.modelValue ?? uncontrolled.value);
+		const controllable = useControllableValue({
+			modelValue: () => props.modelValue,
+			defaultValue: () => props.defaultValue,
+			onChange: (value) => emit("update:modelValue", value)
+		});
+		const value = controllable.value;
 		const checked = computed(() => value.value === "indeterminate" ? "mixed" : value.value);
 		const state = computed(() => value.value === "indeterminate" ? "indeterminate" : value.value ? "checked" : "unchecked");
 		function toggleChecked() {
 			const nextValue = value.value === "indeterminate" ? true : !value.value;
-			if (props.modelValue === void 0) uncontrolled.value = nextValue;
-			emit("update:modelValue", nextValue);
+			controllable.setValue(nextValue);
 		}
 		provide(checkedKey, {
 			state,
@@ -569,7 +592,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 +648,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));
@@ -746,7 +769,6 @@ var dropdown_menu_context_trigger_default = /* @__PURE__ */ defineVaporComponent
 		const rootAttrs = computed(() => mergeProps(attrs, {
 			id: id.value,
 			"aria-controls": root.contentId.value,
-			"aria-expanded": root.isOpen.value,
 			"aria-haspopup": "menu",
 			"aria-disabled": optionalAttr(isDisabled.value),
 			"data-state": root.isOpen.value ? "open" : "closed",
@@ -781,6 +803,7 @@ var dropdown_menu_item_default = /* @__PURE__ */ defineVaporComponent({
 		id: {},
 		as: { default: "button" },
 		value: {},
+		textValue: {},
 		disabled: {
 			type: Boolean,
 			default: false
@@ -937,12 +960,17 @@ var dropdown_menu_radio_group_default = /* @__PURE__ */ defineVaporComponent({
 		const emit = __emit;
 		const attrs = useAttrs();
 		useRequiredInject(menuKey, "RpDropdownMenuRadioGroup");
-		const uncontrolled = ref(props.defaultValue);
-		const value = computed(() => props.modelValue === void 0 ? uncontrolled.value : props.modelValue);
+		const controllable = useControllableValue({
+			modelValue: () => props.modelValue,
+			defaultValue: () => props.defaultValue,
+			onChange: (value) => {
+				if (value !== null) emit("update:modelValue", value);
+			}
+		});
+		const value = controllable.value;
 		function select(nextValue) {
 			if (value.value === nextValue) return;
-			if (props.modelValue === void 0) uncontrolled.value = nextValue;
-			emit("update:modelValue", nextValue);
+			controllable.setValue(nextValue);
 		}
 		provide(radioGroupKey, {
 			value,
@@ -956,7 +984,7 @@ var dropdown_menu_radio_group_default = /* @__PURE__ */ defineVaporComponent({
 			"aria-labelledby": props.ariaLabelledby
 		}));
 		return createDynamicComponent(() => __props.as, { $: [() => rootAttrs.value] }, extend(() => {
-			return createSlot("default", { value: () => value.value });
+			return createSlot("default", { value: () => unref(value) });
 		}, { _: 8 }), 1);
 	}
 });
@@ -970,6 +998,7 @@ var dropdown_menu_radio_item_default = /* @__PURE__ */ defineVaporComponent({
 		value: {},
 		id: {},
 		as: { default: "button" },
+		textValue: {},
 		disabled: {
 			type: Boolean,
 			default: false
@@ -1068,8 +1097,12 @@ var dropdown_menu_root_default = /* @__PURE__ */ defineVaporComponent({
 		const emit = __emit;
 		const generatedId = useId();
 		const id = computed(() => props.id ?? `${generatedId}-dropdown-menu`);
-		const uncontrolledOpen = ref(props.defaultOpen);
-		const isOpen = computed(() => props.open ?? uncontrolledOpen.value);
+		const controllableOpen = useControllableValue({
+			modelValue: () => props.open,
+			defaultValue: () => props.defaultOpen,
+			onChange: (nextOpen) => emit("update:open", nextOpen)
+		});
+		const isOpen = controllableOpen.value;
 		const disabled = computed(() => props.disabled);
 		const modal = computed(() => props.modal);
 		const trigger = ref(null);
@@ -1094,9 +1127,7 @@ var dropdown_menu_root_default = /* @__PURE__ */ defineVaporComponent({
 		});
 		function setOpen(value) {
 			if (value && disabled.value) return;
-			const previous = isOpen.value;
-			if (props.open === void 0) uncontrolledOpen.value = value;
-			if (previous !== value) emit("update:open", value);
+			if (isOpen.value !== value) controllableOpen.setValue(value);
 		}
 		function rememberFocus() {
 			if (typeof document === "undefined" || returnFocusElement) return;
@@ -1232,16 +1263,18 @@ var dropdown_menu_sub_default = /* @__PURE__ */ defineVaporComponent({
 		const props = __props;
 		const emit = __emit;
 		const parentMenu = useRequiredInject(menuKey, "RpDropdownMenuSub");
-		const uncontrolled = ref(props.defaultOpen);
-		const isOpen = computed(() => props.open ?? uncontrolled.value);
+		const controllableOpen = useControllableValue({
+			modelValue: () => props.open,
+			defaultValue: () => props.defaultOpen,
+			onChange: (open) => emit("update:open", open)
+		});
+		const isOpen = controllableOpen.value;
 		const trigger = ref(null);
 		const contentId = ref();
 		const actualPlacement = ref("right-start");
 		const pendingFocus = ref(false);
 		function setOpen(value) {
-			const previous = isOpen.value;
-			if (props.open === void 0) uncontrolled.value = value;
-			if (previous !== value) emit("update:open", value);
+			if (isOpen.value !== value) controllableOpen.setValue(value);
 		}
 		const context = {
 			isOpen,
@@ -1273,7 +1306,7 @@ var dropdown_menu_sub_default = /* @__PURE__ */ defineVaporComponent({
 		});
 		onBeforeUnmount(() => parentMenu.unregisterSub(context));
 		return createSlot("default", {
-			isOpen: () => isOpen.value,
+			isOpen: () => unref(isOpen),
 			open: () => context.open,
 			close: () => context.close
 		});
@@ -1347,6 +1380,7 @@ var dropdown_menu_sub_trigger_default = /* @__PURE__ */ defineVaporComponent({
 	props: {
 		id: {},
 		as: { default: "button" },
+		textValue: {},
 		disabled: {
 			type: Boolean,
 			default: false
@@ -1366,6 +1400,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 +1530,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 +1577,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>");
@@ -1682,12 +1694,10 @@ var dropdown_menu_items_default = /* @__PURE__ */ defineVaporComponent({
 });
 //#endregion
 //#region src/components/dropdown-menu/useDropdownMenuDisclosure.ts
-function useDropdownMenuDisclosure({ props, emit, rootRef, menuRef, targetRef, uncontrolledOpen, isDisabled, isOpen, isVisible, focusedPath, resetFocus, resetSubmenus, resetHoverIntent, focusItem, focusMenu, focusTrigger, layer }) {
+function useDropdownMenuDisclosure({ props, emit, rootRef, menuRef, targetRef, setControllableOpen, isDisabled, isOpen, isVisible, focusedPath, resetFocus, resetSubmenus, resetHoverIntent, focusItem, focusMenu, focusTrigger, layer }) {
 	function setOpen(nextOpen) {
 		if (nextOpen && isDisabled.value) return;
-		const previousOpen = isOpen.value;
-		if (props.open === void 0) uncontrolledOpen.value = nextOpen;
-		if (previousOpen !== nextOpen) emit.openChange?.(nextOpen);
+		if (isOpen.value !== nextOpen) setControllableOpen(nextOpen);
 	}
 	function resetMenuFocus() {
 		resetFocus();
@@ -1979,7 +1989,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 +2072,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 +2161,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 +2173,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 +2200,7 @@ function useDropdownMenuNavigation(items) {
 		getItemAtPath,
 		focusItem,
 		resetFocus,
+		setFocusedIndex,
 		isItemFocused,
 		moveFocus
 	};
@@ -2360,7 +2378,11 @@ function useDropdownMenu(props, emit = {}) {
 	const rootRef = ref(null);
 	const menuRef = ref(null);
 	const arrowRef = ref(null);
-	const uncontrolledOpen = ref(false);
+	const controllableOpen = useControllableValue({
+		modelValue: () => props.open,
+		defaultValue: () => false,
+		onChange: (open) => emit.openChange?.(open)
+	});
 	const generatedId = useId();
 	const menuId = computed(() => props.id ?? `${generatedId}-menu`);
 	const placement = computed(() => props.placement ?? "bottom-start");
@@ -2371,7 +2393,7 @@ function useDropdownMenu(props, emit = {}) {
 	const targetElement = computed(() => isElementReference(resolvedTarget.value) ? resolvedTarget.value : null);
 	const visibleItems = computed(() => props.items ?? []);
 	const isDisabled = computed(() => Boolean(props.disabled));
-	const isOpen = computed(() => props.open ?? uncontrolledOpen.value);
+	const isOpen = controllableOpen.value;
 	const isVisible = computed(() => isOpen.value && !isDisabled.value);
 	const layer = useOverlayLayer({
 		active: isVisible,
@@ -2398,13 +2420,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,
@@ -2424,7 +2459,7 @@ function useDropdownMenu(props, emit = {}) {
 		rootRef,
 		menuRef,
 		targetRef: targetElement,
-		uncontrolledOpen,
+		setControllableOpen: controllableOpen.setValue,
 		isDisabled,
 		isOpen,
 		isVisible,
@@ -2447,6 +2482,7 @@ function useDropdownMenu(props, emit = {}) {
 		getItemAtPath,
 		focusItem,
 		moveFocus,
+		handleTypeahead: typeahead.handleKey,
 		submenus,
 		hoverIntent,
 		disclosure,
@@ -2510,6 +2546,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/field.js

@@ -1,6 +1,6 @@
 import './field.css';
-import { t as bem } from "./bem.js";
 import { n as useStylesApi, t as presence } from "./styles-api.js";
+import { t as bem } from "./bem.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { child, computed, createIf, createInvoker, createSlot, defineVaporComponent, delegateEvents, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, unref, useId, useSlots } from "vue";
 //#region src/components/field/useField.ts