From 92902b719ddfde86269ee65796136968c34a7810 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Thu, 26 Feb 2026 16:48:52 -0600
Subject: [PATCH 1/6] feat(S2): add ActionBar support to TreeView (#9695)

* add ActionBar support to TreeView

* conditionally render wrapper if action bar is provided
---
 packages/@react-spectrum/s2/src/TreeView.tsx  |  49 ++++-
 .../s2/stories/TreeView.stories.tsx           | 167 ++++++++++++++++++
 packages/dev/s2-docs/pages/s2/TreeView.mdx    |  31 +++-
 3 files changed, 236 insertions(+), 11 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/TreeView.tsx b/packages/@react-spectrum/s2/src/TreeView.tsx
index f0a167192c0..94f331a0fdd 100644
--- a/packages/@react-spectrum/s2/src/TreeView.tsx
+++ b/packages/@react-spectrum/s2/src/TreeView.tsx
@@ -41,13 +41,16 @@ import {ProgressCircle} from './ProgressCircle';
 import {raw} from '../style/style-macro' with {type: 'macro'};
 import React, {createContext, forwardRef, JSXElementConstructor, ReactElement, ReactNode, useRef} from 'react';
 import {Text, TextContext} from './Content';
+import {useActionBarContainer} from './ActionBar';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useLocale, useLocalizedStringFormatter} from 'react-aria';
 import {useScale} from './utils';
 
 interface S2TreeProps {
   /** Handler that is called when a user performs an action on a row. */
-  onAction?: (key: Key) => void
+  onAction?: (key: Key) => void,
+  /** Provides the ActionBar to display when items are selected in the TreeView. */
+  renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement
 }
 
 export interface TreeViewProps<T> extends Omit<RACTreeProps<T>, 'style' | 'className' | 'render' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks' | keyof GlobalDOMAttributes>, UnsafeStyles, S2TreeProps {
