diff --git a/.eslintrc.js b/.eslintrc.js
index d6fce72a85b..d40afd976c7 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -120,7 +120,8 @@ module.exports = {
     'AsyncIterable': 'readonly',
     'FileSystemFileEntry': 'readonly',
     'FileSystemDirectoryEntry': 'readonly',
-    'FileSystemEntry': 'readonly'
+    'FileSystemEntry': 'readonly',
+    'IS_REACT_ACT_ENVIRONMENT': 'readonly'
   },
   settings: {
     jsdoc: {
diff --git a/packages/@react-aria/selection/src/ListKeyboardDelegate.ts b/packages/@react-aria/selection/src/ListKeyboardDelegate.ts
index 8bda10460f0..7a8a5f6ed34 100644
--- a/packages/@react-aria/selection/src/ListKeyboardDelegate.ts
+++ b/packages/@react-aria/selection/src/ListKeyboardDelegate.ts
@@ -74,32 +74,27 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
     return this.disabledBehavior === 'all' && (item.props?.isDisabled || this.disabledKeys.has(item.key));
   }
 
-  getNextKey(key: Key) {
-    key = this.collection.getKeyAfter(key);
+  private findNextNonDisabled(key: Key, getNext: (key: Key) => Key | null): Key | null {
     while (key != null) {
       let item = this.collection.getItem(key);
-      if (item.type === 'item' && !this.isDisabled(item)) {
+      if (item?.type === 'item' && !this.isDisabled(item)) {
         return key;
       }
 
-      key = this.collection.getKeyAfter(key);
+      key = getNext(key);
     }
 
     return null;
   }
 
+  getNextKey(key: Key) {
+    key = this.collection.getKeyAfter(key);
+    return this.findNextNonDisabled(key, key => this.collection.getKeyAfter(key));
+  }
+
   getPreviousKey(key: Key) {
     key = this.collection.getKeyBefore(key);
-    while (key != null) {
-      let item = this.collection.getItem(key);
-      if (item.type === 'item' && !this.isDisabled(item)) {
-        return key;
-      }
-
-      key = this.collection.getKeyBefore(key);
-    }
-
-    return null;
+    return this.findNextNonDisabled(key, key => this.collection.getKeyBefore(key));
   }
 
   private findKey(
@@ -151,6 +146,14 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
   }
 
   getKeyRightOf(key: Key) {
+    // This is a temporary solution for CardView until we refactor useSelectableCollection.
+    // https://github.com/orgs/adobe/projects/19/views/32?pane=issue&itemId=77825042
+    let layoutDelegateMethod = this.direction === 'ltr' ? 'getKeyRightOf' : 'getKeyLeftOf';
+    if (this.layoutDelegate[layoutDelegateMethod]) {
+      key = this.layoutDelegate[layoutDelegateMethod](key);
+      return this.findNextNonDisabled(key, key => this.layoutDelegate[layoutDelegateMethod](key));
+    }
+
     if (this.layout === 'grid') {
       if (this.orientation === 'vertical') {
         return this.getNextColumn(key, this.direction === 'rtl');
@@ -165,6 +168,12 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
   }
 
   getKeyLeftOf(key: Key) {
+    let layoutDelegateMethod = this.direction === 'ltr' ? 'getKeyLeftOf' : 'getKeyRightOf';
+    if (this.layoutDelegate[layoutDelegateMethod]) {
+      key = this.layoutDelegate[layoutDelegateMethod](key);
+      return this.findNextNonDisabled(key, key => this.layoutDelegate[layoutDelegateMethod](key));
+    }
+
     if (this.layout === 'grid') {
       if (this.orientation === 'vertical') {
         return this.getNextColumn(key, this.direction === 'ltr');
@@ -180,30 +189,12 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
 
   getFirstKey() {
     let key = this.collection.getFirstKey();
-    while (key != null) {
-      let item = this.collection.getItem(key);
-      if (item?.type === 'item' && !this.isDisabled(item)) {
-        return key;
-      }
-
-      key = this.collection.getKeyAfter(key);
-    }
-
-    return null;
+    return this.findNextNonDisabled(key, key => this.collection.getKeyAfter(key));
   }
 
   getLastKey() {
     let key = this.collection.getLastKey();
-    while (key != null) {
-      let item = this.collection.getItem(key);
-      if (item.type === 'item' && !this.isDisabled(item)) {
-        return key;
-      }
-
-      key = this.collection.getKeyBefore(key);
-    }
-
-    return null;
+    return this.findNextNonDisabled(key, key => this.collection.getKeyBefore(key));
   }
 
   getKeyPageAbove(key: Key) {
@@ -280,7 +271,7 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
         return key;
       }
 
-      key = this.getKeyBelow(key);
+      key = this.getNextKey(key);
     }
 
     return null;
diff --git a/packages/@react-aria/utils/src/useLoadMore.ts b/packages/@react-aria/utils/src/useLoadMore.ts
index e00d04a041f..2dd7135e586 100644
--- a/packages/@react-aria/utils/src/useLoadMore.ts
+++ b/packages/@react-aria/utils/src/useLoadMore.ts
@@ -29,7 +29,7 @@ export interface LoadMoreProps {
    */
   scrollOffset?: number,
   /** The data currently loaded. */
-  items?: any[]
+  items?: any
 }
 
 export function useLoadMore(props: LoadMoreProps, ref: RefObject<HTMLElement | null>) {
diff --git a/packages/@react-aria/virtualizer/src/ScrollView.tsx b/packages/@react-aria/virtualizer/src/ScrollView.tsx
index 363adaa0058..67e17ece306 100644
--- a/packages/@react-aria/virtualizer/src/ScrollView.tsx
+++ b/packages/@react-aria/virtualizer/src/ScrollView.tsx
@@ -143,12 +143,17 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  let isUpdatingSize = useRef(false);
   let updateSize = useEffectEvent((flush: typeof flushSync) => {
     let dom = ref.current;
-    if (!dom) {
+    if (!dom && !isUpdatingSize.current) {
       return;
     }
 
+    // Prevent reentrancy when resize observer fires, triggers re-layout that results in
+    // content size update, causing below layout effect to fire. This avoids infinite loops.
+    isUpdatingSize.current = true;
+
     let isTestEnv = process.env.NODE_ENV === 'test' && !process.env.VIRT_ON;
     let isClientWidthMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientWidth');
     let isClientHeightMocked = Object.getOwnPropertyNames(window.HTMLElement.prototype).includes('clientHeight');
@@ -177,27 +182,31 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
         });
       }
     }
+
+    isUpdatingSize.current = false;
   });
 
-  let didUpdateSize = useRef(false);
+  // Update visible rect when the content size changes, in case scrollbars need to appear or disappear.
+  let lastContentSize = useRef<Size | null>(null);
   useLayoutEffect(() => {
-    // React doesn't allow flushSync inside effects, so queue a microtask.
-    // We also need to wait until all refs are set (e.g. when passing a ref down from a parent).
-    queueMicrotask(() => {
-      if (!didUpdateSize.current) {
-        didUpdateSize.current = true;
-        updateSize(flushSync);
+    if (!isUpdatingSize.current && (lastContentSize.current == null || !contentSize.equals(lastContentSize.current))) {
+      // React doesn't allow flushSync inside effects, so queue a microtask.
+      // We also need to wait until all refs are set (e.g. when passing a ref down from a parent).
+      // If we are in an `act` environment, update immediately without a microtask so you don't need
+      // to mock timers in tests. In this case, the update is synchronous already.
+      // IS_REACT_ACT_ENVIRONMENT is used by React 18. Previous versions checked for the `jest` global.
+      // https://github.com/reactwg/react-18/discussions/102
+      // @ts-ignore
+      if (typeof IS_REACT_ACT_ENVIRONMENT === 'boolean' ? IS_REACT_ACT_ENVIRONMENT : typeof jest !== 'undefined') {
+        updateSize(fn => fn());
+      } else {
+        queueMicrotask(() => updateSize(flushSync));
       }
-    });
-  }, [updateSize]);
-  useEffect(() => {
-    if (!didUpdateSize.current) {
-      // If useEffect ran before the above microtask, we are in a synchronous render (e.g. act).
-      // Update the size here so that you don't need to mock timers in tests.
-      didUpdateSize.current = true;
-      updateSize(fn => fn());
     }
-  }, [updateSize]);
+
+    lastContentSize.current = contentSize;
+  });
+
   let onResize = useCallback(() => {
     updateSize(flushSync);
   }, [updateSize]);
diff --git a/packages/@react-spectrum/s2/package.json b/packages/@react-spectrum/s2/package.json
index 995f2c631ce..0e6d106c816 100644
--- a/packages/@react-spectrum/s2/package.json
+++ b/packages/@react-spectrum/s2/package.json
@@ -129,6 +129,7 @@
     "@react-aria/interactions": "^3.22.2",
     "@react-aria/utils": "^3.25.2",
     "@react-spectrum/utils": "^3.11.10",
+    "@react-stately/virtualizer": "^4.0.1",
     "@react-types/color": "3.0.0-rc.1",
     "@react-types/dialog": "^3.5.8",
     "@react-types/provider": "^3.7.2",
diff --git a/packages/@react-spectrum/s2/src/ActionButton.tsx b/packages/@react-spectrum/s2/src/ActionButton.tsx
index 31c74c58ac3..e02fb5b3b91 100644
--- a/packages/@react-spectrum/s2/src/ActionButton.tsx
+++ b/packages/@react-spectrum/s2/src/ActionButton.tsx
@@ -11,15 +11,17 @@
  */
 
 import {baseColor, fontRelative, style} from '../style/spectrum-theme' with { type: 'macro' };
-import {ButtonProps, ButtonRenderProps, ContextValue, OverlayTriggerStateContext, Provider, Button as RACButton} from 'react-aria-components';
+import {ButtonProps, ButtonRenderProps, ContextValue, OverlayTriggerStateContext, Provider, Button as RACButton, Text} from 'react-aria-components';
 import {centerBaseline} from './CenterBaseline';
 import {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with { type: 'macro' };
 import {IconContext} from './Icon';
 import {pressScale} from './pressScale';
-import {Text, TextContext} from './Content';
+import {SkeletonContext} from './Skeleton';
+import {TextContext} from './Content';
 import {useFocusableRef} from '@react-spectrum/utils';
+import {useFormProps} from './Form';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface ActionButtonStyleProps {
@@ -175,6 +177,7 @@ export const ActionButtonContext = createContext<ContextValue<ActionButtonProps,
 
 function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ActionButtonContext);
+  props = useFormProps(props as any);
   let domRef = useFocusableRef(ref);
   let overlayTriggerState = useContext(OverlayTriggerStateContext);
 
@@ -193,6 +196,7 @@ function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElem
       }, props.styles)}>
       <Provider
         values={[
+          [SkeletonContext, null],
           [TextContext, {styles: style({paddingY: '--labelPadding', order: 1, truncate: true})}],
           [IconContext, {
             render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
diff --git a/packages/@react-spectrum/s2/src/ActionMenu.tsx b/packages/@react-spectrum/s2/src/ActionMenu.tsx
index 01f5386db79..4e9437db079 100644
--- a/packages/@react-spectrum/s2/src/ActionMenu.tsx
+++ b/packages/@react-spectrum/s2/src/ActionMenu.tsx
@@ -26,10 +26,11 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface ActionMenuProps<T> extends
   Pick<MenuTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange' | 'align' | 'direction' | 'shouldFlip'>,
-  Pick<MenuProps<T>, 'children' | 'items' | 'disabledKeys' | 'onAction' | 'size'>,
-  Pick<ActionButtonProps, 'isDisabled' | 'isQuiet' | 'autoFocus'>,
+  Pick<MenuProps<T>, 'children' | 'items' | 'disabledKeys' | 'onAction'>,
+  Pick<ActionButtonProps, 'isDisabled' | 'isQuiet' | 'autoFocus' | 'size'>,
   StyleProps, DOMProps, AriaLabelingProps {
-  }
+  menuSize?: 'S' | 'M' | 'L' | 'XL'
+}
 
 export const ActionMenuContext = createContext<ContextValue<ActionMenuProps<any>, FocusableRefValue<HTMLButtonElement>>>(null);
 
@@ -41,7 +42,6 @@ function ActionMenu<T extends object>(props: ActionMenuProps<T>, ref: FocusableR
     buttonProps['aria-label'] = stringFormatter.format('menu.moreActions');
   }
 
-  // size independently controlled?
   return (
     <MenuTrigger
       isOpen={props.isOpen}
@@ -52,11 +52,11 @@ function ActionMenu<T extends object>(props: ActionMenuProps<T>, ref: FocusableR
       shouldFlip={props.shouldFlip}>
       <ActionButton
         ref={ref}
-        aria-label="Help"
         size={props.size}
         isDisabled={props.isDisabled}
         autoFocus={props.autoFocus}
         isQuiet={props.isQuiet}
+        styles={props.styles}
         {...buttonProps}>
         <MoreIcon />
       </ActionButton>
@@ -64,7 +64,7 @@ function ActionMenu<T extends object>(props: ActionMenuProps<T>, ref: FocusableR
         items={props.items}
         disabledKeys={props.disabledKeys}
         onAction={props.onAction}
-        size={props.size}>
+        size={props.menuSize}>
         {/* @ts-ignore TODO: fix type, right now this component is the same as Menu */}
         {props.children}
       </Menu>
diff --git a/packages/@react-spectrum/s2/src/Avatar.tsx b/packages/@react-spectrum/s2/src/Avatar.tsx
index da7ba47049b..7b8790ef928 100644
--- a/packages/@react-spectrum/s2/src/Avatar.tsx
+++ b/packages/@react-spectrum/s2/src/Avatar.tsx
@@ -15,6 +15,7 @@ import {createContext, forwardRef} from 'react';
 import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'};
+import {Image} from './Image';
 import {style} from '../style/spectrum-theme' with { type: 'macro' };
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -71,16 +72,17 @@ function Avatar(props: AvatarProps, ref: DOMRef<HTMLImageElement>) {
   let remSize = size / 16 + 'rem';
   let isLarge = size >= 64;
   return (
-    <img
+    <Image
       {...domProps}
       ref={domRef}
       alt={alt}
-      style={{
+      UNSAFE_style={{
         ...UNSAFE_style,
         width: remSize,
         height: remSize
       }}
-      className={(UNSAFE_className ?? '') + imageStyles({isOverBackground, isLarge}, props.styles)}
+      UNSAFE_className={UNSAFE_className}
+      styles={imageStyles({isOverBackground, isLarge}, props.styles)}
       src={src} />
   );
 }
diff --git a/packages/@react-spectrum/s2/src/Badge.tsx b/packages/@react-spectrum/s2/src/Badge.tsx
index 44c79b0d2cf..6ba6216dcf0 100644
--- a/packages/@react-spectrum/s2/src/Badge.tsx
+++ b/packages/@react-spectrum/s2/src/Badge.tsx
@@ -18,6 +18,7 @@ import {filterDOMProps} from '@react-aria/utils';
 import {fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'};
 import {IconContext} from './Icon';
 import React, {createContext, forwardRef, ReactNode} from 'react';
+import {SkeletonWrapper} from './Skeleton';
 import {Text, TextContext} from './Content';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -25,13 +26,13 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 export interface BadgeStyleProps {
   /**
    * The size of the badge.
-   *
+   * 
    * @default 'S'
    */
   size?: 'S' | 'M' | 'L' | 'XL',
   /**
    * The variant changes the background color of the badge. When badge has a semantic meaning, they should use the variant for semantic colors.
-   *
+   * 
    * @default 'neutral'
    */
   variant?: 'accent' | 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'gray' | 'red' | 'orange' | 'yellow' | 'charteuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'brown' | 'cinnamon' | 'silver',
@@ -201,17 +202,20 @@ function Badge(props: BadgeProps, ref: DOMRef<HTMLDivElement>) {
           styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
         }]
       ]}>
-      <span
-        {...filterDOMProps(otherProps)}
-        role="presentation"
-        className={(props.UNSAFE_className || '') + badge({variant, size, fillStyle}, props.styles)}
-        ref={domRef}>
-        {
-          typeof children === 'string' || isTextOnly
-            ? <Text>{children}</Text>
-            : children
-        }
-      </span>
+      <SkeletonWrapper>
+        <span
+          {...filterDOMProps(otherProps)}
+          role="presentation"
+          className={(props.UNSAFE_className || '') + badge({variant, size, fillStyle}, props.styles)}
+          style={props.UNSAFE_style}
+          ref={domRef}>
+          {
+            typeof children === 'string' || isTextOnly
+              ? <Text>{children}</Text>
+              : children
+          }
+        </span>
+      </SkeletonWrapper>
     </Provider>
   );
 }
diff --git a/packages/@react-spectrum/s2/src/Button.tsx b/packages/@react-spectrum/s2/src/Button.tsx
index fa29d9e14d8..6c12a7e0d1e 100644
--- a/packages/@react-spectrum/s2/src/Button.tsx
+++ b/packages/@react-spectrum/s2/src/Button.tsx
@@ -18,8 +18,10 @@ import {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {IconContext} from './Icon';
 import {pressScale} from './pressScale';
+import {SkeletonContext} from './Skeleton';
 import {Text, TextContext} from './Content';
 import {useFocusableRef} from '@react-spectrum/utils';
+import {useFormProps} from './Form';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 interface ButtonStyleProps {
@@ -272,6 +274,7 @@ const button = style<ButtonRenderProps & ButtonStyleProps>({
 
 function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ButtonContext);
+  props = useFormProps(props);
   let domRef = useFocusableRef(ref);
   let overlayTriggerState = useContext(OverlayTriggerStateContext);
 
@@ -291,6 +294,7 @@ function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {
       }, props.styles)}>
       <Provider
         values={[
+          [SkeletonContext, null],
           [TextContext, {styles: style({paddingY: '--labelPadding', order: 1})}],
           [IconContext, {
             render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
@@ -313,6 +317,7 @@ export {_Button as Button};
 
 function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, LinkButtonContext);
+  props = useFormProps(props);
   let domRef = useFocusableRef(ref);
   let overlayTriggerState = useContext(OverlayTriggerStateContext);
 
@@ -332,6 +337,7 @@ function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>
       }, props.styles)}>
       <Provider
         values={[
+          [SkeletonContext, null],
           [TextContext, {styles: style({paddingY: '--labelPadding', order: 1})}],
           [IconContext, {
             render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
diff --git a/packages/@react-spectrum/s2/src/Card.tsx b/packages/@react-spectrum/s2/src/Card.tsx
new file mode 100644
index 00000000000..6cc89a10bde
--- /dev/null
+++ b/packages/@react-spectrum/s2/src/Card.tsx
@@ -0,0 +1,728 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ActionMenuContext} from './ActionMenu';
+import {AvatarContext} from './Avatar';
+import {ButtonContext, LinkButtonContext} from './Button';
+import {Checkbox} from './Checkbox';
+import {colorToken} from '../style/tokens' with {type: 'macro'};
+import {ContentContext, FooterContext, TextContext} from './Content';
+import {ContextValue, DEFAULT_SLOT, type GridListItem, GridListItemProps, Provider} from 'react-aria-components';
+import {createContext, CSSProperties, forwardRef, ReactNode, useContext} from 'react';
+import {DividerContext} from './Divider';
+import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
+import {filterDOMProps} from '@react-aria/utils';
+import {focusRing, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};
+import {IllustrationContext} from './Icon';
+import {ImageContext} from './Image';
+import {ImageCoordinator} from './ImageCoordinator';
+import {lightDark, size, style} from '../style/spectrum-theme' with {type: 'macro'};
+import {mergeStyles} from '../style/runtime';
+import {pressScale} from './pressScale';
+import {SkeletonContext, SkeletonWrapper, useIsSkeleton} from './Skeleton';
+import {useDOMRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
+
+export interface CardProps extends Omit<GridListItemProps, 'className' | 'style' | 'children'>, StyleProps {
+  /** The children of the Card. */
+  children: ReactNode,
+  /**
+   * The size of the Card.
+   * @default 'M'
+   */
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL',
+  /**
+   * The amount of internal padding within the Card.
+   * @default 'regular'
+   */
+  density?: 'compact' | 'regular' | 'spacious',
+  /**
+   * The visual style of the Card.
+   * @default 'primary'
+   */
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet'
+}
+
+const borderRadius = {
+  default: 'lg',
+  size: {
+    XS: 'default',
+    S: 'default'
+  }
+} as const;
+
+let card = style({
+  display: 'flex',
+  flexDirection: 'column',
+  position: 'relative',
+  borderRadius,
+  '--s2-container-bg': {
+    type: 'backgroundColor',
+    value: {
+      variant: {
+        primary: 'elevated',
+        secondary: 'layer-1'
+      },
+      forcedColors: 'ButtonFace'
+    }
+  },
+  backgroundColor: {
+    default: '--s2-container-bg',
+    variant: {
+      tertiary: 'transparent',
+      quiet: 'transparent'
+    }
+  },
+  boxShadow: {
+    default: 'emphasized',
+    isHovered: 'elevated',
+    isFocusVisible: 'elevated',
+    isSelected: 'elevated',
+    forcedColors: '[0 0 0 1px ButtonBorder]',
+    variant: {
+      tertiary: {
+        // Render border with box-shadow to avoid affecting layout.
+        default: `[0 0 0 1px ${colorToken('gray-100')}]`,
+        isHovered: `[0 0 0 1px ${colorToken('gray-200')}]`,
+        isFocusVisible: `[0 0 0 1px ${colorToken('gray-200')}]`,
+        isSelected: 'none',
+        forcedColors: '[0 0 0 1px ButtonBorder]'
+      },
+      quiet: 'none'
+    }
+  },
+  forcedColorAdjust: 'none',
+  transition: 'default',
+  fontFamily: 'sans',
+  overflow: {
+    default: 'clip',
+    variant: {
+      quiet: 'visible'
+    }
+  },
+  disableTapHighlight: true,
+  userSelect: {
+    isCardView: 'none'
+  },
+  cursor: {
+    isLink: 'pointer'
+  },
+  width: {
+    size: {
+      XS: 112,
+      S: 192,
+      M: 240,
+      L: 320,
+      XL: size(400)
+    },
+    isCardView: 'full'
+  },
+  height: 'full',
+  '--card-spacing': {
+    type: 'paddingTop',
+    value: {
+      density: {
+        compact: {
+          size: {
+            XS: size(6),
+            S: 8,
+            M: 12,
+            L: 16,
+            XL: 20
+          }
+        },
+        regular: {
+          size: {
+            XS: 8,
+            S: 12,
+            M: 16,
+            L: 20,
+            XL: 24
+          }
+        },
+        spacious: {
+          size: {
+            XS: 12,
+            S: 16,
+            M: 20,
+            L: 24,
+            XL: 28
+          }
+        }
+      }
+    }
+  },
+  '--card-padding-y': {
+    type: 'paddingTop',
+    value: {
+      default: '--card-spacing',
+      variant: {
+        quiet: 0
+      }
+    }
+  },
+  '--card-padding-x': {
+    type: 'paddingStart',
+    value: {
+      default: '--card-spacing',
+      variant: {
+        quiet: 0
+      }
+    }
+  },
+  paddingY: '--card-padding-y',
+  paddingX: '--card-padding-x',
+  boxSizing: 'border-box',
+  ...focusRing(),
+  outlineStyle: {
+    default: 'none',
+    isFocusVisible: 'solid',
+    // Focus ring moves to preview when quiet.
+    variant: {
+      quiet: 'none'
+    }
+  }
+}, getAllowedOverrides());
+
+let selectionIndicator = style({
+  position: 'absolute',
+  inset: 0,
+  zIndex: 2,
+  borderRadius,
+  pointerEvents: 'none',
+  borderWidth: 2,
+  borderStyle: 'solid',
+  borderColor: 'gray-1000',
+  transition: 'default',
+  opacity: {
+    default: 0,
+    isSelected: 1
+  },
+  // Quiet cards with no checkbox have an extra inner stroke
+  // to distinguish the selection indicator from the preview.
+  outlineColor: 'gray-25',
+  outlineOffset: -4,
+  outlineStyle: {
+    default: 'none',
+    isStrokeInner: 'solid'
+  },
+  outlineWidth: 2
+});
+
+let preview = style({
+  position: 'relative',
+  transition: 'default',
+  overflow: 'clip',
+  marginX: '[calc(var(--card-padding-x) * -1)]',
+  marginTop: '[calc(var(--card-padding-y) * -1)]',
+  marginBottom: {
+    ':last-child': '[calc(var(--card-padding-y) * -1)]'
+  },
+  borderRadius: {
+    isQuiet: borderRadius
+  },
+  boxShadow: {
+    isQuiet: {
+      isHovered: 'elevated',
+      isFocusVisible: 'elevated',
+      isSelected: 'elevated'
+    }
+  },
+  ...focusRing(),
+  outlineStyle: {
+    default: 'none',
+    isQuiet: {
+      isFocusVisible: 'solid'
+    }
+  }
+});
+
+const image = style({
+  width: 'full',
+  aspectRatio: '[3/2]',
+  objectFit: 'cover',
+  userSelect: 'none',
+  pointerEvents: 'none'
+});
+
+let title = style({
+  font: 'title',
+  fontSize: {
+    size: {
+      XS: 'title-xs',
+      S: 'title-xs',
+      M: 'title-sm',
+      L: 'title',
+      XL: 'title-lg'
+    }
+  },
+  lineClamp: 3,
+  gridArea: 'title'
+});
+
+let description = style({
+  font: 'body',
+  fontSize: {
+    size: {
+      XS: 'body-2xs',
+      S: 'body-2xs',
+      M: 'body-xs',
+      L: 'body-sm',
+      XL: 'body'
+    }
+  },
+  lineClamp: 3,
+  gridArea: 'description'
+});
+
+let content = style({
+  display: 'grid',
+  // By default, all elements are displayed in a stack.
+  // If an action menu is present, place it next to the title.
+  gridTemplateColumns: {
+    default: ['1fr'],
+    ':has([data-slot=menu])': ['minmax(0, 1fr)', 'auto']
+  },
+  gridTemplateAreas: {
+    default: [
+      'title',
+      'description'
+    ],
+    ':has([data-slot=menu])': [
+      'title menu',
+      'description description'
+    ]
+  },
+  columnGap: 4,
+  flexGrow: 1,
+  alignItems: 'baseline',
+  alignContent: 'space-between',
+  rowGap: {
+    size: {
+      XS: 4,
+      S: 4,
+      M: size(6),
+      L: size(6),
+      XL: 8
+    }
+  },
+  paddingTop: {
+    default: '--card-spacing',
+    ':first-child': 0
+  },
+  paddingBottom: {
+    default: '[calc(var(--card-spacing) * 1.5 / 2)]',
+    ':last-child': 0
+  }
+});
+
+let footer = style({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'end',
+  justifyContent: 'space-between',
+  gap: 8,
+  paddingTop: '[calc(var(--card-spacing) * 1.5 / 2)]'
+});
+
+export const CardViewContext = createContext<'div' | typeof GridListItem>('div');
+export const CardContext = createContext<ContextValue<Partial<CardProps>, DOMRefValue<HTMLDivElement>>>(null);
+
+interface InternalCardContextValue {
+  isQuiet: boolean,
+  size: 'XS' | 'S' | 'M' | 'L' | 'XL',
+  isSelected: boolean,
+  isHovered: boolean,
+  isFocusVisible: boolean,
+  isPressed: boolean,
+  isCheckboxSelection: boolean
+}
+
+const InternalCardContext = createContext<InternalCardContextValue>({
+  isQuiet: false,
+  size: 'M',
+  isSelected: false,
+  isHovered: false,
+  isFocusVisible: false,
+  isPressed: false,
+  isCheckboxSelection: true
+});
+
+const actionButtonSize = {
+  XS: 'XS',
+  S: 'XS',
+  M: 'S',
+  L: 'M',
+  XL: 'L'
+} as const;
+
+export const Card = forwardRef(function Card(props: CardProps, ref: DOMRef<HTMLDivElement>) {
+  [props] = useSpectrumContextProps(props, ref, CardContext);
+  let domRef = useDOMRef(ref);
+  let {density = 'regular', size = 'M', variant = 'primary', UNSAFE_className = '', UNSAFE_style, styles, id, ...otherProps} = props;
+  let isQuiet = variant === 'quiet';
+  let isSkeleton = useIsSkeleton();
+  let children = (
+    <Provider
+      values={[
+        [ImageContext, {alt: '', styles: image}],
+        [TextContext, {
+          slots: {
+            [DEFAULT_SLOT]: {},
+            title: {styles: title({size})},
+            description: {styles: description({size})}
+          }
+        }],
+        [ContentContext, {styles: content({size})}],
+        [DividerContext, {size: 'S'}],
+        [FooterContext, {styles: footer}],
+        [ActionMenuContext, {
+          isQuiet: true,
+          size: actionButtonSize[size],
+          isDisabled: isSkeleton,
+          // @ts-ignore
+          'data-slot': 'menu',
+          styles: style({gridArea: 'menu'})
+        }],
+        [SkeletonContext, isSkeleton]
+      ]}>
+      <ImageCoordinator>
+        {props.children}
+      </ImageCoordinator>
+    </Provider>
+  );
+
+  let ElementType = useContext(CardViewContext);
+  if (ElementType === 'div' || isSkeleton) {
+    return (
+      <div
+        {...filterDOMProps(otherProps)}
+        id={String(id)}
+        // @ts-ignore - React < 19 compat
+        inert={isSkeleton ? 'true' : undefined}
+        ref={domRef}
+        className={UNSAFE_className + card({size, density, variant, isCardView: ElementType !== 'div'}, styles)}
+        style={UNSAFE_style}>
+        <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: false, isHovered: false, isFocusVisible: false, isSelected: false, isPressed: false}}>
+          {children}
+        </InternalCardContext.Provider>
+      </div>
+    );
+  }
+
+  let press = pressScale(domRef, UNSAFE_style);
+  return (
+    <ElementType
+      {...props}
+      ref={domRef}
+      className={renderProps => UNSAFE_className + card({...renderProps, isCardView: true, isLink: !!props.href, size, density, variant}, styles)}
+      style={renderProps => 
+        // Only the preview in quiet cards scales down on press
+        variant === 'quiet' ? UNSAFE_style : press(renderProps) 
+      }>
+      {({selectionMode, selectionBehavior, isHovered, isFocusVisible, isSelected, isPressed}) => (
+        <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: selectionMode !== 'none' && selectionBehavior === 'toggle', isHovered, isFocusVisible, isSelected, isPressed}}>
+          {/* Selection indicator and checkbox move inside the preview for quiet cards */}
+          {!isQuiet && <SelectionIndicator />}
+          {!isQuiet && selectionMode !== 'none' && selectionBehavior === 'toggle' &&
+            <CardCheckbox />
+          }
+          {/* this makes the :first-child selector work even with the checkbox */}
+          <div className={style({display: 'contents'})}>
+            {children}
+          </div>
+        </InternalCardContext.Provider>
+      )}
+    </ElementType>
+  );
+});
+
+function SelectionIndicator() {
+  let {size, isSelected, isQuiet, isCheckboxSelection} = useContext(InternalCardContext);
+  return (
+    <div
+      className={selectionIndicator({
+        size,
+        isSelected,
+        // Add an inner stroke only for quiet cards with no checkbox to 
+        // help distinguish the selected state from the preview.
+        isStrokeInner: isQuiet && !isCheckboxSelection
+      })} />
+  );
+}
+
+function CardCheckbox() {
+  let {size} = useContext(InternalCardContext);
+  return (
+    <div
+      className={style({
+        position: 'absolute',
+        top: '--card-spacing',
+        insetStart: '--card-spacing',
+        zIndex: 2,
+        padding: 4,
+        backgroundColor: lightDark('transparent-white-600', 'transparent-black-600'),
+        borderRadius: 'default',
+        boxShadow: 'emphasized'
+      })}>
+      <Checkbox
+        slot="selection"
+        excludeFromTabOrder
+        size={size === 'XS' ? 'S' : size} />
+    </div>
+  );
+}
+
+export interface CardPreviewProps extends UnsafeStyles, DOMProps {
+  children: ReactNode
+}
+
+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 domRef = useDOMRef(ref);
+  return (
+    <div
+      {...filterDOMProps(props)}
+      slot="preview"
+      ref={domRef}
+      className={UNSAFE_className + preview({size, isQuiet, isHovered, isFocusVisible, isSelected})}
+      style={isQuiet ? pressScale(domRef)({isPressed}) : UNSAFE_style}>
+      {isQuiet && <SelectionIndicator />}
+      {isQuiet && isCheckboxSelection && <CardCheckbox />}
+      <div className={style({borderRadius: '[inherit]', overflow: 'clip'})}>
+        {props.children}
+      </div>
+    </div>
+  );
+});
+
+const collection = style({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(3, 1fr)',
+  gap: {
+    default: 4,
+    size: {
+      XS: 2,
+      S: 2
+    }
+  }
+});
+
+const collectionImage = style({
+  width: 'full',
+  aspectRatio: {
+    default: 'square',
+    ':nth-last-child(4):first-child': '[3/2]'
+  },
+  gridColumnEnd: {
+    ':nth-last-child(4):first-child': 'span 3'
+  },
+  objectFit: 'cover',
+  pointerEvents: 'none',
+  userSelect: 'none'
+});
+
+export const CollectionCardPreview = forwardRef(function CollectionCardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {
+  let {size} = useContext(InternalCardContext)!;
+  return (
+    <CardPreview {...props} ref={ref}>
+      <div className={collection({size})}>
+        <ImageContext.Provider value={{styles: collectionImage}}>
+          {props.children}
+        </ImageContext.Provider>
+      </div>
+    </CardPreview>
+  );
+});
+
+export interface AssetCardProps extends Omit<CardProps, 'density'> {}
+
+export const AssetCard = forwardRef(function AssetCard(props: AssetCardProps, ref: DOMRef<HTMLDivElement>) {
+  return (
+    <Card {...props} ref={ref} density="regular">
+      <Provider
+        values={[
+          [ImageContext, {
+            alt: '',
+            styles: style({
+              width: 'full',
+              aspectRatio: 'square',
+              objectFit: 'contain',
+              pointerEvents: 'none',
+              userSelect: 'none'
+            })
+          }],
+          [IllustrationContext, {
+            render(icon) {
+              return (
+                <SkeletonWrapper>
+                  <div
+                    className={style({
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      backgroundColor: 'gray-100',
+                      aspectRatio: 'square'
+                    })}>
+                    {icon}
+                  </div>
+                </SkeletonWrapper>
+              );
+            },
+            styles: style({
+              height: 'auto',
+              maxSize: 160,
+              // TODO: this is made up.
+              width: '[50%]'
+            })
+          }]
+        ]}>
+        {props.children}
+      </Provider>
+    </Card>
+  );
+});
+
+const avatarSize = {
+  XS: 24,
+  S: 48,
+  M: 64,
+  L: 64,
+  XL: 80
+} as const;
+
+export interface UserCardProps extends Omit<CardProps, 'density' | 'variant'> {
+  // Quiet is not supported due to lack of indent between preview and avatar.
+  variant?: 'primary' | 'secondary' | 'tertiary'
+}
+
+export const UserCard = forwardRef(function UserCard(props: CardProps, ref: DOMRef<HTMLDivElement>) {
+  let {size = 'M'} = props;
+  return (
+    <Card {...props} ref={ref} density="spacious">
+      <Provider
+        values={[
+          [ImageContext, {
+            alt: '',
+            styles: style({
+              width: 'full',
+              aspectRatio: '[3/1]',
+              objectFit: 'cover',
+              pointerEvents: 'none',
+              userSelect: 'none'
+            })
+          }],
+          [AvatarContext, {
+            size: avatarSize[size],
+            UNSAFE_style: {
+              '--size': avatarSize[size] + 'px'
+            } as CSSProperties,
+            styles: style({
+              position: 'relative',
+              marginTop: {
+                default: 0,
+                ':is([slot=preview] + &)': '[calc(var(--size) / -2)]'
+              }
+            }),
+            isOverBackground: true
+          }]
+        ]}>
+        {props.children}
+      </Provider>
+    </Card>
+  );
+});
+
+const buttonSize = {
+  XS: 'S',
+  S: 'S',
+  M: 'M',
+  L: 'L',
+  XL: 'XL'
+} as const;
+
+export interface ProductCardProps extends Omit<CardProps, 'density' | 'variant'> {
+  // Quiet is not supported due to lack of indent between preview and thumbnail.
+  variant?: 'primary' | 'secondary' | 'tertiary'
+}
+
+export const ProductCard = forwardRef(function ProductCard(props: ProductCardProps, ref: DOMRef<HTMLDivElement>) {
+  let {size = 'M'} = props;
+  return (
+    <Card {...props} ref={ref} density="spacious">
+      <Provider
+        values={[
+          [ImageContext, {
+            slots: {
+              preview: {
+                alt: '',
+                styles: style({
+                  width: 'full',
+                  aspectRatio: '[5/1]',
+                  objectFit: 'cover',
+                  pointerEvents: 'none',
+                  userSelect: 'none'
+                })
+              },
+              thumbnail: {
+                alt: '',
+                styles: style({
+                  position: 'relative',
+                  pointerEvents: 'none',
+                  userSelect: 'none',
+                  size: {
+                    size: {
+                      XS: 24,
+                      S: 36,
+                      M: 40,
+                      L: 44,
+                      XL: 56
+                    }
+                  },
+                  borderRadius: {
+                    default: 'default',
+                    size: {
+                      XS: 'sm',
+                      S: 'sm'
+                    }
+                  },
+                  objectFit: 'cover',
+                  marginTop: {
+                    default: 0,
+                    ':is([slot=preview] + &)': '[calc(self(height) / -2)]'
+                  },
+                  outlineStyle: 'solid',
+                  outlineWidth: {
+                    default: 2,
+                    size: {
+                      XS: 1
+                    }
+                  },
+                  outlineColor: '--s2-container-bg'
+                })({size})
+              }
+            }
+          }],
+          [FooterContext, {
+            styles: mergeStyles(footer, style({
+              justifyContent: 'end'
+            }))
+          }],
+          [ButtonContext, {size: buttonSize[size]}],
+          [LinkButtonContext, {size: buttonSize[size]}]
+        ]}>
+        {props.children}
+      </Provider>
+    </Card>
+  );
+});
diff --git a/packages/@react-spectrum/s2/src/CardView.tsx b/packages/@react-spectrum/s2/src/CardView.tsx
new file mode 100644
index 00000000000..d1291b6ef43
--- /dev/null
+++ b/packages/@react-spectrum/s2/src/CardView.tsx
@@ -0,0 +1,542 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {
+  GridList as AriaGridList,
+  GridLayoutOptions,
+  GridListItem,
+  GridListProps,
+  UNSTABLE_Virtualizer
+} from 'react-aria-components';
+import {CardContext, CardViewContext} from './Card';
+import {focusRing, getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
+import {ImageCoordinator} from './ImageCoordinator';
+import {InvalidationContext, Layout, LayoutInfo, Rect, Size} from '@react-stately/virtualizer';
+import {Key, LoadingState, Node} from '@react-types/shared';
+import {style} from '../style/spectrum-theme' with {type: 'macro'};
+import {useLoadMore} from '@react-aria/utils';
+import {useMemo, useRef} from 'react';
+
+export interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'className' | 'style'>, UnsafeStyles {
+  /**
+   * The layout of the cards.
+   * @default 'grid'
+   */
+  layout?: 'grid' | 'waterfall',
+  /**
+   * The size of the cards.
+   * @default 'M'
+   */
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL',
+  /**
+   * The amount of space between the cards.
+   * @default 'regular'
+   */
+  density?: 'compact' | 'regular' | 'spacious',
+  /**
+   * The visual style of the cards.
+   * @default 'primary'
+   */
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet',
+  /**
+   * How selection should be displayed.
+   * @default 'checkbox'
+   */
+  selectionStyle?: 'checkbox' | 'highlight',
+  /** The loading state of the CardView. */
+  loadingState?: LoadingState,
+  /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */
+  onLoadMore?: () => void,
+  /** Spectrum-defined styles, returned by the `style()` macro. */
+  styles?: StylesPropWithHeight
+}
+
+class FlexibleGridLayout<T extends object, O> extends Layout<Node<T>, O> {
+  protected minItemSize: Size;
+  protected maxItemSize: Size;
+  protected minSpace: Size;
+  protected maxColumns: number;
+  protected dropIndicatorThickness: number;
+  protected contentSize: Size = new Size();
+  protected layoutInfos: Map<Key, LayoutInfo> = new Map();
+
+  constructor(options: GridLayoutOptions) {
+    super();
+    this.minItemSize = options.minItemSize || new Size(200, 200);
+    this.maxItemSize = options.maxItemSize || new Size(Infinity, Infinity);
+    this.minSpace = options.minSpace || new Size(18, 18);
+    this.maxColumns = options.maxColumns || Infinity;
+    this.dropIndicatorThickness = options.dropIndicatorThickness || 2;
+  }
+
+  update(invalidationContext: InvalidationContext): void {
+    let visibleWidth = this.virtualizer.visibleRect.width;
+
+    // The max item width is always the entire viewport.
+    // If the max item height is infinity, scale in proportion to the max width.
+    let maxItemWidth = Math.min(this.maxItemSize.width, visibleWidth);
+    let maxItemHeight = Number.isFinite(this.maxItemSize.height) 
+      ? this.maxItemSize.height
+      : Math.floor((this.minItemSize.height / this.minItemSize.width) * maxItemWidth);
+
+    // Compute the number of rows and columns needed to display the content
+    let columns = Math.floor(visibleWidth / (this.minItemSize.width + this.minSpace.width));
+    let numColumns = Math.max(1, Math.min(this.maxColumns, columns));
+
+    // Compute the available width (minus the space between items)
+    let width = visibleWidth - (this.minSpace.width * Math.max(0, numColumns));
+
+    // Compute the item width based on the space available
+    let itemWidth = Math.floor(width / numColumns);
+    itemWidth = Math.max(this.minItemSize.width, Math.min(maxItemWidth, itemWidth));
+
+    // Compute the item height, which is proportional to the item width
+    let t = ((itemWidth - this.minItemSize.width) / Math.max(1, maxItemWidth - this.minItemSize.width));
+    let itemHeight = this.minItemSize.height +  Math.floor((maxItemHeight - this.minItemSize.height) * t);
+    itemHeight = Math.max(this.minItemSize.height, Math.min(maxItemHeight, itemHeight));    
+
+    // Compute the horizontal spacing and content height
+    let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));
+
+    let rows = Math.ceil(this.virtualizer.collection.size / numColumns);
+    let iterator = this.virtualizer.collection[Symbol.iterator]();
+    let y = rows > 0 ? this.minSpace.height : 0;
+    let newLayoutInfos = new Map();
+    let skeleton: Node<T> | null = null;
+    let skeletonCount = 0;
+    for (let row = 0; row < rows; row++) {
+      let maxHeight = 0;
+      let rowLayoutInfos: LayoutInfo[] = [];
+      for (let col = 0; col < numColumns; col++) {
+        // Repeat skeleton until the end of the current row.
+        let node = skeleton || iterator.next().value;
+        if (!node) {
+          break;
+        }
+
+        if (node.type === 'skeleton') {
+          skeleton = node;
+        }
+
+        let key = skeleton ? `${skeleton.key}-${skeletonCount++}` : node.key;
+        let x = horizontalSpacing + col * (itemWidth + horizontalSpacing);
+        let oldLayoutInfo = this.layoutInfos.get(key);
+        let height = itemHeight;
+        let estimatedSize = true;
+        if (oldLayoutInfo) {
+          height = oldLayoutInfo.rect.height;
+          estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize;
+        }
+
+        let rect = new Rect(x, y, itemWidth, height);
+        let layoutInfo = new LayoutInfo(node.type, key, rect);
+        layoutInfo.estimatedSize = estimatedSize;
+        layoutInfo.allowOverflow = true;
+        if (skeleton) {
+          layoutInfo.content = {...skeleton};
+        }
+        newLayoutInfos.set(key, layoutInfo);
+        rowLayoutInfos.push(layoutInfo);
+
+        maxHeight = Math.max(maxHeight, rect.height);
+      }
+
+      for (let layoutInfo of rowLayoutInfos) {
+        layoutInfo.rect.height = maxHeight;
+      }
+
+      y += maxHeight + this.minSpace.height;
+
+      // Keep adding skeleton rows until we fill the viewport
+      if (skeleton && row === rows - 1 && y < this.virtualizer.visibleRect.height) {
+        rows++;
+      }
+    }
+
+    this.layoutInfos = newLayoutInfos;
+    this.contentSize = new Size(this.virtualizer.visibleRect.width, y);
+  }
+
+  getLayoutInfo(key: Key): LayoutInfo {
+    return this.layoutInfos.get(key)!;
+  }
+
+  getContentSize(): Size {
+    return this.contentSize;
+  }
+
+  getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {
+    let layoutInfos: LayoutInfo[] = [];
+    for (let layoutInfo of this.layoutInfos.values()) {
+      if (layoutInfo.rect.intersects(rect) || this.virtualizer.isPersistedKey(layoutInfo.key)) {
+        layoutInfos.push(layoutInfo);
+      }
+    }
+    return layoutInfos;
+  }
+
+  updateItemSize(key: Key, size: Size) {
+    let layoutInfo = this.layoutInfos.get(key);
+    if (!size || !layoutInfo) {
+      return false;
+    }
+
+    if (size.height !== layoutInfo.rect.height) {
+      let newLayoutInfo = layoutInfo.copy();
+      newLayoutInfo.rect.height = size.height;
+      newLayoutInfo.estimatedSize = false;
+      this.layoutInfos.set(key, newLayoutInfo);
+      return true;
+    }
+
+    return false;
+  }
+}
+
+class WaterfallLayout<T extends object, O> extends Layout<Node<T>, O> {
+  protected minItemSize: Size;
+  protected maxItemSize: Size;
+  protected minSpace: Size;
+  protected maxColumns: number;
+  protected dropIndicatorThickness: number;
+  protected contentSize: Size = new Size();
+  protected layoutInfos: Map<Key, LayoutInfo> = new Map();
+
+  constructor(options: GridLayoutOptions) {
+    super();
+    this.minItemSize = options.minItemSize || new Size(200, 200);
+    this.maxItemSize = options.maxItemSize || new Size(Infinity, Infinity);
+    this.minSpace = options.minSpace || new Size(18, 18);
+    this.maxColumns = options.maxColumns || Infinity;
+    this.dropIndicatorThickness = options.dropIndicatorThickness || 2;
+  }
+
+  update(invalidationContext: InvalidationContext): void {
+    let visibleWidth = this.virtualizer.visibleRect.width;
+
+    // The max item width is always the entire viewport.
+    // If the max item height is infinity, scale in proportion to the max width.
+    let maxItemWidth = Math.min(this.maxItemSize.width, visibleWidth);
+    let maxItemHeight = Number.isFinite(this.maxItemSize.height) 
+      ? this.maxItemSize.height
+      : Math.floor((this.minItemSize.height / this.minItemSize.width) * maxItemWidth);
+
+    // Compute the number of rows and columns needed to display the content
+    let columns = Math.floor(visibleWidth / (this.minItemSize.width + this.minSpace.width));
+    let numColumns = Math.max(1, Math.min(this.maxColumns, columns));
+
+    // Compute the available width (minus the space between items)
+    let width = visibleWidth - (this.minSpace.width * Math.max(0, numColumns));
+
+    // Compute the item width based on the space available
+    let itemWidth = Math.floor(width / numColumns);
+    itemWidth = Math.max(this.minItemSize.width, Math.min(maxItemWidth, itemWidth));
+
+    // Compute the item height, which is proportional to the item width
+    let t = ((itemWidth - this.minItemSize.width) / Math.max(1, maxItemWidth - this.minItemSize.width));
+    let itemHeight = this.minItemSize.height +  Math.floor((maxItemHeight - this.minItemSize.height) * t);
+    itemHeight = Math.max(this.minItemSize.height, Math.min(maxItemHeight, itemHeight));    
+
+    // Compute the horizontal spacing and content height
+    let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));
+
+    // Setup an array of column heights
+    let columnHeights = Array(numColumns).fill(this.minSpace.height);
+    let newLayoutInfos = new Map();
+    let addNode = (key, node) => {
+      let oldLayoutInfo = this.layoutInfos.get(key);
+      let height = itemHeight;
+      let estimatedSize = true;
+      if (oldLayoutInfo) {
+        height = oldLayoutInfo.rect.height;
+        estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize;
+      }
+
+      // Figure out which column to place the item in, and compute its position.
+      let column = columnHeights.reduce((minIndex, h, i) => h < columnHeights[minIndex] ? i : minIndex, 0);
+      let x = horizontalSpacing + column * (itemWidth + horizontalSpacing);
+      let y = columnHeights[column];
+
+      let rect = new Rect(x, y, itemWidth, height);
+      let layoutInfo = new LayoutInfo(node.type, key, rect);
+      layoutInfo.estimatedSize = estimatedSize;
+      layoutInfo.allowOverflow = true;
+      newLayoutInfos.set(key, layoutInfo);
+
+      columnHeights[column] += layoutInfo.rect.height + this.minSpace.height;
+      return layoutInfo;
+    };
+
+    let skeletonCount = 0;
+    for (let node of this.virtualizer.collection) {
+      if (node.type === 'skeleton') {
+        // Add skeleton cards until every column has at least one, and we fill the viewport.
+        let startingHeights = [...columnHeights];
+        while (
+          !columnHeights.every((h, i) => h !== startingHeights[i]) ||
+          Math.min(...columnHeights) < this.virtualizer.visibleRect.height
+        ) {
+          let layoutInfo = addNode(`${node.key}-${skeletonCount++}`, node);
+          layoutInfo.content = this.layoutInfos.get(layoutInfo.key)?.content || {...node};
+        }
+        break;
+      } else {
+        addNode(node.key, node);
+      }
+    }
+
+    // Reset all columns to the maximum for the next section
+    let maxHeight = Math.max(...columnHeights);
+    this.contentSize = new Size(this.virtualizer.visibleRect.width, maxHeight);
+    this.layoutInfos = newLayoutInfos;
+  }
+
+  getLayoutInfo(key: Key): LayoutInfo {
+    return this.layoutInfos.get(key)!;
+  }
+
+  getContentSize(): Size {
+    return this.contentSize;
+  }
+
+  getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {
+    let layoutInfos: LayoutInfo[] = [];
+    for (let layoutInfo of this.layoutInfos.values()) {
+      if (layoutInfo.rect.intersects(rect) || this.virtualizer.isPersistedKey(layoutInfo.key)) {
+        layoutInfos.push(layoutInfo);
+      }
+    }
+    return layoutInfos;
+  }
+
+  updateItemSize(key: Key, size: Size) {
+    let layoutInfo = this.layoutInfos.get(key);
+    if (!size || !layoutInfo) {
+      return false;
+    }
+
+    if (size.height !== layoutInfo.rect.height) {
+      let newLayoutInfo = layoutInfo.copy();
+      newLayoutInfo.rect.height = size.height;
+      newLayoutInfo.estimatedSize = false;
+      this.layoutInfos.set(key, newLayoutInfo);
+      return true;
+    }
+
+    return false;
+  }
+
+  // Override keyboard navigation to work spacially.
+  getKeyRightOf(key: Key): Key | null {
+    let layoutInfo = this.getLayoutInfo(key);
+    if (!layoutInfo) {
+      return null;
+    }
+
+    let rect = new Rect(layoutInfo.rect.maxX, layoutInfo.rect.y, this.virtualizer.visibleRect.maxX - layoutInfo.rect.maxX, layoutInfo.rect.height);
+    let layoutInfos = this.getVisibleLayoutInfos(rect);
+    let bestKey: Key | null = null;
+    let bestDistance = Infinity;
+    for (let candidate of layoutInfos) {
+      if (candidate.key === key) {
+        continue;
+      }
+
+      // Find the closest item in the x direction with the most overlap in the y direction.
+      let deltaX = candidate.rect.x - rect.x;
+      let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);
+      let distance = deltaX - overlapY;
+      if (distance < bestDistance) {
+        bestDistance = distance;
+        bestKey = candidate.key;
+      }
+    }
+
+    return bestKey;
+  }
+
+  getKeyLeftOf(key: Key): Key | null {
+    let layoutInfo = this.getLayoutInfo(key);
+    if (!layoutInfo) {
+      return null;
+    }
+
+    let rect = new Rect(0, layoutInfo.rect.y, layoutInfo.rect.x, layoutInfo.rect.height);
+    let layoutInfos = this.getVisibleLayoutInfos(rect);
+    let bestKey: Key | null = null;
+    let bestDistance = Infinity;
+    for (let candidate of layoutInfos) {
+      if (candidate.key === key) {
+        continue;
+      }
+
+      // Find the closest item in the x direction with the most overlap in the y direction.
+      let deltaX = rect.maxX - candidate.rect.maxX;
+      let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);
+      let distance = deltaX - overlapY;
+      if (distance < bestDistance) {
+        bestDistance = distance;
+        bestKey = candidate.key;
+      }
+    }
+
+    return bestKey;
+  }
+}
+
+const layoutOptions = {
+  XS: {
+    compact: {
+      minSpace: new Size(6, 6),
+      minItemSize: new Size(100, 100),
+      maxItemSize: new Size(140, 140)
+    },
+    regular: {
+      minSpace: new Size(8, 8),
+      minItemSize: new Size(100, 100),
+      maxItemSize: new Size(140, 140)
+    },
+    spacious: {
+      minSpace: new Size(12, 12),
+      minItemSize: new Size(100, 100),
+      maxItemSize: new Size(140, 140)
+    }
+  },
+  S: {
+    compact: {
+      minSpace: new Size(8, 8),
+      minItemSize: new Size(150, 150),
+      maxItemSize: new Size(210, 210)
+    },
+    regular: {
+      minSpace: new Size(12, 12),
+      minItemSize: new Size(150, 150),
+      maxItemSize: new Size(210, 210)
+    },
+    spacious: {
+      minSpace: new Size(16, 16),
+      minItemSize: new Size(150, 150),
+      maxItemSize: new Size(210, 210)
+    }
+  },
+  M: {
+    compact: {
+      minSpace: new Size(12, 12),
+      minItemSize: new Size(200, 200),
+      maxItemSize: new Size(280, 280)
+    },
+    regular: {
+      minSpace: new Size(16, 16),
+      minItemSize: new Size(200, 200),
+      maxItemSize: new Size(280, 280)
+    },
+    spacious: {
+      minSpace: new Size(20, 20),
+      minItemSize: new Size(200, 200),
+      maxItemSize: new Size(280, 280)
+    }
+  },
+  L: {
+    compact: {
+      minSpace: new Size(16, 16),
+      minItemSize: new Size(270, 270),
+      maxItemSize: new Size(370, 370)
+    },
+    regular: {
+      minSpace: new Size(20, 20),
+      minItemSize: new Size(270, 270),
+      maxItemSize: new Size(370, 370)
+    },
+    spacious: {
+      minSpace: new Size(24, 24),
+      minItemSize: new Size(270, 270),
+      maxItemSize: new Size(370, 370)
+    }
+  },
+  XL: {
+    compact: {
+      minSpace: new Size(20, 20),
+      minItemSize: new Size(340, 340),
+      maxItemSize: new Size(460, 460)
+    },
+    regular: {
+      minSpace: new Size(24, 24),
+      minItemSize: new Size(340, 340),
+      maxItemSize: new Size(460, 460)
+    },
+    spacious: {
+      minSpace: new Size(28, 28),
+      minItemSize: new Size(340, 340),
+      maxItemSize: new Size(460, 460)
+    }
+  }
+};
+
+const cardViewStyles = style({
+  overflowY: {
+    default: 'auto',
+    isLoading: 'hidden'
+  },
+  display: {
+    isEmpty: 'flex'
+  },
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  ...focusRing(),
+  outlineStyle: {
+    default: 'none',
+    isEmpty: {
+      isFocusVisible: 'solid'
+    }
+  },
+  outlineOffset: -2
+}, getAllowedOverrides({height: true}));
+
+export function CardView<T extends object>(props: CardViewProps<T>) {
+  let {children, layout: layoutName = 'grid', size = 'M', density = 'regular', variant = 'primary', selectionStyle = 'checkbox', UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;
+  let options = layoutOptions[size][density];
+  let layout = useMemo(() => {
+    variant; // needed to invalidate useMemo
+    return layoutName === 'waterfall' ? new WaterfallLayout(options) : new FlexibleGridLayout(options);
+  }, [options, variant, layoutName]);
+
+  let ref = useRef(null);
+  useLoadMore({
+    isLoading: props.loadingState !== 'idle' && props.loadingState !== 'error',
+    items: props.items, // TODO: ideally this would be the collection. items won't exist for static collections, or those using <Collection>
+    onLoadMore: props.onLoadMore
+  }, ref);
+
+  return (
+    <UNSTABLE_Virtualizer layout={layout}>
+      <CardViewContext.Provider value={GridListItem}>
+        <CardContext.Provider value={{size, variant}}>
+          <ImageCoordinator>
+            <AriaGridList
+              ref={ref}
+              {...otherProps}
+              layout="grid"
+              selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}
+              style={{
+                ...UNSAFE_style,
+                scrollPadding: options.minSpace.height
+              }}
+              className={renderProps => UNSAFE_className + cardViewStyles({...renderProps, isLoading: props.loadingState === 'loading'}, styles)}>
+              {children}
+            </AriaGridList>
+          </ImageCoordinator>
+        </CardContext.Provider>
+      </CardViewContext.Provider>
+    </UNSTABLE_Virtualizer>
+  );
+}
diff --git a/packages/@react-spectrum/s2/src/Checkbox.tsx b/packages/@react-spectrum/s2/src/Checkbox.tsx
index 041317d10f2..393e063c7ea 100644
--- a/packages/@react-spectrum/s2/src/Checkbox.tsx
+++ b/packages/@react-spectrum/s2/src/Checkbox.tsx
@@ -141,29 +141,41 @@ function Checkbox({children, ...props}: CheckboxProps, ref: FocusableRef<HTMLLab
       inputRef={inputRef}
       style={props.UNSAFE_style}
       className={renderProps => (props.UNSAFE_className || '') + wrapper({...renderProps, isInForm, size: props.size || 'M'}, props.styles)}>
-      {renderProps => (
-        <>
-          <CenterBaseline>
-            <div
-              ref={boxRef}
-              style={pressScale(boxRef)(renderProps)}
-              className={box({
-                ...renderProps,
-                isSelected: renderProps.isSelected || renderProps.isIndeterminate,
-                size: props.size || 'M',
-                isEmphasized: isInCheckboxGroup ? ctx?.isEmphasized : props.isEmphasized
-              })}>
-              {renderProps.isIndeterminate &&
-                <DashIcon size={iconSize[props.size || 'M']} className={iconStyles} />
-              }
-              {renderProps.isSelected && !renderProps.isIndeterminate &&
-                <CheckmarkIcon size={iconSize[props.size || 'M']} className={iconStyles} />
-              }
-            </div>
-          </CenterBaseline>
-          {children}
-        </>
-      )}
+      {renderProps => {
+        let checkbox = (
+          <div
+            ref={boxRef}
+            style={pressScale(boxRef)(renderProps)}
+            className={box({
+              ...renderProps,
+              isSelected: renderProps.isSelected || renderProps.isIndeterminate,
+              size: props.size || 'M',
+              isEmphasized: isInCheckboxGroup ? ctx?.isEmphasized : props.isEmphasized
+            })}>
+            {renderProps.isIndeterminate &&
+              <DashIcon size={iconSize[props.size || 'M']} className={iconStyles} />
+            }
+            {renderProps.isSelected && !renderProps.isIndeterminate &&
+              <CheckmarkIcon size={iconSize[props.size || 'M']} className={iconStyles} />
+            }
+          </div>
+        );
+
+        // Only render checkbox without center baseline if no label.
+        // This avoids expanding the checkbox height to the font's line height.
+        if (!children) {
+          return checkbox;
+        }
+
+        return (
+          <>
+            <CenterBaseline>
+              {checkbox}
+            </CenterBaseline>
+            {children}
+          </>
+        );
+      }}
     </AriaCheckbox>
   );
 }
diff --git a/packages/@react-spectrum/s2/src/Content.tsx b/packages/@react-spectrum/s2/src/Content.tsx
index 168e7fdb3db..13b27bdc563 100644
--- a/packages/@react-spectrum/s2/src/Content.tsx
+++ b/packages/@react-spectrum/s2/src/Content.tsx
@@ -10,12 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import {ContextValue, Keyboard as KeyboardAria, Header as RACHeader, Heading as RACHeading, SlotProps, Text as TextAria, useContextProps} from 'react-aria-components';
-import {createContext, forwardRef, ImgHTMLAttributes, ReactNode} from 'react';
+import {ContextValue, Keyboard as KeyboardAria, Header as RACHeader, Heading as RACHeading, TextContext as RACTextContext, SlotProps, Text as TextAria} from 'react-aria-components';
+import {createContext, forwardRef, ImgHTMLAttributes, ReactNode, useContext} from 'react';
 import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {StyleString} from '../style/types';
 import {UnsafeStyles} from './style-utils';
 import {useDOMRef} from '@react-spectrum/utils';
+import {useIsSkeleton, useSkeletonText} from './Skeleton';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 interface ContentProps extends UnsafeStyles, SlotProps {
@@ -102,17 +103,26 @@ export const TextContext = createContext<ContextValue<ContentProps, DOMRefValue>
 function Text(props: ContentProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, TextContext);
   let domRef = useDOMRef(ref);
-  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...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);
   if (isHidden) {
     return null;
   }
+
+  slot = slot && racContext && 'slots' in racContext && !racContext.slots?.[slot] ? undefined : slot;
   return (
     <TextAria
       {...otherProps}
       ref={domRef}
+      // @ts-ignore - compatibility with React < 19
+      inert={isSkeleton ? 'true' : undefined}
       className={UNSAFE_className + styles}
       style={UNSAFE_style}
-      slot={slot || undefined} />
+      slot={slot || undefined}>
+      {children}
+    </TextAria>
   );
 }
 
