Rework events to use kebab-case names

CONTRIBUTING.md

@@ -118,6 +118,14 @@ When designing a component's API, standard properties ("props") are generally us
 
 There are some exceptions to this (e.g. when it significantly improves developer experience), but a good rule of thumbs is "will this need to change based on screen size?" If so, you probably want to use a CSS variable.
 
+### Custom event names
+
+All custom events must start with `sl-` as a namespace. For compatibility with frameworks that utilize DOM templates, custom events must have lowercase, kebab-style names. For example, use `sl-change` instead of `slChange`.
+
+This convention avoids the problem of browsers lowercasing attributes, causing some frameworks to be unable to listen to them. This problem isn't specific to one framework, but [Vue's documentation](https://vuejs.org/v2/guide/components-custom-events.html#Event-Names) provides a good explanation of the problem.
+
+> Additionally, `v-on` event listeners inside DOM templates will be automatically transformed to lowercase (due to HTML’s case-insensitivity), so `v-on:myEvent` would become `v-on:myevent` – making `myEvent` impossible to listen to.
+
 ### When to use a CSS custom property vs. a CSS part
 
 There are two ways to enable customizations for components. One way is with CSS custom properties ("CSS variables"), the other is with CSS parts ("parts").

docs/components/alert.md

@@ -69,7 +69,7 @@ Add the `closable` attribute to show a close button that will hide the alert.
 
 <script>
   const alert = document.querySelector('.alert-closable');
-  alert.addEventListener('slAfterHide', () => {
+  alert.addEventListener('sl-after-hide', () => {
     setTimeout(() => alert.open = true, 2000);
   });
 </script>

docs/components/animation.md

@@ -73,9 +73,9 @@ This example demonstrates all of the baked-in animations and easings. All animat
     });
   });  
 
-  animationName.addEventListener('slChange', () => animation.name = animationName.value);
-  easingName.addEventListener('slChange', () => animation.easing = easingName.value);
-  playbackRate.addEventListener('slChange', () => animation.playbackRate = playbackRate.value);
+  animationName.addEventListener('sl-change', () => animation.name = animationName.value);
+  easingName.addEventListener('sl-change', () => animation.easing = easingName.value);
+  playbackRate.addEventListener('sl-change', () => animation.playbackRate = playbackRate.value);
   playbackRate.tooltipFormatter = val => `Playback Rate = ${val}`;
 </script>
 

docs/components/details.md

@@ -50,7 +50,7 @@ Details are designed to function independently, but you can simulate a group or
   const container = document.querySelector('.details-group-example');
 
   // Close all other details when one is shown
-  container.addEventListener('slShow', event => {
+  container.addEventListener('sl-show', event => {
     [...container.querySelectorAll('sl-details')].map(details => (details.open = event.target === details));
   });
 </script>

docs/components/dialog.md

@@ -103,7 +103,7 @@ By default, dialogs are closed when the user clicks or taps on the overlay. To p
     openButton.addEventListener('click', () => dialog.show());
     closeButton.addEventListener('click', () => dialog.hide());
 
-    dialog.addEventListener('slOverlayDismiss', event => event.preventDefault());
+    dialog.addEventListener('sl-overlay-dismiss', event => event.preventDefault());
   })();
 </script>
 ```

docs/components/drawer.md

@@ -199,7 +199,7 @@ By default, drawers are closed when the user clicks or taps on the overlay. To p
     openButton.addEventListener('click', () => drawer.show());
     closeButton.addEventListener('click', () => drawer.hide());
 
-    drawer.addEventListener('slOverlayDismiss', event => event.preventDefault());
+    drawer.addEventListener('sl-overlay-dismiss', event => event.preventDefault());
   })();
 </script>
 ```

docs/components/dropdown.md

@@ -141,7 +141,7 @@ When dropdowns are used with [menus](/components/menu.md), you can listen for th
   const container = document.querySelector('.dropdown-selection');
   const dropdown = container.querySelector('sl-dropdown');
 
