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

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

@@ -49,7 +49,7 @@ export class B2BInputGroup {
         }
     }
     render() {
-        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: {
+        return (h(Host, { key: 'fa99a4e2f8a5923b14d6304378fc574e8fa0f451' }, h("div", { key: 'ac085ec1ba4ae6566e29192fcf41487a5aeaf2dd', class: { 'b2b-input-wrapper': true } }, h("slot", { key: '9412332e469771720376b5d16b101b21867a29ad', name: "start" }), h("slot", { key: 'eb2201d7243365abd486e6a17c99ba84e942415d' }), h("slot", { key: 'c4d8b4c1b837de6bf80049d8b94e402dbb1e663d', 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: '87fe33e03bfe683d013e8d992bba9e3863834514' }, h("label", { key: 'e88216535eb3d9638fc75a638daffb81bcdf0bb1', class: {
+        return (h(Host, { key: '8cdefd0d3cafc0bdf9dba5fa7a15080a4a288379' }, h("label", { key: '04d4659be8363b1b8760c94e5607a3048e02cebf', class: {
                 'b2b-input-label': true,
                 'b2b-input-label--required': this.required,
                 'b2b-input-label--disabled': this.disabled,
-            } }, h("slot", { key: 'cf1736baaf9fd224071f3e21122c263b9865c318' }))));
+            } }, h("slot", { key: 'a858c509020588bb10669c4fa0bc682ba97a5675' }))));
     }
     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: '566b7cf1696550467c5b8c29cedccf5f8821dc6e', class: "b2b-input-list__option", onClick: this.handleClick, role: "option" }, this.option));
