From 913c3ddbec4dab7a28ffc340a076a8ed2b0914b8 Mon Sep 17 00:00:00 2001
From: Bryan Cunningham <bcunningham@bitwarden.com>
Date: Thu, 3 Jul 2025 12:14:10 -0400
Subject: [PATCH 1/7] [CL-620] add padding to increase checkbox clickable area
 (#15331)

* add padding to increaase checkbox clickable area

* fix checkbox story imports

* enlarge click area of checkbox w/out label

* apply disabled states to before

* WIP

* revert experimental changes

* add negative margin to account for extra padding

* Remove margin from checkbox and apply in form control

* Remove margin from radio as it's applied in form control

* add back line height removed in error
---
 .../src/checkbox/checkbox.component.ts        | 99 ++++++++++---------
 .../src/checkbox/checkbox.stories.ts          | 16 +--
 .../form-control/form-control.component.html  |  2 +-
 .../src/radio-button/radio-input.component.ts |  1 -
 4 files changed, 65 insertions(+), 53 deletions(-)

diff --git a/libs/components/src/checkbox/checkbox.component.ts b/libs/components/src/checkbox/checkbox.component.ts
index 079ede287cc..c420b3f3473 100644
--- a/libs/components/src/checkbox/checkbox.component.ts
+++ b/libs/components/src/checkbox/checkbox.component.ts
@@ -20,64 +20,75 @@ export class CheckboxComponent implements BitFormControlAbstraction {
     "tw-cursor-pointer",
     "tw-inline-block",
     "tw-align-sub",
-    "tw-rounded",
-    "tw-border",
-    "tw-border-solid",
-    "tw-border-secondary-500",
-    "tw-h-[1.12rem]",
-    "tw-w-[1.12rem]",
-    "tw-me-1.5",
     "tw-flex-none", // Flexbox fix for bit-form-control
+    "!tw-p-1",
+    "after:tw-inset-1",
+    // negative margin to negate the positioning added by the padding
+    "!-tw-mt-1",
+    "!-tw-mb-1",
+    "!-tw-ms-1",
 
     "before:tw-content-['']",
     "before:tw-block",
-    "before:tw-absolute",
     "before:tw-inset-0",
+    "before:tw-h-[1.12rem]",
+    "before:tw-w-[1.12rem]",
+    "before:tw-rounded",
+    "before:tw-border",
+    "before:tw-border-solid",
+    "before:tw-border-secondary-500",
 
-    "hover:tw-border-2",
-    "[&>label]:tw-border-2",
+    "after:tw-content-['']",
+    "after:tw-block",
+    "after:tw-absolute",
+    "after:tw-inset-0",
+    "after:tw-h-[1.12rem]",
+    "after:tw-w-[1.12rem]",
+
+    "hover:before:tw-border-2",
+    "[&>label]:before:tw-border-2",
 
     // if it exists, the parent form control handles focus
-    "[&:not(bit-form-control_*)]:focus-visible:tw-ring-2",
-    "[&:not(bit-form-control_*)]:focus-visible:tw-ring-offset-2",
-    "[&:not(bit-form-control_*)]:focus-visible:tw-ring-primary-600",
+    "[&:not(bit-form-control_*)]:focus-visible:before:tw-ring-2",
+    "[&:not(bit-form-control_*)]:focus-visible:before:tw-ring-offset-2",
+    "[&:not(bit-form-control_*)]:focus-visible:before:tw-ring-primary-600",
 
-    "disabled:tw-cursor-auto",
-    "disabled:tw-border",
-    "disabled:hover:tw-border",
-    "disabled:tw-bg-secondary-100",
-    "disabled:hover:tw-bg-secondary-100",
+    "disabled:before:tw-cursor-auto",
+    "disabled:before:tw-border",
+    "disabled:before:hover:tw-border",
+    "disabled:before:tw-bg-secondary-100",
+    "disabled:hover:before:tw-bg-secondary-100",
 
-    "checked:tw-bg-primary-600",
-    "checked:tw-border-primary-600",
-    "checked:hover:tw-bg-primary-700",
-    "checked:hover:tw-border-primary-700",
-    "[&>label:hover]:checked:tw-bg-primary-700",
-    "[&>label:hover]:checked:tw-border-primary-700",
-    "checked:before:tw-bg-text-contrast",
-    "checked:before:tw-mask-position-[center]",
-    "checked:before:tw-mask-repeat-[no-repeat]",
-    "checked:disabled:tw-border-secondary-100",
-    "checked:disabled:hover:tw-border-secondary-100",
-    "checked:disabled:tw-bg-secondary-100",
-    "checked:disabled:before:tw-bg-text-muted",
+    "checked:before:tw-bg-primary-600",
+    "checked:before:tw-border-primary-600",
+    "checked:before:hover:tw-bg-primary-700",
+    "checked:before:hover:tw-border-primary-700",
+    "[&>label:hover]:checked:before:tw-bg-primary-700",
+    "[&>label:hover]:checked:before:tw-border-primary-700",
+    "checked:after:tw-bg-text-contrast",
+    "checked:after:tw-mask-position-[center]",
+    "checked:after:tw-mask-repeat-[no-repeat]",
+    "checked:disabled:before:tw-border-secondary-100",
+    "checked:disabled:hover:before:tw-border-secondary-100",
+    "checked:disabled:before:tw-bg-secondary-100",
+    "checked:disabled:after:tw-bg-text-muted",
 
-    "[&:not(:indeterminate)]:checked:before:tw-mask-image-[var(--mask-image)]",
-    "indeterminate:before:tw-mask-image-[var(--indeterminate-mask-image)]",
+    "[&:not(:indeterminate)]:checked:after:tw-mask-image-[var(--mask-image)]",
+    "indeterminate:after:tw-mask-image-[var(--indeterminate-mask-image)]",
 
-    "indeterminate:tw-bg-primary-600",
-    "indeterminate:tw-border-primary-600",
-    "indeterminate:hover:tw-bg-primary-700",
-    "indeterminate:hover:tw-border-primary-700",
-    "[&>label:hover]:indeterminate:tw-bg-primary-700",
-    "[&>label:hover]:indeterminate:tw-border-primary-700",
-    "indeterminate:before:tw-bg-text-contrast",
-    "indeterminate:before:tw-mask-position-[center]",
-    "indeterminate:before:tw-mask-repeat-[no-repeat]",
-    "indeterminate:before:tw-mask-image-[var(--indeterminate-mask-image)]",
+    "indeterminate:before:tw-bg-primary-600",
+    "indeterminate:before:tw-border-primary-600",
+    "indeterminate:hover:before:tw-bg-primary-700",
+    "indeterminate:hover:before:tw-border-primary-700",
+    "[&>label:hover]:indeterminate:before:tw-bg-primary-700",
+    "[&>label:hover]:indeterminate:before:tw-border-primary-700",
+    "indeterminate:after:tw-bg-text-contrast",
+    "indeterminate:after:tw-mask-position-[center]",
+    "indeterminate:after:tw-mask-repeat-[no-repeat]",
+    "indeterminate:after:tw-mask-image-[var(--indeterminate-mask-image)]",
     "indeterminate:disabled:tw-border-secondary-100",
     "indeterminate:disabled:tw-bg-secondary-100",
-    "indeterminate:disabled:before:tw-bg-text-muted",
+    "indeterminate:disabled:after:tw-bg-text-muted",
   ];
 
   constructor(@Optional() @Self() private ngControl?: NgControl) {}
diff --git a/libs/components/src/checkbox/checkbox.stories.ts b/libs/components/src/checkbox/checkbox.stories.ts
index 123c6704ff4..9050d97cafc 100644
--- a/libs/components/src/checkbox/checkbox.stories.ts
+++ b/libs/components/src/checkbox/checkbox.stories.ts
@@ -13,6 +13,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 
 import { BadgeModule } from "../badge";
 import { FormControlModule } from "../form-control";
+import { FormFieldModule } from "../form-field";
 import { TableModule } from "../table";
 import { I18nMockService } from "../utils/i18n-mock.service";
 
@@ -30,6 +31,7 @@ const template = /*html*/ `
 @Component({
   selector: "app-example",
   template,
+  imports: [CheckboxModule, FormFieldModule, ReactiveFormsModule],
 })
 class ExampleComponent {
   protected formObj = this.formBuilder.group({
@@ -55,8 +57,8 @@ export default {
   title: "Component Library/Form/Checkbox",
   decorators: [
     moduleMetadata({
-      declarations: [ExampleComponent],
       imports: [
+        ExampleComponent,
         FormsModule,
         ReactiveFormsModule,
         FormControlModule,
@@ -195,17 +197,17 @@ export const Custom: Story = {
     props: args,
     template: /*html*/ `
       <div class="tw-flex tw-flex-col tw-w-32">
-        <label class="tw-text-main tw-flex tw-bg-secondary-300 tw-p-2">
+        <label class="tw-text-main tw-gap-2 tw-flex tw-items-center tw-justify-between tw-bg-secondary-300 tw-p-2">
           A-Z
-          <input class="tw-ms-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
+          <input class="tw-me-0 focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
         </label>
-        <label class="tw-text-main tw-flex tw-bg-secondary-300 tw-p-2">
+        <label class="tw-text-main tw-flex tw-items-center tw-justify-between tw-bg-secondary-300 tw-p-2">
           a-z
-          <input class="tw-ms-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
+          <input class="tw-me-0 focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
         </label>
-        <label class="tw-text-main tw-flex tw-bg-secondary-300 tw-p-2">
+       <label class="tw-text-main tw-flex tw-items-center tw-justify-between tw-bg-secondary-300 tw-p-2">
           0-9
-          <input class="tw-ms-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
+          <input class="tw-me-0 focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
         </label>
       </div>
     `,
diff --git a/libs/components/src/form-control/form-control.component.html b/libs/components/src/form-control/form-control.component.html
index 735e375a29a..15d422b01a1 100644
--- a/libs/components/src/form-control/form-control.component.html
+++ b/libs/components/src/form-control/form-control.component.html
@@ -1,5 +1,5 @@
 <label
-  class="tw-transition tw-select-none tw-mb-0 tw-inline-flex tw-rounded tw-p-0.5 has-[:focus-visible]:tw-ring has-[:focus-visible]:tw-ring-primary-600"
+  class="tw-transition tw-items-start [&:has(input[type='checkbox'])]:tw-gap-[.25rem] [&:has(input[type='radio'])]:tw-gap-1.5 tw-select-none tw-mb-0 tw-inline-flex tw-rounded has-[:focus-visible]:tw-ring has-[:focus-visible]:tw-ring-primary-600"
   [ngClass]="[formControl.disabled ? 'tw-cursor-auto' : 'tw-cursor-pointer']"
 >
   <ng-content></ng-content>
diff --git a/libs/components/src/radio-button/radio-input.component.ts b/libs/components/src/radio-button/radio-input.component.ts
index 53bda5566b7..1598def5c65 100644
--- a/libs/components/src/radio-button/radio-input.component.ts
+++ b/libs/components/src/radio-button/radio-input.component.ts
@@ -29,7 +29,6 @@ export class RadioInputComponent implements BitFormControlAbstraction {
     "tw-border-secondary-600",
     "tw-w-[1.12rem]",
     "tw-h-[1.12rem]",
-    "tw-me-1.5",
     "tw-flex-none", // Flexbox fix for bit-form-control
 
     "hover:tw-border-2",

From 2d897e8ceabf0750eb3e61fea6629b7c938d25aa Mon Sep 17 00:00:00 2001
From: cyprain-okeke <108260115+cyprain-okeke@users.noreply.github.com>
Date: Thu, 3 Jul 2025 18:07:51 +0100
Subject: [PATCH 2/7] Fix the failing billing steps (#15459)

---
 .../complete-trial-initiation.component.html    |  2 +-
 .../complete-trial-initiation.component.ts      | 17 ++++++++++++++++-
 libs/common/src/enums/feature-flag.enum.ts      |  2 ++
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/app/billing/trial-initiation/complete-trial-initiation/complete-trial-initiation.component.html b/apps/web/src/app/billing/trial-initiation/complete-trial-initiation/complete-trial-initiation.component.html
index 7a1ca2cd83d..98fe4032b55 100644
--- a/apps/web/src/app/billing/trial-initiation/complete-trial-initiation/complete-trial-initiation.component.html
+++ b/apps/web/src/app/billing/trial-initiation/complete-trial-initiation/complete-trial-initiation.component.html
@@ -48,7 +48,7 @@
       <app-vertical-step
         label="Billing"
         [subLabel]="billingSubLabel"
-        *ngIf="(trialPaymentOptional$ | async) && trialLength === 0 && !isSecretsManagerFree"
+        *ngIf="showBillingStep$ | async"
       >
         <app-trial-billing-step
           *ngIf="stepper.selectedIndex === 2"
diff --git a/apps/web/src/app/billing/trial-initiation/complete-trial-initiation/complete-trial-initiation.component.ts b/apps/web/src/app/billing/trial-initiation/complete-trial-initiation/complete-trial-initiation.component.ts
index b965f816a76..2b927f6db09 100644
--- a/apps/web/src/app/billing/trial-initiation/complete-trial-initiation/complete-trial-initiation.component.ts
+++ b/apps/web/src/app/billing/trial-initiation/complete-trial-initiation/complete-trial-initiation.component.ts
@@ -4,7 +4,7 @@ import { StepperSelectionEvent } from "@angular/cdk/stepper";
 import { Component, OnDestroy, OnInit, ViewChild } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
-import { firstValueFrom, Subject, switchMap, takeUntil } from "rxjs";
+import { combineLatest, firstValueFrom, map, Subject, switchMap, takeUntil } from "rxjs";
 
 import {
   InputPasswordFlow,
@@ -101,6 +101,9 @@ export class CompleteTrialInitiationComponent implements OnInit, OnDestroy {
   protected trialPaymentOptional$ = this.configService.getFeatureFlag$(
     FeatureFlag.TrialPaymentOptional,
   );
+  protected allowTrialLengthZero$ = this.configService.getFeatureFlag$(
+    FeatureFlag.AllowTrialLengthZero,
+  );
 
   constructor(
     protected router: Router,
@@ -334,6 +337,18 @@ export class CompleteTrialInitiationComponent implements OnInit, OnDestroy {
     return this.productTier;
   }
 
+  readonly showBillingStep$ = combineLatest([
+    this.trialPaymentOptional$,
+    this.allowTrialLengthZero$,
+  ]).pipe(
+    map(([trialPaymentOptional, allowTrialLengthZero]) => {
+      return (
+        (!trialPaymentOptional && !this.isSecretsManagerFree) ||
+        (trialPaymentOptional && allowTrialLengthZero && this.trialLength === 0)
+      );
+    }),
+  );
+
   /** Create an organization unless the trial is for secrets manager */
   async conditionallyCreateOrganization(): Promise<void> {
     if (!this.isSecretsManagerFree) {
diff --git a/libs/common/src/enums/feature-flag.enum.ts b/libs/common/src/enums/feature-flag.enum.ts
index dd2aadc0009..68228b63bea 100644
--- 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 {
   PM17772_AdminInitiatedSponsorships = "pm-17772-admin-initiated-sponsorships",
   PM19956_RequireProviderPaymentMethodDuringSetup = "pm-19956-require-provider-payment-method-during-setup",
   UseOrganizationWarningsService = "use-organization-warnings-service",
+  AllowTrialLengthZero = "pm-20322-allow-trial-length-0",
 
   /* Data Insights and Reporting */
   EnableRiskInsightsNotifications = "enable-risk-insights-notifications",
@@ -114,6 +115,7 @@ export const DefaultFeatureFlagValue = {
   [FeatureFlag.PM17772_AdminInitiatedSponsorships]: FALSE,
   [FeatureFlag.PM19956_RequireProviderPaymentMethodDuringSetup]: FALSE,
   [FeatureFlag.UseOrganizationWarningsService]: FALSE,
+  [FeatureFlag.AllowTrialLengthZero]: FALSE,
 
   /* Key Management */
   [FeatureFlag.PrivateKeyRegeneration]: FALSE,

From 20a5f5c7d9ba7637497a65d7c76a35e7dc2f4da8 Mon Sep 17 00:00:00 2001
From: Daniel Riera <driera@livefront.com>
Date: Thu, 3 Jul 2025 13:26:13 -0400
Subject: [PATCH 3/7] [PM-23082] The v3 notification is using the v2
 notification sizing in some cases (#15370)

* PM-23082

* add tests
---
 ...rlay-notifications-content.service.spec.ts | 34 ++++++++++
 .../overlay-notifications-content.service.ts  | 67 ++++++++-----------
 2 files changed, 61 insertions(+), 40 deletions(-)

diff --git a/apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.spec.ts b/apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.spec.ts
index 28db10b35fa..9202a5a3839 100644
--- a/apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.spec.ts
+++ b/apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.spec.ts
@@ -44,6 +44,40 @@ describe("OverlayNotificationsContentService", () => {
       expect(bodyAppendChildSpy).not.toHaveBeenCalled();
     });
 
+    it("applies correct styles when notificationRefreshFlag is true", async () => {
+      overlayNotificationsContentService["notificationRefreshFlag"] = true;
+
+      sendMockExtensionMessage({
+        command: "openNotificationBar",
+        data: {
+          type: "change",
+          typeData: mock<NotificationTypeData>(),
+        },
+      });
+      await flushPromises();
+
+      const barElement = overlayNotificationsContentService["notificationBarElement"]!;
+      expect(barElement.style.height).toBe("400px");
+      expect(barElement.style.right).toBe("0px");
+    });
+
+    it("applies correct styles when notificationRefreshFlag is false", async () => {
+      overlayNotificationsContentService["notificationRefreshFlag"] = false;
+
+      sendMockExtensionMessage({
+        command: "openNotificationBar",
+        data: {
+          type: "change",
+          typeData: mock<NotificationTypeData>(),
+        },
+      });
+      await flushPromises();
+
+      const barElement = overlayNotificationsContentService["notificationBarElement"]!;
+      expect(barElement.style.height).toBe("82px");
+      expect(barElement.style.right).toBe("10px");
+    });
+
     it("closes the notification bar if the notification bar type has changed", async () => {
       overlayNotificationsContentService["currentNotificationBarType"] = "add";
       const closeNotificationBarSpy = jest.spyOn(
diff --git a/apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.ts b/apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.ts
index ee005852a42..01f8237581d 100644
--- a/apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.ts
+++ b/apps/browser/src/autofill/overlay/notifications/content/overlay-notifications-content.service.ts
@@ -21,24 +21,32 @@ export class OverlayNotificationsContentService
   private notificationBarIframeElement: HTMLIFrameElement | null = null;
   private currentNotificationBarType: NotificationType | null = null;
   private notificationRefreshFlag: boolean = false;
-  private notificationBarElementStyles: Partial<CSSStyleDeclaration> = {
-    height: "82px",
-    width: "430px",
-    maxWidth: "calc(100% - 20px)",
-    minHeight: "initial",
-    top: "10px",
-    right: "10px",
-    padding: "0",
-    position: "fixed",
-    zIndex: "2147483647",
-    visibility: "visible",
-    borderRadius: "4px",
-    border: "none",
-    backgroundColor: "transparent",
-    overflow: "hidden",
-    transition: "box-shadow 0.15s ease",
-    transitionDelay: "0.15s",
-  };
+  private getNotificationBarStyles(): Partial<CSSStyleDeclaration> {
+    const styles: Partial<CSSStyleDeclaration> = {
+      height: "400px",
+      width: "430px",
+      maxWidth: "calc(100% - 20px)",
+      minHeight: "initial",
+      top: "10px",
+      right: "0px",
+      padding: "0",
+      position: "fixed",
+      zIndex: "2147483647",
+      visibility: "visible",
+      borderRadius: "4px",
+      border: "none",
+      backgroundColor: "transparent",
+      overflow: "hidden",
+      transition: "box-shadow 0.15s ease",
+      transitionDelay: "0.15s",
+    };
+
+    if (!this.notificationRefreshFlag) {
+      styles.height = "82px";
+      styles.right = "10px";
+    }
+    return styles;
+  }
   private notificationBarIframeElementStyles: Partial<CSSStyleDeclaration> = {
     width: "100%",
     height: "100%",
@@ -60,7 +68,6 @@ export class OverlayNotificationsContentService
     void sendExtensionMessage("checkNotificationQueue");
     void sendExtensionMessage("notificationRefreshFlagValue").then((notificationRefreshFlag) => {
       this.notificationRefreshFlag = !!notificationRefreshFlag;
-      this.setNotificationRefreshBarHeight();
     });
   }
 
@@ -233,32 +240,12 @@ export class OverlayNotificationsContentService
       this.notificationBarElement = globalThis.document.createElement("div");
       this.notificationBarElement.id = "bit-notification-bar";
 
-      setElementStyles(this.notificationBarElement, this.notificationBarElementStyles, true);
-      this.setNotificationRefreshBarHeight();
+      setElementStyles(this.notificationBarElement, this.getNotificationBarStyles(), true);
 
       this.notificationBarElement.appendChild(this.notificationBarIframeElement);
     }
   }
 
-  /**
-   * Sets the height of the notification bar based on the value of `notificationRefreshFlag`.
-   * If the flag is `true`, the bar is expanded to 400px and aligned right.
-   * If the flag is `false`, `null`, or `undefined`, it defaults to height of 82px.
-   * Skips if the notification bar element has not yet been created.
-   *
-   */
-  private setNotificationRefreshBarHeight() {
-    const isNotificationV3 = !!this.notificationRefreshFlag;
-
-    if (!this.notificationBarElement) {
-      return;
-    }
-
-    if (isNotificationV3) {
-      setElementStyles(this.notificationBarElement, { height: "400px", right: "0" }, true);
-    }
-  }
-
   /**
    * Sets up the message listener for the initialization of the notification bar.
    * This will send the initialization data to the notification bar iframe.

From 40cbd5942b6948aea58cfe6ec6c1802f18474c28 Mon Sep 17 00:00:00 2001
From: Vicki League <vleague@bitwarden.com>
Date: Thu, 3 Jul 2025 14:09:42 -0400
Subject: [PATCH 4/7] [UIF] increase memory limit for local storybook npm
 command (#15460)

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b522113876c..f45b04c06e9 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "test:locales": "tsc --project ./scripts/tsconfig.json && node ./scripts/dist/test-locales.js",
     "lint:dep-ownership": "tsc --project ./scripts/tsconfig.json && node ./scripts/dist/dep-ownership.js",
     "docs:json": "compodoc -p ./tsconfig.json -e json -d . --disableRoutesGraph",
-    "storybook": "ng run components:storybook",
+    "storybook": "cross-env NODE_OPTIONS=\"--max-old-space-size=8192\" ng run components:storybook",
     "build-storybook": "cross-env NODE_OPTIONS=\"--max-old-space-size=8192\" ng run components:build-storybook",
     "build-storybook:ci": "cross-env NODE_OPTIONS=\"--max-old-space-size=8192\" ng run components:build-storybook --webpack-stats-json",
     "test-stories": "test-storybook --url http://localhost:6006",

From 3e4b82d725755dfa62a9eb7becc8628ff95225c1 Mon Sep 17 00:00:00 2001
From: Vicki League <vleague@bitwarden.com>
Date: Thu, 3 Jul 2025 15:23:21 -0400
Subject: [PATCH 5/7] [CL-748] Support nondismissable dialogs and simple
 dialogs (#15464)

---
 .../src/dialog/dialog.service.stories.ts      |  56 ++++++++-
 .../src/dialog/dialog/dialog.component.html   |  20 +--
 .../src/dialog/dialog/dialog.component.ts     |   6 +-
 .../simple-dialog.service.stories.ts          | 115 +++++++++++++++++-
 4 files changed, 177 insertions(+), 20 deletions(-)

diff --git a/libs/components/src/dialog/dialog.service.stories.ts b/libs/components/src/dialog/dialog.service.stories.ts
index 7e2d8c62bb6..c7b8f0ae916 100644
--- a/libs/components/src/dialog/dialog.service.stories.ts
+++ b/libs/components/src/dialog/dialog.service.stories.ts
@@ -25,10 +25,13 @@ interface Animal {
   template: `
     <bit-layout>
       <button class="tw-mr-2" bitButton type="button" (click)="openDialog()">Open Dialog</button>
+      <button class="tw-mr-2" bitButton type="button" (click)="openDialogNonDismissable()">
+        Open Non-Dismissable Dialog
+      </button>
       <button bitButton type="button" (click)="openDrawer()">Open Drawer</button>
     </bit-layout>
   `,
-  imports: [ButtonModule],
+  imports: [ButtonModule, LayoutComponent],
 })
 class StoryDialogComponent {
   constructor(public dialogService: DialogService) {}
@@ -41,6 +44,15 @@ class StoryDialogComponent {
     });
   }
 
+  openDialogNonDismissable() {
+    this.dialogService.open(NonDismissableContent, {
+      data: {
+        animal: "panda",
+      },
+      disableClose: true,
+    });
+  }
+
   openDrawer() {
     this.dialogService.openDrawer(StoryDialogContentComponent, {
       data: {
@@ -79,13 +91,40 @@ class StoryDialogContentComponent {
   }
 }
 
+@Component({
+  template: `
+    <bit-dialog title="Dialog Title" dialogSize="large">
+      <span bitDialogContent>
+        Dialog body text goes here.
+        <br />
+        Animal: {{ animal }}
+      </span>
+      <ng-container bitDialogFooter>
+        <button type="button" bitButton buttonType="primary" (click)="dialogRef.close()">
+          Save
+        </button>
+      </ng-container>
+    </bit-dialog>
+  `,
+  imports: [DialogModule, ButtonModule],
+})
+class NonDismissableContent {
+  constructor(
+    public dialogRef: DialogRef,
+    @Inject(DIALOG_DATA) private data: Animal,
+  ) {}
+
+  get animal() {
+    return this.data?.animal;
+  }
+}
+
 export default {
   title: "Component Library/Dialogs/Service",
   component: StoryDialogComponent,
   decorators: [
     positionFixedWrapperDecorator(),
     moduleMetadata({
-      declarations: [StoryDialogContentComponent],
       imports: [
         SharedModule,
         ButtonModule,
@@ -138,8 +177,7 @@ export const Default: Story = {
   },
 };
 
-/** Drawers must be a descendant of `bit-layout`. */
-export const Drawer: Story = {
+export const NonDismissable: Story = {
   play: async (context) => {
     const canvas = context.canvasElement;
 
@@ -147,3 +185,13 @@ export const Drawer: Story = {
     await userEvent.click(button);
   },
 };
+
+/** Drawers must be a descendant of `bit-layout`. */
+export const Drawer: Story = {
+  play: async (context) => {
+    const canvas = context.canvasElement;
+
+    const button = getAllByRole(canvas, "button")[2];
+    await userEvent.click(button);
+  },
+};
diff --git a/libs/components/src/dialog/dialog/dialog.component.html b/libs/components/src/dialog/dialog/dialog.component.html
index eaf7fc2beec..db08f88799b 100644
--- a/libs/components/src/dialog/dialog/dialog.component.html
+++ b/libs/components/src/dialog/dialog/dialog.component.html
@@ -30,15 +30,17 @@
       }
       <ng-content select="[bitDialogTitle]"></ng-content>
     </h2>
-    <button
-      type="button"
-      bitIconButton="bwi-close"
-      buttonType="main"
-      size="default"
-      bitDialogClose
-      [attr.title]="'close' | i18n"
-      [attr.aria-label]="'close' | i18n"
-    ></button>
+    @if (!this.dialogRef?.disableClose) {
+      <button
+        type="button"
+        bitIconButton="bwi-close"
+        buttonType="main"
+        size="default"
+        bitDialogClose
+        [attr.title]="'close' | i18n"
+        [attr.aria-label]="'close' | i18n"
+      ></button>
+    }
   </header>
 
   <div
diff --git a/libs/components/src/dialog/dialog/dialog.component.ts b/libs/components/src/dialog/dialog/dialog.component.ts
index f3daa218cdb..c0ddab27dd5 100644
--- a/libs/components/src/dialog/dialog/dialog.component.ts
+++ b/libs/components/src/dialog/dialog/dialog.component.ts
@@ -87,8 +87,10 @@ export class DialogComponent {
   }
 
   handleEsc(event: Event) {
-    this.dialogRef?.close();
-    event.stopPropagation();
+    if (!this.dialogRef?.disableClose) {
+      this.dialogRef?.close();
+      event.stopPropagation();
+    }
   }
 
   get width() {
diff --git a/libs/components/src/dialog/simple-dialog/simple-dialog.service.stories.ts b/libs/components/src/dialog/simple-dialog/simple-dialog.service.stories.ts
index cc5c8f2ae1c..ce9f7b46fef 100644
--- a/libs/components/src/dialog/simple-dialog/simple-dialog.service.stories.ts
+++ b/libs/components/src/dialog/simple-dialog/simple-dialog.service.stories.ts
@@ -2,6 +2,7 @@ import { DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
 import { Component, Inject } from "@angular/core";
 import { provideAnimations } from "@angular/platform-browser/animations";
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
+import { getAllByRole, userEvent } from "@storybook/test";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
@@ -15,19 +16,45 @@ interface Animal {
 }
 
 @Component({
-  template: `<button type="button" bitButton (click)="openDialog()">Open Simple Dialog</button>`,
+  template: `
+    <button type="button" bitButton (click)="openSimpleDialog()">Open Simple Dialog</button>
+    <button type="button" bitButton (click)="openNonDismissableWithPrimaryButtonDialog()">
+      Open Non-Dismissable Simple Dialog with Primary Button
+    </button>
+    <button type="button" bitButton (click)="openNonDismissableWithNoButtonsDialog()">
+      Open Non-Dismissable Simple Dialog with No Buttons
+    </button>
+  `,
   imports: [ButtonModule],
 })
 class StoryDialogComponent {
   constructor(public dialogService: DialogService) {}
 
-  openDialog() {
-    this.dialogService.open(StoryDialogContentComponent, {
+  openSimpleDialog() {
+    this.dialogService.open(SimpleDialogContent, {
       data: {
         animal: "panda",
       },
     });
   }
+
+  openNonDismissableWithPrimaryButtonDialog() {
+    this.dialogService.open(NonDismissableWithPrimaryButtonContent, {
+      data: {
+        animal: "panda",
+      },
+      disableClose: true,
+    });
+  }
+
+  openNonDismissableWithNoButtonsDialog() {
+    this.dialogService.open(NonDismissableWithNoButtonsContent, {
+      data: {
+        animal: "panda",
+      },
+      disableClose: true,
+    });
+  }
 }
 
 @Component({
@@ -49,7 +76,60 @@ class StoryDialogComponent {
   `,
   imports: [ButtonModule, DialogModule],
 })
