@otto-de/b2b-core-components 1.11.1 → 1.12.1

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 18 Jun 2024 10:17:41 GMT
+ * Generated on Wed, 31 Jul 2024 07:09:47 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 18 Jun 2024 10:17:42 GMT
+ * Generated on Wed, 31 Jul 2024 07:09:47 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -261,6 +261,17 @@
   align-items: center;
   margin-bottom: var(--b2b-size-space-75);
 }
+:host .b2b-modal__dialog__header-left {
+  display: flex;
+  justify-content: flex-start;
+}
+:host .b2b-modal__dialog__header-left b2b-headline {
+  padding-right: 8px;
+}
+:host .b2b-modal__dialog__header-right {
+  display: flex;
+  justify-content: flex-end;
+}
 :host .b2b-modal__dialog__close {
   cursor: pointer;
   background: transparent;

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

@@ -85,7 +85,7 @@ export class ModalComponent {
         return (h(Host, { key: '1e3ae2d0db3df6fd7fb249181560471102f81ad4' }, h("div", { key: 'b6a9ce0bc06ca54cba7885b3094f448df6440194', class: { 'b2b-modal': true, 'b2b-modal--open': this.opened } }, h("div", { key: 'a114fc4834406ac93c554fa5c2058500c229ecfe', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabIndex: 0 }), h("div", { key: '49ce79940badc68db9a6469f96bbe43b5803ced2', class: {
                 'b2b-modal__dialog': true,
                 [`b2b-modal__dialog--${this.variant}`]: true,
-            } }, h("div", { key: 'e1542497ec46e553b5883a8bec9fb97bc8e41bb8', class: "b2b-modal__dialog__header" }, h("b2b-headline", { key: '29fdd8544ab096acac7fb567e12db5209b65fadc', align: "center", size: "200", noMargin: true }, this.heading), h("button", { key: '19d556190a35343e71e041cb7647fc71e43bd110', type: "button", class: "b2b-modal__dialog__close", onMouseEnter: this.toggleIconHover, onMouseLeave: this.toggleIconHover, onClick: this.handleClickDismiss, ref: el => (this.closeButton = el) }, h("b2b-icon", { key: 'ec66472357c70f7591a0851ceae4f1263ba32b31', clickable: true, icon: "b2b_icon-close", color: this.iconHover ? 'primary' : 'secondary' }))), h("div", { key: '4cc41712957fcdbefa2263730422b4dcc59b01e8', class: "b2b-modal__dialog__body" }, h("slot", { key: 'c6810b8c835f0099472fbe29a895945387098319' })), h("div", { key: 'd26b872b6cbef52e0d0088f792616c0f3c2872b0', class: "b2b-modal__dialog__footer" }, h("div", { key: '363ab2250e580cb5ee99c53abaf5acc930a1aec5', class: "b2b-modal__dialog__footer-left" }, h("slot", { key: '95f725635933d5dc8a60de63aed3f7a2d82f2ef5', name: "footer-left" })), h("div", { key: 'e6d1776ad02740eedac8b893bae6f28519c55e49', class: "b2b-modal__dialog__footer-right" }, h("slot", { key: '6b310747f42518cc6a4f7631a1bbb7b59cf3e9cb', name: "footer-right" })))), h("div", { key: '83158d3f234936df43c5d7ad5976215acf374c7b', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabIndex: 0 }), h("div", { key: 'e5d6898b325a6560d30c65b62b27b1ad0402dac0', class: "b2b-modal__backdrop", onClick: this.handleBackdropDismiss }))));
+            } }, h("div", { key: 'e1542497ec46e553b5883a8bec9fb97bc8e41bb8', class: "b2b-modal__dialog__header" }, h("div", { key: 'eeb61001cfc5090b6f4bd969fb8b79d24a69bfa5', class: "b2b-modal__dialog__header-left" }, h("b2b-headline", { key: '84172ec8e265fce0aa43bbc23b448338524a5308', align: "center", size: "200", noMargin: true }, this.heading), h("slot", { key: 'd77b0510ea6499190dcb84fdf0568bf350dd335a', name: "header-icon" })), h("div", { key: '9593ad5db17f58b9d6fd78dd2ba2222cf79a898d', class: "b2b-modal__dialog__header-right" }, h("button", { key: '58891bff498f89f768cce4f47e4f645f30e7cdad', type: "button", class: "b2b-modal__dialog__close", onMouseEnter: this.toggleIconHover, onMouseLeave: this.toggleIconHover, onClick: this.handleClickDismiss, ref: el => (this.closeButton = el) }, h("b2b-icon", { key: '13e59be8efad1023f31dfa312587e35ef8d9fe67', clickable: true, icon: "b2b_icon-close", color: this.iconHover ? 'primary' : 'secondary' })))), h("div", { key: '924bef84d6894ce17a3d66a2d9b23f691b9223cd', class: "b2b-modal__dialog__body" }, h("slot", { key: 'b07dc09829fac404e024d088ac2d81077e8324a5' })), h("div", { key: '7433546732ce4e1328cf69f2854f9fa28b0a9fdd', class: "b2b-modal__dialog__footer" }, h("div", { key: 'c27513e66a231d28fe1daa43161314c618ba796b', class: "b2b-modal__dialog__footer-left" }, h("slot", { key: '7a6207d701937ba3862556baf8bd3fc7d0a5723a', name: "footer-left" })), h("div", { key: '987111726c944467252370d3584cfc48abe73fd4', class: "b2b-modal__dialog__footer-right" }, h("slot", { key: '2937656f11a5f6ab715790635d36ece40f87ce98', name: "footer-right" })))), h("div", { key: '4dda8705d09b21f15472bc1b0971d50dd8c3b9bb', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabIndex: 0 }), h("div", { key: 'b8097e7b4bcbada1bec1e937296567e01042cf3d', class: "b2b-modal__backdrop", onClick: this.handleBackdropDismiss }))));
     }
     static get is() { return "b2b-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,6 +27,7 @@ const Template = ({ opened, variant, heading, backdropDismiss, escDismiss, conte
       heading="${heading}"
       backdrop-dismiss="${backdropDismiss}"
       esc-dismiss="${escDismiss}">
+      <b2b-icon-100 slot="header-icon" icon="b2b_icon-info"></b2b-icon-100>
       <div>${content}</div>
       <b2b-paragraph slot="footer-left">* Left Slot</b2b-paragraph>
       <b2b-button @click=${closeModal} slot="footer-right">Close</b2b-button>

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 18 Jun 2024 10:17:41 GMT
+ * Generated on Wed, 31 Jul 2024 07:09:47 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 18 Jun 2024 10:17:42 GMT
+ * Generated on Wed, 31 Jul 2024 07:09:47 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -15,7 +15,7 @@ export class B2bMultiSelectDropdown {
             return Array.from(this.hostElement.shadowRoot.querySelectorAll('b2b-multiselect-option')).slice(1);
         };
         this.renderChips = () => {
-            return this.selectedValues.map((option, index) => {
+            return this.currentSelectedValues.map((option, index) => {
                 if (index < this.maxOptionsVisible) {
                     return (h("b2b-chip-component", { label: option, value: option, "onB2b-close": this.handleChipClose }));
                 }
@@ -35,14 +35,14 @@ export class B2bMultiSelectDropdown {
         this.handleSelectedChange = event => {
             const newOption = event.detail.selectedOption;
             if (event.detail.selected) {
-                this.selectedValues = [...this.selectedValues, newOption];
+                this.currentSelectedValues = [...this.currentSelectedValues, newOption];
             }
             else {
-                this.selectedValues = this.selectedValues.filter(el => el !== newOption);
+                this.currentSelectedValues = this.currentSelectedValues.filter(el => el !== newOption);
             }
         };
         this.handleChipClose = event => {
-            this.selectedValues = this.selectedValues.filter(el => el !== event.detail.value);
+            this.currentSelectedValues = this.currentSelectedValues.filter(el => el !== event.detail.value);
             this.updateOption(event.detail.value);
             this.resetFocus();
         };
@@ -55,7 +55,7 @@ export class B2bMultiSelectDropdown {
             // Deselect all to avoid caching issues in Vue
             options.forEach(option => (option.selected = false));
             options
-                .filter(option => this.selectedValues.includes(option.option))
+                .filter(option => this.currentSelectedValues.includes(option.option))
                 .forEach(option => (option.selected = true));
         };
         this.setElementOnFocus = () => {
@@ -96,10 +96,10 @@ export class B2bMultiSelectDropdown {
             }
             if (newVal) {
                 // filter out duplicates
-                this.selectedValues = Array.from(new Set([...this.selectedValues, ...newVals]));
+                this.currentSelectedValues = Array.from(new Set([...this.currentSelectedValues, ...newVals]));
             }
             else {
-                this.selectedValues = this.selectedValues.filter(option => !newVals.includes(option));
+                this.currentSelectedValues = this.currentSelectedValues.filter(option => !newVals.includes(option));
             }
         };
         this.updateSelectAll = (options) => {
@@ -111,16 +111,20 @@ export class B2bMultiSelectDropdown {
         };
         this.label = undefined;
         this.placeholder = undefined;
+        this.selectedValues = [];
         this.optionsList = [];
         this.searchPlaceholder = undefined;
         this.selectAllLabel = undefined;
         this.maxOptionsVisible = 8;
-        this.selectedValues = [];
+        this.currentSelectedValues = [];
         this.currentList = this.optionsList;
         this.value = '';
         this.isElementFocused = false;
         this.hasOptionList = this.optionsList.length > 0;
     }
+    componentWillLoad() {
+        this.currentSelectedValues = this.selectedValues.filter(value => this.optionsList.includes(value));
+    }
     /** Needed to trigger a re-render for async data */
     watchPropHandler(newList) {
         this.hasOptionList = newList.length > 0;
@@ -128,8 +132,8 @@ export class B2bMultiSelectDropdown {
             this.currentList = newList;
         }
     }
-    handleSelectedValuesChange() {
-        this.b2bChange.emit(this.selectedValues);
+    handleSelectedValuesChange(newValues) {
+        this.b2bChange.emit(newValues);
     }
     componentDidUpdate() {
         const options = this.getOptions();
@@ -137,13 +141,13 @@ export class B2bMultiSelectDropdown {
         this.updateSelectAll(options);
     }
     render() {
-        return (h(Host, { key: 'cbbdb945dffb739b2c6c8169dc6ae1255c9973ed', onFocus: this.setElementOnFocus, onBlur: this.setElementOnBlur, onClick: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("b2b-input-label", { key: 'a71be7e938a7521065e1b7b37d49b07b583befb3' }, this.label), h("div", { key: '20c556fa0cdc2865aceba7b2727123dbfdcc9421', class: {
+        return (h(Host, { key: 'daeee1f39392ed4b83f2c51a90a1971dcbbb2843', onFocus: this.setElementOnFocus, onBlur: this.setElementOnBlur, onClick: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("b2b-input-label", { key: '7733bc1155f8eafdd14dc066d545f8aaef609fa7' }, this.label), h("div", { key: 'a68d14971e947a23fd60684eb91919ac71814fe1', class: {
                 'b2b-multiselect-dropdown': true,
                 'b2b-multiselect-dropdown--open': this.isElementFocused,
-            }, tabindex: 0, role: "combobox", "aria-expanded": this.isElementFocused }, this.selectedValues.length === 0 ? (h("span", { class: "b2b-multiselect-dropdown__placeholder" }, this.placeholder)) : (h("div", { class: "b2b-multiselect-dropdown__chip-container" }, this.renderChips())), h("b2b-icon", { key: 'd85fb652335ecf99e8ee48126593ecd99105f29c', icon: "b2b_icon-arrow-down" })), h("div", { key: '0adc8f117cf037d3416b80ba6192afcea055cea4', 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", { key: 'd4e290f3b03cb805d525f8896709f1fe48e9b455', icon: "b2b_icon-arrow-down" })), h("div", { key: 'd9578e28d9fe2f33c4010ad664f7d1f0abb62864', class: {
                 'b2b-multiselect-dropdown__options-container': true,
                 'b2b-multiselect-dropdown__options-container--visible': this.isElementFocused,
-            } }, h("div", { key: '7b175e22e92f60656470aaa914b9b0ff5edb9728', class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { key: '232d88bc64fc03ed6484ee6c1af5ea3a79fbf380', class: "b2b-multiselect-dropdown__option__search" }, h("input", { key: '4440e347e3e53a910d74c38017abaa18cd3e9479', type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { key: 'a5e7f37b2f02023e1191f09a7f7bc3b25ac6e520', class: "b2b-multiselect-dropdown__option__select-all", option: this.selectAllLabel, id: "select-all", "onB2b-option-selected": this.handleSelectAll }), this.hasOptionList &&
+            } }, h("div", { key: '2bcc252dda29ff86e8c3867c78e43b46ef596709', class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { key: '5e3d3cc7aee8f2ba8d654959b901863c9e02b266', class: "b2b-multiselect-dropdown__option__search" }, h("input", { key: 'be3b6becbcb710cbab950c55ffc5c11b2ea7319f', type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { key: '8ecde85fc975c9abc10ec89e77278547852055ea', 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"; }
@@ -194,6 +198,22 @@ export class B2bMultiSelectDropdown {
                 "attribute": "placeholder",
                 "reflect": true
             },
+            "selectedValues": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The initial values to be selected in the dropdown."
+                },
+                "defaultValue": "[]"
+            },
             "optionsList": {
                 "type": "unknown",
                 "mutable": false,
@@ -266,7 +286,7 @@ export class B2bMultiSelectDropdown {
     }
     static get states() {
         return {
-            "selectedValues": {},
+            "currentSelectedValues": {},
             "currentList": {},
             "value": {},
             "isElementFocused": {},
@@ -297,7 +317,7 @@ export class B2bMultiSelectDropdown {
                 "propName": "optionsList",
                 "methodName": "watchPropHandler"
             }, {
-                "propName": "selectedValues",
+                "propName": "currentSelectedValues",
                 "methodName": "handleSelectedValuesChange"
             }];
     }

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

@@ -24,8 +24,9 @@ const meta = {
         searchPlaceholder: 'Search fruits',
         selectAllLabel: 'Select All',
         maxOptionsVisible: 8,
+        selectedValues: ['Watermelon', 'Banana'],
     },
-    argTypes: Object.assign(Object.assign({}, multiselectArgs), { optionsList: { table: { disable: true } } }),
+    argTypes: Object.assign(Object.assign({}, multiselectArgs), { optionsList: { table: { disable: true } }, selectedValues: { table: { disable: true } } }),
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div style="width: 400px">
@@ -44,3 +45,20 @@ export default meta;
 export const Default = {
     args: Object.assign({}, meta.args),
 };
+export const InitialSelectedValues = {
+    args: Object.assign({}, meta.args),
+    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>`;
+    },
+};

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

@@ -13,9 +13,9 @@ export class B2bMultiSelectOption {
         this.indeterminate = false;
     }
     render() {
-        return (h(Host, { key: '77db883c3fee3351669cc20cddc2438ba18b2ba8', role: "option", class: {
+        return (h(Host, { key: '203177a3042f3914563e5909d13b3a3e84636d44', role: "option", class: {
                 'b2b-multiselect-dropdown__option': true,
-            } }, h("b2b-checkbox", { key: '1cb4407cc8d15c9ed9e678955752f3cb2620285d', checked: this.selected, "onB2b-change": this.handleCheckboxChange, label: this.option, indeterminate: this.indeterminate, value: this.option })));
+            } }, h("b2b-checkbox", { key: 'e5cf6ff54a4b6748cf387c9e901cc872e7613553', checked: this.selected, "onB2b-change": this.handleCheckboxChange, label: this.option, indeterminate: this.indeterminate, value: this.option })));
     }
     static get is() { return "b2b-multiselect-option"; }
     static get originalStyleUrls() {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 18 Jun 2024 10:17:41 GMT
+ * Generated on Wed, 31 Jul 2024 07:09:47 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 18 Jun 2024 10:17:42 GMT
+ * Generated on Wed, 31 Jul 2024 07:09:47 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/pagination/pagination.js

@@ -92,7 +92,7 @@ export class PaginationComponent {
         };
     }
     render() {
-        return (h("nav", { key: '8fddf2f36e6b3bb9067a55abe37896a341d7d04c' }, h("ol", { key: '1d34552bd23a4263d809213f5e6debbd920ce6e3', class: "b2b-pagination" }, this.activePage !== 1 && (h("li", { class: "b2b-pagination--previous" }, h("b2b-button", { onClick: this.selectPreviousPage, size: "50", variant: "secondary", "aria-label": this.ariaLabelPreviousPage }, PaginationConstants.BACK))), this.navItems.map((navItem, index) => {
+        return (h("nav", { key: '8fa4e333ccf87ae1533fb06433459926b5e01907' }, h("ol", { key: 'ab31cd8b5a958c174868753b274f5a9633757b54', class: "b2b-pagination" }, this.activePage !== 1 && (h("li", { class: "b2b-pagination--previous" }, h("b2b-button", { onClick: this.selectPreviousPage, size: "50", variant: "secondary", "aria-label": this.ariaLabelPreviousPage }, PaginationConstants.BACK))), this.navItems.map((navItem, index) => {
             const isItemActive = this.activePage === navItem;
             return (h("li", { class: this.getItemClass(navItem) }, h("b2b-button", { onClick: () => this.setSelectedPage(navItem, index), active: isItemActive, disabled: isItemActive, size: "50", variant: "secondary" }, navItem)));
         }), this.activePage !== this.totalPages && (h("li", { class: "b2b-pagination--next" }, h("b2b-button", { onClick: this.selectNextPage, size: "50", variant: "secondary", "aria-label": this.ariaLabelNextPage }, PaginationConstants.NEXT))))));

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 18 Jun 2024 10:17:41 GMT
+ * Generated on Wed, 31 Jul 2024 07:09:47 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 18 Jun 2024 10:17:42 GMT
+ * Generated on Wed, 31 Jul 2024 07:09:47 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -10,12 +10,12 @@ export class ParagraphComponent {
         this.align = 'left';
     }
     render() {
-        return (h("p", { key: 'e864682f09f3cabdf50b2201cb7f25c6f00ab499', class: {
+        return (h("p", { key: '116744e495658dd8f36730ae2660e66a65faaabc', class: {
                 'b2b-paragraph': true,
                 ['b2b-paragraph--size-' + this.size]: true,
                 ['b2b-paragraph--weight-' + this.weight]: true,
                 ['b2b-paragraph--align-' + this.align]: true,
-            } }, h("slot", { key: 'e9600fb127829d08c586a1c225b7c9402d2a71d6' })));
+            } }, h("slot", { key: '276a51b52de920e5a0a2114cd49919c2d78d1dcd' })));
     }
     static get is() { return "b2b-paragraph"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 18 Jun 2024 10:17:41 GMT
+ * Generated on Wed, 31 Jul 2024 07:09:47 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 18 Jun 2024 10:17:42 GMT
+ * Generated on Wed, 31 Jul 2024 07:09:47 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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: 'eba41d453db7f7c7e6c4676c9a8accbfc3545024' }, h("div", { key: '788a583e5f03f187d9d7f36eb5b84d76e6a0384c', class: {
+        return (h(Host, { key: '0a39b6b14e428d976a25f93a0e46319428b5d494' }, h("div", { key: '4c7aabd29013863f86e158147098253b135b46b1', class: {
                 [`b2b-progress-bar__${this.labelPosition}-${this.labelType}`]: true,
-            } }, h("div", { key: '6fe01b899839a19ef6f32f709fffe1837cc311df', class: "b2b-progress-bar__wrapper" }, h("div", { key: '708abc424bd46b4a5ab8b617af254b8f8186cd0b', class: "b2b-progress-bar__progress", style: {
+            } }, h("div", { key: '19b9840ce6204727dab53ef2d6b73092bfeaef36', class: "b2b-progress-bar__wrapper" }, h("div", { key: 'd60e6051f10c38d6708f0e35c45901cb5a7a30fc', class: "b2b-progress-bar__progress", style: {
                 width: `${this.getProgress()}%`,
-            } })), h("div", { key: '33f3f13217dc6be084438cadd1dd3f6b03eb4d52', class: {
+            } })), h("div", { key: '45ef8e099ae071712e67f7175dc409780621c4cc', 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 Tue, 18 Jun 2024 10:17:41 GMT
+ * Generated on Wed, 31 Jul 2024 07:09:47 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 18 Jun 2024 10:17:42 GMT
+ * Generated on Wed, 31 Jul 2024 07:09:47 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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: '88075326af9c340bef7db152eac07f8e6f9a44a2', onClick: this.onClick }, h("div", { key: '581916ce84cf61518661b0576d3351b962b2d91a', class: {
+        return (h(Host, { key: 'e9f470e9014b1cd2e062a56fe3acefbb7fbce41e', onClick: this.onClick }, h("div", { key: 'dfbf91527d2ddcacb765e5642d3b01cdfa90f482', class: {
                 'b2b-radio': true,
                 'b2b-radio--error': this.invalid && !this.disabled,
                 'b2b-radio--disabled': this.disabled,
-            } }, h("div", { key: 'e473bc87194e5023dca904970ad8af3079e8d517', class: "b2b-radio-items" }, h("input", { key: 'b99434879eae76aeb63a0e2085707456f12765bf', 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: 'e1a7eac512b4da7d8a87773cc2c928258f32be8b', id: this.name, required: this.required, disabled: this.disabled }, this.label)), (this.hint !== undefined && !this.invalid) ||
+            } }, h("div", { key: '9f31bd15de285e3f95f7493a2b38b8c30b88eb56', class: "b2b-radio-items" }, h("input", { key: '10224be09adc48cb363a40556248e7bb3fe1a542', 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: '39a120a1a44a1327c2123149ef22bfd356fc79e4', id: this.name, required: this.required, disabled: this.disabled }, 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 Tue, 18 Jun 2024 10:17:41 GMT
+ * Generated on Wed, 31 Jul 2024 07:09:47 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 18 Jun 2024 10:17:42 GMT
+ * Generated on Wed, 31 Jul 2024 07:09:47 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -66,11 +66,11 @@ export class RadioButtonGroupComponent {
         this.removeChildText();
     }
     render() {
-        return (h(Host, { key: '9af9e4cc3f922d51335b08747385d61fe30f6fff' }, h("div", { key: 'a258d462eae3b01193eff095f7ccc817230bae86', class: {
+        return (h(Host, { key: '55d628ab2c309c6001047fc70b21a78be453e7f4' }, h("div", { key: 'af11a6b06351922eecc52799adcea891466b8420', class: {
                 'b2b-radio-group': true,
                 'b2b-radio-group--error': this.invalid && !this.disabled,
                 [`b2b-radio-group--${this.alignment}`]: true,
-            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("fieldset", { key: '96a4840624fe0e1bab24480f13bd12e0c31185c3' }, h("div", { key: '6100d2c539e00138429c96ef0d5f87ecd05993a8', class: "b2b-radio-group-options" }, h("slot", { key: '661621f3383738c465545e249b7bd3bda18f3b86' }))), (this.hint !== undefined && !this.invalid) ||
+            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("fieldset", { key: 'fb4c191577566aad73e03effd5112a2356e05195' }, h("div", { key: '647d4df01ec64fc444897c2795073d5e629c2b1b', class: "b2b-radio-group-options" }, h("slot", { key: '3bfe34c9d3d6c1059554789a15a3c65b2d2251df' }))), (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 Tue, 18 Jun 2024 10:17:41 GMT
+ * Generated on Wed, 31 Jul 2024 07:09:47 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 18 Jun 2024 10:17:42 GMT
+ * Generated on Wed, 31 Jul 2024 07:09:47 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -4,7 +4,7 @@ export class B2BRequiredSeparator {
         this.label = 'Pflichtfeld';
     }
     render() {
-        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' })));
+        return (h(Host, { key: '980ff451bc77415b4be2e6483913c25230df71c8' }, h("div", { key: '3372d15f1c22487cf5410ebb7ecd12fa2e040a3e', class: "b2b-required-separator__label" }, h("span", { key: 'fb94d9c46ea930c3d1481bdffe3fa3ff994521fd', class: "b2b-required-separator__asterisk" }, "* "), h("span", { key: '4dd2f2f6f2718683a1398f60b5a50a02d103821b' }, this.label)), h("b2b-separator", { key: '093bb2473e62a0b57d535cc9a7652e93e06ec47f' })));
     }
     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 Tue, 18 Jun 2024 10:17:41 GMT
+ * Generated on Wed, 31 Jul 2024 07:09:47 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 18 Jun 2024 10:17:42 GMT
+ * Generated on Wed, 31 Jul 2024 07:09:47 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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: 'cd603c194ebc3a9d6aad8e16b126ac40e47e4715' }, h("div", { key: '102c49254d5e135173553379ce5ced7022dddaa7', style: {
+        return (h(Host, { key: 'aff67c5e9913d8a157fff480d26a1fb5cc72d849' }, h("div", { key: 'ed16eb230b738ad60b295f4208a99bc92b6aaaf6', style: {
                 ['background-color']: this.color,
                 ['border']: `1px solid ${this.borderColor || this.color}`,
             }, class: {
                 'b2b-rounded-icon': true,
-            } }, h("div", { key: '447ece59e96780c6c6e0ddccc878354756e46ff7', style: {
+            } }, h("div", { key: '1e35a094d38b7afc51c114b8e767ad12ba6c338e', style: {
                 ['color']: this.contentColor,
-            } }, h("slot", { key: 'a25891a5262400e671243fd8716f72d3b0035520', name: "icon" })), h("div", { key: 'b08770631a2ca349d90e0a9e7dd445aecf9135d9', style: {
+            } }, h("slot", { key: 'e6906fa604583425a9678f6a2b452da4aa3f3703', name: "icon" })), h("div", { key: 'b1926c222caf5307a2ff9cbab455b607026ac883', style: {
                 ['color']: this.contentColor,
-            } }, h("slot", { key: '64619abcebfc3d8e80e9edc26c9808876860de8d', name: "text" })))));
+            } }, h("slot", { key: '70493cb6e76136a4d7c95ed8cd1d3c2d10ec00b8', 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 Tue, 18 Jun 2024 10:17:41 GMT
+ * Generated on Wed, 31 Jul 2024 07:09:47 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 18 Jun 2024 10:17:42 GMT
+ * Generated on Wed, 31 Jul 2024 07:09:47 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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: '234c8e341e9dc85b7c8d7fc742445f61045b9cf6' }, h("slot", { key: 'd67a95c9c3a1a9f7ac75924d639c095578fcb2f1' })));
+        return (h(Host, { key: 'cf1acdef7e26ad1d85bde804d4a3d51ceabe38c8' }, h("slot", { key: '5ec43c51cdac7a67ce146859ac0398ecca013852' })));
     }
     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: '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", { key: '71cdddf774b0e58efc0976e7d3505aad4d8da88b', icon: "b2b_icon-search", clickable: true })))));
+        return (h(Host, { key: '6d7613cdd4db258a966144d82e39d12e03d68e03' }, h("b2b-input-group", { key: '2d2c92286f0ca1de3eedeedfd3450de6df646ff2', disabled: this.disabled }, h("b2b-input-list", { key: '8bd4b9debfed77a5692f35efab78842279f0cb01', slot: "start", value: this.value, placeholder: this.placeholder, optionsList: this.optionsList, "onb2b-input": this.onInput, "onb2b-option-selected": this.onOptionSelected }, h("slot", { key: '70e790224ee58ce4b1fecdeaa97fcb9d83d7bf28' })), h("b2b-button", { key: '18e56ed573a9a5213dbcbc656932921e2b834295', slot: "end", variant: "primary", onClick: this.onSearchClicked }, h("b2b-icon", { key: 'ea1b114947eb214743793cdffa34ea400b1934b8', 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 Tue, 18 Jun 2024 10:17:41 GMT
+ * Generated on Wed, 31 Jul 2024 07:09:47 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 18 Jun 2024 10:17:42 GMT
+ * Generated on Wed, 31 Jul 2024 07:09:47 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/separator/separator.js

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

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 18 Jun 2024 10:17:41 GMT
+ * Generated on Wed, 31 Jul 2024 07:09:47 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 18 Jun 2024 10:17:42 GMT
+ * Generated on Wed, 31 Jul 2024 07:09:47 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/spinner/spinner.js

@@ -9,7 +9,7 @@ export class SpinnerComponent {
         this.color = 'primary';
     }
     render() {
-        return (h("div", { key: '7a016d0d6719d48a5f5e8853e50a504d07749716', class: {
+        return (h("div", { key: '1f2fce9b5e76db551512b80a30f79acba981f841', 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 Tue, 18 Jun 2024 10:17:41 GMT
+ * Generated on Wed, 31 Jul 2024 07:09:47 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 18 Jun 2024 10:17:42 GMT
+ * Generated on Wed, 31 Jul 2024 07:09:47 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */