From c3d0a2d858b226d89b6fd1d26d3b0b7ccbd435cb Mon Sep 17 00:00:00 2001
From: Oscar Hinton <Hinton@users.noreply.github.com>
Date: Wed, 4 Feb 2026 16:03:43 +0100
Subject: [PATCH 01/26] Add a way to add folders in the desktop ui migration
 milestone 1 (#18632)

---
 .../src/vault/app/vault-v3/vault.component.html       |  1 +
 .../src/vault/app/vault/vault-items-v2.component.html |  8 ++++++++
 .../src/vault/app/vault/vault-items-v2.component.ts   | 11 +++++++++--
 .../src/vault/components/vault-items.component.ts     |  2 +-
 4 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/apps/desktop/src/vault/app/vault-v3/vault.component.html b/apps/desktop/src/vault/app/vault-v3/vault.component.html
index 42151500964..51f6426a1ba 100644
--- a/apps/desktop/src/vault/app/vault-v3/vault.component.html
+++ b/apps/desktop/src/vault/app/vault-v3/vault.component.html
@@ -6,6 +6,7 @@
     (onCipherClicked)="viewCipher($event)"
     (onCipherRightClicked)="viewCipherMenu($event)"
     (onAddCipher)="addCipher($event)"
+    (onAddFolder)="addFolder()"
     [showPremiumCallout]="showPremiumCallout$ | async"
   >
   </app-vault-items-v2>
diff --git a/apps/desktop/src/vault/app/vault/vault-items-v2.component.html b/apps/desktop/src/vault/app/vault/vault-items-v2.component.html
index 84c0cd8a1fb..7f402d7bfb9 100644
--- a/apps/desktop/src/vault/app/vault/vault-items-v2.component.html
+++ b/apps/desktop/src/vault/app/vault/vault-items-v2.component.html
@@ -95,5 +95,13 @@
         {{ itemTypes.labelKey | i18n }}
       </button>
     }
+    @if (desktopMigrationMilestone1()) {
+      <bit-menu-divider />
+
+      <button type="button" bitMenuItem (click)="onAddFolder.emit()">
+        <i class="bwi bwi-folder tw-mr-1" aria-hidden="true"></i>
+        {{ "folder" | i18n }}
+      </button>
+    }
   </bit-menu>
 </ng-template>
diff --git a/apps/desktop/src/vault/app/vault/vault-items-v2.component.ts b/apps/desktop/src/vault/app/vault/vault-items-v2.component.ts
index a6582f6de58..50f00025238 100644
--- a/apps/desktop/src/vault/app/vault/vault-items-v2.component.ts
+++ b/apps/desktop/src/vault/app/vault/vault-items-v2.component.ts
@@ -1,12 +1,13 @@
 import { ScrollingModule } from "@angular/cdk/scrolling";
 import { CommonModule } from "@angular/common";
-import { Component, input } from "@angular/core";
-import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { Component, input, output } from "@angular/core";
+import { takeUntilDestroyed, toSignal } from "@angular/core/rxjs-interop";
 import { distinctUntilChanged, debounceTime } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { VaultItemsComponent as BaseVaultItemsComponent } from "@bitwarden/angular/vault/components/vault-items.component";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { uuidAsString } from "@bitwarden/common/platform/abstractions/sdk/sdk.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
