@lion/ui 0.23.0 → 0.24.0

package/components/pagination/test/lion-pagination.test.js

@@ -1,7 +1,6 @@
 import { fixture as _fixture, expect } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 import sinon from 'sinon';
-
 import '@lion/ui/define/lion-pagination.js';
 
 /**
@@ -9,8 +8,7 @@ import '@lion/ui/define/lion-pagination.js';
  * @typedef {import('lit').TemplateResult} TemplateResult
  */
 
-const fixture = /** @type {(arg: TemplateResult) => Promise<LionPagination>} */ (_fixture);
-
+const fixture = /** @type {(arg: TemplateResult) => Promise<LionPagination>} */ _fixture;
 describe('Pagination', () => {
   it('has states for count and current', async () => {
     const el = await fixture(html` <lion-pagination count="4"></lion-pagination> `);
@@ -22,93 +20,77 @@ describe('Pagination', () => {
     expect(el.getAttribute('count')).to.equal('8');
     expect(el.getAttribute('current')).to.equal('2');
   });
-
   it('disables the previous button if on first page', async () => {
     const el = await fixture(html` <lion-pagination count="4"></lion-pagination> `);
-    const buttons = Array.from(
-      /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('button'),
-    );
+    const buttons = Array.from(/** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('button'));
     expect(buttons[0]).to.has.attribute('disabled');
   });
-
   it('disables the next button if on last page', async () => {
     const el = await fixture(html` <lion-pagination count="4" current="4"></lion-pagination> `);
-    const buttons = Array.from(
-      /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('button'),
-    );
+    const buttons = Array.from(/** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('button'));
     expect(buttons[buttons.length - 1]).to.has.attribute('disabled');
   });
-
   describe('User interaction', () => {
     it('can go to previous page with previous button', async () => {
       const el = await fixture(html` <lion-pagination count="6" current="2"></lion-pagination> `);
       const buttons = Array.from(
-        /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('button'),
+        /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('button'),
       );
       buttons[0].click();
       expect(el.current).to.equal(1);
     });
-
     it('can go to next page with next button', async () => {
       const el = await fixture(html` <lion-pagination count="6" current="2"></lion-pagination> `);
       const buttons = Array.from(
-        /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('button'),
+        /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('button'),
       );
       buttons[buttons.length - 1].click();
       expect(el.current).to.equal(3);
     });
-
     it('goes to the page when clicking on its button', async () => {
       const el = await fixture(html` <lion-pagination count="6" current="2"></lion-pagination> `);
       const buttons = Array.from(
-        /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('button'),
+        /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('button'),
       );
       buttons[5].click();
       expect(el.current).to.equal(5);
     });
-
     it('fires current-changed event when interacting with the pagination', async () => {
       const changeSpy = sinon.spy();
       const el = await fixture(html`
         <lion-pagination count="6" current="2" @current-changed=${changeSpy}></lion-pagination>
       `);
       const buttons = Array.from(
-        /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('button'),
+        /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('button'),
       );
       const previous = buttons[0];
       const next = buttons[buttons.length - 1];
       const page5 = buttons[5];
-
       previous.click();
       expect(changeSpy).to.have.callCount(1);
-
       next.click();
       expect(changeSpy).to.have.callCount(2);
-
       page5.click();
       expect(changeSpy).to.have.callCount(3);
-
       el.current = 3;
       expect(changeSpy).to.have.callCount(4);
     });
-
     it('does NOT fire current-changed event when clicking on a current page number', async () => {
       const changeSpy = sinon.spy();
       const el = await fixture(html`
         <lion-pagination count="6" current="2" @current-changed=${changeSpy}></lion-pagination>
       `);
-      const page2 = /** @type {HTMLElement} */ (
-        el.shadowRoot?.querySelector("button[aria-current='true']")
-      );
+      const page2 =
+        /** @type {HTMLElement} */
+        el.shadowRoot?.querySelector("button[aria-current='true']");
       page2.click();
       expect(changeSpy).to.not.be.called;
       expect(el.current).to.equal(2);
     });
-
     it('should announce next and previous page using `next()` and `previous()`', async () => {
       const el = await fixture(html` <lion-pagination count="6" current="2"></lion-pagination> `);
       const buttons = Array.from(
-        /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('button'),
+        /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('button'),
       );
       expect(buttons[2].getAttribute('aria-live')).to.equal('polite');
       el.next();
@@ -120,7 +102,6 @@ describe('Pagination', () => {
       expect(buttons[3].getAttribute('aria-live')).to.equal('off');
       expect(buttons[2].getAttribute('aria-live')).to.equal('polite');
     });
-
     it('should goto next and previous page using `next()` and `previous()`', async () => {
       const el = await fixture(html` <lion-pagination count="6" current="2"></lion-pagination> `);
       el.next();
@@ -128,7 +109,6 @@ describe('Pagination', () => {
       el.previous();
       expect(el.current).to.equal(2);
     });
-
     it('should goto first and last page using `first()` and `last()`', async () => {
       const el = await fixture(html` <lion-pagination count="5" current="2"></lion-pagination> `);
       expect(el.current).to.equal(2);
@@ -137,7 +117,6 @@ describe('Pagination', () => {
       el.last();
       expect(el.current).to.equal(5);
     });
-
     it('should goto 7 page using `goto()`', async () => {
       const el = await fixture(html` <lion-pagination count="10" current="2"></lion-pagination> `);
       expect(el.current).to.equal(2);
@@ -145,18 +124,16 @@ describe('Pagination', () => {
       expect(el.current).to.equal(7);
     });
   });
-
   describe('Accessibility', () => {
     it('sets aria-current to the current page', async () => {
       const el = await fixture(html` <lion-pagination count="3"></lion-pagination> `);
       const buttons = Array.from(
-        /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('button'),
+        /** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('button'),
       );
       // button[0] is the previous button
       expect(buttons[1].getAttribute('aria-current')).to.equal('true');
       expect(buttons[2].getAttribute('aria-current')).to.equal('false');
       expect(buttons[3].getAttribute('aria-current')).to.equal('false');
-
       el.current = 2;
       await el.updateComplete;
       expect(buttons[1].getAttribute('aria-current')).to.equal('false');
@@ -164,44 +141,35 @@ describe('Pagination', () => {
       expect(buttons[3].getAttribute('aria-current')).to.equal('false');
     });
   });
-
   describe('Ellipsis display', () => {
     it('should not show ellipsis when count is visiblePages + 1 (count=6, visiblePages=5)', async () => {
       const el = await fixture(html` <lion-pagination count="6" current="1"></lion-pagination> `);
-      const navItems = Array.from(/** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('li'));
+      const navItems = Array.from(/** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('li'));
       // Check that no ellipsis is rendered (no <span> elements with '...')
-      const spans = Array.from(
-        /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('li span'),
-      );
+      const spans = Array.from(/** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('li span'));
       expect(spans.length).to.equal(0);
 
       // There should be 8 nav items: previous button + 6 page buttons + next button
       expect(navItems.length).to.equal(8);
     });
-
     it('should not show ellipsis when count is visiblePages + 2 (count=7, visiblePages=5)', async () => {
       const el = await fixture(html` <lion-pagination count="7" current="1"></lion-pagination> `);
       // Check that no ellipsis is rendered (no <span> elements with '...')
-      const spans = Array.from(
-        /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('li span'),
-      );
+      const spans = Array.from(/** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('li span'));
       expect(spans.length).to.equal(0);
 
       // There should be 9 nav items: previous button + 7 page buttons + next button
-      const navItems = Array.from(/** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('li'));
+      const navItems = Array.from(/** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('li'));
       expect(navItems.length).to.equal(9);
     });
-
     it('should show ellipsis when count is visiblePages + 3 (count=8, visiblePages=5)', async () => {
       const el = await fixture(html` <lion-pagination count="8" current="1"></lion-pagination> `);
       // Check that ellipsis is rendered (should have <span> elements with '...')
-      const spans = Array.from(
-        /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('li span'),
-      );
+      const spans = Array.from(/** @type {ShadowRoot} */ el.shadowRoot.querySelectorAll('li span'));
       expect(spans.length).to.be.greaterThan(0);
 
       // Verify the ellipsis contains '...'
-      const ellipsisText = Array.from(spans).map(span => span.textContent);
+      const ellipsisText = Array.from(spans).map((span) => span.textContent);
       expect(ellipsisText).to.include('...');
     });
   });

package/components/progress-indicator/src/LionProgressIndicator.js

@@ -21,15 +21,20 @@ export class LionProgressIndicator extends LocalizeMixin(LitElement) {
       max: {
         type: Number,
       },
-      _ariaLabel: { attribute: 'aria-label', type: String },
-      _ariaLabelledby: { attribute: 'aria-labelledby', type: String },
+      _ariaLabel: {
+        attribute: 'aria-label',
+        type: String,
+      },
+      _ariaLabelledby: {
+        attribute: 'aria-labelledby',
+        type: String,
+      },
     };
   }
-
   static get localizeNamespaces() {
     return [
       {
-        'lion-progress-indicator': /** @param {string} locale */ locale => {
+        'lion-progress-indicator': /** @param {string} locale */ (locale) => {
           switch (locale) {
             case 'bg-BG':
             case 'bg':
@@ -100,7 +105,7 @@ export class LionProgressIndicator extends LocalizeMixin(LitElement) {
    * // TODO: check if this is a false positive or if we can improve
    * @configure ReactiveElement
    */
-  static enabledWarnings = super.enabledWarnings?.filter(w => w !== 'change-in-update') || [];
+  static enabledWarnings = super.enabledWarnings?.filter((w) => w !== 'change-in-update') || [];
 
   /**
    * In case of a determinate progress-indicator it returns the progress percentage
@@ -116,7 +121,6 @@ export class LionProgressIndicator extends LocalizeMixin(LitElement) {
     }
     return ((this.value - this.min) / (this.max - this.min)) * 100;
   }
-
   constructor() {
     super();
     this.value = 0;
@@ -132,11 +136,9 @@ export class LionProgressIndicator extends LocalizeMixin(LitElement) {
   _graphicTemplate() {
     return nothing;
   }
-
   render() {
     return this._graphicTemplate();
   }
-
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'progressbar');
@@ -148,7 +150,6 @@ export class LionProgressIndicator extends LocalizeMixin(LitElement) {
    */
   updated(changedProperties) {
     super.updated(changedProperties);
-
     if (this.indeterminate) {
       if (changedProperties.has('_ariaLabel') || changedProperties.has('_ariaLabelledby')) {
         this._setDefaultLabel();
@@ -188,7 +189,6 @@ export class LionProgressIndicator extends LocalizeMixin(LitElement) {
       }
     }
   }
-
   onLocaleUpdated() {
     super.onLocaleUpdated();
     // only set default label for indeterminate
@@ -196,13 +196,11 @@ export class LionProgressIndicator extends LocalizeMixin(LitElement) {
       this._setDefaultLabel();
     }
   }
-
   _resetAriaValueAttributes() {
     this.removeAttribute('aria-valuenow');
     this.removeAttribute('aria-valuemin');
     this.removeAttribute('aria-valuemax');
   }
-
   _setDefaultLabel() {
     const localizeManager = getLocalizeManager();
     if (this._ariaLabelledby) {

package/components/progress-indicator/test/lion-progress-indicator.test.js

@@ -1,6 +1,5 @@
 import { html } from 'lit';
 import { expect, fixture as _fixture } from '@open-wc/testing';
-
 import '@lion/ui/define/lion-progress-indicator.js';
 
 /**
@@ -8,21 +7,18 @@ import '@lion/ui/define/lion-progress-indicator.js';
  * @typedef {import('lit').TemplateResult} TemplateResult
  */
 
-const fixture = /** @type {(arg: TemplateResult) => Promise<LionProgressIndicator>} */ (_fixture);
-
+const fixture = /** @type {(arg: TemplateResult) => Promise<LionProgressIndicator>} */ _fixture;
 describe('lion-progress-indicator', () => {
   describe('indeterminate', async () => {
     it('is indeterminate when has no value attribute', async () => {
       const el = await fixture(html` <lion-progress-indicator></lion-progress-indicator> `);
       expect(el.indeterminate).to.be.true;
     });
-
     it('adds a label by default', async () => {
       const el = await fixture(html` <lion-progress-indicator></lion-progress-indicator> `);
       await el.localizeNamespacesLoaded;
       expect(el.getAttribute('aria-label')).to.equal('Loading');
     });
-
     it('can override a label with "aria-label"', async () => {
       const el = await fixture(html`
         <lion-progress-indicator aria-label="foo"></lion-progress-indicator>
@@ -35,7 +31,6 @@ describe('lion-progress-indicator', () => {
       await el.updateComplete;
       expect(el.getAttribute('aria-label')).to.equal('Loading');
     });
-
     it('can override a label with "aria-labelledby"', async () => {
       const el = await fixture(html`
         <lion-progress-indicator aria-labelledby="foo-id"></lion-progress-indicator>
@@ -51,7 +46,6 @@ describe('lion-progress-indicator', () => {
       expect(el.hasAttribute('aria-labelledby')).to.be.false;
       expect(el.getAttribute('aria-label')).to.equal('Loading');
     });
-
     it('loosses default aria-label when switch to determinate state', async () => {
       const el = await fixture(html` <lion-progress-indicator></lion-progress-indicator> `);
       await el.localizeNamespacesLoaded;
@@ -60,7 +54,6 @@ describe('lion-progress-indicator', () => {
       await el.updateComplete;
       expect(el.hasAttribute('aria-label')).to.be.false;
     });
-
     it('keeps own aria-label when switch to determinate state', async () => {
       const el = await fixture(html`
         <lion-progress-indicator aria-label="foo"></lion-progress-indicator>
@@ -71,7 +64,6 @@ describe('lion-progress-indicator', () => {
       expect(el.getAttribute('aria-label')).to.equal('foo');
     });
   });
-
   describe('determinate', async () => {
     it('is determinate when it has a value', async () => {
       const el = await fixture(html`
@@ -79,7 +71,6 @@ describe('lion-progress-indicator', () => {
       `);
       expect(el.indeterminate).to.be.false;
     });
-
     it('can update value', async () => {
       const el = await fixture(html`
         <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>
@@ -89,7 +80,6 @@ describe('lion-progress-indicator', () => {
       await el.updateComplete;
       expect(el.getAttribute('aria-valuenow')).to.equal('30');
     });
-
     it('can update min', async () => {
       const el = await fixture(html`
         <lion-progress-indicator value="50" aria-label="foo"></lion-progress-indicator>
@@ -99,7 +89,6 @@ describe('lion-progress-indicator', () => {
       await el.updateComplete;
       expect(el.getAttribute('aria-valuemin')).to.equal('30');
     });
-
     it('can update max', async () => {
       const el = await fixture(html`
         <lion-progress-indicator value="50" aria-label="foo"></lion-progress-indicator>
@@ -109,7 +98,6 @@ describe('lion-progress-indicator', () => {
       await el.updateComplete;
       expect(el.getAttribute('aria-valuemax')).to.equal('70');
     });
-
     it('min & max limits value', async () => {
       const el = await fixture(html`
         <lion-progress-indicator value="150" aria-label="foo"></lion-progress-indicator>
@@ -132,7 +120,6 @@ describe('lion-progress-indicator', () => {
       `);
       expect(el.getAttribute('aria-valuetext')).to.equal('8% (34 minutes) remaining');
     });
-
     it('becomes indeterminate if value gets removed', async () => {
       const el = await fixture(
         html`<lion-progress-indicator value="30"></lion-progress-indicator> `,
@@ -142,7 +129,6 @@ describe('lion-progress-indicator', () => {
       expect(el.indeterminate).to.be.true;
       expect(el.getAttribute('aria-label')).to.equal('Loading');
     });
-
     it("becomes indeterminate if value ain't a number", async () => {
       const el = await fixture(
         html`<lion-progress-indicator value="30"></lion-progress-indicator> `,
@@ -158,7 +144,6 @@ describe('lion-progress-indicator', () => {
       expect(el.hasAttribute('aria-valuemax')).to.be.false;
       expect(el.getAttribute('aria-label')).to.equal('Loading');
     });
-
     it('can update value to 0', async () => {
       const el = await fixture(
         html`<lion-progress-indicator value="0"></lion-progress-indicator> `,
@@ -174,7 +159,6 @@ describe('lion-progress-indicator', () => {
       expect(el.indeterminate).to.be.false;
     });
   });
-
   describe('Subclasers', () => {
     it('can use _progressPercentage getter to get the progress percentage', async () => {
       const el = await fixture(html`
@@ -183,20 +167,17 @@ describe('lion-progress-indicator', () => {
       expect(el._progressPercentage).to.equal(20);
     });
   });
-
   describe('Accessibility', () => {
     it('by default', async () => {
       const el = await fixture(html` <lion-progress-indicator></lion-progress-indicator> `);
       expect(el.getAttribute('role')).to.equal('progressbar');
     });
-
     describe('indeterminate', () => {
       it('passes a11y test', async () => {
         const el = await fixture(html` <lion-progress-indicator></lion-progress-indicator> `);
         await expect(el).to.be.accessible();
       });
     });
-
     describe('determinate', () => {
       it('passes a11y test', async () => {
         const el = await fixture(html`
@@ -204,14 +185,12 @@ describe('lion-progress-indicator', () => {
         `);
         await expect(el).to.be.accessible();
       });
-
       it('once value is set', async () => {
         const el = await fixture(html`
           <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>
         `);
         expect(el.getAttribute('aria-valuenow')).to.equal('25');
       });
-
       it('allows to set min & max values', async () => {
         const el = await fixture(html`
           <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator>

package/components/radio-group/src/LionRadioGroup.js

@@ -18,7 +18,7 @@ export class LionRadioGroup extends ChoiceGroupMixin(FormGroupMixin(LitElement))
    */
   resetGroup() {
     let initValue;
-    this.formElements.forEach(child => {
+    this.formElements.forEach((child) => {
       if (typeof child.resetGroup === 'function') {
         child.resetGroup();
       } else if (typeof child.reset === 'function') {
@@ -30,7 +30,6 @@ export class LionRadioGroup extends ChoiceGroupMixin(FormGroupMixin(LitElement))
       }
     });
     this.modelValue = initValue;
-
     this.resetInteractionState();
   }
 }

package/components/radio-group/test/lion-radio-group-integrations.test.js

@@ -1,7 +1,6 @@
 import { runChoiceGroupMixinSuite } from '@lion/ui/form-core-test-suites.js';
 import '@lion/ui/define/lion-radio-group.js';
 import '@lion/ui/define/lion-radio.js';
-
 runChoiceGroupMixinSuite({
   parentTagString: 'lion-radio-group',
   childTagString: 'lion-radio',

package/components/radio-group/test/lion-radio-group.test.js

@@ -8,8 +8,7 @@ import '@lion/ui/define/lion-radio.js';
  * @typedef {import('../src/LionRadio.js').LionRadio} LionRadio
  * @typedef {import('lit').TemplateResult} TemplateResult
  */
-const fixture = /** @type {(arg: TemplateResult) => Promise<LionRadioGroup>} */ (_fixture);
-
+const fixture = /** @type {(arg: TemplateResult) => Promise<LionRadioGroup>} */ _fixture;
 describe('<lion-radio-group>', () => {
   describe('resetGroup', () => {
     // TODO move to FormGroupMixin test suite and let CheckboxGroup make use of them
@@ -22,36 +21,36 @@ describe('<lion-radio-group>', () => {
       `);
       el.formElements[0].checked = true;
       expect(el.modelValue).to.deep.equal('male');
-
       el.resetGroup();
       expect(el.modelValue).to.deep.equal('');
     });
-
     it('restores default values if changes were made', async () => {
       const el = await fixture(html`
         <lion-radio-group name="gender" label="Gender">
           <lion-radio label="Male" .choiceValue=${'male'}></lion-radio>
-          <lion-radio label="Female" .modelValue=${{ value: 'female', checked: true }}></lion-radio>
+          <lion-radio
+            label="Female"
+            .modelValue=${{
+              value: 'female',
+              checked: true,
+            }}
+          ></lion-radio>
           <lion-radio label="Other" .choiceValue=${'other'}></lion-radio>
         </lion-radio-group>
       `);
       el.formElements[0].checked = true;
       expect(el.modelValue).to.deep.equal('male');
-
       el.resetGroup();
       expect(el.modelValue).to.deep.equal('female');
-
       el.formElements[2].checked = true;
       expect(el.modelValue).to.deep.equal('other');
-
       el.resetGroup();
       await el.formElements[1].updateComplete;
       await el.updateComplete;
       expect(el.modelValue).to.deep.equal('female');
     });
-
     it('restores default values if changes were made to a group containing options with formatters', async () => {
-      const formatter = /** @type {(modelValue: { value: string}) => string} */ modelValue =>
+      const formatter = /** @type {(modelValue: { value: string}) => string} */ (modelValue) =>
         modelValue.value.charAt(0);
       const el = await fixture(html`
         <lion-radio-group name="gender" label="Gender">
@@ -59,27 +58,26 @@ describe('<lion-radio-group>', () => {
           <lion-radio
             label="Female"
             .formatter=${formatter}
-            .modelValue=${{ value: 'female', checked: true }}
+            .modelValue=${{
+              value: 'female',
+              checked: true,
+            }}
           ></lion-radio>
           <lion-radio label="Other" .formatter=${formatter} .choiceValue=${'other'}></lion-radio>
         </lion-radio-group>
       `);
       el.formElements[0].checked = true;
       expect(el.modelValue).to.deep.equal('male');
-
       el.resetGroup();
       expect(el.modelValue).to.deep.equal('female');
-
       el.formElements[2].checked = true;
       expect(el.modelValue).to.deep.equal('other');
-
       el.resetGroup();
       await el.formElements[1].updateComplete;
       await el.updateComplete;
       expect(el.modelValue).to.deep.equal('female');
     });
   });
-
   it('should have role = radiogroup', async () => {
     const el = await fixture(html`
       <lion-radio-group label="Gender" name="gender">
@@ -89,7 +87,6 @@ describe('<lion-radio-group>', () => {
     `);
     expect(el.getAttribute('role')).to.equal('radiogroup');
   });
-
   it(`becomes "touched" once a single element of the group changes`, async () => {
     const el = await fixture(html`
       <lion-radio-group name="myGroup">
@@ -97,39 +94,44 @@ describe('<lion-radio-group>', () => {
         <lion-radio></lion-radio>
       </lion-radio-group>
     `);
-
     el.formElements[1].focus();
     expect(el.touched).to.equal(false, 'initially, touched state is false');
-    /** @type {LionRadio} */ (el.children[1]).checked = true;
+    /** @type {LionRadio} */
+    el.children[1].checked = true;
     expect(el.touched, `focused via a mouse click, group should be touched`).to.be.true;
   });
-
   it('allows selection of only one radio in a named group', async () => {
     const el = await fixture(html`
       <lion-radio-group name="gender">
-        <lion-radio .modelValue="${{ value: 'male', checked: false }}"></lion-radio>
-        <lion-radio .modelValue="${{ value: 'female', checked: false }}"></lion-radio>
+        <lion-radio
+          .modelValue="${{
+            value: 'male',
+            checked: false,
+          }}"
+        ></lion-radio>
+        <lion-radio
+          .modelValue="${{
+            value: 'female',
+            checked: false,
+          }}"
+        ></lion-radio>
       </lion-radio-group>
     `);
     const male = el.formElements[0];
     const maleInput = male.querySelector('input');
     const female = el.formElements[1];
     const femaleInput = female.querySelector('input');
-
     expect(male.checked).to.equal(false);
     expect(female.checked).to.equal(false);
-
     maleInput.focus();
     maleInput.click();
     expect(male.checked).to.equal(true);
     expect(female.checked).to.equal(false);
-
     femaleInput.focus();
     femaleInput.click();
     expect(male.checked).to.equal(false);
     expect(female.checked).to.equal(true);
   });
-
   it('is accessible', async () => {
     const el = await fixture(html`
       <lion-radio-group label="My group" name="gender">
@@ -139,7 +141,6 @@ describe('<lion-radio-group>', () => {
     `);
     await expect(el).to.be.accessible();
   });
-
   it('is accessible when the group is disabled', async () => {
     const el = await fixture(html`
       <lion-radio-group label="My group" name="gender" disabled>
@@ -149,7 +150,6 @@ describe('<lion-radio-group>', () => {
     `);
     await expect(el).to.be.accessible();
   });
-
   it('is accessible when an option is disabled', async () => {
     const el = await fixture(html`
       <lion-radio-group label="My group" name="gender">

package/components/radio-group/test/lion-radio-integrations.test.js

@@ -1,4 +1,5 @@
 import '@lion/ui/define/lion-radio.js';
 import { runChoiceInputMixinSuite } from '@lion/ui/form-core-test-suites.js';
-
-runChoiceInputMixinSuite({ tagString: 'lion-radio' });
+runChoiceInputMixinSuite({
+  tagString: 'lion-radio',
+});