fix: use verbatimModuleSyntax and isolatedModules (#1534)

* feat: use verbatimModuleSyntax and isolatedModules

* prettier

* remove newline

* prettier

docs/pages/resources/changelog.md

@@ -14,6 +14,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 
 ## Next
 
+- Added `--isolatedModules` and `--verbatimModuleSyntax` to `tsconfig.json`. For anyone directly importing event types, they no longer provide a default export due to these options being enabled. For people using the `events/event.js` file directly, there is no change.
 - Added support for submenus in `<sl-menu-item>` [#1410]
 - Added the `--submenu-offset` custom property to `<sl-menu-item>` [#1410]
 - Fixed type issues with the `ref` attribute in React Wrappers. [#1526]

src/components/color-picker/color-picker.component.ts

@@ -20,8 +20,8 @@ import SlVisuallyHidden from '../visually-hidden/visually-hidden.component.js';
 import styles from './color-picker.styles.js';
 import type { CSSResultGroup } from 'lit';
 import type { ShoelaceFormControl } from '../../internal/shoelace-element.js';
-import type SlChangeEvent from '../../events/sl-change.js';
-import type SlInputEvent from '../../events/sl-input.js';
+import type { SlChangeEvent } from '../../events/sl-change.js';
+import type { SlInputEvent } from '../../events/sl-input.js';
 
 const hasEyeDropper = 'EyeDropper' in window;
 

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';
-import type SlShowEvent from '../../events/sl-show';
 
 describe('<sl-details>', () => {
   describe('accessibility', () => {

src/components/dropdown/dropdown.component.ts

@@ -11,10 +11,10 @@ import ShoelaceElement from '../../internal/shoelace-element.js';
 import SlPopup from '../popup/popup.component.js';
 import styles from './dropdown.styles.js';
 import type { CSSResultGroup } from 'lit';
+import type { SlSelectEvent } from '../../events/sl-select.js';
 import type SlButton from '../button/button.js';
 import type SlIconButton from '../icon-button/icon-button.js';
 import type SlMenu from '../menu/menu.js';
-import type SlSelectEvent from '../../events/sl-select.js';
 
 /**
  * @summary Dropdowns expose additional content that "drops down" in a panel.

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 { SlErrorEvent } from '../../events/sl-error';
+import type { SlLoadEvent } from '../../events/sl-load';
 import type SlIcon from './icon';
-import type SlLoadEvent from '../../events/sl-load';
 
 const testLibraryIcons = {
   'test-icon1': `

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';
 
 describe('<sl-menu-item>', () => {
   it('should pass accessibility tests', 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';
 
 describe('<sl-menu>', () => {
   it('emits sl-select with the correct event detail when clicking an item', async () => {

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

@@ -4,7 +4,7 @@ import { clickOnElement } from '../../internal/test.js';
 import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
-import type SlChangeEvent from '../../events/sl-change.js';
+import type { SlChangeEvent } from '../../events/sl-change.js';
 import type SlRadio from '../radio/radio.js';
 import type SlRadioGroup from './radio-group.js';
 

src/components/select/select.component.ts

@@ -18,8 +18,8 @@ import SlTag from '../tag/tag.component.js';
 import styles from './select.styles.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 import type { ShoelaceFormControl } from '../../internal/shoelace-element.js';
+import type { SlRemoveEvent } from '../../events/sl-remove.js';
 import type SlOption from '../option/option.component.js';
-import type SlRemoveEvent from '../../events/sl-remove.js';
 
 /**
  * @summary Selects allow you to choose items from a menu of predefined options.

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

@@ -7,10 +7,10 @@ import { queryByTestId } from '../../internal/test/data-testid-helpers.js';
 import { sendKeys } from '@web/test-runner-commands';
 import { waitForScrollingToEnd } from '../../internal/test/wait-for-scrolling.js';
 import type { HTMLTemplateResult } from 'lit';
+import type { SlTabShowEvent } from '../../events/sl-tab-show.js';
 import type SlTab from '../tab/tab.js';
 import type SlTabGroup from './tab-group.js';
 import type SlTabPanel from '../tab-panel/tab-panel.js';
-import type SlTabShowEvent from '../../events/sl-tab-show.js';
 
 interface ClientRectangles {
   body?: DOMRect;

src/events/events.ts

@@ -1,35 +1,35 @@
-export type { default as SlAfterCollapseEvent } from './sl-after-collapse';
-export type { default as SlAfterExpandEvent } from './sl-after-expand';
-export type { default as SlAfterHideEvent } from './sl-after-hide';
-export type { default as SlAfterShowEvent } from './sl-after-show';
-export type { default as SlBlurEvent } from './sl-blur';
-export type { default as SlCancelEvent } from './sl-cancel';
-export type { default as SlChangeEvent } from './sl-change';
-export type { default as SlClearEvent } from './sl-clear';
-export type { default as SlCloseEvent } from './sl-close';
-export type { default as SlCollapseEvent } from './sl-collapse';
-export type { default as SlCopyEvent } from './sl-copy';
-export type { default as SlErrorEvent } from './sl-error';
-export type { default as SlExpandEvent } from './sl-expand';
-export type { default as SlFinishEvent } from './sl-finish';
-export type { default as SlFocusEvent } from './sl-focus';
-export type { default as SlHideEvent } from './sl-hide';
-export type { default as SlHoverEvent } from './sl-hover';
-export type { default as SlInitialFocusEvent } from './sl-initial-focus';
-export type { default as SlInputEvent } from './sl-input';
-export type { default as SlInvalidEvent } from './sl-invalid';
-export type { default as SlLazyChangeEvent } from './sl-lazy-change';
-export type { default as SlLazyLoadEvent } from './sl-lazy-load';
-export type { default as SlLoadEvent } from './sl-load';
-export type { default as SlMutationEvent } from './sl-mutation';
-export type { default as SlRemoveEvent } from './sl-remove';
-export type { default as SlRepositionEvent } from './sl-reposition';
-export type { default as SlRequestCloseEvent } from './sl-request-close';
-export type { default as SlResizeEvent } from './sl-resize';
-export type { default as SlSelectEvent } from './sl-select';
-export type { default as SlSelectionChangeEvent } from './sl-selection-change';
-export type { default as SlShowEvent } from './sl-show';
-export type { default as SlSlideChangeEvent } from './sl-slide-change';
-export type { default as SlStartEvent } from './sl-start';
-export type { default as SlTabHideEvent } from './sl-tab-hide';
-export type { default as SlTabShowEvent } from './sl-tab-show';
+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';

src/events/sl-after-collapse.ts

@@ -1,9 +1,7 @@
-type SlAfterCollapseEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlAfterCollapseEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-after-collapse': SlAfterCollapseEvent;
   }
 }
-
-export default SlAfterCollapseEvent;

src/events/sl-after-expand.ts

@@ -1,9 +1,7 @@
-type SlAfterExpandEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlAfterExpandEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-after-expand': SlAfterExpandEvent;
   }
 }
-
-export default SlAfterExpandEvent;

src/events/sl-after-hide.ts

@@ -1,9 +1,7 @@
-type SlAfterHideEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlAfterHideEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-after-hide': SlAfterHideEvent;
   }
 }
-
-export default SlAfterHideEvent;

src/events/sl-after-show.ts

@@ -1,9 +1,7 @@
-type SlAfterShowEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlAfterShowEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-after-show': SlAfterShowEvent;
   }
 }
-
-export default SlAfterShowEvent;

src/events/sl-blur.ts

@@ -1,9 +1,7 @@
-type SlBlurEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlBlurEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-blur': SlBlurEvent;
   }
 }
-
-export default SlBlurEvent;

src/events/sl-cancel.ts

@@ -1,9 +1,7 @@
-type SlCancelEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlCancelEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-cancel': SlCancelEvent;
   }
 }
-
-export default SlCancelEvent;

src/events/sl-change.ts

@@ -1,9 +1,7 @@
-type SlChangeEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlChangeEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-change': SlChangeEvent;
   }
 }
-
-export default SlChangeEvent;

src/events/sl-clear.ts

@@ -1,9 +1,7 @@
-type SlClearEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlClearEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-clear': SlClearEvent;
   }
 }
-
-export default SlClearEvent;

src/events/sl-close.ts

@@ -1,9 +1,7 @@
-type SlCloseEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlCloseEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-close': SlCloseEvent;
   }
 }
-
-export default SlCloseEvent;

src/events/sl-collapse.ts

@@ -1,9 +1,7 @@
-type SlCollapseEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlCollapseEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-collapse': SlCollapseEvent;
   }
 }
-
-export default SlCollapseEvent;

src/events/sl-copy.ts

@@ -1,9 +1,7 @@
-type SlCopyEvent = CustomEvent<{ value: string }>;
+export type SlCopyEvent = CustomEvent<{ value: string }>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-copy': SlCopyEvent;
   }
 }
-
-export default SlCopyEvent;

src/events/sl-error.ts

@@ -1,9 +1,7 @@
-type SlErrorEvent = CustomEvent<{ status?: number }>;
+export type SlErrorEvent = CustomEvent<{ status?: number }>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-error': SlErrorEvent;
   }
 }
-
-export default SlErrorEvent;

src/events/sl-expand.ts

@@ -1,9 +1,7 @@
-type SlExpandEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlExpandEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-expand': SlExpandEvent;
   }
 }
-
-export default SlExpandEvent;

src/events/sl-finish.ts

@@ -1,9 +1,7 @@
-type SlFinishEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlFinishEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-finish': SlFinishEvent;
   }
 }
-
-export default SlFinishEvent;

src/events/sl-focus.ts

@@ -1,9 +1,7 @@
-type SlFocusEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlFocusEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-focus': SlFocusEvent;
   }
 }
-
-export default SlFocusEvent;

src/events/sl-hide.ts

@@ -1,9 +1,7 @@
-type SlHideEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlHideEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-hide': SlHideEvent;
   }
 }
-
-export default SlHideEvent;

src/events/sl-hover.ts

@@ -1,4 +1,4 @@
-type SlHoverEvent = CustomEvent<{
+export type SlHoverEvent = CustomEvent<{
   phase: 'start' | 'move' | 'end';
   value: number;
 }>;
@@ -8,5 +8,3 @@ declare global {
     'sl-hover': SlHoverEvent;
   }
 }
-
-export default SlHoverEvent;

src/events/sl-initial-focus.ts

@@ -1,9 +1,7 @@
-type SlInitialFocusEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlInitialFocusEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-initial-focus': SlInitialFocusEvent;
   }
 }
-
-export default SlInitialFocusEvent;

src/events/sl-input.ts

@@ -1,9 +1,7 @@
-type SlInputEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlInputEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-input': SlInputEvent;
   }
 }
-
-export default SlInputEvent;

src/events/sl-invalid.ts

@@ -1,9 +1,7 @@
-type SlInvalidEvent = CustomEvent<Record<PropertyKey, never>>;
+export type SlInvalidEvent = CustomEvent<Record<PropertyKey, never>>;
 
 declare global {
   interface GlobalEventHandlersEventMap {
     'sl-invalid': SlInvalidEvent;
   }
 }
-
-export default SlInvalidEvent;