[pull] main from adobe:main

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

@@ -71,6 +71,7 @@ function Example() {
 Set the `value` or `defaultValue` to an array of numbers to render multiple thumbs. Each thumb should have an `aria-label` to describe it for assistive technologies (provided via `thumbLabels` here).
 
 ```tsx render
+"use client";
 import {Slider} from 'vanilla-starter/Slider';
 
 <Slider

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

@@ -103,4 +103,4 @@ Add the `.md` extension to the URL to get the markdown version of a page. Additi
 
 ## llms.txt
 
-The [llms.txt](https://react-aria.adobe.com/llms.txt) file contains a list of all the markdown pages available in the React Aria documentation.
+The <Link href="llms.txt" target="_blank">llms.txt</Link> file contains a list of all the markdown pages available in the React Aria documentation.

packages/dev/s2-docs/pages/react-aria/blog/how-we-internationalized-our-numberfield.mdx

@@ -51,6 +51,7 @@ Number fields can be used to represent many different types of numeric values, e
 We use the [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) API built into browsers to handle all of these formatting requirements across all locales. Our number field component supports most of the formatting options that the Intl API supports, which ensures that it is international friendly and supports many common formatting options out of the box. The browser currently only provides formatting support, however, not parsing support, so we built a custom number parser using information from the formatter. We'll discuss how this works in detail later in the post.
 
 ```tsx render
+"use client";
 import {NumberField} from '@react-spectrum/s2';
 
 <NumberField
@@ -70,6 +71,7 @@ Many number fields also support incrementing and decrementing their value using
 One area of complexity here is dealing with floating point rounding errors. All JavaScript numbers are double precision floating point, which means when you add or subtract two numbers, you can get rounding errors. For example, `0.1 + 0.2 === 0.30000000000000004`. This isn't really what users expect, however, so to fix this, we determine how many decimal places there are, multiply to convert the two numbers to integers, perform the addition or subtraction, and then divide again to get a decimal. A similar fix is necessary to perform step snapping on blur.
 
 ```tsx render
+"use client";
 import {NumberField} from '@react-spectrum/s2';
 
 <NumberField

packages/dev/s2-docs/pages/react-aria/releases/v1-15-0.mdx

@@ -24,16 +24,14 @@ export const isSubpage = true;
 
 New year, new release, and the shine hasn’t worn off from our new documentation website: we’ve already added new [Agent Skills](../ai#agent-skills) and improved the search experience 😍. This month’s release includes a big update to our compatibility, with DOM customization options via a [new `render` prop](../customization#dom-elements) for React Aria Components. This feature will help with cases such as rendering Router Link components, or for use with animation libraries. We have also fixed our most upvoted issue: we now constrain dates on blur instead of as you type, allowing more input flexibility and greatly improving the user experience of our date fields.
 
-Thank you to all of our contributors for your bug fixes, features, and feedback. We look forward to another great year ahead! 
+Thank you to all of our contributors for your bug fixes, features, and feedback. We look forward to another great year ahead!
 
 ## Change log
 ### General
   * Add `render` prop to allow customizing DOM element - [@devongovett](https://github.com/devongovett) - [PR](https://github.com/adobe/react-spectrum/pull/9499), [PR](https://github.com/adobe/react-spectrum/pull/9564)
   * Add Agent skills - [@reidbarber](https://github.com/reidbarber) - [PR](https://github.com/adobe/react-spectrum/pull/9515)
 ### Button
   * Support passing function via `formAction` prop - [@stefanprobst](https://github.com/stefanprobst) - [PR](https://github.com/adobe/react-spectrum/pull/9501)
-### CoachMark
-  * Update `CoachMarkContext` and `SlottedContextValue` types - [@unional](https://github.com/unional) - [PR](https://github.com/adobe/react-spectrum/pull/9423)
 ### ColorField
   * Add missing data attributes - [@mehdibha](https://github.com/mehdibha) - [PR](https://github.com/adobe/react-spectrum/pull/9105)
 ### ComboBox
@@ -99,7 +97,7 @@ Thank you to all of our contributors for your bug fixes, features, and feedback.
   * Use `typeof globalThis` to reference global object - [@quisido](https://github.com/quisido) - [PR](https://github.com/adobe/react-spectrum/pull/9402)
 ### Virtualizer
   * Add warning to users to set width and height if using Virtualizer - [@yihuiliao](https://github.com/yihuiliao) - [PR](https://github.com/adobe/react-spectrum/pull/9492)
-  
+
 ## Under Construction
 * Shadow DOM
   * Use `node.contains` for Shadow DOM usage - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/9485), [PR](https://github.com/adobe/react-spectrum/pull/9581)

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

@@ -868,6 +868,7 @@ import {TagGroup, Tag} from 'vanilla-starter/TagGroup';
 ```
 
 ```tsx render wide docs={docs.exports.Table} links={docs.links} props={['disabledBehavior']}
+"use client";
 import {Table, TableHeader, Column, Row, TableBody, Cell} from 'vanilla-starter/Table';
 
 <Table

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

@@ -11,6 +11,7 @@ export const description = 'A grouping of avatars that are related to each other
 <PageDescription>{docs.exports.AvatarGroup.description}</PageDescription>
 
 ```tsx render docs={docs.exports.AvatarGroup} links={docs.links} props={['label', 'size']} initialProps={{'aria-label': 'Collaborators', label: '123 members'}} controlOptions={{size: {control: 'picker'}}} type="s2"
+"use client";
 import {AvatarGroup, Avatar} from '@react-spectrum/s2';
 
 <AvatarGroup/* PROPS */>

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

@@ -12,6 +12,7 @@ export const description = 'Display a hierarchy of links to the current page or
 <PageDescription>{docs.exports.Breadcrumbs.description}</PageDescription>
 
 ```tsx render docs={docs.exports.Breadcrumbs} links={docs.links} props={['size', 'isDisabled']} initialProps={{}} type="s2"
+"use client";
 import {Breadcrumbs, Breadcrumb} from '@react-spectrum/s2';
 
 <Breadcrumbs/* PROPS */>
@@ -74,7 +75,7 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
     padding: 16,
     boxSizing: 'border-box',
     borderWidth: 1,
-    borderStyle: 'solid', 
+    borderStyle: 'solid',
     borderColor: 'gray-300',
     borderRadius: 'default',
     resize: 'horizontal',

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

@@ -12,6 +12,7 @@ export const description = 'A grouping of buttons whose actions are related to e
 <PageDescription>{docs.exports.ButtonGroup.description}</PageDescription>
 
 ```tsx render docs={docs.exports.ButtonGroup} links={docs.links} props={['orientation', 'align', 'size', 'isDisabled']} type="s2"
+"use client";
 import {ButtonGroup, Button} from '@react-spectrum/s2';
 
 <ButtonGroup/* PROPS */>
@@ -37,7 +38,7 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
     padding: 16,
     boxSizing: 'border-box',
     borderWidth: 1,
-    borderStyle: 'solid', 
+    borderStyle: 'solid',
     borderColor: 'gray-300',
     borderRadius: 'default',
     resize: 'horizontal',

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

@@ -236,6 +236,7 @@ import Select from '@react-spectrum/s2/icons/Select';
 Wrap a card in a [Skeleton](Skeleton) to display a loading state. Placeholder text content and images are displayed in a skeleton style.
 
 ```tsx render docs={docs.exports.Skeleton} links={docs.links} props={['isLoading']} initialProps={{isLoading: true}} type="s2" wide
+"use client";
 import {Skeleton, Card, CardPreview, Image, Content, Text} from '@react-spectrum/s2';
 
 <Skeleton isLoading>

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

@@ -15,6 +15,7 @@ export const description = 'Allows a user to select one or more items in a list
 <PageDescription>{docs.exports.CheckboxGroup.description}</PageDescription>
 
 ```tsx render docs={docs.exports.CheckboxGroup} links={docs.links} props={['label', 'size', 'orientation', 'labelPosition', 'description', 'contextualHelp', 'isEmphasized', 'isDisabled']} initialProps={{label: 'Favorite sports'}} type="s2"
+"use client";
 import {CheckboxGroup, Checkbox} from '@react-spectrum/s2';
 
 <CheckboxGroup/* PROPS */>

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

@@ -15,6 +15,7 @@ export const description = 'Combines a text input with a listbox, and allows a u
 <PageDescription>{docs.exports.ComboBox.description}</PageDescription>
 
 ```tsx render docs={docs.exports.ComboBox} links={docs.links} props={['label', 'placeholder', 'size', 'labelPosition', 'description', 'contextualHelp', 'isDisabled']} initialProps={{label: 'Ice cream flavor', placeholder: 'Select a flavor'}} type="s2"
+"use client";
 import {ComboBox, ComboBoxItem} from '@react-spectrum/s2';
 
 <ComboBox/* PROPS */>

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

@@ -12,6 +12,7 @@ export const description = 'Shows extra information about an adjacent component.
 <PageDescription>{docs.exports.ContextualHelp.description}</PageDescription>
 
 ```tsx render docs={docs.exports.ContextualHelp} links={docs.links} props={['variant', 'size', 'placement']} initialProps={{variant: 'help'}} type="s2"
+"use client";
 import {ContextualHelp, Heading, Content, Footer, Link} from '@react-spectrum/s2';
 
 <ContextualHelp/* PROPS */>

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

@@ -13,6 +13,7 @@ export const description = 'Provides layout and alignment for a grouping of fiel
 
 
 ```tsx render docs={docs.exports.Form} links={docs.links} props={['size', 'labelPosition', 'labelAlign', 'necessityIndicator', 'isRequired', 'isDisabled', 'isEmphasized']} type="s2"
+"use client";
 import {Form, TextField, Checkbox, ButtonGroup, Button} from '@react-spectrum/s2';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 

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

@@ -15,6 +15,7 @@ export const description = 'Displays a collapsible list of options, and allows a
 <PageDescription>{docs.exports.Picker.description}</PageDescription>
 
 ```tsx render docs={docs.exports.Picker} links={docs.links} props={['label', 'selectionMode', 'size', 'labelPosition', 'description', 'contextualHelp', 'isQuiet', 'isDisabled']} initialProps={{label: 'Ice cream flavor'}} type="s2"
+"use client";
 import {Picker, PickerItem} from '@react-spectrum/s2';
 
 <Picker/* PROPS */>

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

@@ -15,6 +15,7 @@ export const description = 'Allows a user to select a single item from a list of
 <PageDescription>{docs.exports.RadioGroup.description}</PageDescription>
 
 ```tsx render docs={docs.exports.RadioGroup} links={docs.links} props={['label', 'size', 'orientation', 'labelPosition', 'description', 'contextualHelp', 'isEmphasized', 'isDisabled']} initialProps={{label: 'Favorite pet'}} type="s2"
+"use client";
 import {RadioGroup, Radio} from '@react-spectrum/s2';
 
 <RadioGroup/* PROPS */>

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

@@ -12,6 +12,7 @@ export const description = 'A mutually exclusive group of buttons used for view
 <PageDescription>{docs.exports.SegmentedControl.description}</PageDescription>
 
 ```tsx render docs={docs.exports.SegmentedControl} links={docs.links} props={['isJustified', 'isDisabled']} initialProps={{'aria-label': 'Time granularity'}} type="s2" wide
+"use client";
 import {SegmentedControl, SegmentedControlItem} from '@react-spectrum/s2';
 
 <SegmentedControl/* PROPS */>

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

@@ -15,6 +15,7 @@ export const description = 'Displays data in rows and columns, with row selectio
 <PageDescription>{docs.exports.TableView.description}</PageDescription>
 
 ```tsx render docs={docs.exports.TableView} links={docs.links} props={['selectionMode', 'overflowMode', 'density', 'isQuiet']} initialProps={{'aria-label': 'Files', selectionMode: 'multiple'}} type="s2"
+"use client";
 import {TableView, TableHeader, Column, TableBody, Row, Cell} from '@react-spectrum/s2';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 

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

@@ -11,6 +11,7 @@ export const description = 'Displays a list of items, with support for keyboard
 <PageDescription>{docs.exports.TagGroup.description}</PageDescription>
 
 ```tsx render docs={docs.exports.TagGroup} links={docs.links} props={['label', 'selectionMode', 'size', 'labelPosition', 'maxRows', 'description', 'contextualHelp', 'isEmphasized']} initialProps={{label: 'Ice cream flavors', selectionMode: 'multiple', maxRows: 2}} controlOptions={{maxRows: {minValue: 1}}} type="s2"
+"use client";
 import {TagGroup, Tag} from '@react-spectrum/s2';
 
 <TagGroup/* PROPS */>

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

@@ -15,6 +15,7 @@ export const description = 'Displays hierarchical data with selection and collap
 <PageDescription>{docs.exports.TreeView.description}</PageDescription>
 
 ```tsx render docs={docs.exports.TreeView} links={docs.links} props={['selectionMode']} initialProps={{selectionMode: 'multiple'}} type="s2" wide
+"use client";
 import {TreeView, TreeViewItem, TreeViewItemContent} from '@react-spectrum/s2';
 
 <TreeView

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

@@ -103,4 +103,4 @@ Add the `.md` extension to the URL to get the markdown version of a page. Additi
 
 ## llms.txt
 
-The [llms.txt](https://react-spectrum.adobe.com/llms.txt) file contains a list of all the markdown pages available in the React Spectrum documentation.
+The <Link href="llms.txt" target="_blank">llms.txt</Link> file contains a list of all the markdown pages available in the React Spectrum documentation.

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

@@ -17,6 +17,7 @@ export const description = 'How to build accessible forms with validation.';
 Accessible forms start with clear, descriptive labels for each field. Use the `label` prop to add a visible label to any field. Additional help text can also be added via the `description` prop. The label and help text are announced by screen readers when the field is focused.
 
 ```tsx render
+"use client";
 import {TextField} from '@react-spectrum/s2';
 
 <TextField

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

@@ -13,7 +13,7 @@ export const omitFromNav = true;
 export const hideFromSearch = true;
 
 <RouterWrapperServer currentPage={props.currentPage}>
-  <Provider elementType="html" locale="en">
+  <SettingsContextProvider elementType="html" locale="en">
     <head>
       <meta charSet="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -50,8 +50,6 @@ export const hideFromSearch = true;
           }
         )}} />
     </head>
