@otto-de/b2b-core-components 1.26.2 → 1.27.0

package/dist/collection/components/anchor/anchor.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 26 Mar 2025 09:18:28 GMT
+ * Generated on Thu, 03 Apr 2025 08:28:50 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -58,6 +58,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
@@ -118,12 +119,12 @@
   --b2b-color-background-overlay: var(--b2b-color-black-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-box: var(--b2b-color-white-100);
-  --b2b-color-background-page: var(--b2b-color-grey-25);
+  --b2b-color-background-page: var(--b2b-color-grey-10);
   --b2b-color-error-50: var(--b2b-color-red-50);
 }
 /**
  * Do not edit directly
- * Generated on Wed, 26 Mar 2025 09:18:28 GMT
+ * Generated on Thu, 03 Apr 2025 08:28:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -177,6 +178,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 26 Mar 2025 09:18:28 GMT
+ * Generated on Thu, 03 Apr 2025 08:28:50 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -58,6 +58,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
@@ -118,12 +119,12 @@
   --b2b-color-background-overlay: var(--b2b-color-black-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-box: var(--b2b-color-white-100);
-  --b2b-color-background-page: var(--b2b-color-grey-25);
+  --b2b-color-background-page: var(--b2b-color-grey-10);
   --b2b-color-error-50: var(--b2b-color-red-50);
 }
 /**
  * Do not edit directly
- * Generated on Wed, 26 Mar 2025 09:18:28 GMT
+ * Generated on Thu, 03 Apr 2025 08:28:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -177,6 +178,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;

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

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /**
  * Do not edit directly
- * Generated on Wed, 26 Mar 2025 09:18:28 GMT
+ * Generated on Thu, 03 Apr 2025 08:28:50 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -59,6 +59,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
@@ -119,12 +120,12 @@
   --b2b-color-background-overlay: var(--b2b-color-black-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-box: var(--b2b-color-white-100);
-  --b2b-color-background-page: var(--b2b-color-grey-25);
+  --b2b-color-background-page: var(--b2b-color-grey-10);
   --b2b-color-error-50: var(--b2b-color-red-50);
 }
 /**
  * Do not edit directly
- * Generated on Wed, 26 Mar 2025 09:18:28 GMT
+ * Generated on Thu, 03 Apr 2025 08:28:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -178,6 +179,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;

package/dist/collection/components/button/button.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 26 Mar 2025 09:18:28 GMT
+ * Generated on Thu, 03 Apr 2025 08:28:50 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -58,6 +58,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
@@ -118,12 +119,12 @@
   --b2b-color-background-overlay: var(--b2b-color-black-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-box: var(--b2b-color-white-100);
-  --b2b-color-background-page: var(--b2b-color-grey-25);
+  --b2b-color-background-page: var(--b2b-color-grey-10);
   --b2b-color-error-50: var(--b2b-color-red-50);
 }
 /**
  * Do not edit directly
- * Generated on Wed, 26 Mar 2025 09:18:28 GMT
+ * Generated on Thu, 03 Apr 2025 08:28:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -177,6 +178,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 26 Mar 2025 09:18:28 GMT
+ * Generated on Thu, 03 Apr 2025 08:28:50 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -58,6 +58,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
@@ -118,12 +119,12 @@
   --b2b-color-background-overlay: var(--b2b-color-black-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-box: var(--b2b-color-white-100);
-  --b2b-color-background-page: var(--b2b-color-grey-25);
+  --b2b-color-background-page: var(--b2b-color-grey-10);
   --b2b-color-error-50: var(--b2b-color-red-50);
 }
 /**
  * Do not edit directly
- * Generated on Wed, 26 Mar 2025 09:18:28 GMT
+ * Generated on Thu, 03 Apr 2025 08:28:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -177,6 +178,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;

package/dist/collection/components/checkbox/checkbox.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 26 Mar 2025 09:18:28 GMT
+ * Generated on Thu, 03 Apr 2025 08:28:50 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -58,6 +58,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
@@ -118,12 +119,12 @@
   --b2b-color-background-overlay: var(--b2b-color-black-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-box: var(--b2b-color-white-100);
-  --b2b-color-background-page: var(--b2b-color-grey-25);
+  --b2b-color-background-page: var(--b2b-color-grey-10);
   --b2b-color-error-50: var(--b2b-color-red-50);
 }
 /**
  * Do not edit directly
- * Generated on Wed, 26 Mar 2025 09:18:28 GMT
+ * Generated on Thu, 03 Apr 2025 08:28:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -177,6 +178,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 26 Mar 2025 09:18:28 GMT
+ * Generated on Thu, 03 Apr 2025 08:28:50 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -58,6 +58,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
@@ -118,12 +119,12 @@
   --b2b-color-background-overlay: var(--b2b-color-black-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-box: var(--b2b-color-white-100);
-  --b2b-color-background-page: var(--b2b-color-grey-25);
+  --b2b-color-background-page: var(--b2b-color-grey-10);
   --b2b-color-error-50: var(--b2b-color-red-50);
 }
 /**
  * Do not edit directly
- * Generated on Wed, 26 Mar 2025 09:18:28 GMT
+ * Generated on Thu, 03 Apr 2025 08:28:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -177,6 +178,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 26 Mar 2025 09:18:28 GMT
+ * Generated on Thu, 03 Apr 2025 08:28:50 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -58,6 +58,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
@@ -118,12 +119,12 @@
   --b2b-color-background-overlay: var(--b2b-color-black-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-box: var(--b2b-color-white-100);
-  --b2b-color-background-page: var(--b2b-color-grey-25);
+  --b2b-color-background-page: var(--b2b-color-grey-10);
   --b2b-color-error-50: var(--b2b-color-red-50);
 }
 /**
  * Do not edit directly
- * Generated on Wed, 26 Mar 2025 09:18:28 GMT
+ * Generated on Thu, 03 Apr 2025 08:28:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -177,6 +178,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;

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

@@ -20,13 +20,14 @@ export class B2bChipComponent {
         this.disabled = false;
         this.hasCloseButton = true;
         this.value = undefined;
+        this.customMargin = '8px';
     }
     render() {
-        return (h(Host, { key: 'feff4de384d9ae0d55cf1683915bb15e865211a0' }, h("div", { key: '79b6ec48ae1a4c142ca8363670ecee5ddd0703cb', class: {
+        return (h(Host, { key: '3305bfadb31716b7a4f103222d8d1f280afdda32' }, h("div", { key: '00e106a248e0d5c36a4a22ecd5f95411cf9271d7', class: {
                 'b2b-chip': true,
                 [`b2b-chip--${this.type}`]: !this.disabled && this.type !== undefined,
                 'b2b-chip--disabled': this.disabled,
-            } }, h("span", { key: 'daa9ee334f78e1b9d3baa363ba7f6e941f3571dc', class: {
+            } }, h("span", { key: 'ac6d7eb4634075dea78cbbfbd2c1dd8ed956e2a1', class: {
                 'b2b-chip__label': true,
                 [`b2b-chip__label--${this.labelStyle}`]: this.labelStyle !== undefined,
                 'b2b-chip__label--close-button': this.hasCloseButton,
@@ -152,6 +153,24 @@ export class B2bChipComponent {
                 },
                 "attribute": "value",
                 "reflect": true
+            },
+            "customMargin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "It is used to customise the margin of chip component"
+                },
+                "attribute": "custom-margin",
+                "reflect": false,
+                "defaultValue": "'8px'"
             }
         };
     }

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

@@ -22,11 +22,13 @@ const meta = {
         disabled: false,
         value: '',
         hasCloseButton: true,
+        customMargin: '',
     },
     argTypes: getArgTypes('b2b-chip-component'),
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-chip-component
+      custom-margin="${args.customMargin}"
       label="${args.label}"
       type="${args.type}"
       label-style="${args.labelStyle}"
@@ -97,3 +99,11 @@ export const story063StrikethroughLabel = {
     name: 'Strikethrough Label',
     args: Object.assign(Object.assign({}, meta.args), { labelStyle: 'strikethrough', label: 'Chip with strikethrough style' }),
 };
+export const story070CustomMargin = {
+    name: 'Custom Margin',
+    args: Object.assign(Object.assign({}, meta.args), { label: 'Chip with Custom Margin', customMargin: '12px' }),
+};
+export const story071NoMargin = {
+    name: 'No Margin',
+    args: Object.assign(Object.assign({}, meta.args), { label: 'Chip with No Margin', customMargin: '0px' }),
+};

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 26 Mar 2025 09:18:28 GMT
+ * Generated on Thu, 03 Apr 2025 08:28:50 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -58,6 +58,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
@@ -118,12 +119,12 @@
   --b2b-color-background-overlay: var(--b2b-color-black-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-box: var(--b2b-color-white-100);
-  --b2b-color-background-page: var(--b2b-color-grey-25);
+  --b2b-color-background-page: var(--b2b-color-grey-10);
   --b2b-color-error-50: var(--b2b-color-red-50);
 }
 /**
  * Do not edit directly
- * Generated on Wed, 26 Mar 2025 09:18:28 GMT
+ * Generated on Thu, 03 Apr 2025 08:28:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -177,6 +178,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 26 Mar 2025 09:18:28 GMT
+ * Generated on Thu, 03 Apr 2025 08:28:50 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -58,6 +58,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
@@ -118,12 +119,12 @@
   --b2b-color-background-overlay: var(--b2b-color-black-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-box: var(--b2b-color-white-100);
-  --b2b-color-background-page: var(--b2b-color-grey-25);
+  --b2b-color-background-page: var(--b2b-color-grey-10);
   --b2b-color-error-50: var(--b2b-color-red-50);
 }
 /**
  * Do not edit directly
- * Generated on Wed, 26 Mar 2025 09:18:28 GMT
+ * Generated on Thu, 03 Apr 2025 08:28:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -177,6 +178,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 26 Mar 2025 09:18:28 GMT
+ * Generated on Thu, 03 Apr 2025 08:28:50 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -58,6 +58,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
@@ -118,12 +119,12 @@
   --b2b-color-background-overlay: var(--b2b-color-black-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-box: var(--b2b-color-white-100);
-  --b2b-color-background-page: var(--b2b-color-grey-25);
+  --b2b-color-background-page: var(--b2b-color-grey-10);
   --b2b-color-error-50: var(--b2b-color-red-50);
 }
 /**
  * Do not edit directly
- * Generated on Wed, 26 Mar 2025 09:18:28 GMT
+ * Generated on Thu, 03 Apr 2025 08:28:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -177,6 +178,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 26 Mar 2025 09:18:28 GMT
+ * Generated on Thu, 03 Apr 2025 08:28:50 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -58,6 +58,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
@@ -118,12 +119,12 @@
   --b2b-color-background-overlay: var(--b2b-color-black-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-box: var(--b2b-color-white-100);
-  --b2b-color-background-page: var(--b2b-color-grey-25);
+  --b2b-color-background-page: var(--b2b-color-grey-10);
   --b2b-color-error-50: var(--b2b-color-red-50);
 }
 /**
  * Do not edit directly
- * Generated on Wed, 26 Mar 2025 09:18:28 GMT
+ * Generated on Thu, 03 Apr 2025 08:28:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -177,6 +178,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 26 Mar 2025 09:18:28 GMT
+ * Generated on Thu, 03 Apr 2025 08:28:50 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -58,6 +58,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
@@ -118,12 +119,12 @@
   --b2b-color-background-overlay: var(--b2b-color-black-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-box: var(--b2b-color-white-100);
-  --b2b-color-background-page: var(--b2b-color-grey-25);
+  --b2b-color-background-page: var(--b2b-color-grey-10);
   --b2b-color-error-50: var(--b2b-color-red-50);
 }
 /**
  * Do not edit directly
- * Generated on Wed, 26 Mar 2025 09:18:28 GMT
+ * Generated on Thu, 03 Apr 2025 08:28:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -177,6 +178,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 26 Mar 2025 09:18:28 GMT
+ * Generated on Thu, 03 Apr 2025 08:28:50 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -58,6 +58,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
@@ -118,12 +119,12 @@
   --b2b-color-background-overlay: var(--b2b-color-black-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-box: var(--b2b-color-white-100);
-  --b2b-color-background-page: var(--b2b-color-grey-25);
+  --b2b-color-background-page: var(--b2b-color-grey-10);
   --b2b-color-error-50: var(--b2b-color-red-50);
 }
 /**
  * Do not edit directly
- * Generated on Wed, 26 Mar 2025 09:18:28 GMT
+ * Generated on Thu, 03 Apr 2025 08:28:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -177,6 +178,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;

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

@@ -32,11 +32,12 @@ describe('B2B-Date-Picker', () => {
     it('should disable past dates', async () => {
         page = await newE2EPage();
         await page.setContent(`<b2b-date-picker disable-past-dates=true></b2b-date-picker>`);
-        const today = new Date();
+        const today = new Date(2024, 2, 30);
         const yesterday = new Date(today);
         yesterday.setDate(today.getDate() - 1);
         const prevDay = yesterday.getDate();
-        if (prevDay > 0 && prevDay >= 30) {
+        console.log('prevDay :', prevDay);
+        if (prevDay > 0 && prevDay >= 31) {
             const prevDayElement = await page.find({ text: prevDay.toString() });
             expect(prevDayElement.className).toBe('b2b-date-picker-day b2b-date-picker-day--disabled');
         }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 26 Mar 2025 09:18:28 GMT
+ * Generated on Thu, 03 Apr 2025 08:28:50 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -58,6 +58,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;
@@ -118,12 +119,12 @@
   --b2b-color-background-overlay: var(--b2b-color-black-100);
   --b2b-color-background-card: var(--b2b-color-white-100);
   --b2b-color-background-box: var(--b2b-color-white-100);
-  --b2b-color-background-page: var(--b2b-color-grey-25);
+  --b2b-color-background-page: var(--b2b-color-grey-10);
   --b2b-color-error-50: var(--b2b-color-red-50);
 }
 /**
  * Do not edit directly
- * Generated on Wed, 26 Mar 2025 09:18:28 GMT
+ * Generated on Thu, 03 Apr 2025 08:28:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -177,6 +178,7 @@
   --b2b-color-grey-100: #e6e6e6;
   --b2b-color-grey-50: #eeeeee;
   --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-grey-10: #f0f0f0;
   --b2b-color-white-100: #ffffff;
   --b2b-color-black-100: #222222;
   --b2b-color-black-50: #333333;