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

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

@@ -7,15 +7,15 @@ it('should render the anchor component with default values', async () => {
     components: [AnchorComponent],
     template: () => (h("b2b-anchor", { href: testRef }, "This is a test anchor.")),
   });
-  expect(page.root).toEqualHtml(`
-    <b2b-anchor>
-      <mock:shadow-root>
-        <a href="https://www.otto.de" class="b2b-anchor b2b-anchor--inherit" target="_self">
-          <slot></slot>
-        </a>
-      </mock:shadow-root>  
-      This is a test anchor.
-    </b2b-anchor>
+  expect(page.root).toEqualHtml(`
+    <b2b-anchor>
+      <mock:shadow-root>
+        <a href="https://www.otto.de" class="b2b-anchor b2b-anchor--inherit" target="_self">
+          <slot></slot>
+        </a>
+      </mock:shadow-root>  
+      This is a test anchor.
+    </b2b-anchor>
   `);
 });
 it('should change the font size of the anchor component if specified', async () => {
@@ -23,15 +23,15 @@ it('should change the font size of the anchor component if specified', async ()
     components: [AnchorComponent],
     template: () => (h("b2b-anchor", { href: testRef, size: "100" }, "This is a test anchor.")),
   });
-  expect(page.root).toEqualHtml(`
-    <b2b-anchor>
-      <mock:shadow-root>
-        <a href="https://www.otto.de" class="b2b-anchor b2b-anchor--100" target="_self">
-          <slot></slot>
-        </a>
-      </mock:shadow-root>  
-      This is a test anchor.
-    </b2b-anchor>
+  expect(page.root).toEqualHtml(`
+    <b2b-anchor>
+      <mock:shadow-root>
+        <a href="https://www.otto.de" class="b2b-anchor b2b-anchor--100" target="_self">
+          <slot></slot>
+        </a>
+      </mock:shadow-root>  
+      This is a test anchor.
+    </b2b-anchor>
   `);
 });
 it('should change the download string if specified', async () => {
@@ -39,15 +39,15 @@ it('should change the download string if specified', async () => {
     components: [AnchorComponent],
     template: () => (h("b2b-anchor", { href: testRef, download: "This is a test download" }, "This is a test anchor.")),
   });
-  expect(page.root).toEqualHtml(`
-    <b2b-anchor>
-      <mock:shadow-root>
-        <a href="https://www.otto.de" class="b2b-anchor b2b-anchor--inherit" target="_self" download="This is a test download">
-          <slot></slot>
-        </a>
-      </mock:shadow-root>  
-      This is a test anchor.
-    </b2b-anchor>
+  expect(page.root).toEqualHtml(`
+    <b2b-anchor>
+      <mock:shadow-root>
+        <a href="https://www.otto.de" class="b2b-anchor b2b-anchor--inherit" target="_self" download="This is a test download">
+          <slot></slot>
+        </a>
+      </mock:shadow-root>  
+      This is a test anchor.
+    </b2b-anchor>
   `);
 });
 it('should change the target property if specified', async () => {
@@ -55,14 +55,14 @@ it('should change the target property if specified', async () => {
     components: [AnchorComponent],
     template: () => (h("b2b-anchor", { href: testRef, target: "parent" }, "This is a test anchor.")),
   });
-  expect(page.root).toEqualHtml(`
-    <b2b-anchor>
-      <mock:shadow-root>
-        <a href="https://www.otto.de" class="b2b-anchor b2b-anchor--inherit" target="_parent">
-          <slot></slot>
-        </a>
-      </mock:shadow-root>  
-      This is a test anchor.
-    </b2b-anchor>
+  expect(page.root).toEqualHtml(`
+    <b2b-anchor>
+      <mock:shadow-root>
+        <a href="https://www.otto.de" class="b2b-anchor b2b-anchor--inherit" target="_parent">
+          <slot></slot>
+        </a>
+      </mock:shadow-root>  
+      This is a test anchor.
+    </b2b-anchor>
   `);
 });

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

@@ -1,12 +1,12 @@
 import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ href, download, size, target }) => {
-  return html ` <b2b-anchor
-    href="${href}"
-    download="${download}"
-    size="${size}"
-    target="${target}">
-    Click me!
+  return html ` <b2b-anchor
+    href="${href}"
+    download="${download}"
+    size="${size}"
+    target="${target}">
+    Click me!
   </b2b-anchor>`;
 };
 const defaultArgs = {

package/dist/collection/components/breadcrumb/breadcrumb.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /**
  * Do not edit directly
- * Generated on Mon, 13 Nov 2023 12:54:56 GMT
+ * Generated on Tue, 28 Nov 2023 08:54:33 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 13 Nov 2023 12:54:56 GMT
+ * Generated on Tue, 28 Nov 2023 08:54:33 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -3,10 +3,10 @@ describe('B2B-Breadcrumb', () => {
   let page;
   beforeEach(async () => {
     page = await newE2EPage();
-    await page.setContent(`<b2b-breadcrumb>
-            <b2b-breadcrumb-item value="one">First Page</b2b-breadcrumb-item>
-            <b2b-breadcrumb-item value="two" active>Second Page</b2b-breadcrumb-item>
-            <b2b-breadcrumb-item value="three" href="test">Last Page</b2b-breadcrumb-item>
+    await page.setContent(`<b2b-breadcrumb>
+            <b2b-breadcrumb-item value="one">First Page</b2b-breadcrumb-item>
+            <b2b-breadcrumb-item value="two" active>Second Page</b2b-breadcrumb-item>
+            <b2b-breadcrumb-item value="three" href="test">Last Page</b2b-breadcrumb-item>
         </b2b-breadcrumb>`);
   });
   it('should render the breadcrumb', async () => {

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

@@ -1,10 +1,10 @@
 import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ href, active }) => {
-  return html ` <b2b-breadcrumb>
-    <b2b-breadcrumb-item href="${href}">Start</b2b-breadcrumb-item>
-    <b2b-breadcrumb-item>Weiter</b2b-breadcrumb-item>
-    <b2b-breadcrumb-item active="${active}">Ende</b2b-breadcrumb-item>
+  return html ` <b2b-breadcrumb>
+    <b2b-breadcrumb-item href="${href}">Start</b2b-breadcrumb-item>
+    <b2b-breadcrumb-item>Weiter</b2b-breadcrumb-item>
+    <b2b-breadcrumb-item active="${active}">Ende</b2b-breadcrumb-item>
   </b2b-breadcrumb>`;
 };
 const defaultArgs = {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 13 Nov 2023 12:54:56 GMT
+ * Generated on Tue, 28 Nov 2023 08:54:33 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 Tue, 28 Nov 2023 08:54:33 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -33,10 +33,10 @@ describe('B2B-Button', () => {
     expect(eventSpy).not.toHaveReceivedEvent();
   });
   it('should support form submission from shadow dom', async () => {
-    const form = `
-      <form>
-        <b2b-button type='submit'>Hello World</b2b-button>
-      </form>
+    const form = `
+      <form>
+        <b2b-button type='submit'>Hello World</b2b-button>
+      </form>
     `;
     page = await newE2EPage();
     await page.setContent(form);
@@ -48,26 +48,26 @@ describe('B2B-Button', () => {
   });
   it('should reduce padding on the button if there is only an icon', async () => {
     page = await newE2EPage();
-    await page.setContent(`<b2b-button variant="primary" size="100">
-    <b2b-icon slot="end" icon="b2b_icon-check" size="100"></b2b-icon>
+    await page.setContent(`<b2b-button variant="primary" size="100">
+    <b2b-icon slot="end" icon="b2b_icon-check" size="100"></b2b-icon>
   </b2b-button>`);
     const button = await page.find('b2b-button');
     expect(button).toHaveClass('b2b-button--icon-only');
   });
   it('should not reduce padding on the button if there is text', async () => {
     page = await newE2EPage();
-    await page.setContent(`<b2b-button variant="primary" size="100">
-    <span>Hello World</span>
-    <b2b-icon slot="end" icon="b2b_icon-check" size="100"></b2b-icon>
+    await page.setContent(`<b2b-button variant="primary" size="100">
+    <span>Hello World</span>
+    <b2b-icon slot="end" icon="b2b_icon-check" size="100"></b2b-icon>
   </b2b-button>`);
     const button = await page.find('b2b-button');
     expect(button).not.toHaveClass('b2b-button--icon-only');
   });
   it('should not submit a form when the button is not of type submit', async () => {
-    const form = `
-      <form>
-        <b2b-button>Hello World</b2b-button>
-      </form>
+    const form = `
+      <form>
+        <b2b-button>Hello World</b2b-button>
+      </form>
     `;
     page = await newE2EPage();
     await page.setContent(form);

package/dist/collection/components/button/button.js

@@ -237,7 +237,7 @@ export class ButtonComponent {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If set to true, the browser will attempt to donwload and save the URL instead of opening it. The name of the created file\r\ndefaults to the URL string, but can be changed by the user."
+          "text": "If set to true, the browser will attempt to donwload and save the URL instead of opening it. The name of the created file\ndefaults to the URL string, but can be changed by the user."
         },
         "attribute": "download",
         "reflect": false

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

@@ -28,13 +28,13 @@ const meta = {
   argTypes: getArgTypes('b2b-button'),
   render: (_a) => {
     var args = __rest(_a, []);
-    return html `<b2b-button
-    variant="${args.variant}"
-    size="${args.size}"
-    disabled="${args.disabled}"
-    loading="${args.loading}"
-    type="${args.type}">
-    ${args.label}
+    return html `<b2b-button
+    variant="${args.variant}"
+    size="${args.size}"
+    disabled="${args.disabled}"
+    loading="${args.loading}"
+    type="${args.type}">
+    ${args.label}
   </b2b-button>`;
   },
 };
@@ -52,14 +52,14 @@ export const IconStart = {
   args: Object.assign(Object.assign({}, meta.args), { label: 'Icon Start' }),
   render: (_a) => {
     var args = __rest(_a, []);
-    return html `<b2b-button
-    variant="${args.variant}"
-    size="${args.size}"
-    disabled="${args.disabled}"
-    loading="${args.loading}"
-    type="${args.type}">
-    <b2b-icon slot="start" icon="b2b_icon-check" size="100"></b2b-icon>
-    ${args.label}
+    return html `<b2b-button
+    variant="${args.variant}"
+    size="${args.size}"
+    disabled="${args.disabled}"
+    loading="${args.loading}"
+    type="${args.type}">
+    <b2b-icon slot="start" icon="b2b_icon-check" size="100"></b2b-icon>
+    ${args.label}
   </b2b-button>`;
   },
 };
@@ -67,14 +67,14 @@ export const IconEnd = {
   args: Object.assign(Object.assign({}, meta.args), { label: 'Icon End' }),
   render: (_a) => {
     var args = __rest(_a, []);
-    return html `<b2b-button
-    variant="${args.variant}"
-    size="${args.size}"
-    disabled="${args.disabled}"
-    loading="${args.loading}"
-    type="${args.type}">
-    ${args.label}
-    <b2b-icon slot="end" icon="b2b_icon-check" size="100"></b2b-icon>
+    return html `<b2b-button
+    variant="${args.variant}"
+    size="${args.size}"
+    disabled="${args.disabled}"
+    loading="${args.loading}"
+    type="${args.type}">
+    ${args.label}
+    <b2b-icon slot="end" icon="b2b_icon-check" size="100"></b2b-icon>
   </b2b-button>`;
   },
 };
@@ -82,14 +82,14 @@ export const PaliIcon = {
   args: Object.assign(Object.assign({}, meta.args), { label: 'Icon from PaLi' }),
   render: (_a) => {
     var args = __rest(_a, []);
-    return html `<b2b-button
-    variant="${args.variant}"
-    size="${args.size}"
-    disabled="${args.disabled}"
-    loading="${args.loading}"
-    type="${args.type}">
-    <i slot="start" class="obc_icon-info"></i>
-    ${args.label}
+    return html `<b2b-button
+    variant="${args.variant}"
+    size="${args.size}"
+    disabled="${args.disabled}"
+    loading="${args.loading}"
+    type="${args.type}">
+    <i slot="start" class="obc_icon-info"></i>
+    ${args.label}
   </b2b-button>`;
   },
 };
@@ -97,13 +97,13 @@ export const IconOnly = {
   args: Object.assign({}, meta.args),
   render: (_a) => {
     var args = __rest(_a, []);
-    return html `<b2b-button
-    variant="${args.variant}"
-    size="${args.size}"
-    disabled="${args.disabled}"
-    loading="${args.loading}"
-    type="${args.type}">
-    <b2b-icon slot="end" icon="b2b_icon-search" size="100"></b2b-icon>
+    return html `<b2b-button
+    variant="${args.variant}"
+    size="${args.size}"
+    disabled="${args.disabled}"
+    loading="${args.loading}"
+    type="${args.type}">
+    <b2b-icon slot="end" icon="b2b_icon-search" size="100"></b2b-icon>
   </b2b-button>`;
   },
 };
@@ -114,15 +114,15 @@ export const Anchor = {
   args: Object.assign({}, meta.args),
   render: (_a) => {
     var args = __rest(_a, []);
-    return html `<b2b-button
-    variant="${args.variant}"
-    size="${args.size}"
-    disabled="${args.disabled}"
-    loading="${args.loading}"
-    href="www.otto.de"
-    target="blank"
-    type="${args.type}">
-    Go to otto.de
+    return html `<b2b-button
+    variant="${args.variant}"
+    size="${args.size}"
+    disabled="${args.disabled}"
+    loading="${args.loading}"
+    href="www.otto.de"
+    target="blank"
+    type="${args.type}">
+    Go to otto.de
   </b2b-button>`;
   },
 };
@@ -130,15 +130,15 @@ export const DisabledAnchor = {
   args: Object.assign(Object.assign({}, meta.args), { disabled: true }),
   render: (_a) => {
     var args = __rest(_a, []);
-    return html `<b2b-button
-    variant="${args.variant}"
-    size="${args.size}"
-    disabled="${args.disabled}"
-    loading="${args.loading}"
-    href="www.otto.de"
-    target="blank"
-    type="${args.type}">
-    Go to otto.de
+    return html `<b2b-button
+    variant="${args.variant}"
+    size="${args.size}"
+    disabled="${args.disabled}"
+    loading="${args.loading}"
+    href="www.otto.de"
+    target="blank"
+    type="${args.type}">
+    Go to otto.de
   </b2b-button>`;
   },
 };

package/dist/collection/components/card/card.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 13 Nov 2023 12:54:56 GMT
+ * Generated on Tue, 28 Nov 2023 08:54:33 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 Tue, 28 Nov 2023 08:54:33 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -90,9 +90,9 @@ describe('B2B-Card', () => {
   });
   it('should focus on next card when navigating with keyboard and first card has a href value', async () => {
     page = await newE2EPage();
-    await page.setContent(`<div>
-        <b2b-card id='card1' href="www.something.com"></b2b-card>
-        <b2b-card id='card2'>Hello World</b2b-card>
+    await page.setContent(`<div>
+        <b2b-card id='card1' href="www.something.com"></b2b-card>
+        <b2b-card id='card2'>Hello World</b2b-card>
       </div>`);
     await page.keyboard.press('Tab');
     await page.waitForChanges();

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

@@ -6,13 +6,13 @@ it('should render the card with default values', async () => {
     components: [CardComponent],
     template: () => h("b2b-card", null, "B2B Card"),
   });
-  expect(page.root).toEqualHtml(`
-    <b2b-card class="b2b-card" tabindex="0">
-      <mock:shadow-root>
-        <slot></slot>
-      </mock:shadow-root>
-      B2B Card
-    </b2b-card>
+  expect(page.root).toEqualHtml(`
+    <b2b-card class="b2b-card" tabindex="0">
+      <mock:shadow-root>
+        <slot></slot>
+      </mock:shadow-root>
+      B2B Card
+    </b2b-card>
 		`);
 });
 it('should disable the card', async () => {
@@ -20,13 +20,13 @@ it('should disable the card', async () => {
     components: [CardComponent],
     template: () => h("b2b-card", { disabled: true }, "B2B Card"),
   });
-  expect(page.root).toEqualHtml(`
-    <b2b-card tabindex="-1" aria-disabled="true" class="b2b-card b2b-card--disabled">
-      <mock:shadow-root>
-        <div class="b2b-card--disabled-overlay"></div>
-        <slot></slot>
-      </mock:shadow-root>
-      B2B Card
-    </b2b-card>
+  expect(page.root).toEqualHtml(`
+    <b2b-card tabindex="-1" aria-disabled="true" class="b2b-card b2b-card--disabled">
+      <mock:shadow-root>
+        <div class="b2b-card--disabled-overlay"></div>
+        <slot></slot>
+      </mock:shadow-root>
+      B2B Card
+    </b2b-card>
 		`);
 });

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

@@ -1,13 +1,13 @@
 import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ disabled, href, target }) => {
-  return html `<b2b-card disabled="${disabled}" href=${href} target="${target}">
-    <b2b-headline size="100">An Interactive Card</b2b-headline>
-    <b2b-paragraph
-      >You can hover over me or press tab on your keyboard to see me pop out. I
-      fill up to 100% of my parent element, so you can use me in a
-      grid.</b2b-paragraph
-    >
+  return html `<b2b-card disabled="${disabled}" href=${href} target="${target}">
+    <b2b-headline size="100">An Interactive Card</b2b-headline>
+    <b2b-paragraph
+      >You can hover over me or press tab on your keyboard to see me pop out. I
+      fill up to 100% of my parent element, so you can use me in a
+      grid.</b2b-paragraph
+    >
   </b2b-card>`;
 };
 const defaultArgs = {

package/dist/collection/components/checkbox/checkbox.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 13 Nov 2023 12:54:56 GMT
+ * Generated on Tue, 28 Nov 2023 08:54:33 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 Tue, 28 Nov 2023 08:54:33 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,15 +1,15 @@
 import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ label, required, checked, disabled, hint, error, name, value, invalid, }) => {
-  return html `<b2b-checkbox
-    label="${label}"
-    required="${required}"
-    checked="${checked}"
-    disabled="${disabled}"
-    hint="${hint}"
-    error="${error}"
-    name="${name}"
-    value="${value}"
+  return html `<b2b-checkbox
+    label="${label}"
+    required="${required}"
+    checked="${checked}"
+    disabled="${disabled}"
+    hint="${hint}"
+    error="${error}"
+    name="${name}"
+    value="${value}"
     invalid="${invalid}"></b2b-checkbox>`;
 };
 const defaultArgs = {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 13 Nov 2023 12:54:56 GMT
+ * Generated on Tue, 28 Nov 2023 08:54:33 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 Tue, 28 Nov 2023 08:54:33 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/checkbox-group/checkbox-group.e2e.js

@@ -3,11 +3,11 @@ describe('B2B-Checkbox-Group', () => {
   let page;
   beforeEach(async () => {
     page = await newE2EPage();
-    await page.setContent(`
-            <b2b-checkbox-group label="test label">
-                <b2b-checkbox label="one" value="one" error="test" hint="test"></b2b-checkbox>
-                <b2b-checkbox id="disabled-checkbox" label="two" value="two" error="test" hint="test" disabled></b2b-checkbox>
-            </b2b-checkbox-group>
+    await page.setContent(`
+            <b2b-checkbox-group label="test label">
+                <b2b-checkbox label="one" value="one" error="test" hint="test"></b2b-checkbox>
+                <b2b-checkbox id="disabled-checkbox" label="two" value="two" error="test" hint="test" disabled></b2b-checkbox>
+            </b2b-checkbox-group>
         `);
   });
   it('should render the checkbox group component', async () => {

package/dist/collection/components/checkbox-group/checkbox-group.stories.js

@@ -3,16 +3,16 @@ import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ label, required, disabled, invalid, hint, error, alignment, }) => {
   const firstLabel = 'One';
   const secondLabel = 'Two';
-  return html `<b2b-checkbox-group
-    label="${label}"
-    required="${required}"
-    disabled="${disabled}"
-    invalid="${invalid}"
-    hint="${hint}"
-    error="${error}"
-    alignment="${alignment}">
-    <b2b-checkbox label="${firstLabel}"></b2b-checkbox>
-    <b2b-checkbox label="${secondLabel}"></b2b-checkbox>
+  return html `<b2b-checkbox-group
+    label="${label}"
+    required="${required}"
+    disabled="${disabled}"
+    invalid="${invalid}"
+    hint="${hint}"
+    error="${error}"
+    alignment="${alignment}">
+    <b2b-checkbox label="${firstLabel}"></b2b-checkbox>
+    <b2b-checkbox label="${secondLabel}"></b2b-checkbox>
   </b2b-checkbox-group>`;
 };
 const defaultArgs = {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 13 Nov 2023 12:54:56 GMT
+ * Generated on Tue, 28 Nov 2023 08:54:33 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 Tue, 28 Nov 2023 08:54:33 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */