Merge branch 'master' into feature/org-admin-refresh

2025-12-13 14:53:33 +00:00 · 2022-12-20 12:59:34 -05:00
parent 260580237a b331f5b329
commit 87c2127a12
63 changed files with 585 additions and 350 deletions
--- a/.github/workflows/staged-rollout-desktop.yml
+++ b/.github/workflows/staged-rollout-desktop.yml
@@ -15,26 +15,9 @@ defaults:
    shell: bash

 jobs:
-  setup:
-    name: Setup
-    runs-on: ubuntu-22.04
-    steps:
-      - name: Checkout repo
-        uses: actions/checkout@2541b1294d2704b0964813337f33b291d3f8596b
-
-      - name: Branch check
-        run: |
-          if [[ "$GITHUB_REF" != "refs/heads/rc" ]] && [[ "$GITHUB_REF" != "refs/heads/hotfix-rc-desktop" ]]; then
-            echo "==================================="
-            echo "[!] Can only increase rollout from the 'rc' or 'hotfix-rc-desktop' branches"
-            echo "==================================="
-            exit 1
-          fi
-
  rollout:
    name: Update Rollout Percentage
    runs-on: ubuntu-22.04
-    needs: setup
    steps:
      - name: Login to Azure
        uses: Azure/login@ec3c14589bd3e9312b3cc8c41e6860e258df9010
