From c9aa6121602e8e7a713328be7abf372051859f2e Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 16 Sep 2025 14:20:57 -0700
Subject: [PATCH 01/17] fix modal so it always appears over mobile header and
 fix dropzone width

---
 packages/dev/s2-docs/pages/s2/DropZone.mdx | 4 ++--
 packages/dev/s2-docs/src/Layout.tsx        | 2 +-
 packages/dev/s2-docs/src/MobileHeader.tsx  | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/dev/s2-docs/pages/s2/DropZone.mdx b/packages/dev/s2-docs/pages/s2/DropZone.mdx
index 84aa077be0b..4dedf48c9c4 100644
--- a/packages/dev/s2-docs/pages/s2/DropZone.mdx
+++ b/packages/dev/s2-docs/pages/s2/DropZone.mdx
@@ -19,13 +19,13 @@ function Example(props) {
   return (
     <DropZone
       {...props}
-      styles={style({width: 320})}
+      styles={style({width: 320, maxWidth: '90%'})}
       /* PROPS */
       isFilled={!!content}
       // Determine whether dragged content should be accepted.
       getDropOperation={types => (
         ['text/plain', 'image/jpeg', 'image/png', 'image/gif'].some(t => types.has(t))
-          ? 'copy' 
+          ? 'copy'
           : 'cancel'
       )}
       onDrop={async (event) => {
diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx
index d8a0aeae6ce..9ec130fa666 100644
--- a/packages/dev/s2-docs/src/Layout.tsx
+++ b/packages/dev/s2-docs/src/Layout.tsx
@@ -125,7 +125,7 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
             currentPage={currentPage} />
           <div className={style({display: 'flex', width: 'full'})}>
             <Nav pages={pages} currentPage={currentPage} />
-            <main 
+            <main
               key={currentPage.url}
               style={{borderBottomLeftRadius: 0, borderBottomRightRadius: 0}}
               className={style({
diff --git a/packages/dev/s2-docs/src/MobileHeader.tsx b/packages/dev/s2-docs/src/MobileHeader.tsx
index 07f4f215dd9..4d3d5eb5e16 100644
--- a/packages/dev/s2-docs/src/MobileHeader.tsx
+++ b/packages/dev/s2-docs/src/MobileHeader.tsx
@@ -124,7 +124,7 @@ export function MobileHeader({toc, pages, currentPage}) {
           flexGrow: 1
         })}>
         <AdobeLogo />
-        <h2 
+        <h2
           className={style({
             font: 'heading-sm',
             marginY: 0,

From 0ecf094c02676ddbbf4d686832a83f438b9e3f60 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 16 Sep 2025 15:02:38 -0700
Subject: [PATCH 02/17] add title font size resizing behavior to s2 docs

---
 packages/dev/s2-docs/src/Layout.tsx       | 25 ++----------
 packages/dev/s2-docs/src/TitleResizer.tsx | 47 +++++++++++++++++++++++
 2 files changed, 50 insertions(+), 22 deletions(-)
 create mode 100644 packages/dev/s2-docs/src/TitleResizer.tsx

diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx
index 9ec130fa666..4a064c973c5 100644
--- a/packages/dev/s2-docs/src/Layout.tsx
+++ b/packages/dev/s2-docs/src/Layout.tsx
@@ -15,6 +15,7 @@ import {PickerItem, Provider} from '@react-spectrum/s2';
 import {PropTable} from './PropTable';
 import {StateTable} from './StateTable';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+import {TitleResizer} from './TitleResizer';
 import {TypeLink} from './types';
 import {VisualExample} from './VisualExample';
 
@@ -96,28 +97,8 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
             lg: 'none'
           }
         })}>
-        <div
-          className={style({
-            isolation: 'isolate',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            maxWidth: {
-              default: 'full',
-              lg: 1280
-            },
-            marginX: 'auto',
-            marginY: 0,
-            padding: {
-              default: 0,
-              lg: 12
-            },
-            paddingBottom: 0,
-            gap: {
-              default: 0,
-              lg: 12
-            }
-          })}>
+        <div className={style({isolation: 'isolate', width: 'full'})}>
+          <TitleResizer />
           <Header pages={pages} currentPage={currentPage} />
           <MobileHeader
             toc={<MobileToc key="toc" toc={currentPage.tableOfContents ?? []} />}
diff --git a/packages/dev/s2-docs/src/TitleResizer.tsx b/packages/dev/s2-docs/src/TitleResizer.tsx
new file mode 100644
index 00000000000..b837935a8f4
--- /dev/null
+++ b/packages/dev/s2-docs/src/TitleResizer.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import {useCallback, useRef} from 'react';
+import {useLayoutEffect, useResizeObserver} from '@react-aria/utils';
+
+export function TitleResizer() {
+  let titleRef = useRef<HTMLHeadingElement>(null);
+
+  // Size the title to fit the available space.
+  let updateTitleFontSize = useCallback(() => {
+    if (titleRef.current) {
+      let fontSize = parseInt(window.getComputedStyle(titleRef.current).fontSize, 10);
+
+      // Constrain font size to 58px, or 10% of the window width, whichever is smaller.
+      let maxFontSize = Math.min(58, Math.round(window.innerWidth * 0.1));
+      if (fontSize > maxFontSize) {
+        fontSize = maxFontSize;
+        titleRef.current.style.fontSize = maxFontSize + 'px';
+      }
+
+      // If the font size is less than the maximum font size,
+      // increase the font size until it overflows.
+      while (fontSize < maxFontSize && titleRef.current.scrollWidth <= titleRef.current.clientWidth) {
+        fontSize++;
+        titleRef.current.style.fontSize = fontSize + 'px';
+      }
+
+      // Reduce the font size until it doesn't overflow.
+      while (fontSize > 10 && titleRef.current.scrollWidth > titleRef.current.clientWidth + 1) {
+        fontSize--;
+        titleRef.current.style.fontSize = fontSize + 'px';
+      }
+    }
+  }, []);
+
+  useLayoutEffect(() => {
+    titleRef.current = document.querySelector('h1');
+    updateTitleFontSize();
+  }, [updateTitleFontSize]);
+
+  useResizeObserver({
+    ref: titleRef,
+    onResize: updateTitleFontSize
+  });
+
+  return null;
+}

From 96e513876356e923aceee8908c7f2c5258057bef Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 16 Sep 2025 15:15:28 -0700
Subject: [PATCH 03/17] dont use useResizeObserver because we want to catch
 fonts changing

---
 packages/dev/s2-docs/src/TitleResizer.tsx | 40 +++++++++++++++++++----
 1 file changed, 34 insertions(+), 6 deletions(-)

diff --git a/packages/dev/s2-docs/src/TitleResizer.tsx b/packages/dev/s2-docs/src/TitleResizer.tsx
index b837935a8f4..b1f5d1ef246 100644
--- a/packages/dev/s2-docs/src/TitleResizer.tsx
+++ b/packages/dev/s2-docs/src/TitleResizer.tsx
@@ -1,10 +1,13 @@
 'use client';
 
 import {useCallback, useRef} from 'react';
-import {useLayoutEffect, useResizeObserver} from '@react-aria/utils';
+import {useLayoutEffect} from '@react-aria/utils';
 
+// TODO: this causes a flash when the headings change size, maybe we just move this code
+// to client and append suppressHydrationWarning to the h1s
 export function TitleResizer() {
   let titleRef = useRef<HTMLHeadingElement>(null);
+  let raf = useRef<number | null>(null);
 
   // Size the title to fit the available space.
   let updateTitleFontSize = useCallback(() => {
@@ -35,13 +38,38 @@ export function TitleResizer() {
 
   useLayoutEffect(() => {
     titleRef.current = document.querySelector('h1');
+
+    if (titleRef.current == null) {
+      return;
+    }
+
     updateTitleFontSize();
-  }, [updateTitleFontSize]);
+    // Use ResizeObserver where available to detect size changes not related to window resizing, e.g. font loading.
+    if (typeof ResizeObserver !== 'undefined') {
+      let observer = new ResizeObserver(() => {
+        if (!raf.current) {
+          // Avoid updating the layout during the resize event and creating circular notifications.
+          raf.current = requestAnimationFrame(() => {
+            updateTitleFontSize();
+            raf.current = null;
+          });
+        }
+      });
+      observer.observe(titleRef.current);
 
-  useResizeObserver({
-    ref: titleRef,
-    onResize: updateTitleFontSize
-  });
+      return () => {
+        observer.disconnect();
+        if (raf.current) {
+          cancelAnimationFrame(raf.current);
+        }
+      };
+    } else {
+      window.addEventListener('resize', updateTitleFontSize);
+      return () => {
+        window.removeEventListener('resize', updateTitleFontSize);
+      };
+    }
+  }, [updateTitleFontSize]);
 
   return null;
 }

From 8827283166712c9e2e225ed4e14e877a1a4f379e Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 16 Sep 2025 16:21:31 -0700
Subject: [PATCH 04/17] fix mobile header icon and library label

---
 packages/dev/s2-docs/src/Layout.tsx              | 4 ++--
 packages/dev/s2-docs/src/MobileHeader.tsx        | 9 ++++++---
 packages/dev/s2-docs/src/client.tsx              | 2 +-
 packages/dev/s2-docs/src/icons/ReactAriaLogo.tsx | 8 +++++---
 4 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx
index 4a064c973c5..cb8157452a7 100644
--- a/packages/dev/s2-docs/src/Layout.tsx
+++ b/packages/dev/s2-docs/src/Layout.tsx
@@ -101,9 +101,9 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
           <TitleResizer />
           <Header pages={pages} currentPage={currentPage} />
           <MobileHeader
+            currentPage={currentPage}
             toc={<MobileToc key="toc" toc={currentPage.tableOfContents ?? []} />}
-            pages={pages}
-            currentPage={currentPage} />
+            pages={pages} />
           <div className={style({display: 'flex', width: 'full'})}>
             <Nav pages={pages} currentPage={currentPage} />
             <main
diff --git a/packages/dev/s2-docs/src/MobileHeader.tsx b/packages/dev/s2-docs/src/MobileHeader.tsx
index 4d3d5eb5e16..f94a807e163 100644
--- a/packages/dev/s2-docs/src/MobileHeader.tsx
+++ b/packages/dev/s2-docs/src/MobileHeader.tsx
@@ -1,12 +1,12 @@
 'use client';
 
 import {ActionButton, DialogTrigger} from '@react-spectrum/s2';
-import {AdobeLogo} from './AdobeLogo';
 import {keyframes} from '../../../@react-spectrum/s2/style/style-macro' with {type: 'macro'};
 import MenuHamburger from '@react-spectrum/s2/icons/MenuHamburger';
 import {Modal} from '../../../@react-spectrum/s2/src/Modal';
 import React, {CSSProperties, lazy, useEffect, useRef} from 'react';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+import {TAB_DEFS} from './constants';
 
 const MobileSearchMenu = lazy(() => import('./SearchMenu').then(({MobileSearchMenu}) => ({default: MobileSearchMenu})));
 
@@ -80,6 +80,9 @@ export function MobileHeader({toc, pages, currentPage}) {
     }
   }, []);
 
+  let currentLibrary = getCurrentLibrary(currentPage);
+  let icon = TAB_DEFS[currentLibrary].icon;
+
   return (
     <div
       ref={ref}
@@ -123,7 +126,7 @@ export function MobileHeader({toc, pages, currentPage}) {
           alignItems: 'center',
           flexGrow: 1
         })}>
-        <AdobeLogo />
+        {icon}
         <h2
           className={style({
             font: 'heading-sm',
@@ -135,7 +138,7 @@ export function MobileHeader({toc, pages, currentPage}) {
             animationTimeline: 'scroll()',
             animationRange
           } as CSSProperties}>
-          React Aria
+          {TAB_DEFS[currentLibrary].label}
         </h2>
       </div>
       <div
diff --git a/packages/dev/s2-docs/src/client.tsx b/packages/dev/s2-docs/src/client.tsx
index 4471c218992..76fbe633aa9 100644
--- a/packages/dev/s2-docs/src/client.tsx
+++ b/packages/dev/s2-docs/src/client.tsx
@@ -12,7 +12,7 @@ let updateRoot = hydrate({
 });
 
 // A very simple router. When we navigate, we'll fetch a new RSC payload from the server,
-// and in a React transition, stream in the new page. Once complete, we'll pushState to 
+// and in a React transition, stream in the new page. Once complete, we'll pushState to
 // update the URL in the browser.
 async function navigate(pathname: string, push = false) {
   let res = fetchRSC<ReactElement>(pathname.replace('.html', '.rsc'));
diff --git a/packages/dev/s2-docs/src/icons/ReactAriaLogo.tsx b/packages/dev/s2-docs/src/icons/ReactAriaLogo.tsx
index 9fc3482168b..58e0bcf5805 100644
--- a/packages/dev/s2-docs/src/icons/ReactAriaLogo.tsx
+++ b/packages/dev/s2-docs/src/icons/ReactAriaLogo.tsx
@@ -1,11 +1,13 @@
-import React from 'react';
+import React, {useId} from 'react';
 import {style} from '@react-spectrum/s2/style' with { type: 'macro' };
 
 export const ReactAriaLogo = () => {
+  const clipPathId = `react-aria-logo-clip-${useId()}`;
+
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" className={style({margin: 0, height: 40, width: 40})}>
       <defs>
-        <clipPath id="a">
+        <clipPath id={clipPathId}>
           <path
             d="M80 136c30.93 0 56-25.07 56-56s-25.07-56-56-56-56 25.07-56 56 25.07 56 56 56Zm8.48-86.3c0 4.69-3.8 8.48-8.48 8.48s-8.48-3.8-8.48-8.48 3.8-8.48 8.48-8.48 8.48 3.8 8.48 8.48ZM51.09 61.78c.52-1.8 2.39-2.85 4.2-2.33a89.865 89.865 0 0 0 48.82.17l.64-.18c1.81-.5 3.68.55 4.18 2.36a3.39 3.39 0 0 1-2.36 4.18l-.64.18a97.139 97.139 0 0 1-15.51 2.98c-1.03.11-1.82.97-1.82 2.01v14.89c0 .18.03.37.08.55 1.37 4.83 2.94 10.39 4.32 15.27.98 3.46 1.86 6.58 2.49 8.85.32 1.14.58 2.06.76 2.71l.04.15c.13.48.27.97.31 1.16a3.38 3.38 0 0 1-2.66 3.99 3.38 3.38 0 0 1-3.99-2.66c.02.09 0 .04-.08-.27-.04-.13-.09-.31-.15-.54-.18-.65-.44-1.57-.76-2.7-.64-2.27-1.52-5.39-2.49-8.85l-3.74-13.21a1.992 1.992 0 0 0-1.92-1.45h-1.6c-.89 0-1.68.59-1.92 1.45-1.22 4.3-2.55 9.01-3.74 13.21-.98 3.46-1.85 6.58-2.49 8.85-.32 1.13-.58 2.06-.76 2.7-.06.23-.11.41-.15.54-.09.31-.1.36-.08.27a3.39 3.39 0 1 1-6.65-1.33c.04-.18.18-.68.31-1.16l.04-.15c.18-.65.44-1.58.76-2.71.64-2.27 1.52-5.39 2.49-8.85 1.38-4.88 2.95-10.44 4.32-15.27.05-.18.08-.36.08-.55V71.16c0-1.04-.79-1.9-1.82-2.01a96.504 96.504 0 0 1-16.17-3.17 3.395 3.395 0 0 1-2.33-4.2Z"
             style={{
@@ -22,7 +24,7 @@ export const ReactAriaLogo = () => {
         }} />
       <g
         style={{
-          clipPath: 'url(#a)'
+          clipPath: `url(#${clipPathId})`
         }}>
         <path
           d="M15.79 17.64H147v126.14H15.79z"

From ebc6a230f42cdc868b928b9b48025386175c2f54 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 4 Sep 2025 11:51:13 -0700
Subject: [PATCH 05/17] fix cross page anchor navigation scrolling and mobile
 cross page navigation scroll positioning

---
 packages/dev/s2-docs/src/client.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/dev/s2-docs/src/client.tsx b/packages/dev/s2-docs/src/client.tsx
index 76fbe633aa9..890511ae0b0 100644
--- a/packages/dev/s2-docs/src/client.tsx
+++ b/packages/dev/s2-docs/src/client.tsx
@@ -16,11 +16,25 @@ let updateRoot = hydrate({
 // update the URL in the browser.
 async function navigate(pathname: string, push = false) {
   let res = fetchRSC<ReactElement>(pathname.replace('.html', '.rsc'));
+  let currentPath = location.pathname;
+  let [newBasePath, newPathAnchor] = pathname.split('#');
+
   updateRoot(res, () => {
     if (push) {
       history.pushState(null, '', pathname);
       push = false;
     }
+
+    // Reset scroll if navigating to a different page without an anchor, primarily for the mobile case.
+    // Otherwise, make sure to scroll the anchor into view if any
+    if (currentPath !== newBasePath && !newPathAnchor) {
+      window.scrollTo(0, 0);
+    } else if (newPathAnchor) {
+      let element = document.getElementById(newPathAnchor);
+      if (element) {
+        element.scrollIntoView();
+      }
+    }
   });
 }
 

From 36b046318181089788b64f138e74bc74f01311a1 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 18 Sep 2025 10:27:49 -0700
Subject: [PATCH 06/17] properly close mobile header menu when clicking on
 component card

---
 packages/dev/s2-docs/src/MobileHeader.tsx | 3 ++-
 packages/dev/s2-docs/src/Nav.tsx          | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/dev/s2-docs/src/MobileHeader.tsx b/packages/dev/s2-docs/src/MobileHeader.tsx
index f94a807e163..275f388b58e 100644
--- a/packages/dev/s2-docs/src/MobileHeader.tsx
+++ b/packages/dev/s2-docs/src/MobileHeader.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import {ActionButton, DialogTrigger} from '@react-spectrum/s2';
+import {getLibraryFromPage} from './library';
 import {keyframes} from '../../../@react-spectrum/s2/style/style-macro' with {type: 'macro'};
 import MenuHamburger from '@react-spectrum/s2/icons/MenuHamburger';
 import {Modal} from '../../../@react-spectrum/s2/src/Modal';
@@ -80,7 +81,7 @@ export function MobileHeader({toc, pages, currentPage}) {
     }
   }, []);
 
-  let currentLibrary = getCurrentLibrary(currentPage);
+  let currentLibrary = getLibraryFromPage(currentPage);
   let icon = TAB_DEFS[currentLibrary].icon;
 
   return (
diff --git a/packages/dev/s2-docs/src/Nav.tsx b/packages/dev/s2-docs/src/Nav.tsx
index 1906807a836..ac39c329d61 100644
--- a/packages/dev/s2-docs/src/Nav.tsx
+++ b/packages/dev/s2-docs/src/Nav.tsx
@@ -225,7 +225,7 @@ export function MobileOnPageNav({children}) {
           visible.delete(entry.target);
         }
       }
-      
+
       let lastVisible = elements.find(e => visible.has(e));
       if (lastVisible) {
         setSelected('#' + lastVisible.id!);

From 52f64c583fb485246b2dcf10f4821a03c586fabf Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 18 Sep 2025 11:15:37 -0700
Subject: [PATCH 07/17] making image coordinator example wrap to new row
 instead of squishing the images at small screen sizes

---
 packages/dev/s2-docs/pages/s2/Image.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dev/s2-docs/pages/s2/Image.mdx b/packages/dev/s2-docs/pages/s2/Image.mdx
index 65c47c19e75..1e0f7c09c29 100644
--- a/packages/dev/s2-docs/pages/s2/Image.mdx
+++ b/packages/dev/s2-docs/pages/s2/Image.mdx
@@ -54,7 +54,7 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
   <div
     className={style({
       display: 'grid',
-      gridTemplateColumns: '1fr 1fr 1fr 1fr',
+      gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))',
       gridTemplateRows: [180],
       gap: 8
     })}>

From c7c7a30e545a70267070366ff968ae41286727b9 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 18 Sep 2025 11:39:19 -0700
Subject: [PATCH 08/17] set a minwidth large enough so disallowEmptySelection
 have its label wrap

---
 packages/dev/s2-docs/src/VisualExample.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dev/s2-docs/src/VisualExample.tsx b/packages/dev/s2-docs/src/VisualExample.tsx
index ca002640e26..c22d18533de 100644
--- a/packages/dev/s2-docs/src/VisualExample.tsx
+++ b/packages/dev/s2-docs/src/VisualExample.tsx
@@ -56,7 +56,7 @@ const exampleStyle = style({
 const controlsStyle = style({
   display: 'grid',
   gridTemplateColumns: {
-    default: 'repeat(auto-fit, minmax(130px, 1fr))',
+    default: 'repeat(auto-fit, minmax(200px, 1fr))',
     lg: ['1fr']
   },
   gridAutoFlow: 'dense',

From 987cff4bea11b3eb5d7144ef0d5579e5d1e84ace Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 18 Sep 2025 12:30:18 -0700
Subject: [PATCH 09/17] properly reobserve the new page post-navigation so the
 page nav picker updates during scroll on mobile

this is because the page doesnt actually remount, we reuse the existing component tree
---
 packages/dev/s2-docs/src/Layout.tsx | 4 ++--
 packages/dev/s2-docs/src/Nav.tsx    | 6 ++----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx
index cb8157452a7..4efa65f5482 100644
--- a/packages/dev/s2-docs/src/Layout.tsx
+++ b/packages/dev/s2-docs/src/Layout.tsx
@@ -184,9 +184,9 @@ function Toc({toc}) {
   );
 }
 
-function MobileToc({toc}) {
+function MobileToc({toc, currentPage}) {
   return (
-    <MobileOnPageNav>
+    <MobileOnPageNav currentPage={currentPage}>
       {renderMobileToc(toc)}
     </MobileOnPageNav>
   );
diff --git a/packages/dev/s2-docs/src/Nav.tsx b/packages/dev/s2-docs/src/Nav.tsx
index ac39c329d61..12d99bf5c93 100644
--- a/packages/dev/s2-docs/src/Nav.tsx
+++ b/packages/dev/s2-docs/src/Nav.tsx
@@ -209,13 +209,11 @@ export function OnPageNav({children}) {
   );
 }
 
-export function MobileOnPageNav({children}) {
+export function MobileOnPageNav({children, currentPage}) {
   let [selected, setSelected] = useState('');
-
   useEffect(() => {
     let elements = Array.from(document.querySelectorAll('article > :is(h1,h2,h3,h4,h5)'));
     elements.reverse();
-
     let visible = new Set();
     let observer = new IntersectionObserver(entries => {
       for (let entry of entries) {
@@ -244,7 +242,7 @@ export function MobileOnPageNav({children}) {
     }
 
     return () => observer.disconnect();
-  }, []);
+  }, [currentPage]);
 
   return (
     <Picker aria-label="Table of contents" selectedKey={selected} isQuiet size="L">

From 48b0cd1d956b3b6c30f6f897063f8ab27d99d959 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Mon, 29 Sep 2025 10:28:57 -0700
Subject: [PATCH 10/17] remove broken title resizer code and fix rebase

---
 packages/dev/s2-docs/src/Layout.tsx           |  4 +-
 packages/dev/s2-docs/src/MobileSearchMenu.tsx | 36 ++++-----
 packages/dev/s2-docs/src/TitleResizer.tsx     | 75 -------------------
 3 files changed, 17 insertions(+), 98 deletions(-)
 delete mode 100644 packages/dev/s2-docs/src/TitleResizer.tsx

diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx
index 4efa65f5482..1a4c555522b 100644
--- a/packages/dev/s2-docs/src/Layout.tsx
+++ b/packages/dev/s2-docs/src/Layout.tsx
@@ -15,7 +15,6 @@ import {PickerItem, Provider} from '@react-spectrum/s2';
 import {PropTable} from './PropTable';
 import {StateTable} from './StateTable';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
-import {TitleResizer} from './TitleResizer';
 import {TypeLink} from './types';
 import {VisualExample} from './VisualExample';
 
@@ -98,11 +97,10 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
           }
         })}>
         <div className={style({isolation: 'isolate', width: 'full'})}>
-          <TitleResizer />
           <Header pages={pages} currentPage={currentPage} />
           <MobileHeader
             currentPage={currentPage}
-            toc={<MobileToc key="toc" toc={currentPage.tableOfContents ?? []} />}
+            toc={<MobileToc key="toc" toc={currentPage.tableOfContents ?? []} currentPage={currentPage} />}
             pages={pages} />
           <div className={style({display: 'flex', width: 'full'})}>
             <Nav pages={pages} currentPage={currentPage} />
diff --git a/packages/dev/s2-docs/src/MobileSearchMenu.tsx b/packages/dev/s2-docs/src/MobileSearchMenu.tsx
index bf737f61ff5..faff5daaae8 100644
--- a/packages/dev/s2-docs/src/MobileSearchMenu.tsx
+++ b/packages/dev/s2-docs/src/MobileSearchMenu.tsx
@@ -2,13 +2,13 @@
 
 import {CloseButton, Content, Heading, IllustratedMessage, SearchField, Tab, TabList, TabPanel, Tabs, Tag, TagGroup} from '@react-spectrum/s2';
 import {ComponentCardItem, ComponentCardView} from './ComponentCardView';
-import {composeRenderProps, OverlayTriggerStateContext, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';
 import {getLibraryFromPage} from './library';
 import {type Library, TAB_DEFS} from './constants';
 // eslint-disable-next-line monorepo/no-internal-import
 import NoSearchResults from '@react-spectrum/s2/illustrations/linear/NoSearchResults';
+import {OverlayTriggerStateContext, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';
 import type {PageProps} from '@parcel/rsc';
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 
@@ -55,13 +55,7 @@ const MobileCustomDialog = function MobileCustomDialog(props: MobileDialogProps)
   return (
     <RACDialog
       {...props}
-      className={dialogStyle({padding})}>
-      {composeRenderProps(props.children, (children) => (
-        <OverlayTriggerStateContext.Provider value={null}>
-          {children}
-        </OverlayTriggerStateContext.Provider>
-      ))}
-    </RACDialog>
+      className={dialogStyle({padding})} />
   );
 };
 
@@ -103,7 +97,7 @@ function MobileNav({pages, currentPage}: PageProps) {
     });
     return sectionArray;
   }, [getSectionsForLibrary, selectedLibrary]);
-  
+
 
   useEffect(() => {
       // Auto-select first section initially or when library changes
@@ -168,7 +162,7 @@ function MobileNav({pages, currentPage}: PageProps) {
     if (!searchValue.trim()) {
       return pages;
     }
-    
+
     let searchLower = searchValue.toLowerCase();
     return pages.filter(page => {
       let pageTitle = title(page).toLowerCase();
@@ -179,9 +173,9 @@ function MobileNav({pages, currentPage}: PageProps) {
   let getSectionContent = (sectionName: string, libraryId: string, searchValue: string = ''): ComponentCardItem[] => {
     let librarySections = getSectionsForLibrary(libraryId);
     let pages = librarySections.get(sectionName) ?? [];
-    
+
     let filteredPages = filterPages(pages, searchValue);
-    
+
     return filteredPages
       .sort((a, b) => title(a).localeCompare(title(b)))
       .map(page => ({id: page.url.replace(/^\//, ''), name: title(page), href: page.url}));
@@ -209,7 +203,7 @@ function MobileNav({pages, currentPage}: PageProps) {
   let getSectionNamesForLibrary = (libraryId: string) => {
     let librarySections = getSectionsForLibrary(libraryId);
     let sectionArray = [...librarySections.keys()];
-    
+
     // Show 'Components' first
     sectionArray.sort((a, b) => {
       if (a === 'Components') {
@@ -220,7 +214,7 @@ function MobileNav({pages, currentPage}: PageProps) {
       }
       return a.localeCompare(b);
     });
-    
+
     return sectionArray;
   };
 
@@ -263,10 +257,11 @@ function MobileNav({pages, currentPage}: PageProps) {
       scrollContainerRef.current.scrollTo({top: 0, behavior: 'auto'});
     }
   }, [selectedSection, selectedLibrary]);
+  let state = useContext(OverlayTriggerStateContext);
 
   return (
     <div className={style({minHeight: '100dvh', paddingBottom: 24, boxSizing: 'border-box'})}>
-      <Tabs 
+      <Tabs
         aria-label="Libraries"
         density="compact"
         selectedKey={selectedLibrary}
@@ -294,16 +289,16 @@ function MobileNav({pages, currentPage}: PageProps) {
               ref={headerRef}
               className={style({position: 'sticky', zIndex: 1, backgroundColor: 'layer-2'})}
               style={{top: tabListHeight}}>
-              <SearchField 
-                aria-label="Search" 
+              <SearchField
+                aria-label="Search"
                 value={searchValue}
                 onChange={handleSearchChange}
                 onFocus={handleSearchFocus}
                 onBlur={handleSearchBlur}
                 styles={style({marginY: 12})} />
               <TagGroup
-                aria-label="Navigation sections" 
-                selectionMode="single" 
+                aria-label="Navigation sections"
+                selectionMode="single"
                 selectedKeys={selectedSection ? [selectedSection] : []}
                 onSelectionChange={handleTagSelection}
                 styles={style({margin: 12})}
@@ -313,6 +308,7 @@ function MobileNav({pages, currentPage}: PageProps) {
             </div>
             <div ref={scrollContainerRef}>
               <ComponentCardView
+                onAction={() => state?.close()}
                 items={getItemsForSelection(selectedSection, library.id, searchValue)}
                 ariaLabel="Pages"
                 size="S"
diff --git a/packages/dev/s2-docs/src/TitleResizer.tsx b/packages/dev/s2-docs/src/TitleResizer.tsx
deleted file mode 100644
index b1f5d1ef246..00000000000
--- a/packages/dev/s2-docs/src/TitleResizer.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-'use client';
-
-import {useCallback, useRef} from 'react';
-import {useLayoutEffect} from '@react-aria/utils';
-
-// TODO: this causes a flash when the headings change size, maybe we just move this code
-// to client and append suppressHydrationWarning to the h1s
-export function TitleResizer() {
-  let titleRef = useRef<HTMLHeadingElement>(null);
-  let raf = useRef<number | null>(null);
-
-  // Size the title to fit the available space.
-  let updateTitleFontSize = useCallback(() => {
-    if (titleRef.current) {
-      let fontSize = parseInt(window.getComputedStyle(titleRef.current).fontSize, 10);
-
-      // Constrain font size to 58px, or 10% of the window width, whichever is smaller.
-      let maxFontSize = Math.min(58, Math.round(window.innerWidth * 0.1));
-      if (fontSize > maxFontSize) {
-        fontSize = maxFontSize;
-        titleRef.current.style.fontSize = maxFontSize + 'px';
-      }
-
-      // If the font size is less than the maximum font size,
-      // increase the font size until it overflows.
-      while (fontSize < maxFontSize && titleRef.current.scrollWidth <= titleRef.current.clientWidth) {
-        fontSize++;
-        titleRef.current.style.fontSize = fontSize + 'px';
-      }
-
-      // Reduce the font size until it doesn't overflow.
-      while (fontSize > 10 && titleRef.current.scrollWidth > titleRef.current.clientWidth + 1) {
-        fontSize--;
-        titleRef.current.style.fontSize = fontSize + 'px';
-      }
-    }
-  }, []);
-
-  useLayoutEffect(() => {
-    titleRef.current = document.querySelector('h1');
-
-    if (titleRef.current == null) {
-      return;
-    }
-
-    updateTitleFontSize();
-    // Use ResizeObserver where available to detect size changes not related to window resizing, e.g. font loading.
-    if (typeof ResizeObserver !== 'undefined') {
-      let observer = new ResizeObserver(() => {
-        if (!raf.current) {
-          // Avoid updating the layout during the resize event and creating circular notifications.
-          raf.current = requestAnimationFrame(() => {
-            updateTitleFontSize();
-            raf.current = null;
-          });
-        }
-      });
-      observer.observe(titleRef.current);
-
-      return () => {
-        observer.disconnect();
-        if (raf.current) {
-          cancelAnimationFrame(raf.current);
-        }
-      };
-    } else {
-      window.addEventListener('resize', updateTitleFontSize);
-      return () => {
-        window.removeEventListener('resize', updateTitleFontSize);
-      };
-    }
-  }, [updateTitleFontSize]);
-
-  return null;
-}

From 74ef7677d1ecb60da600fcfd79ff61eb3bf3356b Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Mon, 29 Sep 2025 11:54:28 -0700
Subject: [PATCH 11/17] restore styles

---
 packages/dev/s2-docs/src/Layout.tsx | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx
index 1a4c555522b..8fd5c0809a9 100644
--- a/packages/dev/s2-docs/src/Layout.tsx
+++ b/packages/dev/s2-docs/src/Layout.tsx
@@ -96,7 +96,28 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
             lg: 'none'
           }
         })}>
-        <div className={style({isolation: 'isolate', width: 'full'})}>
+        <div
+          className={style({
+            isolation: 'isolate',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            maxWidth: {
+              default: 'full',
+              lg: 1280
+            },
+            marginX: 'auto',
+            marginY: 0,
+            padding: {
+              default: 0,
+              lg: 12
+            },
+            paddingBottom: 0,
+            gap: {
+              default: 0,
+              lg: 12
+            }
+          })}>
           <Header pages={pages} currentPage={currentPage} />
           <MobileHeader
             currentPage={currentPage}

From 451ac675a9e2590f29fcd09da958a0dd65087170 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 2 Oct 2025 16:14:09 -0700
Subject: [PATCH 12/17] fix internationalized logo

---
 packages/dev/s2-docs/src/MobileSearchMenu.tsx         |  2 +-
 .../dev/s2-docs/src/icons/InternationalizedLogo.tsx   | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/dev/s2-docs/src/MobileSearchMenu.tsx b/packages/dev/s2-docs/src/MobileSearchMenu.tsx
index 72f81ca6dca..6109401f328 100644
--- a/packages/dev/s2-docs/src/MobileSearchMenu.tsx
+++ b/packages/dev/s2-docs/src/MobileSearchMenu.tsx
@@ -209,7 +209,7 @@ const MobileCustomDialog = function MobileCustomDialog(props: MobileDialogProps)
 };
 
 function MobileNav({pages, currentPage}: PageProps) {
-  let overlayTriggerState = React.useContext(OverlayTriggerStateContext);
+  let overlayTriggerState = useContext(OverlayTriggerStateContext);
   let [searchFocused, setSearchFocused] = useState(false);
   let [searchValue, setSearchValue] = useState('');
   let [selectedSection, setSelectedSection] = useState<string | undefined>(undefined);
diff --git a/packages/dev/s2-docs/src/icons/InternationalizedLogo.tsx b/packages/dev/s2-docs/src/icons/InternationalizedLogo.tsx
index 5669b147dec..85969944894 100644
--- a/packages/dev/s2-docs/src/icons/InternationalizedLogo.tsx
+++ b/packages/dev/s2-docs/src/icons/InternationalizedLogo.tsx
@@ -1,6 +1,7 @@
-import React from 'react';
+import React, {useId} from 'react';
 
 export const InternationalizedLogo = ({size = 32}) => {
+  const clipPathId = `internationalized-logo-clip-${useId()}`;
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -8,12 +9,12 @@ export const InternationalizedLogo = ({size = 32}) => {
       viewBox="15 17 135 128"
       style={{width: size, height: size}}>
       <defs>
-        <clipPath id="clippath">
+        <clipPath id={clipPathId}>
           <path
             d="M23.98 79.99c0-17.01 7.58-32.25 19.54-42.52.92 2.02 2.32 4.67 4 7.13 1.05 1.54 2.28 3.1 3.65 4.41 1.33 1.27 3.04 2.55 5.08 3.13 3.29.94 7.1.8 9.98.7l.88-.03c1.63-.05 2.94-.07 4.03.05 1.11.11 1.57.33 1.71.42.31.2.39.37.41.43.03.08.07.22.03.46-.09.52-.53 1.28-1.4 1.76-2.07 1.15-4.14 2.6-5.69 4.59-1.63 2.09-2.54 4.6-2.54 7.55 0 .86-.07 1.4-.15 1.72v.03c-.28.06-.81.1-1.7.03-.27-.02-.55-.05-.86-.07-2.32-.21-5.69-.5-8.87-.17-3.54.37-8.1 1.64-10.56 5.96-1.08 1.89-2.33 5.04-2.03 8.8.31 3.92 2.27 7.99 6.71 11.55 5.12 4.1 10.75 4.98 18.12 5.8 4.2.47 6.58 1.37 7.94 2.33 1.19.84 1.85 1.9 2.18 3.55.58 2.88-.4 7.19-2.43 12.45-.97 2.52-2.11 5.05-3.24 7.52-.25.54-.5 1.08-.74 1.61-.81 1.76-1.61 3.47-2.27 5.03C41.73 127.9 24 106.03 24 80.02Zm26.36-46.91c-.07-.17-.15-.33-.24-.49a55.64 55.64 0 0 1 12.37-5.84c.05.3.14.6.26.89 2.06 4.9 8.3 10.94 16.68 10.94 4.33 0 7.8-1.86 10.35-3.97 2.53-2.1 4.34-4.6 5.47-6.33.41-.63.62-1.34.65-2.04.69.2 1.37.42 2.05.65-.06.18-.1.37-.13.57-.67 4.46-1.44 10.7-.74 16.34.69 5.54 3.01 11.91 9.76 14.25 5.36 1.86 10.66.94 14.8-.9 2.74-1.22 5.23-2.96 7.07-4.9 2.11 3.7 3.81 7.65 5.04 11.81l-1.75-.36c-3.01-.59-7.06-1.26-11.28-1.54-4.16-.28-8.77-.19-12.78.91-4.02 1.1-8.1 3.44-9.84 8.13-4.86 13.11 1.7 21.06 3.39 22.75 2.55 2.55 5.17 3.75 7.1 4.62.23.11.46.21.67.31 1.86.87 3.19 1.63 4.54 3.58.47.67.94 1.89 1.3 3.74.34 1.8.52 3.89.58 6.11.07 2.2.02 4.41-.04 6.43l-.06 1.63c-.04 1.08-.07 2.1-.09 2.95a55.775 55.775 0 0 1-35.48 12.67c-2.09 0-4.15-.11-6.18-.34.44-.97.91-1.99 1.41-3.08.26-.55.52-1.12.79-1.71 1.15-2.49 2.37-5.21 3.44-7.97 2.05-5.28 3.89-11.54 2.82-16.9-.67-3.35-2.3-6.32-5.41-8.51-2.94-2.07-6.85-3.21-11.67-3.74-7.46-.83-10.89-1.6-14.01-4.09-2.9-2.32-3.62-4.43-3.74-5.93-.13-1.67.44-3.21 1-4.2.51-.9 1.72-1.68 4.44-1.97 2.35-.25 4.9-.03 7.3.18.31.03.62.05.93.08 2.86.24 5.98-.1 8.18-2.42 2.06-2.18 2.33-5.13 2.33-7.33 0-1.17.32-1.95.86-2.64.61-.79 1.63-1.6 3.26-2.51 2.83-1.57 4.87-4.32 5.4-7.4.56-3.26-.64-6.73-3.89-8.9-1.72-1.14-3.68-1.55-5.33-1.72-1.68-.17-3.48-.13-5.1-.08-.22 0-.44.01-.65.02-3.22.11-5.75.19-7.75-.38-.27-.08-.86-.38-1.74-1.22-.84-.8-1.72-1.89-2.58-3.15-1.73-2.53-3.12-5.37-3.79-7Zm73.36 81.97a55.79 55.79 0 0 0 12.32-35.06c0-2.49-.16-4.94-.48-7.34-.05 0-.09-.02-.12-.02-.14-.03-.29-.06-.42-.09-.2-.04-.45-.1-.74-.16l-.35-.08c-.87-.2-2.06-.46-3.47-.73-2.84-.56-6.52-1.16-10.27-1.41-3.81-.25-7.38-.11-10.13.64-2.73.75-3.97 1.89-4.45 3.2-3.38 9.13 1.14 13.91 1.55 14.32 1.49 1.49 2.84 2.11 4.77 3 .23.11.47.22.73.34 2.42 1.13 5.22 2.64 7.73 6.27 1.39 2 2.14 4.47 2.58 6.79.46 2.38.65 4.94.72 7.37.03 1 .04 1.99.03 2.96Zm.28-69.78a56.276 56.276 0 0 0-18.47-15.18c-.57 4.1-.99 8.75-.5 12.73.56 4.56 2.1 6.86 4.44 7.68 2.96 1.03 6.11.6 8.92-.65 2.91-1.3 4.85-3.21 5.46-4.32.05-.09.1-.18.16-.26ZM80 23.96c2.75 0 5.46.2 8.11.58-.9 1.31-2.06 2.75-3.46 3.91-1.61 1.33-3.33 2.13-5.24 2.13-4.39 0-7.99-3.27-9.19-5.78 3.17-.56 6.44-.85 9.78-.85Z"
             className="st0" />
         </clipPath>
-        <clipPath id="clippath-1">
+        <clipPath id={`${clipPathId}-1`}>
           <path
             d="M23.98 80c0-17.01 7.58-32.25 19.54-42.52.92 2.02 2.32 4.67 4 7.13 1.05 1.54 2.28 3.1 3.65 4.41 1.33 1.27 3.04 2.55 5.08 3.13 3.29.94 7.1.8 9.98.7l.88-.03c1.63-.05 2.94-.07 4.03.05 1.11.11 1.57.33 1.71.42.31.2.39.37.41.43.03.08.07.22.03.46-.09.52-.53 1.28-1.4 1.76-2.07 1.15-4.14 2.6-5.69 4.59-1.63 2.09-2.54 4.6-2.54 7.55 0 .86-.07 1.4-.15 1.72v.03c-.28.06-.81.1-1.7.03-.27-.02-.55-.05-.86-.07-2.32-.21-5.69-.5-8.87-.17-3.54.37-8.1 1.64-10.56 5.96-1.08 1.89-2.33 5.04-2.03 8.8.31 3.92 2.27 7.99 6.71 11.55 5.12 4.1 10.75 4.98 18.12 5.8 4.2.47 6.58 1.37 7.94 2.33 1.19.84 1.85 1.9 2.18 3.55.58 2.88-.4 7.19-2.43 12.45-.97 2.52-2.11 5.05-3.24 7.52-.25.54-.5 1.08-.74 1.61-.81 1.76-1.61 3.47-2.27 5.03C41.73 127.91 24 106.04 24 80.03Zm99.72 35.06A55.79 55.79 0 0 0 136.02 80c0-2.49-.16-4.94-.48-7.34-.05 0-.09-.02-.12-.02-.14-.03-.29-.06-.42-.09-.2-.04-.45-.1-.74-.16l-.35-.08c-.87-.2-2.06-.46-3.47-.73-2.84-.56-6.52-1.16-10.27-1.41-3.81-.25-7.38-.11-10.13.64-2.73.75-3.97 1.89-4.45 3.2-3.38 9.13 1.14 13.91 1.55 14.32 1.49 1.49 2.84 2.11 4.77 3 .23.11.47.22.73.34 2.42 1.13 5.22 2.64 7.73 6.27 1.39 2 2.14 4.47 2.58 6.79.46 2.38.65 4.94.72 7.37.03 1 .04 1.99.03 2.96Zm.28-69.77a56.276 56.276 0 0 0-18.47-15.18c-.57 4.1-.99 8.75-.5 12.73.56 4.56 2.1 6.86 4.44 7.68 2.96 1.03 6.11.6 8.92-.65 2.91-1.3 4.85-3.21 5.46-4.32.05-.09.1-.18.16-.26ZM80 23.98c2.75 0 5.46.2 8.11.58-.9 1.31-2.06 2.75-3.46 3.91-1.61 1.33-3.33 2.13-5.24 2.13-4.39 0-7.99-3.27-9.19-5.78 3.17-.56 6.44-.85 9.78-.85Z"
             className="st0" />
@@ -22,7 +23,7 @@ export const InternationalizedLogo = ({size = 32}) => {
       </defs>
       <g
         style={{
-          clipPath: 'url(#clippath)'
+          clipPath: `url(#${clipPathId})`
         }}>
         <path
           d="M15 17h135v128H15z"
@@ -32,7 +33,7 @@ export const InternationalizedLogo = ({size = 32}) => {
       </g>
       <g
         style={{
-          clipPath: 'url(#clippath-1)'
+          clipPath: `url(#${clipPathId}-1)`
         }}>
         <path
           d="M15 17.01h135v128H15z"

From 1d5918e66fc741039bdec33cbdbd61566da235d3 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Fri, 3 Oct 2025 10:51:44 -0700
Subject: [PATCH 13/17] add 404 page

---
 packages/dev/s2-docs/pages/error.mdx        |  7 ++++
 packages/dev/s2-docs/pages/s2/Accordion.mdx |  2 +
 packages/dev/s2-docs/src/Error.tsx          | 17 ++++++++
 packages/dev/s2-docs/src/Layout.tsx         | 21 ++++++----
 packages/dev/s2-docs/src/client.tsx         | 44 ++++++++++++---------
 5 files changed, 66 insertions(+), 25 deletions(-)
 create mode 100644 packages/dev/s2-docs/pages/error.mdx
 create mode 100644 packages/dev/s2-docs/src/Error.tsx

diff --git a/packages/dev/s2-docs/pages/error.mdx b/packages/dev/s2-docs/pages/error.mdx
new file mode 100644
index 00000000000..a55dee91fc4
--- /dev/null
+++ b/packages/dev/s2-docs/pages/error.mdx
@@ -0,0 +1,7 @@
+import Error from '../src/Error';
+import {Layout} from '../src/Layout';
+export default Layout;
+
+import docs from 'docs:@react-spectrum/s2';
+
+<Error />
diff --git a/packages/dev/s2-docs/pages/s2/Accordion.mdx b/packages/dev/s2-docs/pages/s2/Accordion.mdx
index d8b12ac3907..57408b2b46a 100644
--- a/packages/dev/s2-docs/pages/s2/Accordion.mdx
+++ b/packages/dev/s2-docs/pages/s2/Accordion.mdx
@@ -28,6 +28,8 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 ## Expanding
 
+As described in the docs for [CalendarDate](aweawg.html)
+
 Use the `defaultExpandedKeys` or `expandedKeys` prop to set the expanded items, and `onExpandedChange` to handle user interactions. The expanded keys correspond to the `id` prop of each `<Disclosure>`.
 
 ```tsx render
diff --git a/packages/dev/s2-docs/src/Error.tsx b/packages/dev/s2-docs/src/Error.tsx
new file mode 100644
index 00000000000..86a66910670
--- /dev/null
+++ b/packages/dev/s2-docs/src/Error.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+// eslint-disable-next-line monorepo/no-internal-import
+import BrowserError from '@react-spectrum/s2/illustrations/linear/BrowserError';
+import {Content, Heading, IllustratedMessage} from '@react-spectrum/s2';
+
+export default function Error() {
+  return (
+    <div style={{display: 'flex', alignItems: 'center', height: '50vh', justifyContent: 'center', flexDirection: 'row'}}>
+      <IllustratedMessage>
+        <BrowserError />
+        <Heading>Error 404: Page not found</Heading>
+        <Content>This page isn't available. Try checking the URL or visit a different page.</Content>
+      </IllustratedMessage>
+    </div>
+  );
+}
diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx
index a5f50c0762a..0d1f7a81d4f 100644
--- a/packages/dev/s2-docs/src/Layout.tsx
+++ b/packages/dev/s2-docs/src/Layout.tsx
@@ -74,8 +74,19 @@ const getDescription = (currentPage: Page): string => {
   return library ? `Documentation for ${pageTitle} in ${library}.` : `Documentation for ${pageTitle}.`;
 };
 
+let articleStyles = style({
+  maxWidth: {
+    default: 'none',
+    isWithToC: 768
+  },
+  width: 'full',
+  height: 'fit'
+});
+
+
 export function Layout(props: PageProps & {children: ReactElement<any>}) {
   let {pages, currentPage, children} = props;
+  let hasToC = currentPage.tableOfContents?.[0]?.children && currentPage.tableOfContents[0].children.length > 0;
   return (
     <Provider elementType="html" locale="en" background="layer-1" styles={style({scrollPaddingTop: {default: 64, lg: 0}})}>
       <head>
@@ -156,11 +167,7 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
                 }
               })}>
               <article
-                className={style({
-                  maxWidth: 768,
-                  width: 'full',
-                  height: 'fit'
-                })}>
+                className={articleStyles({isWithToC: hasToC})}>
                 {React.cloneElement(children, {components})}
               </article>
               <aside
@@ -177,10 +184,10 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
                     lg: 'block'
                   }
                 })}>
-                {currentPage.tableOfContents?.[0]?.children && currentPage.tableOfContents[0].children.length > 0 && (
+                {hasToC && (
                   <div className={style({font: 'title', minHeight: 32, paddingX: 12, display: 'flex', alignItems: 'center'})}>Contents</div>
                 )}
-                <Toc toc={currentPage.tableOfContents?.[0]?.children ?? []} /> 
+                <Toc toc={currentPage.tableOfContents?.[0]?.children ?? []} />
               </aside>
             </main>
           </div>
diff --git a/packages/dev/s2-docs/src/client.tsx b/packages/dev/s2-docs/src/client.tsx
index 890511ae0b0..a7b923e4f01 100644
--- a/packages/dev/s2-docs/src/client.tsx
+++ b/packages/dev/s2-docs/src/client.tsx
@@ -15,27 +15,35 @@ let updateRoot = hydrate({
 // and in a React transition, stream in the new page. Once complete, we'll pushState to
 // update the URL in the browser.
 async function navigate(pathname: string, push = false) {
-  let res = fetchRSC<ReactElement>(pathname.replace('.html', '.rsc'));
-  let currentPath = location.pathname;
-  let [newBasePath, newPathAnchor] = pathname.split('#');
+  try {
+    let res = await fetchRSC<ReactElement>(pathname.replace('.html', '.rsc'));
+    let currentPath = location.pathname;
+    let [newBasePath, newPathAnchor] = pathname.split('#');
 
-  updateRoot(res, () => {
-    if (push) {
-      history.pushState(null, '', pathname);
-      push = false;
-    }
+    updateRoot(res, () => {
+      if (push) {
+        history.pushState(null, '', pathname);
+        push = false;
+      }
 
-    // Reset scroll if navigating to a different page without an anchor, primarily for the mobile case.
-    // Otherwise, make sure to scroll the anchor into view if any
-    if (currentPath !== newBasePath && !newPathAnchor) {
-      window.scrollTo(0, 0);
-    } else if (newPathAnchor) {
-      let element = document.getElementById(newPathAnchor);
-      if (element) {
-        element.scrollIntoView();
+      // Reset scroll if navigating to a different page without an anchor
+      if (currentPath !== newBasePath && !newPathAnchor) {
+        window.scrollTo(0, 0);
+      } else if (newPathAnchor) {
+        let element = document.getElementById(newPathAnchor);
+        if (element) {
+          element.scrollIntoView();
+        }
+      }
+    });
+  } catch {
+    let errorRes = await fetchRSC<ReactElement>('/error.rsc');
+    updateRoot(errorRes, () => {
+      if (push) {
+        history.pushState(null, '', '/error.html');
       }
-    }
-  });
+    });
+  }
 }
 
 // Intercept link clicks to perform RSC navigation.

From 018be321cacd27067bf75547cc9ed5e75a2cea14 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Fri, 3 Oct 2025 11:42:19 -0700
Subject: [PATCH 14/17] forgot to remove test code

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

diff --git a/packages/dev/s2-docs/pages/s2/Accordion.mdx b/packages/dev/s2-docs/pages/s2/Accordion.mdx
index 57408b2b46a..d8b12ac3907 100644
--- a/packages/dev/s2-docs/pages/s2/Accordion.mdx
+++ b/packages/dev/s2-docs/pages/s2/Accordion.mdx
@@ -28,8 +28,6 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 ## Expanding
 
-As described in the docs for [CalendarDate](aweawg.html)
-
 Use the `defaultExpandedKeys` or `expandedKeys` prop to set the expanded items, and `onExpandedChange` to handle user interactions. The expanded keys correspond to the `id` prop of each `<Disclosure>`.
 
 ```tsx render

From f1ee9ed7e931a85d1fbe6410fa5a156cb1f65d4f Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Mon, 6 Oct 2025 10:48:13 -0500
Subject: [PATCH 15/17] hide error page from search

---
 packages/dev/s2-docs/pages/error.mdx          | 2 ++
 packages/dev/s2-docs/src/MobileSearchMenu.tsx | 2 +-
 packages/dev/s2-docs/src/SearchMenu.tsx       | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/dev/s2-docs/pages/error.mdx b/packages/dev/s2-docs/pages/error.mdx
index a55dee91fc4..82201a6dc99 100644
--- a/packages/dev/s2-docs/pages/error.mdx
+++ b/packages/dev/s2-docs/pages/error.mdx
@@ -4,4 +4,6 @@ export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
 
+export const hideFromSearch = true;
+
 <Error />
diff --git a/packages/dev/s2-docs/src/MobileSearchMenu.tsx b/packages/dev/s2-docs/src/MobileSearchMenu.tsx
index 6109401f328..33051304804 100644
--- a/packages/dev/s2-docs/src/MobileSearchMenu.tsx
+++ b/packages/dev/s2-docs/src/MobileSearchMenu.tsx
@@ -219,7 +219,7 @@ function MobileNav({pages, currentPage}: PageProps) {
 
   let getSectionsForLibrary = useCallback((libraryId: string) => {
     let sectionsMap = new Map();
-    let filteredPages = pages.filter(page => getLibraryFromPage(page) === libraryId);
+    let filteredPages = pages.filter(page => getLibraryFromPage(page) === libraryId && !page.exports?.hideFromSearch);
     for (let page of filteredPages) {
       let section = page.exports?.section ?? 'Components';
       let sectionPages = sectionsMap.get(section) ?? [];
diff --git a/packages/dev/s2-docs/src/SearchMenu.tsx b/packages/dev/s2-docs/src/SearchMenu.tsx
index e49cd6ff416..313550cfdfa 100644
--- a/packages/dev/s2-docs/src/SearchMenu.tsx
+++ b/packages/dev/s2-docs/src/SearchMenu.tsx
@@ -71,7 +71,7 @@ export function SearchMenu(props: SearchMenuProps) {
     }
 
     const components = pages
-      .filter(page => page.url && page.url.endsWith('.html') && getLibraryFromUrl(page.url) === selectedLibrary)
+      .filter(page => page.url && page.url.endsWith('.html') && getLibraryFromUrl(page.url) === selectedLibrary && !page.exports?.hideFromSearch)
       .map(page => {
         const name = page.url.replace(/^\//, '').replace(/\.html$/, '');
         const title = page.tableOfContents?.[0]?.title || name;

From 4ef11a8b54cc2612e7db9423fd4a705fc35aa684 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Mon, 6 Oct 2025 15:55:48 -0700
Subject: [PATCH 16/17] update S2 popover example

---
 packages/dev/s2-docs/pages/s2/Popover.mdx | 35 +++++++++--------------
 1 file changed, 14 insertions(+), 21 deletions(-)

diff --git a/packages/dev/s2-docs/pages/s2/Popover.mdx b/packages/dev/s2-docs/pages/s2/Popover.mdx
index 637d4955be2..f830903a58b 100644
--- a/packages/dev/s2-docs/pages/s2/Popover.mdx
+++ b/packages/dev/s2-docs/pages/s2/Popover.mdx
@@ -11,7 +11,7 @@ export const tags = ['popup', 'overlay'];
 
 ```tsx render docs={docs.exports.Popover} links={docs.links} props={['placement', 'size', 'offset', 'crossOffset', 'shouldFlip', 'hideArrow']} type="s2" initialProps={{size: 'S'}}
 "use client";
-import {Popover, DialogTrigger, ActionButton, CheckboxGroup, Checkbox, Form} from '@react-spectrum/s2';
+import {Popover, DialogTrigger, ActionButton, Form, TextField, Switch, Button} from '@react-spectrum/s2';
 import Filter from '@react-spectrum/s2/icons/Filter';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
@@ -23,22 +23,15 @@ function Example(props) {
       </ActionButton>
       {/*- begin focus -*/}
       <Popover {...props}/* PROPS */>
-        <Form>
-          <CheckboxGroup label="Stops">
-            <Checkbox value={0}>Non-stop</Checkbox>
-            <Checkbox value={1}>1 stop</Checkbox>
-            <Checkbox value={2}>2+ stops</Checkbox>
-          </CheckboxGroup>
-          <CheckboxGroup label="Bags">
-            <Checkbox value={0}>Carry on</Checkbox>
-            <Checkbox value={1}>Checked bag</Checkbox>
-          </CheckboxGroup>
-          <CheckboxGroup label="Times">
-            <Checkbox value={0}>Morning</Checkbox>
-            <Checkbox value={1}>Afternoon</Checkbox>
-            <Checkbox value={2}>Evening</Checkbox>
-          </CheckboxGroup>
-        </Form>
+        <div className={style({padding: 12})}>
+          <p className={style({font: 'body', marginTop: 0})}>How are we doing? Share your feedback here.</p>
+          <Form>
+            <TextField label="Subject" placeholder="Enter a summary" />
+            <TextField label="Description" isRequired placeholder="Enter your feedback" />
+            <Switch>Adobe can contact me for further questions concerning this feedback</Switch>
+            <Button styles={style({marginStart: 'auto'})}>Submit</Button>
+          </Form>
+        </div>
       </Popover>
       {/*- end focus -*/}
     </DialogTrigger>
@@ -65,17 +58,17 @@ function Example() {
       <Button onPress={() => setOpen(!isOpen)}>
         Open popover
       </Button>
-      <div 
+      <div
         ref={triggerRef}
         className={style({
-          padding: 8, 
-          backgroundColor: 'gray-100', 
+          padding: 8,
+          backgroundColor: 'gray-100',
           borderRadius: 'default',
           font: 'ui'
         })}>
         Popover appears here
       </div>
-      <Popover 
+      <Popover
         /*- begin highlight -*/
         triggerRef={triggerRef}
         isOpen={isOpen}

From 8c9b45f482403ffce59f7030a816ee6aec9e1350 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Mon, 6 Oct 2025 16:01:24 -0700
Subject: [PATCH 17/17] update icon in example

---
 packages/dev/s2-docs/pages/s2/Popover.mdx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/dev/s2-docs/pages/s2/Popover.mdx b/packages/dev/s2-docs/pages/s2/Popover.mdx
index f830903a58b..ae163d379f7 100644
--- a/packages/dev/s2-docs/pages/s2/Popover.mdx
+++ b/packages/dev/s2-docs/pages/s2/Popover.mdx
@@ -12,14 +12,14 @@ export const tags = ['popup', 'overlay'];
 ```tsx render docs={docs.exports.Popover} links={docs.links} props={['placement', 'size', 'offset', 'crossOffset', 'shouldFlip', 'hideArrow']} type="s2" initialProps={{size: 'S'}}
 "use client";
 import {Popover, DialogTrigger, ActionButton, Form, TextField, Switch, Button} from '@react-spectrum/s2';
-import Filter from '@react-spectrum/s2/icons/Filter';
+import Feedback from '@react-spectrum/s2/icons/Feedback';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 function Example(props) {
   return (
     <DialogTrigger>
-      <ActionButton aria-label="Filters">
-        <Filter />
+      <ActionButton aria-label="Feedback">
+        <Feedback />
       </ActionButton>
       {/*- begin focus -*/}
       <Popover {...props}/* PROPS */>