@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/dist/_chunk/toast.js

@@ -1,4 +1,17 @@
-import { useTheme } from "../provider/index.js";
+/*
+* Copyright 2025 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Toast.module.css
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Toast.tsx
+import { o as useTheme } from "./provider.js";
 import { t as s2IntlStrings } from "./intl.js";
 import { CenterBaseline } from "../icon/center-baseline.js";
 import { t as ActionButton } from "./ActionButton.js";
@@ -8,28 +21,51 @@ import { t as InfoCircleIcon } from "./InfoCircleIcon.js";
 import { t as AlertTriangleIcon } from "./AlertTriangleIcon.js";
 import { t as AlertDiamondIcon } from "./AlertDiamondIcon.js";
 import { t as CheckmarkCircleIcon } from "./CheckmarkCircleIcon.js";
-import { n as CloseButton } from "./dialog.js";
 import { t as createMediaQuery } from "./createMediaQuery.js";
-import { addEventListener, className, createComponent, delegateEvents, effect, getNextElement, getNextMarker, insert, memo, mergeProps, runHydrationEvents, setAttribute, spread, style, template } from "solid-js/web";
-import { For, Show, batch, createContext, createEffect, createSignal, onCleanup, onMount, splitProps, useContext } from "solid-js";
-import { FocusScope, createHover, createPreventScroll, createStringFormatter, filterDOMProps } from "@proyecto-viviana/solidaria";
-import { Toast, ToastContext, ToastDescription, ToastProvider, ToastRegion, ToastTitle, addToast, globalToastQueue, useToastContext } from "@proyecto-viviana/solidaria-components";
+import { n as CloseButton } from "./dialog.js";
+import { addEvent, className, createComponent, delegateEvents, effect, getNextElement, getNextMarker, insert, memo, mergeProps, readShallow, runHydrationEvents, setAttribute, spread, style, template } from "@solidjs/web";
+import { For, Show, createContext, createSignal, createTrackedEffect, flush, onCleanup, onSettled, useContext } from "solid-js";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
+import { Toast, ToastContext, ToastDescription, ToastProvider, ToastRegion, ToastTitle, UNSTABLE_ToastContent, addToast, globalToastQueue, useToastContext } from "@proyecto-viviana/solidaria-components";
+import { FocusScope, createHover, createPreventScroll, createStringFormatter, filterDOMProps as filterDOMProps$1 } from "@proyecto-viviana/solidaria";
 import { ToastQueue as StatelyToastQueue } from "@proyecto-viviana/solid-stately";
 //#region src/icon/s2wf-icons/ChevronDownIcon.tsx
-var _tmpl$$1 = /*#__PURE__*/ template(`<svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 20 20"><path d=M3.75488,7.24316c.28711-.29883.76172-.3086,1.05957-.02051l5.18359,4.98633,5.19727-4.99902c.29785-.28808.77246-.27832,1.05957.02051.28711.29687.27832.77246-.02051,1.05957l-5.7168,5.5c-.29004.28027-.74902.28027-1.03906,0l-5.70312-5.4873c-.15332-.14649-.23047-.34375-.23047-.54004,0-.18751.06934-.37501.20996-.51954Z fill="var(--iconPrimary, #222)">`);
+var _tmpl$$1 = /* @__PURE__ */ template(`<svg><path fill="var(--iconPrimary, light-dark(rgb(41, 41, 41), rgb(219, 219, 219)))"d="M3.755 7.243c.287-.299.762-.308 1.06-.02l5.183 4.986 5.197-4.999c.298-.288.773-.278 1.06.02.287.297.278.773-.02 1.06l-5.717 5.5c-.29.28-.75.28-1.04 0L3.776 8.303c-.153-.147-.23-.344-.23-.54 0-.188.07-.375.21-.52">`);
 function ChevronDownIconSvg(props) {
-	const { class: className, ...rest } = props;
-	return (() => {
-		var _el$ = getNextElement(_tmpl$$1);
-		spread(_el$, mergeProps(rest, { "class": className }), true, true);
-		runHydrationEvents();
-		return _el$;
-	})();
+	const [local, rest] = splitProps(props, ["class"]);
+	var _el$ = getNextElement(_tmpl$$1);
+	spread(_el$, [
+		{
+			xmlns: "http://www.w3.org/2000/svg",
+			width: "20",
+			height: "20",
+			viewBox: "0 0 20 20"
+		},
+		rest,
+		{ get "class"() {
+			return local.class;
+		} }
+	], true);
+	runHydrationEvents();
+	return _el$;
 }
 const ChevronDownIcon = createIcon(ChevronDownIconSvg);
 //#endregion
 //#region src/toast/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div class="toast-background _Pb151 Wr151 _lr151 _Ar151 _zr151 go6lXAd151 _Oa151"data-solid-spectrum-toast-background>`), _tmpl$2 = /*#__PURE__*/ template(`<div data-solid-spectrum-toast-focus-scope style=display:contents><!$><!/><div></div><!$><!/>`), _tmpl$3 = /*#__PURE__*/ template(`<div data-solid-spectrum-toast-controls><!$><!/><!$><!/>`), _tmpl$4 = /*#__PURE__*/ template(`<div role=presentation data-solid-spectrum-toast-background-item>`), _tmpl$5 = /*#__PURE__*/ template(`<div role=presentation><div data-solidaria-toast-content><!$><!/><div class=" Na151 sd151 _ta151"><!$><!/><!$><!/></div></div><!$><!/><!$><!/>`);