@@ -164,24 +174,3 @@ const _Footer = forwardRef(Footer);
 export {_Footer as Footer};
 
 export const ImageContext = createContext<ContextValue<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>>({});
-
-function Image(props: ImgHTMLAttributes<HTMLImageElement>, ref: DOMRef<HTMLImageElement>) {
-  let domRef = useDOMRef(ref);
-  [props, domRef] = useContextProps(props, domRef, ImageContext);
-  if (props.hidden) {
-    return null;
-  }
-
-  if (props.alt == null) {
-    console.warn(
-      'The `alt` prop was not provided to an image. ' +
-      'Add `alt` text for screen readers, or set `alt=""` prop to indicate that the image ' +
-      'is decorative or redundant with displayed text and should not be announced by screen readers.'
-    );
-  }
-
-  return <img alt={props.alt} {...props} ref={domRef} />;
-}
-
-const _Image = forwardRef(Image);
-export {_Image as Image};
diff --git a/packages/@react-spectrum/s2/src/Form.tsx b/packages/@react-spectrum/s2/src/Form.tsx
index 4bd30020f23..1732520f5c1 100644
--- a/packages/@react-spectrum/s2/src/Form.tsx
+++ b/packages/@react-spectrum/s2/src/Form.tsx
@@ -10,12 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import {createContext, forwardRef, ReactNode, useContext} from 'react';
+import {createContext, forwardRef, ReactNode, useContext, useMemo} from 'react';
 import {DOMRef, SpectrumLabelableProps} from '@react-types/shared';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {Form as RACForm, FormProps as RACFormProps} from 'react-aria-components';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
