ropav 0.11.1 → 0.12.0

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

@@ -82,6 +82,19 @@ export interface ToastProviderProps {
     class?: string;
     /** Pixels between stacked toasts. @default 12 */
     gap?: number;
+    /**
+     * Key combination that moves focus to the region, as `KeyboardEvent` modifier names plus an
+     * `event.code`. Modifiers left out have to be up, so `Alt`+`T` does not answer `Ctrl`+`Alt`+`T`.
+     * Pass an empty list to turn it off.
+     *
+     * @default ["altKey", "KeyT"]
+     */
+    hotkey?: readonly string[];
+    /**
+     * Holds the stack open regardless of pointer or focus. Deliberately does not pause the clocks:
+     * expansion asked for by the page is not someone reading the toasts.
+     */
+    isExpanded?: boolean;
     /**
      * How many toasts are drawn at once. Visual only — the rest are faded out, not dropped.
      *
@@ -118,6 +131,12 @@ export interface ToastContentProps {
 }
 export interface ToastIndicatorProps {
     class?: string;
+    /**
+     * Whether this indicator is replacing one the toast was already showing, which the stylesheet
+     * animates. The first indicator a toast renders is not a replacement and must not be marked as
+     * one, or every toast would arrive with its icon animating.
+     */
+    isSwapped?: boolean;
     /** Picks the default icon. Falls back to the toast's own variant. */
     variant?: ToastVariants["variant"];
 }

package/dist/composables/use-list-keyboard.d.ts

