fix event listeners (#647)

docs/docs/components/carousel.md

@@ -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('change', () => {
+    aspectRatio.addEventListener('change', () => {
       carousel.style.setProperty('--aspect-ratio', aspectRatio.value);
     });
   })();

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('change', () => {
+  checkbox.addEventListener('change', () => {
     checkbox.setCustomValidity(checkbox.checked ? '' : errorMessage);
   });
 

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('change', () => (splitPanel.primary = select.value));
+  select.addEventListener('change', () => (splitPanel.primary = select.value));
 </script>
 ```
 

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('change', () => {
+  selectionMode.addEventListener('change', () => {
     tree.querySelectorAll('wa-tree-item').forEach(item => (item.selected = false));
     tree.selection = selectionMode.value;
   });

docs/docs/experimental/themer.md

@@ -803,7 +803,7 @@ hasOutline: false
   const queue = [];
   let inputTimeout;
 
-  variantInput.addEventlistener('change', () => {
+  variantInput.addEventListener('change', () => {
     iconList.dataset.variant = variantInput.value;
   });
 
@@ -1084,10 +1084,10 @@ hasOutline: false
     el.classList.add(`wa-theme-${theme}-${colorMode}`);
   }
 
-  colorModeSelect.addEventlistener('change', setColorMode);
+  colorModeSelect.addEventListener('change', setColorMode);
 
   // Theme Switcher
-  themeSelect.addEventlistener('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('change', event => {
+  colorSelect.addEventListener('change', event => {
     const colorPalette = event.target.value;
 
     colorStylesheet.href = `/dist/styles/themes/color/${colorPalette}.css`;
   });
 
   // Brand Color
-  brandColor.addEventlistener('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('change', event => {
+  logoSelector.addEventListener('change', event => {
     const value = event.currentTarget.value
 
     const projectLogo = previewContainer.querySelector("#project-logo");
@@ -1279,7 +1279,7 @@ hasOutline: false
     })
   }
 
-  themeSelect.addEventlistener('change', setLogoIcons);
+  themeSelect.addEventListener('change', setLogoIcons);
 
   // Project Name
   container.querySelector('[name="project-name"]').addEventListener('input', event => {
@@ -1293,7 +1293,7 @@ hasOutline: false
   });
 
   // Heading text
-  fontFamilyHeading.addEventlistener('change', event => {
+  fontFamilyHeading.addEventListener('change', event => {
     let fontFamily;
     switch (event.target.value) {
       case 'assistant':
@@ -1351,7 +1351,7 @@ hasOutline: false
   })
 
   // Body text
-  fontFamilyBody.addEventlistener('change', event => {
+  fontFamilyBody.addEventListener('change', event => {
     let fontFamily;
     switch (event.target.value) {
       case 'assistant':
@@ -1580,7 +1580,7 @@ hasOutline: false
   }
 
   // Swaps icons to the preferred set for the selected theme
-  themeSelect.addEventlistener('change', event => {
+  themeSelect.addEventListener('change', event => {
     setPreferredIcons();
     showIconStyleOptions();
     syncLogoIcon();
@@ -1599,13 +1599,13 @@ hasOutline: false
   });
 
   // Changes available Icon Styles and swaps icons based on the selected Icon Family
-  iconFamily.addEventlistener('change', event => {
+  iconFamily.addEventListener('change', event => {
     useFaIcons();
     showIconStyleOptions();
   });
 
   // Swaps icons based on the selected Icon Style
-  iconStyle.addEventlistener('change', useFaIcons);
+  iconStyle.addEventListener('change', useFaIcons);
 
 
   // Corners

docs/docs/resources/changelog.md

@@ -12,6 +12,10 @@ Components with the <wa-badge variant="warning" pill>Experimental</wa-badge> bad
 During the alpha period, things might break! We take breaking changes very seriously, but sometimes they're necessary to make the final product that much better. We appreciate your patience!
 :::
 
+## Next
+
+- Fixed a number of broken event listeners throughout the docs
+
 ## 3.0.0-alpha.10
 
 - 🚨 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.