@otto-de/b2b-core-components 1.23.4 → 1.26.0

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

@@ -0,0 +1,82 @@
+import { h, Host } from "@stencil/core";
+export class ShimmerComponent {
+    constructor() {
+        this.loading = undefined;
+        this.width = undefined;
+        this.height = undefined;
+    }
+    render() {
+        const shimmerStyle = {
+            width: `${this.width}px`,
+            height: `${this.height}px`,
+        };
+        return (h(Host, { key: 'd49facd00500b965059c0322adfc56961bc69f8e' }, this.loading ? (h("div", { class: "b2b-shimmer", style: shimmerStyle })) : (h("slot", null))));
+    }
+    static get is() { return "b2b-shimmer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["shimmer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["shimmer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the shimmer effect is shown or not."
+                },
+                "attribute": "loading",
+                "reflect": false
+            },
+            "width": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The width of the shimmer effect im px."
+                },
+                "attribute": "width",
+                "reflect": false
+            },
+            "height": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The height of the shimmer effect in px."
+                },
+                "attribute": "height",
+                "reflect": false
+            }
+        };
+    }
+}

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

@@ -0,0 +1,35 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { ShimmerComponent } from "./shimmer";
+import { h } from "@stencil/core";
+describe('B2B-Shimmer', () => {
+    async function renderPage(template) {
+        return newSpecPage({
+            components: [ShimmerComponent],
+            template: () => template,
+        });
+    }
+    it('should render shimmer effect with width 100 and height 100 attributes', async () => {
+        const dummyContent = 'Dummy content';
+        const page = await renderPage(h("b2b-shimmer", { loading: true, width: 100, height: 100 }, dummyContent));
+        expect(page.root).toEqualHtml(`
+      <b2b-shimmer>
+        <mock:shadow-root>
+          <div class="b2b-shimmer" style="width: 100px; height: 100px;"></div>
+        </mock:shadow-root>
+        ${dummyContent}
+      </b2b-shimmer>
+		`);
+    });
+    it('should show slot content and hide shimmer effect', async () => {
+        const dummyContent = 'Dummy content';
+        const page = await renderPage(h("b2b-shimmer", { loading: false, width: 100, height: 100 }, dummyContent));
+        expect(page.root).toEqualHtml(`
+      <b2b-shimmer>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+        ${dummyContent}
+      </b2b-shimmer>
+		`);
+    });
+});

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

@@ -0,0 +1,38 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { html } from "lit-html";
+import { getArgTypes } from "../../docs/config/utils";
+const meta = {
+    title: 'Components/Status & Feedback/Shimmer',
+    component: 'b2b-shimmer',
+    args: {
+        loading: true,
+        width: 400,
+        height: 25,
+    },
+    argTypes: Object.assign({}, getArgTypes('b2b-shimmer')),
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return html `<b2b-shimmer
+    loading="${args.loading}"
+    width="${args.width}"
+    height="${args.height}">
+    This is the mean content which takes a while to load.
+  </b2b-shimmer>`;
+    },
+};
+export default meta;
+export const story010Default = {
+    name: 'Default',
+    args: Object.assign({}, meta.args),
+};

