From a9fccbde0f124853d58ba59d35f411130a2bbd2a Mon Sep 17 00:00:00 2001
From: Robert Snow <rsnow@adobe.com>
Date: Fri, 27 Feb 2026 19:24:52 -0600
Subject: [PATCH] feat(S2): S2 ListView (#8878)

* feat: s2 ListView

* Explore highlight selection

* fix docs type check

* Add highlight selection option b to table

* Add highlight selection option b to ListView

* change selection behaviour of table for highlight mode

* add option D as highlightMode

* change font weight to bold for highlight selection

* update background color

* Start new highlight selection prototypes, ListView and part of TreeView

* fix lint

* update styles for listview and treeview

* tableview

* design updates

* fix colors and add disabled items

* fix lint

* initialize docs

* fix edgeToText import

* update ListView (loadingMore, actionmenu, empty state, checkbox)

* match selection styles to treeview/tableview

* docs improvements

* add jsdoc

* support hasChildItems chevron

* add stories

* add hasChildItems example to docs

* fix overflow in empty state

* use objectFit: 'cover' for images

* vertically align icons

* add overflowMode

* audit props

* codemods

* add chromatic stories

* lint

* add ListView testing docs

* fix types

* docs types

* add description for search menu

* docs types

* fix selection checkbox visibility (always hide if disabled)

* remove highlightMode prop

* remove Tree/Table selection changes

* remove unrelated Picker change

* remove press scaling

* keep bottom border width static to avoid 1px shift when highlight selection occurs.

* add remaining states to chromatic

* remove ListViewLoadMoreItem

* fix prop types

* update migration guide

* remove bottom border radius for last item

* prop types

* remove style props from list item

* remove seam mask element in favor of extending row background

* make docs example wide

* update docs content

* add ActionBar support

* fix gap for checkbox selection

* docs update

* style updates

* remove renderer context

* merge selection for checkbox selection

* update docs

* add LinkOut icon for links that open in new tab

* fix storybook stories

* add example to ActionBar docs

* reserve space for trailing icon if at least one row has one

* add padding to loading spinner

* separate the icon and thumbnail slots examples in docs

* docs types

* move check image into chromatic folder

* export ListViewContext from index.ts

* cleanup story

* use icons in all items in navigation docs

* remove unused shorthands from macro theme

* refactor to move isPrevSelected, isNextSelected, etc. logic out of GridList.

* fix last item bottom border styles

* pass id instead of item through render props (matches Table)

* fix border styles

* add explicit bottom border width

---------

Co-authored-by: Reid Barber <reid@reidbarber.com>
---
 .storybook-s2/docs/Migrating.jsx              |   7 +
 .../s2/chromatic/ListView.stories.tsx         | 255 ++++++
 .../@react-spectrum/s2/chromatic/check.tsx    |   2 +
 packages/@react-spectrum/s2/src/ListView.tsx  | 791 ++++++++++++++++++
 packages/@react-spectrum/s2/src/index.ts      |   2 +
 .../s2/stories/ListView.stories.tsx           | 583 +++++++++++++
 packages/dev/codemods/src/s1-to-s2/UPGRADE.md |   6 +
 .../__snapshots__/imports.test.ts.snap        |   6 +-
 .../__snapshots__/listview.test.ts.snap       |  21 +
 .../multi-collection.test.ts.snap             |   7 +-
 .../src/s1-to-s2/__tests__/imports.test.ts    |   6 +-
 .../src/s1-to-s2/__tests__/listview.test.ts   |  25 +
 .../__tests__/multi-collection.test.ts        |   7 +-
 .../src/codemods/components/Item/transform.ts |   2 +
 .../codemods/components/ListView/transform.ts |  13 +
 .../src/codemods/shared/transforms.ts         |   6 +-
 packages/dev/s2-docs/pages/s2/ActionBar.mdx   |  56 ++
 packages/dev/s2-docs/pages/s2/ListView.mdx    | 396 +++++++++
 .../dev/s2-docs/pages/s2/ListView/testing.mdx |  81 ++
 packages/dev/s2-docs/pages/s2/migrating.mdx   |   6 +
 packages/dev/s2-docs/pages/s2/testing.mdx     |   1 +
 .../react-aria-components/src/GridList.tsx    |  13 +-
 22 files changed, 2269 insertions(+), 23 deletions(-)
 create mode 100644 packages/@react-spectrum/s2/chromatic/ListView.stories.tsx
 create mode 100644 packages/@react-spectrum/s2/chromatic/check.tsx
 create mode 100644 packages/@react-spectrum/s2/src/ListView.tsx
 create mode 100644 packages/@react-spectrum/s2/stories/ListView.stories.tsx
 create mode 100644 packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/listview.test.ts.snap
 create mode 100644 packages/dev/codemods/src/s1-to-s2/__tests__/listview.test.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/ListView/transform.ts
 create mode 100644 packages/dev/s2-docs/pages/s2/ListView.mdx
 create mode 100644 packages/dev/s2-docs/pages/s2/ListView/testing.mdx

diff --git a/.storybook-s2/docs/Migrating.jsx b/.storybook-s2/docs/Migrating.jsx
index 253e46f6080..76c44aa0fd7 100644
--- a/.storybook-s2/docs/Migrating.jsx
+++ b/.storybook-s2/docs/Migrating.jsx
@@ -259,6 +259,7 @@ export function Migrating() {
           <li className={style({font: 'body', marginY: 8})}>If within <Code>Picker</Code>: Update <Code>Item</Code> to be a <Code>PickerItem</Code></li>
           <li className={style({font: 'body', marginY: 8})}>If within <Code>ComboBox</Code>: Update <Code>Item</Code> to be a <Code>ComboBoxItem</Code></li>
           <li className={style({font: 'body', marginY: 8})}>If within <Code>ListBox</Code>: Update <Code>Item</Code> to be a <Code>ListBoxItem</Code></li>
+          <li className={style({font: 'body', marginY: 8})}>If within <Code>ListView</Code>: Update <Code>Item</Code> to be a <Code>ListViewItem</Code></li>
           <li className={style({font: 'body', marginY: 8})}>If within <Code>TabList</Code>: Update <Code>Item</Code> to be a <Code>Tab</Code></li>
           <li className={style({font: 'body', marginY: 8})}>If within <Code>TabPanels</Code>: Update <Code>Item</Code> to be a <Code>TabPanel</Code> and remove surrounding <Code>TabPanels</Code></li>
           <li className={style({font: 'body', marginY: 8})}>Update <Code>key</Code> to be <Code>id</Code> (and keep <Code>key</Code> if rendered inside <Code>array.map</Code>)</li>
@@ -275,6 +276,12 @@ export function Migrating() {
           <li className={style({font: 'body', marginY: 8})}>Update <Code>Item</Code> to be a <Code>ListBoxItem</Code></li>
         </ul>
 
+        <H3>ListView</H3>
+        <ul className="sb-unstyled">
+          <li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>density</Code> (it has not been implemented yet)</li>
+          <li className={style({font: 'body', marginY: 8})}>[PENDING] Comment out <Code>dragAndDropHooks</Code> (it has not been implemented yet)</li>
+        </ul>
+
         <H3>Menu</H3>
         <ul className="sb-unstyled">
           <li className={style({font: 'body', marginY: 8})}>Update <Code>Item</Code> to be a <Code>MenuItem</Code></li>
diff --git a/packages/@react-spectrum/s2/chromatic/ListView.stories.tsx b/packages/@react-spectrum/s2/chromatic/ListView.stories.tsx
new file mode 100644
index 00000000000..b59ee06e31d
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/ListView.stories.tsx
@@ -0,0 +1,255 @@
+/*
+ * Copyright 2026 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 {ActionButton, ActionButtonGroup, ActionMenu, Content, Heading, IllustratedMessage, Image, ListView, ListViewItem, MenuItem, Text} from '../src';
+import {checkers} from './check';
+import Delete from '../s2wf-icons/S2_Icon_Delete_20_N.svg';
+import Edit from '../s2wf-icons/S2_Icon_Edit_20_N.svg';
+import File from '../s2wf-icons/S2_Icon_File_20_N.svg';
+import Folder from '../s2wf-icons/S2_Icon_Folder_20_N.svg';
+import FolderOpen from '../spectrum-illustrations/linear/FolderOpen';
+import type {Meta, StoryObj} from '@storybook/react';
+import {style} from '../style/spectrum-theme' with {type: 'macro'};
+
+const meta: Meta<typeof ListView> = {
+  component: ListView,
+  parameters: {
+    chromaticProvider: {disableAnimations: true}
+  },
+  title: 'S2 Chromatic/ListView'
+};
+
+export default meta;
+type Story = StoryObj<typeof ListView>;
+
+let listViewStyles = style({width: 320, height: 320});
+
+const items = [
+  {id: 'utilities', name: 'Utilities', type: 'folder', description: '16 items'},
+  {id: 'photoshop', name: 'Adobe Photoshop', type: 'file', description: 'Application'},
+  {id: 'illustrator', name: 'Adobe Illustrator', type: 'file', description: 'Application'},
+  {id: 'xd', name: 'Adobe XD', type: 'file', description: 'Application'}
+];
+
+export const Example: Story = {
+  render: (args) => (
+    <ListView {...args} aria-label="Files" styles={listViewStyles}>
+      <ListViewItem id="utilities" textValue="Utilities" hasChildItems>
+        <Folder />
+        <Text>Utilities</Text>
+        <Text slot="description">16 items</Text>
+      </ListViewItem>
+      <ListViewItem id="photoshop">Adobe Photoshop</ListViewItem>
+      <ListViewItem id="illustrator">Adobe Illustrator</ListViewItem>
+      <ListViewItem id="xd">Adobe XD</ListViewItem>
+    </ListView>
+  ),
+  args: {
+    selectionMode: 'multiple',
+    onLoadMore: undefined
+  }
+};
+
+export const HighlightSelection: Story = {
+  ...Example,
+  args: {
+    ...Example.args,
+    selectionStyle: 'highlight',
+    selectedKeys: ['photoshop', 'illustrator']
+  }
+};
+
+export const Quiet: Story = {
+  ...Example,
+  args: {
+    ...Example.args,
+    isQuiet: true
+  }
+};
+
+export const WithImages: Story = {
+  render: (args) => (
+    <ListView {...args} aria-label="Images" styles={listViewStyles} items={items}>
+      {(item) => (
+        <ListViewItem textValue={item.name}>
+          <Text>{item.name}</Text>
+          <Image src={checkers} alt={item.name} />
+        </ListViewItem>
+      )}
+    </ListView>
+  )
+};
+
+export const OverflowTruncate: Story = {
+  render: (args) => (
+    <ListView {...args} aria-label="Long text examples" styles={listViewStyles}>
+      <ListViewItem id="a">
+        This is a very very very very very very very very long title.
+      </ListViewItem>
+      <ListViewItem id="b" textValue="Short title, long description">
+        <Text>Short title</Text>
+        <Text slot="description">This is a very very very very very very very very long description.</Text>
+      </ListViewItem>
+      <ListViewItem id="c" textValue="Long title, long description">
+        <Text>This is a very very very very very very very very long title.</Text>
+        <Text slot="description">This is a very very very very very very very very long description.</Text>
+      </ListViewItem>
+    </ListView>
+  ),
+  args: {
+    ...Example.args,
+    overflowMode: 'truncate'
+  }
+};
+
+export const OverflowWrap: Story = {
+  render: (args) => (
+    <ListView {...args} aria-label="Long text examples" styles={listViewStyles}>
+      <ListViewItem id="a">
+        This is a very very very very very very very very long title.
+      </ListViewItem>
+      <ListViewItem id="b" textValue="Short title, long description">
+        <Text>Short title</Text>
+        <Text slot="description">This is a very very very very very very very very long description.</Text>
+      </ListViewItem>
+      <ListViewItem id="c" textValue="Long title, long description">
+        <Text>This is a very very very very very very very very long title.</Text>
+        <Text slot="description">This is a very very very very very very very very long description.</Text>
+      </ListViewItem>
+    </ListView>
+  ),
+  args: {
+    ...Example.args,
+    overflowMode: 'wrap'
+  }
+};
+
+export const DisabledItems: Story = {
+  render: (args) => (
+    <ListView {...args} aria-label="Files" items={items} styles={listViewStyles} selectionMode="multiple" disabledKeys={['utilities', 'illustrator']}>
+      {(item) => (
+        <ListViewItem textValue={item.name} hasChildItems={item.type === 'folder'}>
+          {item.type === 'folder' ? <Folder /> : <File />}
+          <Text>{item.name}</Text>
+          <Text slot="description">{item.description}</Text>
+        </ListViewItem>
+      )}
+    </ListView>
+  )
+};
+
+export const DisabledBehaviorSelection: Story = {
+  ...DisabledItems,
+  args: {
+    disabledBehavior: 'selection'
+  }
+};
+
+export const CheckboxSelection: Story = {
+  ...Example,
+  args: {
+    ...Example.args,
+    selectionStyle: 'checkbox',
+    selectedKeys: ['photoshop', 'illustrator']
+  }
+};
+
+export const Links: Story = {
+  render: (args) => (
+    <ListView {...args} aria-label="Bookmarks" styles={listViewStyles}>
+      <ListViewItem id="https://adobe.com/" href="https://adobe.com/" target="_blank">Adobe</ListViewItem>
+      <ListViewItem id="https://google.com/" href="https://google.com/" target="_blank">Google</ListViewItem>
+      <ListViewItem id="https://apple.com/" href="https://apple.com/" target="_blank">Apple</ListViewItem>
+      <ListViewItem id="https://nytimes.com/" href="https://nytimes.com/" target="_blank">New York Times</ListViewItem>
+    </ListView>
+  ),
+  args: {
+    selectionMode: 'none'
+  }
+};
+
+export const WithActions: Story = {
+  render: (args) => (
+    <ListView {...args} aria-label="Files" styles={listViewStyles}>
+      <ListViewItem id="utilities" textValue="Utilities" hasChildItems>
+        <Folder />
+        <Text>Utilities</Text>
+        <Text slot="description">16 items</Text>
+        <ActionButtonGroup>
+          <ActionButton aria-label="Edit"><Edit /></ActionButton>
+        </ActionButtonGroup>
+        <ActionMenu>
+          <MenuItem id="edit"><Edit /><Text>Edit</Text></MenuItem>
+          <MenuItem id="delete"><Delete /><Text>Delete</Text></MenuItem>
+        </ActionMenu>
+      </ListViewItem>
+      <ListViewItem id="photoshop" textValue="Adobe Photoshop">
+        <Text>Adobe Photoshop</Text>
+        <Text slot="description">Application</Text>
+        <ActionButtonGroup>
+          <ActionButton aria-label="Edit"><Edit /></ActionButton>
+        </ActionButtonGroup>
+        <ActionMenu>
+          <MenuItem id="edit"><Edit /><Text>Edit</Text></MenuItem>
+          <MenuItem id="delete"><Delete /><Text>Delete</Text></MenuItem>
+        </ActionMenu>
+      </ListViewItem>
+    </ListView>
+  ),
+  args: {
+    selectionMode: 'single'
+  }
+};
+
+export const Loading: Story = {
+  render: (args) => (
+    <ListView {...args} aria-label="Loading list" styles={listViewStyles}>
+      {[]}
+    </ListView>
+  ),
+  args: {
+    loadingState: 'loading'
+  }
+};
+
+export const LoadingMore: Story = {
+  render: (args) => (
+    <ListView {...args} aria-label="Loading more list" styles={listViewStyles} items={items} onLoadMore={() => {}}>
+      {(item) => (
+        <ListViewItem textValue={item.name}>
+          {item.name}
+        </ListViewItem>
+      )}
+    </ListView>
+  ),
+  args: {
+    loadingState: 'loadingMore'
+  }
+};
+
+export const EmptyState: Story = {
+  render: (args) => (
+    <ListView
+      {...args}
+      aria-label="Empty list"
+      styles={listViewStyles}
+      renderEmptyState={() => (
+        <IllustratedMessage>
+          <FolderOpen />
+          <Heading>No results</Heading>
+          <Content>No results found.</Content>
+        </IllustratedMessage>
+      )}>
+      {[]}
+    </ListView>
+  )
+};
diff --git a/packages/@react-spectrum/s2/chromatic/check.tsx b/packages/@react-spectrum/s2/chromatic/check.tsx
new file mode 100644
index 00000000000..c461a431e3d
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/check.tsx
@@ -0,0 +1,2 @@
+
+export let checkers = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuMTAwMDk4IDBIMy4xMDAxVjNIMC4xMDAwOThWMFoiIGZpbGw9IiNFMUUxRTEiLz4KPHBhdGggZD0iTTAuMTAwMDk4IDE4SDMuMTAwMVYyMUgwLjEwMDA5OFYxOFoiIGZpbGw9IiNFMUUxRTEiLz4KPHBhdGggZD0iTTYuMTAwMSAwSDkuMTAwMVYzSDYuMTAwMVYwWiIgZmlsbD0iI0UxRTFFMSIvPgo8cGF0aCBkPSJNNi4xMDAxIDE4SDkuMTAwMVYyMUg2LjEwMDFWMThaIiBmaWxsPSIjRTFFMUUxIi8+CjxwYXRoIGQ9Ik0xMi4xMDAxIDE4SDkuMTAwMVYxNUgxMi4xMDAxVjE4WiIgZmlsbD0iI0UxRTFFMSIvPgo8cGF0aCBkPSJNMTIuMTAwMSAyNEg5LjEwMDFWMjFIMTIuMTAwMVYyNFoiIGZpbGw9IiNFMUUxRTEiLz4KPHBhdGggZD0iTTE1LjEwMDEgMEgxMi4xMDAxVjNIMTUuMTAwMVYwWiIgZmlsbD0iI0UxRTFFMSIvPgo8cGF0aCBkPSJNMTUuMTAwMSAxOEgxMi4xMDAxVjIxSDE1LjEwMDFWMThaIiBmaWxsPSIjRTFFMUUxIi8+CjxwYXRoIGQ9Ik0xOC4xMDAxIDE4SDE1LjEwMDFWMTVIMTguMTAwMVYxOFoiIGZpbGw9IiNFMUUxRTEiLz4KPHBhdGggZD0iTTE4LjEwMDEgMjRIMTUuMTAwMVYyMUgxOC4xMDAxVjI0WiIgZmlsbD0iI0UxRTFFMSIvPgo8cGF0aCBkPSJNMjEuMTAwMSAwSDE4LjEwMDFWM0gyMS4xMDAxVjBaIiBmaWxsPSIjRTFFMUUxIi8+CjxwYXRoIGQ9Ik0yMS4xMDAxIDE4SDE4LjEwMDFWMjFIMjEuMTAwMVYxOFoiIGZpbGw9IiNFMUUxRTEiLz4KPHBhdGggZD0iTTI0LjEwMDEgMThIMjEuMTAwMVYxNUgyNC4xMDAxVjE4WiIgZmlsbD0iI0UxRTFFMSIvPgo8cGF0aCBkPSJNMjEuMTAwMSAyMUgyNC4xMDAxVjI0SDIxLjEwMDFWMjFaIiBmaWxsPSIjRTFFMUUxIi8+CjxwYXRoIGQ9Ik02LjEwMDEgMThIMy4xMDAxVjE1SDYuMTAwMVYxOFoiIGZpbGw9IiNFMUUxRTEiLz4KPHBhdGggZD0iTTYuMTAwMSAyNEgzLjEwMDFWMjFINi4xMDAxVjI0WiIgZmlsbD0iI0UxRTFFMSIvPgo8cGF0aCBkPSJNMC4xMDAwOTggNkgzLjEwMDFWM0gwLjEwMDA5OFY2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTYuMTAwMSA2SDkuMTAwMVYzSDYuMTAwMVY2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTEyLjEwMDEgMTJIOS4xMDAxVjE1SDEyLjEwMDFWMTJaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTUuMTAwMSA2SDEyLjEwMDFWM0gxNS4xMDAxVjZaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTguMTAwMSAxMkgxNS4xMDAxVjE1SDE4LjEwMDFWMTJaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMjEuMTAwMSA2SDE4LjEwMDFWM0gyMS4xMDAxVjZaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMjQuMTAwMSAxMkgyMS4xMDAxVjE1SDI0LjEwMDFWMTJaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNNi4xMDAxIDEySDMuMTAwMVYxNUg2LjEwMDFWMTJaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMC4xMDAwOTggOUgzLjEwMDFWNkgwLjEwMDA5OFY5WiIgZmlsbD0iI0UxRTFFMSIvPgo8cGF0aCBkPSJNNi4xMDAxIDlIOS4xMDAxVjZINi4xMDAxVjlaIiBmaWxsPSIjRTFFMUUxIi8+CjxwYXRoIGQ9Ik0xMi4xMDAxIDlIOS4xMDAxVjEySDEyLjEwMDFWOVoiIGZpbGw9IiNFMUUxRTEiLz4KPHBhdGggZD0iTTE1LjEwMDEgOUgxMi4xMDAxVjZIMTUuMTAwMVY5WiIgZmlsbD0iI0UxRTFFMSIvPgo8cGF0aCBkPSJNMTguMTAwMSA5SDE1LjEwMDFWMTJIMTguMTAwMVY5WiIgZmlsbD0iI0UxRTFFMSIvPgo8cGF0aCBkPSJNMjEuMTAwMSA5SDE4LjEwMDFWNkgyMS4xMDAxVjlaIiBmaWxsPSIjRTFFMUUxIi8+CjxwYXRoIGQ9Ik0yNC4xMDAxIDlIMjEuMTAwMVYxMkgyNC4xMDAxVjlaIiBmaWxsPSIjRTFFMUUxIi8+CjxwYXRoIGQ9Ik02LjEwMDEgOUgzLjEwMDFWMTJINi4xMDAxVjlaIiBmaWxsPSIjRTFFMUUxIi8+CjxwYXRoIGQ9Ik0wLjEwMDA5OCAxMkgzLjEwMDFWOUgwLjEwMDA5OFYxMloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik02LjEwMDEgMTJIOS4xMDAxVjlINi4xMDAxVjEyWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTEyLjEwMDEgNkg5LjEwMDFWOUgxMi4xMDAxVjZaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTUuMTAwMSAxMkgxMi4xMDAxVjlIMTUuMTAwMVYxMloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0xOC4xMDAxIDZIMTUuMTAwMVY5SDE4LjEwMDFWNloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0yMS4xMDAxIDEySDE4LjEwMDFWOUgyMS4xMDAxVjEyWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTI0LjEwMDEgNkgyMS4xMDAxVjlIMjQuMTAwMVY2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTYuMTAwMSA2SDMuMTAwMVY5SDYuMTAwMVY2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTAuMTAwMDk4IDE1SDMuMTAwMVYxMkgwLjEwMDA5OFYxNVoiIGZpbGw9IiNFMUUxRTEiLz4KPHBhdGggZD0iTTYuMTAwMSAxNUg5LjEwMDFWMTJINi4xMDAxVjE1WiIgZmlsbD0iI0UxRTFFMSIvPgo8cGF0aCBkPSJNMTIuMTAwMSAzSDkuMTAwMVY2SDEyLjEwMDFWM1oiIGZpbGw9IiNFMUUxRTEiLz4KPHBhdGggZD0iTTE1LjEwMDEgMTVIMTIuMTAwMVYxMkgxNS4xMDAxVjE1WiIgZmlsbD0iI0UxRTFFMSIvPgo8cGF0aCBkPSJNMTguMTAwMSAzSDE1LjEwMDFWNkgxOC4xMDAxVjNaIiBmaWxsPSIjRTFFMUUxIi8+CjxwYXRoIGQ9Ik0yMS4xMDAxIDE1SDE4LjEwMDFWMTJIMjEuMTAwMVYxNVoiIGZpbGw9IiNFMUUxRTEiLz4KPHBhdGggZD0iTTI0LjEwMDEgM0gyMS4xMDAxVjZIMjQuMTAwMVYzWiIgZmlsbD0iI0UxRTFFMSIvPgo8cGF0aCBkPSJNNi4xMDAxIDNIMy4xMDAxVjZINi4xMDAxVjNaIiBmaWxsPSIjRTFFMUUxIi8+CjxwYXRoIGQ9Ik0wLjEwMDA5OCAxOEgzLjEwMDFWMTVIMC4xMDAwOThWMThaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMC4xMDAwOTggMjRIMy4xMDAxVjIxSDAuMTAwMDk4VjI0WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTYuMTAwMSAxOEg5LjEwMDFWMTVINi4xMDAxVjE4WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTYuMTAwMSAyNEg5LjEwMDFWMjFINi4xMDAxVjI0WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTEyLjEwMDEgMEg5LjEwMDFWM0gxMi4xMDAxVjBaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTIuMTAwMSAxOEg5LjEwMDFWMjFIMTIuMTAwMVYxOFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0xNS4xMDAxIDE4SDEyLjEwMDFWMTVIMTUuMTAwMVYxOFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0xNS4xMDAxIDI0SDEyLjEwMDFWMjFIMTUuMTAwMVYyNFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0xOC4xMDAxIDBIMTUuMTAwMVYzSDE4LjEwMDFWMFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0xOC4xMDAxIDE4SDE1LjEwMDFWMjFIMTguMTAwMVYxOFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0yMS4xMDAxIDE4SDE4LjEwMDFWMTVIMjEuMTAwMVYxOFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0yMS4xMDAxIDI0SDE4LjEwMDFWMjFIMjEuMTAwMVYyNFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0yMS4xMDAxIDNIMjQuMTAwMVYwSDIxLjEwMDFWM1oiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0yNC4xMDAxIDE4SDIxLjEwMDFWMjFIMjQuMTAwMVYxOFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik02LjEwMDEgMEgzLjEwMDFWM0g2LjEwMDFWMFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik02LjEwMDEgMThIMy4xMDAxVjIxSDYuMTAwMVYxOFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=';
diff --git a/packages/@react-spectrum/s2/src/ListView.tsx b/packages/@react-spectrum/s2/src/ListView.tsx
new file mode 100644
index 00000000000..05cb31186d3
--- /dev/null
+++ b/packages/@react-spectrum/s2/src/ListView.tsx
@@ -0,0 +1,791 @@
+/*
+ * Copyright 2026 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 {ActionButtonGroupContext} from './ActionButtonGroup';
+import {ActionMenuContext} from './ActionMenu';
+import {baseColor, colorMix, focusRing, fontRelative, space, style} from '../style' with {type: 'macro'};
+import {centerBaseline} from './CenterBaseline';
+import {Checkbox} from './Checkbox';
+import {
+  CheckboxContext,
+  Collection,
+  CollectionRendererContext,
+  ContextValue,
+  DEFAULT_SLOT,
+  DefaultCollectionRenderer,
+  GridList,
+  GridListItem,
+  GridListItemProps,
+  GridListItemRenderProps,
+  GridListLoadMoreItem,
+  GridListProps,
+  GridListRenderProps,
+  Key,
+  ListLayout,
+  ListState,
+  Provider,
+  SlotProps,
+  useSlottedContext,
+  Virtualizer
+} from 'react-aria-components';
+import Chevron from '../ui-icons/Chevron';
+import {controlFont, getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
+import {createContext, forwardRef, ReactElement, ReactNode, useContext, useRef} from 'react';
+import {DOMProps, DOMRef, DOMRefValue, forwardRefType, GlobalDOMAttributes, LoadingState} from '@react-types/shared';
+import {edgeToText} from '../style/spectrum-theme' with {type: 'macro'};
+import {IconContext} from './Icon';
+import {ImageContext} from './Image';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
+import LinkOutIcon from '../ui-icons/LinkOut';
+import {ProgressCircle} from './ProgressCircle';
+import {Text, TextContext} from './Content';
+import {useActionBarContainer} from './ActionBar';
+import {useDOMRef} from '@react-spectrum/utils';
+import {useLocale, useLocalizedStringFormatter} from 'react-aria';
+import {useScale} from './utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
+
+export interface ListViewProps<T> extends Omit<GridListProps<T>, 'className' | 'style' | 'children' | 'selectionBehavior' | 'dragAndDropHooks' | 'layout' | 'render' | 'keyboardNavigationBehavior' | keyof GlobalDOMAttributes>, DOMProps, UnsafeStyles, ListViewStylesProps, SlotProps {
+  /** Spectrum-defined styles, returned by the `style()` macro. */
+  styles?: StylesPropWithHeight,
+  /** The current loading state of the ListView. */
+  loadingState?: LoadingState,
+  /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */
+  onLoadMore?: () => void,
+  /** The children of the ListView. */
+  children: ReactNode | ((item: T) => ReactNode),
+  /** Provides the ActionBar to display when items are selected in the ListView. */
+  renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement,
+  /** Hides the default link out icons on items that open links in a new tab. */
+  hideLinkOutIcon?: boolean
+}
+
+interface ListViewStylesProps {
+  /** Whether the ListView should be displayed with a quiet style. */
+  isQuiet?: boolean,
+  /**
+   * How selection should be displayed.
+   * @default 'checkbox'
+   */
+  selectionStyle?: 'highlight' | 'checkbox',
+  /**
+   * Sets the overflow behavior for item contents.
+   * @default 'truncate'
+   */
+  overflowMode?: 'wrap' | 'truncate'
+}
+
+export interface ListViewItemProps extends Omit<GridListItemProps, 'children' | 'className' | 'style' | 'render' | 'onClick' | keyof GlobalDOMAttributes> {
+  /**
+   * The contents of the item.
+   */
+  children: ReactNode,
+  /** Whether the item has child items (renders a chevron indicator). */
+  hasChildItems?: boolean
+}
+
+export const ListViewContext = createContext<ContextValue<Partial<ListViewProps<any>>, DOMRefValue<HTMLDivElement>>>(null);
+
+let InternalListViewContext = createContext<{isQuiet?: boolean, selectionStyle?: 'highlight' | 'checkbox', overflowMode?: 'wrap' | 'truncate', scale?: 'medium' | 'large', hideLinkOutIcon?: boolean}>({});
+
+const listViewWrapper = style({
+  minHeight: 0,
+  minWidth: 0,
+  display: 'flex',
+  isolation: 'isolate',
+  disableTapHighlight: true,
+  position: 'relative',
+  // Clip ActionBar animation.
+  overflow: 'clip'
+}, getAllowedOverrides({height: true}));
+
+// When any row has a trailing icon, reserve space so actions align.
+const hasTrailingIconRows = ':has([data-has-trailing-icon]) [role="row"]';
+
+const listView = style<GridListRenderProps & {isQuiet?: boolean}>({
+  ...focusRing(),
+  outlineOffset: {
+    default: -2,
+    isQuiet: -1
+  },
+  userSelect: 'none',
+  minHeight: 0,
+  minWidth: 0,
+  width: 'full',
+  height: 'full',
+  boxSizing: 'border-box',
+  overflow: 'auto',
+  fontSize: controlFont(),
+  backgroundColor: {
+    default: 'gray-25',
+    isQuiet: 'transparent',
+    forcedColors: 'Background'
+  },
+  borderRadius: {
+    default: 'default',
+    isQuiet: 'none'
+  },
+  borderColor: 'gray-300',
+  borderWidth: {
+    default: 1,
+    isQuiet: 0
+  },
+  borderStyle: 'solid',
+  '--trailing-icon-width': {
+    type: 'width',
+    value: {
+      default: 'auto',
+      [hasTrailingIconRows]: fontRelative(20)
+    }
+  }
+});
+
+/**
+ * A ListView displays a list of interactive items, and allows a user to navigate, select, or perform an action.
+ */
+export const ListView = /*#__PURE__*/ (forwardRef as forwardRefType)(function ListView<T extends object>(
+  props: ListViewProps<T>,
+  ref: DOMRef<HTMLDivElement>
+) {
+  [props, ref] = useSpectrumContextProps(props, ref, ListViewContext);
+  let {children, isQuiet, selectionStyle = 'checkbox', overflowMode = 'truncate', loadingState, onLoadMore, renderEmptyState: userRenderEmptyState, hideLinkOutIcon = false, ...otherProps} = props;
+  let scale = useScale();
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
+  let rowHeight = scale === 'large' ? 50 : 40;
+
+  let domRef = useDOMRef(ref);
+  let scrollRef = useRef<HTMLElement | null>(null);
+
+  let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
+  let renderEmptyState: ListViewProps<T>['renderEmptyState'] | undefined;
+  if (userRenderEmptyState != null && !isLoading) {
+    renderEmptyState = (renderProps) => (
+      <div className={emptyStateWrapper}>
+        <CollectionRendererContext.Provider value={DefaultCollectionRenderer}>
+          {userRenderEmptyState!(renderProps)}
+        </CollectionRendererContext.Provider>
+      </div>
+    );
+  } else if (loadingState === 'loading') {
+    renderEmptyState = () => (
+      <div className={centeredWrapper}>
+        <div className={loadingSpinnerWrapper}>
+          <ProgressCircle
+            isIndeterminate
+            aria-label={stringFormatter.format('table.loading')} />
+        </div>
+      </div>
+    );
+  }
+
+  let loadMoreSpinner = onLoadMore ? (
+    <GridListLoadMoreItem isLoading={loadingState === 'loadingMore'} onLoadMore={onLoadMore} className={style({height: 'full', width: 'full', paddingY: 8})}>
+      <div className={centeredWrapper}>
+        <div className={loadingSpinnerWrapper}>
+          <ProgressCircle
+            isIndeterminate
+            aria-label={stringFormatter.format('table.loadingMore')} />
+        </div>
+      </div>
+    </GridListLoadMoreItem>
+  ) : null;
+
+  let wrappedChildren: ReactNode;
+  let gridListProps = otherProps;
+  if (typeof children === 'function' && otherProps.items) {
+    let {items, dependencies = [], ...rest} = otherProps;
+    gridListProps = rest;
+    wrappedChildren = (
+      <>
+        <Collection items={items} dependencies={dependencies}>
+          {children}
+        </Collection>
+        {loadMoreSpinner}
+      </>
+    );
+  } else {
+    wrappedChildren = (
+      <>
+        {children}
+        {loadMoreSpinner}
+      </>
+    );
+  }
+
+  let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({...props, scrollRef});
+
+  return (
+    <div
+      ref={domRef}
+      className={(props.UNSAFE_className || '') + listViewWrapper(null, props.styles)}
+      style={props.UNSAFE_style}>
+      <Virtualizer
+        layout={ListLayout}
+        layoutOptions={{
+          estimatedRowHeight: rowHeight,
+          loaderHeight: 60
+        }}>
+        <InternalListViewContext.Provider value={{isQuiet, selectionStyle, overflowMode, scale, hideLinkOutIcon}}>
+          <GridList
+            ref={scrollRef as any}
+            {...gridListProps}
+            selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}
+            selectionMode={gridListProps.selectionMode}
+            renderEmptyState={renderEmptyState}
+            style={{
+              paddingBottom: actionBarHeight > 0 ? actionBarHeight + 8 : 0,
+              scrollPaddingBottom: actionBarHeight > 0 ? actionBarHeight + 8 : 0
+            }}
+            className={(renderProps) => listView({
+              ...renderProps,
+              isQuiet
+            })}
+            selectedKeys={selectedKeys}
+            defaultSelectedKeys={undefined}
+            onSelectionChange={onSelectionChange}>
+            {wrappedChildren}
+          </GridList>
+        </InternalListViewContext.Provider>
+      </Virtualizer>
+      {actionBar}
+    </div>
+  );
+});
+
+const selectedBackground = colorMix('gray-25', 'gray-900', 7);
+const selectedActiveBackground = colorMix('gray-25', 'gray-900', 10);
+
+const listitem = style<GridListItemRenderProps & {
+  isFocused: boolean,
+  isLink?: boolean,
+  isQuiet?: boolean,
+  isFirstItem?: boolean,
+  isLastItem?: boolean,
+  isSelected?: boolean,
+  isDisabled?: boolean,
+  isNextSelected?: boolean,
+  isPrevSelected?: boolean,
+  isPrevNotSelected?: boolean,
+  isNextNotSelected?: boolean,
+  selectionStyle?: 'highlight' | 'checkbox',
+  scale?: 'medium' | 'large'
+}>({
+  ...focusRing(),
+  boxSizing: 'border-box',
+  outlineOffset: -2,
+  columnGap: 0,
+  paddingX: 0,
+  paddingY: 8,
+  backgroundColor: 'transparent',
+  color: {
+    default: baseColor('neutral-subdued'),
+    isSelected: baseColor('neutral'),
+    isDisabled: {
+      default: 'disabled',
+      forcedColors: 'GrayText'
+    }
+  },
+  position: 'relative',
+  gridColumnStart: 1,
+  gridColumnEnd: -1,
+  display: 'grid',
+  gridTemplateAreas: [
+    '. checkmark icon label       actions actionmenu trailing-icon .',
+    '. .         .    description actions actionmenu trailing-icon .'
+  ],
+  gridTemplateColumns: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'var(--trailing-icon-width)', edgeToText(40)],
+  gridTemplateRows: '1fr auto',
+  rowGap: {
+    ':has([slot=description])': space(1)
+  },
+  alignItems: 'baseline',
+  minHeight: {
+    default: 40,
+    scale: {
+      large: 50
+    }
+  },
+  textDecoration: 'none',
+  cursor: {
+    default: 'default',
+    isLink: 'pointer'
+  },
+  transition: 'default',
+  '--borderColor': {
+    type: 'borderColor',
+    value: {
+      default: 'gray-300',
+      isSelected: {
+        selectionStyle: {
+          highlight: 'blue-900',
+          checkbox: 'gray-300'
+        }
+      },
+      forcedColors: 'ButtonBorder'
+    }
+  },
+  borderTopWidth: 0,
+  borderBottomWidth: {
+    default: 1,
+    isLastItem: {
+      default: 1,
+      isQuiet: {
+        selectionStyle: {
+          checkbox: 0,
+          highlight: {
+            default: 0,
+            isSelected: 1
+          }
+        }
+      }
+    }
+  },
+  borderStartWidth: 0,
+  borderEndWidth: 0,
+  borderStyle: 'solid',
+  borderColor: {
+    default: '--borderColor',
+    isSelected: {
+      selectionStyle: {
+        highlight: {
+          default: 'transparent',
+          isNextSelected: 'transparent'
+        },
+        checkbox: {
+          default: '--borderColor',
+          isNextSelected: selectedBackground
+        }
+      }
+    }
+  },
+  borderTopStartRadius: {
+    isFirstItem: 'default'
+  },
+  borderTopEndRadius: {
+    isFirstItem: 'default'
+  },
+  borderBottomStartRadius: {
+    isLastItem: {
+      isQuiet: {
+        isSelected: 'default'
+      }
+    }
+  },
+  borderBottomEndRadius: {
+    isLastItem: {
+      isQuiet: {
+        isSelected: 'default'
+      }
+    }
+  }
+});
+
+const listRowBackground = style<GridListItemRenderProps & {
+  isFirstItem?: boolean,
+  isLastItem?: boolean,
+  isQuiet?: boolean,
+  isPrevSelected?: boolean,
+  isNextSelected?: boolean,
+  isPrevNotSelected?: boolean,
+  isNextNotSelected?: boolean,
+  selectionStyle?: 'highlight' | 'checkbox'
+}>({
+  position: 'absolute',
+  zIndex: -1,
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: {
+    default: 0,
+    isSelected: {
+      selectionStyle: {
+        checkbox: 0,
+        highlight: {
+          default: 0,
+          isNextSelected: '[-1px]'
+        }
+      }
+    }
+  },
+  backgroundColor: {
+    default: '--rowBackgroundColor',
+    isHovered: {
+      default: 'gray-900/5',
+      selectionStyle: {
+        checkbox: selectedBackground
+      }
+    },
+    isPressed: {
+      default: 'gray-900/10',
+      selectionStyle: {
+        checkbox: selectedActiveBackground
+      }
+    },
+    isSelected: {
+      selectionStyle: {
+        checkbox: {
+          default: selectedBackground,
+          isHovered: selectedActiveBackground,
+          isPressed: selectedActiveBackground,
+          isFocusVisible: selectedActiveBackground
+        },
+        highlight: {
+          default: 'blue-900/10',
+          isHovered: 'blue-900/15',
+          isPressed: 'blue-900/15'
+        }
+      }
+    },
+    forcedColors: {
+      default: 'Background'
+    }
+  },
+  borderTopStartRadius: {
+    isFirstItem: 'default'
+  },
+  borderTopEndRadius: {
+    isFirstItem: 'default'
+  },
+  borderBottomStartRadius: {
+    isLastItem: {
+      isQuiet: {
+        isSelected: 'default'
+      }
+    }
+  },
+  borderBottomEndRadius: {
+    isLastItem: {
+      isQuiet: {
+        isSelected: 'default'
+      }
+    }
+  },
+  borderTopWidth: {
+    default: 1,
+    isPrevSelected: {
+      selectionStyle: {
+        highlight: 0,
+        checkbox: 0
+      }
+    }
+  },
+  borderBottomWidth: {
+    default: 1,
+    isNextSelected: {
+      selectionStyle: {
+        highlight: 0,
+        checkbox: 0
+      }
+    },
+    isLastItem: {
+      default: 1,
+      isQuiet: {
+        selectionStyle: {
+          checkbox: 0,
+          highlight: {
+            default: 0,
+            isSelected: 1
+          }
+        }
+      }
+    }
+  },
+  borderStartWidth: 1,
+  borderEndWidth: 1,
+  borderStyle: 'solid',
+  borderColor: {
+    default: 'transparent',
+    isSelected: {
+      selectionStyle: {
+        highlight: '--borderColor',
+        checkbox: 'transparent'
+      }
+    }
+  }
+});
+
+export let label = style({
+  gridArea: 'label',
+  alignSelf: 'center',
+  font: controlFont(),
+  color: 'inherit',
+  truncate: true,
+  whiteSpace: {
+    default: 'nowrap',
+    overflowMode: {
+      wrap: 'normal'
+    }
+  }
+});
+
+export let description = style({
+  gridArea: 'description',
+  alignSelf: 'center',
+  truncate: true,
+  whiteSpace: {
+    default: 'nowrap',
+    overflowMode: {
+      wrap: 'normal'
+    }
+  },
+  font: 'ui-sm',
+  color: {
+    default: baseColor('neutral-subdued'),
+    isDisabled: 'disabled'
+  },
+  transition: 'default'
+});
+
+export let iconCenterWrapper = style({
+  display: 'flex',
+  gridArea: 'icon',
+  gridRowEnd: 'span 2',
+  alignSelf: 'center',
+  alignItems: 'center'
+});
+
+export let icon = style({
+  display: 'block',
+  size: fontRelative(20),
+  // too small default icon size is wrong, it's like the icons are 1 tshirt size bigger than the rest of the component? check again after typography changes
+  // reminder, size of WF is applied via font size
+  marginEnd: 'text-to-visual',
+  '--iconPrimary': {
+    type: 'fill',
+    value: 'currentColor'
+  }
+});
+
+let image = style({
+  gridArea: 'icon',
+  gridRowEnd: 'span 2',
+  marginEnd: 'text-to-visual',
+  alignSelf: 'center',
+  borderRadius: 'sm',
+  width: 32,
+  aspectRatio: 'square',
+  objectFit: 'cover'
+});
+
+let actionButtonGroup = style({
+  gridArea: 'actions',
+  gridRowEnd: 'span 2',
+  alignSelf: 'center',
+  justifySelf: 'end',
+  marginStart: 'text-to-visual'
+});
+
+let listActionMenu = style({
+  gridArea: 'actionmenu',
+  gridRowEnd: 'span 2',
+  alignSelf: 'center'
+});
+
+const listCheckbox = style({
+  gridArea: 'checkmark',
+  gridRowEnd: 'span 2',
+  alignSelf: 'center',
+  marginEnd: 8,
+  visibility: {
+    default: 'visible',
+    isDisabled: 'hidden'
+  }
+});
+
+const listTrailingIcon = style({
+  gridArea: 'trailing-icon',
+  gridRowEnd: 'span 2',
+  alignSelf: 'center',
+  display: 'flex',
+  alignItems: 'center',
+  marginStart: 'text-to-visual'
+});
+
+const centeredWrapper = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: 'full',
+  height: 'full'
+});
+
+const loadingSpinnerWrapper = style({
+  padding: space(4)
+});
+
+const emptyStateWrapper = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: 'full',
+  height: 'full',
+  boxSizing: 'border-box',
+  padding: 16
+});
+
+function ListSelectionCheckbox({isDisabled}: {isDisabled: boolean}) {
+  let selectionContext = useSlottedContext(CheckboxContext, 'selection');
+  let isSelectionDisabled = isDisabled || !!selectionContext?.isDisabled;
+  return (
+    <div className={listCheckbox({isDisabled: isSelectionDisabled})}>
+      <Checkbox slot="selection" />
+    </div>
+  );
+}
+
+function isNextSelected(id: Key | undefined, state: ListState<unknown>) {
+  if (id == null || !state) {
+    return false;
+  }
+  let keyAfter = state.collection.getKeyAfter(id);
+  return keyAfter != null && state.selectionManager.isSelected(keyAfter);
+}
+function isPrevSelected(id: Key | undefined, state: ListState<unknown>) {
+  if (id == null || !state) {
+    return false;
+  }
+  let keyBefore = state.collection.getKeyBefore(id);
+  return keyBefore != null && state.selectionManager.isSelected(keyBefore);
+}
+
+function isFirstItem(id: Key | undefined, state: ListState<unknown>) {
+  if (id == null || !state) {
+    return false;
+  }
+  return state.collection.getFirstKey() === id;
+}
+function isLastItem(id: Key | undefined, state: ListState<unknown>) {
+  if (id == null || !state) {
+    return false;
+  }
+  return state.collection.getLastKey() === id;
+}
+
+export function ListViewItem(props: ListViewItemProps): ReactNode {
+  let ref = useRef(null);
+  let {hasChildItems, ...otherProps} = props;
+  let isLink = props.href != null;
+  let isLinkOut = isLink && props.target === '_blank';
+  let {isQuiet, selectionStyle, overflowMode, scale, hideLinkOutIcon = false} = useContext(InternalListViewContext);
+  let textValue = props.textValue || (typeof props.children === 'string' ? props.children : undefined);
+  let {direction} = useLocale();
+  let hasTrailingIcon = hasChildItems || (isLinkOut && !hideLinkOutIcon);
+
+  return (
+    <GridListItem
+      {...otherProps}
+      textValue={textValue}
+      ref={ref}
+      {...(hasTrailingIcon ? {'data-has-trailing-icon': ''} : {})}
+      className={renderProps => listitem({
+        ...renderProps,
+        isLink,
+        isQuiet,
+        scale,
+        selectionStyle,
+        isPrevNotSelected: !isPrevSelected(renderProps.id, renderProps.state),
+        isNextSelected: isNextSelected(renderProps.id, renderProps.state),
+        isNextNotSelected: !isNextSelected(renderProps.id, renderProps.state),
+        isFirstItem: isFirstItem(renderProps.id, renderProps.state),
+        isLastItem: isLastItem(renderProps.id, renderProps.state)
+      })}>
+      {(renderProps) => {
+        let {children} = props;
+        let {selectionMode, selectionBehavior, isDisabled, id, state} = renderProps;
+        return (
+          <Provider
+            values={[
+              [TextContext, {
+                slots: {
+                  [DEFAULT_SLOT]: {styles: label({...renderProps, overflowMode})},
+                  label: {styles: label({...renderProps, overflowMode})},
+                  description: {styles: description({...renderProps, overflowMode})}
+                }
+              }],
+              [IconContext, {
+                slots: {
+                  icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}
+                }
+              }],
+              [ImageContext, {styles: image}],
+              [ActionButtonGroupContext, {
+                styles: actionButtonGroup,
+                size: 'S',
+                isQuiet: true
+              }],
+              [ActionMenuContext, {
+                styles: listActionMenu,
+                isQuiet: true,
+                size: 'S',
+                isDisabled
+              }]
+            ]}>
+            <div
+              className={
+                listRowBackground({
+                  ...renderProps,
+                  selectionStyle,
+                  isQuiet,
+                  isPrevSelected: isPrevSelected(id, state),
+                  isNextSelected: isNextSelected(id, state),
+                  isPrevNotSelected: !isPrevSelected(id, state),
+                  isNextNotSelected: !isNextSelected(id, state),
+                  isFirstItem: isFirstItem(id, state),
+                  isLastItem: isLastItem(id, state)
+                })
+              } />
+            {selectionMode !== 'none' && selectionBehavior === 'toggle' && (
+              <ListSelectionCheckbox isDisabled={isDisabled} />
+            )}
+            {typeof children === 'string' ? <Text slot="label">{children}</Text> : children}
+            {isLinkOut && !hideLinkOutIcon && (
+              <div className={listTrailingIcon}>
+                <LinkOutIcon
+                  size="M"
+                  className={style({
+                    scaleX: {
+                      direction: {
+                        rtl: -1
+                      }
+                    },
+                    '--iconPrimary': {
+                      type: 'fill',
+                      value: 'currentColor'
+                    }
+                  })({direction})} />
+              </div>
+            )}
+            {hasChildItems && !isLinkOut && (
+              <div className={listTrailingIcon}>
+                <Chevron
+                  className={style({
+                    scale: {
+                      direction: {
+                        ltr: '1',
+                        rtl: '-1'
+                      }
+                    },
+                    '--iconPrimary': {
+                      type: 'fill',
+                      value: 'currentColor'
+                    }
+                  })({direction})} />
+              </div>
+            )}
+          </Provider>
+        );
+      }}
+    </GridListItem>
+  );
+}
+
diff --git a/packages/@react-spectrum/s2/src/index.ts b/packages/@react-spectrum/s2/src/index.ts
index e2e27f4655f..069647cbb85 100644
--- a/packages/@react-spectrum/s2/src/index.ts
+++ b/packages/@react-spectrum/s2/src/index.ts
@@ -57,6 +57,7 @@ export {Image, ImageContext} from './Image';
 export {ImageCoordinator} from './ImageCoordinator';
 export {InlineAlert, InlineAlertContext} from './InlineAlert';
 export {Link, LinkContext} from './Link';
