[toast] Support variable height stacking

docs/reference/generated/toast-content.json

@@ -0,0 +1,26 @@
+{
+  "name": "ToastContent",
+  "description": "A container for the contents of a toast.\nRenders a `<div>` element.",
+  "props": {
+    "className": {
+      "type": "string | ((state: Toast.Content.State) => string)",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "ReactElement | ((props: HTMLProps, state: Toast.Content.State) => ReactElement)",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
+      "detailedType": "| ReactElement\n| ((\n    props: HTMLProps,\n    state: Toast.Content.State,\n  ) => ReactElement)"
+    }
+  },
+  "dataAttributes": {
+    "data-behind": {
+      "description": "Present when the toast is behind the frontmost toast in the stack.",
+      "type": "boolean"
+    },
+    "data-expanded": {
+      "description": "Present when the toast viewport is expanded.",
+      "type": "boolean"
+    }
+  },
+  "cssVariables": {}
+}

docs/reference/generated/toast-root.json

@@ -53,6 +53,10 @@
     }
   },
   "cssVariables": {
+    "--toast-height": {
+      "description": "Indicates the measured natural height of the toast in pixels.",
+      "type": "number"
+    },
     "--toast-index": {
       "description": "Indicates the index of the toast in the list.",
       "type": "number"

docs/reference/generated/toast-viewport.json

@@ -18,5 +18,10 @@
       "type": "boolean"
     }
   },
-  "cssVariables": {}
+  "cssVariables": {
+    "--toast-frontmost-height": {
+      "description": "Indicates the height of the frontmost toast.",
+      "type": "number"
+    }
+  }
 }

docs/src/app/(private)/experiments/toast.module.css

@@ -55,6 +55,19 @@
   }
 }
 
+.content {
+  overflow: hidden;
+  transition: opacity 0.25s;
+
+  &[data-behind] {
+    opacity: 0;
+  }
+
+  &[data-expanded] {
+    opacity: 1;
+  }
+}
+
 .title {
   font-weight: 600;
   margin-bottom: 4px;

docs/src/app/(private)/experiments/toast.tsx

@@ -83,16 +83,18 @@ function Toasts() {
   const { toasts } = Toast.useToastManager();
   return toasts.map((toast) => (
     <Toast.Root key={toast.id} toast={toast} className={styles.root}>
-      <Toast.Title />
-      <Toast.Description />
-      {toast.type === 'undo' && (
-        <button className={styles.button} type="button" onClick={() => alert('Action undone')}>
-          Undo
-        </button>
-      )}
-      <Toast.Close className={styles.close} aria-label="Close">
-        x
-      </Toast.Close>
+      <Toast.Content className={styles.content}>
+        <Toast.Title />
+        <Toast.Description />
+        {toast.type === 'undo' && (
+          <button className={styles.button} type="button" onClick={() => alert('Action undone')}>
+            Undo
+          </button>
+        )}
+        <Toast.Close className={styles.close} aria-label="Close">
+          x
+        </Toast.Close>
+      </Toast.Content>
     </Toast.Root>
   ));
 }

docs/src/app/(public)/(content)/react/components/toast/demos/custom/css-modules/index.module.css

@@ -52,6 +52,7 @@
 
 .Toast {
   --gap: 0.75rem;
+  --peek: 0.75rem;
   --offset-y: calc(
     var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) +
       var(--toast-swipe-movement-y)
@@ -69,26 +70,30 @@
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   background-clip: padding-box;
   border-radius: 0.5rem;
+  transform-origin: bottom center;
   bottom: 0;
   left: auto;
   margin-right: 0;
   -webkit-user-select: none;
   user-select: none;
   transition:
     transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
-    opacity 0.5s;
+    opacity 0.5s,
+    height 0.25s;
   cursor: default;
   z-index: calc(1000 - var(--toast-index));
+  height: var(--toast-frontmost-height, var(--toast-height));
   transform: translateX(var(--toast-swipe-movement-x))
-    translateY(calc(var(--toast-swipe-movement-y) + (min(var(--toast-index), 10) * -20%)))
-    scale(calc(max(0, 1 - (var(--toast-index) * 0.1))));
+    translateY(calc(var(--toast-swipe-movement-y) - (var(--toast-index) * var(--peek))))
+    scaleX(calc(max(0, 1 - (var(--toast-index) * 0.1))));
 
   &::after {
     top: 100%;
   }
 
   &[data-expanded] {
     transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--offset-y));
+    height: var(--toast-height);
   }
 
   &[data-starting-style],
@@ -126,6 +131,19 @@
   }
 }
 
