Use typed events in components and tests

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

@@ -28,22 +28,22 @@ export default class SlButtonGroup extends ShoelaceElement {
    */
   @property() label = '';
 
-  private handleFocus(event: CustomEvent) {
+  private handleFocus(event: Event) {
     const button = findButton(event.target as HTMLElement);
     button?.classList.add('sl-button-group__button--focus');
   }
 
-  private handleBlur(event: CustomEvent) {
+  private handleBlur(event: Event) {
     const button = findButton(event.target as HTMLElement);
     button?.classList.remove('sl-button-group__button--focus');
   }
 
-  private handleMouseOver(event: CustomEvent) {
+  private handleMouseOver(event: Event) {
     const button = findButton(event.target as HTMLElement);
     button?.classList.add('sl-button-group__button--hover');
   }
 
-  private handleMouseOut(event: CustomEvent) {
+  private handleMouseOut(event: Event) {
     const button = findButton(event.target as HTMLElement);
     button?.classList.remove('sl-button-group__button--hover');
   }

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

@@ -20,8 +20,10 @@ import ShoelaceElement from '../../internal/shoelace-element';
 import styles from './color-picker.styles';
 import type { CSSResultGroup } from 'lit';
 import type { ShoelaceFormControl } from '../../internal/shoelace-element';
+import type SlChangeEvent from '../../events/sl-change';
 import type SlDropdown from '../dropdown/dropdown';
 import type SlInput from '../input/input';
+import type SlInputEvent from '../../events/sl-input';
 
 const hasEyeDropper = 'EyeDropper' in window;
 
@@ -368,7 +370,7 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo
     }
   }
 
-  private handleInputChange(event: CustomEvent) {
+  private handleInputChange(event: SlChangeEvent) {
     const target = event.target as HTMLInputElement;
     const oldValue = this.value;
 
@@ -388,7 +390,7 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo
     }
   }
 
-  private handleInputInput(event: CustomEvent) {
+  private handleInputInput(event: SlInputEvent) {
     // Prevent the <sl-input>'s sl-input event from bubbling up
     event.stopPropagation();
   }

src/components/details/details.test.ts

@@ -2,6 +2,8 @@
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import sinon from 'sinon';
 import type SlDetails from './details';
+import type SlHideEvent from '../../events/sl-hide';
+import type SlShowEvent from '../../events/sl-show';
 
 describe('<sl-details>', () => {
   it('should be visible with the open attribute', async () => {
@@ -134,7 +136,7 @@ describe('<sl-details>', () => {
         consequat.
       </sl-details>
     `);
-    const showHandler = sinon.spy((event: CustomEvent) => event.preventDefault());
+    const showHandler = sinon.spy((event: SlShowEvent) => event.preventDefault());
 
     el.addEventListener('sl-show', showHandler);
     el.open = true;
@@ -153,7 +155,7 @@ describe('<sl-details>', () => {
         consequat.
       </sl-details>
     `);
-    const hideHandler = sinon.spy((event: CustomEvent) => event.preventDefault());
+    const hideHandler = sinon.spy((event: SlHideEvent) => event.preventDefault());
 
     el.addEventListener('sl-hide', hideHandler);
     el.open = false;

src/components/dropdown/dropdown.ts

@@ -17,6 +17,7 @@ import type SlIconButton from '../icon-button/icon-button';
 import type SlMenu from '../menu/menu';
 import type SlMenuItem from '../menu-item/menu-item';
 import type SlPopup from '../popup/popup';
+import type SlSelectEvent from '../../events/sl-select';
 
 /**
  * @summary Dropdowns expose additional content that "drops down" in a panel.
@@ -206,7 +207,7 @@ export default class SlDropdown extends ShoelaceElement {
     scrollIntoView(item, this.panel);
   }
 
-  handlePanelSelect(event: CustomEvent) {
+  handlePanelSelect(event: SlSelectEvent) {
     const target = event.target as HTMLElement;
 
     // Hide the dropdown when a menu item is selected

src/components/icon/icon.test.ts

@@ -1,6 +1,8 @@
 import { elementUpdated, expect, fixture, html, oneEvent } from '@open-wc/testing';
 import { registerIconLibrary } from '../../../dist/shoelace.js';
+import type SlErrorEvent from '../../events/sl-error';
 import type SlIcon from './icon';
+import type SlLoadEvent from '../../events/sl-load';
 
 const testLibraryIcons = {
   'test-icon1': `
@@ -46,7 +48,7 @@ describe('<sl-icon>', () => {
 
     it('renders pre-loaded system icons and emits sl-load event', async () => {
       const el = await fixture<SlIcon>(html` <sl-icon library="system"></sl-icon> `);
-      const listener = oneEvent(el, 'sl-load') as Promise<CustomEvent>;
+      const listener = oneEvent(el, 'sl-load') as Promise<SlLoadEvent>;
 
       el.name = 'check';
       const ev = await listener;
@@ -100,7 +102,7 @@ describe('<sl-icon>', () => {
   describe('new library', () => {
     it('renders icons from the new library and emits sl-load event', async () => {
       const el = await fixture<SlIcon>(html` <sl-icon library="test-library"></sl-icon> `);
-      const listener = oneEvent(el, 'sl-load') as Promise<CustomEvent>;
+      const listener = oneEvent(el, 'sl-load') as Promise<SlLoadEvent>;
 
       el.name = 'test-icon1';
       const ev = await listener;
@@ -129,7 +131,7 @@ describe('<sl-icon>', () => {
 
     it('emits sl-error when the file cant be retrieved', async () => {
       const el = await fixture<SlIcon>(html` <sl-icon library="test-library"></sl-icon> `);
-      const listener = oneEvent(el, 'sl-error') as Promise<CustomEvent>;
+      const listener = oneEvent(el, 'sl-error') as Promise<SlErrorEvent>;
 
       el.name = 'bad-request';
       const ev = await listener;
@@ -141,7 +143,7 @@ describe('<sl-icon>', () => {
 
     it("emits sl-error when there isn't an svg element in the registered icon", async () => {
       const el = await fixture<SlIcon>(html` <sl-icon library="test-library"></sl-icon> `);
-      const listener = oneEvent(el, 'sl-error') as Promise<CustomEvent>;
+      const listener = oneEvent(el, 'sl-error') as Promise<SlErrorEvent>;
 
       el.name = 'bad-icon';
       const ev = await listener;

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

@@ -2,6 +2,7 @@ import { aTimeout, expect, fixture, html, oneEvent, waitUntil } from '@open-wc/t
 import { clickOnElement } from '../../internal/test';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
+import type SlChangeEvent from '../../events/sl-change';
 import type SlRadio from '../radio/radio';
 import type SlRadioGroup from './radio-group';
 
@@ -282,7 +283,7 @@ describe('when the value changes', () => {
     `);
     const radio = radioGroup.querySelector<SlRadio>('#radio-1')!;
     setTimeout(() => radio.click());
-    const event = (await oneEvent(radioGroup, 'sl-change')) as CustomEvent;
+    const event = (await oneEvent(radioGroup, 'sl-change')) as SlChangeEvent;
     expect(event.target).to.equal(radioGroup);
     expect(radioGroup.value).to.equal('1');
   });
@@ -297,7 +298,7 @@ describe('when the value changes', () => {
     const radio = radioGroup.querySelector<SlRadio>('#radio-1')!;
     radio.focus();
     setTimeout(() => sendKeys({ press: ' ' }));
-    const event = (await oneEvent(radioGroup, 'sl-change')) as CustomEvent;
+    const event = (await oneEvent(radioGroup, 'sl-change')) as SlChangeEvent;
     expect(event.target).to.equal(radioGroup);
     expect(radioGroup.value).to.equal('1');
   });

src/components/select/select.ts

@@ -19,6 +19,7 @@ import type { CSSResultGroup } from 'lit';
 import type { ShoelaceFormControl } from '../../internal/shoelace-element';
 import type SlOption from '../option/option';
 import type SlPopup from '../popup/popup';
+import type SlRemoveEvent from '../../events/sl-remove';
 
 /**
  * @summary Selects allow you to choose items from a menu of predefined options.
@@ -425,7 +426,7 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
     this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));
   }
 
-  private handleTagRemove(event: CustomEvent, option: SlOption) {
+  private handleTagRemove(event: SlRemoveEvent, option: SlOption) {
     event.stopPropagation();
 
     if (!this.disabled) {
@@ -728,7 +729,7 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
                               ?pill=${this.pill}
                               size=${this.size}
                               removable
-                              @sl-remove=${(event: CustomEvent) => this.handleTagRemove(event, option)}
+                              @sl-remove=${(event: SlRemoveEvent) => this.handleTagRemove(event, option)}
                             >
                               ${option.getTextLabel()}
                             </sl-tag>