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

package/dist/collection/components/background-box/background-box.js

@@ -3,13 +3,21 @@ export class BackgroundBoxComponent {
     constructor() {
         this.fixedWidth = false;
         this.noPadding = false;
+        this.borderTop = 'default';
+        this.borderRight = 'default';
+        this.borderBottom = 'default';
+        this.borderLeft = 'default';
     }
     render() {
-        return (h(Host, { key: '1f8a3145f20472c4dff860e0f7d6c8da53c01b68', class: {
+        return (h(Host, { key: '74f2133140f10daf4130d42400afe779b51328ba', class: {
                 'b2b-background-box': true,
                 'b2b-background-box--fixed-width': this.fixedWidth,
                 'b2b-background-box--no-padding': this.noPadding,
-            } }, h("slot", { key: '102e4dcc6ebfc7da635876a17f8c26abfeff6bda' })));
+                'b2b-background-box--hide-border-top': this.borderTop === 'none',
+                'b2b-background-box--hide-border-right': this.borderRight === 'none',
+                'b2b-background-box--hide-border-bottom': this.borderBottom === 'none',
+                'b2b-background-box--hide-border-left': this.borderLeft === 'none',
+            } }, h("slot", { key: '0762108f2b1305b4a158ea346ebb1f9ba17cb45b' })));
     }
     static get is() { return "b2b-background-box"; }
     static get encapsulation() { return "shadow"; }
@@ -60,6 +68,78 @@ export class BackgroundBoxComponent {
                 "attribute": "no-padding",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "borderTop": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'none'",
+                    "resolved": "\"default\" | \"none\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the box should have a top border. Per default, the border is enabled"
+                },
+                "attribute": "border-top",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "borderRight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'none'",
+                    "resolved": "\"default\" | \"none\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the box should have a right border. Per default, the border is enabled"
+                },
+                "attribute": "border-right",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "borderBottom": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'none'",
+                    "resolved": "\"default\" | \"none\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the box should have a bottom border. Per default, the border is enabled"
+                },
+                "attribute": "border-bottom",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "borderLeft": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'none'",
+                    "resolved": "\"default\" | \"none\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the box should have a left border. Per default, the border is enabled"
+                },
+                "attribute": "border-left",
+                "reflect": false,
+                "defaultValue": "'default'"
             }
         };
     }

package/dist/collection/components/background-box/background-box.spec.js