package/dist/collection/components/snackbar/snackbar.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:54 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:55 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -48,6 +48,7 @@ export class SnackbarComponent {
         this.duration = 5000;
         this.hasAction = false;
         this.actionLabel = undefined;
+        this.width = undefined;
     }
     onVisibleChange(newValue) {
         if (this.timed && this.type !== 'error') {
@@ -79,17 +80,17 @@ export class SnackbarComponent {
         clearTimeout(this.timeoutId);
     }
     render() {
-        return (h(Host, { key: '04458c2dfdaa2dc6a776f6a960995c2e674eaafe', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '1164448bd605fcfc6aa9381f48394ccff815ae7d', class: {
+        return (h(Host, { key: '693f7639a65edfd76e101540ccd663cc3f533448', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'f522b01889ee90866e2fd01036805139aa0f39df', class: {
                 'b2b-snackbar': true,
                 [`b2b-snackbar--${this.type}`]: true,
                 'b2b-snackbar--opened': this.opened,
-            } }, h("div", { key: 'b379f16e619e82643b365bdc72821b42876c1610', class: "b2b-snackbar__content" }, h("span", { key: 'bea153ca5d483b547633d370dc58602876a2ff26', class: { [`b2b-snackbar--${this.type}__icon`]: true } }, this.chooseIcon()), h("p", { key: '233b75cd0ff257582430973c8652a2ef182b75ed', class: "b2b-snackbar__content__description" }, this.description)), this.isActionPresent() && (h("div", { class: {
+            }, style: this.width ? { width: this.width } : { width: 'auto' } }, h("div", { key: '3cafcd2cbff1203950ad15b038f0346e12232131', class: "b2b-snackbar__content" }, h("span", { key: '5811cd72a94d7ba281f3733dd9ed0281cb47c37f', class: { [`b2b-snackbar--${this.type}__icon`]: true } }, this.chooseIcon()), h("p", { key: '079f6ad5e83c365a224bc0c1f9862cd6409a7a6d', 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: 'c27940624032c5552e39582feb91735bcc9c3817', class: {
+            }, onClick: this.handleActionClick }, h("a", null, this.actionLabel))), h("div", { key: '901aa5ad65f440e7de8a87e5a1fd88643b9766b6', class: {
                 'b2b-snackbar__close-icon': true,
                 [`b2b-snackbar__close-icon--${this.type}`]: true,
-            }, onClick: this.close }, h("b2b-icon-100", { key: 'b151a54a9cead4fd9ae21db8962700aba997631d', clickable: true, size: 24, icon: "b2b_icon-close" })))));
+            }, onClick: this.close }, h("b2b-icon-100", { key: 'efd48b87b50a36d790f59bccfc3553a9d105adfd', clickable: true, size: 24, icon: "b2b_icon-close" })))));
     }
     static get is() { return "b2b-snackbar"; }
     static get encapsulation() { return "shadow"; }
@@ -228,6 +229,23 @@ export class SnackbarComponent {
                 },
                 "attribute": "action-label",
                 "reflect": false
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width of the snackbar can be specified in px. If not provided, the default value is auto, which will adjust the width to fit the content."
+                },
+                "attribute": "width",
+                "reflect": false
             }
         };
     }

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

@@ -13,7 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 import { useArgs } from "@storybook/preview-api";
-import { screen } from "@storybook/testing-library";
+import { screen } from "@storybook/test";
 getArgTypes('b2b-snackbar');
 const meta = {
     title: 'Components/Status & Feedback/Snackbar',
@@ -26,6 +26,7 @@ const meta = {
         duration: 5000,
         hasAction: true,
         actionLabel: 'Call to Action',
+        width: 'auto',
     },
     argTypes: getArgTypes('b2b-snackbar'),
     render: (_a) => {
@@ -49,7 +50,8 @@ const meta = {
         timed="${args.timed}"
         duration="${args.duration}"
         has-action="${args.hasAction}"
-        action-label="${args.actionLabel}"></b2b-snackbar>`;
+        action-label="${args.actionLabel}"
+        width="${args.width}"></b2b-snackbar>`;
     },
 };
 export default meta;
@@ -87,3 +89,9 @@ export const TimedSnackbar = {
         await showSnackBar();
     },
 };
+export const WithWidth = {
+    args: Object.assign(Object.assign({}, meta.args), { type: 'info', description: 'This is a snackbar with custom width', width: '800px' }),
+    play: async () => {
+        await showSnackBar();
+    },
+};

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:54 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:55 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

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

package/dist/collection/components/tab/tab.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:54 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:55 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -17,12 +17,12 @@ export class B2bTabComponent {
         }
     }
     render() {
-        return (h(Host, { key: '0410edbe90350ea56562dce3f449586bf81930e0', 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: '4de08722c772c17d857cae23f8fae0a20ead6c26', class: {
+        return (h(Host, { key: '12d81a324c80b9005c0ac9524fcfe5db9efb831d', 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: 'f7c39b2cd098336fa4808a0ab8830631dc3db7db', class: {
                 'b2b-tab': true,
                 'b2b-tab--selected': this.selected,
                 'b2b-tab--disabled': this.disabled,
                 'b2b-tab--error': this.invalid,
-            } }, h("slot", { key: 'c50c07e5c5d3234ce520b6d8b54307b92f4ee3bf' }))));
+            } }, h("slot", { key: 'd8066ec2d861a5d623e118a14a474af951d9ea70' }))));
     }
     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: '39652541b07e8cce041ae17f11bb3fdca1ef8882' }, h("slot", { key: 'ecff6cba7b213dab889f7d0c7335d7de34658e38', name: "tab" }), h("b2b-separator", { key: 'b1e7fcf0cf8d425afdb9b2177a2754eb08c9c7d0' }), h("slot", { key: '586071455ea83b7ac6048581b72e40dc440d9b37', name: "panel" })));