@@ -71,6 +74,16 @@ interface TreeRendererContextValue {
 const TreeRendererContext = createContext<TreeRendererContextValue>({});
 
 
+const treeViewWrapper = style({
+  minHeight: 0,
+  minWidth: 0,
+  display: 'flex',
+  isolation: 'isolate',
+  disableTapHighlight: true,
+  position: 'relative',
+  overflow: 'clip'
+}, getAllowedOverrides({height: true}));
+
 // TODO: the below is needed so the borders of the top and bottom row isn't cut off if the TreeView is wrapped within a container by always reserving the 2px needed for the
 // keyboard focus ring. Perhaps find a different way of rendering the outlines since the top of the item doesn't
 // scroll into view due to how the ring is offset. Alternatively, have the tree render the top/bottom outline like it does in Listview
@@ -94,7 +107,7 @@ const tree = style({
     type: 'width',
     value: 16
   }
-}, getAllowedOverrides({height: true}));
+});
 
 /**
  * A tree view provides users with a way to navigate nested hierarchical information.
@@ -109,8 +122,11 @@ export const TreeView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tr
   }
 
   let domRef = useDOMRef(ref);
+  let scrollRef = useRef<HTMLElement | null>(null);
 
-  return (
+  let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({...props, scrollRef});
+
+  let treeContent = (
     <Virtualizer
       layout={ListLayout}
       layoutOptions={{
@@ -119,15 +135,36 @@ export const TreeView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tr
       <TreeRendererContext.Provider value={{renderer}}>
         <Tree
           {...props}
-          style={UNSAFE_style}
-          className={renderProps => (UNSAFE_className ?? '') + tree({...renderProps}, props.styles)}
+          style={{
+            ...(!props.renderActionBar ? UNSAFE_style : {}),
+            paddingBottom: actionBarHeight > 0 ? actionBarHeight + 8 : 0,
+            scrollPaddingBottom: actionBarHeight > 0 ? actionBarHeight + 8 : 0
+          }}
+          className={renderProps => (!props.renderActionBar ? (UNSAFE_className ?? '') : '') + tree({...renderProps})}
           selectionBehavior="toggle"
-          ref={domRef}>
+          selectedKeys={selectedKeys}
+          defaultSelectedKeys={undefined}
+          onSelectionChange={onSelectionChange}
+          ref={props.renderActionBar ? (scrollRef as any) : domRef}>
           {props.children}
         </Tree>
       </TreeRendererContext.Provider>
     </Virtualizer>
   );
+
+  if (props.renderActionBar) {
+    return (
+      <div
+        ref={domRef}
+        className={(UNSAFE_className ?? '') + treeViewWrapper(null, props.styles)}
+        style={UNSAFE_style}>
+        {treeContent}
+        {actionBar}
+      </div>
+    );
+  }
+
+  return treeContent;
 });
 
 const rowBackgroundColor = {
diff --git a/packages/@react-spectrum/s2/stories/TreeView.stories.tsx b/packages/@react-spectrum/s2/stories/TreeView.stories.tsx
index 927287ae694..35d098674a1 100644
--- a/packages/@react-spectrum/s2/stories/TreeView.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/TreeView.stories.tsx
@@ -12,6 +12,8 @@
 
 import {action} from 'storybook/actions';
 import {
+  ActionBar,
+  ActionButton,
   ActionMenu,
   Collection,
   Content,
@@ -29,13 +31,16 @@ import {
   TreeViewProps
 } from '../src';
 import {categorizeArgTypes, getActionArgs} from './utils';
+import Copy from '../s2wf-icons/S2_Icon_Copy_20_N.svg';
 import Delete from '../s2wf-icons/S2_Icon_Delete_20_N.svg';
 import Edit from '../s2wf-icons/S2_Icon_Edit_20_N.svg';
 import FileTxt from '../s2wf-icons/S2_Icon_FileText_20_N.svg';
 import Folder from '../s2wf-icons/S2_Icon_Folder_20_N.svg';
 import FolderOpen from '../spectrum-illustrations/linear/FolderOpen';
+import {Key} from 'react-aria';
 import type {Meta, StoryObj} from '@storybook/react';
 import React, {ReactElement, useCallback, useState} from 'react';
+import {style} from '../style' with {type: 'macro'};
 import {useAsyncList, useListData} from 'react-stately';
 
 let onActionFunc = action('onAction');
@@ -759,3 +764,165 @@ const DynamicTreeItem = (props: Omit<TreeViewItemProps, 'children'> & TreeViewIt
     }
   }
 };
+
+function ActionBarExample(args: TreeViewProps<any>) {
+  let [selectedKeys, setSelectedKeys] = useState(new Set<Key>());
+
+  return (
+    <div style={{width: '400px', resize: 'both', height: '320px'}}>
+      <TreeView
+        {...args}
+        aria-label="Tree with action bar"
+        selectionMode="multiple"
+        selectedKeys={selectedKeys}
+        onSelectionChange={setSelectedKeys as any}
+        onExpandedChange={action('onExpandedChange')}
+        styles={style({width: 'full', height: 'full'})}
+        renderActionBar={(keys) => {
+          let selection = keys === 'all' ? 'all' : [...keys].join(', ');
+          return (
+            <ActionBar>
+              <ActionButton onPress={() => action('edit')(selection)}>
+                <Edit />
+                <Text>Edit</Text>
+              </ActionButton>
+              <ActionButton onPress={() => action('copy')(selection)}>
+                <Copy />
+                <Text>Copy</Text>
+              </ActionButton>
+              <ActionButton onPress={() => action('delete')(selection)}>
+                <Delete />
+                <Text>Delete</Text>
+              </ActionButton>
+            </ActionBar>
+          );
+        }}>
+        <TreeViewItem id="Photos" textValue="Photos">
+          <TreeViewItemContent>
+            <Text>Photos</Text>
+            <Folder />
+          </TreeViewItemContent>
+        </TreeViewItem>
+        <TreeViewItem id="projects" textValue="Projects">
+          <TreeViewItemContent>
+            <Text>Projects</Text>
+            <Folder />
+          </TreeViewItemContent>
+          <TreeViewItem id="projects-1" textValue="Projects-1">
+            <TreeViewItemContent>
+              <Text>Projects-1</Text>
+              <Folder />
+            </TreeViewItemContent>
+            <TreeViewItem id="projects-1A" textValue="Projects-1A">
+              <TreeViewItemContent>
+                <Text>Projects-1A</Text>
+                <FileTxt />
+              </TreeViewItemContent>
+            </TreeViewItem>
+          </TreeViewItem>
+          <TreeViewItem id="projects-2" textValue="Projects-2">
+            <TreeViewItemContent>
+              <Text>Projects-2</Text>
+              <FileTxt />
+            </TreeViewItemContent>
+          </TreeViewItem>
+          <TreeViewItem id="projects-3" textValue="Projects-3">
+            <TreeViewItemContent>
+              <Text>Projects-3</Text>
+              <FileTxt />
+            </TreeViewItemContent>
+          </TreeViewItem>
+        </TreeViewItem>
+      </TreeView>
+    </div>
+  );
+}
+
+export const WithActionBar: StoryObj<typeof ActionBarExample> = {
+  render: ActionBarExample,
+  args: {
+    selectionMode: 'multiple'
+  },
+  name: 'with ActionBar'
+};
+
+function ActionBarEmphasizedExample(args: TreeViewProps<any>) {
+  let [selectedKeys, setSelectedKeys] = useState(new Set<Key>());
+
+  return (
+    <div style={{width: '400px', resize: 'both', height: '320px'}}>
+      <TreeView
+        {...args}
+        aria-label="Tree with emphasized action bar"
+        selectionMode="multiple"
+        selectedKeys={selectedKeys}
+        onSelectionChange={setSelectedKeys as any}
+        onExpandedChange={action('onExpandedChange')}
+        styles={style({width: 'full', height: 'full'})}
+        renderActionBar={(keys) => {
+          let selection = keys === 'all' ? 'all' : [...keys].join(', ');
+          return (
+            <ActionBar isEmphasized>
+              <ActionButton onPress={() => action('edit')(selection)}>
+                <Edit />
+                <Text>Edit</Text>
+              </ActionButton>
+              <ActionButton onPress={() => action('copy')(selection)}>
+                <Copy />
+                <Text>Copy</Text>
+              </ActionButton>
+              <ActionButton onPress={() => action('delete')(selection)}>
+                <Delete />
+                <Text>Delete</Text>
+              </ActionButton>
+            </ActionBar>
+          );
+        }}>
+        <TreeViewItem id="Photos" textValue="Photos">
+          <TreeViewItemContent>
+            <Text>Photos</Text>
+            <Folder />
+          </TreeViewItemContent>
+        </TreeViewItem>
+        <TreeViewItem id="projects" textValue="Projects">
+          <TreeViewItemContent>
+            <Text>Projects</Text>
+            <Folder />
+          </TreeViewItemContent>
+          <TreeViewItem id="projects-1" textValue="Projects-1">
+            <TreeViewItemContent>
+              <Text>Projects-1</Text>
+              <Folder />
+            </TreeViewItemContent>
+            <TreeViewItem id="projects-1A" textValue="Projects-1A">
+              <TreeViewItemContent>
+                <Text>Projects-1A</Text>
+                <FileTxt />
+              </TreeViewItemContent>
+            </TreeViewItem>
+          </TreeViewItem>
+          <TreeViewItem id="projects-2" textValue="Projects-2">
+            <TreeViewItemContent>
+              <Text>Projects-2</Text>
+              <FileTxt />
+            </TreeViewItemContent>
+          </TreeViewItem>
+          <TreeViewItem id="projects-3" textValue="Projects-3">
+            <TreeViewItemContent>
+              <Text>Projects-3</Text>
+              <FileTxt />
+            </TreeViewItemContent>
+          </TreeViewItem>
+        </TreeViewItem>
+      </TreeView>
+    </div>
+  );
+}
+
+export const WithActionBarEmphasized: StoryObj<typeof ActionBarEmphasizedExample> = {
+  render: ActionBarEmphasizedExample,
+  args: {
+    selectionMode: 'multiple'
+  },
+  name: 'with ActionBar (emphasized)'
+};
diff --git a/packages/dev/s2-docs/pages/s2/TreeView.mdx b/packages/dev/s2-docs/pages/s2/TreeView.mdx
index 6bab6e3ac6a..a22fe585fc2 100644
--- a/packages/dev/s2-docs/pages/s2/TreeView.mdx
+++ b/packages/dev/s2-docs/pages/s2/TreeView.mdx
@@ -1,7 +1,7 @@
 import {Layout} from '../../src/Layout';
 export default Layout;
 
-import {TreeView, TreeViewItem, TreeViewItemContent, Collection, Text, ActionMenu, MenuItem, InlineAlert, Heading, Content} from '@react-spectrum/s2';
+import {TreeView, TreeViewItem, TreeViewItemContent, Collection, Text, ActionMenu, ActionBar, ActionButton, MenuItem, InlineAlert, Heading, Content} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
 
 export const tags = ['hierarchy', 'data', 'nested'];
@@ -293,11 +293,14 @@ import FolderOpen from '@react-spectrum/s2/illustrations/linear/FolderOpen';
 
 ## Selection and actions
 
-Use the `selectionMode` prop to enable single or multiple selection. The selected items can be controlled via the `selectedKeys` prop, matching the `id` prop of the items. The `onAction` event handles item actions. Items can be disabled with the `isDisabled` prop. See the [selection guide](selection?component=Tree) for more details.
+Use the `selectionMode` prop to enable single or multiple selection. The selected items can be controlled via the `selectedKeys` prop, matching the `id` prop of the items. Return an [ActionBar](ActionBar) from `renderActionBar` to handle bulk actions, and use `onAction` for item navigation. Items can be disabled with the `isDisabled` prop. See the [selection guide](selection?component=Tree) for more details.
 
 ```tsx render docs={docs.exports.TreeView} links={docs.links} props={['selectionMode', 'disabledBehavior', 'disallowEmptySelection']} initialProps={{selectionMode: 'multiple'}} wide
 "use client";
-import {TreeView, TreeViewItem, TreeViewItemContent, type Selection} from '@react-spectrum/s2';
+import {TreeView, TreeViewItem, TreeViewItemContent, ActionBar, ActionButton, Text, type Selection} from '@react-spectrum/s2';
+import Edit from '@react-spectrum/s2/icons/Edit';
+import Copy from '@react-spectrum/s2/icons/Copy';
+import Delete from '@react-spectrum/s2/icons/Delete';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {useState} from 'react';
 
@@ -309,14 +312,32 @@ function Example(props) {
       <TreeView
         {...props}
         aria-label="Pokemon evolution"
-        styles={style({height: 250, width: 'full', maxWidth: 300})}
+        styles={style({height: 250, width: 'full', maxWidth: 400})}
         ///- begin highlight -///
         /* PROPS */
         selectedKeys={selected}
         onSelectionChange={setSelected}
         onAction={key => alert(`Clicked ${key}`)}
