Merge branch 'main' into km/auto-kdf-qa

2026-01-31 16:53:27 +00:00 · 2025-11-13 15:43:47 +01:00
parent 6511c0cf1a c32dee13ca
commit 7e14c814dc
64 changed files with 1246 additions and 302 deletions
--- a/.claude/prompts/review-code.md
+++ b/.claude/prompts/review-code.md
@@ -1,25 +1,57 @@
-Please review this pull request with a focus on:
+# Bitwarden Clients Repo Code Review - Careful Consideration Required

- Code quality and best practices
- Potential bugs or issues
- Security implications
- Performance considerations
+## Think Twice Before Recommending

-Note: The PR branch is already checked out in the current working directory.
+Angular has multiple valid patterns. Before suggesting changes:

-Provide a comprehensive review including:
+- **Consider the context** - Is this code part of an active modernization effort?
+- **Check for established patterns** - Look for similar implementations in the codebase
+- **Avoid premature optimization** - Don't suggest refactoring stable, working code without clear benefit
+- **Respect incremental progress** - Teams may be modernizing gradually with feature flags

- Summary of changes since last review
- Critical issues found (be thorough)
- Suggested improvements (be thorough)
- Good practices observed (be concise - list only the most notable items without elaboration)
- Action items for the author
- Leverage collapsible <details> sections where appropriate for lengthy explanations or code snippets to enhance human readability
+## Angular Modernization - Handle with Care

-When reviewing subsequent commits:
+**Control Flow Syntax (@if, @for, @switch):**

- Track status of previously identified issues (fixed/unfixed/reopened)
- Identify NEW problems introduced since last review
- Note if fixes introduced new issues
+- When you see legacy structural directives (*ngIf, *ngFor), consider whether modernization is in scope
+- Do not mandate changes to stable code unless part of the PR's objective
+- If suggesting modernization, acknowledge it's optional unless required by PR goals

-IMPORTANT: Be comprehensive about issues and improvements. For good practices, be brief - just note what was done well without explaining why or praising excessively.
+**Standalone Components:**
+
+- New components should be standalone whenever feasible, but do not flag existing NgModule components as issues
+- Legacy patterns exist for valid reasons - consider modernization effort vs benefit
+
+**Typed Forms:**
+
+- Recommend typed forms for NEW form code
+- Don't suggest rewriting working untyped forms unless they're being modified
+
+## Tailwind CSS - Critical Pattern
+
+**tw- prefix is mandatory** - This is non-negotiable and should be flagged as ❌ major finding:
+
+- Missing tw- prefix breaks styling completely
+- Check ALL Tailwind classes in modified files
+
+## Rust SDK Adoption - Tread Carefully
+
+When reviewing cipher operations:
+
+- Look for breaking changes in the TypeScript → Rust boundary
+- Verify error handling matches established patterns
+- Don't suggest alternative SDK patterns without strong justification
+
+## Component Library First
+
+Before suggesting custom implementations:
+
+- Check if Bitwarden's component library already provides the functionality
+- Prefer existing components over custom Tailwind styling
+- Don't add UI complexity that the component library already solves
+
+## When in Doubt
+
+- **Ask questions** (💭) rather than making definitive recommendations
+- **Flag for human review** (⚠️) if you're uncertain
+- **Acknowledge alternatives** exist when suggesting improvements
--- a/.github/workflows/build-browser.yml
+++ b/.github/workflows/build-browser.yml
@@ -548,7 +548,7 @@ jobs:
        uses: bitwarden/gh-actions/azure-logout@main

      - name: Upload Sources
-        uses: crowdin/github-action@f214c8723025f41fc55b2ad26e67b60b80b1885d # v2.7.1
+        uses: crowdin/github-action@08713f00a50548bfe39b37e8f44afb53e7a802d4 # v2.12.0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          CROWDIN_API_TOKEN: ${{ steps.retrieve-secrets.outputs.crowdin-api-token }}
--- a/.github/workflows/build-desktop.yml
+++ b/.github/workflows/build-desktop.yml
@@ -185,6 +185,13 @@ jobs:
          cache-dependency-path: '**/package-lock.json'
          node-version: ${{ env._NODE_VERSION }}

+      - name: Cache Rust dependencies
+        uses: Swatinem/rust-cache@f13886b937689c021905a6b90929199931d60db1 # v2.8.1
+        with:
+          workspaces: |
+            apps/desktop/desktop_native -> target
+          cache-targets: "true"
+
      - name: Set up environment
        run: |
          sudo apt-get update
@@ -225,7 +232,7 @@ jobs:
          npm link ../sdk-internal

      - name: Cache Native Module
-        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
        id: cache
        with:
          path: |
@@ -334,6 +341,13 @@ jobs:
          cache-dependency-path: '**/package-lock.json'
          node-version: ${{ env._NODE_VERSION }}

+      - name: Cache Rust dependencies
+        uses: Swatinem/rust-cache@f13886b937689c021905a6b90929199931d60db1 # v2.8.1
+        with:
+          workspaces: |
+            apps/desktop/desktop_native -> target
+          cache-targets: "true"
+
      - name: Set up environment
        run: |
          sudo apt-get update
@@ -381,7 +395,7 @@ jobs:
          npm link ../sdk-internal

      - name: Cache Native Module
-        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
        id: cache
        with:
          path: |
@@ -426,7 +440,7 @@ jobs:
          if-no-files-found: error

      - name: Upload tar.gz artifact
-        uses: actions/upload-artifact@6f51ac03b9356f520e9adb1b1b7802705f340c2b # v4.5.0
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
        with:
          name: bitwarden_${{ env._PACKAGE_VERSION }}_arm64.tar.gz
          path: apps/desktop/dist/bitwarden_desktop_arm64.tar.gz
@@ -475,6 +489,13 @@ jobs:
          cache-dependency-path: '**/package-lock.json'
          node-version: ${{ env._NODE_VERSION }}

+      - name: Cache Rust dependencies
+        uses: Swatinem/rust-cache@f13886b937689c021905a6b90929199931d60db1 # v2.8.1
+        with:
+          workspaces: |
+            apps/desktop/desktop_native -> target
+          cache-targets: "true"
+
      - name: Install AST
        run: dotnet tool install --global AzureSignTool --version 4.0.1

@@ -537,7 +558,7 @@ jobs:
          npm link ../sdk-internal

      - name: Cache Native Module
-        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
        id: cache
        with:
          path: |
@@ -734,6 +755,13 @@ jobs:
          cache-dependency-path: '**/package-lock.json'
          node-version: ${{ env._NODE_VERSION }}

+      - name: Cache Rust dependencies
+        uses: Swatinem/rust-cache@f13886b937689c021905a6b90929199931d60db1 # v2.8.1
+        with:
+          workspaces: |
+            apps/desktop/desktop_native -> target
+          cache-targets: "true"
+
      - name: Install AST
        run: dotnet tool install --global AzureSignTool --version 4.0.1

@@ -793,7 +821,7 @@ jobs:
          npm link ../sdk-internal

      - name: Cache Native Module
-        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
        id: cache
        with:
          path: |
@@ -971,11 +999,18 @@ jobs:
      - name: Set up Python
        uses: actions/setup-python@e797f83bcb11b83ae66e0230d6156d7c80228e7c # v6.0.0
        with:
-          python-version: '3.12'
+          python-version: '3.14'
      
      - name: Set up Node-gyp
        run: python3 -m pip install setuptools

+      - name: Cache Rust dependencies
+        uses: Swatinem/rust-cache@f13886b937689c021905a6b90929199931d60db1 # v2.8.1
+        with:
+          workspaces: |
+            apps/desktop/desktop_native -> target
+          cache-targets: "true"
+
      - name: Print environment
        run: |
          node --version
@@ -986,14 +1021,14 @@ jobs:

      - name: Cache Build
        id: build-cache
-        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
        with:
          path: apps/desktop/build
          key: ${{ runner.os }}-${{ github.run_id }}-build

      - name: Cache Safari
        id: safari-cache
-        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
        with:
          path: apps/browser/dist/Safari
          key: ${{ runner.os }}-${{ github.run_id }}-safari-extension
@@ -1139,7 +1174,7 @@ jobs:
          npm link ../sdk-internal

      - name: Cache Native Module
-        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
        id: cache
        with:
          path: |
@@ -1201,11 +1236,18 @@ jobs:
      - name: Set up Python
        uses: actions/setup-python@e797f83bcb11b83ae66e0230d6156d7c80228e7c # v6.0.0
        with:
-          python-version: '3.12'
+          python-version: '3.14'
      
      - name: Set up Node-gyp
        run: python3 -m pip install setuptools

+      - name: Cache Rust dependencies
+        uses: Swatinem/rust-cache@f13886b937689c021905a6b90929199931d60db1 # v2.8.1
+        with:
+          workspaces: |
+            apps/desktop/desktop_native -> target
+          cache-targets: "true"
+
      - name: Print environment
        run: |
          node --version
@@ -1216,14 +1258,14 @@ jobs:

      - name: Get Build Cache
        id: build-cache
-        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
        with:
          path: apps/desktop/build
          key: ${{ runner.os }}-${{ github.run_id }}-build

      - name: Setup Safari Cache
        id: safari-cache
-        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
        with:
          path: apps/browser/dist/Safari
          key: ${{ runner.os }}-${{ github.run_id }}-safari-extension
@@ -1353,7 +1395,7 @@ jobs:
          npm link ../sdk-internal

      - name: Cache Native Module
-        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
        id: cache
        with:
          path: |
@@ -1466,11 +1508,18 @@ jobs:
      - name: Set up Python
        uses: actions/setup-python@e797f83bcb11b83ae66e0230d6156d7c80228e7c # v6.0.0
        with:
-          python-version: '3.12'
+          python-version: '3.14'
          
      - name: Set up Node-gyp
        run: python3 -m pip install setuptools

+      - name: Cache Rust dependencies
+        uses: Swatinem/rust-cache@f13886b937689c021905a6b90929199931d60db1 # v2.8.1
+        with:
+          workspaces: |
+            apps/desktop/desktop_native -> target
+          cache-targets: "true"
+
      - name: Print environment
        run: |
          node --version
@@ -1481,14 +1530,14 @@ jobs:

      - name: Get Build Cache
        id: build-cache
-        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
        with:
          path: apps/desktop/build
          key: ${{ runner.os }}-${{ github.run_id }}-build

      - name: Setup Safari Cache
        id: safari-cache
-        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
        with:
          path: apps/browser/dist/Safari
          key: ${{ runner.os }}-${{ github.run_id }}-safari-extension
@@ -1626,7 +1675,7 @@ jobs:
          npm link ../sdk-internal

      - name: Cache Native Module
-        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
        id: cache
        with:
          path: |
@@ -1747,7 +1796,7 @@ jobs:
        if: |
          github.event_name != 'pull_request_target'
          && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/rc' || github.ref == 'refs/heads/hotfix-rc-desktop')
-        uses: slackapi/slack-github-action@485a9d42d3a73031f12ec201c457e2162c45d02d # v2.0.0
+        uses: slackapi/slack-github-action@91efab103c0de0a537f72a35f6b8cda0ee76bf0a # v2.1.1
        with:
          channel-id: C074F5UESQ0
          method: chat.postMessage
@@ -1805,7 +1854,7 @@ jobs:
        uses: bitwarden/gh-actions/azure-logout@main

      - name: Upload Sources
-        uses: crowdin/github-action@f214c8723025f41fc55b2ad26e67b60b80b1885d # v2.7.1
+        uses: crowdin/github-action@08713f00a50548bfe39b37e8f44afb53e7a802d4 # v2.12.0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          CROWDIN_API_TOKEN: ${{ steps.retrieve-secrets.outputs.crowdin-api-token }}
--- a/.github/workflows/build-web.yml
+++ b/.github/workflows/build-web.yml
@@ -204,7 +204,7 @@ jobs:

      ########## Set up Docker ##########
      - name: Set up Docker
-        uses: docker/setup-docker-action@b60f85385d03ac8acfca6d9996982511d8620a19 # v4.3.0
+        uses: docker/setup-docker-action@efe9e3891a4f7307e689f2100b33a155b900a608 # v4.5.0
        with:
          daemon-config: |
            {
@@ -215,10 +215,10 @@ jobs:
            }

      - name: Set up QEMU emulators
-        uses: docker/setup-qemu-action@29109295f81e9208d7d86ff1c6c12d2833863392 # v3.6.0
+        uses: docker/setup-qemu-action@c7c53464625b32c7a7e944ae62b3e17d2b600130 # v3.7.0

      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@f95db51fddba0c2d1ec667646a06c2ce06100226 # v3.0.0
+        uses: docker/setup-buildx-action@e468171a9de216ec08956ac3ada2f0791b6bd435 # v3.11.1

      ########## ACRs ##########
      - name: Log in to Azure
@@ -273,7 +273,7 @@ jobs:

      - name: Build Docker image
        id: build-container
-        uses: docker/build-push-action@67a2d409c0a876cbe6b11854e3e25193efe4e62d # v6.12.0
+        uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83 # v6.18.0
        with:
          build-args: |
            NODE_VERSION=${{ env._NODE_VERSION }}
