fix extensionless imports

.eslintrc.cjs

@@ -185,6 +185,17 @@ module.exports = {
         ]
       }
     ],
+    'import/extensions': [
+      'error',
+      'always',
+      {
+        ignorePackages: true,
+        pattern: {
+          js: 'always',
+          ts: 'never'
+        }
+      }
+    ],
     'import/no-duplicates': 'warn',
     'sort-imports-es6-autofix/sort-imports-es6': [
       2,

scripts/make-react.js

@@ -49,7 +49,7 @@ components.map(component => {
     })
   );
 
-  index.push(`export { default as ${component.name} } from './${tagWithoutPrefix}';`);
+  index.push(`export { default as ${component.name} } from './${tagWithoutPrefix}/index.js';`);
 
   fs.writeFileSync(componentFile, source, 'utf8');
 });

scripts/plop/plopfile.js

@@ -54,7 +54,7 @@ export default function (plop) {
         type: 'modify',
         path: '../../src/shoelace.ts',
         pattern: /\/\* plop:component \*\//,
-        template: `export { default as {{ properCase tag }} } from './components/{{ tagWithoutPrefix tag }}/{{ tagWithoutPrefix tag }}';\n/* plop:component */`
+        template: `export { default as {{ properCase tag }} } from './components/{{ tagWithoutPrefix tag }}/{{ tagWithoutPrefix tag }}.js';\n/* plop:component */`
       }
     ]
   });

scripts/plop/templates/component/component.hbs

@@ -1,9 +1,9 @@
 import { customElement, property } from 'lit/decorators.js';
 import { html } from 'lit';
