fix: shadow dom support for portals

.circleci/config.yml

@@ -16,30 +16,30 @@ parameters:
 executors:
   rsp:
     docker:
-      - image: cimg/node:22.13.1
+      - image: cimg/node:22.21.1
     environment:
       CACHE_VERSION: v1
     working_directory: ~/react-spectrum
 
   rsp-large:
     docker:
-      - image: cimg/node:22.13.1
+      - image: cimg/node:22.21.1
     resource_class: large
     environment:
       CACHE_VERSION: v1
     working_directory: ~/react-spectrum
 
   rsp-xlarge:
     docker:
-      - image: cimg/node:22.13.1
+      - image: cimg/node:22.21.1
     resource_class: xlarge
     environment:
       CACHE_VERSION: v1
     working_directory: ~/react-spectrum
 
   rsp-2xlarge:
     docker:
-      - image: cimg/node:22.13.1
+      - image: cimg/node:22.21.1
     resource_class: 2xlarge
     environment:
       CACHE_VERSION: v1
@@ -380,6 +380,8 @@ jobs:
       - run:
           name: build fork-point apis
           command: |
+            mkdir -p ~/.ssh
+            curl -L https://api.github.com/meta | jq -r '.ssh_keys | .[]' | sed -e 's/^/github.com /' >> ~/.ssh/known_hosts
             yarn build:api-branch --githash="origin/main" --output="base-api" && yarn build:api-branch && yarn compare:apis
 
       - persist_to_workspace:
@@ -478,6 +480,21 @@ jobs:
           paths:
             - '*/docs/'
 
+  docs-beta:
+    executor: rsp-xlarge
+    steps:
+      - restore_cache:
+          key: react-spectrum-{{ .Environment.CACHE_VERSION }}-{{ .Environment.CIRCLE_SHA1 }}
+
+      - run:
+          name: build docs
+          command: make s2-docs-production
+
+      - persist_to_workspace:
+          root: dist
+          paths:
+            - '*/docs/'
+
   s2-docs:
     executor: rsp-xlarge
     steps:
@@ -801,9 +818,10 @@ jobs:
       - run:
           name: deploy
           command: |
-            azcopy copy "/tmp/dist/production/docs/*" "https://reactspectrum.blob.core.windows.net/\$web${AZURE_STORAGE_SAS_TOKEN}" --recursive --exclude-pattern "*.md;*.txt"
-            azcopy copy "/tmp/dist/production/docs/*" "https://reactspectrum.blob.core.windows.net/\$web${AZURE_STORAGE_SAS_TOKEN}" --recursive --include-pattern "*.md" --content-type "text/markdown; charset=utf-8"
-            azcopy copy "/tmp/dist/production/docs/*" "https://reactspectrum.blob.core.windows.net/\$web${AZURE_STORAGE_SAS_TOKEN}" --recursive --include-pattern "*.txt" --content-type "text/plain; charset=utf-8"
+            azcopy copy "/tmp/dist/production/docs/*" "https://reactspectrum.blob.core.windows.net/\$web${AZURE_STORAGE_SAS_TOKEN}" --recursive --exclude-pattern "*.md;*.txt;*.html;*.rsc"
+            azcopy copy "/tmp/dist/production/docs/*" "https://reactspectrum.blob.core.windows.net/\$web${AZURE_STORAGE_SAS_TOKEN}" --recursive --include-pattern "*.md" --content-type "text/markdown; charset=utf-8" --cache-control "max-age=300"
+            azcopy copy "/tmp/dist/production/docs/*" "https://reactspectrum.blob.core.windows.net/\$web${AZURE_STORAGE_SAS_TOKEN}" --recursive --include-pattern "*.txt" --content-type "text/plain; charset=utf-8" --cache-control "max-age=300"
+            azcopy copy "/tmp/dist/production/docs/*" "https://reactspectrum.blob.core.windows.net/\$web${AZURE_STORAGE_SAS_TOKEN}" --recursive --include-pattern "*.html;*.rsc" --cache-control "max-age=300"
 
   comment:
     executor: rsp
@@ -1018,6 +1036,26 @@ workflows:
           requires:
             - docs-production
 
+
+  beta-docs:
+    when:
+      and:
+        - equal: [ "beta-docs", << pipeline.parameters.GHA_Action >> ]
+    jobs:
+      - install
+      - docs-beta:
+          filters:
+            branches:
+              only: beta-docs
+          requires:
+            - install
+      - deploy-production:
+          filters:
+            branches:
+              only: beta-docs
+          requires:
+            - docs-beta
+
   nightly:
     triggers:
       - schedule:

