ropav 0.12.3 → 0.14.0

package/dist/composables/use-form-validation-state.js

@@ -1,127 +1,7 @@
-import { createContext } from "../utils/create-context.js";
+import { useFormContext } from "./form-context.js";
+import { CUSTOM_VALIDITY_STATE, DEFAULT_VALIDATION_RESULT, MISSING_VALIDITY_STATE, VALID_VALIDITY_STATE, isEqualValidation, isValueMissing, missingValueMessage } from "./validation-result.js";
 import { computed, nextTick, shallowRef, toValue, watch } from "vue";
 //#region src/composables/use-form-validation-state.ts
-var VALID_VALIDITY_STATE = Object.freeze({
-	badInput: false,
-	customError: false,
-	patternMismatch: false,
-	rangeOverflow: false,
-	rangeUnderflow: false,
-	stepMismatch: false,
-	tooLong: false,
-	tooShort: false,
-	typeMismatch: false,
-	valid: true,
-	valueMissing: false
-});
-/** Failure that came from a prop, a `validate` function or the server rather than the browser. */
-var CUSTOM_VALIDITY_STATE = Object.freeze({
-	...VALID_VALIDITY_STATE,
-	customError: true,
-	valid: false
-});
-/** A required field with nothing in it. What the browser reports under `"native"`. */
-var MISSING_VALIDITY_STATE = Object.freeze({
-	...VALID_VALIDITY_STATE,
-	valid: false,
-	valueMissing: true
-});
-var DEFAULT_VALIDATION_RESULT = Object.freeze({
-	isInvalid: false,
-	validationDetails: VALID_VALIDITY_STATE,
-	validationErrors: []
-});
-/**
-* One verdict out of several, for a control whose value has more than one part.
-*
-* Invalid if any part is, with the messages collected in order and deduplicated — two ends of a
-* range that are both out of bounds say the same thing, and saying it twice is not more helpful.
-*/
-var mergeValidation = (...results) => {
-	const errors = /* @__PURE__ */ new Set();
-	const details = { ...VALID_VALIDITY_STATE };
-	let isInvalid = false;
-	for (const result of results) {
-		for (const error of result.validationErrors) errors.add(error);
-		isInvalid ||= result.isInvalid;
-		for (const key of Object.keys(details)) details[key] ||= result.validationDetails[key];
-	}
-	details.valid = !isInvalid;
-	return {
-		isInvalid,
-		validationDetails: details,
-		validationErrors: [...errors]
-	};
-};
-/** Freeze an element's live validity into a result the state layer can hold. */
-var getNativeValidation = (element) => {
-	const validity = element.validity;
-	return {
-		isInvalid: !validity.valid,
-		validationDetails: {
-			badInput: validity.badInput,
-			customError: validity.customError,
-			patternMismatch: validity.patternMismatch,
-			rangeOverflow: validity.rangeOverflow,
-			rangeUnderflow: validity.rangeUnderflow,
-			stepMismatch: validity.stepMismatch,
-			tooLong: validity.tooLong,
-			tooShort: validity.tooShort,
-			typeMismatch: validity.typeMismatch,
-			valid: validity.valid,
-			valueMissing: validity.valueMissing
-		},
-		validationErrors: element.validationMessage ? [element.validationMessage] : []
-	};
-};
-var missingValueMessages = /* @__PURE__ */ new Map();
-/**
-* What the browser would say about an empty control of this kind.
-*
-* Read off a detached probe rather than translated here. The platform already holds the sentence,
-* in the *browser's* locale — which is the locale a validation message belongs in, since it sits
-* beside the browser's own — and it is the one the same field would report under `"native"`.
-*
-* Empty on a server, where the field cannot have been revealed yet and so has nothing to say.
-*/
-var missingValueMessage = (kind) => {
-	const cached = missingValueMessages.get(kind);
-	if (cached !== void 0) return cached;
-	if (typeof document === "undefined") return "";
-	let probe;
-	if (kind === "select") probe = document.createElement("select");
-	else {
-		const input = document.createElement("input");
-		if (kind !== "text") {
-			input.type = kind;
-			input.name = "probe";
-		}
-		probe = input;
-	}
-	probe.required = true;
-	const message = probe.validationMessage;
-	missingValueMessages.set(kind, message);
-	return message;
-};
-/** Whether a value counts as nothing. Covers every shape a field holds when it is empty. */
-var isValueMissing = (value) => {
-	if (value == null || value === "" || value === false) return true;
-	if (Array.isArray(value)) return value.length === 0;
-	return typeof value === "number" && Number.isNaN(value);
-};
-/**
-* React splits this in two — `FormValidationContext` in react-stately for the errors,
-* `FormContext` in react-aria-components for the behaviour — only because the two live in
-* different packages. Here one provider hands out both, so a field injects once and the two
-* halves cannot drift apart.
-*
-* Loose: a field outside a form is the normal case, not an error.
-*/
-var [useFormContext, provideFormContext] = createContext({
-	defaultValue: null,
-	name: "FormContext",
-	strict: false
-});
 var asArray = (value) => {
 	if (!value) return [];
 	return Array.isArray(value) ? value : [value];
@@ -136,17 +16,6 @@ var toValidationResult = (errors) => errors.length > 0 ? {
 	validationErrors: errors
 } : null;
 /**
-* Whether two results say the same thing.
-*
-* Not an optimisation: the results live in `shallowRef`s, and assigning an equal-but-new
-* object still retriggers every computed reading them.
-*/
-var isEqualValidation = (a, b) => {
-	if (a === b) return true;
-	if (!a || !b) return false;
-	return a.isInvalid === b.isInvalid && a.validationErrors.length === b.validationErrors.length && a.validationErrors.every((error, index) => error === b.validationErrors[index]) && Object.keys(a.validationDetails).every((key) => a.validationDetails[key] === b.validationDetails[key]);
-};
-/**
 * Decide what a field's validation currently says, ported from React Aria's
 * `packages/react-stately/src/form/useFormValidationState.ts` (react-stately 3.49.0).
 *
@@ -279,4 +148,4 @@ var useFormValidationState = (options) => {
 	};
 };
 //#endregion
-export { CUSTOM_VALIDITY_STATE, DEFAULT_VALIDATION_RESULT, MISSING_VALIDITY_STATE, VALID_VALIDITY_STATE, getNativeValidation, isEqualValidation, isValueMissing, mergeValidation, missingValueMessage, provideFormContext, useFormContext, useFormValidationState };
+export { useFormValidationState };

package/dist/composables/use-form-validation.d.ts

@@ -1,4 +1,5 @@
-import type { FormValidationState, ValidatableElement } from "./use-form-validation-state.js";
+import type { FormValidationState } from "./use-form-validation-state.js";
+import type { ValidatableElement } from "./validation-result.js";
 import type { MaybeRefOrGetter, Ref } from "vue";
 export interface UseFormValidationOptions {
     /** Called instead of focusing the element when a failed submit lands on this field. */

package/dist/composables/use-form-validation.js

@@ -1,5 +1,5 @@
-import { setInteractionModality } from "./use-interaction-states.js";
-import { getNativeValidation } from "./use-form-validation-state.js";
+import { setInteractionModality } from "./interaction-modality.js";
+import { getNativeValidation } from "./validation-result.js";
 import { onScopeDispose, toValue, watch, watchEffect } from "vue";
 //#region src/composables/use-form-validation.ts
 /** First control in the form the browser considers invalid, in document order. */

package/dist/composables/use-interaction-states.d.ts

@@ -1,21 +1,6 @@
 import type { ComputedRef, MaybeRefOrGetter } from "vue";
 /** How the last interaction reached the page, which decides whether focus is visible. */
 export type InteractionModality = "keyboard" | "pointer";
-/**
- * Keep the shared modality listeners attached, returning the release.
- *
- * For a component that has to ask how the user is driving the page without otherwise taking part
- * in the interaction lifecycle — a tooltip trigger, which opens on hover only for a real pointer.
- * Without this the answer would be whatever it was when the last interactive component unmounted.
- */
-export declare const retainInteractionModality: () => (() => void);
-/**
- * How the user is driving the page right now.
- *
- * Ported from React Aria's `getInteractionModality`. Not reactive on purpose — read it inside an
- * event handler, where the answer is the one that matters.
- */
-export declare const getInteractionModality: () => InteractionModality;
 /**
  * The same answer as a reactive ref, for text that is rendered rather than read in a handler.
  *
@@ -29,27 +14,6 @@ export declare const getInteractionModality: () => InteractionModality;
  * interaction lifecycle.
  */
 export declare const useInteractionModality: () => ComputedRef<InteractionModality>;
-/**
- * Whether focus arriving right now is the kind that came from a keyboard.
- *
- * Ported from React Aria's `isFocusVisible`, and reads the same answer React Aria reads — the one
- * that follows the pointer as it moves. Read it inside a handler: a tooltip asks it on focus to
- * tell tabbing to a button apart from clicking it, and only the pointer-following answer knows the
- * user had already reached for the mouse.
- *
- * Not the answer that decides whether a ring is painted. That one lives on `useInteractionStates`
- * and deliberately ignores a bare mouse move, so moving the pointer cannot erase a ring that is
- * already there. The two can disagree, and that is the point.
- */
-export declare const isFocusVisible: () => boolean;
-/**
- * Declare how the last interaction reached the page.
- *
- * Ported from React Aria's `setInteractionModality`. A component that moves focus itself —
- * a slider label handing focus to its first thumb — has to say that the move came from the
- * keyboard, or the ring it just earned would not be painted.
- */
-export declare const setInteractionModality: (next: InteractionModality) => void;
 export interface UseInteractionStatesOptions {
     /** Suppresses every state and keeps the element out of the interaction lifecycle. */
     isDisabled?: MaybeRefOrGetter<boolean | undefined>;

package/dist/composables/use-interaction-states.js

@@ -1,65 +1,6 @@
+import { getFocusRingModality, retainInteractionModality } from "./interaction-modality.js";
 import { computed, onScopeDispose, shallowRef, toValue } from "vue";
 //#region src/composables/use-interaction-states.ts
-var modality = shallowRef("keyboard");
-/**
-* The same answer, kept out of the reactive graph.
-*
-* These are two different questions and they need two different answers. "Should a focus ring be
-* painted" may only change when something is pressed or a key is struck — a bare mouse move must
-* not erase a ring that is already there. "How is the user driving the page right now" has to
-* follow the pointer as it moves, because a tooltip decides whether to open on hover by asking it.
-* Answering the second reactively would make every mouse move re-render every focusable thing on
-* the page and drop the ring while doing it, which is why React Aria keeps the same split.
-*/
-var latestModality = "keyboard";
-/** Number of live consumers, so the document listeners are attached exactly once. */
-var consumerCount = 0;
-var onGlobalKeydown = (event) => {
-	if (event.metaKey || event.altKey || event.ctrlKey) return;
-	latestModality = "keyboard";
-	modality.value = "keyboard";
-};
-var onGlobalPointerdown = () => {
-	latestModality = "pointer";
-	modality.value = "pointer";
-};
-/** Tracked without touching the reactive ref, for the reason above. */
-var onGlobalPointerMoved = () => {
-	latestModality = "pointer";
-};
-/** Attach the shared modality listeners, returning the release for this consumer. */
-var retainModalityListeners = () => {
-	if (typeof document === "undefined") return () => {};
-	if (++consumerCount === 1) {
-		document.addEventListener("keydown", onGlobalKeydown, true);
-		document.addEventListener("pointerdown", onGlobalPointerdown, true);
-		document.addEventListener("pointermove", onGlobalPointerMoved, true);
-		document.addEventListener("pointerup", onGlobalPointerMoved, true);
-	}
-	return () => {
-		if (--consumerCount === 0) {
-			document.removeEventListener("keydown", onGlobalKeydown, true);
-			document.removeEventListener("pointerdown", onGlobalPointerdown, true);
-			document.removeEventListener("pointermove", onGlobalPointerMoved, true);
-			document.removeEventListener("pointerup", onGlobalPointerMoved, true);
-		}
-	};
-};
-/**
-* Keep the shared modality listeners attached, returning the release.
-*
-* For a component that has to ask how the user is driving the page without otherwise taking part
-* in the interaction lifecycle — a tooltip trigger, which opens on hover only for a real pointer.
-* Without this the answer would be whatever it was when the last interactive component unmounted.
-*/
-var retainInteractionModality = () => retainModalityListeners();
-/**
-* How the user is driving the page right now.
-*
-* Ported from React Aria's `getInteractionModality`. Not reactive on purpose — read it inside an
-* event handler, where the answer is the one that matters.
-*/
-var getInteractionModality = () => latestModality;
 /**
 * The same answer as a reactive ref, for text that is rendered rather than read in a handler.
 *
@@ -73,33 +14,9 @@ var getInteractionModality = () => latestModality;
 * interaction lifecycle.
 */
 var useInteractionModality = () => {
-	const release = retainModalityListeners();
+	const release = retainInteractionModality();
 	onScopeDispose(release);
-	return computed(() => modality.value);
-};
-/**
-* Whether focus arriving right now is the kind that came from a keyboard.
-*
-* Ported from React Aria's `isFocusVisible`, and reads the same answer React Aria reads — the one
-* that follows the pointer as it moves. Read it inside a handler: a tooltip asks it on focus to
-* tell tabbing to a button apart from clicking it, and only the pointer-following answer knows the
-* user had already reached for the mouse.
-*
-* Not the answer that decides whether a ring is painted. That one lives on `useInteractionStates`
-* and deliberately ignores a bare mouse move, so moving the pointer cannot erase a ring that is
-* already there. The two can disagree, and that is the point.
-*/
-var isFocusVisible = () => latestModality === "keyboard";
-/**
-* Declare how the last interaction reached the page.
-*
-* Ported from React Aria's `setInteractionModality`. A component that moves focus itself —
-* a slider label handing focus to its first thumb — has to say that the move came from the
-* keyboard, or the ring it just earned would not be painted.
-*/
-var setInteractionModality = (next) => {
-	latestModality = next;
-	modality.value = next;
+	return computed(() => getFocusRingModality());
 };
 /**
 * Track hover, press and focus so a component can publish them as `data-*`
@@ -161,13 +78,13 @@ var useInteractionStates = (options = {}) => {
 		focused.value = false;
 		endPress();
 	};
-	const releaseModalityListeners = retainModalityListeners();
+	const releaseModalityListeners = retainInteractionModality();
 	onScopeDispose(() => {
 		releaseModalityListeners();
 		releasePress?.();
 	}, true);
 	return {
-		isFocusVisible: computed(() => focused.value && !isDisabled.value && modality.value === "keyboard"),
+		isFocusVisible: computed(() => focused.value && !isDisabled.value && getFocusRingModality() === "keyboard"),
 		isFocused: computed(() => focused.value && !isDisabled.value),
 		isHovered: computed(() => hovered.value && !isInert.value),
 		isPressed: computed(() => pressed.value && !isInert.value),
@@ -209,16 +126,16 @@ var useFocusWithin = (options = {}) => {
 		if (currentTarget instanceof Node && relatedTarget instanceof Node && currentTarget.contains(relatedTarget)) return;
 		focusWithin.value = false;
 	};
-	const releaseModalityListeners = retainModalityListeners();
+	const releaseModalityListeners = retainInteractionModality();
 	onScopeDispose(() => {
 		releaseModalityListeners();
 	}, true);
 	return {
-		isFocusVisible: computed(() => focusWithin.value && !isDisabled.value && modality.value === "keyboard"),
+		isFocusVisible: computed(() => focusWithin.value && !isDisabled.value && getFocusRingModality() === "keyboard"),
 		isFocusWithin: computed(() => focusWithin.value && !isDisabled.value),
 		onFocusin,
 		onFocusout
 	};
 };
 //#endregion
-export { getInteractionModality, isFocusVisible, retainInteractionModality, setInteractionModality, useFocusWithin, useInteractionModality, useInteractionStates };
+export { useFocusWithin, useInteractionModality, useInteractionStates };

package/dist/composables/use-locale.d.ts

@@ -1,19 +1,5 @@
 import type { Locale } from "../utils/locale.js";
 import type { ComputedRef, MaybeRefOrGetter } from "vue";
-/**
- * The locale an ancestor has chosen, or `null` when nobody has and the browser's own should win.
- *
- * Loose, because most of the tree runs without a provider and reading the browser setting is the
- * right answer there — not an error.
- */
-export declare const useLocaleContext: () => ComputedRef<Locale> | null, provideLocaleContext: (value: ComputedRef<Locale> | null) => ComputedRef<Locale> | null;
-/**
- * The locale the browser is set to, following the user changing it.
- *
- * Ported from React Aria's `packages/react-aria/src/i18n/useDefaultLocale.ts` (react-aria 3.51.0),
- * minus its server branch — this package does not render on the server yet.
- */
-export declare const useDefaultLocale: () => ComputedRef<Locale>;
 /**
  * The locale that applies here: the nearest ancestor's choice, or the browser's when there is none.
  *

package/dist/composables/use-locale.js

@@ -1,6 +1,7 @@
 import { createContext } from "../utils/create-context.js";
-import { getDefaultLocale, isRTL } from "../utils/locale.js";
-import { computed, onScopeDispose, shallowRef, toValue } from "vue";
+import { isRTL } from "../utils/locale.js";
+import { useDefaultLocale } from "./use-default-locale.js";
+import { computed, toValue } from "vue";
 //#region src/composables/use-locale.ts
 /**
 * The locale an ancestor has chosen, or `null` when nobody has and the browser's own should win.
@@ -14,40 +15,6 @@ var [useLocaleContext, provideLocaleContext] = createContext({
 	strict: false
 });
 /**
-* The browser's locale, shared by every consumer and updated when the user changes it.
-*
-* Module-level rather than per-component: `languagechange` is a window event and the answer is the
-* same for the whole page, so one listener serves all of them. Held behind a reference count so a
-* page with no locale-aware component on it carries no listener.
-*/
-var browserLocale = shallowRef(getDefaultLocale());
-var consumerCount = 0;
-var onLanguageChange = () => {
-	browserLocale.value = getDefaultLocale();
-};
-/** Attach the shared `languagechange` listener, returning the release for this consumer. */
-var retainBrowserLocale = () => {
-	/* c8 ignore next */
-	if (typeof window === "undefined") return () => {};
-	if (++consumerCount === 1) {
-		onLanguageChange();
-		window.addEventListener("languagechange", onLanguageChange);
-	}
-	return () => {
-		if (--consumerCount === 0) window.removeEventListener("languagechange", onLanguageChange);
-	};
-};
-/**
-* The locale the browser is set to, following the user changing it.
-*
-* Ported from React Aria's `packages/react-aria/src/i18n/useDefaultLocale.ts` (react-aria 3.51.0),
-* minus its server branch — this package does not render on the server yet.
-*/
-var useDefaultLocale = () => {
-	onScopeDispose(retainBrowserLocale());
-	return computed(() => browserLocale.value);
-};
-/**
 * The locale that applies here: the nearest ancestor's choice, or the browser's when there is none.
 *
 * Ported from React Aria's `packages/react-aria/src/i18n/I18nProvider.tsx` (react-aria 3.51.0).
@@ -77,4 +44,4 @@ var provideLocale = (locale) => {
 	return resolved;
 };
 //#endregion
-export { provideLocale, provideLocaleContext, useDefaultLocale, useLocale, useLocaleContext };
+export { provideLocale, useLocale };

package/dist/composables/use-localized-string-dictionary.d.ts

@@ -0,0 +1,10 @@
+import type { LocalizedString, LocalizedStrings } from "@internationalized/string";
+import { LocalizedStringDictionary } from "@internationalized/string";
+/**
+ * The dictionary for a table of localized strings.
+ *
+ * Ported from React Aria's `packages/react-aria/src/i18n/useLocalizedStringFormatter.ts`
+ * (react-aria 3.51.0), without its global-dictionary lookup: that exists so a server can hand
+ * pre-loaded strings to the client, which this package does not do yet.
+ */
+export declare const useLocalizedStringDictionary: <K extends string = string, T extends LocalizedString = string>(strings: LocalizedStrings<K, T>) => LocalizedStringDictionary<K, T>;

package/dist/composables/use-localized-string-dictionary.js

@@ -0,0 +1,26 @@
+import { LocalizedStringDictionary } from "@internationalized/string";
+//#region src/composables/use-localized-string-dictionary.ts
+/**
+* Dictionaries built so far, keyed by the table each was built from.
+*
+* A dictionary is derived entirely from its strings and is read-only afterwards, so every consumer
+* of the same table can share one. Weak, so a table that goes out of scope takes its dictionary
+* with it.
+*/
+var dictionaries = /* @__PURE__ */ new WeakMap();
+/**
+* The dictionary for a table of localized strings.
+*
+* Ported from React Aria's `packages/react-aria/src/i18n/useLocalizedStringFormatter.ts`
+* (react-aria 3.51.0), without its global-dictionary lookup: that exists so a server can hand
+* pre-loaded strings to the client, which this package does not do yet.
+*/
+var useLocalizedStringDictionary = (strings) => {
+	const cached = dictionaries.get(strings);
+	if (cached) return cached;
+	const dictionary = new LocalizedStringDictionary(strings);
+	dictionaries.set(strings, dictionary);
+	return dictionary;
+};
+//#endregion
+export { useLocalizedStringDictionary };

package/dist/composables/use-localized-string-formatter.d.ts

@@ -1,14 +1,5 @@
 import type { LocalizedStringFormatter as Formatter, LocalizedString, LocalizedStrings } from "@internationalized/string";
 import type { ComputedRef } from "vue";
-import { LocalizedStringDictionary } from "@internationalized/string";
-/**
- * The dictionary for a table of localized strings.
- *
- * Ported from React Aria's `packages/react-aria/src/i18n/useLocalizedStringFormatter.ts`
- * (react-aria 3.51.0), without its global-dictionary lookup: that exists so a server can hand
- * pre-loaded strings to the client, which this package does not do yet.
- */
-export declare const useLocalizedStringDictionary: <K extends string = string, T extends LocalizedString = string>(strings: LocalizedStrings<K, T>) => LocalizedStringDictionary<K, T>;
 /**
  * A formatter reading a table of localized strings in the locale that applies here.
  *

package/dist/composables/use-localized-string-formatter.js

@@ -1,30 +1,9 @@
 import { useLocale } from "./use-locale.js";
+import { useLocalizedStringDictionary } from "./use-localized-string-dictionary.js";
 import { computed } from "vue";
-import { LocalizedStringDictionary, LocalizedStringFormatter } from "@internationalized/string";
+import { LocalizedStringFormatter } from "@internationalized/string";
 //#region src/composables/use-localized-string-formatter.ts
 /**
-* Dictionaries built so far, keyed by the table each was built from.
-*
-* A dictionary is derived entirely from its strings and is read-only afterwards, so every consumer
-* of the same table can share one. Weak, so a table that goes out of scope takes its dictionary
-* with it.
-*/
-var dictionaries = /* @__PURE__ */ new WeakMap();
-/**
-* The dictionary for a table of localized strings.
-*
-* Ported from React Aria's `packages/react-aria/src/i18n/useLocalizedStringFormatter.ts`
-* (react-aria 3.51.0), without its global-dictionary lookup: that exists so a server can hand
-* pre-loaded strings to the client, which this package does not do yet.
-*/
-var useLocalizedStringDictionary = (strings) => {
-	const cached = dictionaries.get(strings);
-	if (cached) return cached;
-	const dictionary = new LocalizedStringDictionary(strings);
-	dictionaries.set(strings, dictionary);
-	return dictionary;
-};
-/**
 * A formatter reading a table of localized strings in the locale that applies here.
 *
 * Handed back as a computed rather than a formatter, so a consumer keeps up when the locale
@@ -36,4 +15,4 @@ var useLocalizedStringFormatter = (strings) => {
 	return computed(() => new LocalizedStringFormatter(locale.value.locale, dictionary));
 };
 //#endregion
-export { useLocalizedStringDictionary, useLocalizedStringFormatter };
+export { useLocalizedStringFormatter };

package/dist/composables/use-long-press.d.ts

@@ -1,7 +1,5 @@
 import type { PressEvent, UsePressHandlers } from "./use-press.js";
 import type { ComputedRef, MaybeRefOrGetter } from "vue";
-/** How long the press has to be held before it counts as a long press. */
-export declare const LONG_PRESS_THRESHOLD_MS = 500;
 export interface LongPressEvent extends Omit<PressEvent, "type"> {
     type: "longpressstart" | "longpressend" | "longpress";
 }

package/dist/composables/use-long-press.js

@@ -69,7 +69,7 @@ var useLongPress = (options = {}) => {
 				if (event.pointerType === "touch") addGlobalListener(event.target, "contextmenu", (menu) => menu.preventDefault(), { once: true });
 				options.onLongPress?.(toLongPressEvent(event, "longpress"));
 				timeout = void 0;
-			}, toValue(options.threshold) ?? 500);
+			}, toValue(options.threshold) ?? LONG_PRESS_THRESHOLD_MS);
 			addGlobalListener(window, "pointerup", () => {
 				setTimeout(() => removeAllGlobalListeners(), 100);
 			}, { once: true });
