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

package/dist/components/b2b-dropdown.js

@@ -12,7 +12,7 @@ const DropdownComponent = /*@__PURE__*/ proxyCustomElement(class DropdownCompone
         this.b2bChange = createEvent(this, "b2b-change", 7);
         this.b2bFocus = createEvent(this, "b2b-focus", 7);
         this.b2bBlur = createEvent(this, "b2b-blur", 7);
-        this.truncatedText = '';
+        this.ignoreNextMutation = false;
         this.onClickOutside = (ev) => {
             if (!this.hostElement.contains(ev.target))
                 this.isOpen = false;
@@ -34,26 +34,45 @@ const DropdownComponent = /*@__PURE__*/ proxyCustomElement(class DropdownCompone
             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.ignoreNextMutation = true;
                 this.selectedValue = value;
                 this.selectedText = label || '';
-                this.b2bChange.emit(value);
                 this.options = this.options.map(opt => (Object.assign(Object.assign({}, opt), { selected: opt.value === value })));
+                const nativeOptions = this.hostElement.querySelectorAll('option');
+                nativeOptions.forEach(opt => {
+                    if (opt.value === value) {
+                        opt.setAttribute('selected', '');
+                        opt.selected = true;
+                    }
+                    else {
+                        opt.removeAttribute('selected');
+                        opt.selected = false;
+                    }
+                });
                 this.isOpen = false;
+                this.b2bChange.emit(value);
                 this.updateTruncatedText();
+                this.ignoreNextMutation = false;
             }
         };
         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;
@@ -88,46 +107,56 @@ const DropdownComponent = /*@__PURE__*/ proxyCustomElement(class DropdownCompone
         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.ignoreNextMutation = true;
+        this.selectedValue = this.placeholderValue;
+        this.selectedText = '';
         this.options = this.options.map(opt => (Object.assign(Object.assign({}, opt), { selected: false })));
+        const nativeOptions = this.hostElement.querySelectorAll('option');
+        nativeOptions.forEach(opt => {
+            opt.removeAttribute('selected');
+            opt.selected = false;
+        });
         this.isOpen = false;
         this.updateTruncatedText();
+        this.ignoreNextMutation = false;
     }
     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();
+                if (!this.ignoreNextMutation) {
+                    this.initializeOptions();
+                }
             });
             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;