.cursor/rules/add-subheadings.mdc

@@ -0,0 +1,22 @@
+---
+alwaysApply: false
+---
+
+# Step 3: Add sub-headings
+
+Within the Enhancements, Fixes, and Under Construction categories, group commits by UI component under sub-headings.
+
+### Sub-heading rules:
+- Use sub-headings ONLY for:
+  - Enhancements
+  - Fixes
+  - Under Construction
+- Do NOT create sub-headings for:
+  - Documentation
+  - To Be Categorized
+  - S2
+- Sub-headings should be in alphabetical order
+- Use "Miscellaneous" as a sub-heading for commits that do not belong to a specific component
+- Each category can have its own Miscellaneous sub-heading
+- Write sub-headings and commits as unordered lists using a hyphen (-)
+- Do NOT bold the sub-heading text

.cursor/rules/categorize-commits.mdc

@@ -0,0 +1,36 @@
+---
+alwaysApply: false
+---
+
+# Step 1: Categorize commits 
+
+Sort ALL commit messages into one of six main categories. The main categories are the following:
+- Enhancements
+- Fixes
+- Documentation
+- Under Construction
+- To Be Categorized
+- S2
+
+Before categorizing commits into other groups, check whether each commit should be classified as “Under Construction.”
+- Follow the steps below in order:
+  1. Identify pre-release packages
+    - Use a command such as grep to scan the repository for package versions that include prerelease identifiers (e.g., alpha, beta, rc)
+  2. Extract component keywords from commit messages
+    - Parse each commit message to identify possible component names
+    - Normalize these keywords (e.g., lowercase, remove punctuation) for easier comparison.
+  3. Compare extracted keywords with pre-release packages
+    - If any keyword matches a package in the list, mark the commit as Under Construction.
+  4. Check for explicit prerelease keywords in commit text
+    - If the commit message directly includes alpha, beta, or rc, classify it as Under Construction, regardless of package matches.
+
+Next, categorize the remaining commits not categorized as "Under Construction". Use the following keywords to determine the category:
+| Keyword                    | Category |
+|----------------------------|----------|
+| feat                       | Enhancements|
+| fix                        | Fixes |
+| docs                       | Documentation |
+| chore, revert, bump, build | To Be Categorized |
+| S2                         | S2 |
+
+Do not duplicate commits. In terms of priority, it should be Under Construction > S2 > To Be Categorized > Enhancements > Fixes > Documentation

.cursor/rules/rewrite-commit-message.mdc

@@ -0,0 +1,27 @@
+---
+alwaysApply: false
+---
+
+You are a expert technical writer for front-end development.
+
+# Step 2: Rewrite commit messages
+
+Original format: Type (Scope): Summary of changes - [@username](link to username) - [PR](link to PR)
+New Format: Summary of changes - [@username](link to username) - [PR](link to PR)
+
+### General Guidelines:
+- Keep the summary as a single, grammatically correct sentence
+- Verbs should be first person present tense but do NOT include the subject (e.g. I)
+- The message should be concise and easy to read
+- Wrap any camelCase or code-like terms (e.g. onClick, onAction, isDisabled) in backticks (``)
+  - Do NOT use backticks for component names
+- Replace specific terms:
+  - RAC -> React Aria
+  - V3 -> React Spectrum
+- ALWAYS capitalize UI component names
+  - Example:
+    - toast -> Toast
+    - inline alert -> InlineAlert
+
+### Component Names to Capitalize:
+Accordion, Autocomplete, Badge, Breadcrumbs, Buttons, Calendar, Checkbox, CheckboxGroup, Collections, ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatch, ColorSwatchPicker, ColorWheel, ComboBox, Date and Time, DateField, DatePicker, DateRangePicker, Dialog, Disclosure, DisclosureGroup, Drag and Drop, DropZone, FileTrigger, Form, InlineAlert, Link, Listbox, ListView, Menu, Meter, Modal, NotificationBadge, NumberField, Picker, ProgressBar, ProgressCircle, RadioGroup, RangeCalendar, SearchField, Select, Slider, StatusLight, Switch, Table, Tabs, TagGroup, TextArea, TextField, TimeField, Toast, ToggleButton, ToggleButtonGroup, Tooltip, Tree, Virtualizer.

.github/workflows/beta-docs.yaml

@@ -0,0 +1,15 @@
+name: Beta docs deploy
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+
+jobs:
+  trigger-circleci:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Run CircleCI
+        id: beta-docs
+        uses: CircleCI-Public/[email protected]
+        env:
+          CCI_TOKEN: ${{ secrets.CCI_TOKEN }}

.gitignore