-  dropdown.addEventListener('slSelect', event => {
+  dropdown.addEventListener('sl-select', event => {
     const selectedItem = event.detail.item;
     console.log(selectedItem.value);
   });

docs/components/form.md

@@ -31,7 +31,7 @@ Shoelace forms don't make use of `action` and `method` attributes and they don't
   const form = document.querySelector('.form-overview');
 
   // Watch for the slSubmit event
-  form.addEventListener('slSubmit', event => {
+  form.addEventListener('sl-submit', event => {
     const formData = event.detail.formData;
     let output = '';
 
@@ -69,7 +69,7 @@ Shoelace forms don't make use of `action` and `method` attributes and they don't
 
 ## Form Control Validation
 
-Client-side validation can be enabled through the browser's [constraint validations API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation) for many form controls. You can enable it using props such as `required`, `pattern`, `minlength`, and `maxlength`. As the user interacts with the form control, the `invalid` attribute will reflect its validity based on its current value and the constraints that have been defined.
+Client-side validation can be enabled through the browser's [Constraint Validation API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation) for many form controls. You can enable it using props such as `required`, `pattern`, `minlength`, and `maxlength`. As the user interacts with the form control, the `invalid` attribute will reflect its validity based on its current value and the constraints that have been defined.
 
 When a form control is invalid, the containing form will not be submitted. Instead, the browser will show the user a relevant error message. If you don't want to use client-side validation, you can suppress this behavior by adding `novalidate` to the `<sl-form>` element.
 
@@ -103,7 +103,7 @@ To make a field required, use the `required` prop. The form will not be submitte
 
 <script>
   const form = document.querySelector('.input-validation-required');
-  form.addEventListener('slSubmit', () => alert('All fields are valid!'));
+  form.addEventListener('sl-submit', () => alert('All fields are valid!'));
 </script>
 ```
 
@@ -120,7 +120,7 @@ To restrict a value to a specific [pattern](https://developer.mozilla.org/en-US/
 
 <script>
   const form = document.querySelector('.input-validation-pattern');
-  form.addEventListener('slSubmit', () => alert('All fields are valid!'));
+  form.addEventListener('sl-submit', () => alert('All fields are valid!'));
 </script>
 ```
 
@@ -139,7 +139,7 @@ Some input types will automatically trigger constraints, such as `email` and `ur
 
 <script>
   const form = document.querySelector('.input-validation-type');
-  form.addEventListener('slSubmit', () => alert('All fields are valid!'));
+  form.addEventListener('sl-submit', () => alert('All fields are valid!'));
 </script>
 ```
 
@@ -158,8 +158,8 @@ To create a custom validation error, use the `setCustomValidity` method. The for
   const form = document.querySelector('.input-validation-custom');
   const input = form.querySelector('sl-input');
 
-  form.addEventListener('slSubmit', () => alert('All fields are valid!'));
-  input.addEventListener('slInput', () => {
+  form.addEventListener('sl-submit', () => alert('All fields are valid!'));
+  input.addEventListener('sl-input', () => {
     if (input.value === 'shoelace') {
       input.setCustomValidity('');
     } else {
@@ -204,7 +204,7 @@ The `invalid` attribute reflects the form control's validity, so you can style i
 
 To opt out of the browser's built-in validation and use your own, add the `novalidate` attribute to the form. This will ignore all constraints and prevent the browser from showing its own warnings when form controls are invalid.
 
-Remember that the `invalid` prop on form controls reflects validity as defined by the [constraint validation API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation). You can set it initially, but the `invalid` prop will update as the user interacts with the form control. As such, you should not rely on it to set invalid styles using a custom validation library.
+Remember that the `invalid` prop on form controls reflects validity as defined by the [Constraint Validation API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation). You can set it initially, but the `invalid` prop will update as the user interacts with the form control. As such, you should not rely on it to set invalid styles using a custom validation library.
 
 Instead, toggle a class and target it in your stylesheet as shown below.
 

docs/components/format-bytes.md

@@ -16,7 +16,7 @@ Formats a number as a human readable bytes value.
   const formatter = container.querySelector('sl-format-bytes');
   const input = container.querySelector('sl-input');
 
-  input.addEventListener('slInput', () => formatter.value = input.value || 0);
+  input.addEventListener('sl-input', () => formatter.value = input.value || 0);
 </script>
 ```
 

docs/components/icon.md

@@ -103,7 +103,7 @@ Custom icons can be loaded individually with the `src` attribute. Only SVGs on a
       });
 
       // Filter as the user types
-      input.addEventListener('slInput', () => {
+      input.addEventListener('sl-input', () => {
         [...list.querySelectorAll('.icon-list-item')].map(item => {
           const filter = input.value.toLowerCase();
           if (filter === '') {
@@ -119,7 +119,7 @@ Custom icons can be loaded individually with the `src` attribute. Only SVGs on a
       const iconType = localStorage.getItem('sl-icon:type') || 'outline';
       select.value = iconType;
       list.setAttribute('data-type', select.value);
-      select.addEventListener('slChange', () => {
+      select.addEventListener('sl-change', () => {
         list.setAttribute('data-type', select.value);
         localStorage.setItem('sl-icon:type', select.value);
       });

docs/components/input.md

@@ -146,7 +146,7 @@ Dropdowns can be used in the `prefix` or `suffix` slot to make inputs more versa
   const dropdown = container.querySelector('sl-dropdown');
   const trigger = dropdown.querySelector('sl-button');
 
-  dropdown.addEventListener('slSelect', event => {
+  dropdown.addEventListener('sl-select', event => {
     const selectedItem = event.detail.item;
     trigger.textContent = selectedItem.textContent;
     [...dropdown.querySelectorAll('sl-menu-item')].map(item => item.checked = item === selectedItem);

docs/components/tag.md

@@ -48,7 +48,7 @@ Use the `clearable` attribute to add a clear button to the tag.
 <script>
   const div = document.querySelector('.tags-clearable');
 
-  div.addEventListener('slClear', event => {
+  div.addEventListener('sl-clear', event => {
     const tag = event.target;
     tag.style.opacity = '0';
     setTimeout(() => tag.style.opacity = '1', 2000);

docs/getting-started/changelog.md

@@ -8,6 +8,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 ## Next
 
+- 🚨 BREAKING CHANGE: Transformed all Shoelace events to lowercase ([details](#why-did-event-names-change))
 - Added support for dropdowns and non-icon elements to `sl-input`
 - Added `spellcheck` prop to `sl-input`
 - Added `sl-icon-library` to allow custom icon library registration
@@ -17,6 +18,19 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug where tabbing into slotted elements closes `sl-dropdown` when used in a shadow root [#223](https://github.com/shoelace-style/shoelace/issues/223)
 - Fixed a bug where scroll anchoring caused undesirable scrolling when `sl-details` are grouped
 
+### Why did event names change?
+
+Shoelace events were updated to use a lowercase, kebab-style naming convention. Instead of event names such as `slChange` and `slAfterShow`, you'll need to use `sl-change` and `sl-after-show` now.
+
+This change was necessary to address a critical issue in frameworks that use DOM templates with declarative event bindings such as `<sl-button @slChange="handler">`. Due to HTML's case-insensitivity, browsers translate attribute names to lowercase, turning `@slChange` into `@slchange`, making it impossible to listen to `slChange`.
+
+While declarative event binding is a non-standard feature, not supporting it would make Shoelace much harder to use in popular frameworks. To accommodate those users and provide a better developer experience, we decided to change the naming convention while Shoelace is still in beta.
+
+The following pages demonstrate why this change was necessary.
+
+- [This Polymer FAQ from Custom Elements Everywhere](https://custom-elements-everywhere.com/#faq-polymer])
+- [Vue's Event Names documentation](https://vuejs.org/v2/guide/components-custom-events.html#Event-Names)
+
 ## 2.0.0-beta.19
 
 - Added `input`, `label`, `prefix`, `clear-button`, `suffix`, `help-text` exported parts to `sl-select` to make the input customizable
@@ -35,7 +49,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added `sl-responsive-embed` component
 - Fixed a bug where swapping an animated element wouldn't restart the animation in `sl-animation`
 - Fixed a bug where the cursor was incorrect when `sl-select` was disabled
-- Fixed a bug where `slBlur` and `slFocus` were emitted twice in `sl-select`
+- Fixed a bug where `slblur` and `slfocus` were emitted twice in `sl-select`
 - Fixed a bug where clicking on `sl-menu` wouldn't focus it
 - Fixed a bug in the popover utility where `onAfterShow` would fire too soon
 - Fixed a bug where `bottom` and `right` placements didn't render properly in `sl-tab-group`
@@ -72,7 +86,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Add `hoist` prop to `sl-color-picker`, `sl-dropdown`, and `sl-select` to work around panel clipping
 - Add `sl-format-bytes` utility component
 - Add `clearable` and `required` props to `sl-select`
-- Add `slClear` event to `sl-input`
+- Add `slclear` event to `sl-input`
 - Added keyboard support to the preview resizer in the docs
 - Fixed a bug where the `aria-selected` state was incorrect in `sl-menu-item`
 - Fixed a bug where custom properties applied to `sl-tooltip` didn't affect show/hide transitions
@@ -100,7 +114,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added `tag` part to `sl-select`
 - Updated `package.json` so custom elements imports can be consumed from the root
 - Fixed a bug where scrolling dialogs didn't resize properly in Safari
-- Fixed a bug where `slShow` and `slHide` would be emitted twice in some components
+- Fixed a bug where `slshow` and `slhide` would be emitted twice in some components
 - Fixed a bug where `custom-elements/index.d.ts` was broken due to an unclosed comment (fixed in Stencil 1.17.3)
 - Fixed bug where inputs were not using border radius tokens
 - Fixed a bug where the text color was being erroneously set in `sl-progress-ring`
@@ -110,7 +124,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 ## 2.0.0-beta.13
 
-- Added `slActivate` and `slDeactivate` events to `sl-menu-item`
+- Added `slactivate` and `sldeactivate` events to `sl-menu-item`
 - Added experimental `sl-animation` component
 - Added shields to documentation
 - Fixed a bug where link buttons would have `type="button"`

docs/getting-started/usage.md

@@ -33,14 +33,14 @@ Refer to a component's documentation for a complete list of its properties.
 
 ### Events
 
-You can listen for standard events such as `click`, `mouseover`, etc. as you normally would. In addition, some components emit custom events. These work the same way as standard events, but are prefixed with `sl` to prevent collisions with standard events and other libraries.
+You can listen for standard events such as `click`, `mouseover`, etc. as you normally would. In addition, some components emit custom events. These work the same way as standard events, but are prefixed with `sl-` to prevent collisions with standard events and other libraries.
 
 ```html
 <sl-checkbox>Check me</sl-checkbox>
 
 <script>
   const checkbox = document.querySelector('sl-checkbox');
-  checkbox.addEventListener('slChange', event => {
+  checkbox.addEventListener('sl-change', event => {
     console.log(event.target.checked ? 'checked' : 'not checked');
   });
 </script>

src/components.d.ts

@@ -297,7 +297,7 @@ export namespace Components {
          */
         "setCustomValidity": (message: string) => Promise<void>;
         /**
-          * When `inline` is true, this determines the size of the color picker's trigger.
+          * Determines the size of the color picker's trigger. This has no effect on inline color pickers.
          */
         "size": 'small' | 'medium' | 'large';
         /**
@@ -1468,19 +1468,19 @@ declare namespace LocalJSX {
         /**
           * Emitted after the alert closes and all transitions are complete.
          */
-        "onSlAfterHide"?: (event: CustomEvent<any>) => void;
+        "onSl-after-hide"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted after the alert opens and all transitions are complete.
          */
-        "onSlAfterShow"?: (event: CustomEvent<any>) => void;
+        "onSl-after-show"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed.
          */
-        "onSlHide"?: (event: CustomEvent<any>) => void;
+        "onSl-hide"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened.
          */
-        "onSlShow"?: (event: CustomEvent<any>) => void;
+        "onSl-show"?: (event: CustomEvent<any>) => void;
         /**
           * Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods.
          */
@@ -1534,15 +1534,15 @@ declare namespace LocalJSX {
         /**
           * Emitted when the animation is canceled.
          */
-        "onSlCancel"?: (event: CustomEvent<any>) => void;
+        "onSl-cancel"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the animation finishes.
          */
-        "onSlFinish"?: (event: CustomEvent<any>) => void;
+        "onSl-finish"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the animation starts or restarts.
          */
-        "onSlStart"?: (event: CustomEvent<any>) => void;
+        "onSl-start"?: (event: CustomEvent<any>) => void;
         /**
           * Pauses the animation. The animation will resume when this prop is removed.
          */
@@ -1616,11 +1616,11 @@ declare namespace LocalJSX {
         /**
           * Emitted when the button loses focus.
          */
-        "onSlBlur"?: (event: CustomEvent<any>) => void;
+        "onSl-blur"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the button gains focus.
          */
-        "onSlFocus"?: (event: CustomEvent<any>) => void;
+        "onSl-focus"?: (event: CustomEvent<any>) => void;
         /**
           * Set to true to draw a pill-style button with rounded edges.
          */
@@ -1678,15 +1678,15 @@ declare namespace LocalJSX {
         /**
           * Emitted when the control loses focus.
          */
-        "onSlBlur"?: (event: CustomEvent<any>) => void;
+        "onSl-blur"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the control's checked state changes.
          */
-        "onSlChange"?: (event: CustomEvent<any>) => void;
+        "onSl-change"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the control gains focus.
          */
-        "onSlFocus"?: (event: CustomEvent<any>) => void;
+        "onSl-focus"?: (event: CustomEvent<any>) => void;
         /**
           * Set to true to make the checkbox a required field.
          */
@@ -1724,29 +1724,29 @@ declare namespace LocalJSX {
         /**
           * Emitted after the color picker closes and all transitions are complete.
          */
-        "onSlAfterHide"?: (event: CustomEvent<any>) => void;
+        "onSl-after-hide"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted after the color picker opens and all transitions are complete.
          */
-        "onSlAfterShow"?: (event: CustomEvent<any>) => void;
+        "onSl-after-show"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the color picker's value changes.
          */
-        "onSlChange"?: (event: CustomEvent<any>) => void;
+        "onSl-change"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the color picker closes. Calling `event.preventDefault()` will prevent it from being closed.
          */
-        "onSlHide"?: (event: CustomEvent<any>) => void;
+        "onSl-hide"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the color picker opens. Calling `event.preventDefault()` will prevent it from being opened.
          */
-        "onSlShow"?: (event: CustomEvent<any>) => void;
+        "onSl-show"?: (event: CustomEvent<any>) => void;
         /**
           * Whether to show the opacity slider.
          */
         "opacity"?: boolean;
         /**
-          * When `inline` is true, this determines the size of the color picker's trigger.
+          * Determines the size of the color picker's trigger. This has no effect on inline color pickers.
          */
         "size"?: 'small' | 'medium' | 'large';
         /**
@@ -1770,19 +1770,19 @@ declare namespace LocalJSX {
         /**
           * Emitted after the details closes and all transitions are complete.
          */
-        "onSlAfterHide"?: (event: CustomEvent<any>) => void;
+        "onSl-after-hide"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted after the details opens and all transitions are complete.
          */
-        "onSlAfterShow"?: (event: CustomEvent<any>) => void;
+        "onSl-after-show"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the details closes. Calling `event.preventDefault()` will prevent it from being closed.
          */
-        "onSlHide"?: (event: CustomEvent<any>) => void;
+        "onSl-hide"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the details opens. Calling `event.preventDefault()` will prevent it from being opened.
          */
-        "onSlShow"?: (event: CustomEvent<any>) => void;
+        "onSl-show"?: (event: CustomEvent<any>) => void;
         /**
           * Indicates whether or not the details is open. You can use this in lieu of the show/hide methods.
          */
@@ -1804,23 +1804,23 @@ declare namespace LocalJSX {
         /**
           * Emitted after the dialog closes and all transitions are complete.
          */
-        "onSlAfterHide"?: (event: CustomEvent<any>) => void;
+        "onSl-after-hide"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted after the dialog opens and all transitions are complete.
          */
-        "onSlAfterShow"?: (event: CustomEvent<any>) => void;
+        "onSl-after-show"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed.
          */
-        "onSlHide"?: (event: CustomEvent<any>) => void;
+        "onSl-hide"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing.
          */
-        "onSlOverlayDismiss"?: (event: CustomEvent<any>) => void;
+        "onSl-overlay-dismiss"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened.
          */
-        "onSlShow"?: (event: CustomEvent<any>) => void;
+        "onSl-show"?: (event: CustomEvent<any>) => void;
         /**
           * Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods.
          */
@@ -1842,23 +1842,23 @@ declare namespace LocalJSX {
         /**
           * Emitted after the drawer closes and all transitions are complete.
          */
-        "onSlAfterHide"?: (event: CustomEvent<any>) => void;
+        "onSl-after-hide"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted after the drawer opens and all transitions are complete.
          */
-        "onSlAfterShow"?: (event: CustomEvent<any>) => void;
+        "onSl-after-show"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed.
          */
-        "onSlHide"?: (event: CustomEvent<any>) => void;
+        "onSl-hide"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing.
          */
-        "onSlOverlayDismiss"?: (event: CustomEvent<any>) => void;
+        "onSl-overlay-dismiss"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened.
          */
-        "onSlShow"?: (event: CustomEvent<any>) => void;
+        "onSl-show"?: (event: CustomEvent<any>) => void;
         /**
           * Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods.
          */
@@ -1888,19 +1888,19 @@ declare namespace LocalJSX {
         /**
           * Emitted after the dropdown closes and all transitions are complete.
          */
-        "onSlAfterHide"?: (event: CustomEvent<any>) => void;
+        "onSl-after-hide"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted after the dropdown opens and all transitions are complete.
          */
-        "onSlAfterShow"?: (event: CustomEvent<any>) => void;
+        "onSl-after-show"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed.
          */
-        "onSlHide"?: (event: CustomEvent<any>) => void;
+        "onSl-hide"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened.
          */
-        "onSlShow"?: (event: CustomEvent<any>) => void;
+        "onSl-show"?: (event: CustomEvent<any>) => void;
         /**
           * Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods.
          */
@@ -1933,7 +1933,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the form is submitted. This event will not be emitted if any form control inside of it is in an invalid state, unless the form has the `novalidate` attribute. Note that there is never a need to prevent this event, since it doen't send a GET or POST request like native forms. To "prevent" submission, use a conditional around the XHR request you use to submit the form's data with.
          */
-        "onSlSubmit"?: (event: CustomEvent<any>) => void;
+        "onSl-submit"?: (event: CustomEvent<any>) => void;
     }
     interface SlFormatBytes {
         /**
@@ -1965,11 +1965,11 @@ declare namespace LocalJSX {
         /**
           * Emitted when the icon failed to load.
          */
-        "onSlError"?: (event: CustomEvent<any>) => void;
+        "onSl-error"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the icon has loaded.
          */
-        "onSlLoad"?: (event: CustomEvent<any>) => void;
+        "onSl-load"?: (event: CustomEvent<any>) => void;
         /**
           * An external URL of an SVG file.
          */
@@ -2015,7 +2015,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the slider position changes.
          */
-        "onSlChange"?: (event: CustomEvent<any>) => void;
+        "onSl-change"?: (event: CustomEvent<any>) => void;
         /**
           * The position of the divider as a percentage.
          */
@@ -2081,23 +2081,23 @@ declare namespace LocalJSX {
         /**
           * Emitted when the control loses focus.
          */
-        "onSlBlur"?: (event: CustomEvent<any>) => void;
+        "onSl-blur"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the control's value changes.
          */
-        "onSlChange"?: (event: CustomEvent<any>) => void;
+        "onSl-change"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the clear button is activated.
          */
-        "onSlClear"?: (event: CustomEvent<any>) => void;
+        "onSl-clear"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the control gains focus.
          */
-        "onSlFocus"?: (event: CustomEvent<any>) => void;
+        "onSl-focus"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the control receives input.
          */
-        "onSlInput"?: (event: CustomEvent<any>) => void;
+        "onSl-input"?: (event: CustomEvent<any>) => void;
         /**
           * A pattern to validate input against.
          */
@@ -2147,15 +2147,15 @@ declare namespace LocalJSX {
         /**
           * Emitted when the menu loses focus.
          */
-        "onSlBlur"?: (event: CustomEvent<any>) => void;
+        "onSl-blur"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the menu gains focus.
          */
-        "onSlFocus"?: (event: CustomEvent<any>) => void;
+        "onSl-focus"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when a menu item is selected.
          */
-        "onSlSelect"?: (event: CustomEvent<any>) => void;
+        "onSl-select"?: (event: CustomEvent<any>) => void;
     }
     interface SlMenuDivider {
     }
@@ -2175,11 +2175,11 @@ declare namespace LocalJSX {
         /**
           * Emitted when the menu item becomes active.
          */
-        "onSlActivate"?: (event: CustomEvent<any>) => void;
+        "onSl-activate"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the menu item becomes inactive.
          */
-        "onSlDeactivate"?: (event: CustomEvent<any>) => void;
+        "onSl-deactivate"?: (event: CustomEvent<any>) => void;
         /**
           * A unique value to store in the menu item.
          */
@@ -2227,15 +2227,15 @@ declare namespace LocalJSX {
         /**
           * Emitted when the control loses focus.
          */
-        "onSlBlur"?: (event: CustomEvent<any>) => void;
+        "onSl-blur"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the control's checked state changes.
          */
-        "onSlChange"?: (event: CustomEvent<any>) => void;
+        "onSl-change"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the control gains focus.
          */
-        "onSlFocus"?: (event: CustomEvent<any>) => void;
+        "onSl-focus"?: (event: CustomEvent<any>) => void;
         /**
           * The radio's value attribute.
          */
@@ -2265,15 +2265,15 @@ declare namespace LocalJSX {
         /**
           * Emitted when the control loses focus.
          */
-        "onSlBlur"?: (event: CustomEvent<any>) => void;
+        "onSl-blur"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the control's value changes.
          */
-        "onSlChange"?: (event: CustomEvent<any>) => void;
+        "onSl-change"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the control gains focus.
          */
-        "onSlFocus"?: (event: CustomEvent<any>) => void;
+        "onSl-focus"?: (event: CustomEvent<any>) => void;
         /**
           * The input's step attribute.
          */
@@ -2307,7 +2307,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the rating's value changes.
          */
-        "onSlChange"?: (event: CustomEvent<any>) => void;
+        "onSl-change"?: (event: CustomEvent<any>) => void;
         /**
           * The minimum increment value allowed by the control.
          */
@@ -2363,15 +2363,15 @@ declare namespace LocalJSX {
         /**
           * Emitted when the control loses focus
          */
-        "onSlBlur"?: (event: CustomEvent<any>) => void;
+        "onSl-blur"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the control's value changes.
          */
-        "onSlChange"?: (event: CustomEvent<any>) => void;
+        "onSl-change"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the control gains focus
          */
-        "onSlFocus"?: (event: CustomEvent<any>) => void;
+        "onSl-focus"?: (event: CustomEvent<any>) => void;
         /**
           * Set to true to draw a pill-style select with rounded edges.
          */
@@ -2421,15 +2421,15 @@ declare namespace LocalJSX {
         /**
           * Emitted when the control loses focus.
          */
-        "onSlBlur"?: (event: CustomEvent<any>) => void;
+        "onSl-blur"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the control's checked state changes.
          */
-        "onSlChange"?: (event: CustomEvent<any>) => void;
+        "onSl-change"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the control gains focus.
          */
-        "onSlFocus"?: (event: CustomEvent<any>) => void;
+        "onSl-focus"?: (event: CustomEvent<any>) => void;
         /**
           * Set to true to make the switch a required field.
          */
@@ -2457,11 +2457,11 @@ declare namespace LocalJSX {
         /**
           * Emitted when a tab is hidden.
          */
-        "onSlTabHide"?: (event: CustomEvent<any>) => void;
+        "onSl-tab-hide"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when a tab is shown.
          */
-        "onSlTabShow"?: (event: CustomEvent<any>) => void;
+        "onSl-tab-show"?: (event: CustomEvent<any>) => void;
         /**
           * The placement of the tabs.
          */
@@ -2485,7 +2485,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the clear button is activated.
          */
-        "onSlClear"?: (event: CustomEvent<any>) => void;
+        "onSl-clear"?: (event: CustomEvent<any>) => void;
         /**
           * Set to true to draw a pill-style tag with rounded edges.
          */
@@ -2547,19 +2547,19 @@ declare namespace LocalJSX {
         /**
           * Emitted when the control loses focus.
          */
-        "onSlBlur"?: (event: CustomEvent<any>) => void;
+        "onSl-blur"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the control's value changes.
          */
-        "onSlChange"?: (event: CustomEvent<any>) => void;
+        "onSl-change"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the control gains focus.
          */
-        "onSlFocus"?: (event: CustomEvent<any>) => void;
+        "onSl-focus"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the control receives input.
          */
-        "onSlInput"?: (event: CustomEvent<any>) => void;
+        "onSl-input"?: (event: CustomEvent<any>) => void;
         /**
           * The textarea's placeholder text.
          */
@@ -2609,19 +2609,19 @@ declare namespace LocalJSX {
         /**
           * Emitted after the tooltip has hidden and all transitions are complete.
          */
-        "onSlAfterHide"?: (event: CustomEvent<any>) => void;
+        "onSl-after-hide"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted after the tooltip has shown and all transitions are complete.
          */
-        "onSlAfterShow"?: (event: CustomEvent<any>) => void;
+        "onSl-aftershow"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden.
          */
-        "onSlHide"?: (event: CustomEvent<any>) => void;
+        "onSl-hide"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown.
          */
-        "onSlShow"?: (event: CustomEvent<any>) => void;
+        "onSl-show"?: (event: CustomEvent<any>) => void;
         /**
           * Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.
          */

src/components/alert/alert.tsx

@@ -53,16 +53,16 @@ export class Alert {
   }
 
   /** Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. */
-  @Event() slShow: EventEmitter;
+  @Event({ eventName: 'sl-show' }) slShow: EventEmitter;
 
   /** Emitted after the alert opens and all transitions are complete. */
-  @Event() slAfterShow: EventEmitter;
+  @Event({ eventName: 'sl-after-show' }) slAfterShow: EventEmitter;
 
   /** Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. */
-  @Event() slHide: EventEmitter;
+  @Event({ eventName: 'sl-hide' }) slHide: EventEmitter;
 
   /** Emitted after the alert closes and all transitions are complete. */
-  @Event() slAfterHide: EventEmitter;
+  @Event({ eventName: 'sl-after-hide' }) slAfterHide: EventEmitter;
 
   connectedCallback() {
     this.handleCloseClick = this.handleCloseClick.bind(this);
@@ -136,7 +136,7 @@ export class Alert {
       this.show();
 
       this.host.addEventListener(
-        'slAfterHide',
+        'sl-after-hide',
         () => {
           this.host.remove();
           resolve();

src/components/animation/animation.tsx

@@ -89,13 +89,13 @@ export class Animate {
   }
 
   /** Emitted when the animation is canceled. */
-  @Event() slCancel: EventEmitter;
+  @Event({ eventName: 'sl-cancel' }) slCancel: EventEmitter;
 
   /** Emitted when the animation finishes. */
-  @Event() slFinish: EventEmitter;
+  @Event({ eventName: 'sl-finish' }) slFinish: EventEmitter;
 
   /** Emitted when the animation starts or restarts. */
-  @Event() slStart: EventEmitter;
+  @Event({ eventName: 'sl-start' }) slStart: EventEmitter;
 
   connectedCallback() {
     this.handleAnimationFinish = this.handleAnimationFinish.bind(this);

src/components/button-group/button-group.tsx

@@ -26,13 +26,13 @@ export class ButtonGroup {
   }
 
   componentDidLoad() {
-    this.buttonGroup.addEventListener('slFocus', this.handleFocus);
-    this.buttonGroup.addEventListener('slBlur', this.handleBlur);
+    this.buttonGroup.addEventListener('sl-focus', this.handleFocus);
+    this.buttonGroup.addEventListener('sl-blur', this.handleBlur);
   }
 
   disconnectedCallback() {
-    this.buttonGroup.removeEventListener('slFocus', this.handleFocus);
-    this.buttonGroup.removeEventListener('slBlur', this.handleBlur);
+    this.buttonGroup.removeEventListener('sl-focus', this.handleFocus);
+    this.buttonGroup.removeEventListener('sl-blur', this.handleBlur);
   }
 
   handleFocus(event: CustomEvent) {

src/components/button/button.tsx

@@ -65,10 +65,10 @@ export class Button {
   @Prop() download: string;
 
   /** Emitted when the button loses focus. */
-  @Event() slBlur: EventEmitter;
+  @Event({ eventName: 'sl-blur' }) slBlur: EventEmitter;
 
   /** Emitted when the button gains focus. */
-  @Event() slFocus: EventEmitter;
+  @Event({ eventName: 'sl-focus' }) slFocus: EventEmitter;
 
   connectedCallback() {
     this.handleBlur = this.handleBlur.bind(this);

src/components/checkbox/checkbox.tsx

@@ -49,13 +49,13 @@ export class Checkbox {
   @Prop({ mutable: true, reflect: true }) invalid = false;
 
   /** Emitted when the control loses focus. */
-  @Event() slBlur: EventEmitter;
+  @Event({ eventName: 'sl-blur' }) slBlur: EventEmitter;
 
   /** Emitted when the control's checked state changes. */
-  @Event() slChange: EventEmitter;
+  @Event({ eventName: 'sl-change' }) slChange: EventEmitter;
 
   /** Emitted when the control gains focus. */
-  @Event() slFocus: EventEmitter;
+  @Event({ eventName: 'sl-focus' }) slFocus: EventEmitter;
 
   @Watch('checked')
   @Watch('indeterminate')

src/components/color-picker/color-picker.tsx

@@ -58,7 +58,7 @@ export class ColorPicker {
   /** Set to true to render the color picker inline rather than inside a dropdown. */
   @Prop() inline = false;
 
-  /** When `inline` is true, this determines the size of the color picker's trigger. */
+  /** Determines the size of the color picker's trigger. This has no effect on inline color pickers. */
   @Prop() size: 'small' | 'medium' | 'large' = 'medium';
 
   /** The input's name attribute. */
@@ -109,19 +109,19 @@ export class ColorPicker {
   ];
 
   /** Emitted when the color picker's value changes. */
-  @Event() slChange: EventEmitter;
+  @Event({ eventName: 'sl-change' }) slChange: EventEmitter;
 
   /** Emitted when the color picker opens. Calling `event.preventDefault()` will prevent it from being opened. */
-  @Event() slShow: EventEmitter;
+  @Event({ eventName: 'sl-show' }) slShow: EventEmitter;
 
   /** Emitted after the color picker opens and all transitions are complete. */
-  @Event() slAfterShow: EventEmitter;
+  @Event({ eventName: 'sl-after-show' }) slAfterShow: EventEmitter;
 
   /** Emitted when the color picker closes. Calling `event.preventDefault()` will prevent it from being closed. */
-  @Event() slHide: EventEmitter;
+  @Event({ eventName: 'sl-hide' }) slHide: EventEmitter;
 
   /** Emitted after the color picker closes and all transitions are complete. */
-  @Event() slAfterHide: EventEmitter;
+  @Event({ eventName: 'sl-after-hide' }) slAfterHide: EventEmitter;
 
   @Watch('value')
   handleValueChange(newValue: string, oldValue: string) {
@@ -189,7 +189,7 @@ export class ColorPicker {
 
       return new Promise(resolve => {
         this.dropdown.addEventListener(
-          'slAfterShow',
+          'sl-after-show',
           () => {
             this.input.reportValidity();
             resolve();
@@ -740,7 +740,7 @@ export class ColorPicker {
               value={this.inputValue}
               disabled={this.disabled}
               onKeyDown={this.handleInputKeyDown}
-              onSlChange={this.handleInputChange}
+              onSl-change={this.handleInputChange}
             />
             <sl-button
               ref={el => (this.copyButton = el)}
@@ -789,10 +789,10 @@ export class ColorPicker {
         aria-disabled={this.disabled}
         containingElement={this.host}
         hoist={this.hoist}
-        onSlShow={this.handleDropdownShow}
-        onSlAfterShow={this.handleDropdownAfterShow}
-        onSlHide={this.handleDropdownHide}
-        onSlAfterHide={this.handleDropdownAfterHide}
+        onSl-show={this.handleDropdownShow}
+        onSl-after-show={this.handleDropdownAfterShow}
+        onSl-hide={this.handleDropdownHide}
+        onSl-after-hide={this.handleDropdownAfterHide}
       >
         <button
           ref={el => (this.trigger = el)}

src/components/details/details.tsx

@@ -44,16 +44,16 @@ export class Details {
   }
 
   /** Emitted when the details opens. Calling `event.preventDefault()` will prevent it from being opened. */
-  @Event() slShow: EventEmitter;
+  @Event({ eventName: 'sl-show' }) slShow: EventEmitter;
 
   /** Emitted after the details opens and all transitions are complete. */
-  @Event() slAfterShow: EventEmitter;
+  @Event({ eventName: 'sl-after-show' }) slAfterShow: EventEmitter;
 
   /** Emitted when the details closes. Calling `event.preventDefault()` will prevent it from being closed. */
-  @Event() slHide: EventEmitter;
+  @Event({ eventName: 'sl-hide' }) slHide: EventEmitter;
 
   /** Emitted after the details closes and all transitions are complete. */
-  @Event() slAfterHide: EventEmitter;
+  @Event({ eventName: 'sl-after-hide' }) slAfterHide: EventEmitter;
 
   connectedCallback() {
     this.handleBodyTransitionEnd = this.handleBodyTransitionEnd.bind(this);

src/components/dialog/dialog.tsx

@@ -57,19 +57,19 @@ export class Dialog {
   }
 
   /** Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. */
-  @Event() slShow: EventEmitter;
+  @Event({ eventName: 'sl-show' }) slShow: EventEmitter;
 
   /** Emitted after the dialog opens and all transitions are complete. */
-  @Event() slAfterShow: EventEmitter;
+  @Event({ eventName: 'sl-after-show' }) slAfterShow: EventEmitter;
 
   /** Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. */
-  @Event() slHide: EventEmitter;
+  @Event({ eventName: 'sl-hide' }) slHide: EventEmitter;
 
   /** Emitted after the dialog closes and all transitions are complete. */
-  @Event() slAfterHide: EventEmitter;
+  @Event({ eventName: 'sl-after-hide' }) slAfterHide: EventEmitter;
 
   /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing. */
-  @Event() slOverlayDismiss: EventEmitter;
+  @Event({ eventName: 'sl-overlay-dismiss' }) slOverlayDismiss: EventEmitter;
 
   connectedCallback() {
     this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);

src/components/drawer/drawer.tsx

@@ -65,19 +65,19 @@ export class Drawer {
   }
 
   /** Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened. */
-  @Event() slShow: EventEmitter;
+  @Event({ eventName: 'sl-show' }) slShow: EventEmitter;
 
   /** Emitted after the drawer opens and all transitions are complete. */
-  @Event() slAfterShow: EventEmitter;
+  @Event({ eventName: 'sl-after-show' }) slAfterShow: EventEmitter;
 
   /** Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed. */
-  @Event() slHide: EventEmitter;
+  @Event({ eventName: 'sl-hide' }) slHide: EventEmitter;
 
   /** Emitted after the drawer closes and all transitions are complete. */
-  @Event() slAfterHide: EventEmitter;
+  @Event({ eventName: 'sl-after-hide' }) slAfterHide: EventEmitter;
 
   /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing. */
-  @Event() slOverlayDismiss: EventEmitter;
+  @Event({ eventName: 'sl-overlay-dismiss' }) slOverlayDismiss: EventEmitter;
 
   connectedCallback() {
     this.handleCloseClick = this.handleCloseClick.bind(this);

src/components/dropdown/dropdown.tsx

@@ -71,16 +71,16 @@ export class Dropdown {
   @Prop() hoist = false;
 
   /** Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened. */
-  @Event() slShow: EventEmitter;
+  @Event({ eventName: 'sl-show' }) slShow: EventEmitter;
 
   /** Emitted after the dropdown opens and all transitions are complete. */
-  @Event() slAfterShow: EventEmitter;
+  @Event({ eventName: 'sl-after-show' }) slAfterShow: EventEmitter;
 
   /** Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed. */
-  @Event() slHide: EventEmitter;
+  @Event({ eventName: 'sl-hide' }) slHide: EventEmitter;
 
   /** Emitted after the dropdown closes and all transitions are complete. */
-  @Event() slAfterHide: EventEmitter;
+  @Event({ eventName: 'sl-after-hide' }) slAfterHide: EventEmitter;
 
   @Watch('open')
   handleOpenChange() {
@@ -155,8 +155,8 @@ export class Dropdown {
       return;
     }
 
-    this.panel.addEventListener('slActivate', this.handleMenuItemActivate);
-    this.panel.addEventListener('slSelect', this.handlePanelSelect);
+    this.panel.addEventListener('sl-activate', this.handleMenuItemActivate);
+    this.panel.addEventListener('sl-select', this.handlePanelSelect);
     document.addEventListener('keydown', this.handleDocumentKeyDown);
     document.addEventListener('mousedown', this.handleDocumentMouseDown);
 
@@ -179,8 +179,8 @@ export class Dropdown {
       return;
     }
 
-    this.panel.removeEventListener('slActivate', this.handleMenuItemActivate);
-    this.panel.removeEventListener('slSelect', this.handlePanelSelect);
+    this.panel.removeEventListener('sl-activate', this.handleMenuItemActivate);
+    this.panel.removeEventListener('sl-select', this.handlePanelSelect);
     document.addEventListener('keydown', this.handleDocumentKeyDown);
     document.removeEventListener('mousedown', this.handleDocumentMouseDown);
 

src/components/form/form.tsx

@@ -34,7 +34,7 @@ export class Form {
    * event, since it doen't send a GET or POST request like native forms. To "prevent" submission, use a conditional
    * around the XHR request you use to submit the form's data with.
    */
-  @Event() slSubmit: EventEmitter;
+  @Event({ eventName: 'sl-submit' }) slSubmit: EventEmitter;
 
   connectedCallback() {
     this.formControls = [

src/components/icon/icon.tsx

@@ -35,10 +35,10 @@ export class Icon {
   @Prop() library = 'default';
 
   /** Emitted when the icon has loaded. */
-  @Event() slLoad: EventEmitter;
+  @Event({ eventName: 'sl-load' }) slLoad: EventEmitter;
 
   /** Emitted when the icon failed to load. */
-  @Event() slError: EventEmitter;
+  @Event({ eventName: 'sl-error' }) slError: EventEmitter;
 
   @Watch('name')
   @Watch('src')

src/components/image-comparer/image-comparer.tsx

@@ -36,7 +36,7 @@ export class ImageComparer {
   }
 
   /** Emitted when the slider position changes. */
-  @Event() slChange: EventEmitter;
+  @Event({ eventName: 'sl-change' }) slChange: EventEmitter;
 
   connectedCallback() {
     this.dividerPosition = this.position;

src/components/input/input.tsx

@@ -124,19 +124,19 @@ export class Input {
   }
 
   /** Emitted when the control's value changes. */
-  @Event() slChange: EventEmitter;
+  @Event({ eventName: 'sl-change' }) slChange: EventEmitter;
 
   /** Emitted when the clear button is activated. */
-  @Event() slClear: EventEmitter;
+  @Event({ eventName: 'sl-clear' }) slClear: EventEmitter;
 
   /** Emitted when the control receives input. */
-  @Event() slInput: EventEmitter;
+  @Event({ eventName: 'sl-input' }) slInput: EventEmitter;
 
   /** Emitted when the control gains focus. */
-  @Event() slFocus: EventEmitter;
+  @Event({ eventName: 'sl-focus' }) slFocus: EventEmitter;
 
   /** Emitted when the control loses focus. */
-  @Event() slBlur: EventEmitter;
+  @Event({ eventName: 'sl-blur' }) slBlur: EventEmitter;
 
   connectedCallback() {
     this.handleChange = this.handleChange.bind(this);

src/components/menu-item/menu-item.tsx

@@ -43,10 +43,10 @@ export class MenuItem {
   }
 
   /** Emitted when the menu item becomes active. */
-  @Event() slActivate: EventEmitter;
+  @Event({ eventName: 'sl-activate' }) slActivate: EventEmitter;
 
   /** Emitted when the menu item becomes inactive. */
-  @Event() slDeactivate: EventEmitter;
+  @Event({ eventName: 'sl-deactivate' }) slDeactivate: EventEmitter;
 
   render() {
     return (

src/components/menu/menu.tsx

@@ -23,13 +23,13 @@ export class Menu {
   @State() hasFocus = false;
 
   /** Emitted when the menu gains focus. */
-  @Event() slFocus: EventEmitter;
+  @Event({ eventName: 'sl-focus' }) slFocus: EventEmitter;
 
   /** Emitted when the menu loses focus. */
-  @Event() slBlur: EventEmitter;
+  @Event({ eventName: 'sl-blur' }) slBlur: EventEmitter;
 
   /** Emitted when a menu item is selected. */
-  @Event() slSelect: EventEmitter;
+  @Event({ eventName: 'sl-select' }) slSelect: EventEmitter;
 
   connectedCallback() {
     this.handleBlur = this.handleBlur.bind(this);

src/components/radio/radio.tsx

@@ -56,13 +56,13 @@ export class Radio {
   }
 
   /** Emitted when the control loses focus. */
-  @Event() slBlur: EventEmitter;
+  @Event({ eventName: 'sl-blur' }) slBlur: EventEmitter;
 
   /** Emitted when the control's checked state changes. */
-  @Event() slChange: EventEmitter;
+  @Event({ eventName: 'sl-change' }) slChange: EventEmitter;
 
   /** Emitted when the control gains focus. */
-  @Event() slFocus: EventEmitter;
+  @Event({ eventName: 'sl-focus' }) slFocus: EventEmitter;
 
   connectedCallback() {
     this.handleClick = this.handleClick.bind(this);

src/components/range/range.tsx

@@ -54,13 +54,13 @@ export class Range {
   @Prop() tooltipFormatter = (value: number) => value.toString();
 
   /** Emitted when the control's value changes. */
-  @Event() slChange: EventEmitter;
+  @Event({ eventName: 'sl-change' }) slChange: EventEmitter;
 
   /** Emitted when the control loses focus. */
-  @Event() slBlur: EventEmitter;
+  @Event({ eventName: 'sl-blur' }) slBlur: EventEmitter;
 
   /** Emitted when the control gains focus. */
-  @Event() slFocus: EventEmitter;
+  @Event({ eventName: 'sl-focus' }) slFocus: EventEmitter;
 
   connectedCallback() {
     this.handleInput = this.handleInput.bind(this);

src/components/rating/rating.tsx

@@ -48,7 +48,7 @@ export class Rating {
   }
 
   /** Emitted when the rating's value changes. */
-  @Event() slChange: EventEmitter;
+  @Event({ eventName: 'sl-change' }) slChange: EventEmitter;
 
   connectedCallback() {
     this.handleClick = this.handleClick.bind(this);

src/components/select/select.tsx

@@ -109,13 +109,13 @@ export class Select {
   }
 
   /** Emitted when the control's value changes. */
-  @Event() slChange: EventEmitter;
+  @Event({ eventName: 'sl-change' }) slChange: EventEmitter;
 
   /** Emitted when the control gains focus */
-  @Event() slFocus: EventEmitter;
+  @Event({ eventName: 'sl-focus' }) slFocus: EventEmitter;
 
   /** Emitted when the control loses focus */
-  @Event() slBlur: EventEmitter;
+  @Event({ eventName: 'sl-blur' }) slBlur: EventEmitter;
 
   connectedCallback() {
     this.handleBlur = this.handleBlur.bind(this);
@@ -304,7 +304,7 @@ export class Select {
             clearable
             onClick={this.handleTagClick}
             onKeyDown={this.handleTagKeyDown}
-            onSlClear={event => {
+            onSl-clear={event => {
               event.stopPropagation();
               item.checked = false;
               this.syncValueFromItems();
@@ -393,8 +393,8 @@ export class Select {
             'select--large': this.size === 'large',
             'select--pill': this.pill
           }}
-          onSlShow={this.handleMenuShow}
-          onSlHide={this.handleMenuHide}
+          onSl-show={this.handleMenuShow}
+          onSl-hide={this.handleMenuHide}
         >
           <sl-input
             slot="trigger"
@@ -413,9 +413,9 @@ export class Select {
             required={this.required}
             aria-labelledby={this.labelId}
             aria-describedby={this.helpTextId}
-            onSlFocus={this.handleFocus}
-            onSlBlur={this.handleBlur}
-            onSlClear={this.handleClear}
+            onSl-focus={this.handleFocus}
+            onSl-blur={this.handleBlur}
+            onSl-clear={this.handleClear}
             onKeyDown={this.handleKeyDown}
             onKeyUp={this.handleKeyUp}
             onCut={this.handleCut}
@@ -432,7 +432,7 @@ export class Select {
             </span>
           </sl-input>
 
-          <sl-menu ref={el => (this.menu = el)} part="menu" class="select__menu" onSlSelect={this.handleMenuSelect}>
+          <sl-menu ref={el => (this.menu = el)} part="menu" class="select__menu" onSl-select={this.handleMenuSelect}>
             <slot onSlotchange={this.handleSlotChange} />
           </sl-menu>
         </sl-dropdown>

src/components/switch/switch.tsx

@@ -51,13 +51,13 @@ export class Switch {
   }
 
   /** Emitted when the control loses focus. */
-  @Event() slBlur: EventEmitter;
+  @Event({ eventName: 'sl-blur' }) slBlur: EventEmitter;
 
   /** Emitted when the control's checked state changes. */
-  @Event() slChange: EventEmitter;
+  @Event({eventName: 'sl-change' }) slChange: EventEmitter;
 
   /** Emitted when the control gains focus. */
-  @Event() slFocus: EventEmitter;
+  @Event({eventName: 'sl-focus' }) slFocus: EventEmitter;
 
   connectedCallback() {
     this.handleClick = this.handleClick.bind(this);

src/components/tab-group/tab-group.tsx

@@ -46,10 +46,10 @@ export class TabGroup {
   }
 
   /** Emitted when a tab is shown. */
-  @Event() slTabShow: EventEmitter;
+  @Event({ eventName: 'sl-tab-show' }) slTabShow: EventEmitter;
 
   /** Emitted when a tab is hidden. */
-  @Event() slTabHide: EventEmitter;
+  @Event({ eventName: 'sl-tab-hide' }) slTabHide: EventEmitter;
 
   connectedCallback() {
     this.handleClick = this.handleClick.bind(this);

src/components/tag/tag.tsx

@@ -32,7 +32,7 @@ export class Tag {
   @Prop({ reflect: true }) clearable = false;
 
   /** Emitted when the clear button is activated. */
-  @Event() slClear: EventEmitter;
+  @Event({ eventName: 'sl-clear' }) slClear: EventEmitter;
 
   connectedCallback() {
     this.handleClearClick = this.handleClearClick.bind(this);

src/components/textarea/textarea.tsx

@@ -91,16 +91,16 @@ export class Textarea {
   @Prop() inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
 
   /** Emitted when the control's value changes. */
-  @Event() slChange: EventEmitter;
+  @Event({ eventName: 'sl-change' }) slChange: EventEmitter;
 
   /** Emitted when the control receives input. */
-  @Event() slInput: EventEmitter;
+  @Event({ eventName: 'sl-input' }) slInput: EventEmitter;
 
   /** Emitted when the control gains focus. */
-  @Event() slFocus: EventEmitter;
+  @Event({ eventName: 'sl-focus' }) slFocus: EventEmitter;
 
   /** Emitted when the control loses focus. */
-  @Event() slBlur: EventEmitter;
+  @Event({ eventName: 'sl-blur' }) slBlur: EventEmitter;
 
   @Watch('rows')
   handleRowsChange() {

src/components/tooltip/tooltip.tsx

@@ -73,16 +73,16 @@ export class Tooltip {
   }
 
   /** Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. */
-  @Event() slShow: EventEmitter;
+  @Event({ eventName: 'sl-show' }) slShow: EventEmitter;
 
   /** Emitted after the tooltip has shown and all transitions are complete. */
-  @Event() slAfterShow: EventEmitter;
+  @Event({ eventName: 'sl-aftershow' }) slAfterShow: EventEmitter;
 
   /** Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. */
-  @Event() slHide: EventEmitter;
+  @Event({ eventName: 'sl-hide' }) slHide: EventEmitter;
 
   /** Emitted after the tooltip has hidden and all transitions are complete. */
-  @Event() slAfterHide: EventEmitter;
+  @Event({ eventName: 'sl-after-hide' }) slAfterHide: EventEmitter;
 
   connectedCallback() {
     this.handleBlur = this.handleBlur.bind(this);