-    <SettingsContextProvider>
-      <Home currentPage={props.currentPage} />
-    </SettingsContextProvider>
-  </Provider>
+    <Home currentPage={props.currentPage} />
+  </SettingsContextProvider>
 </RouterWrapperServer>

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

@@ -241,7 +241,6 @@ No updates needed.
 - If within `Breadcrumbs`: Update `Item` to be a `Breadcrumb`
 - If within `Picker`: Update `Item` to be a `PickerItem`
 - If within `ComboBox`: Update `Item` to be a `ComboBoxItem`
-- If within `ListBox`: Update `Item` to be a `ListBoxItem`
 - If within `TabList`: Update `Item` to be a `Tab`
 - If within `TabPanels`: Update `Item` to be a `TabPanel` and remove surrounding `TabPanels`
 - Update `key` to be `id` (and keep `key` if rendered inside `array.map`)
@@ -251,10 +250,6 @@ No updates needed.
 - Change `variant="overBackground"` to `staticColor="white"`
 - If `a` was used inside `Link` (legacy API), remove the `a` and apply props (i.e `href`) directly to `Link`
 
-### ListBox
-
-- Update `Item` to be a `ListBoxItem`
-
 ### Menu
 
 - Update `Item` to be a `MenuItem`

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

@@ -1186,6 +1186,7 @@ import AlertNotice from '@react-spectrum/s2/illustrations/linear/AlertNotice';
 ```
 
 ```tsx render wide type="s2"
