From 7891dbef938756aba072b70672a958c49e7ecc50 Mon Sep 17 00:00:00 2001
From: Konnor Rogers <konnor5456@gmail.com>
Date: Fri, 8 Dec 2023 12:30:31 -0500
Subject: [PATCH] Add missing extensions (#1770)

* fix(typescript): add missing extension to imports in typescript

This is required for the types to work with the new
`--module-resolution=node16`.

The list of places to fix was obtained by a crude script:

```sh
rg -g'**/*.ts' -g'!**/*.test.ts' ' from\s+.\.' | rg -v '\.js'
```

References #1765

* add missing extensions

* revert tsconfig

* prettier

* fix test files for NodeNext

* prettier

* changelog entry

* prettier

* prettier

* prettier

---------

Co-authored-by: Andrey Lushnikov <aslushnikov@gmail.com>
---
 docs/pages/resources/changelog.md             |  1 +
 scripts/make-react.js                         |  4 +-
 src/components/animation/animation.test.ts    |  3 +-
 src/components/details/details.test.ts        |  6 +-
 src/components/dialog/dialog.test.ts          |  6 +-
 src/components/drawer/drawer.test.ts          |  2 +-
 .../format-bytes/format-bytes.test.ts         |  2 +-
 .../format-date/format-date.test.ts           |  2 +-
 .../format-number/format-number.test.ts       |  2 +-
 .../icon-button/icon-button.test.ts           |  2 +-
 src/components/icon/icon.test.ts              |  6 +-
 .../image-comparer/image-comparer.test.ts     |  2 +-
 src/components/include/include.test.ts        |  2 +-
 src/components/input/input.test.ts            |  2 +-
 src/components/menu-item/menu-item.test.ts    |  4 +-
 src/components/menu-label/menu-label.test.ts  |  2 +-
 src/components/menu/menu.test.ts              |  4 +-
 src/components/option/option.test.ts          |  2 +-
 .../progress-bar/progress-bar.test.ts         |  2 +-
 .../progress-ring/progress-ring.test.ts       |  2 +-
 src/components/qr-code/qr-code.component.ts   |  3 +-
 src/components/qr-code/qr-code.test.ts        |  2 +-
 .../radio-button/radio-button.test.ts         |  4 +-
 src/components/radio/radio.test.ts            |  4 +-
 src/components/skeleton/skeleton.test.ts      |  2 +-
 src/components/spinner/spinner.test.ts        |  2 +-
 src/components/tab-panel/tab-panel.test.ts    |  2 +-
 src/components/tab/tab.test.ts                |  6 +-
 src/components/tag/tag.test.ts                |  2 +-
 src/components/tooltip/tooltip.test.ts        |  2 +-
 src/components/tree-item/tree-item.test.ts    |  2 +-
 src/events/events.ts                          | 70 +++++++++----------
 src/events/sl-select.ts                       |  2 +-
 src/events/sl-selection-change.ts             |  2 +-
 src/events/sl-slide-change.ts                 |  2 +-
 tsconfig.json                                 |  4 +-
 36 files changed, 86 insertions(+), 83 deletions(-)

diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md
index f632c151..05150b3a 100644
--- a/docs/pages/resources/changelog.md
+++ b/docs/pages/resources/changelog.md
@@ -14,6 +14,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 
 ## Next
 
+- Fixed files that did not have `.js` extensions. [#1770]
 - Fixed `<sl-dialog>` not accounting for elements with hidden dialog controls like `<video>` [#1755]
 - Added the `loading` attribute and the `spinner` and `spinner__base` part to `<sl-menu-item>` [#1700]
 - Fixed focus trapping not scrolling elements into view. [#1750]
diff --git a/scripts/make-react.js b/scripts/make-react.js
index f016669c..911f4270 100644
--- a/scripts/make-react.js
+++ b/scripts/make-react.js
@@ -25,10 +25,10 @@ for await (const component of components) {
   const componentFile = path.join(componentDir, 'index.ts');
   const importPath = component.path.replace(/\.js$/, '.component.js');
   const eventImports = (component.events || [])
-    .map(event => `import type { ${event.eventName} } from '../../events/events';`)
+    .map(event => `import type { ${event.eventName} } from '../../events/events.js';`)
     .join('\n');
   const eventExports = (component.events || [])
-    .map(event => `export type { ${event.eventName} } from '../../events/events';`)
+    .map(event => `export type { ${event.eventName} } from '../../events/events.js';`)
     .join('\n');
   const eventNameImport = (component.events || []).length > 0 ? `import { type EventName } from '@lit/react';` : ``;
   const events = (component.events || [])
diff --git a/src/components/animation/animation.test.ts b/src/components/animation/animation.test.ts
index 43010a50..45869e65 100644
--- a/src/components/animation/animation.test.ts
+++ b/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>', () => {
diff --git a/src/components/details/details.test.ts b/src/components/details/details.test.ts
index bdb2fc3d..ab489cdc 100644
--- a/src/components/details/details.test.ts
+++ b/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', () => {
diff --git a/src/components/dialog/dialog.test.ts b/src/components/dialog/dialog.test.ts
index d0817075..2ed48372 100644
--- a/src/components/dialog/dialog.test.ts
+++ b/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 () => {
diff --git a/src/components/drawer/drawer.test.ts b/src/components/drawer/drawer.test.ts
index ed60e026..22869449 100644
--- a/src/components/drawer/drawer.test.ts
+++ b/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 () => {
diff --git a/src/components/format-bytes/format-bytes.test.ts b/src/components/format-bytes/format-bytes.test.ts
index a6d5df5e..49bd4967 100644
--- a/src/components/format-bytes/format-bytes.test.ts
+++ b/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 ', () => {
diff --git a/src/components/format-date/format-date.test.ts b/src/components/format-date/format-date.test.ts
index 972ed6d4..666bb7ff 100644
--- a/src/components/format-date/format-date.test.ts
+++ b/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 ', () => {
diff --git a/src/components/format-number/format-number.test.ts b/src/components/format-number/format-number.test.ts
index d54089f0..de8671d0 100644
--- a/src/components/format-number/format-number.test.ts
+++ b/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 ', () => {
diff --git a/src/components/icon-button/icon-button.test.ts b/src/components/icon-button/icon-button.test.ts
index c24cf4e2..9f70703b 100644
--- a/src/components/icon-button/icon-button.test.ts
+++ b/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';
 
diff --git a/src/components/icon/icon.test.ts b/src/components/icon/icon.test.ts
index 51601691..260ad339 100644
--- a/src/components/icon/icon.test.ts
+++ b/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': `
diff --git a/src/components/image-comparer/image-comparer.test.ts b/src/components/image-comparer/image-comparer.test.ts
index 12163a45..9f7f783c 100644
--- a/src/components/image-comparer/image-comparer.test.ts
+++ b/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 () => {
diff --git a/src/components/include/include.test.ts b/src/components/include/include.test.ts
index 64eab547..0892ae2b 100644
--- a/src/components/include/include.test.ts
+++ b/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(),
diff --git a/src/components/input/input.test.ts b/src/components/input/input.test.ts
index a7de2700..bf2b4618 100644
--- a/src/components/input/input.test.ts
+++ b/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 () => {
diff --git a/src/components/menu-item/menu-item.test.ts b/src/components/menu-item/menu-item.test.ts
index 65676e53..421f7f1c 100644
--- a/src/components/menu-item/menu-item.test.ts
+++ b/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 () => {
diff --git a/src/components/menu-label/menu-label.test.ts b/src/components/menu-label/menu-label.test.ts
index 24461243..33248e57 100644
--- a/src/components/menu-label/menu-label.test.ts
+++ b/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 () => {
diff --git a/src/components/menu/menu.test.ts b/src/components/menu/menu.test.ts
index 6620c881..b8cbdcc7 100644
--- a/src/components/menu/menu.test.ts
+++ b/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 () => {
diff --git a/src/components/option/option.test.ts b/src/components/option/option.test.ts
index 55283409..1112f300 100644
--- a/src/components/option/option.test.ts
+++ b/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 () => {
diff --git a/src/components/progress-bar/progress-bar.test.ts b/src/components/progress-bar/progress-bar.test.ts
index 87a2cde8..e6c51574 100644
--- a/src/components/progress-bar/progress-bar.test.ts
+++ b/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;
diff --git a/src/components/progress-ring/progress-ring.test.ts b/src/components/progress-ring/progress-ring.test.ts
index 7e167e07..5a2cf68c 100644
--- a/src/components/progress-ring/progress-ring.test.ts
+++ b/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;
diff --git a/src/components/qr-code/qr-code.component.ts b/src/components/qr-code/qr-code.component.ts
index dc180dd4..f5dd4c81 100644
--- a/src/components/qr-code/qr-code.component.ts
+++ b/src/components/qr-code/qr-code.component.ts
@@ -51,7 +51,8 @@ export default class SlQrCode extends ShoelaceElement {
       return;
     }
 
-    QrCreator.render(
+    // For some reason, when changing to "NodeNext", it has the wrong type for QrCreator.
+    (QrCreator as unknown as typeof QrCreator.default).render(
       {
         text: this.value,
         radius: this.radius,
diff --git a/src/components/qr-code/qr-code.test.ts b/src/components/qr-code/qr-code.test.ts
index cff942ea..e81adccb 100644
--- a/src/components/qr-code/qr-code.test.ts
+++ b/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');
diff --git a/src/components/radio-button/radio-button.test.ts b/src/components/radio-button/radio-button.test.ts
index cea58762..2bfa9243 100644
--- a/src/components/radio-button/radio-button.test.ts
+++ b/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 () => {
diff --git a/src/components/radio/radio.test.ts b/src/components/radio/radio.test.ts
index b450795f..69213735 100644
--- a/src/components/radio/radio.test.ts
+++ b/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 () => {
diff --git a/src/components/skeleton/skeleton.test.ts b/src/components/skeleton/skeleton.test.ts
index 8cf69687..6b67473d 100644
--- a/src/components/skeleton/skeleton.test.ts
+++ b/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 () => {
diff --git a/src/components/spinner/spinner.test.ts b/src/components/spinner/spinner.test.ts
index 66d0fce1..6d96ef19 100644
--- a/src/components/spinner/spinner.test.ts
+++ b/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', () => {
diff --git a/src/components/tab-panel/tab-panel.test.ts b/src/components/tab-panel/tab-panel.test.ts
index 8b3087cb..298d37f2 100644
--- a/src/components/tab-panel/tab-panel.test.ts
+++ b/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 () => {
diff --git a/src/components/tab/tab.test.ts b/src/components/tab/tab.test.ts
index c64d4f32..48cc660a 100644
--- a/src/components/tab/tab.test.ts
+++ b/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 () => {
diff --git a/src/components/tag/tag.test.ts b/src/components/tag/tag.test.ts
index c6c5907b..a3543da0 100644
--- a/src/components/tag/tag.test.ts
+++ b/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 () => {
diff --git a/src/components/tooltip/tooltip.test.ts b/src/components/tooltip/tooltip.test.ts
index 457cf0a2..82777f30 100644
--- a/src/components/tooltip/tooltip.test.ts
+++ b/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 () => {
diff --git a/src/components/tree-item/tree-item.test.ts b/src/components/tree-item/tree-item.test.ts
index 65ad5add..023eb1f2 100644
--- a/src/components/tree-item/tree-item.test.ts
+++ b/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;
diff --git a/src/events/events.ts b/src/events/events.ts
index ca81481b..44e5846b 100644
--- a/src/events/events.ts
+++ b/src/events/events.ts
@@ -1,35 +1,35 @@
-export type { SlAfterCollapseEvent } from './sl-after-collapse';
-export type { SlAfterExpandEvent } from './sl-after-expand';
-export type { SlAfterHideEvent } from './sl-after-hide';
-export type { SlAfterShowEvent } from './sl-after-show';
-export type { SlBlurEvent } from './sl-blur';
-export type { SlCancelEvent } from './sl-cancel';
-export type { SlChangeEvent } from './sl-change';
-export type { SlClearEvent } from './sl-clear';
-export type { SlCloseEvent } from './sl-close';
-export type { SlCollapseEvent } from './sl-collapse';
-export type { SlCopyEvent } from './sl-copy';
-export type { SlErrorEvent } from './sl-error';
-export type { SlExpandEvent } from './sl-expand';
-export type { SlFinishEvent } from './sl-finish';
-export type { SlFocusEvent } from './sl-focus';
-export type { SlHideEvent } from './sl-hide';
-export type { SlHoverEvent } from './sl-hover';
-export type { SlInitialFocusEvent } from './sl-initial-focus';
-export type { SlInputEvent } from './sl-input';
-export type { SlInvalidEvent } from './sl-invalid';
-export type { SlLazyChangeEvent } from './sl-lazy-change';
-export type { SlLazyLoadEvent } from './sl-lazy-load';
-export type { SlLoadEvent } from './sl-load';
-export type { SlMutationEvent } from './sl-mutation';
-export type { SlRemoveEvent } from './sl-remove';
-export type { SlRepositionEvent } from './sl-reposition';
-export type { SlRequestCloseEvent } from './sl-request-close';
-export type { SlResizeEvent } from './sl-resize';
-export type { SlSelectEvent } from './sl-select';
-export type { SlSelectionChangeEvent } from './sl-selection-change';
-export type { SlShowEvent } from './sl-show';
-export type { SlSlideChangeEvent } from './sl-slide-change';
-export type { SlStartEvent } from './sl-start';
-export type { SlTabHideEvent } from './sl-tab-hide';
-export type { SlTabShowEvent } from './sl-tab-show';
+export type { SlAfterCollapseEvent } from './sl-after-collapse.js';
+export type { SlAfterExpandEvent } from './sl-after-expand.js';
+export type { SlAfterHideEvent } from './sl-after-hide.js';
+export type { SlAfterShowEvent } from './sl-after-show.js';
+export type { SlBlurEvent } from './sl-blur.js';
+export type { SlCancelEvent } from './sl-cancel.js';
+export type { SlChangeEvent } from './sl-change.js';
+export type { SlClearEvent } from './sl-clear.js';
+export type { SlCloseEvent } from './sl-close.js';
+export type { SlCollapseEvent } from './sl-collapse.js';
+export type { SlCopyEvent } from './sl-copy.js';
+export type { SlErrorEvent } from './sl-error.js';
+export type { SlExpandEvent } from './sl-expand.js';
+export type { SlFinishEvent } from './sl-finish.js';
+export type { SlFocusEvent } from './sl-focus.js';
+export type { SlHideEvent } from './sl-hide.js';
+export type { SlHoverEvent } from './sl-hover.js';
+export type { SlInitialFocusEvent } from './sl-initial-focus.js';
+export type { SlInputEvent } from './sl-input.js';
+export type { SlInvalidEvent } from './sl-invalid.js';
+export type { SlLazyChangeEvent } from './sl-lazy-change.js';
+export type { SlLazyLoadEvent } from './sl-lazy-load.js';
+export type { SlLoadEvent } from './sl-load.js';
+export type { SlMutationEvent } from './sl-mutation.js';
+export type { SlRemoveEvent } from './sl-remove.js';
+export type { SlRepositionEvent } from './sl-reposition.js';
+export type { SlRequestCloseEvent } from './sl-request-close.js';
+export type { SlResizeEvent } from './sl-resize.js';
+export type { SlSelectEvent } from './sl-select.js';
+export type { SlSelectionChangeEvent } from './sl-selection-change.js';
+export type { SlShowEvent } from './sl-show.js';
+export type { SlSlideChangeEvent } from './sl-slide-change.js';
+export type { SlStartEvent } from './sl-start.js';
+export type { SlTabHideEvent } from './sl-tab-hide.js';
+export type { SlTabShowEvent } from './sl-tab-show.js';
diff --git a/src/events/sl-select.ts b/src/events/sl-select.ts
index daf062cc..f6ea4a9f 100644
--- a/src/events/sl-select.ts
+++ b/src/events/sl-select.ts
@@ -1,4 +1,4 @@
-import type SlMenuItem from '../components/menu-item/menu-item';
+import type SlMenuItem from '../components/menu-item/menu-item.js';
 
 export type SlSelectEvent = CustomEvent<{ item: SlMenuItem }>;
 
diff --git a/src/events/sl-selection-change.ts b/src/events/sl-selection-change.ts
index 12d9c83f..a3177b6a 100644
--- a/src/events/sl-selection-change.ts
+++ b/src/events/sl-selection-change.ts
@@ -1,4 +1,4 @@
-import type SlTreeItem from '../components/tree-item/tree-item';
+import type SlTreeItem from '../components/tree-item/tree-item.js';
 
 export type SlSelectionChangeEvent = CustomEvent<{ selection: SlTreeItem[] }>;
 
diff --git a/src/events/sl-slide-change.ts b/src/events/sl-slide-change.ts
index d9fc22b1..330e8fb9 100644
--- a/src/events/sl-slide-change.ts
+++ b/src/events/sl-slide-change.ts
@@ -1,4 +1,4 @@
-import type SlCarouselItem from '../components/carousel-item/carousel-item';
+import type SlCarouselItem from '../components/carousel-item/carousel-item.js';
 
 export type SlSlideChangeEvent = CustomEvent<{ index: number; slide: SlCarouselItem }>;
 
diff --git a/tsconfig.json b/tsconfig.json
index 3aea64b3..0756e5a7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,7 +3,8 @@
   "compilerOptions": {
     /* Visit https://aka.ms/tsconfig.json to read more about this file */
     "target": "es2017",
-    "module": "es2020",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
     "lib": [
       "dom",
       "dom.Iterable",
@@ -20,7 +21,6 @@
     "noUnusedParameters": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
-    "moduleResolution": "node",
     "esModuleInterop": true,
     "experimentalDecorators": true,
     "useDefineForClassFields": false, /* See https://lit.dev/docs/components/properties/#avoiding-issues-with-class-fields */