-import { LocalizeController } from '../../utilities/localize';
-import { watch } from '../../internal/watch';
-import ShoelaceElement from '../../internal/shoelace-element';
-import styles from './{{ tagWithoutPrefix tag }}.styles';
+import { LocalizeController } from '../../utilities/localize.js';
+import { watch } from '../../internal/watch.js';
+import ShoelaceElement from '../../internal/shoelace-element.js';
+import styles from './{{ tagWithoutPrefix tag }}.styles.js';
 import type { CSSResultGroup } from 'lit';
 
 /**

scripts/plop/templates/component/styles.hbs

@@ -1,5 +1,5 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
+import componentStyles from '../../styles/component.styles.js';
 
 export default css`
   ${componentStyles}

src/components/alert/alert.styles.ts

@@ -1,5 +1,5 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
+import componentStyles from '../../styles/component.styles.js';
 
 export default css`
   ${componentStyles}

src/components/alert/alert.test.ts

@@ -1,11 +1,11 @@
 import '../../../dist/shoelace.js';
 import { aTimeout, expect, fixture, html, oneEvent } from '@open-wc/testing';
-import { clickOnElement, moveMouseOnElement } from '../../internal/test';
-import { queryByTestId } from '../../internal/test/data-testid-helpers';
+import { clickOnElement, moveMouseOnElement } from '../../internal/test.js';
+import { queryByTestId } from '../../internal/test/data-testid-helpers.js';
 import { resetMouse } from '@web/test-runner-commands';
 import sinon from 'sinon';
-import type SlAlert from './alert';
-import type SlIconButton from '../icon-button/icon-button';
+import type SlAlert from './alert.js';
+import type SlIconButton from '../icon-button/icon-button.js';
 
 const getAlertContainer = (alert: SlAlert): HTMLElement => {
   return alert.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;

src/components/alert/alert.ts

@@ -1,15 +1,15 @@
-import '../icon-button/icon-button';
-import { animateTo, stopAnimations } from '../../internal/animate';
+import '../icon-button/icon-button.js';
+import { animateTo, stopAnimations } from '../../internal/animate.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property, query } from 'lit/decorators.js';
-import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry';
-import { HasSlotController } from '../../internal/slot';
+import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';
+import { HasSlotController } from '../../internal/slot.js';
 import { html } from 'lit';
-import { LocalizeController } from '../../utilities/localize';
-import { waitForEvent } from '../../internal/event';
-import { watch } from '../../internal/watch';
-import ShoelaceElement from '../../internal/shoelace-element';
-import styles from './alert.styles';
+import { LocalizeController } from '../../utilities/localize.js';
+import { waitForEvent } from '../../internal/event.js';
+import { watch } from '../../internal/watch.js';
+import ShoelaceElement from '../../internal/shoelace-element.js';
+import styles from './alert.styles.js';
 import type { CSSResultGroup } from 'lit';
 
 const toastStack = Object.assign(document.createElement('div'), { className: 'sl-toast-stack' });

src/components/animated-image/animated-image.styles.ts

@@ -1,5 +1,5 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
+import componentStyles from '../../styles/component.styles.js';
 
 export default css`
   ${componentStyles}

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

@@ -1,7 +1,7 @@
 import '../../../dist/shoelace.js';
-import { clickOnElement } from '../../internal/test';
+import { clickOnElement } from '../../internal/test.js';
 import { expect, fixture, html, oneEvent } from '@open-wc/testing';
-import type SlAnimatedImage from './animated-image';
+import type SlAnimatedImage from './animated-image.js';
 
 describe('<sl-animated-image>', () => {
   it('should render a component', async () => {

src/components/animated-image/animated-image.ts

@@ -1,9 +1,9 @@
-import '../icon/icon';
+import '../icon/icon.js';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { html } from 'lit';
-import { watch } from '../../internal/watch';
-import ShoelaceElement from '../../internal/shoelace-element';
-import styles from './animated-image.styles';
+import { watch } from '../../internal/watch.js';
+import ShoelaceElement from '../../internal/shoelace-element.js';
+import styles from './animated-image.styles.js';
 import type { CSSResultGroup } from 'lit';
 
 /**

src/components/animation/animation.styles.ts

@@ -1,5 +1,5 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
+import componentStyles from '../../styles/component.styles.js';
 
 export default css`
   ${componentStyles}

src/components/animation/animation.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/shoelace.js';
 import { aTimeout, expect, fixture, html, oneEvent } from '@open-wc/testing';
-import type SlAnimation from './animation';
+import type SlAnimation from './animation.js';
 
 describe('<sl-animation>', () => {
   const boxToAnimate = html`<div style="width: 10px; height: 10px;" data-testid="animated-box"></div>`;

src/components/animation/animation.ts

@@ -1,9 +1,9 @@
-import { animations } from './animations';
+import { animations } from './animations.js';
 import { customElement, property, queryAsync } from 'lit/decorators.js';
 import { html } from 'lit';
-import { watch } from '../../internal/watch';
-import ShoelaceElement from '../../internal/shoelace-element';
-import styles from './animation.styles';
+import { watch } from '../../internal/watch.js';
+import ShoelaceElement from '../../internal/shoelace-element.js';
+import styles from './animation.styles.js';
 import type { CSSResultGroup } from 'lit';
 
 /**

src/components/avatar/avatar.styles.ts

@@ -1,5 +1,5 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
+import componentStyles from '../../styles/component.styles.js';
 
 export default css`
   ${componentStyles}

src/components/avatar/avatar.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/shoelace.js';
 import { aTimeout, expect, fixture, html, waitUntil } from '@open-wc/testing';
-import type SlAvatar from './avatar';
+import type SlAvatar from './avatar.js';
 
 // The default avatar background just misses AA contrast, but the next step up is way too dark. Since avatars aren't
 // used to display text, we're going to relax this rule.

src/components/avatar/avatar.ts

@@ -1,10 +1,10 @@
-import '../icon/icon';
+import '../icon/icon.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property, state } from 'lit/decorators.js';
 import { html } from 'lit';
-import { watch } from '../../internal/watch';
-import ShoelaceElement from '../../internal/shoelace-element';
-import styles from './avatar.styles';
+import { watch } from '../../internal/watch.js';
+import ShoelaceElement from '../../internal/shoelace-element.js';
+import styles from './avatar.styles.js';
 import type { CSSResultGroup } from 'lit';
 
 /**

src/components/badge/badge.styles.ts

@@ -1,5 +1,5 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
+import componentStyles from '../../styles/component.styles.js';
 
 export default css`
   ${componentStyles}

src/components/badge/badge.test.ts

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

src/components/badge/badge.ts

@@ -1,8 +1,8 @@
 import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property } from 'lit/decorators.js';
 import { html } from 'lit';
-import ShoelaceElement from '../../internal/shoelace-element';
-import styles from './badge.styles';
+import ShoelaceElement from '../../internal/shoelace-element.js';
+import styles from './badge.styles.js';
 import type { CSSResultGroup } from 'lit';
 
 /**

src/components/breadcrumb-item/breadcrumb-item.styles.ts

@@ -1,5 +1,5 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
+import componentStyles from '../../styles/component.styles.js';
 
 export default css`
   ${componentStyles}

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

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

src/components/breadcrumb-item/breadcrumb-item.ts

@@ -1,10 +1,10 @@
 import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property } from 'lit/decorators.js';
-import { HasSlotController } from '../../internal/slot';
+import { HasSlotController } from '../../internal/slot.js';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import ShoelaceElement from '../../internal/shoelace-element';
-import styles from './breadcrumb-item.styles';
+import ShoelaceElement from '../../internal/shoelace-element.js';
+import styles from './breadcrumb-item.styles.js';
 import type { CSSResultGroup } from 'lit';
 
 /**

src/components/breadcrumb/breadcrumb.styles.ts

@@ -1,5 +1,5 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
+import componentStyles from '../../styles/component.styles.js';
 
 export default css`
   ${componentStyles}

src/components/breadcrumb/breadcrumb.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html } from '@open-wc/testing';
-import type SlBreadcrumb from './breadcrumb';
+import type SlBreadcrumb from './breadcrumb.js';
 
 // The default link color just misses AA contrast, but the next step up is way too dark. Maybe we can solve this in the
 // future with a prefers-contrast media query.

src/components/breadcrumb/breadcrumb.ts

@@ -1,11 +1,11 @@
-import '../icon/icon';
+import '../icon/icon.js';
 import { customElement, property, query } from 'lit/decorators.js';
 import { html } from 'lit';
-import { LocalizeController } from '../../utilities/localize';
-import ShoelaceElement from '../../internal/shoelace-element';
-import styles from './breadcrumb.styles';
+import { LocalizeController } from '../../utilities/localize.js';
+import ShoelaceElement from '../../internal/shoelace-element.js';
+import styles from './breadcrumb.styles.js';
 import type { CSSResultGroup } from 'lit';
-import type SlBreadcrumbItem from '../breadcrumb-item/breadcrumb-item';
+import type SlBreadcrumbItem from '../breadcrumb-item/breadcrumb-item.js';
 
 /**
  * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.

src/components/button-group/button-group.styles.ts

@@ -1,5 +1,5 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
+import componentStyles from '../../styles/component.styles.js';
 
 export default css`
   ${componentStyles}

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

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

src/components/button-group/button-group.ts

@@ -1,7 +1,7 @@
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { html } from 'lit';
-import ShoelaceElement from '../../internal/shoelace-element';
-import styles from './button-group.styles';
+import ShoelaceElement from '../../internal/shoelace-element.js';
+import styles from './button-group.styles.js';
 import type { CSSResultGroup } from 'lit';
 
 /**

src/components/button/button.styles.ts

@@ -1,5 +1,5 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
+import componentStyles from '../../styles/component.styles.js';
 
 export default css`
   ${componentStyles}

src/components/button/button.test.ts

@@ -1,8 +1,8 @@
 import '../../../dist/shoelace.js';
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
-import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests';
+import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
 import sinon from 'sinon';
-import type SlButton from './button';
+import type SlButton from './button.js';
 
 const variants = ['default', 'primary', 'success', 'neutral', 'warning', 'danger'];
 

src/components/button/button.ts

@@ -1,17 +1,17 @@
-import '../icon/icon';
-import '../spinner/spinner';
+import '../icon/icon.js';
+import '../spinner/spinner.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { FormControlController, validValidityState } from '../../internal/form';
-import { HasSlotController } from '../../internal/slot';
+import { FormControlController, validValidityState } from '../../internal/form.js';
+import { HasSlotController } from '../../internal/slot.js';
 import { html, literal } from 'lit/static-html.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { LocalizeController } from '../../utilities/localize';
-import { watch } from '../../internal/watch';
-import ShoelaceElement from '../../internal/shoelace-element';
-import styles from './button.styles';
+import { LocalizeController } from '../../utilities/localize.js';
+import { watch } from '../../internal/watch.js';
+import ShoelaceElement from '../../internal/shoelace-element.js';
+import styles from './button.styles.js';
 import type { CSSResultGroup } from 'lit';
-import type { ShoelaceFormControl } from '../../internal/shoelace-element';
+import type { ShoelaceFormControl } from '../../internal/shoelace-element.js';
 
 /**
  * @summary Buttons represent actions that are available to the user.

src/components/card/card.styles.ts

@@ -1,5 +1,5 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
+import componentStyles from '../../styles/component.styles.js';
 
 export default css`
   ${componentStyles}

src/components/card/card.test.ts

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

src/components/card/card.ts

@@ -1,9 +1,9 @@
 import { classMap } from 'lit/directives/class-map.js';
 import { customElement } from 'lit/decorators.js';
-import { HasSlotController } from '../../internal/slot';
+import { HasSlotController } from '../../internal/slot.js';
 import { html } from 'lit';
-import ShoelaceElement from '../../internal/shoelace-element';
-import styles from './card.styles';
+import ShoelaceElement from '../../internal/shoelace-element.js';
+import styles from './card.styles.js';
 import type { CSSResultGroup } from 'lit';
 
 /**

src/components/carousel-item/carousel-item.styles.ts

@@ -1,5 +1,5 @@
 import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
+import componentStyles from '../../styles/component.styles.js';
 
 export default css`
   ${componentStyles}

src/components/carousel-item/carousel-item.ts

@@ -1,7 +1,7 @@
 import { customElement } from 'lit/decorators.js';
 import { html } from 'lit';
-import ShoelaceElement from '../../internal/shoelace-element';
-import styles from './carousel-item.styles';
+import ShoelaceElement from '../../internal/shoelace-element.js';
+import styles from './carousel-item.styles.js';
 import type { CSSResultGroup } from 'lit';
 
 /**