[CL-265] CL/extension refresh feature branch (#8696)

* [CL-245] Update palette to new light and dark theme colors (#8633)

* [CL-245] Add new color swatches to storybook (#8697)

* [CL-238] update typography (#8997)

* [CL-230] [CL-296] Update button styles (#9345)

* [CL-237] Update menu styles for extension refresh (#9525)

* [CL-267] Add 100-level color variants and update primary-600 (#9550)

* [CL-286] Update badge to use focus-visible instead of focus (#9551)

* [CL-250] Update badge styles for extension refresh (#9572)

* [CL-234] callout style refresh (#9920)

* [CL-233] Update form field styles (#9776)

* [CL-239][CL-251][CL-342] dialog style refresh (#10096)

* [CL-239] simple dialog style refresh

* [CL-342] fix text overflow in dialog; add story

* [CL-244] readonly fields (#10164)

* [CL-352] Fix Angular errors related to form element changes (#10211)

* [CL-273] Update styles for checkbox and form control (#10146)

* [CL-274] Update styling for radio button (#10333)

* [CL-338] Remove extra space in item content when end slot is empty (#10350)

* [CL-377] Fix extension style conflict for input background (#10351)

* [CL-271] Update styles for toggle (#10377)

* [CL-381] Update spacing around form elements (#10432)

* [CL-229] Update icon button styles (#10405)

* [CL-380] Remove hover state from disabled form fields (#10639)

* [CL-405] Allow toggle group input to be full width (#10658)

* [CL-389] Exclude end slot label content from truncation (#10508)

* [CL-383] Remove manual focus when password toggle is clicked (#10749)

* [CL-278][CL-391] misc bit-item style fixes (#10758)

* [CL-391] use pointer cursor on hover when link or button

* [CL-210] Change base font size from 14px to 16px (#10779)

* [CL-291] Finalize styling for chip select (#10771)

* [CL-257] update banner component styles (#10766)

* [CL-443] Fix sizing issues (#10893)

* [CL-445] Fix small sizing and spacing issues (#10962)

* [CL-382] Reduce element shifting on readonly hover (#10956)

* [CL-396] Update theme colors to new hexes (#10968)

* [CL-395] Remove text headers color (#10997)

* [CL-404] Switch to primary-600 for all focus indicators (#11015)

* [CL-397] Remove primary-500 (#11036)

* [CL-447] Ensure DM Sans displays correctly at all font weights (#11041)

* [CL-448] Scrollbar Styles (#11111)

* CL-252/update toast (#10996)

* [CL-275] Update link styles (#11174)

* [CL-446] Update hover state for unselected chip selects (#11172)

* [CL-454] Improve color a11y for toast and banner interactive elements (#11200)

* [CL-457] Center input text for select and multiselect (#11239)

* [CL-455] Do not use responsive margin for sections in dialogs or extension (#11243)

* [CL-459] Fix chip behavior when opening menu while item is selected (#11227)

* [CL-388] Update vertical nav colors for new palette (#11226)

* scope styled scrollbar to only select elements (#11247)

* edit radio buttons to be block inputs and update spacing (#11291)

* [CL-453] Fix multiselect chip spacing and truncation (#11300)

* [PM-11131] Prevent duplicated sr labels on form field icon buttons (#11383)

* [CL-303] Prevent chip menu from running offscreen (#11348)

* [CL-476] Fix DM Sans font on Windows (#11409)

* implements scrollbar styles for firefox/chrome and safari (#11447)

* [CL-472] Fix search background color in extension (#11466)

* [CL-481] Style updates for bit-item, bit-card, and primary-100 (#11473)

* [CL-478] Remove underline on hover for most components (#11477)

* [CL-477] Remove focus styles for readonly input (#11510)

* [CL-487] Fix vault items virtual scroll height (#11581)

* [PM-8625] Increase popup width (#11686)

* [CL-494] Wrap long words in toggle group (#11659)

* [CL-13820] Add class to remove link underline (#11762)

* [CL-435] Prevent Windows extension from shifting (#11851)

* [CL-503] Add notification color variables (#11802)

* [PM-14043] Update size of toggle group label to fit more content (#11881)

* [CL-498] Set chip menu width minimum to chip select width (#11905)

---------

Co-authored-by: Will Martin <contact@willmartian.com>
Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
Co-authored-by: Nick Krantz <125900171+nick-livefront@users.noreply.github.com>
Co-authored-by: Merissa Weinstein <merissa.k.weinstein@gmail.com>
Co-authored-by: Danielle Flinn <43477473+danielleflinn@users.noreply.github.com>

libs/components/src/form/form.stories.ts

@@ -16,6 +16,7 @@ import { CheckboxModule } from "../checkbox";
 import { FormControlModule } from "../form-control";
 import { FormFieldModule } from "../form-field";
 import { InputModule } from "../input/input.module";
+import { MultiSelectModule } from "../multi-select";
 import { RadioButtonModule } from "../radio-button";
 import { SelectModule } from "../select";
 import { I18nMockService } from "../utils/i18n-mock.service";
@@ -36,6 +37,7 @@ export default {
         CheckboxModule,
         RadioButtonModule,
         SelectModule,
+        MultiSelectModule,
       ],
       providers: [
         {
@@ -90,7 +92,7 @@ export const FullExample: Story = {
       submit: () => exampleFormObj.markAllAsTouched(),
       ...args,
     },
-    template: `
+    template: /*html*/ `
       <form [formGroup]="formObj" (ngSubmit)="submit()">
         <bit-form-field>
           <bit-label>Name</bit-label>
@@ -109,6 +111,19 @@ export const FullExample: Story = {
           </bit-select>
         </bit-form-field>
 
+        <bit-form-field>
+          <bit-label>Groups</bit-label>
+          <bit-multi-select
+            class="tw-w-full"
+            formControlName="select"
+            [baseItems]="baseItems"
+            [removeSelectedItems]="removeSelectedItems"
+            [loading]="false"
+            [disabled]="false"
+            (onItemsConfirmed)="onItemsConfirmed($event)">
+          </bit-multi-select>
+        </bit-form-field>
+
         <bit-form-field>
           <bit-label>Age</bit-label>
           <input
@@ -146,5 +161,14 @@ export const FullExample: Story = {
 
   args: {
     countries,
+    baseItems: [
+      { id: "1", listName: "Group 1", labelName: "Group 1", icon: "bwi-family" },
+      { id: "2", listName: "Group 2", labelName: "Group 2", icon: "bwi-family" },
+      { id: "3", listName: "Group 3", labelName: "Group 3", icon: "bwi-family" },
+      { id: "4", listName: "Group 4", labelName: "Group 4", icon: "bwi-family" },
+      { id: "5", listName: "Group 5", labelName: "Group 5", icon: "bwi-family" },
+      { id: "6", listName: "Group 6", labelName: "Group 6", icon: "bwi-family" },
+      { id: "7", listName: "Group 7", labelName: "Group 7", icon: "bwi-family" },
+    ],
   },
 };

libs/components/src/form/forms.mdx

@@ -55,6 +55,18 @@ Be sure to use an appropriate type attribute on fields when defining new field c
 `email` for email address or `number` for numerical information) to take advantage of newer input
 controls like email verification, number selection, and more.
 
+Labels accept an optional `end` slot for any content that should not be truncated if the label text
+is too long, such as info link buttons or badges.
+
+```
+<bit-label>
+  Label text goes here
+  <a href="#" slot="end" bitLink>
+    <i class="bwi bwi-question-circle" aria-hidden="true"></i>
+  </a>
+</bit-label>
+```
+
 #### Default with required attribute
 
 <Story of={fieldStories.Default} />
@@ -86,6 +98,9 @@ button consists of a label and a radio input.
 
 The full form control + label should be selectable to allow the user a larger click target.
 
+Labels accept an optional `end` slot for any content that is not part of the main label text, such
+as info link buttons or badges.
+
 Radio groups should always have a default selected value.
 
 Radio groups may optionally include extra helper text below each radio button.
@@ -112,6 +127,9 @@ Checkboxes can be displayed on their own or in a group (select multiple form que
 displayed in a group, include an input Label and any associated required/validation logic for the
 field.
 
+Labels accept an optional `end` slot for any content that is not part of the main label text, such
+as info link buttons or badges.
+
 Unlike radio groups, checkbox groups are not required to have a default selected value.
 
 Checkbox groups can include extra explanation text below each radio button or just the checkbox
@@ -134,6 +152,12 @@ If a checkbox group has more than 4 options a
   helper text.
   - **Example:** "Billing Email is required if owned by a business".
 
+### Icon Buttons in Form Fields
+
+When adding prefix or suffix icon buttons to a form field, be sure to use the `appA11yTitle`
+directive to provide a label for screenreaders. Typically, the label should follow this pattern:
+`{Action} {field label}`, i.e. "Copy username".
+
 ### Form Field Errors
 
 - When a resting field is filled out, validation is triggered when the user de-focuses the field