@otto-de/b2b-core-components 1.8.1 → 1.9.0-beta.1

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

@@ -1,20 +1,20 @@
 import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ label, disabled, value, hasCloseButton }) => {
-  return html `<b2b-chip-component
-    label="${label}"
-    disabled="${disabled}"
-    value="${value}"
+  return html `<b2b-chip-component
+    label="${label}"
+    disabled="${disabled}"
+    value="${value}"
     has-close-button="${hasCloseButton}"></b2b-chip-component>`;
 };
 const TruncTemplate = ({ label, disabled, value, hasCloseButton }) => {
-  return html `<div
-    style="width: 170px; border: 1px solid grey; border-radius: 3px; padding: 6px;">
-    <b2b-chip-component
-      label="${label}"
-      disabled="${disabled}"
-      value="${value}"
-      has-close-button="${hasCloseButton}"></b2b-chip-component>
+  return html `<div
+    style="width: 170px; border: 1px solid grey; border-radius: 3px; padding: 6px;">
+    <b2b-chip-component
+      label="${label}"
+      disabled="${disabled}"
+      value="${value}"
+      has-close-button="${hasCloseButton}"></b2b-chip-component>
   </div>`;
 };
 const defaultArgs = {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 13 Nov 2023 12:54:56 GMT
+ * Generated on Mon, 27 Nov 2023 15:31:38 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 13 Nov 2023 12:54:56 GMT
+ * Generated on Mon, 27 Nov 2023 15:31:38 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -3,11 +3,11 @@ describe('B2B-Dropdown', () => {
   let page;
   beforeEach(async () => {
     page = await newE2EPage();
-    await page.setContent(`
-      <b2b-dropdown label="Test Dropdown">
-          <option value="option-1" selected id="option-1">Option 1</option>
-          <option value="option-2" id="option-2">Option 2</option>
-      </b2b-dropdown>
+    await page.setContent(`
+      <b2b-dropdown label="Test Dropdown">
+          <option value="option-1" selected id="option-1">Option 1</option>
+          <option value="option-2" id="option-2">Option 2</option>
+      </b2b-dropdown>
     `);
   });
   it('should render the dropdown component', async () => {

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

@@ -2,19 +2,19 @@ import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ label, required, name, disabled, invalid, hint, error, }) => {
   const defaultLabel = label ? label : 'Favorite Fruit';
-  return html `<b2b-dropdown
-    label="${defaultLabel}"
-    name="${name}"
-    error="${error}"
-    hint="${hint}"
-    disabled="${disabled}"
-    invalid="${invalid}"
-    required="${required}">
-    <option value="strawberry">Strawberry</option>
-    <option value="orange">Orange</option>
-    <option value="banana">Banana</option>
-    <option value="pineapple">Pineapple</option>
-    <option value="apple" disabled>Apple</option>
+  return html `<b2b-dropdown
+    label="${defaultLabel}"
+    name="${name}"
+    error="${error}"
+    hint="${hint}"
+    disabled="${disabled}"
+    invalid="${invalid}"
+    required="${required}">
+    <option value="strawberry">Strawberry</option>
+    <option value="orange">Orange</option>
+    <option value="banana">Banana</option>
+    <option value="pineapple">Pineapple</option>
+    <option value="apple" disabled>Apple</option>
   </b2b-dropdown>`;
 };
 const defaultArgs = {

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

@@ -34,7 +34,7 @@ export class B2bGridColumnComponent {
         "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "| 1\r\n    | 2\r\n    | 3\r\n    | 4\r\n    | 5\r\n    | 6\r\n    | 7\r\n    | 8\r\n    | 9\r\n    | 10\r\n    | 11\r\n    | 12",
+          "original": "| 1\n    | 2\n    | 3\n    | 4\n    | 5\n    | 6\n    | 7\n    | 8\n    | 9\n    | 10\n    | 11\n    | 12",
           "resolved": "1 | 10 | 11 | 12 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9",
           "references": {}
         },

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

@@ -2,10 +2,10 @@ import { newE2EPage } from "@stencil/core/testing";
 describe('B2B Grid', () => {
   it('should render the grid and children', async () => {
     const page = await newE2EPage();
-    await page.setContent(`<b2b-grid>
-        <b2b-grid-row>
-            <b2b-grid-col></b2b-grid-col>
-        </b2b-grid-row>
+    await page.setContent(`<b2b-grid>
+        <b2b-grid-row>
+            <b2b-grid-col></b2b-grid-col>
+        </b2b-grid-row>
     </b2b-grid>`);
     const grid = await page.find('b2b-grid');
     expect(grid).not.toBeNull();

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

@@ -5,163 +5,163 @@ const Template = ({ margin, justify, textAlign, span, rowGap, columnGap, alignIt
   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>
+      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
+      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
+      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
+      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
       >`;
   }
 };

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

@@ -79,7 +79,7 @@ export class B2bGridRowComponent {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "| 'start'\r\n    | 'end'\r\n    | 'center'\r\n    | 'space-around'\r\n    | 'space-between'\r\n    | 'space-evenly'",
+          "original": "| 'start'\n    | 'end'\n    | 'center'\n    | 'space-around'\n    | 'space-between'\n    | 'space-evenly'",
           "resolved": "\"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\" | \"start\"",
           "references": {}
         },

package/dist/collection/components/headline/headline.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 13 Nov 2023 12:54:56 GMT
+ * Generated on Mon, 27 Nov 2023 15:31:38 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 13 Nov 2023 12:54:56 GMT
+ * Generated on Mon, 27 Nov 2023 15:31:38 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/headline/headline.spec.js

@@ -6,15 +6,15 @@ it('should use h1 tag with headline 400 size', async () => {
     components: [HeadlineComponent],
     template: () => (h("b2b-headline", { size: "400" }, "This is a h1 Headline")),
   });
-  expect(page.root).toEqualHtml(`
-    <b2b-headline>
-      <mock:shadow-root>
-        <h1 class="b2b-headline--400 b2b-headline--left">
-          <slot></slot>
-        </h1>
-      </mock:shadow-root>
-      This is a h1 Headline
-    </b2b-headline>
+  expect(page.root).toEqualHtml(`
+    <b2b-headline>
+      <mock:shadow-root>
+        <h1 class="b2b-headline--400 b2b-headline--left">
+          <slot></slot>
+        </h1>
+      </mock:shadow-root>
+      This is a h1 Headline
+    </b2b-headline>
   `);
 });
 it('should use h2 tag with headline 200 size', async () => {
@@ -22,15 +22,15 @@ it('should use h2 tag with headline 200 size', async () => {
     components: [HeadlineComponent],
     template: () => (h("b2b-headline", { size: "200" }, "This is a h2 Headline")),
   });
-  expect(page.root).toEqualHtml(`
-    <b2b-headline>
-      <mock:shadow-root>
-        <h2 class="b2b-headline--200 b2b-headline--left">
-          <slot></slot>
-        </h2>
-      </mock:shadow-root>
-      This is a h2 Headline
-    </b2b-headline>
+  expect(page.root).toEqualHtml(`
+    <b2b-headline>
+      <mock:shadow-root>
+        <h2 class="b2b-headline--200 b2b-headline--left">
+          <slot></slot>
+        </h2>
+      </mock:shadow-root>
+      This is a h2 Headline
+    </b2b-headline>
   `);
 });
 it('should use h3 tag with headline 100 size', async () => {
@@ -38,15 +38,15 @@ it('should use h3 tag with headline 100 size', async () => {
     components: [HeadlineComponent],
     template: () => (h("b2b-headline", { size: "100" }, "This is a h3 Headline")),
   });
-  expect(page.root).toEqualHtml(`
-    <b2b-headline>
-      <mock:shadow-root>
-        <h3 class="b2b-headline--100 b2b-headline--left">
-          <slot></slot>
-        </h3>
-      </mock:shadow-root>
-      This is a h3 Headline
-    </b2b-headline>
+  expect(page.root).toEqualHtml(`
+    <b2b-headline>
+      <mock:shadow-root>
+        <h3 class="b2b-headline--100 b2b-headline--left">
+          <slot></slot>
+        </h3>
+      </mock:shadow-root>
+      This is a h3 Headline
+    </b2b-headline>
   `);
 });
 it('should use h1 tag as default size', async () => {
@@ -54,14 +54,14 @@ it('should use h1 tag as default size', async () => {
     components: [HeadlineComponent],
     template: () => h("b2b-headline", null, "This is a h3 Headline"),
   });
-  expect(page.root).toEqualHtml(`
-    <b2b-headline>
-      <mock:shadow-root>
-        <h1 class="b2b-headline--400 b2b-headline--left">
-          <slot></slot>
-        </h1>
-      </mock:shadow-root>
-      This is a h3 Headline
-    </b2b-headline>
+  expect(page.root).toEqualHtml(`
+    <b2b-headline>
+      <mock:shadow-root>
+        <h1 class="b2b-headline--400 b2b-headline--left">
+          <slot></slot>
+        </h1>
+      </mock:shadow-root>
+      This is a h3 Headline
+    </b2b-headline>
   `);
 });

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

@@ -1,8 +1,8 @@
 import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
 const template = ({ size, align, slot }) => {
-  return html `<b2b-headline size="${size}" align="${align}">
-    ${slot}
+  return html `<b2b-headline size="${size}" align="${align}">
+    ${slot}
   </b2b-headline>`;
 };
 const defaultArgs = {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 13 Nov 2023 12:54:56 GMT
+ * Generated on Mon, 27 Nov 2023 15:31:38 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 13 Nov 2023 12:54:56 GMT
+ * Generated on Mon, 27 Nov 2023 15:31:38 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */