@otto-de/b2b-core-components 1.22.0 → 1.23.0

package/dist/collection/components/icon-100/icon-100.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -35,7 +35,8 @@
   --b2b-color-table-selected-default: #cce9ff;
   --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
   --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -153,7 +154,8 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;

package/dist/collection/components/icon-50/icon-50.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -35,7 +35,8 @@
   --b2b-color-table-selected-default: #cce9ff;
   --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
   --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -153,7 +154,8 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;

package/dist/collection/components/input/input.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -35,7 +35,8 @@
   --b2b-color-table-selected-default: #cce9ff;
   --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
   --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -153,7 +154,8 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;

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

@@ -40,4 +40,14 @@ describe('B2B-Input', () => {
         await inputElement.callMethod('clearInput');
         expect(onInputEventSpy).toHaveReceivedEventDetail({ value: '' });
     });
+    it('should use label slot when provided', async () => {
+        const slotPage = await newE2EPage();
+        await slotPage.setContent(`
+      <b2b-input>
+        <span slot="label">Label Slot</span>
+      </b2b-input>
+    `);
+        const labelElement = await slotPage.find('span');
+        expect(labelElement).toEqualText('Label Slot');
+    });
 });

package/dist/collection/components/input/input.js

@@ -75,19 +75,22 @@ export class InputComponent {
         }
         this.getSlottedText();
     }
