@zag-js/toast 0.45.0 → 0.46.0

package/dist/index.mjs

@@ -1,23 +1,35 @@
 // src/toast-group.connect.ts
-import { subscribe } from "@zag-js/core";
+import { isMachine, subscribe } from "@zag-js/core";
+import { contains } from "@zag-js/dom-query";
 import { runIfFn, uuid } from "@zag-js/utils";
 
 // src/toast.anatomy.ts
 import { createAnatomy } from "@zag-js/anatomy";
-var anatomy = createAnatomy("toast").parts("group", "root", "title", "description", "closeTrigger");
+var anatomy = createAnatomy("toast").parts(
+  "group",
+  "root",
+  "ghost",
+  "title",
+  "description",
+  "actionTrigger",
+  "closeTrigger"
+);
 var parts = anatomy.build();
 
 // src/toast.dom.ts
 import { createScope } from "@zag-js/dom-query";
 var dom = createScope({
-  getGroupId: (placement) => `toast-group:${placement}`,
+  getRegionId: (placement) => `toast-group:${placement}`,
+  getRegionEl: (ctx, placement) => dom.getById(ctx, `toast-group:${placement}`),
   getRootId: (ctx) => `toast:${ctx.id}`,
+  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
   getTitleId: (ctx) => `toast:${ctx.id}:title`,
   getDescriptionId: (ctx) => `toast:${ctx.id}:description`,
   getCloseTriggerId: (ctx) => `toast${ctx.id}:close`
 });
 
 // src/toast.utils.ts
