@otto-de/b2b-core-components 1.26.3 → 1.28.0

package/dist/collection/components/progress-bar/progress-bar.js

@@ -17,11 +17,11 @@ export class ProgressBarComponent {
     }
     render() {
         const labelExists = this.label !== undefined && this.label !== '';
-        return (h(Host, { key: '2466d3c474ca6240247bb397426f060698d97186' }, h("div", { key: '6d0e5633c0f01952a52aba45c43b39654fc3b3ea', class: {
+        return (h(Host, { key: '2c21a98038eb5f9139de509825204d5536b28186' }, h("div", { key: '53b8271100890ccbf94e6452f6811f10edbbe268', class: {
                 [`b2b-progress-bar__${this.labelPosition}-${this.labelType}`]: true,
-            } }, h("div", { key: 'ee25b17b43f6204cb370c2046cdee20790193f89', class: "b2b-progress-bar__wrapper" }, h("div", { key: '78050a17a169f50a5a5784ac48a7a58152ea2e6b', class: "b2b-progress-bar__progress", style: {
+            } }, h("div", { key: '2925cf1b343596249f110944f946ecfc01258556', class: "b2b-progress-bar__wrapper" }, h("div", { key: '32a8f9c88a507c697c45513037a4473736585efa', class: "b2b-progress-bar__progress", style: {
                 width: `${this.getProgress()}%`,
-            } })), h("div", { key: '44c633adccf2736adf8d0cc462c269d83f0c31c5', class: {
+            } })), h("div", { key: 'e91835897125808aedeaed4cc4b7eda49eab2383', class: {
                 'b2b-progress-bar__label': labelExists,
                 'b2b-progress-bar__label-none': !labelExists,
                 [`b2b-progress-bar__label__${this.labelPosition}-${this.labelType}`]: labelExists,

package/dist/collection/components/radio/radio.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 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 Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 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/radio/radio.js

@@ -53,11 +53,11 @@ export class B2bRadioButtonComponent {
         return Array.from(document.querySelectorAll(`b2b-radio-button[name="${this.name}"]`)).filter((radio) => radio.value !== this.value);
     }
     render() {
-        return (h(Host, { key: 'c6a48de040535714aa894821869b17a09bd7c0bc', onClick: this.onClick }, h("div", { key: 'c7330bbaad0413b440b630607a7f036ae4ede8bd', class: {
+        return (h(Host, { key: '28bb8bc8c3741839657f687abed7314c8cdcf7bf', onClick: this.onClick }, h("div", { key: '6d865dff87760dcaef8be42268e73f6d90ddb1c6', class: {
                 'b2b-radio': true,
                 'b2b-radio--error': this.invalid && !this.disabled,
                 'b2b-radio--disabled': this.disabled,
-            } }, h("div", { key: 'fa4653ef9abfffb7bccc3450d5fd024a3167297c', class: "b2b-radio-items" }, h("input", { key: '0ada5794f7abd8f5a10078e06a6d0ad8a2d2053e', class: "b2b-radio-input", "aria-labelledby": this.name, type: "radio", checked: this.checked, disabled: this.disabled, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, value: this.value }), h("b2b-input-label", { key: '1486659420211964f3a59c4465717170eaffb7ec', id: this.name, required: this.required, disabled: this.disabled }, h("slot", { key: 'deac0ee6f41f57b312837c8e24534f0e9416144b', name: "label" }, this.label))), (this.hint !== undefined && !this.invalid) ||
+            } }, h("div", { key: '6c5ca53c8d308e381d26c8802cb8521d6e987256', class: "b2b-radio-items" }, h("input", { key: 'a3ed2ab8d4defc593bcc69b5058e9d6fb674a626', class: "b2b-radio-input", "aria-labelledby": this.name, type: "radio", checked: this.checked, disabled: this.disabled, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, value: this.value }), h("b2b-input-label", { key: '69cb16d121d9283cc95ffbb0642a18d9744deece', id: this.name, required: this.required, disabled: this.disabled }, h("slot", { key: 'db1e57a9e65a52df671fa3ff35f1a9f372eca47b', name: "label" }, this.label))), (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-radio-button"; }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 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 Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 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/radio-group/radio-group.js

@@ -69,11 +69,11 @@ export class RadioButtonGroupComponent {
         this.removeChildText();
     }
     render() {
-        return (h(Host, { key: '7d9c1d82a8e36e51555112beb36140829d971c22' }, h("div", { key: 'c3a003fe8e873cdcf0f998087fb9ca88cd8cf829', class: {
+        return (h(Host, { key: '5b36240943436717e043f0c25483eef6f90229f0' }, h("div", { key: 'b9d174d04e5a280beed928e37f4355d8c1edf1aa', class: {
                 'b2b-radio-group': true,
                 'b2b-radio-group--error': this.invalid && !this.disabled,
                 [`b2b-radio-group--${this.alignment}`]: true,
-            } }, (this.label || this.labelSlot) && (h("b2b-input-label", { id: this.name, required: this.required }, h("slot", { name: "label" }, this.label))), h("fieldset", { key: '4d513eb53eb50d556d3e9b3635b0560dd337dd46' }, h("div", { key: '18268876504e9af54aa1815c76365ad41ff5b0ee', class: "b2b-radio-group-options" }, h("slot", { key: '78b7c3a6a05ace18d201b6fc600969df040ad531' }))), (this.hint !== undefined && !this.invalid) ||
+            } }, (this.label || this.labelSlot) && (h("b2b-input-label", { id: this.name, required: this.required }, h("slot", { name: "label" }, this.label))), h("fieldset", { key: 'd4e428dda283b88ed29f4259c3c7ad71d484648d' }, h("div", { key: '4ac819b081787a2dc468ebc3c0c84d8d182c7353', class: "b2b-radio-group-options" }, h("slot", { key: '4c8ee699036c8b3b672fbedbffc8efbbdaf86fa3' }))), (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-radio-group"; }

package/dist/collection/components/required-separator/required-separator.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 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 Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 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/required-separator/required-separator.js

@@ -4,7 +4,7 @@ export class B2BRequiredSeparator {
         this.label = 'Pflichtfeld';
     }
     render() {
-        return (h(Host, { key: 'cab5659fd608d598bfdea6c24da780f5b1c8f0a4' }, h("div", { key: '107780204e6bc22b6d87014639307a1ddf0a3077', class: "b2b-required-separator__label" }, h("span", { key: '1997e65a06747f06779950ad793ddd221dcd9974', class: "b2b-required-separator__asterisk" }, "* "), h("span", { key: '44b6faacf88b76a13dcc2fcf2529354279103d83' }, this.label)), h("b2b-separator", { key: 'cf1747b9ec17ea9eb352f777f0ad25c8d6b2a927' })));
+        return (h(Host, { key: '989e81600d0748d74b57f59df342bdb8ea1646ef' }, h("div", { key: '558b14f88f32f0b21c423554290fbe72c4fa9696', class: "b2b-required-separator__label" }, h("span", { key: '65a8ed5c4af4d0e3aee00785727aad0a74eb0323', class: "b2b-required-separator__asterisk" }, "* "), h("span", { key: 'e170084c3b0d4447a9d151b17422479f78a3f6b7' }, this.label)), h("b2b-separator", { key: '42b320e566f4f7594d87f930438b3b0ba8662b7f' })));
     }
     static get is() { return "b2b-required-separator"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 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 Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 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/rounded-icon/rounded-icon.js

@@ -6,16 +6,16 @@ export class RoundedIconComponent {
         this.contentColor = 'var(--b2b-color-copy-default)';
     }
     render() {
-        return (h(Host, { key: 'aeaecbab894eae02bf8cc6c441175ec07b5540e2' }, h("div", { key: '1b25b7d2d917c742361c8126b11d5254a9fac9c1', style: {
+        return (h(Host, { key: 'cd603c194ebc3a9d6aad8e16b126ac40e47e4715' }, h("div", { key: '102c49254d5e135173553379ce5ced7022dddaa7', style: {
                 ['background-color']: this.color,
                 ['border']: `1px solid ${this.borderColor || this.color}`,
             }, class: {
                 'b2b-rounded-icon': true,
-            } }, h("div", { key: '0c5f34202db459eb45f37d1fb16bede9dd50a2e7', style: {
+            } }, h("div", { key: '447ece59e96780c6c6e0ddccc878354756e46ff7', style: {
                 ['color']: this.contentColor,
-            } }, h("slot", { key: 'f87224fdf932a13ed106c10a2ff9b173fc833bee', name: "icon" })), h("div", { key: 'a0cbad312cc610ee4f18a76b32c3d690dcd6a7b2', style: {
+            } }, h("slot", { key: 'a25891a5262400e671243fd8716f72d3b0035520', name: "icon" })), h("div", { key: 'b08770631a2ca349d90e0a9e7dd445aecf9135d9', style: {
                 ['color']: this.contentColor,
-            } }, h("slot", { key: '518902a11b10391fdb5d654baaf84ba6f7c0c65e', name: "text" })))));
+            } }, h("slot", { key: '64619abcebfc3d8e80e9edc26c9808876860de8d', name: "text" })))));
     }
     static get is() { return "b2b-rounded-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scrollable-container/scrollable-container.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 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 Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 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/scrollable-container/scrollable-container.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class ScrollableContainerComponent {
     render() {
-        return (h(Host, { key: '2fd5cba6708e2ec70567ea9b582ad5c2cbc9531f' }, h("slot", { key: '9998b1dcb05a6396e288317365d56e983baeb002' })));
+        return (h(Host, { key: '234c8e341e9dc85b7c8d7fc742445f61045b9cf6' }, h("slot", { key: 'd67a95c9c3a1a9f7ac75924d639c095578fcb2f1' })));
     }
     static get is() { return "b2b-scrollable-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/search/search.js

@@ -22,7 +22,7 @@ export class SearchComponent {
         }
     }
     render() {
-        return (h(Host, { key: 'b24052966f06f771d924c1fc7a2257155aa1fafe' }, h("b2b-input-group", { key: '35c7d7926e6d014a87d39174ba83e3eb7a323e32', disabled: this.disabled }, h("b2b-input-list", { key: 'ccf3037cf0f7d64ae7e5f37c1789a082886db2f2', slot: "start", value: this.value, placeholder: this.placeholder, optionsList: this.optionsList, "onb2b-input": this.onInput, "onb2b-option-selected": this.onOptionSelected }, h("slot", { key: '59a0f64d0f39498ddf04b3cdced2c8111de1ada9' })), h("b2b-button", { key: '7a09cbe052e0c17e9c76a53fc3c7e4694ff71461', slot: "end", variant: "primary", onClick: this.onSearchClicked }, h("b2b-icon-100", { key: 'c4f19e34ed7129a57b2d7b1439a376ce11464611', icon: "b2b_icon-search", clickable: true })))));
+        return (h(Host, { key: '08be0d3238571d8a4e268d7a54d382114cd05ab4' }, h("b2b-input-group", { key: 'dbba9867d3b05f80edbf79973ca51cd9d7c9ec73', disabled: this.disabled }, h("b2b-input-list", { key: 'fec8bfb0012836b4ff458569130a016d36bbef2b', slot: "start", value: this.value, placeholder: this.placeholder, optionsList: this.optionsList, "onb2b-input": this.onInput, "onb2b-option-selected": this.onOptionSelected }, h("slot", { key: '04bdd57ddbbde6f5f41f4704a2bbfa048df32aed' })), h("b2b-button", { key: '7e4d662ed1fd9423e77ee8e89beda95367f0a4a2', slot: "end", variant: "primary", onClick: this.onSearchClicked }, h("b2b-icon-100", { key: '44d5ac8b006f1fabf6d81735d6d626e0dcbbc339', icon: "b2b_icon-search", clickable: true })))));
     }
     static get is() { return "b2b-search"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/separator/separator.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 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 Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 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/separator/separator.js

@@ -4,7 +4,7 @@ export class B2bSeparatorComponent {
         this.alignment = 'horizontal';
     }
     render() {
-        return (h(Host, { key: '2a85d5e6381c1c666d57d9439ee6df185b7e41d3' }, h("div", { key: '6939b9e06e5c27d2ea0299a1165accaeeb33bc3e', class: {
+        return (h(Host, { key: '06f767c6c587079b6ed216081a4df3c9e599d28f' }, h("div", { key: 'c4439cc5b13f6b2932e982c03a3c2518341ef8f2', class: {
                 [`b2b-separator--${this.alignment}`]: true,
             } })));
     }

package/dist/collection/components/shimmer/shimmer.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 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 Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 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/shimmer/shimmer.js

@@ -10,7 +10,7 @@ export class ShimmerComponent {
             width: `${this.width}px`,
             height: `${this.height}px`,
         };
-        return (h(Host, { key: 'd49facd00500b965059c0322adfc56961bc69f8e' }, this.loading ? (h("div", { class: "b2b-shimmer", style: shimmerStyle })) : (h("slot", null))));
+        return (h(Host, { key: 'd56356a77a4cc11ceee13d7e579a4df5aa9826f1' }, this.loading ? (h("div", { class: "b2b-shimmer", style: shimmerStyle })) : (h("slot", null))));
     }
     static get is() { return "b2b-shimmer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/snackbar/snackbar.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 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 Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 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/snackbar/snackbar.e2e.js

@@ -38,8 +38,6 @@ describe('B2B-Snackbar', () => {
         await page.setContent(`<b2b-snackbar opened timed="true" duration="1000">test</b2b-snackbar>`);
         const element = await page.find('b2b-snackbar >>> div');
         expect(await element.isVisible()).toBe(true);
-        await element.hover();
-        await page.mouse.move(0, 0);
         await new Promise(res => setTimeout(res, 2000));
         await page.waitForChanges();
         const snackbar = await page.find('b2b-snackbar');

package/dist/collection/components/snackbar/snackbar.js

@@ -14,6 +14,9 @@ export class SnackbarComponent {
         this.close = () => {
             this.opened = false;
             this.b2bClose.emit();
+            if (this.timed && this.type !== 'error') {
+                this.clearTimer();
+            }
         };
         this.isActionPresent = () => {
             return this.hasAction;
@@ -51,22 +54,25 @@ export class SnackbarComponent {
         this.width = undefined;
     }
     onVisibleChange(newValue) {
+        if (newValue) {
+            this.open();
+        }
+    }
+    componentWillLoad() {
+        this.onVisibleChange(this.opened);
+    }
+    open() {
         if (this.timed && this.type !== 'error') {
-            if (newValue) {
-                this.remainingTime = this.duration;
-                this.startTimer();
-            }
-            else {
-                this.clearTimer();
-            }
+            this.remainingTime = this.duration;
+            this.startTimer();
         }
     }
     startTimer() {
+        this.clearTimer();
         if (this.timed && this.type !== 'error') {
-            this.clearTimer();
             this.startTime = Date.now();
             this.timeoutId = window.setTimeout(() => {
-                this.opened = false;
+                this.close();
             }, this.remainingTime);
         }
     }
@@ -80,17 +86,17 @@ export class SnackbarComponent {
         clearTimeout(this.timeoutId);
     }
     render() {
-        return (h(Host, { key: '693f7639a65edfd76e101540ccd663cc3f533448', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'f522b01889ee90866e2fd01036805139aa0f39df', class: {
+        return (h(Host, { key: 'b22311754d7186da6012cec8f82d251f3cbafd83', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '810bcfee20a5b9a88586ad1cb98c685819381847', class: {
                 'b2b-snackbar': true,
                 [`b2b-snackbar--${this.type}`]: true,
                 'b2b-snackbar--opened': this.opened,
-            }, style: this.width ? { width: this.width } : { width: 'auto' } }, h("div", { key: '3cafcd2cbff1203950ad15b038f0346e12232131', class: "b2b-snackbar__content" }, h("span", { key: '5811cd72a94d7ba281f3733dd9ed0281cb47c37f', class: { [`b2b-snackbar--${this.type}__icon`]: true } }, this.chooseIcon()), h("p", { key: '079f6ad5e83c365a224bc0c1f9862cd6409a7a6d', class: "b2b-snackbar__content__description" }, this.description)), this.isActionPresent() && (h("div", { class: {
+            }, style: this.width ? { width: this.width } : { width: 'auto' } }, h("div", { key: 'd8e5cb8e8cda32693ae68055cb06918f51f1688d', class: "b2b-snackbar__content" }, h("span", { key: '8e31a914129f255151569eaf0e806f337b085f6d', class: { [`b2b-snackbar--${this.type}__icon`]: true } }, this.chooseIcon()), h("p", { key: '3a6faa0dd08da3ea8f830bc59116ab50b574d770', class: "b2b-snackbar__content__description" }, this.description)), this.isActionPresent() && (h("div", { class: {
                 'b2b-snackbar__action': true,
                 [`b2b-snackbar__action--${this.type}`]: true,
-            }, onClick: this.handleActionClick }, h("a", null, this.actionLabel))), h("div", { key: '901aa5ad65f440e7de8a87e5a1fd88643b9766b6', class: {
+            }, onClick: this.handleActionClick }, h("a", null, this.actionLabel))), h("div", { key: '362ad1e19f9ea031f1ef5991da654d47a0a1f701', class: {
                 'b2b-snackbar__close-icon': true,
                 [`b2b-snackbar__close-icon--${this.type}`]: true,
-            }, onClick: this.close }, h("b2b-icon-100", { key: 'efd48b87b50a36d790f59bccfc3553a9d105adfd', clickable: true, size: 24, icon: "b2b_icon-close" })))));
+            }, onClick: this.close }, h("b2b-icon-100", { key: '1913c3bfc643fb845568c4388cdd300f6c3df8a7', clickable: true, size: 24, icon: "b2b_icon-close" })))));
     }
     static get is() { return "b2b-snackbar"; }
     static get encapsulation() { return "shadow"; }
@@ -156,7 +162,7 @@ export class SnackbarComponent {
                     "text": "Whether the snackbar is currently visible. Set to true to display the snackbar."
                 },
                 "attribute": "opened",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "timed": {

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

@@ -21,7 +21,7 @@ const meta = {
     args: {
         type: 'info',
         description: `This is a snackbar`,
-        opened: true,
+        opened: false,
         timed: false,
         duration: 5000,
         hasAction: true,
@@ -38,12 +38,13 @@ const meta = {
         const hideSnackbar = async () => {
             updateArgs({ opened: false });
         };
-        return html ` <b2b-button variant="primary" @click=${showSnackBar}
+        return html ` <b2b-button @click=${showSnackBar} variant="primary"
         >Show Snackbar</b2b-button
       >
       <b2b-button @click=${hideSnackbar}>Hide Snackbar</b2b-button>
       <hr />
       <b2b-snackbar
+        @b2b-close=${hideSnackbar}
         description="${args.description}"
         type="${args.type}"
         opened="${args.opened}"
@@ -84,7 +85,7 @@ export const ErrorSnackbar = {
     },
 };
 export const TimedSnackbar = {
-    args: Object.assign(Object.assign({}, meta.args), { type: 'info', timed: true, duration: 3000, description: 'This is timed snackbar' }),
+    args: Object.assign(Object.assign({}, meta.args), { type: 'info', opened: true, timed: true, duration: 10000, description: 'This is timed snackbar' }),
     play: async () => {
         await showSnackBar();
     },

package/dist/collection/components/spinner/spinner.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 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 Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 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/spinner/spinner.js

@@ -9,7 +9,7 @@ export class SpinnerComponent {
         this.color = 'primary';
     }
     render() {
-        return (h("div", { key: '8739a726fd4f0a51b87d51cab6a3f85264f1ed08', class: {
+        return (h("div", { key: '4260cc2e742b9d3a77fc1739f7de248ee70ffd69', class: {
                 'b2b-spinner': true,
                 ['b2b-spinner--size-' + this.size]: true,
                 ['b2b-spinner--color-' + this.color]: true,

package/dist/collection/components/tab/tab.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 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 Thu, 27 Mar 2025 08:54:03 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 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;