From c94318004b5025752884d714ecc62eadff774f93 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Wed, 15 Apr 2026 17:21:40 -0700
Subject: [PATCH 01/11] support icons inside disclosure title

---
 .../@react-spectrum/s2/src/Disclosure.tsx     | 38 +++++++++++++------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/Disclosure.tsx b/packages/@react-spectrum/s2/src/Disclosure.tsx
index cea47ab626d..7e86b652581 100644
--- a/packages/@react-spectrum/s2/src/Disclosure.tsx
+++ b/packages/@react-spectrum/s2/src/Disclosure.tsx
@@ -12,9 +12,9 @@
 
 import {ActionButtonContext} from './ActionButton';
 import {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue, forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
-import {baseColor, centerPadding, focusRing, lightDark, space, style} from '../style' with { type: 'macro' };
+import {baseColor, centerPadding, focusRing, fontRelative, lightDark, space, style} from '../style' with { type: 'macro' };
 import {Button} from 'react-aria-components/Button';
-import {CenterBaseline} from './CenterBaseline';
+import {CenterBaseline, centerBaseline} from './CenterBaseline';
 
 import Chevron from '../ui-icons/Chevron';
 
@@ -29,7 +29,9 @@ import {
 import {filterDOMProps} from 'react-aria/filterDOMProps';
 import {getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {Heading} from 'react-aria-components/Heading';
+import {IconContext} from '@react-spectrum/s2/Icon';
 import React, {createContext, forwardRef, ReactNode, useContext} from 'react';
+import {Text, TextContext} from './Content';
 import {useDOMRef} from './useDOMRef';
 import {useLocale} from 'react-aria/I18nProvider';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -153,12 +155,18 @@ const buttonStyles = style({
     }
   },
   lineHeight: 'ui',
-  display: 'flex',
-  flexGrow: 1,
-  alignItems: 'baseline',
-  paddingX: 'calc(self(minHeight) * 3/8 - 1px)',
+  display: 'grid',
+  gridTemplateAreas: [
+    'expand-button icon label'
+  ],
+  gridTemplateColumns: ['auto', 'auto', 'minmax(0, 1fr)'],
+  alignItems: 'center',
+  '--spacingGap': {
+    type: 'marginEnd',
+    value: 'calc(self(minHeight) * 3/8 - 1px)'
+  },
+  paddingX: '--spacingGap',
   paddingY: centerPadding(),
-  gap: 'calc(self(minHeight) * 3/8 - 1px)',
   minHeight: {
     // compact is equivalent to 'control', but other densities have more padding.
     size: {
@@ -220,8 +228,7 @@ const chevronStyles = style({
   '--iconPrimary': {
     type: 'fill',
     value: 'currentColor'
-  },
-  flexShrink: 0
+  }
 });
 
 const InternalDisclosureHeader = createContext<{} | null>(null);
@@ -288,10 +295,19 @@ export const DisclosureTitle = forwardRef(function DisclosureTitle(props: Disclo
       style={UNSAFE_style}
       className={(UNSAFE_className ?? '') + headingStyle}>
       <Button className={(renderProps) => buttonStyles({...renderProps, size, density, isQuiet})} slot="trigger">
-        <CenterBaseline>
+        <CenterBaseline styles={style({gridArea: 'expand-button', marginEnd: '--spacingGap'})}>
           <Chevron size={size} className={chevronStyles({isExpanded, isRTL})} aria-hidden="true" />
         </CenterBaseline>
-        {props.children}
+        <Provider
+          values={[
+            [IconContext, {
+              render: centerBaseline({slot: 'icon', styles: style({gridArea: 'icon', marginEnd: 'text-to-visual'})}),
+              styles: style({size: fontRelative(16)})
+            }],
+            [TextContext, {styles: style({gridArea: 'label'})}]
+          ]}>
+          {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}
+        </Provider>
       </Button>
     </Heading>
   );

From 2c6035db066a7e44c3b3ea44f52d757f7bd26a67 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Wed, 15 Apr 2026 17:22:00 -0700
Subject: [PATCH 02/11] add story

---
 packages/@react-spectrum/s2/stories/Disclosure.stories.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/@react-spectrum/s2/stories/Disclosure.stories.tsx b/packages/@react-spectrum/s2/stories/Disclosure.stories.tsx
index 2fee9a1a711..124c067acf1 100644
--- a/packages/@react-spectrum/s2/stories/Disclosure.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Disclosure.stories.tsx
@@ -13,10 +13,12 @@
 import {ActionButton} from '../src/ActionButton';
 
 import {Disclosure, DisclosureHeader, DisclosurePanel, DisclosureTitle} from '../src/Disclosure';
+import File from '../s2wf-icons/S2_Icon_File_20_N.svg';
 import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
 import React from 'react';
 import {style} from '../style' with { type: 'macro' };
+import {Text} from '../src/Content';
 
 
 const meta: Meta<typeof Disclosure> = {
@@ -129,7 +131,8 @@ export const WithActionButton: Story = {
         <Disclosure {...args}>
           <DisclosureHeader>
             <DisclosureTitle>
-              Files
+              <File />
+              <Text>Files</Text>
             </DisclosureTitle>
             <ActionButton><NewIcon aria-label="new icon " /></ActionButton>
           </DisclosureHeader>

From 86db471b9373e8be9bbbeed11ee9dd79882d0e32 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Wed, 15 Apr 2026 17:29:07 -0700
Subject: [PATCH 03/11] fix import

---
 packages/@react-spectrum/s2/src/Disclosure.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@react-spectrum/s2/src/Disclosure.tsx b/packages/@react-spectrum/s2/src/Disclosure.tsx
index 7e86b652581..3df53b80110 100644
--- a/packages/@react-spectrum/s2/src/Disclosure.tsx
+++ b/packages/@react-spectrum/s2/src/Disclosure.tsx
@@ -29,7 +29,7 @@ import {
 import {filterDOMProps} from 'react-aria/filterDOMProps';
 import {getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {Heading} from 'react-aria-components/Heading';
-import {IconContext} from '@react-spectrum/s2/Icon';
+import {IconContext} from './Icon';
 import React, {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {Text, TextContext} from './Content';
 import {useDOMRef} from './useDOMRef';

From d2e4856c755005d22c478f5c9caa35c4d7a2cf1a Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Fri, 17 Apr 2026 14:36:59 -0700
Subject: [PATCH 04/11] add icon to more stories

---
 .../@react-spectrum/s2/src/Disclosure.tsx     |  2 +-
 .../s2/stories/Accordion.stories.tsx          | 23 +++++++++++++------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/Disclosure.tsx b/packages/@react-spectrum/s2/src/Disclosure.tsx
index 3df53b80110..38d283335a3 100644
--- a/packages/@react-spectrum/s2/src/Disclosure.tsx
+++ b/packages/@react-spectrum/s2/src/Disclosure.tsx
@@ -160,7 +160,7 @@ const buttonStyles = style({
     'expand-button icon label'
   ],
   gridTemplateColumns: ['auto', 'auto', 'minmax(0, 1fr)'],
-  alignItems: 'center',
+  alignItems: 'baseline',
   '--spacingGap': {
     type: 'marginEnd',
     value: 'calc(self(minHeight) * 3/8 - 1px)'
diff --git a/packages/@react-spectrum/s2/stories/Accordion.stories.tsx b/packages/@react-spectrum/s2/stories/Accordion.stories.tsx
index 7343a212588..f9539474578 100644
--- a/packages/@react-spectrum/s2/stories/Accordion.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Accordion.stories.tsx
@@ -19,11 +19,13 @@ import {
 } from '../src/Accordion';
 
 import {ActionButton} from '../src/ActionButton';
+import File from '../s2wf-icons/S2_Icon_File_20_N.svg';
 import {Key} from '@react-types/shared';
 import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
 import React from 'react';
 import {style} from '../style' with { type: 'macro' };
+import {Text} from '../src/Content';
 import {TextField} from '../src/TextField';
 
 
@@ -49,7 +51,8 @@ export const Example: Story = {
         <Accordion {...args}>
           <AccordionItem id="files">
             <AccordionItemTitle>
-              Files
+              <File />
+              <Text>Files</Text>
             </AccordionItemTitle>
             <AccordionItemPanel>
               Files content
@@ -57,7 +60,8 @@ export const Example: Story = {
           </AccordionItem>
           <AccordionItem id="people">
             <AccordionItemTitle>
-              People
+              <File />
+              <Text>People</Text>
             </AccordionItemTitle>
             <AccordionItemPanel>
               <TextField label="Name" styles={style({maxWidth: 176})} placeholder="Enter your name" />
@@ -76,7 +80,8 @@ export const WithLongTitle: Story = {
         <Accordion styles={style({maxWidth: 224})} {...args}>
           <AccordionItem>
             <AccordionItemTitle>
-              Files
+              <File />
+              <Text>Files</Text>
             </AccordionItemTitle>
             <AccordionItemPanel>
               Files content
@@ -84,7 +89,8 @@ export const WithLongTitle: Story = {
           </AccordionItem>
           <AccordionItem>
             <AccordionItemTitle>
-              People
+              <File />
+              <Text>People</Text>
             </AccordionItemTitle>
             <AccordionItemPanel>
               People content
@@ -92,7 +98,8 @@ export const WithLongTitle: Story = {
           </AccordionItem>
           <AccordionItem>
             <AccordionItemTitle>
-              Very very very very very long title that wraps
+              <File />
+              <Text>Very very very very very long title that wraps</Text>
             </AccordionItemTitle>
             <AccordionItemPanel>
               Accordion content
@@ -224,7 +231,8 @@ export const WithActionButton: Story = {
           <AccordionItem id="files">
             <AccordionItemHeader>
               <AccordionItemTitle>
-                Files
+                <File />
+                <Text>Files</Text>
               </AccordionItemTitle>
               <ActionButton aria-label="Add new file"><NewIcon /></ActionButton>
             </AccordionItemHeader>
@@ -235,7 +243,8 @@ export const WithActionButton: Story = {
           <AccordionItem id="people">
             <AccordionItemHeader>
               <AccordionItemTitle>
-                People
+                <File />
+                <Text>People</Text>
               </AccordionItemTitle>
               <ActionButton aria-label="Add new person"><NewIcon /></ActionButton>
             </AccordionItemHeader>

From 20fb8e71100b0d44ce88f6dd849d202146e02ecf Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Wed, 6 May 2026 15:54:41 -0700
Subject: [PATCH 05/11] add docs

---
 packages/dev/s2-docs/pages/s2/Accordion.mdx  | 36 ++++++++++++++++++++
 packages/dev/s2-docs/pages/s2/Disclosure.mdx | 26 ++++++++++++++
 2 files changed, 62 insertions(+)

diff --git a/packages/dev/s2-docs/pages/s2/Accordion.mdx b/packages/dev/s2-docs/pages/s2/Accordion.mdx
index 803e70e6edd..1e52021404b 100644
--- a/packages/dev/s2-docs/pages/s2/Accordion.mdx
+++ b/packages/dev/s2-docs/pages/s2/Accordion.mdx
@@ -91,6 +91,42 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 </Accordion>
 ```
 
+### Slots
+
+`AccordionItemTitle` supports icons, `Text` as children.
+
+```tsx render
+"use client";
+import {Accordion, AccordionItem, AccordionItemTitle, AccordionItemPanel, AccordionItemHeader, Text} from '@react-spectrum/s2/Accordion';
+import {ActionButton} from '@react-spectrum/s2/ActionButton';
+import Project from '@react-spectrum/s2/icons/Project';
+import Settings from '@react-spectrum/s2/icons/Settings';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+<Accordion>
+  <AccordionItem styles={style({width: 250})}>
+    <AccordionItemHeader>
+      {/*- begin highlight -*/}
+      <AccordionItemTitle>
+        <Project />
+        <Text>Project Settings</Text>
+      </AccordionItemTitle>
+      {/*- end highlight -*/}
+    </AccordionItemHeader>
+    <AccordionItemPanel>
+      Configure your project settings including name, description, and permissions.
+    </AccordionItemPanel>
+  </AccordionItem>
+  <AccordionItem id="preferences">
+    <AccordionItemTitle>
+      <Settings />
+      <Text>Preferences</Text>
+    </AccordionItemTitle>
+    <AccordionItemPanel>User preferences content</AccordionItemPanel>
+  </AccordionItem>
+</Accordion>
+```
+
 ## API
 
 ```tsx links={{Accordion: '#accordion', AccordionItem: '#accordionitem', AccordionItemHeader: '#accordionitemheader', AccordionItemTitle: '#accordionitemtitle', AccordionItemPanel: '#accordionitempanel'}}
diff --git a/packages/dev/s2-docs/pages/s2/Disclosure.mdx b/packages/dev/s2-docs/pages/s2/Disclosure.mdx
index 1651edcc993..ae403e16d9a 100644
--- a/packages/dev/s2-docs/pages/s2/Disclosure.mdx
+++ b/packages/dev/s2-docs/pages/s2/Disclosure.mdx
@@ -73,6 +73,32 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 </Disclosure>
 ```
 
+### Slots
+
+`DisclosureTitle` supports icons, `Text` as children.
+
+```tsx render
+"use client"
+
+import {Disclosure, DisclosureTitle, DisclosurePanel, DisclosureHeader, Text} from '@react-spectrum/s2/Disclosure';
+import Project from '@react-spectrum/s2/icons/Project';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+<Disclosure styles={style({width: 250})}>
+  <DisclosureHeader>
+    {/*- begin highlight -*/}
+    <DisclosureTitle>
+      <Project />
+      <Text>Project Settings</Text>
+    </DisclosureTitle>
+    {/*- end highlight -*/}
+  </DisclosureHeader>
+  <DisclosurePanel>
+    Configure your project settings including name, description, and permissions.
+  </DisclosurePanel>
+</Disclosure>
+```
+
 ## API
 
 ```tsx links={{Disclosure: '#disclosure', DisclosureHeader: '#disclosureheader', DisclosureTitle: '#disclosuretitle', DisclosurePanel: '#disclosurepanel'}}

From 425fa53e2741d919629806c199c2ca9275cc435b Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Wed, 6 May 2026 15:54:56 -0700
Subject: [PATCH 06/11] cleanup stories

---
 .../s2/chromatic/Accordion.stories.tsx        | 32 +++++++++++++++++++
 .../s2/chromatic/Disclosure.stories.tsx       | 20 ++++++++++++
 2 files changed, 52 insertions(+)

diff --git a/packages/@react-spectrum/s2/chromatic/Accordion.stories.tsx b/packages/@react-spectrum/s2/chromatic/Accordion.stories.tsx
index 1adadda01b8..b40a43e2448 100644
--- a/packages/@react-spectrum/s2/chromatic/Accordion.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Accordion.stories.tsx
@@ -19,10 +19,13 @@ import {
 } from '../src/Accordion';
 
 import {ActionButton} from '../src/ActionButton';
+import File from '../s2wf-icons/S2_Icon_File_20_N.svg';
 import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
+import People from '../s2wf-icons/S2_Icon_People_20_N.svg';
 import React from 'react';
 import {style} from '../style/spectrum-theme' with { type: 'macro' };
+import {Text} from '../src/Content';
 import {TextField} from '../src/TextField';
 
 const meta: Meta<typeof Accordion> = {
@@ -169,3 +172,32 @@ export const WithActionButton: Story = {
     );
   }
 };
+
+export const WithIcon: Story = {
+  render: (args) => {
+    return (
+      <div className={style({minHeight: 240})}>
+        <Accordion {...args}>
+          <AccordionItem id="files">
+            <AccordionItemTitle>
+              <File />
+              <Text>Files</Text>
+            </AccordionItemTitle>
+            <AccordionItemPanel>
+              Files content
+            </AccordionItemPanel>
+          </AccordionItem>
+          <AccordionItem id="people">
+            <AccordionItemTitle>
+              <People />
+              <Text>People</Text>
+            </AccordionItemTitle>
+            <AccordionItemPanel>
+              <TextField label="Name" styles={style({maxWidth: 176})} placeholder="Enter your name" />
+            </AccordionItemPanel>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    );
+  }
+};
diff --git a/packages/@react-spectrum/s2/chromatic/Disclosure.stories.tsx b/packages/@react-spectrum/s2/chromatic/Disclosure.stories.tsx
index 09a5e91a8be..43aa72e20b1 100644
--- a/packages/@react-spectrum/s2/chromatic/Disclosure.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Disclosure.stories.tsx
@@ -13,10 +13,12 @@
 import {ActionButton} from '../src/ActionButton';
 
 import {Disclosure, DisclosureHeader, DisclosurePanel, DisclosureTitle} from '../src/Disclosure';
+import File from '../s2wf-icons/S2_Icon_File_20_N.svg';
 import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
 import React from 'react';
 import {style} from '../style/spectrum-theme' with { type: 'macro' };
+import {Text} from '../src/Content';
 
 const meta: Meta<typeof Disclosure> = {
   component: Disclosure,
@@ -87,3 +89,21 @@ export const WithActionButton: Story = {
     );
   }
 };
+
+export const WithIcon: Story = {
+  render: (args) => {
+    return (
+      <div className={style({minHeight: 240})}>
+        <Disclosure {...args}>
+          <DisclosureTitle>
+            <File />
+            <Text>Files</Text>
+          </DisclosureTitle>
+          <DisclosurePanel>
+            Files content
+          </DisclosurePanel>
+        </Disclosure>
+      </div>
+    );
+  }
+};

From f729c1ef977c1b2cffa6e139e2fd4d7d4511fce8 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Wed, 6 May 2026 15:55:17 -0700
Subject: [PATCH 07/11] more stories

---
 .../s2/stories/Accordion.stories.tsx          | 50 ++++++++++++++-----
 .../s2/stories/Disclosure.stories.tsx         | 21 +++++++-
 2 files changed, 56 insertions(+), 15 deletions(-)

diff --git a/packages/@react-spectrum/s2/stories/Accordion.stories.tsx b/packages/@react-spectrum/s2/stories/Accordion.stories.tsx
index f9539474578..bd2c0b56051 100644
--- a/packages/@react-spectrum/s2/stories/Accordion.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Accordion.stories.tsx
@@ -23,6 +23,7 @@ import File from '../s2wf-icons/S2_Icon_File_20_N.svg';
 import {Key} from '@react-types/shared';
 import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
+import People from '../s2wf-icons/S2_Icon_People_20_N.svg';
 import React from 'react';
 import {style} from '../style' with { type: 'macro' };
 import {Text} from '../src/Content';
@@ -51,8 +52,7 @@ export const Example: Story = {
         <Accordion {...args}>
           <AccordionItem id="files">
             <AccordionItemTitle>
-              <File />
-              <Text>Files</Text>
+              Files
             </AccordionItemTitle>
             <AccordionItemPanel>
               Files content
@@ -60,8 +60,7 @@ export const Example: Story = {
           </AccordionItem>
           <AccordionItem id="people">
             <AccordionItemTitle>
-              <File />
-              <Text>People</Text>
+              People
             </AccordionItemTitle>
             <AccordionItemPanel>
               <TextField label="Name" styles={style({maxWidth: 176})} placeholder="Enter your name" />
@@ -80,8 +79,7 @@ export const WithLongTitle: Story = {
         <Accordion styles={style({maxWidth: 224})} {...args}>
           <AccordionItem>
             <AccordionItemTitle>
-              <File />
-              <Text>Files</Text>
+              Files
             </AccordionItemTitle>
             <AccordionItemPanel>
               Files content
@@ -89,8 +87,7 @@ export const WithLongTitle: Story = {
           </AccordionItem>
           <AccordionItem>
             <AccordionItemTitle>
-              <File />
-              <Text>People</Text>
+              People
             </AccordionItemTitle>
             <AccordionItemPanel>
               People content
@@ -98,8 +95,7 @@ export const WithLongTitle: Story = {
           </AccordionItem>
           <AccordionItem>
             <AccordionItemTitle>
-              <File />
-              <Text>Very very very very very long title that wraps</Text>
+              Very very very very very long title that wraps
             </AccordionItemTitle>
             <AccordionItemPanel>
               Accordion content
@@ -232,7 +228,7 @@ export const WithActionButton: Story = {
             <AccordionItemHeader>
               <AccordionItemTitle>
                 <File />
-                <Text>Files</Text>
+                Files
               </AccordionItemTitle>
               <ActionButton aria-label="Add new file"><NewIcon /></ActionButton>
             </AccordionItemHeader>
@@ -243,8 +239,7 @@ export const WithActionButton: Story = {
           <AccordionItem id="people">
             <AccordionItemHeader>
               <AccordionItemTitle>
-                <File />
-                <Text>People</Text>
+                People
               </AccordionItemTitle>
               <ActionButton aria-label="Add new person"><NewIcon /></ActionButton>
             </AccordionItemHeader>
@@ -257,3 +252,32 @@ export const WithActionButton: Story = {
     );
   }
 };
+
+export const WithIcon: Story = {
+  render: (args) => {
+    return (
+      <div className={style({minHeight: 240})}>
+        <Accordion {...args}>
+          <AccordionItem id="files">
+            <AccordionItemTitle>
+              <File />
+              <Text>Files</Text>
+            </AccordionItemTitle>
+            <AccordionItemPanel>
+              Files content
+            </AccordionItemPanel>
+          </AccordionItem>
+          <AccordionItem id="people">
+            <AccordionItemTitle>
+              <People />
+              <Text>People</Text>
+            </AccordionItemTitle>
+            <AccordionItemPanel>
+              <TextField label="Name" styles={style({maxWidth: 176})} placeholder="Enter your name" />
+            </AccordionItemPanel>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    );
+  }
+};
diff --git a/packages/@react-spectrum/s2/stories/Disclosure.stories.tsx b/packages/@react-spectrum/s2/stories/Disclosure.stories.tsx
index 124c067acf1..54805962ef3 100644
--- a/packages/@react-spectrum/s2/stories/Disclosure.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Disclosure.stories.tsx
@@ -131,8 +131,7 @@ export const WithActionButton: Story = {
         <Disclosure {...args}>
           <DisclosureHeader>
             <DisclosureTitle>
-              <File />
-              <Text>Files</Text>
+              Files
             </DisclosureTitle>
             <ActionButton><NewIcon aria-label="new icon " /></ActionButton>
           </DisclosureHeader>
@@ -145,3 +144,21 @@ export const WithActionButton: Story = {
   }
 };
 
+export const WithIcon: Story = {
+  render: (args) => {
+    return (
+      <div className={style({minHeight: 240})}>
+        <Disclosure {...args}>
+          <DisclosureTitle>
+            <File />
+            <Text>Files</Text>
+          </DisclosureTitle>
+          <DisclosurePanel>
+            Files content
+          </DisclosurePanel>
+        </Disclosure>
+      </div>
+    );
+  }
+};
+

From 5c134e7199920df85a174aa2972ef70549f7eae1 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Wed, 6 May 2026 15:55:26 -0700
Subject: [PATCH 08/11] export text

---
 packages/@react-spectrum/s2/exports/Accordion.ts  | 2 ++
 packages/@react-spectrum/s2/exports/Disclosure.ts | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/packages/@react-spectrum/s2/exports/Accordion.ts b/packages/@react-spectrum/s2/exports/Accordion.ts
index d89962ba323..b3f6f4c4f42 100644
--- a/packages/@react-spectrum/s2/exports/Accordion.ts
+++ b/packages/@react-spectrum/s2/exports/Accordion.ts
@@ -1,3 +1,5 @@
 export {Accordion, AccordionContext, AccordionItem, AccordionItemHeader, AccordionItemTitle, AccordionItemPanel} from '../src/Accordion';
 export type {AccordionProps, AccordionItemProps, AccordionItemHeaderProps, AccordionItemTitleProps, AccordionItemPanelProps, AccordionItemState, AccordionItemRenderProps} from '../src/Accordion';
 export type {Key} from '@react-types/shared';
+
+export {Text} from '../src/Content';
diff --git a/packages/@react-spectrum/s2/exports/Disclosure.ts b/packages/@react-spectrum/s2/exports/Disclosure.ts
index 1c14e5b3e38..7035b7fdb22 100644
--- a/packages/@react-spectrum/s2/exports/Disclosure.ts
+++ b/packages/@react-spectrum/s2/exports/Disclosure.ts
@@ -1,2 +1,4 @@
 export {DisclosureHeader, Disclosure, DisclosurePanel, DisclosureContext, DisclosureTitle} from '../src/Disclosure';
 export type {DisclosureProps, DisclosurePanelProps} from '../src/Disclosure';
+
+export {Text} from '../src/Content';

From e96cee985a05dfcc6bbb3fa86f07f2f194bd42b0 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Wed, 6 May 2026 15:55:33 -0700
Subject: [PATCH 09/11] fix disabled icon

---
 packages/@react-spectrum/s2/src/Disclosure.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@react-spectrum/s2/src/Disclosure.tsx b/packages/@react-spectrum/s2/src/Disclosure.tsx
index 38d283335a3..2bf29801079 100644
--- a/packages/@react-spectrum/s2/src/Disclosure.tsx
+++ b/packages/@react-spectrum/s2/src/Disclosure.tsx
@@ -301,7 +301,7 @@ export const DisclosureTitle = forwardRef(function DisclosureTitle(props: Disclo
         <Provider
           values={[
             [IconContext, {
-              render: centerBaseline({slot: 'icon', styles: style({gridArea: 'icon', marginEnd: 'text-to-visual'})}),
+              render: centerBaseline({slot: 'icon', styles: style({gridArea: 'icon', marginEnd: 'text-to-visual', '--iconPrimary': {type: 'fill', value: 'currentColor'}})}),
               styles: style({size: fontRelative(16)})
             }],
             [TextContext, {styles: style({gridArea: 'label'})}]

From ae69bf4f7b1f3b45aaf5eef49407e1737c78ec73 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Wed, 6 May 2026 15:58:17 -0700
Subject: [PATCH 10/11] fix typecheck docs

---
 packages/dev/s2-docs/pages/s2/Accordion.mdx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/dev/s2-docs/pages/s2/Accordion.mdx b/packages/dev/s2-docs/pages/s2/Accordion.mdx
index 1e52021404b..160058c30ff 100644
--- a/packages/dev/s2-docs/pages/s2/Accordion.mdx
+++ b/packages/dev/s2-docs/pages/s2/Accordion.mdx
@@ -98,7 +98,6 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 ```tsx render
 "use client";
 import {Accordion, AccordionItem, AccordionItemTitle, AccordionItemPanel, AccordionItemHeader, Text} from '@react-spectrum/s2/Accordion';
-import {ActionButton} from '@react-spectrum/s2/ActionButton';
 import Project from '@react-spectrum/s2/icons/Project';
 import Settings from '@react-spectrum/s2/icons/Settings';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

From 0d182c25c7a94f4060bf1bda0db5f22bcfa719b2 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Fri, 8 May 2026 16:17:29 -0700
Subject: [PATCH 11/11] format

---
 .../s2/chromatic/Accordion.stories.tsx        | 14 ++++++-----
 .../s2/chromatic/Disclosure.stories.tsx       |  8 +++---
 .../@react-spectrum/s2/src/Disclosure.tsx     | 25 +++++++++++++------
 .../s2/stories/Accordion.stories.tsx          | 18 +++++++------
 .../s2/stories/Disclosure.stories.tsx         | 10 +++-----
 5 files changed, 42 insertions(+), 33 deletions(-)

diff --git a/packages/@react-spectrum/s2/chromatic/Accordion.stories.tsx b/packages/@react-spectrum/s2/chromatic/Accordion.stories.tsx
index fd32a6f4cf9..bf0231a515c 100644
--- a/packages/@react-spectrum/s2/chromatic/Accordion.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Accordion.stories.tsx
@@ -24,7 +24,7 @@ import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
 import People from '../s2wf-icons/S2_Icon_People_20_N.svg';
 import React from 'react';
-import {style} from '../style/spectrum-theme' with { type: 'macro' };
+import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import {Text} from '../src/Content';
 import {TextField} from '../src/TextField';
 
@@ -156,7 +156,7 @@ export const WithActionButton: Story = {
 };
 
 export const WithIcon: Story = {
-  render: (args) => {
+  render: args => {
     return (
       <div className={style({minHeight: 240})}>
         <Accordion {...args}>
@@ -165,9 +165,7 @@ export const WithIcon: Story = {
               <File />
               <Text>Files</Text>
             </AccordionItemTitle>
-            <AccordionItemPanel>
-              Files content
-            </AccordionItemPanel>
+            <AccordionItemPanel>Files content</AccordionItemPanel>
           </AccordionItem>
           <AccordionItem id="people">
             <AccordionItemTitle>
@@ -175,7 +173,11 @@ export const WithIcon: Story = {
               <Text>People</Text>
             </AccordionItemTitle>
             <AccordionItemPanel>
-              <TextField label="Name" styles={style({maxWidth: 176})} placeholder="Enter your name" />
+              <TextField
+                label="Name"
+                styles={style({maxWidth: 176})}
+                placeholder="Enter your name"
+              />
             </AccordionItemPanel>
           </AccordionItem>
         </Accordion>
diff --git a/packages/@react-spectrum/s2/chromatic/Disclosure.stories.tsx b/packages/@react-spectrum/s2/chromatic/Disclosure.stories.tsx
index 891c1d639c7..c5177cdc95f 100644
--- a/packages/@react-spectrum/s2/chromatic/Disclosure.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Disclosure.stories.tsx
@@ -17,7 +17,7 @@ import File from '../s2wf-icons/S2_Icon_File_20_N.svg';
 import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
 import React from 'react';
-import {style} from '../style/spectrum-theme' with { type: 'macro' };
+import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import {Text} from '../src/Content';
 
 const meta: Meta<typeof Disclosure> = {
@@ -81,7 +81,7 @@ export const WithActionButton: Story = {
 };
 
 export const WithIcon: Story = {
-  render: (args) => {
+  render: args => {
     return (
       <div className={style({minHeight: 240})}>
         <Disclosure {...args}>
@@ -89,9 +89,7 @@ export const WithIcon: Story = {
             <File />
             <Text>Files</Text>
           </DisclosureTitle>
-          <DisclosurePanel>
-            Files content
-          </DisclosurePanel>
+          <DisclosurePanel>Files content</DisclosurePanel>
         </Disclosure>
       </div>
     );
diff --git a/packages/@react-spectrum/s2/src/Disclosure.tsx b/packages/@react-spectrum/s2/src/Disclosure.tsx
index f1c7ca7f7f8..27a54dd8ae9 100644
--- a/packages/@react-spectrum/s2/src/Disclosure.tsx
+++ b/packages/@react-spectrum/s2/src/Disclosure.tsx
@@ -23,6 +23,7 @@ import {
   baseColor,
   centerPadding,
   focusRing,
+  fontRelative,
   lightDark,
   space,
   style
@@ -174,9 +175,7 @@ const buttonStyles = style({
   },
   lineHeight: 'ui',
   display: 'grid',
-  gridTemplateAreas: [
-    'expand-button icon label'
-  ],
+  gridTemplateAreas: ['expand-button icon label'],
   gridTemplateColumns: ['auto', 'auto', 'minmax(0, 1fr)'],
   alignItems: 'baseline',
   '--spacingGap': {
@@ -311,17 +310,27 @@ export const DisclosureTitle = forwardRef(function DisclosureTitle(
       style={UNSAFE_style}
       className={(UNSAFE_className ?? '') + headingStyle}>
       <Button
-        className={(renderProps) => buttonStyles({...renderProps, size, density, isQuiet})}
+        className={renderProps => buttonStyles({...renderProps, size, density, isQuiet})}
         slot="trigger">
         <CenterBaseline styles={style({gridArea: 'expand-button', marginEnd: '--spacingGap'})}>
           <Chevron size={size} className={chevronStyles({isExpanded, isRTL})} aria-hidden="true" />
         </CenterBaseline>
         <Provider
           values={[
-            [IconContext, {
-              render: centerBaseline({slot: 'icon', styles: style({gridArea: 'icon', marginEnd: 'text-to-visual', '--iconPrimary': {type: 'fill', value: 'currentColor'}})}),
-              styles: style({size: fontRelative(16)})
-            }],
+            [
+              IconContext,
+              {
+                render: centerBaseline({
+                  slot: 'icon',
+                  styles: style({
+                    gridArea: 'icon',
+                    marginEnd: 'text-to-visual',
+                    '--iconPrimary': {type: 'fill', value: 'currentColor'}
+                  })
+                }),
+                styles: style({size: fontRelative(16)})
+              }
+            ],
             [TextContext, {styles: style({gridArea: 'label'})}]
           ]}>
           {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}
diff --git a/packages/@react-spectrum/s2/stories/Accordion.stories.tsx b/packages/@react-spectrum/s2/stories/Accordion.stories.tsx
index dad13933f37..60c84e04573 100644
--- a/packages/@react-spectrum/s2/stories/Accordion.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Accordion.stories.tsx
@@ -25,7 +25,7 @@ import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
 import People from '../s2wf-icons/S2_Icon_People_20_N.svg';
 import React from 'react';
-import {style} from '../style' with { type: 'macro' };
+import {style} from '../style' with {type: 'macro'};
 import {Text} from '../src/Content';
 import {TextField} from '../src/TextField';
 
@@ -192,7 +192,9 @@ export const WithActionButton: Story = {
                 <File />
                 Files
               </AccordionItemTitle>
-              <ActionButton aria-label="Add new file"><NewIcon /></ActionButton>
+              <ActionButton aria-label="Add new file">
+                <NewIcon />
+              </ActionButton>
             </AccordionItemHeader>
             <AccordionItemPanel>Files content</AccordionItemPanel>
           </AccordionItem>
@@ -218,7 +220,7 @@ export const WithActionButton: Story = {
 };
 
 export const WithIcon: Story = {
-  render: (args) => {
+  render: args => {
     return (
       <div className={style({minHeight: 240})}>
         <Accordion {...args}>
@@ -227,9 +229,7 @@ export const WithIcon: Story = {
               <File />
               <Text>Files</Text>
             </AccordionItemTitle>
-            <AccordionItemPanel>
-              Files content
-            </AccordionItemPanel>
+            <AccordionItemPanel>Files content</AccordionItemPanel>
           </AccordionItem>
           <AccordionItem id="people">
             <AccordionItemTitle>
@@ -237,7 +237,11 @@ export const WithIcon: Story = {
               <Text>People</Text>
             </AccordionItemTitle>
             <AccordionItemPanel>
-              <TextField label="Name" styles={style({maxWidth: 176})} placeholder="Enter your name" />
+              <TextField
+                label="Name"
+                styles={style({maxWidth: 176})}
+                placeholder="Enter your name"
+              />
             </AccordionItemPanel>
           </AccordionItem>
         </Accordion>
diff --git a/packages/@react-spectrum/s2/stories/Disclosure.stories.tsx b/packages/@react-spectrum/s2/stories/Disclosure.stories.tsx
index b56ce6f74fa..a42a1039e7d 100644
--- a/packages/@react-spectrum/s2/stories/Disclosure.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Disclosure.stories.tsx
@@ -17,10 +17,9 @@ import File from '../s2wf-icons/S2_Icon_File_20_N.svg';
 import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
 import React from 'react';
-import {style} from '../style' with { type: 'macro' };
+import {style} from '../style' with {type: 'macro'};
 import {Text} from '../src/Content';
 
-
 const meta: Meta<typeof Disclosure> = {
   component: Disclosure,
   parameters: {
@@ -126,7 +125,7 @@ export const WithActionButton: Story = {
 };
 
 export const WithIcon: Story = {
-  render: (args) => {
+  render: args => {
     return (
       <div className={style({minHeight: 240})}>
         <Disclosure {...args}>
@@ -134,12 +133,9 @@ export const WithIcon: Story = {
             <File />
             <Text>Files</Text>
           </DisclosureTitle>
-          <DisclosurePanel>
-            Files content
-          </DisclosurePanel>
+          <DisclosurePanel>Files content</DisclosurePanel>
         </Disclosure>
       </div>
     );
   }
 };
-