@otto-de/b2b-core-components 1.31.0 → 1.31.2

package/dist/collection/components/checkbox-group/checkbox-group.e2e.js

@@ -15,9 +15,10 @@ describe('B2B-Checkbox-Group', () => {
         expect(element).not.toBeNull();
     });
     it('should have all checkboxes unchecked by default and check a checkbox', async () => {
-        const element = await page.find('b2b-checkbox >>> .b2b-checkbox');
+        let element = await page.find('b2b-checkbox >>> .b2b-checkbox');
         await element.click();
         await page.waitForChanges();
+        element = await page.find('b2b-checkbox >>> .b2b-checkbox');
         expect(element).toHaveClass('b2b-checkbox--checked');
     });
     it('should receive a custom event', async () => {
@@ -33,27 +34,31 @@ describe('B2B-Checkbox-Group', () => {
         expect(b2bChange).toHaveReceivedEvent();
     });
     it('should emit a custom event when a checkbox is checked', async () => {
-        const element = await page.find('b2b-checkbox >>> .b2b-checkbox');
+        let element = await page.find('b2b-checkbox >>> .b2b-checkbox');
         const b2bGroupChange = await page.spyOnEvent('b2b-group-change');
-        element.click();
+        await element.click();
         await page.waitForChanges();
         // currently a limitation of Puppeteer - no event details on custom events inside the shadow dom
         expect(b2bGroupChange).toHaveReceivedEvent();
     });
     it('should disable all checkboxes when the property is specified', async () => {
-        const parentElement = await page.find('b2b-checkbox-group');
-        const element = await page.find('b2b-checkbox >>> .b2b-checkbox');
+        let parentElement = await page.find('b2b-checkbox-group');
+        let element = await page.find('b2b-checkbox >>> .b2b-checkbox');
         expect(element).not.toHaveClass('b2b-checkbox--disabled');
         parentElement.setProperty('disabled', true);
         await page.waitForChanges();
+        parentElement = await page.find('b2b-checkbox-group');
+        element = await page.find('b2b-checkbox >>> .b2b-checkbox');
         expect(element).toHaveClass('b2b-checkbox--disabled');
     });
     it('should set all checkboxes to invalid when the property is specified', async () => {
-        const parentElement = await page.find('b2b-checkbox-group');
-        const element = await page.find('b2b-checkbox >>> .b2b-checkbox');
+        let parentElement = await page.find('b2b-checkbox-group');
+        let element = await page.find('b2b-checkbox >>> .b2b-checkbox');
         expect(element).not.toHaveClass('b2b-checkbox--error');
         parentElement.setProperty('invalid', true);
         await page.waitForChanges();
+        parentElement = await page.find('b2b-checkbox-group');
+        element = await page.find('b2b-checkbox >>> .b2b-checkbox');
         expect(element).toHaveClass('b2b-checkbox--error');
     });
     it('should remove all children hint texts when the component is rendered', async () => {

package/dist/collection/components/chip/chip.css

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -142,6 +147,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +160,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
@@ -263,15 +273,9 @@
   text-overflow: ellipsis;
   overflow: hidden;
 }
-:host .b2b-chip__label--bold {
-  font-weight: bold;
-}
 :host .b2b-chip__label--italic {
   font-style: italic;
 }
-:host .b2b-chip__label--underline {
-  text-decoration: underline;
-}
 :host .b2b-chip__label--strikethrough {
   text-decoration: line-through;
 }
@@ -299,6 +303,7 @@
   pointer-events: none;
   background: var(--b2b-color-grey-25);
   color: var(--b2b-color-grey-400);
+  border: var(--b2b-size-border-width-50) solid var(--b2b-color-white-100);
 }
 :host .b2b-chip--disabled__clearIcon {
   fill: var(--b2b-color-grey-400);

package/dist/collection/components/chip/chip.stories.js

@@ -83,18 +83,10 @@ export const story053ErrorChip = {
     name: 'Error Chip',
     args: Object.assign(Object.assign({}, meta.args), { type: 'error', label: 'Chip with error type' }),
 };
-export const story060BoldLabel = {
-    name: 'Bold Label',
-    args: Object.assign(Object.assign({}, meta.args), { labelStyle: 'bold', label: 'Chip with bold style' }),
-};
 export const story061ItalicLabel = {
     name: 'Italic Label',
     args: Object.assign(Object.assign({}, meta.args), { labelStyle: 'italic', label: 'Chip with italic style' }),
 };
-export const story062UnderlinedLabel = {
-    name: 'Underlined Label',
-    args: Object.assign(Object.assign({}, meta.args), { labelStyle: 'underline', label: 'Chip with underline style' }),
-};
 export const story063StrikethroughLabel = {
     name: 'Strikethrough Label',
     args: Object.assign(Object.assign({}, meta.args), { labelStyle: 'strikethrough', label: 'Chip with strikethrough style' }),

package/dist/collection/components/date-picker/date-picker-days-header.css

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -142,6 +147,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +160,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;

package/dist/collection/components/date-picker/date-picker-days.css

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -142,6 +147,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +160,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;

package/dist/collection/components/date-picker/date-picker-header.css

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -142,6 +147,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +160,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;

package/dist/collection/components/date-picker/date-picker-months.css

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -142,6 +147,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +160,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;

package/dist/collection/components/date-picker/date-picker-years.css

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -142,6 +147,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +160,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;

package/dist/collection/components/date-picker/date-picker.css

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -142,6 +147,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +160,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
@@ -276,6 +286,11 @@
 .b2b-date-picker-input-wrapper .b2b-date-picker-input--error {
   background-color: var(--b2b-color-error-50);
 }
+b2b-input-label {
+  display: block;
+  margin-bottom: var(--b2b-size-5);
+  color: var(--b2b-color-black-100);
+}
 .b2b-date-picker-selected-date {
   flex: 1;
   align-self: center;

package/dist/collection/components/dropdown/dropdown.css

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -142,6 +147,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +160,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;

package/dist/collection/components/dropdown/dropdown.e2e.js

@@ -32,23 +32,26 @@ describe('B2B-Dropdown', () => {
     //   expect(b2bChange).toHaveReceivedEventDetail('option-2');
     // });
     it('should disable the select when the property is specified', async () => {
-        const element = await page.find('b2b-dropdown');
+        let element = await page.find('b2b-dropdown');
         expect(element).not.toHaveClass('b2b-dropdown--disabled');
         element.setProperty('disabled', true);
         await page.waitForChanges();
+        element = await page.find('b2b-dropdown');
         expect(element).toHaveClass('b2b-dropdown--disabled');
     });
     it('should set the select to invalid when the property is specified', async () => {
-        const element = await page.find('b2b-dropdown');
+        let element = await page.find('b2b-dropdown');
         expect(element).not.toHaveClass('b2b-dropdown--error');
         element.setProperty('invalid', true);
         await page.waitForChanges();
+        element = await page.find('b2b-dropdown');
         expect(element).toHaveClass('b2b-dropdown--error');
     });
     it('should clear the selection and reset to placeholder', async () => {
-        const dropdown = await page.find('b2b-dropdown');
+        let dropdown = await page.find('b2b-dropdown');
         await dropdown.callMethod('clearSelection');
         await page.waitForChanges();
+        dropdown = await page.find('b2b-dropdown');
         const selectedTextElementAfter = await dropdown.shadowRoot.querySelector('.b2b-dropdown__select');
         expect(selectedTextElementAfter).not.toBeNull();
         expect(selectedTextElementAfter.textContent).toBe('Select an option...');

package/dist/collection/components/flyout-menu/flyout-menu-option.css

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -142,6 +147,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +160,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;

package/dist/collection/components/flyout-menu/flyout-menu.css

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -142,6 +147,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +160,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;

package/dist/collection/components/flyout-menu/flyout-menu.e2e.js

@@ -62,7 +62,7 @@ describe('B2B-FlyoutMenu', () => {
         icon.click();
         await page.waitForChanges();
         const flyoutMenuOption = await page.find('b2b-flyout-menu-option[option="option3"]');
-        flyoutMenuOption.click();
+        await flyoutMenuOption.click();
         await page.waitForChanges();
         expect(flyoutMenuOption).not.toBeNull();
         expect(optionSelectedEventSpy).not.toHaveReceivedEvent();

package/dist/collection/components/headline/headline.css

@@ -19,6 +19,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -27,12 +32,12 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-color-background-overlay-transparent-80: #22222280;
   --b2b-color-background-overlay-transparent-40: #22222240;
   --b2b-color-table-selected-default: #CCE9FF;
-  --b2b-color-table-expand-hover: #E6F4FF;
+  --b2b-color-table-expand-hover: #DBE7FA;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;
   --b2b-font-weight-normal: 500;
@@ -142,6 +147,11 @@
   --b2b-color-red-150: #E6344B;
   --b2b-color-red-200: #BB0004;
   --b2b-color-red-250: #850012;
+  --b2b-color-blue-10: #F2F7FF;
+  --b2b-color-blue-25: #DBE7FA;
+  --b2b-color-blue-50: #87B1F0;
+  --b2b-color-blue-100: #0F63E1;
+  --b2b-color-blue-200: #093E90;
   --b2b-color-primary: #D4021D;
   --b2b-color-error-100: #E6344B;
   --b2b-color-warning-50: #FFD998;
@@ -150,7 +160,7 @@
   --b2b-color-success-100: #326400;
   --b2b-color-info-50: #CCD6E0;
   --b2b-color-info-100: #003264;
-  --b2b-color-hover-default: #E6F4FF;
+  --b2b-color-hover-default: #DBE7FA;
   --b2b-color-hover-black: #3B3B3B;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
   --b2b-font-weight-thin: 100;