@otto-de/b2b-core-components 1.24.0 → 1.26.0

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,4 +1,4 @@
-import { screen } from "@storybook/testing-library";
+import { screen } from "@storybook/test";
 import { getArgTypes } from "../../docs/config/utils";
 import { useArgs } from "@storybook/preview-api";
 import { html } from "lit-html";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -20,7 +20,7 @@ export class B2bMultiSelectDropdown {
                     return (h("b2b-chip-component", { label: option, value: option, "onB2b-close": this.handleChipClose }));
                 }
                 else if (index === this.maxOptionsVisible) {
-                    return (h("b2b-chip-component", { label: "...", class: "b2b-multiselect-dropdown__option--show-more-button", "has-close-button": "false", onClick: this.handleOverflowOptionsClick }));
+                    return (h("b2b-chip-component", { label: "...", class: "b2b-multiselect-dropdown__option--show-more-button", hasCloseButton: true, onClick: this.handleOverflowOptionsClick }));
                 }
                 else {
                     return;
@@ -153,13 +153,13 @@ export class B2bMultiSelectDropdown {
         this.updateSelectAll(options);
     }
     render() {
-        return (h(Host, { key: 'ae0810d77f48d5aed5fb7d97e1b3a800a4a057b0', onFocus: this.setElementOnFocus, onBlur: this.setElementOnBlur, onClick: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("b2b-input-label", { key: 'e9e67e9c02c8885919740f97c3c52f12991cff66' }, this.label), h("div", { key: '43e41efade0b8d761f1d8edf11415a43c461e804', class: {
+        return (h(Host, { key: '53aff695c900964cb3dc5bcb68c10b5285be16cd', onFocus: this.setElementOnFocus, onBlur: this.setElementOnBlur, onClick: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("b2b-input-label", { key: '983a3b773e397fe5e1512168acc12d07a41e57ff' }, this.label), h("div", { key: '577f648af5e7fda2e1a225a97faf05612c84e772', class: {
                 'b2b-multiselect-dropdown': true,
                 'b2b-multiselect-dropdown--open': this.isElementFocused,
-            }, tabindex: 0, role: "combobox", "aria-expanded": this.isElementFocused }, this.currentSelectedValues.length === 0 ? (h("span", { class: "b2b-multiselect-dropdown__placeholder" }, this.placeholder)) : (h("div", { class: "b2b-multiselect-dropdown__chip-container" }, this.renderChips())), h("b2b-icon-100", { key: '3631f88b18b5a2088f666727fac8f08ba0260f48', icon: "b2b_icon-arrow-down" })), h("div", { key: 'f022633b89930b1904788affa426ba36a451c631', class: {
+            }, tabindex: 0, role: "combobox", "aria-expanded": this.isElementFocused }, this.currentSelectedValues.length === 0 ? (h("span", { class: "b2b-multiselect-dropdown__placeholder" }, this.placeholder)) : (h("div", { class: "b2b-multiselect-dropdown__chip-container" }, this.renderChips())), h("b2b-icon-100", { key: '9bbe6f5442662cd102292846f5476b8ce899356a', icon: "b2b_icon-arrow-down" })), h("div", { key: '17593767cfeb17c341efd46dfc007197847c97bb', class: {
                 'b2b-multiselect-dropdown__options-container': true,
                 'b2b-multiselect-dropdown__options-container--visible': this.isElementFocused,
-            } }, h("div", { key: '1b1b314b3f31e8eb22e627f533d9662fc89c095b', class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { key: 'c041573e27abd76a3574cb3bd75cc34a3add6862', class: "b2b-multiselect-dropdown__option__search" }, h("input", { key: 'f4e01c003daf791325a5f7bd2e935497204749b0', type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { key: '6540d5bd19352eebbeb4328065a1f810d7817d63', class: "b2b-multiselect-dropdown__option__select-all", option: this.selectAllLabel, id: "select-all", "onB2b-option-selected": this.handleSelectAll }), this.hasOptionList &&
+            } }, h("div", { key: 'fe585cea40b0ef97d46cbd3a92f60c7382f75a97', class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { key: '863879f8b34e870bb2f82d62edf07aad8a475b6d', class: "b2b-multiselect-dropdown__option__search" }, h("input", { key: '9866a72f2f7a4b19968ac5c03d6b07e60fcb6504', type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { key: '93c740c3ba53544c90d6c1130fee1e444b53965b', class: "b2b-multiselect-dropdown__option__select-all", option: this.selectAllLabel, id: "select-all", "onB2b-option-selected": this.handleSelectAll }), this.hasOptionList &&
             this.currentList.map(option => (h("b2b-multiselect-option", { "onB2b-option-selected": this.handleSelectedChange, option: option })))))));
     }
     static get is() { return "b2b-multiselect-dropdown"; }

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

@@ -30,15 +30,15 @@ const meta = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div style="width: 400px">
-    <b2b-multiselect-dropdown
-      label=${args.label}
-      max-options-visible=${args.maxOptionsVisible}
-      select-all-label=${args.selectAllLabel}
-      placeholder=${args.placeholder}
-      search-placeholder=${args.searchPlaceholder}
-      .optionsList=${args.optionsList}>
-    </b2b-multiselect-dropdown>
-  </div>`;
+      <b2b-multiselect-dropdown
+        label=${args.label}
+        max-options-visible=${args.maxOptionsVisible}
+        select-all-label=${args.selectAllLabel}
+        placeholder=${args.placeholder}
+        search-placeholder=${args.searchPlaceholder}
+        .optionsList=${args.optionsList}>
+      </b2b-multiselect-dropdown>
+    </div>`;
     },
 };
 export default meta;
@@ -50,15 +50,15 @@ export const InitialSelectedValues = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div style="width: 400px">
-    <b2b-multiselect-dropdown
-      label=${args.label}
-      max-options-visible=${args.maxOptionsVisible}
-      select-all-label=${args.selectAllLabel}
-      placeholder=${args.placeholder}
-      search-placeholder=${args.searchPlaceholder}
-      .optionsList=${args.optionsList}
-      .selectedValues=${args.selectedValues}>
-    </b2b-multiselect-dropdown>
-  </div>`;
+      <b2b-multiselect-dropdown
+        label=${args.label}
+        max-options-visible=${args.maxOptionsVisible}
+        select-all-label=${args.selectAllLabel}
+        placeholder=${args.placeholder}
+        search-placeholder=${args.searchPlaceholder}
+        .optionsList=${args.optionsList}
+        .selectedValues=${args.selectedValues}>
+      </b2b-multiselect-dropdown>
+    </div>`;
     },
 };

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -28,24 +28,24 @@ const meta = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-paragraph
-    weight="${args.weight}"
-    size="${args.size}"
-    align="${args.align}"
-    margin="${args.margin}"
-    variant="${args.variant}"
-    display="${args.display}">
-    Far far away, behind the word mountains, far from the countries Vokalia and
-    Consonantia, there live the blind texts. Separated they live in
-    Bookmarksgrove right at the coast of the Semantics, a large language ocean.
-    A small river named Duden flows by their place and supplies it with the
-    necessary regelialia. It is a paradisematic country, in which roasted parts
-    of sentences fly into your mouth. Even the all-powerful Pointing has no
-    control about the blind texts it is an almost unorthographic life One day
-    however a small line of blind text by the name of Lorem Ipsum decided to
-    leave for the far World of Grammar. The Big Oxmox advised her not to do so,
-    because there were thousands of bad Commas, wild Question Marks and devious
-    Semikoli, but the Little Blind Text didn’t listen.
-  </b2b-paragraph>`;
+      weight="${args.weight}"
+      size="${args.size}"
+      align="${args.align}"
+      margin="${args.margin}"
+      variant="${args.variant}"
+      display="${args.display}">
+      Far far away, behind the word mountains, far from the countries Vokalia
+      and Consonantia, there live the blind texts. Separated they live in
+      Bookmarksgrove right at the coast of the Semantics, a large language
+      ocean. A small river named Duden flows by their place and supplies it with
+      the necessary regelialia. It is a paradisematic country, in which roasted
+      parts of sentences fly into your mouth. Even the all-powerful Pointing has
+      no control about the blind texts it is an almost unorthographic life One
+      day however a small line of blind text by the name of Lorem Ipsum decided
+      to leave for the far World of Grammar. The Big Oxmox advised her not to do
+      so, because there were thousands of bad Commas, wild Question Marks and
+      devious Semikoli, but the Little Blind Text didn’t listen.
+    </b2b-paragraph>`;
     },
 };
 export default meta;
@@ -75,36 +75,38 @@ export const DisplayInline = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-paragraph
-      weight="${args.weight}"
-      size="${args.size}"
-      align="${args.align}"
-      margin="${args.margin}"
-      variant="${args.variant}"
-      display="${args.display}">
-      Far far away, behind the word mountains, far from the countries Vokalia
-      and Consonantia, there live the blind texts. Separated they live in
-      Bookmarksgrove right at the coast of the Semantics, a large language
-      ocean. A small river named Duden flows by their place and supplies it with
-      the necessary regelialia. It is a paradisematic country, in which roasted
-      parts of sentences fly into your mouth. Even the all-powerful Pointing has
-      no control about the blind texts it is an almost unorthographic life One
-      day however a small line of blind text by the name of Lorem Ipsum decided
-      to leave for the far World of Grammar. The Big Oxmox advised her not to do
-      so, because there were thousands of bad Commas, wild Question Marks and
-      devious Semikoli, but the Little Blind Text didn’t listen. </b2b-paragraph
-    ><b2b-paragraph
-      >Far far away, behind the word mountains, far from the countries Vokalia
-      and Consonantia, there live the blind texts. Separated they live in
-      Bookmarksgrove right at the coast of the Semantics, a large language
-      ocean. A small river named Duden flows by their place and supplies it with
-      the necessary regelialia. It is a paradisematic country, in which roasted
-      parts of sentences fly into your mouth. Even the all-powerful Pointing has
-      no control about the blind texts it is an almost unorthographic life One
-      day however a small line of blind text by the name of Lorem Ipsum decided
-      to leave for the far World of Grammar. The Big Oxmox advised her not to do
-      so, because there were thousands of bad Commas, wild Question Marks and
-      devious Semikoli, but the Little Blind Text didn’t listen.
-    </b2b-paragraph>`;
+        weight="${args.weight}"
+        size="${args.size}"
+        align="${args.align}"
+        margin="${args.margin}"
+        variant="${args.variant}"
+        display="${args.display}">
+        Far far away, behind the word mountains, far from the countries Vokalia
+        and Consonantia, there live the blind texts. Separated they live in
+        Bookmarksgrove right at the coast of the Semantics, a large language
+        ocean. A small river named Duden flows by their place and supplies it
+        with the necessary regelialia. It is a paradisematic country, in which
+        roasted parts of sentences fly into your mouth. Even the all-powerful
+        Pointing has no control about the blind texts it is an almost
+        unorthographic life One day however a small line of blind text by the
+        name of Lorem Ipsum decided to leave for the far World of Grammar. The
+        Big Oxmox advised her not to do so, because there were thousands of bad
+        Commas, wild Question Marks and devious Semikoli, but the Little Blind
+        Text didn’t listen. </b2b-paragraph
+      ><b2b-paragraph
+        >Far far away, behind the word mountains, far from the countries Vokalia
+        and Consonantia, there live the blind texts. Separated they live in
+        Bookmarksgrove right at the coast of the Semantics, a large language
+        ocean. A small river named Duden flows by their place and supplies it
+        with the necessary regelialia. It is a paradisematic country, in which
+        roasted parts of sentences fly into your mouth. Even the all-powerful
+        Pointing has no control about the blind texts it is an almost
+        unorthographic life One day however a small line of blind text by the
+        name of Lorem Ipsum decided to leave for the far World of Grammar. The
+        Big Oxmox advised her not to do so, because there were thousands of bad
+        Commas, wild Question Marks and devious Semikoli, but the Little Blind
+        Text didn’t listen.
+      </b2b-paragraph>`;
     },
 };
 export const DisplayInlineBlock = {
@@ -112,35 +114,37 @@ export const DisplayInlineBlock = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-paragraph
-      weight="${args.weight}"
-      size="${args.size}"
-      align="${args.align}"
-      margin="${args.margin}"
-      variant="${args.variant}"
-      display="${args.display}">
-      Far far away, behind the word mountains, far from the countries Vokalia
-      and Consonantia, there live the blind texts. Separated they live in
-      Bookmarksgrove right at the coast of the Semantics, a large language
-      ocean. A small river named Duden flows by their place and supplies it with
-      the necessary regelialia. It is a paradisematic country, in which roasted
-      parts of sentences fly into your mouth. Even the all-powerful Pointing has
-      no control about the blind texts it is an almost unorthographic life One
-      day however a small line of blind text by the name of Lorem Ipsum decided
-      to leave for the far World of Grammar. The Big Oxmox advised her not to do
-      so, because there were thousands of bad Commas, wild Question Marks and
-      devious Semikoli, but the Little Blind Text didn’t listen. </b2b-paragraph
-    ><b2b-paragraph
-      >Far far away, behind the word mountains, far from the countries Vokalia
-      and Consonantia, there live the blind texts. Separated they live in
-      Bookmarksgrove right at the coast of the Semantics, a large language
-      ocean. A small river named Duden flows by their place and supplies it with
-      the necessary regelialia. It is a paradisematic country, in which roasted
-      parts of sentences fly into your mouth. Even the all-powerful Pointing has
-      no control about the blind texts it is an almost unorthographic life One
-      day however a small line of blind text by the name of Lorem Ipsum decided
-      to leave for the far World of Grammar. The Big Oxmox advised her not to do
-      so, because there were thousands of bad Commas, wild Question Marks and
-      devious Semikoli, but the Little Blind Text didn’t listen.
-    </b2b-paragraph>`;
+        weight="${args.weight}"
+        size="${args.size}"
+        align="${args.align}"
+        margin="${args.margin}"
+        variant="${args.variant}"
+        display="${args.display}">
+        Far far away, behind the word mountains, far from the countries Vokalia
+        and Consonantia, there live the blind texts. Separated they live in
+        Bookmarksgrove right at the coast of the Semantics, a large language
+        ocean. A small river named Duden flows by their place and supplies it
+        with the necessary regelialia. It is a paradisematic country, in which
+        roasted parts of sentences fly into your mouth. Even the all-powerful
+        Pointing has no control about the blind texts it is an almost
+        unorthographic life One day however a small line of blind text by the
+        name of Lorem Ipsum decided to leave for the far World of Grammar. The
+        Big Oxmox advised her not to do so, because there were thousands of bad
+        Commas, wild Question Marks and devious Semikoli, but the Little Blind
+        Text didn’t listen. </b2b-paragraph
+      ><b2b-paragraph
+        >Far far away, behind the word mountains, far from the countries Vokalia
+        and Consonantia, there live the blind texts. Separated they live in
+        Bookmarksgrove right at the coast of the Semantics, a large language
+        ocean. A small river named Duden flows by their place and supplies it
+        with the necessary regelialia. It is a paradisematic country, in which
+        roasted parts of sentences fly into your mouth. Even the all-powerful
+        Pointing has no control about the blind texts it is an almost
+        unorthographic life One day however a small line of blind text by the
+        name of Lorem Ipsum decided to leave for the far World of Grammar. The
+        Big Oxmox advised her not to do so, because there were thousands of bad
+        Commas, wild Question Marks and devious Semikoli, but the Little Blind
+        Text didn’t listen.
+      </b2b-paragraph>`;
     },
 };

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -25,10 +25,10 @@ const meta = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-progress-bar
-    progress="${args.progress}"
-    label="${args.label}"
-    label-type="${args.labelType}"
-    label-position="${args.labelPosition}" />`;
+      progress="${args.progress}"
+      label="${args.label}"
+      label-type="${args.labelType}"
+      label-position="${args.labelPosition}" />`;
     },
 };
 export default meta;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -48,6 +48,7 @@ export class SnackbarComponent {
         this.duration = 5000;
         this.hasAction = false;
         this.actionLabel = undefined;
+        this.width = undefined;
     }
     onVisibleChange(newValue) {
         if (this.timed && this.type !== 'error') {
@@ -79,17 +80,17 @@ export class SnackbarComponent {
         clearTimeout(this.timeoutId);
     }
     render() {
-        return (h(Host, { key: '2c1fa25b458eb820c0d5b2bbff6e8b5c4f67a435', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '9c84de32c173d00d275946785236a799a4044955', class: {
+        return (h(Host, { key: '693f7639a65edfd76e101540ccd663cc3f533448', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'f522b01889ee90866e2fd01036805139aa0f39df', class: {
                 'b2b-snackbar': true,
                 [`b2b-snackbar--${this.type}`]: true,
                 'b2b-snackbar--opened': this.opened,
-            } }, h("div", { key: 'a6cdf11eb13128287c1eb0c0cd5158ce940b5ce1', class: "b2b-snackbar__content" }, h("span", { key: '5e68c325dc40a7e78af3103b7a748cf1ffb4519d', class: { [`b2b-snackbar--${this.type}__icon`]: true } }, this.chooseIcon()), h("p", { key: '740611167aadea1a6e6aee692f6b634401220875', class: "b2b-snackbar__content__description" }, this.description)), this.isActionPresent() && (h("div", { class: {
+            }, 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: {
                 'b2b-snackbar__action': true,
                 [`b2b-snackbar__action--${this.type}`]: true,
-            }, onClick: this.handleActionClick }, h("a", null, this.actionLabel))), h("div", { key: '1f5a0bd09d7dfc7c2753fc9acc5b56a81315c0a0', class: {
+            }, onClick: this.handleActionClick }, h("a", null, this.actionLabel))), h("div", { key: '901aa5ad65f440e7de8a87e5a1fd88643b9766b6', class: {
                 'b2b-snackbar__close-icon': true,
                 [`b2b-snackbar__close-icon--${this.type}`]: true,
-            }, onClick: this.close }, h("b2b-icon-100", { key: '4b0ea44065f95e776ef0650092aea0742b1588a5', clickable: true, size: 24, icon: "b2b_icon-close" })))));
+            }, onClick: this.close }, h("b2b-icon-100", { key: 'efd48b87b50a36d790f59bccfc3553a9d105adfd', clickable: true, size: 24, icon: "b2b_icon-close" })))));
     }
     static get is() { return "b2b-snackbar"; }
     static get encapsulation() { return "shadow"; }
