ropav 0.11.0 → 0.12.0

package/dist/components/toast/toast-default-content.js

@@ -8,7 +8,7 @@ import toast_indicator_default from "./toast-indicator.js";
 import toast_renderable_default from "./toast-renderable.js";
 import toast_root_default from "./toast-root.js";
 import toast_title_default from "./toast-title.js";
-import { computed, createComponent, createIf, defineVaporComponent, extend, unref } from "vue";
+import { computed, createComponent, createIf, defineVaporComponent, extend, shallowRef, unref, watch } from "vue";
 //#region src/components/toast/toast-default-content.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var toast_default_content_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "toast-default-content",
@@ -21,6 +21,19 @@ var toast_default_content_vue_vue_type_script_setup_true_vapor_true_lang_default
 		* because there is no room for a row.
 		*/
 		const isMobile = useMediaQuery("(max-width: 768px)");
+		/**
+		* Which of the three indicators is showing. Tracked here rather than inside the indicator because
+		* the three are separate branches: settling a promise toast unmounts the spinner's instance and
+		* mounts a fresh one, which would have no memory of what it replaced.
+		*/
+		const indicatorKind = computed(() => {
+			if (content.value.isLoading === true) return "loading";
+			return content.value.indicator === void 0 ? "default" : "custom";
+		});
+		const hasSwappedIndicator = shallowRef(false);
+		watch(indicatorKind, () => {
+			hasSwappedIndicator.value = true;
+		});
 		const action = computed(() => {
 			const value = content.value.actionProps;
 			return value?.label == null ? void 0 : value;
@@ -38,18 +51,27 @@ var toast_default_content_vue_vue_type_script_setup_true_vapor_true_lang_default
 			return [
 				createIf(() => content.value.indicator !== null, () => {
 					return createIf(() => content.value.isLoading === true, () => {
-						return createComponent(toast_indicator_default, { variant: () => content.value.variant }, () => {
+						return createComponent(toast_indicator_default, {
+							"is-swapped": () => hasSwappedIndicator.value,
+							variant: () => content.value.variant
+						}, () => {
 							return createComponent(spinner_root_default, {
 								color: "current",
 								size: "sm"
 							});
 						});
 					}, () => createIf(() => content.value.indicator !== void 0, () => {
-						return createComponent(toast_indicator_default, { variant: () => content.value.variant }, () => {
+						return createComponent(toast_indicator_default, {
+							"is-swapped": () => hasSwappedIndicator.value,
+							variant: () => content.value.variant
+						}, () => {
 							return createComponent(toast_renderable_default, { value: () => content.value.indicator });
 						});
 					}, () => {
-						return createComponent(toast_indicator_default, { variant: () => content.value.variant });
+						return createComponent(toast_indicator_default, {
+							"is-swapped": () => hasSwappedIndicator.value,
+							variant: () => content.value.variant
+						});
 					}, 517), 261);
 				}),
 				createComponent(toast_content_default, null, extend(() => {

package/dist/components/toast/toast-indicator.js

@@ -1,15 +1,17 @@
+import { dataAttr } from "../../utils/assertion.js";
 import danger_icon_default from "../icons/danger-icon.js";
 import info_icon_default from "../icons/info-icon.js";
 import success_icon_default from "../icons/success-icon.js";
 import warning_icon_default from "../icons/warning-icon.js";
 import { useToastItemContext } from "./toast.context.js";
-import { computed, createDynamicComponent, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, template } from "vue";
+import { computed, createDynamicComponent, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, template, unref } from "vue";
 //#region src/components/toast/toast-indicator.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div data-slot=toast-indicator>", 1);
 var toast_indicator_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "toast-indicator",
 	props: {
 		class: {},
+		isSwapped: { type: Boolean },
 		variant: {}
 	},
 	setup(__props) {
@@ -25,7 +27,11 @@ var toast_indicator_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
 			}
 		});
 		const n3 = t0();
-		renderEffect(() => setClass(n3, ["rp-toast__indicator", props.class]));
+		renderEffect(() => {
+			const _props = props;
+			setClass(n3, ["rp-toast__indicator", _props.class]);
+			setAttr(n3, "data-swapped", unref(dataAttr)(_props.isSwapped));
+		});
 		setInsertionState(n3);
 		createSlot("default", null, () => {
 			return createDynamicComponent(() => defaultIcon.value, { "data-slot": "toast-default-icon" });

package/dist/components/toast/toast-provider.js

@@ -1,11 +1,12 @@
+import { dataAttr } from "../../utils/assertion.js";
 import { composeSlotClassName } from "../../utils/compose.js";
 import { useLocale } from "../../composables/use-locale.js";
 import { provideToastRegionContext } from "./toast.context.js";
+import { DEFAULT_SCALE_FACTOR, EXIT_FALLBACK } from "./toast.constants.js";
 import { useToastRegion } from "../../composables/use-toast-region.js";
 import toast_default_content_default from "./toast-default-content.js";
-import { DEFAULT_SCALE_FACTOR } from "./toast.constants.js";
 import { toastQueue, useToastQueue } from "./toast-queue.js";
-import { VaporTeleport, child, computed, createComponent, createFor, createIf, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, setStyle, setTemplateRefBinding, shallowRef, template, unref } from "vue";
+import { VaporTeleport, child, computed, createComponent, createFor, createIf, createSlot, defineVaporComponent, on, onScopeDispose, renderEffect, setDynamicProps, setInsertionState, setStyle, setTemplateRefBinding, shallowRef, template, unref, watch } from "vue";
 import { toastVariants } from "@ropav/styles";
 //#region src/components/toast/toast-provider.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<li>");
@@ -16,6 +17,8 @@ var toast_provider_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@_
 		ariaLabel: {},
 		class: {},
 		gap: { default: 12 },
+		hotkey: {},
+		isExpanded: { type: Boolean },
 		maxVisibleToasts: {},
 		placement: { default: "bottom" },
 		portalContainer: {},
@@ -27,6 +30,43 @@ var toast_provider_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@_
 		const props = __props;
 		const queue = computed(() => props.queue ?? toastQueue);
 		const { visibleToasts } = useToastQueue(queue);
+		/**
+		* Toasts the queue has let go of that are still on screen playing their exit.
+		*
+		* Held here rather than in the queue because it is a rendering concern: the queue's job ends when
+		* a toast is closed, and a caller reading `visibleToasts` should not be told about one that is
+		* only still there to finish animating.
+		*/
+		const exiting = shallowRef([]);
+		/**
+		* Timeouts that let a held toast go even if it never reports its exit.
+		*
+		* A backstop rather than the length of the animation, which the toast itself waits out: the
+		* provider's slot is the caller's to fill, and a slot that renders its own markup instead of a
+		* `ToastRoot` has nothing that would ever report. Without this, every closed toast would stay in
+		* the list for the life of the page.
+		*/
+		const exitFallbacks = /* @__PURE__ */ new Map();
+		const release = (key) => {
+			clearTimeout(exitFallbacks.get(key));
+			exitFallbacks.delete(key);
+			exiting.value = exiting.value.filter((entry) => entry.key !== key);
+		};
+		watch(visibleToasts, (next, previous) => {
+			if (!previous) return;
+			const live = new Set(next.map((entry) => entry.key));
+			const gone = previous.filter((entry) => !live.has(entry.key));
+			if (gone.length === 0) return;
+			exiting.value = [...exiting.value, ...gone];
+			for (const entry of gone) exitFallbacks.set(entry.key, setTimeout(() => release(entry.key), EXIT_FALLBACK));
+		});
+		onScopeDispose(() => {
+			for (const timeout of exitFallbacks.values()) clearTimeout(timeout);
+			exitFallbacks.clear();
+		});
+		const exitingKeys = computed(() => new Set(exiting.value.map((entry) => entry.key)));
+		/** Exiting toasts sit after the live ones; each one carries the slot it had through its own style. */
+		const renderedToasts = computed(() => [...visibleToasts.value, ...exiting.value]);
 		const element = shallowRef(null);
 		const setElement = (next) => {
 			element.value = next ?? null;
@@ -34,6 +74,8 @@ var toast_provider_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@_
 		const region = useToastRegion({
 			ariaLabel: () => props.ariaLabel,
 			elementRef: element,
+			hotkey: () => props.hotkey,
+			isExpanded: () => props.isExpanded,
 			onPauseAll: () => queue.value.pauseAll(),
 			onResumeAll: () => queue.value.resumeAll(),
 			visibleToasts
@@ -49,9 +91,12 @@ var toast_provider_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@_
 		const heights = shallowRef({});
 		provideToastRegionContext({
 			close: (key) => queue.value.close(key),
+			exitingKeys,
 			gap: computed(() => props.gap),
 			heightsByKey: computed(() => heights.value),
+			isExpanded: region.isExpanded,
 			maxVisibleToasts: computed(() => props.maxVisibleToasts ?? queue.value.maxVisibleToasts ?? 3),
+			onExitFinished: release,
 			onToastHeightChange: (key, height) => {
 				if (heights.value[key] === height) return;
 				heights.value = {
@@ -82,21 +127,23 @@ var toast_provider_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@_
 		* semantics without taking part in the layout the stylesheet builds out of absolute positioning.
 		*/
 		const CONTENTS_STYLE = { display: "contents" };
-		return createIf(() => unref(visibleToasts).length > 0, () => {
+		return createIf(() => renderedToasts.value.length > 0, () => {
 			return createComponent(VaporTeleport, { to: () => target.value }, () => {
 				const n9 = t1();
 				const n8 = child(n9);
 				renderEffect(() => {
+					const _region = unref(region);
 					setDynamicProps(n9, [{
 						class: styles.value,
+						"data-expanded": unref(dataAttr)(_region.isExpanded.value),
 						"data-slot": "toast-region",
 						dir: unref(locale).direction,
 						style: regionStyle.value
-					}, unref(region).regionAttrs.value]);
+					}, _region.regionAttrs.value]);
 					setStyle(n8, CONTENTS_STYLE);
 				});
 				setInsertionState(n8);
-				createFor(() => unref(visibleToasts), (_for_item0) => {
+				createFor(() => renderedToasts.value, (_for_item0) => {
 					const n7 = t0();
 					renderEffect(() => setStyle(n7, CONTENTS_STYLE));
 					setInsertionState(n7);
@@ -112,6 +159,7 @@ var toast_provider_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@_
 				on(n9, "focusout", (e) => unref(region).onFocusout(e));
 				on(n9, "pointerenter", (e) => unref(region).onPointerenter(e));
 				on(n9, "pointerleave", (e) => unref(region).onPointerleave(e));
+				on(n9, "pointermove", (e) => unref(region).onPointermove(e));
 				setTemplateRefBinding(n9, () => setElement);
 				return n9;
 			}, true);

package/dist/components/toast/toast-queue.d.ts

@@ -12,6 +12,7 @@ export declare class Timer {
     private startTime;
     private timerId;
     constructor(callback: () => void, delay: number);
+    /** Starts the clock again on `delay`, whether or not it was already running. */
     reset(delay: number): void;
     pause(): void;
     resume(): void;
@@ -20,7 +21,7 @@ export declare class Timer {
  * The order toasts are shown in, and the clocks that close them.
  *
  * Ported from `react-stately`'s `ToastQueue`, merged with the wrapper that normally sits around
- * it. Upstream those are two classes because the wrapper had a primitive to wrap; writing both
+ * it. There those are two classes because the wrapper had a primitive to wrap; writing both
  * here means keeping them apart would be two paths doing one job. What the merge keeps from the
  * wrapper: the default timeout, the serialized view transition, and `maxVisibleToasts` as a hint
  * the region reads rather than a truncation.
@@ -37,10 +38,22 @@ export declare class ToastQueue<T = ToastContentValue> {
     /** Every toast currently held, newest first. */
     visibleToasts: QueuedToast<T>[];
     constructor(options?: ToastQueueOptions);
-    /** Forgets any transitions still queued. For a test, since a chain outlives a mount. */
-    readonly resetTransitions: () => void;
     /** Adds a toast and returns its key. */
     add(content: T, options?: ToastOptions): string;
+    /**
+     * Replaces a toast's content where it stands, keeping its key and its place in the stack.
+     * Returns `false` for a key the queue no longer holds.
+     *
+     * Options the caller leaves out are kept rather than resolved: a toast asked to stay until
+     * something closes it must not pick up the default life because its message changed. That is
+     * why this reads the keys that are *present* instead of their values — an explicit `undefined`
+     * is a caller clearing a handler, and an absent key is a caller not mentioning one.
+     *
+     * The entry is replaced rather than mutated so the toast re-renders. The list is shallow, so a
+     * toast whose fields changed underneath it is the same object as far as anything watching is
+     * concerned; a new one keyed the same patches the node it already has.
+     */
+    update(key: string, content: T, options?: ToastOptions): boolean;
     /** Closes one toast. Notifies even for a key that is no longer held. */
     close(key: string): void;
     /** Drops every toast at once. Deliberately does not run their `onClose` — nothing closed them. */
@@ -51,8 +64,42 @@ export declare class ToastQueue<T = ToastContentValue> {
     resumeAll(): void;
     /** Subscribes to changes in the visible toasts. Returns the unsubscribe. */
     subscribe(fn: () => void): () => void;
-    private update;
+    private notify;
 }
+/**
+ * A queue's own chain of view transitions, so its updates animate one after another. Hand the
+ * `wrapUpdate` it returns to a queue to animate that queue's toasts this way.
+ *
+ * Not what a queue does by default, and the reason is measured rather than assumed: a chain is
+ * serial, so under a burst each toast waits for every transition queued ahead of it — the fifth
+ * toast of five added 80ms apart took 1.5s to appear, against 0.37s when the stack animates
+ * itself. A transition also replaces the toast with a snapshot that answers no hit test, so the
+ * close and action buttons of the frontmost toast are unreachable for as long as it runs. Neither
+ * shows up as dropped frames; both are plainly visible to someone using the thing.
+ *
+ * It stays because it is the only way to get a genuine cross-fade between two different toasts,
+ * and because a caller who wants it should not have to rebuild the chain below. Each toast names
+ * itself for the transition through `view-transition-name`, which is what makes the capture
+ * per-toast; without it the document root would be the only captured element and every toast
+ * would cross-fade the whole page.
+ *
+ * The View Transitions API allows one active transition per document: starting a second while the
+ * first is still animating aborts the first, which surfaces as a rejection on `ready`. Each new
+ * transition is appended to the *end* of the chain rather than attached to whichever is currently
+ * active, so three mutations inside one microtask stay in order — which is what `toast.promise`
+ * does while the loading toast's own entry is still in flight.
+ *
+ * **One chain per queue, not one per document.** Sharing a single chain across every queue looks
+ * more faithful to an API that only runs one transition at a time, and it is wrong: with several
+ * regions on a page, a burst of toasts in one of them puts every other region's toast behind the
+ * whole burst, so a toast added elsewhere does not appear until seconds later. Independent chains
+ * let a second region interrupt instead — the superseded transition is skipped, which the catch
+ * below already handles, which is why a chain belongs to one queue and is built per caller.
+ */
+export declare const createViewTransitionUpdate: () => {
+    reset: () => void;
+    wrapUpdate: (fn: () => void) => void;
+};
 export interface UseToastQueueReturn<T = ToastContentValue> {
     /** The toasts the queue currently holds, newest first. */
     visibleToasts: ComputedRef<QueuedToast<T>[]>;
@@ -80,6 +127,14 @@ export interface ToastFunction {
     promise: <T>(promise: (() => Promise<T>) | Promise<T>, options: ToastPromiseOptions<T>) => string;
     resumeAll: () => void;
     success: (message: ToastRenderable, options?: Omit<ToastAddOptions, "variant">) => string;
+    /**
+     * Replaces a toast's message where it stands, and adds one if that toast has already gone.
+     * Returns the key either way.
+     *
+     * `timeout` and `onClose` are kept when they are not mentioned; everything else describes the
+     * new content and is replaced.
+     */
+    update: (key: string, message: ToastRenderable, options?: ToastAddOptions) => string;
     warning: (message: ToastRenderable, options?: Omit<ToastAddOptions, "variant">) => string;
 }
 export declare const createToastFunction: (queue: ToastQueue<ToastContentValue>) => ToastFunction;
@@ -93,5 +148,5 @@ export declare const toastQueue: ToastQueue<ToastContentValue>;
 export declare const toast: ToastFunction;
 /** How many toasts the default queue holds. For a test asserting it did not leak into the next. */
 export declare const getQueuedToastCount: () => number;
-/** Empties the default queue and the transition chain. For a test, since both outlive a mount. */
+/** Empties the default queue. For a test, since the queue outlives a mount. */
 export declare const resetToastQueue: () => void;

package/dist/components/toast/toast-queue.js

@@ -1,4 +1,4 @@
-import "./toast.constants.js";
+import { DEFAULT_TOAST_TIMEOUT } from "./toast.constants.js";
 import { computed, nextTick, onScopeDispose, shallowRef, toValue, watch } from "vue";
 //#region src/components/toast/toast-queue.ts
 /**
@@ -16,7 +16,9 @@ var Timer = class {
 		this.callback = callback;
 		this.remaining = delay;
 	}
+	/** Starts the clock again on `delay`, whether or not it was already running. */
 	reset(delay) {
+		this.pause();
 		this.remaining = delay;
 		this.resume();
 	}
@@ -27,7 +29,7 @@ var Timer = class {
 		this.remaining -= Date.now() - this.startTime;
 	}
 	resume() {
-		if (this.remaining <= 0) return;
+		if (this.timerId != null || this.remaining <= 0) return;
 		this.startTime = Date.now();
 		this.timerId = setTimeout(() => {
 			this.timerId = null;
@@ -40,7 +42,7 @@ var Timer = class {
 * The order toasts are shown in, and the clocks that close them.
 *
 * Ported from `react-stately`'s `ToastQueue`, merged with the wrapper that normally sits around
-* it. Upstream those are two classes because the wrapper had a primitive to wrap; writing both
+* it. There those are two classes because the wrapper had a primitive to wrap; writing both
 * here means keeping them apart would be two paths doing one job. What the merge keeps from the
 * wrapper: the default timeout, the serialized view transition, and `maxVisibleToasts` as a hint
 * the region reads rather than a truncation.
@@ -58,12 +60,8 @@ var ToastQueue = class {
 	visibleToasts = [];
 	constructor(options = {}) {
 		this.maxVisibleToasts = options.maxVisibleToasts;
-		const transitions = createViewTransitionUpdate();
-		this.resetTransitions = transitions.reset;
-		this.wrapUpdate = options.wrapUpdate ?? transitions.wrapUpdate;
+		this.wrapUpdate = options.wrapUpdate ?? ((fn) => fn());
 	}
-	/** Forgets any transitions still queued. For a test, since a chain outlives a mount. */
-	resetTransitions;
 	/** Adds a toast and returns its key. */
 	add(content, options = {}) {
 		const key = `_${Math.random().toString(36).slice(2)}`;
@@ -75,9 +73,40 @@ var ToastQueue = class {
 			timeout,
 			timer: timeout ? new Timer(() => this.close(key), timeout) : void 0
 		});
-		this.update("add");
+		this.notify("add");
 		return key;
 	}
+	/**
+	* Replaces a toast's content where it stands, keeping its key and its place in the stack.
+	* Returns `false` for a key the queue no longer holds.
+	*
+	* Options the caller leaves out are kept rather than resolved: a toast asked to stay until
+	* something closes it must not pick up the default life because its message changed. That is
+	* why this reads the keys that are *present* instead of their values — an explicit `undefined`
+	* is a caller clearing a handler, and an absent key is a caller not mentioning one.
+	*
+	* The entry is replaced rather than mutated so the toast re-renders. The list is shallow, so a
+	* toast whose fields changed underneath it is the same object as far as anything watching is
+	* concerned; a new one keyed the same patches the node it already has.
+	*/
+	update(key, content, options = {}) {
+		const index = this.queue.findIndex((toast) => toast.key === key);
+		if (index < 0) return false;
+		const previous = this.queue[index];
+		const next = {
+			...previous,
+			content
+		};
+		if ("onClose" in options) next.onClose = options.onClose;
+		if ("timeout" in options) {
+			previous.timer?.pause();
+			next.timeout = options.timeout;
+			next.timer = options.timeout ? new Timer(() => this.close(key), options.timeout) : void 0;
+		}
+		this.queue[index] = next;
+		this.notify("add");
+		return true;
+	}
 	/** Closes one toast. Notifies even for a key that is no longer held. */
 	close(key) {
 		const index = this.queue.findIndex((toast) => toast.key === key);
@@ -85,12 +114,12 @@ var ToastQueue = class {
 			this.queue[index].onClose?.();
 			this.queue.splice(index, 1);
 		}
-		this.update("remove");
+		this.notify("remove");
 	}
 	/** Drops every toast at once. Deliberately does not run their `onClose` — nothing closed them. */
 	clear() {
 		this.queue = [];
-		this.update("clear");
+		this.notify("clear");
 	}
 	/** Stops the clocks of the toasts on screen. */
 	pauseAll() {
@@ -107,7 +136,7 @@ var ToastQueue = class {
 			this.subscriptions.delete(fn);
 		};
 	}
-	update(action) {
+	notify(action) {
 		this.visibleToasts = [...this.queue];
 		this.wrapUpdate(() => {
 			for (const fn of [...this.subscriptions]) fn();
@@ -115,7 +144,21 @@ var ToastQueue = class {
 	}
 };
 /**
-* A queue's own chain of view transitions, so its updates animate one after another.
+* A queue's own chain of view transitions, so its updates animate one after another. Hand the
+* `wrapUpdate` it returns to a queue to animate that queue's toasts this way.
+*
+* Not what a queue does by default, and the reason is measured rather than assumed: a chain is
+* serial, so under a burst each toast waits for every transition queued ahead of it — the fifth
+* toast of five added 80ms apart took 1.5s to appear, against 0.37s when the stack animates
+* itself. A transition also replaces the toast with a snapshot that answers no hit test, so the
+* close and action buttons of the frontmost toast are unreachable for as long as it runs. Neither
+* shows up as dropped frames; both are plainly visible to someone using the thing.
+*
+* It stays because it is the only way to get a genuine cross-fade between two different toasts,
+* and because a caller who wants it should not have to rebuild the chain below. Each toast names
+* itself for the transition through `view-transition-name`, which is what makes the capture
+* per-toast; without it the document root would be the only captured element and every toast
+* would cross-fade the whole page.
 *
 * The View Transitions API allows one active transition per document: starting a second while the
 * first is still animating aborts the first, which surfaces as a rejection on `ready`. Each new
@@ -128,7 +171,7 @@ var ToastQueue = class {
 * regions on a page, a burst of toasts in one of them puts every other region's toast behind the
 * whole burst, so a toast added elsewhere does not appear until seconds later. Independent chains
 * let a second region interrupt instead — the superseded transition is skipped, which the catch
-* below already handles, which is why the chain is scoped per queue inside the constructor.
+* below already handles, which is why a chain belongs to one queue and is built per caller.
 */
 var createViewTransitionUpdate = () => {
 	let chain = Promise.resolve();
@@ -185,17 +228,19 @@ var useToastQueue = (queue) => {
 */
 var resolve = (value, input) => typeof value === "function" ? value(input) : value;
 var createToastFunction = (queue) => {
-	const add = (message, options = {}) => queue.add({
+	const contentOf = (message, options) => ({
 		actionProps: options.actionProps,
 		description: options.description,
 		indicator: options.indicator,
 		isLoading: options.isLoading,
 		title: message,
 		variant: options.variant ?? "default"
-	}, {
-		onClose: options.onClose ? () => {
-			requestAnimationFrame(() => options.onClose?.());
-		} : void 0,
+	});
+	const deferred = (onClose) => onClose ? () => {
+		requestAnimationFrame(() => onClose());
+	} : void 0;
+	const add = (message, options = {}) => queue.add(contentOf(message, options), {
+		onClose: deferred(options.onClose),
 		timeout: options.timeout
 	});
 	const withVariant = (variant) => (message, options = {}) => add(message, {
@@ -212,6 +257,14 @@ var createToastFunction = (queue) => {
 	toastFn.resumeAll = () => queue.resumeAll();
 	toastFn.success = withVariant("success");
 	toastFn.warning = withVariant("warning");
+	toastFn.update = (key, message, options = {}) => {
+		const inherited = {
+			..."onClose" in options ? { onClose: deferred(options.onClose) } : null,
+			..."timeout" in options ? { timeout: options.timeout } : null
+		};
+		if (queue.update(key, contentOf(message, options), inherited)) return key;
+		return add(message, options);
+	};
 	toastFn.promise = (promise, options) => {
 		const pending = typeof promise === "function" ? promise() : promise;
 		const loadingKey = queue.add({
@@ -220,11 +273,17 @@ var createToastFunction = (queue) => {
 			variant: "default"
 		}, { timeout: 0 });
 		pending.then((data) => {
-			queue.close(loadingKey);
-			toastFn.success(resolve(options.success, data));
-		}, (error) => {
-			queue.close(loadingKey);
-			toastFn.danger(resolve(options.error, error));
+			toastFn.update(loadingKey, resolve(options.success, data), {
+				isLoading: false,
+				timeout: DEFAULT_TOAST_TIMEOUT,
+				variant: "success"
+			});
+		}).catch((error) => {
+			toastFn.update(loadingKey, resolve(options.error, error), {
+				isLoading: false,
+				timeout: DEFAULT_TOAST_TIMEOUT,
+				variant: "danger"
+			});
 		});
 		return loadingKey;
 	};
@@ -240,10 +299,9 @@ var toastQueue = new ToastQueue();
 var toast = createToastFunction(toastQueue);
 /** How many toasts the default queue holds. For a test asserting it did not leak into the next. */
 var getQueuedToastCount = () => toastQueue.visibleToasts.length;
-/** Empties the default queue and the transition chain. For a test, since both outlive a mount. */
+/** Empties the default queue. For a test, since the queue outlives a mount. */
 var resetToastQueue = () => {
 	toastQueue.clear();
-	toastQueue.resetTransitions();
 };
 //#endregion
-export { Timer, ToastQueue, createToastFunction, getQueuedToastCount, resetToastQueue, toast, toastQueue, useToastQueue };
+export { Timer, ToastQueue, createToastFunction, createViewTransitionUpdate, getQueuedToastCount, resetToastQueue, toast, toastQueue, useToastQueue };

package/dist/components/toast/toast-root.js

@@ -1,9 +1,10 @@
 import { dataAttr } from "../../utils/assertion.js";
 import { provideSurfaceContext } from "../surface/surface.context.js";
+import { createAnimationSettleWaiter } from "../../utils/animation-settled.js";
 import { provideToastItemContext, useToastRegionContext } from "./toast.context.js";
 import { useMeasuredHeight } from "../../composables/use-measured-height.js";
 import { useToast } from "../../composables/use-toast.js";
-import { computed, createSlot, defineVaporComponent, onScopeDispose, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, shallowRef, template, unref, watch } from "vue";
+import { computed, createSlot, defineVaporComponent, onMounted, onScopeDispose, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, shallowRef, template, unref, watch } from "vue";
 //#region src/components/toast/toast-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div>", 1);
 var toast_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
@@ -24,10 +25,53 @@ var toast_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PUR
 		};
 		const placement = computed(() => props.placement ?? region.placement.value);
 		const scaleFactor = computed(() => props.scaleFactor ?? region.scaleFactor.value);
-		/** Index 0 is the newest toast, which is the one in front of the stack. */
-		const index = computed(() => region.visibleToasts.value.findIndex((entry) => entry.key === props.toast.key));
+		const isExiting = computed(() => region.exitingKeys.value.has(props.toast.key));
+		/**
+		* The place this toast holds in the stack. Index 0 is the newest, which is the one in front.
+		*
+		* A toast on its way out keeps the slot it had while the ones behind it renumber and close up,
+		* so the stack reflows around it instead of waiting for it to finish.
+		*/
+		const lastIndex = shallowRef(0);
+		const index = computed(() => {
+			if (isExiting.value) return lastIndex.value;
+			return Math.max(region.visibleToasts.value.findIndex((entry) => entry.key === props.toast.key), 0);
+		});
+		watch(index, (next) => {
+			if (!isExiting.value) lastIndex.value = next;
+		}, { immediate: true });
 		const isFrontmost = computed(() => index.value <= 0);
-		const isHidden = computed(() => index.value >= region.maxVisibleToasts.value);
+		const isHidden = computed(() => !isExiting.value && index.value >= region.maxVisibleToasts.value);
+		/**
+		* Rendered from the very first frame rather than set once mounted.
+		*
+		* A transition needs a style to leave, so the offset has to be the element's *first* resolved
+		* style. Written after the element already exists, the browser transitions towards the offset and
+		* the flip below then drags it back — which reads as a toast that twitches instead of arriving.
+		*/
+		const isEntering = shallowRef(true);
+		onMounted(() => {
+			let inner = 0;
+			const outer = requestAnimationFrame(() => {
+				inner = requestAnimationFrame(() => {
+					isEntering.value = false;
+				});
+			});
+			onScopeDispose(() => {
+				cancelAnimationFrame(outer);
+				cancelAnimationFrame(inner);
+			}, true);
+		});
+		/**
+		* The exit is waited for rather than timed, so its length lives in the stylesheet — the one place
+		* that knows it — and no number here can fall out of step with it.
+		*/
+		const exit = createAnimationSettleWaiter(() => element.value);
+		watch(isExiting, (exiting) => {
+			if (!exiting) return;
+			exit.whenSettled(() => region.onExitFinished(props.toast.key));
+		});
+		onScopeDispose(exit.cancel, true);
 		const { height } = useMeasuredHeight(element);
 		/**
 		* Every toast reports its height up, because a toast that is *not* frontmost is clipped to the
@@ -64,32 +108,41 @@ var toast_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PUR
 		}));
 		const style = computed(() => {
 			const visible = region.visibleToasts.value;
+			const heights = region.heightsByKey.value;
 			const frontKey = visible[0]?.key;
-			const frontHeight = (frontKey === void 0 ? void 0 : region.heightsByKey.value[frontKey]) ?? height.value ?? 0;
-			const offset = index.value * region.gap.value;
-			const direction = placement.value?.startsWith("bottom") ? -1 : 1;
+			const frontHeight = (frontKey === void 0 ? void 0 : heights[frontKey]) ?? height.value ?? 0;
+			let heightsBefore = 0;
+			for (let position = 0; position < index.value; position += 1) {
+				const key = visible[position]?.key;
+				heightsBefore += (key === void 0 ? void 0 : heights[key]) ?? frontHeight;
+			}
+			const gap = index.value * region.gap.value;
 			return {
-				opacity: isHidden.value ? 0 : 1,
-				pointerEvents: isHidden.value ? "none" : "auto",
-				scale: `${1 - index.value * scaleFactor.value}`,
-				translate: `0 ${direction * offset}px 0`,
+				...frontHeight ? { "--front-height": `${frontHeight}px` } : null,
+				"--offset-collapsed": `${gap}px`,
+				"--offset-expanded": `${heightsBefore + gap}px`,
+				"--scale-collapsed": `${1 - index.value * scaleFactor.value}`,
 				viewTransitionName: `rp-toast-${props.toast.key.replace(/[^a-zA-Z0-9]/g, "-")}`,
-				zIndex: visible.length - index.value,
-				...frontHeight ? { "--front-height": `${frontHeight}px` } : null
+				zIndex: isExiting.value ? 0 : visible.length - index.value,
+				...height.value === void 0 ? null : { "--toast-height": `${height.value}px` }
 			};
 		});
 		const n1 = t0();
 		renderEffect(() => {
 			const _dataAttr = unref(dataAttr);
+			const _isExiting = isExiting.value;
 			const _isFrontmost = isFrontmost.value;
 			setDynamicProps(n1, [{
 				class: styles.value,
+				"data-entering": _dataAttr(isEntering.value),
+				"data-exiting": _dataAttr(_isExiting),
+				"data-expanded": _dataAttr(unref(region).isExpanded.value),
 				"data-frontmost": _dataAttr(_isFrontmost),
 				"data-hidden": _dataAttr(isHidden.value),
 				"data-index": index.value,
 				"data-slot": "toast",
 				style: style.value,
-				tabindex: _isFrontmost ? 0 : -1
+				tabindex: _isFrontmost && !_isExiting ? 0 : -1
 			}, unref(api).toastAttrs.value]);
 		});
 		setInsertionState(n1);