-class StoryDialogContentComponent {
+class SimpleDialogContent {
+  constructor(
+    public dialogRef: DialogRef,
+    @Inject(DIALOG_DATA) private data: Animal,
+  ) {}
+
+  get animal() {
+    return this.data?.animal;
+  }
+}
+
+@Component({
+  template: `
+    <bit-simple-dialog>
+      <span bitDialogTitle>Dialog Title</span>
+      <span bitDialogContent>
+        Dialog body text goes here.
+        <br />
+        Animal: {{ animal }}
+      </span>
+      <ng-container bitDialogFooter>
+        <button type="button" bitButton buttonType="primary" (click)="dialogRef.close()">
+          Save
+        </button>
+      </ng-container>
+    </bit-simple-dialog>
+  `,
+  imports: [ButtonModule, DialogModule],
+})
+class NonDismissableWithPrimaryButtonContent {
+  constructor(
+    public dialogRef: DialogRef,
+    @Inject(DIALOG_DATA) private data: Animal,
+  ) {}
+
+  get animal() {
+    return this.data?.animal;
+  }
+}
+
+@Component({
+  template: `
+    <bit-simple-dialog>
+      <span bitDialogTitle>Dialog Title</span>
+      <span bitDialogContent>
+        Dialog body text goes here.
+        <br />
+        Animal: {{ animal }}
+      </span>
+    </bit-simple-dialog>
+  `,
+  imports: [ButtonModule, DialogModule],
+})
+class NonDismissableWithNoButtonsContent {
   constructor(
     public dialogRef: DialogRef,
     @Inject(DIALOG_DATA) private data: Animal,
@@ -89,4 +169,29 @@ export default {
 
 type Story = StoryObj<StoryDialogComponent>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  play: async (context) => {
+    const canvas = context.canvasElement;
+
+    const button = getAllByRole(canvas, "button")[0];
+    await userEvent.click(button);
+  },
+};
+
+export const NonDismissableWithPrimaryButton: Story = {
+  play: async (context) => {
+    const canvas = context.canvasElement;
+
+    const button = getAllByRole(canvas, "button")[1];
+    await userEvent.click(button);
+  },
+};
+
+export const NonDismissableWithNoButtons: Story = {
+  play: async (context) => {
+    const canvas = context.canvasElement;
+
+    const button = getAllByRole(canvas, "button")[2];
+    await userEvent.click(button);
+  },
+};

From b4d87007baa2fc771fae5b19bfc218e4f2395a38 Mon Sep 17 00:00:00 2001
From: Bryan Cunningham <bcunningham@bitwarden.com>
Date: Thu, 3 Jul 2025 16:12:56 -0400
Subject: [PATCH 6/7] [CL-718] nav updates (#15226)

* add basic new nav item styling

* update alt-3 bg color

* add x padding to item

* remove copy left in error

* style app switcher to match nav items

* adding new button hover colors

* add new logo lockups

* use new logos in web vault

* fix color and svg fills

* use set height for nav items

* optimize SVGs

* move if logic

* use rem for icon size

* move shield logo

* use shield svg for collapsed icon

* remove unused eslint disable directive

* run prettier

* remove variables

* update logo hover styles

* use more standard flow control syntax

* update admin console logo svg

* add new hover variables

* use class instead of fill

* use variable for logo hover

* remove unnecessary container

* use hover variable for nav switcher

* use correct variables for fill colors

* update hover state to use variable left in error

* give icon width to preserve text alignment

* remove tree story as functionality no longer supported

* remove nested styles helper

* remove obsolete afterContentInit

* remove tree example from layout story

* remove tree example from secondary layout story

* remove tree example from kitchen sink story

* Fix interaction test

* remove remaining references to tree variant
---
 .../layouts/organization-layout.component.ts  |   3 +-
 .../navigation-switcher.component.html        |  72 ++---
 .../src/app/layouts/user-layout.component.ts  |   3 +-
 .../layout/navigation.component.ts            |   2 +-
 .../src/anon-layout/anon-layout.component.ts  |   3 +-
 .../src/icon/icons/bitwarden-shield.icon.ts   |   7 -
 libs/components/src/icon/icons/index.ts       |   1 -
 libs/components/src/icon/index.ts             |   1 +
 .../src/icon/logos/bitwarden/admin-console.ts |   7 +
 .../src/icon/logos/bitwarden/index.ts         |   4 +
 .../icon/logos/bitwarden/password-manager.ts  |   7 +
 .../icon/logos/bitwarden/secrets-manager.ts   |   7 +
 .../src/icon/logos/bitwarden/shield.ts        |   7 +
 libs/components/src/icon/logos/index.ts       |   1 +
 libs/components/src/layout/layout.stories.ts  | 288 ++----------------
 .../src/navigation/nav-base.component.ts      |  10 -
 .../src/navigation/nav-divider.component.html |   2 +-
 .../src/navigation/nav-group.component.html   |  16 +-
 .../src/navigation/nav-group.component.ts     |  19 +-
 .../src/navigation/nav-group.stories.ts       |  25 --
 .../src/navigation/nav-item.component.html    | 174 +++++------
 .../src/navigation/nav-logo.component.html    |  42 ++-
 .../src/navigation/nav-logo.component.ts      |   8 +-
 .../src/navigation/side-nav.component.html    |   1 +
 .../kitchen-sink/kitchen-sink.stories.ts      |  22 +-
 libs/components/src/tw-theme.css              |   8 +-
 libs/components/tailwind.config.base.js       |   4 +
 27 files changed, 213 insertions(+), 531 deletions(-)
 delete mode 100644 libs/components/src/icon/icons/bitwarden-shield.icon.ts
 create mode 100644 libs/components/src/icon/logos/bitwarden/admin-console.ts
 create mode 100644 libs/components/src/icon/logos/bitwarden/index.ts
 create mode 100644 libs/components/src/icon/logos/bitwarden/password-manager.ts
 create mode 100644 libs/components/src/icon/logos/bitwarden/secrets-manager.ts
 create mode 100644 libs/components/src/icon/logos/bitwarden/shield.ts
 create mode 100644 libs/components/src/icon/logos/index.ts

diff --git a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts
index e60cc918fb8..dc1913a5336 100644
--- a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts
+++ b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts
@@ -27,12 +27,11 @@ import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { getById } from "@bitwarden/common/platform/misc";
-import { BannerModule, IconModule } from "@bitwarden/components";
+import { BannerModule, IconModule, AdminConsoleLogo } from "@bitwarden/components";
 
 import { FreeFamiliesPolicyService } from "../../../billing/services/free-families-policy.service";
 import { OrgSwitcherComponent } from "../../../layouts/org-switcher/org-switcher.component";
 import { WebLayoutModule } from "../../../layouts/web-layout.module";
-import { AdminConsoleLogo } from "../../icons/admin-console-logo";
 
 @Component({
   selector: "app-organization-layout",
diff --git a/apps/web/src/app/layouts/product-switcher/navigation-switcher/navigation-switcher.component.html b/apps/web/src/app/layouts/product-switcher/navigation-switcher/navigation-switcher.component.html
index 08195d95bf9..f8ebfa60451 100644
--- a/apps/web/src/app/layouts/product-switcher/navigation-switcher/navigation-switcher.component.html
+++ b/apps/web/src/app/layouts/product-switcher/navigation-switcher/navigation-switcher.component.html
@@ -16,43 +16,45 @@
     >
       <span class="tw-text-xs !tw-text-alt2 tw-p-2 tw-pb-0">{{ "moreFromBitwarden" | i18n }}</span>
       <ng-container *ngFor="let more of moreProducts">
-        <!-- <a> for when the marketing route is external -->
-        <a
-          *ngIf="more.marketingRoute.external"
-          [href]="more.marketingRoute.route"
-          target="_blank"
-          rel="noreferrer"
-          class="tw-flex tw-py-2 tw-px-4 tw-font-semibold !tw-text-alt2 !tw-no-underline hover:tw-bg-primary-300/60 [&>:not(.bwi)]:hover:tw-underline"
-        >
-          <i class="bwi bwi-fw {{ more.icon }} tw-mt-1 tw-mx-1"></i>
-          <div>
-            {{ more.otherProductOverrides?.name ?? more.name }}
-            <div
-              *ngIf="more.otherProductOverrides?.supportingText"
-              class="tw-text-xs tw-font-normal"
-            >
-              {{ more.otherProductOverrides.supportingText }}
+        <div class="tw-ps-2 tw-pe-2">
+          <!-- <a> for when the marketing route is external -->
+          <a
+            *ngIf="more.marketingRoute.external"
+            [href]="more.marketingRoute.route"
+            target="_blank"
+            rel="noreferrer"
+            class="tw-flex tw-px-3 tw-py-2 tw-rounded-md tw-font-bold !tw-text-alt2 !tw-no-underline hover:tw-bg-hover-contrast [&>:not(.bwi)]:hover:tw-underline"
+          >
+            <i class="bwi bwi-fw {{ more.icon }} tw-mt-1 tw-mx-1"></i>
+            <div>
+              {{ more.otherProductOverrides?.name ?? more.name }}
+              <div
+                *ngIf="more.otherProductOverrides?.supportingText"
+                class="tw-text-xs tw-font-normal"
+              >
+                {{ more.otherProductOverrides.supportingText }}
+              </div>
             </div>
-          </div>
-        </a>
-        <!-- <a> for when the marketing route is internal, it needs to use [routerLink] instead of [href] like the external <a> uses. -->
-        <a
-          *ngIf="!more.marketingRoute.external"
-          [routerLink]="more.marketingRoute.route"
-          rel="noreferrer"
-          class="tw-flex tw-py-2 tw-px-4 tw-font-semibold !tw-text-alt2 !tw-no-underline hover:tw-bg-primary-300/60 [&>:not(.bwi)]:hover:tw-underline"
-        >
-          <i class="bwi bwi-fw {{ more.icon }} tw-mt-1 tw-mx-1"></i>
-          <div>
-            {{ more.otherProductOverrides?.name ?? more.name }}
-            <div
-              *ngIf="more.otherProductOverrides?.supportingText"
-              class="tw-text-xs tw-font-normal"
-            >
-              {{ more.otherProductOverrides.supportingText }}
+          </a>
+          <!-- <a> for when the marketing route is internal, it needs to use [routerLink] instead of [href] like the external <a> uses. -->
+          <a
+            *ngIf="!more.marketingRoute.external"
+            [routerLink]="more.marketingRoute.route"
+            rel="noreferrer"
+            class="tw-flex tw-px-3 tw-py-2 tw-rounded-md tw-font-bold !tw-text-alt2 !tw-no-underline hover:tw-bg-hover-contrast [&>:not(.bwi)]:hover:tw-underline"
+          >
+            <i class="bwi bwi-fw {{ more.icon }} tw-mt-1 tw-mx-1"></i>
+            <div>
+              {{ more.otherProductOverrides?.name ?? more.name }}
+              <div
+                *ngIf="more.otherProductOverrides?.supportingText"
+                class="tw-text-xs tw-font-normal"
+              >
+                {{ more.otherProductOverrides.supportingText }}
+              </div>
             </div>
-          </div>
-        </a>
+          </a>
+        </div>
       </ng-container>
     </section>
   </ng-container>
diff --git a/apps/web/src/app/layouts/user-layout.component.ts b/apps/web/src/app/layouts/user-layout.component.ts
index cd07d625281..db4c181cd0f 100644
--- a/apps/web/src/app/layouts/user-layout.component.ts
+++ b/apps/web/src/app/layouts/user-layout.component.ts
@@ -9,11 +9,10 @@ import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
 import { SyncService } from "@bitwarden/common/platform/sync";
-import { IconModule } from "@bitwarden/components";
+import { IconModule, PasswordManagerLogo } from "@bitwarden/components";
 
 import { BillingFreeFamiliesNavItemComponent } from "../billing/shared/billing-free-families-nav-item.component";
 
-import { PasswordManagerLogo } from "./password-manager-logo";
 import { WebLayoutModule } from "./web-layout.module";
 
 @Component({
diff --git 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
index 1eef528b639..24da000f213 100644
--- 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
@@ -22,7 +22,7 @@ import {
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
-import { SecretsManagerLogo } from "@bitwarden/web-vault/app/layouts/secrets-manager-logo";
+import { SecretsManagerLogo } from "@bitwarden/components";
 
 import { OrganizationCounts } from "../models/view/counts.view";
 import { ProjectService } from "../projects/project.service";
diff --git a/libs/components/src/anon-layout/anon-layout.component.ts b/libs/components/src/anon-layout/anon-layout.component.ts
index ee3a7ca7bee..45e7f3973a9 100644
--- a/libs/components/src/anon-layout/anon-layout.component.ts
+++ b/libs/components/src/anon-layout/anon-layout.component.ts
@@ -10,7 +10,8 @@ import { EnvironmentService } from "@bitwarden/common/platform/abstractions/envi
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 
 import { IconModule, Icon } from "../icon";
-import { BitwardenLogo, BitwardenShield } from "../icon/icons";
+import { BitwardenLogo } from "../icon/icons";
+import { BitwardenShield } from "../icon/logos";
 import { SharedModule } from "../shared";
 import { TypographyModule } from "../typography";
 
diff --git a/libs/components/src/icon/icons/bitwarden-shield.icon.ts b/libs/components/src/icon/icons/bitwarden-shield.icon.ts
deleted file mode 100644
index 7abeaf40e3c..00000000000
--- a/libs/components/src/icon/icons/bitwarden-shield.icon.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { svgIcon } from "../icon";
-
-export const BitwardenShield = svgIcon`
-  <svg viewBox="0 0 120 132" xmlns="http://www.w3.org/2000/svg">
-    <path class="tw-fill-marketing-logo" d="M82.2944 69.1899V37.2898H60V93.9624C63.948 91.869 67.4812 89.5927 70.5998 87.1338C78.3962 81.0196 82.2944 75.0383 82.2944 69.1899ZM91.8491 30.9097V69.1899C91.8491 72.0477 91.2934 74.8805 90.182 77.6883C89.0706 80.4962 87.6938 82.9884 86.0516 85.1649C84.4094 87.3415 82.452 89.4598 80.1794 91.5201C77.9068 93.5803 75.8084 95.2916 73.8842 96.654C71.96 98.0164 69.9528 99.304 67.8627 100.517C65.7726 101.73 64.288 102.552 63.4088 102.984C62.5297 103.416 61.8247 103.748 61.2939 103.981C60.8958 104.18 60.4645 104.28 60 104.28C59.5355 104.28 59.1042 104.18 58.7061 103.981C58.1753 103.748 57.4703 103.416 56.5911 102.984C55.712 102.552 54.2273 101.73 52.1372 100.517C50.0471 99.304 48.04 98.0164 46.1158 96.654C44.1916 95.2916 42.0932 93.5803 39.8206 91.5201C37.548 89.4598 35.5906 87.3415 33.9484 85.1649C32.3062 82.9884 30.9294 80.4962 29.818 77.6883C28.7066 74.8805 28.1509 72.0477 28.1509 69.1899V30.9097C28.1509 30.0458 28.4661 29.2981 29.0964 28.6668C29.7267 28.0354 30.4732 27.7197 31.3358 27.7197H88.6642C89.5268 27.7197 90.2732 28.0354 90.9036 28.6668C91.5339 29.2981 91.8491 30.0458 91.8491 30.9097Z" />
-  </svg>
-`;
diff --git a/libs/components/src/icon/icons/index.ts b/libs/components/src/icon/icons/index.ts
index b68be2bac9a..69fac7d644e 100644
--- a/libs/components/src/icon/icons/index.ts
+++ b/libs/components/src/icon/icons/index.ts
@@ -1,5 +1,4 @@
 export * from "./bitwarden-logo.icon";
-export * from "./bitwarden-shield.icon";
 export * from "./extension-bitwarden-logo.icon";
 export * from "./lock.icon";
 export * from "./generator";
diff --git a/libs/components/src/icon/index.ts b/libs/components/src/icon/index.ts
index 8f29234dbc5..4f797326be3 100644
--- a/libs/components/src/icon/index.ts
+++ b/libs/components/src/icon/index.ts
@@ -1,3 +1,4 @@
 export * from "./icon.module";
 export * from "./icon";
 export * as Icons from "./icons";
+export { AdminConsoleLogo, PasswordManagerLogo, SecretsManagerLogo } from "./logos";
diff --git a/libs/components/src/icon/logos/bitwarden/admin-console.ts b/libs/components/src/icon/logos/bitwarden/admin-console.ts
new file mode 100644
index 00000000000..673cf9642c8
--- /dev/null
+++ b/libs/components/src/icon/logos/bitwarden/admin-console.ts
@@ -0,0 +1,7 @@
+import { svgIcon } from "../../icon";
+
+const AdminConsoleLogo = svgIcon`
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 46" fill="none"><path class="tw-fill-text-alt2" fill-rule="evenodd" d="M48.137 7.639c2.293 0 4.077.869 5.387 2.68 1.31 1.773 1.966 4.2 1.966 7.277 0 3.186-.655 5.648-2.002 7.386-1.347 1.774-3.167 2.607-5.46 2.607s-4.04-.797-5.351-2.462h-.364l-.692 1.701a.673.673 0 0 1-.618.399H38.09a.65.65 0 0 1-.655-.652V1.122A.65.65 0 0 1 38.09.47h3.932a.65.65 0 0 1 .655.652v5.575c0 .797-.073 2.064-.218 3.802h.218c1.201-1.883 3.058-2.86 5.46-2.86Zm-1.674 4.236c-1.274 0-2.257.398-2.876 1.195-.582.796-.91 2.136-.91 3.946v.58c0 2.064.291 3.548.91 4.417.619.869 1.602 1.34 2.948 1.34 1.056 0 1.966-.507 2.585-1.521.619-.978.946-2.462.946-4.309 0-1.883-.327-3.294-.946-4.236-.655-.941-1.565-1.412-2.657-1.412Zm17.69 15.388h-3.931a.65.65 0 0 1-.655-.652V8.69a.65.65 0 0 1 .655-.652h3.931a.65.65 0 0 1 .655.652v17.886c.037.326-.29.688-.655.688Zm14.378-3.874c.765 0 1.675-.145 2.767-.435a.436.436 0 0 1 .546.435v3.005c0 .181-.11.326-.255.398-1.237.507-2.803.76-4.55.76-2.111 0-3.64-.506-4.586-1.593-.947-1.05-1.456-2.643-1.456-4.743v-9.232h-2.075a.42.42 0 0 1-.437-.435V9.847c0-.036.036-.072.036-.108l2.876-1.702 1.42-3.765c.072-.181.218-.29.4-.29h2.62a.42.42 0 0 1 .438.434v3.657h5.205c.11 0 .218.109.218.218v3.258a.42.42 0 0 1-.436.435h-4.95v9.196c0 .724.218 1.304.618 1.63.364.398.946.579 1.601.579Zm24.498 3.874c-.51 0-.91-.326-1.128-.797l-3.859-11.694c-.255-.833-.582-2.1-1.019-3.73h-.11l-.363 1.304-.765 2.462-3.967 11.695c-.146.47-.583.76-1.092.76-.51 0-.947-.326-1.092-.833L84.792 9.594c-.145-.507.255-1.05.838-1.05h.109c.364 0 .691.253.8.616l2.84 10.246c.691 2.68 1.165 4.635 1.383 5.938h.11c.654-2.68 1.164-4.454 1.492-5.359L96.04 9.268c.146-.434.546-.724 1.056-.724.473 0 .873.29 1.019.724l3.422 10.645c.837 2.715 1.346 4.453 1.528 5.358h.11c.109-.724.546-2.751 1.383-6.01l2.73-10.101a.852.852 0 0 1 .801-.616c.546 0 .946.507.801 1.05l-4.587 16.836c-.146.507-.582.833-1.128.833h-.146Zm21.622 0a.665.665 0 0 1-.655-.58l-.328-2.39h-.182c-.946 1.196-1.893 2.065-2.912 2.572-.983.507-2.184.724-3.531.724-1.856 0-3.276-.47-4.295-1.412-.91-.833-1.42-1.956-1.492-3.367-.146-1.883.655-3.694 2.184-4.744 1.565-1.013 3.749-1.629 6.697-1.629l3.568-.109v-1.23c0-1.81-.364-3.114-1.129-4.02-.764-.905-1.893-1.34-3.494-1.34-1.529 0-3.058.363-4.66 1.123a.8.8 0 0 1-1.055-.398c-.182-.398 0-.869.4-1.014 1.82-.724 3.604-1.122 5.424-1.122 2.075 0 3.604.543 4.659 1.63 1.019 1.05 1.529 2.75 1.529 4.96v11.767c-.036.217-.364.579-.728.579Zm-7.535-1.231c2.038 0 3.604-.58 4.732-1.702 1.165-1.122 1.747-2.752 1.747-4.743v-1.81l-3.276.145c-2.657.108-4.513.543-5.678 1.23-1.129.688-1.711 1.81-1.711 3.26 0 1.158.364 2.1 1.056 2.75.8.544 1.82.87 3.13.87Zm21.549-17.85c.546 0 1.092.036 1.711.109a.819.819 0 0 1 .692.941c-.073.434-.51.688-.947.615-.546-.072-1.092-.144-1.638-.144-1.601 0-2.912.688-3.931 2.027-1.019 1.34-1.529 3.078-1.529 5.105v9.486c0 .471-.364.833-.837.833a.822.822 0 0 1-.837-.832V9.303c0-.398.327-.724.728-.724.4 0 .728.29.728.688l.145 2.68h.109c.765-1.376 1.602-2.354 2.476-2.897.837-.58 1.893-.869 3.13-.869Zm12.813 0c1.347 0 2.548.253 3.531.724 1.019.47 1.893 1.34 2.657 2.535h.109a86.503 86.503 0 0 1-.109-4.237V1.303c0-.471.364-.833.837-.833.474 0 .838.362.838.833V26.61c0 .326-.255.58-.583.58a.59.59 0 0 1-.582-.544l-.364-2.353h-.146c-1.419 2.136-3.494 3.186-6.151 3.186-2.621 0-4.551-.796-5.97-2.426-1.347-1.629-2.075-3.946-2.075-7.024 0-3.222.655-5.684 2.038-7.422 1.384-1.557 3.349-2.426 5.97-2.426Zm0 1.557c-2.075 0-3.604.724-4.659 2.172-1.019 1.412-1.529 3.476-1.529 6.228 0 5.286 2.075 7.93 6.225 7.93 2.147 0 3.676-.616 4.659-1.848 1.019-1.23 1.492-3.258 1.492-6.082v-.29c0-2.896-.473-4.96-1.492-6.191-.947-1.304-2.512-1.92-4.696-1.92Zm21.804 17.85c-2.73 0-4.841-.833-6.406-2.535-1.529-1.665-2.294-4.019-2.294-7.024s.728-5.395 2.221-7.169c1.492-1.81 3.458-2.715 5.969-2.715 2.184 0 3.968.76 5.206 2.28 1.31 1.521 1.929 3.621 1.929 6.264v1.376h-13.541c.036 2.571.619 4.526 1.82 5.902 1.201 1.376 2.876 1.991 5.096 1.991 1.056 0 2.038-.072 2.839-.217a14.74 14.74 0 0 0 2.111-.58.731.731 0 0 1 .983.689c0 .29-.182.58-.473.688-.874.362-1.711.58-2.475.724-.91.253-1.893.326-2.985.326Zm-.51-17.886c-1.82 0-3.276.579-4.368 1.774-1.092 1.158-1.71 2.896-1.929 5.105h11.648c0-2.136-.473-3.874-1.419-5.069-.947-1.195-2.257-1.81-3.932-1.81Zm26.354 17.56a.822.822 0 0 1-.837-.833V15.097c0-1.882-.4-3.258-1.165-4.09-.837-.834-2.038-1.304-3.713-1.304-2.256 0-3.894.543-4.914 1.701-1.019 1.123-1.601 2.97-1.601 5.468v9.486c0 .47-.364.832-.837.832a.822.822 0 0 1-.838-.832V9.304c0-.434.328-.76.765-.76.4 0 .691.29.764.652l.219 1.883h.109c1.237-1.956 3.385-2.933 6.516-2.933 4.258 0 6.406 2.28 6.406 6.843v11.369c-.036.507-.437.905-.874.905ZM62.224.18c-1.71 0-3.094 1.304-3.094 2.933v.29c0 1.593 1.42 2.932 3.094 2.932 1.675 0 3.094-1.34 3.094-2.932v-.254c0-1.665-1.42-2.969-3.094-2.969Z" clip-rule="evenodd"/><path class="tw-fill-text-alt2" d="M22.097 17.27V4.322h-9.099v23c1.612-.85 3.054-1.773 4.326-2.771 3.182-2.482 4.773-4.91 4.773-7.283Zm3.9-15.536v15.535a9.26 9.26 0 0 1-.68 3.45 12.85 12.85 0 0 1-1.686 3.034c-.67.883-1.47 1.743-2.397 2.579a27.862 27.862 0 0 1-2.57 2.083 32.334 32.334 0 0 1-2.457 1.568c-.853.492-1.459.826-1.817 1.001-.36.176-.647.31-.864.405-.162.08-.338.121-.528.121s-.365-.04-.528-.121c-.216-.095-.504-.23-.863-.405-.359-.175-.965-.509-1.818-1.001a32.354 32.354 0 0 1-2.457-1.568 27.873 27.873 0 0 1-2.57-2.083 18.756 18.756 0 0 1-2.396-2.58A12.851 12.851 0 0 1 .68 20.719 9.259 9.259 0 0 1 0 17.27V1.734c0-.35.129-.654.386-.91C.643.567.948.439 1.3.439h23.397c.352 0 .657.128.914.385.257.256.386.56.386.91ZM92.527 45.635l3.977-10.79h1.372l3.962 10.79h-1.372l-.987-2.775h-4.593l-1.002 2.775h-1.357Zm2.744-3.823h3.823l-1.911-5.334-1.912 5.334ZM106.412 45.82c-.761 0-1.429-.175-2.004-.524a3.647 3.647 0 0 1-1.326-1.434c-.308-.606-.462-1.295-.462-2.066 0-.77.159-1.454.478-2.05.318-.606.76-1.079 1.325-1.418.565-.35 1.233-.524 2.004-.524.627 0 1.182.128 1.665.385.483.257.858.617 1.125 1.08v-4.733h1.295v11.099h-1.171l-.124-1.264c-.246.37-.601.704-1.063 1.002-.463.298-1.043.447-1.742.447Zm.139-1.126c.513 0 .966-.118 1.356-.354.401-.247.709-.586.925-1.017.226-.432.339-.936.339-1.511 0-.576-.113-1.08-.339-1.51a2.36 2.36 0 0 0-.925-1.003c-.39-.246-.843-.37-1.356-.37-.504 0-.956.124-1.357.37-.39.237-.699.57-.925 1.002-.216.432-.324.935-.324 1.51 0 .576.108 1.08.324 1.512.226.431.535.77.925 1.017.401.236.853.354 1.357.354ZM112.623 45.635v-7.646h1.172l.092 1.11c.247-.411.576-.73.987-.956.411-.226.873-.339 1.387-.339.606 0 1.125.123 1.557.37.442.247.781.622 1.017 1.125a2.94 2.94 0 0 1 1.095-1.094c.472-.267.981-.401 1.526-.401.914 0 1.644.277 2.189.832.544.545.817 1.388.817 2.528v4.47h-1.28v-4.33c0-.792-.159-1.388-.478-1.789-.318-.4-.775-.601-1.372-.601-.616 0-1.13.241-1.541.724-.401.473-.601 1.151-.601 2.035v3.962h-1.295v-4.332c0-.791-.159-1.387-.478-1.788-.319-.4-.776-.601-1.372-.601-.606 0-1.115.241-1.526.724-.401.473-.601 1.151-.601 2.035v3.962h-1.295ZM127.198 36.293a.908.908 0 0 1-.647-.246.91.91 0 0 1-.247-.648c0-.246.083-.452.247-.616a.908.908 0 0 1 .647-.247c.247 0 .458.082.632.247a.81.81 0 0 1 .262.616.878.878 0 0 1-.262.648.887.887 0 0 1-.632.246Zm-.647 9.342v-7.646h1.295v7.646h-1.295ZM130.1 45.635v-7.646h1.172l.077 1.372a2.777 2.777 0 0 1 1.064-1.14 2.993 2.993 0 0 1 1.572-.417c.904 0 1.624.277 2.158.832.545.545.817 1.388.817 2.528v4.47h-1.295v-4.33c0-1.594-.658-2.39-1.973-2.39-.658 0-1.207.241-1.649.724-.432.473-.648 1.151-.648 2.035v3.962H130.1ZM147.811 45.82c-1.059 0-1.973-.231-2.744-.694a4.818 4.818 0 0 1-1.773-1.958c-.421-.842-.632-1.819-.632-2.928 0-1.1.211-2.066.632-2.898.422-.843 1.013-1.5 1.773-1.974.771-.472 1.685-.709 2.744-.709 1.233 0 2.235.298 3.006.894.781.586 1.279 1.408 1.495 2.467h-1.434c-.164-.668-.503-1.203-1.017-1.603-.503-.411-1.187-.617-2.05-.617-.771 0-1.444.18-2.019.54-.576.349-1.023.858-1.342 1.526-.308.657-.462 1.449-.462 2.374 0 .924.154 1.72.462 2.389.319.658.766 1.166 1.342 1.526.575.35 1.248.524 2.019.524.863 0 1.547-.195 2.05-.586.514-.4.853-.93 1.017-1.587h1.434c-.216 1.038-.714 1.85-1.495 2.435-.771.586-1.773.879-3.006.879ZM157.58 45.82c-.72 0-1.367-.165-1.942-.493a3.627 3.627 0 0 1-1.372-1.388c-.329-.606-.494-1.315-.494-2.127 0-.812.17-1.516.509-2.112a3.598 3.598 0 0 1 1.372-1.403 3.93 3.93 0 0 1 1.958-.493c.719 0 1.366.164 1.942.493a3.494 3.494 0 0 1 1.356 1.403c.34.596.509 1.3.509 2.112s-.169 1.52-.509 2.127a3.596 3.596 0 0 1-1.387 1.388c-.575.328-1.223.493-1.942.493Zm0-1.11c.442 0 .853-.108 1.233-.324.38-.216.689-.54.925-.97.236-.433.354-.967.354-1.604 0-.637-.118-1.172-.354-1.603-.226-.432-.529-.756-.91-.971a2.426 2.426 0 0 0-1.217-.324c-.442 0-.853.108-1.234.324-.38.215-.688.54-.924.97-.237.432-.355.967-.355 1.604 0 .637.118 1.171.355 1.603.236.432.539.755.909.971.38.216.786.324 1.218.324ZM163.219 45.635v-7.646h1.171l.077 1.372a2.777 2.777 0 0 1 1.064-1.14 2.993 2.993 0 0 1 1.572-.417c.905 0 1.624.277 2.158.832.545.545.817 1.388.817 2.528v4.47h-1.295v-4.33c0-1.594-.657-2.39-1.973-2.39-.657 0-1.207.241-1.649.724-.432.473-.648 1.151-.648 2.035v3.962h-1.294ZM174.969 45.82c-.915 0-1.675-.231-2.282-.694-.606-.462-.96-1.09-1.063-1.88h1.326c.082.4.292.75.632 1.048.349.288.817.431 1.402.431.545 0 .946-.113 1.203-.339.257-.236.385-.514.385-.832 0-.463-.169-.771-.509-.925-.328-.154-.796-.293-1.402-.416a7.953 7.953 0 0 1-1.234-.355 2.846 2.846 0 0 1-1.032-.647c-.278-.288-.417-.663-.417-1.126 0-.668.247-1.212.74-1.634.504-.431 1.182-.647 2.035-.647.812 0 1.475.206 1.989.617.524.4.827.976.909 1.726h-1.279c-.052-.39-.221-.694-.509-.91-.277-.226-.653-.339-1.125-.339-.463 0-.822.098-1.079.293a.935.935 0 0 0-.37.771c0 .308.159.55.478.725.328.174.77.323 1.325.447.473.102.92.23 1.341.385.432.144.781.365 1.049.663.277.288.416.709.416 1.264.01.688-.252 1.259-.786 1.711-.525.442-1.239.663-2.143.663ZM183.231 45.82c-.719 0-1.366-.165-1.942-.493a3.634 3.634 0 0 1-1.372-1.388c-.329-.606-.493-1.315-.493-2.127 0-.812.169-1.516.509-2.112a3.603 3.603 0 0 1 1.371-1.403 3.932 3.932 0 0 1 1.958-.493c.72 0 1.367.164 1.942.493a3.496 3.496 0 0 1 1.357 1.403c.339.596.509 1.3.509 2.112s-.17 1.52-.509 2.127a3.603 3.603 0 0 1-1.387 1.388c-.576.328-1.223.493-1.943.493Zm0-1.11c.442 0 .853-.108 1.234-.324.38-.216.688-.54.924-.97.237-.433.355-.967.355-1.604 0-.637-.118-1.172-.355-1.603-.226-.432-.529-.756-.909-.971a2.427 2.427 0 0 0-1.218-.324c-.442 0-.853.108-1.233.324-.38.215-.689.54-.925.97-.236.432-.354.967-.354 1.604 0 .637.118 1.171.354 1.603.236.432.54.755.91.971.38.216.786.324 1.217.324ZM188.87 45.635V34.536h1.295v11.099h-1.295ZM195.725 45.82c-.73 0-1.377-.165-1.942-.493a3.666 3.666 0 0 1-1.342-1.403c-.318-.596-.477-1.3-.477-2.112 0-.802.159-1.5.477-2.096a3.43 3.43 0 0 1 1.326-1.403c.576-.34 1.239-.509 1.989-.509.74 0 1.377.17 1.911.509.545.328.961.765 1.249 1.31.288.545.431 1.13.431 1.757 0 .113-.005.226-.015.34v.385h-6.089c.031.586.164 1.074.401 1.464.246.38.55.668.909.863.37.196.761.293 1.172.293.534 0 .981-.123 1.341-.37.36-.246.622-.58.786-1.002h1.28c-.206.71-.602 1.3-1.187 1.773-.576.463-1.316.694-2.22.694Zm0-6.922c-.617 0-1.167.19-1.65.57-.472.37-.745.915-.817 1.635h4.81c-.031-.689-.267-1.228-.709-1.619-.442-.39-.987-.586-1.634-.586Z"/></svg>
+`;
+
+export default AdminConsoleLogo;
diff --git a/libs/components/src/icon/logos/bitwarden/index.ts b/libs/components/src/icon/logos/bitwarden/index.ts
new file mode 100644
index 00000000000..e786eb90e78
--- /dev/null
+++ b/libs/components/src/icon/logos/bitwarden/index.ts
@@ -0,0 +1,4 @@
+export { default as AdminConsoleLogo } from "./admin-console";
+export { default as BitwardenShield } from "./shield";
+export { default as PasswordManagerLogo } from "./password-manager";
+export { default as SecretsManagerLogo } from "./secrets-manager";
diff --git a/libs/components/src/icon/logos/bitwarden/password-manager.ts b/libs/components/src/icon/logos/bitwarden/password-manager.ts
new file mode 100644
index 00000000000..37b62c5dbc2
--- /dev/null
+++ b/libs/components/src/icon/logos/bitwarden/password-manager.ts
@@ -0,0 +1,7 @@
+import { svgIcon } from "../../icon";
+
+const PasswordManagerLogo = svgIcon`
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 49"><path class="tw-fill-text-alt2" fill-rule="evenodd" d="M48.038 7.458c2.289 0 4.069.869 5.376 2.679 1.308 1.774 1.962 4.2 1.962 7.277 0 3.186-.654 5.647-1.998 7.385-1.344 1.774-3.16 2.607-5.449 2.607-2.288 0-4.032-.797-5.34-2.462h-.363l-.69 1.701a.672.672 0 0 1-.618.399h-2.906a.65.65 0 0 1-.654-.652V.942a.65.65 0 0 1 .654-.652h3.923a.65.65 0 0 1 .654.651v5.576c0 .796-.072 2.063-.218 3.8h.218c1.2-1.882 3.052-2.86 5.45-2.86Zm-1.67 4.236c-1.272 0-2.253.398-2.87 1.194-.582.797-.909 2.136-.909 3.946v.58c0 2.063.29 3.548.909 4.416.617.87 1.598 1.34 2.942 1.34 1.053 0 1.962-.507 2.579-1.52.617-.978.945-2.462.945-4.309 0-1.882-.328-3.294-.945-4.236-.654-.94-1.562-1.411-2.652-1.411ZM64.021 27.08h-3.924a.65.65 0 0 1-.654-.652V8.508a.65.65 0 0 1 .654-.652h3.924a.65.65 0 0 1 .653.652v17.884c.037.326-.29.688-.653.688Zm14.348-3.874c.763 0 1.671-.145 2.761-.434a.436.436 0 0 1 .545.434v3.005a.445.445 0 0 1-.254.398c-1.236.507-2.797.76-4.541.76-2.107 0-3.633-.506-4.577-1.592-.945-1.05-1.453-2.643-1.453-4.743v-9.232h-2.07a.419.419 0 0 1-.437-.434V9.666c0-.036.037-.072.037-.108l2.87-1.702 1.416-3.765c.073-.181.218-.29.4-.29h2.615c.254 0 .436.181.436.435v3.656h5.195c.109 0 .218.109.218.218v3.258a.419.419 0 0 1-.436.434h-4.94v9.196c0 .724.217 1.303.617 1.629.363.398.944.58 1.598.58Zm24.447 3.874c-.508 0-.908-.326-1.126-.796l-3.85-11.694c-.254-.833-.581-2.1-1.017-3.73h-.11l-.363 1.304-.762 2.462-3.96 11.694c-.145.47-.581.76-1.09.76-.508 0-.944-.326-1.09-.833L84.62 9.413c-.146-.507.254-1.05.835-1.05h.109a.85.85 0 0 1 .799.615l2.833 10.246c.69 2.679 1.163 4.634 1.38 5.937h.11c.653-2.679 1.162-4.453 1.489-5.358l3.669-10.716c.145-.434.545-.724 1.053-.724.473 0 .872.29 1.017.724l3.415 10.644c.836 2.715 1.344 4.453 1.526 5.358h.109c.109-.724.545-2.752 1.38-6.01l2.725-10.1a.85.85 0 0 1 .799-.616c.545 0 .944.507.799 1.05l-4.577 16.834c-.145.507-.581.833-1.126.833h-.146Zm21.578 0a.664.664 0 0 1-.654-.58l-.327-2.389h-.182c-.944 1.195-1.888 2.064-2.906 2.57-.98.508-2.179.725-3.523.725-1.853 0-3.269-.47-4.287-1.412-.908-.833-1.416-1.955-1.489-3.367-.145-1.883.654-3.693 2.18-4.743 1.562-1.013 3.741-1.629 6.684-1.629l3.559-.108v-1.231c0-1.81-.363-3.114-1.126-4.019-.762-.905-1.889-1.34-3.487-1.34-1.526 0-3.051.363-4.65 1.123a.799.799 0 0 1-1.053-.398c-.182-.399 0-.87.4-1.014 1.816-.724 3.596-1.122 5.412-1.122 2.071 0 3.596.543 4.65 1.629 1.017 1.05 1.525 2.751 1.525 4.96V26.5c-.036.217-.363.579-.726.579Zm-7.52-1.231c2.035 0 3.597-.58 4.723-1.701 1.162-1.123 1.743-2.752 1.743-4.743v-1.81l-3.269.145c-2.652.108-4.504.543-5.667 1.23-1.126.688-1.707 1.81-1.707 3.259 0 1.158.363 2.1 1.053 2.751.8.543 1.817.869 3.124.869ZM138.38 8.001c.545 0 1.09.036 1.708.109a.818.818 0 0 1 .69.94c-.073.435-.509.689-.945.616-.545-.072-1.089-.145-1.634-.145-1.599 0-2.906.688-3.923 2.028-1.018 1.34-1.526 3.077-1.526 5.104v9.486a.82.82 0 0 1-.836.832.82.82 0 0 1-.835-.832V9.123c0-.398.327-.724.726-.724.4 0 .727.29.727.688l.145 2.679h.109c.763-1.376 1.598-2.353 2.47-2.896.836-.58 1.889-.87 3.124-.87Zm12.787 0c1.344 0 2.543.253 3.524.724 1.017.47 1.889 1.34 2.651 2.534h.109a86.486 86.486 0 0 1-.109-4.236v-5.9c0-.471.364-.833.836-.833a.82.82 0 0 1 .835.832v25.306c0 .326-.254.58-.581.58a.589.589 0 0 1-.581-.543l-.363-2.354h-.146c-1.416 2.136-3.487 3.186-6.139 3.186-2.615 0-4.54-.796-5.957-2.425-1.344-1.63-2.071-3.947-2.071-7.024 0-3.222.654-5.684 2.035-7.421C146.59 8.87 148.552 8 151.167 8Zm0 1.557c-2.071 0-3.596.724-4.65 2.172-1.017 1.412-1.525 3.475-1.525 6.227 0 5.285 2.07 7.928 6.211 7.928 2.144 0 3.669-.615 4.65-1.846 1.017-1.231 1.489-3.258 1.489-6.082v-.29c0-2.896-.472-4.96-1.489-6.19-.944-1.304-2.506-1.92-4.686-1.92Zm21.759 17.848c-2.724 0-4.831-.833-6.393-2.534-1.526-1.666-2.289-4.019-2.289-7.024s.727-5.394 2.216-7.168c1.489-1.81 3.451-2.715 5.958-2.715 2.179 0 3.959.76 5.194 2.28 1.308 1.521 1.925 3.62 1.925 6.264v1.375h-13.513c.037 2.57.618 4.526 1.816 5.901 1.199 1.376 2.87 1.992 5.086 1.992 1.054 0 2.034-.073 2.834-.218a14.71 14.71 0 0 0 2.106-.579c.473-.18.981.181.981.688 0 .29-.181.58-.472.688-.872.362-1.707.58-2.47.724-.908.253-1.889.326-2.979.326Zm-.508-17.885c-1.817 0-3.27.58-4.36 1.774-1.089 1.159-1.707 2.897-1.925 5.105h11.624c0-2.136-.472-3.874-1.416-5.068-.945-1.195-2.252-1.81-3.923-1.81Zm26.299 17.559a.82.82 0 0 1-.835-.833V14.916c0-1.883-.4-3.259-1.163-4.091-.835-.833-2.034-1.304-3.705-1.304-2.252 0-3.887.543-4.904 1.702-1.017 1.122-1.598 2.969-1.598 5.467v9.485a.82.82 0 0 1-.836.832.82.82 0 0 1-.835-.832V9.123c0-.434.327-.76.763-.76.399 0 .69.29.763.652l.218 1.882h.109c1.235-1.955 3.378-2.932 6.502-2.932 4.25 0 6.393 2.28 6.393 6.842v11.368c-.036.507-.436.905-.872.905ZM62.097 0c-1.708 0-3.088 1.303-3.088 2.932v.29c0 1.593 1.416 2.933 3.087 2.933 1.671 0 3.088-1.34 3.088-2.933V2.97C65.184 1.303 63.767 0 62.096 0Z" clip-rule="evenodd"/><path class="tw-fill-text-alt2" d="M22.052 17.087V4.142h-9.08V27.14c1.608-.85 3.047-1.773 4.317-2.771 3.175-2.481 4.763-4.908 4.763-7.282Zm3.891-15.534v15.534c0 1.16-.226 2.31-.679 3.45a12.86 12.86 0 0 1-1.682 3.033 18.741 18.741 0 0 1-2.392 2.579c-.925.836-1.78 1.53-2.564 2.083a32.288 32.288 0 0 1-2.452 1.568c-.851.492-1.456.826-1.814 1.001-.358.175-.645.31-.861.405-.163.08-.338.12-.527.12-.19 0-.365-.04-.527-.12-.216-.095-.504-.23-.862-.405-.358-.175-.962-.509-1.814-1.001a32.279 32.279 0 0 1-2.452-1.568 27.823 27.823 0 0 1-2.564-2.083A18.74 18.74 0 0 1 2.36 23.57 12.857 12.857 0 0 1 .68 20.536 9.273 9.273 0 0 1 0 17.087V1.553C0 1.203.128.9.385.643S.945.26 1.297.26h23.35c.35 0 .655.128.911.384.257.256.385.56.385.91ZM195.682 44.967v-7.753h1.12l.088 1.415c.177-.354.408-.649.693-.884a2.853 2.853 0 0 1 1.032-.531 5.033 5.033 0 0 1 1.385-.177v1.297h-.766c-.295 0-.58.04-.855.118a2.183 2.183 0 0 0-.752.383 1.825 1.825 0 0 0-.516.722c-.128.305-.191.688-.191 1.15v4.26h-1.238ZM190.546 45.144c-.688 0-1.297-.167-1.827-.502-.531-.334-.949-.805-1.253-1.415-.295-.609-.442-1.321-.442-2.137 0-.815.147-1.528.442-2.137.304-.609.722-1.08 1.253-1.415.54-.334 1.159-.5 1.857-.5.747 0 1.371.166 1.872.5.501.334.879.781 1.135 1.342.255.56.383 1.174.383 1.842v.295c0 .098-.005.216-.015.353h-5.999v-.958h4.805c-.019-.756-.241-1.331-.663-1.724-.413-.403-.929-.604-1.548-.604a2.24 2.24 0 0 0-1.149.31 2.214 2.214 0 0 0-.84.884c-.217.392-.325.884-.325 1.473v.413c0 .649.108 1.194.325 1.636.216.433.496.757.84.973.353.216.737.324 1.149.324.551 0 .983-.103 1.297-.31.315-.215.546-.52.693-.913h1.223c-.117.432-.324.82-.619 1.164a2.941 2.941 0 0 1-1.09.81c-.433.197-.934.296-1.504.296ZM182.179 48.386c-.697 0-1.311-.088-1.842-.265-.521-.167-.929-.428-1.223-.781-.285-.354-.428-.791-.428-1.312 0-.246.044-.501.133-.767.098-.265.26-.52.486-.766.236-.245.565-.467.988-.663l.943.501c-.56.216-.924.467-1.091.752-.167.285-.25.56-.25.825 0 .324.093.595.28.81.196.217.467.379.81.487.344.108.742.162 1.194.162.443 0 .821-.059 1.135-.177.325-.108.57-.27.737-.486.177-.206.266-.452.266-.737 0-.413-.133-.737-.398-.973-.266-.226-.782-.358-1.548-.398a15 15 0 0 1-1.503-.162 6.95 6.95 0 0 1-1.003-.236 3.329 3.329 0 0 1-.648-.324 4.345 4.345 0 0 1-.457-.368v-.34l1.459-1.4 1.164.384-1.591 1.311.191-.56c.108.079.211.153.31.221.098.07.231.133.398.192.177.05.417.098.722.147.314.05.727.094 1.238.133.707.05 1.272.167 1.695.354.423.186.727.447.914.78.187.325.28.723.28 1.195 0 .413-.118.806-.354 1.179-.226.373-.589.678-1.091.914-.491.245-1.13.368-1.916.368Zm-.014-5.837c-.629 0-1.165-.117-1.607-.353a2.512 2.512 0 0 1-.987-.988 2.952 2.952 0 0 1-.339-1.415c0-.52.113-.987.339-1.4a2.605 2.605 0 0 1 1.002-.987c.442-.246.973-.369 1.592-.369.638 0 1.174.123 1.606.369.433.245.762.574.988.987.226.413.339.88.339 1.4 0 .521-.113.993-.339 1.415a2.508 2.508 0 0 1-.988.988c-.432.236-.968.354-1.606.354Zm0-1.017c.55 0 .977-.142 1.282-.427.305-.295.457-.732.457-1.312 0-.58-.152-1.012-.457-1.297-.305-.285-.732-.427-1.282-.427-.521 0-.949.142-1.283.427-.324.285-.486.718-.486 1.297 0 .58.157 1.017.472 1.312.324.285.756.428 1.297.428Zm1.297-3.271-.369-1.047h3.036v.928l-2.667.118ZM173.442 45.144c-.589 0-1.081-.108-1.474-.325a2.252 2.252 0 0 1-.884-.884 2.533 2.533 0 0 1-.295-1.194c0-.51.128-.943.384-1.297.265-.364.633-.639 1.105-.825.472-.187 1.022-.28 1.651-.28h1.931c0-.502-.059-.92-.177-1.253a1.407 1.407 0 0 0-.575-.752c-.265-.167-.619-.25-1.061-.25-.443 0-.821.113-1.135.339-.315.216-.511.54-.59.972h-1.267c.059-.51.231-.938.515-1.282.285-.354.644-.619 1.076-.796.443-.187.909-.28 1.401-.28.697 0 1.272.128 1.724.383.452.246.786.595 1.002 1.047.217.442.325.968.325 1.577v4.923h-1.106l-.073-1.327a2.752 2.752 0 0 1-.384.59 2.459 2.459 0 0 1-.53.472 2.6 2.6 0 0 1-.708.324c-.255.078-.54.118-.855.118Zm.177-1.047c.324 0 .624-.074.899-.22a2.28 2.28 0 0 0 .708-.59 2.8 2.8 0 0 0 .471-.855c.109-.315.163-.644.163-.988v-.147h-1.828c-.462 0-.84.059-1.135.177-.285.118-.491.285-.619.5a1.315 1.315 0 0 0-.192.708c0 .285.059.536.177.752.118.206.29.368.516.486.236.118.516.177.84.177ZM162.504 44.967v-7.753h1.12l.059 1.223c.226-.442.55-.786.973-1.031.432-.246.929-.369 1.489-.369.57 0 1.066.108 1.488.324.423.217.752.546.988.988.236.442.354 1.002.354 1.68v4.938h-1.239v-4.805c0-.688-.172-1.204-.515-1.548-.335-.344-.787-.516-1.356-.516-.384 0-.737.094-1.062.28a1.97 1.97 0 0 0-.781.796c-.187.354-.28.786-.28 1.297v4.496h-1.238ZM156.803 45.144c-.589 0-1.081-.108-1.474-.325a2.246 2.246 0 0 1-.884-.884 2.52 2.52 0 0 1-.295-1.194c0-.51.128-.943.383-1.297.266-.364.634-.639 1.106-.825.471-.187 1.022-.28 1.651-.28h1.93c0-.502-.059-.92-.176-1.253a1.407 1.407 0 0 0-.575-.752c-.266-.167-.619-.25-1.062-.25-.442 0-.82.113-1.134.339-.315.216-.511.54-.59.972h-1.268c.059-.51.231-.938.516-1.282.285-.354.644-.619 1.076-.796.442-.187.909-.28 1.4-.28.698 0 1.273.128 1.725.383.452.246.786.595 1.002 1.047.216.442.324.968.324 1.577v4.923h-1.105l-.074-1.327a2.747 2.747 0 0 1-.383.59 2.459 2.459 0 0 1-.53.472 2.614 2.614 0 0 1-.708.324c-.255.078-.54.118-.855.118Zm.177-1.047c.324 0 .624-.074.899-.22a2.28 2.28 0 0 0 .708-.59 2.8 2.8 0 0 0 .471-.855c.108-.315.162-.644.162-.988v-.147h-1.827c-.462 0-.84.059-1.135.177-.285.118-.491.285-.619.5a1.315 1.315 0 0 0-.192.708c0 .285.059.536.177.752.118.206.29.368.516.486.236.118.516.177.84.177ZM142.312 44.967V34.649h1.444l3.508 7.267 3.479-7.267h1.459v10.318h-1.238v-8.092l-3.243 6.736h-.929l-3.242-6.677v8.033h-1.238ZM132.309 45.144c-.688 0-1.297-.177-1.828-.53a3.564 3.564 0 0 1-1.238-1.445c-.294-.62-.442-1.317-.442-2.093 0-.786.148-1.48.442-2.079a3.459 3.459 0 0 1 1.238-1.43c.531-.353 1.145-.53 1.843-.53.609 0 1.13.123 1.562.369.442.245.791.59 1.047 1.031v-4.082h1.238v10.612h-1.12l-.104-1.238a2.951 2.951 0 0 1-.589.692 2.826 2.826 0 0 1-.87.531c-.334.128-.727.192-1.179.192Zm.162-1.076c.492 0 .919-.118 1.282-.354.364-.246.644-.59.841-1.032.196-.452.294-.982.294-1.592 0-.609-.098-1.135-.294-1.577-.197-.452-.477-.796-.841-1.031-.363-.246-.79-.369-1.282-.369a2.16 2.16 0 0 0-1.238.369c-.363.235-.648.58-.855 1.031-.206.443-.309.968-.309 1.577 0 .61.103 1.14.309 1.592.207.442.492.786.855 1.032.364.236.776.354 1.238.354ZM123.641 44.967v-7.753h1.12l.089 1.415c.177-.354.408-.649.692-.884a2.853 2.853 0 0 1 1.032-.531 5.045 5.045 0 0 1 1.386-.177v1.297h-.767c-.295 0-.579.04-.855.118a2.178 2.178 0 0 0-.751.383 1.825 1.825 0 0 0-.516.722c-.128.305-.192.688-.192 1.15v4.26h-1.238ZM118.178 45.144c-.718 0-1.352-.167-1.902-.502a3.385 3.385 0 0 1-1.282-1.415c-.305-.609-.457-1.321-.457-2.137 0-.825.152-1.537.457-2.137a3.48 3.48 0 0 1 1.297-1.415c.56-.334 1.199-.5 1.916-.5.727 0 1.361.166 1.901.5.551.334.978.806 1.283 1.415.304.6.457 1.312.457 2.137 0 .816-.158 1.528-.472 2.137a3.385 3.385 0 0 1-1.282 1.416c-.551.334-1.189.5-1.916.5Zm0-1.062c.452 0 .859-.108 1.223-.324.363-.226.648-.56.855-1.002.216-.452.324-1.007.324-1.666 0-.668-.103-1.223-.309-1.665-.207-.442-.492-.771-.855-.988a2.198 2.198 0 0 0-1.209-.339c-.442 0-.845.113-1.209.34-.363.215-.653.545-.869.987-.216.442-.324.997-.324 1.665 0 .659.103 1.214.309 1.666.216.442.501.776.855 1.002.364.216.766.324 1.209.324ZM105.111 44.967l-2.285-7.753h1.238l1.695 6.176 1.799-6.176h1.4l1.813 6.16 1.68-6.16h1.253l-2.285 7.753h-1.267l-1.887-6.456-1.887 6.456h-1.267ZM99.08 45.144c-.698 0-1.278-.103-1.74-.31-.452-.216-.796-.51-1.032-.884a3.065 3.065 0 0 1-.427-1.327h1.267c.04.266.128.511.266.737.147.216.358.393.633.53.276.138.624.207 1.047.207.334 0 .619-.049.855-.147a1.19 1.19 0 0 0 .53-.442c.128-.187.192-.403.192-.649 0-.324-.074-.575-.221-.752-.138-.186-.344-.324-.62-.412a4.498 4.498 0 0 0-1.001-.221 6.69 6.69 0 0 1-1.15-.251 2.902 2.902 0 0 1-.855-.427 1.712 1.712 0 0 1-.516-.664 2.309 2.309 0 0 1-.177-.943c0-.422.113-.796.34-1.12.225-.324.545-.575.957-.752.423-.187.92-.28 1.489-.28.835 0 1.494.192 1.975.575.491.383.781.928.87 1.636h-1.224a1.209 1.209 0 0 0-.501-.855c-.285-.206-.663-.31-1.135-.31-.5 0-.88.094-1.135.28a.871.871 0 0 0-.383.738c0 .226.054.432.162.619.118.177.315.329.59.456.275.118.643.207 1.105.266.58.069 1.071.182 1.474.339.403.147.708.378.914.693.216.314.319.742.31 1.282 0 .51-.123.943-.369 1.297-.236.354-.57.624-1.002.81-.423.187-.919.28-1.489.28ZM91.58 45.144c-.698 0-1.277-.103-1.74-.31-.451-.216-.795-.51-1.031-.884a3.065 3.065 0 0 1-.427-1.327h1.267c.04.266.128.511.266.737.147.216.358.393.633.53.275.138.624.207 1.047.207.334 0 .619-.049.855-.147.235-.108.412-.256.53-.442a1.12 1.12 0 0 0 .192-.649c0-.324-.074-.575-.221-.752-.138-.186-.344-.324-.62-.412a4.498 4.498 0 0 0-1.002-.221 6.692 6.692 0 0 1-1.15-.251 2.9 2.9 0 0 1-.854-.427 1.712 1.712 0 0 1-.516-.664 2.309 2.309 0 0 1-.177-.943c0-.422.113-.796.34-1.12.225-.324.544-.575.957-.752.423-.187.919-.28 1.489-.28.835 0 1.493.192 1.975.575.491.383.781.928.87 1.636h-1.224a1.21 1.21 0 0 0-.501-.855c-.285-.206-.663-.31-1.135-.31-.501 0-.88.094-1.135.28a.87.87 0 0 0-.383.738c0 .226.054.432.162.619.118.177.315.329.59.456.275.118.643.207 1.105.266.58.069 1.071.182 1.474.339.403.147.708.378.914.693.216.314.32.742.31 1.282 0 .51-.123.943-.37 1.297a2.23 2.23 0 0 1-1.001.81c-.423.187-.92.28-1.489.28ZM83.079 45.144c-.59 0-1.081-.108-1.474-.325a2.25 2.25 0 0 1-.885-.884 2.526 2.526 0 0 1-.294-1.194c0-.51.127-.943.383-1.297.265-.364.634-.639 1.105-.825.472-.187 1.022-.28 1.651-.28h1.93c0-.502-.058-.92-.176-1.253-.118-.334-.31-.585-.575-.752-.265-.167-.619-.25-1.061-.25-.442 0-.82.113-1.135.339-.314.216-.51.54-.59.972h-1.267c.059-.51.23-.938.516-1.282a2.64 2.64 0 0 1 1.076-.796c.442-.187.909-.28 1.4-.28.698 0 1.272.128 1.724.383.453.246.787.595 1.003 1.047.216.442.324.968.324 1.577v4.923h-1.105l-.074-1.327a2.752 2.752 0 0 1-.383.59 2.465 2.465 0 0 1-.53.472 2.598 2.598 0 0 1-.708.324 2.9 2.9 0 0 1-.855.118Zm.177-1.047c.324 0 .623-.074.899-.22a2.27 2.27 0 0 0 .707-.59c.207-.256.364-.54.472-.855.108-.315.162-.644.162-.988v-.147h-1.828c-.462 0-.84.059-1.135.177-.285.118-.49.285-.619.5a1.317 1.317 0 0 0-.191.708c0 .285.059.536.177.752.117.206.29.368.515.486.236.118.516.177.84.177ZM72.488 44.967V34.649h3.316c.826 0 1.504.138 2.034.413.531.275.924.649 1.18 1.12.255.462.383.988.383 1.577 0 .58-.128 1.106-.383 1.577-.256.472-.649.845-1.18 1.12-.52.276-1.198.413-2.034.413h-2.078v4.098h-1.238Zm1.238-5.144h2.064c.864 0 1.469-.187 1.813-.56.353-.384.53-.885.53-1.504 0-.648-.177-1.154-.53-1.518-.344-.373-.949-.56-1.813-.56h-2.064v4.142Z"/></svg>
+`;
+
+export default PasswordManagerLogo;
diff --git a/libs/components/src/icon/logos/bitwarden/secrets-manager.ts b/libs/components/src/icon/logos/bitwarden/secrets-manager.ts
new file mode 100644
index 00000000000..bcba5f71d1a
--- /dev/null
+++ b/libs/components/src/icon/logos/bitwarden/secrets-manager.ts
@@ -0,0 +1,7 @@
+import { svgIcon } from "../../icon";
+
+const SecretsManagerLogo = svgIcon`
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 49"><path class="tw-fill-text-alt2" fill-rule="evenodd" d="M48.038 7.458c2.289 0 4.069.869 5.376 2.679 1.308 1.774 1.962 4.2 1.962 7.277 0 3.186-.654 5.647-1.998 7.385-1.344 1.774-3.16 2.607-5.449 2.607-2.288 0-4.032-.797-5.34-2.462h-.363l-.69 1.701a.672.672 0 0 1-.618.399h-2.906a.65.65 0 0 1-.654-.652V.942a.65.65 0 0 1 .654-.652h3.923a.65.65 0 0 1 .654.651v5.576c0 .796-.072 2.063-.218 3.8h.218c1.2-1.882 3.052-2.86 5.45-2.86Zm-1.67 4.236c-1.272 0-2.253.398-2.87 1.194-.582.797-.909 2.136-.909 3.946v.58c0 2.063.29 3.548.909 4.416.617.87 1.598 1.34 2.942 1.34 1.053 0 1.962-.507 2.579-1.52.617-.978.945-2.462.945-4.309 0-1.882-.328-3.294-.945-4.236-.654-.94-1.562-1.411-2.652-1.411ZM64.021 27.08h-3.924a.65.65 0 0 1-.654-.652V8.508a.65.65 0 0 1 .654-.652h3.924a.65.65 0 0 1 .653.652v17.884c.037.326-.29.688-.653.688Zm14.348-3.874c.763 0 1.671-.145 2.761-.434a.436.436 0 0 1 .545.434v3.005a.445.445 0 0 1-.254.398c-1.236.507-2.797.76-4.541.76-2.107 0-3.633-.506-4.577-1.592-.945-1.05-1.453-2.643-1.453-4.743v-9.232h-2.07a.419.419 0 0 1-.437-.434V9.666c0-.036.037-.072.037-.108l2.87-1.702 1.416-3.765c.073-.181.218-.29.4-.29h2.615c.254 0 .436.181.436.435v3.656h5.195c.109 0 .218.109.218.218v3.258a.419.419 0 0 1-.436.434h-4.94v9.196c0 .724.217 1.303.617 1.629.363.398.944.58 1.598.58Zm24.447 3.874c-.508 0-.908-.326-1.126-.796l-3.85-11.694c-.254-.833-.581-2.1-1.017-3.73h-.11l-.363 1.304-.762 2.462-3.96 11.694c-.145.47-.581.76-1.09.76-.508 0-.944-.326-1.09-.833L84.62 9.413c-.146-.507.254-1.05.835-1.05h.109a.85.85 0 0 1 .799.615l2.833 10.246c.69 2.679 1.163 4.634 1.38 5.937h.11c.653-2.679 1.162-4.453 1.489-5.358l3.669-10.716c.145-.434.545-.724 1.053-.724.473 0 .872.29 1.017.724l3.415 10.644c.836 2.715 1.344 4.453 1.526 5.358h.109c.109-.724.545-2.752 1.38-6.01l2.725-10.1a.85.85 0 0 1 .799-.616c.545 0 .944.507.799 1.05l-4.577 16.834c-.145.507-.581.833-1.126.833h-.146Zm21.578 0a.664.664 0 0 1-.654-.58l-.327-2.389h-.182c-.944 1.195-1.888 2.064-2.906 2.57-.98.508-2.179.725-3.523.725-1.853 0-3.269-.47-4.287-1.412-.908-.833-1.416-1.955-1.489-3.367-.145-1.883.654-3.693 2.18-4.743 1.562-1.013 3.741-1.629 6.684-1.629l3.559-.108v-1.231c0-1.81-.363-3.114-1.126-4.019-.762-.905-1.889-1.34-3.487-1.34-1.526 0-3.051.363-4.65 1.123a.799.799 0 0 1-1.053-.398c-.182-.399 0-.87.4-1.014 1.816-.724 3.596-1.122 5.412-1.122 2.071 0 3.596.543 4.65 1.629 1.017 1.05 1.525 2.751 1.525 4.96V26.5c-.036.217-.363.579-.726.579Zm-7.52-1.231c2.035 0 3.597-.58 4.723-1.701 1.162-1.123 1.743-2.752 1.743-4.743v-1.81l-3.269.145c-2.652.108-4.504.543-5.667 1.23-1.126.688-1.707 1.81-1.707 3.259 0 1.158.363 2.1 1.053 2.751.8.543 1.817.869 3.124.869ZM138.38 8.001c.545 0 1.09.036 1.708.109a.818.818 0 0 1 .69.94c-.073.435-.509.689-.945.616-.545-.072-1.089-.145-1.634-.145-1.599 0-2.906.688-3.923 2.028-1.018 1.34-1.526 3.077-1.526 5.104v9.486a.82.82 0 0 1-.836.832.82.82 0 0 1-.835-.832V9.123c0-.398.327-.724.726-.724.4 0 .727.29.727.688l.145 2.679h.109c.763-1.376 1.598-2.353 2.47-2.896.836-.58 1.889-.87 3.124-.87Zm12.787 0c1.344 0 2.543.253 3.524.724 1.017.47 1.889 1.34 2.651 2.534h.109a86.486 86.486 0 0 1-.109-4.236v-5.9c0-.471.364-.833.836-.833a.82.82 0 0 1 .835.832v25.306c0 .326-.254.58-.581.58a.589.589 0 0 1-.581-.543l-.363-2.354h-.146c-1.416 2.136-3.487 3.186-6.139 3.186-2.615 0-4.54-.796-5.957-2.425-1.344-1.63-2.071-3.947-2.071-7.024 0-3.222.654-5.684 2.035-7.421C146.59 8.87 148.552 8 151.167 8Zm0 1.557c-2.071 0-3.596.724-4.65 2.172-1.017 1.412-1.525 3.475-1.525 6.227 0 5.285 2.07 7.928 6.211 7.928 2.144 0 3.669-.615 4.65-1.846 1.017-1.231 1.489-3.258 1.489-6.082v-.29c0-2.896-.472-4.96-1.489-6.19-.944-1.304-2.506-1.92-4.686-1.92Zm21.759 17.848c-2.724 0-4.831-.833-6.393-2.534-1.526-1.666-2.289-4.019-2.289-7.024s.727-5.394 2.216-7.168c1.489-1.81 3.451-2.715 5.958-2.715 2.179 0 3.959.76 5.194 2.28 1.308 1.521 1.925 3.62 1.925 6.264v1.375h-13.513c.037 2.57.618 4.526 1.816 5.901 1.199 1.376 2.87 1.992 5.086 1.992 1.054 0 2.034-.073 2.834-.218a14.71 14.71 0 0 0 2.106-.579c.473-.18.981.181.981.688 0 .29-.181.58-.472.688-.872.362-1.707.58-2.47.724-.908.253-1.889.326-2.979.326Zm-.508-17.885c-1.817 0-3.27.58-4.36 1.774-1.089 1.159-1.707 2.897-1.925 5.105h11.624c0-2.136-.472-3.874-1.416-5.068-.945-1.195-2.252-1.81-3.923-1.81Zm26.299 17.559a.82.82 0 0 1-.835-.833V14.916c0-1.883-.4-3.259-1.163-4.091-.835-.833-2.034-1.304-3.705-1.304-2.252 0-3.887.543-4.904 1.702-1.017 1.122-1.598 2.969-1.598 5.467v9.485a.82.82 0 0 1-.836.832.82.82 0 0 1-.835-.832V9.123c0-.434.327-.76.763-.76.399 0 .69.29.763.652l.218 1.882h.109c1.235-1.955 3.378-2.932 6.502-2.932 4.25 0 6.393 2.28 6.393 6.842v11.368c-.036.507-.436.905-.872.905ZM62.097 0c-1.708 0-3.088 1.303-3.088 2.932v.29c0 1.593 1.416 2.933 3.087 2.933 1.671 0 3.088-1.34 3.088-2.933V2.97C65.184 1.303 63.767 0 62.096 0Z" clip-rule="evenodd"/><path class="tw-fill-text-alt2" d="M22.052 17.087V4.142h-9.08V27.14c1.608-.85 3.047-1.773 4.317-2.771 3.175-2.481 4.763-4.908 4.763-7.282Zm3.891-15.534v15.534c0 1.16-.226 2.31-.679 3.45a12.86 12.86 0 0 1-1.682 3.033 18.741 18.741 0 0 1-2.392 2.579c-.925.836-1.78 1.53-2.564 2.083a32.288 32.288 0 0 1-2.452 1.568c-.851.492-1.456.826-1.814 1.001-.358.175-.645.31-.861.405-.163.08-.338.12-.527.12-.19 0-.365-.04-.527-.12-.216-.095-.504-.23-.862-.405-.358-.175-.962-.509-1.814-1.001a32.279 32.279 0 0 1-2.452-1.568 27.823 27.823 0 0 1-2.564-2.083A18.74 18.74 0 0 1 2.36 23.57 12.857 12.857 0 0 1 .68 20.536 9.273 9.273 0 0 1 0 17.087V1.553C0 1.203.128.9.385.643S.945.26 1.297.26h23.35c.35 0 .655.128.911.384.257.256.385.56.385.91ZM195.682 44.967v-7.753h1.12l.088 1.415c.177-.354.408-.649.693-.884a2.853 2.853 0 0 1 1.032-.531 5.033 5.033 0 0 1 1.385-.177v1.297h-.766c-.295 0-.58.04-.855.118a2.183 2.183 0 0 0-.752.383 1.825 1.825 0 0 0-.516.722c-.128.305-.191.688-.191 1.15v4.26h-1.238ZM190.546 45.144c-.688 0-1.297-.167-1.827-.502-.531-.334-.949-.805-1.253-1.415-.295-.609-.442-1.321-.442-2.137 0-.815.147-1.528.442-2.137.304-.609.722-1.08 1.253-1.415.54-.334 1.159-.5 1.857-.5.747 0 1.371.166 1.872.5.501.334.879.781 1.135 1.342.255.56.383 1.174.383 1.842v.295c0 .098-.005.216-.015.353h-5.999v-.958h4.805c-.019-.756-.241-1.331-.663-1.724-.413-.403-.929-.604-1.548-.604a2.24 2.24 0 0 0-1.149.31 2.214 2.214 0 0 0-.84.884c-.217.392-.325.884-.325 1.473v.413c0 .649.108 1.194.325 1.636.216.433.496.757.84.973.353.216.737.324 1.149.324.551 0 .983-.103 1.297-.31.315-.215.546-.52.693-.913h1.223c-.117.432-.324.82-.619 1.164a2.941 2.941 0 0 1-1.09.81c-.433.197-.934.296-1.504.296ZM182.179 48.386c-.697 0-1.311-.088-1.842-.265-.521-.167-.929-.428-1.223-.781-.285-.354-.428-.791-.428-1.312 0-.246.044-.501.133-.767.098-.265.26-.52.486-.766.236-.245.565-.467.988-.663l.943.501c-.56.216-.924.467-1.091.752-.167.285-.25.56-.25.825 0 .324.093.595.28.81.196.217.467.379.81.487.344.108.742.162 1.194.162.443 0 .821-.059 1.135-.177.325-.108.57-.27.737-.486.177-.206.266-.452.266-.737 0-.413-.133-.737-.398-.973-.266-.226-.782-.358-1.548-.398a15 15 0 0 1-1.503-.162 6.95 6.95 0 0 1-1.003-.236 3.329 3.329 0 0 1-.648-.324 4.345 4.345 0 0 1-.457-.368v-.34l1.459-1.4 1.164.384-1.591 1.311.191-.56c.108.079.211.153.31.221.098.07.231.133.398.192.177.05.417.098.722.147.314.05.727.094 1.238.133.707.05 1.272.167 1.695.354.423.186.727.447.914.78.187.325.28.723.28 1.195 0 .413-.118.806-.354 1.179-.226.373-.589.678-1.091.914-.491.245-1.13.368-1.916.368Zm-.014-5.837c-.629 0-1.165-.117-1.607-.353a2.512 2.512 0 0 1-.987-.988 2.952 2.952 0 0 1-.339-1.415c0-.52.113-.987.339-1.4a2.605 2.605 0 0 1 1.002-.987c.442-.246.973-.369 1.592-.369.638 0 1.174.123 1.606.369.433.245.762.574.988.987.226.413.339.88.339 1.4 0 .521-.113.993-.339 1.415a2.508 2.508 0 0 1-.988.988c-.432.236-.968.354-1.606.354Zm0-1.017c.55 0 .977-.142 1.282-.427.305-.295.457-.732.457-1.312 0-.58-.152-1.012-.457-1.297-.305-.285-.732-.427-1.282-.427-.521 0-.949.142-1.283.427-.324.285-.486.718-.486 1.297 0 .58.157 1.017.472 1.312.324.285.756.428 1.297.428Zm1.297-3.271-.369-1.047h3.036v.928l-2.667.118ZM173.442 45.144c-.589 0-1.081-.108-1.474-.325a2.252 2.252 0 0 1-.884-.884 2.533 2.533 0 0 1-.295-1.194c0-.51.128-.943.384-1.297.265-.364.633-.639 1.105-.825.472-.187 1.022-.28 1.651-.28h1.931c0-.502-.059-.92-.177-1.253a1.407 1.407 0 0 0-.575-.752c-.265-.167-.619-.25-1.061-.25-.443 0-.821.113-1.135.339-.315.216-.511.54-.59.972h-1.267c.059-.51.231-.938.515-1.282.285-.354.644-.619 1.076-.796.443-.187.909-.28 1.401-.28.697 0 1.272.128 1.724.383.452.246.786.595 1.002 1.047.217.442.325.968.325 1.577v4.923h-1.106l-.073-1.327a2.752 2.752 0 0 1-.384.59 2.459 2.459 0 0 1-.53.472 2.6 2.6 0 0 1-.708.324c-.255.078-.54.118-.855.118Zm.177-1.047c.324 0 .624-.074.899-.22a2.28 2.28 0 0 0 .708-.59 2.8 2.8 0 0 0 .471-.855c.109-.315.163-.644.163-.988v-.147h-1.828c-.462 0-.84.059-1.135.177-.285.118-.491.285-.619.5a1.315 1.315 0 0 0-.192.708c0 .285.059.536.177.752.118.206.29.368.516.486.236.118.516.177.84.177ZM162.504 44.967v-7.753h1.12l.059 1.223c.226-.442.55-.786.973-1.031.432-.246.929-.369 1.489-.369.57 0 1.066.108 1.488.324.423.217.752.546.988.988.236.442.354 1.002.354 1.68v4.938h-1.239v-4.805c0-.688-.172-1.204-.515-1.548-.335-.344-.787-.516-1.356-.516-.384 0-.737.094-1.062.28a1.97 1.97 0 0 0-.781.796c-.187.354-.28.786-.28 1.297v4.496h-1.238ZM156.803 45.144c-.589 0-1.081-.108-1.474-.325a2.246 2.246 0 0 1-.884-.884 2.52 2.52 0 0 1-.295-1.194c0-.51.128-.943.383-1.297.266-.364.634-.639 1.106-.825.471-.187 1.022-.28 1.651-.28h1.93c0-.502-.059-.92-.176-1.253a1.407 1.407 0 0 0-.575-.752c-.266-.167-.619-.25-1.062-.25-.442 0-.82.113-1.134.339-.315.216-.511.54-.59.972h-1.268c.059-.51.231-.938.516-1.282.285-.354.644-.619 1.076-.796.442-.187.909-.28 1.4-.28.698 0 1.273.128 1.725.383.452.246.786.595 1.002 1.047.216.442.324.968.324 1.577v4.923h-1.105l-.074-1.327a2.747 2.747 0 0 1-.383.59 2.459 2.459 0 0 1-.53.472 2.614 2.614 0 0 1-.708.324c-.255.078-.54.118-.855.118Zm.177-1.047c.324 0 .624-.074.899-.22a2.28 2.28 0 0 0 .708-.59 2.8 2.8 0 0 0 .471-.855c.108-.315.162-.644.162-.988v-.147h-1.827c-.462 0-.84.059-1.135.177-.285.118-.491.285-.619.5a1.315 1.315 0 0 0-.192.708c0 .285.059.536.177.752.118.206.29.368.516.486.236.118.516.177.84.177ZM142.312 44.967V34.649h1.444l3.508 7.267 3.479-7.267h1.459v10.318h-1.238v-8.092l-3.243 6.736h-.929l-3.242-6.677v8.033h-1.238ZM133.566 45.144c-.697 0-1.277-.103-1.739-.31-.452-.216-.796-.51-1.032-.884a3.074 3.074 0 0 1-.427-1.327h1.268c.039.266.127.511.265.737.147.216.359.393.634.53.275.138.624.207 1.046.207.334 0 .619-.049.855-.147.236-.108.413-.256.531-.442.127-.187.191-.403.191-.649 0-.324-.073-.575-.221-.752-.137-.186-.344-.324-.619-.412a4.49 4.49 0 0 0-1.002-.221 6.701 6.701 0 0 1-1.15-.251 2.905 2.905 0 0 1-.855-.427 1.713 1.713 0 0 1-.516-.664 2.324 2.324 0 0 1-.176-.943c0-.422.113-.796.339-1.12.226-.324.545-.575.958-.752.422-.187.918-.28 1.488-.28.836 0 1.494.192 1.975.575.492.383.782.928.87 1.636h-1.223a1.214 1.214 0 0 0-.502-.855c-.284-.206-.663-.31-1.134-.31-.502 0-.88.094-1.135.28a.87.87 0 0 0-.384.738c0 .226.054.432.163.619.117.177.314.329.589.456.275.118.644.207 1.106.266.579.069 1.071.182 1.473.339.403.147.708.378.914.693.216.314.32.742.31 1.282 0 .51-.123.943-.369 1.297-.235.354-.57.624-1.002.81-.422.187-.919.28-1.489.28ZM127.785 44.967c-.442 0-.825-.07-1.15-.207a1.512 1.512 0 0 1-.751-.692c-.167-.334-.251-.782-.251-1.342V38.26h-1.356v-1.046h1.356l.162-1.93h1.076v1.93h2.196v1.046h-2.196v4.466c0 .462.094.777.28.944.187.157.516.236.988.236h.899v1.06h-1.253ZM119.888 45.144c-.688 0-1.297-.167-1.828-.502-.531-.334-.948-.805-1.253-1.415-.295-.609-.442-1.321-.442-2.137 0-.815.147-1.528.442-2.137.305-.609.722-1.08 1.253-1.415.54-.334 1.159-.5 1.857-.5.747 0 1.371.166 1.872.5.501.334.879.781 1.135 1.342.255.56.383 1.174.383 1.842v.295c0 .098-.005.216-.015.353h-5.998v-.958h4.805c-.02-.756-.241-1.331-.664-1.724-.412-.403-.928-.604-1.547-.604-.413 0-.796.103-1.15.31a2.214 2.214 0 0 0-.84.884c-.216.392-.324.884-.324 1.473v.413c0 .649.108 1.194.324 1.636.216.433.496.757.84.973.354.216.737.324 1.15.324.55 0 .982-.103 1.297-.31.314-.215.545-.52.692-.913h1.224c-.118.432-.324.82-.619 1.164a2.945 2.945 0 0 1-1.091.81c-.432.197-.933.296-1.503.296ZM111.205 44.967v-7.753h1.12l.089 1.415a2.68 2.68 0 0 1 .692-.884 2.853 2.853 0 0 1 1.032-.531 5.045 5.045 0 0 1 1.386-.177v1.297h-.767c-.295 0-.58.04-.855.118a2.178 2.178 0 0 0-.751.383 1.805 1.805 0 0 0-.516.722c-.128.305-.192.688-.192 1.15v4.26h-1.238ZM106.044 45.144c-.707 0-1.336-.167-1.887-.502a3.59 3.59 0 0 1-1.297-1.43c-.314-.608-.471-1.316-.471-2.122 0-.815.157-1.523.471-2.122.315-.61.747-1.08 1.297-1.415.551-.344 1.18-.516 1.887-.516.884 0 1.621.236 2.211.708.599.471.983 1.105 1.15 1.9h-1.268c-.108-.49-.359-.869-.752-1.134-.383-.275-.835-.413-1.356-.413a2.27 2.27 0 0 0-1.223.34c-.354.225-.634.56-.84 1.002-.206.442-.31.992-.31 1.65 0 .492.059.929.177 1.312.118.373.28.688.487.944.216.245.466.432.751.56.295.127.614.191.958.191.354 0 .673-.059.958-.177a1.95 1.95 0 0 0 .737-.545c.207-.236.344-.516.413-.84h1.268a3.123 3.123 0 0 1-1.15 1.886c-.599.482-1.336.723-2.211.723ZM97.563 45.144c-.688 0-1.297-.167-1.828-.502-.53-.334-.948-.805-1.252-1.415-.295-.609-.443-1.321-.443-2.137 0-.815.148-1.528.443-2.137.304-.609.722-1.08 1.252-1.415.54-.334 1.16-.5 1.858-.5.746 0 1.37.166 1.871.5.502.334.88.781 1.135 1.342a4.38 4.38 0 0 1 .384 1.842v.295c0 .098-.005.216-.015.353h-5.999v-.958h4.805c-.02-.756-.24-1.331-.663-1.724-.413-.403-.929-.604-1.548-.604-.413 0-.796.103-1.15.31a2.215 2.215 0 0 0-.84.884c-.216.392-.324.884-.324 1.473v.413c0 .649.108 1.194.324 1.636.216.433.497.757.84.973.354.216.737.324 1.15.324.55 0 .983-.103 1.297-.31a1.87 1.87 0 0 0 .693-.913h1.223c-.118.432-.324.82-.619 1.164a2.94 2.94 0 0 1-1.09.81c-.433.197-.934.296-1.504.296ZM89.104 45.144c-.757 0-1.415-.138-1.975-.413a3.084 3.084 0 0 1-1.297-1.15c-.305-.491-.457-1.06-.457-1.71h1.297c0 .403.093.777.28 1.12.186.335.457.605.81.811.364.197.811.295 1.342.295.462 0 .855-.074 1.179-.22.334-.158.585-.37.752-.635.177-.265.265-.565.265-.899 0-.373-.084-.683-.25-.928a1.755 1.755 0 0 0-.664-.62 5.43 5.43 0 0 0-.987-.442c-.374-.127-.777-.26-1.21-.398-.864-.275-1.493-.619-1.886-1.031-.383-.423-.575-.963-.575-1.622 0-.56.128-1.05.384-1.474a2.679 2.679 0 0 1 1.12-.987c.491-.246 1.07-.369 1.74-.369.657 0 1.227.123 1.709.369.491.246.874.585 1.15 1.017.275.423.412.914.412 1.474h-1.297a1.76 1.76 0 0 0-.22-.84 1.729 1.729 0 0 0-.679-.678c-.295-.187-.668-.28-1.12-.28a2.202 2.202 0 0 0-1.002.191c-.285.128-.511.315-.678.56-.158.246-.236.546-.236.9 0 .334.069.604.206.81.148.207.354.383.62.53.274.138.594.266.957.384.364.118.767.25 1.209.398.501.167.943.373 1.326.619.393.236.698.54.914.914.226.373.34.85.34 1.43 0 .49-.133.958-.399 1.4-.255.432-.638.786-1.15 1.061-.51.275-1.154.413-1.93.413Z"/></svg>
+`;
+
+export default SecretsManagerLogo;
diff --git a/libs/components/src/icon/logos/bitwarden/shield.ts b/libs/components/src/icon/logos/bitwarden/shield.ts
new file mode 100644
index 00000000000..15fe6dddf48
--- /dev/null
+++ b/libs/components/src/icon/logos/bitwarden/shield.ts
@@ -0,0 +1,7 @@
+import { svgIcon } from "../../icon";
+
+const BitwardenShield = svgIcon`
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 28 33"><path d="M26.696.403A1.274 1.274 0 0 0 25.764 0H1.83C1.467 0 1.16.137.898.403a1.294 1.294 0 0 0-.398.944v16.164c0 1.203.235 2.405.697 3.587.462 1.188 1.038 2.24 1.728 3.155.682.922 1.5 1.815 2.453 2.68a28.077 28.077 0 0 0 2.63 2.167 32.181 32.181 0 0 0 2.518 1.628c.875.511 1.493.857 1.863 1.045.37.18.661.324.882.417.163.087.348.13.54.13.192 0 .377-.043.54-.13.221-.1.52-.237.882-.417.37-.18.989-.534 1.863-1.045a34.4 34.4 0 0 0 2.517-1.628c.804-.576 1.679-1.296 2.631-2.168a20.206 20.206 0 0 0 2.454-2.68 13.599 13.599 0 0 0 1.72-3.154c.463-1.189.697-2.384.697-3.587V1.347a1.406 1.406 0 0 0-.42-.944ZM23.61 17.662c0 5.849-9.813 10.89-9.813 10.89V3.458h9.813v14.205Z" class="tw-fill-marketing-logo"/></svg>
+`;
+
+export default BitwardenShield;
diff --git a/libs/components/src/icon/logos/index.ts b/libs/components/src/icon/logos/index.ts
new file mode 100644
index 00000000000..07a8a739289
--- /dev/null
+++ b/libs/components/src/icon/logos/index.ts
@@ -0,0 +1 @@
+export * from "./bitwarden";
diff --git a/libs/components/src/layout/layout.stories.ts b/libs/components/src/layout/layout.stories.ts
index e495367f78d..7ab0ffc7ce9 100644
--- a/libs/components/src/layout/layout.stories.ts
+++ b/libs/components/src/layout/layout.stories.ts
@@ -55,207 +55,15 @@ export const WithContent: Story = {
     template: /* HTML */ `
       <bit-layout>
         <bit-side-nav>
-          <bit-nav-item text="Item A" route="#" icon="bwi-lock"></bit-nav-item>
-          <bit-nav-group text="Tree A" icon="bwi-family" [open]="true">
-            <bit-nav-group
-              text="Level 1 - with children (empty)"
-              route="#"
-              icon="bwi-collection-shared"
-              variant="tree"
-            ></bit-nav-group>
-            <bit-nav-item
-              text="Level 1 - no children"
-              route="#"
-              icon="bwi-collection-shared"
-              variant="tree"
-            ></bit-nav-item>
-            <bit-nav-group
-              text="Level 1 - with children"
-              route="#"
-              icon="bwi-collection-shared"
-              variant="tree"
-              [open]="true"
-            >
-              <bit-nav-group
-                text="Level 2 - with children"
-                route="#"
-                icon="bwi-collection-shared"
-                variant="tree"
-                [open]="true"
-              >
-                <bit-nav-item
-                  text="Level 3 - no children, no icon"
-                  route="#"
-                  variant="tree"
-                ></bit-nav-item>
-                <bit-nav-group
-                  text="Level 3 - with children"
-                  route="#"
-                  icon="bwi-collection-shared"
-                  variant="tree"
-                  [open]="true"
-                >
-                  <bit-nav-item
-                    text="Level 4 - no children, no icon"
-                    route="#"
-                    variant="tree"
-                  ></bit-nav-item>
-                </bit-nav-group>
-              </bit-nav-group>
-              <bit-nav-group
-                text="Level 2 - with children (empty)"
-                route="#"
-                icon="bwi-collection-shared"
-                variant="tree"
-                [open]="true"
-              ></bit-nav-group>
-              <bit-nav-item
-                text="Level 2 - no children"
-                route="#"
-                icon="bwi-collection-shared"
-                variant="tree"
-              ></bit-nav-item>
-            </bit-nav-group>
-            <bit-nav-item
-              text="Level 1 - no children"
-              route="#"
-              icon="bwi-collection-shared"
-              variant="tree"
-            ></bit-nav-item>
+          <bit-nav-group text="Hello World (Anchor)" [route]="['a']" icon="bwi-filter">
+            <bit-nav-item text="Child A" route="a" icon="bwi-filter"></bit-nav-item>
+            <bit-nav-item text="Child B" route="b"></bit-nav-item>
+            <bit-nav-item text="Child C" route="c" icon="bwi-filter"></bit-nav-item>
           </bit-nav-group>
-          <bit-nav-group text="Tree B" icon="bwi-collection-shared" [open]="true">
-            <bit-nav-group
-              text="Level 1 - with children (empty)"
-              route="#"
-              icon="bwi-collection-shared"
-              variant="tree"
-            ></bit-nav-group>
-            <bit-nav-item
-              text="Level 1 - no children"
-              route="#"
-              icon="bwi-collection-shared"
-              variant="tree"
-            ></bit-nav-item>
-            <bit-nav-group
-              text="Level 1 - with children"
-              route="#"
-              icon="bwi-collection-shared"
-              variant="tree"
-              [open]="true"
-            >
-              <bit-nav-group
-                text="Level 2 - with children"
-                route="#"
-                icon="bwi-collection-shared"
-                variant="tree"
-                [open]="true"
-              >
-                <bit-nav-item
-                  text="Level 3 - no children, no icon"
-                  route="#"
-                  variant="tree"
-                ></bit-nav-item>
-                <bit-nav-group
-                  text="Level 3 - with children"
-                  route="#"
-                  icon="bwi-collection-shared"
-                  variant="tree"
-                  [open]="true"
-                >
-                  <bit-nav-item
-                    text="Level 4 - no children, no icon"
-                    route="#"
-                    variant="tree"
-                  ></bit-nav-item>
-                </bit-nav-group>
-              </bit-nav-group>
-              <bit-nav-group
-                text="Level 2 - with children (empty)"
-                route="#"
-                icon="bwi-collection-shared"
-                variant="tree"
-                [open]="true"
-              ></bit-nav-group>
-              <bit-nav-item
-                text="Level 2 - no children"
-                route="#"
-                icon="bwi-collection-shared"
-                variant="tree"
-              ></bit-nav-item>
-            </bit-nav-group>
-            <bit-nav-item
-              text="Level 1 - no children"
-              route="#"
-              icon="bwi-collection-shared"
-              variant="tree"
-            ></bit-nav-item>
-          </bit-nav-group>
-          <bit-nav-group text="Tree C" icon="bwi-key" [open]="true">
-            <bit-nav-group
-              text="Level 1 - with children (empty)"
-              route="#"
-              icon="bwi-collection-shared"
-              variant="tree"
-            ></bit-nav-group>
-            <bit-nav-item
-              text="Level 1 - no children"
-              route="#"
-              icon="bwi-collection-shared"
-              variant="tree"
-            ></bit-nav-item>
-            <bit-nav-group
-              text="Level 1 - with children"
-              route="#"
-              icon="bwi-collection-shared"
-              variant="tree"
-              [open]="true"
-            >
-              <bit-nav-group
-                text="Level 2 - with children"
-                route="#"
-                icon="bwi-collection-shared"
-                variant="tree"
-                [open]="true"
-              >
-                <bit-nav-item
-                  text="Level 3 - no children, no icon"
-                  route="#"
-                  variant="tree"
-                ></bit-nav-item>
-                <bit-nav-group
-                  text="Level 3 - with children"
-                  route="#"
-                  icon="bwi-collection-shared"
-                  variant="tree"
-                  [open]="true"
-                >
-                  <bit-nav-item
-                    text="Level 4 - no children, no icon"
-                    route="#"
-                    variant="tree"
-                  ></bit-nav-item>
-                </bit-nav-group>
-              </bit-nav-group>
-              <bit-nav-group
-                text="Level 2 - with children (empty)"
-                route="#"
-                icon="bwi-collection-shared"
-                variant="tree"
-                [open]="true"
-              ></bit-nav-group>
-              <bit-nav-item
-                text="Level 2 - no children"
-                route="#"
-                icon="bwi-collection-shared"
-                variant="tree"
-              ></bit-nav-item>
-            </bit-nav-group>
-            <bit-nav-item
-              text="Level 1 - no children"
-              route="#"
-              icon="bwi-collection-shared"
-              variant="tree"
-            ></bit-nav-item>
+          <bit-nav-group text="Lorem Ipsum (Button)" icon="bwi-filter">
+            <bit-nav-item text="Child A" icon="bwi-filter"></bit-nav-item>
+            <bit-nav-item text="Child B"></bit-nav-item>
+            <bit-nav-item text="Child C" icon="bwi-filter"></bit-nav-item>
           </bit-nav-group>
         </bit-side-nav>
         <bit-callout title="Foobar"> Hello world! </bit-callout>
@@ -277,77 +85,15 @@ export const Secondary: Story = {
     template: /* HTML */ `
       <bit-layout>
         <bit-side-nav variant="secondary">
-          <bit-nav-item text="Item A" icon="bwi-collection-shared"></bit-nav-item>
-          <bit-nav-item text="Item B" icon="bwi-collection-shared"></bit-nav-item>
-          <bit-nav-divider></bit-nav-divider>
-          <bit-nav-item text="Item C" icon="bwi-collection-shared"></bit-nav-item>
-          <bit-nav-item text="Item D" icon="bwi-collection-shared"></bit-nav-item>
-          <bit-nav-group text="Tree example" icon="bwi-collection-shared" [open]="true">
-            <bit-nav-group
-              text="Level 1 - with children (empty)"
-              route="#"
-              icon="bwi-collection-shared"
-              variant="tree"
-            ></bit-nav-group>
-            <bit-nav-item
-              text="Level 1 - no children"
-              route="#"
-              icon="bwi-collection-shared"
-              variant="tree"
-            ></bit-nav-item>
-            <bit-nav-group
-              text="Level 1 - with children"
-              route="#"
-              icon="bwi-collection-shared"
-              variant="tree"
-              [open]="true"
-            >
-              <bit-nav-group
-                text="Level 2 - with children"
-                route="#"
-                icon="bwi-collection-shared"
-                variant="tree"
-                [open]="true"
-              >
-                <bit-nav-item
-                  text="Level 3 - no children, no icon"
-                  route="#"
-                  variant="tree"
-                ></bit-nav-item>
-                <bit-nav-group
-                  text="Level 3 - with children"
-                  route="#"
-                  icon="bwi-collection-shared"
-                  variant="tree"
-                  [open]="true"
-                >
-                  <bit-nav-item
-                    text="Level 4 - no children, no icon"
-                    route="#"
-                    variant="tree"
-                  ></bit-nav-item>
-                </bit-nav-group>
-              </bit-nav-group>
-              <bit-nav-group
-                text="Level 2 - with children (empty)"
-                route="#"
-                icon="bwi-collection-shared"
-                variant="tree"
-                [open]="true"
-              ></bit-nav-group>
-              <bit-nav-item
-                text="Level 2 - no children"
-                route="#"
-                icon="bwi-collection-shared"
-                variant="tree"
-              ></bit-nav-item>
-            </bit-nav-group>
-            <bit-nav-item
-              text="Level 1 - no children"
-              route="#"
-              icon="bwi-collection-shared"
-              variant="tree"
-            ></bit-nav-item>
+          <bit-nav-group text="Hello World (Anchor)" [route]="['a']" icon="bwi-filter">
+            <bit-nav-item text="Child A" route="a" icon="bwi-filter"></bit-nav-item>
+            <bit-nav-item text="Child B" route="b"></bit-nav-item>
+            <bit-nav-item text="Child C" route="c" icon="bwi-filter"></bit-nav-item>
+          </bit-nav-group>
+          <bit-nav-group text="Lorem Ipsum (Button)" icon="bwi-filter">
+            <bit-nav-item text="Child A" icon="bwi-filter"></bit-nav-item>
+            <bit-nav-item text="Child B"></bit-nav-item>
+            <bit-nav-item text="Child C" icon="bwi-filter"></bit-nav-item>
           </bit-nav-group>
         </bit-side-nav>
         <bit-callout title="Foobar"> Hello world! </bit-callout>
diff --git a/libs/components/src/navigation/nav-base.component.ts b/libs/components/src/navigation/nav-base.component.ts
index 9b222c9434f..dc3084509a5 100644
--- a/libs/components/src/navigation/nav-base.component.ts
+++ b/libs/components/src/navigation/nav-base.component.ts
@@ -55,16 +55,6 @@ export abstract class NavBaseComponent {
     matrixParams: "ignored",
   };
 
-  /**
-   * If this item is used within a tree, set `variant` to `"tree"`
-   */
-  @Input() variant: "default" | "tree" = "default";
-
-  /**
-   * Depth level when nested inside of a `'tree'` variant
-   */
-  @Input() treeDepth = 0;
-
   /**
    * If `true`, do not change styles when nav item is active.
    */
diff --git a/libs/components/src/navigation/nav-divider.component.html b/libs/components/src/navigation/nav-divider.component.html
index 64e43aeab4e..2d8e1dfa24b 100644
--- a/libs/components/src/navigation/nav-divider.component.html
+++ b/libs/components/src/navigation/nav-divider.component.html
@@ -1,3 +1,3 @@
 @if (sideNavService.open$ | async) {
-  <div class="tw-h-px tw-w-full tw-bg-secondary-300"></div>
+  <div class="tw-h-px tw-w-full tw-my-2 tw-bg-secondary-300"></div>
 }
diff --git a/libs/components/src/navigation/nav-group.component.html b/libs/components/src/navigation/nav-group.component.html
index cbb270ad070..6a9ee4c0ab9 100644
--- a/libs/components/src/navigation/nav-group.component.html
+++ b/libs/components/src/navigation/nav-group.component.html
@@ -6,8 +6,6 @@
     [route]="route"
     [relativeTo]="relativeTo"
     [routerLinkActiveOptions]="routerLinkActiveOptions"
-    [variant]="variant"
-    [treeDepth]="treeDepth"
     (mainContentClicked)="handleMainContentClicked()"
     [ariaLabel]="ariaLabel"
     [hideActiveStyles]="parentHideActiveStyles"
@@ -16,9 +14,7 @@
       <button
         type="button"
         class="tw-ms-auto"
-        [bitIconButton]="
-          open ? 'bwi-angle-up' : variant === 'tree' ? 'bwi-angle-right' : 'bwi-angle-down'
-        "
+        [bitIconButton]="open ? 'bwi-angle-up' : 'bwi-angle-down'"
         [buttonType]="'light'"
         (click)="toggle($event)"
         size="small"
@@ -29,17 +25,9 @@
         [attr.aria-label]="['toggleCollapse' | i18n, text].join(' ')"
       ></button>
     </ng-template>
-    <!-- Show toggle to the left for trees otherwise to the right -->
-    @if (variant === "tree") {
-      <ng-container slot="start">
-        <ng-container *ngTemplateOutlet="button"></ng-container>
-      </ng-container>
-    }
     <ng-container slot="end">
       <ng-content select="[slot=end]"></ng-content>
-      @if (variant !== "tree") {
-        <ng-container *ngTemplateOutlet="button"></ng-container>
-      }
+      <ng-container *ngTemplateOutlet="button"></ng-container>
     </ng-container>
   </bit-nav-item>
   <!-- [attr.aria-controls] of the above button expects a unique ID on the controlled element -->
diff --git a/libs/components/src/navigation/nav-group.component.ts b/libs/components/src/navigation/nav-group.component.ts
index 5346a583e37..b52f9fcd202 100644
--- a/libs/components/src/navigation/nav-group.component.ts
+++ b/libs/components/src/navigation/nav-group.component.ts
@@ -1,6 +1,5 @@
 import { CommonModule } from "@angular/common";
 import {
-  AfterContentInit,
   booleanAttribute,
   Component,
   ContentChildren,
@@ -29,7 +28,7 @@ import { SideNavService } from "./side-nav.service";
   ],
   imports: [CommonModule, NavItemComponent, IconButtonModule, I18nPipe],
 })
-export class NavGroupComponent extends NavBaseComponent implements AfterContentInit {
+export class NavGroupComponent extends NavBaseComponent {
   @ContentChildren(NavBaseComponent, {
     descendants: true,
   })
@@ -80,18 +79,6 @@ export class NavGroupComponent extends NavBaseComponent implements AfterContentI
     this.setOpen(!this.open);
   }
 
-  /**
-   * - For any nested NavGroupComponents or NavItemComponents, increment the `treeDepth` by 1.
-   */
-  private initNestedStyles() {
-    if (this.variant !== "tree") {
-      return;
-    }
-    [...this.nestedNavComponents].forEach((navGroupOrItem) => {
-      navGroupOrItem.treeDepth += 1;
-    });
-  }
-
   protected handleMainContentClicked() {
     if (!this.sideNavService.open) {
       if (!this.route) {
@@ -103,8 +90,4 @@ export class NavGroupComponent extends NavBaseComponent implements AfterContentI
     }
     this.mainContentClicked.emit();
   }
-
-  ngAfterContentInit(): void {
-    this.initNestedStyles();
-  }
 }
diff --git a/libs/components/src/navigation/nav-group.stories.ts b/libs/components/src/navigation/nav-group.stories.ts
index 19fe3764852..b30acc63c72 100644
--- a/libs/components/src/navigation/nav-group.stories.ts
+++ b/libs/components/src/navigation/nav-group.stories.ts
@@ -111,31 +111,6 @@ export const HideEmptyGroups: StoryObj<NavGroupComponent & { renderChildren: boo
   }),
 };
 
-export const Tree: StoryObj<NavGroupComponent> = {
-  render: (args) => ({
-    props: args,
-    template: /*html*/ `
-      <bit-side-nav>
-        <bit-nav-group text="Tree example" icon="bwi-collection-shared" [open]="true">
-          <bit-nav-group text="Level 1 - with children (empty)" route="t1" icon="bwi-collection-shared" variant="tree"></bit-nav-group>
-          <bit-nav-item text="Level 1 - no children" route="t2" icon="bwi-collection-shared" variant="tree"></bit-nav-item>
-          <bit-nav-group text="Level 1 - with children" route="t3" icon="bwi-collection-shared" variant="tree" [open]="true">
-            <bit-nav-group text="Level 2 - with children" route="t4" icon="bwi-collection-shared" variant="tree" [open]="true">
-              <bit-nav-item text="Level 3 - no children, no icon" route="t5" variant="tree"></bit-nav-item>
-              <bit-nav-group text="Level 3 - with children" route="t6" icon="bwi-collection-shared" variant="tree" [open]="true">
-                <bit-nav-item text="Level 4 - no children, no icon" route="t7" variant="tree"></bit-nav-item>
-              </bit-nav-group>
-            </bit-nav-group>
-            <bit-nav-group text="Level 2 - with children (empty)" route="t8" icon="bwi-collection-shared" variant="tree" [open]="true"></bit-nav-group>
-            <bit-nav-item text="Level 2 - no children" route="t9" icon="bwi-collection-shared" variant="tree"></bit-nav-item>
-          </bit-nav-group>
-          <bit-nav-item text="Level 1 - no children" route="t10" icon="bwi-collection-shared" variant="tree"></bit-nav-item>
-        </bit-nav-group>
-      </bit-side-nav>
-    `,
-  }),
-};
-
 export const Secondary: StoryObj<NavGroupComponent> = {
   render: (args) => ({
     props: args,
diff --git a/libs/components/src/navigation/nav-item.component.html b/libs/components/src/navigation/nav-item.component.html
index f86f7e2c6d7..15fcc74e1f9 100644
--- a/libs/components/src/navigation/nav-item.component.html
+++ b/libs/components/src/navigation/nav-item.component.html
@@ -1,113 +1,77 @@
-<ng-container
-  *ngIf="{
-    open: sideNavService.open$ | async,
-  } as data"
->
-  <div
-    *ngIf="data.open || icon"
-    class="tw-relative"
-    [ngClass]="[
-      showActiveStyles
-        ? 'tw-bg-background-alt4'
-        : 'tw-bg-background-alt3 hover:tw-bg-primary-300/60',
-      fvwStyles$ | async,
-    ]"
-  >
+<div class="tw-ps-2 tw-pe-2">
+  @let open = sideNavService.open$ | async;
+  @if (open || icon) {
     <div
-      [ngStyle]="{
-        'padding-left': data.open ? (variant === 'tree' ? 2.5 : 1) + treeDepth * 1.5 + 'rem' : '0',
-      }"
-      class="tw-relative tw-flex"
+      class="tw-relative tw-rounded-md tw-h-10"
+      [ngClass]="[
+        showActiveStyles
+          ? 'tw-bg-background-alt4'
+          : 'tw-bg-background-alt3 hover:tw-bg-hover-contrast',
+        fvwStyles$ | async,
+      ]"
     >
-      <div [ngClass]="[variant === 'tree' ? 'tw-py-1' : 'tw-py-2']">
-        <div
-          #slotStart
-          class="[&>*:focus-visible::before]:!tw-ring-text-alt2 [&>*:hover]:!tw-border-text-alt2 [&>*]:!tw-text-alt2"
-        >
-          <ng-content select="[slot=start]"></ng-content>
-        </div>
-        <!-- Default content for #slotStart (for consistent sizing) -->
-        <div
-          *ngIf="slotStart.childElementCount === 0"
-          [ngClass]="{
-            'tw-w-0': variant !== 'tree',
-          }"
-        >
+      <div class="tw-relative tw-flex tw-items-center tw-h-full">
+        <ng-container *ngIf="route; then isAnchor; else isButton"></ng-container>
+
+        <!-- Main content of `NavItem` -->
+        <ng-template #anchorAndButtonContent>
+          <div
+            [title]="text"
+            class="tw-truncate tw-gap-2 tw-items-center tw-font-bold"
+            [ngClass]="{ 'tw-text-center': !open, 'tw-flex': open }"
+          >
+            <i
+              class="!tw-m-0 tw-w-4 bwi bwi-fw tw-text-alt2 {{ icon }}"
+              [attr.aria-hidden]="open"
+              [attr.aria-label]="text"
+            ></i>
+            @if (open) {
+              <span>{{ text }}</span>
+            }
+          </div>
+        </ng-template>
+
+        <!-- Show if a value was passed to `this.to` -->
+        <ng-template #isAnchor>
+          <!-- The `data-fvw` attribute passes focus to `this.focusVisibleWithin$` -->
+          <!-- The following `class` field should match the `#isButton` class field below -->
+          <a
+            class="tw-w-full tw-px-3 tw-block tw-truncate tw-border-none tw-bg-transparent tw-text-start !tw-text-alt2 hover:tw-text-alt2 hover:tw-no-underline focus:tw-outline-none"
+            data-fvw
+            [routerLink]="route"
+            [relativeTo]="relativeTo"
+            [attr.aria-label]="ariaLabel || text"
+            routerLinkActive
+            [routerLinkActiveOptions]="routerLinkActiveOptions"
+            [ariaCurrentWhenActive]="'page'"
+            (isActiveChange)="setIsActive($event)"
+            (click)="mainContentClicked.emit()"
+          >
+            <ng-container *ngTemplateOutlet="anchorAndButtonContent"></ng-container>
+          </a>
+        </ng-template>
+
+        <!-- Show if `this.to` is falsy -->
+        <ng-template #isButton>
+          <!-- Class field should match `#isAnchor` class field above -->
           <button
             type="button"
-            class="tw-invisible"
-            [bitIconButton]="'bwi-angle-down'"
-            size="small"
-            aria-hidden="true"
-          ></button>
-        </div>
-      </div>
-
-      <ng-container *ngIf="route; then isAnchor; else isButton"></ng-container>
-
-      <!-- Main content of `NavItem` -->
-      <ng-template #anchorAndButtonContent>
-        <div
-          [title]="text"
-          class="tw-truncate"
-          [ngClass]="[
-            variant === 'tree' ? 'tw-py-1' : 'tw-py-2',
-            data.open ? 'tw-pe-4' : 'tw-text-center',
-          ]"
-        >
-          <i
-            class="bwi bwi-fw tw-text-alt2 tw-mx-1 {{ icon }}"
-            [attr.aria-hidden]="data.open"
-            [attr.aria-label]="text"
-          ></i
-          ><span
-            *ngIf="data.open"
-            [ngClass]="showActiveStyles ? 'tw-font-bold' : 'tw-font-semibold'"
-            >{{ text }}</span
+            class="tw-w-full tw-px-3 tw-truncate tw-border-none tw-bg-transparent tw-text-start !tw-text-alt2 hover:tw-text-alt2 hover:tw-no-underline focus:tw-outline-none"
+            data-fvw
+            (click)="mainContentClicked.emit()"
           >
-        </div>
-      </ng-template>
+            <ng-container *ngTemplateOutlet="anchorAndButtonContent"></ng-container>
+          </button>
+        </ng-template>
 
-      <!-- Show if a value was passed to `this.to` -->
-      <ng-template #isAnchor>
-        <!-- The `data-fvw` attribute passes focus to `this.focusVisibleWithin$` -->
-        <!-- The following `class` field should match the `#isButton` class field below -->
-        <a
-          class="tw-w-full tw-truncate tw-border-none tw-bg-transparent tw-p-0 tw-text-start !tw-text-alt2 hover:tw-text-alt2 hover:tw-no-underline focus:tw-outline-none"
-          data-fvw
-          [routerLink]="route"
-          [relativeTo]="relativeTo"
-          [attr.aria-label]="ariaLabel || text"
-          routerLinkActive
-          [routerLinkActiveOptions]="routerLinkActiveOptions"
-          [ariaCurrentWhenActive]="'page'"
-          (isActiveChange)="setIsActive($event)"
-          (click)="mainContentClicked.emit()"
-        >
-          <ng-container *ngTemplateOutlet="anchorAndButtonContent"></ng-container>
-        </a>
-      </ng-template>
-
-      <!-- Show if `this.to` is falsy -->
-      <ng-template #isButton>
-        <!-- Class field should match `#isAnchor` class field above -->
-        <button
-          type="button"
-          class="tw-w-full tw-truncate tw-border-none tw-bg-transparent tw-p-0 tw-text-start !tw-text-alt2 hover:tw-text-alt2 hover:tw-no-underline focus:tw-outline-none"
-          data-fvw
-          (click)="mainContentClicked.emit()"
-        >
-          <ng-container *ngTemplateOutlet="anchorAndButtonContent"></ng-container>
-        </button>
-      </ng-template>
-
-      <div
-        *ngIf="data.open"
-        class="tw-flex -tw-ms-3 tw-pe-4 tw-gap-1 [&>*:focus-visible::before]:!tw-ring-text-alt2 [&>*:hover]:!tw-border-text-alt2 [&>*]:tw-text-alt2 empty:tw-hidden"
-        [ngClass]="[variant === 'tree' ? 'tw-py-1' : 'tw-py-2']"
-      >
-        <ng-content select="[slot=end]"></ng-content>
+        @if (open) {
+          <div
+            class="tw-flex tw-items-center tw-pe-1.5 tw-gap-1 [&>*:focus-visible::before]:!tw-ring-text-alt2 [&>*:hover]:!tw-border-text-alt2 [&>*]:tw-text-alt2 empty:tw-hidden"
+          >
+            <ng-content select="[slot=end]"></ng-content>
+          </div>
+        }
       </div>
     </div>
-  </div>
-</ng-container>
+  }
+</div>
diff --git a/libs/components/src/navigation/nav-logo.component.html b/libs/components/src/navigation/nav-logo.component.html
index a6169315333..40dbe8189d6 100644
--- a/libs/components/src/navigation/nav-logo.component.html
+++ b/libs/components/src/navigation/nav-logo.component.html
@@ -1,23 +1,19 @@
-@if (sideNavService.open) {
-  <div class="tw-sticky tw-top-0 tw-z-50">
-    <a
-      [routerLink]="route"
-      class="tw-px-5 tw-pb-5 tw-pt-7 tw-block tw-bg-background-alt3 tw-outline-none focus-visible:tw-ring focus-visible:tw-ring-inset focus-visible:tw-ring-text-alt2"
-      [attr.aria-label]="label"
-      [title]="label"
-      routerLinkActive
-      [ariaCurrentWhenActive]="'page'"
-    >
-      <bit-icon [icon]="openIcon"></bit-icon>
-    </a>
-  </div>
-}
-@if (!sideNavService.open) {
-  <bit-nav-item
-    class="tw-block tw-pt-7"
-    [hideActiveStyles]="true"
-    [route]="route"
-    [icon]="closedIcon"
-    [text]="label"
-  ></bit-nav-item>
-}
+<div
+  [ngClass]="{
+    'tw-sticky tw-top-0 tw-z-50 tw-pb-2': sideNavService.open,
+    'tw-pb-5': !sideNavService.open,
+  }"
+  class="tw-px-2 tw-pt-5"
+>
+  <a
+    [routerLink]="route"
+    class="tw-p-3 tw-block tw-rounded-md tw-bg-background-alt3 tw-outline-none focus-visible:tw-ring focus-visible:tw-ring-inset focus-visible:tw-ring-text-alt2 hover:tw-bg-hover-contrast [&_path]:tw-fill-text-alt2"
+    [ngClass]="{ '[&_svg]:tw-w-[1.687rem]': !sideNavService.open }"
+    [attr.aria-label]="label"
+    [title]="label"
+    routerLinkActive
+    [ariaCurrentWhenActive]="'page'"
+  >
+    <bit-icon [icon]="sideNavService.open ? openIcon : closedIcon"></bit-icon>
+  </a>
+</div>
diff --git a/libs/components/src/navigation/nav-logo.component.ts b/libs/components/src/navigation/nav-logo.component.ts
index 724406eeed5..8c40ea0dc79 100644
--- a/libs/components/src/navigation/nav-logo.component.ts
+++ b/libs/components/src/navigation/nav-logo.component.ts
@@ -1,23 +1,23 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
-
+import { CommonModule } from "@angular/common";
 import { Component, Input } from "@angular/core";
 import { RouterLinkActive, RouterLink } from "@angular/router";
 
 import { Icon } from "../icon";
 import { BitIconComponent } from "../icon/icon.component";
+import { BitwardenShield } from "../icon/logos";
 
-import { NavItemComponent } from "./nav-item.component";
 import { SideNavService } from "./side-nav.service";
 
 @Component({
   selector: "bit-nav-logo",
   templateUrl: "./nav-logo.component.html",
-  imports: [RouterLinkActive, RouterLink, BitIconComponent, NavItemComponent],
+  imports: [CommonModule, RouterLinkActive, RouterLink, BitIconComponent],
 })
 export class NavLogoComponent {
   /** Icon that is displayed when the side nav is closed */
-  @Input() closedIcon = "bwi-shield";
+  @Input() closedIcon = BitwardenShield;
 
   /** Icon that is displayed when the side nav is open */
   @Input({ required: true }) openIcon: Icon;
diff --git a/libs/components/src/navigation/side-nav.component.html b/libs/components/src/navigation/side-nav.component.html
index 3b77c981be4..124daa776d0 100644
--- a/libs/components/src/navigation/side-nav.component.html
+++ b/libs/components/src/navigation/side-nav.component.html
@@ -14,6 +14,7 @@
         '--color-text-alt2': 'var(--color-text-main)',
         '--color-background-alt3': 'var(--color-secondary-100)',
         '--color-background-alt4': 'var(--color-secondary-300)',
+        '--color-hover-contrast': 'var(--color-hover-default)',
       }
     "
     [cdkTrapFocus]="data.isOverlay"
diff --git a/libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts b/libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts
index d318e1b5f0e..97a782b7302 100644
--- a/libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts
+++ b/libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts
@@ -81,16 +81,18 @@ export const Default: Story = {
       template: /* HTML */ `<bit-layout>
         <bit-side-nav>
           <bit-nav-group text="Password Managers" icon="bwi-collection-shared" [open]="true">
-            <bit-nav-group
-              text="Favorites"
-              icon="bwi-collection-shared"
-              variant="tree"
-              [open]="true"
-            >
-              <bit-nav-item text="Bitwarden" route="bitwarden"></bit-nav-item>
-              <bit-nav-divider></bit-nav-divider>
-            </bit-nav-group>
-            <bit-nav-item text="Virtual Scroll" route="virtual-scroll"></bit-nav-item>
+            <bit-nav-item text="Child A" route="a" icon="bwi-filter"></bit-nav-item>
+            <bit-nav-item text="Child B" route="b"></bit-nav-item>
+            <bit-nav-item
+              text="Virtual Scroll"
+              route="virtual-scroll"
+              icon="bwi-filter"
+            ></bit-nav-item>
+          </bit-nav-group>
+          <bit-nav-group text="Favorites" icon="bwi-filter">
+            <bit-nav-item text="Favorites Child A" icon="bwi-filter"></bit-nav-item>
+            <bit-nav-item text="Favorites Child B"></bit-nav-item>
+            <bit-nav-item text="Favorites Child C" icon="bwi-filter"></bit-nav-item>
           </bit-nav-group>
         </bit-side-nav>
         <router-outlet></router-outlet>
diff --git a/libs/components/src/tw-theme.css b/libs/components/src/tw-theme.css
index 078357491e5..eb5bb469202 100644
--- a/libs/components/src/tw-theme.css
+++ b/libs/components/src/tw-theme.css
@@ -13,7 +13,7 @@
   --color-background: 255 255 255;
   --color-background-alt: 243 246 249;
   --color-background-alt2: 23 92 219;
-  --color-background-alt3: 26 65 172;
+  --color-background-alt3: 22 55 146;
   --color-background-alt4: 2 15 102;
 
   --color-primary-100: 219 229 246;
@@ -56,6 +56,9 @@
   --color-text-alt2: 255 255 255;
   --color-text-code: 192 17 118;
 
+  --color-hover-default: rgb(26 65 172 / 0.1);
+  --color-hover-contrast: rgb(219 229 246 / 0.15);
+
   --color-marketing-logo: 23 93 220;
 
   --tw-ring-offset-color: #ffffff;
@@ -124,6 +127,9 @@
   --color-text-alt2: 255 255 255;
   --color-text-code: 255 143 208;
 
+  --color-hover-default: rgb(170 195 239 / 0.1);
+  --color-hover-contrast: rgb(26 39 78 / 0.15);
+
   --color-marketing-logo: 255 255 255;
 
   --tw-ring-offset-color: #1f242e;
diff --git a/libs/components/tailwind.config.base.js b/libs/components/tailwind.config.base.js
index c38515cf775..829c812a954 100644
--- a/libs/components/tailwind.config.base.js
+++ b/libs/components/tailwind.config.base.js
@@ -83,6 +83,10 @@ module.exports = {
         alt3: rgba("--color-background-alt3"),
         alt4: rgba("--color-background-alt4"),
       },
+      hover: {
+        default: "var(--color-hover-default)",
+        contrast: "var(--color-hover-contrast)",
+      },
       "marketing-logo": rgba("--color-marketing-logo"),
       illustration: {
         outline: rgba("--color-illustration-outline"),

From c7fc9b88fccc15b93d99f03c60444ab1c7e79204 Mon Sep 17 00:00:00 2001
From: Jason Ng <jng@bitwarden.com>
Date: Thu, 3 Jul 2025 17:35:50 -0400
Subject: [PATCH 7/7] [PM-23197] update cipherService to return decCiphers
 (#15433)

* update cipherService to return decCiphers, update input to use signal, refactor observable, update spec
---
 .../src/vault/services/cipher.service.ts      |  2 +-
 .../new-item-nudge.component.html             |  2 +-
 .../new-item-nudge.component.spec.ts          | 59 ++++++++++---------
 .../new-item-nudge.component.ts               | 53 ++++++++---------
 4 files changed, 57 insertions(+), 59 deletions(-)

diff --git a/libs/common/src/vault/services/cipher.service.ts b/libs/common/src/vault/services/cipher.service.ts
index b4f79b2467e..a1727fd7a1d 100644
--- a/libs/common/src/vault/services/cipher.service.ts
+++ b/libs/common/src/vault/services/cipher.service.ts
@@ -383,7 +383,7 @@ export class CipherService implements CipherServiceAbstraction {
     const decCiphers = await this.getDecryptedCiphers(userId);
     if (decCiphers != null && decCiphers.length !== 0) {
       await this.reindexCiphers(userId);
-      return await this.getDecryptedCiphers(userId);
+      return decCiphers;
     }
 
     const decrypted = await this.decryptCiphers(await this.getAll(userId), userId);
diff --git a/libs/vault/src/cipher-form/components/new-item-nudge/new-item-nudge.component.html b/libs/vault/src/cipher-form/components/new-item-nudge/new-item-nudge.component.html
index 5cd1246fd36..58dc181f826 100644
--- a/libs/vault/src/cipher-form/components/new-item-nudge/new-item-nudge.component.html
+++ b/libs/vault/src/cipher-form/components/new-item-nudge/new-item-nudge.component.html
@@ -1,4 +1,4 @@
-<ng-container *ngIf="showNewItemSpotlight">
+<ng-container *ngIf="showNewItemSpotlight$ | async">
   <bit-spotlight
     [title]="nudgeTitle"
     [subtitle]="nudgeBody"
diff --git a/libs/vault/src/cipher-form/components/new-item-nudge/new-item-nudge.component.spec.ts b/libs/vault/src/cipher-form/components/new-item-nudge/new-item-nudge.component.spec.ts
index 0cc23456b4c..b3c8172a7a3 100644
--- a/libs/vault/src/cipher-form/components/new-item-nudge/new-item-nudge.component.spec.ts
+++ b/libs/vault/src/cipher-form/components/new-item-nudge/new-item-nudge.component.spec.ts
@@ -1,27 +1,30 @@
 import { CommonModule } from "@angular/common";
+import { ComponentRef } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { mock, MockProxy } from "jest-mock-extended";
 import { of } from "rxjs";
 
 import { NudgesService, NudgeType } from "@bitwarden/angular/vault";
-import { AccountService, Account } from "@bitwarden/common/auth/abstractions/account.service";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { UserId } from "@bitwarden/common/types/guid";
 import { CipherType } from "@bitwarden/sdk-internal";
 
+import { FakeAccountService, mockAccountServiceWith } from "../../../../../common/spec";
+
 import { NewItemNudgeComponent } from "./new-item-nudge.component";
 
 describe("NewItemNudgeComponent", () => {
   let component: NewItemNudgeComponent;
+  let componentRef: ComponentRef<NewItemNudgeComponent>;
   let fixture: ComponentFixture<NewItemNudgeComponent>;
 
   let i18nService: MockProxy<I18nService>;
-  let accountService: MockProxy<AccountService>;
   let nudgesService: MockProxy<NudgesService>;
+  const accountService: FakeAccountService = mockAccountServiceWith("test-user-id" as UserId);
 
   beforeEach(async () => {
     i18nService = mock<I18nService>({ t: (key: string) => key });
-    accountService = mock<AccountService>();
     nudgesService = mock<NudgesService>();
 
     await TestBed.configureTestingModule({
@@ -37,7 +40,8 @@ describe("NewItemNudgeComponent", () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(NewItemNudgeComponent);
     component = fixture.componentInstance;
-    component.configType = null; // Set to null for initial state
+    componentRef = fixture.componentRef;
+    componentRef.setInput("configType", null); // Set a default type for testing
     fixture.detectChanges();
   });
 
@@ -46,13 +50,11 @@ describe("NewItemNudgeComponent", () => {
   });
 
   it("should set nudge title and body for CipherType.Login type", async () => {
-    component.configType = CipherType.Login;
-    accountService.activeAccount$ = of({ id: "test-user-id" as UserId } as Account);
-    jest.spyOn(component, "checkHasSpotlightDismissed").mockResolvedValue(true);
-
-    await component.ngOnInit();
-
-    expect(component.showNewItemSpotlight).toBe(true);
+    componentRef.setInput("configType", CipherType.Login);
+    fixture.detectChanges();
+    component.showNewItemSpotlight$.subscribe((value) => {
+      expect(value).toEqual(true);
+    });
     expect(component.nudgeTitle).toBe("newLoginNudgeTitle");
     expect(component.nudgeBody).toBe(
       "newLoginNudgeBodyOne <strong>newLoginNudgeBodyBold</strong> newLoginNudgeBodyTwo",
@@ -61,39 +63,38 @@ describe("NewItemNudgeComponent", () => {
   });
 
   it("should set nudge title and body for CipherType.Card type", async () => {
-    component.configType = CipherType.Card;
-    accountService.activeAccount$ = of({ id: "test-user-id" as UserId } as Account);
-    jest.spyOn(component, "checkHasSpotlightDismissed").mockResolvedValue(true);
-
-    await component.ngOnInit();
-
-    expect(component.showNewItemSpotlight).toBe(true);
+    componentRef.setInput("configType", CipherType.Card);
+    fixture.detectChanges();
+    component.showNewItemSpotlight$.subscribe((value) => {
+      expect(value).toEqual(true);
+    });
     expect(component.nudgeTitle).toBe("newCardNudgeTitle");
     expect(component.nudgeBody).toBe("newCardNudgeBody");
     expect(component.dismissalNudgeType).toBe(NudgeType.NewCardItemStatus);
   });
 
   it("should not show anything if spotlight has been dismissed", async () => {
-    component.configType = CipherType.Identity;
-    accountService.activeAccount$ = of({ id: "test-user-id" as UserId } as Account);
-    jest.spyOn(component, "checkHasSpotlightDismissed").mockResolvedValue(false);
-
-    await component.ngOnInit();
-
-    expect(component.showNewItemSpotlight).toBe(false);
+    componentRef.setInput("configType", CipherType.Identity);
+    fixture.detectChanges();
+    component.showNewItemSpotlight$.subscribe((value) => {
+      expect(value).toEqual(false);
+    });
     expect(component.dismissalNudgeType).toBe(NudgeType.NewIdentityItemStatus);
   });
 
   it("should set showNewItemSpotlight to false when user dismisses spotlight", async () => {
-    component.showNewItemSpotlight = true;
+    component.showNewItemSpotlight$ = of(true);
     component.dismissalNudgeType = NudgeType.NewLoginItemStatus;
-    component.activeUserId = "test-user-id" as UserId;
+    const activeUserId = "test-user-id" as UserId;
+    component.activeUserId$ = of(activeUserId);
 
     const dismissSpy = jest.spyOn(nudgesService, "dismissNudge").mockResolvedValue();
 
     await component.dismissNewItemSpotlight();
 
-    expect(component.showNewItemSpotlight).toBe(false);
-    expect(dismissSpy).toHaveBeenCalledWith(NudgeType.NewLoginItemStatus, component.activeUserId);
+    component.showNewItemSpotlight$.subscribe((value) => {
+      expect(value).toEqual(false);
+    });
+    expect(dismissSpy).toHaveBeenCalledWith(NudgeType.NewLoginItemStatus, activeUserId);
   });
 });
diff --git a/libs/vault/src/cipher-form/components/new-item-nudge/new-item-nudge.component.ts b/libs/vault/src/cipher-form/components/new-item-nudge/new-item-nudge.component.ts
index 79defc271cf..eccf8f65715 100644
--- a/libs/vault/src/cipher-form/components/new-item-nudge/new-item-nudge.component.ts
+++ b/libs/vault/src/cipher-form/components/new-item-nudge/new-item-nudge.component.ts
@@ -1,6 +1,7 @@
-import { NgIf } from "@angular/common";
-import { Component, Input, OnInit } from "@angular/core";
-import { firstValueFrom } from "rxjs";
+import { AsyncPipe, NgIf } from "@angular/common";
+import { Component, input } from "@angular/core";
+import { toObservable } from "@angular/core/rxjs-interop";
+import { combineLatest, firstValueFrom, map, of, switchMap } from "rxjs";
 
 import { NudgesService, NudgeType } from "@bitwarden/angular/vault";
 import { SpotlightComponent } from "@bitwarden/angular/vault/components/spotlight/spotlight.component";
@@ -13,12 +14,17 @@ import { CipherType } from "@bitwarden/sdk-internal";
 @Component({
   selector: "vault-new-item-nudge",
   templateUrl: "./new-item-nudge.component.html",
-  imports: [NgIf, SpotlightComponent],
+  imports: [NgIf, SpotlightComponent, AsyncPipe],
 })
-export class NewItemNudgeComponent implements OnInit {
-  @Input({ required: true }) configType: CipherType | null = null;
-  activeUserId: UserId | null = null;
-  showNewItemSpotlight: boolean = false;
+export class NewItemNudgeComponent {
+  configType = input.required<CipherType | null>();
+  activeUserId$ = this.accountService.activeAccount$.pipe(getUserId);
+  showNewItemSpotlight$ = combineLatest([
+    this.activeUserId$,
+    toObservable(this.configType).pipe(map((cipherType) => this.mapToNudgeType(cipherType))),
+  ]).pipe(
+    switchMap(([userId, nudgeType]) => this.nudgesService.showNudgeSpotlight$(nudgeType, userId)),
+  );
   nudgeTitle: string = "";
   nudgeBody: string = "";
   dismissalNudgeType: NudgeType | null = null;
@@ -29,10 +35,8 @@ export class NewItemNudgeComponent implements OnInit {
     private nudgesService: NudgesService,
   ) {}
 
-  async ngOnInit() {
-    this.activeUserId = await firstValueFrom(getUserId(this.accountService.activeAccount$));
-
-    switch (this.configType) {
+  mapToNudgeType(cipherType: CipherType | null): NudgeType {
+    switch (cipherType) {
       case CipherType.Login: {
         const nudgeBodyOne = this.i18nService.t("newLoginNudgeBodyOne");
         const nudgeBodyBold = this.i18nService.t("newLoginNudgeBodyBold");
@@ -40,25 +44,25 @@ export class NewItemNudgeComponent implements OnInit {
         this.dismissalNudgeType = NudgeType.NewLoginItemStatus;
         this.nudgeTitle = this.i18nService.t("newLoginNudgeTitle");
         this.nudgeBody = `${nudgeBodyOne} <strong>${nudgeBodyBold}</strong> ${nudgeBodyTwo}`;
-        break;
+        return NudgeType.NewLoginItemStatus;
       }
       case CipherType.Card:
         this.dismissalNudgeType = NudgeType.NewCardItemStatus;
         this.nudgeTitle = this.i18nService.t("newCardNudgeTitle");
         this.nudgeBody = this.i18nService.t("newCardNudgeBody");
-        break;
+        return NudgeType.NewCardItemStatus;
 
       case CipherType.Identity:
         this.dismissalNudgeType = NudgeType.NewIdentityItemStatus;
         this.nudgeTitle = this.i18nService.t("newIdentityNudgeTitle");
         this.nudgeBody = this.i18nService.t("newIdentityNudgeBody");
-        break;
+        return NudgeType.NewIdentityItemStatus;
 
       case CipherType.SecureNote:
         this.dismissalNudgeType = NudgeType.NewNoteItemStatus;
         this.nudgeTitle = this.i18nService.t("newNoteNudgeTitle");
         this.nudgeBody = this.i18nService.t("newNoteNudgeBody");
-        break;
+        return NudgeType.NewNoteItemStatus;
 
       case CipherType.SshKey: {
         const sshPartOne = this.i18nService.t("newSshNudgeBodyOne");
@@ -67,25 +71,18 @@ export class NewItemNudgeComponent implements OnInit {
         this.dismissalNudgeType = NudgeType.NewSshItemStatus;
         this.nudgeTitle = this.i18nService.t("newSshNudgeTitle");
         this.nudgeBody = `${sshPartOne} <a href="https://bitwarden.com/help/ssh-agent" class="tw-text-primary-600 tw-font-bold" target="_blank">${sshPartTwo}</a>`;
-        break;
+        return NudgeType.NewSshItemStatus;
       }
       default:
         throw new Error("Unsupported cipher type");
     }
-    this.showNewItemSpotlight = await this.checkHasSpotlightDismissed(
-      this.dismissalNudgeType as NudgeType,
-      this.activeUserId,
-    );
   }
 
   async dismissNewItemSpotlight() {
-    if (this.dismissalNudgeType && this.activeUserId) {
-      await this.nudgesService.dismissNudge(this.dismissalNudgeType, this.activeUserId as UserId);
-      this.showNewItemSpotlight = false;
+    const activeUserId = await firstValueFrom(this.activeUserId$);
+    if (this.dismissalNudgeType && activeUserId) {
+      await this.nudgesService.dismissNudge(this.dismissalNudgeType, activeUserId as UserId);
+      this.showNewItemSpotlight$ = of(false);
     }
   }
-
-  async checkHasSpotlightDismissed(nudgeType: NudgeType, userId: UserId): Promise<boolean> {
-    return await firstValueFrom(this.nudgesService.showNudgeSpotlight$(nudgeType, userId));
-  }
 }