+"use client";
 import {TableView, TableHeader, Column, Row, TableBody, Cell} from '@react-spectrum/s2';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 

packages/dev/s2-docs/src/SettingsProvider.tsx

@@ -2,11 +2,13 @@
 
 import {type ColorScheme, SettingsContext} from './SettingsContext';
 import {Provider} from '@react-spectrum/s2';
-import React, {ReactNode, useCallback, useSyncExternalStore} from 'react';
+import React, {JSX, ReactNode, useCallback, useSyncExternalStore} from 'react';
 import {useLocalStorage} from './useLocalStorage';
 
 interface SettingsProviderProps {
-  children: ReactNode
+  children: ReactNode,
+  elementType?: keyof JSX.IntrinsicElements,
+  locale?: string
 }
 
 function subscribeToColorScheme(callback: () => void) {
@@ -53,7 +55,7 @@ export function useSettingsState() {
   };
 }
 
-export function SettingsContextProvider({children}: SettingsProviderProps) {
+export function SettingsContextProvider({children, elementType, locale}: SettingsProviderProps) {
   let {colorScheme, toggleColorScheme, systemColorScheme, providerColorScheme} = useSettingsState();
 
   return (
@@ -63,7 +65,7 @@ export function SettingsContextProvider({children}: SettingsProviderProps) {
         toggleColorScheme,
         systemColorScheme
       }}>
-      <Provider colorScheme={providerColorScheme}>
+      <Provider colorScheme={providerColorScheme} elementType={elementType} locale={locale}>
         {children}
       </Provider>
     </SettingsContext.Provider>

packages/react-aria-components/docs/Tree.mdx

@@ -282,6 +282,7 @@ A Tree consists of a container element, with items containing data inside. The i
 If the tree supports item selection, each item can optionally include a selection checkbox.
 
 ```tsx render=false
+"use client";
 import {Tree, TreeItem, TreeItemContent, Button, Checkbox, SelectionIndicator} from 'react-aria-components';
 
 <Tree>

packages/react-aria-components/src/utils.tsx

@@ -20,7 +20,7 @@ interface SlottedValue<T> {
   slots?: Record<string | symbol, T>
 }
 
-export type SlottedContextValue<T> = (SlottedValue<T> & T) | null | undefined;
+export type SlottedContextValue<T> = SlottedValue<T> | T | null | undefined;
 export type ContextValue<T, E> = SlottedContextValue<WithRef<T, E>>;
 
 type ProviderValue<T> = [Context<T>, T];

starters/docs/src/RangeCalendar.css

@@ -35,6 +35,7 @@
     padding: 0 calc(var(--gap) / 2);
     position: relative;
     z-index: 1;
+    outline: none;
 
     span {
       display: flex;

starters/docs/src/theme.css

@@ -156,7 +156,7 @@
   --highlight-background-invalid: oklch(from var(--red) var(--lightness-900) c h);
   --highlight-foreground: white;
   --highlight-overlay: oklch(from var(--tint-1000) l c h / 15%);
-  --invalid-color: oklch(from var(--red) var(--lightness-900) c h);
+  --invalid-color: oklch(from var(--red) var(--lightness-1000) c h);
   --field-background: var(--gray-50);
 }