+import {useIsSkeleton} from './Skeleton';
 
 interface FormStyleProps extends Omit<SpectrumLabelableProps, 'label' | 'contextualHelp'> {
   /**
@@ -36,11 +37,29 @@ export interface FormProps extends FormStyleProps, Omit<RACFormProps, 'className
 export const FormContext = createContext<FormStyleProps | null>(null);
 export function useFormProps<T extends FormStyleProps>(props: T): T {
   let ctx = useContext(FormContext);
-  if (ctx) {
-    return {...ctx, ...props};
-  }
+  let isSkeleton = useIsSkeleton();
+  return useMemo(() => {
+    let result: T = props;
+    if (ctx || isSkeleton) {
+      result = {...props};
+    }
 
-  return props;
+    if (ctx) {
+      // This is a subset of mergeProps. We just need to merge non-undefined values.
+      for (let key in ctx) {
+        if (result[key] === undefined) {
+          result[key] = ctx[key];
+        }
+      }
+    }
+
+    // Skeleton always wins over local props.
+    if (isSkeleton) {
+      result.isDisabled = true;
+    }
+
+    return result;
+  }, [ctx, props, isSkeleton]);
 }
 
 function Form(props: FormProps, ref: DOMRef<HTMLFormElement>) {
diff --git a/packages/@react-spectrum/s2/src/GridList.tsx b/packages/@react-spectrum/s2/src/GridList.tsx
deleted file mode 100644
index 9231720bbcf..00000000000
--- a/packages/@react-spectrum/s2/src/GridList.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-/*
- * Copyright 2024 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {
-  GridList as AriaGridList,
-  GridListItem as AriaGridListItem,
-  Button,
-  GridListItemProps,
-  GridListProps
-} from 'react-aria-components';
-
-import {Checkbox} from './Checkbox';
-
-
-export function GridList<T extends object>(
-  {children, ...props}: GridListProps<T>
-) {
-  return (
-    <AriaGridList {...props}>
-      {children}
-    </AriaGridList>
-  );
-}
-
-export function GridListItem({children, ...props}: GridListItemProps) {
-  let textValue = typeof children === 'string' ? children : undefined;
-  return (
-    <AriaGridListItem textValue={textValue} {...props}>
-      {({selectionMode, selectionBehavior, allowsDragging}) => (
-        <>
-          {/* Add elements for drag and drop and selection. */}
-          {allowsDragging && <Button slot="drag">≡</Button>}
-          {selectionMode === 'multiple' && selectionBehavior === 'toggle' && (
-            <Checkbox slot="selection" />
-          )}
-          {children}
-        </>
-      )}
-    </AriaGridListItem>
-  );
-}
diff --git a/packages/@react-spectrum/s2/src/Image.tsx b/packages/@react-spectrum/s2/src/Image.tsx
new file mode 100644
index 00000000000..339fb4c6066
--- /dev/null
+++ b/packages/@react-spectrum/s2/src/Image.tsx
@@ -0,0 +1,240 @@
+import {ContextValue, SlotProps} from 'react-aria-components';
+import {createContext, ForwardedRef, forwardRef, HTMLAttributeReferrerPolicy, ReactNode, useCallback, useContext, useMemo, useReducer, useRef} from 'react';
+import {DefaultImageGroup, ImageGroup} from './ImageCoordinator';
+import {loadingStyle, useIsSkeleton, useLoadingAnimation} from './Skeleton';
+import {mergeStyles} from '../style/runtime';
+import {style} from '../style/spectrum-theme' with {type: 'macro'};
+import {StyleString} from '../style/types';
+import {UnsafeStyles} from './style-utils';
+import {useLayoutEffect} from '@react-aria/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
+
+export interface ImageProps extends UnsafeStyles, SlotProps {
+  /** The URL of the image. */
+  src?: string,
+  // TODO
+  // srcSet?: string,
+  // sizes?: string,
+  /** Accessible alt text for the image. */
+  alt?: string,
+  /**
+   * Indicates if the fetching of the image must be done using a CORS request.
+   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin).
+   */
+  crossOrigin?: 'anonymous' | 'use-credentials',
+  /**
+   * Whether the browser should decode images synchronously or asynchronously.
+   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding).
+   */
+  decoding?: 'async' | 'auto' | 'sync',
+  // Only supported in React 19...
+  // fetchPriority?: 'high' | 'low' | 'auto',
+  /**
+   * Whether the image should be loaded immediately or lazily when scrolled into view.
+   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).
+   */
+  loading?: 'eager' | 'lazy',
+  /**
+   * A string indicating which referrer to use when fetching the resource.
+   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy).
+   */
+  referrerPolicy?: HTMLAttributeReferrerPolicy,
+  /** Spectrum-defined styles, returned by the `style()` macro. */
+  styles?: StyleString,
+  /** A function that is called to render a fallback when the image fails to load. */
+  renderError?: () => ReactNode,
+  /**
+   * A group of images to coordinate between, matching the group passed to the `<ImageCoordinator>` component.
+   * If not provided, the default image group is used.
+   */
+  group?: ImageGroup
+}
+
+interface ImageContextValue extends ImageProps {
+  hidden?: boolean
+}
+
+export const ImageContext = createContext<ContextValue<ImageContextValue, HTMLDivElement>>(null);
+
+type ImageState = 'loading' | 'loaded' | 'revealed' | 'error';
+interface State {
+  state: ImageState,
+  src: string,
+  startTime: number,
+  loadTime: number
+}
+
+type Action = 
+  | {type: 'update', src: string}
+  | {type: 'loaded'}
+  | {type: 'revealed'}
+  | {type: 'error'};
+
+function createState(src: string): State {
+  return {
+    state: 'loading',
+    src,
+    startTime: Date.now(),
+    loadTime: 0
+  };
+} 
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case 'update': {
+      return {
+        state: 'loading',
+        src: action.src,
+        startTime: Date.now(),
+        loadTime: 0
+      };
+    }
+    case 'loaded':
+    case 'error': {
+      return {
+        ...state,
+        state: action.type
+      };
+    }
+    case 'revealed': {
+      return {
+        ...state,
+        state: 'revealed',
+        loadTime: Date.now() - state.startTime
+      };
+    }
+    default:
+      return state;
+  }
+}
+
+const wrapperStyles = style({
+  backgroundColor: 'gray-100',
+  overflow: 'hidden'
+});
+
+const imgStyles = style({
+  display: 'block',
+  width: 'full',
+  height: 'full',
+  objectFit: '[inherit]',
+  objectPosition: '[inherit]',
+  opacity: {
+    default: 0,
+    isRevealed: 1
+  },
+  transition: {
+    default: 'none',
+    isTransitioning: 'opacity'
+  },
+  transitionDuration: 500
+});
+
+function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>) {
+  [props, domRef] = useSpectrumContextProps(props, domRef, ImageContext);
+
+  let {
+    src = '',
+    styles,
+    UNSAFE_className = '',
+    UNSAFE_style,
+    renderError,
+    group = DefaultImageGroup,
+    // TODO
+    // srcSet,
+    // sizes,
+    alt,
+    crossOrigin,
+    decoding,
+    loading,
+    referrerPolicy
+  } = props;
+  let hidden = (props as ImageContextValue).hidden;
+  
+  let {revealAll, register, unregister, load} = useContext(group);
+  let [{state, src: lastSrc, loadTime}, dispatch] = useReducer(reducer, src, createState);
+
+  if (src !== lastSrc && !hidden) {
+    dispatch({type: 'update', src});
+  }
+
+  if (state === 'loaded' && revealAll && !hidden) {
+    dispatch({type: 'revealed'});
+  }
+
+  let imgRef = useRef<HTMLImageElement | null>(null);
+  useLayoutEffect(() => {
+    if (hidden) {
+      return;
+    }
+
+    register(src);
+    return () => {
+      unregister(src);
+    };
+  }, [hidden, register, unregister, src]);
+
+  let onLoad = useCallback(() => {
+    load(src);
+    dispatch({type: 'loaded'});
+  }, [load, src]);
+
+  let onError = useCallback(() => {
+    dispatch({type: 'error'});
+    unregister(src);
+  }, [unregister, src]);
+
+  let isSkeleton = useIsSkeleton();
+  let isAnimating = isSkeleton || state === 'loading' || state === 'loaded';
+  let animation = useLoadingAnimation(isAnimating);
+  useLayoutEffect(() => {
+    if (hidden) {
+      return;
+    }
+
+    // If the image is already loaded, update state immediately instead of waiting for onLoad.
+    if (state === 'loading' && imgRef.current?.complete) {
+      // Queue a microtask so we don't hit React's update limit.
+      // TODO: is this necessary?
+      queueMicrotask(onLoad);
+    }
+
+    animation(domRef.current);
+  });
+
+  if (props.alt == null) {
+    console.warn(
+      'The `alt` prop was not provided to an image. ' +
+      'Add `alt` text for screen readers, or set `alt=""` prop to indicate that the image ' +
+      'is decorative or redundant with displayed text and should not be announced by screen readers.'
+    );
+  }
+
+  let errorState = !isSkeleton && state === 'error' && renderError?.();
+  let isRevealed = state === 'revealed' && !isSkeleton;
+  let isTransitioning = isRevealed && loadTime > 200;
+  return useMemo(() => hidden ? null : (
+    <div
+      ref={domRef}
+      style={UNSAFE_style}
+      className={UNSAFE_className + mergeStyles(wrapperStyles, styles) + ' '  + (isAnimating ? loadingStyle : '')}>
+      {errorState}
+      {!errorState && (
+        <img
+          src={src}
+          alt={alt}
+          crossOrigin={crossOrigin}
+          decoding={decoding}
+          loading={loading}
+          referrerPolicy={referrerPolicy}
+          ref={imgRef}
+          onLoad={onLoad}
+          onError={onError}
+          className={imgStyles({isRevealed, isTransitioning})} />
+        )}
+    </div>
+  ), [hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, src, alt, crossOrigin, decoding, loading, referrerPolicy, onLoad, onError, isRevealed, isTransitioning]);
+}
+
+const _Image = forwardRef(Image);
+export {_Image as Image};
diff --git a/packages/@react-spectrum/s2/src/ImageCoordinator.tsx b/packages/@react-spectrum/s2/src/ImageCoordinator.tsx
new file mode 100644
index 00000000000..b0497bc28d4
--- /dev/null
+++ b/packages/@react-spectrum/s2/src/ImageCoordinator.tsx
@@ -0,0 +1,163 @@
+import {Context, createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useReducer} from 'react';
+
+export interface ImageCoordinatorProps {
+  /** Children within the ImageCoordinator. */
+  children: ReactNode,
+  /**
+   * Time in milliseconds after which images are always displayed, even if all images are not yet loaded.
+   * @default 5000
+   */
+  timeout?: number,
+  /**
+   * A group of images to coordinate between, matching the group passed to the `<Image>` component.
+   * If not provided, the default image group is used.
+   */
+  group?: ImageGroup
+}
+
+export type ImageGroup = Context<ImageGroupValue>;
+
+interface ImageGroupValue {
+  revealAll: boolean,
+  register(url: string): void,
+  unregister(url: string): void,
+  load(url: string): void
+}
+
+const defaultContext: ImageGroupValue = {
+  revealAll: true,
+  register() {},
+  unregister() {},
+  load() {}
+};
+
+export const DefaultImageGroup = createImageGroup();
+
+export function createImageGroup(): ImageGroup {
+  return createContext(defaultContext);
+}
+
+interface State {
+  loadedAll: boolean,
+  timedOut: boolean,
+  loadStartTime: number,
+  loaded: Map<string, boolean>
+}
+
+type Action = 
+  | {type: 'register', url: string}
+  | {type: 'unregister', url: string}
+  | {type: 'load', url: string}
+  | {type: 'timeout'};
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case 'register': {
+      if (state.loaded.get(action.url) !== false) {
+        let loaded = new Map(state.loaded);
+        loaded.set(action.url, false);
+        return {
+          loadedAll: false,
+          // If we had previously loaded all items, then reset the timed out state
+          // since this is the first item of a new batch.
+          timedOut: state.loadedAll ? false : state.timedOut,
+          loadStartTime: state.loadedAll ? Date.now() : state.loadStartTime,
+          loaded
+        };
+      }
+      return state;
+    }
+    case 'unregister': {
+      if (state.loaded.has(action.url)) {
+        let loaded = new Map(state.loaded);
+        loaded.delete(action.url);
+        return {
+          loadedAll: isAllLoaded(loaded),
+          timedOut: state.timedOut,
+          loadStartTime: state.loadStartTime,
+          loaded
+        };
+      }
+      return state;
+    }
+    case 'load': {
+      if (state.loaded.get(action.url) === false) {
+        let loaded = new Map(state.loaded);
+        loaded.set(action.url, true);
+        return {
+          loadedAll: isAllLoaded(loaded),
+          timedOut: state.timedOut,
+          loadStartTime: state.loadStartTime,
+          loaded
+        };
+      }
+      return state;
+    }
+    case 'timeout': {
+      if (!state.loadedAll && !state.timedOut) {
+        return {
+          ...state,
+          timedOut: true
+        };
+      }
+      return state;
+    }
+    default:
+      return state;
+  }
+}
+
+function isAllLoaded(loaded: Map<string, boolean>) {
+  for (let isLoaded of loaded.values()) {
+    if (!isLoaded) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/**
+ * An ImageCoordinator coordinates loading behavior for a group of images.
+ * Images within an ImageCoordinator are revealed together once all of them have loaded.
+ */
+export function ImageCoordinator(props: ImageCoordinatorProps) {
+  // If we are already inside another ImageCoordinator, just pass
+  // through children and coordinate loading at the root.
+  let ctx = useContext(props.group || DefaultImageGroup);
+  if (ctx !== defaultContext) {
+    return props.children;
+  }
+
+  return <ImageCoordinatorRoot {...props} />;
+}
+
+function ImageCoordinatorRoot(props: ImageCoordinatorProps) {
+  let {children, timeout = 5000, group = DefaultImageGroup} = props;
+  let [{loadedAll, timedOut, loadStartTime}, dispatch] = useReducer(reducer, {
+    loadedAll: true,
+    timedOut: false,
+    loadStartTime: 0,
+    loaded: new Map()
+  });
+  
+  let register = useCallback((url: string) => dispatch({type: 'register', url}), []);
+  let unregister = useCallback((url: string) => dispatch({type: 'unregister', url}), []);
+  let load = useCallback((url: string) => dispatch({type: 'load', url}), []);
+
+  useEffect(() => {
+    if (!loadedAll) {
+      let timeoutId = setTimeout(() => {
+        dispatch({type: 'timeout'});
+      }, loadStartTime + timeout - Date.now());
+
+      return () => clearTimeout(timeoutId);
+    }
+  }, [loadStartTime, loadedAll, timeout]);
+
+  let revealAll = loadedAll || timedOut;
+  return useMemo(() => (
+    <group.Provider value={{revealAll, register, unregister, load}}>
+      {children}
+    </group.Provider>
+  ), [group, children, revealAll, register, unregister, load]);
+}
diff --git a/packages/@react-spectrum/s2/src/Link.tsx b/packages/@react-spectrum/s2/src/Link.tsx
index 63b5d578046..88855cab268 100644
--- a/packages/@react-spectrum/s2/src/Link.tsx
+++ b/packages/@react-spectrum/s2/src/Link.tsx
@@ -11,11 +11,13 @@
  */
 
 import {ContextValue, LinkRenderProps, Link as RACLink, LinkProps as RACLinkProps} from 'react-aria-components';
-import {createContext, forwardRef, ReactNode} from 'react';
+import {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {SkeletonContext, useSkeletonText} from './Skeleton';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import {useFocusableRef} from '@react-spectrum/utils';
+import {useLayoutEffect} from '@react-aria/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 interface LinkStyleProps {
@@ -38,7 +40,7 @@ export interface LinkProps extends Omit<RACLinkProps, 'isDisabled' | 'className'
 
 export const LinkContext = createContext<ContextValue<LinkProps, FocusableRefValue<HTMLAnchorElement>>>(null);
 
-const link = style<LinkRenderProps & LinkStyleProps>({
+const link = style<LinkRenderProps & LinkStyleProps & {isSkeleton: boolean}>({
   ...focusRing(),
   borderRadius: 'sm',
   font: {
@@ -83,15 +85,27 @@ const link = style<LinkRenderProps & LinkStyleProps>({
 
 function Link(props: LinkProps, ref: FocusableRef<HTMLAnchorElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, LinkContext);
-  let {variant = 'primary', staticColor, isQuiet, isStandalone, UNSAFE_style, UNSAFE_className = '', styles} = props;
+  let {variant = 'primary', staticColor, isQuiet, isStandalone, UNSAFE_style, UNSAFE_className = '', styles, children} = props;
 
   let domRef = useFocusableRef(ref);
+  let isSkeleton = useContext(SkeletonContext) || false;
+  [children, UNSAFE_style] = useSkeletonText(children, UNSAFE_style);
+
+  useLayoutEffect(() => {
+    if (domRef.current) {
+      // TODO: should RAC Link pass through inert?
+      domRef.current.inert = isSkeleton;
+    }
+  }, [domRef, isSkeleton]);
+
   return (
     <RACLink
       {...props}
       ref={domRef}
       style={UNSAFE_style}
-      className={renderProps => UNSAFE_className + link({...renderProps, variant, staticColor, isQuiet, isStandalone}, styles)} />
+      className={renderProps => UNSAFE_className + link({...renderProps, variant, staticColor, isQuiet, isStandalone, isSkeleton}, styles)}>
+      {children}
+    </RACLink>
   );
 }
 
diff --git a/packages/@react-spectrum/s2/src/Menu.tsx b/packages/@react-spectrum/s2/src/Menu.tsx
index 63864e4e1fa..bafa0263622 100644
--- a/packages/@react-spectrum/s2/src/Menu.tsx
+++ b/packages/@react-spectrum/s2/src/Menu.tsx
@@ -36,8 +36,9 @@ import {createContext, forwardRef, JSX, ReactNode, useContext, useRef} from 'rea
 import {divider} from './Divider';
 import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {forwardRefType} from './types';
-import {HeaderContext, HeadingContext, ImageContext, KeyboardContext, Text, TextContext} from './Content';
+import {HeaderContext, HeadingContext, KeyboardContext, Text, TextContext} from './Content';
 import {IconContext} from './Icon'; // chevron right removed??
+import {ImageContext} from './Image';
 import LinkOutIcon from '../ui-icons/LinkOut';
 import {mergeStyles} from '../style/runtime';
 import {Placement, useLocale} from 'react-aria';
@@ -228,6 +229,7 @@ let image = style({
   marginEnd: 'text-to-visual',
   marginTop: fontRelative(6), // made up, need feedback
   alignSelf: 'center',
+  borderRadius: 'sm',
   size: {
     default: 40,
     size: {
@@ -470,7 +472,7 @@ export function MenuItem(props: MenuItemProps) {
                   }
                 }],
                 [KeyboardContext, {styles: keyboard({size, isDisabled: renderProps.isDisabled})}],
-                [ImageContext, {className: image({size})}]
+                [ImageContext, {styles: image({size})}]
               ]}>
               {renderProps.selectionMode === 'single' && !isLink && !renderProps.hasSubmenu && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}
               {renderProps.selectionMode === 'multiple' && !isLink && !renderProps.hasSubmenu && (
diff --git a/packages/@react-spectrum/s2/src/Meter.tsx b/packages/@react-spectrum/s2/src/Meter.tsx
index 0c599491951..9bf6ef24dd6 100644
--- a/packages/@react-spectrum/s2/src/Meter.tsx
+++ b/packages/@react-spectrum/s2/src/Meter.tsx
@@ -21,6 +21,8 @@ import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {FieldLabel} from './Field';
 import {fieldLabel, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {size, style} from '../style/spectrum-theme' with {type: 'macro'};
+import {SkeletonWrapper} from './Skeleton';
+import {Text} from './Content';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
@@ -121,10 +123,12 @@ function Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {
       {({percentage, valueText}) => (
         <>
           {label && <FieldLabel size={size} labelAlign="start" labelPosition="top" staticColor={staticColor}>{label}</FieldLabel>}
-          {label && <span className={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</span>}
-          <div className={trackStyles({staticColor, size})}>
-            <div className={fillStyles({staticColor, variant})} style={{width: percentage + '%'}} />
-          </div>
+          {label && <Text styles={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</Text>}
+          <SkeletonWrapper>
+            <div className={trackStyles({staticColor, size})}>
+              <div className={fillStyles({staticColor, variant})} style={{width: percentage + '%'}} />
+            </div>
+          </SkeletonWrapper>
         </>
       )}
     </AriaMeter>
diff --git a/packages/@react-spectrum/s2/src/Skeleton.tsx b/packages/@react-spectrum/s2/src/Skeleton.tsx
new file mode 100644
index 00000000000..ff218feefd3
--- /dev/null
+++ b/packages/@react-spectrum/s2/src/Skeleton.tsx
@@ -0,0 +1,142 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {cloneElement, createContext, CSSProperties, ReactElement, ReactNode, Ref, useCallback, useContext, useRef} from 'react';
+import {colorToken} from '../style/tokens' with {type: 'macro'};
+import {mergeRefs} from '@react-aria/utils';
+import {mergeStyles} from '../style/runtime';
+import {raw} from '../style/style-macro' with {type: 'macro'};
+import {style} from '../style/spectrum-theme' with {type: 'macro'};
+import {StyleString} from '../style/types';
+
+let reduceMotion = typeof window?.matchMedia === 'function'
+  ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
+  : false;
+
+export function useLoadingAnimation(isAnimating: boolean) {
+  let animationRef = useRef<Animation | null>(null);
+  return useCallback((element: HTMLElement | null) => {
+    if (isAnimating && !animationRef.current && element && !reduceMotion) {
+      // Use web animation API instead of CSS animations so that we can
+      // synchronize it between all loading elements on the page (via startTime).
+      animationRef.current = element.animate(
+        [
+          {backgroundPosition: '100%'},
+          {backgroundPosition: '0%'}
+        ],
+        {
+          duration: 2000,
+          iterations: Infinity,
+          easing: 'ease-in-out'
+        }
+      );
+      animationRef.current.startTime = 0;
+    } else if (!isAnimating && animationRef.current) {
+      animationRef.current.cancel();
+      animationRef.current = null;
+    }
+  }, [isAnimating]);
+}
+
+export type SkeletonElement = ReactElement<{
+  children?: ReactNode,
+  className?: string,
+  ref?: Ref<HTMLElement>,
+  inert?: boolean | 'true'
+}>;
+
+export const SkeletonContext = createContext<boolean | null>(null);
+export function useIsSkeleton(): boolean {
+  return useContext(SkeletonContext) || false;
+}
+
+export interface SkeletonProps {
+  children: ReactNode,
+  isLoading: boolean
+}
+
+export function Skeleton({children, isLoading}: SkeletonProps) {
+  // Disable all form components inside a skeleton.
+  return (
+    <SkeletonContext.Provider value={isLoading}>
+      {children}
+    </SkeletonContext.Provider>
+  );
+}
+
+export const loadingStyle = raw(`
+  background-image: linear-gradient(to right, ${colorToken('gray-100')} 33%, light-dark(${colorToken('gray-25')}, ${colorToken('gray-300')}), ${colorToken('gray-100')} 66%);
+  background-size: 300%;
+  * {
+    visibility: hidden;
+  }
+`, 'UNSAFE_overrides');
+
+export function useSkeletonText(children: ReactNode, style: CSSProperties | undefined): [ReactNode, CSSProperties | undefined] {
+  let isSkeleton = useContext(SkeletonContext);
+  if (isSkeleton) {
+    children = <SkeletonText>{children}</SkeletonText>;
+    style = {
+      ...style,
+      // This ensures the ellipsis on truncated text is also hidden.
+      // -webkit-text-fill-color overrides any `color` property that is also set.
+      WebkitTextFillColor: 'transparent'
+    };
+  }
+  return [children, style];
+}
+
+// Rendered inside <Text> to create skeleton line boxes via box-decoration-break.
+export function SkeletonText({children}) {
+  return (
+    <span
+      // @ts-ignore - compatibility with React < 19
+      inert="true"
+      ref={useLoadingAnimation(true)}
+      className={loadingStyle + style({
+        color: 'transparent',
+        boxDecorationBreak: 'clone',
+        borderRadius: 'sm'
+      })}>
+      {children}
+    </span>
+  );
+}
+
+// Clones the child element and displays it with skeleton styling.
+export function SkeletonWrapper({children}: {children: SkeletonElement}) {
+  let isLoading = useContext(SkeletonContext);
+  let animation = useLoadingAnimation(isLoading || false);
+  if (isLoading == null) {
+    return children;
+  }
+
+  let childRef = 'ref' in children ? children.ref as any : children.props.ref;
+  return (
+    <SkeletonContext.Provider value={null}>
+      {isLoading ? cloneElement(children, {
+        ref: mergeRefs(childRef, animation),
+        className: (children.props.className || '') + ' ' + loadingStyle,
+        inert: 'true'
+      }) : children}
+    </SkeletonContext.Provider>
+  );
+}
+
+// Adds default border radius around icons when displayed in a skeleton.
+export function useSkeletonIcon(styles: StyleString): StyleString {
+  let isSkeleton = useContext(SkeletonContext);
+  if (isSkeleton) {
+    return mergeStyles(style({borderRadius: 'sm'}), styles);
+  }
+  return styles || '' as StyleString;
+}
diff --git a/packages/@react-spectrum/s2/src/SkeletonCollection.tsx b/packages/@react-spectrum/s2/src/SkeletonCollection.tsx
new file mode 100644
index 00000000000..fc6c5ea7be9
--- /dev/null
+++ b/packages/@react-spectrum/s2/src/SkeletonCollection.tsx
@@ -0,0 +1,36 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {createLeafComponent} from '@react-aria/collections';
+import {ReactNode} from 'react';
+import {Skeleton} from './Skeleton';
+
+export interface SkeletonCollectionProps {
+  children: () => ReactNode
+}
+
+let cache = new WeakMap();
+export const SkeletonCollection = createLeafComponent('skeleton', (props: SkeletonCollectionProps, ref, node) => {
+  // Cache rendering based on node object identity. This allows the children function to randomize
+  // its content (e.g. heights) and preserve on re-renders.
+  // TODO: do we need a `dependencies` prop here?
+  let cached = cache.get(node);
+  if (!cached) {
+    cached = (
+      <Skeleton isLoading>
+        {props.children()}
+      </Skeleton>
+    );
+    cache.set(node, cached);
+  }
+  return cached;
+});
diff --git a/packages/@react-spectrum/s2/src/StatusLight.tsx b/packages/@react-spectrum/s2/src/StatusLight.tsx
index 5e5c5b60c04..662c23fdf39 100644
--- a/packages/@react-spectrum/s2/src/StatusLight.tsx
+++ b/packages/@react-spectrum/s2/src/StatusLight.tsx
@@ -17,7 +17,9 @@ import {createContext, forwardRef, ReactNode} from 'react';
 import {filterDOMProps} from '@react-aria/utils';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {size, style} from '../style/spectrum-theme' with {type: 'macro'};
+import {Text} from './Content';
 import {useDOMRef} from '@react-spectrum/utils';
+import {useIsSkeleton} from './Skeleton';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 interface StatusLightStyleProps {
@@ -64,7 +66,7 @@ const wrapper = style<StatusLightStyleProps>({
   disableTapHighlight: true
 }, getAllowedOverrides());
 
-const light = style<StatusLightStyleProps>({
+const light = style<StatusLightStyleProps & {isSkeleton: boolean}>({
   size: {
     size: {
       S: 8,
@@ -94,7 +96,8 @@ const light = style<StatusLightStyleProps>({
       cinnamon: 'cinnamon',
       brown: 'brown',
       silver: 'silver'
-    }
+    },
+    isSkeleton: 'gray-200'
   }
 });
 
@@ -102,6 +105,7 @@ function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, StatusLightContext);
   let {children, size = 'M', variant, role, UNSAFE_className = '', UNSAFE_style, styles} = props;
   let domRef = useDOMRef(ref);
+  let isSkeleton = useIsSkeleton();
 
   if (!children && !props['aria-label']) {
     console.warn('If no children are provided, an aria-label must be specified');
@@ -119,11 +123,11 @@ function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {
       style={UNSAFE_style}
       className={UNSAFE_className + wrapper({size, variant}, styles)}>
       <CenterBaseline>
-        <svg className={light({size, variant})} aria-hidden="true">
+        <svg className={light({size, variant, isSkeleton})} aria-hidden="true">
           <circle r="50%" cx="50%" cy="50%" />
         </svg>
       </CenterBaseline>
-      {children}
+      <Text>{children}</Text>
     </div>
   );
 }
diff --git a/packages/@react-spectrum/s2/src/ToggleButton.tsx b/packages/@react-spectrum/s2/src/ToggleButton.tsx
index 85599b7ce99..e5bc90b4ab7 100644
--- a/packages/@react-spectrum/s2/src/ToggleButton.tsx
+++ b/packages/@react-spectrum/s2/src/ToggleButton.tsx
@@ -18,9 +18,11 @@ import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'};
 import {IconContext} from './Icon';
 import {pressScale} from './pressScale';
+import {SkeletonContext} from './Skeleton';
 import {StyleProps} from './style-utils';
 import {Text, TextContext} from './Content';
 import {useFocusableRef} from '@react-spectrum/utils';
+import {useFormProps} from './Form';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface ToggleButtonProps extends Omit<RACToggleButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ActionButtonStyleProps {
@@ -34,6 +36,7 @@ export const ToggleButtonContext = createContext<ContextValue<ToggleButtonProps,
 
 function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ToggleButtonContext);
+  props = useFormProps(props as any);
   let domRef = useFocusableRef(ref);
   return (
     <RACToggleButton
@@ -49,6 +52,7 @@ function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElem
       }, props.styles)}>
       <Provider
         values={[
+          [SkeletonContext, null],
           [TextContext, {styles: style({paddingY: '--labelPadding', order: 1})}],
           [IconContext, {
             render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
diff --git a/packages/@react-spectrum/s2/src/index.ts b/packages/@react-spectrum/s2/src/index.ts
index 91a9ee6a3a0..aa558d8d1a3 100644
--- a/packages/@react-spectrum/s2/src/index.ts
+++ b/packages/@react-spectrum/s2/src/index.ts
@@ -19,6 +19,8 @@ export {Badge, BadgeContext} from './Badge';
 export {Breadcrumbs, Breadcrumb, BreadcrumbsContext} from './Breadcrumbs';
 export {Button, LinkButton, ButtonContext, LinkButtonContext} from './Button';
 export {ButtonGroup, ButtonGroupContext} from './ButtonGroup';
+export {Card, CardPreview, CollectionCardPreview, AssetCard, UserCard, ProductCard, CardContext} from './Card';
+export {CardView} from './CardView';
 export {Checkbox, CheckboxContext} from './Checkbox';
 export {CheckboxGroup, CheckboxGroupContext} from './CheckboxGroup';
 export {ColorArea, ColorAreaContext} from './ColorArea';
@@ -29,7 +31,7 @@ export {ColorSwatchPicker, ColorSwatchPickerContext} from './ColorSwatchPicker';
 export {ColorWheel, ColorWheelContext} from './ColorWheel';
 export {ComboBox, ComboBoxItem, ComboBoxSection, ComboBoxContext} from './ComboBox';
 export {ContextualHelp, ContextualHelpContext} from './ContextualHelp';
-export {Heading, HeadingContext, Header, HeaderContext, Content, ContentContext, Footer, FooterContext, Image, ImageContext, Text, TextContext, Keyboard, KeyboardContext} from './Content';
+export {Heading, HeadingContext, Header, HeaderContext, Content, ContentContext, Footer, FooterContext, Text, TextContext, Keyboard, KeyboardContext} from './Content';
 export {Dialog} from './Dialog';
 export {DialogTrigger} from './DialogTrigger';
 export {DialogContainer, useDialogContainer} from './DialogContainer';
@@ -38,6 +40,8 @@ export {DropZone, DropZoneContext} from './DropZone';
 export {Form} from './Form';
 export {IconContext, IllustrationContext} from './Icon';
 export {IllustratedMessage, IllustratedMessageContext} from './IllustratedMessage';
+export {Image, ImageContext} from './Image';
+export {ImageCoordinator} from './ImageCoordinator';
 export {InlineAlert, InlineAlertContext} from './InlineAlert';
 export {Link, LinkContext} from './Link';
 export {MenuItem, MenuTrigger, Menu, MenuSection, SubmenuTrigger, MenuContext} from './Menu';
@@ -52,6 +56,8 @@ export {RadioGroup, RadioGroupContext} from './RadioGroup';
 export {RangeSlider, RangeSliderContext} from './RangeSlider';
 export {SearchField, SearchFieldContext} from './SearchField';
 export {Slider, SliderContext} from './Slider';
+export {Skeleton, useIsSkeleton} from './Skeleton';
+export {SkeletonCollection} from './SkeletonCollection';
 export {StatusLight, StatusLightContext} from './StatusLight';
 export {Switch, SwitchContext} from './Switch';
 export {Tabs, TabList, Tab, TabPanel, TabsContext} from './Tabs';
@@ -72,6 +78,8 @@ export type {BreadcrumbsProps, BreadcrumbProps} from './Breadcrumbs';
 export type {BadgeProps} from './Badge';
 export type {ButtonProps, LinkButtonProps} from './Button';
 export type {ButtonGroupProps} from './ButtonGroup';
+export type {CardProps, CardPreviewProps, AssetCardProps, ProductCardProps, UserCardProps} from './Card';
+export type {CardViewProps} from './CardView';
 export type {CheckboxProps} from './Checkbox';
 export type {CheckboxGroupProps} from './CheckboxGroup';
 export type {ColorAreaProps} from './ColorArea';
@@ -89,6 +97,8 @@ export type {DropZoneProps} from './DropZone';
 export type {FormProps} from './Form';
 export type {IconProps, IconContextValue} from './Icon';
 export type {InlineAlertProps} from './InlineAlert';
+export type {ImageProps} from './Image';
+export type {ImageCoordinatorProps} from './ImageCoordinator';
 export type {LinkProps} from './Link';
 export type {MenuTriggerProps, MenuProps, MenuItemProps, MenuSectionProps, SubmenuTriggerProps} from './Menu';
 export type {MeterProps} from './Meter';
@@ -101,6 +111,8 @@ export type {RadioGroupProps} from './RadioGroup';
 export type {SearchFieldProps} from './SearchField';
 export type {SliderProps} from './Slider';
 export type {RangeSliderProps} from './RangeSlider';
+export type {SkeletonProps} from './Skeleton';
+export type {SkeletonCollectionProps} from './SkeletonCollection';
 export type {StatusLightProps} from './StatusLight';
 export type {SwitchProps} from './Switch';
 export type {TabsProps, TabProps, TabListProps, TabPanelProps} from './Tabs';
diff --git a/packages/@react-spectrum/s2/src/style-utils.ts b/packages/@react-spectrum/s2/src/style-utils.ts
index 8ba1995c2df..f6b4c0e4d23 100644
--- a/packages/@react-spectrum/s2/src/style-utils.ts
+++ b/packages/@react-spectrum/s2/src/style-utils.ts
@@ -188,7 +188,7 @@ const heightProperties = [
 ] as const;
 
 export type StylesProp = StyleString<(typeof allowedOverrides)[number] | (typeof widthProperties)[number]>;
-export type StylesPropWithHeight = StyleString<(typeof allowedOverrides)[number] | (typeof heightProperties)[number]>;
+export type StylesPropWithHeight = StyleString<(typeof allowedOverrides)[number] | (typeof widthProperties)[number] | (typeof heightProperties)[number]>;
 export type StylesPropWithoutWidth = StyleString<(typeof allowedOverrides)[number]>;
 export interface UnsafeStyles {
   /** Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. */
diff --git a/packages/@react-spectrum/s2/stories/Card.stories.tsx b/packages/@react-spectrum/s2/stories/Card.stories.tsx
new file mode 100644
index 00000000000..9f781e86d8f
--- /dev/null
+++ b/packages/@react-spectrum/s2/stories/Card.stories.tsx
@@ -0,0 +1,309 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ActionMenu, AssetCard, Avatar, Badge, Button, Card, CardPreview, CardProps, CollectionCardPreview, Content, Divider, Footer, Image, MenuItem, Meter, ProductCard, Skeleton, StatusLight, Text, UserCard} from '../src';
+import Folder from '../s2wf-icons/S2_Icon_Folder_20_N.svg';
+import FolderGradient from 'illustration:../spectrum-illustrations/gradient/S2_fill_folderClose_generic2_160.svg';
+import type {Meta} from '@storybook/react';
+import Project from '../s2wf-icons/S2_Icon_Project_20_N.svg';
+import Select from '../s2wf-icons/S2_Icon_Select_20_N.svg';
+import {style} from '../style/spectrum-theme' with {type: 'macro'};
+
+const meta: Meta<CardProps & {isLoading?: boolean}> = {
+  component: Card,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  args: {
+    isLoading: false
+  },
+  argTypes: {
+    href: {table: {disable: true}},
+    download: {table: {disable: true}},
+    hrefLang: {table: {disable: true}},
+    referrerPolicy: {table: {disable: true}},
+    rel: {table: {disable: true}},
+    routerOptions: {table: {disable: true}},
+    ping: {table: {disable: true}},
+    target: {table: {disable: true}},
+    value: {table: {disable: true}},
+    textValue: {table: {disable: true}},
+    onAction: {table: {disable: true}},
+    isDisabled: {table: {disable: true}}
+  },
+  decorators: (children, {args}) => (
+    <Skeleton isLoading={args.isLoading || false}>
+      {children(args)}
+    </Skeleton>
+  )
+};
+
+export default meta;
+
+export const Example = (args: any) => (
+  <div style={{display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'end', justifyContent: 'center'}}>
+    <Card {...args}>
+      <CardPreview>
+        <Image src={new URL('assets/preview.png', import.meta.url).toString()} />
+      </CardPreview>
+      <Content>
+        <Text slot="title">Card title</Text>
+        <ActionMenu>
+          <MenuItem>Test</MenuItem>
+        </ActionMenu>
+        <Text slot="description">Card description. Give a concise overview of the context or functionality that's mentioned in the card title.</Text>
+      </Content>
+      {args.size !== 'XS' && <>
+        <Divider />
+        <Footer>
+          <StatusLight size="S" variant="positive">Published</StatusLight>
+        </Footer>
+      </>}
+    </Card>
+    <Card {...args}>
+      <Content>
+        <Text slot="title">Card title</Text>
+        <Text slot="description">Card description. Give a concise overview of the context or functionality that's mentioned in the card title.</Text>
+      </Content>
+      {args.size !== 'XS' && <>
+        <Divider />
+        <Footer>
+          <StatusLight size="S" variant="positive">Published</StatusLight>
+        </Footer>
+      </>}
+    </Card>
+  </div>
+);
+
+const specificArgTypes = {
+  density: {
+    table: {
+      disable: true
+    }
+  }
+};
+
+export const Asset = (args: any) => (
+  <div style={{display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'end', justifyContent: 'center'}}>
+    <AssetCard {...args}>
+      <CardPreview>
+        <Image src="https://images.unsplash.com/photo-1705034598432-1694e203cdf3?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+      </CardPreview>
+      <Content>
+        <Text slot="title">Desert Sunset</Text>
+        <Text slot="description">PNG • 2/3/2024</Text>
+      </Content>
+    </AssetCard>
+    <AssetCard {...args}>
+      <CardPreview>
+        <FolderGradient />
+      </CardPreview>
+      <Content>
+        <Text slot="title">Projects</Text>
+        <Text slot="description">10 items • 6/14/2024</Text>
+      </Content>
+    </AssetCard>
+  </div>
+);
+
+Asset.argTypes = specificArgTypes;
+
+export const User = (args: any) => (
+  <div style={{display: 'flex', gap: 16, flexWrap: 'wrap', justifyContent: 'center'}}>
+    <UserCard {...args}>
+      <CardPreview>
+        <Image src={new URL('assets/preview.png', import.meta.url).toString()} />
+      </CardPreview>
+      <Avatar src="https://i.imgur.com/xIe7Wlb.png" />
+      <Content>
+        <Text slot="title">Card title</Text>
+        <Text slot="description">Card description. Give a concise overview of the context or functionality that's mentioned in the card title.</Text>
+      </Content>
+      <Footer>
+        <StatusLight size="S" variant="positive">Available</StatusLight>
+      </Footer>
+    </UserCard>
+    <UserCard {...args}>
+      <Avatar src="https://i.imgur.com/xIe7Wlb.png" />
+      <Content>
+        <Text slot="title">Card title</Text>
+        <Text slot="description">Card description. Give a concise overview of the context or functionality that's mentioned in the card title.</Text>
+      </Content>
+      <Footer>
+        <StatusLight size="S" variant="positive">Available</StatusLight>
+      </Footer>
+    </UserCard>
+  </div>
+);
+
+User.argTypes = {
+  ...specificArgTypes,
+  variant: {
+    control: 'radio',
+    options: ['primary', 'secondary', 'tertiary']
+  }
+};
+
+export const Product = (args: any) => (
+  <div style={{display: 'flex', gap: 16, flexWrap: 'wrap', justifyContent: 'center'}}>
+    <ProductCard {...args}>
+      <CardPreview>
+        <Image
+          slot="preview"
+          src={new URL('assets/preview.png', import.meta.url).toString()} />
+      </CardPreview>
+      <Image 
+        slot="thumbnail"
+        src={new URL('assets/placeholder.png', import.meta.url).toString()} />
+      <Content>
+        <Text slot="title">Card title</Text>
+        <Text slot="description">Card description. Give a concise overview of the context or functionality that's mentioned in the card title.</Text>
+      </Content>
+      <Footer>
+        <Button variant="primary">Buy now</Button>
+      </Footer>
+    </ProductCard>
+    <ProductCard {...args}>
+      <Image
+        slot="thumbnail"
+        src={new URL('assets/placeholder.png', import.meta.url).toString()} />
+      <Content>
+        <Text slot="title">Card title</Text>
+        <Text slot="description">Card description. Give a concise overview of the context or functionality that's mentioned in the card title.</Text>
+      </Content>
+      <Footer>
+        <Button variant="primary">Buy now</Button>
+      </Footer>
+    </ProductCard>
+  </div>
+);
+
+Product.argTypes = {
+  ...specificArgTypes,
+  variant: {
+    control: 'radio',
+    options: ['primary', 'secondary', 'tertiary']
+  }
+};
+
+export const Collection = (args: any) => (
+  <div style={{display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'end', justifyContent: 'center'}}>
+    <Card {...args}>
+      <CollectionCardPreview>
+        <Image alt="" src="https://images.unsplash.com/photo-1705034598432-1694e203cdf3?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+        <Image alt="" src="https://images.unsplash.com/photo-1722233987129-61dc344db8b6?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+        <Image alt="" src="https://images.unsplash.com/photo-1722172118908-1a97c312ce8c?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+        <Image alt="" src="https://images.unsplash.com/photo-1718378037953-ab21bf2cf771?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+      </CollectionCardPreview>
+      <Content>
+        <Text slot="title">Travel</Text>
+        <div className={style({gridColumnEnd: 'span 2', display: 'flex', alignItems: 'center', gap: 8})}>
+          <Folder />
+          <Text slot="description">20 photos</Text>
+        </div>
+      </Content>
+    </Card>
+    <Card {...args}>
+      <CollectionCardPreview>
+        <Image alt="" src="https://images.unsplash.com/photo-1721661657253-6621d52db753?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDYxfE04alZiTGJUUndzfHxlbnwwfHx8fHw%3D" />
+        <Image alt="" src="https://images.unsplash.com/photo-1721598359121-363311b3b263?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDc0fE04alZiTGJUUndzfHxlbnwwfHx8fHw%3D" />
+        <Image alt="" src="https://images.unsplash.com/photo-1720987517313-23d8c4092cfb?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDEzM3xNOGpWYkxiVFJ3c3x8ZW58MHx8fHx8" />
+      </CollectionCardPreview>
+      <Content>
+        <Text slot="title">Architecture</Text>
+        <div className={style({gridColumnEnd: 'span 2', display: 'flex', alignItems: 'center', gap: 8})}>
+          <Folder />
+          <Text slot="description">15 photos</Text>
+        </div>
+      </Content>
+    </Card>
+  </div>
+);
+
+export const PreviewOverlay = (args: any) => (
+  <Card {...args}>
+    <CardPreview>
+      <Image alt="" src={new URL('assets/preview.png', import.meta.url).toString()} styles={style({width: 'full', aspectRatio: '[1/1]', objectFit: 'cover', pointerEvents: 'none'})} />
+      <Badge
+        variant="positive"
+        styles={style({
+          position: 'absolute',
+          top: 16,
+          insetEnd: 16
+        })}>
+        Free
+      </Badge>
+      <Avatar
+        src="https://i.imgur.com/xIe7Wlb.png"
+        size={24}
+        isOverBackground
+        styles={style({
+          position: 'absolute',
+          bottom: 16,
+          insetStart: 16
+        })} />
+    </CardPreview>
+  </Card>
+);
+
+export const Custom = (args: any) => (
+  <div style={{display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'end', justifyContent: 'center'}}>
+    <Card {...args}>
+      <CardPreview>
+        <Image 
+          alt=""
+          src="https://images.unsplash.com/photo-1671225137978-aa9a19071b9a?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+      </CardPreview>
+      <Content>
+        <div className={style({display: 'flex', alignItems: 'center', justifyContent: 'space-between'})}>
+          <div className={style({display: 'flex', alignItems: 'center', gap: 4})}>
+            <Select /> 
+            <Text slot="description">Click through rate</Text>
+          </div>
+          <div className={style({display: 'flex', flexDirection: 'column'})}>
+            <Text styles={style({font: 'title-xl'})}>1.012%</Text>
+            <Text styles={style({font: 'ui-sm', color: 'positive-900'})}>21% ↑ average</Text>
+          </div>
+        </div>
+      </Content>
+    </Card>
+    <Card {...args}>
+      <CardPreview>
+        <Image 
+          alt=""
+          src="https://images.unsplash.com/photo-1460306855393-0410f61241c7?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+      </CardPreview>
+      <Content>
+        <Text slot="title">Yummburger</Text>
+        <div className={style({display: 'flex', alignItems: 'center', gap: 4})}>
+          <Project />
+          <Text slot="description"><span className={style({fontWeight: 'bold'})}>35k</span> experiences use this</Text>
+        </div>
+      </Content>
+      <Footer styles={style({flexDirection: 'column', alignItems: 'start', gap: 4})}>
+        <Text styles={style({font: 'ui-sm'})}><span className={style({font: 'title-xl'})}>25%</span> click through rate</Text>
+        <Meter variant="positive" value={25} styles={style({marginY: 4})} />
+        <Text styles={style({font: 'ui-sm'})}><span className={style({fontWeight: 'bold'})}>56k</span> clicks</Text>
+        <Text styles={style({font: 'ui-sm'})}><span className={style({fontWeight: 'bold', color: 'positive-900'})}>3.46%</span> last month</Text>
+      </Footer>
+    </Card>
+  </div>
+);
+
+Custom.argTypes = {
+  size: {
+    table: {
+      disable: true
+    }
+  }
+};
diff --git a/packages/@react-spectrum/s2/stories/CardView.stories.tsx b/packages/@react-spectrum/s2/stories/CardView.stories.tsx
new file mode 100644
index 00000000000..94d1d8e93e3
--- /dev/null
+++ b/packages/@react-spectrum/s2/stories/CardView.stories.tsx
@@ -0,0 +1,247 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ActionMenu, Avatar, Card, CardPreview, CardView, CardViewProps, Collection, CollectionCardPreview, Content, Heading, IllustratedMessage, Image, MenuItem, SkeletonCollection, Text} from '../src';
+import EmptyIcon from 'illustration:../spectrum-illustrations/gradient/S2_fill_image_generic1_160.svg';
+import ErrorIcon from '../spectrum-illustrations/linear/AlertNotice';
+import Folder from '../s2wf-icons/S2_Icon_Folder_20_N.svg';
+import type {Meta} from '@storybook/react';
+import {style} from '../style/spectrum-theme' with {type: 'macro'};
+import {useAsyncList} from 'react-stately';
+
+const meta: Meta<typeof CardView> = {
+  component: CardView,
+  parameters: {
+    layout: 'fullscreen'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+
+const cardViewStyles = style({
+  width: {
+    default: 'screen',
+    viewMode: {
+      docs: 'full'
+    }
+  },
+  height: {
+    default: 'screen',
+    viewMode: {
+      docs: '[600px]'
+    }
+  }
+});
+
+type Item = {
+  id: number,
+  user: {
+    name: string,
+    profile_image: { small: string }
+  },
+  urls: { regular: string },
+  description: string,
+  alt_description: string,
+  width: number,
+  height: number
+};
+
+function PhotoCard({item, layout}: {item: Item, layout: string}) {
+  return (
+    <Card id={item.id} textValue={item.description || item.alt_description}>
+      <CardPreview>
+        <Image 
+          src={item.urls.regular}
+          styles={style({
+            width: 'full',
+            pointerEvents: 'none'
+          })}
+          // TODO - should we have a safe `dynamicStyles` or something for this?
+          UNSAFE_style={{
+            aspectRatio: layout === 'waterfall' ? `${item.width} / ${item.height}` : '4/3',
+            objectFit: layout === 'waterfall' ? 'contain' : 'cover'
+          }}
+          renderError={() => (
+            <div className={style({display: 'flex', alignItems: 'center', justifyContent: 'center', size: 'full'})}>
+              <ErrorIcon size="S" />
+            </div>
+          )} />
+      </CardPreview>
+      <Content>
+        <Text slot="title">{item.description || item.alt_description}</Text>
+        <ActionMenu>
+          <MenuItem>Test</MenuItem>
+        </ActionMenu>
+        <div className={style({display: 'flex', alignItems: 'center', gap: 8, gridArea: 'description'})}>
+          <Avatar src={item.user.profile_image.small} />
+          <Text slot="description">{item.user.name}</Text>
+        </div>
+      </Content>
+    </Card>
+  );
+}
+
+export const Example = (args: CardViewProps<any>, {viewMode}) => {
+  let list = useAsyncList<Item, number | null>({
+    async load({signal, cursor, items}) {
+      let page = cursor || 1;
+      let res = await fetch(
+        `https://api.unsplash.com/topics/nature/photos?page=${page}&per_page=30&client_id=AJuU-FPh11hn7RuumUllp4ppT8kgiLS7LtOHp_sp4nc`,
+        {signal}
+      );
+      let nextItems = await res.json();
+      // Filter duplicates which might be returned by the API.
+      let existingKeys = new Set(items.map(i => i.id));
+      nextItems = nextItems.filter(i => !existingKeys.has(i.id) && (i.description || i.alt_description));
+      return {items: nextItems, cursor: nextItems.length ? page + 1 : null};
+    }
+  });
+
+  let loadingState = args.loadingState === 'idle' ? list.loadingState : args.loadingState;
+  let items = loadingState === 'loading' ? [] : list.items;
+
+  return (
+    <CardView
+      aria-label="Nature photos"
+      {...args}
+      loadingState={loadingState}
+      onLoadMore={args.loadingState === 'idle' ? list.loadMore : undefined}
+      styles={cardViewStyles({viewMode})}>
+      <Collection items={items} dependencies={[args.layout]}>
+        {item => <PhotoCard item={item} layout={args.layout || 'grid'} />}
+      </Collection>
+      {(loadingState === 'loading' || loadingState === 'loadingMore') && (
+        <SkeletonCollection>
+          {() => (
+            <PhotoCard 
+              item={{
+                id: Math.random(),
+                user: {name: 'Devon Govett', profile_image: {small: ''}},
+                urls: {regular: ''},
+                description: 'This is a fake description. Kinda long so it wraps to a new line.',
+                alt_description: '',
+                width: 400,
+                height: 200 + Math.max(0, Math.round(Math.random() * 400))
+              }}
+              layout={args.layout || 'grid'} />
+          )}
+        </SkeletonCollection>
+      )}
+    </CardView>
+  );
+};
+
+Example.args = {
+  loadingState: 'idle',
+  onAction: null,
+  selectionMode: 'multiple'
+};
+
+export const Empty = (args: CardViewProps<any>, {viewMode}) => {
+  return (
+    <CardView 
+      aria-label="Assets"
+      {...args}
+      styles={cardViewStyles({viewMode})}
+      renderEmptyState={() => (
+        <IllustratedMessage size="L">
+          <EmptyIcon />
+          <Heading>Create your first asset.</Heading>
+          <Content>Get started by uploading or importing some assets.</Content>
+        </IllustratedMessage>
+      )}>
+      {[]}
+    </CardView>
+  );
+};
+
+interface Topic {
+  id: string,
+  title: string,
+  total_photos: number,
+  links: {html: string},
+  preview_photos: {id: string, urls: {small: string}}[]
+}
+
+function TopicCard({topic}: {topic: Topic}) {
+  return (
+    <Card href={topic.links.html} target="_blank" textValue={topic.title}>
+      <CollectionCardPreview>
+        {topic.preview_photos.slice(0, 4).map(photo => (
+          <Image key={photo.id} alt="" src={photo.urls.small} />
+        ))}
+      </CollectionCardPreview>
+      <Content>
+        <Text slot="title">{topic.title}</Text>
+        <div className={style({display: 'flex', alignItems: 'center', gap: 8})}>
+          <Folder />
+          <Text slot="description">{topic.total_photos.toLocaleString()} photos</Text>
+        </div>
+      </Content>
+    </Card>
+  );
+}
+
+export const CollectionCards = (args: CardViewProps<any>, {viewMode}) => {
+  let list = useAsyncList<Topic, number | null>({
+    async load({signal, cursor}) {
+      let page = cursor || 1;
+      let res = await fetch(
+        `https://api.unsplash.com/topics?page=${page}&per_page=30&client_id=AJuU-FPh11hn7RuumUllp4ppT8kgiLS7LtOHp_sp4nc`,
+        {signal}
+      );
+      let items = await res.json();
+      return {items, cursor: items.length ? page + 1 : null};
+    }
+  });
+
+  let loadingState = args.loadingState === 'idle' ? list.loadingState : args.loadingState;
+  let items = loadingState === 'loading' ? [] : list.items;
+
+  return (
+    <CardView
+      aria-label="Topics"
+      {...args}
+      loadingState={loadingState}
+      onLoadMore={args.loadingState === 'idle' ? list.loadMore : undefined}
+      styles={cardViewStyles({viewMode})}>
+      <Collection items={items}>
+        {topic => <TopicCard topic={topic} />}
+      </Collection>
+      {(loadingState === 'loading' || loadingState === 'loadingMore') && (
+        <SkeletonCollection>
+          {() => (
+            <TopicCard
+              topic={{
+                id: Math.random().toString(36),
+                title: 'Topic title',
+                total_photos: 80,
+                links: {html: ''},
+                preview_photos: [
+                  {id: 'a', urls: {small: ''}},
+                  {id: 'b', urls: {small: ''}},
+                  {id: 'c', urls: {small: ''}},
+                  {id: 'd', urls: {small: ''}}
+                ]
+              }} />
+          )}
+        </SkeletonCollection>
+      )}
+    </CardView>
+  );
+};
+
+CollectionCards.args = {
+  loadingState: 'idle',
+  onAction: null
+};
diff --git a/packages/@react-spectrum/s2/stories/assets/placeholder.png b/packages/@react-spectrum/s2/stories/assets/placeholder.png
new file mode 100644
index 00000000000..601b8f91b14
Binary files /dev/null and b/packages/@react-spectrum/s2/stories/assets/placeholder.png differ
diff --git a/packages/@react-spectrum/s2/stories/assets/preview.png b/packages/@react-spectrum/s2/stories/assets/preview.png
new file mode 100644
index 00000000000..064d5877ccf
Binary files /dev/null and b/packages/@react-spectrum/s2/stories/assets/preview.png differ
diff --git a/packages/@react-spectrum/s2/style/__tests__/style-macro.test.js b/packages/@react-spectrum/s2/style/__tests__/style-macro.test.js
index 31edc0eaf2a..e3541d10c02 100644
--- a/packages/@react-spectrum/s2/style/__tests__/style-macro.test.js
+++ b/packages/@react-spectrum/s2/style/__tests__/style-macro.test.js
@@ -42,7 +42,7 @@ describe('style-macro', () => {
       @layer _.a, _.b, _.c, UNSAFE_overrides;
 
       @layer _.b {
-        .A-13alit4b {
+        .A-13alit4c {
           &:first-child {
             margin-top: 0.25rem;
           }
@@ -51,7 +51,7 @@ describe('style-macro', () => {
 
       @layer _.c.e {
         @media (min-width: 1024px) {
-          .A-13alit4ec {
+          .A-13alit4ed {
             &:first-child {
               margin-top: 0.5rem;
             }
@@ -61,7 +61,7 @@ describe('style-macro', () => {
 
       "
     `);
-    expect(js).toMatchInlineSnapshot('" . A-13alit4b A-13alit4ec"');
+    expect(js).toMatchInlineSnapshot('" . A-13alit4c A-13alit4ed"');
   });
 
   it('should support self references', () => {
@@ -102,7 +102,7 @@ describe('style-macro', () => {
         }
 
 
-        .DH {
+        .DI {
           padding-inline-end: calc(var(--k, var(--o)) * 3 / 8);
         }
 
@@ -117,7 +117,7 @@ describe('style-macro', () => {
         }
 
 
-        .-_375tnm_C-H {
+        .-_375tnm_C-I {
           --C: calc(var(--k, var(--o)) * 3 / 8);
         }
       }
diff --git a/packages/@react-spectrum/s2/style/runtime.ts b/packages/@react-spectrum/s2/style/runtime.ts
index 3780d515e34..5b567e2ab56 100644
--- a/packages/@react-spectrum/s2/style/runtime.ts
+++ b/packages/@react-spectrum/s2/style/runtime.ts
@@ -36,7 +36,7 @@ import {StyleString} from './types';
 //   };
 // }
 
-export function mergeStyles(...styles: (StyleString | null | undefined)[]): string {
+export function mergeStyles(...styles: (StyleString | null | undefined)[]): StyleString {
   let definedStyles = styles.filter(Boolean) as StyleString[];
   if (definedStyles.length === 1) {
     return definedStyles[0];
@@ -53,7 +53,7 @@ export function mergeStyles(...styles: (StyleString | null | undefined)[]): stri
   for (let value of map.values()) {
     res += value;
   }
-  return res;
+  return res as StyleString;
 }
 
 function parse(s: string) {
diff --git a/packages/@react-spectrum/s2/style/spectrum-theme.ts b/packages/@react-spectrum/s2/style/spectrum-theme.ts
index 6afdda71e92..8765e1519ca 100644
--- a/packages/@react-spectrum/s2/style/spectrum-theme.ts
+++ b/packages/@react-spectrum/s2/style/spectrum-theme.ts
@@ -101,7 +101,7 @@ function generateSpacing<K extends number[]>(px: K): {[P in K[number]]: string}
 
 const baseSpacing = generateSpacing([
   0,
-  // 2, // spacing-50 !! TODO: should we support this?
+  2, // spacing-50
   4, // spacing-75
   8, // spacing-100
   12, // spacing-200
@@ -215,7 +215,6 @@ const sizing = {
   ...scaledSpacing,
   auto: 'auto',
   full: '100%',
-  screen: '100vh',
   min: 'min-content',
   max: 'max-content',
   fit: 'fit-content',
@@ -241,6 +240,16 @@ const sizing = {
   }
 };
 
+const height = {
+  ...sizing,
+  screen: '100vh'
+};
+
+const width = {
+  ...sizing,
+  screen: '100vw'
+};
+
 const margin = {
   ...spacing,
   ...negativeSpacing,
@@ -506,7 +515,8 @@ export const style = createTheme({
       base: colorToken('background-base-color'),
       'layer-1': colorToken('background-layer-1-color'),
       'layer-2': weirdColorToken('background-layer-2-color'),
-      pasteboard: weirdColorToken('background-pasteboard-color')
+      pasteboard: weirdColorToken('background-pasteboard-color'),
+      elevated: weirdColorToken('background-elevated-color')
     }),
     borderColor: createColorProperty({
       ...color,
@@ -575,18 +585,18 @@ export const style = createTheme({
     },
     rowGap: spacing,
     columnGap: spacing,
-    height: sizing,
-    width: sizing,
-    containIntrinsicWidth: sizing,
-    containIntrinsicHeight: sizing,
-    minHeight: sizing,
+    height,
+    width,
+    containIntrinsicWidth: width,
+    containIntrinsicHeight: height,
+    minHeight: height,
     maxHeight: {
-      ...sizing,
+      ...height,
       none: 'none'
     },
-    minWidth: sizing,
+    minWidth: width,
     maxWidth: {
-      ...sizing,
+      ...width,
       none: 'none'
     },
     borderStartWidth: createRenamedProperty('borderInlineStartWidth', borderWidth),
diff --git a/packages/@react-spectrum/s2/style/style-macro.ts b/packages/@react-spectrum/s2/style/style-macro.ts
index 988c50c881d..1246487e916 100644
--- a/packages/@react-spectrum/s2/style/style-macro.ts
+++ b/packages/@react-spectrum/s2/style/style-macro.ts
@@ -607,9 +607,9 @@ function getStaticClassName(rules: Rule[]): string {
   return rules.map(rule => (rule.prelude.startsWith('.') ? ' ' + rule.prelude.slice(1) : '') + (Array.isArray(rule.body) ? getStaticClassName(rule.body) : '')).join('');
 }
 
-export function raw(this: MacroContext | void, css: string) {
+export function raw(this: MacroContext | void, css: string, layer = '_.a') {
   let className = generateArbitraryValueSelector(css, true);
-  css = `@layer _.a {
+  css = `@layer ${layer} {
   .${className} {
   ${css}
   }
diff --git a/packages/@react-stately/virtualizer/src/LayoutInfo.ts b/packages/@react-stately/virtualizer/src/LayoutInfo.ts
index 0f6ffb39792..014f76960df 100644
--- a/packages/@react-stately/virtualizer/src/LayoutInfo.ts
+++ b/packages/@react-stately/virtualizer/src/LayoutInfo.ts
@@ -36,6 +36,11 @@ export class LayoutInfo {
    */
   parentKey: Key | null;
 
+  /** 
+   * Content for this view if it was generated by the layout rather than coming from the Collection.
+   */
+  content: any | null;
+
   /**
    * The rectangle describing the size and position of this view.
    */
@@ -82,6 +87,7 @@ export class LayoutInfo {
     this.type = type;
     this.key = key;
     this.parentKey = null;
+    this.content = null;
     this.rect = rect;
     this.estimatedSize = false;
     this.isSticky = false;
@@ -100,6 +106,7 @@ export class LayoutInfo {
     res.opacity = this.opacity;
     res.transform = this.transform;
     res.parentKey = this.parentKey;
+    res.content = this.content;
     res.isSticky = this.isSticky;
     res.zIndex = this.zIndex;
     res.allowOverflow = this.allowOverflow;
diff --git a/packages/@react-stately/virtualizer/src/Virtualizer.ts b/packages/@react-stately/virtualizer/src/Virtualizer.ts
index ffb650e1084..9279ffa8bda 100644
--- a/packages/@react-stately/virtualizer/src/Virtualizer.ts
+++ b/packages/@react-stately/virtualizer/src/Virtualizer.ts
@@ -114,8 +114,8 @@ export class Virtualizer<T extends object, V> {
   }
 
   private _renderView(reusableView: ReusableView<T, V>) {
-    let {type, key} = reusableView.layoutInfo;
-    reusableView.content = this.collection.getItem(key);
+    let {type, key, content} = reusableView.layoutInfo;
+    reusableView.content = content || this.collection.getItem(key);
     reusableView.rendered = this._renderContent(type, reusableView.content);
   }
 
diff --git a/packages/dev/parcel-transformer-react-docgen-typescript/ReactDocgenTSTransformer.ts b/packages/dev/parcel-transformer-react-docgen-typescript/ReactDocgenTSTransformer.ts
index 5abdd540500..9304f606a77 100644
--- a/packages/dev/parcel-transformer-react-docgen-typescript/ReactDocgenTSTransformer.ts
+++ b/packages/dev/parcel-transformer-react-docgen-typescript/ReactDocgenTSTransformer.ts
@@ -48,7 +48,8 @@ let excludedProps = new Set([
   'onHoverChange',
   'onFocus',
   'onBlur',
-  'onFocusChange'
+  'onFocusChange',
+  'onScroll'
 ]);
 let docGenParser = withCompilerOptions(compilerOptions, {
   shouldExtractLiteralValuesFromEnum: true,
diff --git a/packages/dev/parcel-transformer-s2-icon/IconTransformer.js b/packages/dev/parcel-transformer-s2-icon/IconTransformer.js
index 985a07bb202..36dbe66d0c3 100644
--- a/packages/dev/parcel-transformer-s2-icon/IconTransformer.js
+++ b/packages/dev/parcel-transformer-s2-icon/IconTransformer.js
@@ -57,10 +57,10 @@ module.exports = new Transformer({
           'var(--spectrum-global-color-gray-800, #292929)': `var(--iconPrimary, var(--lightningcss-light, ${tokens['gray-800'].sets.light.value}) var(--lightningcss-dark, ${tokens['gray-800'].sets.dark.value}))`
         },
         typescript: true,
+        ref: true,
         plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx']
       })
-    ).replace('export default SvgComponent;', '');
-    // will need to use svgr's templating to add ref support if we want that https://github.com/facebook/create-react-app/pull/5457
+    ).replace('export default ForwardRef;', '');
     let newFile = template(asset, iconName, optimized);
     return [{
       type: 'tsx',
@@ -87,6 +87,7 @@ function template(asset, iconName, svg) {
 import {IconProps, ${context}, IconContextValue} from '${normalizedPath.includes('@react-spectrum/s2') ? '~/src/Icon' : '@react-spectrum/s2'}';
 import {SVGProps, useRef} from 'react';
 import {useContextProps} from 'react-aria-components';
+import {SkeletonWrapper, useSkeletonIcon} from '~/src/Skeleton';
 
 ${svg.replace('import { SVGProps } from "react";', '')}
 
@@ -110,15 +111,17 @@ export default function ${iconRename}(props: IconProps) {
   }
 
   let svg = (
-    <SvgComponent
-      {...otherProps}
-      focusable={false}
-      aria-label={ariaLabel}
-      aria-hidden={ariaLabel ? (ariaHidden || undefined) : true}
-      role="img"
-      data-slot={slot}
-      className={(UNSAFE_className ?? '') + ' ' + (styles || '')}
-      style={UNSAFE_style} />
+    <SkeletonWrapper>
+      <ForwardRef
+        {...otherProps}
+        focusable={false}
+        aria-label={ariaLabel}
+        aria-hidden={ariaLabel ? (ariaHidden || undefined) : true}
+        role="img"
+        data-slot={slot}
+        className={(UNSAFE_className ?? '') + ' ' + useSkeletonIcon(styles)}
+        style={UNSAFE_style} />
+    </SkeletonWrapper>
   );
 
   if (render) {
diff --git a/packages/react-aria-components/src/GridList.tsx b/packages/react-aria-components/src/GridList.tsx
index 6aba32cf838..3dc338140ee 100644
--- a/packages/react-aria-components/src/GridList.tsx
+++ b/packages/react-aria-components/src/GridList.tsx
@@ -391,6 +391,7 @@ export const GridListItem = /*#__PURE__*/ createLeafComponent('item', function G
               }],
               [TextContext, {
                 slots: {
+                  [DEFAULT_SLOT]: {},
                   description: descriptionProps
                 }
               }],
diff --git a/packages/react-aria-components/src/utils.tsx b/packages/react-aria-components/src/utils.tsx
index 731afea4226..97c686fb243 100644
--- a/packages/react-aria-components/src/utils.tsx
+++ b/packages/react-aria-components/src/utils.tsx
@@ -73,7 +73,7 @@ export interface StyleRenderProps<T> {
   /** The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. */
   className?: string | ((values: T & {defaultClassName: string | undefined}) => string),
   /** The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. */
-  style?: CSSProperties | ((values: T & {defaultStyle: CSSProperties}) => CSSProperties)
+  style?: CSSProperties | ((values: T & {defaultStyle: CSSProperties}) => CSSProperties | undefined)
 }
 
 export interface RenderProps<T> extends StyleRenderProps<T> {
diff --git a/packages/@react-spectrum/s2/stories/GridList.stories.tsx b/scripts/copyIconDts.js
similarity index 51%
rename from packages/@react-spectrum/s2/stories/GridList.stories.tsx
rename to scripts/copyIconDts.js
index 76bad583fb6..c1f6ad6e9e8 100644
--- a/packages/@react-spectrum/s2/stories/GridList.stories.tsx
+++ b/scripts/copyIconDts.js
@@ -10,29 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import {GridList, GridListItem} from '../src/GridList';
+const glob = require('glob').sync;
+const fs = require('fs');
 
-import type {Meta} from '@storybook/react';
-
-const meta: Meta<typeof GridList> = {
-  component: GridList,
-  parameters: {
-    layout: 'centered'
-  }
-};
-
-export default meta;
-
-export const Example = (args: any) => (
-  <GridList aria-label="Ice cream flavors" {...args}>
-    <GridListItem>Chocolate</GridListItem>
-    <GridListItem>Mint</GridListItem>
-    <GridListItem>Strawberry</GridListItem>
-    <GridListItem>Vanilla</GridListItem>
-  </GridList>
-);
-
-Example.args = {
-  onAction: null,
-  selectionMode: 'multiple'
-};
+// We have to copy icon.d.ts for each icon/illustration so TypeScript's import autocomplete works.
+for (let file of glob('packages/@react-spectrum/s2/{icons,illustrations/**}/*.mjs')) {
+  fs.copyFileSync('packages/@react-spectrum/s2/icon.d.ts', file.replace('.mjs', '.d.ts'));
+}
diff --git a/yarn.lock b/yarn.lock
index 3dac3fa9cf6..85d1f54a930 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7548,6 +7548,7 @@ __metadata:
     "@react-aria/interactions": "npm:^3.22.2"
     "@react-aria/utils": "npm:^3.25.2"
     "@react-spectrum/utils": "npm:^3.11.10"
+    "@react-stately/virtualizer": "npm:^4.0.1"
     "@react-types/color": "npm:3.0.0-rc.1"
     "@react-types/dialog": "npm:^3.5.8"
     "@react-types/provider": "npm:^3.7.2"