@@ -43,3 +43,22 @@ it('should render the background box without padding', async () => {
     </b2b-background-box>
 		`);
 });
+it('should render with no borders when specified', async () => {
+    const page = await newSpecPage({
+        components: [BackgroundBoxComponent],
+        template: () => (h("b2b-background-box", { "border-top": "none", "border-right": "none", "border-bottom": "none", "border-left": "none" }, "B2B Background Box")),
+    });
+    expect(page.root).toEqualHtml(`
+    <b2b-background-box
+      class="b2b-background-box b2b-background-box--hide-border-top b2b-background-box--hide-border-right b2b-background-box--hide-border-bottom b2b-background-box--hide-border-left"
+      border-top="none"
+      border-right="none"
+      border-bottom="none"
+      border-left="none">
+      <mock:shadow-root>
+        <slot></slot>
+      </mock:shadow-root>
+      B2B Background Box
+    </b2b-background-box>
+   `);
+});

package/dist/collection/components/background-box/background-box.stories.js

@@ -15,13 +15,24 @@ import { getArgTypes } from "../../docs/config/utils";
 const meta = {
     title: 'Components/Utilities/Background Box',
     component: 'b2b-background-box',
-    args: { fixedWidth: false, noPadding: false },
+    args: {
+        fixedWidth: false,
+        noPadding: false,
+        borderTop: 'default',
+        borderRight: 'default',
+        borderBottom: 'default',
+        borderLeft: 'default',
+    },
     argTypes: getArgTypes('b2b-background-box'),
     render: (_a) => {
         var args = __rest(_a, []);
         return html ` <b2b-background-box
     fixed-width="${args.fixedWidth}"
-    no-padding="${args.noPadding}">
+    no-padding="${args.noPadding}"
+    border-top="${args.borderTop}"
+    border-right="${args.borderRight}"
+    border-bottom="${args.borderBottom}"
+    border-left="${args.borderLeft}">
     <b2b-paragraph>
       The BackgroundBox component adjusts its width and padding based on two
       properties: fixedWidth and noPadding. When fixedWidth is true, the box has
@@ -37,6 +48,9 @@ export default meta;
 export const Default = {
     args: Object.assign({}, meta.args),
 };
+export const BorderControl = {
+    args: Object.assign(Object.assign({}, meta.args), { borderTop: 'none' }),
+};
 export const FixedWidth = {
     args: Object.assign(Object.assign({}, meta.args), { fixedWidth: true }),
 };

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

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /**
  * Do not edit directly
- * Generated on Tue, 21 Jan 2025 10:05:32 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 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 Tue, 21 Jan 2025 10:05:32 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 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 Tue, 21 Jan 2025 10:05:32 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 Tue, 21 Jan 2025 10:05:32 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/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 Tue, 21 Jan 2025 10:05:32 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 Tue, 21 Jan 2025 10:05:32 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/checkbox/checkbox.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 21 Jan 2025 10:05:32 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 Tue, 21 Jan 2025 10:05:32 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/checkbox-group/checkbox-group.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 21 Jan 2025 10:05:32 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 Tue, 21 Jan 2025 10:05:32 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/chip/chip.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 21 Jan 2025 10:05:32 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 Tue, 21 Jan 2025 10:05:32 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/date-picker/date-picker-days-header.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 21 Jan 2025 10:05:32 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 Tue, 21 Jan 2025 10:05:32 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/date-picker/date-picker-days-header.js

@@ -1,17 +1,19 @@
 import { h, Host } from "@stencil/core";
-import { Weekdays } from "./date-picker.types";
+import { WeekdaysEnglish, WeekdaysGerman } from "./date-picker.types";
 export class B2bDatePickerDaysHeader {
     constructor() {
         this.displayWeekDays = () => {
             let renderWeekDays = [];
-            Weekdays.forEach(day => {
+            const weekdays = this.language === 'en' ? WeekdaysEnglish : WeekdaysGerman;
+            weekdays.forEach(day => {
                 renderWeekDays.push(h("div", { class: "b2b-date-picker-day" }, day));
             });
             return renderWeekDays;
         };
+        this.language = 'de';
     }
     render() {
-        return (h(Host, { key: 'dd19aa810becf64b496f66534c7e81cff239507a' }, h("div", { key: '75a38a70e3152892458ab53116f9ed44487aaba6', class: "b2b-date-picker-days-header" }, this.displayWeekDays())));
+        return (h(Host, { key: '8bd0553cd895ce7e94375947d7bed153d20bf55d' }, h("div", { key: '285b470407c87af25be5c9e34e35d38ba44e9b37', class: "b2b-date-picker-days-header" }, this.displayWeekDays())));
     }
     static get is() { return "b2b-date-picker-days-header"; }
     static get encapsulation() { return "shadow"; }
@@ -25,5 +27,27 @@ export class B2bDatePickerDaysHeader {
             "$": ["date-picker-days-header.css"]
         };
     }
+    static get properties() {
+        return {
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'de' | 'en'",
+                    "resolved": "\"de\" | \"en\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Internal the language for month and the weekdays will be decided based on the given input. By default, this will be de which is german"
+                },
+                "attribute": "language",
+                "reflect": false,
+                "defaultValue": "'de'"
+            }
+        };
+    }
     static get elementRef() { return "host"; }
 }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 21 Jan 2025 10:05:32 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 Tue, 21 Jan 2025 10:05:32 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;
@@ -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);
 }