@lion/ui 0.22.0 → 0.24.0

package/components/drawer/src/LionDrawer.js

@@ -1,7 +1,6 @@
 import { html } from 'lit';
 import { LionCollapsible } from '@lion/ui/collapsible.js';
 import { drawerStyle } from './drawerStyle.js';
-
 const EVENT = {
   TRANSITION_END: 'transitionend',
   TRANSITION_START: 'transitionstart',
@@ -36,27 +35,21 @@ export class LionDrawer extends LionCollapsible {
 
   /** @private */
   __toggle;
-
   constructor() {
     super();
-
     this.__toggle = () => {
       // @ts-ignore [ts7-2565] TS7 checks definite assignment on this inferred field; Lit reactive property: read through a typed local instead (e.g. const next = this.x ?? DEFAULT) - a class field would shadow the accessor Lit creates from static properties
       this.opened = !this.opened;
     };
   }
-
   connectedCallback() {
     super.connectedCallback();
-
     if (!this.hasAttribute('position')) {
       this.position = 'left';
     }
-
     if (this._contentNode) {
       this._contentNode.style.setProperty('display', '');
     }
-
     this.__setBoundaries();
   }
 
@@ -70,14 +63,11 @@ export class LionDrawer extends LionCollapsible {
       this._openedChanged();
     }
   }
-
   static get styles() {
     return [drawerStyle];
   }
-
   __setBoundaries() {
     const host = this.shadowRoot?.host;
-
     if (this.position === 'top') {
       this.minHeight = host ? getComputedStyle(host).getPropertyValue('--min-height') : '0px';
       this.maxHeight = host ? getComputedStyle(host).getPropertyValue('--max-height') : '0px';
@@ -89,10 +79,8 @@ export class LionDrawer extends LionCollapsible {
       this.minHeight = 'auto';
       this.maxHeight = 'fit-content';
     }
-
     setTimeout(() => {
       const prop = this.position === 'top' ? 'width' : 'height';
-
       if (this.__contentNode) {
         this.__contentNode.style.setProperty(prop, '');
       }
@@ -107,11 +95,9 @@ export class LionDrawer extends LionCollapsible {
     const stale = this.position;
     this._position = position;
     this.setAttribute('position', position);
-
     this.__setBoundaries();
     this.requestUpdate('position', stale);
   }
-
   get position() {
     return this._position ?? 'left';
   }
@@ -126,12 +112,13 @@ export class LionDrawer extends LionCollapsible {
     const min = this.position === 'top' ? this.minHeight : this.minWidth;
     const max = this.position === 'top' ? this.maxHeight : this.maxWidth;
     const prop = this.position === 'top' ? 'height' : 'width';
-
-    contentNode.style.setProperty(prop, /** @type {string} */ (min));
+    contentNode.style.setProperty(prop, /** @type {string} */ min);
     // eslint-disable-next-line no-promise-executor-return
-    await new Promise(resolve => requestAnimationFrame(() => resolve(true)));
-    contentNode.style.setProperty(prop, /** @type {string} */ (max));
-    await this._waitForTransition({ contentNode });
+    await new Promise((resolve) => requestAnimationFrame(() => resolve(true)));
+    contentNode.style.setProperty(prop, /** @type {string} */ max);
+    await this._waitForTransition({
+      contentNode,
+    });
   }
 
   /**
@@ -148,12 +135,12 @@ export class LionDrawer extends LionCollapsible {
     ) {
       return;
     }
-
     const min = this.position === 'top' ? this.minHeight : this.minWidth;
     const prop = this.position === 'top' ? 'height' : 'width';
-
-    contentNode.style.setProperty(prop, /** @type {string} */ (min));
-    await this._waitForTransition({ contentNode });
+    contentNode.style.setProperty(prop, /** @type {string} */ min);
+    await this._waitForTransition({
+      contentNode,
+    });
   }
 
   /**
@@ -163,13 +150,12 @@ export class LionDrawer extends LionCollapsible {
    * @returns {Promise<void>} transition event
    */
   _waitForTransition({ contentNode }) {
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
       const transitionStarted = () => {
         contentNode.removeEventListener(EVENT.TRANSITION_START, transitionStarted);
         this.transitioning = true;
       };
       contentNode.addEventListener(EVENT.TRANSITION_START, transitionStarted);
-
       const transitionEnded = () => {
         contentNode.removeEventListener(EVENT.TRANSITION_END, transitionEnded);
         this.transitioning = false;
@@ -183,38 +169,36 @@ export class LionDrawer extends LionCollapsible {
    * @protected
    */
   get __contentNode() {
-    return /** @type {HTMLElement} */ (this.shadowRoot?.querySelector('.container'));
+    return /** @type {HTMLElement} */ this.shadowRoot?.querySelector('.container');
   }
-
   get _contentWidth() {
     const size = this.__contentNode?.getBoundingClientRect().width || 0;
     return `${size}px`;
   }
-
   get _contentHeight() {
     const size = this.__contentNode?.getBoundingClientRect().height || 0;
     return `${size}px`;
   }
-
   _openedChanged() {
     this._updateContentSize();
     if (this._invokerNode) {
       this._invokerNode.setAttribute('aria-expanded', `${this.opened}`);
     }
-
     this.dispatchEvent(new CustomEvent('opened-changed'));
   }
-
   async _updateContentSize() {
     if (this.__contentNode) {
       if (this.opened) {
-        await this._showAnimation({ contentNode: this.__contentNode });
+        await this._showAnimation({
+          contentNode: this.__contentNode,
+        });
       } else {
-        await this._hideAnimation({ contentNode: this.__contentNode });
+        await this._hideAnimation({
+          contentNode: this.__contentNode,
+        });
       }
     }
   }
-
   render() {
     return html`
       <div class="container">

package/components/drawer/src/drawerStyle.js

@@ -1,5 +1,4 @@
 import { css } from 'lit';
-
 export const drawerStyle = css`
   :host {
     display: block;

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

@@ -6,8 +6,7 @@ import '@lion/ui/define/lion-drawer.js';
  * @typedef {import('../src/LionDrawer.js').LionDrawer} LionDrawer
  * @typedef {import('lit').TemplateResult} TemplateResult
  */
-const fixture = /** @type {(arg: TemplateResult) => Promise<LionDrawer>} */ (_fixture);
-
+const fixture = /** @type {(arg: TemplateResult) => Promise<LionDrawer>} */ _fixture;
 const template = html`
   <lion-drawer>
     <button slot="invoker">Open</button>
@@ -15,65 +14,52 @@ const template = html`
     <div slot="content" class="drawer">This is the content of the drawer</div>
   </lion-drawer>
 `;
-
 describe('<lion-drawer>', () => {
   describe('Drawer', () => {
     it('sets position to "left" by default', async () => {
       const drawer = await fixture(template);
       expect(drawer.position).to.equal('left');
     });
-
     it('has [position] attribute which serves as styling hook', async () => {
       const drawer = await fixture(template);
       expect(drawer).to.have.attribute('position').equal('left');
     });
-
     it('sets the minimum and maximum width when position=left', async () => {
       const drawer = await fixture(template);
       const minWidth = getComputedStyle(drawer).getPropertyValue('--min-width');
       const maxWidth = getComputedStyle(drawer).getPropertyValue('--max-width');
-
       expect(drawer.minWidth).to.equal(minWidth);
       expect(drawer.maxWidth).to.equal(maxWidth);
     });
-
     it('sets the minimum and maximum width when position=right', async () => {
       const drawer = await fixture(template);
       drawer.position = 'right';
       await drawer.updateComplete;
-
       const minWidth = getComputedStyle(drawer).getPropertyValue('--min-width');
       const maxWidth = getComputedStyle(drawer).getPropertyValue('--max-width');
-
       expect(drawer.minWidth).to.equal(minWidth);
       expect(drawer.maxWidth).to.equal(maxWidth);
     });
-
     it('sets the minimum and maximum height when position=top', async () => {
       const drawer = await fixture(template);
       drawer.position = 'top';
       await drawer.updateComplete;
-
       const minHeight = getComputedStyle(drawer).getPropertyValue('--min-height');
       const maxHeight = getComputedStyle(drawer).getPropertyValue('--max-height');
-
       expect(drawer.minHeight).to.equal(minHeight);
       expect(drawer.maxHeight).to.equal(maxHeight);
     });
   });
-
   describe('Accessibility', () => {
     it('[collapsed] is a11y AXE accessible', async () => {
       const drawer = await fixture(template);
       await expect(drawer).to.be.accessible();
     });
-
     it('[opened] is a11y AXE accessible', async () => {
       const drawer = await fixture(template);
       drawer.opened = true;
       await expect(drawer).to.be.accessible();
     });
-
     describe('Invoker', () => {
       it('links id of content items to invoker via [aria-controls]', async () => {
         const drawerElement = await fixture(template);
@@ -81,13 +67,11 @@ describe('<lion-drawer>', () => {
         const content = drawerElement.querySelector('[slot=content]');
         expect(invoker?.getAttribute('aria-controls')).to.equal(content?.id);
       });
-
       it('adds aria-expanded="false" to invoker when its content is not expanded', async () => {
         const drawerElement = await fixture(template);
         const invoker = drawerElement.querySelector('[slot=invoker]');
         expect(invoker).to.have.attribute('aria-expanded', 'false');
       });
-
       it('adds aria-expanded="true" to invoker when its content is expanded', async () => {
         const drawerElement = await fixture(template);
         const invoker = drawerElement.querySelector('[slot=invoker]');

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

@@ -2,8 +2,10 @@ import {
   runFormGroupMixinSuite,
   runFormGroupMixinInputSuite,
 } from '@lion/ui/form-core-test-suites.js';
-
 import '@lion/ui/define/lion-fieldset.js';
-
-runFormGroupMixinSuite({ tagString: 'lion-fieldset' });
-runFormGroupMixinInputSuite({ tagString: 'lion-fieldset' });
+runFormGroupMixinSuite({
+  tagString: 'lion-fieldset',
+});
+runFormGroupMixinInputSuite({
+  tagString: 'lion-fieldset',
+});

package/components/form/src/LionForm.js

@@ -23,7 +23,6 @@ export class LionForm extends LionFieldset {
     /** @protected */
     this._reset = this._reset.bind(this);
   }
-
   connectedCallback() {
     super.connectedCallback();
     this.__registerEventsForLionForm();
@@ -31,21 +30,22 @@ export class LionForm extends LionFieldset {
     // @override LionFieldset: makes sure a11y is handled by ._formNode
     this.removeAttribute('role');
   }
-
   disconnectedCallback() {
     super.disconnectedCallback();
     this.__teardownEventsForLionForm();
   }
-
   get _formNode() {
-    return /** @type {HTMLFormElement} */ (this.querySelector('form'));
+    return /** @type {HTMLFormElement} */ this.querySelector('form');
   }
-
   submit() {
     if (this._formNode) {
       // Firefox requires cancelable flag, otherwise we cannot preventDefault
       // Firefox still runs default handlers for untrusted events :\
-      this._formNode.dispatchEvent(new Event('submit', { cancelable: true }));
+      this._formNode.dispatchEvent(
+        new Event('submit', {
+          cancelable: true,
+        }),
+      );
     } else {
       throwFormNodeError();
     }
@@ -59,13 +59,15 @@ export class LionForm extends LionFieldset {
     ev.preventDefault();
     ev.stopPropagation();
     this.submitGroup();
-    this.dispatchEvent(new Event('submit', { bubbles: true }));
-
+    this.dispatchEvent(
+      new Event('submit', {
+        bubbles: true,
+      }),
+    );
     if (this.hasFeedbackFor?.includes('error')) {
-      this._setFocusOnFirstErroneousFormElement(/** @type { * & FormRegistrarHost } */ (this));
+      this._setFocusOnFirstErroneousFormElement(/** @type { * & FormRegistrarHost } */ this);
     }
   }
-
   reset() {
     if (this._formNode) {
       this._formNode.reset();
@@ -82,7 +84,11 @@ export class LionForm extends LionFieldset {
     ev.preventDefault();
     ev.stopPropagation();
     this.resetGroup();
-    this.dispatchEvent(new Event('reset', { bubbles: true }));
+    this.dispatchEvent(
+      new Event('reset', {
+        bubbles: true,
+      }),
+    );
   }
 
   /**
@@ -91,9 +97,8 @@ export class LionForm extends LionFieldset {
    */
   _setFocusOnFirstErroneousFormElement(element) {
     const firstFormElWithError =
-      element.formElements.find(child => child.hasFeedbackFor.includes('error')) ||
+      element.formElements.find((child) => child.hasFeedbackFor.includes('error')) ||
       element.formElements[0];
-
     if (firstFormElWithError._focusableNode) {
       firstFormElWithError._focusableNode.focus();
     } else {

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

@@ -20,15 +20,13 @@ import {
   expect,
   html,
 } from '@open-wc/testing';
-
 import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
 
 /**
  * @typedef {import('../src/LionForm.js').LionForm} LionForm
  * @typedef {import('lit').TemplateResult} TemplateResult
  */
-const fixture = /** @type {(arg: TemplateResult) => Promise<LionForm>} */ (_fixture);
-
+const fixture = /** @type {(arg: TemplateResult) => Promise<LionForm>} */ _fixture;
 const childTagString = defineCE(
   class extends LionField {
     get slots() {
@@ -39,7 +37,6 @@ const childTagString = defineCE(
   },
 );
 const childTag = unsafeStatic(childTagString);
-
 describe('<lion-form>', () => {
   it('is an instance of LionFieldSet', async () => {
     const el = await fixture(html`
@@ -49,7 +46,6 @@ describe('<lion-form>', () => {
     `);
     expect(el).to.be.instanceOf(LionFieldset);
   });
-
   it('relies on the native form for its accessible role', async () => {
     const el = await fixture(html`
       <lion-form>
@@ -58,7 +54,6 @@ describe('<lion-form>', () => {
     `);
     expect(el.getAttribute('role')).to.be.null;
   });
-
   it('has a custom reset that gets triggered by native reset', async () => {
     const withDefaults = await fixture(html`
       <lion-form>
@@ -68,15 +63,13 @@ describe('<lion-form>', () => {
         </form>
       </lion-form>
     `);
-    const resetButton = /** @type {HTMLInputElement} */ (
-      withDefaults.querySelector('input[type=reset]')
-    );
-
+    const resetButton =
+      /** @type {HTMLInputElement} */
+      withDefaults.querySelector('input[type=reset]');
     withDefaults.formElements.firstName.modelValue = 'updatedFoo';
     expect(withDefaults.modelValue).to.deep.equal({
       firstName: 'updatedFoo',
     });
-
     withDefaults.reset();
     expect(withDefaults.modelValue).to.deep.equal({
       firstName: 'Foo',
@@ -87,13 +80,11 @@ describe('<lion-form>', () => {
     expect(withDefaults.modelValue).to.deep.equal({
       firstName: 'updatedFoo',
     });
-
     resetButton.click();
     expect(withDefaults.modelValue).to.deep.equal({
       firstName: 'Foo',
     });
   });
-
   it('dispatches reset events', async () => {
     const el = await fixture(html`
       <lion-form>
@@ -102,7 +93,6 @@ describe('<lion-form>', () => {
         </form>
       </lion-form>
     `);
-
     setTimeout(() => el.reset());
     const resetEv = await oneEvent(el, 'reset');
     expect(resetEv).to.be.instanceOf(Event);
@@ -111,7 +101,6 @@ describe('<lion-form>', () => {
     expect(resetEv.bubbles).to.be.true;
     expect(resetEv.composed).to.be.false;
   });
-
   it('works with the native submit event (triggered via a button)', async () => {
     const submitSpy = spy();
     const el = await fixture(html`
@@ -121,12 +110,10 @@ describe('<lion-form>', () => {
         </form>
       </lion-form>
     `);
-
-    const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
+    const button = /** @type {HTMLButtonElement} */ el.querySelector('button');
     button.click();
     expect(submitSpy.callCount).to.equal(1);
   });
-
   it('dispatches submit events', async () => {
     const el = await fixture(html`
       <lion-form>
@@ -135,7 +122,7 @@ describe('<lion-form>', () => {
         </form>
       </lion-form>
     `);
-    const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
+    const button = /** @type {HTMLButtonElement} */ el.querySelector('button');
     setTimeout(() => button.click());
     const submitEv = await oneEvent(el, 'submit');
     expect(submitEv).to.be.instanceOf(Event);
@@ -144,7 +131,6 @@ describe('<lion-form>', () => {
     expect(submitEv.bubbles).to.be.true;
     expect(submitEv.composed).to.be.false;
   });
-
   it('redispatches a submit event on the native form node when calling submit() imperatively', async () => {
     const nativeFormSubmitEventSpy = spy();
     const el = await fixture(html`
@@ -161,7 +147,6 @@ describe('<lion-form>', () => {
     expect(nativeFormSubmitEventSpy.calledOnce).to.be.true;
     expect(submitGroupSpy.calledOnce).to.be.true;
   });
-
   it('handles internal submit handler before dispatch', async () => {
     const el = await fixture(html`
       <lion-form>
@@ -170,14 +155,13 @@ describe('<lion-form>', () => {
         </form>
       </lion-form>
     `);
-    const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
+    const button = /** @type {HTMLButtonElement} */ el.querySelector('button');
     const internalHandlerSpy = spy(el, 'submitGroup');
     const dispatchSpy = spy(el, 'dispatchEvent');
     await aTimeout(0);
     button.click();
     expect(internalHandlerSpy).to.be.calledBefore(dispatchSpy);
   });
-
   it('handles internal submit handler before dispatch', async () => {
     const el = await fixture(html`
       <lion-form>
@@ -186,14 +170,13 @@ describe('<lion-form>', () => {
         </form>
       </lion-form>
     `);
-    const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
+    const button = /** @type {HTMLButtonElement} */ el.querySelector('button');
     const internalHandlerSpy = spy(el, 'submitGroup');
     const dispatchSpy = spy(el, 'dispatchEvent');
     button.click();
     expect(dispatchSpy.args[0][0].type).to.equal('submit');
     expect(internalHandlerSpy).to.be.calledBefore(dispatchSpy);
   });
-
   it('handles internal reset handler before dispatch', async () => {
     const el = await fixture(html`
       <lion-form>
@@ -202,58 +185,51 @@ describe('<lion-form>', () => {
         </form>
       </lion-form>
     `);
-    const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
+    const button = /** @type {HTMLButtonElement} */ el.querySelector('button');
     const internalHandlerSpy = spy(el, 'resetGroup');
     const dispatchSpy = spy(el, 'dispatchEvent');
     button.click();
     expect(dispatchSpy.args[0][0].type).to.equal('reset');
     expect(internalHandlerSpy).to.be.calledBefore(dispatchSpy);
   });
-
   it('sets focus on submit to the first erroneous form element', async () => {
     const el = await fixture(html`
       <lion-form>
         <form>
-          <${childTag} name="firstName" .modelValue=${'Foo'} .validators=${[
-            new Required(),
-          ]}></${childTag}>
+          <${childTag} name="firstName" .modelValue=${'Foo'} .validators=${[new Required()]}></${childTag}>
           <${childTag} name="lastName" .validators=${[new Required()]}></${childTag}>
           <button type="submit">submit</button>
         </form>
       </lion-form>
     `);
     expect(el.getAttribute('aria-invalid')).to.equal('false');
-    const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
+    const button = /** @type {HTMLButtonElement} */ el.querySelector('button');
     const dispatchSpy = spy(el, 'dispatchEvent');
     button.click();
-    expect(dispatchSpy.args.map(args => args[0].type)).to.contain('submit');
+    expect(dispatchSpy.args.map((args) => args[0].type)).to.contain('submit');
     // @ts-ignore [allow-protected] in test
     expect(isActiveElement(el.formElements[1]._inputNode)).to.be.true;
   });
-
   it('sets focus on submit to the first erroneous form element within a fieldset', async () => {
     const el = await fixture(html`
       <lion-form>
         <form>
           <lion-fieldset name="name">
-            <${childTag} name="firstName" .modelValue=${'Foo'} .validators=${[
-              new Required(),
-            ]}></${childTag}>
+            <${childTag} name="firstName" .modelValue=${'Foo'} .validators=${[new Required()]}></${childTag}>
             <${childTag} name="lastName" .validators=${[new Required()]}></${childTag}>
           </lion-fieldset>
           <button type="submit">submit</button>
         </form>
       </lion-form>
     `);
-    const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
+    const button = /** @type {HTMLButtonElement} */ el.querySelector('button');
     const dispatchSpy = spy(el, 'dispatchEvent');
     button.click();
-    expect(dispatchSpy.args.map(args => args[0].type)).to.contain('submit');
+    expect(dispatchSpy.args.map((args) => args[0].type)).to.contain('submit');
     const fieldset = el.formElements[0];
     // @ts-ignore [allow-protected] in test
     expect(isActiveElement(fieldset.formElements[1]._inputNode)).to.be.true;
   });
-
   it('sets focus on submit to the first form element within a erroneous fieldset', async () => {
     const el = await fixture(html`
       <lion-form>
@@ -266,14 +242,13 @@ describe('<lion-form>', () => {
         </form>
       </lion-form>
     `);
-    const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
+    const button = /** @type {HTMLButtonElement} */ el.querySelector('button');
     const dispatchSpy = spy(el, 'dispatchEvent');
     button.click();
-    expect(dispatchSpy.args.map(args => args[0].type)).to.contain('submit');
+    expect(dispatchSpy.args.map((args) => args[0].type)).to.contain('submit');
     const fieldset = el.formElements[0];
     expect(isActiveElement(fieldset.formElements[0]._inputNode)).to.be.true;
   });
-
   it('sets focus on submit to the first form element within a erroneous fieldset within another fieldset', async () => {
     const el = await fixture(html`
       <lion-form>
@@ -288,14 +263,13 @@ describe('<lion-form>', () => {
         </form>
       </lion-form>
     `);
-    const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
+    const button = /** @type {HTMLButtonElement} */ el.querySelector('button');
     const parentFieldSetEl = el.formElements[0];
     const childFieldsetEl = parentFieldSetEl.formElements[0];
     const inputEl = childFieldsetEl.formElements[0];
     button.click();
     expect(isActiveElement(inputEl._focusableNode)).to.be.true;
   });
-
   it('sets focus on submit to the first form element within a erroneous listbox', async () => {
     const el = await fixture(html`
       <lion-form>
@@ -308,12 +282,11 @@ describe('<lion-form>', () => {
         </form>
       </lion-form>
     `);
-    const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
+    const button = /** @type {HTMLButtonElement} */ el.querySelector('button');
     button.click();
     const listboxEl = el.formElements[0];
     expect(isActiveElement(listboxEl._inputNode)).to.be.true;
   });
-
   it('sets focus on submit to the first form element within a erroneous listbox within a fieldset', async () => {
     const el = await fixture(html`
       <lion-form>
@@ -328,13 +301,12 @@ describe('<lion-form>', () => {
         </form>
       </lion-form>
     `);
-    const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
+    const button = /** @type {HTMLButtonElement} */ el.querySelector('button');
     button.click();
     const fieldsetEl = el.formElements[0];
     const listboxEl = fieldsetEl.formElements[0];
     expect(isActiveElement(listboxEl._inputNode)).to.be.true;
   });
-
   it('sets focus on submit to the first form element within a erroneous checkbox-group', async () => {
     const el = await fixture(html`
       <lion-form>
@@ -347,13 +319,12 @@ describe('<lion-form>', () => {
         </form>
       </lion-form>
     `);
-    const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
+    const button = /** @type {HTMLButtonElement} */ el.querySelector('button');
     const checkboxGroupEl = el.formElements[0];
     const checkboxEl = checkboxGroupEl.formElements[0];
     button.click();
     expect(isActiveElement(checkboxEl._focusableNode)).to.be.true;
   });
-
   it('sets focus on submit to the first form element within a erroneous radio-group', async () => {
     const el = await fixture(html`
       <lion-form>
@@ -368,8 +339,7 @@ describe('<lion-form>', () => {
         </form>
       </lion-form>
     `);
-    const button = /** @type {HTMLButtonElement} */ (el.querySelector('button'));
-
+    const button = /** @type {HTMLButtonElement} */ el.querySelector('button');
     const radioGroupEl = el.formElements[0];
     const radioEl = radioGroupEl.formElements[0];
     button.click();