@lion/ui 0.23.0 → 0.24.0

package/components/helpers/test/sb-action-logger.test.js

@@ -6,91 +6,67 @@ import '@lion/ui/define-helpers/sb-action-logger.js';
  * @typedef {import('../src/SbActionLogger.js').SbActionLogger} SbActionLogger
  * @typedef {import('lit').TemplateResult} TemplateResult
  */
-const fixture = /** @type {(arg: TemplateResult|string) => Promise<SbActionLogger>} */ (_fixture);
-
+const fixture = /** @type {(arg: TemplateResult|string) => Promise<SbActionLogger>} */ _fixture;
 describe('sb-action-logger', () => {
   it('has a default title "Action Logger"', async () => {
     const el = await fixture(html`<sb-action-logger></sb-action-logger>`);
-    const titleEl = /** @type {HTMLElement} */ (el.shadowRoot?.querySelector('.header__title'));
-
+    const titleEl = /** @type {HTMLElement} */ el.shadowRoot?.querySelector('.header__title');
     expect(titleEl.innerText).to.equal('Action Logger');
   });
-
   it('has a title property / attribute that can be overridden', async () => {
     const el = await fixture(html`
       <sb-action-logger title="Logging your favorite fruit"></sb-action-logger>
     `);
-    const titleEl = /** @type {HTMLElement} */ (el.shadowRoot?.querySelector('.header__title'));
-
+    const titleEl = /** @type {HTMLElement} */ el.shadowRoot?.querySelector('.header__title');
     expect(titleEl.innerText).to.equal('Logging your favorite fruit');
   });
-
   describe('Logger behavior', () => {
     it('is possible to send something to the logger using the log method', async () => {
       const el = await fixture(html`<sb-action-logger></sb-action-logger>`);
-
       el.log('Hello, World!');
-
-      const loggerEl = /** @type {HTMLElement} */ (el.shadowRoot?.querySelector('.logger'));
-      const loggerFirstEntryEl = /** @type {HTMLElement} */ (loggerEl.firstElementChild);
+      const loggerEl = /** @type {HTMLElement} */ el.shadowRoot?.querySelector('.logger');
+      const loggerFirstEntryEl = /** @type {HTMLElement} */ loggerEl.firstElementChild;
       expect(loggerEl.children.length).to.equal(1);
       expect(loggerFirstEntryEl.innerText).to.equal('Hello, World!');
     });
-
     it('appends new logs to the logger', async () => {
       const el = await fixture(html`<sb-action-logger></sb-action-logger>`);
-
       el.log('Hello, World!');
       el.log('Hello, Planet!');
       el.log('Hello, Earth!');
       el.log('Hello, World!');
       el.log('Hello, Planet!');
-
-      const loggerEl = /** @type {HTMLElement} */ (el.shadowRoot?.querySelector('.logger'));
-
+      const loggerEl = /** @type {HTMLElement} */ el.shadowRoot?.querySelector('.logger');
       expect(loggerEl.children.length).to.equal(5);
     });
-
     it('shows a visual cue whenever something is logged to the logger', async () => {
       const el = await fixture(html`<sb-action-logger></sb-action-logger>`);
-
-      const cueEl = /** @type {HTMLElement} */ (
-        el.shadowRoot?.querySelector('.header__log-cue-overlay')
-      );
+      const cueEl =
+        /** @type {HTMLElement} */
+        el.shadowRoot?.querySelector('.header__log-cue-overlay');
       expect(cueEl.classList.contains('header__log-cue-overlay--slide')).to.be.false;
-
       el.log('Hello, World!');
       expect(cueEl.classList.contains('header__log-cue-overlay--slide')).to.be.true;
     });
-
     it('has a visual counter that counts the amount of total logs', async () => {
       const el = await fixture(html`<sb-action-logger></sb-action-logger>`);
-
-      const cueEl = /** @type {HTMLElement} */ (
-        el.shadowRoot?.querySelector('.header__log-cue-overlay')
-      );
-
+      const cueEl =
+        /** @type {HTMLElement} */
+        el.shadowRoot?.querySelector('.header__log-cue-overlay');
       expect(cueEl.classList.contains('.header__log-cue-overlay--slide')).to.be.false;
-
       el.log('Hello, World!');
       expect(cueEl.classList.contains('header__log-cue-overlay--slide')).to.be.true;
     });
-
     it('has a clear button that clears the logs and resets the counter', async () => {
       const el = await fixture(html`<sb-action-logger></sb-action-logger>`);
-
       el.log('Hello, World!');
       el.log('Hello, Planet!');
-
-      const clearBtn = /** @type {HTMLElement} */ (el.shadowRoot?.querySelector('.header__clear'));
+      const clearBtn = /** @type {HTMLElement} */ el.shadowRoot?.querySelector('.header__clear');
       clearBtn.click();
-
       expect(el.shadowRoot?.querySelector('.logger')?.children.length).to.equal(0);
     });
-
     it('duplicate consecutive logs are kept as one, adds a visual counter', async () => {
       const el = await fixture(html`<sb-action-logger></sb-action-logger>`);
-
       el.log('Hello, World!');
       el.log('Hello, World!');
       el.log('Hello, World!'); // 3 consecutive dupes
@@ -99,44 +75,37 @@ describe('sb-action-logger', () => {
       el.log('Hello, Planet!');
       el.log('Hello, Planet!'); // 2 consecutive dupes
 
-      const loggerEl = /** @type {HTMLElement} */ (el.shadowRoot?.querySelector('.logger'));
-
-      const firstLogCount = /** @type {HTMLElement} */ (
-        loggerEl.firstElementChild?.querySelector('.logger__log-count')
-      );
-      const lastLogCount = /** @type {HTMLElement} */ (
-        loggerEl.lastElementChild?.querySelector('.logger__log-count')
-      );
-
+      const loggerEl = /** @type {HTMLElement} */ el.shadowRoot?.querySelector('.logger');
+      const firstLogCount =
+        /** @type {HTMLElement} */
+        loggerEl.firstElementChild?.querySelector('.logger__log-count');
+      const lastLogCount =
+        /** @type {HTMLElement} */
+        loggerEl.lastElementChild?.querySelector('.logger__log-count');
       expect(loggerEl.children.length).to.equal(4);
       expect(firstLogCount.innerText).to.equal('3');
       expect(lastLogCount.innerText).to.equal('2');
     });
-
     it('can be set to simple mode for only showing a single log statement', async () => {
       const el = await fixture(html`<sb-action-logger simple></sb-action-logger>`);
       el.log('Hello, World!');
-      const loggerEl = /** @type {HTMLElement} */ (el.shadowRoot?.querySelector('.logger'));
+      const loggerEl = /** @type {HTMLElement} */ el.shadowRoot?.querySelector('.logger');
       const loggerCountEl = loggerEl.firstElementChild?.querySelector('.logger__log-count');
-      let codeEl = /** @type {HTMLElement} */ (loggerEl.firstElementChild?.querySelector('code'));
-
+      let codeEl = /** @type {HTMLElement} */ loggerEl.firstElementChild?.querySelector('code');
       expect(loggerEl.children.length).to.equal(1);
       expect(codeEl.innerText).to.equal('Hello, World!');
-
       el.log('Hello, Earth!');
-      codeEl = /** @type {HTMLElement} */ (loggerEl.firstElementChild?.querySelector('code'));
+      codeEl = /** @type {HTMLElement} */ loggerEl.firstElementChild?.querySelector('code');
       expect(loggerEl.children.length).to.equal(1);
       expect(codeEl.innerText).to.equal('Hello, Earth!');
-
       el.log('Hello, Planet!');
       el.log('Hello, Planet!');
-      codeEl = /** @type {HTMLElement} */ (loggerEl.firstElementChild?.querySelector('code'));
+      codeEl = /** @type {HTMLElement} */ loggerEl.firstElementChild?.querySelector('code');
       expect(loggerEl.children.length).to.equal(1);
       expect(codeEl.innerText).to.equal('Hello, Planet!');
       expect(loggerCountEl).to.be.null;
     });
   });
-
   describe('Potential Additional Features', () => {
     it.skip('fires a sb-action-logged event when something is logged to the logger', async () => {
       const el = await fixture(html`<sb-action-logger></sb-action-logger>`);

package/components/icon/src/IconManager.js

@@ -6,7 +6,6 @@
 export class IconManager {
   /** @private */
   __iconResolvers;
-
   constructor() {
     this.__iconResolvers = new Map();
   }
@@ -61,7 +60,6 @@ export class IconManager {
     if (splitIconId.length !== 3) {
       throw new Error(`Incorrect iconId: ${iconId}. Format: <namespace>:<iconset>:<icon>`);
     }
-
     return this.resolveIcon(splitIconId[0], splitIconId[1], splitIconId[2]);
   }
 }

package/components/icon/src/LionIcon.js

@@ -61,7 +61,6 @@ export class LionIcon extends LitElement {
       },
     };
   }
-
   static get styles() {
     return [
       css`
@@ -98,7 +97,6 @@ export class LionIcon extends LitElement {
    * @type {TemplateResult|typeof nothing|TagFunction}
    */
   __svg;
-
   constructor() {
     super();
     this.ariaLabel = '';
@@ -110,7 +108,7 @@ export class LionIcon extends 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') || [];
 
   /** @param {import('lit').PropertyValues} changedProperties */
   update(changedProperties) {
@@ -118,16 +116,13 @@ export class LionIcon extends LitElement {
     if (changedProperties.has('ariaLabel')) {
       this._onLabelChanged();
     }
-
     if (changedProperties.has('iconId')) {
-      this._onIconIdChanged(/** @type {string} */ (changedProperties.get('iconId')));
+      this._onIconIdChanged(/** @type {string} */ changedProperties.get('iconId'));
     }
   }
-
   render() {
     return html`<slot></slot>`;
   }
-
   connectedCallback() {
     // ensures that aria-hidden is set if there is no aria-label attribute
     this._onLabelChanged();

package/components/icon/src/icons.js

@@ -9,8 +9,6 @@ function getIconManager() {
     const iconManager = new IconManager();
     singletonManager.set('@lion/ui::icons::0.x', iconManager);
   }
-
   return singletonManager.get('@lion/ui::icons::0.x');
 }
-
 export const icons = lazifyInstantiation(getIconManager);

package/components/icon/test/IconManager.test.js

@@ -17,14 +17,12 @@ function getProtectedMembers(iconManagerEl) {
     iconResolvers,
   };
 }
-
 describe('IconManager', () => {
   it('starts off with an empty map of resolvers', () => {
     const manager = new IconManager();
     const { iconResolvers } = getProtectedMembers(manager);
     expect(iconResolvers.size).to.equal(0);
   });
-
   it('allows adding an icon resolver', () => {
     const manager = new IconManager();
     const { iconResolvers } = getProtectedMembers(manager);
@@ -36,17 +34,13 @@ describe('IconManager', () => {
     // eslint-disable-next-line no-unused-vars
     const resolver = (iconset, icon) => nothing;
     manager.addIconResolver('foo', resolver);
-
     expect(iconResolvers.get('foo')).to.equal(resolver);
   });
-
   it('does not allow adding a resolve for the same namespace twice', () => {
     const manager = new IconManager();
     manager.addIconResolver('foo', () => html``);
-
     expect(() => manager.addIconResolver('foo', () => html``)).to.throw();
   });
-
   it('can resolve an icon, specifying separate parameters', async () => {
     const manager = new IconManager();
     const fooResolver = stub();
@@ -54,43 +48,34 @@ describe('IconManager', () => {
     const barResolver = stub();
     manager.addIconResolver('foo', fooResolver);
     manager.addIconResolver('bar', barResolver);
-
     const icon = await manager.resolveIcon('foo', 'lorem', 'ipsum');
-
     expect(fooResolver.callCount).to.equal(1);
     expect(barResolver.callCount).to.equal(0);
     expect(fooResolver.withArgs('lorem', 'ipsum').callCount).to.equal(1);
     expect(icon).to.equal('my icon');
   });
-
   it('throws when an incorrect namespace is given', async () => {
     const manager = new IconManager();
     const fooResolver = stub();
     fooResolver.callsFake(() => 'my icon');
     manager.addIconResolver('foo', fooResolver);
-
     expect(() => manager.resolveIcon('bar', 'lorem', 'ipsum')).to.throw();
   });
-
   it('can resolve an icon, specifying parameters as a single string', async () => {
     const manager = new IconManager();
     const fooResolver = stub();
     fooResolver.callsFake(() => 'my icon');
     manager.addIconResolver('foo', fooResolver);
-
     const icon = await manager.resolveIconForId('foo:lorem:ipsum');
-
     expect(fooResolver.callCount).to.equal(1);
     expect(fooResolver.withArgs('lorem', 'ipsum').callCount).to.equal(1);
     expect(icon).to.equal('my icon');
   });
-
   it('throws when an incorrectly formatted icon id is given', async () => {
     const manager = new IconManager();
     const fooResolver = stub();
     fooResolver.callsFake(() => 'my icon');
     manager.addIconResolver('foo', fooResolver);
-
     expect(() => manager.resolveIconForId('lorem:ipsum')).to.throw();
     expect(() => manager.resolveIconForId('lorem')).to.throw();
     expect(() => manager.resolveIconForId('foo:lorem:ipsum:bar')).to.throw();

package/components/icon/test/hammer.svg.js

@@ -1,5 +1,4 @@
 // @ts-nocheck
-export default /** @type {import("lit").TemplateResult} */ (
-  tag =>
-    tag`<svg focusable="false" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" data-test-id="svg-hammer"><path d="M.476 12.915L6.7 6 9 8.556l-6.223 6.915a1.542 1.542 0 0 1-1.15.529 1.54 1.54 0 0 1-1.15-.53c-.636-.706-.636-1.85 0-2.555zm12.638-9.031L16 6.863 12.866 10 4 .919 9.35 0l1.912 1.972.251-.251c.52-.52 2.4 1.363 1.88 1.882l-.279.28z"></path></svg>`
-);
+export default /** @type {import("lit").TemplateResult} */
+(tag) =>
+  tag`<svg focusable="false" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" data-test-id="svg-hammer"><path d="M.476 12.915L6.7 6 9 8.556l-6.223 6.915a1.542 1.542 0 0 1-1.15.529 1.54 1.54 0 0 1-1.15-.53c-.636-.706-.636-1.85 0-2.555zm12.638-9.031L16 6.863 12.866 10 4 .919 9.35 0l1.912 1.972.251-.251c.52-.52 2.4 1.363 1.88 1.882l-.279.28z"></path></svg>`;

package/components/icon/test/heart.svg.js

@@ -1,5 +1,4 @@
 // @ts-nocheck
-export default /** @type {import("lit").TemplateResult} */ (
-  tag =>
-    tag`<svg focusable="false" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" data-test-id="svg-heart"><path d="M8.002 14.867a.828.828 0 0 1-.324-.066C7.36 14.665 0 11.466 0 6.153 0 3.592 1.543.825 4.98 1.01c1.465.077 2.437.828 3.018 1.491.581-.667 1.553-1.414 3.023-1.491.107-.008.207-.008.31-.008C13.58 1.001 16 2.614 16 6.153c0 5.313-7.36 8.512-7.671 8.644a.787.787 0 0 1-.327.07z"></path></svg>`
-);
+export default /** @type {import("lit").TemplateResult} */
+(tag) =>
+  tag`<svg focusable="false" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" data-test-id="svg-heart"><path d="M8.002 14.867a.828.828 0 0 1-.324-.066C7.36 14.665 0 11.466 0 6.153 0 3.592 1.543.825 4.98 1.01c1.465.077 2.437.828 3.018 1.491.581-.667 1.553-1.414 3.023-1.491.107-.008.207-.008.31-.008C13.58 1.001 16 2.614 16 6.153c0 5.313-7.36 8.512-7.671 8.644a.787.787 0 0 1-.327.07z"></path></svg>`;

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

@@ -11,29 +11,25 @@ import heartSvg from './heart.svg.js';
  * @typedef {import('../src/LionIcon.js').LionIcon} LionIcon
  * @typedef {import('lit').TemplateResult} TemplateResult
  */
-const fixture = /** @type {(arg: TemplateResult|string) => Promise<LionIcon>} */ (_fixture);
-
+const fixture = /** @type {(arg: TemplateResult|string) => Promise<LionIcon>} */ _fixture;
 describe('lion-icon', () => {
   it('supports svg icon as a function which recieves a tag function as an argument and returns a tagged template literal', async () => {
-    const iconFunction = /** @param {TaggedTemplateLiteral} tag */ tag =>
+    const iconFunction = /** @param {TaggedTemplateLiteral} tag */ (tag) =>
       tag`<svg data-test-id="svg"></svg>`;
     const el = await fixture(html`<lion-icon .svg=${iconFunction}></lion-icon>`);
     expect(el.children[0].getAttribute('data-test-id')).to.equal('svg');
   });
-
   it('is hidden when attribute hidden is true', async () => {
-    const iconFunction = /** @param {TaggedTemplateLiteral} tag */ tag =>
+    const iconFunction = /** @param {TaggedTemplateLiteral} tag */ (tag) =>
       tag`<svg data-test-id="svg"></svg>`;
     const el = await fixture(html`<lion-icon .svg=${iconFunction} hidden></lion-icon>`);
     expect(el).not.to.be.displayed;
   });
-
   it('supports svg icon as a lit-html template', async () => {
     const icon = html`<svg data-test-id="svg"></svg>`;
     const el = await fixture(html`<lion-icon .svg=${icon}></lion-icon>`);
     expect(el.children[0].getAttribute('data-test-id')).to.equal('svg');
   });
-
   it('does not support string svg icon', async () => {
     const errorMessage =
       'icon accepts only lit-html templates or functions like "tag => tag`<svg>...</svg>`"';
@@ -44,43 +40,35 @@ describe('lion-icon', () => {
       fixtureSync(html`<lion-icon .svg=${() => '<svg></svg>'}></lion-icon>`);
     }).to.throw(Error, errorMessage);
   });
-
   it('displays an svg icon with an aria label attribute', async () => {
     const el = await fixture(html`<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>`);
-
     expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-heart');
     expect(el.getAttribute('role')).to.equal('img');
     expect(el.getAttribute('aria-label')).to.equal('Love');
     expect(el.getAttribute('aria-hidden')).to.equal('false');
   });
-
   it('displays an svg icon with an aria hidden attribute', async () => {
     const el = await fixture(html`<lion-icon .svg=${hammerSvg}></lion-icon>`);
     expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-hammer');
     expect(el.getAttribute('aria-hidden')).to.equal('true');
     expect(el.hasAttribute('aria-label')).to.equal(false);
   });
-
   it('is accessible with an aria label', async () => {
     const el = await fixture(html`<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>`);
     await expect(el).to.be.accessible();
   });
-
   it('is accessible without an aria label', async () => {
     const el = await fixture(html`<lion-icon .svg=${heartSvg}></lion-icon>`);
     await expect(el).to.be.accessible();
   });
-
   it('expect the svg icon to be aria-hidden', async () => {
     const icon = await fixture(html`<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>`);
     expect(icon.children[0].getAttribute('aria-hidden')).to.equal('true');
   });
-
   it('expects svg-icons to have the attribute `focusable="false"` so the icon doesn\'t appear in tab-order in IE/Edge', async () => {
     const icon = await fixture(html`<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>`);
     expect(icon.children[0].getAttribute('focusable')).to.equal('false');
   });
-
   it('can change the displayed icon', async () => {
     const el = await fixture(html`<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>`);
     expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-heart');
@@ -88,7 +76,6 @@ describe('lion-icon', () => {
     await el.updateComplete;
     expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-hammer');
   });
-
   it('can add or remove the aria-label attribute', async () => {
     const el = await fixture(html`<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>`);
     const elHammer = await fixture(html`<lion-icon .svg=${hammerSvg}></lion-icon>`);
@@ -96,32 +83,27 @@ describe('lion-icon', () => {
     // verify initial values
     expect(el.getAttribute('aria-label')).to.equal('Love');
     expect(el.getAttribute('aria-hidden')).to.equal('false');
-
     expect(elHammer.getAttribute('aria-hidden')).to.equal('true');
     expect(elHammer.hasAttribute('aria-label')).to.equal(false);
 
     // swap label and hidden on both icons
     el.ariaLabel = '';
     elHammer.ariaLabel = 'Hammer';
-
     await el.updateComplete;
     expect(el.getAttribute('aria-hidden')).to.equal('true');
     expect(el.hasAttribute('aria-label')).to.equal(false);
-
     await elHammer.updateComplete;
     expect(elHammer.getAttribute('aria-label')).to.equal('Hammer');
     expect(elHammer.getAttribute('aria-hidden')).to.equal('false');
   });
-
   it('supports dynamic icons using until directive', async () => {
-    const svgLoading = new Promise(resolve => {
+    const svgLoading = new Promise((resolve) => {
       window.addEventListener('importDone', resolve);
     });
-
     const el = await fixture(html`
       <lion-icon
         .svg=${until(
-          import('./heart.svg.js').then(e => {
+          import('./heart.svg.js').then((e) => {
             dispatchEvent(new CustomEvent('importDone'));
             return e.default;
           }),
@@ -130,15 +112,12 @@ describe('lion-icon', () => {
         aria-label="Love"
       ></lion-icon>
     `);
-
     await svgLoading;
     // We need to await the until directive is resolved and rendered to the dom
     // You can not use updateComplete as until renders on it's own
     await aTimeout(0);
-
     expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-heart');
   });
-
   it('does not render "undefined" if changed from valid input to undefined', async () => {
     const el = await fixture(html`<lion-icon .svg=${heartSvg}></lion-icon>`);
     await el.updateComplete;
@@ -146,7 +125,6 @@ describe('lion-icon', () => {
     await el.updateComplete;
     expect(el.innerHTML).to.equal('<!---->'); // don't use lightDom.to.equal(''), it gives false positives
   });
-
   it('does not render "null" if changed from valid input to null', async () => {
     const el = await fixture(html`<lion-icon .svg=${heartSvg}></lion-icon>`);
     await el.updateComplete;
@@ -154,18 +132,15 @@ describe('lion-icon', () => {
     await el.updateComplete;
     expect(el.innerHTML).to.equal('<!---->'); // don't use lightDom.to.equal(''), it gives false positives
   });
-
   it('supports icons using an icon id', async () => {
     try {
       icons.addIconResolver('foo', () => heartSvg);
       const el = await fixture(html`<lion-icon icon-id="foo:lorem:ipsum"></lion-icon>`);
-
-      expect(/** @type {HTMLElement} */ (el.children[0]).dataset.testId).to.equal('svg-heart');
+      expect(/** @type {HTMLElement} */ el.children[0].dataset.testId).to.equal('svg-heart');
     } finally {
       icons.removeIconResolver('foo');
     }
   });
-
   it('clears rendered icon when icon id is removed', async () => {
     try {
       icons.addIconResolver('foo', () => heartSvg);
@@ -178,37 +153,33 @@ describe('lion-icon', () => {
       icons.removeIconResolver('foo');
     }
   });
-
   it('does not create race conditions when icon changed while resolving icon id', async () => {
     try {
       icons.addIconResolver(
         'foo',
         () =>
-          /** @type {Promise<TemplateResult>} */ (
-            // eslint-disable-next-line no-promise-executor-return
-            new Promise(resolve => setTimeout(() => resolve(heartSvg)))
-          ),
+          /** @type {Promise<TemplateResult>} */
+          // eslint-disable-next-line no-promise-executor-return
+          new Promise((resolve) => setTimeout(() => resolve(heartSvg))),
       );
       icons.addIconResolver(
         'bar',
         () =>
-          /** @type {Promise<TemplateResult>} */ (
-            // eslint-disable-next-line no-promise-executor-return
-            new Promise(resolve => setTimeout(() => resolve(hammerSvg)))
-          ),
+          /** @type {Promise<TemplateResult>} */
+          // eslint-disable-next-line no-promise-executor-return
+          new Promise((resolve) => setTimeout(() => resolve(hammerSvg))),
       );
       const el = await fixture(html`<lion-icon icon-id="foo:lorem:ipsum"></lion-icon>`);
-
       await el.updateComplete;
       el.iconId = 'bar:lorem:ipsum';
       await el.updateComplete;
       await aTimeout(4);
 
       // heart is still loading at this point, but hammer came later so that should be later
-      expect(/** @type {HTMLElement} */ (el.children[0]).dataset.testId).to.equal('svg-hammer');
+      expect(/** @type {HTMLElement} */ el.children[0].dataset.testId).to.equal('svg-hammer');
       await aTimeout(10);
       // heart finished loading, but it should not be rendered because hammer came later
-      expect(/** @type {HTMLElement} */ (el.children[0]).dataset.testId).to.equal('svg-hammer');
+      expect(/** @type {HTMLElement} */ el.children[0].dataset.testId).to.equal('svg-hammer');
     } finally {
       icons.removeIconResolver('foo');
       icons.removeIconResolver('bar');

package/components/input/src/LionInput.js

@@ -32,7 +32,6 @@ export class LionInput extends NativeTextFieldMixin(LionField) {
       },
     };
   }
-
   get slots() {
     return {
       ...super.slots,
@@ -53,9 +52,8 @@ export class LionInput extends NativeTextFieldMixin(LionField) {
    * @protected
    */
   get _inputNode() {
-    return /** @type {HTMLInputElement} */ (super._inputNode); // casts type
+    return /** @type {HTMLInputElement} */ super._inputNode; // casts type
   }
-
   constructor() {
     super();
     this.readOnly = false;
@@ -88,24 +86,20 @@ export class LionInput extends NativeTextFieldMixin(LionField) {
     if (changedProperties.has('type')) {
       this._inputNode.type = this.type;
     }
-
     if (changedProperties.has('placeholder')) {
       this._inputNode.placeholder = this.placeholder;
     }
-
     if (changedProperties.has('disabled')) {
       this._inputNode.disabled = this.disabled;
       this.validate();
     }
-
     if (changedProperties.has('name')) {
       this._inputNode.name = this.name;
     }
-
     if (changedProperties.has('autocomplete')) {
       // the DOM lib types `autocomplete` as `AutoFill` only in newer TypeScript;
       // cast keeps this valid on both compilers without widening the public type
-      this._inputNode.autocomplete = /** @type {any} */ (this.autocomplete);
+      this._inputNode.autocomplete = /** @type {any} */ this.autocomplete;
     }
   }
 

package/components/input/test/input-integrations.test.js

@@ -4,9 +4,7 @@ import {
   runNativeTextFieldMixinSuite,
 } from '@lion/ui/form-core-test-suites.js';
 import { defineCE } from '@open-wc/testing';
-
 import { LionInput } from '@lion/ui/input.js';
-
 const fieldTagString = defineCE(
   class extends LionInput {
     get slots() {
@@ -18,17 +16,14 @@ const fieldTagString = defineCE(
     }
   },
 );
-
 describe('<lion-input> integrations', () => {
   runInteractionStateMixinSuite({
     tagString: fieldTagString,
   });
-
   runFormatMixinSuite({
     tagString: fieldTagString,
     modelValueType: String,
   });
-
   runNativeTextFieldMixinSuite({
     tagString: fieldTagString,
   });

package/components/input/test/lion-input-integrations.test.js

@@ -2,16 +2,12 @@ import {
   runFormatMixinSuite,
   runInteractionStateMixinSuite,
 } from '@lion/ui/form-core-test-suites.js';
-
 import '@lion/ui/define/lion-input.js';
-
 const tagString = 'lion-input';
-
 describe('<lion-input> integrations', () => {
   runInteractionStateMixinSuite({
     tagString,
   });
-
   runFormatMixinSuite({
     tagString,
     modelValueType: String,