ropav 0.11.1 → 0.12.1

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

@@ -50,13 +50,18 @@ var switch_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PU
 		const styles = computed(() => switchVariants({ size: props.size }));
 		const validation = useFormValidationState({
 			isInvalid: () => props.isInvalid,
+			isRequired: () => props.isRequired,
 			name: () => props.name,
+			requiredControl: "checkbox",
 			validate: () => props.validate,
 			validationBehavior: () => props.validationBehavior,
 			value: () => state.value
 		});
 		provideFieldErrorContext({ validation: validation.displayValidation });
-		const { context: fieldIds, describedBy } = useFieldIds({ slots: ["description", "errorMessage"] });
+		const { context: fieldIds, describedBy } = useFieldIds({
+			labelElementType: "span",
+			slots: ["description", "errorMessage"]
+		});
 		provideFieldIdsContext(fieldIds);
 		const resolvedDescribedBy = computed(() => {
 			const ids = [describedBy.value, props.ariaDescribedby].filter(Boolean);

package/dist/components/table/table-row.js

@@ -1,10 +1,11 @@
 import { dataAttr } from "../../utils/assertion.js";
 import { useId as useId$1 } from "../../composables/use-id.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
+import { isNestedControl } from "../../utils/focus.js";
 import { useVirtualizerItem } from "../virtualizer/use-virtualizer-item.js";
 import { visuallyHiddenStyle } from "../../utils/visually-hidden.js";
 import { provideTableRowContext, useTableGridContext, useTableVirtualizerContext } from "./table.context.js";
-import { createTableRegistry, isTableCellControl, tableCellId } from "./use-table-collection.js";
+import { createTableRegistry, tableCellId } from "./use-table-collection.js";
 import { computed, createDynamicComponent, createIf, createSlot, defineVaporComponent, extend, on, renderEffect, setDynamicProps, setStaticTemplateRef, shallowRef, template, unref, watch } from "vue";
 //#region src/components/table/table-row.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div>");
@@ -155,7 +156,7 @@ var table_row_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 		});
 		const onClick = (event) => {
 			if (isDisabled.value || selectionMode.value === "none") return;
-			if (isTableCellControl(event.target)) return;
+			if (isNestedControl(event.target)) return;
 			selection.select(rowKey.value, {
 				isCtrlPressed: event.ctrlKey || event.metaKey,
 				isShiftPressed: event.shiftKey

package/dist/components/table/use-grid-keyboard.js

@@ -1,5 +1,4 @@
-import { focusableIn, getScrollParent, isScrollable } from "../../utils/focus.js";
-import { isTableCellControl } from "./use-table-collection.js";
+import { focusableIn, getScrollParent, isNestedControl, isScrollable } from "../../utils/focus.js";
 import { computed, nextTick, shallowRef, toValue, watch } from "vue";
 //#region src/components/table/use-grid-keyboard.ts
 var NO_FOCUS = {
@@ -307,7 +306,7 @@ var useGridKeyboard = (options) => {
 		const target = event.target;
 		if (toValue(options.isDisabled)) return;
 		if (!element || !(target instanceof Node) || !element.contains(target)) return;
-		if (isTableCellControl(target)) return;
+		if (isNestedControl(target)) return;
 		const from = focused.value;
 		const isModified = event.ctrlKey || event.metaKey;
 		const move = (next) => {

package/dist/components/table/use-table-collection.d.ts

@@ -135,14 +135,3 @@ export declare const normalizeIdKey: (key: CollectionKey) => string;
 export declare const tableColumnHeaderId: (tableId: string, columnKey: CollectionKey) => string;
 /** The id a row header cell carries, which is what `aria-labelledby` on the row points at. */
 export declare const tableCellId: (tableId: string, rowKey: CollectionKey, columnKey: CollectionKey) => string;
-/**
- * Whether an event landed on a control inside a cell rather than on a part of the grid.
- *
- * React Aria never has to ask: its press hook stops propagation, so a button or a checkbox in a
- * cell never lets the row or the grid see the interaction. Nothing stops propagation here, so both
- * the row's click handler and the grid's key handler have to recognise the case themselves.
- *
- * The grid's own parts are told apart by their collection marker — a cell holding the roving tab
- * stop matches the focusable selector without being content.
- */
-export declare const isTableCellControl: (target: EventTarget | null) => boolean;

package/dist/components/table/use-table-collection.js

@@ -1,4 +1,3 @@
-import { FOCUSABLE_SELECTOR } from "../../utils/focus.js";
 import { useCollection } from "../../composables/use-collection.js";
 import { createTableCollection } from "../../utils/virtualizer-collection.js";
 import { computed, shallowRef } from "vue";
@@ -113,20 +112,5 @@ var normalizeIdKey = (key) => typeof key === "string" ? key.replace(/\s*/g, "")
 var tableColumnHeaderId = (tableId, columnKey) => `${tableId}-${normalizeIdKey(columnKey)}`;
 /** The id a row header cell carries, which is what `aria-labelledby` on the row points at. */
 var tableCellId = (tableId, rowKey, columnKey) => `${tableId}-${normalizeIdKey(rowKey)}-${normalizeIdKey(columnKey)}`;
-/**
-* Whether an event landed on a control inside a cell rather than on a part of the grid.
-*
-* React Aria never has to ask: its press hook stops propagation, so a button or a checkbox in a
-* cell never lets the row or the grid see the interaction. Nothing stops propagation here, so both
-* the row's click handler and the grid's key handler have to recognise the case themselves.
-*
-* The grid's own parts are told apart by their collection marker — a cell holding the roving tab
-* stop matches the focusable selector without being content.
-*/
-var isTableCellControl = (target) => {
-	if (!(target instanceof Element)) return false;
-	const control = target.closest(FOCUSABLE_SELECTOR);
-	return control != null && !control.hasAttribute("data-collection");
-};
 //#endregion
-export { createTableRegistry, createTableTree, isTableCellControl, normalizeIdKey, tableCellId, tableColumnHeaderId, useTableCollection };
+export { createTableRegistry, createTableTree, normalizeIdKey, tableCellId, tableColumnHeaderId, useTableCollection };

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

@@ -12,6 +12,7 @@ var tabs_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 	__name: "tabs-root",
 	props: {
 		class: {},
+		align: { default: void 0 },
 		selectedKey: {},
 		defaultSelectedKey: {},
 		disabledKeys: {},
@@ -32,7 +33,10 @@ var tabs_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 		const orientation = computed(() => props.orientation ?? "horizontal");
 		const keyboardActivation = computed(() => props.keyboardActivation ?? "automatic");
 		const isDisabled = computed(() => Boolean(props.isDisabled));
-		const slots = computed(() => tabsVariants({ variant: props.variant }));
+		const slots = computed(() => tabsVariants({
+			align: props.align,
+			variant: props.variant
+		}));
 		const state = useTabListState({
 			defaultSelectedKey: props.defaultSelectedKey,
 			disabledKeys: () => props.disabledKeys,

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

@@ -8,6 +8,12 @@ export type TabsOrientation = "horizontal" | "vertical";
 export type TabsKeyboardActivation = "automatic" | "manual";
 export interface TabsRootProps {
     class?: string;
+    /**
+     * Where a tab's label and icon sit inside the tab.
+     *
+     * @default "center"
+     */
+    align?: TabsVariants["align"];
     /** The selected tab, when the caller drives it. */
     selectedKey?: CollectionKey;
     /** The initially selected tab. Falls back to the first tab that is not disabled. */

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

@@ -8,7 +8,7 @@ import ToastRoot from "./toast-root.js";
 import ToastTitle from "./toast-title.js";
 export { ToastActionButton, ToastCloseButton, ToastContent, ToastDescription, ToastIndicator, ToastProvider, ToastRoot as Toast, ToastTitle, };
 export type { ToastActionButtonProps, ToastActionValue, ToastAddOptions, ToastCloseButtonProps, ToastContentProps, ToastContentValue, ToastDescriptionProps, ToastIndicatorProps, ToastOptions, ToastPromiseOptions, ToastProviderProps, ToastProviderSlotProps, ToastQueueOptions, ToastRenderable, ToastRootProps as ToastProps, ToastTitleProps, QueuedToast, } from "./toast.types.js";
-export { ToastQueue, createToastFunction, getQueuedToastCount, resetToastQueue, toast, toastQueue, useToastQueue, } from "./toast-queue.js";
+export { ToastQueue, createToastFunction, createViewTransitionUpdate, getQueuedToastCount, resetToastQueue, toast, toastQueue, useToastQueue, } from "./toast-queue.js";
 export type { Timer } from "./toast-queue.js";
 export type { ToastFunction, UseToastQueueReturn } from "./toast-queue.js";
 export { DEFAULT_GAP, DEFAULT_MAX_VISIBLE_TOAST, DEFAULT_SCALE_FACTOR, DEFAULT_TOAST_TIMEOUT, DEFAULT_TOAST_WIDTH, } from "./toast.constants.js";

package/dist/components/toast/index.js

@@ -4,10 +4,10 @@ import toast_close_button_default from "./toast-close-button.js";
 import toast_content_default from "./toast-content.js";
 import toast_description_default from "./toast-description.js";
 import toast_indicator_default from "./toast-indicator.js";
+import { DEFAULT_GAP, DEFAULT_MAX_VISIBLE_TOAST, DEFAULT_SCALE_FACTOR, DEFAULT_TOAST_TIMEOUT, DEFAULT_TOAST_WIDTH } from "./toast.constants.js";
 import toast_root_default from "./toast-root.js";
 import toast_title_default from "./toast-title.js";
-import { DEFAULT_GAP, DEFAULT_MAX_VISIBLE_TOAST, DEFAULT_SCALE_FACTOR, DEFAULT_TOAST_TIMEOUT, DEFAULT_TOAST_WIDTH } from "./toast.constants.js";
-import { ToastQueue, createToastFunction, getQueuedToastCount, resetToastQueue, toast, toastQueue, useToastQueue } from "./toast-queue.js";
+import { ToastQueue, createToastFunction, createViewTransitionUpdate, getQueuedToastCount, resetToastQueue, toast, toastQueue, useToastQueue } from "./toast-queue.js";
 import toast_provider_default from "./toast-provider.js";
 import { toastVariants } from "@ropav/styles";
-export { DEFAULT_GAP, DEFAULT_MAX_VISIBLE_TOAST, DEFAULT_SCALE_FACTOR, DEFAULT_TOAST_TIMEOUT, DEFAULT_TOAST_WIDTH, toast_root_default as Toast, toast_action_button_default as ToastActionButton, toast_close_button_default as ToastCloseButton, toast_content_default as ToastContent, toast_description_default as ToastDescription, toast_indicator_default as ToastIndicator, toast_provider_default as ToastProvider, ToastQueue, toast_title_default as ToastTitle, createToastFunction, getQueuedToastCount, resetToastQueue, toast, toastQueue, toastVariants, useToastItemContext, useToastQueue, useToastRegionContext };
+export { DEFAULT_GAP, DEFAULT_MAX_VISIBLE_TOAST, DEFAULT_SCALE_FACTOR, DEFAULT_TOAST_TIMEOUT, DEFAULT_TOAST_WIDTH, toast_root_default as Toast, toast_action_button_default as ToastActionButton, toast_close_button_default as ToastCloseButton, toast_content_default as ToastContent, toast_description_default as ToastDescription, toast_indicator_default as ToastIndicator, toast_provider_default as ToastProvider, ToastQueue, toast_title_default as ToastTitle, createToastFunction, createViewTransitionUpdate, getQueuedToastCount, resetToastQueue, toast, toastQueue, toastVariants, useToastItemContext, useToastQueue, useToastRegionContext };

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;