@@ -32,6 +33,12 @@ import { SearchBarService } from "../../../app/layout/search/search-bar.service"
 export class VaultItemsV2Component<C extends CipherViewLike> extends BaseVaultItemsComponent<C> {
   readonly showPremiumCallout = input<boolean>(false);
 
+  readonly onAddFolder = output<void>();
+
+  protected readonly desktopMigrationMilestone1 = toSignal(
+    this.configService.getFeatureFlag$(FeatureFlag.DesktopUiMigrationMilestone1),
+  );
+
   protected CipherViewLikeUtils = CipherViewLikeUtils;
 
   constructor(
diff --git a/libs/angular/src/vault/components/vault-items.component.ts b/libs/angular/src/vault/components/vault-items.component.ts
index c4fe2741e11..6058955788e 100644
--- a/libs/angular/src/vault/components/vault-items.component.ts
+++ b/libs/angular/src/vault/components/vault-items.component.ts
@@ -94,7 +94,7 @@ export class VaultItemsComponent<C extends CipherViewLike> implements OnDestroy
     protected cipherService: CipherService,
     protected accountService: AccountService,
     protected restrictedItemTypesService: RestrictedItemTypesService,
-    private configService: ConfigService,
+    protected configService: ConfigService,
   ) {
     this.subscribeToCiphers();
 

From 5bceadd29b1f4681134b606d24355003157fe5a8 Mon Sep 17 00:00:00 2001
From: Vijay Oommen <voommen@livefront.com>
Date: Wed, 4 Feb 2026 09:11:06 -0600
Subject: [PATCH 02/26] [PM-31584] Minor UI fixes (#18736)

---
 .../all-applications/applications.component.html           | 7 +++----
 .../all-applications/applications.component.ts             | 2 ++
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/all-applications/applications.component.html b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/all-applications/applications.component.html
index 7c4f6d04a6b..9af071a1268 100644
--- a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/all-applications/applications.component.html
+++ b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/all-applications/applications.component.html
@@ -3,12 +3,10 @@
 } @else {
   @let drawerDetails = dataService.drawerDetails$ | async;
   <div class="tw-mt-4 tw-flex tw-flex-col">
-    <h2 class="tw-mb-6" bitTypography="h2">{{ "allApplications" | i18n }}</h2>
-
     <div class="tw-flex tw-mb-4 tw-gap-4 tw-items-center">
       <bit-search
         [placeholder]="'searchApps' | i18n"
-        class="tw-w-1/2"
+        class="tw-min-w-96"
         [formControl]="searchControl"
       ></bit-search>
 
@@ -20,7 +18,8 @@
         (ngModelChange)="setFilterApplicationsByStatus($event)"
         fullWidth="false"
         class="tw-min-w-48"
-      ></bit-chip-select>
+      >
+      </bit-chip-select>
 
       <button
         type="button"
diff --git a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/all-applications/applications.component.ts b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/all-applications/applications.component.ts
index 8962980c872..07c531d6907 100644
--- a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/all-applications/applications.component.ts
+++ b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/all-applications/applications.component.ts
@@ -96,10 +96,12 @@ export class ApplicationsComponent implements OnInit {
     {
       label: this.i18nService.t("critical", this.criticalApplicationsCount()),
       value: ApplicationFilterOption.Critical,
+      icon: " ",
     },
     {
       label: this.i18nService.t("notCritical", this.nonCriticalApplicationsCount()),
       value: ApplicationFilterOption.NonCritical,
+      icon: " ",
     },
   ]);
 

From 97c65b3c721253549e588cb48886800560836c23 Mon Sep 17 00:00:00 2001
From: Vicki League <vleague@bitwarden.com>
Date: Wed, 4 Feb 2026 10:26:38 -0500
Subject: [PATCH 03/26] [PM-31384] Prevent dialog header from stealing focus
 from autofocus inputs (#18657)

---
 .../vault-item-dialog.component.spec.ts       |  2 +-
 .../vault-item-dialog.component.ts            |  2 +-
 .../src/dialog/dialog/dialog.component.ts     | 72 +++++++++++++------
 .../src/input/autofocus.directive.ts          |  2 +
 4 files changed, 55 insertions(+), 23 deletions(-)

diff --git a/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.spec.ts b/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.spec.ts
index 276c0c2e6a3..08931c68900 100644
--- a/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.spec.ts
+++ b/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.spec.ts
@@ -363,7 +363,7 @@ describe("VaultItemDialogComponent", () => {
     });
 
     it("refocuses the dialog header", async () => {
-      const focusOnHeaderSpy = jest.spyOn(component["dialogComponent"](), "focusOnHeader");
+      const focusOnHeaderSpy = jest.spyOn(component["dialogComponent"](), "handleAutofocus");
 
       await component["changeMode"]("view");
 
diff --git a/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts b/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts
index ef861b7cab3..df73aacfdde 100644
--- a/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts
+++ b/apps/web/src/app/vault/components/vault-item-dialog/vault-item-dialog.component.ts
@@ -692,7 +692,7 @@ export class VaultItemDialogComponent implements OnInit, OnDestroy {
     this.dialogContent().nativeElement.parentElement.scrollTop = 0;
 
     // Refocus on title element, the built-in focus management of the dialog only works for the initial open.
-    this.dialogComponent().focusOnHeader();
+    this.dialogComponent().handleAutofocus();
 
     // Update the URL query params to reflect the new mode.
     await this.router.navigate([], {
diff --git a/libs/components/src/dialog/dialog/dialog.component.ts b/libs/components/src/dialog/dialog/dialog.component.ts
index 2ce19a9f9e0..63fbb69399d 100644
--- a/libs/components/src/dialog/dialog/dialog.component.ts
+++ b/libs/components/src/dialog/dialog/dialog.component.ts
@@ -12,9 +12,10 @@ import {
   computed,
   signal,
   AfterViewInit,
+  NgZone,
 } from "@angular/core";
 import { toObservable } from "@angular/core/rxjs-interop";
-import { combineLatest, switchMap } from "rxjs";
+import { combineLatest, firstValueFrom, switchMap } from "rxjs";
 
 import { I18nPipe } from "@bitwarden/ui-common";
 
@@ -65,6 +66,9 @@ const drawerSizeToWidth = {
 })
 export class DialogComponent implements AfterViewInit {
   private readonly destroyRef = inject(DestroyRef);
+  private readonly ngZone = inject(NgZone);
+  private readonly el = inject(ElementRef);
+
   private readonly dialogHeader =
     viewChild.required<ElementRef<HTMLHeadingElement>>("dialogHeader");
   private readonly scrollableBody = viewChild.required(CdkScrollable);
@@ -144,10 +148,6 @@ export class DialogComponent implements AfterViewInit {
     return [...baseClasses, this.width(), ...sizeClasses, ...animationClasses];
   });
 
-  ngAfterViewInit() {
-    this.focusOnHeader();
-  }
-
   handleEsc(event: Event) {
     if (!this.dialogRef?.disableClose) {
       this.dialogRef?.close();
@@ -159,24 +159,54 @@ export class DialogComponent implements AfterViewInit {
     this.animationCompleted.set(true);
   }
 
-  /**
-   * Moves focus to the dialog header element.
-   * This is done automatically when the dialog is opened but can be called manually
-   * when the contents of the dialog change and focus should be reset.
-   */
-  focusOnHeader(): void {
+  async ngAfterViewInit() {
     /**
-     * Wait a tick for any focus management to occur on the trigger element before moving focus to
-     * the dialog header. We choose the dialog header because it is always present, unlike possible
-     * interactive elements.
-     *
-     * We are doing this manually instead of using `cdkTrapFocusAutoCapture` and `cdkFocusInitial`
-     * because we need this delay behavior.
+     * Wait for the zone to stabilize before performing any focus behaviors. This ensures that all
+     * child elements are rendered and stable.
      */
-    const headerFocusTimeout = setTimeout(() => {
-      this.dialogHeader().nativeElement.focus();
-    }, 0);
+    if (this.ngZone.isStable) {
+      this.handleAutofocus();
+    } else {
+      await firstValueFrom(this.ngZone.onStable);
+      this.handleAutofocus();
+    }
+  }
 
-    this.destroyRef.onDestroy(() => clearTimeout(headerFocusTimeout));
+  /**
+   * Ensure that the user's focus is in the dialog by autofocusing the appropriate element.
+   *
+   * If there is a descendant of the dialog with the AutofocusDirective applied, we defer to that.
+   * If not, we want to fallback to a default behavior of focusing the dialog's header element. We
+   * choose the dialog header as the default fallback for dialog focus because it is always present,
+   * unlike possible interactive elements.
+   */
+  handleAutofocus() {
+    /**
+     * Angular's contentChildren query cannot see into the internal templates of child components.
+     * We need to use a regular DOM query instead to see if there are descendants using the
+     * AutofocusDirective.
+     */
+    const dialogRef = this.el.nativeElement;
+    // Must match selectors of AutofocusDirective
+    const autofocusDescendants = dialogRef.querySelectorAll("[appAutofocus], [bitAutofocus]");
+    const hasAutofocusDescendants = autofocusDescendants.length > 0;
+
+    if (!hasAutofocusDescendants) {
+      /**
+       * Wait a tick for any focus management to occur on the trigger element before moving focus
+       * to the dialog header.
+       *
+       * We are doing this manually instead of using Angular's built-in focus management
+       * directives (`cdkTrapFocusAutoCapture` and `cdkFocusInitial`) because we need this delay
+       * behavior.
+       *
+       * And yes, we need the timeout even though we are already waiting for ngZone to stabilize.
+       */
+      const headerFocusTimeout = setTimeout(() => {
+        this.dialogHeader().nativeElement.focus();
+      }, 0);
+
+      this.destroyRef.onDestroy(() => clearTimeout(headerFocusTimeout));
+    }
   }
 }
diff --git a/libs/components/src/input/autofocus.directive.ts b/libs/components/src/input/autofocus.directive.ts
index a4791a51f01..bffac8eb757 100644
--- a/libs/components/src/input/autofocus.directive.ts
+++ b/libs/components/src/input/autofocus.directive.ts
@@ -22,6 +22,8 @@ import { FocusableElement } from "../shared/focusable-element";
  *
  * If the component provides the `FocusableElement` interface, the `focus`
  * method will be called. Otherwise, the native element will be focused.
+ *
+ * If selector changes, `dialog.component.ts` must also be updated
  */
 @Directive({
   selector: "[appAutofocus], [bitAutofocus]",

From febb64605a1864a0211b9230f663f1064086d148 Mon Sep 17 00:00:00 2001
From: Jason Ng <jng@bitwarden.com>
Date: Wed, 4 Feb 2026 10:31:02 -0500
Subject: [PATCH 04/26] [PM-31400] skip MP reprompt when archive/unarchive in
 footer (#18678)

---
 .../src/vault/app/vault/item-footer.component.ts     | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/desktop/src/vault/app/vault/item-footer.component.ts b/apps/desktop/src/vault/app/vault/item-footer.component.ts
index 8164a1f4a67..02c9873c295 100644
--- a/apps/desktop/src/vault/app/vault/item-footer.component.ts
+++ b/apps/desktop/src/vault/app/vault/item-footer.component.ts
@@ -229,12 +229,20 @@ export class ItemFooterComponent implements OnInit, OnChanges {
   }
 
   protected async archive() {
-    await this.archiveCipherUtilitiesService.archiveCipher(this.cipher);
+    /**
+     * When the Archive Button is used in the footer we can skip the reprompt since
+     * the user will have already passed the reprompt when they opened the item.
+     */
+    await this.archiveCipherUtilitiesService.archiveCipher(this.cipher, true);
     this.onArchiveToggle.emit();
   }
 
   protected async unarchive() {
-    await this.archiveCipherUtilitiesService.unarchiveCipher(this.cipher);
+    /**
+     * When the Unarchive Button is used in the footer we can skip the reprompt since
+     * the user will have already passed the reprompt when they opened the item.
+     */
+    await this.archiveCipherUtilitiesService.unarchiveCipher(this.cipher, true);
     this.onArchiveToggle.emit();
   }
 

From b0cfe37e0206aad4fe871e979f898ede2c680188 Mon Sep 17 00:00:00 2001
From: Jared <TheWolfBadger@gmail.com>
Date: Wed, 4 Feb 2026 10:53:05 -0500
Subject: [PATCH 05/26] Update collectionIds handling in
 DefaultCipherFormService to preserve new values during cipher updates
 (#18650)

---
 .../src/cipher-form/services/default-cipher-form.service.ts  | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/libs/vault/src/cipher-form/services/default-cipher-form.service.ts b/libs/vault/src/cipher-form/services/default-cipher-form.service.ts
index 8566e51d74f..63a9b3091e2 100644
--- a/libs/vault/src/cipher-form/services/default-cipher-form.service.ts
+++ b/libs/vault/src/cipher-form/services/default-cipher-form.service.ts
@@ -76,6 +76,9 @@ export class DefaultCipherFormService implements CipherFormService {
         .then((res) => res.cipher);
     } else {
       // Updating a cipher with collection changes is not supported with a single request currently
+      // Save the new collectionIds before overwriting
+      const newCollectionIdsToSave = cipher.collectionIds;
+
       // First update the cipher with the original collectionIds
       cipher.collectionIds = config.originalCipher.collectionIds;
       const newCipher = await this.cipherService.updateWithServer(
@@ -86,7 +89,7 @@ export class DefaultCipherFormService implements CipherFormService {
       );
 
       // Then save the new collection changes separately
-      newCipher.collectionIds = cipher.collectionIds;
+      newCipher.collectionIds = newCollectionIdsToSave;
 
       // TODO: Remove after migrating all SDK ops
       const { cipher: encryptedCipher } = await this.cipherService.encrypt(newCipher, activeUserId);

From b044427f41f53b757a3f0267a7ea0c0676e6a4d1 Mon Sep 17 00:00:00 2001
From: Jonathan Prusik <jprusik@users.noreply.github.com>
Date: Wed, 4 Feb 2026 11:12:25 -0500
Subject: [PATCH 06/26] [PM-31281] Add teardown of listeners/observers (#18593)

* add teardown of listeners/observers

* add tests
---
 .../autofill/content/autofill-init.spec.ts    |  12 +
 .../src/autofill/content/autofill-init.ts     |  24 +-
 .../autofill-inline-menu-iframe.service.ts    |   1 +
 ...tofill-inline-menu-content.service.spec.ts | 305 ++++++++++++++++++
 .../autofill-inline-menu-content.service.ts   |  20 +-
 .../autofill-inline-menu-iframe-element.ts    |  13 +-
 ...utofill-inline-menu-iframe.service.spec.ts | 160 +++++++++
 .../autofill-inline-menu-iframe.service.ts    |  22 ++
 8 files changed, 541 insertions(+), 16 deletions(-)

diff --git a/apps/browser/src/autofill/content/autofill-init.spec.ts b/apps/browser/src/autofill/content/autofill-init.spec.ts
index d612e63f82c..eef7fe32dd0 100644
--- a/apps/browser/src/autofill/content/autofill-init.spec.ts
+++ b/apps/browser/src/autofill/content/autofill-init.spec.ts
@@ -347,6 +347,18 @@ describe("AutofillInit", () => {
       );
     });
 
+    it("removes the LOAD event listener", () => {
+      jest.spyOn(window, "removeEventListener");
+
+      autofillInit.init();
+      autofillInit.destroy();
+
+      expect(window.removeEventListener).toHaveBeenCalledWith(
+        "load",
+        autofillInit["sendCollectDetailsMessage"],
+      );
+    });
+
     it("removes the extension message listeners", () => {
       autofillInit.destroy();
 
diff --git a/apps/browser/src/autofill/content/autofill-init.ts b/apps/browser/src/autofill/content/autofill-init.ts
index b6fc6c3392e..80cfe5de49f 100644
--- a/apps/browser/src/autofill/content/autofill-init.ts
+++ b/apps/browser/src/autofill/content/autofill-init.ts
@@ -72,21 +72,24 @@ class AutofillInit implements AutofillInitInterface {
    * to act on the page.
    */
   private collectPageDetailsOnLoad() {
-    const sendCollectDetailsMessage = () => {
-      this.clearCollectPageDetailsOnLoadTimeout();
-      this.collectPageDetailsOnLoadTimeout = setTimeout(
-        () => this.sendExtensionMessage("bgCollectPageDetails", { sender: "autofillInit" }),
-        750,
-      );
-    };
-
     if (globalThis.document.readyState === "complete") {
-      sendCollectDetailsMessage();
+      this.sendCollectDetailsMessage();
     }
 
-    globalThis.addEventListener(EVENTS.LOAD, sendCollectDetailsMessage);
+    globalThis.addEventListener(EVENTS.LOAD, this.sendCollectDetailsMessage);
   }
 
+  /**
+   * Sends a message to collect page details after a short delay.
+   */
+  private sendCollectDetailsMessage = () => {
+    this.clearCollectPageDetailsOnLoadTimeout();
+    this.collectPageDetailsOnLoadTimeout = setTimeout(
+      () => this.sendExtensionMessage("bgCollectPageDetails", { sender: "autofillInit" }),
+      750,
+    );
+  };
+
   /**
    * Collects the page details and sends them to the
    * extension background script. If the `sendDetailsInResponse`
@@ -218,6 +221,7 @@ class AutofillInit implements AutofillInitInterface {
    */
   destroy() {
     this.clearCollectPageDetailsOnLoadTimeout();
+    globalThis.removeEventListener(EVENTS.LOAD, this.sendCollectDetailsMessage);
     chrome.runtime.onMessage.removeListener(this.handleExtensionMessage);
     this.collectAutofillContentService.destroy();
     this.autofillOverlayContentService?.destroy();
diff --git a/apps/browser/src/autofill/overlay/inline-menu/abstractions/autofill-inline-menu-iframe.service.ts b/apps/browser/src/autofill/overlay/inline-menu/abstractions/autofill-inline-menu-iframe.service.ts
index f55faec887a..ab8b0e2553e 100644
--- a/apps/browser/src/autofill/overlay/inline-menu/abstractions/autofill-inline-menu-iframe.service.ts
+++ b/apps/browser/src/autofill/overlay/inline-menu/abstractions/autofill-inline-menu-iframe.service.ts
@@ -32,4 +32,5 @@ export type BackgroundPortMessageHandlers = {
 
 export interface AutofillInlineMenuIframeService {
   initMenuIframe(): void;
+  destroy(): void;
 }
diff --git a/apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.spec.ts b/apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.spec.ts
index b7bd24c537b..00c214c32e7 100644
--- a/apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.spec.ts
+++ b/apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.spec.ts
@@ -645,6 +645,292 @@ describe("AutofillInlineMenuContentService", () => {
 
       expect(disconnectSpy).toHaveBeenCalled();
     });
+
+    it("unobserves custom elements", () => {
+      const disconnectSpy = jest.spyOn(
+        autofillInlineMenuContentService["inlineMenuElementsMutationObserver"],
+        "disconnect",
+      );
+
+      autofillInlineMenuContentService.destroy();
+
+      expect(disconnectSpy).toHaveBeenCalled();
+    });
+
+    it("unobserves the container element", () => {
+      const disconnectSpy = jest.spyOn(
+        autofillInlineMenuContentService["containerElementMutationObserver"],
+        "disconnect",
+      );
+
+      autofillInlineMenuContentService.destroy();
+
+      expect(disconnectSpy).toHaveBeenCalled();
+    });
+
+    it("clears the mutation observer iterations reset timeout", () => {
+      jest.useFakeTimers();
+      const clearTimeoutSpy = jest.spyOn(globalThis, "clearTimeout");
+      autofillInlineMenuContentService["mutationObserverIterationsResetTimeout"] = setTimeout(
+        jest.fn(),
+        1000,
+      );
+
+      autofillInlineMenuContentService.destroy();
+
+      expect(clearTimeoutSpy).toHaveBeenCalled();
+      expect(autofillInlineMenuContentService["mutationObserverIterationsResetTimeout"]).toBeNull();
+    });
+
+    it("destroys the button iframe", () => {
+      const mockButtonIframe = { destroy: jest.fn() };
+      autofillInlineMenuContentService["buttonIframe"] = mockButtonIframe as any;
+
+      autofillInlineMenuContentService.destroy();
+
+      expect(mockButtonIframe.destroy).toHaveBeenCalled();
+    });
+
+    it("destroys the list iframe", () => {
+      const mockListIframe = { destroy: jest.fn() };
+      autofillInlineMenuContentService["listIframe"] = mockListIframe as any;
+
+      autofillInlineMenuContentService.destroy();
+
+      expect(mockListIframe.destroy).toHaveBeenCalled();
+    });
+  });
+
+  describe("observeCustomElements", () => {
+    it("observes the button element for attribute mutations", () => {
+      const buttonElement = document.createElement("div");
+      autofillInlineMenuContentService["buttonElement"] = buttonElement;
+      const observeSpy = jest.spyOn(
+        autofillInlineMenuContentService["inlineMenuElementsMutationObserver"],
+        "observe",
+      );
+
+      autofillInlineMenuContentService["observeCustomElements"]();
+
+      expect(observeSpy).toHaveBeenCalledWith(buttonElement, { attributes: true });
+    });
+
+    it("observes the list element for attribute mutations", () => {
+      const listElement = document.createElement("div");
+      autofillInlineMenuContentService["listElement"] = listElement;
+      const observeSpy = jest.spyOn(
+        autofillInlineMenuContentService["inlineMenuElementsMutationObserver"],
+        "observe",
+      );
+
+      autofillInlineMenuContentService["observeCustomElements"]();
+
+      expect(observeSpy).toHaveBeenCalledWith(listElement, { attributes: true });
+    });
+
+    it("does not observe when no elements exist", () => {
+      autofillInlineMenuContentService["buttonElement"] = undefined;
+      autofillInlineMenuContentService["listElement"] = undefined;
+      const observeSpy = jest.spyOn(
+        autofillInlineMenuContentService["inlineMenuElementsMutationObserver"],
+        "observe",
+      );
+
+      autofillInlineMenuContentService["observeCustomElements"]();
+
+      expect(observeSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("observeContainerElement", () => {
+    it("observes the container element for child list mutations", () => {
+      const containerElement = document.createElement("div");
+      const observeSpy = jest.spyOn(
+        autofillInlineMenuContentService["containerElementMutationObserver"],
+        "observe",
+      );
+
+      autofillInlineMenuContentService["observeContainerElement"](containerElement);
+
+      expect(observeSpy).toHaveBeenCalledWith(containerElement, { childList: true });
+    });
+  });
+
+  describe("unobserveContainerElement", () => {
+    it("disconnects the container element mutation observer", () => {
+      const disconnectSpy = jest.spyOn(
+        autofillInlineMenuContentService["containerElementMutationObserver"],
+        "disconnect",
+      );
+
+      autofillInlineMenuContentService["unobserveContainerElement"]();
+
+      expect(disconnectSpy).toHaveBeenCalled();
+    });
+
+    it("handles the case when the mutation observer is undefined", () => {
+      autofillInlineMenuContentService["containerElementMutationObserver"] = undefined as any;
+
+      expect(() => autofillInlineMenuContentService["unobserveContainerElement"]()).not.toThrow();
+    });
+  });
+
+  describe("observePageAttributes", () => {
+    it("observes the document element for attribute mutations", () => {
+      const observeSpy = jest.spyOn(
+        autofillInlineMenuContentService["htmlMutationObserver"],
+        "observe",
+      );
+
+      autofillInlineMenuContentService["observePageAttributes"]();
+
+      expect(observeSpy).toHaveBeenCalledWith(document.documentElement, { attributes: true });
+    });
+
+    it("observes the body element for attribute mutations", () => {
+      const observeSpy = jest.spyOn(
+        autofillInlineMenuContentService["bodyMutationObserver"],
+        "observe",
+      );
+
+      autofillInlineMenuContentService["observePageAttributes"]();
+
+      expect(observeSpy).toHaveBeenCalledWith(document.body, { attributes: true });
+    });
+  });
+
+  describe("unobservePageAttributes", () => {
+    it("disconnects the html mutation observer", () => {
+      const disconnectSpy = jest.spyOn(
+        autofillInlineMenuContentService["htmlMutationObserver"],
+        "disconnect",
+      );
+
+      autofillInlineMenuContentService["unobservePageAttributes"]();
+
+      expect(disconnectSpy).toHaveBeenCalled();
+    });
+
+    it("disconnects the body mutation observer", () => {
+      const disconnectSpy = jest.spyOn(
+        autofillInlineMenuContentService["bodyMutationObserver"],
+        "disconnect",
+      );
+
+      autofillInlineMenuContentService["unobservePageAttributes"]();
+
+      expect(disconnectSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe("checkPageRisks", () => {
+    it("returns true and closes inline menu when page is not opaque", async () => {
+      jest.spyOn(autofillInlineMenuContentService as any, "getPageIsOpaque").mockReturnValue(false);
+      const closeInlineMenuSpy = jest.spyOn(
+        autofillInlineMenuContentService as any,
+        "closeInlineMenu",
+      );
+
+      const result = await autofillInlineMenuContentService["checkPageRisks"]();
+
+      expect(result).toBe(true);
+      expect(closeInlineMenuSpy).toHaveBeenCalled();
+    });
+
+    it("returns true and closes inline menu when inline menu is disabled", async () => {
+      jest.spyOn(autofillInlineMenuContentService as any, "getPageIsOpaque").mockReturnValue(true);
+      autofillInlineMenuContentService["inlineMenuEnabled"] = false;
+      const closeInlineMenuSpy = jest.spyOn(
+        autofillInlineMenuContentService as any,
+        "closeInlineMenu",
+      );
+
+      const result = await autofillInlineMenuContentService["checkPageRisks"]();
+
+      expect(result).toBe(true);
+      expect(closeInlineMenuSpy).toHaveBeenCalled();
+    });
+
+    it("returns false when page is opaque and inline menu is enabled", async () => {
+      jest.spyOn(autofillInlineMenuContentService as any, "getPageIsOpaque").mockReturnValue(true);
+      autofillInlineMenuContentService["inlineMenuEnabled"] = true;
+      const closeInlineMenuSpy = jest.spyOn(
+        autofillInlineMenuContentService as any,
+        "closeInlineMenu",
+      );
+
+      const result = await autofillInlineMenuContentService["checkPageRisks"]();
+
+      expect(result).toBe(false);
+      expect(closeInlineMenuSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("handlePageMutations", () => {
+    it("checks page risks when mutations include attribute changes", async () => {
+      const checkPageRisksSpy = jest.spyOn(
+        autofillInlineMenuContentService as any,
+        "checkPageRisks",
+      );
+      const mutations = [{ type: "attributes" } as MutationRecord];
+
+      await autofillInlineMenuContentService["handlePageMutations"](mutations);
+
+      expect(checkPageRisksSpy).toHaveBeenCalled();
+    });
+
+    it("does not check page risks when mutations do not include attribute changes", async () => {
+      const checkPageRisksSpy = jest.spyOn(
+        autofillInlineMenuContentService as any,
+        "checkPageRisks",
+      );
+      const mutations = [{ type: "childList" } as MutationRecord];
+
+      await autofillInlineMenuContentService["handlePageMutations"](mutations);
+
+      expect(checkPageRisksSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("clearPersistentLastChildOverrideTimeout", () => {
+    it("clears the timeout when it exists", () => {
+      jest.useFakeTimers();
+      const clearTimeoutSpy = jest.spyOn(globalThis, "clearTimeout");
+      autofillInlineMenuContentService["handlePersistentLastChildOverrideTimeout"] = setTimeout(
+        jest.fn(),
+        1000,
+      );
+
+      autofillInlineMenuContentService["clearPersistentLastChildOverrideTimeout"]();
+
+      expect(clearTimeoutSpy).toHaveBeenCalled();
+    });
+
+    it("does nothing when the timeout is null", () => {
+      const clearTimeoutSpy = jest.spyOn(globalThis, "clearTimeout");
+      autofillInlineMenuContentService["handlePersistentLastChildOverrideTimeout"] = null;
+
+      autofillInlineMenuContentService["clearPersistentLastChildOverrideTimeout"]();
+
+      expect(clearTimeoutSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("elementAtCenterOfInlineMenuPosition", () => {
+    it("returns the element at the center of the given position", () => {
+      const mockElement = document.createElement("div");
+      jest.spyOn(globalThis.document, "elementFromPoint").mockReturnValue(mockElement);
+
+      const result = autofillInlineMenuContentService["elementAtCenterOfInlineMenuPosition"]({
+        top: 100,
+        left: 200,
+        width: 50,
+        height: 30,
+      });
+
+      expect(globalThis.document.elementFromPoint).toHaveBeenCalledWith(225, 115);
+      expect(result).toBe(mockElement);
+    });
   });
 
   describe("getOwnedTagNames", () => {
@@ -975,6 +1261,25 @@ describe("AutofillInlineMenuContentService", () => {
     });
   });
 
+  describe("unobserveCustomElements", () => {
+    it("disconnects the inline menu elements mutation observer", () => {
+      const disconnectSpy = jest.spyOn(
+        autofillInlineMenuContentService["inlineMenuElementsMutationObserver"],
+        "disconnect",
+      );
+
+      autofillInlineMenuContentService["unobserveCustomElements"]();
+
+      expect(disconnectSpy).toHaveBeenCalled();
+    });
+
+    it("handles the case when the mutation observer is undefined", () => {
+      autofillInlineMenuContentService["inlineMenuElementsMutationObserver"] = undefined as any;
+
+      expect(() => autofillInlineMenuContentService["unobserveCustomElements"]()).not.toThrow();
+    });
+  });
+
   describe("getPageIsOpaque", () => {
     it("returns false when no page elements exist", () => {
       jest.spyOn(globalThis.document, "querySelectorAll").mockReturnValue([] as any);
diff --git a/apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.ts b/apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.ts
index c2f872d7ba5..24e6f34df4b 100644
--- a/apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.ts
+++ b/apps/browser/src/autofill/overlay/inline-menu/content/autofill-inline-menu-content.service.ts
@@ -41,7 +41,9 @@ export class AutofillInlineMenuContentService implements AutofillInlineMenuConte
     globalThis.navigator.userAgent.indexOf(" Firefox/") !== -1 ||
     globalThis.navigator.userAgent.indexOf(" Gecko/") !== -1;
   private buttonElement?: HTMLElement;
+  private buttonIframe?: AutofillInlineMenuButtonIframe;
   private listElement?: HTMLElement;
+  private listIframe?: AutofillInlineMenuListIframe;
   private htmlMutationObserver: MutationObserver;
   private bodyMutationObserver: MutationObserver;
   private inlineMenuElementsMutationObserver: MutationObserver;
@@ -264,18 +266,19 @@ export class AutofillInlineMenuContentService implements AutofillInlineMenuConte
     if (this.isFirefoxBrowser) {
       this.buttonElement = globalThis.document.createElement("div");
       this.buttonElement.setAttribute("popover", "manual");
-      new AutofillInlineMenuButtonIframe(this.buttonElement);
+      this.buttonIframe = new AutofillInlineMenuButtonIframe(this.buttonElement);
 
       return this.buttonElement;
     }
 
     const customElementName = this.generateRandomCustomElementName();
+    const self = this;
     globalThis.customElements?.define(
       customElementName,
       class extends HTMLElement {
         constructor() {
           super();
-          new AutofillInlineMenuButtonIframe(this);
+          self.buttonIframe = new AutofillInlineMenuButtonIframe(this);
         }
       },
     );
@@ -293,18 +296,19 @@ export class AutofillInlineMenuContentService implements AutofillInlineMenuConte
     if (this.isFirefoxBrowser) {
       this.listElement = globalThis.document.createElement("div");
       this.listElement.setAttribute("popover", "manual");
-      new AutofillInlineMenuListIframe(this.listElement);
+      this.listIframe = new AutofillInlineMenuListIframe(this.listElement);
 
       return this.listElement;
     }
 
     const customElementName = this.generateRandomCustomElementName();
+    const self = this;
     globalThis.customElements?.define(
       customElementName,
       class extends HTMLElement {
         constructor() {
           super();
-          new AutofillInlineMenuListIframe(this);
+          self.listIframe = new AutofillInlineMenuListIframe(this);
         }
       },
     );
@@ -778,5 +782,13 @@ export class AutofillInlineMenuContentService implements AutofillInlineMenuConte
     this.closeInlineMenu();
     this.clearPersistentLastChildOverrideTimeout();
     this.unobservePageAttributes();
+    this.unobserveCustomElements();
+    this.unobserveContainerElement();
+    if (this.mutationObserverIterationsResetTimeout) {
+      clearTimeout(this.mutationObserverIterationsResetTimeout);
+      this.mutationObserverIterationsResetTimeout = null;
+    }
+    this.buttonIframe?.destroy();
+    this.listIframe?.destroy();
   }
 }
diff --git a/apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe-element.ts b/apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe-element.ts
index 3e2b364b17b..e26b6ba9ccc 100644
--- a/apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe-element.ts
+++ b/apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe-element.ts
@@ -1,6 +1,8 @@
 import { AutofillInlineMenuIframeService } from "./autofill-inline-menu-iframe.service";
 
 export class AutofillInlineMenuIframeElement {
+  private autofillInlineMenuIframeService: AutofillInlineMenuIframeService;
+
   constructor(
     element: HTMLElement,
     portName: string,
@@ -12,14 +14,14 @@ export class AutofillInlineMenuIframeElement {
     const shadow: ShadowRoot = element.attachShadow({ mode: "closed" });
     shadow.prepend(style);
 
-    const autofillInlineMenuIframeService = new AutofillInlineMenuIframeService(
+    this.autofillInlineMenuIframeService = new AutofillInlineMenuIframeService(
       shadow,
       portName,
       initStyles,
       iframeTitle,
       ariaAlert,
     );
-    autofillInlineMenuIframeService.initMenuIframe();
+    this.autofillInlineMenuIframeService.initMenuIframe();
   }
 
   /**
@@ -67,4 +69,11 @@ export class AutofillInlineMenuIframeElement {
 
     return style;
   }
+
+  /**
+   * Cleans up the iframe service to prevent memory leaks.
+   */
+  destroy() {
+    this.autofillInlineMenuIframeService?.destroy();
+  }
 }
diff --git a/apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe.service.spec.ts b/apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe.service.spec.ts
index f1ed6875f90..5e9d7c1da48 100644
--- a/apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe.service.spec.ts
+++ b/apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe.service.spec.ts
@@ -752,4 +752,164 @@ describe("AutofillInlineMenuIframeService", () => {
       expect(autofillInlineMenuIframeService["iframe"].title).toBe("title");
     });
   });
+
+  describe("destroy", () => {
+    beforeEach(() => {
+      autofillInlineMenuIframeService.initMenuIframe();
+      autofillInlineMenuIframeService["iframe"].dispatchEvent(new Event(EVENTS.LOAD));
+      portSpy = autofillInlineMenuIframeService["port"];
+    });
+
+    it("removes the LOAD event listener from the iframe", () => {
+      const removeEventListenerSpy = jest.spyOn(
+        autofillInlineMenuIframeService["iframe"],
+        "removeEventListener",
+      );
+
+      autofillInlineMenuIframeService.destroy();
+
+      expect(removeEventListenerSpy).toHaveBeenCalledWith(
+        EVENTS.LOAD,
+        autofillInlineMenuIframeService["setupPortMessageListener"],
+      );
+    });
+
+    it("clears the aria alert timeout", () => {
+      jest.spyOn(autofillInlineMenuIframeService, "clearAriaAlert");
+      autofillInlineMenuIframeService["ariaAlertTimeout"] = setTimeout(jest.fn(), 1000);
+
+      autofillInlineMenuIframeService.destroy();
+
+      expect(autofillInlineMenuIframeService.clearAriaAlert).toHaveBeenCalled();
+    });
+
+    it("clears the fade in timeout", () => {
+      jest.useFakeTimers();
+      jest.spyOn(globalThis, "clearTimeout");
+      autofillInlineMenuIframeService["fadeInTimeout"] = setTimeout(jest.fn(), 1000);
+
+      autofillInlineMenuIframeService.destroy();
+
+      expect(globalThis.clearTimeout).toHaveBeenCalled();
+      expect(autofillInlineMenuIframeService["fadeInTimeout"]).toBeNull();
+    });
+
+    it("clears the delayed close timeout", () => {
+      jest.useFakeTimers();
+      jest.spyOn(globalThis, "clearTimeout");
+      autofillInlineMenuIframeService["delayedCloseTimeout"] = setTimeout(jest.fn(), 1000);
+
+      autofillInlineMenuIframeService.destroy();
+
+      expect(globalThis.clearTimeout).toHaveBeenCalled();
+      expect(autofillInlineMenuIframeService["delayedCloseTimeout"]).toBeNull();
+    });
+
+    it("clears the mutation observer iterations reset timeout", () => {
+      jest.useFakeTimers();
+      jest.spyOn(globalThis, "clearTimeout");
+      autofillInlineMenuIframeService["mutationObserverIterationsResetTimeout"] = setTimeout(
+        jest.fn(),
+        1000,
+      );
+
+      autofillInlineMenuIframeService.destroy();
+
+      expect(globalThis.clearTimeout).toHaveBeenCalled();
+      expect(autofillInlineMenuIframeService["mutationObserverIterationsResetTimeout"]).toBeNull();
+    });
+
+    it("unobserves the iframe mutation observer", () => {
+      const disconnectSpy = jest.spyOn(
+        autofillInlineMenuIframeService["iframeMutationObserver"],
+        "disconnect",
+      );
+
+      autofillInlineMenuIframeService.destroy();
+
+      expect(disconnectSpy).toHaveBeenCalled();
+    });
+
+    it("removes the port message listeners and disconnects the port", () => {
+      autofillInlineMenuIframeService.destroy();
+
+      expect(portSpy.onMessage.removeListener).toHaveBeenCalledWith(handlePortMessageSpy);
+      expect(portSpy.onDisconnect.removeListener).toHaveBeenCalledWith(handlePortDisconnectSpy);
+      expect(portSpy.disconnect).toHaveBeenCalled();
+      expect(autofillInlineMenuIframeService["port"]).toBeNull();
+    });
+
+    it("handles the case when the port is null", () => {
+      autofillInlineMenuIframeService["port"] = null;
+
+      expect(() => autofillInlineMenuIframeService.destroy()).not.toThrow();
+    });
+
+    it("handles the case when the iframe is undefined", () => {
+      autofillInlineMenuIframeService["iframe"] = undefined as any;
+
+      expect(() => autofillInlineMenuIframeService.destroy()).not.toThrow();
+    });
+  });
+
+  describe("clearAriaAlert", () => {
+    it("clears the aria alert timeout when it exists", () => {
+      jest.useFakeTimers();
+      jest.spyOn(globalThis, "clearTimeout");
+      autofillInlineMenuIframeService["ariaAlertTimeout"] = setTimeout(jest.fn(), 1000);
+
+      autofillInlineMenuIframeService.clearAriaAlert();
+
+      expect(globalThis.clearTimeout).toHaveBeenCalled();
+      expect(autofillInlineMenuIframeService["ariaAlertTimeout"]).toBeNull();
+    });
+
+    it("does nothing when the aria alert timeout is null", () => {
+      jest.spyOn(globalThis, "clearTimeout");
+      autofillInlineMenuIframeService["ariaAlertTimeout"] = null;
+
+      autofillInlineMenuIframeService.clearAriaAlert();
+
+      expect(globalThis.clearTimeout).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("unobserveIframe", () => {
+    it("disconnects the iframe mutation observer", () => {
+      autofillInlineMenuIframeService.initMenuIframe();
+      const disconnectSpy = jest.spyOn(
+        autofillInlineMenuIframeService["iframeMutationObserver"],
+        "disconnect",
+      );
+
+      autofillInlineMenuIframeService["unobserveIframe"]();
+
+      expect(disconnectSpy).toHaveBeenCalled();
+    });
+
+    it("handles the case when the mutation observer is undefined", () => {
+      autofillInlineMenuIframeService["iframeMutationObserver"] = undefined as any;
+
+      expect(() => autofillInlineMenuIframeService["unobserveIframe"]()).not.toThrow();
+    });
+  });
+
+  describe("observeIframe", () => {
+    beforeEach(() => {
+      autofillInlineMenuIframeService.initMenuIframe();
+    });
+
+    it("observes the iframe for attribute mutations", () => {
+      const observeSpy = jest.spyOn(
+        autofillInlineMenuIframeService["iframeMutationObserver"],
+        "observe",
+      );
+
+      autofillInlineMenuIframeService["observeIframe"]();
+
+      expect(observeSpy).toHaveBeenCalledWith(autofillInlineMenuIframeService["iframe"], {
+        attributes: true,
+      });
+    });
+  });
 });
diff --git a/apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe.service.ts b/apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe.service.ts
index ad1241e98d2..40db2eef9fd 100644
--- a/apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe.service.ts
+++ b/apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe.service.ts
@@ -555,4 +555,26 @@ export class AutofillInlineMenuIframeService implements AutofillInlineMenuIframe
 
     return false;
   }
+
+  /**
+   * Cleans up all event listeners, timeouts, and observers to prevent memory leaks.
+   */
+  destroy() {
+    this.iframe?.removeEventListener(EVENTS.LOAD, this.setupPortMessageListener);
+    this.clearAriaAlert();
+    this.clearFadeInTimeout();
+    if (this.delayedCloseTimeout) {
+      clearTimeout(this.delayedCloseTimeout);
+      this.delayedCloseTimeout = null;
+    }
+    if (this.mutationObserverIterationsResetTimeout) {
+      clearTimeout(this.mutationObserverIterationsResetTimeout);
+      this.mutationObserverIterationsResetTimeout = null;
+    }
+    this.unobserveIframe();
+    this.port?.onMessage.removeListener(this.handlePortMessage);
+    this.port?.onDisconnect.removeListener(this.handlePortDisconnect);
+    this.port?.disconnect();
+    this.port = null;
+  }
 }

From 9fc52cb46efa72fc8180191926cba59ce703d01b Mon Sep 17 00:00:00 2001
From: Jackson Engstrom <jengstrom@bitwarden.com>
Date: Wed, 4 Feb 2026 08:19:06 -0800
Subject: [PATCH 07/26] [PM-21607] Adds bwi-plus-circle and bwi-minus-circle to
 Link SSO and Unlink SSO menu buttons (#18328)

* adds bwi-plus-circle and bwi-minus-circle to Link SSO and Unlink SSO menu buttons

* fixes spacing for Leave organization option

---------

Co-authored-by: capenapplebw <capple@bitwarden.com>
---
 .../components/organization-options.component.html        | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/app/vault/individual-vault/vault-filter/components/organization-options.component.html b/apps/web/src/app/vault/individual-vault/vault-filter/components/organization-options.component.html
index 88719b93643..62b23fc580d 100644
--- a/apps/web/src/app/vault/individual-vault/vault-filter/components/organization-options.component.html
+++ b/apps/web/src/app/vault/individual-vault/vault-filter/components/organization-options.component.html
@@ -46,17 +46,21 @@
           bitMenuItem
           (click)="unlinkSso(organization)"
         >
+          <i class="bwi bwi-fw bwi-minus-circle"></i>
           {{ "unlinkSso" | i18n }}
         </button>
         <ng-template #linkSso>
           <button type="button" bitMenuItem (click)="handleLinkSso(organization)">
+            <i class="bwi bwi-fw bwi-plus-circle"></i>
             {{ "linkSso" | i18n }}
           </button>
         </ng-template>
       </ng-container>
       <button *ngIf="showLeaveOrgOption" type="button" bitMenuItem (click)="leave(organization)">
-        <i class="bwi bwi-fw bwi-sign-out tw-text-danger" aria-hidden="true"></i>
-        <span class="tw-text-danger">{{ "leave" | i18n }}</span>
+        <span class="tw-text-danger">
+          <i class="bwi bwi-fw bwi-sign-out" aria-hidden="true"></i>
+          {{ "leave" | i18n }}
+        </span>
       </button>
     </div>
   </bit-menu>

From a2916084eec5da058b5fad4fb3db96b0130cbe0a Mon Sep 17 00:00:00 2001
From: Vijay Oommen <voommen@livefront.com>
Date: Wed, 4 Feb 2026 10:42:13 -0600
Subject: [PATCH 08/26] [PM-30547] Table empty state message (#18752)

---
 apps/web/src/locales/en/messages.json                      | 3 +++
 .../all-applications/applications.component.html           | 6 ++++++
 .../all-applications/applications.component.ts             | 7 +++++++
 3 files changed, 16 insertions(+)

diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 160ad4e867a..89b3b3ac5c6 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -38,6 +38,9 @@
   "accessIntelligence": {
     "message": "Access Intelligence"
   },
+  "noApplicationsMatchTheseFilters": {
+    "message": "No applications match these filters"
+  },
   "passwordRisk": {
     "message": "Password Risk"
   },
diff --git a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/all-applications/applications.component.html b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/all-applications/applications.component.html
index 9af071a1268..2fa9fabf73d 100644
--- a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/all-applications/applications.component.html
+++ b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/all-applications/applications.component.html
@@ -43,5 +43,11 @@
       [checkboxChange]="onCheckboxChange"
       [showAppAtRiskMembers]="showAppAtRiskMembers"
     ></app-table-row-scrollable-m11>
+
+    @if (emptyTableExplanation()) {
+      <div class="tw-flex tw-mt-10 tw-justify-center">
+        <span bitTypography="body2">{{ emptyTableExplanation() }}</span>
+      </div>
+    }
   </div>
 }
diff --git a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/all-applications/applications.component.ts b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/all-applications/applications.component.ts
index 07c531d6907..8cd0c2640f5 100644
--- a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/all-applications/applications.component.ts
+++ b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/all-applications/applications.component.ts
@@ -104,6 +104,7 @@ export class ApplicationsComponent implements OnInit {
       icon: " ",
     },
   ]);
+  protected readonly emptyTableExplanation = signal("");
 
   constructor(
     protected i18nService: I18nService,
@@ -164,6 +165,12 @@ export class ApplicationsComponent implements OnInit {
         this.dataSource.filter = (app) =>
           filterFunction(app) &&
           app.applicationName.toLowerCase().includes(searchText.toLowerCase());
+
+        if (this.dataSource?.filteredData?.length === 0) {
+          this.emptyTableExplanation.set(this.i18nService.t("noApplicationsMatchTheseFilters"));
+        } else {
+          this.emptyTableExplanation.set("");
+        }
       });
   }
 

From 2876ef15ae9f7095e0ac41d0cb1670979d2ff423 Mon Sep 17 00:00:00 2001
From: Jordan Aasen <166539328+jaasen-livefront@users.noreply.github.com>
Date: Wed, 4 Feb 2026 09:31:23 -0800
Subject: [PATCH 09/26] [PM-31606] - Clone should not be an option for archived
 item for non-premium user (#18726)

* do not allow cloning of archived items for non-premium users

* add tests
---
 .../popup/settings/archive.component.html     |   8 +-
 .../popup/settings/archive.component.spec.ts  | 107 ++++++++++++++++--
 .../vault/popup/settings/archive.component.ts |   4 +
 3 files changed, 109 insertions(+), 10 deletions(-)

diff --git a/apps/browser/src/vault/popup/settings/archive.component.html b/apps/browser/src/vault/popup/settings/archive.component.html
index 01ac799ba29..5024a22ff16 100644
--- a/apps/browser/src/vault/popup/settings/archive.component.html
+++ b/apps/browser/src/vault/popup/settings/archive.component.html
@@ -74,9 +74,11 @@
                   <button type="button" bitMenuItem (click)="edit(cipher)">
                     {{ "edit" | i18n }}
                   </button>
-                  <button type="button" bitMenuItem (click)="clone(cipher)">
-                    {{ "clone" | i18n }}
-                  </button>
+                  @if (userHasPremium$ | async) {
+                    <button type="button" bitMenuItem (click)="clone(cipher)">
+                      {{ "clone" | i18n }}
+                    </button>
+                  }
                   @if (canAssignCollections$ | async) {
                     <button
                       type="button"
diff --git a/apps/browser/src/vault/popup/settings/archive.component.spec.ts b/apps/browser/src/vault/popup/settings/archive.component.spec.ts
index 2f5cfb8d824..bbb61b57a84 100644
--- a/apps/browser/src/vault/popup/settings/archive.component.spec.ts
+++ b/apps/browser/src/vault/popup/settings/archive.component.spec.ts
@@ -1,4 +1,6 @@
-import { TestBed } from "@angular/core/testing";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
+import { provideNoopAnimations } from "@angular/platform-browser/animations";
 import { Router } from "@angular/router";
 import { mock } from "jest-mock-extended";
 import { BehaviorSubject, of } from "rxjs";
@@ -7,10 +9,13 @@ import { CollectionService } from "@bitwarden/admin-console/common";
 import { PopupRouterCacheService } from "@bitwarden/browser/platform/popup/view-cache/popup-router-cache.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { DomainSettingsService } from "@bitwarden/common/autofill/services/domain-settings.service";
+import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { CipherArchiveService } from "@bitwarden/common/vault/abstractions/cipher-archive.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
+import { CipherAuthorizationService } from "@bitwarden/common/vault/services/cipher-authorization.service";
 import { CipherViewLike } from "@bitwarden/common/vault/utils/cipher-view-like-utils";
 import { DialogService, ToastService } from "@bitwarden/components";
 import { LogService } from "@bitwarden/logging";
@@ -25,40 +30,78 @@ jest.mock("qrcode-parser", () => {});
 
 describe("ArchiveComponent", () => {
   let component: ArchiveComponent;
+  let fixture: ComponentFixture<ArchiveComponent>;
 
   let hasOrganizations: jest.Mock;
   let decryptedCollections$: jest.Mock;
   let navigate: jest.Mock;
   let showPasswordPrompt: jest.Mock;
+  let userHasPremium$: jest.Mock;
+  let archivedCiphers$: jest.Mock;
 
-  beforeAll(async () => {
+  beforeEach(async () => {
     navigate = jest.fn();
     showPasswordPrompt = jest.fn().mockResolvedValue(true);
-    hasOrganizations = jest.fn();
-    decryptedCollections$ = jest.fn();
+    hasOrganizations = jest.fn().mockReturnValue(of(false));
+    decryptedCollections$ = jest.fn().mockReturnValue(of([]));
+    userHasPremium$ = jest.fn().mockReturnValue(of(false));
+    archivedCiphers$ = jest.fn().mockReturnValue(of([{ id: "cipher-1" }]));
 
     await TestBed.configureTestingModule({
+      imports: [ArchiveComponent],
       providers: [
+        provideNoopAnimations(),
         { provide: Router, useValue: { navigate } },
         {
           provide: AccountService,
           useValue: { activeAccount$: new BehaviorSubject({ id: "user-id" }) },
         },
         { provide: PasswordRepromptService, useValue: { showPasswordPrompt } },
-        { provide: OrganizationService, useValue: { hasOrganizations } },
+        {
+          provide: OrganizationService,
+          useValue: { hasOrganizations, organizations$: () => of([]) },
+        },
         { provide: CollectionService, useValue: { decryptedCollections$ } },
         { provide: DialogService, useValue: mock<DialogService>() },
         { provide: CipherService, useValue: mock<CipherService>() },
-        { provide: CipherArchiveService, useValue: mock<CipherArchiveService>() },
+        {
+          provide: CipherArchiveService,
+          useValue: {
+            userHasPremium$,
+            archivedCiphers$,
+            userCanArchive$: jest.fn().mockReturnValue(of(true)),
+            showSubscriptionEndedMessaging$: jest.fn().mockReturnValue(of(false)),
+          },
+        },
         { provide: ToastService, useValue: mock<ToastService>() },
         { provide: PopupRouterCacheService, useValue: mock<PopupRouterCacheService>() },
         { provide: PlatformUtilsService, useValue: mock<PlatformUtilsService>() },
         { provide: LogService, useValue: mock<LogService>() },
         { provide: I18nService, useValue: { t: (key: string) => key } },
+        {
+          provide: EnvironmentService,
+          useValue: {
+            environment$: of({
+              getIconsUrl: () => "https://icons.example.com",
+            }),
+          },
+        },
+        {
+          provide: DomainSettingsService,
+          useValue: {
+            showFavicons$: of(true),
+          },
+        },
+        {
+          provide: CipherAuthorizationService,
+          useValue: {
+            canDeleteCipher$: jest.fn().mockReturnValue(of(true)),
+          },
+        },
       ],
     }).compileComponents();
 
-    const fixture = TestBed.createComponent(ArchiveComponent);
+    fixture = TestBed.createComponent(ArchiveComponent);
     component = fixture.componentInstance;
   });
 
@@ -137,4 +180,54 @@ describe("ArchiveComponent", () => {
       expect(navigate).not.toHaveBeenCalled();
     });
   });
+
+  describe("clone menu option", () => {
+    const getBitMenuPanel = () => document.querySelector(".bit-menu-panel");
+
+    it("is shown when user has premium", async () => {
+      userHasPremium$.mockReturnValue(of(true));
+
+      const testFixture = TestBed.createComponent(ArchiveComponent);
+      testFixture.detectChanges();
+      await testFixture.whenStable();
+
+      const menuTrigger = testFixture.debugElement.query(By.css('button[aria-haspopup="menu"]'));
+      expect(menuTrigger).toBeTruthy();
+      (menuTrigger.nativeElement as HTMLButtonElement).click();
+      testFixture.detectChanges();
+
+      const menuPanel = getBitMenuPanel();
+      expect(menuPanel).toBeTruthy();
+
+      const menuButtons = menuPanel?.querySelectorAll("button[bitMenuItem]");
+      const cloneButtonFound = Array.from(menuButtons || []).some(
+        (btn) => btn.textContent?.trim() === "clone",
+      );
+
+      expect(cloneButtonFound).toBe(true);
+    });
+
+    it("is not shown when user does not have premium", async () => {
+      userHasPremium$.mockReturnValue(of(false));
+
+      const testFixture = TestBed.createComponent(ArchiveComponent);
+      testFixture.detectChanges();
+      await testFixture.whenStable();
+
+      const menuTrigger = testFixture.debugElement.query(By.css('button[aria-haspopup="menu"]'));
+      expect(menuTrigger).toBeTruthy();
+      (menuTrigger.nativeElement as HTMLButtonElement).click();
+      testFixture.detectChanges();
+
+      const menuPanel = getBitMenuPanel();
+      expect(menuPanel).toBeTruthy();
+
+      const menuButtons = menuPanel?.querySelectorAll("button[bitMenuItem]");
+      const cloneButtonFound = Array.from(menuButtons || []).some(
+        (btn) => btn.textContent?.trim() === "clone",
+      );
+
+      expect(cloneButtonFound).toBe(false);
+    });
+  });
 });
diff --git a/apps/browser/src/vault/popup/settings/archive.component.ts b/apps/browser/src/vault/popup/settings/archive.component.ts
index 8a81d733039..a34609bd8f8 100644
--- a/apps/browser/src/vault/popup/settings/archive.component.ts
+++ b/apps/browser/src/vault/popup/settings/archive.component.ts
@@ -135,6 +135,10 @@ export class ArchiveComponent {
     switchMap((userId) => this.cipherArchiveService.showSubscriptionEndedMessaging$(userId)),
   );
 
+  protected userHasPremium$ = this.userId$.pipe(
+    switchMap((userId) => this.cipherArchiveService.userHasPremium$(userId)),
+  );
+
   async navigateToPremium() {
     await this.router.navigate(["/premium"]);
   }

From 2b06f6ace3156f2050dfe790cf6b76d24deb8cca Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 4 Feb 2026 17:34:20 +0000
Subject: [PATCH 10/26] [deps] AC: Update core-js to v3.48.0 (#18709)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Jared <TheWolfBadger@gmail.com>
---
 apps/cli/package.json |  2 +-
 package-lock.json     | 10 +++++-----
 package.json          |  2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/cli/package.json b/apps/cli/package.json
index c80f79feff8..93658cce361 100644
--- a/apps/cli/package.json
+++ b/apps/cli/package.json
@@ -69,7 +69,7 @@
     "browser-hrtime": "1.1.8",
     "chalk": "4.1.2",
     "commander": "14.0.0",
-    "core-js": "3.47.0",
+    "core-js": "3.48.0",
     "form-data": "4.0.4",
     "https-proxy-agent": "7.0.6",
     "inquirer": "8.2.6",
diff --git a/package-lock.json b/package-lock.json
index 55873bdb40c..6352675d718 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,7 +38,7 @@
         "bufferutil": "4.1.0",
         "chalk": "4.1.2",
         "commander": "14.0.0",
-        "core-js": "3.47.0",
+        "core-js": "3.48.0",
         "form-data": "4.0.4",
         "https-proxy-agent": "7.0.6",
         "inquirer": "8.2.6",
@@ -205,7 +205,7 @@
         "browser-hrtime": "1.1.8",
         "chalk": "4.1.2",
         "commander": "14.0.0",
-        "core-js": "3.47.0",
+        "core-js": "3.48.0",
         "form-data": "4.0.4",
         "https-proxy-agent": "7.0.6",
         "inquirer": "8.2.6",
@@ -20879,9 +20879,9 @@
       }
     },
     "node_modules/core-js": {
-      "version": "3.47.0",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.47.0.tgz",
-      "integrity": "sha512-c3Q2VVkGAUyupsjRnaNX6u8Dq2vAdzm9iuPj5FW0fRxzlxgq9Q39MDq10IvmQSpLgHQNyQzQmOo6bgGHmH3NNg==",
+      "version": "3.48.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.48.0.tgz",
+      "integrity": "sha512-zpEHTy1fjTMZCKLHUZoVeylt9XrzaIN2rbPXEt0k+q7JE5CkCZdo6bNq55bn24a69CH7ErAVLKijxJja4fw+UQ==",
       "hasInstallScript": true,
       "license": "MIT",
       "funding": {
diff --git a/package.json b/package.json
index 1a72c49d263..2cc60c08c9d 100644
--- a/package.json
+++ b/package.json
@@ -177,7 +177,7 @@
     "bufferutil": "4.1.0",
     "chalk": "4.1.2",
     "commander": "14.0.0",
-    "core-js": "3.47.0",
+    "core-js": "3.48.0",
     "form-data": "4.0.4",
     "https-proxy-agent": "7.0.6",
     "inquirer": "8.2.6",

From a07c9ebf6bf3e87cc1d8710f119cb82434d5e1b3 Mon Sep 17 00:00:00 2001
From: Bryan Cunningham <bcunningham@bitwarden.com>
Date: Wed, 4 Feb 2026 14:20:44 -0500
Subject: [PATCH 11/26] [CL-637] icon api buttons links (#18388)

* update button api to accept icons

* use template outlet in button

* add link component

* create link component to handle anchors and buttons

* remove unnecessary let variables

* fix link focus state styling

* update link underline style

* fix broken skip link focus

* add focus method to link component

* fix typo

* fix off center loading state

* move flex styles to template to fix some minor style overrides

* remove unnecessary variables

* fix interaction states and add styles for test class to work properly

* refactor classes and make variable sreadonly

* fix classes not being applied correctly

* fix bad merge conflict resolution

* simplified button template
---
 .../at-risk-password-callout.component.ts     |   4 +-
 .../src/button/button.component.html          |  14 ++-
 .../components/src/button/button.component.ts |  16 ++-
 libs/components/src/button/button.stories.ts  |   6 +-
 .../components/src/callout/callout.stories.ts |   2 +-
 .../src/card/base-card/base-card.stories.ts   |   4 +-
 .../components/src/layout/layout.component.ts |   6 +-
 libs/components/src/link/index.ts             |   2 +-
 libs/components/src/link/link.component.html  |  11 ++
 .../{link.directive.ts => link.component.ts}  | 102 +++++++++++-------
 libs/components/src/link/link.module.ts       |   6 +-
 libs/components/src/link/link.stories.ts      |  73 +++++++++----
 .../advanced-uri-option-dialog.component.ts   |   8 +-
 .../cipher-view/cipher-view.component.html    |  10 +-
 .../src/cipher-view/cipher-view.component.ts  |   4 +-
 .../item-details/item-details-v2.component.ts |   4 +-
 .../decryption-failure-dialog.component.ts    |   4 +-
 17 files changed, 183 insertions(+), 93 deletions(-)
 create mode 100644 libs/components/src/link/link.component.html
 rename libs/components/src/link/{link.directive.ts => link.component.ts} (59%)

diff --git a/apps/browser/src/vault/popup/components/at-risk-callout/at-risk-password-callout.component.ts b/apps/browser/src/vault/popup/components/at-risk-callout/at-risk-password-callout.component.ts
index c37131b3ff1..f1614f800f2 100644
--- a/apps/browser/src/vault/popup/components/at-risk-callout/at-risk-password-callout.component.ts
+++ b/apps/browser/src/vault/popup/components/at-risk-callout/at-risk-password-callout.component.ts
@@ -6,7 +6,7 @@ import { firstValueFrom, switchMap } from "rxjs";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
-import { AnchorLinkDirective, CalloutModule, BannerModule } from "@bitwarden/components";
+import { LinkComponent, CalloutModule, BannerModule } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
 import { AtRiskPasswordCalloutData, AtRiskPasswordCalloutService } from "@bitwarden/vault";
 
@@ -15,7 +15,7 @@ import { AtRiskPasswordCalloutData, AtRiskPasswordCalloutService } from "@bitwar
 @Component({
   selector: "vault-at-risk-password-callout",
   imports: [
-    AnchorLinkDirective,
+    LinkComponent,
     CommonModule,
     RouterModule,
     CalloutModule,
diff --git a/libs/components/src/button/button.component.html b/libs/components/src/button/button.component.html
index 26e0c3b4d3d..d8718340217 100644
--- a/libs/components/src/button/button.component.html
+++ b/libs/components/src/button/button.component.html
@@ -1,6 +1,14 @@
-<span class="tw-relative">
-  <span [ngClass]="{ 'tw-invisible': showLoadingStyle() }">
-    <ng-content></ng-content>
+<span class="tw-relative tw-flex tw-items-center tw-justify-center">
+  <span [class.tw-invisible]="showLoadingStyle()" class="tw-flex tw-items-center tw-gap-2">
+    @if (startIcon()) {
+      <i class="{{ startIconClasses() }}"></i>
+    }
+    <div>
+      <ng-content></ng-content>
+    </div>
+    @if (endIcon()) {
+      <i class="{{ endIconClasses() }}"></i>
+    }
   </span>
   @if (showLoadingStyle()) {
     <span class="tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center">
diff --git a/libs/components/src/button/button.component.ts b/libs/components/src/button/button.component.ts
index 7cae8fe974d..1055d134e53 100644
--- a/libs/components/src/button/button.component.ts
+++ b/libs/components/src/button/button.component.ts
@@ -1,4 +1,4 @@
-import { NgClass } from "@angular/common";
+import { NgClass, NgTemplateOutlet } from "@angular/common";
 import {
   input,
   HostBinding,
@@ -14,6 +14,7 @@ import { debounce, interval } from "rxjs";
 
 import { AriaDisableDirective } from "../a11y";
 import { ButtonLikeAbstraction, ButtonType, ButtonSize } from "../shared/button-like.abstraction";
+import { BitwardenIcon } from "../shared/icon";
 import { SpinnerComponent } from "../spinner";
 import { ariaDisableElement } from "../utils";
 
@@ -71,7 +72,7 @@ const buttonStyles: Record<ButtonType, string[]> = {
   selector: "button[bitButton], a[bitButton]",
   templateUrl: "button.component.html",
   providers: [{ provide: ButtonLikeAbstraction, useExisting: ButtonComponent }],
-  imports: [NgClass, SpinnerComponent],
+  imports: [NgClass, NgTemplateOutlet, SpinnerComponent],
   hostDirectives: [AriaDisableDirective],
 })
 export class ButtonComponent implements ButtonLikeAbstraction {
@@ -125,12 +126,23 @@ export class ButtonComponent implements ButtonLikeAbstraction {
 
   readonly buttonType = input<ButtonType>("secondary");
 
+  readonly startIcon = input<BitwardenIcon | undefined>(undefined);
+
+  readonly endIcon = input<BitwardenIcon | undefined>(undefined);
+
   readonly size = input<ButtonSize>("default");
 
   readonly block = input(false, { transform: booleanAttribute });
 
   readonly loading = model<boolean>(false);
 
+  readonly startIconClasses = computed(() => {
+    return ["bwi", this.startIcon()];
+  });
+
+  readonly endIconClasses = computed(() => {
+    return ["bwi", this.endIcon()];
+  });
   /**
    * Determine whether it is appropriate to display a loading spinner. We only want to show
    * a spinner if it's been more than 75 ms since the `loading` state began. This prevents
diff --git a/libs/components/src/button/button.stories.ts b/libs/components/src/button/button.stories.ts
index 24c263f240a..9e8d23611ff 100644
--- a/libs/components/src/button/button.stories.ts
+++ b/libs/components/src/button/button.stories.ts
@@ -152,15 +152,13 @@ export const WithIcon: Story = {
     template: /*html*/ `
       <span class="tw-flex tw-gap-8">
         <div>
-          <button type="button" bitButton [buttonType]="buttonType" [block]="block">
-            <i class="bwi bwi-plus tw-me-2"></i>
+          <button type="button" startIcon="bwi-plus" bitButton [buttonType]="buttonType" [block]="block">
             Button label
           </button>
         </div>
         <div>
-          <button type="button" bitButton [buttonType]="buttonType" [block]="block">
+          <button type="button" endIcon="bwi-plus" bitButton [buttonType]="buttonType" [block]="block">
             Button label
-            <i class="bwi bwi-plus tw-ms-2"></i>
           </button>
         </div>
       </span>
diff --git a/libs/components/src/callout/callout.stories.ts b/libs/components/src/callout/callout.stories.ts
index ff1a8c16d5f..fb1a2d67a40 100644
--- a/libs/components/src/callout/callout.stories.ts
+++ b/libs/components/src/callout/callout.stories.ts
@@ -113,7 +113,7 @@ export const WithTextButton: Story = {
     template: `
       <bit-callout ${formatArgsForCodeSnippet<CalloutComponent>(args)}>
       <p class="tw-mb-2">The content of the callout</p>
-        <a bitLink> Visit the help center<i aria-hidden="true" class="bwi bwi-fw bwi-sm bwi-angle-right"></i> </a>
+        <a bitLink endIcon="bwi-angle-right">Visit the help center</a>
       </bit-callout>
     `,
   }),
diff --git a/libs/components/src/card/base-card/base-card.stories.ts b/libs/components/src/card/base-card/base-card.stories.ts
index bae07dd1468..98814c1f9f4 100644
--- a/libs/components/src/card/base-card/base-card.stories.ts
+++ b/libs/components/src/card/base-card/base-card.stories.ts
@@ -1,6 +1,6 @@
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
 
-import { AnchorLinkDirective } from "../../link";
+import { LinkComponent } from "../../link";
 import { TypographyModule } from "../../typography";
 
 import { BaseCardComponent } from "./base-card.component";
@@ -10,7 +10,7 @@ export default {
   component: BaseCardComponent,
   decorators: [
     moduleMetadata({
-      imports: [AnchorLinkDirective, TypographyModule],
+      imports: [LinkComponent, TypographyModule],
     }),
   ],
   parameters: {
diff --git a/libs/components/src/layout/layout.component.ts b/libs/components/src/layout/layout.component.ts
index da30b76a9f0..c71c4e73c6e 100644
--- a/libs/components/src/layout/layout.component.ts
+++ b/libs/components/src/layout/layout.component.ts
@@ -5,7 +5,7 @@ import { booleanAttribute, Component, ElementRef, inject, input, viewChild } fro
 import { RouterModule } from "@angular/router";
 
 import { DrawerService } from "../dialog/drawer.service";
-import { LinkModule } from "../link";
+import { LinkComponent, LinkModule } from "../link";
 import { SideNavService } from "../navigation/side-nav.service";
 import { SharedModule } from "../shared";
 
@@ -52,11 +52,11 @@ export class LayoutComponent {
    *
    * @see https://github.com/angular/components/issues/10247#issuecomment-384060265
    **/
-  private readonly skipLink = viewChild.required<ElementRef<HTMLElement>>("skipLink");
+  private readonly skipLink = viewChild.required<LinkComponent>("skipLink");
   handleKeydown(ev: KeyboardEvent) {
     if (isNothingFocused()) {
       ev.preventDefault();
-      this.skipLink().nativeElement.focus();
+      this.skipLink().el.nativeElement.focus();
     }
   }
 }
diff --git a/libs/components/src/link/index.ts b/libs/components/src/link/index.ts
index 480f5396de7..08617e813f5 100644
--- a/libs/components/src/link/index.ts
+++ b/libs/components/src/link/index.ts
@@ -1,2 +1,2 @@
-export * from "./link.directive";
+export * from "./link.component";
 export * from "./link.module";
diff --git a/libs/components/src/link/link.component.html b/libs/components/src/link/link.component.html
new file mode 100644
index 00000000000..810b65db519
--- /dev/null
+++ b/libs/components/src/link/link.component.html
@@ -0,0 +1,11 @@
+<div class="tw-flex tw-gap-2 tw-items-center">
+  @if (startIcon()) {
+    <i [class]="['bwi', startIcon()]" aria-hidden="true"></i>
+  }
+  <span>
+    <ng-content></ng-content>
+  </span>
+  @if (endIcon()) {
+    <i [class]="['bwi', endIcon()]" aria-hidden="true"></i>
+  }
+</div>
diff --git a/libs/components/src/link/link.directive.ts b/libs/components/src/link/link.component.ts
similarity index 59%
rename from libs/components/src/link/link.directive.ts
rename to libs/components/src/link/link.component.ts
index 62f0d8b878f..d826a4633a9 100644
--- a/libs/components/src/link/link.directive.ts
+++ b/libs/components/src/link/link.component.ts
@@ -1,6 +1,14 @@
-import { input, HostBinding, Directive, inject, ElementRef, booleanAttribute } from "@angular/core";
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  booleanAttribute,
+  inject,
+  ElementRef,
+} from "@angular/core";
 
-import { AriaDisableDirective } from "../a11y";
+import { BitwardenIcon } from "../shared/icon";
 import { ariaDisableElement } from "../utils";
 
 export const LinkTypes = [
@@ -46,16 +54,16 @@ const commonStyles = [
   "tw-transition",
   "tw-no-underline",
   "tw-cursor-pointer",
-  "hover:tw-underline",
-  "hover:tw-decoration-1",
+  "[&:hover_span]:tw-underline",
+  "[&.tw-test-hover_span]:tw-underline",
+  "[&:hover_span]:tw-decoration-[.125em]",
+  "[&.tw-test-hover_span]:tw-decoration-[.125em]",
   "disabled:tw-no-underline",
   "disabled:tw-cursor-not-allowed",
   "disabled:!tw-text-fg-disabled",
   "disabled:hover:!tw-text-fg-disabled",
   "disabled:hover:tw-no-underline",
   "focus-visible:tw-outline-none",
-  "focus-visible:tw-underline",
-  "focus-visible:tw-decoration-1",
   "focus-visible:before:tw-ring-border-focus",
 
   // Workaround for html button tag not being able to be set to `display: inline`
@@ -72,8 +80,12 @@ const commonStyles = [
   "before:tw-block",
   "before:tw-absolute",
   "before:-tw-inset-x-[0.1em]",
+  "before:-tw-inset-y-[0]",
   "before:tw-rounded-md",
   "before:tw-transition",
+  "before:tw-h-full",
+  "before:tw-w-[calc(100%_+_.25rem)]",
+  "before:tw-pointer-events-none",
   "focus-visible:before:tw-ring-2",
   "focus-visible:tw-z-10",
   "aria-disabled:tw-no-underline",
@@ -83,47 +95,57 @@ const commonStyles = [
   "aria-disabled:hover:tw-no-underline",
 ];
 
-@Directive()
-abstract class LinkDirective {
-  readonly linkType = input<LinkType>("default");
-}
-
-/**
-  * Text Links and Buttons can use either the `<a>` or `<button>` tags. Choose which based on the action the button takes:
-
-  * - if navigating to a new page, use a `<a>`
-  * - if taking an action on the current page, use a `<button>`
-
-  * Text buttons or links are most commonly used in paragraphs of text or in forms to customize actions or show/hide additional form options.
- */
-@Directive({
-  selector: "a[bitLink]",
+@Component({
+  selector: "a[bitLink], button[bitLink]",
+  templateUrl: "./link.component.html",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    "[class]": "classList()",
+    // This is for us to be able to correctly aria-disable the button and capture clicks.
+    // It's normally added via the AriaDisableDirective as a host directive.
+    // But, we're not able to conditionally apply the host directive based on if this is a button or not
+    "[attr.bit-aria-disable]": "isButton ? true : null",
+  },
 })
-export class AnchorLinkDirective extends LinkDirective {
-  @HostBinding("class") get classList() {
-    return ["before:-tw-inset-y-[0.125rem]"]
-      .concat(commonStyles)
-      .concat(linkStyles[this.linkType()] ?? []);
-  }
-}
-
-@Directive({
-  selector: "button[bitLink]",
-  hostDirectives: [AriaDisableDirective],
-})
-export class ButtonLinkDirective extends LinkDirective {
-  private el = inject(ElementRef<HTMLButtonElement>);
-
+export class LinkComponent {
+  readonly el = inject(ElementRef<HTMLElement>);
+  /**
+   * The variant of link you want to render
+   * @default "primary"
+   */
+  readonly linkType = input<LinkType>("primary");
+  /**
+   * The leading icon to display within the link
+   * @default undefined
+   */
+  readonly startIcon = input<BitwardenIcon | undefined>(undefined);
+  /**
+   * The trailing icon to display within the link
+   * @default undefined
+   */
+  readonly endIcon = input<BitwardenIcon | undefined>(undefined);
+  /**
+   * Whether the button is disabled
+   * @default false
+   * @note Only applicable if the link is rendered as a button
+   */
   readonly disabled = input(false, { transform: booleanAttribute });
 
-  @HostBinding("class") get classList() {
-    return ["before:-tw-inset-y-[0.25rem]"]
+  protected readonly isButton = this.el.nativeElement.tagName === "BUTTON";
+
+  readonly classList = computed(() => {
+    return [!this.isButton && "tw-inline-flex"]
       .concat(commonStyles)
       .concat(linkStyles[this.linkType()] ?? []);
+  });
+
+  focus() {
+    this.el.nativeElement.focus();
   }
 
   constructor() {
-    super();
-    ariaDisableElement(this.el.nativeElement, this.disabled);
+    if (this.isButton) {
+      ariaDisableElement(this.el.nativeElement, this.disabled);
+    }
   }
 }
diff --git a/libs/components/src/link/link.module.ts b/libs/components/src/link/link.module.ts
index 52d2f29e53c..87ad8daa7e1 100644
--- a/libs/components/src/link/link.module.ts
+++ b/libs/components/src/link/link.module.ts
@@ -1,9 +1,9 @@
 import { NgModule } from "@angular/core";
 
-import { AnchorLinkDirective, ButtonLinkDirective } from "./link.directive";
+import { LinkComponent } from "./link.component";
 
 @NgModule({
-  imports: [AnchorLinkDirective, ButtonLinkDirective],
-  exports: [AnchorLinkDirective, ButtonLinkDirective],
+  imports: [LinkComponent],
+  exports: [LinkComponent],
 })
 export class LinkModule {}
diff --git a/libs/components/src/link/link.stories.ts b/libs/components/src/link/link.stories.ts
index d27c4f74332..6df3a11ce40 100644
--- a/libs/components/src/link/link.stories.ts
+++ b/libs/components/src/link/link.stories.ts
@@ -2,7 +2,7 @@ import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
 
 import { formatArgsForCodeSnippet } from "../../../../.storybook/format-args-for-code-snippet";
 
-import { AnchorLinkDirective, ButtonLinkDirective, LinkTypes } from "./link.directive";
+import { LinkComponent, LinkTypes } from "./link.component";
 import { LinkModule } from "./link.module";
 
 export default {
@@ -26,7 +26,7 @@ export default {
   },
 } as Meta;
 
-type Story = StoryObj<ButtonLinkDirective>;
+type Story = StoryObj<LinkComponent>;
 
 export const Default: Story = {
   render: (args) => ({
@@ -40,9 +40,9 @@ export const Default: Story = {
             : "tw-bg-transparent",
     },
     template: /*html*/ `
-      <div class="tw-p-2" [class]="backgroundClass">
-        <a bitLink href="" ${formatArgsForCodeSnippet<ButtonLinkDirective>(args)}>Your text here</a>
-      </div>
+    <div class="tw-p-2" [class]="backgroundClass">
+      <a bitLink href="#" ${formatArgsForCodeSnippet<LinkComponent>(args)}>Your text here</a>
+    </div>
     `,
   }),
   args: {
@@ -181,14 +181,12 @@ export const Buttons: Story = {
         <button type="button" bitLink [linkType]="linkType">Button</button>
       </div>
       <div class="tw-block tw-p-2">
-        <button type="button" bitLink [linkType]="linkType">
-          <i class="bwi bwi-fw bwi-plus-circle" aria-hidden="true"></i>
+        <button type="button" bitLink [linkType]="linkType" startIcon="bwi-plus-circle">
           Add Icon Button
         </button>
       </div>
       <div class="tw-block tw-p-2">
-        <button type="button" bitLink [linkType]="linkType">
-          <i class="bwi bwi-fw bwi-sm bwi-angle-right" aria-hidden="true"></i>
+        <button type="button" bitLink [linkType]="linkType" endIcon="bwi-angle-right">
           Chevron Icon Button
         </button>
       </div>
@@ -203,7 +201,7 @@ export const Buttons: Story = {
   },
 };
 
-export const Anchors: StoryObj<AnchorLinkDirective> = {
+export const Anchors: StoryObj<LinkComponent> = {
   render: (args) => ({
     props: {
       linkType: args.linkType,
@@ -220,14 +218,12 @@ export const Anchors: StoryObj<AnchorLinkDirective> = {
         <a bitLink [linkType]="linkType" href="#">Anchor</a>
       </div>
       <div class="tw-block tw-p-2">
-        <a bitLink [linkType]="linkType" href="#">
-          <i class="bwi bwi-fw bwi-plus-circle" aria-hidden="true"></i>
+        <a bitLink [linkType]="linkType" href="#" startIcon="bwi-plus-circle">
           Add Icon Anchor
         </a>
       </div>
       <div class="tw-block tw-p-2">
-        <a bitLink [linkType]="linkType" href="#">
-          <i class="bwi bwi-fw bwi-sm bwi-angle-right" aria-hidden="true"></i>
+        <a bitLink [linkType]="linkType" href="#" endIcon="bwi-angle-right">
           Chevron Icon Anchor
         </a>
       </div>
@@ -247,20 +243,57 @@ export const Inline: Story = {
     props: args,
     template: /*html*/ `
       <span class="tw-text-main">
-        On the internet paragraphs often contain <a bitLink href="#">inline links</a>, but few know that <button type="button" bitLink>buttons</button> can be used for similar purposes.
+        On the internet paragraphs often contain <a bitLink href="#">inline links with very long text that might break</a>, but few know that <button type="button" bitLink>buttons</button> can be used for similar purposes.
       </span>
     `,
   }),
 };
 
-export const Inactive: Story = {
+export const WithIcons: Story = {
   render: (args) => ({
     props: args,
     template: /*html*/ `
-      <button type="button" bitLink disabled linkType="primary" class="tw-me-2">Primary</button>
-      <button type="button" bitLink disabled linkType="secondary" class="tw-me-2">Secondary</button>
-      <div class="tw-bg-bg-contrast tw-p-2 tw-inline-block">
-        <button type="button" bitLink disabled linkType="contrast">Contrast</button>
+    <div class="tw-p-2" [ngClass]="{ 'tw-bg-transparent': linkType != 'contrast', 'tw-bg-primary-600': linkType === 'contrast' }">
+      <div class="tw-block tw-p-2">
+        <a bitLink [linkType]="linkType" href="#" startIcon="bwi-star">Start icon link</a>
+      </div>
+      <div class="tw-block tw-p-2">
+        <a bitLink [linkType]="linkType" href="#" endIcon="bwi-external-link">External link</a>
+      </div>
+      <div class="tw-block tw-p-2">
+        <a bitLink [linkType]="linkType" href="#" startIcon="bwi-angle-left" endIcon="bwi-angle-right">Both icons</a>
+      </div>
+      <div class="tw-block tw-p-2">
+        <button type="button" bitLink [linkType]="linkType" startIcon="bwi-plus-circle">Add item</button>
+      </div>
+      <div class="tw-block tw-p-2">
+        <button type="button" bitLink [linkType]="linkType" endIcon="bwi-angle-right">Next</button>
+      </div>
+      <div class="tw-block tw-p-2">
+        <button type="button" bitLink [linkType]="linkType" startIcon="bwi-download" endIcon="bwi-check">Download complete</button>
+      </div>
+    </div>
+    `,
+  }),
+  args: {
+    linkType: "primary",
+  },
+};
+
+export const Inactive: Story = {
+  render: (args) => ({
+    props: {
+      ...args,
+      onClick: () => {
+        alert("Button clicked! (This should not appear when disabled)");
+      },
+    },
+    template: /*html*/ `
+      <button type="button" bitLink (click)="onClick()" disabled linkType="primary" class="tw-me-2">Primary button</button>
+      <a bitLink href="" disabled linkType="primary" class="tw-me-2">Links can not be inactive</a>
+      <button type="button" bitLink disabled linkType="secondary" class="tw-me-2">Secondary button</button>
+      <div class="tw-bg-primary-600 tw-p-2 tw-inline-block">
+        <button type="button" bitLink disabled linkType="contrast">Contrast button</button>
       </div>
     `,
   }),
diff --git a/libs/vault/src/cipher-form/components/autofill-options/advanced-uri-option-dialog.component.ts b/libs/vault/src/cipher-form/components/autofill-options/advanced-uri-option-dialog.component.ts
index 3580b1fada8..04545730172 100644
--- a/libs/vault/src/cipher-form/components/autofill-options/advanced-uri-option-dialog.component.ts
+++ b/libs/vault/src/cipher-form/components/autofill-options/advanced-uri-option-dialog.component.ts
@@ -3,13 +3,13 @@ import { Component, inject } from "@angular/core";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import {
-  ButtonLinkDirective,
   ButtonModule,
+  CenterPositionStrategy,
   DialogModule,
+  DialogRef,
   DialogService,
   DIALOG_DATA,
-  DialogRef,
-  CenterPositionStrategy,
+  LinkComponent,
 } from "@bitwarden/components";
 
 export type AdvancedUriOptionDialogParams = {
@@ -22,7 +22,7 @@ export type AdvancedUriOptionDialogParams = {
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
   templateUrl: "advanced-uri-option-dialog.component.html",
-  imports: [ButtonLinkDirective, ButtonModule, DialogModule, JslibModule],
+  imports: [LinkComponent, ButtonModule, DialogModule, JslibModule],
 })
 export class AdvancedUriOptionDialogComponent {
   constructor(private dialogRef: DialogRef<boolean>) {}
diff --git a/libs/vault/src/cipher-view/cipher-view.component.html b/libs/vault/src/cipher-view/cipher-view.component.html
index 3d0cc4c4414..05d2ecede72 100644
--- a/libs/vault/src/cipher-view/cipher-view.component.html
+++ b/libs/vault/src/cipher-view/cipher-view.component.html
@@ -12,9 +12,15 @@
   </bit-callout>
 
   <bit-callout *ngIf="showChangePasswordLink()" type="warning" [title]="''">
-    <a bitLink href="#" appStopClick (click)="launchChangePassword()" linkType="secondary">
+    <a
+      bitLink
+      href="#"
+      appStopClick
+      (click)="launchChangePassword()"
+      linkType="secondary"
+      endIcon="bwi-external-link"
+    >
       {{ "changeAtRiskPassword" | i18n }}
-      <i class="bwi bwi-external-link tw-ml-1" aria-hidden="true"></i>
     </a>
   </bit-callout>
 
diff --git a/libs/vault/src/cipher-view/cipher-view.component.ts b/libs/vault/src/cipher-view/cipher-view.component.ts
index 26e3f18b542..24713d3f612 100644
--- a/libs/vault/src/cipher-view/cipher-view.component.ts
+++ b/libs/vault/src/cipher-view/cipher-view.component.ts
@@ -30,7 +30,7 @@ import {
   CalloutModule,
   SearchModule,
   TypographyModule,
-  AnchorLinkDirective,
+  LinkComponent,
 } from "@bitwarden/components";
 
 import { ChangeLoginPasswordService } from "../abstractions/change-login-password.service";
@@ -66,7 +66,7 @@ import { ViewIdentitySectionsComponent } from "./view-identity-sections/view-ide
     ViewIdentitySectionsComponent,
     LoginCredentialsViewComponent,
     AutofillOptionsViewComponent,
-    AnchorLinkDirective,
+    LinkComponent,
     TypographyModule,
   ],
 })
diff --git a/libs/vault/src/cipher-view/item-details/item-details-v2.component.ts b/libs/vault/src/cipher-view/item-details/item-details-v2.component.ts
index eb0e468fa4f..73e7c2706be 100644
--- a/libs/vault/src/cipher-view/item-details/item-details-v2.component.ts
+++ b/libs/vault/src/cipher-view/item-details/item-details-v2.component.ts
@@ -19,9 +19,9 @@ import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";
 import {
   BadgeModule,
-  ButtonLinkDirective,
   CardComponent,
   FormFieldModule,
+  LinkComponent,
   TypographyModule,
 } from "@bitwarden/components";
 
@@ -39,7 +39,7 @@ import { OrgIconDirective } from "../../components/org-icon.directive";
     TypographyModule,
     OrgIconDirective,
     FormFieldModule,
-    ButtonLinkDirective,
+    LinkComponent,
     BadgeModule,
   ],
 })
diff --git a/libs/vault/src/components/decryption-failure-dialog/decryption-failure-dialog.component.ts b/libs/vault/src/components/decryption-failure-dialog/decryption-failure-dialog.component.ts
index 6b1a0e0d8aa..e829c003c5a 100644
--- a/libs/vault/src/components/decryption-failure-dialog/decryption-failure-dialog.component.ts
+++ b/libs/vault/src/components/decryption-failure-dialog/decryption-failure-dialog.component.ts
@@ -7,7 +7,7 @@ import { CipherId } from "@bitwarden/common/types/guid";
 import {
   DIALOG_DATA,
   DialogRef,
-  AnchorLinkDirective,
+  LinkComponent,
   AsyncActionsModule,
   ButtonModule,
   DialogModule,
@@ -32,7 +32,7 @@ export type DecryptionFailureDialogParams = {
     JslibModule,
     AsyncActionsModule,
     ButtonModule,
-    AnchorLinkDirective,
+    LinkComponent,
   ],
 })
 export class DecryptionFailureDialogComponent {

From a686ea1640450128591aa01bbe42de9ce5f793ec Mon Sep 17 00:00:00 2001
From: Jackson Engstrom <jengstrom@bitwarden.com>
Date: Wed, 4 Feb 2026 11:21:20 -0800
Subject: [PATCH 12/26] [PM-26706] Update search results header for extension
 (#18676)

* dynamically changes the allItems title from 'All items' to 'Search results' based on search text length

* updates logic and copy for changing the allItems header text

* changes how ciphers are displayed when a user has a search term and/or filters applied

* Update apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.html

Co-authored-by: Nick Krantz <125900171+nick-livefront@users.noreply.github.com>

* refactors tests

---------

Co-authored-by: Nick Krantz <125900171+nick-livefront@users.noreply.github.com>
---
 apps/browser/src/_locales/en/messages.json    |   6 +
 .../vault-v2/vault-v2.component.html          |  40 +++--
 .../vault-v2/vault-v2.component.spec.ts       | 145 +++++++++++++++++-
 .../components/vault-v2/vault-v2.component.ts |   5 +
 .../vault-popup-items.service.spec.ts         |  19 +++
 .../services/vault-popup-items.service.ts     |   9 ++
 6 files changed, 202 insertions(+), 22 deletions(-)

diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
index 9f15bfd840f..5026f5e2799 100644
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -6123,6 +6123,12 @@
   "whyAmISeeingThis": {
     "message": "Why am I seeing this?"
   },
+  "items": {
+    "message": "Items"
+  },
+  "searchResults": {
+    "message": "Search results"
+  },
   "resizeSideNavigation": {
     "message": "Resize side navigation"
   },
diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.html b/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.html
index 20871b4b134..f0a6b0d6000 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.html
@@ -107,20 +107,32 @@
     @if (vaultState === null) {
       <vault-fade-in-out>
         @if (!(loading$ | async)) {
-          <app-autofill-vault-list-items></app-autofill-vault-list-items>
-          <app-vault-list-items-container
-            [title]="'favorites' | i18n"
-            [ciphers]="(favoriteCiphers$ | async) || []"
-            id="favorites"
-            collapsibleKey="favorites"
-          ></app-vault-list-items-container>
-          <app-vault-list-items-container
-            [title]="'allItems' | i18n"
-            [ciphers]="(remainingCiphers$ | async) || []"
-            id="allItems"
-            disableSectionMargin
-            collapsibleKey="allItems"
-          ></app-vault-list-items-container>
+          <!--If there is search text fold all the filtered ciphers into one container-->
+          @if (hasSearchText$ | async) {
+            <app-vault-list-items-container
+              [title]="'searchResults' | i18n"
+              [ciphers]="(filteredCiphers$ | async) || []"
+              id="allItems"
+              disableSectionMargin
+              collapsibleKey="allItems"
+            ></app-vault-list-items-container>
+          } @else {
+            <app-autofill-vault-list-items></app-autofill-vault-list-items>
+            <app-vault-list-items-container
+              [title]="'favorites' | i18n"
+              [ciphers]="(favoriteCiphers$ | async) || []"
+              id="favorites"
+              collapsibleKey="favorites"
+            ></app-vault-list-items-container>
+            <!--Change the title header when a filter is applied-->
+            <app-vault-list-items-container
+              [title]="((numberOfAppliedFilters$ | async) === 0 ? 'allItems' : 'items') | i18n"
+              [ciphers]="(remainingCiphers$ | async) || []"
+              id="allItems"
+              disableSectionMargin
+              collapsibleKey="allItems"
+            ></app-vault-list-items-container>
+          }
         }
       </vault-fade-in-out>
     }
diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.spec.ts b/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.spec.ts
index d7824f3df58..a322fbc53dd 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.spec.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.spec.ts
@@ -44,6 +44,7 @@ import { VaultPopupAutofillService } from "../../services/vault-popup-autofill.s
 import { VaultPopupCopyButtonsService } from "../../services/vault-popup-copy-buttons.service";
 import { VaultPopupItemsService } from "../../services/vault-popup-items.service";
 import { VaultPopupListFiltersService } from "../../services/vault-popup-list-filters.service";
+import { VaultPopupLoadingService } from "../../services/vault-popup-loading.service";
 import { VaultPopupScrollPositionService } from "../../services/vault-popup-scroll-position.service";
 import { AtRiskPasswordCalloutComponent } from "../at-risk-callout/at-risk-password-callout.component";
 
@@ -174,15 +175,21 @@ describe("VaultV2Component", () => {
     showDeactivatedOrg$: new BehaviorSubject<boolean>(false),
     favoriteCiphers$: new BehaviorSubject<any[]>([]),
     remainingCiphers$: new BehaviorSubject<any[]>([]),
+    filteredCiphers$: new BehaviorSubject<any[]>([]),
     cipherCount$: new BehaviorSubject<number>(0),
-    loading$: new BehaviorSubject<boolean>(true),
+    hasSearchText$: new BehaviorSubject<boolean>(false),
   } as Partial<VaultPopupItemsService>;
 
-  const filtersSvc = {
+  const filtersSvc: any = {
     allFilters$: new Subject<any>(),
     filters$: new BehaviorSubject<any>({}),
     filterVisibilityState$: new BehaviorSubject<any>({}),
-  } as Partial<VaultPopupListFiltersService>;
+    numberOfAppliedFilters$: new BehaviorSubject<number>(0),
+  };
+
+  const loadingSvc: any = {
+    loading$: new BehaviorSubject<boolean>(false),
+  };
 
   const activeAccount$ = new BehaviorSubject<FakeAccount | null>({ id: "user-1" });
 
@@ -240,6 +247,7 @@ describe("VaultV2Component", () => {
         provideNoopAnimations(),
         { provide: VaultPopupItemsService, useValue: itemsSvc },
         { provide: VaultPopupListFiltersService, useValue: filtersSvc },
+        { provide: VaultPopupLoadingService, useValue: loadingSvc },
         { provide: VaultPopupScrollPositionService, useValue: scrollSvc },
         {
           provide: AccountService,
@@ -366,18 +374,18 @@ describe("VaultV2Component", () => {
   });
 
   it("loading$ is true when items loading or filters missing; false when both ready", () => {
-    const itemsLoading$ = itemsSvc.loading$ as unknown as BehaviorSubject<boolean>;
+    const vaultLoading$ = loadingSvc.loading$ as unknown as BehaviorSubject<boolean>;
     const allFilters$ = filtersSvc.allFilters$ as unknown as Subject<any>;
     const readySubject$ = component["readySubject"] as unknown as BehaviorSubject<boolean>;
 
     const values: boolean[] = [];
     getObs<boolean>(component, "loading$").subscribe((v) => values.push(!!v));
 
-    itemsLoading$.next(true);
+    vaultLoading$.next(true);
 
     allFilters$.next({});
 
-    itemsLoading$.next(false);
+    vaultLoading$.next(false);
 
     readySubject$.next(true);
 
@@ -389,7 +397,7 @@ describe("VaultV2Component", () => {
     const component = fixture.componentInstance;
 
     const readySubject$ = component["readySubject"] as unknown as BehaviorSubject<boolean>;
-    const itemsLoading$ = itemsSvc.loading$ as unknown as BehaviorSubject<boolean>;
+    const vaultLoading$ = loadingSvc.loading$ as unknown as BehaviorSubject<boolean>;
     const allFilters$ = filtersSvc.allFilters$ as unknown as Subject<any>;
 
     fixture.detectChanges();
@@ -400,7 +408,7 @@ describe("VaultV2Component", () => {
     ) as HTMLElement;
 
     // Unblock loading
-    itemsLoading$.next(false);
+    vaultLoading$.next(false);
     readySubject$.next(true);
     allFilters$.next({});
     tick();
@@ -607,6 +615,127 @@ describe("VaultV2Component", () => {
     expect(spotlights.length).toBe(0);
   }));
 
+  it("does not render app-autofill-vault-list-items or favorites item container when hasSearchText$ is true", () => {
+    itemsSvc.hasSearchText$.next(true);
+
+    const fixture = TestBed.createComponent(VaultV2Component);
+    component = fixture.componentInstance;
+
+    const readySubject$ = component["readySubject"];
+    const allFilters$ = filtersSvc.allFilters$ as unknown as Subject<any>;
+
+    // Unblock loading
+    readySubject$.next(true);
+    allFilters$.next({});
+    fixture.detectChanges();
+
+    const autofillElement = fixture.debugElement.query(By.css("app-autofill-vault-list-items"));
+    expect(autofillElement).toBeFalsy();
+
+    const favoritesElement = fixture.debugElement.query(By.css("#favorites"));
+    expect(favoritesElement).toBeFalsy();
+  });
+
+  it("does render app-autofill-vault-list-items and favorites item container when hasSearchText$ is false", () => {
+    // Ensure vaultState is null (not Empty, NoResults, or DeactivatedOrg)
+    itemsSvc.emptyVault$.next(false);
+    itemsSvc.noFilteredResults$.next(false);
+    itemsSvc.showDeactivatedOrg$.next(false);
+    itemsSvc.hasSearchText$.next(false);
+    loadingSvc.loading$.next(false);
+
+    const fixture = TestBed.createComponent(VaultV2Component);
+    component = fixture.componentInstance;
+
+    const readySubject$ = component["readySubject"];
+    const allFilters$ = filtersSvc.allFilters$ as unknown as Subject<any>;
+
+    // Unblock loading
+    readySubject$.next(true);
+    allFilters$.next({});
+    fixture.detectChanges();
+
+    const autofillElement = fixture.debugElement.query(By.css("app-autofill-vault-list-items"));
+    expect(autofillElement).toBeTruthy();
+
+    const favoritesElement = fixture.debugElement.query(By.css("#favorites"));
+    expect(favoritesElement).toBeTruthy();
+  });
+
+  it("does set the title for allItems container to allItems when hasSearchText$ and numberOfAppliedFilters$ are false and 0 respectively", () => {
+    // Ensure vaultState is null (not Empty, NoResults, or DeactivatedOrg)
+    itemsSvc.emptyVault$.next(false);
+    itemsSvc.noFilteredResults$.next(false);
+    itemsSvc.showDeactivatedOrg$.next(false);
+    itemsSvc.hasSearchText$.next(false);
+    filtersSvc.numberOfAppliedFilters$.next(0);
+    loadingSvc.loading$.next(false);
+
+    const fixture = TestBed.createComponent(VaultV2Component);
+    component = fixture.componentInstance;
+
+    const readySubject$ = component["readySubject"];
+    const allFilters$ = filtersSvc.allFilters$ as unknown as Subject<any>;
+
+    // Unblock loading
+    readySubject$.next(true);
+    allFilters$.next({});
+    fixture.detectChanges();
+
+    const allItemsElement = fixture.debugElement.query(By.css("#allItems"));
+    const allItemsTitle = allItemsElement.componentInstance.title();
+    expect(allItemsTitle).toBe("allItems");
+  });
+
+  it("does set the title for allItems container to searchResults when hasSearchText$ is true", () => {
+    // Ensure vaultState is null (not Empty, NoResults, or DeactivatedOrg)
+    itemsSvc.emptyVault$.next(false);
+    itemsSvc.noFilteredResults$.next(false);
+    itemsSvc.showDeactivatedOrg$.next(false);
+    itemsSvc.hasSearchText$.next(true);
+    loadingSvc.loading$.next(false);
+
+    const fixture = TestBed.createComponent(VaultV2Component);
+    component = fixture.componentInstance;
+
+    const readySubject$ = component["readySubject"];
+    const allFilters$ = filtersSvc.allFilters$ as unknown as Subject<any>;
+
+    // Unblock loading
+    readySubject$.next(true);
+    allFilters$.next({});
+    fixture.detectChanges();
+
+    const allItemsElement = fixture.debugElement.query(By.css("#allItems"));
+    const allItemsTitle = allItemsElement.componentInstance.title();
+    expect(allItemsTitle).toBe("searchResults");
+  });
+
+  it("does set the title for allItems container to items when numberOfAppliedFilters$ is > 0", fakeAsync(() => {
+    // Ensure vaultState is null (not Empty, NoResults, or DeactivatedOrg)
+    itemsSvc.emptyVault$.next(false);
+    itemsSvc.noFilteredResults$.next(false);
+    itemsSvc.showDeactivatedOrg$.next(false);
+    itemsSvc.hasSearchText$.next(false);
+    filtersSvc.numberOfAppliedFilters$.next(1);
+    loadingSvc.loading$.next(false);
+
+    const fixture = TestBed.createComponent(VaultV2Component);
+    component = fixture.componentInstance;
+
+    const readySubject$ = component["readySubject"];
+    const allFilters$ = filtersSvc.allFilters$ as unknown as Subject<any>;
+
+    // Unblock loading
+    readySubject$.next(true);
+    allFilters$.next({});
+    fixture.detectChanges();
+
+    const allItemsElement = fixture.debugElement.query(By.css("#allItems"));
+    const allItemsTitle = allItemsElement.componentInstance.title();
+    expect(allItemsTitle).toBe("items");
+  }));
+
   describe("AutoConfirmExtensionSetupDialog", () => {
     beforeEach(() => {
       autoConfirmDialogSpy.mockClear();
diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.ts b/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.ts
index 51e735fb1ef..fce084542a9 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.ts
@@ -160,6 +160,11 @@ export class VaultV2Component implements OnInit, OnDestroy {
     FeatureFlag.BrowserPremiumSpotlight,
   );
 
+  protected readonly hasSearchText$ = this.vaultPopupItemsService.hasSearchText$;
+  protected readonly numberOfAppliedFilters$ =
+    this.vaultPopupListFiltersService.numberOfAppliedFilters$;
+
+  protected filteredCiphers$ = this.vaultPopupItemsService.filteredCiphers$;
   protected favoriteCiphers$ = this.vaultPopupItemsService.favoriteCiphers$;
   protected remainingCiphers$ = this.vaultPopupItemsService.remainingCiphers$;
   protected allFilters$ = this.vaultPopupListFiltersService.allFilters$;
diff --git a/apps/browser/src/vault/popup/services/vault-popup-items.service.spec.ts b/apps/browser/src/vault/popup/services/vault-popup-items.service.spec.ts
index 7cd73279c3d..093fdbfb66d 100644
--- a/apps/browser/src/vault/popup/services/vault-popup-items.service.spec.ts
+++ b/apps/browser/src/vault/popup/services/vault-popup-items.service.spec.ts
@@ -323,6 +323,25 @@ describe("VaultPopupItemsService", () => {
     });
   });
 
+  describe("filteredCiphers$", () => {
+    it("should filter filteredCipher$ down to search term", (done) => {
+      const cipherList = Object.values(allCiphers);
+      const searchText = "Login";
+
+      searchService.searchCiphers.mockImplementation(async () => {
+        return cipherList.filter((cipher) => {
+          return cipher.name.includes(searchText);
+        });
+      });
+
+      service.filteredCiphers$.subscribe((ciphers) => {
+        // There are 10 ciphers but only 3 with "Login" in the name
+        expect(ciphers.length).toBe(3);
+        done();
+      });
+    });
+  });
+
   describe("favoriteCiphers$", () => {
     it("should exclude autofill ciphers", (done) => {
       service.favoriteCiphers$.subscribe((ciphers) => {
diff --git a/apps/browser/src/vault/popup/services/vault-popup-items.service.ts b/apps/browser/src/vault/popup/services/vault-popup-items.service.ts
index 321d7936806..7ccfc834c87 100644
--- a/apps/browser/src/vault/popup/services/vault-popup-items.service.ts
+++ b/apps/browser/src/vault/popup/services/vault-popup-items.service.ts
@@ -201,6 +201,15 @@ export class VaultPopupItemsService {
     shareReplay({ refCount: true, bufferSize: 1 }),
   );
 
+  /**
+   * List of ciphers that are filtered using filters and search.
+   * Includes favorite ciphers and ciphers currently suggested for autofill.
+   * Ciphers are sorted by name.
+   */
+  filteredCiphers$: Observable<PopupCipherViewLike[]> = this._filteredCipherList$.pipe(
+    shareReplay({ refCount: false, bufferSize: 1 }),
+  );
+
   /**
    * List of ciphers that can be used for autofill on the current tab. Includes cards and/or identities
    * if enabled in the vault settings. Ciphers are sorted by type, then by last used date, then by name.

From afc46cc50a432961a56e051df6afd0510ee3735d Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 4 Feb 2026 14:40:50 -0600
Subject: [PATCH 13/26] [deps] Vault: Update @koa/router to v15 (#18086)

* [deps] Vault: Update @koa/router to v15

* update router imports from `@koa/router`

* remove `@types/koa__router` no longer needed with update to `@koa/router`

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Nick Krantz <125900171+nick-livefront@users.noreply.github.com>
Co-authored-by: Nick Krantz <nick@livefront.com>
---
 .github/renovate.json5                        |  1 -
 apps/cli/package.json                         |  2 +-
 apps/cli/src/commands/serve.command.ts        |  4 +-
 apps/cli/src/oss-serve-configurator.ts        |  4 +-
 .../bit-cli/src/bit-serve-configurator.ts     |  6 +-
 package-lock.json                             | 72 ++++++++++++-------
 package.json                                  |  3 +-
 7 files changed, 54 insertions(+), 38 deletions(-)

diff --git a/.github/renovate.json5 b/.github/renovate.json5
index 718586a9b1a..6845e5f3829 100644
--- a/.github/renovate.json5
+++ b/.github/renovate.json5
@@ -313,7 +313,6 @@
         "@types/inquirer",
         "@types/koa",
         "@types/koa__multer",
-        "@types/koa__router",
         "@types/koa-bodyparser",
         "@types/koa-json",
         "@types/lunr",
diff --git a/apps/cli/package.json b/apps/cli/package.json
index 93658cce361..79653ec970f 100644
--- a/apps/cli/package.json
+++ b/apps/cli/package.json
@@ -64,7 +64,7 @@
   },
   "dependencies": {
     "@koa/multer": "4.0.0",
-    "@koa/router": "14.0.0",
+    "@koa/router": "15.2.0",
     "big-integer": "1.6.52",
     "browser-hrtime": "1.1.8",
     "chalk": "4.1.2",
diff --git a/apps/cli/src/commands/serve.command.ts b/apps/cli/src/commands/serve.command.ts
index 5bf19333f35..92632981154 100644
--- a/apps/cli/src/commands/serve.command.ts
+++ b/apps/cli/src/commands/serve.command.ts
@@ -1,7 +1,7 @@
 import http from "node:http";
 import net from "node:net";
 
-import * as koaRouter from "@koa/router";
+import { Router } from "@koa/router";
 import { OptionValues } from "commander";
 import * as koa from "koa";
 import * as koaBodyParser from "koa-bodyparser";
@@ -29,7 +29,7 @@ export class ServeCommand {
     );
 
     const server = new koa();
-    const router = new koaRouter();
+    const router = new Router();
     process.env.BW_SERVE = "true";
     process.env.BW_NOINTERACTION = "true";
 
diff --git a/apps/cli/src/oss-serve-configurator.ts b/apps/cli/src/oss-serve-configurator.ts
index e0385534cb7..fbf3c778725 100644
--- a/apps/cli/src/oss-serve-configurator.ts
+++ b/apps/cli/src/oss-serve-configurator.ts
@@ -1,7 +1,7 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import * as koaMulter from "@koa/multer";
-import * as koaRouter from "@koa/router";
+import { Router } from "@koa/router";
 import * as koa from "koa";
 import { firstValueFrom, map } from "rxjs";
 
@@ -218,7 +218,7 @@ export class OssServeConfigurator {
     );
   }
 
-  async configureRouter(router: koaRouter) {
+  async configureRouter(router: Router) {
     router.get("/generate", async (ctx, next) => {
       const response = await this.generateCommand.run(ctx.request.query);
       this.processResponse(ctx.response, response);
diff --git a/bitwarden_license/bit-cli/src/bit-serve-configurator.ts b/bitwarden_license/bit-cli/src/bit-serve-configurator.ts
index 71df651d9d0..5a00dccb59b 100644
--- a/bitwarden_license/bit-cli/src/bit-serve-configurator.ts
+++ b/bitwarden_license/bit-cli/src/bit-serve-configurator.ts
@@ -1,4 +1,4 @@
-import * as koaRouter from "@koa/router";
+import { Router } from "@koa/router";
 
 import { OssServeConfigurator } from "@bitwarden/cli/oss-serve-configurator";
 
@@ -16,7 +16,7 @@ export class BitServeConfigurator extends OssServeConfigurator {
     super(serviceContainer);
   }
 
-  override async configureRouter(router: koaRouter): Promise<void> {
+  override async configureRouter(router: Router): Promise<void> {
     // Register OSS endpoints
     await super.configureRouter(router);
 
@@ -24,7 +24,7 @@ export class BitServeConfigurator extends OssServeConfigurator {
     this.serveDeviceApprovals(router);
   }
 
-  private serveDeviceApprovals(router: koaRouter) {
+  private serveDeviceApprovals(router: Router) {
     router.get("/device-approval/:organizationId", async (ctx, next) => {
       if (await this.errorIfLocked(ctx.response)) {
         await next();
diff --git a/package-lock.json b/package-lock.json
index 6352675d718..752f186e970 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,7 +28,7 @@
         "@electron/fuses": "1.8.0",
         "@emotion/css": "11.13.5",
         "@koa/multer": "4.0.0",
-        "@koa/router": "14.0.0",
+        "@koa/router": "15.2.0",
         "@microsoft/signalr": "8.0.7",
         "@microsoft/signalr-protocol-msgpack": "8.0.7",
         "@ng-select/ng-select": "20.7.0",
@@ -104,7 +104,6 @@
         "@types/jsdom": "21.1.7",
         "@types/koa": "3.0.1",
         "@types/koa__multer": "2.0.7",
-        "@types/koa__router": "12.0.4",
         "@types/koa-bodyparser": "4.3.7",
         "@types/koa-json": "2.0.24",
         "@types/lowdb": "1.0.15",
@@ -200,7 +199,7 @@
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@koa/multer": "4.0.0",
-        "@koa/router": "14.0.0",
+        "@koa/router": "15.2.0",
         "big-integer": "1.6.52",
         "browser-hrtime": "1.1.8",
         "chalk": "4.1.2",
@@ -8746,18 +8745,46 @@
       }
     },
     "node_modules/@koa/router": {
-      "version": "14.0.0",
-      "resolved": "https://registry.npmjs.org/@koa/router/-/router-14.0.0.tgz",
-      "integrity": "sha512-LBSu5K0qAaaQcXX/0WIB9PGDevyCxxpnc1uq13vV/CgObaVxuis5hKl3Eboq/8gcb6ebnkAStW9NB/Em2eYyFA==",
+      "version": "15.2.0",
+      "resolved": "https://registry.npmjs.org/@koa/router/-/router-15.2.0.tgz",
+      "integrity": "sha512-7YUhq4W83cybfNa4E7JqJpWzoCTSvbnFltkvRaUaUX1ybFzlUoLNY1SqT8XmIAO6nGbFrev+FvJHw4mL+4WhuQ==",
       "license": "MIT",
       "dependencies": {
-        "debug": "^4.4.1",
-        "http-errors": "^2.0.0",
+        "debug": "^4.4.3",
+        "http-errors": "^2.0.1",
         "koa-compose": "^4.1.0",
-        "path-to-regexp": "^8.2.0"
+        "path-to-regexp": "^8.3.0"
       },
       "engines": {
         "node": ">= 20"
+      },
+      "peerDependencies": {
+        "koa": "^2.0.0 || ^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "koa": {
+          "optional": false
+        }
+      }
+    },
+    "node_modules/@koa/router/node_modules/http-errors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+      "license": "MIT",
+      "dependencies": {
+        "depd": "~2.0.0",
+        "inherits": "~2.0.4",
+        "setprototypeof": "~1.2.0",
+        "statuses": "~2.0.2",
+        "toidentifier": "~1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/@leichtgewicht/ip-codec": {
@@ -15735,16 +15762,6 @@
         "@types/koa": "*"
       }
     },
-    "node_modules/@types/koa__router": {
-      "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/@types/koa__router/-/koa__router-12.0.4.tgz",
-      "integrity": "sha512-Y7YBbSmfXZpa/m5UGGzb7XadJIRBRnwNY9cdAojZGp65Cpe5MAP3mOZE7e3bImt8dfKS4UFcR16SLH8L/z7PBw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/koa": "*"
-      }
-    },
     "node_modules/@types/koa-bodyparser": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/@types/koa-bodyparser/-/koa-bodyparser-4.3.7.tgz",
@@ -21479,9 +21496,9 @@
       }
     },
     "node_modules/debug": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
-      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -35514,12 +35531,13 @@
       }
     },
     "node_modules/path-to-regexp": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.2.0.tgz",
-      "integrity": "sha512-TdrF7fW9Rphjq4RjrW0Kp2AW0Ahwu9sRGTkS6bvDi0SCwZlEZYmcfDbEsTz8RVk0EHIS/Vd1bv3JhG+1xZuAyQ==",
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.3.0.tgz",
+      "integrity": "sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==",
       "license": "MIT",
-      "engines": {
-        "node": ">=16"
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/path-type": {
diff --git a/package.json b/package.json
index 2cc60c08c9d..ea7dc32820c 100644
--- a/package.json
+++ b/package.json
@@ -71,7 +71,6 @@
     "@types/jsdom": "21.1.7",
     "@types/koa": "3.0.1",
     "@types/koa__multer": "2.0.7",
-    "@types/koa__router": "12.0.4",
     "@types/koa-bodyparser": "4.3.7",
     "@types/koa-json": "2.0.24",
     "@types/lowdb": "1.0.15",
@@ -167,7 +166,7 @@
     "@electron/fuses": "1.8.0",
     "@emotion/css": "11.13.5",
     "@koa/multer": "4.0.0",
-    "@koa/router": "14.0.0",
+    "@koa/router": "15.2.0",
     "@microsoft/signalr": "8.0.7",
     "@microsoft/signalr-protocol-msgpack": "8.0.7",
     "@ng-select/ng-select": "20.7.0",

From 34108d93e40b2238931dc35089702df889aada0f Mon Sep 17 00:00:00 2001
From: neuronull <9162534+neuronull@users.noreply.github.com>
Date: Wed, 4 Feb 2026 13:01:18 -0800
Subject: [PATCH 14/26] SSH Agent v2: Add ssh key primitive types (#18583)

Co-authored-by: Bernd Schoolmann <mail@quexten.com>
---
 .github/CODEOWNERS                            |   4 +-
 apps/desktop/desktop_native/Cargo.lock        |  16 +-
 apps/desktop/desktop_native/Cargo.toml        |   1 +
 .../desktop_native/ssh_agent/Cargo.toml       |  19 ++
 .../ssh_agent/src/crypto/mod.rs               | 184 ++++++++++++++++++
 .../desktop_native/ssh_agent/src/lib.rs       |   7 +
 6 files changed, 227 insertions(+), 4 deletions(-)
 create mode 100644 apps/desktop/desktop_native/ssh_agent/Cargo.toml
 create mode 100644 apps/desktop/desktop_native/ssh_agent/src/crypto/mod.rs
 create mode 100644 apps/desktop/desktop_native/ssh_agent/src/lib.rs

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 8bb15d37fdf..2582b96961d 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -156,6 +156,8 @@ apps/desktop/macos/autofill-extension @bitwarden/team-autofill-desktop-dev
 apps/desktop/src/app/components/fido2placeholder.component.ts @bitwarden/team-autofill-desktop-dev
 apps/desktop/desktop_native/windows_plugin_authenticator @bitwarden/team-autofill-desktop-dev
 apps/desktop/desktop_native/autotype @bitwarden/team-autofill-desktop-dev
+apps/desktop/desktop_native/core/src/ssh_agent @bitwarden/team-autofill-desktop-dev @bitwarden/wg-ssh-keys
+apps/desktop/desktop_native/ssh_agent @bitwarden/team-autofill-desktop-dev @bitwarden/wg-ssh-keys
 apps/desktop/desktop_native/napi/src/autofill.rs @bitwarden/team-autofill-desktop-dev
 apps/desktop/desktop_native/napi/src/autotype.rs @bitwarden/team-autofill-desktop-dev
 apps/desktop/desktop_native/napi/src/sshagent.rs @bitwarden/team-autofill-desktop-dev
@@ -164,8 +166,6 @@ apps/desktop/native-messaging-test-runner @bitwarden/team-autofill-desktop-dev
 apps/desktop/src/services/duckduckgo-message-handler.service.ts @bitwarden/team-autofill-desktop-dev
 apps/desktop/src/services/encrypted-message-handler.service.ts @bitwarden/team-autofill-desktop-dev
 .github/workflows/alert-ddg-files-modified.yml @bitwarden/team-autofill-desktop-dev
-# SSH Agent
-apps/desktop/desktop_native/core/src/ssh_agent @bitwarden/team-autofill-desktop-dev @bitwarden/wg-ssh-keys
 
 ## UI Foundation ##
 .github/workflows/chromatic.yml @bitwarden/team-ui-foundation
diff --git a/apps/desktop/desktop_native/Cargo.lock b/apps/desktop/desktop_native/Cargo.lock
index e5c197ef51c..7154c42ac89 100644
--- a/apps/desktop/desktop_native/Cargo.lock
+++ b/apps/desktop/desktop_native/Cargo.lock
@@ -377,9 +377,9 @@ checksum = "72b3254f16251a8381aa12e40e3c4d2f0199f8c6508fbecb9d91f575e0fbb8c6"
 
 [[package]]
 name = "base64ct"
-version = "1.7.3"
+version = "1.8.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "89e25b6adfb930f02d1981565a6e5d9c547ac15a96606256d3b59040e5cd4ca3"
+checksum = "2af50177e190e07a26ab74f8b1efbfe2ef87da2116221318cb1c2e82baf7de06"
 
 [[package]]
 name = "basic-toml"
@@ -3295,6 +3295,9 @@ dependencies = [
  "bcrypt-pbkdf",
  "ed25519-dalek",
  "num-bigint-dig",
+ "p256",
+ "p384",
+ "p521",
  "rand_core 0.6.4",
  "rsa",
  "sec1",
@@ -3306,6 +3309,15 @@ dependencies = [
  "zeroize",
 ]
 
+[[package]]
+name = "ssh_agent"
+version = "0.0.0"
+dependencies = [
+ "anyhow",
+ "base64",
+ "ssh-key",
+]
+
 [[package]]
 name = "stable_deref_trait"
 version = "1.2.0"
diff --git a/apps/desktop/desktop_native/Cargo.toml b/apps/desktop/desktop_native/Cargo.toml
index b3fac851026..09a4d603327 100644
--- a/apps/desktop/desktop_native/Cargo.toml
+++ b/apps/desktop/desktop_native/Cargo.toml
@@ -9,6 +9,7 @@ members = [
     "napi",
     "process_isolation",
     "proxy",
+    "ssh_agent",
     "windows_plugin_authenticator",
 ]
 
diff --git a/apps/desktop/desktop_native/ssh_agent/Cargo.toml b/apps/desktop/desktop_native/ssh_agent/Cargo.toml
new file mode 100644
index 00000000000..becab28c356
--- /dev/null
+++ b/apps/desktop/desktop_native/ssh_agent/Cargo.toml
@@ -0,0 +1,19 @@
+[package]
+name = "ssh_agent"
+edition = { workspace = true }
+license = { workspace = true }
+version = { workspace = true }
+publish = { workspace = true }
+
+[dependencies]
+anyhow = { workspace = true }
+base64 = { workspace = true }
+ssh-key = { version = "=0.6.7", features = [
+    "encryption",
+    "ed25519",
+    "rsa",
+    "rand_core",
+] }
+
+[lints]
+workspace = true
diff --git a/apps/desktop/desktop_native/ssh_agent/src/crypto/mod.rs b/apps/desktop/desktop_native/ssh_agent/src/crypto/mod.rs
new file mode 100644
index 00000000000..655e440dc78
--- /dev/null
+++ b/apps/desktop/desktop_native/ssh_agent/src/crypto/mod.rs
@@ -0,0 +1,184 @@
+//! Cryptographic key management for the SSH agent.
+//!
+//! This module provides the core primitive types and functionality for managing
+//! SSH keys in the Bitwarden SSH agent.
+//!
+//! # Supported signing algorithms
+//!
+//! - Ed25519
+//! - RSA
+//!
+//! ECDSA keys are not currently supported (PM-29894)
+
+use std::fmt;
+
+use anyhow::anyhow;
+use ssh_key::private::{Ed25519Keypair, RsaKeypair};
+
+/// Represents an SSH key and its associated metadata.
+#[derive(Clone)]
+pub(crate) struct SSHKeyData {
+    /// Private key of the key pair
+    private_key: PrivateKey,
+    /// Public key of the key pair
+    public_key: PublicKey,
+    /// Human-readable name
+    name: String,
+    /// Vault cipher ID associated with the key pair
+    cipher_id: String,
+}
+
+impl SSHKeyData {
+    /// Creates a new `SSHKeyData` instance.
+    ///
+    /// # Arguments
+    ///
+    /// * `private_key` - The private key component
+    /// * `public_key` - The public key component
+    /// * `name` - A human-readable name for the key
+    /// * `cipher_id` - The vault cipher identifier associated with this key
+    pub(crate) fn new(
+        private_key: PrivateKey,
+        public_key: PublicKey,
+        name: String,
+        cipher_id: String,
+    ) -> Self {
+        Self {
+            private_key,
+            public_key,
+            name,
+            cipher_id,
+        }
+    }
+
+    /// # Returns
+    ///
+    /// A reference to the [`PublicKey`].
+    pub(crate) fn public_key(&self) -> &PublicKey {
+        &self.public_key
+    }
+
+    /// # Returns
+    ///
+    /// A reference to the [`PrivateKey`].
+    pub(crate) fn private_key(&self) -> &PrivateKey {
+        &self.private_key
+    }
+
+    /// # Returns
+    ///
+    /// A reference to the human-readable name for this key.
+    pub(crate) fn name(&self) -> &String {
+        &self.name
+    }
+
+    /// # Returns
+    ///
+    /// A reference to the cipher ID that links this key to a vault entry.
+    pub(crate) fn cipher_id(&self) -> &String {
+        &self.cipher_id
+    }
+}
+
+/// Represents an SSH private key.
+#[derive(Clone, PartialEq, Debug)]
+pub(crate) enum PrivateKey {
+    Ed25519(Ed25519Keypair),
+    Rsa(RsaKeypair),
+}
+
+impl TryFrom<ssh_key::private::PrivateKey> for PrivateKey {
+    type Error = anyhow::Error;
+
+    fn try_from(key: ssh_key::private::PrivateKey) -> Result<Self, Self::Error> {
+        match key.algorithm() {
+            ssh_key::Algorithm::Ed25519 => Ok(Self::Ed25519(
+                key.key_data()
+                    .ed25519()
+                    .ok_or(anyhow!("Failed to parse ed25519 key"))?
+                    .to_owned(),
+            )),
+            ssh_key::Algorithm::Rsa { hash: _ } => Ok(Self::Rsa(
+                key.key_data()
+                    .rsa()
+                    .ok_or(anyhow!("Failed to parse RSA key"))?
+                    .to_owned(),
+            )),
+            _ => Err(anyhow!("Unsupported key type")),
+        }
+    }
+}
+
+/// Represents an SSH public key.
+///
+/// Contains the algorithm identifier (e.g., "ssh-ed25519", "ssh-rsa")
+/// and the binary blob of the public key data.
+#[derive(Clone, Ord, Eq, PartialOrd, PartialEq)]
+pub(crate) struct PublicKey {
+    pub alg: String,
+    pub blob: Vec<u8>,
+}
+
+impl PublicKey {
+    pub(crate) fn alg(&self) -> &str {
+        &self.alg
+    }
+
+    pub(crate) fn blob(&self) -> &[u8] {
+        &self.blob
+    }
+}
+
+impl fmt::Debug for PublicKey {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        write!(f, "PublicKey(\"{self}\")")
+    }
+}
+
+impl fmt::Display for PublicKey {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        use base64::{prelude::BASE64_STANDARD, Engine as _};
+
+        write!(f, "{} {}", self.alg(), BASE64_STANDARD.encode(self.blob()))
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use ssh_key::{
+        private::{Ed25519Keypair, RsaKeypair},
+        rand_core::OsRng,
+        LineEnding,
+    };
+
+    use super::*;
+
+    const MIN_KEY_BIT_SIZE: usize = 2048;
+
+    fn create_valid_ed25519_key_string() -> String {
+        let ed25519_keypair = Ed25519Keypair::random(&mut OsRng);
+        let ssh_key =
+            ssh_key::PrivateKey::new(ssh_key::private::KeypairData::Ed25519(ed25519_keypair), "")
+                .unwrap();
+        ssh_key.to_openssh(LineEnding::LF).unwrap().to_string()
+    }
+
+    #[test]
+    fn test_privatekey_from_ed25519() {
+        let key_string = create_valid_ed25519_key_string();
+        let ssh_key = ssh_key::PrivateKey::from_openssh(&key_string).unwrap();
+
+        let private_key = PrivateKey::try_from(ssh_key).unwrap();
+        assert!(matches!(private_key, PrivateKey::Ed25519(_)));
+    }
+
+    #[test]
+    fn test_privatekey_from_rsa() {
+        let rsa_keypair = RsaKeypair::random(&mut OsRng, MIN_KEY_BIT_SIZE).unwrap();
+        let ssh_key =
+            ssh_key::PrivateKey::new(ssh_key::private::KeypairData::Rsa(rsa_keypair), "").unwrap();
+
+        let private_key = PrivateKey::try_from(ssh_key).unwrap();
+        assert!(matches!(private_key, PrivateKey::Rsa(_)));
+    }
+}
diff --git a/apps/desktop/desktop_native/ssh_agent/src/lib.rs b/apps/desktop/desktop_native/ssh_agent/src/lib.rs
new file mode 100644
index 00000000000..aaaf635e6c6
--- /dev/null
+++ b/apps/desktop/desktop_native/ssh_agent/src/lib.rs
@@ -0,0 +1,7 @@
+//! Bitwarden SSH Agent implementation
+//!
+//! <https://www.ietf.org/archive/id/draft-miller-ssh-agent-11.html#RFC4253>
+
+#![allow(dead_code)] // TODO remove when all code is used in follow-up PR
+
+mod crypto;

From 04d2394dbfeb9480456f89d0afcd0888e08a8b11 Mon Sep 17 00:00:00 2001
From: Vedant Madane <6527493+VedantMadane@users.noreply.github.com>
Date: Thu, 5 Feb 2026 03:08:25 +0530
Subject: [PATCH 15/26] [PM-30845] fix(vault): preserve card brand when editing
 existing card (#18381)

* fix(vault): preserve card brand when editing existing card

Fixes #16978

The brand field was not being restored when editing an existing card
cipher, causing it to show '--Select--' and potentially lose the brand
data when saving.

Added the brand field to initFromExistingCipher() to properly restore
the card brand when opening a card for editing.

Also updated the test to verify all card fields including brand, expMonth,
and expYear are properly initialized from existing cipher data.

* fix: add brand to OptionalInitialValues interface

Addresses review feedback from @jengstrom-bw in PR #18381.
The brand field was being used in card-details-section.component.ts
but wasn't defined in the OptionalInitialValues type, causing a
TypeScript compilation error.

Adds brand?: string; to the Credit Card Information section of
OptionalInitialValues in cipher-form-config.service.ts.

* test: add coverage for initFromExistingCipher brand logic
---
 .../cipher-form-config.service.ts             |  1 +
 .../card-details-section.component.spec.ts    | 34 +++++++++++++++++--
 .../card-details-section.component.ts         |  1 +
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/libs/vault/src/cipher-form/abstractions/cipher-form-config.service.ts b/libs/vault/src/cipher-form/abstractions/cipher-form-config.service.ts
index 35d3d8725ff..a4aabbb6f19 100644
--- a/libs/vault/src/cipher-form/abstractions/cipher-form-config.service.ts
+++ b/libs/vault/src/cipher-form/abstractions/cipher-form-config.service.ts
@@ -28,6 +28,7 @@ export type OptionalInitialValues = {
   // Credit Card Information
   cardholderName?: string;
   number?: string;
+  brand?: string;
   expMonth?: string;
   expYear?: string;
   code?: string;
diff --git a/libs/vault/src/cipher-form/components/card-details-section/card-details-section.component.spec.ts b/libs/vault/src/cipher-form/components/card-details-section/card-details-section.component.spec.ts
index 4b0cd0f5f90..650b4e29fe5 100644
--- a/libs/vault/src/cipher-form/components/card-details-section/card-details-section.component.spec.ts
+++ b/libs/vault/src/cipher-form/components/card-details-section/card-details-section.component.spec.ts
@@ -108,12 +108,17 @@ describe("CardDetailsSectionComponent", () => {
     const cardholderName = "Ron Burgundy";
     const number = "4242 4242 4242 4242";
     const code = "619";
+    const brand = "Maestro";
+    const expMonth = "5";
+    const expYear = "2028";
 
     const cardView = new CardView();
     cardView.cardholderName = cardholderName;
     cardView.number = number;
     cardView.code = code;
-    cardView.brand = "Visa";
+    cardView.brand = brand;
+    cardView.expMonth = expMonth;
+    cardView.expYear = expYear;
 
     getInitialCipherView.mockReturnValueOnce({ card: cardView });
 
@@ -123,7 +128,9 @@ describe("CardDetailsSectionComponent", () => {
       cardholderName,
       number,
       code,
-      brand: cardView.brand,
+      brand,
+      expMonth,
+      expYear,
     });
   });
 
@@ -154,4 +161,27 @@ describe("CardDetailsSectionComponent", () => {
 
     expect(heading.nativeElement.textContent.trim()).toBe("cardDetails");
   });
+
+  it("initializes `cardDetailsForm` from `initialValues` when provided and editing existing cipher", () => {
+    const initialCardholderName = "New Name";
+    const initialBrand = "Amex";
+
+    (cipherFormProvider as any).config = {
+      initialValues: {
+        cardholderName: initialCardholderName,
+        brand: initialBrand,
+      },
+    };
+
+    const existingCard = new CardView();
+    existingCard.cardholderName = "Old Name";
+    existingCard.brand = "Visa";
+
+    getInitialCipherView.mockReturnValueOnce({ card: existingCard });
+
+    component.ngOnInit();
+
+    expect(component.cardDetailsForm.value.cardholderName).toBe(initialCardholderName);
+    expect(component.cardDetailsForm.value.brand).toBe(initialBrand);
+  });
 });
diff --git a/libs/vault/src/cipher-form/components/card-details-section/card-details-section.component.ts b/libs/vault/src/cipher-form/components/card-details-section/card-details-section.component.ts
index 5fa8d0af131..056b93b6b99 100644
--- a/libs/vault/src/cipher-form/components/card-details-section/card-details-section.component.ts
+++ b/libs/vault/src/cipher-form/components/card-details-section/card-details-section.component.ts
@@ -158,6 +158,7 @@ export class CardDetailsSectionComponent implements OnInit {
     this.cardDetailsForm.patchValue({
       cardholderName: this.initialValues?.cardholderName ?? existingCard.cardholderName,
       number: this.initialValues?.number ?? existingCard.number,
+      brand: this.initialValues?.brand ?? existingCard.brand,
       expMonth: this.initialValues?.expMonth ?? existingCard.expMonth,
       expYear: this.initialValues?.expYear ?? existingCard.expYear,
       code: this.initialValues?.code ?? existingCard.code,

From f457abf60bca725b95f0f38bdeef98fc2be0e4d5 Mon Sep 17 00:00:00 2001
From: Thomas Avery <43214426+Thomas-Avery@users.noreply.github.com>
Date: Thu, 5 Feb 2026 03:57:10 -0600
Subject: [PATCH 16/26] Add contact info to HAZMAT (#18759)

---
 .../abstractions/crypto-function.service.ts   | 20 +++++++++----------
 .../key-generation/key-generation.service.ts  |  8 ++++----
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/libs/common/src/key-management/crypto/abstractions/crypto-function.service.ts b/libs/common/src/key-management/crypto/abstractions/crypto-function.service.ts
index b16371198b3..645666c582d 100644
--- a/libs/common/src/key-management/crypto/abstractions/crypto-function.service.ts
+++ b/libs/common/src/key-management/crypto/abstractions/crypto-function.service.ts
@@ -7,7 +7,7 @@ import { CsprngArray } from "../../../types/csprng";
 
 export abstract class CryptoFunctionService {
   /**
-   * @deprecated HAZMAT WARNING: DO NOT USE THIS FOR NEW CODE. Implement low-level crypto operations
+   * @deprecated HAZMAT WARNING: DO NOT USE THIS FOR NEW CODE. CONTACT KEY MANAGEMENT IF YOU THINK YOU NEED TO. Implement low-level crypto operations
    * in the SDK instead. Further, you should probably never find yourself using this low-level crypto function.
    */
   abstract pbkdf2(
@@ -17,7 +17,7 @@ export abstract class CryptoFunctionService {
     iterations: number,
   ): Promise<Uint8Array>;
   /**
-   * @deprecated HAZMAT WARNING: DO NOT USE THIS FOR NEW CODE. Implement low-level crypto operations
+   * @deprecated HAZMAT WARNING: DO NOT USE THIS FOR NEW CODE. CONTACT KEY MANAGEMENT IF YOU THINK YOU NEED TO. Implement low-level crypto operations
    * in the SDK instead. Further, you should probably never find yourself using this low-level crypto function.
    */
   abstract hkdf(
@@ -28,7 +28,7 @@ export abstract class CryptoFunctionService {
     algorithm: "sha256" | "sha512",
   ): Promise<Uint8Array>;
   /**
-   * @deprecated HAZMAT WARNING: DO NOT USE THIS FOR NEW CODE. Implement low-level crypto operations
+   * @deprecated HAZMAT WARNING: DO NOT USE THIS FOR NEW CODE. CONTACT KEY MANAGEMENT IF YOU THINK YOU NEED TO. Implement low-level crypto operations
    * in the SDK instead. Further, you should probably never find yourself using this low-level crypto function.
    */
   abstract hkdfExpand(
@@ -38,7 +38,7 @@ export abstract class CryptoFunctionService {
     algorithm: "sha256" | "sha512",
   ): Promise<Uint8Array>;
   /**
-   * @deprecated HAZMAT WARNING: DO NOT USE THIS FOR NEW CODE. Implement low-level crypto operations
+   * @deprecated HAZMAT WARNING: DO NOT USE THIS FOR NEW CODE. CONTACT KEY MANAGEMENT IF YOU THINK YOU NEED TO. Implement low-level crypto operations
    * in the SDK instead. Further, you should probably never find yourself using this low-level crypto function.
    */
   abstract hash(
@@ -46,7 +46,7 @@ export abstract class CryptoFunctionService {
     algorithm: "sha1" | "sha256" | "sha512" | "md5",
   ): Promise<Uint8Array>;
   /**
-   * @deprecated HAZMAT WARNING: DO NOT USE THIS FOR NEW CODE. Implement low-level crypto operations
+   * @deprecated HAZMAT WARNING: DO NOT USE THIS FOR NEW CODE. CONTACT KEY MANAGEMENT IF YOU THINK YOU NEED TO. Implement low-level crypto operations
    * in the SDK instead. Further, you should probably never find yourself using this low-level crypto function.
    */
   abstract hmacFast(
@@ -56,7 +56,7 @@ export abstract class CryptoFunctionService {
   ): Promise<Uint8Array | string>;
   abstract compareFast(a: Uint8Array | string, b: Uint8Array | string): Promise<boolean>;
   /**
-   * @deprecated HAZMAT WARNING: DO NOT USE THIS FOR NEW CODE. Implement low-level crypto operations
+   * @deprecated HAZMAT WARNING: DO NOT USE THIS FOR NEW CODE. CONTACT KEY MANAGEMENT IF YOU THINK YOU NEED TO. Implement low-level crypto operations
    * in the SDK instead. Further, you should probably never find yourself using this low-level crypto function.
    */
   abstract aesDecryptFastParameters(
@@ -66,7 +66,7 @@ export abstract class CryptoFunctionService {
     key: SymmetricCryptoKey,
   ): CbcDecryptParameters<Uint8Array | string>;
   /**
-   * @deprecated HAZMAT WARNING: DO NOT USE THIS FOR NEW CODE. Implement low-level crypto operations
+   * @deprecated HAZMAT WARNING: DO NOT USE THIS FOR NEW CODE. CONTACT KEY MANAGEMENT IF YOU THINK YOU NEED TO. Implement low-level crypto operations
    * in the SDK instead. Further, you should probably never find yourself using this low-level crypto function.
    */
   abstract aesDecryptFast({
@@ -76,7 +76,7 @@ export abstract class CryptoFunctionService {
     | { mode: "cbc"; parameters: CbcDecryptParameters<Uint8Array | string> }
     | { mode: "ecb"; parameters: EcbDecryptParameters<Uint8Array | string> }): Promise<string>;
   /**
-   * @deprecated HAZMAT WARNING: DO NOT USE THIS FOR NEW CODE. Only used by DDG integration until DDG uses PKCS#7 padding, and by lastpass importer.
+   * @deprecated HAZMAT WARNING: DO NOT USE THIS FOR NEW CODE. CONTACT KEY MANAGEMENT IF YOU THINK YOU NEED TO. Only used by DDG integration until DDG uses PKCS#7 padding, and by lastpass importer.
    */
   abstract aesDecrypt(
     data: Uint8Array,
@@ -85,7 +85,7 @@ export abstract class CryptoFunctionService {
     mode: "cbc" | "ecb",
   ): Promise<Uint8Array>;
   /**
-   * @deprecated HAZMAT WARNING: DO NOT USE THIS FOR NEW CODE. Implement low-level crypto operations
+   * @deprecated HAZMAT WARNING: DO NOT USE THIS FOR NEW CODE. CONTACT KEY MANAGEMENT IF YOU THINK YOU NEED TO. Implement low-level crypto operations
    * in the SDK instead. Further, you should probably never find yourself using this low-level crypto function.
    */
   abstract rsaEncrypt(
@@ -94,7 +94,7 @@ export abstract class CryptoFunctionService {
     algorithm: "sha1",
   ): Promise<Uint8Array>;
   /**
-   * @deprecated HAZMAT WARNING: DO NOT USE THIS FOR NEW CODE. Implement low-level crypto operations
+   * @deprecated HAZMAT WARNING: DO NOT USE THIS FOR NEW CODE. CONTACT KEY MANAGEMENT IF YOU THINK YOU NEED TO. Implement low-level crypto operations
    * in the SDK instead. Further, you should probably never find yourself using this low-level crypto function.
    */
   abstract rsaDecrypt(
diff --git a/libs/common/src/key-management/crypto/key-generation/key-generation.service.ts b/libs/common/src/key-management/crypto/key-generation/key-generation.service.ts
index ddc3829aa9f..1114e892bb8 100644
--- a/libs/common/src/key-management/crypto/key-generation/key-generation.service.ts
+++ b/libs/common/src/key-management/crypto/key-generation/key-generation.service.ts
@@ -27,7 +27,7 @@ export abstract class KeyGenerationService {
    * Uses HKDF, see {@link https://datatracker.ietf.org/doc/html/rfc5869 RFC 5869}
    * for details.
    *
-   * @deprecated HAZMAT WARNING: DO NOT USE THIS FOR NEW CODE. This is a low-level cryptographic function.
+   * @deprecated HAZMAT WARNING: DO NOT USE THIS FOR NEW CODE. CONTACT KEY MANAGEMENT IF YOU THINK YOU NEED TO. This is a low-level cryptographic function.
    * New functionality should not be built on top of it, and instead should be built in the sdk.
    *
    * @param bitLength Length of key material.
@@ -44,7 +44,7 @@ export abstract class KeyGenerationService {
   /**
    * Derives a 64 byte key from key material.
    *
-   * @deprecated HAZMAT WARNING: DO NOT USE THIS FOR NEW CODE. This is a low-level cryptographic function.
+   * @deprecated HAZMAT WARNING: DO NOT USE THIS FOR NEW CODE. CONTACT KEY MANAGEMENT IF YOU THINK YOU NEED TO. This is a low-level cryptographic function.
    * New functionality should not be built on top of it, and instead should be built in the sdk.
    *
    * @remark The key material should be generated from {@link createKey}, or {@link createKeyWithPurpose}.
@@ -63,7 +63,7 @@ export abstract class KeyGenerationService {
   /**
    * Derives a 32 byte key from a password using a key derivation function.
    *
-   * @deprecated HAZMAT WARNING: DO NOT USE THIS FOR NEW CODE. This is a low-level cryptographic function.
+   * @deprecated HAZMAT WARNING: DO NOT USE THIS FOR NEW CODE. CONTACT KEY MANAGEMENT IF YOU THINK YOU NEED TO. This is a low-level cryptographic function.
    * New functionality should not be built on top of it, and instead should be built in the sdk.
    *
    * @param password Password to derive the key from.
@@ -80,7 +80,7 @@ export abstract class KeyGenerationService {
   /**
    * Derives a 64 byte key from a 32 byte key using a key derivation function.
    *
-   * @deprecated HAZMAT WARNING: DO NOT USE THIS FOR NEW CODE. This is a low-level cryptographic function.
+   * @deprecated HAZMAT WARNING: DO NOT USE THIS FOR NEW CODE. CONTACT KEY MANAGEMENT IF YOU THINK YOU NEED TO. This is a low-level cryptographic function.
    * New functionality should not be built on top of it, and instead should be built in the sdk.
    *
    * @param key 32 byte key.

From ba905dbf1200f43b8d008659d391991bb56a73ef Mon Sep 17 00:00:00 2001
From: Jared McCannon <jmccannon@bitwarden.com>
Date: Thu, 5 Feb 2026 08:03:09 -0600
Subject: [PATCH 17/26] Fixing bulk restore request property name to match
 server. (#18757)

---
 .../requests/organization-user-bulk-restore.request.ts      | 6 +++---
 .../services/default-organization-user.service.spec.ts      | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/libs/admin-console/src/common/organization-user/models/requests/organization-user-bulk-restore.request.ts b/libs/admin-console/src/common/organization-user/models/requests/organization-user-bulk-restore.request.ts
index 74a91897a58..f2b51d6747a 100644
--- a/libs/admin-console/src/common/organization-user/models/requests/organization-user-bulk-restore.request.ts
+++ b/libs/admin-console/src/common/organization-user/models/requests/organization-user-bulk-restore.request.ts
@@ -1,11 +1,11 @@
 import { EncString } from "@bitwarden/sdk-internal";
 
 export class OrganizationUserBulkRestoreRequest {
-  userIds: string[];
+  ids: string[];
   defaultUserCollectionName: EncString | undefined;
 
-  constructor(userIds: string[], defaultUserCollectionName?: EncString) {
-    this.userIds = userIds;
+  constructor(ids: string[], defaultUserCollectionName?: EncString) {
+    this.ids = ids;
     this.defaultUserCollectionName = defaultUserCollectionName;
   }
 }
diff --git a/libs/admin-console/src/common/organization-user/services/default-organization-user.service.spec.ts b/libs/admin-console/src/common/organization-user/services/default-organization-user.service.spec.ts
index 0448b23e4d2..7eca35fd36e 100644
--- a/libs/admin-console/src/common/organization-user/services/default-organization-user.service.spec.ts
+++ b/libs/admin-console/src/common/organization-user/services/default-organization-user.service.spec.ts
@@ -258,7 +258,7 @@ describe("DefaultOrganizationUserService", () => {
           ).toHaveBeenCalledWith(
             mockOrganization.id,
             expect.objectContaining({
-              userIds: mockUserIds,
+              ids: mockUserIds,
               defaultUserCollectionName: mockEncryptedCollectionName.encryptedString,
             }),
           );

From 2cc87157115b27d34cbd97b84d9ef29569ebe609 Mon Sep 17 00:00:00 2001
From: Bernd Schoolmann <mail@quexten.com>
Date: Thu, 5 Feb 2026 15:10:15 +0100
Subject: [PATCH 18/26] [PM-31640] Fix SDK tracing / cipher decryption
 performance issues (#18777)

* Fix SDK tracing performance issues

* Update package lock

* Update package lock

* Fix npm lock
---
 package-lock.json | 18 ++++++++++--------
 package.json      |  4 ++--
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 752f186e970..d899e4479d5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,8 +23,8 @@
         "@angular/platform-browser": "20.3.16",
         "@angular/platform-browser-dynamic": "20.3.16",
         "@angular/router": "20.3.16",
-        "@bitwarden/commercial-sdk-internal": "0.2.0-main.506",
-        "@bitwarden/sdk-internal": "0.2.0-main.506",
+        "@bitwarden/commercial-sdk-internal": "0.2.0-main.522",
+        "@bitwarden/sdk-internal": "0.2.0-main.522",
         "@electron/fuses": "1.8.0",
         "@emotion/css": "11.13.5",
         "@koa/multer": "4.0.0",
@@ -4981,9 +4981,10 @@
       "link": true
     },
     "node_modules/@bitwarden/commercial-sdk-internal": {
-      "version": "0.2.0-main.506",
-      "resolved": "https://registry.npmjs.org/@bitwarden/commercial-sdk-internal/-/commercial-sdk-internal-0.2.0-main.506.tgz",
-      "integrity": "sha512-aRzcxOcj8vXxz0jN3q2xxj26zxBfjg3oRm5QXbWE7zXJ2PGrgxTaePca9pQYYpwgr7iufYMnZcq5dH+qttNEmA==",
+      "version": "0.2.0-main.522",
+      "resolved": "https://registry.npmjs.org/@bitwarden/commercial-sdk-internal/-/commercial-sdk-internal-0.2.0-main.522.tgz",
+      "integrity": "sha512-2wAbg30cGlDhSj14LaK2/ISuT91XPVeNgL/PU+eoxLhAehGKjAXdvZN3PSwFaAuaMbEFzlESvqC1pzzO4p/1zw==",
+      "license": "BITWARDEN SOFTWARE DEVELOPMENT KIT LICENSE AGREEMENT",
       "dependencies": {
         "type-fest": "^4.41.0"
       }
@@ -5085,9 +5086,10 @@
       "link": true
     },
     "node_modules/@bitwarden/sdk-internal": {
-      "version": "0.2.0-main.506",
-      "resolved": "https://registry.npmjs.org/@bitwarden/sdk-internal/-/sdk-internal-0.2.0-main.506.tgz",
-      "integrity": "sha512-BbTSU5Acx74Hr32zDj2kV8sbdclyvdIti5t6kXnCvJmA5dZbu+5j5Xw1luS9mGL9Vfi4w3OjVug/TiSxyhwLzQ==",
+      "version": "0.2.0-main.522",
+      "resolved": "https://registry.npmjs.org/@bitwarden/sdk-internal/-/sdk-internal-0.2.0-main.522.tgz",
+      "integrity": "sha512-E+YqqX/FvGF0vGx6sNJfYaMj88C+rVo51fQPMSHoOePdryFcKQSJX706Glv86OMLMXE7Ln5Lua8LJRftlF/EFQ==",
+      "license": "GPL-3.0",
       "dependencies": {
         "type-fest": "^4.41.0"
       }
diff --git a/package.json b/package.json
index ea7dc32820c..751c67afcd1 100644
--- a/package.json
+++ b/package.json
@@ -161,8 +161,8 @@
     "@angular/platform-browser": "20.3.16",
     "@angular/platform-browser-dynamic": "20.3.16",
     "@angular/router": "20.3.16",
-    "@bitwarden/commercial-sdk-internal": "0.2.0-main.506",
-    "@bitwarden/sdk-internal": "0.2.0-main.506",
+    "@bitwarden/commercial-sdk-internal": "0.2.0-main.522",
+    "@bitwarden/sdk-internal": "0.2.0-main.522",
     "@electron/fuses": "1.8.0",
     "@emotion/css": "11.13.5",
     "@koa/multer": "4.0.0",

From 7c6d98b50ec9143f9e587122d8f880cdd2758caf Mon Sep 17 00:00:00 2001
From: adudek-bw <adudek@bitwarden.com>
Date: Thu, 5 Feb 2026 09:46:31 -0500
Subject: [PATCH 19/26] Remove feature flag check from password generation
 (#18003)

* Remove feature flag check from password generation
---
 apps/browser/src/background/main.background.ts     |  1 +
 .../cli/src/service-container/service-container.ts |  1 +
 libs/common/src/tools/providers.spec.ts            | 11 +++++++++++
 libs/common/src/tools/providers.ts                 |  6 ++++--
 libs/importer/src/components/importer-providers.ts |  2 ++
 .../components/src/generator-services.module.ts    | 12 ++----------
 .../core/src/engine/sdk-password-randomizer.ts     | 14 ++++++++------
 .../src/metadata/password/eff-word-list.spec.ts    | 12 +-----------
 .../core/src/metadata/password/eff-word-list.ts    |  5 +----
 .../src/metadata/password/random-password.spec.ts  | 10 +---------
 .../core/src/metadata/password/random-password.ts  |  5 +----
 .../src/providers/generator-dependency-provider.ts |  4 ++--
 .../providers/generator-metadata-provider.spec.ts  |  6 ------
 13 files changed, 35 insertions(+), 54 deletions(-)

diff --git a/apps/browser/src/background/main.background.ts b/apps/browser/src/background/main.background.ts
index eb6d26357eb..e0cbcdc9f96 100644
--- a/apps/browser/src/background/main.background.ts
+++ b/apps/browser/src/background/main.background.ts
@@ -1110,6 +1110,7 @@ export default class MainBackground {
         this.logService,
         this.platformUtilsService,
         this.configService,
+        this.sdkService,
       ),
     );
 
diff --git a/apps/cli/src/service-container/service-container.ts b/apps/cli/src/service-container/service-container.ts
index 3e78eb36577..105d80b290b 100644
--- a/apps/cli/src/service-container/service-container.ts
+++ b/apps/cli/src/service-container/service-container.ts
@@ -928,6 +928,7 @@ export class ServiceContainer {
         this.logService,
         this.platformUtilsService,
         this.configService,
+        this.sdkService,
       ),
     );
 
diff --git a/libs/common/src/tools/providers.spec.ts b/libs/common/src/tools/providers.spec.ts
index 5953e5ebab2..d457b1df85e 100644
--- a/libs/common/src/tools/providers.spec.ts
+++ b/libs/common/src/tools/providers.spec.ts
@@ -4,6 +4,7 @@ import { PolicyService } from "../admin-console/abstractions/policy/policy.servi
 import { ConfigService } from "../platform/abstractions/config/config.service";
 import { LogService } from "../platform/abstractions/log.service";
 import { PlatformUtilsService } from "../platform/abstractions/platform-utils.service";
+import { SdkService } from "../platform/abstractions/sdk/sdk.service";
 import { StateProvider } from "../platform/state";
 
 import { LegacyEncryptorProvider } from "./cryptography/legacy-encryptor-provider";
@@ -20,6 +21,7 @@ describe("SystemServiceProvider", () => {
   let mockLogger: LogService;
   let mockEnvironment: MockProxy<PlatformUtilsService>;
   let mockConfigService: ConfigService;
+  let mockSdkService: SdkService;
 
   beforeEach(() => {
     jest.resetAllMocks();
@@ -31,6 +33,7 @@ describe("SystemServiceProvider", () => {
     mockLogger = mock<LogService>();
     mockEnvironment = mock<PlatformUtilsService>();
     mockConfigService = mock<ConfigService>();
+    mockSdkService = mock<SdkService>();
   });
 
   describe("createSystemServiceProvider", () => {
@@ -45,6 +48,7 @@ describe("SystemServiceProvider", () => {
         mockLogger,
         mockEnvironment,
         mockConfigService,
+        mockSdkService,
       );
 
       expect(result).toHaveProperty("policy", mockPolicy);
@@ -66,6 +70,7 @@ describe("SystemServiceProvider", () => {
         mockLogger,
         mockEnvironment,
         mockConfigService,
+        mockSdkService,
       );
 
       expect(result.extension).toBeInstanceOf(ExtensionService);
@@ -83,6 +88,7 @@ describe("SystemServiceProvider", () => {
           mockLogger,
           mockEnvironment,
           mockConfigService,
+          mockSdkService,
         );
 
         expect(mockEnvironment.isDev).toHaveBeenCalledTimes(1);
@@ -102,6 +108,7 @@ describe("SystemServiceProvider", () => {
           mockLogger,
           mockEnvironment,
           mockConfigService,
+          mockSdkService,
         );
 
         expect(mockEnvironment.isDev).toHaveBeenCalledTimes(1);
@@ -121,6 +128,7 @@ describe("SystemServiceProvider", () => {
         mockLogger,
         mockEnvironment,
         mockConfigService,
+        mockSdkService,
       );
 
       expect(result.extension).toBeInstanceOf(ExtensionService);
@@ -138,6 +146,7 @@ describe("SystemServiceProvider", () => {
         mockLogger,
         mockEnvironment,
         mockConfigService,
+        mockSdkService,
       );
 
       expect(result.policy).toBe(mockPolicy);
@@ -154,6 +163,7 @@ describe("SystemServiceProvider", () => {
         mockLogger,
         mockEnvironment,
         mockConfigService,
+        mockSdkService,
       );
 
       expect(result.configService).toBe(mockConfigService);
@@ -170,6 +180,7 @@ describe("SystemServiceProvider", () => {
         mockLogger,
         mockEnvironment,
         mockConfigService,
+        mockSdkService,
       );
 
       expect(result.environment).toBe(mockEnvironment);
diff --git a/libs/common/src/tools/providers.ts b/libs/common/src/tools/providers.ts
index ac42c556042..b1621f19c21 100644
--- a/libs/common/src/tools/providers.ts
+++ b/libs/common/src/tools/providers.ts
@@ -1,10 +1,10 @@
 import { LogService } from "@bitwarden/logging";
-import { BitwardenClient } from "@bitwarden/sdk-internal";
 import { StateProvider } from "@bitwarden/state";
 
 import { PolicyService } from "../admin-console/abstractions/policy/policy.service.abstraction";
 import { ConfigService } from "../platform/abstractions/config/config.service";
 import { PlatformUtilsService } from "../platform/abstractions/platform-utils.service";
+import { SdkService } from "../platform/abstractions/sdk/sdk.service";
 
 import { LegacyEncryptorProvider } from "./cryptography/legacy-encryptor-provider";
 import { ExtensionRegistry } from "./extension/extension-registry.abstraction";
@@ -29,7 +29,7 @@ export type SystemServiceProvider = {
   readonly environment: PlatformUtilsService;
 
   /** SDK Service */
-  readonly sdk?: BitwardenClient;
+  readonly sdk: SdkService;
 };
 
 /** Constructs a system service provider. */
@@ -41,6 +41,7 @@ export function createSystemServiceProvider(
   logger: LogService,
   environment: PlatformUtilsService,
   configService: ConfigService,
+  sdk: SdkService,
 ): SystemServiceProvider {
   let log: LogProvider;
   if (environment.isDev()) {
@@ -62,5 +63,6 @@ export function createSystemServiceProvider(
     log,
     configService,
     environment,
+    sdk,
   };
 }
diff --git a/libs/importer/src/components/importer-providers.ts b/libs/importer/src/components/importer-providers.ts
index 18c148ebe2e..eb7e58e9259 100644
--- a/libs/importer/src/components/importer-providers.ts
+++ b/libs/importer/src/components/importer-providers.ts
@@ -13,6 +13,7 @@ import { ConfigService } from "@bitwarden/common/platform/abstractions/config/co
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { SdkService } from "@bitwarden/common/platform/abstractions/sdk/sdk.service";
 import { KeyServiceLegacyEncryptorProvider } from "@bitwarden/common/tools/cryptography/key-service-legacy-encryptor-provider";
 import { LegacyEncryptorProvider } from "@bitwarden/common/tools/cryptography/legacy-encryptor-provider";
 import { ExtensionRegistry } from "@bitwarden/common/tools/extension/extension-registry.abstraction";
@@ -71,6 +72,7 @@ export const ImporterProviders: SafeProvider[] = [
       LogService,
       PlatformUtilsService,
       ConfigService,
+      SdkService,
     ],
   }),
   safeProvider({
diff --git a/libs/tools/generator/components/src/generator-services.module.ts b/libs/tools/generator/components/src/generator-services.module.ts
index 935f7dc2d60..39d0dd298a2 100644
--- a/libs/tools/generator/components/src/generator-services.module.ts
+++ b/libs/tools/generator/components/src/generator-services.module.ts
@@ -1,12 +1,10 @@
 import { NgModule } from "@angular/core";
-import { from, take } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { safeProvider } from "@bitwarden/angular/platform/utils/safe-provider";
 import { SafeInjectionToken } from "@bitwarden/angular/services/injection-tokens";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
-import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { EncryptService } from "@bitwarden/common/key-management/crypto/abstractions/encrypt.service";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -126,7 +124,7 @@ export const SYSTEM_SERVICE_PROVIDER = new SafeInjectionToken<SystemServiceProvi
     }),
     safeProvider({
       provide: GENERATOR_SERVICE_PROVIDER,
-      useFactory: (
+      useFactory: async (
         system: SystemServiceProvider,
         random: Randomizer,
         encryptor: LegacyEncryptorProvider,
@@ -141,25 +139,19 @@ export const SYSTEM_SERVICE_PROVIDER = new SafeInjectionToken<SystemServiceProvi
           now: Date.now,
         } satisfies UserStateSubjectDependencyProvider;
 
-        const featureFlagObs$ = from(
-          system.configService.getFeatureFlag(FeatureFlag.UseSdkPasswordGenerators),
-        );
-        let featureFlag: boolean = false;
-        featureFlagObs$.pipe(take(1)).subscribe((ff) => (featureFlag = ff));
         const metadata = new providers.GeneratorMetadataProvider(
           userStateDeps,
           system,
           Object.values(BuiltIn),
         );
 
-        const sdkService = featureFlag ? system.sdk : undefined;
         const profile = new providers.GeneratorProfileProvider(userStateDeps, system.policy);
 
         const generator: providers.GeneratorDependencyProvider = {
           randomizer: random,
           client: new RestClient(api, i18n),
           i18nService: i18n,
-          sdk: sdkService,
+          sdk: system.sdk,
           now: Date.now,
         };
 
diff --git a/libs/tools/generator/core/src/engine/sdk-password-randomizer.ts b/libs/tools/generator/core/src/engine/sdk-password-randomizer.ts
index 03be21eeefb..09c7d62b1ad 100644
--- a/libs/tools/generator/core/src/engine/sdk-password-randomizer.ts
+++ b/libs/tools/generator/core/src/engine/sdk-password-randomizer.ts
@@ -1,3 +1,6 @@
+import { firstValueFrom } from "rxjs";
+
+import { SdkService } from "@bitwarden/common/platform/abstractions/sdk/sdk.service";
 import {
   BitwardenClient,
   PassphraseGeneratorRequest,
@@ -20,11 +23,11 @@ export class SdkPasswordRandomizer
     CredentialGenerator<PasswordGenerationOptions>
 {
   /** Instantiates the password randomizer
-   *  @param client access to SDK client to call upon password/passphrase generation
+   *  @param service access to SDK client to call upon password/passphrase generation
    *  @param currentTime gets the current datetime in epoch time
    */
   constructor(
-    private client: BitwardenClient,
+    private service: SdkService,
     private currentTime: () => number,
   ) {}
 
@@ -40,8 +43,9 @@ export class SdkPasswordRandomizer
     request: GenerateRequest,
     settings: PasswordGenerationOptions | PassphraseGenerationOptions,
   ) {
+    const sdk: BitwardenClient = await firstValueFrom(this.service.client$);
     if (isPasswordGenerationOptions(settings)) {
-      const password = await this.client.generator().password(convertPasswordRequest(settings));
+      const password = await sdk.generator().password(convertPasswordRequest(settings));
 
       return new GeneratedCredential(
         password,
@@ -51,9 +55,7 @@ export class SdkPasswordRandomizer
         request.website,
       );
     } else if (isPassphraseGenerationOptions(settings)) {
-      const passphrase = await this.client
-        .generator()
-        .passphrase(convertPassphraseRequest(settings));
+      const passphrase = await sdk.generator().passphrase(convertPassphraseRequest(settings));
 
       return new GeneratedCredential(
         passphrase,
diff --git a/libs/tools/generator/core/src/metadata/password/eff-word-list.spec.ts b/libs/tools/generator/core/src/metadata/password/eff-word-list.spec.ts
index bdf021c50f3..015cc25a8ec 100644
--- a/libs/tools/generator/core/src/metadata/password/eff-word-list.spec.ts
+++ b/libs/tools/generator/core/src/metadata/password/eff-word-list.spec.ts
@@ -3,7 +3,7 @@ import { mock } from "jest-mock-extended";
 import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { Policy } from "@bitwarden/common/admin-console/models/domain/policy";
 
-import { PasswordRandomizer, SdkPasswordRandomizer } from "../../engine";
+import { SdkPasswordRandomizer } from "../../engine";
 import { PassphrasePolicyConstraints } from "../../policies";
 import { GeneratorDependencyProvider } from "../../providers";
 import { PassphraseGenerationOptions } from "../../types";
@@ -22,16 +22,6 @@ describe("password - eff words generator metadata", () => {
     });
   });
 
-  describe("engine.create", () => {
-    const nonSdkDependencyProvider = mock<GeneratorDependencyProvider>();
-    nonSdkDependencyProvider.sdk = undefined;
-    it("returns a password randomizer", () => {
-      expect(effPassphrase.engine.create(nonSdkDependencyProvider)).toBeInstanceOf(
-        PasswordRandomizer,
-      );
-    });
-  });
-
   describe("profiles[account]", () => {
     let accountProfile: CoreProfileMetadata<PassphraseGenerationOptions> | null = null;
     beforeEach(() => {
diff --git a/libs/tools/generator/core/src/metadata/password/eff-word-list.ts b/libs/tools/generator/core/src/metadata/password/eff-word-list.ts
index fc96ce46c2b..d6d78c83293 100644
--- a/libs/tools/generator/core/src/metadata/password/eff-word-list.ts
+++ b/libs/tools/generator/core/src/metadata/password/eff-word-list.ts
@@ -3,7 +3,7 @@ import { GENERATOR_DISK } from "@bitwarden/common/platform/state";
 import { PublicClassifier } from "@bitwarden/common/tools/public-classifier";
 import { ObjectKey } from "@bitwarden/common/tools/state/object-key";
 
-import { PasswordRandomizer, SdkPasswordRandomizer } from "../../engine";
+import { SdkPasswordRandomizer } from "../../engine";
 import { passphraseLeastPrivilege, PassphrasePolicyConstraints } from "../../policies";
 import { GeneratorDependencyProvider } from "../../providers";
 import { CredentialGenerator, PassphraseGenerationOptions } from "../../types";
@@ -30,9 +30,6 @@ const passphrase: GeneratorMetadata<PassphraseGenerationOptions> = {
     create(
       dependencies: GeneratorDependencyProvider,
     ): CredentialGenerator<PassphraseGenerationOptions> {
-      if (dependencies.sdk == undefined) {
-        return new PasswordRandomizer(dependencies.randomizer, dependencies.now);
-      }
       return new SdkPasswordRandomizer(dependencies.sdk, dependencies.now);
     },
   },
diff --git a/libs/tools/generator/core/src/metadata/password/random-password.spec.ts b/libs/tools/generator/core/src/metadata/password/random-password.spec.ts
index 9efd5350c21..d066b9f1597 100644
--- a/libs/tools/generator/core/src/metadata/password/random-password.spec.ts
+++ b/libs/tools/generator/core/src/metadata/password/random-password.spec.ts
@@ -3,7 +3,7 @@ import { mock } from "jest-mock-extended";
 import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { Policy } from "@bitwarden/common/admin-console/models/domain/policy";
 
-import { PasswordRandomizer, SdkPasswordRandomizer } from "../../engine";
+import { SdkPasswordRandomizer } from "../../engine";
 import { DynamicPasswordPolicyConstraints } from "../../policies";
 import { GeneratorDependencyProvider } from "../../providers";
 import { PasswordGenerationOptions } from "../../types";
@@ -22,14 +22,6 @@ describe("password - characters generator metadata", () => {
     });
   });
 
-  describe("engine.create", () => {
-    const nonSdkDependencyProvider = mock<GeneratorDependencyProvider>();
-    nonSdkDependencyProvider.sdk = undefined;
-    it("returns a password randomizer", () => {
-      expect(password.engine.create(nonSdkDependencyProvider)).toBeInstanceOf(PasswordRandomizer);
-    });
-  });
-
   describe("profiles[account]", () => {
     let accountProfile: CoreProfileMetadata<PasswordGenerationOptions> = null!;
     beforeEach(() => {
diff --git a/libs/tools/generator/core/src/metadata/password/random-password.ts b/libs/tools/generator/core/src/metadata/password/random-password.ts
index 721be8dc3f0..d25ea1e8f46 100644
--- a/libs/tools/generator/core/src/metadata/password/random-password.ts
+++ b/libs/tools/generator/core/src/metadata/password/random-password.ts
@@ -3,7 +3,7 @@ import { GENERATOR_DISK } from "@bitwarden/common/platform/state";
 import { PublicClassifier } from "@bitwarden/common/tools/public-classifier";
 import { deepFreeze } from "@bitwarden/common/tools/util";
 
-import { PasswordRandomizer, SdkPasswordRandomizer } from "../../engine";
+import { SdkPasswordRandomizer } from "../../engine";
 import { DynamicPasswordPolicyConstraints, passwordLeastPrivilege } from "../../policies";
 import { GeneratorDependencyProvider } from "../../providers";
 import { CredentialGenerator, PasswordGeneratorSettings } from "../../types";
@@ -30,9 +30,6 @@ const password: GeneratorMetadata<PasswordGeneratorSettings> = deepFreeze({
     create(
       dependencies: GeneratorDependencyProvider,
     ): CredentialGenerator<PasswordGeneratorSettings> {
-      if (dependencies.sdk == undefined) {
-        return new PasswordRandomizer(dependencies.randomizer, dependencies.now);
-      }
       return new SdkPasswordRandomizer(dependencies.sdk, dependencies.now);
     },
   },
diff --git a/libs/tools/generator/core/src/providers/generator-dependency-provider.ts b/libs/tools/generator/core/src/providers/generator-dependency-provider.ts
index a6dbbeaa537..8700bbc8a24 100644
--- a/libs/tools/generator/core/src/providers/generator-dependency-provider.ts
+++ b/libs/tools/generator/core/src/providers/generator-dependency-provider.ts
@@ -1,6 +1,6 @@
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { SdkService } from "@bitwarden/common/platform/abstractions/sdk/sdk.service";
 import { RestClient } from "@bitwarden/common/tools/integration/rpc";
-import { BitwardenClient } from "@bitwarden/sdk-internal";
 
 import { Randomizer } from "../abstractions";
 
@@ -10,6 +10,6 @@ export type GeneratorDependencyProvider = {
   // FIXME: introduce `I18nKeyOrLiteral` into forwarder
   //        structures and remove this dependency
   i18nService: I18nService;
-  sdk?: BitwardenClient;
+  sdk: SdkService;
   now: () => number;
 };
diff --git a/libs/tools/generator/core/src/providers/generator-metadata-provider.spec.ts b/libs/tools/generator/core/src/providers/generator-metadata-provider.spec.ts
index 39ff74ad901..f79bb986325 100644
--- a/libs/tools/generator/core/src/providers/generator-metadata-provider.spec.ts
+++ b/libs/tools/generator/core/src/providers/generator-metadata-provider.spec.ts
@@ -5,7 +5,6 @@ import { PolicyService } from "@bitwarden/common/admin-console/abstractions/poli
 import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { Policy } from "@bitwarden/common/admin-console/models/domain/policy";
 import { Account } from "@bitwarden/common/auth/abstractions/account.service";
-import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { LegacyEncryptorProvider } from "@bitwarden/common/tools/cryptography/legacy-encryptor-provider";
 import { UserEncryptor } from "@bitwarden/common/tools/cryptography/user-encryptor.abstraction";
 import {
@@ -96,8 +95,6 @@ const SomePolicyService = mock<PolicyService>();
 
 const SomeExtensionService = mock<ExtensionService>();
 
-const SomeConfigService = mock<ConfigService>;
-
 const SomeSdkService = mock<BitwardenClient>;
 
 const ApplicationProvider = {
@@ -110,9 +107,6 @@ const ApplicationProvider = {
   /** Event monitoring and diagnostic interfaces */
   log: disabledSemanticLoggerProvider,
 
-  /** Feature flag retrieval */
-  configService: SomeConfigService,
-
   /** SDK access for password generation */
   sdk: SomeSdkService,
 } as unknown as SystemServiceProvider;

From 3fb31fd0406ac2ea32bd3b0fc8832ca14cd8981a Mon Sep 17 00:00:00 2001
From: Jared <TheWolfBadger@gmail.com>
Date: Thu, 5 Feb 2026 10:31:21 -0500
Subject: [PATCH 20/26] Add permission guard and only allow provider admin to
 visit billing page for provider portal users (#18639)

---
 .../app/admin-console/providers/providers-routing.module.ts   | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/providers-routing.module.ts b/bitwarden_license/bit-web/src/app/admin-console/providers/providers-routing.module.ts
index 79de741b67a..447481a8bcb 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/providers-routing.module.ts
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/providers-routing.module.ts
@@ -123,7 +123,9 @@ const routes: Routes = [
           },
           {
             path: "billing",
-            canActivate: [providerPermissionsGuard()],
+            canActivate: [
+              providerPermissionsGuard((provider: Provider) => provider.isProviderAdmin),
+            ],
             children: [
               {
                 path: "",

From 61763204eaf04e3feca09814c330fe5e162993ae Mon Sep 17 00:00:00 2001
From: Jared <TheWolfBadger@gmail.com>
Date: Thu, 5 Feb 2026 10:35:39 -0500
Subject: [PATCH 21/26] Update bulk restore/revoke component to conditionally
 display non-compliant members callout. Adjusted logic to set statuses based
 on entry errors and isRevoking state. (#18654)

---
 .../components/bulk/bulk-restore-revoke.component.html   | 2 +-
 .../components/bulk/bulk-restore-revoke.component.ts     | 9 +++------
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-restore-revoke.component.html b/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-restore-revoke.component.html
index 1b711b366d6..f07568ac0c2 100644
--- a/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-restore-revoke.component.html
+++ b/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-restore-revoke.component.html
@@ -14,7 +14,7 @@
 
     <bit-callout
       type="danger"
-      *ngIf="nonCompliantMembers"
+      *ngIf="nonCompliantMembers && !isRevoking"
       title="{{ 'nonCompliantMembersTitle' | i18n }}"
     >
       {{ "nonCompliantMembersError" | i18n }}
diff --git a/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-restore-revoke.component.ts b/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-restore-revoke.component.ts
index 154a683b0e1..3228b9a94ce 100644
--- a/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-restore-revoke.component.ts
+++ b/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-restore-revoke.component.ts
@@ -88,12 +88,9 @@ export class BulkRestoreRevokeComponent {
       const bulkMessage = this.isRevoking ? "bulkRevokedMessage" : "bulkRestoredMessage";
 
       response.data.forEach(async (entry) => {
-        const error =
-          entry.error !== ""
-            ? this.i18nService.t("cannotRestoreAccessError")
-            : this.i18nService.t(bulkMessage);
-        this.statuses.set(entry.id, error);
-        if (entry.error !== "") {
+        const status = entry.error !== "" ? entry.error : this.i18nService.t(bulkMessage);
+        this.statuses.set(entry.id, status);
+        if (entry.error !== "" && !this.isRevoking) {
           this.nonCompliantMembers = true;
         }
       });

From 35773ae9a0fa7ee1c161657ece5c25bed419671b Mon Sep 17 00:00:00 2001
From: Jared <TheWolfBadger@gmail.com>
Date: Thu, 5 Feb 2026 10:36:44 -0500
Subject: [PATCH 22/26] [PM-29771] Make invitation non-plural if only 1 member
 selected (#18684)

* Make invitation non-plural if only 1 member selected

* Add isSingleInvite as per Jimmy's suggestion
---
 .../members/deprecated_members.component.html          |  2 +-
 .../members/deprecated_members.component.ts            | 10 ++++++++++
 .../organizations/members/members.component.html       |  3 ++-
 .../organizations/members/members.component.ts         | 10 ++++++++++
 .../providers/manage/deprecated_members.component.html |  2 +-
 .../providers/manage/deprecated_members.component.ts   | 10 ++++++++++
 .../providers/manage/members.component.html            |  3 ++-
 .../providers/manage/members.component.ts              |  8 ++++++++
 8 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/app/admin-console/organizations/members/deprecated_members.component.html b/apps/web/src/app/admin-console/organizations/members/deprecated_members.component.html
index 921004e315d..65bab31c728 100644
--- a/apps/web/src/app/admin-console/organizations/members/deprecated_members.component.html
+++ b/apps/web/src/app/admin-console/organizations/members/deprecated_members.component.html
@@ -136,7 +136,7 @@
                     *ngIf="showBulkReinviteUsers"
                   >
                     <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
-                    {{ "reinviteSelected" | i18n }}
+                    {{ (isSingleInvite ? "resendInvitation" : "reinviteSelected") | i18n }}
                   </button>
                   <button
                     type="button"
diff --git a/apps/web/src/app/admin-console/organizations/members/deprecated_members.component.ts b/apps/web/src/app/admin-console/organizations/members/deprecated_members.component.ts
index 93960820fbb..197c5d3efb5 100644
--- a/apps/web/src/app/admin-console/organizations/members/deprecated_members.component.ts
+++ b/apps/web/src/app/admin-console/organizations/members/deprecated_members.component.ts
@@ -597,6 +597,16 @@ export class MembersComponent extends BaseMembersComponent<OrganizationUserView>
       .every((member) => member.managedByOrganization && validStatuses.includes(member.status));
   }
 
+  get selectedInvitedCount(): number {
+    return this.dataSource
+      .getCheckedUsers()
+      .filter((member) => member.status === this.userStatusType.Invited).length;
+  }
+
+  get isSingleInvite(): boolean {
+    return this.selectedInvitedCount === 1;
+  }
+
   exportMembers = () => {
     const result = this.memberExportService.getMemberExport(this.dataSource.data);
     if (result.success) {
diff --git a/apps/web/src/app/admin-console/organizations/members/members.component.html b/apps/web/src/app/admin-console/organizations/members/members.component.html
index 604ba252231..0f074d4481d 100644
--- a/apps/web/src/app/admin-console/organizations/members/members.component.html
+++ b/apps/web/src/app/admin-console/organizations/members/members.component.html
@@ -3,6 +3,7 @@
 @let bulkActions = bulkMenuOptions$ | async;
 @let showConfirmBanner = showConfirmBanner$ | async;
 @let isProcessing = this.isProcessing();
+@let isSingleInvite = isSingleInvite$ | async;
 
 @if (organization && dataSource) {
   <app-organization-free-trial-warning
@@ -151,7 +152,7 @@
                       (click)="isProcessing ? null : bulkReinvite(organization)"
                     >
                       <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
-                      {{ "reinviteSelected" | i18n }}
+                      {{ (isSingleInvite ? "resendInvitation" : "reinviteSelected") | i18n }}
                     </button>
                   }
                   @if (bulkActions.showBulkConfirmUsers) {
diff --git a/apps/web/src/app/admin-console/organizations/members/members.component.ts b/apps/web/src/app/admin-console/organizations/members/members.component.ts
index e3ed575d81b..36c207219a0 100644
--- a/apps/web/src/app/admin-console/organizations/members/members.component.ts
+++ b/apps/web/src/app/admin-console/organizations/members/members.component.ts
@@ -125,6 +125,16 @@ export class vNextMembersComponent {
     .usersUpdated()
     .pipe(map(() => showConfirmBanner(this.dataSource())));
 
+  protected selectedInvitedCount$ = this.dataSource()
+    .usersUpdated()
+    .pipe(
+      map(
+        (members) => members.filter((m) => m.status === OrganizationUserStatusType.Invited).length,
+      ),
+    );
+
+  protected isSingleInvite$ = this.selectedInvitedCount$.pipe(map((count) => count === 1));
+
   protected isProcessing = this.memberActionsService.isProcessing;
 
   protected readonly canUseSecretsManager: Signal<boolean> = computed(
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/deprecated_members.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/deprecated_members.component.html
index e0b29dffeb8..5478601e72c 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/deprecated_members.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/deprecated_members.component.html
@@ -89,7 +89,7 @@
                   *ngIf="showBulkReinviteUsers"
                 >
                   <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
-                  {{ "reinviteSelected" | i18n }}
+                  {{ (isSingleInvite ? "resendInvitation" : "reinviteSelected") | i18n }}
                 </button>
                 <button
                   type="button"
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/deprecated_members.component.ts b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/deprecated_members.component.ts
index 3c6e530b686..e581bf458d2 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/deprecated_members.component.ts
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/deprecated_members.component.ts
@@ -333,4 +333,14 @@ export class MembersComponent extends BaseMembersComponent<ProviderUser> {
       return { success: false, error: error.message };
     }
   };
+
+  get selectedInvitedCount(): number {
+    return this.dataSource
+      .getCheckedUsers()
+      .filter((member) => member.status === this.userStatusType.Invited).length;
+  }
+
+  get isSingleInvite(): boolean {
+    return this.selectedInvitedCount === 1;
+  }
 }
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/members.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/members.component.html
index 143693ed1d7..8d1e48a7338 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/members.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/members.component.html
@@ -3,6 +3,7 @@
 @let showConfirmBanner = showConfirmBanner$ | async;
 @let dataSource = this.dataSource();
 @let isProcessing = this.isProcessing();
+@let isSingleInvite = isSingleInvite$ | async;
 
 <app-header>
   <bit-search class="tw-grow" [formControl]="searchControl" [placeholder]="'searchMembers' | i18n">
@@ -92,7 +93,7 @@
                     (click)="isProcessing ? null : bulkReinvite(providerId)"
                   >
                     <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
-                    {{ "reinviteSelected" | i18n }}
+                    {{ (isSingleInvite ? "resendInvitation" : "reinviteSelected") | i18n }}
                   </button>
                 }
                 @if (bulkMenuOptions.showBulkConfirmUsers) {
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/members.component.ts b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/members.component.ts
index a2330be4c6f..3efeee17100 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/members.component.ts
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/members.component.ts
@@ -104,6 +104,14 @@ export class vNextMembersComponent {
     .usersUpdated()
     .pipe(map(() => showConfirmBanner(this.dataSource())));
 
+  protected selectedInvitedCount$ = this.dataSource()
+    .usersUpdated()
+    .pipe(
+      map((members) => members.filter((m) => m.status === ProviderUserStatusType.Invited).length),
+    );
+
+  protected isSingleInvite$ = this.selectedInvitedCount$.pipe(map((count) => count === 1));
+
   protected isProcessing = this.providerActionsService.isProcessing;
 
   constructor() {

From 2d8f74bf70a9478b519a10a141ba4f4496de99e2 Mon Sep 17 00:00:00 2001
From: Jared <TheWolfBadger@gmail.com>
Date: Thu, 5 Feb 2026 10:37:35 -0500
Subject: [PATCH 23/26] Disable native icon for datetime-local field and use
 our own icons for stylizing (#18633)

---
 .../manage/events.component.html              | 74 +++++++++++++++----
 apps/web/src/scss/tailwind.css                | 64 ++++++++++++++++
 2 files changed, 124 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/app/admin-console/organizations/manage/events.component.html b/apps/web/src/app/admin-console/organizations/manage/events.component.html
index 83665a4b99e..da4de1846fa 100644
--- a/apps/web/src/app/admin-console/organizations/manage/events.component.html
+++ b/apps/web/src/app/admin-console/organizations/manage/events.component.html
@@ -14,24 +14,70 @@
   <div class="tw-mt-4 tw-flex tw-items-center">
     <bit-form-field>
       <bit-label>{{ "from" | i18n }}</bit-label>
-      <input
-        bitInput
-        type="datetime-local"
-        placeholder="{{ 'startDate' | i18n }}"
-        formControlName="start"
-        (change)="dirtyDates = true"
-      />
+      <div class="tw-relative">
+        <input
+          #startInput
+          bitInput
+          type="datetime-local"
+          placeholder="{{ 'startDate' | i18n }}"
+          formControlName="start"
+          (change)="dirtyDates = true"
+          class="datetime-input"
+        />
+        <svg
+          class="datetime-calendar-icon"
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-label="Open date picker"
+          role="button"
+          tabindex="0"
+          (click)="startInput.showPicker()"
+          (keydown.enter)="startInput.showPicker()"
+          (keydown.space)="startInput.showPicker()"
+        >
+          <path
+            d="M14 2h-1V1a1 1 0 00-2 0v1H5V1a1 1 0 00-2 0v1H2a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2zM2 14V6h12v8H2z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
     </bit-form-field>
     <span class="tw-mx-2">-</span>
     <bit-form-field>
       <bit-label>{{ "to" | i18n }}</bit-label>
-      <input
-        bitInput
-        type="datetime-local"
-        placeholder="{{ 'endDate' | i18n }}"
-        formControlName="end"
-        (change)="dirtyDates = true"
-      />
+      <div class="tw-relative">
+        <input
+          #endInput
+          bitInput
+          type="datetime-local"
+          placeholder="{{ 'endDate' | i18n }}"
+          formControlName="end"
+          (change)="dirtyDates = true"
+          class="datetime-input"
+        />
+        <svg
+          class="datetime-calendar-icon"
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-label="Open date picker"
+          role="button"
+          tabindex="0"
+          (click)="endInput.showPicker()"
+          (keydown.enter)="endInput.showPicker()"
+          (keydown.space)="endInput.showPicker()"
+        >
+          <path
+            d="M14 2h-1V1a1 1 0 00-2 0v1H5V1a1 1 0 00-2 0v1H2a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2zM2 14V6h12v8H2z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
     </bit-form-field>
     <form>
       <button
diff --git a/apps/web/src/scss/tailwind.css b/apps/web/src/scss/tailwind.css
index a6641a2446e..0a7bb527fc0 100644
--- a/apps/web/src/scss/tailwind.css
+++ b/apps/web/src/scss/tailwind.css
@@ -79,6 +79,70 @@
   .theme_dark img.new-logo-themed {
     content: url("../images/logo-white.svg");
   }
+
+  /**
+   * Custom calendar icon for date/datetime inputs
+   * Hides native macOS picker and uses custom SVG calendar icon
+   */
+
+  /* Hide the native calendar picker indicator completely */
+  input[type="date"]::-webkit-calendar-picker-indicator,
+  input[type="datetime-local"]::-webkit-calendar-picker-indicator,
+  input[type="time"]::-webkit-calendar-picker-indicator {
+    display: none;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  /* Wrapper for datetime input to ensure proper positioning */
+  bit-form-field .tw-relative {
+    display: flex;
+    align-items: stretch;
+  }
+
+  /* Ensure datetime inputs have proper padding and alignment */
+  .datetime-input {
+    padding-right: 2.5rem !important;
+    padding-top: 0.625rem !important;
+    padding-bottom: 0.625rem !important;
+    height: 44px;
+    display: flex;
+    align-items: center;
+  }
+
+  /* Position and style for custom datetime calendar icon */
+  .datetime-calendar-icon {
+    position: absolute;
+    top: 50%;
+    right: 0.75rem;
+    transform: translateY(-50%);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* Light mode calendar icon color - dark for visibility */
+  .theme_light .datetime-calendar-icon {
+    color: #333333;
+  }
+
+  /* Dark mode calendar icon color - light for visibility */
+  .theme_dark .datetime-calendar-icon {
+    color: #cccccc;
+  }
+
+  /* Hover effect for calendar icon */
+  .datetime-calendar-icon:hover {
+    opacity: 0.7;
+  }
+
+  /* Focus styling for accessibility */
+  .datetime-calendar-icon:focus {
+    outline: 2px solid rgba(var(--color-primary-600));
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
 }
 
 /**

From 479273a883f5f0e896a43d4a6d161cc6fc98eb07 Mon Sep 17 00:00:00 2001
From: Jared <TheWolfBadger@gmail.com>
Date: Thu, 5 Feb 2026 10:39:33 -0500
Subject: [PATCH 24/26] Fix optional chaining for collectionId in vault
 navigation query parameters (#18652)

---
 .../admin-console/organizations/collections/vault.component.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/app/admin-console/organizations/collections/vault.component.ts b/apps/web/src/app/admin-console/organizations/collections/vault.component.ts
index 5f952fa8b4a..65cb6739887 100644
--- a/apps/web/src/app/admin-console/organizations/collections/vault.component.ts
+++ b/apps/web/src/app/admin-console/organizations/collections/vault.component.ts
@@ -1318,7 +1318,7 @@ export class VaultComponent implements OnInit, OnDestroy {
         selectedCollection?.node.id === c.id
       ) {
         void this.router.navigate([], {
-          queryParams: { collectionId: selectedCollection.parent.node.id ?? null },
+          queryParams: { collectionId: selectedCollection.parent?.node.id ?? null },
           queryParamsHandling: "merge",
           replaceUrl: true,
         });

From d88cb89618fe4f1c15e8d7eff50a312fca9a8c5f Mon Sep 17 00:00:00 2001
From: John Harrington <84741727+harr1424@users.noreply.github.com>
Date: Thu, 5 Feb 2026 08:41:03 -0700
Subject: [PATCH 25/26] PM-23851 False requirement to pop out extension when
 using send files (#17950)

* follow existing popout guard pattern to force popout on firefox when filepicker is exposed

* move firefox guard to tools ownership & revert changes to auth owned file

* initial refactor to consolidate logic  using file-picker-popout.guard

* remove safari from guard & disable forced popout in vault import

* enforce popout on Safari with test coverage

* use userAgent and consistent detection for platform detection

* refactor guard tests involving routes

* replace imports lost during merge

* remove text sends from popout requirement and update tests

* add tooltip and screen-reader text describing popout behavior
---
 apps/browser/src/_locales/en/messages.json    |  20 -
 apps/browser/src/popup/app-routing.module.ts  |  10 +-
 apps/browser/src/popup/app.module.ts          |   2 -
 .../src/popup/services/services.module.ts     |   8 -
 .../file-popout-callout.component.html        |  11 -
 .../file-popout-callout.component.ts          |  37 -
 .../guards/file-picker-popout.guard.spec.ts   | 834 ++++++++++++++++++
 .../popup/guards/file-picker-popout.guard.ts  | 109 +++
 .../add-edit/send-add-edit.component.html     |   2 -
 .../add-edit/send-add-edit.component.ts       |   2 -
 ...ile-popout-dialog-container.component.html |   0
 ...-file-popout-dialog-container.component.ts |  41 -
 .../send-file-popout-dialog.component.html    |  20 -
 .../send-file-popout-dialog.component.ts      |  26 -
 .../services/file-popout-utils.service.ts     |  71 --
 .../open-attachments.component.html           |   5 +-
 .../open-attachments.component.spec.ts        |  30 +-
 .../open-attachments.component.ts             |  16 -
 .../vault-v2/vault-v2.component.spec.ts       |  18 +-
 .../components/vault-v2/vault-v2.component.ts |   5 -
 .../settings/vault-settings-v2.component.html |   7 +-
 .../settings/vault-settings-v2.component.ts   |   5 -
 .../new-send-dropdown.component.html          |   4 +-
 23 files changed, 961 insertions(+), 322 deletions(-)
 delete mode 100644 apps/browser/src/tools/popup/components/file-popout-callout.component.html
 delete mode 100644 apps/browser/src/tools/popup/components/file-popout-callout.component.ts
 create mode 100644 apps/browser/src/tools/popup/guards/file-picker-popout.guard.spec.ts
 create mode 100644 apps/browser/src/tools/popup/guards/file-picker-popout.guard.ts
 delete mode 100644 apps/browser/src/tools/popup/send-v2/send-file-popout-dialog/send-file-popout-dialog-container.component.html
 delete mode 100644 apps/browser/src/tools/popup/send-v2/send-file-popout-dialog/send-file-popout-dialog.component.html
 delete mode 100644 apps/browser/src/tools/popup/send-v2/send-file-popout-dialog/send-file-popout-dialog.component.ts
 delete mode 100644 apps/browser/src/tools/popup/services/file-popout-utils.service.ts

diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
index 5026f5e2799..972fd60cc2e 100644
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -3094,29 +3094,9 @@
     "message": "Send saved",
     "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   },
-  "sendFilePopoutDialogText": {
-    "message": "Pop out extension?",
-    "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
-  },
-  "sendFilePopoutDialogDesc": {
-    "message": "To create a file Send, you need to pop out the extension to a new window.",
-    "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
-  },
-  "sendLinuxChromiumFileWarning": {
-    "message": "In order to choose a file, open the extension in the sidebar (if possible) or pop out to a new window by clicking this banner."
-  },
-  "sendFirefoxFileWarning": {
-    "message": "In order to choose a file using Firefox, open the extension in the sidebar or pop out to a new window by clicking this banner."
-  },
-  "sendSafariFileWarning": {
-    "message": "In order to choose a file using Safari, pop out to a new window by clicking this banner."
-  },
   "popOut": {
     "message": "Pop out"
   },
-  "sendFileCalloutHeader": {
-    "message": "Before you start"
-  },
   "expirationDateIsInvalid": {
     "message": "The expiration date provided is not valid."
   },
diff --git a/apps/browser/src/popup/app-routing.module.ts b/apps/browser/src/popup/app-routing.module.ts
index 1f1d4d25b40..7fb466449f2 100644
--- a/apps/browser/src/popup/app-routing.module.ts
+++ b/apps/browser/src/popup/app-routing.module.ts
@@ -69,7 +69,7 @@ import { popupRouterCacheGuard } from "../platform/popup/view-cache/popup-router
 import { RouteCacheOptions } from "../platform/services/popup-view-cache-background.service";
 import { CredentialGeneratorHistoryComponent } from "../tools/popup/generator/credential-generator-history.component";
 import { CredentialGeneratorComponent } from "../tools/popup/generator/credential-generator.component";
-import { firefoxPopoutGuard } from "../tools/popup/guards/firefox-popout.guard";
+import { filePickerPopoutGuard } from "../tools/popup/guards/file-picker-popout.guard";
 import { SendAddEditComponent as SendAddEditV2Component } from "../tools/popup/send-v2/add-edit/send-add-edit.component";
 import { SendCreatedComponent } from "../tools/popup/send-v2/send-created/send-created.component";
 import { SendV2Component } from "../tools/popup/send-v2/send-v2.component";
@@ -248,7 +248,7 @@ const routes: Routes = [
   {
     path: "attachments",
     component: AttachmentsV2Component,
-    canActivate: [authGuard],
+    canActivate: [authGuard, filePickerPopoutGuard()],
     data: { elevation: 4 } satisfies RouteDataProperties,
   },
   {
@@ -266,7 +266,7 @@ const routes: Routes = [
   {
     path: "import",
     component: ImportBrowserV2Component,
-    canActivate: [authGuard, firefoxPopoutGuard()],
+    canActivate: [authGuard, filePickerPopoutGuard()],
     data: { elevation: 1 } satisfies RouteDataProperties,
   },
   {
@@ -350,13 +350,13 @@ const routes: Routes = [
   {
     path: "add-send",
     component: SendAddEditV2Component,
-    canActivate: [authGuard, firefoxPopoutGuard()],
+    canActivate: [authGuard, filePickerPopoutGuard()],
     data: { elevation: 1 } satisfies RouteDataProperties,
   },
   {
     path: "edit-send",
     component: SendAddEditV2Component,
-    canActivate: [authGuard, firefoxPopoutGuard()],
+    canActivate: [authGuard, filePickerPopoutGuard()],
     data: { elevation: 1 } satisfies RouteDataProperties,
   },
   {
diff --git a/apps/browser/src/popup/app.module.ts b/apps/browser/src/popup/app.module.ts
index d178cee2fc3..4ed79dd144d 100644
--- a/apps/browser/src/popup/app.module.ts
+++ b/apps/browser/src/popup/app.module.ts
@@ -33,7 +33,6 @@ import { PopupFooterComponent } from "../platform/popup/layout/popup-footer.comp
 import { PopupHeaderComponent } from "../platform/popup/layout/popup-header.component";
 import { PopupPageComponent } from "../platform/popup/layout/popup-page.component";
 import { PopupTabNavigationComponent } from "../platform/popup/layout/popup-tab-navigation.component";
-import { FilePopoutCalloutComponent } from "../tools/popup/components/file-popout-callout.component";
 
 import { AppRoutingModule } from "./app-routing.module";
 import { AppComponent } from "./app.component";
@@ -67,7 +66,6 @@ import "../platform/popup/locales";
     ScrollingModule,
     ServicesModule,
     DialogModule,
-    FilePopoutCalloutComponent,
     AvatarModule,
     AccountComponent,
     ButtonModule,
diff --git a/apps/browser/src/popup/services/services.module.ts b/apps/browser/src/popup/services/services.module.ts
index a8bfb23d83f..a3caaa95fa2 100644
--- a/apps/browser/src/popup/services/services.module.ts
+++ b/apps/browser/src/popup/services/services.module.ts
@@ -230,7 +230,6 @@ import {
   isNotificationsSupported,
 } from "../../platform/system-notifications/browser-system-notification.service";
 import { fromChromeRuntimeMessaging } from "../../platform/utils/from-chrome-runtime-messaging";
-import { FilePopoutUtilsService } from "../../tools/popup/services/file-popout-utils.service";
 import { BrowserAutofillNudgeService } from "../../vault/popup/services/browser-autofill-nudge.service";
 import { Fido2UserVerificationService } from "../../vault/services/fido2-user-verification.service";
 import { ExtensionAnonLayoutWrapperDataService } from "../components/extension-anon-layout-wrapper/extension-anon-layout-wrapper-data.service";
@@ -502,13 +501,6 @@ const safeProviders: SafeProvider[] = [
     },
     deps: [PlatformUtilsService],
   }),
-  safeProvider({
-    provide: FilePopoutUtilsService,
-    useFactory: (platformUtilsService: PlatformUtilsService) => {
-      return new FilePopoutUtilsService(platformUtilsService);
-    },
-    deps: [PlatformUtilsService],
-  }),
   safeProvider({
     provide: DerivedStateProvider,
     useClass: InlineDerivedStateProvider,
diff --git a/apps/browser/src/tools/popup/components/file-popout-callout.component.html b/apps/browser/src/tools/popup/components/file-popout-callout.component.html
deleted file mode 100644
index 0df77dc4367..00000000000
--- a/apps/browser/src/tools/popup/components/file-popout-callout.component.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<bit-callout
-  type="warning"
-  icon="bwi-external-link bwi-rotate-270 bwi-fw"
-  title="{{ 'sendFileCalloutHeader' | i18n }}"
-  (click)="popOutWindow()"
-  *ngIf="showFilePopoutMessage"
->
-  <div *ngIf="showChromiumFileWarning">{{ "sendLinuxChromiumFileWarning" | i18n }}</div>
-  <div *ngIf="showFirefoxFileWarning">{{ "sendFirefoxFileWarning" | i18n }}</div>
-  <div *ngIf="showSafariFileWarning">{{ "sendSafariFileWarning" | i18n }}</div>
-</bit-callout>
diff --git a/apps/browser/src/tools/popup/components/file-popout-callout.component.ts b/apps/browser/src/tools/popup/components/file-popout-callout.component.ts
deleted file mode 100644
index 33044b79351..00000000000
--- a/apps/browser/src/tools/popup/components/file-popout-callout.component.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { CommonModule } from "@angular/common";
-import { Component, OnInit } from "@angular/core";
-
-import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { CalloutModule } from "@bitwarden/components";
-
-import BrowserPopupUtils from "../../../platform/browser/browser-popup-utils";
-import { FilePopoutUtilsService } from "../services/file-popout-utils.service";
-
-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-@Component({
-  selector: "tools-file-popout-callout",
-  templateUrl: "file-popout-callout.component.html",
-  imports: [CommonModule, JslibModule, CalloutModule],
-})
-export class FilePopoutCalloutComponent implements OnInit {
-  protected showFilePopoutMessage: boolean = false;
-  protected showFirefoxFileWarning: boolean = false;
-  protected showSafariFileWarning: boolean = false;
-  protected showChromiumFileWarning: boolean = false;
-
-  constructor(private filePopoutUtilsService: FilePopoutUtilsService) {}
-
-  ngOnInit() {
-    this.showFilePopoutMessage = this.filePopoutUtilsService.showFilePopoutMessage(window);
-    this.showFirefoxFileWarning = this.filePopoutUtilsService.showFirefoxFileWarning(window);
-    this.showSafariFileWarning = this.filePopoutUtilsService.showSafariFileWarning(window);
-    this.showChromiumFileWarning = this.filePopoutUtilsService.showChromiumFileWarning(window);
-  }
-
-  popOutWindow() {
-    // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    BrowserPopupUtils.openCurrentPagePopout(window);
-  }
-}
diff --git a/apps/browser/src/tools/popup/guards/file-picker-popout.guard.spec.ts b/apps/browser/src/tools/popup/guards/file-picker-popout.guard.spec.ts
new file mode 100644
index 00000000000..2f100ab67f2
--- /dev/null
+++ b/apps/browser/src/tools/popup/guards/file-picker-popout.guard.spec.ts
@@ -0,0 +1,834 @@
+import { TestBed } from "@angular/core/testing";
+import { ActivatedRouteSnapshot, RouterStateSnapshot } from "@angular/router";
+
+import { DeviceType } from "@bitwarden/common/enums";
+
+import { BrowserApi } from "../../../platform/browser/browser-api";
+import BrowserPopupUtils from "../../../platform/browser/browser-popup-utils";
+import { BrowserPlatformUtilsService } from "../../../platform/services/platform-utils/browser-platform-utils.service";
+
+import { filePickerPopoutGuard } from "./file-picker-popout.guard";
+
+describe("filePickerPopoutGuard", () => {
+  let getDeviceSpy: jest.SpyInstance;
+  let inPopoutSpy: jest.SpyInstance;
+  let inSidebarSpy: jest.SpyInstance;
+  let openPopoutSpy: jest.SpyInstance;
+  let closePopupSpy: jest.SpyInstance;
+
+  const mockRoute = {} as ActivatedRouteSnapshot;
+  const mockState: RouterStateSnapshot = {
+    url: "/add-send?type=1",
+  } as RouterStateSnapshot;
+
+  beforeEach(() => {
+    getDeviceSpy = jest.spyOn(BrowserPlatformUtilsService, "getDevice");
+    inPopoutSpy = jest.spyOn(BrowserPopupUtils, "inPopout");
+    inSidebarSpy = jest.spyOn(BrowserPopupUtils, "inSidebar");
+    openPopoutSpy = jest.spyOn(BrowserPopupUtils, "openPopout").mockImplementation();
+    closePopupSpy = jest.spyOn(BrowserApi, "closePopup").mockImplementation();
+
+    TestBed.configureTestingModule({});
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("Firefox browser", () => {
+    beforeEach(() => {
+      getDeviceSpy.mockReturnValue(DeviceType.FirefoxExtension);
+      inPopoutSpy.mockReturnValue(false);
+      inSidebarSpy.mockReturnValue(false);
+    });
+
+    it("should open popout and block navigation when not in popout or sidebar", async () => {
+      const guard = filePickerPopoutGuard();
+      const result = await TestBed.runInInjectionContext(() => guard(mockRoute, mockState));
+
+      expect(getDeviceSpy).toHaveBeenCalledWith(window);
+      expect(inPopoutSpy).toHaveBeenCalledWith(window);
+      expect(inSidebarSpy).toHaveBeenCalledWith(window);
+      expect(openPopoutSpy).toHaveBeenCalledWith("popup/index.html#/add-send?type=1");
+      expect(closePopupSpy).toHaveBeenCalledWith(window);
+      expect(result).toBe(false);
+    });
+
+    it("should allow navigation when already in popout", async () => {
+      inPopoutSpy.mockReturnValue(true);
+
+      const guard = filePickerPopoutGuard();
+      const result = await TestBed.runInInjectionContext(() => guard(mockRoute, mockState));
+
+      expect(openPopoutSpy).not.toHaveBeenCalled();
+      expect(closePopupSpy).not.toHaveBeenCalled();
+      expect(result).toBe(true);
+    });
+
+    it("should allow navigation when already in sidebar", async () => {
+      inSidebarSpy.mockReturnValue(true);
+
+      const guard = filePickerPopoutGuard();
+      const result = await TestBed.runInInjectionContext(() => guard(mockRoute, mockState));
+
+      expect(openPopoutSpy).not.toHaveBeenCalled();
+      expect(closePopupSpy).not.toHaveBeenCalled();
+      expect(result).toBe(true);
+    });
+  });
+
+  describe("Safari browser", () => {
+    beforeEach(() => {
+      getDeviceSpy.mockReturnValue(DeviceType.SafariExtension);
+      inPopoutSpy.mockReturnValue(false);
+      inSidebarSpy.mockReturnValue(false);
+    });
+
+    it("should open popout and block navigation when not in popout", async () => {
+      const guard = filePickerPopoutGuard();
+      const result = await TestBed.runInInjectionContext(() => guard(mockRoute, mockState));
+
+      expect(getDeviceSpy).toHaveBeenCalledWith(window);
+      expect(inPopoutSpy).toHaveBeenCalledWith(window);
+      expect(openPopoutSpy).toHaveBeenCalledWith("popup/index.html#/add-send?type=1");
+      expect(closePopupSpy).toHaveBeenCalledWith(window);
+      expect(result).toBe(false);
+    });
+
+    it("should allow navigation when already in popout", async () => {
+      inPopoutSpy.mockReturnValue(true);
+
+      const guard = filePickerPopoutGuard();
+      const result = await TestBed.runInInjectionContext(() => guard(mockRoute, mockState));
+
+      expect(openPopoutSpy).not.toHaveBeenCalled();
+      expect(closePopupSpy).not.toHaveBeenCalled();
+      expect(result).toBe(true);
+    });
+
+    it("should not allow sidebar bypass (Safari doesn't support sidebar)", async () => {
+      inSidebarSpy.mockReturnValue(true);
+      inPopoutSpy.mockReturnValue(false);
+
+      const guard = filePickerPopoutGuard();
+      const result = await TestBed.runInInjectionContext(() => guard(mockRoute, mockState));
+
+      // Safari requires popout, sidebar is not sufficient
+      expect(openPopoutSpy).toHaveBeenCalledWith("popup/index.html#/add-send?type=1");
+      expect(closePopupSpy).toHaveBeenCalledWith(window);
+      expect(result).toBe(false);
+    });
+  });
+
+  describe("Chromium browsers on Linux", () => {
+    beforeEach(() => {
+      inPopoutSpy.mockReturnValue(false);
+      inSidebarSpy.mockReturnValue(false);
+      Object.defineProperty(window, "navigator", {
+        value: {
+          userAgent: "Mozilla/5.0 (X11; Linux x86_64)",
+          appVersion: "5.0 (X11; Linux x86_64)",
+        },
+        configurable: true,
+        writable: true,
+      });
+    });
+
+    it.each([
+      { deviceType: DeviceType.ChromeExtension, name: "Chrome" },
+      { deviceType: DeviceType.EdgeExtension, name: "Edge" },
+      { deviceType: DeviceType.OperaExtension, name: "Opera" },
+      { deviceType: DeviceType.VivaldiExtension, name: "Vivaldi" },
+    ])(
+      "should open popout and block navigation for $name on Linux when not in popout or sidebar",
+      async ({ deviceType }) => {
+        getDeviceSpy.mockReturnValue(deviceType);
+
+        const guard = filePickerPopoutGuard();
+        const result = await TestBed.runInInjectionContext(() => guard(mockRoute, mockState));
+
+        expect(openPopoutSpy).toHaveBeenCalledWith("popup/index.html#/add-send?type=1");
+        expect(closePopupSpy).toHaveBeenCalledWith(window);
+        expect(result).toBe(false);
+      },
+    );
+
+    it("should allow navigation when in popout", async () => {
+      getDeviceSpy.mockReturnValue(DeviceType.ChromeExtension);
+      inPopoutSpy.mockReturnValue(true);
+
+      const guard = filePickerPopoutGuard();
+      const result = await TestBed.runInInjectionContext(() => guard(mockRoute, mockState));
+
+      expect(openPopoutSpy).not.toHaveBeenCalled();
+      expect(closePopupSpy).not.toHaveBeenCalled();
+      expect(result).toBe(true);
+    });
+
+    it("should allow navigation when in sidebar", async () => {
+      getDeviceSpy.mockReturnValue(DeviceType.ChromeExtension);
+      inSidebarSpy.mockReturnValue(true);
+
+      const guard = filePickerPopoutGuard();
+      const result = await TestBed.runInInjectionContext(() => guard(mockRoute, mockState));
+
+      expect(openPopoutSpy).not.toHaveBeenCalled();
+      expect(closePopupSpy).not.toHaveBeenCalled();
+      expect(result).toBe(true);
+    });
+  });
+
+  describe("Chromium browsers on Mac", () => {
+    beforeEach(() => {
+      inPopoutSpy.mockReturnValue(false);
+      inSidebarSpy.mockReturnValue(false);
+      Object.defineProperty(window, "navigator", {
+        value: {
+          userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)",
+          appVersion: "5.0 (Macintosh; Intel Mac OS X 10_15_7)",
+        },
+        configurable: true,
+        writable: true,
+      });
+    });
+
+    it.each([
+      { deviceType: DeviceType.ChromeExtension, name: "Chrome" },
+      { deviceType: DeviceType.EdgeExtension, name: "Edge" },
+      { deviceType: DeviceType.OperaExtension, name: "Opera" },
+      { deviceType: DeviceType.VivaldiExtension, name: "Vivaldi" },
+    ])(
+      "should open popout and block navigation for $name on Mac when not in popout or sidebar",
+      async ({ deviceType }) => {
+        getDeviceSpy.mockReturnValue(deviceType);
+
+        const guard = filePickerPopoutGuard();
+        const result = await TestBed.runInInjectionContext(() => guard(mockRoute, mockState));
+
+        expect(openPopoutSpy).toHaveBeenCalledWith("popup/index.html#/add-send?type=1");
+        expect(closePopupSpy).toHaveBeenCalledWith(window);
+        expect(result).toBe(false);
+      },
+    );
+
+    it("should allow navigation when in popout", async () => {
+      getDeviceSpy.mockReturnValue(DeviceType.ChromeExtension);
+      inPopoutSpy.mockReturnValue(true);
+
+      const guard = filePickerPopoutGuard();
+      const result = await TestBed.runInInjectionContext(() => guard(mockRoute, mockState));
+
+      expect(openPopoutSpy).not.toHaveBeenCalled();
+      expect(closePopupSpy).not.toHaveBeenCalled();
+      expect(result).toBe(true);
+    });
+
+    it("should allow navigation when in sidebar", async () => {
+      getDeviceSpy.mockReturnValue(DeviceType.ChromeExtension);
+      inSidebarSpy.mockReturnValue(true);
+
+      const guard = filePickerPopoutGuard();
+      const result = await TestBed.runInInjectionContext(() => guard(mockRoute, mockState));
+
+      expect(openPopoutSpy).not.toHaveBeenCalled();
+      expect(closePopupSpy).not.toHaveBeenCalled();
+      expect(result).toBe(true);
+    });
+  });
+
+  describe("Chromium browsers on Windows", () => {
+    beforeEach(() => {
+      getDeviceSpy.mockReturnValue(DeviceType.ChromeExtension);
+      inPopoutSpy.mockReturnValue(false);
+      inSidebarSpy.mockReturnValue(false);
+      Object.defineProperty(window, "navigator", {
+        value: {
+          userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64)",
+          appVersion: "5.0 (Windows NT 10.0; Win64; x64)",
+        },
+        configurable: true,
+        writable: true,
+      });
+    });
+
+    it("should allow navigation without popout on Windows", async () => {
+      const guard = filePickerPopoutGuard();
+      const result = await TestBed.runInInjectionContext(() => guard(mockRoute, mockState));
+
+      expect(getDeviceSpy).toHaveBeenCalledWith(window);
+      expect(openPopoutSpy).not.toHaveBeenCalled();
+      expect(closePopupSpy).not.toHaveBeenCalled();
+      expect(result).toBe(true);
+    });
+  });
+
+  describe("File picker routes", () => {
+    beforeEach(() => {
+      getDeviceSpy.mockReturnValue(DeviceType.FirefoxExtension);
+      inPopoutSpy.mockReturnValue(false);
+      inSidebarSpy.mockReturnValue(false);
+    });
+
+    it.each([
+      { route: "/import" },
+      { route: "/add-send" },
+      { route: "/edit-send" },
+      { route: "/attachments" },
+    ])("should open popout for $route route", async ({ route }) => {
+      const importState: RouterStateSnapshot = {
+        url: route,
+      } as RouterStateSnapshot;
+
+      const guard = filePickerPopoutGuard();
+      const result = await TestBed.runInInjectionContext(() => guard(mockRoute, importState));
+
+      expect(openPopoutSpy).toHaveBeenCalledWith("popup/index.html#" + route);
+      expect(closePopupSpy).toHaveBeenCalledWith(window);
+      expect(result).toBe(false);
+    });
+  });
+
+  describe("Url handling", () => {
+    beforeEach(() => {
+      getDeviceSpy.mockReturnValue(DeviceType.FirefoxExtension);
+      inPopoutSpy.mockReturnValue(false);
+      inSidebarSpy.mockReturnValue(false);
+    });
+
+    it("should preserve query parameters in the popout url", async () => {
+      const stateWithQuery: RouterStateSnapshot = {
+        url: "/import?foo=bar&baz=qux",
+      } as RouterStateSnapshot;
+
+      const guard = filePickerPopoutGuard();
+      await TestBed.runInInjectionContext(() => guard(mockRoute, stateWithQuery));
+
+      expect(openPopoutSpy).toHaveBeenCalledWith("popup/index.html#/import?foo=bar&baz=qux");
+      expect(closePopupSpy).toHaveBeenCalledWith(window);
+    });
+
+    it("should handle urls without query parameters", async () => {
+      const stateWithoutQuery: RouterStateSnapshot = {
+        url: "/simple-path",
+      } as RouterStateSnapshot;
+
+      const guard = filePickerPopoutGuard();
+      await TestBed.runInInjectionContext(() => guard(mockRoute, stateWithoutQuery));
+
+      expect(openPopoutSpy).toHaveBeenCalledWith("popup/index.html#/simple-path");
+      expect(closePopupSpy).toHaveBeenCalledWith(window);
+    });
+
+    it("should not add autoClosePopout parameter to the url", async () => {
+      const guard = filePickerPopoutGuard();
+      await TestBed.runInInjectionContext(() => guard(mockRoute, mockState));
+
+      expect(openPopoutSpy).toHaveBeenCalledWith("popup/index.html#/add-send?type=1");
+      expect(openPopoutSpy).not.toHaveBeenCalledWith(expect.stringContaining("autoClosePopout"));
+    });
+  });
+
+  describe("Send type differentiation", () => {
+    describe("Text Sends (type=0)", () => {
+      it.each([
+        { deviceType: DeviceType.FirefoxExtension, name: "Firefox" },
+        { deviceType: DeviceType.SafariExtension, name: "Safari" },
+        { deviceType: DeviceType.ChromeExtension, name: "Chrome" },
+        { deviceType: DeviceType.EdgeExtension, name: "Edge" },
+      ])(
+        "should allow navigation without popout for new text Sends on $name",
+        async ({ deviceType }) => {
+          getDeviceSpy.mockReturnValue(deviceType);
+          inPopoutSpy.mockReturnValue(false);
+          inSidebarSpy.mockReturnValue(false);
+
+          const textSendState: RouterStateSnapshot = {
+            url: "/add-send?type=0&isNew=true",
+          } as RouterStateSnapshot;
+
+          const guard = filePickerPopoutGuard();
+          const result = await TestBed.runInInjectionContext(() => guard(mockRoute, textSendState));
+
+          expect(openPopoutSpy).not.toHaveBeenCalled();
+          expect(closePopupSpy).not.toHaveBeenCalled();
+          expect(result).toBe(true);
+        },
+      );
+
+      it.each([
+        { deviceType: DeviceType.FirefoxExtension, name: "Firefox" },
+        { deviceType: DeviceType.SafariExtension, name: "Safari" },
+        { deviceType: DeviceType.ChromeExtension, name: "Chrome" },
+        { deviceType: DeviceType.EdgeExtension, name: "Edge" },
+      ])("should allow navigation for editing text Sends on $name", async ({ deviceType }) => {
+        getDeviceSpy.mockReturnValue(deviceType);
+        inPopoutSpy.mockReturnValue(false);
+        inSidebarSpy.mockReturnValue(false);
+
+        const editTextSendState: RouterStateSnapshot = {
+          url: "/edit-send?sendId=abc123&type=0",
+        } as RouterStateSnapshot;
+
+        const guard = filePickerPopoutGuard();
+        const result = await TestBed.runInInjectionContext(() =>
+          guard(mockRoute, editTextSendState),
+        );
+
+        expect(openPopoutSpy).not.toHaveBeenCalled();
+        expect(closePopupSpy).not.toHaveBeenCalled();
+        expect(result).toBe(true);
+      });
+    });
+
+    describe("File Sends (type=1)", () => {
+      it.each([
+        {
+          deviceType: DeviceType.FirefoxExtension,
+          name: "Firefox",
+          os: "Mac",
+          userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)",
+          expectPopout: true,
+        },
+        {
+          deviceType: DeviceType.FirefoxExtension,
+          name: "Firefox",
+          os: "Linux",
+          userAgent: "Mozilla/5.0 (X11; Linux x86_64)",
+          expectPopout: true,
+        },
+        {
+          deviceType: DeviceType.FirefoxExtension,
+          name: "Firefox",
+          os: "Windows",
+          userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64)",
+          expectPopout: true,
+        },
+        {
+          deviceType: DeviceType.SafariExtension,
+          name: "Safari",
+          os: "Mac",
+          userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)",
+          expectPopout: true,
+        },
+        {
+          deviceType: DeviceType.ChromeExtension,
+          name: "Chrome",
+          os: "Mac",
+          userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)",
+          expectPopout: true,
+        },
+        {
+          deviceType: DeviceType.ChromeExtension,
+          name: "Chrome",
+          os: "Linux",
+          userAgent: "Mozilla/5.0 (X11; Linux x86_64)",
+          expectPopout: true,
+        },
+        {
+          deviceType: DeviceType.ChromeExtension,
+          name: "Chrome",
+          os: "Windows",
+          userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64)",
+          expectPopout: false,
+        },
+        {
+          deviceType: DeviceType.EdgeExtension,
+          name: "Edge",
+          os: "Mac",
+          userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)",
+          expectPopout: true,
+        },
+        {
+          deviceType: DeviceType.EdgeExtension,
+          name: "Edge",
+          os: "Linux",
+          userAgent: "Mozilla/5.0 (X11; Linux x86_64)",
+          expectPopout: true,
+        },
+        {
+          deviceType: DeviceType.EdgeExtension,
+          name: "Edge",
+          os: "Windows",
+          userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64)",
+          expectPopout: false,
+        },
+      ])(
+        "should require popout for a new file Send on $name $os",
+        async ({ deviceType, userAgent, expectPopout }) => {
+          getDeviceSpy.mockReturnValue(deviceType);
+          inPopoutSpy.mockReturnValue(false);
+          inSidebarSpy.mockReturnValue(false);
+
+          if (userAgent) {
+            Object.defineProperty(window, "navigator", {
+              value: { userAgent, appVersion: userAgent },
+              configurable: true,
+              writable: true,
+            });
+          }
+
+          const fileSendState: RouterStateSnapshot = {
+            url: "/add-send?type=1&isNew=true",
+          } as RouterStateSnapshot;
+
+          const guard = filePickerPopoutGuard();
+          const result = await TestBed.runInInjectionContext(() => guard(mockRoute, fileSendState));
+
+          if (expectPopout === false) {
+            expect(openPopoutSpy).not.toHaveBeenCalled();
+            expect(closePopupSpy).not.toHaveBeenCalled();
+            expect(result).toBe(true);
+          } else {
+            expect(openPopoutSpy).toHaveBeenCalledWith(
+              "popup/index.html#/add-send?type=1&isNew=true",
+            );
+            expect(closePopupSpy).toHaveBeenCalledWith(window);
+            expect(result).toBe(false);
+          }
+        },
+      );
+
+      it.each([
+        {
+          deviceType: DeviceType.FirefoxExtension,
+          name: "Firefox",
+          os: "Mac",
+          userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)",
+          expectPopout: true,
+        },
+        {
+          deviceType: DeviceType.FirefoxExtension,
+          name: "Firefox",
+          os: "Linux",
+          userAgent: "Mozilla/5.0 (X11; Linux x86_64)",
+          expectPopout: true,
+        },
+        {
+          deviceType: DeviceType.FirefoxExtension,
+          name: "Firefox",
+          os: "Windows",
+          userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64)",
+          expectPopout: true,
+        },
+        {
+          deviceType: DeviceType.SafariExtension,
+          name: "Safari",
+          os: "Mac",
+          userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)",
+          expectPopout: true,
+        },
+        {
+          deviceType: DeviceType.ChromeExtension,
+          name: "Chrome",
+          os: "Mac",
+          userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)",
+          expectPopout: true,
+        },
+        {
+          deviceType: DeviceType.ChromeExtension,
+          name: "Chrome",
+          os: "Linux",
+          userAgent: "Mozilla/5.0 (X11; Linux x86_64)",
+          expectPopout: true,
+        },
+        {
+          deviceType: DeviceType.ChromeExtension,
+          name: "Chrome",
+          os: "Windows",
+          userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64)",
+          expectPopout: false,
+        },
+        {
+          deviceType: DeviceType.EdgeExtension,
+          name: "Edge",
+          os: "Mac",
+          userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)",
+          expectPopout: true,
+        },
+        {
+          deviceType: DeviceType.EdgeExtension,
+          name: "Edge",
+          os: "Linux",
+          userAgent: "Mozilla/5.0 (X11; Linux x86_64)",
+          expectPopout: true,
+        },
+        {
+          deviceType: DeviceType.EdgeExtension,
+          name: "Edge",
+          os: "Windows",
+          userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64)",
+          expectPopout: false,
+        },
+      ])(
+        "should require popout for editing a file Send on $name $os",
+        async ({ deviceType, userAgent, expectPopout }) => {
+          getDeviceSpy.mockReturnValue(deviceType);
+          inPopoutSpy.mockReturnValue(false);
+          inSidebarSpy.mockReturnValue(false);
+
+          if (userAgent) {
+            Object.defineProperty(window, "navigator", {
+              value: { userAgent, appVersion: userAgent },
+              configurable: true,
+              writable: true,
+            });
+          }
+
+          const editFileSendState: RouterStateSnapshot = {
+            url: "/edit-send?sendId=abc123&type=1",
+          } as RouterStateSnapshot;
+
+          const guard = filePickerPopoutGuard();
+          const result = await TestBed.runInInjectionContext(() =>
+            guard(mockRoute, editFileSendState),
+          );
+
+          if (expectPopout === false) {
+            expect(openPopoutSpy).not.toHaveBeenCalled();
+            expect(closePopupSpy).not.toHaveBeenCalled();
+            expect(result).toBe(true);
+          } else {
+            expect(openPopoutSpy).toHaveBeenCalledWith(
+              "popup/index.html#/edit-send?sendId=abc123&type=1",
+            );
+            expect(closePopupSpy).toHaveBeenCalledWith(window);
+            expect(result).toBe(false);
+          }
+        },
+      );
+    });
+
+    describe("Send routes without type parameter", () => {
+      it.each([
+        {
+          deviceType: DeviceType.FirefoxExtension,
+          name: "Firefox",
+          os: "Mac",
+          userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)",
+        },
+        {
+          deviceType: DeviceType.FirefoxExtension,
+          name: "Firefox",
+          os: "Linux",
+          userAgent: "Mozilla/5.0 (X11; Linux x86_64)",
+        },
+        {
+          deviceType: DeviceType.FirefoxExtension,
+          name: "Firefox",
+          os: "Windows",
+          userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64)",
+        },
+        {
+          deviceType: DeviceType.SafariExtension,
+          name: "Safari",
+          os: "Mac",
+          userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)",
+        },
+        {
+          deviceType: DeviceType.ChromeExtension,
+          name: "Chrome",
+          os: "Mac",
+          userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)",
+        },
+        {
+          deviceType: DeviceType.ChromeExtension,
+          name: "Chrome",
+          os: "Linux",
+          userAgent: "Mozilla/5.0 (X11; Linux x86_64)",
+        },
+        {
+          deviceType: DeviceType.ChromeExtension,
+          name: "Chrome",
+          os: "Windows",
+          userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64)",
+        },
+        {
+          deviceType: DeviceType.EdgeExtension,
+          name: "Edge",
+          os: "Mac",
+          userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)",
+        },
+        {
+          deviceType: DeviceType.EdgeExtension,
+          name: "Edge",
+          os: "Linux",
+          userAgent: "Mozilla/5.0 (X11; Linux x86_64)",
+        },
+        {
+          deviceType: DeviceType.EdgeExtension,
+          name: "Edge",
+          os: "Windows",
+          userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64)",
+        },
+      ])(
+        "should default to requiring popout on $name $os",
+        async ({ deviceType, userAgent, os }) => {
+          getDeviceSpy.mockReturnValue(deviceType);
+          inPopoutSpy.mockReturnValue(false);
+          inSidebarSpy.mockReturnValue(false);
+
+          if (userAgent) {
+            Object.defineProperty(window, "navigator", {
+              value: { userAgent, appVersion: userAgent },
+              configurable: true,
+              writable: true,
+            });
+          }
+
+          const noTypeState: RouterStateSnapshot = {
+            url: "/add-send",
+          } as RouterStateSnapshot;
+
+          const guard = filePickerPopoutGuard();
+          const result = await TestBed.runInInjectionContext(() => guard(mockRoute, noTypeState));
+
+          // Windows Chrome/Edge don't need popout
+          const isChromiumOnWindows =
+            (deviceType === DeviceType.ChromeExtension ||
+              deviceType === DeviceType.EdgeExtension) &&
+            os === "Windows";
+
+          if (isChromiumOnWindows) {
+            expect(openPopoutSpy).not.toHaveBeenCalled();
+            expect(closePopupSpy).not.toHaveBeenCalled();
+            expect(result).toBe(true);
+          } else {
+            expect(openPopoutSpy).toHaveBeenCalledWith("popup/index.html#/add-send");
+            expect(closePopupSpy).toHaveBeenCalledWith(window);
+            expect(result).toBe(false);
+          }
+        },
+      );
+
+      it.each([
+        {
+          deviceType: DeviceType.FirefoxExtension,
+          name: "Firefox",
+          os: "Mac",
+          userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)",
+        },
+        {
+          deviceType: DeviceType.FirefoxExtension,
+          name: "Firefox",
+          os: "Linux",
+          userAgent: "Mozilla/5.0 (X11; Linux x86_64)",
+        },
+        {
+          deviceType: DeviceType.FirefoxExtension,
+          name: "Firefox",
+          os: "Windows",
+          userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64)",
+        },
+        {
+          deviceType: DeviceType.SafariExtension,
+          name: "Safari",
+          os: "Mac",
+          userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)",
+        },
+        {
+          deviceType: DeviceType.ChromeExtension,
+          name: "Chrome",
+          os: "Mac",
+          userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)",
+        },
+        {
+          deviceType: DeviceType.ChromeExtension,
+          name: "Chrome",
+          os: "Linux",
+          userAgent: "Mozilla/5.0 (X11; Linux x86_64)",
+        },
+        {
+          deviceType: DeviceType.ChromeExtension,
+          name: "Chrome",
+          os: "Windows",
+          userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64)",
+        },
+        {
+          deviceType: DeviceType.EdgeExtension,
+          name: "Edge",
+          os: "Mac",
+          userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)",
+        },
+        {
+          deviceType: DeviceType.EdgeExtension,
+          name: "Edge",
+          os: "Linux",
+          userAgent: "Mozilla/5.0 (X11; Linux x86_64)",
+        },
+        {
+          deviceType: DeviceType.EdgeExtension,
+          name: "Edge",
+          os: "Windows",
+          userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64)",
+        },
+      ])(
+        "should default to requiring popout when type is invalid on $name $os",
+        async ({ deviceType, userAgent, os }) => {
+          getDeviceSpy.mockReturnValue(deviceType);
+          inPopoutSpy.mockReturnValue(false);
+          inSidebarSpy.mockReturnValue(false);
+
+          if (userAgent) {
+            Object.defineProperty(window, "navigator", {
+              value: { userAgent, appVersion: userAgent },
+              configurable: true,
+              writable: true,
+            });
+          }
+
+          const invalidTypeState: RouterStateSnapshot = {
+            url: "/add-send?type=invalid",
+          } as RouterStateSnapshot;
+
+          const guard = filePickerPopoutGuard();
+          const result = await TestBed.runInInjectionContext(() =>
+            guard(mockRoute, invalidTypeState),
+          );
+
+          // Windows Chrome/Edge don't need popout
+          const isChromiumOnWindows =
+            (deviceType === DeviceType.ChromeExtension ||
+              deviceType === DeviceType.EdgeExtension) &&
+            os === "Windows";
+
+          if (isChromiumOnWindows) {
+            expect(openPopoutSpy).not.toHaveBeenCalled();
+            expect(closePopupSpy).not.toHaveBeenCalled();
+            expect(result).toBe(true);
+          } else {
+            expect(openPopoutSpy).toHaveBeenCalledWith("popup/index.html#/add-send?type=invalid");
+            expect(closePopupSpy).toHaveBeenCalledWith(window);
+            expect(result).toBe(false);
+          }
+        },
+      );
+    });
+
+    describe("non-Send routes", () => {
+      it.each([
+        { deviceType: DeviceType.FirefoxExtension, name: "Firefox", route: "/import" },
+        { deviceType: DeviceType.FirefoxExtension, name: "Firefox", route: "/attachments" },
+        { deviceType: DeviceType.SafariExtension, name: "Safari", route: "/import" },
+        { deviceType: DeviceType.SafariExtension, name: "Safari", route: "/attachments" },
+      ])(
+        "should always require popout for $route on $name regardless of query params",
+        async ({ deviceType, route }) => {
+          getDeviceSpy.mockReturnValue(deviceType);
+          inPopoutSpy.mockReturnValue(false);
+          inSidebarSpy.mockReturnValue(false);
+
+          const routeState: RouterStateSnapshot = {
+            url: `${route}?type=0`,
+          } as RouterStateSnapshot;
+
+          const guard = filePickerPopoutGuard();
+          const result = await TestBed.runInInjectionContext(() => guard(mockRoute, routeState));
+
+          expect(openPopoutSpy).toHaveBeenCalledWith(`popup/index.html#${route}?type=0`);
+          expect(closePopupSpy).toHaveBeenCalledWith(window);
+          expect(result).toBe(false);
+        },
+      );
+    });
+  });
+});
diff --git a/apps/browser/src/tools/popup/guards/file-picker-popout.guard.ts b/apps/browser/src/tools/popup/guards/file-picker-popout.guard.ts
new file mode 100644
index 00000000000..900ff328ac8
--- /dev/null
+++ b/apps/browser/src/tools/popup/guards/file-picker-popout.guard.ts
@@ -0,0 +1,109 @@
+import { ActivatedRouteSnapshot, CanActivateFn, RouterStateSnapshot } from "@angular/router";
+
+import { BrowserApi } from "@bitwarden/browser/platform/browser/browser-api";
+import BrowserPopupUtils from "@bitwarden/browser/platform/browser/browser-popup-utils";
+import { BrowserPlatformUtilsService } from "@bitwarden/browser/platform/services/platform-utils/browser-platform-utils.service";
+import { DeviceType } from "@bitwarden/common/enums";
+import { SendType } from "@bitwarden/common/tools/send/types/send-type";
+
+/**
+ * Composite guard that handles file picker popout requirements for all browsers.
+ * Forces a popout window when file pickers could be exposed on browsers that require it.
+ *
+ * Browser-specific requirements:
+ * - Firefox: Requires sidebar OR popout (crashes with file picker in popup: https://bugzilla.mozilla.org/show_bug.cgi?id=1292701)
+ * - Safari: Requires popout only
+ * - All Chromium browsers (Chrome, Edge, Opera, Vivaldi) on Linux/Mac: Requires sidebar OR popout
+ * - Chromium on Windows: No special requirement
+ *
+ * Send-specific behavior:
+ * - Text Sends: No popout required (no file picker needed)
+ * - File Sends: Popout required on affected browsers
+ *
+ * @returns CanActivateFn that opens popout and blocks navigation when file picker access is needed
+ */
+export function filePickerPopoutGuard(): CanActivateFn {
+  return async (_route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
+    // Check if this is a text Send route (no file picker needed)
+    if (isTextOnlySendRoute(state.url)) {
+      return true; // Allow navigation without popout
+    }
+
+    // Check if browser is one that needs popout for file pickers
+    const deviceType = BrowserPlatformUtilsService.getDevice(window);
+
+    // Check current context
+    const inPopout = BrowserPopupUtils.inPopout(window);
+    const inSidebar = BrowserPopupUtils.inSidebar(window);
+
+    let needsPopout = false;
+
+    // Firefox: needs sidebar OR popout to avoid crash with file picker
+    if (deviceType === DeviceType.FirefoxExtension && !inPopout && !inSidebar) {
+      needsPopout = true;
+    }
+
+    // Safari: needs popout only (sidebar not available)
+    if (deviceType === DeviceType.SafariExtension && !inPopout) {
+      needsPopout = true;
+    }
+
+    // Chromium on Linux/Mac: needs sidebar OR popout for file picker access
+    // All Chromium-based browsers (Chrome, Edge, Opera, Vivaldi)
+    // Brave intentionally reports itself as Chrome for compatibility
+    const isChromiumBased = [
+      DeviceType.ChromeExtension,
+      DeviceType.EdgeExtension,
+      DeviceType.OperaExtension,
+      DeviceType.VivaldiExtension,
+    ].includes(deviceType);
+
+    const isLinux = window?.navigator?.userAgent?.includes("Linux");
+    const isMac = window?.navigator?.userAgent?.includes("Mac OS X");
+
+    if (isChromiumBased && (isLinux || isMac) && !inPopout && !inSidebar) {
+      needsPopout = true;
+    }
+
+    // Open popout if needed
+    if (needsPopout) {
+      // Don't add autoClosePopout for file picker scenarios - user should manually close
+      await BrowserPopupUtils.openPopout(`popup/index.html#${state.url}`);
+
+      // Close the original popup window
+      BrowserApi.closePopup(window);
+
+      return false; // Block navigation - popout will reload
+    }
+
+    return true; // Allow navigation
+  };
+}
+
+/**
+ * Determines if the route is for a text Send that doesn't require file picker display.
+ *
+ * @param url The route URL with query parameters
+ * @returns true if this is a Send route with explicitly text type (SendType.Text = 0)
+ */
+function isTextOnlySendRoute(url: string): boolean {
+  // Only apply to Send routes
+  if (!url.includes("/add-send") && !url.includes("/edit-send")) {
+    return false;
+  }
+
+  // Parse query parameters to check Send type
+  const queryStartIndex = url.indexOf("?");
+  if (queryStartIndex === -1) {
+    // No query params - default to requiring popout for safety
+    return false;
+  }
+
+  const queryString = url.substring(queryStartIndex + 1);
+  const params = new URLSearchParams(queryString);
+  const typeParam = params.get("type");
+
+  // Only skip popout for explicitly text-based Sends (SendType.Text = 0)
+  // If type is missing, null, or not text, default to requiring popout
+  return typeParam === String(SendType.Text);
+}
diff --git a/apps/browser/src/tools/popup/send-v2/add-edit/send-add-edit.component.html b/apps/browser/src/tools/popup/send-v2/add-edit/send-add-edit.component.html
index a72847a5bf2..2d588a9ee78 100644
--- a/apps/browser/src/tools/popup/send-v2/add-edit/send-add-edit.component.html
+++ b/apps/browser/src/tools/popup/send-v2/add-edit/send-add-edit.component.html
@@ -10,8 +10,6 @@
   >
   </tools-send-form>
 
-  <send-file-popout-dialog-container [config]="config"></send-file-popout-dialog-container>
-
   <popup-footer slot="footer">
     <button bitButton type="submit" form="sendForm" buttonType="primary" #submitBtn>
       {{ "save" | i18n }}
diff --git a/apps/browser/src/tools/popup/send-v2/add-edit/send-add-edit.component.ts b/apps/browser/src/tools/popup/send-v2/add-edit/send-add-edit.component.ts
index f180564b912..1bb9220bbfb 100644
--- a/apps/browser/src/tools/popup/send-v2/add-edit/send-add-edit.component.ts
+++ b/apps/browser/src/tools/popup/send-v2/add-edit/send-add-edit.component.ts
@@ -33,7 +33,6 @@ import { PopupBackBrowserDirective } from "../../../../platform/popup/layout/pop
 import { PopupFooterComponent } from "../../../../platform/popup/layout/popup-footer.component";
 import { PopupHeaderComponent } from "../../../../platform/popup/layout/popup-header.component";
 import { PopupPageComponent } from "../../../../platform/popup/layout/popup-page.component";
-import { SendFilePopoutDialogContainerComponent } from "../send-file-popout-dialog/send-file-popout-dialog-container.component";
 
 /**
  * Helper class to parse query parameters for the AddEdit route.
@@ -81,7 +80,6 @@ export type AddEditQueryParams = Partial<Record<keyof QueryParams, string>>;
     PopupPageComponent,
     PopupHeaderComponent,
     PopupFooterComponent,
-    SendFilePopoutDialogContainerComponent,
     SendFormModule,
     AsyncActionsModule,
     PopupBackBrowserDirective,
diff --git a/apps/browser/src/tools/popup/send-v2/send-file-popout-dialog/send-file-popout-dialog-container.component.html b/apps/browser/src/tools/popup/send-v2/send-file-popout-dialog/send-file-popout-dialog-container.component.html
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/apps/browser/src/tools/popup/send-v2/send-file-popout-dialog/send-file-popout-dialog-container.component.ts b/apps/browser/src/tools/popup/send-v2/send-file-popout-dialog/send-file-popout-dialog-container.component.ts
index ddf50eb39bf..e69de29bb2d 100644
--- a/apps/browser/src/tools/popup/send-v2/send-file-popout-dialog/send-file-popout-dialog-container.component.ts
+++ b/apps/browser/src/tools/popup/send-v2/send-file-popout-dialog/send-file-popout-dialog-container.component.ts
@@ -1,41 +0,0 @@
-import { CommonModule } from "@angular/common";
-import { Component, input, OnInit } from "@angular/core";
-
-import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { SendType } from "@bitwarden/common/tools/send/types/send-type";
-import { CenterPositionStrategy, DialogService } from "@bitwarden/components";
-import { SendFormConfig } from "@bitwarden/send-ui";
-
-import { FilePopoutUtilsService } from "../../services/file-popout-utils.service";
-
-import { SendFilePopoutDialogComponent } from "./send-file-popout-dialog.component";
-
-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-@Component({
-  selector: "send-file-popout-dialog-container",
-  templateUrl: "./send-file-popout-dialog-container.component.html",
-  imports: [JslibModule, CommonModule],
-})
-export class SendFilePopoutDialogContainerComponent implements OnInit {
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  config = input.required<SendFormConfig>();
-
-  constructor(
-    private dialogService: DialogService,
-    private filePopoutUtilsService: FilePopoutUtilsService,
-  ) {}
-
-  ngOnInit() {
-    if (
-      this.config().sendType === SendType.File &&
-      this.config().mode === "add" &&
-      this.filePopoutUtilsService.showFilePopoutMessage(window)
-    ) {
-      this.dialogService.open(SendFilePopoutDialogComponent, {
-        positionStrategy: new CenterPositionStrategy(),
-      });
-    }
-  }
-}
diff --git a/apps/browser/src/tools/popup/send-v2/send-file-popout-dialog/send-file-popout-dialog.component.html b/apps/browser/src/tools/popup/send-v2/send-file-popout-dialog/send-file-popout-dialog.component.html
deleted file mode 100644
index aaede0a821a..00000000000
--- a/apps/browser/src/tools/popup/send-v2/send-file-popout-dialog/send-file-popout-dialog.component.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<bit-simple-dialog dialogSize="default">
-  <div bitDialogIcon>
-    <i class="bwi bwi-info-circle bwi-2x tw-text-info" aria-hidden="true"></i>
-  </div>
-  <ng-container bitDialogContent>
-    <div bitTypography="h3">
-      {{ "sendFilePopoutDialogText" | i18n }}
-    </div>
-    <div bitTypography="body1">{{ "sendFilePopoutDialogDesc" | i18n }}</div>
-  </ng-container>
-  <ng-container bitDialogFooter>
-    <button buttonType="primary" bitButton type="button" (click)="popOutWindow()">
-      {{ "popOut" | i18n }}
-      <i class="bwi bwi-popout tw-ml-1" aria-hidden="true"></i>
-    </button>
-    <button bitButton buttonType="secondary" type="button" (click)="close()">
-      {{ "cancel" | i18n }}
-    </button>
-  </ng-container>
-</bit-simple-dialog>
diff --git a/apps/browser/src/tools/popup/send-v2/send-file-popout-dialog/send-file-popout-dialog.component.ts b/apps/browser/src/tools/popup/send-v2/send-file-popout-dialog/send-file-popout-dialog.component.ts
deleted file mode 100644
index 23fa744995a..00000000000
--- a/apps/browser/src/tools/popup/send-v2/send-file-popout-dialog/send-file-popout-dialog.component.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { CommonModule } from "@angular/common";
-import { Component } from "@angular/core";
-
-import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { ButtonModule, DialogModule, DialogService, TypographyModule } from "@bitwarden/components";
-
-import BrowserPopupUtils from "../../../../platform/browser/browser-popup-utils";
-
-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
-@Component({
-  selector: "send-file-popout-dialog",
-  templateUrl: "./send-file-popout-dialog.component.html",
-  imports: [JslibModule, CommonModule, DialogModule, ButtonModule, TypographyModule],
-})
-export class SendFilePopoutDialogComponent {
-  constructor(private dialogService: DialogService) {}
-
-  async popOutWindow() {
-    await BrowserPopupUtils.openCurrentPagePopout(window);
-  }
-
-  close() {
-    this.dialogService.closeAll();
-  }
-}
diff --git a/apps/browser/src/tools/popup/services/file-popout-utils.service.ts b/apps/browser/src/tools/popup/services/file-popout-utils.service.ts
deleted file mode 100644
index 9a04d4b8f23..00000000000
--- a/apps/browser/src/tools/popup/services/file-popout-utils.service.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Injectable } from "@angular/core";
-
-import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-
-import BrowserPopupUtils from "../../../platform/browser/browser-popup-utils";
-
-/**
- * Service for determining whether to display file popout callout messages.
- */
-@Injectable()
-export class FilePopoutUtilsService {
-  /**
-   * Creates an instance of FilePopoutUtilsService.
-   */
-  constructor(private platformUtilsService: PlatformUtilsService) {}
-
-  /**
-   * Determines whether to show any file popout callout message in the current browser.
-   * @param win - The window context in which the check should be performed.
-   * @returns True if a file popout callout message should be displayed; otherwise, false.
-   */
-  showFilePopoutMessage(win: Window): boolean {
-    return (
-      this.showFirefoxFileWarning(win) ||
-      this.showSafariFileWarning(win) ||
-      this.showChromiumFileWarning(win)
-    );
-  }
-
-  /**
-   * Determines whether to show a file popout callout message for the Firefox browser
-   * @param win - The window context in which the check should be performed.
-   * @returns True if the extension is not in a sidebar or popout; otherwise, false.
-   */
-  showFirefoxFileWarning(win: Window): boolean {
-    return (
-      this.platformUtilsService.isFirefox() &&
-      !(BrowserPopupUtils.inSidebar(win) || BrowserPopupUtils.inPopout(win))
-    );
-  }
-
-  /**
-   * Determines whether to show a file popout message for the Safari browser
-   * @param win - The window context in which the check should be performed.
-   * @returns True if the extension is not in a popout; otherwise, false.
-   */
-  showSafariFileWarning(win: Window): boolean {
-    return this.platformUtilsService.isSafari() && !BrowserPopupUtils.inPopout(win);
-  }
-
-  /**
-   * Determines whether to show a file popout callout message for Chromium-based browsers in Linux and Mac OS X
-   * @param win - The window context in which the check should be performed.
-   * @returns True if the extension is not in a sidebar or popout; otherwise, false.
-   */
-  showChromiumFileWarning(win: Window): boolean {
-    return (
-      (this.isLinux(win) || this.isUnsupportedMac(win)) &&
-      !this.platformUtilsService.isFirefox() &&
-      !(BrowserPopupUtils.inSidebar(win) || BrowserPopupUtils.inPopout(win))
-    );
-  }
-
-  private isLinux(win: Window): boolean {
-    return win?.navigator?.userAgent.indexOf("Linux") !== -1;
-  }
-
-  private isUnsupportedMac(win: Window): boolean {
-    return this.platformUtilsService.isChrome() && win?.navigator?.appVersion.includes("Mac OS X");
-  }
-}
diff --git a/apps/browser/src/vault/popup/components/vault-v2/attachments/open-attachments/open-attachments.component.html b/apps/browser/src/vault/popup/components/vault-v2/attachments/open-attachments/open-attachments.component.html
index 0fbe1c55b0a..1e9d63b709b 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/attachments/open-attachments/open-attachments.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/attachments/open-attachments/open-attachments.component.html
@@ -4,14 +4,15 @@
     type="button"
     (click)="openAttachments()"
     [disabled]="parentFormDisabled"
+    [title]="'popOutNewWindow' | i18n"
   >
     <div class="tw-flex tw-items-center tw-gap-2">
       {{ "attachments" | i18n }}
       <app-premium-badge></app-premium-badge>
     </div>
     <ng-container slot="end">
-      <i class="bwi bwi-popout" aria-hidden="true" *ngIf="openAttachmentsInPopout"></i>
-      <i class="bwi bwi-angle-right" aria-hidden="true" *ngIf="!openAttachmentsInPopout"></i>
+      <span class="tw-sr-only">{{ "popOutNewWindow" | i18n }}</span>
+      <i class="bwi bwi-popout tw-text-muted" aria-hidden="true"></i>
     </ng-container>
   </button>
 </bit-item>
diff --git a/apps/browser/src/vault/popup/components/vault-v2/attachments/open-attachments/open-attachments.component.spec.ts b/apps/browser/src/vault/popup/components/vault-v2/attachments/open-attachments/open-attachments.component.spec.ts
index e9636e09873..b88b435c702 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/attachments/open-attachments/open-attachments.component.spec.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/attachments/open-attachments/open-attachments.component.spec.ts
@@ -20,9 +20,6 @@ import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { ToastService } from "@bitwarden/components";
 import { CipherFormContainer } from "@bitwarden/vault";
 
-import BrowserPopupUtils from "../../../../../../platform/browser/browser-popup-utils";
-import { FilePopoutUtilsService } from "../../../../../../tools/popup/services/file-popout-utils.service";
-
 import { OpenAttachmentsComponent } from "./open-attachments.component";
 
 describe("OpenAttachmentsComponent", () => {
@@ -31,9 +28,6 @@ describe("OpenAttachmentsComponent", () => {
   let router: Router;
   const showToast = jest.fn();
   const hasPremiumFromAnySource$ = new BehaviorSubject<boolean>(true);
-  const openCurrentPagePopout = jest
-    .spyOn(BrowserPopupUtils, "openCurrentPagePopout")
-    .mockResolvedValue(null);
   const cipherView = {
     id: "5555-444-3333",
     type: CipherType.Login,
@@ -55,7 +49,6 @@ describe("OpenAttachmentsComponent", () => {
 
   const getCipher = jest.fn().mockResolvedValue(cipherDomain);
   const organizations$ = jest.fn().mockReturnValue(of([org]));
-  const showFilePopoutMessage = jest.fn().mockReturnValue(false);
 
   const mockUserId = Utils.newGuid() as UserId;
   const accountService = {
@@ -70,11 +63,9 @@ describe("OpenAttachmentsComponent", () => {
   const formStatusChange$ = new BehaviorSubject<"enabled" | "disabled">("enabled");
 
   beforeEach(async () => {
-    openCurrentPagePopout.mockClear();
     getCipher.mockClear();
     showToast.mockClear();
     organizations$.mockClear();
-    showFilePopoutMessage.mockClear();
     hasPremiumFromAnySource$.next(true);
     formStatusChange$.next("enabled");
 
@@ -103,10 +94,6 @@ describe("OpenAttachmentsComponent", () => {
           provide: OrganizationService,
           useValue: { organizations$ },
         },
-        {
-          provide: FilePopoutUtilsService,
-          useValue: { showFilePopoutMessage },
-        },
         {
           provide: AccountService,
           useValue: accountService,
@@ -130,8 +117,7 @@ describe("OpenAttachmentsComponent", () => {
     fixture.detectChanges();
   });
 
-  it("opens attachments in new popout", async () => {
-    showFilePopoutMessage.mockReturnValue(true);
+  it("navigates to attachments route", async () => {
     component.canAccessAttachments = true;
     await component.ngOnInit();
 
@@ -140,20 +126,6 @@ describe("OpenAttachmentsComponent", () => {
     expect(router.navigate).toHaveBeenCalledWith(["/attachments"], {
       queryParams: { cipherId: "5555-444-3333" },
     });
-    expect(openCurrentPagePopout).toHaveBeenCalledWith(window);
-  });
-
-  it("opens attachments in same window", async () => {
-    showFilePopoutMessage.mockReturnValue(false);
-    component.canAccessAttachments = true;
-    await component.ngOnInit();
-
-    await component.openAttachments();
-
-    expect(openCurrentPagePopout).not.toHaveBeenCalled();
-    expect(router.navigate).toHaveBeenCalledWith(["/attachments"], {
-      queryParams: { cipherId: "5555-444-3333" },
-    });
   });
 
   it("routes the user to the premium page when they cannot access premium features", async () => {
diff --git a/apps/browser/src/vault/popup/components/vault-v2/attachments/open-attachments/open-attachments.component.ts b/apps/browser/src/vault/popup/components/vault-v2/attachments/open-attachments/open-attachments.component.ts
index a267e7999ab..1a1f767ca8c 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/attachments/open-attachments/open-attachments.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/attachments/open-attachments/open-attachments.component.ts
@@ -23,9 +23,6 @@ import { PremiumUpgradePromptService } from "@bitwarden/common/vault/abstraction
 import { BadgeModule, ItemModule, ToastService, TypographyModule } from "@bitwarden/components";
 import { CipherFormContainer } from "@bitwarden/vault";
 
-import BrowserPopupUtils from "../../../../../../platform/browser/browser-popup-utils";
-import { FilePopoutUtilsService } from "../../../../../../tools/popup/services/file-popout-utils.service";
-
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
@@ -46,9 +43,6 @@ export class OpenAttachmentsComponent implements OnInit {
   // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input({ required: true }) cipherId: CipherId;
 
-  /** True when the attachments window should be opened in a popout */
-  openAttachmentsInPopout: boolean;
-
   /** True when the user has access to premium or h  */
   canAccessAttachments: boolean;
 
@@ -65,7 +59,6 @@ export class OpenAttachmentsComponent implements OnInit {
     private organizationService: OrganizationService,
     private toastService: ToastService,
     private i18nService: I18nService,
-    private filePopoutUtilsService: FilePopoutUtilsService,
     private accountService: AccountService,
     private cipherFormContainer: CipherFormContainer,
     private premiumUpgradeService: PremiumUpgradePromptService,
@@ -87,8 +80,6 @@ export class OpenAttachmentsComponent implements OnInit {
   }
 
   async ngOnInit(): Promise<void> {
-    this.openAttachmentsInPopout = this.filePopoutUtilsService.showFilePopoutMessage(window);
-
     if (!this.cipherId) {
       return;
     }
@@ -131,12 +122,5 @@ export class OpenAttachmentsComponent implements OnInit {
     }
 
     await this.router.navigate(["/attachments"], { queryParams: { cipherId: this.cipherId } });
-
-    // Open the attachments page in a popout
-    // This is done after the router navigation to ensure that the navigation
-    // is included in the `PopupRouterCacheService` history
-    if (this.openAttachmentsInPopout) {
-      await BrowserPopupUtils.openCurrentPagePopout(window);
-    }
   }
 }
diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.spec.ts b/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.spec.ts
index a322fbc53dd..a956b2fe68b 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.spec.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.spec.ts
@@ -421,29 +421,13 @@ describe("VaultV2Component", () => {
     expect(PremiumUpgradeDialogComponent.open).toHaveBeenCalledTimes(1);
   });
 
-  it("navigateToImport navigates and opens popout if popup is open", fakeAsync(async () => {
-    (BrowserApi.isPopupOpen as jest.Mock).mockResolvedValueOnce(true);
-
+  it("navigateToImport navigates to import route", fakeAsync(async () => {
     const ngRouter = TestBed.inject(Router);
     jest.spyOn(ngRouter, "navigate").mockResolvedValue(true as any);
 
     await component["navigateToImport"]();
 
     expect(ngRouter.navigate).toHaveBeenCalledWith(["/import"]);
-
-    expect(BrowserPopupUtils.openCurrentPagePopout).toHaveBeenCalled();
-  }));
-
-  it("navigateToImport does not popout when popup is not open", fakeAsync(async () => {
-    (BrowserApi.isPopupOpen as jest.Mock).mockResolvedValueOnce(false);
-
-    const ngRouter = TestBed.inject(Router);
-    jest.spyOn(ngRouter, "navigate").mockResolvedValue(true as any);
-
-    await component["navigateToImport"]();
-
-    expect(ngRouter.navigate).toHaveBeenCalledWith(["/import"]);
-    expect(BrowserPopupUtils.openCurrentPagePopout).not.toHaveBeenCalled();
   }));
 
   it("ngOnInit dismisses intro carousel and opens decryption dialog for non-deleted failures", fakeAsync(() => {
diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.ts b/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.ts
index fce084542a9..a5a74eb8ab8 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.ts
@@ -56,8 +56,6 @@ import {
 } from "@bitwarden/vault";
 
 import { CurrentAccountComponent } from "../../../../auth/popup/account-switching/current-account.component";
-import { BrowserApi } from "../../../../platform/browser/browser-api";
-import BrowserPopupUtils from "../../../../platform/browser/browser-popup-utils";
 import { PopOutComponent } from "../../../../platform/popup/components/pop-out.component";
 import { PopupHeaderComponent } from "../../../../platform/popup/layout/popup-header.component";
 import { PopupPageComponent } from "../../../../platform/popup/layout/popup-page.component";
@@ -370,9 +368,6 @@ export class VaultV2Component implements OnInit, OnDestroy {
 
   async navigateToImport() {
     await this.router.navigate(["/import"]);
-    if (await BrowserApi.isPopupOpen()) {
-      await BrowserPopupUtils.openCurrentPagePopout(window);
-    }
   }
 
   async dismissVaultNudgeSpotlight(type: NudgeType) {
diff --git a/apps/browser/src/vault/popup/settings/vault-settings-v2.component.html b/apps/browser/src/vault/popup/settings/vault-settings-v2.component.html
index ad009c7a60b..c84188af863 100644
--- a/apps/browser/src/vault/popup/settings/vault-settings-v2.component.html
+++ b/apps/browser/src/vault/popup/settings/vault-settings-v2.component.html
@@ -13,7 +13,7 @@
       </a>
     </bit-item>
     <bit-item>
-      <button type="button" bit-item-content (click)="import()">
+      <button type="button" bit-item-content (click)="import()" [title]="'popOutNewWindow' | i18n">
         <div class="tw-flex tw-items-center tw-justify-center tw-gap-2">
           <p>{{ "importNoun" | i18n }}</p>
           <span
@@ -25,7 +25,10 @@
             1
           </span>
         </div>
-        <i slot="end" class="bwi bwi-popout" aria-hidden="true"></i>
+        <ng-container slot="end">
+          <span class="tw-sr-only">{{ "popOutNewWindow" | i18n }}</span>
+          <i class="bwi bwi-popout tw-text-muted" aria-hidden="true"></i>
+        </ng-container>
       </button>
     </bit-item>
     <bit-item>
diff --git a/apps/browser/src/vault/popup/settings/vault-settings-v2.component.ts b/apps/browser/src/vault/popup/settings/vault-settings-v2.component.ts
index c1d90d678cb..c35345bd8ab 100644
--- a/apps/browser/src/vault/popup/settings/vault-settings-v2.component.ts
+++ b/apps/browser/src/vault/popup/settings/vault-settings-v2.component.ts
@@ -15,8 +15,6 @@ import { PremiumUpgradePromptService } from "@bitwarden/common/vault/abstraction
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
 import { BadgeComponent, ItemModule, ToastOptions, ToastService } from "@bitwarden/components";
 
-import { BrowserApi } from "../../../platform/browser/browser-api";
-import BrowserPopupUtils from "../../../platform/browser/browser-popup-utils";
 import { PopOutComponent } from "../../../platform/popup/components/pop-out.component";
 import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
 import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.component";
@@ -90,9 +88,6 @@ export class VaultSettingsV2Component implements OnInit, OnDestroy {
 
   async import() {
     await this.router.navigate(["/import"]);
-    if (await BrowserApi.isPopupOpen()) {
-      await BrowserPopupUtils.openCurrentPagePopout(window);
-    }
   }
 
   async sync() {
diff --git a/libs/tools/send/send-ui/src/new-send-dropdown/new-send-dropdown.component.html b/libs/tools/send/send-ui/src/new-send-dropdown/new-send-dropdown.component.html
index fb9b82c44e5..7b966bb0345 100644
--- a/libs/tools/send/send-ui/src/new-send-dropdown/new-send-dropdown.component.html
+++ b/libs/tools/send/send-ui/src/new-send-dropdown/new-send-dropdown.component.html
@@ -7,11 +7,13 @@
     <i class="bwi bwi-file-text" slot="start" aria-hidden="true"></i>
     {{ "sendTypeText" | i18n }}
   </a>
-  <a bitMenuItem (click)="sendFileClick()">
+  <a bitMenuItem (click)="sendFileClick()" [title]="'popOutNewWindow' | i18n">
     <div class="tw-flex tw-items-center tw-gap-2">
       <i class="bwi bwi-file" slot="start" aria-hidden="true"></i>
       {{ "sendTypeFile" | i18n }}
       <app-premium-badge></app-premium-badge>
     </div>
+    <span class="tw-sr-only">{{ "popOutNewWindow" | i18n }}</span>
+    <i class="bwi bwi-popout tw-text-muted" slot="end" aria-hidden="true"></i>
   </a>
 </bit-menu>

From 5c7bba00f3785148e424791f6163a0b1d1327f45 Mon Sep 17 00:00:00 2001
From: Jared <TheWolfBadger@gmail.com>
Date: Thu, 5 Feb 2026 10:58:42 -0500
Subject: [PATCH 26/26] [PM-16694] ac integration page background fill missing
 (#18508)

* Fixing some tech debt before implementing actual fix of implementation

* Adding new components to handle the different routes for the integrations page to make use of bit-tab-nav-bar to follow background-fill UI spec

* Implement organization integrations page with routing and state management

- Added routing for organization integrations including device management, event management, single sign-on, and user provisioning.
- Created OrganizationIntegrationsState to manage integrations and organization data.
- Introduced OrganizationIntegrationsResolver for preloading organization and integration data.
- Updated components to utilize the new state management and resolver.
- Refactored integration routes to follow updated naming conventions.

* Refactor organization integrations components to use signals and observables; enhance async handling in templates and add debug logging

* Enhance organization integrations module with routing updates and state management improvements

- Added OrganizationIntegrationsState for better state management.
- Updated routing to redirect to single sign-on by default.
- Integrated OrganizationIntegrationsResolver for preloading data.
- Refactored components to utilize new state management and improved async handling.

* Refactor SingleSignOnComponent to remove OnInit lifecycle and debug logging

- Simplified SingleSignOnComponent by removing the OnInit implementation.
- Eliminated debug logging for integrations in ngOnInit.
- Cleaned up imports for better readability.

* Refactor WebHeaderComponent to simplify background handling

- Removed the useAltBackground input signal from WebHeaderComponent.
- Updated the HTML template to conditionally apply styles based solely on the child element count of the tabs container.

* Refactor organization integrations components for improved readability and performance

- Updated HTML templates to remove optional chaining for organization properties.
- Removed unnecessary debug logging and comments in the OrganizationIntegrationsResolver.
- Simplified DeviceManagementComponent by eliminating the OnInit lifecycle hook.

* Refactor organization integrations components to use direct state properties

- Updated components to access organization and integrations directly from state instead of using observables.
- Simplified HTML templates by removing async pipes and using direct function calls for better readability.
- Ensured consistent naming conventions for organization and integrations variables across components.

* Enhance WebHeaderComponent by adding bitTypography attribute to the title element for improved styling consistency

* Refactor organization state to use 'undefined' instead of 'null' for organization signal and remove OnInit lifecycle hook from UserProvisioningComponent for cleaner code.

* Refactor EventManagementComponent to remove OnInit lifecycle hook for cleaner code and improved readability.

* Update organization state to set organization value to 'undefined' when null is provided, enhancing state management consistency.

* Update WebHeaderComponent to allow optional title and icon inputs, enhancing flexibility in header configuration.

* Update WebHeaderComponent to allow account property to be nullable, improving type safety and handling of user data.
---
 .../organization-layout.component.html        |   2 +-
 .../layouts/header/web-header.component.html  |   6 +-
 .../layouts/header/web-header.component.ts    |  14 +-
 .../device-management.component.html          |  11 +
 .../device-management.component.ts            |  25 ++
 .../event-management.component.html           |  11 +
 .../event-management.component.ts             |  24 ++
 .../integrations.component.html               |  96 +----
 .../integrations.component.ts                 | 328 +-----------------
 .../integrations.pipe.ts                      |   5 +-
 ...rganization-integrations-routing.module.ts |  17 +-
 .../organization-integrations.module.ts       |  15 +-
 .../organization-integrations.resolver.ts     | 285 +++++++++++++++
 .../organization-integrations.state.ts        |  22 ++
 .../single-sign-on.component.html             |  12 +
 .../single-sign-on.component.ts               |  22 ++
 .../user-provisioning.component.html          |  25 ++
 .../user-provisioning.component.ts            |  26 ++
 18 files changed, 528 insertions(+), 418 deletions(-)
 create mode 100644 bitwarden_license/bit-web/src/app/dirt/organization-integrations/device-management/device-management.component.html
 create mode 100644 bitwarden_license/bit-web/src/app/dirt/organization-integrations/device-management/device-management.component.ts
 create mode 100644 bitwarden_license/bit-web/src/app/dirt/organization-integrations/event-management/event-management.component.html
 create mode 100644 bitwarden_license/bit-web/src/app/dirt/organization-integrations/event-management/event-management.component.ts
 create mode 100644 bitwarden_license/bit-web/src/app/dirt/organization-integrations/organization-integrations.resolver.ts
 create mode 100644 bitwarden_license/bit-web/src/app/dirt/organization-integrations/organization-integrations.state.ts
 create mode 100644 bitwarden_license/bit-web/src/app/dirt/organization-integrations/single-sign-on/single-sign-on.component.html
 create mode 100644 bitwarden_license/bit-web/src/app/dirt/organization-integrations/single-sign-on/single-sign-on.component.ts
 create mode 100644 bitwarden_license/bit-web/src/app/dirt/organization-integrations/user-provisioning/user-provisioning.component.html
 create mode 100644 bitwarden_license/bit-web/src/app/dirt/organization-integrations/user-provisioning/user-provisioning.component.ts

diff --git a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html
index 198cb3a47cd..79cef26042d 100644
--- a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html
+++ b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html
@@ -79,7 +79,7 @@
     <bit-nav-item
       icon="bwi-msp"
       [text]="'integrations' | i18n"
-      route="integrations"
+      route="integrations/single-sign-on"
       *ngIf="integrationPageEnabled$ | async"
     ></bit-nav-item>
     <bit-nav-group
diff --git a/apps/web/src/app/layouts/header/web-header.component.html b/apps/web/src/app/layouts/header/web-header.component.html
index 4b833e771dd..995169e3dc1 100644
--- a/apps/web/src/app/layouts/header/web-header.component.html
+++ b/apps/web/src/app/layouts/header/web-header.component.html
@@ -13,11 +13,11 @@
         bitTypography="h1"
         noMargin
         class="tw-m-0 tw-mr-2 tw-leading-10 tw-flex tw-gap-1"
-        [title]="title || (routeData.titleId | i18n)"
+        [title]="title() || (routeData.titleId | i18n)"
       >
         <div class="tw-truncate">
-          <i *ngIf="icon" class="bwi {{ icon }}" aria-hidden="true"></i>
-          {{ title || (routeData.titleId | i18n) }}
+          <i *ngIf="icon" class="bwi {{ icon() }}" aria-hidden="true"></i>
+          {{ title() || (routeData.titleId | i18n) }}
         </div>
         <div><ng-content select="[slot=title-suffix]"></ng-content></div>
       </h1>
diff --git a/apps/web/src/app/layouts/header/web-header.component.ts b/apps/web/src/app/layouts/header/web-header.component.ts
index 694ee5c4ae9..45ed32e61bb 100644
--- a/apps/web/src/app/layouts/header/web-header.component.ts
+++ b/apps/web/src/app/layouts/header/web-header.component.ts
@@ -1,6 +1,4 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
-import { Component, Input } from "@angular/core";
+import { Component, input, InputSignal } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { map, Observable } from "rxjs";
 
@@ -25,19 +23,15 @@ export class WebHeaderComponent {
   /**
    * Custom title that overrides the route data `titleId`
    */
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() title: string;
+  readonly title: InputSignal<string | undefined> = input();
 
   /**
    * Icon to show before the title
    */
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() icon: string;
+  readonly icon: InputSignal<string | undefined> = input();
 
   protected routeData$: Observable<{ titleId: string }>;
-  protected account$: Observable<User & { id: UserId }>;
+  protected account$: Observable<(User & { id: UserId }) | null>;
   protected canLock$: Observable<boolean>;
   protected selfHosted: boolean;
   protected hostname = location.hostname;
diff --git a/bitwarden_license/bit-web/src/app/dirt/organization-integrations/device-management/device-management.component.html b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/device-management/device-management.component.html
new file mode 100644
index 00000000000..6c04ea87960
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/device-management/device-management.component.html
@@ -0,0 +1,11 @@
+@let integrationsList = integrations();
+
+<section class="tw-mb-9">
+  <h2 bitTypography="h2">
+    {{ "deviceManagement" | i18n }}
+  </h2>
+  <p bitTypography="body1">{{ "deviceManagementDesc" | i18n }}</p>
+  <app-integration-grid
+    [integrations]="integrationsList | filterIntegrations: IntegrationType.DEVICE"
+  ></app-integration-grid>
+</section>
diff --git a/bitwarden_license/bit-web/src/app/dirt/organization-integrations/device-management/device-management.component.ts b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/device-management/device-management.component.ts
new file mode 100644
index 00000000000..18e6dc7e362
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/device-management/device-management.component.ts
@@ -0,0 +1,25 @@
+import { Component } from "@angular/core";
+
+import { IntegrationType } from "@bitwarden/common/enums/integration-type.enum";
+import { SharedModule } from "@bitwarden/web-vault/app/shared";
+
+import { IntegrationGridComponent } from "../integration-grid/integration-grid.component";
+import { FilterIntegrationsPipe } from "../integrations.pipe";
+import { OrganizationIntegrationsState } from "../organization-integrations.state";
+
+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
+@Component({
+  selector: "device-management",
+  templateUrl: "device-management.component.html",
+  imports: [SharedModule, IntegrationGridComponent, FilterIntegrationsPipe],
+})
+export class DeviceManagementComponent {
+  integrations = this.state.integrations;
+
+  constructor(private state: OrganizationIntegrationsState) {}
+
+  get IntegrationType(): typeof IntegrationType {
+    return IntegrationType;
+  }
+}
diff --git a/bitwarden_license/bit-web/src/app/dirt/organization-integrations/event-management/event-management.component.html b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/event-management/event-management.component.html
new file mode 100644
index 00000000000..9a767e52c8b
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/event-management/event-management.component.html
@@ -0,0 +1,11 @@
+@let integrationsList = integrations();
+
+<section class="tw-mb-9">
+  <h2 bitTypography="h2">
+    {{ "eventManagement" | i18n }}
+  </h2>
+  <p bitTypography="body1">{{ "eventManagementDesc" | i18n }}</p>
+  <app-integration-grid
+    [integrations]="integrationsList | filterIntegrations: IntegrationType.EVENT"
+  ></app-integration-grid>
+</section>
diff --git a/bitwarden_license/bit-web/src/app/dirt/organization-integrations/event-management/event-management.component.ts b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/event-management/event-management.component.ts
new file mode 100644
index 00000000000..70b17cabd35
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/event-management/event-management.component.ts
@@ -0,0 +1,24 @@
+import { Component } from "@angular/core";
+
+import { IntegrationType } from "@bitwarden/common/enums/integration-type.enum";
+import { SharedModule } from "@bitwarden/web-vault/app/shared";
+
+import { IntegrationGridComponent } from "../integration-grid/integration-grid.component";
+import { FilterIntegrationsPipe } from "../integrations.pipe";
+import { OrganizationIntegrationsState } from "../organization-integrations.state";
+
+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
+@Component({
+  selector: "event-management",
+  templateUrl: "event-management.component.html",
+  imports: [SharedModule, IntegrationGridComponent, FilterIntegrationsPipe],
+})
+export class EventManagementComponent {
+  integrations = this.state.integrations;
+  constructor(private state: OrganizationIntegrationsState) {}
+
+  get IntegrationType(): typeof IntegrationType {
+    return IntegrationType;
+  }
+}
diff --git a/bitwarden_license/bit-web/src/app/dirt/organization-integrations/integrations.component.html b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/integrations.component.html
index 14f20a0b71c..fbff31f026e 100644
--- a/bitwarden_license/bit-web/src/app/dirt/organization-integrations/integrations.component.html
+++ b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/integrations.component.html
@@ -1,82 +1,18 @@
-<app-header> </app-header>
+@let org = organization();
 
-@let organization = organization$ | async;
+<app-header>
+  @if (org) {
+    <bit-tab-nav-bar slot="tabs">
+      <bit-tab-link route="single-sign-on">{{ "singleSignOn" | i18n }}</bit-tab-link>
+      @if (org.useScim || org.useDirectory) {
+        <bit-tab-link route="user-provisioning">{{ "userProvisioning" | i18n }}</bit-tab-link>
+      }
+      @if (org.useEvents) {
+        <bit-tab-link route="event-management">{{ "eventManagement" | i18n }}</bit-tab-link>
+      }
+      <bit-tab-link route="device-management">{{ "deviceManagement" | i18n }}</bit-tab-link>
+    </bit-tab-nav-bar>
+  }
+</app-header>
 
-@if (organization) {
-  <bit-tab-group [(selectedIndex)]="tabIndex">
-    @if (organization?.useSso) {
-      <bit-tab [label]="'singleSignOn' | i18n">
-        <section class="tw-mb-9">
-          <h2 bitTypography="h2">{{ "singleSignOn" | i18n }}</h2>
-          <p bitTypography="body1">
-            {{ "ssoDescStart" | i18n }}
-            <a bitLink routerLink="../settings/sso" class="tw-lowercase">{{
-              "singleSignOn" | i18n
-            }}</a>
-            {{ "ssoDescEnd" | i18n }}
-          </p>
-          <app-integration-grid
-            [integrations]="integrationsList | filterIntegrations: IntegrationType.SSO"
-          ></app-integration-grid>
-        </section>
-      </bit-tab>
-    }
-
-    @if (organization?.useScim || organization?.useDirectory) {
-      <bit-tab [label]="'userProvisioning' | i18n">
-        @if (organization?.useScim) {
-          <section class="tw-mb-9">
-            <h2 bitTypography="h2">
-              {{ "scimIntegration" | i18n }}
-            </h2>
-            <p bitTypography="body1">
-              {{ "scimIntegrationDescStart" | i18n }}
-              <a bitLink routerLink="../settings/scim">{{ "scimIntegration" | i18n }}</a>
-              {{ "scimIntegrationDescEnd" | i18n }}
-            </p>
-            <app-integration-grid
-              [integrations]="integrationsList | filterIntegrations: IntegrationType.SCIM"
-            ></app-integration-grid>
-          </section>
-        }
-        @if (organization?.useDirectory) {
-          <section class="tw-mb-9">
-            <h2 bitTypography="h2">
-              {{ "bwdc" | i18n }}
-            </h2>
-            <p bitTypography="body1">{{ "bwdcDesc" | i18n }}</p>
-            <app-integration-grid
-              [integrations]="integrationsList | filterIntegrations: IntegrationType.BWDC"
-            ></app-integration-grid>
-          </section>
-        }
-      </bit-tab>
-    }
-
-    @if (organization?.useEvents) {
-      <bit-tab [label]="'eventManagement' | i18n">
-        <section class="tw-mb-9">
-          <h2 bitTypography="h2">
-            {{ "eventManagement" | i18n }}
-          </h2>
-          <p bitTypography="body1">{{ "eventManagementDesc" | i18n }}</p>
-          <app-integration-grid
-            [integrations]="integrationsList | filterIntegrations: IntegrationType.EVENT"
-          ></app-integration-grid>
-        </section>
-      </bit-tab>
-    }
-
-    <bit-tab [label]="'deviceManagement' | i18n">
-      <section class="tw-mb-9">
-        <h2 bitTypography="h2">
-          {{ "deviceManagement" | i18n }}
-        </h2>
-        <p bitTypography="body1">{{ "deviceManagementDesc" | i18n }}</p>
-        <app-integration-grid
-          [integrations]="integrationsList | filterIntegrations: IntegrationType.DEVICE"
-        ></app-integration-grid>
-      </section>
-    </bit-tab>
-  </bit-tab-group>
-}
+<router-outlet></router-outlet>
diff --git a/bitwarden_license/bit-web/src/app/dirt/organization-integrations/integrations.component.ts b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/integrations.component.ts
index 5485410f735..786aa70bfc5 100644
--- a/bitwarden_license/bit-web/src/app/dirt/organization-integrations/integrations.component.ts
+++ b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/integrations.component.ts
@@ -1,336 +1,22 @@
-import { Component, OnDestroy, OnInit } from "@angular/core";
-import { ActivatedRoute } from "@angular/router";
-import { firstValueFrom, Observable, Subject, switchMap, takeUntil, takeWhile } from "rxjs";
+import { Component } from "@angular/core";
 
-import { Integration } from "@bitwarden/bit-common/dirt/organization-integrations/models/integration";
-import { OrganizationIntegrationServiceName } from "@bitwarden/bit-common/dirt/organization-integrations/models/organization-integration-service-type";
-import { OrganizationIntegrationType } from "@bitwarden/bit-common/dirt/organization-integrations/models/organization-integration-type";
-import { OrganizationIntegrationService } from "@bitwarden/bit-common/dirt/organization-integrations/services/organization-integration-service";
-import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
-import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
-import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
-import { getUserId } from "@bitwarden/common/auth/services/account.service";
-import { IntegrationType } from "@bitwarden/common/enums";
-import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
-import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
-import { getById } from "@bitwarden/common/platform/misc";
+import { IntegrationType } from "@bitwarden/common/enums/integration-type.enum";
 import { HeaderModule } from "@bitwarden/web-vault/app/layouts/header/header.module";
 import { SharedModule } from "@bitwarden/web-vault/app/shared";
 
-import { IntegrationGridComponent } from "./integration-grid/integration-grid.component";
-import { FilterIntegrationsPipe } from "./integrations.pipe";
+import { OrganizationIntegrationsState } from "./organization-integrations.state";
 
-// attempted, but because bit-tab-group is not OnPush, caused more issues than it solved
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
   selector: "ac-integrations",
   templateUrl: "./integrations.component.html",
-  imports: [SharedModule, IntegrationGridComponent, HeaderModule, FilterIntegrationsPipe],
+  imports: [SharedModule, HeaderModule],
 })
-export class AdminConsoleIntegrationsComponent implements OnInit, OnDestroy {
-  tabIndex: number = 0;
-  organization$: Observable<Organization> = new Observable<Organization>();
-  isEventManagementForDataDogAndCrowdStrikeEnabled: boolean = false;
-  isEventManagementForHuntressEnabled: boolean = false;
-  private destroy$ = new Subject<void>();
+export class AdminConsoleIntegrationsComponent {
+  organization = this.state.organization;
 
-  // initialize the integrations list with default integrations
-  integrationsList: Integration[] = [
-    {
-      name: "AD FS",
-      linkURL: "https://bitwarden.com/help/saml-adfs/",
-      image: "../../../../../../../images/integrations/azure-active-directory.svg",
-      type: IntegrationType.SSO,
-    },
-    {
-      name: "Auth0",
-      linkURL: "https://bitwarden.com/help/saml-auth0/",
-      image: "../../../../../../../images/integrations/logo-auth0-badge-color.svg",
-      type: IntegrationType.SSO,
-    },
-    {
-      name: "AWS",
-      linkURL: "https://bitwarden.com/help/saml-aws/",
-      image: "../../../../../../../images/integrations/aws-color.svg",
-      imageDarkMode: "../../../../../../../images/integrations/aws-darkmode.svg",
-      type: IntegrationType.SSO,
-    },
-    {
-      name: "Microsoft Entra ID",
-      linkURL: "https://bitwarden.com/help/saml-azure/",
-      image: "../../../../../../../images/integrations/logo-microsoft-entra-id-color.svg",
-      type: IntegrationType.SSO,
-    },
-    {
-      name: "Duo",
-      linkURL: "https://bitwarden.com/help/saml-duo/",
-      image: "../../../../../../../images/integrations/logo-duo-color.svg",
-      type: IntegrationType.SSO,
-    },
-    {
-      name: "Google",
-      linkURL: "https://bitwarden.com/help/saml-google/",
-      image: "../../../../../../../images/integrations/logo-google-badge-color.svg",
-      type: IntegrationType.SSO,
-    },
-    {
-      name: "JumpCloud",
-      linkURL: "https://bitwarden.com/help/saml-jumpcloud/",
-      image: "../../../../../../../images/integrations/logo-jumpcloud-badge-color.svg",
-      imageDarkMode: "../../../../../../../images/integrations/jumpcloud-darkmode.svg",
-      type: IntegrationType.SSO,
-    },
-    {
-      name: "KeyCloak",
-      linkURL: "https://bitwarden.com/help/saml-keycloak/",
-      image: "../../../../../../../images/integrations/logo-keycloak-icon.svg",
-      type: IntegrationType.SSO,
-    },
-    {
-      name: "Okta",
-      linkURL: "https://bitwarden.com/help/saml-okta/",
-      image: "../../../../../../../images/integrations/logo-okta-symbol-black.svg",
-      imageDarkMode: "../../../../../../../images/integrations/okta-darkmode.svg",
-      type: IntegrationType.SSO,
-    },
-    {
-      name: "OneLogin",
-      linkURL: "https://bitwarden.com/help/saml-onelogin/",
-      image: "../../../../../../../images/integrations/logo-onelogin-badge-color.svg",
-      imageDarkMode: "../../../../../../../images/integrations/onelogin-darkmode.svg",
-      type: IntegrationType.SSO,
-    },
-    {
-      name: "PingFederate",
-      linkURL: "https://bitwarden.com/help/saml-pingfederate/",
-      image: "../../../../../../../images/integrations/logo-ping-identity-badge-color.svg",
-      type: IntegrationType.SSO,
-    },
-    {
-      name: "Microsoft Entra ID",
-      linkURL: "https://bitwarden.com/help/microsoft-entra-id-scim-integration/",
-      image: "../../../../../../../images/integrations/logo-microsoft-entra-id-color.svg",
-      type: IntegrationType.SCIM,
-    },
-    {
-      name: "Okta",
-      linkURL: "https://bitwarden.com/help/okta-scim-integration/",
-      image: "../../../../../../../images/integrations/logo-okta-symbol-black.svg",
-      imageDarkMode: "../../../../../../../images/integrations/okta-darkmode.svg",
-      type: IntegrationType.SCIM,
-    },
-    {
-      name: "OneLogin",
-      linkURL: "https://bitwarden.com/help/onelogin-scim-integration/",
-      image: "../../../../../../../images/integrations/logo-onelogin-badge-color.svg",
-      imageDarkMode: "../../../../../../../images/integrations/onelogin-darkmode.svg",
-      type: IntegrationType.SCIM,
-    },
-    {
-      name: "JumpCloud",
-      linkURL: "https://bitwarden.com/help/jumpcloud-scim-integration/",
-      image: "../../../../../../../images/integrations/logo-jumpcloud-badge-color.svg",
-      imageDarkMode: "../../../../../../../images/integrations/jumpcloud-darkmode.svg",
-      type: IntegrationType.SCIM,
-    },
-    {
-      name: "Ping Identity",
-      linkURL: "https://bitwarden.com/help/ping-identity-scim-integration/",
-      image: "../../../../../../../images/integrations/logo-ping-identity-badge-color.svg",
-      type: IntegrationType.SCIM,
-    },
-    {
-      name: "Active Directory",
-      linkURL: "https://bitwarden.com/help/ldap-directory/",
-      image: "../../../../../../../images/integrations/azure-active-directory.svg",
-      type: IntegrationType.BWDC,
-    },
-    {
-      name: "Microsoft Entra ID",
-      linkURL: "https://bitwarden.com/help/microsoft-entra-id/",
-      image: "../../../../../../../images/integrations/logo-microsoft-entra-id-color.svg",
-      type: IntegrationType.BWDC,
-    },
-    {
-      name: "Google Workspace",
-      linkURL: "https://bitwarden.com/help/workspace-directory/",
-      image: "../../../../../../../images/integrations/logo-google-badge-color.svg",
-      type: IntegrationType.BWDC,
-    },
-    {
-      name: "Okta",
-      linkURL: "https://bitwarden.com/help/okta-directory/",
-      image: "../../../../../../../images/integrations/logo-okta-symbol-black.svg",
-      imageDarkMode: "../../../../../../../images/integrations/okta-darkmode.svg",
-      type: IntegrationType.BWDC,
-    },
-    {
-      name: "OneLogin",
-      linkURL: "https://bitwarden.com/help/onelogin-directory/",
-      image: "../../../../../../../images/integrations/logo-onelogin-badge-color.svg",
-      imageDarkMode: "../../../../../../../images/integrations/onelogin-darkmode.svg",
-      type: IntegrationType.BWDC,
-    },
-    {
-      name: "Splunk",
-      linkURL: "https://bitwarden.com/help/splunk-siem/",
-      image: "../../../../../../../images/integrations/logo-splunk-black.svg",
-      imageDarkMode: "../../../../../../../images/integrations/splunk-darkmode.svg",
-      type: IntegrationType.EVENT,
-    },
-    {
-      name: "Microsoft Sentinel",
-      linkURL: "https://bitwarden.com/help/microsoft-sentinel-siem/",
-      image: "../../../../../../../images/integrations/logo-microsoft-sentinel-color.svg",
-      type: IntegrationType.EVENT,
-    },
-    {
-      name: "Rapid7",
-      linkURL: "https://bitwarden.com/help/rapid7-siem/",
-      image: "../../../../../../../images/integrations/logo-rapid7-black.svg",
-      imageDarkMode: "../../../../../../../images/integrations/rapid7-darkmode.svg",
-      type: IntegrationType.EVENT,
-    },
-    {
-      name: "Elastic",
-      linkURL: "https://bitwarden.com/help/elastic-siem/",
-      image: "../../../../../../../images/integrations/logo-elastic-badge-color.svg",
-      type: IntegrationType.EVENT,
-    },
-    {
-      name: "Panther",
-      linkURL: "https://bitwarden.com/help/panther-siem/",
-      image: "../../../../../../../images/integrations/logo-panther-round-color.svg",
-      type: IntegrationType.EVENT,
-    },
-    {
-      name: "Sumo Logic",
-      linkURL: "https://bitwarden.com/help/sumo-logic-siem/",
-      image: "../../../../../../../images/integrations/logo-sumo-logic-siem.svg",
-      imageDarkMode: "../../../../../../../images/integrations/logo-sumo-logic-siem-darkmode.svg",
-      type: IntegrationType.EVENT,
-      newBadgeExpiration: "2025-12-31",
-    },
-    {
-      name: "Microsoft Intune",
-      linkURL: "https://bitwarden.com/help/deploy-browser-extensions-with-intune/",
-      image: "../../../../../../../images/integrations/logo-microsoft-intune-color.svg",
-      type: IntegrationType.DEVICE,
-    },
-  ];
-
-  async ngOnInit() {
-    const userId = await firstValueFrom(getUserId(this.accountService.activeAccount$));
-    if (!userId) {
-      throw new Error("User ID not found");
-    }
-
-    this.organization$ = this.route.params.pipe(
-      switchMap((params) =>
-        this.organizationService.organizations$(userId).pipe(
-          getById(params.organizationId),
-          // Filter out undefined values
-          takeWhile((org: Organization | undefined) => !!org),
-        ),
-      ),
-    );
-
-    // Sets the organization ID which also loads the integrations$
-    this.organization$
-      .pipe(
-        switchMap((org) => this.organizationIntegrationService.setOrganizationId(org.id)),
-        takeUntil(this.destroy$),
-      )
-      .subscribe();
-  }
-
-  constructor(
-    private route: ActivatedRoute,
-    private organizationService: OrganizationService,
-    private accountService: AccountService,
-    private configService: ConfigService,
-    private organizationIntegrationService: OrganizationIntegrationService,
-  ) {
-    this.configService
-      .getFeatureFlag$(FeatureFlag.EventManagementForDataDogAndCrowdStrike)
-      .pipe(takeUntil(this.destroy$))
-      .subscribe((isEnabled) => {
-        this.isEventManagementForDataDogAndCrowdStrikeEnabled = isEnabled;
-      });
-
-    this.configService
-      .getFeatureFlag$(FeatureFlag.EventManagementForHuntress)
-      .pipe(takeUntil(this.destroy$))
-      .subscribe((isEnabled) => {
-        this.isEventManagementForHuntressEnabled = isEnabled;
-      });
-
-    // Add the new event based items to the list
-    if (this.isEventManagementForDataDogAndCrowdStrikeEnabled) {
-      const crowdstrikeIntegration: Integration = {
-        name: OrganizationIntegrationServiceName.CrowdStrike,
-        linkURL: "https://bitwarden.com/help/crowdstrike-siem/",
-        image: "../../../../../../../images/integrations/logo-crowdstrike-black.svg",
-        type: IntegrationType.EVENT,
-        description: "crowdstrikeEventIntegrationDesc",
-        canSetupConnection: true,
-        integrationType: OrganizationIntegrationType.Hec,
-      };
-
-      this.integrationsList.push(crowdstrikeIntegration);
-
-      const datadogIntegration: Integration = {
-        name: OrganizationIntegrationServiceName.Datadog,
-        linkURL: "https://bitwarden.com/help/datadog-siem/",
-        image: "../../../../../../../images/integrations/logo-datadog-color.svg",
-        type: IntegrationType.EVENT,
-        description: "datadogEventIntegrationDesc",
-        canSetupConnection: true,
-        integrationType: OrganizationIntegrationType.Datadog,
-      };
-
-      this.integrationsList.push(datadogIntegration);
-    }
-
-    // Add Huntress SIEM integration (separate feature flag)
-    if (this.isEventManagementForHuntressEnabled) {
-      const huntressIntegration: Integration = {
-        name: OrganizationIntegrationServiceName.Huntress,
-        linkURL: "https://bitwarden.com/help/huntress-siem/",
-        image: "../../../../../../../images/integrations/logo-huntress-siem.svg",
-        type: IntegrationType.EVENT,
-        description: "huntressEventIntegrationDesc",
-        canSetupConnection: true,
-        integrationType: OrganizationIntegrationType.Hec,
-      };
-
-      this.integrationsList.push(huntressIntegration);
-    }
-
-    // For all existing event based configurations loop through and assign the
-    // organizationIntegration for the correct services.
-    this.organizationIntegrationService.integrations$
-      .pipe(takeUntil(this.destroy$))
-      .subscribe((integrations) => {
-        // reset all event based integrations to null first - in case one was deleted
-        this.integrationsList.forEach((i) => {
-          i.organizationIntegration = null;
-        });
-
-        integrations.forEach((integration) => {
-          const item = this.integrationsList.find((i) => i.name === integration.serviceName);
-          if (item) {
-            item.organizationIntegration = integration;
-          }
-        });
-      });
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
+  constructor(private state: OrganizationIntegrationsState) {}
 
   // use in the view
   get IntegrationType(): typeof IntegrationType {
diff --git a/bitwarden_license/bit-web/src/app/dirt/organization-integrations/integrations.pipe.ts b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/integrations.pipe.ts
index 7a420ade4b5..10ee251a921 100644
--- a/bitwarden_license/bit-web/src/app/dirt/organization-integrations/integrations.pipe.ts
+++ b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/integrations.pipe.ts
@@ -7,7 +7,10 @@ import { IntegrationType } from "@bitwarden/common/enums";
   name: "filterIntegrations",
 })
 export class FilterIntegrationsPipe implements PipeTransform {
-  transform(integrations: Integration[], type: IntegrationType): Integration[] {
+  transform(integrations: Integration[] | null | undefined, type: IntegrationType): Integration[] {
+    if (!integrations) {
+      return [];
+    }
     return integrations.filter((integration) => integration.type === type);
   }
 }
diff --git a/bitwarden_license/bit-web/src/app/dirt/organization-integrations/organization-integrations-routing.module.ts b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/organization-integrations-routing.module.ts
index 1667689b186..626fc5dee88 100644
--- a/bitwarden_license/bit-web/src/app/dirt/organization-integrations/organization-integrations-routing.module.ts
+++ b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/organization-integrations-routing.module.ts
@@ -3,16 +3,31 @@ import { RouterModule, Routes } from "@angular/router";
 
 import { organizationPermissionsGuard } from "@bitwarden/web-vault/app/admin-console/organizations/guards/org-permissions.guard";
 
+import { DeviceManagementComponent } from "./device-management/device-management.component";
+import { EventManagementComponent } from "./event-management/event-management.component";
 import { AdminConsoleIntegrationsComponent } from "./integrations.component";
+import { OrganizationIntegrationsResolver } from "./organization-integrations.resolver";
+import { OrganizationIntegrationsState } from "./organization-integrations.state";
+import { SingleSignOnComponent } from "./single-sign-on/single-sign-on.component";
+import { UserProvisioningComponent } from "./user-provisioning/user-provisioning.component";
 
 const routes: Routes = [
   {
     path: "",
     canActivate: [organizationPermissionsGuard((org) => org.canAccessIntegrations)],
-    component: AdminConsoleIntegrationsComponent,
     data: {
       titleId: "integrations",
     },
+    component: AdminConsoleIntegrationsComponent,
+    providers: [OrganizationIntegrationsState, OrganizationIntegrationsResolver],
+    resolve: { integrations: OrganizationIntegrationsResolver },
+    children: [
+      { path: "", redirectTo: "single-sign-on", pathMatch: "full" },
+      { path: "single-sign-on", component: SingleSignOnComponent },
+      { path: "user-provisioning", component: UserProvisioningComponent },
+      { path: "event-management", component: EventManagementComponent },
+      { path: "device-management", component: DeviceManagementComponent },
+    ],
   },
 ];
 
diff --git a/bitwarden_license/bit-web/src/app/dirt/organization-integrations/organization-integrations.module.ts b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/organization-integrations.module.ts
index 789ae548521..33f389a92a9 100644
--- a/bitwarden_license/bit-web/src/app/dirt/organization-integrations/organization-integrations.module.ts
+++ b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/organization-integrations.module.ts
@@ -1,17 +1,30 @@
 import { NgModule } from "@angular/core";
 
+import { DeviceManagementComponent } from "@bitwarden/angular/auth/device-management/device-management.component";
 import { OrganizationIntegrationApiService } from "@bitwarden/bit-common/dirt/organization-integrations/services/organization-integration-api.service";
 import { OrganizationIntegrationConfigurationApiService } from "@bitwarden/bit-common/dirt/organization-integrations/services/organization-integration-configuration-api.service";
 import { OrganizationIntegrationService } from "@bitwarden/bit-common/dirt/organization-integrations/services/organization-integration-service";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { safeProvider } from "@bitwarden/ui-common";
 
+import { EventManagementComponent } from "./event-management/event-management.component";
 import { AdminConsoleIntegrationsComponent } from "./integrations.component";
 import { OrganizationIntegrationsRoutingModule } from "./organization-integrations-routing.module";
+import { OrganizationIntegrationsResolver } from "./organization-integrations.resolver";
+import { SingleSignOnComponent } from "./single-sign-on/single-sign-on.component";
+import { UserProvisioningComponent } from "./user-provisioning/user-provisioning.component";
 
 @NgModule({
-  imports: [AdminConsoleIntegrationsComponent, OrganizationIntegrationsRoutingModule],
+  imports: [
+    AdminConsoleIntegrationsComponent,
+    OrganizationIntegrationsRoutingModule,
+    SingleSignOnComponent,
+    UserProvisioningComponent,
+    DeviceManagementComponent,
+    EventManagementComponent,
+  ],
   providers: [
+    OrganizationIntegrationsResolver,
     safeProvider({
       provide: OrganizationIntegrationService,
       useClass: OrganizationIntegrationService,
diff --git a/bitwarden_license/bit-web/src/app/dirt/organization-integrations/organization-integrations.resolver.ts b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/organization-integrations.resolver.ts
new file mode 100644
index 00000000000..39bd0cc1dcc
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/organization-integrations.resolver.ts
@@ -0,0 +1,285 @@
+import { Injectable } from "@angular/core";
+import { ActivatedRouteSnapshot, Resolve } from "@angular/router";
+import { firstValueFrom } from "rxjs";
+import { take, takeWhile } from "rxjs/operators";
+
+import { Integration } from "@bitwarden/bit-common/dirt/organization-integrations/models/integration";
+import { OrganizationIntegrationServiceName } from "@bitwarden/bit-common/dirt/organization-integrations/models/organization-integration-service-type";
+import { OrganizationIntegrationType } from "@bitwarden/bit-common/dirt/organization-integrations/models/organization-integration-type";
+import { OrganizationIntegrationService } from "@bitwarden/bit-common/dirt/organization-integrations/services/organization-integration-service";
+import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { getUserId } from "@bitwarden/common/auth/services/account.service";
+import { IntegrationType } from "@bitwarden/common/enums";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+import { getById } from "@bitwarden/common/platform/misc";
+
+import { OrganizationIntegrationsState } from "./organization-integrations.state";
+
+@Injectable()
+export class OrganizationIntegrationsResolver implements Resolve<boolean> {
+  constructor(
+    private organizationService: OrganizationService,
+    private accountService: AccountService,
+    private configService: ConfigService,
+    private organizationIntegrationService: OrganizationIntegrationService,
+    private state: OrganizationIntegrationsState,
+  ) {}
+
+  async resolve(route: ActivatedRouteSnapshot): Promise<boolean> {
+    const userId = await firstValueFrom(getUserId(this.accountService.activeAccount$));
+
+    if (!userId) {
+      throw new Error("User ID not found");
+    }
+
+    const orgId = route.paramMap.get("organizationId")!;
+    const org = await firstValueFrom(
+      this.organizationService.organizations$(userId).pipe(getById(orgId), takeWhile(Boolean)),
+    );
+
+    this.state.setOrganization(org);
+
+    await firstValueFrom(this.organizationIntegrationService.setOrganizationId(org.id));
+
+    const integrations: Integration[] = [
+      {
+        name: "AD FS",
+        linkURL: "https://bitwarden.com/help/saml-adfs/",
+        image: "../../../../../../../images/integrations/azure-active-directory.svg",
+        type: IntegrationType.SSO,
+      },
+      {
+        name: "Auth0",
+        linkURL: "https://bitwarden.com/help/saml-auth0/",
+        image: "../../../../../../../images/integrations/logo-auth0-badge-color.svg",
+        type: IntegrationType.SSO,
+      },
+      {
+        name: "AWS",
+        linkURL: "https://bitwarden.com/help/saml-aws/",
+        image: "../../../../../../../images/integrations/aws-color.svg",
+        imageDarkMode: "../../../../../../../images/integrations/aws-darkmode.svg",
+        type: IntegrationType.SSO,
+      },
+      {
+        name: "Microsoft Entra ID",
+        linkURL: "https://bitwarden.com/help/saml-azure/",
+        image: "../../../../../../../images/integrations/logo-microsoft-entra-id-color.svg",
+        type: IntegrationType.SSO,
+      },
+      {
+        name: "Duo",
+        linkURL: "https://bitwarden.com/help/saml-duo/",
+        image: "../../../../../../../images/integrations/logo-duo-color.svg",
+        type: IntegrationType.SSO,
+      },
+      {
+        name: "Google",
+        linkURL: "https://bitwarden.com/help/saml-google/",
+        image: "../../../../../../../images/integrations/logo-google-badge-color.svg",
+        type: IntegrationType.SSO,
+      },
+      {
+        name: "JumpCloud",
+        linkURL: "https://bitwarden.com/help/saml-jumpcloud/",
+        image: "../../../../../../../images/integrations/logo-jumpcloud-badge-color.svg",
+        imageDarkMode: "../../../../../../../images/integrations/jumpcloud-darkmode.svg",
+        type: IntegrationType.SSO,
+      },
+      {
+        name: "KeyCloak",
+        linkURL: "https://bitwarden.com/help/saml-keycloak/",
+        image: "../../../../../../../images/integrations/logo-keycloak-icon.svg",
+        type: IntegrationType.SSO,
+      },
+      {
+        name: "Okta",
+        linkURL: "https://bitwarden.com/help/saml-okta/",
+        image: "../../../../../../../images/integrations/logo-okta-symbol-black.svg",
+        imageDarkMode: "../../../../../../../images/integrations/okta-darkmode.svg",
+        type: IntegrationType.SSO,
+      },
+      {
+        name: "OneLogin",
+        linkURL: "https://bitwarden.com/help/saml-onelogin/",
+        image: "../../../../../../../images/integrations/logo-onelogin-badge-color.svg",
+        imageDarkMode: "../../../../../../../images/integrations/onelogin-darkmode.svg",
+        type: IntegrationType.SSO,
+      },
+      {
+        name: "PingFederate",
+        linkURL: "https://bitwarden.com/help/saml-pingfederate/",
+        image: "../../../../../../../images/integrations/logo-ping-identity-badge-color.svg",
+        type: IntegrationType.SSO,
+      },
+      {
+        name: "Microsoft Entra ID",
+        linkURL: "https://bitwarden.com/help/microsoft-entra-id-scim-integration/",
+        image: "../../../../../../../images/integrations/logo-microsoft-entra-id-color.svg",
+        type: IntegrationType.SCIM,
+      },
+      {
+        name: "Okta",
+        linkURL: "https://bitwarden.com/help/okta-scim-integration/",
+        image: "../../../../../../../images/integrations/logo-okta-symbol-black.svg",
+        imageDarkMode: "../../../../../../../images/integrations/okta-darkmode.svg",
+        type: IntegrationType.SCIM,
+      },
+      {
+        name: "OneLogin",
+        linkURL: "https://bitwarden.com/help/onelogin-scim-integration/",
+        image: "../../../../../../../images/integrations/logo-onelogin-badge-color.svg",
+        imageDarkMode: "../../../../../../../images/integrations/onelogin-darkmode.svg",
+        type: IntegrationType.SCIM,
+      },
+      {
+        name: "JumpCloud",
+        linkURL: "https://bitwarden.com/help/jumpcloud-scim-integration/",
+        image: "../../../../../../../images/integrations/logo-jumpcloud-badge-color.svg",
+        imageDarkMode: "../../../../../../../images/integrations/jumpcloud-darkmode.svg",
+        type: IntegrationType.SCIM,
+      },
+      {
+        name: "Ping Identity",
+        linkURL: "https://bitwarden.com/help/ping-identity-scim-integration/",
+        image: "../../../../../../../images/integrations/logo-ping-identity-badge-color.svg",
+        type: IntegrationType.SCIM,
+      },
+      {
+        name: "Active Directory",
+        linkURL: "https://bitwarden.com/help/ldap-directory/",
+        image: "../../../../../../../images/integrations/azure-active-directory.svg",
+        type: IntegrationType.BWDC,
+      },
+      {
+        name: "Microsoft Entra ID",
+        linkURL: "https://bitwarden.com/help/microsoft-entra-id/",
+        image: "../../../../../../../images/integrations/logo-microsoft-entra-id-color.svg",
+        type: IntegrationType.BWDC,
+      },
+      {
+        name: "Google Workspace",
+        linkURL: "https://bitwarden.com/help/workspace-directory/",
+        image: "../../../../../../../images/integrations/logo-google-badge-color.svg",
+        type: IntegrationType.BWDC,
+      },
+      {
+        name: "Okta",
+        linkURL: "https://bitwarden.com/help/okta-directory/",
+        image: "../../../../../../../images/integrations/logo-okta-symbol-black.svg",
+        imageDarkMode: "../../../../../../../images/integrations/okta-darkmode.svg",
+        type: IntegrationType.BWDC,
+      },
+      {
+        name: "OneLogin",
+        linkURL: "https://bitwarden.com/help/onelogin-directory/",
+        image: "../../../../../../../images/integrations/logo-onelogin-badge-color.svg",
+        imageDarkMode: "../../../../../../../images/integrations/onelogin-darkmode.svg",
+        type: IntegrationType.BWDC,
+      },
+      {
+        name: "Splunk",
+        linkURL: "https://bitwarden.com/help/splunk-siem/",
+        image: "../../../../../../../images/integrations/logo-splunk-black.svg",
+        imageDarkMode: "../../../../../../../images/integrations/splunk-darkmode.svg",
+        type: IntegrationType.EVENT,
+      },
+      {
+        name: "Microsoft Sentinel",
+        linkURL: "https://bitwarden.com/help/microsoft-sentinel-siem/",
+        image: "../../../../../../../images/integrations/logo-microsoft-sentinel-color.svg",
+        type: IntegrationType.EVENT,
+      },
+      {
+        name: "Rapid7",
+        linkURL: "https://bitwarden.com/help/rapid7-siem/",
+        image: "../../../../../../../images/integrations/logo-rapid7-black.svg",
+        imageDarkMode: "../../../../../../../images/integrations/rapid7-darkmode.svg",
+        type: IntegrationType.EVENT,
+      },
+      {
+        name: "Elastic",
+        linkURL: "https://bitwarden.com/help/elastic-siem/",
+        image: "../../../../../../../images/integrations/logo-elastic-badge-color.svg",
+        type: IntegrationType.EVENT,
+      },
+      {
+        name: "Panther",
+        linkURL: "https://bitwarden.com/help/panther-siem/",
+        image: "../../../../../../../images/integrations/logo-panther-round-color.svg",
+        type: IntegrationType.EVENT,
+      },
+      {
+        name: "Sumo Logic",
+        linkURL: "https://bitwarden.com/help/sumo-logic-siem/",
+        image: "../../../../../../../images/integrations/logo-sumo-logic-siem.svg",
+        imageDarkMode: "../../../../../../../images/integrations/logo-sumo-logic-siem-darkmode.svg",
+        type: IntegrationType.EVENT,
+        newBadgeExpiration: "2025-12-31",
+      },
+      {
+        name: "Microsoft Intune",
+        linkURL: "https://bitwarden.com/help/deploy-browser-extensions-with-intune/",
+        image: "../../../../../../../images/integrations/logo-microsoft-intune-color.svg",
+        type: IntegrationType.DEVICE,
+      },
+    ];
+
+    const featureEnabled = await firstValueFrom(
+      this.configService.getFeatureFlag$(FeatureFlag.EventManagementForDataDogAndCrowdStrike),
+    );
+
+    if (featureEnabled) {
+      integrations.push(
+        {
+          name: OrganizationIntegrationServiceName.CrowdStrike,
+          linkURL: "https://bitwarden.com/help/crowdstrike-siem/",
+          image: "../../../../../../../images/integrations/logo-crowdstrike-black.svg",
+          type: IntegrationType.EVENT,
+          canSetupConnection: true,
+          integrationType: OrganizationIntegrationType.Hec,
+        },
+        {
+          name: OrganizationIntegrationServiceName.Datadog,
+          linkURL: "https://bitwarden.com/help/datadog-siem/",
+          image: "../../../../../../../images/integrations/logo-datadog-color.svg",
+          type: IntegrationType.EVENT,
+          canSetupConnection: true,
+          integrationType: OrganizationIntegrationType.Datadog,
+        },
+      );
+    }
+
+    // Add Huntress SIEM integration (separate feature flag)
+    const huntressFeatureEnabled = await firstValueFrom(
+      this.configService.getFeatureFlag$(FeatureFlag.EventManagementForHuntress),
+    );
+
+    if (huntressFeatureEnabled) {
+      integrations.push({
+        name: OrganizationIntegrationServiceName.Huntress,
+        linkURL: "https://bitwarden.com/help/huntress-siem/",
+        image: "../../../../../../../images/integrations/logo-huntress-siem.svg",
+        type: IntegrationType.EVENT,
+        description: "huntressEventIntegrationDesc",
+        canSetupConnection: true,
+        integrationType: OrganizationIntegrationType.Hec,
+      });
+    }
+
+    const orgIntegrations = await firstValueFrom(
+      this.organizationIntegrationService.integrations$.pipe(take(1)),
+    );
+
+    const merged = integrations.map((i) => ({
+      ...i,
+      organizationIntegration: orgIntegrations.find((o) => o.serviceName === i.name) ?? null,
+    }));
+
+    this.state.setIntegrations(merged);
+
+    return true;
+  }
+}
diff --git a/bitwarden_license/bit-web/src/app/dirt/organization-integrations/organization-integrations.state.ts b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/organization-integrations.state.ts
new file mode 100644
index 00000000000..5e7e6a78ba4
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/organization-integrations.state.ts
@@ -0,0 +1,22 @@
+import { Injectable, signal } from "@angular/core";
+
+import { Integration } from "@bitwarden/bit-common/dirt/organization-integrations/models/integration";
+import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
+
+@Injectable()
+export class OrganizationIntegrationsState {
+  private readonly _integrations = signal<Integration[]>([]);
+  private readonly _organization = signal<Organization | undefined>(undefined);
+
+  // Signals
+  integrations = this._integrations.asReadonly();
+  organization = this._organization.asReadonly();
+
+  setOrganization(val: Organization | null) {
+    this._organization.set(val ?? undefined);
+  }
+
+  setIntegrations(val: Integration[]) {
+    this._integrations.set(val);
+  }
+}
diff --git a/bitwarden_license/bit-web/src/app/dirt/organization-integrations/single-sign-on/single-sign-on.component.html b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/single-sign-on/single-sign-on.component.html
new file mode 100644
index 00000000000..ca5ed9ee30c
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/single-sign-on/single-sign-on.component.html
@@ -0,0 +1,12 @@
+@let integrationsList = integrations();
+<section class="tw-mb-9">
+  <h2 bitTypography="h2">{{ "singleSignOn" | i18n }}</h2>
+  <p bitTypography="body1">
+    {{ "ssoDescStart" | i18n }}
+    <a bitLink routerLink="../settings/sso" class="tw-lowercase">{{ "singleSignOn" | i18n }}</a>
+    {{ "ssoDescEnd" | i18n }}
+  </p>
+  <app-integration-grid
+    [integrations]="integrationsList | filterIntegrations: IntegrationType.SSO"
+  ></app-integration-grid>
+</section>
diff --git a/bitwarden_license/bit-web/src/app/dirt/organization-integrations/single-sign-on/single-sign-on.component.ts b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/single-sign-on/single-sign-on.component.ts
new file mode 100644
index 00000000000..d0d2a1666f2
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/single-sign-on/single-sign-on.component.ts
@@ -0,0 +1,22 @@
+import { Component } from "@angular/core";
+
+import { IntegrationType } from "@bitwarden/common/enums/integration-type.enum";
+import { SharedModule } from "@bitwarden/web-vault/app/shared";
+
+import { IntegrationGridComponent } from "../integration-grid/integration-grid.component";
+import { FilterIntegrationsPipe } from "../integrations.pipe";
+import { OrganizationIntegrationsState } from "../organization-integrations.state";
+
+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
+@Component({
+  selector: "single-sign-on",
+  templateUrl: "single-sign-on.component.html",
+  imports: [SharedModule, IntegrationGridComponent, FilterIntegrationsPipe],
+})
+export class SingleSignOnComponent {
+  integrations = this.state.integrations;
+  IntegrationType = IntegrationType;
+
+  constructor(private state: OrganizationIntegrationsState) {}
+}
diff --git a/bitwarden_license/bit-web/src/app/dirt/organization-integrations/user-provisioning/user-provisioning.component.html b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/user-provisioning/user-provisioning.component.html
new file mode 100644
index 00000000000..a254f334e21
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/user-provisioning/user-provisioning.component.html
@@ -0,0 +1,25 @@
+@let org = organization();
+@let integrationsList = integrations();
+
+<section class="tw-mb-9" *ngIf="org?.useScim">
+  <h2 bitTypography="h2">
+    {{ "scimIntegration" | i18n }}
+  </h2>
+  <p bitTypography="body1">
+    {{ "scimIntegrationDescStart" | i18n }}
+    <a bitLink routerLink="../settings/scim">{{ "scimIntegration" | i18n }}</a>
+    {{ "scimIntegrationDescEnd" | i18n }}
+  </p>
+  <app-integration-grid
+    [integrations]="integrationsList | filterIntegrations: IntegrationType.SCIM"
+  ></app-integration-grid>
+</section>
+<section class="tw-mb-9" *ngIf="org?.useDirectory">
+  <h2 bitTypography="h2">
+    {{ "bwdc" | i18n }}
+  </h2>
+  <p bitTypography="body1">{{ "bwdcDesc" | i18n }}</p>
+  <app-integration-grid
+    [integrations]="integrationsList | filterIntegrations: IntegrationType.BWDC"
+  ></app-integration-grid>
+</section>
diff --git a/bitwarden_license/bit-web/src/app/dirt/organization-integrations/user-provisioning/user-provisioning.component.ts b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/user-provisioning/user-provisioning.component.ts
new file mode 100644
index 00000000000..f484674d224
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/dirt/organization-integrations/user-provisioning/user-provisioning.component.ts
@@ -0,0 +1,26 @@
+import { Component } from "@angular/core";
+
+import { IntegrationType } from "@bitwarden/common/enums/integration-type.enum";
+import { SharedModule } from "@bitwarden/web-vault/app/shared";
+
+import { IntegrationGridComponent } from "../integration-grid/integration-grid.component";
+import { FilterIntegrationsPipe } from "../integrations.pipe";
+import { OrganizationIntegrationsState } from "../organization-integrations.state";
+
+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
+@Component({
+  selector: "user-provisioning",
+  templateUrl: "user-provisioning.component.html",
+  imports: [SharedModule, IntegrationGridComponent, FilterIntegrationsPipe],
+})
+export class UserProvisioningComponent {
+  organization = this.state.organization;
+  integrations = this.state.integrations;
+
+  constructor(private state: OrganizationIntegrationsState) {}
+
+  get IntegrationType(): typeof IntegrationType {
+    return IntegrationType;
+  }
+}