+/**
+* S2 Toast for @proyecto-viviana/ui.
+*
+* Based on these pinned React Spectrum S2 sources:
+* - packages/@react-spectrum/s2/src/Toast.module.css
+* - packages/@react-spectrum/s2/src/Toast.tsx
+*
+* This Solid module combines the pinned Toast component and transition stylesheet.
+*/ var _tmpl$ = /* @__PURE__ */ template(`<div class="toast-background _Pb17 Wr17 _lr17 _Ar17 _zr17 go6lXAd17 _Oa17"data-solid-spectrum-toast-background>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div data-solid-spectrum-toast-focus-scope style=display:contents><!$><!/><div></div><!$><!/>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div data-solid-spectrum-toast-controls><!$><!/><!$><!/>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<div role=presentation data-solid-spectrum-toast-background-item>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<div class=" Na17 sd17 _ta17"><!$><!/><!$><!/>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<div role=presentation><!$><!/><!$><!/><!$><!/>`);
 const TOAST_ANIMATION_CSS = `
 /* Safari doesn't support :active-view-transition-type() yet, so we fall back to a class on the html element */
 html.toast-add,
@@ -228,14 +264,13 @@ let globalReduceMotion = false;
 * class (and `reduceMotion`) to <html> so the injected CSS can target the transition, then
 * removes them once it settles. Where the View Transitions API is unavailable (SSR, jsdom,
 * older browsers) it runs the mutation synchronously, so behavior is unchanged.
-*/
-function startViewTransition(fn, type) {
+*/ function startViewTransition(fn, type) {
 	const doc = typeof document === "undefined" ? void 0 : document;
 	if (doc && typeof doc.startViewTransition === "function") {
 		ensureToastAnimationStyles();
 		doc.documentElement.classList.add(type);
 		if (globalReduceMotion) doc.documentElement.classList.add("reduceMotion");
-		const viewTransition = doc.startViewTransition(() => batch(fn));
+		const viewTransition = doc.startViewTransition(() => flush(fn));
 		viewTransition.ready.catch(() => {});
 		viewTransition.finished.finally(() => {
 			doc.documentElement.classList.remove(type, "reduceMotion");
@@ -243,160 +278,173 @@ function startViewTransition(fn, type) {
 	} else fn();
 }
 globalToastQueue.setWrapUpdate((fn, action) => startViewTransition(fn, `toast-${action}`));
-/** A toast's view-transition-name; prefixed so the numeric queue keys remain valid CSS idents. */
-function toastViewTransitionName(key, suffix = "") {
+/** A toast's view-transition-name; prefixed so the numeric queue keys remain valid CSS idents. */ function toastViewTransitionName(key, suffix = "") {
 	return `toast-${key}${suffix}`;
 }
 const ToastContainerContext = createContext(null);
 const toastRegion = function anonymous(props) {
 	let rules = " ";
-	if (props.colorScheme === "dark") rules += " -ICUGx-_pa151";
-	else if (props.colorScheme === "light") rules += " -ICUGx-_pb151";
-	else if (props.colorScheme === "light dark") rules += " -ICUGx-_pc151";
-	rules += " _pK8eoyd151";
-	if (props.colorScheme === "dark") rules += " -NvXmrd-_ZLmU151";
-	else if (props.colorScheme === "light") rules += " -NvXmrd-_ZN8Gi4c151";
+	if (props.colorScheme === "dark") rules += " -ICUGx-_pa17";
+	else if (props.colorScheme === "light") rules += " -ICUGx-_pb17";
+	else if (props.colorScheme === "light dark") {
+		rules += " -ICUGx-_pb17";
+		rules += " -ICUGx-D1v0V_pa17";
+	}
+	rules += " _pK8eoyd17";
+	if (props.colorScheme === "dark") rules += " -NvXmrd-_ZLmU17";
+	else if (props.colorScheme === "light") rules += " -NvXmrd-_ZN8Gi4c17";
 	else if (props.colorScheme === "light dark") {
-		rules += " -NvXmrd-_ZN8Gi4c151";
-		rules += " -NvXmrd-D1v0V_ZLmU151";
+		rules += " -NvXmrd-_ZN8Gi4c17";
+		rules += " -NvXmrd-D1v0V_ZLmU17";
 	}
-	if (props.colorScheme === "dark") rules += " -j9blY-_ZN8Gi4c151";
-	else if (props.colorScheme === "light") rules += " -j9blY-_ZLmU151";
+	if (props.colorScheme === "dark") rules += " -j9blY-_ZN8Gi4c17";
+	else if (props.colorScheme === "light") rules += " -j9blY-_ZLmU17";
 	else if (props.colorScheme === "light dark") {
-		rules += " -j9blY-_ZLmU151";
-		rules += " -j9blY-D1v0V_ZN8Gi4c151";
+		rules += " -j9blY-_ZLmU17";
+		rules += " -j9blY-D1v0V_ZN8Gi4c17";
+	}
+	if (props.isFocusVisible) rules += " _Lf17";
+	else rules += " _Le17";
+	rules += " Or2Mazb17";
+	rules += " Olc17";
+	rules += " _Mc17";
+	rules += " _Kd17";
+	rules += " sd17";
+	if (props.placement === "bottom") rules += " _tb17";
+	else if (props.placement === "top") rules += " _ta17";
+	rules += " _Pb17";
+	rules += " _Ar17";
+	rules += " _zr17";
+	rules += " ZJ17";
+	if (props.placement === "top") {
+		if (props.isExpanded) rules += " Wr17";
+		else rules += " Wu17";
 	}
-	if (props.isFocusVisible) rules += " _Lf151";
-	else rules += " _Le151";
-	rules += " O8KaFke151";
-	rules += " Olc151";
-	rules += " _Mc151";
-	rules += " _Kd151";
-	rules += " sd151";
-	if (props.placement === "bottom") rules += " _tb151";
-	else if (props.placement === "top") rules += " _ta151";
-	rules += " _Pb151";
-	rules += " _Ar151";
-	rules += " _zr151";
-	rules += " ZJ151";
-	if (props.placement === "top") if (props.isExpanded) rules += " Wr151";
-	else rules += " Wu151";
-	if (props.placement === "bottom") if (props.isExpanded) rules += " _lr151";
-	else rules += " _lu151";
-	if (props.align === "end") rules += " IM151";
-	else if (props.align === "center") rules += " IM151";
-	if (props.align === "end") rules += " HC151";
-	else if (props.align === "center") rules += " HM151";
-	rules += " _oa151";
-	rules += " Ka151";
-	rules += " oY4qurc151";
-	rules += " nY4qurc151";
-	rules += " kY4qurc151";
-	rules += " jY4qurc151";
+	if (props.placement === "bottom") {
+		if (props.isExpanded) rules += " _lr17";
+		else rules += " _lu17";
+	}
+	if (props.align === "end") rules += " IM17";
+	else if (props.align === "center") rules += " IM17";
+	if (props.align === "end") rules += " HC17";
+	else if (props.align === "center") rules += " HM17";
+	rules += " _oa17";
+	rules += " Ka17";
+	rules += " ob17";
+	rules += " nb17";
+	rules += " kb17";
+	rules += " jb17";
 	return rules;
 };
 const toastList = function anonymous(props) {
 	let rules = " ";
-	rules += " _Pc151";
-	rules += " _ub151";
-	rules += " sd151";
-	rules += " Ue151";
-	rules += " qe151";
-	if (props.placement === "bottom") rules += " _tb151";
-	else if (props.placement === "top") rules += " _ta151";
-	rules += " _oa151";
-	rules += " Jy151";
-	rules += " Gy151";
-	if (props.isExpanded) rules += " Ic151";
-	else rules += " Iy151";
-	if (props.isExpanded) rules += " Hc151";
-	else rules += " Hy151";
+	rules += " _Pc17";
+	rules += " _ub17";
+	rules += " sd17";
+	rules += " Ue17";
+	rules += " qe17";
+	if (props.placement === "bottom") rules += " _tb17";
+	else if (props.placement === "top") rules += " _ta17";
+	rules += " _oa17";
+	rules += " Jy17";
+	rules += " Gy17";
+	if (props.isExpanded) rules += " Ic17";
+	else rules += " Iy17";
+	if (props.isExpanded) rules += " Hc17";
+	else rules += " Hy17";
 	if (props.isExpanded) {
-		if (props.placement === "bottom") rules += " Tt151";
-		else if (props.placement === "top") rules += " Tf151";
+		if (props.placement === "bottom") rules += " Tt17";
+		else if (props.placement === "top") rules += " Tf17";
 	}
 	if (props.isExpanded) {
-		if (props.placement === "bottom") rules += " Qf151";
-		else if (props.placement === "top") rules += " Qt151";
+		if (props.placement === "bottom") rules += " Qf17";
+		else if (props.placement === "top") rules += " Qt17";
 	}
-	if (props.isExpanded) rules += " St151";
-	else rules += " Sd151";
-	if (props.isExpanded) rules += " Rt151";
-	else rules += " Rd151";
-	if (props.isExpanded) rules += " _Na151";
-	if (props.isExpanded) rules += " Pa151";
+	if (props.isExpanded) rules += " St17";
+	else rules += " Sd17";
+	if (props.isExpanded) rules += " Rt17";
+	else rules += " Rd17";
+	if (props.isExpanded) rules += " _Na17";
+	if (props.isExpanded) rules += " Pa17";
 	return rules;
 };
 const toastStyle = function anonymous(props) {
 	let rules = " ";
-	if (props.isFocusVisible) rules += " _Lf151";
-	else rules += " _Le151";
-	if (props.isExpanded) rules += " Ok151";
-	else rules += " O8KaFke151";
-	rules += " _Mc151";
-	rules += " _Kd151";
-	rules += " sd151";
-	rules += " Ul151";
-	rules += " ql151";
-	rules += " Sf151";
-	rules += " Rt151";
-	rules += " Te151";
-	rules += " Qe151";
-	rules += " oY4qurc151";
-	rules += " nY4qurc151";
-	rules += " kY4qurc151";
-	rules += " jY4qurc151";
-	rules += " Mj151";
-	rules += " LuU0FLe151";
-	rules += " _oa151";
-	rules += " _va151";
-	rules += " uxe7h4151";
-	rules += " -_6BNtrc-c151";
-	rules += " vx151";
-	rules += " xb151";
-	rules += " _xa151";
-	rules += " _Fd151";
-	rules += " _FnuYUweb151";
-	rules += " px151";
-	if (props.variant === "notice") rules += " gzNv0pd151";
-	else if (props.variant === "negative") rules += " geTwQfb151";
-	else if (props.variant === "positive") rules += " gfkXLC151";
-	else if (props.variant === "info") rules += " gGAGle151";
-	else if (props.variant === "neutral") rules += " g6m8FEd151";
-	rules += " -_8sjo0b-t5ZbAob151";
-	if (props.isExpanded) rules += " _nd151";
-	else rules += " _nfRoCnb151";
-	rules += " _8d151";
+	if (props.isFocusVisible) rules += " _Lf17";
+	else rules += " _Le17";
+	if (props.isExpanded) rules += " Ok17";
+	else rules += " Or2Mazb17";
+	rules += " _Mc17";
+	rules += " _Kd17";
+	rules += " sd17";
+	rules += " Ul17";
+	rules += " ql17";
+	rules += " Sf17";
+	rules += " Rt17";
+	rules += " Te17";
+	rules += " Qe17";
+	rules += " oY4qurc17";
+	rules += " nY4qurc17";
+	rules += " kY4qurc17";
+	rules += " jY4qurc17";
+	rules += " Mj17";
+	rules += " LuU0FLe17";
+	rules += " _oa17";
+	rules += " _va17";
+	rules += " uxe7h417";
+	rules += " -_6BNtrc-c17";
+	rules += " vx17";
+	rules += " xb17";
+	rules += " _xa17";
+	rules += " _Fd17";
+	rules += " _FnuYUweb17";
+	if (props.variant === "notice") rules += " pg17";
+	else if (props.variant === "info") rules += " pLCmSLe17";
+	else rules += " px17";
+	if (props.variant === "notice") rules += " -Ovbhqd-gckTQle17";
+	else if (props.variant === "negative") rules += " -Ovbhqd-g53V7Rd17";
+	else if (props.variant === "positive") rules += " -Ovbhqd-g4izmob17";
+	else if (props.variant === "info") rules += " -Ovbhqd-ghtKvMe17";
+	else if (props.variant === "neutral") rules += " -Ovbhqd-gEJCckb17";
+	if (props.variant === "notice") rules += " gckTQle17";
+	else if (props.variant === "negative") rules += " g53V7Rd17";
+	else if (props.variant === "positive") rules += " g4izmob17";
+	else if (props.variant === "info") rules += " ghtKvMe17";
+	else if (props.variant === "neutral") rules += " gEJCckb17";
+	rules += " -_8sjo0b-t5ZbAob17";
+	if (props.isExpanded) rules += " _nd17";
+	else rules += " _nmHdxkc17";
+	rules += " _8d17";
 	return rules;
 };
 const toastBody = function anonymous(props) {
 	let rules = " ";
-	if (props.isSingle) rules += " sd151";
-	else rules += " se151";
-	rules += " D4w1sLc151";
-	rules += " C2iJn6d151";
-	rules += " _ub151";
-	rules += " _wb151";
-	rules += " eb151";
-	rules += " qj151";
-	rules += " Ue151";
+	if (props.isSingle) rules += " sd17";
+	else rules += " se17";
+	rules += " D4w1sLc17";
+	rules += " C2iJn6d17";
+	rules += " _ub17";
+	rules += " _wb17";
+	rules += " eb17";
+	rules += " qj17";
+	rules += " Ue17";
 	return rules;
 };
-const toastContent = " sd151 ri151 Ue151 qe151 ea151 zk52g2d151 yk52g2d151 Bk52g2d151 Ak52g2d151 ZJ151 -nTSCV-LTAEPe151 __ZLTAEPe151 Na151";
-const toastDescription = " uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fb151 _FnuYUwec151 pHKLAu151 _IumMfn151 Jr151";
-const toastAction = " IM151 zzz3eAe151 yzz3eAe151 Bzz3eAe151 Azz3eAe151";
-const toastExpand = " zPgKvMe151 yPgKvMe151 BPgKvMe151 APgKvMe151";
+const toastContent = " sd17 ri17 Ue17 qe17 ea17 zk52g2d17 yk52g2d17 Bk52g2d17 Ak52g2d17 ZJ17 -nTSCV-LTAEPe17 __ZLTAEPe17 Na17";
+const toastDescription = " uk17 ucJ9TBTb17 ud3Euai17 uea17 ugb17 uhd17 uje17 u2NhKxcl17 uic17 -_6BNtrc-b17 vx17 xb17 _xa17 _Fb17 _FnuYUwec17 pmiKvLd17 _IumMfn17 Jr17";
+const toastAction = " IM17 zzz3eAe17 yzz3eAe17 Bzz3eAe17 Azz3eAe17";
+const toastExpand = " zPgKvMe17 yPgKvMe17 BPgKvMe17 APgKvMe17";
 const toastControls = function anonymous(props) {
 	let rules = " ";
-	rules += " _pb151";
-	rules += " _Oa151";
-	if (props.isExpanded) rules += " sd151";
-	else rules += " sk151";
-	rules += " _Cb151";
-	rules += " Ue151";
-	rules += " qe151";
-	if (props.isExpanded) rules += " _Ib151";
-	else rules += " _Ia151";
+	rules += " _pb17";
+	rules += " _Oa17";
+	if (props.isExpanded) rules += " sd17";
+	else rules += " sk17";
+	rules += " _Cb17";
+	rules += " Ue17";
+	rules += " qe17";
+	if (props.isExpanded) rules += " _Ib17";
+	else rules += " _Ia17";
 	return rules;
 };
 function toastListPerspectiveStyle(placement, isHovered) {
@@ -444,7 +492,7 @@ function closeGlobalToast(key) {
 }
 function addSpectrumToast(children, variant, options = {}) {
 	const timeout = options.timeout && !options.actionLabel ? Math.max(options.timeout, 5e3) : void 0;
-	const domProps = filterDOMProps(options);
+	const domProps = filterDOMProps$1(options);
 	const key = addToast({
 		children,
 		variant,
@@ -461,15 +509,13 @@ function addSpectrumToast(children, variant, options = {}) {
 /**
 * ToastProvider creates a toast queue context for descendant components.
 * Most S2 usage should render ToastContainer once at the app root instead.
-*/
-function ToastProvider$1(props) {
+*/ function ToastProvider$1(props) {
 	return createComponent(ToastProvider, props);
 }
 /**
 * ToastRegion displays all visible toasts from the surrounding ToastProvider.
 * This remains for lower-level composition; ToastContainer self-wires the global queue.
-*/
-function ToastRegion$1(props) {
+*/ function ToastRegion$1(props) {
 	const [local, rest] = splitProps(props, ["placement", "class"]);
 	const placement = () => normalizePlacement(local.placement);
 	const theme = useTheme();
@@ -494,7 +540,8 @@ function ToastRegion$1(props) {
 		if (isExpanded() || !(target instanceof Element) || target.closest("button")) return;
 		toggleExpanded(visibleToasts);
 	};
-	createEffect(() => {
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		if (!isExpanded() || !containerContext) return;
 		const ownerDocument = globalThis.document;
 		if (!ownerDocument) return;
@@ -505,13 +552,16 @@ function ToastRegion$1(props) {
 			containerContext.collapse();
 		};
 		ownerDocument.addEventListener("keydown", handleDocumentKeyDown, true);
-		onCleanup(() => ownerDocument.removeEventListener("keydown", handleDocumentKeyDown, true));
+		_s2Cleanups.push(() => ownerDocument.removeEventListener("keydown", handleDocumentKeyDown, true));
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
 	return createComponent(ToastRegion, mergeProps(rest, {
 		get placement() {
 			return placement().placement;
 		},
-		"class": (_renderProps) => [toastRegion({
+		class: (_renderProps) => [toastRegion({
 			placement: placement().edge,
 			align: placement().align,
 			isExpanded: isExpanded(),
@@ -524,21 +574,26 @@ function ToastRegion$1(props) {
 					return isExpanded();
 				},
 				get children() {
-					var _el$ = getNextElement(_tmpl$2), _el$4 = _el$.firstChild, [_el$5, _co$] = getNextMarker(_el$4.nextSibling), _el$3 = _el$5.nextSibling, _el$6 = _el$3.nextSibling, [_el$7, _co$2] = getNextMarker(_el$6.nextSibling);
-					_el$.$$keydown = handleRegionKeyDown;
+					var _el$ = getNextElement(_tmpl$2);
+					var _el$3 = _el$.firstChild;
+					var [_el$4, _el$5] = getNextMarker(_el$3.nextSibling);
+					var _el$6 = _el$4.nextSibling;
+					var _el$7 = _el$6.nextSibling;
+					var [_el$8, _el$9] = getNextMarker(_el$7.nextSibling);
+					_el$._$$keydown = handleRegionKeyDown;
 					insert(_el$, createComponent(Show, {
 						get when() {
 							return containerContext && isExpanded();
 						},
 						get children() {
 							var _el$2 = getNextElement(_tmpl$);
-							addEventListener(_el$2, "click", containerContext?.collapse, true);
+							addEvent(_el$2, "click", containerContext?.collapse, true);
 							runHydrationEvents();
 							return _el$2;
 						}
-					}), _el$5, _co$);
-					spread(_el$3, mergeProps(listHoverProps, {
-						get ["class"]() {
+					}), _el$4, _el$5);
+					spread(_el$6, [listHoverProps, {
+						get "class"() {
 							return [isExpanded() ? "toast-list-expanded" : "toast-list-collapsed", toastList({
 								placement: placement().edge,
 								isExpanded: isExpanded()
@@ -548,9 +603,9 @@ function ToastRegion$1(props) {
 						get style() {
 							return toastListPerspectiveStyle(placement().edge, isListHovered());
 						},
-						"onClick": (event) => handleListClick(event, visibleToasts())
-					}), false, true);
-					insert(_el$3, createComponent(For, {
+						onClick: (event) => handleListClick(event, visibleToasts())
+					}], true);
+					insert(_el$6, createComponent(For, {
 						get each() {
 							return visibleToasts();
 						},
@@ -574,8 +629,12 @@ function ToastRegion$1(props) {
 					insert(_el$, createComponent(Show, {
 						when: containerContext,
 						children: (context) => (() => {
-							var _el$8 = getNextElement(_tmpl$3), _el$9 = _el$8.firstChild, [_el$0, _co$3] = getNextMarker(_el$9.nextSibling), _el$1 = _el$0.nextSibling, [_el$10, _co$4] = getNextMarker(_el$1.nextSibling);
-							insert(_el$8, createComponent(ActionButton, {
+							var _el$10 = getNextElement(_tmpl$3);
+							var _el$11 = _el$10.firstChild;
+							var [_el$12, _el$13] = getNextMarker(_el$11.nextSibling);
+							var _el$14 = _el$12.nextSibling;
+							var [_el$15, _el$16] = getNextMarker(_el$14.nextSibling);
+							insert(_el$10, createComponent(ActionButton, {
 								size: "S",
 								get onPress() {
 									return context().clear;
@@ -583,8 +642,8 @@ function ToastRegion$1(props) {
 								get children() {
 									return stringFormatter().format("toast.clearAll");
 								}
-							}), _el$0, _co$3);
-							insert(_el$8, createComponent(ActionButton, {
+							}), _el$12, _el$13);
+							insert(_el$10, createComponent(ActionButton, {
 								size: "S",
 								get onPress() {
 									return context().collapse;
@@ -592,11 +651,13 @@ function ToastRegion$1(props) {
 								get children() {
 									return stringFormatter().format("toast.collapse");
 								}
-							}), _el$10, _co$4);
-							effect(() => className(_el$8, `toast-controls ${toastControls({ isExpanded: isExpanded() })}`));
-							return _el$8;
+							}), _el$15, _el$16);
+							effect(() => `toast-controls ${toastControls({ isExpanded: isExpanded() })}`, (_v$, _$p) => {
+								className(_el$10, _v$, _$p);
+							});
+							return _el$10;
 						})()
-					}), _el$7, _co$2);
+					}), _el$8, _el$9);
 					runHydrationEvents();
 					return _el$;
 				}
@@ -607,37 +668,40 @@ function ToastRegion$1(props) {
 /**
 * A ToastContainer renders the queued toasts in an application. It should be placed
 * at the root of the app.
-*/
-function ToastContainer(props) {
+*/ function ToastContainer(props) {
 	const [local, regionProps] = splitProps(props, ["PRIVATE_forceReducedMotion"]);
 	const [isExpanded, setIsExpanded] = createSignal(false);
-	onMount(ensureToastAnimationStyles);
+	onSettled(ensureToastAnimationStyles);
 	const prefersReducedMotion = createMediaQuery("(prefers-reduced-motion)");
 	const reduceMotion = () => local.PRIVATE_forceReducedMotion ?? prefersReducedMotion();
-	createEffect(() => {
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		const previous = globalReduceMotion;
 		globalReduceMotion = reduceMotion();
-		onCleanup(() => {
+		_s2Cleanups.push(() => {
 			globalReduceMotion = previous;
 		});
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
-	onCleanup(globalToastQueue.subscribe((toasts) => {
+	const unsubscribe = globalToastQueue.subscribe((toasts) => {
 		if (toasts.length === 0) setIsExpanded(false);
-	}));
-	const context = {
-		isExpanded,
-		toggleExpanded: () => {
-			const expanding = !isExpanded();
-			startViewTransition(() => setIsExpanded(expanding), expanding ? "toast-expand" : "toast-collapse");
-		},
-		collapse: () => {
-			if (isExpanded()) startViewTransition(() => setIsExpanded(false), "toast-collapse");
+	});
+	onCleanup(unsubscribe);
+	return createComponent(ToastContainerContext, {
+		value: {
+			isExpanded,
+			toggleExpanded: () => {
+				const expanding = !isExpanded();
+				startViewTransition(() => setIsExpanded(expanding), expanding ? "toast-expand" : "toast-collapse");
+			},
+			collapse: () => {
+				if (isExpanded()) startViewTransition(() => setIsExpanded(false), "toast-collapse");
+			},
+			clear: () => globalToastQueue.clear(),
+			reduceMotion
 		},
-		clear: () => globalToastQueue.clear(),
-		reduceMotion
-	};
-	return createComponent(ToastContainerContext.Provider, {
-		value: context,
 		get children() {
 			return createComponent(ToastProvider$1, {
 				useGlobalQueue: true,
@@ -648,8 +712,7 @@ function ToastContainer(props) {
 		}
 	});
 }
-/** Toast displays an individual notification with icon, content, action, and close button. */
-function Toast$1(props) {
+/** Toast displays an individual notification with icon, content, action, and close button. */ function Toast$1(props) {
 	const [local, rest] = splitProps(props, [
 		"toast",
 		"class",
@@ -665,8 +728,9 @@ function Toast$1(props) {
 	const containerCtx = useContext(ToastContainerContext);
 	const stringFormatter = createStringFormatter(s2IntlStrings, "@react-spectrum/s2");
 	const content = () => local.toast.content;
-	const contentDomProps = () => filterDOMProps(content());
+	const contentDomProps = () => filterDOMProps$1(content());
 	const variant = () => normalizeVariant(content().variant, content().type);
+	const staticInk = () => variant() === "notice" ? "black" : variant() === "info" ? "auto" : "white";
 	const title = () => content().children ?? content().title;
 	const actionLabel = () => content().actionLabel ?? content().action?.label;
 	const actionHandler = () => content().onAction ?? content().action?.onAction;
@@ -708,14 +772,16 @@ function Toast$1(props) {
 	});
 	return createComponent(Show, {
 		get when() {
-			return memo(() => !!!isMain())() && !isExpanded();
+			return memo(() => {
+				return !isMain();
+			})() && !isExpanded();
 		},
 		get fallback() {
 			return createComponent(Toast, mergeProps(contentDomProps, rest, {
 				get toast() {
 					return local.toast;
 				},
-				get ["data-solid-spectrum-variant"]() {
+				get "data-solid-spectrum-variant"() {
 					return variant();
 				},
 				get style() {
@@ -725,7 +791,7 @@ function Toast$1(props) {
 						"view-transition-class": mainViewTransitionClass()
 					};
 				},
-				"class": (_renderProps) => [
+				class: (_renderProps) => [
 					"toast",
 					toastStyle({
 						variant: variant(),
@@ -735,46 +801,70 @@ function Toast$1(props) {
 				].filter(Boolean).join(" "),
 				get children() {
 					return [(() => {
-						var _el$12 = getNextElement(_tmpl$5), _el$13 = _el$12.firstChild, _el$19 = _el$13.firstChild, [_el$20, _co$7] = getNextMarker(_el$19.nextSibling), _el$14 = _el$20.nextSibling, _el$15 = _el$14.firstChild, [_el$16, _co$5] = getNextMarker(_el$15.nextSibling), _el$17 = _el$16.nextSibling, [_el$18, _co$6] = getNextMarker(_el$17.nextSibling), _el$21 = _el$13.nextSibling, [_el$22, _co$8] = getNextMarker(_el$21.nextSibling), _el$23 = _el$22.nextSibling, [_el$24, _co$9] = getNextMarker(_el$23.nextSibling);
-						insert(_el$13, createComponent(Show, {
-							get when() {
-								return getVariantIcon(variant());
-							},
-							children: (icon) => createComponent(CenterBaseline, { get children() {
-								return icon();
-							} })
-						}), _el$20, _co$7);
-						insert(_el$14, createComponent(Show, {
-							get when() {
-								return title();
+						var _el$18 = getNextElement(_tmpl$6);
+						var _el$26 = _el$18.firstChild;
+						var [_el$27, _el$28] = getNextMarker(_el$26.nextSibling);
+						var _el$29 = _el$27.nextSibling;
+						var [_el$30, _el$31] = getNextMarker(_el$29.nextSibling);
+						var _el$32 = _el$30.nextSibling;
+						var [_el$33, _el$34] = getNextMarker(_el$32.nextSibling);
+						insert(_el$18, createComponent(UNSTABLE_ToastContent, {
+							get "class"() {
+								return useComponentTransition() ? `${toastContent} toast-content` : toastContent;
 							},
 							get children() {
-								return createComponent(ToastTitle, { get children() {
-									return title();
-								} });
-							}
-						}), _el$16, _co$5);
-						insert(_el$14, createComponent(Show, {
-							get when() {
-								return content().description;
-							},
-							get children() {
-								return createComponent(ToastDescription, {
-									"class": toastDescription,
-									get children() {
-										return content().description;
-									}
-								});
+								return [createComponent(Show, {
+									get when() {
+										return getVariantIcon(variant());
+									},
+									children: (icon) => createComponent(CenterBaseline, { get children() {
+										return icon();
+									} })
+								}), (() => {
+									var _el$19 = getNextElement(_tmpl$5);
+									var _el$20 = _el$19.firstChild;
+									var [_el$21, _el$22] = getNextMarker(_el$20.nextSibling);
+									var _el$23 = _el$21.nextSibling;
+									var [_el$24, _el$25] = getNextMarker(_el$23.nextSibling);
+									insert(_el$19, createComponent(Show, {
+										get when() {
+											return title();
+										},
+										get children() {
+											return createComponent(ToastTitle, { get children() {
+												return title();
+											} });
+										}
+									}), _el$21, _el$22);
+									insert(_el$19, createComponent(Show, {
+										get when() {
+											return content().description;
+										},
+										get children() {
+											return createComponent(ToastDescription, {
+												class: toastDescription,
+												get children() {
+													return content().description;
+												}
+											});
+										}
+									}), _el$24, _el$25);
+									return _el$19;
+								})()];
 							}
-						}), _el$18, _co$6);
-						insert(_el$12, createComponent(Show, {
+						}), _el$27, _el$28);
+						insert(_el$18, createComponent(Show, {
 							get when() {
-								return memo(() => !!(local.canExpand && !isExpanded()))() && visibleToasts().length > 1;
+								return memo(() => {
+									return !!(local.canExpand && !isExpanded());
+								})() ? visibleToasts().length > 1 : local.canExpand && !isExpanded();
 							},
 							get children() {
 								return createComponent(ActionButton, {
 									isQuiet: true,
-									staticColor: "white",
+									get staticColor() {
+										return staticInk();
+									},
 									styles: toastExpand,
 									get UNSAFE_className() {
 										return useComponentTransition() ? "toast-expand" : void 0;
@@ -783,7 +873,9 @@ function Toast$1(props) {
 										return local.onToggleExpanded;
 									},
 									get children() {
-										return [memo(() => stringFormatter().format("toast.showAll")), createComponent(ChevronDownIcon, {
+										return [memo(() => {
+											return stringFormatter().format("toast.showAll");
+										}), createComponent(ChevronDownIcon, {
 											"aria-hidden": "true",
 											get style() {
 												return { rotate: local.placementEdge === "bottom" ? "180deg" : void 0 };
@@ -792,8 +884,8 @@ function Toast$1(props) {
 									}
 								});
 							}
-						}), _el$22, _co$8);
-						insert(_el$12, createComponent(Show, {
+						}), _el$30, _el$31);
+						insert(_el$18, createComponent(Show, {
 							get when() {
 								return actionLabel();
 							},
@@ -801,7 +893,9 @@ function Toast$1(props) {
 								return createComponent(Button$1, {
 									variant: "secondary",
 									fillStyle: "outline",
-									staticColor: "white",
+									get staticColor() {
+										return staticInk();
+									},
 									styles: toastAction,
 									get UNSAFE_className() {
 										return useComponentTransition() ? "toast-action" : void 0;
@@ -812,24 +906,20 @@ function Toast$1(props) {
 									}
 								});
 							}
-						}), _el$24, _co$9);
-						effect((_p$) => {
-							var _v$4 = toastBody({ isSingle: shouldRenderAsSingle() }), _v$5 = useComponentTransition() ? `${toastContent} toast-content` : toastContent;
-							_v$4 !== _p$.e && className(_el$12, _p$.e = _v$4);
-							_v$5 !== _p$.t && className(_el$13, _p$.t = _v$5);
-							return _p$;
-						}, {
-							e: void 0,
-							t: void 0
+						}), _el$33, _el$34);
+						effect(() => readShallow(toastBody({ isSingle: shouldRenderAsSingle() })), (_v$, _$p) => {
+							className(_el$18, _v$, _$p);
 						});
-						return _el$12;
+						return _el$18;
 					})(), createComponent(CloseButton, {
-						staticColor: "white",
+						get staticColor() {
+							return staticInk();
+						},
 						onPress: handleCloseToast,
 						get UNSAFE_className() {
 							return useComponentTransition() ? "toast-close" : void 0;
 						},
-						get ["aria-label"]() {
+						get "aria-label"() {
 							return stringFormatter().format("dialog.dismiss");
 						}
 					})];
@@ -837,34 +927,32 @@ function Toast$1(props) {
 			}));
 		},
 		get children() {
-			var _el$11 = getNextElement(_tmpl$4);
-			effect((_p$) => {
-				var _v$ = backgroundStyle(), _v$2 = `toast ${toastStyle({
-					variant: variant(),
-					isExpanded: isExpanded()
-				})}`, _v$3 = variant();
-				_p$.e = style(_el$11, _v$, _p$.e);
-				_v$2 !== _p$.t && className(_el$11, _p$.t = _v$2);
-				_v$3 !== _p$.a && setAttribute(_el$11, "data-solid-spectrum-variant", _p$.a = _v$3);
-				return _p$;
-			}, {
-				e: void 0,
-				t: void 0,
-				a: void 0
+			var _el$17 = getNextElement(_tmpl$4);
+			effect(() => {
+				return {
+					e: readShallow(backgroundStyle()),
+					t: `toast ${toastStyle({
+						variant: variant(),
+						isExpanded: isExpanded()
+					})}`,
+					a: variant()
+				};
+			}, ({ e, t, a }, _p$) => {
+				style(_el$17, e, _p$?.e);
+				className(_el$17, t, _p$?.t);
+				a !== _p$?.a && setAttribute(_el$17, "data-solid-spectrum-variant", a);
 			});
-			return _el$11;
+			return _el$17;
 		}
 	});
 }
 /**
 * Add a legacy Solid toast to the global queue.
 * Prefer ToastQueue.neutral/positive/negative/notice/info for the React Spectrum S2 API.
-*/
-function addToast$1(content, options) {
+*/ function addToast$1(content, options) {
 	return addToast(content, options);
 }
-/** Backward-compatible helper for existing Solid callers. */
-function toastSuccess(message, options) {
+/** Backward-compatible helper for existing Solid callers. */ function toastSuccess(message, options) {
 	return addToast$1({
 		title: message,
 		type: "success",
@@ -874,8 +962,7 @@ function toastSuccess(message, options) {
 		...options
 	});
 }
-/** Backward-compatible helper for existing Solid callers. */
-function toastError(message, options) {
+/** Backward-compatible helper for existing Solid callers. */ function toastError(message, options) {
 	return addToast$1({
 		title: message,
 		type: "error",
@@ -885,8 +972,7 @@ function toastError(message, options) {
 		...options
 	});
 }
-/** Backward-compatible helper for existing Solid callers. */
-function toastWarning(message, options) {
+/** Backward-compatible helper for existing Solid callers. */ function toastWarning(message, options) {
 	return addToast$1({
 		title: message,
 		type: "warning",
@@ -896,8 +982,7 @@ function toastWarning(message, options) {
 		...options
 	});
 }
-/** Backward-compatible helper for existing Solid callers. */
-function toastInfo(message, options) {
+/** Backward-compatible helper for existing Solid callers. */ function toastInfo(message, options) {
 	return addToast$1({
 		title: message,
 		type: "info",