+        renderActionBar={(selectedKeys) => {
         ///- end highlight -///
-      >
+          let selection = selectedKeys === 'all' ? 'all' : [...selectedKeys].join(', ');
+          return (
+            <ActionBar>
+              <ActionButton onPress={() => alert(`Edit ${selection}`)}>
+                <Edit />
+                <Text>Edit</Text>
+              </ActionButton>
+              <ActionButton onPress={() => alert(`Copy ${selection}`)}>
+                <Copy />
+                <Text>Copy</Text>
+              </ActionButton>
+              <ActionButton onPress={() => alert(`Delete ${selection}`)}>
+                <Delete />
+                <Text>Delete</Text>
+              </ActionButton>
+            </ActionBar>
+          );
+        }}>
         <TreeViewItem id="bulbasaur" textValue="Bulbasaur">
           <TreeViewItemContent>Bulbasaur</TreeViewItemContent>
           <TreeViewItem id="ivysaur" textValue="Ivysaur">

From b14bd618256b90d89e68d2f206152b424d37ca93 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Thu, 26 Feb 2026 16:49:32 -0600
Subject: [PATCH 2/6] docs(S2): fix icon import clipboard content to add
 underscore for icons starting with number (#9698)

* docs(S2): fix icon import copied content to add underscore for icons starting with number (matches build)

* fix import for illustrations

* Revert "fix import for illustrations"

This reverts commit 0f2b8be0037050a2e54f28a3daf07c635a886da2.

* fix for illustrations docs
---
 packages/dev/s2-docs/src/IconSearchView.tsx    | 4 +++-
 packages/dev/s2-docs/src/IllustrationCards.tsx | 6 ++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/dev/s2-docs/src/IconSearchView.tsx b/packages/dev/s2-docs/src/IconSearchView.tsx
index 4a226bfbd27..1cb8f7add77 100644
--- a/packages/dev/s2-docs/src/IconSearchView.tsx
+++ b/packages/dev/s2-docs/src/IconSearchView.tsx
@@ -51,7 +51,9 @@ export function useCopyImport() {
     if (timeout.current) {
       clearTimeout(timeout.current);
     }
-    navigator.clipboard.writeText(`import ${id} from '@react-spectrum/s2/icons/${id}';`).then(() => {
+    // Use underscore prefix for names starting with a number (invalid JS identifier)
+    let importName = id.replace(/^(\d)/, '_$1');
+    navigator.clipboard.writeText(`import ${importName} from '@react-spectrum/s2/icons/${id}';`).then(() => {
       setCopiedId(id);
       timeout.current = setTimeout(() => setCopiedId(null), 2000);
     }).catch(() => {
diff --git a/packages/dev/s2-docs/src/IllustrationCards.tsx b/packages/dev/s2-docs/src/IllustrationCards.tsx
index ecb49b877c7..1ecb7a5423e 100644
--- a/packages/dev/s2-docs/src/IllustrationCards.tsx
+++ b/packages/dev/s2-docs/src/IllustrationCards.tsx
@@ -119,9 +119,11 @@ function useCopyImport(variant: string, gradientStyle: string) {
     if (timeout.current) {
       clearTimeout(timeout.current);
     }
+    // Use underscore prefix for names starting with a number (invalid JS identifier)
+    let importName = id.replace(/^(\d)/, '_$1');
     let importText = variant === 'gradient' ?
-      `import ${id} from '@react-spectrum/s2/illustrations/gradient/${gradientStyle}/${id}';` :
-      `import ${id} from '@react-spectrum/s2/illustrations/linear/${id}';`;
+      `import ${importName} from '@react-spectrum/s2/illustrations/gradient/${gradientStyle}/${id}';` :
+      `import ${importName} from '@react-spectrum/s2/illustrations/linear/${id}';`;
     navigator.clipboard.writeText(importText).then(() => {
       setCopiedId(id);
       timeout.current = setTimeout(() => setCopiedId(null), 2000);

From e60cf20caa96c9388c02f04fc02e9389a7271097 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 26 Feb 2026 14:50:08 -0800
Subject: [PATCH 3/6] tentative fix (#9635)

---
 packages/@react-aria/overlays/src/usePreventScroll.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/@react-aria/overlays/src/usePreventScroll.ts b/packages/@react-aria/overlays/src/usePreventScroll.ts
index 4c1698093b2..81e2dff5162 100644
--- a/packages/@react-aria/overlays/src/usePreventScroll.ts
+++ b/packages/@react-aria/overlays/src/usePreventScroll.ts
@@ -92,6 +92,10 @@ function preventScrollStandard() {
 //    Safari from scrolling the page. After a small delay, focus the real input and scroll it into view
 //    ourselves, without scrolling the whole page.
 function preventScrollMobileSafari() {
+  // Set overflow hidden so scrollIntoViewport() (useSelectableCollection) sees isScrollPrevented and
+  // scrolls only scroll parents instead of calling native scrollIntoView() which moves the window.
+  let restoreOverflow = setStyle(document.documentElement, 'overflow', 'hidden');
+
   let scrollable: Element;
   let allowTouchMove = false;
   let onTouchStart = (e: TouchEvent) => {
@@ -201,6 +205,7 @@ function preventScrollMobileSafari() {
   );
 
   return () => {
+    restoreOverflow();
     removeEvents();
     style.remove();
     HTMLElement.prototype.focus = focus;

From 088e4bfc9b1e891282d1a923fcc2eb30788e3f70 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 26 Feb 2026 14:50:30 -0800
Subject: [PATCH 4/6] fix: patch additional methods so React doesnt break with
 template elements (#9385)

* fix: patch additional methods so React doesnt break with template elements

fixes https://github.com/adobe/react-spectrum/issues/9376

* fix case where user navigates to Picker page from another page

* fix template node getting direct children
---
 .../@react-aria/collections/src/Hidden.tsx    | 59 ++++++++++++++++++-
 .../@react-spectrum/s2/test/Combobox.test.tsx |  5 +-
 .../@react-spectrum/s2/test/Picker.test.tsx   |  5 +-
 3 files changed, 61 insertions(+), 8 deletions(-)

diff --git a/packages/@react-aria/collections/src/Hidden.tsx b/packages/@react-aria/collections/src/Hidden.tsx
index b6f2fa46607..6ff7465d909 100644
--- a/packages/@react-aria/collections/src/Hidden.tsx
+++ b/packages/@react-aria/collections/src/Hidden.tsx
@@ -11,15 +11,21 @@
  */
 
 import {forwardRefType} from '@react-types/shared';
-import React, {Context, createContext, forwardRef, JSX, ReactElement, ReactNode, useContext} from 'react';
+import React, {Context, createContext, forwardRef, JSX, ReactElement, ReactNode, useContext, useRef} from 'react';
+import {useLayoutEffect} from '@react-aria/utils';
 
 // React doesn't understand the <template> element, which doesn't have children like a normal element.
 // It will throw an error during hydration when it expects the firstChild to contain content rendered
 // on the server, when in reality, the browser will have placed this inside the `content` document fragment.
 // This monkey patches the firstChild property for our special hidden template elements to work around this error.
+// does the same for appendChild/removeChild/insertBefore as per the issue below
 // See https://github.com/facebook/react/issues/19932
 if (typeof HTMLTemplateElement !== 'undefined') {
   const getFirstChild = Object.getOwnPropertyDescriptor(Node.prototype, 'firstChild')!.get!;
+  const originalAppendChild = Object.getOwnPropertyDescriptor(Node.prototype, 'appendChild')!.value!;
+  const originalRemoveChild = Object.getOwnPropertyDescriptor(Node.prototype, 'removeChild')!.value!;
+  const originalInsertBefore = Object.getOwnPropertyDescriptor(Node.prototype, 'insertBefore')!.value!;
+
   Object.defineProperty(HTMLTemplateElement.prototype, 'firstChild', {
     configurable: true,
     enumerable: true,
@@ -31,12 +37,61 @@ if (typeof HTMLTemplateElement !== 'undefined') {
       }
     }
   });
+
+  Object.defineProperty(HTMLTemplateElement.prototype, 'appendChild', {
+    configurable: true,
+    enumerable: true,
+    value: function (node) {
+      if (this.dataset.reactAriaHidden) {
+        return this.content.appendChild(node);
+      } else {
+        return originalAppendChild.call(this, node);
+      }
+    }
+  });
+
+  Object.defineProperty(HTMLTemplateElement.prototype, 'removeChild', {
+    configurable: true,
+    enumerable: true,
+    value: function (node) {
+      if (this.dataset.reactAriaHidden) {
+        return this.content.removeChild(node);
+      } else {
+        return originalRemoveChild.call(this, node);
+      }
+    }
+  });
+
+  Object.defineProperty(HTMLTemplateElement.prototype, 'insertBefore', {
+    configurable: true,
+    enumerable: true,
+    value: function (node, child) {
+      if (this.dataset.reactAriaHidden) {
+        return this.content.insertBefore(node, child);
+      } else {
+        return originalInsertBefore.call(this, node, child);
+      }
+    }
+  });
 }
 
 export const HiddenContext: Context<boolean> = createContext<boolean>(false);
 
 export function Hidden(props: {children: ReactNode}): JSX.Element {
   let isHidden = useContext(HiddenContext);
+  let templateRef = useRef<HTMLTemplateElement>(null);
+  // somehow React might add children to the template and we never hit the reactAriaHidden parts of the above overrides
+  // so we need to move those children into the content of the template since templates can't have direct children
+  useLayoutEffect(() => {
+    let el = templateRef.current;
+    if (!el?.dataset.reactAriaHidden) {
+      return;
+    }
+    while (el.childNodes.length > 0) {
+      el.content.appendChild(el.childNodes[0]);
+    }
+  }, []);
+
   if (isHidden) {
     // Don't hide again if we are already hidden.
     return <>{props.children}</>;
@@ -51,7 +106,7 @@ export function Hidden(props: {children: ReactNode}): JSX.Element {
   // In SSR, portals are not supported by React. Instead, always render into a <template>
   // element, which the browser will never display to the user. In addition, the
   // content is not part of the accessible DOM tree, so it won't affect ids or other accessibility attributes.
-  return <template data-react-aria-hidden>{children}</template>;
+  return <template ref={templateRef} data-react-aria-hidden>{children}</template>;
 }
 
 /** Creates a component that forwards its ref and returns null if it is in a hidden subtree. */
diff --git a/packages/@react-spectrum/s2/test/Combobox.test.tsx b/packages/@react-spectrum/s2/test/Combobox.test.tsx
index 10fd6dbb869..fe3beaac752 100644
--- a/packages/@react-spectrum/s2/test/Combobox.test.tsx
+++ b/packages/@react-spectrum/s2/test/Combobox.test.tsx
@@ -208,9 +208,8 @@ describe('Combobox', () => {
     let dialog = tree.getByRole('dialog');
     expect(dialog).toBeVisible();
 
-    // Because of the fake DOM we'll see this twice
-    expect(tree.getAllByText('Title here')[1]).toBeVisible();
-    expect(tree.getAllByText('Contents')[1]).toBeVisible();
+    expect(tree.getAllByText('Title here')[0]).toBeVisible();
+    expect(tree.getAllByText('Contents')[0]).toBeVisible();
     warn.mockRestore();
   });
 
diff --git a/packages/@react-spectrum/s2/test/Picker.test.tsx b/packages/@react-spectrum/s2/test/Picker.test.tsx
index 61cd74fa021..6df38302768 100644
--- a/packages/@react-spectrum/s2/test/Picker.test.tsx
+++ b/packages/@react-spectrum/s2/test/Picker.test.tsx
@@ -205,9 +205,8 @@ describe('Picker', () => {
     let dialog = tree.getByRole('dialog');
     expect(dialog).toBeVisible();
 
-    // Because of the fake DOM we'll see this twice
-    expect(tree.getAllByText('Title here')[1]).toBeVisible();
-    expect(tree.getAllByText('Contents')[1]).toBeVisible();
+    expect(tree.getAllByText('Title here')[0]).toBeVisible();
+    expect(tree.getAllByText('Contents')[0]).toBeVisible();
     warn.mockRestore();
   });
 });

From 04b7380955fd15282594ba7c56ef4f985364c9bb Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Thu, 26 Feb 2026 16:54:58 -0600
Subject: [PATCH 5/6] docs(S2): fix clipping in Picker custom value AvatarGroup
 example (#9702)

---
 packages/dev/s2-docs/pages/s2/Picker.mdx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/dev/s2-docs/pages/s2/Picker.mdx b/packages/dev/s2-docs/pages/s2/Picker.mdx
index ab7574f3a65..5cacf043e3d 100644
--- a/packages/dev/s2-docs/pages/s2/Picker.mdx
+++ b/packages/dev/s2-docs/pages/s2/Picker.mdx
@@ -250,6 +250,7 @@ Use the `renderValue` prop to provide a custom element to display selected items
 ```tsx render
 "use client";
 import {Avatar, AvatarGroup, Picker, PickerItem, Text} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 ///- begin collapse -///
 let users = [
@@ -269,7 +270,7 @@ function Example() {
         selectionMode={"multiple"}
         ///- begin highlight -///
         renderValue={(selectedItems) => (
-          <AvatarGroup aria-label="Selected users">
+          <AvatarGroup aria-label="Selected users" styles={style({marginX: 4})}>
             {selectedItems.map(item => (
               <Avatar key={item.id} src={item.avatar} alt={item.name} />
             ))}

From 575fa9d802cdf271a3415b6036feb999333971f0 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Thu, 26 Feb 2026 16:57:27 -0600
Subject: [PATCH 6/6] docs(S2): add Typography search view (#9524)

* init Typography search view

* have text inherit color

* add to mobile search menu

* make copy info messages consistent (start-aligned)

* fix search tags overflowing

* use search value to filter list instead of update preview text

* update placeholder

* allow editing sample text via RAC TextField

* add syntax highlighting to code sample

* fix scrolling issues

* add padding around toggle button group

* add aria-label to textfield

* disable virtual focus for the Autocomplete when Typography is selected

* make layout styles consistent with other resource tabs

* allow sample text to take the full width of the container

* add paddingX to ToggleButtonGroup to prevent ToggleButtonGroup clipping

* remove contextual helps from header

* reorder fonts for better visuals

* cleanup styles

* fix tag textValue warning

* add ActionButton to indicate sample text is editable

* remove element picker

* render preview/code panel right under list content

* clear overlay context "Edit sample text" action ActionButton

* center sample text

* clean up listbox styles
---
 packages/dev/s2-docs/src/ColorSearchView.tsx  |   7 +-
 packages/dev/s2-docs/src/IconSearchView.tsx   |   2 +-
 packages/dev/s2-docs/src/MobileSearchMenu.tsx |  20 +-
 packages/dev/s2-docs/src/SearchMenu.tsx       |  21 +-
 packages/dev/s2-docs/src/SearchTagGroups.tsx  |   2 +-
 .../dev/s2-docs/src/TypographySearchView.tsx  | 376 ++++++++++++++++++
 packages/dev/s2-docs/src/searchUtils.tsx      |   4 +
 7 files changed, 421 insertions(+), 11 deletions(-)
 create mode 100644 packages/dev/s2-docs/src/TypographySearchView.tsx

diff --git a/packages/dev/s2-docs/src/ColorSearchView.tsx b/packages/dev/s2-docs/src/ColorSearchView.tsx
index a19b193f925..cfac63ad930 100644
--- a/packages/dev/s2-docs/src/ColorSearchView.tsx
+++ b/packages/dev/s2-docs/src/ColorSearchView.tsx
@@ -201,10 +201,11 @@ interface ColorSearchViewProps {
   /** Names of colors that exactly match the searched hex value. */
   exactMatches?: Set<string>,
   /** Names of the closest matching colors when no exact matches exist. */
-  closestMatches?: Set<string>
+  closestMatches?: Set<string>,
+  listBoxClassName?: string
 }
 
-export function ColorSearchView({filteredItems, exactMatches = new Set(), closestMatches = new Set()}: ColorSearchViewProps) {
+export function ColorSearchView({filteredItems, exactMatches = new Set(), closestMatches = new Set(), listBoxClassName}: ColorSearchViewProps) {
   const [copiedId, setCopiedId] = useState<string | null>(null);
   const timeout = useRef<ReturnType<typeof setTimeout> | null>(null);
 
@@ -261,7 +262,7 @@ export function ColorSearchView({filteredItems, exactMatches = new Set(), closes
           }
         }}
         layout="grid"
-        className={style({
+        className={listBoxClassName || style({
           width: 'full',
           display: 'flex',
           flexDirection: 'column',
diff --git a/packages/dev/s2-docs/src/IconSearchView.tsx b/packages/dev/s2-docs/src/IconSearchView.tsx
index 1cb8f7add77..0feb90e1a24 100644
--- a/packages/dev/s2-docs/src/IconSearchView.tsx
+++ b/packages/dev/s2-docs/src/IconSearchView.tsx
@@ -78,7 +78,7 @@ function IconListBox({items, copiedId, onAction, listBoxClassName}: IconListBoxP
         onAction={(item) => onAction(item.toString())}
         items={items}
         layout="grid"
-        className={listBoxClassName || style({width: '100%', scrollPaddingY: 4, overflow: 'auto'})}
+        className={listBoxClassName || style({width: '100%', scrollPaddingY: 4, padding: 8})}
         dependencies={[copiedId]}
         renderEmptyState={() => (
           <IllustratedMessage styles={style({marginX: 'auto', marginY: 32})}>
diff --git a/packages/dev/s2-docs/src/MobileSearchMenu.tsx b/packages/dev/s2-docs/src/MobileSearchMenu.tsx
index 501f7d71a5e..89d51b997c7 100644
--- a/packages/dev/s2-docs/src/MobileSearchMenu.tsx
+++ b/packages/dev/s2-docs/src/MobileSearchMenu.tsx
@@ -17,6 +17,7 @@ import {IconSearchSkeleton, useIconFilter} from './IconSearchView';
 import {type Library} from './constants';
 import React, {cloneElement, CSSProperties, ReactElement, ReactNode, Suspense, useContext, useEffect, useRef, useState} from 'react';
 import {SearchTagGroups} from './SearchTagGroups';
+import {TypographySearchView} from './TypographySearchView';
 import {useId} from '@react-aria/utils';
 import {useRouter} from './Router';
 
@@ -242,6 +243,7 @@ function MobileNav({initialTag}: {initialTag?: string}) {
 
   const filteredColors = useFilteredColors(searchValue);
   const isColorsSelected = selectedSection === 'colors';
+  const isTypographySelected = selectedSection === 'typography';
 
   let handleSearchFocus = () => {
     setSearchFocused(true);
@@ -311,7 +313,10 @@ function MobileNav({initialTag}: {initialTag?: string}) {
             const showIcons = isIconsSelected && library.id === 'react-spectrum';
             return (
               <MobileTabPanel key={library.id} id={library.id}>
-                <Autocomplete filter={showIcons ? iconFilter : undefined}>
+                <Autocomplete
+                  key={isTypographySelected ? 'typography' : 'default'}
+                  filter={showIcons ? iconFilter : undefined}
+                  disableVirtualFocus={isTypographySelected}>
                   <div className={stickySearchContainer}>
                     <SearchField
                       aria-label="Search"
@@ -359,10 +364,19 @@ function MobileNav({initialTag}: {initialTag?: string}) {
                         <LazyColorSearchView
                           filteredItems={filteredColors.sections}
                           exactMatches={filteredColors.exactMatches}
-                          closestMatches={filteredColors.closestMatches} />
+                          closestMatches={filteredColors.closestMatches}
+                          listBoxClassName={style({
+                            flexGrow: 1,
+                            overflow: 'auto',
+                            width: '100%',
+                            scrollPaddingY: 4
+                          })} />
                       </Suspense>
                     )}
-                    {!showIcons && (!isColorsSelected || library.id !== 'react-spectrum') && (
+                    {!showIcons && isTypographySelected && library.id === 'react-spectrum' && (
+                      <TypographySearchView searchValue={searchValue} />
+                    )}
+                    {!showIcons && !isColorsSelected && !isTypographySelected && (
                       <ComponentCardView
                         currentUrl={currentUrl}
                         onAction={key => {
diff --git a/packages/dev/s2-docs/src/SearchMenu.tsx b/packages/dev/s2-docs/src/SearchMenu.tsx
index 7e5eb7964ae..a15c544881a 100644
--- a/packages/dev/s2-docs/src/SearchMenu.tsx
+++ b/packages/dev/s2-docs/src/SearchMenu.tsx
@@ -20,6 +20,7 @@ import {SearchTagGroups} from './SearchTagGroups';
 import {style} from '@react-spectrum/s2/style' with { type: 'macro' };
 import {Tab, TabList, TabPanel, Tabs} from './Tabs';
 import {TextFieldRef} from '@react-types/textfield';
+import {TypographySearchView} from './TypographySearchView';
 import {useRouter} from './Router';
 import './SearchMenu.css';
 import {preloadComponentImages} from './ComponentCard';
@@ -160,7 +161,10 @@ export function SearchMenu(props: SearchMenuProps) {
           const placeholderText = getPlaceholderText(tab.label);
           return (
             <TabPanel key={tab.id} id={tab.id}>
-              <Autocomplete filter={isIconsSelected ? iconFilter : undefined}>
+              <Autocomplete
+                key={selectedTagId === 'typography' ? 'typography' : 'default'}
+                filter={isIconsSelected ? iconFilter : undefined}
+                disableVirtualFocus={selectedTagId === 'typography'}>
                 <div className={style({display: 'flex', flexDirection: 'column', height: 'full'})}>
                   <div className={style({flexShrink: 0, marginStart: 16, marginEnd: 64})}>
                     <SearchField
@@ -182,6 +186,8 @@ export function SearchMenu(props: SearchMenuProps) {
                       selectedTagId={selectedTagId}
                       onSectionSelectionChange={handleTagSelectionChange}
                       onResourceSelectionChange={handleTagSelectionChange}
+                      wrapperClassName={style({paddingTop: 16, flexShrink: 0, zIndex: 1})}
+                      contentClassName={style({display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 8, marginX: 16})}
                       onHover={tag => {
                         preloadComponentImages(sections.find(s => s.id === tag)?.children?.map(c => c.name) || []);
                       }} />
@@ -198,11 +204,20 @@ export function SearchMenu(props: SearchMenuProps) {
                   {selectedTagId === 'colors' && (
                     <div className={style({flexGrow: 1, overflow: 'auto', display: 'flex', flexDirection: 'column'})}>
                       <Suspense fallback={<ColorSearchSkeleton />}>
-                        <LazyColorSearchView filteredItems={filteredColors.sections} exactMatches={filteredColors.exactMatches} closestMatches={filteredColors.closestMatches} />
+                        <LazyColorSearchView 
+                          filteredItems={filteredColors.sections} 
+                          exactMatches={filteredColors.exactMatches} 
+                          closestMatches={filteredColors.closestMatches}
+                          listBoxClassName={style({flexGrow: 1, overflow: 'auto', width: '100%', scrollPaddingY: 4})} />
                       </Suspense>
                     </div>
                   )}
-                  {selectedTagId !== 'icons' && selectedTagId !== 'colors' && (
+                  {selectedTagId === 'typography' && (
+                    <div className={style({flexGrow: 1, overflow: 'auto', display: 'flex', flexDirection: 'column'})}>
+                      <TypographySearchView searchValue={searchValue} />
+                    </div>
+                  )}
+                  {selectedTagId !== 'icons' && selectedTagId !== 'colors' && selectedTagId !== 'typography' && (
                     <ComponentCardView
                       key={selectedLibrary + selectedTagId}
                       currentUrl={currentUrl}
diff --git a/packages/dev/s2-docs/src/SearchTagGroups.tsx b/packages/dev/s2-docs/src/SearchTagGroups.tsx
index 62cf17bfd6e..525f595e6ae 100644
--- a/packages/dev/s2-docs/src/SearchTagGroups.tsx
+++ b/packages/dev/s2-docs/src/SearchTagGroups.tsx
@@ -79,7 +79,7 @@ export function SearchTagGroups({
                 items={resourceTags}
                 UNSAFE_style={{whiteSpace: 'nowrap'}}>
                 {(tag) => (
-                  <Tag key={tag.id} id={tag.id} href={tag.href} target="_blank">
+                  <Tag key={tag.id} id={tag.id} href={tag.href} target="_blank" textValue={tag.href ?? tag.name}>
                     {tag.name}
                     {tag.href &&
                       <LinkOutIcon
diff --git a/packages/dev/s2-docs/src/TypographySearchView.tsx b/packages/dev/s2-docs/src/TypographySearchView.tsx
new file mode 100644
index 00000000000..5024023a61c
--- /dev/null
+++ b/packages/dev/s2-docs/src/TypographySearchView.tsx
@@ -0,0 +1,376 @@
+'use client';
+
+import {ActionButton, Content, Heading, IllustratedMessage, Link} from '@react-spectrum/s2';
+import {CopyButton} from './CopyButton';
+import Edit from '@react-spectrum/s2/icons/Edit';
+import {FieldInputContext, Header, Input, InputRenderProps, Key, ListBox, ListBoxItem, ListBoxSection, OverlayTriggerStateContext, TextField} from 'react-aria-components';
+import {focusRing, style} from '@react-spectrum/s2/style' with {type: 'macro'};
+import {InfoMessage} from './colorSearchData';
+// eslint-disable-next-line monorepo/no-internal-import
+import NoSearchResults from '@react-spectrum/s2/illustrations/linear/NoSearchResults';
+import React, {useMemo, useRef, useState} from 'react';
+
+const listBoxStyle = style({
+  width: 'full',
+  display: 'flex',
+  flexDirection: 'row',
+  gap: 12,
+  flexWrap: 'wrap',
+  alignItems: 'start'
+});
+
+const sectionStyle = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 4
+});
+
+const headerStyle = style({
+  font: 'heading-xs',
+  marginBottom: 4,
+  display: 'flex',
+  alignItems: 'center',
+  gap: 4,
+  paddingX: 8
+});
+
+const typographySections = [
+  {
+    id: 'heading',
+    name: 'Heading',
+    description: 'Use for headings in content pages',
+    items: ['heading-2xs', 'heading-xs', 'heading-sm', 'heading', 'heading-lg', 'heading-xl', 'heading-2xl', 'heading-3xl']
+  },
+  {
+    id: 'body',
+    name: 'Body',
+    description: 'Use for the content of pages that are primarily text',
+    items: ['body-2xs', 'body-xs', 'body-sm', 'body', 'body-lg', 'body-xl', 'body-2xl', 'body-3xl']
+  },
+  {
+    id: 'title',
+    name: 'Title',
+    description: 'Use for titles within UI components such as cards or panels',
+    items: ['title-xs', 'title-sm', 'title', 'title-lg', 'title-xl', 'title-2xl', 'title-3xl']
+  },
+  {
+    id: 'ui',
+    name: 'UI',
+    description: 'Use within interactive UI components',
+    items: ['ui-xs', 'ui-sm', 'ui', 'ui-lg', 'ui-xl', 'ui-2xl', 'ui-3xl']
+  },
+  {
+    id: 'code',
+    name: 'Code',
+    description: 'Use for source code',
+    items: ['code-sm', 'code', 'code-lg', 'code-xl']
+  },
+  {
+    id: 'detail',
+    name: 'Detail',
+    description: 'Use for less important metadata',
+    items: ['detail-sm', 'detail', 'detail-lg', 'detail-xl']
+  }
+];
+
+const itemStyle = style({
+  ...focusRing(),
+  display: 'flex',
+  alignItems: 'center',
+  paddingX: 12,
+  paddingY: 4,
+  backgroundColor: {
+    default: 'gray-50',
+    isHovered: 'gray-100',
+    isFocused: 'gray-100',
+    isSelected: 'accent'
+  },
+  color: {
+    default: 'body',
+    isSelected: 'white'
+  },
+  borderRadius: 'lg',
+  transition: 'default',
+  cursor: 'default'
+});
+
+const fontStyles = {
+  // UI
+  'ui-xs': style({font: 'ui-xs', color: 'inherit'}),
+  'ui-sm': style({font: 'ui-sm', color: 'inherit'}),
+  'ui': style({font: 'ui', color: 'inherit'}),
+  'ui-lg': style({font: 'ui-lg', color: 'inherit'}),
+  'ui-xl': style({font: 'ui-xl', color: 'inherit'}),
+  'ui-2xl': style({font: 'ui-2xl', color: 'inherit'}),
+  'ui-3xl': style({font: 'ui-3xl', color: 'inherit'}),
+  // Body
+  'body-2xs': style({font: 'body-2xs', color: 'inherit'}),
+  'body-xs': style({font: 'body-xs', color: 'inherit'}),
+  'body-sm': style({font: 'body-sm', color: 'inherit'}),
+  'body': style({font: 'body', color: 'inherit'}),
+  'body-lg': style({font: 'body-lg', color: 'inherit'}),
+  'body-xl': style({font: 'body-xl', color: 'inherit'}),
+  'body-2xl': style({font: 'body-2xl', color: 'inherit'}),
+  'body-3xl': style({font: 'body-3xl', color: 'inherit'}),
+  // Heading
+  'heading-2xs': style({font: 'heading-2xs', color: 'inherit'}),
+  'heading-xs': style({font: 'heading-xs', color: 'inherit'}),
+  'heading-sm': style({font: 'heading-sm', color: 'inherit'}),
+  'heading': style({font: 'heading', color: 'inherit'}),
+  'heading-lg': style({font: 'heading-lg', color: 'inherit'}),
+  'heading-xl': style({font: 'heading-xl', color: 'inherit'}),
+  'heading-2xl': style({font: 'heading-2xl', color: 'inherit'}),
+  'heading-3xl': style({font: 'heading-3xl', color: 'inherit'}),
+  // Title
+  'title-xs': style({font: 'title-xs', color: 'inherit'}),
+  'title-sm': style({font: 'title-sm', color: 'inherit'}),
+  'title': style({font: 'title', color: 'inherit'}),
+  'title-lg': style({font: 'title-lg', color: 'inherit'}),
+  'title-xl': style({font: 'title-xl', color: 'inherit'}),
+  'title-2xl': style({font: 'title-2xl', color: 'inherit'}),
+  'title-3xl': style({font: 'title-3xl', color: 'inherit'}),
+  // Detail
+  'detail-sm': style({font: 'detail-sm', color: 'inherit'}),
+  'detail': style({font: 'detail', color: 'inherit'}),
+  'detail-lg': style({font: 'detail-lg', color: 'inherit'}),
+  'detail-xl': style({font: 'detail-xl', color: 'inherit'}),
+  // Code
+  'code-sm': style({font: 'code-sm', color: 'inherit'}),
+  'code': style({font: 'code', color: 'inherit'}),
+  'code-lg': style({font: 'code-lg', color: 'inherit'}),
+  'code-xl': style({font: 'code-xl', color: 'inherit'})
+} as const;
+
+// We hard-code these since the code is dynamic and we can't run our highlighter in the browser.
+const syntaxStyles = {
+  tag: style({color: 'red-1000'}),
+  attribute: style({color: 'indigo-1000'}),
+  string: style({color: 'green-1000'})
+};
+
+type FontStyleKey = keyof typeof fontStyles;
+
+const defaultPreviewInputStyle = style({
+  ...focusRing(),
+  backgroundColor: 'transparent',
+  borderWidth: 2,
+  borderStyle: 'solid',
+  borderColor: {
+    default: 'transparent',
+    isFocused: 'gray-900'
+  },
+  borderRadius: 'lg',
+  textAlign: 'center',
+  width: 'full',
+  transition: 'default'
+});
+
+const editButtonStyle = style({
+  position: 'absolute',
+  insetStart: 'full',
+  marginStart: 8,
+  visibility: {
+    default: 'visible',
+    isHidden: 'hidden'
+  }
+});
+
+interface TypographySearchViewProps {
+  searchValue?: string
+}
+
+export function TypographySearchView({searchValue = ''}: TypographySearchViewProps) {
+  const [selectedFont, setSelectedFont] = useState<string>('heading');
+  const [previewText, setPreviewText] = useState<string>('Sample Text');
+  const [isPreviewFocused, setIsPreviewFocused] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const codeSnippet = `<div className={style({font: '${selectedFont}'})}>${previewText}</div>`;
+  const fontStyleClass = selectedFont in fontStyles ? fontStyles[selectedFont as FontStyleKey] : undefined;
+  const previewInputStyle = (renderProps: InputRenderProps) => `${defaultPreviewInputStyle(renderProps)} ${fontStyleClass || ''}`;
+
+  const sections = useMemo(() => {
+    const searchLower = searchValue.toLowerCase();
+    
+    return typographySections.map(section => ({
+      id: section.id,
+      name: section.name,
+      description: section.description,
+      items: section.items
+        .filter(name => name.toLowerCase().includes(searchLower))
+        .map(name => ({
+          id: `${section.id}-${name}`,
+          name
+        }))
+    })).filter(section => section.items.length > 0);
+  }, [searchValue]);
+
+  const handleSelectionChange = (keys: Set<Key>) => {
+    const selectedKey = Array.from(keys)[0];
+    if (selectedKey) {
+      // Extract font name from the key (format: "section-fontname")
+      const parts = String(selectedKey).split('-');
+      // Handle cases like "ui-2xl" or "heading-xl"
+      const fontName = parts.slice(1).join('-');
+      setSelectedFont(fontName);
+    }
+  };
+
+  // Find the currently selected key for the ListBox
+  const selectedKeys = useMemo(() => {
+    for (const section of sections) {
+      const item = section.items.find(item => item.name === selectedFont);
+      if (item) {
+        return new Set([item.id]);
+      }
+    }
+    return new Set<Key>();
+  }, [selectedFont, sections]);
+
+  return (
+    <>
+      <InfoMessage>Select a typography style and customize the sample text to preview its rendered output and code snippet. See <Link href="styling">styling</Link> for more information.</InfoMessage>
+      <div className={style({flexShrink: 1, minHeight: 0, overflow: 'auto', padding: 8})}>
+        <ListBox
+          aria-label="Typography styles"
+          selectionMode="single"
+          selectedKeys={selectedKeys}
+          onSelectionChange={handleSelectionChange as (keys: 'all' | Set<Key>) => void}
+          className={listBoxStyle}
+          items={sections}
+          renderEmptyState={() => (
+            <IllustratedMessage styles={style({marginX: 'auto', marginY: 32})}>
+              <NoSearchResults />
+              <Heading>No results</Heading>
+              <Content>Try a different search term.</Content>
+            </IllustratedMessage>
+          )}>
+          {section => (
+            <ListBoxSection id={section.id} className={sectionStyle}>
+              <Header className={headerStyle}>
+                {section.name}
+              </Header>
+              {section.items.map(item => (
+                <ListBoxItem
+                  key={item.id}
+                  id={item.id}
+                  textValue={item.name}
+                  className={itemStyle}>
+                  <span className={item.name in fontStyles ? fontStyles[item.name as FontStyleKey] : undefined}>
+                    {item.name}
+                  </span>
+                </ListBoxItem>
+              ))}
+            </ListBoxSection>
+          )}
+        </ListBox>
+      </div>
+
+      <div
+        className={style({
+          backgroundColor: 'layer-1',
+          borderRadius: 'lg',
+          padding: 16,
+          display: 'flex',
+          flexDirection: 'column',
+          flexShrink: 0,
+          gap: 16,
+          borderWidth: 1,
+          borderColor: 'gray-200',
+          borderStyle: 'solid',
+          margin: 8
+        })}>
+        <div
+          className={style({
+            backgroundColor: 'layer-2',
+            borderRadius: 'default',
+            padding: 16,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            minHeight: 80
+          })}>
+          <div className={style({position: 'relative', display: 'inline-flex', alignItems: 'center', maxWidth: 'full'})}>
+            <FieldInputContext.Provider value={null}>
+              <TextField
+                aria-label="Editable preview text"
+                value={previewText}
+                onChange={setPreviewText}
+                onFocus={() => setIsPreviewFocused(true)}
+                onBlur={() => {
+                  setIsPreviewFocused(false);
+                  if (previewText.trim() === '') {
+                    setPreviewText('Sample Text');
+                  }
+                }}
+                className={style({maxWidth: 'full', display: 'flex'})}>
+                <Input
+                  ref={inputRef}
+                  className={previewInputStyle}
+                  style={{
+                    /* @ts-ignore - https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/field-sizing */
+                    fieldSizing: 'content'
+                  }} />
+              </TextField>
+            </FieldInputContext.Provider>
+            <OverlayTriggerStateContext.Provider value={null}>
+              <ActionButton
+                aria-label="Edit sample text"
+                isQuiet
+                size="S"
+                styles={editButtonStyle({isHidden: isPreviewFocused})}
+                onPress={() => {
+                  const input = inputRef.current;
+                  if (input) {
+                    input.focus();
+                    input.select();
+                  }
+                }}>
+                <Edit />
+              </ActionButton>
+            </OverlayTriggerStateContext.Provider>
+          </div>
+        </div>
+        
+        <div className={style({display: 'flex', flexDirection: 'column', gap: 12})}>
+          <div
+            className={style({
+              display: 'flex',
+              alignItems: 'center',
+              gap: 8,
+              backgroundColor: 'gray-100',
+              borderRadius: 'default',
+              paddingX: 12,
+              paddingY: 8,
+              font: 'code'
+            })}>
+            <code className={style({flexGrow: 1, overflow: 'auto', whiteSpace: 'nowrap'})}>
+              &lt;
+              <span className={syntaxStyles.tag}>div</span>
+              {' '}
+              <span className={syntaxStyles.attribute}>className</span>
+              =
+              {'{'}
+              <span className={syntaxStyles.tag}>style</span>
+              {'('}
+              {'{'}
+              <span className={syntaxStyles.attribute}>font</span>
+              :
+              {' '}
+              <span className={syntaxStyles.string}>'{selectedFont}'</span>
+              {'}'}
+              {')'}
+              {'}'}
+              &gt;
+              {previewText}
+              &lt;/
+              <span className={syntaxStyles.tag}>div</span>
+              &gt;
+            </code>
+            <CopyButton size="M" text={codeSnippet} tooltip="Copy code snippet" ariaLabel="Copy code snippet" />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/packages/dev/s2-docs/src/searchUtils.tsx b/packages/dev/s2-docs/src/searchUtils.tsx
index e8b5cd25ec1..da97af7e5da 100644
--- a/packages/dev/s2-docs/src/searchUtils.tsx
+++ b/packages/dev/s2-docs/src/searchUtils.tsx
@@ -479,6 +479,7 @@ export function getResourceTags(library: Library): Tag[] {
     return [
       {id: 'icons', name: 'Icons'},
       {id: 'colors', name: 'Colors'},
+      {id: 'typography', name: 'Typography'},
       {id: 'v3', name: 'React Spectrum v3', href: getBaseUrl('s2') + '/v3/getting-started.html'}
     ];
   }
@@ -867,6 +868,9 @@ export function useSearchMenuState(options: SearchMenuStateOptions): SearchMenuS
     if (selectedTagId === 'colors') {
       return 'Search color names or hex values';
     }
+    if (selectedTagId === 'typography') {
+      return 'Search typography styles';
+    }
     return selectedResourceTag
       ? `Search ${selectedResourceTag.name}`
       : `Search ${libraryLabel}`;