docs: more S2 docs fixes

.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>

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

@@ -7,6 +7,8 @@ import {ColorPicker as VanillaColorPicker} from 'vanilla-starter/ColorPicker';
 import {ColorPicker as TailwindColorPicker} from 'tailwind-starter/ColorPicker';
 import '../../tailwind/tailwind.css';
 
+export const tags = ['input'];
+
 # ColorPicker
 
 <PageDescription>{docs.exports.ColorPicker.description}</PageDescription>

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

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

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

@@ -7,6 +7,8 @@ import {ColorSwatch as VanillaColorSwatch} from 'vanilla-starter/ColorSwatch';
 import {ColorSwatch as TailwindColorSwatch} from 'tailwind-starter/ColorSwatch';
 import '../../tailwind/tailwind.css';
 
+export const tags = [];
+
 # ColorSwatch
 
 <PageDescription>{docs.exports.ColorSwatch.description}</PageDescription>

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

@@ -6,6 +6,8 @@ import {ColorSwatchPicker as VanillaColorSwatchPicker, ColorSwatchPickerItem} fr
 import '../../tailwind/tailwind.css';
 import {InlineAlert, Heading, Content} from '@react-spectrum/s2'
 
+export const tags = ['input'];
+
 # ColorSwatchPicker
 
 <PageDescription>{docs.exports.ColorSwatchPicker.description}</PageDescription>

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

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

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

@@ -7,6 +7,8 @@ import vanillaDocs from 'docs:vanilla-starter/ComboBox';
 import '../../tailwind/tailwind.css';
 import Anatomy from 'react-aria-components/docs/ComboBoxAnatomy.svg';
 
+export const tags = ['autocomplete', 'search', 'typeahead', 'input'];
+
 # ComboBox
 
 <PageDescription>{docs.exports.ComboBox.description}</PageDescription>

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

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

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

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

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

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

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

@@ -6,6 +6,8 @@ import vanillaDocs from 'docs:vanilla-starter/Disclosure';
 import '../../tailwind/tailwind.css';
 import Anatomy from 'react-aria-components/docs/DisclosureAnatomy.svg';
 
+export const tags = ['accordion', 'collapsible', 'expandable', 'details'];
+
 # Disclosure
 
 <PageDescription>{docs.exports.Disclosure.description}</PageDescription>

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

@@ -6,6 +6,8 @@ import vanillaDocs from 'docs:vanilla-starter/DisclosureGroup';
 import '../../tailwind/tailwind.css';
 import Anatomy from 'react-aria-components/docs/DisclosureGroupAnatomy.svg';
 
+export const tags = ['accordion', 'collapsible', 'expandable', 'details'];
+
 # DisclosureGroup
 
 <PageDescription>{docs.exports.DisclosureGroup.description}</PageDescription>

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

@@ -4,6 +4,8 @@ export default Layout;
 import docs from 'docs:react-aria-components';
 import '../../tailwind/tailwind.css';
 
+export const tags = ['file', 'drag', 'dnd', 'upload'];
+
 # DropZone
 
 <PageDescription>{docs.exports.DropZone.description}</PageDescription>

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

@@ -5,6 +5,8 @@ import docs from 'docs:react-aria-components';
 import '../../tailwind/tailwind.css';
 import {InlineAlert, Heading, Content} from '@react-spectrum/s2'
 
+export const tags = ['upload', 'input'];
+
 # FileTrigger
 
 <PageDescription>{docs.exports.FileTrigger.description}</PageDescription>

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

@@ -4,6 +4,8 @@ export default Layout;
 import docs from 'docs:react-aria-components';
 import '../../tailwind/tailwind.css';
 
+export const tags = ['input', 'field'];
+
 # Form
 
 <PageDescription>{docs.exports.Form.description}</PageDescription>

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

@@ -7,6 +7,8 @@ import vanillaDocs from 'docs:vanilla-starter/GridList';
 import '../../tailwind/tailwind.css';
 import Anatomy from 'react-aria-components/docs/GridListAnatomy.svg';
 
+export const tags = ['list view'];
+
 # GridList
 
 <PageDescription>{docs.exports.GridList.description}</PageDescription>

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

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

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

@@ -7,6 +7,8 @@ import {Link as TailwindLink} from 'tailwind-starter/Link';
 import tailwindDocs from 'docs:tailwind-starter/Link';
 import '../../tailwind/tailwind.css';
 
+export const tags = ['anchor', 'hyperlink', 'href'];
+
 # Link
 
 <PageDescription>{docs.exports.Link.description}</PageDescription>

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

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

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

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

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

@@ -8,6 +8,8 @@ import {Meter as TailwindMeter} from 'tailwind-starter/Meter';
 import '../../tailwind/tailwind.css';
 import Anatomy from '@react-aria/meter/docs/anatomy.svg';
 
+export const tags = ['gauge', 'progress', 'level'];
+
 # Meter
 
 <PageDescription>{docs.exports.Meter.description}</PageDescription>

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

@@ -7,6 +7,8 @@ import '../../tailwind/tailwind.css';
 import Anatomy from '@react-aria/overlays/docs/modal-anatomy.svg';
 import {InlineAlert, Heading, Content} from '@react-spectrum/s2'
 
+export const tags = ['dialog', 'popup', 'overlay'];
+
 # Modal
 
 <PageDescription>{docs.exports.Modal.description}</PageDescription>

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -6,6 +6,8 @@ import vanillaDocs from 'docs:vanilla-starter/Select';
 import '../../tailwind/tailwind.css';
 import Anatomy from 'react-aria-components/docs/SelectAnatomy.svg';
 
+export const tags = ['picker', 'dropdown', 'menu', 'input'];
+
 # Select
 
 <PageDescription>{docs.exports.Select.description}</PageDescription>

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

@@ -8,6 +8,8 @@ import tailwindDocs from 'docs:tailwind-starter/Slider';
 import '../../tailwind/tailwind.css';
 import Anatomy from '@react-aria/slider/docs/anatomy.svg';
 
+export const tags = ['range input', 'track', 'scrubber'];
+
 # Slider
 
 <PageDescription>{docs.exports.Slider.description}</PageDescription>

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

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