code · pull · Feb 20, 2026 · Feb 20, 2026
diff --git a/.chromatic-fc/custom-addons/chromatic/index.js b/.chromatic-fc/custom-addons/chromatic/index.js
@@ -1,5 +1,5 @@
 import {expressThemes, locales, S2ColorThemes, scales, themes} from '../../constants';
-import {makeDecorator} from '@storybook/preview-api';
+import {makeDecorator} from 'storybook/preview-api';
 import {Provider, View} from '@adobe/react-spectrum';
 import {Provider as S2Provider} from '@react-spectrum/s2';
 import React, {useEffect} from 'react';

diff --git a/.chromatic-fc/main.js b/.chromatic-fc/main.js
@@ -9,7 +9,7 @@ module.exports = {
     '../packages/@react-spectrum/s2/chromatic/*.stories.@(js|jsx|mjs|ts|tsx)'
   ],
   addons: process.env.NODE_ENV === 'production' ? [] : [
-    '@storybook/addon-actions',
+    'storybook/actions',
     '@storybook/addon-a11y'
   ],
   typescript: {

diff --git a/.chromatic-fc/manager.js b/.chromatic-fc/manager.js
@@ -1,4 +1,4 @@
-import {addons} from '@storybook/manager-api';
+import {addons} from 'storybook/manager-api';
 
 addons.setConfig({
   enableShortcuts: false,

diff --git a/.chromatic-fc/preview.js b/.chromatic-fc/preview.js
@@ -1,4 +1,4 @@
-import {configureActions} from '@storybook/addon-actions';
+import {configureActions} from 'storybook/actions';
 import React from 'react';
 import {VerticalCenter} from './layout';
 import {withChromaticProvider} from './custom-addons/chromatic';

diff --git a/.chromatic/custom-addons/chromatic/index.js b/.chromatic/custom-addons/chromatic/index.js
@@ -1,5 +1,5 @@
 import {expressThemes, locales, S2Backgrounds, S2ColorThemes, scales, themes} from '../../constants';
-import {makeDecorator} from '@storybook/preview-api';
+import {makeDecorator} from 'storybook/preview-api';
 import {Provider, View} from '@adobe/react-spectrum';
 import {Provider as S2Provider} from '@react-spectrum/s2';
 import React, {useEffect} from 'react';

diff --git a/.chromatic/main.js b/.chromatic/main.js
@@ -9,7 +9,7 @@ module.exports = {
     '../packages/@react-spectrum/s2/chromatic/*.stories.@(js|jsx|mjs|ts|tsx)'
   ],
   addons: process.env.NODE_ENV === 'production' ? [] : [
-    '@storybook/addon-actions',
+    'storybook/actions',
     '@storybook/addon-a11y'
   ],
   typescript: {

diff --git a/.chromatic/manager.js b/.chromatic/manager.js
@@ -1,4 +1,4 @@
-import {addons} from '@storybook/manager-api';
+import {addons} from 'storybook/manager-api';
 
 addons.setConfig({
   enableShortcuts: false,

diff --git a/.chromatic/preview.js b/.chromatic/preview.js
@@ -1,4 +1,4 @@
-import {configureActions} from '@storybook/addon-actions';
+import {configureActions} from 'storybook/actions';
 import React from 'react';
 import {VerticalCenter} from './layout';
 import {withChromaticProvider} from './custom-addons/chromatic';

diff --git a/.circleci/comment.js b/.circleci/comment.js
@@ -41,7 +41,7 @@ async function run() {
             break;
           }
         }
-      } else if (process.env.CIRCLE_BRANCH === 'main') {
+      } else if (!process.env.CIRCLE_PULL_REQUEST) {
         // If it isn't a PR commit, then we are on main. Create a comment for the test app and docs build
         await octokit.repos.createCommitComment({
           owner: 'adobe',

diff --git a/.storybook-s2/custom-addons/provider/index.js b/.storybook-s2/custom-addons/provider/index.js
@@ -1,6 +1,5 @@
 import React, {useEffect, useState} from 'react';
-import {addons} from '@storybook/preview-api';
-import {makeDecorator} from '@storybook/preview-api';
+import {addons, makeDecorator} from 'storybook/preview-api';
 // Importing from src so that HMR works.
 // Without this, all HMR updates will bubble through the index.ts and up
 // to the root instead of stopping at the story files.

diff --git a/.storybook-s2/custom-addons/provider/register.js b/.storybook-s2/custom-addons/provider/register.js
@@ -1,5 +1,5 @@
 
-import {addons, types} from '@storybook/manager-api';
+import {addons, types} from 'storybook/manager-api';
 import {locales} from '../../constants';
 import React, {useEffect, useState} from 'react';
 

diff --git a/.storybook-s2/main.ts b/.storybook-s2/main.ts
@@ -1,4 +1,4 @@
-import type { StorybookConfig } from "@storybook/types";
+import type { StorybookConfig } from "storybook/internal/types";
 
 // const excludedProps = new Set([
 //   'id',
@@ -20,12 +20,10 @@ const config: StorybookConfig = {
     "../packages/@react-spectrum/s2/stories/*.stories.@(js|jsx|mjs|ts|tsx)",
   ],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
     './custom-addons/provider/register',
     // "@storybook/addon-styling-webpack",
-    "storybook-dark-mode",
+    "@storybook/addon-docs",
+    "@vueless/storybook-dark-mode",
     "@storybook/addon-a11y",
   ],
   framework: {

diff --git a/.storybook-s2/manager.js b/.storybook-s2/manager.js
@@ -1,4 +1,4 @@
-import {addons} from '@storybook/manager-api';
+import {addons} from 'storybook/manager-api';
 
 addons.setConfig({
   enableShortcuts: false

diff --git a/.storybook-s2/preview.tsx b/.storybook-s2/preview.tsx
@@ -1,12 +1,11 @@
 import '@react-spectrum/s2/page.css';
-import { themes } from '@storybook/theming';
-import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
-import { store } from 'storybook-dark-mode/dist/esm/Tool';
-import { addons } from '@storybook/preview-api';
-import { DocsContainer } from '@storybook/addon-docs';
+import { themes } from 'storybook/theming';
+import { DARK_MODE_EVENT_NAME } from '@vueless/storybook-dark-mode';
+import { store } from '@vueless/storybook-dark-mode/dist/esm/Tool';
+import { addons } from 'storybook/preview-api';
 import React, { useEffect, useState } from 'react';
 import {withProviderSwitcher} from './custom-addons/provider';
-import {Controls, Description, Primary, Stories, Subtitle, Title} from '@storybook/blocks';
+import {DocsContainer, Controls, Description, Primary, Stories, Subtitle, Title} from '@storybook/addon-docs/blocks';
 import './global.css';
 
 const channel = addons.getChannel();
@@ -30,6 +29,7 @@ const preview = {
         var style = getComputedStyle(document.body)
         return <DocsContainer {...props} theme={{...(dark ? themes.dark : themes.light), appContentBg: style.getPropertyValue('--s2-container-bg').trim()}} />;
       },
+      codePanel: true,
       source: {
         // code: null, // Will disable code button, and show "No code available"
         transform: (code: string, ctx) => {
@@ -43,7 +43,8 @@ const preview = {
           return code;
         }
       },
-      page: () => (
+      page: () => {
+        return (
         <>
           <Title />
           <Subtitle />
@@ -52,7 +53,7 @@ const preview = {
           <Controls />
           <Stories includePrimary={false} />
         </>
-      )
+      )}
     },
     darkMode: {
       light: {

diff --git a/.storybook/custom-addons/descriptions/register.js b/.storybook/custom-addons/descriptions/register.js
@@ -1,5 +1,5 @@
-import {addons, types, useParameter} from '@storybook/manager-api';
-import { AddonPanel } from '@storybook/components';
+import {addons, types, useParameter} from 'storybook/manager-api';
+import { AddonPanel } from 'storybook/internal/components';
 import React from 'react';
 
 const ADDON_ID = 'descriptionAddon';

diff --git a/.storybook/custom-addons/provider/index.js b/.storybook/custom-addons/provider/index.js
@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from 'react';
-import {addons} from '@storybook/preview-api';
-import {makeDecorator} from '@storybook/preview-api';
+import {addons} from 'storybook/preview-api';
+import {makeDecorator} from 'storybook/preview-api';
 import {Provider} from '@react-spectrum/provider';
 import {expressThemes, themes, defaultTheme} from '../../constants';
 

diff --git a/.storybook/custom-addons/provider/register.js b/.storybook/custom-addons/provider/register.js
@@ -1,4 +1,4 @@
-import {addons, types} from '@storybook/manager-api';
+import {addons, types} from 'storybook/manager-api';
 import {locales} from '../../constants';
 import React, {useEffect, useState} from 'react';
 

diff --git a/.storybook/custom-addons/scrolling/index.js b/.storybook/custom-addons/scrolling/index.js
@@ -1,4 +1,4 @@
-import {addons} from '@storybook/preview-api';
+import {addons} from 'storybook/preview-api';
 import clsx from 'clsx';
 import React, {useEffect, useState} from 'react';
 

diff --git a/.storybook/custom-addons/scrolling/register.js b/.storybook/custom-addons/scrolling/register.js
@@ -1,4 +1,4 @@
-import {addons, types} from '@storybook/manager-api';
+import {addons, types} from 'storybook/manager-api';
 import React, {useEffect, useState} from 'react';
 
 const ScrollingToolbar = ({api}) => {

diff --git a/.storybook/custom-addons/strictmode/index.js b/.storybook/custom-addons/strictmode/index.js
@@ -1,4 +1,4 @@
-import {addons, makeDecorator} from '@storybook/preview-api';
+import {addons, makeDecorator} from 'storybook/preview-api';
 import React, {StrictMode, useEffect, useState} from 'react';
 
 function StrictModeDecorator(props) {

diff --git a/.storybook/custom-addons/strictmode/register.js b/.storybook/custom-addons/strictmode/register.js
@@ -1,4 +1,4 @@
-import {addons, types} from '@storybook/manager-api';
+import {addons, types} from 'storybook/manager-api';
 import React, {useEffect, useState} from 'react';
 
 const StrictModeToolBar = ({api}) => {

diff --git a/.storybook/custom-addons/theme/register.js b/.storybook/custom-addons/theme/register.js
@@ -1,6 +1,6 @@
-import {themes} from '@storybook/theming';
-import {addons} from '@storybook/manager-api';
-import {FORCE_RE_RENDER} from '@storybook/core-events';
+import {themes} from 'storybook/theming';
+import {addons} from 'storybook/manager-api';
+import {FORCE_RE_RENDER} from 'storybook/internal/core-events';
 // temporary until we have a better place to grab it from
 import * as packageJSON from '../../../packages/@adobe/react-spectrum/package.json';
 

diff --git a/.storybook/main.js b/.storybook/main.js
@@ -7,10 +7,9 @@ module.exports = {
   ],
 
   addons: [
-    "@storybook/addon-actions",
-    "@storybook/addon-a11y",
-    "@storybook/addon-controls",
-    "storybook-dark-mode",
+    'storybook/actions',
+    '@storybook/addon-a11y',
+    '@vueless/storybook-dark-mode',
     './custom-addons/provider/register.js',
     './custom-addons/descriptions/register.js',
     './custom-addons/theme/register.js',
@@ -24,8 +23,8 @@ module.exports = {
   },
 
   framework: {
-    name: "storybook-react-parcel",
-    options: {},
+    name: 'storybook-react-parcel',
+    options: {}
   },
 
   core: {

diff --git a/.storybook/manager.js b/.storybook/manager.js
@@ -1,4 +1,4 @@
-import {addons} from '@storybook/manager-api';
+import {addons} from 'storybook/manager-api';
 
 addons.setConfig({
   enableShortcuts: false,

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,4 +1,4 @@
-import {configureActions} from '@storybook/addon-actions';
+import {configureActions} from 'storybook/actions';
 import React from 'react';
 import {withProviderSwitcher} from './custom-addons/provider';
 import {withScrollingSwitcher} from './custom-addons/scrolling';

diff --git a/.storybook/test-runner.js b/.storybook/test-runner.js
@@ -1,5 +1,5 @@
 const {configureAxe, checkA11y, injectAxe} = require('axe-playwright');
-const {getStoryContext} = require('@storybook/test-runner');
+const {getStoryContext} = require('storybook/test-runner');
 
 
 /*

diff --git a/.yarn/patches/@storybook-addon-a11y-npm-8.6.14-2119c57a0f.patch b/.yarn/patches/@storybook-addon-a11y-npm-8.6.14-2119c57a0f.patch
diff --git a/.yarn/patches/@storybook-addon-docs-npm-8.6.14-12ab3f55f8.patch b/.yarn/patches/@storybook-addon-docs-npm-8.6.14-12ab3f55f8.patch
diff --git a/.yarn/patches/@storybook-react-npm-8.6.14-bc3fc2208a.patch b/.yarn/patches/@storybook-react-npm-8.6.14-bc3fc2208a.patch
diff --git a/package.json b/package.json
@@ -116,18 +116,11 @@
     "@react-spectrum/s2-icon-builder": "^0.3.0",
     "@spectrum-css/component-builder": "workspace:^",
     "@spectrum-css/vars": "^2.3.0",
-    "@storybook/addon-a11y": "patch:@storybook/addon-a11y@npm%3A8.6.14#~/.yarn/patches/@storybook-addon-a11y-npm-8.6.14-2119c57a0f.patch",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-jest": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
-    "@storybook/addon-onboarding": "^8.6.14",
-    "@storybook/addon-themes": "^8.6.14",
-    "@storybook/components": "^8.6.14",
-    "@storybook/manager-api": "^8.6.14",
-    "@storybook/preview": "^8.6.14",
-    "@storybook/preview-api": "^8.6.14",
-    "@storybook/react": "^8.6.14",
+    "@storybook/addon-a11y": "^9.0.18",
+    "@storybook/addon-docs": "^9.0.18",
+    "@storybook/addon-jest": "^9.0.18",
+    "@storybook/addon-themes": "^9.0.18",
+    "@storybook/react": "^9.0.18",
     "@storybook/test-runner": "^0.22.0",
     "@stylistic/eslint-plugin-ts": "^2.9.0",
     "@swc/core": "^1.3.36",
@@ -140,6 +133,7 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@typescript/native-preview": "^7.0.0-dev.20251223.1",
+    "@vueless/storybook-dark-mode": "^9.0.6",
     "@yarnpkg/types": "^4.0.0",
     "autoprefixer": "^9.6.0",
     "axe-playwright": "^1.1.11",
@@ -199,8 +193,7 @@
     "rimraf": "^6.0.1",
     "shadow-dom-testing-library": "^1.13.1",
     "sharp": "^0.33.5",
-    "storybook": "^8.6.14",
-    "storybook-dark-mode": "^4.0.2",
+    "storybook": "^9.0.18",
     "storybook-react-parcel": "workspace:^",
     "tailwind-variants": "patch:tailwind-variants@npm%3A0.3.1#~/.yarn/patches/tailwind-variants-npm-0.3.1-48888516de.patch",
     "tailwindcss": "^4.0.0",
@@ -236,8 +229,6 @@
     "@types/node@npm:*": "^24",
     "@types/node@npm:^18.0.0": "^24",
     "@types/node@npm:>= 8": "^24",
-    "@storybook/addon-docs@npm:8.6.14": "patch:@storybook/addon-docs@npm%3A8.6.14#~/.yarn/patches/@storybook-addon-docs-npm-8.6.14-12ab3f55f8.patch",
-    "@storybook/react": "patch:@storybook/react@npm%3A8.6.14#~/.yarn/patches/@storybook-react-npm-8.6.14-bc3fc2208a.patch",
     "micromark-extension-mdxjs": "patch:micromark-extension-mdxjs@npm%3A1.0.0#~/.yarn/patches/micromark-extension-mdxjs-npm-1.0.0-d2b6b69e4a.patch",
     "remark-mdx": "patch:remark-mdx@npm%3A2.0.0-rc.2#~/.yarn/patches/remark-mdx-npm-2.0.0-rc.2-7a71234e1f.patch",
     "remark-parse": "patch:remark-parse@npm%3A10.0.1#~/.yarn/patches/remark-parse-npm-10.0.1-e654d7df78.patch",

diff --git a/packages/@react-aria/checkbox/stories/useCheckbox.stories.tsx b/packages/@react-aria/checkbox/stories/useCheckbox.stories.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {action} from '@storybook/addon-actions';
+import {action} from 'storybook/actions';
 import {AriaCheckboxProps, useCheckbox} from '../';
 import React from 'react';
 import {StoryObj} from '@storybook/react';

diff --git a/packages/@react-aria/dnd/stories/DroppableListBox.tsx b/packages/@react-aria/dnd/stories/DroppableListBox.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {action} from '@storybook/addon-actions';
+import {action} from 'storybook/actions';
 import {chain, mergeProps} from '@react-aria/utils';
 import {classNames} from '@react-spectrum/utils';
 import dndStyles from './dnd.css';

diff --git a/packages/@react-aria/dnd/stories/Reorderable.tsx b/packages/@react-aria/dnd/stories/Reorderable.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {action} from '@storybook/addon-actions';
+import {action} from 'storybook/actions';
 import {chain, mergeProps, useId} from '@react-aria/utils';
 import {classNames} from '@react-spectrum/utils';
 import dndStyles from './dnd.css';

diff --git a/packages/@react-aria/dnd/stories/VirtualizedListBox.tsx b/packages/@react-aria/dnd/stories/VirtualizedListBox.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {action} from '@storybook/addon-actions';
+import {action} from 'storybook/actions';
 import {chain, mergeProps} from '@react-aria/utils';
 import {classNames} from '@react-spectrum/utils';
 import dndStyles from './dnd.css';

diff --git a/packages/@react-aria/dnd/stories/dnd.stories.tsx b/packages/@react-aria/dnd/stories/dnd.stories.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {action} from '@storybook/addon-actions';
+import {action} from 'storybook/actions';
 import {ActionButton} from '@react-spectrum/button';
 import {ActionGroup} from '@react-spectrum/actiongroup';
 import {chain, mergeProps, useId} from '@react-aria/utils';

diff --git a/packages/@react-aria/interactions/stories/useInteractOutside.stories.tsx b/packages/@react-aria/interactions/stories/useInteractOutside.stories.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {action} from '@storybook/addon-actions';
+import {action} from 'storybook/actions';
 import React, {JSX, useEffect, useRef} from 'react';
 import {StoryObj} from '@storybook/react';
 import {useInteractOutside, usePress} from '../';

diff --git a/packages/@react-aria/interactions/stories/useMove.stories.tsx b/packages/@react-aria/interactions/stories/useMove.stories.tsx
@@ -12,7 +12,7 @@
 
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
 
-import {action} from '@storybook/addon-actions';
+import {action} from 'storybook/actions';
 import {clamp} from '@react-aria/utils';
 import {Flex} from '@react-spectrum/layout';
 import React, {JSX, useRef, useState} from 'react';