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

package/dist/collection/components/textarea/textarea.js

@@ -4,16 +4,6 @@ import { h, Host, } from "@stencil/core";
  */
 export class B2BTextareaComponent {
     constructor() {
-        /** Adds an asterisk at the end of the label to signify that the field is required. */
-        this.required = false;
-        /** Whether or not the textarea is disabled. Per default it is false.  */
-        this.disabled = false;
-        /** Whether or not the textarea should be displayed with error styles. Per default it is false. */
-        this.invalid = false;
-        /** Whether or not the textarea should be automatically focused on page load. Per default it is false. */
-        this.focusOnLoad = false;
-        /** The value of the textarea. Per default it is null. */
-        this.value = null;
         // TODO: find a way to test it maybe when migrating to new testing framework
         this.handleFormData = (event) => {
             if (this.name != undefined) {
@@ -34,6 +24,19 @@ export class B2BTextareaComponent {
             }
             this.b2bInput.emit(input);
         };
+        this.label = undefined;
+        this.required = false;
+        this.placeholder = undefined;
+        this.disabled = false;
+        this.invalid = false;
+        this.focusOnLoad = false;
+        this.resize = undefined;
+        this.hint = undefined;
+        this.error = undefined;
+        this.value = null;
+        this.name = undefined;
+        this.maxLength = undefined;
+        this.height = '';
     }
     connectedCallback() {
         const form = this.hostElement.closest('form');
@@ -42,10 +45,10 @@ export class B2BTextareaComponent {
         }
     }
     render() {
-        return (h(Host, { key: '2ed8f90f83aaa5715b456b0dae3290eed8e7d04f', class: {
+        return (h(Host, { key: '042a4bf18160c76a15600b82150a0b5550c4cdb4', class: {
                 'b2b-textarea': true,
                 'b2b-textarea--error': this.invalid && !this.disabled,
-            } }, this.label && (h("b2b-input-label", { key: '0f9b8f9af7f37a96bbfaadada34c1298ec151290', id: this.name, required: this.required }, this.label)), h("textarea", { key: '7d986f39e76e500476a04a0d43cc3eb4638de5a4', class: "textarea-input", "aria-labelledby": this.name, style: Object.assign({ height: this.height }, (Boolean(this.resize) && { resize: this.resize })), value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autoFocus: this.focusOnLoad, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, maxLength: this.maxLength }), (this.hint !== undefined && !this.invalid) ||
+            } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("textarea", { key: '84b0f3066733ed1a02d485baf91a9e90646778b0', class: "textarea-input", "aria-labelledby": this.name, style: Object.assign({ height: this.height }, (Boolean(this.resize) && { resize: this.resize })), value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autoFocus: this.focusOnLoad, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, maxLength: this.maxLength }), (this.hint !== undefined && !this.invalid) ||
             (this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : ('')));
     }
     static get is() { return "b2b-textarea"; }
@@ -64,7 +67,6 @@ export class B2BTextareaComponent {
         return {
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -77,13 +79,11 @@ export class B2BTextareaComponent {
                     "tags": [],
                     "text": "The textarea label. This is optional."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "label",
                 "reflect": false
             },
             "required": {
                 "type": "boolean",
-                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -96,14 +96,12 @@ export class B2BTextareaComponent {
                     "tags": [],
                     "text": "Adds an asterisk at the end of the label to signify that the field is required."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "required",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "placeholder": {
                 "type": "string",
-                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -116,13 +114,11 @@ export class B2BTextareaComponent {
                     "tags": [],
                     "text": "The textarea placeholder. It is optional and undefined by default."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "placeholder",
                 "reflect": true
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -135,14 +131,12 @@ export class B2BTextareaComponent {
                     "tags": [],
                     "text": "Whether or not the textarea is disabled. Per default it is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "invalid": {
                 "type": "boolean",
-                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -155,14 +149,12 @@ export class B2BTextareaComponent {
                     "tags": [],
                     "text": "Whether or not the textarea should be displayed with error styles. Per default it is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "invalid",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "focusOnLoad": {
                 "type": "boolean",
-                "attribute": "focus-on-load",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -175,14 +167,12 @@ export class B2BTextareaComponent {
                     "tags": [],
                     "text": "Whether or not the textarea should be automatically focused on page load. Per default it is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "focus-on-load",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "resize": {
                 "type": "string",
-                "attribute": "resize",
                 "mutable": false,
                 "complexType": {
                     "original": "| 'unset'\n    | 'none'\n    | 'vertical'\n    | 'horizontal'",
@@ -195,13 +185,11 @@ export class B2BTextareaComponent {
                     "tags": [],
                     "text": "If and how the textarea is resizable. Per default it is resizable in both directions."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "resize",
                 "reflect": true
             },
             "hint": {
                 "type": "string",
-                "attribute": "hint",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -214,13 +202,11 @@ export class B2BTextareaComponent {
                     "tags": [],
                     "text": "An optional hint for the textarea. Per default it is undefined."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "hint",
                 "reflect": false
             },
             "error": {
                 "type": "string",
-                "attribute": "error",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -233,13 +219,11 @@ export class B2BTextareaComponent {
                     "tags": [],
                     "text": "An optional error message that is displayed when the textarea is invalid. Per default it is undefined."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "error",
                 "reflect": false
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -252,14 +236,12 @@ export class B2BTextareaComponent {
                     "tags": [],
                     "text": "The value of the textarea. Per default it is null."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "value",
                 "reflect": true,
                 "defaultValue": "null"
             },
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -272,13 +254,11 @@ export class B2BTextareaComponent {
                     "tags": [],
                     "text": "The name of the textarea. This is used to programmatically group it into a form."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "name",
                 "reflect": true
             },
             "maxLength": {
                 "type": "number",
-                "attribute": "max-length",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -291,13 +271,11 @@ export class B2BTextareaComponent {
                     "tags": [],
                     "text": "The maximum input length. Characters entered after that will not be appended to the input value."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "max-length",
                 "reflect": true
             },
             "height": {
                 "type": "string",
-                "attribute": "height",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -310,9 +288,9 @@ export class B2BTextareaComponent {
                     "tags": [],
                     "text": "The height of the text area"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false
+                "attribute": "height",
+                "reflect": false,
+                "defaultValue": "''"
             }
         };
     }

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

@@ -0,0 +1,44 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('b2b-toggle-button', () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-toggle-button checked="false" name="toggle-1" label="Unselected" value="1"></b2b-toggle-button>`);
+    });
+    it('renders', async () => {
+        const element = await page.find('b2b-toggle-button');
+        expect(element).not.toBeNull();
+    });
+    it('checks the button when selected', async () => {
+        const element = await page.find('b2b-toggle-button');
+        await element.click();
+        await page.waitForChanges();
+        const check = await element.getProperty('checked');
+        expect(check).toBe(true);
+    });
+    it('emits its value when selected', async () => {
+        const element = await page.find('b2b-toggle-button');
+        const spy = await page.spyOnEvent('b2b-change');
+        await element.click();
+        await page.waitForChanges();
+        expect(spy).toHaveReceivedEvent();
+        expect(spy).toHaveReceivedEventDetail({ value: '1' });
+    });
+    it('should not emit when a button is disabled', async () => {
+        const element = await page.find('b2b-toggle-button');
+        await element.setProperty('disabled', true);
+        await page.waitForChanges();
+        const spy = await page.spyOnEvent('b2b-change');
+        await element.click();
+        await page.waitForChanges();
+        expect(spy).not.toHaveReceivedEvent();
+    });
+    it('should not emit when a button is already selected', async () => {
+        const element = await page.find('b2b-toggle-button');
+        const spy = await page.spyOnEvent('b2b-change');
+        await element.click();
+        await element.click();
+        await page.waitForChanges();
+        expect(spy).toHaveReceivedEventTimes(1);
+    });
+});

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

@@ -1,10 +1,6 @@
 import { h, Host, } from "@stencil/core";
 export class B2bToggleButtonComponent {
     constructor() {
-        /** Whether or not the toggle button is currently checked. Per default it is false. */
-        this.checked = false;
-        /** Whether or not the toggle button is currently disabled. Per default it is false. */
-        this.disabled = false;
         this.onClick = (ev) => {
             ev.preventDefault();
             if (this.disabled || this.checked) {
@@ -25,18 +21,23 @@ export class B2bToggleButtonComponent {
                 toggle.checked = false;
             });
         };
+        this.label = undefined;
+        this.name = undefined;
+        this.checked = false;
+        this.disabled = false;
+        this.value = undefined;
     }
     getSiblingToggles() {
         return Array.from(document.querySelectorAll(`b2b-toggle-button[name="${this.name}"]`)).filter((toggle) => toggle.value !== this.value);
     }
     render() {
-        return (h(Host, { key: '5d7fb470ff38eeed74aca5479731fc7ba1af2b9f', onClick: this.onClick }, h("span", { key: '135f338e88e68ed352cc1f32a708c5586ec3fcf5', class: {
+        return (h(Host, { key: '72a27c904d091619da19fb5dab2da588326688df', onClick: this.onClick }, h("span", { key: '165c0254153fa4a3bff6d76f58f844830344f8c2', class: {
                 'b2b-toggle-button': true,
                 'b2b-toggle-button--disabled': this.disabled,
-            } }, h("input", { key: '2f3d9715acbb6d8e144e5f52ebc83e23e1ffbebf', tabindex: 0, class: {
+            } }, h("input", { key: '0d6ee278d5db9f360e7ab466daeaebced17063e6', tabindex: 0, class: {
                 'b2b-toggle-button__input': true,
                 'b2b-toggle-button__input--disabled': this.disabled,
-            }, "aria-labelledby": this.name, type: "radio", checked: this.checked && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { key: '62b01d38a1d70a4e010188e9e17e2ef1841f813d', id: this.name, tabindex: -1, class: {
+            }, "aria-labelledby": this.name, type: "radio", checked: this.checked && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { key: 'f073f01258465886c9fe70e99692ffee84db38bc', id: this.name, tabindex: -1, class: {
                 'b2b-toggle-button__label': true,
                 'b2b-toggle-button__label--disabled': this.disabled,
                 'b2b-toggle-button__label--checked': this.checked && !this.disabled,
@@ -58,7 +59,6 @@ export class B2bToggleButtonComponent {
         return {
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -71,13 +71,11 @@ export class B2bToggleButtonComponent {
                     "tags": [],
                     "text": "The label of the toggle button. This is required"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "label",
                 "reflect": false
             },
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -90,13 +88,11 @@ export class B2bToggleButtonComponent {
                     "tags": [],
                     "text": "The name of the toggle button. Use it to group toggle buttons together and assign the label to the input element for better accessibility. This is required."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "name",
                 "reflect": true
             },
             "checked": {
                 "type": "boolean",
-                "attribute": "checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -109,14 +105,12 @@ export class B2bToggleButtonComponent {
                     "tags": [],
                     "text": "Whether or not the toggle button is currently checked. Per default it is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "checked",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -129,14 +123,12 @@ export class B2bToggleButtonComponent {
                     "tags": [],
                     "text": "Whether or not the toggle button is currently disabled. Per default it is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -149,8 +141,7 @@ export class B2bToggleButtonComponent {
                     "tags": [],
                     "text": "The value of the toggle button. This will be emitted when the toggle button is clicked. This is required"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "value",
                 "reflect": true
             }
         };

package/dist/collection/components/toggle-chip/toggle-chip.e2e.js

@@ -0,0 +1,47 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('b2b-toggle-chip', () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-toggle-chip label="test-chip" name="chip-1" value="chip-1"></b2b-toggle-chip>`);
+    });
+    it('renders', async () => {
+        const element = await page.find('b2b-toggle-chip');
+        expect(element).not.toBeNull();
+    });
+    it('emits the assigned value when clicked', async () => {
+        const element = await page.find('b2b-toggle-chip');
+        const selectedSpy = await page.spyOnEvent('b2b-selected');
+        await element.click();
+        await page.waitForChanges();
+        expect(await element.getProperty('active')).toBe(true);
+        expect(selectedSpy).toHaveReceivedEventDetail({ value: 'chip-1' });
+    });
+    it('emits the assigned value when navigated with a keyboard', async () => {
+        const element = await page.find('b2b-toggle-chip');
+        const selectedSpy = await page.spyOnEvent('b2b-selected');
+        await page.keyboard.press('Tab');
+        await page.keyboard.press('Enter');
+        await page.waitForChanges();
+        expect(await element.getProperty('active')).toBe(true);
+        expect(selectedSpy).toHaveReceivedEventDetail({ value: 'chip-1' });
+    });
+    it('does not emit if it is already active', async () => {
+        const element = await page.find('b2b-toggle-chip');
+        const selectedSpy = await page.spyOnEvent('b2b-selected');
+        await element.setProperty('active', true);
+        await page.waitForChanges();
+        await element.click();
+        await page.waitForChanges();
+        expect(selectedSpy).not.toHaveReceivedEvent();
+    });
+    it('does not emit if it is disabled', async () => {
+        const element = await page.find('b2b-toggle-chip');
+        const selectedSpy = await page.spyOnEvent('b2b-selected');
+        await element.setAttribute('disabled', true);
+        await page.waitForChanges();
+        await element.click();
+        await page.waitForChanges();
+        expect(selectedSpy).not.toHaveReceivedEvent();
+    });
+});

package/dist/collection/components/toggle-chip/toggle-chip.js

@@ -1,10 +1,6 @@
 import { h, Host } from "@stencil/core";
 export class B2BToggleChipComponent {
     constructor() {
-        /** Whether or not the chip is currently active. Per default, it is false. */
-        this.active = false;
-        /** Whether or not the chip is currently disabled. Per default it is false. */
-        this.disabled = false;
         this.onClick = () => {
             if (this.disabled) {
                 return;
@@ -29,13 +25,18 @@ export class B2BToggleChipComponent {
                 }
             }
         };
+        this.label = undefined;
+        this.value = undefined;
+        this.name = undefined;
+        this.active = false;
+        this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '09cf06a146da0e7bbb9b1250a70892e01e4347b1' }, h("span", { key: 'cd72c41c37af52d5b8160da42aba9c0129bddc46', onClick: this.onClick, onKeyDown: this.onKeyDown, class: {
+        return (h(Host, { key: 'f1666274891d2a73ec37becece45d1b756bc7510' }, h("span", { key: '3ac8a839ad72f507a091863d06ee7620ea4795d1', onClick: this.onClick, onKeyDown: this.onKeyDown, class: {
                 'b2b-toggle-chip': true,
-            } }, h("input", { key: 'f37fe0f51601657fcd7959e029d732a3710eb7a7', "aria-labelledby": this.name, tabindex: this.disabled ? -1 : 0, class: {
+            } }, h("input", { key: '6233e0b013d8136768f46f771ecc76bbfd663794', "aria-labelledby": this.name, tabindex: this.disabled ? -1 : 0, class: {
                 'b2b-toggle-chip__input': true,
-            }, type: "checkbox", checked: this.active && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { key: '63441947e13ab34f0d7a303792ff0adeaaf82ca6', id: this.name, tabIndex: -1, class: {
+            }, type: "checkbox", checked: this.active && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { key: 'b100606b6bba9648d00b2660de654d045dc8aa85', id: this.name, tabIndex: -1, class: {
                 'b2b-toggle-chip__label': true,
                 'b2b-toggle-chip__label--active': this.active && !this.disabled,
                 'b2b-toggle-chip__label--disabled': this.disabled,
@@ -58,7 +59,6 @@ export class B2BToggleChipComponent {
         return {
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -71,13 +71,11 @@ export class B2BToggleChipComponent {
                     "tags": [],
                     "text": "The chip's label. This is required."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "label",
                 "reflect": false
             },
             "value": {
                 "type": "any",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -90,13 +88,11 @@ export class B2BToggleChipComponent {
                     "tags": [],
                     "text": "The value associated with the toggle chip. This is emitted when the chip is interacted with."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "value",
                 "reflect": true
             },
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -109,13 +105,11 @@ export class B2BToggleChipComponent {
                     "tags": [],
                     "text": "The name of the toggle chip. Use it to group toggle buttons together and assign the label to the input element for better accessibility. This is required."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "name",
                 "reflect": true
             },
             "active": {
                 "type": "boolean",
-                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -128,14 +122,12 @@ export class B2BToggleChipComponent {
                     "tags": [],
                     "text": "Whether or not the chip is currently active. Per default, it is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "active",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -148,8 +140,7 @@ export class B2BToggleChipComponent {
                     "tags": [],
                     "text": "Whether or not the chip is currently disabled. Per default it is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             }

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

@@ -0,0 +1,65 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('b2b-toggle-group', () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-toggle-group name="toggle-group-1">
+          <b2b-toggle-button name="toggle-group-1" value="1" label="One"></b2b-toggle-button>
+          <b2b-toggle-button name="toggle-group-1" value="2" label="Two"></b2b-toggle-button>
+        </b2b-toggle-group>`);
+    });
+    it('should render the toggle group', async () => {
+        const element = await page.find('b2b-toggle-group');
+        expect(element).not.toBeNull();
+    });
+    it('should emit an event when a button is checked', async () => {
+        const firstButton = await page.find({ text: 'Two' });
+        const changeSpy = await page.spyOnEvent('b2b-group-change');
+        await firstButton.click();
+        await page.waitForChanges();
+        expect(changeSpy).toHaveReceivedEvent();
+        expect(changeSpy).toHaveReceivedEventDetail({ value: '2' });
+    });
+    it('should not emit an event when the checked button is already selected', async () => {
+        const firstButton = await page.find({ text: 'Two' });
+        const changeSpy = await page.spyOnEvent('b2b-group-change');
+        await firstButton.click();
+        await firstButton.click();
+        await page.waitForChanges();
+        expect(changeSpy).toHaveReceivedEventTimes(1);
+    });
+    it('should not select any buttons if the group is disabled', async () => {
+        const element = await page.find('b2b-toggle-group');
+        const changeSpy = await page.spyOnEvent('b2b-group-change');
+        await element.setProperty('disabled', true);
+        await page.waitForChanges();
+        const button = await page.find({ text: 'One' });
+        await button.click();
+        await page.waitForChanges();
+        expect(changeSpy).not.toHaveReceivedEvent();
+    });
+    it('should navigate and select a button by using a keyboard', async () => {
+        await page.keyboard.press('Tab');
+        await page.waitForChanges();
+        await page.keyboard.press('Space');
+        await page.waitForChanges();
+        const element = await page.find('b2b-toggle-button');
+        const checked = await element.getProperty('checked');
+        expect(checked).toBe(true);
+    });
+    it('should select first element if none other is pre-selected ', async () => {
+        const firstButton = await page.find('b2b-toggle-button');
+        const isSelected = await firstButton.getProperty('checked');
+        expect(isSelected).toBe(true);
+    });
+    it('should not select first element if any element is pre-selected ', async () => {
+        page = await newE2EPage();
+        await page.setContent(`<b2b-toggle-group name="toggle-group-1">
+          <b2b-toggle-button name="toggle-group-1" value="1" label="One"></b2b-toggle-button>
+          <b2b-toggle-button checked name="toggle-group-1" value="2" label="Two"></b2b-toggle-button>
+        </b2b-toggle-group>`);
+        const firstButton = await page.find('b2b-toggle-button');
+        const isSelected = await firstButton.getProperty('checked');
+        expect(isSelected).toBe(false);
+    });
+});