@@ -139,10 +168,8 @@ const DropdownComponent = /*@__PURE__*/ proxyCustomElement(class DropdownCompone
             });
         });
         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() {
@@ -156,15 +183,15 @@ const DropdownComponent = /*@__PURE__*/ proxyCustomElement(class DropdownCompone
         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: 'd8d3296f63b4cd704e43ae30e465589d14445ec2', 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: '642ed6f5d43c69b490aa1a22ec7679b571519c19', class: "b2b-dropdown__wrapper", onFocus: this.onFocus, onBlur: this.onBlur }, h("div", { key: '6e9b9bc869a7307f175dd524b749de54e87fd5ed', 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,
@@ -191,6 +218,7 @@ const DropdownComponent = /*@__PURE__*/ proxyCustomElement(class DropdownCompone
         "selectedValue": [32],
         "selectedText": [32],
         "options": [32],
+        "truncatedText": [32],
         "clearSelection": [64]
     }, undefined, {
         "isOpen": ["watchDropdownState"]

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

@@ -24,7 +24,7 @@ const FlyoutMenuOptionComponent = /*@__PURE__*/ proxyCustomElement(class FlyoutM
         }
     }
     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/components/b2b-flyout-menu.js

@@ -151,12 +151,12 @@ const FlyoutMenuComponent = /*@__PURE__*/ proxyCustomElement(class FlyoutMenuCom
         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" })))));
     }
     get hostElement() { return this; }
     static get style() { return B2bFlyoutMenuStyle0; }

package/dist/components/b2b-grid-col.js

@@ -17,7 +17,7 @@ const B2bGridColumnComponent = /*@__PURE__*/ proxyCustomElement(class B2bGridCol
         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' })));
     }
     get hostElement() { return this; }
 }, [1, "b2b-grid-col", {

package/dist/components/b2b-grid-row.js

@@ -70,7 +70,7 @@ const B2bGridRowComponent = /*@__PURE__*/ proxyCustomElement(class B2bGridRowCom
         });
     }
     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`,
@@ -78,7 +78,7 @@ const B2bGridRowComponent = /*@__PURE__*/ proxyCustomElement(class B2bGridRowCom
                 ['display']: 'flex',
                 ['flex-wrap']: 'wrap',
                 ['box-sizing']: 'border-box',
-            } }, h("slot", { key: 'b814a34254890bde8a7690c9fa58bc42b3f8d35d' })));
+            } }, h("slot", { key: 'e203c9bde0b21f923b356b6e330ab6e4227fd1a5' })));
     }
     get hostElement() { return this; }
 }, [1, "b2b-grid-row", {

package/dist/components/b2b-grid.js

@@ -11,7 +11,7 @@ const B2bGridComponent = /*@__PURE__*/ proxyCustomElement(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' })));
     }
     get hostElement() { return this; }
     static get style() { return B2bGridStyle0; }

package/dist/components/b2b-label.js

@@ -11,10 +11,10 @@ const LabelComponent = /*@__PURE__*/ proxyCustomElement(class LabelComponent ext
         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 style() { return B2bLabelStyle0; }
 }, [1, "b2b-label", {

package/dist/components/b2b-modal.js

@@ -210,10 +210,10 @@ const ModalComponent = /*@__PURE__*/ proxyCustomElement(class ModalComponent ext
         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 }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

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

@@ -220,16 +220,16 @@ const B2bMultiSelectDropdown = /*@__PURE__*/ proxyCustomElement(class B2bMultiSe
         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))));
     }
     get hostElement() { return this; }

package/dist/components/b2b-pagination.js

@@ -101,7 +101,7 @@ const PaginationComponent = /*@__PURE__*/ proxyCustomElement(class PaginationCom
         };
     }
     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/components/b2b-paragraph.js

@@ -1,54 +1,4 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-
-const paragraphCss = ":root,:host{--b2b-color-black-50:#333333;--b2b-color-black-100:#222222;--b2b-color-white-100:#FFFFFF;--b2b-color-grey-10:#F0F0F0;--b2b-color-grey-25:#F6F6F6;--b2b-color-grey-50:#EEEEEE;--b2b-color-grey-100:#E6E6E6;--b2b-color-grey-150:#D5D5D5;--b2b-color-grey-200:#C4C4C4;--b2b-color-grey-250:#B1B1B1;--b2b-color-grey-300:#9E9E9E;--b2b-color-grey-400:#777777;--b2b-color-red-50:#FFDDE3;--b2b-color-red-100:#D4021D;--b2b-color-red-150:#E6344B;--b2b-color-red-200:#BB0004;--b2b-color-red-250:#850012;--b2b-color-blue-10:#F2F7FF;--b2b-color-blue-25:#DBE7FA;--b2b-color-blue-50:#87B1F0;--b2b-color-blue-100:#0F63E1;--b2b-color-blue-200:#093E90;--b2b-color-primary:#D4021D;--b2b-color-error-100:#E6344B;--b2b-color-warning-50:#FFD998;--b2b-color-warning-100:#FFB432;--b2b-color-success-50:#D6E0CC;--b2b-color-success-100:#326400;--b2b-color-info-50:#CCD6E0;--b2b-color-info-100:#003264;--b2b-color-hover-default:#DBE7FA;--b2b-color-hover-black:#3B3B3B;--b2b-color-background-overlay-transparent-80:#22222280;--b2b-color-background-overlay-transparent-40:#22222240;--b2b-color-table-selected-default:#CCE9FF;--b2b-color-table-expand-hover:#DBE7FA;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-font-weight-thin:100;--b2b-font-weight-normal:500;--b2b-font-weight-bold:700;--b2b-size-1:0.0625rem;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--b2b-color-error-50:var(--b2b-color-red-50);--b2b-color-background-page:var(--b2b-color-grey-10);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-size-icon-50:var(--b2b-size-40);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-line-height-100:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-60);--b2b-size-headline-line-height-400:var(--b2b-size-60)}:root [data-theme=\"dark\"]{--b2b-color-black-50:#333333;--b2b-color-black-100:#222222;--b2b-color-white-100:#FFFFFF;--b2b-color-grey-10:#F0F0F0;--b2b-color-grey-25:#F6F6F6;--b2b-color-grey-50:#EEEEEE;--b2b-color-grey-100:#E6E6E6;--b2b-color-grey-150:#D5D5D5;--b2b-color-grey-200:#C4C4C4;--b2b-color-grey-250:#B1B1B1;--b2b-color-grey-300:#9E9E9E;--b2b-color-grey-400:#777777;--b2b-color-red-50:#FFDDE3;--b2b-color-red-100:#D4021D;--b2b-color-red-150:#E6344B;--b2b-color-red-200:#BB0004;--b2b-color-red-250:#850012;--b2b-color-blue-10:#F2F7FF;--b2b-color-blue-25:#DBE7FA;--b2b-color-blue-50:#87B1F0;--b2b-color-blue-100:#0F63E1;--b2b-color-blue-200:#093E90;--b2b-color-primary:#D4021D;--b2b-color-error-100:#E6344B;--b2b-color-warning-50:#FFD998;--b2b-color-warning-100:#FFB432;--b2b-color-success-50:#D6E0CC;--b2b-color-success-100:#326400;--b2b-color-info-50:#CCD6E0;--b2b-color-info-100:#003264;--b2b-color-hover-default:#DBE7FA;--b2b-color-hover-black:#3B3B3B;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-font-weight-thin:100;--b2b-font-weight-normal:500;--b2b-font-weight-bold:700;--b2b-size-1:0.0625rem;--b2b-size-5:0.125rem;--b2b-size-7:0.1875rem;--b2b-size-10:0.25rem;--b2b-size-13:0.3125rem;--b2b-size-15:0.375rem;--b2b-size-20:0.5rem;--b2b-size-25:0.625rem;--b2b-size-30:0.75rem;--b2b-size-35:0.875rem;--b2b-size-40:1rem;--b2b-size-45:1.125rem;--b2b-size-50:1.25rem;--b2b-size-53:1.3125rem;--b2b-size-55:1.375rem;--b2b-size-60:1.5rem;--b2b-size-70:1.75rem;--b2b-size-80:2rem;--b2b-size-90:2.25rem;--b2b-size-100:2.5rem;--b2b-size-120:3rem;--b2b-size-140:3.5rem;--b2b-size-150:3.75rem;--b2b-size-160:4rem;--b2b-size-200:5rem;--b2b-color-error-50:var(--b2b-color-red-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-inverted:var(--b2b-color-black-100)}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf\");font-weight:normal;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf\") format(\"truetype\");font-weight:bold;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf\") format(\"truetype\");font-weight:100;font-style:normal}@font-face{font-family:ObcIcons;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff\")}.b2b-paragraph{font-family:var(--b2b-font-family-default);margin:0 0 var(--b2b-size-30)}.b2b-paragraph--size-50{font-size:var(--b2b-size-copy-50);line-height:var(--b2b-size-copy-line-height-75)}.b2b-paragraph--size-100{font-size:var(--b2b-size-copy-100);line-height:var(--b2b-size-copy-line-height-100)}.b2b-paragraph--weight-normal{font-weight:var(--b2b-font-weight-normal)}.b2b-paragraph--weight-bold{font-weight:var(--b2b-font-weight-bold)}.b2b-paragraph--align-left{text-align:left}.b2b-paragraph--align-right{text-align:right}.b2b-paragraph--align-center{text-align:center}.b2b-paragraph--variant-black-100{color:var(--b2b-color-copy-default)}.b2b-paragraph--variant-grey-400{color:var(--b2b-color-grey-400)}.b2b-paragraph--no-margin{margin:0}";
-const B2bParagraphStyle0 = paragraphCss;
-
-const ParagraphComponent = /*@__PURE__*/ proxyCustomElement(class ParagraphComponent extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.weight = 'normal';
-        this.size = '100';
-        this.align = 'left';
-        this.margin = true;
-        this.variant = 'black-100';
-        this.display = 'block';
-    }
-    render() {
-        return (h("p", { key: 'e34be906b02a82e422ecd49ccd6adf15d1744897', style: {
-                display: this.display,
-            }, class: {
-                'b2b-paragraph': true,
-                ['b2b-paragraph--size-' + this.size]: true,
-                ['b2b-paragraph--weight-' + this.weight]: true,
-                ['b2b-paragraph--align-' + this.align]: true,
-                ['b2b-paragraph--no-margin']: !this.margin,
-                ['b2b-paragraph--variant-' + this.variant]: true,
-            } }, h("slot", { key: '3af5b741adf391a40b7a5e08d33cb04c5ab30ad7' })));
-    }
-    static get style() { return B2bParagraphStyle0; }
-}, [1, "b2b-paragraph", {
-        "weight": [1],
-        "size": [1],
-        "align": [1],
-        "margin": [4],
-        "variant": [1],
-        "display": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["b2b-paragraph"];
-    components.forEach(tagName => { switch (tagName) {
-        case "b2b-paragraph":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ParagraphComponent);
-            }
-            break;
-    } });
-}
+import { P as ParagraphComponent, d as defineCustomElement$1 } from './paragraph.js';
 
 const B2bParagraph = ParagraphComponent;
 const defineCustomElement = defineCustomElement$1;

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

@@ -24,11 +24,11 @@ const ProgressBarComponent = /*@__PURE__*/ proxyCustomElement(class ProgressBarC
     }
     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/components/b2b-radio-button.js

@@ -64,11 +64,11 @@ const B2bRadioButtonComponent = /*@__PURE__*/ proxyCustomElement(class B2bRadioB
         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)) : (''))));
     }
     get host() { return this; }

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

@@ -76,11 +76,11 @@ const RadioButtonGroupComponent = /*@__PURE__*/ proxyCustomElement(class RadioBu
         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)) : (''))));
     }
     get host() { return this; }

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

@@ -12,7 +12,7 @@ const B2BRequiredSeparator = /*@__PURE__*/ proxyCustomElement(class B2BRequiredS
         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 style() { return B2bRequiredSeparatorStyle0; }
 }, [1, "b2b-required-separator", {

package/dist/components/b2b-scrollable-container.js

@@ -10,7 +10,7 @@ const ScrollableContainerComponent = /*@__PURE__*/ proxyCustomElement(class Scro
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'b455812c0f370a849758c9ca169a63b7ecde9bad' }, h("slot", { key: 'cd2c7bf54cedfac2de42f5b248e3279f288e6a3d' })));
+        return (h(Host, { key: 'c5c71924d38f1788a60b19e49ad09a3aa5d637f6' }, h("slot", { key: '4fa412e60d51aa58e9e6d40936bb4f4a4725dab5' })));
     }
     get host() { return this; }
     static get style() { return B2bScrollableContainerStyle0; }

package/dist/components/b2b-search.js

@@ -35,7 +35,7 @@ const SearchComponent = /*@__PURE__*/ proxyCustomElement(class SearchComponent e
         }
     }
     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 })))));
     }
     get hostElement() { return this; }
 }, [1, "b2b-search", {

package/dist/components/b2b-shimmer.js

@@ -17,7 +17,7 @@ const ShimmerComponent = /*@__PURE__*/ proxyCustomElement(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 style() { return B2bShimmerStyle0; }
 }, [1, "b2b-shimmer", {

package/dist/components/b2b-snackbar.js

@@ -96,17 +96,17 @@ const SnackbarComponent = /*@__PURE__*/ proxyCustomElement(class SnackbarCompone
         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 watchers() { return {
         "opened": ["onVisibleChange"]

package/dist/components/b2b-tab-group.js

@@ -127,7 +127,7 @@ const B2bTabGroupComponent = /*@__PURE__*/ proxyCustomElement(class B2bTabGroupC
         });
     }
     render() {
-        return (h(Host, { key: 'c09986eb1b9997eaa4ca37376132ce7d7d5ca855' }, h("slot", { key: '091a1eb4d6c95b5bc0af2eb5d94803068ef7f529', name: "tab" }), h("b2b-separator", { key: '0e2e540da62aa29c9c09e3cb28ade9ebf51e6977' }), h("slot", { key: '0713eab995ff1f9e7a7932b58651799ed3b7c161', name: "panel" })));
+        return (h(Host, { key: 'a652623572354f06d1b773b9a98760a7c9ec9cf7' }, h("slot", { key: 'f80657d44b37339fb026e92873fb177b2393e841', name: "tab" }), h("b2b-separator", { key: 'e82a1891e3c509fab6f2b17e74f39796645bbdd2' }), h("slot", { key: 'e9ccf361a9bfa3424fc861b6ba8f685510ef39bd', name: "panel" })));
     }
     get hostElement() { return this; }
 }, [1, "b2b-tab-group", {

package/dist/components/b2b-tab-panel.js

@@ -12,7 +12,7 @@ const B2bTabPanelComponent = /*@__PURE__*/ proxyCustomElement(class B2bTabPanelC
         this.generatedId = i++;
     }
     render() {
-        return (h(Host, { key: '895835ee9542f04852f08ed863d9214355741211', id: `b2b-tab-panel-${this.generatedId}`, role: "tabpanel" }, h("div", { key: '127afd55dfff1e9642180ee6db0f72e002914a22', class: "b2b-tab-panel" }, h("slot", { key: '199bca30f2cda69bbb63cfbc3f67bce5ba6136fa' }))));
+        return (h(Host, { key: '09b20e44ef0677b3ce5babd5da199ac5803e60c2', id: `b2b-tab-panel-${this.generatedId}`, role: "tabpanel" }, h("div", { key: '72ddbd132da8c1bcb7810397dd50530d722eb5ce', class: "b2b-tab-panel" }, h("slot", { key: '6318fea037462b2b43f33bde3bd0e6ee42c1dc18' }))));
     }
     static get style() { return B2bTabPanelStyle0; }
 }, [1, "b2b-tab-panel"]);

package/dist/components/b2b-tab.js

@@ -25,12 +25,12 @@ const B2bTabComponent = /*@__PURE__*/ proxyCustomElement(class B2bTabComponent e
         }
     }
     render() {
-        return (h(Host, { key: 'b4ed6dd0f35da1b2ac366ab772caa1dc900d4f5e', id: `b2b-tab-${this.generatedId}`, "aria-role": "tab", "aria-selected": this.selected, role: this.disabled ? false : 'tab', disabled: this.disabled, tabindex: this.disabled ? false : this.selected ? '0' : '-1' }, h("span", { key: '1bb21fa15b4d7d07b4ef8134b18e8819d1a4a8e4', class: {
+        return (h(Host, { key: '040969f8040c2e7f38641b054aa71dbce563bbcd', id: `b2b-tab-${this.generatedId}`, "aria-role": "tab", "aria-selected": this.selected, role: this.disabled ? false : 'tab', disabled: this.disabled, tabindex: this.disabled ? false : this.selected ? '0' : '-1' }, h("span", { key: '094d8312566c347cf529fb9f71b747f2ed1348f6', class: {
                 'b2b-tab': true,
                 'b2b-tab--selected': this.selected,
                 'b2b-tab--disabled': this.disabled,
                 'b2b-tab--error': this.invalid,
-            } }, h("slot", { key: 'b0dfb40b808650b49410a25f2d01a042b27aca16' }))));
+            } }, h("slot", { key: 'cd453ac793439c1572ff80f84a29d5d60b6e0517' }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/dist/components/b2b-table-row.js

@@ -123,12 +123,12 @@ const TableRowComponent = /*@__PURE__*/ proxyCustomElement(class TableRowCompone
         }
     }
     render() {
-        return (h(Host, { key: 'b28513a5d03b1328fbe8d54d35fc45077ae00403', class: {
+        return (h(Host, { key: 'b3c742ca195dec5c8037a589122e41d87afcee5d', class: {
                 'b2b-table-row': true,
                 ['b2b-table-row--colspan']: this.size === TableSizes.COLSPAN,
                 ['b2b-table-row--highlight']: this.highlight,
                 [`b2b-table-row--color-${this.getRowColor()}`]: true,
-            }, role: "row" }, this.getAccordionColumns(), this.getCheckbox(), h("slot", { key: 'eeb52f24d09ea0aa24e36709dcb8bd35de6bd4d5' })));
+            }, role: "row" }, this.getAccordionColumns(), this.getCheckbox(), h("slot", { key: 'ae02badbe6847a68f2e5e1e08e676678f7144c1b' })));
     }
     get hostElement() { return this; }
     static get style() { return B2bTableRowStyle0; }

package/dist/components/b2b-table-rowgroup.js

@@ -120,11 +120,11 @@ const TableRowgroupComponent = /*@__PURE__*/ proxyCustomElement(class TableRowgr
         this.makeHeaderRowNotSelectable();
     }
     render() {
-        return (h(Host, { key: '2990111f95881991d6a5af1e9a60adb0471549cc', class: {
+        return (h(Host, { key: '1fa1822d42bf6819b2fd6de382a0075a05715569', class: {
                 ['b2b-table-rowgroup__' + this.type]: true,
                 'b2b-table-rowgroup--fixed': this.fixed,
                 'b2b-table-rowgroup--colspan': this.size === TableSizes.COLSPAN,
-            }, role: "rowgroup" }, h("slot", { key: '34df739d91953efc2b0c9400f7ff76aca51facf3' })));
+            }, role: "rowgroup" }, h("slot", { key: '6ffd528b4b6330a5f4c66b50b3c329853fd441a8' })));
     }
     get host() { return this; }
     static get style() { return B2bTableRowgroupStyle0; }

package/dist/components/b2b-table.js

@@ -67,9 +67,9 @@ const TableComponent = /*@__PURE__*/ proxyCustomElement(class TableComponent ext
         }
     }
     render() {
-        return (h(Host, { key: '49c1ea9491880fa3a65e35fa83159b8764a85efd', class: {
+        return (h(Host, { key: 'b838cb824f9e59b01eb827642d130b8933bfa331', class: {
                 ['b2b-table--' + this.size]: true,
-            }, role: "table" }, h("slot", { key: '3531b7eea4444cfe5c70239efb42f4144324d2d1' })));
+            }, role: "table" }, h("slot", { key: 'a657fe4d62601fff6bf5ee6d640fbb8d8c351055' })));
     }
     get host() { return this; }
     static get style() { return B2bTableStyle0; }