diff --git a/packages/@react-spectrum/s2/chromatic/Tabs.stories.tsx b/packages/@react-spectrum/s2/chromatic/Tabs.stories.tsx
index 0c69a249419..8b2cc5c3e6d 100644
--- a/packages/@react-spectrum/s2/chromatic/Tabs.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Tabs.stories.tsx
@@ -16,6 +16,7 @@ import Heart from '../s2wf-icons/S2_Icon_Heart_20_N.svg';
 import type {Meta} from '@storybook/react';
 import {style} from '../style/spectrum-theme' with { type: 'macro' };
 import {Tab, TabList, TabPanel, Tabs} from '../src/Tabs';
+import {Text} from '@react-spectrum/s2';
 
 const meta: Meta<typeof Tabs> = {
   component: Tabs,
@@ -27,66 +28,72 @@ const meta: Meta<typeof Tabs> = {
 
 export default meta;
 
-export const Example = (args: any) => (
-  <Tabs {...args} styles={style({width: 450, height: 256})}>
-    <TabList aria-label="History of Ancient Rome">
-      <Tab id="FoR"><Edit />Founding of Rome</Tab>
-      <Tab id="MaR">Monarchy and Republic</Tab>
-      <Tab id="Emp">Empire</Tab>
-    </TabList>
-    <TabPanel id="FoR" UNSAFE_style={{display: 'flex'}}>
-      <div style={{overflow: 'auto'}}>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non rutrum augue, a dictum est. Sed ultricies vel orci in blandit. Morbi sed tempor leo. Phasellus et sollicitudin nunc, a volutpat est. In volutpat molestie velit, nec rhoncus felis vulputate porttitor. In efficitur nibh tortor, maximus imperdiet libero sollicitudin sed. Pellentesque dictum, quam id scelerisque rutrum, lorem augue suscipit est, nec ultricies ligula lorem id dui. Cras lacus tortor, fringilla nec ligula quis, semper imperdiet ex.</p>
-      </div>
-    </TabPanel>
-    <TabPanel id="MaR" UNSAFE_style={{display: 'flex'}}>
-      <div style={{overflow: 'auto'}}>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut vulputate justo. Suspendisse potenti. Nunc id fringilla leo, at luctus quam. Maecenas et ipsum nisi. Curabitur in porta purus, a pretium est. Fusce eu urna diam. Sed nunc neque, consectetur ut purus nec, consequat elementum libero. Sed ut diam in quam maximus condimentum at non erat. Vestibulum sagittis rutrum velit, vitae suscipit arcu. Nulla ac feugiat ante, vitae laoreet ligula. Maecenas sed molestie ligula. Nulla sed fringilla ex. Nulla viverra tortor at enim condimentum egestas. Nulla sed tristique sapien. Integer ligula quam, vulputate eget mollis eu, interdum sit amet justo.</p>
-        <p>Vivamus dignissim tortor ut sapien congue tristique. Sed ac aliquet mauris. Nulla metus dui, elementum sit amet luctus eu, condimentum id elit. Praesent id nibh sed ligula congue venenatis. Pellentesque urna turpis, eleifend id pellentesque a, auctor nec neque. Vestibulum ipsum mauris, rutrum sit amet magna et, aliquet mollis tellus. Pellentesque nec ultricies nibh, at tempus massa. Phasellus dictum turpis et interdum scelerisque. Aliquam fermentum tincidunt ipsum sit amet suscipit. Fusce non dui sed diam lacinia mattis fermentum eu urna. Cras pretium id nunc in elementum. Mauris laoreet odio vitae laoreet dictum. In non justo nec nunc vehicula posuere non non ligula. Nullam eleifend scelerisque nibh, in sollicitudin tortor ullamcorper vel. Praesent sagittis risus in erat dignissim, non lacinia elit efficitur. Quisque maximus nulla vel luctus pharetra.</p>
-      </div>
-    </TabPanel>
-    <TabPanel id="Emp" UNSAFE_style={{display: 'flex'}}>
-      <div style={{overflow: 'auto'}}>
-        <p>Alea jacta est.</p>
-      </div>
-    </TabPanel>
-  </Tabs>
-);
+export const Example = {
+  render: (args: any) => (
+    <Tabs {...args} styles={style({width: 450, height: 256})} aria-label="History of Ancient Rome">
+      <TabList>
+        <Tab id="FoR">Founding of Rome</Tab>
+        <Tab id="MaR">Monarchy and Republic</Tab>
+        <Tab id="Emp">Empire</Tab>
+      </TabList>
+      <TabPanel id="FoR">
+        <div>
+          <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non rutrum augue, a dictum est. Sed ultricies vel orci in blandit. Morbi sed tempor leo. Phasellus et sollicitudin nunc, a volutpat est. In volutpat molestie velit, nec rhoncus felis vulputate porttitor. In efficitur nibh tortor, maximus imperdiet libero sollicitudin sed. Pellentesque dictum, quam id scelerisque rutrum, lorem augue suscipit est, nec ultricies ligula lorem id dui. Cras lacus tortor, fringilla nec ligula quis, semper imperdiet ex.</div>
+        </div>
+      </TabPanel>
+      <TabPanel id="MaR">
+        <div>
+          <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut vulputate justo. Suspendisse potenti. Nunc id fringilla leo, at luctus quam. Maecenas et ipsum nisi. Curabitur in porta purus, a pretium est. Fusce eu urna diam. Sed nunc neque, consectetur ut purus nec, consequat elementum libero. Sed ut diam in quam maximus condimentum at non erat. Vestibulum sagittis rutrum velit, vitae suscipit arcu. Nulla ac feugiat ante, vitae laoreet ligula. Maecenas sed molestie ligula. Nulla sed fringilla ex. Nulla viverra tortor at enim condimentum egestas. Nulla sed tristique sapien. Integer ligula quam, vulputate eget mollis eu, interdum sit amet justo.</div>
+          <div>Vivamus dignissim tortor ut sapien congue tristique. Sed ac aliquet mauris. Nulla metus dui, elementum sit amet luctus eu, condimentum id elit. Praesent id nibh sed ligula congue venenatis. Pellentesque urna turpis, eleifend id pellentesque a, auctor nec neque. Vestibulum ipsum mauris, rutrum sit amet magna et, aliquet mollis tellus. Pellentesque nec ultricies nibh, at tempus massa. Phasellus dictum turpis et interdum scelerisque. Aliquam fermentum tincidunt ipsum sit amet suscipit. Fusce non dui sed diam lacinia mattis fermentum eu urna. Cras pretium id nunc in elementum. Mauris laoreet odio vitae laoreet dictum. In non justo nec nunc vehicula posuere non non ligula. Nullam eleifend scelerisque nibh, in sollicitudin tortor ullamcorper vel. Praesent sagittis risus in erat dignissim, non lacinia elit efficitur. Quisque maximus nulla vel luctus pharetra.</div>
+        </div>
+      </TabPanel>
+      <TabPanel id="Emp">
+        <div>
+          <div>Alea jacta est.</div>
+        </div>
+      </TabPanel>
+    </Tabs>
+  )
+};
 
-export const Disabled = (args: any) => (
-  <Tabs {...args} styles={style({width: 450, height: 144})} disabledKeys={['FoR', 'MaR', 'Emp']}>
-    <TabList aria-label="History of Ancient Rome">
-      <Tab id="FoR"><Edit />Founding of Rome</Tab>
-      <Tab id="MaR">Monarchy and Republic</Tab>
-      <Tab id="Emp">Empire</Tab>
-    </TabList>
-    <TabPanel id="FoR">
-      Arma virumque cano, Troiae qui primus ab oris.
-    </TabPanel>
-    <TabPanel id="MaR">
-      Senatus Populusque Romanus.
-    </TabPanel>
-    <TabPanel id="Emp">
-      Alea jacta est.
-    </TabPanel>
-  </Tabs>
-);
+export const Disabled = {
+  render: (args: any) => (
+    <Tabs {...args} aria-label="History of Ancient Rome" styles={style({width: 450, height: 144})} disabledKeys={['FoR', 'MaR', 'Emp']}>
+      <TabList>
+        <Tab id="FoR" aria-label="Edit"><Edit /><Text>Edit</Text></Tab>
+        <Tab id="MaR" aria-label="Notifications"><Bell /><Text>Notifications</Text></Tab>
+        <Tab id="Emp" aria-label="Likes"><Heart /><Text>Likes</Text></Tab>
+      </TabList>
+      <TabPanel id="FoR">
+        Arma virumque cano, Troiae qui primus ab oris.
+      </TabPanel>
+      <TabPanel id="MaR">
+        Senatus Populusque Romanus.
+      </TabPanel>
+      <TabPanel id="Emp">
+        Alea jacta est.
+      </TabPanel>
+    </Tabs>
+  )
+};
 
-export const Icons = (args: any) => (
-  <Tabs {...args} styles={style({width: 208, height: 144})}>
-    <TabList aria-label="History of Ancient Rome">
-      <Tab id="FoR" aria-label="Edit"><Edit /></Tab>
-      <Tab id="MaR" aria-label="Notifications"><Bell /></Tab>
-      <Tab id="Emp" aria-label="Likes"><Heart /></Tab>
-    </TabList>
-    <TabPanel id="FoR">
-      Arma virumque cano, Troiae qui primus ab oris.
-    </TabPanel>
-    <TabPanel id="MaR">
-      Senatus Populusque Romanus.
-    </TabPanel>
-    <TabPanel id="Emp">
-      Alea jacta est.
-    </TabPanel>
-  </Tabs>
-);
+export const Icons = {
+  render: (args: any) => (
+    <Tabs {...args} aria-label="History of Ancient Rome" styles={style({width: 208, height: 144})} labelBehavior="hide">
+      <TabList>
+        <Tab id="FoR" aria-label="Edit"><Edit /><Text>Edit</Text></Tab>
+        <Tab id="MaR" aria-label="Notifications"><Bell /><Text>Notifications</Text></Tab>
+        <Tab id="Emp" aria-label="Likes"><Heart /><Text>Likes</Text></Tab>
+      </TabList>
+      <TabPanel id="FoR">
+        Arma virumque cano, Troiae qui primus ab oris.
+      </TabPanel>
+      <TabPanel id="MaR">
+        Senatus Populusque Romanus.
+      </TabPanel>
+      <TabPanel id="Emp">
+        Alea jacta est.
+      </TabPanel>
+    </Tabs>
+  )
+};
diff --git a/packages/@react-spectrum/s2/package.json b/packages/@react-spectrum/s2/package.json
index 71f65011433..f32a0fbaeb3 100644
--- a/packages/@react-spectrum/s2/package.json
+++ b/packages/@react-spectrum/s2/package.json
@@ -130,6 +130,7 @@
   },
   "dependencies": {
     "@react-aria/collections": "3.0.0-alpha.7",
+    "@react-aria/focus": "^3.19.1",
     "@react-aria/i18n": "^3.12.5",
     "@react-aria/interactions": "^3.23.0",
     "@react-aria/live-announcer": "^3.4.1",
diff --git a/packages/@react-spectrum/s2/src/Content.tsx b/packages/@react-spectrum/s2/src/Content.tsx
index 5f15f593b95..4a404fc7b37 100644
--- a/packages/@react-spectrum/s2/src/Content.tsx
+++ b/packages/@react-spectrum/s2/src/Content.tsx
@@ -23,7 +23,8 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 interface ContentProps extends UnsafeStyles, SlotProps {
   children?: ReactNode,
   styles?: StyleString,
-  isHidden?: boolean
+  isHidden?: boolean,
+  id?: string
 }
 
 interface HeadingProps extends ContentProps {
diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx
index ac8c776c881..f461136deb9 100644
--- a/packages/@react-spectrum/s2/src/Tabs.tsx
+++ b/packages/@react-spectrum/s2/src/Tabs.tsx
@@ -11,28 +11,32 @@
  */
 
 import {
-    TabListProps as AriaTabListProps,
-    TabPanel as AriaTabPanel,
-    TabPanelProps as AriaTabPanelProps,
-    TabProps as AriaTabProps,
-    TabsProps as AriaTabsProps,
-    ContextValue,
-    Provider,
-    Tab as RACTab,
-    TabList as RACTabList,
-    Tabs as RACTabs,
-    TabListStateContext,
-    useSlottedContext
-  } from 'react-aria-components';
+  TabListProps as AriaTabListProps,
+  TabPanel as AriaTabPanel,
+  TabPanelProps as AriaTabPanelProps,
+  TabProps as AriaTabProps,
+  TabsProps as AriaTabsProps,
+  ContextValue,
+  Group,
+  Provider,
+  Tab as RACTab,
+  TabList as RACTabList,
+  Tabs as RACTabs,
+  TabListStateContext
+} from 'react-aria-components';
 import {centerBaseline} from './CenterBaseline';
-import {Collection, DOMRef, DOMRefValue, Key, Node, Orientation} from '@react-types/shared';
-import {createContext, forwardRef, ReactNode, useCallback, useContext, useEffect, useRef, useState} from 'react';
-import {focusRing, style} from '../style' with {type: 'macro'};
+import {Collection, DOMRef, DOMRefValue, Key, Node, Orientation, RefObject} from '@react-types/shared';
+import {CollectionBuilder} from '@react-aria/collections';
+import {createContext, forwardRef, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import {focusRing, size, style} from '../style' with {type: 'macro'};
 import {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {IconContext} from './Icon';
+import {Picker, PickerItem} from './TabsPicker';
 import {Text, TextContext} from './Content';
+import {useControlledState} from '@react-stately/utils';
 import {useDOMRef} from '@react-spectrum/utils';
-import {useLayoutEffect} from '@react-aria/utils';
+import {useEffectEvent, useId, useLabels, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
+import {useHasTabbableChild} from '@react-aria/focus';
 import {useLocale} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
@@ -45,18 +49,21 @@ export interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style' | '
    * The amount of space between the tabs.
    * @default 'regular'
    */
-  density?: 'compact' | 'regular'
+  density?: 'compact' | 'regular',
+  /**
+   * Defines if the text within the tabs should be hidden and only the icon should be shown.
+   * The text is always visible when the item is collapsed into a picker.
+   * @default 'show'
+   */
+  labelBehavior?: 'show' | 'hide'
 }
 
 export interface TabProps extends Omit<AriaTabProps, 'children' | 'style' | 'className'>, StyleProps {
   /** The content to display in the tab. */
-  children?: ReactNode
+  children: ReactNode
 }
 
-export interface TabListProps<T> extends Omit<AriaTabListProps<T>, 'children' | 'style' | 'className'>, StyleProps {
-  /** The content to display in the tablist. */
-  children?: ReactNode
-}
+export interface TabListProps<T> extends Omit<AriaTabListProps<T>, 'style' | 'className' | 'aria-label' | 'aria-labelledby'>, StyleProps {}
 
 export interface TabPanelProps extends Omit<AriaTabPanelProps, 'children' | 'style' | 'className'>, UnsafeStyles {
   /** Spectrum-defined styles, returned by the `style()` macro. */
@@ -66,82 +73,72 @@ export interface TabPanelProps extends Omit<AriaTabPanelProps, 'children' | 'sty
 }
 
 export const TabsContext = createContext<ContextValue<TabsProps, DOMRefValue<HTMLDivElement>>>(null);
+const InternalTabsContext = createContext<TabsProps>({});
+const CollapseContext = createContext({
+  showTabs: true,
+  menuId: '',
+  valueId: ''
+});
 
-const tabPanel = style({
-  marginTop: 4,
-  color: 'gray-800',
-  flexGrow: 1,
-  flexBasis: '[0%]',
-  minHeight: 0,
-  minWidth: 0
-}, getAllowedOverrides({height: true}));
-
-export function TabPanel(props: TabPanelProps) {
-  return (
-    <AriaTabPanel
-      {...props}
-      style={props.UNSAFE_style}
-      className={(props.UNSAFE_className || '') + tabPanel(null, props.styles)} />
-  );
-}
-
-const tab = style({
-  ...focusRing(),
-  display: 'flex',
-  color: {
-    default: 'neutral-subdued',
-    isSelected: 'neutral',
-    isHovered: 'neutral-subdued',
-    isDisabled: 'disabled',
-    forcedColors: {
-      isSelected: 'Highlight',
-      isDisabled: 'GrayText'
-    }
-  },
-  borderRadius: 'sm',
-  gap: 'text-to-visual',
-  height: {
-    density: {
-      compact: 32,
-      regular: 48
-    }
-  },
-  alignItems: 'center',
+const tabs = style({
   position: 'relative',
-  cursor: 'default',
-  flexShrink: 0,
-  transition: 'default'
-}, getAllowedOverrides());
-
-const icon = style({
+  display: 'flex',
   flexShrink: 0,
-  '--iconPrimary': {
-    type: 'fill',
-    value: 'currentColor'
+  font: 'ui',
+  flexDirection: {
+    orientation: {
+      horizontal: 'column'
+    }
   }
-});
+}, getAllowedOverrides({height: true}));
 
-export function Tab(props: TabProps) {
-  let {density} = useSlottedContext(TabsContext) ?? {};
+/**
+ * Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.
+ */
+export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, TabsContext);
+  let {
+    density = 'regular',
+    isDisabled,
+    disabledKeys,
+    orientation = 'horizontal',
+    labelBehavior = 'show'
+  } = props;
+  let domRef = useDOMRef(ref);
+  let [value, setValue] = useControlledState(props.selectedKey, props.defaultSelectedKey ?? null!, props.onSelectionChange);
+
+  if (!props['aria-label'] && !props['aria-labelledby']) {
+    throw new Error('An aria-label or aria-labelledby prop is required on Tabs for accessibility.');
+  }
 
   return (
-    <RACTab
-      {...props}
-      style={props.UNSAFE_style}
-      className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density}, props.styles)}>
-      <Provider
-        values={[
-          [TextContext, {styles: style({order: 1})}],
-          [IconContext, {
-            render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
-            styles: icon
-          }]
-        ]}>
-        {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}
-      </Provider>
-    </RACTab>
+    <Provider
+      values={[
+        [InternalTabsContext, {
+          density,
+          isDisabled,
+          orientation,
+          disabledKeys,
+          selectedKey: value,
+          onSelectionChange: setValue,
+          labelBehavior,
+          'aria-label': props['aria-label'],
+          'aria-labelledby': props['aria-labelledby']
+        }]
+      ]}>
+      <CollectionBuilder content={props.children}>
+        {collection => (
+          <CollapsingTabs
+            {...props}
+            selectedKey={value}
+            onSelectionChange={setValue}
+            collection={collection}
+            containerRef={domRef} />
+        )}
+      </CollectionBuilder>
+    </Provider>
   );
-}
+});
 
 const tablist = style({
   display: 'flex',
@@ -151,6 +148,14 @@ const tablist = style({
         density: {
           compact: 24,
           regular: 32
+        },
+        labelBehavior: {
+          hide: {
+            density: {
+              compact: 16,
+              regular: 24
+            }
+          }
         }
       }
     }
@@ -175,7 +180,15 @@ const tablist = style({
 });
 
 export function TabList<T extends object>(props: TabListProps<T>) {
-  let {density, isDisabled, disabledKeys, orientation} = useSlottedContext(TabsContext) ?? {};
+  let {showTabs} = useContext(CollapseContext) ?? {};
+
+  if (showTabs) {
+    return <TabListInner {...props} />;
+  }
+}
+
+function TabListInner<T extends object>(props: TabListProps<T>) {
+  let {density, isDisabled, disabledKeys, orientation, labelBehavior, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy} = useContext(InternalTabsContext) ?? {};
   let state = useContext(TabListStateContext);
   let [selectedTab, setSelectedTab] = useState<HTMLElement | undefined>(undefined);
   let tablistRef = useRef<HTMLDivElement>(null);
@@ -198,34 +211,16 @@ export function TabList<T extends object>(props: TabListProps<T>) {
         <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}
       <RACTabList
         {...props}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
         ref={tablistRef}
-        className={renderProps => tablist({...renderProps, density})} />
+        className={renderProps => tablist({...renderProps, labelBehavior, density})} />
       {orientation === 'horizontal' &&
         <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}
     </div>
   );
 }
 
-function isAllTabsDisabled<T>(collection: Collection<Node<T>> | null, disabledKeys: Set<Key>) {
-  let testKey: Key | null = null;
-  if (collection && collection.size > 0) {
-    testKey = collection.getFirstKey();
-
-    let index = 0;
-    while (testKey && index < collection.size) {
-      // We have to check if the item in the collection has a key in disabledKeys or has the isDisabled prop set directly on it
-      if (!disabledKeys.has(testKey) && !collection.getItem(testKey)?.props?.isDisabled) {
-        return false;
-      }
-
-      testKey = collection.getKeyAfter(testKey);
-      index++;
-    }
-    return true;
-  }
-  return false;
-}
-
 interface TabLineProps {
   disabledKeys: Iterable<Key> | undefined,
   isDisabled: boolean | undefined,
@@ -279,7 +274,7 @@ function TabLine(props: TabLineProps) {
   // We want to add disabled styling to the selection indicator only if all the Tabs are disabled
   let [isDisabled, setIsDisabled] = useState<boolean>(false);
   useEffect(() => {
-    let isDisabled = isTabsDisabled || isAllTabsDisabled(state?.collection || null, disabledKeys ? new Set(disabledKeys) : new Set(null));
+    let isDisabled = isTabsDisabled || isAllTabsDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set(null));
     setIsDisabled(isDisabled);
   }, [state?.collection, disabledKeys, isTabsDisabled, setIsDisabled]);
 
@@ -314,50 +309,361 @@ function TabLine(props: TabLineProps) {
 
   useLayoutEffect(() => {
     onResize();
-  }, [onResize, state?.selectedItem?.key, direction, orientation, density]);
+  }, [onResize, state?.selectedItem?.key, density, direction, orientation]);
 
   return (
     <div style={{...style}} className={selectedIndicator({isDisabled, orientation})} />
   );
 }
 