+import { MAX_Z_INDEX } from "@zag-js/dom-query";
 function getToastsByPlacement(toasts) {
   const result = {};
   for (const toast of toasts) {
@@ -32,10 +44,10 @@ var defaultTimeouts = {
   error: 5e3,
   success: 2e3,
   loading: Infinity,
-  custom: 5e3
+  DEFAULT: 5e3
 };
 function getToastDuration(duration, type) {
-  return duration ?? defaultTimeouts[type];
+  return duration ?? defaultTimeouts[type] ?? defaultTimeouts.DEFAULT;
 }
 function getGroupPlacementStyle(ctx, placement) {
   const offset = ctx.offsets;
@@ -49,8 +61,9 @@ function getGroupPlacementStyle(ctx, placement) {
     pointerEvents: ctx.count > 0 ? void 0 : "none",
     display: "flex",
     flexDirection: "column",
-    "--toast-gutter": ctx.gutter,
-    zIndex: ctx.zIndex
+    "--gap": `${ctx.gap}px`,
+    "--first-height": `${ctx.heights[0]?.height || 0}px`,
+    zIndex: MAX_Z_INDEX
   };
   let alignItems = "center";
   if (isRighty)
@@ -60,42 +73,150 @@ function getGroupPlacementStyle(ctx, placement) {
   styles.alignItems = alignItems;
   if (computedPlacement.includes("top")) {
     const offset2 = computedOffset.top;
-    styles.top = `calc(env(safe-area-inset-top, 0px) + ${offset2})`;
+    styles.top = `max(env(safe-area-inset-top, 0px), ${offset2})`;
   }
   if (computedPlacement.includes("bottom")) {
     const offset2 = computedOffset.bottom;
-    styles.bottom = `calc(env(safe-area-inset-bottom, 0px) + ${offset2})`;
+    styles.bottom = `max(env(safe-area-inset-bottom, 0px), ${offset2})`;
   }
   if (!computedPlacement.includes("left")) {
     const offset2 = computedOffset.right;
-    styles.right = `calc(env(safe-area-inset-right, 0px) + ${offset2})`;
+    styles.insetInlineEnd = `calc(env(safe-area-inset-right, 0px) + ${offset2})`;
   }
   if (!computedPlacement.includes("right")) {
     const offset2 = computedOffset.left;
-    styles.left = `calc(env(safe-area-inset-left, 0px) + ${offset2})`;
+    styles.insetInlineStart = `calc(env(safe-area-inset-left, 0px) + ${offset2})`;
+  }
+  return styles;
+}
+function getPlacementStyle(ctx, visible) {
+  const [side] = ctx.placement.split("-");
+  const sibling = !ctx.frontmost;
+  const overlap = !ctx.stacked;
+  const styles = {
+    position: "absolute",
+    pointerEvents: "auto",
+    "--opacity": "0",
+    "--remove-delay": `${ctx.removeDelay}ms`,
+    "--duration": `${ctx.type === "loading" ? Number.MAX_SAFE_INTEGER : ctx.duration}ms`,
+    "--initial-height": `${ctx.height}px`,
+    "--offset": `${ctx.offset}px`,
+    "--index": ctx.index,
+    "--z-index": ctx.zIndex,
+    "--lift-amount": "calc(var(--lift) * var(--gap))",
+    "--y": "100%",
+    "--x": "0"
+  };
+  const assign = (overrides) => Object.assign(styles, overrides);
+  if (side === "top") {
+    assign({
+      top: "0",
+      "--sign": "-1",
+      "--y": "-100%",
+      "--lift": "1"
+    });
+  } else if (side === "bottom") {
+    assign({
+      bottom: "0",
+      "--sign": "1",
+      "--y": "100%",
+      "--lift": "-1"
+    });
+  }
+  if (ctx.mounted) {
+    assign({
+      "--y": "0",
+      "--opacity": "1"
+    });
+    if (ctx.stacked) {
+      assign({
+        "--y": "calc(var(--lift) * var(--offset))",
+        "--height": "var(--initial-height)"
+      });
+    }
+  }
+  if (!visible) {
+    assign({
+      "--opacity": "0",
+      pointerEvents: "none"
+    });
+  }
+  if (sibling && overlap) {
+    assign({
+      "--base-scale": "var(--index) * 0.05 + 1",
+      "--y": "calc(var(--lift-amount) * var(--index))",
+      "--scale": "calc(-1 * var(--base-scale))",
+      "--height": "var(--first-height)"
+    });
+    if (!visible) {
+      assign({
+        "--y": "calc(var(--sign) * 40%)"
+      });
+    }
+  }
+  if (sibling && ctx.stacked && !visible) {
+    assign({
+      "--y": "calc(var(--lift) * var(--offset) + var(--lift) * -100%)"
+    });
+  }
+  if (ctx.frontmost && !visible) {
+    assign({
+      "--y": "calc(var(--lift) * -100%)"
+    });
   }
   return styles;
 }
+function getGhostBeforeStyle(ctx, visible) {
+  const styles = {
+    position: "absolute",
+    inset: "0",
+    scale: "1 2",
+    pointerEvents: visible ? "none" : "auto"
+  };
+  const assign = (overrides) => Object.assign(styles, overrides);
+  if (ctx.frontmost && !visible) {
+    assign({
+      height: "calc(var(--initial-height) + 80%)"
+    });
+  }
+  return styles;
+}
+function getGhostAfterStyle(_ctx, _visible) {
+  return {
+    position: "absolute",
+    left: "0",
+    height: "calc(var(--gap) + 2px)",
+    bottom: "100%",
+    width: "100%"
+  };
+}
 
 // src/toast-group.connect.ts
-function groupConnect(state, send, normalize) {
-  const toastsByPlacement = getToastsByPlacement(state.context.toasts);
+function groupConnect(serviceOrState, send, normalize) {
+  function getState() {
+    const result = isMachine(serviceOrState) ? serviceOrState.getState() : serviceOrState;
+    return result;
+  }
+  function getToastsByPlacementImpl() {
+    return getToastsByPlacement(getState().context.toasts);
+  }
   function isVisible(id) {
-    if (!state.context.toasts.length)
+    const toasts = getState().context.toasts;
+    if (!toasts.length)
       return false;
-    return !!state.context.toasts.find((toast) => toast.id == id);
+    return !!toasts.find((toast) => toast.id == id);
   }
   function create(options) {
     const uid = `toast:${uuid()}`;
     const id = options.id ? options.id : uid;
     if (isVisible(id))
-      return;
+      return id;
     send({ type: "ADD_TOAST", toast: { ...options, id } });
     return id;
   }
   function update(id, options) {
     if (!isVisible(id))
-      return;
+      return id;
     send({ type: "UPDATE_TOAST", id, toast: options });
     return id;
   }
@@ -116,9 +237,13 @@ function groupConnect(state, send, normalize) {
     }
   }
   return {
-    count: state.context.count,
-    toasts: state.context.toasts,
-    toastsByPlacement,
+    getCount() {
+      return getState().context.count;
+    },
+    getToasts() {
+      return getState().context.toasts;
+    },
+    getToastsByPlacement: getToastsByPlacementImpl,
     isVisible,
     create,
     update,
@@ -132,10 +257,11 @@ function groupConnect(state, send, normalize) {
       }
     },
     dismissByPlacement(placement) {
+      const toastsByPlacement = getToastsByPlacementImpl();
       const toasts = toastsByPlacement[placement];
-      if (toasts) {
-        toasts.forEach((toast) => dismiss(toast.id));
-      }
+      if (!toasts)
+        return;
+      toasts.forEach((toast) => dismiss(toast.id));
     },
     loading(options) {
       return upsert({ ...options, type: "loading" });
@@ -148,14 +274,16 @@ function groupConnect(state, send, normalize) {
     },
     promise(promise, options, shared = {}) {
       const id = upsert({ ...shared, ...options.loading, type: "loading" });
-      promise.then((response) => {
+      runIfFn(promise).then((response) => {
         const successOptions = runIfFn(options.success, response);
         upsert({ ...shared, ...successOptions, id, type: "success" });
       }).catch((error) => {
         const errorOptions = runIfFn(options.error, error);
         upsert({ ...shared, ...errorOptions, id, type: "error" });
+      }).finally(() => {
+        options.finally?.();
       });
-      return promise;
+      return id;
     },
     pause(id) {
       if (id == null) {
@@ -173,43 +301,66 @@ function groupConnect(state, send, normalize) {
     },
     getGroupProps(options) {
       const { placement, label = "Notifications" } = options;
+      const state = getState();
+      const hotkeyLabel = state.context.hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
+      const [side, align = "center"] = placement.split("-");
       return normalize.element({
         ...parts.group.attrs,
         dir: state.context.dir,
         tabIndex: -1,
-        "aria-label": `${placement} ${label}`,
-        id: dom.getGroupId(placement),
+        "aria-label": `${placement} ${label} ${hotkeyLabel}`,
+        id: dom.getRegionId(placement),
         "data-placement": placement,
+        "data-side": side,
+        "data-align": align,
         "aria-live": "polite",
         role: "region",
-        style: getGroupPlacementStyle(state.context, placement)
+        style: getGroupPlacementStyle(state.context, placement),
+        onMouseMove() {
+          send({ type: "REGION.POINTER_ENTER", placement });
+        },
+        onMouseLeave() {
+          send({ type: "REGION.POINTER_LEAVE", placement });
+        },
+        onFocus(event) {
+          send({ type: "REGION.FOCUS", target: event.relatedTarget });
+        },
+        onBlur(event) {
+          if (state.context.isFocusWithin && !contains(event.currentTarget, event.relatedTarget)) {
+            send({ type: "REGION.BLUR" });
+          }
+        }
       });
     },
     subscribe(fn) {
-      return subscribe(state.context.toasts, () => fn(state.context.toasts));
+      const state = getState();
+      return subscribe(state.context.toasts, () => {
+        const toasts = getToastsByPlacementImpl()[state.context.placement] ?? [];
+        const contexts = toasts.map((toast) => toast.getState().context);
+        fn(contexts);
+      });
     }
   };
 }
 
 // src/toast-group.machine.ts
-import { createMachine as createMachine2 } from "@zag-js/core";
-import { MAX_Z_INDEX } from "@zag-js/dom-query";
+import { createMachine as createMachine2, ref } from "@zag-js/core";
+import { trackDismissableBranch } from "@zag-js/dismissable";
+import { addDomEvent } from "@zag-js/dom-event";
 import { compact as compact2 } from "@zag-js/utils";
 
 // src/toast.machine.ts
 import { createMachine, guards } from "@zag-js/core";
-import { addDomEvent } from "@zag-js/dom-event";
-import { compact } from "@zag-js/utils";
+import { queryAll, raf } from "@zag-js/dom-query";
+import { compact, warn } from "@zag-js/utils";
 var { not, and, or } = guards;
-function createToastMachine(options = {}) {
-  const { type = "info", duration, id = "toast", placement = "bottom", removeDelay = 0, ...restProps } = options;
+function createToastMachine(options) {
+  const { type = "info", duration, id = "1", placement = "bottom", removeDelay = 200, ...restProps } = options;
   const ctx = compact(restProps);
   const computedDuration = getToastDuration(duration, type);
   return createMachine(
     {
       id,
-      entry: "invokeOnOpen",
-      initial: type === "loading" ? "persist" : "active",
       context: {
         id,
         type,
@@ -218,82 +369,112 @@ function createToastMachine(options = {}) {
         removeDelay,
         createdAt: Date.now(),
         placement,
-        ...ctx
+        ...ctx,
+        height: 0,
+        offset: 0,
+        frontmost: false,
+        mounted: false,
+        index: -1,
+        zIndex: 0
       },
+      initial: type === "loading" ? "visible:persist" : "visible",
       on: {
         UPDATE: [
           {
             guard: and("hasTypeChanged", "isChangingToLoading"),
-            target: "persist",
-            actions: ["setContext", "invokeOnUpdate"]
+            target: "visible:persist",
+            actions: ["setContext"]
           },
           {
             guard: or("hasDurationChanged", "hasTypeChanged"),
-            target: "active:temp",
-            actions: ["setContext", "invokeOnUpdate"]
+            target: "visible:updating",
+            actions: ["setContext"]
           },
           {
-            actions: ["setContext", "invokeOnUpdate"]
+            actions: ["setContext"]
           }
-        ]
+        ],
+        MEASURE: {
+          actions: ["measureHeight"]
+        }
       },
+      entry: ["invokeOnVisible"],
+      activities: ["trackHeight"],
       states: {
-        "active:temp": {
+        "visible:updating": {
           tags: ["visible", "updating"],
           after: {
-            0: "active"
+            0: "visible"
           }
         },
-        persist: {
+        "visible:persist": {
           tags: ["visible", "paused"],
-          activities: "trackDocumentVisibility",
           on: {
             RESUME: {
               guard: not("isLoadingType"),
-              target: "active",
+              target: "visible",
               actions: ["setCreatedAt"]
             },
             DISMISS: "dismissing"
           }
         },
-        active: {
+        visible: {
           tags: ["visible"],
-          activities: "trackDocumentVisibility",
           after: {
             VISIBLE_DURATION: "dismissing"
           },
           on: {
             DISMISS: "dismissing",
             PAUSE: {
-              target: "persist",
+              target: "visible:persist",
               actions: "setRemainingDuration"
             }
           }
         },
         dismissing: {
-          entry: "invokeOnClosing",
+          entry: "invokeOnDismiss",
           after: {
             REMOVE_DELAY: {
-              target: "inactive",
+              target: "unmounted",
               actions: "notifyParentToRemove"
             }
           }
         },
-        inactive: {
-          entry: "invokeOnClose",
+        unmounted: {
+          entry: "invokeOnUnmount",
           type: "final"
         }
       }
     },
     {
       activities: {
-        trackDocumentVisibility(ctx2, _evt, { send }) {
-          if (!ctx2.pauseOnPageIdle)
-            return;
-          const doc = dom.getDoc(ctx2);
-          return addDomEvent(doc, "visibilitychange", () => {
-            send(doc.visibilityState === "hidden" ? "PAUSE" : "RESUME");
+        trackHeight(ctx2, _evt, { self }) {
+          let cleanup;
+          raf(() => {
+            const rootEl = dom.getRootEl(ctx2);
+            if (!rootEl)
+              return;
+            ctx2.mounted = true;
+            const ghosts = queryAll(rootEl, "[data-part=ghost]");
+            warn(
+              ghosts.length !== 2,
+              "[toast] No ghost element found in toast. Render the `ghostBefore` and `ghostAfter` elements"
+            );
+            const syncHeight = () => {
+              const originalHeight = rootEl.style.height;
+              rootEl.style.height = "auto";
+              const newHeight = rootEl.offsetHeight;
+              rootEl.style.height = originalHeight;
+              ctx2.height = newHeight;
+              self.sendParent({ type: "UPDATE_HEIGHT", id: self.id, height: newHeight, placement: ctx2.placement });
+            };
+            syncHeight();
+            const win = dom.getWin(ctx2);
+            const observer = new win.MutationObserver(syncHeight);
+            observer.observe(rootEl, { childList: true, subtree: true, characterData: true });
+            cleanup = () => observer.disconnect();
           });
+          return () => cleanup?.();
         }
       },
       guards: {
@@ -307,6 +488,20 @@ function createToastMachine(options = {}) {
         REMOVE_DELAY: (ctx2) => ctx2.removeDelay
       },
       actions: {
+        measureHeight(ctx2, _evt, { self }) {
+          raf(() => {
+            const rootEl = dom.getRootEl(ctx2);
+            if (!rootEl)
+              return;
+            ctx2.mounted = true;
+            const originalHeight = rootEl.style.height;
+            rootEl.style.height = "auto";
+            const newHeight = rootEl.offsetHeight;
+            rootEl.style.height = originalHeight;
+            ctx2.height = newHeight;
+            self.sendParent({ type: "UPDATE_HEIGHT", id: self.id, height: newHeight, placement: ctx2.placement });
+          });
+        },
         setRemainingDuration(ctx2) {
           ctx2.remaining -= Date.now() - ctx2.createdAt;
         },
@@ -316,22 +511,23 @@ function createToastMachine(options = {}) {
         notifyParentToRemove(_ctx, _evt, { self }) {
           self.sendParent({ type: "REMOVE_TOAST", id: self.id });
         },
-        invokeOnClosing(ctx2) {
-          ctx2.onClosing?.();
+        invokeOnDismiss(ctx2) {
+          ctx2.onStatusChange?.({ status: "dismissing" });
         },
-        invokeOnClose(ctx2) {
-          ctx2.onClose?.();
+        invokeOnUnmount(ctx2) {
+          ctx2.onStatusChange?.({ status: "unmounted" });
         },
-        invokeOnOpen(ctx2) {
-          ctx2.onOpen?.();
-        },
-        invokeOnUpdate(ctx2) {
-          ctx2.onUpdate?.();
+        invokeOnVisible(ctx2) {
+          ctx2.onStatusChange?.({ status: "visible" });
         },
         setContext(ctx2, evt) {
           const { duration: duration2, type: type2 } = evt.toast;
-          const time = getToastDuration(duration2, type2);
-          Object.assign(ctx2, { ...evt.toast, duration: time, remaining: time });
+          if (duration2 == null && type2 == null) {
+            Object.assign(ctx2, evt.toast);
+          } else {
+            const time = getToastDuration(duration2, type2);
+            Object.assign(ctx2, { ...evt.toast, duration: time, remaining: time });
+          }
         }
       }
     }
@@ -341,104 +537,307 @@ function createToastMachine(options = {}) {
 // src/toast-group.machine.ts
 function groupMachine(userContext) {
   const ctx = compact2(userContext);
-  return createMachine2({
-    id: "toaster",
-    initial: "active",
-    context: {
-      dir: "ltr",
-      max: Number.MAX_SAFE_INTEGER,
-      toasts: [],
-      gutter: "1rem",
-      zIndex: MAX_Z_INDEX,
-      pauseOnPageIdle: false,
-      pauseOnInteraction: true,
-      offsets: { left: "0px", right: "0px", top: "0px", bottom: "0px" },
-      ...ctx
-    },
-    computed: {
-      count: (ctx2) => ctx2.toasts.length
-    },
-    on: {
-      PAUSE_TOAST: {
-        actions: (_ctx, evt, { self }) => {
-          self.sendChild("PAUSE", evt.id);
-        }
+  return createMachine2(
+    {
+      id: "toaster",
+      initial: ctx.overlap ? "overlap" : "stack",
+      context: {
+        dir: "ltr",
+        max: Number.MAX_SAFE_INTEGER,
+        toasts: [],
+        gap: 16,
+        pauseOnPageIdle: false,
+        hotkey: ["altKey", "KeyT"],
+        offsets: "1rem",
+        placement: "bottom",
+        removeDelay: 200,
+        ...ctx,
+        lastFocusedEl: null,
+        isFocusWithin: false,
+        heights: []
       },
-      PAUSE_ALL: {
-        actions: (ctx2) => {
-          ctx2.toasts.forEach((toast) => toast.send("PAUSE"));
-        }
+      computed: {
+        count: (ctx2) => ctx2.toasts.length
       },
-      RESUME_TOAST: {
-        actions: (_ctx, evt, { self }) => {
-          self.sendChild("RESUME", evt.id);
+      activities: ["trackDocumentVisibility", "trackHotKeyPress"],
+      watch: {
+        toasts: ["collapsedIfEmpty", "setDismissableBranch"]
+      },
+      exit: ["removeToasts", "clearDismissableBranch", "clearLastFocusedEl"],
+      on: {
+        PAUSE_TOAST: {
+          actions: ["pauseToast"]
+        },
+        PAUSE_ALL: {
+          actions: ["pauseToasts"]
+        },
+        RESUME_TOAST: {
+          actions: ["resumeToast"]
+        },
+        RESUME_ALL: {
+          actions: ["resumeToasts"]
+        },
+        ADD_TOAST: {
+          guard: "isWithinRange",
+          actions: ["createToast", "syncToastIndex"]
+        },
+        UPDATE_TOAST: {
+          actions: ["updateToast"]
+        },
+        DISMISS_TOAST: {
+          actions: ["dismissToast"]
+        },
+        DISMISS_ALL: {
+          actions: ["dismissToasts"]
+        },
+        REMOVE_TOAST: {
+          actions: ["removeToast", "syncToastIndex", "syncToastOffset"]
+        },
+        REMOVE_ALL: {
+          actions: ["removeToasts"]
+        },
+        UPDATE_HEIGHT: {
+          actions: ["syncHeights", "syncToastOffset"]
+        },
+        "DOC.HOTKEY": {
+          actions: ["focusRegionEl"]
+        },
+        "REGION.BLUR": [
+          {
+            guard: "isOverlapping",
+            target: "overlap",
+            actions: ["resumeToasts", "restoreLastFocusedEl"]
+          },
+          {
+            actions: ["resumeToasts", "restoreLastFocusedEl"]
+          }
+        ]
+      },
+      states: {
+        stack: {
+          entry: ["expandToasts"],
+          on: {
+            "REGION.POINTER_LEAVE": [
+              {
+                guard: "isOverlapping",
+                target: "overlap",
+                actions: ["resumeToasts"]
+              },
+              {
+                actions: ["resumeToasts"]
+              }
+            ],
+            "REGION.OVERLAP": {
+              target: "overlap"
+            },
+            "REGION.FOCUS": {
+              actions: ["setLastFocusedEl", "pauseToasts"]
+            },
+            "REGION.POINTER_ENTER": {
+              actions: ["pauseToasts"]
+            }
+          }
+        },
+        overlap: {
+          entry: ["collapseToasts"],
+          on: {
+            "REGION.STACK": {
+              target: "stack"
+            },
+            "REGION.POINTER_ENTER": {
+              target: "stack",
+              actions: ["pauseToasts"]
+            },
+            "REGION.FOCUS": {
+              target: "stack",
+              actions: ["setLastFocusedEl", "pauseToasts"]
+            }
+          }
         }
+      }
+    },
+    {
+      guards: {
+        isWithinRange: (ctx2) => ctx2.toasts.length < ctx2.max,
+        isOverlapping: (ctx2) => !!ctx2.overlap
       },
-      RESUME_ALL: {
-        actions: (ctx2) => {
-          ctx2.toasts.forEach((toast) => toast.send("RESUME"));
+      activities: {
+        trackHotKeyPress(ctx2, _evt, { send }) {
+          const handleKeyDown = (event) => {
+            const isHotkeyPressed = ctx2.hotkey.every((key) => event[key] || event.code === key);
+            if (!isHotkeyPressed)
+              return;
+            send({ type: "DOC.HOTKEY" });
+          };
+          return addDomEvent(document, "keydown", handleKeyDown, { capture: true });
+        },
+        trackDocumentVisibility(ctx2, _evt, { send }) {
+          if (!ctx2.pauseOnPageIdle)
+            return;
+          const doc = dom.getDoc(ctx2);
+          return addDomEvent(doc, "visibilitychange", () => {
+            send(doc.visibilityState === "hidden" ? "PAUSE_ALL" : "RESUME_ALL");
+          });
         }
       },
-      ADD_TOAST: {
-        guard: (ctx2) => ctx2.toasts.length < ctx2.max,
-        actions: (ctx2, evt, { self }) => {
+      actions: {
+        setDismissableBranch(ctx2) {
+          const toastsByPlacement = getToastsByPlacement(ctx2.toasts);
+          const currentToasts = toastsByPlacement[ctx2.placement] ?? [];
+          const hasToasts = currentToasts.length > 0;
+          if (!hasToasts) {
+            ctx2._cleanup?.();
+            return;
+          }
+          if (hasToasts && ctx2._cleanup) {
+            return;
+          }
+          const groupEl = () => dom.getRegionEl(ctx2, ctx2.placement);
+          ctx2._cleanup = trackDismissableBranch(groupEl, { defer: true });
+        },
+        clearDismissableBranch(ctx2) {
+          ctx2._cleanup?.();
+        },
+        focusRegionEl(ctx2) {
+          queueMicrotask(() => {
+            dom.getRegionEl(ctx2, ctx2.placement)?.focus();
+          });
+        },
+        expandToasts(ctx2) {
+          each(ctx2, (toast) => {
+            toast.state.context.stacked = true;
+          });
+        },
+        collapseToasts(ctx2) {
+          each(ctx2, (toast) => {
+            toast.state.context.stacked = false;
+          });
+        },
+        collapsedIfEmpty(ctx2, _evt, { send }) {
+          if (!ctx2.overlap || ctx2.toasts.length > 1)
+            return;
+          send("REGION.OVERLAP");
+        },
+        pauseToast(_ctx, evt, { self }) {
+          self.sendChild("PAUSE", evt.id);
+        },
+        pauseToasts(ctx2) {
+          ctx2.toasts.forEach((toast) => toast.send("PAUSE"));
+        },
+        resumeToast(_ctx, evt, { self }) {
+          self.sendChild("RESUME", evt.id);
+        },
+        resumeToasts(ctx2) {
+          ctx2.toasts.forEach((toast) => toast.send("RESUME"));
+        },
+        measureToasts(ctx2) {
+          ctx2.toasts.forEach((toast) => toast.send("MEASURE"));
+        },
+        createToast(ctx2, evt, { self, getState }) {
           const options = {
             placement: ctx2.placement,
             duration: ctx2.duration,
             removeDelay: ctx2.removeDelay,
-            render: ctx2.render,
             ...evt.toast,
-            pauseOnPageIdle: ctx2.pauseOnPageIdle,
-            pauseOnInteraction: ctx2.pauseOnInteraction,
             dir: ctx2.dir,
-            getRootNode: ctx2.getRootNode
+            getRootNode: ctx2.getRootNode,
+            stacked: getState().matches("stack")
           };
           const toast = createToastMachine(options);
           const actor = self.spawn(toast);
-          ctx2.toasts.push(actor);
-        }
-      },
-      UPDATE_TOAST: {
-        actions: (_ctx, evt, { self }) => {
+          ctx2.toasts = [actor, ...ctx2.toasts];
+        },
+        updateToast(_ctx, evt, { self }) {
           self.sendChild({ type: "UPDATE", toast: evt.toast }, evt.id);
-        }
-      },
-      DISMISS_TOAST: {
-        actions: (_ctx, evt, { self }) => {
+        },
+        dismissToast(_ctx, evt, { self }) {
           self.sendChild("DISMISS", evt.id);
-        }
-      },
-      DISMISS_ALL: {
-        actions: (ctx2) => {
+        },
+        dismissToasts(ctx2) {
           ctx2.toasts.forEach((toast) => toast.send("DISMISS"));
-        }
-      },
-      REMOVE_TOAST: {
-        actions: (ctx2, evt, { self }) => {
+        },
+        removeToast(ctx2, evt, { self }) {
           self.stopChild(evt.id);
-          const index = ctx2.toasts.findIndex((toast) => toast.id === evt.id);
-          ctx2.toasts.splice(index, 1);
-        }
-      },
-      REMOVE_ALL: {
-        actions: (ctx2, _evt, { self }) => {
+          ctx2.toasts = ctx2.toasts.filter((toast) => toast.id !== evt.id);
+          ctx2.heights = ctx2.heights.filter((height) => height.id !== evt.id);
+        },
+        removeToasts(ctx2, _evt, { self }) {
           ctx2.toasts.forEach((toast) => self.stopChild(toast.id));
-          while (ctx2.toasts.length)
-            ctx2.toasts.pop();
+          ctx2.toasts = [];
+          ctx2.heights = [];
+        },
+        syncHeights(ctx2, evt) {
+          const existing = ctx2.heights.find((height) => height.id === evt.id);
+          if (existing) {
+            existing.height = evt.height;
+            existing.placement = evt.placement;
+          } else {
+            const newHeight = { id: evt.id, height: evt.height, placement: evt.placement };
+            ctx2.heights = [newHeight, ...ctx2.heights];
+          }
+        },
+        syncToastIndex(ctx2) {
+          each(ctx2, (toast, index, toasts) => {
+            toast.state.context.index = index;
+            toast.state.context.frontmost = index === 0;
+            toast.state.context.zIndex = toasts.length - index;
+          });
+        },
+        syncToastOffset(ctx2, evt) {
+          const placement = evt.placement ?? ctx2.placement;
+          each({ ...ctx2, placement }, (toast) => {
+            const heightIndex = Math.max(
+              ctx2.heights.findIndex((height) => height.id === toast.id),
+              0
+            );
+            const toastsHeightBefore = ctx2.heights.reduce((prev, curr, reducerIndex) => {
+              if (reducerIndex >= heightIndex)
+                return prev;
+              return prev + curr.height;
+            }, 0);
+            toast.state.context.offset = heightIndex * ctx2.gap + toastsHeightBefore;
+          });
+        },
+        setLastFocusedEl(ctx2, evt) {
+          if (ctx2.isFocusWithin || !evt.target)
+            return;
+          ctx2.isFocusWithin = true;
+          ctx2.lastFocusedEl = ref(evt.target);
+        },
+        restoreLastFocusedEl(ctx2) {
+          ctx2.isFocusWithin = false;
+          if (!ctx2.lastFocusedEl)
+            return;
+          ctx2.lastFocusedEl.focus({ preventScroll: true });
+          ctx2.lastFocusedEl = null;
+        },
+        clearLastFocusedEl(ctx2) {
+          if (!ctx2.lastFocusedEl)
+            return;
+          ctx2.lastFocusedEl.focus({ preventScroll: true });
+          ctx2.lastFocusedEl = null;
+          ctx2.isFocusWithin = false;
         }
       }
     }
-  });
+  );
+}
+function each(ctx, fn) {
+  const toastsByPlacement = getToastsByPlacement(ctx.toasts);
+  const currentToasts = toastsByPlacement[ctx.placement] ?? [];
+  currentToasts.forEach(fn);
 }
 
 // src/toast.connect.ts
+import { dataAttr } from "@zag-js/dom-query";
 function connect(state, send, normalize) {
   const isVisible = state.hasTag("visible");
   const isPaused = state.hasTag("paused");
-  const pauseOnInteraction = state.context.pauseOnInteraction;
   const placement = state.context.placement;
+  const type = state.context.type;
+  const [side, align = "center"] = placement.split("-");
   return {
-    type: state.context.type,
+    type,
     title: state.context.title,
     description: state.context.description,
     placement,
@@ -459,45 +858,39 @@ function connect(state, send, normalize) {
       dir: state.context.dir,
       id: dom.getRootId(state.context),
       "data-state": isVisible ? "open" : "closed",
-      "data-type": state.context.type,
+      "data-type": type,
       "data-placement": placement,
+      "data-align": align,
+      "data-side": side,
+      "data-mounted": dataAttr(state.context.mounted),
+      "data-paused": dataAttr(isPaused),
+      "data-first": dataAttr(state.context.frontmost),
+      "data-sibling": dataAttr(!state.context.frontmost),
+      "data-stack": dataAttr(state.context.stacked),
+      "data-overlap": dataAttr(!state.context.stacked),
       role: "status",
       "aria-atomic": "true",
       tabIndex: 0,
-      style: {
-        position: "relative",
-        pointerEvents: "auto",
-        margin: "calc(var(--toast-gutter) / 2)",
-        "--remove-delay": `${state.context.removeDelay}ms`,
-        "--duration": `${state.context.duration}ms`
-      },
+      style: getPlacementStyle(state.context, isVisible),
       onKeyDown(event) {
         if (event.key == "Escape") {
           send("DISMISS");
           event.preventDefault();
         }
-      },
-      onFocus() {
-        if (pauseOnInteraction) {
-          send("PAUSE");
-        }
-      },
-      onBlur() {
-        if (pauseOnInteraction) {
-          send("RESUME");
-        }
-      },
-      onPointerEnter() {
-        if (pauseOnInteraction) {
-          send("PAUSE");
-        }
-      },
-      onPointerLeave() {
-        if (pauseOnInteraction) {
-          send("RESUME");
-        }
       }
     }),
+    /* Leave a ghost div to avoid setting hover to false when transitioning out */
+    ghostBeforeProps: normalize.element({
+      ...parts.ghost.attrs,
+      "data-type": "before",
+      style: getGhostBeforeStyle(state.context, isVisible)
+    }),
+    /* Needed to avoid setting hover to false when in between toasts */
+    ghostAfterProps: normalize.element({
+      ...parts.ghost.attrs,
+      "data-type": "after",
+      style: getGhostAfterStyle(state.context, isVisible)
+    }),
     titleProps: normalize.element({
       ...parts.title.attrs,
       id: dom.getTitleId(state.context)
@@ -506,6 +899,13 @@ function connect(state, send, normalize) {
       ...parts.description.attrs,
       id: dom.getDescriptionId(state.context)
     }),
+    actionTriggerProps: normalize.button({
+      ...parts.actionTrigger.attrs,
+      type: "button",
+      onClick() {
+        send("DISMISS");
+      }
+    }),
     closeTriggerProps: normalize.button({
       id: dom.getCloseTriggerId(state.context),
       ...parts.closeTrigger.attrs,