+export {ListView, ListViewContext, ListViewItem} from './ListView';
 export {MenuItem, MenuTrigger, Menu, MenuSection, SubmenuTrigger, UnavailableMenuItemTrigger, MenuContext} from './Menu';
 export {Meter, MeterContext} from './Meter';
 export {NotificationBadge, NotificationBadgeContext} from './NotificationBadge';
@@ -137,6 +138,7 @@ export type {InlineAlertProps} from './InlineAlert';
 export type {ImageProps} from './Image';
 export type {ImageCoordinatorProps} from './ImageCoordinator';
 export type {LinkProps} from './Link';
+export type {ListViewProps, ListViewItemProps} from './ListView';
 export type {MenuTriggerProps, MenuProps, MenuItemProps, MenuSectionProps, SubmenuTriggerProps, UnavailableMenuItemTriggerProps} from './Menu';
 export type {MeterProps} from './Meter';
 export type {NotificationBadgeProps} from './NotificationBadge';
diff --git a/packages/@react-spectrum/s2/stories/ListView.stories.tsx b/packages/@react-spectrum/s2/stories/ListView.stories.tsx
new file mode 100644
index 00000000000..d91c0a26820
--- /dev/null
+++ b/packages/@react-spectrum/s2/stories/ListView.stories.tsx
@@ -0,0 +1,583 @@
+/*
+ * Copyright 2026 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 {action} from 'storybook/actions';
+import {ActionBar, ActionButton, ActionButtonGroup, ActionMenu, Breadcrumb, Breadcrumbs, Content, Heading, IllustratedMessage, Image, ListView, ListViewItem, MenuItem, Text} from '../';
+import {categorizeArgTypes} from './utils';
+import {chain} from '@react-aria/utils';
+import Copy from '../s2wf-icons/S2_Icon_Copy_20_N.svg';
+import Delete from '../s2wf-icons/S2_Icon_Delete_20_N.svg';
+import Edit from '../s2wf-icons/S2_Icon_Edit_20_N.svg';
+import File from '../s2wf-icons/S2_Icon_File_20_N.svg';
+import Folder from '../s2wf-icons/S2_Icon_Folder_20_N.svg';
+import FolderOpen from '../spectrum-illustrations/linear/FolderOpen';
+import {Key} from 'react-aria';
+import type {Meta, StoryObj} from '@storybook/react';
+import {ReactNode, useState} from 'react';
+import {style} from '../style' with {type: 'macro'};
+import {useAsyncList} from 'react-stately';
+
+const meta: Meta<typeof ListView> = {
+  component: ListView,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    ...categorizeArgTypes('Events', ['onSelectionChange'])
+  },
+  title: 'ListView',
+  args: {
+    styles: style({height: 320})
+  },
+  decorators: [
+    (Story) => (
+      <div style={{width: '300px', resize: 'both', height: '320px', minHeight: '320px'}}>
+        <Story />
+      </div>
+    )
+  ]
+};
+
+export default meta;
+type Story = StoryObj<typeof ListView>;
+
+export const Example: Story = {
+  args: {
+    'aria-label': 'Files',
+    children: (
+      <>
+        <ListViewItem>
+          Item 1
+        </ListViewItem>
+        <ListViewItem>
+          Item 2
+        </ListViewItem>
+        <ListViewItem>
+          Item 3
+        </ListViewItem>
+      </>
+    )
+  }
+};
+
+interface Item {
+  id: Key,
+  name: string,
+  type?: 'file' | 'folder',
+  children?: Item[]
+}
+
+const items: Item[] = [
+  {id: 'a', name: 'Adobe Photoshop', type: 'file'},
+  {id: 'b', name: 'Adobe XD', type: 'file'},
+  {id: 'c', name: 'Documents', type: 'folder', children: [
+    {id: 1, name: 'Sales Pitch'},
+    {id: 2, name: 'Demo'},
+    {id: 3, name: 'Taxes'}
+  ]},
+  {id: 'd', name: 'Adobe InDesign', type: 'file'},
+  {id: 'e', name: 'Utilities', type: 'folder', children: [
+    {id: 1, name: 'Activity Monitor'}
+  ]},
+  {id: 'f', name: 'Adobe AfterEffects', type: 'file'},
+  {id: 'g', name: 'Adobe Illustrator', type: 'file'},
+  {id: 'h', name: 'Adobe Lightroom', type: 'file'},
+  {id: 'i', name: 'Adobe Premiere Pro', type: 'file'},
+  {id: 'j', name: 'Adobe Fresco', type: 'file'},
+  {id: 'k', name: 'Adobe Dreamweaver', type: 'file'},
+  {id: 'l', name: 'Adobe Connect', type: 'file'},
+  {id: 'm', name: 'Pictures', type: 'folder', children: [
+    {id: 1, name: 'Yosemite'},
+    {id: 2, name: 'Jackson Hole'},
+    {id: 3, name: 'Crater Lake'}
+  ]},
+  {id: 'n', name: 'Adobe Acrobat', type: 'file'}
+];
+
+export const Dynamic: Story = {
+  render: (args) => (
+    <ListView {...args} items={items}>
+      {(item) => (
+        <ListViewItem>{item.name}</ListViewItem>
+      )}
+    </ListView>
+  ),
+  args: {
+    'aria-label': 'Files'
+  }
+};
+
+// taken from https://random.dog/
+const itemsWithImages: Array<{id: string, title: string, url: string}> = [
+  {id: '1', title: 'swimmer', url: 'https://random.dog/b2fe2172-cf11-43f4-9c7f-29bd19601712.jpg'},
+  {id: '2', title: 'chocolate', url: 'https://random.dog/2032518a-eec8-4102-9d48-3dca5a26eb23.png'},
+  {id: '3', title: 'good boi', url: 'https://random.dog/191091b2-7d69-47af-9f52-6605063f1a47.jpg'},
+  {id: '4', title: 'polar bear', url: 'https://random.dog/c22c077e-a009-486f-834c-a19edcc36a17.jpg'},
+  {id: '5', title: 'cold boi', url: 'https://random.dog/093a41da-e2c0-4535-a366-9ef3f2013f73.jpg'},
+  {id: '6', title: 'pilot', url: 'https://random.dog/09f8ecf4-c22b-49f4-af24-29fb5c8dbb2d.jpg'},
+  {id: '7', title: 'nerd', url: 'https://random.dog/1a0535a6-ca89-4059-9b3a-04a554c0587b.jpg'},
+  {id: '8', title: 'audiophile', url: 'https://random.dog/32367-2062-4347.jpg'}
+];
+
+export const WithImages: Story = {
+  render: (args) => (
+    <ListView {...args} items={itemsWithImages}>
+      {item => (
+        <ListViewItem textValue={item.title}>
+          <Text>{item.title}</Text>
+          {item.url ? <Image src={item.url} alt={item.title} /> : null}
+        </ListViewItem>
+      )}
+    </ListView>
+  ),
+  args: {
+    'aria-label': 'Files'
+  }
+};
+
+const itemsWithIcons: Array<{id: string, title: string, icons: ReactNode}> = [
+  {id: '0', title: 'folder of good bois', icons: <Folder />},
+  {id: '1', title: 'swimmer', icons: <File />},
+  {id: '2', title: 'chocolate', icons: <File />},
+  {id: '3', title: 'good boi', icons: <File />},
+  {id: '4', title: 'polar bear', icons: <File />},
+  {id: '5', title: 'cold boi', icons: <File />},
+  {id: '6', title: 'pilot', icons: <File />},
+  {id: '8', title: 'audiophile', icons: <File />},
+  {id: '9', title: 'file of great boi', icons: <File />},
+  {id: '10', title: 'fuzzy boi', icons: <File />},
+  {id: '11', title: 'i know what i am doing', icons: <File />},
+  {id: '12', title: 'kisses', icons: <File />},
+  {id: '13', title: 'belly rubs', icons: <File />},
+  {id: '14', title: 'long boi', icons: <File />},
+  {id: '15', title: 'floof', icons: <File />},
+  {id: '16', title: 'german sheparpadom', icons: <File />}
+];
+
+export const WithIcons: Story = {
+  render: (args) => (
+    <ListView {...args} items={itemsWithIcons}>
+      {item => (
+        <ListViewItem textValue={item.title}>
+          <Text>{item.title}</Text>
+          {item.icons ? item.icons : null}
+          <ActionButtonGroup>
+            <ActionButton aria-label="Edit"><Edit /></ActionButton>
+            <ActionButton aria-label="Delete"><Delete /></ActionButton>
+          </ActionButtonGroup>
+        </ListViewItem>
+      )}
+    </ListView>
+  ),
+  args: {
+    'aria-label': 'Files'
+  }
+};
+
+export const Selection: Story = {
+  render: (args) => (
+    <ListView {...args} items={items} onSelectionChange={action('onSelectionChange')}>
+      {(item) => (
+        <ListViewItem textValue={item.name}>
+          {item.type === 'folder' ? <Folder /> : null}
+          <Text>{item.name}</Text>
+        </ListViewItem>
+      )}
+    </ListView>
+  ),
+  args: {
+    'aria-label': 'Files',
+    selectionMode: 'multiple',
+    selectionStyle: 'checkbox'
+  }
+};
+
+export const HighlightSelection: Story = {
+  render: (args) => (
+    <ListView {...args} items={items} onSelectionChange={action('onSelectionChange')}>
+      {(item) => (
+        <ListViewItem textValue={item.name}>
+          {item.type === 'folder' ? <Folder /> : null}
+          <Text>{item.name}</Text>
+        </ListViewItem>
+      )}
+    </ListView>
+  ),
+  args: {
+    'aria-label': 'Files',
+    selectionMode: 'multiple',
+    selectionStyle: 'highlight'
+  }
+};
+
+export const DisabledItems: Story = {
+  render: (args) => (
+    <ListView {...args} items={items} disabledKeys={['a', 'c']} onSelectionChange={action('onSelectionChange')}>
+      {(item) => (
+        <ListViewItem textValue={item.name}>
+          {item.type === 'folder' ? <Folder /> : null}
+          <Text>{item.name}</Text>
+        </ListViewItem>
+      )}
+    </ListView>
+  ),
+  args: {
+    'aria-label': 'Files',
+    selectionMode: 'multiple'
+  }
+};
+
+export const Links: Story = {
+  render: (args) => (
+    <ListView {...args}>
+      <ListViewItem id="https://adobe.com/" href="https://adobe.com/" target="_blank">Adobe</ListViewItem>
+      <ListViewItem id="https://google.com/" href="https://google.com/" target="_blank">Google</ListViewItem>
+      <ListViewItem id="https://apple.com/" href="https://apple.com/" target="_blank">Apple</ListViewItem>
+      <ListViewItem id="https://nytimes.com/" href="https://nytimes.com/" target="_blank">New York Times</ListViewItem>
+    </ListView>
+  ),
+  args: {
+    'aria-label': 'Bookmarks',
+    selectionMode: 'none'
+  }
+};
+
+export const WithActionMenu: Story = {
+  render: (args) => (
+    <ListView {...args} onAction={action('onAction')} onSelectionChange={action('onSelectionChange')}>
+      <ListViewItem id="a" textValue="Utilities" hasChildItems>
+        <Folder />
+        <Text>Utilities</Text>
+        <Text slot="description">16 items</Text>
+        <ActionMenu onAction={action('actionMenuAction')}>
+          <MenuItem id="edit"><Edit /><Text>Edit</Text></MenuItem>
+          <MenuItem id="delete"><Delete /><Text>Delete</Text></MenuItem>
+        </ActionMenu>
+      </ListViewItem>
+      <ListViewItem id="b" textValue="Adobe Photoshop">
+        <Text>Adobe Photoshop</Text>
+        <Text slot="description">Application</Text>
+        <ActionMenu onAction={action('actionMenuAction')}>
+          <MenuItem id="edit"><Edit /><Text>Edit</Text></MenuItem>
+          <MenuItem id="delete"><Delete /><Text>Delete</Text></MenuItem>
+        </ActionMenu>
+      </ListViewItem>
+      <ListViewItem id="c" textValue="Adobe Illustrator">
+        <Text>Adobe Illustrator</Text>
+        <Text slot="description">Application</Text>
+        <ActionMenu onAction={action('actionMenuAction')}>
+          <MenuItem id="edit"><Edit /><Text>Edit</Text></MenuItem>
+          <MenuItem id="delete"><Delete /><Text>Delete</Text></MenuItem>
+        </ActionMenu>
+      </ListViewItem>
+    </ListView>
+  ),
+  args: {
+    'aria-label': 'Files',
+    selectionMode: 'single'
+  }
+};
+
+export const WithActionButtonGroupAndMenu: Story = {
+  render: (args) => (
+    <ListView {...args} onAction={action('onAction')} onSelectionChange={action('onSelectionChange')}>
+      <ListViewItem id="a" textValue="Utilities" hasChildItems>
+        <Folder />
+        <Text>Utilities</Text>
+        <Text slot="description">16 items</Text>
+        <ActionButtonGroup>
+          <ActionButton aria-label="Edit" onPress={action('editPress')}><Edit /></ActionButton>
+        </ActionButtonGroup>
+        <ActionMenu onAction={action('actionMenuAction')}>
+          <MenuItem id="edit"><Edit /><Text>Edit</Text></MenuItem>
+          <MenuItem id="delete"><Delete /><Text>Delete</Text></MenuItem>
+        </ActionMenu>
+      </ListViewItem>
+      <ListViewItem id="b" textValue="Adobe Photoshop">
+        <Text>Adobe Photoshop</Text>
+        <Text slot="description">Application</Text>
+        <ActionButtonGroup>
+          <ActionButton aria-label="Edit" onPress={action('editPress')}><Edit /></ActionButton>
+        </ActionButtonGroup>
+        <ActionMenu onAction={action('actionMenuAction')}>
+          <MenuItem id="edit"><Edit /><Text>Edit</Text></MenuItem>
+          <MenuItem id="delete"><Delete /><Text>Delete</Text></MenuItem>
+        </ActionMenu>
+      </ListViewItem>
+    </ListView>
+  ),
+  args: {
+    'aria-label': 'Files',
+    selectionMode: 'single'
+  },
+  name: 'With ActionButtonGroup and ActionMenu'
+};
+
+export const EmptyState: Story = {
+  render: (args) => (
+    <ListView
+      {...args}
+      renderEmptyState={() => (
+        <IllustratedMessage>
+          <FolderOpen />
+          <Heading>No results</Heading>
+          <Content>No results found.</Content>
+        </IllustratedMessage>
+      )}>
+      {[]}
+    </ListView>
+  ),
+  args: {
+    'aria-label': 'Empty list'
+  }
+};
+
+export const Loading: Story = {
+  render: (args) => (
+    <ListView {...args}>
+      {[]}
+    </ListView>
+  ),
+  args: {
+    'aria-label': 'Loading list',
+    loadingState: 'loading'
+  }
+};
+
+export const LoadingMore: Story = {
+  render: (args) => (
+    <ListView {...args}>
+      <ListViewItem id="a">Adobe Photoshop</ListViewItem>
+      <ListViewItem id="b">Adobe Illustrator</ListViewItem>
+      <ListViewItem id="c">Adobe XD</ListViewItem>
+    </ListView>
+  ),
+  args: {
+    'aria-label': 'Loading more list',
+    loadingState: 'loadingMore',
+    onLoadMore: action('onLoadMore')
+  }
+};
+
+function AsyncListExample(props) {
+  interface StarWarsChar {
+    name: string,
+    url: string
+  }
+
+  let list = useAsyncList<StarWarsChar>({
+    async load({signal, cursor}) {
+      if (cursor) {
+        cursor = cursor.replace(/^http:\/\//i, 'https://');
+      }
+      await new Promise(resolve => setTimeout(resolve, 1500));
+      let res = await fetch(cursor || 'https://swapi.py4e.com/api/people/?search=', {signal});
+      let json = await res.json();
+      return {
+        items: json.results,
+        cursor: json.next
+      };
+    }
+  });
+
+  return (
+    <ListView
+      aria-label="Star Wars characters"
+      items={list.items}
+      loadingState={list.loadingState}
+      onLoadMore={list.loadMore}
+      selectionMode="multiple"
+      {...props}>
+      {(item: StarWarsChar) => (
+        <ListViewItem id={item.name}>{item.name}</ListViewItem>
+      )}
+    </ListView>
+  );
+}
+
+export const AsyncLoading: Story = {
+  render: (args) => <AsyncListExample {...args} />
+};
+
+export const LongText: Story = {
+  render: (args) => (
+    <ListView {...args}>
+      <ListViewItem id="a">
+        This is a very very very very very very very very long title.
+      </ListViewItem>
+      <ListViewItem id="b" textValue="Short title, long description">
+        <Text>Short title</Text>
+        <Text slot="description">This is a very very very very very very very very long description.</Text>
+      </ListViewItem>
+      <ListViewItem id="c" textValue="Long title, long description">
+        <Text>This is a very very very very very very very very long title.</Text>
+        <Text slot="description">This is a very very very very very very very very long description.</Text>
+      </ListViewItem>
+    </ListView>
+  ),
+  args: {
+    'aria-label': 'Long text examples'
+  }
+};
+
+function NavigationExample(props) {
+  let [selectedKeys, setSelectedKeys] = useState(new Set<Key>());
+  let [breadcrumbs, setBreadcrumbs] = useState<Item[]>([
+    {
+      id: 'root',
+      name: 'Root',
+      type: 'folder',
+      children: items
+    }
+  ]);
+
+  let {name, children = []} = breadcrumbs[breadcrumbs.length - 1];
+
+  let onAction = (key: Key) => {
+    let item = children.find(item => item.id === key);
+    if (item?.type === 'folder') {
+      setBreadcrumbs([...breadcrumbs, item]);
+      setSelectedKeys(new Set());
+    }
+  };
+
+  let onBreadcrumbAction = (key: Key) => {
+    let index = breadcrumbs.findIndex(item => item.id === key);
+    setBreadcrumbs(breadcrumbs.slice(0, index + 1));
+    setSelectedKeys(new Set());
+  };
+
+  return (
+    <div className={style({display: 'flex', flexDirection: 'column', gap: 8, width: 'full', height: 'full'})}>
+      <Breadcrumbs onAction={onBreadcrumbAction}>
+        {breadcrumbs.map(item => <Breadcrumb key={item.id} id={item.id}>{item.name}</Breadcrumb>)}
+      </Breadcrumbs>
+      <ListView
+        aria-label={name}
+        selectionMode="multiple"
+        selectionStyle="checkbox"
+        selectedKeys={selectedKeys}
+        onSelectionChange={chain(setSelectedKeys, action('onSelectionChange'))}
+        items={children}
+        onAction={chain(onAction, action('onAction'))}
+        styles={style({height: 280, minHeight: 280})}
+        {...props}>
+        {(item: Item) => (
+          <ListViewItem textValue={item.name} hasChildItems={item.type === 'folder'}>
+            {item.type === 'folder' ? <Folder /> : null}
+            <Text>{item.name}</Text>
+          </ListViewItem>
+        )}
+      </ListView>
+    </div>
+  );
+}
+
+export const Navigation: Story = {
+  render: (args) => <NavigationExample {...args} />,
+  name: 'hasChildItems navigation'
+};
+
+function ActionBarExample(props) {
+  let [selectedKeys, setSelectedKeys] = useState(new Set<Key>());
+
+  return (
+    <ListView
+      aria-label="Files with action bar"
+      selectionMode="multiple"
+      selectionStyle="checkbox"
+      selectedKeys={selectedKeys}
+      onSelectionChange={chain(setSelectedKeys, action('onSelectionChange'))}
+      items={items}
+      renderActionBar={(keys) => {
+        let selection = keys === 'all' ? 'all' : [...keys].join(', ');
+        return (
+          <ActionBar>
+            <ActionButton aria-label="Edit" onPress={() => action('edit')(selection)}>
+              <Edit />
+            </ActionButton>
+            <ActionButton aria-label="Copy" onPress={() => action('copy')(selection)}>
+              <Copy />
+            </ActionButton>
+            <ActionButton aria-label="Delete" onPress={() => action('delete')(selection)}>
+              <Delete />
+            </ActionButton>
+          </ActionBar>
+        );
+      }}
+      styles={style({height: 320})}
+      {...props}>
+      {(item: Item) => (
+        <ListViewItem textValue={item.name}>
+          {item.type === 'folder' ? <Folder /> : <File />}
+          <Text>{item.name}</Text>
+        </ListViewItem>
+      )}
+    </ListView>
+  );
+}
+
+export const WithActionBar: Story = {
+  render: (args) => <ActionBarExample {...args} />,
+  args: {
+    'aria-label': 'Files with action bar'
+  },
+  name: 'with ActionBar'
+};
+
+function ActionBarEmphasizedExample(props) {
+  let [selectedKeys, setSelectedKeys] = useState(new Set<Key>());
+
+  return (
+    <ListView
+      aria-label="Files with emphasized action bar"
+      selectionMode="multiple"
+      selectionStyle="checkbox"
+      selectedKeys={selectedKeys}
+      onSelectionChange={chain(setSelectedKeys, action('onSelectionChange'))}
+      items={items}
+      renderActionBar={(keys) => {
+        let selection = keys === 'all' ? 'all' : [...keys].join(', ');
+        return (
+          <ActionBar isEmphasized>
+            <ActionButton aria-label="Edit" onPress={() => action('edit')(selection)}>
+              <Edit />
+            </ActionButton>
+            <ActionButton aria-label="Copy" onPress={() => action('copy')(selection)}>
+              <Copy />
+            </ActionButton>
+            <ActionButton aria-label="Delete" onPress={() => action('delete')(selection)}>
+              <Delete />
+            </ActionButton>
+          </ActionBar>
+        );
+      }}
+      styles={style({height: 320})}
+      {...props}>
+      {(item: Item) => (
+        <ListViewItem textValue={item.name}>
+          {item.type === 'folder' ? <Folder /> : <File />}
+          <Text>{item.name}</Text>
+        </ListViewItem>
+      )}
+    </ListView>
+  );
+}
+
+export const WithActionBarEmphasized: Story = {
+  render: (args) => <ActionBarEmphasizedExample {...args} />,
+  args: {
+    'aria-label': 'Files with emphasized action bar'
+  },
+  name: 'with ActionBar (emphasized)'
+};
diff --git a/packages/dev/codemods/src/s1-to-s2/UPGRADE.md b/packages/dev/codemods/src/s1-to-s2/UPGRADE.md
index b59cef21811..185ec8886a9 100644
--- a/packages/dev/codemods/src/s1-to-s2/UPGRADE.md
+++ b/packages/dev/codemods/src/s1-to-s2/UPGRADE.md
@@ -99,6 +99,10 @@ Note that `[PENDING]` indicates that future changes will occur before the final
 ## Link
 - Change `variant=“overBackground”` to `staticColor=“white”`
 
+## ListView
+- [PENDING] Comment out `density` (it has not been implemented yet)
+- [PENDING] Comment out `dragAndDropHooks` (it has not been implemented yet)
+
 ## MenuTrigger
 - [PENDING] Comment out `closeOnSelect` (it has not been implemented yet)
 
@@ -221,6 +225,8 @@ Note that `[PENDING]` indicates that future changes will occur before the final
   - Update `Item` to be a `ComboBoxItem`
 - If within `ListBox`:
   - Update `Item` to be a `ListBoxItem`
+- If within `ListView`:
+  - Update `Item` to be a `ListViewItem`
 - If within `TabList`:
   - Update `Item` to be a `Tab`
 - If within `TabPanels`:
diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/imports.test.ts.snap b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/imports.test.ts.snap
index 4b07144fd42..fa6477d4477 100644
--- a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/imports.test.ts.snap
+++ b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/imports.test.ts.snap
@@ -41,7 +41,7 @@ import * as RSP1 from "@react-spectrum/s2";
 
 exports[`should not import Item from S2 1`] = `
 "import { MenuItem, Menu } from "@react-spectrum/s2";
-import { ListView, Item } from '@adobe/react-spectrum';
+import { ListBox, Item } from '@adobe/react-spectrum';
 
 <div>
   <Menu aria-label="Alignment">
@@ -49,11 +49,11 @@ import { ListView, Item } from '@adobe/react-spectrum';
     <MenuItem>Middle</MenuItem>
     <MenuItem>Right</MenuItem>
   </Menu>
-  <ListView aria-label="Alignment">
+  <ListBox aria-label="Alignment">
     <Item>Left</Item>
     <Item>Middle</Item>
     <Item>Right</Item>
-  </ListView>
+  </ListBox>
 </div>"
 `;
 
diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/listview.test.ts.snap b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/listview.test.ts.snap
new file mode 100644
index 00000000000..e69c1c3cfad
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/listview.test.ts.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Leave a comment for density 1`] = `
+"import { ListViewItem, ListView } from "@react-spectrum/s2";
+
+// TODO(S2-upgrade): density has not been implemented yet.
+<ListView>
+  <ListViewItem id="photoshop">Adobe Photoshop</ListViewItem>
+  <ListViewItem id="illustrator">Adobe Illustrator</ListViewItem>
+</ListView>"
+`;
+
+exports[`Leave a comment for dragAndDropHooks 1`] = `
+"import { ListViewItem, ListView } from "@react-spectrum/s2";
+
+// TODO(S2-upgrade): dragAndDropHooks has not been implemented yet.
+<ListView>
+  <ListViewItem id="photoshop">Adobe Photoshop</ListViewItem>
+  <ListViewItem id="illustrator">Adobe Illustrator</ListViewItem>
+</ListView>"
+`;
diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/multi-collection.test.ts.snap b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/multi-collection.test.ts.snap
index 1e78a4964fa..5552b2c5eaf 100644
--- a/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/multi-collection.test.ts.snap
+++ b/packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/multi-collection.test.ts.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Does not affect unimplemented collections 1`] = `
-"import {Item, ActionBarContainer, ActionBar, ListView, ListBox} from '@adobe/react-spectrum';
+"import {Item, ActionBarContainer, ActionBar, ListBox} from '@adobe/react-spectrum';
 import {SearchAutocomplete} from '@react-spectrum/autocomplete';
 import {StepList} from '@react-spectrum/steplist';
 
@@ -12,11 +12,6 @@ import {StepList} from '@react-spectrum/steplist';
     <Item key="three">Three</Item>
   </SearchAutocomplete>
   <ActionBarContainer height={300} maxWidth="size-6000">
-    <ListView>
-      <Item key="photoshop">Adobe Photoshop</Item>
-      <Item key="illustrator">Adobe Illustrator</Item>
-      <Item key="xd">Adobe XD</Item>
-    </ListView>
     <ActionBar>
       <Item key="one">One</Item>
       <Item key="two">Two</Item>
diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/imports.test.ts b/packages/dev/codemods/src/s1-to-s2/__tests__/imports.test.ts
index 8c6fe0ce5c5..3e0a6406e34 100644
--- a/packages/dev/codemods/src/s1-to-s2/__tests__/imports.test.ts
+++ b/packages/dev/codemods/src/s1-to-s2/__tests__/imports.test.ts
@@ -65,7 +65,7 @@ const LazyButton = React.lazy(() => import('@react-spectrum/button'))
 `);
 
 test('should not import Item from S2', `
-import {Menu, ListView, Item} from '@adobe/react-spectrum';
+import {Menu, ListBox, Item} from '@adobe/react-spectrum';
 
 <div>
   <Menu aria-label="Alignment">
@@ -73,11 +73,11 @@ import {Menu, ListView, Item} from '@adobe/react-spectrum';
     <Item>Middle</Item>
     <Item>Right</Item>
   </Menu>
-  <ListView aria-label="Alignment">
+  <ListBox aria-label="Alignment">
     <Item>Left</Item>
     <Item>Middle</Item>
     <Item>Right</Item>
-  </ListView>
+  </ListBox>
 </div>
 `);
 
diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/listview.test.ts b/packages/dev/codemods/src/s1-to-s2/__tests__/listview.test.ts
new file mode 100644
index 00000000000..81deb98457d
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/__tests__/listview.test.ts
@@ -0,0 +1,25 @@
+// @ts-ignore
+import {defineSnapshotTest} from 'jscodeshift/dist/testUtils';
+import transform from '../src/codemods/codemod';
+
+const test = (name: string, input: string) => {
+  defineSnapshotTest(transform, {}, input, name);
+};
+
+test('Leave a comment for density', `
+import {Item, ListView} from '@adobe/react-spectrum';
+
+<ListView density="compact">
+  <Item key="photoshop">Adobe Photoshop</Item>
+  <Item key="illustrator">Adobe Illustrator</Item>
+</ListView>
+`);
+
+test('Leave a comment for dragAndDropHooks', `
+import {Item, ListView} from '@adobe/react-spectrum';
+
+<ListView dragAndDropHooks={() => ({})}>
+  <Item key="photoshop">Adobe Photoshop</Item>
+  <Item key="illustrator">Adobe Illustrator</Item>
+</ListView>
+`);
diff --git a/packages/dev/codemods/src/s1-to-s2/__tests__/multi-collection.test.ts b/packages/dev/codemods/src/s1-to-s2/__tests__/multi-collection.test.ts
index 1be45f00987..41733c468b3 100644
--- a/packages/dev/codemods/src/s1-to-s2/__tests__/multi-collection.test.ts
+++ b/packages/dev/codemods/src/s1-to-s2/__tests__/multi-collection.test.ts
@@ -40,7 +40,7 @@ import {Breadcrumbs, Item, Menu, MenuTrigger, SubmenuTrigger, Button, Section, H
 `);
 
 test('Does not affect unimplemented collections', `
-import {Item, ActionBarContainer, ActionBar, ListView, ListBox} from '@adobe/react-spectrum';
+import {Item, ActionBarContainer, ActionBar, ListBox} from '@adobe/react-spectrum';
 import {SearchAutocomplete} from '@react-spectrum/autocomplete';
 import {StepList} from '@react-spectrum/steplist';
 
@@ -51,11 +51,6 @@ import {StepList} from '@react-spectrum/steplist';
     <Item key="three">Three</Item>
   </SearchAutocomplete>
   <ActionBarContainer height={300} maxWidth="size-6000">
-    <ListView>
-      <Item key="photoshop">Adobe Photoshop</Item>
-      <Item key="illustrator">Adobe Illustrator</Item>
-      <Item key="xd">Adobe XD</Item>
-    </ListView>
     <ActionBar>
       <Item key="one">One</Item>
       <Item key="two">Two</Item>
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Item/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Item/transform.ts
index 241a9f2f3ce..7d7ec900d35 100644
--- a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Item/transform.ts
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Item/transform.ts
@@ -10,6 +10,7 @@ import * as t from '@babel/types';
  * - If within Breadcrumbs: Update Item to be a Breadcrumb.
  * - If within Picker: Update Item to be a PickerItem.
  * - If within ComboBox: Update Item to be a ComboBoxItem.
+ * - If within ListView: Update Item to be a ListViewItem.
  * - Update key to id (and keep key if rendered inside array.map).
  */
 export default function transformItem(path: NodePath<t.JSXElement>): void {
@@ -21,6 +22,7 @@ export default function transformItem(path: NodePath<t.JSXElement>): void {
   updateComponentWithinCollection(path, {parentComponentName: 'Breadcrumbs', newComponentName: 'Breadcrumb'});
   updateComponentWithinCollection(path, {parentComponentName: 'Picker', newComponentName: 'PickerItem'});
   updateComponentWithinCollection(path, {parentComponentName: 'ComboBox', newComponentName: 'ComboBoxItem'});
+  updateComponentWithinCollection(path, {parentComponentName: 'ListView', newComponentName: 'ListViewItem'});
 
   // Comment if parent collection not detected
   commentIfParentCollectionNotDetected(path);
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ListView/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ListView/transform.ts
new file mode 100644
index 00000000000..a7a22085592
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ListView/transform.ts
@@ -0,0 +1,13 @@
+import {commentOutProp} from '../../shared/transforms';
+import {NodePath} from '@babel/traverse';
+import * as t from '@babel/types';
+
+/**
+ * Transforms ListView:
+ * - Comment out density (it has not been implemented yet).
+ * - Comment out dragAndDropHooks (it has not been implemented yet).
+ */
+export default function transformListView(path: NodePath<t.JSXElement>): void {
+  commentOutProp(path, {propName: 'density'});
+  commentOutProp(path, {propName: 'dragAndDropHooks'});
+}
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/shared/transforms.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/shared/transforms.ts
index bb884dded54..ea758136c24 100644
--- a/packages/dev/codemods/src/s1-to-s2/src/codemods/shared/transforms.ts
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/shared/transforms.ts
@@ -441,9 +441,9 @@ export function updateComponentWithinCollection(
 ): void {
   const {parentComponentName, newComponentName} = options;
 
-  // Collections currently implemented
-  // TODO: Add 'ActionGroup', 'ListBox', 'ListView' once implemented
-  const collectionItemParents = new Set(['Menu', 'ActionMenu', 'TagGroup', 'Breadcrumbs', 'Picker', 'ComboBox', 'ListBox', 'TabList', 'TabPanels', 'Collection', 'ContextualHelpTrigger']);
+  // Collections currently implemented.
+  // TODO: Add 'ActionGroup', 'ListBox' once implemented
+  const collectionItemParents = new Set(['Menu', 'ActionMenu', 'TagGroup', 'Breadcrumbs', 'Picker', 'ComboBox', 'ListBox', 'ListView', 'TabList', 'TabPanels', 'Collection', 'ContextualHelpTrigger']);
 
   if (
     t.isJSXElement(path.node) &&
diff --git a/packages/dev/s2-docs/pages/s2/ActionBar.mdx b/packages/dev/s2-docs/pages/s2/ActionBar.mdx
index 700fc82a8fc..9d525fdbf71 100644
--- a/packages/dev/s2-docs/pages/s2/ActionBar.mdx
+++ b/packages/dev/s2-docs/pages/s2/ActionBar.mdx
@@ -10,6 +10,8 @@ export const description = 'Used when a user needs to perform actions on one or
 
 <PageDescription>{docs.exports.ActionBar.description}</PageDescription>
 
+<ExampleSwitcher type={null} examples={['TableView', 'ListView']}>
+
 ```tsx render docs={docs.exports.ActionBar} links={docs.links} props={['isEmphasized']} type="s2" wide
 "use client";
 import {ActionBar, ActionButton, TableView, TableHeader, TableBody, Column, Row, Cell, Text} from '@react-spectrum/s2';
@@ -69,6 +71,60 @@ function Example(props) {
 }
 ```
 
+```tsx render docs={docs.exports.ActionBar} links={docs.links} props={['isEmphasized']} type="s2" wide
+"use client";
+import {ActionBar, ActionButton, ListView, ListViewItem, Text} from '@react-spectrum/s2';
+import Edit from '@react-spectrum/s2/icons/Edit';
+import Copy from '@react-spectrum/s2/icons/Copy';
+import Delete from '@react-spectrum/s2/icons/Delete';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+let items = [
+  {id: 1, name: 'Charizard', type: 'Fire, Flying', level: '67'},
+  {id: 2, name: 'Blastoise', type: 'Water', level: '56'},
+  {id: 3, name: 'Venusaur', type: 'Grass, Poison', level: '83'},
+  {id: 4, name: 'Pikachu', type: 'Electric', level: '100'}
+];
+
+function Example(props) {
+  return (
+    <ListView
+      aria-label="List with action bar"
+      selectionMode="multiple"
+      defaultSelectedKeys={[2]}
+      styles={style({width: 'full', height: 250})}
+      items={items}
+      renderActionBar={(selectedKeys) => (
+        /*- begin focus -*/
+        <ActionBar {...props}/* PROPS */>
+          <ActionButton onPress={() => alert('Edit action')}>
+            <Edit />
+            <Text>Edit</Text>
+          </ActionButton>
+          <ActionButton onPress={() => alert('Copy action')}>
+            <Copy />
+            <Text>Copy</Text>
+          </ActionButton>
+          <ActionButton onPress={() => alert('Delete action')}>
+            <Delete />
+            <Text>Delete</Text>
+          </ActionButton>
+        </ActionBar>
+        /*- end focus -*/
+      )}>
+      {item => (
+        <ListViewItem id={item.id} textValue={item.name}>
+          <Text>{item.name}</Text>
+          <Text slot="description">{item.type} • Level {item.level}</Text>
+        </ListViewItem>
+      )}
+    </ListView>
+  );
+}
+```
+
+</ExampleSwitcher>
+
 ## API
 
 ```tsx links={{ActionBar: '#actionbar', ActionButton: 'ActionButton'}}
diff --git a/packages/dev/s2-docs/pages/s2/ListView.mdx b/packages/dev/s2-docs/pages/s2/ListView.mdx
new file mode 100644
index 00000000000..79dc2ee87b3
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/ListView.mdx
@@ -0,0 +1,396 @@
+import {Layout} from '../../src/Layout';
+export default Layout;
+
+import {ListView, ListViewItem, Text, ActionMenu, MenuItem, ActionButton, ActionButtonGroup, ActionBar, Image, IllustratedMessage, Heading, Content, Link, Breadcrumbs, Breadcrumb} from '@react-spectrum/s2';
+import docs from 'docs:@react-spectrum/s2';
+
+export const tags = ['list', 'data', 'collection', 'table', 'grid'];
+export const relatedPages = [
+  {title: 'Testing ListView', url: './ListView/testing'}
+];
+export const description = 'Displays a list of items with selection and actions.';
+
+# ListView
+
+<PageDescription>{docs.exports.ListView.description}</PageDescription>
+
+```tsx render docs={docs.exports.ListView} links={docs.links} props={['selectionMode', 'selectionStyle', 'isQuiet']} initialProps={{'aria-label': 'Files', selectionMode: 'multiple'}} type="s2" wide
+import {ListView, ListViewItem, Text} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+<ListView
+  aria-label="Files"
+  /* PROPS */
+  styles={style({width: 'full', maxWidth: 400, height: 320})}>
+  <ListViewItem id="adobe-photoshop" textValue="Adobe Photoshop">
+    <Text>Adobe Photoshop</Text>
+    <Text slot="description">Image editing software</Text>
+  </ListViewItem>
+  <ListViewItem id="adobe-xd" textValue="Adobe XD">
+    <Text>Adobe XD</Text>
+    <Text slot="description">UI/UX design tool</Text>
+  </ListViewItem>
+  <ListViewItem id="adobe-indesign" textValue="Adobe InDesign">
+    <Text>Adobe InDesign</Text>
+    <Text slot="description">Desktop publishing</Text>
+  </ListViewItem>
+</ListView>
+```
+
+## Content
+
+`ListView` follows the [Collection Components API](collections.html?component=ListView), accepting both static and dynamic collections. This example shows a dynamic collection, passing a list of objects to the items prop, and a function to render the children.
+
+```tsx render type="s2"
+"use client";
+import {ListView, ListViewItem} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+///- begin collapse -///
+let files = [
+  {id: 'adobe-photoshop', name: 'Adobe Photoshop'},
+  {id: 'adobe-xd', name: 'Adobe XD'},
+  {id: 'adobe-indesign', name: 'Adobe InDesign'}
+];
+///- end collapse -///
+
+<ListView aria-label="Dynamic files" items={files} styles={style({width: 'full', maxWidth: 400, height: 320})}>
+  {item => (
+    <ListViewItem id={item.id}>{item.name}</ListViewItem>
+  )}
+</ListView>
+```
+
+### Slots
+
+`ListViewItem` supports icons, `Text`, [Image](Image), [ActionMenu](ActionMenu), and [ActionButtonGroup](ActionButtonGroup) as children, and must have a `textValue` prop for accessibility.
+
+```tsx render type="s2"
+"use client";
+import {ActionButton, ActionButtonGroup, ActionMenu, Image, ListView, ListViewItem, MenuItem, Text} from '@react-spectrum/s2';
+import Edit from '@react-spectrum/s2/icons/Edit';
+import Copy from '@react-spectrum/s2/icons/Copy';
+import Delete from '@react-spectrum/s2/icons/Delete';
+import File from '@react-spectrum/s2/icons/File';
+import Share from '@react-spectrum/s2/icons/Share';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+///- begin collapse -///
+let documents = [
+  {id: 'project-brief', name: 'Project brief.pdf'},
+  {id: 'quarterly-report', name: 'Quarterly report.docx'},
+  {id: 'budget', name: 'Budget.xlsx'}
+];
+let images = [
+  {id: 'dessert-sunset', name: 'Dessert sunset.jpg', image_url: 'https://images.unsplash.com/photo-1705034598432-1694e203cdf3?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'},
+  {id: 'hiking-trail', name: 'Hiking trail.png', image_url: 'https://images.unsplash.com/photo-1722233987129-61dc344db8b6?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'},
+  {id: 'mountain-with-lake', name: 'Mountain with lake.png', image_url: 'https://images.unsplash.com/photo-1722172118908-1a97c312ce8c?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'}
+];
+///- end collapse -///
+
+<div className={style({display: 'flex', gap: 24, width: 'full', flexWrap: 'wrap', justifyContent: 'center'})}>
+  <ListView aria-label="Documents" items={documents} styles={style({flexGrow: 1, flexShrink: 1, flexBasis: 0, minWidth: 280, maxWidth: 400, height: 320})}>
+    {item => (
+      <ListViewItem id={item.id} textValue={item.name}>
+        {/*- begin highlight -*/}
+        <File />
+        <Text>{item.name}</Text>
+        <Text slot="description">Document</Text>
+        <ActionButtonGroup aria-label="File actions">
+          <ActionButton aria-label="Edit">
+            <Edit />
+          </ActionButton>
+          <ActionButton aria-label="Delete">
+            <Delete />
+          </ActionButton>
+        </ActionButtonGroup>
+        {/*- end highlight -*/}
+      </ListViewItem>
+    )}
+  </ListView>
+  <ListView aria-label="Images" items={images} styles={style({flexGrow: 1, flexShrink: 1, flexBasis: 0, minWidth: 280, maxWidth: 400, height: 320})}>
+    {item => (
+      <ListViewItem id={item.id} textValue={item.name}>
+        {/*- begin highlight -*/}
+        <Image src={item.image_url} alt={item.name} />
+        <Text>{item.name}</Text>
+        <Text slot="description">Image</Text>
+        <ActionMenu>
+          <MenuItem>
+            <Copy />
+            <Text>Copy</Text>
+          </MenuItem>
+          <MenuItem>
+            <Share />
+            <Text>Share</Text>
+          </MenuItem>
+          <MenuItem>
+            <Delete />
+            <Text>Delete</Text>
+          </MenuItem>
+        </ActionMenu>
+        {/*- end highlight -*/}
+      </ListViewItem>
+    )}
+  </ListView>
+</div>
+```
+
+### Asynchronous loading
+
+Use the `loadingState` and `onLoadMore` props to enable async loading and infinite scrolling.
+
+```tsx render type="s2"
+"use client";
+import {ListView, ListViewItem} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+import {useAsyncList} from 'react-stately';
+
+interface Character {
+  name: string
+}
+
+function AsyncListView() {
+  let list = useAsyncList<Character>({
+    async load({signal, cursor}) {
+      if (cursor) {
+        cursor = cursor.replace(/^http:\/\//i, 'https://');
+      }
+
+      let res = await fetch(cursor || 'https://swapi.py4e.com/api/people/?search=', {signal});
+      let json = await res.json();
+      return {
+        items: json.results,
+        cursor: json.next
+      };
+    }
+  });
+
+  return (
+    <ListView
+      aria-label="Star Wars characters"
+      ///- begin highlight -///
+      loadingState={list.loadingState}
+      onLoadMore={list.loadMore}
+      ///- end highlight -///
+      items={list.items}
+      styles={style({width: 'full', maxWidth: 400, height: 320})}>
+      {item => (
+        <ListViewItem id={item.name}>{item.name}</ListViewItem>
+      )}
+    </ListView>
+  );
+}
+```
+
+### Links
+
+Use the `href` prop on a `ListViewItem` to create a link. See the [getting started guide](getting-started) to learn how to integrate with your framework. Link interactions vary depending on the selection behavior. See the [selection guide](selection) for more details.
+
+```tsx render docs={docs.exports.ListView} links={docs.links} props={['selectionMode', 'isQuiet', 'hideLinkOutIcon']} initialProps={{'aria-label': 'Bookmarks', selectionMode: 'none'}} type="s2"
+import {ListView, ListViewItem} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+<ListView aria-label="Bookmarks" styles={style({width: 'full', maxWidth: 400, height: 320})}>
+  <ListViewItem id="adobe" href="https://adobe.com" target="_blank">
+    adobe.com
+  </ListViewItem>
+  <ListViewItem id="spectrum" href="https://spectrum.adobe.com" target="_blank">
+    spectrum.adobe.com
+  </ListViewItem>
+  <ListViewItem id="react-spectrum" href="https://react-spectrum.adobe.com" target="_blank">
+    react-spectrum.adobe.com
+  </ListViewItem>
+</ListView>
+```
+
+### Empty state
+
+Use `renderEmptyState` to render placeholder content when there are no items.
+
+```tsx render type="s2"
+"use client";
+import {ListView, IllustratedMessage, Heading, Content, Link} from '@react-spectrum/s2';
+import FolderOpen from '@react-spectrum/s2/illustrations/linear/FolderOpen';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+<ListView
+  aria-label="Search results"
+  styles={style({width: 'full', maxWidth: 400})}
+  /*- begin highlight -*/
+  renderEmptyState={() => (
+    <IllustratedMessage>
+      <FolderOpen />
+      <Heading>No results</Heading>
+      <Content>Press <Link href="https://adobe.com">here</Link> for more info.</Content>
+    </IllustratedMessage>
+  )}>
+  {/*- end highlight -*/}
+  {[]}
+</ListView>
+```
+
+## Selection and actions
+
+Use the `selectionMode` prop to enable single or multiple selection. The selected items can be controlled via the `selectedKeys` prop, matching the `id` prop of the items. The `onAction` event handles item actions. Items can be disabled with the `isDisabled` prop. See the [selection guide](selection?component=ListView) for more details.
+
+```tsx render docs={docs.exports.ListView} links={docs.links} props={['selectionMode', 'selectionStyle', 'isQuiet', 'disabledBehavior', 'disallowEmptySelection']} initialProps={{'aria-label': 'Files', selectionMode: 'multiple'}} type="s2"
+"use client";
+import {ListView, ListViewItem, ActionBar, ActionButton, type Selection} from '@react-spectrum/s2';
+import Edit from '@react-spectrum/s2/icons/Edit';
+import Copy from '@react-spectrum/s2/icons/Copy';
+import Delete from '@react-spectrum/s2/icons/Delete';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+import {useState} from 'react';
+
+function Example(props) {
+  let [selected, setSelected] = useState<Selection>(new Set());
+
+  return (
+    <div className={style({width: 'full'})}>
+      <ListView
+        {...props}
+        aria-label="Files"
+        styles={style({width: 'full', maxWidth: 400, height: 320})}
+        ///- begin highlight -///
+        /* PROPS */
+        selectedKeys={selected}
+        onSelectionChange={setSelected}
+        onAction={key => alert(`Action on ${key}`)}
+        renderActionBar={(selectedKeys) => {
+        ///- end highlight -///
+          let selection = selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ');
+          return (
+            <ActionBar>
+              <ActionButton aria-label="Edit" onPress={() => alert(`Edit ${selection}`)}>
+                <Edit />
+              </ActionButton>
+              <ActionButton aria-label="Copy" onPress={() => alert(`Copy ${selection}`)}>
+                <Copy />
+              </ActionButton>
+              <ActionButton aria-label="Delete" onPress={() => alert(`Delete ${selection}`)}>
+                <Delete />
+              </ActionButton>
+            </ActionBar>
+          );
+        }}>
+        <ListViewItem id="a">Brand guidelines.pdf</ListViewItem>
+        <ListViewItem id="b">Icon set.svg</ListViewItem>
+        <ListViewItem id="c">Homepage comp.fig</ListViewItem>
+        <ListViewItem id="d" isDisabled>Archived.zip</ListViewItem>
+      </ListView>
+      <p>Current selection: {selected === 'all' ? 'all' : [...selected].join(', ')}</p>
+    </div>
+  );
+}
+```
+
+### Navigation
+
+Use the `hasChildItems` prop on `ListViewItem` to display a chevron indicator, signaling that an item can be navigated into. Combine with `onAction` and [Breadcrumbs](Breadcrumbs) to build a drill-down navigation pattern.
+
+```tsx render type="s2"
+"use client";
+import {Breadcrumbs, Breadcrumb, ListView, ListViewItem, Text} from '@react-spectrum/s2';
+import App from '@react-spectrum/s2/icons/App';
+import Folder from '@react-spectrum/s2/icons/Folder';
+import File from '@react-spectrum/s2/icons/File';
+import Image from '@react-spectrum/s2/icons/Image';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+import {Key} from 'react-aria';
+import {useState} from 'react';
+
+///- begin collapse -///
+type FileItem = {id: string, name: string, icon: React.ReactNode};
+type FolderItem = {id: string, name: string, icon: React.ReactNode, children: ListItem[]};
+type ListItem = FileItem | FolderItem;
+type BreadcrumbItem = {id: string, name: string, icon: React.ReactNode, children: ListItem[]};
+
+let rootItems: ListItem[] = [
+  {id: 'photoshop', name: 'Adobe Photoshop', icon: <App />},
+  {id: 'xd', name: 'Adobe XD', icon: <App />},
+  {id: 'documents', name: 'Documents', icon: <Folder />, children: [
+    {id: 'sales-pitch', name: 'Sales Pitch', icon: <File />},
+    {id: 'demo', name: 'Demo', icon: <File />},
+    {id: 'taxes', name: 'Taxes', icon: <File />}
+  ]},
+  {id: 'indesign', name: 'Adobe InDesign', icon: <App />},
+  {id: 'utilities', name: 'Utilities', icon: <Folder />, children: [
+    {id: 'activity-monitor', name: 'Activity Monitor', icon: <App />}
+  ]},
+  {id: 'aftereffects', name: 'Adobe AfterEffects', icon: <App />},
+  {id: 'illustrator', name: 'Adobe Illustrator', icon: <App />},
+  {id: 'pictures', name: 'Pictures', icon: <Folder />, children: [
+    {id: 'yosemite', name: 'Yosemite', icon: <Image />},
+    {id: 'jackson-hole', name: 'Jackson Hole', icon: <Image />},
+    {id: 'crater-lake', name: 'Crater Lake', icon: <Image />}
+  ]}
+];
+///- end collapse -///
+
+function NavigationExample() {
+  let [breadcrumbs, setBreadcrumbs] = useState<BreadcrumbItem[]>([
+    {id: 'root', name: 'Root', icon: <Folder />, children: rootItems}
+  ]);
+
+  let currentItems = breadcrumbs[breadcrumbs.length - 1].children;
+
+  let onAction = (key: Key) => {
+    let item = currentItems.find(item => item.id === key);
+    if (item && 'children' in item) {
+      setBreadcrumbs(prev => [...prev, item]);
+    }
+  };
+
+  let onBreadcrumbAction = (key: Key) => {
+    let index = breadcrumbs.findIndex(item => item.id === key);
+    setBreadcrumbs(breadcrumbs.slice(0, index + 1));
+  };
+
+  return (
+    <div className={style({display: 'flex', flexDirection: 'column', gap: 8, width: 'full', maxWidth: 400})}>
+      {/*- begin highlight -*/}
+      <Breadcrumbs onAction={onBreadcrumbAction}>
+        {breadcrumbs.map(item => (
+          <Breadcrumb key={item.id} id={item.id}>{item.name}</Breadcrumb>
+        ))}
+      </Breadcrumbs>
+      <ListView
+        aria-label={breadcrumbs[breadcrumbs.length - 1].name}
+        items={currentItems}
+        onAction={onAction}
+        styles={style({width: 'full', height: 320})}>
+        {item => (
+          <ListViewItem id={item.id} textValue={item.name} hasChildItems={item && 'children' in item}>
+            {item.icon}
+            <Text>{item.name}</Text>
+          </ListViewItem>
+        )}
+      </ListView>
+      {/*- end highlight -*/}
+    </div>
+  );
+}
+```
+
+## API
+
+```tsx links={{ListView: '#listview', ListViewItem: '#listviewitem', ActionMenu: 'ActionMenu', ActionButtonGroup: 'ActionButtonGroup', Icon: 'icons', Text: 'https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span', Image: 'https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img'}}
+<ListView>
+  <ListViewItem>
+    <Icon />
+    <Image />
+    <Text />
+    <Text slot="description" />
+    <ActionMenu /> or <ActionButtonGroup />
+  </ListViewItem>
+</ListView>
+```
+
+### ListView
+
+<PropTable component={docs.exports.ListView} links={docs.links} />
+
+### ListViewItem
+
+<PropTable component={docs.exports.ListViewItem} links={docs.links} showDescription />
diff --git a/packages/dev/s2-docs/pages/s2/ListView/testing.mdx b/packages/dev/s2-docs/pages/s2/ListView/testing.mdx
new file mode 100644
index 00000000000..74486c588d0
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/ListView/testing.mdx
@@ -0,0 +1,81 @@
+import {Layout} from '../../../src/Layout';
+export default Layout;
+
+import {InlineAlert, Heading, Content} from '@react-spectrum/s2';
+import testUtilDocs from 'docs:@react-spectrum/test-utils';
+import {InstallCommand} from '../../../src/InstallCommand';
+import {PatternTestingFAQ} from '../../../src/PatternTestingFAQ';
+
+export const isSubpage = true;
+export const hideFromSearch = true;
+export const tags = ['testing', 'listview', 'test-utils'];
+export const description = 'Testing ListView with React Spectrum test utils';
+
+# Testing ListView
+
+## General setup
+
+ListView supports long press interactions on its rows in certain configurations. See the following sections on how to handle these behaviors in your tests.
+
+* [Timers](../testing#timers)
+* [Long press](../testing#simulating-long-press)
+
+## Test utils
+
+`@react-spectrum/test-utils` offers common list interaction testing utilities. Install it with your preferred package manager.
+
+<InstallCommand pkg="@react-spectrum/test-utils" flags="--dev" />
+
+<InlineAlert variant="notice">
+  <Heading>Requirements</Heading>
+  <Content>Please note that this library uses [@testing-library/react@16](https://www.npmjs.com/package/@testing-library/react) and [@testing-library/user-event@14](https://www.npmjs.com/package/@testing-library/user-event). This means that you need to be on React 18+ in order for these utilities to work.</Content>
+</InlineAlert>
+
+Initialize a `User` object at the top of your test file, and use it to create a `GridList` pattern tester in your test cases. The tester has methods that you can call within your test to query for specific subcomponents or simulate common interactions.
+
+```ts
+// ListView.test.ts
+import {render, within} from '@testing-library/react';
+import {User} from '@react-spectrum/test-utils';
+
+let testUtilUser = new User({
+  interactionType: 'mouse'
+});
+// ...
+
+it('ListView can toggle row selection', async function () {
+  // Render your test component/app and initialize the list tester
+  let {getByTestId} = render(
+    <ListView data-testid="test-listview" selectionMode="multiple">
+      ...
+    </ListView>
+  );
+  let gridListTester = testUtilUser.createTester('GridList', {root: getByTestId('test-listview'), interactionType: 'keyboard'});
+
+  let row = gridListTester.rows[0];
+  expect(within(row).getByRole('checkbox')).not.toBeChecked();
+  expect(gridListTester.selectedRows).toHaveLength(0);
+
+  await gridListTester.toggleRowSelection({row: 0});
+  expect(within(row).getByRole('checkbox')).toBeChecked();
+  expect(gridListTester.selectedRows).toHaveLength(1);
+
+  await gridListTester.toggleRowSelection({row: 0});
+  expect(within(row).getByRole('checkbox')).not.toBeChecked();
+  expect(gridListTester.selectedRows).toHaveLength(0);
+});
+```
+
+## API
+
+### User
+
+<ClassAPI links={testUtilDocs.links} class={testUtilDocs.exports.User} />
+
+### GridListTester
+
+<ClassAPI links={testUtilDocs.links} class={testUtilDocs.exports.GridListTester} />
+
+## Testing FAQ
+
+<PatternTestingFAQ patternName="list view" />
diff --git a/packages/dev/s2-docs/pages/s2/migrating.mdx b/packages/dev/s2-docs/pages/s2/migrating.mdx
index 67b0f655655..fceb6c4b197 100644
--- a/packages/dev/s2-docs/pages/s2/migrating.mdx
+++ b/packages/dev/s2-docs/pages/s2/migrating.mdx
@@ -246,6 +246,7 @@ No updates needed.
 - If within `Breadcrumbs`: Update `Item` to be a `Breadcrumb`
 - If within `Picker`: Update `Item` to be a `PickerItem`
 - If within `ComboBox`: Update `Item` to be a `ComboBoxItem`
+- If within `ListView`: Update `Item` to be a `ListViewItem`
 - If within `TabList`: Update `Item` to be a `Tab`
 - If within `TabPanels`: Update `Item` to be a `TabPanel` and remove surrounding `TabPanels`
 - Update `key` to be `id` (and keep `key` if rendered inside `array.map`)
@@ -255,6 +256,11 @@ No updates needed.
 - Change `variant="overBackground"` to `staticColor="white"`
 - If `a` was used inside `Link` (legacy API), remove the `a` and apply props (i.e `href`) directly to `Link`
 
+### ListView
+
+- <PendingBadge /> Comment out `density` (it has not been implemented yet)
+- <PendingBadge /> Comment out `dragAndDropHooks` (it has not been implemented yet)
+
 ### Menu
 
 - Update `Item` to be a `MenuItem`
diff --git a/packages/dev/s2-docs/pages/s2/testing.mdx b/packages/dev/s2-docs/pages/s2/testing.mdx
index 5d7c06e9f31..5ceaaf81d32 100644
--- a/packages/dev/s2-docs/pages/s2/testing.mdx
+++ b/packages/dev/s2-docs/pages/s2/testing.mdx
@@ -211,6 +211,7 @@ Below is a list of the ARIA patterns testers currently supported by createTester
 - [CheckboxGroup](./CheckboxGroup/testing)
 - [ComboBox](./ComboBox/testing)
 - [Dialog](./Dialog/testing)
+- [ListView](./ListView/testing)
 - [Menu](./Menu/testing)
 - [Picker](./Picker/testing)
 - [RadioGroup](./RadioGroup/testing)
diff --git a/packages/react-aria-components/src/GridList.tsx b/packages/react-aria-components/src/GridList.tsx
index afeeeef82b9..b98faeaa957 100644
--- a/packages/react-aria-components/src/GridList.tsx
+++ b/packages/react-aria-components/src/GridList.tsx
@@ -289,7 +289,14 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
   );
 }
 
-export interface GridListItemRenderProps extends ItemRenderProps {}
+export interface GridListItemRenderProps extends ItemRenderProps {
+  /** The unique id of the item. */
+  id?: Key,
+  /**
+   * State of the grid list.
+   */
+  state: ListState<unknown>
+}
 
 export interface GridListItemProps<T = object> extends RenderProps<GridListItemRenderProps>, LinkDOMProps, HoverEvents, PressEvents, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {
   /**
@@ -373,7 +380,9 @@ export const GridListItem = /*#__PURE__*/ createLeafComponent(ItemNode, function
       selectionBehavior: state.selectionManager.selectionBehavior,
       allowsDragging: !!dragState,
       isDragging,
-      isDropTarget: dropIndicator?.isDropTarget
+      isDropTarget: dropIndicator?.isDropTarget,
+      id: item.key,
+      state
     }
   });