+        return (h(Host, { key: 'e9c7180cdbf328d435b5bcac76e4e11a234d4dcc', 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.css

@@ -237,9 +237,6 @@
   display: flex;
   flex-direction: column;
   min-width: 7rem;
-  /* this is a workaround to force purgecss to include the overwrites of
-   the variables --b2b-border-right and --b2b-border-radius
-  */
 }
 .b2b-input-list.b2b-input-list__options-on b2b-input {
   --b2b-border-radius: var(--b2b-size-border-no-radius-bottom);
@@ -300,6 +297,11 @@
 .b2b-input-list b2b-icon-100 {
   --b2b-icon-cursor: pointer;
 }
+.b2b-input-list {
+  /* this is a workaround to force purgecss to include the overwrites of
+   the variables --b2b-border-right and --b2b-border-radius
+  */
+}
 .b2b-input-list .purge-css-include-variables {
   border-radius: var(--b2b-border-radius);
   border-right: var(--b2b-border-right);

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

@@ -7,7 +7,7 @@ describe('B2B-InputList', () => {
         search.setProperty('optionsList', optionsList);
         await page.waitForChanges();
     };
-    const typeInput = async (key = '8') => {
+    const typeInput = async (key = 'o') => {
         let input = await page.find('b2b-input-list >>> b2b-input');
         // focus on input element, focus method did not work
         await input.click();
@@ -62,11 +62,11 @@ describe('B2B-InputList', () => {
     it('should not show search list when the input has no value', async () => {
         await setOptionsList();
         const input = await page.find('b2b-input-list');
-        // focus on input element, focus method did not work
         await input.click();
-        await input.press('8');
+        await input.press('1');
         await page.waitForChanges();
         let searchListResults = await page.find({ text: optionsList[0] });
+        expect(searchListResults).not.toBeNull();
         expect(await searchListResults.isVisible()).toBe(true);
         await input.click();
         await input.press('Backspace');
@@ -105,10 +105,10 @@ describe('B2B-InputList', () => {
     });
     it('should fill up input value with option selected', async () => {
         await setOptionsList();
-        await typeInput('8');
+        await typeInput('1');
         const input = await page.find('b2b-input-list >>> b2b-input');
         let inputValue = await input.getProperty('value');
-        expect(inputValue).toBe('8');
+        expect(inputValue).toBe('1');
         // Click first option on the list
         const option = await page.find({ text: optionsList[0] });
         await option.click();

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

@@ -1,4 +1,5 @@
 import { h, Host, } from "@stencil/core";
+import { parsePropToArray } from "../../utils/json-property-binding-util";
 const keys = {
     ARROW_UP: 'ArrowUp',
     ARROW_DOWN: 'ArrowDown',
@@ -21,6 +22,11 @@ export class InputListComponent {
         // needed to trigger re-render
         this.handleInput = event => {
             this.value = event.detail.value;
+            const term = event.target.value.toLowerCase();
+            const list = parsePropToArray(this.optionsList);
+            this.currentList =
+                term === '' ? list : list.filter(o => o.toLowerCase().includes(term));
+            this.searchValue = term;
             if (this.value === '' || null || undefined) {
                 this.setElementOnBlur();
             }
@@ -81,7 +87,13 @@ export class InputListComponent {
         this.disabled = false;
         this.groupDisabled = false;
         this.hasOptionList = this.optionsList.length > 0;
+        this.currentList = [];
         this.isElementFocused = false;
+        this.searchValue = '';
+    }
+    componentWillLoad() {
+        this.currentList = parsePropToArray(this.optionsList);
+        this.hasOptionList = this.optionsList.length > 0;
     }
     handleKeyDown(event) {
         /** we need to be informed when a user changes focus to the clear button
@@ -129,6 +141,7 @@ export class InputListComponent {
     }
     watchPropHandler(newList) {
         this.hasOptionList = newList.length > 0;
+        this.currentList = [...newList];
     }
     /* Notes:
       Needs onFocusin and onFocusout in the Host element so that the click would
@@ -137,13 +150,13 @@ export class InputListComponent {
     */
     render() {
         const groupOrderClass = this.getGroupOrderClassName() || '';
-        return (h(Host, { key: 'c22a6a73eca142a88eb7cc3f4c975b579df1d709', onBlur: this.setElementOnBlur, onFocus: this.setElementOnFocus }, h("div", { key: '3fb28f6a327c958fcf9d178c4d1814915a13ad3a', class: {
+        return (h(Host, { key: 'a3b50598632e6a0a796a9eb141f26fe12b29e8be', onBlur: this.setElementOnBlur, onFocus: this.setElementOnFocus }, h("div", { key: '9d7e4f051f2593947ce3cbf5602f6a4a602fbdfc', class: {
                 'b2b-input-list': true,
                 'b2b-input-list__options-on': this.hasOptionList &&
                     this.isElementFocused &&
                     Boolean(this.value),
                 [groupOrderClass]: true,
-            } }, 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)));
+            } }, h("b2b-input", { key: '654211622b3bc8094ce6b20edd2b3c19f2ac28c3', 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.currentList.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"; }
@@ -212,11 +225,11 @@ export class InputListComponent {
                 "reflect": true
             },
             "optionsList": {
-                "type": "unknown",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string[]",
-                    "resolved": "string[]",
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
                     "references": {}
                 },
                 "required": false,
@@ -225,6 +238,8 @@ export class InputListComponent {
                     "tags": [],
                     "text": "The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire."
                 },
+                "attribute": "options-list",
+                "reflect": false,
                 "defaultValue": "[]"
             },
             "value": {
@@ -289,7 +304,9 @@ export class InputListComponent {
     static get states() {
         return {
             "hasOptionList": {},
-            "isElementFocused": {}
+            "currentList": {},
+            "isElementFocused": {},
+            "searchValue": {}
         };
     }
     static get events() {

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

@@ -4,10 +4,10 @@ export class LabelComponent {
         this.type = 'neutral';
     }
     render() {
-        return (h("span", { key: '8b3e3c895c71501e761b6a80843403df68190cca', class: {
+        return (h("span", { key: '86d64389cf254eb3fb56e58c9399087e4d053f5f', class: {
                 'b2b-label': true,
                 [`b2b-label--${this.type}`]: true,
-            } }, h("slot", { key: '737f1fff0fd98d426cc910a6af713786aa7bd1cc' })));
+            } }, h("slot", { key: 'd85ee68f76a02a02c4c10e2ef634fdc4c412229a' })));
     }
     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: '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: {
+        return (h(Host, { key: 'bea74834a3926bc7efd9100f065eb4a8603e8bd4' }, h("div", { key: '5d5cca368682bcd7de4f77fe05e702b87943f762', class: { 'b2b-modal': true, 'b2b-modal--open': this.opened } }, h("div", { key: 'ba06899cee12d6ef3d3e71a96040daccfdf3b364', "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabIndex: 0 }), h("div", { key: '0be5c5dcc62576e1662ed7f6185b0ff24afaadc4', class: {
                 'b2b-modal__dialog': true,
                 [`b2b-modal__dialog--${this.variant}`]: true,
-            } }, 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 }))));
+            } }, h("div", { key: '11b056ce706f572663e3a64cd5115ccc45109190', class: "b2b-modal__dialog__header" }, h("div", { key: '073420de4937e8f18a2172a45eb7088caef4624e', class: "b2b-modal__dialog__header-left" }, h("b2b-headline", { key: '3fdaeaccfd4606560ae82c8cbc8ad8eb65a9dfa8', align: "center", size: "200", noMargin: true }, this.heading), h("slot", { key: 'f280675fcff7e81d1dc6388820f04110de703f8f', name: "header-icon" })), h("div", { key: '6a821204fdce083dfa0267714e1bc438b3dfcd56', class: "b2b-modal__dialog__header-right" }, h("button", { key: 'aa97e6cf511417d3a283017419577e6da8f65fff', 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: 'c4ff1783dc4d7c7d7b85bc739d0b5154fc60eacb', clickable: true, icon: "b2b_icon-close", color: this.iconHover ? 'primary' : 'secondary' })))), h("div", { key: 'ebf5d6a280718bf7f4c98e41846dea91dbde6943', class: "b2b-modal__dialog__body" }, h("slot", { key: 'b9b1b56a4b45760e88f6cb7e54281cd468137ccc' })), h("div", { key: 'ff0f612d9581c5f5bd48bd99699b1fc1348a577a', class: "b2b-modal__dialog__footer" }, h("div", { key: 'bf034c403f883695a72bd5ee0ec7a6b5c40f6ef1', class: "b2b-modal__dialog__footer-left" }, h("slot", { key: '52a6a99d0a722bf37c8659290ceaec53d5acc546', name: "footer-left" })), h("div", { key: '5d5a6786dfe6708cb17ca37e92c0f5c4366b6e0c', class: "b2b-modal__dialog__footer-right" }, h("slot", { key: '37f62cb0bf38031673f53f7ef2578e2c5c5219f9', name: "footer-right" })))), h("div", { key: 'b0eb907e93024c42e2b3668316f51b1e6b7d5aa3', "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabIndex: 0 }), h("div", { key: '6d6762fb11007e46c3d3872ab208e40aa0e28d4a', 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: '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: {
+        return (h(Host, { key: '67df2c8968bd816fdd57b9e1c0b3dcd37f9bc401', onFocus: this.setElementOnFocus, onBlur: this.setElementOnBlur, onClick: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("b2b-input-label", { key: '32d25f1327ffab15969ca4dcb4faa953bf9923c3', required: this.required }, this.label), h("div", { key: 'b4d0182e211f6aab9c3061eeffccdd1ceddbf03a', 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: '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: {
+            }, tabindex: 0, role: "combobox", onClick: () => (this.isOpen = !this.isOpen && !disabled), "aria-expanded": this.isElementFocused }, h("div", { key: 'b6a69e9160fa5869d06cc2fc1f6f2d56c8964114', 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: '99a6b2e5baba4598a46f328e808b06e6e4b9d725', icon: "b2b_icon-arrow-down" })), h("div", { key: '0de344aa373d4ca82bf716df966448e95b5717f8', class: {
                 'b2b-multiselect-dropdown__options-container': true,
                 'b2b-multiselect-dropdown__options-container--visible': this.isOpen,
-            } }, 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 &&
+            } }, h("div", { key: '53e6ef0829f30ab13e0441eb54118b19835ce353', class: "b2b-multiselect-dropdown__options", role: "listbox", "aria-label": this.label, tabIndex: -1 }, h("div", { key: 'eb30f1caec191fb6021c172fae01ccf30e7d4f68', class: "b2b-multiselect-dropdown__option__search" }, h("input", { key: '7b29fd3710eb4fecc9dc8d3c29dfae60ec3ea375', type: "text", onInput: this.handleInput, class: "b2b-multiselect-dropdown__option__search__input", placeholder: this.searchPlaceholder })), h("b2b-multiselect-option", { key: '9efd9cac0ef3c2c9d61d32292bbf5ade76991996', 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: '0147313a2d52d7cdf334f118f8a5eae6fb2a73df', role: "option", class: {
+        return (h(Host, { key: 'f1a1faa0a97e00af9fbfa291aba3c53ea92ad44c', role: "option", class: {
                 'b2b-multiselect-dropdown__option': true,
-            } }, 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 })));
+            } }, h("b2b-checkbox", { key: '251ccb65111ecb72b57c19786df65a11a1432ab7', 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.css

@@ -234,9 +234,6 @@
   list-style: none;
   padding: 0;
   margin: 0;
-  /* this is a workaround to force purgecss to include the overwrites of
-     the variables --b2b-border-right and --b2b-border-radius
-  */
 }
 .b2b-pagination li {
   transition: opacity 0.3s ease, visibility 0.3s ease;
@@ -258,6 +255,11 @@
   --b2b-border-right: 1px solid var(--b2b-button-secondary-border-color);
   --b2b-border-radius: var(--b2b-size-border-no-radius-left);
 }
+.b2b-pagination {
+  /* this is a workaround to force purgecss to include the overwrites of
+     the variables --b2b-border-right and --b2b-border-radius
+  */
+}
 .b2b-pagination .purge-css-include-variables {
   border-radius: var(--b2b-border-radius);
   border-right: var(--b2b-border-right);

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

@@ -91,7 +91,7 @@ export class PaginationComponent {
         };
     }
     render() {
-        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) => {
+        return (h("nav", { key: '88eb108790c1be9f974f7c88f602afa2ee35f1e9' }, h("ol", { key: '19a0fff8f2ac83913593530d921e8915e496400b', 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/progress-bar/progress-bar.js

@@ -17,11 +17,11 @@ export class ProgressBarComponent {
     }
     render() {
         const labelExists = this.label !== undefined && this.label !== '';
-        return (h(Host, { key: '4511acab06e497842a84eed7cfa9beb7d575dbe7' }, h("div", { key: '03b04648866fed3e0c276ca8218201639b23f6fc', class: {
+        return (h(Host, { key: 'b0060404440e78b3a2331df11a2d56d4071c7e19' }, h("div", { key: '031bd2160763920981cd6491bc1099636f3c21fd', class: {
                 [`b2b-progress-bar__${this.labelPosition}-${this.labelType}`]: true,
-            } }, h("div", { key: '8ddd2295fd43f56b8393178e38ea414e96f332ed', class: "b2b-progress-bar__wrapper" }, h("div", { key: 'e6ea32124f8df1b937dd8f62e1e06d306229cd75', class: "b2b-progress-bar__progress", style: {
+            } }, h("div", { key: '945e5c7bf601cd8d34b0cd095245a8cc6b801cea', class: "b2b-progress-bar__wrapper" }, h("div", { key: '93086dd441221a8ff681d9de2da8ff2f2d4ae0b5', class: "b2b-progress-bar__progress", style: {
                 width: `${this.getProgress()}%`,
-            } })), h("div", { key: '36a7f3c4c5229350ea3a37827fa0613db0ab33b7', class: {
+            } })), h("div", { key: '82ce3cabe0897878d2715ca96a07ba8347f42590', 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: '5fbc72c2f038679ea04d1c99a6f687e4829d7d51', onClick: this.onClick }, h("div", { key: '895c751c5086b2f7d466635020a39a96d1c9f220', class: {
+        return (h(Host, { key: 'fd1084fd2df24d7de2727441f69c03f9aa497f22', onClick: this.onClick }, h("div", { key: 'a4d0e872905049f686a1d70a883aba37bc7b3823', class: {
                 'b2b-radio': true,
                 'b2b-radio--error': this.invalid && !this.disabled,
                 'b2b-radio--disabled': this.disabled,
-            } }, 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) ||
+            } }, h("div", { key: 'e334d57a546380ae10aad7bd6c8c1688650d5107', class: "b2b-radio-items" }, h("input", { key: '20b59620275ef3c93ecec45c4c84fd8098ce47dc', 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: '71e1468f0d8046d9c80cb0bb159081a772e2b871', id: this.name, required: this.required, disabled: this.disabled }, h("slot", { key: '00b2e6022ff3cc78ef450d7a7611f08e6a5d0adb', 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: 'c47db22cd7ab5484813e052db015d2b8d1405bb9' }, h("div", { key: '1e7fc6246f83ea53debd5ef7fc42772e3c41a936', class: {
+        return (h(Host, { key: '0ae32b84f0c10b153284933bddbb15e0450723a9' }, h("div", { key: '04f3fc2aa309f7e5b59ec15c2667620d1c4d4473', 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: 'a406988d11f921c8eb16296820212da84d014e8c' }, h("div", { key: '2b6fb5ac504cdc65b354d8d30727b0fb6e725376', class: "b2b-radio-group-options" }, h("slot", { key: 'd7161d2da1c4241830815da13fe87067ecb55931' }))), (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: '219771596262fd4551efebb096fe3a1f84075155' }, h("div", { key: '9fd874e3297a02c71f76fa533972276f09fb2d41', class: "b2b-radio-group-options" }, h("slot", { key: 'e912fcca4012b8512fbe4b4cc485bc66158ad26e' }))), (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: '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' })));
+        return (h(Host, { key: '9aa9e447faee8fc6a4d794815ec5ef38b8aeb1fd' }, h("div", { key: '655024bc9e4790117f4f940743ccd0b99c58cc81', class: "b2b-required-separator__label" }, h("span", { key: '194c31216547c20ec3ad50879012d201536db660', class: "b2b-required-separator__asterisk" }, "* "), h("span", { key: 'c70e239fae2007202edfc38349c1f06e004fc720' }, this.label)), h("b2b-separator", { key: '18e7aa82496629262a0b6a6eace005abe775461d' })));
     }
     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: '1d7eea4ad65056f16127e2029811239e0540560b' }, h("div", { key: '153f0ace757daff8776fac4fbe1cc9a05e9c0dfa', style: {
+        return (h(Host, { key: '913fba2af4e94c6e7d216077cea966fcb82890e2' }, h("div", { key: '78d110134ffcbba85ab5f5bdb2a70680986503f0', style: {
                 ['background-color']: this.color,
                 ['border']: `1px solid ${this.borderColor || this.color}`,
             }, class: {
                 'b2b-rounded-icon': true,
-            } }, h("div", { key: '7b28d41d6d5cb38c21aa4487cca0ce070663909a', style: {
+            } }, h("div", { key: 'b4b397689fb44687dd1cdc588ac3ebc12d655d19', style: {
                 ['color']: this.contentColor,
-            } }, h("slot", { key: '32e90de259f352aff82118dd1f9904475fc875e2', name: "icon" })), h("div", { key: '38f7a97f95191cd039a4bbbcf20a9b5ce1826a8e', style: {
+            } }, h("slot", { key: '1d7fe83ff0e4ea10ee9d4bc6cd24346ee5ef2b5e', name: "icon" })), h("div", { key: '0d820dcc8d71da4932f1c2a969d80decfacbee7b', style: {
                 ['color']: this.contentColor,
-            } }, h("slot", { key: 'e994e7fbd49f656c865ce8517833be0d6bbb852e', name: "text" })))));
+            } }, h("slot", { key: 'be1ee3143843af1227fc48d58fb47498acd615e0', 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: 'c5c71924d38f1788a60b19e49ad09a3aa5d637f6' }, h("slot", { key: '4fa412e60d51aa58e9e6d40936bb4f4a4725dab5' })));
+        return (h(Host, { key: '577b0d6563b9dbd02bdc52659719bd9b8bc93abf' }, h("slot", { key: 'c08d17e55359e8a3bc3616bf401bebc91699a50c' })));
     }
     static get is() { return "b2b-scrollable-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/search/search.e2e.js

@@ -84,7 +84,7 @@ describe('B2B-Search', () => {
         const input = await page.find('b2b-search >>> b2b-input-list');
         // focus on input element, focus method did not work
         await input.click();
-        await input.press('8');
+        await input.press('1');
         await page.waitForChanges();
         // Click first option on the list
         const option = await page.find({ text: optionsList[0] });

package/dist/collection/components/search/search.js

@@ -22,7 +22,7 @@ export class SearchComponent {
         }
     }
     render() {
-        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 })))));
+        return (h(Host, { key: 'aea5b63ad99666f54f0bb28641b94f0cf2a7826f' }, h("b2b-input-group", { key: 'abf3db241031678e7494f259afacdd5286bf706c', disabled: this.disabled }, h("b2b-input-list", { key: 'c15698d8e4ea0df49b8aaae34530d24a88adc6a5', slot: "start", value: this.value, placeholder: this.placeholder, optionsList: this.optionsList, "onb2b-input": this.onInput, "onb2b-option-selected": this.onOptionSelected }, h("slot", { key: '6b6f678fa0420061de5d2f2534c8b81a9461dd6d' })), h("b2b-button", { key: 'dc33effb80da2d1e80f3f2c82fec517410403e53', slot: "end", variant: "primary", onClick: this.onSearchClicked }, h("b2b-icon-100", { key: '147dd58698d5e51cba2934b454525895e3b5c6d8', 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: 'f1ab4806be7ac4128d95a047421be58502b0cadf' }, h("div", { key: 'c478fc67a79c15a6d74af39eb6747d25d3d58922', class: {
+        return (h(Host, { key: '3d72ec054841ab058eaf6e57f222001690fc253f' }, h("div", { key: '4638385437636a79b35a5254dd920d85a2531800', 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: '82fc3e95ff0f946ae6cfd5c59ab1a0e04df62ca5' }, this.loading ? (h("div", { class: "b2b-shimmer", style: shimmerStyle })) : (h("slot", null))));
+        return (h(Host, { key: 'fb6af2424eef31132e91f98c08d7fdc445a52aa4' }, 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

@@ -86,17 +86,17 @@ export class SnackbarComponent {
         clearTimeout(this.timeoutId);
     }
     render() {
-        return (h(Host, { key: '55fbed7dd9fa44a54d25277ca6f1e75429ba1b37', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'dff92b0614f3e59e0c809b975310646814b8145e', class: {
+        return (h(Host, { key: '58090fac24ced577a62bae4e1fe0101aeaf91b29', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '64c5630d12184b91c1cfba84c93c1e3a5860f9c8', class: {
                 'b2b-snackbar': true,
                 [`b2b-snackbar--${this.type}`]: true,
                 'b2b-snackbar--opened': this.opened,
-            }, 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: {
+            }, style: { width: this.width || 'auto' } }, h("div", { key: 'd5094808134bcea3cfc96190fdde31c929d02097', class: "b2b-snackbar__content" }, h("span", { key: '78d3c42ed255d7137236485dd4dab3d03e53c16c', class: { [`b2b-snackbar--${this.type}__icon`]: true } }, this.chooseIcon()), h("p", { key: '9ec8d4ca79c7c285acac581ecd51eedc46ce0122', 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: 'c8384158b5bdec6af91cae1adc66763cbdf528d1', class: {
+            }, onClick: this.handleActionClick }, h("a", null, this.actionLabel))), h("div", { key: 'dfd85891f9f75aaa4431a5e739cb800bb2d33d58', class: {
                 'b2b-snackbar__close-icon': true,
                 [`b2b-snackbar__close-icon--${this.type}`]: true,
-            }, onClick: this.close }, h("b2b-icon-100", { key: '8315309a832f0767ecbbc40ef147b0005a66ce7a', clickable: true, size: 24, icon: "b2b_icon-close" })))));
+            }, onClick: this.close }, h("b2b-icon-100", { key: '68222a852700593f0c135ac855467d517bd6f649', 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: '0d638dd6efcfd16c740a35d99f99f0432e50ae67', class: {
+        return (h("div", { key: '0c447cbf277dcfe6f91ab0d3537262a5757b789c', class: {
                 'b2b-spinner': true,
                 ['b2b-spinner--size-' + this.size]: true,
                 ['b2b-spinner--color-' + this.color]: true,

package/dist/collection/components/tab/tab.js

@@ -17,12 +17,12 @@ export class B2bTabComponent {
         }
     }
     render() {
-        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: {
+        return (h(Host, { key: '41b47b38d655fb6bfc42c8e2444e8aee1776ad2b', 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: '544a01d49daaf6542ba7e367d014ded65f813d89', class: {
                 'b2b-tab': true,
                 'b2b-tab--selected': this.selected,
                 'b2b-tab--disabled': this.disabled,
                 'b2b-tab--error': this.invalid,
-            } }, h("slot", { key: 'cd453ac793439c1572ff80f84a29d5d60b6e0517' }))));
+            } }, h("slot", { key: '221f1a424a292b4d4f1e6b02f67f7e4602b9eb3f' }))));
     }
     static get is() { return "b2b-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -121,7 +121,7 @@ export class B2bTabGroupComponent {
         });
     }
     render() {
-        return (h(Host, { key: 'a652623572354f06d1b773b9a98760a7c9ec9cf7' }, h("slot", { key: 'f80657d44b37339fb026e92873fb177b2393e841', name: "tab" }), h("b2b-separator", { key: 'e82a1891e3c509fab6f2b17e74f39796645bbdd2' }), h("slot", { key: 'e9ccf361a9bfa3424fc861b6ba8f685510ef39bd', name: "panel" })));
+        return (h(Host, { key: '52d6f3b4803f41853eedf2b92790ad353548498b' }, h("slot", { key: '7a59390254d38c9d40dbc1c882082536921c4c02', name: "tab" }), h("b2b-separator", { key: '67d11fcb5798e23b58205672054c40ab7dec12f8' }), h("slot", { key: '8e2bc99d1aa2f2e71cdebdc723b61d1b8be23f29', name: "panel" })));
     }
     static get is() { return "b2b-tab-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,7 +5,7 @@ export class B2bTabPanelComponent {
         this.generatedId = i++;
     }
     render() {
-        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' }))));
+        return (h(Host, { key: '25b0780d337b5904862224f6194834de6e7af2ee', id: `b2b-tab-panel-${this.generatedId}`, role: "tabpanel" }, h("div", { key: 'd6722fed4150424eef6c2d828efe6728ec406ce5', class: "b2b-tab-panel" }, h("slot", { key: 'b37b3b6f6b43ba1ef55574492dd3791ddf478037' }))));
     }
     static get is() { return "b2b-tab-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table-cell/table-cell.js

@@ -36,14 +36,14 @@ export class TableCellComponent {
         }
     }
     render() {
-        return (h(Host, { key: '285cee3af71e3d05dd2916f771fe36e47e001998', onMouseEnter: this.addExpandStyles, onMouseLeave: this.removeExpandStyles, class: {
+        return (h(Host, { key: '31a2402a856935d1441e5b7225adcb98fa092e02', onMouseEnter: this.addExpandStyles, onMouseLeave: this.removeExpandStyles, class: {
                 'b2b-table-cell': true,
                 ['b2b-table-cell--colspan']: this.size === TableSizes.COLSPAN,
                 ['b2b-table-cell--ellipsis']: this.useTextEllipsis,
                 ['b2b-table-cell--' + this.align]: true,
                 ['b2b-table-cell--divider']: this.divider,
                 [`b2b-table-cell-color-${this.color}`]: true,
-            }, role: "cell" }, h("slot", { key: 'd0812f47d90ee1b225110855df1c8918960505e7' })));
+            }, role: "cell" }, h("slot", { key: '82c708c878e124e34ec189df23947634e5172e9b' })));
     }
     static get is() { return "b2b-table-cell"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table-header/table-header.js

@@ -72,7 +72,7 @@ export class TableHeaderComponent {
         this.setIconPlacement();
     }
     render() {
-        return (h(Host, { key: '9b0df06a2325c4bac0e64f1a3b1dadec9150b14b', class: {
+        return (h(Host, { key: '191554770ee6fc218ece0f555dd2aca07637623a', class: {
                 [`b2b-table-header--${this.sortDirection && this.iconAlign}`]: true,
                 'b2b-table-header--divider': this.divider,
                 [`b2b-table-header--${this.size}`]: true,

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

@@ -110,12 +110,12 @@ export class TableRowComponent {
         }
     }
     render() {
-        return (h(Host, { key: 'b3c742ca195dec5c8037a589122e41d87afcee5d', class: {
+        return (h(Host, { key: '8464ef3dedf1ef893088ccae661282c3552b52e7', 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: 'ae02badbe6847a68f2e5e1e08e676678f7144c1b' })));
+            }, role: "row" }, this.getAccordionColumns(), this.getCheckbox(), h("slot", { key: 'f25f2457e0ff940f31b0a03cf528336448f5af5b' })));
     }
     static get is() { return "b2b-table-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,7 +11,8 @@ export class TableRowgroupComponent {
                 .map(child => child.value);
         };
         this.toggleList = (list, event) => {
-            list.forEach(child => ((child.checked = event.detail.checked), (child.indeterminate = false)));
+            list.forEach(child => ((child.checked = event.detail.checked),
+                (child.indeterminate = false)));
         };
         this.addCheckboxColumn = () => {
             const children = getAllRows(this.host);
@@ -113,11 +114,11 @@ export class TableRowgroupComponent {
         this.makeHeaderRowNotSelectable();
     }
     render() {
-        return (h(Host, { key: '1fa1822d42bf6819b2fd6de382a0075a05715569', class: {
+        return (h(Host, { key: 'f2f488f6392f9b6f2ee3b766d7746dda4fde1764', 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: '6ffd528b4b6330a5f4c66b50b3c329853fd441a8' })));
+            }, role: "rowgroup" }, h("slot", { key: '7671fbb227a9d4e51e48a58eee682ed4bb8c8fe4' })));
     }
     static get is() { return "b2b-table-rowgroup"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table.js

@@ -60,9 +60,9 @@ export class TableComponent {
         }
     }
     render() {
-        return (h(Host, { key: 'b838cb824f9e59b01eb827642d130b8933bfa331', class: {
+        return (h(Host, { key: '4e54f9b98d02bed540e4748bbcf20837647ce796', class: {
                 ['b2b-table--' + this.size]: true,
-            }, role: "table" }, h("slot", { key: 'a657fe4d62601fff6bf5ee6d640fbb8d8c351055' })));
+            }, role: "table" }, h("slot", { key: '7e70f4f9b9ff302e7f3e283753591c5f4dd79312' })));
     }
     static get is() { return "b2b-table"; }
     static get encapsulation() { return "shadow"; }