+.Content {
+  overflow: hidden;
+  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
+
+  &[data-behind] {
+    opacity: 0;
+  }
+
+  &[data-expanded] {
+    opacity: 1;
+  }
+}
+
 .Title {
   font-weight: 500;
   font-size: 0.975rem;

docs/src/app/(public)/(content)/react/components/toast/demos/custom/css-modules/index.tsx

@@ -51,15 +51,19 @@ function ToastList() {
   const { toasts } = Toast.useToastManager();
   return toasts.map((toast) => (
     <Toast.Root key={toast.id} toast={toast} className={styles.Toast}>
-      <Toast.Title className={styles.Title}>{toast.title}</Toast.Title>
-      {isCustomToast(toast) && toast.data ? (
-        <Toast.Description>`data.userId` is {toast.data.userId}</Toast.Description>
-      ) : (
-        <Toast.Description />
-      )}
-      <Toast.Close className={styles.Close} aria-label="Close">
-        <XIcon className={styles.Icon} />
-      </Toast.Close>
+      <Toast.Content className={styles.Content}>
+        <Toast.Title className={styles.Title}>{toast.title}</Toast.Title>
+        {isCustomToast(toast) && toast.data ? (
+          <Toast.Description className={styles.Description}>
+            `data.userId` is {toast.data.userId}
+          </Toast.Description>
+        ) : (
+          <Toast.Description className={styles.Description} />
+        )}
+        <Toast.Close className={styles.Close} aria-label="Close">
+          <XIcon className={styles.Icon} />
+        </Toast.Close>
+      </Toast.Content>
     </Toast.Root>
   ));
 }

docs/src/app/(public)/(content)/react/components/toast/demos/hero/css-modules/index.module.css

@@ -52,6 +52,7 @@
 
 .Toast {
   --gap: 0.75rem;
+  --peek: 0.75rem;
   --offset-y: calc(
     var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) +
       var(--toast-swipe-movement-y)
@@ -69,26 +70,30 @@
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   background-clip: padding-box;
   border-radius: 0.5rem;
+  transform-origin: bottom center;
   bottom: 0;
   left: auto;
   margin-right: 0;
   -webkit-user-select: none;
   user-select: none;
   transition:
     transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
-    opacity 0.5s;
+    opacity 0.5s,
+    height 0.25s;
   cursor: default;
   z-index: calc(1000 - var(--toast-index));
+  height: var(--toast-frontmost-height, var(--toast-height));
   transform: translateX(var(--toast-swipe-movement-x))
-    translateY(calc(var(--toast-swipe-movement-y) + (min(var(--toast-index), 10) * -20%)))
-    scale(calc(max(0, 1 - (var(--toast-index) * 0.1))));
+    translateY(calc(var(--toast-swipe-movement-y) - (var(--toast-index) * var(--peek))))
+    scaleX(calc(max(0, 1 - (var(--toast-index) * 0.1))));
 
   &::after {
     top: 100%;
   }
 
   &[data-expanded] {
     transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--offset-y));
+    height: var(--toast-height);
   }
 
   &[data-starting-style],
@@ -126,6 +131,19 @@
   }
 }
 
+.Content {
+  overflow: hidden;
+  transition: opacity 0.25s;
+
+  &[data-behind] {
+    opacity: 0;
+  }
+
+  &[data-expanded] {
+    opacity: 1;
+  }
+}
+
 .Title {
   font-weight: 500;
   font-size: 0.975rem;

docs/src/app/(public)/(content)/react/components/toast/demos/hero/css-modules/index.tsx

@@ -39,11 +39,13 @@ function ToastList() {
   const { toasts } = Toast.useToastManager();
   return toasts.map((toast) => (
     <Toast.Root key={toast.id} toast={toast} className={styles.Toast}>
-      <Toast.Title className={styles.Title} />
-      <Toast.Description className={styles.Description} />
-      <Toast.Close className={styles.Close} aria-label="Close">
-        <XIcon className={styles.Icon} />
-      </Toast.Close>
+      <Toast.Content className={styles.Content}>
+        <Toast.Title className={styles.Title} />
+        <Toast.Description className={styles.Description} />
+        <Toast.Close className={styles.Close} aria-label="Close">
+          <XIcon className={styles.Icon} />
+        </Toast.Close>
+      </Toast.Content>
     </Toast.Root>
   ));
 }

docs/src/app/(public)/(content)/react/components/toast/demos/hero/tailwind/index.tsx

@@ -44,21 +44,18 @@ function ToastList() {
     <Toast.Root
       key={toast.id}
       toast={toast}
-      className="absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+calc(min(var(--toast-index),10)*-15px)))_scale(calc(max(0,1-(var(--toast-index)*0.1))))] rounded-lg border border-gray-200 bg-gray-50 bg-clip-padding p-4 shadow-lg transition-all [transition-property:opacity,transform] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] select-none after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]"
-      style={{
-        ['--gap' as string]: '1rem',
-        ['--offset-y' as string]:
-          'calc(var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y))',
-      }}
+      className="[--gap:0.75rem] [--peek:0.75rem] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 w-full origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))))_scaleX(calc(max(0,1-(var(--toast-index)*0.1))))] rounded-lg border border-gray-200 bg-gray-50 bg-clip-padding p-4 shadow-lg select-none after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] h-[var(--toast-frontmost-height,var(--toast-height))] data-[expanded]:h-[var(--toast-height)] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.25s]"
     >
-      <Toast.Title className="text-[0.975rem] leading-5 font-medium" />
-      <Toast.Description className="text-[0.925rem] leading-5 text-gray-700" />
-      <Toast.Close
-        className="absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded border-none bg-transparent text-gray-500 hover:bg-gray-100 hover:text-gray-700"
-        aria-label="Close"
-      >
-        <XIcon className="h-4 w-4" />
-      </Toast.Close>
+      <Toast.Content className="overflow-hidden transition-opacity [transition-duration:250ms] data-[behind]:pointer-events-none data-[behind]:opacity-0 data-[expanded]:pointer-events-auto data-[expanded]:opacity-100">
+        <Toast.Title className="text-[0.975rem] leading-5 font-medium" />
+        <Toast.Description className="text-[0.925rem] leading-5 text-gray-700" />
+        <Toast.Close
+          className="absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded border-none bg-transparent text-gray-500 hover:bg-gray-100 hover:text-gray-700"
+          aria-label="Close"
+        >
+          <XIcon className="h-4 w-4" />
+        </Toast.Close>
+      </Toast.Content>
     </Toast.Root>
   ));
 }

