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

package/dist/collection/components/multiselect-dropdown/multiselect-dropdown.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/pagination/pagination.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/paragraph/paragraph.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/progress-bar/progress-bar.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/radio/radio.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/radio-group/radio-group.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/required-separator/required-separator.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/rounded-icon/rounded-icon.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/scrollable-container/scrollable-container.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/separator/separator.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/textarea/textarea.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/toggle-button/toggle-button.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/toggle-chip/toggle-chip.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/toggle-group/toggle-group.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/toggle-switch/toggle-switch.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/tooltip/tooltip.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/wizard/wizard.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/wizard-icon/wizard-icon.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 20 Mar 2025 06:20:36 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, 20 Mar 2025 06:20:36 GMT
+ * Generated on Thu, 20 Mar 2025 12:45:50 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/components/b2b-grid-row.js

@@ -51,6 +51,18 @@ const B2bGridRowComponent = /*@__PURE__*/ proxyCustomElement(class B2bGridRowCom
             this.handleRowsWithColumnsWithoutSpan(columnsWithoutSpan, columnsWithSpan, totalSpan);
             return;
         }
+        if (totalSpan < 12 && columnsWithoutSpan.length === 0) {
+            this.handleNonOverflowingColumnsWithSpan(columnsWithSpan);
+            return;
+        }
+    }
+    handleNonOverflowingColumnsWithSpan(columnsWithSpan) {
+        columnsWithSpan.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)`;
+        });
     }
     handleOverflowingColumns(columns) {
         let rows = [];
@@ -96,7 +108,7 @@ const B2bGridRowComponent = /*@__PURE__*/ proxyCustomElement(class B2bGridRowCom
         });
     }
     render() {
-        return (h(Host, { key: '348d0627a954387d90980e420931f2609973f9ab', style: {
+        return (h(Host, { key: 'da13d7265983cb9a8e70b43c0f7e152912b8e353', style: {
                 ['justify-content']: `${this.justify}`,
                 ['gap']: `${this.columnGap}px`,
                 ['margin']: `${this.rowGap}px 0`,
@@ -104,7 +116,7 @@ const B2bGridRowComponent = /*@__PURE__*/ proxyCustomElement(class B2bGridRowCom
                 ['display']: 'flex',
                 ['flex-wrap']: 'wrap',
                 ['box-sizing']: 'border-box',
-            } }, h("slot", { key: '6c2fd302ccf7be951dbcf14b548e8f7c83ea542e' })));
+            } }, h("slot", { key: 'b0be12c2eeda9cf109875a17e1509755960f1e65' })));
     }
     get hostElement() { return this; }
 }, [1, "b2b-grid-row", {

package/dist/esm/b2b-grid-row.entry.js

@@ -49,6 +49,18 @@ const B2bGridRowComponent = class {
             this.handleRowsWithColumnsWithoutSpan(columnsWithoutSpan, columnsWithSpan, totalSpan);
             return;
         }
+        if (totalSpan < 12 && columnsWithoutSpan.length === 0) {
+            this.handleNonOverflowingColumnsWithSpan(columnsWithSpan);
+            return;
+        }
+    }
+    handleNonOverflowingColumnsWithSpan(columnsWithSpan) {
+        columnsWithSpan.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)`;
+        });
     }
     handleOverflowingColumns(columns) {
         let rows = [];
@@ -94,7 +106,7 @@ const B2bGridRowComponent = class {
         });
     }
     render() {
-        return (h(Host, { key: '348d0627a954387d90980e420931f2609973f9ab', style: {
+        return (h(Host, { key: 'da13d7265983cb9a8e70b43c0f7e152912b8e353', style: {
                 ['justify-content']: `${this.justify}`,
                 ['gap']: `${this.columnGap}px`,
                 ['margin']: `${this.rowGap}px 0`,
@@ -102,7 +114,7 @@ const B2bGridRowComponent = class {
                 ['display']: 'flex',
                 ['flex-wrap']: 'wrap',
                 ['box-sizing']: 'border-box',
-            } }, h("slot", { key: '6c2fd302ccf7be951dbcf14b548e8f7c83ea542e' })));
+            } }, h("slot", { key: 'b0be12c2eeda9cf109875a17e1509755960f1e65' })));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/types/components/grid/row.d.ts

@@ -11,6 +11,7 @@ export declare class B2bGridRowComponent {
     componentDidLoad(): void;
     private calculateRowsAndsSpaceForColumnsWithSpan;
     private adjustColumnFlex;
+    private handleNonOverflowingColumnsWithSpan;
     private handleOverflowingColumns;
     private handleRowsWithColumnsWithoutSpan;
     render(): any;

package/dist/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "http://json.schemastore.org/web-types",
   "framework": "vue",
   "name": "@otto-de/b2b-core-components",
-  "version": "1.24.0",
+  "version": "1.26.0",
   "js-types-syntax": "typescript",
   "description-markup": "markdown",
   "contributions": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@otto-de/b2b-core-components",
-  "version": "1.26.0",
+  "version": "1.26.1",
   "description": "Core components defined with Stencil",
   "author": "Otto GmbH",
   "license": "Apache-2.0",
@@ -41,7 +41,7 @@
     "build:storybook": "npm run copy-md-files && storybook build -o docs-build/design-system"
   },
   "dependencies": {
-    "@otto-de/b2b-tokens": "1.26.0",
+    "@otto-de/b2b-tokens": "1.26.1",
     "@stencil-community/eslint-plugin": "^0.5.0",
     "@stencil/core": "4.13.0"
   },

package/dist/b2b-core-components/p-b9cc3f9f.entry.js

@@ -1 +0,0 @@
-import{r as t,h as s,H as e,g as a}from"./p-b6a753e8.js";const i=class{constructor(s){t(this,s),this.columnGap=24,this.rowGap=24,this.alignItems="stretch",this.justify="start"}componentDidLoad(){this.adjustColumnFlex()}calculateRowsAndsSpaceForColumnsWithSpan(t,s,e,a){t.forEach((t=>{let i=parseInt(t.getAttribute("span"),10);s+i>12&&(e.push(a),a=[],s=0),a.push(t),s+=i})),a.length>0&&e.push(a)}adjustColumnFlex(){const t=this.hostElement.querySelectorAll(":scope > b2b-grid-col");let s=0,e=[],a=[];t.forEach((t=>{const i=t.getAttribute("span");i?(s+=parseInt(i,10),a.push(t)):e.push(t)})),s>12&&0===e.length?this.handleOverflowingColumns(a):e.length>0&&this.handleRowsWithColumnsWithoutSpan(e,a,s)}handleOverflowingColumns(t){let s=[];this.calculateRowsAndsSpaceForColumnsWithSpan(t,0,s,[]),s.forEach((t=>{t.forEach((t=>{let s=parseInt(t.getAttribute("span"),10)/12*100;t.style.flex=`0 0 calc(${s}% - ${this.columnGap}px)`,t.style.maxWidth=`calc(${s}% - ${this.columnGap}px)`}))}))}handleRowsWithColumnsWithoutSpan(t,s,e){let a=12-e<=0?12:12-e,i=[],n=[],l=0;this.calculateRowsAndsSpaceForColumnsWithSpan(s,l,i,n),t.forEach((s=>{let e=Math.max(1,Math.floor(a/t.length));l+e>12&&(i.push(n),n=[],l=0),s.setAttribute("span",e.toString()),n.push(s),l+=e})),n.length>0&&i.push(n),i.forEach((t=>{t.forEach((t=>{let s=(parseInt(t.getAttribute("span"),10)||1)/12*100;t.style.flex=`0 0 calc(${s}% - ${this.columnGap}px)`,t.style.maxWidth=`calc(${s}% - ${this.columnGap}px)`}))}))}render(){return s(e,{key:"348d0627a954387d90980e420931f2609973f9ab",style:{"justify-content":`${this.justify}`,gap:`${this.columnGap}px`,margin:`${this.rowGap}px 0`,"align-items":`${this.alignItems}`,display:"flex","flex-wrap":"wrap","box-sizing":"border-box"}},s("slot",{key:"6c2fd302ccf7be951dbcf14b548e8f7c83ea542e"}))}get hostElement(){return a(this)}};export{i as b2b_grid_row}