@otto-de/b2b-core-components 1.21.0 → 1.23.0

package/dist/collection/components/flyout-menu/flyout-menu.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 21 Jan 2025 10:05:32 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -35,7 +35,8 @@
   --b2b-color-table-selected-default: #cce9ff;
   --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
   --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -122,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 21 Jan 2025 10:05:32 GMT
+ * Generated on Tue, 18 Feb 2025 12:27:58 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -153,7 +154,8 @@
   --b2b-font-weight-normal: 500;
   --b2b-font-weight-thin: 100;
   --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
-  --b2b-color-hover: #e6f4ff;
+  --b2b-color-hover-black: #3b3b3b;
+  --b2b-color-hover-default: #e6f4ff;
   --b2b-color-info-100: #003264;
   --b2b-color-info-50: #ccd6e0;
   --b2b-color-success-100: #326400;
@@ -283,7 +285,7 @@
   border-bottom: 1px solid var(--b2b-color-grey-200);
 }
 .b2b-flyout-menu__option:hover, .b2b-flyout-menu__option:focus {
-  background-color: var(--b2b-color-hover);
+  background-color: var(--b2b-color-hover-default);
   outline: none;
 }
 .b2b-flyout-menu__option--disabled {

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

@@ -5,7 +5,7 @@ describe('B2B-FlyoutMenu', () => {
         page = await newE2EPage();
         await page.setContent(`
       <b2b-flyout-menu>
-        <b2b-icon icon="b2b_icon-ellipsis" slot='trigger' clickable focusable></b2b-icon>
+        <b2b-icon-100 icon="b2b_icon-ellipsis" slot='trigger' clickable focusable></b2b-icon-100>
         <b2b-flyout-menu-option slot='option' option='option1' >
         </b2b-flyout-menu-option>
         <b2b-flyout-menu-option slot='option' option='option2' >
@@ -24,14 +24,14 @@ describe('B2B-FlyoutMenu', () => {
         expect(icon).not.toBeNull();
     });
     it('should show the menu when icon is clicked', async () => {
-        const iconContainer = await page.find('b2b-icon');
+        const iconContainer = await page.find('b2b-icon-100');
         iconContainer.click();
         await page.waitForChanges();
         const flyoutMenuOption = await page.find('b2b-flyout-menu-option');
         expect(await flyoutMenuOption.isVisible()).toBe(true);
     });
     it('should hide the menu when it loses focus', async () => {
-        const iconContainer = await page.find('b2b-icon');
+        const iconContainer = await page.find('b2b-icon-100');
         iconContainer.click();
         await page.waitForChanges();
         const flyoutMenuOption = await page.find('b2b-flyout-menu-option');
@@ -44,7 +44,7 @@ describe('B2B-FlyoutMenu', () => {
     /** Test is extremely flaky due to unknown global interaction. Test suite runs fine in isolation, so skipping for now. */
     xit('should emit the selected event when a menu option is clicked', async () => {
         const optionSelectedEventSpy = await page.spyOnEvent('b2b-option-selected');
-        const icon = await page.find('b2b-icon >>> div');
+        const icon = await page.find('b2b-icon-100 >>> div');
         await icon.click();
         await page.waitForChanges();
         const flyoutMenuOption = await page.find('b2b-flyout-menu-option');
@@ -58,7 +58,7 @@ describe('B2B-FlyoutMenu', () => {
     });
     it('should disable an option when disabled is true', async () => {
         const optionSelectedEventSpy = await page.spyOnEvent('b2b-option-selected');
-        const icon = await page.find('b2b-icon');
+        const icon = await page.find('b2b-icon-100');
         icon.click();
         await page.waitForChanges();
         const flyoutMenuOption = await page.find('b2b-flyout-menu-option[option="option3"]');
@@ -68,7 +68,7 @@ describe('B2B-FlyoutMenu', () => {
         expect(optionSelectedEventSpy).not.toHaveReceivedEvent();
     });
     it('should display separator after an option when separator is true', async () => {
-        const icon = await page.find('b2b-icon');
+        const icon = await page.find('b2b-icon-100');
         icon.click();
         await page.waitForChanges();
         const flyoutMenuOptions = await page.findAll('b2b-flyout-menu-option');

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

@@ -144,12 +144,12 @@ export class FlyoutMenuComponent {
         options[index].focus();
     }
     render() {
-        return (h(Host, { key: '0221c24624055988ea4d3e7e711279fd934f9167' }, h("div", { key: '78215ad3f534393a7a705164f0c3c3cc199a9ce7', class: {
+        return (h(Host, { key: '44ec3f9b4e574a3327717361bd6c09c5f1958d41' }, h("div", { key: '9ea8f1494bfede3a0853a0e74a5d5854e0bdf082', class: {
                 'b2b-flyout-menu': true,
-            } }, h("div", { key: '2b262f0fe4a9290bcf4e6bff5a7e35cb00a52612', class: "b2b-flyout-menu__trigger" }, h("slot", { key: '27c068e13c042e0535742f2320f751d4935807f1', name: "trigger" })), h("div", { key: '38bb17d6acaa9c4abde9c7ca26d5746fa8a84269', onFocusout: this.blurMenu, class: {
+            } }, h("div", { key: 'c48765324a3ca6ef0b885d23405269e9351c14c6', class: "b2b-flyout-menu__trigger" }, h("slot", { key: '756bdb0f2adbf262397bc5207cb5e6add87e4ef2', name: "trigger" })), h("div", { key: 'ef57778748783ffb269f5023b67eabd681cfb37d', onFocusout: this.blurMenu, class: {
                 'b2b-flyout-menu__options__container': true,
                 'b2b-flyout-menu__options__container--on': this.opened,
-            } }, h("div", { key: 'bbbac10e84d9274ba9084608d8912f8460063a3d', class: "b2b-flyout-menu__arrow" }), h("slot", { key: 'e9050bf99684d849acde201ab4b63f84b5a196db', name: "option" })))));
+            } }, h("div", { key: '9ae1550fb14f6bbe584935169796375f58916891', class: "b2b-flyout-menu__arrow" }), h("slot", { key: '10ff787b762245d5457cdb4f70f8affa9f0375e8', name: "option" })))));
     }
     static get is() { return "b2b-flyout-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -21,11 +21,11 @@ const meta = {
         var args = __rest(_a, []);
         return html ` <div style="margin-left: 100px">
     <b2b-flyout-menu>
-      <b2b-icon
+      <b2b-icon-100
         icon="b2b_icon-ellipsis"
         slot="trigger"
         clickable
-        focusable></b2b-icon>
+        focusable></b2b-icon-100>
       <b2b-flyout-menu-option
         slot="option"
         option="Delete"
@@ -64,11 +64,11 @@ export const AllStates = {
         var args = __rest(_a, []);
         return html ` <div style="margin-left: 100px">
     <b2b-flyout-menu opened="true">
-      <b2b-icon
+      <b2b-icon-100
         icon="b2b_icon-ellipsis"
         slot="trigger"
         clickable
-        focusable></b2b-icon>
+        focusable></b2b-icon-100>
       <b2b-flyout-menu-option
         slot="option"
         option="Delete"

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

@@ -1,30 +1,18 @@
 import { h, Host } from "@stencil/core";
 export class B2bGridColumnComponent {
     constructor() {
-        this.calculateGrowDimension = (growth) => {
-            const gap = this.hostElement.closest('b2b-grid-row').columnGap;
-            // if a span is not specified, we still need to subtract gap width and a growth factor of 1
-            let growthFactor;
-            if (gap > 0 && growth != undefined) {
-                growthFactor = `- ${gap - 2 * growth}px`;
-            }
-            else if (gap <= 0 && growth != undefined) {
-                growthFactor = '';
-            }
-            else {
-                growthFactor = `- ${gap - 2}px`;
-            }
-            const flexGrow = growth == undefined ? 1 : 0;
-            const width = growth == undefined ? 1 : growth;
+        this.calculateGrowDimension = (span) => {
+            const colSpan = span !== null && span !== void 0 ? span : 1;
+            const flex = (colSpan / 12) * 100;
             return {
-                ['flex']: `${flexGrow} 0 calc(${(width / 12) * 100}% ${growthFactor})`,
+                ['flex']: `${flex}`,
             };
         };
         this.span = undefined;
         this.textAlign = 'left';
     }
     render() {
-        return (h(Host, { key: '923650dc316312d49a010748a44b65a59c62f545', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, h("slot", { key: '8dedf08da9c3953b285856309e36e27086598757' })));
+        return (h(Host, { key: 'ad6a14cd39b9429064c305bfbe6e0d6b9f506faa', style: Object.assign(Object.assign({}, this.calculateGrowDimension(this.span)), { ['text-align']: `${this.textAlign}` }) }, h("slot", { key: '1b488c100774214fb52eeec64ffe70a8fadf0a3c' })));
     }
     static get is() { return "b2b-grid-col"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ export class B2bGridComponent {
         this.margin = 24;
     }
     render() {
-        return (h(Host, { key: '2f681d61d4000a20f28d8a6949190228413503e3', style: { ['padding']: `${this.margin}px` }, class: "b2b-grid" }, h("slot", { key: 'c72d3a5881a65e0c57a34572e5380550db57931c' })));
+        return (h(Host, { key: 'd969835eaef0a092de761496f817e3aeb9fe9da3', style: { ['padding']: `${this.margin}px` }, class: "b2b-grid" }, h("slot", { key: '457acba45d11bb8ed33008c1158f89d33f5222f6' })));
     }
     static get is() { return "b2b-grid"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,230 +1,231 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
-const Template = ({ margin, justify, textAlign, span, rowGap, columnGap, alignItems, storyName, }) => {
-    const gridBoxStyles = `border: 1px solid #c4c4c4; padding: 1rem; background-color: #fff; height: 200px;`;
-    const gridBoxSmallStyles = `border: 1px solid #c4c4c4; padding: 1rem; background-color: #fff; height: 100px;`;
-    switch (storyName) {
-        case '010Grid':
-            return html ` <b2b-grid margin="${margin}">
-        <b2b-grid-row
-          justify="${justify}"
-          row-gap="${rowGap}"
-          column-gap="${columnGap}">
-          <b2b-grid-col span="6" text-align="${textAlign}"
-            ><div style="${gridBoxStyles}">
-              <h4>Column 1-6 of ${9 + Number(span)}</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 ${9 + Number(span)}</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 ${9 + Number(span)}</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 ${9 + Number(span)}</h4>
-              <p>I grow to fill up all available space</p>
-            </div></b2b-grid-col
-          >
-          <b2b-grid-col span="${span}"
-            ><div style="${gridBoxStyles}">
-              <h4>Column 10-${9 + Number(span)} of ${9 + Number(span)}</h4>
-              <p>Resize me by changing the span attribute in the args table.</p>
-            </div></b2b-grid-col
-          >
-        </b2b-grid-row>
-      </b2b-grid>`;
-        case '020AlignItems':
-            return html `<b2b-grid
-        ><b2b-grid-row
-          align-items="${alignItems}"
-          justify="${justify}"
-          row-gap="${rowGap}"
-          column-gap="${columnGap}">
-          <b2b-grid-col
-            ><div style="${gridBoxSmallStyles}">
-              <h4>Column 1 of 6</h4>
-            </div></b2b-grid-col
-          >
-          <b2b-grid-col
-            ><div style="${gridBoxStyles}">
-              <h4>Column 2 of 6</h4>
-            </div></b2b-grid-col
-          >
-          <b2b-grid-col
-            ><div style="${gridBoxSmallStyles}">
-              <h4>Column 3 of 6</h4>
-            </div></b2b-grid-col
-          >
-          <b2b-grid-col
-            ><div style="${gridBoxStyles}">
-              <h4>Column 4 of 6</h4>
-            </div></b2b-grid-col
-          >
-          <b2b-grid-col
-            ><div style="${gridBoxSmallStyles}">
-              <h4>Column 5 of 6</h4>
-            </div></b2b-grid-col
-          >
-          <b2b-grid-col
-            ><div style="${gridBoxStyles}">
-              <h4>Column 6 of 6</h4>
-            </div></b2b-grid-col
-          >
-        </b2b-grid-row></b2b-grid
-      >`;
-        case '030TextAlign':
-            return html `<b2b-grid margin="${margin}">
-        <b2b-grid-row
-          justify="${justify}"
-          row-gap="${rowGap}"
-          column-gap="${columnGap}">
-          <b2b-grid-col span="6" text-align="${textAlign}"
-            ><div style="${gridBoxStyles}">
-              <h4>Column 1-6 of 9</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 9</h4>
-            </div></b2b-grid-col
-          >
-          <b2b-grid-col
-            ><div style="${gridBoxStyles}">
-              <h4>Column 8 of 9</h4>
-            </div></b2b-grid-col
-          >
-          <b2b-grid-col
-            ><div style="${gridBoxStyles}">
-              <h4>Column 9 of 9</h4>
-            </div></b2b-grid-col
-          ></b2b-grid-row
-        ></b2b-grid
-      >`;
-        case '040Justify':
-            return html `<b2b-grid margin="${margin}">
-        <b2b-grid-row
-          justify="${justify}"
-          row-gap="${rowGap}"
-          column-gap="${columnGap}">
-          <b2b-grid-col span="6" text-align="${textAlign}"
-            ><div style="${gridBoxStyles}">
-              <h4>Column 1-6 of 9</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="1"
-            ><div style="${gridBoxStyles}">
-              <h4>Column 7 of 9</h4>
-            </div></b2b-grid-col
-          >
-          <b2b-grid-col span="1"
-            ><div style="${gridBoxStyles}">
-              <h4>Column 8 of 9</h4>
-            </div></b2b-grid-col
-          >
-          <b2b-grid-col span="1"
-            ><div style="${gridBoxStyles}">
-              <h4>Column 9 of 9</h4>
-            </div></b2b-grid-col
-          ></b2b-grid-row
-        ></b2b-grid
-      >`;
-    }
-};
-export const story010Grid = Template.bind({});
-story010Grid.args = {
-    margin: 24,
-    alignItems: 'stretch',
-    columnGap: 24,
-    rowGap: 24,
-    justify: 'start',
-    span: '3',
-    textAlign: 'left',
-    storyName: '010Grid',
-};
-story010Grid.storyName = 'Resizable Columns';
-export const story020AlignItems = Template.bind({});
-story020AlignItems.args = {
-    margin: 24,
-    alignItems: 'center',
-    columnGap: 24,
-    rowGap: 24,
-    justify: 'center',
-    span: '3',
-    textAlign: 'left',
-    storyName: '020AlignItems',
+const gridBoxStyles = `border: 1px solid #c4c4c4; padding: 1rem; background-color: #fff; height: 200px;`;
+const gridBoxSmallStyles = `border: 1px solid #c4c4c4; padding: 1rem; background-color: #fff; height: 100px;`;
+const meta = {
+    title: 'Components/Utilities/Grid',
+    component: 'b2b-grid',
+    args: {},
+    argTypes: getArgTypes('b2b-grid'),
 };
-story020AlignItems.storyName = 'Align Items';
-export const story030TextAlign = Template.bind({});
-story030TextAlign.args = {
-    margin: 24,
-    alignItems: 'stretch',
-    columnGap: 24,
-    rowGap: 24,
-    justify: 'end',
-    span: '2',
-    textAlign: 'center',
-    storyName: '030TextAlign',
+export default meta;
+export const story010Grid = {
+    name: 'Resizable Columns',
+    args: {
+        margin: 24,
+        alignItems: 'stretch',
+        columnGap: 24,
+        rowGap: 24,
+        justify: 'start',
+        textAlign: 'left',
+    },
+    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>`;
+    },
 };
-story030TextAlign.storyName = 'Text Align';
-export const story040Justify = Template.bind({});
-story040Justify.args = {
-    margin: 24,
-    alignItems: 'stretch',
-    columnGap: 24,
-    rowGap: 24,
-    justify: 'space-around',
-    span: '2',
-    textAlign: 'center',
-    storyName: '040Justify',
+export const story020AlignItems = {
+    name: 'Align Items',
+    args: {
+        margin: 24,
+        alignItems: 'center',
+        columnGap: 24,
+        rowGap: 24,
+        justify: 'center',
+        textAlign: 'left',
+    },
+    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
+  >`;
+    },
 };
-story040Justify.storyName = 'Justify Content';
-const rowArgs = getArgTypes('b2b-grid-row');
-const colArgs = getArgTypes('b2b-grid-col');
-const gridArgs = getArgTypes('b2b-grid');
-const gridArgsData = Object.assign(Object.assign(Object.assign({}, rowArgs), colArgs), gridArgs);
-gridArgsData.data = {
-    table: { disable: true },
+export const story030TextAlign = {
+    name: 'Text Align',
+    args: {
+        margin: 24,
+        alignItems: 'stretch',
+        columnGap: 24,
+        rowGap: 24,
+        justify: 'end',
+        textAlign: 'left',
+    },
+    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
+  >`;
+    },
 };
-export default {
-    title: 'Components/Utilities/Grid',
-    argTypes: Object.assign(Object.assign({}, gridArgsData), { storyName: { control: false } }),
-    viewmode: 'docs',
-    parameters: {
-        controls: { expanded: true },
+export const story040Justify = {
+    name: 'Justify Content',
+    args: {
+        margin: 24,
+        alignItems: 'stretch',
+        columnGap: 24,
+        rowGap: 24,
+        justify: 'space-around',
+        textAlign: 'center',
+    },
+    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
+  >`;
     },
 };

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

@@ -7,7 +7,7 @@ export class B2bGridRowComponent {
         this.justify = 'start';
     }
     render() {
-        return (h(Host, { key: '891dbdd92aef674a5d1e1a7ce42abf4da97c9895', style: {
+        return (h(Host, { key: 'cea79124fea736c6276b0f60c8ba983d3085dbdb', style: {
                 ['justify-content']: `${this.justify}`,
                 ['gap']: `${this.columnGap}px`,
                 ['margin']: `${this.rowGap}px 0`,
@@ -15,7 +15,7 @@ export class B2bGridRowComponent {
                 ['display']: 'flex',
                 ['flex-wrap']: 'wrap',
                 ['box-sizing']: 'border-box',
-            } }, h("slot", { key: '4f50c8feefcae58bdbfb8c28836a3f8345c74b86' })));
+            } }, h("slot", { key: '218cf8da76adc6f58983f90fb808629a4785f6a6' })));
     }
     static get is() { return "b2b-grid-row"; }
     static get encapsulation() { return "shadow"; }