[CL-717][PM-27966] Update to Angular 20 and Storybook 9 (#17638)

.github/renovate.json5

@@ -119,7 +119,7 @@
         "rimraf",
         "ssh-encoding",
         "ssh-key",
-        "@storybook/web-components-webpack5",
+        "@storybook/web-components-vite",
         "tabbable",
         "tldts",
         "wait-on",
@@ -311,26 +311,24 @@
         "@compodoc/compodoc",
         "@ng-select/ng-select",
         "@storybook/addon-a11y",
-        "@storybook/addon-actions",
         "@storybook/addon-designs",
-        "@storybook/addon-essentials",
+        "@storybook/addon-docs",
-        "@storybook/addon-interactions",
         "@storybook/addon-links",
         "@storybook/test-runner",
         "@storybook/addon-themes",
         "@storybook/angular",
-        "@storybook/manager-api",
-        "@storybook/theming",
         "@types/react",
         "autoprefixer",
         "bootstrap",
         "chromatic",
         "ngx-toastr",
+        "path-browserify",
         "react",
         "react-dom",
         "remark-gfm",
         "storybook",
         "tailwindcss",
+        "vite-tsconfig-paths",
         "zone.js",
         "@tailwindcss/container-queries",
       ],

.storybook/main.ts

@@ -28,15 +28,13 @@ const config: StorybookConfig = {
   ],
   addons: [
     getAbsolutePath("@storybook/addon-links"),
-    getAbsolutePath("@storybook/addon-essentials"),
     getAbsolutePath("@storybook/addon-a11y"),
     getAbsolutePath("@storybook/addon-designs"),
-    getAbsolutePath("@storybook/addon-interactions"),
     getAbsolutePath("@storybook/addon-themes"),
     {
       // @storybook/addon-docs is part of @storybook/addon-essentials
-      // eslint-disable-next-line storybook/no-uninstalled-addons
+
-      name: "@storybook/addon-docs",
+      name: getAbsolutePath("@storybook/addon-docs"),
       options: {
         mdxPluginOptions: {
           mdxCompileOptions: {
@@ -60,6 +58,10 @@ const config: StorybookConfig = {
   webpackFinal: async (config, { configType }) => {
     if (config.resolve) {
       config.resolve.plugins = [new TsconfigPathsPlugin()] as any;
+      config.resolve.fallback = {
+        ...config.resolve.fallback,
+        path: require.resolve("path-browserify"),
+      };
     }
     return config;
   },

.storybook/manager.js

@@ -1,5 +1,5 @@
-import { addons } from "@storybook/manager-api";
+import { addons } from "storybook/manager-api";
-import { create } from "@storybook/theming/create";
+import { create } from "storybook/theming";
 
 const lightTheme = create({
   base: "light",

.storybook/preview.tsx

@@ -49,7 +49,7 @@ const preview: Preview = {
       },
     },
     backgrounds: {
-      disable: true,
+      disabled: true,
     },
   },
   tags: ["autodocs"],

angular.json

@@ -220,5 +220,31 @@
         }
       }
     }
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
   }
 }

apps/browser/src/autofill/content/components/.lit-storybook/main.ts

@@ -1,13 +1,9 @@
 import { createRequire } from "module";
-import { dirname, join, resolve } from "path";
+import { dirname, join } from "path";
-import { fileURLToPath } from "url";
 
-import type { StorybookConfig } from "@storybook/web-components-webpack5";
+import type { StorybookConfig } from "@storybook/web-components-vite";
 import remarkGfm from "remark-gfm";
-import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
+import tsconfigPaths from "vite-tsconfig-paths";
-
-const currentFile = fileURLToPath(import.meta.url);
-const currentDirectory = dirname(currentFile);
 
 const require = createRequire(import.meta.url);
 
@@ -21,7 +17,6 @@ const config: StorybookConfig = {
     getAbsolutePath("@storybook/addon-essentials"),
     getAbsolutePath("@storybook/addon-a11y"),
     getAbsolutePath("@storybook/addon-designs"),
-    getAbsolutePath("@storybook/addon-interactions"),
     {
       name: "@storybook/addon-docs",
       options: {
@@ -34,10 +29,8 @@ const config: StorybookConfig = {
     },
   ],
   framework: {
-    name: getAbsolutePath("@storybook/web-components-webpack5"),
+    name: getAbsolutePath("@storybook/web-components-vite"),
-    options: {
+    options: {},
-      legacyRootApi: true,
-    },
   },
   core: {
     disableTelemetry: true,
@@ -46,33 +39,12 @@ const config: StorybookConfig = {
     ...existingConfig,
     FLAGS: JSON.stringify({}),
   }),
-  webpackFinal: async (config) => {
+  viteFinal: async (config) => {
-    if (config.resolve) {
+    return {
-      config.resolve.plugins = [
+      ...config,
-        new TsconfigPathsPlugin({
+      plugins: [...(config.plugins ?? []), tsconfigPaths()],
-          configFile: resolve(currentDirectory, "../../../../../tsconfig.json"),
+    };
-        }),
-      ] as any;
-    }
-
-    if (config.module && config.module.rules) {
-      config.module.rules.push({
-        test: /\.(ts|tsx)$/,
-        exclude: /node_modules/,
-        use: [
-          {
-            loader: require.resolve("ts-loader"),
-          },
-        ],
-      });
-      config.module.rules.push({
-        test: /\.scss$/,
-        use: [require.resolve("css-loader"), require.resolve("sass-loader")],
-      });
-    }
-    return config;
   },
-  docs: {},
 };
 
 export default config;

apps/browser/src/autofill/content/components/lit-stories/.lit-docs/action-button.mdx

@@ -1,4 +1,4 @@
-import { Meta, Controls, Primary } from "@storybook/addon-docs";
+import { Meta, Controls, Primary } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./action-button.lit-stories";
 

apps/browser/src/autofill/content/components/lit-stories/.lit-docs/badge-button.mdx

@@ -1,4 +1,4 @@
-import { Meta, Controls, Primary } from "@storybook/addon-docs";
+import { Meta, Controls, Primary } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./badge-button.lit-stories";
 

apps/browser/src/autofill/content/components/lit-stories/.lit-docs/body.mdx

@@ -1,4 +1,4 @@
-import { Meta, Controls, Primary } from "@storybook/addon-docs";
+import { Meta, Controls, Primary } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./body.lit-stories";
 

apps/browser/src/autofill/content/components/lit-stories/.lit-docs/close-button.mdx

@@ -1,4 +1,4 @@
-import { Meta, Controls, Primary } from "@storybook/addon-docs";
+import { Meta, Controls, Primary } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./close-button.lit-stories";
 

apps/browser/src/autofill/content/components/lit-stories/.lit-docs/edit-button.mdx

@@ -1,4 +1,4 @@
-import { Meta, Controls, Primary } from "@storybook/addon-docs";
+import { Meta, Controls, Primary } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./edit-button.lit-stories";
 

apps/browser/src/autofill/content/components/lit-stories/.lit-docs/footer.mdx

@@ -1,4 +1,4 @@
-import { Meta, Controls, Primary } from "@storybook/addon-docs";
+import { Meta, Controls, Primary } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./footer.lit-stories";
 

apps/browser/src/autofill/content/components/lit-stories/.lit-docs/header.mdx

@@ -1,4 +1,4 @@
-import { Meta, Controls, Primary } from "@storybook/addon-docs";
+import { Meta, Controls, Primary } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./header.lit-stories";
 

apps/browser/src/autofill/content/components/lit-stories/.lit-docs/icons.mdx

@@ -1,4 +1,4 @@
-import { Meta, Controls } from "@storybook/addon-docs";
+import { Meta, Controls } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./icons.lit-stories";
 

apps/browser/src/platform/popup/layout/popup-layout.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./popup-layout.stories";
 

apps/browser/src/popup/services/init.service.ts

@@ -1,5 +1,4 @@
-import { DOCUMENT } from "@angular/common";
+import { inject, Inject, Injectable, DOCUMENT } from "@angular/core";
-import { inject, Inject, Injectable } from "@angular/core";
 
 import { AbstractThemingService } from "@bitwarden/angular/platform/services/theming/theming.service.abstraction";
 import { TwoFactorService } from "@bitwarden/common/auth/two-factor";

apps/desktop/src/app/services/init.service.ts

@@ -1,5 +1,4 @@
-import { DOCUMENT } from "@angular/common";
+import { Inject, Injectable, DOCUMENT } from "@angular/core";
-import { Inject, Injectable } from "@angular/core";
 import { firstValueFrom } from "rxjs";
 
 import { AbstractThemingService } from "@bitwarden/angular/platform/services/theming/theming.service.abstraction";

apps/web/src/app/admin-console/organizations/shared/components/access-selector/storybook-utils.ts

@@ -1,4 +1,4 @@
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 
 import { AccessItemType, AccessItemView } from "./access-selector.models";
 

apps/web/src/app/core/init.service.ts

@@ -1,5 +1,4 @@
-import { DOCUMENT } from "@angular/common";
+import { Inject, Injectable, DOCUMENT } from "@angular/core";
-import { Inject, Injectable } from "@angular/core";
 import { firstValueFrom } from "rxjs";
 
 import { AbstractThemingService } from "@bitwarden/angular/platform/services/theming/theming.service.abstraction";

apps/web/src/app/vault/components/browser-extension-prompt/browser-extension-prompt.component.ts

@@ -1,5 +1,12 @@
-import { CommonModule, DOCUMENT } from "@angular/common";
+import { CommonModule } from "@angular/common";
-import { Component, Inject, OnDestroy, OnInit, ChangeDetectionStrategy } from "@angular/core";
+import {
+  Component,
+  Inject,
+  OnDestroy,
+  OnInit,
+  DOCUMENT,
+  ChangeDetectionStrategy,
+} from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { ActivatedRoute } from "@angular/router";
 import { map, Observable, of, tap } from "rxjs";

apps/web/src/app/vault/components/setup-extension/add-extension-videos.component.ts

@@ -1,5 +1,5 @@
-import { CommonModule, DOCUMENT } from "@angular/common";
+import { CommonModule } from "@angular/common";
-import { Component, ViewChildren, QueryList, ElementRef, inject } from "@angular/core";
+import { Component, ViewChildren, QueryList, ElementRef, inject, DOCUMENT } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { debounceTime, fromEvent } from "rxjs";
 

apps/web/src/app/vault/components/setup-extension/setup-extension.component.ts

@@ -1,5 +1,5 @@
-import { DOCUMENT, NgIf } from "@angular/common";
+import { NgIf } from "@angular/common";
-import { Component, DestroyRef, inject, OnDestroy, OnInit } from "@angular/core";
+import { Component, DestroyRef, inject, OnDestroy, OnInit, DOCUMENT } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { Router, RouterModule } from "@angular/router";
 import { firstValueFrom, pairwise, startWith } from "rxjs";

eslint.config.mjs

@@ -71,6 +71,7 @@ export default tseslint.config(
       "@angular-eslint/no-output-on-prefix": 0,
       "@angular-eslint/no-output-rename": "error",
       "@angular-eslint/no-outputs-metadata-property": "error",
+      "@angular-eslint/prefer-inject": 0,
       "@angular-eslint/prefer-on-push-component-change-detection": "error",
       "@angular-eslint/prefer-output-emitter-ref": "error",
       "@angular-eslint/prefer-signals": "error",

libs/angular/src/components/modal/modal-injector.ts

@@ -1,4 +1,4 @@
-import { InjectFlags, InjectOptions, Injector, ProviderToken } from "@angular/core";
+import { InjectOptions, Injector, ProviderToken } from "@angular/core";
 
 export class ModalInjector implements Injector {
   constructor(
@@ -12,8 +12,8 @@ export class ModalInjector implements Injector {
     options: InjectOptions & { optional?: false },
   ): T;
   get<T>(token: ProviderToken<T>, notFoundValue: null, options: InjectOptions): T;
-  get<T>(token: ProviderToken<T>, notFoundValue?: T, options?: InjectOptions | InjectFlags): T;
+  get<T>(token: ProviderToken<T>, notFoundValue?: T, options?: InjectOptions | null): T;
-  get<T>(token: ProviderToken<T>, notFoundValue?: T, flags?: InjectFlags): T;
+  get<T>(token: ProviderToken<T>, notFoundValue?: T, flags?: null): T;
   get(token: any, notFoundValue?: any): any;
   get(token: any, notFoundValue?: any, flags?: any): any {
     return this._additionalTokens.get(token) ?? this._parentInjector.get<any>(token, notFoundValue);

libs/auth/src/angular/input-password/input-password.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story } from "@storybook/addon-docs";
+import { Meta, Story } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./input-password.stories.ts";
 

libs/auth/src/angular/input-password/input-password.stories.ts

@@ -1,8 +1,8 @@
 import { importProvidersFrom } from "@angular/core";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import { action } from "@storybook/addon-actions";
 import { Meta, StoryObj, applicationConfig } from "@storybook/angular";
 import { of } from "rxjs";
+import { action } from "storybook/actions";
 import { ZXCVBNResult } from "zxcvbn";
 
 import { AuditService } from "@bitwarden/common/abstractions/audit.service";

libs/auth/src/angular/registration/registration-start/registration-start.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Controls } from "@storybook/addon-docs";
+import { Meta, Story, Controls } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./registration-start.stories";
 

libs/components/src/a11y/aria-disabled-click-capture.service.ts

@@ -1,5 +1,4 @@
-import { DOCUMENT } from "@angular/common";
+import { Injectable, Inject, NgZone, OnDestroy, DOCUMENT } from "@angular/core";
-import { Injectable, Inject, NgZone, OnDestroy } from "@angular/core";
 
 @Injectable({ providedIn: "root" })
 export class AriaDisabledClickCaptureService implements OnDestroy {

libs/components/src/anon-layout/anon-layout-wrapper.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Controls } from "@storybook/addon-docs";
+import { Meta, Story, Controls } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./anon-layout-wrapper.stories";
 

libs/components/src/anon-layout/anon-layout.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Controls } from "@storybook/addon-docs";
+import { Meta, Story, Controls } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./anon-layout.stories";
 

libs/components/src/async-actions/in-forms.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs";
+import { Meta } from "@storybook/addon-docs/blocks";
 
 <Meta title="Component Library/Async Actions/In Forms/Documentation" />
 

libs/components/src/async-actions/in-forms.stories.ts

@@ -1,8 +1,8 @@
 import { Component } from "@angular/core";
 import { FormsModule, ReactiveFormsModule, Validators, FormBuilder } from "@angular/forms";
-import { action } from "@storybook/addon-actions";
 import { Meta, moduleMetadata, StoryObj } from "@storybook/angular";
 import { delay, of } from "rxjs";
+import { action } from "storybook/actions";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";

libs/components/src/async-actions/overview.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs";
+import { Meta } from "@storybook/addon-docs/blocks";
 
 <Meta title="Component Library/Async Actions/Overview" />
 

libs/components/src/async-actions/standalone.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story } from "@storybook/addon-docs";
+import { Meta, Story } from "@storybook/addon-docs/blocks";
 import * as stories from "./standalone.stories.ts";
 
 <Meta of={stories} />

libs/components/src/async-actions/standalone.stories.ts

@@ -1,7 +1,7 @@
 import { Component } from "@angular/core";
-import { action } from "@storybook/addon-actions";
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
 import { delay, of } from "rxjs";
+import { action } from "storybook/actions";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";

libs/components/src/avatar/avatar.mdx

@@ -1,4 +1,4 @@
-import { Description, Meta, Canvas, Primary, Controls, Title } from "@storybook/addon-docs";
+import { Meta, Description, Canvas, Primary, Controls, Title } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./avatar.stories";
 

libs/components/src/badge/badge.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./badge.stories";
 

libs/components/src/banner/banner.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Controls, Description, Meta, Primary, Title } from "@storybook/addon-docs";
+import { Canvas, Controls, Description, Meta, Primary, Title } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./banner.stories";
 

libs/components/src/breadcrumbs/breadcrumbs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./breadcrumbs.stories";
 

libs/components/src/button/button.mdx

@@ -6,7 +6,7 @@ import {
   Controls,
   Title,
   Description,
-} from "@storybook/addon-docs";
+} from "@storybook/addon-docs/blocks";
 
 import * as stories from "./button.stories";
 

libs/components/src/callout/callout.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./callout.stories";
 

libs/components/src/card/base-card/base-card.mdx

@@ -1,4 +1,4 @@
-import { Meta, Primary, Controls, Canvas, Title, Description } from "@storybook/addon-docs";
+import { Meta, Primary, Controls, Canvas, Title, Description } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./base-card.stories";
 

libs/components/src/checkbox/checkbox.mdx

@@ -1,4 +1,12 @@
-import { Meta, Canvas, Source, Primary, Controls, Title, Description } from "@storybook/addon-docs";
+import {
+  Meta,
+  Canvas,
+  Source,
+  Primary,
+  Controls,
+  Title,
+  Description,
+} from "@storybook/addon-docs/blocks";
 
 import * as stories from "./checkbox.stories";
 

libs/components/src/chip-select/chip-select.mdx

@@ -1,4 +1,4 @@
-import { Meta, Primary, Controls, Canvas, Title, Description } from "@storybook/addon-docs";
+import { Meta, Primary, Controls, Canvas, Title, Description } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./chip-select.stories";
 

libs/components/src/chip-select/chip-select.stories.ts

@@ -1,6 +1,6 @@
 import { FormsModule } from "@angular/forms";
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
-import { getAllByRole, userEvent } from "@storybook/test";
+import { getAllByRole, userEvent } from "storybook/test";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 

libs/components/src/color-password/color-password.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./color-password.stories";
 

libs/components/src/container/container.mdx

@@ -1,4 +1,4 @@
-import { Meta, Primary, Title, Description } from "@storybook/addon-docs";
+import { Meta, Primary, Title, Description } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./container.stories";
 

libs/components/src/dialog/dialog.service.stories.ts

@@ -1,9 +1,9 @@
 import { DIALOG_DATA, DialogRef } from "@angular/cdk/dialog";
-import { Component, Inject } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { NoopAnimationsModule, provideAnimations } from "@angular/platform-browser/animations";
 import { RouterTestingModule } from "@angular/router/testing";
 import { Meta, StoryObj, applicationConfig, moduleMetadata } from "@storybook/angular";
-import { getAllByRole, userEvent } from "@storybook/test";
+import { getAllByRole, userEvent } from "storybook/test";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
@@ -36,7 +36,7 @@ interface Animal {
   imports: [ButtonModule, LayoutComponent],
 })
 class StoryDialogComponent {
-  constructor(public dialogService: DialogService) {}
+  dialogService = inject(DialogService);
 
   openDialog() {
     this.dialogService.open(StoryDialogContentComponent, {
@@ -85,10 +85,8 @@ class StoryDialogComponent {
   imports: [DialogModule, ButtonModule],
 })
 class StoryDialogContentComponent {
-  constructor(
+  dialogRef = inject(DialogRef);
-    public dialogRef: DialogRef,
+  private data = inject<Animal>(DIALOG_DATA);
-    @Inject(DIALOG_DATA) private data: Animal,
-  ) {}
 
   get animal() {
     return this.data?.animal;
@@ -118,10 +116,8 @@ class StoryDialogContentComponent {
   imports: [DialogModule, ButtonModule],
 })
 class NonDismissableContentComponent {
-  constructor(
+  dialogRef = inject(DialogRef);
-    public dialogRef: DialogRef,
+  private data = inject<Animal>(DIALOG_DATA);
-    @Inject(DIALOG_DATA) private data: Animal,
-  ) {}
 
   get animal() {
     return this.data?.animal;

libs/components/src/dialog/dialog/dialog.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./dialog.stories";
 

libs/components/src/dialog/dialogs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Source } from "@storybook/addon-docs";
+import { Meta, Canvas, Source } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./dialog.service.stories";
 

libs/components/src/dialog/simple-dialog/simple-dialog.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./simple-dialog.stories";
 

libs/components/src/dialog/simple-dialog/simple-dialog.service.stories.ts

@@ -1,8 +1,8 @@
 import { DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
-import { Component, Inject } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { provideAnimations } from "@angular/platform-browser/animations";
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
-import { getAllByRole, userEvent } from "@storybook/test";
+import { getAllByRole, userEvent } from "storybook/test";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
@@ -30,7 +30,7 @@ interface Animal {
   imports: [ButtonModule],
 })
 class StoryDialogComponent {
-  constructor(public dialogService: DialogService) {}
+  dialogService = inject(DialogService);
 
   openSimpleDialog() {
     this.dialogService.open(SimpleDialogContentComponent, {
@@ -84,10 +84,8 @@ class StoryDialogComponent {
   imports: [ButtonModule, DialogModule],
 })
 class SimpleDialogContentComponent {
-  constructor(
+  dialogRef = inject(DialogRef);
-    public dialogRef: DialogRef,
+  private data = inject<Animal>(DIALOG_DATA);
-    @Inject(DIALOG_DATA) private data: Animal,
-  ) {}
 
   get animal() {
     return this.data?.animal;
@@ -115,10 +113,8 @@ class SimpleDialogContentComponent {
   imports: [ButtonModule, DialogModule],
 })
 class NonDismissableWithPrimaryButtonContentComponent {
-  constructor(
+  dialogRef = inject(DialogRef);
-    public dialogRef: DialogRef,
+  private data = inject<Animal>(DIALOG_DATA);
-    @Inject(DIALOG_DATA) private data: Animal,
-  ) {}
 
   get animal() {
     return this.data?.animal;
@@ -141,10 +137,8 @@ class NonDismissableWithPrimaryButtonContentComponent {
   imports: [ButtonModule, DialogModule],
 })
 class NonDismissableWithNoButtonsContentComponent {
-  constructor(
+  dialogRef = inject(DialogRef);
-    public dialogRef: DialogRef,
+  private data = inject<Animal>(DIALOG_DATA);
-    @Inject(DIALOG_DATA) private data: Animal,
-  ) {}
 
   get animal() {
     return this.data?.animal;

libs/components/src/disclosure/disclosure.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./disclosure.stories";
 

libs/components/src/drawer/drawer.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./drawer.stories";
 

libs/components/src/form-field/form-field.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Source, Primary, Controls } from "@storybook/addon-docs";
+import { Meta, Canvas, Source, Primary, Controls } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./form-field.stories";
 

libs/components/src/form-field/multi-select.stories.ts

@@ -6,8 +6,8 @@ import {
   FormGroup,
 } from "@angular/forms";
 import { NgSelectModule } from "@ng-select/ng-select";
-import { action } from "@storybook/addon-actions";
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
+import { action } from "storybook/actions";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 

libs/components/src/form/form.stories.ts

@@ -1,6 +1,6 @@
 import { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from "@angular/forms";
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
-import { userEvent, getByText } from "@storybook/test";
+import { userEvent, getByText } from "storybook/test";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 

libs/components/src/form/forms.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Source } from "@storybook/addon-docs";
+import { Meta, Canvas, Source } from "@storybook/addon-docs/blocks";
 
 import * as formStories from "./form.stories";
 import * as fieldStories from "../form-field/form-field.stories";

libs/components/src/icon-button/icon-button.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./icon-button.stories";
 

libs/components/src/icon/icon.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Controls } from "@storybook/addon-docs";
+import { Meta, Story, Controls } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./icon.stories";
 

libs/components/src/input/autofocus.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./autofocus.stories";
 

libs/components/src/input/input.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs";
+import { Meta } from "@storybook/addon-docs/blocks";
 
 <Meta title="Component Library/Form/Input Directive" />
 

libs/components/src/item/item.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./item.stories";
 

libs/components/src/layout/layout.stories.ts

@@ -1,6 +1,6 @@
 import { RouterTestingModule } from "@angular/router/testing";
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
-import { userEvent } from "@storybook/test";
+import { userEvent } from "storybook/test";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 

libs/components/src/link/link.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Primary, Controls, Title, Description } from "@storybook/addon-docs";
+import { Meta, Story, Primary, Controls, Title, Description } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./link.stories";
 

libs/components/src/menu/menu.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./menu.stories";
 

libs/components/src/multi-select/multi-select.component.ts

@@ -108,11 +108,11 @@ export class MultiSelectComponent implements OnInit, BitFormFieldControl, Contro
   /** Needs to be arrow function to retain `this` scope. */
   keyDown = (event: KeyboardEvent) => {
     const select = this.select();
-    if (!select.isOpen && event.key === "Enter" && !hasModifierKey(event)) {
+    if (!select.isOpen() && event.key === "Enter" && !hasModifierKey(event)) {
       return false;
     }
 
-    if (select.isOpen && event.key === "Escape" && !hasModifierKey(event)) {
+    if (select.isOpen() && event.key === "Escape" && !hasModifierKey(event)) {
       this.selectedItems = [];
       select.close();
       event.stopPropagation();
@@ -198,7 +198,9 @@ export class MultiSelectComponent implements OnInit, BitFormFieldControl, Contro
   }
   set ariaDescribedBy(value: string | undefined) {
     this._ariaDescribedBy = value;
-    this.select()?.searchInput.nativeElement.setAttribute("aria-describedby", value ?? "");
+    this.select()
+      ?.searchInput()
+      .nativeElement.setAttribute("aria-describedby", value ?? "");
   }
   private _ariaDescribedBy?: string;
 

libs/components/src/popover/popover.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./popover.stories";
 

libs/components/src/popover/popover.stories.ts

@@ -1,5 +1,5 @@
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
-import { getByRole, userEvent } from "@storybook/test";
+import { getByRole, userEvent } from "storybook/test";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 

libs/components/src/progress/progress.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./progress.stories";
 

libs/components/src/search/search.mdx

@@ -1,4 +1,12 @@
-import { Meta, Canvas, Source, Primary, Controls, Title, Description } from "@storybook/addon-docs";
+import {
+  Meta,
+  Canvas,
+  Source,
+  Primary,
+  Controls,
+  Title,
+  Description,
+} from "@storybook/addon-docs/blocks";
 
 import * as stories from "./search.stories";
 

libs/components/src/section/section.mdx

@@ -1,4 +1,4 @@
-import { Meta, Primary, Controls, Canvas } from "@storybook/addon-docs";
+import { Meta, Primary, Controls, Canvas } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./section.stories";
 

libs/components/src/select/select.component.ts

@@ -158,7 +158,9 @@ export class SelectComponent<T> implements BitFormFieldControl, ControlValueAcce
   }
   set ariaDescribedBy(value: string | undefined) {
     this._ariaDescribedBy = value;
-    this.select()?.searchInput.nativeElement.setAttribute("aria-describedby", value ?? "");
+    this.select()
+      ?.searchInput()
+      .nativeElement.setAttribute("aria-describedby", value ?? "");
   }
   private _ariaDescribedBy?: string;
 
@@ -218,7 +220,7 @@ export class SelectComponent<T> implements BitFormFieldControl, ControlValueAcce
    * Needs to be arrow function to retain `this` scope.
    */
   protected onKeyDown = (event: KeyboardEvent) => {
-    if (this.select().isOpen && event.key === "Escape" && !hasModifierKey(event)) {
+    if (this.select().isOpen() && event.key === "Escape" && !hasModifierKey(event)) {
       event.stopPropagation();
     }
 

libs/components/src/select/select.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Source, Primary, Controls } from "@storybook/addon-docs";
+import { Meta, Canvas, Source, Primary, Controls } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./select.stories";
 

libs/components/src/skeleton/skeleton.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Source } from "@storybook/addon-docs";
+import { Meta, Canvas, Source } from "@storybook/addon-docs/blocks";
 
 import * as skeletonStories from "./skeleton.stories";
 import * as skeletonTextStories from "./skeleton-text.stories";

libs/components/src/stepper/stepper.mdx

@@ -1,4 +1,12 @@
-import { Meta, Story, Source, Primary, Controls, Title, Description } from "@storybook/addon-docs";
+import {
+  Meta,
+  Story,
+  Source,
+  Primary,
+  Controls,
+  Title,
+  Description,
+} from "@storybook/addon-docs/blocks";
 
 import * as stories from "./stepper.stories";
 

libs/components/src/stories/colors.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs";
+import { Meta } from "@storybook/addon-docs/blocks";
 
 <Meta title="Documentation/Colors" />
 

libs/components/src/stories/compact-mode.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
 
 import * as itemStories from "../item/item.stories";
 import * as popupLayoutStories from "../../../../apps/browser/src/platform/popup/layout/popup-layout.stories";

libs/components/src/stories/icons/icons.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
+import { Meta, Canvas } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./icons.stories";
 

libs/components/src/stories/introduction.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs";
+import { Meta } from "@storybook/addon-docs/blocks";
 
 <Meta title="Documentation/Introduction" />
 

libs/components/src/stories/kitchen-sink/kitchen-sink.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story } from "@storybook/addon-docs";
+import { Meta, Story } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./kitchen-sink.stories";
 

libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts

@@ -9,7 +9,7 @@ import {
   fireEvent,
   getByText,
   getAllByLabelText,
-} from "@storybook/test";
+} from "storybook/test";
 
 import { PasswordManagerLogo } from "@bitwarden/assets/svg";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";

libs/components/src/stories/migration.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs";
+import { Meta } from "@storybook/addon-docs/blocks";
 
 <Meta title="Documentation/Migration" />
 

libs/components/src/stories/responsive-design.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs";
+import { Meta } from "@storybook/addon-docs/blocks";
 
 <Meta title="Documentation/Responsive Design" />
 

libs/components/src/stories/virtual-scrolling.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs";
+import { Meta } from "@storybook/addon-docs/blocks";
 
 <Meta title="Documentation/Virtual Scrolling" />
 

libs/components/src/switch/switch.mdx

@@ -1,4 +1,12 @@
-import { Meta, Canvas, Source, Primary, Controls, Title, Description } from "@storybook/addon-docs";
+import {
+  Meta,
+  Canvas,
+  Source,
+  Primary,
+  Controls,
+  Title,
+  Description,
+} from "@storybook/addon-docs/blocks";
 
 import * as stories from "./switch.stories";
 

libs/components/src/table/table.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Source, Primary, Controls } from "@storybook/addon-docs";
+import { Meta, Story, Source, Primary, Controls } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./table.stories";
 

libs/components/src/tabs/tabs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./tabs.stories";
 import * as dialogStories from "../dialog/dialog/dialog.stories";

libs/components/src/toast/toast.mdx

@@ -1,4 +1,12 @@
-import { Meta, Canvas, Source, Primary, Controls, Title, Description } from "@storybook/addon-docs";
+import {
+  Meta,
+  Canvas,
+  Source,
+  Primary,
+  Controls,
+  Title,
+  Description,
+} from "@storybook/addon-docs/blocks";
 
 import * as stories from "./toast.stories";
 

libs/components/src/toast/toast.stories.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from "@angular/common";
 import { Component, Input } from "@angular/core";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import { action } from "@storybook/addon-actions";
 import { Meta, StoryObj, applicationConfig, moduleMetadata } from "@storybook/angular";
+import { action } from "storybook/actions";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 

libs/components/src/toggle-group/toggle-group.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Primary, Controls, Canvas } from "@storybook/addon-docs";
+import { Meta, Story, Primary, Controls, Canvas } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./toggle-group.stories";
 

libs/components/src/tooltip/tooltip.mdx

@@ -1,4 +1,12 @@
-import { Meta, Canvas, Source, Primary, Controls, Title, Description } from "@storybook/addon-docs";
+import {
+  Meta,
+  Canvas,
+  Source,
+  Primary,
+  Controls,
+  Title,
+  Description,
+} from "@storybook/addon-docs/blocks";
 
 import * as stories from "./tooltip.stories";
 

libs/components/src/tooltip/tooltip.stories.ts

@@ -1,6 +1,6 @@
 import { signal } from "@angular/core";
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
-import { getByRole, userEvent } from "@storybook/test";
+import { getByRole, userEvent } from "storybook/test";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 

libs/components/src/typography/typography.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./typography.stories";
 

libs/pricing/src/components/cart-summary/cart-summary.component.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
 import * as CartSummaryStories from "./cart-summary.component.stories";
 
 <Meta of={CartSummaryStories} />

libs/pricing/src/components/discount-badge/discount-badge.component.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
 import * as DiscountBadgeStories from "./discount-badge.component.stories";
 
 <Meta of={DiscountBadgeStories} />

libs/pricing/src/components/pricing-card/pricing-card.component.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
 import * as PricingCardStories from "./pricing-card.component.stories";
 
 <Meta of={PricingCardStories} />

libs/vault/src/cipher-form/cipher-form.mdx

@@ -1,4 +1,4 @@
-import { Controls, Meta, Primary } from "@storybook/addon-docs";
+import { Controls, Meta, Primary } from "@storybook/addon-docs/blocks";
 
 import * as stories from "./cipher-form.stories";
 

libs/vault/src/cipher-form/cipher-form.stories.ts

@@ -2,7 +2,6 @@
 // @ts-strict-ignore
 import { importProvidersFrom, signal } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
-import { action } from "@storybook/addon-actions";
 import {
   applicationConfig,
   componentWrapperDecorator,
@@ -11,6 +10,7 @@ import {
   StoryObj,
 } from "@storybook/angular";
 import { BehaviorSubject, of } from "rxjs";
+import { action } from "storybook/actions";
 
 // This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
 // eslint-disable-next-line no-restricted-imports