@otto-de/b2b-core-components 1.33.0 → 1.34.0

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

@@ -1,7 +1,6 @@
 import { h, Host, } from "@stencil/core";
 export class DropdownComponent {
     constructor() {
-        this.truncatedText = '';
         this.onClickOutside = (ev) => {
             if (!this.hostElement.contains(ev.target))
                 this.isOpen = false;
@@ -23,7 +22,7 @@ export class DropdownComponent {
             const target = event.target;
             const value = target.getAttribute('data-value');
             const label = (_a = target.textContent) === null || _a === void 0 ? void 0 : _a.trim();
-            if (value) {
+            if (value != null) {
                 this.selectedValue = value;
                 this.selectedText = label || '';
                 this.b2bChange.emit(value);
@@ -33,16 +32,22 @@ export class DropdownComponent {
             }
         };
         this.updateTruncatedText = () => {
-            if (!this.selectEl)
-                return;
             const rawText = this.selectedText || this.placeholder;
+            if (this.selectEl == null) {
+                this.truncatedText = rawText;
+                return;
+            }
             const style = window.getComputedStyle(this.selectEl);
             const canvas = document.createElement('canvas');
             const ctx = canvas.getContext('2d');
-            if (!ctx)
+            if (ctx == null)
                 return;
             ctx.font = `${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
             let baseWidth = this.selectEl.clientWidth;
+            if (baseWidth == null) {
+                this.truncatedText = rawText;
+                return;
+            }
             const parentContainer = this.selectEl.parentElement;
             if (parentContainer && parentContainer.clientWidth > baseWidth) {
                 baseWidth = parentContainer.clientWidth;
@@ -77,24 +82,18 @@ export class DropdownComponent {
         this.selectedValue = '';
         this.selectedText = '';
         this.options = [];
+        this.truncatedText = '';
     }
     /** Method to programmatically clear selection of the dropdown. */
     async clearSelection() {
-        this.selectedValue = this.placeholderValue || '';
-        this.selectedText = this.placeholder || 'Select an option...';
+        this.selectedValue = this.placeholderValue;
+        this.selectedText = '';
         this.options = this.options.map(opt => (Object.assign(Object.assign({}, opt), { selected: false })));
         this.isOpen = false;
         this.updateTruncatedText();
     }
     componentWillLoad() {
-        this.selectedValue = this.placeholderValue || '';
-        this.selectedText = '';
-    }
-    componentDidLoad() {
         this.initializeOptions();
-        this.updateTruncatedText();
-        document.addEventListener('click', this.onClickOutside);
-        window.addEventListener('resize', this.updateTruncatedText);
         if (typeof MutationObserver !== 'undefined') {
             this.mutationObserver = new MutationObserver(() => {
                 this.initializeOptions();
@@ -102,21 +101,28 @@ export class DropdownComponent {
             this.mutationObserver.observe(this.hostElement, {
                 childList: true,
                 subtree: true,
+                attributes: true,
+                attributeFilter: ['value', 'selected', 'disabled'],
             });
         }
     }
+    componentDidLoad() {
+        this.updateTruncatedText(); // `componentWillLoad()` is unable to truncate it to the proper size
+        document.addEventListener('click', this.onClickOutside);
+        window.addEventListener('resize', this.updateTruncatedText);
+    }
     disconnectedCallback() {
+        var _a;
         document.removeEventListener('click', this.onClickOutside);
         window.removeEventListener('resize', this.updateTruncatedText);
-        if (this.mutationObserver) {
-            this.mutationObserver.disconnect();
-        }
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     watchDropdownState() {
         if (this.isOpen)
             this.closeOtherDropdowns();
     }
     initializeOptions() {
+        var _a, _b;
         const nativeOptions = Array.from(this.hostElement.querySelectorAll('option'));
         this.options = nativeOptions.map(opt => {
             var _a;
@@ -128,10 +134,8 @@ export class DropdownComponent {
             });
         });
         const selected = this.options.find(o => o.selected);
-        if (selected) {
-            this.selectedValue = selected.value;
-            this.selectedText = selected.label;
-        }
+        this.selectedValue = (_a = selected === null || selected === void 0 ? void 0 : selected.value) !== null && _a !== void 0 ? _a : this.placeholderValue;
+        this.selectedText = (_b = selected === null || selected === void 0 ? void 0 : selected.label) !== null && _b !== void 0 ? _b : '';
         this.updateTruncatedText();
     }
     closeOtherDropdowns() {
@@ -145,15 +149,15 @@ export class DropdownComponent {
         const hasError = this.invalid && !this.disabled && !this.groupDisabled;
         const showHint = this.hint && !hasError;
         const showError = this.error && hasError;
-        return (h(Host, { key: 'a58a7ec156677962cc7a3d7ca421d4c475d8cd77', class: {
+        return (h(Host, { key: 'e719de6e666225d6b807810570bd32d4906a2647', class: {
                 'b2b-dropdown': true,
                 'b2b-dropdown--error': hasError,
                 'b2b-dropdown--disabled': this.disabled || this.groupDisabled,
-            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("div", { key: '27d151cfb88bbfb1e112e276a8f6cc668f178a36', class: "b2b-dropdown__wrapper", onFocus: this.onFocus, onBlur: this.onBlur }, h("div", { key: 'cdce04cf08cb0256dab58d22c4a41430aa054fd1', class: {
+            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("div", { key: '690c9a335c7171312fb9de9cf6894af979eaa471', class: "b2b-dropdown__wrapper", onFocus: this.onFocus, onBlur: this.onBlur }, h("div", { key: 'fcbbc73636118d451f0ec5aa5ce1cd2baa0dec9b', class: {
                 'b2b-dropdown__select': true,
                 'b2b-dropdown__select--open': this.isOpen,
                 'b2b-dropdown__select--focused': this.focused,
-            }, ref: el => (this.selectEl = el), onClick: this.toggleDropdown, role: "combobox", "aria-expanded": `${this.isOpen}`, "aria-labelledby": this.name }, this.selectedText ? this.truncatedText : this.placeholder), this.isOpen && (h("div", { class: "b2b-dropdown__options", role: "listbox" }, this.options.map(option => (h("div", { key: option.value, class: {
+            }, ref: el => (this.selectEl = el), onClick: this.toggleDropdown, role: "combobox", "aria-expanded": `${this.isOpen}`, "aria-labelledby": this.name }, this.truncatedText), this.isOpen && (h("div", { class: "b2b-dropdown__options", role: "listbox" }, this.options.map(option => (h("div", { key: option.value, class: {
                 'b2b-dropdown__option': true,
                 'b2b-dropdown__option--selected': option.selected,
                 'b2b-dropdown__option--disabled': option.disabled,
@@ -360,7 +364,8 @@ export class DropdownComponent {
             "focused": {},
             "selectedValue": {},
             "selectedText": {},
-            "options": {}
+            "options": {},
+            "truncatedText": {}
         };
     }
     static get events() {

package/dist/collection/components/flyout-menu/flyout-menu-option.js

@@ -16,7 +16,7 @@ export class FlyoutMenuOptionComponent {
         }
     }
     render() {
-        return (h(Host, { key: '6203f835788db06223c00d348c659a905710af8f', class: {
+        return (h(Host, { key: 'd9f5fada05c44e475d2e645d51c3ba268844a8e3', class: {
                 'b2b-flyout-menu__option': true,
                 'b2b-flyout-menu__option--disabled': this.disabled,
                 'b2b-flyout-menu__option--separator': this.separator,

package/dist/collection/components/flyout-menu/flyout-menu.js

@@ -144,12 +144,12 @@ export class FlyoutMenuComponent {
         options[index].focus();
     }
     render() {
-        return (h(Host, { key: '5d9a147f1998a47c761af924c90da4b1f8c6ded1' }, h("div", { key: '1ae6d3742d1614e8a259b0a53f7b944d19c441db', class: {
+        return (h(Host, { key: '5e1d292b710d19a4bf5ece7047d4c5288b24f9b5' }, h("div", { key: 'd7d781fa8dfdd9f4bdecad06209400610a7f37bf', class: {
                 'b2b-flyout-menu': true,
-            } }, h("div", { key: '7cd8b06ad714085def1431404dea0aca959eb96d', class: "b2b-flyout-menu__trigger" }, h("slot", { key: 'c0295db03bf2d77ae8ecea387c41cc2fb69ea0e1', name: "trigger" })), h("div", { key: '8eabaac43b7e03e0116e4079f1c27cd7bde14929', onFocusout: this.blurMenu, class: {
+            } }, h("div", { key: '124c0ee9f83a252aabac1f09a11932ffde4b6bf1', class: "b2b-flyout-menu__trigger" }, h("slot", { key: '588027fd799f42d6b095ad82247cc6974424fc23', name: "trigger" })), h("div", { key: 'baa37193ac12427e868c6742a526516f91e37a02', onFocusout: this.blurMenu, class: {
                 'b2b-flyout-menu__options__container': true,
                 'b2b-flyout-menu__options__container--on': this.opened,
-            } }, h("div", { key: '1646d526780846355dfd56856aa95bc0c4b43460', class: "b2b-flyout-menu__arrow" }), h("slot", { key: 'bae26a650e0e506ddc5e9cd791db3767056af9f4', name: "option" })))));
+            } }, h("div", { key: '043ff6439dca6d4fccaa29f4bda5c52645154196', class: "b2b-flyout-menu__arrow" }), h("slot", { key: 'e95bcf37c9d1fc77509fbdf2de47001d88d7630a', name: "option" })))));
     }
     static get is() { return "b2b-flyout-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/grid/column.js

@@ -13,7 +13,7 @@ export class B2bGridColumnComponent {
         this.textAlign = 'left';
     }
     render() {
-        return (h(Host, { key: 'c934cbf6e57af0dd3be40e2149f49adb2802c1f4', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, h("slot", { key: 'affb02d8aeefc039ce0a5d8fd2e290e376c8fc3d' })));
+        return (h(Host, { key: 'ca84abbad02173e29f80329a4faab238aa41ec9d', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, h("slot", { key: 'e11625544ba0b0fc501ff811e8f5ca1ac89194c9' })));
     }
     static get is() { return "b2b-grid-col"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/grid/grid.js

@@ -4,7 +4,7 @@ export class B2bGridComponent {
         this.margin = 24;
     }
     render() {
-        return (h(Host, { key: '3f706955f934472664948d8653a86d3ac898e3d1', style: { ['padding']: `${this.margin}px` }, class: "b2b-grid" }, h("slot", { key: 'a0ac4c214a5bf2f169c2adee55131e785324a7ff' })));
+        return (h(Host, { key: '01c61abbb9d20b4479031e0545967f08782650dc', style: { ['padding']: `${this.margin}px` }, class: "b2b-grid" }, h("slot", { key: '64a173edfae1ff772091163fecc55bebdc2462b9' })));
     }
     static get is() { return "b2b-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/grid/row.js

@@ -66,7 +66,7 @@ export class B2bGridRowComponent {
         });
     }
     render() {
-        return (h(Host, { key: '48eccc3f2f29de4a533859834065717ad6b58238', style: {
+        return (h(Host, { key: '019e65e7db27c37305f49e396389c72fbcf82281', style: {
                 ['justify-content']: `${this.justify}`,
                 ['gap']: `${this.columnGap}px`,
                 ['margin']: `${this.rowGap}px 0`,
@@ -74,7 +74,7 @@ export class B2bGridRowComponent {
                 ['display']: 'flex',
                 ['flex-wrap']: 'wrap',
                 ['box-sizing']: 'border-box',
-            } }, h("slot", { key: 'b814a34254890bde8a7690c9fa58bc42b3f8d35d' })));
+            } }, h("slot", { key: 'e203c9bde0b21f923b356b6e330ab6e4227fd1a5' })));
     }
     static get is() { return "b2b-grid-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/icon-100/icon-100.stories.js

@@ -56,7 +56,7 @@ export const Inverse = {
     },
 };
 export const SizeGreaterThan24 = {
-    args: Object.assign(Object.assign({}, meta.args), { size: '32px' }),
+    args: Object.assign(Object.assign({}, meta.args), { size: 32 }),
 };
 export const Inherit = {
     render: ({ icon, color, size, clickable, focusable }) => {

package/dist/collection/components/icon-100/types.js

@@ -72,7 +72,6 @@ export const iconTypes = [
     'b2b_icon-cookie',
     'b2b_icon-copy',
     'b2b_icon-cosmetics',
-    'b2b_icon-cosmetics',
     'b2b_icon-cow',
     'b2b_icon-crab',
     'b2b_icon-critique',

package/dist/collection/components/input/input.js

@@ -98,18 +98,18 @@ export class InputComponent {
         this.filterHintSlotContent();
     }
     render() {
-        return (h(Host, { key: '0212d347a56c41c9551ffb75d608f02dfc0d51d4', class: {
+        return (h(Host, { key: 'b18e9dad8fdc84804b77049fd7b94c6b05541c3f', class: {
                 'b2b-input': true,
                 'b2b-input--error': this.invalid && !this.disabled,
-            } }, (this.label || this.labelSlot) && (h("b2b-input-label", { id: this.name, required: this.required }, h("slot", { name: "label" }, this.label))), h("div", { key: '969261c802e5740defee8d8223e08717f0b10ba0', class: {
+            } }, (this.label || this.labelSlot) && (h("b2b-input-label", { id: this.name, required: this.required }, h("slot", { name: "label" }, this.label))), h("div", { key: '655f632484049add498904c26d766670eb3b9203', class: {
                 'b2b-input__wrapper': true,
                 'b2b-input__wrapper--focused': this.hasFocus,
                 'b2b-input__wrapper--disabled': this.disabled || this.groupDisabled,
-            } }, h("slot", { key: 'b8513af326ebd43dd370c6f1b47c6c9a13d70d34', name: "start" }), this.hasTextPrefix && h("div", { class: "border" }), h("input", { key: '99de10f9c62b5c0f899c6896e4aca54da8670613', class: {
+            } }, h("slot", { key: '1d0650fa02aa56cf183a8c3c89e5791a53c54944', name: "start" }), this.hasTextPrefix && h("div", { class: "border" }), h("input", { key: '88e9aa5076bd6dd59eafac8491d6fafc9eec8b5e', class: {
                 'b2b-input__native-input': true,
                 ['b2b-input__native-input--align-' + this.inputTextAlign]: true,
                 'b2b-input__native-input--disabled': this.disabled || this.groupDisabled,
-            }, "aria-labelledby": this.name, type: this.type, placeholder: this.placeholder, value: this.value, name: this.name, disabled: this.disabled || this.groupDisabled, autoFocus: this.focusOnLoad, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, ref: el => (this.focusableElement = el) }), this.hasTextSuffix && h("div", { class: "border" }), h("slot", { key: 'd7462cca8b0d7a3e315212a835633817ce9a6d9b', name: "end" })), (this.hint !== undefined || this.hintSlot) &&
+            }, "aria-labelledby": this.name, type: this.type, placeholder: this.placeholder, value: this.value, name: this.name, disabled: this.disabled || this.groupDisabled, autoFocus: this.focusOnLoad, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, ref: el => (this.focusableElement = el) }), this.hasTextSuffix && h("div", { class: "border" }), h("slot", { key: 'c93445fb93de27a7e1d4681bc7a48d44bb8baa1a', name: "end" })), (this.hint !== undefined || this.hintSlot) &&
             (!this.invalid || this.disabled || this.groupDisabled) ? (h("span", null, h("slot", { name: "hint" }, this.hint))) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : ('')));
     }
     static get is() { return "b2b-input"; }

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

@@ -49,7 +49,7 @@ export class B2BInputGroup {
         }
     }
     render() {
-        return (h(Host, { key: 'a7c7a69265ce9bbaa46e93871acc705c454ef751' }, h("div", { key: '636e0bac6bf428c88e219e23fa7e409c60f93db3', class: { 'b2b-input-wrapper': true } }, h("slot", { key: '0a30095318f623283741415830ed6a4603834be1', name: "start" }), h("slot", { key: '4f268d66af86c1a30c1f3605aed3812eccd578b2' }), h("slot", { key: 'bd032c28e48612eea1279eed5209b892721d949a', name: "end" })), (this.hint || (this.invalid && !this.disabled)) && (h("span", { class: {
+        return (h(Host, { key: '30fc190f60b27b6f11fdcc7ed37cc95eee557e5e' }, h("div", { key: '054b44ad5994365e1ea8034a854e2d1b23c6d5e2', class: { 'b2b-input-wrapper': true } }, h("slot", { key: '73b19a2684e84873ada8ec3b2f5c4f465f1fb382', name: "start" }), h("slot", { key: 'f0d15628f49e1d7c83eafaa7a631bd71a673ff97' }), h("slot", { key: '00209dc3c6bf3b3e4418e79dcb6387effc0d8531', name: "end" })), (this.hint || (this.invalid && !this.disabled)) && (h("span", { class: {
                 'b2b-input-wrapper__hint': true,
                 'b2b-input-wrapper__hint--error': this.invalid && !this.disabled,
             } }, this.invalid && !this.disabled ? this.error : this.hint))));

package/dist/collection/components/input-label/input-label.js

@@ -5,11 +5,11 @@ export class InputLabelComponent {
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '1fd715c6e6929bf14631434e54112ae7dadcc9d4' }, h("label", { key: 'fc0fb3b130825b9ba41b9ed1a1b007010091065e', class: {
+        return (h(Host, { key: '87fe33e03bfe683d013e8d992bba9e3863834514' }, h("label", { key: 'e88216535eb3d9638fc75a638daffb81bcdf0bb1', class: {
                 'b2b-input-label': true,
                 'b2b-input-label--required': this.required,
                 'b2b-input-label--disabled': this.disabled,
-            } }, h("slot", { key: 'c811d6c50bd4e5284c48a94dab49bed8c26f29cb' }))));
+            } }, h("slot", { key: 'cf1736baaf9fd224071f3e21122c263b9865c318' }))));
     }
     static get is() { return "b2b-input-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-list/input-list-option.js

@@ -12,7 +12,7 @@ export class InputListOptionComponent {
         }
     }
     render() {
-        return (h(Host, { key: '8a38a1768fad0607a658270145dd8f265987982c', class: "b2b-input-list__option", onClick: this.handleClick, role: "option" }, this.option));
+        return (h(Host, { key: '566b7cf1696550467c5b8c29cedccf5f8821dc6e', class: "b2b-input-list__option", onClick: this.handleClick, role: "option" }, this.option));
     }
     static get is() { return "b2b-input-list-option"; }
     static get originalStyleUrls() {

package/dist/collection/components/input-list/input-list.js

@@ -137,13 +137,13 @@ export class InputListComponent {
     */
     render() {
         const groupOrderClass = this.getGroupOrderClassName() || '';
-        return (h(Host, { key: '0ff3040354f57d752194f6f37795d2242e9ece5c', onBlur: this.setElementOnBlur, onFocus: this.setElementOnFocus }, h("div", { key: '92ca26fa99608f371a3bee1e25977887bc22bb63', class: {
+        return (h(Host, { key: 'c22a6a73eca142a88eb7cc3f4c975b579df1d709', onBlur: this.setElementOnBlur, onFocus: this.setElementOnFocus }, h("div", { key: '3fb28f6a327c958fcf9d178c4d1814915a13ad3a', class: {
                 'b2b-input-list': true,
                 'b2b-input-list__options-on': this.hasOptionList &&
                     this.isElementFocused &&
                     Boolean(this.value),
                 [groupOrderClass]: true,
-            } }, h("b2b-input", { key: '2d91287804fb835406c87bbc184da9c715820a61', type: "text", label: this.label, value: this.value, disabled: this.disabled || this.groupDisabled, "onb2b-input": this.handleInput, placeholder: this.placeholder, required: this.required }, !(this.disabled || this.groupDisabled) && Boolean(this.value) && (h("b2b-icon-100", { icon: "b2b_icon-close", "aria-label": "reset", slot: "end", tabIndex: 0, onMouseDown: this.resetInput, onKeyDown: this.resetInput }))), this.isElementFocused && Boolean(this.value) ? (h("div", { class: "b2b-input-list__options-container" }, this.hasOptionList ? (h("div", { class: "b2b-input-list__options", role: "listbox" }, this.optionsList.map(option => (h("b2b-input-list-option", { option: option, tabIndex: -1, "onb2b-option-selected": this.onOptionSelected }))))) : (h("slot", null)))) : null)));
+            } }, h("b2b-input", { key: '2cd2ba2a073ca4b1980ac5621b60f0ee351e5cca', type: "text", label: this.label, value: this.value, disabled: this.disabled || this.groupDisabled, "onb2b-input": this.handleInput, placeholder: this.placeholder, required: this.required }, !(this.disabled || this.groupDisabled) && Boolean(this.value) && (h("b2b-icon-100", { icon: "b2b_icon-close", "aria-label": "reset", slot: "end", tabIndex: 0, onMouseDown: this.resetInput, onKeyDown: this.resetInput }))), this.isElementFocused && Boolean(this.value) ? (h("div", { class: "b2b-input-list__options-container" }, this.hasOptionList ? (h("div", { class: "b2b-input-list__options", role: "listbox" }, this.optionsList.map(option => (h("b2b-input-list-option", { option: option, tabIndex: -1, "onb2b-option-selected": this.onOptionSelected }))))) : (h("slot", null)))) : null)));
     }
     static get is() { return "b2b-input-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/label/label.js

@@ -4,10 +4,10 @@ export class LabelComponent {
         this.type = 'neutral';
     }
     render() {
-        return (h("span", { key: '8c2d58fc6dc0f07f81e68263300772fdd80b107b', class: {
+        return (h("span", { key: '8b3e3c895c71501e761b6a80843403df68190cca', class: {
                 'b2b-label': true,
                 [`b2b-label--${this.type}`]: true,
-            } }, h("slot", { key: '6c2f5acd1e5b3b5f938617b605aa28f0e808cbce' })));
+            } }, h("slot", { key: '737f1fff0fd98d426cc910a6af713786aa7bd1cc' })));
     }
     static get is() { return "b2b-label"; }
     static get encapsulation() { return "shadow"; }

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

@@ -82,10 +82,10 @@ export class ModalComponent {
         this.attemptFocus(this.getFirstFocusableElement());
     }
     render() {
-        return (h(Host, { key: '86f6276caa0969c0774d0280ff201520d0f196b0' }, h("div", { key: '3b13f9a8ae037d37cba280d5c51b0845be9d73ca', class: { 'b2b-modal': true, 'b2b-modal--open': this.opened } }, h("div", { key: 'cb900ff72552157d2d5ef0678785149703b3cb75', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabIndex: 0 }), h("div", { key: '407944b6f4f9e1bf2b6503263bd433b78bd76dd4', class: {
+        return (h(Host, { key: '1ae4da3d85c98d784c5aa3254eec819791538b75' }, h("div", { key: 'a504235885dd6d98d6f909d9cf3d67adf0f1f6c0', class: { 'b2b-modal': true, 'b2b-modal--open': this.opened } }, h("div", { key: 'fffccabe0df78b009dc23f7dac95f5bbf7ce07e4', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabIndex: 0 }), h("div", { key: 'd4c09be02aa93046ad8835da3affb70c0d7685dc', class: {
                 'b2b-modal__dialog': true,
                 [`b2b-modal__dialog--${this.variant}`]: true,
-            } }, h("div", { key: 'a92940bc841a6c1c3da7020ab4c23c0462f1efed', class: "b2b-modal__dialog__header" }, h("div", { key: 'fb9345d8d4b2186a64693d62bb28d111dbdb0668', class: "b2b-modal__dialog__header-left" }, h("b2b-headline", { key: '5cb0366f501859821afbeb251dee93042fc411b1', align: "center", size: "200", noMargin: true }, this.heading), h("slot", { key: '9069aa74363dd8e77ca0e25331c8e17c173a0704', name: "header-icon" })), h("div", { key: '9cbb5673e12e4fcca0ecf3415332d2e08440ff65', class: "b2b-modal__dialog__header-right" }, h("button", { key: '8548eed3ba5972a025dec1a82890229d6d2d2222', type: "button", class: "b2b-modal__dialog__close", onMouseEnter: this.toggleIconHover, onMouseLeave: this.toggleIconHover, onClick: this.handleClickDismiss, ref: el => (this.closeButton = el) }, h("b2b-icon-100", { key: '47a7ca18a7d53a7e0580156fba3e5bd6767bed1a', clickable: true, icon: "b2b_icon-close", color: this.iconHover ? 'primary' : 'secondary' })))), h("div", { key: 'de41ddf14b257c8f3775c8496b033ce8cf5930b8', class: "b2b-modal__dialog__body" }, h("slot", { key: 'd2ecc0d873fede8286c73bced27b8037083595d2' })), h("div", { key: '918d7224c0e4e5039c3882307e204576d419fd16', class: "b2b-modal__dialog__footer" }, h("div", { key: '01827c54ed56fc4bb57c3dedc0d73cd7ea5c7221', class: "b2b-modal__dialog__footer-left" }, h("slot", { key: '333630a7d42220f17d0503f732275d5e54258dce', name: "footer-left" })), h("div", { key: '8673cc883110f6d45965a7061163bcd1b5d33bfb', class: "b2b-modal__dialog__footer-right" }, h("slot", { key: '1e6fd4feba579586186d4d1f755bc9682a80a899', name: "footer-right" })))), h("div", { key: 'a42f949568f0503bd0037d840c91a8005814a8a2', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabIndex: 0 }), h("div", { key: '051c47c640c2d4b5d5767db1eabb2e506eabfb5a', class: "b2b-modal__backdrop", onClick: this.handleBackdropDismiss }))));
+            } }, h("div", { key: '85add6446151ec3df71ba825bab64d100306bc10', class: "b2b-modal__dialog__header" }, h("div", { key: '3fc56d466fe2eb9e6ca594ff867c48fe05ffda09', class: "b2b-modal__dialog__header-left" }, h("b2b-headline", { key: 'cf348827107b36494427ddaac019a539c379364a', align: "center", size: "200", noMargin: true }, this.heading), h("slot", { key: '8df87ec03dcdb11bbf96c1c49c9ea9d81a84a558', name: "header-icon" })), h("div", { key: '80f6e9e7d7ad6e71c15525a7a12eb885c48c6c2a', class: "b2b-modal__dialog__header-right" }, h("button", { key: '7e2373011323d5abc38803862f30aa0b3ae394e6', type: "button", class: "b2b-modal__dialog__close", onMouseEnter: this.toggleIconHover, onMouseLeave: this.toggleIconHover, onClick: this.handleClickDismiss, ref: el => (this.closeButton = el) }, h("b2b-icon-100", { key: 'a4955d65f73cf81cd919e5dbcf63db3251cf7449', clickable: true, icon: "b2b_icon-close", color: this.iconHover ? 'primary' : 'secondary' })))), h("div", { key: '3147b6a75f66f90d45f1a404f9dfb140634a6a35', class: "b2b-modal__dialog__body" }, h("slot", { key: '7ad81c8b9e610720c3ed918d255017a32d4128d4' })), h("div", { key: '7e7b6105f3bc4b1ad06eb7b7c7f43c91eb310c51', class: "b2b-modal__dialog__footer" }, h("div", { key: 'd3abac0aade1244074f2bb038e736e981d67f5ae', class: "b2b-modal__dialog__footer-left" }, h("slot", { key: '61599dfd481e53897522fabc44915546ac3d0f59', name: "footer-left" })), h("div", { key: '07c6cfca3f4e1545644292e4c04c9f02149d37b8', class: "b2b-modal__dialog__footer-right" }, h("slot", { key: '7b161e0e61c4e36c0ae1a2930b95e39991d72879', name: "footer-right" })))), h("div", { key: 'd5ac30a02abfd2b89dce1d913971a417198cd155', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabIndex: 0 }), h("div", { key: '570e98eefabd147193cb04d9d493e46a08411e3f', class: "b2b-modal__backdrop", onClick: this.handleBackdropDismiss }))));
     }
     static get is() { return "b2b-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -207,16 +207,16 @@ export class B2bMultiSelectDropdown {
         const hasError = this.invalid && !disabled;
         const showHint = this.hint && !hasError;
         const showError = this.errorMessage && hasError;
-        return (h(Host, { key: 'c7428f2ae958e0560c2725b11418d6303d762bd6', onFocus: this.setElementOnFocus, onBlur: this.setElementOnBlur, onClick: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("b2b-input-label", { key: 'ec356ec9b842ff998adc0156c9cadc5e64aaba02', required: this.required }, this.label), h("div", { key: '292e2e884448319fd956a39b0b5cb154bb8ac599', class: {
+        return (h(Host, { key: 'ce7c585a53dfb0dc39216bca8de421f5c6f6bb63', onFocus: this.setElementOnFocus, onBlur: this.setElementOnBlur, onClick: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("b2b-input-label", { key: '5f70368b3502a9e3f313f701e254d0efefae6fd8', required: this.required }, this.label), h("div", { key: '3bc73b137d9b53d54b8a692965b83c299a09faa1', class: {
                 'b2b-multiselect-dropdown': true,
                 'b2b-multiselect-dropdown--open': this.isOpen,
                 'b2b-multiselect-dropdown--error': hasError,
                 'b2b-multiselect-dropdown--disabled': disabled,
                 'b2b-multiselect-dropdown--focused': this.invalid && this.isElementFocused,
-            }, tabindex: 0, role: "combobox", onClick: () => (this.isOpen = !this.isOpen && !disabled), "aria-expanded": this.isElementFocused }, h("div", { key: 'e3078ea1d5ce658f84cbd7db8d15fbec5c10bcc4', 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: '1591c3ee5f61627ca75e3ca7b1fa4873209d8e52', icon: "b2b_icon-arrow-down" })), h("div", { key: 'a521b5578bcfbab5ceebd638a309e2f68eea0095', class: {
+            }, tabindex: 0, role: "combobox", onClick: () => (this.isOpen = !this.isOpen && !disabled), "aria-expanded": this.isElementFocused }, h("div", { key: 'b4e95e6072ebe7a49f1ff092521758bef17c9443', 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: 'a79e61c1e78be92e394772e4fe45ccaa840bb23c', icon: "b2b_icon-arrow-down" })), h("div", { key: 'f8b8c5d70b18c1ffc175b966e1568ec719fd5aa6', class: {
                 'b2b-multiselect-dropdown__options-container': true,
                 'b2b-multiselect-dropdown__options-container--visible': this.isOpen,
-            } }, h("div", { key: '85abaf3ebe291b14f6d13758fec48972e6e0bf92', class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { key: 'fb4f61401da1bf145aa024a17dd8ecb295a369bc', class: "b2b-multiselect-dropdown__option__search" }, h("input", { key: '0971102609b6fa583f12e2c3f15f70a961ebebaa', type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { key: '2238627bb301f45c5bd3d4d143fc5312bec0e445', class: "b2b-multiselect-dropdown__option__select-all", option: this.selectAllLabel, id: "select-all", "onB2b-option-selected": this.handleSelectAll }), this.hasOptionList &&
+            } }, h("div", { key: '94b799c83a30906027023ee78c9202afc152cb98', class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { key: 'c844dc9be611cf2533549cf03bdc1fb5cf7e5755', class: "b2b-multiselect-dropdown__option__search" }, h("input", { key: 'ec3380739b47ae8ee490ed4bf9369a81045f2d3b', type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { key: 'bf17215713121f4f359872c8c1f6ed4f1ec32e45', 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.value, label: option.label }))))), showHint && (h("span", { class: "b2b-multiselect-dropdown__hint" }, this.hint)), showError && (h("span", { class: "b2b-multiselect-dropdown__error-message" }, this.errorMessage))));
     }
     static get is() { return "b2b-multiselect-dropdown"; }

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

@@ -15,9 +15,9 @@ export class B2bMultiSelectOption {
     }
     render() {
         var _a;
-        return (h(Host, { key: '2935b503975ee29b4cde34ac07d19fe40d08385d', role: "option", class: {
+        return (h(Host, { key: '0147313a2d52d7cdf334f118f8a5eae6fb2a73df', role: "option", class: {
                 'b2b-multiselect-dropdown__option': true,
-            } }, h("b2b-checkbox", { key: 'ba289a5a12c1ba15999d7eed337acfe4ca693b1c', checked: this.selected, "onB2b-change": this.handleCheckboxChange, label: (_a = this.label) !== null && _a !== void 0 ? _a : this.option, indeterminate: this.indeterminate, value: this.option })));
+            } }, h("b2b-checkbox", { key: 'bf1504c0924dbda95990369b31c010804b2ceac7', checked: this.selected, "onB2b-change": this.handleCheckboxChange, label: (_a = this.label) !== null && _a !== void 0 ? _a : this.option, indeterminate: this.indeterminate, value: this.option })));
     }
     static get is() { return "b2b-multiselect-option"; }
     static get originalStyleUrls() {

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

@@ -91,7 +91,7 @@ export class PaginationComponent {
         };
     }
     render() {
-        return (h("nav", { key: '85ed17dc25a803e800888a084e3b99a663bb3e0a' }, h("ol", { key: '544841f818e07f5091abb05dbb98e46b8b26fa07', 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 }, "\u2039" /* PaginationConstants.BACK */))), this.navItems.map((navItem, index) => {
+        return (h("nav", { key: '6f43e77c9989aafe2f5ff9d7de619853f807ceb9' }, h("ol", { key: 'ebc029acf51035b9859ed5793a29fc689c536484', 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 }, "\u2039" /* 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 }, "\u203A" /* PaginationConstants.NEXT */))))));

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

@@ -13,7 +13,7 @@ export class ParagraphComponent {
         this.display = 'block';
     }
     render() {
-        return (h("p", { key: 'e34be906b02a82e422ecd49ccd6adf15d1744897', style: {
+        return (h("p", { key: '9372543c8a22d33c6ed0c53e3e8b277e0ce78883', 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: '3af5b741adf391a40b7a5e08d33cb04c5ab30ad7' })));
+            } }, h("slot", { key: 'ca3169be5b0239e40911fa2071c744404a6bbbae' })));
     }
     static get is() { return "b2b-paragraph"; }
     static get encapsulation() { return "shadow"; }

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: '26303d337146025b9a77d20c030065275f47b31d' }, h("div", { key: 'a005917216bb9d16cf8c33c40c8eb86c35bbf2f6', class: {
+        return (h(Host, { key: '4511acab06e497842a84eed7cfa9beb7d575dbe7' }, h("div", { key: '03b04648866fed3e0c276ca8218201639b23f6fc', class: {
                 [`b2b-progress-bar__${this.labelPosition}-${this.labelType}`]: true,
-            } }, h("div", { key: 'afbd557e3f2650016ad6c185c0192d34e5b5741a', class: "b2b-progress-bar__wrapper" }, h("div", { key: '94c2a19e96ed5b4060946893e6f42c74b488aaea', class: "b2b-progress-bar__progress", style: {
+            } }, h("div", { key: '8ddd2295fd43f56b8393178e38ea414e96f332ed', class: "b2b-progress-bar__wrapper" }, h("div", { key: 'e6ea32124f8df1b937dd8f62e1e06d306229cd75', class: "b2b-progress-bar__progress", style: {
                 width: `${this.getProgress()}%`,
-            } })), h("div", { key: '859d78ef40b96e6fe170ffb0c7dc790f7811d002', class: {
+            } })), h("div", { key: '36a7f3c4c5229350ea3a37827fa0613db0ab33b7', 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.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: 'a95ee91fc3410f85abc9898a2488b6999bff6ef7', onClick: this.onClick }, h("div", { key: 'e458b345dd6f1a3759e82d1e2bcc08ffd6486848', class: {
+        return (h(Host, { key: '5fbc72c2f038679ea04d1c99a6f687e4829d7d51', onClick: this.onClick }, h("div", { key: '895c751c5086b2f7d466635020a39a96d1c9f220', class: {
                 'b2b-radio': true,
                 'b2b-radio--error': this.invalid && !this.disabled,
                 'b2b-radio--disabled': this.disabled,
-            } }, h("div", { key: 'fee31d517e56f603b49a668705b18825518b5acd', class: "b2b-radio-items" }, h("input", { key: 'ac5279b2ce604c520345896076900f63500beb20', 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: '222d5dd63cb02426b6b4a2e2d072fbb49dfe46d4', id: this.name, required: this.required, disabled: this.disabled }, h("slot", { key: '047ac0baf8984ea6ff0d098ea5874ab0bf03c6fa', name: "label" }, this.label))), (this.hint !== undefined && !this.invalid) ||
+            } }, h("div", { key: '0f6b79277a4ad8520b77054c79bf835e6e2a0a7c', class: "b2b-radio-items" }, h("input", { key: 'bd9d51857f574d9c37d482ae6b23bd25027369a5', 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: '8ab71684ff2f26fdbe119c852109ce3b44ed1c4f', id: this.name, required: this.required, disabled: this.disabled }, h("slot", { key: '474cc5a22301f4be53130579845152da0caa849b', 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.js

@@ -67,11 +67,11 @@ export class RadioButtonGroupComponent {
         this.removeChildText();
     }
     render() {
-        return (h(Host, { key: '2f7d02a11bd8ef158aa3a50483b530dc75f55cdc' }, h("div", { key: '15be31753d13efc5677a1f5e75d5cb66643222b6', class: {
+        return (h(Host, { key: 'c47db22cd7ab5484813e052db015d2b8d1405bb9' }, h("div", { key: '1e7fc6246f83ea53debd5ef7fc42772e3c41a936', 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: 'ba13a4ee078874c74d24d3ef46f1b6c6b4aa0ff0' }, h("div", { key: '412c32c37064d4418a5149f6190f830902ba8310', class: "b2b-radio-group-options" }, h("slot", { key: '8a54755d559c188d07eb32cbe9839a5c3c2a974f' }))), (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: 'a406988d11f921c8eb16296820212da84d014e8c' }, h("div", { key: '2b6fb5ac504cdc65b354d8d30727b0fb6e725376', class: "b2b-radio-group-options" }, h("slot", { key: 'd7161d2da1c4241830815da13fe87067ecb55931' }))), (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.js

@@ -4,7 +4,7 @@ export class B2BRequiredSeparator {
         this.label = 'Pflichtfeld';
     }
     render() {
-        return (h(Host, { key: '1288dd4226f5d951717a306db2557f7dd4dbb4fd' }, h("div", { key: '34cc56445d5bf7c93ba9e522d269cb6d5b337792', class: "b2b-required-separator__label" }, h("span", { key: '8ecc6fb192884982dcc7f16c8db1302bc2ceddcb', class: "b2b-required-separator__asterisk" }, "* "), h("span", { key: '5e40bc2d53b13708ca546e4fb5a7e4816601c3d1' }, this.label)), h("b2b-separator", { key: '3494da2d3740ff18a322d28ca112fe4339862605' })));
+        return (h(Host, { key: 'dbb1404fe0a21058185803fc23cbe4a53378d25f' }, h("div", { key: 'fa4568e39ddc882fde2a8ae6c667145e6b0ff71f', class: "b2b-required-separator__label" }, h("span", { key: 'cff2204e59e777da55f39e4fa4be2a376fd7645b', class: "b2b-required-separator__asterisk" }, "* "), h("span", { key: '8d57dbea0fe1841c2fd52e65e2268c60eea7ea60' }, this.label)), h("b2b-separator", { key: '653ca12e5bed8038775144314e7a0c424437c33f' })));
     }
     static get is() { return "b2b-required-separator"; }
     static get encapsulation() { return "shadow"; }

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: '366b1c49bb56404825f131381b56a15daa457bfe' }, h("div", { key: 'f7a087f49858502bb7d74276d601c8a42e2215c0', style: {
+        return (h(Host, { key: '1d7eea4ad65056f16127e2029811239e0540560b' }, h("div", { key: '153f0ace757daff8776fac4fbe1cc9a05e9c0dfa', style: {
                 ['background-color']: this.color,
                 ['border']: `1px solid ${this.borderColor || this.color}`,
             }, class: {
                 'b2b-rounded-icon': true,
-            } }, h("div", { key: '050e8a6d21b27c8fdccfffc021c45080ebdbde7d', style: {
+            } }, h("div", { key: '7b28d41d6d5cb38c21aa4487cca0ce070663909a', style: {
                 ['color']: this.contentColor,
-            } }, h("slot", { key: 'ecd49a7ffdf65913edbba010734f522a45ac4096', name: "icon" })), h("div", { key: 'f7e1f7507674a38e7eeebc92f08ea5805400c92f', style: {
+            } }, h("slot", { key: '32e90de259f352aff82118dd1f9904475fc875e2', name: "icon" })), h("div", { key: '38f7a97f95191cd039a4bbbcf20a9b5ce1826a8e', style: {
                 ['color']: this.contentColor,
-            } }, h("slot", { key: '116d9796a00791165984fc71e29aa79d4a9040c1', name: "text" })))));
+            } }, h("slot", { key: 'e994e7fbd49f656c865ce8517833be0d6bbb852e', name: "text" })))));
     }
     static get is() { return "b2b-rounded-icon"; }
     static get encapsulation() { return "shadow"; }

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: 'b455812c0f370a849758c9ca169a63b7ecde9bad' }, h("slot", { key: 'cd2c7bf54cedfac2de42f5b248e3279f288e6a3d' })));
+        return (h(Host, { key: 'c5c71924d38f1788a60b19e49ad09a3aa5d637f6' }, h("slot", { key: '4fa412e60d51aa58e9e6d40936bb4f4a4725dab5' })));
     }
     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: 'a3f42d5d53ac7beeb4c0e241d81271ac2a116fe3' }, h("b2b-input-group", { key: '490be3e7bc4d60b5eba239f754453b2cbe0a6df7', disabled: this.disabled }, h("b2b-input-list", { key: '15a4d81a9bffaa8cd14ffaebe021da90493feb4e', slot: "start", value: this.value, placeholder: this.placeholder, optionsList: this.optionsList, "onb2b-input": this.onInput, "onb2b-option-selected": this.onOptionSelected }, h("slot", { key: '06ce3d043b96b282ad3076c9a65fd5e2b4b48b67' })), h("b2b-button", { key: '1a45269314806d9d9cf476db6a08b8d7c14933c8', slot: "end", variant: "primary", onClick: this.onSearchClicked }, h("b2b-icon-100", { key: '797b412d6bab0104497465a80b1a344dbfa97e75', icon: "b2b_icon-search", clickable: true })))));
+        return (h(Host, { key: '65315a3718f55f1d9b63c2b3a437bd292a512eb3' }, h("b2b-input-group", { key: '7f1e64e2fe99e4b8ecca7f90547c7e08b0c2a8f3', disabled: this.disabled }, h("b2b-input-list", { key: '7a140c8635b7f193125597a4b6a1df62c81796f3', slot: "start", value: this.value, placeholder: this.placeholder, optionsList: this.optionsList, "onb2b-input": this.onInput, "onb2b-option-selected": this.onOptionSelected }, h("slot", { key: '2674546c9fc2e6347c42350f94dc91876357e336' })), h("b2b-button", { key: '75cdcd94bb0f25af3448bb76ed6f5103ceb6711c', slot: "end", variant: "primary", onClick: this.onSearchClicked }, h("b2b-icon-100", { key: '0d846a636b31a4e8b67933611b2da76442ad7795', icon: "b2b_icon-search", clickable: true })))));
     }
     static get is() { return "b2b-search"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ export class B2bSeparatorComponent {
         this.alignment = 'horizontal';
     }
     render() {
-        return (h(Host, { key: '00b1ecb31c7ca143b3d6c3c1d5bddcc369bde312' }, h("div", { key: 'e29629b7554c21b12af943ae0aaafb936fa36ea6', class: {
+        return (h(Host, { key: 'f1ab4806be7ac4128d95a047421be58502b0cadf' }, h("div", { key: 'c478fc67a79c15a6d74af39eb6747d25d3d58922', class: {
                 [`b2b-separator--${this.alignment}`]: true,
             } })));
     }

package/dist/collection/components/shimmer/shimmer.js

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

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

@@ -1,4 +1,4 @@
-import { h, Host, } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 export class SnackbarComponent {
     constructor() {
         /** when user hovers over snackbar, the timer is paused. */
@@ -86,17 +86,17 @@ export class SnackbarComponent {
         clearTimeout(this.timeoutId);
     }
     render() {
-        return (h(Host, { key: '33ace44479760181672e60c0750462c9d8ea60dc', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '1f739551dbbcea7dfa04f2fdf04cfcdeceab4a9f', class: {
+        return (h(Host, { key: '55fbed7dd9fa44a54d25277ca6f1e75429ba1b37', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'dff92b0614f3e59e0c809b975310646814b8145e', class: {
                 'b2b-snackbar': true,
                 [`b2b-snackbar--${this.type}`]: true,
                 'b2b-snackbar--opened': this.opened,
-            }, style: this.width ? { width: this.width } : { width: 'auto' } }, h("div", { key: 'e5a8aeeb9e550d0ca6b8cb94049dc3d229cb5fdb', class: "b2b-snackbar__content" }, h("span", { key: 'dba27cdd15921dd0aeade5be294f9e92f9c4b024', class: { [`b2b-snackbar--${this.type}__icon`]: true } }, this.chooseIcon()), h("p", { key: '537da669b42397f0b016d2767f9b8b170d333ac3', class: "b2b-snackbar__content__description" }, this.description)), this.isActionPresent() && (h("div", { class: {
+            }, style: { width: this.width || 'auto' } }, h("div", { key: '1fc6e6367e35c1b1a05f43ea2660a905f22c9711', class: "b2b-snackbar__content" }, h("span", { key: 'c8e4bc8512f84f110f520f6678df3a1b140a0367', class: { [`b2b-snackbar--${this.type}__icon`]: true } }, this.chooseIcon()), h("p", { key: '746bbc4361665af9e7ca661a2961bf000f4e073d', 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: '73fb2d7f257c22f6ac6506dd1e1ed6da6b2e051d', class: {
+            }, onClick: this.handleActionClick }, h("a", null, this.actionLabel))), h("div", { key: 'c8384158b5bdec6af91cae1adc66763cbdf528d1', class: {
                 'b2b-snackbar__close-icon': true,
                 [`b2b-snackbar__close-icon--${this.type}`]: true,
-            }, onClick: this.close }, h("b2b-icon-100", { key: 'ecdba62cbdbca4815cd207fb804341a08c6b76b2', clickable: true, size: 24, icon: "b2b_icon-close" })))));
+            }, onClick: this.close }, h("b2b-icon-100", { key: '8315309a832f0767ecbbc40ef147b0005a66ce7a', clickable: true, size: 24, icon: "b2b_icon-close" })))));
     }
     static get is() { return "b2b-snackbar"; }
     static get encapsulation() { return "shadow"; }

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

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