-const tabs = style({
+const tab = style({
+  ...focusRing(),
   display: 'flex',
+  color: {
+    default: 'neutral-subdued',
+    isSelected: 'neutral',
+    isHovered: 'neutral-subdued',
+    isDisabled: 'disabled',
+    forcedColors: {
+      isSelected: 'Highlight',
+      isDisabled: 'GrayText'
+    }
+  },
+  borderRadius: 'sm',
+  gap: 'text-to-visual',
+  height: {
+    density: {
+      compact: 32,
+      regular: 48
+    }
+  },
+  alignItems: 'center',
+  position: 'relative',
+  cursor: 'default',
   flexShrink: 0,
-  fontFamily: 'sans',
-  fontWeight: 'normal',
-  flexDirection: {
-    orientation: {
-      horizontal: 'column'
+  transition: 'default',
+  paddingX: {
+    labelBehavior: {
+      hide: size(6)
     }
   }
-}, getAllowedOverrides({height: true}));
+}, getAllowedOverrides());
 
-/**
- * Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.
- */
-export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLDivElement>) {
-  [props, ref] = useSpectrumContextProps(props, ref, TabsContext);
-  let {
-    density = 'regular',
-    isDisabled,
-    disabledKeys,
-    orientation = 'horizontal'
-  } = props;
-  let domRef = useDOMRef(ref);
+const icon = style({
+  display: 'block',
+  flexShrink: 0,
+  '--iconPrimary': {
+    type: 'fill',
+    value: 'currentColor'
+  }
+});
+
+export function Tab(props: TabProps) {
+  let {density, labelBehavior} = useContext(InternalTabsContext) ?? {};
 
+  let contentId = useId();
+  let ariaLabelledBy = props['aria-labelledby'] || '';
   return (
-    <RACTabs
+    <RACTab
       {...props}
-      ref={domRef}
+      // @ts-ignore
+      originalProps={props}
+      aria-labelledby={`${labelBehavior === 'hide' ? contentId : ''} ${ariaLabelledBy}`}
       style={props.UNSAFE_style}
-      className={renderProps => (props.UNSAFE_className || '') + tabs({...renderProps}, props.styles)}>
-      <Provider
-        values={[
-          [TabsContext, {density, isDisabled, disabledKeys, orientation}]
-        ]}>
+      className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density, labelBehavior}, props.styles)}>
+      {({
+          // @ts-ignore
+          isMenu
+        }) => {
+        if (isMenu) {
+          return props.children;
+        } else {
+          return (
+            <Provider
+              values={[
+                [TextContext, {
+                  id: contentId,
+                  styles:
+                    style({
+                      order: 1,
+                      display: {
+                        labelBehavior: {
+                          hide: 'none'
+                        }
+                      }
+                    })({labelBehavior})
+                }],
+                [IconContext, {
+                  render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
+                  styles: icon
+                }]
+              ]}>
+              {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}
+            </Provider>
+          );
+        }
+      }}
+    </RACTab>
+  );
+}
+
+const tabPanel = style({
+  ...focusRing(),
+  display: 'flex',
+  marginTop: 4,
+  marginX: -4,
+  paddingX: 4,
+  color: 'gray-800',
+  flexGrow: 1,
+  flexShrink: 1,
+  flexBasis: '[0%]',
+  minHeight: 0,
+  minWidth: 0,
+  overflow: 'auto'
+}, getAllowedOverrides({height: true}));
+
+export function TabPanel(props: TabPanelProps) {
+  let {showTabs} = useContext(CollapseContext);
+  let {selectedKey} = useContext(InternalTabsContext);
+  if (showTabs) {
+    return (
+      <AriaTabPanel
+        {...props}
+        style={props.UNSAFE_style}
+        className={renderProps => (props.UNSAFE_className ?? '') + tabPanel(renderProps, props.styles)} />
+    );
+  }
+
+  if (props.id !== selectedKey) {
+    return null;
+  }
+
+  return <CollapsedTabPanel {...props} />;
+}
+
+function CollapsedTabPanel(props: TabPanelProps) {
+  let {UNSAFE_style, UNSAFE_className = '', ...otherProps} = props;
+  let {menuId, valueId} = useContext(CollapseContext);
+  let ref = useRef(null);
+  let tabIndex = useHasTabbableChild(ref) ? undefined : 0;
+
+  return (
+    <Group
+      {...otherProps}
+      ref={ref}
+      aria-labelledby={menuId + ' ' + valueId}
+      tabIndex={tabIndex}
+      style={UNSAFE_style}
+      className={renderProps => UNSAFE_className + tabPanel(renderProps, props.styles)} />
+  );
+}
+
+function isAllTabsDisabled<T>(collection: Collection<Node<T>> | undefined, disabledKeys: Set<Key>) {
+  let testKey: Key | null = null;
+  if (collection && collection.size > 0) {
+    testKey = collection.getFirstKey();
+
+    let index = 0;
+    while (testKey && index < collection.size) {
+      // We have to check if the item in the collection has a key in disabledKeys or has the isDisabled prop set directly on it
+      if (!disabledKeys.has(testKey) && !collection.getItem(testKey)?.props?.isDisabled) {
+        return false;
+      }
+
+      testKey = collection.getKeyAfter(testKey);
+      index++;
+    }
+    return true;
+  }
+  return false;
+}
+
+let HiddenTabs = function (props: {
+  listRef: RefObject<HTMLDivElement | null>,
+  items: Array<Node<any>>,
+  size?: string,
+  density?: 'compact' | 'regular'
+}) {
+  let {listRef, items, size, density} = props;
+
+  return (
+    <div
+      // @ts-ignore
+      inert="true"
+      ref={listRef}
+      className={style({
+        display: '[inherit]',
+        flexDirection: '[inherit]',
+        gap: '[inherit]',
+        flexWrap: '[inherit]',
+        position: 'absolute',
+        inset: 0,
+        visibility: 'hidden',
+        overflow: 'hidden',
+        opacity: 0
+      })}>
+      {items.map((item) => {
+        // pull off individual props as an allow list, don't want refs or other props getting through
+        return (
+          <div
+            data-hidden-tab
+            style={item.props.UNSAFE_style}
+            key={item.key}
+            className={item.props.className({size, density})}>
+            {item.props.children({size, density})}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+let TabsMenu = (props: {valueId: string, items: Array<Node<any>>, onSelectionChange: TabsProps['onSelectionChange']} & TabsProps) => {
+  let {id, items, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, valueId} = props;
+  let {density, onSelectionChange, selectedKey, isDisabled, disabledKeys, labelBehavior} = useContext(InternalTabsContext);
+  let state = useContext(TabListStateContext);
+  let allKeysDisabled = useMemo(() => {
+    return isAllTabsDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set());
+  }, [state?.collection, disabledKeys]);
+  let labelProps = useLabels({
+    id,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy
+  });
+
+  return (
+    <div
+      className={style({
+        display: 'flex',
+        flexShrink: 0,
+        alignItems: 'center',
+        height: {
+          density: {
+            compact: 32,
+            regular: 48
+          }
+        }})({density})}>
+      <Picker
+        id={id}
+        valueId={valueId}
+        {...labelProps}
+        aria-describedby={props['aria-describedby']}
+        aria-details={props['aria-details']}
+        isDisabled={isDisabled || allKeysDisabled}
+        density={density!}
+        labelBehavior={labelBehavior}
+        items={items}
+        disabledKeys={disabledKeys}
+        selectedKey={selectedKey}
+        onSelectionChange={onSelectionChange}>
+        {(item: Node<any>) => {
+          return (
+            <PickerItem
+              {...item.props.originalProps}
+              isDisabled={isDisabled || allKeysDisabled}
+              key={item.key}>
+              {item.props.children({density, isMenu: true})}
+            </PickerItem>
+          );
+        }}
+      </Picker>
+    </div>
+  );
+};
+
+let CollapsingTabs = ({collection, containerRef, ...props}: {collection: Collection<Node<unknown>>, containerRef: any} & TabsProps) => {
+  let {density = 'regular', orientation = 'horizontal', labelBehavior = 'show', onSelectionChange} = props;
+  let [showItems, _setShowItems] = useState(true);
+  showItems = orientation === 'vertical' ? true : showItems;
+  let setShowItems = useCallback((value: boolean) => {
+    if (orientation === 'vertical') {
+      // if orientation is vertical, we always show the items
+      _setShowItems(true);
+    } else {
+      _setShowItems(value);
+    }
+  }, [orientation]);
+
+  let {direction} = useLocale();
+
+  let children = useMemo(() => [...collection], [collection]);
+
+  let listRef = useRef<HTMLDivElement | null>(null);
+  let updateOverflow = useEffectEvent(() => {
+    if (orientation === 'vertical' || !listRef.current || !containerRef?.current) {
+      return;
+    }
+    let container = listRef.current;
+    let containerRect = container.getBoundingClientRect();
+    let tabs = container.querySelectorAll('[data-hidden-tab]');
+    let lastTab = tabs[tabs.length - 1];
+    let lastTabRect = lastTab.getBoundingClientRect();
+    if (direction === 'ltr') {
+      setShowItems?.(lastTabRect.right <= containerRect.right);
+    } else {
+      setShowItems?.(lastTabRect.left >= containerRect.left);
+    }
+  });
+
+  useResizeObserver({ref: containerRef, onResize: updateOverflow});
+
+  useLayoutEffect(() => {
+    if (collection.size > 0) {
+      queueMicrotask(updateOverflow);
+    }
+  }, [collection.size, updateOverflow]);
+
+  let prevOrientation = useRef(orientation);
+  useLayoutEffect(() => {
+    if (collection.size > 0 && prevOrientation.current !== orientation) {
+      updateOverflow();
+    }
+    prevOrientation.current = orientation;
+  }, [collection.size, updateOverflow, orientation]);
+
+  useEffect(() => {
+    // Recalculate visible tags when fonts are loaded.
+    document.fonts?.ready.then(() => updateOverflow());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  let menuId = useId();
+  let valueId = useId();
+
+  let contents: ReactNode;
+  if (showItems) {
+    contents = (
+      <RACTabs
+        {...props}
+        style={{display: 'contents'}}>
         {props.children}
-      </Provider>
-    </RACTabs>
+      </RACTabs>
+    );
+  } else {
+    contents = (
+      <>
+        <TabsMenu
+          id={menuId}
+          valueId={valueId}
+          items={children}
+          onSelectionChange={onSelectionChange}
+          aria-label={props['aria-label']}
+          aria-describedby={props['aria-labelledby']} />
+        <CollapseContext.Provider value={{showTabs: false, menuId, valueId}}>
+          {props.children}
+        </CollapseContext.Provider>
+      </>
+    );
+  }
+
+  return (
+    <div style={props.UNSAFE_style} className={(props.UNSAFE_className || '') + tabs({orientation}, props.styles)} ref={containerRef}>
+      <div className={tablist({orientation, labelBehavior, density})}>
+        <HiddenTabs items={children} density={density} listRef={listRef} />
+      </div>
+      <CollapseContext.Provider value={{showTabs: true, menuId, valueId}}>
+        {contents}
+      </CollapseContext.Provider>
+    </div>
   );
-});
+};
diff --git a/packages/@react-spectrum/s2/src/TabsPicker.tsx b/packages/@react-spectrum/s2/src/TabsPicker.tsx
new file mode 100644
index 00000000000..b0abda79ef5
--- /dev/null
+++ b/packages/@react-spectrum/s2/src/TabsPicker.tsx
@@ -0,0 +1,350 @@
+/*
+ * 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 {
+  PopoverProps as AriaPopoverProps,
+  Select as AriaSelect,
+  SelectProps as AriaSelectProps,
+  Button,
+  ContextValue,
+  DEFAULT_SLOT,
+  ListBox,
+  ListBoxItem,
+  ListBoxItemProps,
+  ListBoxProps,
+  Provider,
+  SelectValue
+} from 'react-aria-components';
+import {centerBaseline} from './CenterBaseline';
+import {
+  checkmark,
+  description,
+  icon,
+  label,
+  menuitem,
+  sectionHeader,
+  sectionHeading
+} from './Menu';
+import CheckmarkIcon from '../ui-icons/Checkmark';
+import ChevronIcon from '../ui-icons/Chevron';
+import {edgeToText, focusRing, size, style} from '../style' with {type: 'macro'};
+import {fieldInput, StyleProps} from './style-utils' with {type: 'macro'};
+import {
+  FieldLabel
+} from './Field';
+import {FocusableRef, FocusableRefValue, SpectrumLabelableProps} from '@react-types/shared';
+import {forwardRefType} from './types';
+import {HeaderContext, HeadingContext, Text, TextContext} from './Content';
+import {IconContext} from './Icon';
+import {Placement} from 'react-aria';
+import {PopoverBase} from './Popover';
+import {pressScale} from './pressScale';
+import {raw} from '../style/style-macro' with {type: 'macro'};
+import React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
+import {useFocusableRef} from '@react-spectrum/utils';
+import {useFormProps} from './Form';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
+export interface PickerStyleProps {
+}
+export interface PickerProps<T extends object> extends
+  Omit<AriaSelectProps<T>, 'children' | 'style' | 'className' | 'placeholder'>,
+  PickerStyleProps,
+  StyleProps,
+  SpectrumLabelableProps,
+  Pick<ListBoxProps<T>, 'items'>,
+  Pick<AriaPopoverProps, 'shouldFlip'> {
+    /** The contents of the collection. */
+    children: ReactNode | ((item: T) => ReactNode),
+    /**
+     * Direction the menu will render relative to the Picker.
+     *
+     * @default 'bottom'
+     */
+    direction?: 'bottom' | 'top',
+    /**
+     * Alignment of the menu relative to the input target.
+     *
+     * @default 'start'
+     */
+    align?: 'start' | 'end',
+    /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */
+    menuWidth?: number,
+    /** Density of the tabs, affects the height of the picker. */
+    density: 'compact' | 'regular',
+    /**
+     * If the tab picker should only display icon and no text for the button label.
+     * @default 'show
+     */
+    labelBehavior?: 'show' | 'hide',
+    /** Id for the SelectedValue so we can label using it. */
+    valueId?: string
+}
+export const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);
+const inputButton = style({
+  ...focusRing(),
+  ...fieldInput(),
+  outlineStyle: {
+    default: 'none',
+    isFocusVisible: 'solid'
+  },
+  position: 'relative',
+  font: 'ui',
+  display: 'flex',
+  textAlign: 'start',
+  borderStyle: 'none',
+  borderRadius: 'sm',
+  alignItems: 'center',
+  transition: 'default',
+  columnGap: 'text-to-visual',
+  paddingX: 0,
+  backgroundColor: 'transparent',
+  color: {
+    default: 'neutral',
+    isDisabled: 'disabled'
+  },
+  maxWidth: {
+    isQuiet: 'max'
+  },
+  disableTapHighlight: true,
+  height: {
+    default: 48,
+    density: {
+      compact: 32
+    }
+  },
+  boxSizing: 'border-box'
+});
+export let menu = style({
+  outlineStyle: 'none',
+  display: 'grid',
+  gridTemplateColumns: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],
+  boxSizing: 'border-box',
+  maxHeight: '[inherit]',
+  overflow: 'auto',
+  padding: 8,
+  fontFamily: 'sans',
+  fontSize: 'control'
+});
+const valueStyles = style({
+  flexGrow: 0,
+  truncate: true,
+  display: 'flex',
+  alignItems: 'center',
+  height: 'full'
+});
+const iconStyles = style({
+  flexShrink: 0,
+  rotate: 90,
+  '--iconPrimary': {
+    type: 'fill',
+    value: 'currentColor'
+  }
+});
+const iconCenterWrapper = style({
+  display: 'flex',
+  gridArea: 'icon',
+  paddingStart: {
+    labelBehavior: {
+      hide: size(6)
+    }
+  }
+});
+let InsideSelectValueContext = createContext(false);
+function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, PickerContext);
+  let domRef = useFocusableRef(ref);
+  props = useFormProps(props);
+  let {
+    direction = 'bottom',
+    align = 'start',
+    shouldFlip = true,
+    children,
+    items,
+    density,
+    labelBehavior = 'show',
+    valueId,
+    ...pickerProps
+  } = props;
+  let isQuiet = true;
+  const menuOffset: number = 6;
+  const size = 'M';
+  let ariaLabelledby = props['aria-labelledby'] ?? '';
+  return (
+    <div>
+      <AriaSelect
+        {...pickerProps}
+        aria-labelledby={`${labelBehavior === 'hide' ? valueId : ''} ${ariaLabelledby}`}>
+        {({isOpen}) => (
+          <>
+            <FieldLabel isQuiet={isQuiet} />
+            <Button
+              ref={domRef}
+              style={renderProps => pressScale(domRef)(renderProps)}
+              // Prevent press scale from sticking while Picker is open.
+              // @ts-ignore
+              isPressed={false}
+              className={renderProps => inputButton({
+                ...renderProps,
+                size: 'M',
+                isOpen,
+                isQuiet,
+                density
+              })}>
+              <SelectValue className={valueStyles + ' ' + raw('&> * {display: none;}')}>
+                {({defaultChildren}) => {
+                  return (
+                    <Provider
+                      values={[
+                        [IconContext, {
+                          slots: {
+                            icon: {
+                              render: centerBaseline({slot: 'icon', styles: iconCenterWrapper({labelBehavior})}),
+                              styles: icon
+                            }
+                          }
+                        }],
+                        [TextContext, {
+                          slots: {
+                            // Default slot is useful when converting other collections to PickerItems.
+                            [DEFAULT_SLOT]: {
+                              id: valueId,
+                              styles: style({
+                                display: {
+                                  default: 'block',
+                                  labelBehavior: {
+                                    hide: 'none'
+                                  }
+                                },
+                                flexGrow: 1,
+                                truncate: true
+                              })({labelBehavior})
+                            }
+                          }
+                        }],
+                        [InsideSelectValueContext, true]
+                      ]}>
+                      {defaultChildren}
+                    </Provider>
+                  );
+                }}
+              </SelectValue>
+              <ChevronIcon
+                size={size}
+                className={iconStyles} />
+            </Button>
+            <PopoverBase
+              hideArrow
+              offset={menuOffset}
+              placement={`${direction} ${align}` as Placement}
+              shouldFlip={shouldFlip}
+              styles={style({
+                marginStart: -12,
+                minWidth: 192,
+                width: '[calc(var(--trigger-width) + (-2 * self(marginStart)))]'
+              })}>
+              <Provider
+                values={[
+                  [HeaderContext, {styles: sectionHeader({size})}],
+                  [HeadingContext, {styles: sectionHeading}],
+                  [TextContext, {
+                    slots: {
+                      description: {styles: description({size})}
+                    }
+                  }]
+                ]}>
+                <ListBox
+                  items={items}
+                  className={menu}>
+                  {children}
+                </ListBox>
+              </Provider>
+            </PopoverBase>
+          </>
+        )}
+      </AriaSelect>
+      <TabLine isDisabled={props.isDisabled} />
+    </div>
+  );
+}
+/**
+ * Pickers allow users to choose a single option from a collapsible list of options when space is limited.
+ */
+let _Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(Picker);
+export {_Picker as Picker};
+
+
+const selectedIndicator = style({
+  backgroundColor: {
+    default: 'neutral',
+    isDisabled: 'disabled',
+    forcedColors: {
+      default: 'Highlight',
+      isDisabled: 'GrayText'
+    }
+  },
+  height: '[2px]',
+  borderStyle: 'none',
+  borderRadius: 'full',
+  marginTop: '[-2px]',
+  transitionDuration: 130,
+  transitionTimingFunction: 'in-out'
+});
+function TabLine(props) {
+  return <div className={selectedIndicator(props)} />;
+}
+
+
+export interface PickerItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {
+  children: ReactNode
+}
+export function PickerItem(props: PickerItemProps) {
+  let ref = useRef(null);
+  let isLink = props.href != null;
+  const size = 'M';
+  return (
+    <ListBoxItem
+      {...props}
+      ref={ref}
+      textValue={props.textValue || (typeof props.children === 'string' ? props.children as string : undefined)}
+      style={pressScale(ref, props.UNSAFE_style)}
+      className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, size, isLink}, props.styles)}>
+      {(renderProps) => {
+        let {children} = props;
+        return (
+          <DefaultProvider
+            context={IconContext}
+            value={{slots: {
+              icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper({})}), styles: icon}
+            }}}>
+            <DefaultProvider
+              context={TextContext}
+              value={{
+                slots: {
+                  [DEFAULT_SLOT]: {styles: label({size})}
+                }
+              }}>
+              {!isLink && <CheckmarkIcon size={size} className={checkmark({...renderProps, size})} />}
+              {typeof children === 'string' ? <Text>{children}</Text> : children}
+            </DefaultProvider>
+          </DefaultProvider>
+        );
+      }}
+    </ListBoxItem>
+  );
+}
+// A Context.Provider that only sets a value if not inside SelectValue.
+function DefaultProvider({context, value, children}: {context: React.Context<any>, value: any, children: any}) {
+  let inSelectValue = useContext(InsideSelectValueContext);
+  if (inSelectValue) {
+    return children;
+  }
+  return <context.Provider value={value}>{children}</context.Provider>;
+}
diff --git a/packages/@react-spectrum/s2/stories/Tabs.stories.tsx b/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
index 688f4cb3842..4090b671596 100644
--- a/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
@@ -11,6 +11,7 @@
  */
 
 import Bell from '../s2wf-icons/S2_Icon_Bell_20_N.svg';
