From 937a80cfe85fec86562b960e18fbfcca021ae798 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Wed, 19 Nov 2025 15:08:53 -0800
Subject: [PATCH 01/11] docs: Refine typography

---
 .../react-aria/blog/ColorEditorExample.tsx    |  4 +-
 .../react-aria/blog/SubmenuAnimation.tsx      |  1 -
 .../blog/accessible-color-descriptions.mdx    |  2 -
 .../blog/building-a-button-part-1.mdx         |  2 -
 .../blog/building-a-button-part-2.mdx         |  2 -
 .../blog/building-a-button-part-3.mdx         |  2 -
 .../react-aria/blog/building-a-combobox.mdx   |  2 -
 ...-a-pointer-friendly-submenu-experience.mdx |  2 -
 .../blog/date-and-time-pickers-for-all.mdx    |  2 -
 .../pages/react-aria/blog/drag-and-drop.mdx   |  2 -
 ...w-we-internationalized-our-numberfield.mdx |  2 -
 .../pages/react-aria/blog/rtl-date-time.mdx   |  2 -
 .../pages/react-aria/releases/v1-0-0.mdx      |  2 -
 .../pages/react-aria/releases/v1-1-0.mdx      |  2 -
 .../pages/react-aria/releases/v1-10-0.mdx     |  2 -
 .../pages/react-aria/releases/v1-11-0.mdx     |  2 -
 .../pages/react-aria/releases/v1-12-0.mdx     |  2 -
 .../pages/react-aria/releases/v1-13-0.mdx     |  2 -
 .../pages/react-aria/releases/v1-2-0.mdx      |  2 -
 .../pages/react-aria/releases/v1-3-0.mdx      |  2 -
 .../pages/react-aria/releases/v1-4-0.mdx      |  2 -
 .../pages/react-aria/releases/v1-5-0.mdx      |  2 -
 .../pages/react-aria/releases/v1-6-0.mdx      |  2 -
 .../pages/react-aria/releases/v1-7-0.mdx      |  2 -
 .../pages/react-aria/releases/v1-8-0.mdx      |  2 -
 .../pages/react-aria/releases/v1-9-0.mdx      |  2 -
 .../dev/s2-docs/pages/s2/releases/v0-1-0.mdx  |  2 -
 .../dev/s2-docs/pages/s2/releases/v0-10-0.mdx |  2 -
 .../dev/s2-docs/pages/s2/releases/v0-11-0.mdx |  2 -
 .../dev/s2-docs/pages/s2/releases/v0-12-0.mdx |  2 -
 .../dev/s2-docs/pages/s2/releases/v0-2-0.mdx  |  2 -
 .../dev/s2-docs/pages/s2/releases/v0-3-0.mdx  |  2 -
 .../dev/s2-docs/pages/s2/releases/v0-4-0.mdx  |  2 -
 .../dev/s2-docs/pages/s2/releases/v0-5-0.mdx  |  2 -
 .../dev/s2-docs/pages/s2/releases/v0-6-0.mdx  |  2 -
 .../dev/s2-docs/pages/s2/releases/v0-7-0.mdx  |  2 -
 .../dev/s2-docs/pages/s2/releases/v0-8-0.mdx  |  2 -
 .../dev/s2-docs/pages/s2/releases/v0-9-0.mdx  |  2 -
 .../dev/s2-docs/pages/s2/releases/v0-9-1.mdx  |  2 -
 packages/dev/s2-docs/src/BlogList.tsx         |  4 +-
 packages/dev/s2-docs/src/Code.tsx             |  2 +-
 packages/dev/s2-docs/src/CodeBlock.tsx        |  8 +-
 packages/dev/s2-docs/src/Headings.tsx         |  6 +-
 packages/dev/s2-docs/src/Layout.tsx           | 74 +++++++++++--------
 packages/dev/s2-docs/src/Link.tsx             |  7 +-
 packages/dev/s2-docs/src/ReleasesList.tsx     |  2 +-
 46 files changed, 59 insertions(+), 123 deletions(-)