@@ -315,7 +315,7 @@ jobs:

      - name: Install Cosign
        if: github.event_name != 'pull_request_target' && github.ref == 'refs/heads/main'
-        uses: sigstore/cosign-installer@3454372f43399081ed03b604cb2d021dabca52bb # v3.8.2
+        uses: sigstore/cosign-installer@faadad0cce49287aee09b3a48701e75088a2c6ad # v4.0.0

      - name: Sign image with Cosign
        if: github.event_name != 'pull_request_target' && github.ref == 'refs/heads/main'
@@ -334,7 +334,7 @@ jobs:
      - name: Scan Docker image
        if: ${{ needs.setup.outputs.has_secrets == 'true' }}
        id: container-scan
-        uses: anchore/scan-action@2c901ab7378897c01b8efaa2d0c9bf519cc64b9e # v6.2.0
+        uses: anchore/scan-action@1638637db639e0ade3258b51db49a9a137574c3e # v6.5.1
        with:
          image: ${{ steps.image-name.outputs.name }}
          fail-build: false
@@ -390,7 +390,7 @@ jobs:
        uses: bitwarden/gh-actions/azure-logout@main

      - name: Upload Sources
-        uses: crowdin/github-action@f214c8723025f41fc55b2ad26e67b60b80b1885d # v2.7.1
+        uses: crowdin/github-action@08713f00a50548bfe39b37e8f44afb53e7a802d4 # v2.12.0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          CROWDIN_API_TOKEN: ${{ steps.retrieve-secrets.outputs.crowdin-api-token }}
--- a/.github/workflows/chromatic.yml
+++ b/.github/workflows/chromatic.yml
@@ -65,7 +65,7 @@ jobs:

      - name: Cache NPM
        id: npm-cache
-        uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
        with:
          path: "~/.npm"
          key: ${{ runner.os }}-npm-chromatic-${{ hashFiles('**/package-lock.json') }}
@@ -98,7 +98,7 @@ jobs:
        uses: bitwarden/gh-actions/azure-logout@main

      - name: Publish to Chromatic
-        uses: chromaui/action@d0795df816d05c4a89c80295303970fddd247cce # v13.1.4
+        uses: chromaui/action@ac86f2ff0a458ffbce7b40698abd44c0fa34d4b6 # v13.3.3
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          projectToken: ${{ steps.get-kv-secrets.outputs.CHROMATIC-PROJECT-TOKEN }}
--- a/.github/workflows/crowdin-pull.yml
+++ b/.github/workflows/crowdin-pull.yml
@@ -49,7 +49,7 @@ jobs:
        uses: bitwarden/gh-actions/azure-logout@main

      - name: Generate GH App token
-        uses: actions/create-github-app-token@30bf6253fa41bdc8d1501d202ad15287582246b4 # v2.0.3
+        uses: actions/create-github-app-token@67018539274d69449ef7c02e8e71183d1719ab42 # v2.1.4
        id: app-token
        with:
          app-id: ${{ steps.get-kv-secrets.outputs.BW-GHAPP-ID }}
--- a/.github/workflows/lint-crowdin-config.yml
+++ b/.github/workflows/lint-crowdin-config.yml
@@ -45,7 +45,7 @@ jobs:
        uses: bitwarden/gh-actions/azure-logout@main

      - name: Lint ${{ matrix.app.name }} config
-        uses: crowdin/github-action@f214c8723025f41fc55b2ad26e67b60b80b1885d # v2.7.1
+        uses: crowdin/github-action@08713f00a50548bfe39b37e8f44afb53e7a802d4 # v2.12.0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          CROWDIN_PROJECT_ID: ${{ matrix.app.project_id }}
--- a/.github/workflows/publish-desktop.yml
+++ b/.github/workflows/publish-desktop.yml
@@ -348,9 +348,9 @@ jobs:
        run: wget "https://github.com/bitwarden/clients/releases/download/$_RELEASE_TAG/macos-build-number.json"

      - name: Setup Ruby and Install Fastlane
-        uses: ruby/setup-ruby@ca041f971d66735f3e5ff1e21cc13e2d51e7e535 # v1.233.0
+        uses: ruby/setup-ruby@d5126b9b3579e429dd52e51e68624dda2e05be25 # v1.267.0
        with:
-          ruby-version: '3.0'
+          ruby-version: '3.4.7'
          bundler-cache: false
          working-directory: apps/desktop
        
--- a/.github/workflows/release-browser.yml
+++ b/.github/workflows/release-browser.yml
@@ -140,7 +140,7 @@ jobs:

      - name: Create release
        if: ${{ github.event.inputs.release_type != 'Dry Run' }}
-        uses: ncipollo/release-action@cdcc88a9acf3ca41c16c37bb7d21b9ad48560d87 # v1.15.0
+        uses: ncipollo/release-action@b7eabc95ff50cbeeedec83973935c8f306dfcd0b # v1.20.0
        with:
          artifacts: 'browser-source-${{ needs.setup.outputs.release_version }}.zip,
                      dist-chrome-${{ needs.setup.outputs.release_version }}.zip,
--- a/.github/workflows/release-cli.yml
+++ b/.github/workflows/release-cli.yml
@@ -80,7 +80,7 @@ jobs:

      - name: Create release
        if: ${{ inputs.release_type != 'Dry Run' }}
-        uses: ncipollo/release-action@cdcc88a9acf3ca41c16c37bb7d21b9ad48560d87 # v1.15.0
+        uses: ncipollo/release-action@b7eabc95ff50cbeeedec83973935c8f306dfcd0b # v1.20.0
        env:
          PKG_VERSION: ${{ needs.setup.outputs.release_version }}
        with:
--- a/.github/workflows/release-desktop.yml
+++ b/.github/workflows/release-desktop.yml
@@ -99,7 +99,7 @@ jobs:
        run: mv "Bitwarden-$PKG_VERSION-universal.pkg" "Bitwarden-$PKG_VERSION-universal.pkg.archive"

      - name: Create Release
-        uses: ncipollo/release-action@cdcc88a9acf3ca41c16c37bb7d21b9ad48560d87 # v1.15.0
+        uses: ncipollo/release-action@b7eabc95ff50cbeeedec83973935c8f306dfcd0b # v1.20.0
        if: ${{ steps.release_channel.outputs.channel == 'latest' && github.event.inputs.release_type != 'Dry Run' }}
        env:
          PKG_VERSION: ${{ steps.version.outputs.version }}
--- a/.github/workflows/release-web.yml
+++ b/.github/workflows/release-web.yml
@@ -89,7 +89,7 @@ jobs:

      - name: Create release
        if: ${{ github.event.inputs.release_type != 'Dry Run' }}
-        uses: ncipollo/release-action@cdcc88a9acf3ca41c16c37bb7d21b9ad48560d87 # v1.15.0
+        uses: ncipollo/release-action@b7eabc95ff50cbeeedec83973935c8f306dfcd0b # v1.20.0
        with:
          name: "Web v${{ needs.setup.outputs.release_version }}"
          commit: ${{ github.sha }}
--- a/.github/workflows/repository-management.yml
+++ b/.github/workflows/repository-management.yml
@@ -97,7 +97,7 @@ jobs:
        uses: bitwarden/gh-actions/azure-logout@main

      - name: Generate GH App token
-        uses: actions/create-github-app-token@30bf6253fa41bdc8d1501d202ad15287582246b4 # v2.0.3
+        uses: actions/create-github-app-token@67018539274d69449ef7c02e8e71183d1719ab42 # v2.1.4
        id: app-token
        with:
          app-id: ${{ steps.get-kv-secrets.outputs.BW-GHAPP-ID }}
@@ -462,7 +462,7 @@ jobs:
        uses: bitwarden/gh-actions/azure-logout@main

      - name: Generate GH App token
-        uses: actions/create-github-app-token@30bf6253fa41bdc8d1501d202ad15287582246b4 # v2.0.3
+        uses: actions/create-github-app-token@67018539274d69449ef7c02e8e71183d1719ab42 # v2.1.4
        id: app-token
        with:
          app-id: ${{ steps.get-kv-secrets.outputs.BW-GHAPP-ID }}
--- a/.github/workflows/review-code.yml
+++ b/.github/workflows/review-code.yml
@@ -15,6 +15,7 @@ jobs:
      AZURE_TENANT_ID: ${{ secrets.AZURE_TENANT_ID }}
      AZURE_CLIENT_ID: ${{ secrets.AZURE_CLIENT_ID }}
    permissions:
+      actions: read
      contents: read
      id-token: write
      pull-requests: write
--- a/.github/workflows/sdk-breaking-change-check.yml
+++ b/.github/workflows/sdk-breaking-change-check.yml
@@ -53,7 +53,7 @@ jobs:
          secrets: "BW-GHAPP-ID,BW-GHAPP-KEY"

      - name: Generate GH App token
-        uses: actions/create-github-app-token@30bf6253fa41bdc8d1501d202ad15287582246b4 # v2.0.3
+        uses: actions/create-github-app-token@67018539274d69449ef7c02e8e71183d1719ab42 # v2.1.4
        id: app-token
        with:
          app-id: ${{ steps.get-kv-secrets.outputs.BW-GHAPP-ID }}
--- a/.github/workflows/test-browser-interactions.yml
+++ b/.github/workflows/test-browser-interactions.yml
@@ -49,7 +49,7 @@ jobs:
      uses: bitwarden/gh-actions/azure-logout@main

    - name: Generate GH App token
-      uses: actions/create-github-app-token@30bf6253fa41bdc8d1501d202ad15287582246b4 # v2.0.3
+      uses: actions/create-github-app-token@67018539274d69449ef7c02e8e71183d1719ab42 # v2.1.4
      id: app-token
      with:
        app-id: ${{ steps.get-kv-secrets.outputs.BW-GHAPP-ID }}
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -62,7 +62,7 @@ jobs:
        run: npm test -- --coverage --maxWorkers=3

      - name: Report test results
-        uses: dorny/test-reporter@6e6a65b7a0bd2c9197df7d0ae36ac5cee784230c # v2.0.0
+        uses: dorny/test-reporter@dc3a92680fcc15842eef52e8c4606ea7ce6bd3f3 # v2.1.1
        if: ${{ github.event.pull_request.head.repo.full_name == github.repository && !cancelled() }}
        with:
          name: Test Results
@@ -148,7 +148,7 @@ jobs:
          components: llvm-tools

      - name: Cache cargo registry
-        uses: Swatinem/rust-cache@82a92a6e8fbeee089604da2575dc567ae9ddeaab # v2.7.5
+        uses: Swatinem/rust-cache@f13886b937689c021905a6b90929199931d60db1 # v2.8.1
        with:
          workspaces: "apps/desktop/desktop_native -> target"

@@ -190,7 +190,7 @@ jobs:
          path: ./apps/desktop/desktop_native

      - name: Upload coverage to codecov.io
-        uses: codecov/codecov-action@ad3126e916f78f00edff4ed0317cf185271ccc2d # v5.4.2
+        uses: codecov/codecov-action@5a1091511ad55cbe89839c7260b706298ca349f7 # v5.5.1
        with:
          files: |
            ./lcov.info
--- a/.github/workflows/version-auto-bump.yml
+++ b/.github/workflows/version-auto-bump.yml
@@ -31,7 +31,7 @@ jobs:
        uses: bitwarden/gh-actions/azure-logout@main

      - name: Generate GH App token
-        uses: actions/create-github-app-token@30bf6253fa41bdc8d1501d202ad15287582246b4 # v2.0.3
+        uses: actions/create-github-app-token@67018539274d69449ef7c02e8e71183d1719ab42 # v2.1.4
        id: app-token
        with:
          app-id: ${{ steps.get-kv-secrets.outputs.BW-GHAPP-ID }}
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -5824,6 +5824,12 @@
  "upgradeToPremium": {
    "message": "Upgrade to Premium"
  },
