docs: Update URL structure

packages/dev/s2-docs/.parcelrc-s2-docs

@@ -1,6 +1,6 @@
 {
   "extends": "@parcel/config-default",
-  "resolvers": ["@react-aria/parcel-resolver-optimize-locales", "@parcel/resolver-glob", "parcel-resolver-docs", "..."],
+  "resolvers": ["@react-aria/parcel-resolver-optimize-locales", "@parcel/resolver-glob", "./S2DocsResolver", "parcel-resolver-docs", "..."],
   "transformers": {
     "docs:*.{js,ts,tsx,json}": ["parcel-transformer-docs", "@parcel/transformer-inline"],
     "docs-json:*.{js,ts,tsx,json}": ["parcel-transformer-docs"],

packages/dev/s2-docs/S2DocsResolver.js

@@ -0,0 +1,10 @@
+const {Resolver} = require('@parcel/plugin');
+
+module.exports = new Resolver({
+  resolve({dependency}) {
+    // Ignore URL dependencies in MDX files.
+    if (dependency.sourcePath?.endsWith('.mdx') && dependency.isOptional) {
+      return {isExcluded: true};
+    }
+  }
+});

packages/dev/s2-docs/pages/WelcomeHeader.tsx

@@ -41,7 +41,7 @@ export function LibraryCards() {
           <Text slot="description">{TAB_DEFS['react-spectrum'].description}</Text>
         </Content>
         <Footer>
-          <LinkButton href="s2/index.html" variant="accent">Get started</LinkButton>
+          <LinkButton href="s2/" variant="accent">Get started</LinkButton>
         </Footer>
       </ProductCard>
 
@@ -52,7 +52,7 @@ export function LibraryCards() {
           <Text slot="description">{TAB_DEFS['react-aria'].description}</Text>
         </Content>
         <Footer>
-          <LinkButton href="react-aria/Autocomplete.html" variant="accent">Explore</LinkButton>
+          <LinkButton href="react-aria/" variant="accent">Explore</LinkButton>
         </Footer>
       </ProductCard>
 
@@ -63,7 +63,7 @@ export function LibraryCards() {
           <Text slot="description">{TAB_DEFS['internationalized'].description}</Text>
         </Content>
         <Footer>
-          <LinkButton href="internationalized/date/index.html" variant="accent">Show Packages</LinkButton>
+          <LinkButton href="internationalized/date/" variant="accent">Show Packages</LinkButton>
         </Footer>
       </ProductCard>
     </div>

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

@@ -14,7 +14,7 @@ The React Spectrum docs have a new look! This is a **beta preview** so keep in m
 ## What's new?
 
 - 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)
+- New docs for [React Aria](react-aria/Autocomplete) and [Internationalized](internationalized/date/)
 - A new search menu experience
 - Interactive controls for examples
 - New concept guides
@@ -23,4 +23,4 @@ The React Spectrum docs have a new look! This is a **beta preview** so keep in m
 
 ## Roadmap
 
-The existing docs are still available [here](https://react-spectrum.adobe.com/index.html). We plan to do a full release of the new docs site by early 2026, so we welcome any and all feedback!
+The existing docs are still available [here](https://react-spectrum.adobe.com/). 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/internationalized/date/Calendar.mdx

@@ -24,7 +24,7 @@ export const group = 'Internationalized';
 
 While the Gregorian calendar is the most common, many other calendar systems are used throughout the world. The `Calendar` interface represents calendar systems in the `@internationalized/date` library. It encapsulates information such as the number of days in a month, the number of months in a year, and the list of eras in a calendar system, as well as methods that handle correct arithmetic of dates in that calendar system, as well as converting dates between calendar systems. Many implementations of this interface are provided in `@internationalized/date` to handle the most commonly used calendar systems.
 
-As described in the docs for [CalendarDate](CalendarDate.html#calendar-systems) and other date objects, you can pass a `Calendar` instance to a date to represent a date in that calendar. Date manipulation follows the rules defined by that calendar system. You can also convert between calendar systems using the <TypeLink links={docs.links} type={docs.exports.toCalendar} /> function.
+As described in the docs for [CalendarDate](CalendarDate#calendar-systems) and other date objects, you can pass a `Calendar` instance to a date to represent a date in that calendar. Date manipulation follows the rules defined by that calendar system. You can also convert between calendar systems using the <TypeLink links={docs.links} type={docs.exports.toCalendar} /> function.
 
 ```tsx
 import {HebrewCalendar, GregorianCalendar, toCalendar} from '@internationalized/date';

packages/dev/s2-docs/pages/internationalized/date/CalendarDate.mdx

@@ -21,7 +21,7 @@ export const group = 'Internationalized';
 
 ## Introduction
 
-A `CalendarDate` object represents a date without any time components, in a specific calendar system such as the Gregorian calendar. Use this type to represent dates where the time is not important, such as a birthday or an all day calendar event. If you need to refer to a specific time, use a [CalendarDateTime](CalendarDateTime.html) or [ZonedDateTime](ZonedDateTime.html) instead.
+A `CalendarDate` object represents a date without any time components, in a specific calendar system such as the Gregorian calendar. Use this type to represent dates where the time is not important, such as a birthday or an all day calendar event. If you need to refer to a specific time, use a [CalendarDateTime](CalendarDateTime) or [ZonedDateTime](ZonedDateTime) instead.
 
 A `CalendarDate` can be created using the constructor. This example creates a date that represents February 3rd, 2022 in the Gregorian calendar system.
 
@@ -73,7 +73,7 @@ import {BuddhistCalendar} from '@internationalized/date';
 let date = new CalendarDate(new BuddhistCalendar(), 2563, 4, 30);
 ```
 
-See the [Calendar](Calendar.html#implementations) docs for details about the supported calendars.
+See the [Calendar](Calendar#implementations) docs for details about the supported calendars.
 
 ### Eras
 
@@ -211,7 +211,7 @@ date.toDate(getLocalTimeZone()); // e.g. Thu Feb 03 2022 00:00:00 GMT-0500 (East
 
 ### To a date with time
 
-A `CalendarDate` can be converted to a [CalendarDateTime](CalendarDateTime.html) or [ZonedDateTime](ZonedDateTime.html) by providing an optional [Time](Time.html) object and/or time zone identifier.
+A `CalendarDate` can be converted to a [CalendarDateTime](CalendarDateTime) or [ZonedDateTime](ZonedDateTime) by providing an optional [Time](Time) object and/or time zone identifier.
 
 A <TypeLink links={docs.links} type={docs.exports.CalendarDateTime} /> represents a date with a time, but not in any specific time zone. Use this type to represent times that occur at the same local time regardless of the time zone, such as the time of New Years Eve fireworks which always occur at midnight. Most times are better stored as a `ZonedDateTime`.
 

packages/dev/s2-docs/pages/internationalized/date/CalendarDateTime.mdx

@@ -21,7 +21,7 @@ export const group = 'Internationalized';
 
 ## Introduction
 
-A `CalendarDateTime` object represents a date and time without a time zone, in a specific calendar system such as the Gregorian calendar. Use this type to represent times that occur at the same local time regardless of the time zone, such as the time of New Years Eve fireworks which always occur at midnight. Most times are better stored as a [ZonedDateTime](ZonedDateTime.html).
+A `CalendarDateTime` object represents a date and time without a time zone, in a specific calendar system such as the Gregorian calendar. Use this type to represent times that occur at the same local time regardless of the time zone, such as the time of New Years Eve fireworks which always occur at midnight. Most times are better stored as a [ZonedDateTime](ZonedDateTime).
 
 A `CalendarDateTime` can be created using the constructor. This example creates a date that represents February 3rd, 2022 at 9:15 AM in the Gregorian calendar system.
 
@@ -62,7 +62,7 @@ import {BuddhistCalendar} from '@internationalized/date';
 let date = new CalendarDateTime(new BuddhistCalendar(), 2563, 4, 30, 9, 15);
 ```
 
-See the [Calendar](Calendar.html#implementations) docs for details about the supported calendars.
+See the [Calendar](Calendar#implementations) docs for details about the supported calendars.
 
 ### Eras
 
@@ -213,7 +213,7 @@ date.toString(); // '2022-02-03T09:45:00'
 
 ### To a date or time only
 
-A `CalendarDateTime` can be converted to a [CalendarDate](CalendarDate.html) or [Time](Time.html) object if only one of these components is needed.
+A `CalendarDateTime` can be converted to a [CalendarDate](CalendarDate) or [Time](Time) object if only one of these components is needed.
 
 Use the <TypeLink links={docs.links} type={docs.exports.toCalendarDate} /> function to convert a `CalendarDateTime` to a `CalendarDate`.
 

packages/dev/s2-docs/pages/internationalized/date/Time.mdx

@@ -21,7 +21,7 @@ export const group = 'Internationalized';
 
 ## Introduction
 
-A `Time` object represents a clock time without any date components. If you need to refer to a time on a specific date, use a [CalendarDateTime](CalendarDateTime.html) or [ZonedDateTime](ZonedDateTime.html) instead.
+A `Time` object represents a clock time without any date components. If you need to refer to a time on a specific date, use a [CalendarDateTime](CalendarDateTime) or [ZonedDateTime](ZonedDateTime) instead.
 
 A `Time` can be created using the constructor. This example creates a time that represents 9:45 AM.
 
@@ -149,7 +149,7 @@ date.toString(); // '09:45:00'
 
 ### To a date and time
 
-A `Time` can be combined with a [CalendarDate](CalendarDate.html) to produce a [CalendarDateTime](CalendarDateTime.html) object using the <TypeLink links={docs.links} type={docs.exports.toCalendarDateTime} /> function.
+A `Time` can be combined with a [CalendarDate](CalendarDate) to produce a [CalendarDateTime](CalendarDateTime) object using the <TypeLink links={docs.links} type={docs.exports.toCalendarDateTime} /> function.
 
 ```tsx
 import {toCalendarDateTime, CalendarDate} from '@internationalized/date';

packages/dev/s2-docs/pages/internationalized/date/ZonedDateTime.mdx

@@ -108,7 +108,7 @@ let date = new ZonedDateTime(
 );
 ```
 
-See the [Calendar](Calendar.html#implementations) docs for details about the supported calendars.
+See the [Calendar](Calendar#implementations) docs for details about the supported calendars.
 
 ### Eras
 
@@ -355,7 +355,7 @@ date.toDate('America/Los_Angeles'); // Thu Feb 03 2022 09:45:00 GMT-0800 (Pacifi
 
 ### To a date or time only
 
-A `ZonedDateTime` can be converted to a [CalendarDate](CalendarDate.html) or [Time](Time.html) object if only one of these components is needed.
+A `ZonedDateTime` can be converted to a [CalendarDate](CalendarDate) or [Time](Time) object if only one of these components is needed.
 
 Use the <TypeLink links={docs.links} type={docs.exports.toCalendarDate} /> function to convert a `ZonedDateTime` to a `CalendarDate`.
 
@@ -377,7 +377,7 @@ toTime(date); // 09:45
 
 ### To a date and time without a time zone
 
-A `ZonedDateTime` can be converted to a [CalendarDateTime](CalendarDateTime.html), which represents a date and time that is not in any specific time zone. Use this type to represent times that occur at the same local time regardless of the time zone, such as the time of New Years Eve fireworks which always occur at midnight. Most times are better stored as a `ZonedDateTime`.
+A `ZonedDateTime` can be converted to a [CalendarDateTime](CalendarDateTime), which represents a date and time that is not in any specific time zone. Use this type to represent times that occur at the same local time regardless of the time zone, such as the time of New Years Eve fireworks which always occur at midnight. Most times are better stored as a `ZonedDateTime`.
 
 Use the <TypeLink links={docs.links} type={docs.exports.toCalendarDateTime} /> function to convert a `ZonedDateTime` to a `CalendarDateTime`.
 

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

@@ -30,7 +30,7 @@ The `@internationalized/date` package provides objects and functions for represe
 * **Manipulation** – Add and subtract durations, set and cycle fields, etc.
 * **Conversion** – Convert between calendar systems, time zones, string representations, and object types.
 * **Queries** – Compare dates and times for ordering or full/partial equality. Determine locale-specific metadata such as day of week, weekend/weekday, etc.
-* **Time zone aware** – The [ZonedDateTime](ZonedDateTime.html) object supports time zone aware date and time manipulation.
+* **Time zone aware** – The [ZonedDateTime](ZonedDateTime) object supports time zone aware date and time manipulation.
 * **Predictable** – The API is designed to resolve ambiguity in all operations explicitly, including time zone conversions, arithmetic involving daylight saving time, locale-specific queries, and more.
 * **Small bundle size** – The entire library including all calendars and functions is 8 kB minified and compressed with Brotli.
 * **Tree shakeable** – Only include the functions and calendar systems you need. For example, if you only use the Gregorian calendar and builtin `CalendarDate` methods, it's just 2.8 kB.
@@ -45,11 +45,11 @@ By default, JavaScript represents dates and times using the [Date](https://devel
 
 The `@internationalized/date` package includes the following object types:
 
-* [Calendar](Calendar.html) – An interface which provides calendar conversion and metadata like number of days in month, and number of months in year. Many implementations are provided to support the most commonly used calendar systems.
-* [CalendarDate](CalendarDate.html) – An immutable object that stores a date associated with a specific calendar system, without any time components.
-* [CalendarDateTime](CalendarDateTime.html) – An immutable object that represents a date and time without a time zone, in a specific calendar system.
-* [ZonedDateTime](ZonedDateTime.html) – An immutable object that represents a date and time in a specific time zone and calendar system.
-* [Time](Time.html) – An immutable object that stores a clock time without any date components.
+* [Calendar](Calendar) – An interface which provides calendar conversion and metadata like number of days in month, and number of months in year. Many implementations are provided to support the most commonly used calendar systems.
+* [CalendarDate](CalendarDate) – An immutable object that stores a date associated with a specific calendar system, without any time components.
+* [CalendarDateTime](CalendarDateTime) – An immutable object that represents a date and time without a time zone, in a specific calendar system.
+* [ZonedDateTime](ZonedDateTime) – An immutable object that represents a date and time in a specific time zone and calendar system.
+* [Time](Time) – An immutable object that stores a clock time without any date components.
 
 Each object includes methods to allow basic manipulation and conversion functionality, such as adding and subtracting durations, and formatting as an ISO 8601 string. Additional less commonly used functions can be imported from the `@internationalized/date` package, and passed a date object as a parameter. This includes functions to parse ISO 8601 strings, query properties such as day of week, convert between time zones and much more. See the documentation for each of the objects to learn more about the supported methods and functions.
 

packages/dev/s2-docs/pages/internationalized/number/NumberParser.mdx

@@ -27,7 +27,7 @@ Numbers can be formatted in many different ways, including percentages, units, d
 
 Parsing numbers while taking into account all locale-specific detail is quite complex and error-prone. `NumberParser` uses information about the locale and expected format for a number in order to parse it correctly. This means it is somewhat strict about the accepted formats. It is not designed to handle use cases where the user can enter numbers in an unknown format (e.g. either a unit value _or_ a percentage), this must be known up front or selected via an external UI control.
 
-Read our [blog post](how-we-internationalized-our-numberfield.html) for more details on how the number parser is implemented.
+Read our [blog post](how-we-internationalized-our-numberfield) for more details on how the number parser is implemented.
 
 ### Example
 

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

@@ -46,4 +46,4 @@ let formatter = new NumberFormatter('en-US', {style: 'percent'});
 formatter.format(number); // '45%'
 ```
 
-See the docs for [NumberParser](NumberParser.html) and [NumberFormatter](NumberFormatter.html) to learn more.
+See the docs for [NumberParser](NumberParser) and [NumberFormatter](NumberFormatter) to learn more.

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

@@ -109,9 +109,9 @@ export const tags = ['combobox', 'typeahead', 'input'];
 
 ## Content
 
-Autocomplete filters a collection component using a [TextField](TextField.html) or [SearchField](SearchField.html). It can be used to build UI patterns such as command palettes, searchable menus, filterable selects, and more.
+Autocomplete filters a collection component using a [TextField](TextField) or [SearchField](SearchField). It can be used to build UI patterns such as command palettes, searchable menus, filterable selects, and more.
 
-[Menu](Menu.html) and [ListBox](ListBox.html) support **virtual focus**, which allows arrow key navigation within the list while the text input is focused. Use `disableVirtualFocus` to require the user to tab between the input and list.
+[Menu](Menu) and [ListBox](ListBox) support **virtual focus**, which allows arrow key navigation within the list while the text input is focused. Use `disableVirtualFocus` to require the user to tab between the input and list.
 
 <ExampleSwitcher type="component" examples={['Menu', 'Select', 'ListBox', 'TagGroup', 'GridList', 'Table']}>
 
@@ -1106,7 +1106,7 @@ function AsyncLoadingExample() {
 
 ## API
 
-```tsx links={{Autocomplete: '#autocomplete', SearchField: 'SearchField.html', TextField: 'TextField.html', Menu: 'Menu.html', ListBox: 'ListBox.html', TagGroup: 'TagGroup.html', GridList: 'GridList.html', Table: 'Table.html'}}
+```tsx links={{Autocomplete: '#autocomplete', SearchField: 'SearchField', TextField: 'TextField', Menu: 'Menu', ListBox: 'ListBox', TagGroup: 'TagGroup', GridList: 'GridList', Table: 'Table'}}
 <Autocomplete>
   <SearchField /> or <TextField />
   <Menu />, <ListBox />, <TagGroup />, <GridList />, or <Table />

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

@@ -40,7 +40,7 @@ export const relatedPages = [{'title': 'useBreadcrumbs', 'url': 'https://react-s
 
 ## Content
 
-`Breadcrumbs` follows the [Collection Components API](collections.html?component=Breadcrumbs), accepting both static and dynamic collections. This example shows a dynamic collection, passing a list of objects to the `items` prop, and a function to render the children. The `onAction` event is called when a user presses a breadcrumb.
+`Breadcrumbs` follows the [Collection Components API](collections?component=Breadcrumbs), accepting both static and dynamic collections. This example shows a dynamic collection, passing a list of objects to the `items` prop, and a function to render the children. The `onAction` event is called when a user presses a breadcrumb.
 
 ```tsx render
 "use client";
@@ -79,7 +79,7 @@ function Example() {
 
 <Anatomy />
 
-```tsx links={{Breadcrumbs: '#breadcrumbs', Breadcrumb: '#breadcrumb', Link: 'Link.html'}}
+```tsx links={{Breadcrumbs: '#breadcrumbs', Breadcrumb: '#breadcrumb', Link: 'Link'}}
 <Breadcrumbs>
   <Breadcrumb>
     <Link />