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..31791101f43
--- /dev/null
+++ b/packages/@react-spectrum/s2/chromatic/ListView.stories.tsx
@@ -0,0 +1,192 @@
+/*
+ * 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, ListView, ListViewItem, MenuItem, Text} from '../src';
+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 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 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 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/src/ListView.tsx b/packages/@react-spectrum/s2/src/ListView.tsx
new file mode 100644
index 00000000000..1fd7c12eba8
--- /dev/null
+++ b/packages/@react-spectrum/s2/src/ListView.tsx
@@ -0,0 +1,645 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {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 Chevron from '../ui-icons/Chevron';
+import {
+  Collection,
+  CollectionRendererContext,
+  ContextValue,
+  DEFAULT_SLOT,
+  DefaultCollectionRenderer,
+  GridList,
+  GridListItem,
+  GridListItemProps,
+  GridListItemRenderProps,
+  GridListLoadMoreItem,
+  GridListLoadMoreItemProps,
+  GridListProps,
+  GridListRenderProps,
+  ListLayout,
+  Provider,
+  SlotProps,
+  Virtualizer
+} from 'react-aria-components';
+import {controlFont, getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
+import {createContext, forwardRef, JSXElementConstructor, 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 {pressScale} from './pressScale';
+import {ProgressCircle} from './ProgressCircle';
+import {Text, TextContext} from './Content';
+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' | 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)
+}
+
+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',
+  highlightMode?: 'normal' | 'inverse'
+}
+
+export interface ListViewItemProps extends Omit<GridListItemProps, 'children' | 'style' | 'className'>, StyleProps {
+  /**
+   * The contents of the item.
+   */
+  children: ReactNode,
+  /** Whether the item has child items (renders a chevron indicator). */
+  hasChildItems?: boolean
+}
+
+export interface ListViewLoadMoreItemProps extends Pick<GridListLoadMoreItemProps, 'onLoadMore'> {
+  /** The current loading state of the ListView. */
+  loadingState?: LoadingState
+}
+
+interface ListViewRendererContextValue {
+  renderer?: (item) => ReactElement<any, string | JSXElementConstructor<any>>
+}
+const ListViewRendererContext = createContext<ListViewRendererContextValue>({});
+
+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'}>({});
+
+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'
+}, getAllowedOverrides({height: true}));
+
+/**
+ * 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, ...otherProps} = props;
+  let scale = useScale();
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
+  let rowHeight = scale === 'large' ? 50 : 40;
+
+  let renderer;
+  if (typeof children === 'function') {
+    renderer = children;
+  }
+
+  let domRef = useDOMRef(ref);
+
+  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}>
+        <ProgressCircle
+          isIndeterminate
+          aria-label={stringFormatter.format('table.loading')} />
+      </div>
+    );
+  }
+
+  let loadMoreSpinner = onLoadMore ? (
+    <GridListLoadMoreItem isLoading={loadingState === 'loadingMore'} onLoadMore={onLoadMore} className={style({height: 'full', width: 'full', paddingY: 8})}>
+      <div className={centeredWrapper}>
+        <ProgressCircle
+          isIndeterminate
+          aria-label={stringFormatter.format('table.loadingMore')} />
+      </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}
+      </>
+    );
+  }
+
+  return (
+    <Virtualizer
+      layout={ListLayout}
+      layoutOptions={{
+        estimatedRowHeight: rowHeight,
+        loaderHeight: 60
+      }}>
+      <ListViewRendererContext.Provider value={{renderer}}>
+        <InternalListViewContext.Provider value={{isQuiet, selectionStyle, overflowMode, scale}}>
+          <GridList
+            ref={domRef}
+            {...gridListProps}
+            selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}
+            renderEmptyState={renderEmptyState}
+            style={props.UNSAFE_style}
+            className={(renderProps) => (props.UNSAFE_className || '') + listView({
+              ...renderProps,
+              isQuiet
+            }, props.styles)}>
+            {wrappedChildren}
+          </GridList>
+        </InternalListViewContext.Provider>
+      </ListViewRendererContext.Provider>
+    </Virtualizer>
+  );
+});
+
+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 chevron .',
+    '. .         .    description actions actionmenu chevron .'
+  ],
+  gridTemplateColumns: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', 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: 'borderTopColor',
+    value: {
+      default: 'gray-300',
+      isSelected: {
+        selectionStyle: {
+          highlight: 'blue-900',
+          checkbox: 'gray-300'
+        }
+      },
+      forcedColors: 'ButtonBorder'
+    }
+  },
+  borderTopWidth: 0,
+  borderBottomWidth: {
+    default: 1,
+    isSelected: {
+      selectionStyle: {
+        highlight: 0,
+        checkbox: 1
+      }
+    }
+  },
+  borderStartWidth: 0,
+  borderEndWidth: 0,
+  borderStyle: 'solid',
+  borderBottomColor: {
+    default: '--borderColor',
+    isSelected: {
+      selectionStyle: {
+        highlight: {
+          default: '--borderColor',
+          isNextSelected: 'transparent'
+        },
+        checkbox: '--borderColor'
+      }
+    }
+  },
+  borderTopStartRadius: {
+    isFirstItem: 'default'
+  },
+  borderTopEndRadius: {
+    isFirstItem: 'default'
+  },
+  borderBottomStartRadius: {
+    isLastItem: 'default'
+  },
+  borderBottomEndRadius: {
+    isLastItem: 'default'
+  }
+}, getAllowedOverrides());
+
+const selectedBackground = colorMix('gray-25', 'gray-900', 7);
+const selectedActiveBackground = colorMix('gray-25', 'gray-900', 10);
+
+const listRowBackground = style<GridListItemRenderProps & {
+  isFirstItem?: boolean,
+  isLastItem?: boolean,
+  isPrevSelected?: boolean,
+  isNextSelected?: boolean,
+  isPrevNotSelected?: boolean,
+  isNextNotSelected?: boolean,
+  selectionStyle?: 'highlight' | 'checkbox'
+}>({
+  position: 'absolute',
+  zIndex: -1,
+  inset: 0,
+  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: 'default'
+  },
+  borderBottomEndRadius: {
+    isLastItem: 'default'
+  },
+  borderTopWidth: {
+    default: 1,
+    isPrevSelected: {
+      selectionStyle: {
+        highlight: 0
+      }
+    }
+  },
+  borderBottomWidth: {
+    default: 1,
+    isNextSelected: {
+      selectionStyle: {
+        highlight: 0
+      }
+    }
+  },
+  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: 'text-to-visual',
+  visibility: {
+    default: 'visible',
+    isDisabled: 'hidden'
+  }
+});
+
+const listChevron = style({
+  gridArea: 'chevron',
+  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 emptyStateWrapper = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: 'full',
+  height: 'full',
+  boxSizing: 'border-box',
+  padding: 16
+});
+
+export function ListViewItem(props: ListViewItemProps): ReactNode {
+  let ref = useRef(null);
+  let {hasChildItems, ...otherProps} = props;
+  let isLink = props.href != null;
+  let {isQuiet, selectionStyle, overflowMode, scale} = useContext(InternalListViewContext);
+  let textValue = props.textValue || (typeof props.children === 'string' ? props.children : undefined);
+  let {direction} = useLocale();
+
+  return (
+    <GridListItem
+      {...otherProps}
+      textValue={textValue}
+      ref={ref}
+      style={pressScale(ref, props.UNSAFE_style)}
+      className={renderProps => (props.UNSAFE_className || '') + listitem({
+        ...renderProps,
+        isLink,
+        isQuiet,
+        scale,
+        selectionStyle,
+        isPrevNotSelected: !renderProps.isPrevSelected,
+        isNextNotSelected: !renderProps.isNextSelected
+      }, props.styles)}>
+      {(renderProps) => {
+        let {children} = props;
+        let {selectionMode, selectionBehavior, isDisabled} = 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, isPrevNotSelected: !renderProps.isPrevSelected, isNextNotSelected: !renderProps.isNextSelected})} />
+            {selectionMode !== 'none' && selectionBehavior === 'toggle' && (
+              <div className={listCheckbox({isDisabled})}>
+                <Checkbox slot="selection" />
+              </div>
+            )}
+            {typeof children === 'string' ? <Text slot="label">{children}</Text> : children}
+            {hasChildItems && (
+              <div className={listChevron}>
+                <Chevron
+                  className={style({
+                    scale: {
+                      direction: {
+                        ltr: '1',
+                        rtl: '-1'
+                      }
+                    },
+                    '--iconPrimary': {
+                      type: 'fill',
+                      value: 'currentColor'
+                    }
+                  })({direction})} />
+              </div>
+            )}
+          </Provider>
+        );
+      }}
+    </GridListItem>
+  );
+}
+
+export const ListViewLoadMoreItem = (props: ListViewLoadMoreItemProps): ReactNode => {
+  let {loadingState, onLoadMore} = props;
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
+  let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
+  return (
+    <GridListLoadMoreItem isLoading={isLoading} onLoadMore={onLoadMore} className={style({height: 'full', width: 'full', paddingY: 8})}>
+      <div className={centeredWrapper}>
+        <ProgressCircle
+          isIndeterminate
+          aria-label={stringFormatter.format('table.loadingMore')} />
+      </div>
+    </GridListLoadMoreItem>
+  );
+};
diff --git a/packages/@react-spectrum/s2/src/Picker.tsx b/packages/@react-spectrum/s2/src/Picker.tsx
index dab71456292..afc38783c6f 100644
--- a/packages/@react-spectrum/s2/src/Picker.tsx
+++ b/packages/@react-spectrum/s2/src/Picker.tsx
@@ -48,7 +48,7 @@ import {
 } from './Menu';
 import CheckmarkIcon from '../ui-icons/Checkmark';
 import ChevronIcon from '../ui-icons/Chevron';
-import {control, controlBorderRadius, controlFont, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {control, controlBorderRadius, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {createHideableComponent} from '@react-aria/collections';
 import {
   Divider,
@@ -57,7 +57,6 @@ import {
   listboxItem,
   LOADER_ROW_HEIGHTS
 } from './ComboBox';
-import {edgeToText} from '../style/spectrum-theme' with {type: 'macro'};
 import {
   FieldErrorIcon,
   FieldLabel,
@@ -191,27 +190,6 @@ const quietFocusLine = style({
   }
 });
 
-export let menu = style({
-  outlineStyle: 'none',
-  display: 'grid',
-  width: 'full',
-  gridTemplateColumns: {
-    size: {
-      S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],
-      M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],
-      L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(40)],
-      XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(48)]
-    }
-  },
-  boxSizing: 'border-box',
-  maxHeight: 'inherit',
-  overflow: 'auto',
-  padding: 8,
-  fontFamily: 'sans',
-  fontSize: controlFont(),
-  gridAutoRows: 'min-content'
-});
-
 const invalidBorder = style({
   ...controlBorderRadius(),
   position: 'absolute',
diff --git a/packages/@react-spectrum/s2/src/TableView.tsx b/packages/@react-spectrum/s2/src/TableView.tsx
index 85a9d79c19c..560daae9d35 100644
--- a/packages/@react-spectrum/s2/src/TableView.tsx
+++ b/packages/@react-spectrum/s2/src/TableView.tsx
@@ -16,6 +16,7 @@ import {
   Button,
   ButtonContext,
   CellRenderProps,
+  CheckboxContext,
   Collection,
   CollectionRendererContext,
   ColumnRenderProps,
@@ -118,7 +119,9 @@ interface S2TableProps {
   /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */
   onLoadMore?: () => any,
   /** Provides the ActionBar to display when rows are selected in the TableView. */
