@otto-de/b2b-core-components 1.24.0 → 1.26.1

package/dist/collection/components/shimmer/shimmer.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 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: '2c1fa25b458eb820c0d5b2bbff6e8b5c4f67a435', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '9c84de32c173d00d275946785236a799a4044955', 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: 'a6cdf11eb13128287c1eb0c0cd5158ce940b5ce1', class: "b2b-snackbar__content" }, h("span", { key: '5e68c325dc40a7e78af3103b7a748cf1ffb4519d', class: { [`b2b-snackbar--${this.type}__icon`]: true } }, this.chooseIcon()), h("p", { key: '740611167aadea1a6e6aee692f6b634401220875', 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: '1f5a0bd09d7dfc7c2753fc9acc5b56a81315c0a0', 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: '4b0ea44065f95e776ef0650092aea0742b1588a5', 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 Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 27 Feb 2025 06:22:03 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 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.stories.js

@@ -64,11 +64,11 @@ const meta = {
             ${repeat(
         // @ts-ignore
         row, (cell, index) => html `<b2b-table-cell
-                ?divider=${args.withDividers && index === 0}
-                align="${args.align}"
-                text-wrap="${args.textWrap}"
-                >${cell}</b2b-table-cell
-              >`)}<b2b-table-cell
+                  ?divider=${args.withDividers && index === 0}
+                  align="${args.align}"
+                  text-wrap="${args.textWrap}"
+                  >${cell}</b2b-table-cell
+                >`)}<b2b-table-cell
               ><b2b-button size="50">Action</b2b-button></b2b-table-cell
             >
           </b2b-table-row>
@@ -110,36 +110,36 @@ export const ScrollableTable = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-scrollable-container
-    style="width: ${args.parentWidth}; height: ${args.parentHeight};">
-    <b2b-table size="${args.size}">
-      <b2b-table-rowgroup type="header">
-        <b2b-table-row>
-          ${args.data.columns.map((columnName, index) => {
+      style="width: ${args.parentWidth}; height: ${args.parentHeight};">
+      <b2b-table size="${args.size}">
+        <b2b-table-rowgroup type="header">
+          <b2b-table-row>
+            ${args.data.columns.map((columnName, index) => {
             return html ` <b2b-table-header
-              ?divider=${args.withDividers &&
+                ?divider=${args.withDividers &&
                 index !== args.data.columns.length - 1}
-              style=${`min-width: ${args.columnsWidth}`}
-              >${columnName}</b2b-table-header
-            >`;
+                style=${`min-width: ${args.columnsWidth}`}
+                >${columnName}</b2b-table-header
+              >`;
         })}
-        </b2b-table-row>
-      </b2b-table-rowgroup>
-      <b2b-table-rowgroup type="body">
-        ${args.data.rows.map((row, index) => {
+          </b2b-table-row>
+        </b2b-table-rowgroup>
+        <b2b-table-rowgroup type="body">
+          ${args.data.rows.map((row, index) => {
             return html `<b2b-table-row
-            highlight="${args.highlight}"
-            color=${index === 0 ? args.color : 'default'}>
-            ${row.map((data, index) => html `<b2b-table-cell
-                  ?divider=${args.withDividers && index === 0}
-                  align="${args.align}"
-                  text-wrap="${args.textWrap}"
-                  >${data}</b2b-table-cell
-                >`)}
-          </b2b-table-row>`;
+              highlight="${args.highlight}"
+              color=${index === 0 ? args.color : 'default'}>
+              ${row.map((data, index) => html `<b2b-table-cell
+                    ?divider=${args.withDividers && index === 0}
+                    align="${args.align}"
+                    text-wrap="${args.textWrap}"
+                    >${data}</b2b-table-cell
+                  >`)}
+            </b2b-table-row>`;
         })}
-      </b2b-table-rowgroup>
-    </b2b-table>
-  </b2b-scrollable-container>`;
+        </b2b-table-rowgroup>
+      </b2b-table>
+    </b2b-scrollable-container>`;
     },
 };
 const RenderSortableTable = (_a) => {
@@ -233,55 +233,55 @@ export const AccordionTable = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div>
-    <b2b-table size="${args.size}">
-      <b2b-table-rowgroup type="header" accordion>
-        <b2b-table-row>
-          ${args.data.columns.map((columnName, index) => {
+      <b2b-table size="${args.size}">
+        <b2b-table-rowgroup type="header" accordion>
+          <b2b-table-row>
+            ${args.data.columns.map((columnName, index) => {
             return html ` <b2b-table-header
-              ?divider=${args.withDividers &&
+                ?divider=${args.withDividers &&
                 index !== args.data.columns.length - 1}
-              style=${index === 0 ? `width: ${args.firstColumnWidth}` : ''}
-              >${columnName}</b2b-table-header
-            >`;
+                style=${index === 0 ? `width: ${args.firstColumnWidth}` : ''}
+                >${columnName}</b2b-table-header
+              >`;
         })}
-        </b2b-table-row>
-      </b2b-table-rowgroup>
-      <b2b-table-rowgroup type="body" accordion>
-        ${args.data.rows.map((row, index) => {
+          </b2b-table-row>
+        </b2b-table-rowgroup>
+        <b2b-table-rowgroup type="body" accordion>
+          ${args.data.rows.map((row, index) => {
             return html `<b2b-table-row
-            highlight="${args.highlight}"
-            color=${index === 0 ? args.color : 'default'}>
-            ${row.map(data => html `<b2b-table-cell
-                  ?divider=${args.withDividers}
-                  align="${args.align}"
-                  text-wrap="${args.textWrap}"
-                  >${data}</b2b-table-cell
-                >`)}
-            <b2b-table-cell
-              ><b2b-button size="50">Action</b2b-button></b2b-table-cell
-            >
-          </b2b-table-row>`;
+              highlight="${args.highlight}"
+              color=${index === 0 ? args.color : 'default'}>
+              ${row.map(data => html `<b2b-table-cell
+                    ?divider=${args.withDividers}
+                    align="${args.align}"
+                    text-wrap="${args.textWrap}"
+                    >${data}</b2b-table-cell
+                  >`)}
+              <b2b-table-cell
+                ><b2b-button size="50">Action</b2b-button></b2b-table-cell
+              >
+            </b2b-table-row>`;
         })}
-      </b2b-table-rowgroup>
-      <b2b-table-rowgroup type="body" accordion opened>
-        ${args.data.rows.map((row, index) => {
+        </b2b-table-rowgroup>
+        <b2b-table-rowgroup type="body" accordion opened>
+          ${args.data.rows.map((row, index) => {
             return html `<b2b-table-row
-            highlight="${args.highlight}"
-            color=${index === 0 ? args.color : 'default'}>
-            ${row.map(data => html `<b2b-table-cell
-                  ?divider=${args.withDividers}
-                  align="${args.align}"
-                  text-wrap="${args.textWrap}"
-                  >${data}</b2b-table-cell
-                >`)}
-            <b2b-table-cell
-              ><b2b-button size="50">Action</b2b-button></b2b-table-cell
-            >
-          </b2b-table-row>`;
+              highlight="${args.highlight}"
+              color=${index === 0 ? args.color : 'default'}>
+              ${row.map(data => html `<b2b-table-cell
+                    ?divider=${args.withDividers}
+                    align="${args.align}"
+                    text-wrap="${args.textWrap}"
+                    >${data}</b2b-table-cell
+                  >`)}
+              <b2b-table-cell
+                ><b2b-button size="50">Action</b2b-button></b2b-table-cell
+              >
+            </b2b-table-row>`;
         })}
-      </b2b-table-rowgroup>
-    </b2b-table>
-  </div>`;
+        </b2b-table-rowgroup>
+      </b2b-table>
+    </div>`;
     },
 };
 export const SelectableTable = {
@@ -289,55 +289,55 @@ export const SelectableTable = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div>
-    <b2b-table size="${args.size}">
-      <b2b-table-rowgroup type="header" accordion selectable>
-        <b2b-table-row>
-          ${args.data.columns.map((columnName, index) => {
+      <b2b-table size="${args.size}">
+        <b2b-table-rowgroup type="header" accordion selectable>
+          <b2b-table-row>
+            ${args.data.columns.map((columnName, index) => {
             return html ` <b2b-table-header
-              ?divider=${args.withDividers &&
+                ?divider=${args.withDividers &&
                 index !== args.data.columns.length - 1}
-              style=${index === 0 ? `width: ${args.firstColumnWidth}` : ''}
-              >${columnName}</b2b-table-header
-            >`;
+                style=${index === 0 ? `width: ${args.firstColumnWidth}` : ''}
+                >${columnName}</b2b-table-header
+              >`;
         })}
-        </b2b-table-row>
-      </b2b-table-rowgroup>
-      <b2b-table-rowgroup type="body" accordion selectable>
-        ${args.data.rows.map((row, index) => {
+          </b2b-table-row>
+        </b2b-table-rowgroup>
+        <b2b-table-rowgroup type="body" accordion selectable>
+          ${args.data.rows.map((row, index) => {
             return html `<b2b-table-row
-            highlight="${args.highlight}"
-            color=${index === 0 ? args.color : 'default'}>
-            ${row.map(data => html `<b2b-table-cell
-                  ?divider=${args.withDividers}
-                  align="${args.align}"
-                  text-wrap="${args.textWrap}"
-                  >${data}</b2b-table-cell
-                >`)}
-            <b2b-table-cell
-              ><b2b-button size="50">Action</b2b-button></b2b-table-cell
-            >
-          </b2b-table-row>`;
+              highlight="${args.highlight}"
+              color=${index === 0 ? args.color : 'default'}>
+              ${row.map(data => html `<b2b-table-cell
+                    ?divider=${args.withDividers}
+                    align="${args.align}"
+                    text-wrap="${args.textWrap}"
+                    >${data}</b2b-table-cell
+                  >`)}
+              <b2b-table-cell
+                ><b2b-button size="50">Action</b2b-button></b2b-table-cell
+              >
+            </b2b-table-row>`;
         })}
-      </b2b-table-rowgroup>
-      <b2b-table-rowgroup type="body" accordion opened selectable>
-        ${args.data.rows.map((row, index) => {
+        </b2b-table-rowgroup>
+        <b2b-table-rowgroup type="body" accordion opened selectable>
+          ${args.data.rows.map((row, index) => {
             return html `<b2b-table-row
-            highlight="${args.highlight}"
-            color=${index === 0 ? args.color : 'default'}>
-            ${row.map(data => html `<b2b-table-cell
-                  ?divider=${args.withDividers}
-                  align="${args.align}"
-                  text-wrap="${args.textWrap}"
-                  >${data}</b2b-table-cell
-                >`)}
-            <b2b-table-cell
-              ><b2b-button size="50">Action</b2b-button></b2b-table-cell
-            >
-          </b2b-table-row>`;
+              highlight="${args.highlight}"
+              color=${index === 0 ? args.color : 'default'}>
+              ${row.map(data => html `<b2b-table-cell
+                    ?divider=${args.withDividers}
+                    align="${args.align}"
+                    text-wrap="${args.textWrap}"
+                    >${data}</b2b-table-cell
+                  >`)}
+              <b2b-table-cell
+                ><b2b-button size="50">Action</b2b-button></b2b-table-cell
+              >
+            </b2b-table-row>`;
         })}
-      </b2b-table-rowgroup>
-    </b2b-table>
-  </div>`;
+        </b2b-table-rowgroup>
+      </b2b-table>
+    </div>`;
     },
 };
 export const ColspanTable = {
@@ -345,48 +345,48 @@ export const ColspanTable = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<div style="width: 500px">
-    <b2b-table size="${args.size}">
-      <b2b-table-rowgroup type="header" selectable="${args.selectable}">
-        <b2b-table-row>
-          <b2b-table-header divider="${args.withDividers}" colspan="2"
-            >2 Columns</b2b-table-header
-          >
-          <b2b-table-header divider="${args.withDividers}"
-            >1 Column</b2b-table-header
-          >
-          <b2b-table-header>1 Column</b2b-table-header>
-        </b2b-table-row>
-      </b2b-table-rowgroup>
-      <b2b-table-rowgroup type="body" selectable="${args.selectable}">
-        <b2b-table-row>
-          <b2b-table-cell divider="${args.withDividers}"
-            >1 Column</b2b-table-cell
-          >
-          <b2b-table-cell colspan="3">3 Columns</b2b-table-cell>
-        </b2b-table-row>
-        <b2b-table-row>
-          <b2b-table-cell divider="${args.withDividers}"
-            >1 Column</b2b-table-cell
-          >
-          <b2b-table-cell divider="${args.withDividers}"
-            >1 Column</b2b-table-cell
-          >
-          <b2b-table-cell divider="${args.withDividers}"
-            >1 Column</b2b-table-cell
-          >
-          <b2b-table-cell>1 Column</b2b-table-cell>
-        </b2b-table-row>
-        <b2b-table-row>
-          <b2b-table-cell divider="${args.withDividers}" colspan="2"
-            >2 Columns</b2b-table-cell
-          >
-          <b2b-table-cell divider="${args.withDividers}"
-            >1 Column</b2b-table-cell
-          >
-          <b2b-table-cell>1 Column</b2b-table-cell>
-        </b2b-table-row>
-      </b2b-table-rowgroup>
-    </b2b-table>
-  </div>`;
+      <b2b-table size="${args.size}">
+        <b2b-table-rowgroup type="header" selectable="${args.selectable}">
+          <b2b-table-row>
+            <b2b-table-header divider="${args.withDividers}" colspan="2"
+              >2 Columns</b2b-table-header
+            >
+            <b2b-table-header divider="${args.withDividers}"
+              >1 Column</b2b-table-header
+            >
+            <b2b-table-header>1 Column</b2b-table-header>
+          </b2b-table-row>
+        </b2b-table-rowgroup>
+        <b2b-table-rowgroup type="body" selectable="${args.selectable}">
+          <b2b-table-row>
+            <b2b-table-cell divider="${args.withDividers}"
+              >1 Column</b2b-table-cell
+            >
+            <b2b-table-cell colspan="3">3 Columns</b2b-table-cell>
+          </b2b-table-row>
+          <b2b-table-row>
+            <b2b-table-cell divider="${args.withDividers}"
+              >1 Column</b2b-table-cell
+            >
+            <b2b-table-cell divider="${args.withDividers}"
+              >1 Column</b2b-table-cell
+            >
+            <b2b-table-cell divider="${args.withDividers}"
+              >1 Column</b2b-table-cell
+            >
+            <b2b-table-cell>1 Column</b2b-table-cell>
+          </b2b-table-row>
+          <b2b-table-row>
+            <b2b-table-cell divider="${args.withDividers}" colspan="2"
+              >2 Columns</b2b-table-cell
+            >
+            <b2b-table-cell divider="${args.withDividers}"
+              >1 Column</b2b-table-cell
+            >
+            <b2b-table-cell>1 Column</b2b-table-cell>
+          </b2b-table-row>
+        </b2b-table-rowgroup>
+      </b2b-table>
+    </div>`;
     },
 };