@@ -1,7 +1,6 @@
 .DS_Store
 .cache
 .idea
-.nyc_output
 .package-lock.json
 .parcel-cache
 build-storybook.log

.npmignore

@@ -1,8 +1,6 @@
 .DS_Store
 .storybook
 .editorconfig
-.nycrc
-.nyc_output
 coverage
 Makefile
 yarn.lock

.parcelrc

@@ -11,6 +11,7 @@
     "*.{md,mdx}": ["parcel-transformer-mdx-docs"],
     "*.svg": ["@parcel/transformer-svg-react"],
     "packages/@react-aria/example-theme/**/*.css": ["@parcel/transformer-css"],
+    "starters/docs/src/*.css": ["@parcel/transformer-css"],
     "*.css": ["...", "parcel-transformer-css-env"],
     "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
       "@parcel/transformer-js",

.storybook-s2/docs/Release Notes.mdx

@@ -4,6 +4,28 @@ export default MDXLayout;
 
 # Release Notes
 
+## v0.12.0
+
+### Updates
+* [ActionButton](?path=/docs/actionbutton--docs): Add pending state
+* [ColorSlider](?path=/docs/colorslider--docs): Fix `ColorLoupe` position in RTL locales
+* [ComboBox](?path=/docs/combobox--docs): Support avatars and onAction
+* [CustomDialog](?path=/docs/customdialog--docs): Support custom widths
+* [Dialog](?path=/docs/dialog--docs): Add XL size
+* [Disclosure](?path=/docs/disclosure--docs): Add animation to disclosure
+* [InlineAlert](?path=/docs/inlinealert--docs): Support heading-less Inline Alerts
+* [Picker](?path=/docs/picker--docs): Support multiple selection and avatars
+* [Tags](?path=/docs/taggroup--docs): Fix Tag collapse calculation for removeable tags
+* [Tooltip](?path=/docs/tooltip--docs): Prevent text overflow by default
+* Allow placeholders in supported S2 components (e.g. ColorArea, ComboBox, NumberField, SearchField, TextArea, TextField)
+* Apply `page.css` styles to the Shadow DOM
+
+### Popover Styling Updates
+
+The Popover component has been updated to better support custom styling. To 
+remove the preset padding, use the new `padding` prop and wrap your Popover content
+in a custom div with your desired styling.
+
 ## v0.11.0
 
 ### New Components

CONTRIBUTING.md

