From 4dbaab76b694f1f90893c593f3aaf94163bdcfd4 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 1 Dec 2025 17:50:21 -0800
Subject: [PATCH 01/49] Fix escape key and restoring focus

---
 packages/dev/s2-docs/src/ComponentCardView.tsx |  1 +
 packages/dev/s2-docs/src/SearchMenuTrigger.tsx | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/dev/s2-docs/src/ComponentCardView.tsx b/packages/dev/s2-docs/src/ComponentCardView.tsx
index d8b106d5500..07eec383ff6 100644
--- a/packages/dev/s2-docs/src/ComponentCardView.tsx
+++ b/packages/dev/s2-docs/src/ComponentCardView.tsx
@@ -34,6 +34,7 @@ export function ComponentCardView({items, ariaLabel = 'Items', size = 'S', curre
         linkBehavior="override"
         autoFocus={!!currentUrl}
         selectedKeys={currentUrl ? [currentUrl] : []}
+        disallowEmptySelection
         onAction={onAction}
         className={style({
           display: {
diff --git a/packages/dev/s2-docs/src/SearchMenuTrigger.tsx b/packages/dev/s2-docs/src/SearchMenuTrigger.tsx
index 5dc81b81e30..ac53eabd62d 100644
--- a/packages/dev/s2-docs/src/SearchMenuTrigger.tsx
+++ b/packages/dev/s2-docs/src/SearchMenuTrigger.tsx
@@ -3,7 +3,7 @@
 import {Button, ButtonProps, Modal, ModalOverlay} from 'react-aria-components';
 import {fontRelative, style} from '@react-spectrum/s2/style' with { type: 'macro' };
 import {getLibraryFromPage, getLibraryLabel} from './library';
-import React, {CSSProperties, lazy, useCallback, useEffect, useState} from 'react';
+import React, {CSSProperties, lazy, useCallback, useEffect, useRef, useState} from 'react';
 import Search from '@react-spectrum/s2/icons/Search';
 import {useRouter} from './Router';
 
@@ -113,6 +113,17 @@ export default function SearchMenuTrigger({onOpen, onClose, isSearchOpen, overla
   if (isSearchOpen && !wasOpen) {
     setWasOpen(true);
   }
+
+  // Manually restore focus to the trigger when search menu closes, since we don't actually unmount.
+  let buttonRef = useRef<HTMLButtonElement | null>(null);
+  let isOpenRef = useRef(isSearchOpen);
+  useEffect(() => {
+    if (!isSearchOpen && isOpenRef.current && buttonRef.current) {
+      buttonRef.current.focus({preventScroll: true});
+    }
+
+    isOpenRef.current = isSearchOpen;
+  }, [isSearchOpen]);
     
   return (
     <div
@@ -124,6 +135,7 @@ export default function SearchMenuTrigger({onOpen, onClose, isSearchOpen, overla
       })}>
       <Button
         {...props}
+        ref={buttonRef}
         aria-label="Open search and menu"
         aria-expanded={isSearchOpen}
         aria-controls={isSearchOpen ? overlayId : undefined}

From 407e31d15daaa20baf0c8cd16aef4cbf5c2bd105 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 1 Dec 2025 17:50:45 -0800
Subject: [PATCH 02/49] Virtual focus listbox items should not be tabbable

Even if they are rendered as links
---
 packages/react-aria-components/src/ListBox.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/react-aria-components/src/ListBox.tsx b/packages/react-aria-components/src/ListBox.tsx
index 636b0141c43..3afc7c67825 100644
--- a/packages/react-aria-components/src/ListBox.tsx
+++ b/packages/react-aria-components/src/ListBox.tsx
@@ -420,6 +420,10 @@ export const ListBoxItem = /*#__PURE__*/ createLeafComponent(ItemNode, function
   delete DOMProps.id;
   delete DOMProps.onClick;
 
+  if (ElementType === 'a' && optionProps.tabIndex == null) {
+    optionProps.tabIndex = -1;
+  }
+
   return (
     <ElementType
       {...mergeProps(DOMProps, renderProps, optionProps, hoverProps, draggableItem?.dragProps, droppableItem?.dropProps)}

From 058d4166fd614c2f6043cff239a2640ae0758191 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 1 Dec 2025 17:58:07 -0800
Subject: [PATCH 03/49] Improve view transition on android

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

diff --git a/packages/dev/s2-docs/src/MobileHeader.tsx b/packages/dev/s2-docs/src/MobileHeader.tsx
index 36757e656d5..e11a12d2914 100644
--- a/packages/dev/s2-docs/src/MobileHeader.tsx
+++ b/packages/dev/s2-docs/src/MobileHeader.tsx
@@ -216,7 +216,8 @@ export function MobileHeader({toc}) {
               animationName: fadeOut,
               animationTimeline: 'scroll()',
               animationRange,
-              animationPlayState: isTransitioning ? 'paused' : undefined
+              animationPlayState: isTransitioning ? 'paused' : undefined,
+              display: isOpen ? 'none' : undefined
             } as CSSProperties : undefined}>
             {TAB_DEFS[library].label}
           </span>

From 6bdc57382c55e8e06c401d35429ceac65c851b45 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 1 Dec 2025 18:57:59 -0800
Subject: [PATCH 04/49] Fix autocomplete focusing input on autofocus

---
 .../autocomplete/src/useAutocomplete.ts       | 18 +-----
 .../@react-aria/interactions/src/index.ts     |  1 +
 .../interactions/src/useFocusVisible.ts       | 12 ++++
 .../@react-aria/test-utils/src/testSetup.ts   | 58 ++++++++++---------
 .../test/Autocomplete.test.tsx                |  6 +-
 .../test/installPointerEvent.tsx              |  4 ++
 6 files changed, 52 insertions(+), 47 deletions(-)
 create mode 100644 packages/react-aria-components/test/installPointerEvent.tsx

diff --git a/packages/@react-aria/autocomplete/src/useAutocomplete.ts b/packages/@react-aria/autocomplete/src/useAutocomplete.ts
index 3abaafd6413..291cd9065bb 100644
--- a/packages/@react-aria/autocomplete/src/useAutocomplete.ts
+++ b/packages/@react-aria/autocomplete/src/useAutocomplete.ts
@@ -15,7 +15,7 @@ import {AriaTextFieldProps} from '@react-aria/textfield';
 import {AutocompleteProps, AutocompleteState} from '@react-stately/autocomplete';
 import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, getActiveElement, getOwnerDocument, isAndroid, isCtrlKeyPressed, isIOS, mergeProps, mergeRefs, useEffectEvent, useEvent, useId, useLabels, useLayoutEffect, useObjectRef} from '@react-aria/utils';
 import {dispatchVirtualBlur, dispatchVirtualFocus, getVirtuallyFocusedElement, moveVirtualFocus} from '@react-aria/focus';
-import {getInteractionModality} from '@react-aria/interactions';
+import {getInteractionModality, getPointerType} from '@react-aria/interactions';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {FocusEvent as ReactFocusEvent, KeyboardEvent as ReactKeyboardEvent, useCallback, useEffect, useMemo, useRef, useState} from 'react';
@@ -92,7 +92,6 @@ export function useAutocomplete<T>(props: AriaAutocompleteOptions<T>, state: Aut
   let timeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   let delayNextActiveDescendant = useRef(false);
   let queuedActiveDescendant = useRef<string | null>(null);
-  let lastPointerType = useRef<string | null>(null);
 
   // For mobile screen readers, we don't want virtual focus, instead opting to disable FocusScope's restoreFocus and manually
   // moving focus back to the subtriggers
@@ -106,23 +105,10 @@ export function useAutocomplete<T>(props: AriaAutocompleteOptions<T>, state: Aut
     return () => clearTimeout(timeout.current);
   }, []);
 
-  useEffect(() => {
-    let handlePointerDown = (e: PointerEvent) => {
-      lastPointerType.current = e.pointerType;
-    };
-
-    if (typeof PointerEvent !== 'undefined') {
-      document.addEventListener('pointerdown', handlePointerDown, true);
-      return () => {
-        document.removeEventListener('pointerdown', handlePointerDown, true);
-      };
-    }
-  }, []);
-
   let updateActiveDescendantEvent = useEffectEvent((e: Event) => {
     // Ensure input is focused if the user clicks on the collection directly.
     // don't trigger on touch so that mobile keyboard doesnt appear when tapping on options
-    if (!e.isTrusted && shouldUseVirtualFocus && inputRef.current && getActiveElement(getOwnerDocument(inputRef.current)) !== inputRef.current && lastPointerType.current !== 'touch') {
+    if (!e.isTrusted && shouldUseVirtualFocus && inputRef.current && getActiveElement(getOwnerDocument(inputRef.current)) !== inputRef.current && getPointerType() !== 'touch') {
       inputRef.current.focus();
     }
 
diff --git a/packages/@react-aria/interactions/src/index.ts b/packages/@react-aria/interactions/src/index.ts
index 2a7a3891ea4..4e56054350a 100644
--- a/packages/@react-aria/interactions/src/index.ts
+++ b/packages/@react-aria/interactions/src/index.ts
@@ -17,6 +17,7 @@ export {
   isFocusVisible,
   getInteractionModality,
   setInteractionModality,
+  getPointerType,
   addWindowFocusTracking,
   useInteractionModality,
   useFocusVisible,
diff --git a/packages/@react-aria/interactions/src/useFocusVisible.ts b/packages/@react-aria/interactions/src/useFocusVisible.ts
index 45a93b86deb..80ac9c0940c 100644
--- a/packages/@react-aria/interactions/src/useFocusVisible.ts
+++ b/packages/@react-aria/interactions/src/useFocusVisible.ts
@@ -17,6 +17,7 @@
 
 import {getOwnerDocument, getOwnerWindow, isMac, isVirtualClick, openLink} from '@react-aria/utils';
 import {ignoreFocusEvent} from './utils';
+import {PointerType} from '@react-types/shared';
 import {useEffect, useState} from 'react';
 import {useIsSSR} from '@react-aria/ssr';
 
@@ -37,6 +38,7 @@ export interface FocusVisibleResult {
 }
 
 let currentModality: null | Modality = null;
+let currentPointerType: PointerType = 'keyboard';
 let changeHandlers = new Set<Handler>();
 interface GlobalListenerData {
   focus: () => void
@@ -70,12 +72,14 @@ function handleKeyboardEvent(e: KeyboardEvent) {
   hasEventBeforeFocus = true;
   if (!(openLink as any).isOpening && isValidKey(e)) {
     currentModality = 'keyboard';
+    currentPointerType = 'keyboard';
     triggerChangeHandlers('keyboard', e);
   }
 }
 
 function handlePointerEvent(e: PointerEvent | MouseEvent) {
   currentModality = 'pointer';
+  currentPointerType = 'pointerType' in e ? e.pointerType as PointerType : 'mouse';
   if (e.type === 'mousedown' || e.type === 'pointerdown') {
     hasEventBeforeFocus = true;
     triggerChangeHandlers('pointer', e);
@@ -86,6 +90,7 @@ function handleClickEvent(e: MouseEvent) {
   if (!(openLink as any).isOpening && isVirtualClick(e)) {
     hasEventBeforeFocus = true;
     currentModality = 'virtual';
+    currentPointerType = 'virtual';
   }
 }
 
@@ -101,6 +106,7 @@ function handleFocusEvent(e: FocusEvent) {
   // This occurs, for example, when navigating a form with the next/previous buttons on iOS.
   if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {
     currentModality = 'virtual';
+    currentPointerType = 'virtual';
     triggerChangeHandlers('virtual', e);
   }
 
@@ -249,9 +255,15 @@ export function getInteractionModality(): Modality | null {
 
 export function setInteractionModality(modality: Modality): void {
   currentModality = modality;
+  currentPointerType = modality === 'pointer' ? 'mouse' : modality;
   triggerChangeHandlers(modality, null);
 }
 
+/** @private */
+export function getPointerType(): PointerType {
+  return currentPointerType;
+}
+
 /**
  * Keeps state of the current modality.
  */
diff --git a/packages/@react-aria/test-utils/src/testSetup.ts b/packages/@react-aria/test-utils/src/testSetup.ts
index a2ce54f9408..7a031bec9a9 100644
--- a/packages/@react-aria/test-utils/src/testSetup.ts
+++ b/packages/@react-aria/test-utils/src/testSetup.ts
@@ -35,35 +35,37 @@ export function installMouseEvent(): void {
   });
 }
 
+export function definePointerEvent(): void {
+  // @ts-ignore
+  global.PointerEvent = class FakePointerEvent extends MouseEvent {
+    _init: {pageX: number, pageY: number, pointerType: string, pointerId: number, width: number, height: number};
+    constructor(name, init) {
+      super(name, init);
+      this._init = init;
+    }
+    get pointerType() {
+      return this._init.pointerType ?? 'mouse';
+    }
+    get pointerId() {
+      return this._init.pointerId;
+    }
+    get pageX() {
+      return this._init.pageX;
+    }
+    get pageY() {
+      return this._init.pageY;
+    }
+    get width() {
+      return this._init.width;
+    }
+    get height() {
+      return this._init.height;
+    }
+  };
+}
+
 export function installPointerEvent(): void {
-  beforeAll(() => {
-    // @ts-ignore
-    global.PointerEvent = class FakePointerEvent extends MouseEvent {
-      _init: {pageX: number, pageY: number, pointerType: string, pointerId: number, width: number, height: number};
-      constructor(name, init) {
-        super(name, init);
-        this._init = init;
-      }
-      get pointerType() {
-        return this._init.pointerType ?? 'mouse';
-      }
-      get pointerId() {
-        return this._init.pointerId;
-      }
-      get pageX() {
-        return this._init.pageX;
-      }
-      get pageY() {
-        return this._init.pageY;
-      }
-      get width() {
-        return this._init.width;
-      }
-      get height() {
-        return this._init.height;
-      }
-    };
-  });
+  beforeAll(definePointerEvent);
   afterAll(() => {
     // @ts-ignore
     delete global.PointerEvent;
diff --git a/packages/react-aria-components/test/Autocomplete.test.tsx b/packages/react-aria-components/test/Autocomplete.test.tsx
index c01bd62b6b2..e30cee9a5f1 100644
--- a/packages/react-aria-components/test/Autocomplete.test.tsx
+++ b/packages/react-aria-components/test/Autocomplete.test.tsx
@@ -10,7 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, installPointerEvent, pointerMap, render, within} from '@react-spectrum/test-utils-internal';
+import './installPointerEvent';
+import {act, pointerMap, render, within} from '@react-spectrum/test-utils-internal';
 import {AriaAutocompleteTests} from './AriaAutocomplete.test-util';
 import {Autocomplete, Breadcrumb, Breadcrumbs, Button, Cell, Collection, Column, Dialog, DialogTrigger, GridList, GridListItem, Header, Input, Label, ListBox, ListBoxItem, ListBoxLoadMoreItem, ListBoxSection, Menu, MenuItem, MenuSection, Popover, Row, SearchField, Select, SelectValue, Separator, SubmenuTrigger, Tab, Table, TableBody, TableHeader, TabList, TabPanel, Tabs, Tag, TagGroup, TagList, Text, TextField, Tree, TreeItem, TreeItemContent} from '..';
 import React, {ReactNode, useState} from 'react';
@@ -382,7 +383,6 @@ let CustomFiltering = ({autocompleteProps = {}, inputProps = {}, children}: {aut
 
 describe('Autocomplete', () => {
   let user;
-  installPointerEvent();
   beforeAll(() => {
     user = userEvent.setup({delay: null, pointerMap});
     jest.useFakeTimers();
@@ -655,7 +655,7 @@ describe('Autocomplete', () => {
     let options = within(menu).getAllByRole('menuitem');
     let foo = options[0];
 
-    await user.click(foo);
+    await user.pointer({target: foo, keys: '[MouseLeft]'});
     expect(document.activeElement).toBe(input);
   });
 
diff --git a/packages/react-aria-components/test/installPointerEvent.tsx b/packages/react-aria-components/test/installPointerEvent.tsx
new file mode 100644
index 00000000000..06a4c1f8f2d
--- /dev/null
+++ b/packages/react-aria-components/test/installPointerEvent.tsx
@@ -0,0 +1,4 @@
+import {definePointerEvent} from '../../@react-aria/test-utils/src/testSetup';
+
+// Define PointerEvent before all code runs by importing this file first.
+definePointerEvent();

From e725b6e0934c9281c27ca021a83f022abbe0f704 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 1 Dec 2025 20:09:12 -0800
Subject: [PATCH 05/49] Fix Autocomplete example

---
 packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx b/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx
index 8d7710cedcb..ebe93719fa9 100644
--- a/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx
@@ -122,7 +122,6 @@ Autocomplete filters a collection component using a [TextField](TextField) or [S
 import {Autocomplete, useFilter} from 'react-aria-components';
 import {MenuTrigger, Menu, MenuItem} from 'vanilla-starter/Menu';
 import {Button} from 'vanilla-starter/Button';
-import {Popover} from 'vanilla-starter/Popover';
 import {SearchField} from 'vanilla-starter/SearchField';
 
 function Example(props) {
@@ -131,7 +130,7 @@ function Example(props) {
   return (
     <MenuTrigger>
       <Button>Add tag...</Button>
-      <Popover style={{display: 'flex', flexDirection: 'column'}}>
+      <div style={{display: 'flex', flexDirection: 'column'}}>
         {/*- begin highlight -*/}
         <Autocomplete {...props}/* PROPS */ filter={contains}>
           <SearchField
@@ -152,7 +151,7 @@ function Example(props) {
             <MenuItem>Science</MenuItem>
           </Menu>
         </Autocomplete>
-      </Popover>
+      </div>
     </MenuTrigger>
   );
 }

From 9b7444036a8a9cdaa7be00d3a81bbcaa58dfa20e Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 1 Dec 2025 20:14:30 -0800
Subject: [PATCH 06/49] Show two columns of items in GridList on mobile

---
 starters/docs/src/GridList.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/starters/docs/src/GridList.css b/starters/docs/src/GridList.css
index 2799d11cfba..ad7596390a2 100644
--- a/starters/docs/src/GridList.css
+++ b/starters/docs/src/GridList.css
@@ -26,6 +26,13 @@
     --grid-item-size: 150px;
   }
 
+  @media (width < 500px) {
+    &[data-layout=grid] {
+      --grid-item-size: 150px;
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
   &[data-layout=stack] {
     grid-template-columns: auto;
     align-items: center;

From fbd755519661ed17f57eb866f10fe05e3c40abf3 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 1 Dec 2025 20:17:16 -0800
Subject: [PATCH 07/49] Fix Vanilla Checkbox disabled checkmark color

---
 starters/docs/src/Checkbox.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/starters/docs/src/Checkbox.css b/starters/docs/src/Checkbox.css
index b11495a1244..23b84a8d950 100644
--- a/starters/docs/src/Checkbox.css
+++ b/starters/docs/src/Checkbox.css
@@ -55,5 +55,6 @@
 
   &[data-disabled] {
     color: var(--text-color-disabled);
+    --checkmark-color: var(--text-color-disabled);
   }
 }

From f46521ae8ce6128fcfd1bda34a296350573e5deb Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 1 Dec 2025 21:20:38 -0800
Subject: [PATCH 08/49] RAC ColorPicker fixes

---
 starters/docs/src/ColorArea.css       |  5 +++--
 starters/docs/src/ColorPicker.css     |  1 +
 starters/docs/src/ColorSlider.css     | 11 ++++++-----
 starters/docs/src/ColorThumb.css      |  4 ++--
 starters/tailwind/src/ColorArea.tsx   |  2 +-
 starters/tailwind/src/ColorSlider.tsx |  4 ++--
 starters/tailwind/src/ColorThumb.tsx  |  2 +-
 7 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/starters/docs/src/ColorArea.css b/starters/docs/src/ColorArea.css
index 4be762f0c7d..ece9bed342f 100644
--- a/starters/docs/src/ColorArea.css
+++ b/starters/docs/src/ColorArea.css
@@ -1,7 +1,8 @@
 
 .react-aria-ColorArea {
-  width: 192px;
-  height: 192px;
+  width: 100%;
+  max-width: calc(var(--spacing) * 56);
+  aspect-ratio: 1/1;
   border-radius: var(--radius);
   flex-shrink: 0;
 }
diff --git a/starters/docs/src/ColorPicker.css b/starters/docs/src/ColorPicker.css
index ea05e05b90f..e53991bf322 100644
--- a/starters/docs/src/ColorPicker.css
+++ b/starters/docs/src/ColorPicker.css
@@ -27,4 +27,5 @@
   gap: var(--spacing-2);
   min-width: 192px;
   max-height: inherit;
+  overflow: auto;
 }
diff --git a/starters/docs/src/ColorSlider.css b/starters/docs/src/ColorSlider.css
index 64afc887dbb..8e1efb596b6 100644
--- a/starters/docs/src/ColorSlider.css
+++ b/starters/docs/src/ColorSlider.css
@@ -4,8 +4,6 @@
                        "track track";
   grid-template-columns: 1fr auto;
   gap: var(--spacing-1);
-  width: 100%;
-  max-width: 300px;
 
   .react-aria-Label {
     grid-area: label;
@@ -24,8 +22,11 @@
   }
 
   &[data-orientation=horizontal] {
+    width: 100%;
+    max-width: 300px;
+
     .react-aria-SliderTrack {
-      height: var(--spacing-7);
+      height: var(--spacing-6);
     }
 
     .react-aria-ColorThumb {
@@ -34,7 +35,7 @@
   }
 
   &[data-orientation=vertical] {
-    height: 150px;
+    height: 200px;
     display: block;
 
     .react-aria-Label,
@@ -43,7 +44,7 @@
     }
 
     .react-aria-SliderTrack {
-      width: var(--spacing-7);
+      width: var(--spacing-6);
       height: 100%;
     }
 
diff --git a/starters/docs/src/ColorThumb.css b/starters/docs/src/ColorThumb.css
index f13045448a4..19dfdc605f2 100644
--- a/starters/docs/src/ColorThumb.css
+++ b/starters/docs/src/ColorThumb.css
@@ -3,8 +3,8 @@
 .react-aria-ColorThumb {
   border: 2px solid white;
   box-shadow: 0 0 0 1px black, inset 0 0 0 1px black;
-  width: var(--spacing-5);
-  height: var(--spacing-5);
+  width: calc(var(--spacing) * 4.5);
+  height: calc(var(--spacing) * 4.5);
   border-radius: 50%;
   box-sizing: border-box;
 
diff --git a/starters/tailwind/src/ColorArea.tsx b/starters/tailwind/src/ColorArea.tsx
index e8084a92c13..20c4943d36c 100644
--- a/starters/tailwind/src/ColorArea.tsx
+++ b/starters/tailwind/src/ColorArea.tsx
@@ -13,7 +13,7 @@ export function ColorArea(props: ColorAreaProps) {
   return (
     <AriaColorArea
       {...props}
-      className={composeTailwindRenderProps(props.className, 'w-56 h-56 rounded-lg bg-neutral-300 dark:bg-neutral-800 forced-colors:bg-[GrayText]')}
+      className={composeTailwindRenderProps(props.className, 'w-full max-w-56 aspect-square rounded-lg bg-neutral-300 dark:bg-neutral-800 forced-colors:bg-[GrayText]')}
       style={({ defaultStyle, isDisabled }) => ({
         ...defaultStyle,
         background: isDisabled ? undefined : defaultStyle.background
diff --git a/starters/tailwind/src/ColorSlider.tsx b/starters/tailwind/src/ColorSlider.tsx
index aa8a3779c88..4361ebcce25 100644
--- a/starters/tailwind/src/ColorSlider.tsx
+++ b/starters/tailwind/src/ColorSlider.tsx
@@ -12,11 +12,11 @@ import { composeTailwindRenderProps } from './utils';
 import { ColorThumb } from './ColorThumb';
 
 const trackStyles = tv({
-  base: 'group col-span-2 orientation-horizontal:h-6 rounded-md',
+  base: 'group col-span-2 rounded-md',
   variants: {
     orientation: {
       horizontal: 'w-full h-6',
-      vertical: 'w-6 h-56 ml-[50%] -translate-x-[50%]'
+      vertical: 'w-6 h-50'
     },
     isDisabled: {
       true: 'bg-neutral-300 dark:bg-neutral-800 forced-colors:bg-[GrayText]'
diff --git a/starters/tailwind/src/ColorThumb.tsx b/starters/tailwind/src/ColorThumb.tsx
index cdb10770a46..143af7f66f6 100644
--- a/starters/tailwind/src/ColorThumb.tsx
+++ b/starters/tailwind/src/ColorThumb.tsx
@@ -4,7 +4,7 @@ import {ColorThumb as AriaColorThumb, ColorThumbProps} from 'react-aria-componen
 import { tv } from 'tailwind-variants';
 
 const thumbStyles = tv({
-  base: 'w-6 h-6 top-[50%] left-[50%] rounded-full border-2 border-white',
+  base: 'w-4.5 h-4.5 top-[50%] left-[50%] rounded-full border-2 border-white box-border',
   variants: {
     isFocusVisible: {
       true: 'w-8 h-8'

From a2e04f9b92261e31dbea417a5c31c3e1bb408e5b Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 1 Dec 2025 21:47:42 -0800
Subject: [PATCH 09/49] Fix DatePicker button and scrolling

---
 starters/docs/src/ComboBox.tsx        |  2 +-
 starters/docs/src/DateField.css       |  2 --
 starters/docs/src/DatePicker.css      |  3 ++-
 starters/docs/src/DatePicker.tsx      |  2 +-
 starters/docs/src/DateRangePicker.css | 11 +++++++++++
 starters/docs/src/DateRangePicker.tsx | 18 ++++++++++--------
 starters/docs/src/Form.css            |  5 +++++
 7 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/starters/docs/src/ComboBox.tsx b/starters/docs/src/ComboBox.tsx
index 6a58164e0ba..15a1ee7fa9b 100644
--- a/starters/docs/src/ComboBox.tsx
+++ b/starters/docs/src/ComboBox.tsx
@@ -30,7 +30,7 @@ export function ComboBox<T extends object>(
       <Label>{label}</Label>
       <div className="combobox-field">
         <Input className="react-aria-Input inset" />
-        <FieldButton><ChevronDown size={16} /></FieldButton>
+        <FieldButton><ChevronDown /></FieldButton>
       </div>
       {description && <Description>{description}</Description>}
       <FieldError>{errorMessage}</FieldError>
diff --git a/starters/docs/src/DateField.css b/starters/docs/src/DateField.css
index 2e1445a0860..34fb517cd19 100644
--- a/starters/docs/src/DateField.css
+++ b/starters/docs/src/DateField.css
@@ -20,8 +20,6 @@
   white-space: nowrap;
   forced-color-adjust: none;
   cursor: text;
-  overflow-x: auto;
-  scrollbar-width: none;
 
   &[data-focus-within] {
     outline: 2px solid var(--focus-ring-color);
diff --git a/starters/docs/src/DatePicker.css b/starters/docs/src/DatePicker.css
index c4f0571ae5b..98675277e15 100644
--- a/starters/docs/src/DatePicker.css
+++ b/starters/docs/src/DatePicker.css
@@ -9,7 +9,8 @@
   }
 
   .react-aria-DateInput {
-    width: 100%;
+    flex: 1;
+    min-width: 0;
     padding-right: var(--spacing-10);
   }
 }
diff --git a/starters/docs/src/DatePicker.tsx b/starters/docs/src/DatePicker.tsx
index 4fe3d4c7ef7..0d087b7b9ed 100644
--- a/starters/docs/src/DatePicker.tsx
+++ b/starters/docs/src/DatePicker.tsx
@@ -31,7 +31,7 @@ export function DatePicker<T extends DateValue>(
         <DateInput>
           {(segment) => <DateSegment segment={segment} />}
         </DateInput>
-        <FieldButton><ChevronDown size={16} /></FieldButton>
+        <FieldButton><ChevronDown /></FieldButton>
       </Group>
       {description && <Description>{description}</Description>}
       <FieldError>{errorMessage}</FieldError>
diff --git a/starters/docs/src/DateRangePicker.css b/starters/docs/src/DateRangePicker.css
index e73cb6552c3..bb2090beab0 100644
--- a/starters/docs/src/DateRangePicker.css
+++ b/starters/docs/src/DateRangePicker.css
@@ -3,6 +3,7 @@
 
 .react-aria-DateRangePicker {
   color: var(--text-color);
+  max-width: 100%;
 
   .react-aria-Group {
     display: flex;
@@ -31,6 +32,16 @@
     }
   }
 
+  .date-fields {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    width: fit-content;
+    overflow-x: auto;
+    overflow-y: clip;
+    scrollbar-width: none;
+  }
+
   .field-Button {
     margin-left: auto;
   }
diff --git a/starters/docs/src/DateRangePicker.tsx b/starters/docs/src/DateRangePicker.tsx
index 237932e2c60..3a6d97ca4ff 100644
--- a/starters/docs/src/DateRangePicker.tsx
+++ b/starters/docs/src/DateRangePicker.tsx
@@ -28,14 +28,16 @@ export function DateRangePicker<T extends DateValue>(
     <AriaDateRangePicker {...props}>
       <Label>{label}</Label>
       <Group className="react-aria-Group inset">
-        <DateInput slot="start">
-          {(segment) => <DateSegment segment={segment} />}
-        </DateInput>
-        <span aria-hidden="true">–</span>
-        <DateInput slot="end">
-          {(segment) => <DateSegment segment={segment} />}
-        </DateInput>
-        <FieldButton><ChevronDown size={16} /></FieldButton>
+        <div className="date-fields">
+          <DateInput slot="start">
+            {(segment) => <DateSegment segment={segment} />}
+          </DateInput>
+          <span aria-hidden="true">–</span>
+          <DateInput slot="end">
+            {(segment) => <DateSegment segment={segment} />}
+          </DateInput>
+        </div>
+        <FieldButton><ChevronDown /></FieldButton>
       </Group>
       {description && <Description>{description}</Description>}
       <FieldError>{errorMessage}</FieldError>
diff --git a/starters/docs/src/Form.css b/starters/docs/src/Form.css
index e42e10a1b26..ede03dabd4d 100644
--- a/starters/docs/src/Form.css
+++ b/starters/docs/src/Form.css
@@ -76,6 +76,11 @@
   transition-duration: 200ms;
   -webkit-tap-highlight-color: transparent;
 
+  svg {
+    width: var(--spacing-4);
+    height: var(--spacing-4);
+  }
+
   &:where([data-hovered], [data-pressed]) {
     background: var(--tint-300);
     color: var(--tint-1200);

From e0fb8928e3a83727006afd8c4fc8d6cafae41e0d Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 1 Dec 2025 21:50:55 -0800
Subject: [PATCH 10/49] Fix Autocomplete example overflowing

---
 packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx | 2 +-
 packages/dev/s2-docs/pages/react-aria/Menu.mdx         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx b/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx
index ebe93719fa9..13d49738fb3 100644
--- a/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx
@@ -130,7 +130,7 @@ function Example(props) {
   return (
     <MenuTrigger>
       <Button>Add tag...</Button>
-      <div style={{display: 'flex', flexDirection: 'column'}}>
+      <div style={{display: 'flex', flexDirection: 'column', maxHeight: 'inherit'}}>
         {/*- begin highlight -*/}
         <Autocomplete {...props}/* PROPS */ filter={contains}>
           <SearchField
diff --git a/packages/dev/s2-docs/pages/react-aria/Menu.mdx b/packages/dev/s2-docs/pages/react-aria/Menu.mdx
index 1c511bfa4b0..4d38e4322f4 100644
--- a/packages/dev/s2-docs/pages/react-aria/Menu.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Menu.mdx
@@ -322,7 +322,7 @@ function Example() {
   return (
     <MenuTrigger>
       <Button>Add tag...</Button>
-      <div style={{display: 'flex', flexDirection: 'column'}}>
+      <div style={{display: 'flex', flexDirection: 'column', maxHeight: 'inherit'}}>
         {/*- begin highlight -*/}
         <Autocomplete filter={contains}>
           <SearchField aria-label="Search tags" placeholder="Search tags" autoFocus style={{margin: 4}} />

From 168b036088af113912545ccfe5e56ae41fadd888 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 1 Dec 2025 22:26:32 -0800
Subject: [PATCH 11/49] Fix DateField scrolling

---
 starters/tailwind/src/DateField.tsx       |  2 +-
 starters/tailwind/src/DateRangePicker.tsx | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/starters/tailwind/src/DateField.tsx b/starters/tailwind/src/DateField.tsx
index e20e416de03..b6600e236a3 100644
--- a/starters/tailwind/src/DateField.tsx
+++ b/starters/tailwind/src/DateField.tsx
@@ -33,7 +33,7 @@ export function DateField<T extends DateValue>(
 }
 
 const segmentStyles = tv({
-  base: 'inline p-0.5 type-literal:p-0 rounded-xs outline outline-0 forced-color-adjust-none caret-transparent text-neutral-800 dark:text-neutral-200 forced-colors:text-[ButtonText]',
+  base: 'inline p-0.5 whitespace-nowrap type-literal:p-0 rounded-xs outline outline-0 forced-color-adjust-none caret-transparent text-neutral-800 dark:text-neutral-200 forced-colors:text-[ButtonText]',
   variants: {
     isPlaceholder: {
       true: 'text-neutral-600 dark:text-neutral-400'
diff --git a/starters/tailwind/src/DateRangePicker.tsx b/starters/tailwind/src/DateRangePicker.tsx
index ad117f4b3aa..124b7e307bb 100644
--- a/starters/tailwind/src/DateRangePicker.tsx
+++ b/starters/tailwind/src/DateRangePicker.tsx
@@ -26,12 +26,14 @@ export function DateRangePicker<T extends DateValue>(
   { label, description, errorMessage, ...props }: DateRangePickerProps<T>
 ) {
   return (
-    <AriaDateRangePicker {...props} className={composeTailwindRenderProps(props.className, 'group flex flex-col gap-1 font-sans')}>
+    <AriaDateRangePicker {...props} className={composeTailwindRenderProps(props.className, 'group flex flex-col gap-1 font-sans max-w-full')}>
       {label && <Label>{label}</Label>}
       <FieldGroup className="min-w-[208px] w-auto cursor-text disabled:cursor-default">
-        <DateInput slot="start" className="ps-3 pe-2 text-sm" />
-        <span aria-hidden="true" className="text-neutral-800 dark:text-neutral-200 forced-colors:text-[ButtonText] group-disabled:text-neutral-200 dark:group-disabled:text-neutral-600 forced-colors:group-disabled:text-[GrayText]">–</span>
-        <DateInput slot="end" className="flex-1 ps-2 pe-3 text-sm" />
+        <div className="flex-1 w-fit flex items-center overflow-x-auto overflow-y-clip [scrollbar-width:none]">
+          <DateInput slot="start" className="ps-3 pe-2 text-sm" />
+          <span aria-hidden="true" className="text-neutral-800 dark:text-neutral-200 forced-colors:text-[ButtonText] group-disabled:text-neutral-200 dark:group-disabled:text-neutral-600 forced-colors:group-disabled:text-[GrayText]">–</span>
+          <DateInput slot="end" className="flex-1 ps-2 pe-3 text-sm" />
+        </div>
         <FieldButton className="w-6 mr-1 outline-offset-0">
           <CalendarIcon aria-hidden className="w-4 h-4" />
         </FieldButton>

From dd1969ca4ff440e2a0bd967ddfcd9e8e1b38aa63 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 1 Dec 2025 22:27:05 -0800
Subject: [PATCH 12/49] Fix tailwind font sizes

---
 packages/dev/s2-docs/tailwind/home.global.css | 14 +++++++-------
 packages/dev/s2-docs/tailwind/tailwind.css    | 14 +++++++-------
 starters/tailwind/src/ColorField.tsx          |  2 +-
 starters/tailwind/src/Field.tsx               |  2 +-
 starters/tailwind/src/TextField.tsx           |  2 +-
 5 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/dev/s2-docs/tailwind/home.global.css b/packages/dev/s2-docs/tailwind/home.global.css
index 43f10c67319..80a05cbb6b9 100644
--- a/packages/dev/s2-docs/tailwind/home.global.css
+++ b/packages/dev/s2-docs/tailwind/home.global.css
@@ -24,13 +24,13 @@ body {
 @media (min-resolution: 200dpi) {
   :root {
     --spacing: calc(0.25rem * 1.25);
-    --text-xs: calc(0.75rem * 1.125);
-    --text-sm: calc(0.875rem * 1.125);
-    --text-base: calc(1rem * 1.125);
-    --text-lg: calc(1.125rem * 1.125);
-    --text-xl: calc(1.25rem * 1.125);
-    --text-2xl: calc(1.5rem * 1.125);
-    --text-3xl: calc(1.875rem * 1.125);
+    --text-xs: calc(0.75rem * 1.25);
+    --text-sm: round(down, 0.875rem * 1.25, 1px);
+    --text-base: calc(1rem * 1.25);
+    --text-lg: round(1.125rem * 1.25, 1px);
+    --text-xl: calc(1.25rem * 1.25);
+    --text-2xl: calc(1.5rem * 1.25);
+    --text-3xl: calc(1.875rem * 1.25);
   }
 }
 
diff --git a/packages/dev/s2-docs/tailwind/tailwind.css b/packages/dev/s2-docs/tailwind/tailwind.css
index 6ab6b5dd271..faa52c7911b 100644
--- a/packages/dev/s2-docs/tailwind/tailwind.css
+++ b/packages/dev/s2-docs/tailwind/tailwind.css
@@ -11,12 +11,12 @@
 @media (min-resolution: 200dpi) {
   :root {
     --spacing: calc(0.25rem * 1.25);
-    --text-xs: calc(0.75rem * 1.125);
-    --text-sm: calc(0.875rem * 1.125);
-    --text-base: calc(1rem * 1.125);
-    --text-lg: calc(1.125rem * 1.125);
-    --text-xl: calc(1.25rem * 1.125);
-    --text-2xl: calc(1.5rem * 1.125);
-    --text-3xl: calc(1.875rem * 1.125);
+    --text-xs: calc(0.75rem * 1.25);
+    --text-sm: round(down, 0.875rem * 1.25, 1px);
+    --text-base: calc(1rem * 1.25);
+    --text-lg: round(1.125rem * 1.25, 1px);
+    --text-xl: calc(1.25rem * 1.25);
+    --text-2xl: calc(1.5rem * 1.25);
+    --text-3xl: calc(1.875rem * 1.25);
   }
 }
diff --git a/starters/tailwind/src/ColorField.tsx b/starters/tailwind/src/ColorField.tsx
index 9387ae3bf2a..cf708c8b5a6 100644
--- a/starters/tailwind/src/ColorField.tsx
+++ b/starters/tailwind/src/ColorField.tsx
@@ -11,7 +11,7 @@ import { composeTailwindRenderProps, focusRing } from './utils';
 
 const inputStyles = tv({
   extend: focusRing,
-  base: 'border-1 rounded-lg min-h-9 font-sans py-0 px-3 box-border transition',
+  base: 'border-1 rounded-lg min-h-9 font-sans text-sm py-0 px-3 box-border transition',
   variants: {
     isFocused: fieldBorderStyles.variants.isFocusWithin,
     isInvalid: fieldBorderStyles.variants.isInvalid,
diff --git a/starters/tailwind/src/Field.tsx b/starters/tailwind/src/Field.tsx
index 37f85290605..91e9e492431 100644
--- a/starters/tailwind/src/Field.tsx
+++ b/starters/tailwind/src/Field.tsx
@@ -44,5 +44,5 @@ export function FieldGroup(props: GroupProps) {
 }
 
 export function Input(props: InputProps) {
-  return <RACInput {...props} className={composeTailwindRenderProps(props.className, 'px-3 py-0 min-h-9 flex-1 min-w-0 border-0 outline outline-0 bg-white dark:bg-neutral-900 text-sm text-neutral-800 dark:text-neutral-200 placeholder:text-neutral-600 dark:placeholder:text-neutral-400 disabled:text-neutral-200 dark:disabled:text-neutral-600 disabled:placeholder:text-neutral-200 dark:disabled:placeholder:text-neutral-600')} />
+  return <RACInput {...props} className={composeTailwindRenderProps(props.className, 'px-3 py-0 min-h-9 flex-1 min-w-0 border-0 outline outline-0 bg-white dark:bg-neutral-900 font-sans text-sm text-neutral-800 dark:text-neutral-200 placeholder:text-neutral-600 dark:placeholder:text-neutral-400 disabled:text-neutral-200 dark:disabled:text-neutral-600 disabled:placeholder:text-neutral-200 dark:disabled:placeholder:text-neutral-600')} />
 }
diff --git a/starters/tailwind/src/TextField.tsx b/starters/tailwind/src/TextField.tsx
index 40606b5a5cc..d5da9723f24 100644
--- a/starters/tailwind/src/TextField.tsx
+++ b/starters/tailwind/src/TextField.tsx
@@ -11,7 +11,7 @@ import { composeTailwindRenderProps, focusRing } from './utils';
 
 const inputStyles = tv({
   extend: focusRing,
-  base: 'border-1 rounded-lg min-h-9 font-sans py-0 px-3 box-border transition',
+  base: 'border-1 rounded-lg min-h-9 font-sans text-sm py-0 px-3 box-border transition',
   variants: {
     isFocused: fieldBorderStyles.variants.isFocusWithin,
     isInvalid: fieldBorderStyles.variants.isInvalid,

From ec68cad57a0f916f15dd6ee020306705cfd28571 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 1 Dec 2025 22:27:18 -0800
Subject: [PATCH 13/49] Fix CommandPalette scrolling

---
 starters/docs/src/CommandPalette.css     | 1 +
 starters/tailwind/src/CommandPalette.tsx | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/starters/docs/src/CommandPalette.css b/starters/docs/src/CommandPalette.css
index 28d7be3729a..cd6b3d73fa4 100644
--- a/starters/docs/src/CommandPalette.css
+++ b/starters/docs/src/CommandPalette.css
@@ -3,6 +3,7 @@
 .command-palette-dialog {
   width: min(90vw, 500px);
   height: min(90vh, 356px);
+  max-height: inherit;
   padding: var(--spacing-2);
   box-sizing: border-box;
   display: flex;
diff --git a/starters/tailwind/src/CommandPalette.tsx b/starters/tailwind/src/CommandPalette.tsx
index 8b450f7c05f..71573140948 100644
--- a/starters/tailwind/src/CommandPalette.tsx
+++ b/starters/tailwind/src/CommandPalette.tsx
@@ -38,7 +38,7 @@ export function CommandPalette<T extends object>(props: CommandPaletteProps<T>)
 
   return (
     <Modal isDismissable isOpen={isOpen} onOpenChange={onOpenChange}>
-      <Dialog>
+      <Dialog className="flex flex-col max-h-[inherit]">
         <AriaAutocomplete filter={contains} {...props}>
           <SearchField
             autoFocus
@@ -47,6 +47,7 @@ export function CommandPalette<T extends object>(props: CommandPaletteProps<T>)
             className="m-2" />
           <Menu
             {...props}
+            className="flex-1 min-h-0"
             renderEmptyState={() => 'No results found.'} />
         </AriaAutocomplete>
       </Dialog>

From b07d263107abf255eb6dee830985b47c79468e39 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 1 Dec 2025 22:30:55 -0800
Subject: [PATCH 14/49] Fix RadioGroup scaling and disabled state

---
 starters/docs/src/RadioGroup.css     | 11 ++++++-----
 starters/tailwind/src/RadioGroup.tsx |  2 +-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/starters/docs/src/RadioGroup.css b/starters/docs/src/RadioGroup.css
index 5ba376b9505..326b156aac1 100644
--- a/starters/docs/src/RadioGroup.css
+++ b/starters/docs/src/RadioGroup.css
@@ -30,6 +30,10 @@
   color: var(--text-color);
   forced-color-adjust: none;
   -webkit-tap-highlight-color: transparent;
+  --dot-color: white;
+  @media (forced-colors: active) {
+    --dot-color: HighlightText;
+  }
 
   .indicator {
     position: relative;
@@ -52,16 +56,13 @@
 
   &[data-selected] {
     .indicator::after {
-      background: white;
+      background: var(--dot-color);
       scale: 0.37;
-
-      @media (forced-colors: active) {
-        background: HighlightText;
-      }
     }
   }
 
   &[data-disabled] {
     color: var(--text-color-disabled);
+    --dot-color: var(--text-color-disabled);
   }
 }
diff --git a/starters/tailwind/src/RadioGroup.tsx b/starters/tailwind/src/RadioGroup.tsx
index 68d60e70f77..416728e7259 100644
--- a/starters/tailwind/src/RadioGroup.tsx
+++ b/starters/tailwind/src/RadioGroup.tsx
@@ -31,7 +31,7 @@ const styles = tv({
   variants: {
     isSelected: {
       false: 'border-neutral-400 dark:border-neutral-400 group-pressed:border-neutral-500 dark:group-pressed:border-neutral-300',
-      true: 'border-[6px] border-neutral-700 dark:border-neutral-300 forced-colors:border-[Highlight]! group-pressed:border-neutral-800 dark:group-pressed:border-neutral-200'
+      true: 'border-[calc(var(--spacing)*1.5)] border-neutral-700 dark:border-neutral-300 forced-colors:border-[Highlight]! group-pressed:border-neutral-800 dark:group-pressed:border-neutral-200'
     },
     isInvalid: {
       true: 'border-red-700 dark:border-red-600 group-pressed:border-red-800 dark:group-pressed:border-red-700 forced-colors:border-[Mark]!'

From bae40b8aa009c8bd4e18a2f707e3adfc539f6578 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 1 Dec 2025 22:35:02 -0800
Subject: [PATCH 15/49] Fix vanilla SearchField close button scaling

---
 starters/docs/src/SearchField.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/starters/docs/src/SearchField.css b/starters/docs/src/SearchField.css
index e54e5f48a2f..63d248693a8 100644
--- a/starters/docs/src/SearchField.css
+++ b/starters/docs/src/SearchField.css
@@ -40,10 +40,10 @@
   .clear-button {
     all: unset;
     grid-area: button;
-    width: 1rem;
-    height: 1rem;
+    width: var(--spacing-4);
+    height: var(--spacing-4);
     border-radius: 9999px;
-    margin-left: -24px;
+    margin-left: calc(-1 * var(--spacing-6));
     text-align: center;
     background: var(--gray-700);
     color: var(--gray-50);

From 6d426909fadebf4aadd0af9ef85196278f29c50a Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 1 Dec 2025 22:39:01 -0800
Subject: [PATCH 16/49] Add press state to tailwind dropdown items for touch

---
 starters/tailwind/src/ListBox.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/starters/tailwind/src/ListBox.tsx b/starters/tailwind/src/ListBox.tsx
index bc62b7253f3..d4da33f2557 100644
--- a/starters/tailwind/src/ListBox.tsx
+++ b/starters/tailwind/src/ListBox.tsx
@@ -60,8 +60,11 @@ export const dropdownItemStyles = tv({
       false: 'text-neutral-900 dark:text-neutral-100',
       true: 'text-neutral-300 dark:text-neutral-600 forced-colors:text-[GrayText]'
     },
+    isPressed: {
+      true: 'bg-neutral-100 dark:bg-neutral-800'
+    },
     isFocused: {
-      true: 'bg-blue-600 text-white forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]'
+      true: 'bg-blue-600 dark:bg-blue-600 text-white forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]'
     }
   },
   compoundVariants: [

From f42c35aedbf7ffd70611af71c1d0eb708dea40aa Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 1 Dec 2025 22:42:53 -0800
Subject: [PATCH 17/49] Less layout shifting on Select example

---
 packages/dev/s2-docs/pages/react-aria/Select.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/dev/s2-docs/pages/react-aria/Select.mdx b/packages/dev/s2-docs/pages/react-aria/Select.mdx
index 8724009d5d8..c9273350493 100644
--- a/packages/dev/s2-docs/pages/react-aria/Select.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Select.mdx
@@ -279,7 +279,7 @@ function Example(props) {
   let [animal, setAnimal] = useState("bison");
 
   return (
-    <div>
+    <>
       <Select
         {...props}
         label="Pick an animal"
@@ -297,7 +297,7 @@ function Example(props) {
         <SelectItem id="skunk">Skunk</SelectItem>
       </Select>
       <pre style={{fontSize: 12}}>Current selection: {JSON.stringify(animal)}</pre>
-    </div>
+    </>
   );
 }
 ```

From abdb347505055d9012886527345ec2f37291497f Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 1 Dec 2025 22:47:49 -0800
Subject: [PATCH 18/49] Fix slider clipping, shorten vertical height

---
 starters/docs/src/Slider.css     | 1 +
 starters/tailwind/src/Slider.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/starters/docs/src/Slider.css b/starters/docs/src/Slider.css
index 1a65adb5a88..f47e3b4deae 100644
--- a/starters/docs/src/Slider.css
+++ b/starters/docs/src/Slider.css
@@ -93,6 +93,7 @@
   &[data-orientation=vertical] {
     height: 150px;
     display: block;
+    margin: var(--spacing-3) 0;
 
     .react-aria-Label,
     .react-aria-SliderOutput {
diff --git a/starters/tailwind/src/Slider.tsx b/starters/tailwind/src/Slider.tsx
index 866afe343b1..c08d6ae88bf 100644
--- a/starters/tailwind/src/Slider.tsx
+++ b/starters/tailwind/src/Slider.tsx
@@ -66,7 +66,7 @@ export function Slider<T extends number | number[]>(
       <SliderOutput className="text-sm text-neutral-500 dark:text-neutral-400 orientation-vertical:hidden">
         {({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(' – ')}
       </SliderOutput>
-      <SliderTrack className="group col-span-2 orientation-horizontal:h-5 orientation-vertical:w-5 orientation-vertical:h-64 flex items-center">
+      <SliderTrack className="group col-span-2 orientation-horizontal:h-5 orientation-vertical:w-5 orientation-vertical:h-38 flex items-center">
         {({ state, ...renderProps }) => <>
           <div className={trackStyles(renderProps)} />
           {state.values.length === 1

From 006f032d1c1cbac8da93007d01a5a6997bb221e3 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 1 Dec 2025 23:01:20 -0800
Subject: [PATCH 19/49] Fix Tabs disabled state inheriting into Checkboxes

Also Switch disabled state color
---
 starters/docs/src/Switch.css    |  5 +++++
 starters/docs/src/Switch.tsx    |  4 ++--
 starters/docs/src/utilities.css | 10 ++++++----
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/starters/docs/src/Switch.css b/starters/docs/src/Switch.css
index 0d667e1430a..010a06e4a5a 100644
--- a/starters/docs/src/Switch.css
+++ b/starters/docs/src/Switch.css
@@ -65,5 +65,10 @@
     .track {
       box-shadow: 0 0 0 1px var(--border-color);
     }
+
+    &[data-selected] .handle {
+      background: var(--gray-200);
+      box-shadow: none;
+    }
   }
 }
diff --git a/starters/docs/src/Switch.tsx b/starters/docs/src/Switch.tsx
index eddc086c22c..d065aa8c695 100644
--- a/starters/docs/src/Switch.tsx
+++ b/starters/docs/src/Switch.tsx
@@ -13,9 +13,9 @@ export interface SwitchProps extends Omit<AriaSwitchProps, 'children'> {
 export function Switch({ children, ...props }: SwitchProps) {
   return (
     <AriaSwitch {...props}>
-      {({isSelected}) => (<>
+      {({isSelected, isDisabled}) => (<>
         <div className="track indicator">
-          <div className={isSelected ? 'handle' : 'handle indicator'} />
+          <div data-disabled={isDisabled || undefined} className={isSelected ? 'handle' : 'handle indicator'} />
         </div>
         {children}
       </>)}
diff --git a/starters/docs/src/utilities.css b/starters/docs/src/utilities.css
index e250809b331..0eeacb73b03 100644
--- a/starters/docs/src/utilities.css
+++ b/starters/docs/src/utilities.css
@@ -164,8 +164,8 @@
       scale: 0.9;
     }
 
-    [data-selected] &,
-    [data-indeterminate] & {
+    [data-selected] > &,
+    [data-indeterminate] > & {
       --indicator-color: var(--highlight-background);
       --indicator-background: var(--indicator-color);
       --indicator-highlight: rgb(255 255 255 / 0.3);
@@ -192,7 +192,8 @@
       }
     }
 
-    [data-invalid] & {
+    &[data-invalid],
+    [data-invalid] > & {
       --indicator-color: var(--invalid-color);
 
       @media (forced-colors: active) {
@@ -206,7 +207,8 @@
       outline-offset: 2px;
     }
 
-    [data-disabled] & {
+    &[data-disabled],
+    [data-disabled] > & {
       background: var(--field-background);
       box-shadow: inset 0 0 0 1px var(--border-color-disabled)
     }

From 6f0a5de085bb16128f3a4f403969d410e8daebd1 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 1 Dec 2025 23:14:08 -0800
Subject: [PATCH 20/49] Make add/remove tab buttons narrower, and fix client
 router example

---
 packages/dev/s2-docs/pages/react-aria/Tabs.mdx |  9 +++++++--
 packages/dev/s2-docs/pages/s2/Tabs.mdx         | 10 ++++++++--
 packages/dev/s2-docs/src/client.tsx            |  1 +
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/dev/s2-docs/pages/react-aria/Tabs.mdx b/packages/dev/s2-docs/pages/react-aria/Tabs.mdx
index d6990c4bdc0..dab0d80a1ec 100644
--- a/packages/dev/s2-docs/pages/react-aria/Tabs.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Tabs.mdx
@@ -121,6 +121,7 @@ export const description = 'Organizes content into multiple sections and allows
 import {Tabs, TabList, Tab, TabPanels, TabPanel} from 'vanilla-starter/Tabs';
 import {Button} from 'vanilla-starter/Button';
 import {useState} from 'react';
+import {Plus, Minus} from 'lucide-react';
 
 function Example() {
   let [tabs, setTabs] = useState([
@@ -158,8 +159,12 @@ function Example() {
           {item => <Tab>{item.title}</Tab>}
         </TabList>
         <div className="button-group">
-          <Button onPress={addTab}>Add tab</Button>
-          <Button onPress={removeTab}>Remove tab</Button>
+          <Button onPress={addTab} aria-label="Add tab">
+            <Plus />
+          </Button>
+          <Button onPress={removeTab} aria-label="Remove tab">
+            <Minus />
+          </Button>
         </div>
       </div>
       <TabPanels items={tabs}>
diff --git a/packages/dev/s2-docs/pages/s2/Tabs.mdx b/packages/dev/s2-docs/pages/s2/Tabs.mdx
index 1250663e0e2..bb84f694fb3 100644
--- a/packages/dev/s2-docs/pages/s2/Tabs.mdx
+++ b/packages/dev/s2-docs/pages/s2/Tabs.mdx
@@ -62,6 +62,8 @@ import Settings from '@react-spectrum/s2/illustrations/gradient/generic1/GearSet
 import {ActionButton, ActionButtonGroup, Tabs, TabList, Tab, TabPanel, Collection} from '@react-spectrum/s2';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {useState} from 'react';
+import AddCircle from '@react-spectrum/s2/icons/AddCircle';
+import RemoveCircle from '@react-spectrum/s2/icons/RemoveCircle';
 
 function Example() {
   let [tabs, setTabs] = useState([
@@ -98,8 +100,12 @@ function Example() {
           {item => <Tab>{item.title}</Tab>}
         </TabList>
         <ActionButtonGroup density="compact" size="S">
-          <ActionButton onPress={addTab}>Add tab</ActionButton>
-          <ActionButton onPress={removeTab}>Remove tab</ActionButton>
+          <ActionButton onPress={addTab} aria-label="Add tab">
+            <AddCircle />
+          </ActionButton>
+          <ActionButton onPress={removeTab} aria-label="Remove tab">
+            <RemoveCircle />
+          </ActionButton>
         </ActionButtonGroup>
       </div>
       {/*- begin highlight -*/}
diff --git a/packages/dev/s2-docs/src/client.tsx b/packages/dev/s2-docs/src/client.tsx
index ab2c0bcf4dc..6a228d60ce9 100644
--- a/packages/dev/s2-docs/src/client.tsx
+++ b/packages/dev/s2-docs/src/client.tsx
@@ -243,6 +243,7 @@ document.addEventListener('click', e => {
   if (
     link &&
     isClientLink(link) &&
+    link.pathname !== location.pathname &&
     e.button === 0 && // left clicks only
     !e.metaKey && // open in new tab (mac)
     !e.ctrlKey && // open in new tab (windows)

From 44e3d9a87108db77207337aee95e5f3e878a935c Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 1 Dec 2025 23:15:07 -0800
Subject: [PATCH 21/49] Tailwind Toolbar flex wrap

---
 starters/tailwind/src/Toolbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/starters/tailwind/src/Toolbar.tsx b/starters/tailwind/src/Toolbar.tsx
index 68717897c33..d401c25a1fe 100644
--- a/starters/tailwind/src/Toolbar.tsx
+++ b/starters/tailwind/src/Toolbar.tsx
@@ -4,7 +4,7 @@ import { Toolbar as RACToolbar, ToggleButtonGroupContext, ToolbarProps, composeR
 import { tv } from 'tailwind-variants';
 
 const styles = tv({
-  base: 'flex gap-2',
+  base: 'flex flex-wrap gap-2',
   variants: {
     orientation: {
       horizontal: 'flex-row items-center',

From 1fa9dd0c8e53f638976973229b00a42bd82f20ea Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 1 Dec 2025 23:18:52 -0800
Subject: [PATCH 22/49] Fix vanilla TreeItem height

---
 starters/docs/src/Tree.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/starters/docs/src/Tree.css b/starters/docs/src/Tree.css
index 11914ca11de..8b86be191e7 100644
--- a/starters/docs/src/Tree.css
+++ b/starters/docs/src/Tree.css
@@ -54,8 +54,9 @@
   display: flex;
   align-items: center;
   gap: var(--spacing-2);
-  min-height: 28px;
-  padding: 0.25025rem 0.25025rem 0.25025rem 0.499625rem;
+  min-height: var(--spacing-8);
+  padding: var(--spacing-1) var(--spacing-1) var(--spacing-1) var(--spacing-2);
+  box-sizing: border-box;
   --padding: var(--spacing-4);
   border-radius: var(--radius);
   outline: none;

From 7722120e2f3f8d0ead45533e5e6ad11bd6e27a94 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 1 Dec 2025 23:22:40 -0800
Subject: [PATCH 23/49] Only render VisualExample controls if there are props
 provided

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

diff --git a/packages/dev/s2-docs/src/VisualExample.tsx b/packages/dev/s2-docs/src/VisualExample.tsx
index 430c5f8eab7..29648e0a5ae 100644
--- a/packages/dev/s2-docs/src/VisualExample.tsx
+++ b/packages/dev/s2-docs/src/VisualExample.tsx
@@ -192,9 +192,9 @@ export function VisualExample({component, docs, links, importSource, props, init
         <ShadcnProvider value={registryUrl}>
           <div role="group" aria-label="Example" className={exampleStyle({layout: files || wide ? 'wide' : 'narrow'})}>
             <Output align={align} acceptOrientation={acceptOrientation} />
-            <div role="group" aria-label="Controls" className={controlsStyle}>
+            {props.length > 0 && <div role="group" aria-label="Controls" className={controlsStyle}>
               {Object.keys(controls).map(control => <Control key={control} name={control} />)}
-            </div>
+            </div>}
             <div style={{gridArea: 'files', overflow: 'hidden'}}>
               {files ? <Files files={files} downloadFiles={downloadFiles.files} type={type}>{output}</Files> : output}
             </div>

From d527fab44dd08362da2272371b9be661937c0f15 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 1 Dec 2025 23:34:06 -0800
Subject: [PATCH 24/49] Fix some API types in hook docs

---
 packages/dev/s2-docs/pages/react-aria/useMove.mdx | 4 ----
 packages/dev/s2-docs/src/types.tsx                | 2 +-
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/dev/s2-docs/pages/react-aria/useMove.mdx b/packages/dev/s2-docs/pages/react-aria/useMove.mdx
index b8b1db60d4a..6edf7dd476f 100644
--- a/packages/dev/s2-docs/pages/react-aria/useMove.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useMove.mdx
@@ -20,10 +20,6 @@ export const description = 'Handles move interactions for pointer and keyboard,
 
 <PageDescription>{docs.exports.useMove.description}</PageDescription>
 
-## API
-
-<FunctionAPI function={docs.exports.useMove} links={docs.links} />
-
 ## Features
 
 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.
diff --git a/packages/dev/s2-docs/src/types.tsx b/packages/dev/s2-docs/src/types.tsx
index d9295b9278d..6493a2934fe 100644
--- a/packages/dev/s2-docs/src/types.tsx
+++ b/packages/dev/s2-docs/src/types.tsx
@@ -84,7 +84,7 @@ const codeStyle = style({font: {default: 'code-xs', lg: 'code-sm'}});
 
 let LINKS = {};
 export function setLinks(links) {
-  LINKS = links;
+  Object.assign(LINKS, links);
 }
 
 export function Type({type}: {type: TType}) {

From a8fbf88935b8aae191eb4cced45ad035e0ac584d Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 1 Dec 2025 23:36:45 -0800
Subject: [PATCH 25/49] Disable native long press on images in GridList

Improves drag and drop experience
---
 starters/docs/src/GridList.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/starters/docs/src/GridList.css b/starters/docs/src/GridList.css
index ad7596390a2..21635b8b751 100644
--- a/starters/docs/src/GridList.css
+++ b/starters/docs/src/GridList.css
@@ -165,6 +165,7 @@
     object-fit: cover;
     padding-bottom: var(--spacing-2);
     -webkit-user-drag: none;
+    -webkit-touch-callout: none;
     flex-shrink: 0;
   }
 

From 0d8b047d69eb306f41054338fc5631a5a3928837 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 1 Dec 2025 23:39:51 -0800
Subject: [PATCH 26/49] Don't scroll library out of view on mobile if there is
 no toc

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

diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx
index 883eb40983a..2f1ac72d42a 100644
--- a/packages/dev/s2-docs/src/Layout.tsx
+++ b/packages/dev/s2-docs/src/Layout.tsx
@@ -233,7 +233,7 @@ export async function Layout(props: PageProps & {children: ReactElement<any>}) {
               }
             })}>
             <Header />
-            <MobileHeader toc={<OptimisticMobileToc />} />
+            <MobileHeader toc={(currentPage.tableOfContents?.[0]?.children?.length ?? 0) <= 1 ? null : <OptimisticMobileToc />} />
             <div className={style({display: 'flex', width: 'full', flexGrow: {default: 1, lg: 0}})}>
               <Nav />
               <Main

From 02fe874bb82eff7e79060facad4d58eea14dfb2a Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 1 Dec 2025 23:50:23 -0800
Subject: [PATCH 27/49] Fix toc picking up unrelated headings

Caused nothing to be selected sometimes (e.g. Calendar)
---
 packages/dev/s2-docs/src/Nav.tsx        | 4 ++--
 packages/dev/s2-docs/src/typography.tsx | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/dev/s2-docs/src/Nav.tsx b/packages/dev/s2-docs/src/Nav.tsx
index 689ba806408..b1cb12495af 100644
--- a/packages/dev/s2-docs/src/Nav.tsx
+++ b/packages/dev/s2-docs/src/Nav.tsx
@@ -326,7 +326,7 @@ function useCurrentSection() {
   let [selected, setSelected] = useState('');
 
   useEffect(() => {
-    let elements = Array.from(document.querySelectorAll('article :is(h2,h3,h4,h5)'));
+    let elements = Array.from(document.querySelectorAll('article [data-anchor-link]'));
     let visible = new Set();
     let observer = new IntersectionObserver(entries => {
       for (let entry of entries) {
@@ -367,7 +367,7 @@ export function MobileOnPageNav({children}) {
   let {currentPage} = useRouter();
   let [selected, setSelected] = useState('');
   useEffect(() => {
-    let elements = Array.from(document.querySelectorAll('article :is(h1,h2,h3,h4,h5)'));
+    let elements = Array.from(document.querySelectorAll('article [data-anchor-link]'));
     elements.reverse();
     let visible = new Set();
     let observer = new IntersectionObserver(entries => {
diff --git a/packages/dev/s2-docs/src/typography.tsx b/packages/dev/s2-docs/src/typography.tsx
index 4be749fdde3..52c973f0826 100644
--- a/packages/dev/s2-docs/src/typography.tsx
+++ b/packages/dev/s2-docs/src/typography.tsx
@@ -80,7 +80,7 @@ const h1 = style({
 
 export function H1({children, isLongForm, ...props}) {
   return (
-    <h1 {...props} id="top" style={{'--width-per-em': getTextWidth(children)} as any} className={h1({isLongForm})}>
+    <h1 {...props} data-anchor-link id="top" style={{'--width-per-em': getTextWidth(children)} as any} className={h1({isLongForm})}>
       {children}
     </h1>
   );
@@ -90,7 +90,7 @@ export function H2({children, ...props}) {
   let {hoverProps, isHovered} = useHover({});
   let id = anchorId(children);
   return (
-    <h2 {...props} id={id} className={style({font: 'heading-lg', marginTop: 48, marginBottom: 24, maxWidth: '--text-width', marginX: 'auto', textWrap: 'balance'})} {...hoverProps}>
+    <h2 {...props} data-anchor-link id={id} className={style({font: 'heading-lg', marginTop: 48, marginBottom: 24, maxWidth: '--text-width', marginX: 'auto', textWrap: 'balance'})} {...hoverProps}>
       {children}
       <AnchorLink anchorId={id} isHovered={isHovered} level={2} headingText={children} />
     </h2>
@@ -101,7 +101,7 @@ export function H3({children, ...props}) {
   let {hoverProps, isHovered} = useHover({});
   let id = anchorId(children);
   return (
-    <h3 {...props} id={id} className={style({font: 'heading', marginTop: 36, marginBottom: 24, maxWidth: '--text-width', marginX: 'auto', textWrap: 'balance'})} {...hoverProps}>
+    <h3 {...props} data-anchor-link id={id} className={style({font: 'heading', marginTop: 36, marginBottom: 24, maxWidth: '--text-width', marginX: 'auto', textWrap: 'balance'})} {...hoverProps}>
       {children}
       <AnchorLink anchorId={id} isHovered={isHovered} level={3} headingText={children} />
     </h3>
@@ -112,7 +112,7 @@ export function H4({children, ...props}) {
   let {hoverProps, isHovered} = useHover({});
   let id = anchorId(children);
   return (
-    <h4 {...props} id={id} className={style({font: 'heading-sm', maxWidth: '--text-width', marginX: 'auto', textWrap: 'balance'})} {...hoverProps}>
+    <h4 {...props} data-anchor-link id={id} className={style({font: 'heading-sm', maxWidth: '--text-width', marginX: 'auto', textWrap: 'balance'})} {...hoverProps}>
       {children}
       <AnchorLink anchorId={id} isHovered={isHovered} level={4} headingText={children} />
     </h4>

From 86515fd13fde92ca1903a89741391257a6689c9f Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 1 Dec 2025 23:54:23 -0800
Subject: [PATCH 28/49] Fix selection indicator scaling

---
 .../pages/react-aria/SelectionIndicator.css        | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/dev/s2-docs/pages/react-aria/SelectionIndicator.css b/packages/dev/s2-docs/pages/react-aria/SelectionIndicator.css
index c5d5a81b9a8..f9aa26e732d 100644
--- a/packages/dev/s2-docs/pages/react-aria/SelectionIndicator.css
+++ b/packages/dev/s2-docs/pages/react-aria/SelectionIndicator.css
@@ -1,14 +1,14 @@
 .animated-ListBoxItem {
   display: flex;
   align-items: center;
-  gap: 8px;
-  min-height: 28px;
-  padding: 4px 4px 4px 12px;
-  border-radius: 6px;
+  gap: var(--spacing-2);
+  min-height: var(--spacing-7);
+  padding: var(--spacing-1) var(--spacing-1) var(--spacing-1) var(--spacing-3);
+  border-radius: var(--radius);
   outline: none;
   cursor: default;
   color: var(--text-color);
-  font-size: 14px;
+  font-size: var(--font-size);
   position: relative;
 
   &[data-focus-visible] {
@@ -22,9 +22,9 @@
 
   .react-aria-SelectionIndicator {
     position: absolute;
-    left: 4px;
+    left: var(--spacing-1);
     width: 3px;
-    height: 20px;
+    height: var(--spacing-5);
     border-radius: 4px;
     background: var(--highlight-background);
     transition-property: translate, opacity;

From b15a51042518222d94d960e057eb1951158387db Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 2 Dec 2025 12:11:16 -0800
Subject: [PATCH 29/49] Update hook docs

---
 packages/@react-aria/utils/src/mergeProps.ts  |  3 +-
 .../s2-docs/pages/react-aria/FocusRing.mdx    | 26 ++++------
 .../pages/react-aria/FocusRingExample.css     |  3 +-
 .../s2-docs/pages/react-aria/I18nProvider.mdx | 16 +++---
 .../pages/react-aria/PortalProvider.mdx       | 12 +++--
 .../s2-docs/pages/react-aria/SSRProvider.mdx  | 22 ++++----
 .../pages/react-aria/VisuallyHidden.mdx       | 42 ++++++----------
 .../s2-docs/pages/react-aria/mergeProps.mdx   | 10 ----
 .../s2-docs/pages/react-aria/useClipboard.mdx | 20 ++++----
 .../s2-docs/pages/react-aria/useCollator.mdx  |  4 +-
 .../pages/react-aria/useDateFormatter.mdx     |  4 +-
 .../dev/s2-docs/pages/react-aria/useDrag.mdx  | 18 +++----
 .../dev/s2-docs/pages/react-aria/useDrop.mdx  | 24 ++++-----
 .../dev/s2-docs/pages/react-aria/useField.mdx |  2 +-
 .../s2-docs/pages/react-aria/useFilter.mdx    |  4 +-
 .../dev/s2-docs/pages/react-aria/useFocus.mdx | 26 ++++------
 .../s2-docs/pages/react-aria/useFocusRing.mdx | 32 +++++-------
 .../pages/react-aria/useFocusVisible.mdx      | 37 +++++---------
 .../pages/react-aria/useFocusWithin.mdx       | 31 ++++--------
 .../dev/s2-docs/pages/react-aria/useHover.mdx | 50 ++++++-------------
 .../dev/s2-docs/pages/react-aria/useId.mdx    |  2 +-
 .../dev/s2-docs/pages/react-aria/useIsSSR.mdx |  2 +-
 .../s2-docs/pages/react-aria/useKeyboard.mdx  | 24 ++++-----
 .../dev/s2-docs/pages/react-aria/useLabel.mdx |  2 +-
 .../s2-docs/pages/react-aria/useLandmark.mdx  | 48 +++++++++---------
 .../s2-docs/pages/react-aria/useLocale.mdx    |  3 +-
 .../s2-docs/pages/react-aria/useLongPress.mdx | 49 +++++++++---------
 .../dev/s2-docs/pages/react-aria/useMove.mdx  | 29 +++--------
 .../pages/react-aria/useNumberFormatter.mdx   |  4 +-
 .../s2-docs/pages/react-aria/useObjectRef.mdx |  4 +-
 .../dev/s2-docs/pages/react-aria/usePress.mdx | 49 +++++++-----------
 31 files changed, 251 insertions(+), 351 deletions(-)

diff --git a/packages/@react-aria/utils/src/mergeProps.ts b/packages/@react-aria/utils/src/mergeProps.ts
index 47319f2d1e3..c7f442fc48e 100644
--- a/packages/@react-aria/utils/src/mergeProps.ts
+++ b/packages/@react-aria/utils/src/mergeProps.ts
@@ -28,8 +28,7 @@ type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
 
 /**
  * Merges multiple props objects together. Event handlers are chained,
- * classNames are combined, and ids are deduplicated - different ids
- * will trigger a side-effect and re-render components hooked up with `useId`.
+ * classNames are combined, and ids are deduplicated.
  * For all other props, the last prop object overrides all previous ones.
  * @param args - Multiple sets of props to merge together.
  */
diff --git a/packages/dev/s2-docs/pages/react-aria/FocusRing.mdx b/packages/dev/s2-docs/pages/react-aria/FocusRing.mdx
index 8c7ba8568b8..4511135bdab 100644
--- a/packages/dev/s2-docs/pages/react-aria/FocusRing.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/FocusRing.mdx
@@ -20,20 +20,6 @@ export const description = 'A utility component that applies a visual focus indi
 
 <PageDescription>{docs.exports.FocusRing.description}</PageDescription>
 
-## Introduction
-
-`FocusRing` is a utility component that can be used to apply a CSS class when an element has keyboard focus.
-This helps keyboard users determine which element on a page or in an application has keyboard focus as they
-navigate around. Focus rings are only visible when interacting with a keyboard so as not to distract mouse
-and touch screen users. When we are unable to detect if the user is using a mouse or touch screen, such as
-switching in from a different tab, we show the focus ring.
-
-If CSS classes are not being used for styling, see [useFocusRing](useFocusRing) for a hooks version.
-
-## Example
-
-This example shows how to use `<FocusRing>` to apply a CSS class when keyboard focus is on a button.
-
 ```tsx render files={["packages/dev/s2-docs/pages/react-aria/FocusRingExample.css"]}
 'use client';
 import {FocusRing} from '@react-aria/focus';
@@ -44,8 +30,18 @@ import './FocusRingExample.css';
 </FocusRing>
 ```
 
+## Features
+
+`FocusRing` is a utility component that can be used to apply a CSS class when an element has keyboard focus.
+This helps keyboard users determine which element on a page or in an application has keyboard focus as they
+navigate around. Focus rings are only visible when interacting with a keyboard so as not to distract mouse
+and touch screen users. When we are unable to detect if the user is using a mouse or touch screen, such as
+switching in from a different tab, we show the focus ring.
+
+If CSS classes are not being used for styling, see [useFocusRing](useFocusRing) for a hooks version.
+
 ## API
 
 ### FocusRing
 
-<PropTable links={docs.links} component={docs.exports.FocusRing} />
\ No newline at end of file
+<PropTable links={docs.links} component={docs.exports.FocusRing} />
diff --git a/packages/dev/s2-docs/pages/react-aria/FocusRingExample.css b/packages/dev/s2-docs/pages/react-aria/FocusRingExample.css
index 3d335cd4e5b..180854288e3 100644
--- a/packages/dev/s2-docs/pages/react-aria/FocusRingExample.css
+++ b/packages/dev/s2-docs/pages/react-aria/FocusRingExample.css
@@ -5,7 +5,8 @@
   border: none;
   color: white;
   font-size: 14px;
-  padding: 4px 8px;
+  padding: 8px 12px;
+  border-radius: 8px;
 }
 
 .button.focus-ring {
diff --git a/packages/dev/s2-docs/pages/react-aria/I18nProvider.mdx b/packages/dev/s2-docs/pages/react-aria/I18nProvider.mdx
index cb20e88fd14..87fee826e67 100644
--- a/packages/dev/s2-docs/pages/react-aria/I18nProvider.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/I18nProvider.mdx
@@ -18,14 +18,7 @@ export const description = 'Override the default browser locale with an applicat
 
 # I18nProvider
 
-## Introduction
-
-`I18nProvider` allows you to override the default locale as determined by the browser/system setting
-with a locale defined by your application (e.g. application setting). This should be done by wrapping
-your entire application in the provider, which will be cause all child elements to receive the new locale
-information via [useLocale](useLocale).
-
-## Example
+<PageDescription>{docs.exports.I18nProvider.description}</PageDescription>
 
 ```tsx
 import {I18nProvider} from '@react-aria/i18n';
@@ -35,6 +28,13 @@ import {I18nProvider} from '@react-aria/i18n';
 </I18nProvider>
 ```
 
+## Introduction
+
+`I18nProvider` allows you to override the default locale as determined by the browser/system setting
+with a locale defined by your application (e.g. application setting). This should be done by wrapping
+your entire application in the provider, which will be cause all child elements to receive the new locale
+information via [useLocale](useLocale).
+
 ## API
 
 ### I18nProvider
diff --git a/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx b/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx
index 27f110823e2..47789e9f038 100644
--- a/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx
@@ -11,6 +11,7 @@ import {Layout} from '../../src/Layout';
 export default Layout;
 import docs from 'docs:@react-aria/overlays';
 import {FunctionAPI} from '../../src/FunctionAPI';
+import {InlineAlert, Heading, Content} from '@react-spectrum/s2';
 
 export const section = 'Utilities';
 export const description = 'Allows specifying the container element where overlays like modals and popovers are rendered.';
@@ -26,12 +27,13 @@ Modals, Popovers, Toasts, and Tooltips will portal their overlay element to. Thi
 your app is already portalling other elements to a location other than the `document.body` and thus requires
 your React Aria components to send their overlays to the same container.
 
-Please note that `UNSAFE_PortalProvider` is considered `UNSAFE` because it is an escape hatch, and there are
-many places that an application could portal to. Not all of them will work, either with styling, accessibility,
+<InlineAlert variant="notice">
+  <Heading>Safety</Heading>
+  <Content>`UNSAFE_PortalProvider` is considered `UNSAFE`. Some portal locations may not work with styling, accessibility,
 or for a variety of other reasons. Typically, it is best to portal to the root of the entire application, e.g. the `body` element,
-outside of any possible overflow or stacking contexts. We envision `UNSAFE_PortalProvider` being used to group all of the portalled
-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.
+outside any possible overflow or stacking contexts. `UNSAFE_PortalProvider` can be used to group all of the portalled
+elements into a single container at the root of the app or to control the order of children of the `body` element.</Content>
+</InlineAlert>
 
 ## Example
 
diff --git a/packages/dev/s2-docs/pages/react-aria/SSRProvider.mdx b/packages/dev/s2-docs/pages/react-aria/SSRProvider.mdx
index eda0e248e0b..eb27a697f98 100644
--- a/packages/dev/s2-docs/pages/react-aria/SSRProvider.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/SSRProvider.mdx
@@ -10,23 +10,19 @@ governing permissions and limitations under the License. */}
 import {Layout} from '../../src/Layout';
 export default Layout;
 import docs from 'docs:@react-aria/ssr';
+import {InlineAlert, Heading, Content} from '@react-spectrum/s2';
 
 export const section = 'Utilities';
 export const description = 'Ensure consistent auto-generated IDs between server and client in React 16 and 17.';
 
 # SSRProvider
 
-## Introduction
-
-If you're using React 16 or 17, `SSRProvider` should be used as a wrapper for the entire application during server side rendering.
-It works together with the [useId](useId) hook to ensure that auto generated ids are consistent
-between the client and server by resetting the id internal counter on each request.
-See the [server side rendering](ssr) 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.
+<PageDescription>{docs.exports.SSRProvider.description}</PageDescription>
 
-## Example
+<InlineAlert variant="notice">
+  <Heading>React 16 or 17 only</Heading>
+  <Content>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.</Content>
+</InlineAlert>
 
 ```tsx
 import {SSRProvider} from '@react-aria/ssr';
@@ -36,6 +32,12 @@ import {SSRProvider} from '@react-aria/ssr';
 </SSRProvider>
 ```
 
+## Introduction
+
+If you're using React 16 or 17, `SSRProvider` should be used as a wrapper for the entire application during server side rendering.
+It works together with the [useId](useId) hook to ensure that auto generated ids are consistent
+between the client and server by resetting the id internal counter on each request.
+
 ## API
 
 ### SSRProvider
diff --git a/packages/dev/s2-docs/pages/react-aria/VisuallyHidden.mdx b/packages/dev/s2-docs/pages/react-aria/VisuallyHidden.mdx
index 8a01162bfb2..25145ef3955 100644
--- a/packages/dev/s2-docs/pages/react-aria/VisuallyHidden.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/VisuallyHidden.mdx
@@ -11,6 +11,7 @@ import {Layout} from '../../src/Layout';
 export default Layout;
 import docs from 'docs:@react-aria/visually-hidden';
 import {FunctionAPI} from '../../src/FunctionAPI';
+import {InlineAlert, Heading, Content} from '@react-spectrum/s2';
 
 export const section = 'Utilities';
 export const description = 'Hides its children visually but keeps content accessible to screen readers.';
@@ -19,43 +20,30 @@ export const description = 'Hides its children visually but keeps content access
 
 <PageDescription>{docs.exports.VisuallyHidden.description}</PageDescription>
 
-## Gotchas
-
-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.
-
-```tsx
-<label style={{position: 'relative'}}>
-  <VisuallyHidden>
-    <input type="checkbox" />
-  </VisuallyHidden>
-  <span>Subscribe to our newsletter</span>
-</label>
-```
-
-##  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
-options as the component, and returns props to spread onto the element that should be hidden.
-
-<FunctionAPI links={docs.links} function={docs.exports.useVisuallyHidden} />
-
-### Example
-
 ```tsx
-import {useVisuallyHidden} from '@react-aria/visually-hidden';
-
-let {visuallyHiddenProps} = useVisuallyHidden();
+import {VisuallyHidden} from 'react-aria';
 
-<div {...visuallyHiddenProps}>I am hidden</div>
+<VisuallyHidden>I am hidden</VisuallyHidden>
 ```
 
+<InlineAlert variant="notice">
+  <Heading>Positioning</Heading>
+  <Content>VisuallyHidden is positioned absolutely, so it must have a `position: relative` or `position: absolute` ancestor. Otherwise, undesired scrollbars may appear.</Content>
+</InlineAlert>
+
 ## API
 
 ### VisuallyHidden
 
 <PropTable links={docs.links} component={docs.exports.VisuallyHidden} />
 
+### useVisuallyHidden
+
+For additional rendering flexibility, use the `useVisuallyHidden` hook . It supports the same
+options as the component, and returns props to spread onto the element that should be hidden.
+
+<FunctionAPI links={docs.links} function={docs.exports.useVisuallyHidden} />
+
 ## Example
 
 See [useRadioGroup](https://react-spectrum.adobe.com/react-aria/useRadioGroup.html#styling) and [useCheckbox](https://react-spectrum.adobe.com/react-aria/useCheckbox.html#styling)
diff --git a/packages/dev/s2-docs/pages/react-aria/mergeProps.mdx b/packages/dev/s2-docs/pages/react-aria/mergeProps.mdx
index ccb7909b895..b7e1fba7b7a 100644
--- a/packages/dev/s2-docs/pages/react-aria/mergeProps.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/mergeProps.mdx
@@ -19,16 +19,6 @@ export const description = 'Combines multiple prop objects together, merging eve
 
 <PageDescription>{docs.exports.mergeProps.description}</PageDescription>
 
-## 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. `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.
-
-## Example
-
 ```tsx
 import {mergeProps} from '@react-aria/utils';
 
diff --git a/packages/dev/s2-docs/pages/react-aria/useClipboard.mdx b/packages/dev/s2-docs/pages/react-aria/useClipboard.mdx
index 4bfddecdf88..793979327ee 100644
--- a/packages/dev/s2-docs/pages/react-aria/useClipboard.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useClipboard.mdx
@@ -34,8 +34,8 @@ This example shows a simple focusable element which supports copying a string wh
 ```tsx render files={["packages/dev/s2-docs/pages/react-aria/useClipboardExample.css"]}
 'use client';
 import React from 'react';
-import type {TextDropItem} from '@react-aria/dnd';
-import {useClipboard} from '@react-aria/dnd';
+import type {TextDropItem} from 'react-aria';
+import {useClipboard} from 'react-aria';
 import './useClipboardExample.css';
 import 'vanilla-starter/theme.css';
 
@@ -98,7 +98,7 @@ This example copies two items, each of which contains representations as plain t
 ```tsx render
 'use client';
 import React from 'react';
-import {useClipboard} from '@react-aria/dnd';
+import {useClipboard} from 'react-aria';
 
 function Copyable() {
   let {clipboardProps} = useClipboard({
@@ -197,7 +197,7 @@ The example below works with the above `Copyable` example using a custom app-spe
 ```tsx render
 'use client';
 import React from 'react';
-import {useClipboard} from '@react-aria/dnd';
+import {useClipboard} from 'react-aria';
 
 ///- begin collapse -///
 function Copyable() {
@@ -286,8 +286,8 @@ This example accepts JPEG and PNG image files, and renders them by creating a lo
 ```tsx render
 'use client';
 import React from 'react';
-import {useClipboard} from '@react-aria/dnd';
-import type {FileDropItem} from '@react-aria/dnd';
+import {useClipboard} from 'react-aria';
+import type {FileDropItem} from 'react-aria';
 
 function Pasteable() {
   let [file, setFile] = React.useState(null);
@@ -313,8 +313,8 @@ This example renders the file names within a dropped directory in a grid.
 ```tsx render files={["packages/dev/s2-docs/pages/react-aria/useClipboardGrid.css"]}
 'use client';
 import React from 'react';
-import {useClipboard} from '@react-aria/dnd'
-import type {DirectoryDropItem} from '@react-aria/dnd';
+import {useClipboard} from 'react-aria'
+import type {DirectoryDropItem} from 'react-aria';
 import File from '@react-spectrum/s2/icons/File';
 import Folder from '@react-spectrum/s2/icons/Folder';
 import './useClipboardGrid.css';
@@ -363,8 +363,8 @@ If you need to temporarily disable copying and pasting, you can pass the `isDisa
 ```tsx render
 'use client';
 import React from 'react';
-import type {TextDropItem} from '@react-aria/dnd';
-import {useClipboard} from '@react-aria/dnd';
+import type {TextDropItem} from 'react-aria';
+import {useClipboard} from 'react-aria';
 
 function Copyable() {
   let {clipboardProps} = useClipboard({
diff --git a/packages/dev/s2-docs/pages/react-aria/useCollator.mdx b/packages/dev/s2-docs/pages/react-aria/useCollator.mdx
index 128f7f72898..93d9a5d8cf9 100644
--- a/packages/dev/s2-docs/pages/react-aria/useCollator.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useCollator.mdx
@@ -18,6 +18,8 @@ export const description = 'Wraps Intl.Collator and compares and sorts strings a
 
 # useCollator
 
+<PageDescription>{docs.exports.useCollator.description}</PageDescription>
+
 ## Introduction
 
 `useCollator` wraps a builtin browser [Intl.Collator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator)
@@ -33,7 +35,7 @@ This example includes two textfields and compares the values of the two fields u
 ```tsx render
 'use client';
 import React from 'react';
-import {useCollator} from '@react-aria/i18n';
+import {useCollator} from 'react-aria';
 
 function Example() {
   let [first, setFirst] = React.useState('');
diff --git a/packages/dev/s2-docs/pages/react-aria/useDateFormatter.mdx b/packages/dev/s2-docs/pages/react-aria/useDateFormatter.mdx
index b5a93111224..80a95e6eb0d 100644
--- a/packages/dev/s2-docs/pages/react-aria/useDateFormatter.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useDateFormatter.mdx
@@ -18,6 +18,8 @@ export const description = 'Wraps Intl.DateTimeFormat and formats dates for the
 
 # useDateFormatter
 
+<PageDescription>{docs.exports.useDateFormatter.description}</PageDescription>
+
 ## Introduction
 
 `useDateFormatter` wraps a builtin browser [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)
@@ -33,7 +35,7 @@ using the [I18nProvider](I18nProvider) to specify the locale to display.
 
 ```tsx render
 'use client';
-import {I18nProvider, useDateFormatter} from '@react-aria/i18n';
+import {I18nProvider, useDateFormatter} from 'react-aria';
 
 function CurrentDate() {
   let formatter = useDateFormatter();
diff --git a/packages/dev/s2-docs/pages/react-aria/useDrag.mdx b/packages/dev/s2-docs/pages/react-aria/useDrag.mdx
index 92a1122db58..61b3a4bafb7 100644
--- a/packages/dev/s2-docs/pages/react-aria/useDrag.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useDrag.mdx
@@ -26,7 +26,7 @@ export const description = 'Handles drag interactions for an element, providing
 
 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) to learn more.
+See the [drag and drop guide](dnd) to learn more.
 
 ## Example
 
@@ -34,7 +34,7 @@ This example shows how to make a simple draggable element that provides data as
 
 ```tsx render files={["packages/dev/s2-docs/pages/react-aria/DropTarget.tsx", "packages/dev/s2-docs/pages/react-aria/useDragExample.css"]}
 "use client";
-import {useDrag} from '@react-aria/dnd';
+import {useDrag} from 'react-aria';
 import {DropTarget} from './DropTarget.tsx';
 import './useDragExample.css';
 import 'vanilla-starter/theme.css';
@@ -68,7 +68,7 @@ This example drags two items, each of which contains representations as plain te
 
 ```tsx render
 "use client";
-import {useDrag} from '@react-aria/dnd';
+import {useDrag} from 'react-aria';
 import {DropTarget} from './DropTarget.tsx';
 
 function Draggable() {
@@ -114,9 +114,9 @@ This example renders a custom drag preview which shows the text of the first dra
 ```tsx render
 "use client";
 import React from 'react';
-import {useDrag} from '@react-aria/dnd';
+import {useDrag} from 'react-aria';
 import {DropTarget} from './DropTarget.tsx';
-import {DragPreview} from '@react-aria/dnd';
+import {DragPreview} from 'react-aria';
 
 function Draggable() {
   let preview = React.useRef(null);
@@ -161,7 +161,7 @@ This example removes the draggable element from the UI when a move operation is
 ```tsx render
 "use client"
 import React from 'react';
-import {useDrag} from '@react-aria/dnd';
+import {useDrag} from 'react-aria';
 import {DropTarget} from './DropTarget.tsx';
 
 function Draggable() {
@@ -204,7 +204,7 @@ The drag source can also control which drop operations are allowed for the data.
 
 ```tsx render
 "use client";
-import {useDrag} from '@react-aria/dnd';
+import {useDrag} from 'react-aria';
 import {DropTarget} from './DropTarget.tsx';
 
 function Draggable() {
@@ -245,7 +245,7 @@ When the `hasDragButton` option is enabled, the keyboard interactions are moved
 ```tsx render
 "use client";
 import React from 'react';
-import {useDrag} from '@react-aria/dnd';
+import {useDrag} from 'react-aria';
 import {useButton} from '@react-aria/button';
 import {DropTarget} from './DropTarget.tsx';
 
@@ -285,7 +285,7 @@ If you need to temporarily disable dragging, you can pass the `isDisabled` optio
 
 ```tsx render
 "use client";
-import {useDrag} from '@react-aria/dnd';
+import {useDrag} from 'react-aria';
 function Draggable() {
   let {dragProps, isDragging} = useDrag({
     getItems() {
diff --git a/packages/dev/s2-docs/pages/react-aria/useDrop.mdx b/packages/dev/s2-docs/pages/react-aria/useDrop.mdx
index ba7996ebaa1..187bee59b23 100644
--- a/packages/dev/s2-docs/pages/react-aria/useDrop.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useDrop.mdx
@@ -26,7 +26,7 @@ export const description = 'Handles drop interactions for a target element, prov
 
 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) to learn more.
+See the [drag and drop guide](dnd) to learn more.
 
 ## Example
 
@@ -35,8 +35,8 @@ This example shows how to make a simple drop target that accepts plain text data
 ```tsx render files={["packages/dev/s2-docs/pages/react-aria/Draggable.tsx", "packages/dev/s2-docs/pages/react-aria/useDragExample.css"]}
 'use client';
 import React from 'react';
-import type {TextDropItem} from '@react-aria/dnd';
-import {useDrop} from '@react-aria/dnd';
+import type {TextDropItem} from 'react-aria';
+import {useDrop} from 'react-aria';
 import {Draggable} from './Draggable.tsx';
 import './useDragExample.css';
 import 'vanilla-starter/theme.css';
@@ -81,7 +81,7 @@ The example below finds the first available item that includes a custom app-spec
 ```tsx render
 'use client';
 import React from 'react';
-import {useDrop} from '@react-aria/dnd';
+import {useDrop} from 'react-aria';
 import {Draggable} from './Draggable.tsx';
 
 function DropTarget() {
@@ -121,8 +121,8 @@ This example accepts JPEG and PNG image files, and renders them by creating a lo
 ```tsx render
 'use client';
 import React from 'react';
-import type {FileDropItem} from '@react-aria/dnd';
-import {useDrop} from '@react-aria/dnd';
+import type {FileDropItem} from 'react-aria';
+import {useDrop} from 'react-aria';
 function DropTarget() {
   let [file, setFile] = React.useState(null);
   let ref = React.useRef(null);
@@ -153,10 +153,10 @@ This example renders the file names within a dropped directory in a grid.
 ```tsx render files={["packages/dev/s2-docs/pages/react-aria/useClipboardGrid.css"]}
 'use client';
 import React from 'react';
-import type {DirectoryDropItem} from '@react-aria/dnd';
+import type {DirectoryDropItem} from 'react-aria';
 import File from '@react-spectrum/s2/icons/File';
 import Folder from '@react-spectrum/s2/icons/Folder';
-import {useDrop} from '@react-aria/dnd';
+import {useDrop} from 'react-aria';
 import './useClipboardGrid.css';
 
 function DropTarget() {
@@ -224,7 +224,7 @@ In the below example, the drop target only supports dropping PNG images. If a PN
 ```tsx render
 'use client';
 import React from 'react';
-import {useDrop} from '@react-aria/dnd';
+import {useDrop} from 'react-aria';
 function DropTarget() {
   let [file, setFile] = React.useState(null);
   let ref = React.useRef(null);
@@ -293,7 +293,7 @@ This example logs all events that occur within the drop target:
 ```tsx render
 'use client';
 import React from 'react';
-import {useDrop} from '@react-aria/dnd';
+import {useDrop} from 'react-aria';
 import {Draggable} from './Draggable.tsx';
 
 function DropTarget() {
@@ -325,8 +325,8 @@ If you need to temporarily disable dropping, you can pass the `isDisabled` optio
 ```tsx render
 'use client';
 import React from 'react';
-import type {TextDropItem} from '@react-aria/dnd';
-import {useDrop} from '@react-aria/dnd';
+import type {TextDropItem} from 'react-aria';
+import {useDrop} from 'react-aria';
 import {Draggable} from './Draggable.tsx';
 
 function DropTarget() {
diff --git a/packages/dev/s2-docs/pages/react-aria/useField.mdx b/packages/dev/s2-docs/pages/react-aria/useField.mdx
index f1789da0469..2354c02afd7 100644
--- a/packages/dev/s2-docs/pages/react-aria/useField.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useField.mdx
@@ -32,7 +32,7 @@ By default, `useField` assumes that the label is a native HTML `<label>` element
 
 ```tsx render
 'use client';
-import {useField} from '@react-aria/label';
+import {useField} from 'react-aria';
 
 function ContactPicker(props) {
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField(props);
diff --git a/packages/dev/s2-docs/pages/react-aria/useFilter.mdx b/packages/dev/s2-docs/pages/react-aria/useFilter.mdx
index cb660de51f9..e99e68562b2 100644
--- a/packages/dev/s2-docs/pages/react-aria/useFilter.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useFilter.mdx
@@ -17,6 +17,8 @@ export const description = 'Provides locale-sensitive string matching for filter
 
 # useFilter
 
+<PageDescription>{docs.exports.useFilter.description}</PageDescription>
+
 ## Introduction
 
 `useFilter` provides functions for filtering or searching based on substring matches. The builtin JavaScript
@@ -33,7 +35,7 @@ and diacritics.
 ```tsx render
 'use client';
 import React from 'react';
-import {useFilter} from '@react-aria/i18n';
+import {useFilter} from 'react-aria';
 
 function Example() {
   const composers = [
diff --git a/packages/dev/s2-docs/pages/react-aria/useFocus.mdx b/packages/dev/s2-docs/pages/react-aria/useFocus.mdx
index 5a6ee97885f..8dbd617292e 100644
--- a/packages/dev/s2-docs/pages/react-aria/useFocus.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useFocus.mdx
@@ -19,25 +19,11 @@ export const description = 'Handles focus events for the target element only, no
 
 <PageDescription>{docs.exports.useFocus.description}</PageDescription>
 
-## Features
-
-`useFocus` handles focus interactions for an element. Unlike React's built-in focus events,
-`useFocus` does not fire focus events for child elements of the target. This matches DOM
-behavior where focus events do not bubble. This is similar to
-the [:focus](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus) pseudo class
-in CSS.
-
-To handle focus events on descendants of an element, see [useFocusWithin](useFocusWithin).
-
-## Example
-
-This example shows a simple input element that handles focus events with `useFocus` and logs them to a list below.
-
 ```tsx render
 "use client";
 
 import React from 'react';
-import {useFocus} from '@react-aria/interactions';
+import {useFocus} from 'react-aria';
 
 function Example() {
   let [events, setEvents] = React.useState([]);
@@ -71,6 +57,16 @@ function Example() {
 }
 ```
 
+## Features
+
+`useFocus` handles focus interactions for an element. Unlike React's built-in focus events,
+`useFocus` does not fire focus events for child elements of the target. This matches DOM
+behavior where focus events do not bubble. This is similar to
+the [:focus](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus) pseudo class
+in CSS.
+
+To handle focus events on descendants of an element, see [useFocusWithin](useFocusWithin).
+
 ## API
 
 <FunctionAPI function={docs.exports.useFocus} links={docs.links} />
diff --git a/packages/dev/s2-docs/pages/react-aria/useFocusRing.mdx b/packages/dev/s2-docs/pages/react-aria/useFocusRing.mdx
index 02f8953d193..c136697ae8b 100644
--- a/packages/dev/s2-docs/pages/react-aria/useFocusRing.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useFocusRing.mdx
@@ -20,27 +20,9 @@ export const description = 'Determines whether a focus ring should be displayed
 
 <PageDescription>{docs.exports.useFocusRing.description}</PageDescription>
 
-## Introduction
-
-The `useFocusRing` hook returns whether a focus ring should be displayed to indicate keyboard focus for a component.
-This helps keyboard users determine which element on a page or in an application has keyboard focus as they
-navigate around. Focus rings are only visible when interacting with a keyboard so as not to distract mouse
-and touch screen users.
-
-If CSS classes are being used for styling, see the [FocusRing](FocusRing) component for a shortcut.
-
-## Example
-
-This example shows how to use `useFocusRing` to adjust styling when keyboard focus is on a button.
-Specifically, the `outline` property is used to create the focus ring when `isFocusVisible` is true.
-
-See [useCheckbox](https://react-spectrum.adobe.com/react-aria/useCheckbox.html#styling), [useRadioGroup](https://react-spectrum.adobe.com/react-aria/useRadioGroup.html#styling), and
-[useSwitch](https://react-spectrum.adobe.com/react-aria/useSwitch.html#example) for more advanced examples of focus rings with other styling
-techniques.
-
 ```tsx render
 'use client';
-import {useFocusRing} from '@react-aria/focus';
+import {useFocusRing} from 'react-aria';
 
 function Example() {
   let {isFocusVisible, focusProps} = useFocusRing();
@@ -55,7 +37,8 @@ function Example() {
         border: 'none',
         color: 'white',
         fontSize: 14,
-        padding: '4px 8px',
+        padding: '8px 12px',
+        borderRadius: 8,
         outline: isFocusVisible ? '2px solid dodgerblue' : 'none',
         outlineOffset: 2
       }}>
@@ -65,6 +48,15 @@ function Example() {
 }
 ```
 
+## Features
+
+The `useFocusRing` hook returns whether a focus ring should be displayed to indicate keyboard focus for a component.
+This helps keyboard users determine which element on a page or in an application has keyboard focus as they
+navigate around. Focus rings are only visible when interacting with a keyboard so as not to distract mouse
+and touch screen users.
+
+If CSS classes are being used for styling, see the [FocusRing](FocusRing) component for a shortcut.
+
 ## API
 
 <FunctionAPI links={docs.links} function={docs.exports.useFocusRing} />
diff --git a/packages/dev/s2-docs/pages/react-aria/useFocusVisible.mdx b/packages/dev/s2-docs/pages/react-aria/useFocusVisible.mdx
index 75343d2e9b5..c2e0e9cf4df 100644
--- a/packages/dev/s2-docs/pages/react-aria/useFocusVisible.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useFocusVisible.mdx
@@ -20,32 +20,9 @@ export const description = 'Determines whether keyboard focus should be visible
 
 <PageDescription>{docs.exports.useFocusVisible.description}</PageDescription>
 
-## Features
-
-`useFocusVisible` handles focus interactions for the page and determines whether keyboard focus
-should be visible (e.g. with a focus ring). Focus visibility is computed based on the current
-interaction mode of the user. When the user interacts via a mouse or touch, then focus is not
-visible. When the user interacts via a keyboard or screen reader, then focus is visible. This is similar to
-the [:focus-visible](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) pseudo class
-in CSS.
-
-To determine whether a focus ring should be visible for an individual component rather than
-globally, see [useFocusRing](useFocusRing).
-
-## Example
-
-This example shows focus visible state and updates as you interact with the page. By default,
-when the page loads, it is true. If you press anywhere on the page with a mouse or touch,
-then focus visible state is set to false. If you keyboard navigate around the page then
-it is set to true again.
-
-Note that this example uses the `isTextInput` option so that only certain navigation keys
-cause focus visible state to appear. This prevents focus visible state from appearing when
-typing text in a text field.
-
 ```tsx render
 "use client";
-import {useFocusVisible} from '@react-aria/interactions';
+import {useFocusVisible} from 'react-aria';
 
 function Example() {
   let {isFocusVisible} = useFocusVisible({isTextInput: true});
@@ -64,6 +41,18 @@ function Example() {
 }
 ```
 
+## Features
+
+`useFocusVisible` handles focus interactions for the page and determines whether keyboard focus
+should be visible (e.g. with a focus ring). Focus visibility is computed based on the current
+interaction mode of the user. When the user interacts via a mouse or touch, then focus is not
+visible. When the user interacts via a keyboard or screen reader, then focus is visible. This is similar to
+the [:focus-visible](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) pseudo class
+in CSS.
+
+To determine whether a focus ring should be visible for an individual component rather than
+globally, see [useFocusRing](useFocusRing).
+
 ## API
 
 <FunctionAPI function={docs.exports.useFocusVisible} links={docs.links} />
diff --git a/packages/dev/s2-docs/pages/react-aria/useFocusWithin.mdx b/packages/dev/s2-docs/pages/react-aria/useFocusWithin.mdx
index 2efa95d3e02..b41f8cc6ede 100644
--- a/packages/dev/s2-docs/pages/react-aria/useFocusWithin.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useFocusWithin.mdx
@@ -19,30 +19,10 @@ export const description = 'Handles focus interactions for an element and its de
 
 <PageDescription>{docs.exports.useFocusWithin.description}</PageDescription>
 
-## Features
-
-`useFocusWithin` handles focus interactions for an element and its descendants. Focus is "within"
-an element when either the element itself or a descendant element has focus. This is similar to
-the [:focus-within](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within) pseudo class
-in CSS.
-
-To handle focus events on only the target element, and not descendants, see [useFocus](useFocus).
-
-## Example
-
-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
-fired when the wrapper gains and loses focus, not when focus moves within the group.
-
-{/* We don't have component hook docs yet */}
-{/* **NOTE: for more advanced text field functionality, see [useTextField](useTextField).** */}
-
 ```tsx render
 "use client";
 import React from 'react';
-import {useFocusWithin} from '@react-aria/interactions';
+import {useFocusWithin} from 'react-aria';
 
 function Example() {
   let [events, setEvents] = React.useState([]);
@@ -87,6 +67,15 @@ function Example() {
 }
 ```
 
+## Features
+
+`useFocusWithin` handles focus interactions for an element and its descendants. Focus is "within"
+an element when either the element itself or a descendant element has focus. This is similar to
+the [:focus-within](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within) pseudo class
+in CSS.
+
+To handle focus events on only the target element, and not descendants, see [useFocus](useFocus).
+
 ## API
 
 <FunctionAPI function={docs.exports.useFocusWithin} links={docs.links} />
diff --git a/packages/dev/s2-docs/pages/react-aria/useHover.mdx b/packages/dev/s2-docs/pages/react-aria/useHover.mdx
index 9700cc8605d..a10a778125d 100644
--- a/packages/dev/s2-docs/pages/react-aria/useHover.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useHover.mdx
@@ -13,6 +13,8 @@ import {InterfaceType} from '../../src/types';
 import {FunctionAPI} from '../../src/FunctionAPI';
 import docs from 'docs:@react-aria/interactions';
 import typesDocs from 'docs:@react-types/shared/src/events.d.ts';
+import {InlineAlert, Heading, Content} from '@react-spectrum/s2';
+
 export const section = 'Interactions';
 export const description = 'Handles hover interactions with proper support for touch devices.';
 
@@ -20,38 +22,10 @@ export const description = 'Handles hover interactions with proper support for t
 
 <PageDescription>{docs.exports.useHover.description}</PageDescription>
 
-## Features
-
-* Uses pointer events where available, with fallbacks to mouse and touch events
-* Ignores emulated mouse events in mobile browsers
-
-`useHover` is similar to the [:hover](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) pseudo class in CSS,
-but `:hover` is problematic on touch devices due to mouse emulation in mobile browsers. Depending on the browser
-and device, `:hover` may never apply, or may apply continuously until the user touches another element.
-`useHover` only applies when the pointer is truly capable of hovering, and emulated mouse events are ignored.
-
-Read our [blog post](blog/building-a-button-part-2) about the complexities of hover event handling to learn more.
-
-## Accessibility
-
-Hover interactions should never be the only way to interact with an element because they are not
-supported across all devices. Alternative interactions should be provided on touch devices, for
-example a long press or an explicit button to tap.
-
-In addition, even on devices with hover support, users may be using a keyboard or screen reader
-to navigate your app, which also do not trigger hover events. Hover interactions should be paired
-with focus events in order to expose the content to keyboard users.
-
-## Example
-
-This example shows a simple target that handles hover events with `useHover` and logs them to a
-list below. It also uses the `isHovered` state to adjust the background
-color when the target is hovered.
-
 ```tsx render
 "use client";
 import React from 'react';
-import {useHover} from '@react-aria/interactions';
+import {useHover} from 'react-aria';
 
 function Example() {
   let [events, setEvents] = React.useState([]);
@@ -72,7 +46,8 @@ function Example() {
           background: isHovered ? 'darkgreen' : 'green',
           color: 'white',
           display: 'inline-block',
-          padding: 4,
+          padding: '8px 12px',
+          borderRadius: 8,
           cursor: 'pointer'
         }}
         role="button"
@@ -91,11 +66,21 @@ function Example() {
 }
 ```
 
+## Features
+
+`useHover` is similar to the [:hover](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) CSS pseudo class, but only applies on mouse interactions. `:hover` is sticky on touch devices, applying continuously until the user interacts with another element, and on devices with both mouse and touch support there is no CSS-only way to apply hover states only when interacting with a pointer. Read our [blog post](blog/building-a-button-part-2) to learn more.
+
+<InlineAlert variant="notice">
+  <Heading>Accessibility</Heading>
+  <Content>Hover interactions should never be the only way to interact with an element because they are not
+supported across all devices. Alternative interactions should be provided on touch devices, for
+example a long press or an explicit button to tap.</Content>
+</InlineAlert>
+
 ## API
 
 <FunctionAPI function={docs.exports.useHover} links={docs.links} />
 
-
 ### HoverProps
 
 <InterfaceType {...docs.exports.HoverProps} />
@@ -106,7 +91,4 @@ function Example() {
 
 ### HoverEvent
 
-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 8d37f686f0f..bdde3695d98 100644
--- a/packages/dev/s2-docs/pages/react-aria/useId.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useId.mdx
@@ -27,7 +27,7 @@ from props can used instead of the autogenerated `id` when available.
 ## Example
 
 ```tsx
-import {useId} from '@react-aria/utils';
+import {useId} from 'react-aria';
 
 let elementId = useId();
 let componentId = useId(props.id);
diff --git a/packages/dev/s2-docs/pages/react-aria/useIsSSR.mdx b/packages/dev/s2-docs/pages/react-aria/useIsSSR.mdx
index b8de8b0bb08..940829ace0a 100644
--- a/packages/dev/s2-docs/pages/react-aria/useIsSSR.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useIsSSR.mdx
@@ -33,7 +33,7 @@ wrapping your application. See the [server side rendering](ssr) docs for more in
 ## Example
 
 ```tsx
-import {useIsSSR} from '@react-aria/ssr';
+import {useIsSSR} from 'react-aria';
 
 function MyComponent() {
   let isSSR = useIsSSR();
diff --git a/packages/dev/s2-docs/pages/react-aria/useKeyboard.mdx b/packages/dev/s2-docs/pages/react-aria/useKeyboard.mdx
index 959b012d79d..d11507d71af 100644
--- a/packages/dev/s2-docs/pages/react-aria/useKeyboard.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useKeyboard.mdx
@@ -19,24 +19,10 @@ export const description = 'Handles keyboard interactions with improved event pr
 
 <PageDescription>{docs.exports.useKeyboard.description}</PageDescription>
 
-## Features
-
-`useKeyboard` handles keyboard interactions. The only difference from DOM events is that propagation
-is stopped by default if there is an event handler, unless `event.continuePropagation()` is called.
-This provides better modularity by default, so that a parent component doesn't respond to an event
-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.
-
-## Example
-
-This example shows a simple input element that handles keyboard events with `useKeyboard` and logs them to a list below.
-
-**NOTE: for more advanced text field functionality, see [useTextField](https://react-spectrum.adobe.com/react-aria/useTextField.html).**
-
 ```tsx render
 "use client"
 import React from 'react';
-import {useKeyboard} from '@react-aria/interactions';
+import {useKeyboard} from 'react-aria';
 
 function Example() {
   let [events, setEvents] = React.useState([]);
@@ -68,6 +54,14 @@ function Example() {
 }
 ```
 
+## Features
+
+`useKeyboard` handles keyboard interactions. The only difference from DOM events is that propagation
+is stopped by default if there is an event handler, unless `event.continuePropagation()` is called.
+This provides better modularity by default, so that a parent component doesn't respond to an event
+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.
+
 ## API
 
 <FunctionAPI function={docs.exports.useKeyboard} links={docs.links} />
diff --git a/packages/dev/s2-docs/pages/react-aria/useLabel.mdx b/packages/dev/s2-docs/pages/react-aria/useLabel.mdx
index 1b9491f4143..1998b24236e 100644
--- a/packages/dev/s2-docs/pages/react-aria/useLabel.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useLabel.mdx
@@ -27,7 +27,7 @@ creating an id for the field and associates the label with it.
 
 ```tsx render
 'use client';
-import {useLabel} from '@react-aria/label';
+import {useLabel} from 'react-aria';
 
 function ColorField(props) {
   let {labelProps, fieldProps} = useLabel(props);
diff --git a/packages/dev/s2-docs/pages/react-aria/useLandmark.mdx b/packages/dev/s2-docs/pages/react-aria/useLandmark.mdx
index d46a9962bce..2b0cd158913 100644
--- a/packages/dev/s2-docs/pages/react-aria/useLandmark.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useLandmark.mdx
@@ -19,33 +19,9 @@ export const description = 'Enables keyboard navigation between page landmarks.'
 
 <PageDescription>{docs.exports.useLandmark.description}</PageDescription>
 
-## 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.
-By default, browsers do not provide a consistent way to navigate between landmarks using the keyboard.
-The `useLandmark` hook enables keyboard navigation between landmarks, and provides a consistent experience across browsers.
-
-* <Keyboard>F6</Keyboard> and <Keyboard>Shift+F6</Keyboard> key navigation between landmarks
-* <Keyboard>Alt+F6</Keyboard> key navigation to the main landmark
-* Support for navigating nested landmarks
-
-## Anatomy
-
-Landmark elements can be registered with the `useLandmark` hook. The `role` prop is required.
-
-Pressing <Keyboard>F6</Keyboard> will move focus to the next landmark on the page, and pressing <Keyboard>Shift+F6</Keyboard> will move focus to the previous landmark.
-If an element within a landmark was previously focused before leaving that landmark, focus will return to that element when navigating back to that landmark.
-<Keyboard>Alt+F6</Keyboard> will always move focus to the main landmark if it has been registered.
-
-If multiple landmarks are registered with the same role, they should have unique labels, which can be provided by aria-label or aria-labelledby.
-
-For an example of landmarks in use, see the [useToastRegion](https://react-spectrum.adobe.com/react-aria/useToast.html#anatomy) documentation.
-
-## Example
-
 ```tsx render
 "use client";
-import {useLandmark} from '@react-aria/landmark';
+import {useLandmark} from 'react-aria';
 import {useRef} from 'react';
 
 function Navigation(props) {
@@ -95,6 +71,28 @@ function Search(props) {
 </div>
 ```
 
+## 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.
+By default, browsers do not provide a consistent way to navigate between landmarks using the keyboard.
+The `useLandmark` hook enables keyboard navigation between landmarks, and provides a consistent experience across browsers.
+
+* <Keyboard>F6</Keyboard> and <Keyboard>Shift+F6</Keyboard> key navigation between landmarks
+* <Keyboard>Alt+F6</Keyboard> key navigation to the main landmark
+* Support for navigating nested landmarks
+
+## Anatomy
+
+Landmark elements can be registered with the `useLandmark` hook. The `role` prop is required.
+
+Pressing <Keyboard>F6</Keyboard> will move focus to the next landmark on the page, and pressing <Keyboard>Shift+F6</Keyboard> will move focus to the previous landmark.
+If an element within a landmark was previously focused before leaving that landmark, focus will return to that element when navigating back to that landmark.
+<Keyboard>Alt+F6</Keyboard> will always move focus to the main landmark if it has been registered.
+
+If multiple landmarks are registered with the same role, they should have unique labels, which can be provided by aria-label or aria-labelledby.
+
+For an example of landmarks in use, see the [useToastRegion](https://react-spectrum.adobe.com/react-aria/useToast.html#anatomy) documentation.
+
 ## API
 
 <FunctionAPI function={docs.exports.useLandmark} links={docs.links} />
diff --git a/packages/dev/s2-docs/pages/react-aria/useLocale.mdx b/packages/dev/s2-docs/pages/react-aria/useLocale.mdx
index 7ed25b06402..4f4c71b6ea1 100644
--- a/packages/dev/s2-docs/pages/react-aria/useLocale.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useLocale.mdx
@@ -17,6 +17,7 @@ export const description = 'Provides access to the current locale and layout dir
 
 # useLocale
 
+<PageDescription>{docs.exports.useLocale.description}</PageDescription>
 
 ## Introduction
 
@@ -32,7 +33,7 @@ so that the browser knows which language and direction the user interface should
 ## Example
 
 ```tsx
-import {useLocale} from '@react-aria/i18n';
+import {useLocale} from 'react-aria';
 
 function YourApp() {
   let {locale, direction} = useLocale();
diff --git a/packages/dev/s2-docs/pages/react-aria/useLongPress.mdx b/packages/dev/s2-docs/pages/react-aria/useLongPress.mdx
index 9e6c89275ef..15379daa8cb 100644
--- a/packages/dev/s2-docs/pages/react-aria/useLongPress.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useLongPress.mdx
@@ -13,6 +13,8 @@ import {FunctionAPI} from '../../src/FunctionAPI';
 import docs from 'docs:@react-aria/interactions';
 import typesDocs from 'docs:@react-types/shared/src/events.d.ts';
 import {InterfaceType} from '../../src/types';
+import {InlineAlert, Heading, Content} from '@react-spectrum/s2';
+
 export const section = 'Interactions';
 export const description = 'Handles long press interactions across mouse and touch devices.';
 
@@ -20,38 +22,18 @@ export const description = 'Handles long press interactions across mouse and tou
 
 <PageDescription>{docs.exports.useLongPress.description}</PageDescription>
 
-## Features
-
-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
-* Ignores emulated mouse events in mobile browsers
-* Prevents text selection on touch devices while long pressing
-* Prevents browser and OS context menus from appearing while long pressing
-* Customizable time threshold for long press
-* Supports an accessibility description to indicate to assistive technology users that a long press action is available
-
-## Example
-
-This example shows a button that has both a normal press action using [usePress](usePress), as well as a long
-press action using `useLongPress`. Pressing the button will set the mode to "Normal speed", and long pressing it will
-set the mode to "Hyper speed". All of the emitted events are also logged below. Note that when long pressing the button,
-only a long press is emitted, and no normal press is emitted on pointer up.
-
-**Note**: this example does not have a keyboard accessible way to trigger the long press action. Because the method of triggering
-this action will differ depending on the component, it is outside the scope of `useLongPress`. Make sure to implement a keyboard
-friendly alternative to all long press interactions if you are using this hook directly.
-
 ```tsx render
 "use client";
 import React from 'react';
-import {mergeProps} from '@react-aria/utils';
+import {mergeProps} from 'react-aria';
 import {useLongPress, usePress} from '@react-aria/interactions';
 
 function Example() {
   let [events, setEvents] = React.useState([]);
   let [mode, setMode] = React.useState('Activate');
+
+  /*- begin focus -*/
+  // Long press to activate "Hyper speed"
   let {longPressProps} = useLongPress({
     accessibilityDescription: 'Long press to activate hyper speed',
     onLongPressStart: e => setEvents(
@@ -67,7 +49,9 @@ function Example() {
       );
     }
   });
+  /*- end focus -*/
 
+  // Short press to activate "Normal speed"
   let {pressProps} = usePress({
     onPress: e => {
       setMode('Normal speed');
@@ -92,6 +76,23 @@ function Example() {
 }
 ```
 
+<InlineAlert variant="notice">
+  <Heading>Accessibility</Heading>
+  <Content>This example does not have a keyboard accessible way to trigger the long press action. Because the method of triggering
+this action will differ depending on the component, it is outside the scope of `useLongPress`. Make sure to implement a keyboard
+friendly alternative to all long press interactions if you are using this hook directly.</Content>
+</InlineAlert>
+
+## Features
+
+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
+* Prevents text selection on touch devices while long pressing
+* Prevents browser and OS context menus from appearing while long pressing
+* Customizable time threshold for long press
+* Supports an accessibility description to indicate to assistive technology users that a long press action is available
+
 ## API
 
 <FunctionAPI function={docs.exports.useLongPress} links={docs.links} />
diff --git a/packages/dev/s2-docs/pages/react-aria/useMove.mdx b/packages/dev/s2-docs/pages/react-aria/useMove.mdx
index 6edf7dd476f..28a7b67373f 100644
--- a/packages/dev/s2-docs/pages/react-aria/useMove.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useMove.mdx
@@ -20,27 +20,10 @@ export const description = 'Handles move interactions for pointer and keyboard,
 
 <PageDescription>{docs.exports.useMove.description}</PageDescription>
 
-## Features
-
-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
-* Uses pointer events where available, with fallbacks to mouse and touch events
-* Ignores emulated mouse events in mobile browsers
-* Handles disabling text selection on mobile while the press interaction is active
-* Normalizes many cross browser inconsistencies
-
-## 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.
-All of the move events are logged below so that you can inspect what is going on.
-
 ```tsx render
 "use client";
 import React from 'react';
-import {useMove} from '@react-aria/interactions';
+import {useMove} from 'react-aria';
 
 function Example() {
   const CONTAINER_SIZE = 200;
@@ -128,6 +111,13 @@ function Example() {
 }
 ```
 
+## Features
+
+Move events are emitted after the user presses down and then drags the pointer around. They 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
+* Disables text selection while the user drags
 
 ## API
 
@@ -143,7 +133,4 @@ function Example() {
 
 ### MoveEvent
 
-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 10f83ffbc1b..9a7d3004e4b 100644
--- a/packages/dev/s2-docs/pages/react-aria/useNumberFormatter.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useNumberFormatter.mdx
@@ -19,6 +19,8 @@ export const description = 'Wraps Intl.NumberFormat and formats numbers for the
 
 # useNumberFormatter
 
+<PageDescription>{docs.exports.useNumberFormatter.description}</PageDescription>
+
 ## Introduction
 
 `useNumberFormatter` wraps a builtin browser [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat)
@@ -34,7 +36,7 @@ using the [I18nProvider](I18nProvider) to specify the locale to display.
 
 ```tsx render
 'use client';
-import {I18nProvider, useNumberFormatter} from '@react-aria/i18n';
+import {I18nProvider, useNumberFormatter} from 'react-aria';
 
 function Currency({value, currency}) {
   let formatter = useNumberFormatter({
diff --git a/packages/dev/s2-docs/pages/react-aria/useObjectRef.mdx b/packages/dev/s2-docs/pages/react-aria/useObjectRef.mdx
index 895bdb83666..d56d6a5601f 100644
--- a/packages/dev/s2-docs/pages/react-aria/useObjectRef.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/useObjectRef.mdx
@@ -29,9 +29,7 @@ callback ref or object ref was passed in. This is useful for passing refs to Rea
 ```tsx render
 'use client';
 import React from 'react';
-import {useObjectRef} from '@react-aria/utils';
-import {useButton} from '@react-aria/button';
-import {AriaButtonProps} from '@react-types/button';
+import {useObjectRef, useButton, AriaButtonProps} from 'react-aria';
 
 let Button = React.forwardRef((props: AriaButtonProps, ref: React.ForwardedRef<HTMLButtonElement>) => {
   let objRef = useObjectRef(ref);
diff --git a/packages/dev/s2-docs/pages/react-aria/usePress.mdx b/packages/dev/s2-docs/pages/react-aria/usePress.mdx
index bb9a856b2f2..4d34195ee7b 100644
--- a/packages/dev/s2-docs/pages/react-aria/usePress.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/usePress.mdx
@@ -20,35 +20,10 @@ export const description = 'Handles press interactions across mouse, touch, and
 
 <PageDescription>{docs.exports.usePress.description}</PageDescription>
 
-## Features
-
-`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
-* Handles <Keyboard>Enter</Keyboard> or <Keyboard>Space</Keyboard> key presses
-* Handles screen reader virtual clicks
-* Uses pointer events where available, with fallbacks to mouse and touch events
-* Normalizes focus behavior on mouse and touch interactions across browsers
-* Handles disabling text selection on mobile while the press interaction is active
-* Handles canceling press interactions on scroll
-* Normalizes many cross browser inconsistencies
-
-Read our [blog post](blog/building-a-button-part-1) about the complexities of press event handling to learn more.
-
-## Example
-
-This example shows a simple target that handles press events with `usePress` and logs them to a list below.
-It also uses the `isPressed` state to adjust the background color when the target is pressed.
-Press down on the target and drag your pointer off and over to see when the events are fired, and try focusing
-the target with a keyboard and pressing the <Keyboard>Enter</Keyboard> or <Keyboard>Space</Keyboard> keys to trigger events as well.
-
-**NOTE: for more advanced button functionality, see [useButton](https://react-spectrum.adobe.com/react-aria/useButton.html).**
-
 ```tsx render
 "use client";
 import React from 'react';
-import {usePress} from '@react-aria/interactions';
+import {usePress} from 'react-aria';
 
 function Example() {
   let [events, setEvents] = React.useState([]);
@@ -72,7 +47,8 @@ function Example() {
           background: isPressed ? 'darkgreen' : 'green',
           color: 'white',
           display: 'inline-block',
-          padding: 4,
+          padding: '8px 12px',
+          borderRadius: 8,
           cursor: 'pointer'
         }}
         role="button"
@@ -91,6 +67,20 @@ function Example() {
 }
 ```
 
+## Features
+
+`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
+* Handles <Keyboard>Enter</Keyboard> or <Keyboard>Space</Keyboard> key presses
+* Handles screen reader virtual clicks
+* Normalizes focus behavior on mouse and touch interactions across browsers
+* Disables text selection while the press interaction is active
+* Cancels press interactions on scroll
+* Normalizes many cross browser inconsistencies
+
+Read our [blog post](blog/building-a-button-part-1) learn more.
+
 ## API
 
 <FunctionAPI function={docs.exports.usePress} links={docs.links} />
@@ -105,7 +95,4 @@ function Example() {
 
 ### PressEvent
 
-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
+<InterfaceType {...typesDocs.exports.PressEvent} />

From dabf7350812450b1d8b79feae64e0d50fe7e17a4 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 2 Dec 2025 12:18:59 -0800
Subject: [PATCH 30/49] omit homepage from nav

---
 packages/dev/s2-docs/pages/react-aria/index.mdx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/dev/s2-docs/pages/react-aria/index.mdx b/packages/dev/s2-docs/pages/react-aria/index.mdx
index 8ce34bb8fe5..038781afd23 100644
--- a/packages/dev/s2-docs/pages/react-aria/index.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/index.mdx
@@ -26,6 +26,7 @@ import {getBaseUrl} from '../../src/pageUtils';
 
 export const section = 'Overview';
 export const title = 'Home';
+export const omitFromNav = true;
 export const hideFromSearch = true;
 export const description = 'Accessible, high quality UI components and hooks for building design systems.';
 

From 96c900597e607f270885d4cbdfff3d67ba8ba400 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 2 Dec 2025 12:23:15 -0800
Subject: [PATCH 31/49] Fix dotted underline links in Safari

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

diff --git a/packages/dev/s2-docs/src/Link.tsx b/packages/dev/s2-docs/src/Link.tsx
index 2fb4413d7cd..369ae0f164f 100644
--- a/packages/dev/s2-docs/src/Link.tsx
+++ b/packages/dev/s2-docs/src/Link.tsx
@@ -43,7 +43,7 @@ export function ColorLink({type, ...props}: RACLinkProps & {type?: 'keyword' | '
 }
 
 export function CodeLink(props: RACLinkProps) {
-  return <RACLink {...props} style={({isHovered}) => ({cursor: 'pointer', textDecoration: isHovered ? 'underline solid' : 'underline dotted'})} />;
+  return <RACLink {...props} style={({isHovered}) => ({cursor: 'pointer', textDecoration: 'underline', textDecorationStyle: isHovered ? 'solid' : 'dotted'})} />;
 }
 
 const titleLink = style({

From 19d818c9ccd0f460ca093ec9b990e93402e89fcb Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 2 Dec 2025 12:52:27 -0800
Subject: [PATCH 32/49] Fix width of color editor blog example

---
 .../dev/s2-docs/pages/react-aria/blog/ColorEditorExample.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dev/s2-docs/pages/react-aria/blog/ColorEditorExample.tsx b/packages/dev/s2-docs/pages/react-aria/blog/ColorEditorExample.tsx
index df70de58d99..653d6d654f6 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/ColorEditorExample.tsx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/ColorEditorExample.tsx
@@ -30,7 +30,7 @@ function ColorEditor({hideAlphaChannel = false}: ColorEditorProps) {
   let formatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/color');
 
   return (
-    <div className={style({display: 'flex', flexDirection: 'column', gap: 4, minWidth: 380})}>
+    <div className={style({display: 'flex', flexDirection: 'column', gap: 4})}>
       <div className={style({display: 'flex', gap: 12})}>
         <ColorArea colorSpace="hsb" xChannel="saturation" yChannel="brightness" />
         <ColorSlider colorSpace="hsb" channel="hue" orientation="vertical" />

From 16c49a3ada099ca0925c33b10e6e28147b2d146d Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 2 Dec 2025 13:30:27 -0800
Subject: [PATCH 33/49] Fix cross-library links

---
 packages/dev/s2-docs/pages/react-aria/Button.mdx          | 3 +--
 packages/dev/s2-docs/pages/react-aria/FileTrigger.mdx     | 3 +--
 .../pages/react-aria/blog/building-a-button-part-1.mdx    | 2 +-
 .../pages/react-aria/blog/building-a-button-part-2.mdx    | 4 ++--
 .../s2-docs/pages/react-aria/blog/building-a-combobox.mdx | 4 ++--
 .../creating-a-pointer-friendly-submenu-experience.mdx    | 6 +++---
 .../react-aria/blog/date-and-time-pickers-for-all.mdx     | 8 ++++----
 .../dev/s2-docs/pages/react-aria/blog/drag-and-drop.mdx   | 8 ++++----
 .../blog/how-we-internationalized-our-numberfield.mdx     | 2 +-
 .../pages/react-aria/blog/introducing-react-spectrum.mdx  | 6 +++---
 .../dev/s2-docs/pages/react-aria/blog/rtl-date-time.mdx   | 2 +-
 packages/dev/s2-docs/pages/s2/Calendar.mdx                | 5 ++---
 packages/dev/s2-docs/pages/s2/DateField.mdx               | 3 +--
 packages/dev/s2-docs/pages/s2/DatePicker.mdx              | 3 +--
 packages/dev/s2-docs/pages/s2/DateRangePicker.mdx         | 3 +--
 packages/dev/s2-docs/pages/s2/RangeCalendar.mdx           | 5 ++---
 packages/dev/s2-docs/pages/s2/TimeField.mdx               | 3 +--
 packages/dev/s2-docs/scripts/generateMarkdownDocs.mjs     | 6 ++++++
 packages/dev/s2-docs/src/Link.tsx                         | 5 +++++
 19 files changed, 42 insertions(+), 39 deletions(-)

diff --git a/packages/dev/s2-docs/pages/react-aria/Button.mdx b/packages/dev/s2-docs/pages/react-aria/Button.mdx
index 9e97fbed462..0cd92e40b35 100644
--- a/packages/dev/s2-docs/pages/react-aria/Button.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Button.mdx
@@ -10,7 +10,6 @@ import vanillaDocs from 'docs:vanilla-starter/Button';
 import tailwindDocs from 'docs:tailwind-starter/Button';
 import '../../tailwind/tailwind.css';
 import typesDocs from 'docs:@react-types/shared/src/events.d.ts';
-import {getBaseUrl} from '../../src/pageUtils';
 
 export const tags = ['btn'];
 export const relatedPages = [{'title': 'useButton', 'url': 'https://react-spectrum.adobe.com/react-aria/useButton.html'}];
@@ -50,7 +49,7 @@ export const description = 'Allows a user to perform an action, with mouse, touc
 
 Use the `onPress` prop to handle interactions via mouse, keyboard, and touch. This is similar to `onClick`, but normalized for consistency across browsers, devices, and interaction methods. Read our [blog post](blog/building-a-button-part-1) to learn more.
 
-The `onPressStart`, `onPressEnd`, and `onPressChange` events are also emitted as the user interacts with the button. Each of these handlers receives a <TypeLink links={typesDocs.links} type={typesDocs.exports.PressEvent} />, which provides information about the target and interaction method. See <Link href={`${getBaseUrl('react-aria')}/usePress`}>usePress</Link> for more details.
+The `onPressStart`, `onPressEnd`, and `onPressChange` events are also emitted as the user interacts with the button. Each of these handlers receives a <TypeLink links={typesDocs.links} type={typesDocs.exports.PressEvent} />, which provides information about the target and interaction method. See [usePress](usePress) for more details.
 
 ```tsx render
 "use client";
diff --git a/packages/dev/s2-docs/pages/react-aria/FileTrigger.mdx b/packages/dev/s2-docs/pages/react-aria/FileTrigger.mdx
index f174f18adec..63941e546e9 100644
--- a/packages/dev/s2-docs/pages/react-aria/FileTrigger.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/FileTrigger.mdx
@@ -4,7 +4,6 @@ export default Layout;
 import docs from 'docs:react-aria-components';
 import '../../tailwind/tailwind.css';
 import {InlineAlert, Heading, Content} from '@react-spectrum/s2'
-import {getBaseUrl} from '../../src/pageUtils';
 
 export const tags = ['upload', 'input'];
 export const description = 'Allows a user to access the file system with any pressable React Aria or React Spectrum component.';
@@ -44,7 +43,7 @@ function Example(props) {
 
 ## Custom trigger
 
-`FileTrigger` works with any pressable React Aria component (e.g. [Button](Button), [Link](Link), etc.). Use the `<Pressable>` component or <Link href={`${getBaseUrl('react-aria')}/usePress`}>usePress</Link> hook to wrap a custom trigger element such as a third party component or DOM element.
+`FileTrigger` works with any pressable React Aria component (e.g. [Button](Button), [Link](Link), etc.). Use the `<Pressable>` component or [usePress](usePress) hook to wrap a custom trigger element such as a third party component or DOM element.
 
 ```tsx render
 "use client"
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-1.mdx b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-1.mdx
index acccb5c6552..5724b6e896b 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-1.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-1.mdx
@@ -108,7 +108,7 @@ With the [usePress](../usePress) hook, our buttons handle interactions consisten
 
 <video src={buttonVideoUrl} loop autoPlay muted style={{width: '100%', display: 'block', margin: '20px auto'}} />
 
-Try a live example for yourself in our [Button](../../s2/Button) docs!
+Try a live example for yourself in our [Button](s2:Button) docs!
 
 ## Conclusion
 
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-2.mdx b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-2.mdx
index 7454084a4f9..6c18ec6855f 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-2.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-2.mdx
@@ -73,11 +73,11 @@ I hear that these bugs may already be fixed in the iOS 14 betas, so hopefully we
 
 We've wrapped all of this behavior into the [useHover](../useHover) hook in React Aria. It provides a simple way to determine if an element is hovered, and exposes a set of events that you can handle as well. `onHoverStart` is fired when the user hovers over an element with a mouse, and `onHoverEnd` is fired when the user moves their mouse off of the element. We take care of all of the browser inconsistencies discussed above, and also include fallbacks for touch and mouse events to support older devices without pointer events.
 
-The [Button](../../s2/Button) component, and all other components in React Spectrum that support hover states, use the [useHover](../useHover) hook to handle interactions, and apply a CSS class when they are hovered. This ensures that hover states are only applied when interacting with a mouse, which avoids unexpected behavior on touch devices.
+The [Button](s2:Button) component, and all other components in React Spectrum that support hover states, use the [useHover](../useHover) hook to handle interactions, and apply a CSS class when they are hovered. This ensures that hover states are only applied when interacting with a mouse, which avoids unexpected behavior on touch devices.
 
 <video src={hoveriPadVideoUrl} loop autoPlay muted style={{width: '100%', display: 'block', margin: '20px auto'}} />
 
-Try a live example for yourself in our [Button](../../s2/Button) docs!
+Try a live example for yourself in our [Button](s2:Button) docs!
 
 ## Conclusion
 
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/building-a-combobox.mdx b/packages/dev/s2-docs/pages/react-aria/blog/building-a-combobox.mdx
index 0450d107e42..74caca80d6c 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/building-a-combobox.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/building-a-combobox.mdx
@@ -22,7 +22,7 @@ import React from 'react';
 
 export const hideNav = true;
 export const tags = ['combobox', 'accessibility', 'mobile', 'react spectrum', 'react', 'spectrum', 'interactions', 'touch'];
-export const description = 'After many months of research, development, and testing, we\'re excited to announce that the React Spectrum [ComboBox](../../s2/ComboBox) component and React Aria [useComboBox](https://react-spectrum.adobe.com/react-aria/useComboBox.html) hook are now available! In this post we\'ll take a deeper look into some of the challenges we faced when building an accessible and mobile friendly ComboBox.';
+export const description = 'After many months of research, development, and testing, we\'re excited to announce that the React Spectrum [ComboBox](s2:ComboBox) component and React Aria [useComboBox](https://react-spectrum.adobe.com/react-aria/useComboBox.html) hook are now available! In this post we\'ll take a deeper look into some of the challenges we faced when building an accessible and mobile friendly ComboBox.';
 export const date = '2021-07-13';
 export const author = 'Daniel Lu';
 export const authorLink = 'https://github.com/LFDanLu';
@@ -31,7 +31,7 @@ export const isSubpage = true;
 
 # Creating an accessible autocomplete experience
 
-After many months of research, development, and extensive testing across browsers, devices, and assistive technology, we're excited to announce that the React Spectrum [ComboBox](../../s2/ComboBox) component and React Aria [useComboBox](https://react-spectrum.adobe.com/react-aria/useComboBox.html) hook are now available! We've focused on the following areas to help you build quality autocomplete experiences.
+After many months of research, development, and extensive testing across browsers, devices, and assistive technology, we're excited to announce that the React Spectrum [ComboBox](s2:ComboBox) component and React Aria [useComboBox](https://react-spectrum.adobe.com/react-aria/useComboBox.html) hook are now available! We've focused on the following areas to help you build quality autocomplete experiences.
 
 - **Accessibility** — Our ComboBox has been tested with screen readers across desktop and mobile devices, and with many different input methods including mouse, touch, and keyboard. We encountered many screen reader differences, and worked hard to ensure announcements are clear and consistent.
 - **Mobile** — On small screens, the React Spectrum ComboBox is automatically displayed in a tray, which improves the user experience by giving them a larger area to scroll. We also optimized our experience for touch screen interactions and on screen keyboards.
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/creating-a-pointer-friendly-submenu-experience.mdx b/packages/dev/s2-docs/pages/react-aria/blog/creating-a-pointer-friendly-submenu-experience.mdx
index a2e8c091f1a..b2e7f2ddbe5 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/creating-a-pointer-friendly-submenu-experience.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/creating-a-pointer-friendly-submenu-experience.mdx
@@ -20,7 +20,7 @@ import React from 'react';
 
 export const hideNav = true;
 export const tags = ['react aria', 'react spectrum', 'react', 'spectrum', 'interactions', 'submenu', 'pointer'];
-export const description = 'We are excited to announce support for submenus in the latest release of [React Spectrum](../../s2/Menu#submenus) and [React Aria](../Menu#submenus)! In the process of adding this feature, we found ourselves solving some unique challenges while working to make submenus user-friendly and accessible across an array of devices and input types. In doing so, we wanted to share our thought process in solving one of the challenges we faced along the way.';
+export const description = 'We are excited to announce support for submenus in the latest release of [React Spectrum](s2:Menu#submenus) and [React Aria](../Menu#submenus)! In the process of adding this feature, we found ourselves solving some unique challenges while working to make submenus user-friendly and accessible across an array of devices and input types. In doing so, we wanted to share our thought process in solving one of the challenges we faced along the way.';
 export const date = '2024-05-01';
 export const author = 'Reid Barber';
 export const authorLink = 'https://github.com/reidbarber';
@@ -29,7 +29,7 @@ export const isSubpage = true;
 
 # Creating a pointer-friendly submenu experience
 
-We are excited to announce support of submenus in the latest release of [React Spectrum](../../s2/Menu#submenus) and [React Aria](../Menu#submenus)! In the process of adding this feature, we found ourselves solving some unique challenges while working to make submenus user-friendly and accessible across an array of devices and input types. In doing so, we wanted to share our thought process in solving one of the challenges we faced along the way.
+We are excited to announce support of submenus in the latest release of [React Spectrum](s2:Menu#submenus) and [React Aria](../Menu#submenus)! In the process of adding this feature, we found ourselves solving some unique challenges while working to make submenus user-friendly and accessible across an array of devices and input types. In doing so, we wanted to share our thought process in solving one of the challenges we faced along the way.
 
 ## The Shortest Path
 
@@ -113,5 +113,5 @@ Let's compare our approach to a few other methods:
 
 ## Conclusion
 
-We hope this post has been helpful in understanding how we approached building a good submenu experience for mouse users. We are excited to see how you use submenus in your own projects. You can see this feature in action in the [React Spectrum Menu](../../s2/Menu#submenus) and [React Aria Menu](../Menu#submenus), including in the table on the [React Aria Home Page](../).
+We hope this post has been helpful in understanding how we approached building a good submenu experience for mouse users. We are excited to see how you use submenus in your own projects. You can see this feature in action in the [React Spectrum Menu](s2:Menu#submenus) and [React Aria Menu](../Menu#submenus), including in the table on the [React Aria Home Page](../).
 
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/date-and-time-pickers-for-all.mdx b/packages/dev/s2-docs/pages/react-aria/blog/date-and-time-pickers-for-all.mdx
index a8e507f169b..bfc84bc4c65 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/date-and-time-pickers-for-all.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/date-and-time-pickers-for-all.mdx
@@ -25,7 +25,7 @@ import CalendarSystems from './CalendarSystems';
 
 export const hideNav = true;
 export const tags = ['date picker', 'date', 'time', 'calendar', 'components', 'accessibility', 'mobile', 'react spectrum', 'react', 'spectrum', 'interactions', 'touch'];
-export const description = 'We are very excited to announce the release of the [React Aria](https://react-spectrum.adobe.com/react-aria/useNumberField.html) and [React Spectrum](../../s2/DatePicker) date and time picker components! This includes a full suite of fully featured components and hooks including calendars, date and time fields, and range pickers, all with a focus on internationalization and accessibility. It also includes [@internationalized/date](../internationalized/date/), a brand new framework-agnostic library for locale-aware date and time manipulation.';
+export const description = 'We are very excited to announce the release of the [React Aria](https://react-spectrum.adobe.com/react-aria/useNumberField.html) and [React Spectrum](s2:DatePicker) date and time picker components! This includes a full suite of fully featured components and hooks including calendars, date and time fields, and range pickers, all with a focus on internationalization and accessibility. It also includes [@internationalized/date](../internationalized/date/), a brand new framework-agnostic library for locale-aware date and time manipulation.';
 export const date = '2022-06-21';
 export const author = 'Devon Govett';
 export const authorLink = 'https://x.com/devongovett';
@@ -34,7 +34,7 @@ export const isSubpage = true;
 
 # Date and Time Pickers for All
 
-We are very excited to announce the release of the [React Aria](https://react-spectrum.adobe.com/react-aria/useNumberField.html) and [React Spectrum](../../s2/DatePicker) date and time picker components! This includes a full suite of fully featured components and hooks including calendars, date and time fields, and range pickers, all with a focus on internationalization and accessibility. It also includes [@internationalized/date](../internationalized/date/), a brand new framework-agnostic library for locale-aware date and time manipulation.
+We are very excited to announce the release of the [React Aria](https://react-spectrum.adobe.com/react-aria/useNumberField.html) and [React Spectrum](s2:DatePicker) date and time picker components! This includes a full suite of fully featured components and hooks including calendars, date and time fields, and range pickers, all with a focus on internationalization and accessibility. It also includes [@internationalized/date](../internationalized/date/), a brand new framework-agnostic library for locale-aware date and time manipulation.
 
 In building these components, we have focused on the following areas:
 
@@ -67,13 +67,13 @@ This approach has benefits for internationalization and accessibility, as well a
 
 <video src={datepickerScreenReader + '#t=0.1'} preload="metadata" controls aria-label="Demo of the DateField component using VoiceOver, showing keyboard controls of incrementing and decrementing date and time segments." style={{width: '100%', display: 'block', margin: '40px auto'}} />
 
-The [useDateField](https://react-spectrum.adobe.com/react-aria/useDateField.html) and [useTimeField](https://react-spectrum.adobe.com/react-aria/useTimeField.html) hooks (or the [DateField](../../s2/DateField) and [TimeField](../../s2/TimeField) React Spectrum components) may be used standalone in cases where the user is likely to already know the date they need to enter, or the date is far in the past or future, e.g. a birthday or passport expiration date. In these cases, browsing through a calendar UI to find a date is tedious, and entering the date with a keyboard is much more efficient.
+The [useDateField](https://react-spectrum.adobe.com/react-aria/useDateField.html) and [useTimeField](https://react-spectrum.adobe.com/react-aria/useTimeField.html) hooks (or the [DateField](s2:DateField) and [TimeField](s2:TimeField) React Spectrum components) may be used standalone in cases where the user is likely to already know the date they need to enter, or the date is far in the past or future, e.g. a birthday or passport expiration date. In these cases, browsing through a calendar UI to find a date is tedious, and entering the date with a keyboard is much more efficient.
 
 ### Calendars
 
 When a user doesn't know what date they will select, it can be useful to offer a browsing experience using a calendar component. This allows users to see dates organized into weeks and months, or with additional context such as which dates are unavailable for selection. Calendar follows the [ARIA grid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/), which allows keyboard users to navigate using the arrow keys, and press the Enter key to select a date.
 
-Calendars can quickly get complicated, with many different states which need to be represented both visually and to screen reader users. For example, a [RangeCalendar](../../s2/RangeCalendar) allows users to select not only a single date, but a range of dates. Certain dates can be marked as unavailable, e.g. in an appointment booking application. When combined, a user may be allowed to select only contiguously available ranges (e.g. a rental house), or non-contiguous (e.g. a time off request where weekends are not included). Minimum and maximum allowed dates may also be defined. Finally, if a user makes an invalid selection external to the calendar, we may need to display an invalid state. You can play around with some of these states in the example below.
+Calendars can quickly get complicated, with many different states which need to be represented both visually and to screen reader users. For example, a [RangeCalendar](s2:RangeCalendar) allows users to select not only a single date, but a range of dates. Certain dates can be marked as unavailable, e.g. in an appointment booking application. When combined, a user may be allowed to select only contiguously available ranges (e.g. a rental house), or non-contiguous (e.g. a time off request where weekends are not included). Minimum and maximum allowed dates may also be defined. Finally, if a user makes an invalid selection external to the calendar, we may need to display an invalid state. You can play around with some of these states in the example below.
 
 <RangeCalendarExample />
 
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/drag-and-drop.mdx b/packages/dev/s2-docs/pages/react-aria/blog/drag-and-drop.mdx
index 697efc5b885..aa282f6be6f 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/drag-and-drop.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/drag-and-drop.mdx
@@ -25,7 +25,7 @@ import React from 'react';
 
 export const hideNav = true;
 export const tags = ['drag and drop', 'dnd', 'components', 'accessibility', 'keyboard', 'mobile', 'react spectrum', 'react', 'spectrum', 'interactions', 'touch'];
-export const description = 'We are excited to announce the release of drag and drop support in [React Aria](../dnd) and [React Spectrum](../../s2/dnd)! This includes a suite of hooks for implementing drag and drop interactions, with support for both mouse and touch, as well as full parity for keyboard and screen reader input.';
+export const description = 'We are excited to announce the release of drag and drop support in [React Aria](../dnd) and [React Spectrum](s2:dnd)! This includes a suite of hooks for implementing drag and drop interactions, with support for both mouse and touch, as well as full parity for keyboard and screen reader input.';
 export const date = '2022-11-16';
 export const author = 'Devon Govett';
 export const authorLink = 'https://x.com/devongovett';
@@ -34,7 +34,7 @@ export const isSubpage = true;
 
 # Taming the dragon: Accessible drag and drop
 
-We are excited to announce the release of drag and drop support in [React Aria](../dnd) and [React Spectrum](../../s2/dnd)! This includes a suite of hooks for implementing drag and drop interactions, with support for both mouse and touch, as well as full parity for keyboard and screen reader input. We've designed these hooks with the following features in mind:
+We are excited to announce the release of drag and drop support in [React Aria](../dnd) and [React Spectrum](s2:dnd)! This includes a suite of hooks for implementing drag and drop interactions, with support for both mouse and touch, as well as full parity for keyboard and screen reader input. We've designed these hooks with the following features in mind:
 
 - **Flexibility** – Our hooks include high level APIs for building common interactions such as dragging between lists, reordering, inserting, moving, copying, and file/directory uploading, as well as lower level APIs for building custom experiences.
 - **Accessibility** – Full support for keyboard and screen reader interactions is included out of the box, ensuring that applications implementing drag and drop using React Aria and React Spectrum are accessible with no additional work.
@@ -110,10 +110,10 @@ Defining an API that is both flexible and easy to use was also difficult. We ini
 
 ## Try it out!
 
-We've been working on our drag and drop implementation for a while, and we're excited to share it with the community! Check out our documentation for [React Aria](../dnd) and [React Spectrum](../../s2/dnd) to get started.
+We've been working on our drag and drop implementation for a while, and we're excited to share it with the community! Check out our documentation for [React Aria](../dnd) and [React Spectrum](s2:dnd) to get started.
 
 You can use our React Aria hooks standalone, or integrate with existing collection components for common use cases like list reordering, inserting items, or dropping into folders. You can also customize most of the behavior with lower level APIs as needed, allowing you to build more specialized experiences.
 
-For React Spectrum, the [useDragAndDrop](../../s2/dnd) hook can be used to enable drag and drop in the components that support it. This returns an object containing implementations of the React Aria hooks used to implement drag and drop, keeping bundle size small when drag and drop is unused. Currently support is limited to [ListView](https://react-spectrum.adobe.com/react-spectrum/ListView.html), but we will be adding drag and drop to other components soon.
+For React Spectrum, the [useDragAndDrop](s2:dnd) hook can be used to enable drag and drop in the components that support it. This returns an object containing implementations of the React Aria hooks used to implement drag and drop, keeping bundle size small when drag and drop is unused. Currently support is limited to [ListView](https://react-spectrum.adobe.com/react-spectrum/ListView.html), but we will be adding drag and drop to other components soon.
 
 We hope these new hooks help make accessible drag and drop interactions easier to build, and we can't wait to see what you create!
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/how-we-internationalized-our-numberfield.mdx b/packages/dev/s2-docs/pages/react-aria/blog/how-we-internationalized-our-numberfield.mdx
index 08c3d113808..c410223abe7 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/how-we-internationalized-our-numberfield.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/how-we-internationalized-our-numberfield.mdx
@@ -156,5 +156,5 @@ This approach of using a number formatter to generate a parser avoids needing to
 
 ## Conclusion
 
-In this post, we covered how a number field can be internationalized and support advanced formatting, and how we improved the experience on mobile. If you need to implement localized number parsing in your own apps or components, check out the [@internationalized/number](http://npmjs.com/@internationalized/number) package on npm. And if you use the [useNumberField](https://react-spectrum.adobe.com/react-aria/useNumberField.html) hook in React Aria, or the [NumberField](../../s2/NumberField) component in React Spectrum, all of this is built in.
+In this post, we covered how a number field can be internationalized and support advanced formatting, and how we improved the experience on mobile. If you need to implement localized number parsing in your own apps or components, check out the [@internationalized/number](http://npmjs.com/@internationalized/number) package on npm. And if you use the [useNumberField](https://react-spectrum.adobe.com/react-aria/useNumberField.html) hook in React Aria, or the [NumberField](s2:NumberField) component in React Spectrum, all of this is built in.
 
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/introducing-react-spectrum.mdx b/packages/dev/s2-docs/pages/react-aria/blog/introducing-react-spectrum.mdx
index 3faf6ea7bc4..ec480a3c2e4 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/introducing-react-spectrum.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/introducing-react-spectrum.mdx
@@ -52,7 +52,7 @@ We're excited to announce [React Spectrum](https://react-spectrum.adobe.com/), a
 - ♿️ [**Accessible**](../quality#accessibility) – Accessibility and behavior is implemented according to [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/), including full screen reader and keyboard navigation support. All components have been tested across a wide variety of screen readers and devices to ensure the best experience possible for all users.
 - 📱 [**Adaptive**](../quality#interactions) – All components are designed to work with mouse, touch, and keyboard interactions. They're built with responsive design principles to deliver a great experience, no matter the device.
 - 🌍 [**International**](../quality#internationalization) – Support for more than 30 languages is included out of the box, with support for right-to-left languages, date and number formatting, and more.
-- 🎨 [**Customizable**](../../s2/styling) – React Spectrum automatically adapt for dark mode. For even more customizability, you can build your own components with your own DOM structure and styling using the [React Aria](../) and [React Stately](https://react-spectrum.adobe.com/react-stately/) hooks to provide behavior, accessibility, and interactions.
+- 🎨 [**Customizable**](s2:styling) – React Spectrum automatically adapt for dark mode. For even more customizability, you can build your own components with your own DOM structure and styling using the [React Aria](../) and [React Stately](https://react-spectrum.adobe.com/react-stately/) hooks to provide behavior, accessibility, and interactions.
 
 Adobe is a large company with thousands of engineers working on hundreds of products, which must all meet high standards for UI consistency, accessibility, internationalization, and usability. Meeting these standards at our scale has been a challenge, and we're excited to share what we've learned with the community and raise the bar for web applications together.
 
@@ -123,7 +123,7 @@ function Switch(props) {
 
 ### React Spectrum
 
-[React Spectrum](../../s2/) puts all of these pieces together and implements the Adobe-specific styling. It's designed to be adaptive, and works across mouse, touch, and keyboard interactions, on devices of any screen size. It includes automatic support for dark mode, and responsive scaling for large hit targets on touch devices.
+[React Spectrum](s2:) puts all of these pieces together and implements the Adobe-specific styling. It's designed to be adaptive, and works across mouse, touch, and keyboard interactions, on devices of any screen size. It includes automatic support for dark mode, and responsive scaling for large hit targets on touch devices.
 
 If you're integrating with Adobe software or would like an end-to-end component library to use in your project, then React Spectrum is a great place to start. Save time by using [Adobe Developer App Builder](https://www.adobe.io/app-builder), our complete framework for building custom cloud-native Adobe apps. Enterprise customers and partners can extend the functionality of Adobe Experience Platform and Adobe Experience Cloud solutions in a custom app that solves specific business and workflow needs.
 
@@ -158,7 +158,7 @@ import UserSettings from '@react-spectrum/s2/icons/UserSettings';
 </Picker>
 ```
 
-[Get started](../../s2/getting-started) building an application with React Spectrum, and check out the docs for each component to learn more. In addition, if you're building your own component library, React Spectrum is a good example of how to use React Aria and React Stately to build a full design system.
+[Get started](s2:getting-started) building an application with React Spectrum, and check out the docs for each component to learn more. In addition, if you're building your own component library, React Spectrum is a good example of how to use React Aria and React Stately to build a full design system.
 
 ## Try it out!
 
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/rtl-date-time.mdx b/packages/dev/s2-docs/pages/react-aria/blog/rtl-date-time.mdx
index e6010db8975..429ea58bb0c 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/rtl-date-time.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/rtl-date-time.mdx
@@ -145,4 +145,4 @@ As a result, we updated the keyboard navigation in right-to-left langauges to ca
 
 As you can see, formatting dates correctly is quite challenging, especially in right-to-left languages. Fortunately, tools like the Unicode Bidirectional Algorithm help with formatting so we don't have to handle everything manually. However, as we discovered with this bug, it doesn't always work as expected and unexpected factors can interfere with it.
 
-After extensive testing, we developed a solution that ensures proper formatting for users of [React Spectrum](../../s2/DateField), [React Aria Components](../DateField), and our [hooks](https://react-spectrum.adobe.com/react-aria/useDateField#usedatefield). If you haven't tried our date and time components yet, we encourage you to check them out! And if you're already using them, be sure to update to at least the March 2025 release to ensure correct formatting in right-to-left languages and to make the appropriate changes noted in the [release notes](https://react-spectrum.adobe.com/releases/2025-03-05#date-and-time-formatting-in-rtl-languages)!
+After extensive testing, we developed a solution that ensures proper formatting for users of [React Spectrum](s2:DateField), [React Aria Components](../DateField), and our [hooks](https://react-spectrum.adobe.com/react-aria/useDateField#usedatefield). If you haven't tried our date and time components yet, we encourage you to check them out! And if you're already using them, be sure to update to at least the March 2025 release to ensure correct formatting in right-to-left languages and to make the appropriate changes noted in the [release notes](https://react-spectrum.adobe.com/releases/2025-03-05#date-and-time-formatting-in-rtl-languages)!
diff --git a/packages/dev/s2-docs/pages/s2/Calendar.mdx b/packages/dev/s2-docs/pages/s2/Calendar.mdx
index b73fa52f311..f52b74cbd8b 100644
--- a/packages/dev/s2-docs/pages/s2/Calendar.mdx
+++ b/packages/dev/s2-docs/pages/s2/Calendar.mdx
@@ -3,7 +3,6 @@ export default Layout;
 
 import {Calendar} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
-import {getBaseUrl} from '../../src/pageUtils';
 
 export const tags = ['date'];
 export const description = 'Allows a user to select a single date from a date grid.';
@@ -30,7 +29,7 @@ export const description = 'Allows a user to select a single date from a date gr
 
 ## Value
 
-Use the `value` or `defaultValue` prop to set the date value, using objects in the <Link href={`${getBaseUrl('react-aria')}/internationalized/date/`}>@internationalized/date</Link> package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc.
+Use the `value` or `defaultValue` prop to set the date value, using objects in the [@internationalized/date](react-aria:internationalized/date/) package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc.
 
 ```tsx render
 "use client";
@@ -71,7 +70,7 @@ import {parseDate} from '@internationalized/date';
 
 ### Custom calendar systems
 
-`Calendar` also supports custom calendar systems that implement custom business rules, for example a fiscal year calendar that follows a [4-5-4 format](https://nrf.com/resources/4-5-4-calendar), where month ranges don't follow the usual Gregorian calendar. See the <Link href={`${getBaseUrl('react-aria')}/internationalized/date/Calendar#custom-calendars`}>@internationalized/date docs</Link> for an example implementation.
+`Calendar` also supports custom calendar systems that implement custom business rules, for example a fiscal year calendar that follows a [4-5-4 format](https://nrf.com/resources/4-5-4-calendar), where month ranges don't follow the usual Gregorian calendar. See the [@internationalized/date docs](react-aria:internationalized/date/Calendar#custom-calendars) for an example implementation.
 
 ```tsx render
 "use client";
diff --git a/packages/dev/s2-docs/pages/s2/DateField.mdx b/packages/dev/s2-docs/pages/s2/DateField.mdx
index 103a1ed184c..9a966c8362f 100644
--- a/packages/dev/s2-docs/pages/s2/DateField.mdx
+++ b/packages/dev/s2-docs/pages/s2/DateField.mdx
@@ -3,7 +3,6 @@ export default Layout;
 
 import {DateField} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
-import {getBaseUrl} from '../../src/pageUtils';
 
 export const tags = ['calendar'];
 export const description = 'Allows a user to enter and edit date values using a keyboard.';
@@ -22,7 +21,7 @@ export const description = 'Allows a user to enter and edit date values using a
 
 ## Value
 
-Use the `value` or `defaultValue` prop to set the date value, using objects in the <Link href={`${getBaseUrl('react-aria')}/internationalized/date/`}>@internationalized/date</Link> package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc.
+Use the `value` or `defaultValue` prop to set the date value, using objects in the [@internationalized/date](react-aria:internationalized/date/) package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc.
 
 ```tsx render
 "use client";
diff --git a/packages/dev/s2-docs/pages/s2/DatePicker.mdx b/packages/dev/s2-docs/pages/s2/DatePicker.mdx
index aa7616696ea..3bb847ed700 100644
--- a/packages/dev/s2-docs/pages/s2/DatePicker.mdx
+++ b/packages/dev/s2-docs/pages/s2/DatePicker.mdx
@@ -3,7 +3,6 @@ export default Layout;
 
 import {DatePicker} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
-import {getBaseUrl} from '../../src/pageUtils';
 
 export const tags = ['calendar'];
 export const description = 'Combines a DateField and a Calendar popover.';
@@ -22,7 +21,7 @@ export const description = 'Combines a DateField and a Calendar popover.';
 
 ## Value
 
-Use the `value` or `defaultValue` prop to set the date value, using objects in the <Link href={`${getBaseUrl('react-aria')}/internationalized/date/`}>@internationalized/date</Link> package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc.
+Use the `value` or `defaultValue` prop to set the date value, using objects in the [@internationalized/date](react-aria:internationalized/date/) package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc.
 
 ```tsx render
 "use client";
diff --git a/packages/dev/s2-docs/pages/s2/DateRangePicker.mdx b/packages/dev/s2-docs/pages/s2/DateRangePicker.mdx
index 011061a7c6e..cc349dc81d3 100644
--- a/packages/dev/s2-docs/pages/s2/DateRangePicker.mdx
+++ b/packages/dev/s2-docs/pages/s2/DateRangePicker.mdx
@@ -3,7 +3,6 @@ export default Layout;
 
 import {DateRangePicker} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
-import {getBaseUrl} from '../../src/pageUtils';
 
 export const tags = ['calendar'];
 export const description = 'Combines two DateFields and a RangeCalendar popover.';
@@ -28,7 +27,7 @@ export const description = 'Combines two DateFields and a RangeCalendar popover.
 
 ## Value
 
-Use the `value` or `defaultValue` prop to set the selected date range, using objects in the <Link href={`${getBaseUrl('react-aria')}/internationalized/date/`}>@internationalized/date</Link> package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc.
+Use the `value` or `defaultValue` prop to set the selected date range, using objects in the [@internationalized/date](react-aria:internationalized/date/) package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc.
 
 ```tsx render
 "use client";
diff --git a/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx b/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx
index cfa4b8e2146..7fa53125f59 100644
--- a/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx
+++ b/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx
@@ -3,7 +3,6 @@ export default Layout;
 
 import {RangeCalendar} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
-import {getBaseUrl} from '../../src/pageUtils';
 
 export const tags = ['calendar'];
 export const description = 'Allows a user to select a contiguous range of dates.';
@@ -30,7 +29,7 @@ export const description = 'Allows a user to select a contiguous range of dates.
 
 ## Value
 
-Use the `value` or `defaultValue` prop to set the selected date range, using objects in the <Link href={`${getBaseUrl('react-aria')}/internationalized/date/`}>@internationalized/date</Link> package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc.
+Use the `value` or `defaultValue` prop to set the selected date range, using objects in the [@internationalized/date](react-aria:internationalized/date/) package. This library supports parsing date strings in multiple formats, manipulation across international calendar systems, time zones, etc.
 
 ```tsx render
 "use client";
@@ -83,7 +82,7 @@ import {parseDate} from '@internationalized/date';
 
 ### Custom calendar systems
 
-`RangeCalendar` also supports custom calendar systems that implement custom business rules, for example a fiscal year calendar that follows a [4-5-4 format](https://nrf.com/resources/4-5-4-calendar), where month ranges don't follow the usual Gregorian calendar. See the <Link href={`${getBaseUrl('react-aria')}/internationalized/date/Calendar#custom-calendars`}>@internationalized/date docs</Link> for an example implementation.
+`RangeCalendar` also supports custom calendar systems that implement custom business rules, for example a fiscal year calendar that follows a [4-5-4 format](https://nrf.com/resources/4-5-4-calendar), where month ranges don't follow the usual Gregorian calendar. See the [@internationalized/date docs](react-aria:internationalized/date/Calendar#custom-calendars) for an example implementation.
 
 ```tsx render
 "use client";
diff --git a/packages/dev/s2-docs/pages/s2/TimeField.mdx b/packages/dev/s2-docs/pages/s2/TimeField.mdx
index 50ef4889477..9bad9790770 100644
--- a/packages/dev/s2-docs/pages/s2/TimeField.mdx
+++ b/packages/dev/s2-docs/pages/s2/TimeField.mdx
@@ -3,7 +3,6 @@ export default Layout;
 
 import {TimeField} from '@react-spectrum/s2';
 import docs from 'docs:@react-spectrum/s2';
-import {getBaseUrl} from '../../src/pageUtils';
 
 export const tags = ['date', 'input'];
 export const description = 'Allows a user to enter and edit time values using a keyboard.';
@@ -23,7 +22,7 @@ export const description = 'Allows a user to enter and edit time values using a
 
 ## Value
 
-Use the `value` or `defaultValue` prop to set the time value, using objects in the <Link href={`${getBaseUrl('react-aria')}/internationalized/date/`}>@internationalized/date</Link> package. `TimeField` accepts plain <Link href={`${getBaseUrl('react-aria')}/internationalized/date/Time`}>Time</Link>, <Link href={`${getBaseUrl('react-aria')}/internationalized/date/CalendarDateTime`}>CalendarDateTime</Link>, or <Link href={`${getBaseUrl('react-aria')}/internationalized/date/ZonedDateTime`}>ZonedDateTime</Link>, but only displays the time.
+Use the `value` or `defaultValue` prop to set the time value, using objects in the [@internationalized/date](react-aria:internationalized/date/) package. `TimeField` accepts plain [Time](react-aria:internationalized/date/Time), [CalendarDateTime](react-aria:internationalized/date/CalendarDateTime), or [ZonedDateTime](react-aria:internationalized/date/ZonedDateTime), but only displays the time.
 
 ```tsx render
 "use client";
diff --git a/packages/dev/s2-docs/scripts/generateMarkdownDocs.mjs b/packages/dev/s2-docs/scripts/generateMarkdownDocs.mjs
index 709f003f6ec..753523577a0 100644
--- a/packages/dev/s2-docs/scripts/generateMarkdownDocs.mjs
+++ b/packages/dev/s2-docs/scripts/generateMarkdownDocs.mjs
@@ -3,6 +3,7 @@
 import * as babel from '@babel/parser';
 import {fileURLToPath} from 'url';
 import fs from 'fs';
+import {getBaseUrl} from '../src/pageUtils';
 import glob from 'fast-glob';
 import path from 'path';
 import {Project} from 'ts-morph';
@@ -1141,6 +1142,11 @@ function remarkDocsComponentsToMarkdown() {
           }
         }
 
+        if (href && (href.startsWith('s2:') || href.startsWith('react-aria:'))) {
+          let url = new URL(href);
+          href = getBaseUrl(url.protocol.slice(0, -1)) + '/' + url.pathname;
+        }
+
         // Convert .html links to .md for relative links
         if (href && !href.startsWith('http') && !href.startsWith('//') && href.endsWith('.html')) {
           href = href.replace(/\.html$/, '.md');
diff --git a/packages/dev/s2-docs/src/Link.tsx b/packages/dev/s2-docs/src/Link.tsx
index 369ae0f164f..6b50bcab0ea 100644
--- a/packages/dev/s2-docs/src/Link.tsx
+++ b/packages/dev/s2-docs/src/Link.tsx
@@ -7,6 +7,11 @@ import {Link as RACLink, LinkProps as RACLinkProps} from 'react-aria-components'
 import React from 'react';
 
 export function Link({href, ...props}: LinkProps) {
+  if (href?.startsWith('s2:') || href?.startsWith('react-aria:')) {
+    let url = new URL(href);
+    href = getBaseUrl(url.protocol.slice(0, -1) as any) + '/' + url.pathname;
+  }
+
   return (
     <S2Link {...props} href={href} {...getAnchorProps(href)} />
   );

From c2b9f7b828af83061d737edebba176338de72923 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 2 Dec 2025 13:49:57 -0800
Subject: [PATCH 34/49] Add horizontal scrolling for non-expandable code blocks

---
 packages/dev/s2-docs/src/CodeBlock.tsx        |  9 +++++++-
 .../dev/s2-docs/src/VisualExampleClient.tsx   | 21 +++++++++++++------
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/packages/dev/s2-docs/src/CodeBlock.tsx b/packages/dev/s2-docs/src/CodeBlock.tsx
index 01cb3ba2cfe..7f50e756042 100644
--- a/packages/dev/s2-docs/src/CodeBlock.tsx
+++ b/packages/dev/s2-docs/src/CodeBlock.tsx
@@ -161,7 +161,14 @@ function TruncatedCode({children, maxLines = 6, ...props}: TruncatedCodeProps) {
     </ExpandableCode>
   )
   : (
-    <div className={style({overflow: 'auto'})}>
+    <div
+      className={style({
+        overflow: 'auto',
+        '--code-padding-end': {
+          type: 'paddingEnd',
+          value: 64 // Extra space for the toolbar
+        }
+      })}>
       <Pre>
         <Code {...props}>{children}</Code>
       </Pre>
diff --git a/packages/dev/s2-docs/src/VisualExampleClient.tsx b/packages/dev/s2-docs/src/VisualExampleClient.tsx
index 9532a918447..8338e39a527 100644
--- a/packages/dev/s2-docs/src/VisualExampleClient.tsx
+++ b/packages/dev/s2-docs/src/VisualExampleClient.tsx
@@ -181,12 +181,21 @@ export function CodeOutput({code, type, showCoachMark}: CodeOutputProps) {
   }
 
   code ||= (
-    <Pre>
-      <code style={{fontFamily: 'inherit', WebkitTextSizeAdjust: 'none'}}>
-        {importSource ? renderImports(name, importSource, props) : null}
-        {renderElement(name, props, controls)}
-      </code>
-    </Pre>
+    <div
+      className={style({
+        overflow: 'auto',
+        '--code-padding-end': {
+          type: 'paddingEnd',
+          value: 64 // Extra space for the toolbar
+        }
+      })}>
+      <Pre>
+        <code style={{fontFamily: 'inherit', WebkitTextSizeAdjust: 'none'}}>
+          {importSource ? renderImports(name, importSource, props) : null}
+          {renderElement(name, props, controls)}
+        </code>
+      </Pre>
+    </div>
   );
 
   return (

From b2a16a1613a55577882b9e07d86e0a87f72e9ef9 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 2 Dec 2025 14:43:02 -0800
Subject: [PATCH 35/49] Add tap highlight color to tailwind elements

---
 starters/docs/src/Breadcrumbs.css           | 1 +
 starters/docs/src/Link.css                  | 1 +
 starters/tailwind/src/Button.tsx            | 2 +-
 starters/tailwind/src/Calendar.tsx          | 2 +-
 starters/tailwind/src/Checkbox.tsx          | 2 +-
 starters/tailwind/src/ColorField.tsx        | 2 +-
 starters/tailwind/src/ColorPicker.tsx       | 2 +-
 starters/tailwind/src/ColorSwatchPicker.tsx | 2 +-
 starters/tailwind/src/DateField.tsx         | 2 +-
 starters/tailwind/src/Disclosure.tsx        | 2 +-
 starters/tailwind/src/Field.tsx             | 2 +-
 starters/tailwind/src/FieldButton.tsx       | 2 +-
 starters/tailwind/src/GridList.tsx          | 4 ++--
 starters/tailwind/src/Link.tsx              | 2 +-
 starters/tailwind/src/ListBox.tsx           | 4 ++--
 starters/tailwind/src/NumberField.tsx       | 2 +-
 starters/tailwind/src/RadioGroup.tsx        | 2 +-
 starters/tailwind/src/RangeCalendar.tsx     | 2 +-
 starters/tailwind/src/Select.tsx            | 2 +-
 starters/tailwind/src/Switch.tsx            | 2 +-
 starters/tailwind/src/Table.tsx             | 4 ++--
 starters/tailwind/src/Tabs.tsx              | 4 ++--
 starters/tailwind/src/TagGroup.tsx          | 2 +-
 starters/tailwind/src/Toast.tsx             | 6 +++---
 starters/tailwind/src/ToggleButton.tsx      | 2 +-
 starters/tailwind/src/Tree.tsx              | 6 +++---
 26 files changed, 34 insertions(+), 32 deletions(-)

diff --git a/starters/docs/src/Breadcrumbs.css b/starters/docs/src/Breadcrumbs.css
index 2620ace30fc..488dc47777a 100644
--- a/starters/docs/src/Breadcrumbs.css
+++ b/starters/docs/src/Breadcrumbs.css
@@ -20,6 +20,7 @@
     position: relative;
     text-decoration: none;
     cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
 
     &[data-hovered],
     &[data-focus-visible] {
diff --git a/starters/docs/src/Link.css b/starters/docs/src/Link.css
index 8197ccbf053..9017b665f78 100644
--- a/starters/docs/src/Link.css
+++ b/starters/docs/src/Link.css
@@ -10,6 +10,7 @@
   outline: none;
   position: relative;
   border-radius: var(--radius-sm);
+  -webkit-tap-highlight-color: transparent;
 
   &[data-hovered] {
     text-decoration-thickness: 1.5px;
diff --git a/starters/tailwind/src/Button.tsx b/starters/tailwind/src/Button.tsx
index a00db610de1..1e59fb0544a 100644
--- a/starters/tailwind/src/Button.tsx
+++ b/starters/tailwind/src/Button.tsx
@@ -11,7 +11,7 @@ export interface ButtonProps extends RACButtonProps {
 
 let button = tv({
   extend: focusRing,
-  base: 'relative inline-flex items-center justify-center gap-2 border border-transparent dark:border-white/10 h-9 box-border px-3.5 py-0 [&:has(>svg:only-child)]:px-0 [&:has(>svg:only-child)]:h-8 [&:has(>svg:only-child)]:aspect-square font-sans text-sm text-center transition rounded-lg cursor-default',
+  base: 'relative inline-flex items-center justify-center gap-2 border border-transparent dark:border-white/10 h-9 box-border px-3.5 py-0 [&:has(>svg:only-child)]:px-0 [&:has(>svg:only-child)]:h-8 [&:has(>svg:only-child)]:aspect-square font-sans text-sm text-center transition rounded-lg cursor-default [-webkit-tap-highlight-color:transparent]',
   variants: {
     variant: {
       primary: 'bg-blue-600 hover:bg-blue-700 pressed:bg-blue-800 text-white',
diff --git a/starters/tailwind/src/Calendar.tsx b/starters/tailwind/src/Calendar.tsx
index fc575371d33..5bf9b70621b 100644
--- a/starters/tailwind/src/Calendar.tsx
+++ b/starters/tailwind/src/Calendar.tsx
@@ -20,7 +20,7 @@ import { composeTailwindRenderProps, focusRing } from './utils';
 
 const cellStyles = tv({
   extend: focusRing,
-  base: 'w-9 h-9 text-sm cursor-default rounded-full flex items-center justify-center forced-color-adjust-none',
+  base: 'w-9 h-9 text-sm cursor-default rounded-full flex items-center justify-center forced-color-adjust-none [-webkit-tap-highlight-color:transparent]',
   variants: {
     isSelected: {
       false: 'text-neutral-900 dark:text-neutral-200 hover:bg-neutral-200 dark:hover:bg-neutral-700 pressed:bg-neutral-300 dark:pressed:bg-neutral-600',
diff --git a/starters/tailwind/src/Checkbox.tsx b/starters/tailwind/src/Checkbox.tsx
index 6df736ea9c3..c87371232ea 100644
--- a/starters/tailwind/src/Checkbox.tsx
+++ b/starters/tailwind/src/Checkbox.tsx
@@ -25,7 +25,7 @@ export function CheckboxGroup(props: CheckboxGroupProps) {
 }
 
 const checkboxStyles = tv({
-  base: 'flex gap-2 items-center group font-sans text-sm transition relative',
+  base: 'flex gap-2 items-center group font-sans text-sm transition relative [-webkit-tap-highlight-color:transparent]',
   variants: {
     isDisabled: {
       false: 'text-neutral-800 dark:text-neutral-200',
diff --git a/starters/tailwind/src/ColorField.tsx b/starters/tailwind/src/ColorField.tsx
index cf708c8b5a6..b6f7c1de55f 100644
--- a/starters/tailwind/src/ColorField.tsx
+++ b/starters/tailwind/src/ColorField.tsx
@@ -11,7 +11,7 @@ import { composeTailwindRenderProps, focusRing } from './utils';
 
 const inputStyles = tv({
   extend: focusRing,
-  base: 'border-1 rounded-lg min-h-9 font-sans text-sm py-0 px-3 box-border transition',
+  base: 'border-1 rounded-lg min-h-9 font-sans text-sm py-0 px-3 box-border transition [-webkit-tap-highlight-color:transparent]',
   variants: {
     isFocused: fieldBorderStyles.variants.isFocusWithin,
     isInvalid: fieldBorderStyles.variants.isInvalid,
diff --git a/starters/tailwind/src/ColorPicker.tsx b/starters/tailwind/src/ColorPicker.tsx
index 8dcf2f81f5e..6fadbc46121 100644
--- a/starters/tailwind/src/ColorPicker.tsx
+++ b/starters/tailwind/src/ColorPicker.tsx
@@ -12,7 +12,7 @@ import { focusRing } from './utils';
 
 const buttonStyles = tv({
   extend: focusRing,
-  base: 'border-0 bg-transparent flex gap-2 items-center cursor-default rounded-xs font-sans text-sm text-neutral-800 dark:text-neutral-200'
+  base: 'border-0 bg-transparent flex gap-2 items-center cursor-default rounded-xs font-sans text-sm text-neutral-800 dark:text-neutral-200 [-webkit-tap-highlight-color:transparent]'
 });
 
 export interface ColorPickerProps extends Omit<AriaColorPickerProps, 'children'> {
diff --git a/starters/tailwind/src/ColorSwatchPicker.tsx b/starters/tailwind/src/ColorSwatchPicker.tsx
index d9b4301453d..a7d502df771 100644
--- a/starters/tailwind/src/ColorSwatchPicker.tsx
+++ b/starters/tailwind/src/ColorSwatchPicker.tsx
@@ -33,7 +33,7 @@ export function ColorSwatchPicker(
 
 const itemStyles = tv({
   extend: focusRing,
-  base: 'relative rounded-xs'
+  base: 'relative rounded-xs [-webkit-tap-highlight-color:transparent]'
 });
 
 export function ColorSwatchPickerItem(props: ColorSwatchPickerItemProps) {
diff --git a/starters/tailwind/src/DateField.tsx b/starters/tailwind/src/DateField.tsx
index b6600e236a3..93cc6ca0a82 100644
--- a/starters/tailwind/src/DateField.tsx
+++ b/starters/tailwind/src/DateField.tsx
@@ -33,7 +33,7 @@ export function DateField<T extends DateValue>(
 }
 
 const segmentStyles = tv({
-  base: 'inline p-0.5 whitespace-nowrap type-literal:p-0 rounded-xs outline outline-0 forced-color-adjust-none caret-transparent text-neutral-800 dark:text-neutral-200 forced-colors:text-[ButtonText]',
+  base: 'inline p-0.5 whitespace-nowrap type-literal:p-0 rounded-xs outline outline-0 forced-color-adjust-none caret-transparent text-neutral-800 dark:text-neutral-200 forced-colors:text-[ButtonText] [-webkit-tap-highlight-color:transparent]',
   variants: {
     isPlaceholder: {
       true: 'text-neutral-600 dark:text-neutral-400'
diff --git a/starters/tailwind/src/Disclosure.tsx b/starters/tailwind/src/Disclosure.tsx
index 6d0c067828a..b4562ddf5e4 100644
--- a/starters/tailwind/src/Disclosure.tsx
+++ b/starters/tailwind/src/Disclosure.tsx
@@ -17,7 +17,7 @@ import { ChevronRight } from "lucide-react";
 import { composeTailwindRenderProps } from "./utils";
 
 const disclosure = tv({
-  base: "group min-w-64 font-sans rounded-lg text-neutral-900 dark:text-neutral-200"
+  base: "group min-w-50 font-sans rounded-lg text-neutral-900 dark:text-neutral-200"
 });
 
 const chevron = tv({
diff --git a/starters/tailwind/src/Field.tsx b/starters/tailwind/src/Field.tsx
index 91e9e492431..563e83c2012 100644
--- a/starters/tailwind/src/Field.tsx
+++ b/starters/tailwind/src/Field.tsx
@@ -44,5 +44,5 @@ export function FieldGroup(props: GroupProps) {
 }
 
 export function Input(props: InputProps) {
-  return <RACInput {...props} className={composeTailwindRenderProps(props.className, 'px-3 py-0 min-h-9 flex-1 min-w-0 border-0 outline outline-0 bg-white dark:bg-neutral-900 font-sans text-sm text-neutral-800 dark:text-neutral-200 placeholder:text-neutral-600 dark:placeholder:text-neutral-400 disabled:text-neutral-200 dark:disabled:text-neutral-600 disabled:placeholder:text-neutral-200 dark:disabled:placeholder:text-neutral-600')} />
+  return <RACInput {...props} className={composeTailwindRenderProps(props.className, 'px-3 py-0 min-h-9 flex-1 min-w-0 border-0 outline outline-0 bg-white dark:bg-neutral-900 font-sans text-sm text-neutral-800 dark:text-neutral-200 placeholder:text-neutral-600 dark:placeholder:text-neutral-400 disabled:text-neutral-200 dark:disabled:text-neutral-600 disabled:placeholder:text-neutral-200 dark:disabled:placeholder:text-neutral-600 [-webkit-tap-highlight-color:transparent]')} />
 }
diff --git a/starters/tailwind/src/FieldButton.tsx b/starters/tailwind/src/FieldButton.tsx
index 9a1c129ce50..6b3d91611f6 100644
--- a/starters/tailwind/src/FieldButton.tsx
+++ b/starters/tailwind/src/FieldButton.tsx
@@ -11,7 +11,7 @@ export interface ButtonProps extends RACButtonProps {
 
 let button = tv({
   extend: focusRing,
-  base: 'relative inline-flex items-center border-0 font-sans text-sm text-center transition rounded-md cursor-default p-1 flex items-center justify-center text-neutral-600 bg-transparent hover:bg-black/[5%] pressed:bg-black/10 dark:text-neutral-400 dark:hover:bg-white/10 dark:pressed:bg-white/20 disabled:bg-transparent',
+  base: 'relative inline-flex items-center border-0 font-sans text-sm text-center transition rounded-md cursor-default p-1 flex items-center justify-center text-neutral-600 bg-transparent hover:bg-black/[5%] pressed:bg-black/10 dark:text-neutral-400 dark:hover:bg-white/10 dark:pressed:bg-white/20 disabled:bg-transparent [-webkit-tap-highlight-color:transparent]',
   variants: {
     isDisabled: {
       true: 'bg-neutral-100 dark:bg-neutral-800 text-neutral-300 dark:text-neutral-600 forced-colors:text-[GrayText] border-black/5 dark:border-white/5'
diff --git a/starters/tailwind/src/GridList.tsx b/starters/tailwind/src/GridList.tsx
index 24d576738d8..436ecee7abd 100644
--- a/starters/tailwind/src/GridList.tsx
+++ b/starters/tailwind/src/GridList.tsx
@@ -27,8 +27,8 @@ const itemStyles = tv({
   base: 'relative flex gap-3 cursor-default select-none py-2 px-3 text-sm text-neutral-900 dark:text-neutral-200 border-t dark:border-t-neutral-700 border-transparent first:border-t-0 first:rounded-t-lg last:rounded-b-lg last:mb-0 -outline-offset-2',
   variants: {
     isSelected: {
-      false: 'hover:bg-neutral-100 dark:hover:bg-neutral-700/60',
-      true: 'bg-blue-100 dark:bg-blue-700/30 hover:bg-blue-200 dark:hover:bg-blue-700/40 border-y-blue-200 dark:border-y-blue-900 z-20'
+      false: 'hover:bg-neutral-100 pressed:bg-neutral-100 dark:hover:bg-neutral-700/60 dark:pressed:bg-neutral-700/60',
+      true: 'bg-blue-100 dark:bg-blue-700/30 hover:bg-blue-200 pressed:bg-blue-200 dark:hover:bg-blue-700/40 dark:pressed:bg-blue-700/40 border-y-blue-200 dark:border-y-blue-900 z-20'
     },
     isDisabled: {
       true: 'text-neutral-300 dark:text-neutral-600 forced-colors:text-[GrayText] z-10'
diff --git a/starters/tailwind/src/Link.tsx b/starters/tailwind/src/Link.tsx
index b85d20087a0..5607cabbbc5 100644
--- a/starters/tailwind/src/Link.tsx
+++ b/starters/tailwind/src/Link.tsx
@@ -10,7 +10,7 @@ interface LinkProps extends AriaLinkProps {
 
 const styles = tv({
   extend: focusRing,
-  base: 'underline disabled:no-underline disabled:cursor-default forced-colors:disabled:text-[GrayText] transition rounded-xs',
+  base: 'underline disabled:no-underline disabled:cursor-default forced-colors:disabled:text-[GrayText] transition rounded-xs [-webkit-tap-highlight-color:transparent]',
   variants: {
     variant: {
       primary: 'text-blue-600 dark:text-blue-500 underline decoration-blue-600/60 hover:decoration-blue-600 dark:decoration-blue-500/60 dark:hover:decoration-blue-500',
diff --git a/starters/tailwind/src/ListBox.tsx b/starters/tailwind/src/ListBox.tsx
index d4da33f2557..2b23739cc77 100644
--- a/starters/tailwind/src/ListBox.tsx
+++ b/starters/tailwind/src/ListBox.tsx
@@ -32,7 +32,7 @@ export const itemStyles = tv({
   base: 'group relative flex items-center gap-8 cursor-default select-none py-1.5 px-2.5 rounded-md will-change-transform text-sm forced-color-adjust-none',
   variants: {
     isSelected: {
-      false: 'text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 -outline-offset-2',
+      false: 'text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 pressed:bg-neutral-100 dark:hover:bg-neutral-800 dark:pressed:bg-neutral-800 -outline-offset-2',
       true: 'bg-blue-600 text-white forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] [&:has(+[data-selected])]:rounded-b-none [&+[data-selected]]:rounded-t-none -outline-offset-4 outline-white dark:outline-white forced-colors:outline-[HighlightText]'
     },
     isDisabled: {
@@ -54,7 +54,7 @@ export function ListBoxItem(props: ListBoxItemProps) {
 }
 
 export const dropdownItemStyles = tv({
-  base: 'group flex items-center gap-4 cursor-default select-none py-2 pl-3 pr-1 rounded-lg outline outline-0 text-sm forced-color-adjust-none no-underline [&[href]]:cursor-pointer',
+  base: 'group flex items-center gap-4 cursor-default select-none py-2 pl-3 pr-1 rounded-lg outline outline-0 text-sm forced-color-adjust-none no-underline [&[href]]:cursor-pointer [-webkit-tap-highlight-color:transparent]',
   variants: {
     isDisabled: {
       false: 'text-neutral-900 dark:text-neutral-100',
diff --git a/starters/tailwind/src/NumberField.tsx b/starters/tailwind/src/NumberField.tsx
index 0f911aba6e6..90c97e18a4d 100644
--- a/starters/tailwind/src/NumberField.tsx
+++ b/starters/tailwind/src/NumberField.tsx
@@ -44,5 +44,5 @@ export function NumberField(
 }
 
 function StepperButton(props: ButtonProps) {
-  return <Button {...props} className="flex border-0 py-0 px-0.5 flex-1 box-border cursor-default text-neutral-500 bg-transparent pressed:bg-neutral-100 group-disabled:text-neutral-200 dark:text-neutral-400 dark:pressed:bg-neutral-800 dark:group-disabled:text-neutral-600 forced-colors:group-disabled:text-[GrayText]" />
+  return <Button {...props} className="flex border-0 py-0 px-0.5 flex-1 box-border cursor-default text-neutral-500 bg-transparent pressed:bg-neutral-100 group-disabled:text-neutral-200 dark:text-neutral-400 dark:pressed:bg-neutral-800 dark:group-disabled:text-neutral-600 forced-colors:group-disabled:text-[GrayText] [-webkit-tap-highlight-color:transparent]" />
 }
diff --git a/starters/tailwind/src/RadioGroup.tsx b/starters/tailwind/src/RadioGroup.tsx
index 416728e7259..19d0a96d909 100644
--- a/starters/tailwind/src/RadioGroup.tsx
+++ b/starters/tailwind/src/RadioGroup.tsx
@@ -44,7 +44,7 @@ const styles = tv({
 
 export function Radio(props: RadioProps) {
   return (
-    <RACRadio {...props} className={composeTailwindRenderProps(props.className, 'flex relative gap-2 items-center group text-neutral-800 disabled:text-neutral-300 dark:text-neutral-200 dark:disabled:text-neutral-600 forced-colors:disabled:text-[GrayText] text-sm transition')}>
+    <RACRadio {...props} className={composeTailwindRenderProps(props.className, 'flex relative gap-2 items-center group text-neutral-800 disabled:text-neutral-300 dark:text-neutral-200 dark:disabled:text-neutral-600 forced-colors:disabled:text-[GrayText] text-sm transition [-webkit-tap-highlight-color:transparent]')}>
       {composeRenderProps(props.children, (children, renderProps) => <>
         <div className={styles(renderProps)} />
         {children}
diff --git a/starters/tailwind/src/RangeCalendar.tsx b/starters/tailwind/src/RangeCalendar.tsx
index fba146d73a3..0dfa7ad0443 100644
--- a/starters/tailwind/src/RangeCalendar.tsx
+++ b/starters/tailwind/src/RangeCalendar.tsx
@@ -46,7 +46,7 @@ export function RangeCalendar<T extends DateValue>(
       <CalendarGrid className="[&_td]:px-0 [&_td]:py-px border-spacing-0">
         <CalendarGridHeader />
         <CalendarGridBody>
-          {(date) => <CalendarCell date={date} className="group w-9 h-9 text-sm outline outline-0 cursor-default outside-month:text-neutral-300 selected:bg-blue-100 dark:selected:bg-blue-700/30 forced-colors:selected:bg-[Highlight] invalid:selected:bg-red-100 dark:invalid:selected:bg-red-700/30 forced-colors:invalid:selected:bg-[Mark] [td:first-child_&]:rounded-s-full selection-start:rounded-s-full [td:last-child_&]:rounded-e-full selection-end:rounded-e-full">
+          {(date) => <CalendarCell date={date} className="group w-9 h-9 text-sm outline outline-0 cursor-default outside-month:text-neutral-300 selected:bg-blue-100 dark:selected:bg-blue-700/30 forced-colors:selected:bg-[Highlight] invalid:selected:bg-red-100 dark:invalid:selected:bg-red-700/30 forced-colors:invalid:selected:bg-[Mark] [td:first-child_&]:rounded-s-full selection-start:rounded-s-full [td:last-child_&]:rounded-e-full selection-end:rounded-e-full [-webkit-tap-highlight-color:transparent]">
             {({formattedDate, isSelected, isSelectionStart, isSelectionEnd, isFocusVisible, isDisabled}) =>
               <span
                 className={cell({
diff --git a/starters/tailwind/src/Select.tsx b/starters/tailwind/src/Select.tsx
index e8f53163dd6..94e6b9efb32 100644
--- a/starters/tailwind/src/Select.tsx
+++ b/starters/tailwind/src/Select.tsx
@@ -18,7 +18,7 @@ import { composeTailwindRenderProps, focusRing } from './utils';
 
 const styles = tv({
   extend: focusRing,
-  base: 'flex items-center text-start gap-4 w-full font-sans border border-black/10 dark:border-white/10 cursor-default rounded-lg pl-3 pr-2 h-9 min-w-[180px] transition bg-neutral-50 dark:bg-neutral-700',
+  base: 'flex items-center text-start gap-4 w-full font-sans border border-black/10 dark:border-white/10 cursor-default rounded-lg pl-3 pr-2 h-9 min-w-[180px] transition bg-neutral-50 dark:bg-neutral-700 [-webkit-tap-highlight-color:transparent]',
   variants: {
     isDisabled: {
       false: 'text-neutral-800 dark:text-neutral-300 hover:bg-neutral-100 pressed:bg-neutral-200 dark:hover:bg-neutral-600 dark:pressed:bg-neutral-500 group-invalid:outline group-invalid:outline-red-600 forced-colors:group-invalid:outline-[Mark]',
diff --git a/starters/tailwind/src/Switch.tsx b/starters/tailwind/src/Switch.tsx
index b07c26727d5..5c0a0d40d15 100644
--- a/starters/tailwind/src/Switch.tsx
+++ b/starters/tailwind/src/Switch.tsx
@@ -52,7 +52,7 @@ const handle = tv({
 
 export function Switch({ children, ...props }: SwitchProps) {
   return (
-    <AriaSwitch {...props} className={composeTailwindRenderProps(props.className, 'group relative flex gap-2 items-center text-neutral-800 disabled:text-neutral-300 dark:text-neutral-200 dark:disabled:text-neutral-600 forced-colors:disabled:text-[GrayText] text-sm transition')}>
+    <AriaSwitch {...props} className={composeTailwindRenderProps(props.className, 'group relative flex gap-2 items-center text-neutral-800 disabled:text-neutral-300 dark:text-neutral-200 dark:disabled:text-neutral-600 forced-colors:disabled:text-[GrayText] text-sm transition [-webkit-tap-highlight-color:transparent]')}>
       {(renderProps) => (
         <>
           <div className={track(renderProps)}>
diff --git a/starters/tailwind/src/Table.tsx b/starters/tailwind/src/Table.tsx
index 3abae4b4e7d..21c7bd62d36 100644
--- a/starters/tailwind/src/Table.tsx
+++ b/starters/tailwind/src/Table.tsx
@@ -106,7 +106,7 @@ export function TableBody<T extends object>(props: TableBodyProps<T>) {
 
 const rowStyles = tv({
   extend: focusRing,
-  base: 'group/row relative cursor-default select-none -outline-offset-2 text-neutral-900 disabled:text-neutral-300 dark:text-neutral-200 dark:disabled:text-neutral-600 text-sm hover:bg-neutral-100 dark:hover:bg-neutral-800 selected:bg-blue-100 selected:hover:bg-blue-200 dark:selected:bg-blue-700/30 dark:selected:hover:bg-blue-700/40 last:rounded-b-lg'
+  base: 'group/row relative cursor-default select-none -outline-offset-2 text-neutral-900 disabled:text-neutral-300 dark:text-neutral-200 dark:disabled:text-neutral-600 text-sm hover:bg-neutral-100 pressed:bg-neutral-100 dark:hover:bg-neutral-800 dark:pressed:bg-neutral-800 selected:bg-blue-100 selected:hover:bg-blue-200 selected:pressed:bg-blue-200 dark:selected:bg-blue-700/30 dark:selected:hover:bg-blue-700/40 dark:selected:pressed:bg-blue-700/40 last:rounded-b-lg'
 });
 
 export function Row<T extends object>(
@@ -135,7 +135,7 @@ export function Row<T extends object>(
 
 const cellStyles = tv({
   extend: focusRing,
-  base: 'box-border border-b border-b-neutral-200 dark:border-b-neutral-700 group-last/row:border-b-0 [--selected-border:var(--color-blue-200)] dark:[--selected-border:var(--color-blue-900)] group-selected/row:border-(--selected-border) in-[:has(+[data-selected])]:border-(--selected-border) p-2 truncate -outline-offset-2 group-last/row:first:rounded-bl-lg group-last/row:last:rounded-br-lg'
+  base: 'box-border [-webkit-tap-highlight-color:transparent] border-b border-b-neutral-200 dark:border-b-neutral-700 group-last/row:border-b-0 [--selected-border:var(--color-blue-200)] dark:[--selected-border:var(--color-blue-900)] group-selected/row:border-(--selected-border) in-[:has(+[data-selected])]:border-(--selected-border) p-2 truncate -outline-offset-2 group-last/row:first:rounded-bl-lg group-last/row:last:rounded-br-lg'
 });
 
 export function Cell(props: CellProps) {
diff --git a/starters/tailwind/src/Tabs.tsx b/starters/tailwind/src/Tabs.tsx
index 9855d8094c1..6496bde342f 100644
--- a/starters/tailwind/src/Tabs.tsx
+++ b/starters/tailwind/src/Tabs.tsx
@@ -40,7 +40,7 @@ export function Tabs(props: TabsProps) {
 }
 
 const tabListStyles = tv({
-  base: 'flex gap-1',
+  base: 'flex',
   variants: {
     orientation: {
       horizontal: 'flex-row',
@@ -62,7 +62,7 @@ export function TabList<T extends object>(props: TabListProps<T>) {
 
 const tabProps = tv({
   extend: focusRing,
-  base: 'group relative flex items-center cursor-default rounded-full px-4 py-1.5 text-sm font-medium transition forced-color-adjust-none',
+  base: 'group relative flex items-center cursor-default rounded-full px-3 py-1.5 text-sm font-medium transition forced-color-adjust-none [-webkit-tap-highlight-color:transparent]',
   variants: {
     isDisabled: {
       true: 'text-neutral-200 dark:text-neutral-600 forced-colors:text-[GrayText] selected:text-white dark:selected:text-neutral-500 forced-colors:selected:text-[HighlightText] selected:bg-neutral-200 dark:selected:bg-neutral-600 forced-colors:selected:bg-[GrayText]'
diff --git a/starters/tailwind/src/TagGroup.tsx b/starters/tailwind/src/TagGroup.tsx
index a71acf60850..a21debe93d3 100644
--- a/starters/tailwind/src/TagGroup.tsx
+++ b/starters/tailwind/src/TagGroup.tsx
@@ -29,7 +29,7 @@ const ColorContext = createContext<Color>('gray');
 
 const tagStyles = tv({
   extend: focusRing,
-  base: 'transition cursor-default text-xs rounded-full border px-3 py-0.5 flex items-center max-w-fit gap-1 font-sans',
+  base: 'transition cursor-default text-xs rounded-full border px-3 py-0.5 flex items-center max-w-fit gap-1 font-sans [-webkit-tap-highlight-color:transparent]',
   variants: {
     color: {
       gray: '',
diff --git a/starters/tailwind/src/Toast.tsx b/starters/tailwind/src/Toast.tsx
index a22ed9ba56b..cdb66c26ea2 100644
--- a/starters/tailwind/src/Toast.tsx
+++ b/starters/tailwind/src/Toast.tsx
@@ -1,5 +1,5 @@
 'use client';
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import {
   UNSTABLE_ToastRegion as ToastRegion,
   UNSTABLE_Toast as Toast,
@@ -52,7 +52,7 @@ export function MyToastRegion() {
           <Button
             slot="close"
             aria-label="Close"
-            className="flex flex-none appearance-none w-8 h-8 rounded-sm bg-transparent border-none text-white p-0 outline-none hover:bg-white/10 pressed:bg-white/15 focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2 items-center justify-center">
+            className="flex flex-none appearance-none w-8 h-8 rounded-sm bg-transparent border-none text-white p-0 outline-none hover:bg-white/10 pressed:bg-white/15 focus-visible:outline-2 focus-visible:outline-white focus-visible:outline-offset-2 items-center justify-center [-webkit-tap-highlight-color:transparent]">
             <XIcon className="w-4 h-4" />
           </Button>
         </MyToast>
@@ -65,7 +65,7 @@ export function MyToast(props: ToastProps<MyToastContent>) {
   return (
     <Toast
       {...props}
-      style={{viewTransitionName: props.toast.key}}
+      style={{viewTransitionName: props.toast.key} as CSSProperties}
       className={composeTailwindRenderProps(
         props.className,
         "flex items-center gap-4 bg-blue-600 px-4 py-3 rounded-lg outline-none forced-colors:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 [view-transition-class:toast] font-sans w-[230px]"
diff --git a/starters/tailwind/src/ToggleButton.tsx b/starters/tailwind/src/ToggleButton.tsx
index 8d07377891e..205f2e1f441 100644
--- a/starters/tailwind/src/ToggleButton.tsx
+++ b/starters/tailwind/src/ToggleButton.tsx
@@ -6,7 +6,7 @@ import { focusRing } from './utils';
 
 let styles = tv({
   extend: focusRing,
-  base: 'relative inline-flex items-center justify-center gap-2 border border-black/10 dark:border-white/10 h-9 box-border px-3.5 [&:has(>svg:only-child)]:px-0 [&:has(>svg:only-child)]:h-8 [&:has(>svg:only-child)]:aspect-square font-sans text-sm text-center transition rounded-lg cursor-default forced-color-adjust-none',
+  base: 'relative inline-flex items-center justify-center gap-2 border border-black/10 dark:border-white/10 h-9 box-border px-3.5 [&:has(>svg:only-child)]:px-0 [&:has(>svg:only-child)]:h-8 [&:has(>svg:only-child)]:aspect-square font-sans text-sm text-center transition rounded-lg cursor-default forced-color-adjust-none [-webkit-tap-highlight-color:transparent]',
   variants: {
     isSelected: {
       false: 'bg-neutral-50 hover:bg-neutral-100 pressed:bg-neutral-200 text-neutral-800 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:pressed:bg-neutral-500 dark:text-neutral-100 forced-colors:bg-[ButtonFace]! forced-colors:text-[ButtonText]!',
diff --git a/starters/tailwind/src/Tree.tsx b/starters/tailwind/src/Tree.tsx
index 67bf9bb338d..94e877f3c7d 100644
--- a/starters/tailwind/src/Tree.tsx
+++ b/starters/tailwind/src/Tree.tsx
@@ -19,8 +19,8 @@ const itemStyles = tv({
   base: 'relative font-sans w-48 flex group gap-3 cursor-default select-none py-1 px-3 text-sm text-neutral-900 dark:text-neutral-200 bg-white dark:bg-neutral-900 border-t dark:border-t-neutral-700 border-transparent first:border-t-0 -outline-offset-2 first:rounded-t-lg last:rounded-b-lg',
   variants: {
     isSelected: {
-      false: 'hover:bg-neutral-100 dark:hover:bg-neutral-800',
-      true: 'bg-blue-100 dark:bg-blue-700/30 hover:bg-blue-200 dark:hover:bg-blue-700/40 border-y-blue-200 dark:border-y-blue-900 z-20'
+      false: 'hover:bg-neutral-100 pressed:bg-neutral-100 dark:hover:bg-neutral-800 dark:pressed:bg-neutral-800',
+      true: 'bg-blue-100 dark:bg-blue-700/30 hover:bg-blue-200 pressed:bg-blue-200 dark:hover:bg-blue-700/40 dark:pressed:bg-blue-700/40 border-y-blue-200 dark:border-y-blue-900 z-20'
     },
     isDisabled: {
       true: 'text-neutral-300 dark:text-neutral-600 forced-colors:text-[GrayText] z-10'
@@ -40,7 +40,7 @@ export function Tree<T extends object>(
 
 const expandButton = tv({
   extend: focusRing,
-  base: "border-0 p-0 bg-transparent shrink-0 w-8 h-8 rounded-lg flex items-center justify-center text-start cursor-default",
+  base: "border-0 p-0 bg-transparent shrink-0 w-8 h-8 rounded-lg flex items-center justify-center text-start cursor-default [-webkit-tap-highlight-color:transparent]",
   variants: {
     isDisabled: {
       true: 'text-neutral-300 dark:text-neutral-600 forced-colors:text-[GrayText]'

From b568ac6f908f9ff77efdd62f11367d70b6b8cb76 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 2 Dec 2025 14:43:18 -0800
Subject: [PATCH 36/49] Fix react warning in Tabs

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

diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx
index 5f5217cc4d5..b69c13b05f8 100644
--- a/packages/@react-spectrum/s2/src/Tabs.tsx
+++ b/packages/@react-spectrum/s2/src/Tabs.tsx
@@ -476,7 +476,7 @@ export function TabPanel(props: TabPanelProps): ReactNode | null {
 
 function CollapsedTabPanel(props: TabPanelProps) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  let {UNSAFE_style, UNSAFE_className = '', id, ...otherProps} = props;
+  let {UNSAFE_style, UNSAFE_className = '', id, shouldForceMount, ...otherProps} = props;
   let {menuId, valueId} = useContext(CollapseContext);
   let ref = useRef(null);
   let tabIndex = useHasTabbableChild(ref) ? undefined : 0;

From 7a7758f5c8db7ee8833dbb32f09ded4efb27d824 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 2 Dec 2025 14:56:24 -0800
Subject: [PATCH 37/49] Fix table async loading spinner positioning

---
 packages/dev/s2-docs/pages/react-aria/Table.mdx | 4 +++-
 starters/docs/src/Table.css                     | 7 +------
 starters/docs/src/Table.tsx                     | 2 +-
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/dev/s2-docs/pages/react-aria/Table.mdx b/packages/dev/s2-docs/pages/react-aria/Table.mdx
index 48de1df4a6b..050b2ef5cab 100644
--- a/packages/dev/s2-docs/pages/react-aria/Table.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Table.mdx
@@ -235,7 +235,9 @@ function AsyncSortTable() {
         </TableHeader>
         <TableBody
           renderEmptyState={() => (
-            <ProgressCircle isIndeterminate aria-label="Loading..." />
+            <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
+              <ProgressCircle isIndeterminate aria-label="Loading..." />
+            </div>
           )}>
           <Collection items={list.items}>
             {(item) => (
diff --git a/starters/docs/src/Table.css b/starters/docs/src/Table.css
index 40cb074296f..87f1c199aee 100644
--- a/starters/docs/src/Table.css
+++ b/starters/docs/src/Table.css
@@ -28,6 +28,7 @@
   }
 
   &:has(.react-aria-TableBody[data-empty]) {
+    height: 100%;
     min-height: 100px;
   }
 
@@ -330,10 +331,4 @@
 .react-aria-TableLoadingIndicator {
   height: 32px;
   position: relative;
-
-  > div {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
 }
diff --git a/starters/docs/src/Table.tsx b/starters/docs/src/Table.tsx
index 23bb721cbdd..bfd8cebadf9 100644
--- a/starters/docs/src/Table.tsx
+++ b/starters/docs/src/Table.tsx
@@ -118,7 +118,7 @@ export function Cell(props: CellProps) {
 export function TableLoadMoreItem(props: TableLoadMoreItemProps) {
   return (
     <AriaTableLoadMoreItem {...props}>
-      <div>
+      <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
         <ProgressCircle isIndeterminate aria-label="Loading more..." />
       </div>
     </AriaTableLoadMoreItem>

From f072886de460b8cb026834f64663c19e28044e27 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 2 Dec 2025 15:15:48 -0800
Subject: [PATCH 38/49] Update TableView examples

---
 packages/dev/s2-docs/pages/s2/TableView.mdx | 321 +++++++++-----------
 1 file changed, 143 insertions(+), 178 deletions(-)

diff --git a/packages/dev/s2-docs/pages/s2/TableView.mdx b/packages/dev/s2-docs/pages/s2/TableView.mdx
index 1225eebf580..cbdc3bdf0c0 100644
--- a/packages/dev/s2-docs/pages/s2/TableView.mdx
+++ b/packages/dev/s2-docs/pages/s2/TableView.mdx
@@ -294,7 +294,7 @@ function TableWithDividers() {
   return (
     <TableView
       aria-label="Favorite pokemon"
-      styles={style({width: 400})}>
+      styles={style({width: 400, maxWidth: 'full'})}>
       <TableHeader columns={columns}>
         {(column) => (
           <Column
@@ -363,7 +363,7 @@ const columns = [
 
 function CustomMenusTable() {
   return (
-    <TableView aria-label="Favorite pokemon" styles={style({width: 400})}>
+    <TableView aria-label="Favorite pokemon" styles={style({width: 400, maxWidth: 'full'})}>
       <TableHeader columns={columns}>
         {(column) => (
           <Column
@@ -399,6 +399,142 @@ function CustomMenusTable() {
 }
 ```
 
+
+### Editable cells
+
+Render an `<EditableCell>` instead of a `<Cell>` to allow users to edit the value. Editing is triggered by an `<ActionButton slot="edit">` and occurs in a popover that can contain one or more inputs.
+
+```tsx render type="s2"
+"use client";
+import {TableView, TableHeader, Column, TableBody, Row, Cell, EditableCell, TextField, ActionButton, Picker, PickerItem, Text, type Key} from '@react-spectrum/s2';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+import User from '@react-spectrum/s2/icons/User';
+import Edit from '@react-spectrum/s2/icons/Edit';
+import {useCallback} from 'react';
+import {useListData} from '@react-stately/data';
+
+///- begin collapse -///
+let defaultItems = [
+  {id: 1, fruits: 'Apples', task: 'Collect', farmer: 'Eva'},
+  {id: 2, fruits: 'Oranges', task: 'Collect', farmer: 'Steven'},
+  {id: 3, fruits: 'Pears', task: 'Collect', farmer: 'Michael'},
+  {id: 4, fruits: 'Cherries', task: 'Collect', farmer: 'Sara'},
+  {id: 5, fruits: 'Dates', task: 'Collect', farmer: 'Karina'},
+  {id: 6, fruits: 'Bananas', task: 'Collect', farmer: 'Otto'},
+  {id: 7, fruits: 'Melons', task: 'Collect', farmer: 'Matt'},
+  {id: 8, fruits: 'Figs', task: 'Collect', farmer: 'Emily'},
+  {id: 9, fruits: 'Blueberries', task: 'Collect', farmer: 'Amelia'},
+  {id: 10, fruits: 'Blackberries', task: 'Collect', farmer: 'Isla'}
+];
+///- end collapse -///
+
+///- begin collapse -///
+let editableColumns: Array<Omit<ColumnProps, 'children'> & {name: string}> = [
+  {name: 'Fruits', id: 'fruits', isRowHeader: true, width: '2fr', minWidth: 200},
+  {name: 'Task', id: 'task', width: '1fr', minWidth: 150},
+  {name: 'Farmer', id: 'farmer', width: '1fr', minWidth: 150}
+];
+///- end collapse -///
+
+export default function EditableTable(props) {
+  let columns = editableColumns;
+  let data = useListData({initialItems: defaultItems});
+
+  let onChange = useCallback((id: Key, columnId: Key, values: any) => {
+    let value = values[columnId];
+    if (value == null) {
+      return;
+    }
+    data.update(id, (prevItem) => ({...prevItem, [columnId]: value}));
+  }, [data]);
+
+  return (
+    <TableView aria-label="Dynamic table" {...props} styles={style({height: 208, width: 'full'})}>
+      <TableHeader columns={columns}>
+        {(column) => (
+          <Column {...column}>{column.name}</Column>
+        )}
+      </TableHeader>
+      <TableBody items={data.items}>
+        {item => (
+          <Row id={item.id} columns={columns}>
+            {(column) => {
+              if (column.id === 'fruits') {
+                ///- begin highlight -///
+                return (
+                  <EditableCell
+                    aria-label={`Edit ${item[column.id]} in ${column.name}`}
+                    align={column.align}
+                    showDivider={column.showDivider}
+                    onSubmit={(e) => {
+                      e.preventDefault();
+                      let formData = new FormData(e.target as HTMLFormElement);
+                      let values = Object.fromEntries(formData.entries());
+                      onChange(item.id, column.id!, values);
+                    }}
+                    renderEditing={() => (
+                      <TextField
+                        aria-label="Fruit name edit field"
+                        autoFocus
+                        validate={value => value.length > 0 ? null : 'Fruit name is required'}
+                        styles={style({flexGrow: 1, flexShrink: 1, minWidth: 0})}
+                        defaultValue={item[column.id!]}
+                        name={column.id! as string} />
+                    )}>
+                    <div className={style({display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'space-between'})}>
+                      {item[column.id]}
+                      <ActionButton slot="edit" aria-label="Edit fruit">
+                        <Edit />
+                      </ActionButton>
+                    </div>
+                  </EditableCell>
+                );
+                ///- end highlight -///
+              }
+              if (column.id === 'farmer') {
+                return (
+                  <EditableCell
+                    align={column.align}
+                    showDivider={column.showDivider}
+                    onSubmit={(e) => {
+                      e.preventDefault();
+                      let formData = new FormData(e.target as HTMLFormElement);
+                      let values = Object.fromEntries(formData.entries());
+                      onChange(item.id, column.id!, values);
+                    }}
+                    renderEditing={() => (
+                      <Picker
+                        aria-label="Edit farmer"
+                        autoFocus
+                        styles={style({flexGrow: 1, flexShrink: 1, minWidth: 0})}
+                        defaultValue={item[column.id!]}
+                        name={column.id! as string}
+                        items={defaultItems}>
+                        {item => (
+                          <PickerItem textValue={item.farmer} id={item.farmer}>
+                            <User />
+                            <Text>{item.farmer}</Text>
+                          </PickerItem>
+                        )}
+                      </Picker>
+                    )}>
+                    <div className={style({display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'space-between'})}>
+                      {item[column.id]}
+                      <ActionButton slot="edit" aria-label="Edit fruit"><Edit /></ActionButton>
+                    </div>
+                  </EditableCell>
+                );
+              }
+              return <Cell align={column.align} showDivider={column.showDivider}>{item[column.id!]}</Cell>;
+            }}
+          </Row>
+        )}
+      </TableBody>
+    </TableView>
+  );
+}
+```
+
 ## Selection and actions
 
 Use `selectionMode` to enable single or multiple selection, and `selectedKeys` (matching each row's `id`) to control the selected rows. Return an [ActionBar](ActionBar) from `renderActionBar` to handle bulk actions, and use `onAction` for row navigation. Disable rows with `isDisabled`. See the [selection guide](selection) for details.
@@ -517,7 +653,7 @@ function SortableTable() {
   return (
     <TableView
       aria-label="Favorite pokemon"
-      styles={style({width: 400})}
+      styles={style({width: 400, maxWidth: 'full'})}
       ///- begin highlight -///
       sortDescriptor={sortDescriptor}
       onSortChange={setSortDescriptor}
@@ -563,7 +699,7 @@ const rows = [
 ];
 ///- end collapse -///
 
-<TableView aria-label="Table with resizable columns" styles={style({width: 400})}>
+<TableView aria-label="Table with resizable columns" styles={style({width: 400, maxWidth: 'full'})}>
   <TableHeader>
     {/*- begin highlight -*/}
     <Column id="file" isRowHeader maxWidth={500} allowsResizing>
@@ -629,7 +765,7 @@ export default function ResizableTable() {
       ///- begin highlight -///
       onResize={setColumnWidths}
       ///- end highlight -///
-      styles={style({width: 400})}>
+      styles={style({width: 400, maxWidth: 'full'})}>
       <TableHeader columns={columns} dependencies={[columnWidths]}>
         {column => (
           <Column
@@ -690,181 +826,9 @@ function subscribe(fn) {
 }
 ```
 
-## Editable Table
-
-`EditableCell` represents an editable value in a single cell. It opens a popover that can contain any editable input or combination of inputs when the end user clicks the user provided `ActionButton` .
-
-An `ActionButton` with `slot="edit"` must be provided as a child of the `EditableCell` to open the popover.
-
-```tsx render type="s2"
-"use client";
-import {TableView, TableHeader, Column, TableBody, Row, Cell, EditableCell, TextField, ActionButton, Picker, PickerItem, Text, type Key} from '@react-spectrum/s2';
-import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
-import User from '@react-spectrum/s2/icons/User';
-import Edit from '@react-spectrum/s2/icons/Edit';
-import {useCallback} from 'react';
-import {useListData} from '@react-stately/data';
-
-///- begin collapse -///
-let defaultItems = [
-  {id: 1, fruits: 'Apples', task: 'Collect', farmer: 'Eva'},
-  {id: 2, fruits: 'Oranges', task: 'Collect', farmer: 'Steven'},
-  {id: 3, fruits: 'Pears', task: 'Collect', farmer: 'Michael'},
-  {id: 4, fruits: 'Cherries', task: 'Collect', farmer: 'Sara'},
-  {id: 5, fruits: 'Dates', task: 'Collect', farmer: 'Karina'},
-  {id: 6, fruits: 'Bananas', task: 'Collect', farmer: 'Otto'},
-  {id: 7, fruits: 'Melons', task: 'Collect', farmer: 'Matt'},
-  {id: 8, fruits: 'Figs', task: 'Collect', farmer: 'Emily'},
-  {id: 9, fruits: 'Blueberries', task: 'Collect', farmer: 'Amelia'},
-  {id: 10, fruits: 'Blackberries', task: 'Collect', farmer: 'Isla'}
-];
-///- end collapse -///
-
-///- begin collapse -///
-let editableColumns: Array<Omit<ColumnProps, 'children'> & {name: string}> = [
-  {name: 'Fruits', id: 'fruits', isRowHeader: true, width: '6fr', minWidth: 300},
-  {name: 'Task', id: 'task', width: '2fr', minWidth: 100},
-  {name: 'Farmer', id: 'farmer', width: '2fr', minWidth: 150}
-];
-///- end collapse -///
-
-export default function EditableTable(props) {
-  let columns = editableColumns;
-  let data = useListData({initialItems: defaultItems});
-
-  let onChange = useCallback((id: Key, columnId: Key, values: any) => {
-    let value = values[columnId];
-    if (value == null) {
-      return;
-    }
-    data.update(id, (prevItem) => ({...prevItem, [columnId]: value}));
-  }, [data]);
-
-  return (
-    <TableView aria-label="Dynamic table" {...props} styles={style({height: 208})}>
-      <TableHeader columns={columns}>
-        {(column) => (
-          <Column {...column}>{column.name}</Column>
-        )}
-      </TableHeader>
-      <TableBody items={data.items}>
-        {item => (
-          <Row id={item.id} columns={columns}>
-            {(column) => {
-              if (column.id === 'fruits') {
-                ///- begin highlight -///
-                return (
-                  <EditableCell
-                    aria-label={`Edit ${item[column.id]} in ${column.name}`}
-                    align={column.align}
-                    showDivider={column.showDivider}
-                    onSubmit={(e) => {
-                      e.preventDefault();
-                      let formData = new FormData(e.target as HTMLFormElement);
-                      let values = Object.fromEntries(formData.entries());
-                      onChange(item.id, column.id!, values);
-                    }}
-                    renderEditing={() => (
-                      <TextField
-                        aria-label="Fruit name edit field"
-                        autoFocus
-                        validate={value => value.length > 0 ? null : 'Fruit name is required'}
-                        styles={style({flexGrow: 1, flexShrink: 1, minWidth: 0})}
-                        defaultValue={item[column.id!]}
-                        name={column.id! as string} />
-                    )}>
-                    <div className={style({display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'space-between'})}>
-                      {item[column.id]}
-                      <ActionButton slot="edit" aria-label="Edit fruit">
-                        <Edit />
-                      </ActionButton>
-                    </div>
-                  </EditableCell>
-                );
-                ///- end highlight -///
-              }
-              if (column.id === 'farmer') {
-                ///- begin highlight -///
-                return (
-                  <EditableCell
-                    align={column.align}
-                    showDivider={column.showDivider}
-                    onSubmit={(e) => {
-                      e.preventDefault();
-                      let formData = new FormData(e.target as HTMLFormElement);
-                      let values = Object.fromEntries(formData.entries());
-                      onChange(item.id, column.id!, values);
-                    }}
-                    renderEditing={() => (
-                      <Picker
-                        aria-label="Edit farmer"
-                        autoFocus
-                        styles={style({flexGrow: 1, flexShrink: 1, minWidth: 0})}
-                        defaultValue={item[column.id!]}
-                        name={column.id! as string}>
-                        <PickerItem textValue="Eva" id="Eva">
-                          <User />
-                          <Text>Eva</Text>
-                        </PickerItem>
-                        <PickerItem textValue="Steven" id="Steven">
-                          <User />
-                          <Text>Steven</Text>
-                        </PickerItem>
-                        <PickerItem textValue="Michael" id="Michael">
-                          <User />
-                          <Text>Michael</Text>
-                        </PickerItem>
-                        <PickerItem textValue="Sara" id="Sara">
-                          <User />
-                          <Text>Sara</Text>
-                        </PickerItem>
-                        <PickerItem textValue="Karina" id="Karina">
-                          <User />
-                          <Text>Karina</Text>
-                        </PickerItem>
-                        <PickerItem textValue="Otto" id="Otto">
-                          <User />
-                          <Text>Otto</Text>
-                        </PickerItem>
-                        <PickerItem textValue="Matt" id="Matt">
-                          <User />
-                          <Text>Matt</Text>
-                        </PickerItem>
-                        <PickerItem textValue="Emily" id="Emily">
-                          <User />
-                          <Text>Emily</Text>
-                        </PickerItem>
-                        <PickerItem textValue="Amelia" id="Amelia">
-                          <User />
-                          <Text>Amelia</Text>
-                        </PickerItem>
-                        <PickerItem textValue="Isla" id="Isla">
-                          <User />
-                          <Text>Isla</Text>
-                        </PickerItem>
-                      </Picker>
-                    )}>
-                    <div className={style({display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'space-between'})}>
-                      {item[column.id]}
-                      <ActionButton slot="edit" aria-label="Edit fruit"><Edit /></ActionButton>
-                    </div>
-                  </EditableCell>
-                );
-                ///- end highlight -///
-              }
-              return <Cell align={column.align} showDivider={column.showDivider}>{item[column.id!]}</Cell>;
-            }}
-          </Row>
-        )}
-      </TableBody>
-    </TableView>
-  );
-}
-```
-
 ## API
 
-```tsx links={{TableView: '#tableview', TableHeader: '#tableheader', Column: '#column', TableBody: '#tablebody', Row: '#row', Cell: '#cell'}}
+```tsx links={{TableView: '#tableview', TableHeader: '#tableheader', Column: '#column', TableBody: '#tablebody', Row: '#row', Cell: '#cell', 'EditableCell': '#editablecell'}}
 <TableView>
   <TableHeader>
     <Column />
@@ -872,6 +836,7 @@ export default function EditableTable(props) {
   <TableBody>
     <Row>
       <Cell />
+      <EditableCell />
     </Row>
   </TableBody>
 </TableView>

From ce88f27bd409e1bee9aed487a2acfcffd79d9173 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 2 Dec 2025 15:19:26 -0800
Subject: [PATCH 39/49] Fix links in breadcrumbs examples

---
 packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx | 8 ++++----
 packages/dev/s2-docs/pages/s2/Breadcrumbs.mdx         | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx b/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx
index ca5f3d68530..d1dc519332d 100644
--- a/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx
@@ -20,8 +20,8 @@ export const description = 'Displays a hierarchy of links to the current page or
   import {Breadcrumbs, Breadcrumb} from 'vanilla-starter/Breadcrumbs';
 
   <Breadcrumbs/* PROPS */>
-    <Breadcrumb href="/">Home</Breadcrumb>
-    <Breadcrumb href="/react-aria/">React Aria</Breadcrumb>
+    <Breadcrumb href="https://adobe.com/" target="_blank">Adobe</Breadcrumb>
+    <Breadcrumb href="/">React Aria</Breadcrumb>
     <Breadcrumb>Breadcrumbs</Breadcrumb>
   </Breadcrumbs>
   ```
@@ -31,8 +31,8 @@ export const description = 'Displays a hierarchy of links to the current page or
   import {Breadcrumbs, Breadcrumb} from 'tailwind-starter/Breadcrumbs';
 
   <Breadcrumbs/* PROPS */>
-    <Breadcrumb href="/">Home</Breadcrumb>
-    <Breadcrumb href="/react-aria/">React Aria</Breadcrumb>
+    <Breadcrumb href="https://adobe.com/" target="_blank">Adobe</Breadcrumb>
+    <Breadcrumb href="/">React Aria</Breadcrumb>
     <Breadcrumb>Breadcrumbs</Breadcrumb>
   </Breadcrumbs>
   ```
diff --git a/packages/dev/s2-docs/pages/s2/Breadcrumbs.mdx b/packages/dev/s2-docs/pages/s2/Breadcrumbs.mdx
index 3752b9f87ab..65545da20eb 100644
--- a/packages/dev/s2-docs/pages/s2/Breadcrumbs.mdx
+++ b/packages/dev/s2-docs/pages/s2/Breadcrumbs.mdx
@@ -15,8 +15,8 @@ export const description = 'Display a hierarchy of links to the current page or
 import {Breadcrumbs, Breadcrumb} from '@react-spectrum/s2';
 
 <Breadcrumbs/* PROPS */>
-  <Breadcrumb href="/">Home</Breadcrumb>
-  <Breadcrumb href="/react-spectrum">React Spectrum</Breadcrumb>
+  <Breadcrumb href="https://adobe.com/" target="_blank">Home</Breadcrumb>
+  <Breadcrumb href="/">React Spectrum</Breadcrumb>
   <Breadcrumb>Breadcrumbs</Breadcrumb>
 </Breadcrumbs>
 ```

From 84f11cb785d316b992c12a0fa559a5c695a4b017 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 2 Dec 2025 15:28:50 -0800
Subject: [PATCH 40/49] Update testing page description to match others

---
 packages/dev/s2-docs/pages/react-aria/testing.mdx | 2 +-
 packages/dev/s2-docs/pages/s2/testing.mdx         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/dev/s2-docs/pages/react-aria/testing.mdx b/packages/dev/s2-docs/pages/react-aria/testing.mdx
index 77920e49b5b..dc04cd8260b 100644
--- a/packages/dev/s2-docs/pages/react-aria/testing.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/testing.mdx
@@ -11,7 +11,7 @@ export const description = 'Writing tests for apps built with React Aria';
 
 # Testing
 
-<PageDescription>This page describes how to test an application built with React Aria. It documents the available testing utilities available for each aria pattern and how they can be used to simulate common user interactions.</PageDescription>
+<PageDescription>Learn how to test components and applications built with React Aria using test utilities to simulate common user interactions.</PageDescription>
 
 ## Testing semantics
 
diff --git a/packages/dev/s2-docs/pages/s2/testing.mdx b/packages/dev/s2-docs/pages/s2/testing.mdx
index 5ddd86b5c45..5d7c06e9f31 100644
--- a/packages/dev/s2-docs/pages/s2/testing.mdx
+++ b/packages/dev/s2-docs/pages/s2/testing.mdx
@@ -11,7 +11,7 @@ export const description = 'Writing tests for apps built with React Spectrum';
 
 # Testing
 
-<PageDescription>This page describes how to test an application built with React Spectrum. It documents the available testing utilities available for each aria pattern and how they can be used to simulate common user interactions.</PageDescription>
+<PageDescription>Learn how to test an application built with React Spectrum using test utilities to simulate common user interactions.</PageDescription>
 
 ## Testing semantics
 

From ed28457be42964295332650aee12df315d449577 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 2 Dec 2025 15:30:07 -0800
Subject: [PATCH 41/49] illustrations page should have lower case url to match
 icons

---
 .../dev/s2-docs/pages/s2/{Illustrations.mdx => illustrations.mdx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/dev/s2-docs/pages/s2/{Illustrations.mdx => illustrations.mdx} (100%)

diff --git a/packages/dev/s2-docs/pages/s2/Illustrations.mdx b/packages/dev/s2-docs/pages/s2/illustrations.mdx
similarity index 100%
rename from packages/dev/s2-docs/pages/s2/Illustrations.mdx
rename to packages/dev/s2-docs/pages/s2/illustrations.mdx

From b87a7b0839923004ee49574dfd32159909895150 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 2 Dec 2025 15:31:56 -0800
Subject: [PATCH 42/49] Fix illustration page overflow

---
 packages/dev/s2-docs/pages/s2/illustrations.mdx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/dev/s2-docs/pages/s2/illustrations.mdx b/packages/dev/s2-docs/pages/s2/illustrations.mdx
index 52f502bd93c..809f24cfb64 100644
--- a/packages/dev/s2-docs/pages/s2/illustrations.mdx
+++ b/packages/dev/s2-docs/pages/s2/illustrations.mdx
@@ -48,7 +48,9 @@ Then, add it to your `.parcelrc`:
 
 Now you can import illustration SVGs using the `illustration:` [pipeline](https://parceljs.org/features/plugins/#named-pipelines):
 
-`import Illustration from 'illustration:./path/to/Illustration.svg';`
+```tsx
+import Illustration from 'illustration:./path/to/Illustration.svg';
+```
 
 Note that you must use the name `illustration` for the pipeline.
 
@@ -59,4 +61,7 @@ The `@react-spectrum/s2-icon-builder` CLI tool can be used to pre-process a fold
 <Command command="npx @react-spectrum/s2-icon-builder -i 'path/to/illustrations/*.svg' --type illustration -o 'path/to/destination'" />
 
 This outputs a folder of TSX files with names corresponding to the input SVG files. You may rename them as you wish. To use them in your application, import them like normal components.
-`import Illustration from './path/to/destination/Illustration';`
+
+```tsx
+import Illustration from './path/to/destination/Illustration';
+```

From 2b934d17336db25b5feebf583326ef682e5f8298 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 2 Dec 2025 15:33:07 -0800
Subject: [PATCH 43/49] Link to client side routing guide from Provider

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

diff --git a/packages/dev/s2-docs/pages/s2/Provider.mdx b/packages/dev/s2-docs/pages/s2/Provider.mdx
index 36cd2fc6843..6a1454145b0 100644
--- a/packages/dev/s2-docs/pages/s2/Provider.mdx
+++ b/packages/dev/s2-docs/pages/s2/Provider.mdx
@@ -84,7 +84,7 @@ By default, React Spectrum chooses the locale matching the user’s browser/oper
 
 ## 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.
+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](routing) for details on how to set this up.
 
 ```tsx
 let navigate = useNavigateFromYourRouter();

From 8e66f297fc8b27a5842298a5790e2d4235c13219 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 2 Dec 2025 16:01:47 -0800
Subject: [PATCH 44/49] Re-export useListData, useTreeData, and useAsyncList
 from RAC and S2

---
 packages/@react-spectrum/s2/src/index.ts       |  3 +++
 .../s2-docs/pages/react-aria/Autocomplete.mdx  |  3 +--
 .../dev/s2-docs/pages/react-aria/GridList.mdx  |  3 +--
 .../dev/s2-docs/pages/react-aria/ListBox.mdx   |  6 ++----
 .../dev/s2-docs/pages/react-aria/Table.mdx     | 12 ++++--------
 .../dev/s2-docs/pages/react-aria/TagGroup.mdx  |  2 +-
 packages/dev/s2-docs/pages/react-aria/Tree.mdx |  6 ++----
 .../blog/DragBetweenListsExample.tsx           |  3 +--
 .../s2-docs/pages/react-aria/collections.mdx   |  3 +--
 packages/dev/s2-docs/pages/react-aria/dnd.mdx  | 18 ++++++------------
 .../pages/react-aria/examples/kanban.mdx       |  3 +--
 packages/dev/s2-docs/pages/s2/CardView.mdx     |  3 +--
 packages/dev/s2-docs/pages/s2/ComboBox.mdx     |  3 +--
 packages/dev/s2-docs/pages/s2/Picker.mdx       |  3 +--
 packages/dev/s2-docs/pages/s2/TableView.mdx    |  3 +--
 packages/dev/s2-docs/pages/s2/TagGroup.mdx     |  3 +--
 packages/dev/s2-docs/pages/s2/TreeView.mdx     |  3 +--
 packages/dev/s2-docs/pages/s2/collections.mdx  |  3 +--
 packages/react-aria-components/src/index.ts    |  4 ++--
 19 files changed, 32 insertions(+), 55 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/index.ts b/packages/@react-spectrum/s2/src/index.ts
index 9543dc1fc2b..3bd126a85fb 100644
--- a/packages/@react-spectrum/s2/src/index.ts
+++ b/packages/@react-spectrum/s2/src/index.ts
@@ -96,6 +96,8 @@ export {Collection} from 'react-aria-components';
 export {FileTrigger} from 'react-aria-components';
 export {parseColor} from 'react-aria-components';
 
+export {useListData, useTreeData, useAsyncList} from 'react-stately';
+
 export type {AccordionProps, AccordionItemProps, AccordionItemHeaderProps, AccordionItemTitleProps, AccordionItemPanelProps} from './Accordion';
 export type {ActionBarProps} from './ActionBar';
 export type {ActionButtonProps} from './ActionButton';
@@ -169,3 +171,4 @@ export type {ToggleButtonGroupProps} from './ToggleButtonGroup';
 export type {TooltipProps} from './Tooltip';
 export type {TreeViewProps, TreeViewItemProps, TreeViewItemContentProps, TreeViewLoadMoreItemProps} from './TreeView';
 export type {AutocompleteProps, FileTriggerProps, TooltipTriggerComponentProps as TooltipTriggerProps, SortDescriptor, Color, Key, Selection} from 'react-aria-components';
+export type {ListData, TreeData, AsyncListData} from 'react-stately';
diff --git a/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx b/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx
index 13d49738fb3..c3532067e88 100644
--- a/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx
@@ -1058,10 +1058,9 @@ When the `filter` prop is not set, the items are controlled. This example uses a
 
 ```tsx render
 "use client";
-import {Autocomplete} from 'react-aria-components';
+import {Autocomplete, useAsyncList} from 'react-aria-components';
 import {SearchField} from 'vanilla-starter/SearchField';
 import {ListBox, ListBoxItem} from 'vanilla-starter/ListBox';
-import {useAsyncList} from 'react-stately';
 
 function AsyncLoadingExample() {
   let list = useAsyncList<{name: string}>({
diff --git a/packages/dev/s2-docs/pages/react-aria/GridList.mdx b/packages/dev/s2-docs/pages/react-aria/GridList.mdx
index 72df160cfaa..474df90dad3 100644
--- a/packages/dev/s2-docs/pages/react-aria/GridList.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/GridList.mdx
@@ -611,9 +611,8 @@ GridList supports drag and drop interactions when the `dragAndDropHooks` prop is
 
 ```tsx render
 "use client";
-import {useListData} from 'react-stately';
 import {GridList, GridListItem} from 'vanilla-starter/GridList';
-import {useDragAndDrop, Text} from 'react-aria-components';
+import {useDragAndDrop, Text, useListData} from 'react-aria-components';
 
 ///- begin collapse -///
 let images = [
diff --git a/packages/dev/s2-docs/pages/react-aria/ListBox.mdx b/packages/dev/s2-docs/pages/react-aria/ListBox.mdx
index f974458eb4c..6005798697a 100644
--- a/packages/dev/s2-docs/pages/react-aria/ListBox.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/ListBox.mdx
@@ -152,8 +152,7 @@ Use [renderEmptyState](#empty-state) to display a spinner during initial load. T
 "use client";
 import {ListBox, ListBoxItem, ListBoxLoadMoreItem} from 'vanilla-starter/ListBox';
 import {ProgressCircle} from 'vanilla-starter/ProgressCircle';
-import {Collection} from 'react-aria-components';
-import {useAsyncList} from 'react-stately';
+import {Collection, useAsyncList} from 'react-aria-components';
 
 interface Character {
   name: string
@@ -340,8 +339,7 @@ ListBox supports drag and drop interactions when the `dragAndDropHooks` prop is
 
 ```tsx render
 "use client";
-import {useListData} from 'react-stately';
-import {ListBox, ListBoxItem, useDragAndDrop} from 'react-aria-components';
+import {ListBox, ListBoxItem, useDragAndDrop, useListData} from 'react-aria-components';
 
 function Example() {
   let list = useListData({
diff --git a/packages/dev/s2-docs/pages/react-aria/Table.mdx b/packages/dev/s2-docs/pages/react-aria/Table.mdx
index 050b2ef5cab..0de9a1e2402 100644
--- a/packages/dev/s2-docs/pages/react-aria/Table.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Table.mdx
@@ -57,8 +57,7 @@ export const description = 'Displays data in rows and columns and enables a user
 
   ```tsx render docs={docs.exports.Table} links={docs.links} props={['selectionMode']} initialProps={{'aria-label': 'Files', selectionMode: 'multiple'}} type="tailwind" files={["starters/tailwind/src/Table.tsx"]}
   "use client";
-  import {Table, TableHeader, Column, Row, Cell} from 'tailwind-starter/Table';
-  import {TableBody} from 'react-aria-components';
+  import {Table, TableHeader, TableBody, Column, Row, Cell} from 'tailwind-starter/Table';
 
   <Table/* PROPS */>
     <TableHeader>
@@ -178,10 +177,9 @@ Use [renderEmptyState](#empty-state) to display a spinner during initial load. T
 
 ```tsx render
 "use client";
+import {Collection, useAsyncList} from 'react-aria-components';
 import {Table, TableHeader, Column, Row, TableBody, Cell, TableLoadMoreItem} from 'vanilla-starter/Table';
-import {Collection} from 'react-aria-components';
 import {ProgressCircle} from 'vanilla-starter/ProgressCircle';
-import {useAsyncList} from 'react-stately';
 
 interface Character {
   name: string;
@@ -591,10 +589,8 @@ Table supports drag and drop interactions when the `dragAndDropHooks` prop is pr
 
 ```tsx render
 "use client";
-import {useListData} from 'react-stately';
-import {Table, TableHeader, Column, Row} from 'vanilla-starter/Table';
-import {TableBody, Cell} from 'react-aria-components';
-import {useDragAndDrop} from 'react-aria-components';
+import {Table, TableHeader, TableBody, Column, Row, Cell} from 'vanilla-starter/Table';
+import {useDragAndDrop, useListData} from 'react-aria-components';
 
 function ReorderableTable() {
   let list = useListData({
diff --git a/packages/dev/s2-docs/pages/react-aria/TagGroup.mdx b/packages/dev/s2-docs/pages/react-aria/TagGroup.mdx
index ab6990235f4..9930b7533a0 100644
--- a/packages/dev/s2-docs/pages/react-aria/TagGroup.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/TagGroup.mdx
@@ -49,7 +49,7 @@ export const description = 'A focusable list of labels, categories, keywords, fi
 ```tsx render
 "use client";
 import {TagGroup, Tag} from 'vanilla-starter/TagGroup';
-import {useListData} from 'react-stately';
+import {useListData} from 'react-aria-components';
 
 function Example() {
   let list = useListData({
diff --git a/packages/dev/s2-docs/pages/react-aria/Tree.mdx b/packages/dev/s2-docs/pages/react-aria/Tree.mdx
index 51fcd14b12b..3eb0b8ed533 100644
--- a/packages/dev/s2-docs/pages/react-aria/Tree.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Tree.mdx
@@ -112,8 +112,7 @@ Use [renderEmptyState](#empty-state) to display a spinner during initial load. T
 "use client";
 import {Tree, TreeItem, TreeLoadMoreItem} from 'vanilla-starter/Tree';
 import {ProgressCircle} from 'vanilla-starter/ProgressCircle';
-import {Collection} from 'react-aria-components';
-import {useAsyncList} from 'react-stately';
+import {Collection, useAsyncList} from 'react-aria-components';
 
 interface Character {
   name: string
@@ -289,9 +288,8 @@ Tree supports drag and drop interactions when the `dragAndDropHooks` prop is pro
 
 ```tsx render
 "use client";
-import {useTreeData} from 'react-stately';
 import {Tree, TreeItem} from 'vanilla-starter/Tree';
-import {useDragAndDrop, Collection} from 'react-aria-components';
+import {useDragAndDrop, Collection, useTreeData} from 'react-aria-components';
 
 function Example() {
   ///- begin collapse -///
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/DragBetweenListsExample.tsx b/packages/dev/s2-docs/pages/react-aria/blog/DragBetweenListsExample.tsx
index 1d5287652f2..cef69a845c7 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/DragBetweenListsExample.tsx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/DragBetweenListsExample.tsx
@@ -2,8 +2,7 @@
 
 import {ListBox, ListBoxItem} from 'vanilla-starter/ListBox';
 import {Folder, File} from 'lucide-react';
-import {useDragAndDrop, isTextDropItem} from 'react-aria-components';
-import {useListData} from 'react-stately';
+import {useDragAndDrop, isTextDropItem, useListData} from 'react-aria-components';
 import React from 'react';
 
 function BidirectionalDnDListBox(props) {
diff --git a/packages/dev/s2-docs/pages/react-aria/collections.mdx b/packages/dev/s2-docs/pages/react-aria/collections.mdx
index 59b9e95d37a..65dc13c2a47 100644
--- a/packages/dev/s2-docs/pages/react-aria/collections.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/collections.mdx
@@ -285,10 +285,9 @@ Several components also support infinite scrolling by rendering a `LoadMoreItem`
 
 ```tsx render
 "use client";
-import {Collection, ListBoxLoadMoreItem} from 'react-aria-components';
+import {Collection, ListBoxLoadMoreItem, useAsyncList} from 'react-aria-components';
 import {ListBox, ListBoxItem} from 'vanilla-starter/ListBox';
 import {ProgressCircle} from 'vanilla-starter/ProgressCircle';
-import {useAsyncList} from 'react-stately';
 
 interface Character {
   name: string
diff --git a/packages/dev/s2-docs/pages/react-aria/dnd.mdx b/packages/dev/s2-docs/pages/react-aria/dnd.mdx
index 78f8140870e..bde42b42d3a 100644
--- a/packages/dev/s2-docs/pages/react-aria/dnd.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/dnd.mdx
@@ -417,8 +417,7 @@ Use the `onInsert` event to enable dropping between items. React Aria renders a
 
 ```tsx render files={['packages/dev/s2-docs/pages/react-aria/PokemonCOMPONENT.tsx', 'packages/dev/s2-docs/pages/react-aria/DraggableCOMPONENT.tsx']}
 "use client";
-import {useListData} from 'react-stately';
-import {useDragAndDrop, isTextDropItem, DropIndicator} from 'react-aria-components';
+import {useDragAndDrop, isTextDropItem, DropIndicator, useListData} from 'react-aria-components';
 import {PokemonCOMPONENT, Pokemon} from './PokemonCOMPONENT';
 import {DraggableCOMPONENT} from './DraggableCOMPONENT';
 
@@ -480,8 +479,7 @@ Use the `onReorder` event to enable reordering items. For components with hierar
 
 ```tsx render files={['packages/dev/s2-docs/pages/react-aria/PokemonCOMPONENT.tsx']}
 "use client";
-import {useListData} from 'react-stately';
-import {useDragAndDrop} from 'react-aria-components';
+import {useDragAndDrop, useListData} from 'react-aria-components';
 import {PokemonCOMPONENT, defaultItems} from './PokemonCOMPONENT';
 
 function ReorderableCOMPONENT() {
@@ -526,8 +524,7 @@ Use the `onMove` event to enable moving items within a collection. This allows r
 
 ```tsx render files={['packages/dev/s2-docs/pages/react-aria/PokemonCOMPONENT.tsx']}
 "use client";
-import {useTreeData} from 'react-stately';
-import {useDragAndDrop} from 'react-aria-components';
+import {useDragAndDrop, useTreeData} from 'react-aria-components';
 import {PokemonCOMPONENT, defaultItems} from './PokemonCOMPONENT';
 
 function ReorderableCOMPONENT() {
@@ -590,8 +587,7 @@ This example puts together many of the examples described above, allowing users
 
 ```tsx render
 "use client";
-import {useDragAndDrop, isTextDropItem} from 'react-aria-components';
-import {useListData} from 'react-stately';
+import {useDragAndDrop, isTextDropItem, useListData} from 'react-aria-components';
 import {PokemonCOMPONENT, Pokemon, defaultItems} from './PokemonCOMPONENT';
 
 interface DndCOMPONENTProps {
@@ -756,8 +752,7 @@ The drag source can also control which drop operations are allowed. In the examp
 
 ```tsx render files={['packages/dev/s2-docs/pages/react-aria/PokemonCOMPONENT.tsx', 'packages/dev/s2-docs/pages/react-aria/DroppableCOMPONENT.tsx']}
 "use client";
-import {useDragAndDrop} from 'react-aria-components';
-import {useListData} from 'react-stately';
+import {useDragAndDrop, useListData} from 'react-aria-components';
 import {PokemonCOMPONENT, Pokemon, defaultItems} from './PokemonCOMPONENT';
 import {DroppableCOMPONENT} from './DroppableCOMPONENT';
 
@@ -806,8 +801,7 @@ This example removes the dragged items from the UI when a move operation is comp
 
 ```tsx render files={['packages/dev/s2-docs/pages/react-aria/PokemonCOMPONENT.tsx', 'packages/dev/s2-docs/pages/react-aria/DroppableCOMPONENT.tsx']}
 "use client";
-import {useDragAndDrop} from 'react-aria-components';
-import {useListData} from 'react-stately';
+import {useDragAndDrop, useListData} from 'react-aria-components';
 import {PokemonCOMPONENT, Pokemon, defaultItems} from './PokemonCOMPONENT';
 import {DroppableCOMPONENT} from './DroppableCOMPONENT';
 
diff --git a/packages/dev/s2-docs/pages/react-aria/examples/kanban.mdx b/packages/dev/s2-docs/pages/react-aria/examples/kanban.mdx
index 87be4b8b16d..e253e74073c 100644
--- a/packages/dev/s2-docs/pages/react-aria/examples/kanban.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/examples/kanban.mdx
@@ -16,8 +16,7 @@ export const description = 'A kanban board with accessible drag and drop, styled
 
 ```tsx render type="tailwind" expanded
 "use client";
-import {Button, DropIndicator, GridList, GridListItem, isTextDropItem, Text, useDragAndDrop} from 'react-aria-components';
-import {ListData, useListData} from 'react-stately';
+import {Button, DropIndicator, GridList, GridListItem, isTextDropItem, Text, useDragAndDrop, ListData, useListData} from 'react-aria-components';
 import React, {ReactNode} from 'react';
 
 ///- begin collapse -///
diff --git a/packages/dev/s2-docs/pages/s2/CardView.mdx b/packages/dev/s2-docs/pages/s2/CardView.mdx
index 2b3a4262968..f0608c8e887 100644
--- a/packages/dev/s2-docs/pages/s2/CardView.mdx
+++ b/packages/dev/s2-docs/pages/s2/CardView.mdx
@@ -400,8 +400,7 @@ Use the `loadingState` and `onLoadMore` props to enable async loading and infini
 
 ```tsx render docs={docs.exports.CardView} links={docs.links} props={['loadingState']} initialProps={{selectionMode: 'multiple'}} type="s2" wide
 "use client";
-import {CardView, Collection, SkeletonCollection, Card, CardPreview, Image, Content, Text, Avatar} from '@react-spectrum/s2';
-import {useAsyncList} from 'react-stately';
+import {CardView, Collection, SkeletonCollection, Card, CardPreview, Image, Content, Text, Avatar, useAsyncList} from '@react-spectrum/s2';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 export default function Example(props) {
diff --git a/packages/dev/s2-docs/pages/s2/ComboBox.mdx b/packages/dev/s2-docs/pages/s2/ComboBox.mdx
index 259a3a8cf26..d06b3387064 100644
--- a/packages/dev/s2-docs/pages/s2/ComboBox.mdx
+++ b/packages/dev/s2-docs/pages/s2/ComboBox.mdx
@@ -156,8 +156,7 @@ Use the `loadingState` and `onLoadMore` props to enable async loading and infini
 
 ```tsx render
 "use client";
-import {ComboBox, ComboBoxItem} from '@react-spectrum/s2';
-import {useAsyncList} from 'react-stately';
+import {ComboBox, ComboBoxItem, useAsyncList} from '@react-spectrum/s2';
 
 function Example() {
   let list = useAsyncList({
diff --git a/packages/dev/s2-docs/pages/s2/Picker.mdx b/packages/dev/s2-docs/pages/s2/Picker.mdx
index c86cf901ca3..6701775636b 100644
--- a/packages/dev/s2-docs/pages/s2/Picker.mdx
+++ b/packages/dev/s2-docs/pages/s2/Picker.mdx
@@ -153,8 +153,7 @@ Use the `loadingState` and `onLoadMore` props to enable async loading and infini
 
 ```tsx render
 "use client";
-import {Picker, PickerItem} from '@react-spectrum/s2';
-import {useAsyncList} from 'react-stately';
+import {Picker, PickerItem, useAsyncList} from '@react-spectrum/s2';
 
 interface Character {
   name: string
diff --git a/packages/dev/s2-docs/pages/s2/TableView.mdx b/packages/dev/s2-docs/pages/s2/TableView.mdx
index cbdc3bdf0c0..3e024ad7414 100644
--- a/packages/dev/s2-docs/pages/s2/TableView.mdx
+++ b/packages/dev/s2-docs/pages/s2/TableView.mdx
@@ -135,9 +135,8 @@ Use the `loadingState` and `onLoadMore` props to enable async loading and infini
 
 ```tsx render type="s2"
 "use client";
-import {TableView, TableHeader, Column, TableBody, Row, Cell} from '@react-spectrum/s2';
+import {TableView, TableHeader, Column, TableBody, Row, Cell, useAsyncList} from '@react-spectrum/s2';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
-import {useAsyncList} from 'react-stately';
 
 interface Character {
   name: string;
diff --git a/packages/dev/s2-docs/pages/s2/TagGroup.mdx b/packages/dev/s2-docs/pages/s2/TagGroup.mdx
index 06bfaf288de..318e460c49d 100644
--- a/packages/dev/s2-docs/pages/s2/TagGroup.mdx
+++ b/packages/dev/s2-docs/pages/s2/TagGroup.mdx
@@ -42,8 +42,7 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 ```tsx render type="s2"
 "use client";
-import {TagGroup, Tag, TextField, Button} from '@react-spectrum/s2';
-import {useListData} from 'react-stately';
+import {TagGroup, Tag, TextField, Button, useListData} from '@react-spectrum/s2';
 import {useState} from 'react';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
diff --git a/packages/dev/s2-docs/pages/s2/TreeView.mdx b/packages/dev/s2-docs/pages/s2/TreeView.mdx
index 699d49edf16..dad6b2065d2 100644
--- a/packages/dev/s2-docs/pages/s2/TreeView.mdx
+++ b/packages/dev/s2-docs/pages/s2/TreeView.mdx
@@ -146,9 +146,8 @@ Use [renderEmptyState](#empty-state) to display a spinner during initial load. T
 
 ```tsx render
 "use client";
-import {TreeView, TreeViewItem, TreeViewItemContent, TreeViewLoadMoreItem, Collection} from '@react-spectrum/s2';
+import {TreeView, TreeViewItem, TreeViewItemContent, TreeViewLoadMoreItem, Collection, useAsyncList} from '@react-spectrum/s2';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
-import {useAsyncList} from 'react-stately';
 
 interface Character {
   name: string
diff --git a/packages/dev/s2-docs/pages/s2/collections.mdx b/packages/dev/s2-docs/pages/s2/collections.mdx
index fd3b8e61807..84a5d89af77 100644
--- a/packages/dev/s2-docs/pages/s2/collections.mdx
+++ b/packages/dev/s2-docs/pages/s2/collections.mdx
@@ -280,9 +280,8 @@ Many components support infinite scrolling via the `loadingState` and `onLoadMor
 
 ```tsx render type="s2"
 "use client";
-import {TableView, TableHeader, Column, TableBody, Row, Cell} from '@react-spectrum/s2';
+import {TableView, TableHeader, Column, TableBody, Row, Cell, useAsyncList} from '@react-spectrum/s2';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
-import {useAsyncList} from 'react-stately';
 
 interface Character {
   name: string
diff --git a/packages/react-aria-components/src/index.ts b/packages/react-aria-components/src/index.ts
index 166d5b68f0b..357cef214e3 100644
--- a/packages/react-aria-components/src/index.ts
+++ b/packages/react-aria-components/src/index.ts
@@ -83,7 +83,7 @@ export {useDragAndDrop} from './useDragAndDrop';
 export {DropIndicator, DropIndicatorContext, DragAndDropContext} from './DragAndDrop';
 export {Virtualizer} from './Virtualizer';
 export {DIRECTORY_DRAG_TYPE, isDirectoryDropItem, isFileDropItem, isTextDropItem, SSRProvider, RouterProvider, I18nProvider, isRTL, useLocale, useFilter, Pressable, Focusable, VisuallyHidden} from 'react-aria';
-export {FormValidationContext, parseColor, getColorChannels, ToastQueue as UNSTABLE_ToastQueue} from 'react-stately';
+export {FormValidationContext, parseColor, getColorChannels, ToastQueue as UNSTABLE_ToastQueue, useListData, useTreeData, useAsyncList} from 'react-stately';
 export {ListLayout, GridLayout, WaterfallLayout} from '@react-stately/layout';
 export {Layout, LayoutInfo, Size, Rect, Point} from '@react-stately/virtualizer';
 
@@ -152,7 +152,7 @@ export type {VirtualizerProps} from './Virtualizer';
 
 export type {DateValue, DateRange, TimeValue} from 'react-aria';
 export type {DirectoryDropItem, DraggableCollectionEndEvent, DraggableCollectionMoveEvent, DraggableCollectionStartEvent, DragPreviewRenderer, DragTypes, DropItem, DropOperation, DroppableCollectionDropEvent, DroppableCollectionEnterEvent, DroppableCollectionExitEvent, DroppableCollectionInsertDropEvent, DroppableCollectionMoveEvent, DroppableCollectionOnItemDropEvent, DroppableCollectionReorderEvent, DroppableCollectionRootDropEvent, DropPosition, DropTarget, FileDropItem, ItemDropTarget, RootDropTarget, TextDropItem, PressEvent} from 'react-aria';
-export type {CalendarState, CheckboxGroupState, Color, ColorAreaState, ColorFieldState, ColorFormat, ColorPickerState, ColorSliderState, ColorSpace, ColorWheelState, ComboBoxState, DateFieldState, DatePickerState, DateRangePickerState, DisclosureState, DisclosureGroupState, Key, ListState, NumberFieldState, OverlayTriggerState, QueuedToast, RadioGroupState, RangeCalendarState, RootMenuTriggerState, SearchFieldState, Selection, SelectState, SliderState, SortDescriptor, SortDirection, SelectionMode, TableState, TabListState, TimeFieldState, ToastOptions, ToastState, ToggleGroupState, ToggleState, TooltipTriggerState, TreeState} from 'react-stately';
+export type {CalendarState, CheckboxGroupState, Color, ColorAreaState, ColorFieldState, ColorFormat, ColorPickerState, ColorSliderState, ColorSpace, ColorWheelState, ComboBoxState, DateFieldState, DatePickerState, DateRangePickerState, DisclosureState, DisclosureGroupState, Key, ListState, NumberFieldState, OverlayTriggerState, QueuedToast, RadioGroupState, RangeCalendarState, RootMenuTriggerState, SearchFieldState, Selection, SelectState, SliderState, SortDescriptor, SortDirection, SelectionMode, TableState, TabListState, TimeFieldState, ToastOptions, ToastState, ToggleGroupState, ToggleState, TooltipTriggerState, TreeState, ListData, TreeData, AsyncListData} from 'react-stately';
 export type {AutocompleteState} from '@react-stately/autocomplete';
 export type {ListLayoutOptions, GridLayoutOptions, WaterfallLayoutOptions} from '@react-stately/layout';
 export type {ValidationResult, RouterConfig} from '@react-types/shared';

From 97bf924f51a4774ae6aa55de239fae86ae2b1286 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 2 Dec 2025 16:01:57 -0800
Subject: [PATCH 45/49] Fix bug with code folding

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

diff --git a/packages/dev/s2-docs/src/CodeFold.tsx b/packages/dev/s2-docs/src/CodeFold.tsx
index 731b34b79ba..4c515d71287 100644
--- a/packages/dev/s2-docs/src/CodeFold.tsx
+++ b/packages/dev/s2-docs/src/CodeFold.tsx
@@ -93,6 +93,7 @@ export function CodeFold({tokens}) {
         }
         let index = c.lastIndexOf('\n');
         if (index === 0) {
+          lastLine.unshift(c);
           break;
         } else if (index > 0) {
           lastLine.unshift(c.slice(index));

From 4a46eb1e886ffdb1ea399fced963847a4d99e7b2 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 2 Dec 2025 16:04:45 -0800
Subject: [PATCH 46/49] Fix table rounding

---
 starters/docs/src/Table.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/starters/docs/src/Table.css b/starters/docs/src/Table.css
index 87f1c199aee..0535caf926a 100644
--- a/starters/docs/src/Table.css
+++ b/starters/docs/src/Table.css
@@ -149,11 +149,11 @@
     height: 100%;
   }
 
-  &:is(.react-aria-Row > :first-child) {
+  &:is(.react-aria-Row:last-child > :first-child) {
     border-end-start-radius: var(--radius);
   }
 
-  &:is(.react-aria-Row > :last-child) {
+  &:is(.react-aria-Row:last-child > :last-child) {
     border-end-end-radius: var(--radius);
   }
 

From f45aed53e17335a7812d8385cfaaab131d8ae012 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 2 Dec 2025 16:08:32 -0800
Subject: [PATCH 47/49] Re-export useLocale

---
 packages/@react-spectrum/s2/src/index.ts                  | 6 +-----
 packages/dev/s2-docs/pages/react-aria/Calendar.mdx        | 2 +-
 packages/dev/s2-docs/pages/react-aria/DatePicker.mdx      | 2 +-
 packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx | 2 +-
 packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx   | 2 +-
 packages/dev/s2-docs/pages/s2/Calendar.mdx                | 3 +--
 packages/dev/s2-docs/pages/s2/DatePicker.mdx              | 3 +--
 packages/dev/s2-docs/pages/s2/DateRangePicker.mdx         | 3 +--
 packages/dev/s2-docs/pages/s2/RangeCalendar.mdx           | 3 +--
 9 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/index.ts b/packages/@react-spectrum/s2/src/index.ts
index 3bd126a85fb..2d495809dd2 100644
--- a/packages/@react-spectrum/s2/src/index.ts
+++ b/packages/@react-spectrum/s2/src/index.ts
@@ -91,11 +91,7 @@ export {TreeView, TreeViewItem, TreeViewItemContent, TreeViewLoadMoreItem} from
 
 export {pressScale} from './pressScale';
 
-export {Autocomplete} from 'react-aria-components';
-export {Collection} from 'react-aria-components';
-export {FileTrigger} from 'react-aria-components';
-export {parseColor} from 'react-aria-components';
-
+export {Autocomplete, Collection, FileTrigger, parseColor, useLocale} from 'react-aria-components';
 export {useListData, useTreeData, useAsyncList} from 'react-stately';
 
 export type {AccordionProps, AccordionItemProps, AccordionItemHeaderProps, AccordionItemTitleProps, AccordionItemPanelProps} from './Accordion';
diff --git a/packages/dev/s2-docs/pages/react-aria/Calendar.mdx b/packages/dev/s2-docs/pages/react-aria/Calendar.mdx
index 3090329a09f..c059247e0a2 100644
--- a/packages/dev/s2-docs/pages/react-aria/Calendar.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Calendar.mdx
@@ -151,7 +151,7 @@ Use the `minValue` and `maxValue` props to set the valid date range. The `isDate
 ```tsx render docs={vanillaDocs.exports.Calendar} links={docs.links} props={['isInvalid', 'errorMessage']} wide
 "use client";
 import {isWeekend, today, getLocalTimeZone} from '@internationalized/date';
-import {useLocale} from 'react-aria';
+import {useLocale} from 'react-aria-components';
 import {Calendar} from 'vanilla-starter/Calendar';
 
 function Example(props) {
diff --git a/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx b/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx
index a7882d113f8..ccd11dd71e1 100644
--- a/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx
@@ -99,7 +99,7 @@ Use the `name` prop to submit the selected date to the server as an [ISO 8601](h
 ```tsx render
 "use client";
 import {isWeekend, today, getLocalTimeZone} from '@internationalized/date';
-import {useLocale} from 'react-aria';
+import {useLocale} from 'react-aria-components';
 import {DatePicker} from 'vanilla-starter/DatePicker';
 import {Button} from 'vanilla-starter/Button';
 import {Form} from 'vanilla-starter/Form';;
diff --git a/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx b/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx
index 7650bdcace5..652cbc92069 100644
--- a/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx
@@ -112,7 +112,7 @@ Use the `name` prop to submit the selected date to the server as an [ISO 8601](h
 ```tsx render docs={vanillaDocs.exports.DateRangePicker} links={docs.links} props={['allowsNonContiguousRanges']} wide
 "use client";
 import {isWeekend, today, getLocalTimeZone} from '@internationalized/date';
-import {useLocale} from 'react-aria';
+import {useLocale} from 'react-aria-components';
 import {DateRangePicker} from 'vanilla-starter/DateRangePicker';
 import {Button} from 'vanilla-starter/Button';
 import {Form} from 'vanilla-starter/Form';;
diff --git a/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx b/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx
index f688eb9f3b8..d3ff5d317ea 100644
--- a/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx
@@ -161,7 +161,7 @@ Use the `minValue` and `maxValue` props to set the valid date range. The `isDate
 ```tsx render docs={vanillaDocs.exports.RangeCalendar} links={docs.links} props={['allowsNonContiguousRanges']} wide
 "use client";
 import {today, getLocalTimeZone} from '@internationalized/date';
-import {useLocale} from 'react-aria';
+import {useLocale} from 'react-aria-components';
 import {RangeCalendar} from 'vanilla-starter/RangeCalendar';
 import {useState} from 'react';
 
diff --git a/packages/dev/s2-docs/pages/s2/Calendar.mdx b/packages/dev/s2-docs/pages/s2/Calendar.mdx
index f52b74cbd8b..00c8e6c0796 100644
--- a/packages/dev/s2-docs/pages/s2/Calendar.mdx
+++ b/packages/dev/s2-docs/pages/s2/Calendar.mdx
@@ -142,8 +142,7 @@ Use the `minValue` and `maxValue` props to set the valid date range. The `isDate
 ```tsx render docs={docs.exports.Calendar} links={docs.links} props={['isInvalid', 'errorMessage']} wide type="s2"
 "use client";
 import {isWeekend, today, getLocalTimeZone} from '@internationalized/date';
-import {useLocale} from 'react-aria';
-import {Calendar} from '@react-spectrum/s2';
+import {Calendar, useLocale} from '@react-spectrum/s2';
 
 function Example(props) {
   let {locale} = useLocale();
diff --git a/packages/dev/s2-docs/pages/s2/DatePicker.mdx b/packages/dev/s2-docs/pages/s2/DatePicker.mdx
index 3bb847ed700..747569f160a 100644
--- a/packages/dev/s2-docs/pages/s2/DatePicker.mdx
+++ b/packages/dev/s2-docs/pages/s2/DatePicker.mdx
@@ -82,8 +82,7 @@ Use the `name` prop to submit the selected date to the server as an [ISO 8601](h
 ```tsx render docs={docs.exports.DatePicker} links={docs.links} props={['isRequired', 'necessityIndicator']} initialProps={{isRequired: true}} type="s2" wide
 "use client";
 import {isWeekend, today, getLocalTimeZone} from '@internationalized/date';
-import {useLocale} from 'react-aria';
-import {DatePicker, Form, Button} from '@react-spectrum/s2';
+import {DatePicker, Form, Button, useLocale} from '@react-spectrum/s2';
 
 function Example(props) {
   let {locale} = useLocale();
diff --git a/packages/dev/s2-docs/pages/s2/DateRangePicker.mdx b/packages/dev/s2-docs/pages/s2/DateRangePicker.mdx
index cc349dc81d3..72966a7652e 100644
--- a/packages/dev/s2-docs/pages/s2/DateRangePicker.mdx
+++ b/packages/dev/s2-docs/pages/s2/DateRangePicker.mdx
@@ -101,8 +101,7 @@ Use the `name` prop to submit the selected date to the server as an [ISO 8601](h
 ```tsx render docs={docs.exports.DateRangePicker} links={docs.links} props={['allowsNonContiguousRanges', 'isRequired', 'necessityIndicator']} initialProps={{isRequired: true}} wide type="s2"
 "use client";
 import {isWeekend, today, getLocalTimeZone} from '@internationalized/date';
-import {useLocale} from 'react-aria';
-import {DateRangePicker, Form, Button} from '@react-spectrum/s2';
+import {DateRangePicker, Form, Button, useLocale} from '@react-spectrum/s2';
 
 function Example(props) {
   let {locale} = useLocale();
diff --git a/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx b/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx
index 7fa53125f59..e79d28f14c2 100644
--- a/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx
+++ b/packages/dev/s2-docs/pages/s2/RangeCalendar.mdx
@@ -154,8 +154,7 @@ Use the `minValue` and `maxValue` props to set the valid date range. The `isDate
 ```tsx render docs={docs.exports.RangeCalendar} links={docs.links} props={['allowsNonContiguousRanges']} wide type="s2"
 "use client";
 import {today, getLocalTimeZone} from '@internationalized/date';
-import {useLocale} from 'react-aria';
-import {RangeCalendar} from '@react-spectrum/s2';
+import {RangeCalendar, useLocale} from '@react-spectrum/s2';
 import {useState} from 'react';
 
 function Example(props) {

From e34b28fdc83fe6edf97e92d12d0e323a57725f6e Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 2 Dec 2025 16:16:11 -0800
Subject: [PATCH 48/49] Update migration wording

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

diff --git a/packages/dev/s2-docs/pages/s2/migrating.mdx b/packages/dev/s2-docs/pages/s2/migrating.mdx
index d02a6a4c67d..7fbc8d02f2a 100644
--- a/packages/dev/s2-docs/pages/s2/migrating.mdx
+++ b/packages/dev/s2-docs/pages/s2/migrating.mdx
@@ -28,7 +28,7 @@ The following arguments are also available:
 
 For cases that the upgrade assistant doesn't handle automatically or where you'd rather upgrade some components manually, use the guide below.
 
-Note that <PendingBadge /> indicates that future changes will occur before the final release, and the current solution should be considered temporary.
+Note that <PendingBadge /> indicates that future changes are expected, and the current solution should be considered temporary.
 
 ## Components
 

From 10c14391f3d3b8fdff9cbe821a8f4ec90e9d27c2 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 2 Dec 2025 16:26:32 -0800
Subject: [PATCH 49/49] Fix markdown docs

---
 packages/dev/s2-docs/scripts/generateMarkdownDocs.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dev/s2-docs/scripts/generateMarkdownDocs.mjs b/packages/dev/s2-docs/scripts/generateMarkdownDocs.mjs
index 753523577a0..d04e6c34772 100644
--- a/packages/dev/s2-docs/scripts/generateMarkdownDocs.mjs
+++ b/packages/dev/s2-docs/scripts/generateMarkdownDocs.mjs
@@ -3,7 +3,7 @@
 import * as babel from '@babel/parser';
 import {fileURLToPath} from 'url';
 import fs from 'fs';
-import {getBaseUrl} from '../src/pageUtils';
+import {getBaseUrl} from '../src/pageUtils.ts';
 import glob from 'fast-glob';
 import path from 'path';
 import {Project} from 'ts-morph';