docs/src/app/(public)/(content)/react/components/toast/demos/position/css-modules/index.module.css

@@ -47,6 +47,7 @@
 
 .Toast {
   --gap: 0.75rem;
+  --peek: 0.75rem;
   --offset-y: calc(
     var(--toast-offset-y) + (var(--toast-index) * var(--gap)) + var(--toast-swipe-movement-y)
   );
@@ -59,10 +60,11 @@
   color: var(--color-gray-900);
   border: 1px solid var(--color-gray-200);
   padding: 1rem;
-  width: 300px;
+  width: 100%;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   background-clip: padding-box;
   border-radius: 0.5rem;
+  transform-origin: top center;
   top: 0;
   left: 0;
   right: 0;
@@ -72,19 +74,22 @@
   user-select: none;
   transition:
     transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
-    opacity 0.5s;
+    opacity 0.5s,
+    height 0.25s;
   cursor: default;
   z-index: calc(1000 - var(--toast-index));
+  height: var(--toast-frontmost-height, var(--toast-height));
   transform: translateX(var(--toast-swipe-movement-x))
-    translateY(calc(var(--toast-swipe-movement-y) + (min(var(--toast-index), 10) * 20%)))
-    scale(calc(max(0, 1 - (var(--toast-index) * 0.1))));
+    translateY(calc(var(--toast-swipe-movement-y) + (var(--toast-index) * var(--peek))))
+    scaleX(calc(max(0, 1 - (var(--toast-index) * 0.1))));
 
   &::after {
     bottom: 100%;
   }
 
   &[data-expanded] {
-    transform: translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--offset-y)));
+    transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--offset-y));
+    height: var(--toast-height);
   }
 
   &[data-starting-style],
@@ -122,6 +127,19 @@
   }
 }
 
+.Content {
+  overflow: hidden;
+  transition: opacity 0.25s;
+
+  &[data-behind] {
+    opacity: 0;
+  }
+
+  &[data-expanded] {
+    opacity: 1;
+  }
+}
+
 .Title {
   font-weight: 500;
   font-size: 0.975rem;

docs/src/app/(public)/(content)/react/components/toast/demos/position/css-modules/index.tsx

@@ -39,11 +39,13 @@ function ToastList() {
   const { toasts } = Toast.useToastManager();
   return toasts.map((toast) => (
     <Toast.Root key={toast.id} toast={toast} swipeDirection="up" className={styles.Toast}>
-      <Toast.Title className={styles.Title} />
-      <Toast.Description className={styles.Description} />
-      <Toast.Close className={styles.Close} aria-label="Close">
-        <XIcon className={styles.Icon} />
-      </Toast.Close>
+      <Toast.Content className={styles.Content}>
+        <Toast.Title className={styles.Title} />
+        <Toast.Description className={styles.Description} />
+        <Toast.Close className={styles.Close} aria-label="Close">
+          <XIcon className={styles.Icon} />
+        </Toast.Close>
+      </Toast.Content>
     </Toast.Root>
   ));
 }