-  renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement
+  renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement,
+  selectionStyle?: 'highlight' | 'checkbox',
+  isEmphasized?: boolean
 }
 
 // TODO: Note that loadMore and loadingState are now on the Table instead of on the TableBody
@@ -296,7 +299,9 @@ export const TableView = forwardRef(function TableView(props: TableViewProps, re
     onResizeEnd: propsOnResizeEnd,
     onAction,
     onLoadMore,
-    selectionMode = 'none',
+    selectionStyle = 'checkbox',
+    isEmphasized = false,
+    selectionMode,
     ...otherProps
   } = props;
 
@@ -322,11 +327,13 @@ export const TableView = forwardRef(function TableView(props: TableViewProps, re
     onLoadMore,
     isInResizeMode,
     setIsInResizeMode,
+    selectionStyle,
+    isEmphasized,
     selectionMode
-  }), [isQuiet, density, overflowMode, loadingState, onLoadMore, isInResizeMode, setIsInResizeMode, selectionMode]);
+  }), [isQuiet, density, overflowMode, loadingState, onLoadMore, isInResizeMode, setIsInResizeMode, selectionStyle, isEmphasized, selectionMode]);
 
   let scrollRef = useRef<HTMLElement | null>(null);
-  let isCheckboxSelection = selectionMode === 'multiple' || selectionMode === 'single';
+  let isCheckboxSelection = (selectionMode === 'multiple' || selectionMode === 'single') && selectionStyle === 'checkbox';
 
   let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({...props, scrollRef});
 
@@ -368,10 +375,10 @@ export const TableView = forwardRef(function TableView(props: TableViewProps, re
               isCheckboxSelection,
               isQuiet
             })}
-            selectionBehavior="toggle"
             selectionMode={selectionMode}
             onRowAction={onAction}
             {...otherProps}
+            selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}
             selectedKeys={selectedKeys}
             defaultSelectedKeys={undefined}
             onSelectionChange={onSelectionChange} />
