@otto-de/b2b-core-components 1.30.0 → 1.31.1

package/dist/collection/components/snackbar/snackbar.js

@@ -1,16 +1,6 @@
 import { h, Host, } from "@stencil/core";
 export class SnackbarComponent {
     constructor() {
-        /** The type of snackbar. Default is info. */
-        this.type = 'info';
-        /** Whether the snackbar is currently visible. Set to true to display the snackbar. */
-        this.opened = false;
-        /** Whether snackbar is show for limited time. Default is true. Error snackbars cannot be timed. */
-        this.timed = true;
-        /** How long is snackbar shown. Default value is 5000 ms. */
-        this.duration = 5000;
-        /** Whether the snackbar has a Call-to-Action. Per default, it is false. */
-        this.hasAction = false;
         /** when user hovers over snackbar, the timer is paused. */
         this.handleMouseEnter = () => {
             if (this.timeoutId && this.timed && this.type !== 'error') {
@@ -54,6 +44,14 @@ export class SnackbarComponent {
         this.handleActionClick = () => {
             this.b2bActionClick.emit();
         };
+        this.description = undefined;
+        this.type = 'info';
+        this.opened = false;
+        this.timed = true;
+        this.duration = 5000;
+        this.hasAction = false;
+        this.actionLabel = undefined;
+        this.width = undefined;
     }
     onVisibleChange(newValue) {
         if (newValue) {
@@ -88,17 +86,17 @@ export class SnackbarComponent {
         clearTimeout(this.timeoutId);
     }
     render() {
-        return (h(Host, { key: '0636ae82f1f44f2960367d2667c7948af3d61a04', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '428d1e22c09dc375c25bcf986603e73ed83dce64', class: {
+        return (h(Host, { key: 'b22311754d7186da6012cec8f82d251f3cbafd83', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '810bcfee20a5b9a88586ad1cb98c685819381847', class: {
                 'b2b-snackbar': true,
                 [`b2b-snackbar--${this.type}`]: true,
                 'b2b-snackbar--opened': this.opened,
-            }, style: this.width ? { width: this.width } : { width: 'auto' } }, h("div", { key: '327fd8cdf05e25fd1f0c7feaf72497471c7146d4', class: "b2b-snackbar__content" }, h("span", { key: '9f9586b27a236ad59d1d464cf805bc8302bdd510', class: { [`b2b-snackbar--${this.type}__icon`]: true } }, this.chooseIcon()), h("p", { key: '296e30330f06bdfad65c4d9248e0aa812c9de360', class: "b2b-snackbar__content__description" }, this.description)), this.isActionPresent() && (h("div", { key: 'd1777085d235dae35d72675507c5d995a1914de2', class: {
+            }, style: this.width ? { width: this.width } : { width: 'auto' } }, h("div", { key: 'd8e5cb8e8cda32693ae68055cb06918f51f1688d', class: "b2b-snackbar__content" }, h("span", { key: '8e31a914129f255151569eaf0e806f337b085f6d', class: { [`b2b-snackbar--${this.type}__icon`]: true } }, this.chooseIcon()), h("p", { key: '3a6faa0dd08da3ea8f830bc59116ab50b574d770', class: "b2b-snackbar__content__description" }, this.description)), this.isActionPresent() && (h("div", { class: {
                 'b2b-snackbar__action': true,
                 [`b2b-snackbar__action--${this.type}`]: true,
-            }, onClick: this.handleActionClick }, h("a", { key: 'c6b6d08ddd14ca60b1c266b48c1da72d9e4e11fc' }, this.actionLabel))), h("div", { key: '0186b1efc237baae871bec063a40289f4ce3572d', class: {
+            }, onClick: this.handleActionClick }, h("a", null, this.actionLabel))), h("div", { key: '362ad1e19f9ea031f1ef5991da654d47a0a1f701', class: {
                 'b2b-snackbar__close-icon': true,
                 [`b2b-snackbar__close-icon--${this.type}`]: true,
-            }, onClick: this.close }, h("b2b-icon-100", { key: 'd2567439989cfe451d3022a9bb138f9d1ecf03d9', clickable: true, size: 24, icon: "b2b_icon-close" })))));
+            }, onClick: this.close }, h("b2b-icon-100", { key: '1913c3bfc643fb845568c4388cdd300f6c3df8a7', clickable: true, size: 24, icon: "b2b_icon-close" })))));
     }
     static get is() { return "b2b-snackbar"; }
     static get encapsulation() { return "shadow"; }
@@ -116,7 +114,6 @@ export class SnackbarComponent {
         return {
             "description": {
                 "type": "string",
-                "attribute": "description",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -129,13 +126,11 @@ export class SnackbarComponent {
                     "tags": [],
                     "text": "Text on the snackbar."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "description",
                 "reflect": false
             },
             "type": {
                 "type": "string",
-                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "'info' | 'success' | 'warning' | 'error'",
@@ -148,14 +143,12 @@ export class SnackbarComponent {
                     "tags": [],
                     "text": "The type of snackbar. Default is info."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "type",
                 "reflect": false,
                 "defaultValue": "'info'"
             },
             "opened": {
                 "type": "boolean",
-                "attribute": "opened",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -168,14 +161,12 @@ export class SnackbarComponent {
                     "tags": [],
                     "text": "Whether the snackbar is currently visible. Set to true to display the snackbar."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "opened",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "timed": {
                 "type": "boolean",
-                "attribute": "timed",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -188,14 +179,12 @@ export class SnackbarComponent {
                     "tags": [],
                     "text": "Whether snackbar is show for limited time. Default is true. Error snackbars cannot be timed."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "timed",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "duration": {
                 "type": "number",
-                "attribute": "duration",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -208,14 +197,12 @@ export class SnackbarComponent {
                     "tags": [],
                     "text": "How long is snackbar shown. Default value is 5000 ms."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "duration",
                 "reflect": false,
                 "defaultValue": "5000"
             },
             "hasAction": {
                 "type": "boolean",
-                "attribute": "has-action",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -228,14 +215,12 @@ export class SnackbarComponent {
                     "tags": [],
                     "text": "Whether the snackbar has a Call-to-Action. Per default, it is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "has-action",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "actionLabel": {
                 "type": "string",
-                "attribute": "action-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -248,13 +233,11 @@ export class SnackbarComponent {
                     "tags": [],
                     "text": "Text for the Call-to-Action link."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "action-label",
                 "reflect": false
             },
             "width": {
                 "type": "string",
-                "attribute": "width",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -267,8 +250,7 @@ export class SnackbarComponent {
                     "tags": [],
                     "text": "Width of the snackbar can be specified in px. If not provided, the default value is auto, which will adjust the width to fit the content."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "width",
                 "reflect": false
             }
         };

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

@@ -0,0 +1,12 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B-Spinner', () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-spinner></b2b-spinner>`);
+    });
+    it('should render spinner component', async () => {
+        const element = await page.find('b2b-spinner');
+        expect(element).not.toBeNull();
+    });
+});

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

@@ -5,13 +5,11 @@ import { h } from "@stencil/core";
  */
 export class SpinnerComponent {
     constructor() {
-        /** The size of the spinner. */
         this.size = '100';
-        /** The color of the spinner. */
         this.color = 'primary';
     }
     render() {
-        return (h("div", { key: 'dcae9a0d97aa5f9bb4f5d52d9ae3302bfecf5f81', class: {
+        return (h("div", { key: '4260cc2e742b9d3a77fc1739f7de248ee70ffd69', class: {
                 'b2b-spinner': true,
                 ['b2b-spinner--size-' + this.size]: true,
                 ['b2b-spinner--color-' + this.color]: true,
@@ -33,7 +31,6 @@ export class SpinnerComponent {
         return {
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'50' | '100' | '200'",
@@ -46,14 +43,12 @@ export class SpinnerComponent {
                     "tags": [],
                     "text": "The size of the spinner."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'100'"
             },
             "color": {
                 "type": "string",
-                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "'primary' | 'secondary' | 'inverse'",
@@ -66,8 +61,7 @@ export class SpinnerComponent {
                     "tags": [],
                     "text": "The color of the spinner."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "color",
                 "reflect": false,
                 "defaultValue": "'primary'"
             }

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

@@ -0,0 +1,41 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { h } from "@stencil/core";
+import { SpinnerComponent } from "./spinner";
+describe('B2B-Spinner', () => {
+    async function renderPage(template) {
+        return newSpecPage({
+            components: [SpinnerComponent],
+            template: () => template,
+        });
+    }
+    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>
+		`);
+    });
+    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>
+		`);
+    });
+    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>
+		`);
+    });
+});

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

@@ -0,0 +1,35 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B Tab', () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-tab>Tab 1</b2b-tab>`);
+    });
+    it('should render the tab component', async () => {
+        const element = await page.find('b2b-tab');
+        expect(element).not.toBeNull();
+    });
+    it('should emit when selected changes', async () => {
+        const selectedSpy = await page.spyOnEvent('b2b-change');
+        await page.$eval('b2b-tab', (element) => {
+            element.selected = true;
+        });
+        await page.waitForChanges();
+        expect(selectedSpy).toHaveReceivedEvent();
+    });
+    it('should focus on the tab if it is selected', async () => {
+        const element = await page.find('b2b-tab');
+        const selectedBefore = await element.getProperty('selected');
+        expect(selectedBefore).toBe(false);
+        await page.$eval('b2b-tab', (element) => {
+            element.selected = true;
+        });
+        await page.waitForChanges();
+        const selectedAfter = await element.getProperty('selected');
+        expect(selectedAfter).toBe(true);
+        const focus = await page.evaluate(() => {
+            return document.activeElement.ariaSelected;
+        });
+        expect(focus).not.toBeNull();
+    });
+});

package/dist/collection/components/tab/tab.js

@@ -3,11 +3,8 @@ let i = 0;
 export class B2bTabComponent {
     constructor() {
         this.generatedId = i++;
-        /** Whether or not the tab is currently selected. Per default it is false. */
         this.selected = false;
-        /** Whether or not the tab is currently disabled. Per default it is false. */
         this.disabled = false;
-        /** Whether or not the tab has an error. Per default, it is false. */
         this.invalid = false;
     }
     propagateChange(newValue) {
@@ -20,12 +17,12 @@ export class B2bTabComponent {
         }
     }
     render() {
-        return (h(Host, { key: 'd4fb6d906bb49dc4fb3908b96ebdf647cca17cbd', id: `b2b-tab-${this.generatedId}`, "aria-role": "tab", "aria-selected": this.selected, role: this.disabled ? false : 'tab', disabled: this.disabled, tabindex: this.disabled ? false : this.selected ? '0' : '-1' }, h("span", { key: 'c70e11223805322d111073682ece5115c7374772', class: {
+        return (h(Host, { key: '8aa1b1ae2ad6d9b2f77cbd882602caade8cc8355', id: `b2b-tab-${this.generatedId}`, "aria-role": "tab", "aria-selected": this.selected, role: this.disabled ? false : 'tab', disabled: this.disabled, tabindex: this.disabled ? false : this.selected ? '0' : '-1' }, h("span", { key: '896a95b6fe0e389c380bed8d7755ef04467470c2', class: {
                 'b2b-tab': true,
                 'b2b-tab--selected': this.selected,
                 'b2b-tab--disabled': this.disabled,
                 'b2b-tab--error': this.invalid,
-            } }, h("slot", { key: '41b30f1662648b54a60b89583c856da27e2a89dc' }))));
+            } }, h("slot", { key: '87e0d4dc4f316d16efde95c2e9f4c9fa63db984d' }))));
     }
     static get is() { return "b2b-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -43,7 +40,6 @@ export class B2bTabComponent {
         return {
             "selected": {
                 "type": "boolean",
-                "attribute": "selected",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -56,14 +52,12 @@ export class B2bTabComponent {
                     "tags": [],
                     "text": "Whether or not the tab is currently selected. Per default it is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "selected",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -76,14 +70,12 @@ export class B2bTabComponent {
                     "tags": [],
                     "text": "Whether or not the tab is currently disabled. Per default it is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "invalid": {
                 "type": "boolean",
-                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -96,8 +88,7 @@ export class B2bTabComponent {
                     "tags": [],
                     "text": "Whether or not the tab has an error. Per default, it is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "invalid",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -0,0 +1,31 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { h } from "@stencil/core";
+import { B2bTabComponent } from "./tab";
+it('should match the snapshot', async () => {
+    const page = await newSpecPage({
+        components: [B2bTabComponent],
+        template: () => h("b2b-tab", null, "Tab 1"),
+    });
+    expect(page.root).toMatchSnapshot();
+});
+it('should not be selected by default', async () => {
+    const page = await newSpecPage({
+        components: [B2bTabComponent],
+        template: () => h("b2b-tab", null, "Tab 1"),
+    });
+    expect(page.rootInstance.selected).toBe(false);
+});
+it('should not have an error by default', async () => {
+    const page = await newSpecPage({
+        components: [B2bTabComponent],
+        template: () => h("b2b-tab", null, "Tab 1"),
+    });
+    expect(page.rootInstance.invalid).toBe(false);
+});
+it('should not be disabled by default', async () => {
+    const page = await newSpecPage({
+        components: [B2bTabComponent],
+        template: () => h("b2b-tab", null, "Tab 1"),
+    });
+    expect(page.rootInstance.disabled).toBe(false);
+});

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

@@ -0,0 +1,99 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B Tab Group', () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`
+        <b2b-tab-group>
+        <b2b-tab slot="tab">
+          First Tab
+        </b2b-tab>
+        <b2b-tab-panel slot="panel">
+          First Panel
+        </b2b-tab-panel>
+        <b2b-tab slot="tab">
+          Second Tab
+        </b2b-tab>
+        <b2b-tab-panel slot="panel">
+          Second Panel
+        </b2b-tab-panel>
+        <b2b-tab slot="tab" disabled="true">
+        Disabled Tab
+      </b2b-tab>
+      <b2b-tab-panel slot="panel">
+        Disabled Panel
+      </b2b-tab-panel>
+      </b2b-tab-group>
+        `);
+    });
+    it('should render the tab group', async () => {
+        const element = await page.find('b2b-tab-group');
+        expect(element).not.toBeNull();
+    });
+    it('should select the first tab by default', async () => {
+        const tab = await page.find('b2b-tab');
+        const selected = await tab.getProperty('selected');
+        expect(selected).toBe(true);
+    });
+    it('should show the panel associated with the tab that is selected', async () => {
+        const tab = await page.find({ text: 'First Tab' });
+        const selected = await tab.getProperty('selected');
+        expect(selected).toBe(true);
+        const panel = await page.find({ text: 'First Panel' });
+        expect(await panel.isVisible()).toBe(true);
+    });
+    it('should not select a disabled tab', async () => {
+        const tab = await page.find({ text: 'Disabled Tab' });
+        const panel = await page.find({ text: 'Disabled Panel' });
+        const selected = await tab.getProperty('selected');
+        expect(selected).toBe(false);
+        await tab.click();
+        await page.waitForChanges();
+        const selectedAfter = await tab.getProperty('selected');
+        expect(selectedAfter).toBe(false);
+        expect(await panel.isVisible()).toBe(false);
+    });
+    it('should navigate to the next enabled tab using the keyboard', async () => {
+        const tabs = await page.findAll('b2b-tab');
+        expect(await tabs[0].getProperty('selected')).toBe(true);
+        await page.keyboard.down('ArrowRight');
+        await page.waitForChanges();
+        expect(await tabs[1].getProperty('selected')).toBe(true);
+        await page.keyboard.press('ArrowRight');
+        await page.waitForChanges();
+        expect(await tabs[2].getProperty('selected')).toBe(false);
+        expect(await tabs[0].getProperty('selected')).toBe(true);
+    });
+    it('should navigate to the previous tab using the keyboard', async () => {
+        const tabs = await page.findAll('b2b-tab');
+        expect(await tabs[0].getProperty('selected')).toBe(true);
+        await page.keyboard.down('ArrowLeft');
+        await page.waitForChanges();
+        // second tab is selected because it is first enabled from last
+        expect(await tabs[1].getProperty('selected')).toBe(true);
+        await page.keyboard.press('ArrowLeft');
+        await page.waitForChanges();
+        // first tab is selected because last tab is disabled
+        expect(await tabs[0].getProperty('selected')).toBe(true);
+    });
+    it('should emit when a new tab is selected', async () => {
+        const changeSpy = await page.spyOnEvent('b2b-selected');
+        const secondTab = await page.find({ text: 'Second Tab' });
+        await secondTab.click();
+        await page.waitForChanges();
+        expect(changeSpy).toHaveReceivedEvent();
+    });
+    it('should not navigate when external navigation is used', async () => {
+        const tabGroup = await page.find('b2b-tab-group');
+        await tabGroup.setProperty('useRouter', true);
+        await page.waitForChanges();
+        const tabs = await page.findAll('b2b-tab');
+        expect(await tabs[0].getProperty('selected')).toBe(true);
+        expect(await tabs[0].getAttribute('aria-controls')).not.toBeDefined;
+        await page.keyboard.press('ArrowRight');
+        await page.waitForChanges();
+        await tabs[1].click();
+        await page.waitForChanges();
+        expect(await tabs[1].getProperty('selected')).toBe(false);
+    });
+});

package/dist/collection/components/tab-group/tab-group.js

@@ -5,9 +5,6 @@ const HOME = 'Home';
 const END = 'End';
 export class B2bTabGroupComponent {
     constructor() {
-        /** Determines if the Tab Group will do it's own navigation. Per default, it will use internal navigation.
-         * Set it to true if you want to use external, route-based navigation. */
-        this.useRouter = false;
         this.getPreviousTab = () => {
             const tabs = this.getAllEnabledTabs();
             const index = tabs.findIndex(tab => tab.selected) - 1;
@@ -65,6 +62,7 @@ export class B2bTabGroupComponent {
             tabs.forEach(tab => (tab.selected = false));
             panels.forEach(panel => (panel.hidden = true));
         };
+        this.useRouter = false;
     }
     handleClick(event) {
         if (this.useRouter) {
@@ -123,7 +121,7 @@ export class B2bTabGroupComponent {
         });
     }
     render() {
-        return (h(Host, { key: 'fa7eee42c069a31f2c866b97f9113de8c1afcb82' }, h("slot", { key: '966fb2b75c5666421bc17097c9d333c44431d989', name: "tab" }), h("b2b-separator", { key: 'a900f03e00ffbd66fd786d69aed72f457cd6234a' }), h("slot", { key: 'f32d4846fc68660fd7670d8fc22b7ada7d3b4b74', name: "panel" })));
+        return (h(Host, { key: '82c0d22d7738ecbbe49dc358a81759da436389ea' }, h("slot", { key: '073c3086c66b28ee4d90e38dfc3920ca58deccfd', name: "tab" }), h("b2b-separator", { key: 'd9906b47b55895b61883767817cd761b10225dd0' }), h("slot", { key: 'f01db3ddcdcb289170dbb8865bf6873dd9442b60', name: "panel" })));
     }
     static get is() { return "b2b-tab-group"; }
     static get encapsulation() { return "shadow"; }
@@ -131,7 +129,6 @@ export class B2bTabGroupComponent {
         return {
             "useRouter": {
                 "type": "boolean",
-                "attribute": "use-router",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -144,8 +141,7 @@ export class B2bTabGroupComponent {
                     "tags": [],
                     "text": "Determines if the Tab Group will do it's own navigation. Per default, it will use internal navigation.\nSet it to true if you want to use external, route-based navigation."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "use-router",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/dist/collection/components/tab-panel/tab-panel.e2e.js

@@ -0,0 +1,12 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B Tab Panel', () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-tab-panel name="tab-1">Tab 1</b2b-tab-panel>`);
+    });
+    it('should render the tab panel', async () => {
+        const element = await page.find('b2b-tab-panel');
+        expect(element).not.toBeNull();
+    });
+});

package/dist/collection/components/tab-panel/tab-panel.js

@@ -5,7 +5,7 @@ export class B2bTabPanelComponent {
         this.generatedId = i++;
     }
     render() {
-        return (h(Host, { key: 'e92ca5dc2cb66f73b3c1bc72e1587aa888d77d0d', id: `b2b-tab-panel-${this.generatedId}`, role: "tabpanel" }, h("div", { key: 'c96969d01deba2a60cbc605be6f36101a5ba89a4', class: "b2b-tab-panel" }, h("slot", { key: '11cc6086bd635e43635fe46fd4c4cd095c2bb786' }))));
+        return (h(Host, { key: 'af2fa2c4c2a00694c838ad5efcf293fde97a3cd4', id: `b2b-tab-panel-${this.generatedId}`, role: "tabpanel" }, h("div", { key: '3d14cdc1c06a1986cb4e3b23fce7d23fd907e6a1', class: "b2b-tab-panel" }, h("slot", { key: '76b6383394425c71055d82569dab910066265643' }))));
     }
     static get is() { return "b2b-tab-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab-panel/tab-panel.spec.js

@@ -0,0 +1,10 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { h } from "@stencil/core";
+import { B2bTabPanelComponent } from "./tab-panel";
+it('should match the snapshot', async () => {
+    const page = await newSpecPage({
+        components: [B2bTabPanelComponent],
+        template: () => h("b2b-tab-panel", null, "Tab 1"),
+    });
+    expect(page.root).toMatchSnapshot();
+});