+    componentWillLoad() {
+        this.labelSlot = this.hostElement.querySelector('[slot="label"]');
+    }
     render() {
-        return (h(Host, { key: '54b702bf7a3f164b6458cd02f6430c89e32a0dc1', class: {
+        return (h(Host, { key: '48398c9027d0dbe9a62bbc806357842fcf12fab6', class: {
                 'b2b-input': true,
                 'b2b-input--error': this.invalid && !this.disabled,
-            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("div", { key: 'ed3f54f0c1bc643647db180cd81d3a8184ae58e0', class: {
+            } }, (this.label || this.labelSlot) && (h("b2b-input-label", { id: this.name, required: this.required }, h("slot", { name: "label" }, this.label))), h("div", { key: 'd6a7e8ab3e20a1ea02252c4968d0043afb91518d', class: {
                 'b2b-input__wrapper': true,
                 'b2b-input__wrapper--focused': this.hasFocus,
                 'b2b-input__wrapper--disabled': this.disabled || this.groupDisabled,
-            } }, h("slot", { key: '5e5e6bfacd84ad4dca5b6540a791f9f2348c69da', name: "start" }), this.hasTextPrefix && h("div", { class: "border" }), h("input", { key: '3bb7a970f7cbabf0c543676746096c8b33ca35c4', class: {
+            } }, h("slot", { key: 'fb82b2d7c98250248c2991840896251a28368a31', name: "start" }), this.hasTextPrefix && h("div", { class: "border" }), h("input", { key: '4b3e7be8d07c0abf3ed11f3ce13c9f9f43672927', class: {
                 'b2b-input__native-input': true,
                 ['b2b-input__native-input--align-' + this.inputTextAlign]: true,
                 'b2b-input__native-input--disabled': this.disabled,
-            }, "aria-labelledby": this.name, type: this.type, placeholder: this.placeholder, value: this.value, name: this.name, disabled: this.disabled || this.groupDisabled, autoFocus: this.autofocus, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, ref: el => (this.focusableElement = el) }), this.hasTextSuffix && h("div", { class: "border" }), h("slot", { key: '75a283d3128b6abbc5289ca8fbe7ff65ba60c6d5', name: "end" })), (this.hint !== undefined && !this.invalid) ||
+            }, "aria-labelledby": this.name, type: this.type, placeholder: this.placeholder, value: this.value, name: this.name, disabled: this.disabled || this.groupDisabled, autoFocus: this.autofocus, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, ref: el => (this.focusableElement = el) }), this.hasTextSuffix && h("div", { class: "border" }), h("slot", { key: '96d37a29b8b01c63d1cd4b913a83a1240f6efcbf', name: "end" })), (this.hint !== undefined && !this.invalid) ||
             (this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : ('')));
     }
     static get is() { return "b2b-input"; }

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

@@ -103,7 +103,7 @@ export const Suffix = {
       error="${args.error}"
       autofocus="${args.autofocus}"
       invalid=${args.invalid}
-      ><b2b-icon icon="b2b_icon-search" slot="end"></b2b-icon
+      ><b2b-icon-100 icon="b2b_icon-search" slot="end"></b2b-icon-100
     >
   </div>`;
     },
@@ -124,12 +124,32 @@ export const PrefixAndSuffix = {
       error="${args.error}"
       autofocus="${args.autofocus}"
       invalid=${args.invalid}>
-      <b2b-icon icon="b2b_icon-search" slot="start"></b2b-icon
+      <b2b-icon-100 icon="b2b_icon-search" slot="start"></b2b-icon-100
       ><span slot="end">Registration Number</span></b2b-input
     >
   </div>`;
     },
 };
+export const Label = {
+    args: Object.assign({}, meta.args),
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return html `<div style="width: 400px;">
+    <b2b-input
+      required="${args.required}"
+      type="${args.type}"
+      disabled="${args.disabled}"
+      placeholder="${args.placeholder}"
+      value="${args.value}"
+      hint="${args.hint}"
+      error="${args.error}"
+      autofocus="${args.autofocus}"
+      invalid=${args.invalid}
+      ><span slot="label">Custom label</span></b2b-input
+    >
+  </div>`;
+    },
+};
 export const AllPropertiesSpecified = {
     args: Object.assign(Object.assign({}, meta.args), { label: 'Input with all arguments', required: true, placeholder: 'All arguments placeholder', value: 'an initial value', hint: 'This is a hint for an every argument specified input', error: 'This is an error so you will not see the hint', disabled: false, autofocus: false }),
 };

package/dist/collection/components/input-group/input-group.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -35,7 +35,8 @@
   --b2b-color-table-selected-default: #cce9ff;
   --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
   --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -153,7 +154,8 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;

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

@@ -15,7 +15,7 @@ describe('B2B Input Group', () => {
           <option value="one">€</option>
           <option value="one">$</option>
         </b2b-dropdown>
-        <b2b-button slot="end" variant="primary" disabled><b2b-icon icon="b2b_icon-search"></b2b-icon></b2b-button>
+        <b2b-button slot="end" variant="primary" disabled><b2b-icon-100 icon="b2b_icon-search"></b2b-icon-100></b2b-button>
       </b2b-input-group>`);
     });
     it('should render the input group component', async () => {

package/dist/collection/components/input-group/input-group.stories.js

@@ -14,7 +14,7 @@ const Template = ({ invalid, disabled, error, hint, additionalSlot, }) => {
             <option value="two">$</option>
           </b2b-dropdown>
           <b2b-button slot="end" variant="primary">
-            <b2b-icon icon="b2b_icon-search"></b2b-icon>
+            <b2b-icon-100 icon="b2b_icon-search"></b2b-icon-100>
           </b2b-button>
         </b2b-input-group>
       </div>`

package/dist/collection/components/input-list/input-list.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -35,7 +35,8 @@
   --b2b-color-table-selected-default: #cce9ff;
   --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
   --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -153,7 +154,8 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -275,7 +277,7 @@
   padding: var(--b2b-size-15) var(--b2b-size-30);
 }
 .b2b-input-list .b2b-input-list__options .b2b-input-list__option:hover, .b2b-input-list .b2b-input-list__options .b2b-input-list__option:focus {
-  background-color: var(--b2b-color-hover);
+  background-color: var(--b2b-color-hover-default);
 }
 .b2b-input-list .b2b-input-list__options .b2b-input-list__option:first-child {
   padding-top: var(--b2b-size-20);
@@ -283,7 +285,7 @@
 .b2b-input-list .b2b-input-list__options .b2b-input-list__option:last-child {
   padding-bottom: var(--b2b-size-20);
 }
-.b2b-input-list b2b-icon {
+.b2b-input-list b2b-icon-100 {
   --b2b-icon-cursor: pointer;
 }
 .b2b-input-list .purge-css-include-variables {

package/dist/collection/components/input-list/input-list.e2e.js

@@ -33,7 +33,7 @@ describe('B2B-InputList', () => {
         await typeInput();
         let inputValue = inputList.getAttribute('value');
         expect(inputValue).toBe(null);
-        const closeIcon = await page.find('b2b-input-list >>> b2b-icon');
+        const closeIcon = await page.find('b2b-input-list >>> b2b-icon-100');
         expect(closeIcon).toBeNull();
     });
     it('should not not show close icon when input list has text and is disabled', async () => {
@@ -45,7 +45,7 @@ describe('B2B-InputList', () => {
         await page.waitForChanges();
         let inputValue = inputList.getAttribute('value');
         expect(inputValue).toBe('b2b');
-        const closeIcon = await page.find('b2b-input-list >>> b2b-icon');
+        const closeIcon = await page.find('b2b-input-list >>> b2b-icon-100');
         expect(closeIcon).toBeNull();
     });
     it('should not show search list when input is not focused', async () => {
@@ -210,12 +210,12 @@ describe('B2B-InputList', () => {
     it('should show the close icon when the input has text', async () => {
         await setOptionsList();
         await typeInput();
-        const closeIcon = await page.find('b2b-input-list >>> b2b-icon');
+        const closeIcon = await page.find('b2b-input-list >>> b2b-icon-100');
         expect(closeIcon).not.toBeNull();
     });
     it('should not show the close icon if the input is empty', async () => {
         await setOptionsList();
-        const closeIcon = await page.find('b2b-input-list >>> b2b-icon');
+        const closeIcon = await page.find('b2b-input-list >>> b2b-icon-100');
         expect(closeIcon).toBeNull();
     });
     it('should clear the input when the clear icon is clicked', async () => {
@@ -224,7 +224,7 @@ describe('B2B-InputList', () => {
         let input = await page.find('b2b-input-list >>> b2b-input');
         let inputValue = await input.getAttribute('value');
         expect(inputValue).toBe('8');
-        const closeIcon = await page.find('b2b-input-list >>> b2b-icon');
+        const closeIcon = await page.find('b2b-input-list >>> b2b-icon-100');
         closeIcon.click();
         await page.waitForChanges();
         inputValue = await input.getAttribute('value');
@@ -233,7 +233,7 @@ describe('B2B-InputList', () => {
     it('should emit clear event when the clear icon is clicked', async () => {
         const onInputEventSpy = await page.spyOnEvent('b2b-clear');
         await typeInput();
-        const closeIcon = await page.find('b2b-input-list >>> b2b-icon');
+        const closeIcon = await page.find('b2b-input-list >>> b2b-icon-100');
         closeIcon.click();
         await page.waitForChanges();
         expect(onInputEventSpy).toHaveReceivedEvent();

package/dist/collection/components/input-list/input-list.js

@@ -143,7 +143,7 @@ export class InputListComponent {
                     this.isElementFocused &&
                     Boolean(this.value),
                 [groupOrderClass]: true,
-            } }, h("b2b-input", { key: 'd2d23370cc4e430e68a4e75014ea31d19802557f', type: "text", label: this.label, value: this.value, disabled: this.disabled || this.groupDisabled, "onb2b-input": this.handleInput, placeholder: this.placeholder, required: this.required }, !(this.disabled || this.groupDisabled) && Boolean(this.value) && (h("b2b-icon", { icon: "b2b_icon-close", "aria-label": "reset", slot: "end", tabIndex: 0, onMouseDown: this.resetInput, onKeyDown: this.resetInput }))), this.isElementFocused && Boolean(this.value) ? (h("div", { class: "b2b-input-list__options-container" }, this.hasOptionList ? (h("div", { class: "b2b-input-list__options", role: "listbox" }, this.optionsList.map(option => (h("b2b-input-list-option", { option: option, tabIndex: -1, "onb2b-option-selected": this.onOptionSelected }))))) : (h("slot", null)))) : null)));
+            } }, h("b2b-input", { key: 'd2d23370cc4e430e68a4e75014ea31d19802557f', type: "text", label: this.label, value: this.value, disabled: this.disabled || this.groupDisabled, "onb2b-input": this.handleInput, placeholder: this.placeholder, required: this.required }, !(this.disabled || this.groupDisabled) && Boolean(this.value) && (h("b2b-icon-100", { icon: "b2b_icon-close", "aria-label": "reset", slot: "end", tabIndex: 0, onMouseDown: this.resetInput, onKeyDown: this.resetInput }))), this.isElementFocused && Boolean(this.value) ? (h("div", { class: "b2b-input-list__options-container" }, this.hasOptionList ? (h("div", { class: "b2b-input-list__options", role: "listbox" }, this.optionsList.map(option => (h("b2b-input-list-option", { option: option, tabIndex: -1, "onb2b-option-selected": this.onOptionSelected }))))) : (h("slot", null)))) : null)));
     }
     static get is() { return "b2b-input-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/label/label.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -35,7 +35,8 @@
   --b2b-color-table-selected-default: #cce9ff;
   --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
   --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -153,7 +154,8 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;

package/dist/collection/components/modal/modal.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -35,7 +35,8 @@
   --b2b-color-table-selected-default: #cce9ff;
   --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
   --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -153,7 +154,8 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -278,7 +280,7 @@
   padding: 0;
   border: none;
 }
-:host .b2b-modal__dialog__close b2b-icon {
+:host .b2b-modal__dialog__close b2b-icon-100 {
   transition: all 0.3s ease;
 }
 :host .b2b-modal__dialog__footer {

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

@@ -48,7 +48,7 @@ describe('b2b-modal', () => {
         await page.setContent('<b2b-modal heading="Test Modal" opened="true">Test</b2b-modal>');
         const modalDiv = await page.find('b2b-modal >>> div');
         expect(await modalDiv.isVisible()).toBe(true);
-        const closeIcon = await page.find('b2b-modal >>> b2b-icon');
+        const closeIcon = await page.find('b2b-modal >>> b2b-icon-100');
         const closeIconColorBefore = await closeIcon.getProperty('color');
         expect(closeIconColorBefore).toBe('secondary');
         await closeIcon.hover();
@@ -61,7 +61,7 @@ describe('b2b-modal', () => {
         await page.setContent('<b2b-modal heading="Test Modal" opened="true">Test</b2b-modal>');
         const b2bBeforeClose = await page.spyOnEvent('b2b-before-close');
         const b2bClose = await page.spyOnEvent('b2b-close');
-        const closeIcon = await page.find('b2b-modal >>> b2b-icon');
+        const closeIcon = await page.find('b2b-modal >>> b2b-icon-100');
         await closeIcon.click();
         expect(b2bBeforeClose).toHaveReceivedEvent();
         expect(b2bClose).toHaveReceivedEvent();

package/dist/collection/components/modal/modal.js

@@ -85,7 +85,7 @@ export class ModalComponent {
         return (h(Host, { key: '05b9d293228c39dd82ad3b27c2dbba6432f63686' }, h("div", { key: 'efff47d3cdcf4e692687f326238b7e05f4262dc9', class: { 'b2b-modal': true, 'b2b-modal--open': this.opened } }, h("div", { key: 'bb2bd023ecfdf7a25975d04630f6b8d91c4c4238', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabIndex: 0 }), h("div", { key: 'ea87924e8112672d9d76173509107ef820e1eaba', class: {
                 'b2b-modal__dialog': true,
                 [`b2b-modal__dialog--${this.variant}`]: true,
-            } }, h("div", { key: '367bfc5a0dde6ec1f91a9461bec1af6833446c26', class: "b2b-modal__dialog__header" }, h("div", { key: '22bfcbcc0bd2056a60e4b9fe8ee76263a5aaf60b', class: "b2b-modal__dialog__header-left" }, h("b2b-headline", { key: 'f1ecab2113e756f8a37e9e136608bf44e74491ca', align: "center", size: "200", noMargin: true }, this.heading), h("slot", { key: '42d151db80bdfe6ce662a878fb100d943e461cc4', name: "header-icon" })), h("div", { key: '765aef597c08d2ae6133fb7e00f37f7882808ec1', class: "b2b-modal__dialog__header-right" }, h("button", { key: '6c27b0802cbc80519ce47e63af63b235f9b15170', type: "button", class: "b2b-modal__dialog__close", onMouseEnter: this.toggleIconHover, onMouseLeave: this.toggleIconHover, onClick: this.handleClickDismiss, ref: el => (this.closeButton = el) }, h("b2b-icon", { key: '4e7ba249cedbcf6312d716d1031133870845b6cb', clickable: true, icon: "b2b_icon-close", color: this.iconHover ? 'primary' : 'secondary' })))), h("div", { key: '3f9fd1e166f3e0382d98fa00eedfbcaed9f70bbb', class: "b2b-modal__dialog__body" }, h("slot", { key: '145b3a0dbd8ee9251114a5f5d53a97d3a2bc7fbe' })), h("div", { key: '52a105ca1acb27d5b7ccf6dffa7f15a11f8baa94', class: "b2b-modal__dialog__footer" }, h("div", { key: 'ae006150cf95ea7b7ffd6ddcb5492e625bc805b8', class: "b2b-modal__dialog__footer-left" }, h("slot", { key: '09e5f13b1a3dcb49e937924a7542fc5656ae1418', name: "footer-left" })), h("div", { key: 'cee8f2a29c60dfb12d99e270164098506ac14b11', class: "b2b-modal__dialog__footer-right" }, h("slot", { key: 'ab2c62d156b5476b4036d8ee362587f4ed19c8c2', name: "footer-right" })))), h("div", { key: 'a7eee41356ac61e86e8034c1a2c7b00ef5841a08', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabIndex: 0 }), h("div", { key: 'e94d87a4553ddf37cbe12955ad6ed00c5a5ea1f9', class: "b2b-modal__backdrop", onClick: this.handleBackdropDismiss }))));
+            } }, h("div", { key: '367bfc5a0dde6ec1f91a9461bec1af6833446c26', class: "b2b-modal__dialog__header" }, h("div", { key: '22bfcbcc0bd2056a60e4b9fe8ee76263a5aaf60b', class: "b2b-modal__dialog__header-left" }, h("b2b-headline", { key: 'f1ecab2113e756f8a37e9e136608bf44e74491ca', align: "center", size: "200", noMargin: true }, this.heading), h("slot", { key: '42d151db80bdfe6ce662a878fb100d943e461cc4', name: "header-icon" })), h("div", { key: '765aef597c08d2ae6133fb7e00f37f7882808ec1', class: "b2b-modal__dialog__header-right" }, h("button", { key: '6c27b0802cbc80519ce47e63af63b235f9b15170', type: "button", class: "b2b-modal__dialog__close", onMouseEnter: this.toggleIconHover, onMouseLeave: this.toggleIconHover, onClick: this.handleClickDismiss, ref: el => (this.closeButton = el) }, h("b2b-icon-100", { key: 'cf8d241585af11d01bc4bf04537245521bda1ac7', clickable: true, icon: "b2b_icon-close", color: this.iconHover ? 'primary' : 'secondary' })))), h("div", { key: '1e3c5c2c8d791e6b157bfea8532e9d6568c8ecde', class: "b2b-modal__dialog__body" }, h("slot", { key: 'cf11d00c750a942f30bd5ded7265ea41bfd1d421' })), h("div", { key: 'e391360e7c8ecfe577d13d51b643e6c9877930e6', class: "b2b-modal__dialog__footer" }, h("div", { key: 'bcb391f21045834d5f58a3b26b3ae45127f13f0b', class: "b2b-modal__dialog__footer-left" }, h("slot", { key: 'effb6238d7bc7401c76b7d32795aec4eb1d62990', name: "footer-left" })), h("div", { key: 'f2a236d5b30d58bb71abac03d4ef57c6a09e70c6', class: "b2b-modal__dialog__footer-right" }, h("slot", { key: 'ee8d0c54670a8b03dfd945cb8846c9dd2e523aac', name: "footer-right" })))), h("div", { key: '8384201d6c0a29e08061f36c1822114e5589f564', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabIndex: 0 }), h("div", { key: 'f52bd98fc038877132a949cc66bbfdb190f2dfb4', class: "b2b-modal__backdrop", onClick: this.handleBackdropDismiss }))));
     }
     static get is() { return "b2b-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -35,7 +35,8 @@
   --b2b-color-table-selected-default: #cce9ff;
   --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
   --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -153,7 +154,8 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;

package/dist/collection/components/multiselect-dropdown/multiselect-dropdown.js

@@ -156,10 +156,10 @@ export class B2bMultiSelectDropdown {
         return (h(Host, { key: 'ae0810d77f48d5aed5fb7d97e1b3a800a4a057b0', onFocus: this.setElementOnFocus, onBlur: this.setElementOnBlur, onClick: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("b2b-input-label", { key: 'e9e67e9c02c8885919740f97c3c52f12991cff66' }, this.label), h("div", { key: '43e41efade0b8d761f1d8edf11415a43c461e804', class: {
                 'b2b-multiselect-dropdown': true,
                 'b2b-multiselect-dropdown--open': this.isElementFocused,
-            }, tabindex: 0, role: "combobox", "aria-expanded": this.isElementFocused }, this.currentSelectedValues.length === 0 ? (h("span", { class: "b2b-multiselect-dropdown__placeholder" }, this.placeholder)) : (h("div", { class: "b2b-multiselect-dropdown__chip-container" }, this.renderChips())), h("b2b-icon", { key: '1c89e8e3bd29103d53f57d09729a50d4a572cb83', icon: "b2b_icon-arrow-down" })), h("div", { key: '6bea389b47af4c68930ca8b9929d5306851c3e07', class: {
+            }, tabindex: 0, role: "combobox", "aria-expanded": this.isElementFocused }, this.currentSelectedValues.length === 0 ? (h("span", { class: "b2b-multiselect-dropdown__placeholder" }, this.placeholder)) : (h("div", { class: "b2b-multiselect-dropdown__chip-container" }, this.renderChips())), h("b2b-icon-100", { key: '3631f88b18b5a2088f666727fac8f08ba0260f48', icon: "b2b_icon-arrow-down" })), h("div", { key: 'f022633b89930b1904788affa426ba36a451c631', class: {
                 'b2b-multiselect-dropdown__options-container': true,
                 'b2b-multiselect-dropdown__options-container--visible': this.isElementFocused,
-            } }, h("div", { key: '2ce84f01cd609c3086d0bc882d03120ce910d79e', class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { key: '6acc6a4f6a96208e82eb04d5f7a59aa49fbd7c62', class: "b2b-multiselect-dropdown__option__search" }, h("input", { key: 'b55e0c46ff96afbbb069d0406bf2e5c15beb13e5', type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { key: '4be2a1d6433bad06d85b3e4765e9d65e483223b0', class: "b2b-multiselect-dropdown__option__select-all", option: this.selectAllLabel, id: "select-all", "onB2b-option-selected": this.handleSelectAll }), this.hasOptionList &&
+            } }, h("div", { key: '1b1b314b3f31e8eb22e627f533d9662fc89c095b', class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { key: 'c041573e27abd76a3574cb3bd75cc34a3add6862', class: "b2b-multiselect-dropdown__option__search" }, h("input", { key: 'f4e01c003daf791325a5f7bd2e935497204749b0', type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { key: '6540d5bd19352eebbeb4328065a1f810d7817d63', class: "b2b-multiselect-dropdown__option__select-all", option: this.selectAllLabel, id: "select-all", "onB2b-option-selected": this.handleSelectAll }), this.hasOptionList &&
             this.currentList.map(option => (h("b2b-multiselect-option", { "onB2b-option-selected": this.handleSelectedChange, option: option })))))));
     }
     static get is() { return "b2b-multiselect-dropdown"; }

package/dist/collection/components/multiselect-dropdown/multiselect-option/multiselect-option.css

@@ -6,5 +6,5 @@
   align-items: center;
 }
 .b2b-multiselect-dropdown__option:hover {
-  background-color: var(--b2b-color-hover);
+  background-color: var(--b2b-color-hover-default);
 }

package/dist/collection/components/pagination/pagination.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -35,7 +35,8 @@
   --b2b-color-table-selected-default: #cce9ff;
   --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
   --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -153,7 +154,8 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;

package/dist/collection/components/paragraph/paragraph.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -35,7 +35,8 @@
   --b2b-color-table-selected-default: #cce9ff;
   --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
   --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -153,7 +154,8 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;