@@ -77,32 +77,6 @@ Or run the documentation and browse to [http://localhost:1234/](http://localhost
 yarn start:docs
 ```
 
-### Component/Hook scaffolding
-If you are looking to contribute a brand new component or Hook in a package that does not exist yet, please run the following command.
-```bash
-yarn plop
-```
-This will start a series of cli prompts to determine what template files and folders should be generated to help quick start your contribution.
-The prompts are as follows:
-
-1. What type of project are you setting up?
-    - Select "React Spectrum v3"
-
-2. Scope name(s)
-    - Select the package scopes that make sense for your contribution (e.g. react-spectrum if you are contributing a component, react-aria for an aria Hook, etc)
-
-3. Package name, all lowercase (e.g. textfield)
-
-4. Component name, please use appropriate uppercase (e.g. TextField)
-    - If you are contributing a non-component Hook, just enter the name of your Hook.
-
-5. Component css module name, blank if N/A. If unsure, check @adobe/spectrum-css-temp/components for a module containing the desired css (e.g. textfield)
-    - If you cannot find the component CSS module name in @adobe/spectrum-css-temp/components, feel free to reach out to a team member via GitHub Issues or Discussions.
-
-Upon answering all the prompts, the appropriate package(s) should be generated and ready for modification.
-
-**Note:** With regards to the generated docs files, please feel free to remove them if you won't be contributing docs. If you are contributing docs for a new component or Hook, please submit them in a separate pull request so that we can decide when to deploy them to our docs site.
-
 ### Tests
 We use [jest](https://jestjs.io/) for unit tests and [react-testing-library](https://testing-library.com/docs/react-testing-library/intro) for rendering and writing assertions. Please make sure you include tests with your pull requests. Our CI will run the tests on PRs as well as the linter and type checker. You can see on each PR whether you have passed all our checks. We split the tests into 2 groups.
 
@@ -154,7 +128,7 @@ yarn start:docs
 Then, open [http://localhost:1234](http://localhost:1234) in your browser.
 
 ### Verdaccio
-We use [Verdaccio](https://verdaccio.org/) to set up a private registry for our packages to test our components in our example apps. 
+We use [Verdaccio](https://verdaccio.org/) to set up a private registry for our packages to test our components in our example apps.
 
 To run verdaccio, first ensure that your `git status` is clean. If your computer has an Intel chip, add the line `shopt -s globstar extglob` in the `verdaccio.sh` file after line 21. Save and commit these changes under a clear message like "Do not push". If you have an Apple silicon chip, you may skip this step.
 

Makefile

@@ -109,6 +109,8 @@ website:
 website-production:
 	node scripts/buildWebsite.js $$PUBLIC_URL
 	cp packages/dev/docs/pages/robots.txt dist/production/docs/robots.txt
+	# Uncomment this when we are ready to release.
+	# $(MAKE) s2-docs-production
 	$(MAKE) starter-zip
 	$(MAKE) tailwind-starter
 	$(MAKE) s2-storybook-docs
@@ -118,7 +120,7 @@ check-examples:
 	yarn tsc --project dist/docs-examples/tsconfig.json
 
 starter:
-	cd starters/docs && yarn --no-immutable && yarn tsc
+	cd starters/docs && yarn --no-immutable && yarn up react-aria-components && yarn tsc
 
 starter-zip: starter
 	cp LICENSE starters/docs/.
@@ -129,7 +131,8 @@ starter-zip: starter
 
 tailwind-starter:
 	cp LICENSE starters/tailwind/.
-	cd starters/tailwind && yarn --no-immutable && yarn tsc
+	cd starters/tailwind && yarn --no-immutable && yarn up react-aria-components && yarn up tailwindcss-react-aria-components && yarn tsc
+
 	cd starters/tailwind && zip -r react-aria-tailwind-starter.zip . -x .gitignore .DS_Store "node_modules/*" "storybook-static/*"
 	mv starters/tailwind/react-aria-tailwind-starter.zip dist/production/docs/react-aria-tailwind-starter.$$(git rev-parse --short HEAD).zip
 	cd starters/tailwind && yarn build-storybook
@@ -143,12 +146,18 @@ s2-api-diff:
 	node scripts/api-diff.js --skip-same --skip-style-props
 
 s2-docs:
+	PUBLIC_URL=https://reactspectrum.blob.core.windows.net/reactspectrum/$$(git rev-parse HEAD)/s2-docs DIST_DIR=dist/$$(git rev-parse HEAD)/s2-docs $(MAKE) build-s2-docs
+
+s2-docs-production:
+	PUBLIC_URL=https://react-spectrum.adobe.com/beta DIST_DIR=dist/production/docs/beta $(MAKE) build-s2-docs
+
+build-s2-docs:
 	yarn workspace @react-spectrum/s2-docs generate:md
 	yarn workspace @react-spectrum/s2-docs generate:og
-	REGISTRY_URL=https://reactspectrum.blob.core.windows.net/reactspectrum/$$(git rev-parse HEAD)/s2-docs/registry node scripts/buildRegistry.mjs
-	REGISTRY_URL=https://reactspectrum.blob.core.windows.net/reactspectrum/$$(git rev-parse HEAD)/s2-docs/registry yarn build:s2-docs --public-url /reactspectrum/$$(git rev-parse HEAD)/s2-docs/
-	mkdir -p dist/$$(git rev-parse HEAD)
-	mv packages/dev/s2-docs/dist dist/$$(git rev-parse HEAD)/s2-docs
-	mkdir -p dist/$$(git rev-parse HEAD)/s2-docs/registry
-	mv starters/docs/registry dist/$$(git rev-parse HEAD)/s2-docs/registry/vanilla
-	mv starters/tailwind/registry dist/$$(git rev-parse HEAD)/s2-docs/registry/tailwind
+	REGISTRY_URL=$(PUBLIC_URL)/registry node scripts/buildRegistry.mjs
+	REGISTRY_URL=$(PUBLIC_URL)/registry yarn build:s2-docs --public-url $(PUBLIC_URL)
+	mkdir -p $(DIST_DIR)
+	mv packages/dev/s2-docs/dist/* $(DIST_DIR)
+	mkdir -p $(DIST_DIR)/registry
+	mv starters/docs/registry $(DIST_DIR)/registry/vanilla
+	mv starters/tailwind/registry $(DIST_DIR)/registry/tailwind

babel-esm.config.json

@@ -23,11 +23,6 @@
         ]
       ]
     },
-    "cover": {
-      "plugins": [
-        "istanbul"
-      ]
-    },
     "production": {
       "plugins": [
         [

babel.config.json

@@ -22,11 +22,6 @@
         ]
       ]
     },
-    "cover": {
-      "plugins": [
-        "istanbul"
-      ]
-    },
     "production": {
       "plugins": [
         [