ropav 0.13.0 → 0.15.0

package/dist/composables/use-focus-scope.js

@@ -1,34 +1,8 @@
+import { innermostContainingScope, isElementInAnyFocusScope, registerFocusScope } from "./focus-scope-registry.js";
 import { tabbableIn } from "../utils/focus.js";
 import { onScopeDispose, toValue, watch } from "vue";
 //#region src/composables/use-focus-scope.ts
 /**
-* Registered scopes, outermost first.
-*
-* Module-level because containment is a question about the whole page, not about one overlay:
-* only the innermost containing scope may hold focus, and focus moving into a scope nested
-* inside it has to be allowed through rather than pulled back.
-*/
-var scopes = [];
-var innermostContainingScope = () => {
-	for (let index = scopes.length - 1; index >= 0; index--) {
-		const scope = scopes[index];
-		if (scope.contain()) return scope;
-	}
-	return null;
-};
-/**
-* Whether the element sits inside any registered scope.
-*
-* Any scope rather than only the descendants of one, because an overlay opened from inside
-* another is a **sibling** in the DOM rather than a descendant — a submenu renders into its root
-* popover's container, and a dropdown opened from a popover makes a container of its own. There
-* is no tree to walk here, so a scope boundary is the thing that answers "focus is still in an
-* overlay". React Aria walks its scope tree and asks the narrower question; the difference shows
-* only when two unrelated overlays are open at once and focus moves between them, where this
-* errs towards leaving them open.
-*/
-var isElementInAnyFocusScope = (element) => scopes.some((scope) => scope.root()?.contains(element));
-/**
 * Keep focus inside an overlay and give it back when the overlay closes, ported from React
 * Aria's `FocusScope`.
 *
@@ -57,8 +31,14 @@ var useFocusScope = (options) => {
 	const getRoot = () => toValue(options.scopeRef) ?? null;
 	const scope = {
 		contain: () => Boolean(toValue(options.contain)),
+		region: () => toValue(options.region) ?? null,
 		root: getRoot
 	};
+	/** Whether an element is somewhere this scope has any say over. */
+	const isInRegion = (element) => {
+		const region = scope.region();
+		return !region || !element || region.contains(element);
+	};
 	const focusElement = (element) => {
 		element?.focus({ preventScroll: true });
 	};
@@ -75,7 +55,8 @@ var useFocusScope = (options) => {
 		const ownerDocument = root.ownerDocument;
 		const onKeydown = (event) => {
 			if (event.key !== "Tab" || event.altKey || event.ctrlKey || event.metaKey) return;
-			if (innermostContainingScope() !== scope) return;
+			if (innermostContainingScope(scope.region()) !== scope) return;
+			if (!isInRegion(ownerDocument.activeElement)) return;
 			const focusable = tabbableIn(root);
 			if (focusable.length === 0) {
 				event.preventDefault();
@@ -88,9 +69,10 @@ var useFocusScope = (options) => {
 			focusElement(next);
 		};
 		const onFocusin = (event) => {
-			if (innermostContainingScope() !== scope) return;
+			if (innermostContainingScope(scope.region()) !== scope) return;
 			const target = event.target;
 			if (!(target instanceof Element)) return;
+			if (!isInRegion(target)) return;
 			if (isElementInAnyFocusScope(target)) return;
 			focusElement(root);
 		};
@@ -105,15 +87,14 @@ var useFocusScope = (options) => {
 		detach();
 		if (!root || !isActive) return;
 		const previouslyFocused = root.ownerDocument.activeElement;
-		scopes.push(scope);
+		const unregister = registerFocusScope(scope);
 		attach(root);
 		const autoFocus = toValue(options.autoFocus);
 		if (autoFocus === "first" || autoFocus === "last") focusEnd(root, autoFocus);
 		else if (autoFocus) focusElement(root);
 		onCleanup(() => {
 			detach();
-			const index = scopes.indexOf(scope);
-			if (index >= 0) scopes.splice(index, 1);
+			unregister();
 			if (!toValue(options.restoreFocus)) return;
 			const active = root.ownerDocument.activeElement;
 			if (!(!active || active === root.ownerDocument.body || root.contains(active))) return;
@@ -127,4 +108,4 @@ var useFocusScope = (options) => {
 	onScopeDispose(() => detach(), true);
 };
 //#endregion
-export { isElementInAnyFocusScope, useFocusScope };
+export { useFocusScope };

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

@@ -1,4 +1,4 @@
-import type { ComputedRef, MaybeRefOrGetter, Ref } from "vue";
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
 /**
  * Snapshot of an element's `ValidityState`.
  *
@@ -36,65 +36,13 @@ export interface ValidationResult {
 export type ValidationBehavior = "aria" | "native";
 /** Returns a message, several, or nothing at all when the value is acceptable. */
 export type ValidationFunction<T> = (value: T) => string | string[] | true | null | undefined;
-export declare const VALID_VALIDITY_STATE: ValidationDetails;
-/** Failure that came from a prop, a `validate` function or the server rather than the browser. */
-export declare const CUSTOM_VALIDITY_STATE: ValidationDetails;
-/** A required field with nothing in it. What the browser reports under `"native"`. */
-export declare const MISSING_VALIDITY_STATE: ValidationDetails;
-export declare const DEFAULT_VALIDATION_RESULT: ValidationResult;
-/**
- * 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.
- */
-export declare const mergeValidation: (...results: ValidationResult[]) => ValidationResult;
-/** Form controls that take part in constraint validation. */
-export type ValidatableElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-/** Freeze an element's live validity into a result the state layer can hold. */
-export declare const getNativeValidation: (element: ValidatableElement) => ValidationResult;
 /**
  * The kinds of control a required field can be. Each is a different sentence: a list asks to be
  * chosen from, a checkbox to be ticked.
  */
 export type RequiredControl = "checkbox" | "radio" | "select" | "text";
-/**
- * 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.
- */
-export declare const missingValueMessage: (kind: RequiredControl) => string;
-/** Whether a value counts as nothing. Covers every shape a field holds when it is empty. */
-export declare const isValueMissing: (value: unknown) => boolean;
 /** Errors a server returned, keyed by the `name` each field submits under. */
 export type FormValidationErrors = Record<string, string | string[]>;
-export interface FormContext {
-    /** Errors keyed by field `name`, shown until the user edits the value. */
-    validationErrors: ComputedRef<FormValidationErrors>;
-    /** Default for every field inside, unless the field names its own. */
-    validationBehavior: ComputedRef<ValidationBehavior>;
-    /**
-     * Bumped by every submit attempt.
-     *
-     * Under `"native"` a field learns of a failed submit from the browser, which fires `invalid` at
-     * it. Under `"aria"` the browser is not involved, so this is the only thing that tells a field
-     * holding an unrevealed error that it is now being asked for.
-     */
-    submitCount?: Readonly<Ref<number>>;
-}
-/**
- * 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.
- */
-export declare const useFormContext: () => FormContext | null, provideFormContext: (value: FormContext | null) => FormContext | null;
 export interface UseFormValidationStateOptions<T> {
     /** Value handed to `validate`. `null` or `undefined` skips custom validation entirely. */
     value: MaybeRefOrGetter<T | null | undefined>;
@@ -146,13 +94,6 @@ export interface FormValidationState {
     /** Reveal what validation currently says — on change, or on a failed submit. */
     commitValidation: () => void;
 }
-/**
- * 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.
- */
-export declare const isEqualValidation: (a: ValidationResult | null, b: ValidationResult | null) => boolean;
 /**
  * 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).

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.
  *