diff --git a/docs/_layouts/theme.njk b/docs/_layouts/theme.njk
index d890c2406..dfa90a01c 100644
--- a/docs/_layouts/theme.njk
+++ b/docs/_layouts/theme.njk
@@ -49,7 +49,7 @@
 
 </p>
 <script>
-  document.querySelector('#mix_and_match').addEventListener('wa-change', function(event) {
+  document.querySelector('#mix_and_match').addEventListener('change', function(event) {
     let selects = document.querySelectorAll('#mix_and_match wa-select');
     let url = new URL(demo.src);
 
diff --git a/docs/assets/scripts/filter.js b/docs/assets/scripts/filter.js
index 11d9d8190..7d0398f41 100644
--- a/docs/assets/scripts/filter.js
+++ b/docs/assets/scripts/filter.js
@@ -18,7 +18,7 @@ function updateResults(input) {
   }
 }
 
-document.documentElement.addEventListener('wa-input', e => {
+document.documentElement.addEventListener('input', e => {
   if (e.target?.matches('#block-filter wa-input')) {
     updateResults(e.target);
   }
diff --git a/docs/assets/scripts/theme-picker.js b/docs/assets/scripts/theme-picker.js
index b1f31f76b..e9220a235 100644
--- a/docs/assets/scripts/theme-picker.js
+++ b/docs/assets/scripts/theme-picker.js
@@ -28,7 +28,7 @@ export class ThemeAspect {
     });
 
     // Listen for selections
-    document.addEventListener('wa-change', event => {
+    document.addEventListener('change', event => {
       const picker = event.target.closest(this.picker);
       if (picker) {
         this.set(picker.value);
diff --git a/docs/docs/components/animation.md b/docs/docs/components/animation.md
index 8865f76c5..12cc733f0 100644
--- a/docs/docs/components/animation.md
+++ b/docs/docs/components/animation.md
@@ -77,9 +77,9 @@ This example demonstrates all of the baked-in animations and easings. Animations
     easingName.appendChild(option);
   });
 
-  animationName.addEventListener('wa-change', () => (animation.name = animationName.value));
-  easingName.addEventListener('wa-change', () => (animation.easing = easingName.value));
-  playbackRate.addEventListener('wa-input', () => (animation.playbackRate = playbackRate.value));
+  animationName.addEventListener('change', () => (animation.name = animationName.value));
+  easingName.addEventListener('change', () => (animation.easing = easingName.value));
+  playbackRate.addEventListener('input', () => (animation.playbackRate = playbackRate.value));
 </script>
 
 <style>
diff --git a/docs/docs/components/carousel.md b/docs/docs/components/carousel.md
index 40a1abeec..dad2064b6 100644
--- a/docs/docs/components/carousel.md
+++ b/docs/docs/components/carousel.md
@@ -249,7 +249,7 @@ This example is best demonstrated using a mouse. Try clicking and dragging the s
   const carousel = container.querySelector('wa-carousel');
   const toggle = container.querySelector('wa-switch');
 
-  toggle.addEventListener('wa-change', () => {
+  toggle.addEventListener('change', () => {
     carousel.toggleAttribute('mouse-dragging', toggle.checked);
   });
 </script>
@@ -450,7 +450,7 @@ Use the `--aspect-ratio` custom property to customize the size of the carousel's
     const carousel = document.querySelector('wa-carousel.aspect-ratio');
     const aspectRatio = document.querySelector('wa-select[name="aspect"]');
 
-    aspectRatio.addEventListener('wa-change', () => {
+    aspectRatio.addEventlistener('change', () => {
       carousel.style.setProperty('--aspect-ratio', aspectRatio.value);
     });
   })();
diff --git a/docs/docs/components/cheatsheet/cheatsheet.js b/docs/docs/components/cheatsheet/cheatsheet.js
index da8d71d25..a52adb275 100644
--- a/docs/docs/components/cheatsheet/cheatsheet.js
+++ b/docs/docs/components/cheatsheet/cheatsheet.js
@@ -73,4 +73,4 @@ if (name_search.value) {
   filterByName(name_search.value);
 }
 
-name_search_group.addEventListener('wa-input', e => filterByName(name_search.value));
+name_search_group.addEventListener('input', e => filterByName(name_search.value));
diff --git a/docs/docs/components/checkbox.md b/docs/docs/components/checkbox.md
index d1f121442..78dee914f 100644
--- a/docs/docs/components/checkbox.md
+++ b/docs/docs/components/checkbox.md
@@ -82,7 +82,7 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
   });
 
   // Update validity on change
-  checkbox.addEventListener('wa-change', () => {
+  checkbox.addEventlistener('change', () => {
     checkbox.setCustomValidity(checkbox.checked ? '' : errorMessage);
   });
 
diff --git a/docs/docs/components/format-bytes.md b/docs/docs/components/format-bytes.md
index a8ef1b3d4..7a0e77554 100644
--- a/docs/docs/components/format-bytes.md
+++ b/docs/docs/components/format-bytes.md
@@ -16,7 +16,7 @@ icon: format-bytes
   const formatter = container.querySelector('wa-format-bytes');
   const input = container.querySelector('wa-input');
 
-  input.addEventListener('wa-input', () => (formatter.value = input.value || 0));
+  input.addEventListener('input', () => (formatter.value = input.value || 0));
 </script>
 ```
 
diff --git a/docs/docs/components/format-number.md b/docs/docs/components/format-number.md
index ec061f071..fc8763b4f 100644
--- a/docs/docs/components/format-number.md
+++ b/docs/docs/components/format-number.md
@@ -19,7 +19,7 @@ Localization is handled by the browser's [`Intl.NumberFormat` API](https://devel
   const formatter = container.querySelector('wa-format-number');
   const input = container.querySelector('wa-input');
 
-  input.addEventListener('wa-input', () => (formatter.value = input.value || 0));
+  input.addEventListener('input', () => (formatter.value = input.value || 0));
 </script>
 ```
 
diff --git a/docs/docs/components/popup.md b/docs/docs/components/popup.md
index 8a8fc7b94..5a51a35a6 100644
--- a/docs/docs/components/popup.md
+++ b/docs/docs/components/popup.md
@@ -54,11 +54,11 @@ Popup is a low-level utility built specifically for positioning elements. Do not
   const active = container.querySelector('wa-switch[name="active"]');
   const arrow = container.querySelector('wa-switch[name="arrow"]');
 
-  select.addEventListener('wa-change', () => (popup.placement = select.value));
-  distance.addEventListener('wa-input', () => (popup.distance = distance.value));
-  skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
-  active.addEventListener('wa-change', () => (popup.active = active.checked));
-  arrow.addEventListener('wa-change', () => (popup.arrow = arrow.checked));
+  select.addEventListener('change', () => (popup.placement = select.value));
+  distance.addEventListener('input', () => (popup.distance = distance.value));
+  skidding.addEventListener('input', () => (popup.skidding = skidding.value));
+  active.addEventListener('change', () => (popup.active = active.checked));
+  arrow.addEventListener('change', () => (popup.arrow = arrow.checked));
 </script>
 
 <style>
@@ -145,7 +145,7 @@ Popups are inactive and hidden until the `active` attribute is applied. Removing
   const popup = container.querySelector('wa-popup');
   const active = container.querySelector('wa-switch');
 
-  active.addEventListener('wa-change', () => (popup.active = active.checked));
+  active.addEventListener('change', () => (popup.active = active.checked));
 </script>
 ```
 
@@ -233,7 +233,7 @@ Since placement is preferred when using `flip`, you can observe the popup's curr
   const popup = container.querySelector('wa-popup');
   const select = container.querySelector('wa-select');
 
-  select.addEventListener('wa-change', () => (popup.placement = select.value));
+  select.addEventListener('change', () => (popup.placement = select.value));
 </script>
 ```
 
@@ -277,7 +277,7 @@ Use the `distance` attribute to change the distance between the popup and its an
   const popup = container.querySelector('wa-popup');
   const distance = container.querySelector('wa-slider');
 
-  distance.addEventListener('wa-input', () => (popup.distance = distance.value));
+  distance.addEventListener('input', () => (popup.distance = distance.value));
 </script>
 ```
 
@@ -321,7 +321,7 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
   const popup = container.querySelector('wa-popup');
   const skidding = container.querySelector('wa-slider');
 
-  skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
+  skidding.addEventListener('input', () => (popup.skidding = skidding.value));
 </script>
 ```
 
@@ -409,9 +409,9 @@ By default, the arrow will be aligned as close to the center of the _anchor_ as
     const arrowPlacement = container.querySelector('[name="arrow-placement"]');
     const arrow = container.querySelector('[name="arrow"]');
 
-    placement.addEventListener('wa-change', () => (popup.placement = placement.value));
-    arrowPlacement.addEventListener('wa-change', () => (popup.arrowPlacement = arrowPlacement.value));
-    arrow.addEventListener('wa-change', () => (popup.arrow = arrow.checked));
+    placement.addEventListener('change', () => (popup.placement = placement.value));
+    arrowPlacement.addEventListener('change', () => (popup.arrowPlacement = arrowPlacement.value));
+    arrow.addEventListener('change', () => (popup.arrow = arrow.checked));
   </script>
 </div>
 ```
@@ -464,7 +464,7 @@ Use the `sync` attribute to make the popup the same width or height as the ancho
   const fixed = container.querySelector('wa-switch');
   const sync = container.querySelector('wa-select');
 
-  sync.addEventListener('wa-change', () => (popup.sync = sync.value));
+  sync.addEventListener('change', () => (popup.sync = sync.value));
 </script>
 ```
 
@@ -523,7 +523,7 @@ Toggle the switch and scroll the container to see the difference.
   const popup = container.querySelector('wa-popup');
   const fixed = container.querySelector('wa-switch');
 
-  fixed.addEventListener('wa-change', () => (popup.strategy = fixed.checked ? 'fixed' : 'absolute'));
+  fixed.addEventListener('change', () => (popup.strategy = fixed.checked ? 'fixed' : 'absolute'));
 </script>
 ```
 
@@ -575,7 +575,7 @@ Scroll the container to see how the popup flips to prevent clipping.
   const popup = container.querySelector('wa-popup');
   const flip = container.querySelector('wa-switch');
 
-  flip.addEventListener('wa-change', () => (popup.flip = flip.checked));
+  flip.addEventListener('change', () => (popup.flip = flip.checked));
 </script>
 ```
 
@@ -670,7 +670,7 @@ Toggle the switch to see the difference.
   const popup = container.querySelector('wa-popup');
   const shift = container.querySelector('wa-switch');
 
-  shift.addEventListener('wa-change', () => (popup.shift = shift.checked));
+  shift.addEventListener('change', () => (popup.shift = shift.checked));
 </script>
 ```
 
@@ -731,7 +731,7 @@ Scroll the container to see the popup resize as its available space changes.
   const popup = container.querySelector('wa-popup');
   const autoSize = container.querySelector('wa-switch');
 
-  autoSize.addEventListener('wa-change', () => (popup.autoSize = autoSize.checked ? 'both' : ''));
+  autoSize.addEventListener('change', () => (popup.autoSize = autoSize.checked ? 'both' : ''));
 </script>
 ```
 
@@ -782,9 +782,9 @@ When a gap exists between the anchor and the popup element, this option will add
   const hoverBridge = container.querySelector('wa-switch');
   const distance = container.querySelector('wa-slider[label="Distance"]');
   const skidding = container.querySelector('wa-slider[label="Skidding"]');
-  distance.addEventListener('wa-input', () => (popup.distance = distance.value));
-  skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
-  hoverBridge.addEventListener('wa-change', () => (popup.hoverBridge = hoverBridge.checked));
+  distance.addEventListener('input', () => (popup.distance = distance.value));
+  skidding.addEventListener('input', () => (popup.skidding = skidding.value));
+  hoverBridge.addEventListener('change', () => (popup.hoverBridge = hoverBridge.checked));
 </script>
 ```
 
@@ -837,7 +837,7 @@ This example anchors a popup to the mouse cursor using a virtual element. As suc
   };
 
   // Only activate the popup when the switch is checked
-  enabled.addEventListener('wa-change', () => {
+  enabled.addEventListener('change', () => {
     popup.active = enabled.checked;
   });
 
diff --git a/docs/docs/components/qr-code.md b/docs/docs/components/qr-code.md
index 24a058f86..62832144e 100644
--- a/docs/docs/components/qr-code.md
+++ b/docs/docs/components/qr-code.md
@@ -24,7 +24,7 @@ QR codes are useful for providing small pieces of information to users who can q
 
   customElements.whenDefined('wa-qr-code').then(() => {
     input.value = qrCode.value;
-    input.addEventListener('wa-input', () => (qrCode.value = input.value));
+    input.addEventListener('input', () => (qrCode.value = input.value));
   });
 </script>
 
diff --git a/docs/docs/components/radio-group.md b/docs/docs/components/radio-group.md
index 11714c3be..b73ac76e5 100644
--- a/docs/docs/components/radio-group.md
+++ b/docs/docs/components/radio-group.md
@@ -65,7 +65,7 @@ The size of [Radios](/docs/components/radio) and [Radio Buttons](/docs/component
 <script>
   const radioGroup = document.querySelector('.radio-group-size');
 
-  radioGroup.addEventListener('wa-change', () => {
+  radioGroup.addEventlistener('change', () => {
     radioGroup.size = radioGroup.value;
   });
 </script>
@@ -127,7 +127,7 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
   });
 
   // Update validity when a selection is made
-  form.addEventListener('wa-change', () => {
+  form.addEventlistener('change', () => {
     const isValid = radioGroup.value === '3';
     radioGroup.setCustomValidity(isValid ? '' : errorMessage);
   });
diff --git a/docs/docs/components/split-panel.md b/docs/docs/components/split-panel.md
index d91e5e2ed..40194f940 100644
--- a/docs/docs/components/split-panel.md
+++ b/docs/docs/components/split-panel.md
@@ -208,7 +208,7 @@ Try resizing the example below with each option and notice how the panels respon
   const splitPanel = container.querySelector('wa-split-panel');
   const select = container.querySelector('wa-select');
 
-  select.addEventListener('wa-change', () => (splitPanel.primary = select.value));
+  select.addEventlistener('change', () => (splitPanel.primary = select.value));
 </script>
 ```
 
diff --git a/docs/docs/components/tree.md b/docs/docs/components/tree.md
index 79301e06b..17275b12b 100644
--- a/docs/docs/components/tree.md
+++ b/docs/docs/components/tree.md
@@ -88,7 +88,7 @@ The `selection` attribute lets you change the selection behavior of the tree.
   const selectionMode = document.querySelector('#selection-mode');
   const tree = document.querySelector('.tree-selectable');
 
-  selectionMode.addEventListener('wa-change', () => {
+  selectionMode.addEventlistener('change', () => {
     tree.querySelectorAll('wa-tree-item').forEach(item => (item.selected = false));
     tree.selection = selectionMode.value;
   });
diff --git a/docs/docs/experimental/themer.md b/docs/docs/experimental/themer.md
index d6694b9e8..6a655b35e 100644
--- a/docs/docs/experimental/themer.md
+++ b/docs/docs/experimental/themer.md
@@ -803,7 +803,7 @@ hasOutline: false
   const queue = [];
   let inputTimeout;
 
-  variantInput.addEventListener('wa-change', () => {
+  variantInput.addEventlistener('change', () => {
     iconList.dataset.variant = variantInput.value;
   });
 
@@ -823,7 +823,7 @@ hasOutline: false
   });
 
   // Filter as the user types
-  input.addEventListener('wa-input', () => {
+  input.addEventListener('input', () => {
     clearTimeout(inputTimeout);
     inputTimeout = setTimeout(() => {
       [...iconList.children].map(item => {
@@ -1084,10 +1084,10 @@ hasOutline: false
     el.classList.add(`wa-theme-${theme}-${colorMode}`);
   }
 
-  colorModeSelect.addEventListener('wa-change', setColorMode);
+  colorModeSelect.addEventlistener('change', setColorMode);
 
   // Theme Switcher
-  themeSelect.addEventListener('wa-change', event => {
+  themeSelect.addEventlistener('change', event => {
     const theme = event.target.value
     const newStylesheet = Object.assign(document.createElement("link"), {
       // This media: "print" allows us to lazy load the stylesheet then hot swap it on load.
@@ -1132,14 +1132,14 @@ hasOutline: false
   });
 
   // Color Palette
-  colorSelect.addEventListener('wa-change', event => {
+  colorSelect.addEventlistener('change', event => {
     const colorPalette = event.target.value;
 
     colorStylesheet.href = `/dist/styles/themes/color/${colorPalette}.css`;
   });
 
   // Brand Color
-  brandColor.addEventListener('wa-change', event => {
+  brandColor.addEventlistener('change', event => {
     const documentStyles = document.documentElement.style
     documentStyles.setProperty('--wa-color-primary-95', `var(--wa-color-${event.target.value}-95)`);
     documentStyles.setProperty('--wa-color-primary-90', `var(--wa-color-${event.target.value}-90)`);
@@ -1223,7 +1223,7 @@ hasOutline: false
   })
 
   // Pre-generated logos
-  logoSelector.addEventListener('wa-change', event => {
+  logoSelector.addEventlistener('change', event => {
     const value = event.currentTarget.value
 
     const projectLogo = previewContainer.querySelector("#project-logo");
@@ -1279,21 +1279,21 @@ hasOutline: false
     })
   }
 
-  themeSelect.addEventListener('wa-change', setLogoIcons);
+  themeSelect.addEventlistener('change', setLogoIcons);
 
   // Project Name
-  container.querySelector('[name="project-name"]').addEventListener('wa-input', event => {
+  container.querySelector('[name="project-name"]').addEventListener('input', event => {
     previewContainer.querySelector("#project-name").innerText = event.target.value || event.target.getAttribute("placeholder")
   })
 
   // Heading font weight
   resetHeadingFontWeightValue()
-  fontWeightHeading.addEventListener('wa-input', event => {
+  fontWeightHeading.addEventListener('input', event => {
     document.documentElement.style.setProperty('--wa-font-weight-heading', event.target.value);
   });
 
   // Heading text
-  fontFamilyHeading.addEventListener('wa-change', event => {
+  fontFamilyHeading.addEventlistener('change', event => {
     let fontFamily;
     switch (event.target.value) {
       case 'assistant':
@@ -1351,7 +1351,7 @@ hasOutline: false
   })
 
   // Body text
-  fontFamilyBody.addEventListener('wa-change', event => {
+  fontFamilyBody.addEventlistener('change', event => {
     let fontFamily;
     switch (event.target.value) {
       case 'assistant':
@@ -1404,7 +1404,7 @@ hasOutline: false
 
   // Body font weight
   resetBodyFontWeightValue()
-  fontWeightBody.addEventListener('wa-input', event => {
+  fontWeightBody.addEventListener('input', event => {
     document.documentElement.style.setProperty('--wa-font-weight-body', event.target.value);
   });
 
@@ -1580,7 +1580,7 @@ hasOutline: false
   }
 
   // Swaps icons to the preferred set for the selected theme
-  themeSelect.addEventListener('wa-change', event => {
+  themeSelect.addEventlistener('change', event => {
     setPreferredIcons();
     showIconStyleOptions();
     syncLogoIcon();
@@ -1599,32 +1599,32 @@ hasOutline: false
   });
 
   // Changes available Icon Styles and swaps icons based on the selected Icon Family
-  iconFamily.addEventListener('wa-change', event => {
+  iconFamily.addEventlistener('change', event => {
     useFaIcons();
     showIconStyleOptions();
   });
 
   // Swaps icons based on the selected Icon Style
-  iconStyle.addEventListener('wa-change', useFaIcons);
+  iconStyle.addEventlistener('change', useFaIcons);
 
 
   // Corners
-  container.querySelector('[name="corners"]').addEventListener('wa-input', event => {
+  container.querySelector('[name="corners"]').addEventListener('input', event => {
     document.documentElement.style.setProperty('--wa-border-radius-scale', `${event.target.value}`);
   });
 
   // Border width
-  container.querySelector('[name="border-width"]').addEventListener('wa-input', event => {
+  container.querySelector('[name="border-width"]').addEventListener('input', event => {
     document.documentElement.style.setProperty('--wa-border-width-scale', `${event.target.value / 16}`);
   });
 
   // Border style
-  borderStyle.addEventListener('wa-input', event => {
+  borderStyle.addEventListener('input', event => {
     document.documentElement.style.setProperty('--wa-border-style', event.target.value);
   });
 
   // Spacing style
-  spacing.addEventListener('wa-input', event => {
+  spacing.addEventListener('input', event => {
     document.documentElement.style.setProperty('--wa-space-scale', `${event.target.value}`);
   });
 
diff --git a/docs/docs/form-controls.md b/docs/docs/form-controls.md
index 1a62c0dc5..67431ea68 100644
--- a/docs/docs/form-controls.md
+++ b/docs/docs/form-controls.md
@@ -146,7 +146,7 @@ To create a custom validation error, pass a non-empty string to the `setCustomVa
       alert('All fields are valid!');
     });
 
-    input.addEventListener('wa-input', () => {
+    input.addEventListener('input', () => {
       if (input.value === 'webawesome') {
         input.setCustomValidity('');
       } else {
diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md
index 8a9b6f60f..195c36b46 100644
--- a/docs/docs/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -14,6 +14,11 @@ During the alpha period, things might break! We take breaking changes very serio
 
 ## Next
 
+- 🚨 BREAKING: updated all components to use native events instead of `wa-` prefixed events. This will allow components to work more like native elements in your code, frameworks, third-party plugins, etc. To update your code, simply remove the prefix from your event listeners for the following events.
+  - `wa-input` => `input`
+  - `wa-change` => `change`
+  - `wa-blur` => `blur` (this event will no longer bubble, use `focusout` for a bubbling version)
+  - `wa-focus` => `focus` (this event will no longer bubble)
 - Added `.wa-callout` utility class
 - Fixed a bug in `<wa-tab-group>` that prevented nested tab groups from working properly
 - Fixed slot names for `show-password-icon` and `hide-password-icon` in `<wa-input>` to more intuitively represent their functions
diff --git a/docs/docs/usage.md b/docs/docs/usage.md
index 771c536e9..aea75ebc4 100644
--- a/docs/docs/usage.md
+++ b/docs/docs/usage.md
@@ -24,22 +24,9 @@ Some properties are boolean, so they only have true/false values. To activate a
 
 ## Events
 
-You can listen for standard events such as `click`, `mouseover`, etc. as you normally would. However, it's important to note that many events emitted within a component's shadow root will be [retargeted](https://dom.spec.whatwg.org/#retarget) to the host element. This may result in, for example, multiple `click` handlers executing even if the user clicks just once. Furthermore, `event.target` will point to the host element, making things even more confusing.
+You can listen for standard events such as `click`, `mouseover`, etc. as you normally would. In addition, some components have their own custom events. For example, you might listen to `wa-after-show` to determine when a dialog has been shown.
 
-As a result, you should almost always listen for Web Awesome events instead. For example, instead of listening to `click` to determine when an `<wa-checkbox>` gets toggled, listen to `wa-change`.
-
-```html
-<wa-checkbox>Check me</wa-checkbox>
-
-<script>
-  const checkbox = document.querySelector('wa-checkbox');
-  checkbox.addEventListener('wa-change', event => {
-    console.log(event.target.checked ? 'checked' : 'not checked');
-  });
-</script>
-```
-
-All Web Awesome events are prefixed with `wa-` to prevent collisions with standard events and other libraries. Refer to a component's documentation for a complete list of its events.
+Custom Web Awesome events are prefixed with `wa-` to prevent collisions with standard events and other libraries. Refer to a component's documentation for a complete list of its events.
 
 ## Methods
 
diff --git a/scripts/make-react.js b/scripts/make-react.js
index 54b90679a..e1d6c47ff 100644
--- a/scripts/make-react.js
+++ b/scripts/make-react.js
@@ -24,14 +24,16 @@ for await (const component of components) {
   const componentDir = path.join(reactDir, tagWithoutPrefix);
   const componentFile = path.join(componentDir, 'index.ts');
   const importPath = component.path.replace(/\.js$/, '.js');
-  const eventImports = (component.events || [])
+  // We only want to wrap wa- prefixed events, because the others are native
+  const eventsToWrap = component.events?.filter(event => event.name.startsWith('wa-')) || [];
+  const eventImports = eventsToWrap
     .map(event => `import type { ${event.eventName} } from '../../events/events.js';`)
     .join('\n');
-  const eventExports = (component.events || [])
+  const eventExports = eventsToWrap
     .map(event => `export type { ${event.eventName} } from '../../events/events.js';`)
     .join('\n');
-  const eventNameImport = (component.events || []).length > 0 ? `import { type EventName } from '@lit/react';` : ``;
-  const events = (component.events || [])
+  const eventNameImport = eventsToWrap.length > 0 ? `import { type EventName } from '@lit/react';` : ``;
+  const events = eventsToWrap
     .map(event => `${event.reactName}: '${event.name}' as EventName<${event.eventName}>`)
     .join(',\n');
 
diff --git a/src/components/button/button.test.ts b/src/components/button/button.test.ts
index c459729e5..b2e2e0328 100644
--- a/src/components/button/button.test.ts
+++ b/src/components/button/button.test.ts
@@ -318,13 +318,13 @@ describe('<wa-button>', () => {
       });
 
       describe('when using methods', () => {
-        it('should emit wa-focus and wa-blur when the button is focused and blurred', async () => {
+        it('should emit focus and blur when the button is focused and blurred', async () => {
           const el = await fixture<WaButton>(html` <wa-button>Button</wa-button> `);
           const focusHandler = sinon.spy();
           const blurHandler = sinon.spy();
 
-          el.addEventListener('wa-focus', focusHandler);
-          el.addEventListener('wa-blur', blurHandler);
+          el.addEventListener('focus', focusHandler);
+          el.addEventListener('blur', blurHandler);
 
           el.focus();
           await waitUntil(() => focusHandler.calledOnce);
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index 62133b459..0344c07c4 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -2,12 +2,10 @@ import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { html, literal } from 'lit/static-html.js';
-import { WaBlurEvent } from '../../events/blur.js';
-import { WaFocusEvent } from '../../events/focus.js';
 import { WaInvalidEvent } from '../../events/invalid.js';
 import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { watch } from '../../internal/watch.js';
-import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
+import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
 import nativeStyles from '../../styles/native/button.css';
 import appearanceStyles from '../../styles/utilities/appearance.css';
 import sizeStyles from '../../styles/utilities/size.css';
@@ -26,8 +24,8 @@ import styles from './button.css';
  * @dependency wa-icon
  * @dependency wa-spinner
  *
- * @event wa-blur - Emitted when the button loses focus.
- * @event wa-focus - Emitted when the button gains focus.
+ * @event blur - Emitted when the button loses focus.
+ * @event focus - Emitted when the button gains focus.
  * @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
  *
  * @slot - The button's label.
@@ -142,14 +140,6 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
   /** Used to override the form owner's `target` attribute. */
   @property({ attribute: 'formtarget' }) formTarget: '_self' | '_blank' | '_parent' | '_top' | string;
 
-  private handleBlur() {
-    this.dispatchEvent(new WaBlurEvent());
-  }
-
-  private handleFocus() {
-    this.dispatchEvent(new WaFocusEvent());
-  }
-
   private handleClick() {
     const form = this.getForm();
 
@@ -274,8 +264,6 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
         role=${ifDefined(isLink ? undefined : 'button')}
         aria-disabled=${this.disabled ? 'true' : 'false'}
         tabindex=${this.disabled ? '-1' : '0'}
-        @blur=${this.handleBlur}
-        @focus=${this.handleFocus}
         @invalid=${this.isButton() ? this.handleInvalid : null}
         @click=${this.handleClick}
       >
diff --git a/src/components/checkbox/checkbox.test.ts b/src/components/checkbox/checkbox.test.ts
index 971bdcf8e..823e25708 100644
--- a/src/components/checkbox/checkbox.test.ts
+++ b/src/components/checkbox/checkbox.test.ts
@@ -60,13 +60,13 @@ describe('<wa-checkbox>', () => {
         expect(el.checkValidity()).to.be.true;
       });
 
-      it('should emit wa-change and wa-input when clicked', async () => {
+      it('should emit change and input when clicked', async () => {
         const el = await fixture<WaCheckbox>(html` <wa-checkbox></wa-checkbox> `);
         const changeHandler = sinon.spy();
         const inputHandler = sinon.spy();
 
-        el.addEventListener('wa-change', changeHandler);
-        el.addEventListener('wa-input', inputHandler);
+        el.addEventListener('change', changeHandler);
+        el.addEventListener('input', inputHandler);
         el.click();
         await aTimeout(0);
         await el.updateComplete;
@@ -76,13 +76,13 @@ describe('<wa-checkbox>', () => {
         expect(el.checked).to.be.true;
       });
 
-      it('should emit wa-change and wa-input when toggled with spacebar', async () => {
+      it('should emit change and input when toggled with spacebar', async () => {
         const el = await fixture<WaCheckbox>(html` <wa-checkbox></wa-checkbox> `);
         const changeHandler = sinon.spy();
         const inputHandler = sinon.spy();
 
-        el.addEventListener('wa-change', changeHandler);
-        el.addEventListener('wa-input', inputHandler);
+        el.addEventListener('change', changeHandler);
+        el.addEventListener('input', inputHandler);
         el.focus();
         await el.updateComplete;
         await sendKeys({ press: ' ' });
@@ -92,11 +92,11 @@ describe('<wa-checkbox>', () => {
         expect(el.checked).to.be.true;
       });
 
-      it('should not emit wa-change or wa-input when checked programmatically', async () => {
+      it('should not emit change or input when checked programmatically', async () => {
         const el = await fixture<WaCheckbox>(html` <wa-checkbox></wa-checkbox> `);
 
-        el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
-        el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
+        el.addEventListener('change', () => expect.fail('change should not be emitted'));
+        el.addEventListener('input', () => expect.fail('input should not be emitted'));
         el.checked = true;
         await el.updateComplete;
         await aTimeout(0);
diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts
index 99f07acc4..f2bdfa1fd 100644
--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@@ -4,14 +4,10 @@ import { customElement, property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
-import { WaBlurEvent } from '../../events/blur.js';
-import { WaChangeEvent } from '../../events/change.js';
-import { WaFocusEvent } from '../../events/focus.js';
-import { WaInputEvent } from '../../events/input.js';
 import { HasSlotController } from '../../internal/slot.js';
 import { RequiredValidator } from '../../internal/validators/required-validator.js';
 import { watch } from '../../internal/watch.js';
-import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
+import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
 import nativeStyles from '../../styles/native/checkbox.css';
 import formControlStyles from '../../styles/shadow/form-control.css';
 import sizeStyles from '../../styles/utilities/size.css';
@@ -29,10 +25,10 @@ import styles from './checkbox.css';
  * @slot - The checkbox's label.
  * @slot hint - Text that describes how to use the checkbox. Alternatively, you can use the `hint` attribute.
  *
- * @event wa-blur - Emitted when the checkbox loses focus.
- * @event wa-change - Emitted when the checked state changes.
- * @event wa-focus - Emitted when the checkbox gains focus.
- * @event wa-input - Emitted when the checkbox receives input.
+ * @event blur - Emitted when the checkbox loses focus.
+ * @event change - Emitted when the checked state changes.
+ * @event focus - Emitted when the checkbox gains focus.
+ * @event input - Emitted when the checkbox receives input.
  * @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
  *
  * @csspart base - The component's label .
@@ -137,19 +133,7 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
     this.hasInteracted = true;
     this.checked = !this.checked;
     this.indeterminate = false;
-    this.dispatchEvent(new WaChangeEvent());
-  }
-
-  private handleBlur() {
-    this.dispatchEvent(new WaBlurEvent());
-  }
-
-  private handleInput() {
-    this.dispatchEvent(new WaInputEvent());
-  }
-
-  private handleFocus() {
-    this.dispatchEvent(new WaFocusEvent());
+    this.dispatchEvent(new Event('change'));
   }
 
   @watch('defaultChecked')
@@ -248,9 +232,6 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
             aria-checked=${this.checked ? 'true' : 'false'}
             aria-describedby="hint"
             @click=${this.handleClick}
-            @input=${this.handleInput}
-            @blur=${this.handleBlur}
-            @focus=${this.handleFocus}
           />
 
           <wa-icon part="${iconState}-icon icon" library="system" name=${iconName}></wa-icon>
diff --git a/src/components/color-picker/color-picker.test.ts b/src/components/color-picker/color-picker.test.ts
index 40adf64c7..04b6303dc 100644
--- a/src/components/color-picker/color-picker.test.ts
+++ b/src/components/color-picker/color-picker.test.ts
@@ -14,31 +14,31 @@ describe('<wa-color-picker>', () => {
   for (const fixture of fixtures) {
     describe(`with "${fixture.type}" rendering`, () => {
       describe('when the value changes', () => {
-        it('should not emit wa-change or wa-input when the value is changed programmatically', async () => {
+        it('should not emit change or input when the value is changed programmatically', async () => {
           const el = await fixture<WaColorPicker>(html` <wa-color-picker></wa-color-picker> `);
           const color = 'rgb(255, 204, 0)';
 
-          el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
-          el.addEventListener('wa-input', () => expect.fail('wa-change should not be emitted'));
+          el.addEventListener('change', () => expect.fail('change should not be emitted'));
+          el.addEventListener('input', () => expect.fail('change should not be emitted'));
           el.value = color;
           await el.updateComplete;
         });
 
-        it('should emit wa-change and wa-input when the color grid selector is moved', async () => {
+        it('should emit change and input when the color grid selector is moved', async () => {
           const el = await fixture<WaColorPicker>(html` <wa-color-picker></wa-color-picker> `);
           const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
           const grid = el.shadowRoot!.querySelector<HTMLElement>('[part~="grid"]')!;
           const changeHandler = sinon.spy();
           const inputHandler = sinon.spy();
 
-          el.addEventListener('wa-change', changeHandler);
-          el.addEventListener('wa-input', inputHandler);
+          el.addEventListener('change', changeHandler);
+          el.addEventListener('input', inputHandler);
 
           await clickOnElement(trigger); // open the dropdown
           await aTimeout(200); // wait for the dropdown to open
           await el.updateComplete;
 
-          // Simulate a drag event. "wa-change" should not fire until we stop dragging.
+          // Simulate a drag event. "change" should not fire until we stop dragging.
           await dragElement(grid, 2, 0, {
             afterMouseDown: () => {
               expect(changeHandler).to.have.not.been.called;
@@ -53,20 +53,20 @@ describe('<wa-color-picker>', () => {
           expect(inputHandler).to.have.been.calledTwice;
         });
 
-        it('should emit wa-change and wa-input when the hue slider is moved', async () => {
+        it('should emit change and input when the hue slider is moved', async () => {
           const el = await fixture<WaColorPicker>(html` <wa-color-picker></wa-color-picker> `);
           const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
           const slider = el.shadowRoot!.querySelector<HTMLElement>('[part~="hue-slider"]')!;
           const changeHandler = sinon.spy();
           const inputHandler = sinon.spy();
 
-          el.addEventListener('wa-change', changeHandler);
-          el.addEventListener('wa-input', inputHandler);
+          el.addEventListener('change', changeHandler);
+          el.addEventListener('input', inputHandler);
 
           await clickOnElement(trigger); // open the dropdown
           await aTimeout(200); // wait for the dropdown to open
 
-          // Simulate a drag event. "wa-change" should not fire until we stop dragging.
+          // Simulate a drag event. "change" should not fire until we stop dragging.
           await dragElement(slider, 20, 0, {
             afterMouseDown: () => {
               expect(changeHandler).to.have.not.been.called;
@@ -85,20 +85,20 @@ describe('<wa-color-picker>', () => {
           expect(inputHandler).to.have.been.calledOnce;
         });
 
-        it('should emit wa-change and wa-input when the opacity slider is moved', async () => {
+        it('should emit change and input when the opacity slider is moved', async () => {
           const el = await fixture<WaColorPicker>(html` <wa-color-picker opacity></wa-color-picker> `);
           const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
           const slider = el.shadowRoot!.querySelector<HTMLElement>('[part~="opacity-slider"]')!;
           const changeHandler = sinon.spy();
           const inputHandler = sinon.spy();
 
-          el.addEventListener('wa-change', changeHandler);
-          el.addEventListener('wa-input', inputHandler);
+          el.addEventListener('change', changeHandler);
+          el.addEventListener('input', inputHandler);
 
           await clickOnElement(trigger); // open the dropdown
           await aTimeout(200); // wait for the dropdown to open
 
-          // Simulate a drag event. "wa-change" should not fire until we stop dragging.
+          // Simulate a drag event. "change" should not fire until we stop dragging.
           await dragElement(slider, 2, 0, {
             afterMouseDown: () => {
               expect(changeHandler).to.have.not.been.called;
@@ -115,15 +115,15 @@ describe('<wa-color-picker>', () => {
           expect(inputHandler).to.have.been.calledTwice;
         });
 
-        it('should emit wa-change and wa-input when toggling the format', async () => {
+        it('should emit change and input when toggling the format', async () => {
           const el = await fixture<WaColorPicker>(html` <wa-color-picker value="#fff"></wa-color-picker> `);
           const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
           const formatButton = el.shadowRoot!.querySelector<HTMLElement>('[part~="format-button"]')!;
           const changeHandler = sinon.spy();
           const inputHandler = sinon.spy();
 
-          el.addEventListener('wa-change', changeHandler);
-          el.addEventListener('wa-input', inputHandler);
+          el.addEventListener('change', changeHandler);
+          el.addEventListener('input', inputHandler);
 
           await clickOnElement(trigger); // open the dropdown
           await aTimeout(200); // wait for the dropdown to open
@@ -160,7 +160,7 @@ describe('<wa-color-picker>', () => {
           expect(getComputedStyle(swatches[2]).backgroundColor).to.equal('rgb(0, 0, 255)');
         });
 
-        it('should emit wa-change and wa-input when clicking on a swatch', async () => {
+        it('should emit change and input when clicking on a swatch', async () => {
           const el = await fixture<WaColorPicker>(html`
             <wa-color-picker swatches="red; green; blue;"></wa-color-picker>
           `);
@@ -169,8 +169,8 @@ describe('<wa-color-picker>', () => {
           const changeHandler = sinon.spy();
           const inputHandler = sinon.spy();
 
-          el.addEventListener('wa-change', changeHandler);
-          el.addEventListener('wa-input', inputHandler);
+          el.addEventListener('change', changeHandler);
+          el.addEventListener('input', inputHandler);
 
           await clickOnElement(trigger); // open the dropdown
           await aTimeout(200); // wait for the dropdown to open
@@ -181,15 +181,15 @@ describe('<wa-color-picker>', () => {
           expect(inputHandler).to.have.been.calledOnce;
         });
 
-        it('should emit wa-change and wa-input when selecting a color with the keyboard', async () => {
+        it('should emit change and input when selecting a color with the keyboard', async () => {
           const el = await fixture<WaColorPicker>(html` <wa-color-picker></wa-color-picker> `);
           const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
           const gridHandle = el.shadowRoot!.querySelector<HTMLElement>('[part~="grid-handle"]')!;
           const changeHandler = sinon.spy();
           const inputHandler = sinon.spy();
 
-          el.addEventListener('wa-change', changeHandler);
-          el.addEventListener('wa-input', inputHandler);
+          el.addEventListener('change', changeHandler);
+          el.addEventListener('input', inputHandler);
 
           await clickOnElement(trigger); // open the dropdown
           await aTimeout(200); // wait for the dropdown to open
@@ -201,15 +201,15 @@ describe('<wa-color-picker>', () => {
           expect(inputHandler).to.have.been.calledOnce;
         });
 
-        it('should emit wa-change and wa-input when selecting a color with the keyboard', async () => {
+        it('should emit change and input when selecting a color with the keyboard', async () => {
           const el = await fixture<WaColorPicker>(html` <wa-color-picker></wa-color-picker> `);
           const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
           const handle = el.shadowRoot!.querySelector<HTMLElement>('[part~="grid-handle"]')!;
           const changeHandler = sinon.spy();
           const inputHandler = sinon.spy();
 
-          el.addEventListener('wa-change', changeHandler);
-          el.addEventListener('wa-input', inputHandler);
+          el.addEventListener('change', changeHandler);
+          el.addEventListener('input', inputHandler);
 
           await clickOnElement(trigger); // open the dropdown
           await aTimeout(200); // wait for the dropdown to open
@@ -221,15 +221,15 @@ describe('<wa-color-picker>', () => {
           expect(inputHandler).to.have.been.calledOnce;
         });
 
-        it('should emit wa-change and wa-input when selecting hue with the keyboard', async () => {
+        it('should emit change and input when selecting hue with the keyboard', async () => {
           const el = await fixture<WaColorPicker>(html` <wa-color-picker></wa-color-picker> `);
           const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
           const handle = el.shadowRoot!.querySelector<HTMLElement>('[part~="hue-slider"] > span')!;
           const changeHandler = sinon.spy();
           const inputHandler = sinon.spy();
 
-          el.addEventListener('wa-change', changeHandler);
-          el.addEventListener('wa-input', inputHandler);
+          el.addEventListener('change', changeHandler);
+          el.addEventListener('input', inputHandler);
 
           await clickOnElement(trigger); // open the dropdown
           await aTimeout(200); // wait for the dropdown to open
@@ -241,15 +241,15 @@ describe('<wa-color-picker>', () => {
           expect(inputHandler).to.have.been.calledOnce;
         });
 
-        it('should emit wa-change and wa-input when selecting opacity with the keyboard', async () => {
+        it('should emit change and input when selecting opacity with the keyboard', async () => {
           const el = await fixture<WaColorPicker>(html` <wa-color-picker opacity></wa-color-picker> `);
           const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
           const handle = el.shadowRoot!.querySelector<HTMLElement>('[part~="opacity-slider"] > span')!;
           const changeHandler = sinon.spy();
           const inputHandler = sinon.spy();
 
-          el.addEventListener('wa-change', changeHandler);
-          el.addEventListener('wa-input', inputHandler);
+          el.addEventListener('change', changeHandler);
+          el.addEventListener('input', inputHandler);
 
           await clickOnElement(trigger); // open the dropdown
           await aTimeout(200); // wait for the dropdown to open
@@ -261,15 +261,15 @@ describe('<wa-color-picker>', () => {
           expect(inputHandler).to.have.been.calledOnce;
         });
 
-        it('should emit wa-change and wa-input when entering a value in the color input and pressing enter', async () => {
+        it('should emit change and input when entering a value in the color input and pressing enter', async () => {
           const el = await fixture<WaColorPicker>(html` <wa-color-picker opacity></wa-color-picker> `);
           const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
           const input = el.shadowRoot!.querySelector<HTMLElement>('[part~="input"]')!;
           const changeHandler = sinon.spy();
           const inputHandler = sinon.spy();
 
-          el.addEventListener('wa-change', changeHandler);
-          el.addEventListener('wa-input', inputHandler);
+          el.addEventListener('change', changeHandler);
+          el.addEventListener('input', inputHandler);
 
           await clickOnElement(trigger); // open the dropdown
           await aTimeout(200); // wait for the dropdown to open
@@ -283,15 +283,15 @@ describe('<wa-color-picker>', () => {
           expect(inputHandler).to.have.been.calledOnce;
         });
 
-        it('should emit wa-change and wa-input when entering a value in the color input and blurring the field', async () => {
+        it('should emit change and input when entering a value in the color input and blurring the field', async () => {
           const el = await fixture<WaColorPicker>(html` <wa-color-picker opacity></wa-color-picker> `);
           const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
           const input = el.shadowRoot!.querySelector<HTMLElement>('[part~="input"]')!;
           const changeHandler = sinon.spy();
           const inputHandler = sinon.spy();
 
-          el.addEventListener('wa-change', changeHandler);
-          el.addEventListener('wa-input', inputHandler);
+          el.addEventListener('change', changeHandler);
+          el.addEventListener('input', inputHandler);
 
           await clickOnElement(trigger); // open the dropdown
           await aTimeout(200); // wait for the dropdown to open
@@ -311,8 +311,8 @@ describe('<wa-color-picker>', () => {
           const changeHandler = sinon.spy();
           const inputHandler = sinon.spy();
 
-          el.addEventListener('wa-change', changeHandler);
-          el.addEventListener('wa-input', inputHandler);
+          el.addEventListener('change', changeHandler);
+          el.addEventListener('input', inputHandler);
 
           el.swatches = ['#fff'];
           await el.updateComplete;
@@ -354,14 +354,14 @@ describe('<wa-color-picker>', () => {
       it.skip('should display a color with opacity when an initial value with opacity is provided', async () => {
         const el = await fixture<WaColorPicker>(html` <wa-color-picker opacity value="#ff000050"></wa-color-picker> `);
         const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]')!;
-        const previewButton = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="preview"]');
+        const previewButton = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="preview"]')!;
         const previewColor = getComputedStyle(previewButton).getPropertyValue('--preview-color');
 
         expect(trigger.style.color).to.equal('rgba(255, 0, 0, 0.314)');
         expect(previewColor).to.equal('#ff000050');
       });
 
-      it.skip('should emit wa-focus when rendered as a dropdown and focused', async () => {
+      it.skip('should emit focus when rendered as a dropdown and focused', async () => {
         const el = await fixture<WaColorPicker>(html`
           <div>
             <wa-color-picker></wa-color-picker>
@@ -374,8 +374,8 @@ describe('<wa-color-picker>', () => {
         const focusHandler = sinon.spy();
         const blurHandler = sinon.spy();
 
-        colorPicker.addEventListener('wa-focus', focusHandler);
-        colorPicker.addEventListener('wa-blur', blurHandler);
+        colorPicker.addEventListener('focus', focusHandler);
+        colorPicker.addEventListener('blur', blurHandler);
 
         await clickOnElement(trigger);
         await colorPicker.updateComplete;
@@ -391,8 +391,8 @@ describe('<wa-color-picker>', () => {
         const focusHandler = sinon.spy();
         const blurHandler = sinon.spy();
 
-        colorPicker.addEventListener('wa-focus', focusHandler);
-        colorPicker.addEventListener('wa-blur', blurHandler);
+        colorPicker.addEventListener('focus', focusHandler);
+        colorPicker.addEventListener('blur', blurHandler);
 
         // Focus
         colorPicker.focus();
diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts
index dcc5a0ea8..82de05084 100644
--- a/src/components/color-picker/color-picker.ts
+++ b/src/components/color-picker/color-picker.ts
@@ -5,17 +5,13 @@ import { customElement, eventOptions, property, query, state } from 'lit/decorat
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import { WaBlurEvent } from '../../events/blur.js';
-import { WaChangeEvent } from '../../events/change.js';
-import { WaFocusEvent } from '../../events/focus.js';
-import { WaInputEvent } from '../../events/input.js';
 import { WaInvalidEvent } from '../../events/invalid.js';
 import { drag } from '../../internal/drag.js';
 import { clamp } from '../../internal/math.js';
 import { HasSlotController } from '../../internal/slot.js';
 import { RequiredValidator } from '../../internal/validators/required-validator.js';
 import { watch } from '../../internal/watch.js';
-import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
+import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
 import formControlStyles from '../../styles/shadow/form-control.css';
 import sizeStyles from '../../styles/utilities/size.css';
 import visuallyHidden from '../../styles/utilities/visually-hidden.css';
@@ -54,10 +50,10 @@ declare const EyeDropper: EyeDropperConstructor;
  * @slot label - The color picker's form label. Alternatively, you can use the `label` attribute.
  * @slot hint - The color picker's form hint. Alternatively, you can use the `hint` attribute.
  *
- * @event wa-blur - Emitted when the color picker loses focus.
- * @event wa-change - Emitted when the color picker's value changes.
- * @event wa-focus - Emitted when the color picker receives focus.
- * @event wa-input - Emitted when the color picker receives input.
+ * @event blur - Emitted when the color picker loses focus.
+ * @event change - Emitted when the color picker's value changes.
+ * @event focus - Emitted when the color picker receives focus.
+ * @event input - Emitted when the color picker receives input.
  * @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
  *
  * @csspart base - The component's base wrapper.
@@ -266,12 +262,10 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
 
   private handleFocusIn = () => {
     this.hasFocus = true;
-    this.dispatchEvent(new WaFocusEvent());
   };
 
   private handleFocusOut = () => {
     this.hasFocus = false;
-    this.dispatchEvent(new WaBlurEvent());
   };
 
   private handleFormatToggle() {
@@ -279,8 +273,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
     const nextIndex = (formats.indexOf(this.format) + 1) % formats.length;
     this.format = formats[nextIndex] as 'hex' | 'rgb' | 'hsl' | 'hsv';
     this.setColor(this.value || '');
-    this.dispatchEvent(new WaChangeEvent());
-    this.dispatchEvent(new WaInputEvent());
+    this.dispatchEvent(new Event('change'));
+    this.dispatchEvent(new InputEvent('input'));
   }
 
   private handleAlphaDrag(event: PointerEvent) {
@@ -300,13 +294,13 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
 
         if (this.value !== currentValue) {
           currentValue = this.value;
-          this.dispatchEvent(new WaInputEvent());
+          this.dispatchEvent(new InputEvent('input'));
         }
       },
       onStop: () => {
         if (this.value !== initialValue) {
           initialValue = this.value;
-          this.dispatchEvent(new WaChangeEvent());
+          this.dispatchEvent(new Event('change'));
         }
       },
       initialEvent: event,
@@ -330,13 +324,13 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
 
         if (this.value !== currentValue) {
           currentValue = this.value;
-          this.dispatchEvent(new WaInputEvent());
+          this.dispatchEvent(new InputEvent('input'));
         }
       },
       onStop: () => {
         if (this.value !== initialValue) {
           initialValue = this.value;
-          this.dispatchEvent(new WaChangeEvent());
+          this.dispatchEvent(new Event('change'));
         }
       },
       initialEvent: event,
@@ -363,14 +357,14 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
 
         if (this.value !== currentValue) {
           currentValue = this.value;
-          this.dispatchEvent(new WaInputEvent());
+          this.dispatchEvent(new InputEvent('input'));
         }
       },
       onStop: () => {
         this.isDraggingGridHandle = false;
         if (this.value !== initialValue) {
           initialValue = this.value;
-          this.dispatchEvent(new WaChangeEvent());
+          this.dispatchEvent(new Event('change'));
         }
       },
       initialEvent: event,
@@ -406,8 +400,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
     }
 
     if (this.value !== oldValue) {
-      this.dispatchEvent(new WaChangeEvent());
-      this.dispatchEvent(new WaInputEvent());
+      this.dispatchEvent(new InputEvent('input'));
+      this.dispatchEvent(new Event('change'));
     }
   }
 
@@ -440,8 +434,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
     }
 
     if (this.value !== oldValue) {
-      this.dispatchEvent(new WaChangeEvent());
-      this.dispatchEvent(new WaInputEvent());
+      this.dispatchEvent(new InputEvent('input'));
+      this.dispatchEvent(new Event('change'));
     }
   }
 
@@ -474,12 +468,12 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
     }
 
     if (this.value !== oldValue) {
-      this.dispatchEvent(new WaChangeEvent());
-      this.dispatchEvent(new WaInputEvent());
+      this.dispatchEvent(new InputEvent('input'));
+      this.dispatchEvent(new Event('change'));
     }
   }
 
-  private handleInputChange(event: WaChangeEvent) {
+  private handleInputChange(event: Event) {
     const target = event.target as HTMLInputElement;
     const oldValue = this.value;
 
@@ -494,15 +488,15 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
     }
 
     if (this.value !== oldValue) {
-      this.dispatchEvent(new WaChangeEvent());
-      this.dispatchEvent(new WaInputEvent());
+      this.dispatchEvent(new InputEvent('input'));
+      this.dispatchEvent(new Event('change'));
     }
   }
 
-  private handleInputInput(event: WaInputEvent) {
+  private handleInputInput(event: InputEvent) {
     this.updateValidity();
 
-    // Prevent the `<wa-input>` element's `wa-input` event from bubbling up
+    // Prevent the `<wa-input>` element's `input` event from bubbling up
     event.stopPropagation();
   }
 
@@ -515,8 +509,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
         this.input.value = this.value;
 
         if (this.value !== oldValue) {
-          this.dispatchEvent(new WaChangeEvent());
-          this.dispatchEvent(new WaInputEvent());
+          this.dispatchEvent(new InputEvent('input'));
+          this.dispatchEvent(new Event('change'));
         }
 
         setTimeout(() => this.input.select());
@@ -691,8 +685,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
         this.setColor(colorSelectionResult.sRGBHex);
 
         if (this.value !== oldValue) {
-          this.dispatchEvent(new WaChangeEvent());
-          this.dispatchEvent(new WaInputEvent());
+          this.dispatchEvent(new InputEvent('input'));
+          this.dispatchEvent(new Event('change'));
         }
       })
       .catch(() => {
@@ -707,8 +701,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
       this.setColor(color);
 
       if (this.value !== oldValue) {
-        this.dispatchEvent(new WaChangeEvent());
-        this.dispatchEvent(new WaInputEvent());
+        this.dispatchEvent(new InputEvent('input'));
+        this.dispatchEvent(new Event('change'));
       }
     }
   }
@@ -1008,10 +1002,10 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
             ?disabled=${this.disabled}
             aria-label=${this.localize.term('currentValue')}
             @keydown=${this.handleInputKeyDown}
-            @wa-change=${this.handleInputChange}
-            @wa-input=${this.handleInputInput}
-            @wa-blur=${this.stopNestedEventPropagation}
-            @wa-focus=${this.stopNestedEventPropagation}
+            @change=${this.handleInputChange}
+            @input=${this.handleInputInput}
+            @blur=${this.stopNestedEventPropagation}
+            @focus=${this.stopNestedEventPropagation}
           ></wa-input>
 
           <wa-button-group>
@@ -1029,8 +1023,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
                       caret:format-button__caret
                     "
                     @click=${this.handleFormatToggle}
-                    @wa-blur=${this.stopNestedEventPropagation}
-                    @wa-focus=${this.stopNestedEventPropagation}
+                    @blur=${this.stopNestedEventPropagation}
+                    @focus=${this.stopNestedEventPropagation}
                   >
                     ${this.setLetterCase(this.format)}
                   </wa-button>
@@ -1049,8 +1043,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
                       caret:eye-dropper-button__caret
                     "
                     @click=${this.handleEyeDropper}
-                    @wa-blur=${this.stopNestedEventPropagation}
-                    @wa-focus=${this.stopNestedEventPropagation}
+                    @blur=${this.stopNestedEventPropagation}
+                    @focus=${this.stopNestedEventPropagation}
                   >
                     <wa-icon
                       library="system"
diff --git a/src/components/icon-button/icon-button.test.ts b/src/components/icon-button/icon-button.test.ts
index b30766687..f137269ce 100644
--- a/src/components/icon-button/icon-button.test.ts
+++ b/src/components/icon-button/icon-button.test.ts
@@ -146,13 +146,13 @@ describe('<wa-icon-button>', () => {
       });
 
       describe('when using methods', () => {
-        it('should emit wa-focus and wa-blur when the button is focused and blurred', async () => {
+        it('should emit focus and blur when the button is focused and blurred', async () => {
           const el = await fixture<WaIconButton>(html` <wa-icon-button></wa-icon-button> `);
           const focusHandler = sinon.spy();
           const blurHandler = sinon.spy();
 
-          el.addEventListener('wa-focus', focusHandler);
-          el.addEventListener('wa-blur', blurHandler);
+          el.addEventListener('focus', focusHandler);
+          el.addEventListener('blur', blurHandler);
 
           el.focus();
           await waitUntil(() => focusHandler.calledOnce);
diff --git a/src/components/icon-button/icon-button.ts b/src/components/icon-button/icon-button.ts
index 82813b18d..0a7b62834 100644
--- a/src/components/icon-button/icon-button.ts
+++ b/src/components/icon-button/icon-button.ts
@@ -2,9 +2,7 @@ import { customElement, property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { html, literal } from 'lit/static-html.js';
-import { WaBlurEvent } from '../../events/blur.js';
-import { WaFocusEvent } from '../../events/focus.js';
-import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
+import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
 import '../icon/icon.js';
 import styles from './icon-button.css';
 
@@ -16,8 +14,8 @@ import styles from './icon-button.css';
  *
  * @dependency wa-icon
  *
- * @event wa-blur - Emitted when the icon button loses focus.
- * @event wa-focus - Emitted when the icon button gains focus.
+ * @event blur - Emitted when the icon button loses focus.
+ * @event focus - Emitted when the icon button gains focus.
  *
  * @cssproperty --background-color-hover - The color of the button's background on hover.
  *
@@ -71,14 +69,6 @@ export default class WaIconButton extends WebAwesomeFormAssociatedElement {
   /** Disables the button. */
   @property({ type: Boolean }) disabled = false;
 
-  private handleBlur() {
-    this.dispatchEvent(new WaBlurEvent());
-  }
-
-  private handleFocus() {
-    this.dispatchEvent(new WaFocusEvent());
-  }
-
   private handleClick(event: MouseEvent) {
     if (this.disabled) {
       event.preventDefault();
@@ -122,8 +112,6 @@ export default class WaIconButton extends WebAwesomeFormAssociatedElement {
         aria-disabled=${this.disabled ? 'true' : 'false'}
         aria-label="${this.label}"
         tabindex=${this.disabled ? '-1' : '0'}
-        @blur=${this.handleBlur}
-        @focus=${this.handleFocus}
         @click=${this.handleClick}
       >
         <wa-icon
diff --git a/src/components/image-comparer/image-comparer.test.ts b/src/components/image-comparer/image-comparer.test.ts
index bdd594c55..9c749070b 100644
--- a/src/components/image-comparer/image-comparer.test.ts
+++ b/src/components/image-comparer/image-comparer.test.ts
@@ -37,7 +37,7 @@ describe('<wa-image-comparer>', () => {
         `);
         const handler = sinon.spy();
 
-        el.addEventListener('wa-change', handler, { once: true });
+        el.addEventListener('change', handler, { once: true });
 
         el.position = 40;
         await el.updateComplete;
diff --git a/src/components/image-comparer/image-comparer.ts b/src/components/image-comparer/image-comparer.ts
index 150e772e9..d91f35bec 100644
--- a/src/components/image-comparer/image-comparer.ts
+++ b/src/components/image-comparer/image-comparer.ts
@@ -1,7 +1,6 @@
 import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import { WaChangeEvent } from '../../events/change.js';
 import { drag } from '../../internal/drag.js';
 import { clamp } from '../../internal/math.js';
 import { watch } from '../../internal/watch.js';
@@ -22,7 +21,7 @@ import styles from './image-comparer.css';
  * @slot after - The after image, an `<img>` or `<svg>` element.
  * @slot handle - The icon used inside the handle.
  *
- * @event wa-change - Emitted when the position changes.
+ * @event change - Emitted when the position changes.
  *
  * @csspart base - The component's base wrapper.
  * @csspart before - The container that wraps the before image.
@@ -92,7 +91,7 @@ export default class WaImageComparer extends WebAwesomeElement {
 
   @watch('position', { waitUntilFirstUpdate: true })
   handlePositionChange() {
-    this.dispatchEvent(new WaChangeEvent());
+    this.dispatchEvent(new Event('change'));
   }
 
   render() {
diff --git a/src/components/input/input.test.ts b/src/components/input/input.test.ts
index 0283bd393..1d5719109 100644
--- a/src/components/input/input.test.ts
+++ b/src/components/input/input.test.ts
@@ -60,7 +60,7 @@ describe('<wa-input>', () => {
         const label = el.shadowRoot!.querySelector('[part~="form-control-label"]')!;
         const focusHandler = sinon.spy();
 
-        el.addEventListener('wa-focus', focusHandler);
+        el.addEventListener('focus', focusHandler);
         (label as HTMLLabelElement).click();
         await waitUntil(() => focusHandler.calledOnce);
 
@@ -312,13 +312,13 @@ describe('<wa-input>', () => {
       });
 
       describe('when the value changes', () => {
-        it('should emit wa-change and wa-input when the user types in the input', async () => {
+        it('should emit change and input when the user types in the input', async () => {
           const el = await fixture<WaInput>(html` <wa-input></wa-input> `);
           const inputHandler = sinon.spy();
           const changeHandler = sinon.spy();
 
-          el.addEventListener('wa-input', inputHandler);
-          el.addEventListener('wa-change', changeHandler);
+          el.addEventListener('input', inputHandler);
+          el.addEventListener('change', changeHandler);
           el.focus();
           await sendKeys({ type: 'abc' });
           el.blur();
@@ -328,21 +328,21 @@ describe('<wa-input>', () => {
           expect(inputHandler).to.have.been.calledThrice;
         });
 
-        it('should not emit wa-change or wa-input when the value is set programmatically', async () => {
+        it('should not emit change or input when the value is set programmatically', async () => {
           const el = await fixture<WaInput>(html` <wa-input></wa-input> `);
 
-          el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
-          el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
+          el.addEventListener('change', () => expect.fail('change should not be emitted'));
+          el.addEventListener('input', () => expect.fail('input should not be emitted'));
           el.value = 'abc';
 
           await el.updateComplete;
         });
 
-        it('should not emit wa-change or wa-input when calling setRangeText()', async () => {
+        it('should not emit change or input when calling setRangeText()', async () => {
           const el = await fixture<WaInput>(html` <wa-input value="hi there"></wa-input> `);
 
-          el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
-          el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
+          el.addEventListener('change', () => expect.fail('change should not be emitted'));
+          el.addEventListener('input', () => expect.fail('input should not be emitted'));
           el.focus();
           el.setSelectionRange(0, 2);
           el.setRangeText('hello');
@@ -399,21 +399,21 @@ describe('<wa-input>', () => {
           expect(el.value).to.equal('0');
         });
 
-        it('should not emit wa-input or wa-change when stepUp() is called programmatically', async () => {
+        it('should not emit input or change when stepUp() is called programmatically', async () => {
           const el = await fixture<WaInput>(html` <wa-input type="number" step="2" value="2"></wa-input> `);
 
-          el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
-          el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
+          el.addEventListener('change', () => expect.fail('change should not be emitted'));
+          el.addEventListener('input', () => expect.fail('input should not be emitted'));
           el.stepUp();
 
           await el.updateComplete;
         });
 
-        it('should not emit wa-input and wa-change when stepDown() is called programmatically', async () => {
+        it('should not emit input and change when stepDown() is called programmatically', async () => {
           const el = await fixture<WaInput>(html` <wa-input type="number" step="2" value="2"></wa-input> `);
 
-          el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
-          el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
+          el.addEventListener('change', () => expect.fail('change should not be emitted'));
+          el.addEventListener('input', () => expect.fail('input should not be emitted'));
           el.stepDown();
 
           await el.updateComplete;
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index 053c6376b..7f1658d6a 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -3,15 +3,11 @@ import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
-import { WaBlurEvent } from '../../events/blur.js';
-import { WaChangeEvent } from '../../events/change.js';
 import { WaClearEvent } from '../../events/clear.js';
-import { WaFocusEvent } from '../../events/focus.js';
-import { WaInputEvent } from '../../events/input.js';
 import { HasSlotController } from '../../internal/slot.js';
 import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { watch } from '../../internal/watch.js';
-import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
+import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
 import nativeStyles from '../../styles/native/input.css';
 import formControlStyles from '../../styles/shadow/form-control.css';
 import appearanceStyles from '../../styles/utilities/appearance.css';
@@ -37,11 +33,11 @@ import styles from './input.css';
  * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.
  * @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.
  *
- * @event wa-blur - Emitted when the control loses focus.
- * @event wa-change - Emitted when an alteration to the control's value is committed by the user.
+ * @event blur - Emitted when the control loses focus.
+ * @event change - Emitted when an alteration to the control's value is committed by the user.
+ * @event focus - Emitted when the control gains focus.
+ * @event input - Emitted when the control receives input.
  * @event wa-clear - Emitted when the clear button is activated.
- * @event wa-focus - Emitted when the control gains focus.
- * @event wa-input - Emitted when the control receives input.
  * @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
  *
  * @csspart label - The label
@@ -70,7 +66,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
     return [...super.validators, MirrorValidator()];
   }
 
-  assumeInteractionOn = ['wa-blur', 'wa-input'];
+  assumeInteractionOn = ['blur', 'input'];
   private readonly hasSlotController = new HasSlotController(this, 'hint', 'label');
   private readonly localize = new LocalizeController(this);
 
@@ -227,13 +223,9 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
    */
   @property({ attribute: 'with-hint', type: Boolean }) withHint = false;
 
-  private handleBlur() {
-    this.dispatchEvent(new WaBlurEvent());
-  }
-
-  private handleChange() {
+  private handleChange(event: Event) {
+    this.dispatchComposedEvent(event);
     this.value = this.input.value;
-    this.dispatchEvent(new WaChangeEvent());
   }
 
   private handleClearClick(event: MouseEvent) {
@@ -242,20 +234,15 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
     if (this.value !== '') {
       this.value = '';
       this.dispatchEvent(new WaClearEvent());
-      this.dispatchEvent(new WaInputEvent());
-      this.dispatchEvent(new WaChangeEvent());
+      this.dispatchEvent(new InputEvent('input'));
+      this.dispatchEvent(new Event('change'));
     }
 
     this.input.focus();
   }
 
-  private handleFocus() {
-    this.dispatchEvent(new WaFocusEvent());
-  }
-
   private handleInput() {
     this.value = this.input.value;
-    this.dispatchEvent(new WaInputEvent());
   }
 
   private handleKeyDown(event: KeyboardEvent) {
@@ -445,8 +432,6 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
           @change=${this.handleChange}
           @input=${this.handleInput}
           @keydown=${this.handleKeyDown}
-          @focus=${this.handleFocus}
-          @blur=${this.handleBlur}
         />
 
         ${isClearIconVisible
diff --git a/src/components/radio-button/radio-button.ts b/src/components/radio-button/radio-button.ts
index fbbabe866..57514490c 100644
--- a/src/components/radio-button/radio-button.ts
+++ b/src/components/radio-button/radio-button.ts
@@ -2,11 +2,9 @@ import { customElement, property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { html } from 'lit/static-html.js';
-import { WaBlurEvent } from '../../events/blur.js';
-import { WaFocusEvent } from '../../events/focus.js';
 import { HasSlotController } from '../../internal/slot.js';
 import { watch } from '../../internal/watch.js';
-import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
+import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
 import nativeStyles from '../../styles/native/button.css';
 import appearanceStyles from '../../styles/utilities/appearance.css';
 import sizeStyles from '../../styles/utilities/size.css';
@@ -24,8 +22,8 @@ import styles from './radio-button.css';
  * @slot prefix - A presentational prefix icon or similar element.
  * @slot suffix - A presentational suffix icon or similar element.
  *
- * @event wa-blur - Emitted when the button loses focus.
- * @event wa-focus - Emitted when the button gains focus.
+ * @event blur - Emitted when the button loses focus.
+ * @event focus - Emitted when the button gains focus.
  *
  * @cssproperty --background-color - The button's background color.
  * @cssproperty --background-color-active - The button's background color when active.
@@ -107,10 +105,6 @@ export default class WaRadioButton extends WebAwesomeFormAssociatedElement {
     this.setAttribute('role', 'presentation');
   }
 
-  private handleBlur() {
-    this.dispatchEvent(new WaBlurEvent());
-  }
-
   private handleClick(e: MouseEvent) {
     if (this.disabled) {
       e.preventDefault();
@@ -121,10 +115,6 @@ export default class WaRadioButton extends WebAwesomeFormAssociatedElement {
     this.checked = true;
   }
 
-  private handleFocus() {
-    this.dispatchEvent(new WaFocusEvent());
-  }
-
   @watch('disabled', { waitUntilFirstUpdate: true })
   handleDisabledChange() {
     this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
@@ -164,8 +154,6 @@ export default class WaRadioButton extends WebAwesomeFormAssociatedElement {
         aria-disabled=${this.disabled}
         type="button"
         value=${ifDefined(this.value)}
-        @blur=${this.handleBlur}
-        @focus=${this.handleFocus}
         @click=${this.handleClick}
       >
         <slot name="prefix" part="prefix" class="prefix"></slot>
diff --git a/src/components/radio-group/radio-group.test.ts b/src/components/radio-group/radio-group.test.ts
index 37b65e866..0637f6f96 100644
--- a/src/components/radio-group/radio-group.test.ts
+++ b/src/components/radio-group/radio-group.test.ts
@@ -2,7 +2,6 @@ import { aTimeout, expect, oneEvent } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit';
 import sinon from 'sinon';
-import type { WaChangeEvent } from '../../events/change.js';
 import { clickOnElement } from '../../internal/test.js';
 import { fixtures } from '../../internal/test/fixture.js';
 import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
@@ -326,7 +325,7 @@ describe('<wa-radio-group>', () => {
             const validFocusHandler = sinon.spy();
 
             Array.from(el.querySelectorAll<WaRadio>('wa-radio')).forEach(radio =>
-              radio.addEventListener('wa-focus', validFocusHandler),
+              radio.addEventListener('focus', validFocusHandler),
             );
 
             expect(validFocusHandler).to.not.have.been.called;
@@ -350,8 +349,8 @@ describe('<wa-radio-group>', () => {
             const disabledRadio = el.querySelector('#radio-0')!;
             const validRadio = el.querySelector('#radio-1')!;
 
-            disabledRadio.addEventListener('wa-focus', invalidFocusHandler);
-            validRadio.addEventListener('wa-focus', validFocusHandler);
+            disabledRadio.addEventListener('focus', invalidFocusHandler);
+            validRadio.addEventListener('focus', validFocusHandler);
 
             expect(invalidFocusHandler).to.not.have.been.called;
             expect(validFocusHandler).to.not.have.been.called;
@@ -378,8 +377,8 @@ describe('<wa-radio-group>', () => {
             const disabledRadio = el.querySelector('#radio-0')!;
             const validRadio = el.querySelector('#radio-2')!;
 
-            disabledRadio.addEventListener('wa-focus', invalidFocusHandler);
-            validRadio.addEventListener('wa-focus', validFocusHandler);
+            disabledRadio.addEventListener('focus', invalidFocusHandler);
+            validRadio.addEventListener('focus', validFocusHandler);
 
             expect(invalidFocusHandler).to.not.have.been.called;
             expect(validFocusHandler).to.not.have.been.called;
@@ -394,7 +393,7 @@ describe('<wa-radio-group>', () => {
     });
 
     describe('when the value changes', () => {
-      it('should emit wa-change when toggled with the arrow keys', async () => {
+      it('should emit change when toggled with the arrow keys', async () => {
         const radioGroup = await fixture<WaRadioGroup>(html`
           <wa-radio-group>
             <wa-radio id="radio-1" value="1"></wa-radio>
@@ -405,8 +404,8 @@ describe('<wa-radio-group>', () => {
         const changeHandler = sinon.spy();
         const inputHandler = sinon.spy();
 
-        radioGroup.addEventListener('wa-change', changeHandler);
-        radioGroup.addEventListener('wa-input', inputHandler);
+        radioGroup.addEventListener('change', changeHandler);
+        radioGroup.addEventListener('input', inputHandler);
         firstRadio.focus();
         await sendKeys({ press: 'ArrowRight' });
         await radioGroup.updateComplete;
@@ -416,7 +415,7 @@ describe('<wa-radio-group>', () => {
         expect(radioGroup.value).to.equal('2');
       });
 
-      it('should emit wa-change and wa-input when clicked', async () => {
+      it('should emit change and input when clicked', async () => {
         const radioGroup = await fixture<WaRadioGroup>(html`
           <wa-radio-group>
             <wa-radio id="radio-1" value="1"></wa-radio>
@@ -425,12 +424,12 @@ describe('<wa-radio-group>', () => {
         `);
         const radio = radioGroup.querySelector<WaRadio>('#radio-1')!;
         setTimeout(() => radio.click());
-        const event = (await oneEvent(radioGroup, 'wa-change')) as WaChangeEvent;
+        const event = await oneEvent(radioGroup, 'change');
         expect(event.target).to.equal(radioGroup);
         expect(radioGroup.value).to.equal('1');
       });
 
-      it('should emit wa-change and wa-input when toggled with spacebar', async () => {
+      it('should emit change and input when toggled with spacebar', async () => {
         const radioGroup = await fixture<WaRadioGroup>(html`
           <wa-radio-group>
             <wa-radio id="radio-1" value="1"></wa-radio>
@@ -440,12 +439,12 @@ describe('<wa-radio-group>', () => {
         const radio = radioGroup.querySelector<WaRadio>('#radio-1')!;
         radio.focus();
         setTimeout(() => sendKeys({ press: ' ' }));
-        const event = (await oneEvent(radioGroup, 'wa-change')) as WaChangeEvent;
+        const event = await oneEvent(radioGroup, 'change');
         expect(event.target).to.equal(radioGroup);
         expect(radioGroup.value).to.equal('1');
       });
 
-      it('should not emit wa-change or wa-input when the value is changed programmatically', async () => {
+      it('should not emit change or input when the value is changed programmatically', async () => {
         const radioGroup = await fixture<WaRadioGroup>(html`
           <wa-radio-group value="1">
             <wa-radio id="radio-1" value="1"></wa-radio>
@@ -453,8 +452,8 @@ describe('<wa-radio-group>', () => {
           </wa-radio-group>
         `);
 
-        radioGroup.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
-        radioGroup.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
+        radioGroup.addEventListener('change', () => expect.fail('change should not be emitted'));
+        radioGroup.addEventListener('input', () => expect.fail('input should not be emitted'));
         radioGroup.value = '2';
         await radioGroup.updateComplete;
       });
diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts
index 812a1f34a..a96108f3a 100644
--- a/src/components/radio-group/radio-group.ts
+++ b/src/components/radio-group/radio-group.ts
@@ -1,13 +1,11 @@
 import { html, isServer } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { WaChangeEvent } from '../../events/change.js';
-import { WaInputEvent } from '../../events/input.js';
 import { uniqueId } from '../../internal/math.js';
 import { HasSlotController } from '../../internal/slot.js';
 import { RequiredValidator } from '../../internal/validators/required-validator.js';
 import { watch } from '../../internal/watch.js';
-import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
+import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
 import formControlStyles from '../../styles/shadow/form-control.css';
 import buttonGroupStyles from '../../styles/utilities/button-group.css';
 import sizeStyles from '../../styles/utilities/size.css';
@@ -29,8 +27,8 @@ import styles from './radio-group.css';
  *  attribute.
  * @slot hint - Text that describes how to use the radio group. Alternatively, you can use the `hint` attribute.
  *
- * @event wa-change - Emitted when the radio group's selected value changes.
- * @event wa-input - Emitted when the radio group receives user input.
+ * @event change - Emitted when the radio group's selected value changes.
+ * @event input - Emitted when the radio group receives user input.
  * @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
  *
  * @csspart form-control - The form control that wraps the label, input, and hint.
@@ -159,8 +157,8 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
     }
 
     if (this.value !== oldValue) {
-      this.dispatchEvent(new WaChangeEvent());
-      this.dispatchEvent(new WaInputEvent());
+      this.dispatchEvent(new InputEvent('input'));
+      this.dispatchEvent(new Event('change'));
     }
   };
 
@@ -290,8 +288,8 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
     }
 
     if (this.value !== oldValue) {
-      this.dispatchEvent(new WaChangeEvent());
-      this.dispatchEvent(new WaInputEvent());
+      this.dispatchEvent(new InputEvent('input'));
+      this.dispatchEvent(new Event('change'));
     }
 
     event.preventDefault();
diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts
index eeaa286b0..5cddd5df4 100644
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@@ -1,10 +1,8 @@
 import { html, isServer } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { WaBlurEvent } from '../../events/blur.js';
-import { WaFocusEvent } from '../../events/focus.js';
 import { watch } from '../../internal/watch.js';
-import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
+import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
 import nativeStyles from '../../styles/native/radio.css';
 import sizeStyles from '../../styles/utilities/size.css';
 import '../icon/icon.js';
@@ -20,8 +18,8 @@ import styles from './radio.css';
  *
  * @slot - The radio's label.
  *
- * @event wa-blur - Emitted when the control loses focus.
- * @event wa-focus - Emitted when the control gains focus.
+ * @event blur - Emitted when the control loses focus.
+ * @event focus - Emitted when the control gains focus.
  *
  * @csspart base - The component's base wrapper.
  * @csspart control - The circular container that wraps the radio's checked state.
@@ -69,8 +67,6 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
     super();
     if (!isServer) {
       this.addEventListener('click', this.handleClick);
-      this.addEventListener('blur', this.handleBlur);
-      this.addEventListener('focus', this.handleFocus);
     }
   }
 
@@ -79,14 +75,6 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
     this.setInitialAttributes();
   }
 
-  private handleBlur = () => {
-    this.dispatchEvent(new WaBlurEvent());
-  };
-
-  private handleFocus = () => {
-    this.dispatchEvent(new WaFocusEvent());
-  };
-
   private setInitialAttributes() {
     this.setAttribute('role', 'radio');
     this.tabIndex = 0;
diff --git a/src/components/rating/rating.test.ts b/src/components/rating/rating.test.ts
index 7064019bb..0796e72c0 100644
--- a/src/components/rating/rating.test.ts
+++ b/src/components/rating/rating.test.ts
@@ -54,12 +54,12 @@ describe('<wa-rating>', () => {
         expect(base.getAttribute('aria-valuenow')).to.equal('3');
       });
 
-      it('should emit wa-change when clicked', async () => {
+      it('should emit change when clicked', async () => {
         const el = await fixture<WaRating>(html` <wa-rating></wa-rating> `);
         const lastSymbol = el.shadowRoot!.querySelector<HTMLSpanElement>('.symbol:last-child')!;
         const changeHandler = sinon.spy();
 
-        el.addEventListener('wa-change', changeHandler);
+        el.addEventListener('change', changeHandler);
 
         await clickOnElement(lastSymbol);
         await el.updateComplete;
@@ -68,11 +68,11 @@ describe('<wa-rating>', () => {
         expect(el.value).to.equal(5);
       });
 
-      it('should emit wa-change when the value is changed with the keyboard', async () => {
+      it('should emit change when the value is changed with the keyboard', async () => {
         const el = await fixture<WaRating>(html` <wa-rating></wa-rating> `);
         const changeHandler = sinon.spy();
 
-        el.addEventListener('wa-change', changeHandler);
+        el.addEventListener('change', changeHandler);
         el.focus();
         await el.updateComplete;
         await sendKeys({ press: 'ArrowRight' });
@@ -82,12 +82,12 @@ describe('<wa-rating>', () => {
         expect(el.value).to.equal(1);
       });
 
-      it('should not emit wa-change when disabled', async () => {
+      it('should not emit change when disabled', async () => {
         const el = await fixture<WaRating>(html` <wa-rating value="5" disabled></wa-rating> `);
         const lastSymbol = el.shadowRoot!.querySelector<HTMLSpanElement>('.symbol:last-child')!;
         const changeHandler = sinon.spy();
 
-        el.addEventListener('wa-change', changeHandler);
+        el.addEventListener('change', changeHandler);
 
         await clickOnElement(lastSymbol);
         await el.updateComplete;
@@ -96,9 +96,9 @@ describe('<wa-rating>', () => {
         expect(el.value).to.equal(5);
       });
 
-      it('should not emit wa-change when the value is changed programmatically', async () => {
+      it('should not emit change when the value is changed programmatically', async () => {
         const el = await fixture<WaRating>(html` <wa-rating label="Test" value="1"></wa-rating> `);
-        el.addEventListener('wa-change', () => expect.fail('wa-change incorrectly emitted'));
+        el.addEventListener('change', () => expect.fail('change incorrectly emitted'));
         el.value = 5;
         await el.updateComplete;
       });
diff --git a/src/components/rating/rating.ts b/src/components/rating/rating.ts
index b467cba26..fe921ffd8 100644
--- a/src/components/rating/rating.ts
+++ b/src/components/rating/rating.ts
@@ -3,7 +3,6 @@ import { customElement, eventOptions, property, query, state } from 'lit/decorat
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { WaChangeEvent } from '../../events/change.js';
 import { WaHoverEvent } from '../../events/hover.js';
 import { clamp } from '../../internal/math.js';
 import { watch } from '../../internal/watch.js';
@@ -20,7 +19,7 @@ import styles from './rating.css';
  *
  * @dependency wa-icon
  *
- * @event wa-change - Emitted when the rating's value changes.
+ * @event change - Emitted when the rating's value changes.
  * @event {{ phase: 'start' | 'move' | 'end', value: number }} wa-hover - Emitted when the user hovers over a value. The
  *  `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the
  *  rating's value would be if the user were to commit to the hovered value.
@@ -96,7 +95,7 @@ export default class WaRating extends WebAwesomeElement {
     }
 
     this.setValue(this.getValueFromMousePosition(event));
-    this.dispatchEvent(new WaChangeEvent());
+    this.dispatchEvent(new Event('change'));
   }
 
   private setValue(newValue: number) {
@@ -140,7 +139,7 @@ export default class WaRating extends WebAwesomeElement {
     }
 
     if (this.value !== oldValue) {
-      this.dispatchEvent(new WaChangeEvent());
+      this.dispatchEvent(new Event('change'));
     }
   }
 
@@ -173,7 +172,7 @@ export default class WaRating extends WebAwesomeElement {
   private handleTouchEnd(event: TouchEvent) {
     this.isHovering = false;
     this.setValue(this.hoverValue);
-    this.dispatchEvent(new WaChangeEvent());
+    this.dispatchEvent(new Event('change'));
 
     // Prevent click on mobile devices
     event.preventDefault();
diff --git a/src/components/select/select.test.ts b/src/components/select/select.test.ts
index e654f9719..747cfe987 100644
--- a/src/components/select/select.test.ts
+++ b/src/components/select/select.test.ts
@@ -107,7 +107,7 @@ describe('<wa-select>', () => {
         const label = el.shadowRoot!.querySelector('[part~="form-control-label"]')!;
         const submitHandler = sinon.spy();
 
-        el.addEventListener('wa-focus', submitHandler);
+        el.addEventListener('focus', submitHandler);
         (label as HTMLLabelElement).click();
         await waitUntil(() => submitHandler.calledOnce);
 
@@ -115,7 +115,7 @@ describe('<wa-select>', () => {
       });
 
       describe('when the value changes', () => {
-        it('should emit wa-change when the value is changed with the mouse', async () => {
+        it('should emit change when the value is changed with the mouse', async () => {
           const el = await fixture<WaSelect>(html`
             <wa-select value="option-1">
               <wa-option value="option-1">Option 1</wa-option>
@@ -132,8 +132,8 @@ describe('<wa-select>', () => {
           const changeHandler = sinon.spy();
           const inputHandler = sinon.spy();
 
-          el.addEventListener('wa-change', changeHandler);
-          el.addEventListener('wa-input', inputHandler);
+          el.addEventListener('change', changeHandler);
+          el.addEventListener('input', inputHandler);
 
           await el.show();
           await clickOnElement(secondOption);
@@ -144,7 +144,7 @@ describe('<wa-select>', () => {
           expect(el.value).to.equal('option-2');
         });
 
-        it('should emit wa-change and wa-input when the value is changed with the keyboard', async () => {
+        it('should emit change and input when the value is changed with the keyboard', async () => {
           const el = await fixture<WaSelect>(html`
             <wa-select value="option-1">
               <wa-option value="option-1">Option 1</wa-option>
@@ -155,8 +155,8 @@ describe('<wa-select>', () => {
           const changeHandler = sinon.spy();
           const inputHandler = sinon.spy();
 
-          el.addEventListener('wa-change', changeHandler);
-          el.addEventListener('wa-input', inputHandler);
+          el.addEventListener('change', changeHandler);
+          el.addEventListener('input', inputHandler);
 
           el.focus();
           await el.updateComplete;
@@ -175,7 +175,7 @@ describe('<wa-select>', () => {
           expect(el.value).to.equal('option-3');
         });
 
-        it('should not emit wa-change or wa-input when the value is changed programmatically', async () => {
+        it('should not emit change or input when the value is changed programmatically', async () => {
           const el = await fixture<WaSelect>(html`
             <wa-select value="option-1">
               <wa-option value="option-1">Option 1</wa-option>
@@ -184,14 +184,14 @@ describe('<wa-select>', () => {
             </wa-select>
           `);
 
-          el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
-          el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
+          el.addEventListener('change', () => expect.fail('change should not be emitted'));
+          el.addEventListener('input', () => expect.fail('input should not be emitted'));
           el.value = 'option-2';
 
           await el.updateComplete;
         });
 
-        it('should emit wa-change and wa-input with the correct validation message when the value changes', async () => {
+        it('should emit change and input with the correct validation message when the value changes', async () => {
           const el = await fixture<WaSelect>(html`
             <wa-select required>
               <wa-option value="option-1">Option 1</wa-option>
@@ -206,8 +206,8 @@ describe('<wa-select>', () => {
             }
           });
 
-          el.addEventListener('wa-change', handler);
-          el.addEventListener('wa-input', handler);
+          el.addEventListener('change', handler);
+          el.addEventListener('input', handler);
 
           await clickOnElement(el);
           await aTimeout(500);
@@ -532,7 +532,7 @@ describe('<wa-select>', () => {
         expect(displayInput.value).to.equal('updated');
       });
 
-      it('should emit wa-focus and wa-blur when receiving and losing focus', async () => {
+      it('should emit focus and blur when receiving and losing focus', async () => {
         const el = await fixture<WaSelect>(html`
           <wa-select value="option-1">
             <wa-option value="option-1">Option 1</wa-option>
@@ -543,8 +543,8 @@ describe('<wa-select>', () => {
         const focusHandler = sinon.spy();
         const blurHandler = sinon.spy();
 
-        el.addEventListener('wa-focus', focusHandler);
-        el.addEventListener('wa-blur', blurHandler);
+        el.addEventListener('focus', focusHandler);
+        el.addEventListener('blur', blurHandler);
 
         el.focus();
         await el.updateComplete;
@@ -574,7 +574,7 @@ describe('<wa-select>', () => {
         expect(clearHandler).to.have.been.calledOnce;
       });
 
-      it('should emit wa-change and wa-input when a tag is removed', async () => {
+      it('should emit change and input when a tag is removed', async () => {
         const el = await fixture<WaSelect>(html`
           <wa-select value="option-1 option-2 option-3" multiple>
             <wa-option value="option-1">Option 1</wa-option>
@@ -587,8 +587,8 @@ describe('<wa-select>', () => {
         const tag = el.shadowRoot!.querySelector('[part~="tag"]')!;
         const removeButton = tag.shadowRoot!.querySelector('[part~="remove-button"]')!;
 
-        el.addEventListener('wa-change', changeHandler);
-        el.addEventListener('wa-input', inputHandler);
+        el.addEventListener('change', changeHandler);
+        el.addEventListener('input', inputHandler);
 
         // The offsets are a funky hack for Firefox.
         await clickOnElement(removeButton, 'center', 1, 1);
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index e24eb7639..036726680 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -5,12 +5,8 @@ import { classMap } from 'lit/directives/class-map.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { WaAfterHideEvent } from '../../events/after-hide.js';
 import { WaAfterShowEvent } from '../../events/after-show.js';
-import { WaBlurEvent } from '../../events/blur.js';
-import { WaChangeEvent } from '../../events/change.js';
 import { WaClearEvent } from '../../events/clear.js';
-import { WaFocusEvent } from '../../events/focus.js';
 import { WaHideEvent } from '../../events/hide.js';
-import { WaInputEvent } from '../../events/input.js';
 import type { WaRemoveEvent } from '../../events/remove.js';
 import { WaShowEvent } from '../../events/show.js';
 import { animateWithClass } from '../../internal/animate.js';
@@ -19,7 +15,7 @@ import { scrollIntoView } from '../../internal/scroll.js';
 import { HasSlotController } from '../../internal/slot.js';
 import { RequiredValidator } from '../../internal/validators/required-validator.js';
 import { watch } from '../../internal/watch.js';
-import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
+import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
 import nativeStyles from '../../styles/native/select.css';
 import formControlStyles from '../../styles/shadow/form-control.css';
 import appearanceStyles from '../../styles/utilities/appearance.css';
@@ -50,11 +46,11 @@ import styles from './select.css';
  * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
  * @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.
  *
- * @event wa-change - Emitted when the control's value changes.
+ * @event change - Emitted when the control's value changes.
+ * @event input - Emitted when the control receives input.
+ * @event focus - Emitted when the control gains focus.
+ * @event blur - Emitted when the control loses focus.
  * @event wa-clear - Emitted when the control's value is cleared.
- * @event wa-input - Emitted when the control receives input.
- * @event wa-focus - Emitted when the control gains focus.
- * @event wa-blur - Emitted when the control loses focus.
  * @event wa-show - Emitted when the select's menu opens.
  * @event wa-after-show - Emitted after the select's menu opens and all animations are complete.
  * @event wa-hide - Emitted when the select's menu closes.
@@ -101,7 +97,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
     return [...super.validators, ...validators];
   }
 
-  assumeInteractionOn = ['wa-blur', 'wa-input'];
+  assumeInteractionOn = ['blur', 'input'];
 
   private readonly hasSlotController = new HasSlotController(this, 'hint', 'label');
   private readonly localize = new LocalizeController(this);
@@ -312,11 +308,6 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
 
   private handleFocus() {
     this.displayInput.setSelectionRange(0, 0);
-    this.dispatchEvent(new WaFocusEvent());
-  }
-
-  private handleBlur() {
-    this.dispatchEvent(new WaBlurEvent());
   }
 
   private handleDocumentFocusIn = (event: KeyboardEvent) => {
@@ -368,8 +359,8 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
 
         // Emit after updating
         this.updateComplete.then(() => {
-          this.dispatchEvent(new WaInputEvent());
-          this.dispatchEvent(new WaChangeEvent());
+          this.dispatchEvent(new InputEvent('input'));
+          this.dispatchEvent(new Event('change'));
         });
 
         if (!this.multiple) {
@@ -498,8 +489,8 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
       // Emit after update
       this.updateComplete.then(() => {
         this.dispatchEvent(new WaClearEvent());
-        this.dispatchEvent(new WaInputEvent());
-        this.dispatchEvent(new WaChangeEvent());
+        this.dispatchEvent(new InputEvent('input'));
+        this.dispatchEvent(new Event('change'));
       });
     }
   }
@@ -529,8 +520,8 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
       if (this.value !== oldValue) {
         // Emit after updating
         this.updateComplete.then(() => {
-          this.dispatchEvent(new WaInputEvent());
-          this.dispatchEvent(new WaChangeEvent());
+          this.dispatchEvent(new InputEvent('input'));
+          this.dispatchEvent(new Event('change'));
         });
       }
 
@@ -567,8 +558,8 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
 
       // Emit after updating
       this.updateComplete.then(() => {
-        this.dispatchEvent(new WaInputEvent());
-        this.dispatchEvent(new WaChangeEvent());
+        this.dispatchEvent(new InputEvent('input'));
+        this.dispatchEvent(new Event('change'));
       });
     }
   }
@@ -869,7 +860,6 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
                 role="combobox"
                 tabindex="0"
                 @focus=${this.handleFocus}
-                @blur=${this.handleBlur}
               />
 
               <!-- Tags need to wait for first hydration before populating otherwise it will create a hydration mismatch. -->
diff --git a/src/components/slider/slider.test.ts b/src/components/slider/slider.test.ts
index f1baf8f33..f3a6b517f 100644
--- a/src/components/slider/slider.test.ts
+++ b/src/components/slider/slider.test.ts
@@ -50,13 +50,13 @@ describe('<wa-slider>', () => {
       });
 
       describe('when the value changes', () => {
-        it('should emit wa-change and wa-input and decrease the value when pressing right arrow', async () => {
+        it('should emit change and input and decrease the value when pressing right arrow', async () => {
           const el = await fixture<WaSlider>(html` <wa-slider value="50"></wa-slider> `);
           const changeHandler = sinon.spy();
           const inputHandler = sinon.spy();
 
-          el.addEventListener('wa-change', changeHandler);
-          el.addEventListener('wa-input', inputHandler);
+          el.addEventListener('change', changeHandler);
+          el.addEventListener('input', inputHandler);
           el.focus();
           await sendKeys({ press: 'ArrowRight' });
           await el.updateComplete;
@@ -66,30 +66,30 @@ describe('<wa-slider>', () => {
           expect(inputHandler).to.have.been.calledOnce;
         });
 
-        it('should not emit wa-change or wa-input when changing the value programmatically', async () => {
+        it('should not emit change or input when changing the value programmatically', async () => {
           const el = await fixture<WaSlider>(html` <wa-slider value="0"></wa-slider> `);
 
-          el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
-          el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
+          el.addEventListener('change', () => expect.fail('change should not be emitted'));
+          el.addEventListener('input', () => expect.fail('input should not be emitted'));
           el.value = 50;
 
           await el.updateComplete;
         });
 
-        it('should not emit wa-change or wa-input when stepUp() is called programmatically', async () => {
+        it('should not emit change or input when stepUp() is called programmatically', async () => {
           const el = await fixture<WaSlider>(html` <wa-slider step="2" value="2"></wa-slider> `);
 
-          el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
-          el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
+          el.addEventListener('change', () => expect.fail('change should not be emitted'));
+          el.addEventListener('input', () => expect.fail('input should not be emitted'));
           el.stepUp();
           await el.updateComplete;
         });
 
-        it('should not emit wa-change or wa-input when stepDown() is called programmatically', async () => {
+        it('should not emit change or input when stepDown() is called programmatically', async () => {
           const el = await fixture<WaSlider>(html` <wa-slider step="2" value="2"></wa-slider> `);
 
-          el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
-          el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
+          el.addEventListener('change', () => expect.fail('change should not be emitted'));
+          el.addEventListener('input', () => expect.fail('input should not be emitted'));
           el.stepDown();
           await el.updateComplete;
         });
diff --git a/src/components/slider/slider.ts b/src/components/slider/slider.ts
index 59ea6cb38..e7232abd0 100644
--- a/src/components/slider/slider.ts
+++ b/src/components/slider/slider.ts
@@ -3,14 +3,10 @@ import { customElement, eventOptions, property, query, state } from 'lit/decorat
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
-import { WaBlurEvent } from '../../events/blur.js';
-import { WaChangeEvent } from '../../events/change.js';
-import { WaFocusEvent } from '../../events/focus.js';
-import { WaInputEvent } from '../../events/input.js';
 import { HasSlotController } from '../../internal/slot.js';
 import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { watch } from '../../internal/watch.js';
-import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
+import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
 import sliderStyles from '../../styles/native/slider.css';
 import formControlStyles from '../../styles/shadow/form-control.css';
 import { LocalizeController } from '../../utilities/localize.js';
@@ -25,10 +21,10 @@ import styles from './slider.css';
  * @slot label - The slider label. Alternatively, you can use the `label` attribute.
  * @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.
  *
- * @event wa-blur - Emitted when the control loses focus.
- * @event wa-change - Emitted when an alteration to the control's value is committed by the user.
- * @event wa-focus - Emitted when the control gains focus.
- * @event wa-input - Emitted when the control receives input.
+ * @event blur - Emitted when the control loses focus.
+ * @event change - Emitted when an alteration to the control's value is committed by the user.
+ * @event focus - Emitted when the control gains focus.
+ * @event input - Emitted when the control receives input.
  * @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
  *
  * @csspart form-control - The form control that wraps the label, input, and hint.
@@ -160,24 +156,21 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
     this.resizeObserver?.unobserve(this.input);
   }
 
-  private handleChange() {
-    this.dispatchEvent(new WaChangeEvent());
+  private handleChange(event: Event) {
+    this.dispatchComposedEvent(event);
   }
 
   private handleInput() {
     this.value = parseFloat(this.input.value);
-    this.dispatchEvent(new WaInputEvent());
     this.syncRange();
   }
 
   private handleBlur() {
     this.hasTooltip = false;
-    this.dispatchEvent(new WaBlurEvent());
   }
 
   private handleFocus() {
     this.hasTooltip = true;
-    this.dispatchEvent(new WaFocusEvent());
   }
 
   @eventOptions({ passive: true })
diff --git a/src/components/switch/switch.test.ts b/src/components/switch/switch.test.ts
index 209d8a070..c99724a55 100644
--- a/src/components/switch/switch.test.ts
+++ b/src/components/switch/switch.test.ts
@@ -49,13 +49,13 @@ describe('<wa-switch>', () => {
         expect(el.checkValidity()).to.be.true;
       });
 
-      it('should emit wa-change and wa-input when clicked', async () => {
+      it('should emit change and input when clicked', async () => {
         const el = await fixture<WaSwitch>(html` <wa-switch></wa-switch> `);
         const changeHandler = sinon.spy();
         const inputHandler = sinon.spy();
 
-        el.addEventListener('wa-change', changeHandler);
-        el.addEventListener('wa-input', inputHandler);
+        el.addEventListener('change', changeHandler);
+        el.addEventListener('input', inputHandler);
         el.click();
         await el.updateComplete;
 
@@ -64,13 +64,13 @@ describe('<wa-switch>', () => {
         expect(el.checked).to.be.true;
       });
 
-      it('should emit wa-change when toggled with spacebar', async () => {
+      it('should emit change when toggled with spacebar', async () => {
         const el = await fixture<WaSwitch>(html` <wa-switch></wa-switch> `);
         const changeHandler = sinon.spy();
         const inputHandler = sinon.spy();
 
-        el.addEventListener('wa-change', changeHandler);
-        el.addEventListener('wa-input', inputHandler);
+        el.addEventListener('change', changeHandler);
+        el.addEventListener('input', inputHandler);
         el.focus();
         await sendKeys({ press: ' ' });
 
@@ -79,13 +79,13 @@ describe('<wa-switch>', () => {
         expect(el.checked).to.be.true;
       });
 
-      it('should emit wa-change and wa-input when toggled with the right arrow', async () => {
+      it('should emit change and input when toggled with the right arrow', async () => {
         const el = await fixture<WaSwitch>(html` <wa-switch></wa-switch> `);
         const changeHandler = sinon.spy();
         const inputHandler = sinon.spy();
 
-        el.addEventListener('wa-change', changeHandler);
-        el.addEventListener('wa-input', inputHandler);
+        el.addEventListener('change', changeHandler);
+        el.addEventListener('input', inputHandler);
         el.focus();
         await sendKeys({ press: 'ArrowRight' });
         await el.updateComplete;
@@ -95,13 +95,13 @@ describe('<wa-switch>', () => {
         expect(el.checked).to.be.true;
       });
 
-      it('should emit wa-change and wa-input when toggled with the left arrow', async () => {
+      it('should emit change and input when toggled with the left arrow', async () => {
         const el = await fixture<WaSwitch>(html` <wa-switch checked></wa-switch> `);
         const changeHandler = sinon.spy();
         const inputHandler = sinon.spy();
 
-        el.addEventListener('wa-change', changeHandler);
-        el.addEventListener('wa-input', inputHandler);
+        el.addEventListener('change', changeHandler);
+        el.addEventListener('input', inputHandler);
         el.focus();
         await sendKeys({ press: 'ArrowLeft' });
         await el.updateComplete;
@@ -111,10 +111,10 @@ describe('<wa-switch>', () => {
         expect(el.checked).to.be.false;
       });
 
-      it('should not emit wa-change or wa-input when checked is set by JavaScript', async () => {
+      it('should not emit change or input when checked is set by JavaScript', async () => {
         const el = await fixture<WaSwitch>(html` <wa-switch></wa-switch> `);
-        el.addEventListener('wa-change', () => expect.fail('wa-change incorrectly emitted'));
-        el.addEventListener('wa-input', () => expect.fail('wa-change incorrectly emitted'));
+        el.addEventListener('change', () => expect.fail('change incorrectly emitted'));
+        el.addEventListener('input', () => expect.fail('input incorrectly emitted'));
         el.checked = true;
         await el.updateComplete;
         el.checked = false;
diff --git a/src/components/switch/switch.ts b/src/components/switch/switch.ts
index d412b1a32..d68bbf9fe 100644
--- a/src/components/switch/switch.ts
+++ b/src/components/switch/switch.ts
@@ -4,14 +4,10 @@ import { customElement, property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
-import { WaBlurEvent } from '../../events/blur.js';
-import { WaChangeEvent } from '../../events/change.js';
-import { WaFocusEvent } from '../../events/focus.js';
-import { WaInputEvent } from '../../events/input.js';
 import { HasSlotController } from '../../internal/slot.js';
 import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { watch } from '../../internal/watch.js';
-import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
+import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
 import formControlStyles from '../../styles/shadow/form-control.css';
 import sizeStyles from '../../styles/utilities/size.css';
 import styles from './switch.css';
@@ -25,10 +21,10 @@ import styles from './switch.css';
  * @slot - The switch's label.
  * @slot hint - Text that describes how to use the switch. Alternatively, you can use the `hint` attribute.
  *
- * @event wa-blur - Emitted when the control loses focus.
- * @event wa-change - Emitted when the control's checked state changes.
- * @event wa-input - Emitted when the control receives input.
- * @event wa-focus - Emitted when the control gains focus.
+ * @event blur - Emitted when the control loses focus.
+ * @event change - Emitted when the control's checked state changes.
+ * @event input - Emitted when the control receives input.
+ * @event focus - Emitted when the control gains focus.
  * @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
  *
  * @csspart base - The component's base wrapper.
@@ -117,37 +113,25 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement {
     this.handleValueOrCheckedChange();
   }
 
-  private handleBlur() {
-    this.dispatchEvent(new WaBlurEvent());
-  }
-
-  private handleInput() {
-    this.dispatchEvent(new WaInputEvent());
-  }
-
   private handleClick() {
     this.hasInteracted = true;
     this.checked = !this.checked;
-    this.dispatchEvent(new WaChangeEvent());
-  }
-
-  private handleFocus() {
-    this.dispatchEvent(new WaFocusEvent());
+    this.dispatchEvent(new Event('change'));
   }
 
   private handleKeyDown(event: KeyboardEvent) {
     if (event.key === 'ArrowLeft') {
       event.preventDefault();
       this.checked = false;
-      this.dispatchEvent(new WaChangeEvent());
-      this.dispatchEvent(new WaInputEvent());
+      this.dispatchEvent(new Event('change'));
+      this.dispatchEvent(new InputEvent('input'));
     }
 
     if (event.key === 'ArrowRight') {
       event.preventDefault();
       this.checked = true;
-      this.dispatchEvent(new WaChangeEvent());
-      this.dispatchEvent(new WaInputEvent());
+      this.dispatchEvent(new Event('change'));
+      this.dispatchEvent(new InputEvent('input'));
     }
   }
 
@@ -250,9 +234,6 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement {
           aria-checked=${this.checked ? 'true' : 'false'}
           aria-describedby="hint"
           @click=${this.handleClick}
-          @input=${this.handleInput}
-          @blur=${this.handleBlur}
-          @focus=${this.handleFocus}
           @keydown=${this.handleKeyDown}
         />
 
diff --git a/src/components/textarea/textarea.test.ts b/src/components/textarea/textarea.test.ts
index 9e65e783b..b5339e8f5 100644
--- a/src/components/textarea/textarea.test.ts
+++ b/src/components/textarea/textarea.test.ts
@@ -64,7 +64,7 @@ describe('<wa-textarea>', () => {
         const label = el.shadowRoot!.querySelector('[part~="label"]')!;
         const submitHandler = sinon.spy();
 
-        el.addEventListener('wa-focus', submitHandler);
+        el.addEventListener('focus', submitHandler);
         (label as HTMLLabelElement).click();
         await waitUntil(() => submitHandler.calledOnce);
 
@@ -72,13 +72,13 @@ describe('<wa-textarea>', () => {
       });
 
       describe('when the value changes', () => {
-        it('should emit wa-change and wa-input when the user types in the textarea', async () => {
+        it('should emit change and input when the user types in the textarea', async () => {
           const el = await fixture<WaTextarea>(html` <wa-textarea></wa-textarea> `);
           const inputHandler = sinon.spy();
           const changeHandler = sinon.spy();
 
-          el.addEventListener('wa-input', inputHandler);
-          el.addEventListener('wa-change', changeHandler);
+          el.addEventListener('input', inputHandler);
+          el.addEventListener('change', changeHandler);
           el.focus();
           await sendKeys({ type: 'abc' });
           el.blur();
@@ -88,21 +88,21 @@ describe('<wa-textarea>', () => {
           expect(inputHandler).to.have.been.calledThrice;
         });
 
-        it('should not emit wa-change or wa-input when the value is set programmatically', async () => {
+        it('should not emit change or input when the value is set programmatically', async () => {
           const el = await fixture<WaTextarea>(html` <wa-textarea></wa-textarea> `);
 
-          el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
-          el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
+          el.addEventListener('change', () => expect.fail('change should not be emitted'));
+          el.addEventListener('input', () => expect.fail('input should not be emitted'));
           el.value = 'abc';
 
           await el.updateComplete;
         });
 
-        it('should not emit wa-change or wa-input when calling setRangeText()', async () => {
+        it('should not emit change or input when calling setRangeText()', async () => {
           const el = await fixture<WaTextarea>(html` <wa-textarea value="hi there"></wa-textarea> `);
 
-          el.addEventListener('wa-change', () => expect.fail('wa-change should not be emitted'));
-          el.addEventListener('wa-input', () => expect.fail('wa-input should not be emitted'));
+          el.addEventListener('change', () => expect.fail('change should not be emitted'));
+          el.addEventListener('input', () => expect.fail('input should not be emitted'));
           el.focus();
           el.setSelectionRange(0, 2);
           el.setRangeText('hello');
diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts
index ddbaf573e..608d7fe7c 100644
--- a/src/components/textarea/textarea.ts
+++ b/src/components/textarea/textarea.ts
@@ -4,14 +4,10 @@ import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
-import { WaBlurEvent } from '../../events/blur.js';
-import { WaChangeEvent } from '../../events/change.js';
-import { WaFocusEvent } from '../../events/focus.js';
-import { WaInputEvent } from '../../events/input.js';
 import { HasSlotController } from '../../internal/slot.js';
 import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { watch } from '../../internal/watch.js';
-import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
+import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
 import nativeStyles from '../../styles/native/input.css';
 import formControlStyles from '../../styles/shadow/form-control.css';
 import appearanceStyles from '../../styles/utilities/appearance.css';
@@ -27,10 +23,10 @@ import styles from './textarea.css';
  * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.
  * @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.
  *
- * @event wa-blur - Emitted when the control loses focus.
- * @event wa-change - Emitted when an alteration to the control's value is committed by the user.
- * @event wa-focus - Emitted when the control gains focus.
- * @event wa-input - Emitted when the control receives input.
+ * @event blur - Emitted when the control loses focus.
+ * @event change - Emitted when an alteration to the control's value is committed by the user.
+ * @event focus - Emitted when the control gains focus.
+ * @event input - Emitted when the control receives input.
  * @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
  *
  * @csspart label - The label
@@ -54,7 +50,7 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
     return [...super.validators, MirrorValidator()];
   }
 
-  assumeInteractionOn = ['wa-blur', 'wa-input'];
+  assumeInteractionOn = ['blur', 'input'];
   private readonly hasSlotController = new HasSlotController(this, 'hint', 'label');
   private resizeObserver: ResizeObserver;
 
@@ -204,26 +200,20 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
   }
 
   private handleBlur() {
-    this.dispatchEvent(new WaBlurEvent());
     this.checkValidity();
   }
 
-  private handleChange() {
+  private handleChange(event: Event) {
     this.valueHasChanged = true;
     this.value = this.input.value;
     this.setTextareaDimensions();
-    this.dispatchEvent(new WaChangeEvent());
+    this.dispatchComposedEvent(event);
     this.checkValidity();
   }
 
-  private handleFocus() {
-    this.dispatchEvent(new WaFocusEvent());
-  }
-
   private handleInput() {
     this.valueHasChanged = true;
     this.value = this.input.value;
-    this.dispatchEvent(new WaInputEvent());
   }
 
   private setTextareaDimensions() {
@@ -382,7 +372,6 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
           aria-describedby="hint"
           @change=${this.handleChange}
           @input=${this.handleInput}
-          @focus=${this.handleFocus}
           @blur=${this.handleBlur}
         ></textarea>
 
diff --git a/src/events/blur.ts b/src/events/blur.ts
deleted file mode 100644
index 799099cf6..000000000
--- a/src/events/blur.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export class WaBlurEvent extends Event {
-  constructor() {
-    super('wa-blur', { bubbles: true, cancelable: false, composed: true });
-  }
-}
-
-declare global {
-  interface GlobalEventHandlersEventMap {
-    'wa-blur': WaBlurEvent;
-  }
-}
diff --git a/src/events/change.ts b/src/events/change.ts
deleted file mode 100644
index 1abb38a89..000000000
--- a/src/events/change.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export class WaChangeEvent extends Event {
-  constructor() {
-    super('wa-change', { bubbles: true, cancelable: false, composed: true });
-  }
-}
-
-declare global {
-  interface GlobalEventHandlersEventMap {
-    'wa-change': WaChangeEvent;
-  }
-}
diff --git a/src/events/close.ts b/src/events/close.ts
deleted file mode 100644
index 81d06c17d..000000000
--- a/src/events/close.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export class WaCloseEvent extends Event {
-  constructor() {
-    super('wa-close', { bubbles: true, cancelable: false, composed: true });
-  }
-}
-
-declare global {
-  interface GlobalEventHandlersEventMap {
-    'wa-close': WaCloseEvent;
-  }
-}
diff --git a/src/events/events.ts b/src/events/events.ts
index e576977a9..e9ef29957 100644
--- a/src/events/events.ts
+++ b/src/events/events.ts
@@ -2,20 +2,15 @@ export type { WaAfterCollapseEvent } from './after-collapse.js';
 export type { WaAfterExpandEvent } from './after-expand.js';
 export type { WaAfterHideEvent } from './after-hide.js';
 export type { WaAfterShowEvent } from './after-show.js';
-export type { WaBlurEvent } from './blur.js';
 export type { WaCancelEvent } from './cancel.js';
-export type { WaChangeEvent } from './change.js';
 export type { WaClearEvent } from './clear.js';
-export type { WaCloseEvent } from './close.js';
 export type { WaCollapseEvent } from './collapse.js';
 export type { WaCopyEvent } from './copy.js';
 export type { WaErrorEvent } from './error.js';
 export type { WaExpandEvent } from './expand.js';
 export type { WaFinishEvent } from './finish.js';
-export type { WaFocusEvent } from './focus.js';
 export type { WaHideEvent } from './hide.js';
 export type { WaHoverEvent } from './hover.js';
-export type { WaInputEvent } from './input.js';
 export type { WaInvalidEvent } from './invalid.js';
 export type { WaLazyChangeEvent } from './lazy-change.js';
 export type { WaLazyLoadEvent } from './lazy-load.js';
diff --git a/src/events/focus.ts b/src/events/focus.ts
deleted file mode 100644
index 67cbf74c5..000000000
--- a/src/events/focus.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export class WaFocusEvent extends Event {
-  constructor() {
-    super('wa-focus', { bubbles: true, cancelable: false, composed: true });
-  }
-}
-
-declare global {
-  interface GlobalEventHandlersEventMap {
-    'wa-focus': WaFocusEvent;
-  }
-}
diff --git a/src/events/input.ts b/src/events/input.ts
deleted file mode 100644
index 5f72c413e..000000000
--- a/src/events/input.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export class WaInputEvent extends Event {
-  constructor() {
-    super('wa-input', { bubbles: true, cancelable: false, composed: true });
-  }
-}
-
-declare global {
-  interface GlobalEventHandlersEventMap {
-    'wa-input': WaInputEvent;
-  }
-}
diff --git a/src/internal/test/form-control-base-tests.ts b/src/internal/test/form-control-base-tests.ts
index ce7d72eb5..59acc5af8 100644
--- a/src/internal/test/form-control-base-tests.ts
+++ b/src/internal/test/form-control-base-tests.ts
@@ -2,7 +2,7 @@ import { aTimeout, expect } from '@open-wc/testing';
 import { html, type TemplateResult } from 'lit';
 import { html as staticHTML, unsafeStatic } from 'lit/static-html.js';
 import { clickOnElement } from '../test.js';
-import type { WebAwesomeFormControl } from '../webawesome-formassociated-element.js';
+import type { WebAwesomeFormControl } from '../webawesome-form-associated-element.js';
 import type { clientFixture, hydratedFixture } from './fixture.js';
 import { fixtures } from './fixture.js';
 
diff --git a/src/internal/validators/custom-error-validator.ts b/src/internal/validators/custom-error-validator.ts
index 22b01871e..0c096b0fe 100644
--- a/src/internal/validators/custom-error-validator.ts
+++ b/src/internal/validators/custom-error-validator.ts
@@ -1,4 +1,4 @@
-import type { Validator } from '../webawesome-formassociated-element.js';
+import type { Validator } from '../webawesome-form-associated-element.js';
 
 /**
  * This validator is for if you have an exact copy of your element in the shadow DOM. Rather than needing
diff --git a/src/internal/validators/mirror-validator.ts b/src/internal/validators/mirror-validator.ts
index e6fbd73af..874cc286e 100644
--- a/src/internal/validators/mirror-validator.ts
+++ b/src/internal/validators/mirror-validator.ts
@@ -1,4 +1,4 @@
-import type { Validator } from '../webawesome-formassociated-element.js';
+import type { Validator } from '../webawesome-form-associated-element.js';
 
 /**
  * This validator is for if you have an exact copy of your element in the shadow DOM. Rather than needing
diff --git a/src/internal/validators/required-validator.ts b/src/internal/validators/required-validator.ts
index 6b240a164..93a3c5b17 100644
--- a/src/internal/validators/required-validator.ts
+++ b/src/internal/validators/required-validator.ts
@@ -1,4 +1,4 @@
-import type { Validator } from '../webawesome-formassociated-element.js';
+import type { Validator } from '../webawesome-form-associated-element.js';
 
 export interface RequiredValidatorOptions {
   /** This is a cheap way for us to get translation strings for the user without having proper translations. */
diff --git a/src/internal/webawesome-element.ts b/src/internal/webawesome-element.ts
index e348d8857..16c64607f 100644
--- a/src/internal/webawesome-element.ts
+++ b/src/internal/webawesome-element.ts
@@ -159,6 +159,17 @@ export default class WebAwesomeElement extends LitElement {
     return this.hasStatesSupport() ? this.internals.states.has(state) : false;
   }
 
+  /**
+   * Given a native event, this function ensures it's composed and, if not, dispatches it again as a composed event.
+   * This is useful for relaying native events such as `change`, which will otherwise not be retargeted. It is safe,
+   * albeit sloppy, to call this on composed events, as it will no-op.
+   */
+  dispatchComposedEvent(event: Event) {
+    if (!event.composed) {
+      this.dispatchEvent(new (event.constructor as typeof Event)(event.type, { ...event, composed: true }));
+    }
+  }
+
   static createProperty(name: PropertyKey, options?: PropertyDeclaration): void {
     if (options && options.default !== undefined && options.converter === undefined) {
       // Wrap the default converter to remove the attribute if the value is the default
diff --git a/src/internal/webawesome-formassociated-element.ts b/src/internal/webawesome-form-associated-element.ts
similarity index 99%
rename from src/internal/webawesome-formassociated-element.ts
rename to src/internal/webawesome-form-associated-element.ts
index b687b5920..0d30016fb 100644
--- a/src/internal/webawesome-formassociated-element.ts
+++ b/src/internal/webawesome-form-associated-element.ts
@@ -95,7 +95,7 @@ export class WebAwesomeFormAssociatedElement
 
   required: boolean = false;
 
-  assumeInteractionOn: string[] = ['wa-input'];
+  assumeInteractionOn: string[] = ['input'];
 
   // Additional
   input?: (HTMLElement & { value: unknown }) | HTMLInputElement | HTMLTextAreaElement;
@@ -154,7 +154,7 @@ export class WebAwesomeFormAssociatedElement
     }
 
     if (changedProperties.has('value') || changedProperties.has('disabled')) {
-      // @ts-expect-error Some components will use an accessors, other use a property, so we dont want to limit them.
+      // @ts-expect-error Some components will use an accessors, other use a property, so we don't want to limit them.
       const value = this.value as unknown;
 
       // Accounts for the snowflake case on `<wa-select>`