From beb4dd81ceb127698c9271cd76fd885175f57cfb Mon Sep 17 00:00:00 2001
From: Bryan Cunningham <bryan.cunningham@me.com>
Date: Mon, 13 Oct 2025 14:20:08 -0400
Subject: [PATCH] WIP

---
 .../chip-select/chip-select.component.html    |  18 +-
 libs/components/src/chip/chip.component.css   |  61 +++--
 libs/components/src/chip/chip.component.html  |  38 ---
 libs/components/src/chip/chip.component.ts    |  15 --
 libs/components/src/chip/chip.stories.ts      | 225 ------------------
 5 files changed, 43 insertions(+), 314 deletions(-)
 delete mode 100644 libs/components/src/chip/chip.component.html
 delete mode 100644 libs/components/src/chip/chip.component.ts
 delete 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 a386f7f81d9..1c34384e41e 100644
--- a/libs/components/src/chip-select/chip-select.component.html
+++ b/libs/components/src/chip-select/chip-select.component.html
@@ -1,20 +1,14 @@
 <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 [&: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,
-    'tw-bg-transparent hover:tw-border-secondary-700 !tw-text-muted hover:tw-bg-secondary-100':
-      !selectedOption && !disabled,
-    'tw-bg-secondary-300 tw-text-muted tw-border-transparent': disabled,
-    'tw-border-text-muted': !disabled,
-    'tw-ring-2 tw-ring-primary-600 tw-ring-offset-1': focusVisibleWithin(),
-  }"
+  class="bit-chip"
+  [attr.data-is-disabled]="disabled"
+  [attr.data-is-selected]="!!selectedOption"
+  [attr.data-is-full-width]="fullWidth()"
 >
   <!-- Primary button -->
   <button
     type="button"
-    class="tw-inline-flex tw-gap-1.5 tw-items-center tw-justify-between tw-bg-transparent hover:tw-bg-transparent tw-border-none tw-outline-none tw-w-full tw-py-1 tw-ps-3 last:tw-pe-3 [&:not(:last-child)]:tw-pe-0 tw-truncate tw-text-[color:inherit] tw-text-[length:inherit]"
+    class="tw-inline-flex tw-gap-1.5 tw-items-center tw-justify-between tw-bg-transparent hover:tw-bg-transparent tw-border-none tw-outline-none tw-w-full tw-truncate tw-text-[color:inherit] tw-text-[length:inherit]"
     data-fvw-target
     [ngClass]="{
       'tw-cursor-not-allowed': disabled,
@@ -46,7 +40,7 @@
       type="button"
       [attr.aria-label]="'removeItem' | i18n: label"
       [disabled]="disabled"
-      class="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"
+      class="bit-chip-dismiss-button"
       [ngClass]="{
         'tw-cursor-not-allowed': disabled,
       }"
diff --git a/libs/components/src/chip/chip.component.css b/libs/components/src/chip/chip.component.css
index d6cfe7fa0a3..76c48be308c 100644
--- a/libs/components/src/chip/chip.component.css
+++ b/libs/components/src/chip/chip.component.css
@@ -1,23 +1,19 @@
 .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 */
+  max-width: 13rem; /* 208px */
   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-full-width="true"] {
+    width: 100%;
+  }
+
+  &:has(button:hover:not(.bit-chip-dismiss-button))[data-is-disabled="false"] {
+    background-color: rgb(var(--color-secondary-100));
+    color: rgb(var(--color-secondary-700));
+    border-color: rgb(var(--color-secondary-700));
+    cursor: pointer;
 
     &[data-is-selected="true"] {
       &:hover {
@@ -35,6 +31,14 @@
     }
   }
 
+  &:has(*:focus:not(.bit-chip-dismiss-button))[data-is-disabled="false"] {
+    @apply tw-ring-2 tw-ring-primary-600 tw-ring-offset-1;
+
+    button {
+      outline: none;
+    }
+  }
+
   &[data-is-selected="true"] {
     background-color: rgb(var(--color-text-muted));
     color: rgb(var(--color-text-contrast));
@@ -47,6 +51,17 @@
   }
 }
 
+.bit-chip-content {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.5rem;
+  width: fit-content;
+  color: rgb(var(--color-text-muted));
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
 .bit-chip-dismiss-button {
   --hover-bg-color: rgb(var(--color-secondary-100));
   --focus-ring-color: rgb(var(--color-text-muted));
@@ -60,12 +75,16 @@
   outline: 2px solid transparent;
   outline-offset: 2px;
   border-radius: 9999px;
-  width: 1.5rem; /* 24px */
-  height: 1.5rem; /* 24px */
+  width: 1.25rem; /* 20px */
+  height: 1.25rem; /* 20px */
+  min-width: 1.25rem;
+  min-height: 1.25rem;
+
+  --focus-ring-color: rgb(var(--color-primary-600));
 
   .bit-chip[data-is-selected="true"] & {
     --hover-bg-color: var(--color-hover-contrast);
-    --focus-ring-color: var(--tw-ring-offset-color);
+    --focus-ring-color: rgb(var(--color-text-contrast));
   }
 
   &:hover {
@@ -74,11 +93,7 @@
 
   &: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;
+    @apply tw-ring-2 tw-ring-[var(--focus-ring-color)];
   }
 
   i {
@@ -88,6 +103,4 @@
     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
deleted file mode 100644
index 1f63e28d750..00000000000
--- a/libs/components/src/chip/chip.component.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- <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
deleted file mode 100644
index 0fb9acf2094..00000000000
--- a/libs/components/src/chip/chip.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-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
deleted file mode 100644
index 9119cff17a8..00000000000
--- a/libs/components/src/chip/chip.stories.ts
+++ /dev/null
@@ -1,225 +0,0 @@
-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",
-//   },
-// };