@@ -50,7 +50,7 @@ export interface UseListKeyboardOptions {
     disallowSelectAll?: MaybeRefOrGetter<boolean | undefined>;
     /** @default "clearSelection" */
     escapeKeyBehavior?: MaybeRefOrGetter<"clearSelection" | "none" | undefined>;
-    /** Called when an item is activated rather than selected. */
+    /** Called when an item is activated: Enter, or a press where there is no selection to make. */
     onAction?: (key: CollectionKey) => void;
     /**
      * Whether focus over the collection is nominal rather than real.

package/dist/composables/use-list-keyboard.js

@@ -278,14 +278,13 @@ var useListKeyboard = (options) => {
 					return;
 				}
 				case "Enter":
-					if (focused == null || toValue(options.disallowActivation)) return;
-					options.onAction?.(focused);
-					event.preventDefault();
-					return;
 				case " ":
 					if (focused == null || toValue(options.disallowActivation)) return;
 					if (selection.selectionMode.value === "none") options.onAction?.(focused);
-					else selection.select(focused, { isShiftPressed: event.shiftKey });
+					else {
+						selection.select(focused, { isShiftPressed: event.shiftKey });
+						if (event.key === "Enter") options.onAction?.(focused);
+					}
 					event.preventDefault();
 					return;
 				default: return;

package/dist/composables/use-measured-height.d.ts

@@ -10,16 +10,24 @@ export interface UseMeasuredHeightReturn {
  * the content *wants*: a toast that is not frontmost is clipped to the front one's height, so its
  * own border box has already been overwritten by the very number this feeds.
  *
- * Two narrowings against the usual shape, both measured rather than assumed:
+ * That overwriting is also why the height is unset before every reading. The value this produces
+ * is what decides the element's own `height`, so reading it back off a sized box would return the
+ * previous answer for ever — a toast whose content is replaced in place would keep the height of
+ * the content it no longer holds.
  *
- * 1. It measures directly on attach and then lets the observer take over, rather than relying on
- *    the observer's first notification alone. jsdom *has* a `ResizeObserver` constructor but it
- *    never notifies anything, so an observer-only reading is permanently absent there — and this
- *    value drives an inline custom property that decides layout, which is exactly the kind of
- *    thing a fast suite should be able to assert. In a real browser the two readings agree, and
- *    the repeat is dropped, so the only difference is that the first one lands a frame earlier.
- * 2. React also watches `aria-hidden` with a `MutationObserver`. That attribute never reaches the
- *    DOM there — `react-aria-components` filters it off the toast — so the observer is dead code,
- *    and this package renders no `aria-hidden` for it to watch either.
+ * Three narrowings against the usual shape, each measured rather than assumed:
+ *
+ * 1. It measures directly on attach and then lets the observers take over, rather than relying on
+ *    a first notification alone. jsdom *has* a `ResizeObserver` constructor but it never notifies
+ *    anything, so an observer-only reading is permanently absent there — and this value drives an
+ *    inline custom property that decides layout, which is exactly the kind of thing a fast suite
+ *    should be able to assert. In a real browser the two readings agree, and the repeat is
+ *    dropped, so the only difference is that the first one lands a frame earlier.
+ * 2. Only the inline axis of a resize counts. The block axis is transitioned by the caller, and a
+ *    reading forces layout twice to unset and restore the height — so reacting to it would
+ *    re-measure on every frame of that animation and retarget the very transition it is watching.
+ * 3. Content is watched separately, because a box whose height is already forced does not resize
+ *    when what is inside it changes. Attributes are left out of that watch: the caller writes its
+ *    state onto this element, and none of it changes what the content wants.
  */
 export declare const useMeasuredHeight: (elementRef: MaybeRefOrGetter<HTMLElement | null | undefined>) => UseMeasuredHeightReturn;

package/dist/composables/use-measured-height.js

@@ -7,36 +7,74 @@ import { computed, onScopeDispose, shallowRef, toValue, watch } from "vue";
 * the content *wants*: a toast that is not frontmost is clipped to the front one's height, so its
 * own border box has already been overwritten by the very number this feeds.
 *
-* Two narrowings against the usual shape, both measured rather than assumed:
+* That overwriting is also why the height is unset before every reading. The value this produces
+* is what decides the element's own `height`, so reading it back off a sized box would return the
+* previous answer for ever — a toast whose content is replaced in place would keep the height of
+* the content it no longer holds.
 *
-* 1. It measures directly on attach and then lets the observer take over, rather than relying on
-*    the observer's first notification alone. jsdom *has* a `ResizeObserver` constructor but it
-*    never notifies anything, so an observer-only reading is permanently absent there — and this
-*    value drives an inline custom property that decides layout, which is exactly the kind of
-*    thing a fast suite should be able to assert. In a real browser the two readings agree, and
-*    the repeat is dropped, so the only difference is that the first one lands a frame earlier.
-* 2. React also watches `aria-hidden` with a `MutationObserver`. That attribute never reaches the
-*    DOM there — `react-aria-components` filters it off the toast — so the observer is dead code,
-*    and this package renders no `aria-hidden` for it to watch either.
+* Three narrowings against the usual shape, each measured rather than assumed:
+*
+* 1. It measures directly on attach and then lets the observers take over, rather than relying on
+*    a first notification alone. jsdom *has* a `ResizeObserver` constructor but it never notifies
+*    anything, so an observer-only reading is permanently absent there — and this value drives an
+*    inline custom property that decides layout, which is exactly the kind of thing a fast suite
+*    should be able to assert. In a real browser the two readings agree, and the repeat is
+*    dropped, so the only difference is that the first one lands a frame earlier.
+* 2. Only the inline axis of a resize counts. The block axis is transitioned by the caller, and a
+*    reading forces layout twice to unset and restore the height — so reacting to it would
+*    re-measure on every frame of that animation and retarget the very transition it is watching.
+* 3. Content is watched separately, because a box whose height is already forced does not resize
+*    when what is inside it changes. Attributes are left out of that watch: the caller writes its
+*    state onto this element, and none of it changes what the content wants.
 */
 var useMeasuredHeight = (elementRef) => {
 	const height = shallowRef(void 0);
-	let observer;
+	let resizeObserver;
+	let contentObserver;
+	let frame;
 	const detach = () => {
-		observer?.disconnect();
-		observer = void 0;
+		resizeObserver?.disconnect();
+		resizeObserver = void 0;
+		contentObserver?.disconnect();
+		contentObserver = void 0;
+		if (frame !== void 0 && typeof cancelAnimationFrame === "function") cancelAnimationFrame(frame);
+		frame = void 0;
 	};
 	watch(() => toValue(elementRef) ?? null, (element) => {
 		detach();
 		if (!element) return;
 		const measure = () => {
+			const forced = element.style.height;
+			element.style.height = "auto";
 			const next = element.scrollHeight;
+			element.style.height = forced;
 			if (height.value !== next) height.value = next;
 		};
+		const scheduleMeasure = () => {
+			if (frame !== void 0 || typeof requestAnimationFrame !== "function") return;
+			frame = requestAnimationFrame(() => {
+				frame = void 0;
+				measure();
+			});
+		};
 		measure();
+		if (typeof MutationObserver === "function") {
+			contentObserver = new MutationObserver(scheduleMeasure);
+			contentObserver.observe(element, {
+				characterData: true,
+				childList: true,
+				subtree: true
+			});
+		}
 		if (typeof ResizeObserver === "undefined") return;
-		observer = new ResizeObserver(measure);
-		observer.observe(element);
+		let lastWidth = element.getBoundingClientRect().width;
+		resizeObserver = new ResizeObserver((entries) => {
+			const width = entries[0]?.contentRect.width;
+			if (width === void 0 || Math.abs(width - lastWidth) < .5) return;
+			lastWidth = width;
+			scheduleMeasure();
+		});
+		resizeObserver.observe(element);
 	}, {
 		flush: "post",
 		immediate: true

package/dist/composables/use-overlay-position.js

@@ -1,8 +1,11 @@
 import { calculatePosition, getRect, translateRTL } from "../utils/position.js";
 import { computed, onScopeDispose, shallowRef, toValue, watch } from "vue";
 //#region src/composables/use-overlay-position.ts
-/** Overlays sit above the page; matched to what the React build renders. */
-var OVERLAY_Z_INDEX = 1e5;
+/**
+* Overlays sit above the page. The value lives in the stylesheet so the modal-level surfaces,
+* which can only declare theirs in CSS, resolve to the same level as this inline one.
+*/
+var OVERLAY_Z_INDEX = "var(--rp-z-index-overlay)";
 /** Whether an element or one of its descendants holds focus. */
 var isFocusWithin = (element) => {
 	const active = document.activeElement;
@@ -212,12 +215,12 @@ var useOverlayPosition = (options) => {
 				"max-height": "100vh",
 				position: "fixed",
 				top: "0px",
-				"z-index": String(OVERLAY_Z_INDEX)
+				"z-index": OVERLAY_Z_INDEX
 			};
 			const style = {
 				"max-height": `${resolved.maxHeight}px`,
 				position: "absolute",
-				"z-index": String(OVERLAY_Z_INDEX)
+				"z-index": OVERLAY_Z_INDEX
 			};
 			for (const [key, value] of Object.entries(resolved.position)) style[key] = `${value}px`;
 			style["--trigger-anchor-point"] = `${resolved.triggerAnchorPoint.x}px ${resolved.triggerAnchorPoint.y}px`;

package/dist/composables/use-select-state.d.ts

@@ -61,6 +61,14 @@ export interface UseSelectStateReturn<T> extends MenuTriggerState, FormValidatio
     /** The value a form reset goes back to. */
     defaultValue: ComputedRef<SelectedValue>;
     setValue: (value: SelectedValue) => void;
+    /**
+     * Empties the selection.
+     *
+     * Not `selection.clearSelection()`: a single select sets `disallowEmptySelection`, which is
+     * what stops a press on the chosen option from un-choosing it — and which makes that call a
+     * no-op in the one mode most selects are in.
+     */
+    clearValue: () => void;
     /** The first chosen key, which is the whole value when single. */
     selectedKey: ComputedRef<CollectionKey | null>;
     selectedItems: ComputedRef<SelectedItem<T>[]>;

package/dist/composables/use-select-state.js

@@ -99,6 +99,10 @@ var useSelectState = (options) => {
 			return Array.isArray(current) && current.length === 0 ? null : current;
 		}
 	});
+	const clearValue = () => {
+		setValue(null);
+		validation.commitValidation();
+	};
 	const selection = useSelectionManager({
 		collection,
 		disabledBehavior: options.disabledBehavior,
@@ -132,6 +136,7 @@ var useSelectState = (options) => {
 	const canOpen = () => collection.size.value !== 0 || Boolean(toValue(options.allowsEmptyCollection));
 	return {
 		...validation,
+		clearValue,
 		close: trigger.close,
 		collection,
 		defaultValue,

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

@@ -10,6 +10,13 @@ export interface UseSelectOptions {
     ariaLabelledby?: MaybeRefOrGetter<string | undefined>;
     ariaDescribedby?: MaybeRefOrGetter<string | undefined>;
     onFocusChange?: (isFocused: boolean) => void;
+    /**
+     * Whether a clear button is composed into the select, which is what opens the trigger's
+     * Backspace/Delete shortcut. Read at event time, so registering one never costs a render.
+     */
+    hasClearButton?: () => boolean;
+    /** Empties the selection. Called by the shortcut above. */
+    onClear?: () => void;
 }
 /** Attributes the trigger element renders, beside its own class and `data-slot`. */
 export type SelectTriggerAttributes = Record<string, string | number | boolean | undefined>;

package/dist/composables/use-select.js

@@ -83,6 +83,12 @@ var useSelect = (options, state) => {
 				return;
 			}
 		}
+		if ((event.key === "Backspace" || event.key === "Delete") && !state.isOpen.value && options.hasClearButton?.() && state.selectedItems.value.length > 0) {
+			event.preventDefault();
+			state.clearValue();
+			options.onClear?.();
+			return;
+		}
 		typeahead.onKeydown(event);
 		if (event.defaultPrevented) return;
 		trigger.responder.handlers.value.onKeydown?.(event);

package/dist/composables/use-toast-region.d.ts

@@ -9,6 +9,10 @@ export interface UseToastRegionOptions {
     ariaLabel?: MaybeRefOrGetter<string | undefined>;
     /** The region element, which is also what the toasts are looked up inside. */
     elementRef: MaybeRefOrGetter<HTMLElement | null | undefined>;
+    /** Key combination that moves focus to the region. An empty list turns it off. */
+    hotkey?: MaybeRefOrGetter<readonly string[] | undefined>;
+    /** Forces the stack open regardless of pointer or focus. */
+    isExpanded?: MaybeRefOrGetter<boolean | undefined>;
     /** Stops every visible toast's clock. */
     onPauseAll: () => void;
     /** Restarts every visible toast's clock. */
@@ -22,17 +26,21 @@ export interface ToastRegionAttrs {
     tabindex: -1;
 }
 export interface UseToastRegionReturn {
+    /** Whether the stack should be opened out, so every toast shows at its own height. */
+    isExpanded: ComputedRef<boolean>;
     onFocusin: (event: FocusEvent) => void;
     onFocusout: (event: FocusEvent) => void;
     onPointerenter: (event: PointerEvent) => void;
     onPointerleave: () => void;
+    /** Reasserts hover when the stack moves under a cursor that has not itself moved. */
+    onPointermove: (event: PointerEvent) => void;
     regionAttrs: ComputedRef<ToastRegionAttrs>;
 }
 /**
  * The behaviour and accessibility wiring of the toast region, ported from react-aria's
  * `useToastRegion`.
  *
- * Three jobs, and they are only in one composable because they share the same state:
+ * Four jobs, and they are only in one composable because they share the same state:
  *
  * 1. **Naming.** A landmark region labelled with how many notifications it holds.
  * 2. **Pausing.** Hover *or* focus anywhere inside stops every visible toast's clock, so a toast
@@ -41,13 +49,19 @@ export interface UseToastRegionReturn {
  *    rather than dropping it on `<body>` — except under a pointer, where focus is pushed back out
  *    of the region, because a pointer user who is no longer hovering would otherwise hold every
  *    remaining clock paused by the focus they did not ask for.
+ * 4. **Reaching it.** A key combination that moves focus to the region from anywhere, because a
+ *    toast is announced where the user is not and tabbing to it means tabbing past everything
+ *    between. The listener is on the document rather than the region: the region is only in the
+ *    DOM while it holds a toast, so a listener of its own could never be the thing that reaches
+ *    it first.
  *
- * One narrowing, recorded rather than hidden: upstream also registers the region with a
+ * One narrowing, recorded rather than hidden: react-aria also registers the region with a
  * document-level landmark manager, which is what makes F6 cycle between landmarks. Nothing else
  * in react-aria registers one, so with a single registrant F6 has nowhere to go — the rendered
- * DOM is identical either way, and toasts are still reachable by Tab.
+ * DOM is identical either way, and toasts are still reachable by Tab. That is an argument about
+ * cycling between landmarks and not about reaching this one, which is why job 4 stands beside it.
  *
- * One simplification: upstream runs focus-within and raw focus as two channels, because its
+ * One simplification: react-aria runs focus-within and raw focus as two channels, because its
  * focus-within fires once on entry and it needs every change. `focusin` and `focusout` bubble and
  * fire on every change already, so one pair answers both questions.
  */

package/dist/composables/use-toast-region.js

@@ -1,19 +1,33 @@
-import { getInteractionModality, useInteractionStates } from "./use-interaction-states.js";
+import { getInteractionModality, retainInteractionModality, useInteractionStates } from "./use-interaction-states.js";
 import { TOP_LAYER_ATTRIBUTE } from "../utils/top-layer.js";
+import { willOpenKeyboard } from "../utils/platform.js";
 import { useLocalizedStringFormatter } from "./use-localized-string-formatter.js";
 import { toastStrings } from "../i18n/toast.js";
-import { computed, onScopeDispose, toValue, watch } from "vue";
+import { DEFAULT_HOTKEY } from "../components/toast/toast.constants.js";
+import { computed, onScopeDispose, shallowRef, toValue, watch } from "vue";
 //#region src/composables/use-toast-region.ts
 var TOAST_SELECTOR = "[role=\"alertdialog\"]";
 /** The package's spelling of react-aria's `focusWithoutScrolling`. */
 var focusQuietly = (element) => {
 	element.focus({ preventScroll: true });
 };
+/** The `KeyboardEvent` booleans a hotkey entry can name. Anything else is an `event.code`. */
+var MODIFIERS = [
+	"altKey",
+	"ctrlKey",
+	"metaKey",
+	"shiftKey"
+];
+var matchesHotkey = (event, hotkey) => {
+	const modifiersAgree = MODIFIERS.every((name) => event[name] === hotkey.includes(name));
+	const keysAgree = hotkey.every((key) => MODIFIERS.includes(key) || event.code === key);
+	return modifiersAgree && keysAgree;
+};
 /**
 * The behaviour and accessibility wiring of the toast region, ported from react-aria's
 * `useToastRegion`.
 *
-* Three jobs, and they are only in one composable because they share the same state:
+* Four jobs, and they are only in one composable because they share the same state:
 *
 * 1. **Naming.** A landmark region labelled with how many notifications it holds.
 * 2. **Pausing.** Hover *or* focus anywhere inside stops every visible toast's clock, so a toast
@@ -22,25 +36,56 @@ var focusQuietly = (element) => {
 *    rather than dropping it on `<body>` — except under a pointer, where focus is pushed back out
 *    of the region, because a pointer user who is no longer hovering would otherwise hold every
 *    remaining clock paused by the focus they did not ask for.
+* 4. **Reaching it.** A key combination that moves focus to the region from anywhere, because a
+*    toast is announced where the user is not and tabbing to it means tabbing past everything
+*    between. The listener is on the document rather than the region: the region is only in the
+*    DOM while it holds a toast, so a listener of its own could never be the thing that reaches
+*    it first.
 *
-* One narrowing, recorded rather than hidden: upstream also registers the region with a
+* One narrowing, recorded rather than hidden: react-aria also registers the region with a
 * document-level landmark manager, which is what makes F6 cycle between landmarks. Nothing else
 * in react-aria registers one, so with a single registrant F6 has nowhere to go — the rendered
-* DOM is identical either way, and toasts are still reachable by Tab.
+* DOM is identical either way, and toasts are still reachable by Tab. That is an argument about
+* cycling between landmarks and not about reaching this one, which is why job 4 stands beside it.
 *
-* One simplification: upstream runs focus-within and raw focus as two channels, because its
+* One simplification: react-aria runs focus-within and raw focus as two channels, because its
 * focus-within fires once on entry and it needs every change. `focusin` and `focusout` bubble and
 * fire on every change already, so one pair answers both questions.
 */
 var useToastRegion = (options) => {
 	const strings = useLocalizedStringFormatter(toastStrings);
 	const hover = useInteractionStates();
+	onScopeDispose(retainInteractionModality(), true);
 	let isFocusWithin = false;
+	/** Set by Escape, and cleared by the next thing that would open the stack on purpose. */
+	const isDismissed = shallowRef(false);
+	/**
+	* Whether the focus inside the region should hold the stack open.
+	*
+	* Focus arriving by keyboard is someone working through the toasts and wants them all legible.
+	* Focus arriving from a pointer is a side effect of the press, and on a touchscreen it is the
+	* *only* signal there is — a tap would open the stack with nothing left to close it again,
+	* since a finger has no hover to lose.
+	*/
+	const isFocusExpanding = shallowRef(false);
+	const isExpanded = computed(() => {
+		if (toValue(options.visibleToasts).length <= 1) return false;
+		if (toValue(options.isExpanded) === true) return true;
+		return !isDismissed.value && (hover.isHovered.value || isFocusExpanding.value);
+	});
 	const updateTimers = () => {
 		if (hover.isHovered.value || isFocusWithin) options.onPauseAll();
 		else options.onResumeAll();
 	};
 	/**
+	* Re-applied whenever the set of clocks changes, and not only when hover or focus moves.
+	*
+	* A toast added or updated while the pointer is on the stack mints a timer that the last
+	* `onPauseAll` could not have reached, and the toast starts that timer itself — so without this
+	* one toast counts down under a pointer that is holding every other toast frozen.
+	*/
+	watch(() => toValue(options.visibleToasts), updateTimers, { flush: "post" });
+	/**
 	* Hover has to settle the clocks *in the handler*, not in a watcher on the state it sets.
 	*
 	* A watcher runs a tick later, and a tick is long enough for a toast to expire under the
@@ -50,12 +95,84 @@ var useToastRegion = (options) => {
 	*/
 	const onPointerenter = (event) => {
 		hover.onPointerenter(event);
+		isDismissed.value = false;
 		updateTimers();
 	};
 	const onPointerleave = () => {
+		hover.onPointerleave();
+		isDismissed.value = false;
+		updateTimers();
+	};
+	/**
+	* A pointer that has not moved still needs the stack to notice it.
+	*
+	* The stack shifts underneath a resting cursor whenever a toast arrives or leaves, and no
+	* browser re-fires a boundary event for a pointer that stayed where it was — so without this
+	* an opened stack folds the moment the thing being hovered is replaced beneath it.
+	*/
+	const onPointermove = (event) => {
+		if (hover.isHovered.value) return;
+		hover.onPointerenter(event);
+		updateTimers();
+	};
+	/**
+	* Escape folds the stack.
+	*
+	* Focus is released as well as the flag being set, because the expansion answers focus too: a
+	* region that kept focus would reopen on the next thing that asked it.
+	*
+	* Hover is deliberately left where it is. The flag folds the stack on its own, and clearing
+	* hover as well would restart every clock under a pointer that has not moved — so the toasts
+	* being read would expire moments after being tidied out of the way.
+	*/
+	const dismiss = () => {
+		const element = toValue(options.elementRef);
+		const active = typeof document === "undefined" ? null : document.activeElement;
+		if (element && active instanceof HTMLElement && element.contains(active)) active.blur();
+		isDismissed.value = true;
+		isFocusExpanding.value = false;
+		updateTimers();
+	};
+	/**
+	* No browser fires `pointerleave` when the element under the pointer is removed, and a toast
+	* closing under the cursor is the ordinary case here rather than a corner one. The next event
+	* that says anything is a `pointerover` on something else, which is what this listens for.
+	*/
+	const onDocumentPointerover = (event) => {
+		const element = toValue(options.elementRef);
+		if (event.pointerType === "touch") return;
+		if (!element || event.target instanceof Node && element.contains(event.target)) return;
+		if (!hover.isHovered.value) return;
 		hover.onPointerleave();
 		updateTimers();
 	};
+	const onDocumentKeydown = (event) => {
+		if (event.key === "Escape") {
+			dismiss();
+			return;
+		}
+		const hotkey = toValue(options.hotkey) ?? DEFAULT_HOTKEY;
+		const element = toValue(options.elementRef);
+		if (hotkey.length === 0 || !element || !matchesHotkey(event, hotkey)) return;
+		if (event.target instanceof Element && willOpenKeyboard(event.target)) return;
+		if (event.defaultPrevented) return;
+		event.preventDefault();
+		focusQuietly(element);
+		isDismissed.value = false;
+		isFocusExpanding.value = true;
+	};
+	watch(() => toValue(options.elementRef) ?? null, (element, _previous, onCleanup) => {
+		if (!element || typeof document === "undefined") return;
+		document.addEventListener("keydown", onDocumentKeydown, true);
+		document.addEventListener("pointerover", onDocumentPointerover, true);
+		onCleanup(() => {
+			document.removeEventListener("keydown", onDocumentKeydown, true);
+			document.removeEventListener("pointerover", onDocumentPointerover, true);
+		});
+	}, {
+		flush: "post",
+		immediate: true
+	});
 	/** The alertdialog elements, as of the last change to the visible toasts. */
 	let toastElements = [];
 	let previousToasts = toValue(options.visibleToasts);
@@ -124,6 +241,8 @@ var useToastRegion = (options) => {
 	}, { flush: "post" });
 	onScopeDispose(restoreLastFocused, true);
 	const onFocusin = (event) => {
+		isDismissed.value = false;
+		isFocusExpanding.value = getInteractionModality() === "keyboard";
 		if (!isFocusWithin) {
 			isFocusWithin = true;
 			lastFocused = event.relatedTarget instanceof HTMLElement ? event.relatedTarget : null;
@@ -139,15 +258,18 @@ var useToastRegion = (options) => {
 		if (target instanceof Node && !target.isConnected) return;
 		if (currentTarget instanceof Node && relatedTarget instanceof Node && currentTarget.contains(relatedTarget)) return;
 		isFocusWithin = false;
+		isFocusExpanding.value = false;
 		lastFocused = null;
 		focusedIndex = -1;
 		updateTimers();
 	};
 	return {
+		isExpanded,
 		onFocusin,
 		onFocusout,
 		onPointerenter,
 		onPointerleave,
+		onPointermove,
 		regionAttrs: computed(() => ({
 			[TOP_LAYER_ATTRIBUTE]: true,
 			"aria-label": toValue(options.ariaLabel) || strings.value.format("notifications", { count: toValue(options.visibleToasts).length }),

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

@@ -45,7 +45,7 @@ export interface UseToastReturn {
  * region is not rendered has not already spent its life waiting to appear. Unmounting pauses it
  * rather than dropping it, so a toast that comes back has the time it had left.
  *
- * One narrowing against upstream: it also returns a localized `aria-label` for the close button,
+ * One narrowing against react-aria: it also returns a localized `aria-label` for the close button,
  * which nothing can use — `CloseButton` writes its own `aria-label="Close"`, and that hardcoded
  * label wins over the one offered through context.
  */

package/dist/composables/use-toast.js

@@ -13,7 +13,7 @@ import { computed, onMounted, onScopeDispose, shallowRef, toValue, watch } from
 * region is not rendered has not already spent its life waiting to appear. Unmounting pauses it
 * rather than dropping it, so a toast that comes back has the time it had left.
 *
-* One narrowing against upstream: it also returns a localized `aria-label` for the close button,
+* One narrowing against react-aria: it also returns a localized `aria-label` for the close button,
 * which nothing can use — `CloseButton` writes its own `aria-label="Close"`, and that hardcoded
 * label wins over the one offered through context.
 */
@@ -23,7 +23,7 @@ var useToast = (options) => {
 	let descriptionClaims = 0;
 	const hasDescription = shallowRef(false);
 	/**
-	* Upstream resolves this with `useSlotId`, which hands out the id and then withdraws it in a
+	* react-aria resolves this with `useSlotId`, which hands out the id and then withdraws it in a
 	* layout effect when no element turns out to carry it. The claim is the same answer asked
 	* directly rather than probed off the document, and it is how the rest of this package settles
 	* whether an id has an owner.
@@ -40,7 +40,7 @@ var useToast = (options) => {
 	* Withheld for the first tick, then dropped.
 	*
 	* NVDA does not announce the toast at all without this — the alert has to become visible to the
-	* accessibility tree *after* it exists for the announcement to fire. Upstream carries the same
+	* accessibility tree *after* it exists for the announcement to fire. react-aria carries the same
 	* flag and the same reason.
 	*/
 	const isVisible = shallowRef(false);
@@ -55,6 +55,7 @@ var useToast = (options) => {
 			timeout: toValue(options.timeout),
 			timer: toValue(options.timer)
 		}), (next, previous) => {
+			if (previous && previous.timer === next.timer && previous.timeout === next.timeout) return;
 			previous?.timer?.pause();
 			if (next.timer == null || next.timeout == null) return;
 			next.timer.reset(next.timeout);

package/dist/composables/use-typeahead.js

@@ -1,3 +1,4 @@
+import { isNestedControl } from "../utils/focus.js";
 import { onScopeDispose, toValue } from "vue";
 //#region src/composables/use-typeahead.ts
 /** How long a partial search stays live before it is forgotten. */
@@ -44,6 +45,7 @@ var useTypeahead = (options) => {
 	const onKeydownCapture = (event) => {
 		if (toValue(options.isDisabled)) return;
 		if (search.length === 0 || event.key !== " ") return;
+		if (isNestedControl(event.target, event.currentTarget)) return;
 		event.preventDefault();
 		event.stopPropagation();
 		search += " ";
@@ -57,6 +59,7 @@ var useTypeahead = (options) => {
 		const target = event.target;
 		const currentTarget = event.currentTarget;
 		if (currentTarget instanceof Node && target instanceof Node && !currentTarget.contains(target)) return;
+		if (isNestedControl(target, currentTarget)) return;
 		if (search.length === 0 && character === " ") return;
 		search += character;
 		if (!runSearch()) {