docs(components): update ev to event

Author: brandyscarney

src/components/global/Playground/index.tsx

@@ -388,15 +388,15 @@ export default function Playground({
   useEffect(() => {
     if (showConsole) {
       if (frameiOS.current) {
-        frameiOS.current.contentWindow.addEventListener('console', (ev: CustomEvent) => {
-          setiOSConsoleItems((oldConsoleItems) => [...oldConsoleItems, ev.detail]);
+        frameiOS.current.contentWindow.addEventListener('console', (event: CustomEvent) => {
+          setiOSConsoleItems((oldConsoleItems) => [...oldConsoleItems, event.detail]);
           consoleBodyRef.current.scrollTo(0, consoleBodyRef.current.scrollHeight);
         });
       }
 
       if (frameMD.current) {
-        frameMD.current.contentWindow.addEventListener('console', (ev: CustomEvent) => {
-          setMDConsoleItems((oldConsoleItems) => [...oldConsoleItems, ev.detail]);
+        frameMD.current.contentWindow.addEventListener('console', (event: CustomEvent) => {
+          setMDConsoleItems((oldConsoleItems) => [...oldConsoleItems, event.detail]);
           consoleBodyRef.current.scrollTo(0, consoleBodyRef.current.scrollHeight);
         });
       }
@@ -425,9 +425,9 @@ export default function Playground({
   useEffect(() => {
     const io = new IntersectionObserver(
       (entries: IntersectionObserverEntry[]) => {
-        const ev = entries[0];
-        setIsInView(ev.isIntersecting);
-        if (!ev.isIntersecting) return;
+        const event = entries[0];
+        setIsInView(event.isIntersecting);
+        if (!event.isIntersecting) return;
 
         /**
          * Load the stored mode and/or usage target, if present

src/components/page/theming/ColorGenerator/index.tsx

@@ -60,7 +60,7 @@ const ColorGenerator = (props) => {
                 </div>
                 <div className={styles.titleRowEnd}>
                   <ColorInput
-                    onClick={(ev) => ev.stopPropagation()}
+                    onClick={(event) => event.stopPropagation()}
                     color={formattedValue}
                     setColor={(color) =>
                       setColors((colors) => {

src/components/page/theming/LayeredColorsSelect/index.tsx

@@ -72,7 +72,7 @@ export default function LayeredColorsSelect({ ...props }) {
       <div className={styles.selectRow}>
         <ColorDot color={`var(--ion-color-${color})`} />
         <InputWrapper>
-          <select value={color} onChange={(ev) => setColor((ev.target as HTMLSelectElement).value)}>
+          <select value={color} onChange={(event) => setColor((event.target as HTMLSelectElement).value)}>
             <option value="primary">Primary</option>
             <option value="secondary">Secondary</option>
             <option value="tertiary">Tertiary</option>

static/demos/api/popover/index.html

@@ -45,10 +45,10 @@
         buttons[i].addEventListener('click', handleButtonClick);
       }
 
-      async function handleButtonClick(ev) {
+      async function handleButtonClick(event) {
         popover = await popoverController.create({
           component: 'popover-example-page',
-          event: ev,
+          event: event,
           translucent: true,
         });
         currentPopover = popover;