From 66fb449685642b47fb17305df3547c34ec5e56dc Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Mon, 16 Dec 2024 15:06:07 +0100
Subject: [PATCH 01/20] Addon A11y: Refactor results handling and update
 configuration management in TestManager

---
 .../src/components/TestProviderRender.tsx     | 26 ++++++++++++-----
 code/addons/test/src/constants.ts             |  1 +
 code/addons/test/src/node/reporter.ts         |  1 +
 code/addons/test/src/node/test-manager.ts     | 28 +++++++++++--------
 code/addons/test/src/node/vitest-manager.ts   |  4 +--
 5 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/code/addons/test/src/components/TestProviderRender.tsx b/code/addons/test/src/components/TestProviderRender.tsx
index 0c1185ab6f2a..c813b4633f79 100644
--- a/code/addons/test/src/components/TestProviderRender.tsx
+++ b/code/addons/test/src/components/TestProviderRender.tsx
@@ -136,12 +136,14 @@ export const TestProviderRender: FC<
       return 'unknown';
     }
 
-    if (!a11yResults) {
+    const definedA11yResults = a11yResults?.filter(Boolean) ?? [];
+
+    if (!definedA11yResults || definedA11yResults.length === 0) {
       return 'unknown';
     }
 
-    const failed = a11yResults.some((result) => result?.status === 'failed');
-    const warning = a11yResults.some((result) => result?.status === 'warning');
+    const failed = definedA11yResults.some((result) => result?.status === 'failed');
+    const warning = definedA11yResults.some((result) => result?.status === 'warning');
 
     if (failed) {
       return 'negative';
@@ -152,9 +154,15 @@ export const TestProviderRender: FC<
     return 'positive';
   }, [state.running, isA11yAddon, config.a11y, a11yResults]);
 
-  const a11yNotPassedAmount = a11yResults?.filter(
-    (result) => result?.status === 'failed' || result?.status === 'warning'
-  ).length;
+  const a11yNotPassedAmount = state.config?.a11y
+    ? a11yResults?.filter((result) => result?.status === 'failed' || result?.status === 'warning')
+        .length
+    : undefined;
+
+  const a11ySkippedAmount =
+    state.running || !state?.details.config?.a11y || !state.config.a11y
+      ? null
+      : a11yResults?.filter((result) => !result).length;
 
   const storyId = entryId?.includes('--') ? entryId : undefined;
   const results = (state.details?.testResults || [])
