fix test files for NodeNext

src/components/animation/animation.test.ts

@@ -1,5 +1,6 @@
 import '../../../dist/shoelace.js';
-import { aTimeout, expect, fixture, html, oneEvent } from '@open-wc/testing';
+import { aTimeout, expect, fixture, oneEvent } from '@open-wc/testing';
+import { html } from "lit"
 import type SlAnimation from './animation.js';
 
 describe('<sl-animation>', () => {

src/components/details/details.test.ts

@@ -2,9 +2,9 @@ import '../../../dist/shoelace.js';
 // cspell:dictionaries lorem-ipsum
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import sinon from 'sinon';
-import type { SlHideEvent } from '../../events/sl-hide';
-import type { SlShowEvent } from '../../events/sl-show';
-import type SlDetails from './details';
+import type { SlHideEvent } from '../../events/sl-hide.js';
+import type { SlShowEvent } from '../../events/sl-show.js';
+import type SlDetails from './details.js';
 
 describe('<sl-details>', () => {
   describe('accessibility', () => {

src/components/dialog/dialog.test.ts

@@ -1,10 +1,10 @@
 import '../../../dist/shoelace.js';
 // cspell:dictionaries lorem-ipsum
-import { aTimeout, elementUpdated, expect, fixture, html, waitUntil } from '@open-wc/testing';
-import { LitElement } from 'lit';
+import { aTimeout, elementUpdated, expect, fixture, waitUntil } from '@open-wc/testing';
+import { html, LitElement } from 'lit';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
-import type SlDialog from './dialog';
+import type SlDialog from './dialog.js';
 
 describe('<sl-dialog>', () => {
   it('should be visible with the open attribute', async () => {

src/components/drawer/drawer.test.ts

@@ -3,7 +3,7 @@ import '../../../dist/shoelace.js';
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
-import type SlDrawer from './drawer';
+import type SlDrawer from './drawer.js';
 
 describe('<sl-drawer>', () => {
   it('should be visible with the open attribute', async () => {

src/components/format-bytes/format-bytes.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/shoelace.js';
 import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
-import type SlFormatBytes from './format-bytes';
+import type SlFormatBytes from './format-bytes.js';
 
 describe('<sl-format-bytes>', () => {
   describe('defaults ', () => {

src/components/format-date/format-date.test.ts

@@ -1,7 +1,7 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html } from '@open-wc/testing';
 import sinon from 'sinon';
-import type SlFormatDate from './format-date';
+import type SlFormatDate from './format-date.js';
 
 describe('<sl-format-date>', () => {
   describe('defaults ', () => {

src/components/format-number/format-number.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html } from '@open-wc/testing';
-import type SlFormatNumber from './format-number';
+import type SlFormatNumber from './format-number.js';
 
 describe('<sl-format-number>', () => {
   describe('defaults ', () => {

src/components/icon-button/icon-button.test.ts

@@ -1,7 +1,7 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import sinon from 'sinon';
-import type SlIconButton from './icon-button';
+import type SlIconButton from './icon-button.js';
 
 type LinkTarget = '_self' | '_blank' | '_parent' | '_top';
 

src/components/icon/icon.test.ts

@@ -1,8 +1,8 @@
 import { aTimeout, elementUpdated, expect, fixture, html, oneEvent } from '@open-wc/testing';
 import { registerIconLibrary } from '../../../dist/shoelace.js';
-import type { SlErrorEvent } from '../../events/sl-error';
-import type { SlLoadEvent } from '../../events/sl-load';
-import type SlIcon from './icon';
+import type { SlErrorEvent } from '../../events/sl-error.js';
+import type { SlLoadEvent } from '../../events/sl-load.js';
+import type SlIcon from './icon.js';
 
 const testLibraryIcons = {
   'test-icon1': `

src/components/image-comparer/image-comparer.test.ts

@@ -1,7 +1,7 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html } from '@open-wc/testing';
 import sinon from 'sinon';
-import type SlImageComparer from './image-comparer';
+import type SlImageComparer from './image-comparer.js';
 
 describe('<sl-image-comparer>', () => {
   it('should render a basic before/after', async () => {

src/components/include/include.test.ts

@@ -1,7 +1,7 @@
 import '../../../dist/shoelace.js';
 import { aTimeout, expect, fixture, html, waitUntil } from '@open-wc/testing';
 import sinon from 'sinon';
-import type SlInclude from './include';
+import type SlInclude from './include.js';
 
 const stubbedFetchResponse: Response = {
   headers: new Headers(),

src/components/input/input.test.ts

@@ -4,7 +4,7 @@ import { getFormControls, serialize } from '../../../dist/shoelace.js';
 import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
 import { sendKeys } from '@web/test-runner-commands'; // must come from the same module
 import sinon from 'sinon';
-import type SlInput from './input';
+import type SlInput from './input.js';
 
 describe('<sl-input>', () => {
   it('should pass accessibility tests', async () => {

src/components/menu-item/menu-item.test.ts

@@ -2,8 +2,8 @@ import '../../../dist/shoelace.js';
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
-import type { SlSelectEvent } from '../../events/sl-select';
-import type SlMenuItem from './menu-item';
+import type { SlSelectEvent } from '../../events/sl-select.js';
+import type SlMenuItem from './menu-item.js';
 
 describe('<sl-menu-item>', () => {
   it('should pass accessibility tests', async () => {

src/components/menu-label/menu-label.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html } from '@open-wc/testing';
-import type SlMenuLabel from './menu-label';
+import type SlMenuLabel from './menu-label.js';
 
 describe('<sl-menu-label>', () => {
   it('passes accessibility test', async () => {

src/components/menu/menu.test.ts

@@ -4,8 +4,8 @@ import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
-import type { SlSelectEvent } from '../../events/sl-select';
-import type SlMenu from './menu';
+import type { SlSelectEvent } from '../../events/sl-select.js';
+import type SlMenu from './menu.js';
 
 describe('<sl-menu>', () => {
   it('emits sl-select with the correct event detail when clicking an item', async () => {

src/components/option/option.test.ts

@@ -1,7 +1,7 @@
 import '../../../dist/shoelace.js';
 import { aTimeout, expect, fixture, html, waitUntil } from '@open-wc/testing';
 import sinon from 'sinon';
-import type SlOption from './option';
+import type SlOption from './option.js';
 
 describe('<sl-option>', () => {
   it('passes accessibility test', async () => {

src/components/progress-bar/progress-bar.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html } from '@open-wc/testing';
-import type SlProgressBar from './progress-bar';
+import type SlProgressBar from './progress-bar.js';
 
 describe('<sl-progress-bar>', () => {
   let el: SlProgressBar;

src/components/progress-ring/progress-ring.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html } from '@open-wc/testing';
-import type SlProgressRing from './progress-ring';
+import type SlProgressRing from './progress-ring.js';
 
 describe('<sl-progress-ring>', () => {
   let el: SlProgressRing;

src/components/qr-code/qr-code.component.ts

@@ -52,7 +52,7 @@ export default class SlQrCode extends ShoelaceElement {
     }
 
     // For some reason, when changing to "NodeNext", it has the wrong type for QrCreator.
-    QrCreator.render(
+    (QrCreator as unknown as typeof QrCreator.default).render(
       {
         text: this.value,
         radius: this.radius,

src/components/qr-code/qr-code.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html } from '@open-wc/testing';
-import type SlQrCode from './qr-code';
+import type SlQrCode from './qr-code.js';
 
 const getCanvas = (qrCode: SlQrCode): HTMLCanvasElement => {
   const possibleCanvas = qrCode.shadowRoot?.querySelector<HTMLCanvasElement>('.qr-code');

src/components/radio-button/radio-button.test.ts

@@ -1,7 +1,7 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html } from '@open-wc/testing';
-import type SlRadioButton from './radio-button';
-import type SlRadioGroup from '../radio-group/radio-group';
+import type SlRadioButton from './radio-button.js';
+import type SlRadioGroup from '../radio-group/radio-group.js';
 
 describe('<sl-radio-button>', () => {
   it('should not get checked when disabled', async () => {

src/components/radio/radio.test.ts

@@ -1,7 +1,7 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html } from '@open-wc/testing';
-import type SlRadio from './radio';
-import type SlRadioGroup from '../radio-group/radio-group';
+import type SlRadio from './radio.js';
+import type SlRadioGroup from '../radio-group/radio-group.js';
 
 describe('<sl-radio>', () => {
   it('should not get checked when disabled', async () => {

src/components/skeleton/skeleton.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html } from '@open-wc/testing';
-import type SlSkeleton from './skeleton';
+import type SlSkeleton from './skeleton.js';
 
 describe('<sl-skeleton>', () => {
   it('should render default skeleton', async () => {

src/components/spinner/spinner.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html } from '@open-wc/testing';
-import type SlSpinner from './spinner';
+import type SlSpinner from './spinner.js';
 
 describe('<sl-spinner>', () => {
   describe('when provided no parameters', () => {

src/components/tab-panel/tab-panel.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/shoelace.js';
 import { aTimeout, expect, fixture, html } from '@open-wc/testing';
-import type SlTabPanel from './tab-panel';
+import type SlTabPanel from './tab-panel.js';
 
 describe('<sl-tab-panel>', () => {
   it('passes accessibility test', async () => {

src/components/tab/tab.test.ts

@@ -1,9 +1,9 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html } from '@open-wc/testing';
 import sinon from 'sinon';
-import type SlIconButton from '../icon-button/icon-button';
-import type SlTab from './tab';
-import type SlTabGroup from '../tab-group/tab-group';
+import type SlIconButton from '../icon-button/icon-button.js';
+import type SlTab from './tab.js';
+import type SlTabGroup from '../tab-group/tab-group.js';
 
 describe('<sl-tab>', () => {
   it('passes accessibility test', async () => {

src/components/tag/tag.test.ts

@@ -1,7 +1,7 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html } from '@open-wc/testing';
 import sinon from 'sinon';
-import type SlTag from './tag';
+import type SlTag from './tag.js';
 
 describe('<sl-tag>', () => {
   it('should render default tag', async () => {

src/components/tooltip/tooltip.test.ts

@@ -1,7 +1,7 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import sinon from 'sinon';
-import type SlTooltip from './tooltip';
+import type SlTooltip from './tooltip.js';
 
 describe('<sl-tooltip>', () => {
   it('should be visible with the open attribute', async () => {

src/components/tree-item/tree-item.test.ts

@@ -1,7 +1,7 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';
 import sinon from 'sinon';
-import type SlTreeItem from './tree-item';
+import type SlTreeItem from './tree-item.js';
 
 describe('<sl-tree-item>', () => {
   let leafItem: SlTreeItem;

tsconfig.json

@@ -3,8 +3,8 @@
   "compilerOptions": {
     /* Visit https://aka.ms/tsconfig.json to read more about this file */
     "target": "es2017",
-    "module": "ES2020",
-    "moduleResolution": "Node",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
     "lib": [
       "dom",
       "dom.Iterable",