+        return (h(Host, { key: '8324f8a2a6c8b77a048bab28d3a5382f27c07ce1' }, h("slot", { key: 'b97fc6fb827875d8f70bd0f6c8e4b01d9b57d098', name: "tab" }), h("b2b-separator", { key: 'b1b68f251b274afc40cdb9e2e79fe3410cd21063' }), h("slot", { key: '93587b074a6354d31b038a130ca35548f6803f43', name: "panel" })));
     }
     static get is() { return "b2b-tab-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:54 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:55 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -5,7 +5,7 @@ export class B2bTabPanelComponent {
         this.generatedId = i++;
     }
     render() {
-        return (h(Host, { key: '51e6d0c3ce5d8f2f3e5e6499d5155a94b5b6b3fd', id: `b2b-tab-panel-${this.generatedId}`, role: "tabpanel" }, h("div", { key: '0ce911bff5c3dd5e27419acd6b63b819e863489e', class: "b2b-tab-panel" }, h("slot", { key: 'e7e538a66b6f97f6f416cb9196a0ce534b77c650' }))));
+        return (h(Host, { key: 'e4d4215b6795a66b2a944ef5d535552ef5adbba2', id: `b2b-tab-panel-${this.generatedId}`, role: "tabpanel" }, h("div", { key: '90736ddfab88b436b1b63cad2a69d8bbfcf3485d', class: "b2b-tab-panel" }, h("slot", { key: '11793052ee41b883a968e0d667ff44c9c30b73aa' }))));
     }
     static get is() { return "b2b-tab-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:54 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:55 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -36,14 +36,14 @@ export class TableCellComponent {
         }
     }
     render() {
-        return (h(Host, { key: '2f0c286583afdf35ec7cb8ece4c51c8ec60c2f4d', onMouseEnter: this.addExpandStyles, onMouseLeave: this.removeExpandStyles, class: {
+        return (h(Host, { key: 'c9054312fdf96b346c6ed6633845b676471ee1e6', 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: '8c519c550531562b73d301481d8d6301506c0642' })));
+            }, role: "cell" }, h("slot", { key: 'f05c8ea4484ce55c6f08a85034883fe74051638f' })));
     }
     static get is() { return "b2b-table-cell"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:54 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:55 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -72,7 +72,7 @@ export class TableHeaderComponent {
         this.setIconPlacement();
     }
     render() {
-        return (h(Host, { key: '8202e84dfd3ff029b3b1dcdc86ca768345250efd', class: {
+        return (h(Host, { key: 'e6604084cded7295c561d2ddcb443fa4ac890a96', 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.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:54 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:55 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -110,12 +110,12 @@ export class TableRowComponent {
         }
     }
     render() {
-        return (h(Host, { key: '46eb2abeb36b2127b2b29d97052cc0ed562267de', class: {
+        return (h(Host, { key: 'e2986d793ab548b9452aded06773b63c86db8375', 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: 'caa67e57aee33113c108fe561722c9a72ba5fa3a' })));
+            }, role: "row" }, this.getAccordionColumns(), this.getCheckbox(), h("slot", { key: '72962668970275a6e00cd99c98871241f6fd2956' })));
     }
     static get is() { return "b2b-table-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:54 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:55 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -113,11 +113,11 @@ export class TableRowgroupComponent {
         this.makeHeaderRowNotSelectable();
     }
     render() {
-        return (h(Host, { key: 'b6d9983c2e9079720ebc3deebeda438af99697b4', class: {
+        return (h(Host, { key: '5f69a02dde8828439de23f661b3237c8cd2061da', 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: '646cea0eb0a5845920ebcf6155466c714173d728' })));
+            }, role: "rowgroup" }, h("slot", { key: '4df0d32b50e5c4dccee61cfd39d44da34c37960a' })));
     }
     static get is() { return "b2b-table-rowgroup"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:54 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 24 Feb 2025 08:17:55 GMT
+ * Generated on Thu, 20 Mar 2025 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -2,7 +2,8 @@ import { newE2EPage } from "@stencil/core/testing";
 describe('B2B-Table', () => {
     let page;
     beforeEach(async () => {
-        page = await newE2EPage({ timeout: 10000 });
+        page = await newE2EPage();
+        page.setDefaultTimeout(10000);
         await page.setContent(`
       <b2b-table size='equal'>
         <b2b-table-rowgroup type='header'>

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

@@ -60,9 +60,9 @@ export class TableComponent {
         }
     }
     render() {
-        return (h(Host, { key: '7963f5d1f9e2ff75a7f5778af3a9384669d15b59', class: {
+        return (h(Host, { key: '065f6cb66e8195bd73258b636585ef26acb9f0ac', class: {
                 ['b2b-table--' + this.size]: true,
-            }, role: "table" }, h("slot", { key: '2ce636704650a87c6143dcc780f2d91f1ea129e7' })));
+            }, role: "table" }, h("slot", { key: 'f9d9ab1c60c408d0c3931d31bb05d645e6744038' })));
     }
     static get is() { return "b2b-table"; }
     static get encapsulation() { return "shadow"; }