From 94d94875475288de257b7a311ff0a1f577e8d1e6 Mon Sep 17 00:00:00 2001
From: Andy Pixley <3723676+pixman20@users.noreply.github.com>
Date: Tue, 15 Apr 2025 12:31:08 -0400
Subject: [PATCH 01/36] [BRE-777] Fixing output to match what's in gh-actions
 (#14292)

---
 .github/workflows/deploy-web.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/deploy-web.yml b/.github/workflows/deploy-web.yml
index 9b890491282..1cde8dd636a 100644
--- a/.github/workflows/deploy-web.yml
+++ b/.github/workflows/deploy-web.yml
@@ -242,7 +242,7 @@ jobs:
         run: |
           # If run-id was used, get the commit from the download-latest-artifacts-run-id step
           if [ "${{ inputs.build-web-run-id }}" ]; then
-            echo "commit=${{ steps.download-latest-artifacts-run-id.outputs.artifact_build_commit }}" >> $GITHUB_OUTPUT
+            echo "commit=${{ steps.download-latest-artifacts-run-id.outputs.artifact-build-commit }}" >> $GITHUB_OUTPUT
 
           elif [ "${{ steps.download-latest-artifacts.outcome }}" == "failure" ]; then
             # If the download-latest-artifacts step failed, query the GH API to get the commit SHA of the artifact that was just built with trigger-build-web.
@@ -251,7 +251,7 @@ jobs:
 
           else
             # Set the commit to the output of step download-latest-artifacts.
-            echo "commit=${{ steps.download-latest-artifacts.outputs.artifact_build_commit }}" >> $GITHUB_OUTPUT
+            echo "commit=${{ steps.download-latest-artifacts.outputs.artifact-build-commit }}" >> $GITHUB_OUTPUT
           fi
 
   notify-start:

From f74d7e5fd5d4a4602cea2c6afc55bc594d46ce1e Mon Sep 17 00:00:00 2001
From: Justin Baur <19896123+justindbaur@users.noreply.github.com>
Date: Tue, 15 Apr 2025 14:17:53 -0400
Subject: [PATCH 02/36] [PM-20239] Initializing `nx` (#14276)

* Add .nx file to .gitignore

Co-authored-by: Addison Beck <github@addisonbeck.com>

* Add nx package

Co-authored-by: Addison Beck <github@addisonbeck.com>

* Add nx.json file

Co-authored-by: Addison Beck <github@addisonbeck.com>

* Add nx to Platform ownership

---------

Co-authored-by: Addison Beck <github@addisonbeck.com>
---
 .github/renovate.json5 |   1 +
 .gitignore             |   3 +
 nx.json                |  10 +
 package-lock.json      | 528 ++++++++++++++++++++++++++++++++++++++++-
 package.json           |   1 +
 5 files changed, 538 insertions(+), 5 deletions(-)
 create mode 100644 nx.json

diff --git a/.github/renovate.json5 b/.github/renovate.json5
index 973ba700349..c4202ed2a68 100644
--- a/.github/renovate.json5
+++ b/.github/renovate.json5
@@ -250,6 +250,7 @@
         "napi-derive",
         "node-forge",
         "node-ipc",
+        "nx",
         "oo7",
         "oslog",
         "pin-project",
diff --git a/.gitignore b/.gitignore
index d0d8edd596c..e865fa6a8fb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -48,3 +48,6 @@ storybook-static
 
 # Local app configuration
 apps/**/config/local.json
+
+# Nx
+.nx
diff --git a/nx.json b/nx.json
new file mode 100644
index 00000000000..7da50182873
--- /dev/null
+++ b/nx.json
@@ -0,0 +1,10 @@
+{
+  "cacheDirectory": ".nx/cache",
+  "defaultBase": "main",
+  "namedInputs": {
+    "default": ["{projectRoot}/**/*"],
+    "production": ["!{projectRoot}/**/*.spec.ts"]
+  },
+  "parallel": 4,
+  "targetDefaults": {}
+}
diff --git a/package-lock.json b/package-lock.json
index 3cba61db6f8..cb9baf4fafe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -156,6 +156,7 @@
         "json5": "2.2.3",
         "lint-staged": "15.4.1",
         "mini-css-extract-plugin": "2.9.2",
+        "nx": "20.8.0",
         "postcss": "8.5.1",
         "postcss-loader": "8.1.1",
         "prettier": "3.4.2",
@@ -5954,6 +5955,34 @@
         "node": "*"
       }
     },
+    "node_modules/@emnapi/core": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.4.1.tgz",
+      "integrity": "sha512-4JFstCTaToCFrPqrGzgkF8N2NHjtsaY4uRh6brZQ5L9e4wbMieX8oDT8N7qfVFTQecHFEtkj4ve49VIZ3mKVqw==",
+      "dev": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.0.1",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.4.1.tgz",
+      "integrity": "sha512-LMshMVP0ZhACNjQNYXiU1iZJ6QCcv0lUdPDPugqGvCGXt5xtRVBPdtA0qU12pEXZzpWAhWlZYptfdAFq10DOVQ==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.0.1.tgz",
+      "integrity": "sha512-iIBu7mwkq4UQGeMEM8bLwNK962nXdhodeScX4slfQnRhEMMzvYivHhutCIk8uojvmASXXPC2WNEjwxFWk72Oqw==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.13.5",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
@@ -8223,6 +8252,17 @@
         "url": "https://github.com/sponsors/Brooooooklyn"
       }
     },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.4.tgz",
+      "integrity": "sha512-9zESzOO5aDByvhIAsOy9TbpZ0Ur2AJbUI7UT73kcUTS2mxAMHOBaa1st/jAymNoCtvrit99kkzT1FZuXVcgfIQ==",
+      "dev": true,
+      "dependencies": {
+        "@emnapi/core": "^1.1.0",
+        "@emnapi/runtime": "^1.1.0",
+        "@tybys/wasm-util": "^0.9.0"
+      }
+    },
     "node_modules/@ng-select/ng-select": {
       "version": "13.9.1",
       "resolved": "https://registry.npmjs.org/@ng-select/ng-select/-/ng-select-13.9.1.tgz",
@@ -8758,6 +8798,166 @@
         "node": "^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/@nx/nx-darwin-arm64": {
+      "version": "20.8.0",
+      "resolved": "https://registry.npmjs.org/@nx/nx-darwin-arm64/-/nx-darwin-arm64-20.8.0.tgz",
+      "integrity": "sha512-A6Te2KlINtcOo/depXJzPyjbk9E0cmgbom/sm/49XdQ8G94aDfyIIY1RIdwmDCK5NVd74KFG3JIByTk5+VnAhA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nx/nx-darwin-x64": {
+      "version": "20.8.0",
+      "resolved": "https://registry.npmjs.org/@nx/nx-darwin-x64/-/nx-darwin-x64-20.8.0.tgz",
+      "integrity": "sha512-UpqayUjgalArXaDvOoshqSelTrEp42cGDsZGy0sqpxwBpm3oPQ8wE1d7oBAmRo208rAxOuFP0LZRFUqRrwGvLA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nx/nx-freebsd-x64": {
+      "version": "20.8.0",
+      "resolved": "https://registry.npmjs.org/@nx/nx-freebsd-x64/-/nx-freebsd-x64-20.8.0.tgz",
+      "integrity": "sha512-dUR2fsLyKZYMHByvjy2zvmdMbsdXAiP+6uTlIAuu8eHMZ2FPQCAtt7lPYLwOFUxUXChbek2AJ+uCI0gRAgK/eg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nx/nx-linux-arm-gnueabihf": {
+      "version": "20.8.0",
+      "resolved": "https://registry.npmjs.org/@nx/nx-linux-arm-gnueabihf/-/nx-linux-arm-gnueabihf-20.8.0.tgz",
+      "integrity": "sha512-GuZ7t0SzSX5ksLYva7koKZovQ5h/Kr1pFbOsQcBf3VLREBqFPSz6t7CVYpsIsMhiu/I3EKq6FZI3wDOJbee5uw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nx/nx-linux-arm64-gnu": {
+      "version": "20.8.0",
+      "resolved": "https://registry.npmjs.org/@nx/nx-linux-arm64-gnu/-/nx-linux-arm64-gnu-20.8.0.tgz",
+      "integrity": "sha512-CiI955Q+XZmBBZ7cQqQg0MhGEFwZIgSpJnjPfWBt3iOYP8aE6nZpNOkmD7O8XcN/nEwwyeCOF8euXqEStwsk8w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nx/nx-linux-arm64-musl": {
+      "version": "20.8.0",
+      "resolved": "https://registry.npmjs.org/@nx/nx-linux-arm64-musl/-/nx-linux-arm64-musl-20.8.0.tgz",
+      "integrity": "sha512-Iy9DpvVisxsfNh4gOinmMQ4cLWdBlgvt1wmry1UwvcXg479p1oJQ1Kp1wksUZoWYqrAG8VPZUmkE0f7gjyHTGg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nx/nx-linux-x64-gnu": {
+      "version": "20.8.0",
+      "resolved": "https://registry.npmjs.org/@nx/nx-linux-x64-gnu/-/nx-linux-x64-gnu-20.8.0.tgz",
+      "integrity": "sha512-kZrrXXzVSbqwmdTmQ9xL4Jhi0/FSLrePSxYCL9oOM3Rsj0lmo/aC9kz4NBv1ZzuqT7fumpBOnhqiL1QyhOWOeQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nx/nx-linux-x64-musl": {
+      "version": "20.8.0",
+      "resolved": "https://registry.npmjs.org/@nx/nx-linux-x64-musl/-/nx-linux-x64-musl-20.8.0.tgz",
+      "integrity": "sha512-0l9jEMN8NhULKYCFiDF7QVpMMNG40duya+OF8dH0OzFj52N0zTsvsgLY72TIhslCB/cC74oAzsmWEIiFslscnA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nx/nx-win32-arm64-msvc": {
+      "version": "20.8.0",
+      "resolved": "https://registry.npmjs.org/@nx/nx-win32-arm64-msvc/-/nx-win32-arm64-msvc-20.8.0.tgz",
+      "integrity": "sha512-5miZJmRSwx1jybBsiB3NGocXL9TxGdT2D+dOqR2fsLklpGz0ItEWm8+i8lhDjgOdAr2nFcuQUfQMY57f9FOHrA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nx/nx-win32-x64-msvc": {
+      "version": "20.8.0",
+      "resolved": "https://registry.npmjs.org/@nx/nx-win32-x64-msvc/-/nx-win32-x64-msvc-20.8.0.tgz",
+      "integrity": "sha512-0P5r+bDuSNvoWys+6C1/KqGpYlqwSHpigCcyRzR62iZpT3OooZv+nWO06RlURkxMR8LNvYXTSSLvoLkjxqM8uQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@parcel/watcher": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
@@ -10856,6 +11056,15 @@
         "node": "^16.14.0 || >=18.0.0"
       }
     },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.9.0.tgz",
+      "integrity": "sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@types/accepts": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/@types/accepts/-/accepts-1.3.7.tgz",
@@ -13196,6 +13405,59 @@
       "integrity": "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==",
       "license": "BSD-2-Clause"
     },
+    "node_modules/@yarnpkg/parsers": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@yarnpkg/parsers/-/parsers-3.0.2.tgz",
+      "integrity": "sha512-/HcYgtUSiJiot/XWGLOlGxPYUG65+/31V8oqk17vZLW1xlCoR4PampyePljOxY2n8/3jz9+tIFzICsyGujJZoA==",
+      "dev": true,
+      "dependencies": {
+        "js-yaml": "^3.10.0",
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/@yarnpkg/parsers/node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/@yarnpkg/parsers/node_modules/js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/@yarnpkg/parsers/node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
+      "dev": true
+    },
+    "node_modules/@zkochan/js-yaml": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/@zkochan/js-yaml/-/js-yaml-0.0.7.tgz",
+      "integrity": "sha512-nrUSn7hzt7J6JWgWGz78ZYI8wj+gdIJdk0Ynjpp8l+trkn58Uqsf6RYrYkEK+3X18EX+TNdtJI0WxAtc+L84SQ==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/7zip-bin": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/7zip-bin/-/7zip-bin-5.2.0.tgz",
@@ -14298,11 +14560,10 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.7.9",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
-      "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
+      "version": "1.8.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.8.4.tgz",
+      "integrity": "sha512-eBSYY4Y68NNlHbHBMdeDmKNtDgXWhQsJcGqzO3iLUM0GraQFSS9cVgPX5I9b3lbdFKyYoAEGAZF1DwhTaljNAw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
@@ -18077,6 +18338,18 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/enquirer": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
+      "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-colors": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -20259,6 +20532,43 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/front-matter": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/front-matter/-/front-matter-4.0.2.tgz",
+      "integrity": "sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg==",
+      "dev": true,
+      "dependencies": {
+        "js-yaml": "^3.13.1"
+      }
+    },
+    "node_modules/front-matter/node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/front-matter/node_modules/js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/front-matter/node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
+      "dev": true
+    },
     "node_modules/fs-constants": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
@@ -28045,6 +28355,12 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/node-machine-id": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/node-machine-id/-/node-machine-id-1.1.12.tgz",
+      "integrity": "sha512-QNABxbrPa3qEIfrE6GOJ7BYIuignnJw7iQ2YPbc3Nla1HzRJjXzZOiikfF8m7eAMfichLt3M4VgLOetqgDmgGQ==",
+      "dev": true
+    },
     "node_modules/node-releases": {
       "version": "2.0.19",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
@@ -28513,6 +28829,209 @@
       "integrity": "sha512-F1I/bimDpj3ncaNDhfyMWuFqmQDBwDB0Fogc2qpL3BWvkQteFD/8BzWuIRl83rq0DXfm8SGt/HFhLXZyljTXcQ==",
       "license": "MIT"
     },
+    "node_modules/nx": {
+      "version": "20.8.0",
+      "resolved": "https://registry.npmjs.org/nx/-/nx-20.8.0.tgz",
+      "integrity": "sha512-+BN5B5DFBB5WswD8flDDTnr4/bf1VTySXOv60aUAllHqR+KS6deT0p70TTMZF4/A2n/L2UCWDaDro37MGaYozA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "@napi-rs/wasm-runtime": "0.2.4",
+        "@yarnpkg/lockfile": "^1.1.0",
+        "@yarnpkg/parsers": "3.0.2",
+        "@zkochan/js-yaml": "0.0.7",
+        "axios": "^1.8.3",
+        "chalk": "^4.1.0",
+        "cli-cursor": "3.1.0",
+        "cli-spinners": "2.6.1",
+        "cliui": "^8.0.1",
+        "dotenv": "~16.4.5",
+        "dotenv-expand": "~11.0.6",
+        "enquirer": "~2.3.6",
+        "figures": "3.2.0",
+        "flat": "^5.0.2",
+        "front-matter": "^4.0.2",
+        "ignore": "^5.0.4",
+        "jest-diff": "^29.4.1",
+        "jsonc-parser": "3.2.0",
+        "lines-and-columns": "2.0.3",
+        "minimatch": "9.0.3",
+        "node-machine-id": "1.1.12",
+        "npm-run-path": "^4.0.1",
+        "open": "^8.4.0",
+        "ora": "5.3.0",
+        "resolve.exports": "2.0.3",
+        "semver": "^7.5.3",
+        "string-width": "^4.2.3",
+        "tar-stream": "~2.2.0",
+        "tmp": "~0.2.1",
+        "tsconfig-paths": "^4.1.2",
+        "tslib": "^2.3.0",
+        "yaml": "^2.6.0",
+        "yargs": "^17.6.2",
+        "yargs-parser": "21.1.1"
+      },
+      "bin": {
+        "nx": "bin/nx.js",
+        "nx-cloud": "bin/nx-cloud.js"
+      },
+      "optionalDependencies": {
+        "@nx/nx-darwin-arm64": "20.8.0",
+        "@nx/nx-darwin-x64": "20.8.0",
+        "@nx/nx-freebsd-x64": "20.8.0",
+        "@nx/nx-linux-arm-gnueabihf": "20.8.0",
+        "@nx/nx-linux-arm64-gnu": "20.8.0",
+        "@nx/nx-linux-arm64-musl": "20.8.0",
+        "@nx/nx-linux-x64-gnu": "20.8.0",
+        "@nx/nx-linux-x64-musl": "20.8.0",
+        "@nx/nx-win32-arm64-msvc": "20.8.0",
+        "@nx/nx-win32-x64-msvc": "20.8.0"
+      },
+      "peerDependencies": {
+        "@swc-node/register": "^1.8.0",
+        "@swc/core": "^1.3.85"
+      },
+      "peerDependenciesMeta": {
+        "@swc-node/register": {
+          "optional": true
+        },
+        "@swc/core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/nx/node_modules/cli-spinners": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.6.1.tgz",
+      "integrity": "sha512-x/5fWmGMnbKQAaNwN+UZlV79qBLM9JFnJuJ03gIi5whrob0xV0ofNVHy9DhwGdsMJQc2OKv0oGmLzvaqvAVv+g==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/nx/node_modules/dotenv": {
+      "version": "16.4.7",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.7.tgz",
+      "integrity": "sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/nx/node_modules/dotenv-expand": {
+      "version": "11.0.7",
+      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-11.0.7.tgz",
+      "integrity": "sha512-zIHwmZPRshsCdpMDyVsqGmgyP0yT8GAgXUnkdAoJisxvf33k7yO6OuoKmcTGuXPWSsm8Oh88nZicRLA9Y0rUeA==",
+      "dev": true,
+      "dependencies": {
+        "dotenv": "^16.4.5"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/nx/node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/nx/node_modules/jsonc-parser": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
+      "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
+      "dev": true
+    },
+    "node_modules/nx/node_modules/lines-and-columns": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-2.0.3.tgz",
+      "integrity": "sha512-cNOjgCnLB+FnvWWtyRTzmB3POJ+cXxTA81LoW7u8JdmhfXzriropYwpjShnz1QLLWsQwY7nIxoDmcPTwphDK9w==",
+      "dev": true,
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      }
+    },
+    "node_modules/nx/node_modules/minimatch": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/nx/node_modules/ora": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/ora/-/ora-5.3.0.tgz",
+      "integrity": "sha512-zAKMgGXUim0Jyd6CXK9lraBnD3H5yPGBPPOkC23a2BG6hsm4Zu6OQSjQuEtV0BHDf4aKHcUFvJiGRrFuW3MG8g==",
+      "dev": true,
+      "dependencies": {
+        "bl": "^4.0.3",
+        "chalk": "^4.1.0",
+        "cli-cursor": "^3.1.0",
+        "cli-spinners": "^2.5.0",
+        "is-interactive": "^1.0.0",
+        "log-symbols": "^4.0.0",
+        "strip-ansi": "^6.0.0",
+        "wcwidth": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/nx/node_modules/strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/nx/node_modules/tmp": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.3.tgz",
+      "integrity": "sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/nx/node_modules/tsconfig-paths": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz",
+      "integrity": "sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==",
+      "dev": true,
+      "dependencies": {
+        "json5": "^2.2.2",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -31294,7 +31813,6 @@
       "integrity": "sha512-OcXjMsGdhL4XnbShKpAcSqPMzQoYkYyhbEaeSko47MjRP9NfEQMhZkXL1DoFlt9LWQn4YttrdnV6X2OiyzBi+A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10"
       }
diff --git a/package.json b/package.json
index f24588c4c82..28d243e1c32 100644
--- a/package.json
+++ b/package.json
@@ -118,6 +118,7 @@
     "json5": "2.2.3",
     "lint-staged": "15.4.1",
     "mini-css-extract-plugin": "2.9.2",
+    "nx": "20.8.0",
     "postcss": "8.5.1",
     "postcss-loader": "8.1.1",
     "prettier": "3.4.2",

From e3d1ef456e8dfaba8fbdac1a420f513a8acebd17 Mon Sep 17 00:00:00 2001
From: Jonathan Prusik <jprusik@users.noreply.github.com>
Date: Tue, 15 Apr 2025 14:37:12 -0400
Subject: [PATCH 03/36] [PM-14909] Add data/state for security task completion
 notification (#14279)

* include tasks with notification cipher data

* send security task information with update success message for notification

* mark completed cipher updates with tasks as complete

* refactor notification confirmation components and add stories

* add keyhole icon

* add conditional footer button to notification confirmation component

* add external link icon

* add external link icon to action button

* add notification confirmation footer story

* use keyhole icon if there are no additional security tasks to complete

* add new message catalog entries to chrome.i18n

* reimplement sending security task information with update success message for notification

* open tasks in extension from confirmation notification button

* update vault message key and dismiss all security tasks for a given cipher upon password update

* resolve changes against updated main branch basis

* put task fetching behind feature flag and update tests

* cleanup

* more cleanup
---
 .../abstractions/notification.background.ts   |   1 +
 .../notification.background.spec.ts           |  98 +++++++++++++-
 .../background/notification.background.ts     | 123 ++++++++++++++++--
 .../abstractions/notification-bar.ts          |   7 +-
 apps/browser/src/autofill/notification/bar.ts |   6 +-
 ...rlay-notifications-content.service.spec.ts |  24 ++--
 .../overlay-notifications-content.service.ts  |   6 +-
 .../browser/src/background/main.background.ts |  23 ++--
 8 files changed, 247 insertions(+), 41 deletions(-)

diff --git a/apps/browser/src/autofill/background/abstractions/notification.background.ts b/apps/browser/src/autofill/background/abstractions/notification.background.ts
index 851f07576dd..6b3c91a109c 100644
--- a/apps/browser/src/autofill/background/abstractions/notification.background.ts
+++ b/apps/browser/src/autofill/background/abstractions/notification.background.ts
@@ -95,6 +95,7 @@ type NotificationBackgroundExtensionMessageHandlers = {
   unlockCompleted: ({ message, sender }: BackgroundOnMessageHandlerParams) => Promise<void>;
   bgGetFolderData: ({ message, sender }: BackgroundOnMessageHandlerParams) => Promise<FolderView[]>;
   bgCloseNotificationBar: ({ message, sender }: BackgroundOnMessageHandlerParams) => Promise<void>;
+  bgOpenAtRisksPasswords: ({ message, sender }: BackgroundOnMessageHandlerParams) => Promise<void>;
   bgAdjustNotificationBar: ({ message, sender }: BackgroundOnMessageHandlerParams) => Promise<void>;
   bgAddLogin: ({ message, sender }: BackgroundOnMessageHandlerParams) => Promise<void>;
   bgChangedPassword: ({ message, sender }: BackgroundOnMessageHandlerParams) => Promise<void>;
diff --git a/apps/browser/src/autofill/background/notification.background.spec.ts b/apps/browser/src/autofill/background/notification.background.spec.ts
index ebdd244e140..ffc416ab62a 100644
--- a/apps/browser/src/autofill/background/notification.background.spec.ts
+++ b/apps/browser/src/autofill/background/notification.background.spec.ts
@@ -1,5 +1,5 @@
 import { mock, MockProxy } from "jest-mock-extended";
-import { BehaviorSubject, firstValueFrom } from "rxjs";
+import { BehaviorSubject, firstValueFrom, of } from "rxjs";
 
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { DefaultPolicyService } from "@bitwarden/common/admin-console/services/policy/default-policy.service";
@@ -12,6 +12,7 @@ import { UserNotificationSettingsService } from "@bitwarden/common/autofill/serv
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
+import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { SelfHostedEnvironment } from "@bitwarden/common/platform/services/default-environment.service";
 import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
 import { UserId } from "@bitwarden/common/types/guid";
@@ -19,6 +20,7 @@ import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";
 import { CipherService } from "@bitwarden/common/vault/services/cipher.service";
 import { FolderService } from "@bitwarden/common/vault/services/folder/folder.service";
+import { TaskService, SecurityTask } from "@bitwarden/common/vault/tasks";
 
 import { BrowserApi } from "../../platform/browser/browser-api";
 import { NotificationQueueMessageType } from "../enums/notification-queue-message-type.enum";
@@ -46,6 +48,8 @@ jest.mock("rxjs", () => {
 });
 
 describe("NotificationBackground", () => {
+  const messagingService = mock<MessagingService>();
+  const taskService = mock<TaskService>();
   let notificationBackground: NotificationBackground;
   const autofillService = mock<AutofillService>();
   const cipherService = mock<CipherService>();
@@ -88,6 +92,8 @@ describe("NotificationBackground", () => {
       policyService,
       themeStateService,
       userNotificationSettingsService,
+      taskService,
+      messagingService,
     );
   });
 
@@ -201,8 +207,8 @@ describe("NotificationBackground", () => {
         await flushPromises();
 
         expect(notificationBackground["handleSaveCipherMessage"]).toHaveBeenCalledWith(
-          message.data.commandToRetry.message,
-          message.data.commandToRetry.sender,
+          message.data?.commandToRetry?.message,
+          message.data?.commandToRetry?.sender,
         );
       });
     });
@@ -498,7 +504,7 @@ describe("NotificationBackground", () => {
         expect(pushChangePasswordToQueueSpy).toHaveBeenCalledWith(
           null,
           "example.com",
-          message.data.newPassword,
+          message.data?.newPassword,
           sender.tab,
           true,
         );
@@ -570,7 +576,7 @@ describe("NotificationBackground", () => {
         expect(pushChangePasswordToQueueSpy).toHaveBeenCalledWith(
           "cipher-id",
           "example.com",
-          message.data.newPassword,
+          message.data?.newPassword,
           sender.tab,
         );
       });
@@ -618,7 +624,7 @@ describe("NotificationBackground", () => {
         expect(pushChangePasswordToQueueSpy).toHaveBeenCalledWith(
           "cipher-id",
           "example.com",
-          message.data.newPassword,
+          message.data?.newPassword,
           sender.tab,
         );
       });
@@ -844,6 +850,86 @@ describe("NotificationBackground", () => {
           );
         });
 
+        it("completes password update notification with a security task notice if any are present for the cipher, and dismisses tasks for the updated cipher", async () => {
+          const mockCipherId = "testId";
+          const mockOrgId = "testOrgId";
+          const mockSecurityTask = {
+            id: "testTaskId",
+            organizationId: mockOrgId,
+            cipherId: mockCipherId,
+            type: 0,
+            status: 0,
+            creationDate: new Date(),
+            revisionDate: new Date(),
+          } as SecurityTask;
+          const mockSecurityTask2 = {
+            ...mockSecurityTask,
+            id: "testTaskId2",
+            cipherId: "testId2",
+          } as SecurityTask;
+          taskService.tasksEnabled$.mockImplementation(() => of(true));
+          taskService.pendingTasks$.mockImplementation(() =>
+            of([mockSecurityTask, mockSecurityTask2]),
+          );
+          jest
+            .spyOn(notificationBackground as any, "getNotificationFlag")
+            .mockResolvedValueOnce(true);
+          jest.spyOn(notificationBackground as any, "getOrgData").mockResolvedValueOnce([
+            {
+              id: mockOrgId,
+              name: "Org Name, LLC",
+              productTierType: 3,
+            },
+          ]);
+
+          const tab = createChromeTabMock({ id: 1, url: "https://example.com" });
+          const sender = mock<chrome.runtime.MessageSender>({ tab });
+          const message: NotificationBackgroundExtensionMessage = {
+            command: "bgSaveCipher",
+            edit: false,
+            folder: "folder-id",
+          };
+          const queueMessage = mock<AddChangePasswordQueueMessage>({
+            type: NotificationQueueMessageType.ChangePassword,
+            tab,
+            domain: "example.com",
+            newPassword: "newPassword",
+          });
+          notificationBackground["notificationQueue"] = [queueMessage];
+          const cipherView = mock<CipherView>({
+            id: mockCipherId,
+            organizationId: mockOrgId,
+            login: { username: "testUser" },
+          });
+          getDecryptedCipherByIdSpy.mockResolvedValueOnce(cipherView);
+
+          sendMockExtensionMessage(message, sender);
+          await flushPromises();
+
+          expect(editItemSpy).not.toHaveBeenCalled();
+          expect(createWithServerSpy).not.toHaveBeenCalled();
+          expect(updatePasswordSpy).toHaveBeenCalledWith(
+            cipherView,
+            queueMessage.newPassword,
+            message.edit,
+            sender.tab,
+            mockCipherId,
+          );
+          expect(updateWithServerSpy).toHaveBeenCalled();
+          expect(tabSendMessageDataSpy).toHaveBeenCalledWith(
+            sender.tab,
+            "saveCipherAttemptCompleted",
+            {
+              cipherId: "testId",
+              task: {
+                orgName: "Org Name, LLC",
+                remainingTasksCount: 1,
+              },
+              username: "testUser",
+            },
+          );
+        });
+
         it("updates the cipher password if the queue message was locked and an existing cipher has the same username as the message", async () => {
           const tab = createChromeTabMock({ id: 1, url: "https://example.com" });
           const sender = mock<chrome.runtime.MessageSender>({ tab });
diff --git a/apps/browser/src/autofill/background/notification.background.ts b/apps/browser/src/autofill/background/notification.background.ts
index c2e90460dfc..1f0cc469e2c 100644
--- a/apps/browser/src/autofill/background/notification.background.ts
+++ b/apps/browser/src/autofill/background/notification.background.ts
@@ -1,6 +1,6 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
-import { firstValueFrom, switchMap } from "rxjs";
+import { firstValueFrom, switchMap, map } from "rxjs";
 
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
@@ -22,16 +22,21 @@ import { ConfigService } from "@bitwarden/common/platform/abstractions/config/co
 import { ServerConfig } from "@bitwarden/common/platform/abstractions/config/server-config";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
+import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
 import { UserId } from "@bitwarden/common/types/guid";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
 import { CipherType } from "@bitwarden/common/vault/enums";
+import { VaultMessages } from "@bitwarden/common/vault/enums/vault-messages.enum";
 import { buildCipherIcon } from "@bitwarden/common/vault/icon/build-cipher-icon";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { LoginUriView } from "@bitwarden/common/vault/models/view/login-uri.view";
 import { LoginView } from "@bitwarden/common/vault/models/view/login.view";
+import { TaskService } from "@bitwarden/common/vault/tasks";
+import { SecurityTaskType } from "@bitwarden/common/vault/tasks/enums";
+import { SecurityTask } from "@bitwarden/common/vault/tasks/models/security-task";
 
 import { openUnlockPopout } from "../../auth/popup/utils/auth-popout-window";
 import { BrowserApi } from "../../platform/browser/browser-api";
@@ -70,6 +75,8 @@ export default class NotificationBackground {
     bgChangedPassword: ({ message, sender }) => this.changedPassword(message, sender),
     bgCloseNotificationBar: ({ message, sender }) =>
       this.handleCloseNotificationBarMessage(message, sender),
+    bgOpenAtRisksPasswords: ({ message, sender }) =>
+      this.handleOpenAtRisksPasswordsMessage(message, sender),
     bgGetActiveUserServerConfig: () => this.getActiveUserServerConfig(),
     bgGetDecryptedCiphers: () => this.getNotificationCipherData(),
     bgGetEnableChangedPasswordPrompt: () => this.getEnableChangedPasswordPrompt(),
@@ -106,6 +113,8 @@ export default class NotificationBackground {
     private policyService: PolicyService,
     private themeStateService: ThemeStateService,
     private userNotificationSettingsService: UserNotificationSettingsServiceAbstraction,
+    private taskService: TaskService,
+    protected messagingService: MessagingService,
   ) {}
 
   init() {
@@ -154,17 +163,20 @@ export default class NotificationBackground {
       firstValueFrom(this.domainSettingsService.showFavicons$),
       firstValueFrom(this.environmentService.environment$),
     ]);
+
     const iconsServerUrl = env.getIconsUrl();
     const activeUserId = await firstValueFrom(
       this.accountService.activeAccount$.pipe(getOptionalUserId),
     );
+
     const decryptedCiphers = await this.cipherService.getAllDecryptedForUrl(
-      currentTab.url,
+      currentTab?.url,
       activeUserId,
     );
 
     return decryptedCiphers.map((view) => {
       const { id, name, reprompt, favorite, login } = view;
+
       return {
         id,
         name,
@@ -599,13 +611,13 @@ export default class NotificationBackground {
       try {
         await this.cipherService.createWithServer(cipher);
         await BrowserApi.tabSendMessageData(tab, "saveCipherAttemptCompleted", {
-          username: String(queueMessage?.username),
-          cipherId: String(cipher?.id),
+          username: queueMessage?.username && String(queueMessage.username),
+          cipherId: cipher?.id && String(cipher.id),
         });
         await BrowserApi.tabSendMessage(tab, { command: "addedCipher" });
       } catch (error) {
         await BrowserApi.tabSendMessageData(tab, "saveCipherAttemptCompleted", {
-          error: String(error.message),
+          error: error?.message && String(error.message),
         });
       }
     }
@@ -638,15 +650,49 @@ export default class NotificationBackground {
       return;
     }
     const cipher = await this.cipherService.encrypt(cipherView, userId);
+
+    const shouldGetTasks = await this.getNotificationFlag();
+
     try {
+      const tasks = shouldGetTasks ? await this.getSecurityTasks(userId) : [];
+      const updatedCipherTask = tasks.find((task) => task.cipherId === cipherView?.id);
+      const cipherHasTask = !!updatedCipherTask?.id;
+
+      let taskOrgName: string;
+      if (cipherHasTask && updatedCipherTask?.organizationId) {
+        const userOrgs = await this.getOrgData();
+        taskOrgName = userOrgs.find(({ id }) => id === updatedCipherTask.organizationId)?.name;
+      }
+
+      const taskData = cipherHasTask
+        ? {
+            remainingTasksCount: tasks.length - 1,
+            orgName: taskOrgName,
+          }
+        : undefined;
+
       await this.cipherService.updateWithServer(cipher);
+
       await BrowserApi.tabSendMessageData(tab, "saveCipherAttemptCompleted", {
-        username: String(cipherView?.login?.username),
-        cipherId: String(cipherView?.id),
+        username: cipherView?.login?.username && String(cipherView.login.username),
+        cipherId: cipherView?.id && String(cipherView.id),
+        task: taskData,
       });
+
+      // If the cipher had a security task, mark it as complete
+      if (cipherHasTask) {
+        // guard against multiple (redundant) security tasks per cipher
+        await Promise.all(
+          tasks.map((task) => {
+            if (task.cipherId === cipherView?.id) {
+              return this.taskService.markAsComplete(task.id, userId);
+            }
+          }),
+        );
+      }
     } catch (error) {
       await BrowserApi.tabSendMessageData(tab, "saveCipherAttemptCompleted", {
-        error: String(error?.message),
+        error: error?.message && String(error.message),
       });
     }
   }
@@ -699,6 +745,32 @@ export default class NotificationBackground {
     return null;
   }
 
+  private async getSecurityTasks(userId: UserId) {
+    let tasks: SecurityTask[] = [];
+
+    if (userId) {
+      tasks = await firstValueFrom(
+        this.taskService.tasksEnabled$(userId).pipe(
+          switchMap((tasksEnabled) => {
+            if (!tasksEnabled) {
+              return [];
+            }
+
+            return this.taskService
+              .pendingTasks$(userId)
+              .pipe(
+                map((tasks) =>
+                  tasks.filter(({ type }) => type === SecurityTaskType.UpdateAtRiskCredential),
+                ),
+              );
+          }),
+        ),
+      );
+    }
+
+    return tasks;
+  }
+
   /**
    * Saves the current tab's domain to the never save list.
    *
@@ -819,6 +891,41 @@ export default class NotificationBackground {
     });
   }
 
+  /**
+   * Sends a message to the background to open the
+   * at-risk passwords extension view. Triggers
+   * notification closure as a side-effect.
+   *
+   * @param message - The extension message
+   * @param sender - The contextual sender of the message
+   */
+  private async handleOpenAtRisksPasswordsMessage(
+    message: NotificationBackgroundExtensionMessage,
+    sender: chrome.runtime.MessageSender,
+  ) {
+    const browserAction = BrowserApi.getBrowserAction();
+
+    try {
+      // Set route of the popup before attempting to open it.
+      // If the vault is locked, this won't have an effect as the auth guards will
+      // redirect the user to the login page.
+      await browserAction.setPopup({ popup: "popup/index.html#/at-risk-passwords" });
+
+      await Promise.all([
+        this.messagingService.send(VaultMessages.OpenAtRiskPasswords),
+        BrowserApi.tabSendMessageData(sender.tab, "closeNotificationBar", {
+          fadeOutNotification: !!message.fadeOutNotification,
+        }),
+      ]);
+    } finally {
+      // Reset the popup route to the default route so any subsequent
+      // popup openings will not open to the at-risk-passwords page.
+      await browserAction.setPopup({
+        popup: "popup/index.html#/",
+      });
+    }
+  }
+
   /**
    * Sends a message back to the sender tab which triggers
    * an CSS adjustment of the notification bar.
diff --git a/apps/browser/src/autofill/notification/abstractions/notification-bar.ts b/apps/browser/src/autofill/notification/abstractions/notification-bar.ts
index 7e2fdab04d3..cbfeffcf2f4 100644
--- a/apps/browser/src/autofill/notification/abstractions/notification-bar.ts
+++ b/apps/browser/src/autofill/notification/abstractions/notification-bar.ts
@@ -29,11 +29,14 @@ type NotificationBarIframeInitData = {
 };
 
 type NotificationBarWindowMessage = {
-  cipherId?: string;
   command: string;
+  data?: {
+    cipherId?: string;
+    task?: NotificationTaskInfo;
+    username?: string;
+  };
   error?: string;
   initData?: NotificationBarIframeInitData;
-  username?: string;
 };
 
 type NotificationBarWindowMessageHandlers = {
diff --git a/apps/browser/src/autofill/notification/bar.ts b/apps/browser/src/autofill/notification/bar.ts
index f544e75527c..d660790ee63 100644
--- a/apps/browser/src/autofill/notification/bar.ts
+++ b/apps/browser/src/autofill/notification/bar.ts
@@ -356,7 +356,8 @@ function openViewVaultItemPopout(e: Event, cipherId: string) {
 
 function handleSaveCipherConfirmation(message: NotificationBarWindowMessage) {
   const { theme, type } = notificationBarIframeInitData;
-  const { error, username, cipherId } = message;
+  const { error, data } = message;
+  const { username, cipherId, task } = data || {};
   const i18n = getI18n();
   const resolvedTheme = getResolvedTheme(theme ?? ThemeTypes.Light);
 
@@ -371,8 +372,9 @@ function handleSaveCipherConfirmation(message: NotificationBarWindowMessage) {
       i18n,
       error,
       username: username ?? i18n.typeLogin,
+      task,
       handleOpenVault: (e) => cipherId && openViewVaultItemPopout(e, cipherId),
-      handleOpenTasks: () => {},
+      handleOpenTasks: () => sendPlatformMessage({ command: "bgOpenAtRisksPasswords" }),
     }),
     document.body,
   );
diff --git a/apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.spec.ts b/apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.spec.ts
index 8a8ccdf363b..28db10b35fa 100644
--- a/apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.spec.ts
+++ b/apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.spec.ts
@@ -23,8 +23,8 @@ describe("OverlayNotificationsContentService", () => {
     autofillInit = new AutofillInit(
       domQueryService,
       domElementVisibilityService,
-      null,
-      null,
+      undefined,
+      undefined,
       overlayNotificationsContentService,
     );
     autofillInit.init();
@@ -89,7 +89,7 @@ describe("OverlayNotificationsContentService", () => {
       await flushPromises();
 
       expect(
-        overlayNotificationsContentService["notificationBarIframeElement"].style.transform,
+        overlayNotificationsContentService["notificationBarIframeElement"]?.style.transform,
       ).toBe("translateX(100%)");
     });
 
@@ -103,12 +103,12 @@ describe("OverlayNotificationsContentService", () => {
       });
       await flushPromises();
 
-      overlayNotificationsContentService["notificationBarIframeElement"].dispatchEvent(
+      overlayNotificationsContentService["notificationBarIframeElement"]?.dispatchEvent(
         new Event("load"),
       );
 
       expect(
-        overlayNotificationsContentService["notificationBarIframeElement"].style.transform,
+        overlayNotificationsContentService["notificationBarIframeElement"]?.style.transform,
       ).toBe("translateX(0)");
     });
 
@@ -134,7 +134,7 @@ describe("OverlayNotificationsContentService", () => {
       globalThis.dispatchEvent(
         new MessageEvent("message", {
           data: { command: "initNotificationBar" },
-          source: overlayNotificationsContentService["notificationBarIframeElement"].contentWindow,
+          source: overlayNotificationsContentService["notificationBarIframeElement"]?.contentWindow,
         }),
       );
       await flushPromises();
@@ -168,9 +168,9 @@ describe("OverlayNotificationsContentService", () => {
         data: { fadeOutNotification: true },
       });
 
-      expect(overlayNotificationsContentService["notificationBarIframeElement"].style.opacity).toBe(
-        "0",
-      );
+      expect(
+        overlayNotificationsContentService["notificationBarIframeElement"]?.style.opacity,
+      ).toBe("0");
 
       jest.advanceTimersByTime(150);
 
@@ -210,7 +210,7 @@ describe("OverlayNotificationsContentService", () => {
         data: { height: 1000 },
       });
 
-      expect(overlayNotificationsContentService["notificationBarElement"].style.height).toBe(
+      expect(overlayNotificationsContentService["notificationBarElement"]?.style.height).toBe(
         "1000px",
       );
     });
@@ -236,13 +236,13 @@ describe("OverlayNotificationsContentService", () => {
 
       sendMockExtensionMessage({
         command: "saveCipherAttemptCompleted",
-        data: { error: "" },
+        data: { error: undefined },
       });
 
       expect(
         overlayNotificationsContentService["notificationBarIframeElement"].contentWindow
           .postMessage,
-      ).toHaveBeenCalledWith({ command: "saveCipherAttemptCompleted", error: "" }, "*");
+      ).toHaveBeenCalledWith({ command: "saveCipherAttemptCompleted", error: undefined }, "*");
     });
   });
 
diff --git a/apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.ts b/apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.ts
index 662ec624dc4..519521feaa9 100644
--- a/apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.ts
+++ b/apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.ts
@@ -135,9 +135,13 @@ export class OverlayNotificationsContentService
    * @private
    */
   private handleSaveCipherAttemptCompletedMessage(message: NotificationsExtensionMessage) {
+    // destructure error out of data
+    const { error, ...otherData } = message?.data || {};
+
     this.sendMessageToNotificationBarIframe({
       command: "saveCipherAttemptCompleted",
-      error: message.data?.error,
+      data: Object.keys(otherData).length ? otherData : undefined,
+      error,
     });
   }
 
diff --git a/apps/browser/src/background/main.background.ts b/apps/browser/src/background/main.background.ts
index a5001e0c5b7..c437698f525 100644
--- a/apps/browser/src/background/main.background.ts
+++ b/apps/browser/src/background/main.background.ts
@@ -1186,6 +1186,17 @@ export default class MainBackground {
       this.authService,
       () => this.generatePasswordToClipboard(),
     );
+
+    this.taskService = new DefaultTaskService(
+      this.stateProvider,
+      this.apiService,
+      this.organizationService,
+      this.configService,
+      this.authService,
+      this.notificationsService,
+      messageListener,
+    );
+
     this.notificationBackground = new NotificationBackground(
       this.accountService,
       this.authService,
@@ -1200,6 +1211,8 @@ export default class MainBackground {
       this.policyService,
       this.themeStateService,
       this.userNotificationSettingsService,
+      this.taskService,
+      this.messagingService,
     );
 
     this.overlayNotificationsBackground = new OverlayNotificationsBackground(
@@ -1304,16 +1317,6 @@ export default class MainBackground {
       this.configService,
     );
 
-    this.taskService = new DefaultTaskService(
-      this.stateProvider,
-      this.apiService,
-      this.organizationService,
-      this.configService,
-      this.authService,
-      this.notificationsService,
-      messageListener,
-    );
-
     this.inlineMenuFieldQualificationService = new InlineMenuFieldQualificationService();
 
     this.ipcContentScriptManagerService = new IpcContentScriptManagerService(this.configService);

From 4cddc40828920914776a05fc906b087ac3bfcf12 Mon Sep 17 00:00:00 2001
From: Jonathan Prusik <jprusik@users.noreply.github.com>
Date: Tue, 15 Apr 2025 14:39:48 -0400
Subject: [PATCH 04/36] remove inlineAutofillMenuRefreshAddEditCipher message
 (#13805)

---
 .../src/autofill/background/overlay.background.spec.ts       | 5 -----
 apps/browser/src/autofill/background/overlay.background.ts   | 1 -
 .../background/overlay.background.deprecated.spec.ts         | 3 ---
 .../deprecated/background/overlay.background.deprecated.ts   | 1 -
 4 files changed, 10 deletions(-)

diff --git a/apps/browser/src/autofill/background/overlay.background.spec.ts b/apps/browser/src/autofill/background/overlay.background.spec.ts
index 3085dbc2f8d..0fe4a459048 100644
--- a/apps/browser/src/autofill/background/overlay.background.spec.ts
+++ b/apps/browser/src/autofill/background/overlay.background.spec.ts
@@ -117,7 +117,6 @@ describe("OverlayBackground", () => {
   let getFrameDetailsSpy: jest.SpyInstance;
   let tabsSendMessageSpy: jest.SpyInstance;
   let tabSendMessageDataSpy: jest.SpyInstance;
-  let sendMessageSpy: jest.SpyInstance;
   let getTabFromCurrentWindowIdSpy: jest.SpyInstance;
   let getTabSpy: jest.SpyInstance;
   let openUnlockPopoutSpy: jest.SpyInstance;
@@ -228,7 +227,6 @@ describe("OverlayBackground", () => {
     tabSendMessageDataSpy = jest
       .spyOn(BrowserApi, "tabSendMessageData")
       .mockImplementation(() => Promise.resolve());
-    sendMessageSpy = jest.spyOn(BrowserApi, "sendMessage");
     getTabFromCurrentWindowIdSpy = jest.spyOn(BrowserApi, "getTabFromCurrentWindowId");
     getTabSpy = jest.spyOn(BrowserApi, "getTab");
     openUnlockPopoutSpy = jest.spyOn(overlayBackground as any, "openUnlockPopout");
@@ -1553,7 +1551,6 @@ describe("OverlayBackground", () => {
         await flushPromises();
 
         expect(cipherService.setAddEditCipherInfo).toHaveBeenCalled();
-        expect(sendMessageSpy).toHaveBeenCalledWith("inlineAutofillMenuRefreshAddEditCipher");
         expect(openAddEditVaultItemPopoutSpy).toHaveBeenCalled();
       });
 
@@ -1579,7 +1576,6 @@ describe("OverlayBackground", () => {
         await flushPromises();
 
         expect(cipherService.setAddEditCipherInfo).toHaveBeenCalled();
-        expect(sendMessageSpy).toHaveBeenCalledWith("inlineAutofillMenuRefreshAddEditCipher");
         expect(openAddEditVaultItemPopoutSpy).toHaveBeenCalled();
       });
 
@@ -1618,7 +1614,6 @@ describe("OverlayBackground", () => {
           await flushPromises();
 
           expect(cipherService.setAddEditCipherInfo).toHaveBeenCalled();
-          expect(sendMessageSpy).toHaveBeenCalledWith("inlineAutofillMenuRefreshAddEditCipher");
           expect(openAddEditVaultItemPopoutSpy).toHaveBeenCalled();
         });
 
diff --git a/apps/browser/src/autofill/background/overlay.background.ts b/apps/browser/src/autofill/background/overlay.background.ts
index fa0ae9b9b3e..a2088f50a11 100644
--- a/apps/browser/src/autofill/background/overlay.background.ts
+++ b/apps/browser/src/autofill/background/overlay.background.ts
@@ -2434,7 +2434,6 @@ export class OverlayBackground implements OverlayBackgroundInterface {
         cipherId: cipherView.id,
         cipherType: addNewCipherType,
       });
-      await BrowserApi.sendMessage("inlineAutofillMenuRefreshAddEditCipher");
     } catch (error) {
       this.logService.error("Error building cipher and opening add/edit vault item popout", error);
     }
diff --git a/apps/browser/src/autofill/deprecated/background/overlay.background.deprecated.spec.ts b/apps/browser/src/autofill/deprecated/background/overlay.background.deprecated.spec.ts
index 128dd189878..68f8032350e 100644
--- a/apps/browser/src/autofill/deprecated/background/overlay.background.deprecated.spec.ts
+++ b/apps/browser/src/autofill/deprecated/background/overlay.background.deprecated.spec.ts
@@ -647,9 +647,6 @@ describe("OverlayBackground", () => {
           await flushPromises();
 
           expect(overlayBackground["cipherService"].setAddEditCipherInfo).toHaveBeenCalled();
-          expect(BrowserApi.sendMessage).toHaveBeenCalledWith(
-            "inlineAutofillMenuRefreshAddEditCipher",
-          );
           expect(overlayBackground["openAddEditVaultItemPopout"]).toHaveBeenCalled();
         });
       });
diff --git a/apps/browser/src/autofill/deprecated/background/overlay.background.deprecated.ts b/apps/browser/src/autofill/deprecated/background/overlay.background.deprecated.ts
index d0fad4cd00e..c9eb442d75d 100644
--- a/apps/browser/src/autofill/deprecated/background/overlay.background.deprecated.ts
+++ b/apps/browser/src/autofill/deprecated/background/overlay.background.deprecated.ts
@@ -678,7 +678,6 @@ class LegacyOverlayBackground implements OverlayBackgroundInterface {
     );
 
     await this.openAddEditVaultItemPopout(sender.tab, { cipherId: cipherView.id });
-    await BrowserApi.sendMessage("inlineAutofillMenuRefreshAddEditCipher");
   }
 
   /**

From 8258ea39b0b33eaabf8320cea98b64208b96f931 Mon Sep 17 00:00:00 2001
From: Shane Melton <smelton@bitwarden.com>
Date: Tue, 15 Apr 2025 12:17:41 -0700
Subject: [PATCH 05/36] [PM-18903] Desktop sync issues (#13681)

* [PM-18707] Use different BroadcasterSubscriptionId in base view component to avoid collision with desktop view component

* [PM-18707] Use userId instead of payloadUserId for cipher notification syncs

* [PM-19032] Live Sync on Desktop (#13851)

* migrate the vault-items to an observables rather than async/promises

- this helps keep data in sync with the service state and avoids race conditions

* migrate the view component to an observables rather than async/promises

- this helps keep data in sync with the service state and avoids race conditions

* decrypt saved cipher from server

* bump timeout for upserting ciphers

* mark `go` as async in desktop vault

- previously it was a floating promise

* Revert "mark `go` as async in desktop vault"

This reverts commit fd28f40b187c39fb30d1d1ab2972d398b2673419.

* Revert "bump timeout for upserting ciphers"

This reverts commit e963acc377b0018fb1f90d4e9d181959820e00b3.

* move vault utilities to `common` rather than `lib` to avoid circular dependencies

* use `perUserCache$` for `cipherViews$` to avoid new subscriptions from being created

* use userId from observable rather than locally set to be the most up to date

* [PM-18707] Add clearBuffer$ input to perUserCache$ helper so that  the internal share replay buffers can be cleared

* [PM-18707] Rework forceCipherViews$ to clearBuffer$ refactor

- Add dependency for cipherDecryptionKeys$ for the cipherViews so that decryption is never attempted without keys

* [PM-18707] Add overload to perUserCache to satisfy type checker

* [PM-18707] Fix overloads

* [PM-18707] Add check for empty failed to decrypt ciphers

* [PM-18707] Mark vault component for check after observable emits.

The cipherViews$ observable now persists between subscriptions, meaning that updates via the sync push notifications can occur outside the AngularZone causing delays in updating the view.

---------

Co-authored-by: Nick Krantz <125900171+nick-livefront@users.noreply.github.com>
Co-authored-by: Nick Krantz <nick@livefront.com>
---
 .../vault/app/vault/vault-items.component.ts  |   3 -
 .../src/vault/app/vault/view.component.ts     |   4 +-
 .../vault/individual-vault/vault.component.ts |  14 +-
 .../vault/components/add-edit.component.ts    |   9 +-
 .../vault/components/vault-items.component.ts | 111 +++++++-----
 .../src/vault/components/view.component.ts    | 167 +++++++++++-------
 .../internal/default-notifications.service.ts |   4 +-
 .../src/vault/services/cipher.service.ts      |  64 +++----
 .../tasks/services/default-task.service.ts    |   5 +-
 .../src/vault/utils/observable-utilities.ts   |  26 ++-
 10 files changed, 239 insertions(+), 168 deletions(-)

diff --git a/apps/desktop/src/vault/app/vault/vault-items.component.ts b/apps/desktop/src/vault/app/vault/vault-items.component.ts
index b7a45bd2467..d5838459ff7 100644
--- a/apps/desktop/src/vault/app/vault/vault-items.component.ts
+++ b/apps/desktop/src/vault/app/vault/vault-items.component.ts
@@ -27,9 +27,6 @@ export class VaultItemsComponent extends BaseVaultItemsComponent {
     // eslint-disable-next-line rxjs-angular/prefer-takeuntil
     searchBarService.searchText$.pipe(distinctUntilChanged()).subscribe((searchText) => {
       this.searchText = searchText;
-      // 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
-      this.search(200);
     });
   }
 
diff --git a/apps/desktop/src/vault/app/vault/view.component.ts b/apps/desktop/src/vault/app/vault/view.component.ts
index 9ddf18fff93..e5f677cbca6 100644
--- a/apps/desktop/src/vault/app/vault/view.component.ts
+++ b/apps/desktop/src/vault/app/vault/view.component.ts
@@ -126,9 +126,7 @@ export class ViewComponent extends BaseViewComponent implements OnInit, OnDestro
   }
 
   async ngOnChanges() {
-    await super.load();
-
-    if (this.cipher.decryptionFailure) {
+    if (this.cipher?.decryptionFailure) {
       DecryptionFailureDialogComponent.open(this.dialogService, {
         cipherIds: [this.cipherId as CipherId],
       });
diff --git a/apps/web/src/app/vault/individual-vault/vault.component.ts b/apps/web/src/app/vault/individual-vault/vault.component.ts
index c2173e29ee0..7055f164a53 100644
--- a/apps/web/src/app/vault/individual-vault/vault.component.ts
+++ b/apps/web/src/app/vault/individual-vault/vault.component.ts
@@ -13,6 +13,7 @@ import {
   Subject,
 } from "rxjs";
 import {
+  catchError,
   concatMap,
   debounceTime,
   filter,
@@ -23,7 +24,6 @@ import {
   take,
   takeUntil,
   tap,
-  catchError,
 } from "rxjs/operators";
 
 import {
@@ -64,6 +64,7 @@ import { CipherRepromptType } from "@bitwarden/common/vault/enums/cipher-repromp
 import { TreeNode } from "@bitwarden/common/vault/models/domain/tree-node";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { ServiceUtils } from "@bitwarden/common/vault/service-utils";
+import { filterOutNullish } from "@bitwarden/common/vault/utils/observable-utilities";
 import { DialogRef, DialogService, Icons, ToastService } from "@bitwarden/components";
 import {
   AddEditFolderDialogComponent,
@@ -138,7 +139,6 @@ const SearchTextDebounceInterval = 200;
     VaultFilterModule,
     VaultItemsModule,
     SharedModule,
-    DecryptionFailureDialogComponent,
   ],
   providers: [
     RoutedVaultFilterService,
@@ -348,9 +348,8 @@ export class VaultComponent implements OnInit, OnDestroy {
     ]).pipe(
       filter(([ciphers, filter]) => ciphers != undefined && filter != undefined),
       concatMap(async ([ciphers, filter, searchText]) => {
-        const failedCiphers = await firstValueFrom(
-          this.cipherService.failedToDecryptCiphers$(activeUserId),
-        );
+        const failedCiphers =
+          (await firstValueFrom(this.cipherService.failedToDecryptCiphers$(activeUserId))) ?? [];
         const filterFunction = createFilterFunction(filter);
         // Append any failed to decrypt ciphers to the top of the cipher list
         const allCiphers = [...failedCiphers, ...ciphers];
@@ -472,6 +471,7 @@ export class VaultComponent implements OnInit, OnDestroy {
     firstSetup$
       .pipe(
         switchMap(() => this.cipherService.failedToDecryptCiphers$(activeUserId)),
+        filterOutNullish(),
         map((ciphers) => ciphers.filter((c) => !c.isDeleted)),
         filter((ciphers) => ciphers.length > 0),
         take(1),
@@ -528,6 +528,10 @@ export class VaultComponent implements OnInit, OnDestroy {
           this.isEmpty = collections?.length === 0 && ciphers?.length === 0;
           this.performingInitialLoad = false;
           this.refreshing = false;
+
+          // Explicitly mark for check to ensure the view is updated
+          // Some sources are not always emitted within the Angular zone (e.g. ciphers updated via WS notifications)
+          this.changeDetectorRef.markForCheck();
         },
       );
   }
diff --git a/libs/angular/src/vault/components/add-edit.component.ts b/libs/angular/src/vault/components/add-edit.component.ts
index 2393863bb5f..b9defa8383d 100644
--- a/libs/angular/src/vault/components/add-edit.component.ts
+++ b/libs/angular/src/vault/components/add-edit.component.ts
@@ -422,10 +422,15 @@ export class AddEditComponent implements OnInit, OnDestroy {
 
     const activeUserId = await firstValueFrom(this.accountService.activeAccount$.pipe(getUserId));
     const cipher = await this.encryptCipher(activeUserId);
+
     try {
       this.formPromise = this.saveCipher(cipher);
-      await this.formPromise;
-      this.cipher.id = cipher.id;
+      const savedCipher = await this.formPromise;
+
+      // Reset local cipher from the saved cipher returned from the server
+      this.cipher = await savedCipher.decrypt(
+        await this.cipherService.getKeyForCipherKeyDecryption(savedCipher, activeUserId),
+      );
       this.toastService.showToast({
         variant: "success",
         title: null,
diff --git a/libs/angular/src/vault/components/vault-items.component.ts b/libs/angular/src/vault/components/vault-items.component.ts
index f7280cb74b3..852302cc0c4 100644
--- a/libs/angular/src/vault/components/vault-items.component.ts
+++ b/libs/angular/src/vault/components/vault-items.component.ts
@@ -1,13 +1,22 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { Directive, EventEmitter, Input, OnDestroy, OnInit, Output } from "@angular/core";
-import { BehaviorSubject, Subject, firstValueFrom, from, switchMap, takeUntil } from "rxjs";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import {
+  BehaviorSubject,
+  Subject,
+  combineLatest,
+  filter,
+  from,
+  of,
+  switchMap,
+  takeUntil,
+} from "rxjs";
 
 import { SearchService } from "@bitwarden/common/abstractions/search.service";
 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 { UserId } from "@bitwarden/common/types/guid";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 
@@ -21,17 +30,17 @@ export class VaultItemsComponent implements OnInit, OnDestroy {
 
   loaded = false;
   ciphers: CipherView[] = [];
-  filter: (cipher: CipherView) => boolean = null;
   deleted = false;
   organization: Organization;
 
   protected searchPending = false;
 
-  private userId: UserId;
+  /** Construct filters as an observable so it can be appended to the cipher stream. */
+  private _filter$ = new BehaviorSubject<(cipher: CipherView) => boolean | null>(null);
   private destroy$ = new Subject<void>();
-  private searchTimeout: any = null;
   private isSearchable: boolean = false;
   private _searchText$ = new BehaviorSubject<string>("");
+
   get searchText() {
     return this._searchText$.value;
   }
@@ -39,18 +48,28 @@ export class VaultItemsComponent implements OnInit, OnDestroy {
     this._searchText$.next(value);
   }
 
+  get filter() {
+    return this._filter$.value;
+  }
+
+  set filter(value: (cipher: CipherView) => boolean | null) {
+    this._filter$.next(value);
+  }
+
   constructor(
     protected searchService: SearchService,
     protected cipherService: CipherService,
     protected accountService: AccountService,
-  ) {}
+  ) {
+    this.subscribeToCiphers();
+  }
 
   async ngOnInit() {
-    this.userId = await firstValueFrom(getUserId(this.accountService.activeAccount$));
-
-    this._searchText$
+    combineLatest([getUserId(this.accountService.activeAccount$), this._searchText$])
       .pipe(
-        switchMap((searchText) => from(this.searchService.isSearchable(this.userId, searchText))),
+        switchMap(([userId, searchText]) =>
+          from(this.searchService.isSearchable(userId, searchText)),
+        ),
         takeUntil(this.destroy$),
       )
       .subscribe((isSearchable) => {
@@ -80,23 +99,6 @@ export class VaultItemsComponent implements OnInit, OnDestroy {
 
   async applyFilter(filter: (cipher: CipherView) => boolean = null) {
     this.filter = filter;
-    await this.search(null);
-  }
-
-  async search(timeout: number = null, indexedCiphers?: CipherView[]) {
-    this.searchPending = false;
-    if (this.searchTimeout != null) {
-      clearTimeout(this.searchTimeout);
-    }
-    if (timeout == null) {
-      await this.doSearch(indexedCiphers);
-      return;
-    }
-    this.searchPending = true;
-    this.searchTimeout = setTimeout(async () => {
-      await this.doSearch(indexedCiphers);
-      this.searchPending = false;
-    }, timeout);
   }
 
   selectCipher(cipher: CipherView) {
@@ -121,25 +123,44 @@ export class VaultItemsComponent implements OnInit, OnDestroy {
 
   protected deletedFilter: (cipher: CipherView) => boolean = (c) => c.isDeleted === this.deleted;
 
-  protected async doSearch(indexedCiphers?: CipherView[], userId?: UserId) {
-    // Get userId from activeAccount if not provided from parent stream
-    if (!userId) {
-      userId = await firstValueFrom(getUserId(this.accountService.activeAccount$));
-    }
+  /**
+   * Creates stream of dependencies that results in the list of ciphers to display
+   * within the vault list.
+   *
+   * Note: This previously used promises but race conditions with how the ciphers were
+   * stored in electron. Using observables is more reliable as fresh values will always
+   * cascade through the components.
+   */
+  private subscribeToCiphers() {
+    getUserId(this.accountService.activeAccount$)
+      .pipe(
+        switchMap((userId) =>
+          combineLatest([
+            this.cipherService.cipherViews$(userId).pipe(filter((ciphers) => ciphers != null)),
+            this.cipherService.failedToDecryptCiphers$(userId),
+            this._searchText$,
+            this._filter$,
+            of(userId),
+          ]),
+        ),
+        switchMap(([indexedCiphers, failedCiphers, searchText, filter, userId]) => {
+          let allCiphers = indexedCiphers ?? [];
+          const _failedCiphers = failedCiphers ?? [];
 
-    indexedCiphers =
-      indexedCiphers ?? (await firstValueFrom(this.cipherService.cipherViews$(userId)));
+          allCiphers = [..._failedCiphers, ...allCiphers];
 
-    const failedCiphers = await firstValueFrom(this.cipherService.failedToDecryptCiphers$(userId));
-    if (failedCiphers != null && failedCiphers.length > 0) {
-      indexedCiphers = [...failedCiphers, ...indexedCiphers];
-    }
-
-    this.ciphers = await this.searchService.searchCiphers(
-      this.userId,
-      this.searchText,
-      [this.filter, this.deletedFilter],
-      indexedCiphers,
-    );
+          return this.searchService.searchCiphers(
+            userId,
+            searchText,
+            [filter, this.deletedFilter],
+            allCiphers,
+          );
+        }),
+        takeUntilDestroyed(),
+      )
+      .subscribe((ciphers) => {
+        this.ciphers = ciphers;
+        this.loaded = true;
+      });
   }
 }
diff --git a/libs/angular/src/vault/components/view.component.ts b/libs/angular/src/vault/components/view.component.ts
index 0dda3c593b7..6b6f24f4217 100644
--- a/libs/angular/src/vault/components/view.component.ts
+++ b/libs/angular/src/vault/components/view.component.ts
@@ -11,7 +11,17 @@ import {
   OnInit,
   Output,
 } from "@angular/core";
-import { filter, firstValueFrom, map, Observable } from "rxjs";
+import {
+  BehaviorSubject,
+  combineLatest,
+  filter,
+  firstValueFrom,
+  map,
+  Observable,
+  of,
+  switchMap,
+  tap,
+} from "rxjs";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
@@ -46,11 +56,22 @@ import { DialogService, ToastService } from "@bitwarden/components";
 import { KeyService } from "@bitwarden/key-management";
 import { PasswordRepromptService } from "@bitwarden/vault";
 
-const BroadcasterSubscriptionId = "ViewComponent";
+const BroadcasterSubscriptionId = "BaseViewComponent";
 
 @Directive()
 export class ViewComponent implements OnDestroy, OnInit {
-  @Input() cipherId: string;
+  /** Observable of cipherId$ that will update each time the `Input` updates */
+  private _cipherId$ = new BehaviorSubject<string>(null);
+
+  @Input()
+  set cipherId(value: string) {
+    this._cipherId$.next(value);
+  }
+
+  get cipherId(): string {
+    return this._cipherId$.getValue();
+  }
+
   @Input() collectionId: string;
   @Output() onEditCipher = new EventEmitter<CipherView>();
   @Output() onCloneCipher = new EventEmitter<CipherView>();
@@ -126,13 +147,30 @@ export class ViewComponent implements OnDestroy, OnInit {
         switch (message.command) {
           case "syncCompleted":
             if (message.successfully) {
-              await this.load();
               this.changeDetectorRef.detectChanges();
             }
             break;
         }
       });
     });
+
+    // Set up the subscription to the activeAccount$ and cipherId$ observables
+    combineLatest([this.accountService.activeAccount$.pipe(getUserId), this._cipherId$])
+      .pipe(
+        tap(() => this.cleanUp()),
+        switchMap(([userId, cipherId]) => {
+          const cipher$ = this.cipherService.cipherViews$(userId).pipe(
+            map((ciphers) => ciphers?.find((c) => c.id === cipherId)),
+            filter((cipher) => !!cipher),
+          );
+          return combineLatest([of(userId), cipher$]);
+        }),
+      )
+      .subscribe(([userId, cipher]) => {
+        this.cipher = cipher;
+
+        void this.constructCipherDetails(userId);
+      });
   }
 
   ngOnDestroy() {
@@ -140,70 +178,6 @@ export class ViewComponent implements OnDestroy, OnInit {
     this.cleanUp();
   }
 
-  async load() {
-    this.cleanUp();
-
-    // Grab individual cipher from `cipherViews$` for the most up-to-date information
-    const activeUserId = await firstValueFrom(this.accountService.activeAccount$.pipe(getUserId));
-    this.cipher = await firstValueFrom(
-      this.cipherService.cipherViews$(activeUserId).pipe(
-        map((ciphers) => ciphers?.find((c) => c.id === this.cipherId)),
-        filter((cipher) => !!cipher),
-      ),
-    );
-
-    this.canAccessPremium = await firstValueFrom(
-      this.billingAccountProfileStateService.hasPremiumFromAnySource$(activeUserId),
-    );
-    this.showPremiumRequiredTotp =
-      this.cipher.login.totp && !this.canAccessPremium && !this.cipher.organizationUseTotp;
-    this.canDeleteCipher$ = this.cipherAuthorizationService.canDeleteCipher$(this.cipher, [
-      this.collectionId as CollectionId,
-    ]);
-    this.canRestoreCipher$ = this.cipherAuthorizationService.canRestoreCipher$(this.cipher);
-
-    if (this.cipher.folderId) {
-      this.folder = await (
-        await firstValueFrom(this.folderService.folderViews$(activeUserId))
-      ).find((f) => f.id == this.cipher.folderId);
-    }
-
-    const canGenerateTotp =
-      this.cipher.type === CipherType.Login &&
-      this.cipher.login.totp &&
-      (this.cipher.organizationUseTotp || this.canAccessPremium);
-
-    this.totpInfo$ = canGenerateTotp
-      ? this.totpService.getCode$(this.cipher.login.totp).pipe(
-          map((response) => {
-            const epoch = Math.round(new Date().getTime() / 1000.0);
-            const mod = epoch % response.period;
-
-            // Format code
-            const totpCodeFormatted =
-              response.code.length > 4
-                ? `${response.code.slice(0, Math.floor(response.code.length / 2))} ${response.code.slice(Math.floor(response.code.length / 2))}`
-                : response.code;
-
-            return {
-              totpCode: response.code,
-              totpCodeFormatted,
-              totpDash: +(Math.round(((78.6 / response.period) * mod + "e+2") as any) + "e-2"),
-              totpSec: response.period - mod,
-              totpLow: response.period - mod <= 7,
-            } as TotpInfo;
-          }),
-        )
-      : undefined;
-
-    if (this.previousCipherId !== this.cipherId) {
-      // 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
-      this.eventCollectionService.collect(EventType.Cipher_ClientViewed, this.cipherId);
-    }
-    this.previousCipherId = this.cipherId;
-  }
-
   async edit() {
     this.onEditCipher.emit(this.cipher);
   }
@@ -533,4 +507,61 @@ export class ViewComponent implements OnDestroy, OnInit {
     this.showCardCode = false;
     this.passwordReprompted = false;
   }
+
+  /**
+   * When a cipher is viewed, construct all details for the view that are not directly
+   * available from the cipher object itself.
+   */
+  private async constructCipherDetails(userId: UserId) {
+    this.canAccessPremium = await firstValueFrom(
+      this.billingAccountProfileStateService.hasPremiumFromAnySource$(userId),
+    );
+    this.showPremiumRequiredTotp =
+      this.cipher.login.totp && !this.canAccessPremium && !this.cipher.organizationUseTotp;
+    this.canDeleteCipher$ = this.cipherAuthorizationService.canDeleteCipher$(this.cipher, [
+      this.collectionId as CollectionId,
+    ]);
+    this.canRestoreCipher$ = this.cipherAuthorizationService.canRestoreCipher$(this.cipher);
+
+    if (this.cipher.folderId) {
+      this.folder = await (
+        await firstValueFrom(this.folderService.folderViews$(userId))
+      ).find((f) => f.id == this.cipher.folderId);
+    }
+
+    const canGenerateTotp =
+      this.cipher.type === CipherType.Login &&
+      this.cipher.login.totp &&
+      (this.cipher.organizationUseTotp || this.canAccessPremium);
+
+    this.totpInfo$ = canGenerateTotp
+      ? this.totpService.getCode$(this.cipher.login.totp).pipe(
+          map((response) => {
+            const epoch = Math.round(new Date().getTime() / 1000.0);
+            const mod = epoch % response.period;
+
+            // Format code
+            const totpCodeFormatted =
+              response.code.length > 4
+                ? `${response.code.slice(0, Math.floor(response.code.length / 2))} ${response.code.slice(Math.floor(response.code.length / 2))}`
+                : response.code;
+
+            return {
+              totpCode: response.code,
+              totpCodeFormatted,
+              totpDash: +(Math.round(((78.6 / response.period) * mod + "e+2") as any) + "e-2"),
+              totpSec: response.period - mod,
+              totpLow: response.period - mod <= 7,
+            } as TotpInfo;
+          }),
+        )
+      : undefined;
+
+    if (this.previousCipherId !== this.cipherId) {
+      // 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
+      this.eventCollectionService.collect(EventType.Cipher_ClientViewed, this.cipherId);
+    }
+    this.previousCipherId = this.cipherId;
+  }
 }
diff --git a/libs/common/src/platform/notifications/internal/default-notifications.service.ts b/libs/common/src/platform/notifications/internal/default-notifications.service.ts
index 423b3370455..40c93f8f22a 100644
--- a/libs/common/src/platform/notifications/internal/default-notifications.service.ts
+++ b/libs/common/src/platform/notifications/internal/default-notifications.service.ts
@@ -153,14 +153,14 @@ export class DefaultNotificationsService implements NotificationsServiceAbstract
         await this.syncService.syncUpsertCipher(
           notification.payload as SyncCipherNotification,
           notification.type === NotificationType.SyncCipherUpdate,
-          payloadUserId,
+          userId,
         );
         break;
       case NotificationType.SyncCipherDelete:
       case NotificationType.SyncLoginDelete:
         await this.syncService.syncDeleteCipher(
           notification.payload as SyncCipherNotification,
-          payloadUserId,
+          userId,
         );
         break;
       case NotificationType.SyncFolderCreate:
diff --git a/libs/common/src/vault/services/cipher.service.ts b/libs/common/src/vault/services/cipher.service.ts
index 8d4146eaaba..c192876c83e 100644
--- a/libs/common/src/vault/services/cipher.service.ts
+++ b/libs/common/src/vault/services/cipher.service.ts
@@ -1,17 +1,6 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
-import {
-  combineLatest,
-  filter,
-  firstValueFrom,
-  map,
-  merge,
-  Observable,
-  of,
-  shareReplay,
-  Subject,
-  switchMap,
-} from "rxjs";
+import { combineLatest, filter, firstValueFrom, map, Observable, Subject, switchMap } from "rxjs";
 import { SemVer } from "semver";
 
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
@@ -40,6 +29,7 @@ import { SymmetricCryptoKey } from "../../platform/models/domain/symmetric-crypt
 import { StateProvider } from "../../platform/state";
 import { CipherId, CollectionId, OrganizationId, UserId } from "../../types/guid";
 import { OrgKey, UserKey } from "../../types/key";
+import { perUserCache$ } from "../../vault/utils/observable-utilities";
 import { CipherService as CipherServiceAbstraction } from "../abstractions/cipher.service";
 import { CipherFileUploadService } from "../abstractions/file-upload/cipher-file-upload.service";
 import { FieldType } from "../enums";
@@ -91,11 +81,12 @@ export class CipherService implements CipherServiceAbstraction {
     this.sortCiphersByLastUsed,
   );
   /**
-   * Observable that forces the `cipherViews$` observable to re-emit with the provided value.
-   * Used to let subscribers of `cipherViews$` know that the decrypted ciphers have been cleared for the active user.
+   * Observable that forces the `cipherViews$` observable for the given user to emit a null value.
+   * Used to let subscribers of `cipherViews$` know that the decrypted ciphers have been cleared for the user and to
+   * clear them from the shareReplay buffer created in perUserCache$().
    * @private
    */
-  private forceCipherViews$: Subject<CipherView[]> = new Subject<CipherView[]>();
+  private clearCipherViewsForUser$: Subject<UserId> = new Subject<UserId>();
 
   constructor(
     private keyService: KeyService,
@@ -132,13 +123,16 @@ export class CipherService implements CipherServiceAbstraction {
    * A `null` value indicates that the latest encrypted ciphers have not been decrypted yet and that
    * decryption is in progress. The latest decrypted ciphers will be emitted once decryption is complete.
    */
-  cipherViews$(userId: UserId): Observable<CipherView[] | null> {
-    return combineLatest([this.encryptedCiphersState(userId).state$, this.localData$(userId)]).pipe(
-      filter(([ciphers]) => ciphers != null), // Skip if ciphers haven't been loaded yor synced yet
-      switchMap(() => merge(this.forceCipherViews$, this.getAllDecrypted(userId))),
-      shareReplay({ bufferSize: 1, refCount: true }),
+  cipherViews$ = perUserCache$((userId: UserId): Observable<CipherView[] | null> => {
+    return combineLatest([
+      this.encryptedCiphersState(userId).state$,
+      this.localData$(userId),
+      this.keyService.cipherDecryptionKeys$(userId, true),
+    ]).pipe(
+      filter(([ciphers, keys]) => ciphers != null && keys != null), // Skip if ciphers haven't been loaded yor synced yet
+      switchMap(() => this.getAllDecrypted(userId)),
     );
-  }
+  }, this.clearCipherViewsForUser$);
 
   addEditCipherInfo$(userId: UserId): Observable<AddEditCipherInfo> {
     return this.addEditCipherInfoState(userId).state$;
@@ -149,13 +143,11 @@ export class CipherService implements CipherServiceAbstraction {
    *
    * An empty array indicates that all ciphers were successfully decrypted.
    */
-  failedToDecryptCiphers$(userId: UserId): Observable<CipherView[]> {
+  failedToDecryptCiphers$ = perUserCache$((userId: UserId): Observable<CipherView[]> => {
     return this.failedToDecryptCiphersState(userId).state$.pipe(
       filter((ciphers) => ciphers != null),
-      switchMap((ciphers) => merge(this.forceCipherViews$, of(ciphers))),
-      shareReplay({ bufferSize: 1, refCount: true }),
     );
-  }
+  }, this.clearCipherViewsForUser$);
 
   async setDecryptedCipherCache(value: CipherView[], userId: UserId) {
     // Sometimes we might prematurely decrypt the vault and that will result in no ciphers
@@ -190,10 +182,8 @@ export class CipherService implements CipherServiceAbstraction {
     userId ??= activeUserId;
     await this.clearDecryptedCiphersState(userId);
 
-    // Force the cipherView$ observable (which always tracks the active user) to re-emit
-    if (userId == activeUserId) {
-      this.forceCipherViews$.next(null);
-    }
+    // Force the cached cipherView$ observable(s) to emit a null value
+    this.clearCipherViewsForUser$.next(userId);
   }
 
   async encrypt(
@@ -402,10 +392,14 @@ export class CipherService implements CipherServiceAbstraction {
       return await this.getDecryptedCiphers(userId);
     }
 
-    const [newDecCiphers, failedCiphers] = await this.decryptCiphers(
-      await this.getAll(userId),
-      userId,
-    );
+    const decrypted = await this.decryptCiphers(await this.getAll(userId), userId);
+
+    // We failed to decrypt, return empty array but do not cache
+    if (decrypted == null) {
+      return [];
+    }
+
+    const [newDecCiphers, failedCiphers] = decrypted;
 
     await this.setDecryptedCipherCache(newDecCiphers, userId);
     await this.setFailedDecryptedCiphers(failedCiphers, userId);
@@ -429,12 +423,12 @@ export class CipherService implements CipherServiceAbstraction {
   private async decryptCiphers(
     ciphers: Cipher[],
     userId: UserId,
-  ): Promise<[CipherView[], CipherView[]]> {
+  ): Promise<[CipherView[], CipherView[]] | null> {
     const keys = await firstValueFrom(this.keyService.cipherDecryptionKeys$(userId, true));
 
     if (keys == null || (keys.userKey == null && Object.keys(keys.orgKeys).length === 0)) {
       // return early if there are no keys to decrypt with
-      return [[], []];
+      return null;
     }
 
     // Group ciphers by orgId or under 'null' for the user's ciphers
diff --git a/libs/common/src/vault/tasks/services/default-task.service.ts b/libs/common/src/vault/tasks/services/default-task.service.ts
index 016eed2e7d6..7386102263c 100644
--- a/libs/common/src/vault/tasks/services/default-task.service.ts
+++ b/libs/common/src/vault/tasks/services/default-task.service.ts
@@ -12,8 +12,11 @@ import { MessageListener } from "@bitwarden/common/platform/messaging";
 import { NotificationsService } from "@bitwarden/common/platform/notifications";
 import { StateProvider } from "@bitwarden/common/platform/state";
 import { SecurityTaskId, UserId } from "@bitwarden/common/types/guid";
+import {
+  filterOutNullish,
+  perUserCache$,
+} from "@bitwarden/common/vault/utils/observable-utilities";
 
-import { filterOutNullish, perUserCache$ } from "../../utils/observable-utilities";
 import { TaskService } from "../abstractions/task.service";
 import { SecurityTaskStatus } from "../enums";
 import { SecurityTask, SecurityTaskData, SecurityTaskResponse } from "../models";
diff --git a/libs/common/src/vault/utils/observable-utilities.ts b/libs/common/src/vault/utils/observable-utilities.ts
index bb559c600d3..cdec51fc953 100644
--- a/libs/common/src/vault/utils/observable-utilities.ts
+++ b/libs/common/src/vault/utils/observable-utilities.ts
@@ -1,20 +1,38 @@
-import { filter, Observable, OperatorFunction, shareReplay } from "rxjs";
+import { EMPTY, filter, map, merge, Observable, OperatorFunction, shareReplay } from "rxjs";
 
 import { UserId } from "@bitwarden/common/types/guid";
 
 /**
  * Builds an observable once per userId and caches it for future requests.
  * The built observables are shared among subscribers with a replay buffer size of 1.
+ *
+ * Optionally, a clearBuffer$ observable can be provided to clear the replay buffer for a specific or all userIds.
  * @param create - A function that creates an observable for a given userId.
+ * @param clearBuffer$ - An observable that, when emitted, clears the buffer for the emitted userId. When null is emitted, all caches are cleared.
  */
 export function perUserCache$<TValue>(
   create: (userId: UserId) => Observable<TValue>,
-): (userId: UserId) => Observable<TValue> {
-  const cache = new Map<UserId, Observable<TValue>>();
+  clearBuffer$: Observable<UserId | null>,
+): (userId: UserId) => Observable<TValue | null>;
+export function perUserCache$<TValue>(
+  create: (userId: UserId) => Observable<TValue>,
+): (userId: UserId) => Observable<TValue>;
+export function perUserCache$<TValue>(
+  create: (userId: UserId) => Observable<TValue>,
+  clearBuffer$: Observable<UserId | null> | undefined = undefined,
+): (userId: UserId) => Observable<TValue | null> {
+  const cache = new Map<UserId, Observable<TValue | null>>();
   return (userId: UserId) => {
     let observable = cache.get(userId);
     if (!observable) {
-      observable = create(userId).pipe(shareReplay({ bufferSize: 1, refCount: false }));
+      clearBuffer$ ??= EMPTY;
+      observable = merge(
+        create(userId),
+        clearBuffer$.pipe(
+          filter((clearId) => clearId === userId || clearId === null),
+          map(() => null),
+        ),
+      ).pipe(shareReplay({ bufferSize: 1, refCount: false }));
       cache.set(userId, observable);
     }
     return observable;

From b66430b25cb68fe3f8a99b6f1d2631a3807a199e Mon Sep 17 00:00:00 2001
From: Jonathan Prusik <jprusik@users.noreply.github.com>
Date: Tue, 15 Apr 2025 16:36:05 -0400
Subject: [PATCH 06/36] [PM-19781] Lit Components icons cleanup (#14294)

* update icon shapes to match new design system icons

* add AngleUpIcon to storybook

* rename Family icon to Users to match design system naming conventions

* add Collection icon

* move illustrations to their own path/category to match design system convention

* remove hardcoded PartyHorn illustration size

* fix swapped story names

* rename PartyHorn illustration to Celebrate to match design system convention

* update Warning illustration to use new design system shape
---
 .../cipher/cipher-indicator-icons.ts          |  4 +-
 .../content/components/icons/angle-down.ts    |  4 +-
 .../content/components/icons/angle-up.ts      |  9 +---
 .../content/components/icons/business.ts      | 19 ++------
 .../content/components/icons/close.ts         |  4 +-
 .../content/components/icons/collection.ts    | 23 ++++++++++
 .../components/icons/exclamation-triangle.ts  | 14 +++++-
 .../content/components/icons/family.ts        | 18 --------
 .../content/components/icons/folder.ts        |  5 ++-
 .../content/components/icons/globe.ts         |  5 +--
 .../content/components/icons/index.ts         |  6 +--
 .../content/components/icons/pencil-square.ts |  8 +++-
 .../content/components/icons/shield.ts        |  4 +-
 .../autofill/content/components/icons/user.ts |  4 +-
 .../content/components/icons/users.ts         | 18 ++++++++
 .../content/components/icons/warning.ts       | 23 ----------
 .../celebrate.ts}                             | 12 ++---
 .../content/components/illustrations/index.ts |  3 ++
 .../{icons => illustrations}/keyhole.ts       |  0
 .../components/illustrations/warning.ts       | 22 ++++++++++
 .../lit-stories/.lit-docs/icons.mdx           | 10 ++---
 ... => cipher-indicator-icons.lit-stories.ts} |  2 +-
 .../lit-stories/icons/icons.lit-stories.ts    | 10 ++---
 .../illustrations.lit-stories.ts              | 44 +++++++++++++++++++
 .../components/notification/button-row.ts     |  4 +-
 .../notification/confirmation/body.ts         |  4 +-
 26 files changed, 168 insertions(+), 111 deletions(-)
 create mode 100644 apps/browser/src/autofill/content/components/icons/collection.ts
 delete mode 100644 apps/browser/src/autofill/content/components/icons/family.ts
 create mode 100644 apps/browser/src/autofill/content/components/icons/users.ts
 delete mode 100644 apps/browser/src/autofill/content/components/icons/warning.ts
 rename apps/browser/src/autofill/content/components/{icons/party-horn.ts => illustrations/celebrate.ts} (98%)
 create mode 100644 apps/browser/src/autofill/content/components/illustrations/index.ts
 rename apps/browser/src/autofill/content/components/{icons => illustrations}/keyhole.ts (100%)
 create mode 100644 apps/browser/src/autofill/content/components/illustrations/warning.ts
 rename apps/browser/src/autofill/content/components/lit-stories/ciphers/{cipher-indicator-icon.lit-stories.ts => cipher-indicator-icons.lit-stories.ts} (94%)
 create mode 100644 apps/browser/src/autofill/content/components/lit-stories/illustrations/illustrations.lit-stories.ts

diff --git a/apps/browser/src/autofill/content/components/cipher/cipher-indicator-icons.ts b/apps/browser/src/autofill/content/components/cipher/cipher-indicator-icons.ts
index 39d4dd28f24..9096149f510 100644
--- a/apps/browser/src/autofill/content/components/cipher/cipher-indicator-icons.ts
+++ b/apps/browser/src/autofill/content/components/cipher/cipher-indicator-icons.ts
@@ -4,7 +4,7 @@ import { html } from "lit";
 import { Theme } from "@bitwarden/common/platform/enums";
 
 import { themes } from "../../../content/components/constants/styles";
-import { Business, Family } from "../../../content/components/icons";
+import { Business, Users } from "../../../content/components/icons";
 
 // @TODO connect data source to icon checks
 // @TODO support other indicator types (attachments, etc)
@@ -19,7 +19,7 @@ export function CipherInfoIndicatorIcons({
 }) {
   const indicatorIcons = [
     ...(showBusinessIcon ? [Business({ color: themes[theme].text.muted, theme })] : []),
-    ...(showFamilyIcon ? [Family({ color: themes[theme].text.muted, theme })] : []),
+    ...(showFamilyIcon ? [Users({ color: themes[theme].text.muted, theme })] : []),
   ];
 
   return indicatorIcons.length
diff --git a/apps/browser/src/autofill/content/components/icons/angle-down.ts b/apps/browser/src/autofill/content/components/icons/angle-down.ts
index db5275aafa9..27cd5ab81c5 100644
--- a/apps/browser/src/autofill/content/components/icons/angle-down.ts
+++ b/apps/browser/src/autofill/content/components/icons/angle-down.ts
@@ -8,10 +8,10 @@ export function AngleDown({ color, disabled, theme }: IconProps) {
   const shapeColor = disabled ? themes[theme].secondary["300"] : color || themes[theme].text.main;
 
   return html`
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 12" fill="none">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 8" fill="none">
       <path
         class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
-        d="M12.004 11.244a2.705 2.705 0 0 1-1.75-.644L.266 2.154a.76.76 0 0 1-.263-.51.75.75 0 0 1 1.233-.637l9.99 8.445a1.186 1.186 0 0 0 1.565 0l10-8.54a.751.751 0 0 1 .973 1.141l-10 8.538a2.703 2.703 0 0 1-1.76.653Z"
+        d="M13.53.47a.75.75 0 0 0-1.06 0L7 5.94 1.53.47A.75.75 0 1 0 .47 1.53l6 6a.75.75 0 0 0 1.06 0l6-6a.75.75 0 0 0 0-1.06Z"
       />
     </svg>
   `;
diff --git a/apps/browser/src/autofill/content/components/icons/angle-up.ts b/apps/browser/src/autofill/content/components/icons/angle-up.ts
index 7344123d5ad..f8bda632285 100644
--- a/apps/browser/src/autofill/content/components/icons/angle-up.ts
+++ b/apps/browser/src/autofill/content/components/icons/angle-up.ts
@@ -8,15 +8,10 @@ export function AngleUp({ color, disabled, theme }: IconProps) {
   const shapeColor = disabled ? themes[theme].secondary["300"] : color || themes[theme].text.main;
 
   return html`
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 12"
-      fill="none"
-      style="transform: scaleY(-1);"
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 8" fill="none">
       <path
         class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
-        d="M12.004 11.244a2.705 2.705 0 0 1-1.75-.644L.266 2.154a.76.76 0 0 1-.263-.51.75.75 0 0 1 1.233-.637l9.99 8.445a1.186 1.186 0 0 0 1.565 0l10-8.54a.751.751 0 0 1 .973 1.141l-10 8.538a2.703 2.703 0 0 1-1.76.653Z"
+        d="M.47 7.53a.75.75 0 0 0 1.06 0L7 2.06l5.47 5.47a.75.75 0 1 0 1.06-1.06l-6-6a.75.75 0 0 0-1.06 0l-6 6a.75.75 0 0 0 0 1.06Z"
       />
     </svg>
   `;
diff --git a/apps/browser/src/autofill/content/components/icons/business.ts b/apps/browser/src/autofill/content/components/icons/business.ts
index ef8e082c21f..79e64a0a1f9 100644
--- a/apps/browser/src/autofill/content/components/icons/business.ts
+++ b/apps/browser/src/autofill/content/components/icons/business.ts
@@ -8,30 +8,17 @@ export function Business({ color, disabled, theme }: IconProps) {
   const shapeColor = disabled ? themes[theme].secondary["300"] : color || themes[theme].text.main;
 
   return html`
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 16" fill="none">
       <path
         class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
-        fill-rule="evenodd"
-        d="M6.015 16.482a3.007 3.007 0 1 0 0-6.015 3.007 3.007 0 0 0 0 6.015Zm0 1.504a4.51 4.51 0 1 0 0-9.022 4.51 4.51 0 0 0 0 9.022Z"
-        clip-rule="evenodd"
+        d="M3.25 3a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5h-1.5ZM7.25 3a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5h-1.5ZM7.25 6a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5h-1.5ZM6.5 9.75A.75.75 0 0 1 7.25 9h1.5a.75.75 0 0 1 0 1.5h-1.5a.75.75 0 0 1-.75-.75ZM2.5 6.75A.75.75 0 0 1 3.25 6h1.5a.75.75 0 0 1 0 1.5h-1.5a.75.75 0 0 1-.75-.75ZM3.25 9a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5h-1.5Z"
       />
       <path
         class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
         fill-rule="evenodd"
-        d="M10.439 22.497c-.548-2.805-2.51-4.511-4.427-4.511-1.917 0-3.879 1.706-4.426 4.51h8.853Zm-8.934.525v-.002.002ZM.659 24h10.466c.645 0 .984-.424.888-1.18-.457-3.591-2.97-6.338-6-6.338-3.032 0-5.544 2.747-6.001 6.339-.066.511.143 1.18.647 1.18Z"
+        d="M1 0a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1H1Zm.5 1.5v13H4V13a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1.5h2.5v-13h-9Z"
         clip-rule="evenodd"
       />
-      <path
-        class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
-        fill-rule="evenodd"
-        d="M7.46 1.387v7.577a.694.694 0 1 1-1.387 0V.97c0-.536.434-.971.97-.971H23.03c.536 0 .971.435.971.971v20.496a.971.971 0 0 1-.971.971h-11a.694.694 0 0 1 0-1.387h10.584V1.387H7.46Z"
-        clip-rule="evenodd"
-      />
-      <path
-        class=${css(buildIconColorRule(shapeColor, ruleNames.stroke))}
-        stroke-linecap="round"
-        d="M14.033 3.953h2.007M9.522 3.953h2.007M18.544 3.953h2.007M14.033 8.464h2.007M9.522 8.464h2.007M18.544 8.464h2.007M14.033 12.975h2.007M9.522 12.975h2.007M18.544 12.975h2.007M14.033 17.485h2.007M18.544 17.485h2.007"
-      />
     </svg>
   `;
 }
diff --git a/apps/browser/src/autofill/content/components/icons/close.ts b/apps/browser/src/autofill/content/components/icons/close.ts
index c9d9286ca3f..27610bc7773 100644
--- a/apps/browser/src/autofill/content/components/icons/close.ts
+++ b/apps/browser/src/autofill/content/components/icons/close.ts
@@ -8,10 +8,10 @@ export function Close({ color, disabled, theme }: IconProps) {
   const shapeColor = disabled ? themes[theme].secondary["300"] : color || themes[theme].text.main;
 
   return html`
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="none">
       <path
         class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
-        d="m19.809 19.21-8.487-8.226a.592.592 0 0 1 0-.852l8.382-8.13a.594.594 0 0 0 .175-.423.593.593 0 0 0-.182-.42.632.632 0 0 0-.872-.007l-8.383 8.126a.634.634 0 0 1-.88 0l-8.41-8.135a.642.642 0 0 0-.887-.008.602.602 0 0 0-.182.431.588.588 0 0 0 .19.428l8.41 8.139a.592.592 0 0 1 0 .852l-8.5 8.225a.605.605 0 0 0-.183.427c0 .16.066.313.183.426a.635.635 0 0 0 .88-.001l8.5-8.226a.635.635 0 0 1 .88 0l8.488 8.226a.64.64 0 0 0 .887.008.605.605 0 0 0 .182-.43.591.591 0 0 0-.19-.429h-.001Z"
+        d="M.22.22a.75.75 0 0 1 1.06 0L7 5.94 12.72.22a.75.75 0 1 1 1.06 1.06L8.06 7l5.72 5.72a.75.75 0 1 1-1.06 1.06L7 8.06l-5.72 5.72a.75.75 0 0 1-1.06-1.06L5.94 7 .22 1.28a.75.75 0 0 1 0-1.06Z"
       />
     </svg>
   `;
diff --git a/apps/browser/src/autofill/content/components/icons/collection.ts b/apps/browser/src/autofill/content/components/icons/collection.ts
new file mode 100644
index 00000000000..fb2c58647c5
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/icons/collection.ts
@@ -0,0 +1,23 @@
+import { css } from "@emotion/css";
+import { html } from "lit";
+
+import { IconProps } from "../common-types";
+import { buildIconColorRule, ruleNames, themes } from "../constants/styles";
+
+export function Collection({ color, disabled, theme }: IconProps) {
+  const shapeColor = disabled ? themes[theme].secondary["300"] : color || themes[theme].text.main;
+
+  return html`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="none">
+      <path
+        class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
+        d="M3.5.75A.75.75 0 0 1 4.25 0h5.5a.75.75 0 0 1 0 1.5h-5.5A.75.75 0 0 1 3.5.75ZM2.25 2a.75.75 0 0 0 0 1.5h9.5a.75.75 0 0 0 0-1.5h-9.5Z"
+      />
+      <path
+        class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
+        fill-rule="evenodd"
+        d="M12 4a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h10Zm0 1.5a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5h10Z"
+      />
+    </svg>
+  `;
+}
diff --git a/apps/browser/src/autofill/content/components/icons/exclamation-triangle.ts b/apps/browser/src/autofill/content/components/icons/exclamation-triangle.ts
index d87d5621e30..c4f587b2d7b 100644
--- a/apps/browser/src/autofill/content/components/icons/exclamation-triangle.ts
+++ b/apps/browser/src/autofill/content/components/icons/exclamation-triangle.ts
@@ -8,10 +8,20 @@ export function ExclamationTriangle({ color, disabled, theme }: IconProps) {
   const shapeColor = disabled ? themes[theme].secondary["300"] : color || themes[theme].text.main;
 
   return html`
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 22" fill="none">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 15" fill="none">
       <path
         class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
-        d="M21.627 21.877H2.373a2.28 2.28 0 0 1-1.195-.326 2.394 2.394 0 0 1-.869-.908 2.433 2.433 0 0 1 .015-2.404L9.951 1.33c.211-.368.511-.672.87-.883a2.322 2.322 0 0 1 2.357 0c.36.211.66.515.871.882l9.627 16.911a2.442 2.442 0 0 1 .015 2.404 2.39 2.39 0 0 1-.87.908c-.362.217-.775.33-1.194.326ZM12 1.677a.844.844 0 0 0-.436.115.883.883 0 0 0-.322.326l-9.625 16.91a.846.846 0 0 0 0 .844.876.876 0 0 0 .322.334.84.84 0 0 0 .44.117h19.248a.837.837 0 0 0 .44-.117.882.882 0 0 0 .322-.334.846.846 0 0 0 0-.843L12.758 2.118a.89.89 0 0 0-.322-.326.837.837 0 0 0-.436-.114Zm0 13.309a.735.735 0 0 1-.53-.228.794.794 0 0 1-.22-.55V7.105a.79.79 0 0 1 .22-.55.735.735 0 0 1 1.06 0c.14.146.22.344.22.55v7.105a.79.79 0 0 1-.22.55.74.74 0 0 1-.53.227Zm0 3.84c.491 0 .89-.412.89-.92 0-.51-.399-.922-.89-.922s-.89.412-.89.921c0 .51.399.922.89.922Z"
+        d="M9 11C9 11.5523 8.55229 12 8 12C7.44772 12 7 11.5523 7 11C7 10.4477 7.44772 10 8 10C8.55229 10 9 10.4477 9 11Z"
+      />
+      <path
+        class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
+        d="M7.31639 5C7.01564 5 6.78295 5.26359 6.82025 5.56202L7.19525 8.56202C7.22653 8.81223 7.43923 9 7.69139 9H8.30861C8.56077 9 8.77347 8.81223 8.80475 8.56202L9.17975 5.56202C9.21705 5.26359 8.98436 5 8.68361 5H7.31639Z"
+      />
+      <path
+        class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M9.37384 1.01584C8.76324 -0.04174 7.23675 -0.041739 6.62616 1.01584L0.2149 12.1205C-0.395695 13.1781 0.36755 14.5 1.58874 14.5H14.4113C15.6325 14.5 16.3957 13.1781 15.7851 12.1205L9.37384 1.01584ZM14.4861 12.8705L8.0748 1.76584C8.06066 1.74135 8.05029 1.7355 8.04562 1.73291C8.03694 1.7281 8.02122 1.72266 8 1.72266C7.97878 1.72266 7.96305 1.7281 7.95438 1.73291C7.94971 1.7355 7.93934 1.74135 7.9252 1.76584L1.51394 12.8705C1.4998 12.895 1.49992 12.9069 1.50001 12.9122C1.50018 12.9221 1.50333 12.9385 1.51394 12.9568C1.52455 12.9752 1.53713 12.9861 1.54563 12.9912C1.55021 12.994 1.56046 13 1.58874 13H14.4113C14.4395 13 14.4498 12.994 14.4544 12.9912C14.4629 12.9861 14.4754 12.9752 14.4861 12.9568C14.4967 12.9385 14.4998 12.9221 14.5 12.9122C14.5001 12.9069 14.5002 12.895 14.4861 12.8705Z"
       />
     </svg>
   `;
diff --git a/apps/browser/src/autofill/content/components/icons/family.ts b/apps/browser/src/autofill/content/components/icons/family.ts
deleted file mode 100644
index 9870c5d37c0..00000000000
--- a/apps/browser/src/autofill/content/components/icons/family.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { css } from "@emotion/css";
-import { html } from "lit";
-
-import { IconProps } from "../common-types";
-import { buildIconColorRule, ruleNames, themes } from "../constants/styles";
-
-export function Family({ color, disabled, theme }: IconProps) {
-  const shapeColor = disabled ? themes[theme].secondary["300"] : color || themes[theme].text.main;
-
-  return html`
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 18" fill="none">
-      <path
-        class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
-        d="M20.535 8.219a4.5 4.5 0 1 0-5.07 0c-.34.187-.657.414-.945.675a3 3 0 0 0-5.04 0 5.745 5.745 0 0 0-.945-.675 4.5 4.5 0 1 0-5.07 0A7.5 7.5 0 0 0 0 13.829C0 14.34.135 15 .645 15H8.07a6.6 6.6 0 0 0-.57 2.055c0 .405.105.945.48.945h7.83c.48 0 .735-.345.66-.945A7.503 7.503 0 0 0 15.93 15h7.17c.645 0 .975-.42.885-1.17a7.5 7.5 0 0 0-3.45-5.61ZM15 4.499a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm-3 4.5a1.5 1.5 0 0 1 1.5 1.11c.016.13.016.26 0 .39a1.5 1.5 0 0 1-.99 1.395 1.29 1.29 0 0 1-1.02 0 1.5 1.5 0 0 1-.99-1.395 1.778 1.778 0 0 1 0-.39A1.5 1.5 0 0 1 12 9Zm-9-4.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm-1.425 9C2.13 10.71 4.08 9 6.075 9A4.035 4.035 0 0 1 9 10.499a3 3 0 0 0 .945 2.145A4.499 4.499 0 0 0 9 13.5H1.575Zm13.29 3h-5.73A5.07 5.07 0 0 1 9.75 15 2.865 2.865 0 0 1 12 13.5h.15a2.82 2.82 0 0 1 2.16 1.5c.27.465.457.972.555 1.5Zm.135-3a4.5 4.5 0 0 0-.945-.825A3 3 0 0 0 15 10.5 4.08 4.08 0 0 1 18 9a5.01 5.01 0 0 1 4.41 4.5H15Z"
-      />
-    </svg>
-  `;
-}
diff --git a/apps/browser/src/autofill/content/components/icons/folder.ts b/apps/browser/src/autofill/content/components/icons/folder.ts
index 84577aef820..1b93d2d32ea 100644
--- a/apps/browser/src/autofill/content/components/icons/folder.ts
+++ b/apps/browser/src/autofill/content/components/icons/folder.ts
@@ -8,10 +8,11 @@ export function Folder({ color, disabled, theme }: IconProps) {
   const shapeColor = disabled ? themes[theme].secondary["300"] : color || themes[theme].text.main;
 
   return html`
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="none">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 13" fill="none">
       <path
         class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
-        d="M12.705 2.813h-4.65a.48.48 0 0 1-.34-.155.509.509 0 0 1-.134-.355v-.231a1.354 1.354 0 0 0-.378-.947 1.291 1.291 0 0 0-.92-.397H1.296a1.291 1.291 0 0 0-.919.398A1.354 1.354 0 0 0 0 2.072v9.847c-.002.354.134.694.377.947.244.252.574.394.92.397l11.406.01a1.255 1.255 0 0 0 .907-.384 1.35 1.35 0 0 0 .39-.963V4.158c0-.353-.136-.693-.378-.945a1.296 1.296 0 0 0-.917-.4ZM1.297 1.562h4.988c.13.004.251.06.34.155a.504.504 0 0 1 .134.355v.231c0 .354.136.694.38.946.242.251.573.394.919.398h4.649c.128.004.25.059.34.154.089.096.137.223.134.355v.995a.326.326 0 0 1-.196.296.308.308 0 0 1-.12.024H1.139a.31.31 0 0 1-.223-.093.326.326 0 0 1-.092-.227V2.07a.506.506 0 0 1 .133-.355.479.479 0 0 1 .34-.155Zm11.734 10.735a.456.456 0 0 1-.325.139l-11.409-.008a.48.48 0 0 1-.34-.154.504.504 0 0 1-.133-.355V6.63a.33.33 0 0 1 .092-.227.32.32 0 0 1 .222-.094h11.727a.31.31 0 0 1 .223.094c.06.06.093.142.093.227v5.299a.527.527 0 0 1-.15.367Z"
+        d="M2 0a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8L6.586.586A2 2 0 0 0 5.172 0H2Zm5.379 3.5L5.525 1.646a.5.5 0 0 0-.353-.146H2a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h12a.5.5 0 0 0 .5-.5V4a.5.5 0 0 0-.5-.5H7.379Z"
+        fill-rule="evenodd"
       />
     </svg>
   `;
diff --git a/apps/browser/src/autofill/content/components/icons/globe.ts b/apps/browser/src/autofill/content/components/icons/globe.ts
index fc0a975284d..936fd8d2802 100644
--- a/apps/browser/src/autofill/content/components/icons/globe.ts
+++ b/apps/browser/src/autofill/content/components/icons/globe.ts
@@ -8,11 +8,10 @@ export function Globe({ color, disabled, theme }: IconProps) {
   const shapeColor = disabled ? themes[theme].secondary["300"] : color || themes[theme].text.main;
 
   return html`
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
       <path
         class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
-        fill-rule="evenodd"
-        d="M19.958 18.85A10.476 10.476 0 0 1 12 22.5c-1.674 0-3.256-.392-4.66-1.088l.084-.195c.03-.07.06-.135.084-.194l.086-.2c.11-.262.23-.548.372-.832.18-.36.374-.67.58-.875.035-.035.137-.096.372-.146.225-.049.512-.076.855-.095.187-.01.392-.018.607-.026.542-.02 1.15-.043 1.72-.118.426-.057.769-.169 1.025-.349.27-.19.422-.44.477-.713a1.531 1.531 0 0 0-.04-.697 3.99 3.99 0 0 0-.162-.458l-.014-.037a5.335 5.335 0 0 0-.198-.425c-.17-.34-.321-.64-.39-1.395-.04-.442.122-.939.34-1.463l.121-.283c.069-.158.137-.317.191-.456.086-.22.174-.482.174-.728 0-.242-.077-.5-.18-.731a3.271 3.271 0 0 0-.434-.704c-.335-.416-.863-.86-1.485-.86-.597 0-1.367.217-2.02.473-.334.13-.652.278-.922.425-.262.143-.507.3-.67.46-1.262 1.236-2.01 1.593-2.458 1.619-.376.021-.649-.194-.999-.676-.085-.117-.168-.24-.257-.373l-.01-.014c-.084-.126-.174-.26-.268-.39-.192-.269-.42-.55-.708-.771a1.946 1.946 0 0 0-1.085-.416 2.206 2.206 0 0 0-.393.011 10.477 10.477 0 0 1 2.7-5.06c.074.44.198.804.369 1.1.311.54.762.822 1.258.921.55.11 1.163-.08 1.711-.277.17-.062.337-.126.505-.19.42-.16.84-.321 1.287-.439.35-.092.788-.073 1.3.017.36.062.72.151 1.088.242.16.04.323.08.488.119.515.12 1.063.228 1.542.19.51-.041.996-.254 1.27-.802.171-.343.168-.67.03-.966-.117-.253-.324-.457-.475-.604-.352-.344-.558-.55-.558-.881 0-.161.05-.258.122-.338.086-.095.219-.18.411-.272.08-.039.162-.075.25-.114l.048-.02c.102-.046.214-.097.32-.153.064-.033.133-.072.202-.119 2.628.96 4.765 2.941 5.932 5.462a12.186 12.186 0 0 0-.043-.005c-.514-.06-1.002-.07-1.442.08-.463.158-.82.472-1.111.951a9.428 9.428 0 0 1-.628.862 82.02 82.02 0 0 0-.13.165c-.281.362-.585.765-.788 1.182-.204.42-.332.908-.191 1.418.14.512.524.95 1.136 1.332.134.085.304.145.427.188l.027.01c.146.052.264.095.363.15a.422.422 0 0 1 .17.147c.021.038.05.112.029.264a7.15 7.15 0 0 0-.07 1.33c.022.375.096.759.295 1.04.16.224.162.542.147 1.01v.014c-.007.198-.015.447.029.666.03.149.089.312.203.45Zm1.843.075A11.945 11.945 0 0 0 24 12c0-6.627-5.373-12-12-12S0 5.373 0 12c0 4.495 2.471 8.413 6.13 10.468v.12h.218A11.946 11.946 0 0 0 12 24c4.011 0 7.563-1.968 9.742-4.991a.73.73 0 0 0 .065-.08l-.006-.004Zm-15.253 2.05.059-.135.074-.17.078-.185c.11-.262.246-.584.403-.896.193-.387.439-.803.749-1.111.222-.221.532-.327.818-.388a6.64 6.64 0 0 1 .994-.114c.22-.012.445-.02.672-.029.525-.02 1.062-.039 1.587-.108.346-.046.532-.127.626-.193.081-.057.103-.108.112-.155a.653.653 0 0 0-.027-.285c-.032-.12-.078-.234-.128-.358l-.014-.035a3.953 3.953 0 0 0-.141-.298c-.183-.362-.422-.837-.508-1.776-.063-.685.187-1.366.406-1.892l.137-.32c.062-.143.117-.27.166-.398.085-.218.113-.34.113-.402 0-.066-.025-.192-.102-.364a2.38 2.38 0 0 0-.314-.507c-.283-.352-.58-.524-.783-.524-.427 0-1.07.167-1.692.41-.303.12-.587.251-.82.378-.24.131-.397.242-.47.314-1.271 1.244-2.23 1.827-3.036 1.873-.878.05-1.406-.532-1.78-1.045-.095-.132-.188-.27-.275-.4l-.006-.01c-.087-.13-.17-.252-.255-.371-.176-.245-.344-.442-.527-.583a1.047 1.047 0 0 0-.592-.23 1.54 1.54 0 0 0-.495.058 10.494 10.494 0 0 0 4.971 10.25Zm14.072-2.978c0-.07.002-.15.005-.247l.002-.059c.014-.392.036-1.01-.314-1.502-.05-.07-.111-.244-.13-.572a6.267 6.267 0 0 1 .063-1.158c.042-.314-.005-.595-.142-.833a1.308 1.308 0 0 0-.51-.481 3.197 3.197 0 0 0-.497-.213l-.004-.001a1.74 1.74 0 0 1-.278-.112c-.501-.314-.686-.592-.746-.809-.06-.217-.02-.468.134-.786.156-.321.403-.656.689-1.022l.119-.152.001-.002c.242-.308.5-.636.696-.958.206-.339.41-.491.632-.567.244-.084.566-.094 1.048-.038.192.023.372.05.537.08.373 1.077.575 2.232.575 3.435 0 2.23-.695 4.297-1.88 5.997ZM14.33 1.759C13.58 1.59 12.8 1.5 12 1.5c-2.567 0-4.918.92-6.742 2.45.033.693.163 1.14.325 1.42.177.306.401.438.655.489.272.054.657-.035 1.228-.242.14-.05.29-.107.447-.167.434-.166.925-.354 1.422-.485.541-.143 1.133-.096 1.685 0 .392.068.802.17 1.184.264.153.038.301.074.442.107.52.122.942.195 1.265.17.294-.024.443-.12.537-.307.053-.107.037-.147.02-.185-.038-.08-.12-.175-.289-.34a12.25 12.25 0 0 0-.059-.056c-.295-.285-.77-.743-.77-1.468 0-.393.138-.704.356-.944.186-.204.418-.343.624-.447Z"
+        d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm0 14.5c.23 0 .843-.226 1.487-1.514.524-1.048.906-2.526.994-4.236H5.519c.088 1.71.47 3.188.994 4.236C7.157 14.274 7.77 14.5 8 14.5ZM5.52 7.25h4.96c-.087-1.71-.47-3.188-.993-4.236C8.843 1.726 8.23 1.5 8 1.5c-.23 0-.843.226-1.487 1.514C5.99 4.062 5.607 5.54 5.52 7.25Zm6.463 0h2.474a6.506 6.506 0 0 0-3.766-5.168c.718 1.305 1.197 3.125 1.292 5.168Zm-7.966 0c.095-2.043.574-3.863 1.292-5.168A6.506 6.506 0 0 0 1.543 7.25h2.474Zm7.966 1.5c-.095 2.043-.574 3.863-1.292 5.168a6.506 6.506 0 0 0 3.766-5.168h-2.474Zm-6.677 5.185c-.718-1.305-1.197-3.125-1.292-5.168H1.54a6.506 6.506 0 0 0 3.766 5.168Z"
       />
     </svg>
   `;
diff --git a/apps/browser/src/autofill/content/components/icons/index.ts b/apps/browser/src/autofill/content/components/icons/index.ts
index 4b6cb7abdd8..de39b70ab24 100644
--- a/apps/browser/src/autofill/content/components/icons/index.ts
+++ b/apps/browser/src/autofill/content/components/icons/index.ts
@@ -3,14 +3,12 @@ export { AngleUp } from "./angle-up";
 export { BrandIconContainer } from "./brand-icon-container";
 export { Business } from "./business";
 export { Close } from "./close";
+export { Collection } from "./collection";
 export { ExclamationTriangle } from "./exclamation-triangle";
 export { ExternalLink } from "./external-link";
-export { Family } from "./family";
 export { Folder } from "./folder";
 export { Globe } from "./globe";
-export { Keyhole } from "./keyhole";
-export { PartyHorn } from "./party-horn";
 export { PencilSquare } from "./pencil-square";
 export { Shield } from "./shield";
 export { User } from "./user";
-export { Warning } from "./warning";
+export { Users } from "./users";
diff --git a/apps/browser/src/autofill/content/components/icons/pencil-square.ts b/apps/browser/src/autofill/content/components/icons/pencil-square.ts
index f41ab927809..11366f2631a 100644
--- a/apps/browser/src/autofill/content/components/icons/pencil-square.ts
+++ b/apps/browser/src/autofill/content/components/icons/pencil-square.ts
@@ -8,10 +8,14 @@ export function PencilSquare({ color, disabled, theme }: IconProps) {
   const shapeColor = disabled ? themes[theme].secondary["300"] : color || themes[theme].text.main;
 
   return html`
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" fill="none">
       <path
         class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
-        d="M17.799 24H2.709a2.422 2.422 0 0 1-1.729-.735 2.533 2.533 0 0 1-.715-1.768V6.03c0-.663.257-1.299.715-1.769a2.416 2.416 0 0 1 1.728-.734h7.996c.216 0 .424.088.577.244a.846.846 0 0 1 0 1.18.808.808 0 0 1-.577.245H2.708a.809.809 0 0 0-.576.244.844.844 0 0 0-.238.59v15.467c0 .221.085.433.238.59.153.156.36.244.576.244h15.09a.809.809 0 0 0 .577-.244.843.843 0 0 0 .238-.59v-6.754a.832.832 0 0 1 .494-.801.796.796 0 0 1 .64 0 .82.82 0 0 1 .442.472.836.836 0 0 1 .052.33v6.753a2.53 2.53 0 0 1-.715 1.768c-.458.47-1.08.734-1.727.735ZM9.24 15.417a.812.812 0 0 1-.677-.373.852.852 0 0 1-.074-.783l1.32-3.239c.121-.297.297-.567.52-.795L19.615.714A2.394 2.394 0 0 1 21.325 0c.638.002 1.25.263 1.703.726.452.463.706 1.09.707 1.744a2.502 2.502 0 0 1-.7 1.746l-9.229 9.455c-.274.28-.609.489-.977.61l-3.34 1.09a.801.801 0 0 1-.248.047Zm12.084-13.76a.771.771 0 0 0-.558.235l-9.282 9.514a.828.828 0 0 0-.17.26l-.642 1.572 1.663-.543a.778.778 0 0 0 .317-.198l9.231-9.455a.812.812 0 0 0 .172-.88.805.805 0 0 0-.29-.363.78.78 0 0 0-.44-.136v-.006h-.001Z"
+        d="M11.013.677a1.75 1.75 0 0 1 2.474 0l.836.836a1.75 1.75 0 0 1 0 2.475L9.03 9.28a.75.75 0 0 1-.348.197l-3 .75a.75.75 0 0 1-.91-.91l.75-3a.75.75 0 0 1 .198-.348L11.013.677Zm1.414 1.06a.25.25 0 0 0-.354 0l-.646.647a.75.75 0 0 1 .103.086l1 1a.751.751 0 0 1 .087.103l.646-.646a.25.25 0 0 0 0-.353l-.836-.836Zm-.854 2.88a.752.752 0 0 1-.103-.087l-1-1a.756.756 0 0 1-.087-.103L6.928 6.884 6.531 8.47l1.586-.397 3.456-3.456Z"
+      />
+      <path
+        class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
+        d="M2.75 2.5c-.69 0-1.25.56-1.25 1.25v8.5c0 .69.56 1.25 1.25 1.25h8.5c.69 0 1.25-.56 1.25-1.25v-3.5a.75.75 0 0 1 1.5 0v3.5A2.75 2.75 0 0 1 11.25 15h-8.5A2.75 2.75 0 0 1 0 12.25v-8.5A2.75 2.75 0 0 1 2.75 1h3.5a.75.75 0 0 1 0 1.5h-3.5Z"
       />
     </svg>
   `;
diff --git a/apps/browser/src/autofill/content/components/icons/shield.ts b/apps/browser/src/autofill/content/components/icons/shield.ts
index 5a2d7d39d58..a027dd3e113 100644
--- a/apps/browser/src/autofill/content/components/icons/shield.ts
+++ b/apps/browser/src/autofill/content/components/icons/shield.ts
@@ -8,10 +8,10 @@ export function Shield({ color, theme }: IconProps) {
   const shapeColor = color || themes[theme].brandLogo;
 
   return html`
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 24" fill="none">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 16" fill="none">
       <path
         class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
-        d="M19.703.3A.97.97 0 0 0 19 0H1a.958.958 0 0 0-.702.3.962.962 0 0 0-.3.702v12c.004.913.18 1.818.522 2.665a9.95 9.95 0 0 0 1.297 2.345c.552.72 1.169 1.387 1.844 1.993a21.721 21.721 0 0 0 1.975 1.61c.6.426 1.23.83 1.89 1.21.66.381 1.126.639 1.398.773.275.135.497.241.662.312.129.062.27.093.414.09a.87.87 0 0 0 .406-.095c.168-.073.387-.177.665-.312.277-.135.75-.393 1.398-.772.648-.38 1.285-.785 1.89-1.21.69-.499 1.35-1.036 1.978-1.61a14.458 14.458 0 0 0 1.844-1.994c.535-.72.972-1.508 1.297-2.344a7.185 7.185 0 0 0 .522-2.666v-12A.944.944 0 0 0 19.703.3Zm-2.32 12.811c0 4.35-7.382 8.087-7.382 8.087V2.57h7.381v10.54Z"
+        d="M13.469.2A.647.647 0 0 0 13 0H1a.639.639 0 0 0-.468.2.641.641 0 0 0-.2.468v8a4.81 4.81 0 0 0 .348 1.777c.216.557.507 1.083.865 1.563.367.48.779.925 1.229 1.329.417.383.857.741 1.317 1.073.4.284.82.553 1.26.807.44.254.75.425.932.515.183.09.33.16.44.208.087.041.181.062.277.06a.58.58 0 0 0 .27-.063c.113-.05.259-.118.444-.208s.5-.262.932-.515c.432-.253.857-.523 1.26-.807.46-.332.9-.69 1.319-1.073.45-.404.861-.849 1.228-1.33.357-.48.648-1.005.865-1.562a4.79 4.79 0 0 0 .348-1.777v-8A.63.63 0 0 0 13.47.2Zm-1.547 8.54c0 2.9-4.921 5.392-4.921 5.392V1.714h4.92v7.027Z"
       />
     </svg>
   `;
diff --git a/apps/browser/src/autofill/content/components/icons/user.ts b/apps/browser/src/autofill/content/components/icons/user.ts
index 32ccd3a2031..b59204a0ad8 100644
--- a/apps/browser/src/autofill/content/components/icons/user.ts
+++ b/apps/browser/src/autofill/content/components/icons/user.ts
@@ -8,10 +8,10 @@ export function User({ color, disabled, theme }: IconProps) {
   const shapeColor = disabled ? themes[theme].secondary["300"] : color || themes[theme].text.main;
 
   return html`
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="none">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" fill="none">
       <path
         class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
-        d="M13.51 12.189a6.616 6.616 0 0 0-4.524-4.915 3.87 3.87 0 0 0 1.968-3.348 3.926 3.926 0 1 0-7.852 0 3.864 3.864 0 0 0 1.95 3.338A6.61 6.61 0 0 0 .49 12.189 1.499 1.499 0 0 0 1.962 14h10.077a1.503 1.503 0 0 0 1.471-1.812ZM4.044 3.926A2.987 2.987 0 0 1 7.592.963a2.985 2.985 0 0 1-.563 5.916 2.973 2.973 0 0 1-2.985-2.953Zm8.427 8.938a.548.548 0 0 1-.436.204H1.962a.548.548 0 0 1-.432-.204.576.576 0 0 1-.119-.486 5.724 5.724 0 0 1 9.175-3.23 5.723 5.723 0 0 1 2.003 3.23.571.571 0 0 1-.118.486Z"
+        d="M9.203 7.339a4 4 0 1 0-4.407 0A7.033 7.033 0 0 0 2.05 8.953a6.655 6.655 0 0 0-1.517 2.162A6.393 6.393 0 0 0 0 13.667C0 14.403.597 15 1.333 15h11.334c.736 0 1.333-.597 1.333-1.333 0-.876-.181-1.743-.533-2.552a6.654 6.654 0 0 0-1.517-2.162 7.032 7.032 0 0 0-2.747-1.614ZM9.5 4a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Zm2.592 7.714c.247.57.384 1.175.405 1.786H1.503a4.897 4.897 0 0 1 .405-1.786 5.156 5.156 0 0 1 1.177-1.675 5.534 5.534 0 0 1 1.787-1.136A5.805 5.805 0 0 1 7 8.5c.732 0 1.456.137 2.128.403.673.265 1.28.652 1.787 1.136a5.156 5.156 0 0 1 1.177 1.675Z"
       />
     </svg>
   `;
diff --git a/apps/browser/src/autofill/content/components/icons/users.ts b/apps/browser/src/autofill/content/components/icons/users.ts
new file mode 100644
index 00000000000..eb7840104f0
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/icons/users.ts
@@ -0,0 +1,18 @@
+import { css } from "@emotion/css";
+import { html } from "lit";
+
+import { IconProps } from "../common-types";
+import { buildIconColorRule, ruleNames, themes } from "../constants/styles";
+
+export function Users({ color, disabled, theme }: IconProps) {
+  const shapeColor = disabled ? themes[theme].secondary["300"] : color || themes[theme].text.main;
+
+  return html`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 14" fill="none">
+      <path
+        class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
+        d="M6.5 2.5c0 .375-.082.73-.23 1.049A2.986 2.986 0 0 1 8 3c.644 0 1.241.203 1.73.549a2.5 2.5 0 1 1 3.925.825 4 4 0 0 1 1.173.846c.372.387.667.847.867 1.352.201.506.305 1.047.305 1.595 0 .46-.373.833-.833.833H11a4.987 4.987 0 0 1 1.62 2.087A5 5 0 0 1 13 13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1 5 5 0 0 1 2-4H.833A.833.833 0 0 1 0 8.167c0-.548.103-1.09.304-1.595.202-.505.496-.965.868-1.352.339-.353.736-.64 1.173-.846A2.5 2.5 0 1 1 6.5 2.5ZM4 3.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1.401 4a2.986 2.986 0 0 1-.389-1.771A2.404 2.404 0 0 0 4 5.5c-.32 0-.638.065-.936.194-.3.13-.575.32-.81.565A2.682 2.682 0 0 0 1.579 7.5h3.822Zm5.198 0h3.822a2.682 2.682 0 0 0-.674-1.24 2.493 2.493 0 0 0-.81-.566 2.362 2.362 0 0 0-1.95.035 2.987 2.987 0 0 1-.39 1.771ZM12 3.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm-4 4a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm3.464 5a3.5 3.5 0 0 0-6.928 0h6.928Z"
+      />
+    </svg>
+  `;
+}
diff --git a/apps/browser/src/autofill/content/components/icons/warning.ts b/apps/browser/src/autofill/content/components/icons/warning.ts
deleted file mode 100644
index 9ae9aeca352..00000000000
--- a/apps/browser/src/autofill/content/components/icons/warning.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { html } from "lit";
-
-// This icon has static multi-colors for each theme
-export function Warning() {
-  return html`
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 40 36">
-      <path
-        fill="#FFBF00"
-        d="M15.944 2.483c1.81-3.111 6.303-3.111 8.111 0l15.302 26.319c1.819 3.127-.438 7.049-4.055 7.049H4.698c-3.617 0-5.874-3.922-4.055-7.05L15.944 2.484Z"
-      />
-      <path
-        fill="#0E3781"
-        fill-rule="evenodd"
-        d="M37.735 29.745 22.433 3.425c-1.085-1.866-3.781-1.866-4.866 0L2.265 29.746c-1.091 1.876.263 4.23 2.433 4.23h30.604c2.17 0 3.524-2.354 2.433-4.23ZM24.055 2.483c-1.808-3.111-6.302-3.111-8.11 0L.643 28.802c-1.819 3.127.438 7.049 4.055 7.049h30.604c3.617 0 5.874-3.922 4.055-7.05L24.055 2.484Z"
-        clip-rule="evenodd"
-      />
-      <path
-        fill="#0E3781"
-        d="M21.876 28.345a1.876 1.876 0 1 1-3.752 0 1.876 1.876 0 0 1 3.752 0ZM17.24 11.976a.47.47 0 0 1 .467-.519h4.586c.279 0 .496.242.466.52l-1.307 12.196a.47.47 0 0 1-.466.42h-1.972a.47.47 0 0 1-.466-.42L17.24 11.976Z"
-      />
-    </svg>
-  `;
-}
diff --git a/apps/browser/src/autofill/content/components/icons/party-horn.ts b/apps/browser/src/autofill/content/components/illustrations/celebrate.ts
similarity index 98%
rename from apps/browser/src/autofill/content/components/icons/party-horn.ts
rename to apps/browser/src/autofill/content/components/illustrations/celebrate.ts
index 439d60a79de..30b3743004f 100644
--- a/apps/browser/src/autofill/content/components/icons/party-horn.ts
+++ b/apps/browser/src/autofill/content/components/illustrations/celebrate.ts
@@ -5,16 +5,10 @@ import { ThemeTypes } from "@bitwarden/common/platform/enums";
 import { IconProps } from "../common-types";
 
 // This icon has static multi-colors for each theme
-export function PartyHorn({ theme }: IconProps) {
+export function Celebrate({ theme }: IconProps) {
   if (theme === ThemeTypes.Dark) {
     return html`
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="50"
-        height="50"
-        viewBox="0 0 50 50"
-        fill="none"
-      >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" fill="none">
         <path
           d="M32.6273 37.2714L3.88045 49.2492C2.98525 49.6222 1.95344 49.4181 1.26769 48.7323C0.581933 48.0466 0.377816 47.0148 0.750816 46.1196L12.7287 17.3728C13.622 15.2288 15.9911 14.1069 18.2158 14.7743L19.0257 15.0173C26.6887 17.3161 32.6839 23.3113 34.9828 30.9743L35.2257 31.7842C35.8931 34.0089 34.7712 36.3781 32.6273 37.2714Z"
           fill="#FFBF00"
@@ -142,7 +136,7 @@ export function PartyHorn({ theme }: IconProps) {
   }
 
   return html`
-    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" fill="none">
       <path
         d="M32.6275 37.2714L3.88069 49.2492C2.98549 49.6222 1.95368 49.4181 1.26793 48.7323C0.582178 48.0466 0.37806 47.0148 0.751061 46.1196L12.7289 17.3728C13.6222 15.2288 15.9914 14.1069 18.216 14.7743L19.026 15.0173C26.6889 17.3161 32.6841 23.3113 34.983 30.9743L35.226 31.7842C35.8934 34.0089 34.7714 36.3781 32.6275 37.2714Z"
         fill="#FFBF00"
diff --git a/apps/browser/src/autofill/content/components/illustrations/index.ts b/apps/browser/src/autofill/content/components/illustrations/index.ts
new file mode 100644
index 00000000000..1e83ffdf111
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/illustrations/index.ts
@@ -0,0 +1,3 @@
+export { Celebrate } from "./celebrate";
+export { Keyhole } from "./keyhole";
+export { Warning } from "./warning";
diff --git a/apps/browser/src/autofill/content/components/icons/keyhole.ts b/apps/browser/src/autofill/content/components/illustrations/keyhole.ts
similarity index 100%
rename from apps/browser/src/autofill/content/components/icons/keyhole.ts
rename to apps/browser/src/autofill/content/components/illustrations/keyhole.ts
diff --git a/apps/browser/src/autofill/content/components/illustrations/warning.ts b/apps/browser/src/autofill/content/components/illustrations/warning.ts
new file mode 100644
index 00000000000..4e15a09839a
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/illustrations/warning.ts
@@ -0,0 +1,22 @@
+import { html } from "lit";
+
+// This icon has static multi-colors for each theme
+export function Warning() {
+  return html`
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 18">
+      <path
+        fill="#FFBF00"
+        d="M11.717.999a1.975 1.975 0 0 0-3.434 0l-8.014 14c-.764 1.333.19 3 1.717 3h16.028c1.527 0 2.48-1.667 1.717-3zm6.713 14.745-8.014-14a.475.475 0 0 0-.832 0l-8.014 14a.5.5 0 0 0 .416.755h16.028a.5.5 0 0 0 .416-.755z"
+      />
+      <path
+        fill="#0E3781"
+        fill-rule="evenodd"
+        d="M11.717 1a1.975 1.975 0 0 0-3.434 0L.269 15c-.764 1.333.19 3 1.717 3h16.028c1.527 0 2.48-1.667 1.717-3L11.717 1Zm6.713 14.745-8.014-14a.475.475 0 0 0-.832 0l-8.014 14a.5.5 0 0 0 .416.755h16.028a.5.5 0 0 0 .416-.755Z"
+      />
+      <path
+        fill="#0E3781"
+        d="M11.25 13.587c0 .697-.56 1.261-1.25 1.261s-1.25-.564-1.25-1.26c0-.697.56-1.261 1.25-1.261s1.25.564 1.25 1.26ZM9.003 6.023a.5.5 0 0 0-.496.561l.501 4.043a.5.5 0 0 0 .496.439h.992a.5.5 0 0 0 .496-.439l.5-4.043a.5.5 0 0 0-.495-.561H9.003Z"
+      />
+    </svg>
+  `;
+}
diff --git a/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/icons.mdx b/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/icons.mdx
index f85cf3ae90f..571ed10285a 100644
--- a/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/icons.mdx
+++ b/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/icons.mdx
@@ -2,7 +2,7 @@ import { Meta, Controls } from "@storybook/addon-docs";
 
 import * as stories from "./icons.lit-stories";
 
-<Meta title="Components/Icons/Icons" of={stories} />
+<Meta title="Components/Icons" of={stories} />
 
 ## Icon Stories
 
@@ -14,12 +14,12 @@ like size, color, and theme. Each story is an example of how a specific icon can
 
 |                           |                    |
 | ------------------------- | ------------------ |
-| `AngleDownIcon`           | `FolderIcon`       |
-| `BusinessIcon`            | `GlobeIcon`        |
-| `BrandIcon`               | `PartyHornIcon`    |
+| `AngleDownIcon`           | `AngleUpIcon`      |
+| `BusinessIcon`            | `FolderIcon`       |
+| `BrandIcon`               | `GlobeIcon`        |
 | `CloseIcon`               | `PencilSquareIcon` |
 | `ExclamationTriangleIcon` | `ShieldIcon`       |
-| `FamilyIcon`              | `UserIcon`         |
+| `UsersIcon`               | `UserIcon`         |
 
 ## Props
 
diff --git a/apps/browser/src/autofill/content/components/lit-stories/ciphers/cipher-indicator-icon.lit-stories.ts b/apps/browser/src/autofill/content/components/lit-stories/ciphers/cipher-indicator-icons.lit-stories.ts
similarity index 94%
rename from apps/browser/src/autofill/content/components/lit-stories/ciphers/cipher-indicator-icon.lit-stories.ts
rename to apps/browser/src/autofill/content/components/lit-stories/ciphers/cipher-indicator-icons.lit-stories.ts
index 89c3ecbcb1c..08530452730 100644
--- a/apps/browser/src/autofill/content/components/lit-stories/ciphers/cipher-indicator-icon.lit-stories.ts
+++ b/apps/browser/src/autofill/content/components/lit-stories/ciphers/cipher-indicator-icons.lit-stories.ts
@@ -12,7 +12,7 @@ type Args = {
 };
 
 export default {
-  title: "Components/Ciphers/Cipher Indicator Icon",
+  title: "Components/Ciphers/Cipher Indicator Icons",
   argTypes: {
     showBusinessIcon: { control: "boolean" },
     showFamilyIcon: { control: "boolean" },
diff --git a/apps/browser/src/autofill/content/components/lit-stories/icons/icons.lit-stories.ts b/apps/browser/src/autofill/content/components/lit-stories/icons/icons.lit-stories.ts
index 8bd87ef6674..fc5db1c7c2c 100644
--- a/apps/browser/src/autofill/content/components/lit-stories/icons/icons.lit-stories.ts
+++ b/apps/browser/src/autofill/content/components/lit-stories/icons/icons.lit-stories.ts
@@ -14,7 +14,7 @@ type Args = {
 };
 
 export default {
-  title: "Components/Icons/Icons",
+  title: "Components/Icons",
   argTypes: {
     iconLink: { control: "text" },
     color: { control: "color" },
@@ -53,16 +53,16 @@ const createIconStory = (iconName: keyof typeof Icons): StoryObj<Args> => {
 };
 
 export const AngleDownIcon = createIconStory("AngleDown");
-export const BusinessIcon = createIconStory("Business");
+export const AngleUpIcon = createIconStory("AngleUp");
 export const BrandIcon = createIconStory("BrandIconContainer");
+export const BusinessIcon = createIconStory("Business");
 export const CloseIcon = createIconStory("Close");
+export const CollectionIcon = createIconStory("Collection");
 export const ExclamationTriangleIcon = createIconStory("ExclamationTriangle");
 export const ExternalLinkIcon = createIconStory("ExternalLink");
-export const FamilyIcon = createIconStory("Family");
 export const FolderIcon = createIconStory("Folder");
 export const GlobeIcon = createIconStory("Globe");
-export const KeyholeIcon = createIconStory("Keyhole");
-export const PartyHornIcon = createIconStory("PartyHorn");
 export const PencilSquareIcon = createIconStory("PencilSquare");
 export const ShieldIcon = createIconStory("Shield");
 export const UserIcon = createIconStory("User");
+export const UsersIcon = createIconStory("Users");
diff --git a/apps/browser/src/autofill/content/components/lit-stories/illustrations/illustrations.lit-stories.ts b/apps/browser/src/autofill/content/components/lit-stories/illustrations/illustrations.lit-stories.ts
new file mode 100644
index 00000000000..86d55f2f795
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/lit-stories/illustrations/illustrations.lit-stories.ts
@@ -0,0 +1,44 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+import * as Illustrations from "../../illustrations";
+
+type Args = {
+  theme: Theme;
+  size: number;
+};
+
+export default {
+  title: "Components/Illustrations",
+  argTypes: {
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+    size: { control: "number", min: 10, max: 100, step: 1 },
+  },
+  args: {
+    theme: ThemeTypes.Light,
+    size: 50,
+  },
+} as Meta<Args>;
+
+const Template = (
+  args: Args,
+  IllustrationComponent: (props: Args) => ReturnType<typeof html>,
+) => html`
+  <div
+    style="width: ${args.size}px; height: ${args.size}px; display: flex; align-items: center; justify-content: center;"
+  >
+    ${IllustrationComponent({ ...args })}
+  </div>
+`;
+
+const createIllustrationStory = (illustrationName: keyof typeof Illustrations): StoryObj<Args> => {
+  return {
+    render: (args) => Template(args, Illustrations[illustrationName]),
+  } as StoryObj<Args>;
+};
+
+export const KeyholeIllustration = createIllustrationStory("Keyhole");
+export const CelebrateIllustration = createIllustrationStory("Celebrate");
+export const WarningIllustration = createIllustrationStory("Warning");
diff --git a/apps/browser/src/autofill/content/components/notification/button-row.ts b/apps/browser/src/autofill/content/components/notification/button-row.ts
index 8661f5957e1..6fa32f11aa2 100644
--- a/apps/browser/src/autofill/content/components/notification/button-row.ts
+++ b/apps/browser/src/autofill/content/components/notification/button-row.ts
@@ -4,14 +4,14 @@ import { ProductTierType } from "@bitwarden/common/billing/enums";
 import { Theme } from "@bitwarden/common/platform/enums";
 
 import { Option, OrgView, FolderView } from "../common-types";
-import { Business, Family, Folder, User } from "../icons";
+import { Business, Users, Folder, User } from "../icons";
 import { ButtonRow } from "../rows/button-row";
 
 function getVaultIconByProductTier(productTierType?: ProductTierType): Option["icon"] {
   switch (productTierType) {
     case ProductTierType.Free:
     case ProductTierType.Families:
-      return Family;
+      return Users;
     case ProductTierType.Teams:
     case ProductTierType.Enterprise:
     case ProductTierType.TeamsStarter:
diff --git a/apps/browser/src/autofill/content/components/notification/confirmation/body.ts b/apps/browser/src/autofill/content/components/notification/confirmation/body.ts
index 55d257b36f4..d2ac7f36277 100644
--- a/apps/browser/src/autofill/content/components/notification/confirmation/body.ts
+++ b/apps/browser/src/autofill/content/components/notification/confirmation/body.ts
@@ -4,7 +4,7 @@ import { html, nothing } from "lit";
 import { Theme } from "@bitwarden/common/platform/enums";
 
 import { themes } from "../../constants/styles";
-import { PartyHorn, Keyhole, Warning } from "../../icons";
+import { Celebrate, Keyhole, Warning } from "../../illustrations";
 
 import { NotificationConfirmationMessage } from "./message";
 
@@ -33,7 +33,7 @@ export function NotificationConfirmationBody({
   theme,
   handleOpenVault,
 }: NotificationConfirmationBodyProps) {
-  const IconComponent = tasksAreComplete ? Keyhole : !error ? PartyHorn : Warning;
+  const IconComponent = tasksAreComplete ? Keyhole : !error ? Celebrate : Warning;
 
   const showConfirmationMessage = confirmationMessage || buttonText || messageDetails;
 

From a61d8780816c0c57710f76ff331e1635b15e247a Mon Sep 17 00:00:00 2001
From: Daniel Riera <driera@livefront.com>
Date: Tue, 15 Apr 2025 17:19:58 -0400
Subject: [PATCH 07/36] PM-20106 Pass indicator data to notification bar cipher
 items (#14246)

* PM-20106 initial approach whihc preserves exisiting indicator file style

* refactored approach to be able to pass any icon when or if needed in the future

* address feedback
---
 .../background/notification.background.ts     | 31 ++++++++++++++--
 .../cipher/cipher-indicator-icons.ts          | 35 +++++++++++--------
 .../content/components/cipher/cipher-info.ts  | 16 ++++++---
 .../content/components/cipher/types.ts        |  9 +++++
 4 files changed, 70 insertions(+), 21 deletions(-)

diff --git a/apps/browser/src/autofill/background/notification.background.ts b/apps/browser/src/autofill/background/notification.background.ts
index 1f0cc469e2c..6589252d94b 100644
--- a/apps/browser/src/autofill/background/notification.background.ts
+++ b/apps/browser/src/autofill/background/notification.background.ts
@@ -16,6 +16,7 @@ import {
 } from "@bitwarden/common/autofill/constants";
 import { DomainSettingsService } from "@bitwarden/common/autofill/services/domain-settings.service";
 import { UserNotificationSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/user-notification-settings.service";
+import { ProductTierType } from "@bitwarden/common/billing/enums/product-tier-type.enum";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { NeverDomains } from "@bitwarden/common/models/domain/domain-service";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
@@ -41,7 +42,11 @@ import { SecurityTask } from "@bitwarden/common/vault/tasks/models/security-task
 import { openUnlockPopout } from "../../auth/popup/utils/auth-popout-window";
 import { BrowserApi } from "../../platform/browser/browser-api";
 import { openAddEditVaultItemPopout } from "../../vault/popup/utils/vault-popout-window";
-import { NotificationCipherData } from "../content/components/cipher/types";
+import {
+  OrganizationCategory,
+  OrganizationCategories,
+  NotificationCipherData,
+} from "../content/components/cipher/types";
 import { NotificationQueueMessageType } from "../enums/notification-queue-message-type.enum";
 import { AutofillService } from "../services/abstractions/autofill.service";
 
@@ -174,8 +179,29 @@ export default class NotificationBackground {
       activeUserId,
     );
 
+    const organizations = await firstValueFrom(
+      this.organizationService.organizations$(activeUserId),
+    );
+
     return decryptedCiphers.map((view) => {
-      const { id, name, reprompt, favorite, login } = view;
+      const { id, name, reprompt, favorite, login, organizationId } = view;
+
+      const organizationType = organizationId
+        ? organizations.find((org) => org.id === organizationId)?.productTierType
+        : null;
+
+      const organizationCategories: OrganizationCategory[] = [];
+
+      if (
+        [ProductTierType.Teams, ProductTierType.Enterprise, ProductTierType.TeamsStarter].includes(
+          organizationType,
+        )
+      ) {
+        organizationCategories.push(OrganizationCategories.business);
+      }
+      if ([ProductTierType.Families, ProductTierType.Free].includes(organizationType)) {
+        organizationCategories.push(OrganizationCategories.family);
+      }
 
       return {
         id,
@@ -183,6 +209,7 @@ export default class NotificationBackground {
         type: CipherType.Login,
         reprompt,
         favorite,
+        ...(organizationCategories.length ? { organizationCategories } : {}),
         icon: buildCipherIcon(iconsServerUrl, view, showFavicons),
         login: login && {
           username: login.username,
diff --git a/apps/browser/src/autofill/content/components/cipher/cipher-indicator-icons.ts b/apps/browser/src/autofill/content/components/cipher/cipher-indicator-icons.ts
index 9096149f510..e4fe012a678 100644
--- a/apps/browser/src/autofill/content/components/cipher/cipher-indicator-icons.ts
+++ b/apps/browser/src/autofill/content/components/cipher/cipher-indicator-icons.ts
@@ -1,30 +1,35 @@
 import { css } from "@emotion/css";
-import { html } from "lit";
+import { html, TemplateResult } from "lit";
 
 import { Theme } from "@bitwarden/common/platform/enums";
 
 import { themes } from "../../../content/components/constants/styles";
 import { Business, Users } from "../../../content/components/icons";
 
-// @TODO connect data source to icon checks
-// @TODO support other indicator types (attachments, etc)
+import { OrganizationCategories, OrganizationCategory } from "./types";
+
+const cipherIndicatorIconsMap: Record<
+  OrganizationCategory,
+  (args: { color: string; theme: Theme }) => TemplateResult
+> = {
+  [OrganizationCategories.business]: Business,
+  [OrganizationCategories.family]: Users,
+};
+
 export function CipherInfoIndicatorIcons({
-  showBusinessIcon,
-  showFamilyIcon,
+  organizationCategories = [],
   theme,
 }: {
-  showBusinessIcon?: boolean;
-  showFamilyIcon?: boolean;
+  organizationCategories?: OrganizationCategory[];
   theme: Theme;
 }) {
-  const indicatorIcons = [
-    ...(showBusinessIcon ? [Business({ color: themes[theme].text.muted, theme })] : []),
-    ...(showFamilyIcon ? [Users({ color: themes[theme].text.muted, theme })] : []),
-  ];
-
-  return indicatorIcons.length
-    ? html` <span class=${cipherInfoIndicatorIconsStyles}> ${indicatorIcons} </span> `
-    : null; // @TODO null case should be handled by parent
+  return html`
+    <span class=${cipherInfoIndicatorIconsStyles}>
+      ${organizationCategories.map((name) =>
+        cipherIndicatorIconsMap[name]?.({ color: themes[theme].text.muted, theme }),
+      )}
+    </span>
+  `;
 }
 
 const cipherInfoIndicatorIconsStyles = css`
diff --git a/apps/browser/src/autofill/content/components/cipher/cipher-info.ts b/apps/browser/src/autofill/content/components/cipher/cipher-info.ts
index 6ff32353938..e3d237b9bc6 100644
--- a/apps/browser/src/autofill/content/components/cipher/cipher-info.ts
+++ b/apps/browser/src/autofill/content/components/cipher/cipher-info.ts
@@ -1,5 +1,5 @@
 import { css } from "@emotion/css";
-import { html } from "lit";
+import { html, nothing } from "lit";
 
 import { Theme } from "@bitwarden/common/platform/enums";
 
@@ -8,14 +8,22 @@ import { themes, typography } from "../../../content/components/constants/styles
 import { CipherInfoIndicatorIcons } from "./cipher-indicator-icons";
 import { NotificationCipherData } from "./types";
 
-// @TODO support other cipher types (card, identity, notes, etc)
 export function CipherInfo({ cipher, theme }: { cipher: NotificationCipherData; theme: Theme }) {
-  const { name, login } = cipher;
+  const { name, login, organizationCategories } = cipher;
+  const hasIndicatorIcons = organizationCategories?.length;
 
   return html`
     <div>
       <span class=${cipherInfoPrimaryTextStyles(theme)}>
-        ${[name, CipherInfoIndicatorIcons({ theme })]}
+        ${[
+          name,
+          hasIndicatorIcons
+            ? CipherInfoIndicatorIcons({
+                theme,
+                organizationCategories,
+              })
+            : nothing,
+        ]}
       </span>
 
       ${login?.username
diff --git a/apps/browser/src/autofill/content/components/cipher/types.ts b/apps/browser/src/autofill/content/components/cipher/types.ts
index ff29f9b559f..590311682bf 100644
--- a/apps/browser/src/autofill/content/components/cipher/types.ts
+++ b/apps/browser/src/autofill/content/components/cipher/types.ts
@@ -14,6 +14,14 @@ export const CipherRepromptTypes = {
 
 type CipherRepromptType = (typeof CipherRepromptTypes)[keyof typeof CipherRepromptTypes];
 
+export type OrganizationCategory =
+  (typeof OrganizationCategories)[keyof typeof OrganizationCategories];
+
+export const OrganizationCategories = {
+  business: "business",
+  family: "family",
+} as const;
+
 export type WebsiteIconData = {
   imageEnabled: boolean;
   image: string;
@@ -50,4 +58,5 @@ export type NotificationCipherData = BaseCipherData<typeof CipherTypes.Login> &
   login?: {
     username: string;
   };
+  organizationCategories?: OrganizationCategory[];
 };

From cb869484239c01075e6145681c240c8c43f21a4c Mon Sep 17 00:00:00 2001
From: Miles Blackwood <mrobinson@bitwarden.com>
Date: Tue, 15 Apr 2025 20:00:08 -0400
Subject: [PATCH 08/36] [PM-15436] Standalone password entry should trigger
 save to bitwarden prompt. (#14110)

* Modify behavior so standalone password entry (with or without generator) should trigger save to bitwarden prompt.

* Rename intent to action, extend button/action styles.

* Ensure font weight is returned to normal.

* Make save login message a button to handle accessibility, adds helper function.

* Fix failing snapshot by reintigrating erroneously removed line.

* Update snapshot to match new saveLoginButton.

* Add add'l open in new window message to aria label.

* Update snapshot with open in new window message.
---
 apps/browser/src/_locales/en/messages.json    |  4 +-
 .../autofill/background/overlay.background.ts |  6 +--
 .../autofill-inline-menu-list.spec.ts.snap    | 39 ++-------------
 .../list/autofill-inline-menu-list.spec.ts    | 10 ++--
 .../pages/list/autofill-inline-menu-list.ts   | 50 +++++++++++++++----
 .../overlay/inline-menu/pages/list/list.scss  |  8 +++
 6 files changed, 61 insertions(+), 56 deletions(-)

diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
index f3b85496b75..87b94650b51 100644
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -4928,8 +4928,8 @@
     "message": "Password regenerated",
     "description": "Notification message for when a password has been regenerated"
   },
-  "saveLoginToBitwarden": {
-    "message": "Save login to Bitwarden?",
+  "saveToBitwarden": {
+    "message": "Save to Bitwarden",
     "description": "Confirmation message for saving a login to Bitwarden"
   },
   "spaceCharacterDescriptor": {
diff --git a/apps/browser/src/autofill/background/overlay.background.ts b/apps/browser/src/autofill/background/overlay.background.ts
index a2088f50a11..4e2e773a0c7 100644
--- a/apps/browser/src/autofill/background/overlay.background.ts
+++ b/apps/browser/src/autofill/background/overlay.background.ts
@@ -1852,7 +1852,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
 
   /**
    * Verifies whether the save login inline menu view should be shown. This requires that
-   * the login data on the page contains a username and either a current or new password.
+   * the login data on the page contains either a current or new password.
    *
    * @param tab - The tab to check for login data
    */
@@ -1869,7 +1869,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
     return (
       (this.shouldShowInlineMenuAccountCreation() ||
         this.focusedFieldMatchesFillType(InlineMenuFillType.PasswordGeneration)) &&
-      !!(loginData.username && (loginData.password || loginData.newPassword))
+      !!(loginData.password || loginData.newPassword)
     );
   }
 
@@ -2157,7 +2157,7 @@ export class OverlayBackground implements OverlayBackgroundInterface {
         "passwordRegenerated",
         "passwords",
         "regeneratePassword",
-        "saveLoginToBitwarden",
+        "saveToBitwarden",
         "toggleBitwardenVaultOverlay",
         "totpCodeAria",
         "totpSecondsSpanAria",
diff --git a/apps/browser/src/autofill/overlay/inline-menu/pages/list/__snapshots__/autofill-inline-menu-list.spec.ts.snap b/apps/browser/src/autofill/overlay/inline-menu/pages/list/__snapshots__/autofill-inline-menu-list.spec.ts.snap
index acd06fb8c65..b6e41c448d6 100644
--- a/apps/browser/src/autofill/overlay/inline-menu/pages/list/__snapshots__/autofill-inline-menu-list.spec.ts.snap
+++ b/apps/browser/src/autofill/overlay/inline-menu/pages/list/__snapshots__/autofill-inline-menu-list.spec.ts.snap
@@ -4,47 +4,14 @@ exports[`AutofillInlineMenuList initAutofillInlineMenuList creates the build sav
 <div
   class="inline-menu-list-container theme_light"
 >
-  <div
-    class="save-login inline-menu-list-message"
-  />
   <div
     class="inline-menu-list-button-container"
   >
     <button
-      aria-label=""
-      class="add-new-item-button inline-menu-list-button inline-menu-list-action"
-      id="new-item-button"
+      aria-label=", opensInANewWindow"
+      class="save-login inline-menu-list-button inline-menu-list-action"
       tabindex="-1"
-    >
-      <svg
-        aria-hidden="true"
-        fill="none"
-        height="17"
-        width="17"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <g
-          clip-path="url(#a)"
-        >
-          <path
-            clip-rule="evenodd"
-            d="M9.607 7.15h5.35c.322 0 .627.133.847.362a1.213 1.213 0 0 1 .002 1.68c-.221.23-.527.363-.85.363H9.607v5.652c0 .312-.12.613-.336.839a1.176 1.176 0 0 1-1.696.003 1.21 1.21 0 0 1-.34-.842V9.555H1.888a1.173 1.173 0 0 1-.847-.361A1.193 1.193 0 0 1 .7 8.352a1.219 1.219 0 0 1 .336-.838 1.175 1.175 0 0 1 .85-.364h5.349V1.635c0-.31.118-.611.336-.84A1.176 1.176 0 0 1 9.268.795c.222.228.34.533.34.841V7.15Z"
-            fill="#175DDC"
-            fill-rule="evenodd"
-          />
-        </g>
-        <defs>
-          <clippath
-            id="a"
-          >
-            <path
-              d="M.421.421h16v16h-16z"
-              fill="#fff"
-            />
-          </clippath>
-        </defs>
-      </svg>
-    </button>
+    />
   </div>
 </div>
 `;
diff --git a/apps/browser/src/autofill/overlay/inline-menu/pages/list/autofill-inline-menu-list.spec.ts b/apps/browser/src/autofill/overlay/inline-menu/pages/list/autofill-inline-menu-list.spec.ts
index b1eebd2bc39..ed28375e4fe 100644
--- a/apps/browser/src/autofill/overlay/inline-menu/pages/list/autofill-inline-menu-list.spec.ts
+++ b/apps/browser/src/autofill/overlay/inline-menu/pages/list/autofill-inline-menu-list.spec.ts
@@ -1089,12 +1089,12 @@ describe("AutofillInlineMenuList", () => {
     });
 
     describe("displaying the save login view", () => {
-      let buildSaveLoginInlineMenuListSpy: jest.SpyInstance;
+      let buildSaveLoginInlineMenuSpy: jest.SpyInstance;
 
       beforeEach(() => {
-        buildSaveLoginInlineMenuListSpy = jest.spyOn(
+        buildSaveLoginInlineMenuSpy = jest.spyOn(
           autofillInlineMenuList as any,
-          "buildSaveLoginInlineMenuList",
+          "buildSaveLoginInlineMenu",
         );
       });
 
@@ -1108,7 +1108,7 @@ describe("AutofillInlineMenuList", () => {
 
         postWindowMessage({ command: "showSaveLoginInlineMenuList" });
 
-        expect(buildSaveLoginInlineMenuListSpy).not.toHaveBeenCalled();
+        expect(buildSaveLoginInlineMenuSpy).not.toHaveBeenCalled();
       });
 
       it("builds the save login item view", async () => {
@@ -1117,7 +1117,7 @@ describe("AutofillInlineMenuList", () => {
 
         postWindowMessage({ command: "showSaveLoginInlineMenuList" });
 
-        expect(buildSaveLoginInlineMenuListSpy).toHaveBeenCalled();
+        expect(buildSaveLoginInlineMenuSpy).toHaveBeenCalled();
       });
     });
 
diff --git a/apps/browser/src/autofill/overlay/inline-menu/pages/list/autofill-inline-menu-list.ts b/apps/browser/src/autofill/overlay/inline-menu/pages/list/autofill-inline-menu-list.ts
index acb01594cc6..e0db93b6b4a 100644
--- a/apps/browser/src/autofill/overlay/inline-menu/pages/list/autofill-inline-menu-list.ts
+++ b/apps/browser/src/autofill/overlay/inline-menu/pages/list/autofill-inline-menu-list.ts
@@ -3,6 +3,8 @@
 import "@webcomponents/custom-elements";
 import "lit/polyfill-support.js";
 
+import { FocusableElement } from "tabbable";
+
 import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
 import { EVENTS, UPDATE_PASSKEYS_HEADINGS_ON_SCROLL } from "@bitwarden/common/autofill/constants";
 import { CipherRepromptType, CipherType } from "@bitwarden/common/vault/enums";
@@ -117,7 +119,7 @@ export class AutofillInlineMenuList extends AutofillInlineMenuPageElement {
     }
 
     if (showSaveLoginMenu) {
-      this.buildSaveLoginInlineMenuList();
+      this.buildSaveLoginInlineMenu();
       return;
     }
 
@@ -165,24 +167,52 @@ export class AutofillInlineMenuList extends AutofillInlineMenuPageElement {
   /**
    * Builds the inline menu list as a prompt that asks the user if they'd like to save the login data.
    */
-  private buildSaveLoginInlineMenuList() {
-    const saveLoginMessage = globalThis.document.createElement("div");
-    saveLoginMessage.classList.add("save-login", "inline-menu-list-message");
-    saveLoginMessage.textContent = this.getTranslation("saveLoginToBitwarden");
+  private buildSaveLoginInlineMenu() {
+    const saveLoginButton = globalThis.document.createElement("button");
+    saveLoginButton.classList.add(
+      "save-login",
+      "inline-menu-list-button",
+      "inline-menu-list-action",
+    );
+
+    saveLoginButton.tabIndex = -1;
+    saveLoginButton.setAttribute(
+      "aria-label",
+      `${this.getTranslation("saveToBitwarden")}, ${this.getTranslation("opensInANewWindow")}`,
+    );
+    saveLoginButton.textContent = this.getTranslation("saveToBitwarden");
+
+    saveLoginButton.addEventListener(EVENTS.CLICK, this.handleNewLoginVaultItemAction);
+    saveLoginButton.addEventListener(EVENTS.KEYUP, this.handleSaveLoginInlineMenuKeyUp);
+
+    const inlineMenuListButtonContainer = this.buildButtonContainer(saveLoginButton);
 
-    const newItemButton = this.buildNewItemButton(true);
     this.showInlineMenuAccountCreation = true;
 
-    this.inlineMenuListContainer.append(saveLoginMessage, newItemButton);
+    this.inlineMenuListContainer.append(inlineMenuListButtonContainer);
   }
 
+  private handleSaveLoginInlineMenuKeyUp = (event: KeyboardEvent) => {
+    const listenedForKeys = new Set(["ArrowDown"]);
+    if (!listenedForKeys.has(event.code) || !(event.target instanceof Element)) {
+      return;
+    }
+
+    event.preventDefault();
+
+    if (event.code === "ArrowDown") {
+      (event.target as FocusableElement).focus();
+      return;
+    }
+  };
+
   /**
    * Handles the show save login inline menu list message that is triggered from the background script.
    */
   private handleShowSaveLoginInlineMenuList() {
     if (this.authStatus === AuthenticationStatus.Unlocked) {
       this.resetInlineMenuContainer();
-      this.buildSaveLoginInlineMenuList();
+      this.buildSaveLoginInlineMenu();
     }
   }
 
@@ -521,7 +551,7 @@ export class AutofillInlineMenuList extends AutofillInlineMenuPageElement {
     this.newItemButtonElement.textContent = this.getNewItemButtonText(showLogin);
     this.newItemButtonElement.setAttribute("aria-label", this.getNewItemAriaLabel(showLogin));
     this.newItemButtonElement.prepend(buildSvgDomElement(plusIcon));
-    this.newItemButtonElement.addEventListener(EVENTS.CLICK, this.handeNewItemButtonClick);
+    this.newItemButtonElement.addEventListener(EVENTS.CLICK, this.handleNewLoginVaultItemAction);
 
     return this.buildButtonContainer(this.newItemButtonElement);
   }
@@ -581,7 +611,7 @@ export class AutofillInlineMenuList extends AutofillInlineMenuPageElement {
    * Handles the click event for the new item button.
    * Sends a message to the parent window to add a new vault item.
    */
-  private handeNewItemButtonClick = () => {
+  private handleNewLoginVaultItemAction = () => {
     let addNewCipherType = this.inlineMenuFillType;
 
     if (this.showInlineMenuAccountCreation) {
diff --git a/apps/browser/src/autofill/overlay/inline-menu/pages/list/list.scss b/apps/browser/src/autofill/overlay/inline-menu/pages/list/list.scss
index d0875cfe427..93f5f647ffe 100644
--- a/apps/browser/src/autofill/overlay/inline-menu/pages/list/list.scss
+++ b/apps/browser/src/autofill/overlay/inline-menu/pages/list/list.scss
@@ -45,6 +45,14 @@ body * {
   &.no-items,
   &.save-login {
     font-size: 1.6rem;
+    &:has(:focus-visible) {
+      outline-width: 0.2rem;
+      outline-style: solid;
+
+      @include themify($themes) {
+        outline-color: themed("focusOutlineColor");
+      }
+    }
   }
 }
 

From 9da15601be3b8a7e2883db55b7ab0a0a8150ccb8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Ch=C4=99ci=C5=84ski?=
 <mchecinski@bitwarden.com>
Date: Wed, 16 Apr 2025 15:06:41 +0200
Subject: [PATCH 09/36] Add workflow to trigger self-host unified build in
 publish web (#14268)

---
 .github/workflows/publish-web.yml | 33 +++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/.github/workflows/publish-web.yml b/.github/workflows/publish-web.yml
index 09f5ddc6318..69b29086d36 100644
--- a/.github/workflows/publish-web.yml
+++ b/.github/workflows/publish-web.yml
@@ -141,3 +141,36 @@ jobs:
 
       - name: Log out of Docker
         run: docker logout
+
+  self-host-unified-build:
+    name: Trigger self-host unified build
+    runs-on: ubuntu-22.04
+    needs:
+      - setup
+    steps:
+      - name: Log in to Azure - CI subscription
+        uses: Azure/login@e15b166166a8746d1a47596803bd8c1b595455cf # v1.6.0
+        with:
+          creds: ${{ secrets.AZURE_KV_CI_SERVICE_PRINCIPAL }}
+
+      - name: Retrieve GitHub PAT secrets
+        id: retrieve-secret-pat
+        uses: bitwarden/gh-actions/get-keyvault-secrets@main
+        with:
+          keyvault: "bitwarden-ci"
+          secrets: "github-pat-bitwarden-devops-bot-repo-scope"
+
+      - name: Trigger self-host build
+        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
+        with:
+          github-token: ${{ steps.retrieve-secret-pat.outputs.github-pat-bitwarden-devops-bot-repo-scope }}
+          script: |
+            await github.rest.actions.createWorkflowDispatch({
+              owner: 'bitwarden',
+              repo: 'self-host',
+              workflow_id: 'build-unified.yml',
+              ref: 'main',
+              inputs: {
+                use_latest_core_version: true
+              }
+            });

From 9cffc3b4f4c61aa57dcc62b2298f4840e3906a18 Mon Sep 17 00:00:00 2001
From: Vijay Oommen <voommen@livefront.com>
Date: Wed, 16 Apr 2025 08:16:40 -0500
Subject: [PATCH 10/36] [PM-20118] Capitalize risk insights (#14291)

---
 apps/web/src/locales/en/messages.json                         | 4 ++--
 .../access-intelligence/risk-insights-loading.component.html  | 2 +-
 .../tools/access-intelligence/risk-insights.component.html    | 1 +
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 0193fc4862b..85a7b8cb927 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -4073,8 +4073,8 @@
   "updateBrowser": {
     "message": "Update browser"
   },
-  "generatingRiskInsights": {
-    "message": "Generating your risk insights..."
+  "generatingYourRiskInsights": {
+    "message": "Generating your Risk Insights..."
   },
   "updateBrowserDesc": {
     "message": "You are using an unsupported web browser. The web vault may not function properly."
diff --git a/bitwarden_license/bit-web/src/app/tools/access-intelligence/risk-insights-loading.component.html b/bitwarden_license/bit-web/src/app/tools/access-intelligence/risk-insights-loading.component.html
index 4e77838229e..0c5b74eead2 100644
--- a/bitwarden_license/bit-web/src/app/tools/access-intelligence/risk-insights-loading.component.html
+++ b/bitwarden_license/bit-web/src/app/tools/access-intelligence/risk-insights-loading.component.html
@@ -4,5 +4,5 @@
     title="{{ 'loading' | i18n }}"
     aria-hidden="true"
   ></i>
-  <h2 bitTypography="h1">{{ "generatingRiskInsights" | i18n }}</h2>
+  <h2 bitTypography="h1">{{ "generatingYourRiskInsights" | i18n }}</h2>
 </div>
diff --git a/bitwarden_license/bit-web/src/app/tools/access-intelligence/risk-insights.component.html b/bitwarden_license/bit-web/src/app/tools/access-intelligence/risk-insights.component.html
index 397e2a630de..2d5693dad54 100644
--- a/bitwarden_license/bit-web/src/app/tools/access-intelligence/risk-insights.component.html
+++ b/bitwarden_license/bit-web/src/app/tools/access-intelligence/risk-insights.component.html
@@ -8,6 +8,7 @@
       {{ "reviewAtRiskPasswords" | i18n }}
     </div>
     <div
+      *ngIf="dataLastUpdated$ | async"
       class="tw-bg-primary-100 tw-rounded-lg tw-w-full tw-px-8 tw-py-4 tw-my-4 tw-flex tw-items-center"
     >
       <i

From 0d0314d16d725a4e7e8c7f7b317bc1d0a4108046 Mon Sep 17 00:00:00 2001
From: Brandon Treston <btreston@bitwarden.com>
Date: Wed, 16 Apr 2025 11:04:31 -0400
Subject: [PATCH 11/36] fix restore button (#14244)

---
 apps/desktop/src/vault/app/vault/view.component.html | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/desktop/src/vault/app/vault/view.component.html b/apps/desktop/src/vault/app/vault/view.component.html
index ede6eb7ed82..8477a588fef 100644
--- a/apps/desktop/src/vault/app/vault/view.component.html
+++ b/apps/desktop/src/vault/app/vault/view.component.html
@@ -656,7 +656,11 @@
       class="primary"
       (click)="restore()"
       appA11yTitle="{{ 'restore' | i18n }}"
-      *ngIf="(limitItemDeletion$ | async) ? (canRestoreCipher$ | async) : cipher.isDeleted"
+      *ngIf="
+        (limitItemDeletion$ | async)
+          ? (canRestoreCipher$ | async) && cipher.isDeleted
+          : cipher.isDeleted
+      "
     >
       <i class="bwi bwi-undo bwi-fw bwi-lg" aria-hidden="true"></i>
     </button>

From b413272bd5adc63b2c77bdeceddf23d7f0603208 Mon Sep 17 00:00:00 2001
From: Jonathan Prusik <jprusik@users.noreply.github.com>
Date: Wed, 16 Apr 2025 11:08:51 -0400
Subject: [PATCH 12/36] [PM-20325] - Misc design fixes/tweaks (#14309)

* fix icon sizing in option selection

* fix close button vertical centering

* fix cipher item update text

* fix missing header background color

* fix brand logo positioning in notification header
---
 .../autofill/content/components/buttons/close-button.ts  | 1 +
 .../components/buttons/option-selection-button.ts        | 5 +++--
 .../autofill/content/components/cipher/cipher-action.ts  | 4 ++--
 .../content/components/icons/brand-icon-container.ts     | 9 +++++++--
 .../autofill/content/components/notification/header.ts   | 2 +-
 .../content/components/option-selection/option-item.ts   | 7 ++++---
 6 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/apps/browser/src/autofill/content/components/buttons/close-button.ts b/apps/browser/src/autofill/content/components/buttons/close-button.ts
index c32d0c130e3..05a12d4f453 100644
--- a/apps/browser/src/autofill/content/components/buttons/close-button.ts
+++ b/apps/browser/src/autofill/content/components/buttons/close-button.ts
@@ -35,5 +35,6 @@ const closeButtonStyles = (theme: Theme) => css`
   > svg {
     width: 20px;
     height: 20px;
+    vertical-align: middle;
   }
 `;
diff --git a/apps/browser/src/autofill/content/components/buttons/option-selection-button.ts b/apps/browser/src/autofill/content/components/buttons/option-selection-button.ts
index cf9a561ee39..e3c7e0d54e6 100644
--- a/apps/browser/src/autofill/content/components/buttons/option-selection-button.ts
+++ b/apps/browser/src/autofill/content/components/buttons/option-selection-button.ts
@@ -44,7 +44,7 @@ export function OptionSelectionButton({
   `;
 }
 
-const iconSize = "15px";
+const iconSize = "16px";
 
 const selectionButtonStyles = ({
   disabled,
@@ -94,7 +94,8 @@ const selectionButtonStyles = ({
 
   > svg {
     max-width: ${iconSize};
-    height: fit-content;
+    max-height: ${iconSize};
+    height: auto;
   }
 `;
 
diff --git a/apps/browser/src/autofill/content/components/cipher/cipher-action.ts b/apps/browser/src/autofill/content/components/cipher/cipher-action.ts
index 2d386d34d6a..aaa4b11d8a2 100644
--- a/apps/browser/src/autofill/content/components/cipher/cipher-action.ts
+++ b/apps/browser/src/autofill/content/components/cipher/cipher-action.ts
@@ -19,13 +19,13 @@ export function CipherAction({
     ? BadgeButton({
         buttonAction: handleAction,
         // @TODO localize
-        buttonText: "Update item",
+        buttonText: "Update",
         theme,
       })
     : EditButton({
         buttonAction: handleAction,
         // @TODO localize
-        buttonText: "Edit item",
+        buttonText: "Edit",
         theme,
       });
 }
diff --git a/apps/browser/src/autofill/content/components/icons/brand-icon-container.ts b/apps/browser/src/autofill/content/components/icons/brand-icon-container.ts
index 8df68d79b6e..1b08f261eb6 100644
--- a/apps/browser/src/autofill/content/components/icons/brand-icon-container.ts
+++ b/apps/browser/src/autofill/content/components/icons/brand-icon-container.ts
@@ -12,8 +12,13 @@ export function BrandIconContainer({ iconLink, theme }: { iconLink?: URL; theme:
 }
 
 const brandIconContainerStyles = css`
+  display: flex;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+
   > svg {
-    width: 20px;
-    height: fit-content;
+    width: auto;
+    height: 100%;
   }
 `;
diff --git a/apps/browser/src/autofill/content/components/notification/header.ts b/apps/browser/src/autofill/content/components/notification/header.ts
index 50c2c629942..d6cedf6a85a 100644
--- a/apps/browser/src/autofill/content/components/notification/header.ts
+++ b/apps/browser/src/autofill/content/components/notification/header.ts
@@ -49,7 +49,7 @@ const notificationHeaderStyles = ({
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  background-color: ${themes[theme].background};
+  background-color: ${themes[theme].background.DEFAULT};
   padding: 12px 16px 8px 16px;
   white-space: nowrap;
 
diff --git a/apps/browser/src/autofill/content/components/option-selection/option-item.ts b/apps/browser/src/autofill/content/components/option-selection/option-item.ts
index 619d77e63d3..e8a293e2c3f 100644
--- a/apps/browser/src/autofill/content/components/option-selection/option-item.ts
+++ b/apps/browser/src/autofill/content/components/option-selection/option-item.ts
@@ -62,14 +62,15 @@ const optionItemStyles = css`
 `;
 
 const optionItemIconContainerStyles = css`
+  display: flex;
   flex-grow: 1;
   flex-shrink: 1;
-  width: ${optionItemIconWidth}px;
-  height: ${optionItemIconWidth}px;
+  max-width: ${optionItemIconWidth}px;
+  max-height: ${optionItemIconWidth}px;
 
   > svg {
     width: 100%;
-    height: fit-content;
+    height: auto;
   }
 `;
 

From f293c15f4d8ae9bdae07e1f8a26232da2c456243 Mon Sep 17 00:00:00 2001
From: Shane Melton <smelton@bitwarden.com>
Date: Wed, 16 Apr 2025 08:24:30 -0700
Subject: [PATCH 13/36] [PM-19538] Add shareReplay to internal orgKeys
 subscription (#14034)

---
 .../collections/services/default-collection.service.ts       | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/libs/admin-console/src/common/collections/services/default-collection.service.ts b/libs/admin-console/src/common/collections/services/default-collection.service.ts
index da50a25886e..1ae58d3eef3 100644
--- a/libs/admin-console/src/common/collections/services/default-collection.service.ts
+++ b/libs/admin-console/src/common/collections/services/default-collection.service.ts
@@ -1,6 +1,6 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
-import { combineLatest, firstValueFrom, map, Observable, of, switchMap } from "rxjs";
+import { combineLatest, firstValueFrom, map, Observable, of, shareReplay, switchMap } from "rxjs";
 import { Jsonify } from "type-fest";
 
 import { EncryptService } from "@bitwarden/common/key-management/crypto/abstractions/encrypt.service";
@@ -8,10 +8,10 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import {
   ActiveUserState,
-  StateProvider,
   COLLECTION_DATA,
   DeriveDefinition,
   DerivedState,
+  StateProvider,
   UserKeyDefinition,
 } from "@bitwarden/common/platform/state";
 import { CollectionId, OrganizationId, UserId } from "@bitwarden/common/types/guid";
@@ -84,6 +84,7 @@ export class DefaultCollectionService implements CollectionService {
       switchMap(([userId, collectionData]) =>
         combineLatest([of(collectionData), this.keyService.orgKeys$(userId)]),
       ),
+      shareReplay({ refCount: false, bufferSize: 1 }),
     );
 
     this.decryptedCollectionDataState = this.stateProvider.getDerived(

From db16c98a1d93114b613398f0758c15bdbc7faf20 Mon Sep 17 00:00:00 2001
From: Conner Turnbull <133619638+cturnbull-bitwarden@users.noreply.github.com>
Date: Wed, 16 Apr 2025 11:58:54 -0400
Subject: [PATCH 14/36] [PM-17773] Added "Sponsored Families" dropdown nav item
 in the admin console (#14029)

* Added nav item for f4e in org admin console

* shotgun surgery for adding "useAdminSponsoredFamilies" feature from the org table

* Resolved issue with members nav item also being selected when f4e is selected

* Separated out billing's logic from the org layout component

* Removed unused observable

* Moved logic to existing f4e policy service and added unit tests

* Resolved script typescript error

* Resolved goofy switchMap

---------

Co-authored-by: cyprain-okeke <108260115+cyprain-okeke@users.noreply.github.com>
---
 .../organization-layout.component.html        |  26 ++-
 .../layouts/organization-layout.component.ts  |   5 +
 .../members/members-routing.module.ts         |   9 +
 .../free-families-policy.service.spec.ts      | 193 ++++++++++++++++++
 .../services/free-families-policy.service.ts  |  46 +++++
 .../models/data/organization.data.spec.ts     |   1 +
 .../models/data/organization.data.ts          |   2 +
 .../models/domain/organization.ts             |   2 +
 .../response/profile-organization.response.ts |   2 +
 libs/common/src/enums/feature-flag.enum.ts    |   2 +
 10 files changed, 282 insertions(+), 6 deletions(-)
 create mode 100644 apps/web/src/app/billing/services/free-families-policy.service.spec.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 47846c77571..e50c55e83d2 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
@@ -19,12 +19,26 @@
       *ngIf="canShowVaultTab(organization)"
     >
     </bit-nav-item>
-    <bit-nav-item
-      icon="bwi-user"
-      [text]="'members' | i18n"
-      route="members"
-      *ngIf="canShowMembersTab(organization)"
-    ></bit-nav-item>
+
+    <ng-container *ngIf="canShowMembersTab(organization)">
+      <ng-container *ngIf="showSponsoredFamiliesDropdown$ | async; else regularMembersItem">
+        <bit-nav-group icon="bwi-user" [text]="'members' | i18n" route="members">
+          <bit-nav-item
+            [text]="'members' | i18n"
+            route="members"
+            [routerLinkActiveOptions]="{ exact: true }"
+          ></bit-nav-item>
+          <bit-nav-item
+            [text]="'sponsoredFamilies' | i18n"
+            route="members/sponsored-families"
+          ></bit-nav-item>
+        </bit-nav-group>
+      </ng-container>
+      <ng-template #regularMembersItem>
+        <bit-nav-item icon="bwi-user" [text]="'members' | i18n" route="members"></bit-nav-item>
+      </ng-template>
+    </ng-container>
+
     <bit-nav-item
       icon="bwi-users"
       [text]="'groups' | i18n"
diff --git a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts
index daa1077a0f3..d0b82d27722 100644
--- a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts
+++ b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts
@@ -29,6 +29,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { getById } from "@bitwarden/common/platform/misc";
 import { BannerModule, IconModule } from "@bitwarden/components";
 
+import { FreeFamiliesPolicyService } from "../../../billing/services/free-families-policy.service";
 import { OrgSwitcherComponent } from "../../../layouts/org-switcher/org-switcher.component";
 import { WebLayoutModule } from "../../../layouts/web-layout.module";
 import { AdminConsoleLogo } from "../../icons/admin-console-logo";
@@ -66,6 +67,7 @@ export class OrganizationLayoutComponent implements OnInit {
 
   showAccountDeprovisioningBanner$: Observable<boolean>;
   protected isBreadcrumbEventLogsEnabled$: Observable<boolean>;
+  protected showSponsoredFamiliesDropdown$: Observable<boolean>;
 
   constructor(
     private route: ActivatedRoute,
@@ -76,6 +78,7 @@ export class OrganizationLayoutComponent implements OnInit {
     private providerService: ProviderService,
     protected bannerService: AccountDeprovisioningBannerService,
     private accountService: AccountService,
+    private freeFamiliesPolicyService: FreeFamiliesPolicyService,
   ) {}
 
   async ngOnInit() {
@@ -92,6 +95,8 @@ export class OrganizationLayoutComponent implements OnInit {
       ),
       filter((org) => org != null),
     );
+    this.showSponsoredFamiliesDropdown$ =
+      this.freeFamiliesPolicyService.showSponsoredFamiliesDropdown$(this.organization$);
 
     this.showAccountDeprovisioningBanner$ = combineLatest([
       this.bannerService.showBanner$,
diff --git a/apps/web/src/app/admin-console/organizations/members/members-routing.module.ts b/apps/web/src/app/admin-console/organizations/members/members-routing.module.ts
index 5220ea1ef39..9666630fc08 100644
--- a/apps/web/src/app/admin-console/organizations/members/members-routing.module.ts
+++ b/apps/web/src/app/admin-console/organizations/members/members-routing.module.ts
@@ -3,6 +3,7 @@ import { RouterModule, Routes } from "@angular/router";
 
 import { canAccessMembersTab } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 
+import { SponsoredFamiliesComponent } from "../../../billing/settings/sponsored-families.component";
 import { organizationPermissionsGuard } from "../guards/org-permissions.guard";
 
 import { MembersComponent } from "./members.component";
@@ -16,6 +17,14 @@ const routes: Routes = [
       titleId: "members",
     },
   },
+  {
+    path: "sponsored-families",
+    component: SponsoredFamiliesComponent,
+    canActivate: [organizationPermissionsGuard(canAccessMembersTab)],
+    data: {
+      titleId: "sponsoredFamilies",
+    },
+  },
 ];
 
 @NgModule({
diff --git a/apps/web/src/app/billing/services/free-families-policy.service.spec.ts b/apps/web/src/app/billing/services/free-families-policy.service.spec.ts
new file mode 100644
index 00000000000..10ccc448986
--- /dev/null
+++ b/apps/web/src/app/billing/services/free-families-policy.service.spec.ts
@@ -0,0 +1,193 @@
+import { mock, MockProxy } from "jest-mock-extended";
+import { firstValueFrom, of } from "rxjs";
+
+import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
+import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
+import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
+import { Policy } from "@bitwarden/common/admin-console/models/domain/policy";
+import { ProductTierType } from "@bitwarden/common/billing/enums";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+import { Utils } from "@bitwarden/common/platform/misc/utils";
+import { FakeAccountService, mockAccountServiceWith } from "@bitwarden/common/spec";
+import { UserId } from "@bitwarden/common/types/guid";
+
+import { FreeFamiliesPolicyService } from "./free-families-policy.service";
+
+describe("FreeFamiliesPolicyService", () => {
+  let service: FreeFamiliesPolicyService;
+  let organizationService: MockProxy<OrganizationService>;
+  let policyService: MockProxy<PolicyService>;
+  let configService: MockProxy<ConfigService>;
+  let accountService: FakeAccountService;
+  const userId = Utils.newGuid() as UserId;
+
+  beforeEach(() => {
+    organizationService = mock<OrganizationService>();
+    policyService = mock<PolicyService>();
+    configService = mock<ConfigService>();
+    accountService = mockAccountServiceWith(userId);
+
+    service = new FreeFamiliesPolicyService(
+      policyService,
+      organizationService,
+      accountService,
+      configService,
+    );
+  });
+
+  describe("showSponsoredFamiliesDropdown$", () => {
+    it("should return true when all conditions are met", async () => {
+      // Configure mocks
+      configService.getFeatureFlag$.mockReturnValue(of(true));
+      policyService.policiesByType$.mockReturnValue(of([]));
+
+      // Create a test organization that meets all criteria
+      const organization = {
+        id: "org-id",
+        productTierType: ProductTierType.Enterprise,
+        useAdminSponsoredFamilies: true,
+        isAdmin: true,
+        isOwner: false,
+        canManageUsers: false,
+      } as Organization;
+
+      // Test the method
+      const result = await firstValueFrom(service.showSponsoredFamiliesDropdown$(of(organization)));
+      expect(result).toBe(true);
+    });
+
+    it("should return false when organization is not Enterprise", async () => {
+      // Configure mocks
+      configService.getFeatureFlag$.mockReturnValue(of(true));
+      policyService.policiesByType$.mockReturnValue(of([]));
+
+      // Create a test organization that is not Enterprise tier
+      const organization = {
+        id: "org-id",
+        productTierType: ProductTierType.Teams,
+        useAdminSponsoredFamilies: true,
+        isAdmin: true,
+      } as Organization;
+
+      // Test the method
+      const result = await firstValueFrom(service.showSponsoredFamiliesDropdown$(of(organization)));
+      expect(result).toBe(false);
+    });
+
+    it("should return false when feature flag is disabled", async () => {
+      // Configure mocks to disable feature flag
+      configService.getFeatureFlag$.mockReturnValue(of(false));
+      policyService.policiesByType$.mockReturnValue(of([]));
+
+      // Create a test organization that meets other criteria
+      const organization = {
+        id: "org-id",
+        productTierType: ProductTierType.Enterprise,
+        useAdminSponsoredFamilies: true,
+        isAdmin: true,
+      } as Organization;
+
+      // Test the method
+      const result = await firstValueFrom(service.showSponsoredFamiliesDropdown$(of(organization)));
+      expect(result).toBe(false);
+    });
+
+    it("should return false when families feature is disabled by policy", async () => {
+      // Configure mocks with a policy that disables the feature
+      configService.getFeatureFlag$.mockReturnValue(of(true));
+      policyService.policiesByType$.mockReturnValue(
+        of([{ organizationId: "org-id", enabled: true } as Policy]),
+      );
+
+      // Create a test organization
+      const organization = {
+        id: "org-id",
+        productTierType: ProductTierType.Enterprise,
+        useAdminSponsoredFamilies: true,
+        isAdmin: true,
+      } as Organization;
+
+      // Test the method
+      const result = await firstValueFrom(service.showSponsoredFamiliesDropdown$(of(organization)));
+      expect(result).toBe(false);
+    });
+
+    it("should return false when useAdminSponsoredFamilies is false", async () => {
+      // Configure mocks
+      configService.getFeatureFlag$.mockReturnValue(of(true));
+      policyService.policiesByType$.mockReturnValue(of([]));
+
+      // Create a test organization with useAdminSponsoredFamilies set to false
+      const organization = {
+        id: "org-id",
+        productTierType: ProductTierType.Enterprise,
+        useAdminSponsoredFamilies: false,
+        isAdmin: true,
+      } as Organization;
+
+      // Test the method
+      const result = await firstValueFrom(service.showSponsoredFamiliesDropdown$(of(organization)));
+      expect(result).toBe(false);
+    });
+
+    it("should return true when user is an owner but not admin", async () => {
+      // Configure mocks
+      configService.getFeatureFlag$.mockReturnValue(of(true));
+      policyService.policiesByType$.mockReturnValue(of([]));
+
+      // Create a test organization where user is owner but not admin
+      const organization = {
+        id: "org-id",
+        productTierType: ProductTierType.Enterprise,
+        useAdminSponsoredFamilies: true,
+        isAdmin: false,
+        isOwner: true,
+        canManageUsers: false,
+      } as Organization;
+
+      // Test the method
+      const result = await firstValueFrom(service.showSponsoredFamiliesDropdown$(of(organization)));
+      expect(result).toBe(true);
+    });
+
+    it("should return true when user can manage users but is not admin or owner", async () => {
+      // Configure mocks
+      configService.getFeatureFlag$.mockReturnValue(of(true));
+      policyService.policiesByType$.mockReturnValue(of([]));
+
+      // Create a test organization where user can manage users but is not admin or owner
+      const organization = {
+        id: "org-id",
+        productTierType: ProductTierType.Enterprise,
+        useAdminSponsoredFamilies: true,
+        isAdmin: false,
+        isOwner: false,
+        canManageUsers: true,
+      } as Organization;
+
+      // Test the method
+      const result = await firstValueFrom(service.showSponsoredFamiliesDropdown$(of(organization)));
+      expect(result).toBe(true);
+    });
+
+    it("should return false when user has no admin permissions", async () => {
+      // Configure mocks
+      configService.getFeatureFlag$.mockReturnValue(of(true));
+      policyService.policiesByType$.mockReturnValue(of([]));
+
+      // Create a test organization where user has no admin permissions
+      const organization = {
+        id: "org-id",
+        productTierType: ProductTierType.Enterprise,
+        useAdminSponsoredFamilies: true,
+        isAdmin: false,
+        isOwner: false,
+        canManageUsers: false,
+      } as Organization;
+
+      // Test the method
+      const result = await firstValueFrom(service.showSponsoredFamiliesDropdown$(of(organization)));
+      expect(result).toBe(false);
+    });
+  });
+});
diff --git a/apps/web/src/app/billing/services/free-families-policy.service.ts b/apps/web/src/app/billing/services/free-families-policy.service.ts
index 81cb970cdbe..7a8e3804b2c 100644
--- a/apps/web/src/app/billing/services/free-families-policy.service.ts
+++ b/apps/web/src/app/billing/services/free-families-policy.service.ts
@@ -7,6 +7,9 @@ import { PolicyType } from "@bitwarden/common/admin-console/enums";
 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 { ProductTierType } from "@bitwarden/common/billing/enums";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 
 interface EnterpriseOrgStatus {
   isFreeFamilyPolicyEnabled: boolean;
@@ -26,6 +29,7 @@ export class FreeFamiliesPolicyService {
     private policyService: PolicyService,
     private organizationService: OrganizationService,
     private accountService: AccountService,
+    private configService: ConfigService,
   ) {}
 
   organizations$ = this.accountService.activeAccount$.pipe(
@@ -42,6 +46,48 @@ export class FreeFamiliesPolicyService {
     return this.getFreeFamiliesVisibility$();
   }
 
+  /**
+   * Determines whether to show the sponsored families dropdown in the organization layout
+   * @param organization The organization to check
+   * @returns Observable<boolean> indicating whether to show the dropdown
+   */
+  showSponsoredFamiliesDropdown$(organization: Observable<Organization>): Observable<boolean> {
+    const enterpriseOrganization$ = organization.pipe(
+      map((org) => org.productTierType === ProductTierType.Enterprise),
+    );
+
+    return this.accountService.activeAccount$.pipe(
+      getUserId,
+      switchMap((userId) => {
+        const policies$ = this.policyService.policiesByType$(
+          PolicyType.FreeFamiliesSponsorshipPolicy,
+          userId,
+        );
+
+        return combineLatest([
+          enterpriseOrganization$,
+          this.configService.getFeatureFlag$(FeatureFlag.PM17772_AdminInitiatedSponsorships),
+          organization,
+          policies$,
+        ]).pipe(
+          map(([isEnterprise, featureFlagEnabled, org, policies]) => {
+            const familiesFeatureDisabled = policies.some(
+              (policy) => policy.organizationId === org.id && policy.enabled,
+            );
+
+            return (
+              isEnterprise &&
+              featureFlagEnabled &&
+              !familiesFeatureDisabled &&
+              org.useAdminSponsoredFamilies &&
+              (org.isAdmin || org.isOwner || org.canManageUsers)
+            );
+          }),
+        );
+      }),
+    );
+  }
+
   private getFreeFamiliesVisibility$(): Observable<boolean> {
     return combineLatest([
       this.checkEnterpriseOrganizationsAndFetchPolicy(),
diff --git a/libs/common/src/admin-console/models/data/organization.data.spec.ts b/libs/common/src/admin-console/models/data/organization.data.spec.ts
index 5f487e1f898..fae24133502 100644
--- a/libs/common/src/admin-console/models/data/organization.data.spec.ts
+++ b/libs/common/src/admin-console/models/data/organization.data.spec.ts
@@ -58,6 +58,7 @@ describe("ORGANIZATIONS state", () => {
         familySponsorshipLastSyncDate: new Date(),
         userIsManagedByOrganization: false,
         useRiskInsights: false,
+        useAdminSponsoredFamilies: false,
       },
     };
     const result = sut.deserializer(JSON.parse(JSON.stringify(expectedResult)));
diff --git a/libs/common/src/admin-console/models/data/organization.data.ts b/libs/common/src/admin-console/models/data/organization.data.ts
index b81d06e6367..799d062aefa 100644
--- a/libs/common/src/admin-console/models/data/organization.data.ts
+++ b/libs/common/src/admin-console/models/data/organization.data.ts
@@ -60,6 +60,7 @@ export class OrganizationData {
   allowAdminAccessToAllCollectionItems: boolean;
   userIsManagedByOrganization: boolean;
   useRiskInsights: boolean;
+  useAdminSponsoredFamilies: boolean;
 
   constructor(
     response?: ProfileOrganizationResponse,
@@ -122,6 +123,7 @@ export class OrganizationData {
     this.allowAdminAccessToAllCollectionItems = response.allowAdminAccessToAllCollectionItems;
     this.userIsManagedByOrganization = response.userIsManagedByOrganization;
     this.useRiskInsights = response.useRiskInsights;
+    this.useAdminSponsoredFamilies = response.useAdminSponsoredFamilies;
 
     this.isMember = options.isMember;
     this.isProviderUser = options.isProviderUser;
diff --git a/libs/common/src/admin-console/models/domain/organization.ts b/libs/common/src/admin-console/models/domain/organization.ts
index c5c5b53cce7..2e51c54b0ad 100644
--- a/libs/common/src/admin-console/models/domain/organization.ts
+++ b/libs/common/src/admin-console/models/domain/organization.ts
@@ -90,6 +90,7 @@ export class Organization {
    */
   userIsManagedByOrganization: boolean;
   useRiskInsights: boolean;
+  useAdminSponsoredFamilies: boolean;
 
   constructor(obj?: OrganizationData) {
     if (obj == null) {
@@ -148,6 +149,7 @@ export class Organization {
     this.allowAdminAccessToAllCollectionItems = obj.allowAdminAccessToAllCollectionItems;
     this.userIsManagedByOrganization = obj.userIsManagedByOrganization;
     this.useRiskInsights = obj.useRiskInsights;
+    this.useAdminSponsoredFamilies = obj.useAdminSponsoredFamilies;
   }
 
   get canAccess() {
diff --git a/libs/common/src/admin-console/models/response/profile-organization.response.ts b/libs/common/src/admin-console/models/response/profile-organization.response.ts
index 5e37cfc4c5c..da97a1034b1 100644
--- a/libs/common/src/admin-console/models/response/profile-organization.response.ts
+++ b/libs/common/src/admin-console/models/response/profile-organization.response.ts
@@ -55,6 +55,7 @@ export class ProfileOrganizationResponse extends BaseResponse {
   allowAdminAccessToAllCollectionItems: boolean;
   userIsManagedByOrganization: boolean;
   useRiskInsights: boolean;
+  useAdminSponsoredFamilies: boolean;
 
   constructor(response: any) {
     super(response);
@@ -121,5 +122,6 @@ export class ProfileOrganizationResponse extends BaseResponse {
     );
     this.userIsManagedByOrganization = this.getResponseProperty("UserIsManagedByOrganization");
     this.useRiskInsights = this.getResponseProperty("UseRiskInsights");
+    this.useAdminSponsoredFamilies = this.getResponseProperty("UseAdminSponsoredFamilies");
   }
 }
diff --git a/libs/common/src/enums/feature-flag.enum.ts b/libs/common/src/enums/feature-flag.enum.ts
index fa776285ead..9ee1ef919f5 100644
--- a/libs/common/src/enums/feature-flag.enum.ts
+++ b/libs/common/src/enums/feature-flag.enum.ts
@@ -34,6 +34,7 @@ export enum FeatureFlag {
   PM15179_AddExistingOrgsFromProviderPortal = "pm-15179-add-existing-orgs-from-provider-portal",
   PM12276_BreadcrumbEventLogs = "pm-12276-breadcrumbing-for-business-features",
   PM18794_ProviderPaymentMethod = "pm-18794-provider-payment-method",
+  PM17772_AdminInitiatedSponsorships = "pm-17772-admin-initiated-sponsorships",
 
   /* Key Management */
   PrivateKeyRegeneration = "pm-12241-private-key-regeneration",
@@ -117,6 +118,7 @@ export const DefaultFeatureFlagValue = {
   [FeatureFlag.PM15179_AddExistingOrgsFromProviderPortal]: FALSE,
   [FeatureFlag.PM12276_BreadcrumbEventLogs]: FALSE,
   [FeatureFlag.PM18794_ProviderPaymentMethod]: FALSE,
+  [FeatureFlag.PM17772_AdminInitiatedSponsorships]: FALSE,
 
   /* Key Management */
   [FeatureFlag.PrivateKeyRegeneration]: FALSE,

From 6bd3fceaa1eac26fb8116fde0f308bbc40e77922 Mon Sep 17 00:00:00 2001
From: cyprain-okeke <108260115+cyprain-okeke@users.noreply.github.com>
Date: Wed, 16 Apr 2025 17:27:48 +0100
Subject: [PATCH 15/36] fix: align upgrade badge with header text in Event Logs
 (#14213)

---
 .../organizations/manage/events.component.html            | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

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 80d22467123..2079d592a28 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
@@ -1,6 +1,12 @@
 @let usePlaceHolderEvents = !organization?.useEvents && (isBreadcrumbEventLogsEnabled$ | async);
 <app-header>
-  <span bitBadge variant="primary" slot="title-suffix" *ngIf="usePlaceHolderEvents">
+  <span
+    bitBadge
+    variant="primary"
+    slot="title-suffix"
+    class="tw-ml-2 tw-mt-1.5 tw-inline-flex tw-items-center"
+    *ngIf="usePlaceHolderEvents"
+  >
     {{ "upgrade" | i18n }}
   </span>
 </app-header>

From 1efdcacd16d5d1fd9e0c853976c73491d40e839d Mon Sep 17 00:00:00 2001
From: Jonathan Prusik <jprusik@users.noreply.github.com>
Date: Wed, 16 Apr 2025 13:15:43 -0400
Subject: [PATCH 16/36] [PM-16641] Remove
 "inline-menu-positioning-improvements" feature flag (#14225)

* remove inline-menu-positioning-improvements flag

* remove unused LegacyOverlayBackground

* remove unused deprecated files

* appease ts error TS2564

* remove deleted resources from the manifest files
---
 .../autofill/background/tabs.background.ts    |   14 +-
 .../overlay.background.deprecated.ts          |  124 --
 .../overlay.background.deprecated.spec.ts     | 1464 --------------
 .../overlay.background.deprecated.ts          |  811 --------
 .../abstractions/autofill-init.deprecated.ts  |   41 -
 .../content/autofill-init.deprecated.spec.ts  |  604 ------
 .../content/autofill-init.deprecated.ts       |  315 ---
 .../bootstrap-legacy-autofill-overlay.ts      |   14 -
 .../autofill-overlay-button.deprecated.ts     |   29 -
 ...ofill-overlay-iframe.service.deprecated.ts |   33 -
 .../autofill-overlay-list.deprecated.ts       |   31 -
 ...utofill-overlay-page-element.deprecated.ts |   13 -
 ...lay-iframe.service.deprecated.spec.ts.snap |   23 -
 ...l-overlay-button-iframe.deprecated.spec.ts |   26 -
 ...tofill-overlay-button-iframe.deprecated.ts |   21 -
 ...-overlay-iframe-element.deprecated.spec.ts |   46 -
 ...ofill-overlay-iframe-element.deprecated.ts |   22 -
 ...-overlay-iframe.service.deprecated.spec.ts |  521 -----
 ...ofill-overlay-iframe.service.deprecated.ts |  429 ----
 ...ill-overlay-list-iframe.deprecated.spec.ts |   26 -
 ...autofill-overlay-list-iframe.deprecated.ts |   26 -
 ...ill-overlay-button.deprecated.spec.ts.snap |   83 -
 ...autofill-overlay-button.deprecated.spec.ts |  135 --
 .../autofill-overlay-button.deprecated.ts     |  124 --
 ...trap-autofill-overlay-button.deprecated.ts |   11 -
 .../overlay/pages/button/legacy-button.html   |   12 -
 .../overlay/pages/button/legacy-button.scss   |   36 -
 ...ofill-overlay-list.deprecated.spec.ts.snap |  537 -----
 .../autofill-overlay-list.deprecated.spec.ts  |  467 -----
 .../list/autofill-overlay-list.deprecated.ts  |  621 ------
 ...tstrap-autofill-overlay-list.deprecated.ts |   11 -
 .../overlay/pages/list/legacy-list.html       |   12 -
 .../overlay/pages/list/legacy-list.scss       |  292 ---
 ...ll-overlay-page-element.deprecated.spec.ts |  222 ---
 ...utofill-overlay-page-element.deprecated.ts |  157 --
 .../autofill-overlay-content.service.ts       |   37 -
 ...overlay-content.service.deprecated.spec.ts | 1743 -----------------
 ...fill-overlay-content.service.deprecated.ts | 1139 -----------
 .../popup/settings/autofill.component.html    |   10 +-
 .../popup/settings/autofill.component.ts      |   17 +-
 .../src/autofill/services/autofill.service.ts |    9 -
 .../browser/src/background/main.background.ts |   56 +-
 apps/browser/src/manifest.json                |    9 +-
 apps/browser/src/manifest.v3.json             |    9 +-
 apps/browser/webpack.config.js                |   16 -
 libs/common/src/enums/feature-flag.enum.ts    |    2 -
 46 files changed, 29 insertions(+), 10371 deletions(-)
 delete mode 100644 apps/browser/src/autofill/deprecated/background/abstractions/overlay.background.deprecated.ts
 delete mode 100644 apps/browser/src/autofill/deprecated/background/overlay.background.deprecated.spec.ts
 delete mode 100644 apps/browser/src/autofill/deprecated/background/overlay.background.deprecated.ts
 delete mode 100644 apps/browser/src/autofill/deprecated/content/abstractions/autofill-init.deprecated.ts
 delete mode 100644 apps/browser/src/autofill/deprecated/content/autofill-init.deprecated.spec.ts
 delete mode 100644 apps/browser/src/autofill/deprecated/content/autofill-init.deprecated.ts
 delete mode 100644 apps/browser/src/autofill/deprecated/content/bootstrap-legacy-autofill-overlay.ts
 delete mode 100644 apps/browser/src/autofill/deprecated/overlay/abstractions/autofill-overlay-button.deprecated.ts
 delete mode 100644 apps/browser/src/autofill/deprecated/overlay/abstractions/autofill-overlay-iframe.service.deprecated.ts
 delete mode 100644 apps/browser/src/autofill/deprecated/overlay/abstractions/autofill-overlay-list.deprecated.ts
 delete mode 100644 apps/browser/src/autofill/deprecated/overlay/abstractions/autofill-overlay-page-element.deprecated.ts
 delete mode 100644 apps/browser/src/autofill/deprecated/overlay/iframe-content/__snapshots__/autofill-overlay-iframe.service.deprecated.spec.ts.snap
 delete mode 100644 apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-button-iframe.deprecated.spec.ts
 delete mode 100644 apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-button-iframe.deprecated.ts
 delete mode 100644 apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-iframe-element.deprecated.spec.ts
 delete mode 100644 apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-iframe-element.deprecated.ts
 delete mode 100644 apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-iframe.service.deprecated.spec.ts
 delete mode 100644 apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-iframe.service.deprecated.ts
 delete mode 100644 apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-list-iframe.deprecated.spec.ts
 delete mode 100644 apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-list-iframe.deprecated.ts
 delete mode 100644 apps/browser/src/autofill/deprecated/overlay/pages/button/__snapshots__/autofill-overlay-button.deprecated.spec.ts.snap
 delete mode 100644 apps/browser/src/autofill/deprecated/overlay/pages/button/autofill-overlay-button.deprecated.spec.ts
 delete mode 100644 apps/browser/src/autofill/deprecated/overlay/pages/button/autofill-overlay-button.deprecated.ts
 delete mode 100644 apps/browser/src/autofill/deprecated/overlay/pages/button/bootstrap-autofill-overlay-button.deprecated.ts
 delete mode 100644 apps/browser/src/autofill/deprecated/overlay/pages/button/legacy-button.html
 delete mode 100644 apps/browser/src/autofill/deprecated/overlay/pages/button/legacy-button.scss
 delete mode 100644 apps/browser/src/autofill/deprecated/overlay/pages/list/__snapshots__/autofill-overlay-list.deprecated.spec.ts.snap
 delete mode 100644 apps/browser/src/autofill/deprecated/overlay/pages/list/autofill-overlay-list.deprecated.spec.ts
 delete mode 100644 apps/browser/src/autofill/deprecated/overlay/pages/list/autofill-overlay-list.deprecated.ts
 delete mode 100644 apps/browser/src/autofill/deprecated/overlay/pages/list/bootstrap-autofill-overlay-list.deprecated.ts
 delete mode 100644 apps/browser/src/autofill/deprecated/overlay/pages/list/legacy-list.html
 delete mode 100644 apps/browser/src/autofill/deprecated/overlay/pages/list/legacy-list.scss
 delete mode 100644 apps/browser/src/autofill/deprecated/overlay/pages/shared/autofill-overlay-page-element.deprecated.spec.ts
 delete mode 100644 apps/browser/src/autofill/deprecated/overlay/pages/shared/autofill-overlay-page-element.deprecated.ts
 delete mode 100644 apps/browser/src/autofill/deprecated/services/abstractions/autofill-overlay-content.service.ts
 delete mode 100644 apps/browser/src/autofill/deprecated/services/autofill-overlay-content.service.deprecated.spec.ts
 delete mode 100644 apps/browser/src/autofill/deprecated/services/autofill-overlay-content.service.deprecated.ts

diff --git a/apps/browser/src/autofill/background/tabs.background.ts b/apps/browser/src/autofill/background/tabs.background.ts
index b07e06234d3..c093f1a3b00 100644
--- a/apps/browser/src/autofill/background/tabs.background.ts
+++ b/apps/browser/src/autofill/background/tabs.background.ts
@@ -1,7 +1,3 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
-import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
-
 import MainBackground from "../../background/main.background";
 
 import { OverlayBackground } from "./abstractions/overlay.background";
@@ -14,7 +10,7 @@ export default class TabsBackground {
     private overlayBackground: OverlayBackground,
   ) {}
 
-  private focusedWindowId: number;
+  private focusedWindowId: number = -1;
 
   /**
    * Initializes the window and tab listeners.
@@ -90,14 +86,6 @@ export default class TabsBackground {
     changeInfo: chrome.tabs.TabChangeInfo,
     tab: chrome.tabs.Tab,
   ) => {
-    const overlayImprovementsFlag = await this.main.configService.getFeatureFlag(
-      FeatureFlag.InlineMenuPositioningImprovements,
-    );
-    const removePageDetailsStatus = new Set(["loading", "unloaded"]);
-    if (!overlayImprovementsFlag && removePageDetailsStatus.has(changeInfo.status)) {
-      this.overlayBackground.removePageDetails(tabId);
-    }
-
     if (this.focusedWindowId > 0 && tab.windowId !== this.focusedWindowId) {
       return;
     }
diff --git a/apps/browser/src/autofill/deprecated/background/abstractions/overlay.background.deprecated.ts b/apps/browser/src/autofill/deprecated/background/abstractions/overlay.background.deprecated.ts
deleted file mode 100644
index 88b78dc2495..00000000000
--- a/apps/browser/src/autofill/deprecated/background/abstractions/overlay.background.deprecated.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-import { CipherType } from "@bitwarden/common/vault/enums";
-import { CipherRepromptType } from "@bitwarden/common/vault/enums/cipher-reprompt-type";
-
-import { LockedVaultPendingNotificationsData } from "../../../background/abstractions/notification.background";
-import AutofillPageDetails from "../../../models/autofill-page-details";
-
-type WebsiteIconData = {
-  imageEnabled: boolean;
-  image: string;
-  fallbackImage: string;
-  icon: string;
-};
-
-type OverlayAddNewItemMessage = {
-  login?: {
-    uri?: string;
-    hostname: string;
-    username: string;
-    password: string;
-  };
-};
-
-type OverlayBackgroundExtensionMessage = {
-  [key: string]: any;
-  command: string;
-  tab?: chrome.tabs.Tab;
-  sender?: string;
-  details?: AutofillPageDetails;
-  overlayElement?: string;
-  display?: string;
-  data?: LockedVaultPendingNotificationsData;
-} & OverlayAddNewItemMessage;
-
-type OverlayPortMessage = {
-  [key: string]: any;
-  command: string;
-  direction?: string;
-  overlayCipherId?: string;
-};
-
-type FocusedFieldData = {
-  focusedFieldStyles: Partial<CSSStyleDeclaration>;
-  focusedFieldRects: Partial<DOMRect>;
-  tabId?: number;
-};
-
-type OverlayCipherData = {
-  id: string;
-  name: string;
-  type: CipherType;
-  reprompt: CipherRepromptType;
-  favorite: boolean;
-  icon: { imageEnabled: boolean; image: string; fallbackImage: string; icon: string };
-  login?: { username: string };
-  card?: string;
-};
-
-type BackgroundMessageParam = {
-  message: OverlayBackgroundExtensionMessage;
-};
-type BackgroundSenderParam = {
-  sender: chrome.runtime.MessageSender;
-};
-type BackgroundOnMessageHandlerParams = BackgroundMessageParam & BackgroundSenderParam;
-
-type OverlayBackgroundExtensionMessageHandlers = {
-  [key: string]: CallableFunction;
-  openAutofillOverlay: () => void;
-  autofillOverlayElementClosed: ({ message, sender }: BackgroundOnMessageHandlerParams) => void;
-  autofillOverlayAddNewVaultItem: ({ message, sender }: BackgroundOnMessageHandlerParams) => void;
-  getAutofillOverlayVisibility: () => void;
-  checkAutofillOverlayFocused: () => void;
-  focusAutofillOverlayList: () => void;
-  updateAutofillOverlayPosition: ({ message, sender }: BackgroundOnMessageHandlerParams) => void;
-  updateAutofillOverlayHidden: ({ message }: BackgroundMessageParam) => void;
-  updateFocusedFieldData: ({ message, sender }: BackgroundOnMessageHandlerParams) => void;
-  collectPageDetailsResponse: ({ message, sender }: BackgroundOnMessageHandlerParams) => void;
-  unlockCompleted: ({ message }: BackgroundMessageParam) => void;
-  addedCipher: () => void;
-  addEditCipherSubmitted: () => void;
-  editedCipher: () => void;
-  deletedCipher: () => void;
-};
-
-type PortMessageParam = {
-  message: OverlayPortMessage;
-};
-type PortConnectionParam = {
-  port: chrome.runtime.Port;
-};
-type PortOnMessageHandlerParams = PortMessageParam & PortConnectionParam;
-
-type OverlayButtonPortMessageHandlers = {
-  [key: string]: CallableFunction;
-  overlayButtonClicked: ({ port }: PortConnectionParam) => void;
-  closeAutofillOverlay: ({ port }: PortConnectionParam) => void;
-  forceCloseAutofillOverlay: ({ port }: PortConnectionParam) => void;
-  overlayPageBlurred: () => void;
-  redirectOverlayFocusOut: ({ message, port }: PortOnMessageHandlerParams) => void;
-};
-
-type OverlayListPortMessageHandlers = {
-  [key: string]: CallableFunction;
-  checkAutofillOverlayButtonFocused: () => void;
-  forceCloseAutofillOverlay: ({ port }: PortConnectionParam) => void;
-  overlayPageBlurred: () => void;
-  unlockVault: ({ port }: PortConnectionParam) => void;
-  fillSelectedListItem: ({ message, port }: PortOnMessageHandlerParams) => void;
-  addNewVaultItem: ({ port }: PortConnectionParam) => void;
-  viewSelectedCipher: ({ message, port }: PortOnMessageHandlerParams) => void;
-  redirectOverlayFocusOut: ({ message, port }: PortOnMessageHandlerParams) => void;
-};
-
-export {
-  WebsiteIconData,
-  OverlayBackgroundExtensionMessage,
-  OverlayPortMessage,
-  FocusedFieldData,
-  OverlayCipherData,
-  OverlayAddNewItemMessage,
-  OverlayBackgroundExtensionMessageHandlers,
-  OverlayButtonPortMessageHandlers,
-  OverlayListPortMessageHandlers,
-};
diff --git a/apps/browser/src/autofill/deprecated/background/overlay.background.deprecated.spec.ts b/apps/browser/src/autofill/deprecated/background/overlay.background.deprecated.spec.ts
deleted file mode 100644
index 68f8032350e..00000000000
--- a/apps/browser/src/autofill/deprecated/background/overlay.background.deprecated.spec.ts
+++ /dev/null
@@ -1,1464 +0,0 @@
-import { mock, MockProxy, mockReset } from "jest-mock-extended";
-import { BehaviorSubject, of } from "rxjs";
-
-import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
-import { AuthService } from "@bitwarden/common/auth/services/auth.service";
-import {
-  SHOW_AUTOFILL_BUTTON,
-  AutofillOverlayVisibility,
-} from "@bitwarden/common/autofill/constants";
-import { AutofillSettingsService } from "@bitwarden/common/autofill/services/autofill-settings.service";
-import {
-  DefaultDomainSettingsService,
-  DomainSettingsService,
-} from "@bitwarden/common/autofill/services/domain-settings.service";
-import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
-import {
-  EnvironmentService,
-  Region,
-} from "@bitwarden/common/platform/abstractions/environment.service";
-import { ThemeType } from "@bitwarden/common/platform/enums";
-import { Utils } from "@bitwarden/common/platform/misc/utils";
-import { CloudEnvironment } from "@bitwarden/common/platform/services/default-environment.service";
-import { I18nService } from "@bitwarden/common/platform/services/i18n.service";
-import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
-import {
-  FakeStateProvider,
-  FakeAccountService,
-  mockAccountServiceWith,
-} from "@bitwarden/common/spec";
-import { UserId } from "@bitwarden/common/types/guid";
-import { CipherType } from "@bitwarden/common/vault/enums";
-import { CipherRepromptType } from "@bitwarden/common/vault/enums/cipher-reprompt-type";
-import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
-import { CipherService } from "@bitwarden/common/vault/services/cipher.service";
-
-import { BrowserApi } from "../../../platform/browser/browser-api";
-import { BrowserPlatformUtilsService } from "../../../platform/services/platform-utils/browser-platform-utils.service";
-import {
-  AutofillOverlayElement,
-  AutofillOverlayPort,
-  RedirectFocusDirection,
-} from "../../enums/autofill-overlay.enum";
-import { AutofillService } from "../../services/abstractions/autofill.service";
-import {
-  createAutofillPageDetailsMock,
-  createChromeTabMock,
-  createFocusedFieldDataMock,
-  createPageDetailMock,
-  createPortSpyMock,
-} from "../../spec/autofill-mocks";
-import { flushPromises, sendMockExtensionMessage, sendPortMessage } from "../../spec/testing-utils";
-
-import LegacyOverlayBackground from "./overlay.background.deprecated";
-
-describe("OverlayBackground", () => {
-  const mockUserId = Utils.newGuid() as UserId;
-  const accountService: FakeAccountService = mockAccountServiceWith(mockUserId);
-  const fakeStateProvider: FakeStateProvider = new FakeStateProvider(accountService);
-  let domainSettingsService: DomainSettingsService;
-  let buttonPortSpy: chrome.runtime.Port;
-  let listPortSpy: chrome.runtime.Port;
-  let overlayBackground: LegacyOverlayBackground;
-  const cipherService = mock<CipherService>();
-  const autofillService = mock<AutofillService>();
-  let configService: MockProxy<ConfigService>;
-  let activeAccountStatusMock$: BehaviorSubject<AuthenticationStatus>;
-  let authService: MockProxy<AuthService>;
-
-  const environmentService = mock<EnvironmentService>();
-  environmentService.environment$ = new BehaviorSubject(
-    new CloudEnvironment({
-      key: Region.US,
-      domain: "bitwarden.com",
-      urls: { icons: "https://icons.bitwarden.com/" },
-    }),
-  );
-  const autofillSettingsService = mock<AutofillSettingsService>();
-  const i18nService = mock<I18nService>();
-  const platformUtilsService = mock<BrowserPlatformUtilsService>();
-  const themeStateService = mock<ThemeStateService>();
-  const initOverlayElementPorts = async (options = { initList: true, initButton: true }) => {
-    const { initList, initButton } = options;
-    if (initButton) {
-      await overlayBackground["handlePortOnConnect"](createPortSpyMock(AutofillOverlayPort.Button));
-      buttonPortSpy = overlayBackground["overlayButtonPort"];
-    }
-
-    if (initList) {
-      await overlayBackground["handlePortOnConnect"](createPortSpyMock(AutofillOverlayPort.List));
-      listPortSpy = overlayBackground["overlayListPort"];
-    }
-
-    return { buttonPortSpy, listPortSpy };
-  };
-
-  beforeEach(() => {
-    configService = mock<ConfigService>();
-    configService.getFeatureFlag$.mockImplementation(() => of(true));
-    domainSettingsService = new DefaultDomainSettingsService(fakeStateProvider, configService);
-    activeAccountStatusMock$ = new BehaviorSubject(AuthenticationStatus.Unlocked);
-    authService = mock<AuthService>();
-    authService.activeAccountStatus$ = activeAccountStatusMock$;
-    overlayBackground = new LegacyOverlayBackground(
-      cipherService,
-      autofillService,
-      authService,
-      environmentService,
-      domainSettingsService,
-      autofillSettingsService,
-      i18nService,
-      platformUtilsService,
-      themeStateService,
-      accountService,
-    );
-
-    jest
-      .spyOn(overlayBackground as any, "getOverlayVisibility")
-      .mockResolvedValue(AutofillOverlayVisibility.OnFieldFocus);
-
-    themeStateService.selectedTheme$ = of(ThemeType.Light);
-    domainSettingsService.showFavicons$ = of(true);
-
-    void overlayBackground.init();
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-    mockReset(cipherService);
-  });
-
-  describe("removePageDetails", () => {
-    it("removes the page details for a specific tab from the pageDetailsForTab object", () => {
-      const tabId = 1;
-      const frameId = 2;
-      overlayBackground["pageDetailsForTab"][tabId] = new Map([[frameId, createPageDetailMock()]]);
-      overlayBackground.removePageDetails(tabId);
-
-      expect(overlayBackground["pageDetailsForTab"][tabId]).toBeUndefined();
-    });
-  });
-
-  describe("init", () => {
-    it("sets up the extension message listeners, get the overlay's visibility settings, and get the user's auth status", async () => {
-      overlayBackground["setupExtensionMessageListeners"] = jest.fn();
-      overlayBackground["getOverlayVisibility"] = jest.fn();
-      overlayBackground["getAuthStatus"] = jest.fn();
-
-      await overlayBackground.init();
-
-      expect(overlayBackground["setupExtensionMessageListeners"]).toHaveBeenCalled();
-      expect(overlayBackground["getOverlayVisibility"]).toHaveBeenCalled();
-      expect(overlayBackground["getAuthStatus"]).toHaveBeenCalled();
-    });
-  });
-
-  describe("updateOverlayCiphers", () => {
-    const url = "https://jest-testing-website.com";
-    const tab = createChromeTabMock({ url });
-    const cipher1 = mock<CipherView>({
-      id: "id-1",
-      localData: { lastUsedDate: 222 },
-      name: "name-1",
-      type: CipherType.Login,
-      login: { username: "username-1", uri: url },
-    });
-    const cipher2 = mock<CipherView>({
-      id: "id-2",
-      localData: { lastUsedDate: 111 },
-      name: "name-2",
-      type: CipherType.Login,
-      login: { username: "username-2", uri: url },
-    });
-
-    beforeEach(() => {
-      activeAccountStatusMock$.next(AuthenticationStatus.Unlocked);
-    });
-
-    it("ignores updating the overlay ciphers if the user's auth status is not unlocked", async () => {
-      activeAccountStatusMock$.next(AuthenticationStatus.Locked);
-      jest.spyOn(BrowserApi, "getTabFromCurrentWindowId");
-      jest.spyOn(cipherService, "getAllDecryptedForUrl");
-
-      await overlayBackground.updateOverlayCiphers();
-
-      expect(BrowserApi.getTabFromCurrentWindowId).not.toHaveBeenCalled();
-      expect(cipherService.getAllDecryptedForUrl).not.toHaveBeenCalled();
-    });
-
-    it("ignores updating the overlay ciphers if the tab is undefined", async () => {
-      jest.spyOn(BrowserApi, "getTabFromCurrentWindowId").mockResolvedValueOnce(undefined);
-      jest.spyOn(cipherService, "getAllDecryptedForUrl");
-
-      await overlayBackground.updateOverlayCiphers();
-
-      expect(BrowserApi.getTabFromCurrentWindowId).toHaveBeenCalled();
-      expect(cipherService.getAllDecryptedForUrl).not.toHaveBeenCalled();
-    });
-
-    it("queries all ciphers for the given url, sort them by last used, and format them for usage in the overlay", async () => {
-      jest.spyOn(BrowserApi, "getTabFromCurrentWindowId").mockResolvedValueOnce(tab);
-      cipherService.getAllDecryptedForUrl.mockResolvedValue([cipher1, cipher2]);
-      cipherService.sortCiphersByLastUsedThenName.mockReturnValue(-1);
-      jest.spyOn(BrowserApi, "tabSendMessageData").mockImplementation();
-      jest.spyOn(overlayBackground as any, "getOverlayCipherData");
-
-      await overlayBackground.updateOverlayCiphers();
-
-      expect(BrowserApi.getTabFromCurrentWindowId).toHaveBeenCalled();
-      expect(cipherService.getAllDecryptedForUrl).toHaveBeenCalledWith(url, mockUserId);
-      expect(overlayBackground["cipherService"].sortCiphersByLastUsedThenName).toHaveBeenCalled();
-      expect(overlayBackground["overlayLoginCiphers"]).toStrictEqual(
-        new Map([
-          ["overlay-cipher-0", cipher2],
-          ["overlay-cipher-1", cipher1],
-        ]),
-      );
-      expect(overlayBackground["getOverlayCipherData"]).toHaveBeenCalled();
-    });
-
-    it("posts an `updateOverlayListCiphers` message to the overlay list port, and send a `updateIsOverlayCiphersPopulated` message to the tab indicating that the list of ciphers is populated", async () => {
-      overlayBackground["overlayListPort"] = mock<chrome.runtime.Port>();
-      cipherService.getAllDecryptedForUrl.mockResolvedValue([cipher1, cipher2]);
-      cipherService.sortCiphersByLastUsedThenName.mockReturnValue(-1);
-      jest.spyOn(BrowserApi, "getTabFromCurrentWindowId").mockResolvedValueOnce(tab);
-      jest.spyOn(BrowserApi, "tabSendMessageData").mockImplementation();
-
-      await overlayBackground.updateOverlayCiphers();
-
-      expect(overlayBackground["overlayListPort"].postMessage).toHaveBeenCalledWith({
-        command: "updateOverlayListCiphers",
-        ciphers: [
-          {
-            card: null,
-            favorite: cipher2.favorite,
-            icon: {
-              fallbackImage: "images/bwi-globe.png",
-              icon: "bwi-globe",
-              image: "https://icons.bitwarden.com//jest-testing-website.com/icon.png",
-              imageEnabled: true,
-            },
-            id: "overlay-cipher-0",
-            login: {
-              username: "username-2",
-            },
-            name: "name-2",
-            reprompt: cipher2.reprompt,
-            type: 1,
-          },
-          {
-            card: null,
-            favorite: cipher1.favorite,
-            icon: {
-              fallbackImage: "images/bwi-globe.png",
-              icon: "bwi-globe",
-              image: "https://icons.bitwarden.com//jest-testing-website.com/icon.png",
-              imageEnabled: true,
-            },
-            id: "overlay-cipher-1",
-            login: {
-              username: "username-1",
-            },
-            name: "name-1",
-            reprompt: cipher1.reprompt,
-            type: 1,
-          },
-        ],
-      });
-      expect(BrowserApi.tabSendMessageData).toHaveBeenCalledWith(
-        tab,
-        "updateIsOverlayCiphersPopulated",
-        { isOverlayCiphersPopulated: true },
-      );
-    });
-  });
-
-  describe("getOverlayCipherData", () => {
-    const url = "https://jest-testing-website.com";
-    const cipher1 = mock<CipherView>({
-      id: "id-1",
-      localData: { lastUsedDate: 222 },
-      name: "name-1",
-      type: CipherType.Login,
-      login: { username: "username-1", uri: url },
-    });
-    const cipher2 = mock<CipherView>({
-      id: "id-2",
-      localData: { lastUsedDate: 111 },
-      name: "name-2",
-      type: CipherType.Login,
-      login: { username: "username-2", uri: url },
-    });
-    const cipher3 = mock<CipherView>({
-      id: "id-3",
-      localData: { lastUsedDate: 333 },
-      name: "name-3",
-      type: CipherType.Card,
-      card: { subTitle: "Visa, *6789" },
-    });
-    const cipher4 = mock<CipherView>({
-      id: "id-4",
-      localData: { lastUsedDate: 444 },
-      name: "name-4",
-      type: CipherType.Card,
-      card: { subTitle: "Mastercard, *1234" },
-    });
-
-    it("formats and returns the cipher data", async () => {
-      overlayBackground["overlayLoginCiphers"] = new Map([
-        ["overlay-cipher-0", cipher2],
-        ["overlay-cipher-1", cipher1],
-        ["overlay-cipher-2", cipher3],
-        ["overlay-cipher-3", cipher4],
-      ]);
-
-      const overlayCipherData = await overlayBackground["getOverlayCipherData"]();
-
-      expect(overlayCipherData).toStrictEqual([
-        {
-          card: null,
-          favorite: cipher2.favorite,
-          icon: {
-            fallbackImage: "images/bwi-globe.png",
-            icon: "bwi-globe",
-            image: "https://icons.bitwarden.com//jest-testing-website.com/icon.png",
-            imageEnabled: true,
-          },
-          id: "overlay-cipher-0",
-          login: {
-            username: "username-2",
-          },
-          name: "name-2",
-          reprompt: cipher2.reprompt,
-          type: 1,
-        },
-        {
-          card: null,
-          favorite: cipher1.favorite,
-          icon: {
-            fallbackImage: "images/bwi-globe.png",
-            icon: "bwi-globe",
-            image: "https://icons.bitwarden.com//jest-testing-website.com/icon.png",
-            imageEnabled: true,
-          },
-          id: "overlay-cipher-1",
-          login: {
-            username: "username-1",
-          },
-          name: "name-1",
-          reprompt: cipher1.reprompt,
-          type: 1,
-        },
-        {
-          card: "Visa, *6789",
-          favorite: cipher3.favorite,
-          icon: {
-            fallbackImage: "",
-            icon: "bwi-credit-card",
-            image: null,
-            imageEnabled: true,
-          },
-          id: "overlay-cipher-2",
-          login: null,
-          name: "name-3",
-          reprompt: cipher3.reprompt,
-          type: 3,
-        },
-        {
-          card: "Mastercard, *1234",
-          favorite: cipher4.favorite,
-          icon: {
-            fallbackImage: "",
-            icon: "bwi-credit-card",
-            image: null,
-            imageEnabled: true,
-          },
-          id: "overlay-cipher-3",
-          login: null,
-          name: "name-4",
-          reprompt: cipher4.reprompt,
-          type: 3,
-        },
-      ]);
-    });
-  });
-
-  describe("getAuthStatus", () => {
-    it("will update the user's auth status but will not update the overlay ciphers", async () => {
-      const authStatus = AuthenticationStatus.Unlocked;
-      overlayBackground["userAuthStatus"] = AuthenticationStatus.Unlocked;
-      jest.spyOn(overlayBackground["authService"], "getAuthStatus").mockResolvedValue(authStatus);
-      jest.spyOn(overlayBackground as any, "updateOverlayButtonAuthStatus").mockImplementation();
-      jest.spyOn(overlayBackground as any, "updateOverlayCiphers").mockImplementation();
-
-      const status = await overlayBackground["getAuthStatus"]();
-
-      expect(overlayBackground["authService"].getAuthStatus).toHaveBeenCalled();
-      expect(overlayBackground["updateOverlayButtonAuthStatus"]).not.toHaveBeenCalled();
-      expect(overlayBackground["updateOverlayCiphers"]).not.toHaveBeenCalled();
-      expect(overlayBackground["userAuthStatus"]).toBe(authStatus);
-      expect(status).toBe(authStatus);
-    });
-
-    it("will update the user's auth status and update the overlay ciphers if the status has been modified", async () => {
-      const authStatus = AuthenticationStatus.Unlocked;
-      overlayBackground["userAuthStatus"] = AuthenticationStatus.LoggedOut;
-      jest.spyOn(overlayBackground["authService"], "getAuthStatus").mockResolvedValue(authStatus);
-      jest.spyOn(overlayBackground as any, "updateOverlayButtonAuthStatus").mockImplementation();
-      jest.spyOn(overlayBackground as any, "updateOverlayCiphers").mockImplementation();
-
-      await overlayBackground["getAuthStatus"]();
-
-      expect(overlayBackground["authService"].getAuthStatus).toHaveBeenCalled();
-      expect(overlayBackground["updateOverlayButtonAuthStatus"]).toHaveBeenCalled();
-      expect(overlayBackground["updateOverlayCiphers"]).toHaveBeenCalled();
-      expect(overlayBackground["userAuthStatus"]).toBe(authStatus);
-    });
-  });
-
-  describe("updateOverlayButtonAuthStatus", () => {
-    it("will send a message to the button port with the user's auth status", () => {
-      overlayBackground["overlayButtonPort"] = mock<chrome.runtime.Port>();
-      jest.spyOn(overlayBackground["overlayButtonPort"], "postMessage");
-
-      overlayBackground["updateOverlayButtonAuthStatus"]();
-
-      expect(overlayBackground["overlayButtonPort"].postMessage).toHaveBeenCalledWith({
-        command: "updateOverlayButtonAuthStatus",
-        authStatus: overlayBackground["userAuthStatus"],
-      });
-    });
-  });
-
-  describe("getTranslations", () => {
-    it("will query the overlay page translations if they have not been queried", () => {
-      overlayBackground["overlayPageTranslations"] = undefined;
-      jest.spyOn(overlayBackground as any, "getTranslations");
-      jest.spyOn(overlayBackground["i18nService"], "translate").mockImplementation((key) => key);
-      jest.spyOn(BrowserApi, "getUILanguage").mockReturnValue("en");
-
-      const translations = overlayBackground["getTranslations"]();
-
-      expect(overlayBackground["getTranslations"]).toHaveBeenCalled();
-      const translationKeys = [
-        "opensInANewWindow",
-        "bitwardenOverlayButton",
-        "toggleBitwardenVaultOverlay",
-        "bitwardenVault",
-        "unlockYourAccountToViewMatchingLogins",
-        "unlockAccount",
-        "fillCredentialsFor",
-        "partialUsername",
-        "view",
-        "noItemsToShow",
-        "newItem",
-        "addNewVaultItem",
-      ];
-      translationKeys.forEach((key) => {
-        expect(overlayBackground["i18nService"].translate).toHaveBeenCalledWith(key);
-      });
-      expect(translations).toStrictEqual({
-        locale: "en",
-        opensInANewWindow: "opensInANewWindow",
-        buttonPageTitle: "bitwardenOverlayButton",
-        toggleBitwardenVaultOverlay: "toggleBitwardenVaultOverlay",
-        listPageTitle: "bitwardenVault",
-        unlockYourAccount: "unlockYourAccountToViewMatchingLogins",
-        unlockAccount: "unlockAccount",
-        fillCredentialsFor: "fillCredentialsFor",
-        partialUsername: "partialUsername",
-        view: "view",
-        noItemsToShow: "noItemsToShow",
-        newItem: "newItem",
-        addNewVaultItem: "addNewVaultItem",
-      });
-    });
-  });
-
-  describe("setupExtensionMessageListeners", () => {
-    it("will set up onMessage and onConnect listeners", () => {
-      overlayBackground["setupExtensionMessageListeners"]();
-
-      expect(chrome.runtime.onMessage.addListener).toHaveBeenCalled();
-      expect(chrome.runtime.onConnect.addListener).toHaveBeenCalled();
-    });
-  });
-
-  describe("handleExtensionMessage", () => {
-    it("will return early if the message command is not present within the extensionMessageHandlers", () => {
-      const message = {
-        command: "not-a-command",
-      };
-      const sender = mock<chrome.runtime.MessageSender>({ tab: { id: 1 } });
-      const sendResponse = jest.fn();
-
-      const returnValue = overlayBackground["handleExtensionMessage"](
-        message,
-        sender,
-        sendResponse,
-      );
-
-      expect(returnValue).toBe(null);
-      expect(sendResponse).not.toHaveBeenCalled();
-    });
-
-    it("will trigger the message handler and return undefined if the message does not have a response", () => {
-      const message = {
-        command: "autofillOverlayElementClosed",
-      };
-      const sender = mock<chrome.runtime.MessageSender>({ tab: { id: 1 } });
-      const sendResponse = jest.fn();
-      jest.spyOn(overlayBackground as any, "overlayElementClosed");
-
-      const returnValue = overlayBackground["handleExtensionMessage"](
-        message,
-        sender,
-        sendResponse,
-      );
-
-      expect(returnValue).toBe(null);
-      expect(sendResponse).not.toHaveBeenCalled();
-      expect(overlayBackground["overlayElementClosed"]).toHaveBeenCalledWith(message, sender);
-    });
-
-    it("will return a response if the message handler returns a response", async () => {
-      const message = {
-        command: "openAutofillOverlay",
-      };
-      const sender = mock<chrome.runtime.MessageSender>({ tab: { id: 1 } });
-      const sendResponse = jest.fn();
-      jest.spyOn(overlayBackground as any, "getTranslations").mockReturnValue("translations");
-
-      const returnValue = overlayBackground["handleExtensionMessage"](
-        message,
-        sender,
-        sendResponse,
-      );
-
-      expect(returnValue).toBe(true);
-    });
-
-    describe("extension message handlers", () => {
-      beforeEach(() => {
-        jest
-          .spyOn(overlayBackground as any, "getAuthStatus")
-          .mockResolvedValue(AuthenticationStatus.Unlocked);
-      });
-
-      describe("openAutofillOverlay message handler", () => {
-        it("opens the autofill overlay by sending a message to the current tab", async () => {
-          const sender = mock<chrome.runtime.MessageSender>({ tab: { id: 1 } });
-          jest.spyOn(BrowserApi, "getTabFromCurrentWindowId").mockResolvedValueOnce(sender.tab);
-          jest.spyOn(BrowserApi, "tabSendMessageData").mockImplementation();
-
-          sendMockExtensionMessage({ command: "openAutofillOverlay" });
-          await flushPromises();
-
-          expect(BrowserApi.tabSendMessageData).toHaveBeenCalledWith(
-            sender.tab,
-            "openAutofillOverlay",
-            {
-              isFocusingFieldElement: false,
-              isOpeningFullOverlay: false,
-              authStatus: AuthenticationStatus.Unlocked,
-            },
-          );
-        });
-      });
-
-      describe("autofillOverlayElementClosed message handler", () => {
-        beforeEach(async () => {
-          await initOverlayElementPorts();
-        });
-
-        it("disconnects any expired ports if the sender is not from the same page as the most recently focused field", () => {
-          const port1 = mock<chrome.runtime.Port>();
-          const port2 = mock<chrome.runtime.Port>();
-          overlayBackground["expiredPorts"] = [port1, port2];
-          const sender = mock<chrome.runtime.MessageSender>({ tab: { id: 1 } });
-          const focusedFieldData = createFocusedFieldDataMock({ tabId: 2 });
-          sendMockExtensionMessage({ command: "updateFocusedFieldData", focusedFieldData });
-
-          sendMockExtensionMessage(
-            {
-              command: "autofillOverlayElementClosed",
-              overlayElement: AutofillOverlayElement.Button,
-            },
-            sender,
-          );
-
-          expect(port1.disconnect).toHaveBeenCalled();
-          expect(port2.disconnect).toHaveBeenCalled();
-        });
-
-        it("disconnects the button element port", () => {
-          sendMockExtensionMessage({
-            command: "autofillOverlayElementClosed",
-            overlayElement: AutofillOverlayElement.Button,
-          });
-
-          expect(buttonPortSpy.disconnect).toHaveBeenCalled();
-          expect(overlayBackground["overlayButtonPort"]).toBeNull();
-        });
-
-        it("disconnects the list element port", () => {
-          sendMockExtensionMessage({
-            command: "autofillOverlayElementClosed",
-            overlayElement: AutofillOverlayElement.List,
-          });
-
-          expect(listPortSpy.disconnect).toHaveBeenCalled();
-          expect(overlayBackground["overlayListPort"]).toBeNull();
-        });
-      });
-
-      describe("autofillOverlayAddNewVaultItem message handler", () => {
-        let sender: chrome.runtime.MessageSender;
-        beforeEach(() => {
-          sender = mock<chrome.runtime.MessageSender>({ tab: { id: 1 } });
-          jest
-            .spyOn(overlayBackground["cipherService"], "setAddEditCipherInfo")
-            .mockImplementation();
-          jest.spyOn(overlayBackground as any, "openAddEditVaultItemPopout").mockImplementation();
-        });
-
-        it("will not open the add edit popout window if the message does not have a login cipher provided", () => {
-          sendMockExtensionMessage({ command: "autofillOverlayAddNewVaultItem" }, sender);
-
-          expect(overlayBackground["cipherService"].setAddEditCipherInfo).not.toHaveBeenCalled();
-          expect(overlayBackground["openAddEditVaultItemPopout"]).not.toHaveBeenCalled();
-        });
-
-        it("will open the add edit popout window after creating a new cipher", async () => {
-          jest.spyOn(BrowserApi, "sendMessage");
-
-          sendMockExtensionMessage(
-            {
-              command: "autofillOverlayAddNewVaultItem",
-              login: {
-                uri: "https://tacos.com",
-                hostname: "",
-                username: "username",
-                password: "password",
-              },
-            },
-            sender,
-          );
-          await flushPromises();
-
-          expect(overlayBackground["cipherService"].setAddEditCipherInfo).toHaveBeenCalled();
-          expect(overlayBackground["openAddEditVaultItemPopout"]).toHaveBeenCalled();
-        });
-      });
-
-      describe("getAutofillOverlayVisibility message handler", () => {
-        beforeEach(() => {
-          jest
-            .spyOn(overlayBackground as any, "getOverlayVisibility")
-            .mockResolvedValue(AutofillOverlayVisibility.OnFieldFocus);
-        });
-
-        it("will set the overlayVisibility property", async () => {
-          sendMockExtensionMessage({ command: "getAutofillOverlayVisibility" });
-          await flushPromises();
-
-          expect(await overlayBackground["getOverlayVisibility"]()).toBe(
-            AutofillOverlayVisibility.OnFieldFocus,
-          );
-        });
-
-        it("returns the overlayVisibility property", async () => {
-          const sendMessageSpy = jest.fn();
-
-          sendMockExtensionMessage(
-            { command: "getAutofillOverlayVisibility" },
-            undefined,
-            sendMessageSpy,
-          );
-          await flushPromises();
-
-          expect(sendMessageSpy).toHaveBeenCalledWith(AutofillOverlayVisibility.OnFieldFocus);
-        });
-      });
-
-      describe("checkAutofillOverlayFocused message handler", () => {
-        beforeEach(async () => {
-          await initOverlayElementPorts();
-        });
-
-        it("will check if the overlay list is focused if the list port is open", () => {
-          sendMockExtensionMessage({ command: "checkAutofillOverlayFocused" });
-
-          expect(listPortSpy.postMessage).toHaveBeenCalledWith({
-            command: "checkAutofillOverlayListFocused",
-          });
-          expect(buttonPortSpy.postMessage).not.toHaveBeenCalledWith({
-            command: "checkAutofillOverlayButtonFocused",
-          });
-        });
-
-        it("will check if the overlay button is focused if the list port is not open", () => {
-          overlayBackground["overlayListPort"] = undefined;
-
-          sendMockExtensionMessage({ command: "checkAutofillOverlayFocused" });
-
-          expect(buttonPortSpy.postMessage).toHaveBeenCalledWith({
-            command: "checkAutofillOverlayButtonFocused",
-          });
-          expect(listPortSpy.postMessage).not.toHaveBeenCalledWith({
-            command: "checkAutofillOverlayListFocused",
-          });
-        });
-      });
-
-      describe("focusAutofillOverlayList message handler", () => {
-        it("will send a `focusOverlayList` message to the overlay list port", async () => {
-          await initOverlayElementPorts({ initList: true, initButton: false });
-
-          sendMockExtensionMessage({ command: "focusAutofillOverlayList" });
-
-          expect(listPortSpy.postMessage).toHaveBeenCalledWith({ command: "focusOverlayList" });
-        });
-      });
-
-      describe("updateAutofillOverlayPosition message handler", () => {
-        beforeEach(async () => {
-          await overlayBackground["handlePortOnConnect"](
-            createPortSpyMock(AutofillOverlayPort.List),
-          );
-          listPortSpy = overlayBackground["overlayListPort"];
-
-          await overlayBackground["handlePortOnConnect"](
-            createPortSpyMock(AutofillOverlayPort.Button),
-          );
-          buttonPortSpy = overlayBackground["overlayButtonPort"];
-        });
-
-        it("ignores updating the position if the overlay element type is not provided", () => {
-          sendMockExtensionMessage({ command: "updateAutofillOverlayPosition" });
-
-          expect(listPortSpy.postMessage).not.toHaveBeenCalledWith({
-            command: "updateIframePosition",
-            styles: expect.anything(),
-          });
-          expect(buttonPortSpy.postMessage).not.toHaveBeenCalledWith({
-            command: "updateIframePosition",
-            styles: expect.anything(),
-          });
-        });
-
-        it("skips updating the position if the most recently focused field is different than the message sender", () => {
-          const sender = mock<chrome.runtime.MessageSender>({ tab: { id: 1 } });
-          const focusedFieldData = createFocusedFieldDataMock({ tabId: 2 });
-          sendMockExtensionMessage({ command: "updateFocusedFieldData", focusedFieldData });
-
-          sendMockExtensionMessage({ command: "updateAutofillOverlayPosition" }, sender);
-
-          expect(listPortSpy.postMessage).not.toHaveBeenCalledWith({
-            command: "updateIframePosition",
-            styles: expect.anything(),
-          });
-          expect(buttonPortSpy.postMessage).not.toHaveBeenCalledWith({
-            command: "updateIframePosition",
-            styles: expect.anything(),
-          });
-        });
-
-        it("updates the overlay button's position", () => {
-          const focusedFieldData = createFocusedFieldDataMock();
-          sendMockExtensionMessage({ command: "updateFocusedFieldData", focusedFieldData });
-
-          sendMockExtensionMessage({
-            command: "updateAutofillOverlayPosition",
-            overlayElement: AutofillOverlayElement.Button,
-          });
-
-          expect(buttonPortSpy.postMessage).toHaveBeenCalledWith({
-            command: "updateIframePosition",
-            styles: { height: "2px", left: "4px", top: "2px", width: "2px" },
-          });
-        });
-
-        it("modifies the overlay button's height for medium sized input elements", () => {
-          const focusedFieldData = createFocusedFieldDataMock({
-            focusedFieldRects: { top: 1, left: 2, height: 35, width: 4 },
-          });
-          sendMockExtensionMessage({ command: "updateFocusedFieldData", focusedFieldData });
-
-          sendMockExtensionMessage({
-            command: "updateAutofillOverlayPosition",
-            overlayElement: AutofillOverlayElement.Button,
-          });
-
-          expect(buttonPortSpy.postMessage).toHaveBeenCalledWith({
-            command: "updateIframePosition",
-            styles: { height: "20px", left: "-22px", top: "8px", width: "20px" },
-          });
-        });
-
-        it("modifies the overlay button's height for large sized input elements", () => {
-          const focusedFieldData = createFocusedFieldDataMock({
-            focusedFieldRects: { top: 1, left: 2, height: 50, width: 4 },
-          });
-          sendMockExtensionMessage({ command: "updateFocusedFieldData", focusedFieldData });
-
-          sendMockExtensionMessage({
-            command: "updateAutofillOverlayPosition",
-            overlayElement: AutofillOverlayElement.Button,
-          });
-
-          expect(buttonPortSpy.postMessage).toHaveBeenCalledWith({
-            command: "updateIframePosition",
-            styles: { height: "27px", left: "-32px", top: "13px", width: "27px" },
-          });
-        });
-
-        it("takes into account the right padding of the focused field in positioning the button if the right padding of the field is larger than the left padding", () => {
-          const focusedFieldData = createFocusedFieldDataMock({
-            focusedFieldStyles: { paddingRight: "20px", paddingLeft: "6px" },
-          });
-          sendMockExtensionMessage({ command: "updateFocusedFieldData", focusedFieldData });
-
-          sendMockExtensionMessage({
-            command: "updateAutofillOverlayPosition",
-            overlayElement: AutofillOverlayElement.Button,
-          });
-
-          expect(buttonPortSpy.postMessage).toHaveBeenCalledWith({
-            command: "updateIframePosition",
-            styles: { height: "2px", left: "-18px", top: "2px", width: "2px" },
-          });
-        });
-
-        it("will post a message to the overlay list facilitating an update of the list's position", () => {
-          const sender = mock<chrome.runtime.MessageSender>({ tab: { id: 1 } });
-          const focusedFieldData = createFocusedFieldDataMock();
-          sendMockExtensionMessage({ command: "updateFocusedFieldData", focusedFieldData });
-
-          overlayBackground["updateOverlayPosition"](
-            { overlayElement: AutofillOverlayElement.List },
-            sender,
-          );
-          sendMockExtensionMessage({
-            command: "updateAutofillOverlayPosition",
-            overlayElement: AutofillOverlayElement.List,
-          });
-
-          expect(listPortSpy.postMessage).toHaveBeenCalledWith({
-            command: "updateIframePosition",
-            styles: { left: "2px", top: "4px", width: "4px" },
-          });
-        });
-      });
-
-      describe("updateOverlayHidden", () => {
-        beforeEach(async () => {
-          await initOverlayElementPorts();
-        });
-
-        it("returns early if the display value is not provided", () => {
-          const message = {
-            command: "updateAutofillOverlayHidden",
-          };
-
-          sendMockExtensionMessage(message);
-
-          expect(buttonPortSpy.postMessage).not.toHaveBeenCalledWith(message);
-          expect(listPortSpy.postMessage).not.toHaveBeenCalledWith(message);
-        });
-
-        it("posts a message to the overlay button and list with the display value", () => {
-          const message = { command: "updateAutofillOverlayHidden", display: "none" };
-
-          sendMockExtensionMessage(message);
-
-          expect(overlayBackground["overlayButtonPort"].postMessage).toHaveBeenCalledWith({
-            command: "updateOverlayHidden",
-            styles: {
-              display: message.display,
-            },
-          });
-          expect(overlayBackground["overlayListPort"].postMessage).toHaveBeenCalledWith({
-            command: "updateOverlayHidden",
-            styles: {
-              display: message.display,
-            },
-          });
-        });
-      });
-
-      describe("collectPageDetailsResponse message handler", () => {
-        let sender: chrome.runtime.MessageSender;
-        const pageDetails1 = createAutofillPageDetailsMock({
-          login: { username: "username1", password: "password1" },
-        });
-        const pageDetails2 = createAutofillPageDetailsMock({
-          login: { username: "username2", password: "password2" },
-        });
-
-        beforeEach(() => {
-          sender = mock<chrome.runtime.MessageSender>({ tab: { id: 1 } });
-        });
-
-        it("stores the page details provided by the message by the tab id of the sender", () => {
-          sendMockExtensionMessage(
-            { command: "collectPageDetailsResponse", details: pageDetails1 },
-            sender,
-          );
-
-          expect(overlayBackground["pageDetailsForTab"][sender.tab.id]).toStrictEqual(
-            new Map([
-              [sender.frameId, { frameId: sender.frameId, tab: sender.tab, details: pageDetails1 }],
-            ]),
-          );
-        });
-
-        it("updates the page details for a tab that already has a set of page details stored ", () => {
-          const secondFrameSender = mock<chrome.runtime.MessageSender>({
-            tab: { id: 1 },
-            frameId: 3,
-          });
-          overlayBackground["pageDetailsForTab"][sender.tab.id] = new Map([
-            [sender.frameId, { frameId: sender.frameId, tab: sender.tab, details: pageDetails1 }],
-          ]);
-
-          sendMockExtensionMessage(
-            { command: "collectPageDetailsResponse", details: pageDetails2 },
-            secondFrameSender,
-          );
-
-          expect(overlayBackground["pageDetailsForTab"][sender.tab.id]).toStrictEqual(
-            new Map([
-              [sender.frameId, { frameId: sender.frameId, tab: sender.tab, details: pageDetails1 }],
-              [
-                secondFrameSender.frameId,
-                {
-                  frameId: secondFrameSender.frameId,
-                  tab: secondFrameSender.tab,
-                  details: pageDetails2,
-                },
-              ],
-            ]),
-          );
-        });
-      });
-
-      describe("unlockCompleted message handler", () => {
-        let getAuthStatusSpy: jest.SpyInstance;
-
-        beforeEach(() => {
-          overlayBackground["userAuthStatus"] = AuthenticationStatus.LoggedOut;
-          jest.spyOn(BrowserApi, "tabSendMessageData");
-          getAuthStatusSpy = jest
-            .spyOn(overlayBackground as any, "getAuthStatus")
-            .mockImplementation(() => {
-              overlayBackground["userAuthStatus"] = AuthenticationStatus.Unlocked;
-              return Promise.resolve(AuthenticationStatus.Unlocked);
-            });
-        });
-
-        it("updates the user's auth status but does not open the overlay", async () => {
-          const message = {
-            command: "unlockCompleted",
-            data: {
-              commandToRetry: { message: { command: "" } },
-            },
-          };
-
-          sendMockExtensionMessage(message);
-          await flushPromises();
-
-          expect(getAuthStatusSpy).toHaveBeenCalled();
-          expect(BrowserApi.tabSendMessageData).not.toHaveBeenCalled();
-        });
-
-        it("updates user's auth status and opens the overlay if a follow up command is provided", async () => {
-          const sender = mock<chrome.runtime.MessageSender>({ tab: { id: 1 } });
-          const message = {
-            command: "unlockCompleted",
-            data: {
-              commandToRetry: { message: { command: "openAutofillOverlay" } },
-            },
-          };
-          jest.spyOn(BrowserApi, "getTabFromCurrentWindowId").mockResolvedValueOnce(sender.tab);
-
-          sendMockExtensionMessage(message);
-          await flushPromises();
-
-          expect(getAuthStatusSpy).toHaveBeenCalled();
-          expect(BrowserApi.tabSendMessageData).toHaveBeenCalledWith(
-            sender.tab,
-            "openAutofillOverlay",
-            {
-              isFocusingFieldElement: true,
-              isOpeningFullOverlay: false,
-              authStatus: AuthenticationStatus.Unlocked,
-            },
-          );
-        });
-      });
-
-      describe("extension messages that trigger an update of the inline menu ciphers", () => {
-        const extensionMessages = [
-          "addedCipher",
-          "addEditCipherSubmitted",
-          "editedCipher",
-          "deletedCipher",
-        ];
-
-        beforeEach(() => {
-          jest.spyOn(overlayBackground, "updateOverlayCiphers").mockImplementation();
-        });
-
-        extensionMessages.forEach((message) => {
-          it(`triggers an update of the overlay ciphers when the ${message} message is received`, () => {
-            sendMockExtensionMessage({ command: message });
-            expect(overlayBackground.updateOverlayCiphers).toHaveBeenCalled();
-          });
-        });
-      });
-    });
-  });
-
-  describe("handlePortOnConnect", () => {
-    beforeEach(() => {
-      jest.spyOn(overlayBackground as any, "updateOverlayPosition").mockImplementation();
-      jest.spyOn(overlayBackground as any, "getAuthStatus").mockImplementation();
-      jest.spyOn(overlayBackground as any, "getTranslations").mockImplementation();
-      jest.spyOn(overlayBackground as any, "getOverlayCipherData").mockImplementation();
-    });
-
-    it("skips setting up the overlay port if the port connection is not for an overlay element", async () => {
-      const port = createPortSpyMock("not-an-overlay-element");
-
-      await overlayBackground["handlePortOnConnect"](port);
-
-      expect(port.onMessage.addListener).not.toHaveBeenCalled();
-      expect(port.postMessage).not.toHaveBeenCalled();
-    });
-
-    it("sets up the overlay list port if the port connection is for the overlay list", async () => {
-      await initOverlayElementPorts({ initList: true, initButton: false });
-      await flushPromises();
-
-      expect(overlayBackground["overlayButtonPort"]).toBeUndefined();
-      expect(listPortSpy.onMessage.addListener).toHaveBeenCalled();
-      expect(listPortSpy.postMessage).toHaveBeenCalled();
-      expect(overlayBackground["getAuthStatus"]).toHaveBeenCalled();
-      expect(chrome.runtime.getURL).toHaveBeenCalledWith("overlay/list.css");
-      expect(overlayBackground["getTranslations"]).toHaveBeenCalled();
-      expect(overlayBackground["getOverlayCipherData"]).toHaveBeenCalled();
-      expect(overlayBackground["updateOverlayPosition"]).toHaveBeenCalledWith(
-        { overlayElement: AutofillOverlayElement.List },
-        listPortSpy.sender,
-      );
-    });
-
-    it("sets up the overlay button port if the port connection is for the overlay button", async () => {
-      await initOverlayElementPorts({ initList: false, initButton: true });
-      await flushPromises();
-
-      expect(overlayBackground["overlayListPort"]).toBeUndefined();
-      expect(buttonPortSpy.onMessage.addListener).toHaveBeenCalled();
-      expect(buttonPortSpy.postMessage).toHaveBeenCalled();
-      expect(overlayBackground["getAuthStatus"]).toHaveBeenCalled();
-      expect(chrome.runtime.getURL).toHaveBeenCalledWith("overlay/button.css");
-      expect(overlayBackground["getTranslations"]).toHaveBeenCalled();
-      expect(overlayBackground["updateOverlayPosition"]).toHaveBeenCalledWith(
-        { overlayElement: AutofillOverlayElement.Button },
-        buttonPortSpy.sender,
-      );
-    });
-
-    it("stores an existing overlay port so that it can be disconnected at a later time", async () => {
-      overlayBackground["overlayButtonPort"] = mock<chrome.runtime.Port>();
-
-      await initOverlayElementPorts({ initList: false, initButton: true });
-      await flushPromises();
-
-      expect(overlayBackground["expiredPorts"].length).toBe(1);
-    });
-
-    it("gets the system theme", async () => {
-      themeStateService.selectedTheme$ = of(ThemeType.System);
-
-      await initOverlayElementPorts({ initList: true, initButton: false });
-      await flushPromises();
-
-      expect(listPortSpy.postMessage).toHaveBeenCalledWith(
-        expect.objectContaining({ theme: ThemeType.System }),
-      );
-    });
-  });
-
-  describe("handleOverlayElementPortMessage", () => {
-    beforeEach(async () => {
-      await initOverlayElementPorts();
-      overlayBackground["userAuthStatus"] = AuthenticationStatus.Unlocked;
-    });
-
-    it("ignores port messages that do not contain a handler", () => {
-      jest.spyOn(overlayBackground as any, "checkOverlayButtonFocused").mockImplementation();
-
-      sendPortMessage(buttonPortSpy, { command: "checkAutofillOverlayButtonFocused" });
-
-      expect(overlayBackground["checkOverlayButtonFocused"]).not.toHaveBeenCalled();
-    });
-
-    describe("overlay button message handlers", () => {
-      it("unlocks the vault if the user auth status is not unlocked", () => {
-        overlayBackground["userAuthStatus"] = AuthenticationStatus.LoggedOut;
-        jest.spyOn(overlayBackground as any, "unlockVault").mockImplementation();
-
-        sendPortMessage(buttonPortSpy, { command: "overlayButtonClicked" });
-
-        expect(overlayBackground["unlockVault"]).toHaveBeenCalled();
-      });
-
-      it("opens the autofill overlay if the auth status is unlocked", () => {
-        jest.spyOn(overlayBackground as any, "openOverlay").mockImplementation();
-
-        sendPortMessage(buttonPortSpy, { command: "overlayButtonClicked" });
-
-        expect(overlayBackground["openOverlay"]).toHaveBeenCalled();
-      });
-
-      describe("closeAutofillOverlay", () => {
-        it("sends a `closeOverlay` message to the sender tab", () => {
-          jest.spyOn(BrowserApi, "tabSendMessageData");
-
-          sendPortMessage(buttonPortSpy, { command: "closeAutofillOverlay" });
-
-          expect(BrowserApi.tabSendMessageData).toHaveBeenCalledWith(
-            buttonPortSpy.sender.tab,
-            "closeAutofillOverlay",
-            { forceCloseOverlay: false },
-          );
-        });
-      });
-
-      describe("forceCloseAutofillOverlay", () => {
-        it("sends a `closeOverlay` message to the sender tab with a `forceCloseOverlay` flag of `true` set", () => {
-          jest.spyOn(BrowserApi, "tabSendMessageData");
-
-          sendPortMessage(buttonPortSpy, { command: "forceCloseAutofillOverlay" });
-
-          expect(BrowserApi.tabSendMessageData).toHaveBeenCalledWith(
-            buttonPortSpy.sender.tab,
-            "closeAutofillOverlay",
-            { forceCloseOverlay: true },
-          );
-        });
-      });
-
-      describe("overlayPageBlurred", () => {
-        it("checks if the overlay list is focused", () => {
-          jest.spyOn(overlayBackground as any, "checkOverlayListFocused");
-
-          sendPortMessage(buttonPortSpy, { command: "overlayPageBlurred" });
-
-          expect(overlayBackground["checkOverlayListFocused"]).toHaveBeenCalled();
-        });
-      });
-
-      describe("redirectOverlayFocusOut", () => {
-        beforeEach(() => {
-          jest.spyOn(BrowserApi, "tabSendMessageData");
-        });
-
-        it("ignores the redirect message if the direction is not provided", () => {
-          sendPortMessage(buttonPortSpy, { command: "redirectOverlayFocusOut" });
-
-          expect(BrowserApi.tabSendMessageData).not.toHaveBeenCalled();
-        });
-
-        it("sends the redirect message if the direction is provided", () => {
-          sendPortMessage(buttonPortSpy, {
-            command: "redirectOverlayFocusOut",
-            direction: RedirectFocusDirection.Next,
-          });
-
-          expect(BrowserApi.tabSendMessageData).toHaveBeenCalledWith(
-            buttonPortSpy.sender.tab,
-            "redirectOverlayFocusOut",
-            { direction: RedirectFocusDirection.Next },
-          );
-        });
-      });
-    });
-
-    describe("overlay list message handlers", () => {
-      describe("checkAutofillOverlayButtonFocused", () => {
-        it("checks on the focus state of the overlay button", () => {
-          jest.spyOn(overlayBackground as any, "checkOverlayButtonFocused").mockImplementation();
-
-          sendPortMessage(listPortSpy, { command: "checkAutofillOverlayButtonFocused" });
-
-          expect(overlayBackground["checkOverlayButtonFocused"]).toHaveBeenCalled();
-        });
-      });
-
-      describe("forceCloseAutofillOverlay", () => {
-        it("sends a `closeOverlay` message to the sender tab with a `forceCloseOverlay` flag of `true` set", () => {
-          jest.spyOn(BrowserApi, "tabSendMessageData");
-
-          sendPortMessage(listPortSpy, { command: "forceCloseAutofillOverlay" });
-
-          expect(BrowserApi.tabSendMessageData).toHaveBeenCalledWith(
-            listPortSpy.sender.tab,
-            "closeAutofillOverlay",
-            { forceCloseOverlay: true },
-          );
-        });
-      });
-
-      describe("overlayPageBlurred", () => {
-        it("checks on the focus state of the overlay button", () => {
-          jest.spyOn(overlayBackground as any, "checkOverlayButtonFocused").mockImplementation();
-
-          sendPortMessage(listPortSpy, { command: "overlayPageBlurred" });
-
-          expect(overlayBackground["checkOverlayButtonFocused"]).toHaveBeenCalled();
-        });
-      });
-
-      describe("unlockVault", () => {
-        it("closes the autofill overlay and opens the unlock popout", async () => {
-          jest.spyOn(overlayBackground as any, "closeOverlay").mockImplementation();
-          jest.spyOn(overlayBackground as any, "openUnlockPopout").mockImplementation();
-          jest.spyOn(BrowserApi, "tabSendMessageData").mockImplementation();
-
-          sendPortMessage(listPortSpy, { command: "unlockVault" });
-          await flushPromises();
-
-          expect(overlayBackground["closeOverlay"]).toHaveBeenCalledWith(listPortSpy);
-          expect(BrowserApi.tabSendMessageData).toHaveBeenCalledWith(
-            listPortSpy.sender.tab,
-            "addToLockedVaultPendingNotifications",
-            {
-              commandToRetry: {
-                message: { command: "openAutofillOverlay" },
-                sender: listPortSpy.sender,
-              },
-              target: "overlay.background",
-            },
-          );
-          expect(overlayBackground["openUnlockPopout"]).toHaveBeenCalledWith(
-            listPortSpy.sender.tab,
-            true,
-          );
-        });
-      });
-
-      describe("fillSelectedListItem", () => {
-        let getLoginCiphersSpy: jest.SpyInstance;
-        let isPasswordRepromptRequiredSpy: jest.SpyInstance;
-        let doAutoFillSpy: jest.SpyInstance;
-        let sender: chrome.runtime.MessageSender;
-        const pageDetails = createAutofillPageDetailsMock({
-          login: { username: "username1", password: "password1" },
-        });
-
-        beforeEach(() => {
-          getLoginCiphersSpy = jest.spyOn(overlayBackground["overlayLoginCiphers"], "get");
-          isPasswordRepromptRequiredSpy = jest.spyOn(
-            overlayBackground["autofillService"],
-            "isPasswordRepromptRequired",
-          );
-          doAutoFillSpy = jest.spyOn(overlayBackground["autofillService"], "doAutoFill");
-          sender = mock<chrome.runtime.MessageSender>({ tab: { id: 1 } });
-        });
-
-        it("ignores the fill request if the overlay cipher id is not provided", async () => {
-          sendPortMessage(listPortSpy, { command: "fillSelectedListItem" });
-          await flushPromises();
-
-          expect(getLoginCiphersSpy).not.toHaveBeenCalled();
-          expect(isPasswordRepromptRequiredSpy).not.toHaveBeenCalled();
-          expect(doAutoFillSpy).not.toHaveBeenCalled();
-        });
-
-        it("ignores the fill request if the tab does not contain any identified page details", async () => {
-          sendPortMessage(listPortSpy, {
-            command: "fillSelectedListItem",
-            overlayCipherId: "overlay-cipher-1",
-          });
-          await flushPromises();
-
-          expect(getLoginCiphersSpy).not.toHaveBeenCalled();
-          expect(isPasswordRepromptRequiredSpy).not.toHaveBeenCalled();
-          expect(doAutoFillSpy).not.toHaveBeenCalled();
-        });
-
-        it("ignores the fill request if a master password reprompt is required", async () => {
-          const cipher = mock<CipherView>({
-            reprompt: CipherRepromptType.Password,
-            type: CipherType.Login,
-          });
-          overlayBackground["overlayLoginCiphers"] = new Map([["overlay-cipher-1", cipher]]);
-          overlayBackground["pageDetailsForTab"][sender.tab.id] = new Map([
-            [sender.frameId, { frameId: sender.frameId, tab: sender.tab, details: pageDetails }],
-          ]);
-          getLoginCiphersSpy = jest.spyOn(overlayBackground["overlayLoginCiphers"], "get");
-          isPasswordRepromptRequiredSpy.mockResolvedValue(true);
-
-          sendPortMessage(listPortSpy, {
-            command: "fillSelectedListItem",
-            overlayCipherId: "overlay-cipher-1",
-          });
-          await flushPromises();
-
-          expect(getLoginCiphersSpy).toHaveBeenCalled();
-          expect(isPasswordRepromptRequiredSpy).toHaveBeenCalledWith(
-            cipher,
-            listPortSpy.sender.tab,
-          );
-          expect(doAutoFillSpy).not.toHaveBeenCalled();
-        });
-
-        it("autofills the selected cipher and move it to the top of the front of the ciphers map", async () => {
-          const cipher1 = mock<CipherView>({ id: "overlay-cipher-1" });
-          const cipher2 = mock<CipherView>({ id: "overlay-cipher-2" });
-          const cipher3 = mock<CipherView>({ id: "overlay-cipher-3" });
-          overlayBackground["overlayLoginCiphers"] = new Map([
-            ["overlay-cipher-1", cipher1],
-            ["overlay-cipher-2", cipher2],
-            ["overlay-cipher-3", cipher3],
-          ]);
-          const pageDetailsForTab = {
-            frameId: sender.frameId,
-            tab: sender.tab,
-            details: pageDetails,
-          };
-          overlayBackground["pageDetailsForTab"][sender.tab.id] = new Map([
-            [sender.frameId, pageDetailsForTab],
-          ]);
-          isPasswordRepromptRequiredSpy.mockResolvedValue(false);
-
-          sendPortMessage(listPortSpy, {
-            command: "fillSelectedListItem",
-            overlayCipherId: "overlay-cipher-2",
-          });
-          await flushPromises();
-
-          expect(isPasswordRepromptRequiredSpy).toHaveBeenCalledWith(
-            cipher2,
-            listPortSpy.sender.tab,
-          );
-          expect(doAutoFillSpy).toHaveBeenCalledWith({
-            tab: listPortSpy.sender.tab,
-            cipher: cipher2,
-            pageDetails: [pageDetailsForTab],
-            fillNewPassword: true,
-            allowTotpAutofill: true,
-          });
-          expect(overlayBackground["overlayLoginCiphers"].entries()).toStrictEqual(
-            new Map([
-              ["overlay-cipher-2", cipher2],
-              ["overlay-cipher-1", cipher1],
-              ["overlay-cipher-3", cipher3],
-            ]).entries(),
-          );
-        });
-
-        it("copies the cipher's totp code to the clipboard after filling", async () => {
-          const cipher1 = mock<CipherView>({ id: "overlay-cipher-1" });
-          overlayBackground["overlayLoginCiphers"] = new Map([["overlay-cipher-1", cipher1]]);
-          overlayBackground["pageDetailsForTab"][sender.tab.id] = new Map([
-            [sender.frameId, { frameId: sender.frameId, tab: sender.tab, details: pageDetails }],
-          ]);
-          isPasswordRepromptRequiredSpy.mockResolvedValue(false);
-          const copyToClipboardSpy = jest
-            .spyOn(overlayBackground["platformUtilsService"], "copyToClipboard")
-            .mockImplementation();
-          doAutoFillSpy.mockReturnValueOnce("totp-code");
-
-          sendPortMessage(listPortSpy, {
-            command: "fillSelectedListItem",
-            overlayCipherId: "overlay-cipher-2",
-          });
-          await flushPromises();
-
-          expect(copyToClipboardSpy).toHaveBeenCalledWith("totp-code");
-        });
-      });
-
-      describe("getNewVaultItemDetails", () => {
-        it("will send an addNewVaultItemFromOverlay message", async () => {
-          jest.spyOn(BrowserApi, "tabSendMessage");
-
-          sendPortMessage(listPortSpy, { command: "addNewVaultItem" });
-          await flushPromises();
-
-          expect(BrowserApi.tabSendMessage).toHaveBeenCalledWith(listPortSpy.sender.tab, {
-            command: "addNewVaultItemFromOverlay",
-          });
-        });
-      });
-
-      describe("viewSelectedCipher", () => {
-        let openViewVaultItemPopoutSpy: jest.SpyInstance;
-
-        beforeEach(() => {
-          openViewVaultItemPopoutSpy = jest
-            .spyOn(overlayBackground as any, "openViewVaultItemPopout")
-            .mockImplementation();
-        });
-
-        it("returns early if the passed cipher ID does not match one of the overlay login ciphers", async () => {
-          overlayBackground["overlayLoginCiphers"] = new Map([
-            ["overlay-cipher-0", mock<CipherView>({ id: "overlay-cipher-0" })],
-          ]);
-
-          sendPortMessage(listPortSpy, {
-            command: "viewSelectedCipher",
-            overlayCipherId: "overlay-cipher-1",
-          });
-          await flushPromises();
-
-          expect(openViewVaultItemPopoutSpy).not.toHaveBeenCalled();
-        });
-
-        it("will open the view vault item popout with the selected cipher", async () => {
-          const cipher = mock<CipherView>({ id: "overlay-cipher-1" });
-          overlayBackground["overlayLoginCiphers"] = new Map([
-            ["overlay-cipher-0", mock<CipherView>({ id: "overlay-cipher-0" })],
-            ["overlay-cipher-1", cipher],
-          ]);
-
-          sendPortMessage(listPortSpy, {
-            command: "viewSelectedCipher",
-            overlayCipherId: "overlay-cipher-1",
-          });
-          await flushPromises();
-
-          expect(overlayBackground["openViewVaultItemPopout"]).toHaveBeenCalledWith(
-            listPortSpy.sender.tab,
-            {
-              cipherId: cipher.id,
-              action: SHOW_AUTOFILL_BUTTON,
-            },
-          );
-        });
-      });
-
-      describe("redirectOverlayFocusOut", () => {
-        it("redirects focus out of the overlay list", async () => {
-          const message = {
-            command: "redirectOverlayFocusOut",
-            direction: RedirectFocusDirection.Next,
-          };
-          const redirectOverlayFocusOutSpy = jest.spyOn(
-            overlayBackground as any,
-            "redirectOverlayFocusOut",
-          );
-
-          sendPortMessage(listPortSpy, message);
-          await flushPromises();
-
-          expect(redirectOverlayFocusOutSpy).toHaveBeenCalledWith(message, listPortSpy);
-        });
-      });
-    });
-  });
-});
diff --git a/apps/browser/src/autofill/deprecated/background/overlay.background.deprecated.ts b/apps/browser/src/autofill/deprecated/background/overlay.background.deprecated.ts
deleted file mode 100644
index c9eb442d75d..00000000000
--- a/apps/browser/src/autofill/deprecated/background/overlay.background.deprecated.ts
+++ /dev/null
@@ -1,811 +0,0 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
-import { firstValueFrom, map } from "rxjs";
-
-import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
-import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service";
-import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
-import { SHOW_AUTOFILL_BUTTON } from "@bitwarden/common/autofill/constants";
-import { AutofillSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/autofill-settings.service";
-import { DomainSettingsService } from "@bitwarden/common/autofill/services/domain-settings.service";
-import { InlineMenuVisibilitySetting } from "@bitwarden/common/autofill/types";
-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 { Utils } from "@bitwarden/common/platform/misc/utils";
-import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
-import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
-import { CipherType } from "@bitwarden/common/vault/enums";
-import { buildCipherIcon } from "@bitwarden/common/vault/icon/build-cipher-icon";
-import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
-import { LoginUriView } from "@bitwarden/common/vault/models/view/login-uri.view";
-import { LoginView } from "@bitwarden/common/vault/models/view/login.view";
-
-import { openUnlockPopout } from "../../../auth/popup/utils/auth-popout-window";
-import { BrowserApi } from "../../../platform/browser/browser-api";
-import {
-  openViewVaultItemPopout,
-  openAddEditVaultItemPopout,
-} from "../../../vault/popup/utils/vault-popout-window";
-import { LockedVaultPendingNotificationsData } from "../../background/abstractions/notification.background";
-import { OverlayBackground as OverlayBackgroundInterface } from "../../background/abstractions/overlay.background";
-import { AutofillOverlayElement, AutofillOverlayPort } from "../../enums/autofill-overlay.enum";
-import { AutofillService, PageDetail } from "../../services/abstractions/autofill.service";
-
-import {
-  FocusedFieldData,
-  OverlayBackgroundExtensionMessageHandlers,
-  OverlayButtonPortMessageHandlers,
-  OverlayCipherData,
-  OverlayListPortMessageHandlers,
-  OverlayBackgroundExtensionMessage,
-  OverlayAddNewItemMessage,
-  OverlayPortMessage,
-  WebsiteIconData,
-} from "./abstractions/overlay.background.deprecated";
-
-class LegacyOverlayBackground implements OverlayBackgroundInterface {
-  private readonly openUnlockPopout = openUnlockPopout;
-  private readonly openViewVaultItemPopout = openViewVaultItemPopout;
-  private readonly openAddEditVaultItemPopout = openAddEditVaultItemPopout;
-  private overlayLoginCiphers: Map<string, CipherView> = new Map();
-  private pageDetailsForTab: Record<
-    chrome.runtime.MessageSender["tab"]["id"],
-    Map<chrome.runtime.MessageSender["frameId"], PageDetail>
-  > = {};
-  private userAuthStatus: AuthenticationStatus = AuthenticationStatus.LoggedOut;
-  private overlayButtonPort: chrome.runtime.Port;
-  private overlayListPort: chrome.runtime.Port;
-  private expiredPorts: chrome.runtime.Port[] = [];
-  private focusedFieldData: FocusedFieldData;
-  private overlayPageTranslations: Record<string, string>;
-  private iconsServerUrl: string;
-  private readonly extensionMessageHandlers: OverlayBackgroundExtensionMessageHandlers = {
-    openAutofillOverlay: () => this.openOverlay(false),
-    autofillOverlayElementClosed: ({ message, sender }) =>
-      this.overlayElementClosed(message, sender),
-    autofillOverlayAddNewVaultItem: ({ message, sender }) => this.addNewVaultItem(message, sender),
-    getAutofillOverlayVisibility: () => this.getOverlayVisibility(),
-    checkAutofillOverlayFocused: () => this.checkOverlayFocused(),
-    focusAutofillOverlayList: () => this.focusOverlayList(),
-    updateAutofillOverlayPosition: ({ message, sender }) =>
-      this.updateOverlayPosition(message, sender),
-    updateAutofillOverlayHidden: ({ message }) => this.updateOverlayHidden(message),
-    updateFocusedFieldData: ({ message, sender }) => this.setFocusedFieldData(message, sender),
-    collectPageDetailsResponse: ({ message, sender }) => this.storePageDetails(message, sender),
-    unlockCompleted: ({ message }) => this.unlockCompleted(message),
-    addedCipher: () => this.updateOverlayCiphers(),
-    addEditCipherSubmitted: () => this.updateOverlayCiphers(),
-    editedCipher: () => this.updateOverlayCiphers(),
-    deletedCipher: () => this.updateOverlayCiphers(),
-  };
-  private readonly overlayButtonPortMessageHandlers: OverlayButtonPortMessageHandlers = {
-    overlayButtonClicked: ({ port }) => this.handleOverlayButtonClicked(port),
-    closeAutofillOverlay: ({ port }) => this.closeOverlay(port),
-    forceCloseAutofillOverlay: ({ port }) => this.closeOverlay(port, true),
-    overlayPageBlurred: () => this.checkOverlayListFocused(),
-    redirectOverlayFocusOut: ({ message, port }) => this.redirectOverlayFocusOut(message, port),
-  };
-  private readonly overlayListPortMessageHandlers: OverlayListPortMessageHandlers = {
-    checkAutofillOverlayButtonFocused: () => this.checkOverlayButtonFocused(),
-    forceCloseAutofillOverlay: ({ port }) => this.closeOverlay(port, true),
-    overlayPageBlurred: () => this.checkOverlayButtonFocused(),
-    unlockVault: ({ port }) => this.unlockVault(port),
-    fillSelectedListItem: ({ message, port }) => this.fillSelectedOverlayListItem(message, port),
-    addNewVaultItem: ({ port }) => this.getNewVaultItemDetails(port),
-    viewSelectedCipher: ({ message, port }) => this.viewSelectedCipher(message, port),
-    redirectOverlayFocusOut: ({ message, port }) => this.redirectOverlayFocusOut(message, port),
-  };
-
-  constructor(
-    private cipherService: CipherService,
-    private autofillService: AutofillService,
-    private authService: AuthService,
-    private environmentService: EnvironmentService,
-    private domainSettingsService: DomainSettingsService,
-    private autofillSettingsService: AutofillSettingsServiceAbstraction,
-    private i18nService: I18nService,
-    private platformUtilsService: PlatformUtilsService,
-    private themeStateService: ThemeStateService,
-    private accountService: AccountService,
-  ) {}
-
-  /**
-   * Removes cached page details for a tab
-   * based on the passed tabId.
-   *
-   * @param tabId - Used to reference the page details of a specific tab
-   */
-  removePageDetails(tabId: number) {
-    if (!this.pageDetailsForTab[tabId]) {
-      return;
-    }
-
-    this.pageDetailsForTab[tabId].clear();
-    delete this.pageDetailsForTab[tabId];
-  }
-
-  /**
-   * Sets up the extension message listeners and gets the settings for the
-   * overlay's visibility and the user's authentication status.
-   */
-  async init() {
-    this.setupExtensionMessageListeners();
-    const env = await firstValueFrom(this.environmentService.environment$);
-    this.iconsServerUrl = env.getIconsUrl();
-    await this.getOverlayVisibility();
-    await this.getAuthStatus();
-  }
-
-  /**
-   * Updates the overlay list's ciphers and sends the updated list to the overlay list iframe.
-   * Queries all ciphers for the given url, and sorts them by last used. Will not update the
-   * list of ciphers if the extension is not unlocked.
-   */
-  async updateOverlayCiphers() {
-    const authStatus = await firstValueFrom(this.authService.activeAccountStatus$);
-    if (authStatus !== AuthenticationStatus.Unlocked) {
-      return;
-    }
-
-    const currentTab = await BrowserApi.getTabFromCurrentWindowId();
-    if (!currentTab?.url) {
-      return;
-    }
-
-    this.overlayLoginCiphers = new Map();
-
-    const activeUserId = await firstValueFrom(
-      this.accountService.activeAccount$.pipe(map((a) => a?.id)),
-    );
-    const ciphersViews = (
-      await this.cipherService.getAllDecryptedForUrl(currentTab.url, activeUserId)
-    ).sort((a, b) => this.cipherService.sortCiphersByLastUsedThenName(a, b));
-    for (let cipherIndex = 0; cipherIndex < ciphersViews.length; cipherIndex++) {
-      this.overlayLoginCiphers.set(`overlay-cipher-${cipherIndex}`, ciphersViews[cipherIndex]);
-    }
-
-    const ciphers = await this.getOverlayCipherData();
-    this.overlayListPort?.postMessage({ command: "updateOverlayListCiphers", ciphers });
-    await BrowserApi.tabSendMessageData(currentTab, "updateIsOverlayCiphersPopulated", {
-      isOverlayCiphersPopulated: Boolean(ciphers.length),
-    });
-  }
-
-  /**
-   * Strips out unnecessary data from the ciphers and returns an array of
-   * objects that contain the cipher data needed for the overlay list.
-   */
-  private async getOverlayCipherData(): Promise<OverlayCipherData[]> {
-    const showFavicons = await firstValueFrom(this.domainSettingsService.showFavicons$);
-    const overlayCiphersArray = Array.from(this.overlayLoginCiphers);
-    const overlayCipherData: OverlayCipherData[] = [];
-    let loginCipherIcon: WebsiteIconData;
-
-    for (let cipherIndex = 0; cipherIndex < overlayCiphersArray.length; cipherIndex++) {
-      const [overlayCipherId, cipher] = overlayCiphersArray[cipherIndex];
-      if (!loginCipherIcon && cipher.type === CipherType.Login) {
-        loginCipherIcon = buildCipherIcon(this.iconsServerUrl, cipher, showFavicons);
-      }
-
-      overlayCipherData.push({
-        id: overlayCipherId,
-        name: cipher.name,
-        type: cipher.type,
-        reprompt: cipher.reprompt,
-        favorite: cipher.favorite,
-        icon:
-          cipher.type === CipherType.Login
-            ? loginCipherIcon
-            : buildCipherIcon(this.iconsServerUrl, cipher, showFavicons),
-        login: cipher.type === CipherType.Login ? { username: cipher.login.username } : null,
-        card: cipher.type === CipherType.Card ? cipher.card.subTitle : null,
-      });
-    }
-
-    return overlayCipherData;
-  }
-
-  /**
-   * Handles aggregation of page details for a tab. Stores the page details
-   * in association with the tabId of the tab that sent the message.
-   *
-   * @param message - Message received from the `collectPageDetailsResponse` command
-   * @param sender - The sender of the message
-   */
-  private storePageDetails(
-    message: OverlayBackgroundExtensionMessage,
-    sender: chrome.runtime.MessageSender,
-  ) {
-    const pageDetails = {
-      frameId: sender.frameId,
-      tab: sender.tab,
-      details: message.details,
-    };
-
-    const pageDetailsMap = this.pageDetailsForTab[sender.tab.id];
-    if (!pageDetailsMap) {
-      this.pageDetailsForTab[sender.tab.id] = new Map([[sender.frameId, pageDetails]]);
-      return;
-    }
-
-    pageDetailsMap.set(sender.frameId, pageDetails);
-  }
-
-  /**
-   * Triggers autofill for the selected cipher in the overlay list. Also places
-   * the selected cipher at the top of the list of ciphers.
-   *
-   * @param overlayCipherId - Cipher ID corresponding to the overlayLoginCiphers map. Does not correspond to the actual cipher's ID.
-   * @param sender - The sender of the port message
-   */
-  private async fillSelectedOverlayListItem(
-    { overlayCipherId }: OverlayPortMessage,
-    { sender }: chrome.runtime.Port,
-  ) {
-    const pageDetails = this.pageDetailsForTab[sender.tab.id];
-    if (!overlayCipherId || !pageDetails?.size) {
-      return;
-    }
-
-    const cipher = this.overlayLoginCiphers.get(overlayCipherId);
-
-    if (await this.autofillService.isPasswordRepromptRequired(cipher, sender.tab)) {
-      return;
-    }
-    const totpCode = await this.autofillService.doAutoFill({
-      tab: sender.tab,
-      cipher: cipher,
-      pageDetails: Array.from(pageDetails.values()),
-      fillNewPassword: true,
-      allowTotpAutofill: true,
-    });
-
-    if (totpCode) {
-      this.platformUtilsService.copyToClipboard(totpCode);
-    }
-
-    this.overlayLoginCiphers = new Map([[overlayCipherId, cipher], ...this.overlayLoginCiphers]);
-  }
-
-  /**
-   * Checks if the overlay is focused. Will check the overlay list
-   * if it is open, otherwise it will check the overlay button.
-   */
-  private checkOverlayFocused() {
-    if (this.overlayListPort) {
-      this.checkOverlayListFocused();
-
-      return;
-    }
-
-    this.checkOverlayButtonFocused();
-  }
-
-  /**
-   * Posts a message to the overlay button iframe to check if it is focused.
-   */
-  private checkOverlayButtonFocused() {
-    this.overlayButtonPort?.postMessage({ command: "checkAutofillOverlayButtonFocused" });
-  }
-
-  /**
-   * Posts a message to the overlay list iframe to check if it is focused.
-   */
-  private checkOverlayListFocused() {
-    this.overlayListPort?.postMessage({ command: "checkAutofillOverlayListFocused" });
-  }
-
-  /**
-   * Sends a message to the sender tab to close the autofill overlay.
-   *
-   * @param sender - The sender of the port message
-   * @param forceCloseOverlay - Identifies whether the overlay should be force closed
-   */
-  private closeOverlay({ sender }: chrome.runtime.Port, forceCloseOverlay = false) {
-    // 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
-    BrowserApi.tabSendMessageData(sender.tab, "closeAutofillOverlay", { forceCloseOverlay });
-  }
-
-  /**
-   * Handles cleanup when an overlay element is closed. Disconnects
-   * the list and button ports and sets them to null.
-   *
-   * @param overlayElement - The overlay element that was closed, either the list or button
-   * @param sender - The sender of the port message
-   */
-  private overlayElementClosed(
-    { overlayElement }: OverlayBackgroundExtensionMessage,
-    sender: chrome.runtime.MessageSender,
-  ) {
-    if (sender.tab.id !== this.focusedFieldData?.tabId) {
-      this.expiredPorts.forEach((port) => port.disconnect());
-      this.expiredPorts = [];
-      return;
-    }
-
-    if (overlayElement === AutofillOverlayElement.Button) {
-      this.overlayButtonPort?.disconnect();
-      this.overlayButtonPort = null;
-
-      return;
-    }
-
-    this.overlayListPort?.disconnect();
-    this.overlayListPort = null;
-  }
-
-  /**
-   * Updates the position of either the overlay list or button. The position
-   * is based on the focused field's position and dimensions.
-   *
-   * @param overlayElement - The overlay element to update, either the list or button
-   * @param sender - The sender of the port message
-   */
-  private updateOverlayPosition(
-    { overlayElement }: { overlayElement?: string },
-    sender: chrome.runtime.MessageSender,
-  ) {
-    if (!overlayElement || sender.tab.id !== this.focusedFieldData?.tabId) {
-      return;
-    }
-
-    if (overlayElement === AutofillOverlayElement.Button) {
-      this.overlayButtonPort?.postMessage({
-        command: "updateIframePosition",
-        styles: this.getOverlayButtonPosition(),
-      });
-
-      return;
-    }
-
-    this.overlayListPort?.postMessage({
-      command: "updateIframePosition",
-      styles: this.getOverlayListPosition(),
-    });
-  }
-
-  /**
-   * Gets the position of the focused field and calculates the position
-   * of the overlay button based on the focused field's position and dimensions.
-   */
-  private getOverlayButtonPosition() {
-    if (!this.focusedFieldData) {
-      return;
-    }
-
-    const { top, left, width, height } = this.focusedFieldData.focusedFieldRects;
-    const { paddingRight, paddingLeft } = this.focusedFieldData.focusedFieldStyles;
-    let elementOffset = height * 0.37;
-    if (height >= 35) {
-      elementOffset = height >= 50 ? height * 0.47 : height * 0.42;
-    }
-
-    const elementHeight = height - elementOffset;
-    const elementTopPosition = top + elementOffset / 2;
-    let elementLeftPosition = left + width - height + elementOffset / 2;
-
-    const fieldPaddingRight = parseInt(paddingRight, 10);
-    const fieldPaddingLeft = parseInt(paddingLeft, 10);
-    if (fieldPaddingRight > fieldPaddingLeft) {
-      elementLeftPosition = left + width - height - (fieldPaddingRight - elementOffset + 2);
-    }
-
-    return {
-      top: `${Math.round(elementTopPosition)}px`,
-      left: `${Math.round(elementLeftPosition)}px`,
-      height: `${Math.round(elementHeight)}px`,
-      width: `${Math.round(elementHeight)}px`,
-    };
-  }
-
-  /**
-   * Gets the position of the focused field and calculates the position
-   * of the overlay list based on the focused field's position and dimensions.
-   */
-  private getOverlayListPosition() {
-    if (!this.focusedFieldData) {
-      return;
-    }
-
-    const { top, left, width, height } = this.focusedFieldData.focusedFieldRects;
-    return {
-      width: `${Math.round(width)}px`,
-      top: `${Math.round(top + height)}px`,
-      left: `${Math.round(left)}px`,
-    };
-  }
-
-  /**
-   * Sets the focused field data to the data passed in the extension message.
-   *
-   * @param focusedFieldData - Contains the rects and styles of the focused field.
-   * @param sender - The sender of the extension message
-   */
-  private setFocusedFieldData(
-    { focusedFieldData }: OverlayBackgroundExtensionMessage,
-    sender: chrome.runtime.MessageSender,
-  ) {
-    this.focusedFieldData = { ...focusedFieldData, tabId: sender.tab.id };
-  }
-
-  /**
-   * Updates the overlay's visibility based on the display property passed in the extension message.
-   *
-   * @param display - The display property of the overlay, either "block" or "none"
-   */
-  private updateOverlayHidden({ display }: OverlayBackgroundExtensionMessage) {
-    if (!display) {
-      return;
-    }
-
-    const portMessage = { command: "updateOverlayHidden", styles: { display } };
-
-    this.overlayButtonPort?.postMessage(portMessage);
-    this.overlayListPort?.postMessage(portMessage);
-  }
-
-  /**
-   * Sends a message to the currently active tab to open the autofill overlay.
-   *
-   * @param isFocusingFieldElement - Identifies whether the field element should be focused when the overlay is opened
-   * @param isOpeningFullOverlay - Identifies whether the full overlay should be forced open regardless of other states
-   */
-  private async openOverlay(isFocusingFieldElement = false, isOpeningFullOverlay = false) {
-    const currentTab = await BrowserApi.getTabFromCurrentWindowId();
-
-    await BrowserApi.tabSendMessageData(currentTab, "openAutofillOverlay", {
-      isFocusingFieldElement,
-      isOpeningFullOverlay,
-      authStatus: await this.getAuthStatus(),
-    });
-  }
-
-  /**
-   * Gets the overlay's visibility setting from the settings service.
-   */
-  private async getOverlayVisibility(): Promise<InlineMenuVisibilitySetting> {
-    return await firstValueFrom(this.autofillSettingsService.inlineMenuVisibility$);
-  }
-
-  /**
-   * Gets the user's authentication status from the auth service. If the user's
-   * authentication status has changed, the overlay button's authentication status
-   * will be updated and the overlay list's ciphers will be updated.
-   */
-  private async getAuthStatus() {
-    const formerAuthStatus = this.userAuthStatus;
-    this.userAuthStatus = await this.authService.getAuthStatus();
-
-    if (
-      this.userAuthStatus !== formerAuthStatus &&
-      this.userAuthStatus === AuthenticationStatus.Unlocked
-    ) {
-      this.updateOverlayButtonAuthStatus();
-      await this.updateOverlayCiphers();
-    }
-
-    return this.userAuthStatus;
-  }
-
-  /**
-   * Sends a message to the overlay button to update its authentication status.
-   */
-  private updateOverlayButtonAuthStatus() {
-    this.overlayButtonPort?.postMessage({
-      command: "updateOverlayButtonAuthStatus",
-      authStatus: this.userAuthStatus,
-    });
-  }
-
-  /**
-   * Handles the overlay button being clicked. If the user is not authenticated,
-   * the vault will be unlocked. If the user is authenticated, the overlay will
-   * be opened.
-   *
-   * @param port - The port of the overlay button
-   */
-  private handleOverlayButtonClicked(port: chrome.runtime.Port) {
-    if (this.userAuthStatus !== AuthenticationStatus.Unlocked) {
-      // 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
-      this.unlockVault(port);
-      return;
-    }
-
-    // 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
-    this.openOverlay(false, true);
-  }
-
-  /**
-   * Facilitates opening the unlock popout window.
-   *
-   * @param port - The port of the overlay list
-   */
-  private async unlockVault(port: chrome.runtime.Port) {
-    const { sender } = port;
-
-    this.closeOverlay(port);
-    const retryMessage: LockedVaultPendingNotificationsData = {
-      commandToRetry: { message: { command: "openAutofillOverlay" }, sender },
-      target: "overlay.background",
-    };
-    await BrowserApi.tabSendMessageData(
-      sender.tab,
-      "addToLockedVaultPendingNotifications",
-      retryMessage,
-    );
-    await this.openUnlockPopout(sender.tab, true);
-  }
-
-  /**
-   * Triggers the opening of a vault item popout window associated
-   * with the passed cipher ID.
-   * @param overlayCipherId - Cipher ID corresponding to the overlayLoginCiphers map. Does not correspond to the actual cipher's ID.
-   * @param sender - The sender of the port message
-   */
-  private async viewSelectedCipher(
-    { overlayCipherId }: OverlayPortMessage,
-    { sender }: chrome.runtime.Port,
-  ) {
-    const cipher = this.overlayLoginCiphers.get(overlayCipherId);
-    if (!cipher) {
-      return;
-    }
-
-    await this.openViewVaultItemPopout(sender.tab, {
-      cipherId: cipher.id,
-      action: SHOW_AUTOFILL_BUTTON,
-    });
-  }
-
-  /**
-   * Facilitates redirecting focus to the overlay list.
-   */
-  private focusOverlayList() {
-    this.overlayListPort?.postMessage({ command: "focusOverlayList" });
-  }
-
-  /**
-   * Updates the authentication status for the user and opens the overlay if
-   * a followup command is present in the message.
-   *
-   * @param message - Extension message received from the `unlockCompleted` command
-   */
-  private async unlockCompleted(message: OverlayBackgroundExtensionMessage) {
-    await this.getAuthStatus();
-
-    if (message.data?.commandToRetry?.message?.command === "openAutofillOverlay") {
-      await this.openOverlay(true);
-    }
-  }
-
-  /**
-   * Gets the translations for the overlay page.
-   */
-  private getTranslations() {
-    if (!this.overlayPageTranslations) {
-      this.overlayPageTranslations = {
-        locale: BrowserApi.getUILanguage(),
-        opensInANewWindow: this.i18nService.translate("opensInANewWindow"),
-        buttonPageTitle: this.i18nService.translate("bitwardenOverlayButton"),
-        toggleBitwardenVaultOverlay: this.i18nService.translate("toggleBitwardenVaultOverlay"),
-        listPageTitle: this.i18nService.translate("bitwardenVault"),
-        unlockYourAccount: this.i18nService.translate("unlockYourAccountToViewMatchingLogins"),
-        unlockAccount: this.i18nService.translate("unlockAccount"),
-        fillCredentialsFor: this.i18nService.translate("fillCredentialsFor"),
-        partialUsername: this.i18nService.translate("partialUsername"),
-        view: this.i18nService.translate("view"),
-        noItemsToShow: this.i18nService.translate("noItemsToShow"),
-        newItem: this.i18nService.translate("newItem"),
-        addNewVaultItem: this.i18nService.translate("addNewVaultItem"),
-      };
-    }
-
-    return this.overlayPageTranslations;
-  }
-
-  /**
-   * Facilitates redirecting focus out of one of the
-   *  overlay elements to elements on the page.
-   *
-   * @param direction - The direction to redirect focus to (either "next", "previous" or "current)
-   * @param sender - The sender of the port message
-   */
-  private redirectOverlayFocusOut(
-    { direction }: OverlayPortMessage,
-    { sender }: chrome.runtime.Port,
-  ) {
-    if (!direction) {
-      return;
-    }
-
-    // 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
-    BrowserApi.tabSendMessageData(sender.tab, "redirectOverlayFocusOut", { direction });
-  }
-
-  /**
-   * Triggers adding a new vault item from the overlay. Gathers data
-   * input by the user before calling to open the add/edit window.
-   *
-   * @param sender - The sender of the port message
-   */
-  private getNewVaultItemDetails({ sender }: chrome.runtime.Port) {
-    void BrowserApi.tabSendMessage(sender.tab, { command: "addNewVaultItemFromOverlay" });
-  }
-
-  /**
-   * Handles adding a new vault item from the overlay. Gathers data login
-   * data captured in the extension message.
-   *
-   * @param login - The login data captured from the extension message
-   * @param sender - The sender of the extension message
-   */
-  private async addNewVaultItem(
-    { login }: OverlayAddNewItemMessage,
-    sender: chrome.runtime.MessageSender,
-  ) {
-    if (!login) {
-      return;
-    }
-
-    const uriView = new LoginUriView();
-    uriView.uri = login.uri;
-
-    const loginView = new LoginView();
-    loginView.uris = [uriView];
-    loginView.username = login.username || "";
-    loginView.password = login.password || "";
-
-    const cipherView = new CipherView();
-    cipherView.name = (Utils.getHostname(login.uri) || login.hostname).replace(/^www\./, "");
-    cipherView.folderId = null;
-    cipherView.type = CipherType.Login;
-    cipherView.login = loginView;
-
-    const activeUserId = await firstValueFrom(
-      this.accountService.activeAccount$.pipe(map((a) => a?.id)),
-    );
-    await this.cipherService.setAddEditCipherInfo(
-      {
-        cipher: cipherView,
-        collectionIds: cipherView.collectionIds,
-      },
-      activeUserId,
-    );
-
-    await this.openAddEditVaultItemPopout(sender.tab, { cipherId: cipherView.id });
-  }
-
-  /**
-   * Sets up the extension message listeners for the overlay.
-   */
-  private setupExtensionMessageListeners() {
-    BrowserApi.messageListener("overlay.background", this.handleExtensionMessage);
-    BrowserApi.addListener(chrome.runtime.onConnect, this.handlePortOnConnect);
-  }
-
-  /**
-   * Handles extension messages sent to the extension background.
-   *
-   * @param message - The message received from the extension
-   * @param sender - The sender of the message
-   * @param sendResponse - The response to send back to the sender
-   */
-  private handleExtensionMessage = (
-    message: OverlayBackgroundExtensionMessage,
-    sender: chrome.runtime.MessageSender,
-    sendResponse: (response?: any) => void,
-  ) => {
-    const handler: CallableFunction | undefined = this.extensionMessageHandlers[message?.command];
-    if (!handler) {
-      return null;
-    }
-
-    const messageResponse = handler({ message, sender });
-    if (typeof messageResponse === "undefined") {
-      return null;
-    }
-
-    // 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
-    Promise.resolve(messageResponse).then((response) => sendResponse(response));
-    return true;
-  };
-
-  /**
-   * Handles the connection of a port to the extension background.
-   *
-   * @param port - The port that connected to the extension background
-   */
-  private handlePortOnConnect = async (port: chrome.runtime.Port) => {
-    const isOverlayListPort = port.name === AutofillOverlayPort.List;
-    const isOverlayButtonPort = port.name === AutofillOverlayPort.Button;
-    if (!isOverlayListPort && !isOverlayButtonPort) {
-      return;
-    }
-
-    this.storeOverlayPort(port);
-    port.onMessage.addListener(this.handleOverlayElementPortMessage);
-    port.postMessage({
-      command: `initAutofillOverlay${isOverlayListPort ? "List" : "Button"}`,
-      authStatus: await this.getAuthStatus(),
-      styleSheetUrl: chrome.runtime.getURL(`overlay/${isOverlayListPort ? "list" : "button"}.css`),
-      theme: await firstValueFrom(this.themeStateService.selectedTheme$),
-      translations: this.getTranslations(),
-      ciphers: isOverlayListPort ? await this.getOverlayCipherData() : null,
-    });
-    this.updateOverlayPosition(
-      {
-        overlayElement: isOverlayListPort
-          ? AutofillOverlayElement.List
-          : AutofillOverlayElement.Button,
-      },
-      port.sender,
-    );
-  };
-
-  /**
-   * Stores the connected overlay port and sets up any existing ports to be disconnected.
-   *
-   * @param port - The port to store
-|   */
-  private storeOverlayPort(port: chrome.runtime.Port) {
-    if (port.name === AutofillOverlayPort.List) {
-      this.storeExpiredOverlayPort(this.overlayListPort);
-      this.overlayListPort = port;
-      return;
-    }
-
-    if (port.name === AutofillOverlayPort.Button) {
-      this.storeExpiredOverlayPort(this.overlayButtonPort);
-      this.overlayButtonPort = port;
-    }
-  }
-
-  /**
-   * When registering a new connection, we want to ensure that the port is disconnected.
-   * This method places an existing port in the expiredPorts array to be disconnected
-   * at a later time.
-   *
-   * @param port - The port to store in the expiredPorts array
-   */
-  private storeExpiredOverlayPort(port: chrome.runtime.Port | null) {
-    if (port) {
-      this.expiredPorts.push(port);
-    }
-  }
-
-  /**
-   * Handles messages sent to the overlay list or button ports.
-   *
-   * @param message - The message received from the port
-   * @param port - The port that sent the message
-   */
-  private handleOverlayElementPortMessage = (
-    message: OverlayBackgroundExtensionMessage,
-    port: chrome.runtime.Port,
-  ) => {
-    const command = message?.command;
-    let handler: CallableFunction | undefined;
-
-    if (port.name === AutofillOverlayPort.Button) {
-      handler = this.overlayButtonPortMessageHandlers[command];
-    }
-
-    if (port.name === AutofillOverlayPort.List) {
-      handler = this.overlayListPortMessageHandlers[command];
-    }
-
-    if (!handler) {
-      return;
-    }
-
-    handler({ message, port });
-  };
-}
-
-export default LegacyOverlayBackground;
diff --git a/apps/browser/src/autofill/deprecated/content/abstractions/autofill-init.deprecated.ts b/apps/browser/src/autofill/deprecated/content/abstractions/autofill-init.deprecated.ts
deleted file mode 100644
index ed422822b36..00000000000
--- a/apps/browser/src/autofill/deprecated/content/abstractions/autofill-init.deprecated.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
-
-import AutofillScript from "../../../models/autofill-script";
-
-type AutofillExtensionMessage = {
-  command: string;
-  tab?: chrome.tabs.Tab;
-  sender?: string;
-  fillScript?: AutofillScript;
-  url?: string;
-  pageDetailsUrl?: string;
-  ciphers?: any;
-  data?: {
-    authStatus?: AuthenticationStatus;
-    isFocusingFieldElement?: boolean;
-    isOverlayCiphersPopulated?: boolean;
-    direction?: "previous" | "next";
-    isOpeningFullOverlay?: boolean;
-    forceCloseOverlay?: boolean;
-    autofillOverlayVisibility?: number;
-  };
-};
-
-type AutofillExtensionMessageParam = { message: AutofillExtensionMessage };
-
-type AutofillExtensionMessageHandlers = {
-  [key: string]: CallableFunction;
-  collectPageDetails: ({ message }: AutofillExtensionMessageParam) => void;
-  collectPageDetailsImmediately: ({ message }: AutofillExtensionMessageParam) => void;
-  fillForm: ({ message }: AutofillExtensionMessageParam) => void;
-  openAutofillOverlay: ({ message }: AutofillExtensionMessageParam) => void;
-  closeAutofillOverlay: ({ message }: AutofillExtensionMessageParam) => void;
-  addNewVaultItemFromOverlay: () => void;
-  redirectOverlayFocusOut: ({ message }: AutofillExtensionMessageParam) => void;
-  updateIsOverlayCiphersPopulated: ({ message }: AutofillExtensionMessageParam) => void;
-  bgUnlockPopoutOpened: () => void;
-  bgVaultItemRepromptPopoutOpened: () => void;
-  updateAutofillOverlayVisibility: ({ message }: AutofillExtensionMessageParam) => void;
-};
-
-export { AutofillExtensionMessage, AutofillExtensionMessageHandlers };
diff --git a/apps/browser/src/autofill/deprecated/content/autofill-init.deprecated.spec.ts b/apps/browser/src/autofill/deprecated/content/autofill-init.deprecated.spec.ts
deleted file mode 100644
index 96d5e85ca34..00000000000
--- a/apps/browser/src/autofill/deprecated/content/autofill-init.deprecated.spec.ts
+++ /dev/null
@@ -1,604 +0,0 @@
-import { mock } from "jest-mock-extended";
-
-import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
-import { AutofillOverlayVisibility } from "@bitwarden/common/autofill/constants";
-
-import { RedirectFocusDirection } from "../../enums/autofill-overlay.enum";
-import AutofillPageDetails from "../../models/autofill-page-details";
-import AutofillScript from "../../models/autofill-script";
-import {
-  flushPromises,
-  mockQuerySelectorAllDefinedCall,
-  sendMockExtensionMessage,
-} from "../../spec/testing-utils";
-import AutofillOverlayContentServiceDeprecated from "../services/autofill-overlay-content.service.deprecated";
-
-import { AutofillExtensionMessage } from "./abstractions/autofill-init.deprecated";
-import AutofillInitDeprecated from "./autofill-init.deprecated";
-
-describe("AutofillInit", () => {
-  let autofillInit: AutofillInitDeprecated;
-  const autofillOverlayContentService = mock<AutofillOverlayContentServiceDeprecated>();
-  const originalDocumentReadyState = document.readyState;
-  const mockQuerySelectorAll = mockQuerySelectorAllDefinedCall();
-
-  beforeEach(() => {
-    chrome.runtime.connect = jest.fn().mockReturnValue({
-      onDisconnect: {
-        addListener: jest.fn(),
-      },
-    });
-    autofillInit = new AutofillInitDeprecated(autofillOverlayContentService);
-    window.IntersectionObserver = jest.fn(() => mock<IntersectionObserver>());
-  });
-
-  afterEach(() => {
-    jest.resetModules();
-    jest.clearAllMocks();
-    Object.defineProperty(document, "readyState", {
-      value: originalDocumentReadyState,
-      writable: true,
-    });
-  });
-
-  afterAll(() => {
-    mockQuerySelectorAll.mockRestore();
-  });
-
-  describe("init", () => {
-    it("sets up the extension message listeners", () => {
-      jest.spyOn(autofillInit as any, "setupExtensionMessageListeners");
-
-      autofillInit.init();
-
-      expect(autofillInit["setupExtensionMessageListeners"]).toHaveBeenCalled();
-    });
-
-    it("triggers a collection of page details if the document is in a `complete` ready state", () => {
-      jest.useFakeTimers();
-      Object.defineProperty(document, "readyState", { value: "complete", writable: true });
-
-      autofillInit.init();
-      jest.advanceTimersByTime(250);
-
-      expect(chrome.runtime.sendMessage).toHaveBeenCalledWith(
-        {
-          command: "bgCollectPageDetails",
-          sender: "autofillInit",
-        },
-        expect.any(Function),
-      );
-    });
-
-    it("registers a window load listener to collect the page details if the document is not in a `complete` ready state", () => {
-      jest.spyOn(window, "addEventListener");
-      Object.defineProperty(document, "readyState", { value: "loading", writable: true });
-
-      autofillInit.init();
-
-      expect(window.addEventListener).toHaveBeenCalledWith("load", expect.any(Function));
-    });
-  });
-
-  describe("setupExtensionMessageListeners", () => {
-    it("sets up a chrome runtime on message listener", () => {
-      jest.spyOn(chrome.runtime.onMessage, "addListener");
-
-      autofillInit["setupExtensionMessageListeners"]();
-
-      expect(chrome.runtime.onMessage.addListener).toHaveBeenCalledWith(
-        autofillInit["handleExtensionMessage"],
-      );
-    });
-  });
-
-  describe("handleExtensionMessage", () => {
-    let message: AutofillExtensionMessage;
-    let sender: chrome.runtime.MessageSender;
-    const sendResponse = jest.fn();
-
-    beforeEach(() => {
-      message = {
-        command: "collectPageDetails",
-        tab: mock<chrome.tabs.Tab>(),
-        sender: "sender",
-      };
-      sender = mock<chrome.runtime.MessageSender>();
-    });
-
-    it("returns a undefined value if a extension message handler is not found with the given message command", () => {
-      message.command = "unknownCommand";
-
-      const response = autofillInit["handleExtensionMessage"](message, sender, sendResponse);
-
-      expect(response).toBe(null);
-    });
-
-    it("returns a undefined value if the message handler does not return a response", async () => {
-      const response1 = await autofillInit["handleExtensionMessage"](message, sender, sendResponse);
-      await flushPromises();
-
-      expect(response1).not.toBe(false);
-
-      message.command = "removeAutofillOverlay";
-      message.fillScript = mock<AutofillScript>();
-
-      const response2 = autofillInit["handleExtensionMessage"](message, sender, sendResponse);
-      await flushPromises();
-
-      expect(response2).toBe(null);
-    });
-
-    it("returns a true value and calls sendResponse if the message handler returns a response", async () => {
-      message.command = "collectPageDetailsImmediately";
-      const pageDetails: AutofillPageDetails = {
-        title: "title",
-        url: "http://example.com",
-        documentUrl: "documentUrl",
-        forms: {},
-        fields: [],
-        collectedTimestamp: 0,
-      };
-      jest
-        .spyOn(autofillInit["collectAutofillContentService"], "getPageDetails")
-        .mockResolvedValue(pageDetails);
-
-      const response = await autofillInit["handleExtensionMessage"](message, sender, sendResponse);
-      await flushPromises();
-
-      expect(response).toBe(true);
-      expect(sendResponse).toHaveBeenCalledWith(pageDetails);
-    });
-
-    describe("extension message handlers", () => {
-      beforeEach(() => {
-        autofillInit.init();
-      });
-
-      describe("collectPageDetails", () => {
-        it("sends the collected page details for autofill using a background script message", async () => {
-          const pageDetails: AutofillPageDetails = {
-            title: "title",
-            url: "http://example.com",
-            documentUrl: "documentUrl",
-            forms: {},
-            fields: [],
-            collectedTimestamp: 0,
-          };
-          const message = {
-            command: "collectPageDetails",
-            sender: "sender",
-            tab: mock<chrome.tabs.Tab>(),
-          };
-          jest
-            .spyOn(autofillInit["collectAutofillContentService"], "getPageDetails")
-            .mockResolvedValue(pageDetails);
-
-          sendMockExtensionMessage(message, sender, sendResponse);
-          await flushPromises();
-
-          expect(chrome.runtime.sendMessage).toHaveBeenCalledWith({
-            command: "collectPageDetailsResponse",
-            tab: message.tab,
-            details: pageDetails,
-            sender: message.sender,
-          });
-        });
-      });
-
-      describe("collectPageDetailsImmediately", () => {
-        it("returns collected page details for autofill if set to send the details in the response", async () => {
-          const pageDetails: AutofillPageDetails = {
-            title: "title",
-            url: "http://example.com",
-            documentUrl: "documentUrl",
-            forms: {},
-            fields: [],
-            collectedTimestamp: 0,
-          };
-          jest
-            .spyOn(autofillInit["collectAutofillContentService"], "getPageDetails")
-            .mockResolvedValue(pageDetails);
-
-          sendMockExtensionMessage(
-            { command: "collectPageDetailsImmediately" },
-            sender,
-            sendResponse,
-          );
-          await flushPromises();
-
-          expect(autofillInit["collectAutofillContentService"].getPageDetails).toHaveBeenCalled();
-          expect(sendResponse).toBeCalledWith(pageDetails);
-          expect(chrome.runtime.sendMessage).not.toHaveBeenCalledWith({
-            command: "collectPageDetailsResponse",
-            tab: message.tab,
-            details: pageDetails,
-            sender: message.sender,
-          });
-        });
-      });
-
-      describe("fillForm", () => {
-        let fillScript: AutofillScript;
-        beforeEach(() => {
-          fillScript = mock<AutofillScript>();
-          jest.spyOn(autofillInit["insertAutofillContentService"], "fillForm").mockImplementation();
-        });
-
-        it("skips calling the InsertAutofillContentService and does not fill the form if the url to fill is not equal to the current tab url", async () => {
-          const fillScript = mock<AutofillScript>();
-          const message = {
-            command: "fillForm",
-            fillScript,
-            pageDetailsUrl: "https://a-different-url.com",
-          };
-
-          sendMockExtensionMessage(message);
-          await flushPromises();
-
-          expect(autofillInit["insertAutofillContentService"].fillForm).not.toHaveBeenCalledWith(
-            fillScript,
-          );
-        });
-
-        it("calls the InsertAutofillContentService to fill the form", async () => {
-          sendMockExtensionMessage({
-            command: "fillForm",
-            fillScript,
-            pageDetailsUrl: window.location.href,
-          });
-          await flushPromises();
-
-          expect(autofillInit["insertAutofillContentService"].fillForm).toHaveBeenCalledWith(
-            fillScript,
-          );
-        });
-
-        it("removes the overlay when filling the form", async () => {
-          const blurAndRemoveOverlaySpy = jest.spyOn(autofillInit as any, "blurAndRemoveOverlay");
-          sendMockExtensionMessage({
-            command: "fillForm",
-            fillScript,
-            pageDetailsUrl: window.location.href,
-          });
-          await flushPromises();
-
-          expect(blurAndRemoveOverlaySpy).toHaveBeenCalled();
-        });
-
-        it("updates the isCurrentlyFilling property of the overlay to true after filling", async () => {
-          jest.useFakeTimers();
-          jest.spyOn(autofillInit as any, "updateOverlayIsCurrentlyFilling");
-          jest
-            .spyOn(autofillInit["autofillOverlayContentService"], "focusMostRecentOverlayField")
-            .mockImplementation();
-
-          sendMockExtensionMessage({
-            command: "fillForm",
-            fillScript,
-            pageDetailsUrl: window.location.href,
-          });
-          await flushPromises();
-          jest.advanceTimersByTime(300);
-
-          expect(autofillInit["updateOverlayIsCurrentlyFilling"]).toHaveBeenNthCalledWith(1, true);
-          expect(autofillInit["insertAutofillContentService"].fillForm).toHaveBeenCalledWith(
-            fillScript,
-          );
-          expect(autofillInit["updateOverlayIsCurrentlyFilling"]).toHaveBeenNthCalledWith(2, false);
-        });
-
-        it("skips attempting to focus the most recent field if the autofillOverlayContentService is not present", async () => {
-          jest.useFakeTimers();
-          const newAutofillInit = new AutofillInitDeprecated(undefined);
-          newAutofillInit.init();
-          jest.spyOn(newAutofillInit as any, "updateOverlayIsCurrentlyFilling");
-          jest
-            .spyOn(newAutofillInit["insertAutofillContentService"], "fillForm")
-            .mockImplementation();
-
-          sendMockExtensionMessage({
-            command: "fillForm",
-            fillScript,
-            pageDetailsUrl: window.location.href,
-          });
-          await flushPromises();
-          jest.advanceTimersByTime(300);
-
-          expect(newAutofillInit["updateOverlayIsCurrentlyFilling"]).toHaveBeenNthCalledWith(
-            1,
-            true,
-          );
-          expect(newAutofillInit["insertAutofillContentService"].fillForm).toHaveBeenCalledWith(
-            fillScript,
-          );
-          expect(newAutofillInit["updateOverlayIsCurrentlyFilling"]).not.toHaveBeenNthCalledWith(
-            2,
-            false,
-          );
-        });
-      });
-
-      describe("openAutofillOverlay", () => {
-        const message = {
-          command: "openAutofillOverlay",
-          data: {
-            isFocusingFieldElement: true,
-            isOpeningFullOverlay: true,
-            authStatus: AuthenticationStatus.Unlocked,
-          },
-        };
-
-        it("skips attempting to open the autofill overlay if the autofillOverlayContentService is not present", () => {
-          const newAutofillInit = new AutofillInitDeprecated(undefined);
-          newAutofillInit.init();
-
-          sendMockExtensionMessage(message);
-
-          expect(newAutofillInit["autofillOverlayContentService"]).toBe(undefined);
-        });
-
-        it("opens the autofill overlay", () => {
-          sendMockExtensionMessage(message);
-
-          expect(
-            autofillInit["autofillOverlayContentService"].openAutofillOverlay,
-          ).toHaveBeenCalledWith({
-            isFocusingFieldElement: message.data.isFocusingFieldElement,
-            isOpeningFullOverlay: message.data.isOpeningFullOverlay,
-            authStatus: message.data.authStatus,
-          });
-        });
-      });
-
-      describe("closeAutofillOverlay", () => {
-        beforeEach(() => {
-          autofillInit["autofillOverlayContentService"].isFieldCurrentlyFocused = false;
-          autofillInit["autofillOverlayContentService"].isCurrentlyFilling = false;
-        });
-
-        it("skips attempting to remove the overlay if the autofillOverlayContentService is not present", () => {
-          const newAutofillInit = new AutofillInitDeprecated(undefined);
-          newAutofillInit.init();
-          jest.spyOn(newAutofillInit as any, "removeAutofillOverlay");
-
-          sendMockExtensionMessage({
-            command: "closeAutofillOverlay",
-            data: { forceCloseOverlay: false },
-          });
-
-          expect(newAutofillInit["autofillOverlayContentService"]).toBe(undefined);
-        });
-
-        it("removes the autofill overlay if the message flags a forced closure", () => {
-          sendMockExtensionMessage({
-            command: "closeAutofillOverlay",
-            data: { forceCloseOverlay: true },
-          });
-
-          expect(
-            autofillInit["autofillOverlayContentService"].removeAutofillOverlay,
-          ).toHaveBeenCalled();
-        });
-
-        it("ignores the message if a field is currently focused", () => {
-          autofillInit["autofillOverlayContentService"].isFieldCurrentlyFocused = true;
-
-          sendMockExtensionMessage({ command: "closeAutofillOverlay" });
-
-          expect(
-            autofillInit["autofillOverlayContentService"].removeAutofillOverlayList,
-          ).not.toHaveBeenCalled();
-          expect(
-            autofillInit["autofillOverlayContentService"].removeAutofillOverlay,
-          ).not.toHaveBeenCalled();
-        });
-
-        it("removes the autofill overlay list if the overlay is currently filling", () => {
-          autofillInit["autofillOverlayContentService"].isCurrentlyFilling = true;
-
-          sendMockExtensionMessage({ command: "closeAutofillOverlay" });
-
-          expect(
-            autofillInit["autofillOverlayContentService"].removeAutofillOverlayList,
-          ).toHaveBeenCalled();
-          expect(
-            autofillInit["autofillOverlayContentService"].removeAutofillOverlay,
-          ).not.toHaveBeenCalled();
-        });
-
-        it("removes the entire overlay if the overlay is not currently filling", () => {
-          sendMockExtensionMessage({ command: "closeAutofillOverlay" });
-
-          expect(
-            autofillInit["autofillOverlayContentService"].removeAutofillOverlayList,
-          ).not.toHaveBeenCalled();
-          expect(
-            autofillInit["autofillOverlayContentService"].removeAutofillOverlay,
-          ).toHaveBeenCalled();
-        });
-      });
-
-      describe("addNewVaultItemFromOverlay", () => {
-        it("will not add a new vault item if the autofillOverlayContentService is not present", () => {
-          const newAutofillInit = new AutofillInitDeprecated(undefined);
-          newAutofillInit.init();
-
-          sendMockExtensionMessage({ command: "addNewVaultItemFromOverlay" });
-
-          expect(newAutofillInit["autofillOverlayContentService"]).toBe(undefined);
-        });
-
-        it("will add a new vault item", () => {
-          sendMockExtensionMessage({ command: "addNewVaultItemFromOverlay" });
-
-          expect(autofillInit["autofillOverlayContentService"].addNewVaultItem).toHaveBeenCalled();
-        });
-      });
-
-      describe("redirectOverlayFocusOut", () => {
-        const message = {
-          command: "redirectOverlayFocusOut",
-          data: {
-            direction: RedirectFocusDirection.Next,
-          },
-        };
-
-        it("ignores the message to redirect focus if the autofillOverlayContentService does not exist", () => {
-          const newAutofillInit = new AutofillInitDeprecated(undefined);
-          newAutofillInit.init();
-
-          sendMockExtensionMessage(message);
-
-          expect(newAutofillInit["autofillOverlayContentService"]).toBe(undefined);
-        });
-
-        it("redirects the overlay focus", () => {
-          sendMockExtensionMessage(message);
-
-          expect(
-            autofillInit["autofillOverlayContentService"].redirectOverlayFocusOut,
-          ).toHaveBeenCalledWith(message.data.direction);
-        });
-      });
-
-      describe("updateIsOverlayCiphersPopulated", () => {
-        const message = {
-          command: "updateIsOverlayCiphersPopulated",
-          data: {
-            isOverlayCiphersPopulated: true,
-          },
-        };
-
-        it("skips updating whether the ciphers are populated if the autofillOverlayContentService does note exist", () => {
-          const newAutofillInit = new AutofillInitDeprecated(undefined);
-          newAutofillInit.init();
-
-          sendMockExtensionMessage(message);
-
-          expect(newAutofillInit["autofillOverlayContentService"]).toBe(undefined);
-        });
-
-        it("updates whether the overlay ciphers are populated", () => {
-          sendMockExtensionMessage(message);
-
-          expect(autofillInit["autofillOverlayContentService"].isOverlayCiphersPopulated).toEqual(
-            message.data.isOverlayCiphersPopulated,
-          );
-        });
-      });
-
-      describe("bgUnlockPopoutOpened", () => {
-        it("skips attempting to blur and remove the overlay if the autofillOverlayContentService is not present", () => {
-          const newAutofillInit = new AutofillInitDeprecated(undefined);
-          newAutofillInit.init();
-          jest.spyOn(newAutofillInit as any, "removeAutofillOverlay");
-
-          sendMockExtensionMessage({ command: "bgUnlockPopoutOpened" });
-
-          expect(newAutofillInit["autofillOverlayContentService"]).toBe(undefined);
-          expect(newAutofillInit["removeAutofillOverlay"]).not.toHaveBeenCalled();
-        });
-
-        it("blurs the most recently focused feel and remove the autofill overlay", () => {
-          jest.spyOn(autofillInit["autofillOverlayContentService"], "blurMostRecentOverlayField");
-          jest.spyOn(autofillInit as any, "removeAutofillOverlay");
-
-          sendMockExtensionMessage({ command: "bgUnlockPopoutOpened" });
-
-          expect(
-            autofillInit["autofillOverlayContentService"].blurMostRecentOverlayField,
-          ).toHaveBeenCalled();
-          expect(autofillInit["removeAutofillOverlay"]).toHaveBeenCalled();
-        });
-      });
-
-      describe("bgVaultItemRepromptPopoutOpened", () => {
-        it("skips attempting to blur and remove the overlay if the autofillOverlayContentService is not present", () => {
-          const newAutofillInit = new AutofillInitDeprecated(undefined);
-          newAutofillInit.init();
-          jest.spyOn(newAutofillInit as any, "removeAutofillOverlay");
-
-          sendMockExtensionMessage({ command: "bgVaultItemRepromptPopoutOpened" });
-
-          expect(newAutofillInit["autofillOverlayContentService"]).toBe(undefined);
-          expect(newAutofillInit["removeAutofillOverlay"]).not.toHaveBeenCalled();
-        });
-
-        it("blurs the most recently focused feel and remove the autofill overlay", () => {
-          jest.spyOn(autofillInit["autofillOverlayContentService"], "blurMostRecentOverlayField");
-          jest.spyOn(autofillInit as any, "removeAutofillOverlay");
-
-          sendMockExtensionMessage({ command: "bgVaultItemRepromptPopoutOpened" });
-
-          expect(
-            autofillInit["autofillOverlayContentService"].blurMostRecentOverlayField,
-          ).toHaveBeenCalled();
-          expect(autofillInit["removeAutofillOverlay"]).toHaveBeenCalled();
-        });
-      });
-
-      describe("updateAutofillOverlayVisibility", () => {
-        beforeEach(() => {
-          autofillInit["autofillOverlayContentService"].autofillOverlayVisibility =
-            AutofillOverlayVisibility.OnButtonClick;
-        });
-
-        it("skips attempting to update the overlay visibility if the autofillOverlayVisibility data value is not present", () => {
-          sendMockExtensionMessage({
-            command: "updateAutofillOverlayVisibility",
-            data: {},
-          });
-
-          expect(autofillInit["autofillOverlayContentService"].autofillOverlayVisibility).toEqual(
-            AutofillOverlayVisibility.OnButtonClick,
-          );
-        });
-
-        it("updates the overlay visibility value", () => {
-          const message = {
-            command: "updateAutofillOverlayVisibility",
-            data: {
-              autofillOverlayVisibility: AutofillOverlayVisibility.Off,
-            },
-          };
-
-          sendMockExtensionMessage(message);
-
-          expect(autofillInit["autofillOverlayContentService"].autofillOverlayVisibility).toEqual(
-            message.data.autofillOverlayVisibility,
-          );
-        });
-      });
-    });
-  });
-
-  describe("destroy", () => {
-    it("clears the timeout used to collect page details on load", () => {
-      jest.spyOn(window, "clearTimeout");
-
-      autofillInit.init();
-      autofillInit.destroy();
-
-      expect(window.clearTimeout).toHaveBeenCalledWith(
-        autofillInit["collectPageDetailsOnLoadTimeout"],
-      );
-    });
-
-    it("removes the extension message listeners", () => {
-      autofillInit.destroy();
-
-      expect(chrome.runtime.onMessage.removeListener).toHaveBeenCalledWith(
-        autofillInit["handleExtensionMessage"],
-      );
-    });
-
-    it("destroys the collectAutofillContentService", () => {
-      jest.spyOn(autofillInit["collectAutofillContentService"], "destroy");
-
-      autofillInit.destroy();
-
-      expect(autofillInit["collectAutofillContentService"].destroy).toHaveBeenCalled();
-    });
-  });
-});
diff --git a/apps/browser/src/autofill/deprecated/content/autofill-init.deprecated.ts b/apps/browser/src/autofill/deprecated/content/autofill-init.deprecated.ts
deleted file mode 100644
index fac9c0852f5..00000000000
--- a/apps/browser/src/autofill/deprecated/content/autofill-init.deprecated.ts
+++ /dev/null
@@ -1,315 +0,0 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
-import { AutofillInit } from "../../content/abstractions/autofill-init";
-import AutofillPageDetails from "../../models/autofill-page-details";
-import { CollectAutofillContentService } from "../../services/collect-autofill-content.service";
-import DomElementVisibilityService from "../../services/dom-element-visibility.service";
-import { DomQueryService } from "../../services/dom-query.service";
-import InsertAutofillContentService from "../../services/insert-autofill-content.service";
-import { sendExtensionMessage } from "../../utils";
-import { LegacyAutofillOverlayContentService } from "../services/abstractions/autofill-overlay-content.service";
-
-import {
-  AutofillExtensionMessage,
-  AutofillExtensionMessageHandlers,
-} from "./abstractions/autofill-init.deprecated";
-
-class LegacyAutofillInit implements AutofillInit {
-  private readonly autofillOverlayContentService: LegacyAutofillOverlayContentService | undefined;
-  private readonly domElementVisibilityService: DomElementVisibilityService;
-  private readonly collectAutofillContentService: CollectAutofillContentService;
-  private readonly insertAutofillContentService: InsertAutofillContentService;
-  private collectPageDetailsOnLoadTimeout: number | NodeJS.Timeout | undefined;
-  private readonly extensionMessageHandlers: AutofillExtensionMessageHandlers = {
-    collectPageDetails: ({ message }) => this.collectPageDetails(message),
-    collectPageDetailsImmediately: ({ message }) => this.collectPageDetails(message, true),
-    fillForm: ({ message }) => this.fillForm(message),
-    openAutofillOverlay: ({ message }) => this.openAutofillOverlay(message),
-    closeAutofillOverlay: ({ message }) => this.removeAutofillOverlay(message),
-    addNewVaultItemFromOverlay: () => this.addNewVaultItemFromOverlay(),
-    redirectOverlayFocusOut: ({ message }) => this.redirectOverlayFocusOut(message),
-    updateIsOverlayCiphersPopulated: ({ message }) => this.updateIsOverlayCiphersPopulated(message),
-    bgUnlockPopoutOpened: () => this.blurAndRemoveOverlay(),
-    bgVaultItemRepromptPopoutOpened: () => this.blurAndRemoveOverlay(),
-    updateAutofillOverlayVisibility: ({ message }) => this.updateAutofillOverlayVisibility(message),
-  };
-
-  /**
-   * AutofillInit constructor. Initializes the DomElementVisibilityService,
-   * CollectAutofillContentService and InsertAutofillContentService classes.
-   *
-   * @param autofillOverlayContentService - The autofill overlay content service, potentially undefined.
-   */
-  constructor(autofillOverlayContentService?: LegacyAutofillOverlayContentService) {
-    this.autofillOverlayContentService = autofillOverlayContentService;
-    this.domElementVisibilityService = new DomElementVisibilityService();
-    const domQueryService = new DomQueryService();
-    this.collectAutofillContentService = new CollectAutofillContentService(
-      this.domElementVisibilityService,
-      domQueryService,
-      this.autofillOverlayContentService,
-    );
-    this.insertAutofillContentService = new InsertAutofillContentService(
-      this.domElementVisibilityService,
-      this.collectAutofillContentService,
-    );
-  }
-
-  /**
-   * Initializes the autofill content script, setting up
-   * the extension message listeners. This method should
-   * be called once when the content script is loaded.
-   */
-  init() {
-    this.setupExtensionMessageListeners();
-    this.autofillOverlayContentService?.init();
-    this.collectPageDetailsOnLoad();
-  }
-
-  /**
-   * Triggers a collection of the page details from the
-   * background script, ensuring that autofill is ready
-   * to act on the page.
-   */
-  private collectPageDetailsOnLoad() {
-    const sendCollectDetailsMessage = () => {
-      this.clearCollectPageDetailsOnLoadTimeout();
-      this.collectPageDetailsOnLoadTimeout = setTimeout(
-        () => sendExtensionMessage("bgCollectPageDetails", { sender: "autofillInit" }),
-        250,
-      );
-    };
-
-    if (globalThis.document.readyState === "complete") {
-      sendCollectDetailsMessage();
-    }
-
-    globalThis.addEventListener("load", sendCollectDetailsMessage);
-  }
-
-  /**
-   * Collects the page details and sends them to the
-   * extension background script. If the `sendDetailsInResponse`
-   * parameter is set to true, the page details will be
-   * returned to facilitate sending the details in the
-   * response to the extension message.
-   *
-   * @param message - The extension message.
-   * @param sendDetailsInResponse - Determines whether to send the details in the response.
-   */
-  private async collectPageDetails(
-    message: AutofillExtensionMessage,
-    sendDetailsInResponse = false,
-  ): Promise<AutofillPageDetails | void> {
-    const pageDetails: AutofillPageDetails =
-      await this.collectAutofillContentService.getPageDetails();
-    if (sendDetailsInResponse) {
-      return pageDetails;
-    }
-
-    void chrome.runtime.sendMessage({
-      command: "collectPageDetailsResponse",
-      tab: message.tab,
-      details: pageDetails,
-      sender: message.sender,
-    });
-  }
-
-  /**
-   * Fills the form with the given fill script.
-   *
-   * @param {AutofillExtensionMessage} message
-   */
-  private async fillForm({ fillScript, pageDetailsUrl }: AutofillExtensionMessage) {
-    if ((document.defaultView || window).location.href !== pageDetailsUrl) {
-      return;
-    }
-
-    this.blurAndRemoveOverlay();
-    this.updateOverlayIsCurrentlyFilling(true);
-    await this.insertAutofillContentService.fillForm(fillScript);
-
-    if (!this.autofillOverlayContentService) {
-      return;
-    }
-
-    setTimeout(() => this.updateOverlayIsCurrentlyFilling(false), 250);
-  }
-
-  /**
-   * Handles updating the overlay is currently filling value.
-   *
-   * @param isCurrentlyFilling - Indicates if the overlay is currently filling
-   */
-  private updateOverlayIsCurrentlyFilling(isCurrentlyFilling: boolean) {
-    if (!this.autofillOverlayContentService) {
-      return;
-    }
-
-    this.autofillOverlayContentService.isCurrentlyFilling = isCurrentlyFilling;
-  }
-
-  /**
-   * Opens the autofill overlay.
-   *
-   * @param data - The extension message data.
-   */
-  private openAutofillOverlay({ data }: AutofillExtensionMessage) {
-    if (!this.autofillOverlayContentService) {
-      return;
-    }
-
-    this.autofillOverlayContentService.openAutofillOverlay(data);
-  }
-
-  /**
-   * Blurs the most recent overlay field and removes the overlay. Used
-   * in cases where the background unlock or vault item reprompt popout
-   * is opened.
-   */
-  private blurAndRemoveOverlay() {
-    if (!this.autofillOverlayContentService) {
-      return;
-    }
-
-    this.autofillOverlayContentService.blurMostRecentOverlayField();
-    this.removeAutofillOverlay();
-  }
-
-  /**
-   * Removes the autofill overlay if the field is not currently focused.
-   * If the autofill is currently filling, only the overlay list will be
-   * removed.
-   */
-  private removeAutofillOverlay(message?: AutofillExtensionMessage) {
-    if (message?.data?.forceCloseOverlay) {
-      this.autofillOverlayContentService?.removeAutofillOverlay();
-      return;
-    }
-
-    if (
-      !this.autofillOverlayContentService ||
-      this.autofillOverlayContentService.isFieldCurrentlyFocused
-    ) {
-      return;
-    }
-
-    if (this.autofillOverlayContentService.isCurrentlyFilling) {
-      this.autofillOverlayContentService.removeAutofillOverlayList();
-      return;
-    }
-
-    this.autofillOverlayContentService.removeAutofillOverlay();
-  }
-
-  /**
-   * Adds a new vault item from the overlay.
-   */
-  private addNewVaultItemFromOverlay() {
-    if (!this.autofillOverlayContentService) {
-      return;
-    }
-
-    this.autofillOverlayContentService.addNewVaultItem();
-  }
-
-  /**
-   * Redirects the overlay focus out of an overlay iframe.
-   *
-   * @param data - Contains the direction to redirect the focus.
-   */
-  private redirectOverlayFocusOut({ data }: AutofillExtensionMessage) {
-    if (!this.autofillOverlayContentService) {
-      return;
-    }
-
-    this.autofillOverlayContentService.redirectOverlayFocusOut(data?.direction);
-  }
-
-  /**
-   * Updates whether the current tab has ciphers that can populate the overlay list
-   *
-   * @param data - Contains the isOverlayCiphersPopulated value
-   *
-   */
-  private updateIsOverlayCiphersPopulated({ data }: AutofillExtensionMessage) {
-    if (!this.autofillOverlayContentService) {
-      return;
-    }
-
-    this.autofillOverlayContentService.isOverlayCiphersPopulated = Boolean(
-      data?.isOverlayCiphersPopulated,
-    );
-  }
-
-  /**
-   * Updates the autofill overlay visibility.
-   *
-   * @param data - Contains the autoFillOverlayVisibility value
-   */
-  private updateAutofillOverlayVisibility({ data }: AutofillExtensionMessage) {
-    if (!this.autofillOverlayContentService || isNaN(data?.autofillOverlayVisibility)) {
-      return;
-    }
-
-    this.autofillOverlayContentService.autofillOverlayVisibility = data?.autofillOverlayVisibility;
-  }
-
-  /**
-   * Clears the send collect details message timeout.
-   */
-  private clearCollectPageDetailsOnLoadTimeout() {
-    if (this.collectPageDetailsOnLoadTimeout) {
-      clearTimeout(this.collectPageDetailsOnLoadTimeout);
-    }
-  }
-
-  /**
-   * Sets up the extension message listeners for the content script.
-   */
-  private setupExtensionMessageListeners() {
-    chrome.runtime.onMessage.addListener(this.handleExtensionMessage);
-  }
-
-  /**
-   * Handles the extension messages sent to the content script.
-   *
-   * @param message - The extension message.
-   * @param sender - The message sender.
-   * @param sendResponse - The send response callback.
-   */
-  private handleExtensionMessage = (
-    message: AutofillExtensionMessage,
-    sender: chrome.runtime.MessageSender,
-    sendResponse: (response?: any) => void,
-  ): boolean => {
-    const command: string = message.command;
-    const handler: CallableFunction | undefined = this.extensionMessageHandlers[command];
-    if (!handler) {
-      return null;
-    }
-
-    const messageResponse = handler({ message, sender });
-    if (typeof messageResponse === "undefined") {
-      return null;
-    }
-
-    // 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
-    Promise.resolve(messageResponse).then((response) => sendResponse(response));
-    return true;
-  };
-
-  /**
-   * Handles destroying the autofill init content script. Removes all
-   * listeners, timeouts, and object instances to prevent memory leaks.
-   */
-  destroy() {
-    this.clearCollectPageDetailsOnLoadTimeout();
-    chrome.runtime.onMessage.removeListener(this.handleExtensionMessage);
-    this.collectAutofillContentService.destroy();
-    this.autofillOverlayContentService?.destroy();
-  }
-}
-
-export default LegacyAutofillInit;
diff --git a/apps/browser/src/autofill/deprecated/content/bootstrap-legacy-autofill-overlay.ts b/apps/browser/src/autofill/deprecated/content/bootstrap-legacy-autofill-overlay.ts
deleted file mode 100644
index 66d672172ae..00000000000
--- a/apps/browser/src/autofill/deprecated/content/bootstrap-legacy-autofill-overlay.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { setupAutofillInitDisconnectAction } from "../../utils";
-import LegacyAutofillOverlayContentService from "../services/autofill-overlay-content.service.deprecated";
-
-import LegacyAutofillInit from "./autofill-init.deprecated";
-
-(function (windowContext) {
-  if (!windowContext.bitwardenAutofillInit) {
-    const autofillOverlayContentService = new LegacyAutofillOverlayContentService();
-    windowContext.bitwardenAutofillInit = new LegacyAutofillInit(autofillOverlayContentService);
-    setupAutofillInitDisconnectAction(windowContext);
-
-    windowContext.bitwardenAutofillInit.init();
-  }
-})(window);
diff --git a/apps/browser/src/autofill/deprecated/overlay/abstractions/autofill-overlay-button.deprecated.ts b/apps/browser/src/autofill/deprecated/overlay/abstractions/autofill-overlay-button.deprecated.ts
deleted file mode 100644
index b6b22be9439..00000000000
--- a/apps/browser/src/autofill/deprecated/overlay/abstractions/autofill-overlay-button.deprecated.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
-
-type OverlayButtonMessage = { command: string; colorScheme?: string };
-
-type UpdateAuthStatusMessage = OverlayButtonMessage & { authStatus: AuthenticationStatus };
-
-type InitAutofillOverlayButtonMessage = UpdateAuthStatusMessage & {
-  styleSheetUrl: string;
-  translations: Record<string, string>;
-};
-
-type OverlayButtonWindowMessageHandlers = {
-  [key: string]: CallableFunction;
-  initAutofillOverlayButton: ({ message }: { message: InitAutofillOverlayButtonMessage }) => void;
-  checkAutofillOverlayButtonFocused: () => void;
-  updateAutofillOverlayButtonAuthStatus: ({
-    message,
-  }: {
-    message: UpdateAuthStatusMessage;
-  }) => void;
-  updateOverlayPageColorScheme: ({ message }: { message: OverlayButtonMessage }) => void;
-};
-
-export {
-  UpdateAuthStatusMessage,
-  OverlayButtonMessage,
-  InitAutofillOverlayButtonMessage,
-  OverlayButtonWindowMessageHandlers,
-};
diff --git a/apps/browser/src/autofill/deprecated/overlay/abstractions/autofill-overlay-iframe.service.deprecated.ts b/apps/browser/src/autofill/deprecated/overlay/abstractions/autofill-overlay-iframe.service.deprecated.ts
deleted file mode 100644
index 0c4160a0709..00000000000
--- a/apps/browser/src/autofill/deprecated/overlay/abstractions/autofill-overlay-iframe.service.deprecated.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-type AutofillOverlayIframeExtensionMessage = {
-  command: string;
-  styles?: Partial<CSSStyleDeclaration>;
-  theme?: string;
-};
-
-type AutofillOverlayIframeWindowMessageHandlers = {
-  [key: string]: CallableFunction;
-  updateAutofillOverlayListHeight: (message: AutofillOverlayIframeExtensionMessage) => void;
-  getPageColorScheme: () => void;
-};
-
-type AutofillOverlayIframeExtensionMessageParam = {
-  message: AutofillOverlayIframeExtensionMessage;
-};
-
-type BackgroundPortMessageHandlers = {
-  [key: string]: CallableFunction;
-  initAutofillOverlayList: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void;
-  updateIframePosition: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void;
-  updateOverlayHidden: ({ message }: AutofillOverlayIframeExtensionMessageParam) => void;
-};
-
-interface AutofillOverlayIframeService {
-  initOverlayIframe(initStyles: Partial<CSSStyleDeclaration>, ariaAlert?: string): void;
-}
-
-export {
-  AutofillOverlayIframeExtensionMessage,
-  AutofillOverlayIframeWindowMessageHandlers,
-  BackgroundPortMessageHandlers,
-  AutofillOverlayIframeService,
-};
diff --git a/apps/browser/src/autofill/deprecated/overlay/abstractions/autofill-overlay-list.deprecated.ts b/apps/browser/src/autofill/deprecated/overlay/abstractions/autofill-overlay-list.deprecated.ts
deleted file mode 100644
index 83578b13043..00000000000
--- a/apps/browser/src/autofill/deprecated/overlay/abstractions/autofill-overlay-list.deprecated.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
-
-import { OverlayCipherData } from "../../background/abstractions/overlay.background.deprecated";
-
-type OverlayListMessage = { command: string };
-
-type UpdateOverlayListCiphersMessage = OverlayListMessage & {
-  ciphers: OverlayCipherData[];
-};
-
-type InitAutofillOverlayListMessage = OverlayListMessage & {
-  authStatus: AuthenticationStatus;
-  styleSheetUrl: string;
-  theme: string;
-  translations: Record<string, string>;
-  ciphers?: OverlayCipherData[];
-};
-
-type OverlayListWindowMessageHandlers = {
-  [key: string]: CallableFunction;
-  initAutofillOverlayList: ({ message }: { message: InitAutofillOverlayListMessage }) => void;
-  checkAutofillOverlayListFocused: () => void;
-  updateOverlayListCiphers: ({ message }: { message: UpdateOverlayListCiphersMessage }) => void;
-  focusOverlayList: () => void;
-};
-
-export {
-  UpdateOverlayListCiphersMessage,
-  InitAutofillOverlayListMessage,
-  OverlayListWindowMessageHandlers,
-};
diff --git a/apps/browser/src/autofill/deprecated/overlay/abstractions/autofill-overlay-page-element.deprecated.ts b/apps/browser/src/autofill/deprecated/overlay/abstractions/autofill-overlay-page-element.deprecated.ts
deleted file mode 100644
index 368ae4e7303..00000000000
--- a/apps/browser/src/autofill/deprecated/overlay/abstractions/autofill-overlay-page-element.deprecated.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { OverlayButtonWindowMessageHandlers } from "./autofill-overlay-button.deprecated";
-import { OverlayListWindowMessageHandlers } from "./autofill-overlay-list.deprecated";
-
-type WindowMessageHandlers = OverlayButtonWindowMessageHandlers | OverlayListWindowMessageHandlers;
-
-type AutofillOverlayPageElementWindowMessage = {
-  [key: string]: any;
-  command: string;
-  overlayCipherId?: string;
-  height?: number;
-};
-
-export { WindowMessageHandlers, AutofillOverlayPageElementWindowMessage };
diff --git a/apps/browser/src/autofill/deprecated/overlay/iframe-content/__snapshots__/autofill-overlay-iframe.service.deprecated.spec.ts.snap b/apps/browser/src/autofill/deprecated/overlay/iframe-content/__snapshots__/autofill-overlay-iframe.service.deprecated.spec.ts.snap
deleted file mode 100644
index 132bd968899..00000000000
--- a/apps/browser/src/autofill/deprecated/overlay/iframe-content/__snapshots__/autofill-overlay-iframe.service.deprecated.spec.ts.snap
+++ /dev/null
@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AutofillOverlayIframeService initOverlayIframe creates an aria alert element if the ariaAlert param is passed 1`] = `
-<div
-  aria-atomic="true"
-  aria-live="polite"
-  role="status"
-  style="position: absolute !important; top: -9999px !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none;"
->
-  aria alert
-</div>
-`;
-
-exports[`AutofillOverlayIframeService initOverlayIframe sets up the iframe's attributes 1`] = `
-<iframe
-  allowtransparency="true"
-  sandbox="allow-scripts"
-  src="chrome-extension://id/overlay/legacy-list.html"
-  style="all: initial !important; position: fixed !important; display: block !important; z-index: 2147483647 !important; line-height: 0 !important; overflow: hidden !important; transition: opacity 125ms ease-out 0s !important; visibility: visible !important; clip-path: none !important; pointer-events: auto !important; margin: 0px !important; padding: 0px !important; color-scheme: normal !important; opacity: 0 !important; height: 0px;"
-  tabindex="-1"
-  title="title"
-/>
-`;
diff --git a/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-button-iframe.deprecated.spec.ts b/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-button-iframe.deprecated.spec.ts
deleted file mode 100644
index 4652bb832d1..00000000000
--- a/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-button-iframe.deprecated.spec.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import AutofillOverlayButtonIframe from "./autofill-overlay-button-iframe.deprecated";
-
-describe("AutofillOverlayButtonIframe", () => {
-  window.customElements.define(
-    "autofill-overlay-button-iframe",
-    class extends HTMLElement {
-      constructor() {
-        super();
-        new AutofillOverlayButtonIframe(this);
-      }
-    },
-  );
-
-  afterAll(() => {
-    jest.clearAllMocks();
-  });
-
-  it("creates a custom element that is an instance of the AutofillIframeElement parent class", () => {
-    document.body.innerHTML = "<autofill-overlay-button-iframe></autofill-overlay-button-iframe>";
-
-    const iframe = document.querySelector("autofill-overlay-button-iframe");
-
-    expect(iframe).toBeInstanceOf(HTMLElement);
-    expect(iframe.shadowRoot).toBeDefined();
-  });
-});
diff --git a/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-button-iframe.deprecated.ts b/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-button-iframe.deprecated.ts
deleted file mode 100644
index 71b6235a895..00000000000
--- a/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-button-iframe.deprecated.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { AutofillOverlayPort } from "../../../enums/autofill-overlay.enum";
-
-import AutofillOverlayIframeElement from "./autofill-overlay-iframe-element.deprecated";
-
-class AutofillOverlayButtonIframe extends AutofillOverlayIframeElement {
-  constructor(element: HTMLElement) {
-    super(
-      element,
-      "overlay/button.html",
-      AutofillOverlayPort.Button,
-      {
-        background: "transparent",
-        border: "none",
-      },
-      chrome.i18n.getMessage("bitwardenOverlayButton"),
-      chrome.i18n.getMessage("bitwardenOverlayMenuAvailable"),
-    );
-  }
-}
-
-export default AutofillOverlayButtonIframe;
diff --git a/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-iframe-element.deprecated.spec.ts b/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-iframe-element.deprecated.spec.ts
deleted file mode 100644
index fd4347e4b06..00000000000
--- a/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-iframe-element.deprecated.spec.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import AutofillOverlayIframeElement from "./autofill-overlay-iframe-element.deprecated";
-import AutofillOverlayIframeService from "./autofill-overlay-iframe.service.deprecated";
-
-jest.mock("./autofill-overlay-iframe.service.deprecated");
-
-describe("AutofillOverlayIframeElement", () => {
-  window.customElements.define(
-    "autofill-overlay-iframe",
-    class extends HTMLElement {
-      constructor() {
-        super();
-        new AutofillOverlayIframeElement(
-          this,
-          "overlay/button.html",
-          "overlay/button",
-          { background: "transparent", border: "none" },
-          "bitwardenOverlayButton",
-        );
-      }
-    },
-  );
-
-  afterAll(() => {
-    jest.clearAllMocks();
-  });
-
-  it("creates a custom element that is an instance of the HTMLElement parent class", () => {
-    document.body.innerHTML = "<autofill-overlay-iframe></autofill-overlay-iframe>";
-
-    const iframe = document.querySelector("autofill-overlay-iframe");
-
-    expect(iframe).toBeInstanceOf(HTMLElement);
-  });
-
-  it("attaches a closed shadow DOM", () => {
-    document.body.innerHTML = "<autofill-overlay-iframe></autofill-overlay-iframe>";
-
-    const iframe = document.querySelector("autofill-overlay-iframe");
-
-    expect(iframe.shadowRoot).toBeNull();
-  });
-
-  it("instantiates the autofill overlay iframe service for each attached custom element", () => {
-    expect(AutofillOverlayIframeService).toHaveBeenCalledTimes(2);
-  });
-});
diff --git a/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-iframe-element.deprecated.ts b/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-iframe-element.deprecated.ts
deleted file mode 100644
index 90049440cca..00000000000
--- a/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-iframe-element.deprecated.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import AutofillOverlayIframeService from "./autofill-overlay-iframe.service.deprecated";
-
-class AutofillOverlayIframeElement {
-  constructor(
-    element: HTMLElement,
-    iframePath: string,
-    portName: string,
-    initStyles: Partial<CSSStyleDeclaration>,
-    iframeTitle: string,
-    ariaAlert?: string,
-  ) {
-    const shadow: ShadowRoot = element.attachShadow({ mode: "closed" });
-    const autofillOverlayIframeService = new AutofillOverlayIframeService(
-      iframePath,
-      portName,
-      shadow,
-    );
-    autofillOverlayIframeService.initOverlayIframe(initStyles, iframeTitle, ariaAlert);
-  }
-}
-
-export default AutofillOverlayIframeElement;
diff --git a/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-iframe.service.deprecated.spec.ts b/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-iframe.service.deprecated.spec.ts
deleted file mode 100644
index e79cba71763..00000000000
--- a/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-iframe.service.deprecated.spec.ts
+++ /dev/null
@@ -1,521 +0,0 @@
-import { mock } from "jest-mock-extended";
-
-import { EVENTS } from "@bitwarden/common/autofill/constants";
-import { ThemeType } from "@bitwarden/common/platform/enums";
-
-import { AutofillOverlayPort } from "../../../enums/autofill-overlay.enum";
-import { createPortSpyMock } from "../../../spec/autofill-mocks";
-import {
-  flushPromises,
-  sendPortMessage,
-  triggerPortOnDisconnectEvent,
-} from "../../../spec/testing-utils";
-
-import AutofillOverlayIframeService from "./autofill-overlay-iframe.service.deprecated";
-
-describe("AutofillOverlayIframeService", () => {
-  const iframePath = "overlay/legacy-list.html";
-  let autofillOverlayIframeService: AutofillOverlayIframeService;
-  let portSpy: chrome.runtime.Port;
-  let shadowAppendSpy: jest.SpyInstance;
-  let handlePortDisconnectSpy: jest.SpyInstance;
-  let handlePortMessageSpy: jest.SpyInstance;
-  let handleWindowMessageSpy: jest.SpyInstance;
-
-  beforeEach(() => {
-    const shadow = document.createElement("div").attachShadow({ mode: "open" });
-    autofillOverlayIframeService = new AutofillOverlayIframeService(
-      iframePath,
-      AutofillOverlayPort.Button,
-      shadow,
-    );
-    shadowAppendSpy = jest.spyOn(shadow, "appendChild");
-    handlePortDisconnectSpy = jest.spyOn(
-      autofillOverlayIframeService as any,
-      "handlePortDisconnect",
-    );
-    handlePortMessageSpy = jest.spyOn(autofillOverlayIframeService as any, "handlePortMessage");
-    handleWindowMessageSpy = jest.spyOn(autofillOverlayIframeService as any, "handleWindowMessage");
-    chrome.runtime.connect = jest.fn((connectInfo: chrome.runtime.ConnectInfo) =>
-      createPortSpyMock(connectInfo.name),
-    ) as unknown as typeof chrome.runtime.connect;
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe("initOverlayIframe", () => {
-    it("sets up the iframe's attributes", () => {
-      autofillOverlayIframeService.initOverlayIframe({ height: "0px" }, "title");
-
-      expect(autofillOverlayIframeService["iframe"]).toMatchSnapshot();
-    });
-
-    it("appends the iframe to the shadowDom", () => {
-      jest.spyOn(autofillOverlayIframeService["shadow"], "appendChild");
-
-      autofillOverlayIframeService.initOverlayIframe({}, "title");
-
-      expect(autofillOverlayIframeService["shadow"].appendChild).toBeCalledWith(
-        autofillOverlayIframeService["iframe"],
-      );
-    });
-
-    it("creates an aria alert element if the ariaAlert param is passed", () => {
-      const ariaAlert = "aria alert";
-      jest.spyOn(autofillOverlayIframeService as any, "createAriaAlertElement");
-
-      autofillOverlayIframeService.initOverlayIframe({}, "title", ariaAlert);
-
-      expect(autofillOverlayIframeService["createAriaAlertElement"]).toBeCalledWith(ariaAlert);
-      expect(autofillOverlayIframeService["ariaAlertElement"]).toMatchSnapshot();
-    });
-
-    describe("on load of the iframe source", () => {
-      beforeEach(() => {
-        autofillOverlayIframeService.initOverlayIframe({ height: "0px" }, "title", "ariaAlert");
-      });
-
-      it("sets up and connects the port message listener to the extension background", () => {
-        jest.spyOn(globalThis, "addEventListener");
-
-        autofillOverlayIframeService["iframe"].dispatchEvent(new Event(EVENTS.LOAD));
-        portSpy = autofillOverlayIframeService["port"];
-
-        expect(chrome.runtime.connect).toBeCalledWith({ name: AutofillOverlayPort.Button });
-        expect(portSpy.onDisconnect.addListener).toBeCalledWith(handlePortDisconnectSpy);
-        expect(portSpy.onMessage.addListener).toBeCalledWith(handlePortMessageSpy);
-        expect(globalThis.addEventListener).toBeCalledWith(EVENTS.MESSAGE, handleWindowMessageSpy);
-      });
-
-      it("skips announcing the aria alert if the aria alert element is not populated", () => {
-        jest.spyOn(globalThis, "setTimeout");
-        autofillOverlayIframeService["ariaAlertElement"] = undefined;
-
-        autofillOverlayIframeService["iframe"].dispatchEvent(new Event(EVENTS.LOAD));
-
-        expect(globalThis.setTimeout).not.toBeCalled();
-      });
-
-      it("announces the aria alert if the aria alert element is populated", () => {
-        jest.useFakeTimers();
-        jest.spyOn(globalThis, "setTimeout");
-        autofillOverlayIframeService["ariaAlertElement"] = document.createElement("div");
-        autofillOverlayIframeService["ariaAlertTimeout"] = setTimeout(jest.fn(), 2000);
-
-        autofillOverlayIframeService["iframe"].dispatchEvent(new Event(EVENTS.LOAD));
-
-        expect(globalThis.setTimeout).toBeCalled();
-        jest.advanceTimersByTime(2000);
-
-        expect(shadowAppendSpy).toBeCalledWith(autofillOverlayIframeService["ariaAlertElement"]);
-      });
-    });
-  });
-
-  describe("event listeners", () => {
-    beforeEach(() => {
-      autofillOverlayIframeService.initOverlayIframe({ height: "0px" }, "title", "ariaAlert");
-      autofillOverlayIframeService["iframe"].dispatchEvent(new Event(EVENTS.LOAD));
-      Object.defineProperty(autofillOverlayIframeService["iframe"], "contentWindow", {
-        value: {
-          postMessage: jest.fn(),
-        },
-        writable: true,
-      });
-      jest.spyOn(autofillOverlayIframeService["iframe"].contentWindow, "postMessage");
-      portSpy = autofillOverlayIframeService["port"];
-    });
-
-    describe("handlePortDisconnect", () => {
-      it("ignores ports that do not have the correct port name", () => {
-        portSpy.name = "wrong-port-name";
-        triggerPortOnDisconnectEvent(portSpy);
-
-        expect(autofillOverlayIframeService["port"]).not.toBeNull();
-      });
-
-      it("resets the iframe element's opacity, height, and display styles", () => {
-        triggerPortOnDisconnectEvent(portSpy);
-
-        expect(autofillOverlayIframeService["iframe"].style.opacity).toBe("0");
-        expect(autofillOverlayIframeService["iframe"].style.height).toBe("0px");
-        expect(autofillOverlayIframeService["iframe"].style.display).toBe("block");
-      });
-
-      it("removes the global message listener", () => {
-        jest.spyOn(globalThis, "removeEventListener");
-
-        triggerPortOnDisconnectEvent(portSpy);
-
-        expect(globalThis.removeEventListener).toBeCalledWith(
-          EVENTS.MESSAGE,
-          handleWindowMessageSpy,
-        );
-      });
-
-      it("removes the port's onMessage listener", () => {
-        triggerPortOnDisconnectEvent(portSpy);
-
-        expect(portSpy.onMessage.removeListener).toBeCalledWith(handlePortMessageSpy);
-      });
-
-      it("removes the port's onDisconnect listener", () => {
-        triggerPortOnDisconnectEvent(portSpy);
-
-        expect(portSpy.onDisconnect.removeListener).toBeCalledWith(handlePortDisconnectSpy);
-      });
-
-      it("disconnects the port", () => {
-        triggerPortOnDisconnectEvent(portSpy);
-
-        expect(portSpy.disconnect).toBeCalled();
-        expect(autofillOverlayIframeService["port"]).toBeNull();
-      });
-    });
-
-    describe("handlePortMessage", () => {
-      it("ignores port messages that do not correlate to the correct port name", () => {
-        portSpy.name = "wrong-port-name";
-        sendPortMessage(portSpy, {});
-
-        expect(autofillOverlayIframeService["iframe"].contentWindow.postMessage).not.toBeCalled();
-      });
-
-      it("passes on the message to the iframe if the message is not registered with the message handlers", () => {
-        const message = { command: "unregisteredMessage" };
-
-        sendPortMessage(portSpy, message);
-
-        expect(autofillOverlayIframeService["iframe"].contentWindow.postMessage).toBeCalledWith(
-          message,
-          "*",
-        );
-      });
-
-      it("handles port messages that are registered with the message handlers and does not pass the message on to the iframe", () => {
-        jest.spyOn(autofillOverlayIframeService as any, "updateIframePosition");
-
-        sendPortMessage(portSpy, { command: "updateIframePosition" });
-
-        expect(autofillOverlayIframeService["iframe"].contentWindow.postMessage).not.toBeCalled();
-      });
-
-      describe("initializing the overlay list", () => {
-        let updateElementStylesSpy: jest.SpyInstance;
-
-        beforeEach(() => {
-          updateElementStylesSpy = jest.spyOn(
-            autofillOverlayIframeService as any,
-            "updateElementStyles",
-          );
-        });
-
-        it("passes the message on to the iframe element", () => {
-          const message = {
-            command: "initAutofillOverlayList",
-            theme: ThemeType.Light,
-          };
-
-          sendPortMessage(portSpy, message);
-
-          expect(updateElementStylesSpy).not.toBeCalled();
-          expect(autofillOverlayIframeService["iframe"].contentWindow.postMessage).toBeCalledWith(
-            message,
-            "*",
-          );
-        });
-
-        it("sets a light theme based on the user's system preferences", () => {
-          window.matchMedia = jest.fn(() => mock<MediaQueryList>({ matches: false }));
-          const message = {
-            command: "initAutofillOverlayList",
-            theme: ThemeType.System,
-          };
-
-          sendPortMessage(portSpy, message);
-
-          expect(window.matchMedia).toHaveBeenCalledWith("(prefers-color-scheme: dark)");
-          expect(autofillOverlayIframeService["iframe"].contentWindow.postMessage).toBeCalledWith(
-            {
-              command: "initAutofillOverlayList",
-              theme: ThemeType.Light,
-            },
-            "*",
-          );
-        });
-
-        it("sets a dark theme based on the user's system preferences", () => {
-          window.matchMedia = jest.fn(() => mock<MediaQueryList>({ matches: true }));
-          const message = {
-            command: "initAutofillOverlayList",
-            theme: ThemeType.System,
-          };
-
-          sendPortMessage(portSpy, message);
-
-          expect(window.matchMedia).toHaveBeenCalledWith("(prefers-color-scheme: dark)");
-          expect(autofillOverlayIframeService["iframe"].contentWindow.postMessage).toBeCalledWith(
-            {
-              command: "initAutofillOverlayList",
-              theme: ThemeType.Dark,
-            },
-            "*",
-          );
-        });
-
-        it("updates the border to match the `dark` theme", () => {
-          const message = {
-            command: "initAutofillOverlayList",
-            theme: ThemeType.Dark,
-          };
-
-          sendPortMessage(portSpy, message);
-
-          expect(updateElementStylesSpy).toBeCalledWith(autofillOverlayIframeService["iframe"], {
-            borderColor: "#4c525f",
-          });
-        });
-      });
-
-      describe("updating the iframe's position", () => {
-        beforeEach(() => {
-          jest.spyOn(globalThis.document, "hasFocus").mockReturnValue(true);
-        });
-
-        it("ignores updating the iframe position if the document does not have focus", () => {
-          jest.spyOn(autofillOverlayIframeService as any, "updateElementStyles");
-          jest.spyOn(globalThis.document, "hasFocus").mockReturnValue(false);
-
-          sendPortMessage(portSpy, {
-            command: "updateIframePosition",
-            styles: { top: 100, left: 100 },
-          });
-
-          expect(autofillOverlayIframeService["updateElementStyles"]).not.toBeCalled();
-        });
-
-        it("updates the iframe position if the document has focus", () => {
-          const styles = { top: "100px", left: "100px" };
-
-          sendPortMessage(portSpy, {
-            command: "updateIframePosition",
-            styles,
-          });
-
-          expect(autofillOverlayIframeService["iframe"].style.top).toBe(styles.top);
-          expect(autofillOverlayIframeService["iframe"].style.left).toBe(styles.left);
-        });
-
-        it("fades the iframe element in after positioning the element", () => {
-          jest.useFakeTimers();
-          const styles = { top: "100px", left: "100px" };
-
-          sendPortMessage(portSpy, {
-            command: "updateIframePosition",
-            styles,
-          });
-
-          expect(autofillOverlayIframeService["iframe"].style.opacity).toBe("0");
-          jest.advanceTimersByTime(10);
-          expect(autofillOverlayIframeService["iframe"].style.opacity).toBe("1");
-        });
-
-        it("announces the opening of the iframe using an aria alert", () => {
-          jest.useFakeTimers();
-          const styles = { top: "100px", left: "100px" };
-
-          sendPortMessage(portSpy, {
-            command: "updateIframePosition",
-            styles,
-          });
-
-          jest.advanceTimersByTime(2000);
-          expect(shadowAppendSpy).toBeCalledWith(autofillOverlayIframeService["ariaAlertElement"]);
-        });
-      });
-
-      it("updates the visibility of the iframe", () => {
-        sendPortMessage(portSpy, {
-          command: "updateOverlayHidden",
-          styles: { display: "none" },
-        });
-
-        expect(autofillOverlayIframeService["iframe"].style.display).toBe("none");
-      });
-    });
-
-    describe("handleWindowMessage", () => {
-      it("ignores window messages when the port is not set", () => {
-        autofillOverlayIframeService["port"] = null;
-
-        globalThis.dispatchEvent(new MessageEvent("message", { data: {} }));
-
-        expect(autofillOverlayIframeService["port"]).toBeNull();
-      });
-
-      it("ignores window messages whose source is not the iframe's content window", () => {
-        globalThis.dispatchEvent(
-          new MessageEvent("message", {
-            data: {},
-            source: window,
-          }),
-        );
-
-        expect(portSpy.postMessage).not.toBeCalled();
-      });
-
-      it("ignores window messages whose origin is not from the extension origin", () => {
-        globalThis.dispatchEvent(
-          new MessageEvent("message", {
-            data: {},
-            source: autofillOverlayIframeService["iframe"].contentWindow,
-            origin: "https://www.google.com",
-          }),
-        );
-
-        expect(portSpy.postMessage).not.toBeCalled();
-      });
-
-      it("passes the window message from an iframe element to the background port", () => {
-        globalThis.dispatchEvent(
-          new MessageEvent("message", {
-            data: { command: "not-a-handled-command" },
-            source: autofillOverlayIframeService["iframe"].contentWindow,
-            origin: "chrome-extension://id",
-          }),
-        );
-
-        expect(portSpy.postMessage).toBeCalledWith({ command: "not-a-handled-command" });
-      });
-
-      it("updates the overlay list height", () => {
-        globalThis.dispatchEvent(
-          new MessageEvent("message", {
-            data: { command: "updateAutofillOverlayListHeight", styles: { height: "300px" } },
-            source: autofillOverlayIframeService["iframe"].contentWindow,
-            origin: "chrome-extension://id",
-          }),
-        );
-
-        expect(autofillOverlayIframeService["iframe"].style.height).toBe("300px");
-      });
-
-      describe("getPageColorScheme window message", () => {
-        afterEach(() => {
-          globalThis.document.head.innerHTML = "";
-        });
-
-        it("gets and updates the overlay page color scheme", () => {
-          const colorSchemeMetaTag = globalThis.document.createElement("meta");
-          colorSchemeMetaTag.setAttribute("name", "color-scheme");
-          colorSchemeMetaTag.setAttribute("content", "dark");
-          globalThis.document.head.append(colorSchemeMetaTag);
-          globalThis.dispatchEvent(
-            new MessageEvent("message", {
-              data: { command: "getPageColorScheme" },
-              source: autofillOverlayIframeService["iframe"].contentWindow,
-              origin: "chrome-extension://id",
-            }),
-          );
-
-          expect(autofillOverlayIframeService["iframe"].contentWindow.postMessage).toBeCalledWith(
-            { command: "updateOverlayPageColorScheme", colorScheme: "dark" },
-            "*",
-          );
-        });
-
-        it("sends a normal color scheme if the color scheme meta tag is not present", () => {
-          globalThis.dispatchEvent(
-            new MessageEvent("message", {
-              data: { command: "getPageColorScheme" },
-              source: autofillOverlayIframeService["iframe"].contentWindow,
-              origin: "chrome-extension://id",
-            }),
-          );
-
-          expect(autofillOverlayIframeService["iframe"].contentWindow.postMessage).toBeCalledWith(
-            { command: "updateOverlayPageColorScheme", colorScheme: "normal" },
-            "*",
-          );
-        });
-      });
-    });
-  });
-
-  describe("mutation observer", () => {
-    beforeEach(() => {
-      autofillOverlayIframeService.initOverlayIframe({ height: "0px" }, "title", "ariaAlert");
-      autofillOverlayIframeService["iframe"].dispatchEvent(new Event(EVENTS.LOAD));
-      portSpy = autofillOverlayIframeService["port"];
-    });
-
-    it("skips handling found mutations if excessive mutations are triggering", async () => {
-      jest.useFakeTimers();
-      jest
-        .spyOn(
-          autofillOverlayIframeService as any,
-          "isTriggeringExcessiveMutationObserverIterations",
-        )
-        .mockReturnValue(true);
-      jest.spyOn(autofillOverlayIframeService as any, "updateElementStyles");
-
-      autofillOverlayIframeService["iframe"].style.visibility = "hidden";
-      await flushPromises();
-
-      expect(autofillOverlayIframeService["updateElementStyles"]).not.toBeCalled();
-    });
-
-    it("reverts any styles changes made directly to the iframe", async () => {
-      jest.useFakeTimers();
-
-      autofillOverlayIframeService["iframe"].style.visibility = "hidden";
-      await flushPromises();
-
-      expect(autofillOverlayIframeService["iframe"].style.visibility).toBe("visible");
-    });
-
-    it("force closes the autofill overlay if more than 9 foreign mutations are triggered", async () => {
-      jest.useFakeTimers();
-      autofillOverlayIframeService["foreignMutationsCount"] = 10;
-
-      autofillOverlayIframeService["iframe"].src = "http://malicious-site.com";
-      await flushPromises();
-
-      expect(portSpy.postMessage).toBeCalledWith({ command: "forceCloseAutofillOverlay" });
-    });
-
-    it("force closes the autofill overlay if excessive mutations are being triggered", async () => {
-      jest.useFakeTimers();
-      autofillOverlayIframeService["mutationObserverIterations"] = 20;
-
-      autofillOverlayIframeService["iframe"].src = "http://malicious-site.com";
-      await flushPromises();
-
-      expect(portSpy.postMessage).toBeCalledWith({ command: "forceCloseAutofillOverlay" });
-    });
-
-    it("resets the excessive mutations and foreign mutation counters", async () => {
-      jest.useFakeTimers();
-      autofillOverlayIframeService["foreignMutationsCount"] = 9;
-      autofillOverlayIframeService["mutationObserverIterations"] = 19;
-
-      autofillOverlayIframeService["iframe"].src = "http://malicious-site.com";
-      jest.advanceTimersByTime(2001);
-      await flushPromises();
-
-      expect(autofillOverlayIframeService["foreignMutationsCount"]).toBe(0);
-      expect(autofillOverlayIframeService["mutationObserverIterations"]).toBe(0);
-    });
-
-    it("resets any mutated default attributes for the iframe", async () => {
-      jest.useFakeTimers();
-
-      autofillOverlayIframeService["iframe"].title = "some-other-title";
-      await flushPromises();
-
-      expect(autofillOverlayIframeService["iframe"].title).toBe("title");
-    });
-  });
-});
diff --git a/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-iframe.service.deprecated.ts b/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-iframe.service.deprecated.ts
deleted file mode 100644
index e0df9eb60b6..00000000000
--- a/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-iframe.service.deprecated.ts
+++ /dev/null
@@ -1,429 +0,0 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
-import { EVENTS } from "@bitwarden/common/autofill/constants";
-import { ThemeTypes } from "@bitwarden/common/platform/enums";
-
-import { setElementStyles } from "../../../utils";
-import {
-  BackgroundPortMessageHandlers,
-  AutofillOverlayIframeService as AutofillOverlayIframeServiceInterface,
-  AutofillOverlayIframeExtensionMessage,
-  AutofillOverlayIframeWindowMessageHandlers,
-} from "../abstractions/autofill-overlay-iframe.service.deprecated";
-
-class AutofillOverlayIframeService implements AutofillOverlayIframeServiceInterface {
-  private port: chrome.runtime.Port | null = null;
-  private extensionOriginsSet: Set<string>;
-  private iframeMutationObserver: MutationObserver;
-  private iframe: HTMLIFrameElement;
-  private ariaAlertElement: HTMLDivElement;
-  private ariaAlertTimeout: number | NodeJS.Timeout;
-  private iframeStyles: Partial<CSSStyleDeclaration> = {
-    all: "initial",
-    position: "fixed",
-    display: "block",
-    zIndex: "2147483647",
-    lineHeight: "0",
-    overflow: "hidden",
-    transition: "opacity 125ms ease-out 0s",
-    visibility: "visible",
-    clipPath: "none",
-    pointerEvents: "auto",
-    margin: "0",
-    padding: "0",
-    colorScheme: "normal",
-    opacity: "0",
-  };
-  private defaultIframeAttributes: Record<string, string> = {
-    src: "",
-    title: "",
-    sandbox: "allow-scripts",
-    allowtransparency: "true",
-    tabIndex: "-1",
-  };
-  private foreignMutationsCount = 0;
-  private mutationObserverIterations = 0;
-  private mutationObserverIterationsResetTimeout: number | NodeJS.Timeout;
-  private readonly windowMessageHandlers: AutofillOverlayIframeWindowMessageHandlers = {
-    updateAutofillOverlayListHeight: (message) =>
-      this.updateElementStyles(this.iframe, message.styles),
-    getPageColorScheme: () => this.updateOverlayPageColorScheme(),
-  };
-  private readonly backgroundPortMessageHandlers: BackgroundPortMessageHandlers = {
-    initAutofillOverlayList: ({ message }) => this.initAutofillOverlayList(message),
-    updateIframePosition: ({ message }) => this.updateIframePosition(message.styles),
-    updateOverlayHidden: ({ message }) => this.updateElementStyles(this.iframe, message.styles),
-  };
-
-  constructor(
-    private iframePath: string,
-    private portName: string,
-    private shadow: ShadowRoot,
-  ) {
-    this.extensionOriginsSet = new Set([
-      chrome.runtime.getURL("").slice(0, -1).toLowerCase(), // Remove the trailing slash and normalize the extension url to lowercase
-      "null",
-    ]);
-
-    this.iframeMutationObserver = new MutationObserver(this.handleMutations);
-  }
-
-  /**
-   * Handles initialization of the iframe which includes applying initial styles
-   * to the iframe, setting the source, and adding listener that connects the
-   * iframe to the background script each time it loads. Can conditionally
-   * create an aria alert element to announce to screen readers when the iframe
-   * is loaded. The end result is append to the shadowDOM of the custom element
-   * that is declared.
-   *
-   *
-   * @param initStyles - Initial styles to apply to the iframe
-   * @param iframeTitle - Title to apply to the iframe
-   * @param ariaAlert - Text to announce to screen readers when the iframe is loaded
-   */
-  initOverlayIframe(
-    initStyles: Partial<CSSStyleDeclaration>,
-    iframeTitle: string,
-    ariaAlert?: string,
-  ) {
-    this.defaultIframeAttributes.src = chrome.runtime.getURL(this.iframePath);
-    this.defaultIframeAttributes.title = iframeTitle;
-
-    this.iframe = globalThis.document.createElement("iframe");
-    this.updateElementStyles(this.iframe, { ...this.iframeStyles, ...initStyles });
-    for (const [attribute, value] of Object.entries(this.defaultIframeAttributes)) {
-      this.iframe.setAttribute(attribute, value);
-    }
-    this.iframe.addEventListener(EVENTS.LOAD, this.setupPortMessageListener);
-
-    if (ariaAlert) {
-      this.createAriaAlertElement(ariaAlert);
-    }
-
-    this.shadow.appendChild(this.iframe);
-  }
-
-  /**
-   * Creates an aria alert element that is used to announce to screen readers
-   * when the iframe is loaded.
-   *
-   * @param ariaAlertText - Text to announce to screen readers when the iframe is loaded
-   */
-  private createAriaAlertElement(ariaAlertText: string) {
-    this.ariaAlertElement = globalThis.document.createElement("div");
-    this.ariaAlertElement.setAttribute("role", "status");
-    this.ariaAlertElement.setAttribute("aria-live", "polite");
-    this.ariaAlertElement.setAttribute("aria-atomic", "true");
-    this.updateElementStyles(this.ariaAlertElement, {
-      position: "absolute",
-      top: "-9999px",
-      left: "-9999px",
-      width: "1px",
-      height: "1px",
-      overflow: "hidden",
-      opacity: "0",
-      pointerEvents: "none",
-    });
-    this.ariaAlertElement.textContent = ariaAlertText;
-  }
-
-  /**
-   * Sets up the port message listener to the extension background script. This
-   * listener is used to communicate between the iframe and the background script.
-   * This also facilitates announcing to screen readers when the iframe is loaded.
-   */
-  private setupPortMessageListener = () => {
-    this.port = chrome.runtime.connect({ name: this.portName });
-    this.port.onDisconnect.addListener(this.handlePortDisconnect);
-    this.port.onMessage.addListener(this.handlePortMessage);
-    globalThis.addEventListener(EVENTS.MESSAGE, this.handleWindowMessage);
-
-    this.announceAriaAlert();
-  };
-
-  /**
-   * Announces the aria alert element to screen readers when the iframe is loaded.
-   */
-  private announceAriaAlert() {
-    if (!this.ariaAlertElement) {
-      return;
-    }
-
-    this.ariaAlertElement.remove();
-    if (this.ariaAlertTimeout) {
-      clearTimeout(this.ariaAlertTimeout);
-    }
-
-    this.ariaAlertTimeout = setTimeout(() => this.shadow.appendChild(this.ariaAlertElement), 2000);
-  }
-
-  /**
-   * Handles disconnecting the port message listener from the extension background
-   * script. This also removes the listener that facilitates announcing to screen
-   * readers when the iframe is loaded.
-   *
-   * @param port - The port that is disconnected
-   */
-  private handlePortDisconnect = (port: chrome.runtime.Port) => {
-    if (port.name !== this.portName) {
-      return;
-    }
-
-    this.updateElementStyles(this.iframe, { opacity: "0", height: "0px", display: "block" });
-    globalThis.removeEventListener("message", this.handleWindowMessage);
-    this.unobserveIframe();
-    this.port?.onMessage.removeListener(this.handlePortMessage);
-    this.port?.onDisconnect.removeListener(this.handlePortDisconnect);
-    this.port?.disconnect();
-    this.port = null;
-  };
-
-  /**
-   * Handles messages sent from the extension background script to the iframe.
-   * Triggers behavior within the iframe as well as on the custom element that
-   * contains the iframe element.
-   *
-   * @param message
-   * @param port
-   */
-  private handlePortMessage = (
-    message: AutofillOverlayIframeExtensionMessage,
-    port: chrome.runtime.Port,
-  ) => {
-    if (port.name !== this.portName) {
-      return;
-    }
-
-    if (this.backgroundPortMessageHandlers[message.command]) {
-      this.backgroundPortMessageHandlers[message.command]({ message, port });
-      return;
-    }
-
-    this.iframe.contentWindow?.postMessage(message, "*");
-  };
-
-  /**
-   * Handles messages sent from the iframe to the extension background script.
-   * Will adjust the border element to fit the user's set theme.
-   *
-   * @param message - The message sent from the iframe
-   */
-  private initAutofillOverlayList(message: AutofillOverlayIframeExtensionMessage) {
-    const { theme } = message;
-    let borderColor: string;
-    let verifiedTheme = theme;
-    if (verifiedTheme === ThemeTypes.System) {
-      verifiedTheme = globalThis.matchMedia("(prefers-color-scheme: dark)").matches
-        ? ThemeTypes.Dark
-        : ThemeTypes.Light;
-    }
-
-    if (verifiedTheme === ThemeTypes.Dark) {
-      borderColor = "#4c525f";
-    }
-    if (borderColor) {
-      this.updateElementStyles(this.iframe, { borderColor });
-    }
-
-    message.theme = verifiedTheme;
-    this.iframe.contentWindow?.postMessage(message, "*");
-  }
-
-  /**
-   * Updates the position of the iframe element. Will also announce
-   * to screen readers that the iframe is open.
-   *
-   * @param position - The position styles to apply to the iframe
-   */
-  private updateIframePosition(position: Partial<CSSStyleDeclaration>) {
-    if (!globalThis.document.hasFocus()) {
-      return;
-    }
-
-    this.updateElementStyles(this.iframe, position);
-    setTimeout(() => this.updateElementStyles(this.iframe, { opacity: "1" }), 0);
-    this.announceAriaAlert();
-  }
-
-  /**
-   * Gets the page color scheme meta tag and sends a message to the iframe
-   * to update its color scheme. Will default to "normal" if the meta tag
-   * does not exist.
-   */
-  private updateOverlayPageColorScheme() {
-    const colorSchemeValue = globalThis.document
-      .querySelector("meta[name='color-scheme']")
-      ?.getAttribute("content");
-
-    this.iframe.contentWindow?.postMessage(
-      { command: "updateOverlayPageColorScheme", colorScheme: colorSchemeValue || "normal" },
-      "*",
-    );
-  }
-
-  /**
-   * Handles messages sent from the iframe. If the message does not have a
-   * specified handler set, it passes the message to the background script.
-   *
-   * @param event - The message event
-   */
-  private handleWindowMessage = (event: MessageEvent) => {
-    if (
-      !this.port ||
-      event.source !== this.iframe.contentWindow ||
-      !this.isFromExtensionOrigin(event.origin.toLowerCase())
-    ) {
-      return;
-    }
-
-    const message = event.data;
-    if (this.windowMessageHandlers[message.command]) {
-      this.windowMessageHandlers[message.command](message);
-      return;
-    }
-
-    this.port.postMessage(event.data);
-  };
-
-  /**
-   * Accepts an element and updates the styles for that element. This method
-   * will also unobserve the element if it is the iframe element. This is
-   * done to ensure that we do not trigger the mutation observer when we
-   * update the styles for the iframe.
-   *
-   * @param customElement - The element to update the styles for
-   * @param styles - The styles to apply to the element
-   */
-  private updateElementStyles(customElement: HTMLElement, styles: Partial<CSSStyleDeclaration>) {
-    if (!customElement) {
-      return;
-    }
-
-    this.unobserveIframe();
-
-    setElementStyles(customElement, styles, true);
-    this.iframeStyles = { ...this.iframeStyles, ...styles };
-
-    this.observeIframe();
-  }
-
-  /**
-   * Chrome returns null for any sandboxed iframe sources.
-   * Firefox references the extension URI as its origin.
-   * Any other origin value is a security risk.
-   *
-   * @param messageOrigin - The origin of the window message
-   */
-  private isFromExtensionOrigin(messageOrigin: string): boolean {
-    return this.extensionOriginsSet.has(messageOrigin);
-  }
-
-  /**
-   * Handles mutations to the iframe element. The ensures that the iframe
-   * element's styles are not modified by a third party source.
-   *
-   * @param mutations - The mutations to the iframe element
-   */
-  private handleMutations = (mutations: MutationRecord[]) => {
-    if (this.isTriggeringExcessiveMutationObserverIterations()) {
-      return;
-    }
-
-    for (let index = 0; index < mutations.length; index++) {
-      const mutation = mutations[index];
-      if (mutation.type !== "attributes") {
-        continue;
-      }
-
-      const element = mutation.target as HTMLElement;
-      if (mutation.attributeName !== "style") {
-        this.handleElementAttributeMutation(element);
-
-        continue;
-      }
-
-      this.iframe.removeAttribute("style");
-      this.updateElementStyles(this.iframe, this.iframeStyles);
-    }
-  };
-
-  /**
-   * Handles mutations to the iframe element's attributes. This ensures that
-   * the iframe element's attributes are not modified by a third party source.
-   *
-   * @param element - The element to handle attribute mutations for
-   */
-  private handleElementAttributeMutation(element: HTMLElement) {
-    const attributes = Array.from(element.attributes);
-    for (let attributeIndex = 0; attributeIndex < attributes.length; attributeIndex++) {
-      const attribute = attributes[attributeIndex];
-      if (attribute.name === "style") {
-        continue;
-      }
-
-      if (this.foreignMutationsCount >= 10) {
-        this.port?.postMessage({ command: "forceCloseAutofillOverlay" });
-        break;
-      }
-
-      const defaultIframeAttribute = this.defaultIframeAttributes[attribute.name];
-      if (!defaultIframeAttribute) {
-        this.iframe.removeAttribute(attribute.name);
-        this.foreignMutationsCount++;
-        continue;
-      }
-
-      if (attribute.value === defaultIframeAttribute) {
-        continue;
-      }
-
-      this.iframe.setAttribute(attribute.name, defaultIframeAttribute);
-      this.foreignMutationsCount++;
-    }
-  }
-
-  /**
-   * Observes the iframe element for mutations to its style attribute.
-   */
-  private observeIframe() {
-    this.iframeMutationObserver.observe(this.iframe, { attributes: true });
-  }
-
-  /**
-   * Unobserves the iframe element for mutations to its style attribute.
-   */
-  private unobserveIframe() {
-    this.iframeMutationObserver?.disconnect();
-  }
-
-  /**
-   * Identifies if the mutation observer is triggering excessive iterations.
-   * Will remove the autofill overlay if any set mutation observer is
-   * triggering excessive iterations.
-   */
-  private isTriggeringExcessiveMutationObserverIterations() {
-    const resetCounters = () => {
-      this.mutationObserverIterations = 0;
-      this.foreignMutationsCount = 0;
-    };
-
-    if (this.mutationObserverIterationsResetTimeout) {
-      clearTimeout(this.mutationObserverIterationsResetTimeout);
-    }
-
-    this.mutationObserverIterations++;
-    this.mutationObserverIterationsResetTimeout = setTimeout(() => resetCounters(), 2000);
-
-    if (this.mutationObserverIterations > 20) {
-      clearTimeout(this.mutationObserverIterationsResetTimeout);
-      resetCounters();
-      this.port?.postMessage({ command: "forceCloseAutofillOverlay" });
-
-      return true;
-    }
-
-    return false;
-  }
-}
-
-export default AutofillOverlayIframeService;
diff --git a/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-list-iframe.deprecated.spec.ts b/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-list-iframe.deprecated.spec.ts
deleted file mode 100644
index 7daaaaef7d6..00000000000
--- a/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-list-iframe.deprecated.spec.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import AutofillOverlayListIframe from "./autofill-overlay-list-iframe.deprecated";
-
-describe("AutofillOverlayListIframe", () => {
-  window.customElements.define(
-    "autofill-overlay-list-iframe",
-    class extends HTMLElement {
-      constructor() {
-        super();
-        new AutofillOverlayListIframe(this);
-      }
-    },
-  );
-
-  afterAll(() => {
-    jest.clearAllMocks();
-  });
-
-  it("creates a custom element that is an instance of the AutofillIframeElement parent class", () => {
-    document.body.innerHTML = "<autofill-overlay-list-iframe></autofill-overlay-list-iframe>";
-
-    const iframe = document.querySelector("autofill-overlay-list-iframe");
-
-    expect(iframe).toBeInstanceOf(HTMLElement);
-    expect(iframe.shadowRoot).toBeDefined();
-  });
-});
diff --git a/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-list-iframe.deprecated.ts b/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-list-iframe.deprecated.ts
deleted file mode 100644
index fcfa007aec2..00000000000
--- a/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-list-iframe.deprecated.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { AutofillOverlayPort } from "../../../enums/autofill-overlay.enum";
-
-import AutofillOverlayIframeElement from "./autofill-overlay-iframe-element.deprecated";
-
-class AutofillOverlayListIframe extends AutofillOverlayIframeElement {
-  constructor(element: HTMLElement) {
-    super(
-      element,
-      "overlay/list.html",
-      AutofillOverlayPort.List,
-      {
-        height: "0px",
-        minWidth: "250px",
-        maxHeight: "180px",
-        boxShadow: "rgba(0, 0, 0, 0.1) 2px 4px 6px 0px",
-        borderRadius: "4px",
-        borderWidth: "1px",
-        borderStyle: "solid",
-        borderColor: "rgb(206, 212, 220)",
-      },
-      chrome.i18n.getMessage("bitwardenVault"),
-    );
-  }
-}
-
-export default AutofillOverlayListIframe;
diff --git a/apps/browser/src/autofill/deprecated/overlay/pages/button/__snapshots__/autofill-overlay-button.deprecated.spec.ts.snap b/apps/browser/src/autofill/deprecated/overlay/pages/button/__snapshots__/autofill-overlay-button.deprecated.spec.ts.snap
deleted file mode 100644
index 61a8b49df29..00000000000
--- a/apps/browser/src/autofill/deprecated/overlay/pages/button/__snapshots__/autofill-overlay-button.deprecated.spec.ts.snap
+++ /dev/null
@@ -1,83 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AutofillOverlayButton initAutofillOverlayButton creates the button element with the locked icon when the user's auth status is not Unlocked 1`] = `
-<button
-  aria-label="toggleBitwardenVaultOverlay"
-  class="overlay-button"
-  tabindex="-1"
-  type="button"
->
-  <svg
-    aria-hidden="true"
-    class="overlay-button-svg-icon logo-locked-icon"
-    fill="none"
-    height="16"
-    viewBox="0 0 16 16"
-    width="16"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g
-      clip-path="url(#a)"
-    >
-      <path
-        d="M12.66.175A.566.566 0 0 0 12.25 0H1.75a.559.559 0 0 0-.409.175.561.561 0 0 0-.175.41v7c.002.532.105 1.06.305 1.554.189.488.444.948.756 1.368.322.42.682.81 1.076 1.163.365.335.75.649 1.152.939.35.248.718.483 1.103.706.385.222.656.372.815.45.16.08.29.141.386.182A.53.53 0 0 0 7 14a.509.509 0 0 0 .238-.055c.098-.043.225-.104.387-.182.162-.079.438-.23.816-.45.378-.222.75-.459 1.102-.707.403-.29.788-.604 1.154-.939a8.435 8.435 0 0 0 1.076-1.163c.312-.42.567-.88.757-1.367a4.19 4.19 0 0 0 .304-1.555v-7a.55.55 0 0 0-.174-.407Z"
-        fill="#175DDC"
-      />
-      <path
-        d="M7 12.365s4.306-2.18 4.306-4.717V1.5H7v10.865Z"
-        fill="#fff"
-      />
-      <circle
-        cx="12.889"
-        cy="12.889"
-        fill="#F8F9FA"
-        r="4.889"
-      />
-      <path
-        d="M11.26 11.717h2.37v-.848c0-.313-.116-.58-.348-.8a1.17 1.17 0 0 0-.838-.332c-.327 0-.606.11-.838.332a1.066 1.066 0 0 0-.347.8v.848Zm3.851.424v2.546a.4.4 0 0 1-.13.3.44.44 0 0 1-.314.124h-4.445a.44.44 0 0 1-.315-.124.4.4 0 0 1-.13-.3V12.14a.4.4 0 0 1 .13-.3.44.44 0 0 1 .315-.124h.148v-.848c0-.542.204-1.008.612-1.397a2.044 2.044 0 0 1 1.462-.583c.568 0 1.056.194 1.463.583.408.39.611.855.611 1.397v.848h.149a.44.44 0 0 1 .315.124.4.4 0 0 1 .13.3Z"
-        fill="#555"
-      />
-    </g>
-    <defs>
-      <clippath
-        id="a"
-      >
-        <rect
-          fill="#fff"
-          height="16"
-          rx="2"
-          width="16"
-        />
-      </clippath>
-    </defs>
-  </svg>
-</button>
-`;
-
-exports[`AutofillOverlayButton initAutofillOverlayButton creates the button element with the normal icon when the user's auth status is Unlocked  1`] = `
-<button
-  aria-label="toggleBitwardenVaultOverlay"
-  class="overlay-button"
-  tabindex="-1"
-  type="button"
->
-  <svg
-    aria-hidden="true"
-    class="overlay-button-svg-icon logo-icon"
-    fill="none"
-    height="14"
-    viewBox="0 0 14 14"
-    width="14"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M12.66.175A.566.566 0 0 0 12.25 0H1.75a.559.559 0 0 0-.409.175.561.561 0 0 0-.175.41v7c.002.532.105 1.06.305 1.554.189.488.444.948.756 1.368.322.42.682.81 1.076 1.163.365.335.75.649 1.152.939.35.248.718.483 1.103.706.385.222.656.372.815.45.16.08.29.141.386.182A.53.53 0 0 0 7 14a.509.509 0 0 0 .238-.055c.098-.043.225-.104.387-.182.162-.079.438-.23.816-.45.378-.222.75-.459 1.102-.707.403-.29.788-.604 1.154-.939a8.435 8.435 0 0 0 1.076-1.163c.312-.42.567-.88.757-1.367a4.19 4.19 0 0 0 .304-1.555v-7a.55.55 0 0 0-.174-.407Z"
-      fill="#175DDC"
-    />
-    <path
-      d="M7 12.365s4.306-2.18 4.306-4.717V1.5H7v10.865Z"
-      fill="#fff"
-    />
-  </svg>
-</button>
-`;
diff --git a/apps/browser/src/autofill/deprecated/overlay/pages/button/autofill-overlay-button.deprecated.spec.ts b/apps/browser/src/autofill/deprecated/overlay/pages/button/autofill-overlay-button.deprecated.spec.ts
deleted file mode 100644
index 7623a2ca97e..00000000000
--- a/apps/browser/src/autofill/deprecated/overlay/pages/button/autofill-overlay-button.deprecated.spec.ts
+++ /dev/null
@@ -1,135 +0,0 @@
-import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
-
-import { postWindowMessage } from "../../../../spec/testing-utils";
-import { InitAutofillOverlayButtonMessage } from "../../abstractions/autofill-overlay-button.deprecated";
-
-import AutofillOverlayButton from "./autofill-overlay-button.deprecated";
-
-const overlayPagesTranslations = {
-  locale: "en",
-  buttonPageTitle: "buttonPageTitle",
-  listPageTitle: "listPageTitle",
-  opensInANewWindow: "opensInANewWindow",
-  toggleBitwardenVaultOverlay: "toggleBitwardenVaultOverlay",
-  unlockYourAccount: "unlockYourAccount",
-  unlockAccount: "unlockAccount",
-  fillCredentialsFor: "fillCredentialsFor",
-  partialUsername: "partialUsername",
-  view: "view",
-  noItemsToShow: "noItemsToShow",
-  newItem: "newItem",
-  addNewVaultItem: "addNewVaultItem",
-};
-function createInitAutofillOverlayButtonMessageMock(
-  customFields = {},
-): InitAutofillOverlayButtonMessage {
-  return {
-    command: "initAutofillOverlayButton",
-    translations: overlayPagesTranslations,
-    styleSheetUrl: "https://jest-testing-website.com",
-    authStatus: AuthenticationStatus.Unlocked,
-    ...customFields,
-  };
-}
-
-describe("AutofillOverlayButton", () => {
-  globalThis.customElements.define("autofill-overlay-button", AutofillOverlayButton);
-
-  let autofillOverlayButton: AutofillOverlayButton;
-
-  beforeEach(() => {
-    document.body.innerHTML = `<autofill-overlay-button></autofill-overlay-button>`;
-    autofillOverlayButton = document.querySelector("autofill-overlay-button");
-    autofillOverlayButton["messageOrigin"] = "https://localhost/";
-    jest.spyOn(globalThis.document, "createElement");
-    jest.spyOn(globalThis.parent, "postMessage");
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe("initAutofillOverlayButton", () => {
-    it("creates the button element with the locked icon when the user's auth status is not Unlocked", () => {
-      postWindowMessage(
-        createInitAutofillOverlayButtonMessageMock({ authStatus: AuthenticationStatus.Locked }),
-      );
-
-      expect(autofillOverlayButton["buttonElement"]).toMatchSnapshot();
-      expect(autofillOverlayButton["buttonElement"].querySelector("svg")).toBe(
-        autofillOverlayButton["logoLockedIconElement"],
-      );
-    });
-
-    it("creates the button element with the normal icon when the user's auth status is Unlocked ", () => {
-      postWindowMessage(createInitAutofillOverlayButtonMessageMock());
-
-      expect(autofillOverlayButton["buttonElement"]).toMatchSnapshot();
-      expect(autofillOverlayButton["buttonElement"].querySelector("svg")).toBe(
-        autofillOverlayButton["logoIconElement"],
-      );
-    });
-
-    it("posts a message to the background indicating that the icon was clicked", () => {
-      postWindowMessage(createInitAutofillOverlayButtonMessageMock());
-      autofillOverlayButton["buttonElement"].click();
-
-      expect(globalThis.parent.postMessage).toHaveBeenCalledWith(
-        { command: "overlayButtonClicked" },
-        "https://localhost/",
-      );
-    });
-  });
-
-  describe("global event listeners", () => {
-    beforeEach(() => {
-      postWindowMessage(createInitAutofillOverlayButtonMessageMock());
-    });
-
-    it("does not post a message to close the autofill overlay if the element is focused during the focus check", () => {
-      jest.spyOn(globalThis.document, "hasFocus").mockReturnValue(true);
-
-      postWindowMessage({ command: "checkAutofillOverlayButtonFocused" });
-
-      expect(globalThis.parent.postMessage).not.toHaveBeenCalledWith({
-        command: "closeAutofillOverlay",
-      });
-    });
-
-    it("posts a message to close the autofill overlay if the element is not focused during the focus check", () => {
-      jest.spyOn(globalThis.document, "hasFocus").mockReturnValue(false);
-
-      postWindowMessage({ command: "checkAutofillOverlayButtonFocused" });
-
-      expect(globalThis.parent.postMessage).toHaveBeenCalledWith(
-        { command: "closeAutofillOverlay" },
-        "https://localhost/",
-      );
-    });
-
-    it("updates the user's auth status", () => {
-      autofillOverlayButton["authStatus"] = AuthenticationStatus.Locked;
-
-      postWindowMessage({
-        command: "updateAutofillOverlayButtonAuthStatus",
-        authStatus: AuthenticationStatus.Unlocked,
-      });
-
-      expect(autofillOverlayButton["authStatus"]).toBe(AuthenticationStatus.Unlocked);
-    });
-
-    it("updates the page color scheme meta tag", () => {
-      const colorSchemeMetaTag = globalThis.document.createElement("meta");
-      colorSchemeMetaTag.setAttribute("name", "color-scheme");
-      colorSchemeMetaTag.setAttribute("content", "light");
-      globalThis.document.head.append(colorSchemeMetaTag);
-
-      postWindowMessage({
-        command: "updateOverlayPageColorScheme",
-        colorScheme: "dark",
-      });
-
-      expect(colorSchemeMetaTag.getAttribute("content")).toBe("dark");
-    });
-  });
-});
diff --git a/apps/browser/src/autofill/deprecated/overlay/pages/button/autofill-overlay-button.deprecated.ts b/apps/browser/src/autofill/deprecated/overlay/pages/button/autofill-overlay-button.deprecated.ts
deleted file mode 100644
index a39ed99d424..00000000000
--- a/apps/browser/src/autofill/deprecated/overlay/pages/button/autofill-overlay-button.deprecated.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
-import "@webcomponents/custom-elements";
-import "lit/polyfill-support.js";
-import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
-import { EVENTS } from "@bitwarden/common/autofill/constants";
-
-import { buildSvgDomElement } from "../../../../utils";
-import { logoIcon, logoLockedIcon } from "../../../../utils/svg-icons";
-import {
-  InitAutofillOverlayButtonMessage,
-  OverlayButtonMessage,
-  OverlayButtonWindowMessageHandlers,
-} from "../../abstractions/autofill-overlay-button.deprecated";
-import AutofillOverlayPageElement from "../shared/autofill-overlay-page-element.deprecated";
-
-class AutofillOverlayButton extends AutofillOverlayPageElement {
-  private authStatus: AuthenticationStatus = AuthenticationStatus.LoggedOut;
-  private readonly buttonElement: HTMLButtonElement;
-  private readonly logoIconElement: HTMLElement;
-  private readonly logoLockedIconElement: HTMLElement;
-  private readonly overlayButtonWindowMessageHandlers: OverlayButtonWindowMessageHandlers = {
-    initAutofillOverlayButton: ({ message }) => this.initAutofillOverlayButton(message),
-    checkAutofillOverlayButtonFocused: () => this.checkButtonFocused(),
-    updateAutofillOverlayButtonAuthStatus: ({ message }) =>
-      this.updateAuthStatus(message.authStatus),
-    updateOverlayPageColorScheme: ({ message }) => this.updatePageColorScheme(message),
-  };
-
-  constructor() {
-    super();
-
-    this.buttonElement = globalThis.document.createElement("button");
-
-    this.setupGlobalListeners(this.overlayButtonWindowMessageHandlers);
-
-    this.logoIconElement = buildSvgDomElement(logoIcon);
-    this.logoIconElement.classList.add("overlay-button-svg-icon", "logo-icon");
-
-    this.logoLockedIconElement = buildSvgDomElement(logoLockedIcon);
-    this.logoLockedIconElement.classList.add("overlay-button-svg-icon", "logo-locked-icon");
-  }
-
-  /**
-   * Initializes the overlay button. Facilitates ensuring that the page
-   * is set up with the expected styles and translations.
-   *
-   * @param authStatus - The authentication status of the user
-   * @param styleSheetUrl - The URL of the stylesheet to apply to the page
-   * @param translations - The translations to apply to the page
-   * @private
-   */
-  private async initAutofillOverlayButton({
-    authStatus,
-    styleSheetUrl,
-    translations,
-  }: InitAutofillOverlayButtonMessage) {
-    const linkElement = this.initOverlayPage("button", styleSheetUrl, translations);
-
-    this.buttonElement.tabIndex = -1;
-    this.buttonElement.type = "button";
-    this.buttonElement.classList.add("overlay-button");
-    this.buttonElement.setAttribute(
-      "aria-label",
-      this.getTranslation("toggleBitwardenVaultOverlay"),
-    );
-    this.buttonElement.addEventListener(EVENTS.CLICK, this.handleButtonElementClick);
-    this.postMessageToParent({ command: "getPageColorScheme" });
-
-    this.updateAuthStatus(authStatus);
-
-    this.shadowDom.append(linkElement, this.buttonElement);
-  }
-
-  /**
-   * Updates the authentication status of the user. This will update the icon
-   * displayed on the button.
-   *
-   * @param authStatus - The authentication status of the user
-   */
-  private updateAuthStatus(authStatus: AuthenticationStatus) {
-    this.authStatus = authStatus;
-
-    this.buttonElement.innerHTML = "";
-    const iconElement =
-      this.authStatus === AuthenticationStatus.Unlocked
-        ? this.logoIconElement
-        : this.logoLockedIconElement;
-    this.buttonElement.append(iconElement);
-  }
-
-  /**
-   * Handles updating the page color scheme meta tag. Ensures that the button
-   * does not present with a non-transparent background on dark mode pages.
-   *
-   * @param colorScheme - The color scheme of the iframe's parent page
-   */
-  private updatePageColorScheme({ colorScheme }: OverlayButtonMessage) {
-    const colorSchemeMetaTag = globalThis.document.querySelector("meta[name='color-scheme']");
-    colorSchemeMetaTag?.setAttribute("content", colorScheme);
-  }
-
-  /**
-   * Handles a click event on the button element. Posts a message to the
-   * parent window indicating that the button was clicked.
-   */
-  private handleButtonElementClick = () => {
-    this.postMessageToParent({ command: "overlayButtonClicked" });
-  };
-
-  /**
-   * Checks if the button is focused. If it is not, then it posts a message
-   * to the parent window indicating that the overlay should be closed.
-   */
-  private checkButtonFocused() {
-    if (globalThis.document.hasFocus()) {
-      return;
-    }
-
-    this.postMessageToParent({ command: "closeAutofillOverlay" });
-  }
-}
-
-export default AutofillOverlayButton;
diff --git a/apps/browser/src/autofill/deprecated/overlay/pages/button/bootstrap-autofill-overlay-button.deprecated.ts b/apps/browser/src/autofill/deprecated/overlay/pages/button/bootstrap-autofill-overlay-button.deprecated.ts
deleted file mode 100644
index fd6a79733cb..00000000000
--- a/apps/browser/src/autofill/deprecated/overlay/pages/button/bootstrap-autofill-overlay-button.deprecated.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { AutofillOverlayElement } from "../../../../enums/autofill-overlay.enum";
-
-import AutofillOverlayButton from "./autofill-overlay-button.deprecated";
-
-// FIXME: Remove when updating file. Eslint update
-// eslint-disable-next-line @typescript-eslint/no-require-imports
-require("./legacy-button.scss");
-
-(function () {
-  globalThis.customElements.define(AutofillOverlayElement.Button, AutofillOverlayButton);
-})();
diff --git a/apps/browser/src/autofill/deprecated/overlay/pages/button/legacy-button.html b/apps/browser/src/autofill/deprecated/overlay/pages/button/legacy-button.html
deleted file mode 100644
index 2211023581f..00000000000
--- a/apps/browser/src/autofill/deprecated/overlay/pages/button/legacy-button.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <title>Bitwarden overlay button</title>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="color-scheme" content="normal" />
-  </head>
-  <body>
-    <autofill-inline-menu-button></autofill-inline-menu-button>
-  </body>
-</html>
diff --git a/apps/browser/src/autofill/deprecated/overlay/pages/button/legacy-button.scss b/apps/browser/src/autofill/deprecated/overlay/pages/button/legacy-button.scss
deleted file mode 100644
index 507442c07dc..00000000000
--- a/apps/browser/src/autofill/deprecated/overlay/pages/button/legacy-button.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-@import "../../../../shared/styles/variables";
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  width: 100%;
-  min-width: 100vw;
-  height: 100%;
-  min-height: 100vh;
-  padding: 0;
-  margin: 0;
-  background: transparent;
-  overflow: hidden;
-}
-autofill-overlay-button {
-  width: 100%;
-  height: auto;
-}
-
-.overlay-button {
-  display: block;
-  width: 100%;
-  padding: 0;
-  margin: auto;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-
-  .overlay-button-svg-icon {
-    display: block;
-    width: 100%;
-    height: auto;
-  }
-}
diff --git a/apps/browser/src/autofill/deprecated/overlay/pages/list/__snapshots__/autofill-overlay-list.deprecated.spec.ts.snap b/apps/browser/src/autofill/deprecated/overlay/pages/list/__snapshots__/autofill-overlay-list.deprecated.spec.ts.snap
deleted file mode 100644
index d11fbd50792..00000000000
--- a/apps/browser/src/autofill/deprecated/overlay/pages/list/__snapshots__/autofill-overlay-list.deprecated.spec.ts.snap
+++ /dev/null
@@ -1,537 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AutofillOverlayList initAutofillOverlayList the list of ciphers for an authenticated user creates the view for a list of ciphers 1`] = `
-<div
-  class="overlay-list-container theme_light"
->
-  <ul
-    class="overlay-actions-list"
-    role="list"
-  >
-    <li
-      class="overlay-actions-list-item"
-      role="listitem"
-    >
-      <div
-        class="cipher-container"
-      >
-        <button
-          aria-description="partialUsername, username1"
-          aria-label="fillCredentialsFor website login 1"
-          class="fill-cipher-button"
-          tabindex="-1"
-        >
-          <span
-            aria-hidden="true"
-            class="cipher-icon"
-            style="background-image: url(https://jest-testing-website.com/image.png);"
-          />
-          <span
-            class="cipher-details"
-          >
-            <span
-              class="cipher-name"
-              title="website login 1"
-            >
-              website login 1
-            </span>
-            <span
-              class="cipher-user-login"
-              title="username1"
-            >
-              username1
-            </span>
-          </span>
-        </button>
-        <button
-          aria-label="view website login 1, opensInANewWindow"
-          class="view-cipher-button"
-          tabindex="-1"
-        >
-          <svg
-            aria-hidden="true"
-            fill="none"
-            height="20"
-            viewBox="0 0 20 20"
-            width="20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <g
-              clip-path="url(#a)"
-            >
-              <path
-                d="M16.587 7.932H5.9a.455.455 0 0 1-.31-.12.393.393 0 0 1-.127-.287c0-.108.046-.211.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.076.128.179.128.287a.393.393 0 0 1-.128.288.455.455 0 0 1-.31.119Zm0 2.474H5.9a.455.455 0 0 1-.31-.119.393.393 0 0 1-.127-.287c0-.108.046-.212.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.075.128.179.128.287a.393.393 0 0 1-.128.287.455.455 0 0 1-.31.12Zm0 2.468H5.9a.455.455 0 0 1-.31-.119.393.393 0 0 1-.127-.287c0-.108.046-.212.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.075.128.179.128.287a.393.393 0 0 1-.128.287.455.455 0 0 1-.31.12Zm2.163-8.103v10.457H1.25V4.771h17.5Zm0-1.162H1.25a1.3 1.3 0 0 0-.884.34A1.122 1.122 0 0 0 0 4.772v10.457c0 .308.132.604.366.822a1.3 1.3 0 0 0 .884.34h17.5a1.3 1.3 0 0 0 .884-.34c.234-.218.366-.514.366-.822V4.771c0-.308-.132-.603-.366-.821a1.3 1.3 0 0 0-.884-.34ZM3.213 8.01c.287 0 .52-.217.52-.484s-.234-.483-.52-.483c-.288 0-.52.216-.52.483s.233.483.52.483Zm0 4.903c.287 0 .52-.217.52-.484 0-.266-.234-.483-.52-.483-.287 0-.52.216-.52.483s.233.484.52.484Zm0-2.452c.287 0 .52-.216.52-.483 0-.268-.234-.484-.52-.484-.288 0-.52.216-.52.484 0 .267.233.483.52.483Z"
-                fill="#175DDC"
-              />
-            </g>
-            <defs>
-              <clippath
-                id="a"
-              >
-                <path
-                  d="M0 .113h20v19.773H0z"
-                  fill="#fff"
-                />
-              </clippath>
-            </defs>
-          </svg>
-        </button>
-      </div>
-    </li>
-    <li
-      class="overlay-actions-list-item"
-      role="listitem"
-    >
-      <div
-        class="cipher-container"
-      >
-        <button
-          aria-description="partialUsername, username2"
-          aria-label="fillCredentialsFor website login 2"
-          class="fill-cipher-button"
-          tabindex="-1"
-        >
-          <span
-            aria-hidden="true"
-            class="cipher-icon bwi bw-icon"
-          />
-          <span
-            class="cipher-details"
-          >
-            <span
-              class="cipher-name"
-              title="website login 2"
-            >
-              website login 2
-            </span>
-            <span
-              class="cipher-user-login"
-              title="username2"
-            >
-              username2
-            </span>
-          </span>
-        </button>
-        <button
-          aria-label="view website login 2, opensInANewWindow"
-          class="view-cipher-button"
-          tabindex="-1"
-        >
-          <svg
-            aria-hidden="true"
-            fill="none"
-            height="20"
-            viewBox="0 0 20 20"
-            width="20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <g
-              clip-path="url(#a)"
-            >
-              <path
-                d="M16.587 7.932H5.9a.455.455 0 0 1-.31-.12.393.393 0 0 1-.127-.287c0-.108.046-.211.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.076.128.179.128.287a.393.393 0 0 1-.128.288.455.455 0 0 1-.31.119Zm0 2.474H5.9a.455.455 0 0 1-.31-.119.393.393 0 0 1-.127-.287c0-.108.046-.212.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.075.128.179.128.287a.393.393 0 0 1-.128.287.455.455 0 0 1-.31.12Zm0 2.468H5.9a.455.455 0 0 1-.31-.119.393.393 0 0 1-.127-.287c0-.108.046-.212.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.075.128.179.128.287a.393.393 0 0 1-.128.287.455.455 0 0 1-.31.12Zm2.163-8.103v10.457H1.25V4.771h17.5Zm0-1.162H1.25a1.3 1.3 0 0 0-.884.34A1.122 1.122 0 0 0 0 4.772v10.457c0 .308.132.604.366.822a1.3 1.3 0 0 0 .884.34h17.5a1.3 1.3 0 0 0 .884-.34c.234-.218.366-.514.366-.822V4.771c0-.308-.132-.603-.366-.821a1.3 1.3 0 0 0-.884-.34ZM3.213 8.01c.287 0 .52-.217.52-.484s-.234-.483-.52-.483c-.288 0-.52.216-.52.483s.233.483.52.483Zm0 4.903c.287 0 .52-.217.52-.484 0-.266-.234-.483-.52-.483-.287 0-.52.216-.52.483s.233.484.52.484Zm0-2.452c.287 0 .52-.216.52-.483 0-.268-.234-.484-.52-.484-.288 0-.52.216-.52.484 0 .267.233.483.52.483Z"
-                fill="#175DDC"
-              />
-            </g>
-            <defs>
-              <clippath
-                id="a"
-              >
-                <path
-                  d="M0 .113h20v19.773H0z"
-                  fill="#fff"
-                />
-              </clippath>
-            </defs>
-          </svg>
-        </button>
-      </div>
-    </li>
-    <li
-      class="overlay-actions-list-item"
-      role="listitem"
-    >
-      <div
-        class="cipher-container"
-      >
-        <button
-          aria-description="partialUsername, "
-          aria-label="fillCredentialsFor "
-          class="fill-cipher-button"
-          tabindex="-1"
-        >
-          <span
-            aria-hidden="true"
-            class="cipher-icon bwi bw-icon"
-          />
-          <span
-            class="cipher-details"
-          />
-        </button>
-        <button
-          aria-label="view , opensInANewWindow"
-          class="view-cipher-button"
-          tabindex="-1"
-        >
-          <svg
-            aria-hidden="true"
-            fill="none"
-            height="20"
-            viewBox="0 0 20 20"
-            width="20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <g
-              clip-path="url(#a)"
-            >
-              <path
-                d="M16.587 7.932H5.9a.455.455 0 0 1-.31-.12.393.393 0 0 1-.127-.287c0-.108.046-.211.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.076.128.179.128.287a.393.393 0 0 1-.128.288.455.455 0 0 1-.31.119Zm0 2.474H5.9a.455.455 0 0 1-.31-.119.393.393 0 0 1-.127-.287c0-.108.046-.212.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.075.128.179.128.287a.393.393 0 0 1-.128.287.455.455 0 0 1-.31.12Zm0 2.468H5.9a.455.455 0 0 1-.31-.119.393.393 0 0 1-.127-.287c0-.108.046-.212.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.075.128.179.128.287a.393.393 0 0 1-.128.287.455.455 0 0 1-.31.12Zm2.163-8.103v10.457H1.25V4.771h17.5Zm0-1.162H1.25a1.3 1.3 0 0 0-.884.34A1.122 1.122 0 0 0 0 4.772v10.457c0 .308.132.604.366.822a1.3 1.3 0 0 0 .884.34h17.5a1.3 1.3 0 0 0 .884-.34c.234-.218.366-.514.366-.822V4.771c0-.308-.132-.603-.366-.821a1.3 1.3 0 0 0-.884-.34ZM3.213 8.01c.287 0 .52-.217.52-.484s-.234-.483-.52-.483c-.288 0-.52.216-.52.483s.233.483.52.483Zm0 4.903c.287 0 .52-.217.52-.484 0-.266-.234-.483-.52-.483-.287 0-.52.216-.52.483s.233.484.52.484Zm0-2.452c.287 0 .52-.216.52-.483 0-.268-.234-.484-.52-.484-.288 0-.52.216-.52.484 0 .267.233.483.52.483Z"
-                fill="#175DDC"
-              />
-            </g>
-            <defs>
-              <clippath
-                id="a"
-              >
-                <path
-                  d="M0 .113h20v19.773H0z"
-                  fill="#fff"
-                />
-              </clippath>
-            </defs>
-          </svg>
-        </button>
-      </div>
-    </li>
-    <li
-      class="overlay-actions-list-item"
-      role="listitem"
-    >
-      <div
-        class="cipher-container"
-      >
-        <button
-          aria-description="partialUsername, username4"
-          aria-label="fillCredentialsFor website login 4"
-          class="fill-cipher-button"
-          tabindex="-1"
-        >
-          <span
-            aria-hidden="true"
-            class="cipher-icon"
-          >
-            <svg
-              aria-hidden="true"
-              fill="none"
-              height="25"
-              viewBox="0 0 24 25"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                clip-rule="evenodd"
-                d="M18.026 17.842c-1.418 1.739-3.517 2.84-5.86 2.84a7.364 7.364 0 0 1-3.431-.848l.062-.15.062-.151.063-.157c.081-.203.17-.426.275-.646.133-.28.275-.522.426-.68.026-.028.101-.075.275-.115.165-.037.376-.059.629-.073.138-.008.288-.014.447-.02.399-.016.847-.034 1.266-.092.314-.044.566-.131.755-.271a.884.884 0 0 0 .352-.555c.037-.2.008-.392-.03-.543-.035-.135-.084-.264-.12-.355l-.01-.03a4.26 4.26 0 0 0-.145-.33c-.126-.264-.237-.497-.288-1.085-.03-.344.09-.73.251-1.138l.089-.22c.05-.123.1-.247.14-.355.064-.171.129-.375.129-.566a1.51 1.51 0 0 0-.134-.569 2.573 2.573 0 0 0-.319-.547c-.246-.323-.635-.669-1.093-.669-.44 0-1.006.169-1.487.368-.246.102-.48.216-.68.33-.192.111-.372.235-.492.359-.93.96-1.48 1.239-1.81 1.258-.277.017-.478-.15-.736-.525a9.738 9.738 0 0 1-.19-.29l-.006-.01a11.568 11.568 0 0 0-.198-.305 2.76 2.76 0 0 0-.521-.6 1.39 1.39 0 0 0-1.088-.314 8.302 8.302 0 0 1 1.987-3.936c.055.342.146.626.272.856.23.42.561.64.926.716.406.086.857-.061 1.26-.216.125-.047.248-.097.372-.147.309-.125.618-.25.947-.341.26-.072.581-.057.959.012.264.049.529.118.8.19l.36.091c.379.094.782.178 1.135.148.374-.032.733-.197.934-.623a.874.874 0 0 0 .024-.752c-.087-.197-.24-.355-.35-.47-.26-.267-.412-.427-.412-.685 0-.125.037-.2.09-.263a.982.982 0 0 1 .303-.211c.059-.03.119-.058.183-.089l.036-.016a3.79 3.79 0 0 0 .236-.118c.047-.026.098-.056.148-.093 1.936.747 3.51 2.287 4.368 4.249a7.739 7.739 0 0 0-.031-.004c-.38-.047-.738-.056-1.063.061-.34.123-.603.368-.817.74-.122.211-.284.43-.463.67l-.095.129c-.207.281-.431.595-.58.92-.15.326-.245.705-.142 1.103.104.397.387.738.837 1.036.099.065.225.112.314.145l.02.008c.108.04.195.074.268.117.07.042.106.08.124.114.017.03.037.087.022.206-.047.376-.069.73-.052 1.034.017.292.071.59.218.809.118.174.12.421.108.786v.01a2.46 2.46 0 0 0 .021.518.809.809 0 0 0 .15.35Zm1.357.059a9.654 9.654 0 0 0 1.62-5.386c0-5.155-3.957-9.334-8.836-9.334-4.88 0-8.836 4.179-8.836 9.334 0 3.495 1.82 6.543 4.513 8.142v.093h.161a8.426 8.426 0 0 0 4.162 1.098c2.953 0 5.568-1.53 7.172-3.882a.569.569 0 0 0 .048-.062l-.004-.003ZM8.152 19.495a43.345 43.345 0 0 1 .098-.238l.057-.142c.082-.205.182-.455.297-.698.143-.301.323-.624.552-.864.163-.172.392-.254.602-.302.219-.05.473-.073.732-.088.162-.01.328-.016.495-.023.386-.015.782-.03 1.168-.084.255-.036.392-.099.461-.15.06-.045.076-.084.083-.12a.534.534 0 0 0-.02-.223 2.552 2.552 0 0 0-.095-.278l-.01-.027a3.128 3.128 0 0 0-.104-.232c-.134-.282-.31-.65-.374-1.381-.046-.533.138-1.063.3-1.472.035-.09.069-.172.1-.249.046-.11.086-.21.123-.31.062-.169.083-.264.083-.312a.812.812 0 0 0-.076-.283 1.867 1.867 0 0 0-.23-.394c-.21-.274-.428-.408-.577-.408-.315 0-.788.13-1.246.32a5.292 5.292 0 0 0-.603.293 1.727 1.727 0 0 0-.347.244c-.936.968-1.641 1.421-2.235 1.457-.646.04-1.036-.413-1.31-.813-.07-.103-.139-.21-.203-.311l-.005-.007c-.064-.101-.125-.197-.188-.29a2.098 2.098 0 0 0-.387-.453.748.748 0 0 0-.436-.18c-.1-.006-.22.005-.365.046a8.707 8.707 0 0 0-.056.992c0 2.957 1.488 5.547 3.716 6.98Zm10.362-2.316.003-.192.002-.046c.01-.305.026-.786-.232-1.169-.036-.054-.082-.189-.096-.444-.014-.243.003-.55.047-.9a1.051 1.051 0 0 0-.105-.649.987.987 0 0 0-.374-.374 2.285 2.285 0 0 0-.367-.166h-.003a1.243 1.243 0 0 1-.205-.088c-.369-.244-.505-.46-.549-.629-.044-.168-.015-.364.099-.61.115-.25.297-.511.507-.796l.089-.12c.178-.239.368-.495.512-.745.152-.263.302-.382.466-.441.18-.065.416-.073.77-.03.142.018.275.04.397.063.274.837.423 1.736.423 2.671a8.45 8.45 0 0 1-1.384 4.665Zm-4.632-12.63a7.362 7.362 0 0 0-1.715-.201c-1.89 0-3.621.716-4.965 1.905.025.54.12.887.24 1.105.13.238.295.34.482.38.2.042.484-.027.905-.188l.328-.13c.32-.13.681-.275 1.048-.377.398-.111.833-.075 1.24 0 .289.053.59.132.871.205l.326.084c.383.094.694.151.932.13.216-.017.326-.092.395-.237.039-.083.027-.114.014-.144-.027-.062-.088-.136-.212-.264l-.043-.044c-.218-.222-.567-.578-.567-1.142 0-.305.101-.547.262-.734.137-.159.308-.267.46-.347Z"
-                fill="#777"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </span>
-          <span
-            class="cipher-details"
-          >
-            <span
-              class="cipher-name"
-              title="website login 4"
-            >
-              website login 4
-            </span>
-            <span
-              class="cipher-user-login"
-              title="username4"
-            >
-              username4
-            </span>
-          </span>
-        </button>
-        <button
-          aria-label="view website login 4, opensInANewWindow"
-          class="view-cipher-button"
-          tabindex="-1"
-        >
-          <svg
-            aria-hidden="true"
-            fill="none"
-            height="20"
-            viewBox="0 0 20 20"
-            width="20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <g
-              clip-path="url(#a)"
-            >
-              <path
-                d="M16.587 7.932H5.9a.455.455 0 0 1-.31-.12.393.393 0 0 1-.127-.287c0-.108.046-.211.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.076.128.179.128.287a.393.393 0 0 1-.128.288.455.455 0 0 1-.31.119Zm0 2.474H5.9a.455.455 0 0 1-.31-.119.393.393 0 0 1-.127-.287c0-.108.046-.212.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.075.128.179.128.287a.393.393 0 0 1-.128.287.455.455 0 0 1-.31.12Zm0 2.468H5.9a.455.455 0 0 1-.31-.119.393.393 0 0 1-.127-.287c0-.108.046-.212.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.075.128.179.128.287a.393.393 0 0 1-.128.287.455.455 0 0 1-.31.12Zm2.163-8.103v10.457H1.25V4.771h17.5Zm0-1.162H1.25a1.3 1.3 0 0 0-.884.34A1.122 1.122 0 0 0 0 4.772v10.457c0 .308.132.604.366.822a1.3 1.3 0 0 0 .884.34h17.5a1.3 1.3 0 0 0 .884-.34c.234-.218.366-.514.366-.822V4.771c0-.308-.132-.603-.366-.821a1.3 1.3 0 0 0-.884-.34ZM3.213 8.01c.287 0 .52-.217.52-.484s-.234-.483-.52-.483c-.288 0-.52.216-.52.483s.233.483.52.483Zm0 4.903c.287 0 .52-.217.52-.484 0-.266-.234-.483-.52-.483-.287 0-.52.216-.52.483s.233.484.52.484Zm0-2.452c.287 0 .52-.216.52-.483 0-.268-.234-.484-.52-.484-.288 0-.52.216-.52.484 0 .267.233.483.52.483Z"
-                fill="#175DDC"
-              />
-            </g>
-            <defs>
-              <clippath
-                id="a"
-              >
-                <path
-                  d="M0 .113h20v19.773H0z"
-                  fill="#fff"
-                />
-              </clippath>
-            </defs>
-          </svg>
-        </button>
-      </div>
-    </li>
-    <li
-      class="overlay-actions-list-item"
-      role="listitem"
-    >
-      <div
-        class="cipher-container"
-      >
-        <button
-          aria-description="partialUsername, username5"
-          aria-label="fillCredentialsFor website login 5"
-          class="fill-cipher-button"
-          tabindex="-1"
-        >
-          <span
-            aria-hidden="true"
-            class="cipher-icon"
-            style="background-image: url(https://jest-testing-website.com/image.png);"
-          />
-          <span
-            class="cipher-details"
-          >
-            <span
-              class="cipher-name"
-              title="website login 5"
-            >
-              website login 5
-            </span>
-            <span
-              class="cipher-user-login"
-              title="username5"
-            >
-              username5
-            </span>
-          </span>
-        </button>
-        <button
-          aria-label="view website login 5, opensInANewWindow"
-          class="view-cipher-button"
-          tabindex="-1"
-        >
-          <svg
-            aria-hidden="true"
-            fill="none"
-            height="20"
-            viewBox="0 0 20 20"
-            width="20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <g
-              clip-path="url(#a)"
-            >
-              <path
-                d="M16.587 7.932H5.9a.455.455 0 0 1-.31-.12.393.393 0 0 1-.127-.287c0-.108.046-.211.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.076.128.179.128.287a.393.393 0 0 1-.128.288.455.455 0 0 1-.31.119Zm0 2.474H5.9a.455.455 0 0 1-.31-.119.393.393 0 0 1-.127-.287c0-.108.046-.212.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.075.128.179.128.287a.393.393 0 0 1-.128.287.455.455 0 0 1-.31.12Zm0 2.468H5.9a.455.455 0 0 1-.31-.119.393.393 0 0 1-.127-.287c0-.108.046-.212.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.075.128.179.128.287a.393.393 0 0 1-.128.287.455.455 0 0 1-.31.12Zm2.163-8.103v10.457H1.25V4.771h17.5Zm0-1.162H1.25a1.3 1.3 0 0 0-.884.34A1.122 1.122 0 0 0 0 4.772v10.457c0 .308.132.604.366.822a1.3 1.3 0 0 0 .884.34h17.5a1.3 1.3 0 0 0 .884-.34c.234-.218.366-.514.366-.822V4.771c0-.308-.132-.603-.366-.821a1.3 1.3 0 0 0-.884-.34ZM3.213 8.01c.287 0 .52-.217.52-.484s-.234-.483-.52-.483c-.288 0-.52.216-.52.483s.233.483.52.483Zm0 4.903c.287 0 .52-.217.52-.484 0-.266-.234-.483-.52-.483-.287 0-.52.216-.52.483s.233.484.52.484Zm0-2.452c.287 0 .52-.216.52-.483 0-.268-.234-.484-.52-.484-.288 0-.52.216-.52.484 0 .267.233.483.52.483Z"
-                fill="#175DDC"
-              />
-            </g>
-            <defs>
-              <clippath
-                id="a"
-              >
-                <path
-                  d="M0 .113h20v19.773H0z"
-                  fill="#fff"
-                />
-              </clippath>
-            </defs>
-          </svg>
-        </button>
-      </div>
-    </li>
-    <li
-      class="overlay-actions-list-item"
-      role="listitem"
-    >
-      <div
-        class="cipher-container"
-      >
-        <button
-          aria-description="partialUsername, username6"
-          aria-label="fillCredentialsFor website login 6"
-          class="fill-cipher-button"
-          tabindex="-1"
-        >
-          <span
-            aria-hidden="true"
-            class="cipher-icon"
-            style="background-image: url(https://jest-testing-website.com/image.png);"
-          />
-          <span
-            class="cipher-details"
-          >
-            <span
-              class="cipher-name"
-              title="website login 6"
-            >
-              website login 6
-            </span>
-            <span
-              class="cipher-user-login"
-              title="username6"
-            >
-              username6
-            </span>
-          </span>
-        </button>
-        <button
-          aria-label="view website login 6, opensInANewWindow"
-          class="view-cipher-button"
-          tabindex="-1"
-        >
-          <svg
-            aria-hidden="true"
-            fill="none"
-            height="20"
-            viewBox="0 0 20 20"
-            width="20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <g
-              clip-path="url(#a)"
-            >
-              <path
-                d="M16.587 7.932H5.9a.455.455 0 0 1-.31-.12.393.393 0 0 1-.127-.287c0-.108.046-.211.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.076.128.179.128.287a.393.393 0 0 1-.128.288.455.455 0 0 1-.31.119Zm0 2.474H5.9a.455.455 0 0 1-.31-.119.393.393 0 0 1-.127-.287c0-.108.046-.212.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.075.128.179.128.287a.393.393 0 0 1-.128.287.455.455 0 0 1-.31.12Zm0 2.468H5.9a.455.455 0 0 1-.31-.119.393.393 0 0 1-.127-.287c0-.108.046-.212.128-.288a.455.455 0 0 1 .309-.119h10.687c.117 0 .228.043.31.12.082.075.128.179.128.287a.393.393 0 0 1-.128.287.455.455 0 0 1-.31.12Zm2.163-8.103v10.457H1.25V4.771h17.5Zm0-1.162H1.25a1.3 1.3 0 0 0-.884.34A1.122 1.122 0 0 0 0 4.772v10.457c0 .308.132.604.366.822a1.3 1.3 0 0 0 .884.34h17.5a1.3 1.3 0 0 0 .884-.34c.234-.218.366-.514.366-.822V4.771c0-.308-.132-.603-.366-.821a1.3 1.3 0 0 0-.884-.34ZM3.213 8.01c.287 0 .52-.217.52-.484s-.234-.483-.52-.483c-.288 0-.52.216-.52.483s.233.483.52.483Zm0 4.903c.287 0 .52-.217.52-.484 0-.266-.234-.483-.52-.483-.287 0-.52.216-.52.483s.233.484.52.484Zm0-2.452c.287 0 .52-.216.52-.483 0-.268-.234-.484-.52-.484-.288 0-.52.216-.52.484 0 .267.233.483.52.483Z"
-                fill="#175DDC"
-              />
-            </g>
-            <defs>
-              <clippath
-                id="a"
-              >
-                <path
-                  d="M0 .113h20v19.773H0z"
-                  fill="#fff"
-                />
-              </clippath>
-            </defs>
-          </svg>
-        </button>
-      </div>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`AutofillOverlayList initAutofillOverlayList the locked overlay for an unauthenticated user creates the views for the locked overlay 1`] = `
-<div
-  class="overlay-list-container theme_light"
->
-  <div
-    class="locked-overlay overlay-list-message"
-    id="locked-overlay-description"
-  >
-    unlockYourAccount
-  </div>
-  <div
-    class="overlay-list-button-container"
-  >
-    <button
-      aria-label="unlockAccount, opensInANewWindow"
-      class="unlock-button overlay-list-button"
-      id="unlock-button"
-      tabindex="-1"
-    >
-      <svg
-        aria-hidden="true"
-        fill="none"
-        height="17"
-        viewBox="0 0 17 17"
-        width="17"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <g
-          clip-path="url(#a)"
-        >
-          <path
-            d="M8.799 11.633a.68.68 0 0 0-.639.422.695.695 0 0 0-.054.264.682.682 0 0 0 .374.6v1.13a.345.345 0 1 0 .693 0v-1.17a.68.68 0 0 0 .315-.56.695.695 0 0 0-.204-.486.682.682 0 0 0-.485-.2Zm4.554-4.657h-7.11a.438.438 0 0 1-.406-.26A3.81 3.81 0 0 1 5.584 4.3c.112-.435.312-.842.588-1.195A3.196 3.196 0 0 1 7.19 2.25a3.468 3.468 0 0 1 3.225-.059A3.62 3.62 0 0 1 11.94 3.71l.327.59a.502.502 0 1 0 .885-.483l-.307-.552a4.689 4.689 0 0 0-2.209-2.078 4.466 4.466 0 0 0-3.936.185A4.197 4.197 0 0 0 5.37 2.49a4.234 4.234 0 0 0-.768 1.565 4.714 4.714 0 0 0 .162 2.682.182.182 0 0 1-.085.22.173.173 0 0 1-.082.02h-.353a1.368 1.368 0 0 0-1.277.842c-.07.168-.107.348-.109.53v7.1a1.392 1.392 0 0 0 .412.974 1.352 1.352 0 0 0 .974.394h9.117c.363.001.711-.142.97-.4a1.39 1.39 0 0 0 .407-.972v-7.1a1.397 1.397 0 0 0-.414-.973 1.368 1.368 0 0 0-.972-.396Zm.37 8.469a.373.373 0 0 1-.11.26.364.364 0 0 1-.26.107H4.246a.366.366 0 0 1-.26-.107.374.374 0 0 1-.11-.261V8.349a.374.374 0 0 1 .11-.26.366.366 0 0 1 .26-.108h9.116a.366.366 0 0 1 .37.367l-.008 7.097Z"
-            fill="#175DDC"
-          />
-        </g>
-        <defs>
-          <clippath
-            id="a"
-          >
-            <path
-              d="M.798.817h16v16h-16z"
-              fill="#fff"
-            />
-          </clippath>
-        </defs>
-      </svg>
-      unlockAccount
-    </button>
-  </div>
-</div>
-`;
-
-exports[`AutofillOverlayList initAutofillOverlayList the overlay with an empty list of ciphers creates the views for the no results overlay 1`] = `
-<div
-  class="overlay-list-container theme_light"
->
-  <div
-    class="no-items overlay-list-message"
-  >
-    noItemsToShow
-  </div>
-  <div
-    class="overlay-list-button-container"
-  >
-    <button
-      aria-label="addNewVaultItem, opensInANewWindow"
-      class="add-new-item-button overlay-list-button"
-      id="new-item-button"
-      tabindex="-1"
-    >
-      <svg
-        aria-hidden="true"
-        fill="none"
-        height="17"
-        width="17"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <g
-          clip-path="url(#a)"
-        >
-          <path
-            clip-rule="evenodd"
-            d="M9.607 7.15h5.35c.322 0 .627.133.847.362a1.213 1.213 0 0 1 .002 1.68c-.221.23-.527.363-.85.363H9.607v5.652c0 .312-.12.613-.336.839a1.176 1.176 0 0 1-1.696.003 1.21 1.21 0 0 1-.34-.842V9.555H1.888a1.173 1.173 0 0 1-.847-.361A1.193 1.193 0 0 1 .7 8.352a1.219 1.219 0 0 1 .336-.838 1.175 1.175 0 0 1 .85-.364h5.349V1.635c0-.31.118-.611.336-.84A1.176 1.176 0 0 1 9.268.795c.222.228.34.533.34.841V7.15Z"
-            fill="#175DDC"
-            fill-rule="evenodd"
-          />
-        </g>
-        <defs>
-          <clippath
-            id="a"
-          >
-            <path
-              d="M.421.421h16v16h-16z"
-              fill="#fff"
-            />
-          </clippath>
-        </defs>
-      </svg>
-      newItem
-    </button>
-  </div>
-</div>
-`;
diff --git a/apps/browser/src/autofill/deprecated/overlay/pages/list/autofill-overlay-list.deprecated.spec.ts b/apps/browser/src/autofill/deprecated/overlay/pages/list/autofill-overlay-list.deprecated.spec.ts
deleted file mode 100644
index 48c27e436a4..00000000000
--- a/apps/browser/src/autofill/deprecated/overlay/pages/list/autofill-overlay-list.deprecated.spec.ts
+++ /dev/null
@@ -1,467 +0,0 @@
-import { mock } from "jest-mock-extended";
-
-import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
-import { ThemeType } from "@bitwarden/common/platform/enums";
-
-import { createAutofillOverlayCipherDataMock } from "../../../../spec/autofill-mocks";
-import { postWindowMessage } from "../../../../spec/testing-utils";
-import { InitAutofillOverlayListMessage } from "../../abstractions/autofill-overlay-list.deprecated";
-
-import AutofillOverlayList from "./autofill-overlay-list.deprecated";
-
-const overlayPagesTranslations = {
-  locale: "en",
-  buttonPageTitle: "buttonPageTitle",
-  listPageTitle: "listPageTitle",
-  opensInANewWindow: "opensInANewWindow",
-  toggleBitwardenVaultOverlay: "toggleBitwardenVaultOverlay",
-  unlockYourAccount: "unlockYourAccount",
-  unlockAccount: "unlockAccount",
-  fillCredentialsFor: "fillCredentialsFor",
-  partialUsername: "partialUsername",
-  view: "view",
-  noItemsToShow: "noItemsToShow",
-  newItem: "newItem",
-  addNewVaultItem: "addNewVaultItem",
-};
-function createInitAutofillOverlayListMessageMock(
-  customFields = {},
-): InitAutofillOverlayListMessage {
-  return {
-    command: "initAutofillOverlayList",
-    translations: overlayPagesTranslations,
-    styleSheetUrl: "https://jest-testing-website.com",
-    theme: ThemeType.Light,
-    authStatus: AuthenticationStatus.Unlocked,
-    ciphers: [
-      createAutofillOverlayCipherDataMock(1, {
-        icon: {
-          imageEnabled: true,
-          image: "https://jest-testing-website.com/image.png",
-          fallbackImage: "",
-          icon: "bw-icon",
-        },
-      }),
-      createAutofillOverlayCipherDataMock(2, {
-        icon: {
-          imageEnabled: true,
-          image: "",
-          fallbackImage: "https://jest-testing-website.com/fallback.png",
-          icon: "bw-icon",
-        },
-      }),
-      createAutofillOverlayCipherDataMock(3, {
-        name: "",
-        login: { username: "" },
-        icon: { imageEnabled: true, image: "", fallbackImage: "", icon: "bw-icon" },
-      }),
-      createAutofillOverlayCipherDataMock(4, {
-        icon: { imageEnabled: false, image: "", fallbackImage: "", icon: "" },
-      }),
-      createAutofillOverlayCipherDataMock(5),
-      createAutofillOverlayCipherDataMock(6),
-      createAutofillOverlayCipherDataMock(7),
-      createAutofillOverlayCipherDataMock(8),
-    ],
-    ...customFields,
-  };
-}
-
-describe("AutofillOverlayList", () => {
-  globalThis.customElements.define("autofill-overlay-list", AutofillOverlayList);
-  global.ResizeObserver = jest.fn().mockImplementation(() => ({
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-    disconnect: jest.fn(),
-  }));
-
-  let autofillOverlayList: AutofillOverlayList;
-
-  beforeEach(() => {
-    document.body.innerHTML = `<autofill-overlay-list></autofill-overlay-list>`;
-    autofillOverlayList = document.querySelector("autofill-overlay-list");
-    autofillOverlayList["messageOrigin"] = "https://localhost/";
-    jest.spyOn(globalThis.document, "createElement");
-    jest.spyOn(globalThis.parent, "postMessage");
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe("initAutofillOverlayList", () => {
-    describe("the locked overlay for an unauthenticated user", () => {
-      beforeEach(() => {
-        postWindowMessage(
-          createInitAutofillOverlayListMessageMock({
-            authStatus: AuthenticationStatus.Locked,
-            cipherList: [],
-          }),
-        );
-      });
-
-      it("creates the views for the locked overlay", () => {
-        expect(autofillOverlayList["overlayListContainer"]).toMatchSnapshot();
-      });
-
-      it("allows the user to unlock the vault", () => {
-        const unlockButton =
-          autofillOverlayList["overlayListContainer"].querySelector("#unlock-button");
-
-        unlockButton.dispatchEvent(new Event("click"));
-
-        expect(globalThis.parent.postMessage).toHaveBeenCalledWith(
-          { command: "unlockVault" },
-          "https://localhost/",
-        );
-      });
-    });
-
-    describe("the overlay with an empty list of ciphers", () => {
-      beforeEach(() => {
-        postWindowMessage(
-          createInitAutofillOverlayListMessageMock({
-            authStatus: AuthenticationStatus.Unlocked,
-            ciphers: [],
-          }),
-        );
-      });
-
-      it("creates the views for the no results overlay", () => {
-        expect(autofillOverlayList["overlayListContainer"]).toMatchSnapshot();
-      });
-
-      it("allows the user to add a vault item", () => {
-        const addVaultItemButton =
-          autofillOverlayList["overlayListContainer"].querySelector("#new-item-button");
-
-        addVaultItemButton.dispatchEvent(new Event("click"));
-
-        expect(globalThis.parent.postMessage).toHaveBeenCalledWith(
-          { command: "addNewVaultItem" },
-          "https://localhost/",
-        );
-      });
-    });
-
-    describe("the list of ciphers for an authenticated user", () => {
-      beforeEach(() => {
-        postWindowMessage(createInitAutofillOverlayListMessageMock());
-      });
-
-      it("creates the view for a list of ciphers", () => {
-        expect(autofillOverlayList["overlayListContainer"]).toMatchSnapshot();
-      });
-
-      it("loads ciphers on scroll one page at a time", () => {
-        jest.useFakeTimers();
-        const originalListOfElements =
-          autofillOverlayList["overlayListContainer"].querySelectorAll(".cipher-container");
-
-        autofillOverlayList["handleCiphersListScrollEvent"]();
-        jest.runAllTimers();
-
-        const updatedListOfElements =
-          autofillOverlayList["overlayListContainer"].querySelectorAll(".cipher-container");
-
-        expect(originalListOfElements.length).toBe(6);
-        expect(updatedListOfElements.length).toBe(8);
-      });
-
-      it("debounces the ciphers scroll handler", () => {
-        jest.useFakeTimers();
-        autofillOverlayList["cipherListScrollDebounceTimeout"] = setTimeout(jest.fn, 0);
-        const handleDebouncedScrollEventSpy = jest.spyOn(
-          autofillOverlayList as any,
-          "handleDebouncedScrollEvent",
-        );
-
-        autofillOverlayList["handleCiphersListScrollEvent"]();
-        jest.advanceTimersByTime(100);
-        autofillOverlayList["handleCiphersListScrollEvent"]();
-        jest.advanceTimersByTime(100);
-        autofillOverlayList["handleCiphersListScrollEvent"]();
-        jest.advanceTimersByTime(400);
-
-        expect(handleDebouncedScrollEventSpy).toHaveBeenCalledTimes(1);
-      });
-
-      describe("fill cipher button event listeners", () => {
-        beforeEach(() => {
-          postWindowMessage(createInitAutofillOverlayListMessageMock());
-        });
-
-        it("allows the user to fill a cipher on click", () => {
-          const fillCipherButton =
-            autofillOverlayList["overlayListContainer"].querySelector(".fill-cipher-button");
-
-          fillCipherButton.dispatchEvent(new Event("click"));
-
-          expect(globalThis.parent.postMessage).toHaveBeenCalledWith(
-            { command: "fillSelectedListItem", overlayCipherId: "1" },
-            "https://localhost/",
-          );
-        });
-
-        it("allows the user to move keyboard focus to the next cipher element on ArrowDown", () => {
-          const fillCipherElements =
-            autofillOverlayList["overlayListContainer"].querySelectorAll(".fill-cipher-button");
-          const firstFillCipherElement = fillCipherElements[0];
-          const secondFillCipherElement = fillCipherElements[1];
-          jest.spyOn(secondFillCipherElement as HTMLElement, "focus");
-
-          firstFillCipherElement.dispatchEvent(new KeyboardEvent("keyup", { code: "ArrowDown" }));
-
-          expect((secondFillCipherElement as HTMLElement).focus).toBeCalled();
-        });
-
-        it("directs focus to the first item in the cipher list if no cipher is present after the current one when pressing ArrowDown", () => {
-          const fillCipherElements =
-            autofillOverlayList["overlayListContainer"].querySelectorAll(".fill-cipher-button");
-          const lastFillCipherElement = fillCipherElements[fillCipherElements.length - 1];
-          const firstFillCipherElement = fillCipherElements[0];
-          jest.spyOn(firstFillCipherElement as HTMLElement, "focus");
-
-          lastFillCipherElement.dispatchEvent(new KeyboardEvent("keyup", { code: "ArrowDown" }));
-
-          expect((firstFillCipherElement as HTMLElement).focus).toBeCalled();
-        });
-
-        it("allows the user to move keyboard focus to the previous cipher element on ArrowUp", () => {
-          const fillCipherElements =
-            autofillOverlayList["overlayListContainer"].querySelectorAll(".fill-cipher-button");
-          const firstFillCipherElement = fillCipherElements[0];
-          const secondFillCipherElement = fillCipherElements[1];
-          jest.spyOn(firstFillCipherElement as HTMLElement, "focus");
-
-          secondFillCipherElement.dispatchEvent(new KeyboardEvent("keyup", { code: "ArrowUp" }));
-
-          expect((firstFillCipherElement as HTMLElement).focus).toBeCalled();
-        });
-
-        it("directs focus to the last item in the cipher list if no cipher is present before the current one when pressing ArrowUp", () => {
-          const fillCipherElements =
-            autofillOverlayList["overlayListContainer"].querySelectorAll(".fill-cipher-button");
-          const firstFillCipherElement = fillCipherElements[0];
-          const lastFillCipherElement = fillCipherElements[fillCipherElements.length - 1];
-          jest.spyOn(lastFillCipherElement as HTMLElement, "focus");
-
-          firstFillCipherElement.dispatchEvent(new KeyboardEvent("keyup", { code: "ArrowUp" }));
-
-          expect((lastFillCipherElement as HTMLElement).focus).toBeCalled();
-        });
-
-        it("allows the user to move keyboard focus to the view cipher button on ArrowRight", () => {
-          const cipherContainerElement =
-            autofillOverlayList["overlayListContainer"].querySelector(".cipher-container");
-          const fillCipherElement = cipherContainerElement.querySelector(".fill-cipher-button");
-          const viewCipherButton = cipherContainerElement.querySelector(".view-cipher-button");
-          jest.spyOn(viewCipherButton as HTMLElement, "focus");
-
-          fillCipherElement.dispatchEvent(new KeyboardEvent("keyup", { code: "ArrowRight" }));
-
-          expect((viewCipherButton as HTMLElement).focus).toBeCalled();
-        });
-
-        it("ignores keyup events that do not include ArrowUp, ArrowDown, or ArrowRight", () => {
-          const fillCipherElement =
-            autofillOverlayList["overlayListContainer"].querySelector(".fill-cipher-button");
-          jest.spyOn(fillCipherElement as HTMLElement, "focus");
-
-          fillCipherElement.dispatchEvent(new KeyboardEvent("keyup", { code: "ArrowLeft" }));
-
-          expect((fillCipherElement as HTMLElement).focus).not.toBeCalled();
-        });
-      });
-
-      describe("view cipher button event listeners", () => {
-        beforeEach(() => {
-          postWindowMessage(createInitAutofillOverlayListMessageMock());
-        });
-
-        it("allows the user to view a cipher on click", () => {
-          const viewCipherButton =
-            autofillOverlayList["overlayListContainer"].querySelector(".view-cipher-button");
-
-          viewCipherButton.dispatchEvent(new Event("click"));
-
-          expect(globalThis.parent.postMessage).toHaveBeenCalledWith(
-            { command: "viewSelectedCipher", overlayCipherId: "1" },
-            "https://localhost/",
-          );
-        });
-
-        it("allows the user to move keyboard focus to the current cipher element on ArrowLeft", () => {
-          const cipherContainerElement =
-            autofillOverlayList["overlayListContainer"].querySelector(".cipher-container");
-          const fillCipherButton = cipherContainerElement.querySelector(".fill-cipher-button");
-          const viewCipherButton = cipherContainerElement.querySelector(".view-cipher-button");
-          jest.spyOn(fillCipherButton as HTMLElement, "focus");
-
-          viewCipherButton.dispatchEvent(new KeyboardEvent("keyup", { code: "ArrowLeft" }));
-
-          expect((fillCipherButton as HTMLElement).focus).toBeCalled();
-        });
-
-        it("allows the user to move keyboard to the next cipher element on ArrowDown", () => {
-          const cipherContainerElements =
-            autofillOverlayList["overlayListContainer"].querySelectorAll(".cipher-container");
-          const viewCipherButton = cipherContainerElements[0].querySelector(".view-cipher-button");
-          const secondFillCipherButton =
-            cipherContainerElements[1].querySelector(".fill-cipher-button");
-          jest.spyOn(secondFillCipherButton as HTMLElement, "focus");
-
-          viewCipherButton.dispatchEvent(new KeyboardEvent("keyup", { code: "ArrowDown" }));
-
-          expect((secondFillCipherButton as HTMLElement).focus).toBeCalled();
-        });
-
-        it("allows the user to move keyboard focus to the previous cipher element on ArrowUp", () => {
-          const cipherContainerElements =
-            autofillOverlayList["overlayListContainer"].querySelectorAll(".cipher-container");
-          const viewCipherButton = cipherContainerElements[1].querySelector(".view-cipher-button");
-          const firstFillCipherButton =
-            cipherContainerElements[0].querySelector(".fill-cipher-button");
-          jest.spyOn(firstFillCipherButton as HTMLElement, "focus");
-
-          viewCipherButton.dispatchEvent(new KeyboardEvent("keyup", { code: "ArrowUp" }));
-
-          expect((firstFillCipherButton as HTMLElement).focus).toBeCalled();
-        });
-
-        it("ignores keyup events that do not include ArrowUp, ArrowDown, or ArrowRight", () => {
-          const viewCipherButton =
-            autofillOverlayList["overlayListContainer"].querySelector(".view-cipher-button");
-          jest.spyOn(viewCipherButton as HTMLElement, "focus");
-
-          viewCipherButton.dispatchEvent(new KeyboardEvent("keyup", { code: "ArrowRight" }));
-
-          expect((viewCipherButton as HTMLElement).focus).not.toBeCalled();
-        });
-      });
-    });
-  });
-
-  describe("global event listener handlers", () => {
-    it("does not post a `checkAutofillOverlayButtonFocused` message to the parent if the overlay is currently focused", () => {
-      jest.spyOn(globalThis.document, "hasFocus").mockReturnValue(true);
-
-      postWindowMessage({ command: "checkAutofillOverlayListFocused" });
-
-      expect(globalThis.parent.postMessage).not.toHaveBeenCalled();
-    });
-
-    it("posts a `checkAutofillOverlayButtonFocused` message to the parent if the overlay is not currently focused", () => {
-      jest.spyOn(globalThis.document, "hasFocus").mockReturnValue(false);
-
-      postWindowMessage({ command: "checkAutofillOverlayListFocused" });
-
-      expect(globalThis.parent.postMessage).toHaveBeenCalledWith(
-        { command: "checkAutofillOverlayButtonFocused" },
-        "https://localhost/",
-      );
-    });
-
-    it("updates the list of ciphers", () => {
-      postWindowMessage(createInitAutofillOverlayListMessageMock());
-      const updateCiphersSpy = jest.spyOn(autofillOverlayList as any, "updateListItems");
-
-      postWindowMessage({ command: "updateOverlayListCiphers" });
-
-      expect(updateCiphersSpy).toHaveBeenCalled();
-    });
-
-    describe("directing user focus into the overlay list", () => {
-      it("sets ARIA attributes that define the list as a `dialog` to screen reader users", () => {
-        postWindowMessage(
-          createInitAutofillOverlayListMessageMock({
-            authStatus: AuthenticationStatus.Locked,
-            cipherList: [],
-          }),
-        );
-        const overlayContainerSetAttributeSpy = jest.spyOn(
-          autofillOverlayList["overlayListContainer"],
-          "setAttribute",
-        );
-
-        postWindowMessage({ command: "focusOverlayList" });
-
-        expect(overlayContainerSetAttributeSpy).toHaveBeenCalledWith("role", "dialog");
-        expect(overlayContainerSetAttributeSpy).toHaveBeenCalledWith("aria-modal", "true");
-      });
-
-      it("focuses the unlock button element if the user is not authenticated", () => {
-        postWindowMessage(
-          createInitAutofillOverlayListMessageMock({
-            authStatus: AuthenticationStatus.Locked,
-            cipherList: [],
-          }),
-        );
-        const unlockButton =
-          autofillOverlayList["overlayListContainer"].querySelector("#unlock-button");
-        jest.spyOn(unlockButton as HTMLElement, "focus");
-
-        postWindowMessage({ command: "focusOverlayList" });
-
-        expect((unlockButton as HTMLElement).focus).toBeCalled();
-      });
-
-      it("focuses the new item button element if the cipher list is empty", () => {
-        postWindowMessage(createInitAutofillOverlayListMessageMock({ ciphers: [] }));
-        const newItemButton =
-          autofillOverlayList["overlayListContainer"].querySelector("#new-item-button");
-        jest.spyOn(newItemButton as HTMLElement, "focus");
-
-        postWindowMessage({ command: "focusOverlayList" });
-
-        expect((newItemButton as HTMLElement).focus).toBeCalled();
-      });
-
-      it("focuses the first cipher button element if the cipher list is populated", () => {
-        postWindowMessage(createInitAutofillOverlayListMessageMock());
-        const firstCipherItem =
-          autofillOverlayList["overlayListContainer"].querySelector(".fill-cipher-button");
-        jest.spyOn(firstCipherItem as HTMLElement, "focus");
-
-        postWindowMessage({ command: "focusOverlayList" });
-
-        expect((firstCipherItem as HTMLElement).focus).toBeCalled();
-      });
-    });
-  });
-
-  describe("handleResizeObserver", () => {
-    beforeEach(() => {
-      postWindowMessage(createInitAutofillOverlayListMessageMock());
-    });
-
-    it("ignores resize entries whose target is not the overlay list", () => {
-      const entries = [
-        {
-          target: mock<HTMLElement>(),
-          contentRect: { height: 300 },
-        },
-      ];
-
-      autofillOverlayList["handleResizeObserver"](entries as unknown as ResizeObserverEntry[]);
-
-      expect(globalThis.parent.postMessage).not.toHaveBeenCalled();
-    });
-
-    it("posts a message to update the overlay list height if the list container is resized", () => {
-      const entries = [
-        {
-          target: autofillOverlayList["overlayListContainer"],
-          contentRect: { height: 300 },
-        },
-      ];
-
-      autofillOverlayList["handleResizeObserver"](entries as unknown as ResizeObserverEntry[]);
-
-      expect(globalThis.parent.postMessage).toHaveBeenCalledWith(
-        { command: "updateAutofillOverlayListHeight", styles: { height: "300px" } },
-        "https://localhost/",
-      );
-    });
-  });
-});
diff --git a/apps/browser/src/autofill/deprecated/overlay/pages/list/autofill-overlay-list.deprecated.ts b/apps/browser/src/autofill/deprecated/overlay/pages/list/autofill-overlay-list.deprecated.ts
deleted file mode 100644
index 2ab38fe5906..00000000000
--- a/apps/browser/src/autofill/deprecated/overlay/pages/list/autofill-overlay-list.deprecated.ts
+++ /dev/null
@@ -1,621 +0,0 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
-import "@webcomponents/custom-elements";
-import "lit/polyfill-support.js";
-import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
-import { EVENTS } from "@bitwarden/common/autofill/constants";
-
-import { buildSvgDomElement } from "../../../../utils";
-import { globeIcon, lockIcon, plusIcon, viewCipherIcon } from "../../../../utils/svg-icons";
-import { OverlayCipherData } from "../../../background/abstractions/overlay.background.deprecated";
-import {
-  InitAutofillOverlayListMessage,
-  OverlayListWindowMessageHandlers,
-} from "../../abstractions/autofill-overlay-list.deprecated";
-import AutofillOverlayPageElement from "../shared/autofill-overlay-page-element.deprecated";
-
-class AutofillOverlayList extends AutofillOverlayPageElement {
-  private overlayListContainer: HTMLDivElement;
-  private resizeObserver: ResizeObserver;
-  private eventHandlersMemo: { [key: string]: EventListener } = {};
-  private ciphers: OverlayCipherData[] = [];
-  private ciphersList: HTMLUListElement;
-  private cipherListScrollIsDebounced = false;
-  private cipherListScrollDebounceTimeout: number | NodeJS.Timeout;
-  private currentCipherIndex = 0;
-  private readonly showCiphersPerPage = 6;
-  private readonly overlayListWindowMessageHandlers: OverlayListWindowMessageHandlers = {
-    initAutofillOverlayList: ({ message }) => this.initAutofillOverlayList(message),
-    checkAutofillOverlayListFocused: () => this.checkOverlayListFocused(),
-    updateOverlayListCiphers: ({ message }) => this.updateListItems(message.ciphers),
-    focusOverlayList: () => this.focusOverlayList(),
-  };
-
-  constructor() {
-    super();
-
-    this.setupOverlayListGlobalListeners();
-  }
-
-  /**
-   * Initializes the overlay list and updates the list items with the passed ciphers.
-   * If the auth status is not `Unlocked`, the locked overlay is built.
-   *
-   * @param translations - The translations to use for the overlay list.
-   * @param styleSheetUrl - The URL of the stylesheet to use for the overlay list.
-   * @param theme - The theme to use for the overlay list.
-   * @param authStatus - The current authentication status.
-   * @param ciphers - The ciphers to display in the overlay list.
-   */
-  private async initAutofillOverlayList({
-    translations,
-    styleSheetUrl,
-    theme,
-    authStatus,
-    ciphers,
-  }: InitAutofillOverlayListMessage) {
-    const linkElement = this.initOverlayPage("list", styleSheetUrl, translations);
-
-    const themeClass = `theme_${theme}`;
-    globalThis.document.documentElement.classList.add(themeClass);
-
-    this.overlayListContainer = globalThis.document.createElement("div");
-    this.overlayListContainer.classList.add("overlay-list-container", themeClass);
-    this.resizeObserver.observe(this.overlayListContainer);
-
-    this.shadowDom.append(linkElement, this.overlayListContainer);
-
-    if (authStatus === AuthenticationStatus.Unlocked) {
-      this.updateListItems(ciphers);
-      return;
-    }
-
-    this.buildLockedOverlay();
-  }
-
-  /**
-   * Builds the locked overlay, which is displayed when the user is not authenticated.
-   * Facilitates the ability to unlock the extension from the overlay.
-   */
-  private buildLockedOverlay() {
-    const lockedOverlay = globalThis.document.createElement("div");
-    lockedOverlay.id = "locked-overlay-description";
-    lockedOverlay.classList.add("locked-overlay", "overlay-list-message");
-    lockedOverlay.textContent = this.getTranslation("unlockYourAccount");
-
-    const unlockButtonElement = globalThis.document.createElement("button");
-    unlockButtonElement.id = "unlock-button";
-    unlockButtonElement.tabIndex = -1;
-    unlockButtonElement.classList.add("unlock-button", "overlay-list-button");
-    unlockButtonElement.textContent = this.getTranslation("unlockAccount");
-    unlockButtonElement.setAttribute(
-      "aria-label",
-      `${this.getTranslation("unlockAccount")}, ${this.getTranslation("opensInANewWindow")}`,
-    );
-    unlockButtonElement.prepend(buildSvgDomElement(lockIcon));
-    unlockButtonElement.addEventListener(EVENTS.CLICK, this.handleUnlockButtonClick);
-
-    const overlayListButtonContainer = globalThis.document.createElement("div");
-    overlayListButtonContainer.classList.add("overlay-list-button-container");
-    overlayListButtonContainer.appendChild(unlockButtonElement);
-
-    this.overlayListContainer.append(lockedOverlay, overlayListButtonContainer);
-  }
-
-  /**
-   * Handles the click event for the unlock button.
-   * Sends a message to the parent window to unlock the vault.
-   */
-  private handleUnlockButtonClick = () => {
-    this.postMessageToParent({ command: "unlockVault" });
-  };
-
-  /**
-   * Updates the list items with the passed ciphers.
-   * If no ciphers are passed, the no results overlay is built.
-   *
-   * @param ciphers - The ciphers to display in the overlay list.
-   */
-  private updateListItems(ciphers: OverlayCipherData[]) {
-    this.ciphers = ciphers;
-    this.currentCipherIndex = 0;
-    if (this.overlayListContainer) {
-      this.overlayListContainer.innerHTML = "";
-    }
-
-    if (!ciphers?.length) {
-      this.buildNoResultsOverlayList();
-      return;
-    }
-
-    this.ciphersList = globalThis.document.createElement("ul");
-    this.ciphersList.classList.add("overlay-actions-list");
-    this.ciphersList.setAttribute("role", "list");
-    globalThis.addEventListener(EVENTS.SCROLL, this.handleCiphersListScrollEvent);
-
-    this.loadPageOfCiphers();
-
-    this.overlayListContainer.appendChild(this.ciphersList);
-  }
-
-  /**
-   * Overlay view that is presented when no ciphers are found for a given page.
-   * Facilitates the ability to add a new vault item from the overlay.
-   */
-  private buildNoResultsOverlayList() {
-    const noItemsMessage = globalThis.document.createElement("div");
-    noItemsMessage.classList.add("no-items", "overlay-list-message");
-    noItemsMessage.textContent = this.getTranslation("noItemsToShow");
-
-    const newItemButton = globalThis.document.createElement("button");
-    newItemButton.tabIndex = -1;
-    newItemButton.id = "new-item-button";
-    newItemButton.classList.add("add-new-item-button", "overlay-list-button");
-    newItemButton.textContent = this.getTranslation("newItem");
-    newItemButton.setAttribute(
-      "aria-label",
-      `${this.getTranslation("addNewVaultItem")}, ${this.getTranslation("opensInANewWindow")}`,
-    );
-    newItemButton.prepend(buildSvgDomElement(plusIcon));
-    newItemButton.addEventListener(EVENTS.CLICK, this.handeNewItemButtonClick);
-
-    const overlayListButtonContainer = globalThis.document.createElement("div");
-    overlayListButtonContainer.classList.add("overlay-list-button-container");
-    overlayListButtonContainer.appendChild(newItemButton);
-
-    this.overlayListContainer.append(noItemsMessage, overlayListButtonContainer);
-  }
-
-  /**
-   * Handles the click event for the new item button.
-   * Sends a message to the parent window to add a new vault item.
-   */
-  private handeNewItemButtonClick = () => {
-    this.postMessageToParent({ command: "addNewVaultItem" });
-  };
-
-  /**
-   * Loads a page of ciphers into the overlay list container.
-   */
-  private loadPageOfCiphers() {
-    const lastIndex = Math.min(
-      this.currentCipherIndex + this.showCiphersPerPage,
-      this.ciphers.length,
-    );
-    for (let cipherIndex = this.currentCipherIndex; cipherIndex < lastIndex; cipherIndex++) {
-      this.ciphersList.appendChild(this.buildOverlayActionsListItem(this.ciphers[cipherIndex]));
-      this.currentCipherIndex++;
-    }
-
-    if (this.currentCipherIndex >= this.ciphers.length) {
-      globalThis.removeEventListener(EVENTS.SCROLL, this.handleCiphersListScrollEvent);
-    }
-  }
-
-  /**
-   * Handles updating the list of ciphers when the
-   * user scrolls to the bottom of the list.
-   */
-  private handleCiphersListScrollEvent = () => {
-    if (this.cipherListScrollIsDebounced) {
-      return;
-    }
-
-    this.cipherListScrollIsDebounced = true;
-    if (this.cipherListScrollDebounceTimeout) {
-      clearTimeout(this.cipherListScrollDebounceTimeout);
-    }
-    this.cipherListScrollDebounceTimeout = setTimeout(this.handleDebouncedScrollEvent, 300);
-  };
-
-  /**
-   * Debounced handler for updating the list of ciphers when the user scrolls to
-   * the bottom of the list. Triggers at most once every 300ms.
-   */
-  private handleDebouncedScrollEvent = () => {
-    this.cipherListScrollIsDebounced = false;
-
-    if (globalThis.scrollY + globalThis.innerHeight >= this.ciphersList.clientHeight - 300) {
-      this.loadPageOfCiphers();
-    }
-  };
-
-  /**
-   * Builds the list item for a given cipher.
-   *
-   * @param cipher - The cipher to build the list item for.
-   */
-  private buildOverlayActionsListItem(cipher: OverlayCipherData) {
-    const fillCipherElement = this.buildFillCipherElement(cipher);
-    const viewCipherElement = this.buildViewCipherElement(cipher);
-
-    const cipherContainerElement = globalThis.document.createElement("div");
-    cipherContainerElement.classList.add("cipher-container");
-    cipherContainerElement.append(fillCipherElement, viewCipherElement);
-
-    const overlayActionsListItem = globalThis.document.createElement("li");
-    overlayActionsListItem.setAttribute("role", "listitem");
-    overlayActionsListItem.classList.add("overlay-actions-list-item");
-    overlayActionsListItem.appendChild(cipherContainerElement);
-
-    return overlayActionsListItem;
-  }
-
-  /**
-   * Builds the fill cipher button for a given cipher.
-   * Wraps the cipher icon and details.
-   *
-   * @param cipher - The cipher to build the fill cipher button for.
-   */
-  private buildFillCipherElement(cipher: OverlayCipherData) {
-    const cipherIcon = this.buildCipherIconElement(cipher);
-    const cipherDetailsElement = this.buildCipherDetailsElement(cipher);
-
-    const fillCipherElement = globalThis.document.createElement("button");
-    fillCipherElement.tabIndex = -1;
-    fillCipherElement.classList.add("fill-cipher-button");
-    fillCipherElement.setAttribute(
-      "aria-label",
-      `${this.getTranslation("fillCredentialsFor")} ${cipher.name}`,
-    );
-    fillCipherElement.setAttribute(
-      "aria-description",
-      `${this.getTranslation("partialUsername")}, ${cipher.login.username}`,
-    );
-    fillCipherElement.append(cipherIcon, cipherDetailsElement);
-    fillCipherElement.addEventListener(EVENTS.CLICK, this.handleFillCipherClickEvent(cipher));
-    fillCipherElement.addEventListener(EVENTS.KEYUP, this.handleFillCipherKeyUpEvent);
-
-    return fillCipherElement;
-  }
-
-  /**
-   * Handles the click event for the fill cipher button.
-   * Sends a message to the parent window to fill the selected cipher.
-   *
-   * @param cipher - The cipher to fill.
-   */
-  private handleFillCipherClickEvent = (cipher: OverlayCipherData) => {
-    return this.useEventHandlersMemo(
-      () =>
-        this.postMessageToParent({
-          command: "fillSelectedListItem",
-          overlayCipherId: cipher.id,
-        }),
-      `${cipher.id}-fill-cipher-button-click-handler`,
-    );
-  };
-
-  /**
-   * Handles the keyup event for the fill cipher button. Facilitates
-   * selecting the next/previous cipher item on ArrowDown/ArrowUp. Also
-   * facilitates moving keyboard focus to the view cipher button on ArrowRight.
-   *
-   * @param event - The keyup event.
-   */
-  private handleFillCipherKeyUpEvent = (event: KeyboardEvent) => {
-    const listenedForKeys = new Set(["ArrowDown", "ArrowUp", "ArrowRight"]);
-    if (!listenedForKeys.has(event.code) || !(event.target instanceof Element)) {
-      return;
-    }
-
-    event.preventDefault();
-
-    const currentListItem = event.target.closest(".overlay-actions-list-item") as HTMLElement;
-    if (event.code === "ArrowDown") {
-      this.focusNextListItem(currentListItem);
-      return;
-    }
-
-    if (event.code === "ArrowUp") {
-      this.focusPreviousListItem(currentListItem);
-      return;
-    }
-
-    this.focusViewCipherButton(currentListItem, event.target as HTMLElement);
-  };
-
-  /**
-   * Builds the button that facilitates viewing a cipher in the vault.
-   *
-   * @param cipher - The cipher to view.
-   */
-  private buildViewCipherElement(cipher: OverlayCipherData) {
-    const viewCipherElement = globalThis.document.createElement("button");
-    viewCipherElement.tabIndex = -1;
-    viewCipherElement.classList.add("view-cipher-button");
-    viewCipherElement.setAttribute(
-      "aria-label",
-      `${this.getTranslation("view")} ${cipher.name}, ${this.getTranslation("opensInANewWindow")}`,
-    );
-    viewCipherElement.append(buildSvgDomElement(viewCipherIcon));
-    viewCipherElement.addEventListener(EVENTS.CLICK, this.handleViewCipherClickEvent(cipher));
-    viewCipherElement.addEventListener(EVENTS.KEYUP, this.handleViewCipherKeyUpEvent);
-
-    return viewCipherElement;
-  }
-
-  /**
-   * Handles the click event for the view cipher button. Sends a
-   * message to the parent window to view the selected cipher.
-   *
-   * @param cipher - The cipher to view.
-   */
-  private handleViewCipherClickEvent = (cipher: OverlayCipherData) => {
-    return this.useEventHandlersMemo(
-      () => this.postMessageToParent({ command: "viewSelectedCipher", overlayCipherId: cipher.id }),
-      `${cipher.id}-view-cipher-button-click-handler`,
-    );
-  };
-
-  /**
-   * Handles the keyup event for the view cipher button. Facilitates
-   * selecting the next/previous cipher item on ArrowDown/ArrowUp.
-   * Also facilitates moving keyboard focus to the current fill
-   * cipher button on ArrowLeft.
-   *
-   * @param event - The keyup event.
-   */
-  private handleViewCipherKeyUpEvent = (event: KeyboardEvent) => {
-    const listenedForKeys = new Set(["ArrowDown", "ArrowUp", "ArrowLeft"]);
-    if (!listenedForKeys.has(event.code) || !(event.target instanceof Element)) {
-      return;
-    }
-
-    event.preventDefault();
-
-    const currentListItem = event.target.closest(".overlay-actions-list-item") as HTMLElement;
-    const cipherContainer = currentListItem.querySelector(".cipher-container") as HTMLElement;
-    cipherContainer?.classList.remove("remove-outline");
-    if (event.code === "ArrowDown") {
-      this.focusNextListItem(currentListItem);
-      return;
-    }
-
-    if (event.code === "ArrowUp") {
-      this.focusPreviousListItem(currentListItem);
-      return;
-    }
-
-    const previousSibling = event.target.previousElementSibling as HTMLElement;
-    previousSibling?.focus();
-  };
-
-  /**
-   * Builds the icon for a given cipher. Prioritizes the favicon from a given cipher url
-   * and the default icon element within the extension. If neither are available, the
-   * globe icon is used.
-   *
-   * @param cipher - The cipher to build the icon for.
-   */
-  private buildCipherIconElement(cipher: OverlayCipherData) {
-    const cipherIcon = globalThis.document.createElement("span");
-    cipherIcon.classList.add("cipher-icon");
-    cipherIcon.setAttribute("aria-hidden", "true");
-
-    if (cipher.icon?.image) {
-      try {
-        const url = new URL(cipher.icon.image);
-        cipherIcon.style.backgroundImage = `url(${url.href})`;
-
-        const dummyImageElement = globalThis.document.createElement("img");
-        dummyImageElement.src = url.href;
-        dummyImageElement.addEventListener("error", () => {
-          cipherIcon.style.backgroundImage = "";
-          cipherIcon.classList.add("cipher-icon");
-          cipherIcon.append(buildSvgDomElement(globeIcon));
-        });
-        dummyImageElement.remove();
-
-        return cipherIcon;
-      } catch {
-        // Silently default to the globe icon element if the image URL is invalid
-      }
-    }
-
-    if (cipher.icon?.icon) {
-      const iconClasses = cipher.icon.icon.split(" ");
-      cipherIcon.classList.add("cipher-icon", "bwi", ...iconClasses);
-
-      return cipherIcon;
-    }
-
-    cipherIcon.append(buildSvgDomElement(globeIcon));
-    return cipherIcon;
-  }
-
-  /**
-   * Builds the details for a given cipher. Includes the cipher name and username login.
-   *
-   * @param cipher - The cipher to build the details for.
-   */
-  private buildCipherDetailsElement(cipher: OverlayCipherData) {
-    const cipherNameElement = this.buildCipherNameElement(cipher);
-    const cipherUserLoginElement = this.buildCipherUserLoginElement(cipher);
-
-    const cipherDetailsElement = globalThis.document.createElement("span");
-    cipherDetailsElement.classList.add("cipher-details");
-    if (cipherNameElement) {
-      cipherDetailsElement.appendChild(cipherNameElement);
-    }
-    if (cipherUserLoginElement) {
-      cipherDetailsElement.appendChild(cipherUserLoginElement);
-    }
-
-    return cipherDetailsElement;
-  }
-
-  /**
-   * Builds the name element for a given cipher.
-   *
-   * @param cipher - The cipher to build the name element for.
-   */
-  private buildCipherNameElement(cipher: OverlayCipherData): HTMLSpanElement | null {
-    if (!cipher.name) {
-      return null;
-    }
-
-    const cipherNameElement = globalThis.document.createElement("span");
-    cipherNameElement.classList.add("cipher-name");
-    cipherNameElement.textContent = cipher.name;
-    cipherNameElement.setAttribute("title", cipher.name);
-
-    return cipherNameElement;
-  }
-
-  /**
-   * Builds the username login element for a given cipher.
-   *
-   * @param cipher - The cipher to build the username login element for.
-   */
-  private buildCipherUserLoginElement(cipher: OverlayCipherData): HTMLSpanElement | null {
-    if (!cipher.login?.username) {
-      return null;
-    }
-
-    const cipherUserLoginElement = globalThis.document.createElement("span");
-    cipherUserLoginElement.classList.add("cipher-user-login");
-    cipherUserLoginElement.textContent = cipher.login.username;
-    cipherUserLoginElement.setAttribute("title", cipher.login.username);
-
-    return cipherUserLoginElement;
-  }
-
-  /**
-   * Validates whether the overlay list iframe is currently focused.
-   * If not focused, will check if the button element is focused.
-   */
-  private checkOverlayListFocused() {
-    if (globalThis.document.hasFocus()) {
-      return;
-    }
-
-    this.postMessageToParent({ command: "checkAutofillOverlayButtonFocused" });
-  }
-
-  /**
-   * Focuses the overlay list iframe. The element that receives focus is
-   * determined by the presence of the unlock button, new item button, or
-   * the first cipher button.
-   */
-  private focusOverlayList() {
-    this.overlayListContainer.setAttribute("role", "dialog");
-    this.overlayListContainer.setAttribute("aria-modal", "true");
-
-    const unlockButtonElement = this.overlayListContainer.querySelector(
-      "#unlock-button",
-    ) as HTMLElement;
-    if (unlockButtonElement) {
-      unlockButtonElement.focus();
-      return;
-    }
-
-    const newItemButtonElement = this.overlayListContainer.querySelector(
-      "#new-item-button",
-    ) as HTMLElement;
-    if (newItemButtonElement) {
-      newItemButtonElement.focus();
-      return;
-    }
-
-    const firstCipherElement = this.overlayListContainer.querySelector(
-      ".fill-cipher-button",
-    ) as HTMLElement;
-    firstCipherElement?.focus();
-  }
-
-  /**
-   * Sets up the global listeners for the overlay list iframe.
-   */
-  private setupOverlayListGlobalListeners() {
-    this.setupGlobalListeners(this.overlayListWindowMessageHandlers);
-
-    this.resizeObserver = new ResizeObserver(this.handleResizeObserver);
-  }
-
-  /**
-   * Handles the resize observer event. Facilitates updating the height of the
-   * overlay list iframe when the height of the list changes.
-   *
-   * @param entries - The resize observer entries.
-   */
-  private handleResizeObserver = (entries: ResizeObserverEntry[]) => {
-    for (let entryIndex = 0; entryIndex < entries.length; entryIndex++) {
-      const entry = entries[entryIndex];
-      if (entry.target !== this.overlayListContainer) {
-        continue;
-      }
-
-      const { height } = entry.contentRect;
-      this.postMessageToParent({
-        command: "updateAutofillOverlayListHeight",
-        styles: { height: `${height}px` },
-      });
-      break;
-    }
-  };
-
-  /**
-   * Establishes a memoized event handler for a given event.
-   *
-   * @param eventHandler - The event handler to memoize.
-   * @param memoIndex - The memo index to use for the event handler.
-   */
-  private useEventHandlersMemo = (eventHandler: EventListener, memoIndex: string) => {
-    return this.eventHandlersMemo[memoIndex] || (this.eventHandlersMemo[memoIndex] = eventHandler);
-  };
-
-  /**
-   * Focuses the next list item in the overlay list. If the current list item is the last
-   * item in the list, the first item is focused.
-   *
-   * @param currentListItem - The current list item.
-   */
-  private focusNextListItem(currentListItem: HTMLElement) {
-    const nextListItem = currentListItem.nextSibling as HTMLElement;
-    const nextSibling = nextListItem?.querySelector(".fill-cipher-button") as HTMLElement;
-    if (nextSibling) {
-      nextSibling.focus();
-      return;
-    }
-
-    const firstListItem = currentListItem.parentElement?.firstChild as HTMLElement;
-    const firstSibling = firstListItem?.querySelector(".fill-cipher-button") as HTMLElement;
-    firstSibling?.focus();
-  }
-
-  /**
-   * Focuses the previous list item in the overlay list. If the current list item is the first
-   * item in the list, the last item is focused.
-   *
-   * @param currentListItem - The current list item.
-   */
-  private focusPreviousListItem(currentListItem: HTMLElement) {
-    const previousListItem = currentListItem.previousSibling as HTMLElement;
-    const previousSibling = previousListItem?.querySelector(".fill-cipher-button") as HTMLElement;
-    if (previousSibling) {
-      previousSibling.focus();
-      return;
-    }
-
-    const lastListItem = currentListItem.parentElement?.lastChild as HTMLElement;
-    const lastSibling = lastListItem?.querySelector(".fill-cipher-button") as HTMLElement;
-    lastSibling?.focus();
-  }
-
-  /**
-   * Focuses the view cipher button relative to the current fill cipher button.
-   *
-   * @param currentListItem - The current list item.
-   * @param currentButtonElement - The current button element.
-   */
-  private focusViewCipherButton(currentListItem: HTMLElement, currentButtonElement: HTMLElement) {
-    const cipherContainer = currentListItem.querySelector(".cipher-container") as HTMLElement;
-    cipherContainer.classList.add("remove-outline");
-
-    const nextSibling = currentButtonElement.nextElementSibling as HTMLElement;
-    nextSibling?.focus();
-  }
-}
-
-export default AutofillOverlayList;
diff --git a/apps/browser/src/autofill/deprecated/overlay/pages/list/bootstrap-autofill-overlay-list.deprecated.ts b/apps/browser/src/autofill/deprecated/overlay/pages/list/bootstrap-autofill-overlay-list.deprecated.ts
deleted file mode 100644
index 5d587bd4293..00000000000
--- a/apps/browser/src/autofill/deprecated/overlay/pages/list/bootstrap-autofill-overlay-list.deprecated.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { AutofillOverlayElement } from "../../../../enums/autofill-overlay.enum";
-
-import AutofillOverlayList from "./autofill-overlay-list.deprecated";
-
-// FIXME: Remove when updating file. Eslint update
-// eslint-disable-next-line @typescript-eslint/no-require-imports
-require("./legacy-list.scss");
-
-(function () {
-  globalThis.customElements.define(AutofillOverlayElement.List, AutofillOverlayList);
-})();
diff --git a/apps/browser/src/autofill/deprecated/overlay/pages/list/legacy-list.html b/apps/browser/src/autofill/deprecated/overlay/pages/list/legacy-list.html
deleted file mode 100644
index 3edd26f7a50..00000000000
--- a/apps/browser/src/autofill/deprecated/overlay/pages/list/legacy-list.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <title>Bitwarden vault</title>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="color-scheme" content="normal" />
-  </head>
-  <body>
-    <autofill-inline-menu-list></autofill-inline-menu-list>
-  </body>
-</html>
diff --git a/apps/browser/src/autofill/deprecated/overlay/pages/list/legacy-list.scss b/apps/browser/src/autofill/deprecated/overlay/pages/list/legacy-list.scss
deleted file mode 100644
index e42d53316c6..00000000000
--- a/apps/browser/src/autofill/deprecated/overlay/pages/list/legacy-list.scss
+++ /dev/null
@@ -1,292 +0,0 @@
-@import "../../../../shared/styles/webfonts";
-@import "../../../../shared/styles/variables";
-@import "../../../../../../../../libs/angular/src/scss/icons";
-
-* {
-  box-sizing: border-box;
-}
-
-html {
-  font-size: 10px;
-}
-
-body {
-  width: 100%;
-  padding: 0;
-  margin: 0;
-
-  @include themify($themes) {
-    color: themed("textColor");
-    background-color: themed("backgroundColor");
-  }
-}
-
-.overlay-list-message {
-  font-family: $font-family-sans-serif;
-  font-weight: 400;
-  font-size: 1.4rem;
-  line-height: 1.5;
-  width: 100%;
-  padding: 0.8rem;
-
-  @include themify($themes) {
-    color: themed("textColor");
-  }
-
-  &.no-items {
-    font-size: 1.6rem;
-  }
-}
-
-.overlay-list-button-container {
-  width: 100%;
-  padding: 0.2rem;
-  background: transparent;
-  transition: background-color 0.2s ease-in-out;
-  border-top-width: 0.1rem;
-  border-top-style: solid;
-
-  @include themify($themes) {
-    border-top-color: themed("borderColor");
-  }
-
-  &:hover {
-    @include themify($themes) {
-      background: themed("backgroundOffsetColor");
-    }
-  }
-}
-
-.overlay-list-button {
-  display: flex;
-  align-content: center;
-  justify-content: flex-start;
-  width: 100%;
-  font-family: $font-family-sans-serif;
-  font-size: 1.6rem;
-  font-weight: 700;
-  text-align: left;
-  background: transparent;
-  border: none;
-  padding: 0.7rem;
-  margin: 0;
-  cursor: pointer;
-  border-radius: 0.4rem;
-
-  @include themify($themes) {
-    color: themed("primaryColor");
-  }
-
-  &:focus:focus-visible {
-    outline-width: 0.2rem;
-    outline-style: solid;
-
-    @include themify($themes) {
-      outline-color: themed("focusOutlineColor");
-    }
-  }
-
-  svg {
-    position: relative;
-    margin-left: 0.4rem;
-    margin-right: 0.8rem;
-
-    path {
-      @include themify($themes) {
-        fill: themed("primaryColor") !important;
-      }
-    }
-  }
-}
-
-.unlock-button {
-  svg {
-    top: 0.2rem;
-    width: 1.6rem;
-    height: 1.7rem;
-  }
-}
-
-.add-new-item-button {
-  svg {
-    top: 0.2rem;
-    width: 1.7rem;
-    height: 1.7rem;
-  }
-}
-
-.overlay-actions-list {
-  padding: 0;
-  margin: 0;
-}
-
-.overlay-actions-list-item {
-  transition: background-color 0.2s ease-in-out;
-  list-style: none;
-  padding: 0.2rem;
-
-  &:not(:last-child) {
-    border-bottom-width: 0.1rem;
-    border-bottom-style: solid;
-
-    @include themify($themes) {
-      border-bottom-color: themed("borderColor");
-    }
-  }
-
-  &:hover {
-    @include themify($themes) {
-      background: themed("backgroundOffsetColor");
-    }
-  }
-
-  .cipher-container {
-    display: flex;
-    align-content: flex-start;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 0.7rem 0.3rem 0.7rem 0.7rem;
-    border-radius: 0.4rem;
-
-    &:focus-within:not(.remove-outline) {
-      outline-width: 0.2rem;
-      outline-style: solid;
-
-      @include themify($themes) {
-        outline-color: themed("focusOutlineColor");
-      }
-    }
-  }
-
-  .fill-cipher-button,
-  .view-cipher-button {
-    padding: 0;
-    margin: 0;
-    line-height: 0;
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-  }
-
-  .fill-cipher-button {
-    display: flex;
-    align-items: center;
-    align-content: center;
-    justify-content: flex-start;
-    width: calc(100% - 4rem);
-    outline: none;
-  }
-
-  .view-cipher-button {
-    flex-shrink: 0;
-    width: 4rem;
-    height: 4rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 0.4rem;
-
-    &:focus:focus-visible {
-      outline-width: 0.2rem;
-      outline-style: solid;
-
-      @include themify($themes) {
-        outline-color: themed("focusOutlineColor");
-      }
-    }
-
-    svg {
-      path {
-        @include themify($themes) {
-          fill: themed("primaryColor") !important;
-        }
-      }
-    }
-  }
-
-  .cipher-icon {
-    display: flex;
-    align-content: center;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    width: 3.2rem;
-    height: 3.2rem;
-    margin: 0 1rem 0 0;
-    line-height: 0;
-    background-size: 2.6rem;
-    background-position: center;
-    background-repeat: no-repeat;
-
-    @include themify($themes) {
-      color: themed("mutedTextColor");
-    }
-
-    svg {
-      width: 100%;
-      height: auto;
-      flex-shrink: 0;
-
-      path {
-        @include themify($themes) {
-          fill: themed("primaryColor") !important;
-        }
-      }
-    }
-
-    &.bwi {
-      font-size: 2.6rem;
-
-      &:not(.cipher-icon) {
-        @include themify($themes) {
-          color: themed("primaryColor");
-        }
-
-        svg {
-          path {
-            @include themify($themes) {
-              fill: themed("primaryColor") !important;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .cipher-details {
-    display: block;
-    width: 100%;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    text-align: left;
-  }
-
-  .cipher-name,
-  .cipher-user-login {
-    display: block;
-    width: 100%;
-    line-height: 1.5;
-    font-family: $font-family-sans-serif;
-    font-weight: 400;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    cursor: pointer;
-  }
-
-  .cipher-name {
-    font-size: 1.6rem;
-
-    @include themify($themes) {
-      color: themed("textColor");
-    }
-  }
-
-  .cipher-user-login {
-    font-size: 1.4rem;
-
-    @include themify($themes) {
-      color: themed("mutedTextColor");
-    }
-  }
-}
diff --git a/apps/browser/src/autofill/deprecated/overlay/pages/shared/autofill-overlay-page-element.deprecated.spec.ts b/apps/browser/src/autofill/deprecated/overlay/pages/shared/autofill-overlay-page-element.deprecated.spec.ts
deleted file mode 100644
index b541bda0fa9..00000000000
--- a/apps/browser/src/autofill/deprecated/overlay/pages/shared/autofill-overlay-page-element.deprecated.spec.ts
+++ /dev/null
@@ -1,222 +0,0 @@
-import { mock } from "jest-mock-extended";
-
-import { OverlayButtonWindowMessageHandlers } from "../../abstractions/autofill-overlay-button.deprecated";
-
-import AutofillOverlayPageElementDeprecated from "./autofill-overlay-page-element.deprecated";
-
-describe("AutofillOverlayPageElement", () => {
-  globalThis.customElements.define(
-    "autofill-overlay-page-element",
-    AutofillOverlayPageElementDeprecated,
-  );
-  let autofillOverlayPageElement: AutofillOverlayPageElementDeprecated;
-  const translations = {
-    locale: "en",
-    buttonPageTitle: "buttonPageTitle",
-    listPageTitle: "listPageTitle",
-  };
-
-  beforeEach(() => {
-    jest.spyOn(globalThis.parent, "postMessage");
-    jest.spyOn(globalThis, "addEventListener");
-    jest.spyOn(globalThis.document, "addEventListener");
-    document.body.innerHTML = "<autofill-overlay-page-element></autofill-overlay-page-element>";
-    autofillOverlayPageElement = document.querySelector("autofill-overlay-page-element");
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe("initOverlayPage", () => {
-    beforeEach(() => {
-      jest.spyOn(globalThis.document.documentElement, "setAttribute");
-      jest.spyOn(globalThis.document, "createElement");
-    });
-
-    it("initializes the button overlay page", () => {
-      const linkElement = autofillOverlayPageElement["initOverlayPage"](
-        "button",
-        "https://jest-testing-website.com",
-        translations,
-      );
-
-      expect(globalThis.document.documentElement.setAttribute).toHaveBeenCalledWith(
-        "lang",
-        translations.locale,
-      );
-      expect(globalThis.document.head.title).toEqual(translations.buttonPageTitle);
-      expect(globalThis.document.createElement).toHaveBeenCalledWith("link");
-      expect(linkElement.getAttribute("rel")).toEqual("stylesheet");
-      expect(linkElement.getAttribute("href")).toEqual("https://jest-testing-website.com");
-    });
-  });
-
-  describe("postMessageToParent", () => {
-    it("skips posting a message to the parent if the message origin in not set", () => {
-      autofillOverlayPageElement["postMessageToParent"]({ command: "test" });
-
-      expect(globalThis.parent.postMessage).not.toHaveBeenCalled();
-    });
-
-    it("posts a message to the parent", () => {
-      autofillOverlayPageElement["messageOrigin"] = "https://jest-testing-website.com";
-      autofillOverlayPageElement["postMessageToParent"]({ command: "test" });
-
-      expect(globalThis.parent.postMessage).toHaveBeenCalledWith(
-        { command: "test" },
-        "https://jest-testing-website.com",
-      );
-    });
-  });
-
-  describe("getTranslation", () => {
-    it("returns an empty value if the translation doesn't exist in the translations object", () => {
-      autofillOverlayPageElement["translations"] = translations;
-
-      expect(autofillOverlayPageElement["getTranslation"]("test")).toEqual("");
-    });
-  });
-
-  describe("global event listeners", () => {
-    it("sets up global event listeners", () => {
-      const handleWindowMessageSpy = jest.spyOn(
-        autofillOverlayPageElement as any,
-        "handleWindowMessage",
-      );
-      const handleWindowBlurEventSpy = jest.spyOn(
-        autofillOverlayPageElement as any,
-        "handleWindowBlurEvent",
-      );
-      const handleDocumentKeyDownEventSpy = jest.spyOn(
-        autofillOverlayPageElement as any,
-        "handleDocumentKeyDownEvent",
-      );
-      autofillOverlayPageElement["setupGlobalListeners"](
-        mock<OverlayButtonWindowMessageHandlers>(),
-      );
-
-      expect(globalThis.addEventListener).toHaveBeenCalledWith("message", handleWindowMessageSpy);
-      expect(globalThis.addEventListener).toHaveBeenCalledWith("blur", handleWindowBlurEventSpy);
-      expect(globalThis.document.addEventListener).toHaveBeenCalledWith(
-        "keydown",
-        handleDocumentKeyDownEventSpy,
-      );
-    });
-
-    it("sets the message origin when handling the first passed window message", () => {
-      const initAutofillOverlayButtonSpy = jest.fn();
-      autofillOverlayPageElement["setupGlobalListeners"](
-        mock<OverlayButtonWindowMessageHandlers>({
-          initAutofillOverlayButton: initAutofillOverlayButtonSpy,
-        }),
-      );
-
-      globalThis.dispatchEvent(
-        new MessageEvent("message", {
-          data: { command: "initAutofillOverlayButton" },
-          origin: "https://jest-testing-website.com",
-        }),
-      );
-
-      expect(autofillOverlayPageElement["messageOrigin"]).toEqual(
-        "https://jest-testing-website.com",
-      );
-    });
-
-    it("handles window messages that are part of the passed windowMessageHandlers object", () => {
-      const initAutofillOverlayButtonSpy = jest.fn();
-      autofillOverlayPageElement["setupGlobalListeners"](
-        mock<OverlayButtonWindowMessageHandlers>({
-          initAutofillOverlayButton: initAutofillOverlayButtonSpy,
-        }),
-      );
-      const data = { command: "initAutofillOverlayButton" };
-
-      globalThis.dispatchEvent(new MessageEvent("message", { data }));
-
-      expect(initAutofillOverlayButtonSpy).toHaveBeenCalledWith({ message: data });
-    });
-
-    it("skips attempting to handle window messages that are not part of the passed windowMessageHandlers object", () => {
-      const initAutofillOverlayButtonSpy = jest.fn();
-      autofillOverlayPageElement["setupGlobalListeners"](
-        mock<OverlayButtonWindowMessageHandlers>({
-          initAutofillOverlayButton: initAutofillOverlayButtonSpy,
-        }),
-      );
-
-      globalThis.dispatchEvent(new MessageEvent("message", { data: { command: "test" } }));
-
-      expect(initAutofillOverlayButtonSpy).not.toHaveBeenCalled();
-    });
-
-    it("posts a message to the parent when the window is blurred", () => {
-      autofillOverlayPageElement["messageOrigin"] = "https://jest-testing-website.com";
-      autofillOverlayPageElement["setupGlobalListeners"](
-        mock<OverlayButtonWindowMessageHandlers>(),
-      );
-
-      globalThis.dispatchEvent(new Event("blur"));
-
-      expect(globalThis.parent.postMessage).toHaveBeenCalledWith(
-        { command: "overlayPageBlurred" },
-        "https://jest-testing-website.com",
-      );
-    });
-
-    it("skips redirecting keyboard focus when a KeyDown event triggers and the key is not a `Tab` or `Escape` key", () => {
-      autofillOverlayPageElement["setupGlobalListeners"](
-        mock<OverlayButtonWindowMessageHandlers>(),
-      );
-
-      globalThis.document.dispatchEvent(new KeyboardEvent("keydown", { code: "test" }));
-
-      expect(globalThis.parent.postMessage).not.toHaveBeenCalled();
-    });
-
-    it("redirects the overlay focus out to the previous element on KeyDown of the `Tab+Shift` keys", () => {
-      autofillOverlayPageElement["messageOrigin"] = "https://jest-testing-website.com";
-      autofillOverlayPageElement["setupGlobalListeners"](
-        mock<OverlayButtonWindowMessageHandlers>(),
-      );
-
-      globalThis.document.dispatchEvent(
-        new KeyboardEvent("keydown", { code: "Tab", shiftKey: true }),
-      );
-
-      expect(globalThis.parent.postMessage).toHaveBeenCalledWith(
-        { command: "redirectOverlayFocusOut", direction: "previous" },
-        "https://jest-testing-website.com",
-      );
-    });
-
-    it("redirects the overlay focus out to the next element on KeyDown of the `Tab` key", () => {
-      autofillOverlayPageElement["messageOrigin"] = "https://jest-testing-website.com";
-      autofillOverlayPageElement["setupGlobalListeners"](
-        mock<OverlayButtonWindowMessageHandlers>(),
-      );
-
-      globalThis.document.dispatchEvent(new KeyboardEvent("keydown", { code: "Tab" }));
-
-      expect(globalThis.parent.postMessage).toHaveBeenCalledWith(
-        { command: "redirectOverlayFocusOut", direction: "next" },
-        "https://jest-testing-website.com",
-      );
-    });
-
-    it("redirects the overlay focus out to the current element on KeyDown of the `Escape` key", () => {
-      autofillOverlayPageElement["messageOrigin"] = "https://jest-testing-website.com";
-      autofillOverlayPageElement["setupGlobalListeners"](
-        mock<OverlayButtonWindowMessageHandlers>(),
-      );
-
-      globalThis.document.dispatchEvent(new KeyboardEvent("keydown", { code: "Escape" }));
-
-      expect(globalThis.parent.postMessage).toHaveBeenCalledWith(
-        { command: "redirectOverlayFocusOut", direction: "current" },
-        "https://jest-testing-website.com",
-      );
-    });
-  });
-});
diff --git a/apps/browser/src/autofill/deprecated/overlay/pages/shared/autofill-overlay-page-element.deprecated.ts b/apps/browser/src/autofill/deprecated/overlay/pages/shared/autofill-overlay-page-element.deprecated.ts
deleted file mode 100644
index c388c9c307c..00000000000
--- a/apps/browser/src/autofill/deprecated/overlay/pages/shared/autofill-overlay-page-element.deprecated.ts
+++ /dev/null
@@ -1,157 +0,0 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
-import { EVENTS } from "@bitwarden/common/autofill/constants";
-
-import { RedirectFocusDirection } from "../../../../enums/autofill-overlay.enum";
-import {
-  AutofillOverlayPageElementWindowMessage,
-  WindowMessageHandlers,
-} from "../../abstractions/autofill-overlay-page-element.deprecated";
-
-class AutofillOverlayPageElement extends HTMLElement {
-  protected shadowDom: ShadowRoot;
-  protected messageOrigin: string;
-  protected translations: Record<string, string>;
-  protected windowMessageHandlers: WindowMessageHandlers;
-
-  constructor() {
-    super();
-
-    this.shadowDom = this.attachShadow({ mode: "closed" });
-  }
-
-  /**
-   * Initializes the overlay page element. Facilitates ensuring that the page
-   * is set up with the expected styles and translations.
-   *
-   * @param elementName - The name of the element, e.g. "button" or "list"
-   * @param styleSheetUrl - The URL of the stylesheet to apply to the page
-   * @param translations - The translations to apply to the page
-   */
-  protected initOverlayPage(
-    elementName: "button" | "list",
-    styleSheetUrl: string,
-    translations: Record<string, string>,
-  ): HTMLLinkElement {
-    this.translations = translations;
-    globalThis.document.documentElement.setAttribute("lang", this.getTranslation("locale"));
-    globalThis.document.head.title = this.getTranslation(`${elementName}PageTitle`);
-
-    this.shadowDom.innerHTML = "";
-    const linkElement = globalThis.document.createElement("link");
-    linkElement.setAttribute("rel", "stylesheet");
-    linkElement.setAttribute("href", styleSheetUrl);
-
-    return linkElement;
-  }
-
-  /**
-   * Posts a window message to the parent window.
-   *
-   * @param message - The message to post
-   */
-  protected postMessageToParent(message: AutofillOverlayPageElementWindowMessage) {
-    if (!this.messageOrigin) {
-      return;
-    }
-
-    globalThis.parent.postMessage(message, this.messageOrigin);
-  }
-
-  /**
-   * Gets a translation from the translations object.
-   *
-   * @param key
-   * @protected
-   */
-  protected getTranslation(key: string): string {
-    return this.translations[key] || "";
-  }
-
-  /**
-   * Sets up global listeners for the window message, window blur, and
-   * document keydown events.
-   *
-   * @param windowMessageHandlers - The window message handlers to use
-   */
-  protected setupGlobalListeners(windowMessageHandlers: WindowMessageHandlers) {
-    this.windowMessageHandlers = windowMessageHandlers;
-
-    globalThis.addEventListener(EVENTS.MESSAGE, this.handleWindowMessage);
-    globalThis.addEventListener(EVENTS.BLUR, this.handleWindowBlurEvent);
-    globalThis.document.addEventListener(EVENTS.KEYDOWN, this.handleDocumentKeyDownEvent);
-  }
-
-  /**
-   * Handles window messages from the parent window.
-   *
-   * @param event - The window message event
-   */
-  private handleWindowMessage = (event: MessageEvent) => {
-    if (!this.windowMessageHandlers) {
-      return;
-    }
-
-    if (!this.messageOrigin) {
-      this.messageOrigin = event.origin;
-    }
-
-    if (event.origin !== this.messageOrigin) {
-      return;
-    }
-
-    const message = event?.data;
-    const handler = this.windowMessageHandlers[message?.command];
-    if (!handler) {
-      return;
-    }
-
-    handler({ message });
-  };
-
-  /**
-   * Handles the window blur event.
-   */
-  private handleWindowBlurEvent = () => {
-    this.postMessageToParent({ command: "overlayPageBlurred" });
-  };
-
-  /**
-   * Handles the document keydown event. Facilitates redirecting the
-   * user focus in the right direction out of the overlay. Also facilitates
-   * closing the overlay when the user presses the Escape key.
-   *
-   * @param event - The document keydown event
-   */
-  private handleDocumentKeyDownEvent = (event: KeyboardEvent) => {
-    const listenedForKeys = new Set(["Tab", "Escape"]);
-    if (!listenedForKeys.has(event.code)) {
-      return;
-    }
-
-    event.preventDefault();
-    event.stopPropagation();
-
-    if (event.code === "Tab") {
-      this.redirectOverlayFocusOutMessage(
-        event.shiftKey ? RedirectFocusDirection.Previous : RedirectFocusDirection.Next,
-      );
-      return;
-    }
-
-    this.redirectOverlayFocusOutMessage(RedirectFocusDirection.Current);
-  };
-
-  /**
-   * Redirects the overlay focus out to the previous element on KeyDown of the `Tab+Shift` keys.
-   * Redirects the overlay focus out to the next element on KeyDown of the `Tab` key.
-   * Redirects the overlay focus out to the current element on KeyDown of the `Escape` key.
-   *
-   * @param direction - The direction to redirect the focus out
-   */
-  private redirectOverlayFocusOutMessage(direction: string) {
-    this.postMessageToParent({ command: "redirectOverlayFocusOut", direction });
-  }
-}
-
-export default AutofillOverlayPageElement;
diff --git a/apps/browser/src/autofill/deprecated/services/abstractions/autofill-overlay-content.service.ts b/apps/browser/src/autofill/deprecated/services/abstractions/autofill-overlay-content.service.ts
deleted file mode 100644
index 73acb430d71..00000000000
--- a/apps/browser/src/autofill/deprecated/services/abstractions/autofill-overlay-content.service.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
-
-import AutofillField from "../../../models/autofill-field";
-import AutofillPageDetails from "../../../models/autofill-page-details";
-import { AutofillOverlayContentService } from "../../../services/abstractions/autofill-overlay-content.service";
-import { ElementWithOpId, FormFieldElement } from "../../../types";
-
-type OpenAutofillOverlayOptions = {
-  isFocusingFieldElement?: boolean;
-  isOpeningFullOverlay?: boolean;
-  authStatus?: AuthenticationStatus;
-};
-
-interface LegacyAutofillOverlayContentService extends AutofillOverlayContentService {
-  isFieldCurrentlyFocused: boolean;
-  isCurrentlyFilling: boolean;
-  isOverlayCiphersPopulated: boolean;
-  pageDetailsUpdateRequired: boolean;
-  autofillOverlayVisibility: number;
-  init(): void;
-  setupAutofillOverlayListenerOnField(
-    autofillFieldElement: ElementWithOpId<FormFieldElement>,
-    autofillFieldData: AutofillField,
-    pageDetails: AutofillPageDetails,
-  ): Promise<void>;
-  openAutofillOverlay(options: OpenAutofillOverlayOptions): void;
-  removeAutofillOverlay(): void;
-  removeAutofillOverlayButton(): void;
-  removeAutofillOverlayList(): void;
-  addNewVaultItem(): void;
-  redirectOverlayFocusOut(direction: "previous" | "next"): void;
-  focusMostRecentOverlayField(): void;
-  blurMostRecentOverlayField(): void;
-  destroy(): void;
-}
-
-export { OpenAutofillOverlayOptions, LegacyAutofillOverlayContentService };
diff --git a/apps/browser/src/autofill/deprecated/services/autofill-overlay-content.service.deprecated.spec.ts b/apps/browser/src/autofill/deprecated/services/autofill-overlay-content.service.deprecated.spec.ts
deleted file mode 100644
index 28307834599..00000000000
--- a/apps/browser/src/autofill/deprecated/services/autofill-overlay-content.service.deprecated.spec.ts
+++ /dev/null
@@ -1,1743 +0,0 @@
-import { mock } from "jest-mock-extended";
-
-import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
-import { EVENTS, AutofillOverlayVisibility } from "@bitwarden/common/autofill/constants";
-
-import { AutofillOverlayElement, RedirectFocusDirection } from "../../enums/autofill-overlay.enum";
-import AutofillField from "../../models/autofill-field";
-import AutofillForm from "../../models/autofill-form";
-import AutofillPageDetails from "../../models/autofill-page-details";
-import { AutoFillConstants } from "../../services/autofill-constants";
-import { createAutofillFieldMock } from "../../spec/autofill-mocks";
-import { flushPromises } from "../../spec/testing-utils";
-import { ElementWithOpId, FormFieldElement } from "../../types";
-
-import AutofillOverlayContentServiceDeprecated from "./autofill-overlay-content.service.deprecated";
-
-function createMutationRecordMock(customFields = {}): MutationRecord {
-  return {
-    addedNodes: mock<NodeList>(),
-    attributeName: "default-attributeName",
-    attributeNamespace: "default-attributeNamespace",
-    nextSibling: null,
-    oldValue: "default-oldValue",
-    previousSibling: null,
-    removedNodes: mock<NodeList>(),
-    target: null,
-    type: "attributes",
-    ...customFields,
-  };
-}
-
-const defaultWindowReadyState = document.readyState;
-const defaultDocumentVisibilityState = document.visibilityState;
-describe("AutofillOverlayContentService", () => {
-  let autofillOverlayContentService: AutofillOverlayContentServiceDeprecated;
-  let sendExtensionMessageSpy: jest.SpyInstance;
-
-  beforeEach(() => {
-    autofillOverlayContentService = new AutofillOverlayContentServiceDeprecated();
-    sendExtensionMessageSpy = jest
-      .spyOn(autofillOverlayContentService as any, "sendExtensionMessage")
-      .mockResolvedValue(undefined);
-    Object.defineProperty(document, "readyState", {
-      value: defaultWindowReadyState,
-      writable: true,
-    });
-    Object.defineProperty(document, "visibilityState", {
-      value: defaultDocumentVisibilityState,
-      writable: true,
-    });
-    Object.defineProperty(document, "activeElement", {
-      value: null,
-      writable: true,
-    });
-    Object.defineProperty(window, "innerHeight", {
-      value: 1080,
-      writable: true,
-    });
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe("init", () => {
-    let setupGlobalEventListenersSpy: jest.SpyInstance;
-    let setupMutationObserverSpy: jest.SpyInstance;
-
-    beforeEach(() => {
-      jest.spyOn(document, "addEventListener");
-      jest.spyOn(window, "addEventListener");
-      setupGlobalEventListenersSpy = jest.spyOn(
-        autofillOverlayContentService as any,
-        "setupGlobalEventListeners",
-      );
-      setupMutationObserverSpy = jest.spyOn(
-        autofillOverlayContentService as any,
-        "setupMutationObserver",
-      );
-    });
-
-    it("sets up a DOMContentLoaded event listener that triggers setting up the mutation observers", () => {
-      Object.defineProperty(document, "readyState", {
-        value: "loading",
-        writable: true,
-      });
-
-      autofillOverlayContentService.init();
-
-      expect(document.addEventListener).toHaveBeenCalledWith(
-        "DOMContentLoaded",
-        setupGlobalEventListenersSpy,
-      );
-      expect(setupGlobalEventListenersSpy).not.toHaveBeenCalled();
-    });
-
-    it("sets up a visibility change listener for the DOM", () => {
-      const handleVisibilityChangeEventSpy = jest.spyOn(
-        autofillOverlayContentService as any,
-        "handleVisibilityChangeEvent",
-      );
-
-      autofillOverlayContentService.init();
-
-      expect(document.addEventListener).toHaveBeenCalledWith(
-        "visibilitychange",
-        handleVisibilityChangeEventSpy,
-      );
-    });
-
-    it("sets up a focus out listener for the window", () => {
-      const handleFormFieldBlurEventSpy = jest.spyOn(
-        autofillOverlayContentService as any,
-        "handleFormFieldBlurEvent",
-      );
-
-      autofillOverlayContentService.init();
-
-      expect(window.addEventListener).toHaveBeenCalledWith("focusout", handleFormFieldBlurEventSpy);
-    });
-
-    it("sets up mutation observers for the body element", () => {
-      jest
-        .spyOn(globalThis, "MutationObserver")
-        .mockImplementation(() => mock<MutationObserver>({ observe: jest.fn() }));
-      const handleOverlayElementMutationObserverUpdateSpy = jest.spyOn(
-        autofillOverlayContentService as any,
-        "handleOverlayElementMutationObserverUpdate",
-      );
-      const handleBodyElementMutationObserverUpdateSpy = jest.spyOn(
-        autofillOverlayContentService as any,
-        "handleBodyElementMutationObserverUpdate",
-      );
-      autofillOverlayContentService.init();
-
-      expect(setupMutationObserverSpy).toHaveBeenCalledTimes(1);
-      expect(globalThis.MutationObserver).toHaveBeenNthCalledWith(
-        1,
-        handleOverlayElementMutationObserverUpdateSpy,
-      );
-      expect(globalThis.MutationObserver).toHaveBeenNthCalledWith(
-        2,
-        handleBodyElementMutationObserverUpdateSpy,
-      );
-    });
-  });
-
-  describe("setupAutofillOverlayListenerOnField", () => {
-    let autofillFieldElement: ElementWithOpId<FormFieldElement>;
-    let autofillFieldData: AutofillField;
-    let pageDetailsMock: AutofillPageDetails;
-
-    beforeEach(() => {
-      document.body.innerHTML = `
-      <form id="validFormId">
-        <input type="text" id="username-field" placeholder="username" />
-        <input type="password" id="password-field" placeholder="password" />
-      </form>
-      `;
-
-      autofillFieldElement = document.getElementById(
-        "username-field",
-      ) as ElementWithOpId<FormFieldElement>;
-      autofillFieldElement.opid = "op-1";
-      jest.spyOn(autofillFieldElement, "addEventListener");
-      autofillFieldData = createAutofillFieldMock({
-        opid: "username-field",
-        form: "validFormId",
-        placeholder: "username",
-        elementNumber: 1,
-      });
-      const passwordFieldData = createAutofillFieldMock({
-        opid: "password-field",
-        form: "validFormId",
-        elementNumber: 2,
-        autocompleteType: "current-password",
-        type: "password",
-      });
-      pageDetailsMock = mock<AutofillPageDetails>({
-        forms: { validFormId: mock<AutofillForm>() },
-        fields: [autofillFieldData, passwordFieldData],
-      });
-    });
-
-    describe("skips setup for ignored form fields", () => {
-      beforeEach(() => {
-        autofillFieldData = mock<AutofillField>({
-          type: "text",
-          htmlName: "username",
-          htmlID: "username",
-          placeholder: "username",
-        });
-      });
-
-      it("ignores fields that are readonly", async () => {
-        autofillFieldData.readonly = true;
-
-        await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
-          autofillFieldElement,
-          autofillFieldData,
-          pageDetailsMock,
-        );
-
-        expect(autofillFieldElement.addEventListener).not.toHaveBeenCalled();
-      });
-
-      it("ignores fields that contain a disabled attribute", async () => {
-        autofillFieldData.disabled = true;
-
-        await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
-          autofillFieldElement,
-          autofillFieldData,
-          pageDetailsMock,
-        );
-
-        expect(autofillFieldElement.addEventListener).not.toHaveBeenCalled();
-      });
-
-      it("ignores fields that are not viewable", async () => {
-        autofillFieldData.viewable = false;
-
-        await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
-          autofillFieldElement,
-          autofillFieldData,
-          pageDetailsMock,
-        );
-
-        expect(autofillFieldElement.addEventListener).not.toHaveBeenCalled();
-      });
-
-      it("ignores fields that are part of the ExcludedOverlayTypes", () => {
-        AutoFillConstants.ExcludedInlineMenuTypes.forEach(async (excludedType) => {
-          autofillFieldData.type = excludedType;
-
-          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
-            autofillFieldElement,
-            autofillFieldData,
-            pageDetailsMock,
-          );
-
-          expect(autofillFieldElement.addEventListener).not.toHaveBeenCalled();
-        });
-      });
-
-      it("ignores fields that contain the keyword `search`", async () => {
-        autofillFieldData.placeholder = "search";
-
-        await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
-          autofillFieldElement,
-          autofillFieldData,
-          pageDetailsMock,
-        );
-
-        expect(autofillFieldElement.addEventListener).not.toHaveBeenCalled();
-      });
-
-      it("ignores fields that contain the keyword `captcha` ", async () => {
-        autofillFieldData.placeholder = "captcha";
-
-        await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
-          autofillFieldElement,
-          autofillFieldData,
-          pageDetailsMock,
-        );
-
-        expect(autofillFieldElement.addEventListener).not.toHaveBeenCalled();
-      });
-
-      it("ignores fields that do not appear as a login field", async () => {
-        autofillFieldData.placeholder = "not-a-login-field";
-
-        await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
-          autofillFieldElement,
-          autofillFieldData,
-          pageDetailsMock,
-        );
-
-        expect(autofillFieldElement.addEventListener).not.toHaveBeenCalled();
-      });
-    });
-
-    it("skips setup on fields that have been previously set up", async () => {
-      autofillOverlayContentService["formFieldElements"].add(autofillFieldElement);
-
-      await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
-        autofillFieldElement,
-        autofillFieldData,
-        pageDetailsMock,
-      );
-
-      expect(autofillFieldElement.addEventListener).not.toHaveBeenCalled();
-    });
-
-    describe("identifies the overlay visibility setting", () => {
-      it("defaults the overlay visibility setting to `OnFieldFocus` if a value is not set", async () => {
-        sendExtensionMessageSpy.mockResolvedValueOnce(undefined);
-        autofillOverlayContentService["autofillOverlayVisibility"] = undefined;
-
-        await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
-          autofillFieldElement,
-          autofillFieldData,
-          pageDetailsMock,
-        );
-
-        expect(sendExtensionMessageSpy).toHaveBeenCalledWith("getAutofillOverlayVisibility");
-        expect(autofillOverlayContentService["autofillOverlayVisibility"]).toEqual(
-          AutofillOverlayVisibility.OnFieldFocus,
-        );
-      });
-
-      it("sets the overlay visibility setting to the value returned from the background script", async () => {
-        sendExtensionMessageSpy.mockResolvedValueOnce(AutofillOverlayVisibility.OnFieldFocus);
-        autofillOverlayContentService["autofillOverlayVisibility"] = undefined;
-
-        await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
-          autofillFieldElement,
-          autofillFieldData,
-          pageDetailsMock,
-        );
-
-        expect(autofillOverlayContentService["autofillOverlayVisibility"]).toEqual(
-          AutofillOverlayVisibility.OnFieldFocus,
-        );
-      });
-    });
-
-    describe("sets up form field element listeners", () => {
-      it("removes all cached event listeners from the form field element", async () => {
-        jest.spyOn(autofillFieldElement, "removeEventListener");
-        const inputHandler = jest.fn();
-        const clickHandler = jest.fn();
-        const focusHandler = jest.fn();
-        autofillOverlayContentService["eventHandlersMemo"] = {
-          "op-1-username-field-input-handler": inputHandler,
-          "op-1-username-field-click-handler": clickHandler,
-          "op-1-username-field-focus-handler": focusHandler,
-        };
-
-        await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
-          autofillFieldElement,
-          autofillFieldData,
-          pageDetailsMock,
-        );
-
-        expect(autofillFieldElement.removeEventListener).toHaveBeenNthCalledWith(
-          1,
-          "input",
-          inputHandler,
-        );
-        expect(autofillFieldElement.removeEventListener).toHaveBeenNthCalledWith(
-          2,
-          "click",
-          clickHandler,
-        );
-        expect(autofillFieldElement.removeEventListener).toHaveBeenNthCalledWith(
-          3,
-          "focus",
-          focusHandler,
-        );
-      });
-
-      describe("form field blur event listener", () => {
-        beforeEach(async () => {
-          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
-            autofillFieldElement,
-            autofillFieldData,
-            pageDetailsMock,
-          );
-        });
-
-        it("updates the isFieldCurrentlyFocused value to false", async () => {
-          autofillOverlayContentService["isFieldCurrentlyFocused"] = true;
-
-          autofillFieldElement.dispatchEvent(new Event("blur"));
-
-          expect(autofillOverlayContentService["isFieldCurrentlyFocused"]).toEqual(false);
-        });
-
-        it("sends a message to the background to check if the overlay is focused", () => {
-          autofillFieldElement.dispatchEvent(new Event("blur"));
-
-          expect(sendExtensionMessageSpy).toHaveBeenCalledWith("checkAutofillOverlayFocused");
-        });
-      });
-
-      describe("form field keyup event listener", () => {
-        beforeEach(async () => {
-          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
-            autofillFieldElement,
-            autofillFieldData,
-            pageDetailsMock,
-          );
-          jest.spyOn(globalThis.customElements, "define").mockImplementation();
-        });
-
-        it("removes the autofill overlay when the `Escape` key is pressed", () => {
-          jest.spyOn(autofillOverlayContentService as any, "removeAutofillOverlay");
-
-          autofillFieldElement.dispatchEvent(new KeyboardEvent("keyup", { code: "Escape" }));
-
-          expect(autofillOverlayContentService.removeAutofillOverlay).toHaveBeenCalled();
-        });
-
-        it("repositions the overlay if autofill is not currently filling when the `Enter` key is pressed", () => {
-          const handleOverlayRepositionEventSpy = jest.spyOn(
-            autofillOverlayContentService as any,
-            "handleOverlayRepositionEvent",
-          );
-          autofillOverlayContentService["isCurrentlyFilling"] = false;
-
-          autofillFieldElement.dispatchEvent(new KeyboardEvent("keyup", { code: "Enter" }));
-
-          expect(handleOverlayRepositionEventSpy).toHaveBeenCalled();
-        });
-
-        it("skips repositioning the overlay if autofill is currently filling when the `Enter` key is pressed", () => {
-          const handleOverlayRepositionEventSpy = jest.spyOn(
-            autofillOverlayContentService as any,
-            "handleOverlayRepositionEvent",
-          );
-          autofillOverlayContentService["isCurrentlyFilling"] = true;
-
-          autofillFieldElement.dispatchEvent(new KeyboardEvent("keyup", { code: "Enter" }));
-
-          expect(handleOverlayRepositionEventSpy).not.toHaveBeenCalled();
-        });
-
-        it("opens the overlay list and focuses it after a delay if it is not visible when the `ArrowDown` key is pressed", async () => {
-          jest.useFakeTimers();
-          const updateMostRecentlyFocusedFieldSpy = jest.spyOn(
-            autofillOverlayContentService as any,
-            "updateMostRecentlyFocusedField",
-          );
-          const openAutofillOverlaySpy = jest.spyOn(
-            autofillOverlayContentService as any,
-            "openAutofillOverlay",
-          );
-          autofillOverlayContentService["isOverlayListVisible"] = false;
-
-          autofillFieldElement.dispatchEvent(new KeyboardEvent("keyup", { code: "ArrowDown" }));
-          await flushPromises();
-
-          expect(updateMostRecentlyFocusedFieldSpy).toHaveBeenCalledWith(autofillFieldElement);
-          expect(openAutofillOverlaySpy).toHaveBeenCalledWith({ isOpeningFullOverlay: true });
-          expect(sendExtensionMessageSpy).not.toHaveBeenCalledWith("focusAutofillOverlayList");
-
-          jest.advanceTimersByTime(150);
-
-          expect(sendExtensionMessageSpy).toHaveBeenCalledWith("focusAutofillOverlayList");
-        });
-
-        it("focuses the overlay list when the `ArrowDown` key is pressed", () => {
-          autofillOverlayContentService["isOverlayListVisible"] = true;
-
-          autofillFieldElement.dispatchEvent(new KeyboardEvent("keyup", { code: "ArrowDown" }));
-
-          expect(sendExtensionMessageSpy).toHaveBeenCalledWith("focusAutofillOverlayList");
-        });
-      });
-
-      describe("form field input change event listener", () => {
-        beforeEach(() => {
-          jest.spyOn(globalThis.customElements, "define").mockImplementation();
-        });
-
-        it("ignores span elements that trigger the listener", async () => {
-          const spanAutofillFieldElement = document.createElement(
-            "span",
-          ) as ElementWithOpId<HTMLSpanElement>;
-          jest.spyOn(autofillOverlayContentService as any, "storeModifiedFormElement");
-
-          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
-            spanAutofillFieldElement,
-            autofillFieldData,
-            pageDetailsMock,
-          );
-
-          spanAutofillFieldElement.dispatchEvent(new Event("input"));
-
-          expect(autofillOverlayContentService["storeModifiedFormElement"]).not.toHaveBeenCalled();
-        });
-
-        it("stores the field as a user filled field if the form field data indicates that it is for a username", async () => {
-          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
-            autofillFieldElement,
-            autofillFieldData,
-            pageDetailsMock,
-          );
-          autofillFieldElement.dispatchEvent(new Event("input"));
-
-          expect(autofillOverlayContentService["userFilledFields"].username).toEqual(
-            autofillFieldElement,
-          );
-        });
-
-        it("stores the field as a user filled field if the form field is of type password", async () => {
-          const passwordFieldElement = document.getElementById(
-            "password-field",
-          ) as ElementWithOpId<FormFieldElement>;
-
-          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
-            passwordFieldElement,
-            autofillFieldData,
-            pageDetailsMock,
-          );
-          passwordFieldElement.dispatchEvent(new Event("input"));
-
-          expect(autofillOverlayContentService["userFilledFields"].password).toEqual(
-            passwordFieldElement,
-          );
-        });
-
-        it("removes the overlay if the form field element has a value and the user is not authed", async () => {
-          jest.spyOn(autofillOverlayContentService as any, "isUserAuthed").mockReturnValue(false);
-          const removeAutofillOverlayListSpy = jest.spyOn(
-            autofillOverlayContentService as any,
-            "removeAutofillOverlayList",
-          );
-          (autofillFieldElement as HTMLInputElement).value = "test";
-
-          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
-            autofillFieldElement,
-            autofillFieldData,
-            pageDetailsMock,
-          );
-          autofillFieldElement.dispatchEvent(new Event("input"));
-
-          expect(removeAutofillOverlayListSpy).toHaveBeenCalled();
-        });
-
-        it("removes the overlay if the form field element has a value and the overlay ciphers are populated", async () => {
-          jest.spyOn(autofillOverlayContentService as any, "isUserAuthed").mockReturnValue(true);
-          autofillOverlayContentService["isOverlayCiphersPopulated"] = true;
-          const removeAutofillOverlayListSpy = jest.spyOn(
-            autofillOverlayContentService as any,
-            "removeAutofillOverlayList",
-          );
-          (autofillFieldElement as HTMLInputElement).value = "test";
-
-          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
-            autofillFieldElement,
-            autofillFieldData,
-            pageDetailsMock,
-          );
-          autofillFieldElement.dispatchEvent(new Event("input"));
-
-          expect(removeAutofillOverlayListSpy).toHaveBeenCalled();
-        });
-
-        it("opens the autofill overlay if the form field is empty", async () => {
-          jest.spyOn(autofillOverlayContentService as any, "openAutofillOverlay");
-          (autofillFieldElement as HTMLInputElement).value = "";
-
-          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
-            autofillFieldElement,
-            autofillFieldData,
-            pageDetailsMock,
-          );
-          autofillFieldElement.dispatchEvent(new Event("input"));
-
-          expect(autofillOverlayContentService["openAutofillOverlay"]).toHaveBeenCalled();
-        });
-
-        it("opens the autofill overlay if the form field is empty and the user is authed", async () => {
-          jest.spyOn(autofillOverlayContentService as any, "isUserAuthed").mockReturnValue(true);
-          jest.spyOn(autofillOverlayContentService as any, "openAutofillOverlay");
-          (autofillFieldElement as HTMLInputElement).value = "";
-
-          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
-            autofillFieldElement,
-            autofillFieldData,
-            pageDetailsMock,
-          );
-          autofillFieldElement.dispatchEvent(new Event("input"));
-
-          expect(autofillOverlayContentService["openAutofillOverlay"]).toHaveBeenCalled();
-        });
-
-        it("opens the autofill overlay if the form field is empty and the overlay ciphers are not populated", async () => {
-          jest.spyOn(autofillOverlayContentService as any, "isUserAuthed").mockReturnValue(false);
-          autofillOverlayContentService["isOverlayCiphersPopulated"] = false;
-          jest.spyOn(autofillOverlayContentService as any, "openAutofillOverlay");
-          (autofillFieldElement as HTMLInputElement).value = "";
-
-          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
-            autofillFieldElement,
-            autofillFieldData,
-            pageDetailsMock,
-          );
-          autofillFieldElement.dispatchEvent(new Event("input"));
-
-          expect(autofillOverlayContentService["openAutofillOverlay"]).toHaveBeenCalled();
-        });
-      });
-
-      describe("form field click event listener", () => {
-        beforeEach(async () => {
-          jest
-            .spyOn(autofillOverlayContentService as any, "triggerFormFieldFocusedAction")
-            .mockImplementation();
-          autofillOverlayContentService["isOverlayListVisible"] = false;
-          autofillOverlayContentService["isOverlayListVisible"] = false;
-          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
-            autofillFieldElement,
-            autofillFieldData,
-            pageDetailsMock,
-          );
-        });
-
-        it("triggers the field focused handler if the overlay is not visible", async () => {
-          autofillFieldElement.dispatchEvent(new Event("click"));
-
-          expect(autofillOverlayContentService["triggerFormFieldFocusedAction"]).toHaveBeenCalled();
-        });
-
-        it("skips triggering the field focused handler if the overlay list is visible", () => {
-          autofillOverlayContentService["isOverlayListVisible"] = true;
-
-          autofillFieldElement.dispatchEvent(new Event("click"));
-
-          expect(
-            autofillOverlayContentService["triggerFormFieldFocusedAction"],
-          ).not.toHaveBeenCalled();
-        });
-
-        it("skips triggering the field focused handler if the overlay button is visible", () => {
-          autofillOverlayContentService["isOverlayButtonVisible"] = true;
-
-          autofillFieldElement.dispatchEvent(new Event("click"));
-
-          expect(
-            autofillOverlayContentService["triggerFormFieldFocusedAction"],
-          ).not.toHaveBeenCalled();
-        });
-      });
-
-      describe("form field focus event listener", () => {
-        let updateMostRecentlyFocusedFieldSpy: jest.SpyInstance;
-
-        beforeEach(() => {
-          jest.spyOn(globalThis.customElements, "define").mockImplementation();
-          updateMostRecentlyFocusedFieldSpy = jest.spyOn(
-            autofillOverlayContentService as any,
-            "updateMostRecentlyFocusedField",
-          );
-          autofillOverlayContentService["isCurrentlyFilling"] = false;
-        });
-
-        it("skips triggering the handler logic if autofill is currently filling", async () => {
-          autofillOverlayContentService["isCurrentlyFilling"] = true;
-          autofillOverlayContentService["mostRecentlyFocusedField"] = autofillFieldElement;
-          autofillOverlayContentService["autofillOverlayVisibility"] =
-            AutofillOverlayVisibility.OnFieldFocus;
-          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
-            autofillFieldElement,
-            autofillFieldData,
-            pageDetailsMock,
-          );
-
-          autofillFieldElement.dispatchEvent(new Event("focus"));
-
-          expect(updateMostRecentlyFocusedFieldSpy).not.toHaveBeenCalled();
-        });
-
-        it("updates the most recently focused field", async () => {
-          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
-            autofillFieldElement,
-            autofillFieldData,
-            pageDetailsMock,
-          );
-
-          autofillFieldElement.dispatchEvent(new Event("focus"));
-
-          expect(updateMostRecentlyFocusedFieldSpy).toHaveBeenCalledWith(autofillFieldElement);
-          expect(autofillOverlayContentService["mostRecentlyFocusedField"]).toEqual(
-            autofillFieldElement,
-          );
-        });
-
-        it("removes the overlay list if the autofill visibility is set to onClick", async () => {
-          autofillOverlayContentService["overlayListElement"] = document.createElement("div");
-          autofillOverlayContentService["autofillOverlayVisibility"] =
-            AutofillOverlayVisibility.OnButtonClick;
-          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
-            autofillFieldElement,
-            autofillFieldData,
-            pageDetailsMock,
-          );
-
-          autofillFieldElement.dispatchEvent(new Event("focus"));
-          await flushPromises();
-
-          expect(sendExtensionMessageSpy).toHaveBeenCalledWith("autofillOverlayElementClosed", {
-            overlayElement: AutofillOverlayElement.List,
-          });
-        });
-
-        it("removes the overlay list if the form element has a value and the focused field is newly focused", async () => {
-          autofillOverlayContentService["overlayListElement"] = document.createElement("div");
-          autofillOverlayContentService["mostRecentlyFocusedField"] = document.createElement(
-            "input",
-          ) as ElementWithOpId<HTMLInputElement>;
-          (autofillFieldElement as HTMLInputElement).value = "test";
-          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
-            autofillFieldElement,
-            autofillFieldData,
-            pageDetailsMock,
-          );
-
-          autofillFieldElement.dispatchEvent(new Event("focus"));
-          await flushPromises();
-
-          expect(sendExtensionMessageSpy).toHaveBeenCalledWith("autofillOverlayElementClosed", {
-            overlayElement: AutofillOverlayElement.List,
-          });
-        });
-
-        it("opens the autofill overlay if the form element has no value", async () => {
-          autofillOverlayContentService["overlayListElement"] = document.createElement("div");
-          (autofillFieldElement as HTMLInputElement).value = "";
-          autofillOverlayContentService["autofillOverlayVisibility"] =
-            AutofillOverlayVisibility.OnFieldFocus;
-          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
-            autofillFieldElement,
-            autofillFieldData,
-            pageDetailsMock,
-          );
-
-          autofillFieldElement.dispatchEvent(new Event("focus"));
-          await flushPromises();
-
-          expect(sendExtensionMessageSpy).toHaveBeenCalledWith("openAutofillOverlay");
-        });
-
-        it("opens the autofill overlay if the overlay ciphers are not populated and the user is authed", async () => {
-          autofillOverlayContentService["overlayListElement"] = document.createElement("div");
-          (autofillFieldElement as HTMLInputElement).value = "";
-          autofillOverlayContentService["autofillOverlayVisibility"] =
-            AutofillOverlayVisibility.OnFieldFocus;
-          jest.spyOn(autofillOverlayContentService as any, "isUserAuthed").mockReturnValue(true);
-          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
-            autofillFieldElement,
-            autofillFieldData,
-            pageDetailsMock,
-          );
-
-          autofillFieldElement.dispatchEvent(new Event("focus"));
-          await flushPromises();
-
-          expect(sendExtensionMessageSpy).toHaveBeenCalledWith("openAutofillOverlay");
-        });
-
-        it("updates the overlay button position if the focus event is not opening the overlay", async () => {
-          autofillOverlayContentService["autofillOverlayVisibility"] =
-            AutofillOverlayVisibility.OnFieldFocus;
-          (autofillFieldElement as HTMLInputElement).value = "test";
-          autofillOverlayContentService["isOverlayCiphersPopulated"] = true;
-          await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
-            autofillFieldElement,
-            autofillFieldData,
-            pageDetailsMock,
-          );
-
-          autofillFieldElement.dispatchEvent(new Event("focus"));
-          await flushPromises();
-
-          expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillOverlayPosition", {
-            overlayElement: AutofillOverlayElement.Button,
-          });
-        });
-      });
-    });
-
-    it("triggers the form field focused handler if the current active element in the document is the passed form field", async () => {
-      const documentRoot = autofillFieldElement.getRootNode() as Document;
-      Object.defineProperty(documentRoot, "activeElement", {
-        value: autofillFieldElement,
-        writable: true,
-      });
-
-      await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
-        autofillFieldElement,
-        autofillFieldData,
-        pageDetailsMock,
-      );
-
-      expect(sendExtensionMessageSpy).toHaveBeenCalledWith("openAutofillOverlay");
-      expect(autofillOverlayContentService["mostRecentlyFocusedField"]).toEqual(
-        autofillFieldElement,
-      );
-    });
-
-    it("sets the most recently focused field to the passed form field element if the value is not set", async () => {
-      autofillOverlayContentService["mostRecentlyFocusedField"] = undefined;
-
-      await autofillOverlayContentService.setupAutofillOverlayListenerOnField(
-        autofillFieldElement,
-        autofillFieldData,
-        pageDetailsMock,
-      );
-
-      expect(autofillOverlayContentService["mostRecentlyFocusedField"]).toEqual(
-        autofillFieldElement,
-      );
-    });
-  });
-
-  describe("openAutofillOverlay", () => {
-    let autofillFieldElement: ElementWithOpId<FormFieldElement>;
-
-    beforeEach(() => {
-      document.body.innerHTML = `
-      <form id="validFormId">
-        <input type="text" id="username-field" placeholder="username" />
-        <input type="password" id="password-field" placeholder="password" />
-      </form>
-      `;
-
-      autofillFieldElement = document.getElementById(
-        "username-field",
-      ) as ElementWithOpId<FormFieldElement>;
-      autofillFieldElement.opid = "op-1";
-      autofillOverlayContentService["mostRecentlyFocusedField"] = autofillFieldElement;
-    });
-
-    it("skips opening the overlay if a field has not been recently focused", () => {
-      autofillOverlayContentService["mostRecentlyFocusedField"] = undefined;
-
-      autofillOverlayContentService["openAutofillOverlay"]();
-
-      expect(sendExtensionMessageSpy).not.toHaveBeenCalled();
-    });
-
-    it("focuses the most recent overlay field if the field is not focused", () => {
-      jest.spyOn(autofillFieldElement, "getRootNode").mockReturnValue(document);
-      Object.defineProperty(document, "activeElement", {
-        value: document.createElement("div"),
-        writable: true,
-      });
-      const focusMostRecentOverlayFieldSpy = jest.spyOn(
-        autofillOverlayContentService as any,
-        "focusMostRecentOverlayField",
-      );
-
-      autofillOverlayContentService["openAutofillOverlay"]({ isFocusingFieldElement: true });
-
-      expect(focusMostRecentOverlayFieldSpy).toHaveBeenCalled();
-    });
-
-    it("skips focusing the most recent overlay field if the field is already focused", () => {
-      jest.spyOn(autofillFieldElement, "getRootNode").mockReturnValue(document);
-      Object.defineProperty(document, "activeElement", {
-        value: autofillFieldElement,
-        writable: true,
-      });
-      const focusMostRecentOverlayFieldSpy = jest.spyOn(
-        autofillOverlayContentService as any,
-        "focusMostRecentOverlayField",
-      );
-
-      autofillOverlayContentService["openAutofillOverlay"]({ isFocusingFieldElement: true });
-
-      expect(focusMostRecentOverlayFieldSpy).not.toHaveBeenCalled();
-    });
-
-    it("stores the user's auth status", () => {
-      autofillOverlayContentService["authStatus"] = undefined;
-
-      autofillOverlayContentService["openAutofillOverlay"]({
-        authStatus: AuthenticationStatus.Unlocked,
-      });
-
-      expect(autofillOverlayContentService["authStatus"]).toEqual(AuthenticationStatus.Unlocked);
-    });
-
-    it("opens both autofill overlay elements", () => {
-      autofillOverlayContentService["mostRecentlyFocusedField"] = autofillFieldElement;
-
-      autofillOverlayContentService["openAutofillOverlay"]();
-
-      expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillOverlayPosition", {
-        overlayElement: AutofillOverlayElement.Button,
-      });
-      expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillOverlayPosition", {
-        overlayElement: AutofillOverlayElement.List,
-      });
-    });
-
-    it("opens the autofill overlay button only if overlay visibility is set for onButtonClick", () => {
-      autofillOverlayContentService["autofillOverlayVisibility"] =
-        AutofillOverlayVisibility.OnButtonClick;
-
-      autofillOverlayContentService["openAutofillOverlay"]({ isOpeningFullOverlay: false });
-
-      expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillOverlayPosition", {
-        overlayElement: AutofillOverlayElement.Button,
-      });
-      expect(sendExtensionMessageSpy).not.toHaveBeenCalledWith("updateAutofillOverlayPosition", {
-        overlayElement: AutofillOverlayElement.List,
-      });
-    });
-
-    it("overrides the onButtonClick visibility setting to open both overlay elements", () => {
-      autofillOverlayContentService["autofillOverlayVisibility"] =
-        AutofillOverlayVisibility.OnButtonClick;
-
-      autofillOverlayContentService["openAutofillOverlay"]({ isOpeningFullOverlay: true });
-
-      expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillOverlayPosition", {
-        overlayElement: AutofillOverlayElement.Button,
-      });
-      expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillOverlayPosition", {
-        overlayElement: AutofillOverlayElement.List,
-      });
-    });
-
-    it("sends an extension message requesting an re-collection of page details if they need to update", () => {
-      jest.spyOn(autofillOverlayContentService as any, "sendExtensionMessage");
-      autofillOverlayContentService.pageDetailsUpdateRequired = true;
-
-      autofillOverlayContentService["openAutofillOverlay"]();
-
-      expect(sendExtensionMessageSpy).toHaveBeenCalledWith("bgCollectPageDetails", {
-        sender: "autofillOverlayContentService",
-      });
-    });
-
-    it("builds the overlay elements as custom web components if the user's browser is not Firefox", () => {
-      let namesIndex = 0;
-      const customNames = ["op-autofill-overlay-button", "op-autofill-overlay-list"];
-
-      jest
-        .spyOn(autofillOverlayContentService as any, "generateRandomCustomElementName")
-        .mockImplementation(() => {
-          if (namesIndex > 1) {
-            return "";
-          }
-          const customName = customNames[namesIndex];
-          namesIndex++;
-
-          return customName;
-        });
-      autofillOverlayContentService["isFirefoxBrowser"] = false;
-
-      autofillOverlayContentService.openAutofillOverlay();
-
-      expect(autofillOverlayContentService["overlayButtonElement"]).toBeInstanceOf(HTMLElement);
-      expect(autofillOverlayContentService["overlayButtonElement"].tagName).toEqual(
-        customNames[0].toUpperCase(),
-      );
-      expect(autofillOverlayContentService["overlayListElement"]).toBeInstanceOf(HTMLElement);
-      expect(autofillOverlayContentService["overlayListElement"].tagName).toEqual(
-        customNames[1].toUpperCase(),
-      );
-    });
-
-    it("builds the overlay elements as `div` elements if the user's browser is Firefox", () => {
-      autofillOverlayContentService["isFirefoxBrowser"] = true;
-
-      autofillOverlayContentService.openAutofillOverlay();
-
-      expect(autofillOverlayContentService["overlayButtonElement"]).toBeInstanceOf(HTMLDivElement);
-      expect(autofillOverlayContentService["overlayListElement"]).toBeInstanceOf(HTMLDivElement);
-    });
-  });
-
-  describe("focusMostRecentOverlayField", () => {
-    it("focuses the most recently focused overlay field", () => {
-      const mostRecentlyFocusedField = document.createElement(
-        "input",
-      ) as ElementWithOpId<HTMLInputElement>;
-      autofillOverlayContentService["mostRecentlyFocusedField"] = mostRecentlyFocusedField;
-      jest.spyOn(mostRecentlyFocusedField, "focus");
-
-      autofillOverlayContentService["focusMostRecentOverlayField"]();
-
-      expect(mostRecentlyFocusedField.focus).toHaveBeenCalled();
-    });
-  });
-
-  describe("blurMostRecentOverlayField", () => {
-    it("removes focus from the most recently focused overlay field", () => {
-      const mostRecentlyFocusedField = document.createElement(
-        "input",
-      ) as ElementWithOpId<HTMLInputElement>;
-      autofillOverlayContentService["mostRecentlyFocusedField"] = mostRecentlyFocusedField;
-      jest.spyOn(mostRecentlyFocusedField, "blur");
-
-      autofillOverlayContentService["blurMostRecentOverlayField"]();
-
-      expect(mostRecentlyFocusedField.blur).toHaveBeenCalled();
-    });
-  });
-
-  describe("removeAutofillOverlay", () => {
-    it("disconnects the body's mutation observer", () => {
-      const bodyMutationObserver = mock<MutationObserver>();
-      autofillOverlayContentService["bodyElementMutationObserver"] = bodyMutationObserver;
-
-      autofillOverlayContentService.removeAutofillOverlay();
-
-      expect(bodyMutationObserver.disconnect).toHaveBeenCalled();
-    });
-  });
-
-  describe("removeAutofillOverlayButton", () => {
-    beforeEach(() => {
-      document.body.innerHTML = `<div class="overlay-button"></div>`;
-      autofillOverlayContentService["overlayButtonElement"] = document.querySelector(
-        ".overlay-button",
-      ) as HTMLElement;
-    });
-
-    it("removes the overlay button from the DOM", () => {
-      const overlayButtonElement = document.querySelector(".overlay-button") as HTMLElement;
-      autofillOverlayContentService["isOverlayButtonVisible"] = true;
-
-      autofillOverlayContentService.removeAutofillOverlay();
-
-      expect(autofillOverlayContentService["isOverlayButtonVisible"]).toEqual(false);
-      expect(document.body.contains(overlayButtonElement)).toEqual(false);
-    });
-
-    it("sends a message to the background indicating that the overlay button has been closed", () => {
-      autofillOverlayContentService.removeAutofillOverlay();
-
-      expect(sendExtensionMessageSpy).toHaveBeenCalledWith("autofillOverlayElementClosed", {
-        overlayElement: AutofillOverlayElement.Button,
-      });
-    });
-
-    it("removes the overlay reposition event listeners", () => {
-      jest.spyOn(globalThis.document.body, "removeEventListener");
-      jest.spyOn(globalThis, "removeEventListener");
-      const handleOverlayRepositionEventSpy = jest.spyOn(
-        autofillOverlayContentService as any,
-        "handleOverlayRepositionEvent",
-      );
-
-      autofillOverlayContentService.removeAutofillOverlay();
-
-      expect(globalThis.removeEventListener).toHaveBeenCalledWith(
-        EVENTS.SCROLL,
-        handleOverlayRepositionEventSpy,
-        {
-          capture: true,
-        },
-      );
-      expect(globalThis.removeEventListener).toHaveBeenCalledWith(
-        EVENTS.RESIZE,
-        handleOverlayRepositionEventSpy,
-      );
-    });
-  });
-
-  describe("removeAutofillOverlayList", () => {
-    beforeEach(() => {
-      document.body.innerHTML = `<div class="overlay-list"></div>`;
-      autofillOverlayContentService["overlayListElement"] = document.querySelector(
-        ".overlay-list",
-      ) as HTMLElement;
-    });
-
-    it("removes the overlay list element from the dom", () => {
-      const overlayListElement = document.querySelector(".overlay-list") as HTMLElement;
-      autofillOverlayContentService["isOverlayListVisible"] = true;
-
-      autofillOverlayContentService.removeAutofillOverlay();
-
-      expect(autofillOverlayContentService["isOverlayListVisible"]).toEqual(false);
-      expect(document.body.contains(overlayListElement)).toEqual(false);
-    });
-
-    it("sends a message to the extension background indicating that the overlay list has closed", () => {
-      autofillOverlayContentService.removeAutofillOverlay();
-
-      expect(sendExtensionMessageSpy).toHaveBeenCalledWith("autofillOverlayElementClosed", {
-        overlayElement: AutofillOverlayElement.List,
-      });
-    });
-  });
-
-  describe("addNewVaultItem", () => {
-    it("skips sending the message if the overlay list is not visible", () => {
-      autofillOverlayContentService["isOverlayListVisible"] = false;
-
-      autofillOverlayContentService.addNewVaultItem();
-
-      expect(sendExtensionMessageSpy).not.toHaveBeenCalled();
-    });
-
-    it("sends a message that facilitates adding a new vault item with empty fields", () => {
-      autofillOverlayContentService["isOverlayListVisible"] = true;
-
-      autofillOverlayContentService.addNewVaultItem();
-
-      expect(sendExtensionMessageSpy).toHaveBeenCalledWith("autofillOverlayAddNewVaultItem", {
-        login: {
-          username: "",
-          password: "",
-          uri: "http://localhost/",
-          hostname: "localhost",
-        },
-      });
-    });
-
-    it("sends a message that facilitates adding a new vault item with data from user filled fields", () => {
-      document.body.innerHTML = `
-      <form id="validFormId">
-        <input type="text" id="username-field" placeholder="username" />
-        <input type="password" id="password-field" placeholder="password" />
-      </form>
-      `;
-      const usernameField = document.getElementById(
-        "username-field",
-      ) as ElementWithOpId<HTMLInputElement>;
-      const passwordField = document.getElementById(
-        "password-field",
-      ) as ElementWithOpId<HTMLInputElement>;
-      usernameField.value = "test-username";
-      passwordField.value = "test-password";
-      autofillOverlayContentService["isOverlayListVisible"] = true;
-      autofillOverlayContentService["userFilledFields"] = {
-        username: usernameField,
-        password: passwordField,
-      };
-
-      autofillOverlayContentService.addNewVaultItem();
-
-      expect(sendExtensionMessageSpy).toHaveBeenCalledWith("autofillOverlayAddNewVaultItem", {
-        login: {
-          username: "test-username",
-          password: "test-password",
-          uri: "http://localhost/",
-          hostname: "localhost",
-        },
-      });
-    });
-  });
-
-  describe("redirectOverlayFocusOut", () => {
-    let autofillFieldElement: ElementWithOpId<FormFieldElement>;
-    let autofillFieldFocusSpy: jest.SpyInstance;
-    let findTabsSpy: jest.SpyInstance;
-    let previousFocusableElement: HTMLElement;
-    let nextFocusableElement: HTMLElement;
-
-    beforeEach(() => {
-      document.body.innerHTML = `
-      <div class="previous-focusable-element" tabindex="0"></div>
-      <form id="validFormId">
-        <input type="text" id="username-field" placeholder="username" />
-        <input type="password" id="password-field" placeholder="password" />
-      </form>
-      <div class="next-focusable-element" tabindex="0"></div>
-      `;
-      autofillFieldElement = document.getElementById(
-        "username-field",
-      ) as ElementWithOpId<FormFieldElement>;
-      autofillFieldElement.opid = "op-1";
-      previousFocusableElement = document.querySelector(
-        ".previous-focusable-element",
-      ) as HTMLElement;
-      nextFocusableElement = document.querySelector(".next-focusable-element") as HTMLElement;
-      autofillFieldFocusSpy = jest.spyOn(autofillFieldElement, "focus");
-      findTabsSpy = jest.spyOn(autofillOverlayContentService as any, "findTabs");
-      autofillOverlayContentService["isOverlayListVisible"] = true;
-      autofillOverlayContentService["mostRecentlyFocusedField"] = autofillFieldElement;
-      autofillOverlayContentService["focusableElements"] = [
-        previousFocusableElement,
-        autofillFieldElement,
-        nextFocusableElement,
-      ];
-    });
-
-    it("skips focusing an element if the overlay is not visible", () => {
-      autofillOverlayContentService["isOverlayListVisible"] = false;
-
-      autofillOverlayContentService.redirectOverlayFocusOut(RedirectFocusDirection.Next);
-
-      expect(findTabsSpy).not.toHaveBeenCalled();
-    });
-
-    it("skips focusing an element if no recently focused field exists", () => {
-      autofillOverlayContentService["mostRecentlyFocusedField"] = undefined;
-
-      autofillOverlayContentService.redirectOverlayFocusOut(RedirectFocusDirection.Next);
-
-      expect(findTabsSpy).not.toHaveBeenCalled();
-    });
-
-    it("focuses the most recently focused field if the focus direction is `Current`", () => {
-      autofillOverlayContentService.redirectOverlayFocusOut(RedirectFocusDirection.Current);
-
-      expect(findTabsSpy).not.toHaveBeenCalled();
-      expect(autofillFieldFocusSpy).toHaveBeenCalled();
-    });
-
-    it("removes the overlay if the focus direction is `Current`", () => {
-      jest.useFakeTimers();
-      const removeAutofillOverlaySpy = jest.spyOn(
-        autofillOverlayContentService as any,
-        "removeAutofillOverlay",
-      );
-
-      autofillOverlayContentService.redirectOverlayFocusOut(RedirectFocusDirection.Current);
-      jest.advanceTimersByTime(150);
-
-      expect(removeAutofillOverlaySpy).toHaveBeenCalled();
-    });
-
-    it("finds all focusable tabs if the focusable elements array is not populated", () => {
-      autofillOverlayContentService["focusableElements"] = [];
-      findTabsSpy.mockReturnValue([
-        previousFocusableElement,
-        autofillFieldElement,
-        nextFocusableElement,
-      ]);
-
-      autofillOverlayContentService.redirectOverlayFocusOut(RedirectFocusDirection.Next);
-
-      expect(findTabsSpy).toHaveBeenCalledWith(globalThis.document.body, { getShadowRoot: true });
-    });
-
-    it("focuses the previous focusable element if the focus direction is `Previous`", () => {
-      jest.spyOn(previousFocusableElement, "focus");
-
-      autofillOverlayContentService.redirectOverlayFocusOut(RedirectFocusDirection.Previous);
-
-      expect(autofillFieldFocusSpy).not.toHaveBeenCalled();
-      expect(previousFocusableElement.focus).toHaveBeenCalled();
-    });
-
-    it("focuses the next focusable element if the focus direction is `Next`", () => {
-      jest.spyOn(nextFocusableElement, "focus");
-
-      autofillOverlayContentService.redirectOverlayFocusOut(RedirectFocusDirection.Next);
-
-      expect(autofillFieldFocusSpy).not.toHaveBeenCalled();
-      expect(nextFocusableElement.focus).toHaveBeenCalled();
-    });
-  });
-
-  describe("handleOverlayRepositionEvent", () => {
-    beforeEach(() => {
-      document.body.innerHTML = `
-      <form id="validFormId">
-        <input type="text" id="username-field" placeholder="username" />
-        <input type="password" id="password-field" placeholder="password" />
-      </form>
-      `;
-      const usernameField = document.getElementById(
-        "username-field",
-      ) as ElementWithOpId<HTMLInputElement>;
-      autofillOverlayContentService["mostRecentlyFocusedField"] = usernameField;
-      autofillOverlayContentService["setOverlayRepositionEventListeners"]();
-      autofillOverlayContentService["isOverlayButtonVisible"] = true;
-      autofillOverlayContentService["isOverlayListVisible"] = true;
-      jest
-        .spyOn(autofillOverlayContentService as any, "recentlyFocusedFieldIsCurrentlyFocused")
-        .mockReturnValue(true);
-    });
-
-    it("skips handling the overlay reposition event if the overlay button and list elements are not visible", () => {
-      autofillOverlayContentService["isOverlayButtonVisible"] = false;
-      autofillOverlayContentService["isOverlayListVisible"] = false;
-
-      globalThis.dispatchEvent(new Event(EVENTS.RESIZE));
-
-      expect(sendExtensionMessageSpy).not.toHaveBeenCalled();
-    });
-
-    it("hides the overlay elements", () => {
-      globalThis.dispatchEvent(new Event(EVENTS.SCROLL));
-
-      expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillOverlayHidden", {
-        display: "none",
-      });
-      expect(autofillOverlayContentService["isOverlayButtonVisible"]).toEqual(false);
-      expect(autofillOverlayContentService["isOverlayListVisible"]).toEqual(false);
-    });
-
-    it("clears the user interaction timeout", () => {
-      jest.useFakeTimers();
-      const clearTimeoutSpy = jest.spyOn(globalThis, "clearTimeout");
-      autofillOverlayContentService["userInteractionEventTimeout"] = setTimeout(jest.fn(), 123);
-
-      globalThis.dispatchEvent(new Event(EVENTS.SCROLL));
-
-      expect(clearTimeoutSpy).toHaveBeenCalledWith(expect.anything());
-    });
-
-    it("removes the overlay completely if the field is not focused", () => {
-      jest.useFakeTimers();
-      jest
-        .spyOn(autofillOverlayContentService as any, "recentlyFocusedFieldIsCurrentlyFocused")
-        .mockReturnValue(false);
-      const removeAutofillOverlaySpy = jest.spyOn(
-        autofillOverlayContentService as any,
-        "removeAutofillOverlay",
-      );
-
-      autofillOverlayContentService["mostRecentlyFocusedField"] = undefined;
-      autofillOverlayContentService["overlayButtonElement"] = document.createElement("div");
-      autofillOverlayContentService["overlayListElement"] = document.createElement("div");
-
-      globalThis.dispatchEvent(new Event(EVENTS.SCROLL));
-      jest.advanceTimersByTime(800);
-
-      expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillOverlayHidden", {
-        display: "block",
-      });
-      expect(autofillOverlayContentService["isOverlayButtonVisible"]).toEqual(false);
-      expect(autofillOverlayContentService["isOverlayListVisible"]).toEqual(false);
-      expect(removeAutofillOverlaySpy).toHaveBeenCalled();
-    });
-
-    it("updates the overlay position if the most recently focused field is still within the viewport", async () => {
-      jest.useFakeTimers();
-      jest
-        .spyOn(autofillOverlayContentService as any, "updateMostRecentlyFocusedField")
-        .mockImplementation(() => {
-          autofillOverlayContentService["focusedFieldData"] = {
-            focusedFieldRects: {
-              top: 100,
-            },
-            focusedFieldStyles: {},
-          };
-        });
-      const clearUserInteractionEventTimeoutSpy = jest.spyOn(
-        autofillOverlayContentService as any,
-        "clearUserInteractionEventTimeout",
-      );
-
-      globalThis.dispatchEvent(new Event(EVENTS.SCROLL));
-      jest.advanceTimersByTime(800);
-      await flushPromises();
-
-      expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillOverlayPosition", {
-        overlayElement: AutofillOverlayElement.Button,
-      });
-      expect(sendExtensionMessageSpy).toHaveBeenCalledWith("updateAutofillOverlayPosition", {
-        overlayElement: AutofillOverlayElement.List,
-      });
-      expect(clearUserInteractionEventTimeoutSpy).toHaveBeenCalled();
-    });
-
-    it("removes the autofill overlay if the focused field is outside of the viewport", async () => {
-      jest.useFakeTimers();
-      jest
-        .spyOn(autofillOverlayContentService as any, "updateMostRecentlyFocusedField")
-        .mockImplementation(() => {
-          autofillOverlayContentService["focusedFieldData"] = {
-            focusedFieldRects: {
-              top: 4000,
-            },
-            focusedFieldStyles: {},
-          };
-        });
-      const removeAutofillOverlaySpy = jest.spyOn(
-        autofillOverlayContentService as any,
-        "removeAutofillOverlay",
-      );
-
-      globalThis.dispatchEvent(new Event(EVENTS.SCROLL));
-      jest.advanceTimersByTime(800);
-      await flushPromises();
-
-      expect(removeAutofillOverlaySpy).toHaveBeenCalled();
-    });
-
-    it("defaults overlay elements to a visibility of `false` if the element is not rendered on the page", async () => {
-      jest.useFakeTimers();
-      jest
-        .spyOn(autofillOverlayContentService as any, "updateMostRecentlyFocusedField")
-        .mockImplementation(() => {
-          autofillOverlayContentService["focusedFieldData"] = {
-            focusedFieldRects: {
-              top: 100,
-            },
-            focusedFieldStyles: {},
-          };
-        });
-      jest
-        .spyOn(autofillOverlayContentService as any, "updateOverlayElementsPosition")
-        .mockImplementation();
-      autofillOverlayContentService["overlayButtonElement"] = document.createElement("div");
-      autofillOverlayContentService["overlayListElement"] = undefined;
-
-      globalThis.dispatchEvent(new Event(EVENTS.SCROLL));
-      jest.advanceTimersByTime(800);
-      await flushPromises();
-
-      expect(autofillOverlayContentService["isOverlayButtonVisible"]).toEqual(true);
-      expect(autofillOverlayContentService["isOverlayListVisible"]).toEqual(false);
-    });
-  });
-
-  describe("handleOverlayElementMutationObserverUpdate", () => {
-    let usernameField: ElementWithOpId<HTMLInputElement>;
-
-    beforeEach(() => {
-      document.body.innerHTML = `
-      <form id="validFormId">
-        <input type="text" id="username-field" placeholder="username" />
-        <input type="password" id="password-field" placeholder="password" />
-      </form>
-      `;
-      usernameField = document.getElementById(
-        "username-field",
-      ) as ElementWithOpId<HTMLInputElement>;
-      usernameField.style.setProperty("display", "block", "important");
-      jest.spyOn(usernameField, "removeAttribute");
-      jest.spyOn(usernameField.style, "setProperty");
-      jest
-        .spyOn(
-          autofillOverlayContentService as any,
-          "isTriggeringExcessiveMutationObserverIterations",
-        )
-        .mockReturnValue(false);
-    });
-
-    it("skips handling the mutation if excessive mutation observer events are triggered", () => {
-      jest
-        .spyOn(
-          autofillOverlayContentService as any,
-          "isTriggeringExcessiveMutationObserverIterations",
-        )
-        .mockReturnValue(true);
-
-      autofillOverlayContentService["handleOverlayElementMutationObserverUpdate"]([
-        createMutationRecordMock({ target: usernameField }),
-      ]);
-
-      expect(usernameField.removeAttribute).not.toHaveBeenCalled();
-    });
-
-    it("skips handling the mutation if the record type is not for `attributes`", () => {
-      autofillOverlayContentService["handleOverlayElementMutationObserverUpdate"]([
-        createMutationRecordMock({ target: usernameField, type: "childList" }),
-      ]);
-
-      expect(usernameField.removeAttribute).not.toHaveBeenCalled();
-    });
-
-    it("removes all element attributes that are not the style attribute", () => {
-      autofillOverlayContentService["handleOverlayElementMutationObserverUpdate"]([
-        createMutationRecordMock({
-          target: usernameField,
-          type: "attributes",
-          attributeName: "placeholder",
-        }),
-      ]);
-
-      expect(usernameField.removeAttribute).toHaveBeenCalledWith("placeholder");
-    });
-
-    it("removes all attached style attributes and sets the default styles", () => {
-      autofillOverlayContentService["handleOverlayElementMutationObserverUpdate"]([
-        createMutationRecordMock({
-          target: usernameField,
-          type: "attributes",
-          attributeName: "style",
-        }),
-      ]);
-
-      expect(usernameField.removeAttribute).toHaveBeenCalledWith("style");
-      expect(usernameField.style.setProperty).toHaveBeenCalledWith("all", "initial", "important");
-      expect(usernameField.style.setProperty).toHaveBeenCalledWith(
-        "position",
-        "fixed",
-        "important",
-      );
-      expect(usernameField.style.setProperty).toHaveBeenCalledWith("display", "block", "important");
-    });
-  });
-
-  describe("handleBodyElementMutationObserverUpdate", () => {
-    let overlayButtonElement: HTMLElement;
-    let overlayListElement: HTMLElement;
-
-    beforeEach(() => {
-      document.body.innerHTML = `
-      <div class="overlay-button"></div>
-      <div class="overlay-list"></div>
-      `;
-      overlayButtonElement = document.querySelector(".overlay-button") as HTMLElement;
-      overlayListElement = document.querySelector(".overlay-list") as HTMLElement;
-      autofillOverlayContentService["overlayButtonElement"] = overlayButtonElement;
-      autofillOverlayContentService["overlayListElement"] = overlayListElement;
-      autofillOverlayContentService["isOverlayListVisible"] = true;
-      jest.spyOn(globalThis.document.body, "insertBefore");
-      jest
-        .spyOn(
-          autofillOverlayContentService as any,
-          "isTriggeringExcessiveMutationObserverIterations",
-        )
-        .mockReturnValue(false);
-    });
-
-    it("skips handling the mutation if the overlay elements are not present in the DOM", () => {
-      autofillOverlayContentService["overlayButtonElement"] = undefined;
-      autofillOverlayContentService["overlayListElement"] = undefined;
-
-      autofillOverlayContentService["handleBodyElementMutationObserverUpdate"]();
-
-      expect(globalThis.document.body.insertBefore).not.toHaveBeenCalled();
-    });
-
-    it("skips handling the mutation if excessive mutations are being triggered", () => {
-      jest
-        .spyOn(
-          autofillOverlayContentService as any,
-          "isTriggeringExcessiveMutationObserverIterations",
-        )
-        .mockReturnValue(true);
-
-      autofillOverlayContentService["handleBodyElementMutationObserverUpdate"]();
-
-      expect(globalThis.document.body.insertBefore).not.toHaveBeenCalled();
-    });
-
-    it("skips re-arranging the DOM elements if the last child of the body is the overlay list and the second to last child of the body is the overlay button", () => {
-      autofillOverlayContentService["handleBodyElementMutationObserverUpdate"]();
-
-      expect(globalThis.document.body.insertBefore).not.toHaveBeenCalled();
-    });
-
-    it("skips re-arranging the DOM elements if the last child is the overlay button and the overlay list is not visible", () => {
-      overlayListElement.remove();
-      autofillOverlayContentService["isOverlayListVisible"] = false;
-
-      autofillOverlayContentService["handleBodyElementMutationObserverUpdate"]();
-
-      expect(globalThis.document.body.insertBefore).not.toHaveBeenCalled();
-    });
-
-    it("positions the overlay button before the overlay list if an element has inserted itself after the button element", () => {
-      const injectedElement = document.createElement("div");
-      document.body.insertBefore(injectedElement, overlayListElement);
-
-      autofillOverlayContentService["handleBodyElementMutationObserverUpdate"]();
-
-      expect(globalThis.document.body.insertBefore).toHaveBeenCalledWith(
-        overlayButtonElement,
-        overlayListElement,
-      );
-    });
-
-    it("positions the overlay button before the overlay list if the elements have inserted in incorrect order", () => {
-      document.body.appendChild(overlayButtonElement);
-
-      autofillOverlayContentService["handleBodyElementMutationObserverUpdate"]();
-
-      expect(globalThis.document.body.insertBefore).toHaveBeenCalledWith(
-        overlayButtonElement,
-        overlayListElement,
-      );
-    });
-
-    it("positions the last child before the overlay button if it is not the overlay list", () => {
-      const injectedElement = document.createElement("div");
-      document.body.appendChild(injectedElement);
-
-      autofillOverlayContentService["handleBodyElementMutationObserverUpdate"]();
-
-      expect(globalThis.document.body.insertBefore).toHaveBeenCalledWith(
-        injectedElement,
-        overlayButtonElement,
-      );
-    });
-  });
-
-  describe("isTriggeringExcessiveMutationObserverIterations", () => {
-    it("clears any existing reset timeout", () => {
-      jest.useFakeTimers();
-      const clearTimeoutSpy = jest.spyOn(globalThis, "clearTimeout");
-      autofillOverlayContentService["mutationObserverIterationsResetTimeout"] = setTimeout(
-        jest.fn(),
-        123,
-      );
-
-      autofillOverlayContentService["isTriggeringExcessiveMutationObserverIterations"]();
-
-      expect(clearTimeoutSpy).toHaveBeenCalledWith(expect.anything());
-    });
-
-    it("will reset the number of mutationObserverIterations after two seconds", () => {
-      jest.useFakeTimers();
-      autofillOverlayContentService["mutationObserverIterations"] = 10;
-
-      autofillOverlayContentService["isTriggeringExcessiveMutationObserverIterations"]();
-      jest.advanceTimersByTime(2000);
-
-      expect(autofillOverlayContentService["mutationObserverIterations"]).toEqual(0);
-    });
-
-    it("will blur the overlay field and remove the autofill overlay if excessive mutation observer iterations are triggering", async () => {
-      autofillOverlayContentService["mutationObserverIterations"] = 101;
-      const blurMostRecentOverlayFieldSpy = jest.spyOn(
-        autofillOverlayContentService as any,
-        "blurMostRecentOverlayField",
-      );
-      const removeAutofillOverlaySpy = jest.spyOn(
-        autofillOverlayContentService as any,
-        "removeAutofillOverlay",
-      );
-
-      autofillOverlayContentService["isTriggeringExcessiveMutationObserverIterations"]();
-      await flushPromises();
-
-      expect(blurMostRecentOverlayFieldSpy).toHaveBeenCalled();
-      expect(removeAutofillOverlaySpy).toHaveBeenCalled();
-    });
-  });
-
-  describe("handleVisibilityChangeEvent", () => {
-    it("skips removing the overlay if the document is visible", () => {
-      jest.spyOn(autofillOverlayContentService as any, "removeAutofillOverlay");
-
-      autofillOverlayContentService["handleVisibilityChangeEvent"]();
-
-      expect(autofillOverlayContentService["removeAutofillOverlay"]).not.toHaveBeenCalled();
-    });
-
-    it("removes the overlay if the document is not visible", () => {
-      Object.defineProperty(document, "visibilityState", {
-        value: "hidden",
-        writable: true,
-      });
-      jest.spyOn(autofillOverlayContentService as any, "removeAutofillOverlay");
-
-      autofillOverlayContentService["handleVisibilityChangeEvent"]();
-
-      expect(autofillOverlayContentService["removeAutofillOverlay"]).toHaveBeenCalled();
-    });
-  });
-
-  describe("destroy", () => {
-    let autofillFieldElement: ElementWithOpId<FormFieldElement>;
-    let autofillFieldData: AutofillField;
-    let pageDetailsMock: AutofillPageDetails;
-
-    beforeEach(() => {
-      document.body.innerHTML = `
-      <form id="validFormId">
-        <input type="text" id="username-field" placeholder="username" />
-        <input type="password" id="password-field" placeholder="password" />
-      </form>
-      `;
-
-      autofillFieldElement = document.getElementById(
-        "username-field",
-      ) as ElementWithOpId<FormFieldElement>;
-      autofillFieldElement.opid = "op-1";
-      autofillFieldData = createAutofillFieldMock({
-        opid: "username-field",
-        form: "validFormId",
-        placeholder: "username",
-        elementNumber: 1,
-      });
-      const passwordFieldData = createAutofillFieldMock({
-        opid: "password-field",
-        form: "validFormId",
-        elementNumber: 2,
-        autocompleteType: "current-password",
-        type: "password",
-      });
-      pageDetailsMock = mock<AutofillPageDetails>({
-        forms: { validFormId: mock<AutofillForm>() },
-        fields: [autofillFieldData, passwordFieldData],
-      });
-      void autofillOverlayContentService.setupAutofillOverlayListenerOnField(
-        autofillFieldElement,
-        autofillFieldData,
-        pageDetailsMock,
-      );
-      autofillOverlayContentService["mostRecentlyFocusedField"] = autofillFieldElement;
-    });
-
-    it("disconnects all mutation observers", () => {
-      autofillOverlayContentService["setupMutationObserver"]();
-      jest.spyOn(autofillOverlayContentService["bodyElementMutationObserver"], "disconnect");
-
-      autofillOverlayContentService.destroy();
-
-      expect(
-        autofillOverlayContentService["bodyElementMutationObserver"].disconnect,
-      ).toHaveBeenCalled();
-    });
-
-    it("clears the user interaction event timeout", () => {
-      jest.spyOn(autofillOverlayContentService as any, "clearUserInteractionEventTimeout");
-
-      autofillOverlayContentService.destroy();
-
-      expect(autofillOverlayContentService["clearUserInteractionEventTimeout"]).toHaveBeenCalled();
-    });
-
-    it("de-registers all global event listeners", () => {
-      jest.spyOn(globalThis.document, "removeEventListener");
-      jest.spyOn(globalThis, "removeEventListener");
-      jest.spyOn(autofillOverlayContentService as any, "removeOverlayRepositionEventListeners");
-
-      autofillOverlayContentService.destroy();
-
-      expect(globalThis.document.removeEventListener).toHaveBeenCalledWith(
-        EVENTS.VISIBILITYCHANGE,
-        autofillOverlayContentService["handleVisibilityChangeEvent"],
-      );
-      expect(globalThis.removeEventListener).toHaveBeenCalledWith(
-        EVENTS.FOCUSOUT,
-        autofillOverlayContentService["handleFormFieldBlurEvent"],
-      );
-      expect(
-        autofillOverlayContentService["removeOverlayRepositionEventListeners"],
-      ).toHaveBeenCalled();
-    });
-
-    it("de-registers any event listeners that are attached to the form field elements", () => {
-      jest.spyOn(autofillOverlayContentService as any, "removeCachedFormFieldEventListeners");
-      jest.spyOn(autofillFieldElement, "removeEventListener");
-      jest.spyOn(autofillOverlayContentService["formFieldElements"], "delete");
-
-      autofillOverlayContentService.destroy();
-
-      expect(
-        autofillOverlayContentService["removeCachedFormFieldEventListeners"],
-      ).toHaveBeenCalledWith(autofillFieldElement);
-      expect(autofillFieldElement.removeEventListener).toHaveBeenCalledWith(
-        EVENTS.BLUR,
-        autofillOverlayContentService["handleFormFieldBlurEvent"],
-      );
-      expect(autofillFieldElement.removeEventListener).toHaveBeenCalledWith(
-        EVENTS.KEYUP,
-        autofillOverlayContentService["handleFormFieldKeyupEvent"],
-      );
-      expect(autofillOverlayContentService["formFieldElements"].delete).toHaveBeenCalledWith(
-        autofillFieldElement,
-      );
-    });
-  });
-});
diff --git a/apps/browser/src/autofill/deprecated/services/autofill-overlay-content.service.deprecated.ts b/apps/browser/src/autofill/deprecated/services/autofill-overlay-content.service.deprecated.ts
deleted file mode 100644
index cb281977f14..00000000000
--- a/apps/browser/src/autofill/deprecated/services/autofill-overlay-content.service.deprecated.ts
+++ /dev/null
@@ -1,1139 +0,0 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
-import "@webcomponents/custom-elements";
-import "lit/polyfill-support.js";
-import { FocusableElement, tabbable } from "tabbable";
-
-import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
-import { EVENTS, AutofillOverlayVisibility } from "@bitwarden/common/autofill/constants";
-
-import { FocusedFieldData } from "../../background/abstractions/overlay.background";
-import { AutofillOverlayElement, RedirectFocusDirection } from "../../enums/autofill-overlay.enum";
-import AutofillField from "../../models/autofill-field";
-import AutofillPageDetails from "../../models/autofill-page-details";
-import { AutofillOverlayContentExtensionMessageHandlers } from "../../services/abstractions/autofill-overlay-content.service";
-import { AutoFillConstants } from "../../services/autofill-constants";
-import { InlineMenuFieldQualificationService } from "../../services/inline-menu-field-qualification.service";
-import { ElementWithOpId, FillableFormFieldElement, FormFieldElement } from "../../types";
-import {
-  elementIsFillableFormField,
-  generateRandomCustomElementName,
-  sendExtensionMessage,
-  setElementStyles,
-} from "../../utils";
-import AutofillOverlayButtonIframe from "../overlay/iframe-content/autofill-overlay-button-iframe.deprecated";
-import AutofillOverlayListIframe from "../overlay/iframe-content/autofill-overlay-list-iframe.deprecated";
-
-import {
-  LegacyAutofillOverlayContentService as LegacyAutofillOverlayContentServiceInterface,
-  OpenAutofillOverlayOptions,
-} from "./abstractions/autofill-overlay-content.service";
-
-class LegacyAutofillOverlayContentService implements LegacyAutofillOverlayContentServiceInterface {
-  private readonly inlineMenuFieldQualificationService: InlineMenuFieldQualificationService;
-  isFieldCurrentlyFocused = false;
-  isCurrentlyFilling = false;
-  isOverlayCiphersPopulated = false;
-  pageDetailsUpdateRequired = false;
-  autofillOverlayVisibility: number;
-  private isFirefoxBrowser =
-    globalThis.navigator.userAgent.indexOf(" Firefox/") !== -1 ||
-    globalThis.navigator.userAgent.indexOf(" Gecko/") !== -1;
-  private readonly generateRandomCustomElementName = generateRandomCustomElementName;
-  private readonly findTabs = tabbable;
-  private readonly sendExtensionMessage = sendExtensionMessage;
-  private formFieldElements: Set<ElementWithOpId<FormFieldElement>> = new Set([]);
-  private ignoredFieldTypes: Set<string> = new Set(AutoFillConstants.ExcludedInlineMenuTypes);
-  private userFilledFields: Record<string, FillableFormFieldElement> = {};
-  private authStatus: AuthenticationStatus;
-  private focusableElements: FocusableElement[] = [];
-  private isOverlayButtonVisible = false;
-  private isOverlayListVisible = false;
-  private overlayButtonElement: HTMLElement;
-  private overlayListElement: HTMLElement;
-  private mostRecentlyFocusedField: ElementWithOpId<FormFieldElement>;
-  private focusedFieldData: FocusedFieldData;
-  private userInteractionEventTimeout: number | NodeJS.Timeout;
-  private overlayElementsMutationObserver: MutationObserver;
-  private bodyElementMutationObserver: MutationObserver;
-  private documentElementMutationObserver: MutationObserver;
-  private mutationObserverIterations = 0;
-  private mutationObserverIterationsResetTimeout: number | NodeJS.Timeout;
-  private eventHandlersMemo: { [key: string]: EventListener } = {};
-  private readonly customElementDefaultStyles: Partial<CSSStyleDeclaration> = {
-    all: "initial",
-    position: "fixed",
-    display: "block",
-    zIndex: "2147483647",
-  };
-
-  constructor() {
-    this.inlineMenuFieldQualificationService = new InlineMenuFieldQualificationService();
-  }
-
-  /**
-   * Satisfy the AutofillOverlayContentService interface.
-   */
-  messageHandlers = {} as AutofillOverlayContentExtensionMessageHandlers;
-  clearUserFilledFields() {
-    // do nothing
-  }
-
-  async setupOverlayListeners(
-    autofillFieldElement: ElementWithOpId<FormFieldElement>,
-    autofillFieldData: AutofillField,
-    pageDetails: AutofillPageDetails,
-  ) {
-    await this.setupAutofillOverlayListenerOnField(
-      autofillFieldElement,
-      autofillFieldData,
-      pageDetails,
-    );
-  }
-  async blurMostRecentlyFocusedField(_isClosingInlineMenu: boolean) {
-    this.blurMostRecentOverlayField();
-  }
-
-  /**
-   * Initializes the autofill overlay content service by setting up the mutation observers.
-   * The observers will be instantiated on DOMContentLoaded if the page is current loading.
-   */
-  init() {
-    if (globalThis.document.readyState === "loading") {
-      globalThis.document.addEventListener(EVENTS.DOMCONTENTLOADED, this.setupGlobalEventListeners);
-      return;
-    }
-
-    this.setupGlobalEventListeners();
-  }
-
-  /**
-   * Sets up the autofill overlay listener on the form field element. This method is called
-   * during the page details collection process.
-   *
-   * @param formFieldElement - Form field elements identified during the page details collection process.
-   * @param autofillFieldData - Autofill field data captured from the form field element.
-   * @param pageDetails - The collected page details from the tab.
-   */
-  async setupAutofillOverlayListenerOnField(
-    formFieldElement: ElementWithOpId<FormFieldElement>,
-    autofillFieldData: AutofillField,
-    pageDetails: AutofillPageDetails,
-  ) {
-    if (
-      this.formFieldElements.has(formFieldElement) ||
-      this.isIgnoredField(autofillFieldData, pageDetails)
-    ) {
-      return;
-    }
-
-    this.formFieldElements.add(formFieldElement);
-
-    if (!this.autofillOverlayVisibility) {
-      await this.getAutofillOverlayVisibility();
-    }
-
-    this.setupFormFieldElementEventListeners(formFieldElement);
-
-    if (this.getRootNodeActiveElement(formFieldElement) === formFieldElement) {
-      await this.triggerFormFieldFocusedAction(formFieldElement);
-      return;
-    }
-
-    if (!this.mostRecentlyFocusedField) {
-      await this.updateMostRecentlyFocusedField(formFieldElement);
-    }
-  }
-
-  /**
-   * Handles opening the autofill overlay. Will conditionally open
-   * the overlay based on the current autofill overlay visibility setting.
-   * Allows you to optionally focus the field element when opening the overlay.
-   * Will also optionally ignore the overlay visibility setting and open the
-   *
-   * @param options - Options for opening the autofill overlay.
-   */
-  openAutofillOverlay(options: OpenAutofillOverlayOptions = {}) {
-    const { isFocusingFieldElement, isOpeningFullOverlay, authStatus } = options;
-    if (!this.mostRecentlyFocusedField) {
-      return;
-    }
-
-    if (this.pageDetailsUpdateRequired) {
-      // 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
-      this.sendExtensionMessage("bgCollectPageDetails", {
-        sender: "autofillOverlayContentService",
-      });
-      this.pageDetailsUpdateRequired = false;
-    }
-
-    if (isFocusingFieldElement && !this.recentlyFocusedFieldIsCurrentlyFocused()) {
-      this.focusMostRecentOverlayField();
-    }
-
-    if (typeof authStatus !== "undefined") {
-      this.authStatus = authStatus;
-    }
-
-    if (
-      this.autofillOverlayVisibility === AutofillOverlayVisibility.OnButtonClick &&
-      !isOpeningFullOverlay
-    ) {
-      this.updateOverlayButtonPosition();
-      return;
-    }
-
-    this.updateOverlayElementsPosition();
-  }
-
-  /**
-   * Focuses the most recently focused field element.
-   */
-  focusMostRecentOverlayField() {
-    this.mostRecentlyFocusedField?.focus();
-  }
-
-  /**
-   * Removes focus from the most recently focused field element.
-   */
-  blurMostRecentOverlayField() {
-    this.mostRecentlyFocusedField?.blur();
-  }
-
-  /**
-   * Removes the autofill overlay from the page. This will initially
-   * unobserve the body element to ensure the mutation observer no
-   * longer triggers.
-   */
-  removeAutofillOverlay = () => {
-    this.removeBodyElementObserver();
-    this.removeAutofillOverlayButton();
-    this.removeAutofillOverlayList();
-  };
-
-  /**
-   * Removes the overlay button from the DOM if it is currently present. Will
-   * also remove the overlay reposition event listeners.
-   */
-  removeAutofillOverlayButton() {
-    if (!this.overlayButtonElement) {
-      return;
-    }
-
-    this.overlayButtonElement.remove();
-    this.isOverlayButtonVisible = false;
-    void this.sendExtensionMessage("autofillOverlayElementClosed", {
-      overlayElement: AutofillOverlayElement.Button,
-    });
-    this.removeOverlayRepositionEventListeners();
-  }
-
-  /**
-   * Removes the overlay list from the DOM if it is currently present.
-   */
-  removeAutofillOverlayList() {
-    if (!this.overlayListElement) {
-      return;
-    }
-
-    this.overlayListElement.remove();
-    this.isOverlayListVisible = false;
-    void this.sendExtensionMessage("autofillOverlayElementClosed", {
-      overlayElement: AutofillOverlayElement.List,
-    });
-  }
-
-  /**
-   * Formats any found user filled fields for a login cipher and sends a message
-   * to the background script to add a new cipher.
-   */
-  addNewVaultItem() {
-    if (!this.isOverlayListVisible) {
-      return;
-    }
-
-    const login = {
-      username: this.userFilledFields["username"]?.value || "",
-      password: this.userFilledFields["password"]?.value || "",
-      uri: globalThis.document.URL,
-      hostname: globalThis.document.location.hostname,
-    };
-
-    // 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
-    this.sendExtensionMessage("autofillOverlayAddNewVaultItem", { login });
-  }
-
-  /**
-   * Redirects the keyboard focus out of the overlay, selecting the element that is
-   * either previous or next in the tab order. If the direction is current, the most
-   * recently focused field will be focused.
-   *
-   * @param direction - The direction to redirect the focus.
-   */
-  redirectOverlayFocusOut(direction: string) {
-    if (!this.isOverlayListVisible || !this.mostRecentlyFocusedField) {
-      return;
-    }
-
-    if (direction === RedirectFocusDirection.Current) {
-      this.focusMostRecentOverlayField();
-      setTimeout(this.removeAutofillOverlay, 100);
-      return;
-    }
-
-    if (!this.focusableElements.length) {
-      this.focusableElements = this.findTabs(globalThis.document.body, { getShadowRoot: true });
-    }
-
-    const focusedElementIndex = this.focusableElements.findIndex(
-      (element) => element === this.mostRecentlyFocusedField,
-    );
-
-    const indexOffset = direction === RedirectFocusDirection.Previous ? -1 : 1;
-    const redirectFocusElement = this.focusableElements[focusedElementIndex + indexOffset];
-    redirectFocusElement?.focus();
-  }
-
-  /**
-   * Sets up the event listeners that facilitate interaction with the form field elements.
-   * Will clear any cached form field element handlers that are encountered when setting
-   * up a form field element to the overlay.
-   *
-   * @param formFieldElement - The form field element to set up the event listeners for.
-   */
-  private setupFormFieldElementEventListeners(formFieldElement: ElementWithOpId<FormFieldElement>) {
-    this.removeCachedFormFieldEventListeners(formFieldElement);
-
-    formFieldElement.addEventListener(EVENTS.BLUR, this.handleFormFieldBlurEvent);
-    formFieldElement.addEventListener(EVENTS.KEYUP, this.handleFormFieldKeyupEvent);
-    formFieldElement.addEventListener(
-      EVENTS.INPUT,
-      this.handleFormFieldInputEvent(formFieldElement),
-    );
-    formFieldElement.addEventListener(
-      EVENTS.CLICK,
-      this.handleFormFieldClickEvent(formFieldElement),
-    );
-    formFieldElement.addEventListener(
-      EVENTS.FOCUS,
-      this.handleFormFieldFocusEvent(formFieldElement),
-    );
-  }
-
-  /**
-   * Removes any cached form field element handlers that are encountered
-   * when setting up a form field element to present the overlay.
-   *
-   * @param formFieldElement - The form field element to remove the cached handlers for.
-   */
-  private removeCachedFormFieldEventListeners(formFieldElement: ElementWithOpId<FormFieldElement>) {
-    const handlers = [EVENTS.INPUT, EVENTS.CLICK, EVENTS.FOCUS];
-    for (let index = 0; index < handlers.length; index++) {
-      const event = handlers[index];
-      const memoIndex = this.getFormFieldHandlerMemoIndex(formFieldElement, event);
-      const existingHandler = this.eventHandlersMemo[memoIndex];
-      if (!existingHandler) {
-        return;
-      }
-
-      formFieldElement.removeEventListener(event, existingHandler);
-      delete this.eventHandlersMemo[memoIndex];
-    }
-  }
-
-  /**
-   * Helper method that facilitates registration of an event handler to a form field element.
-   *
-   * @param eventHandler - The event handler to memoize.
-   * @param memoIndex - The memo index to use for the event handler.
-   */
-  private useEventHandlersMemo = (eventHandler: EventListener, memoIndex: string) => {
-    return this.eventHandlersMemo[memoIndex] || (this.eventHandlersMemo[memoIndex] = eventHandler);
-  };
-
-  /**
-   * Formats the memoIndex for the form field event handler.
-   *
-   * @param formFieldElement - The form field element to format the memo index for.
-   * @param event - The event to format the memo index for.
-   */
-  private getFormFieldHandlerMemoIndex(
-    formFieldElement: ElementWithOpId<FormFieldElement>,
-    event: string,
-  ) {
-    return `${formFieldElement.opid}-${formFieldElement.id}-${event}-handler`;
-  }
-
-  /**
-   * Form Field blur event handler. Updates the value identifying whether
-   * the field is focused and sends a message to check if the overlay itself
-   * is currently focused.
-   */
-  private handleFormFieldBlurEvent = () => {
-    this.isFieldCurrentlyFocused = false;
-    // 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
-    this.sendExtensionMessage("checkAutofillOverlayFocused");
-  };
-
-  /**
-   * Form field keyup event handler. Facilitates the ability to remove the
-   * autofill overlay using the escape key, focusing the overlay list using
-   * the ArrowDown key, and ensuring that the overlay is repositioned when
-   * the form is submitted using the Enter key.
-   *
-   * @param event - The keyup event.
-   */
-  private handleFormFieldKeyupEvent = (event: KeyboardEvent) => {
-    const eventCode = event.code;
-    if (eventCode === "Escape") {
-      this.removeAutofillOverlay();
-      return;
-    }
-
-    if (eventCode === "Enter" && !this.isCurrentlyFilling) {
-      this.handleOverlayRepositionEvent();
-      return;
-    }
-
-    if (eventCode === "ArrowDown") {
-      event.preventDefault();
-      event.stopPropagation();
-
-      // 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
-      this.focusOverlayList();
-    }
-  };
-
-  /**
-   * Triggers a focus of the overlay list, if it is visible. If the list is not visible,
-   * the overlay will be opened and the list will be focused after a short delay. Ensures
-   * that the overlay list is focused when the user presses the down arrow key.
-   */
-  private async focusOverlayList() {
-    if (!this.isOverlayListVisible && this.mostRecentlyFocusedField) {
-      await this.updateMostRecentlyFocusedField(this.mostRecentlyFocusedField);
-      this.openAutofillOverlay({ isOpeningFullOverlay: true });
-      setTimeout(() => this.sendExtensionMessage("focusAutofillOverlayList"), 125);
-      return;
-    }
-
-    // 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
-    this.sendExtensionMessage("focusAutofillOverlayList");
-  }
-
-  /**
-   * Sets up and memoizes the form field input event handler.
-   *
-   * @param formFieldElement - The form field element that triggered the input event.
-   */
-  private handleFormFieldInputEvent = (formFieldElement: ElementWithOpId<FormFieldElement>) => {
-    return this.useEventHandlersMemo(
-      () => this.triggerFormFieldInput(formFieldElement),
-      this.getFormFieldHandlerMemoIndex(formFieldElement, EVENTS.INPUT),
-    );
-  };
-
-  /**
-   * Triggers when the form field element receives an input event. This method will
-   * store the modified form element data for use when the user attempts to add a new
-   * vault item. It also acts to remove the overlay list while the user is typing.
-   *
-   * @param formFieldElement - The form field element that triggered the input event.
-   */
-  private triggerFormFieldInput(formFieldElement: ElementWithOpId<FormFieldElement>) {
-    if (!elementIsFillableFormField(formFieldElement)) {
-      return;
-    }
-
-    this.storeModifiedFormElement(formFieldElement);
-
-    if (formFieldElement.value && (this.isOverlayCiphersPopulated || !this.isUserAuthed())) {
-      this.removeAutofillOverlayList();
-      return;
-    }
-
-    this.openAutofillOverlay();
-  }
-
-  /**
-   * Stores the modified form element data for use when the user attempts to add a new
-   * vault item. This method will also store the most recently focused field, if it is
-   * not already stored.
-   *
-   * @param formFieldElement
-   * @private
-   */
-  private storeModifiedFormElement(formFieldElement: ElementWithOpId<FillableFormFieldElement>) {
-    if (formFieldElement === this.mostRecentlyFocusedField) {
-      this.mostRecentlyFocusedField = formFieldElement;
-    }
-
-    if (formFieldElement.type === "password") {
-      this.userFilledFields.password = formFieldElement;
-      return;
-    }
-
-    this.userFilledFields.username = formFieldElement;
-  }
-
-  /**
-   * Sets up and memoizes the form field click event handler.
-   *
-   * @param formFieldElement - The form field element that triggered the click event.
-   */
-  private handleFormFieldClickEvent = (formFieldElement: ElementWithOpId<FormFieldElement>) => {
-    return this.useEventHandlersMemo(
-      () => this.triggerFormFieldClickedAction(formFieldElement),
-      this.getFormFieldHandlerMemoIndex(formFieldElement, EVENTS.CLICK),
-    );
-  };
-
-  /**
-   * Triggers when the form field element receives a click event. This method will
-   * trigger the focused action for the form field element if the overlay is not visible.
-   *
-   * @param formFieldElement - The form field element that triggered the click event.
-   */
-  private async triggerFormFieldClickedAction(formFieldElement: ElementWithOpId<FormFieldElement>) {
-    if (this.isOverlayButtonVisible || this.isOverlayListVisible) {
-      return;
-    }
-
-    await this.triggerFormFieldFocusedAction(formFieldElement);
-  }
-
-  /**
-   * Sets up and memoizes the form field focus event handler.
-   *
-   * @param formFieldElement - The form field element that triggered the focus event.
-   */
-  private handleFormFieldFocusEvent = (formFieldElement: ElementWithOpId<FormFieldElement>) => {
-    return this.useEventHandlersMemo(
-      () => this.triggerFormFieldFocusedAction(formFieldElement),
-      this.getFormFieldHandlerMemoIndex(formFieldElement, EVENTS.FOCUS),
-    );
-  };
-
-  /**
-   * Triggers when the form field element receives a focus event. This method will
-   * update the most recently focused field and open the autofill overlay if the
-   * autofill process is not currently active.
-   *
-   * @param formFieldElement - The form field element that triggered the focus event.
-   */
-  private async triggerFormFieldFocusedAction(formFieldElement: ElementWithOpId<FormFieldElement>) {
-    if (this.isCurrentlyFilling) {
-      return;
-    }
-
-    this.isFieldCurrentlyFocused = true;
-    this.clearUserInteractionEventTimeout();
-    const initiallyFocusedField = this.mostRecentlyFocusedField;
-    await this.updateMostRecentlyFocusedField(formFieldElement);
-    const formElementHasValue = Boolean((formFieldElement as HTMLInputElement).value);
-
-    if (
-      this.autofillOverlayVisibility === AutofillOverlayVisibility.OnButtonClick ||
-      (formElementHasValue && initiallyFocusedField !== this.mostRecentlyFocusedField)
-    ) {
-      this.removeAutofillOverlayList();
-    }
-
-    if (!formElementHasValue || (!this.isOverlayCiphersPopulated && this.isUserAuthed())) {
-      // 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
-      this.sendExtensionMessage("openAutofillOverlay");
-      return;
-    }
-
-    this.updateOverlayButtonPosition();
-  }
-
-  /**
-   * Validates whether the user is currently authenticated.
-   */
-  private isUserAuthed() {
-    return this.authStatus === AuthenticationStatus.Unlocked;
-  }
-
-  /**
-   * Validates that the most recently focused field is currently
-   * focused within the root node relative to the field.
-   */
-  private recentlyFocusedFieldIsCurrentlyFocused() {
-    return (
-      this.getRootNodeActiveElement(this.mostRecentlyFocusedField) === this.mostRecentlyFocusedField
-    );
-  }
-
-  /**
-   * Updates the position of both the overlay button and overlay list.
-   */
-  private updateOverlayElementsPosition() {
-    this.updateOverlayButtonPosition();
-    this.updateOverlayListPosition();
-  }
-
-  /**
-   * Updates the position of the overlay button.
-   */
-  private updateOverlayButtonPosition() {
-    if (!this.overlayButtonElement) {
-      this.createAutofillOverlayButton();
-      this.updateCustomElementDefaultStyles(this.overlayButtonElement);
-    }
-
-    if (!this.isOverlayButtonVisible) {
-      this.appendOverlayElementToBody(this.overlayButtonElement);
-      this.isOverlayButtonVisible = true;
-      this.setOverlayRepositionEventListeners();
-    }
-    // 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
-    this.sendExtensionMessage("updateAutofillOverlayPosition", {
-      overlayElement: AutofillOverlayElement.Button,
-    });
-  }
-
-  /**
-   * Updates the position of the overlay list.
-   */
-  private updateOverlayListPosition() {
-    if (!this.overlayListElement) {
-      this.createAutofillOverlayList();
-      this.updateCustomElementDefaultStyles(this.overlayListElement);
-    }
-
-    if (!this.isOverlayListVisible) {
-      this.appendOverlayElementToBody(this.overlayListElement);
-      this.isOverlayListVisible = true;
-    }
-
-    // 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
-    this.sendExtensionMessage("updateAutofillOverlayPosition", {
-      overlayElement: AutofillOverlayElement.List,
-    });
-  }
-
-  /**
-   * Appends the overlay element to the body element. This method will also
-   * observe the body element to ensure that the overlay element is not
-   * interfered with by any DOM changes.
-   *
-   * @param element - The overlay element to append to the body element.
-   */
-  private appendOverlayElementToBody(element: HTMLElement) {
-    this.observeBodyElement();
-    globalThis.document.body.appendChild(element);
-  }
-
-  /**
-   * Sends a message that facilitates hiding the overlay elements.
-   *
-   * @param isHidden - Indicates if the overlay elements should be hidden.
-   */
-  private toggleOverlayHidden(isHidden: boolean) {
-    const displayValue = isHidden ? "none" : "block";
-    void this.sendExtensionMessage("updateAutofillOverlayHidden", { display: displayValue });
-
-    this.isOverlayButtonVisible = !!this.overlayButtonElement && !isHidden;
-    this.isOverlayListVisible = !!this.overlayListElement && !isHidden;
-  }
-
-  /**
-   * Updates the data used to position the overlay elements in relation
-   * to the most recently focused form field.
-   *
-   * @param formFieldElement - The form field element that triggered the focus event.
-   */
-  private async updateMostRecentlyFocusedField(
-    formFieldElement: ElementWithOpId<FormFieldElement>,
-  ) {
-    this.mostRecentlyFocusedField = formFieldElement;
-    const { paddingRight, paddingLeft } = globalThis.getComputedStyle(formFieldElement);
-    const { width, height, top, left } =
-      await this.getMostRecentlyFocusedFieldRects(formFieldElement);
-    this.focusedFieldData = {
-      focusedFieldStyles: { paddingRight, paddingLeft },
-      focusedFieldRects: { width, height, top, left },
-    };
-
-    // 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
-    this.sendExtensionMessage("updateFocusedFieldData", {
-      focusedFieldData: this.focusedFieldData,
-    });
-  }
-
-  /**
-   * Gets the bounding client rects for the most recently focused field. This method will
-   * attempt to use an intersection observer to get the most recently focused field's
-   * bounding client rects. If the intersection observer is not supported, or the
-   * intersection observer does not return a valid bounding client rect, the form
-   * field element's bounding client rect will be used.
-   *
-   * @param formFieldElement - The form field element that triggered the focus event.
-   */
-  private async getMostRecentlyFocusedFieldRects(
-    formFieldElement: ElementWithOpId<FormFieldElement>,
-  ) {
-    const focusedFieldRects =
-      await this.getBoundingClientRectFromIntersectionObserver(formFieldElement);
-    if (focusedFieldRects) {
-      return focusedFieldRects;
-    }
-
-    return formFieldElement.getBoundingClientRect();
-  }
-
-  /**
-   * Gets the bounds of the form field element from the IntersectionObserver API.
-   *
-   * @param formFieldElement - The form field element that triggered the focus event.
-   */
-  private async getBoundingClientRectFromIntersectionObserver(
-    formFieldElement: ElementWithOpId<FormFieldElement>,
-  ): Promise<DOMRectReadOnly | null> {
-    if (!("IntersectionObserver" in globalThis) && !("IntersectionObserverEntry" in globalThis)) {
-      return null;
-    }
-
-    return new Promise((resolve) => {
-      const intersectionObserver = new IntersectionObserver(
-        (entries) => {
-          let fieldBoundingClientRects = entries[0]?.boundingClientRect;
-          if (!fieldBoundingClientRects?.width || !fieldBoundingClientRects.height) {
-            fieldBoundingClientRects = null;
-          }
-
-          intersectionObserver.disconnect();
-          resolve(fieldBoundingClientRects);
-        },
-        {
-          root: globalThis.document.body,
-          rootMargin: "0px",
-          threshold: 0.9999, // Safari doesn't seem to function properly with a threshold of 1
-        },
-      );
-      intersectionObserver.observe(formFieldElement);
-    });
-  }
-
-  /**
-   * Identifies if the field should have the autofill overlay setup on it. Currently, this is mainly
-   * determined by whether the field correlates with a login cipher. This method will need to be
-   * updated in the future to support other types of forms.
-   *
-   * @param autofillFieldData - Autofill field data captured from the form field element.
-   * @param pageDetails - The collected page details from the tab.
-   */
-  private isIgnoredField(
-    autofillFieldData: AutofillField,
-    pageDetails: AutofillPageDetails,
-  ): boolean {
-    if (
-      autofillFieldData.readonly ||
-      autofillFieldData.disabled ||
-      !autofillFieldData.viewable ||
-      this.ignoredFieldTypes.has(autofillFieldData.type)
-    ) {
-      return true;
-    }
-
-    return !this.inlineMenuFieldQualificationService.isFieldForLoginForm(
-      autofillFieldData,
-      pageDetails,
-    );
-  }
-
-  /**
-   * Creates the autofill overlay button element. Will not attempt
-   * to create the element if it already exists in the DOM.
-   */
-  private createAutofillOverlayButton() {
-    if (this.overlayButtonElement) {
-      return;
-    }
-
-    if (this.isFirefoxBrowser) {
-      this.overlayButtonElement = globalThis.document.createElement("div");
-      new AutofillOverlayButtonIframe(this.overlayButtonElement);
-
-      return;
-    }
-
-    const customElementName = this.generateRandomCustomElementName();
-    globalThis.customElements?.define(
-      customElementName,
-      class extends HTMLElement {
-        constructor() {
-          super();
-          new AutofillOverlayButtonIframe(this);
-        }
-      },
-    );
-    this.overlayButtonElement = globalThis.document.createElement(customElementName);
-  }
-
-  /**
-   * Creates the autofill overlay list element. Will not attempt
-   * to create the element if it already exists in the DOM.
-   */
-  private createAutofillOverlayList() {
-    if (this.overlayListElement) {
-      return;
-    }
-
-    if (this.isFirefoxBrowser) {
-      this.overlayListElement = globalThis.document.createElement("div");
-      new AutofillOverlayListIframe(this.overlayListElement);
-
-      return;
-    }
-
-    const customElementName = this.generateRandomCustomElementName();
-    globalThis.customElements?.define(
-      customElementName,
-      class extends HTMLElement {
-        constructor() {
-          super();
-          new AutofillOverlayListIframe(this);
-        }
-      },
-    );
-    this.overlayListElement = globalThis.document.createElement(customElementName);
-  }
-
-  /**
-   * Updates the default styles for the custom element. This method will
-   * remove any styles that are added to the custom element by other methods.
-   *
-   * @param element - The custom element to update the default styles for.
-   */
-  private updateCustomElementDefaultStyles(element: HTMLElement) {
-    this.unobserveCustomElements();
-
-    setElementStyles(element, this.customElementDefaultStyles, true);
-
-    this.observeCustomElements();
-  }
-
-  /**
-   * Queries the background script for the autofill overlay visibility setting.
-   * If the setting is not found, a default value of OnFieldFocus will be used
-   * @private
-   */
-  private async getAutofillOverlayVisibility() {
-    const overlayVisibility = await this.sendExtensionMessage("getAutofillOverlayVisibility");
-    this.autofillOverlayVisibility = overlayVisibility || AutofillOverlayVisibility.OnFieldFocus;
-  }
-
-  /**
-   * Sets up event listeners that facilitate repositioning
-   * the autofill overlay on scroll or resize.
-   */
-  private setOverlayRepositionEventListeners() {
-    globalThis.addEventListener(EVENTS.SCROLL, this.handleOverlayRepositionEvent, {
-      capture: true,
-    });
-    globalThis.addEventListener(EVENTS.RESIZE, this.handleOverlayRepositionEvent);
-  }
-
-  /**
-   * Removes the listeners that facilitate repositioning
-   * the autofill overlay on scroll or resize.
-   */
-  private removeOverlayRepositionEventListeners() {
-    globalThis.removeEventListener(EVENTS.SCROLL, this.handleOverlayRepositionEvent, {
-      capture: true,
-    });
-    globalThis.removeEventListener(EVENTS.RESIZE, this.handleOverlayRepositionEvent);
-  }
-
-  /**
-   * Handles the resize or scroll events that enact
-   * repositioning of the overlay.
-   */
-  private handleOverlayRepositionEvent = () => {
-    if (!this.isOverlayButtonVisible && !this.isOverlayListVisible) {
-      return;
-    }
-
-    this.toggleOverlayHidden(true);
-    this.clearUserInteractionEventTimeout();
-    this.userInteractionEventTimeout = setTimeout(
-      this.triggerOverlayRepositionUpdates,
-      750,
-    ) as unknown as number;
-  };
-
-  /**
-   * Triggers the overlay reposition updates. This method ensures that the overlay elements
-   * are correctly positioned when the viewport scrolls or repositions.
-   */
-  private triggerOverlayRepositionUpdates = async () => {
-    if (!this.recentlyFocusedFieldIsCurrentlyFocused()) {
-      this.toggleOverlayHidden(false);
-      this.removeAutofillOverlay();
-      return;
-    }
-
-    await this.updateMostRecentlyFocusedField(this.mostRecentlyFocusedField);
-    this.updateOverlayElementsPosition();
-    this.toggleOverlayHidden(false);
-    this.clearUserInteractionEventTimeout();
-
-    if (
-      this.focusedFieldData.focusedFieldRects?.top > 0 &&
-      this.focusedFieldData.focusedFieldRects?.top < globalThis.innerHeight
-    ) {
-      return;
-    }
-
-    this.removeAutofillOverlay();
-  };
-
-  /**
-   * Clears the user interaction event timeout. This is used to ensure that
-   * the overlay is not repositioned while the user is interacting with it.
-   */
-  private clearUserInteractionEventTimeout() {
-    if (this.userInteractionEventTimeout) {
-      clearTimeout(this.userInteractionEventTimeout);
-    }
-  }
-
-  /**
-   * Sets up global event listeners and the mutation
-   * observer to facilitate required changes to the
-   * overlay elements.
-   */
-  private setupGlobalEventListeners = () => {
-    globalThis.document.addEventListener(EVENTS.VISIBILITYCHANGE, this.handleVisibilityChangeEvent);
-    globalThis.addEventListener(EVENTS.FOCUSOUT, this.handleFormFieldBlurEvent);
-    this.setupMutationObserver();
-  };
-
-  /**
-   * Handles the visibility change event. This method will remove the
-   * autofill overlay if the document is not visible.
-   */
-  private handleVisibilityChangeEvent = () => {
-    if (document.visibilityState === "visible") {
-      return;
-    }
-
-    this.mostRecentlyFocusedField = null;
-    this.removeAutofillOverlay();
-  };
-
-  /**
-   * Sets up mutation observers for the overlay elements, the body element, and the
-   * document element. The mutation observers are used to remove any styles that are
-   * added to the overlay elements by the website. They are also used to ensure that
-   * the overlay elements are always present at the bottom of the body element.
-   */
-  private setupMutationObserver = () => {
-    this.overlayElementsMutationObserver = new MutationObserver(
-      this.handleOverlayElementMutationObserverUpdate,
-    );
-
-    this.bodyElementMutationObserver = new MutationObserver(
-      this.handleBodyElementMutationObserverUpdate,
-    );
-  };
-
-  /**
-   * Sets up mutation observers to verify that the overlay
-   * elements are not modified by the website.
-   */
-  private observeCustomElements() {
-    if (this.overlayButtonElement) {
-      this.overlayElementsMutationObserver?.observe(this.overlayButtonElement, {
-        attributes: true,
-      });
-    }
-
-    if (this.overlayListElement) {
-      this.overlayElementsMutationObserver?.observe(this.overlayListElement, { attributes: true });
-    }
-  }
-
-  /**
-   * Disconnects the mutation observers that are used to verify that the overlay
-   * elements are not modified by the website.
-   */
-  private unobserveCustomElements() {
-    this.overlayElementsMutationObserver?.disconnect();
-  }
-
-  /**
-   * Sets up a mutation observer for the body element. The mutation observer is used
-   * to ensure that the overlay elements are always present at the bottom of the body
-   * element.
-   */
-  private observeBodyElement() {
-    this.bodyElementMutationObserver?.observe(globalThis.document.body, { childList: true });
-  }
-
-  /**
-   * Disconnects the mutation observer for the body element.
-   */
-  private removeBodyElementObserver() {
-    this.bodyElementMutationObserver?.disconnect();
-  }
-
-  /**
-   * Handles the mutation observer update for the overlay elements. This method will
-   * remove any attributes or styles that might be added to the overlay elements by
-   * a separate process within the website where this script is injected.
-   *
-   * @param mutationRecord - The mutation record that triggered the update.
-   */
-  private handleOverlayElementMutationObserverUpdate = (mutationRecord: MutationRecord[]) => {
-    if (this.isTriggeringExcessiveMutationObserverIterations()) {
-      return;
-    }
-
-    for (let recordIndex = 0; recordIndex < mutationRecord.length; recordIndex++) {
-      const record = mutationRecord[recordIndex];
-      if (record.type !== "attributes") {
-        continue;
-      }
-
-      const element = record.target as HTMLElement;
-      if (record.attributeName !== "style") {
-        this.removeModifiedElementAttributes(element);
-
-        continue;
-      }
-
-      element.removeAttribute("style");
-      this.updateCustomElementDefaultStyles(element);
-    }
-  };
-
-  /**
-   * Removes all elements from a passed overlay
-   * element except for the style attribute.
-   *
-   * @param element - The element to remove the attributes from.
-   */
-  private removeModifiedElementAttributes(element: HTMLElement) {
-    const attributes = Array.from(element.attributes);
-    for (let attributeIndex = 0; attributeIndex < attributes.length; attributeIndex++) {
-      const attribute = attributes[attributeIndex];
-      if (attribute.name === "style") {
-        continue;
-      }
-
-      element.removeAttribute(attribute.name);
-    }
-  }
-
-  /**
-   * Handles the mutation observer update for the body element. This method will
-   * ensure that the overlay elements are always present at the bottom of the body
-   * element.
-   */
-  private handleBodyElementMutationObserverUpdate = () => {
-    if (
-      (!this.overlayButtonElement && !this.overlayListElement) ||
-      this.isTriggeringExcessiveMutationObserverIterations()
-    ) {
-      return;
-    }
-
-    const lastChild = globalThis.document.body.lastElementChild;
-    const secondToLastChild = lastChild?.previousElementSibling;
-    const lastChildIsOverlayList = lastChild === this.overlayListElement;
-    const lastChildIsOverlayButton = lastChild === this.overlayButtonElement;
-    const secondToLastChildIsOverlayButton = secondToLastChild === this.overlayButtonElement;
-
-    if (
-      (lastChildIsOverlayList && secondToLastChildIsOverlayButton) ||
-      (lastChildIsOverlayButton && !this.isOverlayListVisible)
-    ) {
-      return;
-    }
-
-    if (
-      (lastChildIsOverlayList && !secondToLastChildIsOverlayButton) ||
-      (lastChildIsOverlayButton && this.isOverlayListVisible)
-    ) {
-      globalThis.document.body.insertBefore(this.overlayButtonElement, this.overlayListElement);
-      return;
-    }
-
-    globalThis.document.body.insertBefore(lastChild, this.overlayButtonElement);
-  };
-
-  /**
-   * Identifies if the mutation observer is triggering excessive iterations.
-   * Will trigger a blur of the most recently focused field and remove the
-   * autofill overlay if any set mutation observer is triggering
-   * excessive iterations.
-   */
-  private isTriggeringExcessiveMutationObserverIterations() {
-    if (this.mutationObserverIterationsResetTimeout) {
-      clearTimeout(this.mutationObserverIterationsResetTimeout);
-    }
-
-    this.mutationObserverIterations++;
-    this.mutationObserverIterationsResetTimeout = setTimeout(
-      () => (this.mutationObserverIterations = 0),
-      2000,
-    );
-
-    if (this.mutationObserverIterations > 100) {
-      clearTimeout(this.mutationObserverIterationsResetTimeout);
-      this.mutationObserverIterations = 0;
-      this.blurMostRecentOverlayField();
-      this.removeAutofillOverlay();
-
-      return true;
-    }
-
-    return false;
-  }
-
-  /**
-   * Gets the root node of the passed element and returns the active element within that root node.
-   *
-   * @param element - The element to get the root node active element for.
-   */
-  private getRootNodeActiveElement(element: Element): Element {
-    const documentRoot = element.getRootNode() as ShadowRoot | Document;
-    return documentRoot?.activeElement;
-  }
-
-  /**
-   * Destroys the autofill overlay content service. This method will
-   * disconnect the mutation observers and remove all event listeners.
-   */
-  destroy() {
-    this.documentElementMutationObserver?.disconnect();
-    this.clearUserInteractionEventTimeout();
-    this.formFieldElements.forEach((formFieldElement) => {
-      this.removeCachedFormFieldEventListeners(formFieldElement);
-      formFieldElement.removeEventListener(EVENTS.BLUR, this.handleFormFieldBlurEvent);
-      formFieldElement.removeEventListener(EVENTS.KEYUP, this.handleFormFieldKeyupEvent);
-      this.formFieldElements.delete(formFieldElement);
-    });
-    globalThis.document.removeEventListener(
-      EVENTS.VISIBILITYCHANGE,
-      this.handleVisibilityChangeEvent,
-    );
-    globalThis.removeEventListener(EVENTS.FOCUSOUT, this.handleFormFieldBlurEvent);
-    this.removeAutofillOverlay();
-    this.removeOverlayRepositionEventListeners();
-  }
-}
-
-export default LegacyAutofillOverlayContentService;
diff --git a/apps/browser/src/autofill/popup/settings/autofill.component.html b/apps/browser/src/autofill/popup/settings/autofill.component.html
index 90a536ad25d..4fd85ddce33 100644
--- a/apps/browser/src/autofill/popup/settings/autofill.component.html
+++ b/apps/browser/src/autofill/popup/settings/autofill.component.html
@@ -43,10 +43,7 @@
             </a>
           </bit-hint>
         </bit-form-control>
-        <bit-form-control
-          *ngIf="inlineMenuPositioningImprovementsEnabled && enableInlineMenu"
-          class="tw-ml-5"
-        >
+        <bit-form-control *ngIf="enableInlineMenu" class="tw-ml-5">
           <input
             bitCheckbox
             id="show-inline-menu-identities"
@@ -58,10 +55,7 @@
             {{ "showInlineMenuIdentitiesLabel" | i18n }}
           </bit-label>
         </bit-form-control>
-        <bit-form-control
-          *ngIf="inlineMenuPositioningImprovementsEnabled && enableInlineMenu"
-          class="tw-ml-5"
-        >
+        <bit-form-control *ngIf="enableInlineMenu" class="tw-ml-5">
           <input
             bitCheckbox
             id="show-inline-menu-cards"
diff --git a/apps/browser/src/autofill/popup/settings/autofill.component.ts b/apps/browser/src/autofill/popup/settings/autofill.component.ts
index eb18ea9f23e..c30f150e71d 100644
--- a/apps/browser/src/autofill/popup/settings/autofill.component.ts
+++ b/apps/browser/src/autofill/popup/settings/autofill.component.ts
@@ -92,7 +92,6 @@ export class AutofillComponent implements OnInit {
   protected defaultBrowserAutofillDisabled: boolean = false;
   protected inlineMenuVisibility: InlineMenuVisibilitySetting =
     AutofillOverlayVisibility.OnFieldFocus;
-  protected inlineMenuPositioningImprovementsEnabled: boolean = false;
   protected blockBrowserInjectionsByDomainEnabled: boolean = false;
   protected browserClientVendor: BrowserClientVendor = BrowserClientVendors.Unknown;
   protected disablePasswordManagerURI: DisablePasswordManagerUri =
@@ -180,21 +179,17 @@ export class AutofillComponent implements OnInit {
       this.autofillSettingsService.inlineMenuVisibility$,
     );
 
-    this.inlineMenuPositioningImprovementsEnabled = await this.configService.getFeatureFlag(
-      FeatureFlag.InlineMenuPositioningImprovements,
-    );
-
     this.blockBrowserInjectionsByDomainEnabled = await this.configService.getFeatureFlag(
       FeatureFlag.BlockBrowserInjectionsByDomain,
     );
 
-    this.showInlineMenuIdentities =
-      this.inlineMenuPositioningImprovementsEnabled &&
-      (await firstValueFrom(this.autofillSettingsService.showInlineMenuIdentities$));
+    this.showInlineMenuIdentities = await firstValueFrom(
+      this.autofillSettingsService.showInlineMenuIdentities$,
+    );
 
-    this.showInlineMenuCards =
-      this.inlineMenuPositioningImprovementsEnabled &&
-      (await firstValueFrom(this.autofillSettingsService.showInlineMenuCards$));
+    this.showInlineMenuCards = await firstValueFrom(
+      this.autofillSettingsService.showInlineMenuCards$,
+    );
 
     this.enableInlineMenuOnIconSelect =
       this.inlineMenuVisibility === AutofillOverlayVisibility.OnButtonClick;
diff --git a/apps/browser/src/autofill/services/autofill.service.ts b/apps/browser/src/autofill/services/autofill.service.ts
index ad3f4cc15eb..0423078fd1c 100644
--- a/apps/browser/src/autofill/services/autofill.service.ts
+++ b/apps/browser/src/autofill/services/autofill.service.ts
@@ -284,15 +284,6 @@ export default class AutofillService implements AutofillServiceInterface {
       inlineMenuVisibility = await this.getInlineMenuVisibility();
     }
 
-    const inlineMenuPositioningImprovements = await this.configService.getFeatureFlag(
-      FeatureFlag.InlineMenuPositioningImprovements,
-    );
-    if (!inlineMenuPositioningImprovements) {
-      return !inlineMenuVisibility
-        ? "bootstrap-autofill.js"
-        : "bootstrap-legacy-autofill-overlay.js";
-    }
-
     const enableChangedPasswordPrompt = await firstValueFrom(
       this.userNotificationSettingsService.enableChangedPasswordPrompt$,
     );
diff --git a/apps/browser/src/background/main.background.ts b/apps/browser/src/background/main.background.ts
index c437698f525..2b6827aafa4 100644
--- a/apps/browser/src/background/main.background.ts
+++ b/apps/browser/src/background/main.background.ts
@@ -245,7 +245,6 @@ import WebRequestBackground from "../autofill/background/web-request.background"
 import { CipherContextMenuHandler } from "../autofill/browser/cipher-context-menu-handler";
 import { ContextMenuClickedHandler } from "../autofill/browser/context-menu-clicked-handler";
 import { MainContextMenuHandler } from "../autofill/browser/main-context-menu-handler";
-import LegacyOverlayBackground from "../autofill/deprecated/background/overlay.background.deprecated";
 import { Fido2Background as Fido2BackgroundAbstraction } from "../autofill/fido2/background/abstractions/fido2.background";
 import { Fido2Background } from "../autofill/fido2/background/fido2.background";
 import {
@@ -1716,45 +1715,26 @@ export default class MainBackground {
       return;
     }
 
-    const inlineMenuPositioningImprovementsEnabled = await this.configService.getFeatureFlag(
-      FeatureFlag.InlineMenuPositioningImprovements,
+    this.overlayBackground = new OverlayBackground(
+      this.logService,
+      this.cipherService,
+      this.autofillService,
+      this.authService,
+      this.environmentService,
+      this.domainSettingsService,
+      this.autofillSettingsService,
+      this.i18nService,
+      this.platformUtilsService,
+      this.vaultSettingsService,
+      this.fido2ActiveRequestManager,
+      this.inlineMenuFieldQualificationService,
+      this.themeStateService,
+      this.totpService,
+      this.accountService,
+      () => this.generatePassword(),
+      (password) => this.addPasswordToHistory(password),
     );
 
-    if (!inlineMenuPositioningImprovementsEnabled) {
-      this.overlayBackground = new LegacyOverlayBackground(
-        this.cipherService,
-        this.autofillService,
-        this.authService,
-        this.environmentService,
-        this.domainSettingsService,
-        this.autofillSettingsService,
-        this.i18nService,
-        this.platformUtilsService,
-        this.themeStateService,
-        this.accountService,
-      );
-    } else {
-      this.overlayBackground = new OverlayBackground(
-        this.logService,
-        this.cipherService,
-        this.autofillService,
-        this.authService,
-        this.environmentService,
-        this.domainSettingsService,
-        this.autofillSettingsService,
-        this.i18nService,
-        this.platformUtilsService,
-        this.vaultSettingsService,
-        this.fido2ActiveRequestManager,
-        this.inlineMenuFieldQualificationService,
-        this.themeStateService,
-        this.totpService,
-        this.accountService,
-        () => this.generatePassword(),
-        (password) => this.addPasswordToHistory(password),
-      );
-    }
-
     this.tabsBackground = new TabsBackground(
       this,
       this.notificationBackground,
diff --git a/apps/browser/src/manifest.json b/apps/browser/src/manifest.json
index 07aa3d2e4a9..35578fb8321 100644
--- a/apps/browser/src/manifest.json
+++ b/apps/browser/src/manifest.json
@@ -79,12 +79,7 @@
   "__safari__optional_permissions": null,
   "content_security_policy": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'",
   "sandbox": {
-    "pages": [
-      "overlay/menu-button.html",
-      "overlay/menu-list.html",
-      "overlay/button.html",
-      "overlay/list.html"
-    ],
+    "pages": ["overlay/menu-button.html", "overlay/menu-list.html"],
     "content_security_policy": "sandbox allow-scripts; script-src 'self'"
   },
   "__firefox__sandbox": null,
@@ -140,8 +135,6 @@
     "overlay/menu-button.html",
     "overlay/menu-list.html",
     "overlay/menu.html",
-    "overlay/button.html",
-    "overlay/list.html",
     "popup/fonts/*"
   ],
   "__firefox__browser_specific_settings": {
diff --git a/apps/browser/src/manifest.v3.json b/apps/browser/src/manifest.v3.json
index be1a3f17827..556a73ac15b 100644
--- a/apps/browser/src/manifest.v3.json
+++ b/apps/browser/src/manifest.v3.json
@@ -105,12 +105,7 @@
     "__chrome__sandbox": "sandbox allow-scripts; script-src 'self'"
   },
   "sandbox": {
-    "pages": [
-      "overlay/menu-button.html",
-      "overlay/menu-list.html",
-      "overlay/button.html",
-      "overlay/list.html"
-    ]
+    "pages": ["overlay/menu-button.html", "overlay/menu-list.html"]
   },
   "__firefox__sandbox": null,
   "commands": {
@@ -167,8 +162,6 @@
         "overlay/menu-button.html",
         "overlay/menu-list.html",
         "overlay/menu.html",
-        "overlay/button.html",
-        "overlay/list.html",
         "popup/fonts/*"
       ],
       "matches": ["<all_urls>"]
diff --git a/apps/browser/webpack.config.js b/apps/browser/webpack.config.js
index 09d1133a4df..4b66ed7d70a 100644
--- a/apps/browser/webpack.config.js
+++ b/apps/browser/webpack.config.js
@@ -135,16 +135,6 @@ const plugins = [
     filename: "overlay/menu.html",
     chunks: ["overlay/menu"],
   }),
-  new HtmlWebpackPlugin({
-    template: "./src/autofill/deprecated/overlay/pages/button/legacy-button.html",
-    filename: "overlay/button.html",
-    chunks: ["overlay/button"],
-  }),
-  new HtmlWebpackPlugin({
-    template: "./src/autofill/deprecated/overlay/pages/list/legacy-list.html",
-    filename: "overlay/list.html",
-    chunks: ["overlay/list"],
-  }),
   new CopyWebpackPlugin({
     patterns: [
       {
@@ -197,8 +187,6 @@ const mainConfig = {
       "./src/autofill/content/bootstrap-autofill-overlay-menu.ts",
     "content/bootstrap-autofill-overlay-notifications":
       "./src/autofill/content/bootstrap-autofill-overlay-notifications.ts",
-    "content/bootstrap-legacy-autofill-overlay":
-      "./src/autofill/deprecated/content/bootstrap-legacy-autofill-overlay.ts",
     "content/autofiller": "./src/autofill/content/autofiller.ts",
     "content/auto-submit-login": "./src/autofill/content/auto-submit-login.ts",
     "content/contextMenuHandler": "./src/autofill/content/context-menu-handler.ts",
@@ -213,10 +201,6 @@ const mainConfig = {
       "./src/autofill/overlay/inline-menu/pages/list/bootstrap-autofill-inline-menu-list.ts",
     "overlay/menu":
       "./src/autofill/overlay/inline-menu/pages/menu-container/bootstrap-autofill-inline-menu-container.ts",
-    "overlay/button":
-      "./src/autofill/deprecated/overlay/pages/button/bootstrap-autofill-overlay-button.deprecated.ts",
-    "overlay/list":
-      "./src/autofill/deprecated/overlay/pages/list/bootstrap-autofill-overlay-list.deprecated.ts",
     "encrypt-worker": "../../libs/common/src/key-management/crypto/services/encrypt.worker.ts",
     "content/send-on-installed-message": "./src/vault/content/send-on-installed-message.ts",
     "content/send-popup-open-message": "./src/vault/content/send-popup-open-message.ts",
diff --git a/libs/common/src/enums/feature-flag.enum.ts b/libs/common/src/enums/feature-flag.enum.ts
index 9ee1ef919f5..f9e2d9757bc 100644
--- a/libs/common/src/enums/feature-flag.enum.ts
+++ b/libs/common/src/enums/feature-flag.enum.ts
@@ -24,7 +24,6 @@ export enum FeatureFlag {
   EnableNewCardCombinedExpiryAutofill = "enable-new-card-combined-expiry-autofill",
   GenerateIdentityFillScriptRefactor = "generate-identity-fill-script-refactor",
   IdpAutoSubmitLogin = "idp-auto-submit-login",
-  InlineMenuPositioningImprovements = "inline-menu-positioning-improvements",
   NotificationRefresh = "notification-refresh",
   UseTreeWalkerApiForPageDetailsCollection = "use-tree-walker-api-for-page-details-collection",
   MacOsNativeCredentialSync = "macos-native-credential-sync",
@@ -89,7 +88,6 @@ export const DefaultFeatureFlagValue = {
   [FeatureFlag.EnableNewCardCombinedExpiryAutofill]: FALSE,
   [FeatureFlag.GenerateIdentityFillScriptRefactor]: FALSE,
   [FeatureFlag.IdpAutoSubmitLogin]: FALSE,
-  [FeatureFlag.InlineMenuPositioningImprovements]: FALSE,
   [FeatureFlag.NotificationRefresh]: FALSE,
   [FeatureFlag.UseTreeWalkerApiForPageDetailsCollection]: FALSE,
   [FeatureFlag.MacOsNativeCredentialSync]: FALSE,

From defbbd586fc9f3f279518655170ba4201e0d5081 Mon Sep 17 00:00:00 2001
From: Jordan Aasen <166539328+jaasen-livefront@users.noreply.github.com>
Date: Wed, 16 Apr 2025 11:06:40 -0700
Subject: [PATCH 17/36] [PM-19357] - [Defect] Unauthorised access allows
 limited access user to change custom hidden field of Items (#14068)

* update tests

* finish tests

* only disallow hidden fields for hiddenPassword users

* fix failing tests

* fix story

* only disable hidden field option when editing
---
 .../src/cipher-form/cipher-form.stories.ts    |  9 ++
 ...edit-custom-field-dialog.component.spec.ts | 20 +++++
 .../add-edit-custom-field-dialog.component.ts |  4 +
 .../custom-fields.component.html              |  4 +-
 .../custom-fields.component.spec.ts           | 90 ++++++++++++++++++-
 .../custom-fields/custom-fields.component.ts  | 13 ++-
 6 files changed, 136 insertions(+), 4 deletions(-)

diff --git a/libs/vault/src/cipher-form/cipher-form.stories.ts b/libs/vault/src/cipher-form/cipher-form.stories.ts
index 52d70e8652a..50577472120 100644
--- a/libs/vault/src/cipher-form/cipher-form.stories.ts
+++ b/libs/vault/src/cipher-form/cipher-form.stories.ts
@@ -1,6 +1,7 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { importProvidersFrom, signal } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
 import { action } from "@storybook/addon-actions";
 import {
   applicationConfig,
@@ -225,6 +226,14 @@ export default {
             getFeatureFlag: () => Promise.resolve(false),
           },
         },
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            snapshot: {
+              queryParams: {},
+            },
+          },
+        },
       ],
     }),
     componentWrapperDecorator(
diff --git a/libs/vault/src/cipher-form/components/custom-fields/add-edit-custom-field-dialog/add-edit-custom-field-dialog.component.spec.ts b/libs/vault/src/cipher-form/components/custom-fields/add-edit-custom-field-dialog/add-edit-custom-field-dialog.component.spec.ts
index 58a9b8f3965..af39ea96c16 100644
--- a/libs/vault/src/cipher-form/components/custom-fields/add-edit-custom-field-dialog/add-edit-custom-field-dialog.component.spec.ts
+++ b/libs/vault/src/cipher-form/components/custom-fields/add-edit-custom-field-dialog/add-edit-custom-field-dialog.component.spec.ts
@@ -83,4 +83,24 @@ describe("AddEditCustomFieldDialogComponent", () => {
       expect.objectContaining({ value: FieldType.Linked }),
     );
   });
+
+  it("does not filter out 'Hidden' field type when 'disallowHiddenField' is false", () => {
+    dialogData.disallowHiddenField = false;
+    fixture = TestBed.createComponent(AddEditCustomFieldDialogComponent);
+    component = fixture.componentInstance;
+
+    expect(component.fieldTypeOptions).toContainEqual(
+      expect.objectContaining({ value: FieldType.Hidden }),
+    );
+  });
+
+  it("filers out 'Hidden' field type when 'disallowHiddenField' is true", () => {
+    dialogData.disallowHiddenField = true;
+    fixture = TestBed.createComponent(AddEditCustomFieldDialogComponent);
+    component = fixture.componentInstance;
+
+    expect(component.fieldTypeOptions).not.toContainEqual(
+      expect.objectContaining({ value: FieldType.Hidden }),
+    );
+  });
 });
diff --git a/libs/vault/src/cipher-form/components/custom-fields/add-edit-custom-field-dialog/add-edit-custom-field-dialog.component.ts b/libs/vault/src/cipher-form/components/custom-fields/add-edit-custom-field-dialog/add-edit-custom-field-dialog.component.ts
index bdf5345672d..72bdf5dca1a 100644
--- a/libs/vault/src/cipher-form/components/custom-fields/add-edit-custom-field-dialog/add-edit-custom-field-dialog.component.ts
+++ b/libs/vault/src/cipher-form/components/custom-fields/add-edit-custom-field-dialog/add-edit-custom-field-dialog.component.ts
@@ -25,6 +25,7 @@ export type AddEditCustomFieldDialogData = {
   cipherType: CipherType;
   /** When provided, dialog will display edit label variants */
   editLabelConfig?: { index: number; label: string };
+  disallowHiddenField?: boolean;
 };
 
 @Component({
@@ -68,6 +69,9 @@ export class AddEditCustomFieldDialogComponent {
     this.variant = data.editLabelConfig ? "edit" : "add";
 
     this.fieldTypeOptions = this.fieldTypeOptions.filter((option) => {
+      if (this.data.disallowHiddenField && option.value === FieldType.Hidden) {
+        return false;
+      }
       // Filter out the Linked field type for Secure Notes
       if (this.data.cipherType === CipherType.SecureNote) {
         return option.value !== FieldType.Linked;
diff --git a/libs/vault/src/cipher-form/components/custom-fields/custom-fields.component.html b/libs/vault/src/cipher-form/components/custom-fields/custom-fields.component.html
index 3bce3c5f385..1305bcdae05 100644
--- a/libs/vault/src/cipher-form/components/custom-fields/custom-fields.component.html
+++ b/libs/vault/src/cipher-form/components/custom-fields/custom-fields.component.html
@@ -89,7 +89,7 @@
           bitIconButton="bwi-pencil-square"
           class="tw-self-center tw-mt-2"
           data-testid="edit-custom-field-button"
-          *ngIf="!isPartialEdit"
+          *ngIf="canEdit(field.value.type)"
         ></button>
 
         <button
@@ -100,7 +100,7 @@
           [appA11yTitle]="'reorderToggleButton' | i18n: field.value.name"
           (keydown)="handleKeyDown($event, field.value.name, i)"
           data-testid="reorder-toggle-button"
-          *ngIf="!isPartialEdit"
+          *ngIf="canEdit(field.value.type)"
         ></button>
       </div>
 
diff --git a/libs/vault/src/cipher-form/components/custom-fields/custom-fields.component.spec.ts b/libs/vault/src/cipher-form/components/custom-fields/custom-fields.component.spec.ts
index fb9664594ed..ced8763f895 100644
--- a/libs/vault/src/cipher-form/components/custom-fields/custom-fields.component.spec.ts
+++ b/libs/vault/src/cipher-form/components/custom-fields/custom-fields.component.spec.ts
@@ -45,7 +45,9 @@ describe("CustomFieldsComponent", () => {
     announce = jest.fn().mockResolvedValue(null);
     patchCipher = jest.fn();
     originalCipherView = new CipherView();
-    config = {} as CipherFormConfig;
+    config = {
+      collections: [],
+    } as CipherFormConfig;
 
     await TestBed.configureTestingModule({
       imports: [CustomFieldsComponent],
@@ -463,5 +465,91 @@ describe("CustomFieldsComponent", () => {
       // "reorder boolean label to position 4 of 4"
       expect(announce).toHaveBeenCalledWith("reorderFieldDown boolean label 4 4", "assertive");
     });
+
+    it("hides reorder buttons when in partial edit mode", () => {
+      originalCipherView.fields = mockFieldViews;
+      config.mode = "partial-edit";
+
+      component.ngOnInit();
+      fixture.detectChanges();
+
+      toggleItems = fixture.debugElement.queryAll(
+        By.css('button[data-testid="reorder-toggle-button"]'),
+      );
+
+      expect(toggleItems).toHaveLength(0);
+    });
+  });
+
+  it("shows all reorders button when in edit mode and viewPassword is true", () => {
+    originalCipherView.fields = mockFieldViews;
+    originalCipherView.viewPassword = true;
+    config.mode = "edit";
+
+    component.ngOnInit();
+    fixture.detectChanges();
+
+    const toggleItems = fixture.debugElement.queryAll(
+      By.css('button[data-testid="reorder-toggle-button"]'),
+    );
+    expect(toggleItems).toHaveLength(4);
+  });
+
+  it("shows all reorder buttons except for hidden fields when in edit mode and viewPassword is false", () => {
+    originalCipherView.fields = mockFieldViews;
+    originalCipherView.viewPassword = false;
+    config.mode = "edit";
+
+    component.ngOnInit();
+    fixture.detectChanges();
+
+    const toggleItems = fixture.debugElement.queryAll(
+      By.css('button[data-testid="reorder-toggle-button"]'),
+    );
+
+    expect(toggleItems).toHaveLength(3);
+  });
+
+  describe("edit button", () => {
+    it("hides the edit button when in partial-edit mode", () => {
+      originalCipherView.fields = mockFieldViews;
+      config.mode = "partial-edit";
+
+      component.ngOnInit();
+      fixture.detectChanges();
+
+      const editButtons = fixture.debugElement.queryAll(
+        By.css('button[data-testid="edit-custom-field-button"]'),
+      );
+      expect(editButtons).toHaveLength(0);
+    });
+
+    it("shows all the edit buttons when in edit mode and viewPassword is true", () => {
+      originalCipherView.fields = mockFieldViews;
+      originalCipherView.viewPassword = true;
+      config.mode = "edit";
+
+      component.ngOnInit();
+      fixture.detectChanges();
+
+      const editButtons = fixture.debugElement.queryAll(
+        By.css('button[data-testid="edit-custom-field-button"]'),
+      );
+      expect(editButtons).toHaveLength(4);
+    });
+
+    it("shows all the edit buttons except for hidden fields when in edit mode and viewPassword is false", () => {
+      originalCipherView.fields = mockFieldViews;
+      originalCipherView.viewPassword = false;
+      config.mode = "edit";
+
+      component.ngOnInit();
+      fixture.detectChanges();
+
+      const editButtons = fixture.debugElement.queryAll(
+        By.css('button[data-testid="edit-custom-field-button"]'),
+      );
+      expect(editButtons).toHaveLength(3);
+    });
   });
 });
diff --git a/libs/vault/src/cipher-form/components/custom-fields/custom-fields.component.ts b/libs/vault/src/cipher-form/components/custom-fields/custom-fields.component.ts
index dd3fd8c24a8..49e9e109b74 100644
--- a/libs/vault/src/cipher-form/components/custom-fields/custom-fields.component.ts
+++ b/libs/vault/src/cipher-form/components/custom-fields/custom-fields.component.ts
@@ -116,6 +116,8 @@ export class CustomFieldsComponent implements OnInit, AfterViewInit {
   /** Emits when a new custom field should be focused */
   private focusOnNewInput$ = new Subject<void>();
 
+  disallowHiddenField?: boolean;
+
   destroyed$: DestroyRef;
   FieldType = FieldType;
 
@@ -141,6 +143,13 @@ export class CustomFieldsComponent implements OnInit, AfterViewInit {
     return this.customFieldsForm.controls.fields as FormArray;
   }
 
+  canEdit(type: FieldType): boolean {
+    return (
+      !this.isPartialEdit &&
+      (type !== FieldType.Hidden || this.cipherFormContainer.originalCipherView?.viewPassword)
+    );
+  }
+
   ngOnInit() {
     const linkedFieldsOptionsForCipher = this.getLinkedFieldsOptionsForCipher();
     const optionsArray = Array.from(linkedFieldsOptionsForCipher?.entries() ?? []);
@@ -210,6 +219,7 @@ export class CustomFieldsComponent implements OnInit, AfterViewInit {
 
   /** Opens the add/edit custom field dialog */
   openAddEditCustomFieldDialog(editLabelConfig?: AddEditCustomFieldDialogData["editLabelConfig"]) {
+    const { cipherType, mode, originalCipher } = this.cipherFormContainer.config;
     this.dialogRef = this.dialogService.open<unknown, AddEditCustomFieldDialogData>(
       AddEditCustomFieldDialogComponent,
       {
@@ -217,8 +227,9 @@ export class CustomFieldsComponent implements OnInit, AfterViewInit {
           addField: this.addField.bind(this),
           updateLabel: this.updateLabel.bind(this),
           removeField: this.removeField.bind(this),
-          cipherType: this.cipherFormContainer.config.cipherType,
+          cipherType,
           editLabelConfig,
+          disallowHiddenField: mode === "edit" && !originalCipher.viewPassword,
         },
       },
     );

From 3c3a0e65d86f6ac41e572b22c31656f70c22a379 Mon Sep 17 00:00:00 2001
From: Jonathan Prusik <jprusik@users.noreply.github.com>
Date: Wed, 16 Apr 2025 15:06:36 -0400
Subject: [PATCH 18/36] [PM-20310] Icon updates followup (#14312)

* remove brand icon story from lit storybook

* replace users icon with family icon

* update collection icon shape and name
---
 .../cipher/cipher-indicator-icons.ts          |  4 ++--
 .../{collection.ts => collection-shared.ts}   |  4 ++--
 .../content/components/icons/family.ts        | 19 +++++++++++++++++++
 .../content/components/icons/index.ts         |  4 ++--
 .../content/components/icons/users.ts         | 18 ------------------
 .../lit-stories/icons/icons.lit-stories.ts    | 13 +++++--------
 .../components/notification/button-row.ts     |  4 ++--
 7 files changed, 32 insertions(+), 34 deletions(-)
 rename apps/browser/src/autofill/content/components/icons/{collection.ts => collection-shared.ts} (65%)
 create mode 100644 apps/browser/src/autofill/content/components/icons/family.ts
 delete mode 100644 apps/browser/src/autofill/content/components/icons/users.ts

diff --git a/apps/browser/src/autofill/content/components/cipher/cipher-indicator-icons.ts b/apps/browser/src/autofill/content/components/cipher/cipher-indicator-icons.ts
index e4fe012a678..5e78fd5658a 100644
--- a/apps/browser/src/autofill/content/components/cipher/cipher-indicator-icons.ts
+++ b/apps/browser/src/autofill/content/components/cipher/cipher-indicator-icons.ts
@@ -4,7 +4,7 @@ import { html, TemplateResult } from "lit";
 import { Theme } from "@bitwarden/common/platform/enums";
 
 import { themes } from "../../../content/components/constants/styles";
-import { Business, Users } from "../../../content/components/icons";
+import { Business, Family } from "../../../content/components/icons";
 
 import { OrganizationCategories, OrganizationCategory } from "./types";
 
@@ -13,7 +13,7 @@ const cipherIndicatorIconsMap: Record<
   (args: { color: string; theme: Theme }) => TemplateResult
 > = {
   [OrganizationCategories.business]: Business,
-  [OrganizationCategories.family]: Users,
+  [OrganizationCategories.family]: Family,
 };
 
 export function CipherInfoIndicatorIcons({
diff --git a/apps/browser/src/autofill/content/components/icons/collection.ts b/apps/browser/src/autofill/content/components/icons/collection-shared.ts
similarity index 65%
rename from apps/browser/src/autofill/content/components/icons/collection.ts
rename to apps/browser/src/autofill/content/components/icons/collection-shared.ts
index fb2c58647c5..de366b88e92 100644
--- a/apps/browser/src/autofill/content/components/icons/collection.ts
+++ b/apps/browser/src/autofill/content/components/icons/collection-shared.ts
@@ -4,14 +4,14 @@ import { html } from "lit";
 import { IconProps } from "../common-types";
 import { buildIconColorRule, ruleNames, themes } from "../constants/styles";
 
-export function Collection({ color, disabled, theme }: IconProps) {
+export function CollectionShared({ color, disabled, theme }: IconProps) {
   const shapeColor = disabled ? themes[theme].secondary["300"] : color || themes[theme].text.main;
 
   return html`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="none">
       <path
         class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
-        d="M3.5.75A.75.75 0 0 1 4.25 0h5.5a.75.75 0 0 1 0 1.5h-5.5A.75.75 0 0 1 3.5.75ZM2.25 2a.75.75 0 0 0 0 1.5h9.5a.75.75 0 0 0 0-1.5h-9.5Z"
+        d="M3.5.75A.75.75 0 0 1 4.25 0h5.5a.75.75 0 0 1 0 1.5h-5.5A.75.75 0 0 1 3.5.75ZM2.25 2a.75.75 0 0 0 0 1.5h9.5a.75.75 0 0 0 0-1.5h-9.5ZM6 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM10 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM7 11.46a1.928 1.928 0 0 0-.586-1.386 2.035 2.035 0 0 0-2.828 0A1.928 1.928 0 0 0 3 11.461c0 .298.241.539.54.539h2.92a.54.54 0 0 0 .54-.54ZM8 11.46a2.928 2.928 0 0 0-.371-1.426A2.005 2.005 0 0 1 9 9.5a2.035 2.035 0 0 1 1.414.574A1.928 1.928 0 0 1 11 11.461a.54.54 0 0 1-.54.539H7.904c.063-.168.097-.35.097-.54Z"
       />
       <path
         class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
diff --git a/apps/browser/src/autofill/content/components/icons/family.ts b/apps/browser/src/autofill/content/components/icons/family.ts
new file mode 100644
index 00000000000..4a9db91f43a
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/icons/family.ts
@@ -0,0 +1,19 @@
+import { css } from "@emotion/css";
+import { html } from "lit";
+
+import { IconProps } from "../common-types";
+import { buildIconColorRule, ruleNames, themes } from "../constants/styles";
+
+export function Family({ color, disabled, theme }: IconProps) {
+  const shapeColor = disabled ? themes[theme].secondary["300"] : color || themes[theme].text.main;
+
+  return html`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
+      <path
+        class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
+        fill-rule="evenodd"
+        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.47 6.47 0 0 1-.932 3.356 3.732 3.732 0 0 0-1.106-.784 3.547 3.547 0 0 0-.516-.19 2 2 0 1 0-3.444-1.297c-.323-.216-.681-.4-1.069-.536a2.5 2.5 0 1 0-3.065-.155 5.405 5.405 0 0 0-1.59.674 3.912 3.912 0 0 0-.977.893A6.5 6.5 0 1 1 14.5 8ZM2.531 11.514a.75.75 0 0 0 .103-.13c.276-.436.552-.801.942-1.047a3.837 3.837 0 0 1 1.177-.492 5.243 5.243 0 0 1 .845-.095h.007l.022.001h.023c.436 0 .865.07 1.262.205.381.13.733.335 1.037.584.175.143.324.3.448.465l.164.226a4.13 4.13 0 0 0-1.035 1.565 4.407 4.407 0 0 0-.276 1.537c0 .043.004.085.01.125a6.5 6.5 0 0 1-4.729-2.944Zm10.033.964.07.08a6.481 6.481 0 0 1-3.894 1.9.757.757 0 0 0 .01-.125c0-.35.062-.694.181-1.013a2.63 2.63 0 0 1 .505-.842c.213-.237.462-.42.73-.543.267-.123.55-.185.834-.185.284 0 .567.062.835.185.267.123.516.306.729.543ZM7 6.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM11 9a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z"
+      />
+    </svg>
+  `;
+}
diff --git a/apps/browser/src/autofill/content/components/icons/index.ts b/apps/browser/src/autofill/content/components/icons/index.ts
index de39b70ab24..65ec6301ac4 100644
--- a/apps/browser/src/autofill/content/components/icons/index.ts
+++ b/apps/browser/src/autofill/content/components/icons/index.ts
@@ -3,12 +3,12 @@ export { AngleUp } from "./angle-up";
 export { BrandIconContainer } from "./brand-icon-container";
 export { Business } from "./business";
 export { Close } from "./close";
-export { Collection } from "./collection";
+export { CollectionShared } from "./collection-shared";
 export { ExclamationTriangle } from "./exclamation-triangle";
 export { ExternalLink } from "./external-link";
+export { Family } from "./family";
 export { Folder } from "./folder";
 export { Globe } from "./globe";
 export { PencilSquare } from "./pencil-square";
 export { Shield } from "./shield";
 export { User } from "./user";
-export { Users } from "./users";
diff --git a/apps/browser/src/autofill/content/components/icons/users.ts b/apps/browser/src/autofill/content/components/icons/users.ts
deleted file mode 100644
index eb7840104f0..00000000000
--- a/apps/browser/src/autofill/content/components/icons/users.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { css } from "@emotion/css";
-import { html } from "lit";
-
-import { IconProps } from "../common-types";
-import { buildIconColorRule, ruleNames, themes } from "../constants/styles";
-
-export function Users({ color, disabled, theme }: IconProps) {
-  const shapeColor = disabled ? themes[theme].secondary["300"] : color || themes[theme].text.main;
-
-  return html`
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 14" fill="none">
-      <path
-        class=${css(buildIconColorRule(shapeColor, ruleNames.fill))}
-        d="M6.5 2.5c0 .375-.082.73-.23 1.049A2.986 2.986 0 0 1 8 3c.644 0 1.241.203 1.73.549a2.5 2.5 0 1 1 3.925.825 4 4 0 0 1 1.173.846c.372.387.667.847.867 1.352.201.506.305 1.047.305 1.595 0 .46-.373.833-.833.833H11a4.987 4.987 0 0 1 1.62 2.087A5 5 0 0 1 13 13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1 5 5 0 0 1 2-4H.833A.833.833 0 0 1 0 8.167c0-.548.103-1.09.304-1.595.202-.505.496-.965.868-1.352.339-.353.736-.64 1.173-.846A2.5 2.5 0 1 1 6.5 2.5ZM4 3.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1.401 4a2.986 2.986 0 0 1-.389-1.771A2.404 2.404 0 0 0 4 5.5c-.32 0-.638.065-.936.194-.3.13-.575.32-.81.565A2.682 2.682 0 0 0 1.579 7.5h3.822Zm5.198 0h3.822a2.682 2.682 0 0 0-.674-1.24 2.493 2.493 0 0 0-.81-.566 2.362 2.362 0 0 0-1.95.035 2.987 2.987 0 0 1-.39 1.771ZM12 3.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm-4 4a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm3.464 5a3.5 3.5 0 0 0-6.928 0h6.928Z"
-      />
-    </svg>
-  `;
-}
diff --git a/apps/browser/src/autofill/content/components/lit-stories/icons/icons.lit-stories.ts b/apps/browser/src/autofill/content/components/lit-stories/icons/icons.lit-stories.ts
index fc5db1c7c2c..c74895e1dea 100644
--- a/apps/browser/src/autofill/content/components/lit-stories/icons/icons.lit-stories.ts
+++ b/apps/browser/src/autofill/content/components/lit-stories/icons/icons.lit-stories.ts
@@ -43,26 +43,23 @@ const createIconStory = (iconName: keyof typeof Icons): StoryObj<Args> => {
     render: (args) => Template(args, Icons[iconName]),
   } as StoryObj<Args>;
 
-  if (iconName !== "BrandIconContainer") {
-    story.argTypes = {
-      iconLink: { table: { disable: true } },
-    };
-  }
+  story.argTypes = {
+    iconLink: { table: { disable: true } },
+  };
 
   return story;
 };
 
 export const AngleDownIcon = createIconStory("AngleDown");
 export const AngleUpIcon = createIconStory("AngleUp");
-export const BrandIcon = createIconStory("BrandIconContainer");
 export const BusinessIcon = createIconStory("Business");
 export const CloseIcon = createIconStory("Close");
-export const CollectionIcon = createIconStory("Collection");
+export const CollectionSharedIcon = createIconStory("CollectionShared");
 export const ExclamationTriangleIcon = createIconStory("ExclamationTriangle");
 export const ExternalLinkIcon = createIconStory("ExternalLink");
+export const FamilyIcon = createIconStory("Family");
 export const FolderIcon = createIconStory("Folder");
 export const GlobeIcon = createIconStory("Globe");
 export const PencilSquareIcon = createIconStory("PencilSquare");
 export const ShieldIcon = createIconStory("Shield");
 export const UserIcon = createIconStory("User");
-export const UsersIcon = createIconStory("Users");
diff --git a/apps/browser/src/autofill/content/components/notification/button-row.ts b/apps/browser/src/autofill/content/components/notification/button-row.ts
index 6fa32f11aa2..8661f5957e1 100644
--- a/apps/browser/src/autofill/content/components/notification/button-row.ts
+++ b/apps/browser/src/autofill/content/components/notification/button-row.ts
@@ -4,14 +4,14 @@ import { ProductTierType } from "@bitwarden/common/billing/enums";
 import { Theme } from "@bitwarden/common/platform/enums";
 
 import { Option, OrgView, FolderView } from "../common-types";
-import { Business, Users, Folder, User } from "../icons";
+import { Business, Family, Folder, User } from "../icons";
 import { ButtonRow } from "../rows/button-row";
 
 function getVaultIconByProductTier(productTierType?: ProductTierType): Option["icon"] {
   switch (productTierType) {
     case ProductTierType.Free:
     case ProductTierType.Families:
-      return Users;
+      return Family;
     case ProductTierType.Teams:
     case ProductTierType.Enterprise:
     case ProductTierType.TeamsStarter:

From 4b45bfaeeb4be5cfacb3f8c2d3febaf99dda2ee0 Mon Sep 17 00:00:00 2001
From: Jason Ng <jng@bitwarden.com>
Date: Wed, 16 Apr 2025 17:03:51 -0400
Subject: [PATCH 19/36] [PM-20236] update routing for intro carousel so path is
 not saved during popout (#14300)

---
 apps/browser/src/popup/app-routing.module.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/browser/src/popup/app-routing.module.ts b/apps/browser/src/popup/app-routing.module.ts
index 8ebf6eb6110..21ac4c19700 100644
--- a/apps/browser/src/popup/app-routing.module.ts
+++ b/apps/browser/src/popup/app-routing.module.ts
@@ -593,6 +593,7 @@ const routes: Routes = [
     path: "intro-carousel",
     component: ExtensionAnonLayoutWrapperComponent,
     canActivate: [],
+    data: { elevation: 0, doNotSaveUrl: true } satisfies RouteDataProperties,
     children: [
       {
         path: "",

From 9f61b6aaa7bbadadca59419741b30e59953823ba Mon Sep 17 00:00:00 2001
From: Jason Ng <jng@bitwarden.com>
Date: Wed, 16 Apr 2025 17:14:27 -0400
Subject: [PATCH 20/36] [PM-20182] update colors for intro carousel svg for
 dark theme (#14280)

---
 .../intro-carousel/intro-carousel.component.html       |  2 +-
 libs/vault/src/icons/login-cards.ts                    |  8 ++++----
 libs/vault/src/icons/secure-devices.ts                 | 10 +++++-----
 libs/vault/src/icons/secure-user.ts                    |  4 ++--
 libs/vault/src/icons/security-handshake.ts             |  8 ++++----
 5 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.html b/apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.html
index 3c061109945..ff7bf25b86b 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.html
@@ -43,7 +43,7 @@
   bitButton
   buttonType="secondary"
   (click)="navigateToLogin()"
-  class="tw-w-full tw-mt-4"
+  class="tw-w-full tw-mt-2"
 >
   {{ "logIn" | i18n }}
 </button>
diff --git a/libs/vault/src/icons/login-cards.ts b/libs/vault/src/icons/login-cards.ts
index 01baf308412..6e066a0d924 100644
--- a/libs/vault/src/icons/login-cards.ts
+++ b/libs/vault/src/icons/login-cards.ts
@@ -2,10 +2,10 @@ import { svgIcon } from "@bitwarden/components";
 
 export const LoginCards = svgIcon`
 <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" fill="none">
-<path class="tw-fill-background-alt4" fill-rule="evenodd" d="M134.152 32.493c0-.69.559-1.25 1.25-1.25h1.493a8.707 8.707 0 0 1 8.707 8.707v79.047a8.707 8.707 0 0 1-8.707 8.707H22.054c-4.81 0-8.707-3.906-8.707-8.713a1.25 1.25 0 1 1 2.5 0 6.212 6.212 0 0 0 6.207 6.213h114.841a6.207 6.207 0 0 0 6.207-6.207V39.95a6.207 6.207 0 0 0-6.207-6.207h-1.493a1.25 1.25 0 0 1-1.25-1.25Z" clip-rule="evenodd"/>
-<path class="tw-fill-background-alt4" fill-rule="evenodd" d="M13.105 24.795a6.207 6.207 0 0 0-6.207 6.207v80.538a6.207 6.207 0 0 0 6.207 6.207h114.841a6.207 6.207 0 0 0 6.208-6.207V31.002a6.207 6.207 0 0 0-6.208-6.207H13.106Zm-8.707 6.207a8.707 8.707 0 0 1 8.707-8.707h114.841a8.708 8.708 0 0 1 8.708 8.707v80.538a8.708 8.708 0 0 1-8.708 8.707H13.106a8.707 8.707 0 0 1-8.708-8.707V31.002Z" clip-rule="evenodd"/>
-<path class="tw-fill-background-alt4" fill-rule="evenodd" d="M120.964 75.915H20.766c-.819 0-1.483.664-1.483 1.483v8.949c0 .819.664 1.483 1.483 1.483h100.198c.819 0 1.483-.664 1.483-1.483v-8.95c0-.818-.664-1.482-1.483-1.482Zm-100.198-1.5a2.983 2.983 0 0 0-2.983 2.983v8.949a2.983 2.983 0 0 0 2.983 2.983h100.198a2.983 2.983 0 0 0 2.983-2.983v-8.95a2.983 2.983 0 0 0-2.983-2.982H20.766ZM120.964 96.794H20.766c-.819 0-1.483.664-1.483 1.483v8.948c0 .819.664 1.483 1.483 1.483h100.198c.819 0 1.483-.664 1.483-1.483v-8.948c0-.82-.664-1.483-1.483-1.483Zm-100.198-1.5a2.983 2.983 0 0 0-2.983 2.983v8.948a2.983 2.983 0 0 0 2.983 2.983h100.198a2.983 2.983 0 0 0 2.983-2.983v-8.948a2.983 2.983 0 0 0-2.983-2.983H20.766Z" clip-rule="evenodd"/>
+<path class="tw-fill-art-primary" fill-rule="evenodd" d="M134.152 32.493c0-.69.559-1.25 1.25-1.25h1.493a8.707 8.707 0 0 1 8.707 8.707v79.047a8.707 8.707 0 0 1-8.707 8.707H22.054c-4.81 0-8.707-3.906-8.707-8.713a1.25 1.25 0 1 1 2.5 0 6.212 6.212 0 0 0 6.207 6.213h114.841a6.207 6.207 0 0 0 6.207-6.207V39.95a6.207 6.207 0 0 0-6.207-6.207h-1.493a1.25 1.25 0 0 1-1.25-1.25Z" clip-rule="evenodd"/>
+<path class="tw-fill-art-primary" fill-rule="evenodd" d="M13.105 24.795a6.207 6.207 0 0 0-6.207 6.207v80.538a6.207 6.207 0 0 0 6.207 6.207h114.841a6.207 6.207 0 0 0 6.208-6.207V31.002a6.207 6.207 0 0 0-6.208-6.207H13.106Zm-8.707 6.207a8.707 8.707 0 0 1 8.707-8.707h114.841a8.708 8.708 0 0 1 8.708 8.707v80.538a8.708 8.708 0 0 1-8.708 8.707H13.106a8.707 8.707 0 0 1-8.708-8.707V31.002Z" clip-rule="evenodd"/>
+<path class="tw-fill-art-primary" fill-rule="evenodd" d="M120.964 75.915H20.766c-.819 0-1.483.664-1.483 1.483v8.949c0 .819.664 1.483 1.483 1.483h100.198c.819 0 1.483-.664 1.483-1.483v-8.95c0-.818-.664-1.482-1.483-1.482Zm-100.198-1.5a2.983 2.983 0 0 0-2.983 2.983v8.949a2.983 2.983 0 0 0 2.983 2.983h100.198a2.983 2.983 0 0 0 2.983-2.983v-8.95a2.983 2.983 0 0 0-2.983-2.982H20.766ZM120.964 96.794H20.766c-.819 0-1.483.664-1.483 1.483v8.948c0 .819.664 1.483 1.483 1.483h100.198c.819 0 1.483-.664 1.483-1.483v-8.948c0-.82-.664-1.483-1.483-1.483Zm-100.198-1.5a2.983 2.983 0 0 0-2.983 2.983v8.948a2.983 2.983 0 0 0 2.983 2.983h100.198a2.983 2.983 0 0 0 2.983-2.983v-8.948a2.983 2.983 0 0 0-2.983-2.983H20.766Z" clip-rule="evenodd"/>
 <path class="tw-fill-art-accent" fill-rule="evenodd" d="M22.795 81.712a.75.75 0 0 1 .75-.75H87.68a.75.75 0 0 1 0 1.5H23.545a.75.75 0 0 1-.75-.75ZM26.618 100.354a.75.75 0 0 0-1.5 0v1.426l-1.34-.439a.75.75 0 0 0-.466 1.426l1.353.443-.845 1.183a.75.75 0 0 0 1.221.872l.827-1.158.827 1.158a.75.75 0 0 0 1.22-.872l-.845-1.183 1.353-.443a.75.75 0 0 0-.466-1.426l-1.34.439v-1.426Zm9.584 0a.75.75 0 0 0-1.5 0v1.426l-1.339-.439a.75.75 0 0 0-.466 1.426l1.353.443-.845 1.183a.75.75 0 0 0 1.22.872l.827-1.158.827 1.158a.75.75 0 0 0 1.22-.872l-.844-1.183 1.353-.443a.75.75 0 0 0-.467-1.426l-1.339.439v-1.426Zm8.834-.75a.75.75 0 0 1 .75.75v1.426l1.339-.439a.75.75 0 0 1 .467 1.426l-1.353.443.845 1.183a.75.75 0 0 1-1.22.872l-.828-1.159-.827 1.159a.75.75 0 1 1-1.22-.872l.844-1.183-1.353-.443a.75.75 0 0 1 .467-1.426l1.339.439v-1.426a.75.75 0 0 1 .75-.75Zm10.334.75a.75.75 0 0 0-1.5 0v1.426l-1.339-.439a.75.75 0 0 0-.466 1.426l1.353.443-.845 1.183a.75.75 0 1 0 1.22.872l.828-1.159.827 1.159a.75.75 0 0 0 1.22-.872l-.845-1.183 1.353-.443a.75.75 0 0 0-.467-1.426l-1.339.439v-1.426Zm8.835-.75a.75.75 0 0 1 .75.75v1.426l1.338-.439a.75.75 0 0 1 .467 1.426l-1.352.443.845 1.183a.75.75 0 0 1-1.221.872l-.827-1.159-.828 1.159a.75.75 0 0 1-1.22-.872L63 103.21l-1.353-.443a.75.75 0 0 1 .467-1.426l1.34.439v-1.426a.75.75 0 0 1 .75-.75Zm10.334.75a.75.75 0 0 0-1.5 0v1.426l-1.34-.439a.75.75 0 0 0-.466 1.426l1.353.443-.845 1.183a.75.75 0 1 0 1.221.872l.827-1.158.827 1.158a.75.75 0 0 0 1.22-.872l-.844-1.183 1.352-.443a.75.75 0 0 0-.466-1.426l-1.34.439v-1.426ZM53.215 50.395c0-9.566 7.755-17.314 17.313-17.314 9.56 0 17.308 7.749 17.314 17.313 0 5.31-2.399 10.061-6.16 13.236l-.742.626-.418-.876c-1.785-3.736-5.584-6.324-9.994-6.324s-8.214 2.583-9.992 6.323l-.418.878-.743-.627c-3.761-3.175-6.16-7.92-6.16-13.236Zm13.8 5.66a12.594 12.594 0 0 0-7.373 5.801 15.759 15.759 0 0 1-4.927-11.462c0-8.736 7.083-15.813 15.813-15.813s15.808 7.077 15.814 15.814c0 4.51-1.895 8.58-4.928 11.462a12.623 12.623 0 0 0-7.373-5.802 6.659 6.659 0 0 0 3.149-5.66 6.663 6.663 0 0 0-6.662-6.662 6.663 6.663 0 0 0-6.66 6.662 6.659 6.659 0 0 0 3.147 5.66Zm3.513-10.822a5.163 5.163 0 0 0-5.16 5.162 5.163 5.163 0 0 0 5.16 5.16 5.163 5.163 0 0 0 5.162-5.16 5.163 5.163 0 0 0-5.162-5.162Z" clip-rule="evenodd"/>
-<path class="tw-fill-background-alt4" fill-rule="evenodd" d="M70.528 34.57c-8.743 0-15.83 7.081-15.83 15.816s7.087 15.817 15.83 15.817c8.744 0 15.83-7.082 15.83-15.817S79.272 34.57 70.528 34.57Zm-17.33 15.816c0-9.564 7.76-17.317 17.33-17.317 9.571 0 17.33 7.753 17.33 17.317 0 9.565-7.759 17.317-17.33 17.317-9.57 0-17.33-7.752-17.33-17.317Z" clip-rule="evenodd"/>
+<path class="tw-fill-art-primary" fill-rule="evenodd" d="M70.528 34.57c-8.743 0-15.83 7.081-15.83 15.816s7.087 15.817 15.83 15.817c8.744 0 15.83-7.082 15.83-15.817S79.272 34.57 70.528 34.57Zm-17.33 15.816c0-9.564 7.76-17.317 17.33-17.317 9.571 0 17.33 7.753 17.33 17.317 0 9.565-7.759 17.317-17.33 17.317-9.57 0-17.33-7.752-17.33-17.317Z" clip-rule="evenodd"/>
 </svg>
 `;
diff --git a/libs/vault/src/icons/secure-devices.ts b/libs/vault/src/icons/secure-devices.ts
index ee3a6ea6b90..4e123afad40 100644
--- a/libs/vault/src/icons/secure-devices.ts
+++ b/libs/vault/src/icons/secure-devices.ts
@@ -3,14 +3,14 @@ import { svgIcon } from "@bitwarden/components";
 export const SecureDevices = svgIcon`
 <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" fill="none">
 <path class="tw-stroke-art-accent" stroke-width="1.5" d="M122.568 45.774v-3a5.176 5.176 0 0 0-5.176-5.175H34.094a5.176 5.176 0 0 0-5.176 5.176v10.432m67.636 39.392H33.378"/>
-<path class="tw-stroke-background-alt4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M53.446 111.924h43.108"/>
-<path class="tw-stroke-background-alt4" stroke-linejoin="round" stroke-width="1.5" d="M68.118 98.72v13.204M82.96 98.72v13.204"/>
-<path class="tw-stroke-background-alt4" stroke-width="2.5" d="M127.771 45.775v-3.026c0-5.718-4.635-10.352-10.352-10.352H34.068c-5.718 0-10.352 4.634-10.352 10.352v10.459m72.838 44.595H33.378"/>
+<path class="tw-stroke-art-primary" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M53.446 111.924h43.108"/>
+<path class="tw-stroke-art-primary" stroke-linejoin="round" stroke-width="1.5" d="M68.118 98.72v13.204M82.96 98.72v13.204"/>
+<path class="tw-stroke-art-primary" stroke-width="2.5" d="M127.771 45.775v-3.026c0-5.718-4.635-10.352-10.352-10.352H34.068c-5.718 0-10.352 4.634-10.352 10.352v10.459m72.838 44.595H33.378"/>
 <path class="tw-fill-art-accent" fill-rule="evenodd" d="M71.835 59.965C72.068 57.392 73.906 55.5 76 55.5s3.932 1.892 4.165 4.465h-8.33Zm-1.005.034c.224-3.015 2.388-5.499 5.17-5.499 2.781 0 4.946 2.484 5.17 5.5 1.6.232 2.83 1.61 2.83 3.275v6.62a3.31 3.31 0 0 1-3.31 3.311h-9.38a3.31 3.31 0 0 1-3.31-3.31v-6.62a3.311 3.311 0 0 1 2.83-3.277Zm.48.966h9.38a2.31 2.31 0 0 1 2.31 2.31v6.62a2.31 2.31 0 0 1-2.31 2.311h-9.38a2.31 2.31 0 0 1-2.31-2.31v-6.62a2.31 2.31 0 0 1 2.31-2.311Z" clip-rule="evenodd"/>
 <path class="tw-fill-art-accent" fill-rule="evenodd" d="M75.448 67.482a1.103 1.103 0 0 1-.551-.956v-.215a1.103 1.103 0 1 1 2.206 0v.215c0 .408-.221.765-.551.956v1.594a.552.552 0 1 1-1.104 0v-1.594Z" clip-rule="evenodd"/>
-<rect width="30.203" height="56.96" x="3.411" y="52.971" class="tw-stroke-background-alt4" stroke-width="2.5" rx="7.377"/>
+<rect width="30.203" height="56.96" x="3.411" y="52.971" class="tw-stroke-art-primary" stroke-width="2.5" rx="7.377"/>
 <path class="tw-stroke-art-accent" stroke-linecap="round" stroke-width="1.725" d="M18.164 58.148h.685"/>
-<rect width="51.284" height="71.352" x="96.554" y="45.775" class="tw-stroke-background-alt4" stroke-width="2.5" rx="6.901"/>
+<rect width="51.284" height="71.352" x="96.554" y="45.775" class="tw-stroke-art-primary" stroke-width="2.5" rx="6.901"/>
 <circle cx="122.568" cy="111.924" r="1.486" class="tw-fill-art-accent"/>
 </svg>
 `;
diff --git a/libs/vault/src/icons/secure-user.ts b/libs/vault/src/icons/secure-user.ts
index f8f126adbac..39d9957030c 100644
--- a/libs/vault/src/icons/secure-user.ts
+++ b/libs/vault/src/icons/secure-user.ts
@@ -2,8 +2,8 @@ import { svgIcon } from "@bitwarden/components";
 
 export const SecureUser = svgIcon`
 <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" fill="none">
-<path class="tw-fill-background-alt4" fill-rule="evenodd" d="M96.538 35.676c-.85 0-1.538-.688-1.538-1.538v-.6a1.538 1.538 0 1 1 3.076 0v.6c0 .85-.688 1.538-1.538 1.538ZM103.737 35.676a1.538 1.538 0 0 1-1.538-1.538v-.6a1.538 1.538 0 0 1 3.076 0v.6c0 .85-.688 1.538-1.538 1.538ZM110.935 35.676a1.538 1.538 0 0 1-1.538-1.538v-.6a1.538 1.538 0 0 1 3.076 0v.6c0 .85-.689 1.538-1.538 1.538Z" clip-rule="evenodd"/>
-<path class="tw-fill-background-alt4" fill-rule="evenodd" d="M12.708 26.798C7.346 26.798 3 31.145 3 36.508v58.446c0 5.362 4.347 9.71 9.71 9.71h9.567v-2.5h-9.568a7.21 7.21 0 0 1-7.209-7.21V39.451h112.272v5.666a21.936 21.936 0 0 0-8.466-1.688c-12.15 0-22 9.85-22 22 0 9.269 5.732 17.199 13.845 20.439-9.966 2.189-18.447 8.17-23.747 16.296H64.038v2.5H75.91a35.893 35.893 0 0 0-3.913 11.415c-.408 2.511.898 5.791 4.056 5.791h65.572c4.042 0 6.167-2.082 5.564-5.791-2.447-15.065-14.291-27.103-29.529-30.292 8.007-3.29 13.645-11.166 13.645-20.358 0-8.158-4.44-15.278-11.034-19.077v-9.845c0-5.362-4.347-9.71-9.71-9.71H12.708ZM117.771 37.95v-1.444a7.21 7.21 0 0 0-7.21-7.21H12.708a7.21 7.21 0 0 0-7.209 7.21v1.444h112.272Zm-38.837 66.713h-.144a33.454 33.454 0 0 0-4.326 11.816c-.118.732.03 1.578.376 2.164.292.494.65.726 1.213.726h65.572c1.649 0 2.42-.429 2.735-.751.252-.258.576-.819.361-2.139-2.662-16.39-17.328-29.024-35.128-29.024-13.09 0-24.486 6.833-30.659 16.968v.24Zm49.871-39.235c0 10.77-8.73 19.5-19.5 19.5s-19.5-8.73-19.5-19.5 8.73-19.5 19.5-19.5 19.5 8.73 19.5 19.5Z" clip-rule="evenodd"/>
+<path class="tw-fill-art-primary" fill-rule="evenodd" d="M96.538 35.676c-.85 0-1.538-.688-1.538-1.538v-.6a1.538 1.538 0 1 1 3.076 0v.6c0 .85-.688 1.538-1.538 1.538ZM103.737 35.676a1.538 1.538 0 0 1-1.538-1.538v-.6a1.538 1.538 0 0 1 3.076 0v.6c0 .85-.688 1.538-1.538 1.538ZM110.935 35.676a1.538 1.538 0 0 1-1.538-1.538v-.6a1.538 1.538 0 0 1 3.076 0v.6c0 .85-.689 1.538-1.538 1.538Z" clip-rule="evenodd"/>
+<path class="tw-fill-art-primary" fill-rule="evenodd" d="M12.708 26.798C7.346 26.798 3 31.145 3 36.508v58.446c0 5.362 4.347 9.71 9.71 9.71h9.567v-2.5h-9.568a7.21 7.21 0 0 1-7.209-7.21V39.451h112.272v5.666a21.936 21.936 0 0 0-8.466-1.688c-12.15 0-22 9.85-22 22 0 9.269 5.732 17.199 13.845 20.439-9.966 2.189-18.447 8.17-23.747 16.296H64.038v2.5H75.91a35.893 35.893 0 0 0-3.913 11.415c-.408 2.511.898 5.791 4.056 5.791h65.572c4.042 0 6.167-2.082 5.564-5.791-2.447-15.065-14.291-27.103-29.529-30.292 8.007-3.29 13.645-11.166 13.645-20.358 0-8.158-4.44-15.278-11.034-19.077v-9.845c0-5.362-4.347-9.71-9.71-9.71H12.708ZM117.771 37.95v-1.444a7.21 7.21 0 0 0-7.21-7.21H12.708a7.21 7.21 0 0 0-7.209 7.21v1.444h112.272Zm-38.837 66.713h-.144a33.454 33.454 0 0 0-4.326 11.816c-.118.732.03 1.578.376 2.164.292.494.65.726 1.213.726h65.572c1.649 0 2.42-.429 2.735-.751.252-.258.576-.819.361-2.139-2.662-16.39-17.328-29.024-35.128-29.024-13.09 0-24.486 6.833-30.659 16.968v.24Zm49.871-39.235c0 10.77-8.73 19.5-19.5 19.5s-19.5-8.73-19.5-19.5 8.73-19.5 19.5-19.5 19.5 8.73 19.5 19.5Z" clip-rule="evenodd"/>
 <path class="tw-fill-art-accent" fill-rule="evenodd" d="M41.932 101.294a3.075 3.075 0 0 1-1.538-2.665v-.6a3.076 3.076 0 1 1 6.152 0v.6a3.075 3.075 0 0 1-1.538 2.665v4.444a1.538 1.538 0 0 1-3.076 0v-4.444Z" clip-rule="evenodd"/>
 <path class="tw-fill-art-accent" fill-rule="evenodd" d="M31.715 80.342c.649-7.236 5.821-12.592 11.755-12.592 5.934 0 11.106 5.356 11.755 12.592h-23.51Zm-2.514.076C29.834 72.08 35.82 65.25 43.47 65.25c7.65 0 13.636 6.83 14.268 15.168 4.533.586 8.034 4.46 8.034 9.152v18.457a9.229 9.229 0 0 1-9.228 9.229H30.396a9.229 9.229 0 0 1-9.228-9.229V89.57c0-4.692 3.501-8.566 8.034-9.152Zm1.195 2.424h26.148a6.728 6.728 0 0 1 6.728 6.728v18.457a6.729 6.729 0 0 1-6.728 6.729H30.396a6.729 6.729 0 0 1-6.728-6.729V89.57a6.728 6.728 0 0 1 6.728-6.728Z" clip-rule="evenodd"/>
 </svg>
diff --git a/libs/vault/src/icons/security-handshake.ts b/libs/vault/src/icons/security-handshake.ts
index 5a598fd180d..d68f8a948d3 100644
--- a/libs/vault/src/icons/security-handshake.ts
+++ b/libs/vault/src/icons/security-handshake.ts
@@ -2,11 +2,11 @@ import { svgIcon } from "@bitwarden/components";
 
 export const SecurityHandshake = svgIcon`
 <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" fill="none">
-  <path class="tw-fill-background-alt4" fill-rule="evenodd" d="M55.54 113.815c1.794.909 3.324 1.383 4.435 1.727l.015.005c.777.24 1.185.374 1.432.507.368.197.8.234 1.196.101.178-.059.34-.136.424-.176l.015-.007c.074-.035.111-.052.145-.066l.043-.016c.091-.023.18-.054.265-.093 1.521-.703 3.915-1.763 5.936-2.033a1.508 1.508 0 1 0-.4-2.989c-2.483.331-5.207 1.549-6.698 2.235a3.936 3.936 0 0 0-.205.071 19.521 19.521 0 0 0-1.259-.415m-5.344 1.149-7.071 12.092 10.526 5.46a1.508 1.508 0 1 1-1.392 2.677l-11.297-5.861a1.438 1.438 0 0 1-.086-.048c-1.192-.72-1.31-2.134-.741-3.096l7.824-13.379.006-.011a2.254 2.254 0 0 1 2.988-.846c1.819 1.003 3.36 1.483 4.587 1.863m30.235 16.5a1.511 1.511 0 0 1 2.097.401c.607.894.98 1.89.98 2.92 0 1.046-.387 2.014-1.104 2.799-.651.739-1.616 1.204-2.55 1.384-.396 1.524-1.314 2.468-2.166 2.927-.453.29-.949.482-1.457.579a4.34 4.34 0 0 1-.753 1.255c-.778 1.183-2.122 1.69-3.26 1.717-.528.684-1.278 1.183-2.103 1.523a1.378 1.378 0 0 1-.207.068c-.479.121-.86.121-1.15.12h-.031c-1.046 0-2.113-.377-2.97-.771a17.903 17.903 0 0 1-2.326-1.316 1.507 1.507 0 0 1-.425-2.09 1.512 1.512 0 0 1 2.092-.425c.54.357 1.225.771 1.921 1.091.729.335 1.319.495 1.708.495.158 0 .232 0 .297-.005a.5.5 0 0 0 .057-.006c.642-.289.817-.592.864-.75a1.509 1.509 0 0 1 2.019-.963.34.34 0 0 0 .035.013l.006.001h.118c.425 0 .74-.204.844-.378.052-.087.112-.169.18-.244.233-.255.341-.534.351-.854a1.508 1.508 0 0 1 1.765-1.439.995.995 0 0 0 .183.016c.228 0 .45-.066.634-.19.052-.035.106-.067.162-.095.135-.068.748-.467.788-1.786a1.506 1.506 0 0 1 1.77-1.439c.056.009.122.015.19.015.46 0 .97-.241 1.148-.447l.03-.033c.233-.253.32-.506.32-.772 0-.291-.106-.707-.459-1.226a1.507 1.507 0 0 1 .402-2.095Z" clip-rule="evenodd"/>
-  <path class="tw-fill-background-alt4" fill-rule="evenodd" d="M72 112.173c-1.273.841-2.725 2.355-4.115 5.058l-.01.017-.008.017c-.151.275-.17.673.06 1.112.223.352.93.775 2.136.148l.002-.001c1.492-.774 2.61-1.589 3.249-2.055l.27-.196.394-.28h.483c1.04 0 1.622-.069 1.973-.127l1.176-.195.463 1.096c.27.638.738 1.674 1.75 2.722 1.003 1.039 2.605 2.153 5.227 2.823l.379.097 6.936 6.552 9.308-5.228-6.9-11.821-8.164 3.699-9.407-4.142-.055-.019a5.217 5.217 0 0 1-.143-.052 4.902 4.902 0 0 0-1.654-.284c-.92 0-2.086.225-3.35 1.059Zm-1.665-2.515c1.808-1.195 3.566-1.56 5.014-1.56a7.942 7.942 0 0 1 2.62.442h.067l8.555 3.767 7.51-3.403c.622-.295 1.275-.21 1.71-.065a2.269 2.269 0 0 1 1.288 1.069l7.663 13.128.041.102c.447 1.114-.052 2.174-.793 2.728l-.079.059-10.628 5.969-.034.017a2.14 2.14 0 0 1-.611.203c-.186.031-.36.03-.42.03h-.013a2.308 2.308 0 0 1-1.566-.644l-6.743-6.369c-2.938-.818-4.923-2.157-6.267-3.548a11.163 11.163 0 0 1-1.879-2.613c-.241.016-.51.028-.81.034a27.07 27.07 0 0 1-3.503 2.196c-2.178 1.133-4.872.843-6.142-1.31l-.013-.021-.012-.021c-.64-1.17-.807-2.672-.084-4.011 1.569-3.044 3.333-4.993 5.129-6.179ZM57.94 130.702c.891-1.069 2.069-1.933 3.664-1.8l.008.001.01.001c.935.089 1.694.495 2.265.942.338-.144.68-.255 1.02-.329.627-.138 1.35-.175 2.03.051l.01.004.01.004c.977.341 1.645 1.027 2.088 1.686.1.002.202.008.305.017 1.872.175 2.963 1.224 3.556 2.131.99.251 1.717.81 2.216 1.488.572.777.794 1.647.905 2.123.353 1.346.505 3.585.005 5.75l-.012.052-.016.052c-.523 1.697-2.08 2.624-3.747 2.624-1.286 0-2.644-.473-3.66-1.359-1.753-.177-3.254-.773-4.257-1.985a5.169 5.169 0 0 1-3.062-1.144l-.03-.025-.03-.026a4.962 4.962 0 0 1-1.3-1.834 7.301 7.301 0 0 1-1.28-.677c-.767-.513-1.61-1.319-2.011-2.519-.59-1.766-.012-3.553 1.287-5.197l.013-.016.013-.015Zm2.332 1.915c-.918 1.168-.934 1.9-.78 2.359.118.355.396.679.827.968.43.287.91.469 1.226.561l.843.246.203.853c.13.545.38.869.605 1.076.441.341.906.462 1.33.462.1 0 .185-.012.26-.028l1.153-.253.524 1.056c.026.051.053.101.083.151.305.466.902.901 2.221 1.056l.848-.401.748.917c.401.493 1.156.843 1.894.843.531 0 .763-.234.848-.457.37-1.661.23-3.382-.003-4.254l-.007-.025-.005-.025c-.098-.423-.212-.781-.402-1.039-.135-.183-.335-.366-.838-.395l-.93-.054-.37-.855c-.189-.439-.584-1.013-1.482-1.097a.998.998 0 0 0-.402.042l-1.315.417-.533-1.272a2.837 2.837 0 0 0-.41-.7c-.156-.188-.302-.291-.43-.34-.02-.003-.153-.026-.421.033a3.292 3.292 0 0 0-.967.405l-.097.065-1.137.789-.885-1.063a2.803 2.803 0 0 0-.562-.523 1.255 1.255 0 0 0-.565-.228c-.189-.014-.494.023-1.072.71Z" clip-rule="evenodd"/>
-  <path class="tw-fill-background-alt4" fill-rule="evenodd" d="M65.358 131.532a.754.754 0 0 1-.246 1.038l-.103.062c-.269.163-.767.464-1.28.884-.602.495-1.119 1.074-1.317 1.666-.137.411-.148.939-.064 1.485.083.542.25 1.032.4 1.333a.754.754 0 0 1-1.35.674 6.278 6.278 0 0 1-.543-1.777c-.104-.679-.116-1.471.125-2.191.334-1.002 1.12-1.804 1.79-2.355.605-.496 1.201-.855 1.463-1.012l.087-.053a.756.756 0 0 1 1.038.246ZM68.873 132.736c.19.37.044.825-.326 1.015-.456.234-1.697 1.226-2.23 3.049-.556 1.904-.188 3.039-.072 3.236a.754.754 0 1 1-1.305.76c-.38-.653-.708-2.24-.072-4.418.66-2.26 2.202-3.564 2.988-3.968a.754.754 0 0 1 1.017.326ZM72.056 135.181c.191.37.045.825-.326 1.015-.141.073-.415.314-.724.782a6.358 6.358 0 0 0-.77 1.693c-.187.637-.246 1.364-.225 1.989.01.31.04.58.077.788.034.182.065.271.074.295.002.007.002.008 0 .005a.755.755 0 0 1-1.304.76c-.132-.226-.208-.527-.255-.792a7.079 7.079 0 0 1-.1-1.006c-.025-.737.04-1.631.283-2.461a7.84 7.84 0 0 1 .96-2.102c.365-.553.814-1.046 1.294-1.292a.756.756 0 0 1 1.016.326ZM77.04 136.44l.01.008.027.025.11.101a54.371 54.371 0 0 0 1.782 1.551c1.106.921 2.391 1.905 3.282 2.35a.754.754 0 1 1-.675 1.349c-1.068-.534-2.477-1.628-3.574-2.541a57.15 57.15 0 0 1-1.833-1.595l-.114-.105-.03-.028-.012-.01.514-.553-.514.553a.754.754 0 1 1 1.027-1.105ZM78.495 132.514l.012.011.038.034.15.13a74.33 74.33 0 0 0 2.44 2.015c1.507 1.19 3.281 2.483 4.53 3.075a.753.753 0 1 1-.648 1.362c-1.422-.674-3.32-2.071-4.819-3.254-.76-.6-1.433-1.159-1.918-1.569-.242-.204-.438-.372-.572-.488l-.156-.135-.04-.036-.015-.013.499-.566-.5.566a.756.756 0 0 1 .998-1.132ZM81.422 128.595l.014.012.044.037.17.142c.15.124.366.303.635.522.54.439 1.29 1.038 2.133 1.679 1.707 1.297 3.727 2.715 5.154 3.366a.753.753 0 1 1-.627 1.372c-1.6-.73-3.742-2.247-5.441-3.538a87.058 87.058 0 0 1-2.82-2.242l-.176-.147-.046-.039-.016-.014.488-.575-.488.575a.754.754 0 1 1 .976-1.15ZM134.303 48.211a61.447 61.447 0 0 1-.856 38.597 61.76 61.76 0 0 1-23.725 30.537 1.511 1.511 0 0 1-2.096-.409 1.507 1.507 0 0 1 .408-2.093 58.736 58.736 0 0 0 22.567-29.045 58.431 58.431 0 0 0 .814-36.704 58.696 58.696 0 0 0-21.256-30.008 59.167 59.167 0 0 0-35.015-11.57 59.17 59.17 0 0 0-35.071 11.4A58.707 58.707 0 0 0 18.669 48.82a58.433 58.433 0 0 0 .634 36.708 58.733 58.733 0 0 0 22.424 29.154c.69.469.868 1.407.399 2.095a1.51 1.51 0 0 1-2.098.398 61.752 61.752 0 0 1-23.575-30.652 61.446 61.446 0 0 1-.667-38.6 61.723 61.723 0 0 1 22.502-31.44A62.192 62.192 0 0 1 75.153 4.5a62.188 62.188 0 0 1 36.803 12.161 61.714 61.714 0 0 1 22.348 31.55Z" clip-rule="evenodd"/>
+  <path class="tw-fill-art-primary" fill-rule="evenodd" d="M55.54 113.815c1.794.909 3.324 1.383 4.435 1.727l.015.005c.777.24 1.185.374 1.432.507.368.197.8.234 1.196.101.178-.059.34-.136.424-.176l.015-.007c.074-.035.111-.052.145-.066l.043-.016c.091-.023.18-.054.265-.093 1.521-.703 3.915-1.763 5.936-2.033a1.508 1.508 0 1 0-.4-2.989c-2.483.331-5.207 1.549-6.698 2.235a3.936 3.936 0 0 0-.205.071 19.521 19.521 0 0 0-1.259-.415m-5.344 1.149-7.071 12.092 10.526 5.46a1.508 1.508 0 1 1-1.392 2.677l-11.297-5.861a1.438 1.438 0 0 1-.086-.048c-1.192-.72-1.31-2.134-.741-3.096l7.824-13.379.006-.011a2.254 2.254 0 0 1 2.988-.846c1.819 1.003 3.36 1.483 4.587 1.863m30.235 16.5a1.511 1.511 0 0 1 2.097.401c.607.894.98 1.89.98 2.92 0 1.046-.387 2.014-1.104 2.799-.651.739-1.616 1.204-2.55 1.384-.396 1.524-1.314 2.468-2.166 2.927-.453.29-.949.482-1.457.579a4.34 4.34 0 0 1-.753 1.255c-.778 1.183-2.122 1.69-3.26 1.717-.528.684-1.278 1.183-2.103 1.523a1.378 1.378 0 0 1-.207.068c-.479.121-.86.121-1.15.12h-.031c-1.046 0-2.113-.377-2.97-.771a17.903 17.903 0 0 1-2.326-1.316 1.507 1.507 0 0 1-.425-2.09 1.512 1.512 0 0 1 2.092-.425c.54.357 1.225.771 1.921 1.091.729.335 1.319.495 1.708.495.158 0 .232 0 .297-.005a.5.5 0 0 0 .057-.006c.642-.289.817-.592.864-.75a1.509 1.509 0 0 1 2.019-.963.34.34 0 0 0 .035.013l.006.001h.118c.425 0 .74-.204.844-.378.052-.087.112-.169.18-.244.233-.255.341-.534.351-.854a1.508 1.508 0 0 1 1.765-1.439.995.995 0 0 0 .183.016c.228 0 .45-.066.634-.19.052-.035.106-.067.162-.095.135-.068.748-.467.788-1.786a1.506 1.506 0 0 1 1.77-1.439c.056.009.122.015.19.015.46 0 .97-.241 1.148-.447l.03-.033c.233-.253.32-.506.32-.772 0-.291-.106-.707-.459-1.226a1.507 1.507 0 0 1 .402-2.095Z" clip-rule="evenodd"/>
+  <path class="tw-fill-art-primary" fill-rule="evenodd" d="M72 112.173c-1.273.841-2.725 2.355-4.115 5.058l-.01.017-.008.017c-.151.275-.17.673.06 1.112.223.352.93.775 2.136.148l.002-.001c1.492-.774 2.61-1.589 3.249-2.055l.27-.196.394-.28h.483c1.04 0 1.622-.069 1.973-.127l1.176-.195.463 1.096c.27.638.738 1.674 1.75 2.722 1.003 1.039 2.605 2.153 5.227 2.823l.379.097 6.936 6.552 9.308-5.228-6.9-11.821-8.164 3.699-9.407-4.142-.055-.019a5.217 5.217 0 0 1-.143-.052 4.902 4.902 0 0 0-1.654-.284c-.92 0-2.086.225-3.35 1.059Zm-1.665-2.515c1.808-1.195 3.566-1.56 5.014-1.56a7.942 7.942 0 0 1 2.62.442h.067l8.555 3.767 7.51-3.403c.622-.295 1.275-.21 1.71-.065a2.269 2.269 0 0 1 1.288 1.069l7.663 13.128.041.102c.447 1.114-.052 2.174-.793 2.728l-.079.059-10.628 5.969-.034.017a2.14 2.14 0 0 1-.611.203c-.186.031-.36.03-.42.03h-.013a2.308 2.308 0 0 1-1.566-.644l-6.743-6.369c-2.938-.818-4.923-2.157-6.267-3.548a11.163 11.163 0 0 1-1.879-2.613c-.241.016-.51.028-.81.034a27.07 27.07 0 0 1-3.503 2.196c-2.178 1.133-4.872.843-6.142-1.31l-.013-.021-.012-.021c-.64-1.17-.807-2.672-.084-4.011 1.569-3.044 3.333-4.993 5.129-6.179ZM57.94 130.702c.891-1.069 2.069-1.933 3.664-1.8l.008.001.01.001c.935.089 1.694.495 2.265.942.338-.144.68-.255 1.02-.329.627-.138 1.35-.175 2.03.051l.01.004.01.004c.977.341 1.645 1.027 2.088 1.686.1.002.202.008.305.017 1.872.175 2.963 1.224 3.556 2.131.99.251 1.717.81 2.216 1.488.572.777.794 1.647.905 2.123.353 1.346.505 3.585.005 5.75l-.012.052-.016.052c-.523 1.697-2.08 2.624-3.747 2.624-1.286 0-2.644-.473-3.66-1.359-1.753-.177-3.254-.773-4.257-1.985a5.169 5.169 0 0 1-3.062-1.144l-.03-.025-.03-.026a4.962 4.962 0 0 1-1.3-1.834 7.301 7.301 0 0 1-1.28-.677c-.767-.513-1.61-1.319-2.011-2.519-.59-1.766-.012-3.553 1.287-5.197l.013-.016.013-.015Zm2.332 1.915c-.918 1.168-.934 1.9-.78 2.359.118.355.396.679.827.968.43.287.91.469 1.226.561l.843.246.203.853c.13.545.38.869.605 1.076.441.341.906.462 1.33.462.1 0 .185-.012.26-.028l1.153-.253.524 1.056c.026.051.053.101.083.151.305.466.902.901 2.221 1.056l.848-.401.748.917c.401.493 1.156.843 1.894.843.531 0 .763-.234.848-.457.37-1.661.23-3.382-.003-4.254l-.007-.025-.005-.025c-.098-.423-.212-.781-.402-1.039-.135-.183-.335-.366-.838-.395l-.93-.054-.37-.855c-.189-.439-.584-1.013-1.482-1.097a.998.998 0 0 0-.402.042l-1.315.417-.533-1.272a2.837 2.837 0 0 0-.41-.7c-.156-.188-.302-.291-.43-.34-.02-.003-.153-.026-.421.033a3.292 3.292 0 0 0-.967.405l-.097.065-1.137.789-.885-1.063a2.803 2.803 0 0 0-.562-.523 1.255 1.255 0 0 0-.565-.228c-.189-.014-.494.023-1.072.71Z" clip-rule="evenodd"/>
+  <path class="tw-fill-art-primary" fill-rule="evenodd" d="M65.358 131.532a.754.754 0 0 1-.246 1.038l-.103.062c-.269.163-.767.464-1.28.884-.602.495-1.119 1.074-1.317 1.666-.137.411-.148.939-.064 1.485.083.542.25 1.032.4 1.333a.754.754 0 0 1-1.35.674 6.278 6.278 0 0 1-.543-1.777c-.104-.679-.116-1.471.125-2.191.334-1.002 1.12-1.804 1.79-2.355.605-.496 1.201-.855 1.463-1.012l.087-.053a.756.756 0 0 1 1.038.246ZM68.873 132.736c.19.37.044.825-.326 1.015-.456.234-1.697 1.226-2.23 3.049-.556 1.904-.188 3.039-.072 3.236a.754.754 0 1 1-1.305.76c-.38-.653-.708-2.24-.072-4.418.66-2.26 2.202-3.564 2.988-3.968a.754.754 0 0 1 1.017.326ZM72.056 135.181c.191.37.045.825-.326 1.015-.141.073-.415.314-.724.782a6.358 6.358 0 0 0-.77 1.693c-.187.637-.246 1.364-.225 1.989.01.31.04.58.077.788.034.182.065.271.074.295.002.007.002.008 0 .005a.755.755 0 0 1-1.304.76c-.132-.226-.208-.527-.255-.792a7.079 7.079 0 0 1-.1-1.006c-.025-.737.04-1.631.283-2.461a7.84 7.84 0 0 1 .96-2.102c.365-.553.814-1.046 1.294-1.292a.756.756 0 0 1 1.016.326ZM77.04 136.44l.01.008.027.025.11.101a54.371 54.371 0 0 0 1.782 1.551c1.106.921 2.391 1.905 3.282 2.35a.754.754 0 1 1-.675 1.349c-1.068-.534-2.477-1.628-3.574-2.541a57.15 57.15 0 0 1-1.833-1.595l-.114-.105-.03-.028-.012-.01.514-.553-.514.553a.754.754 0 1 1 1.027-1.105ZM78.495 132.514l.012.011.038.034.15.13a74.33 74.33 0 0 0 2.44 2.015c1.507 1.19 3.281 2.483 4.53 3.075a.753.753 0 1 1-.648 1.362c-1.422-.674-3.32-2.071-4.819-3.254-.76-.6-1.433-1.159-1.918-1.569-.242-.204-.438-.372-.572-.488l-.156-.135-.04-.036-.015-.013.499-.566-.5.566a.756.756 0 0 1 .998-1.132ZM81.422 128.595l.014.012.044.037.17.142c.15.124.366.303.635.522.54.439 1.29 1.038 2.133 1.679 1.707 1.297 3.727 2.715 5.154 3.366a.753.753 0 1 1-.627 1.372c-1.6-.73-3.742-2.247-5.441-3.538a87.058 87.058 0 0 1-2.82-2.242l-.176-.147-.046-.039-.016-.014.488-.575-.488.575a.754.754 0 1 1 .976-1.15ZM134.303 48.211a61.447 61.447 0 0 1-.856 38.597 61.76 61.76 0 0 1-23.725 30.537 1.511 1.511 0 0 1-2.096-.409 1.507 1.507 0 0 1 .408-2.093 58.736 58.736 0 0 0 22.567-29.045 58.431 58.431 0 0 0 .814-36.704 58.696 58.696 0 0 0-21.256-30.008 59.167 59.167 0 0 0-35.015-11.57 59.17 59.17 0 0 0-35.071 11.4A58.707 58.707 0 0 0 18.669 48.82a58.433 58.433 0 0 0 .634 36.708 58.733 58.733 0 0 0 22.424 29.154c.69.469.868 1.407.399 2.095a1.51 1.51 0 0 1-2.098.398 61.752 61.752 0 0 1-23.575-30.652 61.446 61.446 0 0 1-.667-38.6 61.723 61.723 0 0 1 22.502-31.44A62.192 62.192 0 0 1 75.153 4.5a62.188 62.188 0 0 1 36.803 12.161 61.714 61.714 0 0 1 22.348 31.55Z" clip-rule="evenodd"/>
   <path class="tw-fill-art-accent" fill-rule="evenodd" d="M128.53 49.913a55.343 55.343 0 0 1-.771 34.77 55.64 55.64 0 0 1-21.378 27.512.755.755 0 0 1-.844-1.25 54.131 54.131 0 0 0 20.799-26.766 53.85 53.85 0 0 0 .751-33.825 54.094 54.094 0 0 0-19.592-27.653 54.534 54.534 0 0 0-32.27-10.66 54.537 54.537 0 0 0-32.322 10.503 54.1 54.1 0 0 0-19.727 27.558 53.841 53.841 0 0 0 .585 33.828 54.125 54.125 0 0 0 20.667 26.866.754.754 0 1 1-.85 1.247 55.637 55.637 0 0 1-21.243-27.616 55.347 55.347 0 0 1-.6-34.774A55.608 55.608 0 0 1 42.01 21.328a56.05 56.05 0 0 1 33.218-10.796 56.044 56.044 0 0 1 33.164 10.957 55.597 55.597 0 0 1 20.137 28.424Z" clip-rule="evenodd"/>
-  <path class="tw-fill-background-alt4" fill-rule="evenodd" d="M61.17 48.3c.727-8.197 6.577-14.301 13.33-14.301 6.754 0 12.604 6.104 13.33 14.3a12.392 12.392 0 0 0-.35-.004H61.52c-.117 0-.234.002-.35.005Zm-2.53.343c.6-9.417 7.306-17.144 15.86-17.144 8.555 0 15.26 7.727 15.862 17.144 5.247 1.291 9.138 6.028 9.138 11.673v17.412c0 6.64-5.382 12.022-12.02 12.022H61.52c-6.639 0-12.02-5.383-12.02-12.022V60.316c0-5.646 3.891-10.382 9.138-11.673Zm2.881 2.152H87.48A9.521 9.521 0 0 1 97 60.316v17.412a9.521 9.521 0 0 1-9.52 9.522H61.52a9.521 9.521 0 0 1-9.52-9.522V60.316a9.521 9.521 0 0 1 9.52-9.521Z" clip-rule="evenodd"/>
+  <path class="tw-fill-art-primary" fill-rule="evenodd" d="M61.17 48.3c.727-8.197 6.577-14.301 13.33-14.301 6.754 0 12.604 6.104 13.33 14.3a12.392 12.392 0 0 0-.35-.004H61.52c-.117 0-.234.002-.35.005Zm-2.53.343c.6-9.417 7.306-17.144 15.86-17.144 8.555 0 15.26 7.727 15.862 17.144 5.247 1.291 9.138 6.028 9.138 11.673v17.412c0 6.64-5.382 12.022-12.02 12.022H61.52c-6.639 0-12.02-5.383-12.02-12.022V60.316c0-5.646 3.891-10.382 9.138-11.673Zm2.881 2.152H87.48A9.521 9.521 0 0 1 97 60.316v17.412a9.521 9.521 0 0 1-9.52 9.522H61.52a9.521 9.521 0 0 1-9.52-9.522V60.316a9.521 9.521 0 0 1 9.52-9.521Z" clip-rule="evenodd"/>
   <path class="tw-fill-art-accent" fill-rule="evenodd" d="M72.741 71.859a3.499 3.499 0 0 1-1.74-3.027v-.674a3.5 3.5 0 1 1 7 0v.674c0 1.292-.7 2.42-1.742 3.027v4.956a1.76 1.76 0 1 1-3.518 0V71.86Z" clip-rule="evenodd"/>
 </svg>
 `;

From 88638c09b39ce499f4ce60e290b05ab4b29c7690 Mon Sep 17 00:00:00 2001
From: Todd Martin <106564991+trmartin4@users.noreply.github.com>
Date: Wed, 16 Apr 2025 19:58:31 -0400
Subject: [PATCH 21/36] Fix(login): [PM-20287] Initialize login email state
 when email is remembered

---
 libs/auth/src/angular/login/login.component.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/libs/auth/src/angular/login/login.component.ts b/libs/auth/src/angular/login/login.component.ts
index 8a198663e06..4ca18b4985e 100644
--- a/libs/auth/src/angular/login/login.component.ts
+++ b/libs/auth/src/angular/login/login.component.ts
@@ -536,6 +536,10 @@ export class LoginComponent implements OnInit, OnDestroy {
     if (storedEmail) {
       this.formGroup.controls.email.setValue(storedEmail);
       this.formGroup.controls.rememberEmail.setValue(true);
+      // If we load an email into the form, we need to initialize it for the login process as well
+      // so that other login components can use it.
+      // We do this here as it's possible that a user doesn't edit the email field before submitting.
+      this.loginEmailService.setLoginEmail(storedEmail);
     } else {
       this.formGroup.controls.rememberEmail.setValue(false);
     }

From c7259b4cb12dcc3a99a2700ce35785a4e17eaaa9 Mon Sep 17 00:00:00 2001
From: aj-bw <81774843+aj-bw@users.noreply.github.com>
Date: Thu, 17 Apr 2025 08:21:24 -0400
Subject: [PATCH 22/36] BRE-536/Add-ARM-targz-builds-for-desktop-and-cli
 (#14270)

* Test ARM64 build

* Remove sudo

* Change to public preview runner

* Change cache key for architectures

* Test

* Test

* Test

* remove x86 musl target - troubleshooting build error

* native module troubleshooting

* remove cross-platform for testing

* attempt to resolve cross-platform issue

* support more arm64 build types

* fix missed amd to arm update

* missing dependency during env setup

* lxd troubleshooting

* install lxd with snap instead

* electron-builder debug

* simplified script for testing

* testing

* 22.04 to 20.04

* try ubuntu 24.04 runner

* add dist script

* update build command

* troubleshoot 24.04 compatibility

* remove lxd before merging main

* add comment, bump arm runner down to 22.04

* revert to tar.gz support only for this PR

* testing cli arm builds

* fix build target designation

* adjust runner designation

* runner name typo

* not needed currently

* adjust build.js logic and call in workflow

* address styling feedback and unnecessary rust toolchain call

* simplify build cli os matrix

* revert x86 linux builds to cross-platform command for build.js

---------

Co-authored-by: Vince Grassia <593223+vgrassia@users.noreply.github.com>
---
 .github/workflows/build-cli.yml      |   5 +-
 .github/workflows/build-desktop.yml  | 109 +++++++++++++++++++++++++--
 apps/cli/package.json                |   4 +
 apps/desktop/desktop_native/build.js |  22 ++++--
 apps/desktop/package.json            |   2 +
 5 files changed, 129 insertions(+), 13 deletions(-)

diff --git a/.github/workflows/build-cli.yml b/.github/workflows/build-cli.yml
index a78d3bda5ad..e113d5c253b 100644
--- a/.github/workflows/build-cli.yml
+++ b/.github/workflows/build-cli.yml
@@ -87,6 +87,7 @@ jobs:
         os:
          [
           { base: "linux", distro: "ubuntu-22.04", target_suffix: "" },
+          { base: "linux", distro: "ubuntu-22.04-arm", target_suffix: "-arm64" },
           { base: "mac", distro: "macos-13", target_suffix: "" },
           { base: "mac", distro: "macos-14", target_suffix: "-arm64" }
          ]
@@ -130,7 +131,7 @@ jobs:
         if: ${{ inputs.sdk_branch != '' && needs.setup.outputs.has_secrets == 'true' }}
         uses: bitwarden/gh-actions/download-artifacts@main
         with:
-          github_token: ${{secrets.GITHUB_TOKEN}}
+          github_token: ${{ secrets.GITHUB_TOKEN }}
           workflow: build-wasm-internal.yml
           workflow_conclusion: success
           branch: ${{ inputs.sdk_branch }}
@@ -306,7 +307,7 @@ jobs:
         if: ${{ inputs.sdk_branch != '' && needs.setup.outputs.has_secrets == 'true' }}
         uses: bitwarden/gh-actions/download-artifacts@main
         with:
-          github_token: ${{secrets.GITHUB_TOKEN}}
+          github_token: ${{ secrets.GITHUB_TOKEN }}
           workflow: build-wasm-internal.yml
           workflow_conclusion: success
           branch: ${{ inputs.sdk_branch }}
diff --git a/.github/workflows/build-desktop.yml b/.github/workflows/build-desktop.yml
index 4c35eb4c42f..99a7548aa14 100644
--- a/.github/workflows/build-desktop.yml
+++ b/.github/workflows/build-desktop.yml
@@ -201,7 +201,7 @@ jobs:
         if: ${{ inputs.sdk_branch != '' }}
         uses: bitwarden/gh-actions/download-artifacts@main
         with:
-          github_token: ${{secrets.GITHUB_TOKEN}}
+          github_token: ${{ secrets.GITHUB_TOKEN }}
           workflow: build-wasm-internal.yml
           workflow_conclusion: success
           branch: ${{ inputs.sdk_branch }}
@@ -298,6 +298,103 @@ jobs:
           if-no-files-found: error
 
 
+  linux-arm64:
+    name: Linux ARM64 Build
+    # Note, before updating the ubuntu version of the workflow, ensure the snap base image
+    # is equal or greater than the new version. Otherwise there might be GLIBC version issues.
+    # The snap base for desktop is defined in `apps/desktop/electron-builder.json`
+    # We intentionally keep this runner on the oldest supported OS in GitHub Actions
+    # for maximum compatibility across GLIBC versions
+    runs-on: ubuntu-22.04-arm
+    needs: setup
+    env:
+      _PACKAGE_VERSION: ${{ needs.setup.outputs.package_version }}
+      _NODE_VERSION: ${{ needs.setup.outputs.node_version }}
+      NODE_OPTIONS: --max_old_space_size=4096
+    defaults:
+      run:
+        working-directory: apps/desktop
+    steps:
+      - name: Check out repo
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        with:
+          ref: ${{  github.event.pull_request.head.sha }}
+
+      - name: Set up Node
+        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.1.0
+        with:
+          cache: 'npm'
+          cache-dependency-path: '**/package-lock.json'
+          node-version: ${{ env._NODE_VERSION }}
+
+      - name: Set up environment
+        run: |
+          sudo apt-get update
+          sudo apt-get -y install pkg-config libxss-dev rpm musl-dev musl-tools flatpak flatpak-builder
+
+      - name: Print environment
+        run: |
+          node --version
+          npm --version
+          snap --version
+          snapcraft --version || echo 'snapcraft unavailable'
+
+      - name: Install Node dependencies
+        run: npm ci
+        working-directory: ./
+
+      - name: Download SDK Artifacts
+        if: ${{ inputs.sdk_branch != '' }}
+        uses: bitwarden/gh-actions/download-artifacts@main
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          workflow: build-wasm-internal.yml
+          workflow_conclusion: success
+          branch: ${{ inputs.sdk_branch }}
+          artifacts: sdk-internal
+          repo: bitwarden/sdk-internal
+          path: ../sdk-internal
+          if_no_artifact_found: fail
+
+      - name: Override SDK
+        if: ${{ inputs.sdk_branch != '' }}
+        working-directory: ./
+        run: |
+          ls -l ../
+          npm link ../sdk-internal
+
+      - name: Cache Native Module
+        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+        id: cache
+        with:
+          path: |
+            apps/desktop/desktop_native/napi/*.node
+            apps/desktop/desktop_native/dist/*
+            ${{ env.RUNNER_TEMP }}/.cargo/registry
+            ${{ env.RUNNER_TEMP }}/.cargo/git
+          key: rust-${{ runner.os }}-${{ runner.arch }}-${{ hashFiles('apps/desktop/desktop_native/**/*') }}
+
+      - name: Build Native Module
+        if: steps.cache.outputs.cache-hit != 'true'
+        working-directory: apps/desktop/desktop_native
+        env:
+          PKG_CONFIG_ALLOW_CROSS: true
+          PKG_CONFIG_ALL_STATIC: true
+          TARGET: musl
+        run: |
+          rustup target add aarch64-unknown-linux-musl
+          node build.js --target=aarch64-unknown-linux-musl --release
+
+      - name: Build application
+        run: npm run dist:lin:arm64
+
+      - name: Upload tar.gz artifact
+        uses: actions/upload-artifact@6f51ac03b9356f520e9adb1b1b7802705f340c2b # v4.5.0
+        with:
+          name: bitwarden_${{ env._PACKAGE_VERSION }}_arm64.tar.gz
+          path: apps/desktop/dist/bitwarden_desktop_arm64.tar.gz
+          if-no-files-found: error
+
   windows:
     name: Windows Build
     runs-on: windows-2022
@@ -369,7 +466,7 @@ jobs:
         if: ${{ inputs.sdk_branch != '' && needs.setup.outputs.has_secrets == 'true' }}
         uses: bitwarden/gh-actions/download-artifacts@main
         with:
-          github_token: ${{secrets.GITHUB_TOKEN}}
+          github_token: ${{ secrets.GITHUB_TOKEN }}
           workflow: build-wasm-internal.yml
           workflow_conclusion: success
           branch: ${{ inputs.sdk_branch }}
@@ -705,7 +802,7 @@ jobs:
         if: ${{ inputs.sdk_branch != '' && needs.setup.outputs.has_secrets == 'true' }}
         uses: bitwarden/gh-actions/download-artifacts@main
         with:
-          github_token: ${{secrets.GITHUB_TOKEN}}
+          github_token: ${{ secrets.GITHUB_TOKEN }}
           workflow: build-wasm-internal.yml
           workflow_conclusion: success
           branch: ${{ inputs.sdk_branch }}
@@ -895,7 +992,7 @@ jobs:
         if: ${{ inputs.sdk_branch != '' }}
         uses: bitwarden/gh-actions/download-artifacts@main
         with:
-          github_token: ${{secrets.GITHUB_TOKEN}}
+          github_token: ${{ secrets.GITHUB_TOKEN }}
           workflow: build-wasm-internal.yml
           workflow_conclusion: success
           branch: ${{ inputs.sdk_branch }}
@@ -1144,7 +1241,7 @@ jobs:
         if: ${{ inputs.sdk_branch != '' }}
         uses: bitwarden/gh-actions/download-artifacts@main
         with:
-          github_token: ${{secrets.GITHUB_TOKEN}}
+          github_token: ${{ secrets.GITHUB_TOKEN }}
           workflow: build-wasm-internal.yml
           workflow_conclusion: success
           branch: ${{ inputs.sdk_branch }}
@@ -1425,7 +1522,7 @@ jobs:
         if: ${{ inputs.sdk_branch != '' }}
         uses: bitwarden/gh-actions/download-artifacts@main
         with:
-          github_token: ${{secrets.GITHUB_TOKEN}}
+          github_token: ${{ secrets.GITHUB_TOKEN }}
           workflow: build-wasm-internal.yml
           workflow_conclusion: success
           branch: ${{ inputs.sdk_branch }}
diff --git a/apps/cli/package.json b/apps/cli/package.json
index 7d9f4af0ffe..15dc470a95e 100644
--- a/apps/cli/package.json
+++ b/apps/cli/package.json
@@ -34,18 +34,22 @@
     "dist:oss:mac": "npm run build:oss:prod && npm run clean && npm run package:oss:mac",
     "dist:oss:mac-arm64": "npm run build:oss:prod && npm run clean && npm run package:oss:mac-arm64",
     "dist:oss:lin": "npm run build:oss:prod && npm run clean && npm run package:oss:lin",
+    "dist:oss:lin-arm64": "npm run build:oss:prod && npm run clean && npm run package:oss:lin-arm64",
     "dist:bit:win": "npm run build:bit:prod && npm run clean && npm run package:bit:win",
     "dist:bit:mac": "npm run build:bit:prod && npm run clean && npm run package:bit:mac",
     "dist:bit:mac-arm64": "npm run build:bit:prod && npm run clean && npm run package:bit:mac-arm64",
     "dist:bit:lin": "npm run build:bit:prod && npm run clean && npm run package:bit:lin",
+    "dist:bit:lin-arm64": "npm run build:bit:prod && npm run clean && npm run package:bit:lin-arm64",
     "package:oss:win": "pkg . --targets win-x64 --output ./dist/oss/windows/bw.exe",
     "package:oss:mac": "pkg . --targets macos-x64 --output ./dist/oss/macos/bw",
     "package:oss:mac-arm64": "pkg . --targets macos-arm64 --output ./dist/oss/macos-arm64/bw",
     "package:oss:lin": "pkg . --targets linux-x64 --output ./dist/oss/linux/bw",
+    "package:oss:lin-arm64": "pkg . --targets linux-arm64 --output ./dist/oss/linux-arm64/bw",
     "package:bit:win": "pkg . --targets win-x64 --output ./dist/bit/windows/bw.exe",
     "package:bit:mac": "pkg . --targets macos-x64 --output ./dist/bit/macos/bw",
     "package:bit:mac-arm64": "pkg . --targets macos-arm64 --output ./dist/bit/macos-arm64/bw",
     "package:bit:lin": "pkg . --targets linux-x64 --output ./dist/bit/linux/bw",
+    "package:bit:lin-arm64": "pkg . --targets linux-arm64 --output ./dist/bit/linux-arm64/bw",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:watch:all": "jest --watchAll"
diff --git a/apps/desktop/desktop_native/build.js b/apps/desktop/desktop_native/build.js
index f2f012bf088..ec20dce4116 100644
--- a/apps/desktop/desktop_native/build.js
+++ b/apps/desktop/desktop_native/build.js
@@ -3,6 +3,10 @@ const child_process = require("child_process");
 const fs = require("fs");
 const path = require("path");
 const process = require("process");
+const args = process.argv.slice(2); // Get arguments passed to the script
+const mode = args.includes("--release") ? "release" : "debug";
+const targetArg = args.find(arg => arg.startsWith("--target="));
+const target = targetArg ? targetArg.split("=")[1] : null;
 
 let crossPlatform = process.argv.length > 2 && process.argv[2] === "cross-platform";
 
@@ -18,10 +22,17 @@ function buildProxyBin(target, release = true) {
     return child_process.execSync(`cargo build --bin desktop_proxy ${releaseArg} ${targetArg}`, {stdio: 'inherit', cwd: path.join(__dirname, "proxy")});
 }
 
-if (!crossPlatform) {
-    console.log("Building native modules in debug mode for the native architecture");
-    buildNapiModule(false, false);
-    buildProxyBin(false, false);
+if (!crossPlatform && !target) {
+    console.log(`Building native modules in ${mode} mode for the native architecture`);
+    buildNapiModule(false, mode === "release");
+    buildProxyBin(false, mode === "release");
+    return;
+}
+
+if (target) {
+    console.log(`Building for target: ${target} in ${mode} mode`);
+    buildNapiModule(target, mode === "release");
+    buildProxyBin(target, mode === "release");
     return;
 }
 
@@ -47,7 +58,8 @@ switch (process.platform) {
 
     default:
         targets = [
-            ['x86_64-unknown-linux-musl', 'x64']
+            ['x86_64-unknown-linux-musl', 'x64'],
+            ['aarch64-unknown-linux-musl', 'arm64']
         ];
 
         process.env["PKG_CONFIG_ALLOW_CROSS"] = "1";
diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index a4365b4c06a..ae34deee5b8 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -36,6 +36,7 @@
     "pack:dir": "npm run clean:dist && electron-builder --dir -p never",
     "pack:lin:flatpak": "npm run clean:dist && electron-builder --dir -p never && flatpak-builder  --repo=build/.repo build/.flatpak  ./resources/com.bitwarden.desktop.devel.yaml --install-deps-from=flathub --force-clean &&  flatpak build-bundle ./build/.repo/ ./dist/com.bitwarden.desktop.flatpak com.bitwarden.desktop",
     "pack:lin": "npm run clean:dist && electron-builder --linux --x64 -p never && export SNAP_FILE=$(realpath ./dist/bitwarden_*.snap) && unsquashfs -d ./dist/tmp-snap/ $SNAP_FILE && mkdir -p ./dist/tmp-snap/meta/polkit/ && cp ./resources/com.bitwarden.desktop.policy  ./dist/tmp-snap/meta/polkit/polkit.com.bitwarden.desktop.policy && rm $SNAP_FILE && snapcraft pack ./dist/tmp-snap/ && mv ./*.snap ./dist/ && rm -rf ./dist/tmp-snap/",
+    "pack:lin:arm64": "npm run clean:dist && electron-builder --dir -p never && tar -czvf ./dist/bitwarden_desktop_arm64.tar.gz -C ./dist/linux-arm64-unpacked/ .",
     "pack:mac": "npm run clean:dist && electron-builder --mac --universal -p never",
     "pack:mac:arm64": "npm run clean:dist && electron-builder --mac --arm64 -p never",
     "pack:mac:mas": "npm run clean:dist && electron-builder --mac mas --universal -p never",
@@ -45,6 +46,7 @@
     "pack:win:ci": "npm run clean:dist && electron-builder --win --x64 --arm64 --ia32 -p never",
     "dist:dir": "npm run build && npm run pack:dir",
     "dist:lin": "npm run build && npm run pack:lin",
+    "dist:lin:arm64": "npm run build && npm run pack:lin:arm64",
     "dist:mac": "npm run build && npm run pack:mac",
     "dist:mac:mas": "npm run build && npm run pack:mac:mas",
     "dist:mac:masdev": "npm run build && npm run pack:mac:masdev",

From c4c9db51213ff0c8744341f926e40a0b7adefb5a Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Thu, 17 Apr 2025 08:49:07 -0400
Subject: [PATCH 23/36] [deps] Vault: Update koa to v2.16.1 [SECURITY] (#14197)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.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 15dc470a95e..04fe4290d31 100644
--- a/apps/cli/package.json
+++ b/apps/cli/package.json
@@ -76,7 +76,7 @@
     "inquirer": "8.2.6",
     "jsdom": "26.0.0",
     "jszip": "3.10.1",
-    "koa": "2.15.4",
+    "koa": "2.16.1",
     "koa-bodyparser": "4.4.1",
     "koa-json": "2.0.2",
     "lowdb": "1.0.0",
diff --git a/package-lock.json b/package-lock.json
index cb9baf4fafe..c101444cd8e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -48,7 +48,7 @@
         "jquery": "3.7.1",
         "jsdom": "26.0.0",
         "jszip": "3.10.1",
-        "koa": "2.15.4",
+        "koa": "2.16.1",
         "koa-bodyparser": "4.4.1",
         "koa-json": "2.0.2",
         "lit": "3.2.1",
@@ -210,7 +210,7 @@
         "inquirer": "8.2.6",
         "jsdom": "26.0.0",
         "jszip": "3.10.1",
-        "koa": "2.15.4",
+        "koa": "2.16.1",
         "koa-bodyparser": "4.4.1",
         "koa-json": "2.0.2",
         "lowdb": "1.0.0",
@@ -24789,9 +24789,9 @@
       }
     },
     "node_modules/koa": {
-      "version": "2.15.4",
-      "resolved": "https://registry.npmjs.org/koa/-/koa-2.15.4.tgz",
-      "integrity": "sha512-7fNBIdrU2PEgLljXoPWoyY4r1e+ToWCmzS/wwMPbUNs7X+5MMET1ObhJBlUkF5uZG9B6QhM2zS1TsH6adegkiQ==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/koa/-/koa-2.16.1.tgz",
+      "integrity": "sha512-umfX9d3iuSxTQP4pnzLOz0HKnPg0FaUUIKcye2lOiz3KPu1Y3M3xlz76dISdFPQs37P9eJz1wUpcTS6KDPn9fA==",
       "license": "MIT",
       "dependencies": {
         "accepts": "^1.3.5",
diff --git a/package.json b/package.json
index 28d243e1c32..a39004dcc03 100644
--- a/package.json
+++ b/package.json
@@ -180,7 +180,7 @@
     "jquery": "3.7.1",
     "jsdom": "26.0.0",
     "jszip": "3.10.1",
-    "koa": "2.15.4",
+    "koa": "2.16.1",
     "koa-bodyparser": "4.4.1",
     "koa-json": "2.0.2",
     "lit": "3.2.1",

From 170f97da8e0f06ecbeb4c021d1e32ad8e4ae6dfe Mon Sep 17 00:00:00 2001
From: Daniel James Smith <2670567+djsmith85@users.noreply.github.com>
Date: Thu, 17 Apr 2025 14:58:16 +0200
Subject: [PATCH 24/36] [PM-20333] Remove "export-attachments" feature flag
 (#14310)

* Remove usage of export-attachments feature flag

* Remove export-attachments feature flag definition

* Update export.command documentation

---------

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>
---
 apps/cli/src/tools/export.command.ts             | 10 ----------
 apps/cli/src/vault.program.ts                    |  5 ++---
 libs/common/src/enums/feature-flag.enum.ts       |  2 --
 .../src/components/export.component.ts           | 16 +++-------------
 4 files changed, 5 insertions(+), 28 deletions(-)

diff --git a/apps/cli/src/tools/export.command.ts b/apps/cli/src/tools/export.command.ts
index f5fea794eef..3fbc466efe0 100644
--- a/apps/cli/src/tools/export.command.ts
+++ b/apps/cli/src/tools/export.command.ts
@@ -10,8 +10,6 @@ import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
 import { EventType } from "@bitwarden/common/enums";
-import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
-import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import {
   ExportFormat,
@@ -30,7 +28,6 @@ export class ExportCommand {
     private policyService: PolicyService,
     private eventCollectionService: EventCollectionService,
     private accountService: AccountService,
-    private configService: ConfigService,
   ) {}
 
   async run(options: OptionValues): Promise<Response> {
@@ -55,13 +52,6 @@ export class ExportCommand {
     const format =
       password && options.format == "json" ? "encrypted_json" : (options.format ?? "csv");
 
-    if (
-      format == "zip" &&
-      !(await this.configService.getFeatureFlag(FeatureFlag.ExportAttachments))
-    ) {
-      return Response.badRequest("Exporting attachments is not supported in this environment.");
-    }
-
     if (!this.isSupportedExportFormat(format)) {
       return Response.badRequest(
         `'${format}' is not a supported export format. Supported formats: ${EXPORT_FORMATS.join(
diff --git a/apps/cli/src/vault.program.ts b/apps/cli/src/vault.program.ts
index c004d3597c1..ce6ac2af94e 100644
--- a/apps/cli/src/vault.program.ts
+++ b/apps/cli/src/vault.program.ts
@@ -464,7 +464,7 @@ export class VaultProgram extends BaseProgram {
 
   private exportCommand(): Command {
     return new Command("export")
-      .description("Export vault data to a CSV or JSON file.")
+      .description("Export vault data to a CSV, JSON or ZIP file.")
       .option("--output <output>", "Output directory or filename.")
       .option("--format <format>", "Export file format.")
       .option(
@@ -476,7 +476,7 @@ export class VaultProgram extends BaseProgram {
         writeLn("\n  Notes:");
         writeLn("");
         writeLn(
-          "    Valid formats are `csv`, `json`, and `encrypted_json`. Default format is `csv`.",
+          "    Valid formats are `csv`, `json`, `encrypted_json` and zip. Default format is `csv`.",
         );
         writeLn("");
         writeLn(
@@ -504,7 +504,6 @@ export class VaultProgram extends BaseProgram {
           this.serviceContainer.policyService,
           this.serviceContainer.eventCollectionService,
           this.serviceContainer.accountService,
-          this.serviceContainer.configService,
         );
         const response = await command.run(options);
         this.processResponse(response);
diff --git a/libs/common/src/enums/feature-flag.enum.ts b/libs/common/src/enums/feature-flag.enum.ts
index f9e2d9757bc..1d0b1521db6 100644
--- a/libs/common/src/enums/feature-flag.enum.ts
+++ b/libs/common/src/enums/feature-flag.enum.ts
@@ -46,7 +46,6 @@ export enum FeatureFlag {
   CriticalApps = "pm-14466-risk-insights-critical-application",
   EnableRiskInsightsNotifications = "enable-risk-insights-notifications",
   DesktopSendUIRefresh = "desktop-send-ui-refresh",
-  ExportAttachments = "export-attachments",
 
   /* Vault */
   PM8851_BrowserOnboardingNudge = "pm-8851-browser-onboarding-nudge",
@@ -97,7 +96,6 @@ export const DefaultFeatureFlagValue = {
   [FeatureFlag.CriticalApps]: FALSE,
   [FeatureFlag.EnableRiskInsightsNotifications]: FALSE,
   [FeatureFlag.DesktopSendUIRefresh]: FALSE,
-  [FeatureFlag.ExportAttachments]: FALSE,
 
   /* Vault */
   [FeatureFlag.PM8851_BrowserOnboardingNudge]: FALSE,
diff --git a/libs/tools/export/vault-export/vault-export-ui/src/components/export.component.ts b/libs/tools/export/vault-export/vault-export-ui/src/components/export.component.ts
index 69f77c6ca32..4e9b4175838 100644
--- a/libs/tools/export/vault-export/vault-export-ui/src/components/export.component.ts
+++ b/libs/tools/export/vault-export/vault-export-ui/src/components/export.component.ts
@@ -39,8 +39,6 @@ import { Organization } from "@bitwarden/common/admin-console/models/domain/orga
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
 import { EventType } from "@bitwarden/common/enums";
-import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
-import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { FileDownloadService } from "@bitwarden/common/platform/abstractions/file-download/file-download.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
@@ -184,10 +182,6 @@ export class ExportComponent implements OnInit, OnDestroy, AfterViewInit {
   private onlyManagedCollections = true;
   private onGenerate$ = new Subject<GenerateRequest>();
 
-  private isExportAttachmentsEnabled$ = this.configService.getFeatureFlag$(
-    FeatureFlag.ExportAttachments,
-  );
-
   constructor(
     protected i18nService: I18nService,
     protected toastService: ToastService,
@@ -202,7 +196,6 @@ export class ExportComponent implements OnInit, OnDestroy, AfterViewInit {
     protected organizationService: OrganizationService,
     private accountService: AccountService,
     private collectionService: CollectionService,
-    private configService: ConfigService,
   ) {}
 
   async ngOnInit() {
@@ -225,17 +218,14 @@ export class ExportComponent implements OnInit, OnDestroy, AfterViewInit {
       ),
     );
 
-    combineLatest([
-      this.exportForm.controls.vaultSelector.valueChanges,
-      this.isExportAttachmentsEnabled$,
-    ])
+    this.exportForm.controls.vaultSelector.valueChanges
       .pipe(takeUntil(this.destroy$))
-      .subscribe(([value, isExportAttachmentsEnabled]) => {
+      .subscribe(([value]) => {
         this.organizationId = value !== "myVault" ? value : undefined;
 
         this.formatOptions = this.formatOptions.filter((option) => option.value !== "zip");
         this.exportForm.get("format").setValue("json");
-        if (value === "myVault" && isExportAttachmentsEnabled) {
+        if (value === "myVault") {
           this.formatOptions.push({ name: ".zip (with attachments)", value: "zip" });
         }
       });

From 08b966409f4dbaffd74313b85e9485501e6ae3c7 Mon Sep 17 00:00:00 2001
From: aj-bw <81774843+aj-bw@users.noreply.github.com>
Date: Thu, 17 Apr 2025 09:18:39 -0400
Subject: [PATCH 25/36] linux-x86-builds-fix (#14321)

* readd rust toolchain commands

* revert native module build call
---
 .github/workflows/build-desktop.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/build-desktop.yml b/.github/workflows/build-desktop.yml
index 99a7548aa14..365d29f17f7 100644
--- a/.github/workflows/build-desktop.yml
+++ b/.github/workflows/build-desktop.yml
@@ -237,7 +237,7 @@ jobs:
           TARGET: musl
         run: |
           rustup target add x86_64-unknown-linux-musl
-          node build.js cross-platform
+          node build.js --target=x86_64-unknown-linux-musl --release
 
       - name: Build application
         run: npm run dist:lin

From fa268437efe5745af22e554cc325f090dc1dfc78 Mon Sep 17 00:00:00 2001
From: cyprain-okeke <108260115+cyprain-okeke@users.noreply.github.com>
Date: Thu, 17 Apr 2025 14:59:09 +0100
Subject: [PATCH 26/36] [PM-17774] Build page for admin sponsored families
 (#14243)

* Added nav item for f4e in org admin console

* shotgun surgery for adding "useAdminSponsoredFamilies" feature from the org table

* Resolved issue with members nav item also being selected when f4e is selected

* Separated out billing's logic from the org layout component

* Removed unused observable

* Moved logic to existing f4e policy service and added unit tests

* Resolved script typescript error

* Resolved goofy switchMap

* Add changes for the issue orgs

* Added changes for the dialog

* Rename the files properly

* Remove the commented code

* Change the implement to align with design

* Add todo comments

* Remove the comment todo

* Fix the uni test error

* Resolve the unit test

* Resolve the unit test issue

* Resolve the pr comments on any and route

* remove the any

* remove the generic validator

* Resolve the unit test

* Resolve the wrong message

* Resolve the duplicate route

---------

Co-authored-by: Conner Turnbull <cturnbull@bitwarden.com>
Co-authored-by: Conner Turnbull <133619638+cturnbull-bitwarden@users.noreply.github.com>
---
 .../members/members-routing.module.ts         |   7 +-
 .../can-access-sponsored-families.guard.ts    |  26 ++++
 .../add-sponsorship-dialog.component.html     |  45 ++++++
 .../add-sponsorship-dialog.component.ts       | 135 ++++++++++++++++++
 .../free-bitwarden-families.component.html    |  23 +++
 .../free-bitwarden-families.component.ts      |  62 ++++++++
 ...rganization-member-families.component.html |  47 ++++++
 .../organization-member-families.component.ts |  34 +++++
 ...nization-sponsored-families.component.html |  87 +++++++++++
 ...ganization-sponsored-families.component.ts |  39 +++++
 .../billing/members/types/sponsored-family.ts |   5 +
 .../src/app/shared/loose-components.module.ts |   9 ++
 apps/web/src/images/search.svg                |  12 ++
 apps/web/src/locales/en/messages.json         |  30 ++++
 ...organization-sponsorship-create.request.ts |   1 +
 15 files changed, 559 insertions(+), 3 deletions(-)
 create mode 100644 apps/web/src/app/billing/guards/can-access-sponsored-families.guard.ts
 create mode 100644 apps/web/src/app/billing/members/add-sponsorship-dialog.component.html
 create mode 100644 apps/web/src/app/billing/members/add-sponsorship-dialog.component.ts
 create mode 100644 apps/web/src/app/billing/members/free-bitwarden-families.component.html
 create mode 100644 apps/web/src/app/billing/members/free-bitwarden-families.component.ts
 create mode 100644 apps/web/src/app/billing/members/organization-member-families.component.html
 create mode 100644 apps/web/src/app/billing/members/organization-member-families.component.ts
 create mode 100644 apps/web/src/app/billing/members/organization-sponsored-families.component.html
 create mode 100644 apps/web/src/app/billing/members/organization-sponsored-families.component.ts
 create mode 100644 apps/web/src/app/billing/members/types/sponsored-family.ts
 create mode 100644 apps/web/src/images/search.svg

diff --git a/apps/web/src/app/admin-console/organizations/members/members-routing.module.ts b/apps/web/src/app/admin-console/organizations/members/members-routing.module.ts
index 9666630fc08..153a2f3a956 100644
--- a/apps/web/src/app/admin-console/organizations/members/members-routing.module.ts
+++ b/apps/web/src/app/admin-console/organizations/members/members-routing.module.ts
@@ -3,9 +3,10 @@ import { RouterModule, Routes } from "@angular/router";
 
 import { canAccessMembersTab } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 
-import { SponsoredFamiliesComponent } from "../../../billing/settings/sponsored-families.component";
+import { FreeBitwardenFamiliesComponent } from "../../../billing/members/free-bitwarden-families.component";
 import { organizationPermissionsGuard } from "../guards/org-permissions.guard";
 
+import { canAccessSponsoredFamilies } from "./../../../billing/guards/can-access-sponsored-families.guard";
 import { MembersComponent } from "./members.component";
 
 const routes: Routes = [
@@ -19,8 +20,8 @@ const routes: Routes = [
   },
   {
     path: "sponsored-families",
-    component: SponsoredFamiliesComponent,
-    canActivate: [organizationPermissionsGuard(canAccessMembersTab)],
+    component: FreeBitwardenFamiliesComponent,
+    canActivate: [organizationPermissionsGuard(canAccessMembersTab), canAccessSponsoredFamilies],
     data: {
       titleId: "sponsoredFamilies",
     },
diff --git a/apps/web/src/app/billing/guards/can-access-sponsored-families.guard.ts b/apps/web/src/app/billing/guards/can-access-sponsored-families.guard.ts
new file mode 100644
index 00000000000..9bc6778f0b0
--- /dev/null
+++ b/apps/web/src/app/billing/guards/can-access-sponsored-families.guard.ts
@@ -0,0 +1,26 @@
+import { inject } from "@angular/core";
+import { ActivatedRouteSnapshot, CanActivateFn } from "@angular/router";
+import { firstValueFrom, switchMap, filter } from "rxjs";
+
+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 { getById } from "@bitwarden/common/platform/misc";
+
+import { FreeFamiliesPolicyService } from "../services/free-families-policy.service";
+
+export const canAccessSponsoredFamilies: CanActivateFn = async (route: ActivatedRouteSnapshot) => {
+  const freeFamiliesPolicyService = inject(FreeFamiliesPolicyService);
+  const organizationService = inject(OrganizationService);
+  const accountService = inject(AccountService);
+
+  const org = accountService.activeAccount$.pipe(
+    getUserId,
+    switchMap((userId) => organizationService.organizations$(userId)),
+    getById(route.params.organizationId),
+    filter((org): org is Organization => org !== undefined),
+  );
+
+  return await firstValueFrom(freeFamiliesPolicyService.showSponsoredFamiliesDropdown$(org));
+};
diff --git a/apps/web/src/app/billing/members/add-sponsorship-dialog.component.html b/apps/web/src/app/billing/members/add-sponsorship-dialog.component.html
new file mode 100644
index 00000000000..2dbcc577e54
--- /dev/null
+++ b/apps/web/src/app/billing/members/add-sponsorship-dialog.component.html
@@ -0,0 +1,45 @@
+<form>
+  <bit-dialog>
+    <span bitDialogTitle>{{ "addSponsorship" | i18n }}</span>
+
+    <div bitDialogContent>
+      <form [formGroup]="sponsorshipForm">
+        <div class="tw-grid tw-grid-cols-12 tw-gap-4">
+          <div class="tw-col-span-12">
+            <bit-form-field>
+              <bit-label>{{ "email" | i18n }}:</bit-label>
+              <input
+                bitInput
+                inputmode="email"
+                formControlName="sponsorshipEmail"
+                [attr.aria-invalid]="sponsorshipEmailControl.invalid"
+                appInputStripSpaces
+              />
+            </bit-form-field>
+          </div>
+          <div class="tw-col-span-12">
+            <bit-form-field>
+              <bit-label>{{ "notes" | i18n }}:</bit-label>
+              <input
+                bitInput
+                inputmode="text"
+                formControlName="sponsorshipNote"
+                [attr.aria-invalid]="sponsorshipNoteControl.invalid"
+                appInputStripSpaces
+              />
+            </bit-form-field>
+          </div>
+        </div>
+      </form>
+    </div>
+
+    <ng-container bitDialogFooter>
+      <button bitButton bitFormButton type="button" buttonType="primary" (click)="save()">
+        {{ "save" | i18n }}
+      </button>
+      <button bitButton type="button" buttonType="secondary" [bitDialogClose]="false">
+        {{ "cancel" | i18n }}
+      </button>
+    </ng-container>
+  </bit-dialog>
+</form>
diff --git a/apps/web/src/app/billing/members/add-sponsorship-dialog.component.ts b/apps/web/src/app/billing/members/add-sponsorship-dialog.component.ts
new file mode 100644
index 00000000000..54d9ae90009
--- /dev/null
+++ b/apps/web/src/app/billing/members/add-sponsorship-dialog.component.ts
@@ -0,0 +1,135 @@
+import { DialogRef } from "@angular/cdk/dialog";
+import { Component } from "@angular/core";
+import {
+  AbstractControl,
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+  ValidationErrors,
+  Validators,
+} from "@angular/forms";
+import { firstValueFrom, map } from "rxjs";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { ButtonModule, DialogModule, DialogService, FormFieldModule } from "@bitwarden/components";
+
+interface RequestSponsorshipForm {
+  sponsorshipEmail: FormControl<string | null>;
+  sponsorshipNote: FormControl<string | null>;
+}
+
+export interface AddSponsorshipDialogResult {
+  action: AddSponsorshipDialogAction;
+  value: Partial<AddSponsorshipFormValue> | null;
+}
+
+interface AddSponsorshipFormValue {
+  sponsorshipEmail: string;
+  sponsorshipNote: string;
+  status: string;
+}
+
+enum AddSponsorshipDialogAction {
+  Saved = "saved",
+  Canceled = "canceled",
+}
+
+@Component({
+  templateUrl: "add-sponsorship-dialog.component.html",
+  standalone: true,
+  imports: [
+    JslibModule,
+    ButtonModule,
+    DialogModule,
+    FormsModule,
+    ReactiveFormsModule,
+    FormFieldModule,
+  ],
+})
+export class AddSponsorshipDialogComponent {
+  sponsorshipForm: FormGroup<RequestSponsorshipForm>;
+  loading = false;
+
+  constructor(
+    private dialogRef: DialogRef<AddSponsorshipDialogResult>,
+    private formBuilder: FormBuilder,
+    private accountService: AccountService,
+    private i18nService: I18nService,
+  ) {
+    this.sponsorshipForm = this.formBuilder.group<RequestSponsorshipForm>({
+      sponsorshipEmail: new FormControl<string | null>("", {
+        validators: [Validators.email, Validators.required],
+        asyncValidators: [this.validateNotCurrentUserEmail.bind(this)],
+        updateOn: "change",
+      }),
+      sponsorshipNote: new FormControl<string | null>("", {}),
+    });
+  }
+
+  static open(dialogService: DialogService): DialogRef<AddSponsorshipDialogResult> {
+    return dialogService.open<AddSponsorshipDialogResult>(AddSponsorshipDialogComponent);
+  }
+
+  protected async save() {
+    if (this.sponsorshipForm.invalid) {
+      return;
+    }
+
+    this.loading = true;
+    // TODO: This is a mockup implementation - needs to be updated with actual API integration
+    await new Promise((resolve) => setTimeout(resolve, 1000)); // Simulate API call
+
+    const formValue = this.sponsorshipForm.getRawValue();
+    const dialogValue: Partial<AddSponsorshipFormValue> = {
+      status: "Sent",
+      sponsorshipEmail: formValue.sponsorshipEmail ?? "",
+      sponsorshipNote: formValue.sponsorshipNote ?? "",
+    };
+
+    this.dialogRef.close({
+      action: AddSponsorshipDialogAction.Saved,
+      value: dialogValue,
+    });
+
+    this.loading = false;
+  }
+
+  protected close = () => {
+    this.dialogRef.close({ action: AddSponsorshipDialogAction.Canceled, value: null });
+  };
+
+  get sponsorshipEmailControl() {
+    return this.sponsorshipForm.controls.sponsorshipEmail;
+  }
+
+  get sponsorshipNoteControl() {
+    return this.sponsorshipForm.controls.sponsorshipNote;
+  }
+
+  private async validateNotCurrentUserEmail(
+    control: AbstractControl,
+  ): Promise<ValidationErrors | null> {
+    const value = control.value;
+    if (!value) {
+      return null;
+    }
+
+    const currentUserEmail = await firstValueFrom(
+      this.accountService.activeAccount$.pipe(map((a) => a?.email ?? "")),
+    );
+
+    if (!currentUserEmail) {
+      return null;
+    }
+
+    if (value.toLowerCase() === currentUserEmail.toLowerCase()) {
+      return { currentUserEmail: true };
+    }
+
+    return null;
+  }
+}
diff --git a/apps/web/src/app/billing/members/free-bitwarden-families.component.html b/apps/web/src/app/billing/members/free-bitwarden-families.component.html
new file mode 100644
index 00000000000..fe1dd15ab15
--- /dev/null
+++ b/apps/web/src/app/billing/members/free-bitwarden-families.component.html
@@ -0,0 +1,23 @@
+<app-header>
+  <button type="button" (click)="addSponsorship()" bitButton buttonType="primary">
+    <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
+    {{ "addSponsorship" | i18n }}
+  </button>
+</app-header>
+
+<bit-tab-group [(selectedIndex)]="tabIndex">
+  <bit-tab [label]="'sponsoredBitwardenFamilies' | i18n">
+    <app-organization-sponsored-families
+      [sponsoredFamilies]="sponsoredFamilies"
+      (removeSponsorshipEvent)="removeSponsorhip($event)"
+    ></app-organization-sponsored-families>
+  </bit-tab>
+
+  <bit-tab [label]="'memberFamilies' | i18n">
+    <app-organization-member-families
+      [memberFamilies]="sponsoredFamilies"
+    ></app-organization-member-families>
+  </bit-tab>
+</bit-tab-group>
+
+<p class="tw-px-4" bitTypography="body2">{{ "sponsoredFamiliesRemoveActiveSponsorship" | i18n }}</p>
diff --git a/apps/web/src/app/billing/members/free-bitwarden-families.component.ts b/apps/web/src/app/billing/members/free-bitwarden-families.component.ts
new file mode 100644
index 00000000000..af43e5a4bc1
--- /dev/null
+++ b/apps/web/src/app/billing/members/free-bitwarden-families.component.ts
@@ -0,0 +1,62 @@
+import { DialogRef } from "@angular/cdk/dialog";
+import { Component, OnInit } from "@angular/core";
+import { Router } from "@angular/router";
+import { firstValueFrom } from "rxjs";
+
+import { DialogService } from "@bitwarden/components";
+
+import { FreeFamiliesPolicyService } from "../services/free-families-policy.service";
+
+import {
+  AddSponsorshipDialogComponent,
+  AddSponsorshipDialogResult,
+} from "./add-sponsorship-dialog.component";
+import { SponsoredFamily } from "./types/sponsored-family";
+
+@Component({
+  selector: "app-free-bitwarden-families",
+  templateUrl: "free-bitwarden-families.component.html",
+})
+export class FreeBitwardenFamiliesComponent implements OnInit {
+  tabIndex = 0;
+  sponsoredFamilies: SponsoredFamily[] = [];
+
+  constructor(
+    private router: Router,
+    private dialogService: DialogService,
+    private freeFamiliesPolicyService: FreeFamiliesPolicyService,
+  ) {}
+
+  async ngOnInit() {
+    await this.preventAccessToFreeFamiliesPage();
+  }
+
+  async addSponsorship() {
+    const addSponsorshipDialogRef: DialogRef<AddSponsorshipDialogResult> =
+      AddSponsorshipDialogComponent.open(this.dialogService);
+
+    const dialogRef = await firstValueFrom(addSponsorshipDialogRef.closed);
+
+    if (dialogRef?.value) {
+      this.sponsoredFamilies = [dialogRef.value, ...this.sponsoredFamilies];
+    }
+  }
+
+  removeSponsorhip(sponsorship: any) {
+    const index = this.sponsoredFamilies.findIndex(
+      (e) => e.sponsorshipEmail == sponsorship.sponsorshipEmail,
+    );
+    this.sponsoredFamilies.splice(index, 1);
+  }
+
+  private async preventAccessToFreeFamiliesPage() {
+    const showFreeFamiliesPage = await firstValueFrom(
+      this.freeFamiliesPolicyService.showFreeFamilies$,
+    );
+
+    if (!showFreeFamiliesPage) {
+      await this.router.navigate(["/"]);
+      return;
+    }
+  }
+}
diff --git a/apps/web/src/app/billing/members/organization-member-families.component.html b/apps/web/src/app/billing/members/organization-member-families.component.html
new file mode 100644
index 00000000000..c5b7283d9d9
--- /dev/null
+++ b/apps/web/src/app/billing/members/organization-member-families.component.html
@@ -0,0 +1,47 @@
+<bit-container>
+  <ng-container>
+    <p bitTypography="body1">
+      {{ "membersWithSponsoredFamilies" | i18n }}
+    </p>
+
+    <h2 bitTypography="h2" class="">{{ "memberFamilies" | i18n }}</h2>
+
+    @if (loading) {
+      <ng-container>
+        <i class="bwi bwi-spinner bwi-spin tw-text-muted" title="{{ 'loading' | i18n }}"></i>
+        <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+      </ng-container>
+    }
+
+    @if (!loading && memberFamilies?.length > 0) {
+      <ng-container>
+        <bit-table>
+          <ng-container header>
+            <tr>
+              <th bitCell>{{ "member" | i18n }}</th>
+              <th bitCell>{{ "status" | i18n }}</th>
+              <th bitCell></th>
+            </tr>
+          </ng-container>
+          <ng-template body alignContent="middle">
+            @for (o of memberFamilies; let i = $index; track i) {
+              <ng-container>
+                <tr bitRow>
+                  <td bitCell>{{ o.sponsorshipEmail }}</td>
+                  <td bitCell class="tw-text-success">{{ o.status }}</td>
+                </tr>
+              </ng-container>
+            }
+          </ng-template>
+        </bit-table>
+        <hr class="mt-0" />
+      </ng-container>
+    } @else {
+      <div class="tw-my-5 tw-py-5 tw-flex tw-flex-col tw-items-center">
+        <img class="tw-w-32" src="./../../../images/search.svg" alt="Search" />
+        <h4 class="mt-3" bitTypography="h4">{{ "noMemberFamilies" | i18n }}</h4>
+        <p bitTypography="body2">{{ "noMemberFamiliesDescription" | i18n }}</p>
+      </div>
+    }
+  </ng-container>
+</bit-container>
diff --git a/apps/web/src/app/billing/members/organization-member-families.component.ts b/apps/web/src/app/billing/members/organization-member-families.component.ts
new file mode 100644
index 00000000000..52c95646a11
--- /dev/null
+++ b/apps/web/src/app/billing/members/organization-member-families.component.ts
@@ -0,0 +1,34 @@
+import { Component, Input, OnDestroy, OnInit } from "@angular/core";
+import { Subject } from "rxjs";
+
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+
+import { SponsoredFamily } from "./types/sponsored-family";
+
+@Component({
+  selector: "app-organization-member-families",
+  templateUrl: "organization-member-families.component.html",
+})
+export class OrganizationMemberFamiliesComponent implements OnInit, OnDestroy {
+  tabIndex = 0;
+  loading = false;
+
+  @Input() memberFamilies: SponsoredFamily[] = [];
+
+  private _destroy = new Subject<void>();
+
+  constructor(private platformUtilsService: PlatformUtilsService) {}
+
+  async ngOnInit() {
+    this.loading = false;
+  }
+
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+
+  get isSelfHosted(): boolean {
+    return this.platformUtilsService.isSelfHost();
+  }
+}
diff --git a/apps/web/src/app/billing/members/organization-sponsored-families.component.html b/apps/web/src/app/billing/members/organization-sponsored-families.component.html
new file mode 100644
index 00000000000..7db96deb4ab
--- /dev/null
+++ b/apps/web/src/app/billing/members/organization-sponsored-families.component.html
@@ -0,0 +1,87 @@
+<bit-container>
+  <ng-container>
+    <p bitTypography="body1">
+      {{ "sponsorFreeBitwardenFamilies" | i18n }}
+    </p>
+    <div bitTypography="body1">
+      {{ "sponsoredFamiliesInclude" | i18n }}:
+      <ul class="tw-list-outside">
+        <li>{{ "sponsoredFamiliesPremiumAccess" | i18n }}</li>
+        <li>{{ "sponsoredFamiliesSharedCollections" | i18n }}</li>
+      </ul>
+    </div>
+
+    <h2 bitTypography="h2" class="">{{ "sponsoredBitwardenFamilies" | i18n }}</h2>
+
+    @if (loading) {
+      <ng-container>
+        <i class="bwi bwi-spinner bwi-spin tw-text-muted" title="{{ 'loading' | i18n }}"></i>
+        <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+      </ng-container>
+    }
+
+    @if (!loading && sponsoredFamilies?.length > 0) {
+      <ng-container>
+        <bit-table>
+          <ng-container header>
+            <tr>
+              <th bitCell>{{ "recipient" | i18n }}</th>
+              <th bitCell>{{ "status" | i18n }}</th>
+              <th bitCell>{{ "notes" | i18n }}</th>
+              <th bitCell></th>
+            </tr>
+          </ng-container>
+          <ng-template body alignContent="middle">
+            @for (o of sponsoredFamilies; let i = $index; track i) {
+              <ng-container>
+                <tr bitRow>
+                  <td bitCell>{{ o.sponsorshipEmail }}</td>
+                  <td bitCell class="tw-text-success">{{ o.status }}</td>
+                  <td bitCell>{{ o.sponsorshipNote }}</td>
+                  <td bitCell>
+                    <button
+                      type="button"
+                      bitIconButton="bwi-ellipsis-v"
+                      buttonType="main"
+                      [bitMenuTriggerFor]="appListDropdown"
+                      appA11yTitle="{{ 'options' | i18n }}"
+                    ></button>
+                    <bit-menu #appListDropdown>
+                      <button
+                        type="button"
+                        bitMenuItem
+                        [attr.aria-label]="'resendEmailLabel' | i18n"
+                      >
+                        <i aria-hidden="true" class="bwi bwi-envelope"></i>
+                        {{ "resendInvitation" | i18n }}
+                      </button>
+
+                      <hr class="m-0" />
+
+                      <button
+                        type="button"
+                        bitMenuItem
+                        [attr.aria-label]="'revokeAccount' | i18n"
+                        (click)="remove(o)"
+                      >
+                        <i aria-hidden="true" class="bwi bwi-close tw-text-danger"></i>
+                        <span class="tw-text-danger pl-1">{{ "remove" | i18n }}</span>
+                      </button>
+                    </bit-menu>
+                  </td>
+                </tr>
+              </ng-container>
+            }
+          </ng-template>
+        </bit-table>
+        <hr class="mt-0" />
+      </ng-container>
+    } @else {
+      <div class="tw-my-5 tw-py-5 tw-flex tw-flex-col tw-items-center">
+        <img class="tw-w-32" src="./../../../images/search.svg" alt="Search" />
+        <h4 class="mt-3" bitTypography="h4">{{ "noSponsoredFamilies" | i18n }}</h4>
+        <p bitTypography="body2">{{ "noSponsoredFamiliesDescription" | i18n }}</p>
+      </div>
+    }
+  </ng-container>
+</bit-container>
diff --git a/apps/web/src/app/billing/members/organization-sponsored-families.component.ts b/apps/web/src/app/billing/members/organization-sponsored-families.component.ts
new file mode 100644
index 00000000000..7cc46634a38
--- /dev/null
+++ b/apps/web/src/app/billing/members/organization-sponsored-families.component.ts
@@ -0,0 +1,39 @@
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from "@angular/core";
+import { Subject } from "rxjs";
+
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+
+import { SponsoredFamily } from "./types/sponsored-family";
+
+@Component({
+  selector: "app-organization-sponsored-families",
+  templateUrl: "organization-sponsored-families.component.html",
+})
+export class OrganizationSponsoredFamiliesComponent implements OnInit, OnDestroy {
+  loading = false;
+  tabIndex = 0;
+
+  @Input() sponsoredFamilies: SponsoredFamily[] = [];
+  @Output() removeSponsorshipEvent = new EventEmitter<SponsoredFamily>();
+
+  private _destroy = new Subject<void>();
+
+  constructor(private platformUtilsService: PlatformUtilsService) {}
+
+  async ngOnInit() {
+    this.loading = false;
+  }
+
+  get isSelfHosted(): boolean {
+    return this.platformUtilsService.isSelfHost();
+  }
+
+  remove(sponsorship: SponsoredFamily) {
+    this.removeSponsorshipEvent.emit(sponsorship);
+  }
+
+  ngOnDestroy(): void {
+    this._destroy.next();
+    this._destroy.complete();
+  }
+}
diff --git a/apps/web/src/app/billing/members/types/sponsored-family.ts b/apps/web/src/app/billing/members/types/sponsored-family.ts
new file mode 100644
index 00000000000..82d2e3948b2
--- /dev/null
+++ b/apps/web/src/app/billing/members/types/sponsored-family.ts
@@ -0,0 +1,5 @@
+export interface SponsoredFamily {
+  sponsorshipEmail?: string;
+  sponsorshipNote?: string;
+  status?: string;
+}
diff --git a/apps/web/src/app/shared/loose-components.module.ts b/apps/web/src/app/shared/loose-components.module.ts
index 5dc34b3b5b1..469ebe457d0 100644
--- a/apps/web/src/app/shared/loose-components.module.ts
+++ b/apps/web/src/app/shared/loose-components.module.ts
@@ -62,6 +62,9 @@ import { OrganizationBadgeModule } from "../vault/individual-vault/organization-
 import { PipesModule } from "../vault/individual-vault/pipes/pipes.module";
 import { PurgeVaultComponent } from "../vault/settings/purge-vault.component";
 
+import { FreeBitwardenFamiliesComponent } from "./../billing/members/free-bitwarden-families.component";
+import { OrganizationMemberFamiliesComponent } from "./../billing/members/organization-member-families.component";
+import { OrganizationSponsoredFamiliesComponent } from "./../billing/members/organization-sponsored-families.component";
 import { EnvironmentSelectorModule } from "./../components/environment-selector/environment-selector.module";
 import { AccountFingerprintComponent } from "./components/account-fingerprint/account-fingerprint.component";
 import { SharedModule } from "./shared.module";
@@ -128,6 +131,9 @@ import { SharedModule } from "./shared.module";
     SelectableAvatarComponent,
     SetPasswordComponent,
     SponsoredFamiliesComponent,
+    OrganizationSponsoredFamiliesComponent,
+    OrganizationMemberFamiliesComponent,
+    FreeBitwardenFamiliesComponent,
     SponsoringOrgRowComponent,
     UpdatePasswordComponent,
     UpdateTempPasswordComponent,
@@ -175,6 +181,9 @@ import { SharedModule } from "./shared.module";
     SelectableAvatarComponent,
     SetPasswordComponent,
     SponsoredFamiliesComponent,
+    OrganizationSponsoredFamiliesComponent,
+    OrganizationMemberFamiliesComponent,
+    FreeBitwardenFamiliesComponent,
     SponsoringOrgRowComponent,
     UpdateTempPasswordComponent,
     UpdatePasswordComponent,
diff --git a/apps/web/src/images/search.svg b/apps/web/src/images/search.svg
new file mode 100644
index 00000000000..36e0ea4bd23
--- /dev/null
+++ b/apps/web/src/images/search.svg
@@ -0,0 +1,12 @@
+<svg width="97" height="97" viewBox="0 0 97 97" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M62.5 12.4604C63.6046 12.4604 64.5 13.3559 64.5 14.4604L64.5 90.4604C64.5 91.565 63.6046 92.4604 62.5 92.4604L6.5 92.4604C5.39543 92.4604 4.5 91.565 4.5 90.4604L4.5 14.4604C4.5 13.3559 5.39544 12.4604 6.5 12.4604L62.5 12.4604Z" fill="#99BAF4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M62.5 90.4604L62.5 14.4604L6.5 14.4604L6.5 90.4604L62.5 90.4604ZM64.5 14.4604C64.5 13.3559 63.6046 12.4604 62.5 12.4604L6.5 12.4604C5.39544 12.4604 4.5 13.3559 4.5 14.4604L4.5 90.4604C4.5 91.565 5.39543 92.4604 6.5 92.4604L62.5 92.4604C63.6046 92.4604 64.5 91.565 64.5 90.4604L64.5 14.4604Z" fill="#0E3781"/>
+<path d="M72.5 82.4604L72.5 6.46045C72.5 5.35588 71.6046 4.46045 70.5 4.46045L27.8284 4.46045C27.298 4.46045 26.7939 4.66655 26.4188 5.04162L13.0835 18.3769C12.7085 18.752 12.5 19.2584 12.5 19.7889L12.5 82.4604C12.5 83.565 13.3954 84.4604 14.5 84.4604L70.5 84.4604C71.6046 84.4604 72.5 83.565 72.5 82.4604Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M70.5 82.4604L70.5 6.46045L27.8284 6.46045L14.5 19.7889L14.5 82.4604L70.5 82.4604ZM27.833 6.45583C27.833 6.45583 27.8329 6.45595 27.8327 6.45617L27.833 6.45583ZM72.5 6.46045L72.5 82.4604C72.5 83.565 71.6046 84.4604 70.5 84.4604L14.5 84.4604C13.3954 84.4604 12.5 83.565 12.5 82.4604L12.5 19.7889C12.5 19.2584 12.7085 18.752 13.0835 18.3769L26.4188 5.04162C26.7939 4.66655 27.298 4.46045 27.8284 4.46045L70.5 4.46045C71.6046 4.46045 72.5 5.35588 72.5 6.46045Z" fill="#0E3781"/>
+<path d="M84.5 48.4604C84.5 59.5061 75.5457 68.4604 64.5 68.4604C53.4543 68.4604 44.5 59.5061 44.5 48.4604C44.5 37.4148 53.4543 28.4604 64.5 28.4604C75.5457 28.4604 84.5 37.4148 84.5 48.4604Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M64.5 66.4604C74.4411 66.4604 82.5 58.4016 82.5 48.4604C82.5 38.5193 74.4411 30.4604 64.5 30.4604C54.5589 30.4604 46.5 38.5193 46.5 48.4604C46.5 58.4016 54.5589 66.4604 64.5 66.4604ZM64.5 68.4604C75.5457 68.4604 84.5 59.5061 84.5 48.4604C84.5 37.4148 75.5457 28.4604 64.5 28.4604C53.4543 28.4604 44.5 37.4148 44.5 48.4604C44.5 59.5061 53.4543 68.4604 64.5 68.4604Z" fill="#0E3781"/>
+<path d="M79.5 48.4604C79.5 56.7447 72.7843 63.4604 64.5 63.4604C56.2157 63.4604 49.5 56.7447 49.5 48.4604C49.5 40.1762 56.2157 33.4604 64.5 33.4604C72.7843 33.4604 79.5 40.1762 79.5 48.4604Z" fill="#99BAF4"/>
+<path d="M95.5038 77.5474L79 61.9604L77 63.9604L92.587 80.4643C93.3607 81.2836 94.6583 81.3021 95.4552 80.5053L95.5448 80.4156C96.3417 79.6188 96.3231 78.3212 95.5038 77.5474Z" fill="#0E3781"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.5 5.46045C29.0523 5.46045 29.5 5.90816 29.5 6.46045V21.4604H14.5C13.9477 21.4604 13.5 21.0127 13.5 20.4604C13.5 19.9082 13.9477 19.4604 14.5 19.4604H27.5V6.46045C27.5 5.90816 27.9477 5.46045 28.5 5.46045Z" fill="#0E3781"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 28.4604C19.9477 28.4604 19.5 28.9082 19.5 29.4604C19.5 30.0127 19.9477 30.4604 20.5 30.4604H30.5C31.0523 30.4604 31.5 30.0127 31.5 29.4604C31.5 28.9082 31.0523 28.4604 30.5 28.4604H20.5ZM34.5 28.4604C33.9477 28.4604 33.5 28.9082 33.5 29.4604C33.5 30.0127 33.9477 30.4604 34.5 30.4604H44.5C45.0523 30.4604 45.5 30.0127 45.5 29.4604C45.5 28.9082 45.0523 28.4604 44.5 28.4604H34.5ZM51.483 33.2759C51.3964 32.8118 50.9892 32.4604 50.5 32.4604H40.5C39.9477 32.4604 39.5 32.9082 39.5 33.4604C39.5 34.0127 39.9477 34.4604 40.5 34.4604H50.2171C50.6218 34.0477 51.0441 33.6524 51.483 33.2759ZM44.5246 49.4604C44.5579 50.1365 44.6247 50.8037 44.7235 51.4604H40.5C39.9477 51.4604 39.5 51.0127 39.5 50.4604C39.5 49.9082 39.9477 49.4604 40.5 49.4604H44.5246ZM44.7235 45.4605C44.6247 46.1172 44.5579 46.7844 44.5246 47.4605L37.5 47.4604C36.9477 47.4604 36.5 47.0127 36.5 46.4604C36.5 45.9082 36.9477 45.4604 37.5 45.4604L44.7235 45.4605ZM48.4985 36.4604C48.0192 37.0986 47.5772 37.7663 47.1756 38.4604L38.5 38.4604C37.9477 38.4604 37.5 38.0127 37.5 37.4604C37.5 36.9082 37.9477 36.4604 38.5 36.4604L48.4985 36.4604ZM64.5 28.4604C61.3707 28.4604 58.4093 29.1791 55.7717 30.4604L54.5 30.4604C53.9477 30.4604 53.5 30.0127 53.5 29.4604C53.5 28.9082 53.9477 28.4604 54.5 28.4604H64.5ZM48.5 28.4604C47.9477 28.4604 47.5 28.9082 47.5 29.4604C47.5 30.0127 47.9477 30.4604 48.5 30.4604H50.5C51.0523 30.4604 51.5 30.0127 51.5 29.4604C51.5 28.9082 51.0523 28.4604 50.5 28.4604H48.5ZM37.5 33.4604C37.5 32.9082 37.0523 32.4604 36.5 32.4604H34.5C33.9477 32.4604 33.5 32.9082 33.5 33.4604C33.5 34.0127 33.9477 34.4604 34.5 34.4604H36.5C37.0523 34.4604 37.5 34.0127 37.5 33.4604ZM34.5 38.4604C35.0523 38.4604 35.5 38.0127 35.5 37.4604C35.5 36.9082 35.0523 36.4604 34.5 36.4604H30.5C29.9477 36.4604 29.5 36.9082 29.5 37.4604C29.5 38.0127 29.9477 38.4604 30.5 38.4604H34.5ZM34.5 46.4604C34.5 47.0127 34.0523 47.4604 33.5 47.4604H27.5C26.9477 47.4604 26.5 47.0127 26.5 46.4604C26.5 45.9082 26.9477 45.4604 27.5 45.4604H33.5C34.0523 45.4604 34.5 45.9082 34.5 46.4604ZM36.5 51.4604C37.0523 51.4604 37.5 51.0127 37.5 50.4604C37.5 49.9082 37.0523 49.4604 36.5 49.4604H20.5C19.9477 49.4604 19.5 49.9082 19.5 50.4604C19.5 51.0127 19.9477 51.4604 20.5 51.4604H36.5ZM31.5 33.4604C31.5 32.9082 31.0523 32.4604 30.5 32.4604L20.5 32.4605C19.9477 32.4605 19.5 32.9082 19.5 33.4605C19.5 34.0127 19.9477 34.4605 20.5 34.4605L30.5 34.4604C31.0523 34.4604 31.5 34.0127 31.5 33.4604ZM26.5 38.4604C27.0523 38.4604 27.5 38.0127 27.5 37.4604C27.5 36.9082 27.0523 36.4604 26.5 36.4604H20.5C19.9477 36.4604 19.5 36.9082 19.5 37.4604C19.5 38.0127 19.9477 38.4604 20.5 38.4604H26.5ZM24.5 46.4604C24.5 47.0127 24.0523 47.4604 23.5 47.4604H20.5C19.9477 47.4604 19.5 47.0127 19.5 46.4604C19.5 45.9082 19.9477 45.4604 20.5 45.4604H23.5C24.0523 45.4604 24.5 45.9082 24.5 46.4604Z" fill="#FFBF00"/>
+</svg>
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 85a7b8cb927..3d6cf0f23a5 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -6306,6 +6306,21 @@
   "sponsoredFamilies": {
     "message": "Free Bitwarden Families"
   },
+  "sponsoredBitwardenFamilies": {
+    "message": "Sponsored families"
+  },
+  "noSponsoredFamilies": {
+    "message": "No sponsored families"
+  },
+  "noSponsoredFamiliesDescription": {
+    "message": "Sponsored non-member families plans will display here"
+  },
+  "sponsorFreeBitwardenFamilies": {
+    "message": "Members of your organization are eligible for Free Bitwarden Families. You can sponsor Free Bitwarden Families for employees who are not a member of your Bitwarden organization. Sponsoring a non-member requires an available seat within your organization."
+  },
+  "sponsoredFamiliesRemoveActiveSponsorship": {
+    "message": "When you remove an active sponsorship, a seat within your organization will be available after the renewal date of the sponsored organization."
+  },
   "sponsoredFamiliesEligible": {
     "message": "You and your family are eligible for Free Bitwarden Families. Redeem with your personal email to keep your data secure even when you are not at work."
   },
@@ -6321,6 +6336,18 @@
   "sponsoredFamiliesSharedCollections": {
     "message": "Shared collections for Family secrets"
   },
+  "memberFamilies": {
+    "message": "Member families"
+  },
+  "noMemberFamilies": {
+    "message": "No member families"
+  },
+  "noMemberFamiliesDescription": {
+    "message": "Members who have redeemed family plans will display here"
+  },
+  "membersWithSponsoredFamilies": {
+    "message": "Members of your organization are eligible for Free Bitwarden Families. Here you can see members who have sponsored a Families organization."
+  },
   "badToken": {
     "message": "The link is no longer valid. Please have the sponsor resend the offer."
   },
@@ -7984,6 +8011,9 @@
   "inviteMember": {
     "message": "Invite member"
   },
+  "addSponsorship": {
+    "message": "Add sponsorship"
+  },
   "needsConfirmation": {
     "message": "Needs confirmation"
   },
diff --git a/libs/common/src/admin-console/models/request/organization/organization-sponsorship-create.request.ts b/libs/common/src/admin-console/models/request/organization/organization-sponsorship-create.request.ts
index 534afffd1bb..19e993487c2 100644
--- a/libs/common/src/admin-console/models/request/organization/organization-sponsorship-create.request.ts
+++ b/libs/common/src/admin-console/models/request/organization/organization-sponsorship-create.request.ts
@@ -6,4 +6,5 @@ export class OrganizationSponsorshipCreateRequest {
   sponsoredEmail: string;
   planSponsorshipType: PlanSponsorshipType;
   friendlyName: string;
+  notes?: string;
 }

From 6c930deefee42365b256e558f7d3cdaa43b88aee Mon Sep 17 00:00:00 2001
From: Leslie Tilton <23057410+Banrion@users.noreply.github.com>
Date: Thu, 17 Apr 2025 09:08:39 -0500
Subject: [PATCH 27/36] Migrate bootstrap styling to use tailwind while keeping
 the same styling (#14203)

---
 .../pages/breach-report.component.html        | 55 ++++++++++---------
 1 file changed, 28 insertions(+), 27 deletions(-)

diff --git a/apps/web/src/app/tools/reports/pages/breach-report.component.html b/apps/web/src/app/tools/reports/pages/breach-report.component.html
index fcfd37fef3f..d645fa39d69 100644
--- a/apps/web/src/app/tools/reports/pages/breach-report.component.html
+++ b/apps/web/src/app/tools/reports/pages/breach-report.component.html
@@ -7,7 +7,7 @@
       <bit-label>{{ "username" | i18n }}</bit-label>
       <input id="username" type="text" formControlName="username" bitInput />
     </bit-form-field>
-    <small class="form-text text-muted tw-mb-4">{{ "breachCheckUsernameEmail" | i18n }}</small>
+    <small class="tw-mb-4 tw-block tw-text-muted">{{ "breachCheckUsernameEmail" | i18n }}</small>
     <button type="submit" buttonType="primary" bitButton [loading]="loading">
       {{ "checkBreaches" | i18n }}
     </button>
@@ -21,32 +21,33 @@
       <bit-callout type="danger" title="{{ 'breachFound' | i18n }}" *ngIf="breachedAccounts.length">
         {{ "breachUsernameFound" | i18n: checkedUsername : breachedAccounts.length }}
       </bit-callout>
-      <ul class="list-group list-group-breach" *ngIf="breachedAccounts.length">
-        <li *ngFor="let a of breachedAccounts" class="list-group-item min-height-fix">
-          <div class="row">
-            <div class="col-2 tw-text-center">
-              <img [src]="a.logoPath" alt="" class="img-fluid" />
-            </div>
-            <div class="col-7">
-              <h3 class="tw-text-lg">{{ a.title }}</h3>
-              <p [innerHTML]="a.description"></p>
-              <p class="tw-mb-1">{{ "compromisedData" | i18n }}:</p>
-              <ul>
-                <li *ngFor="let d of a.dataClasses">{{ d }}</li>
-              </ul>
-            </div>
-            <div class="col-3">
-              <dl>
-                <dt>{{ "website" | i18n }}</dt>
-                <dd>{{ a.domain }}</dd>
-                <dt>{{ "affectedUsers" | i18n }}</dt>
-                <dd>{{ a.pwnCount | number }}</dd>
-                <dt>{{ "breachOccurred" | i18n }}</dt>
-                <dd>{{ a.breachDate | date: "mediumDate" }}</dd>
-                <dt>{{ "breachReported" | i18n }}</dt>
-                <dd>{{ a.addedDate | date: "mediumDate" }}</dd>
-              </dl>
-            </div>
+      <ul
+        class="tw-list-none tw-flex-col tw-divide-x-0 tw-divide-y tw-divide-solid tw-divide-secondary-300 tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-p-0"
+        *ngIf="breachedAccounts.length"
+      >
+        <li *ngFor="let a of breachedAccounts" class="tw-flex tw-gap-4 tw-p-4">
+          <div class="tw-w-32 tw-flex-none">
+            <img [src]="a.logoPath" alt="" class="tw-max-w-32 tw-items-stretch" />
+          </div>
+          <div class="tw-flex-auto">
+            <h3 class="tw-text-lg">{{ a.title }}</h3>
+            <p [innerHTML]="a.description"></p>
+            <p class="tw-mb-1">{{ "compromisedData" | i18n }}:</p>
+            <ul>
+              <li *ngFor="let d of a.dataClasses">{{ d }}</li>
+            </ul>
+          </div>
+          <div class="tw-w-48 tw-flex-none">
+            <dl>
+              <dt>{{ "website" | i18n }}</dt>
+              <dd>{{ a.domain }}</dd>
+              <dt>{{ "affectedUsers" | i18n }}</dt>
+              <dd>{{ a.pwnCount | number }}</dd>
+              <dt>{{ "breachOccurred" | i18n }}</dt>
+              <dd>{{ a.breachDate | date: "mediumDate" }}</dd>
+              <dt>{{ "breachReported" | i18n }}</dt>
+              <dd>{{ a.addedDate | date: "mediumDate" }}</dd>
+            </dl>
           </div>
         </li>
       </ul>

From ede4776433a41b1d4678d3402307c4c557fda887 Mon Sep 17 00:00:00 2001
From: Andreas Coroiu <acoroiu@bitwarden.com>
Date: Thu, 17 Apr 2025 16:25:35 +0200
Subject: [PATCH 28/36] [PM-18043] Add serialization/deserialization support
 (#13804)

* feat: add support for serialization-PR tweaks

* feat: update sdk version
---
 .../src/platform/ipc/background-communication-backend.ts  | 6 +++++-
 .../src/app/platform/ipc/web-communication-provider.ts    | 8 +++++++-
 package-lock.json                                         | 8 ++++----
 package.json                                              | 2 +-
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/apps/browser/src/platform/ipc/background-communication-backend.ts b/apps/browser/src/platform/ipc/background-communication-backend.ts
index 6c5b374dd56..1ebb835fa3b 100644
--- a/apps/browser/src/platform/ipc/background-communication-backend.ts
+++ b/apps/browser/src/platform/ipc/background-communication-backend.ts
@@ -18,7 +18,11 @@ export class BackgroundCommunicationBackend implements CommunicationBackend {
         return;
       }
 
-      void this.queue.enqueue({ ...message.message, source: { Web: { id: sender.tab.id } } });
+      void this.queue.enqueue(
+        new IncomingMessage(message.message.payload, message.message.destination, {
+          Web: { id: sender.tab.id },
+        }),
+      );
     });
   }
 
diff --git a/apps/web/src/app/platform/ipc/web-communication-provider.ts b/apps/web/src/app/platform/ipc/web-communication-provider.ts
index 85353ab77af..787a3c7f3a4 100644
--- a/apps/web/src/app/platform/ipc/web-communication-provider.ts
+++ b/apps/web/src/app/platform/ipc/web-communication-provider.ts
@@ -19,7 +19,13 @@ export class WebCommunicationProvider implements CommunicationBackend {
         return;
       }
 
-      await this.queue.enqueue({ ...message.message, source: "BrowserBackground" });
+      void this.queue.enqueue(
+        new IncomingMessage(
+          message.message.payload,
+          message.message.destination,
+          "BrowserBackground",
+        ),
+      );
     });
   }
 
diff --git a/package-lock.json b/package-lock.json
index c101444cd8e..65f0c87721a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,7 +24,7 @@
         "@angular/platform-browser": "18.2.13",
         "@angular/platform-browser-dynamic": "18.2.13",
         "@angular/router": "18.2.13",
-        "@bitwarden/sdk-internal": "0.2.0-main.133",
+        "@bitwarden/sdk-internal": "0.2.0-main.137",
         "@electron/fuses": "1.8.0",
         "@emotion/css": "11.13.5",
         "@koa/multer": "3.0.2",
@@ -4700,9 +4700,9 @@
       "link": true
     },
     "node_modules/@bitwarden/sdk-internal": {
-      "version": "0.2.0-main.133",
-      "resolved": "https://registry.npmjs.org/@bitwarden/sdk-internal/-/sdk-internal-0.2.0-main.133.tgz",
-      "integrity": "sha512-KzKJGf9cKlcQzfRmqkAwVGBN1kDpcRFkTMm7nrphZSrjfaWJWI1lBEJ0DhnkbMMHJXhQavGyoVk5TIn/Y8ylmw==",
+      "version": "0.2.0-main.137",
+      "resolved": "https://registry.npmjs.org/@bitwarden/sdk-internal/-/sdk-internal-0.2.0-main.137.tgz",
+      "integrity": "sha512-Df0pB5tOEc4WiMjskunTrqHulPzenFv8C61sqsBhHfy80xcf5kU5JyPd4asbf3e4uNS6QGXptd8imp09AuiFEA==",
       "license": "GPL-3.0"
     },
     "node_modules/@bitwarden/send-ui": {
diff --git a/package.json b/package.json
index a39004dcc03..c78decb9827 100644
--- a/package.json
+++ b/package.json
@@ -156,7 +156,7 @@
     "@angular/platform-browser": "18.2.13",
     "@angular/platform-browser-dynamic": "18.2.13",
     "@angular/router": "18.2.13",
-    "@bitwarden/sdk-internal": "0.2.0-main.133",
+    "@bitwarden/sdk-internal": "0.2.0-main.137",
     "@electron/fuses": "1.8.0",
     "@emotion/css": "11.13.5",
     "@koa/multer": "3.0.2",

From e0df1ecf0c4b69ebebb34d0a07d54a1f87097918 Mon Sep 17 00:00:00 2001
From: Jonas Hendrickx <jhendrickx@bitwarden.com>
Date: Thu, 17 Apr 2025 17:33:13 +0200
Subject: [PATCH 29/36] [PM-19180] Calculate sales tax correctly for sponsored
 plans (#14129)

* [PM-19180] Sponsored family org no sales tax because they're free

* [PM-19180][DRAFT] Calculate sales tax correctly for sponsored plans with additional storage

---------

Co-authored-by: Conner Turnbull <133619638+cturnbull-bitwarden@users.noreply.github.com>
---
 .../families-for-enterprise-setup.component.ts     |  2 ++
 .../organizations/organization-plans.component.ts  | 14 ++++++++------
 .../preview-organization-invoice.request.ts        |  3 ++-
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/app/admin-console/organizations/sponsorships/families-for-enterprise-setup.component.ts b/apps/web/src/app/admin-console/organizations/sponsorships/families-for-enterprise-setup.component.ts
index fdad689d982..57fe212fa65 100644
--- a/apps/web/src/app/admin-console/organizations/sponsorships/families-for-enterprise-setup.component.ts
+++ b/apps/web/src/app/admin-console/organizations/sponsorships/families-for-enterprise-setup.component.ts
@@ -43,6 +43,8 @@ export class FamiliesForEnterpriseSetupComponent implements OnInit, OnDestroy {
     value.plan = PlanType.FamiliesAnnually;
     value.productTier = ProductTierType.Families;
     value.acceptingSponsorship = true;
+    value.planSponsorshipType = PlanSponsorshipType.FamiliesForEnterprise;
+
     // eslint-disable-next-line rxjs-angular/prefer-takeuntil
     value.onSuccess.subscribe(this.onOrganizationCreateSuccess.bind(this));
   }
diff --git a/apps/web/src/app/billing/organizations/organization-plans.component.ts b/apps/web/src/app/billing/organizations/organization-plans.component.ts
index fc7d6793a85..59f8dd34c37 100644
--- a/apps/web/src/app/billing/organizations/organization-plans.component.ts
+++ b/apps/web/src/app/billing/organizations/organization-plans.component.ts
@@ -34,7 +34,12 @@ import { AccountService } from "@bitwarden/common/auth/abstractions/account.serv
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
 import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions";
 import { TaxServiceAbstraction } from "@bitwarden/common/billing/abstractions/tax.service.abstraction";
-import { PaymentMethodType, PlanType, ProductTierType } from "@bitwarden/common/billing/enums";
+import {
+  PaymentMethodType,
+  PlanSponsorshipType,
+  PlanType,
+  ProductTierType,
+} from "@bitwarden/common/billing/enums";
 import { TaxInformation } from "@bitwarden/common/billing/models/domain";
 import { ExpandedTaxInfoUpdateRequest } from "@bitwarden/common/billing/models/request/expanded-tax-info-update.request";
 import { PreviewOrganizationInvoiceRequest } from "@bitwarden/common/billing/models/request/preview-organization-invoice.request";
@@ -83,6 +88,7 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
   @Input() showFree = true;
   @Input() showCancel = false;
   @Input() acceptingSponsorship = false;
+  @Input() planSponsorshipType?: PlanSponsorshipType;
   @Input() currentPlan: PlanResponse;
 
   selectedFile: File;
@@ -682,11 +688,6 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
   }
 
   private refreshSalesTax(): void {
-    if (this.formGroup.controls.plan.value == PlanType.Free) {
-      this.estimatedTax = 0;
-      return;
-    }
-
     if (!this.taxComponent.validate()) {
       return;
     }
@@ -696,6 +697,7 @@ export class OrganizationPlansComponent implements OnInit, OnDestroy {
       passwordManager: {
         additionalStorage: this.formGroup.controls.additionalStorage.value,
         plan: this.formGroup.controls.plan.value,
+        sponsoredPlan: this.planSponsorshipType,
         seats: this.formGroup.controls.additionalSeats.value,
       },
       taxInformation: {
diff --git a/libs/common/src/billing/models/request/preview-organization-invoice.request.ts b/libs/common/src/billing/models/request/preview-organization-invoice.request.ts
index 40d8db03d3b..bfeecb4eb23 100644
--- a/libs/common/src/billing/models/request/preview-organization-invoice.request.ts
+++ b/libs/common/src/billing/models/request/preview-organization-invoice.request.ts
@@ -1,4 +1,4 @@
-import { PlanType } from "../../enums";
+import { PlanSponsorshipType, PlanType } from "../../enums";
 
 export class PreviewOrganizationInvoiceRequest {
   organizationId?: string;
@@ -21,6 +21,7 @@ export class PreviewOrganizationInvoiceRequest {
 
 class PasswordManager {
   plan: PlanType;
+  sponsoredPlan?: PlanSponsorshipType;
   seats: number;
   additionalStorage: number;
 

From 5af12505f1f97d172d6a7c44a9557b062c406221 Mon Sep 17 00:00:00 2001
From: Justin Baur <19896123+justindbaur@users.noreply.github.com>
Date: Thu, 17 Apr 2025 16:01:02 -0400
Subject: [PATCH 30/36] Switch userVisibleOnly to `false` (#14202)

---
 .../notifications/internal/worker-webpush-connection.service.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/common/src/platform/notifications/internal/worker-webpush-connection.service.ts b/libs/common/src/platform/notifications/internal/worker-webpush-connection.service.ts
index 74981b6782f..a1143d14d1d 100644
--- a/libs/common/src/platform/notifications/internal/worker-webpush-connection.service.ts
+++ b/libs/common/src/platform/notifications/internal/worker-webpush-connection.service.ts
@@ -134,7 +134,7 @@ class MyWebPushConnector implements WebPushConnector {
 
   private async pushManagerSubscribe(key: string) {
     return await this.serviceWorkerRegistration.pushManager.subscribe({
-      userVisibleOnly: true,
+      userVisibleOnly: false,
       applicationServerKey: key,
     });
   }

From 7bf4bae7c6d693c8d438aaa082e28a147be85e1f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anders=20=C3=85berg?= <anders@andersaberg.com>
Date: Fri, 18 Apr 2025 10:43:22 +0200
Subject: [PATCH 31/36] Revert event-driven .show, in order for
 bootstrap/hide-to-tray to work (#14181)

---
 apps/desktop/src/main/window.main.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/apps/desktop/src/main/window.main.ts b/apps/desktop/src/main/window.main.ts
index 73231f1f730..1c396b09b21 100644
--- a/apps/desktop/src/main/window.main.ts
+++ b/apps/desktop/src/main/window.main.ts
@@ -292,11 +292,7 @@ export class WindowMain {
       this.win.maximize();
     }
 
-    // Show it later since it might need to be maximized.
-    // use once event to avoid flash on unstyled content.
-    this.win.once("ready-to-show", () => {
-      this.win.show();
-    });
+    this.win.show();
 
     if (template === "full-app") {
       // and load the index.html of the app.

From d6beca569c4e80bd1657f5e0aca3a9f18ad697c2 Mon Sep 17 00:00:00 2001
From: Vijay Oommen <voommen@livefront.com>
Date: Fri, 18 Apr 2025 08:45:05 -0500
Subject: [PATCH 32/36] [PM-19810] Member Access Report - CSV export fix
 (#14313)

---
 .../services/member-access-report.mock.ts     | 38 +++++++++++++++++++
 .../member-access-report.service.spec.ts      | 34 ++++++++++++++++-
 .../services/member-access-report.service.ts  | 20 ++++++++++
 3 files changed, 91 insertions(+), 1 deletion(-)

diff --git a/bitwarden_license/bit-web/src/app/tools/reports/member-access-report/services/member-access-report.mock.ts b/bitwarden_license/bit-web/src/app/tools/reports/member-access-report/services/member-access-report.mock.ts
index 9ace555dd2e..b07e4946ca7 100644
--- a/bitwarden_license/bit-web/src/app/tools/reports/member-access-report/services/member-access-report.mock.ts
+++ b/bitwarden_license/bit-web/src/app/tools/reports/member-access-report/services/member-access-report.mock.ts
@@ -229,3 +229,41 @@ export const memberAccessReportsMock: MemberAccessResponse[] = [
     ],
   } as MemberAccessResponse,
 ];
+
+export const memberAccessWithoutAccessDetailsReportsMock: MemberAccessResponse[] = [
+  {
+    userName: "Alice Smith",
+    email: "asmith@email.com",
+    twoFactorEnabled: true,
+    accountRecoveryEnabled: true,
+    groupsCount: 2,
+    collectionsCount: 4,
+    totalItemCount: 20,
+    userGuid: "1234",
+    usesKeyConnector: false,
+    accessDetails: [
+      {
+        groupId: "",
+        collectionId: "c1",
+        collectionName: new EncString("Collection 1"),
+        groupName: "Alice Group 1",
+        itemCount: 10,
+        readOnly: false,
+        hidePasswords: false,
+        manage: false,
+      } as MemberAccessDetails,
+    ],
+  } as MemberAccessResponse,
+  {
+    userName: "Robert Brown",
+    email: "rbrown@email.com",
+    twoFactorEnabled: false,
+    accountRecoveryEnabled: false,
+    groupsCount: 2,
+    collectionsCount: 4,
+    totalItemCount: 20,
+    userGuid: "5678",
+    usesKeyConnector: false,
+    accessDetails: [] as MemberAccessDetails[],
+  } as MemberAccessResponse,
+];
diff --git a/bitwarden_license/bit-web/src/app/tools/reports/member-access-report/services/member-access-report.service.spec.ts b/bitwarden_license/bit-web/src/app/tools/reports/member-access-report/services/member-access-report.service.spec.ts
index 7d6beca48ec..e6efac83616 100644
--- a/bitwarden_license/bit-web/src/app/tools/reports/member-access-report/services/member-access-report.service.spec.ts
+++ b/bitwarden_license/bit-web/src/app/tools/reports/member-access-report/services/member-access-report.service.spec.ts
@@ -4,7 +4,10 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { OrganizationId } from "@bitwarden/common/types/guid";
 
 import { MemberAccessReportApiService } from "./member-access-report-api.service";
-import { memberAccessReportsMock } from "./member-access-report.mock";
+import {
+  memberAccessReportsMock,
+  memberAccessWithoutAccessDetailsReportsMock,
+} from "./member-access-report.mock";
 import { MemberAccessReportService } from "./member-access-report.service";
 describe("ImportService", () => {
   const mockOrganizationId = "mockOrgId" as OrganizationId;
@@ -112,5 +115,34 @@ describe("ImportService", () => {
         ]),
       );
     });
+
+    it("should generate user report export items and include users with no access", async () => {
+      reportApiService.getMemberAccessData.mockImplementation(() =>
+        Promise.resolve(memberAccessWithoutAccessDetailsReportsMock),
+      );
+      const result =
+        await memberAccessReportService.generateUserReportExportItems(mockOrganizationId);
+
+      expect(result).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            email: "asmith@email.com",
+            name: "Alice Smith",
+            twoStepLogin: "memberAccessReportTwoFactorEnabledTrue",
+            accountRecovery: "memberAccessReportAuthenticationEnabledTrue",
+            group: "Alice Group 1",
+            totalItems: "10",
+          }),
+          expect.objectContaining({
+            email: "rbrown@email.com",
+            name: "Robert Brown",
+            twoStepLogin: "memberAccessReportTwoFactorEnabledFalse",
+            accountRecovery: "memberAccessReportAuthenticationEnabledFalse",
+            group: "memberAccessReportNoGroup",
+            totalItems: "0",
+          }),
+        ]),
+      );
+    });
   });
 });
diff --git a/bitwarden_license/bit-web/src/app/tools/reports/member-access-report/services/member-access-report.service.ts b/bitwarden_license/bit-web/src/app/tools/reports/member-access-report/services/member-access-report.service.ts
index b7ff5551e2c..029dce8a404 100644
--- a/bitwarden_license/bit-web/src/app/tools/reports/member-access-report/services/member-access-report.service.ts
+++ b/bitwarden_license/bit-web/src/app/tools/reports/member-access-report/services/member-access-report.service.ts
@@ -65,6 +65,26 @@ export class MemberAccessReportService {
     }
 
     const exportItems = memberAccessReports.flatMap((report) => {
+      // to include users without access details
+      // which means a user has no groups, collections or items
+      if (report.accessDetails.length === 0) {
+        return [
+          {
+            email: report.email,
+            name: report.userName,
+            twoStepLogin: report.twoFactorEnabled
+              ? this.i18nService.t("memberAccessReportTwoFactorEnabledTrue")
+              : this.i18nService.t("memberAccessReportTwoFactorEnabledFalse"),
+            accountRecovery: report.accountRecoveryEnabled
+              ? this.i18nService.t("memberAccessReportAuthenticationEnabledTrue")
+              : this.i18nService.t("memberAccessReportAuthenticationEnabledFalse"),
+            group: this.i18nService.t("memberAccessReportNoGroup"),
+            collection: this.i18nService.t("memberAccessReportNoCollection"),
+            collectionPermission: this.i18nService.t("memberAccessReportNoCollectionPermission"),
+            totalItems: "0",
+          },
+        ];
+      }
       const userDetails = report.accessDetails.map((detail) => {
         const collectionName = collectionNameMap.get(detail.collectionName.encryptedString);
         return {

From 9d16435d0858d40783ff8bc5494f27314cf00a0f Mon Sep 17 00:00:00 2001
From: Jared Snider <116684653+JaredSnider-Bitwarden@users.noreply.github.com>
Date: Fri, 18 Apr 2025 09:52:12 -0400
Subject: [PATCH 33/36] docs(ViewModel): Add JSDocs to view to explain proper
 use (#14214)

---
 libs/common/src/models/view/view.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/libs/common/src/models/view/view.ts b/libs/common/src/models/view/view.ts
index 1f16b3d5958..2869617dca5 100644
--- a/libs/common/src/models/view/view.ts
+++ b/libs/common/src/models/view/view.ts
@@ -1 +1,5 @@
+// See https://contributing.bitwarden.com/architecture/clients/data-model/#view for proper use.
+// View models represent the decrypted state of a corresponding Domain model.
+// They typically match the Domain model but contains a decrypted string for any EncString fields.
+// Don't use this to represent arbitrary component view data as that isn't what it is for.
 export class View {}

From e026799071e39219f600c8e1fca9fa024b4be844 Mon Sep 17 00:00:00 2001
From: Jonas Hendrickx <jhendrickx@bitwarden.com>
Date: Fri, 18 Apr 2025 15:57:27 +0200
Subject: [PATCH 34/36] [PM-13128] Enable Breadcrumb Policies (#13584)

* [PM-13128] Enable Breadcrumb Policies

* [PM-13128] Enable Breadcrumb Policies

* [PM-13128] wip

* [PM-13128] wip

* [PM-13128] wip

* [PM-13128] wip

* remove dead code

* wip

* wip

* wip

* refactor

* Fix for providers

* revert to functional auth guard

* change prerequisite to info variant

* address comment

* r

* r

* r

* tests

* r

* r

* fix tests

* feedback

* fix tests

* fix tests

* Rename upselling to breadcrumbing

* Address feedback

* Fix build & tests

* Make the guard callback use Observable instead of a promise

* Pm 13128 suggestions (#14041)

* Rename new enum value

* Show the upgrade button when breadcrumbing is enabled

* Show mouse pointer when cursor is hovered above badge

* Do not make the dialogs overlap

* Align badge middle

* Gap

* Badge should be a `button` instead of `span`

* missing button@type

---------

Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>
Co-authored-by: Alex Morask <amorask@bitwarden.com>
---
 .../guards/org-permissions.guard.spec.ts      |  30 +++-
 .../guards/org-permissions.guard.ts           |  26 ++-
 .../organization-layout.component.html        |   2 +-
 .../layouts/organization-layout.component.ts  |  15 ++
 .../policies/policies.component.html          |  15 +-
 .../policies/policies.component.ts            |  61 +++++--
 .../policies/policy-edit.component.html       |  18 +++
 .../policies/policy-edit.component.ts         |  33 +++-
 .../organization-settings-routing.module.ts   |  13 +-
 .../layouts/header/web-header.component.html  |   2 +-
 .../src/services/jslib-services.module.ts     |   1 +
 .../organization-billing.service.ts           |   9 ++
 .../organization-billing.service.spec.ts      | 149 ++++++++++++++++++
 .../services/organization-billing.service.ts  |  33 +++-
 14 files changed, 380 insertions(+), 27 deletions(-)
 create mode 100644 libs/common/src/billing/services/organization-billing.service.spec.ts

diff --git a/apps/web/src/app/admin-console/organizations/guards/org-permissions.guard.spec.ts b/apps/web/src/app/admin-console/organizations/guards/org-permissions.guard.spec.ts
index 9afd34ca149..d628e23063f 100644
--- a/apps/web/src/app/admin-console/organizations/guards/org-permissions.guard.spec.ts
+++ b/apps/web/src/app/admin-console/organizations/guards/org-permissions.guard.spec.ts
@@ -100,20 +100,44 @@ describe("Organization Permissions Guard", () => {
 
     it("permits navigation if the user has permissions", async () => {
       const permissionsCallback = jest.fn();
-      permissionsCallback.mockImplementation((_org) => true);
+      permissionsCallback.mockReturnValue(true);
 
       const actual = await TestBed.runInInjectionContext(
         async () => await organizationPermissionsGuard(permissionsCallback)(route, state),
       );
 
-      expect(permissionsCallback).toHaveBeenCalledWith(orgFactory({ id: targetOrgId }));
+      expect(permissionsCallback).toHaveBeenCalledTimes(1);
+      expect(actual).toBe(true);
+    });
+
+    it("handles a Promise returned from the callback", async () => {
+      const permissionsCallback = jest.fn();
+      permissionsCallback.mockReturnValue(Promise.resolve(true));
+
+      const actual = await TestBed.runInInjectionContext(() =>
+        organizationPermissionsGuard(permissionsCallback)(route, state),
+      );
+
+      expect(permissionsCallback).toHaveBeenCalledTimes(1);
+      expect(actual).toBe(true);
+    });
+
+    it("handles an Observable returned from the callback", async () => {
+      const permissionsCallback = jest.fn();
+      permissionsCallback.mockReturnValue(of(true));
+
+      const actual = await TestBed.runInInjectionContext(() =>
+        organizationPermissionsGuard(permissionsCallback)(route, state),
+      );
+
+      expect(permissionsCallback).toHaveBeenCalledTimes(1);
       expect(actual).toBe(true);
     });
 
     describe("if the user does not have permissions", () => {
       it("and there is no Item ID, block navigation", async () => {
         const permissionsCallback = jest.fn();
-        permissionsCallback.mockImplementation((_org) => false);
+        permissionsCallback.mockReturnValue(false);
 
         state = mock<RouterStateSnapshot>({
           root: mock<ActivatedRouteSnapshot>({
diff --git a/apps/web/src/app/admin-console/organizations/guards/org-permissions.guard.ts b/apps/web/src/app/admin-console/organizations/guards/org-permissions.guard.ts
index d399f9c9c05..6c9090a27b4 100644
--- a/apps/web/src/app/admin-console/organizations/guards/org-permissions.guard.ts
+++ b/apps/web/src/app/admin-console/organizations/guards/org-permissions.guard.ts
@@ -1,13 +1,13 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
-import { inject } from "@angular/core";
+import { EnvironmentInjector, inject, runInInjectionContext } from "@angular/core";
 import {
   ActivatedRouteSnapshot,
   CanActivateFn,
   Router,
   RouterStateSnapshot,
 } from "@angular/router";
-import { firstValueFrom, switchMap } from "rxjs";
+import { firstValueFrom, isObservable, Observable, switchMap } from "rxjs";
 
 import {
   canAccessOrgAdmin,
@@ -42,7 +42,9 @@ import { ToastService } from "@bitwarden/components";
  *    proceeds as expected.
  */
 export function organizationPermissionsGuard(
-  permissionsCallback?: (organization: Organization) => boolean,
+  permissionsCallback?: (
+    organization: Organization,
+  ) => boolean | Promise<boolean> | Observable<boolean>,
 ): CanActivateFn {
   return async (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
     const router = inject(Router);
@@ -51,6 +53,7 @@ export function organizationPermissionsGuard(
     const i18nService = inject(I18nService);
     const syncService = inject(SyncService);
     const accountService = inject(AccountService);
+    const environmentInjector = inject(EnvironmentInjector);
 
     // TODO: We need to fix issue once and for all.
     if ((await syncService.getLastSync()) == null) {
@@ -78,7 +81,22 @@ export function organizationPermissionsGuard(
       return router.createUrlTree(["/"]);
     }
 
-    const hasPermissions = permissionsCallback == null || permissionsCallback(org);
+    if (permissionsCallback == null) {
+      // No additional permission checks required, allow navigation
+      return true;
+    }
+
+    const callbackResult = runInInjectionContext(environmentInjector, () =>
+      permissionsCallback(org),
+    );
+
+    const hasPermissions = isObservable(callbackResult)
+      ? await firstValueFrom(callbackResult) // handles observables
+      : await Promise.resolve(callbackResult); // handles promises and boolean values
+
+    if (hasPermissions !== true && hasPermissions !== false) {
+      throw new Error("Permission callback did not resolve to a boolean.");
+    }
 
     if (!hasPermissions) {
       // Handle linkable ciphers for organizations the user only has view access to
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 e50c55e83d2..fec790dabcb 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
@@ -97,7 +97,7 @@
       <bit-nav-item
         [text]="'policies' | i18n"
         route="settings/policies"
-        *ngIf="organization.canManagePolicies"
+        *ngIf="canShowPoliciesTab$ | async"
       ></bit-nav-item>
       <bit-nav-item
         [text]="'twoStepLogin' | i18n"
diff --git a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts
index d0b82d27722..ec67a17bce9 100644
--- a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts
+++ b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts
@@ -22,6 +22,7 @@ import { PolicyType, ProviderStatusType } from "@bitwarden/common/admin-console/
 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 { OrganizationBillingServiceAbstraction } from "@bitwarden/common/billing/abstractions";
 import { ProductTierType } from "@bitwarden/common/billing/enums";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
@@ -68,6 +69,7 @@ export class OrganizationLayoutComponent implements OnInit {
   showAccountDeprovisioningBanner$: Observable<boolean>;
   protected isBreadcrumbEventLogsEnabled$: Observable<boolean>;
   protected showSponsoredFamiliesDropdown$: Observable<boolean>;
+  protected canShowPoliciesTab$: Observable<boolean>;
 
   constructor(
     private route: ActivatedRoute,
@@ -79,6 +81,7 @@ export class OrganizationLayoutComponent implements OnInit {
     protected bannerService: AccountDeprovisioningBannerService,
     private accountService: AccountService,
     private freeFamiliesPolicyService: FreeFamiliesPolicyService,
+    private organizationBillingService: OrganizationBillingServiceAbstraction,
   ) {}
 
   async ngOnInit() {
@@ -148,6 +151,18 @@ export class OrganizationLayoutComponent implements OnInit {
     ))
       ? "claimedDomains"
       : "domainVerification";
+
+    this.canShowPoliciesTab$ = this.organization$.pipe(
+      switchMap((organization) =>
+        this.organizationBillingService
+          .isBreadcrumbingPoliciesEnabled$(organization)
+          .pipe(
+            map(
+              (isBreadcrumbingEnabled) => isBreadcrumbingEnabled || organization.canManagePolicies,
+            ),
+          ),
+      ),
+    );
   }
 
   canShowVaultTab(organization: Organization): boolean {
diff --git a/apps/web/src/app/admin-console/organizations/policies/policies.component.html b/apps/web/src/app/admin-console/organizations/policies/policies.component.html
index 24021bb765f..e40b9d80e9e 100644
--- a/apps/web/src/app/admin-console/organizations/policies/policies.component.html
+++ b/apps/web/src/app/admin-console/organizations/policies/policies.component.html
@@ -1,4 +1,17 @@
-<app-header></app-header>
+<app-header>
+  @let organization = organization$ | async;
+  <button
+    bitBadge
+    class="!tw-align-middle"
+    (click)="changePlan(organization)"
+    *ngIf="isBreadcrumbingEnabled$ | async"
+    slot="title-suffix"
+    type="button"
+    variant="primary"
+  >
+    {{ "upgrade" | i18n }}
+  </button>
+</app-header>
 
 <bit-container>
   <ng-container *ngIf="loading">
diff --git a/apps/web/src/app/admin-console/organizations/policies/policies.component.ts b/apps/web/src/app/admin-console/organizations/policies/policies.component.ts
index 52cb4da107a..2b86d76d9b1 100644
--- a/apps/web/src/app/admin-console/organizations/policies/policies.component.ts
+++ b/apps/web/src/app/admin-console/organizations/policies/policies.component.ts
@@ -2,8 +2,8 @@
 // @ts-strict-ignore
 import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
-import { firstValueFrom, lastValueFrom } from "rxjs";
-import { first, map } from "rxjs/operators";
+import { firstValueFrom, lastValueFrom, map, Observable, switchMap } from "rxjs";
+import { first } from "rxjs/operators";
 
 import {
   getOrganizationById,
@@ -14,10 +14,17 @@ import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { PolicyResponse } from "@bitwarden/common/admin-console/models/response/policy.response";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { OrganizationBillingServiceAbstraction } from "@bitwarden/common/billing/abstractions";
 import { DialogService } from "@bitwarden/components";
+import {
+  ChangePlanDialogResultType,
+  openChangePlanDialog,
+} from "@bitwarden/web-vault/app/billing/organizations/change-plan-dialog.component";
+import { All } from "@bitwarden/web-vault/app/vault/individual-vault/vault-filter/shared/models/routed-vault-filter.model";
 
 import { PolicyListService } from "../../core/policy-list.service";
 import { BasePolicy } from "../policies";
+import { CollectionDialogTabType } from "../shared/components/collection-dialog";
 
 import { PolicyEditComponent, PolicyEditDialogResult } from "./policy-edit.component";
 
@@ -32,17 +39,19 @@ export class PoliciesComponent implements OnInit {
   loading = true;
   organizationId: string;
   policies: BasePolicy[];
-  organization: Organization;
+  protected organization$: Observable<Organization>;
 
   private orgPolicies: PolicyResponse[];
   protected policiesEnabledMap: Map<PolicyType, boolean> = new Map<PolicyType, boolean>();
+  protected isBreadcrumbingEnabled$: Observable<boolean>;
 
   constructor(
     private route: ActivatedRoute,
-    private organizationService: OrganizationService,
     private accountService: AccountService,
+    private organizationService: OrganizationService,
     private policyApiService: PolicyApiServiceAbstraction,
     private policyListService: PolicyListService,
+    private organizationBillingService: OrganizationBillingServiceAbstraction,
     private dialogService: DialogService,
   ) {}
 
@@ -53,11 +62,9 @@ export class PoliciesComponent implements OnInit {
       const userId = await firstValueFrom(
         this.accountService.activeAccount$.pipe(map((a) => a?.id)),
       );
-      this.organization = await firstValueFrom(
-        this.organizationService
-          .organizations$(userId)
-          .pipe(getOrganizationById(this.organizationId)),
-      );
+      this.organization$ = this.organizationService
+        .organizations$(userId)
+        .pipe(getOrganizationById(this.organizationId));
       this.policies = this.policyListService.getPolicies();
 
       await this.load();
@@ -91,7 +98,11 @@ export class PoliciesComponent implements OnInit {
     this.orgPolicies.forEach((op) => {
       this.policiesEnabledMap.set(op.type, op.enabled);
     });
-
+    this.isBreadcrumbingEnabled$ = this.organization$.pipe(
+      switchMap((organization) =>
+        this.organizationBillingService.isBreadcrumbingPoliciesEnabled$(organization),
+      ),
+    );
     this.loading = false;
   }
 
@@ -104,8 +115,34 @@ export class PoliciesComponent implements OnInit {
     });
 
     const result = await lastValueFrom(dialogRef.closed);
-    if (result === PolicyEditDialogResult.Saved) {
-      await this.load();
+    switch (result) {
+      case PolicyEditDialogResult.Saved:
+        await this.load();
+        break;
+      case PolicyEditDialogResult.UpgradePlan:
+        await this.changePlan(await firstValueFrom(this.organization$));
+        break;
     }
   }
+
+  protected readonly CollectionDialogTabType = CollectionDialogTabType;
+  protected readonly All = All;
+
+  protected async changePlan(organization: Organization) {
+    const reference = openChangePlanDialog(this.dialogService, {
+      data: {
+        organizationId: organization.id,
+        subscription: null,
+        productTierType: organization.productTierType,
+      },
+    });
+
+    const result = await lastValueFrom(reference.closed);
+
+    if (result === ChangePlanDialogResultType.Closed) {
+      return;
+    }
+
+    await this.load();
+  }
 }
diff --git a/apps/web/src/app/admin-console/organizations/policies/policy-edit.component.html b/apps/web/src/app/admin-console/organizations/policies/policy-edit.component.html
index 671083a2318..7f33f08f888 100644
--- a/apps/web/src/app/admin-console/organizations/policies/policy-edit.component.html
+++ b/apps/web/src/app/admin-console/organizations/policies/policy-edit.component.html
@@ -1,5 +1,17 @@
 <form [formGroup]="formGroup" [bitSubmit]="submit">
   <bit-dialog [loading]="loading" [title]="'editPolicy' | i18n" [subtitle]="policy.name | i18n">
+    <ng-container bitDialogTitle>
+      <button
+        bitBadge
+        class="!tw-align-middle"
+        (click)="upgradePlan()"
+        *ngIf="isBreadcrumbingEnabled$ | async"
+        type="button"
+        variant="primary"
+      >
+        {{ "planNameEnterprise" | i18n }}
+      </button>
+    </ng-container>
     <ng-container bitDialogContent>
       <div *ngIf="loading">
         <i
@@ -16,6 +28,7 @@
     </ng-container>
     <ng-container bitDialogFooter>
       <button
+        *ngIf="!(isBreadcrumbingEnabled$ | async); else breadcrumbing"
         bitButton
         buttonType="primary"
         [disabled]="saveDisabled$ | async"
@@ -24,6 +37,11 @@
       >
         {{ "save" | i18n }}
       </button>
+      <ng-template #breadcrumbing>
+        <button bitButton buttonType="primary" bitFormButton type="button" (click)="upgradePlan()">
+          {{ "upgrade" | i18n }}
+        </button>
+      </ng-template>
       <button bitButton buttonType="secondary" bitDialogClose type="button">
         {{ "cancel" | i18n }}
       </button>
diff --git a/apps/web/src/app/admin-console/organizations/policies/policy-edit.component.ts b/apps/web/src/app/admin-console/organizations/policies/policy-edit.component.ts
index f33460e8c16..49f4d15a100 100644
--- a/apps/web/src/app/admin-console/organizations/policies/policy-edit.component.ts
+++ b/apps/web/src/app/admin-console/organizations/policies/policy-edit.component.ts
@@ -9,12 +9,20 @@ import {
   ViewContainerRef,
 } from "@angular/core";
 import { FormBuilder } from "@angular/forms";
-import { Observable, map } from "rxjs";
+import { map, Observable, switchMap } from "rxjs";
 
+import {
+  getOrganizationById,
+  OrganizationService,
+} from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { PolicyApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/policy/policy-api.service.abstraction";
 import { PolicyType } from "@bitwarden/common/admin-console/enums";
+import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { PolicyRequest } from "@bitwarden/common/admin-console/models/request/policy.request";
 import { PolicyResponse } from "@bitwarden/common/admin-console/models/response/policy.response";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { getUserId } from "@bitwarden/common/auth/services/account.service";
+import { OrganizationBillingServiceAbstraction } from "@bitwarden/common/billing/abstractions";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import {
   DIALOG_DATA,
@@ -35,6 +43,7 @@ export type PolicyEditDialogData = {
 
 export enum PolicyEditDialogResult {
   Saved = "saved",
+  UpgradePlan = "upgrade-plan",
 }
 @Component({
   selector: "app-policy-edit",
@@ -48,22 +57,28 @@ export class PolicyEditComponent implements AfterViewInit {
   loading = true;
   enabled = false;
   saveDisabled$: Observable<boolean>;
-  defaultTypes: any[];
   policyComponent: BasePolicyComponent;
 
   private policyResponse: PolicyResponse;
   formGroup = this.formBuilder.group({
     enabled: [this.enabled],
   });
+  protected organization$: Observable<Organization>;
+  protected isBreadcrumbingEnabled$: Observable<boolean>;
+
   constructor(
     @Inject(DIALOG_DATA) protected data: PolicyEditDialogData,
+    private accountService: AccountService,
     private policyApiService: PolicyApiServiceAbstraction,
+    private organizationService: OrganizationService,
     private i18nService: I18nService,
     private cdr: ChangeDetectorRef,
     private formBuilder: FormBuilder,
     private dialogRef: DialogRef<PolicyEditDialogResult>,
     private toastService: ToastService,
+    private organizationBillingService: OrganizationBillingServiceAbstraction,
   ) {}
+
   get policy(): BasePolicy {
     return this.data.policy;
   }
@@ -97,6 +112,16 @@ export class PolicyEditComponent implements AfterViewInit {
         throw e;
       }
     }
+    this.organization$ = this.accountService.activeAccount$.pipe(
+      getUserId,
+      switchMap((userId) => this.organizationService.organizations$(userId)),
+      getOrganizationById(this.data.organizationId),
+    );
+    this.isBreadcrumbingEnabled$ = this.organization$.pipe(
+      switchMap((organization) =>
+        this.organizationBillingService.isBreadcrumbingPoliciesEnabled$(organization),
+      ),
+    );
   }
 
   submit = async () => {
@@ -119,4 +144,8 @@ export class PolicyEditComponent implements AfterViewInit {
   static open = (dialogService: DialogService, config: DialogConfig<PolicyEditDialogData>) => {
     return dialogService.open<PolicyEditDialogResult>(PolicyEditComponent, config);
   };
+
+  protected upgradePlan(): void {
+    this.dialogRef.close(PolicyEditDialogResult.UpgradePlan);
+  }
 }
diff --git a/apps/web/src/app/admin-console/organizations/settings/organization-settings-routing.module.ts b/apps/web/src/app/admin-console/organizations/settings/organization-settings-routing.module.ts
index a644086628c..cfec0be531b 100644
--- a/apps/web/src/app/admin-console/organizations/settings/organization-settings-routing.module.ts
+++ b/apps/web/src/app/admin-console/organizations/settings/organization-settings-routing.module.ts
@@ -1,8 +1,10 @@
-import { NgModule } from "@angular/core";
+import { NgModule, inject } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
+import { map } from "rxjs";
 
 import { canAccessSettingsTab } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
+import { OrganizationBillingServiceAbstraction } from "@bitwarden/common/billing/abstractions";
 
 import { organizationPermissionsGuard } from "../../organizations/guards/org-permissions.guard";
 import { organizationRedirectGuard } from "../../organizations/guards/org-redirect.guard";
@@ -41,7 +43,14 @@ const routes: Routes = [
       {
         path: "policies",
         component: PoliciesComponent,
-        canActivate: [organizationPermissionsGuard((org) => org.canManagePolicies)],
+        canActivate: [
+          organizationPermissionsGuard((o: Organization) => {
+            const organizationBillingService = inject(OrganizationBillingServiceAbstraction);
+            return organizationBillingService
+              .isBreadcrumbingPoliciesEnabled$(o)
+              .pipe(map((isBreadcrumbingEnabled) => o.canManagePolicies || isBreadcrumbingEnabled));
+          }),
+        ],
         data: {
           titleId: "policies",
         },
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 28d786f2d64..4b0da4ae569 100644
--- a/apps/web/src/app/layouts/header/web-header.component.html
+++ b/apps/web/src/app/layouts/header/web-header.component.html
@@ -12,7 +12,7 @@
       <h1
         bitTypography="h1"
         noMargin
-        class="tw-m-0 tw-mr-2 tw-leading-10 tw-flex"
+        class="tw-m-0 tw-mr-2 tw-leading-10 tw-flex tw-gap-1"
         [title]="title || (routeData.titleId | i18n)"
       >
         <div class="tw-truncate">
diff --git a/libs/angular/src/services/jslib-services.module.ts b/libs/angular/src/services/jslib-services.module.ts
index 3cce9b5357e..8e2b3409593 100644
--- a/libs/angular/src/services/jslib-services.module.ts
+++ b/libs/angular/src/services/jslib-services.module.ts
@@ -1255,6 +1255,7 @@ const safeProviders: SafeProvider[] = [
       I18nServiceAbstraction,
       OrganizationApiServiceAbstraction,
       SyncService,
+      ConfigService,
     ],
   }),
   safeProvider({
diff --git a/libs/common/src/billing/abstractions/organization-billing.service.ts b/libs/common/src/billing/abstractions/organization-billing.service.ts
index 69309014fac..8024a120b0a 100644
--- a/libs/common/src/billing/abstractions/organization-billing.service.ts
+++ b/libs/common/src/billing/abstractions/organization-billing.service.ts
@@ -1,5 +1,8 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
+import { Observable } from "rxjs";
+
+import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 
 import { OrganizationResponse } from "../../admin-console/models/response/organization.response";
 import { InitiationPath } from "../../models/request/reference-event.request";
@@ -59,4 +62,10 @@ export abstract class OrganizationBillingServiceAbstraction {
     organizationId: string,
     subscription: SubscriptionInformation,
   ) => Promise<void>;
+
+  /**
+   * Determines if breadcrumbing policies is enabled for the organizations meeting certain criteria.
+   * @param organization
+   */
+  abstract isBreadcrumbingPoliciesEnabled$(organization: Organization): Observable<boolean>;
 }
diff --git a/libs/common/src/billing/services/organization-billing.service.spec.ts b/libs/common/src/billing/services/organization-billing.service.spec.ts
new file mode 100644
index 00000000000..7b194dff637
--- /dev/null
+++ b/libs/common/src/billing/services/organization-billing.service.spec.ts
@@ -0,0 +1,149 @@
+import { mock } from "jest-mock-extended";
+import { firstValueFrom, of } from "rxjs";
+
+import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import { OrganizationApiServiceAbstraction as OrganizationApiService } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
+import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
+import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions";
+import { ProductTierType } from "@bitwarden/common/billing/enums";
+import { OrganizationBillingService } from "@bitwarden/common/billing/services/organization-billing.service";
+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";
+import { SyncService } from "@bitwarden/common/platform/sync";
+import { KeyService } from "@bitwarden/key-management";
+
+describe("BillingAccountProfileStateService", () => {
+  let apiService: jest.Mocked<ApiService>;
+  let billingApiService: jest.Mocked<BillingApiServiceAbstraction>;
+  let keyService: jest.Mocked<KeyService>;
+  let encryptService: jest.Mocked<EncryptService>;
+  let i18nService: jest.Mocked<I18nService>;
+  let organizationApiService: jest.Mocked<OrganizationApiService>;
+  let syncService: jest.Mocked<SyncService>;
+  let configService: jest.Mocked<ConfigService>;
+
+  let sut: OrganizationBillingService;
+
+  beforeEach(() => {
+    apiService = mock<ApiService>();
+    billingApiService = mock<BillingApiServiceAbstraction>();
+    keyService = mock<KeyService>();
+    encryptService = mock<EncryptService>();
+    i18nService = mock<I18nService>();
+    organizationApiService = mock<OrganizationApiService>();
+    syncService = mock<SyncService>();
+    configService = mock<ConfigService>();
+
+    sut = new OrganizationBillingService(
+      apiService,
+      billingApiService,
+      keyService,
+      encryptService,
+      i18nService,
+      organizationApiService,
+      syncService,
+      configService,
+    );
+  });
+
+  afterEach(() => {
+    return jest.resetAllMocks();
+  });
+
+  describe("isBreadcrumbingPoliciesEnabled", () => {
+    it("returns false when feature flag is disabled", async () => {
+      configService.getFeatureFlag$.mockReturnValue(of(false));
+      const org = {
+        isProviderUser: false,
+        canEditSubscription: true,
+        productTierType: ProductTierType.Teams,
+      } as Organization;
+
+      const actual = await firstValueFrom(sut.isBreadcrumbingPoliciesEnabled$(org));
+      expect(actual).toBe(false);
+      expect(configService.getFeatureFlag$).toHaveBeenCalledWith(
+        FeatureFlag.PM12276_BreadcrumbEventLogs,
+      );
+    });
+
+    it("returns false when organization belongs to a provider", async () => {
+      configService.getFeatureFlag$.mockReturnValue(of(true));
+      const org = {
+        isProviderUser: true,
+        canEditSubscription: true,
+        productTierType: ProductTierType.Teams,
+      } as Organization;
+
+      const actual = await firstValueFrom(sut.isBreadcrumbingPoliciesEnabled$(org));
+      expect(actual).toBe(false);
+    });
+
+    it("returns false when cannot edit subscription", async () => {
+      configService.getFeatureFlag$.mockReturnValue(of(true));
+      const org = {
+        isProviderUser: false,
+        canEditSubscription: false,
+        productTierType: ProductTierType.Teams,
+      } as Organization;
+
+      const actual = await firstValueFrom(sut.isBreadcrumbingPoliciesEnabled$(org));
+      expect(actual).toBe(false);
+    });
+
+    it.each([
+      ["Teams", ProductTierType.Teams],
+      ["TeamsStarter", ProductTierType.TeamsStarter],
+    ])("returns true when all conditions are met with %s tier", async (_, productTierType) => {
+      configService.getFeatureFlag$.mockReturnValue(of(true));
+      const org = {
+        isProviderUser: false,
+        canEditSubscription: true,
+        productTierType: productTierType,
+      } as Organization;
+
+      const actual = await firstValueFrom(sut.isBreadcrumbingPoliciesEnabled$(org));
+      expect(actual).toBe(true);
+      expect(configService.getFeatureFlag$).toHaveBeenCalledWith(
+        FeatureFlag.PM12276_BreadcrumbEventLogs,
+      );
+    });
+
+    it("returns false when product tier is not supported", async () => {
+      configService.getFeatureFlag$.mockReturnValue(of(true));
+      const org = {
+        isProviderUser: false,
+        canEditSubscription: true,
+        productTierType: ProductTierType.Enterprise,
+      } as Organization;
+
+      const actual = await firstValueFrom(sut.isBreadcrumbingPoliciesEnabled$(org));
+      expect(actual).toBe(false);
+    });
+
+    it("handles all conditions false correctly", async () => {
+      configService.getFeatureFlag$.mockReturnValue(of(false));
+      const org = {
+        isProviderUser: true,
+        canEditSubscription: false,
+        productTierType: ProductTierType.Free,
+      } as Organization;
+
+      const actual = await firstValueFrom(sut.isBreadcrumbingPoliciesEnabled$(org));
+      expect(actual).toBe(false);
+    });
+
+    it("verifies feature flag is only called once", async () => {
+      configService.getFeatureFlag$.mockReturnValue(of(false));
+      const org = {
+        isProviderUser: false,
+        canEditSubscription: true,
+        productTierType: ProductTierType.Teams,
+      } as Organization;
+
+      await firstValueFrom(sut.isBreadcrumbingPoliciesEnabled$(org));
+      expect(configService.getFeatureFlag$).toHaveBeenCalledTimes(1);
+    });
+  });
+});
diff --git a/libs/common/src/billing/services/organization-billing.service.ts b/libs/common/src/billing/services/organization-billing.service.ts
index 83efbf0a30c..6622cdcdce3 100644
--- a/libs/common/src/billing/services/organization-billing.service.ts
+++ b/libs/common/src/billing/services/organization-billing.service.ts
@@ -1,5 +1,10 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
+import { Observable, of, switchMap } from "rxjs";
+
+import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { KeyService } from "@bitwarden/key-management";
 
 import { ApiService } from "../../abstractions/api.service";
@@ -20,7 +25,7 @@ import {
   PlanInformation,
   SubscriptionInformation,
 } from "../abstractions";
-import { PlanType } from "../enums";
+import { PlanType, ProductTierType } from "../enums";
 import { OrganizationNoPaymentMethodCreateRequest } from "../models/request/organization-no-payment-method-create-request";
 import { PaymentSourceResponse } from "../models/response/payment-source.response";
 
@@ -40,6 +45,7 @@ export class OrganizationBillingService implements OrganizationBillingServiceAbs
     private i18nService: I18nService,
     private organizationApiService: OrganizationApiService,
     private syncService: SyncService,
+    private configService: ConfigService,
   ) {}
 
   async getPaymentSource(organizationId: string): Promise<PaymentSourceResponse> {
@@ -220,4 +226,29 @@ export class OrganizationBillingService implements OrganizationBillingServiceAbs
     this.setPaymentInformation(request, subscription.payment);
     await this.billingApiService.restartSubscription(organizationId, request);
   }
+
+  isBreadcrumbingPoliciesEnabled$(organization: Organization): Observable<boolean> {
+    if (organization === null || organization === undefined) {
+      return of(false);
+    }
+
+    return this.configService.getFeatureFlag$(FeatureFlag.PM12276_BreadcrumbEventLogs).pipe(
+      switchMap((featureFlagEnabled) => {
+        if (!featureFlagEnabled) {
+          return of(false);
+        }
+
+        if (organization.isProviderUser || !organization.canEditSubscription) {
+          return of(false);
+        }
+
+        const supportedProducts = [ProductTierType.Teams, ProductTierType.TeamsStarter];
+        const isSupportedProduct = supportedProducts.some(
+          (product) => product === organization.productTierType,
+        );
+
+        return of(isSupportedProduct);
+      }),
+    );
+  }
 }

From cbab354c0eaecc461c33f6d616fcc212b519bca2 Mon Sep 17 00:00:00 2001
From: Bryan Cunningham <bcunningham@bitwarden.com>
Date: Fri, 18 Apr 2025 10:38:19 -0400
Subject: [PATCH 35/36] Hide bit-icon component from screen readers by default
 (#14295)

* adds aria-hidden to bit-icon when no aria-label provided

* add ariaLabel to logo svg usages

* add ariaLabel documentation

* default ariaLable value to undefined

* add logo label to translations

* adds i18n pipe to component

* Add binding to example docs
---
 apps/browser/src/_locales/en/messages.json         |  3 +++
 .../extension-anon-layout-wrapper.component.html   |  7 ++++++-
 .../extension-anon-layout-wrapper.component.ts     |  2 ++
 .../accept-family-sponsorship.component.html       |  3 ++-
 apps/web/src/locales/en/messages.json              |  3 +++
 .../manage/accept-provider.component.html          |  6 +++++-
 .../providers/setup/setup-provider.component.html  |  6 +++++-
 .../setup/setup-business-unit.component.html       |  6 +++++-
 .../angular/anon-layout/anon-layout.component.html |  2 +-
 libs/components/src/icon/icon.component.ts         | 14 +++++++++-----
 libs/components/src/icon/icon.mdx                  | 10 ++++++++++
 libs/components/src/icon/icon.stories.ts           |  4 ++++
 12 files changed, 55 insertions(+), 11 deletions(-)

diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
index 87b94650b51..b0f3fb5d19e 100644
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -2,6 +2,9 @@
   "appName": {
     "message": "Bitwarden"
   },
+  "appLogoLabel": {
+    "message": "Bitwarden logo"
+  },
   "extName": {
     "message": "Bitwarden Password Manager",
     "description": "Extension name, MUST be less than 40 characters (Safari restriction)"
diff --git a/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.html b/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.html
index 54cb5203a87..bd2886dacf0 100644
--- a/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.html
+++ b/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.html
@@ -5,7 +5,12 @@
     [showBackButton]="showBackButton"
     [pageTitle]="''"
   >
-    <bit-icon *ngIf="showLogo" class="tw-inline-flex" [icon]="logo"></bit-icon>
+    <bit-icon
+      *ngIf="showLogo"
+      class="tw-inline-flex"
+      [icon]="logo"
+      [ariaLabel]="'appLogoLabel' | i18n"
+    ></bit-icon>
 
     <ng-container slot="end">
       <app-pop-out></app-pop-out>
diff --git a/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.ts b/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.ts
index 51dbb6503d7..d6cccf31bb4 100644
--- a/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.ts
+++ b/apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.ts
@@ -12,6 +12,7 @@ import {
 } from "@bitwarden/auth/angular";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { Icon, IconModule, Translation } from "@bitwarden/components";
+import { I18nPipe } from "@bitwarden/ui-common";
 
 import { PopOutComponent } from "../../../platform/popup/components/pop-out.component";
 import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
@@ -36,6 +37,7 @@ export interface ExtensionAnonLayoutWrapperData extends AnonLayoutWrapperData {
     AnonLayoutComponent,
     CommonModule,
     CurrentAccountComponent,
+    I18nPipe,
     IconModule,
     PopOutComponent,
     PopupPageComponent,
diff --git a/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html b/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html
index fdbb6dbba91..ca1264829b9 100644
--- a/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html
+++ b/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html
@@ -1,6 +1,7 @@
 <div class="tw-mt-10 tw-flex tw-justify-center" *ngIf="loading">
   <div>
-    <bit-icon class="tw-w-72 tw-block tw-mb-4" [icon]="logo"></bit-icon>
+    <bit-icon class="tw-w-72 tw-block tw-mb-4" [icon]="logo" [ariaLabel]="'appLogoLabel' | i18n">
+    </bit-icon>
     <div class="tw-flex tw-justify-center">
       <i
         class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 3d6cf0f23a5..56a98a661ef 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -2,6 +2,9 @@
   "allApplications": {
     "message": "All applications"
   },
+  "appLogoLabel": {
+    "message": "Bitwarden logo"
+  },
   "criticalApplications": {
     "message": "Critical applications"
   },
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/accept-provider.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/accept-provider.component.html
index 30cd7fec8f2..3892892a9c6 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/accept-provider.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/accept-provider.component.html
@@ -1,6 +1,10 @@
 <div class="tw-mt-5 tw-flex tw-justify-center" *ngIf="loading">
   <div>
-    <bit-icon class="tw-w-72 tw-block tw-mb-4" [icon]="logo"></bit-icon>
+    <bit-icon
+      class="tw-w-72 tw-block tw-mb-4"
+      [icon]="logo"
+      [ariaLabel]="'appLogoLabel' | i18n"
+    ></bit-icon>
     <p class="tw-text-center">
       <i
         class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup-provider.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup-provider.component.html
index 1fa2fd3415a..cb8eaea80c3 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup-provider.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup-provider.component.html
@@ -1,6 +1,10 @@
 <div class="tw-mt-12 tw-flex tw-justify-center" *ngIf="loading">
   <div>
-    <bit-icon class="tw-w-72 tw-block tw-mb-4" [icon]="logo"></bit-icon>
+    <bit-icon
+      class="tw-w-72 tw-block tw-mb-4"
+      [icon]="logo"
+      [ariaLabel]="'appLogoLabel' | i18n"
+    ></bit-icon>
     <p class="tw-text-center">
       <i
         class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
diff --git a/bitwarden_license/bit-web/src/app/billing/providers/setup/setup-business-unit.component.html b/bitwarden_license/bit-web/src/app/billing/providers/setup/setup-business-unit.component.html
index e269aeb6d4e..3d074906f2a 100644
--- a/bitwarden_license/bit-web/src/app/billing/providers/setup/setup-business-unit.component.html
+++ b/bitwarden_license/bit-web/src/app/billing/providers/setup/setup-business-unit.component.html
@@ -1,6 +1,10 @@
 <div class="tw-mt-12 tw-flex tw-justify-center" *ngIf="loading">
   <div>
-    <bit-icon class="tw-w-72 tw-block tw-mb-4" [icon]="bitwardenLogo"></bit-icon>
+    <bit-icon
+      class="tw-w-72 tw-block tw-mb-4"
+      [icon]="bitwardenLogo"
+      [ariaLabel]="'appLogoLabel' | i18n"
+    ></bit-icon>
     <p class="tw-text-center">
       <i
         class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
diff --git a/libs/auth/src/angular/anon-layout/anon-layout.component.html b/libs/auth/src/angular/anon-layout/anon-layout.component.html
index f31a5500b43..1e16dba82cc 100644
--- a/libs/auth/src/angular/anon-layout/anon-layout.component.html
+++ b/libs/auth/src/angular/anon-layout/anon-layout.component.html
@@ -10,7 +10,7 @@
     [routerLink]="['/']"
     class="tw-w-[128px] tw-block tw-mb-12 [&>*]:tw-align-top"
   >
-    <bit-icon [icon]="logo"></bit-icon>
+    <bit-icon [icon]="logo" [ariaLabel]="'appLogoLabel' | i18n"></bit-icon>
   </a>
 
   <div
diff --git a/libs/components/src/icon/icon.component.ts b/libs/components/src/icon/icon.component.ts
index 2382d197bec..08fa25956d0 100644
--- a/libs/components/src/icon/icon.component.ts
+++ b/libs/components/src/icon/icon.component.ts
@@ -1,19 +1,23 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
-import { Component, HostBinding, Input } from "@angular/core";
+import { Component, Input } from "@angular/core";
 import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
 
 import { Icon, isIcon } from "./icon";
 
 @Component({
   selector: "bit-icon",
+  host: {
+    "[attr.aria-hidden]": "!ariaLabel",
+    "[attr.aria-label]": "ariaLabel",
+    "[innerHtml]": "innerHtml",
+  },
   template: ``,
   standalone: true,
 })
 export class BitIconComponent {
+  innerHtml: SafeHtml | null = null;
+
   @Input() set icon(icon: Icon) {
     if (!isIcon(icon)) {
-      this.innerHtml = "";
       return;
     }
 
@@ -21,7 +25,7 @@ export class BitIconComponent {
     this.innerHtml = this.domSanitizer.bypassSecurityTrustHtml(svg);
   }
 
-  @HostBinding() innerHtml: SafeHtml;
+  @Input() ariaLabel: string | undefined = undefined;
 
   constructor(private domSanitizer: DomSanitizer) {}
 }
diff --git a/libs/components/src/icon/icon.mdx b/libs/components/src/icon/icon.mdx
index fc1c4cd3d57..6435fc24948 100644
--- a/libs/components/src/icon/icon.mdx
+++ b/libs/components/src/icon/icon.mdx
@@ -98,9 +98,19 @@ import * as stories from "./icon.stories";
        ```
 
      - **HTML:**
+
+       > NOTE: SVG icons are treated as decorative by default and will be `aria-hidden` unless an
+       > `ariaLabel` is explicitly provided to the `<bit-icon>` component
+
        ```html
        <bit-icon [icon]="Icons.ExampleIcon"></bit-icon>
        ```
 
+       With `ariaLabel`
+
+       ```html
+       <bit-icon [icon]="Icons.ExampleIcon" [ariaLabel]="Your custom label text here"></bit-icon>
+       ```
+
 8. **Ensure your SVG renders properly** according to Figma in both light and dark modes on a client
    which supports multiple style modes.
diff --git a/libs/components/src/icon/icon.stories.ts b/libs/components/src/icon/icon.stories.ts
index 53454567b7f..7892bdd3ec1 100644
--- a/libs/components/src/icon/icon.stories.ts
+++ b/libs/components/src/icon/icon.stories.ts
@@ -26,5 +26,9 @@ export const Default: Story = {
       mapping: GenericIcons,
       control: { type: "select" },
     },
+    ariaLabel: {
+      control: "text",
+      description: "the text used by a screen reader to describe the icon",
+    },
   },
 };

From 4da03821cee44184c8567f93131818340a50a5fd Mon Sep 17 00:00:00 2001
From: Maciej Zieniuk <167752252+mzieniukbw@users.noreply.github.com>
Date: Fri, 18 Apr 2025 17:23:52 +0200
Subject: [PATCH 36/36] move key connector components to KM team ownership
 (#14008)

---
 .../key-connector}/remove-password.component.html               | 0
 .../key-connector}/remove-password.component.ts                 | 2 +-
 apps/browser/src/popup/app-routing.module.ts                    | 2 +-
 apps/browser/src/popup/app.module.ts                            | 2 +-
 apps/cli/src/auth/commands/unlock.command.ts                    | 2 +-
 .../convert-to-key-connector.command.ts                         | 0
 apps/desktop/src/app/app-routing.module.ts                      | 2 +-
 apps/desktop/src/app/app.module.ts                              | 2 +-
 .../key-connector}/remove-password.component.html               | 0
 .../key-connector}/remove-password.component.ts                 | 2 +-
 .../key-connector}/remove-password.component.html               | 0
 .../key-connector}/remove-password.component.ts                 | 2 +-
 apps/web/src/app/oss-routing.module.ts                          | 2 +-
 apps/web/src/app/shared/loose-components.module.ts              | 2 +-
 libs/key-management-ui/src/index.ts                             | 1 +
 .../src/key-connector}/remove-password.component.ts             | 0
 16 files changed, 11 insertions(+), 10 deletions(-)
 rename apps/browser/src/{auth/popup => key-management/key-connector}/remove-password.component.html (100%)
 rename apps/browser/src/{auth/popup => key-management/key-connector}/remove-password.component.ts (80%)
 rename apps/cli/src/{commands => key-management}/convert-to-key-connector.command.ts (100%)
 rename apps/desktop/src/{auth => key-management/key-connector}/remove-password.component.html (100%)
 rename apps/desktop/src/{auth => key-management/key-connector}/remove-password.component.ts (80%)
 rename apps/web/src/app/{auth => key-management/key-connector}/remove-password.component.html (100%)
 rename apps/web/src/app/{auth => key-management/key-connector}/remove-password.component.ts (80%)
 rename libs/{angular/src/auth/components => key-management-ui/src/key-connector}/remove-password.component.ts (100%)

diff --git a/apps/browser/src/auth/popup/remove-password.component.html b/apps/browser/src/key-management/key-connector/remove-password.component.html
similarity index 100%
rename from apps/browser/src/auth/popup/remove-password.component.html
rename to apps/browser/src/key-management/key-connector/remove-password.component.html
diff --git a/apps/browser/src/auth/popup/remove-password.component.ts b/apps/browser/src/key-management/key-connector/remove-password.component.ts
similarity index 80%
rename from apps/browser/src/auth/popup/remove-password.component.ts
rename to apps/browser/src/key-management/key-connector/remove-password.component.ts
index 5272a3082a2..3ca9d3a5669 100644
--- a/apps/browser/src/auth/popup/remove-password.component.ts
+++ b/apps/browser/src/key-management/key-connector/remove-password.component.ts
@@ -1,6 +1,6 @@
 import { Component } from "@angular/core";
 
-import { RemovePasswordComponent as BaseRemovePasswordComponent } from "@bitwarden/angular/auth/components/remove-password.component";
+import { RemovePasswordComponent as BaseRemovePasswordComponent } from "@bitwarden/key-management-ui";
 
 @Component({
   selector: "app-remove-password",
diff --git a/apps/browser/src/popup/app-routing.module.ts b/apps/browser/src/popup/app-routing.module.ts
index 21ac4c19700..45955506b91 100644
--- a/apps/browser/src/popup/app-routing.module.ts
+++ b/apps/browser/src/popup/app-routing.module.ts
@@ -55,7 +55,6 @@ import {
   ExtensionAnonLayoutWrapperComponent,
   ExtensionAnonLayoutWrapperData,
 } from "../auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component";
-import { RemovePasswordComponent } from "../auth/popup/remove-password.component";
 import { SetPasswordComponent } from "../auth/popup/set-password.component";
 import { AccountSecurityComponent } from "../auth/popup/settings/account-security.component";
 import { UpdateTempPasswordComponent } from "../auth/popup/update-temp-password.component";
@@ -65,6 +64,7 @@ import { BlockedDomainsComponent } from "../autofill/popup/settings/blocked-doma
 import { ExcludedDomainsComponent } from "../autofill/popup/settings/excluded-domains.component";
 import { NotificationsSettingsComponent } from "../autofill/popup/settings/notifications.component";
 import { PremiumV2Component } from "../billing/popup/settings/premium-v2.component";
+import { RemovePasswordComponent } from "../key-management/key-connector/remove-password.component";
 import BrowserPopupUtils from "../platform/popup/browser-popup-utils";
 import { popupRouterCacheGuard } from "../platform/popup/view-cache/popup-router-cache.service";
 import { CredentialGeneratorHistoryComponent } from "../tools/popup/generator/credential-generator-history.component";
diff --git a/apps/browser/src/popup/app.module.ts b/apps/browser/src/popup/app.module.ts
index 0d392afa63b..8bea41da4d6 100644
--- a/apps/browser/src/popup/app.module.ts
+++ b/apps/browser/src/popup/app.module.ts
@@ -25,13 +25,13 @@ import {
 import { AccountComponent } from "../auth/popup/account-switching/account.component";
 import { CurrentAccountComponent } from "../auth/popup/account-switching/current-account.component";
 import { ExtensionAnonLayoutWrapperComponent } from "../auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component";
-import { RemovePasswordComponent } from "../auth/popup/remove-password.component";
 import { SetPasswordComponent } from "../auth/popup/set-password.component";
 import { AccountSecurityComponent } from "../auth/popup/settings/account-security.component";
 import { VaultTimeoutInputComponent } from "../auth/popup/settings/vault-timeout-input.component";
 import { UpdateTempPasswordComponent } from "../auth/popup/update-temp-password.component";
 import { AutofillComponent } from "../autofill/popup/settings/autofill.component";
 import { NotificationsSettingsComponent } from "../autofill/popup/settings/notifications.component";
+import { RemovePasswordComponent } from "../key-management/key-connector/remove-password.component";
 import { PopOutComponent } from "../platform/popup/components/pop-out.component";
 import { HeaderComponent } from "../platform/popup/header.component";
 import { PopupFooterComponent } from "../platform/popup/layout/popup-footer.component";
diff --git a/apps/cli/src/auth/commands/unlock.command.ts b/apps/cli/src/auth/commands/unlock.command.ts
index 6d524759dd6..d10c3f38ebd 100644
--- a/apps/cli/src/auth/commands/unlock.command.ts
+++ b/apps/cli/src/auth/commands/unlock.command.ts
@@ -17,7 +17,7 @@ import { MasterKey } from "@bitwarden/common/types/key";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
 import { KeyService } from "@bitwarden/key-management";
 
-import { ConvertToKeyConnectorCommand } from "../../commands/convert-to-key-connector.command";
+import { ConvertToKeyConnectorCommand } from "../../key-management/convert-to-key-connector.command";
 import { Response } from "../../models/response";
 import { MessageResponse } from "../../models/response/message.response";
 import { CliUtils } from "../../utils";
diff --git a/apps/cli/src/commands/convert-to-key-connector.command.ts b/apps/cli/src/key-management/convert-to-key-connector.command.ts
similarity index 100%
rename from apps/cli/src/commands/convert-to-key-connector.command.ts
rename to apps/cli/src/key-management/convert-to-key-connector.command.ts
diff --git a/apps/desktop/src/app/app-routing.module.ts b/apps/desktop/src/app/app-routing.module.ts
index cd5064a87e4..0c6bc730c2c 100644
--- a/apps/desktop/src/app/app-routing.module.ts
+++ b/apps/desktop/src/app/app-routing.module.ts
@@ -50,9 +50,9 @@ import {
 
 import { AccessibilityCookieComponent } from "../auth/accessibility-cookie.component";
 import { maxAccountsGuardFn } from "../auth/guards/max-accounts.guard";
-import { RemovePasswordComponent } from "../auth/remove-password.component";
 import { SetPasswordComponent } from "../auth/set-password.component";
 import { UpdateTempPasswordComponent } from "../auth/update-temp-password.component";
+import { RemovePasswordComponent } from "../key-management/key-connector/remove-password.component";
 import { VaultComponent } from "../vault/app/vault/vault.component";
 
 import { Fido2PlaceholderComponent } from "./components/fido2placeholder.component";
diff --git a/apps/desktop/src/app/app.module.ts b/apps/desktop/src/app/app.module.ts
index fdc25ed642e..b892324a979 100644
--- a/apps/desktop/src/app/app.module.ts
+++ b/apps/desktop/src/app/app.module.ts
@@ -13,11 +13,11 @@ import { DecryptionFailureDialogComponent } from "@bitwarden/vault";
 import { AccessibilityCookieComponent } from "../auth/accessibility-cookie.component";
 import { DeleteAccountComponent } from "../auth/delete-account.component";
 import { LoginModule } from "../auth/login/login.module";
-import { RemovePasswordComponent } from "../auth/remove-password.component";
 import { SetPasswordComponent } from "../auth/set-password.component";
 import { UpdateTempPasswordComponent } from "../auth/update-temp-password.component";
 import { SshAgentService } from "../autofill/services/ssh-agent.service";
 import { PremiumComponent } from "../billing/app/accounts/premium.component";
+import { RemovePasswordComponent } from "../key-management/key-connector/remove-password.component";
 import { AddEditCustomFieldsComponent } from "../vault/app/vault/add-edit-custom-fields.component";
 import { AddEditComponent } from "../vault/app/vault/add-edit.component";
 import { AttachmentsComponent } from "../vault/app/vault/attachments.component";
diff --git a/apps/desktop/src/auth/remove-password.component.html b/apps/desktop/src/key-management/key-connector/remove-password.component.html
similarity index 100%
rename from apps/desktop/src/auth/remove-password.component.html
rename to apps/desktop/src/key-management/key-connector/remove-password.component.html
diff --git a/apps/desktop/src/auth/remove-password.component.ts b/apps/desktop/src/key-management/key-connector/remove-password.component.ts
similarity index 80%
rename from apps/desktop/src/auth/remove-password.component.ts
rename to apps/desktop/src/key-management/key-connector/remove-password.component.ts
index 5272a3082a2..3ca9d3a5669 100644
--- a/apps/desktop/src/auth/remove-password.component.ts
+++ b/apps/desktop/src/key-management/key-connector/remove-password.component.ts
@@ -1,6 +1,6 @@
 import { Component } from "@angular/core";
 
-import { RemovePasswordComponent as BaseRemovePasswordComponent } from "@bitwarden/angular/auth/components/remove-password.component";
+import { RemovePasswordComponent as BaseRemovePasswordComponent } from "@bitwarden/key-management-ui";
 
 @Component({
   selector: "app-remove-password",
diff --git a/apps/web/src/app/auth/remove-password.component.html b/apps/web/src/app/key-management/key-connector/remove-password.component.html
similarity index 100%
rename from apps/web/src/app/auth/remove-password.component.html
rename to apps/web/src/app/key-management/key-connector/remove-password.component.html
diff --git a/apps/web/src/app/auth/remove-password.component.ts b/apps/web/src/app/key-management/key-connector/remove-password.component.ts
similarity index 80%
rename from apps/web/src/app/auth/remove-password.component.ts
rename to apps/web/src/app/key-management/key-connector/remove-password.component.ts
index 5272a3082a2..3ca9d3a5669 100644
--- a/apps/web/src/app/auth/remove-password.component.ts
+++ b/apps/web/src/app/key-management/key-connector/remove-password.component.ts
@@ -1,6 +1,6 @@
 import { Component } from "@angular/core";
 
-import { RemovePasswordComponent as BaseRemovePasswordComponent } from "@bitwarden/angular/auth/components/remove-password.component";
+import { RemovePasswordComponent as BaseRemovePasswordComponent } from "@bitwarden/key-management-ui";
 
 @Component({
   selector: "app-remove-password",
diff --git a/apps/web/src/app/oss-routing.module.ts b/apps/web/src/app/oss-routing.module.ts
index 0334519516a..fc8356505f5 100644
--- a/apps/web/src/app/oss-routing.module.ts
+++ b/apps/web/src/app/oss-routing.module.ts
@@ -58,7 +58,6 @@ import { LoginViaWebAuthnComponent } from "./auth/login/login-via-webauthn/login
 import { AcceptOrganizationComponent } from "./auth/organization-invite/accept-organization.component";
 import { RecoverDeleteComponent } from "./auth/recover-delete.component";
 import { RecoverTwoFactorComponent } from "./auth/recover-two-factor.component";
-import { RemovePasswordComponent } from "./auth/remove-password.component";
 import { SetPasswordComponent } from "./auth/set-password.component";
 import { AccountComponent } from "./auth/settings/account/account.component";
 import { EmergencyAccessComponent } from "./auth/settings/emergency-access/emergency-access.component";
@@ -73,6 +72,7 @@ import { CompleteTrialInitiationComponent } from "./billing/trial-initiation/com
 import { freeTrialTextResolver } from "./billing/trial-initiation/complete-trial-initiation/resolver/free-trial-text.resolver";
 import { EnvironmentSelectorComponent } from "./components/environment-selector/environment-selector.component";
 import { RouteDataProperties } from "./core";
+import { RemovePasswordComponent } from "./key-management/key-connector/remove-password.component";
 import { FrontendLayoutComponent } from "./layouts/frontend-layout.component";
 import { UserLayoutComponent } from "./layouts/user-layout.component";
 import { RequestSMAccessComponent } from "./secrets-manager/secrets-manager-landing/request-sm-access.component";
diff --git a/apps/web/src/app/shared/loose-components.module.ts b/apps/web/src/app/shared/loose-components.module.ts
index 469ebe457d0..eb63b9f798c 100644
--- a/apps/web/src/app/shared/loose-components.module.ts
+++ b/apps/web/src/app/shared/loose-components.module.ts
@@ -15,7 +15,6 @@ import { VerifyRecoverDeleteOrgComponent } from "../admin-console/organizations/
 import { AcceptFamilySponsorshipComponent } from "../admin-console/organizations/sponsorships/accept-family-sponsorship.component";
 import { RecoverDeleteComponent } from "../auth/recover-delete.component";
 import { RecoverTwoFactorComponent } from "../auth/recover-two-factor.component";
-import { RemovePasswordComponent } from "../auth/remove-password.component";
 import { SetPasswordComponent } from "../auth/set-password.component";
 import { AccountComponent } from "../auth/settings/account/account.component";
 import { ChangeAvatarDialogComponent } from "../auth/settings/account/change-avatar-dialog.component";
@@ -42,6 +41,7 @@ import { SponsoredFamiliesComponent } from "../billing/settings/sponsored-famili
 import { SponsoringOrgRowComponent } from "../billing/settings/sponsoring-org-row.component";
 import { DynamicAvatarComponent } from "../components/dynamic-avatar.component";
 import { SelectableAvatarComponent } from "../components/selectable-avatar.component";
+import { RemovePasswordComponent } from "../key-management/key-connector/remove-password.component";
 import { FrontendLayoutComponent } from "../layouts/frontend-layout.component";
 import { HeaderModule } from "../layouts/header/header.module";
 import { ProductSwitcherModule } from "../layouts/product-switcher/product-switcher.module";
diff --git a/libs/key-management-ui/src/index.ts b/libs/key-management-ui/src/index.ts
index 2f98538caad..b330e390d36 100644
--- a/libs/key-management-ui/src/index.ts
+++ b/libs/key-management-ui/src/index.ts
@@ -7,3 +7,4 @@ export { LockComponentService, UnlockOptions } from "./lock/services/lock-compon
 export { KeyRotationTrustInfoComponent } from "./key-rotation/key-rotation-trust-info.component";
 export { AccountRecoveryTrustComponent } from "./trust/account-recovery-trust.component";
 export { EmergencyAccessTrustComponent } from "./trust/emergency-access-trust.component";
+export { RemovePasswordComponent } from "./key-connector/remove-password.component";
diff --git a/libs/angular/src/auth/components/remove-password.component.ts b/libs/key-management-ui/src/key-connector/remove-password.component.ts
similarity index 100%
rename from libs/angular/src/auth/components/remove-password.component.ts
rename to libs/key-management-ui/src/key-connector/remove-password.component.ts