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

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

@@ -2,6 +2,9 @@ import { h, Host, } from "@stencil/core";
 export class B2bMultiSelectDropdown {
     constructor() {
         this.handleInput = event => {
+            if (this.disabled) {
+                return;
+            }
             this.value = event.target.value.toLowerCase();
             if (this.value !== '') {
                 const filteredList = this.optionsList.filter(option => option.toLowerCase().indexOf(this.value) > -1);
@@ -44,6 +47,7 @@ export class B2bMultiSelectDropdown {
         this.handleChipClose = event => {
             this.currentSelectedValues = this.currentSelectedValues.filter(el => el !== event.detail.value);
             this.updateOption(event.detail.value);
+            this.isOpen = true;
             this.resetFocus();
         };
         this.updateOption = (option) => {
@@ -59,17 +63,32 @@ export class B2bMultiSelectDropdown {
                 .forEach(option => (option.selected = true));
         };
         this.setElementOnFocus = () => {
+            if (this.disabled)
+                return;
             this.isElementFocused = true;
         };
-        this.setElementOnBlur = () => {
+        this.setElementOnBlur = (event) => {
+            const nextFocusedElement = event === null || event === void 0 ? void 0 : event.relatedTarget;
+            if (!nextFocusedElement || !this.hostElement.contains(nextFocusedElement)) {
+                this.isOpen = false;
+            }
+            else {
+                this.isOpen = true;
+            }
             this.isElementFocused = false;
         };
         this.resetFocus = () => {
+            if (this.disabled)
+                return;
             const el = this.hostElement.shadowRoot.querySelector('.b2b-multiselect-dropdown');
             el.focus();
         };
         this.handleMouseDown = (event) => {
             /** Keep dropdown open if a tag is removed */
+            if (this.disabled) {
+                event.preventDefault();
+                return;
+            }
             if (this.isElementFocused) {
                 event.preventDefault();
             }
@@ -78,6 +97,8 @@ export class B2bMultiSelectDropdown {
             }
         };
         this.handleKeyDown = (event) => {
+            if (this.disabled)
+                return;
             if (event.key === 'Enter') {
                 event.preventDefault();
                 this.resetFocus();
@@ -116,51 +137,72 @@ export class B2bMultiSelectDropdown {
         this.searchPlaceholder = undefined;
         this.selectAllLabel = undefined;
         this.maxOptionsVisible = 8;
+        this.required = false;
+        this.invalid = false;
+        this.errorMessage = undefined;
+        this.hint = undefined;
+        this.disabled = false;
         this.currentSelectedValues = [];
         this.currentList = this.optionsList;
         this.value = '';
         this.isElementFocused = false;
+        this.isOpen = false;
         this.hasOptionList = this.optionsList.length > 0;
     }
+    parsePropToArray(value) {
+        if (Array.isArray(value))
+            return value;
+        try {
+            return JSON.parse(value);
+        }
+        catch (_a) {
+            return value
+                .split(',')
+                .map(v => v.trim())
+                .filter(Boolean);
+        }
+    }
     componentWillLoad() {
-        this.parseSelectedValuesAndOptionsList();
+        this.selectedValues = this.parsePropToArray(this.selectedValues);
+        this.optionsList = this.parsePropToArray(this.optionsList);
+        this.currentList = this.optionsList;
         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;
+        this.optionsList = this.parsePropToArray(newList);
+        this.hasOptionList = this.optionsList.length > 0;
         if (this.hasOptionList) {
-            this.currentList = newList;
+            this.currentList = this.optionsList;
+            this.currentSelectedValues = this.selectedValues.filter(value => this.optionsList.includes(value));
         }
     }
+    /** Needed to trigger a re-render for async data */
+    handleSelectedValuesChangeFromOutside(newVal) {
+        this.selectedValues = this.parsePropToArray(newVal);
+        this.currentSelectedValues = this.selectedValues.filter(val => this.optionsList.includes(val));
+    }
     handleSelectedValuesChange(newValues) {
         this.b2bChange.emit(newValues);
     }
-    parseSelectedValuesAndOptionsList() {
-        if (typeof this.selectedValues === 'string') {
-            this.selectedValues = this.parseStringToArray(this.selectedValues);
-        }
-        if (typeof this.optionsList === 'string') {
-            this.optionsList = this.parseStringToArray(this.optionsList);
-        }
-    }
-    parseStringToArray(value) {
-        return JSON.parse(value);
-    }
     componentDidUpdate() {
         const options = this.getOptions();
         this.updateAllOptions(options);
         this.updateSelectAll(options);
     }
     render() {
-        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: {
+        return (h(Host, { key: 'c105c46f7461d0a2692282ed15d07460e31273b9', onFocus: this.setElementOnFocus, onBlur: this.setElementOnBlur, onClick: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("b2b-input-label", { key: '93fc16c4f74cb669bc7d0d82a673b414224eb4b1', required: this.required }, this.label), h("div", { key: '397e2d0b2315f5fdce8c2cf041ac4a92f9effea5', 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: '9bbe6f5442662cd102292846f5476b8ce899356a', icon: "b2b_icon-arrow-down" })), h("div", { key: '17593767cfeb17c341efd46dfc007197847c97bb', class: {
+                'b2b-multiselect-dropdown--open': this.isOpen,
+                'b2b-multiselect-dropdown--error': this.invalid && !this.disabled,
+                'b2b-multiselect-dropdown--disabled': this.disabled,
+                'b2b-multiselect-dropdown--focused': this.invalid && this.isElementFocused,
+            }, tabindex: 0, role: "combobox", onClick: () => (this.isOpen = !this.isOpen), "aria-expanded": this.isElementFocused }, h("div", { key: '2b3693ab1bd0fb6be6b13efa8eb8561b10480104', class: "b2b-multiselect-dropdown__chip-container" }, this.currentSelectedValues.length === 0 ? (h("span", { class: "b2b-multiselect-dropdown__placeholder" }, this.placeholder)) : (this.renderChips())), h("b2b-icon-100", { key: 'ee601f312e28840cdc16501dc60b016a6106cc3e', icon: "b2b_icon-arrow-down" })), h("div", { key: '50b47c0f1f20afd3ec6ed093237a202ed1d9a59b', class: {
                 'b2b-multiselect-dropdown__options-container': true,
-                'b2b-multiselect-dropdown__options-container--visible': this.isElementFocused,
-            } }, 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 })))))));
+                'b2b-multiselect-dropdown__options-container--visible': this.isOpen,
+            } }, h("div", { key: 'b8c651872eca608e3c02c42920cf0d8e6d117aa9', class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { key: '2a0d909d9994ac59a22e60c0ed729cf90d74cf92', class: "b2b-multiselect-dropdown__option__search" }, h("input", { key: '66081cd675bb03da68a445c090c69632611e1a32', type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { key: 'a1b146c742e206c05341aab80f49629a536b9c09', 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 }))))), (this.hint !== undefined && !this.invalid) ||
+            (this.hint !== undefined && this.disabled) ? (h("span", { class: "b2b-multiselect-dropdown__hint" }, this.hint)) : (''), this.errorMessage !== undefined && this.invalid && !this.disabled ? (h("span", { class: "b2b-multiselect-dropdown__error-message" }, this.errorMessage)) : ('')));
     }
     static get is() { return "b2b-multiselect-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -297,6 +339,94 @@ export class B2bMultiSelectDropdown {
                 "attribute": "max-options-visible",
                 "reflect": false,
                 "defaultValue": "8"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds an asterisk at the end of the label to signify that the field is required."
+                },
+                "attribute": "required",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the multi select dropdown is currently invalid. Per default, it is false."
+                },
+                "attribute": "invalid",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The error message that is shown if the multi select dropdown is invalid."
+                },
+                "attribute": "error-message",
+                "reflect": false
+            },
+            "hint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The hint text that appears underneath the multi select dropdown field."
+                },
+                "attribute": "hint",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the field is disabled. Default is false."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
             }
         };
     }
