@base-ui/react 1.6.0 → 1.8.0

package/toast/root/ToastRoot.mjs

@@ -13,15 +13,17 @@ import { transitionStatusMapping } from "../../internals/stateAttributesMapping.
 import { useToastProviderContext } from "../provider/ToastProviderContext.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.mjs";
-import { ToastRootCssVars } from "./ToastRootCssVars.mjs";
 import { BASE_UI_SWIPE_IGNORE_SELECTOR, LEGACY_SWIPE_IGNORE_SELECTOR } from "../../internals/constants.mjs";
-import { getDisplacement, getElementTransform } from "../../utils/useSwipeDismiss.mjs";
+import { getDisplacement } from "../../utils/useSwipeDismiss.mjs";
+import { getElementTransform } from "../../utils/getElementTransform.mjs";
+import * as ToastRootCssVars from "./ToastRootCssVars.mjs";
+import * as ToastRootDataAttributes from "./ToastRootDataAttributes.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
-const stateAttributesMapping = {
+export const toastRootStateAttributesMapping = {
   ...transitionStatusMapping,
   swipeDirection(value) {
     return value ? {
-      'data-swipe-direction': value
+      [ToastRootDataAttributes.swipeDirection]: value
     } : null;
   }
 };
@@ -56,7 +58,6 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
   const [currentSwipeDirection, setCurrentSwipeDirection] = React.useState(undefined);
   const [isSwiping, setIsSwiping] = React.useState(false);
   const [isRealSwipe, setIsRealSwipe] = React.useState(false);
-  const [dragDismissed, setDragDismissed] = React.useState(false);
   const [dragOffset, setDragOffset] = React.useState({
     x: 0,
     y: 0
@@ -70,6 +71,7 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
   const [descriptionId, setDescriptionId] = React.useState();
   const [lockedDirection, setLockedDirection] = React.useState(null);
   const rootRef = React.useRef(null);
+  const lastToastIdRef = React.useRef(undefined);
   const dragStartPosRef = React.useRef({
     x: 0,
     y: 0
@@ -110,6 +112,7 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
 
   // Recalculates the natural height of the toast and updates it in the toast manager.
   // `flushSync` avoids visual flickers when called from observer callbacks.
+  // The store ignores this write while the toast is transitioning out.
   const recalculateHeight = useStableCallback((flushSync = false) => {
     const element = rootRef.current;
     if (!element) {
@@ -123,9 +126,7 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
       store.updateToastInternal(toast.id, {
         ref: rootRef,
         height,
-        ...(toast.transitionStatus === 'starting' ? {
-          transitionStatus: undefined
-        } : {})
+        transitionStatus: undefined
       });
     }
     if (flushSync) {
@@ -134,7 +135,34 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
       update();
     }
   });
-  useIsoLayoutEffect(recalculateHeight, [recalculateHeight]);
+
+  // Initialize the toast on mount, and reinitialize when it begins a new lifecycle:
+  // re-adding an ending toast retains the same root instance (`key={toast.id}`), and
+  // index-keyed lists can hand an existing instance a different toast.
+  useIsoLayoutEffect(() => {
+    const previousToastId = lastToastIdRef.current;
+    // `recalculateHeight` clears the `starting` status itself, so bail out on the
+    // resulting re-run and on the later `ending` one, which the store discards anyway.
+    if (toast.transitionStatus !== 'starting' && previousToastId === toast.id) {
+      return;
+    }
+    if (previousToastId !== undefined) {
+      // A retained root keeps component-local swipe state from its previous lifecycle;
+      // clear it so the toast doesn't stay offset or exit in the swiped direction.
+      setCurrentSwipeDirection(undefined);
+      setInitialTransform({
+        x: 0,
+        y: 0,
+        scale: 1
+      });
+      setResolvedDragOffset({
+        x: 0,
+        y: 0
+      });
+    }
+    lastToastIdRef.current = toast.id;
+    recalculateHeight();
+  }, [recalculateHeight, toast.id, toast.transitionStatus]);
   function setResolvedDragOffset(nextDragOffset) {
     dragOffsetRef.current = nextDragOffset;
     setDragOffset(nextDragOffset);
@@ -145,31 +173,12 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     };
   }, []);
   function applyDirectionalDamping(deltaX, deltaY) {
-    let newDeltaX = deltaX;
-    let newDeltaY = deltaY;
-    if (!swipeDirections.includes('left') && !swipeDirections.includes('right')) {
-      newDeltaX = deltaX > 0 ? deltaX ** OPPOSITE_DIRECTION_DAMPING_FACTOR : -(Math.abs(deltaX) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
-    } else {
-      if (!swipeDirections.includes('right') && deltaX > 0) {
-        newDeltaX = deltaX ** OPPOSITE_DIRECTION_DAMPING_FACTOR;
-      }
-      if (!swipeDirections.includes('left') && deltaX < 0) {
-        newDeltaX = -(Math.abs(deltaX) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
-      }
-    }
-    if (!swipeDirections.includes('up') && !swipeDirections.includes('down')) {
-      newDeltaY = deltaY > 0 ? deltaY ** OPPOSITE_DIRECTION_DAMPING_FACTOR : -(Math.abs(deltaY) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
-    } else {
-      if (!swipeDirections.includes('down') && deltaY > 0) {
-        newDeltaY = deltaY ** OPPOSITE_DIRECTION_DAMPING_FACTOR;
-      }
-      if (!swipeDirections.includes('up') && deltaY < 0) {
-        newDeltaY = -(Math.abs(deltaY) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
-      }
-    }
+    const damp = delta => delta > 0 ? delta ** OPPOSITE_DIRECTION_DAMPING_FACTOR : -(Math.abs(delta) ** OPPOSITE_DIRECTION_DAMPING_FACTOR);
+    const dampX = deltaX > 0 && !swipeDirections.includes('right') || deltaX < 0 && !swipeDirections.includes('left');
+    const dampY = deltaY > 0 && !swipeDirections.includes('down') || deltaY < 0 && !swipeDirections.includes('up');
     return {
-      x: newDeltaX,
-      y: newDeltaY
+      x: dampX ? damp(deltaX) : deltaX,
+      y: dampY ? damp(deltaY) : deltaY
     };
   }
   const handleSwipeEnd = useStableCallback(event => {
@@ -191,47 +200,18 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
       setCurrentSwipeDirection(undefined);
       return;
     }
-    let shouldClose = false;
     const resolvedDragOffset = dragOffsetRef.current;
     const deltaX = resolvedDragOffset.x - resolvedInitialTransform.x;
     const deltaY = resolvedDragOffset.y - resolvedInitialTransform.y;
     let dismissDirection;
     for (const direction of swipeDirections) {
-      switch (direction) {
-        case 'right':
-          if (deltaX > SWIPE_THRESHOLD) {
-            shouldClose = true;
-            dismissDirection = 'right';
-          }
-          break;
-        case 'left':
-          if (deltaX < -SWIPE_THRESHOLD) {
-            shouldClose = true;
-            dismissDirection = 'left';
-          }
-          break;
-        case 'down':
-          if (deltaY > SWIPE_THRESHOLD) {
-            shouldClose = true;
-            dismissDirection = 'down';
-          }
-          break;
-        case 'up':
-          if (deltaY < -SWIPE_THRESHOLD) {
-            shouldClose = true;
-            dismissDirection = 'up';
-          }
-          break;
-        default:
-          break;
-      }
-      if (shouldClose) {
+      if (getDisplacement(direction, deltaX, deltaY) > SWIPE_THRESHOLD) {
+        dismissDirection = direction;
         break;
       }
     }
-    if (shouldClose) {
+    if (dismissDirection) {
       setCurrentSwipeDirection(dismissDirection);
-      setDragDismissed(true);
       store.closeToast(toast.id);
     } else {
       setResolvedDragOffset({
@@ -249,7 +229,7 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
       store.pauseTimers();
     }
     const target = getTarget(event.nativeEvent);
-    const isInteractiveElement = target ? target.closest(`button,a,input,textarea,[role="button"],${TOAST_SWIPE_IGNORE_SELECTOR}`) : false;
+    const isInteractiveElement = target?.closest(`button,a,input,textarea,[role="button"],${TOAST_SWIPE_IGNORE_SELECTOR}`);
     if (isInteractiveElement) {
       return;
     }
@@ -262,34 +242,30 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
       y: event.clientY
     };
     swipeCancelBaselineRef.current = dragStartPosRef.current;
-    if (rootRef.current) {
-      const transform = getElementTransform(rootRef.current);
-      initialTransformRef.current = transform;
-      setInitialTransform(transform);
-      setResolvedDragOffset({
-        x: transform.x,
-        y: transform.y
-      });
-    }
-    store.setHovering(true);
+    const element = event.currentTarget;
+    const transform = getElementTransform(element);
+    initialTransformRef.current = transform;
+    setInitialTransform(transform);
+    setResolvedDragOffset({
+      x: transform.x,
+      y: transform.y
+    });
+    store.set('hovering', true);
     setIsSwiping(true);
     setIsRealSwipe(false);
     setLockedDirection(null);
     isFirstPointerMoveRef.current = true;
-    const element = rootRef.current;
-    if (element) {
-      dragAbortControllerRef.current?.abort();
-      const dragAbortController = new AbortController();
-      dragAbortControllerRef.current = dragAbortController;
-      const doc = ownerDocument(element);
-      doc.addEventListener('pointerup', handleSwipeEnd, {
-        signal: dragAbortController.signal
-      });
-      doc.addEventListener('pointercancel', handleSwipeEnd, {
-        signal: dragAbortController.signal
-      });
-      element.setPointerCapture?.(event.pointerId);
-    }
+    dragAbortControllerRef.current?.abort();
+    const dragAbortController = new AbortController();
+    dragAbortControllerRef.current = dragAbortController;
+    const doc = ownerDocument(element);
+    doc.addEventListener('pointerup', handleSwipeEnd, {
+      signal: dragAbortController.signal
+    });
+    doc.addEventListener('pointercancel', handleSwipeEnd, {
+      signal: dragAbortController.signal
+    });
+    element.setPointerCapture?.(event.pointerId);
   }
   function handlePointerMove(event) {
     if (event.pointerId !== activePointerIdRef.current) {
@@ -329,30 +305,33 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     const deltaY = clientY - dragStartPosRef.current.y;
     const cancelDeltaY = clientY - swipeCancelBaselineRef.current.y;
     const cancelDeltaX = clientX - swipeCancelBaselineRef.current.x;
+    let resolvedLockedDirection = lockedDirection;
     if (!isRealSwipe) {
       const movementDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
       if (movementDistance >= MIN_DRAG_THRESHOLD) {
         setIsRealSwipe(true);
-        if (lockedDirection === null) {
-          const hasHorizontal = swipeDirections.includes('left') || swipeDirections.includes('right');
-          const hasVertical = swipeDirections.includes('up') || swipeDirections.includes('down');
-          if (hasHorizontal && hasVertical) {
-            const absX = Math.abs(deltaX);
-            const absY = Math.abs(deltaY);
-            setLockedDirection(absX > absY ? 'horizontal' : 'vertical');
-          }
+        // `lockedDirection` is always reset alongside `isRealSwipe`, so it is
+        // still `null` here. Locking is only meaningful when both axes are
+        // swipeable; otherwise the single axis already constrains the gesture.
+        const hasHorizontal = swipeDirections.includes('left') || swipeDirections.includes('right');
+        const hasVertical = swipeDirections.includes('up') || swipeDirections.includes('down');
+        if (hasHorizontal && hasVertical) {
+          const absX = Math.abs(deltaX);
+          const absY = Math.abs(deltaY);
+          resolvedLockedDirection = absX > absY ? 'horizontal' : 'vertical';
+          setLockedDirection(resolvedLockedDirection);
         }
       }
     }
     let candidate;
     if (!intendedSwipeDirectionRef.current) {
-      if (lockedDirection === 'vertical') {
+      if (resolvedLockedDirection === 'vertical') {
         if (deltaY > 0) {
           candidate = 'down';
         } else if (deltaY < 0) {
           candidate = 'up';
         }
-      } else if (lockedDirection === 'horizontal') {
+      } else if (resolvedLockedDirection === 'horizontal') {
         if (deltaX > 0) {
           candidate = 'right';
         } else if (deltaX < 0) {
@@ -382,21 +361,13 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     const dampedDelta = applyDirectionalDamping(deltaX, deltaY);
     let newOffsetX = initialTransformRef.current.x;
     let newOffsetY = initialTransformRef.current.y;
-    if (lockedDirection === 'horizontal') {
-      if (swipeDirections.includes('left') || swipeDirections.includes('right')) {
-        newOffsetX += dampedDelta.x;
-      }
-    } else if (lockedDirection === 'vertical') {
-      if (swipeDirections.includes('up') || swipeDirections.includes('down')) {
-        newOffsetY += dampedDelta.y;
-      }
-    } else {
-      if (swipeDirections.includes('left') || swipeDirections.includes('right')) {
-        newOffsetX += dampedDelta.x;
-      }
-      if (swipeDirections.includes('up') || swipeDirections.includes('down')) {
-        newOffsetY += dampedDelta.y;
-      }
+    const hasHorizontalDir = swipeDirections.includes('left') || swipeDirections.includes('right');
+    const hasVerticalDir = swipeDirections.includes('up') || swipeDirections.includes('down');
+    if (resolvedLockedDirection !== 'vertical' && hasHorizontalDir) {
+      newOffsetX += dampedDelta.x;
+    }
+    if (resolvedLockedDirection !== 'horizontal' && hasVerticalDir) {
+      newOffsetY += dampedDelta.y;
     }
     setResolvedDragOffset({
       x: newOffsetX,
@@ -412,11 +383,8 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     }
   }
   React.useEffect(() => {
-    if (!swipeEnabled) {
-      return undefined;
-    }
     const element = rootRef.current;
-    if (!element) {
+    if (!swipeEnabled || !element) {
       return undefined;
     }
     function preventDefaultTouchStart(event) {
@@ -433,12 +401,6 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     });
   }, [swipeEnabled]);
   function getDragStyles() {
-    if (!isSwiping && dragOffset.x === initialTransform.x && dragOffset.y === initialTransform.y && !dragDismissed) {
-      return {
-        [ToastRootCssVars.swipeMovementX]: '0px',
-        [ToastRootCssVars.swipeMovementY]: '0px'
-      };
-    }
     const deltaX = dragOffset.x - initialTransform.x;
     const deltaY = dragOffset.y - initialTransform.y;
     return {
@@ -472,31 +434,25 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     }
   };
   const toastRoot = React.useMemo(() => ({
-    rootRef,
     toast,
-    titleId,
     setTitleId,
-    descriptionId,
     setDescriptionId,
-    swiping: isSwiping,
-    swipeDirection: currentSwipeDirection,
     recalculateHeight,
-    index: domIndex,
     visibleIndex,
     expanded
-  }), [toast, titleId, descriptionId, isSwiping, currentSwipeDirection, recalculateHeight, domIndex, visibleIndex, expanded]);
+  }), [toast, setTitleId, setDescriptionId, recalculateHeight, visibleIndex, expanded]);
   const state = {
     transitionStatus: toast.transitionStatus,
     expanded,
     limited: toast.limited || false,
     type: toast.type,
-    swiping: toastRoot.swiping,
-    swipeDirection: toastRoot.swipeDirection
+    swiping: isSwiping,
+    swipeDirection: currentSwipeDirection
   };
   const element = useRenderElement('div', componentProps, {
-    ref: [forwardedRef, toastRoot.rootRef],
+    ref: [forwardedRef, rootRef],
     state,
-    stateAttributesMapping,
+    stateAttributesMapping: toastRootStateAttributesMapping,
     props: [defaultProps, elementProps]
   });
   return /*#__PURE__*/_jsx(ToastRootContext.Provider, {

package/toast/root/ToastRootContext.d.mts

@@ -2,14 +2,8 @@ import * as React from 'react';
 import type { ToastObject } from "../useToastManager.mjs";
 export interface ToastRootContext {
   toast: ToastObject<any>;
-  rootRef: React.RefObject<HTMLElement | null>;
-  titleId: string | undefined;
   setTitleId: React.Dispatch<React.SetStateAction<string | undefined>>;
-  descriptionId: string | undefined;
   setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
-  swiping: boolean;
-  swipeDirection: 'up' | 'down' | 'left' | 'right' | undefined;
-  index: number;
   visibleIndex: number;
   expanded: boolean;
   recalculateHeight: (flushSync?: boolean) => void;

package/toast/root/ToastRootContext.d.ts

@@ -2,14 +2,8 @@ import * as React from 'react';
 import type { ToastObject } from "../useToastManager.js";
 export interface ToastRootContext {
   toast: ToastObject<any>;
-  rootRef: React.RefObject<HTMLElement | null>;
-  titleId: string | undefined;
   setTitleId: React.Dispatch<React.SetStateAction<string | undefined>>;
-  descriptionId: string | undefined;
   setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
-  swiping: boolean;
-  swipeDirection: 'up' | 'down' | 'left' | 'right' | undefined;
-  index: number;
   visibleIndex: number;
   expanded: boolean;
   recalculateHeight: (flushSync?: boolean) => void;

package/toast/root/ToastRootCssVars.d.mts

@@ -1,27 +1,25 @@
-export declare enum ToastRootCssVars {
-  /**
-   * Indicates the index of the toast in the list.
-   * @type {number}
-   */
-  index = "--toast-index",
-  /**
-   * Indicates the vertical pixels offset of the toast in the list when expanded.
-   * @type {number}
-   */
-  offsetY = "--toast-offset-y",
-  /**
-   * Indicates the measured natural height of the toast in pixels.
-   * @type {number}
-   */
-  height = "--toast-height",
-  /**
-   * Indicates the horizontal swipe movement of the toast.
-   * @type {number}
-   */
-  swipeMovementX = "--toast-swipe-movement-x",
-  /**
-   * Indicates the vertical swipe movement of the toast.
-   * @type {number}
-   */
-  swipeMovementY = "--toast-swipe-movement-y",
-}
+/**
+ * Indicates the index of the toast in the list.
+ * @type {number}
+ */
+export declare const index = "--toast-index";
+/**
+ * Indicates the vertical pixels offset of the toast in the list when expanded.
+ * @type {number}
+ */
+export declare const offsetY = "--toast-offset-y";
+/**
+ * Indicates the measured natural height of the toast in pixels.
+ * @type {number}
+ */
+export declare const height = "--toast-height";
+/**
+ * Indicates the horizontal swipe movement of the toast.
+ * @type {number}
+ */
+export declare const swipeMovementX = "--toast-swipe-movement-x";
+/**
+ * Indicates the vertical swipe movement of the toast.
+ * @type {number}
+ */
+export declare const swipeMovementY = "--toast-swipe-movement-y";

package/toast/root/ToastRootCssVars.d.ts

@@ -1,27 +1,25 @@
-export declare enum ToastRootCssVars {
-  /**
-   * Indicates the index of the toast in the list.
-   * @type {number}
-   */
-  index = "--toast-index",
-  /**
-   * Indicates the vertical pixels offset of the toast in the list when expanded.
-   * @type {number}
-   */
-  offsetY = "--toast-offset-y",
-  /**
-   * Indicates the measured natural height of the toast in pixels.
-   * @type {number}
-   */
-  height = "--toast-height",
-  /**
-   * Indicates the horizontal swipe movement of the toast.
-   * @type {number}
-   */
-  swipeMovementX = "--toast-swipe-movement-x",
-  /**
-   * Indicates the vertical swipe movement of the toast.
-   * @type {number}
-   */
-  swipeMovementY = "--toast-swipe-movement-y",
-}
+/**
+ * Indicates the index of the toast in the list.
+ * @type {number}
+ */
+export declare const index = "--toast-index";
+/**
+ * Indicates the vertical pixels offset of the toast in the list when expanded.
+ * @type {number}
+ */
+export declare const offsetY = "--toast-offset-y";
+/**
+ * Indicates the measured natural height of the toast in pixels.
+ * @type {number}
+ */
+export declare const height = "--toast-height";
+/**
+ * Indicates the horizontal swipe movement of the toast.
+ * @type {number}
+ */
+export declare const swipeMovementX = "--toast-swipe-movement-x";
+/**
+ * Indicates the vertical swipe movement of the toast.
+ * @type {number}
+ */
+export declare const swipeMovementY = "--toast-swipe-movement-y";

package/toast/root/ToastRootCssVars.js

@@ -3,32 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ToastRootCssVars = void 0;
-let ToastRootCssVars = exports.ToastRootCssVars = /*#__PURE__*/function (ToastRootCssVars) {
-  /**
-   * Indicates the index of the toast in the list.
-   * @type {number}
-   */
-  ToastRootCssVars["index"] = "--toast-index";
-  /**
-   * Indicates the vertical pixels offset of the toast in the list when expanded.
-   * @type {number}
-   */
-  ToastRootCssVars["offsetY"] = "--toast-offset-y";
-  /**
-   * Indicates the measured natural height of the toast in pixels.
-   * @type {number}
-   */
-  ToastRootCssVars["height"] = "--toast-height";
-  /**
-   * Indicates the horizontal swipe movement of the toast.
-   * @type {number}
-   */
-  ToastRootCssVars["swipeMovementX"] = "--toast-swipe-movement-x";
-  /**
-   * Indicates the vertical swipe movement of the toast.
-   * @type {number}
-   */
-  ToastRootCssVars["swipeMovementY"] = "--toast-swipe-movement-y";
-  return ToastRootCssVars;
-}({});
+exports.swipeMovementY = exports.swipeMovementX = exports.offsetY = exports.index = exports.height = void 0;
+/**
+ * Indicates the index of the toast in the list.
+ * @type {number}
+ */
+const index = exports.index = '--toast-index';
+/**
+ * Indicates the vertical pixels offset of the toast in the list when expanded.
+ * @type {number}
+ */
+const offsetY = exports.offsetY = '--toast-offset-y';
+/**
+ * Indicates the measured natural height of the toast in pixels.
+ * @type {number}
+ */
+const height = exports.height = '--toast-height';
+/**
+ * Indicates the horizontal swipe movement of the toast.
+ * @type {number}
+ */
+const swipeMovementX = exports.swipeMovementX = '--toast-swipe-movement-x';
+/**
+ * Indicates the vertical swipe movement of the toast.
+ * @type {number}
+ */
+const swipeMovementY = exports.swipeMovementY = '--toast-swipe-movement-y';

package/toast/root/ToastRootCssVars.mjs

@@ -1,28 +1,25 @@
-export let ToastRootCssVars = /*#__PURE__*/function (ToastRootCssVars) {
-  /**
-   * Indicates the index of the toast in the list.
-   * @type {number}
-   */
-  ToastRootCssVars["index"] = "--toast-index";
-  /**
-   * Indicates the vertical pixels offset of the toast in the list when expanded.
-   * @type {number}
-   */
-  ToastRootCssVars["offsetY"] = "--toast-offset-y";
-  /**
-   * Indicates the measured natural height of the toast in pixels.
-   * @type {number}
-   */
-  ToastRootCssVars["height"] = "--toast-height";
-  /**
-   * Indicates the horizontal swipe movement of the toast.
-   * @type {number}
-   */
-  ToastRootCssVars["swipeMovementX"] = "--toast-swipe-movement-x";
-  /**
-   * Indicates the vertical swipe movement of the toast.
-   * @type {number}
-   */
-  ToastRootCssVars["swipeMovementY"] = "--toast-swipe-movement-y";
-  return ToastRootCssVars;
-}({});
+/**
+ * Indicates the index of the toast in the list.
+ * @type {number}
+ */
+export const index = '--toast-index';
+/**
+ * Indicates the vertical pixels offset of the toast in the list when expanded.
+ * @type {number}
+ */
+export const offsetY = '--toast-offset-y';
+/**
+ * Indicates the measured natural height of the toast in pixels.
+ * @type {number}
+ */
+export const height = '--toast-height';
+/**
+ * Indicates the horizontal swipe movement of the toast.
+ * @type {number}
+ */
+export const swipeMovementX = '--toast-swipe-movement-x';
+/**
+ * Indicates the vertical swipe movement of the toast.
+ * @type {number}
+ */
+export const swipeMovementY = '--toast-swipe-movement-y';