From ecac9b1a947c27e1e08f894affc8cc27ecd8e051 Mon Sep 17 00:00:00 2001
From: Bryan Cunningham <bryan.cunningham@me.com>
Date: Wed, 8 Oct 2025 11:56:34 -0400
Subject: [PATCH] WIP

---
 .../chip-select/chip-select.component.html    |   2 +-
 .../chip-toggle/chip-toggle.component.html    |   0
 .../src/chip-toggle/chip-toggle.component.ts  |   0
 libs/components/src/chip-toggle/index.ts      |   0
 libs/components/src/chip/chip.component.css   |  93 ++++++++
 libs/components/src/chip/chip.component.html  |  38 +++
 libs/components/src/chip/chip.component.ts    |  15 ++
 libs/components/src/chip/chip.stories.ts      | 225 ++++++++++++++++++
 libs/components/src/tw-theme.css              |   1 +
 9 files changed, 373 insertions(+), 1 deletion(-)
 create mode 100644 libs/components/src/chip-toggle/chip-toggle.component.html
 create mode 100644 libs/components/src/chip-toggle/chip-toggle.component.ts
 create mode 100644 libs/components/src/chip-toggle/index.ts
 create mode 100644 libs/components/src/chip/chip.component.css
 create mode 100644 libs/components/src/chip/chip.component.html
 create mode 100644 libs/components/src/chip/chip.component.ts
 create mode 100644 libs/components/src/chip/chip.stories.ts

diff --git a/libs/components/src/chip-select/chip-select.component.html b/libs/components/src/chip-select/chip-select.component.html
index d43e09e8338..a386f7f81d9 100644
--- a/libs/components/src/chip-select/chip-select.component.html
+++ b/libs/components/src/chip-select/chip-select.component.html
@@ -1,6 +1,6 @@
 <div
   bitTypography="body2"
-  class="tw-inline-flex tw-items-center tw-rounded-full tw-w-full tw-border-solid tw-border tw-gap-1.5 tw-group/chip-select"
+  class="tw-inline-flex tw-items-center tw-rounded-full tw-w-full tw-border-solid tw-border tw-gap-1.5 tw-group/chip-select [&:has(button[aria-expanded]):focus]:tw-border-secondary-700"
   [ngClass]="{
     'tw-bg-text-muted hover:tw-bg-secondary-700 tw-text-contrast hover:!tw-border-secondary-700':
       selectedOption && !disabled,