@@ -897,7 +904,7 @@ export interface TableHeaderProps<T> extends Omit<RACTableHeaderProps<T>, 'style
 export const TableHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(function TableHeader<T extends object>({columns, dependencies, children}: TableHeaderProps<T>, ref: DOMRef<HTMLDivElement>) {
   let scale = useScale();
   let {selectionBehavior, selectionMode} = useTableOptions();
-  let {isQuiet} = useContext(InternalTableContext);
+  let {isQuiet, selectionStyle} = useContext(InternalTableContext);
   let domRef = useDOMRef(ref);
 
   return (
@@ -906,7 +913,7 @@ export const TableHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(function
       ref={domRef}
       className={tableHeader}>
       {/* Add extra columns for selection. */}
-      {selectionBehavior === 'toggle' && (
+      {selectionBehavior === 'toggle' && selectionStyle === 'checkbox' && (
         // Also isSticky prop is applied just for the layout, will decide what the RAC api should be later
         // @ts-ignore
         <RACColumn isSticky width={scale === 'medium' ? 40 : 52} minWidth={scale === 'medium' ? 40 : 52} className={selectAllCheckboxColumn({isQuiet})}>
@@ -1006,6 +1013,10 @@ const checkboxCellStyle = style({
 
 const cellContent = style({
   truncate: true,
+  '--iconPrimary': {
+    type: 'fill',
+    value: 'currentColor'
+  },
   whiteSpace: {
     default: 'nowrap',
     overflowMode: {
@@ -1065,15 +1076,33 @@ export const Cell = forwardRef(function Cell(props: CellProps, ref: DOMRef<HTMLD
       textValue={textValue}
       {...otherProps}>
       {({isFocusVisible}) => (
-        <>
-          <span className={cellContent({...tableVisualOptions, isSticky, align: align || 'start'})}>{children}</span>
-          {isFocusVisible && <CellFocusRing />}
-        </>
+        // @ts-ignore
+        <InnerCell isFocusVisible={isFocusVisible} children={children} isSticky={isSticky} align={align} isRowHeader={props.value?.isRowHeader ?? false} />
       )}
     </RACCell>
   );
 });
 
+let InnerCell = function InnerCell(props: {isFocusVisible: boolean, children: ReactNode, isSticky?: boolean, align?: 'start' | 'center' | 'end', isRowHeader?: boolean}) {
+  let {isFocusVisible, children, isSticky, align, isRowHeader} = props;
+  let tableVisualOptions = useContext(InternalTableContext);
+  let {isSelected} = useSlottedContext(CheckboxContext, 'selection') ?? {isSelected: false};
+
+  return (
+    <>
+      <span
+        className={cellContent({
+          ...tableVisualOptions,
+          isRowHeader,
+          isSticky,
+          align: align || 'start',
+          isSelected
+        })}>{children}</span>
+      {isFocusVisible && <CellFocusRing />}
+    </>
+  );
+};
+
 
 const editableCell = style<CellRenderProps & S2TableProps & {isDivider: boolean, selectionMode?: 'none' | 'single' | 'multiple', isSaving?: boolean}>({
   ...commonCellStyles,
@@ -1384,17 +1413,33 @@ const rowBackgroundColor = {
     default: 'gray-25',
     isQuiet: '--s2-container-bg'
   },
-  isFocusVisibleWithin: colorMix('gray-25', 'gray-900', 7), // table-row-hover-color
-  isHovered: colorMix('gray-25', 'gray-900', 7), // table-row-hover-color
-  isPressed: colorMix('gray-25', 'gray-900', 10), // table-row-hover-color
-  isSelected: {
-    default: selectedBackground, // table-selected-row-background-color, opacity /10
-    isFocusVisibleWithin: selectedActiveBackground, // table-selected-row-background-color, opacity /15
-    isHovered: selectedActiveBackground, // table-selected-row-background-color, opacity /15
-    isPressed: selectedActiveBackground // table-selected-row-background-color, opacity /15
-  },
-  forcedColors: {
-    default: 'Background'
+  selectionStyle: {
+    checkbox: {
+      isFocusVisibleWithin: colorMix('gray-25', 'gray-900', 7), // table-row-hover-color
+      isHovered: colorMix('gray-25', 'gray-900', 7), // table-row-hover-color
+      isPressed: colorMix('gray-25', 'gray-900', 10), // table-row-hover-color
+      isSelected: {
+        default: selectedBackground, // table-selected-row-background-color, opacity /10
+        isFocusVisibleWithin: selectedActiveBackground, // table-selected-row-background-color, opacity /15
+        isHovered: selectedActiveBackground, // table-selected-row-background-color, opacity /15
+        isPressed: selectedActiveBackground // table-selected-row-background-color, opacity /15
+      },
+      forcedColors: {
+        default: 'Background'
+      }
+    },
+    highlight: {
+      isFocusVisibleWithin: 'gray-100',
+      isHovered: 'gray-100',
+      isPressed: 'gray-100',
+      isSelected: {
+        default: 'blue-900/10',
+        isHovered: 'blue-900/15'
+      },
+      forcedColors: {
+        default: 'Background'
+      }
+    }
   }
 } as const;
 
@@ -1439,8 +1484,17 @@ const row = style<RowRenderProps & S2TableProps>({
   //   }
   // },
   outlineStyle: 'none',
-  borderTopWidth: 0,
-  borderBottomWidth: 1,
+  borderTopWidth: {
+    default: 0,
+    isSelected: 0
+  },
+  borderBottomWidth: {
+    default: 1,
+    isSelected: {
+      default: 0,
+      isNextSelected: 1
+    }
+  },
   borderStartWidth: 0,
   borderEndWidth: 0,
   borderStyle: 'solid',
@@ -1448,9 +1502,72 @@ const row = style<RowRenderProps & S2TableProps>({
     default: 'gray-300',
     forcedColors: 'ButtonBorder'
   },
-  forcedColorAdjust: 'none'
+  '--rowSelectionIndicatorColor': {
+    type: 'borderTopColor',
+    value: {
+      default: 'gray-300',
+      isSelected: 'blue-900',
+      forcedColors: 'ButtonBorder'
+    }
+  },
+  '--rowSelectionIndicatorBorderTopWidth': {
+    type: 'borderTopWidth',
+    value: {
+      default: 0,
+      isSelected: 1,
+      isPreviousSelected: 0
+    }
+  },
+  '--rowSelectionIndicatorBorderBottomWidth': {
+    type: 'borderBottomWidth',
+    value: {
+      default: 0,
+      isSelected: 1,
+      isNextSelected: 0
+    }
+  },
+  '--rowSelectionIndicatorBorderStartWidth': {
+    type: 'borderStartWidth',
+    value: {
+      default: 0,
+      isSelected: 1
+    }
+  },
+  '--rowSelectionIndicatorBorderEndWidth': {
+    type: 'borderEndWidth',
+    value: {
+      default: 0,
+      isSelected: 1
+    }
+  },
+  forcedColorAdjust: 'none',
+  color: {
+    selectionStyle: {
+      highlight: {
+        default: 'gray-700',
+        isHovered: 'gray-800',
+        isPressed: 'gray-900'
+      }
+    }
+  }
 });
 
+let rowSelectionIndicator = raw(`
+  &:before {
+    content: "";
+    display: inline-block;
+    position: absolute;
+    inset: 0;
+    border-color: var(--rowSelectionIndicatorColor);
+    border-top-width: var(--rowSelectionIndicatorBorderTopWidth);
+    border-bottom-width: var(--rowSelectionIndicatorBorderBottomWidth);
+    border-inline-start-width: var(--rowSelectionIndicatorBorderStartWidth);
+    border-inline-end-width: var(--rowSelectionIndicatorBorderEndWidth);
+    border-style: solid;
+    z-index: 3;
+  }`);
+let rowFocusIndicator = raw('&:after { content: ""; display: inline-block; position: sticky; inset-inline-start: 0; width: 3px; height: 100%; margin-inline-end: -3px; margin-block-end: 1px;  z-index: 3; background-color: var(--rowFocusIndicatorColor)');
+
 export interface RowProps<T> extends Pick<RACRowProps<T>, 'id' | 'columns' | 'isDisabled' | 'onAction' | 'children' | 'textValue' | 'dependencies' | keyof GlobalDOMAttributes>, LinkDOMProps {}
 
 /**
@@ -1470,9 +1587,11 @@ export const Row = /*#__PURE__*/ (forwardRef as forwardRefType)(function Row<T e
       className={renderProps => row({
         ...renderProps,
         ...tableVisualOptions
-      }) + (renderProps.isFocusVisible ? ' ' + raw('&:before { content: ""; display: inline-block; position: sticky; inset-inline-start: 0; width: 3px; height: 100%; margin-inline-end: -3px; margin-block-end: 1px;  z-index: 3; background-color: var(--rowFocusIndicatorColor)') : '')}
+      })
+      + (renderProps.isSelected ? (' ' + rowSelectionIndicator) : '')
+      + (renderProps.isFocusVisible ? (' ' + rowFocusIndicator) : '')}
       {...otherProps}>
-      {selectionMode !== 'none' && selectionBehavior === 'toggle' && (
+      {selectionMode !== 'none' && selectionBehavior === 'toggle' && tableVisualOptions.selectionStyle === 'checkbox' && (
         // Not sure what we want to do with this className, in Cell it currently overrides the className that would have been applied.
         // The `spread` otherProps must be after className in Cell.
         // @ts-ignore
diff --git a/packages/@react-spectrum/s2/src/TreeView.tsx b/packages/@react-spectrum/s2/src/TreeView.tsx
index f0a167192c0..d86e298de57 100644
--- a/packages/@react-spectrum/s2/src/TreeView.tsx
+++ b/packages/@react-spectrum/s2/src/TreeView.tsx
@@ -16,6 +16,7 @@ import {baseColor, colorMix, focusRing, fontRelative, style} from '../style' wit
 import {
   Button,
   ButtonContext,
+  ContextValue,
   ListLayout,
   Provider,
   TreeItemProps as RACTreeItemProps,
@@ -32,22 +33,28 @@ import {
 import {centerBaseline} from './CenterBaseline';
 import {Checkbox} from './Checkbox';
 import Chevron from '../ui-icons/Chevron';
-import {DOMRef, forwardRefType, GlobalDOMAttributes, Key, LoadingState} from '@react-types/shared';
+import {DOMRef, DOMRefValue, forwardRefType, GlobalDOMAttributes, Key, LoadingState} from '@react-types/shared';
 import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {IconContext} from './Icon';
+import {ImageContext} from './Image';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {ProgressCircle} from './ProgressCircle';
 import {raw} from '../style/style-macro' with {type: 'macro'};
-import React, {createContext, forwardRef, JSXElementConstructor, ReactElement, ReactNode, useRef} from 'react';
+import React, {createContext, forwardRef, JSXElementConstructor, ReactElement, ReactNode, useContext, useRef} from 'react';
 import {Text, TextContext} from './Content';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useLocale, useLocalizedStringFormatter} from 'react-aria';
 import {useScale} from './utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 interface S2TreeProps {
   /** Handler that is called when a user performs an action on a row. */
-  onAction?: (key: Key) => void
+  onAction?: (key: Key) => void,
+  /** Whether the tree should be displayed with a [emphasized style](https://spectrum.adobe.com/page/tree-view/#Emphasis). */
+  isEmphasized?: boolean,
+  selectionStyle?: 'highlight' | 'checkbox',
+  selectionCornerStyle?: 'square' | 'round'
 }
 
 export interface TreeViewProps<T> extends Omit<RACTreeProps<T>, 'style' | 'className' | 'render' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks' | keyof GlobalDOMAttributes>, UnsafeStyles, S2TreeProps {
@@ -70,6 +77,10 @@ interface TreeRendererContextValue {
 }
 const TreeRendererContext = createContext<TreeRendererContextValue>({});
 
+export const TreeViewContext = createContext<ContextValue<Partial<TreeViewProps<any>>, DOMRefValue<HTMLDivElement>>>(null);
+
+
+let InternalTreeContext = createContext<{isDetached?: boolean, isEmphasized?: boolean, selectionStyle: 'highlight' | 'checkbox', selectionCornerStyle: 'square' | 'round'}>({selectionStyle: 'checkbox', selectionCornerStyle: 'round'});
 
 // TODO: the below is needed so the borders of the top and bottom row isn't cut off if the TreeView is wrapped within a container by always reserving the 2px needed for the
 // keyboard focus ring. Perhaps find a different way of rendering the outlines since the top of the item doesn't
@@ -100,7 +111,8 @@ const tree = style({
  * A tree view provides users with a way to navigate nested hierarchical information.
  */
 export const TreeView = /*#__PURE__*/ (forwardRef as forwardRefType)(function TreeView<T extends object>(props: TreeViewProps<T>, ref: DOMRef<HTMLDivElement>) {
-  let {children, UNSAFE_className, UNSAFE_style} = props;
+  [props, ref] = useSpectrumContextProps(props, ref, TreeViewContext);
+  let {children, isDetached, isEmphasized, selectionStyle = 'checkbox', selectionCornerStyle = 'round', UNSAFE_className, UNSAFE_style} = props;
   let scale = useScale();
 
   let renderer;
@@ -117,36 +129,60 @@ export const TreeView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tr
         rowHeight: scale === 'large' ? 50 : 40
       }}>
       <TreeRendererContext.Provider value={{renderer}}>
-        <Tree
-          {...props}
-          style={UNSAFE_style}
-          className={renderProps => (UNSAFE_className ?? '') + tree({...renderProps}, props.styles)}
-          selectionBehavior="toggle"
-          ref={domRef}>
-          {props.children}
-        </Tree>
+        <InternalTreeContext.Provider value={{isDetached, isEmphasized, selectionStyle, selectionCornerStyle}}>
+          <Tree
+            {...props}
+            style={UNSAFE_style}
+            className={renderProps => (UNSAFE_className ?? '') + tree({isDetached, ...renderProps}, props.styles)}
+            selectionBehavior={selectionStyle === 'highlight' ? 'replace' : 'toggle'}
+            ref={domRef}>
+            {props.children}
+          </Tree>
+        </InternalTreeContext.Provider>
       </TreeRendererContext.Provider>
     </Virtualizer>
   );
 });
 
+const selectedBackground = colorMix('gray-25', 'gray-900', 7);
+const selectedActiveBackground = colorMix('gray-25', 'gray-900', 10);
+
 const rowBackgroundColor = {
-  default: '--s2-container-bg',
-  isFocusVisibleWithin: colorMix('gray-25', 'gray-900', 7),
-  isHovered: colorMix('gray-25', 'gray-900', 7),
-  isPressed: colorMix('gray-25', 'gray-900', 10),
-  isSelected: {
-    default: colorMix('gray-25', 'gray-900', 7),
-    isFocusVisibleWithin: colorMix('gray-25', 'gray-900', 10),
-    isHovered: colorMix('gray-25', 'gray-900', 10),
-    isPressed: colorMix('gray-25', 'gray-900', 10)
-  },
-  forcedColors: {
-    default: 'Background'
+  selectionStyle: {
+    checkbox: {
+      default: '--s2-container-bg',
+      isFocusVisibleWithin: colorMix('gray-25', 'gray-900', 7),
+      isHovered: colorMix('gray-25', 'gray-900', 7),
+      isPressed: colorMix('gray-25', 'gray-900', 10),
+      isSelected: {
+        default: colorMix('gray-25', 'gray-900', 7),
+        isEmphasized: selectedBackground,
+        isFocusVisibleWithin: {
+          default: colorMix('gray-25', 'gray-900', 10),
+          isEmphasized: selectedActiveBackground
+        },
+        isHovered: {
+          default: colorMix('gray-25', 'gray-900', 10),
+          isEmphasized: selectedActiveBackground
+        },
+        isPressed: {
+          default: colorMix('gray-25', 'gray-900', 10),
+          isEmphasized: selectedActiveBackground
+        }
+      },
+      forcedColors: {
+        default: 'Background'
+      }
+    },
+    highlight: {
+      default: 'transparent'
+    }
   }
 } as const;
 
 const treeRow = style({
+  ...focusRing(),
+  outlineOffset: -2,
   position: 'relative',
   display: 'flex',
   height: 40,
@@ -173,6 +209,33 @@ const treeRow = style({
       default: 'focus-ring',
       forcedColors: 'Highlight'
     }
+  },
+  '--borderRadiusTreeItem': {
+    type: 'borderTopStartRadius',
+    value: {
+      default: 'sm',
+      isRound: 'default'
+    }
+  },
+  borderTopStartRadius: {
+    default: '--borderRadiusTreeItem',
+    isPreviousSelected: 'none',
+    isDetached: 'default'
+  },
+  borderTopEndRadius: {
+    default: '--borderRadiusTreeItem',
+    isPreviousSelected: 'none',
+    isDetached: 'default'
+  },
+  borderBottomStartRadius: {
+    default: '--borderRadiusTreeItem',
+    isNextSelected: 'none',
+    isDetached: 'default'
+  },
+  borderBottomEndRadius: {
+    default: '--borderRadiusTreeItem',
+    isNextSelected: 'none',
+    isDetached: 'default'
   }
 });
 
@@ -180,20 +243,45 @@ const treeCellGrid = style({
   display: 'grid',
   width: 'full',
   height: 'full',
-  boxSizing: 'border-box',
   alignContent: 'center',
   alignItems: 'center',
+  boxSizing: 'border-box',
   gridTemplateColumns: ['auto', 'auto', 'auto', 'auto', 'auto', '1fr', 'minmax(0, auto)', 'auto'],
   gridTemplateRows: '1fr',
   gridTemplateAreas: [
     'drag-handle checkbox level-padding expand-button icon content actions actionmenu'
   ],
-  backgroundColor: '--rowBackgroundColor',
   paddingEnd: 4, // account for any focus rings on the last item in the cell
   color: {
+    default: 'gray-700',
+    isHovered: 'gray-800',
+    isSelected: 'gray-900',
     isDisabled: {
       default: 'gray-400',
       forcedColors: 'GrayText'
+    },
+    selectionStyle: {
+      highlight: {
+        isSelectionDisabled: {
+          default: 'gray-400',
+          forcedColors: 'GrayText'
+        }
+      }
+    }
+  },
+  '--thumbnailBorderColor': {
+    type: 'color',
+    value: {
+      default: 'gray-500',
+      isHovered: 'gray-800',
+      isSelected: 'gray-900',
+      isEmphasized: {
+        isSelected: 'blue-900'
+      },
+      isDisabled: {
+        default: 'gray-400',
+        forcedColors: 'GrayText'
+      }
     }
   },
   '--rowSelectedBorderColor': {
@@ -210,6 +298,87 @@ const treeCellGrid = style({
       default: 'focus-ring',
       forcedColors: 'Highlight'
     }
+  },
+  '--borderColor': {
+    type: 'borderTopColor',
+    value: {
+      default: 'transparent',
+      isSelected: 'blue-900',
+      forcedColors: 'ButtonBorder'
+    }
+  }
+});
+
+const treeRowBackground = style({
+  position: 'absolute',
+  zIndex: -1,
+  inset: 0,
+  backgroundColor: {
+    default: '--rowBackgroundColor',
+    isHovered: 'gray-100',
+    isPressed: 'gray-100',
+    isSelected: {
+      default: 'blue-900/10',
+      isHovered: 'blue-900/15',
+      isPressed: 'blue-900/15'
+    },
+    isDisabled: {
+      default: 'gray-100'
+    },
+    forcedColors: {
+      default: 'Background'
+    }
+  },
+  borderTopStartRadius: {
+    default: '--borderRadiusTreeItem',
+    isPreviousSelected: {
+      default: '--borderRadiusTreeItem',
+      isSelected: 'none'
+    },
+    isDetached: 'default'
+  },
+  borderTopEndRadius: {
+    default: '--borderRadiusTreeItem',
+    isPreviousSelected: {
+      default: '--borderRadiusTreeItem',
+      isSelected: 'none'
+    },
+    isDetached: 'default'
+  },
+  borderBottomStartRadius: {
+    default: '--borderRadiusTreeItem',
+    isNextSelected: {
+      default: '--borderRadiusTreeItem',
+      isSelected: 'none'
+    },
+    isDetached: 'default'
+  },
+  borderBottomEndRadius: {
+    default: '--borderRadiusTreeItem',
+    isNextSelected: {
+      default: '--borderRadiusTreeItem',
+      isSelected: 'none'
+    },
+    isDetached: 'default'
+  },
+  borderTopWidth: {
+    default: 1,
+    isPreviousSelected: 0
+  },
+  borderBottomWidth: {
+    default: 1,
+    isNextSelected: 0
+  },
+  borderStartWidth: 1,
+  borderEndWidth: 1,
+  borderStyle: 'solid',
+  borderColor: {
+    default: 'transparent',
+    isSelected: '--borderColor',
+    isDetached: {
+      default: 'transparent',
+      isSelected: '--rowSelectedBorderColor'
+    }
   }
 });
 
@@ -233,6 +402,21 @@ const treeIcon = style({
   }
 });
 
+const treeThumbnail = style({
+  gridArea: 'icon',
+  marginEnd: 'text-to-visual',
+  width: 32,
+  aspectRatio: 'square',
+  objectFit: 'contain',
+  borderRadius: 'sm',
+  borderWidth: 1,
+  borderColor: '--thumbnailBorderColor',
+  borderStyle: 'solid',
+  padding: 2,
+  backgroundColor: 'white',
+  boxSizing: 'border-box'
+});
+
 const treeContent = style({
   gridArea: 'content',
   textOverflow: 'ellipsis',
@@ -270,13 +454,17 @@ export const TreeViewItem = (props: TreeViewItemProps): ReactNode => {
   let {
     href
   } = props;
+  let {isEmphasized, selectionStyle, selectionCornerStyle} = useContext(InternalTreeContext);
 
   return (
     <TreeItem
       {...props}
       className={(renderProps) => treeRow({
         ...renderProps,
-        isLink: !!href
+        isLink: !!href,
+        isEmphasized,
+        selectionStyle,
+        isRound: selectionCornerStyle === 'round'
       }) + (renderProps.isFocusVisible ? ' ' + treeRowFocusIndicator : '')} />
   );
 };
@@ -290,20 +478,29 @@ export const TreeViewItemContent = (props: TreeViewItemContentProps): ReactNode
   let {
     children
   } = props;
+  let {isDetached, isEmphasized, selectionCornerStyle, selectionStyle} = useContext(InternalTreeContext);
   let scale = useScale();
 
   return (
     <TreeItemContent>
-      {({isExpanded, hasChildItems, selectionMode, selectionBehavior, isDisabled, isSelected, id, state}) => {
+      {({isExpanded, hasChildItems, selectionMode, selectionBehavior, isDisabled, isFocusVisible, isSelected, id, state, isHovered, isSelectionDisabled}) => {
         let isNextSelected = false;
         let isNextFocused = false;
+        let isPreviousSelected = false;
+        let keyBefore = state.collection.getKeyBefore(id);
         let keyAfter = state.collection.getKeyAfter(id);
+        if (keyBefore != null) {
+          isPreviousSelected = state.selectionManager.isSelected(keyBefore);
+        }
         if (keyAfter != null) {
           isNextSelected = state.selectionManager.isSelected(keyAfter);
         }
         let isFirst = state.collection.getFirstKey() === id;
+        let isRound = selectionCornerStyle === 'round';
+
         return (
-          <div className={treeCellGrid({isDisabled, isNextSelected, isSelected, isFirst, isNextFocused})}>
+          <div className={treeCellGrid({selectionStyle, isDisabled, isPreviousSelected, isNextSelected, isSelected, isFirst, isNextFocused, isHovered, isDetached, isEmphasized, isRound, isSelectionDisabled})}>
+            <div className={treeRowBackground({isPreviousSelected, isNextSelected, isSelected, isEmphasized, isHovered, isRound, isFocusVisible})} />
             {selectionMode !== 'none' && selectionBehavior === 'toggle' && (
               // TODO: add transition?
               <div className={treeCheckbox({isDisabled: isDisabled || !state.selectionManager.canSelectItem(id) || state.disabledKeys.has(id)})}>
@@ -319,12 +516,13 @@ export const TreeViewItemContent = (props: TreeViewItemContentProps): ReactNode
             <Provider
               values={[
                 [TextContext, {styles: treeContent}],
+                [ImageContext, {styles: treeThumbnail}],
                 [IconContext, {
                   render: centerBaseline({slot: 'icon', styles: treeIcon}),
                   styles: style({size: fontRelative(20), flexShrink: 0})
                 }],
-                [ActionButtonGroupContext, {styles: treeActions, isDisabled}],
-                [ActionMenuContext, {styles: treeActionMenu, isQuiet: true, isDisabled}]
+                [ActionButtonGroupContext, {styles: treeActions, size: 'S', isDisabled}],
+                [ActionMenuContext, {styles: treeActionMenu, isQuiet: true, size: 'S', isDisabled}]
               ]}>
               {typeof children === 'string' ? <Text>{children}</Text> : children}
             </Provider>
diff --git a/packages/@react-spectrum/s2/src/index.ts b/packages/@react-spectrum/s2/src/index.ts
index 0865c16c0cb..5451bde9441 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, ListViewItem, ListViewLoadMoreItem} from './ListView';
 export {MenuItem, MenuTrigger, Menu, MenuSection, SubmenuTrigger, MenuContext} from './Menu';
 export {Meter, MeterContext} from './Meter';
 export {NotificationBadge, NotificationBadgeContext} from './NotificationBadge';
@@ -87,7 +88,7 @@ export {ToastContainer, ToastQueue} from './Toast';
 export {ToggleButton, ToggleButtonContext} from './ToggleButton';
 export {ToggleButtonGroup, ToggleButtonGroupContext} from './ToggleButtonGroup';
 export {Tooltip, TooltipTrigger} from './Tooltip';
-export {TreeView, TreeViewItem, TreeViewItemContent, TreeViewLoadMoreItem} from './TreeView';
+export {TreeView, TreeViewItem, TreeViewItemContent, TreeViewContext, TreeViewLoadMoreItem} from './TreeView';
 
 export {pressScale} from './pressScale';
 
@@ -136,6 +137,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, ListViewLoadMoreItemProps} from './ListView';
 export type {MenuTriggerProps, MenuProps, MenuItemProps, MenuSectionProps, SubmenuTriggerProps} from './Menu';
 export type {MeterProps} from './Meter';
 export type {NotificationBadgeProps} from './NotificationBadge';
diff --git a/packages/@react-spectrum/s2/stories/HighlightSelectionList.stories.tsx b/packages/@react-spectrum/s2/stories/HighlightSelectionList.stories.tsx
new file mode 100644
index 00000000000..ac78c005c5c
--- /dev/null
+++ b/packages/@react-spectrum/s2/stories/HighlightSelectionList.stories.tsx
@@ -0,0 +1,89 @@
+/**
+ * Copyright 2020 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.
+ */
+// TODO: pull all the highlight styles out into a separate macro(s) for the background color, text color, etc.
+import ABC from '../s2wf-icons/S2_Icon_ABC_20_N.svg';
+import {
+  ActionButton,
+  ActionButtonGroup,
+  ListView,
+  ListViewItem,
+  Text
+} from '../src';
+import Add from '../s2wf-icons/S2_Icon_Add_20_N.svg';
+import {categorizeArgTypes, getActionArgs} from './utils';
+import InfoCircle from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';
+import type {Meta, StoryObj} from '@storybook/react';
+import React from 'react';
+import {style} from '../style/spectrum-theme' with {type: 'macro'};
+import TextNumbers from '../s2wf-icons/S2_Icon_TextNumbers_20_N.svg';
+
+const events = ['onSelectionChange'];
+
+const meta: Meta<typeof ListView> = {
+  title: 'Highlight Selection/ListView',
+  component: ListView,
+  parameters: {
+    layout: 'centered'
+  },
+  args: {...getActionArgs(events)},
+  argTypes: {
+    ...categorizeArgTypes('Events', events),
+    children: {table: {disable: true}}
+  }
+};
+
+export default meta;
+
+interface Item {
+  id: number,
+  name: string,
+  type: 'letter' | 'number'
+}
+
+let items: Item[] = [
+  {id: 1, name: 'Count', type: 'number'},
+  {id: 2, name: 'City', type: 'letter'},
+  {id: 3, name: 'Count of identities', type: 'number'},
+  {id: 4, name: 'Current day', type: 'number'},
+  {id: 5, name: 'Current month', type: 'letter'},
+  {id: 6, name: 'Current week', type: 'number'},
+  {id: 7, name: 'Current year', type: 'number'},
+  {id: 8, name: 'Current whatever', type: 'number'},
+  {id: 9, name: 'Alphabet', type: 'letter'},
+  {id: 10, name: 'Numbers', type: 'number'}
+];
+
+export const AttributesList: StoryObj<typeof ListView> = {
+  render: (args) => (
+    <ListView aria-label="Dynamic list" disabledKeys={[3]} {...args} items={items} styles={style({width: 220, height: 350})}>
+      {item => (
+        <ListViewItem textValue={item.name}>
+          {item.type === 'number' ? <TextNumbers /> : <ABC />}
+          <Text>{item.name}</Text>
+          <ActionButtonGroup>
+            <ActionButton aria-label="Info">
+              <InfoCircle />
+            </ActionButton>
+            <ActionButton aria-label="Add">
+              <Add />
+            </ActionButton>
+          </ActionButtonGroup>
+        </ListViewItem>
+      )}
+    </ListView>
+  ),
+  args: {
+    selectionStyle: 'highlight',
+    selectionMode: 'multiple',
+    highlightMode: 'inverse'
+  }
+};
diff --git a/packages/@react-spectrum/s2/stories/HighlightSelectionTable.stories.tsx b/packages/@react-spectrum/s2/stories/HighlightSelectionTable.stories.tsx
new file mode 100644
index 00000000000..4476cb3b5d4
--- /dev/null
+++ b/packages/@react-spectrum/s2/stories/HighlightSelectionTable.stories.tsx
@@ -0,0 +1,121 @@
+/**
+ * Copyright 2020 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 {CalendarDate, getLocalTimeZone} from '@internationalized/date';
+import {categorizeArgTypes, getActionArgs} from './utils';
+import {
+  Cell,
+  Column,
+  Row,
+  TableBody,
+  TableHeader,
+  TableView,
+  TableViewProps
+} from '../src';
+import type {Meta} from '@storybook/react';
+import React, {ReactElement} from 'react';
+import {style} from '../style/spectrum-theme' with {type: 'macro'};
+import UserGroup from '../s2wf-icons/S2_Icon_UserGroup_20_N.svg';
+
+const events = ['onSelectionChange'];
+
+const meta: Meta<typeof TableView> = {
+  title: 'Highlight Selection/TableView',
+  component: TableView,
+  parameters: {
+    layout: 'centered'
+  },
+  args: {...getActionArgs(events)},
+  argTypes: {
+    ...categorizeArgTypes('Events', events),
+    children: {table: {disable: true}}
+  }
+};
+
+export default meta;
+
+let columns = [
+  {name: 'Name', id: 'name', isRowHeader: true, minWidth: 400},
+  {name: 'Sharing', id: 'sharing', minWidth: 200},
+  {name: 'Date modified', id: 'date', minWidth: 200}
+];
+
+interface Item {
+  id: number,
+  name: {
+    name: string,
+    meta: string,
+    description?: string
+  },
+  sharing: string,
+  date: CalendarDate
+}
+
+let items: Item[] = [
+  {id: 1, name: {name: 'Designer resume', meta: 'PDF', description: 'From Molly Holt'}, sharing: 'public', date: new CalendarDate(2020, 7, 6)},
+  // eslint-disable-next-line quotes
+  {id: 2, name: {name: `Career Management for IC's`, meta: 'PDF'}, sharing: 'public', date: new CalendarDate(2020, 7, 6)},
+  {id: 3, name: {name: 'CMP Sessions', meta: 'PDF'}, sharing: 'public', date: new CalendarDate(2020, 7, 6)},
+  {id: 4, name: {name: 'Clifton Strength Assessment Info', meta: 'Folder'}, sharing: 'none', date: new CalendarDate(2020, 7, 6)},
+  {id: 5, name: {name: 'Personal Brand', meta: 'Zip'}, sharing: 'private', date: new CalendarDate(2020, 7, 6)},
+  {id: 6, name: {name: 'Personal Brand', meta: 'Zip'}, sharing: 'private', date: new CalendarDate(2020, 7, 6)},
+  {id: 7, name: {name: 'Personal Brand', meta: 'Zip'}, sharing: 'private', date: new CalendarDate(2020, 7, 6)},
+  {id: 8, name: {name: 'Personal Brand', meta: 'Zip'}, sharing: 'private', date: new CalendarDate(2020, 7, 6)},
+  {id: 9, name: {name: 'Personal Brand', meta: 'Zip'}, sharing: 'private', date: new CalendarDate(2020, 7, 6)},
+  {id: 10, name: {name: 'Personal Brand', meta: 'Zip'}, sharing: 'private', date: new CalendarDate(2020, 7, 6)}
+];
+
+export const DocumentsTable = {
+  render: (args: TableViewProps): ReactElement => (
+    <TableView aria-label="Dynamic table" disabledKeys={[3]} {...args} styles={style({width: 700, height: 400})}>
+      <TableHeader columns={columns}>
+        {(column) => (
+          <Column {...column}>{column.name}</Column>
+        )}
+      </TableHeader>
+      <TableBody items={items}>
+        {item => (
+          <Row id={item.id} columns={columns}>
+            {(column) => {
+              if (column.id === 'sharing') {
+                let content = item[column.id] === 'public' ? <div className={style({display: 'flex', alignItems: 'center', gap: 4})}><UserGroup /><div>Shared</div></div> : 'Only you';
+                if (item[column.id] ===  'none') {
+                  content = '-';
+                }
+                return <Cell>{content}</Cell>;
+              }
+              if (column.id === 'name') {
+                return (
+                  <Cell>
+                    <div className={style({display: 'flex', flexDirection: 'column', gap: 4})}>
+                      <div>{item[column.id].name}</div>
+                    </div>
+                  </Cell>
+                );
+              }
+              if (column.id === 'date') {
+                return <Cell>{item[column.id].toDate(getLocalTimeZone()).toLocaleDateString('en-US', {year: 'numeric', month: 'long', day: 'numeric'})}</Cell>;
+              }
+              return <Cell>{item[column.id]}</Cell>;
+            }}
+          </Row>
+        )}
+      </TableBody>
+    </TableView>
+  ),
+  args: {
+    overflowMode: 'wrap',
+    selectionStyle: 'highlight',
+    selectionMode: 'multiple',
+    isEmphasized: true
+  }
+};
diff --git a/packages/@react-spectrum/s2/stories/HighlightSelectionTree.stories.tsx b/packages/@react-spectrum/s2/stories/HighlightSelectionTree.stories.tsx
new file mode 100644
index 00000000000..d7504847773
--- /dev/null
+++ b/packages/@react-spectrum/s2/stories/HighlightSelectionTree.stories.tsx
@@ -0,0 +1,272 @@
+/**
+ * Copyright 2020 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,
+  Collection,
+  Image,
+  Key,
+  Text,
+  TreeView,
+  TreeViewItem,
+  TreeViewItemContent,
+  TreeViewItemProps,
+  TreeViewLoadMoreItem,
+  TreeViewLoadMoreItemProps,
+  TreeViewProps
+} from '../src';
+import {categorizeArgTypes, getActionArgs} from './utils';
+import {checkers} from './assets/check';
+import FileTxt from '../s2wf-icons/S2_Icon_FileText_20_N.svg';
+import Folder from '../s2wf-icons/S2_Icon_Folder_20_N.svg';
+import FolderOpen from '../s2wf-icons/S2_Icon_FolderOpen_20_N.svg';
+import Lock from '../s2wf-icons/S2_Icon_Lock_20_N.svg';
+import LockOpen from '../s2wf-icons/S2_Icon_LockOpen_20_N.svg';
+import type {Meta, StoryObj} from '@storybook/react';
+import React, {ReactElement, useState} from 'react';
+import Visibility from '../s2wf-icons/S2_Icon_Visibility_20_N.svg';
+import VisibilityOff from '../s2wf-icons/S2_Icon_VisibilityOff_20_N.svg';
+
+const events = ['onSelectionChange'];
+
+const meta: Meta<typeof TreeView> = {
+  title: 'Highlight Selection/TreeView',
+  component: TreeView,
+  parameters: {
+    layout: 'centered'
+  },
+  args: {...getActionArgs(events)},
+  argTypes: {
+    ...categorizeArgTypes('Events', events),
+    children: {table: {disable: true}}
+  }
+};
+
+export default meta;
+
+
+interface TreeViewLayersItemType {
+  id?: string,
+  name: string,
+  icon?: ReactElement,
+  childItems?: TreeViewLayersItemType[],
+  isLocked?: boolean,
+  isVisible?: boolean
+}
+
+let layersRows: TreeViewLayersItemType[] = [
+  {id: 'layer-1', name: 'Layer', icon: <Image src={checkers} alt="" />},
+  {id: 'layer-2', name: 'Layer', icon: <Image src={checkers} alt="" />, isVisible: false},
+  {id: 'layer-group-1', name: 'Layer group', icon: <Image src={checkers} alt="" />, isVisible: false, childItems: [
+    {id: 'layer-group-1-1', name: 'Layer', icon: <Image src={checkers} alt="" />},
+    {id: 'layer-group-1-2', name: 'Layer', icon: <Image src={checkers} alt="" />},
+    {id: 'layer-group-1-3', name: 'Layer', icon: <Image src={checkers} alt="" />},
+    {id: 'layer-group-1-4', name: 'Layer', icon: <Image src={checkers} alt="" />},
+    {id: 'layer-group-1-group-1', name: 'Layer Group', icon: <Image src={checkers} alt="" />, childItems: [
+      {id: 'layer-group-1-group-1-1', name: 'Layer', icon: <Image src={checkers} alt="" />},
+      {id: 'layer-group-1-group-1-2', name: 'Layer', icon: <Image src={checkers} alt="" />},
+      {id: 'layer-group-1-group-1-3', name: 'Layer', icon: <Image src={checkers} alt="" />}
+    ]}
+  ]},
+  {id: 'layer-group-2', name: 'Layer group', icon: <Image src={checkers} alt="" />, isLocked: true, childItems: [
+    {id: 'layer-group-2-1', name: 'Layer', icon: <Image src={checkers} alt="" />},
+    {id: 'layer-group-2-2', name: 'Layer', icon: <Image src={checkers} alt="" />, isVisible: false},
+    {id: 'layer-group-2-3', name: 'Layer', icon: <Image src={checkers} alt="" />, isLocked: true},
+    {id: 'layer-group-2-4', name: 'Layer', icon: <Image src={checkers} alt="" />},
+    {id: 'layer-group-2-group-1', name: 'Layer Group', icon: <Image src={checkers} alt="" />}
+  ]},
+  {id: 'layer-group-3', name: 'Layer group', icon: <Image src={checkers} alt="" />, childItems: [
+    {id: 'reports-1', name: 'Reports 1', icon: <Image src={checkers} alt="" />, childItems: [
+      {id: 'layer-group-3-1', name: 'Layer', icon: <Image src={checkers} alt="" />},
+      {id: 'layer-group-3-2', name: 'Layer', icon: <Image src={checkers} alt="" />},
+      {id: 'layer-group-3-3', name: 'Layer', icon: <Image src={checkers} alt="" />},
+      {id: 'layer-group-3-4', name: 'Layer', icon: <Image src={checkers} alt="" />},
+      {id: 'layer-group-3-group-1', name: 'Layer Group', icon: <Image src={checkers} alt="" />, childItems: [
+        {id: 'layer-group-3-group-1-1', name: 'Layer', icon: <Image src={checkers} alt="" />},
+        {id: 'layer-group-3-group-1-2', name: 'Layer', icon: <Image src={checkers} alt="" />},
+        {id: 'layer-group-3-group-1-3', name: 'Layer', icon: <Image src={checkers} alt="" />}
+      ]}
+    ]},
+    {id: 'layer-group-3-2', name: 'Layer', icon: <Image src={checkers} alt="" />},
+    {id: 'layer-group-3-3', name: 'Layer', icon: <Image src={checkers} alt="" />},
+    {id: 'layer-group-3-4', name: 'Layer', icon: <Image src={checkers} alt="" />},
+    ...Array.from({length: 100}, (_, i) => ({id: `layer-group-3-repeat-${i}`, name: 'Layer', icon: <Image src={checkers} alt="" />}))
+  ]},
+  {id: 'layer-4', name: 'Layer', icon: <FileTxt />, isLocked: true, isVisible: false}
+];
+
+const TreeExampleLayersItem = (props: Omit<TreeViewItemProps, 'children'> & TreeViewLayersItemType & TreeViewLoadMoreItemProps): ReactElement => {
+  let {childItems, name, icon = <FileTxt />, loadingState, onLoadMore, isLocked = false, isVisible = true} = props;
+  return (
+    <>
+      <TreeViewItem id={props.id} textValue={name} href={props.href}>
+        <TreeViewItemContent>
+          <Text>{name}</Text>
+          {icon}
+          <ActionButtonGroup>
+            <ActionButton isQuiet>{isLocked ? <Lock /> : <LockOpen />}</ActionButton>
+            <ActionButton isQuiet>{isVisible ? <Visibility /> : <VisibilityOff />}</ActionButton>
+          </ActionButtonGroup>
+        </TreeViewItemContent>
+        <Collection items={childItems}>
+          {(item) => (
+            <TreeExampleLayersItem
+              textValue={item.id || item.name}
+              {...item} />
+          )}
+        </Collection>
+        {onLoadMore && loadingState && <TreeViewLoadMoreItem loadingState={loadingState} onLoadMore={onLoadMore} /> }
+      </TreeViewItem>
+    </>
+  );
+};
+
+const TreeExampleLayers = (args: TreeViewProps<TreeViewLayersItemType>): ReactElement => (
+  <div style={{width: '300px', resize: 'both', height: '320px', overflow: 'auto', display: 'flex', flexDirection: 'column'}}>
+    <TreeView aria-label="test dynamic tree" items={layersRows} disabledKeys={['layer-group-1-3']} {...args}>
+      {(item) => (
+        <TreeExampleLayersItem textValue={item.id || item.name} {...item} />
+      )}
+    </TreeView>
+  </div>
+);
+
+export const LayersTree: StoryObj<typeof TreeExampleLayers> = {
+  render: TreeExampleLayers,
+  args: {
+    defaultExpandedKeys: ['layer-group-2'],
+    selectionMode: 'multiple',
+    selectionStyle: 'highlight',
+    selectionCornerStyle: 'round',
+    isEmphasized: true
+  }
+};
+
+interface TreeViewFileItemType {
+  id?: string,
+  name: string,
+  icon?: ReactElement,
+  childItems?: TreeViewFileItemType[],
+  isExpanded?: boolean
+}
+
+let rows: TreeViewFileItemType[] = [
+  {id: 'documentation', name: 'Documentation', icon: <Folder />, childItems: [
+    {id: 'project-1', name: 'Project 1 Level 1', icon: <FileTxt />},
+    {id: 'project-2', name: 'Project 2 Level 1', icon: <Folder />, childItems: [
+      {id: 'project-2A', name: 'Project 2A Level 2', icon: <FileTxt />},
+      {id: 'project-2B', name: 'Project 2B Level 2', icon: <FileTxt />},
+      {id: 'project-2C', name: 'Project 2C Level 3', icon: <FileTxt />}
+    ]},
+    {id: 'project-3', name: 'Project 3', icon: <FileTxt />},
+    {id: 'project-4', name: 'Project 4', icon: <FileTxt />},
+    {id: 'project-5', name: 'Project 5', icon: <Folder />, childItems: [
+      {id: 'project-5A', name: 'Project 5A', icon: <FileTxt />},
+      {id: 'project-5B', name: 'Project 5B', icon: <FileTxt />},
+      {id: 'project-5C', name: 'Project 5C', icon: <FileTxt />}
+    ]},
+    ...Array.from({length: 100}, (_, i) => ({id: `projects-repeat-${i}`, name: `Reports ${i}`, icon: <FileTxt />}))
+  ]},
+  {id: 'branding', name: 'Branding', icon: <Folder />, childItems: [
+    {id: 'proposals', name: 'Proposals', icon: <FileTxt />},
+    {id: 'explorations', name: 'Explorations', icon: <FileTxt />},
+    {id: 'assets', name: 'Assets', icon: <FileTxt />}
+  ]},
+  {id: 'file01', name: 'File 01', icon: <FileTxt />},
+  {id: 'file02', name: 'File 02', icon: <FileTxt />},
+  {id: 'file03', name: 'File 03', icon: <FileTxt />}
+];
+
+const TreeExampleFileItem = (props: Omit<TreeViewItemProps, 'children'> & TreeViewFileItemType & TreeViewLoadMoreItemProps & {expandedKeys: Set<Key>}): ReactElement => {
+  let {childItems, name, icon = <FileTxt />, loadingState, onLoadMore, expandedKeys} = props;
+  let isExpanded = expandedKeys.has(props.id as Key);
+  return (
+    <>
+      <TreeViewItem id={props.id} textValue={name} href={props.href}>
+        <TreeViewItemContent>
+          <Text>{name}</Text>
+          {isExpanded ? <FolderOpen /> : icon}
+        </TreeViewItemContent>
+        <Collection items={childItems}>
+          {(item) => (
+            <TreeExampleFileItem
+              id={item.id || item.name}
+              icon={item.icon}
+              childItems={item.childItems}
+              textValue={item.name}
+              name={item.name}
+              expandedKeys={expandedKeys}
+              href={props.href} />
+          )}
+        </Collection>
+        {onLoadMore && loadingState && <TreeViewLoadMoreItem loadingState={loadingState} onLoadMore={onLoadMore} /> }
+      </TreeViewItem>
+    </>
+  );
+};
+
+const TreeExampleFiles = (args: TreeViewProps<TreeViewFileItemType>): ReactElement => {
+  let [expandedKeys, setExpandedKeys] = useState<Set<Key>>(new Set(['branding']));
+  let [items, setItems] = useState(rows);
+  let onExpandedChange = (keys: Set<Key>) => {
+    setExpandedKeys(keys);
+    // Iterate over depth first all items in 'rows' that are in the keys set, add a property 'isExpanded' to the item. we must maintain the tree structure.
+    // This is to work around the fact that we cannot change the icon inside the TreeViewItemContent because it doesn't re-render for the expanded state change.
+    let newItems = rows.reduce((acc, item) => {
+      let iterator = (children: TreeViewFileItemType[]) => {
+        return children.map(child => {
+          let newChild = {...child};
+          if (keys.has(child.id as Key)) {
+            newChild.isExpanded = true;
+          }
+          if (child.childItems) {
+            newChild.childItems = iterator(child.childItems);
+          }
+          return newChild;
+        });
+      };
+      let newChildren;
+      if (item.childItems) {
+        newChildren = iterator(item.childItems);
+      }
+      acc.push({...item, isExpanded: keys.has(item.id as Key), childItems: newChildren});
+      return acc;
+    }, [] as TreeViewFileItemType[]);
+    setItems(newItems);
+  };
+  return (
+    <div style={{width: '300px', resize: 'both', height: '320px', overflow: 'auto', display: 'flex', flexDirection: 'column'}}>
+      <TreeView selectionCornerStyle="square" aria-label="test dynamic tree" items={items} onExpandedChange={onExpandedChange} expandedKeys={expandedKeys} disabledKeys={['explorations']} {...args}>
+        {(item) => (
+          <TreeExampleFileItem
+            id={item.id}
+            expandedKeys={expandedKeys}
+            icon={item.icon}
+            childItems={item.childItems}
+            textValue={item.name}
+            name={item.name} />
+        )}
+      </TreeView>
+    </div>
+  );
+};
+
+export const FileTree: StoryObj<typeof TreeExampleFiles> = {
+  render: TreeExampleFiles,
+  args: {
+    selectionMode: 'multiple',
+    selectionStyle: 'highlight',
+    selectionCornerStyle: 'square',
+    isEmphasized: true
+  }
+};
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..91c39f2d70a
--- /dev/null
+++ b/packages/@react-spectrum/s2/stories/ListView.stories.tsx
@@ -0,0 +1,490 @@
+/*
+ * 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/addon-actions';
+import {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 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',
+  decorators: [
+    (Story) => (
+      <div style={{width: '300px', resize: 'both', height: '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: {disabledType?: 'file' | 'folder', showActions?: boolean}) {
+  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 as any, action('onSelectionChange'))}
+        items={children}
+        disabledKeys={props.disabledType ? children.filter(item => item.type === props.disabledType).map(item => item.id) : undefined}
+        onAction={chain(onAction, action('onAction'))}>
+        {(item: Item) => (
+          <ListViewItem textValue={item.name} hasChildItems={item.type === 'folder'}>
+            {item.type === 'folder' ? <Folder /> : null}
+            <Text>{item.name}</Text>
+            {props.showActions && (
+              <ActionMenu onAction={action('actionMenuAction')}>
+                <MenuItem id="edit"><Edit /><Text>Edit</Text></MenuItem>
+                <MenuItem id="delete"><Delete /><Text>Delete</Text></MenuItem>
+              </ActionMenu>
+            )}
+          </ListViewItem>
+        )}
+      </ListView>
+    </div>
+  );
+}
+
+export const Navigation: Story = {
+  render: () => <NavigationExample />,
+  name: 'hasChildItems navigation'
+};
diff --git a/packages/@react-spectrum/s2/stories/assets/check.tsx b/packages/@react-spectrum/s2/stories/assets/check.tsx
new file mode 100644
index 00000000000..c461a431e3d
--- /dev/null
+++ b/packages/@react-spectrum/s2/stories/assets/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/style/spectrum-theme.ts b/packages/@react-spectrum/s2/style/spectrum-theme.ts
index b66fa550564..d8c8663f008 100644
--- a/packages/@react-spectrum/s2/style/spectrum-theme.ts
+++ b/packages/@react-spectrum/s2/style/spectrum-theme.ts
@@ -626,10 +626,29 @@ export const style = createTheme({
       pasteboard: weirdColorToken('background-pasteboard-color'),
       elevated: weirdColorToken('background-elevated-color')
     }),
-    borderColor: new SpectrumColorProperty('borderColor', {
+    borderStartColor: new SpectrumColorProperty('borderInlineStartColor', {
       ...baseColors,
       negative: colorToken('negative-border-color-default'),
-      disabled: colorToken('disabled-border-color')
+      disabled: colorToken('disabled-border-color'),
+      'neutral-subdued': colorToken('neutral-subdued-content-color-default')
+    }),
+    borderTopColor: new SpectrumColorProperty('borderTopColor', {
+      ...baseColors,
+      negative: colorToken('negative-border-color-default'),
+      disabled: colorToken('disabled-border-color'),
+      'neutral-subdued': colorToken('neutral-subdued-content-color-default')
+    }),
+    borderEndColor: new SpectrumColorProperty('borderInlineEndColor', {
+      ...baseColors,
+      negative: colorToken('negative-border-color-default'),
+      disabled: colorToken('disabled-border-color'),
+      'neutral-subdued': colorToken('neutral-subdued-content-color-default')
+    }),
+    borderBottomColor: new SpectrumColorProperty('borderBottomColor', {
+      ...baseColors,
+      negative: colorToken('negative-border-color-default'),
+      disabled: colorToken('disabled-border-color'),
+      'neutral-subdued': colorToken('neutral-subdued-content-color-default')
     }),
     outlineColor: new SpectrumColorProperty('outlineColor', {
       ...baseColors,
@@ -1001,6 +1020,7 @@ export const style = createTheme({
     borderBottomRadius: ['borderBottomStartRadius', 'borderBottomEndRadius'] as const,
     borderStartRadius: ['borderTopStartRadius', 'borderBottomStartRadius'] as const,
     borderEndRadius: ['borderTopEndRadius', 'borderBottomEndRadius'] as const,
+    borderColor: ['borderTopColor', 'borderBottomColor', 'borderStartColor', 'borderEndColor'] as const,
     translate: ['translateX', 'translateY'] as const,
     scale: ['scaleX', 'scaleY'] as const,
     inset: ['top', 'bottom', 'insetStart', 'insetEnd'] as const,
diff --git a/packages/dev/codemods/src/s1-to-s2/UPGRADE.md b/packages/dev/codemods/src/s1-to-s2/UPGRADE.md
index 56156f54447..aad4a67bbce 100644
--- a/packages/dev/codemods/src/s1-to-s2/UPGRADE.md
+++ b/packages/dev/codemods/src/s1-to-s2/UPGRADE.md
@@ -95,6 +95,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)
 
@@ -217,6 +221,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 9d8eee7501c..dcd688a4821 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 {
@@ -20,6 +21,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 eaf1e909e76..bec584ad4ec 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']);
+  // Collections currently implemented.
+  // TODO: Add 'ActionGroup', 'ListBox', once implemented
+  const collectionItemParents = new Set(['Menu', 'ActionMenu', 'TagGroup', 'Breadcrumbs', 'Picker', 'ComboBox', 'ListBox', 'ListView', 'TabList', 'TabPanels', 'Collection']);
 
   if (
     t.isJSXElement(path.node) &&
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..b58670f078f
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/ListView.mdx
@@ -0,0 +1,350 @@
+import {Layout} from '../../src/Layout';
+export default Layout;
+
+import {ListView, ListViewItem, ListViewLoadMoreItem, Text, ActionMenu, MenuItem, ActionButton, ActionButtonGroup, 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'];
+
+# 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"
+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.
+
+```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) content, [ActionMenu](ActionMenu), and [ActionButtonGroup](ActionButtonGroup) as children.
+
+Use `textValue` when item content includes non-text children so typeahead and accessibility can still use a clear text label.
+
+```tsx render type="s2"
+"use client";
+import {ActionButton, ActionButtonGroup, ActionMenu, Image, ListView, ListViewItem, MenuItem, Text} from '@react-spectrum/s2';
+import Delete from '@react-spectrum/s2/icons/Delete';
+import Edit from '@react-spectrum/s2/icons/Edit';
+import File from '@react-spectrum/s2/icons/File';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+///- begin collapse -///
+let files = [
+  {id: 'project-brief', name: 'Project brief.pdf'},
+  {id: 'quarterly-report', name: 'Quarterly report.docx'},
+  {id: 'budget', name: 'Budget.xlsx'},
+  {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'}
+];
+///- end collapse -///
+
+<ListView aria-label="Rich content files" items={files} styles={style({width: 'full', maxWidth: 400, height: 320})}>
+  {item => (
+    <ListViewItem id={item.id} textValue={item.name}>
+      {/*- begin highlight -*/}
+      {item.image_url ? <Image src={item.image_url} alt={item.name} /> : <File />}
+      <Text>{item.name}</Text>
+      <Text slot="description">{item.image_url ? 'Image' : 'Document'}</Text>
+      <ActionButtonGroup aria-label="File actions">
+        <ActionButton aria-label="Edit">
+          <Edit />
+        </ActionButton>
+        <ActionButton aria-label="Delete">
+          <Delete />
+        </ActionButton>
+      </ActionButtonGroup>
+      <ActionMenu>
+      {/*- end highlight -*/}
+        <MenuItem>
+          <Edit />
+          <Text>Edit</Text>
+        </MenuItem>
+        <MenuItem>
+          <Delete />
+          <Text>Delete</Text>
+        </MenuItem>
+      </ActionMenu>
+    </ListViewItem>
+  )}
+</ListView>
+```
+
+### 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 links. See the [getting started guide](getting-started) to learn how to integrate with your framework.
+
+```tsx render docs={docs.exports.ListView} links={docs.links} props={['selectionMode', 'isQuiet']} 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. Use `selectionStyle="checkbox"` (default) for toggle selection with checkboxes, or `selectionStyle="highlight"` for row highlight selection behavior. 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, type Selection} from '@react-spectrum/s2';
+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}`)}
+        ///- end highlight -///
+      >
+        <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 Folder from '@react-spectrum/s2/icons/Folder';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+import {useState} from 'react';
+
+///- begin collapse -///
+let rootItems = [
+  {id: 'photoshop', name: 'Adobe Photoshop', type: 'file'},
+  {id: 'xd', name: 'Adobe XD', type: 'file'},
+  {id: 'documents', name: 'Documents', type: 'folder', children: [
+    {id: 'sales-pitch', name: 'Sales Pitch', type: 'file'},
+    {id: 'demo', name: 'Demo', type: 'file'},
+    {id: 'taxes', name: 'Taxes', type: 'file'}
+  ]},
+  {id: 'indesign', name: 'Adobe InDesign', type: 'file'},
+  {id: 'utilities', name: 'Utilities', type: 'folder', children: [
+    {id: 'activity-monitor', name: 'Activity Monitor', type: 'file'}
+  ]},
+  {id: 'aftereffects', name: 'Adobe AfterEffects', type: 'file'},
+  {id: 'illustrator', name: 'Adobe Illustrator', type: 'file'},
+  {id: 'pictures', name: 'Pictures', type: 'folder', children: [
+    {id: 'yosemite', name: 'Yosemite', type: 'file'},
+    {id: 'jackson-hole', name: 'Jackson Hole', type: 'file'},
+    {id: 'crater-lake', name: 'Crater Lake', type: 'file'}
+  ]}
+];
+///- end collapse -///
+
+function NavigationExample() {
+  let [breadcrumbs, setBreadcrumbs] = useState([
+    {id: 'root', name: 'Root', children: rootItems}
+  ]);
+
+  let currentItems = breadcrumbs[breadcrumbs.length - 1].children;
+
+  let onAction = (key) => {
+    let item = currentItems.find(item => item.id === key);
+    if (item?.type === 'folder') {
+      setBreadcrumbs(prev => [...prev, item]);
+    }
+  };
+
+  let onBreadcrumbAction = (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.type === 'folder'}>
+            {item.type === 'folder' ? <Folder /> : null}
+            <Text>{item.name}</Text>
+          </ListViewItem>
+        )}
+      </ListView>
+      {/*- end highlight -*/}
+    </div>
+  );
+}
+```
+
+## API
+
+```tsx links={{ListView: '#listview', ListViewItem: '#listviewitem', ListViewLoadMoreItem: '#listviewloadmoreitem', 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>
+  <ListViewLoadMoreItem />
+</ListView>
+```
+
+### ListView
+
+<PropTable component={docs.exports.ListView} links={docs.links} />
+
+### ListViewItem
+
+<PropTable component={docs.exports.ListViewItem} links={docs.links} showDescription />
+
+### ListViewLoadMoreItem
+
+<PropTable component={docs.exports.ListViewLoadMoreItem} links={docs.links} showDescription />
diff --git a/packages/react-aria-components/src/GridList.tsx b/packages/react-aria-components/src/GridList.tsx
index afeeeef82b9..9e08c4eef77 100644
--- a/packages/react-aria-components/src/GridList.tsx
+++ b/packages/react-aria-components/src/GridList.tsx
@@ -289,7 +289,12 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
   );
 }
 
-export interface GridListItemRenderProps extends ItemRenderProps {}
+export interface GridListItemRenderProps extends ItemRenderProps {
+  isFirstItem: boolean,
+  isLastItem: boolean,
+  isNextSelected: boolean,
+  isPrevSelected: boolean
+}
 
 export interface GridListItemProps<T = object> extends RenderProps<GridListItemRenderProps>, LinkDOMProps, HoverEvents, PressEvents, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {
   /**
@@ -367,6 +372,10 @@ export const GridListItem = /*#__PURE__*/ createLeafComponent(ItemNode, function
     defaultClassName: 'react-aria-GridListItem',
     values: {
       ...states,
+      isFirstItem: item.key === state.collection.getFirstKey(),
+      isLastItem: item.key === state.collection.getLastKey(),
+      isNextSelected: state.collection.getKeyAfter(item.key) !== null && state.selectionManager.isSelected(state.collection.getKeyAfter(item.key)!) || false,
+      isPrevSelected: state.collection.getKeyBefore(item.key) !== null && state.selectionManager.isSelected(state.collection.getKeyBefore(item.key)!) || false,
       isHovered,
       isFocusVisible,
       selectionMode: state.selectionManager.selectionMode,
diff --git a/packages/react-aria-components/src/Table.tsx b/packages/react-aria-components/src/Table.tsx
index c1096ead793..6bd94d69b5c 100644
--- a/packages/react-aria-components/src/Table.tsx
+++ b/packages/react-aria-components/src/Table.tsx
@@ -1090,6 +1090,10 @@ export const TableBody = /*#__PURE__*/ createBranchComponent(TableBodyNode, <T e
 });
 
 export interface RowRenderProps extends ItemRenderProps {
+  /** Whether the previous row is selected. */
+  isPreviousSelected: boolean,
+  /** Whether the next row is selected. */
+  isNextSelected: boolean,
   /** Whether the row's children have keyboard focus. */
   isFocusVisibleWithin: boolean,
   /** The unique id of the row. */
@@ -1205,6 +1209,16 @@ export const Row = /*#__PURE__*/ createBranchComponent(
       }
     // eslint-disable-next-line
     }, []);
+    let isPreviousSelected = false;
+    let keyBefore = state.collection.getKeyBefore(item.key);
+    if (keyBefore != null) {
+      isPreviousSelected = state.selectionManager.isSelected(keyBefore);
+    }
+    let isNextSelected = false;
+    let keyAfter = state.collection.getKeyAfter(item.key);
+    if (keyAfter != null) {
+      isNextSelected = state.selectionManager.isSelected(keyAfter);
+    }
 
     let isDragging = dragState && dragState.isDragging(item.key);
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -1220,6 +1234,8 @@ export const Row = /*#__PURE__*/ createBranchComponent(
         isFocusVisible,
         selectionMode: state.selectionManager.selectionMode,
         selectionBehavior: state.selectionManager.selectionBehavior,
+        isPreviousSelected,
+        isNextSelected,
         isDragging,
         isDropTarget: dropIndicator?.isDropTarget,
         isFocusVisibleWithin,
diff --git a/packages/react-aria-components/src/Tree.tsx b/packages/react-aria-components/src/Tree.tsx
index 0336e312bcc..85344c65c86 100644
--- a/packages/react-aria-components/src/Tree.tsx
+++ b/packages/react-aria-components/src/Tree.tsx
@@ -564,7 +564,9 @@ export interface TreeItemRenderProps extends ItemRenderProps {
   /** The state of the tree. */
   state: TreeState<unknown>,
   /** The unique id of the tree row. */
-  id: Key
+  id: Key,
+  /** Whether the tree item has its selection disabled. */
+  isSelectionDisabled: boolean
 }
 
 export interface TreeItemContentRenderProps extends TreeItemRenderProps {}
@@ -690,13 +692,14 @@ export const TreeItem = /*#__PURE__*/ createBranchComponent(TreeItemNode, <T ext
     level,
     selectionMode,
     selectionBehavior,
+    isSelectionDisabled: !!checkboxProps.isDisabled,
     isFocusVisibleWithin,
     state,
     id: item.key,
     allowsDragging: !!dragState,
     isDragging,
     isDropTarget
-  }), [states, isHovered, isFocusVisible, isExpanded, hasChildItems, level, isFocusVisibleWithin, state, item.key, dragState, isDragging, isDropTarget, selectionBehavior, selectionMode]);
+  }), [states, isHovered, isFocusVisible, isExpanded, hasChildItems, level, isFocusVisibleWithin, state, item.key, dragState, isDragging, isDropTarget, selectionBehavior, selectionMode, checkboxProps.isDisabled]);
 
   let renderProps = useRenderProps({
     ...props,
@@ -794,6 +797,7 @@ export const TreeItem = /*#__PURE__*/ createBranchComponent(TreeItemNode, <T ext
         data-has-child-items={hasChildItems || undefined}
         data-level={level}
         data-selected={states.isSelected || undefined}
+        data-selection-disabled={checkboxProps.isDisabled || undefined}
         data-disabled={states.isDisabled || undefined}
         data-hovered={isHovered || undefined}
         data-focused={states.isFocused || undefined}