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

package/dist/collection/components/date-picker/date-picker.js

@@ -86,6 +86,7 @@ export class B2bDatePicker {
         this.disableWeekends = undefined;
         this.disableDates = [];
         this.label = 'Zeitpunkt auswählen';
+        this.required = false;
         this.preSelectedDate = undefined;
         this.showHint = true;
         this.width = 300;
@@ -325,7 +326,7 @@ export class B2bDatePicker {
     render() {
         if (!this.isWithWithinLimit())
             return null;
-        return (h(Host, null, h("div", { class: "b2b-date-picker" }, h("div", { class: "b2b-date-picker-label" }, this.label), h("div", { style: { width: `${this.width}px` }, class: {
+        return (h(Host, null, h("div", { class: "b2b-date-picker" }, h("b2b-input-label", { id: this.label, required: this.required }, this.label), h("div", { style: { width: `${this.width}px` }, class: {
                 'b2b-date-picker-input-wrapper': true,
                 'b2b-date-picker-input-wrapper--focused': this.focused || this.showDatePicker,
                 'b2b-date-picker-input-wrapper--error': this.invalid,
@@ -468,6 +469,24 @@ export class B2bDatePicker {
                 "reflect": false,
                 "defaultValue": "'Zeitpunkt ausw\u00E4hlen'"
             },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds an asterisk at the end of the label to signify that the field is required."
+                },
+                "attribute": "required",
+                "reflect": true,
+                "defaultValue": "false"
+            },
             "preSelectedDate": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/date-picker/date-picker.stories.js

@@ -12,11 +12,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
-import { userEvent } from "@storybook/testing-library";
+import { userEvent } from "@storybook/test";
 const meta = {
     title: 'Components/Form/Date Picker',
     component: 'b2b-date-picker',
     args: {
+        required: false,
         disablePastDates: false,
         disableFutureDates: false,
         disableWeekends: false,
@@ -39,6 +40,7 @@ const meta = {
             return html ` <div style="margin-left: 2px">
         <b2b-date-picker
           label=${args.label}
+          required=${args.required}
           disable-past-dates=${args.disablePastDates}
           disable-future-dates=${args.disableFutureDates}
           disable-weekends=${args.disableWeekends}
@@ -58,6 +60,7 @@ const meta = {
             return html ` <div style="margin-left: 2px">
         <b2b-date-picker
           label=${args.label}
+          required=${args.required}
           disable-past-dates=${args.disablePastDates}
           disable-future-dates=${args.disableFutureDates}
           disable-weekends=${args.disableWeekends}

package/dist/collection/components/dropdown/dropdown.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 06:20:36 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 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -241,7 +241,7 @@
   border: 1px solid var(--b2b-color-grey-200);
   border-right: var(--b2b-border-right);
   border-radius: var(--b2b-border-radius);
-  padding: 7px 11px 6px;
+  padding: 7px 10px 6px;
   padding-right: calc(1.75rem + 6px);
   height: var(--b2b-size-90);
   line-height: var(--b2b-size-copy-line-height-100);
@@ -257,7 +257,7 @@
 }
 :host(.b2b-dropdown) b2b-input-label {
   display: block;
-  margin-bottom: var(--b2b-size-10);
+  margin-bottom: var(--b2b-size-5);
 }
 :host(.b2b-dropdown) span {
   display: block;

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

@@ -25,6 +25,8 @@ export class DropdownComponent {
         this.label = undefined;
         this.required = false;
         this.name = undefined;
+        this.placeholder = 'Select an option...';
+        this.placeholderValue = '';
         this.disabled = false;
         this.invalid = false;
         this.hint = undefined;
@@ -40,14 +42,21 @@ export class DropdownComponent {
     componentDidRender() {
         let options = this.hostElement.querySelectorAll('option');
         const selectElement = this.getSelectElement();
+        selectElement.innerHTML = '';
+        const placeholderOption = document.createElement('option');
+        placeholderOption.value = this.placeholderValue;
+        placeholderOption.textContent = this.placeholder;
+        placeholderOption.disabled = true;
+        placeholderOption.selected = true;
+        selectElement.append(placeholderOption);
         selectElement.append(...options);
     }
     render() {
-        return (h(Host, { key: 'e4eb8019f2b434acde4f3adbe597bb255e0cf872', class: {
+        return (h(Host, { key: '0bdbaf3576571cc9a44355e23db97e867a3bd19d', class: {
                 'b2b-dropdown': true,
                 'b2b-dropdown--error': this.invalid && !this.disabled,
                 'b2b-dropdown--disabled': this.disabled,
-            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("select", { key: '3a780ca3f170a59ef73f3e72d3668f9941812e9c', class: "b2b-dropdown__select", "aria-labelledby": this.name, name: this.name, disabled: this.disabled, onChange: this.onSelect, onFocus: this.onFocus, onBlur: this.onBlur }), (this.hint !== undefined && !this.invalid) ||
+            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("select", { key: '7d53810ef3e04fcdd37d0383659057cfbdb0d72c', class: "b2b-dropdown__select", "aria-labelledby": this.name, name: this.name, disabled: this.disabled, onChange: this.onSelect, onFocus: this.onFocus, onBlur: this.onBlur }), (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-dropdown"; }
@@ -116,6 +125,42 @@ export class DropdownComponent {
                 "attribute": "name",
                 "reflect": true
             },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text for the dropdown."
+                },
+                "attribute": "placeholder",
+                "reflect": false,
+                "defaultValue": "'Select an option...'"
+            },
+            "placeholderValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value for the placeholder. Defaults to an empty string but can be customized."
+                },
+                "attribute": "placeholder-value",
+                "reflect": false,
+                "defaultValue": "''"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/flyout-menu/flyout-menu-option.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 06:20:36 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 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/flyout-menu/flyout-menu.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 06:20:36 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 06:20:36 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -20,28 +20,28 @@ const meta = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html ` <div style="margin-left: 100px">
-    <b2b-flyout-menu>
-      <b2b-icon-100
-        icon="b2b_icon-ellipsis"
-        slot="trigger"
-        clickable
-        focusable></b2b-icon-100>
-      <b2b-flyout-menu-option
-        slot="option"
-        option="Delete"
-        disabled="${args.disabled}">
-      </b2b-flyout-menu-option>
-      <b2b-flyout-menu-option
-        slot="option"
-        option="Pause"
-        separator="${args.separator}">
-      </b2b-flyout-menu-option>
-      <b2b-flyout-menu-option slot="option" option="Copy">
-      </b2b-flyout-menu-option>
-      <b2b-flyout-menu-option slot="option" option="Share">
-      </b2b-flyout-menu-option>
-    </b2b-flyout-menu>
-  </div>`;
+      <b2b-flyout-menu>
+        <b2b-icon-100
+          icon="b2b_icon-ellipsis"
+          slot="trigger"
+          clickable
+          focusable></b2b-icon-100>
+        <b2b-flyout-menu-option
+          slot="option"
+          option="Delete"
+          disabled="${args.disabled}">
+        </b2b-flyout-menu-option>
+        <b2b-flyout-menu-option
+          slot="option"
+          option="Pause"
+          separator="${args.separator}">
+        </b2b-flyout-menu-option>
+        <b2b-flyout-menu-option slot="option" option="Copy">
+        </b2b-flyout-menu-option>
+        <b2b-flyout-menu-option slot="option" option="Share">
+        </b2b-flyout-menu-option>
+      </b2b-flyout-menu>
+    </div>`;
     },
 };
 export default meta;
@@ -63,27 +63,27 @@ export const AllStates = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html ` <div style="margin-left: 100px">
-    <b2b-flyout-menu opened="true">
-      <b2b-icon-100
-        icon="b2b_icon-ellipsis"
-        slot="trigger"
-        clickable
-        focusable></b2b-icon-100>
-      <b2b-flyout-menu-option
-        slot="option"
-        option="Delete"
-        disabled="${args.disabled}">
-      </b2b-flyout-menu-option>
-      <b2b-flyout-menu-option
-        slot="option"
-        option="Pause"
-        separator="${args.separator}">
-      </b2b-flyout-menu-option>
-      <b2b-flyout-menu-option slot="option" option="Copy">
-      </b2b-flyout-menu-option>
-      <b2b-flyout-menu-option slot="option" option="Share">
-      </b2b-flyout-menu-option>
-    </b2b-flyout-menu>
-  </div>`;
+      <b2b-flyout-menu opened="true">
+        <b2b-icon-100
+          icon="b2b_icon-ellipsis"
+          slot="trigger"
+          clickable
+          focusable></b2b-icon-100>
+        <b2b-flyout-menu-option
+          slot="option"
+          option="Delete"
+          disabled="${args.disabled}">
+        </b2b-flyout-menu-option>
+        <b2b-flyout-menu-option
+          slot="option"
+          option="Pause"
+          separator="${args.separator}">
+        </b2b-flyout-menu-option>
+        <b2b-flyout-menu-option slot="option" option="Copy">
+        </b2b-flyout-menu-option>
+        <b2b-flyout-menu-option slot="option" option="Share">
+        </b2b-flyout-menu-option>
+      </b2b-flyout-menu>
+    </div>`;
     },
 };

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

@@ -34,49 +34,50 @@ export const story010Grid = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html ` <b2b-grid margin="${args.margin}">
-    <b2b-grid-row
-      justify="${args.justify}"
-      row-gap="${args.rowGap}"
-      column-gap="${args.columnGap}">
-      <b2b-grid-col span="6" text-align="${args.textAlign}"
-        ><div style="${gridBoxStyles}">
-          <h4>Column 1-6 of 12</h4>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-            massa urna, accumsan id viverra et, mollis sit amet sem. Cras congue
-            ex ac arcu pellentesque, eu vestibulum sem tempor. Curabitur
-            consequat massa sed nulla lacinia, vitae scelerisque ante egestas.
-            Praesent et diam quis diam posuere egestas. Duis feugiat lorem non
-            nisl consectetur, sed fringilla odio semper.
-          </p>
-        </div></b2b-grid-col
-      >
-      <b2b-grid-col
-        ><div style="${gridBoxStyles}">
-          <h4>Column 7 of 12</h4>
-          <p>I grow to fill up all available space</p>
-        </div></b2b-grid-col
-      >
-      <b2b-grid-col
-        ><div style="${gridBoxStyles}">
-          <h4>Column 8 of 12</h4>
-          <p>I grow to fill up all available space</p>
-        </div></b2b-grid-col
-      >
-      <b2b-grid-col
-        ><div style="${gridBoxStyles}">
-          <h4>Column 9 of 12</h4>
-          <p>I grow to fill up all available space</p>
-        </div></b2b-grid-col
-      >
-      <b2b-grid-col span="3"
-        ><div style="${gridBoxStyles}">
-          <h4>Column 10-12 of 12</h4>
-          <p>Resize me by changing the span attribute in the args table.</p>
-        </div></b2b-grid-col
-      >
-    </b2b-grid-row>
-  </b2b-grid>`;
+      <b2b-grid-row
+        justify="${args.justify}"
+        row-gap="${args.rowGap}"
+        column-gap="${args.columnGap}">
+        <b2b-grid-col span="6" text-align="${args.textAlign}"
+          ><div style="${gridBoxStyles}">
+            <h4>Column 1-6 of 12</h4>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              Suspendisse massa urna, accumsan id viverra et, mollis sit amet
+              sem. Cras congue ex ac arcu pellentesque, eu vestibulum sem
+              tempor. Curabitur consequat massa sed nulla lacinia, vitae
+              scelerisque ante egestas. Praesent et diam quis diam posuere
+              egestas. Duis feugiat lorem non nisl consectetur, sed fringilla
+              odio semper.
+            </p>
+          </div></b2b-grid-col
+        >
+        <b2b-grid-col
+          ><div style="${gridBoxStyles}">
+            <h4>Column 7 of 12</h4>
+            <p>I grow to fill up all available space</p>
+          </div></b2b-grid-col
+        >
+        <b2b-grid-col
+          ><div style="${gridBoxStyles}">
+            <h4>Column 8 of 12</h4>
+            <p>I grow to fill up all available space</p>
+          </div></b2b-grid-col
+        >
+        <b2b-grid-col
+          ><div style="${gridBoxStyles}">
+            <h4>Column 9 of 12</h4>
+            <p>I grow to fill up all available space</p>
+          </div></b2b-grid-col
+        >
+        <b2b-grid-col span="3"
+          ><div style="${gridBoxStyles}">
+            <h4>Column 10-12 of 12</h4>
+            <p>Resize me by changing the span attribute in the args table.</p>
+          </div></b2b-grid-col
+        >
+      </b2b-grid-row>
+    </b2b-grid>`;
     },
 };
 export const story020AlignItems = {
@@ -92,43 +93,43 @@ export const story020AlignItems = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-grid
-    ><b2b-grid-row
-      align-items="${args.alignItems}"
-      justify="${args.justify}"
-      row-gap="${args.rowGap}"
-      column-gap="${args.columnGap}">
-      <b2b-grid-col span="2"
-        ><div style="${gridBoxSmallStyles}">
-          <h4>Column 1-2 of 12</h4>
-        </div></b2b-grid-col
-      >
-      <b2b-grid-col span="2"
-        ><div style="${gridBoxStyles}">
-          <h4>Column 3-4 of 12</h4>
-        </div></b2b-grid-col
-      >
-      <b2b-grid-col span="2"
-        ><div style="${gridBoxSmallStyles}">
-          <h4>Column 5-6 of 12</h4>
-        </div></b2b-grid-col
-      >
-      <b2b-grid-col span="2"
-        ><div style="${gridBoxStyles}">
-          <h4>Column 7-8 of 12</h4>
-        </div></b2b-grid-col
-      >
-      <b2b-grid-col span="2"
-        ><div style="${gridBoxSmallStyles}">
-          <h4>Column 9-10 of 12</h4>
-        </div></b2b-grid-col
-      >
-      <b2b-grid-col span="2"
-        ><div style="${gridBoxStyles}">
-          <h4>Column 11-12 of 12</h4>
-        </div></b2b-grid-col
-      >
-    </b2b-grid-row></b2b-grid
-  >`;
+      ><b2b-grid-row
+        align-items="${args.alignItems}"
+        justify="${args.justify}"
+        row-gap="${args.rowGap}"
+        column-gap="${args.columnGap}">
+        <b2b-grid-col span="2"
+          ><div style="${gridBoxSmallStyles}">
+            <h4>Column 1-2 of 12</h4>
+          </div></b2b-grid-col
+        >
+        <b2b-grid-col span="2"
+          ><div style="${gridBoxStyles}">
+            <h4>Column 3-4 of 12</h4>
+          </div></b2b-grid-col
+        >
+        <b2b-grid-col span="2"
+          ><div style="${gridBoxSmallStyles}">
+            <h4>Column 5-6 of 12</h4>
+          </div></b2b-grid-col
+        >
+        <b2b-grid-col span="2"
+          ><div style="${gridBoxStyles}">
+            <h4>Column 7-8 of 12</h4>
+          </div></b2b-grid-col
+        >
+        <b2b-grid-col span="2"
+          ><div style="${gridBoxSmallStyles}">
+            <h4>Column 9-10 of 12</h4>
+          </div></b2b-grid-col
+        >
+        <b2b-grid-col span="2"
+          ><div style="${gridBoxStyles}">
+            <h4>Column 11-12 of 12</h4>
+          </div></b2b-grid-col
+        >
+      </b2b-grid-row></b2b-grid
+    >`;
     },
 };
 export const story030TextAlign = {
@@ -144,40 +145,41 @@ export const story030TextAlign = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-grid margin="${args.margin}">
-    <b2b-grid-row
-      justify="${args.justify}"
-      row-gap="${args.rowGap}"
-      column-gap="${args.columnGap}">
-      <b2b-grid-col span="6" text-align="${args.textAlign}"
-        ><div style="${gridBoxStyles}">
-          <h4>Column 1-6 of 12</h4>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-            massa urna, accumsan id viverra et, mollis sit amet sem. Cras congue
-            ex ac arcu pellentesque, eu vestibulum sem tempor. Curabitur
-            consequat massa sed nulla lacinia, vitae scelerisque ante egestas.
-            Praesent et diam quis diam posuere egestas. Duis feugiat lorem non
-            nisl consectetur, sed fringilla odio semper.
-          </p>
-        </div></b2b-grid-col
-      >
-      <b2b-grid-col span="2"
-        ><div style="${gridBoxStyles}">
-          <h4>Column 7-8 of 12</h4>
-        </div></b2b-grid-col
-      >
-      <b2b-grid-col span="2"
-        ><div style="${gridBoxStyles}">
-          <h4>Column 9-10 of 12</h4>
-        </div></b2b-grid-col
-      >
-      <b2b-grid-col span="2"
-        ><div style="${gridBoxStyles}">
-          <h4>Column 11-12 of 12</h4>
-        </div></b2b-grid-col
-      ></b2b-grid-row
-    ></b2b-grid
-  >`;
+      <b2b-grid-row
+        justify="${args.justify}"
+        row-gap="${args.rowGap}"
+        column-gap="${args.columnGap}">
+        <b2b-grid-col span="6" text-align="${args.textAlign}"
+          ><div style="${gridBoxStyles}">
+            <h4>Column 1-6 of 12</h4>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              Suspendisse massa urna, accumsan id viverra et, mollis sit amet
+              sem. Cras congue ex ac arcu pellentesque, eu vestibulum sem
+              tempor. Curabitur consequat massa sed nulla lacinia, vitae
+              scelerisque ante egestas. Praesent et diam quis diam posuere
+              egestas. Duis feugiat lorem non nisl consectetur, sed fringilla
+              odio semper.
+            </p>
+          </div></b2b-grid-col
+        >
+        <b2b-grid-col span="2"
+          ><div style="${gridBoxStyles}">
+            <h4>Column 7-8 of 12</h4>
+          </div></b2b-grid-col
+        >
+        <b2b-grid-col span="2"
+          ><div style="${gridBoxStyles}">
+            <h4>Column 9-10 of 12</h4>
+          </div></b2b-grid-col
+        >
+        <b2b-grid-col span="2"
+          ><div style="${gridBoxStyles}">
+            <h4>Column 11-12 of 12</h4>
+          </div></b2b-grid-col
+        ></b2b-grid-row
+      ></b2b-grid
+    >`;
     },
 };
 export const story040Justify = {
@@ -193,39 +195,40 @@ export const story040Justify = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-grid margin="${args.margin}">
-    <b2b-grid-row
-      justify="${args.justify}"
-      row-gap="${args.rowGap}"
-      column-gap="${args.columnGap}">
-      <b2b-grid-col span="6" text-align="${args.textAlign}"
-        ><div style="${gridBoxStyles}">
-          <h4>Column 1-6 of 12</h4>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-            massa urna, accumsan id viverra et, mollis sit amet sem. Cras congue
-            ex ac arcu pellentesque, eu vestibulum sem tempor. Curabitur
-            consequat massa sed nulla lacinia, vitae scelerisque ante egestas.
-            Praesent et diam quis diam posuere egestas. Duis feugiat lorem non
-            nisl consectetur, sed fringilla odio semper.
-          </p>
-        </div></b2b-grid-col
-      >
-      <b2b-grid-col span="2"
-        ><div style="${gridBoxStyles}">
-          <h4>Column 7-8 of 12</h4>
-        </div></b2b-grid-col
-      >
-      <b2b-grid-col span="2"
-        ><div style="${gridBoxStyles}">
-          <h4>Column 9-10 of 12</h4>
-        </div></b2b-grid-col
-      >
-      <b2b-grid-col span="2"
-        ><div style="${gridBoxStyles}">
-          <h4>Column 11-12 of 12</h4>
-        </div></b2b-grid-col
-      ></b2b-grid-row
-    ></b2b-grid
-  >`;
+      <b2b-grid-row
+        justify="${args.justify}"
+        row-gap="${args.rowGap}"
+        column-gap="${args.columnGap}">
+        <b2b-grid-col span="6" text-align="${args.textAlign}"
+          ><div style="${gridBoxStyles}">
+            <h4>Column 1-6 of 12</h4>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              Suspendisse massa urna, accumsan id viverra et, mollis sit amet
+              sem. Cras congue ex ac arcu pellentesque, eu vestibulum sem
+              tempor. Curabitur consequat massa sed nulla lacinia, vitae
+              scelerisque ante egestas. Praesent et diam quis diam posuere
+              egestas. Duis feugiat lorem non nisl consectetur, sed fringilla
+              odio semper.
+            </p>
+          </div></b2b-grid-col
+        >
+        <b2b-grid-col span="2"
+          ><div style="${gridBoxStyles}">
+            <h4>Column 7-8 of 12</h4>
+          </div></b2b-grid-col
+        >
+        <b2b-grid-col span="2"
+          ><div style="${gridBoxStyles}">
+            <h4>Column 9-10 of 12</h4>
+          </div></b2b-grid-col
+        >
+        <b2b-grid-col span="2"
+          ><div style="${gridBoxStyles}">
+            <h4>Column 11-12 of 12</h4>
+          </div></b2b-grid-col
+        ></b2b-grid-row
+      ></b2b-grid
+    >`;
     },
 };