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

package/dist/collection/components/flyout-menu/flyout-menu.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/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
+    >`;
     },
 };

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

@@ -9,36 +9,90 @@ export class B2bGridRowComponent {
     componentDidLoad() {
         this.adjustColumnFlex();
     }
+    calculateRowsAndsSpaceForColumnsWithSpan(columns, currentRowTotal, rows, currentRow) {
+        columns.forEach(column => {
+            let span = parseInt(column.getAttribute('span'), 10);
+            if (currentRowTotal + span > 12) {
+                rows.push(currentRow);
+                currentRow = [];
+                currentRowTotal = 0;
+            }
+            currentRow.push(column);
+            currentRowTotal += span;
+        });
+        if (currentRow.length > 0) {
+            rows.push(currentRow);
+        }
+    }
     adjustColumnFlex() {
         const columns = this.hostElement.querySelectorAll(':scope > b2b-grid-col');
         let totalSpan = 0;
         let columnsWithoutSpan = [];
+        let columnsWithSpan = [];
         columns.forEach((column) => {
             const span = column.getAttribute('span');
             if (span) {
                 totalSpan += parseInt(span, 10);
+                columnsWithSpan.push(column);
             }
             else {
                 columnsWithoutSpan.push(column);
             }
         });
-        const remainingSpan = 12 - totalSpan;
-        if (remainingSpan == 0) {
-            columnsWithoutSpan.forEach(column => {
-                column.style.width = '100%';
-            });
+        if (totalSpan > 12 && columnsWithoutSpan.length === 0) {
+            this.handleOverflowingColumns(columnsWithSpan);
             return;
         }
         if (columnsWithoutSpan.length > 0) {
-            const spanPerColumn = Math.floor(remainingSpan / columnsWithoutSpan.length);
-            columnsWithoutSpan.forEach(column => {
-                column.setAttribute('span', spanPerColumn.toString());
-                column.style.width = `${(spanPerColumn / 12) * 100}%`;
+            this.handleRowsWithColumnsWithoutSpan(columnsWithoutSpan, columnsWithSpan, totalSpan);
+            return;
+        }
+    }
+    handleOverflowingColumns(columns) {
+        let rows = [];
+        let currentRow = [];
+        let currentRowTotal = 0;
+        this.calculateRowsAndsSpaceForColumnsWithSpan(columns, currentRowTotal, rows, currentRow);
+        rows.forEach(row => {
+            row.forEach(column => {
+                let span = parseInt(column.getAttribute('span'), 10);
+                let widthPercentage = (span / 12) * 100;
+                column.style.flex = `0 0 calc(${widthPercentage}% - ${this.columnGap}px)`;
+                column.style.maxWidth = `calc(${widthPercentage}% - ${this.columnGap}px)`;
             });
+        });
+    }
+    handleRowsWithColumnsWithoutSpan(columnsWithoutSpan, columnsWithSpan, totalSpan) {
+        let remainingSpan = 12 - totalSpan <= 0 ? 12 : 12 - totalSpan;
+        let rows = [];
+        let currentRow = [];
+        let currentRowTotal = 0;
+        this.calculateRowsAndsSpaceForColumnsWithSpan(columnsWithSpan, currentRowTotal, rows, currentRow);
+        columnsWithoutSpan.forEach(column => {
+            let spanPerColumn = Math.max(1, Math.floor(remainingSpan / columnsWithoutSpan.length));
+            if (currentRowTotal + spanPerColumn > 12) {
+                rows.push(currentRow);
+                currentRow = [];
+                currentRowTotal = 0;
+            }
+            column.setAttribute('span', spanPerColumn.toString());
+            currentRow.push(column);
+            currentRowTotal += spanPerColumn;
+        });
+        if (currentRow.length > 0) {
+            rows.push(currentRow);
         }
+        rows.forEach(row => {
+            row.forEach(column => {
+                let span = parseInt(column.getAttribute('span'), 10) || 1;
+                let widthPercentage = (span / 12) * 100;
+                column.style.flex = `0 0 calc(${widthPercentage}% - ${this.columnGap}px)`;
+                column.style.maxWidth = `calc(${widthPercentage}% - ${this.columnGap}px)`;
+            });
+        });
     }
     render() {
-        return (h(Host, { key: 'f77863071f40aef68345792802a1170b59d6bd30', style: {
+        return (h(Host, { key: '348d0627a954387d90980e420931f2609973f9ab', style: {
                 ['justify-content']: `${this.justify}`,
                 ['gap']: `${this.columnGap}px`,
                 ['margin']: `${this.rowGap}px 0`,
@@ -46,7 +100,7 @@ export class B2bGridRowComponent {
                 ['display']: 'flex',
                 ['flex-wrap']: 'wrap',
                 ['box-sizing']: 'border-box',
-            } }, h("slot", { key: '1cb248539477e9fc94a604e43200aa5e391b3ed7' })));
+            } }, h("slot", { key: '6c2fd302ccf7be951dbcf14b548e8f7c83ea542e' })));
     }
     static get is() { return "b2b-grid-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/headline/headline.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/icon/icon.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/icon-100/icon-100.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/icon-100/icon-100.stories.js

@@ -33,11 +33,11 @@ const meta = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-icon-100
-    icon="${args.icon}"
-    color="${args.color}"
-    size="${args.size}"
-    clickable="${args.clickable}"
-    focusable="${args.focusable}"></b2b-icon-100>`;
+      icon="${args.icon}"
+      color="${args.color}"
+      size="${args.size}"
+      clickable="${args.clickable}"
+      focusable="${args.focusable}"></b2b-icon-100>`;
     },
 };
 export default meta;

package/dist/collection/components/icon-50/icon-50.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 */