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

package/dist/collection/components/breadcrumb/breadcrumb.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Thu, 20 Feb 2025 15:47:48 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -36,7 +36,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;
@@ -123,7 +124,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Thu, 20 Feb 2025 15:47:48 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -154,7 +155,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/button/button.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Thu, 20 Feb 2025 15:47:48 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 Thu, 20 Feb 2025 15:47:48 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/button/button.e2e.js

@@ -49,7 +49,7 @@ describe('B2B-Button', () => {
     it('should reduce padding on the button if there is only an icon', async () => {
         page = await newE2EPage();
         await page.setContent(`<b2b-button variant="primary" size="100">
-    <b2b-icon slot="end" icon="b2b_icon-check" size="100"></b2b-icon>
+    <b2b-icon-100 slot="end" icon="b2b_icon-check"></b2b-icon-100>
   </b2b-button>`);
         const button = await page.find('b2b-button');
         expect(button).toHaveClass('b2b-button--icon-only');
@@ -58,7 +58,7 @@ describe('B2B-Button', () => {
         page = await newE2EPage();
         await page.setContent(`<b2b-button variant="primary" size="100">
     <span>Hello World</span>
-    <b2b-icon slot="end" icon="b2b_icon-check" size="100"></b2b-icon>
+    <b2b-icon-100 slot="end" icon="b2b_icon-check"></b2b-icon-100>
   </b2b-button>`);
         const button = await page.find('b2b-button');
         expect(button).not.toHaveClass('b2b-button--icon-only');

package/dist/collection/components/button/button.js

@@ -9,7 +9,7 @@ export class ButtonComponent {
             if (children.length === 1) {
                 // even no chars or child nodes will return white space, so we need to trim
                 if (this.hostElement.textContent.trim().length === 0) {
-                    if (children[0].tagName.toLowerCase() === 'b2b-icon') {
+                    if (children[0].tagName.toLowerCase() === 'b2b-icon-100') {
                         return true;
                     }
                     else if (children[0].tagName.toLowerCase() === 'i') {
@@ -59,7 +59,7 @@ export class ButtonComponent {
         return (h("div", { class: "b2b-button__spinner" }, h("b2b-spinner", { color: spinnerColor, size: "50" })));
     }
     render() {
-        return (h(Host, { key: '8ec121e0aaf8632f3d097490859f7c1b973f9584', class: {
+        return (h(Host, { key: '4050874af416fc23c0d67dc335aacb005f0d2279', class: {
                 [`b2b-button--loading`]: this.canLoad(),
                 [`b2b-button--${this.size}`]: true,
                 [`b2b-button--active`]: this.active,

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

@@ -59,7 +59,7 @@ export const IconStart = {
     disabled="${args.disabled}"
     loading="${args.loading}"
     type="${args.type}">
-    <b2b-icon slot="start" icon="b2b_icon-check" size="100"></b2b-icon>
+    <b2b-icon-100 slot="start" icon="b2b_icon-check"></b2b-icon-100>
     ${args.label}
   </b2b-button>`;
     },
@@ -75,7 +75,7 @@ export const IconEnd = {
     loading="${args.loading}"
     type="${args.type}">
     ${args.label}
-    <b2b-icon slot="end" icon="b2b_icon-check" size="100"></b2b-icon>
+    <b2b-icon-100 slot="end" icon="b2b_icon-check"></b2b-icon-100>
   </b2b-button>`;
     },
 };
@@ -104,7 +104,7 @@ export const IconOnly = {
     disabled="${args.disabled}"
     loading="${args.loading}"
     type="${args.type}">
-    <b2b-icon slot="end" icon="b2b_icon-search" size="100"></b2b-icon>
+    <b2b-icon-100 slot="end" icon="b2b_icon-search"></b2b-icon-100>
   </b2b-button>`;
     },
 };

package/dist/collection/components/card/card.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Thu, 20 Feb 2025 15:47:48 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 Thu, 20 Feb 2025 15:47:48 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/checkbox/checkbox.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Thu, 20 Feb 2025 15:47:48 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 Thu, 20 Feb 2025 15:47:48 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/checkbox-group/checkbox-group.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Thu, 20 Feb 2025 15:47:48 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 Thu, 20 Feb 2025 15:47:48 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/chip/chip.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Thu, 20 Feb 2025 15:47:48 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 Thu, 20 Feb 2025 15:47:48 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/date-picker/date-picker-days-header.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Thu, 20 Feb 2025 15:47:48 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 Thu, 20 Feb 2025 15:47:48 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/date-picker/date-picker-days.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Thu, 20 Feb 2025 15:47:48 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 Thu, 20 Feb 2025 15:47:48 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;
@@ -235,7 +237,7 @@
   cursor: pointer;
 }
 .b2b-date-picker-days .b2b-date-picker-day:hover, .b2b-date-picker-days .b2b-date-picker-day:focus {
-  background-color: var(--b2b-color-hover);
+  background-color: var(--b2b-color-hover-default);
 }
 .b2b-date-picker-days .b2b-date-picker-day--disabled {
   border-radius: 5px;
@@ -255,5 +257,5 @@
   width: 100%;
 }
 .b2b-date-picker-days .b2b-date-picker-day--focussed {
-  background-color: var(--b2b-color-hover);
+  background-color: var(--b2b-color-hover-default);
 }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Thu, 20 Feb 2025 15:47:48 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 Thu, 20 Feb 2025 15:47:48 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;
@@ -243,7 +245,7 @@
 :host .b2b-date-picker-nav--left:focus,
 :host .b2b-date-picker-nav--right:hover,
 :host .b2b-date-picker-nav--right:focus {
-  background-color: var(--b2b-color-hover);
+  background-color: var(--b2b-color-hover-default);
 }
 :root .b2b-date-picker-month,
 :host .b2b-date-picker-month {
@@ -263,7 +265,7 @@
 :host .b2b-date-picker-month:hover,
 :host .b2b-date-picker-month:focus {
   cursor: pointer;
-  background-color: var(--b2b-color-hover);
+  background-color: var(--b2b-color-hover-default);
 }
 :root .b2b-date-picker-year,
 :host .b2b-date-picker-year {
@@ -283,5 +285,5 @@
 :host .b2b-date-picker-year:hover,
 :host .b2b-date-picker-year:focus {
   cursor: pointer;
-  background-color: var(--b2b-color-hover);
+  background-color: var(--b2b-color-hover-default);
 }

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

@@ -10,7 +10,7 @@ export class B2bDatePickerHeader {
         const Months = this.language === 'en' ? MonthsEnglish : MonthsGerman;
         return (h(Host, { key: '7cafcdef8033dbe03700fc48b523290ea8d1577a' }, h("div", { key: '2ea038c03c6a8d8295adf41477724334f07180bd', class: "b2b-date-picker-header" }, h("button", { key: 'b9b9365fd1f454f7e6176d7b4e8c77cecdefa9e8', class: "b2b-date-picker-nav--left", onClick: this.b2bDatePickerPreviousMonth.emit, onMouseOut: event => {
                 event.target.blur();
-            }, "aria-label": "previous month" }, h("b2b-icon", { key: '1910bbb66a8f1a91794588317418660b84ac0fb0', icon: "b2b_icon-arrow-left", clickable: true })), h("b2b-headline", { key: '3fd3ead55341abfbe3d89192882f33a86c73523d', size: '100', align: 'center', class: "b2b-date-picker-month", "aria-label": "select month", tabindex: 0, onClick: () => {
+            }, "aria-label": "previous month" }, h("b2b-icon-100", { key: '622bbe2e4766ac3a750529245f4b46d59f0beb04', icon: "b2b_icon-arrow-left", clickable: true })), h("b2b-headline", { key: '673a6aab27766e8a3f6ce8b30c5c08cc6015f687', size: '100', align: 'center', class: "b2b-date-picker-month", "aria-label": "select month", tabindex: 0, onClick: () => {
                 this.b2bDatePickerViewChanged.emit({
                     value: DatePickerView.Months,
                 });
@@ -20,7 +20,7 @@ export class B2bDatePickerHeader {
                         value: DatePickerView.Months,
                     });
                 }
-            } }, Months[this.selectedMonth]), h("b2b-headline", { key: 'cee9e20e84f0a7470c22256990f2e194fe099bd3', size: '100', align: 'center', class: "b2b-date-picker-year", "aria-label": "select year", tabindex: 0, onClick: () => {
+            } }, Months[this.selectedMonth]), h("b2b-headline", { key: '3d95ab3d8aa2d76dd1b2d358d565bf273ba9264a', size: '100', align: 'center', class: "b2b-date-picker-year", "aria-label": "select year", tabindex: 0, onClick: () => {
                 this.b2bDatePickerViewChanged.emit({
                     value: DatePickerView.Years,
                 });
@@ -30,9 +30,9 @@ export class B2bDatePickerHeader {
                         value: DatePickerView.Years,
                     });
                 }
-            } }, this.selectedYear), h("button", { key: 'a14a7321c8489a37ea13e08c3fc3b56988178fc8', class: "b2b-date-picker-nav--right", onClick: this.b2bDatePickerNextMonth.emit, onMouseOut: event => {
+            } }, this.selectedYear), h("button", { key: '987676e03e3b759ce0a42a5db9c4f0dad35aac3a', class: "b2b-date-picker-nav--right", onClick: this.b2bDatePickerNextMonth.emit, onMouseOut: event => {
                 event.target.blur();
-            }, "aria-label": "next month" }, h("b2b-icon", { key: 'db899a7ee62a70e264f8db0298be0e71875ce4d1', icon: "b2b_icon-arrow-right", clickable: true })))));
+            }, "aria-label": "next month" }, h("b2b-icon-100", { key: '843f3fccb5374ee43e7d0d4ce3aabe550b0a5f75', icon: "b2b_icon-arrow-right", clickable: true })))));
     }
     static get is() { return "b2b-date-picker-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Thu, 20 Feb 2025 15:47:48 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 Thu, 20 Feb 2025 15:47:48 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;
@@ -238,7 +240,7 @@
   cursor: pointer;
 }
 :host .b2b-date-picker-month:hover, :host .b2b-date-picker-month:focus {
-  background-color: var(--b2b-color-hover);
+  background-color: var(--b2b-color-hover-default);
 }
 :host .b2b-date-picker-month--selected {
   background-color: var(--b2b-color-black-100);

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Thu, 20 Feb 2025 15:47:48 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 Thu, 20 Feb 2025 15:47:48 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;
@@ -241,7 +243,7 @@
   cursor: pointer;
 }
 :host .b2b-date-picker-year:hover, :host .b2b-date-picker-year:focus {
-  background-color: var(--b2b-color-hover);
+  background-color: var(--b2b-color-hover-default);
 }
 :host .b2b-date-picker-year--selected {
   background-color: var(--b2b-color-black-100);

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 30 Jan 2025 18:09:12 GMT
+ * Generated on Thu, 20 Feb 2025 15:47:48 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 Thu, 20 Feb 2025 15:47:48 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/date-picker/date-picker.js

@@ -345,7 +345,7 @@ export class B2bDatePicker {
                     this.invalid = false;
                     this.clearDateInput();
                 }
-            } }, h("b2b-icon", { icon: "b2b_icon-close", "aria-label": "clear input", clickable: true }))), h("div", { tabindex: 0, onClick: () => {
+            } }, h("b2b-icon-100", { icon: "b2b_icon-close", "aria-label": "clear input", clickable: true }))), h("div", { tabindex: 0, onClick: () => {
                 if (this.invalid) {
                     this.invalid = false;
                 }
@@ -357,7 +357,7 @@ export class B2bDatePicker {
                     }
                     this.showHideDatePicker();
                 }
-            }, class: "b2b-event-icon" }, h("b2b-icon", { "aria-label": this.showDatePicker
+            }, class: "b2b-event-icon" }, h("b2b-icon-100", { "aria-label": this.showDatePicker
                 ? 'close date picker'
                 : 'open date picker', icon: "b2b_icon-event", clickable: true }))))), h("div", { class: {
                 'b2b-date-picker-body': true,