@@ -324,7 +332,11 @@ export const TestProviderRender: FC<
           )}
           {isA11yAddon && (
             <ListItem
-              title={<ItemTitle enabled={config.a11y}>Accessibility</ItemTitle>}
+              title={
+                <ItemTitle enabled={config.a11y}>
+                  Accessibility {a11ySkippedAmount ? `(${a11ySkippedAmount} skipped)` : ''}
+                </ItemTitle>
+              }
               onClick={
                 (a11yStatus === 'negative' || a11yStatus === 'warning') && a11yResults.length
                   ? () => {
diff --git a/code/addons/test/src/constants.ts b/code/addons/test/src/constants.ts
index 0453930e3758..d57ff1b1da8a 100644
--- a/code/addons/test/src/constants.ts
+++ b/code/addons/test/src/constants.ts
@@ -19,6 +19,7 @@ export interface Config {
 
 export type Details = {
   testResults: TestResult[];
+  config: Config;
   coverageSummary?: {
     status: 'positive' | 'warning' | 'negative' | 'unknown';
     percentage: number;
diff --git a/code/addons/test/src/node/reporter.ts b/code/addons/test/src/node/reporter.ts
index 43191cbc2fdc..ecda9ab4a672 100644
--- a/code/addons/test/src/node/reporter.ts
+++ b/code/addons/test/src/node/reporter.ts
@@ -173,6 +173,7 @@ export class StorybookReporter implements Reporter {
       } as TestingModuleProgressReportProgress,
       details: {
         testResults,
+        config: this.testManager.config,
       },
     };
   }
diff --git a/code/addons/test/src/node/test-manager.ts b/code/addons/test/src/node/test-manager.ts
index 4770f2b5a174..54b0c9cca781 100644
--- a/code/addons/test/src/node/test-manager.ts
+++ b/code/addons/test/src/node/test-manager.ts
@@ -18,9 +18,11 @@ import { VitestManager } from './vitest-manager';
 export class TestManager {
   vitestManager: VitestManager;
 
-  watchMode = false;
-
-  coverage = false;
+  config = {
+    watchMode: false,
+    coverage: false,
+    a11y: false,
+  };
 
   constructor(
     private channel: Channel,
@@ -44,13 +46,17 @@ export class TestManager {
       return;
     }
 
+    this.config = {
+      ...this.config,
+      ...payload.config,
+    } satisfies Config;
+
     process.env.VITEST_STORYBOOK_CONFIG = JSON.stringify(payload.config);
 
-    if (this.coverage !== payload.config.coverage) {
-      this.coverage = payload.config.coverage;
+    if (this.config.coverage !== payload.config.coverage) {
       try {
         await this.vitestManager.restartVitest({
-          coverage: this.coverage,
+          coverage: this.config.coverage,
         });
       } catch (e) {
         const isV8 = e.message?.includes('@vitest/coverage-v8');
@@ -69,7 +75,7 @@ export class TestManager {
     if (payload.providerId !== TEST_PROVIDER_ID) {
       return;
     }
-    this.watchMode = payload.watchMode;
+    this.config.watchMode = payload.watchMode;
 
     if (payload.config) {
       this.handleConfigChange({
@@ -78,14 +84,14 @@ export class TestManager {
       });
     }
 
-    if (this.coverage) {
+    if (this.config.coverage) {
       try {
         if (payload.watchMode) {
           // if watch mode is toggled on and coverage is already enabled, restart vitest without coverage to automatically disable it
           await this.vitestManager.restartVitest({ coverage: false });
         } else {
           // if watch mode is toggled off and coverage is already enabled, restart vitest with coverage to automatically re-enable it
-          await this.vitestManager.restartVitest({ coverage: this.coverage });
+          await this.vitestManager.restartVitest({ coverage: this.config.coverage });
         }
       } catch (e) {
         this.reportFatalError('Failed to change watch mode while coverage was enabled', e);
@@ -111,7 +117,7 @@ export class TestManager {
         as a coverage report for a subset of stories is not useful.
       */
       const temporarilyDisableCoverage =
-        this.coverage && !this.watchMode && (payload.storyIds ?? []).length > 0;
+        this.config.coverage && !this.config.watchMode && (payload.storyIds ?? []).length > 0;
       if (temporarilyDisableCoverage) {
         await this.vitestManager.restartVitest({
           coverage: false,
@@ -124,7 +130,7 @@ export class TestManager {
 
       if (temporarilyDisableCoverage) {
         // Re-enable coverage if it was temporarily disabled because of a subset of stories was run
-        await this.vitestManager.restartVitest({ coverage: this.coverage });
+        await this.vitestManager.restartVitest({ coverage: this.config.coverage });
       }
     } catch (e) {
       this.reportFatalError('Failed to run tests', e);
diff --git a/code/addons/test/src/node/vitest-manager.ts b/code/addons/test/src/node/vitest-manager.ts
index d55d3bc6d5b1..7b786d6caa3b 100644
--- a/code/addons/test/src/node/vitest-manager.ts
+++ b/code/addons/test/src/node/vitest-manager.ts
@@ -193,7 +193,7 @@ export class VitestManager {
           this.filterStories(story, spec.moduleId, { include, exclude, skip })
         );
         if (matches.length) {
-          if (!this.testManager.watchMode) {
+          if (!this.testManager.config.watchMode) {
             // Clear the file cache if watch mode is not enabled
             this.updateLastChanged(spec.moduleId);
           }
@@ -314,7 +314,7 @@ export class VitestManager {
 
     // when watch mode is disabled, don't trigger any tests (below)
     // but still invalidate the cache for the changed file, which is handled above
-    if (!this.testManager.watchMode) {
+    if (!this.testManager.config.watchMode) {
       return;
     }
     await this.runAffectedTests(file);

From 00c1dac9b13e7b5b0bcd58bfc4b0aec00ec59074 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Mon, 16 Dec 2024 15:24:47 +0100
Subject: [PATCH 02/20] Addon A11y: Improve accessibility skipped tests label
 formatting

---
 .../test/src/components/TestProviderRender.tsx      | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/code/addons/test/src/components/TestProviderRender.tsx b/code/addons/test/src/components/TestProviderRender.tsx
index 5ee38846039c..c18ac608dde9 100644
--- a/code/addons/test/src/components/TestProviderRender.tsx
+++ b/code/addons/test/src/components/TestProviderRender.tsx
@@ -166,7 +166,14 @@ export const TestProviderRender: FC<
       ? null
       : a11yResults?.filter((result) => !result).length;
 
+  const a11ySkippedLabel = a11ySkippedAmount
+    ? a11ySkippedAmount === 1 && isStoryEntry
+      ? '(skipped)'
+      : `(${a11ySkippedAmount} skipped)`
+    : '';
+
   const storyId = isStoryEntry ? entryId : undefined;
+
   const results = (state.details?.testResults || [])
     .flatMap((test) => {
       if (!entryId) {
@@ -334,11 +341,7 @@ export const TestProviderRender: FC<
           )}
           {isA11yAddon && (
             <ListItem
-              title={
-                <ItemTitle enabled={config.a11y}>
-                  Accessibility {a11ySkippedAmount ? `(${a11ySkippedAmount} skipped)` : ''}
-                </ItemTitle>
-              }
+              title={<ItemTitle enabled={config.a11y}>Accessibility {a11ySkippedLabel}</ItemTitle>}
               onClick={
                 (a11yStatus === 'negative' || a11yStatus === 'warning') && a11yResults.length
                   ? () => {

From ec84de995affe1ab4b71906d2759f2d0dda9c2b8 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Mon, 16 Dec 2024 15:35:04 +0100
Subject: [PATCH 03/20] Fix tests and types

---
 .../components/TestProviderRender.stories.tsx    | 16 ++++++++++++++++
 code/addons/test/src/node/test-manager.test.ts   | 14 +++++++-------
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/code/addons/test/src/components/TestProviderRender.stories.tsx b/code/addons/test/src/components/TestProviderRender.stories.tsx
index dead913949cf..e733f7b538ab 100644
--- a/code/addons/test/src/components/TestProviderRender.stories.tsx
+++ b/code/addons/test/src/components/TestProviderRender.stories.tsx
@@ -162,6 +162,10 @@ export const WithCoverageWarning: Story = {
       ...baseState,
       details: {
         testResults: [],
+        config: {
+          a11y: false,
+          coverage: true,
+        },
         coverageSummary: {
           percentage: 50,
           status: 'warning',
@@ -182,6 +186,10 @@ export const WithCoveragePositive: Story = {
       ...baseState,
       details: {
         testResults: [],
+        config: {
+          a11y: false,
+          coverage: true,
+        },
         coverageSummary: {
           percentage: 80,
           status: 'positive',
@@ -206,6 +214,10 @@ export const Editing: Story = {
       },
       details: {
         testResults: [],
+        config: {
+          a11y: false,
+          coverage: false,
+        },
       },
     },
   },
@@ -229,6 +241,10 @@ export const EditingAndWatching: Story = {
       },
       details: {
         testResults: [],
+        config: {
+          a11y: true,
+          coverage: true, // should be automatically disabled in the UI
+        },
       },
     },
   },
diff --git a/code/addons/test/src/node/test-manager.test.ts b/code/addons/test/src/node/test-manager.test.ts
index db77ab2f3e2e..7056aee5666b 100644
--- a/code/addons/test/src/node/test-manager.test.ts
+++ b/code/addons/test/src/node/test-manager.test.ts
@@ -105,11 +105,11 @@ describe('TestManager', () => {
 
   it('should handle watch mode request', async () => {
     const testManager = await TestManager.start(mockChannel, options);
-    expect(testManager.watchMode).toBe(false);
+    expect(testManager.config.watchMode).toBe(false);
     expect(createVitest).toHaveBeenCalledTimes(1);
 
     await testManager.handleWatchModeRequest({ providerId: TEST_PROVIDER_ID, watchMode: true });
-    expect(testManager.watchMode).toBe(true);
+    expect(testManager.config.watchMode).toBe(true);
     expect(createVitest).toHaveBeenCalledTimes(1); // shouldn't restart vitest
   });
 
@@ -149,7 +149,7 @@ describe('TestManager', () => {
 
   it('should handle coverage toggling', async () => {
     const testManager = await TestManager.start(mockChannel, options);
-    expect(testManager.coverage).toBe(false);
+    expect(testManager.config.coverage).toBe(false);
     expect(createVitest).toHaveBeenCalledTimes(1);
     createVitest.mockClear();
 
@@ -157,7 +157,7 @@ describe('TestManager', () => {
       providerId: TEST_PROVIDER_ID,
       config: { coverage: true, a11y: false },
     });
-    expect(testManager.coverage).toBe(true);
+    expect(testManager.config.coverage).toBe(true);
     expect(createVitest).toHaveBeenCalledTimes(1);
     createVitest.mockClear();
 
@@ -165,21 +165,21 @@ describe('TestManager', () => {
       providerId: TEST_PROVIDER_ID,
       config: { coverage: false, a11y: false },
     });
-    expect(testManager.coverage).toBe(false);
+    expect(testManager.config.coverage).toBe(false);
     expect(createVitest).toHaveBeenCalledTimes(1);
   });
 
   it('should temporarily disable coverage on focused tests', async () => {
     vitest.globTestSpecs.mockImplementation(() => tests);
     const testManager = await TestManager.start(mockChannel, options);
-    expect(testManager.coverage).toBe(false);
+    expect(testManager.config.coverage).toBe(false);
     expect(createVitest).toHaveBeenCalledTimes(1);
 
     await testManager.handleConfigChange({
       providerId: TEST_PROVIDER_ID,
       config: { coverage: true, a11y: false },
     });
-    expect(testManager.coverage).toBe(true);
+    expect(testManager.config.coverage).toBe(true);
     expect(createVitest).toHaveBeenCalledTimes(2);
 
     await testManager.handleRunRequest({

From 63651165c2e5d020b2ab1d8577eeb39995399a03 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Mon, 16 Dec 2024 15:39:26 +0100
Subject: [PATCH 04/20] Fix story

---
 .../test/src/components/TestProviderRender.stories.tsx    | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/code/addons/test/src/components/TestProviderRender.stories.tsx b/code/addons/test/src/components/TestProviderRender.stories.tsx
index e733f7b538ab..1189248f3d53 100644
--- a/code/addons/test/src/components/TestProviderRender.stories.tsx
+++ b/code/addons/test/src/components/TestProviderRender.stories.tsx
@@ -52,6 +52,10 @@ const baseState: TestProviderState<Details, Config> = {
     coverage: false,
   },
   details: {
+    config: {
+      a11y: false,
+      coverage: false,
+    },
     testResults: [
       {
         endTime: 0,
@@ -141,6 +145,10 @@ export const WithCoverageNegative: Story = {
       ...config,
       ...baseState,
       details: {
+        config: {
+          a11y: false,
+          coverage: true,
+        },
         testResults: [],
         coverageSummary: {
           percentage: 20,

From c56e34a16c320b4d45f4ff369046d942c8b70b53 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Mon, 16 Dec 2024 21:17:16 +0100
Subject: [PATCH 05/20] Float context menu button on top of story title and
 replace transparent backgrounds to make it look good

---
 .../components/sidebar/StatusButton.tsx       | 20 ++++++++++++++++++-
 .../src/manager/components/sidebar/Tree.tsx   | 20 +++++++++++++++----
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/code/core/src/manager/components/sidebar/StatusButton.tsx b/code/core/src/manager/components/sidebar/StatusButton.tsx
index 9d1b49998df7..732838e043a7 100644
--- a/code/core/src/manager/components/sidebar/StatusButton.tsx
+++ b/code/core/src/manager/components/sidebar/StatusButton.tsx
@@ -3,7 +3,7 @@ import { styled } from '@storybook/core/theming';
 import type { API_StatusValue } from '@storybook/types';
 
 import type { Theme } from '@emotion/react';
-import { transparentize } from 'polished';
+import { darken, lighten, transparentize } from 'polished';
 
 const withStatusColor = ({ theme, status }: { theme: Theme; status: API_StatusValue }) => {
   const defaultColor =
@@ -34,15 +34,33 @@ export const StatusButton = styled(IconButton)<{
 }>(
   withStatusColor,
   ({ theme, height, width }) => ({
+    position: 'absolute',
+    right: 0,
+    top: 0,
     transition: 'none',
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
     width: width || 28,
     height: height || 28,
+    background: 'var(--tree-node-background-hover)',
+    boxShadow: '0 0 5px 5px var(--tree-node-background-hover)',
 
     '&:hover': {
       color: theme.color.secondary,
+      background:
+        theme.base === 'dark'
+          ? darken(0.3, theme.color.secondary)
+          : lighten(0.4, theme.color.secondary),
+    },
+
+    '[data-selected="true"] &': {
+      background: theme.color.secondary,
+      boxShadow: `0 0 5px 5px ${theme.color.secondary}`,
+
+      '&:hover': {
+        background: lighten(0.1, theme.color.secondary),
+      },
     },
 
     '&:focus': {
diff --git a/code/core/src/manager/components/sidebar/Tree.tsx b/code/core/src/manager/components/sidebar/Tree.tsx
index d08ab8ffc4d7..62c9774dc991 100644
--- a/code/core/src/manager/components/sidebar/Tree.tsx
+++ b/code/core/src/manager/components/sidebar/Tree.tsx
@@ -24,9 +24,10 @@ import type {
   StoryEntry,
 } from '@storybook/core/manager-api';
 
-import { transparentize } from 'polished';
+import { darken, lighten } from 'polished';
 
 import type { Link } from '../../../components/components/tooltip/TooltipLinkList';
+import { MEDIA_DESKTOP_BREAKPOINT } from '../../constants';
 import { getGroupStatus, getHighestStatus, statusMapping } from '../../utils/status';
 import {
   createId,
@@ -66,7 +67,7 @@ const CollapseButton = styled.button(({ theme }) => ({
 
   '&:hover, &:focus': {
     outline: 'none',
-    background: transparentize(0.93, theme.color.secondary),
+    background: 'var(--tree-node-background-hover)',
   },
 }));
 
@@ -79,9 +80,19 @@ export const LeafNodeStyleWrapper = styled.div(({ theme }) => ({
   background: 'transparent',
   minHeight: 28,
   borderRadius: 4,
+  overflow: 'hidden',
+  '--tree-node-background-hover': theme.background.content,
+
+  [MEDIA_DESKTOP_BREAKPOINT]: {
+    '--tree-node-background-hover': theme.background.app,
+  },
 
   '&:hover, &:focus': {
-    background: transparentize(0.93, theme.color.secondary),
+    '--tree-node-background-hover':
+      theme.base === 'dark'
+        ? darken(0.35, theme.color.secondary)
+        : lighten(0.45, theme.color.secondary),
+    background: 'var(--tree-node-background-hover)',
     outline: 'none',
   },
 
@@ -107,7 +118,8 @@ export const LeafNodeStyleWrapper = styled.div(({ theme }) => ({
     fontWeight: theme.typography.weight.bold,
 
     '&&:hover, &&:focus': {
-      background: theme.color.secondary,
+      '--tree-node-background-hover': theme.color.secondary,
+      background: 'var(--tree-node-background-hover)',
     },
     svg: { color: theme.color.lightest },
   },

From b2ad07ee999899339e782a88e2a5859a23536c60 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Mon, 16 Dec 2024 22:23:18 +0100
Subject: [PATCH 06/20] Prevent addon state from absolutely bombing render
 performance

---
 code/core/src/manager-api/root.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/code/core/src/manager-api/root.tsx b/code/core/src/manager-api/root.tsx
index c2784329ab8f..8d5c501607d6 100644
--- a/code/core/src/manager-api/root.tsx
+++ b/code/core/src/manager-api/root.tsx
@@ -41,7 +41,7 @@ import {
   STORY_CHANGED,
 } from '@storybook/core/core-events';
 
-import { mergeWith } from 'es-toolkit';
+import { isEqual } from 'es-toolkit';
 
 import { createContext } from './context';
 import getInitialState from './initial-state';
@@ -218,14 +218,17 @@ class ManagerProvider extends Component<ManagerProviderProps, State> {
     return null!;
   }
 
-  shouldComponentUpdate(nextProps: ManagerProviderProps, nextState: State): boolean {
-    const prevState = this.state;
+  shouldComponentUpdate(
+    nextProps: ManagerProviderProps,
+    { addons: _, ...nextState }: State
+  ): boolean {
     const prevProps = this.props;
+    const { addons: __, ...prevState } = this.state;
 
-    if (prevState !== nextState) {
+    if (prevProps.path !== nextProps.path) {
       return true;
     }
-    if (prevProps.path !== nextProps.path) {
+    if (!isEqual(prevState, nextState)) {
       return true;
     }
     return false;

From e77bd59a7c130d841b2aaabbef462d205db547f7 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Tue, 17 Dec 2024 11:27:26 +0100
Subject: [PATCH 07/20] Fix tooltip positioning by absolutely positioning the
 WithTooltip wrapper rather than the button inside

---
 .../src/manager/components/sidebar/ContextMenu.tsx | 10 ++++++++--
 .../manager/components/sidebar/StatusButton.tsx    |  3 ---
 code/core/src/manager/components/sidebar/Tree.tsx  | 14 ++++++++++----
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/code/core/src/manager/components/sidebar/ContextMenu.tsx b/code/core/src/manager/components/sidebar/ContextMenu.tsx
index a2d98eab6a85..d2fa1d54310c 100644
--- a/code/core/src/manager/components/sidebar/ContextMenu.tsx
+++ b/code/core/src/manager/components/sidebar/ContextMenu.tsx
@@ -2,6 +2,7 @@ import type { ComponentProps, FC, SyntheticEvent } from 'react';
 import React, { useMemo, useState } from 'react';
 
 import { TooltipLinkList, WithTooltip } from '@storybook/core/components';
+import { styled } from '@storybook/core/theming';
 import { type API_HashEntry, Addon_TypesEnum } from '@storybook/core/types';
 import { EllipsisIcon } from '@storybook/icons';
 
@@ -18,6 +19,11 @@ const empty = {
   node: null,
 };
 
+const PositionedWithTooltip = styled(WithTooltip)({
+  position: 'absolute',
+  right: 0,
+});
+
 export const useContextMenu = (context: API_HashEntry, links: Link[], api: API) => {
   const [hoverCount, setHoverCount] = useState(0);
   const [isOpen, setIsOpen] = useState(false);
@@ -63,7 +69,7 @@ export const useContextMenu = (context: API_HashEntry, links: Link[], api: API)
     return {
       onMouseEnter: handlers.onMouseEnter,
       node: isRendered ? (
-        <WithTooltip
+        <PositionedWithTooltip
           data-displayed={isOpen ? 'on' : 'off'}
           closeOnOutsideClick
           placement="bottom-end"
@@ -80,7 +86,7 @@ export const useContextMenu = (context: API_HashEntry, links: Link[], api: API)
           <StatusButton type="button" status={'pending'}>
             <EllipsisIcon />
           </StatusButton>
-        </WithTooltip>
+        </PositionedWithTooltip>
       ) : null,
     };
   }, [context, handlers, isOpen, isRendered, links]);
diff --git a/code/core/src/manager/components/sidebar/StatusButton.tsx b/code/core/src/manager/components/sidebar/StatusButton.tsx
index 732838e043a7..343440e1434b 100644
--- a/code/core/src/manager/components/sidebar/StatusButton.tsx
+++ b/code/core/src/manager/components/sidebar/StatusButton.tsx
@@ -34,9 +34,6 @@ export const StatusButton = styled(IconButton)<{
 }>(
   withStatusColor,
   ({ theme, height, width }) => ({
-    position: 'absolute',
-    right: 0,
-    top: 0,
     transition: 'none',
     display: 'inline-flex',
     alignItems: 'center',
diff --git a/code/core/src/manager/components/sidebar/Tree.tsx b/code/core/src/manager/components/sidebar/Tree.tsx
index 62c9774dc991..54a49207a90a 100644
--- a/code/core/src/manager/components/sidebar/Tree.tsx
+++ b/code/core/src/manager/components/sidebar/Tree.tsx
@@ -196,6 +196,12 @@ const StatusIconMap = {
   unknown: null,
 };
 
+const PositionedStatusButton = styled(StatusButton)({
+  position: 'absolute',
+  right: 0,
+  top: 0,
+});
+
 export const ContextMenu = {
   ListItem,
 };
@@ -334,7 +340,7 @@ const Node = React.memo<NodeProps>(function Node({
         )}
         {contextMenu.node}
         {icon ? (
-          <StatusButton
+          <PositionedStatusButton
             aria-label={`Test status: ${statusValue}`}
             role="status"
             type="button"
@@ -342,7 +348,7 @@ const Node = React.memo<NodeProps>(function Node({
             selectedItem={isSelected}
           >
             {icon}
-          </StatusButton>
+          </PositionedStatusButton>
         ) : null}
       </LeafNodeStyleWrapper>
     );
@@ -436,11 +442,11 @@ const Node = React.memo<NodeProps>(function Node({
         </BranchNode>
         {contextMenu.node}
         {['error', 'warn'].includes(itemStatus) && (
-          <StatusButton type="button" status={itemStatus}>
+          <PositionedStatusButton type="button" status={itemStatus}>
             <svg key="icon" viewBox="0 0 6 6" width="6" height="6" type="dot">
               <UseSymbol type="dot" />
             </svg>
-          </StatusButton>
+          </PositionedStatusButton>
         )}
       </LeafNodeStyleWrapper>
     );

From 66faa7e0d62bf147502d51a7931947eaf691bc76 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Tue, 17 Dec 2024 22:25:00 +0100
Subject: [PATCH 08/20] Don't absolutely position status icons

---
 .../src/manager/components/sidebar/ContextMenu.tsx |  9 +++++++--
 .../manager/components/sidebar/StatusButton.tsx    |  2 --
 code/core/src/manager/components/sidebar/Tree.tsx  | 14 ++++----------
 3 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/code/core/src/manager/components/sidebar/ContextMenu.tsx b/code/core/src/manager/components/sidebar/ContextMenu.tsx
index d2fa1d54310c..ac4aeb671d55 100644
--- a/code/core/src/manager/components/sidebar/ContextMenu.tsx
+++ b/code/core/src/manager/components/sidebar/ContextMenu.tsx
@@ -24,6 +24,11 @@ const PositionedWithTooltip = styled(WithTooltip)({
   right: 0,
 });
 
+const FloatingStatusButton = styled(StatusButton)({
+  background: 'var(--tree-node-background-hover)',
+  boxShadow: '0 0 5px 5px var(--tree-node-background-hover)',
+});
+
 export const useContextMenu = (context: API_HashEntry, links: Link[], api: API) => {
   const [hoverCount, setHoverCount] = useState(0);
   const [isOpen, setIsOpen] = useState(false);
@@ -83,9 +88,9 @@ export const useContextMenu = (context: API_HashEntry, links: Link[], api: API)
           }}
           tooltip={<LiveContextMenu context={context} links={links} />}
         >
-          <StatusButton type="button" status={'pending'}>
+          <FloatingStatusButton type="button" status={'pending'}>
             <EllipsisIcon />
-          </StatusButton>
+          </FloatingStatusButton>
         </PositionedWithTooltip>
       ) : null,
     };
diff --git a/code/core/src/manager/components/sidebar/StatusButton.tsx b/code/core/src/manager/components/sidebar/StatusButton.tsx
index 343440e1434b..8002cc87ba33 100644
--- a/code/core/src/manager/components/sidebar/StatusButton.tsx
+++ b/code/core/src/manager/components/sidebar/StatusButton.tsx
@@ -40,8 +40,6 @@ export const StatusButton = styled(IconButton)<{
     justifyContent: 'center',
     width: width || 28,
     height: height || 28,
-    background: 'var(--tree-node-background-hover)',
-    boxShadow: '0 0 5px 5px var(--tree-node-background-hover)',
 
     '&:hover': {
       color: theme.color.secondary,
diff --git a/code/core/src/manager/components/sidebar/Tree.tsx b/code/core/src/manager/components/sidebar/Tree.tsx
index 54a49207a90a..62c9774dc991 100644
--- a/code/core/src/manager/components/sidebar/Tree.tsx
+++ b/code/core/src/manager/components/sidebar/Tree.tsx
@@ -196,12 +196,6 @@ const StatusIconMap = {
   unknown: null,
 };
 
-const PositionedStatusButton = styled(StatusButton)({
-  position: 'absolute',
-  right: 0,
-  top: 0,
-});
-
 export const ContextMenu = {
   ListItem,
 };
@@ -340,7 +334,7 @@ const Node = React.memo<NodeProps>(function Node({
         )}
         {contextMenu.node}
         {icon ? (
-          <PositionedStatusButton
+          <StatusButton
             aria-label={`Test status: ${statusValue}`}
             role="status"
             type="button"
@@ -348,7 +342,7 @@ const Node = React.memo<NodeProps>(function Node({
             selectedItem={isSelected}
           >
             {icon}
-          </PositionedStatusButton>
+          </StatusButton>
         ) : null}
       </LeafNodeStyleWrapper>
     );
@@ -442,11 +436,11 @@ const Node = React.memo<NodeProps>(function Node({
         </BranchNode>
         {contextMenu.node}
         {['error', 'warn'].includes(itemStatus) && (
-          <PositionedStatusButton type="button" status={itemStatus}>
+          <StatusButton type="button" status={itemStatus}>
             <svg key="icon" viewBox="0 0 6 6" width="6" height="6" type="dot">
               <UseSymbol type="dot" />
             </svg>
-          </PositionedStatusButton>
+          </StatusButton>
         )}
       </LeafNodeStyleWrapper>
     );

From 6603753e3d74a1f4d77bf5e6382e2a2652ada58d Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 18 Dec 2024 10:02:21 +0100
Subject: [PATCH 09/20] use react-confetti source to prevent
 https://github.com/storybookjs/storybook/issues/30095

---
 code/addons/onboarding/src/components/Confetti/Confetti.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/addons/onboarding/src/components/Confetti/Confetti.tsx b/code/addons/onboarding/src/components/Confetti/Confetti.tsx
index b9b816d3e051..4041ab7b89a5 100644
--- a/code/addons/onboarding/src/components/Confetti/Confetti.tsx
+++ b/code/addons/onboarding/src/components/Confetti/Confetti.tsx
@@ -4,7 +4,7 @@ import { createPortal } from 'react-dom';
 
 import { styled } from 'storybook/internal/theming';
 
-import ReactConfetti from 'react-confetti';
+import { ReactConfetti } from 'react-confetti/src/ReactConfetti';
 
 interface ConfettiProps extends Omit<React.ComponentProps<typeof ReactConfetti>, 'drawShape'> {
   top?: number;

From cc2a84a7552dc8fc8600f744a6583f1a3f0bcebd Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 18 Dec 2024 10:27:58 +0100
Subject: [PATCH 10/20] Add E2E tests

---
 code/e2e-tests/addon-onboarding.spec.ts | 51 +++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 code/e2e-tests/addon-onboarding.spec.ts

diff --git a/code/e2e-tests/addon-onboarding.spec.ts b/code/e2e-tests/addon-onboarding.spec.ts
new file mode 100644
index 000000000000..64e10e269d9d
--- /dev/null
+++ b/code/e2e-tests/addon-onboarding.spec.ts
@@ -0,0 +1,51 @@
+import { expect, test } from '@playwright/test';
+import process from 'process';
+
+import { SbPage } from './util';
+
+const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
+const templateName = process.env.STORYBOOK_TEMPLATE_NAME || '';
+
+const supportsOnboarding =
+  templateName.includes('react') ||
+  templateName.includes('vue3') ||
+  templateName.includes('angular') ||
+  templateName.includes('next');
+
+test.describe('addon-onboarding', () => {
+  test.skip(
+    !supportsOnboarding,
+    `Skipping ${templateName}, which does not have addon-onboarding set up.`
+  );
+  test('should load the onboarding screen', async ({ page }) => {
+    await page.goto(`${storybookUrl}/?path=/onboarding`);
+    const sbPage = new SbPage(page, expect);
+    await sbPage.waitUntilLoaded();
+
+    await expect(page.getByRole('heading', { name: 'Meet your new frontend' })).toBeVisible();
+    await page.locator('#storybook-addon-onboarding').getByRole('button').click();
+
+    await expect(page.getByText('Interactive story playground')).toBeVisible();
+    await page.getByLabel('Next').click();
+
+    await expect(page.getByText('Save your changes as a new')).toBeVisible();
+    await page.getByLabel('Next').click();
+
+    await expect(page.getByRole('heading', { name: 'Create new story' })).toBeVisible();
+    await page.getByPlaceholder('Story export name').click();
+
+    // this is needed because the e2e test will generate a new file in the system
+    // which we don't know of its location (it runs in different sandboxes)
+    // so we just create a random id to make it easier to run tests
+    const id = Math.random().toString(36).substring(7);
+    await page.getByPlaceholder('Story export name').fill('Test-' + id);
+    await page.getByRole('button', { name: 'Create' }).click();
+
+    await expect(page.getByText('You just added your first')).toBeVisible();
+    await page.getByLabel('Last').click();
+
+    await expect(
+      sbPage.previewIframe().getByRole('heading', { name: 'Configure your project' })
+    ).toBeVisible();
+  });
+});

From eed0b8ba4d1692818f7a7fd1722bb9d2eb58bd3a Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Wed, 18 Dec 2024 10:54:36 +0100
Subject: [PATCH 11/20] Ensure status icon continues to claim space while
 hidden

---
 code/core/src/manager/components/sidebar/Tree.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/core/src/manager/components/sidebar/Tree.tsx b/code/core/src/manager/components/sidebar/Tree.tsx
index 62c9774dc991..cbfc1e330be7 100644
--- a/code/core/src/manager/components/sidebar/Tree.tsx
+++ b/code/core/src/manager/components/sidebar/Tree.tsx
@@ -105,11 +105,11 @@ export const LeafNodeStyleWrapper = styled.div(({ theme }) => ({
   },
 
   '& [data-displayed="on"] + *': {
-    display: 'none',
+    visibility: 'hidden',
   },
 
   '&:hover [data-displayed="off"] + *': {
-    display: 'none',
+    visibility: 'hidden',
   },
 
   '&[data-selected="true"]': {

From 9a0f2fd086259aa151b8338d014313a3d6ccec8e Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 18 Dec 2024 11:01:03 +0100
Subject: [PATCH 12/20] Addon Onboarding: Replace react-confetti with
 react-confetti-boom

---
 code/addons/onboarding/package.json           |   4 +-
 code/addons/onboarding/src/Onboarding.tsx     |  12 +-
 .../components/Confetti/Confetti.stories.tsx  |  51 ++-----
 .../src/components/Confetti/Confetti.tsx      | 138 +++---------------
 code/yarn.lock                                |  12 +-
 5 files changed, 44 insertions(+), 173 deletions(-)

diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json
index 2ae0859fb9d3..ce9dbd9ee074 100644
--- a/code/addons/onboarding/package.json
+++ b/code/addons/onboarding/package.json
@@ -44,15 +44,13 @@
     "check": "jiti ../../../scripts/prepare/check.ts",
     "prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
   },
-  "dependencies": {
-    "react-confetti": "^6.1.0"
-  },
   "devDependencies": {
     "@radix-ui/react-dialog": "^1.0.5",
     "@storybook/icons": "^1.2.12",
     "@storybook/react": "workspace:*",
     "framer-motion": "^11.0.3",
     "react": "^18.2.0",
+    "react-confetti-boom": "^1.1.0",
     "react-dom": "^18.2.0",
     "react-joyride": "^2.8.2",
     "react-use-measure": "^2.1.1",
diff --git a/code/addons/onboarding/src/Onboarding.tsx b/code/addons/onboarding/src/Onboarding.tsx
index b861d918204a..54e264f67254 100644
--- a/code/addons/onboarding/src/Onboarding.tsx
+++ b/code/addons/onboarding/src/Onboarding.tsx
@@ -268,17 +268,7 @@ export default function Onboarding({ api }: { api: API }) {
 
   return (
     <ThemeProvider theme={theme}>
-      {showConfetti && (
-        <Confetti
-          numberOfPieces={800}
-          recycle={false}
-          tweenDuration={20000}
-          onConfettiComplete={(confetti) => {
-            confetti?.reset();
-            setShowConfetti(false);
-          }}
-        />
-      )}
+      {showConfetti && <Confetti />}
       {step === '1:Intro' ? (
         <SplashScreen onDismiss={() => setStep('2:Controls')} />
       ) : (
diff --git a/code/addons/onboarding/src/components/Confetti/Confetti.stories.tsx b/code/addons/onboarding/src/components/Confetti/Confetti.stories.tsx
index b55fdf783b34..3540aadc2a85 100644
--- a/code/addons/onboarding/src/components/Confetti/Confetti.stories.tsx
+++ b/code/addons/onboarding/src/components/Confetti/Confetti.stories.tsx
@@ -8,11 +8,19 @@ const meta: Meta<typeof Confetti> = {
   component: Confetti,
   parameters: {
     chromatic: { disableSnapshot: true },
+    layout: 'fullscreen',
   },
   decorators: [
     (StoryFn) => (
-      <div style={{ height: '100vh', width: '100vw' }}>
-        <button>I am clickable</button>
+      <div
+        style={{
+          height: '100vh',
+          width: '100vw',
+          alignContent: 'center',
+          textAlign: 'center',
+        }}
+      >
+        <span>Falling confetti! 🎉</span>
         <StoryFn />
       </div>
     ),
@@ -23,41 +31,4 @@ export default meta;
 
 type Story = StoryObj<typeof Confetti>;
 
-export const Default: Story = {
-  args: {
-    recycle: true,
-    numberOfPieces: 200,
-    top: undefined,
-    left: undefined,
-    width: undefined,
-    height: undefined,
-    friction: 0.99,
-    wind: 0,
-    gravity: 0.1,
-    initialVelocityX: 4,
-    initialVelocityY: 10,
-    tweenDuration: 5000,
-  },
-};
-
-export const OneTimeConfetti: Story = {
-  args: {
-    ...Default.args,
-    numberOfPieces: 800,
-    recycle: false,
-    tweenDuration: 20000,
-    onConfettiComplete: (confetti) => {
-      confetti?.reset();
-    },
-  },
-};
-
-export const Positioned: Story = {
-  args: {
-    ...Default.args,
-    top: 100,
-    left: 300,
-    width: 300,
-    height: 250,
-  },
-};
+export const Default: Story = {};
diff --git a/code/addons/onboarding/src/components/Confetti/Confetti.tsx b/code/addons/onboarding/src/components/Confetti/Confetti.tsx
index 4041ab7b89a5..e5e04628193d 100644
--- a/code/addons/onboarding/src/components/Confetti/Confetti.tsx
+++ b/code/addons/onboarding/src/components/Confetti/Confetti.tsx
@@ -1,131 +1,33 @@
-import React, { useEffect } from 'react';
+import React, { type ComponentProps, useEffect } from 'react';
 import { useState } from 'react';
-import { createPortal } from 'react-dom';
 
-import { styled } from 'storybook/internal/theming';
-
-import { ReactConfetti } from 'react-confetti/src/ReactConfetti';
-
-interface ConfettiProps extends Omit<React.ComponentProps<typeof ReactConfetti>, 'drawShape'> {
-  top?: number;
-  left?: number;
-  width?: number;
-  height?: number;
-  numberOfPieces?: number;
-  recycle?: boolean;
-  colors?: string[];
-}
-
-const Wrapper = styled.div<{
-  width: number;
-  height: number;
-  top: number;
-  left: number;
-}>(({ width, height, left, top }) => ({
-  width: `${width}px`,
-  height: `${height}px`,
-  left: `${left}px`,
-  top: `${top}px`,
-  position: 'relative',
-  overflow: 'hidden',
-}));
+import ReactConfetti from 'react-confetti-boom';
 
 export function Confetti({
-  top = 0,
-  left = 0,
-  width = window.innerWidth,
-  height = window.innerHeight,
+  timeToFade = 5000,
   colors = ['#CA90FF', '#FC521F', '#66BF3C', '#FF4785', '#FFAE00', '#1EA7FD'],
   ...confettiProps
-}: ConfettiProps): React.ReactPortal {
-  const [confettiContainer] = useState(() => {
-    const container = document.createElement('div');
-    container.setAttribute('id', 'confetti-container');
-    container.setAttribute(
-      'style',
-      'position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999;'
-    );
-
-    return container;
-  });
+}: ComponentProps<typeof ReactConfetti> & { timeToFade?: number }) {
+  const [particleCount, setParticleCount] = useState(42);
 
   useEffect(() => {
-    document.body.appendChild(confettiContainer);
+    const timeout = setTimeout(() => {
+      setParticleCount(0);
+    }, timeToFade);
 
     return () => {
-      document.body.removeChild(confettiContainer);
+      clearTimeout(timeout);
     };
-  }, []);
-
-  return createPortal(
-    <Wrapper top={top} left={left} width={width} height={height}>
-      <ReactConfetti colors={colors} drawShape={draw} {...confettiProps} />
-    </Wrapper>,
-    confettiContainer
+  }, [timeToFade]);
+
+  return (
+    <ReactConfetti
+      mode="fall"
+      colors={colors}
+      shapeSize={14}
+      particleCount={particleCount}
+      fadeOutHeight={10}
+      {...confettiProps}
+    />
   );
 }
-
-enum ParticleShape {
-  Circle = 1,
-  Square = 2,
-  TShape = 3,
-  LShape = 4,
-  Triangle = 5,
-  QuarterCircle = 6,
-}
-
-function getRandomInt(min: number, max: number) {
-  return Math.floor(Math.random() * (max - min)) + min;
-}
-
-function draw(this: any, context: CanvasRenderingContext2D) {
-  this.shape = this.shape || getRandomInt(1, 6);
-
-  switch (this.shape) {
-    case ParticleShape.Square: {
-      const cornerRadius = 2;
-      const width = this.w / 2;
-      const height = this.h / 2;
-
-      context.moveTo(-width + cornerRadius, -height);
-      context.lineTo(width - cornerRadius, -height);
-      context.arcTo(width, -height, width, -height + cornerRadius, cornerRadius);
-      context.lineTo(width, height - cornerRadius);
-      context.arcTo(width, height, width - cornerRadius, height, cornerRadius);
-      context.lineTo(-width + cornerRadius, height);
-      context.arcTo(-width, height, -width, height - cornerRadius, cornerRadius);
-      context.lineTo(-width, -height + cornerRadius);
-      context.arcTo(-width, -height, -width + cornerRadius, -height, cornerRadius);
-
-      break;
-    }
-    case ParticleShape.TShape: {
-      context.rect(-4, -4, 8, 16);
-      context.rect(-12, -4, 24, 8);
-      break;
-    }
-    case ParticleShape.LShape: {
-      context.rect(-4, -4, 8, 16);
-      context.rect(-4, -4, 24, 8);
-      break;
-    }
-    case ParticleShape.Circle: {
-      context.arc(0, 0, this.radius, 0, 2 * Math.PI);
-      break;
-    }
-    case ParticleShape.Triangle: {
-      context.moveTo(16, 4);
-      context.lineTo(4, 24);
-      context.lineTo(24, 24);
-      break;
-    }
-    case ParticleShape.QuarterCircle: {
-      context.arc(4, -4, 4, -Math.PI / 2, 0);
-      context.lineTo(4, 0);
-      break;
-    }
-  }
-
-  context.closePath();
-  context.fill();
-}
diff --git a/code/yarn.lock b/code/yarn.lock
index f0862ce5333e..5f206a86fd7a 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -5742,7 +5742,7 @@ __metadata:
     "@storybook/react": "workspace:*"
     framer-motion: "npm:^11.0.3"
     react: "npm:^18.2.0"
-    react-confetti: "npm:^6.1.0"
+    react-confetti-boom: "npm:^1.1.0"
     react-dom: "npm:^18.2.0"
     react-joyride: "npm:^2.8.2"
     react-use-measure: "npm:^2.1.1"
@@ -24167,6 +24167,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-confetti-boom@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "react-confetti-boom@npm:1.1.0"
+  peerDependencies:
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: 10c0/76faf3e5cc3284b7dc0297ab7189ff92bbf74379a9478096bc8c8d7b16a82badea74c2e57f7313cd2a55ccf3c8dc50d51165fbf00c9fee5b9ed241369812d686
+  languageName: node
+  linkType: hard
+
 "react-confetti@npm:^6.1.0":
   version: 6.1.0
   resolution: "react-confetti@npm:6.1.0"

From 3cded02fcdf8e7ba2e1a6dee52d4d1c9702f9a54 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Wed, 18 Dec 2024 11:08:23 +0100
Subject: [PATCH 13/20] Add tests

---
 code/addons/test/src/node/test-manager.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/code/addons/test/src/node/test-manager.ts b/code/addons/test/src/node/test-manager.ts
index dade6daac466..1a19e587eeea 100644
--- a/code/addons/test/src/node/test-manager.ts
+++ b/code/addons/test/src/node/test-manager.ts
@@ -46,6 +46,8 @@ export class TestManager {
       return;
     }
 
+    const previousConfig = this.config;
+
     this.config = {
       ...this.config,
       ...payload.config,
@@ -53,7 +55,7 @@ export class TestManager {
 
     process.env.VITEST_STORYBOOK_CONFIG = JSON.stringify(payload.config);
 
-    if (this.config.coverage !== payload.config.coverage) {
+    if (previousConfig.coverage !== payload.config.coverage) {
       try {
         await this.vitestManager.restartVitest({
           coverage: this.config.coverage,

From 792ac4c3b2627a1c327e49796015beaf4d25e6e1 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 18 Dec 2024 11:12:23 +0100
Subject: [PATCH 14/20] Add a wrapper

---
 .../src/components/Confetti/Confetti.tsx      | 29 ++++++++++++++-----
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/code/addons/onboarding/src/components/Confetti/Confetti.tsx b/code/addons/onboarding/src/components/Confetti/Confetti.tsx
index e5e04628193d..90604bd1ce05 100644
--- a/code/addons/onboarding/src/components/Confetti/Confetti.tsx
+++ b/code/addons/onboarding/src/components/Confetti/Confetti.tsx
@@ -1,8 +1,19 @@
 import React, { type ComponentProps, useEffect } from 'react';
 import { useState } from 'react';
 
+import { styled } from 'storybook/internal/theming';
+
 import ReactConfetti from 'react-confetti-boom';
 
+const Wrapper = styled.div({
+  zIndex: 9999,
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+});
+
 export function Confetti({
   timeToFade = 5000,
   colors = ['#CA90FF', '#FC521F', '#66BF3C', '#FF4785', '#FFAE00', '#1EA7FD'],
@@ -21,13 +32,15 @@ export function Confetti({
   }, [timeToFade]);
 
   return (
-    <ReactConfetti
-      mode="fall"
-      colors={colors}
-      shapeSize={14}
-      particleCount={particleCount}
-      fadeOutHeight={10}
-      {...confettiProps}
-    />
+    <Wrapper>
+      <ReactConfetti
+        mode="fall"
+        colors={colors}
+        shapeSize={14}
+        particleCount={particleCount}
+        fadeOutHeight={10}
+        {...confettiProps}
+      />
+    </Wrapper>
   );
 }

From 2b2b54d37629a1758b87ead29151702bd3701700 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 18 Dec 2024 11:18:10 +0100
Subject: [PATCH 15/20] rename e2e test

---
 code/e2e-tests/addon-onboarding.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/e2e-tests/addon-onboarding.spec.ts b/code/e2e-tests/addon-onboarding.spec.ts
index 64e10e269d9d..d3d6b951eeff 100644
--- a/code/e2e-tests/addon-onboarding.spec.ts
+++ b/code/e2e-tests/addon-onboarding.spec.ts
@@ -17,7 +17,7 @@ test.describe('addon-onboarding', () => {
     !supportsOnboarding,
     `Skipping ${templateName}, which does not have addon-onboarding set up.`
   );
-  test('should load the onboarding screen', async ({ page }) => {
+  test('the onboarding flow', async ({ page }) => {
     await page.goto(`${storybookUrl}/?path=/onboarding`);
     const sbPage = new SbPage(page, expect);
     await sbPage.waitUntilLoaded();

From 441ad868861c8f3cf1eda4d030399caaae623d59 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 18 Dec 2024 12:08:50 +0100
Subject: [PATCH 16/20] skip onboarding addon tests for built storybooks

---
 code/e2e-tests/addon-onboarding.spec.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/code/e2e-tests/addon-onboarding.spec.ts b/code/e2e-tests/addon-onboarding.spec.ts
index d3d6b951eeff..85181d8abf2c 100644
--- a/code/e2e-tests/addon-onboarding.spec.ts
+++ b/code/e2e-tests/addon-onboarding.spec.ts
@@ -5,6 +5,7 @@ import { SbPage } from './util';
 
 const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
 const templateName = process.env.STORYBOOK_TEMPLATE_NAME || '';
+const type = process.env.STORYBOOK_TYPE || 'dev';
 
 const supportsOnboarding =
   templateName.includes('react') ||
@@ -13,6 +14,7 @@ const supportsOnboarding =
   templateName.includes('next');
 
 test.describe('addon-onboarding', () => {
+  test.skip(type === 'build', `Skipping addon tests for production Storybooks`);
   test.skip(
     !supportsOnboarding,
     `Skipping ${templateName}, which does not have addon-onboarding set up.`

From 717e2563cf9c52dafbdd4f9d20873d021cc31f99 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 18 Dec 2024 12:17:25 +0100
Subject: [PATCH 17/20] use @neoconfetti/react instead

---
 code/addons/onboarding/package.json           |  2 +-
 .../src/components/Confetti/Confetti.tsx      | 36 +++++++------------
 code/yarn.lock                                | 19 +++++-----
 3 files changed, 21 insertions(+), 36 deletions(-)

diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json
index 0a92fbc89396..4b17b10810dd 100644
--- a/code/addons/onboarding/package.json
+++ b/code/addons/onboarding/package.json
@@ -45,12 +45,12 @@
     "prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
   },
   "devDependencies": {
+    "@neoconfetti/react": "^1.0.0",
     "@radix-ui/react-dialog": "^1.0.5",
     "@storybook/icons": "^1.2.12",
     "@storybook/react": "workspace:*",
     "framer-motion": "^11.0.3",
     "react": "^18.2.0",
-    "react-confetti-boom": "^1.1.0",
     "react-dom": "^18.2.0",
     "react-joyride": "^2.8.2",
     "react-use-measure": "^2.1.1",
diff --git a/code/addons/onboarding/src/components/Confetti/Confetti.tsx b/code/addons/onboarding/src/components/Confetti/Confetti.tsx
index 90604bd1ce05..cebc40454909 100644
--- a/code/addons/onboarding/src/components/Confetti/Confetti.tsx
+++ b/code/addons/onboarding/src/components/Confetti/Confetti.tsx
@@ -1,46 +1,34 @@
-import React, { type ComponentProps, useEffect } from 'react';
-import { useState } from 'react';
+import React, { type ComponentProps } from 'react';
 
 import { styled } from 'storybook/internal/theming';
 
-import ReactConfetti from 'react-confetti-boom';
+import { Confetti as ReactConfetti } from '@neoconfetti/react';
 
 const Wrapper = styled.div({
   zIndex: 9999,
   position: 'fixed',
   top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0,
+  left: '50%',
+  width: '50%',
+  height: '100%',
 });
 
-export function Confetti({
+export const Confetti = React.memo(function Confetti({
   timeToFade = 5000,
   colors = ['#CA90FF', '#FC521F', '#66BF3C', '#FF4785', '#FFAE00', '#1EA7FD'],
   ...confettiProps
 }: ComponentProps<typeof ReactConfetti> & { timeToFade?: number }) {
-  const [particleCount, setParticleCount] = useState(42);
-
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      setParticleCount(0);
-    }, timeToFade);
-
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [timeToFade]);
-
   return (
     <Wrapper>
       <ReactConfetti
-        mode="fall"
         colors={colors}
-        shapeSize={14}
-        particleCount={particleCount}
-        fadeOutHeight={10}
+        particleCount={200}
+        duration={5000}
+        stageHeight={window.innerHeight}
+        stageWidth={window.innerWidth}
+        destroyAfterDone
         {...confettiProps}
       />
     </Wrapper>
   );
-}
+});
diff --git a/code/yarn.lock b/code/yarn.lock
index 5c1f23864a42..13e798756fd5 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -4118,6 +4118,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@neoconfetti/react@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "@neoconfetti/react@npm:1.0.0"
+  checksum: 10c0/dfa487965b69f88b39562ccd910114cd68b00a90c7eb79cfb1a483c7ac717b720f9f095e5aea13cef8a9b9bea05533d380ddff5e44d3bc3f7dc4d5c66716765c
+  languageName: node
+  linkType: hard
+
 "@next/env@npm:15.0.3, @next/env@npm:^15.0.3":
   version: 15.0.3
   resolution: "@next/env@npm:15.0.3"
@@ -5749,12 +5756,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-onboarding@workspace:addons/onboarding"
   dependencies:
+    "@neoconfetti/react": "npm:^1.0.0"
     "@radix-ui/react-dialog": "npm:^1.0.5"
     "@storybook/icons": "npm:^1.2.12"
     "@storybook/react": "workspace:*"
     framer-motion: "npm:^11.0.3"
     react: "npm:^18.2.0"
-    react-confetti-boom: "npm:^1.1.0"
     react-dom: "npm:^18.2.0"
     react-joyride: "npm:^2.8.2"
     react-use-measure: "npm:^2.1.1"
@@ -24227,16 +24234,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-confetti-boom@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "react-confetti-boom@npm:1.1.0"
-  peerDependencies:
-    react: ">=16.8.0"
-    react-dom: ">=16.8.0"
-  checksum: 10c0/76faf3e5cc3284b7dc0297ab7189ff92bbf74379a9478096bc8c8d7b16a82badea74c2e57f7313cd2a55ccf3c8dc50d51165fbf00c9fee5b9ed241369812d686
-  languageName: node
-  linkType: hard
-
 "react-confetti@npm:^6.1.0":
   version: 6.1.0
   resolution: "react-confetti@npm:6.1.0"

From 8e2e08f9efa111a419f5e51956073341dfe991e5 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Wed, 18 Dec 2024 14:49:27 +0100
Subject: [PATCH 18/20] Don't ignore addon state as it may be relevant

---
 code/core/src/manager-api/root.tsx | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/code/core/src/manager-api/root.tsx b/code/core/src/manager-api/root.tsx
index 8d5c501607d6..0889a560c8a0 100644
--- a/code/core/src/manager-api/root.tsx
+++ b/code/core/src/manager-api/root.tsx
@@ -218,20 +218,10 @@ class ManagerProvider extends Component<ManagerProviderProps, State> {
     return null!;
   }
 
-  shouldComponentUpdate(
-    nextProps: ManagerProviderProps,
-    { addons: _, ...nextState }: State
-  ): boolean {
+  shouldComponentUpdate(nextProps: ManagerProviderProps, nextState: State): boolean {
     const prevProps = this.props;
-    const { addons: __, ...prevState } = this.state;
-
-    if (prevProps.path !== nextProps.path) {
-      return true;
-    }
-    if (!isEqual(prevState, nextState)) {
-      return true;
-    }
-    return false;
+    const prevState = this.state;
+    return prevProps.path !== nextProps.path || !isEqual(prevState, nextState);
   }
 
   initModules = () => {

From f1fee6ea4ffa5b913117c43b9d5d5dff4fdd8535 Mon Sep 17 00:00:00 2001
From: storybook-bot <32066757+storybook-bot@users.noreply.github.com>
Date: Thu, 19 Dec 2024 07:43:53 +0000
Subject: [PATCH 19/20] Write changelog for 8.5.0-beta.3 [skip ci]

---
 CHANGELOG.prerelease.md | 6 ++++++
 code/package.json       | 3 ++-
 docs/versions/next.json | 2 +-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
index 217d74b01133..05bbfb9847d1 100644
--- a/CHANGELOG.prerelease.md
+++ b/CHANGELOG.prerelease.md
@@ -1,3 +1,9 @@
+## 8.5.0-beta.3
+
+- Addon A11y: Fix skipped status handling in Testing Module - [#30077](https://github.com/storybookjs/storybook/pull/30077), thanks @valentinpalkovic!
+- Core: Float context menu button on top of story titles in sidebar - [#30080](https://github.com/storybookjs/storybook/pull/30080), thanks @ghengeveld!
+- Onboarding: Replace `react-confetti` with `@neoconfetti/react` - [#30098](https://github.com/storybookjs/storybook/pull/30098), thanks @ndelangen!
+
 ## 8.5.0-beta.2
 
 - Addon Test: Clear coverage data when starting or watching - [#30072](https://github.com/storybookjs/storybook/pull/30072), thanks @ghengeveld!
diff --git a/code/package.json b/code/package.json
index 7b9fd27a6318..eac341475722 100644
--- a/code/package.json
+++ b/code/package.json
@@ -294,5 +294,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.5.0-beta.3"
 }
diff --git a/docs/versions/next.json b/docs/versions/next.json
index 7399d21ebb8d..35963144623a 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1 +1 @@
-{"version":"8.5.0-beta.2","info":{"plain":"- Addon Test: Clear coverage data when starting or watching - [#30072](https://github.com/storybookjs/storybook/pull/30072), thanks @ghengeveld!\n- Addon Test: Improve error message on missing coverage package - [#30088](https://github.com/storybookjs/storybook/pull/30088), thanks @JReinhold!\n- UI: Fix test provider event handling on startup - [#30083](https://github.com/storybookjs/storybook/pull/30083), thanks @ghengeveld!\n- UI: Keep failing stories in the sidebar, disregarding filters - [#30086](https://github.com/storybookjs/storybook/pull/30086), thanks @JReinhold!"}}
+{"version":"8.5.0-beta.3","info":{"plain":"- Addon A11y: Fix skipped status handling in Testing Module - [#30077](https://github.com/storybookjs/storybook/pull/30077), thanks @valentinpalkovic!\n- Core: Float context menu button on top of story titles in sidebar - [#30080](https://github.com/storybookjs/storybook/pull/30080), thanks @ghengeveld!\n- Onboarding: Replace `react-confetti` with `@neoconfetti/react` - [#30098](https://github.com/storybookjs/storybook/pull/30098), thanks @ndelangen!"}}

From df37d0880eaff203040257937021414906beb99b Mon Sep 17 00:00:00 2001
From: storybook-bot <32066757+storybook-bot@users.noreply.github.com>
Date: Thu, 19 Dec 2024 09:23:19 +0000
Subject: [PATCH 20/20] Bump version from "8.5.0-beta.2" to "8.5.0-beta.3"
 [skip ci]

---
 code/addons/a11y/package.json                 |   2 +-
 code/addons/actions/package.json              |   2 +-
 code/addons/backgrounds/package.json          |   2 +-
 code/addons/controls/package.json             |   2 +-
 code/addons/docs/package.json                 |   2 +-
 code/addons/essentials/package.json           |   2 +-
 code/addons/gfm/package.json                  |   2 +-
 code/addons/highlight/package.json            |   2 +-
 code/addons/interactions/package.json         |   2 +-
 code/addons/jest/package.json                 |   2 +-
 code/addons/links/package.json                |   2 +-
 code/addons/measure/package.json              |   2 +-
 code/addons/onboarding/package.json           |   2 +-
 code/addons/outline/package.json              |   2 +-
 code/addons/storysource/package.json          |   2 +-
 code/addons/test/package.json                 |   2 +-
 code/addons/themes/package.json               |   2 +-
 code/addons/toolbars/package.json             |   2 +-
 code/addons/viewport/package.json             |   2 +-
 code/builders/builder-vite/package.json       |   2 +-
 code/builders/builder-webpack5/package.json   |   2 +-
 code/core/package.json                        |   2 +-
 code/core/src/common/versions.ts              | 170 +++++++++---------
 code/core/src/manager-api/version.ts          |   2 +-
 code/deprecated/builder-manager/package.json  |   2 +-
 code/deprecated/channels/package.json         |   2 +-
 code/deprecated/client-logger/package.json    |   2 +-
 code/deprecated/components/package.json       |   2 +-
 code/deprecated/core-common/package.json      |   2 +-
 code/deprecated/core-events/package.json      |   2 +-
 code/deprecated/core-server/package.json      |   2 +-
 code/deprecated/csf-tools/package.json        |   2 +-
 code/deprecated/docs-tools/package.json       |   2 +-
 code/deprecated/manager-api/package.json      |   2 +-
 code/deprecated/manager/package.json          |   2 +-
 code/deprecated/node-logger/package.json      |   2 +-
 code/deprecated/preview-api/package.json      |   2 +-
 code/deprecated/preview/package.json          |   2 +-
 code/deprecated/router/package.json           |   2 +-
 code/deprecated/telemetry/package.json        |   2 +-
 code/deprecated/theming/package.json          |   2 +-
 code/deprecated/types/package.json            |   2 +-
 code/frameworks/angular/package.json          |   2 +-
 code/frameworks/ember/package.json            |   2 +-
 .../experimental-nextjs-vite/package.json     |   2 +-
 code/frameworks/html-vite/package.json        |   2 +-
 code/frameworks/html-webpack5/package.json    |   2 +-
 code/frameworks/nextjs/package.json           |   2 +-
 code/frameworks/preact-vite/package.json      |   2 +-
 code/frameworks/preact-webpack5/package.json  |   2 +-
 .../react-native-web-vite/package.json        |   2 +-
 code/frameworks/react-vite/package.json       |   2 +-
 code/frameworks/react-webpack5/package.json   |   2 +-
 code/frameworks/server-webpack5/package.json  |   2 +-
 code/frameworks/svelte-vite/package.json      |   2 +-
 code/frameworks/svelte-webpack5/package.json  |   2 +-
 code/frameworks/sveltekit/package.json        |   2 +-
 code/frameworks/vue3-vite/package.json        |   2 +-
 code/frameworks/vue3-webpack5/package.json    |   2 +-
 .../web-components-vite/package.json          |   2 +-
 .../web-components-webpack5/package.json      |   2 +-
 code/lib/blocks/package.json                  |   2 +-
 code/lib/cli-sb/package.json                  |   2 +-
 code/lib/cli-storybook/package.json           |   2 +-
 code/lib/cli/package.json                     |   2 +-
 code/lib/codemod/package.json                 |   2 +-
 code/lib/core-webpack/package.json            |   2 +-
 code/lib/create-storybook/package.json        |   2 +-
 code/lib/csf-plugin/package.json              |   2 +-
 code/lib/instrumenter/package.json            |   2 +-
 code/lib/react-dom-shim/package.json          |   2 +-
 code/lib/source-loader/package.json           |   2 +-
 code/lib/test/package.json                    |   2 +-
 code/package.json                             |   5 +-
 code/presets/create-react-app/package.json    |   2 +-
 code/presets/html-webpack/package.json        |   2 +-
 code/presets/preact-webpack/package.json      |   2 +-
 code/presets/react-webpack/package.json       |   2 +-
 code/presets/server-webpack/package.json      |   2 +-
 code/presets/svelte-webpack/package.json      |   2 +-
 code/presets/vue3-webpack/package.json        |   2 +-
 code/renderers/html/package.json              |   2 +-
 code/renderers/preact/package.json            |   2 +-
 code/renderers/react/package.json             |   2 +-
 code/renderers/server/package.json            |   2 +-
 code/renderers/svelte/package.json            |   2 +-
 code/renderers/vue3/package.json              |   2 +-
 code/renderers/web-components/package.json    |   2 +-
 88 files changed, 173 insertions(+), 174 deletions(-)

diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json
index ca38d1848b6c..c0627d5cef38 100644
--- a/code/addons/a11y/package.json
+++ b/code/addons/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",
diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json
index 0fd1b8a2f8c5..c62a54547d71 100644
--- a/code/addons/actions/package.json
+++ b/code/addons/actions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",
diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json
index 8b0a68e80997..5601211af720 100644
--- a/code/addons/backgrounds/package.json
+++ b/code/addons/backgrounds/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",
diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json
index 6076ae2b0695..e987f4537657 100644
--- a/code/addons/controls/package.json
+++ b/code/addons/controls/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",
diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
index c6edb3f14308..5e0567d2dc59 100644
--- a/code/addons/docs/package.json
+++ b/code/addons/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json
index 7bb91e8bb960..aa3bdf1d9037 100644
--- a/code/addons/essentials/package.json
+++ b/code/addons/essentials/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",
diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json
index 79438d40133c..31355f377b8b 100644
--- a/code/addons/gfm/package.json
+++ b/code/addons/gfm/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mdx-gfm",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",
diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json
index 4f9a269b034c..3a44eccde9cc 100644
--- a/code/addons/highlight/package.json
+++ b/code/addons/highlight/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Highlight DOM nodes within your stories",
   "keywords": [
     "storybook-addons",
diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json
index 86cf84e46183..fd86e6a3924c 100644
--- a/code/addons/interactions/package.json
+++ b/code/addons/interactions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",
diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json
index d80862cf4d59..e4f9c93b8eec 100644
--- a/code/addons/jest/package.json
+++ b/code/addons/jest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",
diff --git a/code/addons/links/package.json b/code/addons/links/package.json
index cdb3a91bb48e..b9fda8ef4e2f 100644
--- a/code/addons/links/package.json
+++ b/code/addons/links/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "storybook-addons",
diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json
index 4e6cfa9efb7a..b188ba058362 100644
--- a/code/addons/measure/package.json
+++ b/code/addons/measure/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-measure",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",
diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json
index 4b17b10810dd..ccc078503210 100644
--- a/code/addons/onboarding/package.json
+++ b/code/addons/onboarding/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-onboarding",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
   "keywords": [
     "storybook-addons",
diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json
index 6ea09d403517..1d8838b3fefa 100644
--- a/code/addons/outline/package.json
+++ b/code/addons/outline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-outline",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",
diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json
index 6f016e3e02a5..64c80a3e7e4d 100644
--- a/code/addons/storysource/package.json
+++ b/code/addons/storysource/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "View a story’s source code to see how it works and paste into your app",
   "keywords": [
     "addon",
diff --git a/code/addons/test/package.json b/code/addons/test/package.json
index 94246c0704de..a62e808a9b8d 100644
--- a/code/addons/test/package.json
+++ b/code/addons/test/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/experimental-addon-test",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Integrate Vitest with Storybook",
   "keywords": [
     "storybook-addons",
diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json
index 203ff96d62f6..fd197bbc6424 100644
--- a/code/addons/themes/package.json
+++ b/code/addons/themes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-themes",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Switch between multiple themes for you components in Storybook",
   "keywords": [
     "css",
diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json
index bddd8a73c217..b3904e2cb38b 100644
--- a/code/addons/toolbars/package.json
+++ b/code/addons/toolbars/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-toolbars",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Create your own toolbar items that control story rendering",
   "keywords": [
     "addon",
diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json
index 7aeb1ea7d640..ea76e9d1193a 100644
--- a/code/addons/viewport/package.json
+++ b/code/addons/viewport/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
   "keywords": [
     "addon",
diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json
index e5d76e019f82..41278b45f11f 100644
--- a/code/builders/builder-vite/package.json
+++ b/code/builders/builder-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-vite",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "A plugin to run and build Storybooks with Vite",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme",
   "bugs": {
diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json
index 3db13f0231cb..3fa79a85bcdd 100644
--- a/code/builders/builder-webpack5/package.json
+++ b/code/builders/builder-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-webpack5",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
diff --git a/code/core/package.json b/code/core/package.json
index 1744d188499f..2fdcd994c444 100644
--- a/code/core/package.json
+++ b/code/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts
index cdb250c9cd8d..b4038c6b9e69 100644
--- a/code/core/src/common/versions.ts
+++ b/code/core/src/common/versions.ts
@@ -1,88 +1,88 @@
 // auto generated file, do not edit
 export default {
-  '@storybook/addon-a11y': '8.5.0-beta.2',
-  '@storybook/addon-actions': '8.5.0-beta.2',
-  '@storybook/addon-backgrounds': '8.5.0-beta.2',
-  '@storybook/addon-controls': '8.5.0-beta.2',
-  '@storybook/addon-docs': '8.5.0-beta.2',
-  '@storybook/addon-essentials': '8.5.0-beta.2',
-  '@storybook/addon-mdx-gfm': '8.5.0-beta.2',
-  '@storybook/addon-highlight': '8.5.0-beta.2',
-  '@storybook/addon-interactions': '8.5.0-beta.2',
-  '@storybook/addon-jest': '8.5.0-beta.2',
-  '@storybook/addon-links': '8.5.0-beta.2',
-  '@storybook/addon-measure': '8.5.0-beta.2',
-  '@storybook/addon-onboarding': '8.5.0-beta.2',
-  '@storybook/addon-outline': '8.5.0-beta.2',
-  '@storybook/addon-storysource': '8.5.0-beta.2',
-  '@storybook/experimental-addon-test': '8.5.0-beta.2',
-  '@storybook/addon-themes': '8.5.0-beta.2',
-  '@storybook/addon-toolbars': '8.5.0-beta.2',
-  '@storybook/addon-viewport': '8.5.0-beta.2',
-  '@storybook/builder-vite': '8.5.0-beta.2',
-  '@storybook/builder-webpack5': '8.5.0-beta.2',
-  '@storybook/core': '8.5.0-beta.2',
-  '@storybook/builder-manager': '8.5.0-beta.2',
-  '@storybook/channels': '8.5.0-beta.2',
-  '@storybook/client-logger': '8.5.0-beta.2',
-  '@storybook/components': '8.5.0-beta.2',
-  '@storybook/core-common': '8.5.0-beta.2',
-  '@storybook/core-events': '8.5.0-beta.2',
-  '@storybook/core-server': '8.5.0-beta.2',
-  '@storybook/csf-tools': '8.5.0-beta.2',
-  '@storybook/docs-tools': '8.5.0-beta.2',
-  '@storybook/manager': '8.5.0-beta.2',
-  '@storybook/manager-api': '8.5.0-beta.2',
-  '@storybook/node-logger': '8.5.0-beta.2',
-  '@storybook/preview': '8.5.0-beta.2',
-  '@storybook/preview-api': '8.5.0-beta.2',
-  '@storybook/router': '8.5.0-beta.2',
-  '@storybook/telemetry': '8.5.0-beta.2',
-  '@storybook/theming': '8.5.0-beta.2',
-  '@storybook/types': '8.5.0-beta.2',
-  '@storybook/angular': '8.5.0-beta.2',
-  '@storybook/ember': '8.5.0-beta.2',
-  '@storybook/experimental-nextjs-vite': '8.5.0-beta.2',
-  '@storybook/html-vite': '8.5.0-beta.2',
-  '@storybook/html-webpack5': '8.5.0-beta.2',
-  '@storybook/nextjs': '8.5.0-beta.2',
-  '@storybook/preact-vite': '8.5.0-beta.2',
-  '@storybook/preact-webpack5': '8.5.0-beta.2',
-  '@storybook/react-native-web-vite': '8.5.0-beta.2',
-  '@storybook/react-vite': '8.5.0-beta.2',
-  '@storybook/react-webpack5': '8.5.0-beta.2',
-  '@storybook/server-webpack5': '8.5.0-beta.2',
-  '@storybook/svelte-vite': '8.5.0-beta.2',
-  '@storybook/svelte-webpack5': '8.5.0-beta.2',
-  '@storybook/sveltekit': '8.5.0-beta.2',
-  '@storybook/vue3-vite': '8.5.0-beta.2',
-  '@storybook/vue3-webpack5': '8.5.0-beta.2',
-  '@storybook/web-components-vite': '8.5.0-beta.2',
-  '@storybook/web-components-webpack5': '8.5.0-beta.2',
-  '@storybook/blocks': '8.5.0-beta.2',
-  storybook: '8.5.0-beta.2',
-  sb: '8.5.0-beta.2',
-  '@storybook/cli': '8.5.0-beta.2',
-  '@storybook/codemod': '8.5.0-beta.2',
-  '@storybook/core-webpack': '8.5.0-beta.2',
-  'create-storybook': '8.5.0-beta.2',
-  '@storybook/csf-plugin': '8.5.0-beta.2',
-  '@storybook/instrumenter': '8.5.0-beta.2',
-  '@storybook/react-dom-shim': '8.5.0-beta.2',
-  '@storybook/source-loader': '8.5.0-beta.2',
-  '@storybook/test': '8.5.0-beta.2',
-  '@storybook/preset-create-react-app': '8.5.0-beta.2',
-  '@storybook/preset-html-webpack': '8.5.0-beta.2',
-  '@storybook/preset-preact-webpack': '8.5.0-beta.2',
-  '@storybook/preset-react-webpack': '8.5.0-beta.2',
-  '@storybook/preset-server-webpack': '8.5.0-beta.2',
-  '@storybook/preset-svelte-webpack': '8.5.0-beta.2',
-  '@storybook/preset-vue3-webpack': '8.5.0-beta.2',
-  '@storybook/html': '8.5.0-beta.2',
-  '@storybook/preact': '8.5.0-beta.2',
-  '@storybook/react': '8.5.0-beta.2',
-  '@storybook/server': '8.5.0-beta.2',
-  '@storybook/svelte': '8.5.0-beta.2',
-  '@storybook/vue3': '8.5.0-beta.2',
-  '@storybook/web-components': '8.5.0-beta.2',
+  '@storybook/addon-a11y': '8.5.0-beta.3',
+  '@storybook/addon-actions': '8.5.0-beta.3',
+  '@storybook/addon-backgrounds': '8.5.0-beta.3',
+  '@storybook/addon-controls': '8.5.0-beta.3',
+  '@storybook/addon-docs': '8.5.0-beta.3',
+  '@storybook/addon-essentials': '8.5.0-beta.3',
+  '@storybook/addon-mdx-gfm': '8.5.0-beta.3',
+  '@storybook/addon-highlight': '8.5.0-beta.3',
+  '@storybook/addon-interactions': '8.5.0-beta.3',
+  '@storybook/addon-jest': '8.5.0-beta.3',
+  '@storybook/addon-links': '8.5.0-beta.3',
+  '@storybook/addon-measure': '8.5.0-beta.3',
+  '@storybook/addon-onboarding': '8.5.0-beta.3',
+  '@storybook/addon-outline': '8.5.0-beta.3',
+  '@storybook/addon-storysource': '8.5.0-beta.3',
+  '@storybook/experimental-addon-test': '8.5.0-beta.3',
+  '@storybook/addon-themes': '8.5.0-beta.3',
+  '@storybook/addon-toolbars': '8.5.0-beta.3',
+  '@storybook/addon-viewport': '8.5.0-beta.3',
+  '@storybook/builder-vite': '8.5.0-beta.3',
+  '@storybook/builder-webpack5': '8.5.0-beta.3',
+  '@storybook/core': '8.5.0-beta.3',
+  '@storybook/builder-manager': '8.5.0-beta.3',
+  '@storybook/channels': '8.5.0-beta.3',
+  '@storybook/client-logger': '8.5.0-beta.3',
+  '@storybook/components': '8.5.0-beta.3',
+  '@storybook/core-common': '8.5.0-beta.3',
+  '@storybook/core-events': '8.5.0-beta.3',
+  '@storybook/core-server': '8.5.0-beta.3',
+  '@storybook/csf-tools': '8.5.0-beta.3',
+  '@storybook/docs-tools': '8.5.0-beta.3',
+  '@storybook/manager': '8.5.0-beta.3',
+  '@storybook/manager-api': '8.5.0-beta.3',
+  '@storybook/node-logger': '8.5.0-beta.3',
+  '@storybook/preview': '8.5.0-beta.3',
+  '@storybook/preview-api': '8.5.0-beta.3',
+  '@storybook/router': '8.5.0-beta.3',
+  '@storybook/telemetry': '8.5.0-beta.3',
+  '@storybook/theming': '8.5.0-beta.3',
+  '@storybook/types': '8.5.0-beta.3',
+  '@storybook/angular': '8.5.0-beta.3',
+  '@storybook/ember': '8.5.0-beta.3',
+  '@storybook/experimental-nextjs-vite': '8.5.0-beta.3',
+  '@storybook/html-vite': '8.5.0-beta.3',
+  '@storybook/html-webpack5': '8.5.0-beta.3',
+  '@storybook/nextjs': '8.5.0-beta.3',
+  '@storybook/preact-vite': '8.5.0-beta.3',
+  '@storybook/preact-webpack5': '8.5.0-beta.3',
+  '@storybook/react-native-web-vite': '8.5.0-beta.3',
+  '@storybook/react-vite': '8.5.0-beta.3',
+  '@storybook/react-webpack5': '8.5.0-beta.3',
+  '@storybook/server-webpack5': '8.5.0-beta.3',
+  '@storybook/svelte-vite': '8.5.0-beta.3',
+  '@storybook/svelte-webpack5': '8.5.0-beta.3',
+  '@storybook/sveltekit': '8.5.0-beta.3',
+  '@storybook/vue3-vite': '8.5.0-beta.3',
+  '@storybook/vue3-webpack5': '8.5.0-beta.3',
+  '@storybook/web-components-vite': '8.5.0-beta.3',
+  '@storybook/web-components-webpack5': '8.5.0-beta.3',
+  '@storybook/blocks': '8.5.0-beta.3',
+  storybook: '8.5.0-beta.3',
+  sb: '8.5.0-beta.3',
+  '@storybook/cli': '8.5.0-beta.3',
+  '@storybook/codemod': '8.5.0-beta.3',
+  '@storybook/core-webpack': '8.5.0-beta.3',
+  'create-storybook': '8.5.0-beta.3',
+  '@storybook/csf-plugin': '8.5.0-beta.3',
+  '@storybook/instrumenter': '8.5.0-beta.3',
+  '@storybook/react-dom-shim': '8.5.0-beta.3',
+  '@storybook/source-loader': '8.5.0-beta.3',
+  '@storybook/test': '8.5.0-beta.3',
+  '@storybook/preset-create-react-app': '8.5.0-beta.3',
+  '@storybook/preset-html-webpack': '8.5.0-beta.3',
+  '@storybook/preset-preact-webpack': '8.5.0-beta.3',
+  '@storybook/preset-react-webpack': '8.5.0-beta.3',
+  '@storybook/preset-server-webpack': '8.5.0-beta.3',
+  '@storybook/preset-svelte-webpack': '8.5.0-beta.3',
+  '@storybook/preset-vue3-webpack': '8.5.0-beta.3',
+  '@storybook/html': '8.5.0-beta.3',
+  '@storybook/preact': '8.5.0-beta.3',
+  '@storybook/react': '8.5.0-beta.3',
+  '@storybook/server': '8.5.0-beta.3',
+  '@storybook/svelte': '8.5.0-beta.3',
+  '@storybook/vue3': '8.5.0-beta.3',
+  '@storybook/web-components': '8.5.0-beta.3',
 };
diff --git a/code/core/src/manager-api/version.ts b/code/core/src/manager-api/version.ts
index c9d852d16745..81d5a0d36b6f 100644
--- a/code/core/src/manager-api/version.ts
+++ b/code/core/src/manager-api/version.ts
@@ -1 +1 @@
-export const version = '8.5.0-beta.2';
+export const version = '8.5.0-beta.3';
diff --git a/code/deprecated/builder-manager/package.json b/code/deprecated/builder-manager/package.json
index 9998fd59a573..b1d432a1796a 100644
--- a/code/deprecated/builder-manager/package.json
+++ b/code/deprecated/builder-manager/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-manager",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook manager builder",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/channels/package.json b/code/deprecated/channels/package.json
index 988ed72abb2c..bc8afb52d6ca 100644
--- a/code/deprecated/channels/package.json
+++ b/code/deprecated/channels/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channels",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/client-logger/package.json b/code/deprecated/client-logger/package.json
index f4de8eedbefa..17d4bf6fa122 100644
--- a/code/deprecated/client-logger/package.json
+++ b/code/deprecated/client-logger/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/client-logger",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/components/package.json b/code/deprecated/components/package.json
index 28de35eec46a..f56f3f56a1b2 100644
--- a/code/deprecated/components/package.json
+++ b/code/deprecated/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/components",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/core-common/package.json b/code/deprecated/core-common/package.json
index 372be0dfea26..d20297405976 100644
--- a/code/deprecated/core-common/package.json
+++ b/code/deprecated/core-common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-common",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/core-events/package.json b/code/deprecated/core-events/package.json
index bcf2157df22c..7710569c774e 100644
--- a/code/deprecated/core-events/package.json
+++ b/code/deprecated/core-events/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-events",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Event names used in storybook core",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/core-server/package.json b/code/deprecated/core-server/package.json
index 9cf49f637df2..c47619f19d50 100644
--- a/code/deprecated/core-server/package.json
+++ b/code/deprecated/core-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-server",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/csf-tools/package.json b/code/deprecated/csf-tools/package.json
index 3c0aa71c00c3..c02ecb80f8cc 100644
--- a/code/deprecated/csf-tools/package.json
+++ b/code/deprecated/csf-tools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/csf-tools",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Parse and manipulate CSF and Storybook config files",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/docs-tools/package.json b/code/deprecated/docs-tools/package.json
index 002c500c1cb0..e770cbdb059b 100644
--- a/code/deprecated/docs-tools/package.json
+++ b/code/deprecated/docs-tools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/docs-tools",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Shared utility functions for frameworks to implement docs",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/manager-api/package.json b/code/deprecated/manager-api/package.json
index a203750e5675..8684e68816e2 100644
--- a/code/deprecated/manager-api/package.json
+++ b/code/deprecated/manager-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/manager-api",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Core Storybook Manager API & Context",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/manager/package.json b/code/deprecated/manager/package.json
index b8ad3dc9d18b..1dbb422c108a 100644
--- a/code/deprecated/manager/package.json
+++ b/code/deprecated/manager/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/manager",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Core Storybook UI",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/node-logger/package.json b/code/deprecated/node-logger/package.json
index 9b854e1e73d8..fdf95337ddaf 100644
--- a/code/deprecated/node-logger/package.json
+++ b/code/deprecated/node-logger/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/node-logger",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/preview-api/package.json b/code/deprecated/preview-api/package.json
index 682e0a595d1f..43170a1964cb 100644
--- a/code/deprecated/preview-api/package.json
+++ b/code/deprecated/preview-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preview-api",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/preview/package.json b/code/deprecated/preview/package.json
index 91cad5bc2737..d101f0c9b954 100644
--- a/code/deprecated/preview/package.json
+++ b/code/deprecated/preview/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preview",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/router/package.json b/code/deprecated/router/package.json
index f5c22b5ef835..594269e9d721 100644
--- a/code/deprecated/router/package.json
+++ b/code/deprecated/router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/router",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Core Storybook Router",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/telemetry/package.json b/code/deprecated/telemetry/package.json
index d5b569580464..9afdab248259 100644
--- a/code/deprecated/telemetry/package.json
+++ b/code/deprecated/telemetry/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/telemetry",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Telemetry logging for crash reports and usage statistics",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/theming/package.json b/code/deprecated/theming/package.json
index e7078e2c55f3..3eb88844da59 100644
--- a/code/deprecated/theming/package.json
+++ b/code/deprecated/theming/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/theming",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/types/package.json b/code/deprecated/types/package.json
index 0bbcb006eae1..1ba5be3f64a2 100644
--- a/code/deprecated/types/package.json
+++ b/code/deprecated/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/types",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Core Storybook TS Types",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json
index 576788920f79..2c24b9c2fd5c 100644
--- a/code/frameworks/angular/package.json
+++ b/code/frameworks/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json
index a397b8c1d5a6..f617eca484c7 100644
--- a/code/frameworks/ember/package.json
+++ b/code/frameworks/ember/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/ember",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember",
   "bugs": {
diff --git a/code/frameworks/experimental-nextjs-vite/package.json b/code/frameworks/experimental-nextjs-vite/package.json
index daf389813ec1..56e1028156b8 100644
--- a/code/frameworks/experimental-nextjs-vite/package.json
+++ b/code/frameworks/experimental-nextjs-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/experimental-nextjs-vite",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook for Next.js and Vite",
   "keywords": [
     "storybook",
diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json
index d60457db363a..97f0fa5dbf69 100644
--- a/code/frameworks/html-vite/package.json
+++ b/code/frameworks/html-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html-vite",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json
index 754cc9019674..01697940c9a6 100644
--- a/code/frameworks/html-webpack5/package.json
+++ b/code/frameworks/html-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html-webpack5",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json
index 87a35ff52905..60c96f86533e 100644
--- a/code/frameworks/nextjs/package.json
+++ b/code/frameworks/nextjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/nextjs",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook for Next.js",
   "keywords": [
     "storybook",
diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json
index 4fc5571a5f1b..8fb108f1350b 100644
--- a/code/frameworks/preact-vite/package.json
+++ b/code/frameworks/preact-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact-vite",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json
index c1404318b69e..94004e0a1995 100644
--- a/code/frameworks/preact-webpack5/package.json
+++ b/code/frameworks/preact-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact-webpack5",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook for Preact: Develop Preact Component in isolation.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/react-native-web-vite/package.json b/code/frameworks/react-native-web-vite/package.json
index 147f1c243bed..84e6fdd8ac04 100644
--- a/code/frameworks/react-native-web-vite/package.json
+++ b/code/frameworks/react-native-web-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-web-vite",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Develop react-native components an isolated web environment with hot reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json
index a1edb0aa9bc6..2969ce30bf18 100644
--- a/code/frameworks/react-vite/package.json
+++ b/code/frameworks/react-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-vite",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json
index 7db983e04e07..348e86f1869d 100644
--- a/code/frameworks/react-webpack5/package.json
+++ b/code/frameworks/react-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-webpack5",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json
index 5a5a024bad2a..0afcd8816f1e 100644
--- a/code/frameworks/server-webpack5/package.json
+++ b/code/frameworks/server-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/server-webpack5",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json
index c93bda611e59..b4e6bc7b26c8 100644
--- a/code/frameworks/svelte-vite/package.json
+++ b/code/frameworks/svelte-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte-vite",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json
index 458e2c9290bc..38569494e927 100644
--- a/code/frameworks/svelte-webpack5/package.json
+++ b/code/frameworks/svelte-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte-webpack5",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json
index 11ad71aaf0c2..b675aeca8b50 100644
--- a/code/frameworks/sveltekit/package.json
+++ b/code/frameworks/sveltekit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/sveltekit",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook for SvelteKit",
   "keywords": [
     "storybook",
diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json
index c1f245b7514c..9157418d64f2 100644
--- a/code/frameworks/vue3-vite/package.json
+++ b/code/frameworks/vue3-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3-vite",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json
index 73e8c8033baf..0c338bb459c7 100644
--- a/code/frameworks/vue3-webpack5/package.json
+++ b/code/frameworks/vue3-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3-webpack5",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json
index 7fe54f06d4ef..3d7627498177 100644
--- a/code/frameworks/web-components-vite/package.json
+++ b/code/frameworks/web-components-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components-vite",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json
index 5db1d433cdf9..a4e754fac9ca 100644
--- a/code/frameworks/web-components-webpack5/package.json
+++ b/code/frameworks/web-components-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components-webpack5",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
   "keywords": [
     "lit",
diff --git a/code/lib/blocks/package.json b/code/lib/blocks/package.json
index 02778aa210a0..6cb2108e57b4 100644
--- a/code/lib/blocks/package.json
+++ b/code/lib/blocks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/blocks",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook Doc Blocks",
   "keywords": [
     "storybook"
diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json
index 99d8537a512d..d9be68f357b9 100644
--- a/code/lib/cli-sb/package.json
+++ b/code/lib/cli-sb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sb",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook CLI",
   "keywords": [
     "storybook"
diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json
index 8b7d3aae3a32..618b1da2da9e 100644
--- a/code/lib/cli-storybook/package.json
+++ b/code/lib/cli-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/cli",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook CLI",
   "keywords": [
     "storybook"
diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json
index c63ae7acdf82..9f8f8288dfee 100644
--- a/code/lib/cli/package.json
+++ b/code/lib/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "storybook",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook's CLI - install, dev, build, upgrade, and more",
   "keywords": [
     "cli",
diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json
index ec3cad1f1fe0..0218657face5 100644
--- a/code/lib/codemod/package.json
+++ b/code/lib/codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/codemod",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "A collection of codemod scripts written with JSCodeshift",
   "keywords": [
     "storybook"
diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json
index 3224d7089b96..59a734780e40 100644
--- a/code/lib/core-webpack/package.json
+++ b/code/lib/core-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-webpack",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
diff --git a/code/lib/create-storybook/package.json b/code/lib/create-storybook/package.json
index 5e5ee2a48bfc..b96d5bf53097 100644
--- a/code/lib/create-storybook/package.json
+++ b/code/lib/create-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-storybook",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Initialize Storybook into your project",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/lib/create-storybook",
   "bugs": {
diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json
index dc49ef2e1913..6d8525dcf756 100644
--- a/code/lib/csf-plugin/package.json
+++ b/code/lib/csf-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/csf-plugin",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Enrich CSF files via static analysis",
   "keywords": [
     "storybook"
diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json
index a4c16dcff69d..470c17054109 100644
--- a/code/lib/instrumenter/package.json
+++ b/code/lib/instrumenter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/instrumenter",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json
index 8fa32975c148..66edf4ce70f2 100644
--- a/code/lib/react-dom-shim/package.json
+++ b/code/lib/react-dom-shim/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-dom-shim",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json
index 60857a4d2170..5b27d5dce346 100644
--- a/code/lib/source-loader/package.json
+++ b/code/lib/source-loader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/source-loader",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Source loader",
   "keywords": [
     "lib",
diff --git a/code/lib/test/package.json b/code/lib/test/package.json
index 40202d1c5c3e..0263bacac227 100644
--- a/code/lib/test/package.json
+++ b/code/lib/test/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/test",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/package.json b/code/package.json
index eac341475722..4c06baffe08d 100644
--- a/code/package.json
+++ b/code/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/root",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "private": true,
   "description": "Storybook root",
   "homepage": "https://storybook.js.org/",
@@ -294,6 +294,5 @@
         "Dependency Upgrades"
       ]
     ]
-  },
-  "deferredNextVersion": "8.5.0-beta.3"
+  }
 }
diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json
index ea8849294e29..2bf36937638f 100644
--- a/code/presets/create-react-app/package.json
+++ b/code/presets/create-react-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-create-react-app",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook for Create React App preset",
   "keywords": [
     "storybook"
diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json
index 9094d24589c5..618f5f5ae818 100644
--- a/code/presets/html-webpack/package.json
+++ b/code/presets/html-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-html-webpack",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json
index d87bfd54c980..f014c0de59c1 100644
--- a/code/presets/preact-webpack/package.json
+++ b/code/presets/preact-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-preact-webpack",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook for Preact: Develop Preact Component in isolation.",
   "keywords": [
     "storybook"
diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json
index 48b04685bd43..d69d3679d901 100644
--- a/code/presets/react-webpack/package.json
+++ b/code/presets/react-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-react-webpack",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading",
   "keywords": [
     "storybook"
diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json
index aaeb9c2dc159..7103faba76bc 100644
--- a/code/presets/server-webpack/package.json
+++ b/code/presets/server-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-server-webpack",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json
index 1053d6ec17c7..1f3032a5d13a 100644
--- a/code/presets/svelte-webpack/package.json
+++ b/code/presets/svelte-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-svelte-webpack",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json
index 2477b603d753..90e3d499df39 100644
--- a/code/presets/vue3-webpack/package.json
+++ b/code/presets/vue3-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-vue3-webpack",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json
index 3726b3e2a2a1..53ba4df86961 100644
--- a/code/renderers/html/package.json
+++ b/code/renderers/html/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook HTML renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json
index 411e0a72028d..6bea1d8188cb 100644
--- a/code/renderers/preact/package.json
+++ b/code/renderers/preact/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook Preact renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json
index 3a2bc736cfec..a9c31f243679 100644
--- a/code/renderers/react/package.json
+++ b/code/renderers/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook React renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json
index 484c3eb38f82..bf61b551fd49 100644
--- a/code/renderers/server/package.json
+++ b/code/renderers/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/server",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook Server renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json
index 7aa8fec6f5c9..4c7357df774e 100644
--- a/code/renderers/svelte/package.json
+++ b/code/renderers/svelte/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook Svelte renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json
index 4aef83519c25..fd72344e4bd7 100644
--- a/code/renderers/vue3/package.json
+++ b/code/renderers/vue3/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook Vue 3 renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json
index c2f23a997864..c24ed9f866f1 100644
--- a/code/renderers/web-components/package.json
+++ b/code/renderers/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components",
-  "version": "8.5.0-beta.2",
+  "version": "8.5.0-beta.3",
   "description": "Storybook web-components renderer",
   "keywords": [
     "lit",