@otto-de/b2b-core-components 1.8.0 → 1.8.2

package/dist/collection/components/modal/modal.js

@@ -148,7 +148,7 @@ export class ModalComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "A boolean that indicates whether the modal can be dismissed by clicking\r\nin the backdrop outside the modal."
+          "text": "A boolean that indicates whether the modal can be dismissed by clicking\nin the backdrop outside the modal."
         },
         "attribute": "backdrop-dismiss",
         "reflect": false,
@@ -166,7 +166,7 @@ export class ModalComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "A boolean to indicate whether the modal can be dismissed by pressing\r\nthe escape key on the keyboard"
+          "text": "A boolean to indicate whether the modal can be dismissed by pressing\nthe escape key on the keyboard"
         },
         "attribute": "esc-dismiss",
         "reflect": false,

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

@@ -16,22 +16,22 @@ const Template = ({ opened, variant, heading, backdropDismiss, escDismiss, conte
       escDismiss,
     });
   };
-  return html `
-    <b2b-button variant="primary" @click=${openModal}>Open Modal</b2b-button>
-
-    <b2b-modal
-      @b2b-close=${closeModal}
-      id="modal"
-      opened="${opened}"
-      variant="${variant}"
-      heading="${heading}"
-      backdrop-dismiss="${backdropDismiss}"
-      esc-dismiss="${escDismiss}">
-      <div>${content}</div>
-      <b2b-paragraph slot="footer-left">* Left Slot</b2b-paragraph>
-      <b2b-button @click=${closeModal} slot="footer-right">Close</b2b-button>
-      <b2b-button slot="footer-right" variant="primary">Save</b2b-button>
-    </b2b-modal>
+  return html `
+    <b2b-button variant="primary" @click=${openModal}>Open Modal</b2b-button>
+
+    <b2b-modal
+      @b2b-close=${closeModal}
+      id="modal"
+      opened="${opened}"
+      variant="${variant}"
+      heading="${heading}"
+      backdrop-dismiss="${backdropDismiss}"
+      esc-dismiss="${escDismiss}">
+      <div>${content}</div>
+      <b2b-paragraph slot="footer-left">* Left Slot</b2b-paragraph>
+      <b2b-button @click=${closeModal} slot="footer-right">Close</b2b-button>
+      <b2b-button slot="footer-right" variant="primary">Save</b2b-button>
+    </b2b-modal>
   `;
 };
 const defaultArgs = {

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

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

package/dist/collection/components/pagination/pagination.js

@@ -194,7 +194,7 @@ export class PaginationComponent {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Will emit every time a page changes, by clicking back, next or any specific page. \\\r\nEmits a PageChangeEventDetail that includes lastSelectedPage, currentPage\r\nand direction. Direction is only when clicking back or next."
+          "text": "Will emit every time a page changes, by clicking back, next or any specific page. \\\nEmits a PageChangeEventDetail that includes lastSelectedPage, currentPage\nand direction. Direction is only when clicking back or next."
         },
         "complexType": {
           "original": "PageChangeEventDetail",

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

@@ -1,8 +1,8 @@
 import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 const Template = ({ totalPages, activePage }) => {
-  return html `<b2b-pagination
-    total-pages="${totalPages}"
+  return html `<b2b-pagination
+    total-pages="${totalPages}"
     active-page="${activePage}"></b2b-pagination>`;
 };
 const defaultArgs = {

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

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

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

@@ -1,18 +1,18 @@
 import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
 const template = ({ weight, size, align }) => {
-  return html `<b2b-paragraph weight="${weight}" size="${size}" align="${align}">
-    Far far away, behind the word mountains, far from the countries Vokalia and
-    Consonantia, there live the blind texts. Separated they live in
-    Bookmarksgrove right at the coast of the Semantics, a large language ocean.
-    A small river named Duden flows by their place and supplies it with the
-    necessary regelialia. It is a paradisematic country, in which roasted parts
-    of sentences fly into your mouth. Even the all-powerful Pointing has no
-    control about the blind texts it is an almost unorthographic life One day
-    however a small line of blind text by the name of Lorem Ipsum decided to
-    leave for the far World of Grammar. The Big Oxmox advised her not to do so,
-    because there were thousands of bad Commas, wild Question Marks and devious
-    Semikoli, but the Little Blind Text didn’t listen.
+  return html `<b2b-paragraph weight="${weight}" size="${size}" align="${align}">
+    Far far away, behind the word mountains, far from the countries Vokalia and
+    Consonantia, there live the blind texts. Separated they live in
+    Bookmarksgrove right at the coast of the Semantics, a large language ocean.
+    A small river named Duden flows by their place and supplies it with the
+    necessary regelialia. It is a paradisematic country, in which roasted parts
+    of sentences fly into your mouth. Even the all-powerful Pointing has no
+    control about the blind texts it is an almost unorthographic life One day
+    however a small line of blind text by the name of Lorem Ipsum decided to
+    leave for the far World of Grammar. The Big Oxmox advised her not to do so,
+    because there were thousands of bad Commas, wild Question Marks and devious
+    Semikoli, but the Little Blind Text didn’t listen.
   </b2b-paragraph>`;
 };
 const defaultArgs = {

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

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

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

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

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

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

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

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

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

@@ -1,23 +1,23 @@
 import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 const Template = ({ label, required, name, disabled, invalid, alignment, hint, error, }) => {
-  return html ` <b2b-radio-group
-    label="${label}"
-    required="${required}"
-    name="${name}"
-    disabled="${disabled}"
-    invalid="${invalid}"
-    alignment="${alignment}"
-    hint="${hint}"
-    error="${error}">
-    <b2b-radio-button
-      label="Option 1"
-      name="${name}"
-      value="one"></b2b-radio-button>
-    <b2b-radio-button
-      label="Option 2"
-      name="${name}"
-      value="two"></b2b-radio-button>
+  return html ` <b2b-radio-group
+    label="${label}"
+    required="${required}"
+    name="${name}"
+    disabled="${disabled}"
+    invalid="${invalid}"
+    alignment="${alignment}"
+    hint="${hint}"
+    error="${error}">
+    <b2b-radio-button
+      label="Option 1"
+      name="${name}"
+      value="one"></b2b-radio-button>
+    <b2b-radio-button
+      label="Option 2"
+      name="${name}"
+      value="two"></b2b-radio-button>
   </b2b-radio-group>`;
 };
 const defaultArgs = {

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

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

package/dist/collection/components/required-separator/required-separator.stories.js

@@ -1,9 +1,9 @@
 import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 const Template = ({ label }) => {
-  return html `<div style="width: 400px">
-    <b2b-input required="true" label="Name"></b2b-input
-    ><br /><b2b-required-separator label="${label}"></b2b-required-separator>
+  return html `<div style="width: 400px">
+    <b2b-input required="true" label="Name"></b2b-input
+    ><br /><b2b-required-separator label="${label}"></b2b-required-separator>
   </div>`;
 };
 const defaultArgs = {

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

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

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

@@ -43,7 +43,7 @@ export class RoundedIconComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The color of the circle around the icon or text.\r\nUse any type including hex, rgb or css custom properties\r\nas long as you pass it as a string"
+          "text": "The color of the circle around the icon or text.\nUse any type including hex, rgb or css custom properties\nas long as you pass it as a string"
         },
         "attribute": "color",
         "reflect": false,
@@ -61,7 +61,7 @@ export class RoundedIconComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The color of the border of the circle around the icon or text.\r\nUse any type including hex, rgb or css custom properties\r\nas long as you pass it as a string"
+          "text": "The color of the border of the circle around the icon or text.\nUse any type including hex, rgb or css custom properties\nas long as you pass it as a string"
         },
         "attribute": "border-color",
         "reflect": false
@@ -78,7 +78,7 @@ export class RoundedIconComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The color of the text or icon within the circle.\r\nUse any type including hex, rgb or css custom properties\r\nas long as you pass it as a string"
+          "text": "The color of the text or icon within the circle.\nUse any type including hex, rgb or css custom properties\nas long as you pass it as a string"
         },
         "attribute": "content-color",
         "reflect": false,

package/dist/collection/components/rounded-icon/rounded-icon.stories.js

@@ -1,10 +1,10 @@
 import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 const TemplateIcon = ({ color, contentColor, iconName }) => {
-  return html `<div>
-    <b2b-rounded-icon color="${color}" content-color="${contentColor}">
-      <b2b-icon slot="icon" icon="${iconName}"></b2b-icon>
-    </b2b-rounded-icon>
+  return html `<div>
+    <b2b-rounded-icon color="${color}" content-color="${contentColor}">
+      <b2b-icon slot="icon" icon="${iconName}"></b2b-icon>
+    </b2b-rounded-icon>
   </div>`;
 };
 export const story010Icon = TemplateIcon.bind({});
@@ -15,10 +15,10 @@ story010Icon.args = {
 };
 story010Icon.storyName = 'Icon Content';
 const TemplateText = ({ color, contentColor, textContent }) => {
-  return html `<div>
-    <b2b-rounded-icon color="${color}" content-color="${contentColor}">
-      <span slot="text">${textContent}</span>
-    </b2b-rounded-icon>
+  return html `<div>
+    <b2b-rounded-icon color="${color}" content-color="${contentColor}">
+      <span slot="text">${textContent}</span>
+    </b2b-rounded-icon>
   </div>`;
 };
 export const story020Text = TemplateText.bind({});

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

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

package/dist/collection/components/scrollable-container/scrollable-container.stories.js

@@ -1,24 +1,24 @@
 import { getArgTypes } from "../../docs/config/utils";
 import { html } from "lit-html";
 const Template = ({ testWidth, testHeight, testWhiteSpace }) => {
-  return html `
-    <b2b-scrollable-container
-      style=${`width: ${testWidth}; height: ${testHeight}`}>
-      <b2b-paragraph style="white-space: ${testWhiteSpace}">
-        Far far away, behind the word mountains, far from the countries Vokalia
-        and Consonantia, there live the blind texts. Separated they live in
-        Bookmarksgrove right at the coast of the Semantics, a large language
-        ocean. A small river named Duden flows by their place and supplies it
-        with the necessary regelialia. It is a paradisematic country, in which
-        roasted parts of sentences fly into your mouth. Even the all-powerful
-        Pointing has no control about the blind texts it is an almost
-        unorthographic life One day however a small line of blind text by the
-        name of Lorem Ipsum decided to leave for the far World of Grammar. The
-        Big Oxmox advised her not to do so, because there were thousands of bad
-        Commas, wild Question Marks and devious Semikoli, but the Little Blind
-        Text didn’t listen.
-      </b2b-paragraph>
-    </b2b-scrollable-container>
+  return html `
+    <b2b-scrollable-container
+      style=${`width: ${testWidth}; height: ${testHeight}`}>
+      <b2b-paragraph style="white-space: ${testWhiteSpace}">
+        Far far away, behind the word mountains, far from the countries Vokalia
+        and Consonantia, there live the blind texts. Separated they live in
+        Bookmarksgrove right at the coast of the Semantics, a large language
+        ocean. A small river named Duden flows by their place and supplies it
+        with the necessary regelialia. It is a paradisematic country, in which
+        roasted parts of sentences fly into your mouth. Even the all-powerful
+        Pointing has no control about the blind texts it is an almost
+        unorthographic life One day however a small line of blind text by the
+        name of Lorem Ipsum decided to leave for the far World of Grammar. The
+        Big Oxmox advised her not to do so, because there were thousands of bad
+        Commas, wild Question Marks and devious Semikoli, but the Little Blind
+        Text didn’t listen.
+      </b2b-paragraph>
+    </b2b-scrollable-container>
   `;
 };
 const defaultArgs = {

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

@@ -16,8 +16,8 @@ describe('B2B-Search', () => {
   };
   beforeEach(async () => {
     page = await newE2EPage();
-    await page.setContent(`
-      <b2b-search placeholder='search here'></b2b-search>
+    await page.setContent(`
+      <b2b-search placeholder='search here'></b2b-search>
     `);
   });
   it('should register input text when enabled', async () => {

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

@@ -21,14 +21,14 @@ const Template = ({ placeholder, optionsList, disabled }) => {
   };
   // contenteditable is needed so that storybook won't interpret the key inputs as shortcuts
   // it also works when the component has the word 'input' in its name
-  return html `<div style="width: 300px; display: block">
-    <b2b-search
-      contenteditable
-      data-testid="search-element"
-      disabled=${disabled}
-      placeholder="${placeholder}"
-      .optionsList=${optionsList}
-      @b2b-input=${onInput}></b2b-search>
+  return html `<div style="width: 300px; display: block">
+    <b2b-search
+      contenteditable
+      data-testid="search-element"
+      disabled=${disabled}
+      placeholder="${placeholder}"
+      .optionsList=${optionsList}
+      @b2b-input=${onInput}></b2b-search>
   </div>`;
 };
 const defaultArgs = {
@@ -42,13 +42,13 @@ story010Search.storyName = 'Search';
 story010Search.parameters = {
   docs: {
     source: {
-      code: dedent `
-      <b2b-search 
-        placeholder="Search here"
-        optionsList={[]} 
-        onB2b-input={onInput}
-        onB2b-search={onSearch}
-        onB2b-option-selected={onOptionSelected}>
+      code: dedent `
+      <b2b-search 
+        placeholder="Search here"
+        optionsList={[]} 
+        onB2b-input={onInput}
+        onB2b-search={onSearch}
+        onB2b-option-selected={onOptionSelected}>
       </b2b-search>`,
     },
   },
@@ -60,20 +60,20 @@ story020SearchDisabled.args = {
   disabled: true,
 };
 const CustomSearchTemplate = ({ placeholder, optionsList }) => {
-  return html `<div style="width: 500px; height: 130px;">
-    <b2b-input-group>
-      <b2b-input-list
-        slot="start"
-        placeholder="${placeholder}"
-        .optionsList=${optionsList}></b2b-input-list>
-      <b2b-dropdown style="width: 50%" invalid error="an error">
-        <option value="one">Option 1</option>
-        <option value="one">Option 2</option>
-      </b2b-dropdown>
-      <b2b-button slot="end" variant="primary">
-        <b2b-icon icon="b2b_icon-search"></b2b-icon>
-      </b2b-button>
-    </b2b-input-group>
+  return html `<div style="width: 500px; height: 130px;">
+    <b2b-input-group>
+      <b2b-input-list
+        slot="start"
+        placeholder="${placeholder}"
+        .optionsList=${optionsList}></b2b-input-list>
+      <b2b-dropdown style="width: 50%" invalid error="an error">
+        <option value="one">Option 1</option>
+        <option value="one">Option 2</option>
+      </b2b-dropdown>
+      <b2b-button slot="end" variant="primary">
+        <b2b-icon icon="b2b_icon-search"></b2b-icon>
+      </b2b-button>
+    </b2b-input-group>
   </div>`;
 };
 export const story030CustomSearch = CustomSearchTemplate.bind({});

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

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

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

@@ -13,10 +13,10 @@ const Template = ({ alignment }) => {
       margin: `margin: 10px 0;`,
       width: null,
     };
-  return html `<div style="${styles.display}">
-    <p style="${styles.margin} ${styles.width}">${content}</p>
-    <b2b-separator alignment="${alignment}"></b2b-separator>
-    <p style="${styles.margin} ${styles.width}">${content}</p>
+  return html `<div style="${styles.display}">
+    <p style="${styles.margin} ${styles.width}">${content}</p>
+    <b2b-separator alignment="${alignment}"></b2b-separator>
+    <p style="${styles.margin} ${styles.width}">${content}</p>
   </div>`;
 };
 const defaultArgs = {

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

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

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

@@ -10,32 +10,32 @@ describe('B2B-Spinner', () => {
   }
   it('should render spinner with default attributes', async () => {
     const page = await renderPage(h("b2b-spinner", null));
-    expect(page.root).toEqualHtml(`
-      <b2b-spinner>
-        <mock:shadow-root>
-          <div class="b2b-spinner b2b-spinner--size-100 b2b-spinner--color-primary"></div>
-        </mock:shadow-root>
-      </b2b-spinner>
+    expect(page.root).toEqualHtml(`
+      <b2b-spinner>
+        <mock:shadow-root>
+          <div class="b2b-spinner b2b-spinner--size-100 b2b-spinner--color-primary"></div>
+        </mock:shadow-root>
+      </b2b-spinner>
 		`);
   });
   it('should render spinner with small size', async () => {
     const page = await renderPage(h("b2b-spinner", { size: "50" }));
-    expect(page.root).toEqualHtml(`
-      <b2b-spinner>
-        <mock:shadow-root>
-          <div class="b2b-spinner b2b-spinner--size-50 b2b-spinner--color-primary"></div>
-        </mock:shadow-root>
-    	</b2b-spinner>
+    expect(page.root).toEqualHtml(`
+      <b2b-spinner>
+        <mock:shadow-root>
+          <div class="b2b-spinner b2b-spinner--size-50 b2b-spinner--color-primary"></div>
+        </mock:shadow-root>
+    	</b2b-spinner>
 		`);
   });
   it('should render spinner with inverse color', async () => {
     const page = await renderPage(h("b2b-spinner", { color: "inverse" }));
-    expect(page.root).toEqualHtml(`
-      <b2b-spinner>
-        <mock:shadow-root>
-          <div class="b2b-spinner b2b-spinner--size-100 b2b-spinner--color-inverse"></div>
-        </mock:shadow-root>
-    	</b2b-spinner>
+    expect(page.root).toEqualHtml(`
+      <b2b-spinner>
+        <mock:shadow-root>
+          <div class="b2b-spinner b2b-spinner--size-100 b2b-spinner--color-inverse"></div>
+        </mock:shadow-root>
+    	</b2b-spinner>
 		`);
   });
 });