adobe
diff --git a/‎.chromatic/preview-head.html
Lines changed: 1 addition & 2 deletions b/‎.chromatic/preview-head.html
Lines changed: 1 addition & 2 deletions
diff --git a/‎.circleci/comment.js
Lines changed: 3 additions & 1 deletion b/‎.circleci/comment.js
Lines changed: 3 additions & 1 deletion
diff --git a/‎.circleci/config.yml
Lines changed: 43 additions & 2 deletions b/‎.circleci/config.yml
Lines changed: 43 additions & 2 deletions
diff --git a/‎.gitignore
Lines changed: 2 additions & 0 deletions b/‎.gitignore
Lines changed: 2 additions & 0 deletions
diff --git a/‎.parcelrc-build
Lines changed: 1 addition & 1 deletion b/‎.parcelrc-build
Lines changed: 1 addition & 1 deletion
diff --git a/‎.storybook-s2/docs/Intro.jsx
Lines changed: 40 additions & 17 deletions b/‎.storybook-s2/docs/Intro.jsx
Lines changed: 40 additions & 17 deletions
diff --git a/‎.storybook-s2/docs/Migrating.jsx
Lines changed: 34 additions & 0 deletions b/‎.storybook-s2/docs/Migrating.jsx
Lines changed: 34 additions & 0 deletions
diff --git a/‎.storybook-s2/docs/Release Notes.mdx
Lines changed: 35 additions & 1 deletion b/‎.storybook-s2/docs/Release Notes.mdx
Lines changed: 35 additions & 1 deletion
diff --git a/‎.storybook-s2/docs/StyleMacro.jsx
Lines changed: 2 additions & 2 deletions b/‎.storybook-s2/docs/StyleMacro.jsx
Lines changed: 2 additions & 2 deletions
@@ -138,8 +138,7 @@
 <!--
   Load S2 adobe clean VF
 -->
-<link rel="preload" href="https://use.typekit.net/af/5e77d8/00000000000000007754d3a5/30/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3" as="font" crossorigin="anonymous" />
-<link rel="stylesheet" href="https://use.typekit.net/yuq6kxz.css">
+<link rel="preload" href="https://use.typekit.net/af/b1226a/0000000000000000775c0485/31/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n1&v=3" as="font" crossorigin="anonymous" />
 
 <!--
   This web project loads adobe clean, adobe clean serif, myriad-arabic, myriad-hebrew, adobe-clean-han-japanese,
 
@@ -53,6 +53,7 @@ async function run() {
       [RAC Tailwind Example](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/rac-tailwind/index.html)
       [RAC Spectrum + Tailwind Example](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/rac-spectrum-tailwind/index.html)
       [S2 Parcel Example](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/s2-parcel-example/index.html)
+      [S2 Custom Icons](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/icon-builder-fixture/index.html)
       [S2 Webpack Example](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/s2-webpack-5-example/index.html)
       [CRA Test App Size](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/publish-stats/build-stats.txt)
       [NextJS App Size](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/verdaccio/publish-stats/next-build-stats.txt)
@@ -80,7 +81,8 @@ async function run() {
 
   * [View the storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook/index.html?path=/story/accordion--default)
   * [View the S2 storybook](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/storybook-s2/index.html)
-  * [View the documentation](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/docs/index.html)`
+  * [View the documentation](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/docs/index.html)
+  * [View the S2 docs](https://reactspectrum.blob.core.windows.net/reactspectrum/${process.env.CIRCLE_SHA1}/s2-docs/index.html)`
       });
     } catch (err) {
       console.error(err)
 
@@ -37,6 +37,14 @@ executors:
       CACHE_VERSION: v1
     working_directory: ~/react-spectrum
 
+  rsp-2xlarge:
+    docker:
+      - image: cimg/node:22.13.1
+    resource_class: 2xlarge
+    environment:
+      CACHE_VERSION: v1
+    working_directory: ~/react-spectrum
+
 jobs:
   install:
     executor: rsp-large
@@ -325,7 +333,7 @@ jobs:
           path: ~/junit
 
   test-esm:
-    executor: rsp-xlarge
+    executor: rsp-2xlarge
     steps:
       - restore_cache:
           key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
@@ -470,6 +478,21 @@ jobs:
           paths:
             - '*/docs/'
 
+  s2-docs:
+    executor: rsp-xlarge
+    steps:
+      - restore_cache:
+          key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+
+      - run:
+          name: build s2 docs
+          command: make s2-docs
+
+      - persist_to_workspace:
+          root: dist
+          paths:
+            - '*/s2-docs/'
+
   verdaccio:
     executor: rsp-xlarge
     steps:
@@ -493,7 +516,7 @@ jobs:
             - storage
 
   v-docs:
-    executor: rsp-xlarge
+    executor: rsp-2xlarge
     steps:
       - restore_cache:
           key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
@@ -509,6 +532,15 @@ jobs:
           environment:
             VERDACCIO_STORAGE_PATH: /tmp/verdaccio-workspace/storage
 
+      - run:
+          name: build docs off verdaccio retry
+          command: |
+            ./scripts/verdaccio-ci.sh
+            ./scripts/verdaccio-build.sh
+          environment:
+            VERDACCIO_STORAGE_PATH: /tmp/verdaccio-workspace/storage
+          when: on_fail
+
       - persist_to_workspace:
           root: verdaccio_dist
           paths:
@@ -685,6 +717,11 @@ jobs:
           environment:
             VERDACCIO_STORAGE_PATH: /tmp/verdaccio-workspace/storage
 
+      - persist_to_workspace:
+          root: verdaccio_dist
+          paths:
+            - '*/verdaccio/icon-builder-fixture'
+
   v-publish-stats:
     executor: rsp
     steps:
@@ -869,6 +906,9 @@ workflows:
       - docs:
           requires:
             - install
+      - s2-docs:
+          requires:
+            - install
       - verdaccio:
           filters:
             branches:
@@ -923,6 +963,7 @@ workflows:
             - storybook
             - storybook-s2
             - docs
+            - s2-docs
       - deploy-verdaccio:
           requires:
             - v-docs
 
@@ -17,3 +17,5 @@ test-reports.xml
 storage
 packages/dev/storybook-builder-parcel/iframe.html
 packages/dev/storybook-builder-parcel/preview.js
+starters/docs/registry
+starters/tailwind/registry
@@ -16,7 +16,7 @@
       "@parcel/transformer-react-refresh-wrap"
     ]
   },
-  "namers": ["parcel-namer-s2", "parcel-namer-intl", "..."],
+  "namers": ["@react-spectrum/parcel-namer-s2", "parcel-namer-intl", "..."],
   "optimizers": {
     "**/spectrum-theme.cjs": ["parcel-optimizer-strict-mode"]
   }
 