diff --git a/packages/dev/s2-docs/pages/react-aria/blog/ColorEditorExample.tsx b/packages/dev/s2-docs/pages/react-aria/blog/ColorEditorExample.tsx
index 2794f68a93d..df70de58d99 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/ColorEditorExample.tsx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/ColorEditorExample.tsx
@@ -75,7 +75,9 @@ export function ColorEditorExample() {
         padding: {
           default: 12,
           lg: 24
-        }
+        },
+        maxWidth: '--text-width',
+        marginX: 'auto'
       })}>
       <ColorPicker defaultValue="#5100FF">
         {({color}) => (
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/SubmenuAnimation.tsx b/packages/dev/s2-docs/pages/react-aria/blog/SubmenuAnimation.tsx
index 2114063e38d..f34749333b6 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/SubmenuAnimation.tsx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/SubmenuAnimation.tsx
@@ -120,7 +120,6 @@ export function SubmenuAnimation(): JSX.Element {
       className={style({
         backgroundColor: 'layer-1',
         borderRadius: 'xl',
-        marginY: 32,
         padding: {
           default: 12,
           lg: 24
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx b/packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx
index db256aee4e8..fad57e3c933 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx
@@ -16,7 +16,6 @@ export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
 import React from 'react';
-import {Byline} from '../../../src/BlogList';
 import {ColorEditorExample} from './ColorEditorExample';
 
 export const hideNav = true;
@@ -29,7 +28,6 @@ export const section = 'Blog';
 export const isSubpage = true;
 
 # Accessible Color Descriptions for Improved Color Pickers
-<Byline author={author} authorLink={authorLink} date={date} />
 
 Recently, we released a suite of color picker components in React Aria and React Spectrum. These components help users choose a color in various ways, including a 2D [ColorArea](../ColorArea.html), channel-based [ColorSlider](../ColorSlider.html), circular [ColorWheel](../ColorWheel.html), preset [ColorSwatchPicker](../ColorSwatchPicker.html), and a hex value [ColorField](../ColorField.html). You can compose these individual pieces together to create a full [ColorPicker](../ColorPicker.html) with whatever custom layout or configuration you need.
 
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-1.mdx b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-1.mdx
index 689c04abd07..4f4caff2327 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-1.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-1.mdx
@@ -16,7 +16,6 @@ export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
 import React from 'react';
-import {Byline} from '../../../src/BlogList';
 
 export const hideNav = true;
 export const tags = ['react aria', 'react spectrum', 'react', 'spectrum', 'interactions', 'button', 'touch'];
@@ -28,7 +27,6 @@ export const section = 'Blog';
 export const isSubpage = true;
 
 # Building a Button Part 1: Press Events
-<Byline author={author} authorLink={authorLink} date={date} />
 
 UI development is really hard. While building components has become much easier with modern UI frameworks like React, handling interactions across devices and supporting proper accessibility and internationalization is still extraordinarily difficult. Building UIs has a very [long tail](https://en.wikipedia.org/wiki/Long_tail): it's fairly easy to get the basics for a given component working, but there are many details to consider, and these add up to a majority of the work.
 
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-2.mdx b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-2.mdx
index 260b201ccf0..55394c6e9ed 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-2.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-2.mdx
@@ -15,7 +15,6 @@ export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
 import React from 'react';
-import {Byline} from '../../../src/BlogList';
 
 export const hideNav = true;
 export const tags = ['react aria', 'react spectrum', 'react', 'interactions', 'button', 'touch', 'hover', 'web development', 'javascript', 'css'];
@@ -27,7 +26,6 @@ export const section = 'Blog';
 export const isSubpage = true;
 
 # Building a Button Part 2: Hover Interactions
-<Byline author={author} authorLink={authorLink} date={date} />
 
 This is the second post in our three part series on building a button component. In the [first post](building-a-button-part-1.html), we covered how React Spectrum and React Aria implement adaptive press events across mouse, touch, keyboard, and screen readers. Today, we'll cover hover interactions.
 
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-3.mdx b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-3.mdx
index fa696c101b3..d30bcc62e88 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-3.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-3.mdx
@@ -15,7 +15,6 @@ export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
 import React from 'react';
-import {Byline} from '../../../src/BlogList';
 
 export const hideNav = true;
 export const tags = ['react aria', 'react spectrum', 'react', 'interactions', 'button', 'keyboard', 'focus', 'web development', 'javascript', 'css'];
@@ -27,7 +26,6 @@ export const section = 'Blog';
 export const isSubpage = true;
 
 # Building a Button Part 3: Keyboard Focus Behavior
-<Byline author={author} authorLink={authorLink} date={date} />
 
 This is the last post in our three part series on building a button component. In the [first post](building-a-button-part-1.html), we covered how React Spectrum and React Aria implement adaptive press events across mouse, touch, keyboard, and screen readers. In the [second post](building-a-button-part-2.html), we covered hover interactions. Today, we'll cover keyboard focus behavior.
 
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/building-a-combobox.mdx b/packages/dev/s2-docs/pages/react-aria/blog/building-a-combobox.mdx
index 165ce6d7250..ca6f56e6074 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/building-a-combobox.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/building-a-combobox.mdx
@@ -19,7 +19,6 @@ export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
 import React from 'react';
-import {Byline} from '../../../src/BlogList';
 
 export const hideNav = true;
 export const tags = ['combobox', 'accessibility', 'mobile', 'react spectrum', 'react', 'spectrum', 'interactions', 'touch'];
@@ -31,7 +30,6 @@ export const section = 'Blog';
 export const isSubpage = true;
 
 # Creating an accessible autocomplete experience
-<Byline author={author} authorLink={authorLink} date={date} />
 
 After many months of research, development, and extensive testing across browsers, devices, and assistive technology, we're excited to announce that the React Spectrum [ComboBox](../../s2/ComboBox.html) component and React Aria [useComboBox](https://react-spectrum.adobe.com/react-aria/useComboBox.html) hook are now available! We've focused on the following areas to help you build quality autocomplete experiences.
 
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/creating-a-pointer-friendly-submenu-experience.mdx b/packages/dev/s2-docs/pages/react-aria/blog/creating-a-pointer-friendly-submenu-experience.mdx
index ddf143f1433..b49c8240a21 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/creating-a-pointer-friendly-submenu-experience.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/creating-a-pointer-friendly-submenu-experience.mdx
@@ -17,7 +17,6 @@ export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
 import React from 'react';
-import {Byline} from '../../../src/BlogList';
 
 export const hideNav = true;
 export const tags = ['react aria', 'react spectrum', 'react', 'spectrum', 'interactions', 'submenu', 'pointer'];
@@ -29,7 +28,6 @@ export const section = 'Blog';
 export const isSubpage = true;
 
 # Creating a pointer-friendly submenu experience
-<Byline author={author} authorLink={authorLink} date={date} />
 
 We are excited to announce support of submenus in the latest release of [React Spectrum](../../s2/Menu.html#submenus) and [React Aria](../Menu.html#submenus)! In the process of adding this feature, we found ourselves solving some unique challenges while working to make submenus user-friendly and accessible across an array of devices and input types. In doing so, we wanted to share our thought process in solving one of the challenges we faced along the way.
 
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/date-and-time-pickers-for-all.mdx b/packages/dev/s2-docs/pages/react-aria/blog/date-and-time-pickers-for-all.mdx
index d949f021ff2..9908aebd1e4 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/date-and-time-pickers-for-all.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/date-and-time-pickers-for-all.mdx
@@ -18,7 +18,6 @@ export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
 import React from 'react';
-import {Byline} from '../../../src/BlogList';
 import {DateField, RangeCalendar} from '@react-spectrum/s2';
 import {today, getLocalTimeZone} from '@internationalized/date';
 import RangeCalendarExample from './RangeCalendarExample';
@@ -34,7 +33,6 @@ export const section = 'Blog';
 export const isSubpage = true;
 
 # Date and Time Pickers for All
-<Byline author={author} authorLink={authorLink} date={date} />
 
 We are very excited to announce the release of the [React Aria](https://react-spectrum.adobe.com/react-aria/useNumberField.html) and [React Spectrum](../../s2/DatePicker.html) date and time picker components! This includes a full suite of fully featured components and hooks including calendars, date and time fields, and range pickers, all with a focus on internationalization and accessibility. It also includes [@internationalized/date](../../internationalized/date/index.html), a brand new framework-agnostic library for locale-aware date and time manipulation.
 
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/drag-and-drop.mdx b/packages/dev/s2-docs/pages/react-aria/blog/drag-and-drop.mdx
index ce7b80f9b79..2d869e605a8 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/drag-and-drop.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/drag-and-drop.mdx
@@ -22,7 +22,6 @@ export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
 import React from 'react';
-import {Byline} from '../../../src/BlogList';
 
 export const hideNav = true;
 export const tags = ['drag and drop', 'dnd', 'components', 'accessibility', 'keyboard', 'mobile', 'react spectrum', 'react', 'spectrum', 'interactions', 'touch'];
@@ -34,7 +33,6 @@ export const section = 'Blog';
 export const isSubpage = true;
 
 # Taming the dragon: Accessible drag and drop
-<Byline author={author} authorLink={authorLink} date={date} />
 
 We are excited to announce the release of drag and drop support in [React Aria](../dnd.html) and [React Spectrum](../../s2/dnd.html)! This includes a suite of hooks for implementing drag and drop interactions, with support for both mouse and touch, as well as full parity for keyboard and screen reader input. We've designed these hooks with the following features in mind:
 
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/how-we-internationalized-our-numberfield.mdx b/packages/dev/s2-docs/pages/react-aria/blog/how-we-internationalized-our-numberfield.mdx
index aab5a684550..c6f7b191a37 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/how-we-internationalized-our-numberfield.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/how-we-internationalized-our-numberfield.mdx
@@ -19,7 +19,6 @@ export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
 import React from 'react';
-import {Byline} from '../../../src/BlogList';
 import {NumberField} from '@react-spectrum/s2';
 
 export const hideNav = true;
@@ -32,7 +31,6 @@ export const section = 'Blog';
 export const isSubpage = true;
 
 # How we internationalized our number field
-<Byline author={author} authorLink={authorLink} date={date} />
 
 Number fields are commonly used form components, but are frequently not a great user experience. They often lack support for advanced formatting, such as currency and unit values, and do not provide a localized experience for users around the world. In this post, we'll discuss how we approached building our number field component with support for formatting and internationalization in mind.
 
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/rtl-date-time.mdx b/packages/dev/s2-docs/pages/react-aria/blog/rtl-date-time.mdx
index d11503ebaee..9f0f2912ed1 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/rtl-date-time.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/rtl-date-time.mdx
@@ -18,7 +18,6 @@ export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
 import React from 'react';
-import {Byline} from '../../../src/BlogList';
 
 export const hideNav = true;
 export const tags = ['date picker', 'date', 'time', 'calendar', 'components', 'accessibility', 'react spectrum', 'react', 'spectrum'];
@@ -30,7 +29,6 @@ export const section = 'Blog';
 export const isSubpage = true;
 
 # Improving Internationalization Support in Our Date and Time Components
-<Byline author={author} authorLink={authorLink} date={date} />
 
 Internationalization is a core feature of our Date and Time components. We support 13 different calendar systems as well as locale-specific formatting, number systems, and 12 and 24 hour time. However, we identified an issue in our support for several right-to-left (RTL) languages where in some, the format of the date and time fields was incorrect. While investigating this bug, we faced several challenges in ensuring accurate date and time representation in RTL languages and implemented various strategies that we'd like to share.
 
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-0-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-0-0.mdx
index 5f7a1811a0f..4f113cc3894 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/v1-0-0.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/v1-0-0.mdx
@@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
-import {Time} from '../../../src/ReleasesList';
 
 export const hideNav = true;
 export const section = 'Releases';
@@ -22,7 +21,6 @@ export const description = 'In this release, we\'re promoting React Aria Compone
 export const isSubpage = true;
 
 # v1.0.0
-<Time date={date} />
 
 Welcome to the last release of the year! After a year of work, we are happy to announce the GA release of React Aria Components 🎉 This component library, built on top of our React Aria hooks, provides a simpler way to craft world-class accessible components with custom styles. See our new React Aria [landing page](https://react-spectrum.adobe.com/react-aria/index.html) for all of the details, including interactive examples. To help get you started even faster, we now also have a downloadable Storybook [starter kit](../getting-started.html#starter-kit) including an example CSS theme.
 
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-1-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-1-0.mdx
index 448bd6555ff..586962a8d40 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/v1-1-0.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/v1-1-0.mdx
@@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
-import {Time} from '../../../src/ReleasesList';
 
 export const hideNav = true;
 export const section = 'Releases';
@@ -22,7 +21,6 @@ export const description = 'Welcome to the first release of the new year! We hav
 export const isSubpage = true;
 
 # v1.1.0
-<Time date={date} />
 
 Welcome to the first release of the new year! We have had a great response to our GA release of React Aria Components. If you haven't tried it out, visit [our docs](https://react-spectrum.adobe.com/react-aria/index.html) to explore the examples. To help get you started, we have also created a few starter kits. These downloadable [starter kits](../getting-started.html#starter-kits) contain beautifully styled implementations of every available component and includes a working storybook. Available in vanilla and Tailwind CSS!
 
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-10-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-10-0.mdx
index 93da0024d22..d08a5ad83f7 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/v1-10-0.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/v1-10-0.mdx
@@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
-import {Time} from '../../../src/ReleasesList';
 
 export const hideNav = true;
 export const section = 'Releases';
@@ -22,7 +21,6 @@ export const description = 'Drop everything! Drag and drop support in React Aria
 export const isSubpage = true;
 
 # v1.10.0
-<Time date={date} />
 
 Drop everything! Drag and drop support in React Aria Tree has been released! 🫳🎤 This supports moving items within a tree or between collection components, with full keyboard and screen reader accessibility. It's interoperable with our existing drag and drop support in components like Table and GridList, and with third party apps via native HTML APIs. Check out our [previous blog post](../blog/drag-and-drop.html) on drag and drop to learn about the interactions, and our new [Tree drag and drop documentation](../Tree.html#drag-and-drop).
 
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-11-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-11-0.mdx
index dc3a7edea81..d9ac3d4a0be 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/v1-11-0.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/v1-11-0.mdx
@@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
-import {Time} from '../../../src/ReleasesList';
 
 export const hideNav = true;
 export const section = 'Releases';
@@ -22,7 +21,6 @@ export const description = 'Happy summer! This release adds support for async lo
 export const isSubpage = true;
 
 # v1.11.0
-<Time date={date} />
 
 Happy summer! This release adds support for async loading and infinite scrolling, improves form integration and drag and drop interactions, and adds support for additional DOM events and attributes.
 
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-12-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-12-0.mdx
index 3c878883282..cdd643efe8e 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/v1-12-0.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/v1-12-0.mdx
@@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
-import {Time} from '../../../src/ReleasesList';
 
 export const hideNav = true;
 export const section = 'Releases';
@@ -22,7 +21,6 @@ export const description = 'Summer might be winding down but we\'re definitely n
 export const isSubpage = true;
 
 # v1.12.0
-<Time date={date} />
 
 Summer might be winding down but we're definitely not! Back with another release, we have added support for origin-aware overlay animations in [Popover](../Popover.html) and [Tooltip](../Tooltip.html), which enable scale transitions to appear as if they are emerging from the trigger. We have also advanced Autocomplete to RC, and added support for filtering GridList, Table, and TagGroup (virtual focus support is still to come). Section support in [GridList](../GridList.html#sections) has also been added as an alpha, laying the groundwork for similar support in Tree and Table.
 
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-13-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-13-0.mdx
index 5d30f1bdde8..ffa3e2e5311 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/v1-13-0.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/v1-13-0.mdx
@@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
-import {Time} from '../../../src/ReleasesList';
 import {ReleasedVersions} from '../../../src/ReleasesList';
 
 export const hideNav = true;
@@ -23,7 +22,6 @@ export const description = 'Happy fall! This release brings some long-awaited fe
 export const isSubpage = true;
 
 # v1.13.0
-<Time date={date} />
 
 Happy fall! This release brings some long-awaited features, including multi-selection in [React Aria Select](../Select.html#multiple-selection) and enhanced animation support across our components. For example, [Disclosure](../Disclosure.html) now provides CSS variables to easily animate expanding and collapsing. We’ve also added a new `<SelectionIndicator>` component that can be used within components that support single selection such as [Tabs](../Tabs.html) and [ToggleButtonGroup](../ToggleButtonGroup.html#animation) to animate selection changes. In addition, we have significantly improved the behavior of scrolling modals on iOS 26. Lastly, `onAction` can now be used on a [`ComboBoxItem`](../ComboBox.html#item-actions), enabling you to add a “create” option.
 
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-2-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-2-0.mdx
index 677f2069037..82664323df6 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/v1-2-0.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/v1-2-0.mdx
@@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
-import {Time} from '../../../src/ReleasesList';
 
 export const hideNav = true;
 export const section = 'Releases';
@@ -22,7 +21,6 @@ export const description = 'We have a huge release! Submenu, unavailable menu it
 export const isSubpage = true;
 
 # v1.2.0
-<Time date={date} />
 
 We have a huge release today! Its a GA bonanza 🎊 – [Submenu](../Menu.html#submenus), [unavailable menu items](../Menu.html#unavailable-items), [DropZone](../DropZone.html) and [FileTrigger](../FileTrigger.html) components are now in GA. Check our [blog post](/blog/creating-a-pointer-friendly-submenu-experience.html) on the intricacies of the submenu interactions and how we handled them.
 
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-3-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-3-0.mdx
index 1177bbf361e..7f76109d96e 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/v1-3-0.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/v1-3-0.mdx
@@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
-import {Time} from '../../../src/ReleasesList';
 
 export const hideNav = true;
 export const section = 'Releases';
@@ -22,7 +21,6 @@ export const description = 'For this summer release, we have been busy working o
 export const isSubpage = true;
 
 # v1.3.0
-<Time date={date} />
 
 For this summer release, we have been busy working on improving virtualization in many of our Spectrum components including TableView, ListView, and ListBox. We have significantly reduced the complexity of our implementation, resulting in smaller bundle size, better performance, and improved stability. In our testing, this resulted in 14x faster per-frame render times on large tables due to better reuse of DOM nodes as you scroll. We are also working on bringing virtualization support to React Aria Components, which is available as an unstable API in this version.
 
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-4-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-4-0.mdx
index 251cb90a016..752938d29a4 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/v1-4-0.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/v1-4-0.mdx
@@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
-import {Time} from '../../../src/ReleasesList';
 
 export const hideNav = true;
 export const section = 'Releases';
@@ -22,7 +21,6 @@ export const description = 'Happy fall! 🍁 We\'re excited to announce that our
 export const isSubpage = true;
 
 # v1.4.0
-<Time date={date} />
 
 Happy fall! 🍁 We're excited to announce that our color picker components are now generally available! This includes [ColorPicker](../ColorPicker.html), [ColorArea](../ColorArea.html), [ColorField](../ColorField.html), [ColorSlider](../ColorSlider.html), [ColorSwatch](../ColorSwatch.html), [ColorSwatchPicker](../ColorSwatchPicker.html), and [ColorWheel](../ColorWheel.html). These enable you to build fully customizable color pickers, including accessible color descriptions for screen reader support.
 
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-5-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-5-0.mdx
index 3caf3deb4a0..de52da9d90f 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/v1-5-0.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/v1-5-0.mdx
@@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
-import {Time} from '../../../src/ReleasesList';
 
 export const hideNav = true;
 export const section = 'Releases';
@@ -22,7 +21,6 @@ export const description = 'We\'re excited to announce that our Disclosure compo
 export const isSubpage = true;
 
 # v1.5.0
-<Time date={date} />
 
 We're excited to announce that our Disclosure components are now generally available! This includes [Disclosure](../Disclosure.html) and [DisclosureGroup](../DisclosureGroup.html) in React Aria. These components now also use the `hidden="until-found"` API currently supported in Chrome to enable searching collapsed content with ctrl + F.
 
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-6-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-6-0.mdx
index e4093f02ca8..a346a0356a7 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/v1-6-0.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/v1-6-0.mdx
@@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
-import {Time} from '../../../src/ReleasesList';
 
 export const hideNav = true;
 export const section = 'Releases';
@@ -22,7 +21,6 @@ export const description = 'Happy New Year! Our first release of 2025 includes a
 export const isSubpage = true;
 
 # v1.6.0
-<Time date={date} />
 
 Happy New Year! Our first release of 2025 includes a new [firstDayOfWeek](../Calendar.html#custom-first-day-of-week) prop for our calendar and date picker components, support for [CSS transitions](../styling.html#animation) in our overlay components, a new [Autocomplete](../Autocomplete.html) component in alpha, and a new [React Aria test utils](../testing.html#react-aria-test-utils) package.
 As always, a huge shoutout to everyone in the community for their feedback and contributions!
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-7-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-7-0.mdx
index 2360275fa2c..0fd9ddbaeab 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/v1-7-0.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/v1-7-0.mdx
@@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
-import {Time} from '../../../src/ReleasesList';
 import datepickerImage from 'url:../assets/datepicker-rtl.png';
 
 export const hideNav = true;
@@ -23,7 +22,6 @@ export const description = 'Buckle in because this is a big one! In this React A
 export const isSubpage = true;
 
 # v1.7.0
-<Time date={date} />
 
 Buckle in because this is a big one! In this React Aria release, we’re excited to announce three new components: [Toast](../Toast.html), [Tree](../Tree.html), and [Virtualizer](../Virtualizer.html). In addition, we have improved [Autocomplete](../Autocomplete.html) to enable UI patterns like [Searchable Menus](../Menu.html#complex-content), [Searchable Selects](../examples/searchable-select.html), and [Command Palettes](../examples/command-palette.html), added support for custom [Menu](../Menu.html#custom-trigger), [Popover](../Popover.html#custom-trigger), and [Tooltip](../Tooltip.html#custom-trigger) triggers, introduced `colSpan` support in Table, and upgraded to Tailwind CSS v4. Last but not least, we have a major refactor of [usePress](../usePress.html), which fixes many longstanding issues and improves compatibility with third party libraries.
 
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-8-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-8-0.mdx
index 99629c9c136..b7efed617a1 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/v1-8-0.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/v1-8-0.mdx
@@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
-import {Time} from '../../../src/ReleasesList';
 
 export const hideNav = true;
 export const section = 'Releases';
@@ -22,7 +21,6 @@ export const description = 'In today\'s release we are excited to announce custo
 export const isSubpage = true;
 
 # v1.8.0
-<Time date={date} />
 
 In today's release, we are excited to announce custom calendar support in React Aria Components! This feature allows you to create your own calendar that implements custom business logic, such as a [4-5-4 fiscal calendar](https://nrf.com/resources/4-5-4-calendar), either by extending an existing Calendar implementation or building from scratch. Please see the [React Aria docs](../Calendar.html#custom-calendar-systems) for an example implementation. A special shout out to [@ToyWalrus](https://github.com/ToyWalrus) for all the hard work that went into this contribution!
 
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-9-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-9-0.mdx
index fa905d92c5d..abe78b0fbf4 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/v1-9-0.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/v1-9-0.mdx
@@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
-import {Time} from '../../../src/ReleasesList';
 
 export const hideNav = true;
 export const section = 'Releases';
@@ -22,7 +21,6 @@ export const description = 'This release includes a range of enhancements and fi
 export const isSubpage = true;
 
 # v1.9.0
-<Time date={date} />
 
 This release includes a range of enhancements and fixes such as improved keyboard accessibility in TagGroup and increased stability for dynamic table updates. It also brings support for React 19's ref cleanup behavior, performance improvements for collection updates in React transitions and pressable elements, and TypeScript updates including backwards compatibility with older TypeScript and `@types/react` versions.
 
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-1-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-1-0.mdx
index 015c5413369..f513ec44fa5 100644
--- a/packages/dev/s2-docs/pages/s2/releases/v0-1-0.mdx
+++ b/packages/dev/s2-docs/pages/s2/releases/v0-1-0.mdx
@@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
-import {Time} from '../../../src/ReleasesList';
 
 export const hideNav = true;
 export const section = 'Releases';
@@ -22,7 +21,6 @@ export const description = 'Version 0.1.0 introduces the first version of Spectr
 export const isSubpage = true;
 
 # v0.1.0
-<Time date={date} />
 
 Version 0.1.0 introduces the first version of Spectrum 2, including new Badge, ComboBox, Meter, and Picker components.
 
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-10-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-10-0.mdx
index 5ea8ead3d99..8686f8b7549 100644
--- a/packages/dev/s2-docs/pages/s2/releases/v0-10-0.mdx
+++ b/packages/dev/s2-docs/pages/s2/releases/v0-10-0.mdx
@@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
-import {Time} from '../../../src/ReleasesList';
 
 export const hideNav = true;
 export const section = 'Releases';
@@ -22,7 +21,6 @@ export const description = 'Version 0.10.0 introduces a new font for Spectrum 2:
 export const isSubpage = true;
 
 # v0.10.0
-<Time date={date} />
 
 Version 0.10.0 introduces a new font for Spectrum 2: Adobe Clean Spectrum VF, along with new date and time components including Calendar, DatePicker, DateRangePicker, and TimeField. This release also includes various component improvements and bug fixes.
 
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-11-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-11-0.mdx
index 4ba1ada5fff..2bb4bcddf3f 100644
--- a/packages/dev/s2-docs/pages/s2/releases/v0-11-0.mdx
+++ b/packages/dev/s2-docs/pages/s2/releases/v0-11-0.mdx
@@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
-import {Time} from '../../../src/ReleasesList';
 
 export const hideNav = true;
 export const section = 'Releases';
@@ -22,7 +21,6 @@ export const description = 'Version 0.11.0 introduces the new SelectBoxGroup com
 export const isSubpage = true;
 
 # v0.11.0
-<Time date={date} />
 
 Version 0.11.0 introduces the new SelectBoxGroup component (alpha), fixes ComboBox empty state rendering, improves Picker dropdown styling, and adds support for custom tab layouts with collapse behavior.
 
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-12-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-12-0.mdx
index e60e7382390..f1042a3b3c2 100644
--- a/packages/dev/s2-docs/pages/s2/releases/v0-12-0.mdx
+++ b/packages/dev/s2-docs/pages/s2/releases/v0-12-0.mdx
@@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
-import {Time} from '../../../src/ReleasesList';
 
 export const hideNav = true;
 export const section = 'Releases';
@@ -22,7 +21,6 @@ export const description = 'Version 0.12.0 adds pending states to ActionButton,
 export const isSubpage = true;
 
 # v0.12.0
-<Time date={date} />
 
 Version 0.12.0 adds pending states to ActionButton, avatar support in ComboBox and Picker, Dialog XL size, and Popover styling improvements. This release also includes RTL fixes, placeholder support across components, and various component enhancements.
 
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-2-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-2-0.mdx
index bf5d31a257a..c578643685e 100644
--- a/packages/dev/s2-docs/pages/s2/releases/v0-2-0.mdx
+++ b/packages/dev/s2-docs/pages/s2/releases/v0-2-0.mdx
@@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
-import {Time} from '../../../src/ReleasesList';
 
 export const hideNav = true;
 export const section = 'Releases';
@@ -22,7 +21,6 @@ export const description = 'Version 0.2.0 introduces new color and range compone
 export const isSubpage = true;
 
 # v0.2.0
-<Time date={date} />
 
 Version 0.2.0 introduces new color and range components, adds ESBuild starter, updates InlineAlert iconography, and includes CSS processing updates.
 
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-3-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-3-0.mdx
index 720a482fbe2..f044a23d2ed 100644
--- a/packages/dev/s2-docs/pages/s2/releases/v0-3-0.mdx
+++ b/packages/dev/s2-docs/pages/s2/releases/v0-3-0.mdx
@@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
-import {Time} from '../../../src/ReleasesList';
 
 export const hideNav = true;
 export const section = 'Releases';
@@ -22,7 +21,6 @@ export const description = 'Version 0.3.0 introduces NumberField, AlertDialog, a
 export const isSubpage = true;
 
 # v0.3.0
-<Time date={date} />
 
 Version 0.3.0 introduces NumberField, AlertDialog, and Tabs components, along with new linear and gradient illustrations. This release includes TagGroup enhancements, updated workflow icons with name changes, and comprehensive translations for all components.
 
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-4-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-4-0.mdx
index f3375ae9eac..47abbc89185 100644
--- a/packages/dev/s2-docs/pages/s2/releases/v0-4-0.mdx
+++ b/packages/dev/s2-docs/pages/s2/releases/v0-4-0.mdx
@@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
-import {Time} from '../../../src/ReleasesList';
 
 export const hideNav = true;
 export const section = 'Releases';
@@ -22,7 +21,6 @@ export const description = 'Version 0.4.0 introduces six new components includin
 export const isSubpage = true;
 
 # v0.4.0
-<Time date={date} />
 
 Version 0.4.0 introduces six new components including Accordion, Card, CardView, and TableView. This release includes ProgressBar and Badge enhancements, Button pending state support, and various component improvements.
 
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-5-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-5-0.mdx
index abfc9cb9418..dc25844a51d 100644
--- a/packages/dev/s2-docs/pages/s2/releases/v0-5-0.mdx
+++ b/packages/dev/s2-docs/pages/s2/releases/v0-5-0.mdx
@@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
-import {Time} from '../../../src/ReleasesList';
 
 export const hideNav = true;
 export const section = 'Releases';
@@ -22,7 +21,6 @@ export const description = 'Version 0.5.0 includes major updates to Dialog and D
 export const isSubpage = true;
 
 # v0.5.0
-<Time date={date} />
 
 Version 0.5.0 includes major updates to Dialog and DialogTrigger APIs with four new dialog components: Dialog, FullscreenDialog, CustomDialog, and Popover. This release also improves style macro documentation and adds support for arbitrary pixel sizing.
 
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-6-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-6-0.mdx
index 3e093a32d82..4a515806d82 100644
--- a/packages/dev/s2-docs/pages/s2/releases/v0-6-0.mdx
+++ b/packages/dev/s2-docs/pages/s2/releases/v0-6-0.mdx
@@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
-import {Time} from '../../../src/ReleasesList';
 
 export const hideNav = true;
 export const section = 'Releases';
@@ -22,7 +21,6 @@ export const description = 'Version 0.6.0 introduces the ActionBar component and
 export const isSubpage = true;
 
 # v0.6.0
-<Time date={date} />
 
 Version 0.6.0 introduces the ActionBar component and adds staticColor="auto" support to multiple components. This release includes Button gradient variants, Menu improvements, and various component fixes.
 
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-7-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-7-0.mdx
index 2bae58416f1..a217db10d2c 100644
--- a/packages/dev/s2-docs/pages/s2/releases/v0-7-0.mdx
+++ b/packages/dev/s2-docs/pages/s2/releases/v0-7-0.mdx
@@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
-import {Time} from '../../../src/ReleasesList';
 
 export const hideNav = true;
 export const section = 'Releases';
@@ -22,7 +21,6 @@ export const description = 'Version 0.7.0 introduces the TreeView component and
 export const isSubpage = true;
 
 # v0.7.0
-<Time date={date} />
 
 Version 0.7.0 introduces the TreeView component and includes important CSS updates to fix Safari issues. This release removes all: revert-layer from the style macro and includes Badge improvements, Tabs collapse behavior, and updated codemods.
 
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-8-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-8-0.mdx
index 6c6e2f1d760..39b489c501d 100644
--- a/packages/dev/s2-docs/pages/s2/releases/v0-8-0.mdx
+++ b/packages/dev/s2-docs/pages/s2/releases/v0-8-0.mdx
@@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
-import {Time} from '../../../src/ReleasesList';
 
 export const hideNav = true;
 export const section = 'Releases';
@@ -22,7 +21,6 @@ export const description = 'Version 0.8.0 introduces NotificationBadge and Toast
 export const isSubpage = true;
 
 # v0.8.0
-<Time date={date} />
 
 Version 0.8.0 introduces NotificationBadge and Toast (alpha) components, along with updates to Disclosure design sizing. This release also includes various component improvements and new exports.
 
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-9-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-9-0.mdx
index 6403ec25b1e..f23615c2306 100644
--- a/packages/dev/s2-docs/pages/s2/releases/v0-9-0.mdx
+++ b/packages/dev/s2-docs/pages/s2/releases/v0-9-0.mdx
@@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
-import {Time} from '../../../src/ReleasesList';
 
 export const hideNav = true;
 export const section = 'Releases';
@@ -22,7 +21,6 @@ export const description = 'Version 0.9.0 adds virtualization and async loading
 export const isSubpage = true;
 
 # v0.9.0
-<Time date={date} />
 
 Version 0.9.0 adds virtualization and async loading support to ComboBox and Picker, updates Dialog sizes, and introduces important TypeScript changes for UNSAFE_className. This release also includes significant style macro updates.
 
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-9-1.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-9-1.mdx
index e1cd95ad9a0..28bee306148 100644
--- a/packages/dev/s2-docs/pages/s2/releases/v0-9-1.mdx
+++ b/packages/dev/s2-docs/pages/s2/releases/v0-9-1.mdx
@@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
-import {Time} from '../../../src/ReleasesList';
 
 export const hideNav = true;
 export const section = 'Releases';
@@ -22,7 +21,6 @@ export const description = 'Version 0.9.1 is a patch release that fixes focus vi
 export const isSubpage = true;
 
 # v0.9.1
-<Time date={date} />
 
 Version 0.9.1 is a patch release that fixes focus visible styles in Button and TagGroup, updates ContextualHelp width, and improves Tabs selection indicator behavior.
 
diff --git a/packages/dev/s2-docs/src/BlogList.tsx b/packages/dev/s2-docs/src/BlogList.tsx
index 8dfbe64df0a..89c921cf5c4 100644
--- a/packages/dev/s2-docs/src/BlogList.tsx
+++ b/packages/dev/s2-docs/src/BlogList.tsx
@@ -14,7 +14,7 @@ export function BlogList({pages}: {pages: Page[]}) {
       {blogPosts.map(post => (
         <div key={post.name}>
           <header className={style({marginBottom: 12})}>
-            <h2 className={style({font: 'heading-lg', margin: 0})}><Link href={post.url}>{post.tableOfContents?.[0]?.title || post.exports?.title}</Link></h2>
+            <h2 className={style({font: 'title-xl', margin: 0})}><Link href={post.url}>{post.tableOfContents?.[0]?.title || post.exports?.title}</Link></h2>
             <Byline author={post.exports?.author} authorLink={post.exports?.authorLink} date={post.exports?.date} />
           </header>
           <p className={style({font: 'body', margin: 0})}>{renderHTMLfromMarkdown(post.exports?.description, {forceInline: true, forceBlock: false})}</p>
@@ -28,7 +28,7 @@ export function Byline({author, authorLink, date}: {author?: string, authorLink?
   let formattedDate = new Date(date).toLocaleDateString('en-US', {year: 'numeric', month: 'long', day: 'numeric'});
 
   return (
-    <div className={style({font: 'detail'})}>
+    <div className={style({font: 'detail', width: 'full', maxWidth: '--text-width', marginX: 'auto', marginTop: 4})}>
       {author && (
         <>
           By {authorLink ? <Link href={authorLink} isQuiet>{author}</Link> : author}
diff --git a/packages/dev/s2-docs/src/Code.tsx b/packages/dev/s2-docs/src/Code.tsx
index b7759a1b9ab..a8175958105 100644
--- a/packages/dev/s2-docs/src/Code.tsx
+++ b/packages/dev/s2-docs/src/Code.tsx
@@ -114,7 +114,7 @@ export function Code({children, lang, hideImports = true, links, styles}: ICodeP
   return (
     <code
       className={style({
-        font: {default: 'code-xs', lg: 'code-sm'},
+        font: 'code-sm',
         backgroundColor: 'layer-1',
         paddingX: 4,
         borderWidth: 1,
diff --git a/packages/dev/s2-docs/src/CodeBlock.tsx b/packages/dev/s2-docs/src/CodeBlock.tsx
index 41105ac7069..212c07edade 100644
--- a/packages/dev/s2-docs/src/CodeBlock.tsx
+++ b/packages/dev/s2-docs/src/CodeBlock.tsx
@@ -23,7 +23,9 @@ const example = style({
   padding: {
     default: 12,
     lg: 24
-  }
+  },
+  maxWidth: '--text-width',
+  marginX: 'auto'
 });
 
 const standaloneCode = style({
@@ -49,7 +51,9 @@ const standaloneCode = style({
     default: 'code-xs',
     lg: 'code-sm'
   },
-  overflow: 'auto'
+  overflow: 'auto',
+  maxWidth: '--text-width',
+  marginX: 'auto'
 });
 
 interface CodeBlockProps extends VisualExampleProps {
diff --git a/packages/dev/s2-docs/src/Headings.tsx b/packages/dev/s2-docs/src/Headings.tsx
index 92b1d0fc140..5ad9d25aa54 100644
--- a/packages/dev/s2-docs/src/Headings.tsx
+++ b/packages/dev/s2-docs/src/Headings.tsx
@@ -57,7 +57,7 @@ export function H2({children, ...props}) {
   let {hoverProps, isHovered} = useHover({});
   let id = anchorId(children);
   return (
-    <h2 {...props} id={id} className={style({font: 'heading-xl', marginTop: 48, marginBottom: 24})} {...hoverProps}>
+    <h2 {...props} id={id} className={style({font: 'heading-lg', marginTop: 48, marginBottom: 24, maxWidth: '--text-width', marginX: 'auto'})} {...hoverProps}>
       {children}
       <AnchorLink anchorId={id} isHovered={isHovered} level={2} headingText={children} />
     </h2>
@@ -68,7 +68,7 @@ export function H3({children, ...props}) {
   let {hoverProps, isHovered} = useHover({});
   let id = anchorId(children);
   return (
-    <h3 {...props} id={id} className={style({font: 'heading', marginTop: 32, marginBottom: 24})} {...hoverProps}>
+    <h3 {...props} id={id} className={style({font: 'heading', marginTop: 36, marginBottom: 24, maxWidth: '--text-width', marginX: 'auto'})} {...hoverProps}>
       {children}
       <AnchorLink anchorId={id} isHovered={isHovered} level={3} headingText={children} />
     </h3>
@@ -79,7 +79,7 @@ export function H4({children, ...props}) {
   let {hoverProps, isHovered} = useHover({});
   let id = anchorId(children);
   return (
-    <h4 {...props} id={id} className={style({font: 'heading-sm'})} {...hoverProps}>
+    <h4 {...props} id={id} className={style({font: 'heading-sm', maxWidth: '--text-width', marginX: 'auto'})} {...hoverProps}>
       {children}
       <AnchorLink anchorId={id} isHovered={isHovered} level={4} headingText={children} />
     </h4>
diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx
index a466d175b84..6955a5d4465 100644
--- a/packages/dev/s2-docs/src/Layout.tsx
+++ b/packages/dev/s2-docs/src/Layout.tsx
@@ -1,9 +1,9 @@
+import {Byline} from './BlogList';
 import {ExampleList} from './ExampleList';
 import {Nav} from '../src/Nav';
 import {OptimisticMobileToc, OptimisticToc} from './OptimisticToc';
 import type {Page, PageProps} from '@parcel/rsc';
 import React, {ReactElement} from 'react';
-// @ts-ignore
 import '../src/client';
 // @ts-ignore
 import internationalizedFavicon from 'url:../assets/internationalized.ico';
@@ -28,6 +28,7 @@ import {MobileHeader} from './MobileHeader';
 import {NavigationSuspense} from './NavigationSuspense';
 import {PropTable} from './PropTable';
 import {StateTable} from './StateTable';
+import {Time} from './ReleasesList';
 import {TypeLink} from './types';
 import {VersionBadge} from './VersionBadge';
 import {VisualExample} from './VisualExample';
@@ -35,28 +36,37 @@ import {VisualExample} from './VisualExample';
 const h1 = style({
   font: 'heading-3xl',
   fontSize: {
-    // On mobile, adjust heading to fit in the viewport, and clamp between a min and max font size.
-    default: 'clamp(35px, (100vw - 32px) / var(--width-per-em), 55px)',
-    lg: 'heading-3xl'
+    default: {
+      // On mobile, adjust heading to fit in the viewport, and clamp between a min and max font size.
+      default: 'clamp(35px, (100vw - 32px) / var(--width-per-em), 55px)',
+      isSubPage: 'heading-xl'
+    },
+    lg: {
+      default: 'heading-3xl',
+      isSubPage: 'heading-2xl'
+    }
   },
-  marginY: 0
+  marginY: 0,
+  width: 'full',
+  maxWidth: '--text-width',
+  marginX: 'auto'
 });
 
 const components = {
-  h1: ({children, ...props}) => <h1 {...props} id="top" style={{'--width-per-em': getTextWidth(children)} as any} className={h1}>{children}</h1>,
+  h1: ({children, ...props}) => <h1 {...props} id="top" style={{'--width-per-em': getTextWidth(children)} as any} className={h1({isSubPage: false})}>{children}</h1>,
   h2: H2,
   h3: H3,
   h4: H4,
-  p: ({children, ...props}) => <p {...props} className={style({font: {default: 'body', lg: 'body-lg'}, marginY: 24})}>{children}</p>,
+  p: ({children, ...props}) => <p {...props} className={style({font: 'body-lg', marginY: 24, maxWidth: '--text-width', marginX: 'auto'})}>{children}</p>,
   ul: (props) => <ul {...props} />,
-  li: ({children, ...props}) => <li {...props} className={style({font: {default: 'body', lg: 'body-lg'}, marginY: 0})}>{children}</li>,
+  li: ({children, ...props}) => <li {...props} className={style({font: 'body-lg', marginY: 0, maxWidth: '--text-width', marginX: 'auto'})}>{children}</li>,
   Figure: (props) => <figure {...props} className={style({display: 'flex', flexDirection: 'column', alignItems: 'center', marginY: 32, marginX: 0})} />,
   Caption: (props) => <figcaption {...props} className={style({font: 'body-sm'})} />,
   CodeBlock: CodeBlock,
   code: (props) => <Code {...props} />,
   strong: ({children, ...props}) => <strong {...props} className={style({fontWeight: 'bold'})}>{children}</strong>,
   a: (props) => <Link {...props} />,
-  PageDescription: ({children, ...props}) => <p {...props} className={style({font: {default: 'body-lg', lg: 'body-xl'}})}>{children}</p>,
+  PageDescription: ({children, ...props}) => <p {...props} className={style({font: 'body-xl', maxWidth: '--text-width', marginX: 'auto', marginTop: 8, marginBottom: 24})}>{children}</p>,
   VisualExample,
   Keyboard: (props) => <kbd {...props} className={style({font: 'code-sm', paddingX: 4, whiteSpace: 'nowrap', backgroundColor: 'gray-100', borderRadius: 'sm'})} />,
   PropTable,
@@ -67,15 +77,17 @@ const components = {
   ExampleList
 };
 
-const subPageComponents = (previousPage?: Page) => ({
+const subPageComponents = (previousPage: Page | undefined, currentPage: Page) => ({
   ...components,
   h1: ({children, ...props}) => (
-    <div className={style({display: 'flex', flexDirection: 'column', gap: 4})}>
-      <div className={style({display: 'flex', alignItems: 'center', gap: 8})}>
+    <div className={style({display: 'flex', flexDirection: 'column', gap: 4, maxWidth: '--text-width', marginX: 'auto', marginBottom: 40})}>
+      <div className={style({display: 'flex', alignItems: 'center', gap: 2})}>
         <TitleLink href="./index.html">{previousPage?.exports?.title}</TitleLink>
-        <ChevronRightIcon styles={iconStyle({size: 'M'})} />
+        <ChevronRightIcon styles={iconStyle({size: 'XS'})} />
       </div>
-      <h1 {...props} id="top" style={{'--width-per-em': getTextWidth(children)} as any} className={h1}>{children}</h1>
+      <h1 {...props} id="top" style={{'--width-per-em': getTextWidth(children)} as any} className={h1({isSubPage: true})}>{children}</h1>
+      {currentPage.exports?.author && <Byline author={currentPage.exports.author} authorLink={currentPage.exports.authorLink} date={currentPage.exports.date} />}
+      {currentPage.exports?.date && !currentPage.exports?.author && <Time date={currentPage.exports.date} />}
     </div>
   )
 });
@@ -130,12 +142,20 @@ const getFaviconUrl = (currentPage: Page): string => {
 };
 
 let articleStyles = style({
-  maxWidth: {
-    default: 'none',
-    isWithToC: 768
-  },
+  maxWidth: 768,
   width: 'full',
-  height: 'fit'
+  height: 'fit',
+  marginX: {
+    default: 0,
+    isCentered: 'auto'
+  },
+  '--text-width': {
+    type: 'width',
+    value: {
+      default: 'auto',
+      isSubPage: 568 // ~80 characters at body font size
+    }
+  }
 });
 
 function Footer() {
@@ -170,7 +190,7 @@ function Footer() {
 
 export function Layout(props: PageProps & {children: ReactElement<any>}) {
   let {pages, currentPage, children} = props;
-  let hasToC = !currentPage.exports?.hideNav && currentPage.tableOfContents?.[0]?.children && currentPage.tableOfContents?.[0]?.children?.length > 0;
+  let hasToC = (!currentPage.exports?.hideNav || currentPage.exports?.isSubpage) && currentPage.tableOfContents?.[0]?.children && currentPage.tableOfContents?.[0]?.children?.length > 0;
   let library = getLibraryLabel(getLibraryFromPage(currentPage));
   let keywords = [...new Set((currentPage.exports?.keywords ?? []).concat([library]).filter(k => !!k))];
   let ogImage = getOgImageUrl(currentPage);
@@ -300,11 +320,11 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
                 <CodePlatterProvider library={getLibraryFromUrl(currentPage.url)}>
                   <NavigationSuspense pages={pages}>
                     <article
-                      className={articleStyles({isWithToC: hasToC})}>
+                      className={articleStyles({isSubPage: isSubpage, isCentered: currentPage.exports?.hideNav})}>
                       {currentPage.exports?.version && <VersionBadge version={currentPage.exports.version} />}
                       {React.cloneElement(children, {
                         components: isSubpage ?
-                          subPageComponents(parentPage) :
+                          subPageComponents(parentPage, currentPage) :
                           components,
                         pages
                       })}
@@ -374,13 +394,3 @@ function MobileRelatedPages({pages}: {pages: Array<{title: string, url: string}>
     </div>
   );
 }
-export function Time({date}: {date: string}) {
-  let dateObj = new Date(date);
-  return (
-    <time
-      dateTime={date}
-      className={style({font: 'detail'})}>
-      {dateObj.toLocaleDateString('en-US', {year: 'numeric', month: 'long', day: 'numeric'})}
-    </time>
-  );
-}
diff --git a/packages/dev/s2-docs/src/Link.tsx b/packages/dev/s2-docs/src/Link.tsx
index ff65db5cb15..994d962d703 100644
--- a/packages/dev/s2-docs/src/Link.tsx
+++ b/packages/dev/s2-docs/src/Link.tsx
@@ -50,12 +50,7 @@ export function CodeLink(props: RACLinkProps) {
 
 const titleLink = style({
   ...focusRing(),
-  font: 'heading',
-  fontSize: {
-    // On mobile, adjust heading to fit in the viewport, and clamp between a min and max font size.
-    default: 'clamp(35px, (100vw - 32px) / var(--width-per-em), 55px)',
-    lg: 'heading'
-  },
+  font: 'title',
   marginY: 0,
   color: {
     default: 'heading',
diff --git a/packages/dev/s2-docs/src/ReleasesList.tsx b/packages/dev/s2-docs/src/ReleasesList.tsx
index ac43d7829a0..e094694bf18 100644
--- a/packages/dev/s2-docs/src/ReleasesList.tsx
+++ b/packages/dev/s2-docs/src/ReleasesList.tsx
@@ -13,7 +13,7 @@ export function ReleasesList({pages}: {pages: Page[]}) {
       {releases.map(release => (
         <div key={release.name}>
           <header className={style({marginBottom: 12})}>
-            <h2 className={style({font: 'heading-lg', margin: 0})}><Link href={release.url}>{release.exports?.title}</Link></h2>
+            <h2 className={style({font: 'title-xl', margin: 0})}><Link href={release.url}>{release.exports?.title}</Link></h2>
             <Time date={release.exports?.date} />
           </header>
           <p className={style({font: 'body', margin: 0})}>{renderHTMLfromMarkdown(release.exports?.description, {})}</p>

From b13ab96c030e63ca58cc088d804e26ab14e62268 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Sun, 23 Nov 2025 11:15:17 -0800
Subject: [PATCH 02/11] Mark examples as sub-pages

---
 packages/dev/s2-docs/pages/react-aria/examples/crud.mdx          | 1 +
 packages/dev/s2-docs/pages/react-aria/examples/emoji-picker.mdx  | 1 +
 packages/dev/s2-docs/pages/react-aria/examples/ios-list.mdx      | 1 +
 packages/dev/s2-docs/pages/react-aria/examples/kanban.mdx        | 1 +
 packages/dev/s2-docs/pages/react-aria/examples/photos.mdx        | 1 +
 packages/dev/s2-docs/pages/react-aria/examples/ripple-button.mdx | 1 +
 packages/dev/s2-docs/pages/react-aria/examples/sheet.mdx         | 1 +
 .../dev/s2-docs/pages/react-aria/examples/swipeable-tabs.mdx     | 1 +
 8 files changed, 8 insertions(+)

diff --git a/packages/dev/s2-docs/pages/react-aria/examples/crud.mdx b/packages/dev/s2-docs/pages/react-aria/examples/crud.mdx
index a95ecbf1479..c1520d9b46e 100644
--- a/packages/dev/s2-docs/pages/react-aria/examples/crud.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/examples/crud.mdx
@@ -8,6 +8,7 @@ import {ExampleApp} from '../../../src/ExampleApp';
 import {ComponentList} from '../../../src/ComponentCard';
 
 export const hideNav = true;
+export const isSubpage = true;
 export const section = 'Examples';
 export const keywords = ['react-aria', 'example', 'table', 'search', 'filters', 'taggroup', 'actions', 'form', 'menu', 'popover', 'searchfield', 'dropzone', 'crud'];
 export const description = 'Table with search, filters, column resizing, and form validation.';
diff --git a/packages/dev/s2-docs/pages/react-aria/examples/emoji-picker.mdx b/packages/dev/s2-docs/pages/react-aria/examples/emoji-picker.mdx
index e0867069831..05b9e2648a3 100644
--- a/packages/dev/s2-docs/pages/react-aria/examples/emoji-picker.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/examples/emoji-picker.mdx
@@ -4,6 +4,7 @@ export default Layout;
 import {ComponentList} from '../../../src/ComponentCard';
 
 export const hideNav = true;
+export const isSubpage = true;
 export const section = 'Examples';
 export const keywords = ['react-aria', 'example', 'select', 'popover', 'autocomplete', 'search', 'searchfield', 'virtualizer', 'listbox'];
 export const description = 'With autocomplete, virtualized scrolling, and keyboard navigation.';
diff --git a/packages/dev/s2-docs/pages/react-aria/examples/ios-list.mdx b/packages/dev/s2-docs/pages/react-aria/examples/ios-list.mdx
index cb9cbac4b31..545494c7ead 100644
--- a/packages/dev/s2-docs/pages/react-aria/examples/ios-list.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/examples/ios-list.mdx
@@ -5,6 +5,7 @@ import '../../../tailwind/tailwind.css';
 import {ComponentList} from '../../../src/ComponentCard';
 
 export const hideNav = true;
+export const isSubpage = true;
 export const section = 'Examples';
 export const keywords = ['react-aria', 'example', 'gridlist', 'gesture', 'framer motion', 'tailwind'];
 export const description = 'A GridList with Framer Motion swipe gestures and layout animations.';
diff --git a/packages/dev/s2-docs/pages/react-aria/examples/kanban.mdx b/packages/dev/s2-docs/pages/react-aria/examples/kanban.mdx
index 8f4a7984ba6..27348081c72 100644
--- a/packages/dev/s2-docs/pages/react-aria/examples/kanban.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/examples/kanban.mdx
@@ -5,6 +5,7 @@ import '../../../tailwind/tailwind.css';
 import {ComponentList} from '../../../src/ComponentCard';
 
 export const hideNav = true;
+export const isSubpage = true;
 export const section = 'Examples';
 export const keywords = ['react-aria', 'example', 'gridlist', 'kanban', 'drag and drop', 'tailwind'];
 export const description = 'A kanban board with accessible drag and drop, styled with Tailwind CSS.';
diff --git a/packages/dev/s2-docs/pages/react-aria/examples/photos.mdx b/packages/dev/s2-docs/pages/react-aria/examples/photos.mdx
index c1c7a744713..d1463b67e33 100644
--- a/packages/dev/s2-docs/pages/react-aria/examples/photos.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/examples/photos.mdx
@@ -6,6 +6,7 @@ import {ExampleApp} from '../../../src/ExampleApp';
 import {ComponentList} from '../../../src/ComponentCard';
 
 export const hideNav = true;
+export const isSubpage = true;
 export const section = 'Examples';
 export const keywords = ['react-aria', 'example', 'gridlist', 'autocomplete', 'searchfield', 'virtualizer', 'view transition', 'tree', 'selection', 'drag and drop', 'slider'];
 export const description = 'Virtualized photo grid, view transitions, folder tree, search, and drag and drop.';
diff --git a/packages/dev/s2-docs/pages/react-aria/examples/ripple-button.mdx b/packages/dev/s2-docs/pages/react-aria/examples/ripple-button.mdx
index a5f4cb02242..fdec2c85b16 100644
--- a/packages/dev/s2-docs/pages/react-aria/examples/ripple-button.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/examples/ripple-button.mdx
@@ -5,6 +5,7 @@ import '../../../tailwind/tailwind.css';
 import {ComponentList} from '../../../src/ComponentCard';
 
 export const hideNav = true;
+export const isSubpage = true;
 export const section = 'Examples';
 export const keywords = ['react-aria', 'example', 'button', 'tailwind'];
 export const description = 'A button with an animated ripple effect styled with Tailwind CSS.';
diff --git a/packages/dev/s2-docs/pages/react-aria/examples/sheet.mdx b/packages/dev/s2-docs/pages/react-aria/examples/sheet.mdx
index 14f22ae7bd6..10f888d7247 100644
--- a/packages/dev/s2-docs/pages/react-aria/examples/sheet.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/examples/sheet.mdx
@@ -5,6 +5,7 @@ import '../../../tailwind/tailwind.css';
 import {ComponentList} from '../../../src/ComponentCard';
 
 export const hideNav = true;
+export const isSubpage = true;
 export const section = 'Examples';
 export const keywords = ['react-aria', 'example', 'dialog', 'modal', 'sheet', 'motion', 'tailwind'];
 export const description = 'An iOS-style gesture driven modal sheet built with Framer Motion.';
diff --git a/packages/dev/s2-docs/pages/react-aria/examples/swipeable-tabs.mdx b/packages/dev/s2-docs/pages/react-aria/examples/swipeable-tabs.mdx
index b0639e51ff4..57fc6c3c085 100644
--- a/packages/dev/s2-docs/pages/react-aria/examples/swipeable-tabs.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/examples/swipeable-tabs.mdx
@@ -5,6 +5,7 @@ import '../../../tailwind/tailwind.css';
 import {ComponentList} from '../../../src/ComponentCard';
 
 export const hideNav = true;
+export const isSubpage = true;
 export const section = 'Examples';
 export const keywords = ['react-aria', 'example', 'tabs', 'tailwind'];
 export const description = 'With CSS scroll snapping, scroll-driven animations, and anchor positioning.';

From 7a50449dca3a037b7c2a52c8a844c5d87982d0cb Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Sun, 23 Nov 2025 14:01:42 -0800
Subject: [PATCH 03/11] Use text-wrap: balance

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

diff --git a/packages/dev/s2-docs/src/Headings.tsx b/packages/dev/s2-docs/src/Headings.tsx
index 5ad9d25aa54..a915956dca4 100644
--- a/packages/dev/s2-docs/src/Headings.tsx
+++ b/packages/dev/s2-docs/src/Headings.tsx
@@ -57,7 +57,7 @@ export function H2({children, ...props}) {
   let {hoverProps, isHovered} = useHover({});
   let id = anchorId(children);
   return (
-    <h2 {...props} id={id} className={style({font: 'heading-lg', marginTop: 48, marginBottom: 24, maxWidth: '--text-width', marginX: 'auto'})} {...hoverProps}>
+    <h2 {...props} id={id} className={style({font: 'heading-lg', marginTop: 48, marginBottom: 24, maxWidth: '--text-width', marginX: 'auto', textWrap: 'balance'})} {...hoverProps}>
       {children}
       <AnchorLink anchorId={id} isHovered={isHovered} level={2} headingText={children} />
     </h2>
@@ -68,7 +68,7 @@ export function H3({children, ...props}) {
   let {hoverProps, isHovered} = useHover({});
   let id = anchorId(children);
   return (
-    <h3 {...props} id={id} className={style({font: 'heading', marginTop: 36, marginBottom: 24, maxWidth: '--text-width', marginX: 'auto'})} {...hoverProps}>
+    <h3 {...props} id={id} className={style({font: 'heading', marginTop: 36, marginBottom: 24, maxWidth: '--text-width', marginX: 'auto', textWrap: 'balance'})} {...hoverProps}>
       {children}
       <AnchorLink anchorId={id} isHovered={isHovered} level={3} headingText={children} />
     </h3>
@@ -79,7 +79,7 @@ export function H4({children, ...props}) {
   let {hoverProps, isHovered} = useHover({});
   let id = anchorId(children);
   return (
-    <h4 {...props} id={id} className={style({font: 'heading-sm', maxWidth: '--text-width', marginX: 'auto'})} {...hoverProps}>
+    <h4 {...props} id={id} className={style({font: 'heading-sm', maxWidth: '--text-width', marginX: 'auto', textWrap: 'balance'})} {...hoverProps}>
       {children}
       <AnchorLink anchorId={id} isHovered={isHovered} level={4} headingText={children} />
     </h4>

From 1761e2aad8aa8b8368b8c2a4a792f451becb8403 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Sun, 23 Nov 2025 14:28:29 -0800
Subject: [PATCH 04/11] widen layout, improve spacing and wrapping, add SEO
 tags

---
 .../@react-aria/utils/src/filterDOMProps.ts   |   3 +-
 packages/@react-aria/utils/src/openLink.tsx   |   3 +-
 packages/@react-spectrum/s2/src/Content.tsx   |   7 +-
 packages/@react-types/shared/src/dom.d.ts     |   2 +
 .../pages/assets/rtl-actual-placeholder.svg   |   2 +-
 .../dev/docs/pages/assets/rtl-timefield.svg   |   2 +-
 .../pages/react-aria/blog/drag-and-drop.mdx   |   6 +-
 .../s2-docs/pages/react-aria/blog/index.mdx   |   5 +-
 .../pages/react-aria/examples/index.mdx       |   1 +
 .../dev/s2-docs/pages/react-aria/index.mdx    |   4 +-
 .../pages/react-aria/releases/index.mdx       |   7 +-
 .../pages/react-aria/releases/v1-13-0.mdx     |   1 -
 .../dev/s2-docs/pages/s2/releases/index.mdx   |   7 +-
 packages/dev/s2-docs/src/BlogList.tsx         |  41 ----
 packages/dev/s2-docs/src/ExampleList.tsx      |  35 ++-
 packages/dev/s2-docs/src/Headings.tsx         |  29 +++
 packages/dev/s2-docs/src/Layout.tsx           | 208 ++++++++++--------
 packages/dev/s2-docs/src/PostList.tsx         |  58 +++++
 packages/dev/s2-docs/src/PropTable.tsx        |   2 +-
 packages/dev/s2-docs/src/ReleasesList.tsx     |  29 ---
 20 files changed, 266 insertions(+), 186 deletions(-)
 delete mode 100644 packages/dev/s2-docs/src/BlogList.tsx
 create mode 100644 packages/dev/s2-docs/src/PostList.tsx
 delete mode 100644 packages/dev/s2-docs/src/ReleasesList.tsx

diff --git a/packages/@react-aria/utils/src/filterDOMProps.ts b/packages/@react-aria/utils/src/filterDOMProps.ts
index 0a3ebd5a903..72b435e267f 100644
--- a/packages/@react-aria/utils/src/filterDOMProps.ts
+++ b/packages/@react-aria/utils/src/filterDOMProps.ts
@@ -31,7 +31,8 @@ const linkPropNames = new Set([
   'rel',
   'download',
   'ping',
-  'referrerPolicy'
+  'referrerPolicy',
+  'itemProp'
 ]);
 
 const globalAttrs = new Set([
diff --git a/packages/@react-aria/utils/src/openLink.tsx b/packages/@react-aria/utils/src/openLink.tsx
index e3c4823f998..4246a7bf5b1 100644
--- a/packages/@react-aria/utils/src/openLink.tsx
+++ b/packages/@react-aria/utils/src/openLink.tsx
@@ -180,7 +180,8 @@ export function useLinkProps(props?: LinkDOMProps): LinkDOMProps {
     rel: props?.rel,
     download: props?.download,
     ping: props?.ping,
-    referrerPolicy: props?.referrerPolicy
+    referrerPolicy: props?.referrerPolicy,
+    itemProp: props?.itemProp
   };
 }
 
diff --git a/packages/@react-spectrum/s2/src/Content.tsx b/packages/@react-spectrum/s2/src/Content.tsx
index e7086d4a568..662dff0a2a2 100644
--- a/packages/@react-spectrum/s2/src/Content.tsx
+++ b/packages/@react-spectrum/s2/src/Content.tsx
@@ -24,7 +24,12 @@ interface ContentProps extends UnsafeStyles, SlotProps {
   children: ReactNode,
   styles?: StyleString,
   isHidden?: boolean,
-  id?: string
+  id?: string,
+  itemProp?: string,
+  itemScope?: boolean,
+  itemType?: string,
+  itemID?: string,
+  itemRef?: string
 }
 
 interface HeadingProps extends Omit<ContentProps, 'children'> {
diff --git a/packages/@react-types/shared/src/dom.d.ts b/packages/@react-types/shared/src/dom.d.ts
index 5c36c80cd7e..c4aa89aa8fd 100644
--- a/packages/@react-types/shared/src/dom.d.ts
+++ b/packages/@react-types/shared/src/dom.d.ts
@@ -218,6 +218,8 @@ export interface LinkDOMProps {
   ping?: string,
   /** How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). */
   referrerPolicy?: HTMLAttributeReferrerPolicy,
+  /** Associates the link URL with a microdata object. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/itemprop). */
+  itemProp?: string,
   /** Options for the configured client side router. */
   routerOptions?: RouterOptions
 }
diff --git a/packages/dev/docs/pages/assets/rtl-actual-placeholder.svg b/packages/dev/docs/pages/assets/rtl-actual-placeholder.svg
index f5ff855aafb..3cbbf951f0b 100644
--- a/packages/dev/docs/pages/assets/rtl-actual-placeholder.svg
+++ b/packages/dev/docs/pages/assets/rtl-actual-placeholder.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="437" height="250" style="max-height: 496px; background: var(--anatomy-gray-100); padding: 32px; margin-top: 16px; margin-bottom: 32px; width: calc(100% - 64px); border-radius: 4px;"  viewBox="0 0 310 120">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="437" height="250" style="max-height: 496px; background: var(--anatomy-gray-100); padding: 32px; margin-top: 16px; margin-bottom: 32px; width: calc(100% - 64px); max-width: 437px; display: block; margin-left: auto; margin-right: auto; border-radius: var(--anatomy-radius);"  viewBox="0 0 310 120">
   <g id="Text_field" data-name="Text field" transform="translate(9 38)">
     <g id="Placement_Area" data-name="Placement Area" fill="red" stroke="var(--anatomy-gray-900)" stroke-opacity="0" stroke-width="1" opacity="0">
       <rect width="124" height="56" stroke="none"/>
diff --git a/packages/dev/docs/pages/assets/rtl-timefield.svg b/packages/dev/docs/pages/assets/rtl-timefield.svg
index ea621765b97..35ab77640e8 100644
--- a/packages/dev/docs/pages/assets/rtl-timefield.svg
+++ b/packages/dev/docs/pages/assets/rtl-timefield.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="437" height="250" style="max-height: 496px; background: var(--anatomy-gray-100); padding: 32px; margin-top: 16px; margin-bottom: 32px; width: calc(100% - 64px); border-radius: 4px;"  viewBox="0 0 280 120">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="437" height="250" style="max-height: 496px; background: var(--anatomy-gray-100); padding: 32px; margin-top: 16px; margin-bottom: 32px; width: calc(100% - 64px); max-width: 437px; display: block; margin-left: auto; margin-right: auto; border-radius: var(--anatomy-radius);"  viewBox="0 0 280 120">
   <text id="Hover_Text_area_" data-name="Hover (Text area)" transform="translate(25 17)" fill="var(--anatomy-gray-900)" font-size="12" font-family="var(--anatomy-font)"><tspan x="0" y="0">Incorrect (he-IL)</tspan></text>
   <rect id="Rule" width="280" height="4" rx="2" transform="translate(0 27)" fill="var(--anatomy-gray-800)"/>
   <g id="Text_field" data-name="Text field" transform="translate(2 33)">
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/drag-and-drop.mdx b/packages/dev/s2-docs/pages/react-aria/blog/drag-and-drop.mdx
index 2d869e605a8..316a3001653 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/drag-and-drop.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/drag-and-drop.mdx
@@ -57,7 +57,9 @@ After years of research, development, and extensive testing across many devices
 
 Drag and drop starts with a drag source, implemented using the [useDrag](../useDrag.html) hook, which provides data to be dragged. Multiple items can be dragged at once, and each item can include several representations in different data formats so that they can be dropped in many compatible locations. The [useDrop](../useDrop.html) hook can be used to implement a drop target, which accepts dragged items containing specific data types.
 
-<Anatomy role="img" aria-label="Drag and drop anatomy diagram, showing drag source, drag preview, and drop target." />
+<div style={{maxWidth: 'calc(var(--text-width) + 64px)', margin: '0 auto'}}>
+  <Anatomy role="img" aria-label="Drag and drop anatomy diagram, showing drag source, drag preview, and drop target." />
+</div>
 
 For mouse and touch screen users, React Aria uses the native [HTML drag and drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) under the hood. This means items can be dragged within the browser window, between browser windows, or even outside the browser into external native applications (e.g. email programs). External items such as files or directories from the user's device may also be dragged in.
 
@@ -80,7 +82,7 @@ All of these accessibility features are implemented behind the scenes using the
 Collection components such as lists or tables are treated as a single drop target, so that users can easily tab past them to get to the next drop target without going through every item. Within a droppable collection, keys such as `ArrowDown` and `ArrowUp` can be used to select a drop position, such as on the collection itself, on an item, or between items. Drop indicator elements may be added between items to show the user where dropped data will be inserted, and include accessibility labels such as "Insert between item A and item B".
 
 <figure style={{display: 'flex', flexDirection: 'column', alignItems: 'center', margin: '20px 0'}}>
-  <div style={{display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 50, marginBottom: 4, background: 'var(--anatomy-gray-100)', padding: 32, width: 'calc(100% - 64px)', borderRadius: 4}}>
+  <div style={{display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 50, marginBottom: 4, background: 'var(--anatomy-gray-100)', padding: 32, width: 'calc(100% - 64px)', borderRadius: 'var(--anatomy-radius)'}}>
     <RootDropPosition role="img" aria-label="Root drop position diagram, showing the root drop position." />
     <OnDropPosition role="img" aria-label="On drop position diagram, showing the on drop position." />
     <BetweenDropPosition role="img" aria-label="Between drop position diagram, showing the between drop position." />
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/index.mdx b/packages/dev/s2-docs/pages/react-aria/blog/index.mdx
index afaa1cca139..be6ea49872e 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/index.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/index.mdx
@@ -8,7 +8,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License. */}
 
 import {Layout} from '../../../src/Layout';
-import {BlogList} from '../../../src/BlogList';
+import {PostList} from '../../../src/PostList';
 
 export default Layout;
 
@@ -17,8 +17,9 @@ export const section = 'Blog';
 export const title = 'Blog';
 export const hideFromSearch = true;
 export const tags = ['blog', 'articles', 'posts'];
+export const isPostList = true;
 
 # Blog
 
-<BlogList pages={props.pages.filter(page => page.name.startsWith('react-aria/blog/') && !page.name.endsWith('index.html')) ?? []} />
+<PostList pages={props.pages.filter(page => page.name.startsWith('react-aria/blog/') && !page.name.endsWith('index.html')) ?? []} />
 
diff --git a/packages/dev/s2-docs/pages/react-aria/examples/index.mdx b/packages/dev/s2-docs/pages/react-aria/examples/index.mdx
index 7d7bb8bdba7..202a3363822 100644
--- a/packages/dev/s2-docs/pages/react-aria/examples/index.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/examples/index.mdx
@@ -4,6 +4,7 @@ export default Layout;
 export const section = 'Overview';
 export const hideFromSearch = true;
 export const title = 'Examples';
+export const isPostList = true;
 
 # Examples
 
diff --git a/packages/dev/s2-docs/pages/react-aria/index.mdx b/packages/dev/s2-docs/pages/react-aria/index.mdx
index 1d8ea951a54..7bc8eef1ec3 100644
--- a/packages/dev/s2-docs/pages/react-aria/index.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/index.mdx
@@ -49,9 +49,9 @@ export const hideFromSearch = true;
       dangerouslySetInnerHTML={{__html: JSON.stringify(
         {
           '@context': 'http://schema.org',
-          '@type': 'Article',
+          '@type': 'WebPage',
           author: 'Adobe Inc',
-          headline: 'React Aria',
+          name: 'React Aria',
           description: 'Craft world-class accessible components with custom styles.',
           image: ogImage,
           publisher: {
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/index.mdx b/packages/dev/s2-docs/pages/react-aria/releases/index.mdx
index d9478e971c2..713b6e0239e 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/index.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/index.mdx
@@ -8,7 +8,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License. */}
 
 import {Layout} from '../../../src/Layout';
-import {ReleasesList} from '../../../src/ReleasesList';
+import {PostList} from '../../../src/PostList';
 export default Layout;
 
 export const hideNav = true;
@@ -16,7 +16,10 @@ export const section = 'Releases';
 export const tags = ['changelog', 'versions', 'updates'];
 export const title = 'Releases';
 export const hideFromSearch = true;
+export const isPostList = true;
 
 # Releases
 
-<ReleasesList pages={props.pages.filter(page => page.name.includes('react-aria') && page.name.includes('releases') && !page.name.includes('index.html')) ?? []} />
+<PostList pages={props.pages.filter(page => page.name.includes('react-aria') && page.name.includes('releases') && !page.name.includes('index.html')) ?? []} />
+
+For all previous releases, see the [Archived releases](https://react-spectrum.adobe.com/releases/index.html) page.
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-13-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-13-0.mdx
index ffa3e2e5311..7d84d4cd28f 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/v1-13-0.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/v1-13-0.mdx
@@ -11,7 +11,6 @@ import {Layout} from '../../../src/Layout';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/s2';
-import {ReleasedVersions} from '../../../src/ReleasesList';
 
 export const hideNav = true;
 export const section = 'Releases';
diff --git a/packages/dev/s2-docs/pages/s2/releases/index.mdx b/packages/dev/s2-docs/pages/s2/releases/index.mdx
index 65e91946075..9b2bf0fd4ae 100644
--- a/packages/dev/s2-docs/pages/s2/releases/index.mdx
+++ b/packages/dev/s2-docs/pages/s2/releases/index.mdx
@@ -8,7 +8,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License. */}
 
 import {Layout} from '../../../src/Layout';
-import {ReleasesList} from '../../../src/ReleasesList';
+import {PostList} from '../../../src/PostList';
 export default Layout;
 
 export const hideNav = true;
@@ -16,7 +16,10 @@ export const section = 'Releases';
 export const tags = ['changelog', 'versions', 'updates'];
 export const title = 'Releases';
 export const hideFromSearch = true;
+export const isPostList = true;
 
 # Releases
 
-<ReleasesList pages={props.pages.filter(page => page.name.includes('s2') && page.name.includes('releases') && !page.name.includes('index.html')) ?? []} />
+<PostList pages={props.pages.filter(page => page.name.includes('s2') && page.name.includes('releases') && !page.name.includes('index.html')) ?? []} />
+
+For all previous releases of React Spectrum v3, see the [Archived releases](https://react-spectrum.adobe.com/releases/index.html) page.
diff --git a/packages/dev/s2-docs/src/BlogList.tsx b/packages/dev/s2-docs/src/BlogList.tsx
deleted file mode 100644
index 89c921cf5c4..00000000000
--- a/packages/dev/s2-docs/src/BlogList.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import {Link} from './Link';
-import type {Page} from '@parcel/rsc';
-import React from 'react';
-import {renderHTMLfromMarkdown} from './types';
-import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
-
-export function BlogList({pages}: {pages: Page[]}) {
-  let blogPosts = pages.sort((a, b) => {
-    return new Date(b.exports?.date).getTime() - new Date(a.exports?.date).getTime();
-  });
-
-  return (
-    <article className={style({marginY: 40, display: 'flex', flexDirection: 'column', gap: 40})}>
-      {blogPosts.map(post => (
-        <div key={post.name}>
-          <header className={style({marginBottom: 12})}>
-            <h2 className={style({font: 'title-xl', margin: 0})}><Link href={post.url}>{post.tableOfContents?.[0]?.title || post.exports?.title}</Link></h2>
-            <Byline author={post.exports?.author} authorLink={post.exports?.authorLink} date={post.exports?.date} />
-          </header>
-          <p className={style({font: 'body', margin: 0})}>{renderHTMLfromMarkdown(post.exports?.description, {forceInline: true, forceBlock: false})}</p>
-        </div>
-      ))}
-    </article>
-  );
-}
-
-export function Byline({author, authorLink, date}: {author?: string, authorLink?: string, date: string}) {
-  let formattedDate = new Date(date).toLocaleDateString('en-US', {year: 'numeric', month: 'long', day: 'numeric'});
-
-  return (
-    <div className={style({font: 'detail', width: 'full', maxWidth: '--text-width', marginX: 'auto', marginTop: 4})}>
-      {author && (
-        <>
-          By {authorLink ? <Link href={authorLink} isQuiet>{author}</Link> : author}
-          {' · '}
-        </>
-      )}
-      <time dateTime={date}>{formattedDate}</time>
-    </div>
-  );
-}
diff --git a/packages/dev/s2-docs/src/ExampleList.tsx b/packages/dev/s2-docs/src/ExampleList.tsx
index 6a4d34a2b02..f1abe4c3c1d 100644
--- a/packages/dev/s2-docs/src/ExampleList.tsx
+++ b/packages/dev/s2-docs/src/ExampleList.tsx
@@ -35,6 +35,8 @@ export function ExampleList({tag, pages}) {
 
   return (
     <ul
+      itemScope
+      itemType="https://schema.org/ItemList"
       className={style({
         display: 'grid',
         gridTemplateColumns: `repeat(auto-fit, ${size(240)})`,
@@ -47,17 +49,28 @@ export function ExampleList({tag, pages}) {
           lg: 'start'
         }
       })}>
+      <meta itemProp="name" content="Examples" />
       {examples.map(example => (
-        <li key={example.url}>
-          <Card href={example.url}>
-            <CardPreview>
-              <ExampleImage name={example.name} />
-            </CardPreview>
-            <Content>
-              <Text slot="title">{getTitle(example)}</Text>
-              {example.exports?.description ? <Text slot="description">{example.exports?.description}</Text> : null}
-            </Content>
-          </Card>
+        <li
+          key={example.url}
+          itemProp="itemListElement"
+          itemScope
+          itemType="https://schema.org/ListItem">
+          <div
+            className={style({display: 'contents'})}
+            itemProp="item"
+            itemScope
+            itemType="https://schema.org/TechArticle">
+            <Card href={example.url} itemProp="url">
+              <CardPreview>
+                <ExampleImage name={example.name} />
+              </CardPreview>
+              <Content>
+                <Text slot="title" itemProp="headline">{getTitle(example)}</Text>
+                {example.exports?.description ? <Text slot="description" itemProp="description">{example.exports?.description}</Text> : null}
+              </Content>
+            </Card>
+          </div>
         </li>
       ))}
     </ul>
@@ -85,7 +98,7 @@ export function ExampleImage({name}) {
     <picture>
       <source srcSet={light} media="(prefers-color-scheme: light)" />
       <source srcSet={dark} media="(prefers-color-scheme: dark)" />
-      <img src={light} alt="" className={image} />
+      <img src={light} alt="" itemProp="image" className={image} />
     </picture>
   );
 }
diff --git a/packages/dev/s2-docs/src/Headings.tsx b/packages/dev/s2-docs/src/Headings.tsx
index a915956dca4..1a4a3eda22a 100644
--- a/packages/dev/s2-docs/src/Headings.tsx
+++ b/packages/dev/s2-docs/src/Headings.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import {getTextWidth} from './textWidth';
 import {iconStyle, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {Link} from '@react-spectrum/s2';
 import LinkIcon from '@react-spectrum/s2/icons/Link';
@@ -53,6 +54,34 @@ function AnchorLink({anchorId, isHovered, level, headingText}) {
   );
 }
 
+const h1 = style({
+  font: 'heading-3xl',
+  fontSize: {
+    default: {
+      // On mobile, adjust heading to fit in the viewport, and clamp between a min and max font size.
+      default: 'clamp(35px, (100vw - 32px) / var(--width-per-em), 55px)',
+      isLongForm: 'heading-xl'
+    },
+    lg: {
+      default: 'heading-3xl',
+      isLongForm: 'heading-2xl'
+    }
+  },
+  textWrap: 'balance',
+  marginY: 0,
+  width: 'full',
+  maxWidth: '--text-width',
+  marginX: 'auto'
+});
+
+export function H1({children, isLongForm, ...props}) {
+  return (
+    <h1 {...props} id="top" style={{'--width-per-em': getTextWidth(children)} as any} className={h1({isLongForm})}>
+      {children}
+    </h1>
+  );
+}
+
 export function H2({children, ...props}) {
   let {hoverProps, isHovered} = useHover({});
   let id = anchorId(children);
diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx
index 3812517e649..350e7c06ef4 100644
--- a/packages/dev/s2-docs/src/Layout.tsx
+++ b/packages/dev/s2-docs/src/Layout.tsx
@@ -1,9 +1,9 @@
-import {Byline} from './BlogList';
+import {Byline, Time} from './PostList';
 import {ExampleList} from './ExampleList';
 import {Nav} from '../src/Nav';
 import {OptimisticMobileToc, OptimisticToc} from './OptimisticToc';
 import type {Page, PageProps} from '@parcel/rsc';
-import React, {ReactElement} from 'react';
+import React, {ReactElement, ReactNode} from 'react';
 import '../src/client';
 // @ts-ignore
 import internationalizedFavicon from 'url:../assets/internationalized.ico';
@@ -19,8 +19,7 @@ import {CodePlatterProvider} from './CodePlatter';
 import {Divider, Provider, UNSTABLE_ToastContainer as ToastContainer} from '@react-spectrum/s2';
 import {ExampleSwitcher} from './ExampleSwitcher';
 import {getLibraryFromPage, getLibraryFromUrl, getLibraryLabel} from './library';
-import {getTextWidth} from './textWidth';
-import {H2, H3, H4} from './Headings';
+import {H1, H2, H3, H4} from './Headings';
 import Header from './Header';
 import {iconStyle, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {Link, TitleLink} from './Link';
@@ -28,38 +27,38 @@ import {MobileHeader} from './MobileHeader';
 import {NavigationSuspense} from './NavigationSuspense';
 import {PropTable} from './PropTable';
 import {StateTable} from './StateTable';
-import {Time} from './ReleasesList';
 import {TypeLink} from './types';
 import {VersionBadge} from './VersionBadge';
 import {VisualExample} from './VisualExample';
 
-const h1 = style({
-  font: 'heading-3xl',
-  fontSize: {
-    default: {
-      // On mobile, adjust heading to fit in the viewport, and clamp between a min and max font size.
-      default: 'clamp(35px, (100vw - 32px) / var(--width-per-em), 55px)',
-      isSubPage: 'heading-xl'
-    },
-    lg: {
-      default: 'heading-3xl',
-      isSubPage: 'heading-2xl'
-    }
+const p = style({
+  font: 'body-lg',
+  textWrap: 'pretty',
+  marginY: '[1lh]',
+  maxWidth: '--text-width',
+  marginX: 'auto'
+});
+
+const li = style({
+  font: 'body-lg',
+  textWrap: 'pretty',
+  marginY: {
+    default: 0,
+    isLongForm: 8
   },
-  marginY: 0,
-  width: 'full',
   maxWidth: '--text-width',
   marginX: 'auto'
 });
 
-const components = {
-  h1: ({children, ...props}) => <h1 {...props} id="top" style={{'--width-per-em': getTextWidth(children)} as any} className={h1({isSubPage: false})}>{children}</h1>,
+const components = (isLongForm?: boolean) => ({
+  // h1 is rendered separately
+  h1: () => null,
   h2: H2,
   h3: H3,
   h4: H4,
-  p: ({children, ...props}) => <p {...props} className={style({font: 'body-lg', marginY: 24, maxWidth: '--text-width', marginX: 'auto'})}>{children}</p>,
+  p: ({children, ...props}) => <p {...props} className={p}>{children}</p>,
   ul: (props) => <ul {...props} />,
-  li: ({children, ...props}) => <li {...props} className={style({font: 'body-lg', marginY: 0, maxWidth: '--text-width', marginX: 'auto'})}>{children}</li>,
+  li: ({children, ...props}) => <li {...props} className={li({isLongForm})}>{children}</li>,
   Figure: (props) => <figure {...props} className={style({display: 'flex', flexDirection: 'column', alignItems: 'center', marginY: 32, marginX: 0})} />,
   Caption: (props) => <figcaption {...props} className={style({font: 'body-sm'})} />,
   CodeBlock: CodeBlock,
@@ -75,21 +74,6 @@ const components = {
   ExampleSwitcher,
   TypeLink,
   ExampleList
-};
-
-const subPageComponents = (previousPage: Page | undefined, currentPage: Page) => ({
-  ...components,
-  h1: ({children, ...props}) => (
-    <div className={style({display: 'flex', flexDirection: 'column', gap: 4, maxWidth: '--text-width', marginX: 'auto', marginBottom: 40})}>
-      <div className={style({display: 'flex', alignItems: 'center', gap: 2})}>
-        <TitleLink href="./index.html">{previousPage?.exports?.title}</TitleLink>
-        <ChevronRightIcon styles={iconStyle({size: 'XS'})} />
-      </div>
-      <h1 {...props} id="top" style={{'--width-per-em': getTextWidth(children)} as any} className={h1({isSubPage: true})}>{children}</h1>
-      {currentPage.exports?.author && <Byline author={currentPage.exports.author} authorLink={currentPage.exports.authorLink} date={currentPage.exports.date} />}
-      {currentPage.exports?.date && !currentPage.exports?.author && <Time date={currentPage.exports.date} />}
-    </div>
-  )
 });
 
 const getTitle = (currentPage: Page): string => {
@@ -142,18 +126,20 @@ const getFaviconUrl = (currentPage: Page): string => {
 };
 
 let articleStyles = style({
-  maxWidth: 768,
+  maxWidth: {
+    default: 768,
+    isWide: 'none',
+    isLongForm: 900
+  },
+  marginX: 'auto',
   width: 'full',
   height: 'fit',
-  marginX: {
-    default: 0,
-    isCentered: 'auto'
-  },
+  flexGrow: 1,
   '--text-width': {
     type: 'width',
     value: {
       default: 'auto',
-      isSubPage: 568 // ~80 characters at body font size
+      isLongForm: 600 // ~80 characters at body font size
     }
   }
 });
@@ -190,16 +176,21 @@ function Footer() {
 
 export function Layout(props: PageProps & {children: ReactElement<any>}) {
   let {pages, currentPage, children} = props;
-  let hasToC = (!currentPage.exports?.hideNav || currentPage.exports?.isSubpage) && currentPage.tableOfContents?.[0]?.children && currentPage.tableOfContents?.[0]?.children?.length > 0;
+  let isSubpage = currentPage.exports?.isSubpage;
+  let section = currentPage.exports?.section;
+  let isLongForm = isSubpage && section === 'Blog';
+  let hasToC = (!currentPage.exports?.hideNav || section === 'Blog' || section === 'Releases') && currentPage.tableOfContents?.[0]?.children && currentPage.tableOfContents?.[0]?.children?.length > 0;
+  let isWide = !hasToC && !isLongForm && section !== 'Blog' && section !== 'Releases';
   let library = getLibraryLabel(getLibraryFromPage(currentPage));
   let keywords = [...new Set((currentPage.exports?.keywords ?? []).concat([library]).filter(k => !!k))];
   let ogImage = getOgImageUrl(currentPage);
   let title = getTitle(currentPage);
   let description = getDescription(currentPage);
-  let isSubpage = currentPage.exports?.isSubpage;
   let parentPage = pages.find(p => {
     return p.url === currentPage.url.replace(/\/[^/]+\.html$/, '/index.html');
   });
+  let isPostList = currentPage.exports?.isPostList;
+  let Content = isPostList ? PostListContainer : Article;
   return (
     <Provider elementType="html" locale="en" background="layer-1" styles={style({scrollPaddingTop: {default: 64, lg: 0}})}>
       <head>
@@ -219,24 +210,6 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
         <meta property="og:description" content={description} />
         <meta property="og:locale" content="en_US" />
         <link rel="canonical" href={currentPage.url} />
-        <script
-          type="application/ld+json"
-          dangerouslySetInnerHTML={{__html: JSON.stringify(
-            {
-              '@context': 'http://schema.org',
-              '@type': 'Article',
-              author: 'Adobe Inc',
-              headline: title,
-              description: description,
-              image: ogImage,
-              publisher: {
-                '@type': 'Organization',
-                url: 'https://www.adobe.com',
-                name: 'Adobe',
-                logo: 'https://www.adobe.com/favicon.ico'
-              }
-            }
-          )}} />
       </head>
       <body
         className={style({
@@ -255,7 +228,7 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
             alignItems: 'center',
             maxWidth: {
               default: 'full',
-              lg: 1280
+              lg: 1440
             },
             marginX: 'auto',
             marginY: 0,
@@ -302,6 +275,10 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
                 flexGrow: 1,
                 display: 'flex',
                 justifyContent: 'space-between',
+                columnGap: {
+                  default: 12,
+                  lg: 40
+                },
                 position: 'relative',
                 height: {
                   lg: '[calc(100vh - 72px)]'
@@ -319,19 +296,12 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
                 })}>
                 <CodePlatterProvider library={getLibraryFromUrl(currentPage.url)}>
                   <NavigationSuspense pages={pages}>
-                    <article
-                      className={articleStyles({isSubPage: isSubpage, isCentered: currentPage.exports?.hideNav})}>
-                      {currentPage.exports?.version && <VersionBadge version={currentPage.exports.version} />}
+                    <Content page={currentPage} parentPage={parentPage} isLongForm={isLongForm} isWide={isWide}>
                       {React.cloneElement(children, {
-                        components: isSubpage ?
-                          subPageComponents(parentPage, currentPage) :
-                          components,
+                        components: components(isLongForm),
                         pages
                       })}
-                      {currentPage.exports?.relatedPages && (
-                        <MobileRelatedPages pages={currentPage.exports.relatedPages} />
-                      )}
-                    </article>
+                    </Content>
                   </NavigationSuspense>
                 </CodePlatterProvider>
                 <Footer />
@@ -366,11 +336,75 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
   );
 }
 
-function MobileRelatedPages({pages}: {pages: Array<{title: string, url: string}>}) {
-  const P = components.p;
-  const Li = components.li;
-  const Ul = components.ul;
+interface ArticleProps {
+  page: Page,
+  parentPage?: Page,
+  children: ReactNode,
+  isLongForm?: boolean,
+  isWide?: boolean
+}
 
+function Article({page, parentPage, children, isLongForm, isWide}: ArticleProps) {
+  let section = page.exports?.section;
+  return (
+    <article
+      className={articleStyles({isLongForm, isWide})}
+      itemScope
+      itemType={`https://schema.org/${section === 'Blog' || section === 'Releases' ? 'BlogPosting' : 'TechArticle'}`}>
+      <meta itemProp="description" content={getDescription(page)} />
+      <meta itemProp="image" content={getOgImageUrl(page)} />
+      <div itemProp="publisher" itemScope itemType="https://schema.org/Organization" hidden>
+        <meta itemProp="name" content="Adobe" />
+        <meta itemProp="url" content="https://www.adobe.com" />
+        <meta itemProp="logo" content="https://www.adobe.com/favicon.ico" />
+      </div>
+      {page.exports?.version && <VersionBadge version={page.exports.version} />}
+      {page.exports?.isSubpage
+        ? <SubpageHeader currentPage={page} parentPage={parentPage} isLongForm={isLongForm} />
+        : <H1 itemProp="headline" isLongForm={isLongForm}>{page.tableOfContents?.[0].title}</H1>
+      }
+      <div
+        className={style({display: 'contents'})}
+        itemProp="articleBody">
+        {children}
+      </div>
+      {page.exports?.relatedPages && (
+        <MobileRelatedPages pages={page.exports.relatedPages} />
+      )}
+    </article>
+  );
+}
+
+function PostListContainer({page, children, isLongForm, isWide}: ArticleProps) {
+  return (
+    <div className={articleStyles({isLongForm, isWide})}>
+      <H1 isLongForm={isLongForm}>{page.tableOfContents?.[0].title}</H1>
+      {children}
+    </div>
+  );
+}
+
+interface SubpageHeaderProps {
+  currentPage: Page,
+  parentPage?: Page,
+  isLongForm?: boolean
+}
+
+function SubpageHeader({currentPage, parentPage, isLongForm}: SubpageHeaderProps) {
+  return (
+    <div className={style({display: 'flex', flexDirection: 'column', gap: 4, maxWidth: '--text-width', marginX: 'auto', marginBottom: 40})}>
+      <div className={style({display: 'flex', alignItems: 'center', gap: 2})}>
+        <TitleLink href="./index.html">{parentPage?.exports?.title}</TitleLink>
+        <ChevronRightIcon styles={iconStyle({size: 'XS'})} />
+      </div>
+      <H1 itemProp="headline" isLongForm={isLongForm}>{currentPage.tableOfContents?.[0].title}</H1>
+      {currentPage.exports?.author && <Byline author={currentPage.exports.author} authorLink={currentPage.exports.authorLink} date={currentPage.exports.date} />}
+      {currentPage.exports?.date && !currentPage.exports?.author && <Time date={currentPage.exports.date} />}
+    </div>
+  );
+}
+
+function MobileRelatedPages({pages}: {pages: Array<{title: string, url: string}>}) {
   return (
     <div
       className={style({
@@ -380,17 +414,15 @@ function MobileRelatedPages({pages}: {pages: Array<{title: string, url: string}>
         }
       })}>
       <H2 id="related-pages">Related pages</H2>
-      <Ul className={style({listStyleType: 'none'})}>
+      <ul className={style({listStyleType: 'none'})}>
         {pages.map((page, i) => (
-          <Li key={i}>
-            <P>
-              <Link href={page.url}>
-                {page.title}
-              </Link>
-            </P>
-          </Li>
+          <li key={i} className={li({isLongForm: false})}>
+            <Link href={page.url}>
+              {page.title}
+            </Link>
+          </li>
         ))}
-      </Ul>
+      </ul>
     </div>
   );
 }
diff --git a/packages/dev/s2-docs/src/PostList.tsx b/packages/dev/s2-docs/src/PostList.tsx
new file mode 100644
index 00000000000..e34e9c4a29c
--- /dev/null
+++ b/packages/dev/s2-docs/src/PostList.tsx
@@ -0,0 +1,58 @@
+import {Link} from './Link';
+import type {Page} from '@parcel/rsc';
+import {renderHTMLfromMarkdown} from './types';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+export function PostList({pages}: {pages: Page[]}) {
+  let posts = pages.sort((a, b) => {
+    return new Date(b.exports?.date).getTime() - new Date(a.exports?.date).getTime();
+  });
+
+  return (
+    <div
+      itemScope
+      itemType="https://schema.org/Blog"
+      className={style({marginY: 40, display: 'flex', flexDirection: 'column', gap: 40})}>
+      <div itemProp="publisher" itemScope itemType="https://schema.org/Organization" hidden>
+        <meta itemProp="name" content="Adobe" />
+        <meta itemProp="url" content="https://www.adobe.com" />
+        <meta itemProp="logo" content="https://www.adobe.com/favicon.ico" />
+      </div>
+      {posts.map(post => (
+        <article key={post.name} itemProp="blogPost" itemScope itemType="https://schema.org/BlogPosting">
+          <header className={style({marginBottom: 12})}>
+            <h2 itemProp="headline" className={style({font: 'title-xl', margin: 0})}>
+              <Link itemProp="url" href={post.url}>{post.tableOfContents?.[0]?.title || post.exports?.title}</Link>
+            </h2>
+            {post.exports?.author && <Byline author={post.exports?.author} authorLink={post.exports?.authorLink} date={post.exports?.date} />}
+            {post.exports?.date && !post.exports.author && <Time date={post.exports.date} />}
+          </header>
+          <p itemProp="description" className={style({font: 'body', margin: 0})}>{renderHTMLfromMarkdown(post.exports?.description, {forceInline: true, forceBlock: false})}</p>
+        </article>
+      ))}
+    </div>
+  );
+}
+
+export function Byline({author, authorLink, date}: {author?: string, authorLink?: string, date: string}) {
+  let formattedDate = new Date(date).toLocaleDateString('en-US', {year: 'numeric', month: 'long', day: 'numeric'});
+
+  return (
+    <div className={style({font: 'detail', width: 'full', maxWidth: '--text-width', marginX: 'auto', marginTop: 4})}>
+      {author && (
+        <>
+          {'By '}
+          <span itemProp="author" itemScope itemType="https://schema.org/Person">
+            {authorLink ? <Link href={authorLink} isQuiet itemProp="url" rel="author" target="_blank"><span itemProp="name">{author}</span></Link> : <span itemProp="name">{author}</span>}
+          </span>
+          {' · '}
+        </>
+      )}
+      <time itemProp="datePublished" dateTime={date}>{formattedDate}</time>
+    </div>
+  );
+}
+
+export function Time({date}: {date: string}) {
+  return <time itemProp="datePublished" dateTime={date} className={style({font: 'detail'})}>{new Date(date).toLocaleDateString('en-US', {year: 'numeric', month: 'long', day: 'numeric'})}</time>;
+}
diff --git a/packages/dev/s2-docs/src/PropTable.tsx b/packages/dev/s2-docs/src/PropTable.tsx
index 2c9b0b69399..ba7315c11ee 100644
--- a/packages/dev/s2-docs/src/PropTable.tsx
+++ b/packages/dev/s2-docs/src/PropTable.tsx
@@ -29,7 +29,7 @@ const GROUPS = {
     /^on[A-Z]/
   ],
   Links: [
-    'href', 'hrefLang', 'target', 'rel', 'download', 'ping', 'referrerPolicy', 'routerOptions'
+    'href', 'hrefLang', 'target', 'rel', 'download', 'ping', 'referrerPolicy', 'itemProp', 'routerOptions'
   ],
   Styling: [
     'style', 'className'
diff --git a/packages/dev/s2-docs/src/ReleasesList.tsx b/packages/dev/s2-docs/src/ReleasesList.tsx
deleted file mode 100644
index e094694bf18..00000000000
--- a/packages/dev/s2-docs/src/ReleasesList.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-
-import {Link} from './Link';
-import type {Page} from '@parcel/rsc';
-import {renderHTMLfromMarkdown} from './types';
-import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
-
-export function ReleasesList({pages}: {pages: Page[]}) {
-  let releases = pages.sort((a, b) => {
-    return new Date(b.exports?.date).getTime() - new Date(a.exports?.date).getTime();
-  });
-  return (
-    <article className={style({marginY: 40, display: 'flex', flexDirection: 'column', gap: 40})}>
-      {releases.map(release => (
-        <div key={release.name}>
-          <header className={style({marginBottom: 12})}>
-            <h2 className={style({font: 'title-xl', margin: 0})}><Link href={release.url}>{release.exports?.title}</Link></h2>
-            <Time date={release.exports?.date} />
-          </header>
-          <p className={style({font: 'body', margin: 0})}>{renderHTMLfromMarkdown(release.exports?.description, {})}</p>
-        </div>
-      ))}
-      <p className={style({font: 'body', margin: 0})}>For all previous releases of React Spectrum v3, see the <Link href="https://react-spectrum.adobe.com/releases/index.html">Archived releases</Link> page.</p>
-    </article>
-  );
-}
-
-export function Time({date}: {date: string}) {
-  return <time dateTime={date} className={style({font: 'detail'})}>{new Date(date).toLocaleDateString('en-US', {year: 'numeric', month: 'long', day: 'numeric'})}</time>;
-}

From 707e8b4bd13f699c43f6d9ee679507a90d4ecb35 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Sun, 23 Nov 2025 14:33:01 -0800
Subject: [PATCH 05/11] Fix root page

---
 packages/dev/s2-docs/src/Layout.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx
index 350e7c06ef4..d869e9a89e0 100644
--- a/packages/dev/s2-docs/src/Layout.tsx
+++ b/packages/dev/s2-docs/src/Layout.tsx
@@ -361,7 +361,7 @@ function Article({page, parentPage, children, isLongForm, isWide}: ArticleProps)
       {page.exports?.version && <VersionBadge version={page.exports.version} />}
       {page.exports?.isSubpage
         ? <SubpageHeader currentPage={page} parentPage={parentPage} isLongForm={isLongForm} />
-        : <H1 itemProp="headline" isLongForm={isLongForm}>{page.tableOfContents?.[0].title}</H1>
+        : page.tableOfContents?.[0].level === 1 && <H1 itemProp="headline" isLongForm={isLongForm}>{page.tableOfContents?.[0].title}</H1>
       }
       <div
         className={style({display: 'contents'})}
@@ -378,7 +378,7 @@ function Article({page, parentPage, children, isLongForm, isWide}: ArticleProps)
 function PostListContainer({page, children, isLongForm, isWide}: ArticleProps) {
   return (
     <div className={articleStyles({isLongForm, isWide})}>
-      <H1 isLongForm={isLongForm}>{page.tableOfContents?.[0].title}</H1>
+      {page.tableOfContents?.[0].level === 1 && <H1 isLongForm={isLongForm}>{page.tableOfContents?.[0].title}</H1>}
       {children}
     </div>
   );

From e591cec14c40ac19c63f51e4d5046ba1de6da88a Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Sun, 23 Nov 2025 15:06:24 -0800
Subject: [PATCH 06/11] revert changes to link props

---
 packages/@react-aria/utils/src/filterDOMProps.ts |  3 +--
 packages/@react-aria/utils/src/openLink.tsx      |  3 +--
 packages/@react-types/shared/src/dom.d.ts        |  2 --
 packages/dev/s2-docs/src/PostList.tsx            | 10 ++++++++--
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/@react-aria/utils/src/filterDOMProps.ts b/packages/@react-aria/utils/src/filterDOMProps.ts
index 72b435e267f..0a3ebd5a903 100644
--- a/packages/@react-aria/utils/src/filterDOMProps.ts
+++ b/packages/@react-aria/utils/src/filterDOMProps.ts
@@ -31,8 +31,7 @@ const linkPropNames = new Set([
   'rel',
   'download',
   'ping',
-  'referrerPolicy',
-  'itemProp'
+  'referrerPolicy'
 ]);
 
 const globalAttrs = new Set([
diff --git a/packages/@react-aria/utils/src/openLink.tsx b/packages/@react-aria/utils/src/openLink.tsx
index 4246a7bf5b1..e3c4823f998 100644
--- a/packages/@react-aria/utils/src/openLink.tsx
+++ b/packages/@react-aria/utils/src/openLink.tsx
@@ -180,8 +180,7 @@ export function useLinkProps(props?: LinkDOMProps): LinkDOMProps {
     rel: props?.rel,
     download: props?.download,
     ping: props?.ping,
-    referrerPolicy: props?.referrerPolicy,
-    itemProp: props?.itemProp
+    referrerPolicy: props?.referrerPolicy
   };
 }
 
diff --git a/packages/@react-types/shared/src/dom.d.ts b/packages/@react-types/shared/src/dom.d.ts
index c4aa89aa8fd..5c36c80cd7e 100644
--- a/packages/@react-types/shared/src/dom.d.ts
+++ b/packages/@react-types/shared/src/dom.d.ts
@@ -218,8 +218,6 @@ export interface LinkDOMProps {
   ping?: string,
   /** How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). */
   referrerPolicy?: HTMLAttributeReferrerPolicy,
-  /** Associates the link URL with a microdata object. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/itemprop). */
-  itemProp?: string,
   /** Options for the configured client side router. */
   routerOptions?: RouterOptions
 }
diff --git a/packages/dev/s2-docs/src/PostList.tsx b/packages/dev/s2-docs/src/PostList.tsx
index e34e9c4a29c..50729915a97 100644
--- a/packages/dev/s2-docs/src/PostList.tsx
+++ b/packages/dev/s2-docs/src/PostList.tsx
@@ -22,11 +22,12 @@ export function PostList({pages}: {pages: Page[]}) {
         <article key={post.name} itemProp="blogPost" itemScope itemType="https://schema.org/BlogPosting">
           <header className={style({marginBottom: 12})}>
             <h2 itemProp="headline" className={style({font: 'title-xl', margin: 0})}>
-              <Link itemProp="url" href={post.url}>{post.tableOfContents?.[0]?.title || post.exports?.title}</Link>
+              <Link href={post.url}>{post.tableOfContents?.[0]?.title || post.exports?.title}</Link>
             </h2>
             {post.exports?.author && <Byline author={post.exports?.author} authorLink={post.exports?.authorLink} date={post.exports?.date} />}
             {post.exports?.date && !post.exports.author && <Time date={post.exports.date} />}
           </header>
+          <meta itemProp="url" content={post.url} />
           <p itemProp="description" className={style({font: 'body', margin: 0})}>{renderHTMLfromMarkdown(post.exports?.description, {forceInline: true, forceBlock: false})}</p>
         </article>
       ))}
@@ -43,7 +44,12 @@ export function Byline({author, authorLink, date}: {author?: string, authorLink?
         <>
           {'By '}
           <span itemProp="author" itemScope itemType="https://schema.org/Person">
-            {authorLink ? <Link href={authorLink} isQuiet itemProp="url" rel="author" target="_blank"><span itemProp="name">{author}</span></Link> : <span itemProp="name">{author}</span>}
+            {authorLink ? (<>
+              <meta itemProp="url" content={authorLink} />
+              <Link href={authorLink} isQuiet rel="author" target="_blank">
+                <span itemProp="name">{author}</span>
+              </Link>
+            </>) : <span itemProp="name">{author}</span>}
           </span>
           {' · '}
         </>

From 58aeeb627de1b5fbf6e8de90f9676d0e95168213 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Sun, 23 Nov 2025 15:12:00 -0800
Subject: [PATCH 07/11] fix

---
 packages/dev/s2-docs/src/ExampleList.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/dev/s2-docs/src/ExampleList.tsx b/packages/dev/s2-docs/src/ExampleList.tsx
index f1abe4c3c1d..0a4f99e02fd 100644
--- a/packages/dev/s2-docs/src/ExampleList.tsx
+++ b/packages/dev/s2-docs/src/ExampleList.tsx
@@ -61,7 +61,8 @@ export function ExampleList({tag, pages}) {
             itemProp="item"
             itemScope
             itemType="https://schema.org/TechArticle">
-            <Card href={example.url} itemProp="url">
+            <meta itemProp="url" content={example.url} />
+            <Card href={example.url}>
               <CardPreview>
                 <ExampleImage name={example.name} />
               </CardPreview>

From 25565ae7aa35105c443f5cfc8fb81af663985e69 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Sun, 23 Nov 2025 20:33:11 -0800
Subject: [PATCH 08/11] Update skeleton

---
 packages/dev/s2-docs/src/Layout.tsx           |  2 +-
 .../dev/s2-docs/src/NavigationSuspense.tsx    | 13 +++--
 packages/dev/s2-docs/src/PageSkeleton.tsx     | 53 +++++++++++++------
 3 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx
index d869e9a89e0..472933dd0a5 100644
--- a/packages/dev/s2-docs/src/Layout.tsx
+++ b/packages/dev/s2-docs/src/Layout.tsx
@@ -295,7 +295,7 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
                   width: 'full'
                 })}>
                 <CodePlatterProvider library={getLibraryFromUrl(currentPage.url)}>
-                  <NavigationSuspense pages={pages}>
+                  <NavigationSuspense pages={pages} isLongForm={isLongForm} isWide={isWide}>
                     <Content page={currentPage} parentPage={parentPage} isLongForm={isLongForm} isWide={isWide}>
                       {React.cloneElement(children, {
                         components: components(isLongForm),
diff --git a/packages/dev/s2-docs/src/NavigationSuspense.tsx b/packages/dev/s2-docs/src/NavigationSuspense.tsx
index f06d0c2d979..02aeb6869e2 100644
--- a/packages/dev/s2-docs/src/NavigationSuspense.tsx
+++ b/packages/dev/s2-docs/src/NavigationSuspense.tsx
@@ -90,7 +90,7 @@ export function getPageFromPathname(pages: Page[], pathname: string | null): Pag
   return targetPage ?? null;
 }
 
-function getPageInfo(pages: Page[], pathname: string | null): {title?: string, section?: string, hasToC?: boolean} {
+function getPageInfo(pages: Page[], pathname: string | null) {
   const targetPage = getPageFromPathname(pages, pathname);
   
   if (!targetPage) {
@@ -100,8 +100,11 @@ function getPageInfo(pages: Page[], pathname: string | null): {title?: string, s
   const title = getPageTitle(targetPage);
   const section = (targetPage.exports?.section as string) || 'Components';
   const hasToC = !targetPage.exports?.hideNav && targetPage.tableOfContents?.[0]?.children && targetPage.tableOfContents?.[0]?.children?.length > 0;
-  
-  return {title, section, hasToC};
+  let isSubpage = targetPage.exports?.isSubpage;
+  let isLongForm = isSubpage && section === 'Blog';
+  let isWide = !hasToC && !isLongForm && section !== 'Blog' && section !== 'Releases';
+
+  return {title, section, hasToC, isLongForm, isWide};
 }
 
 function NavigationContent({children}: {children: React.ReactNode}) {
@@ -130,9 +133,9 @@ export function NavigationSuspense({children, pages}: {children: React.ReactNode
   // Subscribe to get the latest targetPathname for skeleton page info
   const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
   const pageInfo = getPageInfo(pages, snapshot.pathname);
-  
+
   return (
-    <Suspense fallback={<PageSkeleton title={pageInfo.title} section={pageInfo.section} hasToC={pageInfo.hasToC} />}>
+    <Suspense fallback={<PageSkeleton title={pageInfo.title} section={pageInfo.section} hasToC={pageInfo.hasToC} isLongForm={pageInfo.isLongForm} isWide={pageInfo.isWide} />}>
       <NavigationContent>{children}</NavigationContent>
     </Suspense>
   );
diff --git a/packages/dev/s2-docs/src/PageSkeleton.tsx b/packages/dev/s2-docs/src/PageSkeleton.tsx
index ba149d626a1..ea7db651320 100644
--- a/packages/dev/s2-docs/src/PageSkeleton.tsx
+++ b/packages/dev/s2-docs/src/PageSkeleton.tsx
@@ -8,30 +8,42 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 const h1 = style({
   font: 'heading-3xl',
   fontSize: {
-    // On mobile, adjust heading to fit in the viewport, and clamp between a min and max font size.
-    default: 'clamp(35px, (100vw - 32px) / var(--width-per-em), 55px)',
-    lg: 'heading-3xl'
+    default: {
+      // On mobile, adjust heading to fit in the viewport, and clamp between a min and max font size.
+      default: 'clamp(35px, (100vw - 32px) / var(--width-per-em), 55px)',
+      isLongForm: 'heading-xl'
+    },
+    lg: {
+      default: 'heading-3xl',
+      isLongForm: 'heading-2xl'
+    }
   },
-  marginY: 0
+  textWrap: 'balance',
+  marginY: 0,
+  maxWidth: '--text-width',
+  marginX: 'auto'
 });
 
 const skeletonPageDescription = style({
   font: {default: 'body-lg', lg: 'body-xl'},
   marginY: 24,
-  width: '100%'
+  maxWidth: '--text-width',
+  marginX: 'auto'
 });
 
 const skeletonParagraph = style({
   font: {default: 'body', lg: 'body-lg'},
-  marginY: 24,
-  width: '100%'
+  marginY: '[1lh]',
+  maxWidth: '--text-width',
+  marginX: 'auto'
 });
 
 const skeletonH2 = style({
   font: 'heading-xl',
   marginTop: 48,
-  marginBottom: 16,
-  width: '40%'
+  marginBottom: 24,
+  maxWidth: '--text-width',
+  marginX: 'auto'
 });
 
 function SkeletonVisualExample() {
@@ -61,26 +73,35 @@ function SkeletonVisualExample() {
 
 const skeletonArticle = style({
   maxWidth: {
-    default: 'none',
-    isWithToC: 768
+    default: 768,
+    isWide: 'none',
+    isLongForm: 900
   },
+  marginX: 'auto',
   width: 'full',
-  height: 'fit'
+  height: 'fit',
+  '--text-width': {
+    type: 'width',
+    value: {
+      default: 'auto',
+      isLongForm: 600 // ~80 characters at body font size
+    }
+  }
 });
 
-export function PageSkeleton({title, section, hasToC}: {title?: string, section?: string, hasToC?: boolean}) {
+export function PageSkeleton({title, section, hasToC, isLongForm, isWide}: {title?: string, section?: string, hasToC?: boolean, isLongForm?: boolean, isWide?: boolean}) {
   const isComponents = section === 'Components';
   
   return (
-    <article className={skeletonArticle({isWithToC: hasToC})}>
+    <article className={skeletonArticle({isWithToC: hasToC, isLongForm, isWide})}>
       {title && (
-        <h1 id="top" style={{'--width-per-em': getTextWidth(title)} as any} className={h1}>
+        <h1 id="top" style={{'--width-per-em': getTextWidth(title)} as any} className={h1({isLongForm})}>
           {title}
         </h1>
       )}
       <Skeleton isLoading>
         {!title && (
-          <h1 className={style({font: 'heading-3xl', fontSize: {default: 'clamp(35px, (100vw - 32px) / var(--width-per-em), 55px)', lg: 'heading-3xl'}, marginY: 0, width: '60%'})}>
+          <h1 style={{'--width-per-em': getTextWidth('Page Title')} as any} className={h1({isLongForm})}>
             <Text>Page Title</Text>
           </h1>
         )}

From 85dc56e7e538e4241921c98599490ed274fd5fca Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Sun, 23 Nov 2025 20:34:34 -0800
Subject: [PATCH 09/11] Add RSS feeds

---
 Makefile                                      |   1 +
 package.json                                  |   1 +
 .../s2-docs/pages/react-aria/blog/index.mdx   |   2 +-
 .../pages/react-aria/releases/index.mdx       |   2 +-
 .../dev/s2-docs/pages/s2/releases/index.mdx   |   2 +-
 packages/dev/s2-docs/src/PostList.tsx         |  74 ++++++---
 scripts/createFeedS2.mjs                      | 102 ++++++++++++
 yarn.lock                                     | 153 ++++++++++++++++++
 8 files changed, 311 insertions(+), 26 deletions(-)
 create mode 100644 scripts/createFeedS2.mjs

diff --git a/Makefile b/Makefile
index e72170a0147..13a40650a08 100644
--- a/Makefile
+++ b/Makefile
@@ -161,3 +161,4 @@ build-s2-docs:
 	mkdir -p $(DIST_DIR)/registry
 	mv starters/docs/registry $(DIST_DIR)/registry/vanilla
 	mv starters/tailwind/registry $(DIST_DIR)/registry/tailwind
+	node scripts/createFeedS2.mjs
diff --git a/package.json b/package.json
index f77ecdaec3e..d3420e1df55 100644
--- a/package.json
+++ b/package.json
@@ -185,6 +185,7 @@
     "recast": "^0.23",
     "recursive-readdir": "^2.2.2",
     "regenerator-runtime": "0.13.3",
+    "rehype-stringify": "^9.0.4",
     "rimraf": "^6.0.1",
     "sharp": "^0.33.5",
     "storybook": "^8.6.14",
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/index.mdx b/packages/dev/s2-docs/pages/react-aria/blog/index.mdx
index be6ea49872e..dd6e3fcb049 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/index.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/index.mdx
@@ -21,5 +21,5 @@ export const isPostList = true;
 
 # Blog
 
-<PostList pages={props.pages.filter(page => page.name.startsWith('react-aria/blog/') && !page.name.endsWith('index.html')) ?? []} />
+<PostList currentPage={props.currentPage} pages={props.pages.filter(page => page.name.startsWith('react-aria/blog/') && !page.name.endsWith('index.html')) ?? []} />
 
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/index.mdx b/packages/dev/s2-docs/pages/react-aria/releases/index.mdx
index 713b6e0239e..f10e1b48439 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/index.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/index.mdx
@@ -20,6 +20,6 @@ export const isPostList = true;
 
 # Releases
 
-<PostList pages={props.pages.filter(page => page.name.includes('react-aria') && page.name.includes('releases') && !page.name.includes('index.html')) ?? []} />
+<PostList currentPage={props.currentPage} pages={props.pages.filter(page => page.name.includes('react-aria') && page.name.includes('releases') && !page.name.includes('index.html')) ?? []} />
 
 For all previous releases, see the [Archived releases](https://react-spectrum.adobe.com/releases/index.html) page.
diff --git a/packages/dev/s2-docs/pages/s2/releases/index.mdx b/packages/dev/s2-docs/pages/s2/releases/index.mdx
index 9b2bf0fd4ae..873bffb49a0 100644
--- a/packages/dev/s2-docs/pages/s2/releases/index.mdx
+++ b/packages/dev/s2-docs/pages/s2/releases/index.mdx
@@ -20,6 +20,6 @@ export const isPostList = true;
 
 # Releases
 
-<PostList pages={props.pages.filter(page => page.name.includes('s2') && page.name.includes('releases') && !page.name.includes('index.html')) ?? []} />
+<PostList currentPage={props.currentPage} pages={props.pages.filter(page => page.name.includes('s2') && page.name.includes('releases') && !page.name.includes('index.html')) ?? []} />
 
 For all previous releases of React Spectrum v3, see the [Archived releases](https://react-spectrum.adobe.com/releases/index.html) page.
diff --git a/packages/dev/s2-docs/src/PostList.tsx b/packages/dev/s2-docs/src/PostList.tsx
index 50729915a97..b27c2107916 100644
--- a/packages/dev/s2-docs/src/PostList.tsx
+++ b/packages/dev/s2-docs/src/PostList.tsx
@@ -1,37 +1,55 @@
+import {getLibraryFromPage, getLibraryLabel} from './library';
 import {Link} from './Link';
 import type {Page} from '@parcel/rsc';
 import {renderHTMLfromMarkdown} from './types';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
-export function PostList({pages}: {pages: Page[]}) {
+export function PostList({currentPage, pages}: {currentPage: Page, pages: Page[]}) {
   let posts = pages.sort((a, b) => {
     return new Date(b.exports?.date).getTime() - new Date(a.exports?.date).getTime();
   });
+  let feedUrl = currentPage.url.replace(/\/(index.html)?$/, '.xml');
 
   return (
-    <div
-      itemScope
-      itemType="https://schema.org/Blog"
-      className={style({marginY: 40, display: 'flex', flexDirection: 'column', gap: 40})}>
-      <div itemProp="publisher" itemScope itemType="https://schema.org/Organization" hidden>
-        <meta itemProp="name" content="Adobe" />
-        <meta itemProp="url" content="https://www.adobe.com" />
-        <meta itemProp="logo" content="https://www.adobe.com/favicon.ico" />
+    <>
+      {/* React hoists this into the <head> */}
+      <link
+        rel="alternate"
+        type="application/atom+xml"
+        title={`${getLibraryLabel(getLibraryFromPage(currentPage))} ${currentPage.tableOfContents?.[0].title}`}
+        href={feedUrl} />
+      <div className={style({marginTop: 8})}>
+        <Link isStandalone isQuiet href={feedUrl} target="_blank">
+          <span className={style({display: 'inline-flex', alignItems: 'center', columnGap: 4})}>
+            <RSSIcon />
+            Subscribe
+          </span>
+        </Link>
       </div>
-      {posts.map(post => (
-        <article key={post.name} itemProp="blogPost" itemScope itemType="https://schema.org/BlogPosting">
-          <header className={style({marginBottom: 12})}>
-            <h2 itemProp="headline" className={style({font: 'title-xl', margin: 0})}>
-              <Link href={post.url}>{post.tableOfContents?.[0]?.title || post.exports?.title}</Link>
-            </h2>
-            {post.exports?.author && <Byline author={post.exports?.author} authorLink={post.exports?.authorLink} date={post.exports?.date} />}
-            {post.exports?.date && !post.exports.author && <Time date={post.exports.date} />}
-          </header>
-          <meta itemProp="url" content={post.url} />
-          <p itemProp="description" className={style({font: 'body', margin: 0})}>{renderHTMLfromMarkdown(post.exports?.description, {forceInline: true, forceBlock: false})}</p>
-        </article>
-      ))}
-    </div>
+      <div
+        itemScope
+        itemType="https://schema.org/Blog"
+        className={style({marginY: 48, display: 'flex', flexDirection: 'column', gap: 40})}>
+        <div itemProp="publisher" itemScope itemType="https://schema.org/Organization" hidden>
+          <meta itemProp="name" content="Adobe" />
+          <meta itemProp="url" content="https://www.adobe.com" />
+          <meta itemProp="logo" content="https://www.adobe.com/favicon.ico" />
+        </div>
+        {posts.map(post => (
+          <article key={post.name} itemProp="blogPost" itemScope itemType="https://schema.org/BlogPosting">
+            <header className={style({marginBottom: 12})}>
+              <h2 itemProp="headline" className={style({font: 'title-xl', margin: 0})}>
+                <Link href={post.url}>{post.tableOfContents?.[0]?.title || post.exports?.title}</Link>
+              </h2>
+              {post.exports?.author && <Byline author={post.exports?.author} authorLink={post.exports?.authorLink} date={post.exports?.date} />}
+              {post.exports?.date && !post.exports.author && <Time date={post.exports.date} />}
+            </header>
+            <meta itemProp="url" content={post.url} />
+            <p itemProp="description" className={style({font: 'body', margin: 0})}>{renderHTMLfromMarkdown(post.exports?.description, {forceInline: true, forceBlock: false})}</p>
+          </article>
+        ))}
+      </div>
+    </>
   );
 }
 
@@ -62,3 +80,13 @@ export function Byline({author, authorLink, date}: {author?: string, authorLink?
 export function Time({date}: {date: string}) {
   return <time itemProp="datePublished" dateTime={date} className={style({font: 'detail'})}>{new Date(date).toLocaleDateString('en-US', {year: 'numeric', month: 'long', day: 'numeric'})}</time>;
 }
+
+function RSSIcon() {
+  return (
+    <svg viewBox="0 0 36 36" style={{width: 16, verticalAlign: 'middle'}} focusable="false" aria-hidden="true" role="img" fill="currentColor">
+      <circle fillRule="evenodd" cx="7.993" cy="28.007" r="4" />
+      <path fillRule="evenodd" d="M21.983,32.007h-4a.5.5,0,0,1-.5-.489,13.519,13.519,0,0,0-13-13,.5.5,0,0,1-.488-.5l0-4a.5.5,0,0,1,.511-.5A18.525,18.525,0,0,1,22.486,31.5.5.5,0,0,1,21.983,32.007Z" />
+      <path fillRule="evenodd" d="M31.985,32.007h-4a.5.5,0,0,1-.5-.493,23.7,23.7,0,0,0-23-23.19.5.5,0,0,1-.493-.5V4.015a.5.5,0,0,1,.51-.5A28.535,28.535,0,0,1,32.489,31.5.5.5,0,0,1,31.985,32.007Z" />
+    </svg>
+  );
+}
diff --git a/scripts/createFeedS2.mjs b/scripts/createFeedS2.mjs
new file mode 100644
index 00000000000..922155e3acf
--- /dev/null
+++ b/scripts/createFeedS2.mjs
@@ -0,0 +1,102 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {basename} from 'path';
+import fs from 'fs';
+import {globSync} from 'glob';
+import rehypeStringify from 'rehype-stringify';
+import remarkMdx from 'remark-mdx';
+import remarkParse from 'remark-parse';
+import remarkRehype from 'remark-rehype';
+import {unified} from 'unified';
+import {visit} from 'unist-util-visit';
+import xml from 'xml';
+
+const publicUrl = process.env.PUBLIC_URL || 'http://localhost:1234';
+
+createFeed('react-aria/blog', 'React Aria Blog');
+createFeed('react-aria/releases', 'React Aria Releases');
+createFeed('s2/releases', 'React Spectrum Releases');
+
+function createFeed(type, title) {
+  let files = globSync(`packages/dev/s2-docs/pages/${type}/*.mdx`, {ignore: [`packages/dev/s2-docs/pages/${type}/index.mdx`]});
+  let posts = [];
+
+  for (let file of files) {
+    let contents = fs.readFileSync(file, 'utf8');
+    let tree = unified().use(remarkParse).use(remarkMdx).parse(contents);
+
+    let exports = {};
+    visit(tree, 'mdxjsEsm', node => {
+      for (let stmt of node.data.estree.body) {
+        if (stmt.type === 'ExportNamedDeclaration') {
+          for (let decl of stmt.declaration.declarations) {
+            if (decl.init.type === 'Literal') {
+              exports[decl.id.name] = decl.init.value;
+            }
+          }
+        }
+      }
+    });
+
+    let title;
+    visit(tree, 'heading', node => {
+      if (node.depth === 1) {
+        title = node.children[0].value;
+      }
+    });
+
+    let summary = unified()
+      .use(remarkParse)
+      .use(remarkMdx)
+      .use(remarkRehype)
+      .use(rehypeStringify)
+      .processSync({value: exports.description})
+      .value;
+
+    let entry = [
+      {title},
+      {link: [{_attr: {rel: 'alternate', type: 'text/html', href: `${publicUrl}/${type}/${basename(file, '.mdx')}.html`}}]},
+      {id: basename(file, '.mdx')},
+      {updated: new Date(exports.date).toISOString()},
+      {published: new Date(exports.date).toISOString()},
+      {summary: [{_attr: {type: 'text/html'}}, summary]},
+    ];
+
+    if (exports.author) {
+      entry.push({
+        author: [
+          {name: exports.author},
+          {uri: exports.authorLink}
+        ]
+      });
+    }
+
+    posts.push({
+      entry
+    });
+  }
+
+  posts = posts.sort((a, b) => a.entry[3].updated < b.entry[3].updated ? 1 : -1);
+  let feed = xml({
+    feed: [
+      {_attr: {xmlns: 'http://www.w3.org/2005/Atom'}},
+      {title},
+      {link: `${publicUrl}/${type}/`},
+      {updated: posts[0].entry[3].updated},
+      {id: `${publicUrl}/${type}.xml`},
+      ...posts
+    ]
+  });
+
+  fs.writeFileSync(`packages/dev/s2-docs/dist/${type}.xml`, feed);
+}
diff --git a/yarn.lock b/yarn.lock
index d2748c1e4b3..a0603f25eaa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10631,6 +10631,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/parse5@npm:^6.0.0":
+  version: 6.0.3
+  resolution: "@types/parse5@npm:6.0.3"
+  checksum: 10c0/a7c7ef6625974b74b93c1105953003a2291897e453369efcadc569b907de2784d61d4e6905de3ef959fa07f3278f41ed0c22ead0173776023fc43b6ed31042d0
+  languageName: node
+  linkType: hard
+
 "@types/react-dom@npm:19.1.6":
   version: 19.1.6
   resolution: "@types/react-dom@npm:19.1.6"
@@ -12957,6 +12964,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ccount@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "ccount@npm:2.0.1"
+  checksum: 10c0/3939b1664390174484322bc3f45b798462e6c07ee6384cb3d645e0aa2f318502d174845198c1561930e1d431087f74cf1fe291ae9a4722821a9f4ba67e574350
+  languageName: node
+  linkType: hard
+
 "chai@npm:^5.1.1":
   version: 5.2.0
   resolution: "chai@npm:5.2.0"
@@ -17697,6 +17711,49 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hast-util-from-parse5@npm:^7.0.0":
+  version: 7.1.2
+  resolution: "hast-util-from-parse5@npm:7.1.2"
+  dependencies:
+    "@types/hast": "npm:^2.0.0"
+    "@types/unist": "npm:^2.0.0"
+    hastscript: "npm:^7.0.0"
+    property-information: "npm:^6.0.0"
+    vfile: "npm:^5.0.0"
+    vfile-location: "npm:^4.0.0"
+    web-namespaces: "npm:^2.0.0"
+  checksum: 10c0/c1002816d0235ff0a1e888d71c191d3ecfbaba510aaef86eec00edcba8803a3e0ad901bb0e5430a9d2aee2d52c31aabacae8282394dc519c333017a46c68d1c8
+  languageName: node
+  linkType: hard
+
+"hast-util-parse-selector@npm:^3.0.0":
+  version: 3.1.1
+  resolution: "hast-util-parse-selector@npm:3.1.1"
+  dependencies:
+    "@types/hast": "npm:^2.0.0"
+  checksum: 10c0/34ac1707a477fd9764e328087163f1f21857bdb0f8d425bf41f6def7baf840e50e4bca2eb03072e3da4e39856de28893c4b688dcba0cc305160d53afcece4df4
+  languageName: node
+  linkType: hard
+
+"hast-util-raw@npm:^7.0.0":
+  version: 7.2.3
+  resolution: "hast-util-raw@npm:7.2.3"
+  dependencies:
+    "@types/hast": "npm:^2.0.0"
+    "@types/parse5": "npm:^6.0.0"
+    hast-util-from-parse5: "npm:^7.0.0"
+    hast-util-to-parse5: "npm:^7.0.0"
+    html-void-elements: "npm:^2.0.0"
+    parse5: "npm:^6.0.0"
+    unist-util-position: "npm:^4.0.0"
+    unist-util-visit: "npm:^4.0.0"
+    vfile: "npm:^5.0.0"
+    web-namespaces: "npm:^2.0.0"
+    zwitch: "npm:^2.0.0"
+  checksum: 10c0/c7bf994938cbc1acaaeb337f99773773b51ad77695b559c6352cba5c35b26610e6de2936b5086ef8bc53b436dd8032a3860e7357f28b6bb0365f751919745398
+  languageName: node
+  linkType: hard
+
 "hast-util-to-estree@npm:^2.0.0":
   version: 2.0.2
   resolution: "hast-util-to-estree@npm:2.0.2"
@@ -17719,6 +17776,39 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hast-util-to-html@npm:^8.0.0":
+  version: 8.0.4
+  resolution: "hast-util-to-html@npm:8.0.4"
+  dependencies:
+    "@types/hast": "npm:^2.0.0"
+    "@types/unist": "npm:^2.0.0"
+    ccount: "npm:^2.0.0"
+    comma-separated-tokens: "npm:^2.0.0"
+    hast-util-raw: "npm:^7.0.0"
+    hast-util-whitespace: "npm:^2.0.0"
+    html-void-elements: "npm:^2.0.0"
+    property-information: "npm:^6.0.0"
+    space-separated-tokens: "npm:^2.0.0"
+    stringify-entities: "npm:^4.0.0"
+    zwitch: "npm:^2.0.4"
+  checksum: 10c0/a9dd87cdd710dcd151d144152ec6d2c6d20377b8258b31776e1387868fab8e3e0552d237c337d84dc94407b935a47e2e344b1cf8bd3ce16541c934004879c33f
+  languageName: node
+  linkType: hard
+
+"hast-util-to-parse5@npm:^7.0.0":
+  version: 7.1.0
+  resolution: "hast-util-to-parse5@npm:7.1.0"
+  dependencies:
+    "@types/hast": "npm:^2.0.0"
+    comma-separated-tokens: "npm:^2.0.0"
+    property-information: "npm:^6.0.0"
+    space-separated-tokens: "npm:^2.0.0"
+    web-namespaces: "npm:^2.0.0"
+    zwitch: "npm:^2.0.0"
+  checksum: 10c0/2a96302b8f25fa2d5b657a94bb20a3d9a1a81e66c2f81582a242c5634dd850e3bd95313a7471eef8282b597f2129551fef5a1631f4ce14c41aab646281b339a0
+  languageName: node
+  linkType: hard
+
 "hast-util-whitespace@npm:^2.0.0":
   version: 2.0.0
   resolution: "hast-util-whitespace@npm:2.0.0"
@@ -17726,6 +17816,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hastscript@npm:^7.0.0":
+  version: 7.2.0
+  resolution: "hastscript@npm:7.2.0"
+  dependencies:
+    "@types/hast": "npm:^2.0.0"
+    comma-separated-tokens: "npm:^2.0.0"
+    hast-util-parse-selector: "npm:^3.0.0"
+    property-information: "npm:^6.0.0"
+    space-separated-tokens: "npm:^2.0.0"
+  checksum: 10c0/579912b03ff4a5b19eb609df7403c6dba2505ef1a1e2bc47cbf467cbd7cffcd51df40e74d882de1ccdda40aaf18487f82619eb9cb9f2077cba778017e95e868e
+  languageName: node
+  linkType: hard
+
 "hermes-estree@npm:0.25.1":
   version: 0.25.1
   resolution: "hermes-estree@npm:0.25.1"
@@ -17802,6 +17905,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"html-void-elements@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "html-void-elements@npm:2.0.1"
+  checksum: 10c0/1079c9e9fdb3b6a2481f2a282098a0183f3d45bf2b9d76c7dfc1671ee1857d7bacdd04fd8c6e2418f5ff550c30cabf97a010fe31ec402d0c89189807b48e6d79
+  languageName: node
+  linkType: hard
+
 "htmlparser2@npm:^3.9.2":
   version: 3.10.1
   resolution: "htmlparser2@npm:3.10.1"
@@ -23531,6 +23641,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"parse5@npm:^6.0.0":
+  version: 6.0.1
+  resolution: "parse5@npm:6.0.1"
+  checksum: 10c0/595821edc094ecbcfb9ddcb46a3e1fe3a718540f8320eff08b8cf6742a5114cce2d46d45f95c26191c11b184dcaf4e2960abcd9c5ed9eb9393ac9a37efcfdecb
+  languageName: node
+  linkType: hard
+
 "parse5@npm:^7.0.0, parse5@npm:^7.1.1":
   version: 7.1.2
   resolution: "parse5@npm:7.1.2"
@@ -24704,6 +24821,7 @@ __metadata:
     recast: "npm:^0.23"
     recursive-readdir: "npm:^2.2.2"
     regenerator-runtime: "npm:0.13.3"
+    rehype-stringify: "npm:^9.0.4"
     rimraf: "npm:^6.0.1"
     sharp: "npm:^0.33.5"
     storybook: "npm:^8.6.14"
@@ -25169,6 +25287,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rehype-stringify@npm:^9.0.4":
+  version: 9.0.4
+  resolution: "rehype-stringify@npm:9.0.4"
+  dependencies:
+    "@types/hast": "npm:^2.0.0"
+    hast-util-to-html: "npm:^8.0.0"
+    unified: "npm:^10.0.0"
+  checksum: 10c0/8c8bc118c3e3242a6126456c35af5f902a168ec8daab7b97f6bfeafa5ced2c23fbe2807776908ecec8ed17a9ef67c6f6d473ff54c28c1d6a711624505a551078
+  languageName: node
+  linkType: hard
+
 "release-zalgo@npm:^1.0.0":
   version: 1.0.0
   resolution: "release-zalgo@npm:1.0.0"
@@ -28832,6 +28961,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vfile-location@npm:^4.0.0":
+  version: 4.1.0
+  resolution: "vfile-location@npm:4.1.0"
+  dependencies:
+    "@types/unist": "npm:^2.0.0"
+    vfile: "npm:^5.0.0"
+  checksum: 10c0/77097e819579214d3346aaa2b06e4d23e2413221ac4914679d312cf64973011b76f0e2424fa8f18987befcd6ed60f4f6c4c6ebd5d5326062173a95f6b4445a96
+  languageName: node
+  linkType: hard
+
 "vfile-message@npm:^3.0.0":
   version: 3.0.2
   resolution: "vfile-message@npm:3.0.2"
@@ -29018,6 +29157,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"web-namespaces@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "web-namespaces@npm:2.0.1"
+  checksum: 10c0/df245f466ad83bd5cd80bfffc1674c7f64b7b84d1de0e4d2c0934fb0782e0a599164e7197a4bce310ee3342fd61817b8047ff04f076a1ce12dd470584142a4bd
+  languageName: node
+  linkType: hard
+
 "webidl-conversions@npm:^3.0.0":
   version: 3.0.1
   resolution: "webidl-conversions@npm:3.0.1"
@@ -29623,3 +29769,10 @@ __metadata:
   checksum: 10c0/9424cade91458ceb4288cc9cbc76d9d055686de3cd5aa13bf447aed2d1ebd98ebb517c9d871e9f9bd92a44e0d63a0491d560adb0bd7e4d0de42c99320d9e04a4
   languageName: node
   linkType: hard
+
+"zwitch@npm:^2.0.4":
+  version: 2.0.4
+  resolution: "zwitch@npm:2.0.4"
+  checksum: 10c0/3c7830cdd3378667e058ffdb4cf2bb78ac5711214e2725900873accb23f3dfe5f9e7e5a06dcdc5f29605da976fc45c26d9a13ca334d6eea2245a15e77b8fc06e
+  languageName: node
+  linkType: hard

From 65c14fcbe067908de1e49ec279338bfc21a9dea5 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Sun, 23 Nov 2025 20:47:01 -0800
Subject: [PATCH 10/11] fix

---
 Makefile                            | 2 +-
 packages/dev/s2-docs/src/Layout.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Makefile b/Makefile
index 13a40650a08..ffd71f5e5a1 100644
--- a/Makefile
+++ b/Makefile
@@ -156,9 +156,9 @@ build-s2-docs:
 	yarn workspace @react-spectrum/s2-docs generate:og
 	REGISTRY_URL=$(PUBLIC_URL)/registry node scripts/buildRegistry.mjs
 	REGISTRY_URL=$(PUBLIC_URL)/registry yarn build:s2-docs --public-url $(PUBLIC_URL)
+	node scripts/createFeedS2.mjs
 	mkdir -p $(DIST_DIR)
 	mv packages/dev/s2-docs/dist/* $(DIST_DIR)
 	mkdir -p $(DIST_DIR)/registry
 	mv starters/docs/registry $(DIST_DIR)/registry/vanilla
 	mv starters/tailwind/registry $(DIST_DIR)/registry/tailwind
-	node scripts/createFeedS2.mjs
diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx
index 472933dd0a5..d869e9a89e0 100644
--- a/packages/dev/s2-docs/src/Layout.tsx
+++ b/packages/dev/s2-docs/src/Layout.tsx
@@ -295,7 +295,7 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
                   width: 'full'
                 })}>
                 <CodePlatterProvider library={getLibraryFromUrl(currentPage.url)}>
-                  <NavigationSuspense pages={pages} isLongForm={isLongForm} isWide={isWide}>
+                  <NavigationSuspense pages={pages}>
                     <Content page={currentPage} parentPage={parentPage} isLongForm={isLongForm} isWide={isWide}>
                       {React.cloneElement(children, {
                         components: components(isLongForm),

From 288197ac1fb172c06cc07b0e826b132047e52cfe Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 24 Nov 2025 10:00:14 -0800
Subject: [PATCH 11/11] Use serif font for body text

---
 packages/dev/s2-docs/src/Headings.tsx |  1 +
 packages/dev/s2-docs/src/Layout.tsx   | 10 +++++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/dev/s2-docs/src/Headings.tsx b/packages/dev/s2-docs/src/Headings.tsx
index 1a4a3eda22a..fbb54899562 100644
--- a/packages/dev/s2-docs/src/Headings.tsx
+++ b/packages/dev/s2-docs/src/Headings.tsx
@@ -31,6 +31,7 @@ function AnchorLink({anchorId, isHovered, level, headingText}) {
     <span
       {...focusProps}
       className={style({
+        position: 'absolute',
         opacity: {
           default: 0,
           isHovered: 1,
diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx
index d869e9a89e0..191251edb59 100644
--- a/packages/dev/s2-docs/src/Layout.tsx
+++ b/packages/dev/s2-docs/src/Layout.tsx
@@ -33,6 +33,10 @@ import {VisualExample} from './VisualExample';
 
 const p = style({
   font: 'body-lg',
+  fontFamily: {
+    default: 'sans',
+    isLongForm: 'serif'
+  },
   textWrap: 'pretty',
   marginY: '[1lh]',
   maxWidth: '--text-width',
@@ -41,6 +45,10 @@ const p = style({
 
 const li = style({
   font: 'body-lg',
+  fontFamily: {
+    default: 'sans',
+    isLongForm: 'serif'
+  },
   textWrap: 'pretty',
   marginY: {
     default: 0,
@@ -56,7 +64,7 @@ const components = (isLongForm?: boolean) => ({
   h2: H2,
   h3: H3,
   h4: H4,
-  p: ({children, ...props}) => <p {...props} className={p}>{children}</p>,
+  p: ({children, ...props}) => <p {...props} className={p({isLongForm})}>{children}</p>,
   ul: (props) => <ul {...props} />,
   li: ({children, ...props}) => <li {...props} className={li({isLongForm})}>{children}</li>,
   Figure: (props) => <figure {...props} className={style({display: 'flex', flexDirection: 'column', alignItems: 'center', marginY: 32, marginX: 0})} />,