@otto-de/b2b-core-components 1.23.1 → 1.23.3

package/dist/custom-elements.json

@@ -783,7 +783,7 @@
       "attributes": [
         {
           "name": "span",
-          "description": "How many columns the width of the col element should be. If not specified, the col will take up all available space in one row. Up to single 12 columns fit in one row."
+          "description": "How many columns the width of the col element should be. If not specified, the col will take up all available space in one row. We recommend explicitly defining the span in scenarios where the distribution of 12 spans across columns is clear. Up to single 12 columns fit in one row."
         },
         {
           "name": "text-align",

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

@@ -15,7 +15,7 @@ const B2bGridColumnComponent = class {
         this.textAlign = 'left';
     }
     render() {
-        return (h(Host, { key: '84919b56153393d378a29ce84d4048af80a95fea', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, h("slot", { key: '1fef59961b312a1efdd94488865aa0a436170489' })));
+        return (h(Host, { key: 'c7e327cb2e4fdca61e297b8a9f1ad502b5ca141c', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, h("slot", { key: '05fb26f49c8563185a8c09242cdbda6846f2f54c' })));
     }
     get hostElement() { return getElement(this); }
 };

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

@@ -12,7 +12,7 @@ const B2bGridRowComponent = class {
         this.adjustColumnFlex();
     }
     adjustColumnFlex() {
-        const columns = this.hostElement.querySelectorAll('b2b-grid-col');
+        const columns = this.hostElement.querySelectorAll(':scope > b2b-grid-col');
         let totalSpan = 0;
         let columnsWithoutSpan = [];
         columns.forEach((column) => {
@@ -25,22 +25,22 @@ const B2bGridRowComponent = class {
             }
         });
         const remainingSpan = 12 - totalSpan;
-        if (remainingSpan == 12) {
-            if (columnsWithoutSpan.length > 0) {
-                columnsWithoutSpan.forEach(column => {
-                    column.setAttribute('span', '1');
-                });
-            }
+        if (remainingSpan == 0) {
+            columnsWithoutSpan.forEach(column => {
+                column.style.width = '100%';
+            });
+            return;
         }
         if (columnsWithoutSpan.length > 0) {
-            const flexPerColumn = ((remainingSpan / 12) * 100) / columnsWithoutSpan.length;
+            const spanPerColumn = Math.floor(remainingSpan / columnsWithoutSpan.length);
             columnsWithoutSpan.forEach(column => {
-                column.style.flex = `${flexPerColumn}%`;
+                column.setAttribute('span', spanPerColumn.toString());
+                column.style.width = `${(spanPerColumn / 12) * 100}%`;
             });
         }
     }
     render() {
-        return (h(Host, { key: '76c179fe5253504e038b6ac11a8d528a1e5f1109', style: {
+        return (h(Host, { key: 'f77863071f40aef68345792802a1170b59d6bd30', style: {
                 ['justify-content']: `${this.justify}`,
                 ['gap']: `${this.columnGap}px`,
                 ['margin']: `${this.rowGap}px 0`,
@@ -48,7 +48,7 @@ const B2bGridRowComponent = class {
                 ['display']: 'flex',
                 ['flex-wrap']: 'wrap',
                 ['box-sizing']: 'border-box',
-            } }, h("slot", { key: 'c4af8f5183e948a8d2115ad60cb6751c8a9d6595' })));
+            } }, h("slot", { key: '1cb248539477e9fc94a604e43200aa5e391b3ed7' })));
     }
     get hostElement() { return getElement(this); }
 };

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-ab9eb36d.js';
 
-const gridCss = ":host(.b2b-grid){width:100%;margin:0 auto;box-sizing:border-box}";
+const gridCss = ":host(.b2b-grid){width:100%;margin:0 auto;box-sizing:border-box}:host(.b2b-grid-col){display:flex;flex-direction:column;min-width:0}";
 const B2bGridStyle0 = gridCss;
 
 const B2bGridComponent = class {

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

@@ -1,6 +1,6 @@
 export declare class B2bGridColumnComponent {
     hostElement: HTMLB2bGridColElement;
-    /** How many columns the width of the col element should be. If not specified, the col will take up all available space in one row. Up to single 12 columns fit in one row. */
+    /** How many columns the width of the col element should be. If not specified, the col will take up all available space in one row. We recommend explicitly defining the span in scenarios where the distribution of 12 spans across columns is clear. Up to single 12 columns fit in one row. */
     span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
     /** The alignment of text placed inside of a column. Note that this will apply to all children. */
     textAlign: 'left' | 'center' | 'right';

package/dist/types/components.d.ts

@@ -491,7 +491,7 @@ export namespace Components {
     }
     interface B2bGridCol {
         /**
-          * How many columns the width of the col element should be. If not specified, the col will take up all available space in one row. Up to single 12 columns fit in one row.
+          * How many columns the width of the col element should be. If not specified, the col will take up all available space in one row. We recommend explicitly defining the span in scenarios where the distribution of 12 spans across columns is clear. Up to single 12 columns fit in one row.
          */
         "span": | 1
     | 2
@@ -2955,7 +2955,7 @@ declare namespace LocalJSX {
     }
     interface B2bGridCol {
         /**
-          * How many columns the width of the col element should be. If not specified, the col will take up all available space in one row. Up to single 12 columns fit in one row.
+          * How many columns the width of the col element should be. If not specified, the col will take up all available space in one row. We recommend explicitly defining the span in scenarios where the distribution of 12 spans across columns is clear. Up to single 12 columns fit in one row.
          */
         "span"?: | 1
     | 2

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.23.0",
+  "version": "1.23.2",
   "js-types-syntax": "typescript",
   "description-markup": "markdown",
   "contributions": {
@@ -1465,7 +1465,7 @@
           "attributes": [
             {
               "name": "span",
-              "description": "How many columns the width of the col element should be. If not specified, the col will take up all available space in one row. Up to single 12 columns fit in one row.\r\nValues: 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9",
+              "description": "How many columns the width of the col element should be. If not specified, the col will take up all available space in one row. We recommend explicitly defining the span in scenarios where the distribution of 12 spans across columns is clear. Up to single 12 columns fit in one row.\r\nValues: 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9",
               "required": false,
               "value": {
                 "kind": "expression",

package/package.json

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

package/dist/b2b-core-components/p-0f5b8f0f.entry.js

@@ -1 +0,0 @@
-import{r as t,h as e,H as s,g as a}from"./p-b6a753e8.js";const r=class{constructor(e){t(this,e),this.calculateGrowDimension=t=>{if(void 0!==t)return{flex:""+t/12*100}},this.span=void 0,this.textAlign="left"}render(){return e(s,{key:"84919b56153393d378a29ce84d4048af80a95fea",style:Object.assign(Object.assign({},this.calculateGrowDimension(this.span)),{"text-align":`${this.textAlign}`})},e("slot",{key:"1fef59961b312a1efdd94488865aa0a436170489"}))}get hostElement(){return a(this)}};export{r as b2b_grid_col}

package/dist/b2b-core-components/p-2610db01.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()}adjustColumnFlex(){const t=this.hostElement.querySelectorAll("b2b-grid-col");let s=0,e=[];t.forEach((t=>{const a=t.getAttribute("span");a?s+=parseInt(a,10):e.push(t)}));const a=12-s;if(12==a&&e.length>0&&e.forEach((t=>{t.setAttribute("span","1")})),e.length>0){const t=a/12*100/e.length;e.forEach((s=>{s.style.flex=`${t}%`}))}}render(){return s(e,{key:"76c179fe5253504e038b6ac11a8d528a1e5f1109",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:"c4af8f5183e948a8d2115ad60cb6751c8a9d6595"}))}get hostElement(){return a(this)}};export{i as b2b_grid_row}