@@ -140,41 +140,64 @@ export function Docs() {
         <P>You may also need to configure other tools such as TypeScript, Babel, ESLint, and Jest to support parsing import attributes. See <Link href="https://parceljs.org/features/macros/#usage-with-other-tools" target="_blank">these docs</Link> for details.</P>
         <P>See the <Link href="https://github.com/adobe/react-spectrum/tree/main/examples" target="_blank">examples folder</Link> in our repo for working setups with various build tools. For details on optimizing the output CSS, see the <Link href="?path=/docs/style-macro--docs#css-optimization" target="_top">style macro docs</Link>.</P>
         <H2>Setting up your app</H2>
-        <P>Unlike React Spectrum v3, a <Code>Provider</Code> is not required. Instead, import <Code>@react-spectrum/s2/page.css</Code> in the entry component of your app to apply the background color and color scheme to the <Code>{'<html>'}</Code> element. This ensures that the entire page has the proper styles even before your JavaScript runs.</P>
-        <Pre>{highlight(`import '@react-spectrum/s2/page.css';
-import {Button} from '@react-spectrum/s2';
+        <P>Wrap your app in an S2 <Code>{'<Provider>'}</Code> component to load Spectrum 2 fonts for the user's locale and apply the appropriate Spectrum background layer for your app. When using S2 together with other versions of Spectrum, ensure that the S2 provider is the inner-most provider.</P>
+        <Pre>{highlight(`import {Provider, Button} from '@react-spectrum/s2';
 
 function App() {
   return (
-    <Button
-      variant="accent"
-      onPress={() => alert('Hey there!')}>
-      Hello Spectrum 2!
-    </Button>
+    // Wrap app in a <Provider> to load fonts, set background, set locale, etc.
+    <Provider background="base">
+      <Button
+        variant="accent"
+        onPress={() => alert('Hey there!')}>
+        Hello Spectrum 2!
+      </Button>
+    </Provider>
   );
 }`)}</Pre>
         <Example>
           <Button variant="accent" onPress={() => alert('Hey there!')}>Hello Spectrum 2!</Button>
         </Example>
-        <P><Strong>Note</Strong>: If you’re embedding Spectrum 2 as a section of a larger page rather than taking over the whole window, follow the <Link href="#embedded-sections" target="_self">directions below</Link> instead of using <Code>page.css</Code>.</P>
+        <H3>Optimizing full-page apps</H3>
+        <P>When building a full page S2 app that's not embedded within a larger page, import <Code>@react-spectrum/s2/page.css</Code> to apply the background color and color scheme to the <Code>{'<html>'}</Code> element instead of the <Code>{'<Provider>'}</Code>. This ensures that the page has styles even before your JavaScript loads. A <Code>{'<Provider>'}</Code> is still necessary in addition to <Code>page.css</Code> in order to include the fonts, set the locale, etc.</P>
+        <Pre>{highlight(`// Apply S2 background to the <html> element
+import '@react-spectrum/s2/page.css';
+
+function App() {
+  return (
+    <Provider>
+      {/* ... */}
+    </Provider>
+  );
+}`)}</Pre>
+        <P>By default, this uses the <Code>base</Code> background layer. This can be customized by setting the <Code>data-background</Code> attribute on the <Code>{'<html>'}</Code> element.</P>
+        <Pre>{highlight(`<html data-background="layer-1">
+  <!-- ... -->
+</html>`)}</Pre>
         <H3>Overriding the color scheme</H3>
-        <P>By default, the page follows the user’s operating system color scheme setting, supporting both light and dark mode. The page background is set to the <Code>base</Code> Spectrum background layer by default. This can be configured by setting the <Code>data-color-scheme</Code> and <Code>data-background</Code> attributes on the <Code>{'<html>'}</Code> element. For example, to force the application to only render in light mode, set <Code>data-color-scheme="light"</Code>.</P>
+        <P>By default, React Spectrum follows the operating system color scheme setting, supporting both light and dark mode. The <Code>colorScheme</Code> prop can be set on <Code>{'<Provider>'}</Code> to force the app to always render in a certain color scheme.</P>
+        <Pre>{highlight(`import {Provider} from '@react-spectrum/s2';
+
+<Provider colorScheme="light">
+  {/* your app */}
+</Provider>`)}</Pre>
+        <P>When using <Code>page.css</Code>, set the <Code>data-color-scheme</Code> attribute on the <Code>{'<html>'}</Code> element.</P>
         <Pre>{highlight(`<html data-color-scheme="light">
   <!-- ... -->
 </html>`)}</Pre>
         <H3>Overriding the locale</H3>
-        <P>By default, React Spectrum uses the browser/operating system language setting for localized strings, date and number formatting, and to determine the layout direction (left-to-right or right-to-left). This can be overridden by rendering a <Code>{'<Provider>'}</Code> component at the root of your app, and setting the <Code>locale</Code> prop.</P>
+        <P>By default, React Spectrum uses the browser/operating system language setting for localized strings, date and number formatting, and to determine the layout direction (left-to-right or right-to-left). This can be overridden by rendering setting the <Code>locale</Code> prop on the <Code>{'<Provider>'}</Code>.</P>
         <Pre>{highlight(`import {Provider} from '@react-spectrum/s2';
 
 <Provider locale="en-US">
   {/* your app */}
 </Provider>`)}</Pre>
-        <H3>Embedded sections</H3>
-        <P>If you’re building an embedded section of a larger page using Spectrum 2, use the <Code>{'<Provider>'}</Code> component to set the background instead of importing <Code>page.css</Code>. The <Code>background</Code> prop should be set to the Spectrum background layer appropriate for your app, and the <Code>colorScheme</Code> can be overridden as well.</P>
-        <Pre>{highlight(`import {Provider} from '@react-spectrum/s2';
-
-<Provider background="base">
-  {/* your app */}
+        <H3>Server-side rendering</H3>
+        <P>When using SSR, the <Code>{'<Provider>'}</Code> component can be rendered as the root <Code>{'<html>'}</Code> element. The <Code>locale</Code> prop should always be specified to avoid hydration errors. <Code>page.css</Code> is not needed in this case.</P>
+        <Pre>{highlight(`<Provider elementType="html" locale="en-US">
+  <body>
+    {/* ... */}
+  </body>
 </Provider>`)}</Pre>
         <H3>Usage with older React Spectrum versions</H3>
         <P>See Adobe internal documentation.</P>
 
@@ -114,6 +114,9 @@ export function Migrating() {
         <H3>ButtonGroup</H3>
         <P>No updates needed.</P>
 
+        <H3>Calendar</H3>
+        <P>No updates needed.</P>
+
         <H3>Checkbox</H3>
         <P>No updates needed.</P>
 
@@ -158,6 +161,27 @@ export function Migrating() {
           <li className={style({font: 'body', marginY: 8})}>Update <Code>Item</Code> to be a <Code>ComboBoxItem</Code></li>
         </ul>
 
+        <H3>DateField</H3>
+        <ul className="sb-unstyled">
+          <li className={style({font: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
+          <li className={style({font: 'body', marginY: 8})}>Change <Code>validationState="invalid"</Code> to <Code>isInvalid</Code></li>
+          <li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
+        </ul>
+
+        <H3>DatePicker</H3>
+        <ul className="sb-unstyled">
+          <li className={style({font: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
+          <li className={style({font: 'body', marginY: 8})}>Change <Code>validationState="invalid"</Code> to <Code>isInvalid</Code></li>
+          <li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
+        </ul>
+
+        <H3>DateRangePicker</H3>
+        <ul className="sb-unstyled">
+          <li className={style({font: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
+          <li className={style({font: 'body', marginY: 8})}>Change <Code>validationState="invalid"</Code> to <Code>isInvalid</Code></li>
+          <li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
+        </ul>
+
         <H3>Dialog</H3>
         <ul className="sb-unstyled">
           <li className={style({font: 'body', marginY: 8})}>Update children to move render props from being the second child of <Code>DialogTrigger</Code> to being a child of <Code>Dialog</Code></li>
@@ -302,6 +326,9 @@ export function Migrating() {
           <li className={style({font: 'body', marginY: 8})}>Remove <Code>showErrorIcon</Code> (it has been removed due to accessibility issues)</li>
         </ul>
 
+        <H3>RangeCalendar</H3>
+        <P>No updates needed.</P>
+
         <H3>RangeSlider</H3>
         <ul className="sb-unstyled">
           <li className={style({font: 'body', marginY: 8})}>Remove <Code>showValueLabel</Code> (it has been removed due to accessibility issues)</li>
@@ -392,6 +419,13 @@ export function Migrating() {
           <li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
         </ul>
 
+        <H3>TimeField</H3>
+        <ul className="sb-unstyled">
+          <li className={style({font: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
+          <li className={style({font: 'body', marginY: 8})}>Change <Code>validationState="invalid"</Code> to <Code>isInvalid</Code></li>
+          <li className={style({font: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
+        </ul>
+
         <H3>ToggleButton</H3>
         <P>No updates needed.</P>
 
 
@@ -4,6 +4,40 @@ export default MDXLayout;
 
 # Release Notes
 
+## v0.10.0
+
+### Font update
+
+This release introduces a new font for Spectrum 2: Adobe Clean Spectrum VF. This is an evolution of the previous Adobe Clean, with slightly updated metrics allowing for better vertical centering. Along with this update, the S2 Provider component now automatically handles loading the fonts needed for the user's language. The new font does not affect previous versions of React Spectrum.
+
+If you previously used `page.css` without a `Provider`, you'll need to add a `Provider` around your app to load the fonts. See the [updated docs](?path=/docs/intro--docs#setting-up-your-app) for details.
+
+### New Components
+
+* [Calendar](?path=/docs/calendar--docs)
+* [RangeCalendar](?path=/docs/rangecalendar--docs)
+* [DateField](?path=/docs/datefield--docs)
+* [DatePicker](?path=/docs/datepicker--docs)
+* [DateRangePicker](?path=/docs/daterangepicker--docs)
+* [TimeField](?path=/docs/timefield--docs)
+
+### Updates
+
+* [CardView](?path=/docs/cardview--docs): Fix ActionBar from not scrolling
+* [ActionButton](?path=/docs/actionbutton--docs): Fix avatar-only ActionButtons to have square dimensions
+* [Tabs](?path=/docs/tabs--docs): Improve selection indicator animation, fix collasped tabs
+* [ProgressCircle](?path=/docs/progresscircle--docs): Add track outline in High Contrast Mode
+* [Switch](?path=/docs/switch--docs): Fix the toggle in RTL locales
+* [TreeView](?path=/docs/treeview--docs): Support async loading
+
+## v0.9.1
+
+### Updates
+* [Button](?path=/docs/button--docs): Fix focus visible styles from being applied on standard focus
+* [ContextualHelp](?path=/docs/contextualhelp--docs): Update width to match Spectrum designs
+* [Tabs](?path=/docs/tabs--docs): Update selection indicator when tab text changes
+* [TagGroup](?path=/docs/taggroup--docs): Fix focus visible styles from being applied on standard focus
+
 ## v0.9.0
 
 ### Updates
@@ -24,7 +58,7 @@ We strongly discourage using `UNSAFE_className` because it results in inconsiste
 
 ### Style macro updates
 
-We have made significant changes to the way our Style Macro generates class names in an effort to make them stable between version. While we work to stabilize the style macro class names, we have added a postfix based on the version number so that class names don't conflict with any prior or future version. 
+We have made significant changes to the way our Style Macro generates class names in an effort to make them stable between versions. While we work to stabilize the style macro class names, we have added a postfix based on the version number so that class names don't conflict with any prior or future version.
 
 We also made some changes to the available style macro values.
 
 
@@ -205,7 +205,7 @@ function MyComponent({variant}) {
   display: 'flex',
   alignItems: 'center',
   columnGap: 8
-};
+} as const;
 
 const styles = style({
   ...horizontalStack,
@@ -218,7 +218,7 @@ export function horizontalStack(gap: number) {
     display: 'flex',
     alignItems: 'center',
     columnGap: gap
-  };
+  } as const;
 }`)}</Pre>
         <P>Then, import your macro and use it in a component.</P>
         <Pre>{highlight(`// component.tsx
Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@`
`16`	`16`	`"@parcel/transformer-react-refresh-wrap"`
`17`	`17`	`]`
`18`	`18`	`},`
`19`		`- "namers": ["parcel-namer-s2", "parcel-namer-intl", "..."],`
	`19`	`+ "namers": ["@react-spectrum/parcel-namer-s2", "parcel-namer-intl", "..."],`
`20`	`20`	`"optimizers": {`
`21`	`21`	`"**/spectrum-theme.cjs": ["parcel-optimizer-strict-mode"]`
`22`	`22`	`}`