diff --git a/libs/components/src/chip-toggle/chip-toggle.component.html b/libs/components/src/chip-toggle/chip-toggle.component.html
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/libs/components/src/chip-toggle/chip-toggle.component.ts b/libs/components/src/chip-toggle/chip-toggle.component.ts
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/libs/components/src/chip-toggle/index.ts b/libs/components/src/chip-toggle/index.ts
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/libs/components/src/chip/chip.component.css b/libs/components/src/chip/chip.component.css
new file mode 100644
index 00000000000..d6cfe7fa0a3
--- /dev/null
+++ b/libs/components/src/chip/chip.component.css
@@ -0,0 +1,93 @@
+.bit-chip {
+  border-radius: 9999px;
+  border: 1px solid rgb(var(--color-text-muted));
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem; /* 6px */
+  padding: 0.25rem 0.5rem; /* 4px 8px */
+  width: fit-content;
+  color: rgb(var(--color-text-muted));
+  font-size: 0.875rem; /* 14px */
+  line-height: 1.25rem; /* 20px */
+  transition-property: background-color, border-color;
+  transition-duration: 100ms;
+
+  &[data-is-interactive="true"][data-is-disabled="false"] {
+    &:hover {
+      background-color: rgb(var(--color-secondary-100));
+      color: rgb(var(--color-secondary-700));
+      border-color: rgb(var(--color-secondary-700));
+    }
+
+    &[data-is-selected="true"] {
+      &:hover {
+        background-color: rgb(var(--color-secondary-700));
+        border-color: rgb(var(--color-secondary-700));
+        color: rgb(var(--color-text-contrast));
+      }
+    }
+
+    &[data-is-disabled="true"] {
+      &:hover {
+        background-color: rgb(var(--color-secondary-700));
+        border-color: rgb(var(--color-secondary-700));
+      }
+    }
+  }
+
+  &[data-is-selected="true"] {
+    background-color: rgb(var(--color-text-muted));
+    color: rgb(var(--color-text-contrast));
+  }
+
+  &[data-is-disabled="true"] {
+    background-color: rgb(var(--color-secondary-300));
+    color: rgb(var(--color-text-muted));
+    border-color: transparent;
+  }
+}
+
+.bit-chip-dismiss-button {
+  --hover-bg-color: rgb(var(--color-secondary-100));
+  --focus-ring-color: rgb(var(--color-text-muted));
+
+  position: relative;
+  display: flex;
+  align-self: center;
+  justify-content: center;
+  background-color: transparent;
+  border: 1px solid transparent;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  border-radius: 9999px;
+  width: 1.5rem; /* 24px */
+  height: 1.5rem; /* 24px */
+
+  .bit-chip[data-is-selected="true"] & {
+    --hover-bg-color: var(--color-hover-contrast);
+    --focus-ring-color: var(--tw-ring-offset-color);
+  }
+
+  &:hover {
+    background-color: var(--hover-bg-color);
+  }
+
+  &:focus,
+  &:focus-visible {
+    background-color: rgb(var(--color-hover-contrast));
+    box-shadow:
+      0px 0px 0px 0px var(--focus-ring-color),
+      0px 0px 0px 2px var(--focus-ring-color),
+      0px 0px transparent;
+  }
+
+  i {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: inherit;
+  }
+
+  /* tw-bg-transparent hover:tw-bg-hover-contrast tw-outline-none tw-rounded-full tw-py-0.5 tw-px-1 tw-me-1 tw-text-[color:inherit] tw-text-[length:inherit] tw-border-solid tw-border tw-border-transparent tw-flex tw-items-center tw-justify-center focus-visible:tw-ring-2 tw-ring-text-contrast hover:disabled:tw-bg-transparent */
+}
diff --git a/libs/components/src/chip/chip.component.html b/libs/components/src/chip/chip.component.html
new file mode 100644
index 00000000000..1f63e28d750
--- /dev/null
+++ b/libs/components/src/chip/chip.component.html
@@ -0,0 +1,38 @@
+<!-- <div class="bit-chip"
+  class="tw-inline-flex tw-items-center tw-rounded-full tw-w-full tw-border-solid tw-border tw-gap-1.5 tw-group/chip-select [&:has(button[aria-expanded=])]:focus:tw-border-secondary-700"
+  [ngClass]="{
+    'tw-bg-text-muted hover:tw-bg-secondary-700 tw-text-contrast hover:!tw-border-secondary-700':
+      isSelected && !isDisabled,
+    'tw-bg-transparent hover:tw-border-secondary-700 !tw-text-muted hover:tw-bg-secondary-100':
+      !isSelected && !isDisabled,
+    'tw-bg-secondary-300 tw-text-muted tw-border-transparent': isDisabled,
+    'tw-border-text-muted': !isDisabled,
+    'tw-ring-2 tw-ring-primary-600 tw-ring-offset-1': focusVisibleWithin(),
+  }">
+    <ng-content select="chip-select-trigger"></ng-content>
+</div>
+
+  <ng-content select="chip-select-menu"></ng-content> -->
+
+<div
+  class="bit-chip"
+  bitTypography="body2"
+  [attr.data-is-interactive]="isInteractive()"
+  [attr.data-is-disabled]="isDisabled()"
+  [attr.data-is-dismissible]="isDismissible()"
+  [attr.data-is-selected]="isSelected()"
+>
+  Chip component
+
+  @if (isDismissible()) {
+    <button
+      type="button"
+      [attr.aria-label]="'removeItem' | i18n: label"
+      [disabled]="disabled"
+      class="bit-chip-dismiss-button"
+      (click)="clear()"
+    >
+      <i class="bwi bwi-close tw-text-xs" aria-hidden="true"></i>
+    </button>
+  }
+</div>
diff --git a/libs/components/src/chip/chip.component.ts b/libs/components/src/chip/chip.component.ts
new file mode 100644
index 00000000000..0fb9acf2094
--- /dev/null
+++ b/libs/components/src/chip/chip.component.ts
@@ -0,0 +1,15 @@
+import { input, Component, booleanAttribute } from "@angular/core";
+
+import { SharedModule } from "../shared";
+
+@Component({
+  selector: "bit-chip",
+  templateUrl: "chip.component.html",
+  imports: [SharedModule],
+})
+export class ChipComponent {
+  protected readonly isInteractive = input<boolean>(booleanAttribute(false));
+  protected readonly isDisabled = input<boolean>(booleanAttribute(false));
+  protected readonly isDismissible = input<boolean>(booleanAttribute(false));
+  protected readonly isSelected = input<boolean>(booleanAttribute(false));
+}
diff --git a/libs/components/src/chip/chip.stories.ts b/libs/components/src/chip/chip.stories.ts
new file mode 100644
index 00000000000..9119cff17a8
--- /dev/null
+++ b/libs/components/src/chip/chip.stories.ts
@@ -0,0 +1,225 @@
+import { FormsModule } from "@angular/forms";
+import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
+
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+
+import { MenuModule } from "../menu";
+import { I18nMockService } from "../utils/i18n-mock.service";
+
+import { ChipComponent } from "./chip.component";
+
+import { formatArgsForCodeSnippet } from ".storybook/format-args-for-code-snippet";
+
+export default {
+  title: "Component Library/Chip",
+  component: ChipComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [MenuModule, FormsModule],
+      providers: [
+        {
+          provide: I18nService,
+          useFactory: () => {
+            return new I18nMockService({
+              viewItemsIn: (name) => `View items in ${name}`,
+              back: "Back",
+              backTo: (name) => `Back to ${name}`,
+              removeItem: (name) => `Remove ${name}`,
+            });
+          },
+        },
+      ],
+    }),
+  ],
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=16329-29548&t=b5tDKylm5sWm2yKo-4",
+    },
+  },
+  args: {
+    isSelected: false,
+    isDisabled: false,
+    isDismissible: false,
+    isInteractive: false,
+  },
+} as Meta;
+
+type Story = StoryObj<ChipComponent>;
+
+export const Default: Story = {
+  render: (args) => ({
+    props: args,
+    template: /* html */ `
+      <bit-chip ${formatArgsForCodeSnippet(args)}></bit-chip>
+    `,
+  }),
+};
+
+// export const MenuOpen: Story = {
+//   render: (args) => ({
+//     props: {
+//       ...args,
+//     },
+//     template: /* html */ `
+//       <bit-chip-select
+//         placeholderText="Folder"
+//         placeholderIcon="bwi-folder"
+//         [options]="options"
+//         [ngModel]="value"
+//       ></bit-chip-select>
+//     `,
+//   }),
+//   args: {
+//     options: [
+//       {
+//         label: "Foo",
+//         value: "foo",
+//         icon: "bwi-folder",
+//       },
+//       {
+//         label: "Bar",
+//         value: "bar",
+//         icon: "bwi-exclamation-triangle tw-text-danger",
+//       },
+//       {
+//         label: "Baz",
+//         value: "baz",
+//         disabled: true,
+//       },
+//     ],
+//   },
+//   play: async (context) => {
+//     const canvas = context.canvasElement;
+//     const buttons = getAllByRole(canvas, "button");
+//     await userEvent.click(buttons[0]);
+//   },
+// };
+
+// export const FullWidth: Story = {
+//   render: (args) => ({
+//     props: {
+//       ...args,
+//     },
+//     template: /* html */ `
+//     <div class="tw-w-40">
+//       <bit-chip-select
+//         placeholderText="Folder"
+//         placeholderIcon="bwi-folder"
+//         [options]="options"
+//         [ngModel]="value"
+//         fullWidth
+//       ></bit-chip-select>
+//     </div>
+//     `,
+//   }),
+//   args: {
+//     options: [
+//       {
+//         label: "Foo",
+//         value: "foo",
+//         icon: "bwi-folder",
+//       },
+//       {
+//         label: "Bar",
+//         value: "bar",
+//         icon: "bwi-exclamation-triangle tw-text-danger",
+//       },
+//       {
+//         label: "Baz",
+//         value: "baz",
+//         disabled: true,
+//       },
+//     ],
+//   },
+// };
+
+// export const NestedOptions: Story = {
+//   ...Default,
+//   args: {
+//     options: [
+//       {
+//         label: "Foo",
+//         value: "foo",
+//         icon: "bwi-folder",
+//         children: [
+//           {
+//             label: "Foo1 very long name of folder but even longer than you thought",
+//             value: "foo1",
+//             icon: "bwi-folder",
+//             children: [
+//               {
+//                 label: "Foo2",
+//                 value: "foo2",
+//                 icon: "bwi-folder",
+//                 children: [
+//                   {
+//                     label: "Foo3",
+//                     value: "foo3",
+//                   },
+//                 ],
+//               },
+//             ],
+//           },
+//         ],
+//       },
+//       {
+//         label: "Bar",
+//         value: "bar",
+//         icon: "bwi-folder",
+//       },
+//       {
+//         label: "Baz",
+//         value: "baz",
+//         icon: "bwi-folder",
+//       },
+//     ],
+//     value: "foo1",
+//   },
+// };
+
+// export const TextOverflow: Story = {
+//   ...Default,
+//   args: {
+//     options: [
+//       {
+//         label: "Fooooooooooooooooooooooooooooooooooooooooooooo",
+//         value: "foo",
+//       },
+//     ],
+//     value: "foo",
+//   },
+// };
+
+// export const Disabled: Story = {
+//   render: (args) => ({
+//     props: {
+//       ...args,
+//     },
+//     template: /* html */ `
+//       <bit-chip-select
+//         placeholderText="Folder"
+//         placeholderIcon="bwi-folder"
+//         [options]="options"
+//         disabled
+//       ></bit-chip-select>
+//       <bit-chip-select
+//         placeholderText="Folder"
+//         placeholderIcon="bwi-folder"
+//         [options]="options"
+//         [ngModel]="value"
+//         disabled
+//       ></bit-chip-select>
+//     `,
+//   }),
+//   args: {
+//     options: [
+//       {
+//         label: "Foo",
+//         value: "foo",
+//         icon: "bwi-folder",
+//       },
+//     ],
+//     value: "foo",
+//   },
+// };
diff --git a/libs/components/src/tw-theme.css b/libs/components/src/tw-theme.css
index 1e0a6f438f0..b62f1549743 100644
--- a/libs/components/src/tw-theme.css
+++ b/libs/components/src/tw-theme.css
@@ -2,6 +2,7 @@
 @import "@angular/cdk/a11y-prebuilt.css";
 @import "@angular/cdk/text-field-prebuilt.css";
 @import "./reset.css";
+@import "./chip/chip.component.css";
 @import "./popover/popover.component.css";
 @import "./toast/toast.tokens.css";
 @import "./toast/toastr.css";