@@ -306,6 +436,7 @@ export class B2bMultiSelectDropdown {
             "currentList": {},
             "value": {},
             "isElementFocused": {},
+            "isOpen": {},
             "hasOptionList": {}
         };
     }
@@ -332,6 +463,9 @@ export class B2bMultiSelectDropdown {
         return [{
                 "propName": "optionsList",
                 "methodName": "watchPropHandler"
+            }, {
+                "propName": "selectedValues",
+                "methodName": "handleSelectedValuesChangeFromOutside"
             }, {
                 "propName": "currentSelectedValues",
                 "methodName": "handleSelectedValuesChange"

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

@@ -25,6 +25,11 @@ const meta = {
         selectAllLabel: 'Select All',
         maxOptionsVisible: 8,
         selectedValues: ['Watermelon', 'Banana'],
+        required: false,
+        hint: '',
+        disabled: false,
+        invalid: false,
+        errorMessage: '',
     },
     argTypes: Object.assign(Object.assign({}, multiselectArgs), { optionsList: { table: { disable: true } }, selectedValues: { table: { disable: true } } }),
     render: (_a) => {
@@ -36,7 +41,12 @@ const meta = {
         select-all-label=${args.selectAllLabel}
         placeholder=${args.placeholder}
         search-placeholder=${args.searchPlaceholder}
-        .optionsList=${args.optionsList}>
+        .optionsList=${args.optionsList}
+        required=${args.required}
+        hint=${args.hint}
+        disabled=${args.disabled}
+        invalid=${args.invalid}
+        error-message=${args.errorMessage}>
       </b2b-multiselect-dropdown>
     </div>`;
     },
@@ -57,8 +67,28 @@ export const InitialSelectedValues = {
         placeholder=${args.placeholder}
         search-placeholder=${args.searchPlaceholder}
         .optionsList=${args.optionsList}
-        .selectedValues=${args.selectedValues}>
+        .selectedValues=${args.selectedValues}
+        required=${args.required}
+        hint=${args.hint}
+        disabled=${args.disabled}
+        invalid=${args.invalid}
+        error-message=${args.errorMessage}>
       </b2b-multiselect-dropdown>
     </div>`;
     },
 };
+export const Required = {
+    args: Object.assign(Object.assign({}, meta.args), { required: true }),
+};
+export const Hint = {
+    args: Object.assign(Object.assign({}, meta.args), { hint: 'please select a value' }),
+};
+export const Disabled = {
+    args: Object.assign(Object.assign({}, meta.args), { disabled: true }),
+};
+export const Invalid = {
+    args: Object.assign(Object.assign({}, meta.args), { invalid: true }),
+};
+export const InvalidWithErrorMessage = {
+    args: Object.assign(Object.assign({}, meta.args), { invalid: true, errorMessage: 'error has occurred' }),
+};

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: '3e19ddbb9623536a344b9d36529af3f7012a965d', role: "option", class: {
+        return (h(Host, { key: 'c3c1955fd6ff4019b2cbc860ded4a0d51dc7b4ee', role: "option", class: {
                 'b2b-multiselect-dropdown__option': true,
-            } }, h("b2b-checkbox", { key: 'ad7c4e1f2de4361af279ca6648c9a14048773a57', checked: this.selected, "onB2b-change": this.handleCheckboxChange, label: this.option, indeterminate: this.indeterminate, value: this.option })));
+            } }, h("b2b-checkbox", { key: '898231cd21f30da27314fa0b938a030c39fedbca', 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 Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 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: '7a5f0a7ad756286b1fb9aa08af4b0818bff96717' }, h("ol", { key: 'e2c4e68f3581843f4f8445942eb590229fab1637', 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: '24405723ea4d2d6427911f1546c4edfabbf98ca0' }, h("ol", { key: 'a1af6ca952107fde2f97c26d3d152ef191142bea', 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 Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -13,7 +13,7 @@ export class ParagraphComponent {
         this.display = 'block';
     }
     render() {
-        return (h("p", { key: '410bec2bfaa21c973ecb2c8a40238ca8e858b95f', style: {
+        return (h("p", { key: 'c3781dc7215762d8dd038791943a541231731653', style: {
                 display: this.display,
             }, class: {
                 'b2b-paragraph': true,
@@ -22,7 +22,7 @@ export class ParagraphComponent {
                 ['b2b-paragraph--align-' + this.align]: true,
                 ['b2b-paragraph--no-margin']: !this.margin,
                 ['b2b-paragraph--variant-' + this.variant]: true,
-            } }, h("slot", { key: 'c2dae90e21ff14bdea080f007eb35d36ade59bad' })));
+            } }, h("slot", { key: '5afb431d2d782751f50741a6c10a210df7b1e3e4' })));
     }
     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 Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 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: '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, 03 Apr 2025 08:28:50 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 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: '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, 03 Apr 2025 08:28:50 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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, 03 Apr 2025 08:28:50 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 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: '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, 03 Apr 2025 08:28:50 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 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: '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, 03 Apr 2025 08:28:50 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 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: '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, 03 Apr 2025 08:28:50 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -124,7 +124,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 03 Apr 2025 08:28:50 GMT
+ * Generated on Tue, 29 Apr 2025 06:54:24 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */