From 540fd38b6b10bd741e41df48f2ff77e5b2e93d96 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Tue, 4 Nov 2025 13:04:29 -0800
Subject: [PATCH 1/5] docs: s2 non-component hook docs followup (#9136)

* condense sections

* move props after the example

* move api sections

* fix examples in dnd
---
 .../s2-docs/pages/react-aria/DropTarget.tsx   | 14 +++---
 .../s2-docs/pages/react-aria/FocusRing.mdx    | 10 ++---
 .../s2-docs/pages/react-aria/FocusScope.mdx   | 26 ++++++-----
 .../s2-docs/pages/react-aria/I18nProvider.mdx | 10 ++---
 .../pages/react-aria/PortalProvider.mdx       | 11 ++---
 .../s2-docs/pages/react-aria/SSRProvider.mdx  | 10 ++---
 .../pages/react-aria/VisuallyHidden.mdx       | 45 ++++++++-----------
 .../s2-docs/pages/react-aria/mergeProps.mdx   | 11 +++--
 .../s2-docs/pages/react-aria/useClipboard.mdx | 12 ++---
 .../s2-docs/pages/react-aria/useCollator.mdx  | 10 ++---
 .../pages/react-aria/useDateFormatter.mdx     | 10 ++---
 .../dev/s2-docs/pages/react-aria/useDrag.mdx  | 17 +++----
 .../dev/s2-docs/pages/react-aria/useDrop.mdx  | 23 +++++-----
 .../dev/s2-docs/pages/react-aria/useField.mdx | 12 ++---
 .../s2-docs/pages/react-aria/useFilter.mdx    | 18 ++++----
 .../dev/s2-docs/pages/react-aria/useFocus.mdx | 28 ++++++------
 .../s2-docs/pages/react-aria/useFocusRing.mdx | 29 ++++++------
 .../pages/react-aria/useFocusVisible.mdx      | 25 ++++++-----
 .../pages/react-aria/useFocusWithin.mdx       | 31 +++++++------
 .../dev/s2-docs/pages/react-aria/useHover.mdx | 41 ++++++++---------
 .../dev/s2-docs/pages/react-aria/useId.mdx    |  8 ++--
 .../dev/s2-docs/pages/react-aria/useIsSSR.mdx | 11 +++--
 .../s2-docs/pages/react-aria/useKeyboard.mdx  | 30 ++++++-------
 .../dev/s2-docs/pages/react-aria/useLabel.mdx |  8 ++--
 .../s2-docs/pages/react-aria/useLandmark.mdx  | 28 ++++++------
 .../s2-docs/pages/react-aria/useLocale.mdx    | 19 ++++----
 .../s2-docs/pages/react-aria/useLongPress.mdx | 43 +++++++++---------
 .../dev/s2-docs/pages/react-aria/useMove.mdx  | 39 +++++++---------
 .../pages/react-aria/useNumberFormatter.mdx   | 10 ++---
 .../s2-docs/pages/react-aria/useObjectRef.mdx |  8 ++--
 .../dev/s2-docs/pages/react-aria/usePress.mdx | 42 +++++++++--------
 31 files changed, 314 insertions(+), 325 deletions(-)

diff --git a/packages/dev/s2-docs/pages/react-aria/DropTarget.tsx b/packages/dev/s2-docs/pages/react-aria/DropTarget.tsx
index 2f4cb2e69ea..826392568d0 100644
--- a/packages/dev/s2-docs/pages/react-aria/DropTarget.tsx
+++ b/packages/dev/s2-docs/pages/react-aria/DropTarget.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, {JSX} from 'react';
+import React, {JSX, ReactNode} from 'react';
 import type {TextDropItem} from '@react-aria/dnd';
 import {useDrop} from '@react-aria/dnd';
 
@@ -18,7 +18,7 @@ export function DropTarget() {
       let items = await Promise.all(
         (e.items as TextDropItem[])
           .filter(item => item.kind === 'text' && (item.types.has('text/plain') || item.types.has('my-app-custom-type')))
-          .map(async item => {
+          .map(async (item: TextDropItem) => {
             if (item.types.has('my-app-custom-type')) {
               return JSON.parse(await item.getText('my-app-custom-type'));
             } else {
@@ -30,16 +30,16 @@ export function DropTarget() {
     }
   });
 
-  let message: JSX.Element[] = [<div>{`Drop here`}</div>];
+  let message: ReactNode = <div key="drop here">'Drop here'</div>;
   if (dropped) {
     message = dropped.map((d, index) => {
-      let m = d.message;
+      let m: ReactNode = d.message;
       if (d.style === 'bold') {
-        message = [<strong>{m}</strong>];
+        m = <strong key={index}>{m}</strong>;
       } else if (d.style === 'italic') {
-        message = [<em>{m}</em>];
+        m = <em key={index}>{m}</em>;
       }
-      return <div key={index}>{message}</div>;
+      return <div key={index}>{m}</div>;
     });
   }
 
diff --git a/packages/dev/s2-docs/pages/react-aria/FocusRing.mdx b/packages/dev/s2-docs/pages/react-aria/FocusRing.mdx
index 52d8a4aac79..2cc6456bcf8 100644
--- a/packages/dev/s2-docs/pages/react-aria/FocusRing.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/FocusRing.mdx
@@ -13,7 +13,7 @@ import {GroupedPropTable} from '../../src/PropTable';
 import {FunctionAPI} from '../../src/FunctionAPI';
 import docs from 'docs:@react-aria/focus';
 
-export const section = 'Focus';
+export const section = 'Interactions';
 
 # FocusRing
 
@@ -29,10 +29,6 @@ switching in from a different tab, we show the focus ring.
 
 If CSS classes are not being used for styling, see [useFocusRing](useFocusRing.html) for a hooks version.
 
-## Props
-
-<PropTable links={docs.links} component={docs.exports.FocusRing} />
-
 ## Example
 
 This example shows how to use `<FocusRing>` to apply a CSS class when keyboard focus is on a button.
@@ -46,3 +42,7 @@ import './FocusRingExample.css';
   <button className="button">Test</button>
 </FocusRing>
 ```
+
+## API
+
+<PropTable links={docs.links} component={docs.exports.FocusRing} />
\ No newline at end of file
diff --git a/packages/dev/s2-docs/pages/react-aria/FocusScope.mdx b/packages/dev/s2-docs/pages/react-aria/FocusScope.mdx
index bf41919a10d..dd7a7e6b82a 100644
--- a/packages/dev/s2-docs/pages/react-aria/FocusScope.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/FocusScope.mdx
@@ -13,7 +13,7 @@ import {GroupedPropTable} from '../../src/PropTable';
 import {FunctionAPI} from '../../src/FunctionAPI';
 import docs from 'docs:@react-aria/focus';
 
-export const section = 'Focus';
+export const section = 'Interactions';
 
 # FocusScope
 
@@ -34,17 +34,6 @@ in combination with a FocusScope to programmatically move focus within the scope
 arrow key navigation could be implemented by handling keyboard events and using a focus manager
 to move focus to the next and previous elements.
 
-## Props
-
-<PropTable links={docs.links} component={docs.exports.FocusScope} />
-
-## FocusManager Interface
-
-To get a focus manager, call the <TypeLink links={docs.links} type={docs.exports.useFocusManager} /> hook
-from a component within the FocusScope. A focus manager supports the following methods:
-
-<ClassAPI links={docs.links} class={docs.exports.FocusManager} />
-
 ## Example
 
 A basic example of a focus scope that contains focus within it is below. Clicking the "Open"
@@ -128,3 +117,16 @@ function ToolbarButton(props) {
   <ToolbarButton>Paste</ToolbarButton>
 </Toolbar>
 ```
+
+## API
+
+### Props
+
+<PropTable links={docs.links} component={docs.exports.FocusScope} />
+
+### FocusManager Interface
+
+To get a focus manager, call the <TypeLink links={docs.links} type={docs.exports.useFocusManager} /> hook
+from a component within the FocusScope. A focus manager supports the following methods:
+
+<ClassAPI links={docs.links} class={docs.exports.FocusManager} />
\ No newline at end of file
diff --git a/packages/dev/s2-docs/pages/react-aria/I18nProvider.mdx b/packages/dev/s2-docs/pages/react-aria/I18nProvider.mdx
index 9bdc658f95d..15fb260507d 100644
--- a/packages/dev/s2-docs/pages/react-aria/I18nProvider.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/I18nProvider.mdx
@@ -12,7 +12,7 @@ export default Layout;
 import {FunctionAPI} from '../../src/FunctionAPI';
 import docs from 'docs:@react-aria/i18n';
 
-export const section = 'Internationalization';
+export const section = 'Utilities';
 export const description = 'Implementing collections in React Aria';
 
 
@@ -25,10 +25,6 @@ with a locale defined by your application (e.g. application setting). This shoul
 your entire application in the provider, which will be cause all child elements to receive the new locale
 information via [useLocale](useLocale.html).
 
-## Props
-
-<PropTable component={docs.exports.I18nProvider} links={docs.links} />
-
 ## Example
 
 ```tsx
@@ -38,3 +34,7 @@ import {I18nProvider} from '@react-aria/i18n';
   <YourApp />
 </I18nProvider>
 ```
+
+## Props
+
+<PropTable component={docs.exports.I18nProvider} links={docs.links} />
diff --git a/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx b/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx
index c161d7d7b79..55838cf9965 100644
--- a/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx
@@ -12,7 +12,7 @@ export default Layout;
 import docs from 'docs:@react-aria/overlays';
 import {FunctionAPI} from '../../src/FunctionAPI';
 
-export const section = 'Server Side Rendering';
+export const section = 'Utilities';
 
 # PortalProvider
 
@@ -32,10 +32,6 @@ outside of any possible overflow or stacking contexts. We envision `UNSAFE_Porta
 elements into a single container at the root of the app or to control the order of children of the `body` element, but you may have use cases
 that need to do otherwise.
 
-## Props
-
-<PropTable links={docs.links} component={docs.exports.UNSAFE_PortalProvider} />
-
 ## Example
 
 The example below shows how you can use `UNSAFE_PortalProvider` to portal your Toasts to an arbitrary container. Note that
@@ -169,3 +165,8 @@ function MyOverlay(props) {
   return ReactDOM.createPortal(children, getContainer());
 }
 ```
+
+## Props
+
+<PropTable links={docs.links} component={docs.exports.UNSAFE_PortalProvider} />
+
diff --git a/packages/dev/s2-docs/pages/react-aria/SSRProvider.mdx b/packages/dev/s2-docs/pages/react-aria/SSRProvider.mdx
index 37f23f1bbbe..262f22460b7 100644
--- a/packages/dev/s2-docs/pages/react-aria/SSRProvider.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/SSRProvider.mdx
@@ -11,7 +11,7 @@ import {Layout} from '../../src/Layout';
 export default Layout;
 import docs from 'docs:@react-aria/ssr';
 
-export const section = 'Server Side Rendering';
+export const section = 'Utilities';
 export const description = 'Implementing collections in React Aria';
 
 # SSRProvider
@@ -26,10 +26,6 @@ See the [server side rendering](ssr.html) docs for more information.
 **Note**: if you're using React 18 or newer, `SSRProvider` is not necessary and can be removed from your app. React Aria uses the
 [React.useId](https://react.dev/reference/react/useId) hook internally when using React 18, which ensures ids are consistent.
 
-## Props
-
-<PropTable component={docs.exports.SSRProvider} links={docs.links} />
-
 ## Example
 
 ```tsx
@@ -39,3 +35,7 @@ import {SSRProvider} from '@react-aria/ssr';
   <YourApp />
 </SSRProvider>
 ```
+
+## Props
+
+<PropTable component={docs.exports.SSRProvider} links={docs.links} />
diff --git a/packages/dev/s2-docs/pages/react-aria/VisuallyHidden.mdx b/packages/dev/s2-docs/pages/react-aria/VisuallyHidden.mdx
index 14fb52ee5fe..e99bf515747 100644
--- a/packages/dev/s2-docs/pages/react-aria/VisuallyHidden.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/VisuallyHidden.mdx
@@ -18,25 +18,20 @@ export const section = 'Utilities';
 
 <PageDescription>{docs.exports.VisuallyHidden.description}</PageDescription>
 
-## Introduction
-
-`VisuallyHidden` is a utility component that can be used to hide its children visually,
-while keeping them visible to screen readers and other assistive technology. This would
-typically be used when you want to take advantage of the behavior and semantics of a
-native element like a checkbox or radio button, but replace it with a custom styled
-element visually.
-
-## Props
-
-<PropTable links={docs.links} component={docs.exports.VisuallyHidden} />
+## Gotchas
 
-{/* not implemented yet */}
-{/* ## Example
+VisuallyHidden is positioned absolutely, so it needs a positioned ancestor. Otherwise, it will be positioned relative to the nearest positioned ancestor, which may be the body, causing undesired scroll bars to appear.
 
-See [useRadioGroup](useRadioGroup.html#styling) and [useCheckbox](useCheckbox.html#styling)
-for examples of using `VisuallyHidden` to hide native form elements visually. */}
+```tsx
+<label style={{position: 'relative'}}>
+  <VisuallyHidden>
+    <input type="checkbox" />
+  </VisuallyHidden>
+  <span>Subscribe to our newsletter</span>
+</label>
+```
 
-## Hook
+##  Hook
 
 In order to allow additional rendering flexibility, the `useVisuallyHidden` hook can be
 used in custom components instead of the `VisuallyHidden` component. It supports the same
@@ -44,6 +39,8 @@ options as the component, and returns props to spread onto the element that shou
 
 <FunctionAPI links={docs.links} function={docs.exports.useVisuallyHidden} />
 
+### Example
+
 ```tsx
 import {useVisuallyHidden} from '@react-aria/visually-hidden';
 
@@ -52,16 +49,12 @@ let {visuallyHiddenProps} = useVisuallyHidden();
 <div {...visuallyHiddenProps}>I am hidden</div>
 ```
 
-## Gotchas
+## API
 
-VisuallyHidden is positioned absolutely, so it needs a positioned ancestor. Otherwise, it will be positioned relative to the nearest positioned ancestor, which may be the body, causing undesired scroll bars to appear.
+<PropTable links={docs.links} component={docs.exports.VisuallyHidden} />
 
-```tsx
-<label style={{position: 'relative'}}>
-  <VisuallyHidden>
-    <input type="checkbox" />
-  </VisuallyHidden>
-  <span>Subscribe to our newsletter</span>
-</label>
-```
+{/* not implemented yet */}
+{/* ## Example
 
+See [useRadioGroup](useRadioGroup.html#styling) and [useCheckbox](useCheckbox.html#styling)
+for examples of using `VisuallyHidden` to hide native form elements visually. */}
diff --git a/packages/dev/s2-docs/pages/react-aria/mergeProps.mdx b/packages/dev/s2-docs/pages/react-aria/mergeProps.mdx
index fee98fa10a5..5bd8bf6b915 100644
--- a/packages/dev/s2-docs/pages/react-aria/mergeProps.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/mergeProps.mdx
@@ -18,16 +18,11 @@ export const section = 'Utilities';
 
 <PageDescription>{docs.exports.mergeProps.description}</PageDescription>
 
-## API
-
-<FunctionAPI function={docs.exports.mergeProps} links={docs.links} />
-
 ## Introduction
 
 `mergeProps` is a utility function that combines multiple props objects together in a smart way.
 This can be useful when you need to combine the results of multiple react-aria hooks onto a single
-element. For example, both hooks may return the same event handlers, class names, or ids, and only
-one of these can be applied. `mergeProps` handles combining these props together so that multiple
+element. `mergeProps` handles combining these props together so that multiple
 event handlers will be chained, multiple classes will be combined, and ids will be deduplicated.
 For all other props, the last prop object overrides all previous ones.
 
@@ -68,3 +63,7 @@ let merged = {
   }
 };
 ```
+
+## API
+
+<FunctionAPI function={docs.exports.mergeProps} links={docs.links} />
diff --git a/packages/dev/s2-docs/pages/react-aria/useClipboard.mdx b/packages/dev/s2-docs/pages/react-aria/useClipboard.mdx
index e044de4e0b1..bf6d6b744da 100644
--- a/packages/dev/s2-docs/pages/react-aria/useClipboard.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useClipboard.mdx
@@ -12,16 +12,12 @@ export default Layout;
 import {FunctionAPI} from '../../src/FunctionAPI';
 import docs from 'docs:@react-aria/dnd';
 import sharedDocs from 'docs:@react-types/shared/src/dnd.d.ts';
-export const section = 'Drag and Drop';
+export const section = 'Interactions';
 
 # useClipboard
 
 <PageDescription>{docs.exports.useClipboard.description}</PageDescription>
 
-## API
-
-<FunctionAPI function={docs.exports.useClipboard} links={docs.links} />
-
 ## Introduction
 
 Copy and paste is a common way to transfer data between locations, either within or between apps. Browsers support copy and paste of selected text content by default, but rich objects with custom data can also be copied and pasted using the [clipboard events](https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent) API. For example, an app could support copying and pasting a selected card representing a rich object to a new location, or allow a user to paste files from their device to upload them. This can provide a keyboard accessible alternative to drag and drop.
@@ -414,4 +410,8 @@ function Pasteable() {
   <Copyable />
   <Pasteable />
 </div>
-```
\ No newline at end of file
+```
+
+## API
+
+<FunctionAPI function={docs.exports.useClipboard} links={docs.links} />
\ No newline at end of file
diff --git a/packages/dev/s2-docs/pages/react-aria/useCollator.mdx b/packages/dev/s2-docs/pages/react-aria/useCollator.mdx
index 45d63d6cfd1..eae2aa7f72f 100644
--- a/packages/dev/s2-docs/pages/react-aria/useCollator.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useCollator.mdx
@@ -12,7 +12,7 @@ export default Layout;
 import {FunctionAPI} from '../../src/FunctionAPI';
 import docs from 'docs:@react-aria/i18n';
 
-export const section = 'Internationalization';
+export const section = 'Utilities';
 export const description = 'Implementing collections in React Aria';
 
 
@@ -26,10 +26,6 @@ updating when the locale changes, and caching of collators for performance. See
 [Intl.Collator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator) docs for
 information.
 
-## API
-
-<FunctionAPI function={docs.exports.useCollator} links={docs.links} />
-
 ## Example
 
 This example includes two textfields and compares the values of the two fields using a collator according to the current locale.
@@ -72,3 +68,7 @@ function Example() {
   );
 }
 ```
+
+## API
+
+<FunctionAPI function={docs.exports.useCollator} links={docs.links} />
\ No newline at end of file
diff --git a/packages/dev/s2-docs/pages/react-aria/useDateFormatter.mdx b/packages/dev/s2-docs/pages/react-aria/useDateFormatter.mdx
index 2f77d300aed..1fc88a16a6d 100644
--- a/packages/dev/s2-docs/pages/react-aria/useDateFormatter.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useDateFormatter.mdx
@@ -12,7 +12,7 @@ export default Layout;
 import {FunctionAPI} from '../../src/FunctionAPI';
 import docs from 'docs:@react-aria/i18n';
 
-export const section = 'Internationalization';
+export const section = 'Utilities';
 export const description = 'Implementing collections in React Aria';
 
 # useDateFormatter
@@ -25,10 +25,6 @@ updating when the locale changes, and caching of date formatters for performance
 [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) docs for
 information on formatting options.
 
-## API
-
-<FunctionAPI function={docs.exports.useDateFormatter} links={docs.links} />
-
 ## Example
 
 This example displays the current date for two locales: USA, and Russia. Two instances of the `CurrentDate` component are rendered,
@@ -55,3 +51,7 @@ function CurrentDate() {
   </I18nProvider>
 </>
 ```
+
+## API
+
+<FunctionAPI function={docs.exports.useDateFormatter} links={docs.links} />
diff --git a/packages/dev/s2-docs/pages/react-aria/useDrag.mdx b/packages/dev/s2-docs/pages/react-aria/useDrag.mdx
index 7f028799fa3..a97cc75df20 100644
--- a/packages/dev/s2-docs/pages/react-aria/useDrag.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useDrag.mdx
@@ -13,20 +13,14 @@ import {GroupedPropTable} from '../../src/PropTable';
 import {FunctionAPI} from '../../src/FunctionAPI';
 import docs from 'docs:@react-aria/dnd';
 import sharedDocs from 'docs:@react-types/shared/src/dnd.d.ts';
-export const section = 'Drag and Drop';
+export const section = 'Interactions';
 
 # useDrag
 
 <PageDescription>{docs.exports.useDrag.description}</PageDescription>
 
-## API
-
-<FunctionAPI function={docs.exports.useDrag} links={docs.links} />
-
 ## Introduction
 
-Drag and drop is a common UI interaction that allows users to transfer data between two locations by directly moving a visual representation on screen. It is a flexible, efficient, and intuitive way for users to perform a variety of tasks, and is widely supported across both desktop and mobile operating systems.
-
 React Aria supports traditional mouse and touch based drag and drop, but also implements keyboard and screen reader friendly interactions. Users can press <Keyboard>Enter</Keyboard> on a draggable element to enter drag and drop mode. Then, they can press <Keyboard>Tab</Keyboard> to navigate between drop targets, and <Keyboard>Enter</Keyboard> to drop or <Keyboard>Escape</Keyboard> to cancel. Touch screen reader users can also drag by double tapping to activate drag and drop mode, swiping between drop targets, and double tapping again to drop.
 
 See the [drag and drop introduction](dnd.html) to learn more.
@@ -40,6 +34,7 @@ This example shows how to make a simple draggable element that provides data as
 import {useDrag} from '@react-aria/dnd';
 import {DropTarget} from './DropTarget.tsx';
 import './useDragExample.css';
+import 'vanilla-starter/theme.css';
 
 function Draggable() {
   let {dragProps, isDragging} = useDrag({
@@ -155,9 +150,11 @@ A <TypeLink links={sharedDocs.links} type={sharedDocs.links[sharedDocs.exports.D
 * `copy` – indicates that the dragged data will be copied to the target destination.
 * `link` – indicates that there will be a relationship established between the source and target locations.
 * `cancel` – indicates that the drag and drop operation will be canceled, resulting in no changes made to the source or target.
+
 Many operating systems display these in the form of a cursor change, e.g. a plus sign to indicate a copy operation. The user may also be able to use a modifier key to choose which drop operation to perform, such as <Keyboard>Option</Keyboard> or <Keyboard>Alt</Keyboard> to switch from move to copy.
 The `onDragEnd` event allows the drag source to respond when a drag that it initiated ends, either because it was dropped or because it was canceled by the user. The `dropOperation` property of the event object indicates the operation that was performed. For example, when data is moved, the UI could be updated to reflect this change by removing the original dragged element.
 This example removes the draggable element from the UI when a move operation is completed. Try holding the <Keyboard>Option</Keyboard> or <Keyboard>Alt</Keyboard> keys to change the operation to copy, and see how the behavior changes.
+
 ```tsx render
 "use client"
 import React from 'react';
@@ -304,4 +301,8 @@ function Draggable() {
   );
 }
 <Draggable />
-```
\ No newline at end of file
+```
+
+## API
+
+<FunctionAPI function={docs.exports.useDrag} links={docs.links} />
diff --git a/packages/dev/s2-docs/pages/react-aria/useDrop.mdx b/packages/dev/s2-docs/pages/react-aria/useDrop.mdx
index 1f7e1c93c53..3d35c620520 100644
--- a/packages/dev/s2-docs/pages/react-aria/useDrop.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useDrop.mdx
@@ -14,20 +14,14 @@ import {FunctionAPI} from '../../src/FunctionAPI';
 import docs from 'docs:@react-aria/dnd';
 import sharedDocs from 'docs:@react-types/shared/src/dnd.d.ts';
 import typesDocs from 'docs:@react-types/shared/src/events.d.ts';
-export const section = 'Drag and Drop';
+export const section = 'Interactions';
 
 # useDrop
 
 <PageDescription>{docs.exports.useDrop.description}</PageDescription>
 
-## API
-
-<FunctionAPI function={docs.exports.useDrop} links={docs.links} />
-
 ## Introduction
 
-Drag and drop is a common UI interaction that allows users to transfer data between two locations by directly moving a visual representation on screen. It is a flexible, efficient, and intuitive way for users to perform a variety of tasks, and is widely supported across both desktop and mobile operating systems.
-
 React Aria supports traditional mouse and touch based drag and drop, but also implements keyboard and screen reader friendly interactions. Users can press <Keyboard>Enter</Keyboard> on a draggable element to enter drag and drop mode. Then, they can press <Keyboard>Tab</Keyboard> to navigate between drop targets, and <Keyboard>Enter</Keyboard> to drop or <Keyboard>Escape</Keyboard> to cancel. Touch screen reader users can also drag by double tapping to activate drag and drop mode, swiping between drop targets, and double tapping again to drop.
 
 See the [drag and drop introduction](dnd.html) to learn more.
@@ -43,6 +37,7 @@ import type {TextDropItem} from '@react-aria/dnd';
 import {useDrop} from '@react-aria/dnd';
 import {Draggable} from './Draggable.tsx';
 import './useDragExample.css';
+import 'vanilla-starter/theme.css';
 
 function DropTarget() {
   let [dropped, setDropped] = React.useState(null);
@@ -78,6 +73,7 @@ function DropTarget() {
 * `directory` – references the contents of a directory
 ### Text
 A <TypeLink links={sharedDocs.links} type={sharedDocs.exports.TextDropItem} /> represents textual data in one or more different formats. These may be either standard [mime types](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types) or custom app-specific formats. Representing data in multiple formats allows drop targets both within and outside an application to choose data in a format that they understand. For example, a complex object may be serialized in a custom format for use within an application, with fallbacks in plain text and/or rich HTML that can be used when a user drops data from an external application.
+
 The example below finds the first available item that includes a custom app-specific type. The same draggable component as used in the above example is used here, but rather than displaying the plain text representation, the custom format is used instead.
 
 ```tsx render
@@ -118,8 +114,8 @@ function DropTarget() {
 ```
 ### Files
 A <TypeLink links={sharedDocs.links} type={sharedDocs.exports.FileDropItem} /> references a file on the user's device. It includes the name and mime type of the file, and methods to read the contents as plain text, or retrieve a native [File](https://developer.mozilla.org/en-US/docs/Web/API/File) object which can be attached to form data for uploading.
-This example accepts JPEG and PNG image files, and renders them by creating a local [object URL](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL).
 
+This example accepts JPEG and PNG image files, and renders them by creating a local [object URL](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL).
 ```tsx render
 'use client';
 import React from 'react';
@@ -198,7 +194,7 @@ function DropTarget() {
     );
   }
   return (
-    <div {...dropProps} role="button" tabIndex={0} ref={ref} className={`droppable grid ${isDropTarget ? 'target' : ''}`}>
+    <div {...dropProps} role="button" tabIndex={0} ref={ref} className={`droppable grid ${isDropTarget ? 'target' : ''}`} style={{overflow: 'auto'}}>
       {contents}
     </div>
   );
@@ -212,6 +208,7 @@ A <TypeLink links={sharedDocs.links} type={sharedDocs.exports.DropOperation} />
 * `copy` – indicates that the dragged data will be copied to the target destination.
 * `link` – indicates that there will be a relationship established between the source and target locations.
 * `cancel` – indicates that the drag and drop operation will be canceled, resulting in no changes made to the source or target.
+
 Many operating systems display these in the form of a cursor change, e.g. a plus sign to indicate a copy operation. The user may also be able to use a modifier key to choose which drop operation to perform, such as <Keyboard>Option</Keyboard> or <Keyboard>Alt</Keyboard> to switch from move to copy.
 The drag source can specify which drop operations are allowed for the dragged data (see the [useDrag docs](useDrag.html) for how to customize this). By default, the first allowed operation is allowed by drop targets, meaning that the drop target accepts data of any type and operation.
 
@@ -309,7 +306,7 @@ function DropTarget() {
     onDrop: onEvent
   });
   return (
-    <ul {...dropProps} role="button" tabIndex={0} ref={ref} className={`droppable ${isDropTarget ? 'target' : ''}`} style={{display: 'block', width: 'auto'}}>
+    <ul {...dropProps} role="button" tabIndex={0} ref={ref} className={`droppable ${isDropTarget ? 'target' : ''}`} style={{display: 'block', width: 'auto', overflow: 'auto'}}>
       {events.map((e, i) => <li key={i}>{e}</li>)}
     </ul>
   );
@@ -357,4 +354,8 @@ function DropTarget() {
   <Draggable />
   <DropTarget />
 </div>
-```
\ No newline at end of file
+```
+
+## API
+
+<FunctionAPI function={docs.exports.useDrop} links={docs.links} />
\ No newline at end of file
diff --git a/packages/dev/s2-docs/pages/react-aria/useField.mdx b/packages/dev/s2-docs/pages/react-aria/useField.mdx
index 41125ea5648..417e9af4928 100644
--- a/packages/dev/s2-docs/pages/react-aria/useField.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useField.mdx
@@ -18,11 +18,7 @@ export const section = 'Utilities';
 
 <PageDescription>{docs.exports.useField.description}</PageDescription>
 
-## API
-
-<FunctionAPI function={docs.exports.useField} links={docs.links} />
-
-## Example
+## Introduction
 
 The `useField` hook associates a form control with a label, and an optional description and/or error message. This is useful for providing context about how users should fill in a field, or a validation message. `useField` takes care of creating ids for each element and associating them with the correct ARIA attributes (`aria-labelledby` and `aria-describedby`).
 
@@ -31,6 +27,8 @@ By default, `useField` assumes that the label is a native HTML `<label>` element
 {/* not implemented yet */}
 {/* **Note**: Many other React Aria hooks such as [useTextField](useTextField.html), [useSelect](useSelect.html), and [useComboBox](useComboBox.html) already include support for description and error message elements. If you're using one of those hooks, there's no need to use `useField`. */}
 
+## Example
+
 ```tsx render
 'use client';
 import {useField} from '@react-aria/label';
@@ -66,3 +64,7 @@ function ContactPicker(props) {
     errorMessage="Select a contact method." />
 </>
 ```
+
+## API
+
+<FunctionAPI function={docs.exports.useField} links={docs.links} />
diff --git a/packages/dev/s2-docs/pages/react-aria/useFilter.mdx b/packages/dev/s2-docs/pages/react-aria/useFilter.mdx
index ac5c8b7f37c..31a9d53b391 100644
--- a/packages/dev/s2-docs/pages/react-aria/useFilter.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useFilter.mdx
@@ -12,7 +12,7 @@ export default Layout;
 import {FunctionAPI} from '../../src/FunctionAPI';
 import docs from 'docs:@react-aria/i18n';
 
-export const section = 'Internationalization';
+export const section = 'Utilities';
 export const description = 'Implementing collections in React Aria';
 
 # useFilter
@@ -25,14 +25,6 @@ sensitive matching. `useFilter` provides options to allow ignoring case, diacrit
 which are implemented according to locale-specific rules. It automatically uses the current locale set by the application,
 either via the default browser language or via the [I18nProvider](I18nProvider.html).
 
-## API
-
-<FunctionAPI function={docs.exports.useFilter} links={docs.links} />
-
-## Interface
-
-<ClassAPI class={docs.exports.Filter} links={docs.links} />
-
 ## Example
 
 The following example implements a filterable list using a `contains` matching strategy that ignores both case
@@ -79,3 +71,11 @@ function Example() {
   );
 }
 ```
+
+## API
+
+<FunctionAPI function={docs.exports.useFilter} links={docs.links} />
+
+### Usage
+
+<ClassAPI class={docs.exports.Filter} links={docs.links} />
\ No newline at end of file
diff --git a/packages/dev/s2-docs/pages/react-aria/useFocus.mdx b/packages/dev/s2-docs/pages/react-aria/useFocus.mdx
index 5fd8fb72e71..9a46b9746b3 100644
--- a/packages/dev/s2-docs/pages/react-aria/useFocus.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useFocus.mdx
@@ -18,10 +18,6 @@ export const section = 'Interactions';
 
 <PageDescription>{docs.exports.useFocus.description}</PageDescription>
 
-## API
-
-<FunctionAPI function={docs.exports.useFocus} links={docs.links} />
-
 ## Features
 
 `useFocus` handles focus interactions for an element. Unlike React's built-in focus events,
@@ -32,16 +28,6 @@ in CSS.
 
 To handle focus events on descendants of an element, see [useFocusWithin](useFocusWithin.html).
 
-## Usage 
-
-`useFocus` returns props that you should spread onto the target element:
-
-<InterfaceType {...docs.exports.FocusResult} />
-
-`useFocus` supports the following options and event handlers:
-
-<InterfaceType {...docs.exports.FocusProps} />
-
 ## Example
 
 This example shows a simple input element that handles focus events with `useFocus` and logs them to a list below.
@@ -83,3 +69,17 @@ function Example() {
   );
 }
 ```
+
+## API
+
+<FunctionAPI function={docs.exports.useFocus} links={docs.links} />
+
+### Usage
+
+`useFocus` returns props that you should spread onto the target element:
+
+<InterfaceType {...docs.exports.FocusResult} />
+
+`useFocus` supports the following options and event handlers:
+
+<InterfaceType {...docs.exports.FocusProps} />
\ No newline at end of file
diff --git a/packages/dev/s2-docs/pages/react-aria/useFocusRing.mdx b/packages/dev/s2-docs/pages/react-aria/useFocusRing.mdx
index 3cb7dddea29..df61097e3fd 100644
--- a/packages/dev/s2-docs/pages/react-aria/useFocusRing.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useFocusRing.mdx
@@ -13,17 +13,12 @@ import {InterfaceType} from '../../src/types';
 import {FunctionAPI} from '../../src/FunctionAPI';
 import docs from 'docs:@react-aria/focus';
 
-export const section = 'Focus';
-export const description = 'Implementing collections in React Aria';
+export const section = 'Interactions';
 
 # useFocusRing
 
 <PageDescription>{docs.exports.useFocusRing.description}</PageDescription>
 
-## API
-
-<FunctionAPI links={docs.links} function={docs.exports.useFocusRing} />
-
 ## Introduction
 
 The `useFocusRing` hook returns whether a focus ring should be displayed to indicate keyboard focus for a component.
@@ -33,14 +28,6 @@ and touch screen users.
 
 If CSS classes are being used for styling, see the [FocusRing](FocusRing.html) component for a shortcut.
 
-## Options
-
-<InterfaceType {...docs.exports.AriaFocusRingProps} />
-
-## Result
-
-<InterfaceType {...docs.exports.FocusRingAria} />
-
 ## Example
 
 This example shows how to use `useFocusRing` to adjust styling when keyboard focus is on a button.
@@ -77,3 +64,17 @@ function Example() {
   );
 }
 ```
+
+## API
+
+<FunctionAPI links={docs.links} function={docs.exports.useFocusRing} />
+
+### Usage
+
+`useFocusRing` returns props that you should spread onto the target element:
+
+<InterfaceType {...docs.exports.FocusRingAria} />
+
+`useFocusRing` supports the following options and event handlers:
+
+<InterfaceType {...docs.exports.AriaFocusRingProps} />
diff --git a/packages/dev/s2-docs/pages/react-aria/useFocusVisible.mdx b/packages/dev/s2-docs/pages/react-aria/useFocusVisible.mdx
index 8d30baa7051..aa2f8bbd225 100644
--- a/packages/dev/s2-docs/pages/react-aria/useFocusVisible.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useFocusVisible.mdx
@@ -35,17 +35,6 @@ in CSS.
 To determine whether a focus ring should be visible for an individual component rather than
 globally, see [useFocusRing](useFocusRing.html).
 
-## Usage
-
-`useFocusVisible` returns props that you should spread onto the target element:
-
-<InterfaceType {...docs.exports.FocusVisibleResult} />
-
-`useFocusVisible` supports the following options:
-
-<InterfaceType {...docs.exports.FocusVisibleProps} />
-
-
 ## Example
 
 This example shows focus visible state and updates as you interact with the page. By default,
@@ -77,3 +66,17 @@ function Example() {
   );
 }
 ```
+
+## API
+
+<FunctionAPI function={docs.exports.useFocusVisible} links={docs.links} />
+
+### Usage
+
+`useFocusVisible` returns props that you should spread onto the target element:
+
+<InterfaceType {...docs.exports.FocusVisibleResult} />
+
+`useFocusVisible` supports the following options:
+
+<InterfaceType {...docs.exports.FocusVisibleProps} />
diff --git a/packages/dev/s2-docs/pages/react-aria/useFocusWithin.mdx b/packages/dev/s2-docs/pages/react-aria/useFocusWithin.mdx
index affe18d4e80..0771e46dede 100644
--- a/packages/dev/s2-docs/pages/react-aria/useFocusWithin.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useFocusWithin.mdx
@@ -18,10 +18,6 @@ export const section = 'Interactions';
 
 <PageDescription>{docs.exports.useFocusWithin.description}</PageDescription>
 
-## API
-
-<FunctionAPI function={docs.exports.useFocusWithin} links={docs.links} />
-
 ## Features
 
 `useFocusWithin` handles focus interactions for an element and its descendants. Focus is "within"
@@ -31,20 +27,9 @@ in CSS.
 
 To handle focus events on only the target element, and not descendants, see [useFocus](useFocus.html).
 
-## Usage
-
-`useFocusWithin` returns props that you should spread onto the target element:
-
-<InterfaceType {...docs.exports.FocusWithinResult} />
-
-`useFocusWithin` supports the following event handlers and options:
-
-<InterfaceType {...docs.exports.FocusWithinProps} />
-
 ## Example
 
-This example shows two text fields inside a div, which handles focus within events. It stores focus
-within state in local component state, which is updated by an `onFocusWithinChange` handler. This is used
+This example stores focus within state in local component state, which is updated by an `onFocusWithinChange` handler. This is used
 to update the background color and text color of the group while one of the text fields has focus.
 
 Focus within and blur within events are also logged to the list below. Notice that the events are only
@@ -100,3 +85,17 @@ function Example() {
   );
 }
 ```
+
+## API
+
+<FunctionAPI function={docs.exports.useFocusWithin} links={docs.links} />
+
+### Usage
+
+`useFocusWithin` returns props that you should spread onto the target element:
+
+<InterfaceType {...docs.exports.FocusWithinResult} />
+
+`useFocusWithin` supports the following event handlers and options:
+
+<InterfaceType {...docs.exports.FocusWithinProps} />
\ No newline at end of file
diff --git a/packages/dev/s2-docs/pages/react-aria/useHover.mdx b/packages/dev/s2-docs/pages/react-aria/useHover.mdx
index a605a007bd6..5eb9652d02f 100644
--- a/packages/dev/s2-docs/pages/react-aria/useHover.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useHover.mdx
@@ -19,15 +19,8 @@ export const section = 'Interactions';
 
 <PageDescription>{docs.exports.useHover.description}</PageDescription>
 
-## API
-
-<FunctionAPI function={docs.exports.useHover} links={docs.links} />
-
 ## Features
 
-`useHover` handles hover interactions for an element. A hover interaction begins when a user moves their pointer
-over an element, and ends when they move their pointer off of the element.
-
 * Uses pointer events where available, with fallbacks to mouse and touch events
 * Ignores emulated mouse events in mobile browsers
 
@@ -39,21 +32,6 @@ and device, `:hover` may never apply, or may apply continuously until the user t
 {/* TODO: uncomment once we transfer over the blogs to new docs  */}
 {/* Read our [blog post](/blog/building-a-button-part-2.html) about the complexities of hover event handling to learn more. */}
 
-## Usage
-
-`useHover` returns props that you should spread onto the target element:
-
-<InterfaceType {...docs.exports.HoverResult} />
-
-`useHover` supports the following event handlers and options:
-
-<InterfaceType {...docs.exports.HoverProps} />
-
-Each of these handlers is fired with a `HoverEvent`, which exposes information about the target and the
-type of event that triggered the interaction.
-
-<InterfaceType {...typesDocs.exports.HoverEvent} />
-
 ## Accessibility
 
 Hover interactions should never be the only way to interact with an element because they are not
@@ -112,3 +90,22 @@ function Example() {
   );
 }
 ```
+
+## API
+
+<FunctionAPI function={docs.exports.useHover} links={docs.links} />
+
+### Usage
+
+`useHover` returns props that you should spread onto the target element:
+
+<InterfaceType {...docs.exports.HoverResult} />
+
+`useHover` supports the following event handlers and options:
+
+<InterfaceType {...docs.exports.HoverProps} />
+
+Each of these handlers is fired with a `HoverEvent`, which exposes information about the target and the
+type of event that triggered the interaction.
+
+<InterfaceType {...typesDocs.exports.HoverEvent} />
diff --git a/packages/dev/s2-docs/pages/react-aria/useId.mdx b/packages/dev/s2-docs/pages/react-aria/useId.mdx
index 799434d51ef..c68111d397b 100644
--- a/packages/dev/s2-docs/pages/react-aria/useId.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useId.mdx
@@ -18,10 +18,6 @@ export const section = 'Utilities';
 
 <PageDescription>{docs.exports.useId.description}</PageDescription>
 
-## API
-
-<FunctionAPI function={docs.exports.useId} links={docs.links} />
-
 ## Introduction
 
 The `useId` hook creates an autogenerated unique `id` for an element. An `id`
@@ -35,3 +31,7 @@ import {useId} from '@react-aria/utils';
 let elementId = useId();
 let componentId = useId(props.id);
 ```
+
+## API
+
+<FunctionAPI function={docs.exports.useId} links={docs.links} />
\ No newline at end of file
diff --git a/packages/dev/s2-docs/pages/react-aria/useIsSSR.mdx b/packages/dev/s2-docs/pages/react-aria/useIsSSR.mdx
index 9f9a882d531..0a0c6cdcc81 100644
--- a/packages/dev/s2-docs/pages/react-aria/useIsSSR.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useIsSSR.mdx
@@ -12,17 +12,12 @@ export default Layout;
 import docs from 'docs:@react-aria/ssr';
 import {FunctionAPI} from '../../src/FunctionAPI';
 
-
-export const section = 'Server Side Rendering';
+export const section = 'Utilities';
 
 # useIsSSR
 
 <PageDescription>{docs.exports.useIsSSR.description}</PageDescription>
 
-## API
-
-<FunctionAPI function={docs.exports.useIsSSR} links={docs.links} />
-
 ## Introduction
 
 `useIsSSR` returns `true` during server rendering and hydration, and updates to `false`
@@ -44,3 +39,7 @@ function MyComponent() {
   return <span>{isSSR ? 'Server' : 'Client'}</span>;
 }
 ```
+
+## API
+
+<FunctionAPI function={docs.exports.useIsSSR} links={docs.links} />
diff --git a/packages/dev/s2-docs/pages/react-aria/useKeyboard.mdx b/packages/dev/s2-docs/pages/react-aria/useKeyboard.mdx
index 13ef7c0dc35..185f5baac76 100644
--- a/packages/dev/s2-docs/pages/react-aria/useKeyboard.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useKeyboard.mdx
@@ -18,10 +18,6 @@ export const section = 'Interactions';
 
 <PageDescription>{docs.exports.useKeyboard.description}</PageDescription>
 
-## API
-
-<FunctionAPI function={docs.exports.useKeyboard} links={docs.links} />
-
 ## Features
 
 `useKeyboard` handles keyboard interactions. The only difference from DOM events is that propagation
@@ -30,21 +26,11 @@ This provides better modularity by default, so that a parent component doesn't r
 that a child already handled. If the child doesn't handle the event (e.g. it was for an unknown key),
 it can call `event.continuePropagation()` to allow parents to handle the event.
 
-## Usage
-
-`useKeyboard` returns props that you should spread onto the target element:
-
-<InterfaceType {...docs.exports.KeyboardResult} />
-
-`useKeyboard` supports the following props:
-
-<InterfaceType {...docs.exports.KeyboardProps} />
-
 ## Example
 
 This example shows a simple input element that handles keyboard events with `useKeyboard` and logs them to a list below.
 
-{/* Components hooks have not been written yet */}
+{/* TODO: Components hooks have not been written yet */}
 {/* **NOTE: for more advanced text field functionality, see [useTextField](useTextField.html).** */}
 
 ```tsx render
@@ -81,3 +67,17 @@ function Example() {
   );
 }
 ```
+
+## API
+
+<FunctionAPI function={docs.exports.useKeyboard} links={docs.links} />
+
+### Usage
+
+`useKeyboard` returns props that you should spread onto the target element:
+
+<InterfaceType {...docs.exports.KeyboardResult} />
+
+`useKeyboard` supports the following props:
+
+<InterfaceType {...docs.exports.KeyboardProps} />
\ No newline at end of file
diff --git a/packages/dev/s2-docs/pages/react-aria/useLabel.mdx b/packages/dev/s2-docs/pages/react-aria/useLabel.mdx
index 116c53ce63a..d4720db7728 100644
--- a/packages/dev/s2-docs/pages/react-aria/useLabel.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useLabel.mdx
@@ -18,10 +18,6 @@ export const section = 'Utilities';
 
 <PageDescription>{docs.exports.useLabel.description}</PageDescription>
 
-## API
-
-<FunctionAPI function={docs.exports.useLabel} links={docs.links} />
-
 ## Example
 
 The `useLabel` hook associates a label with a field. It automatically handles
@@ -56,3 +52,7 @@ element other than a `<label>` and set the `labelElementType` prop appropriately
 {/* not implemented yet */}
 {/* See [useRadioGroup](useRadioGroup.html#example) and [useTextField](useTextField.html#example)
 for examples of how `useLabel` is used by components. */}
+
+## API
+
+<FunctionAPI function={docs.exports.useLabel} links={docs.links} />
diff --git a/packages/dev/s2-docs/pages/react-aria/useLandmark.mdx b/packages/dev/s2-docs/pages/react-aria/useLandmark.mdx
index df5e9b0a847..1059844cfe0 100644
--- a/packages/dev/s2-docs/pages/react-aria/useLandmark.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useLandmark.mdx
@@ -18,10 +18,6 @@ export const section = 'Interactions';
 
 <PageDescription>{docs.exports.useLandmark.description}</PageDescription>
 
-## API
-
-<FunctionAPI function={docs.exports.useLandmark} links={docs.links} />
-
 ## Features
 
 Landmarks provide a way to designate important subsections of a page. They allow screen reader users to get an overview of the various sections of the page, and jump to a specific section.
@@ -45,16 +41,6 @@ If multiple landmarks are registered with the same role, they should have unique
 {/* TODO: Not implemented yet */}
 {/* For an example of landmarks in use, see the [useToastRegion](useToast.html#anatomy) documentation. */}
 
-## Usage
-
-`useLandmark` returns props that you should spread onto the target element:
-
-<InterfaceType {...docs.exports.LandmarkAria} />
-
-`useLandmark` supports the following options:
-
-<InterfaceType {...docs.exports.AriaLandmarkProps} />
-
 ## Example
 
 ```tsx render
@@ -108,3 +94,17 @@ function Search(props) {
   </Region>
 </div>
 ```
+
+## API
+
+<FunctionAPI function={docs.exports.useLandmark} links={docs.links} />
+
+### Usage
+
+`useLandmark` returns props that you should spread onto the target element:
+
+<InterfaceType {...docs.exports.LandmarkAria} />
+
+`useLandmark` supports the following options:
+
+<InterfaceType {...docs.exports.AriaLandmarkProps} />
\ No newline at end of file
diff --git a/packages/dev/s2-docs/pages/react-aria/useLocale.mdx b/packages/dev/s2-docs/pages/react-aria/useLocale.mdx
index 978bc50bd40..7ed078dc70e 100644
--- a/packages/dev/s2-docs/pages/react-aria/useLocale.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useLocale.mdx
@@ -12,11 +12,12 @@ export default Layout;
 import {FunctionAPI} from '../../src/FunctionAPI';
 import docs from 'docs:@react-aria/i18n';
 
-export const section = 'Internationalization';
+export const section = 'Utilities';
 export const description = 'Implementing collections in React Aria';
 
 # useLocale
 
+
 ## Introduction
 
 `useLocale` allows components to access the current locale and interface layout direction.
@@ -28,14 +29,6 @@ be overridden by using the [I18nProvider](I18nProvider.html) at the root of your
 and [dir](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) attributes
 so that the browser knows which language and direction the user interface should be rendered in.
 
-## API
-
-<FunctionAPI function={docs.exports.useLocale} links={docs.links} />
-
-## Interface
-
-<ClassAPI class={docs.exports.Locale} links={docs.links} />
-
 ## Example
 
 ```tsx
@@ -51,3 +44,11 @@ function YourApp() {
   );
 }
 ```
+
+## API
+
+<FunctionAPI function={docs.exports.useLocale} links={docs.links} />
+
+## Usage
+
+<ClassAPI class={docs.exports.Locale} links={docs.links} />
diff --git a/packages/dev/s2-docs/pages/react-aria/useLongPress.mdx b/packages/dev/s2-docs/pages/react-aria/useLongPress.mdx
index 9d94a0bce6f..190bf57960a 100644
--- a/packages/dev/s2-docs/pages/react-aria/useLongPress.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useLongPress.mdx
@@ -19,16 +19,9 @@ export const section = 'Interactions';
 
 <PageDescription>{docs.exports.useLongPress.description}</PageDescription>
 
-## API
-
-<FunctionAPI function={docs.exports.useLongPress} links={docs.links} />
-
 ## Features
 
-`useLongPress` handles long press interactions across both mouse and touch devices. A long press is triggered when a user presses
-and holds their pointer over a target for a minimum period of time. If the user moves their pointer off of the target before the
-time threshold, the interaction is canceled. Once a long press event is triggered, other pointer interactions that may be active
-such as `usePress` and `useMove` will be canceled so that only the long press is activated.
+A long press is triggered when a user presses and holds their pointer over a target for a minimum period of time. If the user moves their pointer off of the target before the time threshold, the interaction is canceled. Once a long press event is triggered, other pointer interactions that may be active such as `usePress` and `useMove` will be canceled so that only the long press is activated.
 
 * Handles mouse and touch events
 * Uses pointer events where available, with fallbacks to mouse and touch events
@@ -38,21 +31,6 @@ such as `usePress` and `useMove` will be canceled so that only the long press is
 * Customizable time threshold for long press
 * Supports an accessibility description to indicate to assistive technology users that a long press action is available
 
-## Usage
-
-`useLongPress` returns props that you should spread onto the target element:
-
-<InterfaceType {...docs.exports.LongPressResult} />
-
-`useLongPress` supports the following event handlers and options:
-
-<InterfaceType {...docs.exports.LongPressProps} />
-
-Each of these handlers is fired with a `LongPressEvent`, which exposes information about the target and the
-type of event that triggered the interaction.
-
-<InterfaceType {...typesDocs.exports.LongPressEvent} />
-
 ## Example
 
 This example shows a button that has both a normal press action using [usePress](usePress.html), as well as a long
@@ -112,3 +90,22 @@ function Example() {
   );
 }
 ```
+
+## API
+
+<FunctionAPI function={docs.exports.useLongPress} links={docs.links} />
+
+### Usage
+
+`useLongPress` returns props that you should spread onto the target element:
+
+<InterfaceType {...docs.exports.LongPressResult} />
+
+`useLongPress` supports the following event handlers and options:
+
+<InterfaceType {...docs.exports.LongPressProps} />
+
+Each of these handlers is fired with a `LongPressEvent`, which exposes information about the target and the
+type of event that triggered the interaction.
+
+<InterfaceType {...typesDocs.exports.LongPressEvent} />
\ No newline at end of file
diff --git a/packages/dev/s2-docs/pages/react-aria/useMove.mdx b/packages/dev/s2-docs/pages/react-aria/useMove.mdx
index 91ef600ba40..61d44e28b6f 100644
--- a/packages/dev/s2-docs/pages/react-aria/useMove.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useMove.mdx
@@ -25,10 +25,7 @@ export const section = 'Interactions';
 
 ## Features
 
-`useMove` handles move interactions across mouse, touch, and keyboard. A move interaction starts when a
-user moves after pressing down with a mouse or their finger on the target, and ends when they lift their pointer. Move
-events are fired as the pointer moves around, and specify the distance that the pointer traveled since the last
-event. In addition, after a user focuses the target element, move events are fired when the user presses the arrow keys.
+Move events are fired as the pointer moves around, and specify the distance that the pointer traveled since the last event. In addition, after a user focuses the target element, move events are fired when the user presses the arrow keys.
 
 * Handles mouse and touch events
 * Handles arrow key presses
@@ -37,26 +34,11 @@ event. In addition, after a user focuses the target element, move events are fir
 * Handles disabling text selection on mobile while the press interaction is active
 * Normalizes many cross browser inconsistencies
 
-## Usage
-
-`useMove` returns props that you should spread onto the target element:
-
-<InterfaceType {...docs.exports.MoveResult} />
-
-`useMove` supports the following event handlers:
-
-<InterfaceType {...typesDocs.exports.MoveEvents} />
-
-Each of these handlers is fired with a `MoveEvent`, which exposes information about the target and the
-type of event that triggered the interaction.
-
-<InterfaceType {...typesDocs.exports.MoveMoveEvent} />
-
 ## Example
 
 This example shows a ball that can be moved by dragging with a mouse or touch, or by tabbing to it and using
 the arrow keys on your keyboard. The movement is clamped so that the ball cannot be dragged outside a box.
-In addition, all of the move events are logged below so that you can inspect what is going on.
+All of the move events are logged below so that you can inspect what is going on.
 
 ```tsx render
 "use client";
@@ -75,7 +57,6 @@ function Example() {
   });
 
   let clamp = pos => Math.min(Math.max(pos, 0), CONTAINER_SIZE - BALL_SIZE);
-  {/*- begin highlight -*/}
   let {moveProps} = useMove({
     onMoveStart(e) {
       setColor('red');
@@ -113,7 +94,6 @@ function Example() {
       setEvents(events => [`move end with pointerType = ${e.pointerType}`, ...events]);
     }
   });
-  {/*- end highlight -*/}
 
   return (
     <>
@@ -150,3 +130,18 @@ function Example() {
   );
 }
 ```
+
+## Usage
+
+`useMove` returns props that you should spread onto the target element:
+
+<InterfaceType {...docs.exports.MoveResult} />
+
+`useMove` supports the following event handlers:
+
+<InterfaceType {...typesDocs.exports.MoveEvents} />
+
+Each of these handlers is fired with a `MoveEvent`, which exposes information about the target and the
+type of event that triggered the interaction.
+
+<InterfaceType {...typesDocs.exports.MoveMoveEvent} />
diff --git a/packages/dev/s2-docs/pages/react-aria/useNumberFormatter.mdx b/packages/dev/s2-docs/pages/react-aria/useNumberFormatter.mdx
index 35d39fbb6e5..c7f63a3072a 100644
--- a/packages/dev/s2-docs/pages/react-aria/useNumberFormatter.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useNumberFormatter.mdx
@@ -12,7 +12,7 @@ export default Layout;
 import {FunctionAPI} from '../../src/FunctionAPI';
 import docs from 'docs:@react-aria/i18n';
 
-export const section = 'Internationalization';
+export const section = 'Utilities';
 export const description = 'Implementing collections in React Aria';
 
 # useNumberFormatter
@@ -25,10 +25,6 @@ updating when the locale changes, and caching of number formatters for performan
 [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) docs for
 information on formatting options.
 
-## API
-
-<FunctionAPI function={docs.exports.useNumberFormatter} links={docs.links} />
-
 ## Example
 
 This example displays a currency value for two locales: USA, and Germany. Two instances of the `Currency` component are rendered,
@@ -59,3 +55,7 @@ function Currency({value, currency}) {
   </I18nProvider>
 </>
 ```
+
+## API
+
+<FunctionAPI function={docs.exports.useNumberFormatter} links={docs.links} />
diff --git a/packages/dev/s2-docs/pages/react-aria/useObjectRef.mdx b/packages/dev/s2-docs/pages/react-aria/useObjectRef.mdx
index fc2d0392b4c..295b57c23e3 100644
--- a/packages/dev/s2-docs/pages/react-aria/useObjectRef.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useObjectRef.mdx
@@ -18,10 +18,6 @@ export const section = 'Utilities';
 
 <PageDescription>{docs.exports.useObjectRef.description}</PageDescription>
 
-## API
-
-<FunctionAPI function={docs.exports.useObjectRef} links={docs.links} />
-
 ## Introduction
 
 `useObjectRef` is a utility function that will give an object ref back regardless of if a
@@ -55,3 +51,7 @@ function MyButton(props) {
 
 <MyButton>Test</MyButton>
 ```
+
+## API
+
+<FunctionAPI function={docs.exports.useObjectRef} links={docs.links} />
\ No newline at end of file
diff --git a/packages/dev/s2-docs/pages/react-aria/usePress.mdx b/packages/dev/s2-docs/pages/react-aria/usePress.mdx
index a4d768b2b31..e1d74a58242 100644
--- a/packages/dev/s2-docs/pages/react-aria/usePress.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/usePress.mdx
@@ -19,15 +19,9 @@ export const section = 'Interactions';
 
 <PageDescription>{docs.exports.usePress.description}</PageDescription>
 
-## API
-
-<FunctionAPI function={docs.exports.usePress} links={docs.links} />
-
 ## Features
 
-`usePress` handles press interactions across mouse, touch, keyboard, and screen readers. A press interaction starts when a
-user presses down with a mouse or their finger on the target, and ends when they move the pointer off the target. It may
-start again if the pointer re-enters the target. `usePress` returns the current press state, which can be used to adjust
+`usePress` returns the current press state, which can be used to adjust
 the visual appearance of the target. If the pointer is released over the target, then an `onPress` event is fired.
 
 * Handles mouse and touch events
@@ -42,21 +36,6 @@ the visual appearance of the target. If the pointer is released over the target,
 {/* TODO: uncomment once blog posts are transferred over */}
 {/* Read our [blog post](/blog/building-a-button-part-1.html) about the complexities of press event handling to learn more. */}
 
-## Usage
-
-`usePress` returns props that you should spread onto the target element, along with the current press state:
-
-<InterfaceType {...docs.exports.PressResult} />
-
-`usePress` supports the following event handlers:
-
-<InterfaceType {...typesDocs.exports.PressEvents} />
-
-Each of these handlers is fired with a `PressEvent`, which exposes information about the target and the
-type of event that triggered the interaction.
-
-<InterfaceType {...typesDocs.exports.PressEvent} />
-
 ## Example
 
 This example shows a simple target that handles press events with `usePress` and logs them to a list below.
@@ -112,3 +91,22 @@ function Example() {
   );
 }
 ```
+
+## API
+
+<FunctionAPI function={docs.exports.usePress} links={docs.links} />
+
+### Usage
+
+`usePress` returns props that you should spread onto the target element, along with the current press state:
+
+<InterfaceType {...docs.exports.PressResult} />
+
+`usePress` supports the following event handlers:
+
+<InterfaceType {...typesDocs.exports.PressEvents} />
+
+Each of these handlers is fired with a `PressEvent`, which exposes information about the target and the
+type of event that triggered the interaction.
+
+<InterfaceType {...typesDocs.exports.PressEvent} />
\ No newline at end of file

From 604ddfe241e560a89d4c2a734f10f5a14ac97587 Mon Sep 17 00:00:00 2001
From: Robert Snow <rsnow@adobe.com>
Date: Wed, 5 Nov 2025 09:10:29 +1100
Subject: [PATCH 2/5] fix: new docs section sorting (#9137)

---
 packages/dev/s2-docs/src/Nav.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/dev/s2-docs/src/Nav.tsx b/packages/dev/s2-docs/src/Nav.tsx
index 0a9d3acbe3d..d702a510a4c 100644
--- a/packages/dev/s2-docs/src/Nav.tsx
+++ b/packages/dev/s2-docs/src/Nav.tsx
@@ -31,6 +31,16 @@ export function Nav({pages, currentPage}: PageProps) {
 
   let [maskSize, setMaskSize] = useState(0);
 
+  let sortedSections = [...sections].sort((a, b) => {
+    if (a[0] === 'Getting started') {
+      return -1;
+    }
+    if (b[0] === 'Getting started') {
+      return 1;
+    }
+    return a[0].localeCompare(b[0]);
+  });
+
   return (
     <nav
       onScroll={e => setMaskSize(Math.min(e.currentTarget.scrollTop, 32))}
@@ -50,7 +60,7 @@ export function Nav({pages, currentPage}: PageProps) {
           lg: 'block'
         }
       })}>
-      {[...sections].sort((a, b) => a[0] === 'Getting started' ? -1 : a[0].localeCompare(b[0])).map(([name, pages]) => (
+      {sortedSections.map(([name, pages]) => (
         <SideNavSection title={name} key={name}>
           <SideNav>
             {pages

From 80045dc693bd1424daa93d3db34fe0ab8bfa3d74 Mon Sep 17 00:00:00 2001
From: Robert Snow <rsnow@adobe.com>
Date: Wed, 5 Nov 2025 09:12:06 +1100
Subject: [PATCH 3/5] fix: release docs (#9139)

* fix: release docs

* show releases in the search and sort them to the end and by date

* fix links and horizontal scrollbar in examples

* generalize the up one level

* fix colors

* fix lint

* make it look like a multiline spectrum breadcrumb

* remove console.log
---
 .../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  | 16 ++---
 .../dev/s2-docs/pages/s2/releases/v0-10-0.mdx |  4 +-
 .../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  |  8 +--
 .../dev/s2-docs/pages/s2/releases/v0-4-0.mdx  |  2 +-
 .../dev/s2-docs/pages/s2/releases/v0-5-0.mdx  | 18 ++---
 .../dev/s2-docs/pages/s2/releases/v0-6-0.mdx  |  2 +-
 .../dev/s2-docs/pages/s2/releases/v0-7-0.mdx  |  4 +-
 .../dev/s2-docs/pages/s2/releases/v0-8-0.mdx  |  4 +-
 .../dev/s2-docs/pages/s2/releases/v0-9-0.mdx  |  4 +-
 .../dev/s2-docs/pages/s2/releases/v0-9-1.mdx  |  2 +-
 packages/dev/s2-docs/src/CodePlatter.tsx      | 21 +++---
 packages/dev/s2-docs/src/GoUpOneLink.tsx      | 70 -------------------
 packages/dev/s2-docs/src/Layout.tsx           | 27 ++++---
 packages/dev/s2-docs/src/Link.tsx             | 19 +++++
 packages/dev/s2-docs/src/Nav.tsx              |  1 +
 packages/dev/s2-docs/src/SearchMenu.tsx       | 43 +++++++++---
 33 files changed, 131 insertions(+), 148 deletions(-)
 delete mode 100644 packages/dev/s2-docs/src/GoUpOneLink.tsx

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 738e42604bd..83705229905 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
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'December 20, 2023';
 export const title = 'v1.0.0';
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 38ba9209f29..9c71fd264b7 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
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'February 13, 2024';
 export const title = 'v1.1.0';
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 0343b3eb459..63f1a35d35f 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
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'June 5, 2025';
 export const title = 'v1.10.0';
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 5be35de2db3..ca8b19424cc 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
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'July 22, 2025';
 export const title = 'v1.11.0';
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 2d59c29f73e..d024536d75c 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
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'August 25, 2025';
 export const title = 'v1.12.0';
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 49005de82f6..e4e019eff70 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
@@ -14,7 +14,7 @@ import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 import {ReleasedVersions} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'October 2, 2025';
 export const title = 'v1.13.0';
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 fa136edc0aa..ece53eb8b58 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
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'May 1, 2024';
 export const title = 'v1.2.0';
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 1c48ea85836..1b22cb39774 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
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'July 22, 2024';
 export const title = 'v1.3.0';
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 e8b52a2462c..093c0517ae9 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
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'September 30, 2024';
 export const title = 'v1.4.0';
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 217723d685f..ea80ffd5d56 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
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'November 20, 2024';
 export const title = 'v1.5.0';
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 7001ae12a12..f517c931fcb 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
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'January 15, 2025';
 export const title = 'v1.6.0';
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 48517dabb0c..f903594aac2 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
@@ -14,7 +14,7 @@ import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 import datepickerImage from 'url:../assets/datepicker-rtl.png';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'March 5, 2025';
 export const title = 'v1.7.0';
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 2930daa111a..1222826b12f 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
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'April 11, 2025';
 export const title = 'v1.8.0';
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 194c0b71ed6..8891b42417a 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
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'May 19, 2025';
 export const title = 'v1.9.0';
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 52db34aec23..5258a9b8714 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
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'May 17, 2024';
 export const title = 'v0.1.0';
@@ -26,15 +26,15 @@ export const isSubpage = true;
 Version 0.1.0 introduces the first version of Spectrum 2, including new Badge, ComboBox, Meter, and Picker components.
 
 ## New components
-* [Badge](?path=/docs/badge--docs)
-* [ComboBox](?path=/docs/combobox--docs)
-* [Meter](?path=/docs/meter--docs)
-* [Picker](?path=/docs/picker--docs)
+* [Badge](../Badge.html)
+* [ComboBox](../ComboBox.html)
+* [Meter](../Meter.html)
+* [Picker](../Picker.html)
 
 ## Updates
-* [TagGroup](?path=/docs/taggroup--docs) now supports avatars, images, error message and description help text, and improved hover/focus styling
+* [TagGroup](../TagGroup.html) now supports avatars, images, error message and description help text, and improved hover/focus styling
 * Updated React Aria Components to v1.2.0
-* Fixed global styles such as CSS resets from applying to Spectrum 2 elements. Note that any CSS rule referenced from an `UNSAFE_className` prop must now be wrapped in `@layer UNSAFE_overrides`. See [the docs](?path=/docs/intro--docs#unsafe-style-overrides) for more details.
+* Fixed global styles such as CSS resets from applying to Spectrum 2 elements. Note that any CSS rule referenced from an `UNSAFE_className` prop must now be wrapped in `@layer UNSAFE_overrides`. See [the docs](../styling.html##unsafe-style-overrides) for more details.
 * The `style` macro will now error if it is called without importing `with {type: 'macro'}`. Previously it would fail to apply styles silently. This should help with debugging.
 
-See the updated [API changelog](https://github.com/adobe/react-spectrum/blob/main/packages/@react-spectrum/s2/api-diff.md) for a full list of changes since RSP v3.
+See the updated [API changelog](../migrating.html) for a full list of changes since RSP v3.
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 c9ac78717f5..e84e0e4ac82 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
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'July 23, 2025';
 export const title = 'v0.10.0';
@@ -29,7 +29,7 @@ Version 0.10.0 introduces a new font for Spectrum 2: Adobe Clean Spectrum VF, al
 
 This release introduces a new font for Spectrum 2: Adobe Clean Spectrum VF. This is an evolution of the previous Adobe Clean, with slightly updated metrics allowing for better vertical centering. Along with this update, the S2 Provider component now automatically handles loading the fonts needed for the user's language. The new font does not affect previous versions of React Spectrum.
 
-If you previously used `page.css` without a `Provider`, you'll need to add a `Provider` around your app to load the fonts. See the [Intro](../index.html#setting-up-your-app) for details.
+If you previously used `page.css` without a `Provider`, you'll need to add a `Provider` around your app to load the fonts. See the [Getting Started](../getting-started.html#optimizing-full-page-apps) guide for details.
 
 ## New Components
 * [Calendar](../Calendar.html)
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 208dbe36f2d..0bde08723fe 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
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'August 26, 2025';
 export const title = 'v0.11.0';
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 e19dbee9f76..dae86e73d69 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
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'October 3, 2025';
 export const title = 'v0.12.0';
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 65c5fb09a76..a87bbb21d99 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
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'Jun 15, 2024';
 export const title = 'v0.2.0';
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 d0cbaadaaff..f0e3f0b7f6d 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
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'August 20, 2024';
 export const title = 'v0.3.0';
@@ -27,15 +27,15 @@ Version 0.3.0 introduces NumberField, AlertDialog, and Tabs components, along wi
 
 ## New components
 * [NumberField](../NumberField.html)
-* [AlertDialog](../AlertDialog.html)
-* [Linear and gradient illustrations](../illustrations.html)
+* [AlertDialog](../Dialog.html#alertdialog)
+* [Linear and gradient illustrations](../Illustrations.html)
 * [AvatarGroup](../AvatarGroup.html)
 * [Tabs](../Tabs.html)
 
 ## Updates
 * Add collapse and action support to TagGroup
 * Add support for new Adobe Clean variable font
-* Updated [workflow icons](../workflow-icons.html) – **PLEASE NOTE**: some icons changed names in this release.
+* Updated [workflow icons](../Icons.html) – **PLEASE NOTE**: some icons changed names in this release.
 * Add CLI and Parcel plugins to build custom icons and illustrations
 * Add translations for all components
 * Add slot contexts to all S2 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 ca143fbd0de..d2e5736544f 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
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'October 1, 2024';
 export const title = 'v0.4.0';
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 2e15435f135..54132579ec6 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
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'November 22, 2024';
 export const title = 'v0.5.0';
@@ -28,8 +28,8 @@ Version 0.5.0 includes major updates to Dialog and DialogTrigger APIs with four
 In this release we have updated our Dialog and DialogTrigger APIs to improve layout flexibility for custom dialogs and popovers. Dialog has been split into four components:
 
 * [Dialog](../Dialog.html) – a modal dialog with a standard layout with slots for the heading, content, hero image, button group, etc. This corresponds to the previous `type="modal"` API.
-* [FullscreenDialog](../FullscreenDialog.html) – a fullscreen or takeover modal, similar to a Dialog but with different slots and layout. This corresponds to the previous `type="fullscreen"` and `type="fullscreenTakeover"` APIs.
-* [CustomDialog](../Dialog.html#custom-dialog) – a modal dialog with a completely custom layout. It can have default padding or go edge-to-edge. No built-in slots are provided, the layout is entirely up to you.
+* [FullscreenDialog](../Dialog.html#fullscreendialog) – a fullscreen or takeover modal, similar to a Dialog but with different slots and layout. This corresponds to the previous `type="fullscreen"` and `type="fullscreenTakeover"` APIs.
+* [CustomDialog](../Dialog.html#customdialog) – a modal dialog with a completely custom layout. It can have default padding or go edge-to-edge. No built-in slots are provided, the layout is entirely up to you.
 * [Popover](../Popover.html) – Popovers no longer support the previous dialog-style layout, which was rarely needed in recent apps. In addition, popover now has a reduced amount of padding by default, which was a common request.
 
 In addition, several DialogTrigger props have moved to the above children:
@@ -40,16 +40,16 @@ In addition, several DialogTrigger props have moved to the above children:
 * `hideArrow`, `offset`, `crossOffset`, `containerPadding`, `placement`, and `shouldFlip` moved to Popover
 
 We've also continued to iterate on developer experience based on your feedback. Documentation on style macro usage with regards to
-[colors](?path=/docs/style-macro--docs#colors) and [typography](?path=/docs/style-macro--docs#typography) have been added to help clarify
-these common use cases. Style macro properties like `width` and `height` now allow for arbitrary pixel size values, please see the [docs](?path=/docs/style-macro--docs#sizing)
-for more information. Finally, documentation on [optimizing CSS bundling](?path=/docs/style-macro--docs#css-optimization) have also been
+[colors](../styling.html#colors) and [typography](../styling.html#typography) have been added to help clarify
+these common use cases. Style macro properties like `width` and `height` now allow for arbitrary pixel size values, please see the [docs](../styling.html#sizing)
+for more information. Finally, documentation on [optimizing CSS bundling](../styling.html#css-optimization) have also been
 added to help you generate a properly optimized output when using the bundler of your choice.
 
 ## New components
 * [ActionButtonGroup](../ActionButtonGroup.html)
-* [CloseButton](../Dialog.html#custom-dialog)
-* [CustomDialog](../Dialog.html#custom-dialog)
-* [FullscreenDialog](../FullscreenDialog.html)
+* [CloseButton](../Dialog.html#customdialog)
+* [CustomDialog](../Dialog.html#customdialog)
+* [FullscreenDialog](../Dialog.html#fullscreendialog)
 * [Popover](../Popover.html)
 * [ToggleButtonGroup](../ToggleButtonGroup.html)
 
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 a1a0b5f10e3..5eb4694e54c 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
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'January 16, 2025';
 export const title = 'v0.6.0';
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 99a346095ce..927d386d794 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
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'March 7, 2025';
 export const title = 'v0.7.0';
@@ -45,6 +45,6 @@ Version 0.7.0 introduces the TreeView component and includes important CSS updat
 
 In this release, we have made significant changes to the way our Style Macro generates CSS in order to fix issues with Safari. The Style Macro uses [CSS Cascade Layers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers) to avoid CSS specificity and ordering issues. However, this means global CSS declared outside a `@layer`, such as CSS resets, will take precedence over S2's CSS. To avoid this, we previously used [all: revert-layer](https://developer.mozilla.org/en-US/docs/Web/CSS/revert-layer). Unfortunately, due to numerous bugs in Safari 18, this caused rendering issues in our components.
 
-To fix these Safari issues, we have removed `all: revert-layer` in this release. This means that global CSS will now take precedence over S2's styles. **If you are using a CSS reset on the same page as S2 components, you will need to remove it** or put it in a `@layer` of its own. See the [Intro](../index.html#css-resets) for more information.
+To fix these Safari issues, we have removed `all: revert-layer` in this release. This means that global CSS will now take precedence over S2's styles. **If you are using a CSS reset on the same page as S2 components, you will need to remove it** or put it in a `@layer` of its own. See the [Getting Started](../styling.html#css-resets) guide for more information.
 
 **If you are using a version older than React Spectrum v3 on the same page, you must update to the latest version.** See the Adobe internal documentation for more details.
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 4a51bf16c81..d69477881d1 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
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'April 12, 2025';
 export const title = 'v0.8.0';
@@ -26,7 +26,7 @@ export const isSubpage = true;
 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.
 
 ## New Components
-* [NotificationBadge](../ActionButton.html#notification-badges)
+* [NotificationBadge](../ActionButton.html)
 * [Toast](../Toast.html) (alpha)
 
 ## Updates
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 c69a8e32380..ef617545fe0 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
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'May 20, 2025';
 export const title = 'v0.9.0';
@@ -37,7 +37,7 @@ Version 0.9.0 adds virtualization and async loading support to ComboBox and Pick
 
 Style macros passed to `UNSAFE_className` will now result in a TypeScript error. This is not allowed because `UNSAFE_className` is appended to the component's own styles, not merged. For example, if you pass a style macro class that sets a property but the component also has a class setting the same property, both will be applied and result in undefined behavior depending on the order the CSS was loaded on the page.
 
-We strongly discourage using `UNSAFE_className` because it results in inconsistent UIs and hard to maintain code. Instead, use [React Aria Components](https://react-spectrum.adobe.com/react-aria/index.html) with the [S2 style macro](https://react-spectrum.adobe.com/s2/index.html?path=/docs/style-macro--docs) to create custom components. [Safe style properties](../index.html#styling) can be passed to the `styles` prop of an S2 component.
+We strongly discourage using `UNSAFE_className` because it results in inconsistent UIs and hard to maintain code. Instead, use [React Aria Components](https://react-spectrum.adobe.com/react-aria/index.html) with the [S2 style macro](../styling.html#style-macro) to create custom components. [Safe style properties](../styling.html#values) can be passed to the `styles` prop of an S2 component.
 
 
 ## 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 a20daf88181..90f6222d9f0 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
@@ -13,7 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
-export const section = '';
+export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'June 6, 2025';
 export const title = 'v0.9.1';
diff --git a/packages/dev/s2-docs/src/CodePlatter.tsx b/packages/dev/s2-docs/src/CodePlatter.tsx
index 6369f95b2bd..f6394b6511a 100644
--- a/packages/dev/s2-docs/src/CodePlatter.tsx
+++ b/packages/dev/s2-docs/src/CodePlatter.tsx
@@ -82,7 +82,7 @@ export function CodePlatter({children, shareUrl, files, type, registryUrl, showC
               <Tooltip>Open in…</Tooltip>
             </TooltipTrigger>
             <Menu hideLinkOutIcon>
-              {shareUrl && 
+              {shareUrl &&
                 <MenuItem
                   onAction={() => {
                     // Find previous heading element to get hash.
@@ -103,7 +103,7 @@ export function CodePlatter({children, shareUrl, files, type, registryUrl, showC
                   <Text slot="label">Copy link</Text>
                 </MenuItem>
               }
-              {(files || type) && 
+              {(files || type) &&
                 <MenuItem
                   onAction={() => {
                     let code = codeRef.current!.querySelector('pre')!.textContent!;
@@ -132,13 +132,13 @@ export function CodePlatter({children, shareUrl, files, type, registryUrl, showC
                   <Text slot="label">Download ZIP</Text>
                 </MenuItem>
               }
-              {registryUrl && 
+              {registryUrl &&
                 <MenuItem onAction={() => setShowShadcn(true)}>
                   <Prompt />
                   <Text>Install with shadcn</Text>
                 </MenuItem>
               }
-              {(files || type) && 
+              {(files || type) &&
                 <MenuItem
                   onAction={() => {
                     let code = codeRef.current!.querySelector('pre')!.textContent!;
@@ -151,7 +151,7 @@ export function CodePlatter({children, shareUrl, files, type, registryUrl, showC
                   <Text slot="label">Open in CodeSandbox</Text>
                 </MenuItem>
               }
-              {(files || type) && type !== 's2' && 
+              {(files || type) && type !== 's2' &&
                 <MenuItem
                   onAction={() => {
                     let code = codeRef.current!.querySelector('pre')!.textContent!;
@@ -164,8 +164,8 @@ export function CodePlatter({children, shareUrl, files, type, registryUrl, showC
                   <Text slot="label">Open in StackBlitz</Text>
                 </MenuItem>
               }
-              {registryUrl && 
-                <MenuItem 
+              {registryUrl &&
+                <MenuItem
                   href={`https://v0.dev/chat/api/open?url=${registryUrl}`}
                   target="_blank"
                   rel="noopener noreferrer">
@@ -177,7 +177,7 @@ export function CodePlatter({children, shareUrl, files, type, registryUrl, showC
           </MenuTrigger>}
         </ActionButtonGroup>
       </Toolbar>
-      <div ref={codeRef}> 
+      <div ref={codeRef}>
         {children}
       </div>
       <DialogContainer onDismiss={() => setShowShadcn(false)}>
@@ -200,7 +200,8 @@ const pre = style({
   paddingEnd: '--code-padding-end',
   paddingY: '--code-padding-y',
   width: 'fit',
-  minWidth: 'full'
+  minWidth: 'full',
+  boxSizing: 'border-box'
 });
 
 export function Pre({children}) {
@@ -238,7 +239,7 @@ const V0 = createIcon(props => (
     <path
       d="M13.7688 19.0956L0 3.68759H5.53933L13.6231 12.7337V3.68759H17.7535V17.5746C17.7535 19.6705 15.1654 20.6584 13.7688 19.0956Z"
       fill="var(--iconPrimary)" />
-  </svg> 
+  </svg>
 ));
 
 const Flash = createIcon(props => (
diff --git a/packages/dev/s2-docs/src/GoUpOneLink.tsx b/packages/dev/s2-docs/src/GoUpOneLink.tsx
deleted file mode 100644
index ed439e732f3..00000000000
--- a/packages/dev/s2-docs/src/GoUpOneLink.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-'use client';
-
-import {baseColor, focusRing, fontRelative, style} from '@react-spectrum/s2/style' with { type: 'macro' };
-import {ButtonRenderProps, Link, Provider} from 'react-aria-components';
-import {centerBaseline} from '../../../@react-spectrum/s2/src/CenterBaseline';
-import ChevronLeftIcon from '@react-spectrum/s2/icons/ChevronLeft';
-import {IconContext} from '@react-spectrum/s2';
-import {pressScale} from '../../../@react-spectrum/s2/src/pressScale';
-import React, {useRef} from 'react';
-
-
-export const btnStyles = style<Omit<ButtonRenderProps, 'isPending'>>({
-  ...focusRing(),
-  borderRadius: 'default',
-  position: 'relative',
-  justifyContent: 'center',
-  flexShrink: 0,
-  fontWeight: 'medium',
-  userSelect: 'none',
-  transition: 'default',
-  forcedColorAdjust: 'none',
-  backgroundColor: {
-    default: 'transparent',
-    forcedColors: {
-      default: 'ButtonFace'
-    }
-  },
-  color: {
-    default: baseColor('neutral'),
-    isDisabled: 'disabled',
-    forcedColors: {
-      default: 'ButtonText',
-      isDisabled: {
-        default: 'GrayText'
-      }
-    }
-  },
-  '--iconPrimary': {
-    type: 'fill',
-    value: 'currentColor'
-  },
-  outlineColor: {
-    default: 'focus-ring',
-    forcedColors: 'Highlight'
-  },
-  borderStyle: 'none',
-  disableTapHighlight: true,
-  '--iconWidth': {
-    type: 'width',
-    value: fontRelative(20)
-  }
-});
-
-export function GoUpOneLink() {
-  let ref = useRef(null);
-  // How to add aria-label to the Link component
-  return (
-    <Link href="./index.html" className={btnStyles} style={pressScale(ref)} ref={ref} aria-label="Go to all releases">
-      <Provider
-        values={[
-          [IconContext, {
-            render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
-            styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
-          }]
-        ]}>
-        <ChevronLeftIcon />
-      </Provider>
-    </Link>
-  );
-}
diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx
index 7608a89d3f1..6f949230edd 100644
--- a/packages/dev/s2-docs/src/Layout.tsx
+++ b/packages/dev/s2-docs/src/Layout.tsx
@@ -9,6 +9,7 @@ import internationalizedFavicon from 'url:../assets/internationalized.ico';
 // @ts-ignore
 import reactAriaFavicon from 'url:../assets/react-aria.ico';
 import './anatomy.css';
+import ChevronRightIcon from '@react-spectrum/s2/icons/ChevronRight';
 import {ClassAPI} from './ClassAPI';
 import {Code} from './Code';
 import {CodeBlock} from './CodeBlock';
@@ -16,15 +17,14 @@ import {CodePlatterProvider} from './CodePlatter';
 import {ExampleSwitcher} from './ExampleSwitcher';
 import {getLibraryFromPage, getLibraryFromUrl, getLibraryLabel} from './library';
 import {getTextWidth} from './textWidth';
-import {GoUpOneLink} from './GoUpOneLink';
 import {H2, H3, H4} from './Headings';
 import Header from './Header';
-import {Link} from './Link';
+import {iconStyle, style} from '@react-spectrum/s2/style' with {type: 'macro'};
+import {Link, TitleLink} from './Link';
 import {MobileHeader} from './MobileHeader';
 import {PickerItem, Provider} from '@react-spectrum/s2';
 import {PropTable} from './PropTable';
 import {StateTable} from './StateTable';
-import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {TypeLink} from './types';
 import {VersionBadge} from './VersionBadge';
 import {VisualExample} from './VisualExample';
@@ -64,15 +64,18 @@ const components = {
   ExampleList
 };
 
-const subPageComponents = {
+const subPageComponents = (previousPage?: Page) => ({
   ...components,
   h1: ({children, ...props}) => (
-    <div className={style({display: 'flex', alignItems: 'center', gap: 8})}>
-      <GoUpOneLink />
+    <div className={style({display: 'flex', flexDirection: 'column', gap: 4})}>
+      <div className={style({display: 'flex', alignItems: 'center', gap: 8})}>
+        <TitleLink href="./index.html">{previousPage?.exports?.title}</TitleLink>
+        <ChevronRightIcon styles={iconStyle({size: 'M'})} />
+      </div>
       <h1 {...props} id="top" style={{'--width-per-em': getTextWidth(children)} as any} className={h1}>{children}</h1>
     </div>
   )
-};
+});
 
 function anchorId(children) {
   return children.replace(/\s/g, '-').replace(/[^a-zA-Z0-9-_]/g, '').toLowerCase();
@@ -145,6 +148,9 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
   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');
+  });
   return (
     <Provider elementType="html" locale="en" background="layer-1" styles={style({scrollPaddingTop: {default: 64, lg: 0}})}>
       <head>
@@ -255,7 +261,12 @@ export function Layout(props: PageProps & {children: ReactElement<any>}) {
                 <article
                   className={articleStyles({isWithToC: hasToC})}>
                   {currentPage.exports?.version && <VersionBadge version={currentPage.exports.version} />}
-                  {React.cloneElement(children, {components: isSubpage ? subPageComponents : components, pages})}
+                  {React.cloneElement(children, {
+                    components: isSubpage ?
+                      subPageComponents(parentPage) :
+                      components,
+                    pages
+                  })}
                 </article>
               </CodePlatterProvider>
               {hasToC && <aside
diff --git a/packages/dev/s2-docs/src/Link.tsx b/packages/dev/s2-docs/src/Link.tsx
index bc01c956c13..ff65db5cb15 100644
--- a/packages/dev/s2-docs/src/Link.tsx
+++ b/packages/dev/s2-docs/src/Link.tsx
@@ -47,3 +47,22 @@ export function ColorLink({type, ...props}: RACLinkProps & {type?: 'keyword' | '
 export function CodeLink(props: RACLinkProps) {
   return <RACLink {...props} style={({isHovered}) => ({textDecorationStyle: isHovered ? 'solid' : 'dotted'})} />;
 }
+
+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'
+  },
+  marginY: 0,
+  color: {
+    default: 'heading',
+    forcedColors: 'LinkText'
+  }
+});
+
+export function TitleLink(props: RACLinkProps) {
+  return <RACLink {...props} className={titleLink} />;
+}
diff --git a/packages/dev/s2-docs/src/Nav.tsx b/packages/dev/s2-docs/src/Nav.tsx
index d702a510a4c..e77f6553e37 100644
--- a/packages/dev/s2-docs/src/Nav.tsx
+++ b/packages/dev/s2-docs/src/Nav.tsx
@@ -75,6 +75,7 @@ export function Nav({pages, currentPage}: PageProps) {
                 }
                 return title(a).localeCompare(title(b));
               })
+              .filter(page => !page.exports?.isSubpage)
               .map(page => (
                 <SideNavItem key={page.url}><SideNavLink href={page.url} isSelected={page.url === currentPage.url}>{title(page)}</SideNavLink></SideNavItem>
             ))}
diff --git a/packages/dev/s2-docs/src/SearchMenu.tsx b/packages/dev/s2-docs/src/SearchMenu.tsx
index 6e735004f03..ca318efed42 100644
--- a/packages/dev/s2-docs/src/SearchMenu.tsx
+++ b/packages/dev/s2-docs/src/SearchMenu.tsx
@@ -98,14 +98,15 @@ export function SearchMenu(props: SearchMenuProps) {
         const section: string = (page.exports?.section as string) || 'Components';
         const tags: string[] = (page.exports?.tags || page.exports?.keywords as string[]) || [];
         const description: string = page.exports?.description;
-
+        const date: string | undefined = page.exports?.date;
         return {
           id: name,
           name: title,
           href: page.url,
           section,
           tags,
-          description
+          description,
+          date
         };
       });
 
@@ -186,32 +187,42 @@ export function SearchMenu(props: SearchMenuProps) {
 
     const searchLower = searchValue.toLowerCase();
     const allItems = sections.flatMap(section => section.children);
-    
+
     // Filter items where name or tags start with search value
     const matchedItems = allItems.filter(item => {
       const nameMatch = item.name.toLowerCase().startsWith(searchLower);
       const tagMatch = item.tags.some(tag => tag.toLowerCase().startsWith(searchLower));
       return nameMatch || tagMatch;
     });
-    
+
     // Sort to prioritize name matches over tag matches
     const sortedItems = matchedItems.sort((a, b) => {
       const aNameMatch = a.name.toLowerCase().startsWith(searchLower);
       const bNameMatch = b.name.toLowerCase().startsWith(searchLower);
-      
+
+      if (a.date && b.date) {
+        let aDate = new Date(a.date);
+        let bDate = new Date(b.date);
+        return bDate.getTime() - aDate.getTime();
+      } else if (a.date && !b.date) {
+        return 1;
+      } else if (!a.date && b.date) {
+        return -1;
+      }
+
       if (aNameMatch && !bNameMatch) {
         return -1;
       }
       if (!aNameMatch && bNameMatch) {
         return 1;
       }
-      
+
       // If both match by name or both match by tag, maintain original order
       return 0;
     });
-    
+
     const resultsBySection = new Map<string, typeof transformedComponents>();
-    
+
     sortedItems.forEach(item => {
       const section = item.section || 'Components';
       if (!resultsBySection.has(section)) {
@@ -272,13 +283,23 @@ export function SearchMenu(props: SearchMenuProps) {
     } else {
       items = (filteredComponents.find(s => s.id === selectedSectionId)?.children) || [];
     }
-    
+
     // Sort to show "Introduction" first when search is empty
     if (searchValue.trim().length === 0) {
       items = [...items].sort((a, b) => {
         const aIsIntro = a.name === 'Introduction';
         const bIsIntro = b.name === 'Introduction';
-        
+
+        if (a.date && b.date) {
+          let aDate = new Date(a.date);
+          let bDate = new Date(b.date);
+          return bDate.getTime() - aDate.getTime();
+        } else if (a.date && !b.date) {
+          return 1;
+        } else if (!a.date && b.date) {
+          return -1;
+        }
+
         if (aIsIntro && !bIsIntro) {
           return -1;
         }
@@ -288,7 +309,7 @@ export function SearchMenu(props: SearchMenuProps) {
         return 0;
       });
     }
-    
+
     return items;
   }, [filteredComponents, selectedSectionId, searchValue]);
 

From 5658d9db7e3b8d42e4f95bfb48cad97028b3a20c Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Tue, 4 Nov 2025 14:47:15 -0800
Subject: [PATCH 4/5] docs: add S2 provider docs (#9140)

* docs: add s2 provider docs

* fixes

* review comments
---
 packages/@react-spectrum/s2/src/Provider.tsx |  4 +
 packages/dev/s2-docs/pages/s2/Provider.mdx   | 92 ++++++++++++++++++++
 2 files changed, 96 insertions(+)
 create mode 100644 packages/dev/s2-docs/pages/s2/Provider.mdx

diff --git a/packages/@react-spectrum/s2/src/Provider.tsx b/packages/@react-spectrum/s2/src/Provider.tsx
index a17ab40fe55..b1c34d198c4 100644
--- a/packages/@react-spectrum/s2/src/Provider.tsx
+++ b/packages/@react-spectrum/s2/src/Provider.tsx
@@ -51,6 +51,10 @@ export interface ProviderProps extends UnsafeStyles {
 
 export const ColorSchemeContext = createContext<ColorScheme | 'light dark' | null>(null);
 
+/**
+ * Provider is the container for all React Spectrum components.
+ * It loads the font and sets the colorScheme, locale, and other application level settings.
+ */
 export function Provider(props: ProviderProps): JSX.Element {
   let result = <ProviderInner {...props} />;
   let parentColorScheme = useContext(ColorSchemeContext);
diff --git a/packages/dev/s2-docs/pages/s2/Provider.mdx b/packages/dev/s2-docs/pages/s2/Provider.mdx
new file mode 100644
index 00000000000..0ffed21ada1
--- /dev/null
+++ b/packages/dev/s2-docs/pages/s2/Provider.mdx
@@ -0,0 +1,92 @@
+import {Layout} from '../../src/Layout';
+import {InstallCommand} from '../../src/InstallCommand';
+import {BundlerSwitcher, BundlerSwitcherItem} from '../../src/BundlerSwitcher';
+export default Layout;
+import {SegmentedControl, SegmentedControlItem} from '@react-spectrum/s2';
+
+export const section = 'Getting started';
+export const description = 'Getting started with React Spectrum';
+import docs from 'docs:@react-spectrum/s2';
+
+# Provider
+
+<PageDescription>{docs.exports.Provider.description}</PageDescription>
+
+## Example
+
+```tsx render
+'use client';
+import {Provider} from '@react-spectrum/s2';
+import {Button} from '@react-spectrum/s2';
+
+function App() {
+  return (
+    <Provider background='base'>
+      <Button variant="accent">
+        Hello React Spectrum!
+      </Button>
+    </Provider>
+  );
+}
+```
+
+## Color Schemes
+By default, React Spectrum follows the operating system color scheme setting, supporting both light and dark mode. The colorScheme prop can be set on `<Provider>` to force the app to always render in a certain color scheme.
+
+```tsx render
+'use client';
+import {Provider} from '@react-spectrum/s2';
+import {ActionButton} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+<div className={style({display: 'flex', gap: 12})}>
+  <Provider colorScheme="light">
+    <div className={style({backgroundColor: 'base', padding: 12})}>
+      <ActionButton>I'm a light button</ActionButton>
+    </div>
+  </Provider>
+  <Provider colorScheme="dark">
+    <div className={style({backgroundColor: 'elevated', padding: 12})}>
+      <ActionButton>I'm a dark button</ActionButton>
+    </div>
+  </Provider>
+</div>
+```
+
+## Locales
+By default, React Spectrum chooses the locale matching the user’s browser/operating system language, but this can be overridden with the locale prop if you have an application specific setting. This prop accepts a [BCP 47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code. A list of supported locales is available [here](Concepts.html#supported-locales)
+
+```tsx
+<Provider locale="en-US">
+  <YourApp />
+</Provider>
+```
+
+{/* ### Breakpoints */}
+{/* TODO: Link to style macro docs about breakpoints */}
+
+## Client side routing
+
+The Provider component accepts an optional `router` prop. This enables React Spectrum components that render links to perform client side navigation using your application or framework's client side router. See the client side routing guide for details on how to set this up.
+
+```tsx
+let navigate = useNavigateFromYourRouter();
+
+<Provider router={{navigate}}>
+  <YourApp />
+</Provider>
+```
+
+## Server side rendering 
+
+When using SSR, the `<Provider>` component can be rendered as the root `<html>` element. The `locale` prop should always be specified to avoid hydration errors.
+
+```tsx
+<Provider elementType="html" locale="en-US">
+  <YourApp />
+</Provider>
+```
+
+## Props
+
+<PropTable component={docs.exports.Provider} links={docs.links} />

From 860b46c56f16b65aa416d58d061d93e1e7b7bf60 Mon Sep 17 00:00:00 2001
From: Robert Snow <rsnow@adobe.com>
Date: Wed, 5 Nov 2025 09:53:15 +1100
Subject: [PATCH 5/5] fix: spacing in new docs (#9134)

---
 packages/dev/s2-docs/pages/react-aria/releases/v1-11-0.mdx | 1 -
 packages/dev/s2-docs/pages/react-aria/releases/v1-4-0.mdx  | 1 -
 packages/dev/s2-docs/pages/react-aria/releases/v1-5-0.mdx  | 1 -
 3 files changed, 3 deletions(-)

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 ca8b19424cc..ef64f6450e4 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
@@ -99,7 +99,6 @@ As always, thanks so much to everyone who contributed to this release!
   * Fix dragging a root item after itself - [@chirokas](https://github.com/chirokas) - [PR](https://github.com/adobe/react-spectrum/pull/8436)
   * Fix reordering top-level items via drag and drop - [@reidbarber](https://github.com/reidbarber) - [PR](https://github.com/adobe/react-spectrum/pull/8563)
 
-
 ## Released packages
 
 ```json
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 093c0517ae9..5e866a359d4 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
@@ -85,7 +85,6 @@ Huge thanks as always to everyone who contributed to this release! 😍
   - Add DisclosureGroup component to RAC - [@devongovett](https://github.com/devongovett) - [PR](https://github.com/adobe/react-spectrum/pull/7063)
   - Add basic docs for DisclosureGroup, Disclosure - [@devongovett](https://github.com/devongovett) - [PR](https://github.com/adobe/react-spectrum/pull/7071)
 
-
 ## Released packages
 
 ```json
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 ea80ffd5d56..623580b8129 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
@@ -95,7 +95,6 @@ React Aria is now [Typescript Strict](https://www.typescriptlang.org/tsconfig/#s
 - Fix Tailwind starter `Submenu` - [@reidbarber](https://github.com/reidbarber) - [PR](https://github.com/adobe/react-spectrum/pull/7251)
 - Fix disabled `Tag` styles in RAC Tailwind starter - [@steveoh](https://github.com/steveoh) - [PR](https://github.com/adobe/react-spectrum/pull/7247)
 
-
 ## Released packages
 
 ```json