+  "loadingVault": {
+    "message": "Loading vault"
+  },
+  "vaultLoaded": {
+    "message": "Vault loaded"
+  },
  "settingDisabledByPolicy": {
    "message": "This setting is disabled by your organization's policy.",
    "description": "This hint text is displayed when a user setting is disabled due to an organization policy."
--- a/apps/browser/src/auth/popup/settings/account-security.component.html
+++ b/apps/browser/src/auth/popup/settings/account-security.component.html
@@ -86,12 +86,12 @@
        </bit-section-header>

        <bit-card>
-          <auth-vault-timeout-input
+          <bit-session-timeout-input
            [vaultTimeoutOptions]="vaultTimeoutOptions"
            [formControl]="form.controls.vaultTimeout"
            ngDefaultControl
          >
-          </auth-vault-timeout-input>
+          </bit-session-timeout-input>

          <bit-form-field disableMargin>
            <bit-label for="vaultTimeoutAction">{{ "vaultTimeoutAction1" | i18n }}</bit-label>
--- a/apps/browser/src/auth/popup/settings/account-security.component.ts
+++ b/apps/browser/src/auth/popup/settings/account-security.component.ts
@@ -24,7 +24,7 @@ import {
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { NudgesService, NudgeType } from "@bitwarden/angular/vault";
 import { SpotlightComponent } from "@bitwarden/angular/vault/components/spotlight/spotlight.component";
-import { FingerprintDialogComponent, VaultTimeoutInputComponent } from "@bitwarden/auth/angular";
+import { FingerprintDialogComponent } from "@bitwarden/auth/angular";
 import { LockService } from "@bitwarden/auth/common";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { PolicyType } from "@bitwarden/common/admin-console/enums";
@@ -69,7 +69,10 @@ import {
  BiometricStateService,
  BiometricsStatus,
 } from "@bitwarden/key-management";
-import { SessionTimeoutSettingsComponent } from "@bitwarden/key-management-ui";
+import {
+  SessionTimeoutInputComponent,
+  SessionTimeoutSettingsComponent,
+} from "@bitwarden/key-management-ui";

 import { BiometricErrors, BiometricErrorTypes } from "../../../models/biometricErrors";
 import { BrowserApi } from "../../../platform/browser/browser-api";
@@ -106,7 +109,7 @@ import { AwaitDesktopDialogComponent } from "./await-desktop-dialog.component";
    SessionTimeoutSettingsComponent,
    SpotlightComponent,
    TypographyModule,
-    VaultTimeoutInputComponent,
+    SessionTimeoutInputComponent,
  ],
 })
 export class AccountSecurityComponent implements OnInit, OnDestroy {
--- a/apps/browser/src/autofill/services/autofill-overlay-content.service.ts
+++ b/apps/browser/src/autofill/services/autofill-overlay-content.service.ts
@@ -1085,7 +1085,15 @@ export class AutofillOverlayContentService implements AutofillOverlayContentServ
        pageDetails,
      )
    ) {
-      this.setQualifiedAccountCreationFillType(autofillFieldData);
+      const hasUsernameField = [...this.formFieldElements.values()].some((field) =>
+        this.inlineMenuFieldQualificationService.isUsernameField(field),
+      );
+
+      if (hasUsernameField) {
+        void this.setQualifiedLoginFillType(autofillFieldData);
+      } else {
+        this.setQualifiedAccountCreationFillType(autofillFieldData);
+      }
      return false;
    }

--- a/apps/browser/src/platform/popup/layout/popup-page.component.html
+++ b/apps/browser/src/platform/popup/layout/popup-page.component.html
@@ -27,10 +27,10 @@
    data-testid="popup-layout-scroll-region"
    (scroll)="handleScroll($event)"
    [ngClass]="{
-      'tw-overflow-hidden': hideOverflow(),
+      '!tw-overflow-hidden': hideOverflow(),
      'tw-overflow-y-auto': !hideOverflow(),
      'tw-invisible': loading(),
-      'tw-py-3 bit-compact:tw-py-2 tw-px-[max(0.75rem,calc((100%-(var(--tw-sm-breakpoint)))/2))] bit-compact:tw-px-[max(0.5rem,calc((100%-(var(--tw-sm-breakpoint)))/2))]':
+      'tw-relative tw-py-3 bit-compact:tw-py-2 tw-px-[max(0.75rem,calc((100%-(var(--tw-sm-breakpoint)))/2))] bit-compact:tw-px-[max(0.5rem,calc((100%-(var(--tw-sm-breakpoint)))/2))]':
        !disablePadding(),
    }"
    bitScrollLayoutHost