+import {Collection, Text} from '@react-spectrum/s2';
 import Edit from '../s2wf-icons/S2_Icon_Edit_20_N.svg';
 import Heart from '../s2wf-icons/S2_Icon_Heart_20_N.svg';
 import type {Meta} from '@storybook/react';
@@ -28,66 +29,103 @@ const meta: Meta<typeof Tabs> = {
 
 export default meta;
 
+const tabs = style({width: 'full', height: 'full'});
+
 export const Example = (args: any) => (
-  <Tabs {...args} styles={style({width: 450, height: 256})}>
-    <TabList aria-label="History of Ancient Rome">
-      <Tab id="FoR"><Edit />Founding of Rome</Tab>
-      <Tab id="MaR">Monarchy and Republic</Tab>
-      <Tab id="Emp">Empire</Tab>
-    </TabList>
-    <TabPanel id="FoR" UNSAFE_style={{display: 'flex'}}>
-      <div style={{overflow: 'auto'}}>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non rutrum augue, a dictum est. Sed ultricies vel orci in blandit. Morbi sed tempor leo. Phasellus et sollicitudin nunc, a volutpat est. In volutpat molestie velit, nec rhoncus felis vulputate porttitor. In efficitur nibh tortor, maximus imperdiet libero sollicitudin sed. Pellentesque dictum, quam id scelerisque rutrum, lorem augue suscipit est, nec ultricies ligula lorem id dui. Cras lacus tortor, fringilla nec ligula quis, semper imperdiet ex.</p>
-      </div>
-    </TabPanel>
-    <TabPanel id="MaR" UNSAFE_style={{display: 'flex'}}>
-      <div style={{overflow: 'auto'}}>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut vulputate justo. Suspendisse potenti. Nunc id fringilla leo, at luctus quam. Maecenas et ipsum nisi. Curabitur in porta purus, a pretium est. Fusce eu urna diam. Sed nunc neque, consectetur ut purus nec, consequat elementum libero. Sed ut diam in quam maximus condimentum at non erat. Vestibulum sagittis rutrum velit, vitae suscipit arcu. Nulla ac feugiat ante, vitae laoreet ligula. Maecenas sed molestie ligula. Nulla sed fringilla ex. Nulla viverra tortor at enim condimentum egestas. Nulla sed tristique sapien. Integer ligula quam, vulputate eget mollis eu, interdum sit amet justo.</p>
-        <p>Vivamus dignissim tortor ut sapien congue tristique. Sed ac aliquet mauris. Nulla metus dui, elementum sit amet luctus eu, condimentum id elit. Praesent id nibh sed ligula congue venenatis. Pellentesque urna turpis, eleifend id pellentesque a, auctor nec neque. Vestibulum ipsum mauris, rutrum sit amet magna et, aliquet mollis tellus. Pellentesque nec ultricies nibh, at tempus massa. Phasellus dictum turpis et interdum scelerisque. Aliquam fermentum tincidunt ipsum sit amet suscipit. Fusce non dui sed diam lacinia mattis fermentum eu urna. Cras pretium id nunc in elementum. Mauris laoreet odio vitae laoreet dictum. In non justo nec nunc vehicula posuere non non ligula. Nullam eleifend scelerisque nibh, in sollicitudin tortor ullamcorper vel. Praesent sagittis risus in erat dignissim, non lacinia elit efficitur. Quisque maximus nulla vel luctus pharetra.</p>
-      </div>
-    </TabPanel>
-    <TabPanel id="Emp" UNSAFE_style={{display: 'flex'}}>
-      <div style={{overflow: 'auto'}}>
-        <p>Alea jacta est.</p>
-      </div>
-    </TabPanel>
-  </Tabs>
+  <div className={style({width: 700, maxWidth: '[calc(100vw - 60px)]', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
+    <Tabs {...args} styles={tabs} aria-label="History of Ancient Rome">
+      <TabList>
+        <Tab id="FoR">Founding of Rome</Tab>
+        <Tab id="MaR">Monarchy and Republic</Tab>
+        <Tab id="Emp">Empire</Tab>
+      </TabList>
+      <TabPanel id="FoR">
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non rutrum augue, a dictum est. Sed ultricies vel orci in blandit. Morbi sed tempor leo. Phasellus et sollicitudin nunc, a volutpat est. In volutpat molestie velit, nec rhoncus felis vulputate porttitor. In efficitur nibh tortor, maximus imperdiet libero sollicitudin sed. Pellentesque dictum, quam id scelerisque rutrum, lorem augue suscipit est, nec ultricies ligula lorem id dui. Cras lacus tortor, fringilla nec ligula quis, semper imperdiet ex.</div>
+      </TabPanel>
+      <TabPanel id="MaR">
+        <div>
+          <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut vulputate justo. Suspendisse potenti. Nunc id fringilla leo, at luctus quam. Maecenas et ipsum nisi. Curabitur in porta purus, a pretium est. Fusce eu urna diam. Sed nunc neque, consectetur ut purus nec, consequat elementum libero. Sed ut diam in quam maximus condimentum at non erat. Vestibulum sagittis rutrum velit, vitae suscipit arcu. Nulla ac feugiat ante, vitae laoreet ligula. Maecenas sed molestie ligula. Nulla sed fringilla ex. Nulla viverra tortor at enim condimentum egestas. Nulla sed tristique sapien. Integer ligula quam, vulputate eget mollis eu, interdum sit amet justo.</div>
+          <div>Vivamus dignissim tortor ut sapien congue tristique. Sed ac aliquet mauris. Nulla metus dui, elementum sit amet luctus eu, condimentum id elit. Praesent id nibh sed ligula congue venenatis. Pellentesque urna turpis, eleifend id pellentesque a, auctor nec neque. Vestibulum ipsum mauris, rutrum sit amet magna et, aliquet mollis tellus. Pellentesque nec ultricies nibh, at tempus massa. Phasellus dictum turpis et interdum scelerisque. Aliquam fermentum tincidunt ipsum sit amet suscipit. Fusce non dui sed diam lacinia mattis fermentum eu urna. Cras pretium id nunc in elementum. Mauris laoreet odio vitae laoreet dictum. In non justo nec nunc vehicula posuere non non ligula. Nullam eleifend scelerisque nibh, in sollicitudin tortor ullamcorper vel. Praesent sagittis risus in erat dignissim, non lacinia elit efficitur. Quisque maximus nulla vel luctus pharetra.</div>
+        </div>
+      </TabPanel>
+      <TabPanel id="Emp">
+        <div>Alea jacta est.</div>
+      </TabPanel>
+    </Tabs>
+  </div>
 );
 
 export const Disabled = (args: any) => (
-  <Tabs {...args} styles={style({width: 450, height: 144})} disabledKeys={['FoR', 'MaR', 'Emp']}>
-    <TabList aria-label="History of Ancient Rome">
-      <Tab id="FoR"><Edit />Founding of Rome</Tab>
-      <Tab id="MaR">Monarchy and Republic</Tab>
-      <Tab id="Emp">Empire</Tab>
-    </TabList>
-    <TabPanel id="FoR">
-      Arma virumque cano, Troiae qui primus ab oris.
-    </TabPanel>
-    <TabPanel id="MaR">
-      Senatus Populusque Romanus.
-    </TabPanel>
-    <TabPanel id="Emp">
-      Alea jacta est.
-    </TabPanel>
-  </Tabs>
+  <div className={style({width: 700, maxWidth: '[calc(100vw - 60px)]', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
+    <Tabs {...args} styles={tabs} disabledKeys={['FoR', 'MaR', 'Emp']} aria-label="History of Ancient Rome">
+      <TabList>
+        <Tab id="FoR">Founding of Rome</Tab>
+        <Tab id="MaR">Monarchy and Republic</Tab>
+        <Tab id="Emp">Empire</Tab>
+      </TabList>
+      <TabPanel id="FoR">
+        Arma virumque cano, Troiae qui primus ab oris.
+      </TabPanel>
+      <TabPanel id="MaR">
+        Senatus Populusque Romanus.
+      </TabPanel>
+      <TabPanel id="Emp">
+        Alea jacta est.
+      </TabPanel>
+    </Tabs>
+  </div>
+);
+
+const IconsRender = (props) => (
+  <div className={style({width: 700, maxWidth: '[calc(100vw - 60px)]', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
+    <Tabs {...props} styles={tabs} aria-label="History of Ancient Rome">
+      <TabList>
+        <Tab id="FoR"><Edit /><Text>Founding of Rome</Text></Tab>
+        <Tab id="MaR"><Bell /><Text>Monarchy and Republic</Text></Tab>
+        <Tab id="Emp"><Heart /><Text>Empire</Text></Tab>
+      </TabList>
+      <TabPanel id="FoR">
+        Arma virumque cano, Troiae qui primus ab oris.
+      </TabPanel>
+      <TabPanel id="MaR">
+        Senatus Populusque Romanus.
+      </TabPanel>
+      <TabPanel id="Emp">
+        Alea jacta est.
+      </TabPanel>
+    </Tabs>
+  </div>
 );
 
-export const Icons = (args: any) => (
-  <Tabs {...args} styles={style({width: 208, height: 144})}>
-    <TabList aria-label="History of Ancient Rome">
-      <Tab id="FoR" aria-label="Edit"><Edit /></Tab>
-      <Tab id="MaR" aria-label="Notifications"><Bell /></Tab>
-      <Tab id="Emp" aria-label="Likes"><Heart /></Tab>
-    </TabList>
-    <TabPanel id="FoR">
-      Arma virumque cano, Troiae qui primus ab oris.
-    </TabPanel>
-    <TabPanel id="MaR">
-      Senatus Populusque Romanus.
-    </TabPanel>
-    <TabPanel id="Emp">
-      Alea jacta est.
-    </TabPanel>
-  </Tabs>
+export const Icons = {
+  render: (args) => <IconsRender {...args} />
+};
+
+interface Item {
+  id: number,
+  title: string,
+  description: string
+}
+let items: Item[] = [
+  {id: 1, title: 'Mouse settings', description: 'Adjust the sensitivity and speed of your mouse.'},
+  {id: 2, title: 'Keyboard settings', description: 'Customize the layout and function of your keyboard.'},
+  {id: 3, title: 'Gamepad settings', description: 'Configure the buttons and triggers on your gamepad.'}
+];
+
+export const Dynamic = (args: any) => (
+  <div className={style({width: 700, maxWidth: '[calc(100vw - 60px)]', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
+    <div id="the-label">Hola</div>
+    <Tabs {...args} styles={tabs} disabledKeys={new Set([2])} aria-labelledby="the-label">
+      <TabList items={items}>
+        {item => <Tab>{item.title}</Tab>}
+      </TabList>
+      <Collection items={items}>
+        {item => (
+          <TabPanel>
+            {item.description}
+          </TabPanel>
+      )}
+      </Collection>
+    </Tabs>
+  </div>
 );
diff --git a/packages/react-aria-components/src/ListBox.tsx b/packages/react-aria-components/src/ListBox.tsx
index a5aa2703f8e..926f53bfd98 100644
--- a/packages/react-aria-components/src/ListBox.tsx
+++ b/packages/react-aria-components/src/ListBox.tsx
@@ -13,7 +13,7 @@
 import {AriaListBoxOptions, AriaListBoxProps, DraggableItemResult, DragPreviewRenderer, DroppableCollectionResult, DroppableItemResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing, useHover, useListBox, useListBoxSection, useLocale, useOption} from 'react-aria';
 import {Collection, CollectionBuilder, createBranchComponent, createLeafComponent} from '@react-aria/collections';
 import {CollectionProps, CollectionRendererContext, ItemRenderProps, SectionContext, SectionProps} from './Collection';
-import {ContextValue, Provider, RenderProps, ScrollableProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils';
+import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, ScrollableProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {DragAndDropContext, DropIndicatorContext, DropIndicatorProps, useDndPersistedKeys, useRenderDropIndicator} from './DragAndDrop';
 import {DragAndDropHooks} from './useDragAndDrop';
 import {DraggableCollectionState, DroppableCollectionState, ListState, Node, Orientation, SelectionBehavior, useListState} from 'react-stately';
@@ -398,6 +398,7 @@ export const ListBoxItem = /*#__PURE__*/ createLeafComponent('item', function Li
         values={[
           [TextContext, {
             slots: {
+              [DEFAULT_SLOT]: labelProps,
               label: labelProps,
               description: descriptionProps
             }
diff --git a/packages/react-aria-components/src/Tabs.tsx b/packages/react-aria-components/src/Tabs.tsx
index d8c206eabc3..0f12c0a6140 100644
--- a/packages/react-aria-components/src/Tabs.tsx
+++ b/packages/react-aria-components/src/Tabs.tsx
@@ -255,6 +255,7 @@ export const Tab = /*#__PURE__*/ createLeafComponent('item', (props: TabProps, f
   let renderProps = useRenderProps({
     ...props,
     id: undefined,
+    children: item.rendered,
     defaultClassName: 'react-aria-Tab',
     values: {
       isSelected,
@@ -277,7 +278,9 @@ export const Tab = /*#__PURE__*/ createLeafComponent('item', (props: TabProps, f
       data-focused={isFocused || undefined}
       data-focus-visible={isFocusVisible || undefined}
       data-pressed={isPressed || undefined}
-      data-hovered={isHovered || undefined} />
+      data-hovered={isHovered || undefined}>
+      {renderProps.children}
+    </ElementType>
   );
 });
 
diff --git a/yarn.lock b/yarn.lock
index 898fc94894c..9f0f5ece2f5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7895,6 +7895,7 @@ __metadata:
     "@adobe/spectrum-tokens": "npm:^13.0.0-beta.53"
     "@parcel/macros": "npm:^2.13.0"
     "@react-aria/collections": "npm:3.0.0-alpha.7"
+    "@react-aria/focus": "npm:^3.19.1"
     "@react-aria/i18n": "npm:^3.12.5"
     "@react-aria/interactions": "npm:^3.23.0"
     "@react-aria/live-announcer": "npm:^3.4.1"