--- a/apps/browser/package.json
+++ b/apps/browser/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@bitwarden/browser",
-  "version": "2022.12.0",
+  "version": "2022.12.1",
  "scripts": {
    "build": "webpack",
    "build:mv3": "cross-env MANIFEST_VERSION=3 webpack",
--- a/apps/browser/src/manifest.json
+++ b/apps/browser/src/manifest.json
@@ -2,7 +2,7 @@
  "manifest_version": 2,
  "name": "__MSG_extName__",
  "short_name": "__MSG_appName__",
-  "version": "2022.12.0",
+  "version": "2022.12.1",
  "description": "__MSG_extDesc__",
  "default_locale": "en",
  "author": "Bitwarden Inc.",
--- a/apps/browser/src/manifest.v3.json
+++ b/apps/browser/src/manifest.v3.json
@@ -3,7 +3,7 @@
  "minimum_chrome_version": "102.0",
  "name": "__MSG_extName__",
  "short_name": "__MSG_appName__",
-  "version": "2022.12.0",
+  "version": "2022.12.1",
  "description": "__MSG_extDesc__",
  "default_locale": "en",
  "author": "Bitwarden Inc.",
--- a/apps/browser/src/popup/app.module.ts
+++ b/apps/browser/src/popup/app.module.ts
@@ -64,6 +64,8 @@ import { BrowserAnimationsModule } from "@angular/platform-browser/animations";

 import { BitwardenToastModule } from "@bitwarden/angular/components/toastr.component";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { ColorPasswordCountPipe } from "@bitwarden/angular/pipes/color-password-count.pipe";
+import { ColorPasswordPipe } from "@bitwarden/angular/pipes/color-password.pipe";

 import { EnvironmentComponent } from "./accounts/environment.component";
 import { HintComponent } from "./accounts/hint.component";
@@ -202,6 +204,8 @@ registerLocaleData(localeZhTw, "zh-TW");
    CipherRowComponent,
    VaultItemsComponent,
    CollectionsComponent,
+    ColorPasswordPipe,
+    ColorPasswordCountPipe,
    CurrentTabComponent,
    EnvironmentComponent,
    ExcludedDomainsComponent,
--- a/apps/browser/src/popup/scss/misc.scss
+++ b/apps/browser/src/popup/scss/misc.scss
@@ -193,7 +193,7 @@ p.lead {
  font-size: 8px;

  @include themify($themes) {
-    color: themed("mutedColor") !important;
+    color: themed("passwordCountText") !important;
  }
 }

--- a/apps/browser/src/popup/scss/variables.scss
+++ b/apps/browser/src/popup/scss/variables.scss
@@ -109,6 +109,7 @@ $themes: (
    logoSuffix: "dark",
    passwordNumberColor: #007fde,
    passwordSpecialColor: #c40800,
+    passwordCountText: #212529,
    calloutBorderColor: $border-color-dark,
    calloutBackgroundColor: $box-background-color,
    toastTextColor: #ffffff,
@@ -170,6 +171,7 @@ $themes: (
    logoSuffix: "white",
    passwordNumberColor: #6f9df1,
    passwordSpecialColor: #ff8d85,
+    passwordCountText: #ffffff,
    calloutBorderColor: #4c525f,
    calloutBackgroundColor: #3c424e,
    toastTextColor: #1f242e,
@@ -230,6 +232,7 @@ $themes: (
    logoSuffix: "white",
    passwordNumberColor: $nord8,
    passwordSpecialColor: $nord12,
+    passwordCountText: $nord5,
    calloutBorderColor: $nord0,
    calloutBackgroundColor: $nord2,
    toastTextColor: #ffffff,
@@ -290,6 +293,7 @@ $themes: (
    logoSuffix: "white",
    passwordNumberColor: $solarizedDarkCyan,
    passwordSpecialColor: $solarizedDarkYellow,
+    passwordCountText: $solarizedDarkBase2,
    calloutBorderColor: $solarizedDarkBase03,
    calloutBackgroundColor: $solarizedDarkBase01,
    toastTextColor: #ffffff,
--- a/apps/browser/src/popup/vault/password-history.component.html
+++ b/apps/browser/src/popup/vault/password-history.component.html
@@ -13,9 +13,10 @@
      <div class="box-content-row box-content-row-flex" *ngFor="let h of history">
        <div class="row-main">
          <div class="row-main-content">
-            <span class="text monospaced no-ellipsis">
-              {{ h.password }}
-            </span>
+            <span
+              class="text monospaced no-ellipsis"
+              [innerHTML]="h.password | colorPassword"
+            ></span>
            <span class="detail">{{ h.lastUsedDate | date: "medium" }}</span>
          </div>
        </div>
--- a/apps/desktop/src/app/app.module.ts
+++ b/apps/desktop/src/app/app.module.ts
@@ -58,6 +58,9 @@ import localeZhCn from "@angular/common/locales/zh-Hans";
 import localeZhTw from "@angular/common/locales/zh-Hant";
 import { NgModule } from "@angular/core";

+import { ColorPasswordCountPipe } from "@bitwarden/angular/pipes/color-password-count.pipe";
+import { ColorPasswordPipe } from "@bitwarden/angular/pipes/color-password.pipe";
+
 import { AccessibilityCookieComponent } from "./accounts/accessibility-cookie.component";
 import { DeleteAccountComponent } from "./accounts/delete-account.component";
 import { EnvironmentComponent } from "./accounts/environment.component";
@@ -170,6 +173,8 @@ registerLocaleData(localeZhTw, "zh-TW");
    AttachmentsComponent,
    VaultItemsComponent,
    CollectionsComponent,
+    ColorPasswordPipe,
+    ColorPasswordCountPipe,
    DeleteAccountComponent,
    EnvironmentComponent,
    ExportComponent,
--- a/apps/desktop/src/app/vault/password-generator-history.component.html
+++ b/apps/desktop/src/app/vault/password-generator-history.component.html
@@ -10,7 +10,7 @@
            <div class="box-content-row box-content-row-flex" *ngFor="let h of history">
              <div class="row-main">
                <div
-                  class="generated-wrapper monospaced"
+                  class="password-wrapper monospaced"
                  appSelectCopy
                  [innerHTML]="h.password | colorPassword"
                ></div>
--- a/apps/desktop/src/app/vault/password-history.component.html
+++ b/apps/desktop/src/app/vault/password-history.component.html
@@ -9,9 +9,7 @@
          <div class="box-content condensed">
            <div class="box-content-row box-content-row-flex" *ngFor="let h of history">
              <div class="row-main">
-                <span class="text monospaced">
-                  {{ h.password }}
-                </span>
+                <span class="text monospaced" [innerHTML]="h.password | colorPassword"></span>
                <span class="detail">{{ h.lastUsedDate | date: "medium" }}</span>
              </div>
              <div class="action-buttons">
--- a/apps/desktop/src/app/vault/view-custom-fields.component.html
+++ b/apps/desktop/src/app/vault/view-custom-fields.component.html
@@ -17,12 +17,16 @@
          {{ field.value || "&nbsp;" }}
        </div>
        <div *ngIf="field.type === fieldType.Hidden">
+          <span *ngIf="!field.showValue" class="monospaced">{{ field.maskedValue }}</span>
          <span
-            *ngIf="field.showValue"
+            *ngIf="field.showValue && !field.showCount"
            class="monospaced show-whitespace"
            [innerHTML]="field.value | colorPassword"
          ></span>
-          <span *ngIf="!field.showValue" class="monospaced">{{ field.maskedValue }}</span>
+          <span
+            *ngIf="field.showValue && field.showCount"
+            [innerHTML]="field.value | colorPasswordCount"
+          ></span>
        </div>
        <div *ngIf="field.type === fieldType.Boolean">
          <i class="bwi bwi-check-square" *ngIf="field.value === 'true'" aria-hidden="true"></i>
@@ -41,7 +45,18 @@
          <span>{{ cipher.linkedFieldI18nKey(field.linkedId) | i18n }}</span>
        </div>
      </div>
-      <div class="action-buttons">
+      <div class="action-buttons action-buttons-fixed">
+        <button
+          type="button"
+          class="row-btn"
+          appStopClick
+          appA11yTitle="{{ 'toggleCharacterCount' | i18n }}"
+          *ngIf="field.type === fieldType.Hidden && cipher.viewPassword && field.showValue"
+          (click)="toggleFieldCount(field)"
+          [attr.aria-pressed]="field.showCount"
+        >
+          <i class="bwi bwi-lg bwi-numbered-list" aria-hidden="true"></i>
+        </button>
        <button
          type="button"
          class="row-btn"
--- a/apps/desktop/src/app/vault/view.component.html
+++ b/apps/desktop/src/app/vault/view.component.html
@@ -50,11 +50,15 @@
                {{ cipher.login.maskedPassword }}
              </div>
              <div
-                *ngIf="showPassword"
-                class="monospaced generated-wrapper"
+                *ngIf="showPassword && !showPasswordCount"
+                class="monospaced password-wrapper"
                appSelectCopy
                [innerHTML]="cipher.login.password | colorPassword"
              ></div>
+              <div
+                *ngIf="showPassword && showPasswordCount"
+                [innerHTML]="cipher.login.password | colorPasswordCount"
+              ></div>
            </div>
            <div class="action-buttons" *ngIf="cipher.viewPassword">
              <button
@@ -77,6 +81,18 @@
                  aria-hidden="true"
                ></i>
              </button>
+              <button
+                type="button"
+                class="row-btn"
+                appStopClick
+                attr.aria-label="{{ 'toggleCharacterCount' | i18n }} {{ 'password' | i18n }}"
+                appA11yTitle="{{ 'toggleCharacterCount' | i18n }}"
+                (click)="togglePasswordCount()"
+                *ngIf="showPassword"
+                [attr.aria-pressed]="showPasswordCount"
+              >
+                <i class="bwi bwi-lg bwi-numbered-list" aria-hidden="true"></i>
+              </button>
              <button
                type="button"
                class="row-btn"
--- a/apps/desktop/src/locales/en/messages.json
+++ b/apps/desktop/src/locales/en/messages.json
@@ -2057,5 +2057,9 @@
  },
  "logInWithAnotherDevice": {
    "message": "Log in with another device"
+  },
+  "toggleCharacterCount": {
+    "message": "Toggle character count",
+    "description": "'Character count' describes a feature that displays a number next to each character of the password."
  }
 }
--- a/apps/desktop/src/scss/box.scss
+++ b/apps/desktop/src/scss/box.scss
@@ -366,6 +366,11 @@
    display: flex;
    margin-left: 5px;

+    &.action-buttons-fixed {
+      align-self: start;
+      margin-top: 2px;
+    }
+
    .row-btn {
      @extend .icon-btn;
    }
--- a/apps/desktop/src/scss/misc.scss
+++ b/apps/desktop/src/scss/misc.scss
@@ -215,8 +215,8 @@ p.lead {
  }
 }

-.generated-wrapper {
-  word-break: break-all;
+.password-wrapper {
+  overflow-wrap: break-word;
  white-space: pre-wrap;
  min-width: 0;
 }
@@ -233,6 +233,30 @@ p.lead {
  }
 }

+.password-character {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  width: 30px;
+  height: 36px;
+  font-weight: 600;
+
+  &:nth-child(odd) {
+    @include themify($themes) {
+      background-color: themed("backgroundColorAlt2");
+    }
+  }
+}
+
+.password-count {
+  white-space: nowrap;
+  font-size: 8px;
+
+  @include themify($themes) {
+    color: themed("passwordCountText") !important;
+  }
+}
+
 #duo-frame {
  background: url("../images/loading.svg") 0 0 no-repeat;
  height: 330px;
--- a/apps/desktop/src/scss/variables.scss
+++ b/apps/desktop/src/scss/variables.scss
@@ -88,6 +88,7 @@ $themes: (
    logoSuffix: "dark",
    passwordNumberColor: #007fde,
    passwordSpecialColor: #c40800,
+    passwordCountText: #212529,
    calloutBorderColor: $border-color-dark,
    calloutBackgroundColor: $background-color,
    accountSwitcherBackgroundColor: $background-color,
@@ -142,6 +143,7 @@ $themes: (
    logoSuffix: "white",
    passwordNumberColor: #52bdfb,
    passwordSpecialColor: #ff7c70,
+    passwordCountText: #ffffff,
    calloutBorderColor: #2f2f2f,
    calloutBackgroundColor: #363636,
    accountSwitcherBackgroundColor: #2f2f2f,
@@ -196,6 +198,7 @@ $themes: (
    logoSuffix: "white",
    passwordNumberColor: $nord8,
    passwordSpecialColor: $nord12,
+    passwordCountText: $nord5,
    calloutBorderColor: $nord1,
    calloutBackgroundColor: $nord2,
    accountSwitcherBackgroundColor: $nord0,
--- a/apps/web/src/app/accounts/login/login.component.html
+++ b/apps/web/src/app/accounts/login/login.component.html
@@ -77,18 +77,12 @@
      <bit-label>{{ "masterPass" | i18n }}</bit-label>
      <input
        id="login_input_master-password"
+        type="password"
        bitInput
-        [type]="showPassword ? 'text' : 'password'"
        formControlName="masterPassword"
        appAutofocus
      />
-      <button type="button" bitSuffix bitButton (click)="togglePassword()">
-        <i
-          aria-hidden="true"
-          class="bwi bwi-lg bwi-eye"
-          [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
-        ></i>
-      </button>
+      <button type="button" bitSuffix bitIconButton bitPasswordInputToggle></button>
    </bit-form-field>
    <a class="-tw-mt-2" routerLink="/hint" (mousedown)="goToHint()" (click)="setFormValues()">{{
      "getMasterPasswordHint" | i18n
--- a/apps/web/src/app/accounts/register-form/register-form.component.html
+++ b/apps/web/src/app/accounts/register-form/register-form.component.html
@@ -34,16 +34,16 @@
        <input
          id="register-form_input_master-password"
          bitInput
-          [type]="showPassword ? 'text' : 'password'"
+          type="password"
          formControlName="masterPassword"
        />
-        <button type="button" bitSuffix bitButton (click)="togglePassword()">
-          <i
-            aria-hidden="true"
-            class="bwi bwi-lg bwi-eye"
-            [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
-          ></i>
-        </button>
+        <button
+          type="button"
+          bitSuffix
+          bitIconButton
+          bitPasswordInputToggle
+          [(toggled)]="showPassword"
+        ></button>
        <bit-hint>
          <span class="tw-font-semibold">Important:</span>
          {{ "masterPassImportant" | i18n }}
@@ -65,16 +65,16 @@
        <input
          id="register-form_input_confirm-master-password"
          bitInput
-          [type]="showPassword ? 'text' : 'password'"
+          type="password"
          formControlName="confirmMasterPassword"
        />
-        <button type="button" bitSuffix bitButton (click)="togglePassword()">
-          <i
-            aria-hidden="true"
-            class="bwi bwi-lg bwi-eye"
-            [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
-          ></i>
-        </button>
+        <button
+          type="button"
+          bitSuffix
+          bitIconButton
+          bitPasswordInputToggle
+          [(toggled)]="showPassword"
+        ></button>
      </bit-form-field>
    </div>

--- a/apps/web/src/app/organizations/members/people.component.ts
+++ b/apps/web/src/app/organizations/members/people.component.ts
@@ -310,7 +310,7 @@ export class PeopleComponent
    if (
      !user &&
      this.organization.planProductType === ProductType.Free &&
-      this.users.length === this.organization.seats
+      this.allUsers.length === this.organization.seats
    ) {
      // Show org upgrade modal

--- a/apps/web/src/app/shared/shared.module.ts
+++ b/apps/web/src/app/shared/shared.module.ts
@@ -25,6 +25,7 @@ import {
  TableModule,
  TabsModule,
  ToggleGroupModule,
+  ColorPasswordModule,
 } from "@bitwarden/components";

 // Register the locales for the application
@@ -66,6 +67,8 @@ import "./locales";
    TableModule,
    TabsModule,
    ToggleGroupModule,
+    LinkModule,
+    ColorPasswordModule,

    // Web specific
  ],
@@ -97,6 +100,8 @@ import "./locales";
    TableModule,
    TabsModule,
    ToggleGroupModule,
+    LinkModule,
+    ColorPasswordModule,

    // Web specific
  ],
--- a/apps/web/src/app/tools/generator.component.html
+++ b/apps/web/src/app/tools/generator.component.html
@@ -6,18 +6,10 @@
 </app-callout>
 <div class="card card-generated bg-light my-4">
  <div class="card-body">
-    <div
-      *ngIf="type === 'password'"
-      class="generated-wrapper"
-      [innerHTML]="password | colorPassword"
+    <bit-color-password
+      [password]="type === 'password' ? password : username"
      appSelectCopy
-    ></div>
-    <div
-      *ngIf="type === 'username'"
-      class="generated-wrapper"
-      [innerHTML]="username | colorPassword"
-      appSelectCopy
-    ></div>
+    ></bit-color-password>
  </div>
 </div>
 <div class="form-group" role="radiogroup" aria-labelledby="typeHeading">
--- a/apps/web/src/app/tools/import-export/export.component.html
+++ b/apps/web/src/app/tools/import-export/export.component.html
@@ -84,73 +84,41 @@
        <br />

        <ng-container *ngIf="fileEncryptionType == encryptedExportType.FileEncrypted">
-          <div class="input-group">
-            <bit-form-field class="tw-w-full">
-              <bit-label>{{ "filePassword" | i18n }}</bit-label>
-              <input
-                bitInput
-                [type]="showFilePassword ? 'text' : 'password'"
-                id="filePassword"
-                formControlName="filePassword"
-                name="password"
-              />
-
-              <div class="input-group-append">
-                <button
-                  bitSuffix
-                  bitButton
-                  buttonType="secondary"
-                  appStopClick
-                  appA11yTitle="{{ 'toggleVisibility' | i18n }}"
-                  [attr.aria-pressed]="showFilePassword"
-                  (click)="toggleFilePassword()"
-                  type="button"
-                >
-                  <i
-                    class="bwi bwi-lg"
-                    aria-hidden="true"
-                    [ngClass]="{ 'bwi-eye': !showFilePassword, 'bwi-eye-slash': showFilePassword }"
-                  ></i>
-                </button>
-              </div>
-            </bit-form-field>
-            <div class="small text-muted">
-              {{ "exportPasswordDescription" | i18n }}
-            </div>
-          </div>
-          <div class="input-group tw-mt-4">
-            <bit-form-field class="tw-w-full">
-              <bit-label>{{ "confirmFilePassword" | i18n }}</bit-label>
-              <input
-                bitInput
-                [type]="showConfirmFilePassword ? 'text' : 'password'"
-                id="confirmFilePassword"
-                formControlName="confirmFilePassword"
-                name="confirmFilePassword"
-              />
-              <div class="input-group-append">
-                <button
-                  bitSuffix
-                  bitButton
-                  buttonType="secondary"
-                  appStopClick
-                  appA11yTitle="{{ 'toggleVisibility' | i18n }}"
-                  [attr.aria-pressed]="showConfirmFilePassword"
-                  (click)="toggleConfirmFilePassword()"
-                  type="button"
-                >
-                  <i
-                    class="bwi bwi-lg"
-                    aria-hidden="true"
-                    [ngClass]="{
-                      'bwi-eye': !showConfirmFilePassword,
-                      'bwi-eye-slash': showConfirmFilePassword
-                    }"
-                  ></i>
-                </button>
-              </div>
-            </bit-form-field>
-          </div>
+          <bit-form-field>
+            <bit-label>{{ "filePassword" | i18n }}</bit-label>
+            <input
+              bitInput
+              type="password"
+              id="filePassword"
+              formControlName="filePassword"
+              name="password"
+            />
+            <button
+              type="button"
+              bitSuffix
+              bitIconButton
+              bitPasswordInputToggle
+              [(toggled)]="showFilePassword"
+            ></button>
+            <bit-hint>{{ "exportPasswordDescription" | i18n }}</bit-hint>
+          </bit-form-field>
+          <bit-form-field>
+            <bit-label>{{ "confirmFilePassword" | i18n }}</bit-label>
+            <input
+              bitInput
+              type="password"
+              id="confirmFilePassword"
+              formControlName="confirmFilePassword"
+              name="confirmFilePassword"
+            />
+            <button
+              type="button"
+              bitSuffix
+              bitIconButton
+              bitPasswordInputToggle
+              [(toggled)]="showFilePassword"
+            ></button>
+          </bit-form-field>
        </ng-container>
      </ng-container>

--- a/apps/web/src/app/tools/import-export/export.component.ts
+++ b/apps/web/src/app/tools/import-export/export.component.ts
@@ -23,6 +23,7 @@ import { UserVerificationPromptComponent } from "../../components/user-verificat
 export class ExportComponent extends BaseExportComponent {
  organizationId: string;
  encryptedExportType = EncryptedExportType;
+  protected showFilePassword: boolean;

  constructor(
    cryptoService: CryptoService,
--- a/apps/web/src/app/tools/import-export/file-password-prompt.component.html
+++ b/apps/web/src/app/tools/import-export/file-password-prompt.component.html
@@ -14,32 +14,17 @@
          class="tw-border-0 tw-border-t tw-border-solid tw-border-secondary-300 tw-pr-3.5 tw-pt-3.5 tw-pl-3.5"
        >
          {{ "confirmVaultImportDesc" | i18n }}
-          <bit-form-field class="tw-w-full tw-pt-3.5">
+          <bit-form-field class="tw-pt-3.5">
            <bit-label>{{ "confirmFilePassword" | i18n }}</bit-label>
            <input
              bitInput
-              required
-              [type]="showFilePassword ? 'text' : 'password'"
+              type="password"
              name="filePassword"
              [formControl]="filePassword"
              appAutofocus
              appInputVerbatim
            />
-            <button
-              bitSuffix
-              bitButton
-              appStopClick
-              appA11yTitle="{{ 'toggleVisibility' | i18n }}"
-              [attr.aria-pressed]="showFilePassword"
-              (click)="toggleFilePassword()"
-              type="button"
-            >
-              <i
-                class="bwi bwi-lg"
-                aria-hidden="true"
-                [ngClass]="{ 'bwi-eye': !showFilePassword, 'bwi-eye-slash': showFilePassword }"
-              ></i>
-            </button>
+            <button type="button" bitSuffix bitIconButton bitPasswordInputToggle></button>
          </bit-form-field>
        </div>
        <div
--- a/apps/web/src/app/tools/import-export/file-password-prompt.component.ts
+++ b/apps/web/src/app/tools/import-export/file-password-prompt.component.ts
@@ -7,15 +7,10 @@ import { ModalRef } from "@bitwarden/angular/components/modal/modal.ref";
  templateUrl: "file-password-prompt.component.html",
 })
 export class FilePasswordPromptComponent {
-  showFilePassword: boolean;
  filePassword = new FormControl("", Validators.required);

  constructor(private modalRef: ModalRef) {}

-  toggleFilePassword() {
-    this.showFilePassword = !this.showFilePassword;
-  }
-
  submit() {
    this.filePassword.markAsTouched();
    if (!this.filePassword.valid) {
--- a/apps/web/src/app/tools/import-export/import.component.html
+++ b/apps/web/src/app/tools/import-export/import.component.html
@@ -288,6 +288,10 @@
      From the Yoti browser extension, click on "Settings", then "Export Saved Logins" and save the
      CSV file.
    </ng-container>
+    <ng-container *ngIf="format === 'passkyjson'">
+      Log in to "https://vault.passky.org" &rarr; "Import & Export" &rarr; "Export" in the Passky
+      section. ("Backup" is unsupported as it is encrypted).
+    </ng-container>
  </app-callout>
  <div class="row">
    <div class="col-6">
--- a/apps/web/src/app/tools/password-generator-history.component.html
+++ b/apps/web/src/app/tools/password-generator-history.component.html
@@ -15,12 +15,12 @@
      <div class="modal-body" *ngIf="history.length">
        <ul class="list-group list-group-flush">
          <li class="list-group-item d-flex" *ngFor="let h of history">
-            <div class="password-row">
-              <div
-                class="text-monospace generated-wrapper"
-                [innerHTML]="h.password | colorPassword"
+            <div class="tw-min-w-0">
+              <bit-color-password
+                [password]="h.password"
+                class="tw-block tw-font-mono"
                appSelectCopy
-              ></div>
+              ></bit-color-password>
              <small class="text-muted">{{ h.date | date: "medium" }}</small>
            </div>
            <div class="ml-auto">
--- a/apps/web/src/app/vault/add-edit.component.html
+++ b/apps/web/src/app/vault/add-edit.component.html
@@ -128,6 +128,15 @@
                      title="{{ 'loading' | i18n }}"
                    ></i>
                  </a>
+                  <a
+                    href="#"
+                    class="d-block bwi-icon-above-input"
+                    appStopClick
+                    [appA11yTitle]="'toggleCharacterCount' | i18n"
+                    (click)="togglePasswordCount()"
+                  >
+                    <i class="bwi bwi-lg bwi-fw bwi-numbered-list" aria-hidden="true"></i>
+                  </a>
                </div>
              </div>
              <div class="input-group">
@@ -169,6 +178,18 @@
              </div>
            </div>
          </div>
+          <div *ngIf="showPasswordCount" class="tw-mb-4">
+            <label>{{ "passwordCharacterCount" | i18n }}</label>
+            <div class="tw-flex tw-justify-between">
+              <bit-color-password
+                [password]="cipher.login.password"
+                [showCount]="true"
+              ></bit-color-password>
+              <button type="button" bitLink (click)="togglePasswordCount()">
+                {{ "hide" | i18n }}
+              </button>
+            </div>
+          </div>
          <div class="tw-flex tw-flex-row">
            <div class="tw-mb-4 tw-w-1/2">
              <label for="loginTotp">{{ "authenticatorKeyTotp" | i18n }}</label>
@@ -870,7 +891,7 @@
            <div class="ml-3" *ngIf="viewingPasswordHistory">
              <div *ngFor="let ph of cipher.passwordHistory">
                {{ ph.lastUsedDate | date: "short" }} -
-                <span class="generated-wrapper text-monospace ml-2">{{ ph.password }}</span>
+                <bit-color-password [password]="ph.password"></bit-color-password>
              </div>
            </div>
          </div>
--- a/apps/web/src/app/vault/add-edit.component.ts
+++ b/apps/web/src/app/vault/add-edit.component.ts
@@ -35,6 +35,7 @@ export class AddEditComponent extends BaseAddEditComponent implements OnInit, On
  hasPasswordHistory = false;
  viewingPasswordHistory = false;
  viewOnly = false;
+  showPasswordCount = false;

  protected totpInterval: number;
  protected override componentName = "app-vault-add-edit";
@@ -104,6 +105,26 @@ export class AddEditComponent extends BaseAddEditComponent implements OnInit, On
    this.cipher.favorite = !this.cipher.favorite;
  }

+  togglePassword() {
+    super.togglePassword();
+
+    // Hide password count when password is hidden to be safe
+    if (!this.showPassword && this.showPasswordCount) {
+      this.togglePasswordCount();
+    }
+  }
+
+  togglePasswordCount() {
+    this.showPasswordCount = !this.showPasswordCount;
+
+    if (this.editMode && this.showPasswordCount) {
+      this.eventCollectionService.collect(
+        EventType.Cipher_ClientToggledPasswordVisible,
+        this.cipherId
+      );
+    }
+  }
+
  launch(uri: LoginUriView) {
    if (!uri.canLaunch) {
      return;
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -5579,6 +5579,17 @@
  "multiSelectClearAll": {
    "message": "Clear all"
  },
+  "toggleCharacterCount": {
+    "message": "Toggle character count",
+    "description": "'Character count' describes a feature that displays a number next to each character of the password."
+  },
+  "passwordCharacterCount": {
+    "message": "Password character count",
+    "description": "'Character count' describes a feature that displays a number next to each character of the password."
+  },
+  "hide": {
+    "message": "Hide"
+  },
  "projects":{
    "message": "Projects"
  },
--- a/apps/web/src/scss/pages.scss
+++ b/apps/web/src/scss/pages.scss
@@ -1,31 +1,3 @@
-.generated-wrapper {
-  min-width: 0;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-
-.password-row {
-  min-width: 0;
-}
-
-.password-letter {
-  @include themify($themes) {
-    color: themed("pwLetter");
-  }
-}
-
-.password-number {
-  @include themify($themes) {
-    color: themed("pwNumber");
-  }
-}
-
-.password-special {
-  @include themify($themes) {
-    color: themed("pwSpecial");
-  }
-}
-
 app-generator {
  #lengthRange {
    width: 100%;
--- a/apps/web/src/scss/variables.scss
+++ b/apps/web/src/scss/variables.scss
@@ -201,9 +201,6 @@ $themes: (
    navBackgroundAlt: $secondary-alt,
    navOrgBackgroundColor: #fbfbfb,
    navWeight: 600,
-    pwLetter: $body-color,
-    pwNumber: #007fde,
-    pwSpecial: #c40800,
    pwStrengthBackground: #e9ecef,
    separator: $secondary,
    separatorHr: rgb(0, 0, 0, 0.1),
@@ -313,9 +310,6 @@ $themes: (
    navBackgroundAlt: $darkDarkBlue1,
    navOrgBackgroundColor: #161c26,
    navWeight: 400,
-    pwLetter: $white,
-    pwNumber: #52bdfb,
-    pwSpecial: #ff7c70,
    pwStrengthBackground: $darkBlue2,
    separator: $darkBlue1,
    separatorHr: $darkBlue1,
--- a/bitwarden_license/bit-web/src/app/organizations/manage/scim.component.html
+++ b/bitwarden_license/bit-web/src/app/organizations/manage/scim.component.html
@@ -42,12 +42,10 @@
    <button
      type="button"
      bitSuffix
-      bitButton
+      bitIconButton="bwi-clone"
      (click)="copyScimUrl()"
      [appA11yTitle]="'copyScimUrl' | i18n"
-    >
-      <i aria-hidden="true" class="bwi bwi-lg bwi-clone"></i>
-    </button>
+    ></button>
  </bit-form-field>

  <bit-form-field *ngIf="showScimSettings">
@@ -59,40 +57,33 @@
      id="clientSecret"
    />
    <ng-container>
-      <button type="button" bitSuffix bitButton (click)="toggleScimKey()">
-        <i
-          aria-hidden="true"
-          class="bwi bwi-lg bwi-eye"
-          [ngClass]="{ 'bwi-eye': !showScimKey, 'bwi-eye-slash': showScimKey }"
-          [appA11yTitle]="'toggleVisibility' | i18n"
-        ></i>
-      </button>
-    </ng-container>
-    <ng-container #rotateButton [appApiAction]="rotatePromise">
      <button
-        [disabled]="$any(rotateButton).loading"
        type="button"
        bitSuffix
-        bitButton
+        [disabled]="$any(rotateButton).loading"
+        [bitIconButton]="showScimKey ? 'bwi-eye-slash' : 'bwi-eye'"
+        (click)="toggleScimKey()"
+        [appA11yTitle]="'toggleVisibility' | i18n"
+      ></button>
+    </ng-container>
+    <ng-container #rotateButton [appApiAction]="rotatePromise">
+      <!-- TODO: Convert to async actions -->
+      <button
+        [loading]="$any(rotateButton).loading"
+        type="button"
+        bitSuffix
+        bitIconButton="bwi-generate"
        (click)="rotateScimKey()"
        [appA11yTitle]="'rotateScimKey' | i18n"
-      >
-        <i
-          aria-hidden="true"
-          class="bwi bwi-lg bwi-generate"
-          [ngClass]="{ 'bwi-spin': $any(rotateButton).loading }"
-        ></i>
-      </button>
+      ></button>
    </ng-container>
    <button
      type="button"
      bitSuffix
-      bitButton
+      bitIconButton="bwi-clone"
      (click)="copyScimKey()"
      [appA11yTitle]="'copyScimKey' | i18n"
-    >
-      <i aria-hidden="true" class="bwi bwi-lg bwi-clone"></i>
-    </button>
+    ></button>
    <bit-hint>{{ "scimApiKeyHelperText" | i18n }}</bit-hint>
  </bit-form-field>

--- a/bitwarden_license/bit-web/src/app/organizations/manage/sso.component.html
+++ b/bitwarden_license/bit-web/src/app/organizations/manage/sso.component.html
@@ -151,28 +151,24 @@
        <bit-label>{{ "callbackPath" | i18n }}</bit-label>
        <input bitInput disabled [value]="callbackPath" />
        <button
-          bitButton
+          bitIconButton="bwi-clone"
          bitSuffix
          type="button"
          [appCopyClick]="callbackPath"
          [appA11yTitle]="'copyValue' | i18n"
-        >
-          <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-        </button>
+        ></button>
      </bit-form-field>

      <bit-form-field>
        <bit-label>{{ "signedOutCallbackPath" | i18n }}</bit-label>
        <input bitInput disabled [value]="signedOutCallbackPath" />
        <button
-          bitButton
+          bitIconButton="bwi-clone"
          bitSuffix
          type="button"
          [appCopyClick]="signedOutCallbackPath"
          [appA11yTitle]="'copyValue' | i18n"
-        >
-          <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-        </button>
+        ></button>
      </bit-form-field>

      <bit-form-field>
@@ -292,14 +288,12 @@
        <bit-label>{{ "spEntityId" | i18n }}</bit-label>
        <input bitInput disabled [value]="spEntityId" />
        <button
-          bitButton
+          bitIconButton="bwi-clone"
          bitSuffix
          type="button"
          [appCopyClick]="spEntityId"
          [appA11yTitle]="'copyValue' | i18n"
-        >
-          <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-        </button>
+        ></button>
      </bit-form-field>

      <bit-form-field>
@@ -315,28 +309,24 @@
          <i class="bwi bwi-lg bwi-external-link" aria-hidden="true"></i>
        </button>
        <button
-          bitButton
+          bitIconButton="bwi-clone"
          bitSuffix
          type="button"
          [appCopyClick]="spMetadataUrl"
          [appA11yTitle]="'copyValue' | i18n"
-        >
-          <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-        </button>
+        ></button>
      </bit-form-field>

      <bit-form-field>
        <bit-label>{{ "spAcsUrl" | i18n }}</bit-label>
        <input bitInput disabled [value]="spAcsUrl" />
        <button
-          bitButton
+          bitIconButton="bwi-clone"
          bitSuffix
          type="button"
          [appCopyClick]="spAcsUrl"
          [appA11yTitle]="'copyValue' | i18n"
-        >
-          <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-        </button>
+        ></button>
      </bit-form-field>

      <bit-form-field>
--- a/bitwarden_license/bit-web/src/app/secrets-manager/layout/navigation.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/layout/navigation.component.html
@@ -2,7 +2,7 @@
  <bit-icon [icon]="logo" class="tw-w-full tw-text-alt2"></bit-icon>
 </a>

-<org-switcher></org-switcher>
+<org-switcher [filter]="orgFilter"></org-switcher>
 <bit-nav-item icon="bwi-collection" text="Projects" route="projects"></bit-nav-item>
 <bit-nav-item icon="bwi-key" text="Secrets" route="secrets"></bit-nav-item>
 <bit-nav-item icon="bwi-wrench" text="Service Accounts" route="service-accounts"></bit-nav-item>
--- a/bitwarden_license/bit-web/src/app/secrets-manager/layout/navigation.component.ts
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/layout/navigation.component.ts
@@ -1,5 +1,7 @@
 import { Component } from "@angular/core";

+import { Organization } from "@bitwarden/common/models/domain/organization";
+
 import { SecretsManagerLogo } from "./secrets-manager-logo";

@Component({
@@ -8,4 +10,6 @@ import { SecretsManagerLogo } from "./secrets-manager-logo";
 })
 export class NavigationComponent {
  protected readonly logo = SecretsManagerLogo;
+
+  protected orgFilter = (org: Organization) => org.canAccessSecretsManager;
 }
--- a/bitwarden_license/bit-web/src/app/secrets-manager/layout/org-switcher.component.ts
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/layout/org-switcher.component.ts
@@ -12,13 +12,22 @@ import type { Organization } from "@bitwarden/common/models/domain/organization"
 export class OrgSwitcherComponent {
  protected organizations$: Observable<Organization[]> =
    this.organizationService.organizations$.pipe(
-      map((orgs) => orgs.sort((a, b) => a.name.localeCompare(b.name)))
+      map((orgs) => orgs.filter(this.filter).sort((a, b) => a.name.localeCompare(b.name)))
    );
  protected activeOrganization$: Observable<Organization> = combineLatest([
    this.route.paramMap,
-    this.organizationService.organizations$,
+    this.organizations$,
  ]).pipe(map(([params, orgs]) => orgs.find((org) => org.id === params.get("organizationId"))));

+  /**
+   * Filter function for displayed organizations in the `org-switcher`
+   * @example
+   * const smFilter = (org: Organization) => org.canAccessSecretsManager
+   * // <org-switcher [filter]="smFilter">
+   */
+  @Input()
+  filter: (org: Organization) => boolean = () => true;
+
  /**
   * Is `true` if the expanded content is visible
   */
--- a/libs/angular/src/components/export.component.ts
+++ b/libs/angular/src/components/export.component.ts
@@ -21,8 +21,6 @@ export class ExportComponent implements OnInit, OnDestroy {

  formPromise: Promise<string>;
  disabledByPolicy = false;
-  showFilePassword: boolean;
-  showConfirmFilePassword: boolean;

  exportForm = this.formBuilder.group({
    format: ["json"],
@@ -199,16 +197,6 @@ export class ExportComponent implements OnInit, OnDestroy {
    return this.exportForm.get("fileEncryptionType").value;
  }

-  toggleFilePassword() {
-    this.showFilePassword = !this.showFilePassword;
-    document.getElementById("filePassword").focus();
-  }
-
-  toggleConfirmFilePassword() {
-    this.showConfirmFilePassword = !this.showConfirmFilePassword;
-    document.getElementById("confirmFilePassword").focus();
-  }
-
  adjustValidators() {
    this.exportForm.get("confirmFilePassword").reset();
    this.exportForm.get("filePassword").reset();
--- a/libs/angular/src/jslib.module.ts
+++ b/libs/angular/src/jslib.module.ts
@@ -21,8 +21,6 @@ import { SelectCopyDirective } from "./directives/select-copy.directive";
 import { StopClickDirective } from "./directives/stop-click.directive";
 import { StopPropDirective } from "./directives/stop-prop.directive";
 import { TrueFalseValueDirective } from "./directives/true-false-value.directive";
-import { ColorPasswordCountPipe } from "./pipes/color-password-count.pipe";
-import { ColorPasswordPipe } from "./pipes/color-password.pipe";
 import { CreditCardNumberPipe } from "./pipes/credit-card-number.pipe";
 import { EllipsisPipe } from "./pipes/ellipsis.pipe";
 import { I18nPipe } from "./pipes/i18n.pipe";
@@ -50,8 +48,6 @@ import { PasswordStrengthComponent } from "./shared/components/password-strength
    AutofocusDirective,
    BoxRowDirective,
    CalloutComponent,
-    ColorPasswordCountPipe,
-    ColorPasswordPipe,
    CreditCardNumberPipe,
    EllipsisPipe,
    ExportScopeCalloutComponent,
@@ -81,8 +77,6 @@ import { PasswordStrengthComponent } from "./shared/components/password-strength
    BitwardenToastModule,
    BoxRowDirective,
    CalloutComponent,
-    ColorPasswordCountPipe,
-    ColorPasswordPipe,
    CreditCardNumberPipe,
    EllipsisPipe,
    ExportScopeCalloutComponent,
--- a/libs/common/spec/importers/passky-json-importer.spec.ts
+++ b/libs/common/spec/importers/passky-json-importer.spec.ts
@@ -0,0 +1,34 @@
+import { PasskyJsonImporter as Importer } from "@bitwarden/common/importers/passky/passky-json-importer";
+
+import { testData as EncryptedData } from "./test-data/passky-json/passky-encrypted.json";
+import { testData as UnencryptedData } from "./test-data/passky-json/passky-unencrypted.json";
+
+describe("Passky Json Importer", () => {
+  let importer: Importer;
+  beforeEach(() => {
+    importer = new Importer();
+  });
+
+  it("should not import encrypted backups", async () => {
+    const testDataJson = JSON.stringify(EncryptedData);
+    const result = await importer.parse(testDataJson);
+    expect(result != null).toBe(true);
+    expect(result.success).toBe(false);
+    expect(result.errorMessage).toBe("Unable to import an encrypted passky backup.");
+  });
+
+  it("should parse login data", async () => {
+    const testDataJson = JSON.stringify(UnencryptedData);
+    const result = await importer.parse(testDataJson);
+    expect(result != null).toBe(true);
+
+    const cipher = result.ciphers.shift();
+    expect(cipher.name).toEqual("https://bitwarden.com/");
+    expect(cipher.login.username).toEqual("testUser");
+    expect(cipher.login.password).toEqual("testPassword");
+    expect(cipher.login.uris.length).toEqual(1);
+    const uriView = cipher.login.uris.shift();
+    expect(uriView.uri).toEqual("https://bitwarden.com/");
+    expect(cipher.notes).toEqual("my notes");
+  });
+});
--- a/libs/common/spec/importers/test-data/passky-json/passky-encrypted.json.ts
+++ b/libs/common/spec/importers/test-data/passky-json/passky-encrypted.json.ts
@@ -0,0 +1,15 @@
+import { PasskyJsonExport } from "@bitwarden/common/importers/passky/passky-json-types";
+
+export const testData: PasskyJsonExport = {
+  encrypted: true,
+  passwords: [
+    {
+      website:
+        "w68uw6nCjUI3w7MNYsK7w6xqwqHDlXLCpsOEw4/Dq8KbIMK3w6fCvQJFFcOECsOlwprCqUAawqnDvsKbwrLCsCXCtcOlw4dp",
+      username: "bMKyUC0VPTx5woHCr8K9wpvDgGrClFAKw6VfJTgob8KVwqNoN8KIEA==",
+      password: "XcKxO2FjwqIJPkoHwqrDvcKtXcORw6TDlMOlw7TDvMORfmlNdMKOwq7DocO+",
+      message:
+        "w5jCrWTCgAV1RcO+DsOzw5zCvD5CwqLCtcKtw6sPwpbCmcOxwrfDlcOQw4h1wqomEhNtUkRgwrzCkxrClFBSHsO5wrfCrg==",
+    },
+  ],
+};
--- a/libs/common/spec/importers/test-data/passky-json/passky-unencrypted.json.ts
+++ b/libs/common/spec/importers/test-data/passky-json/passky-unencrypted.json.ts
@@ -0,0 +1,13 @@
+import { PasskyJsonExport } from "@bitwarden/common/importers/passky/passky-json-types";
+
+export const testData: PasskyJsonExport = {
+  encrypted: false,
+  passwords: [
+    {
+      website: "https://bitwarden.com/",
+      username: "testUser",
+      password: "testPassword",
+      message: "my notes",
+    },
+  ],
+};
--- a/libs/common/src/enums/importOptions.ts
+++ b/libs/common/src/enums/importOptions.ts
@@ -67,6 +67,7 @@ export const regularImportOptions = [
  { id: "encryptrcsv", name: "Encryptr (csv)" },
  { id: "yoticsv", name: "Yoti (csv)" },
  { id: "nordpasscsv", name: "Nordpass (csv)" },
+  { id: "passkyjson", name: "Passky (json)" },
 ] as const;

 export type ImportType =
--- a/libs/common/src/importers/passky/passky-json-importer.ts
+++ b/libs/common/src/importers/passky/passky-json-importer.ts
@@ -0,0 +1,43 @@
+import { ImportResult } from "../../models/domain/import-result";
+import { BaseImporter } from "../base-importer";
+import { Importer } from "../importer";
+
+import { PasskyJsonExport } from "./passky-json-types";
+
+export class PasskyJsonImporter extends BaseImporter implements Importer {
+  parse(data: string): Promise<ImportResult> {
+    const result = new ImportResult();
+    const passkyExport: PasskyJsonExport = JSON.parse(data);
+    if (
+      passkyExport == null ||
+      passkyExport.passwords == null ||
+      passkyExport.passwords.length === 0
+    ) {
+      result.success = false;
+      return Promise.resolve(result);
+    }
+
+    if (passkyExport.encrypted == true) {
+      result.success = false;
+      result.errorMessage = "Unable to import an encrypted passky backup.";
+      return Promise.resolve(result);
+    }
+
+    passkyExport.passwords.forEach((record) => {
+      const cipher = this.initLoginCipher();
+      cipher.name = record.website;
+      cipher.login.username = record.username;
+      cipher.login.password = record.password;
+
+      cipher.login.uris = this.makeUriArray(record.website);
+      cipher.notes = record.message;
+
+      this.convertToNoteIfNeeded(cipher);
+      this.cleanupCipher(cipher);
+      result.ciphers.push(cipher);
+    });
+
+    result.success = true;
+    return Promise.resolve(result);
+  }
+}
--- a/libs/common/src/importers/passky/passky-json-types.ts
+++ b/libs/common/src/importers/passky/passky-json-types.ts
@@ -0,0 +1,11 @@
+export interface PasskyJsonExport {
+  encrypted: boolean;
+  passwords: LoginEntry[];
+}
+
+export interface LoginEntry {
+  website: string;
+  username: string;
+  password: string;
+  message: string;
+}
--- a/libs/common/src/services/import.service.ts
+++ b/libs/common/src/services/import.service.ts
@@ -51,6 +51,7 @@ import { OnePasswordMacCsvImporter } from "../importers/onepassword/onepassword-
 import { OnePasswordWinCsvImporter } from "../importers/onepassword/onepassword-win-csv-importer";
 import { PadlockCsvImporter } from "../importers/padlock-csv-importer";
 import { PassKeepCsvImporter } from "../importers/passkeep-csv-importer";
+import { PasskyJsonImporter } from "../importers/passky/passky-json-importer";
 import { PassmanJsonImporter } from "../importers/passman-json-importer";
 import { PasspackCsvImporter } from "../importers/passpack-csv-importer";
 import { PasswordAgentCsvImporter } from "../importers/passwordagent-csv-importer";
@@ -279,6 +280,8 @@ export class ImportService implements ImportServiceAbstraction {
        return new YotiCsvImporter();
      case "nordpasscsv":
        return new NordPassCsvImporter();
+      case "passkyjson":
+        return new PasskyJsonImporter();
      default:
        return null;
    }
--- a/libs/components/src/async-actions/in-forms.stories.ts
+++ b/libs/components/src/async-actions/in-forms.stories.ts
@@ -27,6 +27,7 @@ const template = `
    <bit-form-field>
      <bit-label>Email</bit-label>
      <input bitInput formControlName="email" />
+      <button type="button" bitSuffix bitIconButton="bwi-refresh" bitFormButton [bitAction]="refresh"></button>
    </bit-form-field>

    <button class="tw-mr-2" type="submit" buttonType="primary" bitButton bitFormButton>Submit</button>
@@ -47,6 +48,12 @@ class PromiseExampleComponent {

  constructor(private formBuilder: FormBuilder) {}

+  refresh = async () => {
+    await new Promise<void>((resolve, reject) => {
+      setTimeout(resolve, 2000);
+    });
+  };
+
  submit = async () => {
    this.formObj.markAllAsTouched();

@@ -78,6 +85,10 @@ class ObservableExampleComponent {

  constructor(private formBuilder: FormBuilder) {}

+  refresh = () => {
+    return of("fake observable").pipe(delay(2000));
+  };
+
  submit = () => {
    this.formObj.markAllAsTouched();

--- a/libs/components/src/button/button.component.html
+++ b/libs/components/src/button/button.component.html
@@ -1,6 +1,5 @@
 <span class="tw-relative">
  <span [ngClass]="{ 'tw-invisible': loading }">
-    <i class="bwi bwi-lg" [ngClass]="iconClass" aria-hidden="true" *ngIf="icon"></i>
    <ng-content></ng-content>
  </span>
  <span
--- a/libs/components/src/button/button.component.spec.ts
+++ b/libs/components/src/button/button.component.spec.ts
@@ -41,6 +41,19 @@ describe("Button", () => {
    expect(buttonDebugElement.nativeElement.classList.contains("tw-border-danger-500")).toBe(true);
    expect(linkDebugElement.nativeElement.classList.contains("tw-border-danger-500")).toBe(true);

+    testAppComponent.buttonType = "unstyled";
+    fixture.detectChanges();
+    expect(
+      Array.from(buttonDebugElement.nativeElement.classList).some((klass: string) =>
+        klass.startsWith("tw-bg")
+      )
+    ).toBe(false);
+    expect(
+      Array.from(linkDebugElement.nativeElement.classList).some((klass: string) =>
+        klass.startsWith("tw-bg")
+      )
+    ).toBe(false);
+
    testAppComponent.buttonType = null;
    fixture.detectChanges();
    expect(buttonDebugElement.nativeElement.classList.contains("tw-border-text-muted")).toBe(true);
--- a/libs/components/src/button/button.component.ts
+++ b/libs/components/src/button/button.component.ts
@@ -1,10 +1,15 @@
 import { Input, HostBinding, Component } from "@angular/core";

-import { ButtonLikeAbstraction } from "../shared/button-like.abstraction";
+import { ButtonLikeAbstraction, ButtonType } from "../shared/button-like.abstraction";

-export type ButtonTypes = "primary" | "secondary" | "danger";
+const focusRing = [
+  "focus-visible:tw-ring",
+  "focus-visible:tw-ring-offset-2",
+  "focus-visible:tw-ring-primary-700",
+  "focus-visible:tw-z-10",
+];

-const buttonStyles: Record<ButtonTypes, string[]> = {
+const buttonStyles: Record<ButtonType, string[]> = {
  primary: [
    "tw-border-primary-500",
    "tw-bg-primary-500",
@@ -15,6 +20,7 @@ const buttonStyles: Record<ButtonTypes, string[]> = {
    "disabled:tw-border-primary-500/60",
    "disabled:!tw-text-contrast/60",
    "disabled:tw-bg-clip-padding",
+    ...focusRing,
  ],
  secondary: [
    "tw-bg-transparent",
@@ -26,6 +32,7 @@ const buttonStyles: Record<ButtonTypes, string[]> = {
    "disabled:tw-bg-transparent",
    "disabled:tw-border-text-muted/60",
    "disabled:!tw-text-muted/60",
+    ...focusRing,
  ],
  danger: [
    "tw-bg-transparent",
@@ -37,7 +44,9 @@ const buttonStyles: Record<ButtonTypes, string[]> = {
    "disabled:tw-bg-transparent",
    "disabled:tw-border-danger-500/60",
    "disabled:!tw-text-danger/60",
+    ...focusRing,
  ],
+  unstyled: [],
 };

@Component({
@@ -58,10 +67,6 @@ export class ButtonComponent implements ButtonLikeAbstraction {
      "tw-text-center",
      "hover:tw-no-underline",
      "focus:tw-outline-none",
-      "focus-visible:tw-ring",
-      "focus-visible:tw-ring-offset-2",
-      "focus-visible:tw-ring-primary-700",
-      "focus-visible:tw-z-10",
    ]
      .concat(
        this.block == null || this.block === false ? ["tw-inline-block"] : ["tw-w-full", "tw-block"]
@@ -75,17 +80,14 @@ export class ButtonComponent implements ButtonLikeAbstraction {
    return disabled || this.loading ? true : null;
  }

-  @Input() buttonType: ButtonTypes = null;
-
+  @Input() buttonType: ButtonType;
  @Input() block?: boolean;

  @Input() loading = false;

  @Input() disabled = false;

-  @Input("bitIconButton") icon: string;
-
-  get iconClass() {
-    return [this.icon, "!tw-m-0"];
+  setButtonType(value: "primary" | "secondary" | "danger" | "unstyled") {
+    this.buttonType = value;
  }
 }
--- a/libs/components/src/button/button.stories.ts
+++ b/libs/components/src/button/button.stories.ts
@@ -101,17 +101,3 @@ export const Block = BlockTemplate.bind({});
 Block.args = {
  block: true,
 };
-
-const IconTemplate: Story = (args) => ({
-  props: args,
-  template: `
-    <button bitButton [bitIconButton]="icon" buttonType="primary" class="tw-mr-2"></button>
-    <button bitButton [bitIconButton]="icon"buttonType="secondary" class="tw-mr-2"></button>
-    <button bitButton [bitIconButton]="icon" buttonType="danger" class="tw-mr-2"></button>
-  `,
-});
-
-export const Icon = IconTemplate.bind({});
-Icon.args = {
-  icon: "bwi-eye",
-};
--- a/libs/components/src/color-password/color-password.component.ts
+++ b/libs/components/src/color-password/color-password.component.ts
@@ -48,12 +48,12 @@ export class ColorPasswordComponent {

    if (this.showCount) {
      return charClass.concat([
-        "tw-inline-flex",
        "tw-flex-col",
        "tw-items-center",
        "tw-w-7",
        "tw-py-1",
        "odd:tw-bg-secondary-100",
+        "even:tw-bg-background",
      ]);
    }

--- a/libs/components/src/form-field/form-field.stories.ts
+++ b/libs/components/src/form-field/form-field.stories.ts
@@ -11,8 +11,10 @@ import { Meta, moduleMetadata, Story } from "@storybook/angular";

 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";

+import { AsyncActionsModule } from "../async-actions";
 import { ButtonModule } from "../button";
 import { CheckboxModule } from "../checkbox";
+import { IconButtonModule } from "../icon-button";
 import { InputModule } from "../input/input.module";
 import { RadioButtonModule } from "../radio-button";
 import { I18nMockService } from "../utils/i18n-mock.service";
@@ -31,6 +33,8 @@ export default {
        FormFieldModule,
        InputModule,
        ButtonModule,
+        IconButtonModule,
+        AsyncActionsModule,
        CheckboxModule,
        RadioButtonModule,
      ],
@@ -177,10 +181,13 @@ const ButtonGroupTemplate: Story<BitFormFieldComponent> = (args: BitFormFieldCom
  props: args,
  template: `
    <bit-form-field>
-      <bit-label>Label</bit-label>
-      <input bitInput placeholder="Placeholder" type="password" />
-      <button bitSuffix bitButton bitIconButton="bwi-eye"></button>
-      <button bitSuffix bitButton bitIconButton="bwi-clone"></button>
+      <button bitPrefix bitIconButton="bwi-star"></button>
+      <input bitInput placeholder="Placeholder" />
+      <button bitSuffix bitIconButton="bwi-eye"></button>
+      <button bitSuffix bitIconButton="bwi-clone"></button>
+      <button bitSuffix bitButton>
+        Apply
+      </button>
    </bit-form-field>
  `,
 });
@@ -195,9 +202,13 @@ const DisabledButtonInputGroupTemplate: Story<BitFormFieldComponent> = (
  template: `
    <bit-form-field>
      <bit-label>Label</bit-label>
+      <button bitPrefix bitIconButton="bwi-star" disabled></button>
      <input bitInput placeholder="Placeholder" disabled />
-      <button bitSuffix bitButton bitIconButton="bwi-eye" disabled></button>
-      <button bitSuffix bitButton bitIconButton="bwi-clone"></button>
+      <button bitSuffix bitIconButton="bwi-eye" disabled></button>
+      <button bitSuffix bitIconButton="bwi-clone" disabled></button>
+      <button bitSuffix bitButton disabled>
+        Apply
+      </button>
    </bit-form-field>
  `,
 });
--- a/libs/components/src/form-field/password-input-toggle.directive.ts
+++ b/libs/components/src/form-field/password-input-toggle.directive.ts
@@ -3,13 +3,16 @@ import {
  Directive,
  EventEmitter,
  Host,
+  HostBinding,
  HostListener,
  Input,
  OnChanges,
  Output,
 } from "@angular/core";

-import { ButtonComponent } from "../button";
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+
+import { BitIconButtonComponent } from "../icon-button/icon-button.component";

 import { BitFormFieldComponent } from "./form-field.component";

@@ -17,9 +20,18 @@ import { BitFormFieldComponent } from "./form-field.component";
  selector: "[bitPasswordInputToggle]",
 })
 export class BitPasswordInputToggleDirective implements AfterContentInit, OnChanges {
-  @Input() toggled = false;
+  /**
+   * Whether the input is toggled to show the password.
+   */
+  @HostBinding("attr.aria-pressed") @Input() toggled = false;
  @Output() toggledChange = new EventEmitter<boolean>();

+  @HostBinding("attr.title") title = this.i18nService.t("toggleVisibility");
+  @HostBinding("attr.aria-label") label = this.i18nService.t("toggleVisibility");
+
+  /**
+   * Click handler to toggle the state of the input type.
+   */
  @HostListener("click") onClick() {
    this.toggled = !this.toggled;
    this.toggledChange.emit(this.toggled);
@@ -29,7 +41,11 @@ export class BitPasswordInputToggleDirective implements AfterContentInit, OnChan
    this.formField.input?.focus();
  }

-  constructor(@Host() private button: ButtonComponent, private formField: BitFormFieldComponent) {}
+  constructor(
+    @Host() private button: BitIconButtonComponent,
+    private formField: BitFormFieldComponent,
+    private i18nService: I18nService
+  ) {}

  get icon() {
    return this.toggled ? "bwi-eye-slash" : "bwi-eye";
--- a/libs/components/src/form-field/password-input-toggle.spec.ts
+++ b/libs/components/src/form-field/password-input-toggle.spec.ts
@@ -2,8 +2,12 @@ import { Component, DebugElement } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { By } from "@angular/platform-browser";

-import { ButtonComponent, ButtonModule } from "../button";
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+
+import { IconButtonModule } from "../icon-button";
+import { BitIconButtonComponent } from "../icon-button/icon-button.component";
 import { InputModule } from "../input/input.module";
+import { I18nMockService } from "../utils/i18n-mock.service";

 import { BitFormFieldControl } from "./form-field-control";
 import { BitFormFieldComponent } from "./form-field.component";
@@ -17,7 +21,7 @@ import { BitPasswordInputToggleDirective } from "./password-input-toggle.directi
      <bit-form-field>
        <bit-label>Password</bit-label>
        <input bitInput type="password" />
-        <button type="button" bitButton bitSuffix bitPasswordInputToggle></button>
+        <button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
      </bit-form-field>
    </form>
  `,
@@ -26,21 +30,22 @@ class TestFormFieldComponent {}

 describe("PasswordInputToggle", () => {
  let fixture: ComponentFixture<TestFormFieldComponent>;
-  let button: ButtonComponent;
+  let button: BitIconButtonComponent;
  let input: BitFormFieldControl;
  let toggle: DebugElement;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      imports: [FormFieldModule, ButtonModule, InputModule],
+      imports: [FormFieldModule, IconButtonModule, InputModule],
      declarations: [TestFormFieldComponent],
+      providers: [{ provide: I18nService, useValue: new I18nMockService({}) }],
    }).compileComponents();

    fixture = TestBed.createComponent(TestFormFieldComponent);
    fixture.detectChanges();

    toggle = fixture.debugElement.query(By.directive(BitPasswordInputToggleDirective));
-    const buttonEl = fixture.debugElement.query(By.directive(ButtonComponent));
+    const buttonEl = fixture.debugElement.query(By.directive(BitIconButtonComponent));
    button = buttonEl.componentInstance;
    const formFieldEl = fixture.debugElement.query(By.directive(BitFormFieldComponent));
    const formField: BitFormFieldComponent = formFieldEl.componentInstance;
--- a/libs/components/src/form-field/password-input-toggle.stories.ts
+++ b/libs/components/src/form-field/password-input-toggle.stories.ts
@@ -1,8 +1,11 @@
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { Meta, moduleMetadata, Story } from "@storybook/angular";

-import { ButtonModule } from "../button";
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+
+import { IconButtonModule } from "../icon-button";
 import { InputModule } from "../input/input.module";
+import { I18nMockService } from "../utils/i18n-mock.service";

 import { FormFieldModule } from "./form-field.module";
 import { BitPasswordInputToggleDirective } from "./password-input-toggle.directive";
@@ -12,7 +15,13 @@ export default {
  component: BitPasswordInputToggleDirective,
  decorators: [
    moduleMetadata({
-      imports: [FormsModule, ReactiveFormsModule, FormFieldModule, InputModule, ButtonModule],
+      imports: [FormsModule, ReactiveFormsModule, FormFieldModule, InputModule, IconButtonModule],
+      providers: [
+        {
+          provide: I18nService,
+          useValue: new I18nMockService({ toggleVisibility: "Toggle visibility" }),
+        },
+      ],
    }),
  ],
  parameters: {
@@ -40,7 +49,7 @@ const Template: Story<BitPasswordInputToggleDirective> = (
      <bit-form-field>
        <bit-label>Password</bit-label>
        <input bitInput type="password" />
-        <button type="button" bitButton bitSuffix bitPasswordInputToggle></button>
+        <button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
      </bit-form-field>
    </form>
  `,
@@ -60,7 +69,7 @@ const TemplateBinding: Story<BitPasswordInputToggleDirective> = (
      <bit-form-field>
        <bit-label>Password</bit-label>
        <input bitInput type="password" />
-        <button type="button" bitButton bitSuffix bitPasswordInputToggle [(toggled)]="toggled"></button>
+        <button type="button" bitIconButton bitSuffix bitPasswordInputToggle [(toggled)]="toggled"></button>
      </bit-form-field>

      <label class="tw-text-main">
--- a/libs/components/src/form-field/prefix.directive.ts
+++ b/libs/components/src/form-field/prefix.directive.ts
@@ -1,24 +1,51 @@
-import { Directive, HostBinding, Input } from "@angular/core";
+import { Directive, HostBinding, Input, OnInit, Optional } from "@angular/core";
+
+import { ButtonLikeAbstraction } from "../shared/button-like.abstraction";

 export const PrefixClasses = [
-  "tw-block",
-  "tw-px-3",
-  "tw-py-1.5",
  "tw-bg-background-alt",
  "tw-border",
  "tw-border-solid",
  "tw-border-secondary-500",
  "tw-text-muted",
  "tw-rounded-none",
-  "disabled:!tw-text-muted",
-  "disabled:tw-border-secondary-500",
 ];

+export const PrefixButtonClasses = [
+  "hover:tw-bg-text-muted",
+  "hover:tw-text-contrast",
+  "disabled:tw-opacity-100",
+  "disabled:tw-bg-secondary-100",
+  "disabled:hover:tw-bg-secondary-100",
+  "disabled:hover:tw-text-muted",
+  "focus-visible:tw-ring-primary-700",
+
+  "focus-visible:tw-border-primary-700",
+  "focus-visible:tw-ring-1",
+  "focus-visible:tw-ring-inset",
+  "focus-visible:tw-ring-primary-700",
+  "focus-visible:tw-z-10",
+];
+
+export const PrefixStaticContentClasses = ["tw-block", "tw-px-3", "tw-py-1.5"];
+
@Directive({
  selector: "[bitPrefix]",
 })
-export class BitPrefixDirective {
+export class BitPrefixDirective implements OnInit {
+  constructor(@Optional() private buttonComponent: ButtonLikeAbstraction) {}
+
  @HostBinding("class") @Input() get classList() {
-    return PrefixClasses.concat(["tw-border-r-0", "first:tw-rounded-l"]);
+    return PrefixClasses.concat([
+      "tw-border-r-0",
+      "first:tw-rounded-l",
+
+      "focus-visible:tw-border-r",
+      "focus-visible:tw-mr-[-1px]",
+    ]).concat(this.buttonComponent != undefined ? PrefixButtonClasses : PrefixStaticContentClasses);
+  }
+
+  ngOnInit(): void {
+    this.buttonComponent?.setButtonType("unstyled");
  }
 }
--- a/libs/components/src/form-field/suffix.directive.ts
+++ b/libs/components/src/form-field/suffix.directive.ts
@@ -1,12 +1,26 @@
-import { Directive, HostBinding, Input } from "@angular/core";
+import { Directive, HostBinding, Input, Optional } from "@angular/core";

-import { PrefixClasses } from "./prefix.directive";
+import { ButtonLikeAbstraction } from "../shared/button-like.abstraction";
+
+import { PrefixButtonClasses, PrefixClasses, PrefixStaticContentClasses } from "./prefix.directive";

@Directive({
  selector: "[bitSuffix]",
 })
 export class BitSuffixDirective {
+  constructor(@Optional() private buttonComponent: ButtonLikeAbstraction) {}
+
  @HostBinding("class") @Input() get classList() {
-    return PrefixClasses.concat(["tw-border-l-0", "last:tw-rounded-r"]);
+    return PrefixClasses.concat([
+      "tw-border-l-0",
+      "last:tw-rounded-r",
+
+      "focus-visible:tw-border-l",
+      "focus-visible:tw-ml-[-1px]",
+    ]).concat(this.buttonComponent != undefined ? PrefixButtonClasses : PrefixStaticContentClasses);
+  }
+
+  ngOnInit(): void {
+    this.buttonComponent?.setButtonType("unstyled");
  }
 }
--- a/libs/components/src/icon-button/icon-button.component.ts
+++ b/libs/components/src/icon-button/icon-button.component.ts
@@ -1,8 +1,26 @@
 import { Component, HostBinding, Input } from "@angular/core";

-import { ButtonLikeAbstraction } from "../shared/button-like.abstraction";
+import { ButtonLikeAbstraction, ButtonType } from "../shared/button-like.abstraction";

-export type IconButtonType = "contrast" | "main" | "muted" | "primary" | "secondary" | "danger";
+export type IconButtonType = ButtonType | "contrast" | "main" | "muted";
+
+const focusRing = [
+  // Workaround for box-shadow with transparent offset issue:
+  // https://github.com/tailwindlabs/tailwindcss/issues/3595
+  // Remove `before:` and use regular `tw-ring` when browser no longer has bug, or better:
+  // switch to `outline` with `outline-offset` when Safari supports border radius on outline.
+  // Using `box-shadow` to create outlines is a hack and as such `outline` should be preferred.
+  "tw-relative",
+  "before:tw-content-['']",
+  "before:tw-block",
+  "before:tw-absolute",
+  "before:-tw-inset-[3px]",
+  "before:tw-rounded-md",
+  "before:tw-transition",
+  "before:tw-ring",
+  "before:tw-ring-transparent",
+  "focus-visible:tw-z-10",
+];

 const styles: Record<IconButtonType, string[]> = {
  contrast: [
@@ -12,8 +30,10 @@ const styles: Record<IconButtonType, string[]> = {
    "hover:tw-bg-transparent-hover",
    "hover:tw-border-text-contrast",
    "focus-visible:before:tw-ring-text-contrast",
+    "disabled:tw-opacity-60",
    "disabled:hover:tw-border-transparent",
    "disabled:hover:tw-bg-transparent",
+    ...focusRing,
  ],
  main: [
    "tw-bg-transparent",
@@ -22,8 +42,10 @@ const styles: Record<IconButtonType, string[]> = {
    "hover:tw-bg-transparent-hover",
    "hover:tw-border-text-main",
    "focus-visible:before:tw-ring-text-main",
+    "disabled:tw-opacity-60",
    "disabled:hover:tw-border-transparent",
    "disabled:hover:tw-bg-transparent",
+    ...focusRing,
  ],
  muted: [
    "tw-bg-transparent",
@@ -32,8 +54,10 @@ const styles: Record<IconButtonType, string[]> = {
    "hover:tw-bg-transparent-hover",
    "hover:tw-border-primary-700",
    "focus-visible:before:tw-ring-primary-700",
+    "disabled:tw-opacity-60",
    "disabled:hover:tw-border-transparent",
    "disabled:hover:tw-bg-transparent",
+    ...focusRing,
  ],
  primary: [
    "tw-bg-primary-500",
@@ -42,8 +66,10 @@ const styles: Record<IconButtonType, string[]> = {
    "hover:tw-bg-primary-700",
    "hover:tw-border-primary-700",
    "focus-visible:before:tw-ring-primary-700",
+    "disabled:tw-opacity-60",
    "disabled:hover:tw-border-primary-500",
    "disabled:hover:tw-bg-primary-500",
+    ...focusRing,
  ],
  secondary: [
    "tw-bg-transparent",
@@ -52,10 +78,12 @@ const styles: Record<IconButtonType, string[]> = {
    "hover:!tw-text-contrast",
    "hover:tw-bg-text-muted",
    "focus-visible:before:tw-ring-primary-700",
+    "disabled:tw-opacity-60",
    "disabled:hover:tw-border-text-muted",
    "disabled:hover:tw-bg-transparent",
    "disabled:hover:!tw-text-muted",
    "disabled:hover:tw-border-text-muted",
+    ...focusRing,
  ],
  danger: [
    "tw-bg-transparent",
@@ -64,11 +92,14 @@ const styles: Record<IconButtonType, string[]> = {
    "hover:!tw-text-contrast",
    "hover:tw-bg-danger-500",
    "focus-visible:before:tw-ring-primary-700",
+    "disabled:tw-opacity-60",
    "disabled:hover:tw-border-danger-500",
    "disabled:hover:tw-bg-transparent",
    "disabled:hover:!tw-text-danger",
    "disabled:hover:tw-border-danger-500",
+    ...focusRing,
  ],
+  unstyled: [],
 };

 export type IconButtonSize = "default" | "small";
@@ -86,7 +117,7 @@ const sizes: Record<IconButtonSize, string[]> = {
 export class BitIconButtonComponent implements ButtonLikeAbstraction {
  @Input("bitIconButton") icon: string;

-  @Input() buttonType: IconButtonType = "main";
+  @Input() buttonType: IconButtonType;

  @Input() size: IconButtonSize = "default";

@@ -98,27 +129,9 @@ export class BitIconButtonComponent implements ButtonLikeAbstraction {
      "tw-rounded",
      "tw-transition",
      "hover:tw-no-underline",
-      "disabled:tw-opacity-60",
      "focus:tw-outline-none",
-
-      // Workaround for box-shadow with transparent offset issue:
-      // https://github.com/tailwindlabs/tailwindcss/issues/3595
-      // Remove `before:` and use regular `tw-ring` when browser no longer has bug, or better:
-      // switch to `outline` with `outline-offset` when Safari supports border radius on outline.
-      // Using `box-shadow` to create outlines is a hack and as such `outline` should be preferred.
-      "tw-relative",
-      "before:tw-content-['']",
-      "before:tw-block",
-      "before:tw-absolute",
-      "before:-tw-inset-[3px]",
-      "before:tw-rounded-md",
-      "before:tw-transition",
-      "before:tw-ring",
-      "before:tw-ring-transparent",
-      "focus-visible:before:tw-ring-text-contrast",
-      "focus-visible:tw-z-10",
    ]
-      .concat(styles[this.buttonType])
+      .concat(styles[this.buttonType ?? "main"])
      .concat(sizes[this.size]);
  }

@@ -134,4 +147,8 @@ export class BitIconButtonComponent implements ButtonLikeAbstraction {

  @Input() loading = false;
  @Input() disabled = false;
+
+  setButtonType(value: "primary" | "secondary" | "danger" | "unstyled") {
+    this.buttonType = value;
+  }
 }
--- a/libs/components/src/input/input.directive.ts
+++ b/libs/components/src/input/input.directive.ts
@@ -31,6 +31,7 @@ export class BitInputDirective implements BitFormFieldControl {
      "focus:tw-outline-none",
      "focus:tw-border-primary-700",
      "focus:tw-ring-1",
+      "focus:tw-ring-inset",
      "focus:tw-ring-primary-700",
      "focus:tw-z-10",
      "disabled:tw-bg-secondary-100",
--- a/libs/components/src/shared/button-like.abstraction.ts
+++ b/libs/components/src/shared/button-like.abstraction.ts
@@ -1,4 +1,7 @@
+export type ButtonType = "primary" | "secondary" | "danger" | "unstyled";
+
 export abstract class ButtonLikeAbstraction {
  loading: boolean;
  disabled: boolean;
+  setButtonType: (value: ButtonType) => void;
 }
--- a/package-lock.json
+++ b/package-lock.json
@@ -177,7 +177,7 @@
    },
    "apps/browser": {
      "name": "@bitwarden/browser",
-      "version": "2022.12.0"
+      "version": "2022.12.1"
    },
    "apps/cli": {
      "name": "@bitwarden/cli",