docs: more S2 docs fixes (#8944)

* add horizontal scrolling to MobileSearchMenu's TagGroup

* remove test index page

* Remove placeholder from S2 migration guide

* update markdown docs script to handle more custom components

* more updates to markdown docs with custom handling for style props docs

* add visibility to s2 docs

* add fixed width to s2 accordion example

* add Picker migration docs for defaultSelectedKey and selectedKey

* remove autoFocus from search menu SearchField to prevent focus ring flicker

* only render ToC header if there are sections

* auto-focus search menu field

* add index page

* add fuzzy searching and tags to search

* remove extra 'Esc' key handler (fixes view transition issue)

* show Introduction pages first in the menu card list

* remove fuzzy search

* improve mobile search menu experience

* fix relative link on index page

* fix mobile search menu scrolling

* mobile search: fix scroll to top when searching

* mobile search: improve tag group container

Author: reidbarber

.storybook-s2/docs/Intro.jsx

@@ -249,6 +249,7 @@ import {ActionButton} from '@react-spectrum/s2';
           <li><Code>insetY</Code></li>
           <li><Code>insetStart</Code></li>
           <li><Code>insetEnd</Code></li>
+          <li><Code>visibility</Code></li>
         </ul>
         <H3>UNSAFE Style Overrides</H3>
         <P>We highly discourage overriding the styles of React Spectrum components because it may break at any time when we change our implementation, making it difficult for you to update in the future. Consider using <Link href="https://react-spectrum.adobe.com/react-aria/" target="_blank">React Aria Components</Link> with our <Link href="?path=/docs/style-macro--docs" target="_top">style macro</Link> to build a custom component with Spectrum styles instead.</P>

packages/dev/s2-docs/pages/index.mdx

@@ -1,30 +1,25 @@
 import {Layout} from '../src/Layout';
+import {LinkButton} from '@react-spectrum/s2';
 export default Layout;
 
 export const section = 'Getting started';
 
-# Test page
+# Welcome!
 
-Hello world! some `inline code` and **bold** stuff...
+The React Spectrum docs have a new look! This is a **beta preview** so keep in mind that we will be continuing to make improvements before the full release.
 
-Bulleted list:
+<LinkButton href="s2/getting-started.html" variant="accent" size="L">Get Started with Spectrum 2</LinkButton>
 
-* One
-* Two
-* Three
+## What's new?
 
-Numbered list:
+- Docs for [Spectrum 2](https://s2.spectrum.adobe.com) components
+- New docs for [React Aria](/react-aria/Autocomplete.html) and [Internationalized](/internationalized/date/index.html)
+- A new search menu experience
+- Interactive controls for examples
+- New concept guides
+- AI-friendly markdown docs
+- Much more...
 
-1. Do this
-2. Then that
-3. Then this other thing
+## Roadmap
 
-## H2
-
-### H3
-
-#### H4
-
-## Another H2
-
-### Another H3
+The existing docs are still available [here](https://react-spectrum.adobe.com/react-spectrum/index.html). We plan to do a full release of the new docs site by early 2026, so we welcome any and all feedback!

packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx

@@ -5,6 +5,8 @@ import docs from 'docs:react-aria-components';
 import vanillaDocs from 'docs:vanilla-starter/Autocomplete';
 import '../../tailwind/tailwind.css';
 
+export const tags = ['combobox', 'typeahead', 'input'];
+
 # Autocomplete
 
 <PageDescription>{docs.exports.Autocomplete.description}</PageDescription>

packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx

@@ -6,6 +6,8 @@ import '../../tailwind/tailwind.css';
 import Anatomy from '@react-aria/breadcrumbs/docs/anatomy.svg';
 import {InlineAlert, Heading, Content} from '@react-spectrum/s2';
 
+export const tags = ['navigation'];
+
 # Breadcrumbs
 
 <PageDescription>{docs.exports.Breadcrumbs.description}</PageDescription>

packages/dev/s2-docs/pages/react-aria/Button.mdx

@@ -10,6 +10,8 @@ import tailwindDocs from 'docs:tailwind-starter/Button';
 import '../../tailwind/tailwind.css';
 import typesDocs from 'docs:@react-types/shared/src/events.d.ts';
 
+export const tags = ['btn'];
+
 # Button
 
 <PageDescription>{docs.exports.Button.description}</PageDescription>

packages/dev/s2-docs/pages/react-aria/Calendar.mdx

@@ -8,6 +8,8 @@ import {Calendar as TailwindCalendar} from 'tailwind-starter/Calendar';
 import '../../tailwind/tailwind.css';
 import Anatomy from '@react-aria/calendar/docs/calendar-anatomy.svg';
 
+export const tags = ['date'];
+
 # Calendar
 
 <PageDescription>{docs.exports.Calendar.description}</PageDescription>

packages/dev/s2-docs/pages/react-aria/Checkbox.mdx

@@ -7,6 +7,8 @@ import {Checkbox as TailwindCheckbox} from 'tailwind-starter/Checkbox';
 import '../../tailwind/tailwind.css';
 import Anatomy from '@react-aria/checkbox/docs/checkbox-anatomy.svg';
 
+export const tags = ['input'];
+
 # Checkbox
 
 <PageDescription>{docs.exports.Checkbox.description}</PageDescription>

packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx

@@ -6,6 +6,8 @@ import vanillaDocs from 'docs:vanilla-starter/CheckboxGroup';
 import '../../tailwind/tailwind.css';
 import Anatomy from '@react-aria/checkbox/docs/checkboxgroup-anatomy.svg';
 
+export const tags = ['input'];
+
 # CheckboxGroup
 
 <PageDescription>{docs.exports.CheckboxGroup.description}</PageDescription>

packages/dev/s2-docs/pages/react-aria/ColorArea.mdx

@@ -7,6 +7,8 @@ import {ColorArea as TailwindColorArea} from 'tailwind-starter/ColorArea';
 import '../../tailwind/tailwind.css';
 import Anatomy from '@react-aria/color/docs/ColorAreaAnatomy.svg';
 
+export const tags = [];
+
 # ColorArea
 
 <PageDescription>{docs.exports.ColorArea.description}</PageDescription>

packages/dev/s2-docs/pages/react-aria/ColorField.mdx

@@ -8,6 +8,8 @@ import vanillaDocs from 'docs:vanilla-starter/ColorField';
 import docs from 'docs:react-aria-components';
 import Anatomy from '@react-aria/color/docs/ColorFieldAnatomy.svg';
 
+export const tags = ['input'];
+
 # ColorField
 
 <PageDescription>{docs.exports.ColorField.description}</PageDescription>