--- a/apps/browser/src/vault/popup/components/vault-fade-in-out-skeleton/vault-fade-in-out-skeleton.component.html
+++ b/apps/browser/src/vault/popup/components/vault-fade-in-out-skeleton/vault-fade-in-out-skeleton.component.html
@@ -0,0 +1,6 @@
+<!-- tw-p-3 matches the padding of the popup-page -->
+<div
+  class="tw-absolute tw-left-0 tw-top-0 tw-size-full tw-p-3 tw-overflow-hidden tw-bg-background-alt"
+>
+  <ng-content></ng-content>
+</div>
--- a/apps/browser/src/vault/popup/components/vault-fade-in-out-skeleton/vault-fade-in-out-skeleton.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-fade-in-out-skeleton/vault-fade-in-out-skeleton.component.ts
@@ -0,0 +1,20 @@
+import { animate, style, transition, trigger } from "@angular/animations";
+import { ChangeDetectionStrategy, Component, HostBinding } from "@angular/core";
+
+@Component({
+  selector: "vault-fade-in-out-skeleton",
+  templateUrl: "./vault-fade-in-out-skeleton.component.html",
+  animations: [
+    trigger("fadeInOut", [
+      transition(":enter", [
+        style({ opacity: 0 }),
+        animate("100ms ease-in", style({ opacity: 1 })),
+      ]),
+      transition(":leave", [animate("300ms ease-out", style({ opacity: 0 }))]),
+    ]),
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class VaultFadeInOutSkeletonComponent {
+  @HostBinding("@fadeInOut") fadeInOut = true;
+}
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-header/vault-header-v2.component.spec.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-header/vault-header-v2.component.spec.ts
@@ -10,6 +10,7 @@ import { CollectionService } from "@bitwarden/admin-console/common";
 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 { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
@@ -28,6 +29,7 @@ import {
  PopupListFilter,
  VaultPopupListFiltersService,
 } from "../../../../../vault/popup/services/vault-popup-list-filters.service";
+import { VaultPopupLoadingService } from "../../../services/vault-popup-loading.service";

 import { VaultHeaderV2Component } from "./vault-header-v2.component";

@@ -75,6 +77,10 @@ describe("VaultHeaderV2Component", () => {
        { provide: MessageSender, useValue: mock<MessageSender>() },
        { provide: AccountService, useValue: mock<AccountService>() },
        { provide: LogService, useValue: mock<LogService>() },
+        {
+          provide: ConfigService,
+          useValue: { getFeatureFlag$: jest.fn(() => new BehaviorSubject(true)) },
+        },
        {
          provide: VaultPopupItemsService,
          useValue: mock<VaultPopupItemsService>({ searchText$: new BehaviorSubject("") }),
@@ -99,6 +105,10 @@ describe("VaultHeaderV2Component", () => {
          provide: StateProvider,
          useValue: { getGlobal: () => ({ state$, update }) },
        },
+        {
+          provide: VaultPopupLoadingService,
+          useValue: { loading$: new BehaviorSubject(false) },
+        },
      ],
    }).compileComponents();

--- a/apps/browser/src/vault/popup/components/vault-v2/vault-search/vault-v2-search.component.spec.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-search/vault-v2-search.component.spec.ts
@@ -0,0 +1,160 @@
+import { CommonModule } from "@angular/common";
+import { ComponentFixture, fakeAsync, TestBed, tick } from "@angular/core/testing";
+import { FormsModule } from "@angular/forms";
+import { BehaviorSubject } from "rxjs";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { SearchTextDebounceInterval } from "@bitwarden/common/vault/services/search.service";
+import { SearchModule } from "@bitwarden/components";
+
+import { VaultPopupItemsService } from "../../../services/vault-popup-items.service";
+import { VaultPopupLoadingService } from "../../../services/vault-popup-loading.service";
+
+import { VaultV2SearchComponent } from "./vault-v2-search.component";
+
+describe("VaultV2SearchComponent", () => {
+  let component: VaultV2SearchComponent;
+  let fixture: ComponentFixture<VaultV2SearchComponent>;
+
+  const searchText$ = new BehaviorSubject("");
+  const loading$ = new BehaviorSubject(false);
+  const featureFlag$ = new BehaviorSubject(true);
+  const applyFilter = jest.fn();
+
+  const createComponent = () => {
+    fixture = TestBed.createComponent(VaultV2SearchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  };
+
+  beforeEach(async () => {
+    applyFilter.mockClear();
+    featureFlag$.next(true);
+
+    await TestBed.configureTestingModule({
+      imports: [VaultV2SearchComponent, CommonModule, SearchModule, JslibModule, FormsModule],
+      providers: [
+        {
+          provide: VaultPopupItemsService,
+          useValue: {
+            searchText$,
+            applyFilter,
+          },
+        },
+        {
+          provide: VaultPopupLoadingService,
+          useValue: {
+            loading$,
+          },
+        },
+        {
+          provide: ConfigService,
+          useValue: {
+            getFeatureFlag$: jest.fn(() => featureFlag$),
+          },
+        },
+        { provide: I18nService, useValue: { t: (key: string) => key } },
+      ],
+    }).compileComponents();
+  });
+
+  it("subscribes to search text from service", () => {
+    createComponent();
+
+    searchText$.next("test search");
+    fixture.detectChanges();
+
+    expect(component.searchText).toBe("test search");
+  });
+
+  describe("debouncing behavior", () => {
+    describe("when feature flag is enabled", () => {
+      beforeEach(() => {
+        featureFlag$.next(true);
+        createComponent();
+      });
+
+      it("debounces search text changes when not loading", fakeAsync(() => {
+        loading$.next(false);
+
+        component.searchText = "test";
+        component.onSearchTextChanged();
+
+        expect(applyFilter).not.toHaveBeenCalled();
+
+        tick(SearchTextDebounceInterval);
+
+        expect(applyFilter).toHaveBeenCalledWith("test");
+        expect(applyFilter).toHaveBeenCalledTimes(1);
+      }));
+
+      it("should not debounce search text changes when loading", fakeAsync(() => {
+        loading$.next(true);
+
+        component.searchText = "test";
+        component.onSearchTextChanged();
+
+        tick(0);
+
+        expect(applyFilter).toHaveBeenCalledWith("test");
+        expect(applyFilter).toHaveBeenCalledTimes(1);
+      }));
+
+      it("cancels previous debounce when new text is entered", fakeAsync(() => {
+        loading$.next(false);
+
+        component.searchText = "test";
+        component.onSearchTextChanged();
+
+        tick(SearchTextDebounceInterval / 2);
+
+        component.searchText = "test2";
+        component.onSearchTextChanged();
+
+        tick(SearchTextDebounceInterval / 2);
+
+        expect(applyFilter).not.toHaveBeenCalled();
+
+        tick(SearchTextDebounceInterval / 2);
+
+        expect(applyFilter).toHaveBeenCalledWith("test2");
+        expect(applyFilter).toHaveBeenCalledTimes(1);
+      }));
+    });
+
+    describe("when feature flag is disabled", () => {
+      beforeEach(() => {
+        featureFlag$.next(false);
+        createComponent();
+      });
+
+      it("debounces search text changes", fakeAsync(() => {
+        component.searchText = "test";
+        component.onSearchTextChanged();
+
+        expect(applyFilter).not.toHaveBeenCalled();
+
+        tick(SearchTextDebounceInterval);
+
+        expect(applyFilter).toHaveBeenCalledWith("test");
+        expect(applyFilter).toHaveBeenCalledTimes(1);
+      }));
+
+      it("ignores loading state and always debounces", fakeAsync(() => {
+        loading$.next(true);
+
+        component.searchText = "test";
+        component.onSearchTextChanged();
+
+        expect(applyFilter).not.toHaveBeenCalled();
+
+        tick(SearchTextDebounceInterval);
+
+        expect(applyFilter).toHaveBeenCalledWith("test");
+        expect(applyFilter).toHaveBeenCalledTimes(1);
+      }));
+    });
+  });
+});
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-search/vault-v2-search.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-search/vault-v2-search.component.ts
@@ -2,13 +2,27 @@ import { CommonModule } from "@angular/common";
 import { Component, NgZone } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { FormsModule } from "@angular/forms";
-import { Subject, Subscription, debounceTime, distinctUntilChanged, filter } from "rxjs";
+import {
+  Subject,
+  Subscription,
+  combineLatest,
+  debounce,
+  debounceTime,
+  distinctUntilChanged,
+  filter,
+  map,
+  switchMap,
+  timer,
+} from "rxjs";

 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { SearchTextDebounceInterval } from "@bitwarden/common/vault/services/search.service";
 import { SearchModule } from "@bitwarden/components";

 import { VaultPopupItemsService } from "../../../services/vault-popup-items.service";
+import { VaultPopupLoadingService } from "../../../services/vault-popup-loading.service";

 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@@ -22,8 +36,11 @@ export class VaultV2SearchComponent {

  private searchText$ = new Subject<string>();

+  protected loading$ = this.vaultPopupLoadingService.loading$;
  constructor(
    private vaultPopupItemsService: VaultPopupItemsService,
+    private vaultPopupLoadingService: VaultPopupLoadingService,
+    private configService: ConfigService,
    private ngZone: NgZone,
  ) {
    this.subscribeToLatestSearchText();
@@ -45,13 +62,38 @@ export class VaultV2SearchComponent {
      });
  }

-  subscribeToApplyFilter(): Subscription {
-    return this.searchText$
-      .pipe(debounceTime(SearchTextDebounceInterval), distinctUntilChanged(), takeUntilDestroyed())
-      .subscribe((data) => {
+  subscribeToApplyFilter(): void {
+    this.configService
+      .getFeatureFlag$(FeatureFlag.VaultLoadingSkeletons)
+      .pipe(
+        switchMap((enabled) => {
+          if (!enabled) {
+            return this.searchText$.pipe(
+              debounceTime(SearchTextDebounceInterval),
+              distinctUntilChanged(),
+            );
+          }
+
+          return combineLatest([this.searchText$, this.loading$]).pipe(
+            debounce(([_, isLoading]) => {
+              // If loading apply immediately to avoid stale searches.
+              // After loading completes, debounce to avoid excessive searches.
+              const delayTime = isLoading ? 0 : SearchTextDebounceInterval;
+              return timer(delayTime);
+            }),
+            distinctUntilChanged(
+              ([prevText, prevLoading], [newText, newLoading]) =>
+                prevText === newText && prevLoading === newLoading,
+            ),
+            map(([text, _]) => text),
+          );
+        }),
+        takeUntilDestroyed(),
+      )
+      .subscribe((text) => {
        this.ngZone.runOutsideAngular(() => {
          this.ngZone.run(() => {
-            this.vaultPopupItemsService.applyFilter(data);
+            this.vaultPopupItemsService.applyFilter(text);
          });
        });
      });
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.html
@@ -1,4 +1,4 @@
-<popup-page [loading]="loading$ | async">
+<popup-page [loading]="showSpinnerLoaders$ | async" [hideOverflow]="showSkeletonsLoaders$ | async">
  <popup-header slot="header" [pageTitle]="'vault' | i18n">
    <ng-container slot="end">
      <app-new-item-dropdown [initialValues]="newItemItemValues$ | async"></app-new-item-dropdown>
@@ -103,4 +103,10 @@
      ></app-vault-list-items-container>
    </ng-container>
  </ng-container>
+
+  @if (showSkeletonsLoaders$ | async) {
+    <vault-fade-in-out-skeleton>
+      <vault-loading-skeleton></vault-loading-skeleton>
+    </vault-fade-in-out-skeleton>
+  }
 </popup-page>
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.ts
@@ -1,3 +1,4 @@
+import { LiveAnnouncer } from "@angular/cdk/a11y";
 import { CdkVirtualScrollableElement, ScrollingModule } from "@angular/cdk/scrolling";
 import { CommonModule } from "@angular/common";
 import { AfterViewInit, Component, DestroyRef, OnDestroy, OnInit, ViewChild } from "@angular/core";
@@ -5,14 +6,15 @@ import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { Router, RouterModule } from "@angular/router";
 import {
  combineLatest,
+  distinctUntilChanged,
  filter,
  firstValueFrom,
  map,
  Observable,
  shareReplay,
-  startWith,
  switchMap,
  take,
+  tap,
 } from "rxjs";

 import { JslibModule } from "@bitwarden/angular/jslib.module";
@@ -22,6 +24,8 @@ import { DeactivatedOrg, NoResults, VaultOpen } from "@bitwarden/assets/svg";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { CipherId, CollectionId, OrganizationId, UserId } from "@bitwarden/common/types/guid";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherType } from "@bitwarden/common/vault/enums";
@@ -41,11 +45,13 @@ import { PopOutComponent } from "../../../../platform/popup/components/pop-out.c
 import { PopupHeaderComponent } from "../../../../platform/popup/layout/popup-header.component";
 import { PopupPageComponent } from "../../../../platform/popup/layout/popup-page.component";
 import { IntroCarouselService } from "../../services/intro-carousel.service";
-import { VaultPopupCopyButtonsService } from "../../services/vault-popup-copy-buttons.service";
 import { VaultPopupItemsService } from "../../services/vault-popup-items.service";
 import { VaultPopupListFiltersService } from "../../services/vault-popup-list-filters.service";
+import { VaultPopupLoadingService } from "../../services/vault-popup-loading.service";
 import { VaultPopupScrollPositionService } from "../../services/vault-popup-scroll-position.service";
 import { AtRiskPasswordCalloutComponent } from "../at-risk-callout/at-risk-password-callout.component";
+import { VaultFadeInOutSkeletonComponent } from "../vault-fade-in-out-skeleton/vault-fade-in-out-skeleton.component";
+import { VaultLoadingSkeletonComponent } from "../vault-loading-skeleton/vault-loading-skeleton.component";

 import { BlockedInjectionBanner } from "./blocked-injection-banner/blocked-injection-banner.component";
 import {
@@ -88,6 +94,8 @@ type VaultState = UnionOfValues<typeof VaultState>;
    SpotlightComponent,
    RouterModule,
    TypographyModule,
+    VaultLoadingSkeletonComponent,
+    VaultFadeInOutSkeletonComponent,
  ],
 })
 export class VaultV2Component implements OnInit, AfterViewInit, OnDestroy {
@@ -108,19 +116,30 @@ export class VaultV2Component implements OnInit, AfterViewInit, OnDestroy {
  );

  activeUserId: UserId | null = null;
+
+  private loading$ = this.vaultPopupLoadingService.loading$.pipe(
+    distinctUntilChanged(),
+    tap((loading) => {
+      const key = loading ? "loadingVault" : "vaultLoaded";
+      void this.liveAnnouncer.announce(this.i18nService.translate(key), "polite");
+    }),
+  );
+  private skeletonFeatureFlag$ = this.configService.getFeatureFlag$(
+    FeatureFlag.VaultLoadingSkeletons,
+  );
+
  protected favoriteCiphers$ = this.vaultPopupItemsService.favoriteCiphers$;
  protected remainingCiphers$ = this.vaultPopupItemsService.remainingCiphers$;
  protected allFilters$ = this.vaultPopupListFiltersService.allFilters$;

-  protected loading$ = combineLatest([
-    this.vaultPopupItemsService.loading$,
-    this.allFilters$,
-    // Added as a dependency to avoid flashing the copyActions on slower devices
-    this.vaultCopyButtonsService.showQuickCopyActions$,
-  ]).pipe(
-    map(([itemsLoading, filters]) => itemsLoading || !filters),
-    shareReplay({ bufferSize: 1, refCount: true }),
-    startWith(true),
+  /** When true, show spinner loading state */
+  protected showSpinnerLoaders$ = combineLatest([this.loading$, this.skeletonFeatureFlag$]).pipe(
+    map(([loading, skeletonsEnabled]) => loading && !skeletonsEnabled),
+  );
+
+  /** When true, show skeleton loading state */
+  protected showSkeletonsLoaders$ = combineLatest([this.loading$, this.skeletonFeatureFlag$]).pipe(
+    map(([loading, skeletonsEnabled]) => loading && skeletonsEnabled),
  );

  protected newItemItemValues$: Observable<NewItemInitialValues> =
@@ -150,14 +169,17 @@ export class VaultV2Component implements OnInit, AfterViewInit, OnDestroy {
    private vaultPopupItemsService: VaultPopupItemsService,
    private vaultPopupListFiltersService: VaultPopupListFiltersService,
    private vaultScrollPositionService: VaultPopupScrollPositionService,
+    private vaultPopupLoadingService: VaultPopupLoadingService,
    private accountService: AccountService,
    private destroyRef: DestroyRef,
    private cipherService: CipherService,
    private dialogService: DialogService,
-    private vaultCopyButtonsService: VaultPopupCopyButtonsService,
    private introCarouselService: IntroCarouselService,
    private nudgesService: NudgesService,
    private router: Router,
+    private liveAnnouncer: LiveAnnouncer,
+    private i18nService: I18nService,
+    private configService: ConfigService,
  ) {
    combineLatest([
      this.vaultPopupItemsService.emptyVault$,
--- a/apps/browser/src/vault/popup/services/vault-popup-loading.service.spec.ts
+++ b/apps/browser/src/vault/popup/services/vault-popup-loading.service.spec.ts
@@ -0,0 +1,72 @@
+import { TestBed } from "@angular/core/testing";
+import { firstValueFrom, skip, Subject } from "rxjs";
+
+import { VaultPopupCopyButtonsService } from "./vault-popup-copy-buttons.service";
+import { VaultPopupItemsService } from "./vault-popup-items.service";
+import { VaultPopupListFiltersService } from "./vault-popup-list-filters.service";
+import { VaultPopupLoadingService } from "./vault-popup-loading.service";
+
+describe("VaultPopupLoadingService", () => {
+  let service: VaultPopupLoadingService;
+  let itemsLoading$: Subject<boolean>;
+  let allFilters$: Subject<any>;
+  let showQuickCopyActions$: Subject<boolean>;
+
+  beforeEach(() => {
+    itemsLoading$ = new Subject<boolean>();
+    allFilters$ = new Subject<any>();
+    showQuickCopyActions$ = new Subject<boolean>();
+
+    TestBed.configureTestingModule({
+      providers: [
+        VaultPopupLoadingService,
+        { provide: VaultPopupItemsService, useValue: { loading$: itemsLoading$ } },
+        { provide: VaultPopupListFiltersService, useValue: { allFilters$: allFilters$ } },
+        {
+          provide: VaultPopupCopyButtonsService,
+          useValue: { showQuickCopyActions$: showQuickCopyActions$ },
+        },
+      ],
+    });
+
+    service = TestBed.inject(VaultPopupLoadingService);
+  });
+
+  it("emits true initially", async () => {
+    const loading = await firstValueFrom(service.loading$);
+
+    expect(loading).toBe(true);
+  });
+
+  it("emits false when items are loaded and filters are available", async () => {
+    const loadingPromise = firstValueFrom(service.loading$.pipe(skip(1)));
+
+    itemsLoading$.next(false);
+    allFilters$.next({});
+    showQuickCopyActions$.next(true);
+
+    expect(await loadingPromise).toBe(false);
+  });
+
+  it("emits true when filters are not available", async () => {
+    const loadingPromise = firstValueFrom(service.loading$.pipe(skip(2)));
+
+    itemsLoading$.next(false);
+    allFilters$.next({});
+    showQuickCopyActions$.next(true);
+    allFilters$.next(null);
+
+    expect(await loadingPromise).toBe(true);
+  });
+
+  it("emits true when items are loading", async () => {
+    const loadingPromise = firstValueFrom(service.loading$.pipe(skip(2)));
+
+    itemsLoading$.next(false);
+    allFilters$.next({});
+    showQuickCopyActions$.next(true);
+    itemsLoading$.next(true);
+
+    expect(await loadingPromise).toBe(true);
+  });
+});
--- a/apps/browser/src/vault/popup/services/vault-popup-loading.service.ts
+++ b/apps/browser/src/vault/popup/services/vault-popup-loading.service.ts
@@ -0,0 +1,27 @@
+import { inject, Injectable } from "@angular/core";
+import { combineLatest, map, shareReplay, startWith } from "rxjs";
+
+import { VaultPopupCopyButtonsService } from "./vault-popup-copy-buttons.service";
+import { VaultPopupItemsService } from "./vault-popup-items.service";
+import { VaultPopupListFiltersService } from "./vault-popup-list-filters.service";
+
+@Injectable({
+  providedIn: "root",
+})
+export class VaultPopupLoadingService {
+  private vaultPopupItemsService = inject(VaultPopupItemsService);
+  private vaultPopupListFiltersService = inject(VaultPopupListFiltersService);
+  private vaultCopyButtonsService = inject(VaultPopupCopyButtonsService);
+
+  /** Loading state of the vault */
+  loading$ = combineLatest([
+    this.vaultPopupItemsService.loading$,
+    this.vaultPopupListFiltersService.allFilters$,
+    // Added as a dependency to avoid flashing the copyActions on slower devices
+    this.vaultCopyButtonsService.showQuickCopyActions$,
+  ]).pipe(
+    map(([itemsLoading, filters]) => itemsLoading || !filters),
+    shareReplay({ bufferSize: 1, refCount: true }),
+    startWith(true),
+  );
+}
--- a/apps/desktop/src/app/accounts/settings.component.html
+++ b/apps/desktop/src/app/accounts/settings.component.html
@@ -44,12 +44,12 @@
                    <h2 bitTypography="h6">{{ "vaultTimeoutHeader" | i18n }}</h2>
                  </bit-section-header>

-                  <auth-vault-timeout-input
+                  <bit-session-timeout-input
                    [vaultTimeoutOptions]="vaultTimeoutOptions"
                    [formControl]="form.controls.vaultTimeout"
                    ngDefaultControl
                  >
-                  </auth-vault-timeout-input>
+                  </bit-session-timeout-input>

                  <bit-form-field disableMargin>
                    <bit-label for="vaultTimeoutAction">{{
--- a/apps/desktop/src/app/accounts/settings.component.ts
+++ b/apps/desktop/src/app/accounts/settings.component.ts
@@ -9,7 +9,6 @@ import { concatMap, map, pairwise, startWith, switchMap, takeUntil, timeout } fr

 import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { VaultTimeoutInputComponent } from "@bitwarden/auth/angular";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { getFirstPolicy } from "@bitwarden/common/admin-console/services/policy/default-policy.service";
@@ -55,7 +54,10 @@ import {
  TypographyModule,
 } from "@bitwarden/components";
 import { KeyService, BiometricStateService, BiometricsStatus } from "@bitwarden/key-management";
-import { SessionTimeoutSettingsComponent } from "@bitwarden/key-management-ui";
+import {
+  SessionTimeoutInputComponent,
+  SessionTimeoutSettingsComponent,
+} from "@bitwarden/key-management-ui";
 import { PermitCipherDetailsPopoverComponent } from "@bitwarden/vault";

 import { SetPinComponent } from "../../auth/components/set-pin.component";
@@ -95,7 +97,7 @@ import { NativeMessagingManifestService } from "../services/native-messaging-man
    SectionHeaderComponent,
    SelectModule,
    TypographyModule,
-    VaultTimeoutInputComponent,
+    SessionTimeoutInputComponent,
    SessionTimeoutSettingsComponent,
    PermitCipherDetailsPopoverComponent,
    PremiumBadgeComponent,
@@ -837,22 +839,6 @@ export class SettingsComponent implements OnInit, OnDestroy {
      ipc.platform.allowBrowserintegrationOverride || ipc.platform.isDev;

    if (!skipSupportedPlatformCheck) {
-      if (
-        ipc.platform.deviceType === DeviceType.MacOsDesktop &&
-        !this.platformUtilsService.isMacAppStore()
-      ) {
-        await this.dialogService.openSimpleDialog({
-          title: { key: "browserIntegrationUnsupportedTitle" },
-          content: { key: "browserIntegrationMasOnlyDesc" },
-          acceptButtonText: { key: "ok" },
-          cancelButtonText: null,
-          type: "warning",
-        });
-
-        this.form.controls.enableBrowserIntegration.setValue(false);
-        return;
-      }
-
      if (ipc.platform.isWindowsStore) {
        await this.dialogService.openSimpleDialog({
          title: { key: "browserIntegrationUnsupportedTitle" },
--- a/apps/desktop/src/locales/en/messages.json
+++ b/apps/desktop/src/locales/en/messages.json
@@ -2168,9 +2168,6 @@
  "browserIntegrationErrorDesc": {
    "message": "An error has occurred while enabling browser integration."
  },
-  "browserIntegrationMasOnlyDesc": {
-    "message": "Unfortunately browser integration is only supported in the Mac App Store version for now."
-  },
  "browserIntegrationWindowsStoreDesc": {
    "message": "Unfortunately browser integration is currently not supported in the Microsoft Store version."
  },
--- a/apps/desktop/src/utils.ts
+++ b/apps/desktop/src/utils.ts
@@ -70,8 +70,7 @@ export function isWindowsPortable() {
 }

 /**
- * We block the browser integration on some unsupported platforms, which also
- * blocks partially supported platforms (mac .dmg in dev builds) / prevents
+ * We block the browser integration on some unsupported platforms prevents
 * experimenting with the feature for QA. So this env var allows overriding
 * the block.
 */
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@bitwarden/web-vault",
-  "version": "2025.11.0",
+  "version": "2025.11.2",
  "scripts": {
    "build:oss": "webpack",
    "build:bit": "webpack -c ../../bitwarden_license/bit-web/webpack.config.js",
--- a/apps/web/src/app/billing/individual/user-subscription.component.html
+++ b/apps/web/src/app/billing/individual/user-subscription.component.html
@@ -37,41 +37,63 @@
    <dd *ngIf="sub.expiration">{{ sub.expiration | date: "mediumDate" }}</dd>
    <dd *ngIf="!sub.expiration">{{ "neverExpires" | i18n }}</dd>
  </dl>
-  <div class="tw-flex tw-w-full" *ngIf="!selfHosted">
-    <div class="tw-w-1/3">
-      <dl>
-        <dt>{{ "status" | i18n }}</dt>
-        <dd>
+  <div class="tw-flex tw-max-w-[1340px] tw-pt-6" *ngIf="!selfHosted">
+    <div class="tw-flex tw-gap-16 tw-justify-between tw-w-full">
+      <div class="tw-flex tw-flex-col">
+        <div class="tw-font-semibold tw-mb-2">{{ "plan" | i18n }}</div>
+        <div>{{ "premiumMembership" | i18n }}</div>
+      </div>
+      <div class="tw-flex tw-flex-col">
+        <div class="tw-font-semibold tw-mb-2">{{ "status" | i18n }}</div>
+        <div>
          <span class="tw-capitalize">{{ (subscription && subscriptionStatus) || "-" }}</span>
-          <span bitBadge variant="warning" *ngIf="subscriptionMarkedForCancel">{{
-            "pendingCancellation" | i18n
-          }}</span>
-        </dd>
-        <dt>{{ "nextCharge" | i18n }}</dt>
-        <dd>
-          {{
-            nextInvoice
-              ? (sub.subscription.periodEndDate | date: "mediumDate") +
-                ", " +
-                (nextInvoice.amount | currency: "$")
-              : "-"
-          }}
-        </dd>
-      </dl>
-    </div>
-    <div class="tw-w-2/3" *ngIf="subscription">
-      <strong class="!tw-block tw-mb-1">{{ "details" | i18n }}</strong>
-      <bit-table>
-        <ng-template body>
-          <tr *ngFor="let i of subscription.items">
-            <td bitCell>
-              {{ i.name }} {{ i.quantity > 1 ? "&times;" + i.quantity : "" }} &#64;
-              {{ i.amount | currency: "$" }}
-            </td>
-            <td bitCell>{{ i.quantity * i.amount | currency: "$" }} /{{ i.interval | i18n }}</td>
-          </tr>
-        </ng-template>
-      </bit-table>
+          <span
+            bitBadge
+            variant="warning"
+            *ngIf="subscriptionMarkedForCancel"
+            class="tw-mt-2 tw-block"
+            >{{ "pendingCancellation" | i18n }}</span
+          >
+        </div>
+      </div>
+      <div class="tw-flex tw-flex-col">
+        <div class="tw-font-semibold tw-mb-2 tw-text-right">{{ "nextChargeHeader" | i18n }}</div>
+        <div>
+          <ng-container *ngIf="subscription">
+            <ng-container *ngIf="enableDiscountDisplay$ | async as enableDiscount; else noDiscount">
+              <div class="tw-flex tw-items-center tw-gap-2 tw-flex-wrap tw-justify-end">
+                <span [attr.aria-label]="'nextChargeDateAndAmount' | i18n">
+                  {{
+                    (sub.subscription.periodEndDate | date: "MMM d, y") +
+                      ", " +
+                      (discountedSubscriptionAmount | currency: "$")
+                  }}
+                </span>
+                <billing-discount-badge
+                  [discount]="getDiscountInfo(sub?.customerDiscount)"
+                ></billing-discount-badge>
+              </div>
+            </ng-container>
+            <ng-template #noDiscount>
+              <div class="tw-flex tw-items-center tw-gap-2 tw-flex-wrap tw-justify-end">
+                <span [attr.aria-label]="'nextChargeDateAndAmount' | i18n">
+                  {{
+                    (sub.subscription.periodEndDate | date: "MMM d, y") +
+                      ", " +
+                      (subscriptionAmount | currency: "$")
+                  }}
+                </span>
+              </div>
+            </ng-template>
+          </ng-container>
+          <span
+            *ngIf="!subscription"
+            class="tw-block tw-text-right"
+            [attr.aria-label]="'noChargeScheduled' | i18n"
+            >-</span
+          >
+        </div>
+      </div>
    </div>
  </div>
  <ng-container *ngIf="selfHosted">
@@ -90,8 +112,27 @@
      </a>
    </div>
  </ng-container>
-  <ng-container *ngIf="!selfHosted">
-    <div class="tw-flex tw-justify-between">
+  <div class="tw-max-w-[1340px]" *ngIf="!selfHosted">
+    <h3 bitTypography="h3" class="tw-mt-8">{{ "storage" | i18n }}</h3>
+    <p bitTypography="body1">
+      {{ "subscriptionStorage" | i18n: sub.maxStorageGb || 0 : sub.storageName || "0 MB" }}
+    </p>
+    <bit-progress [barWidth]="storagePercentage" bgColor="success" size="default"></bit-progress>
+    <ng-container *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel">
+      <div class="tw-mt-3">
+        <div class="tw-flex tw-gap-4">
+          <button bitButton type="button" buttonType="secondary" (click)="adjustStorage(true)">
+            {{ "addStorage" | i18n }}
+          </button>
+          <button bitButton type="button" buttonType="secondary" (click)="adjustStorage(false)">
+            {{ "removeStorage" | i18n }}
+          </button>
+        </div>
+      </div>
+    </ng-container>
+    <h3 bitTypography="h3" class="tw-mt-16">{{ "additionalOptions" | i18n }}</h3>
+    <p bitTypography="body1" class="tw-mt-3">{{ "additionalOptionsDesc" | i18n }}</p>
+    <div class="tw-flex tw-gap-4 tw-mt-3">
      <button
        bitButton
        type="button"
@@ -106,7 +147,6 @@
        #cancelBtn
        type="button"
        buttonType="danger"
-        class="tw-ml-auto"
        (click)="cancelSubscription()"
        [appApiAction]="cancelPromise"
        [disabled]="$any(cancelBtn).loading()"
@@ -115,22 +155,5 @@
        {{ "cancelSubscription" | i18n }}
      </button>
    </div>
-    <h3 bitTypography="h3" class="tw-mt-16">{{ "storage" | i18n }}</h3>
-    <p bitTypography="body1">
-      {{ "subscriptionStorage" | i18n: sub.maxStorageGb || 0 : sub.storageName || "0 MB" }}
-    </p>
-    <bit-progress [barWidth]="storagePercentage" bgColor="success" size="default"></bit-progress>
-    <ng-container *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel">
-      <div class="tw-mt-3">
-        <div class="tw-flex tw-gap-1">
-          <button bitButton type="button" buttonType="secondary" (click)="adjustStorage(true)">
-            {{ "addStorage" | i18n }}
-          </button>
-          <button bitButton type="button" buttonType="secondary" (click)="adjustStorage(false)">
-            {{ "removeStorage" | i18n }}
-          </button>
-        </div>
-      </div>
-    </ng-container>
-  </ng-container>
+  </div>
 </ng-container>
--- a/apps/web/src/app/billing/individual/user-subscription.component.ts
+++ b/apps/web/src/app/billing/individual/user-subscription.component.ts
@@ -7,13 +7,17 @@ import { firstValueFrom, lastValueFrom } from "rxjs";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
+import { BillingCustomerDiscount } from "@bitwarden/common/billing/models/response/organization-subscription.response";
 import { SubscriptionResponse } from "@bitwarden/common/billing/models/response/subscription.response";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.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";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { DialogService, ToastService } from "@bitwarden/components";
+import { DiscountInfo } from "@bitwarden/pricing";

 import {
  AdjustStorageDialogComponent,
@@ -42,6 +46,10 @@ export class UserSubscriptionComponent implements OnInit {
  cancelPromise: Promise<any>;
  reinstatePromise: Promise<any>;

+  protected enableDiscountDisplay$ = this.configService.getFeatureFlag$(
+    FeatureFlag.PM23341_Milestone_2,
+  );
+
  constructor(
    private apiService: ApiService,
    private platformUtilsService: PlatformUtilsService,
@@ -54,6 +62,7 @@ export class UserSubscriptionComponent implements OnInit {
    private billingAccountProfileStateService: BillingAccountProfileStateService,
    private toastService: ToastService,
    private accountService: AccountService,
+    private configService: ConfigService,
  ) {
    this.selfHosted = this.platformUtilsService.isSelfHost();
  }
@@ -187,6 +196,28 @@ export class UserSubscriptionComponent implements OnInit {
    return this.sub != null ? this.sub.upcomingInvoice : null;
  }

+  get subscriptionAmount(): number {
+    if (!this.subscription?.items || this.subscription.items.length === 0) {
+      return 0;
+    }
+
+    return this.subscription.items.reduce(
+      (sum, item) => sum + (item.amount || 0) * (item.quantity || 0),
+      0,
+    );
+  }
+
+  get discountedSubscriptionAmount(): number {
+    // Use the upcoming invoice amount from the server as it already includes discounts,
+    // taxes, prorations, and all other adjustments. Fall back to subscription amount
+    // if upcoming invoice is not available.
+    if (this.nextInvoice?.amount != null) {
+      return this.nextInvoice.amount;
+    }
+
+    return this.subscriptionAmount;
+  }
+
  get storagePercentage() {
    return this.sub != null && this.sub.maxStorageGb
      ? +(100 * (this.sub.storageGb / this.sub.maxStorageGb)).toFixed(2)
@@ -217,4 +248,15 @@ export class UserSubscriptionComponent implements OnInit {
      return this.subscription.status;
    }
  }
+
+  getDiscountInfo(discount: BillingCustomerDiscount | null): DiscountInfo | null {
+    if (!discount) {
+      return null;
+    }
+    return {
+      active: discount.active,
+      percentOff: discount.percentOff,
+      amountOff: discount.amountOff,
+    };
+  }
 }
--- a/apps/web/src/app/billing/shared/billing-shared.module.ts
+++ b/apps/web/src/app/billing/shared/billing-shared.module.ts
@@ -1,6 +1,7 @@
 import { NgModule } from "@angular/core";

 import { BannerModule } from "@bitwarden/components";
+import { DiscountBadgeComponent } from "@bitwarden/pricing";
 import {
  EnterBillingAddressComponent,
  EnterPaymentMethodComponent,
@@ -28,6 +29,7 @@ import { UpdateLicenseComponent } from "./update-license.component";
    BannerModule,
    EnterPaymentMethodComponent,
    EnterBillingAddressComponent,
+    DiscountBadgeComponent,
  ],
  declarations: [
    BillingHistoryComponent,
@@ -51,6 +53,7 @@ import { UpdateLicenseComponent } from "./update-license.component";
    OffboardingSurveyComponent,
    IndividualSelfHostingLicenseUploaderComponent,
    OrganizationSelfHostingLicenseUploaderComponent,
+    DiscountBadgeComponent,
  ],
 })
 export class BillingSharedModule {}
--- a/apps/web/src/app/settings/preferences.component.html
+++ b/apps/web/src/app/settings/preferences.component.html
@@ -17,12 +17,12 @@
        {{ "vaultTimeoutActionPolicyInEffect" | i18n: (policy.action | i18n) }}
      </span>
    </bit-callout>
-    <auth-vault-timeout-input
+    <bit-session-timeout-input
      [vaultTimeoutOptions]="vaultTimeoutOptions"
      [formControl]="form.controls.vaultTimeout"
      ngDefaultControl
    >
-    </auth-vault-timeout-input>
+    </bit-session-timeout-input>
    <ng-container *ngIf="availableVaultTimeoutActions$ | async as availableVaultTimeoutActions">
      <bit-radio-group
        formControlName="vaultTimeoutAction"
--- a/apps/web/src/app/settings/preferences.component.ts
+++ b/apps/web/src/app/settings/preferences.component.ts
@@ -14,7 +14,6 @@ import {
  tap,
 } from "rxjs";

-import { VaultTimeoutInputComponent } from "@bitwarden/auth/angular";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { getFirstPolicy } from "@bitwarden/common/admin-console/services/policy/default-policy.service";
@@ -34,6 +33,7 @@ import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
 import { DialogService } from "@bitwarden/components";
+import { SessionTimeoutInputComponent } from "@bitwarden/key-management-ui";
 import { PermitCipherDetailsPopoverComponent } from "@bitwarden/vault";

 import { HeaderModule } from "../layouts/header/header.module";
@@ -52,7 +52,7 @@ import { SharedModule } from "../shared";
  imports: [
    SharedModule,
    HeaderModule,
-    VaultTimeoutInputComponent,
+    SessionTimeoutInputComponent,
    PermitCipherDetailsPopoverComponent,
  ],
 })
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -3250,9 +3250,18 @@
  "nextCharge": {
    "message": "Next charge"
  },
+  "nextChargeHeader": {
+    "message": "Next Charge"
+  },
+   "plan": {
+    "message": "Plan"
+  },
  "details": {
    "message": "Details"
  },
+  "discount": {
+    "message": "discount"
+  },
  "downloadLicense": {
    "message": "Download license"
  },
--- a/libs/auth/src/angular/index.ts
+++ b/libs/auth/src/angular/index.ts
@@ -43,9 +43,6 @@ export * from "./user-verification/user-verification-dialog.component";
 export * from "./user-verification/user-verification-dialog.types";
 export * from "./user-verification/user-verification-form-input.component";

-// vault timeout
-export * from "./vault-timeout-input/vault-timeout-input.component";
-
 // sso
 export * from "./sso/sso.component";
 export * from "./sso/sso-component.service";
--- a/libs/common/src/billing/models/response/organization-subscription.response.ts
+++ b/libs/common/src/billing/models/response/organization-subscription.response.ts
@@ -40,6 +40,7 @@ export class BillingCustomerDiscount extends BaseResponse {
  id: string;
  active: boolean;
  percentOff?: number;
+  amountOff?: number;
  appliesTo: string[];

  constructor(response: any) {
@@ -47,6 +48,7 @@ export class BillingCustomerDiscount extends BaseResponse {
    this.id = this.getResponseProperty("Id");
    this.active = this.getResponseProperty("Active");
    this.percentOff = this.getResponseProperty("PercentOff");
-    this.appliesTo = this.getResponseProperty("AppliesTo");
+    this.amountOff = this.getResponseProperty("AmountOff");
+    this.appliesTo = this.getResponseProperty("AppliesTo") || [];
  }
 }
--- a/libs/common/src/billing/models/response/subscription.response.ts
+++ b/libs/common/src/billing/models/response/subscription.response.ts
@@ -2,12 +2,15 @@
 // @ts-strict-ignore
 import { BaseResponse } from "../../../models/response/base.response";

+import { BillingCustomerDiscount } from "./organization-subscription.response";
+
 export class SubscriptionResponse extends BaseResponse {
  storageName: string;
  storageGb: number;
  maxStorageGb: number;
  subscription: BillingSubscriptionResponse;
  upcomingInvoice: BillingSubscriptionUpcomingInvoiceResponse;
+  customerDiscount: BillingCustomerDiscount;
  license: any;
  expiration: string;

@@ -20,11 +23,14 @@ export class SubscriptionResponse extends BaseResponse {
    this.expiration = this.getResponseProperty("Expiration");
    const subscription = this.getResponseProperty("Subscription");
    const upcomingInvoice = this.getResponseProperty("UpcomingInvoice");
+    const customerDiscount = this.getResponseProperty("CustomerDiscount");
    this.subscription = subscription == null ? null : new BillingSubscriptionResponse(subscription);
    this.upcomingInvoice =
      upcomingInvoice == null
        ? null
        : new BillingSubscriptionUpcomingInvoiceResponse(upcomingInvoice);
+    this.customerDiscount =
+      customerDiscount == null ? null : new BillingCustomerDiscount(customerDiscount);
  }
 }

--- a/libs/common/src/enums/feature-flag.enum.ts
+++ b/libs/common/src/enums/feature-flag.enum.ts
@@ -33,6 +33,7 @@ export enum FeatureFlag {
  PM26793_FetchPremiumPriceFromPricingService = "pm-26793-fetch-premium-price-from-pricing-service",
  PM23713_PremiumBadgeOpensNewPremiumUpgradeDialog = "pm-23713-premium-badge-opens-new-premium-upgrade-dialog",
  PM26462_Milestone_3 = "pm-26462-milestone-3",
+  PM23341_Milestone_2 = "pm-23341-milestone-2",

  /* Key Management */
  PrivateKeyRegeneration = "pm-12241-private-key-regeneration",
@@ -129,6 +130,7 @@ export const DefaultFeatureFlagValue = {
  [FeatureFlag.PM26793_FetchPremiumPriceFromPricingService]: FALSE,
  [FeatureFlag.PM23713_PremiumBadgeOpensNewPremiumUpgradeDialog]: FALSE,
  [FeatureFlag.PM26462_Milestone_3]: FALSE,
+  [FeatureFlag.PM23341_Milestone_2]: FALSE,

  /* Key Management */
  [FeatureFlag.PrivateKeyRegeneration]: FALSE,
--- a/libs/components/src/badge-list/badge-list.component.html
+++ b/libs/components/src/badge-list/badge-list.component.html
@@ -1,15 +1,15 @@
 <div class="tw-inline-flex tw-flex-wrap tw-gap-2">
-  @for (item of filteredItems; track item; let last = $last) {
+  @for (item of filteredItems(); track item; let last = $last) {
    <span bitBadge [variant]="variant()" [truncate]="truncate()">
      {{ item }}
    </span>
-    @if (!last || isFiltered) {
+    @if (!last || isFiltered()) {
      <span class="tw-sr-only">, </span>
    }
  }
-  @if (isFiltered) {
+  @if (isFiltered()) {
    <span bitBadge [variant]="variant()">
-      {{ "plusNMore" | i18n: (items().length - filteredItems.length).toString() }}
+      {{ "plusNMore" | i18n: (items().length - filteredItems().length).toString() }}
    </span>
  }
 </div>
--- a/libs/components/src/badge-list/badge-list.component.ts
+++ b/libs/components/src/badge-list/badge-list.component.ts
@@ -1,38 +1,60 @@
-import { Component, OnChanges, input } from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";

 import { I18nPipe } from "@bitwarden/ui-common";

 import { BadgeModule, BadgeVariant } from "../badge";

 function transformMaxItems(value: number | undefined) {
-  return value == undefined ? undefined : Math.max(1, value);
+  return value == null ? undefined : Math.max(1, value);
 }

-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
+/**
+ * Displays a collection of badges in a horizontal, wrapping layout.
+ *
+ * The component automatically handles overflow by showing a limited number of badges
+ * followed by a "+N more" badge when `maxItems` is specified and exceeded.
+ *
+ * Each badge inherits the `variant` and `truncate` settings, ensuring visual consistency
+ * across the list. Badges are separated by commas for screen readers to improve accessibility.
+ */
@Component({
  selector: "bit-badge-list",
  templateUrl: "badge-list.component.html",
  imports: [BadgeModule, I18nPipe],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class BadgeListComponent implements OnChanges {
-  protected filteredItems: string[] = [];
-  protected isFiltered = false;
-
+export class BadgeListComponent {
+  /**
+   * The visual variant to apply to all badges in the list.
+   */
  readonly variant = input<BadgeVariant>("primary");
+
+  /**
+   * Items to display as badges.
+   */
  readonly items = input<string[]>([]);
+
+  /**
+   * Whether to truncate long badge text with ellipsis.
+   */
  readonly truncate = input(true);

+  /**
+   * Maximum number of badges to display before showing a "+N more" badge.
+   */
  readonly maxItems = input(undefined, { transform: transformMaxItems });

-  ngOnChanges() {
+  protected readonly filteredItems = computed(() => {
    const maxItems = this.maxItems();
+    const items = this.items();

-    if (maxItems == undefined || this.items().length <= maxItems) {
-      this.filteredItems = this.items();
-    } else {
-      this.filteredItems = this.items().slice(0, maxItems - 1);
+    if (maxItems == null || items.length <= maxItems) {
+      return items;
    }
-    this.isFiltered = this.items().length > this.filteredItems.length;
-  }
+    return items.slice(0, maxItems - 1);
+  });
+
+  protected readonly isFiltered = computed(() => {
+    return this.items().length > this.filteredItems().length;
+  });
 }
--- a/libs/components/src/badge/badge.component.ts
+++ b/libs/components/src/badge/badge.component.ts
@@ -1,5 +1,12 @@
 import { CommonModule } from "@angular/common";
-import { Component, ElementRef, HostBinding, input } from "@angular/core";
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  inject,
+  input,
+} from "@angular/core";

 import { FocusableElement } from "../shared/focusable-element";

@@ -44,27 +51,56 @@ const hoverStyles: Record<BadgeVariant, string[]> = {
  ],
 };
 /**
-  * Badges are primarily used as labels, counters, and small buttons.
-
-  * Typically Badges are only used with text set to `text-xs`. If additional sizes are needed, the component configurations may be reviewed and adjusted.
-
-  * The Badge directive can be used on a `<span>` (non clickable events), or an `<a>` or `<button>` tag
-
-  * > `NOTE:` The Focus and Hover states only apply to badges used for interactive events.
-  *
-  * > `NOTE:` The `disabled` state only applies to buttons.
-  *
-*/
-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
+ * Badges are primarily used as labels, counters, and small buttons.
+ * Typically Badges are only used with text set to `text-xs`. If additional sizes are needed, the component configurations may be reviewed and adjusted.
+ *
+ * The Badge directive can be used on a `<span>` (non clickable events), or an `<a>` or `<button>` tag
+ *
+ * > `NOTE:` The Focus and Hover states only apply to badges used for interactive events.
+ *
+ * > `NOTE:` The `disabled` state only applies to buttons.
+ */
@Component({
  selector: "span[bitBadge], a[bitBadge], button[bitBadge]",
  providers: [{ provide: FocusableElement, useExisting: BadgeComponent }],
  imports: [CommonModule],
  templateUrl: "badge.component.html",
+  host: {
+    "[class]": "classList()",
+    "[attr.title]": "titleAttr()",
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BadgeComponent implements FocusableElement {
-  @HostBinding("class") get classList() {
+  private readonly el = inject(ElementRef<HTMLElement>);
+
+  private readonly hasHoverEffects = this.el.nativeElement.nodeName !== "SPAN";
+
+  /**
+   * Optional override for the automatic badge title attribute when truncating.
+   * When truncating is enabled and this is not provided, the badge will automatically
+   * use its text content as the title.
+   */
+  readonly title = input<string>();
+
+  /**
+   * Visual variant that determines the badge's color scheme.
+   */
+  readonly variant = input<BadgeVariant>("primary");
+
+  /**
+   * Whether to truncate long text with ellipsis when it exceeds maxWidthClass.
+   * When enabled, a title attribute is automatically added for accessibility.
+   */
+  readonly truncate = input(true);
+
+  /**
+   * Tailwind max-width class to apply when truncating is enabled.
+   * Must be a valid Tailwind max-width utility class (e.g., "tw-max-w-40", "tw-max-w-xs").
+   */
+  readonly maxWidthClass = input<`tw-max-w-${string}`>("tw-max-w-40");
+
+  protected readonly classList = computed(() => {
    return [
      "tw-inline-block",
      "tw-py-1",
@@ -94,39 +130,17 @@ export class BadgeComponent implements FocusableElement {
      .concat(styles[this.variant()])
      .concat(this.hasHoverEffects ? [...hoverStyles[this.variant()], "tw-min-w-10"] : [])
      .concat(this.truncate() ? this.maxWidthClass() : []);
-  }
-  @HostBinding("attr.title") get titleAttr() {
+  });
+
+  protected readonly titleAttr = computed(() => {
    const title = this.title();
    if (title !== undefined) {
      return title;
    }
-    return this.truncate() ? this?.el?.nativeElement?.textContent?.trim() : null;
-  }
-
-  /**
-   * Optional override for the automatic badge title when truncating.
-   */
-  readonly title = input<string>();
-
-  /**
-   * Variant, sets the background color of the badge.
-   */
-  readonly variant = input<BadgeVariant>("primary");
-
-  /**
-   * Truncate long text
-   */
-  readonly truncate = input(true);
-
-  readonly maxWidthClass = input<`tw-max-w-${string}`>("tw-max-w-40");
+    return this.truncate() ? this.el.nativeElement?.textContent?.trim() : null;
+  });

  getFocusTarget() {
    return this.el.nativeElement;
  }
-
-  private hasHoverEffects = false;
-
-  constructor(private el: ElementRef<HTMLElement>) {
-    this.hasHoverEffects = el?.nativeElement?.nodeName != "SPAN";
-  }
 }
--- a/libs/key-management-ui/src/index.ts
+++ b/libs/key-management-ui/src/index.ts
@@ -11,3 +11,4 @@ export { RemovePasswordComponent } from "./key-connector/remove-password.compone
 export { ConfirmKeyConnectorDomainComponent } from "./key-connector/confirm-key-connector-domain.component";
 export { SessionTimeoutSettingsComponent } from "./session-timeout/components/session-timeout-settings.component";
 export { SessionTimeoutSettingsComponentService } from "./session-timeout/services/session-timeout-settings-component.service";
+export { SessionTimeoutInputComponent } from "./session-timeout/components/session-timeout-input.component";
--- a/libs/key-management-ui/src/session-timeout/components/session-timeout-input.component.html
+++ b/libs/key-management-ui/src/session-timeout/components/session-timeout-input.component.html
--- a/libs/key-management-ui/src/session-timeout/components/session-timeout-input.component.spec.ts
+++ b/libs/key-management-ui/src/session-timeout/components/session-timeout-input.component.spec.ts
@@ -12,11 +12,11 @@ import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { mockAccountServiceWith } from "@bitwarden/common/spec";
 import { UserId } from "@bitwarden/common/types/guid";

-import { VaultTimeoutInputComponent } from "./vault-timeout-input.component";
+import { SessionTimeoutInputComponent } from "./session-timeout-input.component";

-describe("VaultTimeoutInputComponent", () => {
-  let component: VaultTimeoutInputComponent;
-  let fixture: ComponentFixture<VaultTimeoutInputComponent>;
+describe("SessionTimeoutInputComponent", () => {
+  let component: SessionTimeoutInputComponent;
+  let fixture: ComponentFixture<SessionTimeoutInputComponent>;
  const policiesByType$ = jest.fn().mockReturnValue(new BehaviorSubject({}));
  const availableVaultTimeoutActions$ = jest.fn().mockReturnValue(new BehaviorSubject([]));
  const mockUserId = Utils.newGuid() as UserId;
@@ -24,7 +24,7 @@ describe("VaultTimeoutInputComponent", () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      imports: [VaultTimeoutInputComponent],
+      imports: [SessionTimeoutInputComponent],
      providers: [
        { provide: PolicyService, useValue: { policiesByType$ } },
        { provide: AccountService, useValue: accountService },
@@ -33,7 +33,7 @@ describe("VaultTimeoutInputComponent", () => {
      ],
    }).compileComponents();

-    fixture = TestBed.createComponent(VaultTimeoutInputComponent);
+    fixture = TestBed.createComponent(SessionTimeoutInputComponent);
    component = fixture.componentInstance;
    component.vaultTimeoutOptions = [
      { name: "oneMinute", value: 1 },
--- a/libs/key-management-ui/src/session-timeout/components/session-timeout-input.component.ts
+++ b/libs/key-management-ui/src/session-timeout/components/session-timeout-input.component.ts
@@ -30,8 +30,6 @@ import {
  VaultTimeoutSettingsService,
 } from "@bitwarden/common/key-management/vault-timeout";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-// This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
-// eslint-disable-next-line no-restricted-imports
 import { FormFieldModule, SelectModule } from "@bitwarden/components";

 type VaultTimeoutForm = FormGroup<{
@@ -47,34 +45,66 @@ type VaultTimeoutFormValue = VaultTimeoutForm["value"];
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
-  selector: "auth-vault-timeout-input",
-  templateUrl: "vault-timeout-input.component.html",
+  selector: "bit-session-timeout-input",
+  templateUrl: "session-timeout-input.component.html",
  imports: [CommonModule, JslibModule, ReactiveFormsModule, FormFieldModule, SelectModule],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      multi: true,
-      useExisting: VaultTimeoutInputComponent,
+      useExisting: SessionTimeoutInputComponent,
    },
    {
      provide: NG_VALIDATORS,
      multi: true,
-      useExisting: VaultTimeoutInputComponent,
+      useExisting: SessionTimeoutInputComponent,
    },
  ],
 })
-export class VaultTimeoutInputComponent
+export class SessionTimeoutInputComponent
  implements ControlValueAccessor, Validator, OnInit, OnDestroy, OnChanges
 {
+  static CUSTOM_VALUE = -100;
+  static MIN_CUSTOM_MINUTES = 0;
+  form: VaultTimeoutForm = this.formBuilder.group({
+    vaultTimeout: [null],
+    custom: this.formBuilder.group({
+      hours: [null],
+      minutes: [null],
+    }),
+  });
+
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
+  @Input() vaultTimeoutOptions: VaultTimeoutOption[];
+
+  vaultTimeoutPolicy: Policy;
+  vaultTimeoutPolicyHours: number;
+  vaultTimeoutPolicyMinutes: number;
+
  protected readonly VaultTimeoutAction = VaultTimeoutAction;

+  protected canLockVault$: Observable<boolean>;
+  private onChange: (vaultTimeout: VaultTimeout) => void;
+  private validatorChange: () => void;
+  private destroy$ = new Subject<void>();
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private policyService: PolicyService,
+    private vaultTimeoutSettingsService: VaultTimeoutSettingsService,
+    private i18nService: I18nService,
+    private accountService: AccountService,
+  ) {}
+
  get showCustom() {
-    return this.form.get("vaultTimeout").value === VaultTimeoutInputComponent.CUSTOM_VALUE;
+    return this.form.get("vaultTimeout").value === SessionTimeoutInputComponent.CUSTOM_VALUE;
  }

  get exceedsMinimumTimeout(): boolean {
    return (
-      !this.showCustom || this.customTimeInMinutes() > VaultTimeoutInputComponent.MIN_CUSTOM_MINUTES
+      !this.showCustom ||
+      this.customTimeInMinutes() > SessionTimeoutInputComponent.MIN_CUSTOM_MINUTES
    );
  }

@@ -101,39 +131,6 @@ export class VaultTimeoutInputComponent
    });
  }

-  static CUSTOM_VALUE = -100;
-  static MIN_CUSTOM_MINUTES = 0;
-
-  form: VaultTimeoutForm = this.formBuilder.group({
-    vaultTimeout: [null],
-    custom: this.formBuilder.group({
-      hours: [null],
-      minutes: [null],
-    }),
-  });
-
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() vaultTimeoutOptions: VaultTimeoutOption[];
-
-  vaultTimeoutPolicy: Policy;
-  vaultTimeoutPolicyHours: number;
-  vaultTimeoutPolicyMinutes: number;
-
-  protected canLockVault$: Observable<boolean>;
-
-  private onChange: (vaultTimeout: VaultTimeout) => void;
-  private validatorChange: () => void;
-  private destroy$ = new Subject<void>();
-
-  constructor(
-    private formBuilder: FormBuilder,
-    private policyService: PolicyService,
-    private vaultTimeoutSettingsService: VaultTimeoutSettingsService,
-    private i18nService: I18nService,
-    private accountService: AccountService,
-  ) {}
-
  async ngOnInit() {
    this.accountService.activeAccount$
      .pipe(
@@ -163,7 +160,7 @@ export class VaultTimeoutInputComponent
    // ex: user picks 5 min, goes to custom, we want to show 0 hr, 5 min in the custom fields
    this.form.controls.vaultTimeout.valueChanges
      .pipe(
-        filter((value) => value !== VaultTimeoutInputComponent.CUSTOM_VALUE),
+        filter((value) => value !== SessionTimeoutInputComponent.CUSTOM_VALUE),
        takeUntil(this.destroy$),
      )
      .subscribe((value) => {
@@ -195,17 +192,17 @@ export class VaultTimeoutInputComponent

  ngOnChanges() {
    if (
-      !this.vaultTimeoutOptions.find((p) => p.value === VaultTimeoutInputComponent.CUSTOM_VALUE)
+      !this.vaultTimeoutOptions.find((p) => p.value === SessionTimeoutInputComponent.CUSTOM_VALUE)
    ) {
      this.vaultTimeoutOptions.push({
        name: this.i18nService.t("custom"),
-        value: VaultTimeoutInputComponent.CUSTOM_VALUE,
+        value: SessionTimeoutInputComponent.CUSTOM_VALUE,
      });
    }
  }

  getVaultTimeout(value: VaultTimeoutFormValue) {
-    if (value.vaultTimeout !== VaultTimeoutInputComponent.CUSTOM_VALUE) {
+    if (value.vaultTimeout !== SessionTimeoutInputComponent.CUSTOM_VALUE) {
      return value.vaultTimeout;
    }

@@ -219,7 +216,7 @@ export class VaultTimeoutInputComponent

    if (this.vaultTimeoutOptions.every((p) => p.value !== value)) {
      this.form.setValue({
-        vaultTimeout: VaultTimeoutInputComponent.CUSTOM_VALUE,
+        vaultTimeout: SessionTimeoutInputComponent.CUSTOM_VALUE,
        custom: {
          hours: Math.floor(value / 60),
          minutes: value % 60,
@@ -271,7 +268,7 @@ export class VaultTimeoutInputComponent

    this.vaultTimeoutOptions = this.vaultTimeoutOptions.filter((vaultTimeoutOption) => {
      // Always include the custom option
-      if (vaultTimeoutOption.value === VaultTimeoutInputComponent.CUSTOM_VALUE) {
+      if (vaultTimeoutOption.value === SessionTimeoutInputComponent.CUSTOM_VALUE) {
        return true;
      }

--- a/libs/key-management-ui/src/session-timeout/components/session-timeout-settings.component.html
+++ b/libs/key-management-ui/src/session-timeout/components/session-timeout-settings.component.html
@@ -1,10 +1,10 @@
 <div [formGroup]="formGroup">
-  <auth-vault-timeout-input
+  <bit-session-timeout-input
    [vaultTimeoutOptions]="availableTimeoutOptions$ | async"
    [formControl]="formGroup.controls.timeout"
    ngDefaultControl
  >
-  </auth-vault-timeout-input>
+  </bit-session-timeout-input>

  <bit-form-field [disableMargin]="true">
    <bit-label>{{ "sessionTimeoutSettingsAction" | i18n }}</bit-label>
--- a/libs/key-management-ui/src/session-timeout/components/session-timeout-settings.component.spec.ts
+++ b/libs/key-management-ui/src/session-timeout/components/session-timeout-settings.component.spec.ts
@@ -4,7 +4,6 @@ import { NoopAnimationsModule } from "@angular/platform-browser/animations";
 import { mock, MockProxy } from "jest-mock-extended";
 import { BehaviorSubject, filter, firstValueFrom, of } from "rxjs";

-import { VaultTimeoutInputComponent } from "@bitwarden/auth/angular";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { Policy } from "@bitwarden/common/admin-console/models/domain/policy";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
@@ -22,6 +21,7 @@ import { UserId } from "@bitwarden/common/types/guid";
 import { DialogService, ToastService } from "@bitwarden/components";
 import { LogService } from "@bitwarden/logging";

+import { SessionTimeoutInputComponent } from "../components/session-timeout-input.component";
 import { SessionTimeoutSettingsComponentService } from "../services/session-timeout-settings-component.service";

 import { SessionTimeoutSettingsComponent } from "./session-timeout-settings.component";
@@ -87,7 +87,7 @@ describe("SessionTimeoutSettingsComponent", () => {
      imports: [
        SessionTimeoutSettingsComponent,
        ReactiveFormsModule,
-        VaultTimeoutInputComponent,
+        SessionTimeoutInputComponent,
        NoopAnimationsModule,
      ],
      providers: [
--- a/libs/key-management-ui/src/session-timeout/components/session-timeout-settings.component.ts
+++ b/libs/key-management-ui/src/session-timeout/components/session-timeout-settings.component.ts
@@ -25,7 +25,6 @@ import {
 } from "rxjs";

 import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { VaultTimeoutInputComponent } from "@bitwarden/auth/angular";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { getFirstPolicy } from "@bitwarden/common/admin-console/services/policy/default-policy.service";
@@ -56,6 +55,8 @@ import { LogService } from "@bitwarden/logging";

 import { SessionTimeoutSettingsComponentService } from "../services/session-timeout-settings-component.service";

+import { SessionTimeoutInputComponent } from "./session-timeout-input.component";
+
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
@@ -74,7 +75,7 @@ import { SessionTimeoutSettingsComponentService } from "../services/session-time
    RouterModule,
    SelectModule,
    TypographyModule,
-    VaultTimeoutInputComponent,
+    SessionTimeoutInputComponent,
  ],
 })
 export class SessionTimeoutSettingsComponent implements OnInit {
--- a/libs/pricing/src/components/discount-badge/discount-badge.component.html
+++ b/libs/pricing/src/components/discount-badge/discount-badge.component.html
@@ -0,0 +1,10 @@
+<span
+  *ngIf="hasDiscount()"
+  bitBadge
+  variant="success"
+  class="tw-w-fit"
+  role="status"
+  [attr.aria-label]="getDiscountText()"
+>
+  {{ getDiscountText() }}
+</span>
--- a/libs/pricing/src/components/discount-badge/discount-badge.component.mdx
+++ b/libs/pricing/src/components/discount-badge/discount-badge.component.mdx
@@ -0,0 +1,67 @@
+import { Meta, Story, Canvas } from "@storybook/addon-docs";
+import * as DiscountBadgeStories from "./discount-badge.component.stories";
+
+<Meta of={DiscountBadgeStories} />
+
+# Discount Badge
+
+A reusable UI component for displaying discount information (percentage or fixed amount) in a badge
+format.
+
+<Canvas of={DiscountBadgeStories.PercentDiscount} />
+
+## Usage
+
+The discount badge component is designed to be used in billing and subscription interfaces to
+display discount information.
+
+```ts
+import { DiscountBadgeComponent, DiscountInfo } from "@bitwarden/pricing";
+```
+
+```html
+<billing-discount-badge [discount]="discountInfo"></billing-discount-badge>
+```
+
+## API
+
+### Inputs
+
+| Input      | Type                   | Description                                                                      |
+| ---------- | ---------------------- | -------------------------------------------------------------------------------- |
+| `discount` | `DiscountInfo \| null` | **Optional.** Discount information object. If null or inactive, badge is hidden. |
+
+### DiscountInfo Interface
+
+```ts
+interface DiscountInfo {
+  /** Whether the discount is currently active */
+  active: boolean;
+  /** Percentage discount (0-100 or 0-1 scale) */
+  percentOff?: number;
+  /** Fixed amount discount in the base currency */
+  amountOff?: number;
+}
+```
+
+## Behavior
+
+- The badge is only displayed when `discount` is provided, `active` is `true`, and either
+  `percentOff` or `amountOff` is greater than 0.
+- If both `percentOff` and `amountOff` are provided, `percentOff` takes precedence.
+- Percentage values can be provided as 0-100 (e.g., `20` for 20%) or 0-1 (e.g., `0.2` for 20%).
+- Amount values are formatted as currency (USD) with 2 decimal places.
+
+## Examples
+
+### Percentage Discount
+
+<Canvas of={DiscountBadgeStories.PercentDiscount} />
+
+### Amount Discount
+
+<Canvas of={DiscountBadgeStories.AmountDiscount} />
+
+### Inactive Discount
+
+<Canvas of={DiscountBadgeStories.InactiveDiscount} />
--- a/libs/pricing/src/components/discount-badge/discount-badge.component.spec.ts
+++ b/libs/pricing/src/components/discount-badge/discount-badge.component.spec.ts
@@ -0,0 +1,108 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+
+import { DiscountBadgeComponent } from "./discount-badge.component";
+
+describe("DiscountBadgeComponent", () => {
+  let component: DiscountBadgeComponent;
+  let fixture: ComponentFixture<DiscountBadgeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DiscountBadgeComponent],
+      providers: [
+        {
+          provide: I18nService,
+          useValue: {
+            t: (key: string) => key,
+          },
+        },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DiscountBadgeComponent);
+    component = fixture.componentInstance;
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe("hasDiscount", () => {
+    it("should return false when discount is null", () => {
+      fixture.componentRef.setInput("discount", null);
+      fixture.detectChanges();
+      expect(component.hasDiscount()).toBe(false);
+    });
+
+    it("should return false when discount is inactive", () => {
+      fixture.componentRef.setInput("discount", { active: false, percentOff: 20 });
+      fixture.detectChanges();
+      expect(component.hasDiscount()).toBe(false);
+    });
+
+    it("should return true when discount is active with percentOff", () => {
+      fixture.componentRef.setInput("discount", { active: true, percentOff: 20 });
+      fixture.detectChanges();
+      expect(component.hasDiscount()).toBe(true);
+    });
+
+    it("should return true when discount is active with amountOff", () => {
+      fixture.componentRef.setInput("discount", { active: true, amountOff: 10.99 });
+      fixture.detectChanges();
+      expect(component.hasDiscount()).toBe(true);
+    });
+
+    it("should return false when percentOff is 0", () => {
+      fixture.componentRef.setInput("discount", { active: true, percentOff: 0 });
+      fixture.detectChanges();
+      expect(component.hasDiscount()).toBe(false);
+    });
+
+    it("should return false when amountOff is 0", () => {
+      fixture.componentRef.setInput("discount", { active: true, amountOff: 0 });
+      fixture.detectChanges();
+      expect(component.hasDiscount()).toBe(false);
+    });
+  });
+
+  describe("getDiscountText", () => {
+    it("should return null when discount is null", () => {
+      fixture.componentRef.setInput("discount", null);
+      fixture.detectChanges();
+      expect(component.getDiscountText()).toBeNull();
+    });
+
+    it("should return percentage text when percentOff is provided", () => {
+      fixture.componentRef.setInput("discount", { active: true, percentOff: 20 });
+      fixture.detectChanges();
+      const text = component.getDiscountText();
+      expect(text).toContain("20%");
+      expect(text).toContain("discount");
+    });
+
+    it("should convert decimal percentOff to percentage", () => {
+      fixture.componentRef.setInput("discount", { active: true, percentOff: 0.15 });
+      fixture.detectChanges();
+      const text = component.getDiscountText();
+      expect(text).toContain("15%");
+    });
+
+    it("should return amount text when amountOff is provided", () => {
+      fixture.componentRef.setInput("discount", { active: true, amountOff: 10.99 });
+      fixture.detectChanges();
+      const text = component.getDiscountText();
+      expect(text).toContain("$10.99");
+      expect(text).toContain("discount");
+    });
+
+    it("should prefer percentOff over amountOff", () => {
+      fixture.componentRef.setInput("discount", { active: true, percentOff: 25, amountOff: 10.99 });
+      fixture.detectChanges();
+      const text = component.getDiscountText();
+      expect(text).toContain("25%");
+      expect(text).not.toContain("$10.99");
+    });
+  });
+});
--- a/libs/pricing/src/components/discount-badge/discount-badge.component.stories.ts
+++ b/libs/pricing/src/components/discount-badge/discount-badge.component.stories.ts
@@ -0,0 +1,123 @@
+import { Meta, moduleMetadata, StoryObj } from "@storybook/angular";
+
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { BadgeModule } from "@bitwarden/components";
+
+import { DiscountBadgeComponent, DiscountInfo } from "./discount-badge.component";
+
+export default {
+  title: "Billing/Discount Badge",
+  component: DiscountBadgeComponent,
+  description: "A badge component that displays discount information (percentage or fixed amount).",
+  decorators: [
+    moduleMetadata({
+      imports: [BadgeModule],
+      providers: [
+        {
+          provide: I18nService,
+          useValue: {
+            t: (key: string) => {
+              switch (key) {
+                case "discount":
+                  return "discount";
+                default:
+                  return key;
+              }
+            },
+          },
+        },
+      ],
+    }),
+  ],
+} as Meta<DiscountBadgeComponent>;
+
+type Story = StoryObj<DiscountBadgeComponent>;
+
+export const PercentDiscount: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<billing-discount-badge [discount]="discount"></billing-discount-badge>`,
+  }),
+  args: {
+    discount: {
+      active: true,
+      percentOff: 20,
+    } as DiscountInfo,
+  },
+};
+
+export const PercentDiscountDecimal: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<billing-discount-badge [discount]="discount"></billing-discount-badge>`,
+  }),
+  args: {
+    discount: {
+      active: true,
+      percentOff: 0.15, // 15% in decimal format
+    } as DiscountInfo,
+  },
+};
+
+export const AmountDiscount: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<billing-discount-badge [discount]="discount"></billing-discount-badge>`,
+  }),
+  args: {
+    discount: {
+      active: true,
+      amountOff: 10.99,
+    } as DiscountInfo,
+  },
+};
+
+export const LargeAmountDiscount: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<billing-discount-badge [discount]="discount"></billing-discount-badge>`,
+  }),
+  args: {
+    discount: {
+      active: true,
+      amountOff: 99.99,
+    } as DiscountInfo,
+  },
+};
+
+export const InactiveDiscount: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<billing-discount-badge [discount]="discount"></billing-discount-badge>`,
+  }),
+  args: {
+    discount: {
+      active: false,
+      percentOff: 20,
+    } as DiscountInfo,
+  },
+};
+
+export const NoDiscount: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<billing-discount-badge [discount]="discount"></billing-discount-badge>`,
+  }),
+  args: {
+    discount: null,
+  },
+};
+
+export const PercentAndAmountPreferPercent: Story = {
+  render: (args) => ({
+    props: args,
+    template: `<billing-discount-badge [discount]="discount"></billing-discount-badge>`,
+  }),
+  args: {
+    discount: {
+      active: true,
+      percentOff: 25,
+      amountOff: 10.99,
+    } as DiscountInfo,
+  },
+};
--- a/libs/pricing/src/components/discount-badge/discount-badge.component.ts
+++ b/libs/pricing/src/components/discount-badge/discount-badge.component.ts
@@ -0,0 +1,70 @@
+import { CommonModule } from "@angular/common";
+import { ChangeDetectionStrategy, Component, inject, input } from "@angular/core";
+
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { BadgeModule } from "@bitwarden/components";
+
+/**
+ * Interface for discount information that can be displayed in the discount badge.
+ * This is abstracted from the response class to avoid tight coupling.
+ */
+export interface DiscountInfo {
+  /** Whether the discount is currently active */
+  active: boolean;
+  /** Percentage discount (0-100 or 0-1 scale) */
+  percentOff?: number;
+  /** Fixed amount discount in the base currency */
+  amountOff?: number;
+}
+
+@Component({
+  selector: "billing-discount-badge",
+  templateUrl: "./discount-badge.component.html",
+  standalone: true,
+  imports: [CommonModule, BadgeModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DiscountBadgeComponent {
+  readonly discount = input<DiscountInfo | null>(null);
+
+  private i18nService = inject(I18nService);
+
+  getDiscountText(): string | null {
+    const discount = this.discount();
+    if (!discount) {
+      return null;
+    }
+
+    if (discount.percentOff != null && discount.percentOff > 0) {
+      const percentValue =
+        discount.percentOff < 1 ? discount.percentOff * 100 : discount.percentOff;
+      return `${Math.round(percentValue)}% ${this.i18nService.t("discount")}`;
+    }
+
+    if (discount.amountOff != null && discount.amountOff > 0) {
+      const formattedAmount = new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+      }).format(discount.amountOff);
+      return `${formattedAmount} ${this.i18nService.t("discount")}`;
+    }
+
+    return null;
+  }
+
+  hasDiscount(): boolean {
+    const discount = this.discount();
+    if (!discount) {
+      return false;
+    }
+    if (!discount.active) {
+      return false;
+    }
+    return (
+      (discount.percentOff != null && discount.percentOff > 0) ||
+      (discount.amountOff != null && discount.amountOff > 0)
+    );
+  }
+}
--- a/libs/pricing/src/index.ts
+++ b/libs/pricing/src/index.ts
@@ -1,3 +1,4 @@
 // Components
 export * from "./components/pricing-card/pricing-card.component";
 export * from "./components/cart-summary/cart-summary.component";
+export * from "./components/discount-badge/discount-badge.component";
--- a/package-lock.json
+++ b/package-lock.json
@@ -294,7 +294,7 @@
    },
    "apps/web": {
      "name": "@bitwarden/web-vault",
-      "version": "2025.11.0"
+      "version": "2025.11.2"
    },
    "libs/admin-console": {
      "name": "@bitwarden/admin-console",