@react-spectrum/s2 3.0.0-nightly-c81a23ccd-250409 → 3.0.0-nightly-9723225d6-250412

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/s2",
-  "version": "3.0.0-nightly-c81a23ccd-250409",
+  "version": "3.0.0-nightly-9723225d6-250412",
   "description": "Spectrum 2 UI components in React",
   "license": "Apache-2.0",
   "repository": {
@@ -57,25 +57,26 @@
     "src"
   ],
   "dependencies": {
-    "@internationalized/number": "3.0.0-nightly-c81a23ccd-250409",
-    "@react-aria/collections": "3.0.0-nightly-c81a23ccd-250409",
-    "@react-aria/focus": "3.0.0-nightly-c81a23ccd-250409",
-    "@react-aria/i18n": "3.0.0-nightly-c81a23ccd-250409",
-    "@react-aria/interactions": "3.0.0-nightly-c81a23ccd-250409",
-    "@react-aria/live-announcer": "3.0.0-nightly-c81a23ccd-250409",
-    "@react-aria/utils": "3.0.0-nightly-c81a23ccd-250409",
-    "@react-spectrum/utils": "3.0.0-nightly-c81a23ccd-250409",
-    "@react-stately/layout": "3.0.0-nightly-c81a23ccd-250409",
-    "@react-stately/utils": "3.0.0-nightly-c81a23ccd-250409",
-    "@react-types/dialog": "3.0.0-nightly-c81a23ccd-250409",
-    "@react-types/grid": "3.0.0-nightly-c81a23ccd-250409",
-    "@react-types/provider": "3.0.0-nightly-c81a23ccd-250409",
-    "@react-types/shared": "3.0.0-nightly-c81a23ccd-250409",
-    "@react-types/table": "3.0.0-nightly-c81a23ccd-250409",
-    "@react-types/textfield": "3.0.0-nightly-c81a23ccd-250409",
+    "@internationalized/number": "3.0.0-nightly-9723225d6-250412",
+    "@react-aria/collections": "3.0.0-nightly-9723225d6-250412",
+    "@react-aria/focus": "3.0.0-nightly-9723225d6-250412",
+    "@react-aria/i18n": "3.0.0-nightly-9723225d6-250412",
+    "@react-aria/interactions": "3.0.0-nightly-9723225d6-250412",
+    "@react-aria/live-announcer": "3.0.0-nightly-9723225d6-250412",
+    "@react-aria/utils": "3.0.0-nightly-9723225d6-250412",
+    "@react-spectrum/utils": "3.0.0-nightly-9723225d6-250412",
+    "@react-stately/layout": "3.0.0-nightly-9723225d6-250412",
+    "@react-stately/utils": "3.0.0-nightly-9723225d6-250412",
+    "@react-types/dialog": "3.0.0-nightly-9723225d6-250412",
+    "@react-types/grid": "3.0.0-nightly-9723225d6-250412",
+    "@react-types/provider": "3.0.0-nightly-9723225d6-250412",
+    "@react-types/shared": "3.0.0-nightly-9723225d6-250412",
+    "@react-types/table": "3.0.0-nightly-9723225d6-250412",
+    "@react-types/textfield": "3.0.0-nightly-9723225d6-250412",
     "csstype": "^3.0.2",
-    "react-aria": "3.0.0-nightly-c81a23ccd-250409",
-    "react-aria-components": "3.0.0-nightly-c81a23ccd-250409"
+    "react-aria": "3.0.0-nightly-9723225d6-250412",
+    "react-aria-components": "3.0.0-nightly-9723225d6-250412",
+    "react-stately": "3.0.0-nightly-9723225d6-250412"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0-rc.1",

package/src/ActionButton.tsx

@@ -312,6 +312,7 @@ export const ActionButton = forwardRef(function ActionButton(props: ActionButton
             styles: style({marginStart: '--iconMargin', flexShrink: 0, order: 0})
           }],
           [NotificationBadgeContext, {
+            staticColor: staticColor,
             size: props.size === 'XS' ? undefined : props.size,
             isDisabled: props.isDisabled,
             styles: style({position: 'absolute', top: '--badgeTop', insetStart: '[var(--badgePosition)]', marginTop: '[calc((self(height) * -1)/2)]', marginStart: '[calc((self(height) * -1)/2)]'})

package/src/Card.tsx

@@ -501,7 +501,7 @@ export interface CardPreviewProps extends UnsafeStyles, DOMProps {
 
 export const CardPreview = forwardRef(function CardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {
   let {size, isQuiet, isHovered, isFocusVisible, isSelected, isPressed, isCheckboxSelection} = useContext(InternalCardContext);
-  let {UNSAFE_className, UNSAFE_style} = props;
+  let {UNSAFE_className = '', UNSAFE_style} = props;
   let domRef = useDOMRef(ref);
   return (
     <div

package/src/ColorSwatchPicker.tsx

@@ -50,6 +50,7 @@ export const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: Co
     density = 'regular',
     size = 'M',
     rounding = 'none',
+    UNSAFE_className = '',
     ...otherProps
   } = props;
   let domRef = useDOMRef(ref);
@@ -58,7 +59,7 @@ export const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: Co
     <AriaColorSwatchPicker
       {...otherProps}
       ref={domRef}
-      className={props.UNSAFE_className + style({
+      className={UNSAFE_className + style({
         display: 'flex',
         flexWrap: 'wrap',
         gap: {

package/src/Content.tsx

@@ -37,7 +37,7 @@ export const Heading = forwardRef(// Wrapper around RAC Heading to unmount when
 function Heading(props: HeadingProps, ref: DOMRef<HTMLHeadingElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, HeadingContext);
   let domRef = useDOMRef(ref);
-  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;
+  let {UNSAFE_className = '', UNSAFE_style, styles = '', isHidden, slot, ...otherProps} = props;
   if (isHidden) {
     return null;
   }
@@ -57,7 +57,7 @@ export const HeaderContext = createContext<ContextValue<Partial<ContentProps>, D
 export const Header = forwardRef(function Header(props: ContentProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, HeaderContext);
   let domRef = useDOMRef(ref);
-  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;
+  let {UNSAFE_className = '', UNSAFE_style, styles = '', isHidden, slot, ...otherProps} = props;
   if (isHidden) {
     return null;
   }
@@ -77,7 +77,7 @@ export const ContentContext = createContext<ContextValue<Partial<ContentProps>,
 export const Content = forwardRef(function Content(props: ContentProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ContentContext);
   let domRef = useDOMRef(ref);
-  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;
+  let {UNSAFE_className = '', UNSAFE_style, styles = '', isHidden, slot, ...otherProps} = props;
   if (isHidden) {
     return null;
   }
@@ -96,7 +96,7 @@ export const TextContext = createContext<ContextValue<Partial<ContentProps>, DOM
 export const Text = forwardRef(function Text(props: ContentProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, TextContext);
   let domRef = useDOMRef(ref);
-  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, children, ...otherProps} = props;
+  let {UNSAFE_className = '', UNSAFE_style, styles = '', isHidden, slot, children, ...otherProps} = props;
   let racContext = useContext(RACTextContext);
   let isSkeleton = useIsSkeleton();
   [children, UNSAFE_style] = useSkeletonText(children, UNSAFE_style);
@@ -130,7 +130,7 @@ export const KeyboardContext = createContext<ContextValue<Partial<ContentProps>,
 export const Keyboard = forwardRef(function Keyboard(props: ContentProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, KeyboardContext);
   let domRef = useDOMRef(ref);
-  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;
+  let {UNSAFE_className = '', UNSAFE_style, styles = '', isHidden, slot, ...otherProps} = props;
   if (isHidden) {
     return null;
   }
@@ -149,7 +149,7 @@ export const FooterContext = createContext<ContextValue<Partial<ContentProps>, D
 export const Footer = forwardRef(function Footer(props: ContentProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, FooterContext);
   let domRef = useDOMRef(ref);
-  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;
+  let {UNSAFE_className = '', UNSAFE_style, styles = '', isHidden, slot, ...otherProps} = props;
   if (isHidden) {
     return null;
   }

package/src/Disclosure.tsx

@@ -130,10 +130,10 @@ const buttonStyles = style({
   fontWeight: 'bold',
   fontSize: {
     size: {
-      S: 'heading-xs',
-      M: 'heading-sm',
-      L: 'heading',
-      XL: 'heading-lg'
+      S: 'title-sm',
+      M: 'title',
+      L: 'title-lg',
+      XL: 'title-xl'
     }
   },
   lineHeight: 'ui',
@@ -147,32 +147,32 @@ const buttonStyles = style({
     // compact is equivalent to 'control', but other densities have more padding.
     size: {
       S: {
+        density: {
+          compact: 18,
+          regular: 24,
+          spacious: 32
+        }
+      },
+      M: {
         density: {
           compact: 24,
           regular: 32,
           spacious: 40
         }
       },
-      M: {
+      L: {
         density: {
           compact: 32,
           regular: 40,
           spacious: 48
         }
       },
-      L: {
+      XL: {
         density: {
           compact: 40,
           regular: 48,
           spacious: 56
         }
-      },
-      XL: {
-        density: {
-          compact: 48,
-          regular: 56,
-          spacious: 64
-        }
       }
     }
   },
@@ -219,18 +219,12 @@ function DisclosureHeaderWithForwardRef(props: DisclosureHeaderProps, ref: DOMRe
   let domRef = useDOMRef(ref);
   let {size, isQuiet, density} = useSlottedContext(DisclosureContext)!;
 
-  let mapSize = {
-    S: 'XS',
-    M: 'S',
-    L: 'M',
-    XL: 'L'
-  };
-
-  // maps to one size smaller in the compact density to ensure there is space between the top and bottom of the action button and container
+  // Shift button size down by 2 for compact density, 1 for regular/spacious to ensure there is space between the top and bottom of the action button and container
   let newSize : 'XS' | 'S' | 'M' | 'L' | 'XL' | undefined = size;
-  if (density === 'compact') {
-    newSize = mapSize[size ?? 'M'] as 'XS' | 'S' | 'M' | 'L';
-  }
+  const sizes = ['XS', 'S', 'M', 'L', 'XL'];
+  const currentIndex = sizes.indexOf(size ?? 'M');
+  const shift = density === 'compact' ? 2 : 1;
+  newSize = sizes[Math.max(0, currentIndex - shift)] as 'XS' | 'S' | 'M' | 'L' | 'XL';
 
   return (
     <Provider

package/src/NotificationBadge.tsx

@@ -40,7 +40,8 @@ export interface NotificationBadgeProps extends DOMProps, AriaLabelingProps, Sty
 }
 
 interface NotificationBadgeContextProps extends Partial<NotificationBadgeProps> {
-  isDisabled?: boolean
+  isDisabled?: boolean,
+  staticColor?: 'black' | 'white' | 'auto'
 }
 
 export const NotificationBadgeContext = createContext<ContextValue<Partial<NotificationBadgeContextProps>, DOMRefValue<HTMLDivElement>>>(null);
@@ -53,6 +54,7 @@ const badge = style({
   font: 'control',
   color: {
     default: 'white',
+    isStaticColor: 'auto',
     forcedColors: 'ButtonText'
   },
   fontSize: {
@@ -76,6 +78,7 @@ const badge = style({
   alignItems: 'center',
   backgroundColor: {
     default: 'accent',
+    isStaticColor: 'transparent-overlay-1000',
     forcedColors: 'ButtonFace'
   },
   height: {
@@ -102,7 +105,7 @@ const badge = style({
     isIndicatorOnly: 'square',
     isSingleDigit: 'square'
   },
-  width: 'fit',
+  width: 'max',
   paddingX: {
     isDoubleDigit: 'edge-to-text'
   },
@@ -119,6 +122,7 @@ export const NotificationBadge = forwardRef(function Badge(props: NotificationBa
     size = 'S',
     value,
     isDisabled = false,
+    staticColor,
     ...otherProps
   } = props as NotificationBadgeContextProps;
   let domRef = useDOMRef(ref);
@@ -159,7 +163,7 @@ export const NotificationBadge = forwardRef(function Badge(props: NotificationBa
       {...filterDOMProps(otherProps, {labelable: true})}
       role={ariaLabel && 'img'}
       aria-label={ariaLabel}
-      className={(props.UNSAFE_className || '') + badge({size, isIndicatorOnly, isSingleDigit, isDoubleDigit, isDisabled}, props.styles)}
+      className={(props.UNSAFE_className || '') + badge({size, isIndicatorOnly, isSingleDigit, isDoubleDigit, isDisabled, isStaticColor: !!staticColor}, props.styles)}
       style={props.UNSAFE_style}
       ref={domRef}>
       {formattedValue}

package/src/TableView.tsx

@@ -54,7 +54,7 @@ import {IconContext} from './Icon';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {LayoutNode} from '@react-stately/layout';
-import {Menu, MenuItem, MenuTrigger} from './Menu';
+import {Menu, MenuItem, MenuSection, MenuTrigger} from './Menu';
 import {mergeStyles} from '../style/runtime';
 import Nubbin from '../ui-icons/S2_MoveHorizontalTableWidget.svg';
 import {ProgressCircle} from './ProgressCircle';
@@ -466,7 +466,7 @@ const columnStyles = style({
   },
   paddingX: {
     default: 16,
-    isColumnResizable: 0
+    isMenu: 0
   },
   textAlign: {
     align: {
@@ -493,7 +493,7 @@ const columnStyles = style({
   borderStartWidth: 0,
   borderEndWidth: {
     default: 0,
-    isColumnResizable: 1
+    isMenu: 1
   },
   borderStyle: 'solid',
   forcedColorAdjust: 'none'
@@ -510,7 +510,9 @@ export interface ColumnProps extends RACColumnProps {
    */
   align?: 'start' | 'center' | 'end',
   /** The content to render as the column header. */
-  children: ReactNode
+  children: ReactNode,
+  /** Menu fragment to be rendered inside the column header's menu. */
+  UNSTABLE_menuItems?: ReactNode
 }
 
 /**
@@ -520,21 +522,22 @@ export const Column = forwardRef(function Column(props: ColumnProps, ref: DOMRef
   let {isQuiet} = useContext(InternalTableContext);
   let {allowsResizing, children, align = 'start'} = props;
   let domRef = useDOMRef(ref);
-  let isColumnResizable = allowsResizing;
+  let isMenu = allowsResizing || !!props.UNSTABLE_menuItems;
+
 
   return (
-    <RACColumn {...props} ref={domRef} style={{borderInlineEndColor: 'transparent'}} className={renderProps => columnStyles({...renderProps, isColumnResizable, align, isQuiet})}>
+    <RACColumn {...props} ref={domRef} style={{borderInlineEndColor: 'transparent'}} className={renderProps => columnStyles({...renderProps, isMenu, align, isQuiet})}>
       {({allowsSorting, sortDirection, isFocusVisible, sort, startResize}) => (
         <>
           {/* Note this is mainly for column's without a dropdown menu. If there is a dropdown menu, the button is styled to have a focus ring for simplicity
           (no need to juggle showing this focus ring if focus is on the menu button and not if it is on the resizer) */}
           {/* Separate absolutely positioned element because appyling the ring on the column directly via outline means the ring's required borderRadius will cause the bottom gray border to curve as well */}
           {isFocusVisible && <CellFocusRing />}
-          {isColumnResizable ?
+          {isMenu ?
             (
-              <ResizableColumnContents allowsSorting={allowsSorting} sortDirection={sortDirection} sort={sort} startResize={startResize} align={align}>
+              <ColumnWithMenu isColumnResizable={allowsResizing} menuItems={props.UNSTABLE_menuItems} allowsSorting={allowsSorting} sortDirection={sortDirection} sort={sort} startResize={startResize} align={align}>
                 {children}
-              </ResizableColumnContents>
+              </ColumnWithMenu>
             ) : (
               <ColumnContents allowsSorting={allowsSorting} sortDirection={sortDirection}>
                 {children}
@@ -704,10 +707,13 @@ const nubbin = style({
   }
 });
 
-interface ResizableColumnContentProps extends Pick<ColumnRenderProps, 'allowsSorting' | 'sort' | 'sortDirection' | 'startResize'>, Pick<ColumnProps, 'align' | 'children'> {}
+interface ColumnWithMenuProps extends Pick<ColumnRenderProps, 'allowsSorting' | 'sort' | 'sortDirection' | 'startResize'>, Pick<ColumnProps, 'align' | 'children'> {
+  isColumnResizable?: boolean,
+  menuItems?: ReactNode
+}
 
-function ResizableColumnContents(props: ResizableColumnContentProps) {
-  let {allowsSorting, sortDirection, sort, startResize, children, align} = props;
+function ColumnWithMenu(props: ColumnWithMenuProps) {
+  let {allowsSorting, sortDirection, sort, startResize, children, align, isColumnResizable, menuItems} = props;
   let {setIsInResizeMode, isInResizeMode} = useContext(InternalTableContext);
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   const onMenuSelect = (key) => {
@@ -726,12 +732,13 @@ function ResizableColumnContents(props: ResizableColumnContentProps) {
   };
 
   let items = useMemo(() => {
-    let options = [
-      {
+    let options: Array<{label: string, id: string}> = [];
+    if (isColumnResizable) {
+      options = [{
         label: stringFormatter.format('table.resizeColumn'),
         id: 'resize'
-      }
-    ];
+      }];
+    }
     if (allowsSorting) {
       options = [
         {
@@ -747,7 +754,7 @@ function ResizableColumnContents(props: ResizableColumnContentProps) {
     }
     return options;
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [allowsSorting]);
+  }, [allowsSorting, isColumnResizable]);
 
   let buttonAlignment = 'start';
   let menuAlign = 'start' as 'start' | 'end';
@@ -779,20 +786,29 @@ function ResizableColumnContents(props: ResizableColumnContentProps) {
           </div>
           <Chevron size="M" className={chevronIcon} />
         </Button>
-        <Menu onAction={onMenuSelect} items={items} styles={style({minWidth: 128})}>
-          {(item) => <MenuItem>{item?.label}</MenuItem>}
+        <Menu onAction={onMenuSelect} styles={style({minWidth: 128})}>
+          {items.length > 0 && (
+            <MenuSection aria-label={stringFormatter.format('table.standardColumnMenu')}>
+              <Collection items={items}>
+                {(item) => <MenuItem>{item?.label}</MenuItem>}
+              </Collection>
+            </MenuSection>
+          )}
+          {menuItems}
         </Menu>
       </MenuTrigger>
-      <div data-react-aria-prevent-focus="true">
-        <ColumnResizer data-react-aria-prevent-focus="true" className={({resizableDirection, isResizing}) => resizerHandleContainer({resizableDirection, isResizing, isInResizeMode})}>
-          {({isFocusVisible, isResizing}) => (
-            <>
-              <ResizerIndicator isInResizeMode={isInResizeMode} isFocusVisible={isFocusVisible} isResizing={isResizing} />
-              {(isFocusVisible || isInResizeMode) && isResizing && <div className={nubbin}><Nubbin /></div>}
-            </>
-        )}
-        </ColumnResizer>
-      </div>
+      {isColumnResizable && (
+        <div data-react-aria-prevent-focus="true">
+          <ColumnResizer data-react-aria-prevent-focus="true" className={({resizableDirection, isResizing}) => resizerHandleContainer({resizableDirection, isResizing, isInResizeMode})}>
+            {({isFocusVisible, isResizing}) => (
+              <>
+                <ResizerIndicator isInResizeMode={isInResizeMode} isFocusVisible={isFocusVisible} isResizing={isResizing} />
+                {(isFocusVisible || isInResizeMode) && isResizing && <div className={nubbin}><Nubbin /></div>}
+              </>
+          )}
+          </ColumnResizer>
+        </div>
+      )}
     </>
   );
 }

package/src/Toast.module.css

@@ -0,0 +1,153 @@
+/* Safari doesn't support :active-view-transition-type() yet, so we fall back to a class on the html element */
+html.toast-add,
+html.toast-remove,
+html.toast-expand,
+html.toast-collapse,
+html.toast-clear,
+html:active-view-transition-type(toast-add, toast-remove, toast-expand, toast-collapse, toast-clear) {
+  view-transition-name: none;
+
+  .toast-controls {
+    view-transition-name: toast-controls;
+  }
+
+  .toast-background {
+    view-transition-name: toast-background;
+  }
+
+  &::view-transition-group(toast-background) {
+    z-index: -1;
+  }
+
+  &::view-transition-group(*) {
+    animation-duration: 400ms;
+  }
+}
+
+html.toast-add,
+html.toast-remove,
+html:active-view-transition-type(toast-add, toast-remove) {
+  /* The new toast should slide in and out. With reduce motion enabled, it fades by default. */
+  @media (prefers-reduced-motion: no-preference) {
+    &::view-transition-new(.toast):only-child {
+      animation-name: slide-in;
+    }
+
+    &::view-transition-old(.toast):only-child {
+      animation-name: slide-out;
+    }
+  }
+
+  &::view-transition-group(.toast.bottom) {
+    --slideX: 0;
+    --slideY: calc(100% + 12px);
+  }
+  
+  &::view-transition-group(.toast.top) {
+    --slideX: 0;
+    --slideY: calc(-100% - 12px);
+  }
+  
+  &::view-transition-group(.toast.start) {
+    --slideX: calc(-100% - 12px);
+    --slideY: 0;
+  }
+  
+  &::view-transition-group(.toast.end) {
+    --slideX: calc(100% + 12px);
+    --slideY: 0;
+  }  
+}
+
+/* Make the "Show all" button animate slightly faster/slower than other components when expanding/collapsing.
+ * This prevents it from appearing to overlap the text when it fades out and the text repositions. */
+html.toast-expand,
+html:active-view-transition-type(toast-expand) {
+  &::view-transition-group(toast-expand) {
+    animation-duration: 300ms;
+  }
+}
+
+html.toast-collapse,
+html:active-view-transition-type(toast-collapse) {
+  &::view-transition-group(toast-expand) {
+    animation-duration: 600ms;
+  }
+}
+
+html.toast-expand,
+html.toast-collapse,
+html:active-view-transition-type(toast-expand, toast-collapse) {
+  @media (prefers-reduced-motion: no-preference) {
+    /* When expanding/collapsing, animate the components of the main toast individually. */
+    .toast-content {
+      view-transition-name: toast-content;
+    }
+
+    .toast-expand {
+      view-transition-name: toast-expand;
+    }
+
+    .toast-action {
+      view-transition-name: toast-action;
+    }
+
+    .toast-close {
+      view-transition-name: toast-close;
+    }
+
+    /* Force toast controls to be visible during the animation */
+    .toast-controls {
+      display: flex;
+    }
+
+    /* Smoothly transition the size of toasts. */
+    &::view-transition-old(.toast),
+    &::view-transition-new(.toast) {
+      /* Make the old and new images fill the size of the parent group. */
+      height: 100%;
+      width: 100%;
+    }
+
+    /* Background toasts don't have their components split apart in separate view transitions.
+     * This means we need to do some tricks to get the aspect ratio to transition smoothly.
+     * Clipping messes up the shadows a bit, but it's less noticeable on the background toasts. */
+    &::view-transition-old(.background-toast),
+    &::view-transition-new(.background-toast) {
+      /* Cover all of the available space without stretching the aspect ratio */
+      object-fit: cover;
+      object-position: top center;
+      /* Clip to retain rounded corners */
+      clip-path: inset(0px round 10px);
+    }
+  }
+
+  @media (prefers-reduced-motion) {
+    /* Do not animate individual toasts in reduced motion. The whole list cross-fades instead. */
+    .toast {
+      view-transition-name: none !important;
+    }
+
+    .toast-list-expanded {
+      view-transition-name: toast-list-expanded;
+    }
+
+    .toast-list-collapsed {
+      view-transition-name: toast-list-collapsed;
+    }
+  }
+}
+
+@keyframes slide-in {
+  from {
+    translate: var(--slideX) var(--slideY);
+    opacity: 0;
+  }
+}
+
+@keyframes slide-out {
+  to {
+    translate: var(--slideX) var(--slideY);
+    opacity: 0;
+  }
+}