@@ -228,6 +229,23 @@ export class SnackbarComponent {
                 },
                 "attribute": "action-label",
                 "reflect": false
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width of the snackbar can be specified in px. If not provided, the default value is auto, which will adjust the width to fit the content."
+                },
+                "attribute": "width",
+                "reflect": false
             }
         };
     }

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

@@ -13,7 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 import { useArgs } from "@storybook/preview-api";
-import { screen } from "@storybook/testing-library";
+import { screen } from "@storybook/test";
 getArgTypes('b2b-snackbar');
 const meta = {
     title: 'Components/Status & Feedback/Snackbar',
@@ -26,6 +26,7 @@ const meta = {
         duration: 5000,
         hasAction: true,
         actionLabel: 'Call to Action',
+        width: 'auto',
     },
     argTypes: getArgTypes('b2b-snackbar'),
     render: (_a) => {
@@ -49,7 +50,8 @@ const meta = {
         timed="${args.timed}"
         duration="${args.duration}"
         has-action="${args.hasAction}"
-        action-label="${args.actionLabel}"></b2b-snackbar>`;
+        action-label="${args.actionLabel}"
+        width="${args.width}"></b2b-snackbar>`;
     },
 };
 export default meta;
@@ -87,3 +89,9 @@ export const TimedSnackbar = {
         await showSnackBar();
     },
 };
+export const WithWidth = {
+    args: Object.assign(Object.assign({}, meta.args), { type: 'info', description: 'This is a snackbar with custom width', width: '800px' }),
+    play: async () => {
+        await showSnackBar();
+    },
+};