@@ -82,4 +82,4 @@ var useLongPress = (options = {}) => {
 	};
 };
 //#endregion
-export { LONG_PRESS_THRESHOLD_MS, useLongPress };
+export { useLongPress };

package/dist/composables/use-menu-trigger-state.d.ts

@@ -0,0 +1,64 @@
+import type { CollectionKey } from "./use-collection.js";
+import type { FocusStrategy, OverlayTriggerState, UseOverlayTriggerStateOptions } from "./use-overlay-trigger-state.js";
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
+export interface MenuTriggerState extends OverlayTriggerState {
+    /** Which item the menu focuses when it opens, or `null` to focus the menu itself. */
+    focusStrategy: ComputedRef<FocusStrategy | null>;
+    open: (focusStrategy?: FocusStrategy | null) => void;
+    toggle: (focusStrategy?: FocusStrategy | null) => void;
+}
+export interface RootMenuTriggerState extends MenuTriggerState {
+    /**
+     * The open submenu trigger keys, one per level: index 0 is the submenu opened from the root
+     * menu, index 1 the submenu opened from that one, and so on.
+     */
+    expandedKeysStack: ComputedRef<CollectionKey[]>;
+    openSubmenu: (triggerKey: CollectionKey, level: number) => void;
+    closeSubmenu: (triggerKey: CollectionKey, level: number) => void;
+}
+/**
+ * Open state for a menu trigger, ported from React Stately's `useMenuTriggerState`.
+ *
+ * Adds two things to a plain overlay trigger. A focus strategy, because how a menu was opened
+ * decides where focus lands: ArrowUp opens it focused on the last item, a mouse click opens it
+ * focused on the menu itself. And the stack of open submenus, held here on the root rather
+ * than in each submenu, which is what makes "only one path through the menu tree is open at a
+ * time" true by construction — opening a submenu at level N truncates the stack to N.
+ *
+ * @example
+ * ```ts
+ * const state = useMenuTriggerState({isOpen: () => props.isOpen});
+ * state.open("last"); // ArrowUp on the trigger
+ * ```
+ */
+export declare const useMenuTriggerState: (options?: UseOverlayTriggerStateOptions) => RootMenuTriggerState;
+export interface SubmenuTriggerState extends OverlayTriggerState {
+    focusStrategy: ComputedRef<FocusStrategy | null>;
+    open: (focusStrategy?: FocusStrategy | null) => void;
+    toggle: (focusStrategy?: FocusStrategy | null) => void;
+    /** Closes every menu in the tree, which is what selecting an item does. */
+    closeAll: () => void;
+    /** How deep this submenu sits, counting the root menu as level 0. */
+    submenuLevel: number;
+}
+export interface UseSubmenuTriggerStateOptions {
+    /**
+     * The key of the item that opens this submenu.
+     *
+     * Read reactively, because the item is declared beside the submenu rather than around it: the
+     * submenu exists before it has been told which item it belongs to, and is closed until it has.
+     */
+    triggerKey: MaybeRefOrGetter<CollectionKey | null>;
+}
+/**
+ * Open state for one submenu, ported from React Stately's `useSubmenuTriggerState`.
+ *
+ * Holds no open flag of its own — it derives one by asking the root whether its own trigger
+ * key is the one expanded at its level. That is what makes opening a sibling submenu close
+ * this one with no coordination between the two.
+ *
+ * The level is captured once, when the submenu trigger is created, and deliberately not
+ * recomputed: it describes where this trigger sits in the tree, which does not change, whereas
+ * the stack it was read from changes constantly.
+ */
+export declare const useSubmenuTriggerState: (options: UseSubmenuTriggerStateOptions, root: RootMenuTriggerState) => SubmenuTriggerState;