diff --git a/docs/developing/hardware-back-button.md b/docs/developing/hardware-back-button.md
index 3f7b0d9f4ad..1841b6e52a2 100644
--- a/docs/developing/hardware-back-button.md
+++ b/docs/developing/hardware-back-button.md
@@ -67,8 +67,8 @@ The `ionBackButton` event will not be emitted when running an app in a browser o
 <TabItem value="javascript">
 
 ```javascript
-document.addEventListener('ionBackButton', (ev) => {
-  ev.detail.register(10, () => {
+document.addEventListener('ionBackButton', (event) => {
+  event.detail.register(10, () => {
     console.log('Handler was called!');
   });
 });
@@ -108,8 +108,8 @@ constructor(private platform: Platform) {
 <TabItem value="react">
 
 ```tsx
-document.addEventListener('ionBackButton', (ev) => {
-  ev.detail.register(10, () => {
+document.addEventListener('ionBackButton', (event) => {
+  event.detail.register(10, () => {
     console.log('Handler was called!');
   });
 });
@@ -157,12 +157,12 @@ Each hardware back button callback has a `processNextHandler` parameter. Calling
 <TabItem value="javascript">
 
 ```javascript
-document.addEventListener('ionBackButton', (ev) => {
-  ev.detail.register(5, () => {
+document.addEventListener('ionBackButton', (event) => {
+  event.detail.register(5, () => {
     console.log('Another handler was called!');
   });
 
-  ev.detail.register(10, (processNextHandler) => {
+  event.detail.register(10, (processNextHandler) => {
     console.log('Handler was called!');
 
     processNextHandler();
@@ -216,12 +216,12 @@ constructor(private platform: Platform) {
 <TabItem value="react">
 
 ```tsx
-document.addEventListener('ionBackButton', (ev) => {
-  ev.detail.register(5, () => {
+document.addEventListener('ionBackButton', (event) => {
+  event.detail.register(5, () => {
     console.log('Another handler was called!');
   });
 
-  ev.detail.register(10, (processNextHandler) => {
+  event.detail.register(10, (processNextHandler) => {
     console.log('Handler was called!');
 
     processNextHandler();
@@ -261,16 +261,16 @@ This example shows how to indicate to Ionic Framework that you want the next han
 Internally, Ionic Framework uses something similar to a priority queue to manage hardware back button handlers. The handler with the largest priority value will be called first. In the event that there are multiple handlers with the same priority value, the _last_ handler of the same priority added to this queue will be the first handler to be called.
 
 ```javascript
-document.addEventListener('ionBackButton', (ev) => {
+document.addEventListener('ionBackButton', (event) => {
   // Handler A
-  ev.detail.register(10, (processNextHandler) => {
+  event.detail.register(10, (processNextHandler) => {
     console.log('Handler A was called!');
 
     processNextHandler();
   });
 
   // Handler B
-  ev.detail.register(10, (processNextHandler) => {
+  event.detail.register(10, (processNextHandler) => {
     console.log('Handler B was called!');
 
     processNextHandler();
@@ -305,8 +305,8 @@ import { App } from '@capacitor/app';
 ...
 
 const routerEl = document.querySelector('ion-router');
-document.addEventListener('ionBackButton', (ev: BackButtonEvent) => {
-  ev.detail.register(-1, () => {
+document.addEventListener('ionBackButton', (event: BackButtonEvent) => {
+  event.detail.register(-1, () => {
     const path = window.location.pathname;
     if (path === routerEl.root) {
       App.exitApp();
@@ -368,8 +368,8 @@ import { App } from '@capacitor/app';
 ...
 
 const ionRouter = useIonRouter();
-document.addEventListener('ionBackButton', (ev) => {
-  ev.detail.register(-1, () => {
+document.addEventListener('ionBackButton', (event) => {
+  event.detail.register(-1, () => {
     if (!ionRouter.canGoBack()) {
       App.exitApp();
     }
diff --git a/docs/developing/keyboard.md b/docs/developing/keyboard.md
index ee9e55d22fd..d96ebb6e4b9 100644
--- a/docs/developing/keyboard.md
+++ b/docs/developing/keyboard.md
@@ -90,8 +90,8 @@ Detecting the presence of an on-screen keyboard is useful for adjusting the posi
 <TabItem value="javascript">
 
 ```javascript
-window.addEventListener('ionKeyboardDidShow', ev => {
-  const { keyboardHeight } = ev;
+window.addEventListener('ionKeyboardDidShow', event => {
+  const { keyboardHeight } = event;
   // Do something with the keyboard height such as translating an input above the keyboard.
 });
 
@@ -108,8 +108,8 @@ import { Platform } from '@ionic/angular';
 ...
 
 constructor(private platform: Platform) {
-  this.platform.keyboardDidShow.subscribe(ev => {
-    const { keyboardHeight } = ev;
+  this.platform.keyboardDidShow.subscribe(event => {
+    const { keyboardHeight } = event;
     // Do something with the keyboard height such as translating an input above the keyboard.
   });
 
@@ -127,8 +127,8 @@ import { Platform } from '@ionic/angular/standalone';
 ...
 
 constructor(private platform: Platform) {
-  this.platform.keyboardDidShow.subscribe(ev => {
-    const { keyboardHeight } = ev;
+  this.platform.keyboardDidShow.subscribe(event => {
+    const { keyboardHeight } = event;
     // Do something with the keyboard height such as translating an input above the keyboard.
   });
 
diff --git a/docs/utilities/gestures.md b/docs/utilities/gestures.md
index 60d16272454..c01dca179cc 100644
--- a/docs/utilities/gestures.md
+++ b/docs/utilities/gestures.md
@@ -47,7 +47,7 @@ const gesture = createGesture({
   el: elementRef,
   threshold: 15,
   gestureName: 'my-gesture',
-  onMove: ev => onMoveHandler(ev)
+  onMove: event => onMoveHandler(event)
 });
 
 ```
@@ -65,7 +65,7 @@ const gesture: Gesture = createGesture({
   el: elementRef,
   threshold: 15,
   gestureName: 'my-gesture',
-  onMove: ev => onMoveHandler(ev)
+  onMove: event => onMoveHandler(event)
 });
 ```
 </TabItem>
@@ -86,7 +86,7 @@ constructor(private gestureCtrl: GestureController) {
     el: this.element.nativeElement,
     threshold: 15,
     gestureName: 'my-gesture',
-    onMove: ev => this.onMoveHandler(ev)
+    onMove: event => this.onMoveHandler(event)
   }, true);
   // The `true` above ensures that callbacks run inside NgZone.
 }
@@ -110,7 +110,7 @@ constructor(private gestureCtrl: GestureController) {
     el: this.element.nativeElement,
     threshold: 15,
     gestureName: 'my-gesture',
-    onMove: ev => this.onMoveHandler(ev)
+    onMove: event => this.onMoveHandler(event)
   }, true);
   // The `true` above ensures that callbacks run inside NgZone.
 }
@@ -130,7 +130,7 @@ const gesture: Gesture = createGesture({
   el: elementRef,
   threshold: 15,
   gestureName: 'my-gesture',
-  onMove: ev => onMoveHandler(ev)
+  onMove: event => onMoveHandler(event)
 });
 ```
 </TabItem>
@@ -152,7 +152,7 @@ const gesture = createGesture({
   el: elementRef.value,
   threshold: 15,
   gestureName: 'my-gesture',
-  onMove: ev => onMoveHandler(ev)
+  onMove: event => onMoveHandler(event)
 });
 
 ```
diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx
index f3e41aa06ca..9d7f033b445 100644
--- a/src/components/global/Playground/index.tsx
+++ b/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
diff --git a/src/components/page/theming/ColorGenerator/index.tsx b/src/components/page/theming/ColorGenerator/index.tsx
index 9ff77c3f891..74599ce09b5 100644
--- a/src/components/page/theming/ColorGenerator/index.tsx
+++ b/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) => {
diff --git a/src/components/page/theming/LayeredColorsSelect/index.tsx b/src/components/page/theming/LayeredColorsSelect/index.tsx
index 9c9b0f0f5a0..7540f4ea6d5 100755
--- a/src/components/page/theming/LayeredColorsSelect/index.tsx
+++ b/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>
diff --git a/static/demos/api/popover/index.html b/static/demos/api/popover/index.html
index baec7298223..167c0efad7c 100644
--- a/static/demos/api/popover/index.html
+++ b/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;
diff --git a/static/usage/v7/accordion/listen-changes/angular/example_component_ts.md b/static/usage/v7/accordion/listen-changes/angular/example_component_ts.md
index 24055f15338..05b984d0b02 100644
--- a/static/usage/v7/accordion/listen-changes/angular/example_component_ts.md
+++ b/static/usage/v7/accordion/listen-changes/angular/example_component_ts.md
@@ -11,12 +11,12 @@ import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angul
 export class ExampleComponent {
   private values: string[] = ['first', 'second', 'third'];
 
-  accordionGroupChange = (ev: CustomEvent) => {
-    const collapsedItems = this.values.filter((value) => value !== ev.detail.value);
-    const selectedValue = ev.detail.value;
+  accordionGroupChange = (event: CustomEvent) => {
+    const collapsedItems = this.values.filter((value) => value !== event.detail.value);
+    const selectedValue = event.detail.value;
 
     console.log(
-      `Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
+      `Expanded: ${selectedValue === undefined ? 'None' : event.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
     );
   };
 }
diff --git a/static/usage/v7/accordion/listen-changes/demo.html b/static/usage/v7/accordion/listen-changes/demo.html
index dc6529203b7..583102d6942 100644
--- a/static/usage/v7/accordion/listen-changes/demo.html
+++ b/static/usage/v7/accordion/listen-changes/demo.html
@@ -42,12 +42,12 @@
       const accordionGroup = document.querySelector('ion-accordion-group');
       const values = ['first', 'second', 'third'];
 
-      accordionGroup.addEventListener('ionChange', (ev) => {
-        const collapsedItems = values.filter((value) => value !== ev.detail.value);
-        const selectedValue = ev.detail.value;
+      accordionGroup.addEventListener('ionChange', (event) => {
+        const collapsedItems = values.filter((value) => value !== event.detail.value);
+        const selectedValue = event.detail.value;
 
         console.log(
-          `Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(
+          `Expanded: ${selectedValue === undefined ? 'None' : event.detail.value} | Collapsed: ${collapsedItems.join(
             ', '
           )}`
         );
diff --git a/static/usage/v7/accordion/listen-changes/javascript.md b/static/usage/v7/accordion/listen-changes/javascript.md
index e47e3311a08..4c85d88b630 100644
--- a/static/usage/v7/accordion/listen-changes/javascript.md
+++ b/static/usage/v7/accordion/listen-changes/javascript.md
@@ -24,12 +24,12 @@
   const accordionGroup = document.querySelector('ion-accordion-group');
   const values = ['first', 'second', 'third'];
 
-  accordionGroup.addEventListener('ionChange', (ev) => {
-    const collapsedItems = values.filter((value) => value !== ev.detail.value);
-    const selectedValue = ev.detail.value;
+  accordionGroup.addEventListener('ionChange', (event) => {
+    const collapsedItems = values.filter((value) => value !== event.detail.value);
+    const selectedValue = event.detail.value;
 
     console.log(
-      `Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
+      `Expanded: ${selectedValue === undefined ? 'None' : event.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
     );
   });
 </script>
diff --git a/static/usage/v7/accordion/listen-changes/react.md b/static/usage/v7/accordion/listen-changes/react.md
index 98b4b7fc3e2..7ec38a63931 100644
--- a/static/usage/v7/accordion/listen-changes/react.md
+++ b/static/usage/v7/accordion/listen-changes/react.md
@@ -3,12 +3,12 @@ import React from 'react';
 import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/react';
 function Example() {
   const values = ['first', 'second', 'third'];
-  const accordionGroupChange = (ev: AccordionGroupCustomEvent) => {
-    const collapsedItems = values.filter((value) => value !== ev.detail.value);
-    const selectedValue = ev.detail.value;
+  const accordionGroupChange = (event: AccordionGroupCustomEvent) => {
+    const collapsedItems = values.filter((value) => value !== event.detail.value);
+    const selectedValue = event.detail.value;
 
     console.log(
-      `Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
+      `Expanded: ${selectedValue === undefined ? 'None' : event.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
     );
   };
 
diff --git a/static/usage/v7/accordion/listen-changes/vue.md b/static/usage/v7/accordion/listen-changes/vue.md
index 60607870264..b082a02a1a6 100644
--- a/static/usage/v7/accordion/listen-changes/vue.md
+++ b/static/usage/v7/accordion/listen-changes/vue.md
@@ -35,12 +35,12 @@
     },
     setup() {
       const values = ['first', 'second', 'third'];
-      const accordionGroupChange = (ev: AccordionGroupCustomEvent) => {
-        const collapsedItems = values.filter((value) => value !== ev.detail.value);
-        const selectedValue = ev.detail.value;
+      const accordionGroupChange = (event: AccordionGroupCustomEvent) => {
+        const collapsedItems = values.filter((value) => value !== event.detail.value);
+        const selectedValue = event.detail.value;
 
         console.log(
-          `Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(
+          `Expanded: ${selectedValue === undefined ? 'None' : event.detail.value} | Collapsed: ${collapsedItems.join(
             ', '
           )}`
         );
diff --git a/static/usage/v7/action-sheet/inline/isOpen/demo.html b/static/usage/v7/action-sheet/inline/isOpen/demo.html
index c52138777ea..bf4ee99c5a1 100644
--- a/static/usage/v7/action-sheet/inline/isOpen/demo.html
+++ b/static/usage/v7/action-sheet/inline/isOpen/demo.html
@@ -45,7 +45,7 @@
         },
       ];
 
-      actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => {
+      actionSheet.addEventListener('ionActionSheetDidDismiss', (event) => {
         actionSheet.isOpen = false;
       });
     </script>
diff --git a/static/usage/v7/action-sheet/inline/isOpen/javascript.md b/static/usage/v7/action-sheet/inline/isOpen/javascript.md
index 2c0e3b11879..f5c1a6efec2 100644
--- a/static/usage/v7/action-sheet/inline/isOpen/javascript.md
+++ b/static/usage/v7/action-sheet/inline/isOpen/javascript.md
@@ -28,7 +28,7 @@
     },
   ];
 
-  actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => {
+  actionSheet.addEventListener('ionActionSheetDidDismiss', (event) => {
     actionSheet.isOpen = false;
   });
 </script>
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md b/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md
index f0f7fcc8d50..91bbecf4d97 100644
--- a/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md
+++ b/static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md
@@ -35,7 +35,7 @@ export class ExampleComponent {
 
   constructor() {}
 
-  logResult(event: CustomEvent<OverlayEventDetail<string>>) {
+  logResult(event: CustomEvent<OverlayEventDetail>) {
     console.log(JSON.stringify(event.detail, null, 2));
   }
 }
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/demo.html b/static/usage/v7/action-sheet/role-info-on-dismiss/demo.html
index b8e04719cce..702966ab083 100644
--- a/static/usage/v7/action-sheet/role-info-on-dismiss/demo.html
+++ b/static/usage/v7/action-sheet/role-info-on-dismiss/demo.html
@@ -55,8 +55,8 @@
         },
       ];
 
-      actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => {
-        console.log(JSON.stringify(ev.detail, null, 2));
+      actionSheet.addEventListener('ionActionSheetDidDismiss', (event) => {
+        console.log(JSON.stringify(event.detail, null, 2));
       });
     </script>
   </body>
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/javascript.md b/static/usage/v7/action-sheet/role-info-on-dismiss/javascript.md
index b21645ebac8..27454e00346 100644
--- a/static/usage/v7/action-sheet/role-info-on-dismiss/javascript.md
+++ b/static/usage/v7/action-sheet/role-info-on-dismiss/javascript.md
@@ -44,8 +44,8 @@
     },
   ];
 
-  actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => {
-    console.log(JSON.stringify(ev.detail, null, 2));
+  actionSheet.addEventListener('ionActionSheetDidDismiss', (event) => {
+    console.log(JSON.stringify(event.detail, null, 2));
   });
 </script>
 ```
diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/vue.md b/static/usage/v7/action-sheet/role-info-on-dismiss/vue.md
index 6f56c29920d..7ac706eb8f3 100644
--- a/static/usage/v7/action-sheet/role-info-on-dismiss/vue.md
+++ b/static/usage/v7/action-sheet/role-info-on-dismiss/vue.md
@@ -51,8 +51,8 @@
         },
       ];
 
-      const logResult = (ev: CustomEvent) => {
-        console.log(JSON.stringify(ev.detail, null, 2));
+      const logResult = (event: CustomEvent) => {
+        console.log(JSON.stringify(event.detail, null, 2));
       };
 
       return {
diff --git a/static/usage/v7/alert/buttons/angular/example_component_ts.md b/static/usage/v7/alert/buttons/angular/example_component_ts.md
index 55be132d670..228a591e5e2 100644
--- a/static/usage/v7/alert/buttons/angular/example_component_ts.md
+++ b/static/usage/v7/alert/buttons/angular/example_component_ts.md
@@ -27,9 +27,8 @@ export class ExampleComponent {
     },
   ];
 
-  setResult(event: Event) {
-    const ev = event as CustomEvent<OverlayEventDetail<string>>;
-    console.log(`Dismissed with role: ${ev.detail.role}`);
+  setResult(event: CustomEvent<OverlayEventDetail>) {
+    console.log(`Dismissed with role: ${event.detail.role}`);
   }
 }
 ```
diff --git a/static/usage/v7/alert/buttons/demo.html b/static/usage/v7/alert/buttons/demo.html
index 9e63065387c..3633b74d31a 100644
--- a/static/usage/v7/alert/buttons/demo.html
+++ b/static/usage/v7/alert/buttons/demo.html
@@ -40,8 +40,8 @@
         },
       ];
 
-      alert.addEventListener('ionAlertDidDismiss', (ev) => {
-        console.log(`Dismissed with role: ${ev.detail.role}`);
+      alert.addEventListener('ionAlertDidDismiss', (event) => {
+        console.log(`Dismissed with role: ${event.detail.role}`);
       });
     </script>
   </body>
diff --git a/static/usage/v7/alert/buttons/javascript.md b/static/usage/v7/alert/buttons/javascript.md
index 21a45f7cf4d..efd64d7f484 100644
--- a/static/usage/v7/alert/buttons/javascript.md
+++ b/static/usage/v7/alert/buttons/javascript.md
@@ -22,8 +22,8 @@
     },
   ];
 
-  alert.addEventListener('ionAlertDidDismiss', (ev) => {
-    console.log(`Dismissed with role: ${ev.detail.role}`);
+  alert.addEventListener('ionAlertDidDismiss', (event) => {
+    console.log(`Dismissed with role: ${event.detail.role}`);
   });
 </script>
 ```
diff --git a/static/usage/v7/alert/buttons/vue.md b/static/usage/v7/alert/buttons/vue.md
index 245797ab7c1..72b684fe4c4 100644
--- a/static/usage/v7/alert/buttons/vue.md
+++ b/static/usage/v7/alert/buttons/vue.md
@@ -29,8 +29,8 @@
     },
   ];
 
-  const logResult = (ev: CustomEvent) => {
-    console.log(`Dismissed with role: ${ev.detail.role}`);
+  const logResult = (event: CustomEvent) => {
+    console.log(`Dismissed with role: ${event.detail.role}`);
   };
 </script>
 ```
diff --git a/static/usage/v7/animations/gesture/angular/example_component_ts.md b/static/usage/v7/animations/gesture/angular/example_component_ts.md
index 49bb9e92f64..e13a50cdb4b 100644
--- a/static/usage/v7/animations/gesture/angular/example_component_ts.md
+++ b/static/usage/v7/animations/gesture/angular/example_component_ts.md
@@ -26,23 +26,23 @@ export class ExampleComponent {
 
   constructor(private animationCtrl: AnimationController, private gestureCtrl: GestureController) {}
 
-  private onMove(ev: GestureDetail) {
+  private onMove(event: GestureDetail) {
     if (!this.started) {
       this.animation.progressStart();
       this.started = true;
     }
 
-    this.animation.progressStep(this.getStep(ev));
+    this.animation.progressStep(this.getStep(event));
   }
 
-  private onEnd(ev: GestureDetail) {
+  private onEnd(event: GestureDetail) {
     if (!this.started) {
       return;
     }
 
     this.gesture.enable(false);
 
-    const step = this.getStep(ev);
+    const step = this.getStep(event);
     const shouldComplete = step > 0.5;
 
     this.animation.progressEnd(shouldComplete ? 1 : 0, step).onFinish(() => {
@@ -57,8 +57,8 @@ export class ExampleComponent {
     return Math.max(min, Math.min(n, max));
   }
 
-  private getStep(ev: GestureDetail) {
-    const delta = this.initialStep + ev.deltaX;
+  private getStep(event: GestureDetail) {
+    const delta = this.initialStep + event.deltaX;
     return this.clamp(0, delta / this.MAX_TRANSLATE, 1);
   }
 
@@ -73,8 +73,8 @@ export class ExampleComponent {
       el: this.card.nativeElement,
       threshold: 0,
       gestureName: 'card-drag',
-      onMove: (ev) => this.onMove(ev),
-      onEnd: (ev) => this.onEnd(ev),
+      onMove: (event) => this.onMove(event),
+      onEnd: (event) => this.onEnd(event),
     }));
 
     gesture.enable(true);
diff --git a/static/usage/v7/animations/gesture/demo.html b/static/usage/v7/animations/gesture/demo.html
index 15a4ea12fd5..5e44f292c62 100644
--- a/static/usage/v7/animations/gesture/demo.html
+++ b/static/usage/v7/animations/gesture/demo.html
@@ -37,29 +37,29 @@
         el: card,
         threshold: 0,
         gestureName: 'card-drag',
-        onMove: (ev) => onMove(ev),
-        onEnd: (ev) => onEnd(ev),
+        onMove: (event) => onMove(event),
+        onEnd: (event) => onEnd(event),
       });
 
       gesture.enable(true);
 
-      const onMove = (ev) => {
+      const onMove = (event) => {
         if (!started) {
           animation.progressStart();
           started = true;
         }
 
-        animation.progressStep(getStep(ev));
+        animation.progressStep(getStep(event));
       };
 
-      const onEnd = (ev) => {
+      const onEnd = (event) => {
         if (!started) {
           return;
         }
 
         gesture.enable(false);
 
-        const step = getStep(ev);
+        const step = getStep(event);
         const shouldComplete = step > 0.5;
 
         animation.progressEnd(shouldComplete ? 1 : 0, step).onFinish(() => {
@@ -74,8 +74,8 @@
         return Math.max(min, Math.min(n, max));
       };
 
-      const getStep = (ev) => {
-        const delta = initialStep + ev.deltaX;
+      const getStep = (event) => {
+        const delta = initialStep + event.deltaX;
         return clamp(0, delta / MAX_TRANSLATE, 1);
       };
     </script>
diff --git a/static/usage/v7/animations/gesture/javascript.md b/static/usage/v7/animations/gesture/javascript.md
index 3535705d5eb..6037b6340f2 100644
--- a/static/usage/v7/animations/gesture/javascript.md
+++ b/static/usage/v7/animations/gesture/javascript.md
@@ -53,29 +53,29 @@
     el: card,
     threshold: 0,
     gestureName: 'card-drag',
-    onMove: (ev) => onMove(ev),
-    onEnd: (ev) => onEnd(ev),
+    onMove: (event) => onMove(event),
+    onEnd: (event) => onEnd(event),
   });
 
   gesture.enable(true);
 
-  var onMove = (ev) => {
+  var onMove = (event) => {
     if (!started) {
       animation.progressStart();
       started = true;
     }
 
-    animation.progressStep(getStep(ev));
+    animation.progressStep(getStep(event));
   };
 
-  var onEnd = (ev) => {
+  var onEnd = (event) => {
     if (!started) {
       return;
     }
 
     gesture.enable(false);
 
-    const step = getStep(ev);
+    const step = getStep(event);
     const shouldComplete = step > 0.5;
 
     animation.progressEnd(shouldComplete ? 1 : 0, step).onFinish(() => {
@@ -90,8 +90,8 @@
     return Math.max(min, Math.min(n, max));
   };
 
-  var getStep = (ev) => {
-    const delta = initialStep + ev.deltaX;
+  var getStep = (event) => {
+    const delta = initialStep + event.deltaX;
     return clamp(0, delta / MAX_TRANSLATE, 1);
   };
 </script>
diff --git a/static/usage/v7/animations/gesture/react/main_tsx.md b/static/usage/v7/animations/gesture/react/main_tsx.md
index 73fca7dfe22..730e8a47212 100644
--- a/static/usage/v7/animations/gesture/react/main_tsx.md
+++ b/static/usage/v7/animations/gesture/react/main_tsx.md
@@ -30,29 +30,29 @@ function Example() {
         el: cardEl.current!,
         threshold: 0,
         gestureName: 'card-drag',
-        onMove: (ev) => onMove(ev),
-        onEnd: (ev) => onEnd(ev),
+        onMove: (event) => onMove(event),
+        onEnd: (event) => onEnd(event),
       });
 
       gesture.current.enable(true);
 
-      const onMove = (ev: GestureDetail) => {
+      const onMove = (event: GestureDetail) => {
         if (!started.current) {
           animation.current!.progressStart();
           started.current = true;
         }
 
-        animation.current!.progressStep(getStep(ev));
+        animation.current!.progressStep(getStep(event));
       };
 
-      const onEnd = (ev: GestureDetail) => {
+      const onEnd = (event: GestureDetail) => {
         if (!started.current) {
           return;
         }
 
         gesture.current!.enable(false);
 
-        const step = getStep(ev);
+        const step = getStep(event);
         const shouldComplete = step > 0.5;
 
         animation.current!.progressEnd(shouldComplete ? 1 : 0, step).onFinish(() => {
@@ -67,8 +67,8 @@ function Example() {
         return Math.max(min, Math.min(n, max));
       };
 
-      const getStep = (ev: GestureDetail) => {
-        const delta = initialStep.current + ev.deltaX;
+      const getStep = (event: GestureDetail) => {
+        const delta = initialStep.current + event.deltaX;
         return clamp(0, delta / MAX_TRANSLATE, 1);
       };
     }
diff --git a/static/usage/v7/animations/gesture/vue.md b/static/usage/v7/animations/gesture/vue.md
index 9555355fe48..8ac4d91dafc 100644
--- a/static/usage/v7/animations/gesture/vue.md
+++ b/static/usage/v7/animations/gesture/vue.md
@@ -44,29 +44,29 @@
           el: card,
           threshold: 0,
           gestureName: 'card-drag',
-          onMove: (ev) => onMove(ev),
-          onEnd: (ev) => onEnd(ev),
+          onMove: (event) => onMove(event),
+          onEnd: (event) => onEnd(event),
         });
 
         gesture.enable(true);
 
-        const onMove = (ev: GestureDetail) => {
+        const onMove = (event: GestureDetail) => {
           if (!started) {
             animation.progressStart();
             started = true;
           }
 
-          animation.progressStep(getStep(ev));
+          animation.progressStep(getStep(event));
         };
 
-        const onEnd = (ev: GestureDetail) => {
+        const onEnd = (event: GestureDetail) => {
           if (!started) {
             return;
           }
 
           gesture.enable(false);
 
-          const step = getStep(ev);
+          const step = getStep(event);
           const shouldComplete = step > 0.5;
 
           animation.progressEnd(shouldComplete ? 1 : 0, step).onFinish(() => {
@@ -81,8 +81,8 @@
           return Math.max(min, Math.min(n, max));
         };
 
-        const getStep = (ev: GestureDetail) => {
-          const delta = initialStep + ev.deltaX;
+        const getStep = (event: GestureDetail) => {
+          const delta = initialStep + event.deltaX;
           return clamp(0, delta / MAX_TRANSLATE, 1);
         };
       });
diff --git a/static/usage/v7/common.js b/static/usage/v7/common.js
index 52694d7e7b2..0569cf15484 100644
--- a/static/usage/v7/common.js
+++ b/static/usage/v7/common.js
@@ -12,8 +12,8 @@ window.addEventListener('DOMContentLoaded', () => {
    * the demos loaded in iframes can match the
    * docs website theme.
    */
-  window.addEventListener('message', (ev) => {
-    const { data } = ev;
+  window.addEventListener('message', (event) => {
+    const { data } = event;
 
     if (data.darkMode) {
       document.body.classList.add('dark');
@@ -71,8 +71,8 @@ window.addEventListener('DOMContentLoaded', () => {
    * already created so that it does not wait on an event
    * that was already fired.
    */
-  const ev = new CustomEvent('demoReady');
-  window.dispatchEvent(ev);
+  const event = new CustomEvent('demoReady');
+  window.dispatchEvent(event);
 
   window.demoReady = true;
 });
diff --git a/static/usage/v7/content/scroll-events/angular/example_component_ts.md b/static/usage/v7/content/scroll-events/angular/example_component_ts.md
index 248333cb201..58a9275d49f 100644
--- a/static/usage/v7/content/scroll-events/angular/example_component_ts.md
+++ b/static/usage/v7/content/scroll-events/angular/example_component_ts.md
@@ -13,8 +13,8 @@ export class ExampleComponent {
     console.log('scroll start');
   }
 
-  handleScroll(ev: CustomEvent<ScrollDetail>) {
-    console.log('scroll', JSON.stringify(ev.detail));
+  handleScroll(event: CustomEvent<ScrollDetail>) {
+    console.log('scroll', JSON.stringify(event.detail));
   }
 
   handleScrollEnd() {
diff --git a/static/usage/v7/content/scroll-events/demo.html b/static/usage/v7/content/scroll-events/demo.html
index e747bcdf97d..dd42f79dd66 100644
--- a/static/usage/v7/content/scroll-events/demo.html
+++ b/static/usage/v7/content/scroll-events/demo.html
@@ -70,7 +70,7 @@ <h1>Scroll to fire the scroll events and view them in the console.</h1>
       content.scrollEvents = true;
 
       content.addEventListener('ionScrollStart', () => console.log('scroll start'));
-      content.addEventListener('ionScroll', (ev) => console.log('scroll', JSON.stringify(ev.detail)));
+      content.addEventListener('ionScroll', (event) => console.log('scroll', JSON.stringify(event.detail)));
       content.addEventListener('ionScrollEnd', () => console.log('scroll end'));
     </script>
   </body>
diff --git a/static/usage/v7/content/scroll-events/javascript.md b/static/usage/v7/content/scroll-events/javascript.md
index 822a1b04f81..f143544dbfc 100644
--- a/static/usage/v7/content/scroll-events/javascript.md
+++ b/static/usage/v7/content/scroll-events/javascript.md
@@ -56,7 +56,7 @@
   content.scrollEvents = true;
 
   content.addEventListener('ionScrollStart', () => console.log('scroll start'));
-  content.addEventListener('ionScroll', (ev) => console.log('scroll', JSON.stringify(ev.detail)));
+  content.addEventListener('ionScroll', (event) => console.log('scroll', JSON.stringify(event.detail)));
   content.addEventListener('ionScrollEnd', () => console.log('scroll end'));
 </script>
 ```
diff --git a/static/usage/v7/content/scroll-events/react.md b/static/usage/v7/content/scroll-events/react.md
index 4247de13b39..43b7a7e31ee 100644
--- a/static/usage/v7/content/scroll-events/react.md
+++ b/static/usage/v7/content/scroll-events/react.md
@@ -7,8 +7,8 @@ function Example() {
     console.log('scroll start');
   }
 
-  function handleScroll(ev: CustomEvent<ScrollDetail>) {
-    console.log('scroll', JSON.stringify(ev.detail));
+  function handleScroll(event: CustomEvent<ScrollDetail>) {
+    console.log('scroll', JSON.stringify(event.detail));
   }
 
   function handleScrollEnd() {
diff --git a/static/usage/v7/content/scroll-events/vue.md b/static/usage/v7/content/scroll-events/vue.md
index 1b8bada7d57..bc1b5daaa41 100644
--- a/static/usage/v7/content/scroll-events/vue.md
+++ b/static/usage/v7/content/scroll-events/vue.md
@@ -68,8 +68,8 @@
       handleScrollStart() {
         console.log('scroll start');
       },
-      handleScroll(ev: CustomEvent) {
-        console.log('scroll', JSON.stringify(ev.detail));
+      handleScroll(event: CustomEvent) {
+        console.log('scroll', JSON.stringify(event.detail));
       },
       handleScrollEnd() {
         console.log('scroll end');
diff --git a/static/usage/v7/infinite-scroll/basic/angular/example_component_ts.md b/static/usage/v7/infinite-scroll/basic/angular/example_component_ts.md
index 7c35aba2138..94a8fa83721 100644
--- a/static/usage/v7/infinite-scroll/basic/angular/example_component_ts.md
+++ b/static/usage/v7/infinite-scroll/basic/angular/example_component_ts.md
@@ -31,10 +31,10 @@ export class ExampleComponent implements OnInit {
     }
   }
 
-  onIonInfinite(ev: InfiniteScrollCustomEvent) {
+  onIonInfinite(event: InfiniteScrollCustomEvent) {
     this.generateItems();
     setTimeout(() => {
-      ev.target.complete();
+      event.target.complete();
     }, 500);
   }
 }
diff --git a/static/usage/v7/infinite-scroll/basic/react.md b/static/usage/v7/infinite-scroll/basic/react.md
index c12032a6540..145aa32dd47 100644
--- a/static/usage/v7/infinite-scroll/basic/react.md
+++ b/static/usage/v7/infinite-scroll/basic/react.md
@@ -39,9 +39,9 @@ function Example() {
         ))}
       </IonList>
       <IonInfiniteScroll
-        onIonInfinite={(ev) => {
+        onIonInfinite={(event) => {
           generateItems();
-          setTimeout(() => ev.target.complete(), 500);
+          setTimeout(() => event.target.complete(), 500);
         }}
       >
         <IonInfiniteScrollContent></IonInfiniteScrollContent>
diff --git a/static/usage/v7/infinite-scroll/basic/vue.md b/static/usage/v7/infinite-scroll/basic/vue.md
index dc7a7c45f46..61c08173971 100644
--- a/static/usage/v7/infinite-scroll/basic/vue.md
+++ b/static/usage/v7/infinite-scroll/basic/vue.md
@@ -51,9 +51,9 @@
         }
       };
 
-      const ionInfinite = (ev: InfiniteScrollCustomEvent) => {
+      const ionInfinite = (event: InfiniteScrollCustomEvent) => {
         generateItems();
-        setTimeout(() => ev.target.complete(), 500);
+        setTimeout(() => event.target.complete(), 500);
       };
 
       generateItems();
diff --git a/static/usage/v7/input/filtering/angular/example_component_ts.md b/static/usage/v7/input/filtering/angular/example_component_ts.md
index 19554af7c42..c5306e0012c 100644
--- a/static/usage/v7/input/filtering/angular/example_component_ts.md
+++ b/static/usage/v7/input/filtering/angular/example_component_ts.md
@@ -13,8 +13,8 @@ export class ExampleComponent {
 
   @ViewChild('ionInputEl', { static: true }) ionInputEl!: IonInput;
 
-  onInput(ev: CustomEvent) {
-    const value = (ev.target as HTMLIonInputElement).value ?? '';
+  onInput(event: CustomEvent) {
+    const value = (event.target as HTMLIonInputElement).value ?? '';
 
     // Removes non alphanumeric characters
     const filteredValue = (value as string).replace(/[^a-zA-Z0-9]+/g, '');
diff --git a/static/usage/v7/input/filtering/demo.html b/static/usage/v7/input/filtering/demo.html
index d2c96606fc3..c2212ce612f 100644
--- a/static/usage/v7/input/filtering/demo.html
+++ b/static/usage/v7/input/filtering/demo.html
@@ -25,8 +25,8 @@
 
     <script>
       const input = document.querySelector('ion-input');
-      input.addEventListener('ionInput', (ev) => {
-        const value = ev.target.value;
+      input.addEventListener('ionInput', (event) => {
+        const value = event.target.value;
 
         // Removes non alphanumeric characters
         input.value = value.replace(/[^a-zA-Z0-9]+/g, '');
diff --git a/static/usage/v7/input/filtering/javascript.md b/static/usage/v7/input/filtering/javascript.md
index 37af94dd426..8b17b16723b 100644
--- a/static/usage/v7/input/filtering/javascript.md
+++ b/static/usage/v7/input/filtering/javascript.md
@@ -7,8 +7,8 @@
 
 <script>
   var input = document.querySelector('ion-input');
-  input.addEventListener('ionInput', (ev) => {
-    const value = ev.target.value;
+  input.addEventListener('ionInput', (event) => {
+    const value = event.target.value;
     // Removes non alphanumeric characters
     input.value = value.replace(/[^a-zA-Z0-9]+/g, '');
   });
diff --git a/static/usage/v7/input/filtering/react.md b/static/usage/v7/input/filtering/react.md
index 1722f8ad9af..af36ce43c2b 100644
--- a/static/usage/v7/input/filtering/react.md
+++ b/static/usage/v7/input/filtering/react.md
@@ -6,8 +6,8 @@ function Example() {
   const [inputModel, setInputModel] = useState('');
   const ionInputEl = useRef<HTMLIonInputElement>(null);
 
-  const onInput = (ev: Event) => {
-    const value = (ev.target as HTMLIonInputElement).value as string;
+  const onInput = (event: Event) => {
+    const value = (event.target as HTMLIonInputElement).value as string;
 
     // Removes non alphanumeric characters
     const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, '');
diff --git a/static/usage/v7/input/filtering/vue.md b/static/usage/v7/input/filtering/vue.md
index a95e5dcc843..8335d386636 100644
--- a/static/usage/v7/input/filtering/vue.md
+++ b/static/usage/v7/input/filtering/vue.md
@@ -21,8 +21,8 @@
     setup() {
       const ionInputEl = ref();
       const inputModel = ref('');
-      const onInput = (ev) => {
-        const value = ev.target!.value;
+      const onInput = (event) => {
+        const value = event.target!.value;
 
         // Removes non alphanumeric characters
         const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, '');
diff --git a/static/usage/v7/input/helper-error/demo.html b/static/usage/v7/input/helper-error/demo.html
index 864ed4b7bc8..71d7bf67916 100644
--- a/static/usage/v7/input/helper-error/demo.html
+++ b/static/usage/v7/input/helper-error/demo.html
@@ -34,7 +34,7 @@
     <script>
       const input = document.querySelector('ion-input');
 
-      input.addEventListener('ionInput', (ev) => validate(ev));
+      input.addEventListener('ionInput', (event) => validate(event));
       input.addEventListener('ionBlur', () => markTouched());
 
       const validateEmail = (email) => {
@@ -43,8 +43,8 @@
         );
       };
 
-      const validate = (ev) => {
-        const value = ev.target.value;
+      const validate = (event) => {
+        const value = event.target.value;
 
         input.classList.remove('ion-valid');
         input.classList.remove('ion-invalid');
diff --git a/static/usage/v7/input/helper-error/javascript.md b/static/usage/v7/input/helper-error/javascript.md
index 6c1150bdb06..406f1e6e797 100644
--- a/static/usage/v7/input/helper-error/javascript.md
+++ b/static/usage/v7/input/helper-error/javascript.md
@@ -11,7 +11,7 @@
 <script>
   const input = document.querySelector('ion-input');
 
-  input.addEventListener('ionInput', (ev) => validate(ev));
+  input.addEventListener('ionInput', (event) => validate(event));
   input.addEventListener('ionBlur', () => markTouched());
 
   const validateEmail = (email) => {
@@ -20,8 +20,8 @@
     );
   };
 
-  const validate = (ev) => {
-    const value = ev.target.value;
+  const validate = (event) => {
+    const value = event.target.value;
 
     input.classList.remove('ion-valid');
     input.classList.remove('ion-invalid');
diff --git a/static/usage/v7/input/helper-error/react.md b/static/usage/v7/input/helper-error/react.md
index 0067c90dac9..88b2051f003 100644
--- a/static/usage/v7/input/helper-error/react.md
+++ b/static/usage/v7/input/helper-error/react.md
@@ -12,8 +12,8 @@ function Example() {
     );
   };
 
-  const validate = (ev: Event) => {
-    const value = (ev.target as HTMLInputElement).value;
+  const validate = (event: Event) => {
+    const value = (event.target as HTMLInputElement).value;
 
     setIsValid(undefined);
 
diff --git a/static/usage/v7/input/helper-error/vue.md b/static/usage/v7/input/helper-error/vue.md
index ce801d04ac7..e4f5ef538b6 100644
--- a/static/usage/v7/input/helper-error/vue.md
+++ b/static/usage/v7/input/helper-error/vue.md
@@ -26,8 +26,8 @@
         );
       },
 
-      validate(ev) {
-        const value = ev.target.value;
+      validate(event) {
+        const value = event.target.value;
 
         this.$refs.input.$el.classList.remove('ion-valid');
         this.$refs.input.$el.classList.remove('ion-invalid');
diff --git a/static/usage/v7/menu/type/demo.html b/static/usage/v7/menu/type/demo.html
index d35a8095712..cd89b3aaa6b 100644
--- a/static/usage/v7/menu/type/demo.html
+++ b/static/usage/v7/menu/type/demo.html
@@ -62,8 +62,8 @@ <h2>Select an overlay type:</h2>
       const menu = document.querySelector('ion-menu');
       const radioGroup = document.querySelector('ion-radio-group');
 
-      radioGroup.addEventListener('ionChange', (ev) => {
-        menu.type = ev.detail.value;
+      radioGroup.addEventListener('ionChange', (event) => {
+        menu.type = event.detail.value;
       });
     </script>
   </body>
diff --git a/static/usage/v7/menu/type/javascript.md b/static/usage/v7/menu/type/javascript.md
index 100e2e2d091..a6b5b7e5fc1 100644
--- a/static/usage/v7/menu/type/javascript.md
+++ b/static/usage/v7/menu/type/javascript.md
@@ -48,8 +48,8 @@
   const menu = document.querySelector('ion-menu');
   const radioGroup = document.querySelector('ion-radio-group');
 
-  radioGroup.addEventListener('ionChange', (ev) => {
-    menu.type = ev.detail.value;
+  radioGroup.addEventListener('ionChange', (event) => {
+    menu.type = event.detail.value;
   });
 </script>
 ```
diff --git a/static/usage/v7/menu/type/react.md b/static/usage/v7/menu/type/react.md
index 3caca163c30..af341a0e753 100644
--- a/static/usage/v7/menu/type/react.md
+++ b/static/usage/v7/menu/type/react.md
@@ -42,8 +42,8 @@ function Example() {
           <h2>Select an overlay type:</h2>
           <IonRadioGroup
             value={menuType}
-            onIonChange={(ev: RadioGroupCustomEvent) => {
-              setMenuType(ev.detail.value);
+            onIonChange={(event: RadioGroupCustomEvent) => {
+              setMenuType(event.detail.value);
             }}
           >
             <IonItem>
diff --git a/static/usage/v7/modal/can-dismiss/boolean/angular/example_component_ts.md b/static/usage/v7/modal/can-dismiss/boolean/angular/example_component_ts.md
index eeb7aa9fce5..344baa479b4 100644
--- a/static/usage/v7/modal/can-dismiss/boolean/angular/example_component_ts.md
+++ b/static/usage/v7/modal/can-dismiss/boolean/angular/example_component_ts.md
@@ -28,9 +28,8 @@ export class ExampleComponent {
     this.presentingElement = document.querySelector('.ion-page');
   }
 
-  onTermsChanged(event: Event) {
-    const ev = event as CheckboxCustomEvent;
-    this.canDismiss = ev.detail.checked;
+  onTermsChanged(event: CheckboxCustomEvent) {
+    this.canDismiss = event.detail.checked;
   }
 }
 ```
diff --git a/static/usage/v7/modal/can-dismiss/boolean/demo.html b/static/usage/v7/modal/can-dismiss/boolean/demo.html
index 855eabd9d71..a98d058a4d2 100644
--- a/static/usage/v7/modal/can-dismiss/boolean/demo.html
+++ b/static/usage/v7/modal/can-dismiss/boolean/demo.html
@@ -55,8 +55,8 @@
 
       modal.addEventListener('didPresent', () => {
         const terms = document.getElementById('terms');
-        terms.addEventListener('ionChange', (ev) => {
-          modal.canDismiss = ev.detail.checked;
+        terms.addEventListener('ionChange', (event) => {
+          modal.canDismiss = event.detail.checked;
         });
       });
     </script>
diff --git a/static/usage/v7/modal/can-dismiss/boolean/javascript.md b/static/usage/v7/modal/can-dismiss/boolean/javascript.md
index af2ab152fc9..3dde7734e5a 100644
--- a/static/usage/v7/modal/can-dismiss/boolean/javascript.md
+++ b/static/usage/v7/modal/can-dismiss/boolean/javascript.md
@@ -41,8 +41,8 @@
 
   modal.addEventListener('didPresent', () => {
     var terms = document.getElementById('terms');
-    terms.addEventListener('ionChange', (ev) => {
-      modal.canDismiss = ev.detail.checked;
+    terms.addEventListener('ionChange', (event) => {
+      modal.canDismiss = event.detail.checked;
     });
   });
 </script>
diff --git a/static/usage/v7/modal/can-dismiss/boolean/react.md b/static/usage/v7/modal/can-dismiss/boolean/react.md
index f136b0e28fb..0b817b8f185 100644
--- a/static/usage/v7/modal/can-dismiss/boolean/react.md
+++ b/static/usage/v7/modal/can-dismiss/boolean/react.md
@@ -54,8 +54,8 @@ function Example() {
               <IonCheckbox
                 id="terms"
                 checked={canDismiss}
-                onIonChange={(ev) => {
-                  setCanDismiss(ev.detail.checked);
+                onIonChange={(event) => {
+                  setCanDismiss(event.detail.checked);
                 }}
               >
                 <div className="ion-text-wrap">Do you accept the terms and conditions?</div>
diff --git a/static/usage/v7/modal/can-dismiss/boolean/vue.md b/static/usage/v7/modal/can-dismiss/boolean/vue.md
index 3504c7230cd..1944ce5eb21 100644
--- a/static/usage/v7/modal/can-dismiss/boolean/vue.md
+++ b/static/usage/v7/modal/can-dismiss/boolean/vue.md
@@ -70,8 +70,8 @@
       dismiss() {
         this.$refs.modal.$el.dismiss();
       },
-      onTermsChanged(ev: CheckboxCustomEvent) {
-        this.canDismiss = ev.detail.checked;
+      onTermsChanged(event: CheckboxCustomEvent) {
+        this.canDismiss = event.detail.checked;
       },
     },
     mounted() {
diff --git a/static/usage/v7/modal/can-dismiss/child-state/react/child_tsx.md b/static/usage/v7/modal/can-dismiss/child-state/react/child_tsx.md
index 35035eb357e..f87706f75cf 100644
--- a/static/usage/v7/modal/can-dismiss/child-state/react/child_tsx.md
+++ b/static/usage/v7/modal/can-dismiss/child-state/react/child_tsx.md
@@ -20,8 +20,8 @@ interface ChildProps {
 }
 
 function Child({ dismissChange, dismiss }: ChildProps) {
-  const checkboxChanged = (ev: CheckboxCustomEvent) => {
-    const checked = ev.detail.checked;
+  const checkboxChanged = (event: CheckboxCustomEvent) => {
+    const checked = event.detail.checked;
     dismissChange(checked);
   };
 
diff --git a/static/usage/v7/modal/can-dismiss/child-state/react/main_tsx.md b/static/usage/v7/modal/can-dismiss/child-state/react/main_tsx.md
index d8db547e7f9..5657089983f 100644
--- a/static/usage/v7/modal/can-dismiss/child-state/react/main_tsx.md
+++ b/static/usage/v7/modal/can-dismiss/child-state/react/main_tsx.md
@@ -52,8 +52,8 @@ function Example() {
             role: 'cancel',
           },
         ],
-        onWillDismiss: (ev) => {
-          if (ev.detail.role === 'confirm') {
+        onWillDismiss: (event) => {
+          if (event.detail.role === 'confirm') {
             resolve(true);
           } else {
             reject();
diff --git a/static/usage/v7/modal/can-dismiss/child-state/vue/child_vue.md b/static/usage/v7/modal/can-dismiss/child-state/vue/child_vue.md
index 6c402f88a98..ffbb483864e 100644
--- a/static/usage/v7/modal/can-dismiss/child-state/vue/child_vue.md
+++ b/static/usage/v7/modal/can-dismiss/child-state/vue/child_vue.md
@@ -43,8 +43,8 @@
     props.modal.$el.dismiss();
   };
 
-  const checkboxChanged = (ev) => {
-    const checked = ev.detail.checked;
+  const checkboxChanged = (event) => {
+    const checked = event.detail.checked;
     emit('dismissChange', checked);
   };
 </script>
diff --git a/static/usage/v7/modal/can-dismiss/function/react.md b/static/usage/v7/modal/can-dismiss/function/react.md
index 9ef7f6f682b..bed9be270d4 100644
--- a/static/usage/v7/modal/can-dismiss/function/react.md
+++ b/static/usage/v7/modal/can-dismiss/function/react.md
@@ -41,8 +41,8 @@ function Example() {
             role: 'cancel',
           },
         ],
-        onWillDismiss: (ev) => {
-          if (ev.detail.role === 'confirm') {
+        onWillDismiss: (event) => {
+          if (event.detail.role === 'confirm') {
             resolve(true);
           } else {
             reject();
diff --git a/static/usage/v7/modal/controller/react.md b/static/usage/v7/modal/controller/react.md
index fcbc0b3be31..30e93eace70 100644
--- a/static/usage/v7/modal/controller/react.md
+++ b/static/usage/v7/modal/controller/react.md
@@ -54,9 +54,9 @@ function Example() {
 
   function openModal() {
     present({
-      onWillDismiss: (ev: CustomEvent<OverlayEventDetail>) => {
-        if (ev.detail.role === 'confirm') {
-          setMessage(`Hello, ${ev.detail.data}!`);
+      onWillDismiss: (event: CustomEvent<OverlayEventDetail>) => {
+        if (event.detail.role === 'confirm') {
+          setMessage(`Hello, ${event.detail.data}!`);
         }
       },
     });
diff --git a/static/usage/v7/modal/inline/basic/angular/example_component_ts.md b/static/usage/v7/modal/inline/basic/angular/example_component_ts.md
index ab087edaadd..283bb0023fd 100644
--- a/static/usage/v7/modal/inline/basic/angular/example_component_ts.md
+++ b/static/usage/v7/modal/inline/basic/angular/example_component_ts.md
@@ -45,10 +45,9 @@ export class ExampleComponent {
     this.modal.dismiss(this.name, 'confirm');
   }
 
-  onWillDismiss(event: Event) {
-    const ev = event as CustomEvent<OverlayEventDetail<string>>;
-    if (ev.detail.role === 'confirm') {
-      this.message = `Hello, ${ev.detail.data}!`;
+  onWillDismiss(event: CustomEvent<OverlayEventDetail>) {
+    if (event.detail.role === 'confirm') {
+      this.message = `Hello, ${event.detail.data}!`;
     }
   }
 }
diff --git a/static/usage/v7/modal/inline/basic/demo.html b/static/usage/v7/modal/inline/basic/demo.html
index 50c05e4040a..46e54976b8e 100644
--- a/static/usage/v7/modal/inline/basic/demo.html
+++ b/static/usage/v7/modal/inline/basic/demo.html
@@ -58,10 +58,10 @@
         modal.dismiss(input.value, 'confirm');
       }
 
-      modal.addEventListener('willDismiss', (ev) => {
-        if (ev.detail.role === 'confirm') {
+      modal.addEventListener('willDismiss', (event) => {
+        if (event.detail.role === 'confirm') {
           const message = document.querySelector('#message');
-          message.textContent = `Hello ${ev.detail.data}!`;
+          message.textContent = `Hello ${event.detail.data}!`;
         }
       });
     </script>
diff --git a/static/usage/v7/modal/inline/basic/javascript.md b/static/usage/v7/modal/inline/basic/javascript.md
index 318f29e7611..754e94ca639 100644
--- a/static/usage/v7/modal/inline/basic/javascript.md
+++ b/static/usage/v7/modal/inline/basic/javascript.md
@@ -39,10 +39,10 @@
     modal.dismiss(input.value, 'confirm');
   }
 
-  modal.addEventListener('willDismiss', (ev) => {
-    if (ev.detail.role === 'confirm') {
+  modal.addEventListener('willDismiss', (event) => {
+    if (event.detail.role === 'confirm') {
       const message = document.querySelector('#message');
-      message.textContent = `Hello ${ev.detail.data}!`;
+      message.textContent = `Hello ${event.detail.data}!`;
     }
   });
 </script>
diff --git a/static/usage/v7/modal/inline/basic/react.md b/static/usage/v7/modal/inline/basic/react.md
index 1ca9670066a..0ca73d66844 100644
--- a/static/usage/v7/modal/inline/basic/react.md
+++ b/static/usage/v7/modal/inline/basic/react.md
@@ -26,9 +26,9 @@ function Example() {
     modal.current?.dismiss(input.current?.value, 'confirm');
   }
 
-  function onWillDismiss(ev: CustomEvent<OverlayEventDetail>) {
-    if (ev.detail.role === 'confirm') {
-      setMessage(`Hello, ${ev.detail.data}!`);
+  function onWillDismiss(event: CustomEvent<OverlayEventDetail>) {
+    if (event.detail.role === 'confirm') {
+      setMessage(`Hello, ${event.detail.data}!`);
     }
   }
 
@@ -44,7 +44,7 @@ function Example() {
           Open
         </IonButton>
         <p>{message}</p>
-        <IonModal ref={modal} trigger="open-modal" onWillDismiss={(ev) => onWillDismiss(ev)}>
+        <IonModal ref={modal} trigger="open-modal" onWillDismiss={(event) => onWillDismiss(event)}>
           <IonHeader>
             <IonToolbar>
               <IonButtons slot="start">
diff --git a/static/usage/v7/modal/inline/basic/vue.md b/static/usage/v7/modal/inline/basic/vue.md
index 5aac3115a1d..50bad5487a4 100644
--- a/static/usage/v7/modal/inline/basic/vue.md
+++ b/static/usage/v7/modal/inline/basic/vue.md
@@ -62,9 +62,9 @@
     modal.value.$el.dismiss(name, 'confirm');
   };
 
-  const onWillDismiss = (ev: CustomEvent<OverlayEventDetail>) => {
-    if (ev.detail.role === 'confirm') {
-      message.value = `Hello, ${ev.detail.data}!`;
+  const onWillDismiss = (event: CustomEvent<OverlayEventDetail>) => {
+    if (event.detail.role === 'confirm') {
+      message.value = `Hello, ${event.detail.data}!`;
     }
   };
 </script>
diff --git a/static/usage/v7/picker/inline/isOpen/demo.html b/static/usage/v7/picker/inline/isOpen/demo.html
index 1a0e8eabb9d..b7799a8e33e 100644
--- a/static/usage/v7/picker/inline/isOpen/demo.html
+++ b/static/usage/v7/picker/inline/isOpen/demo.html
@@ -59,7 +59,7 @@
         },
       ];
 
-      picker.addEventListener('ionPickerDidDismiss', (ev) => {
+      picker.addEventListener('ionPickerDidDismiss', (event) => {
         picker.isOpen = false;
       });
     </script>
diff --git a/static/usage/v7/picker/inline/isOpen/javascript.md b/static/usage/v7/picker/inline/isOpen/javascript.md
index fdf1fd8c3f5..f355c047153 100644
--- a/static/usage/v7/picker/inline/isOpen/javascript.md
+++ b/static/usage/v7/picker/inline/isOpen/javascript.md
@@ -42,7 +42,7 @@
     },
   ];
 
-  picker.addEventListener('ionPickerDidDismiss', (ev) => {
+  picker.addEventListener('ionPickerDidDismiss', (event) => {
     picker.isOpen = false;
   });
 </script>
diff --git a/static/usage/v7/popover/presenting/controller/vue/example_vue.md b/static/usage/v7/popover/presenting/controller/vue/example_vue.md
index c477a870895..538479cee2f 100644
--- a/static/usage/v7/popover/presenting/controller/vue/example_vue.md
+++ b/static/usage/v7/popover/presenting/controller/vue/example_vue.md
@@ -10,10 +10,10 @@
   export default {
     components: { IonButton },
     methods: {
-      async openPopover(ev: Event) {
+      async openPopover(event: Event) {
         const popover = await popoverController.create({
           component: Popover,
-          event: ev,
+          event: event,
         });
         await popover.present();
 
diff --git a/static/usage/v7/radio/using-comparewith/angular/example_component_ts.md b/static/usage/v7/radio/using-comparewith/angular/example_component_ts.md
index 1158167fc16..4e969a433bb 100644
--- a/static/usage/v7/radio/using-comparewith/angular/example_component_ts.md
+++ b/static/usage/v7/radio/using-comparewith/angular/example_component_ts.md
@@ -37,8 +37,8 @@ export class ExampleComponent {
     return o1.id === o2.id;
   }
 
-  handleChange(ev: Event): void {
-    const target = ev.target as HTMLInputElement;
+  handleChange(event: Event): void {
+    const target = event.target as HTMLInputElement;
     console.log('Current value:', JSON.stringify(target.value));
   }
 }
diff --git a/static/usage/v7/radio/using-comparewith/react.md b/static/usage/v7/radio/using-comparewith/react.md
index dff3b4233a6..bbecd62f841 100644
--- a/static/usage/v7/radio/using-comparewith/react.md
+++ b/static/usage/v7/radio/using-comparewith/react.md
@@ -35,7 +35,7 @@ function Example() {
     <IonList>
       <IonRadioGroup
         compareWith={compareWith}
-        onIonChange={(ev) => console.log('Current value:', JSON.stringify(ev.detail.value))}
+        onIonChange={(event) => console.log('Current value:', JSON.stringify(event.detail.value))}
       >
         {foods.map((food) => (
           <IonItem>
diff --git a/static/usage/v7/radio/using-comparewith/vue.md b/static/usage/v7/radio/using-comparewith/vue.md
index 28518284654..d12db87e609 100644
--- a/static/usage/v7/radio/using-comparewith/vue.md
+++ b/static/usage/v7/radio/using-comparewith/vue.md
@@ -45,8 +45,8 @@
       compareWith(o1, o2) {
         return o1.id === o2.id;
       },
-      handleChange(ev) {
-        console.log('Current value:', JSON.stringify(ev.detail.value));
+      handleChange(event) {
+        console.log('Current value:', JSON.stringify(event.detail.value));
       },
     },
   });
diff --git a/static/usage/v7/range/ion-change-event/angular/example_component_ts.md b/static/usage/v7/range/ion-change-event/angular/example_component_ts.md
index e1502344095..b329cbbc601 100644
--- a/static/usage/v7/range/ion-change-event/angular/example_component_ts.md
+++ b/static/usage/v7/range/ion-change-event/angular/example_component_ts.md
@@ -9,8 +9,8 @@ import { IonRange, RangeCustomEvent } from '@ionic/angular/standalone';
   imports: [IonRange],
 })
 export class ExampleComponent {
-  onIonChange(ev: Event) {
-    console.log('ionChange emitted value:', (ev as RangeCustomEvent).detail.value);
+  onIonChange(event: RangeCustomEvent) {
+    console.log('ionChange emitted value:', event.detail.value);
   }
 }
 ```
diff --git a/static/usage/v7/range/ion-knob-move-event/angular/example_component_ts.md b/static/usage/v7/range/ion-knob-move-event/angular/example_component_ts.md
index b13b84b308d..cdfa78fc713 100644
--- a/static/usage/v7/range/ion-knob-move-event/angular/example_component_ts.md
+++ b/static/usage/v7/range/ion-knob-move-event/angular/example_component_ts.md
@@ -9,12 +9,12 @@ import { IonRange, RangeCustomEvent } from '@ionic/angular/standalone';
   imports: [IonRange],
 })
 export class ExampleComponent {
-  onIonKnobMoveStart(ev: Event) {
-    console.log('ionKnobMoveStart:', (ev as RangeCustomEvent).detail.value);
+  onIonKnobMoveStart(event: RangeCustomEvent) {
+    console.log('ionKnobMoveStart:', event.detail.value);
   }
 
-  onIonKnobMoveEnd(ev: Event) {
-    console.log('ionKnobMoveEnd:', (ev as RangeCustomEvent).detail.value);
+  onIonKnobMoveEnd(event: RangeCustomEvent) {
+    console.log('ionKnobMoveEnd:', event.detail.value);
   }
 }
 ```
diff --git a/static/usage/v7/reorder/basic/angular/example_component_ts.md b/static/usage/v7/reorder/basic/angular/example_component_ts.md
index a0e47f6b8b6..541fd9c6df3 100644
--- a/static/usage/v7/reorder/basic/angular/example_component_ts.md
+++ b/static/usage/v7/reorder/basic/angular/example_component_ts.md
@@ -16,15 +16,15 @@ import {
   imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
-  handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
+  handleReorder(event: CustomEvent<ItemReorderEventDetail>) {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
-    console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
+    console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
 
     // Finish the reorder and position the item in the DOM based on
     // where the gesture ended. This method can also be called directly
     // by the reorder group
-    ev.detail.complete();
+    event.detail.complete();
   }
 }
 ```
diff --git a/static/usage/v7/reorder/custom-icon/angular/example_component_ts.md b/static/usage/v7/reorder/custom-icon/angular/example_component_ts.md
index d4f3cc02ac9..e9bdafd6df8 100644
--- a/static/usage/v7/reorder/custom-icon/angular/example_component_ts.md
+++ b/static/usage/v7/reorder/custom-icon/angular/example_component_ts.md
@@ -29,15 +29,15 @@ export class ExampleComponent {
     addIcons({ pizza });
   }
 
-  handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
+  handleReorder(event: CustomEvent<ItemReorderEventDetail>) {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
-    console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
+    console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
 
     // Finish the reorder and position the item in the DOM based on
     // where the gesture ended. This method can also be called directly
     // by the reorder group
-    ev.detail.complete();
+    event.detail.complete();
   }
 }
 ```
diff --git a/static/usage/v7/reorder/custom-scroll-target/angular/example_component_ts.md b/static/usage/v7/reorder/custom-scroll-target/angular/example_component_ts.md
index 4ebfef05c5a..bdd83c0417f 100644
--- a/static/usage/v7/reorder/custom-scroll-target/angular/example_component_ts.md
+++ b/static/usage/v7/reorder/custom-scroll-target/angular/example_component_ts.md
@@ -17,15 +17,15 @@ import {
   imports: [IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
-  handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
+  handleReorder(event: CustomEvent<ItemReorderEventDetail>) {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
-    console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
+    console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
 
     // Finish the reorder and position the item in the DOM based on
     // where the gesture ended. This method can also be called directly
     // by the reorder group
-    ev.detail.complete();
+    event.detail.complete();
   }
 }
 ```
diff --git a/static/usage/v7/reorder/toggling-disabled/angular/example_component_ts.md b/static/usage/v7/reorder/toggling-disabled/angular/example_component_ts.md
index 0914b726e0e..496e59f15e1 100644
--- a/static/usage/v7/reorder/toggling-disabled/angular/example_component_ts.md
+++ b/static/usage/v7/reorder/toggling-disabled/angular/example_component_ts.md
@@ -19,15 +19,15 @@ import {
 export class ExampleComponent {
   public isDisabled = true;
 
-  handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
+  handleReorder(event: CustomEvent<ItemReorderEventDetail>) {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
-    console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
+    console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
 
     // Finish the reorder and position the item in the DOM based on
     // where the gesture ended. This method can also be called directly
     // by the reorder group
-    ev.detail.complete();
+    event.detail.complete();
   }
 
   toggleReorder() {
diff --git a/static/usage/v7/reorder/updating-data/angular/example_component_ts.md b/static/usage/v7/reorder/updating-data/angular/example_component_ts.md
index bab1ace34d0..f70f2bed206 100644
--- a/static/usage/v7/reorder/updating-data/angular/example_component_ts.md
+++ b/static/usage/v7/reorder/updating-data/angular/example_component_ts.md
@@ -18,7 +18,7 @@ import {
 export class ExampleComponent {
   items = [1, 2, 3, 4, 5];
 
-  handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
+  handleReorder(event: CustomEvent<ItemReorderEventDetail>) {
     // Before complete is called with the items they will remain in the
     // order before the drag
     console.log('Before complete', this.items);
@@ -26,7 +26,7 @@ export class ExampleComponent {
     // Finish the reorder and position the item in the DOM based on
     // where the gesture ended. Update the items variable to the
     // new order of items
-    this.items = ev.detail.complete(this.items);
+    this.items = event.detail.complete(this.items);
 
     // After complete is called the items will be in the new order
     console.log('After complete', this.items);
diff --git a/static/usage/v7/reorder/wrapper/angular/example_component_ts.md b/static/usage/v7/reorder/wrapper/angular/example_component_ts.md
index a0e47f6b8b6..541fd9c6df3 100644
--- a/static/usage/v7/reorder/wrapper/angular/example_component_ts.md
+++ b/static/usage/v7/reorder/wrapper/angular/example_component_ts.md
@@ -16,15 +16,15 @@ import {
   imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
-  handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
+  handleReorder(event: CustomEvent<ItemReorderEventDetail>) {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
-    console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
+    console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
 
     // Finish the reorder and position the item in the DOM based on
     // where the gesture ended. This method can also be called directly
     // by the reorder group
-    ev.detail.complete();
+    event.detail.complete();
   }
 }
 ```
diff --git a/static/usage/v7/searchbar/debounce/react.md b/static/usage/v7/searchbar/debounce/react.md
index 0aece7108d6..216dd64d726 100644
--- a/static/usage/v7/searchbar/debounce/react.md
+++ b/static/usage/v7/searchbar/debounce/react.md
@@ -17,9 +17,9 @@ function Example() {
   ];
   let [results, setResults] = useState([...data]);
 
-  const handleInput = (ev: Event) => {
+  const handleInput = (event: Event) => {
     let query = '';
-    const target = ev.target as HTMLIonSearchbarElement;
+    const target = event.target as HTMLIonSearchbarElement;
     if (target) query = target.value!.toLowerCase();
 
     setResults(data.filter((d) => d.toLowerCase().indexOf(query) > -1));
@@ -27,7 +27,7 @@ function Example() {
 
   return (
     <>
-      <IonSearchbar debounce={1000} onIonInput={(ev) => handleInput(ev)}></IonSearchbar>
+      <IonSearchbar debounce={1000} onIonInput={(event) => handleInput(event)}></IonSearchbar>
 
       <IonList>
         {results.map((result) => (
diff --git a/static/usage/v7/select/basic/responding-to-interaction/vue.md b/static/usage/v7/select/basic/responding-to-interaction/vue.md
index a12b3238c60..418fe0b426f 100644
--- a/static/usage/v7/select/basic/responding-to-interaction/vue.md
+++ b/static/usage/v7/select/basic/responding-to-interaction/vue.md
@@ -24,8 +24,8 @@
   export default defineComponent({
     components: { IonItem, IonList, IonSelect, IonSelectOption },
     methods: {
-      handleChange(ev) {
-        console.log('ionChange fired with value: ' + ev.detail.value);
+      handleChange(event) {
+        console.log('ionChange fired with value: ' + event.detail.value);
       },
       handleCancel() {
         console.log('ionCancel fired');
diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md
index 976de91ea50..526527c0ff4 100644
--- a/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/angular/example_component_ts.md
@@ -45,8 +45,8 @@ export class ExampleComponent {
     return o1.id === o2.id;
   }
 
-  handleChange(ev: Event) {
-    const target = ev.target as HTMLIonSelectElement;
+  handleChange(event: Event) {
+    const target = event.target as HTMLIonSelectElement;
     console.log('Current value:', JSON.stringify(target.value));
   }
 }
diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/react.md b/static/usage/v7/select/objects-as-values/multiple-selection/react.md
index a41ed0c8670..3fc8c0d54f9 100644
--- a/static/usage/v7/select/objects-as-values/multiple-selection/react.md
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/react.md
@@ -46,7 +46,7 @@ function Example() {
           aria-label="Food"
           placeholder="Select food"
           compareWith={compareWith}
-          onIonChange={(ev) => console.log('Current value:', JSON.stringify(ev.detail.value))}
+          onIonChange={(event) => console.log('Current value:', JSON.stringify(event.detail.value))}
           multiple={true}
         >
           {foods.map((food) => (
diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/vue.md b/static/usage/v7/select/objects-as-values/multiple-selection/vue.md
index cf095fd89c0..b99b76d7a65 100644
--- a/static/usage/v7/select/objects-as-values/multiple-selection/vue.md
+++ b/static/usage/v7/select/objects-as-values/multiple-selection/vue.md
@@ -54,8 +54,8 @@
 
         return o1.id === o2.id;
       },
-      handleChange(ev) {
-        console.log('Current value:', JSON.stringify(ev.detail.value));
+      handleChange(event) {
+        console.log('Current value:', JSON.stringify(event.detail.value));
       },
     },
   });
diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md
index e984a6f6544..f2010f15ddd 100644
--- a/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/angular/example_component_ts.md
@@ -37,8 +37,8 @@ export class ExampleComponent {
     return o1 && o2 ? o1.id === o2.id : o1 === o2;
   }
 
-  handleChange(ev: Event) {
-    const target = ev.target as HTMLIonSelectElement;
+  handleChange(event: Event) {
+    const target = event.target as HTMLIonSelectElement;
     console.log('Current value:', JSON.stringify(target.value));
   }
 }
diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/react.md b/static/usage/v7/select/objects-as-values/using-comparewith/react.md
index ff1fe016e84..ba3a3b7f556 100644
--- a/static/usage/v7/select/objects-as-values/using-comparewith/react.md
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/react.md
@@ -38,7 +38,7 @@ function Example() {
           aria-label="Food"
           placeholder="Select food"
           compareWith={compareWith}
-          onIonChange={(ev) => console.log('Current value:', JSON.stringify(ev.detail.value))}
+          onIonChange={(event) => console.log('Current value:', JSON.stringify(event.detail.value))}
         >
           {foods.map((food) => (
             <IonSelectOption key={food.id} value={food}>
diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/vue.md b/static/usage/v7/select/objects-as-values/using-comparewith/vue.md
index e93b223f6a1..e45a73f1d53 100644
--- a/static/usage/v7/select/objects-as-values/using-comparewith/vue.md
+++ b/static/usage/v7/select/objects-as-values/using-comparewith/vue.md
@@ -45,8 +45,8 @@
       compareWith(o1, o2) {
         return o1 && o2 ? o1.id === o2.id : o1 === o2;
       },
-      handleChange(ev) {
-        console.log('Current value:', JSON.stringify(ev.detail.value));
+      handleChange(event) {
+        console.log('Current value:', JSON.stringify(event.detail.value));
       },
     },
   });
diff --git a/static/usage/v7/select/typeahead/angular/typeahead_component_ts.md b/static/usage/v7/select/typeahead/angular/typeahead_component_ts.md
index f9de32444d0..73f2cc20644 100644
--- a/static/usage/v7/select/typeahead/angular/typeahead_component_ts.md
+++ b/static/usage/v7/select/typeahead/angular/typeahead_component_ts.md
@@ -57,8 +57,8 @@ export class TypeaheadComponent implements OnInit {
     this.selectionChange.emit(this.workingSelectedValues);
   }
 
-  searchbarInput(ev: Event) {
-    const inputElement = ev.target as HTMLInputElement;
+  searchbarInput(event: Event) {
+    const inputElement = event.target as HTMLInputElement;
     this.filterList(inputElement.value);
   }
 
@@ -90,8 +90,8 @@ export class TypeaheadComponent implements OnInit {
     return this.workingSelectedValues.includes(value);
   }
 
-  checkboxChange(ev: CustomEvent<{ checked: boolean; value: string }>) {
-    const { checked, value } = ev.detail;
+  checkboxChange(event: CustomEvent<{ checked: boolean; value: string }>) {
+    const { checked, value } = event.detail;
 
     if (checked) {
       this.workingSelectedValues = [...this.workingSelectedValues, value];
diff --git a/static/usage/v7/select/typeahead/demo.html b/static/usage/v7/select/typeahead/demo.html
index 908b5b3b348..752e6574575 100644
--- a/static/usage/v7/select/typeahead/demo.html
+++ b/static/usage/v7/select/typeahead/demo.html
@@ -167,12 +167,12 @@
       };
 
       // Listen for all ionChange events from the checkbox
-      modal.addEventListener('ionChange', (ev) => {
-        if (ev.target.tagName !== 'ION-CHECKBOX') {
+      modal.addEventListener('ionChange', (event) => {
+        if (event.target.tagName !== 'ION-CHECKBOX') {
           return;
         }
 
-        const { checked, value } = ev.detail;
+        const { checked, value } = event.detail;
 
         if (checked) {
           workingSelectedFruits = [...workingSelectedFruits, value];
@@ -186,8 +186,8 @@
        * we need to update the view with
        * the filtered list.
        */
-      searchbar.addEventListener('ionInput', (ev) => {
-        renderList(ev.target.value);
+      searchbar.addEventListener('ionInput', (event) => {
+        renderList(event.target.value);
       });
 
       /**
@@ -195,8 +195,8 @@
        * update the parent page with the
        * selected fruits.
        */
-      modal.addEventListener('ionModalWillDismiss', (ev) => {
-        const { data } = ev.detail;
+      modal.addEventListener('ionModalWillDismiss', (event) => {
+        const { data } = event.detail;
 
         if (data === undefined) return;
 
@@ -209,7 +209,7 @@
        * When the modal has completed we need to
        * reset the filtered state of the list.
        */
-      modal.addEventListener('ionModalDidDismiss', (ev) => {
+      modal.addEventListener('ionModalDidDismiss', (event) => {
         searchbar.value = undefined;
         renderList();
       });
diff --git a/static/usage/v7/select/typeahead/javascript.md b/static/usage/v7/select/typeahead/javascript.md
index e98741c6df2..2f2737a1d92 100644
--- a/static/usage/v7/select/typeahead/javascript.md
+++ b/static/usage/v7/select/typeahead/javascript.md
@@ -153,12 +153,12 @@
   }
 
   // Listen for all ionChange events from the checkbox
-  modal.addEventListener('ionChange', (ev) => {
-    if (ev.target.tagName !== 'ION-CHECKBOX') {
+  modal.addEventListener('ionChange', (event) => {
+    if (event.target.tagName !== 'ION-CHECKBOX') {
       return;
     }
 
-    const { checked, value } = ev.detail;
+    const { checked, value } = event.detail;
 
     if (checked) {
       workingSelectedFruits = [...workingSelectedFruits, value];
@@ -172,8 +172,8 @@
    * we need to update the view with
    * the filtered list.
    */
-  searchbar.addEventListener('ionInput', (ev) => {
-    renderList(ev.target.value);
+  searchbar.addEventListener('ionInput', (event) => {
+    renderList(event.target.value);
   });
 
   /**
@@ -181,8 +181,8 @@
    * update the parent page with the
    * selected fruits.
    */
-  modal.addEventListener('ionModalWillDismiss', (ev) => {
-    const { data } = ev.detail;
+  modal.addEventListener('ionModalWillDismiss', (event) => {
+    const { data } = event.detail;
 
     if (data === undefined) return;
 
@@ -195,7 +195,7 @@
    * When the modal has completed we need to
    * reset the filtered state of the list.
    */
-  modal.addEventListener('ionModalDidDismiss', (ev) => {
+  modal.addEventListener('ionModalDidDismiss', (event) => {
     searchbar.value = undefined;
     renderList();
   });
diff --git a/static/usage/v7/select/typeahead/react/typeahead_component_tsx.md b/static/usage/v7/select/typeahead/react/typeahead_component_tsx.md
index 6026c0fbe9f..7aee53fae3f 100644
--- a/static/usage/v7/select/typeahead/react/typeahead_component_tsx.md
+++ b/static/usage/v7/select/typeahead/react/typeahead_component_tsx.md
@@ -45,8 +45,8 @@ function AppTypeahead(props: TypeaheadProps) {
     }
   };
 
-  const searchbarInput = (ev: any) => {
-    filterList(ev.target.value);
+  const searchbarInput = (event: any) => {
+    filterList(event.target.value);
   };
 
   /**
@@ -77,8 +77,8 @@ function AppTypeahead(props: TypeaheadProps) {
     }
   };
 
-  const checkboxChange = (ev: CheckboxCustomEvent) => {
-    const { checked, value } = ev.detail;
+  const checkboxChange = (event: CheckboxCustomEvent) => {
+    const { checked, value } = event.detail;
 
     if (checked) {
       setWorkingSelectedValues([...workingSelectedValues, value]);
diff --git a/static/usage/v7/select/typeahead/vue/typeahead_component_vue.md b/static/usage/v7/select/typeahead/vue/typeahead_component_vue.md
index 33017c3e291..71bf0622b8a 100644
--- a/static/usage/v7/select/typeahead/vue/typeahead_component_vue.md
+++ b/static/usage/v7/select/typeahead/vue/typeahead_component_vue.md
@@ -80,8 +80,8 @@
         emit('selection-change', workingSelectedValues.value);
       };
 
-      const searchbarInput = (ev: SearchbarCustomEvent) => {
-        filterList(ev.target.value);
+      const searchbarInput = (event: SearchbarCustomEvent) => {
+        filterList(event.target.value);
       };
 
       /**
@@ -110,8 +110,8 @@
         }
       };
 
-      const checkboxChange = (ev: CheckboxCustomEvent) => {
-        const { checked, value } = ev.detail;
+      const checkboxChange = (event: CheckboxCustomEvent) => {
+        const { checked, value } = event.detail;
 
         if (checked) {
           workingSelectedValues.value = [...workingSelectedValues.value, value];
diff --git a/static/usage/v7/textarea/helper-error/demo.html b/static/usage/v7/textarea/helper-error/demo.html
index dbb7c284966..bab6d9e9358 100644
--- a/static/usage/v7/textarea/helper-error/demo.html
+++ b/static/usage/v7/textarea/helper-error/demo.html
@@ -33,7 +33,7 @@
     <script>
       const textarea = document.querySelector('ion-textarea');
 
-      textarea.addEventListener('ionInput', (ev) => validate(ev));
+      textarea.addEventListener('ionInput', (event) => validate(event));
       textarea.addEventListener('ionBlur', () => markTouched());
 
       const validateEmail = (email) => {
@@ -42,8 +42,8 @@
         );
       };
 
-      const validate = (ev) => {
-        const value = ev.target.value;
+      const validate = (event) => {
+        const value = event.target.value;
 
         textarea.classList.remove('ion-valid');
         textarea.classList.remove('ion-invalid');
diff --git a/static/usage/v7/textarea/helper-error/javascript.md b/static/usage/v7/textarea/helper-error/javascript.md
index 4bcdf69990d..ae7b0346037 100644
--- a/static/usage/v7/textarea/helper-error/javascript.md
+++ b/static/usage/v7/textarea/helper-error/javascript.md
@@ -10,7 +10,7 @@
 <script>
   const textarea = document.querySelector('ion-textarea');
 
-  textarea.addEventListener('ionInput', (ev) => validate(ev));
+  textarea.addEventListener('ionInput', (event) => validate(event));
   textarea.addEventListener('ionBlur', () => markTouched());
 
   const validateEmail = (email) => {
@@ -19,8 +19,8 @@
     );
   };
 
-  const validate = (ev) => {
-    const value = ev.target.value;
+  const validate = (event) => {
+    const value = event.target.value;
 
     textarea.classList.remove('ion-valid');
     textarea.classList.remove('ion-invalid');
diff --git a/static/usage/v7/textarea/helper-error/react.md b/static/usage/v7/textarea/helper-error/react.md
index 01d3207dc85..b3b2e05e63b 100644
--- a/static/usage/v7/textarea/helper-error/react.md
+++ b/static/usage/v7/textarea/helper-error/react.md
@@ -14,8 +14,8 @@ function Example() {
     );
   };
 
-  const validate = (ev: Event) => {
-    const value = (ev.target as HTMLTextAreaElement).value;
+  const validate = (event: Event) => {
+    const value = (event.target as HTMLTextAreaElement).value;
 
     setIsValid(undefined);
 
diff --git a/static/usage/v7/textarea/helper-error/vue.md b/static/usage/v7/textarea/helper-error/vue.md
index f0fe51ebee8..36412d18029 100644
--- a/static/usage/v7/textarea/helper-error/vue.md
+++ b/static/usage/v7/textarea/helper-error/vue.md
@@ -25,8 +25,8 @@
         );
       },
 
-      validate(ev) {
-        const value = ev.target.value;
+      validate(event) {
+        const value = event.target.value;
 
         this.$refs.input.$el.classList.remove('ion-valid');
         this.$refs.input.$el.classList.remove('ion-invalid');
diff --git a/static/usage/v7/theming/manual-dark-mode/demo.html b/static/usage/v7/theming/manual-dark-mode/demo.html
index ededdc889fc..e12762147e9 100644
--- a/static/usage/v7/theming/manual-dark-mode/demo.html
+++ b/static/usage/v7/theming/manual-dark-mode/demo.html
@@ -68,7 +68,7 @@
       const toggle = document.querySelector('#themeToggle');
 
       // Listen for the toggle check/uncheck to toggle the dark theme
-      toggle.addEventListener('ionChange', (ev) => toggleDarkTheme(ev.detail.checked));
+      toggle.addEventListener('ionChange', (event) => toggleDarkTheme(event.detail.checked));
 
       // Called by the media query to check/uncheck the toggle
       function checkToggle(shouldCheck) {
@@ -88,8 +88,8 @@
 
       // Demo only code below
       // ----------------------------------------------------
-      window.addEventListener('demoReady', (ev) => {
-        const theme = ev.target.localStorage.getItem('theme');
+      window.addEventListener('demoReady', (event) => {
+        const theme = event.target.localStorage.getItem('theme');
         const isDark = theme === 'dark' ? true : false;
 
         // Initialize the dark theme based on the initial
@@ -97,8 +97,8 @@
         initializeDarkTheme(isDark);
       });
 
-      window.addEventListener('message', (ev) => {
-        toggle.checked = ev.data.darkMode;
+      window.addEventListener('message', (event) => {
+        toggle.checked = event.data.darkMode;
       });
     </script>
 
diff --git a/static/usage/v7/theming/manual-dark-mode/javascript/index_html.md b/static/usage/v7/theming/manual-dark-mode/javascript/index_html.md
index 33173b9eea3..c92d6e07537 100644
--- a/static/usage/v7/theming/manual-dark-mode/javascript/index_html.md
+++ b/static/usage/v7/theming/manual-dark-mode/javascript/index_html.md
@@ -54,8 +54,8 @@
   const toggle = document.querySelector('#themeToggle');
 
   // Listen for the toggle check/uncheck to toggle the dark theme
-  toggle.addEventListener('ionChange', (ev) => {
-    toggleDarkTheme(ev.detail.checked);
+  toggle.addEventListener('ionChange', (event) => {
+    toggleDarkTheme(event.detail.checked);
   });
 
   // Use matchMedia to check the user preference
diff --git a/static/usage/v7/theming/manual-dark-mode/react/main_tsx.md b/static/usage/v7/theming/manual-dark-mode/react/main_tsx.md
index 390cedcba80..13ea56a0eb5 100644
--- a/static/usage/v7/theming/manual-dark-mode/react/main_tsx.md
+++ b/static/usage/v7/theming/manual-dark-mode/react/main_tsx.md
@@ -26,8 +26,8 @@ function Example() {
   const [themeToggle, setThemeToggle] = useState(false);
 
   // Listen for the toggle check/uncheck to toggle the dark theme
-  const toggleChange = (ev: ToggleCustomEvent) => {
-    toggleDarkTheme(ev.detail.checked);
+  const toggleChange = (event: ToggleCustomEvent) => {
+    toggleDarkTheme(event.detail.checked);
   };
 
   // Add or remove the "dark" class on the document body
diff --git a/static/usage/v7/theming/manual-dark-mode/vue.md b/static/usage/v7/theming/manual-dark-mode/vue.md
index 2dfda3aa30c..ec2dd6c2880 100644
--- a/static/usage/v7/theming/manual-dark-mode/vue.md
+++ b/static/usage/v7/theming/manual-dark-mode/vue.md
@@ -116,8 +116,8 @@
       prefersDark.addEventListener('change', (mediaQuery) => initializeDarkTheme(mediaQuery.matches));
 
       // Listen for the toggle check/uncheck to toggle the dark theme
-      const toggleChange = (ev: ToggleCustomEvent) => {
-        toggleDarkTheme(ev.detail.checked);
+      const toggleChange = (event: ToggleCustomEvent) => {
+        toggleDarkTheme(event.detail.checked);
       };
 
       return {
diff --git a/static/usage/v7/toast/buttons/demo.html b/static/usage/v7/toast/buttons/demo.html
index 61c3144dffc..92cdbb97c07 100644
--- a/static/usage/v7/toast/buttons/demo.html
+++ b/static/usage/v7/toast/buttons/demo.html
@@ -45,8 +45,8 @@
         },
       ];
 
-      toast.addEventListener('ionToastDidDismiss', (ev) => {
-        const { role } = ev.detail;
+      toast.addEventListener('ionToastDidDismiss', (event) => {
+        const { role } = event.detail;
         console.log(`Dismissed with role: ${role}`);
       });
     </script>
diff --git a/static/usage/v7/toast/buttons/javascript.md b/static/usage/v7/toast/buttons/javascript.md
index 843c1a469c6..dd425a862d6 100644
--- a/static/usage/v7/toast/buttons/javascript.md
+++ b/static/usage/v7/toast/buttons/javascript.md
@@ -22,8 +22,8 @@
     },
   ];
 
-  toast.addEventListener('ionToastDidDismiss', (ev) => {
-    const { role } = ev.detail;
+  toast.addEventListener('ionToastDidDismiss', (event) => {
+    const { role } = event.detail;
     console.log(`Dismissed with role: ${role}`);
   });
 </script>
diff --git a/static/usage/v7/toast/buttons/vue.md b/static/usage/v7/toast/buttons/vue.md
index fc05a785e17..d76b30f18d9 100644
--- a/static/usage/v7/toast/buttons/vue.md
+++ b/static/usage/v7/toast/buttons/vue.md
@@ -35,8 +35,8 @@
           },
         },
       ];
-      const handleDismiss = (ev: CustomEvent) => {
-        const { role } = ev.detail;
+      const handleDismiss = (event: CustomEvent) => {
+        const { role } = event.detail;
         console.log(`Dismissed with role: ${role}`);
       };
 
diff --git a/static/usage/v8/accordion/listen-changes/angular/example_component_ts.md b/static/usage/v8/accordion/listen-changes/angular/example_component_ts.md
index 24055f15338..05b984d0b02 100644
--- a/static/usage/v8/accordion/listen-changes/angular/example_component_ts.md
+++ b/static/usage/v8/accordion/listen-changes/angular/example_component_ts.md
@@ -11,12 +11,12 @@ import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angul
 export class ExampleComponent {
   private values: string[] = ['first', 'second', 'third'];
 
-  accordionGroupChange = (ev: CustomEvent) => {
-    const collapsedItems = this.values.filter((value) => value !== ev.detail.value);
-    const selectedValue = ev.detail.value;
+  accordionGroupChange = (event: CustomEvent) => {
+    const collapsedItems = this.values.filter((value) => value !== event.detail.value);
+    const selectedValue = event.detail.value;
 
     console.log(
-      `Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
+      `Expanded: ${selectedValue === undefined ? 'None' : event.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
     );
   };
 }
diff --git a/static/usage/v8/accordion/listen-changes/demo.html b/static/usage/v8/accordion/listen-changes/demo.html
index 0da235b24e7..b1f3391cb6c 100644
--- a/static/usage/v8/accordion/listen-changes/demo.html
+++ b/static/usage/v8/accordion/listen-changes/demo.html
@@ -42,12 +42,12 @@
       const accordionGroup = document.querySelector('ion-accordion-group');
       const values = ['first', 'second', 'third'];
 
-      accordionGroup.addEventListener('ionChange', (ev) => {
-        const collapsedItems = values.filter((value) => value !== ev.detail.value);
-        const selectedValue = ev.detail.value;
+      accordionGroup.addEventListener('ionChange', (event) => {
+        const collapsedItems = values.filter((value) => value !== event.detail.value);
+        const selectedValue = event.detail.value;
 
         console.log(
-          `Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(
+          `Expanded: ${selectedValue === undefined ? 'None' : event.detail.value} | Collapsed: ${collapsedItems.join(
             ', '
           )}`
         );
diff --git a/static/usage/v8/accordion/listen-changes/javascript.md b/static/usage/v8/accordion/listen-changes/javascript.md
index e47e3311a08..4c85d88b630 100644
--- a/static/usage/v8/accordion/listen-changes/javascript.md
+++ b/static/usage/v8/accordion/listen-changes/javascript.md
@@ -24,12 +24,12 @@
   const accordionGroup = document.querySelector('ion-accordion-group');
   const values = ['first', 'second', 'third'];
 
-  accordionGroup.addEventListener('ionChange', (ev) => {
-    const collapsedItems = values.filter((value) => value !== ev.detail.value);
-    const selectedValue = ev.detail.value;
+  accordionGroup.addEventListener('ionChange', (event) => {
+    const collapsedItems = values.filter((value) => value !== event.detail.value);
+    const selectedValue = event.detail.value;
 
     console.log(
-      `Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
+      `Expanded: ${selectedValue === undefined ? 'None' : event.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
     );
   });
 </script>
diff --git a/static/usage/v8/accordion/listen-changes/react.md b/static/usage/v8/accordion/listen-changes/react.md
index 98b4b7fc3e2..7ec38a63931 100644
--- a/static/usage/v8/accordion/listen-changes/react.md
+++ b/static/usage/v8/accordion/listen-changes/react.md
@@ -3,12 +3,12 @@ import React from 'react';
 import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/react';
 function Example() {
   const values = ['first', 'second', 'third'];
-  const accordionGroupChange = (ev: AccordionGroupCustomEvent) => {
-    const collapsedItems = values.filter((value) => value !== ev.detail.value);
-    const selectedValue = ev.detail.value;
+  const accordionGroupChange = (event: AccordionGroupCustomEvent) => {
+    const collapsedItems = values.filter((value) => value !== event.detail.value);
+    const selectedValue = event.detail.value;
 
     console.log(
-      `Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
+      `Expanded: ${selectedValue === undefined ? 'None' : event.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
     );
   };
 
diff --git a/static/usage/v8/accordion/listen-changes/vue.md b/static/usage/v8/accordion/listen-changes/vue.md
index 60607870264..b082a02a1a6 100644
--- a/static/usage/v8/accordion/listen-changes/vue.md
+++ b/static/usage/v8/accordion/listen-changes/vue.md
@@ -35,12 +35,12 @@
     },
     setup() {
       const values = ['first', 'second', 'third'];
-      const accordionGroupChange = (ev: AccordionGroupCustomEvent) => {
-        const collapsedItems = values.filter((value) => value !== ev.detail.value);
-        const selectedValue = ev.detail.value;
+      const accordionGroupChange = (event: AccordionGroupCustomEvent) => {
+        const collapsedItems = values.filter((value) => value !== event.detail.value);
+        const selectedValue = event.detail.value;
 
         console.log(
-          `Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(
+          `Expanded: ${selectedValue === undefined ? 'None' : event.detail.value} | Collapsed: ${collapsedItems.join(
             ', '
           )}`
         );
diff --git a/static/usage/v8/action-sheet/inline/isOpen/demo.html b/static/usage/v8/action-sheet/inline/isOpen/demo.html
index 24c01f512fa..d35c6de4a1f 100644
--- a/static/usage/v8/action-sheet/inline/isOpen/demo.html
+++ b/static/usage/v8/action-sheet/inline/isOpen/demo.html
@@ -45,7 +45,7 @@
         },
       ];
 
-      actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => {
+      actionSheet.addEventListener('ionActionSheetDidDismiss', (event) => {
         actionSheet.isOpen = false;
       });
     </script>
diff --git a/static/usage/v8/action-sheet/inline/isOpen/javascript.md b/static/usage/v8/action-sheet/inline/isOpen/javascript.md
index 2c0e3b11879..f5c1a6efec2 100644
--- a/static/usage/v8/action-sheet/inline/isOpen/javascript.md
+++ b/static/usage/v8/action-sheet/inline/isOpen/javascript.md
@@ -28,7 +28,7 @@
     },
   ];
 
-  actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => {
+  actionSheet.addEventListener('ionActionSheetDidDismiss', (event) => {
     actionSheet.isOpen = false;
   });
 </script>
diff --git a/static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_ts.md b/static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_ts.md
index f0f7fcc8d50..91bbecf4d97 100644
--- a/static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_ts.md
+++ b/static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_ts.md
@@ -35,7 +35,7 @@ export class ExampleComponent {
 
   constructor() {}
 
-  logResult(event: CustomEvent<OverlayEventDetail<string>>) {
+  logResult(event: CustomEvent<OverlayEventDetail>) {
     console.log(JSON.stringify(event.detail, null, 2));
   }
 }
diff --git a/static/usage/v8/action-sheet/role-info-on-dismiss/demo.html b/static/usage/v8/action-sheet/role-info-on-dismiss/demo.html
index f23f60bbb19..4c65ebfc81a 100644
--- a/static/usage/v8/action-sheet/role-info-on-dismiss/demo.html
+++ b/static/usage/v8/action-sheet/role-info-on-dismiss/demo.html
@@ -55,8 +55,8 @@
         },
       ];
 
-      actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => {
-        console.log(JSON.stringify(ev.detail, null, 2));
+      actionSheet.addEventListener('ionActionSheetDidDismiss', (event) => {
+        console.log(JSON.stringify(event.detail, null, 2));
       });
     </script>
   </body>
diff --git a/static/usage/v8/action-sheet/role-info-on-dismiss/javascript.md b/static/usage/v8/action-sheet/role-info-on-dismiss/javascript.md
index b21645ebac8..27454e00346 100644
--- a/static/usage/v8/action-sheet/role-info-on-dismiss/javascript.md
+++ b/static/usage/v8/action-sheet/role-info-on-dismiss/javascript.md
@@ -44,8 +44,8 @@
     },
   ];
 
-  actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => {
-    console.log(JSON.stringify(ev.detail, null, 2));
+  actionSheet.addEventListener('ionActionSheetDidDismiss', (event) => {
+    console.log(JSON.stringify(event.detail, null, 2));
   });
 </script>
 ```
diff --git a/static/usage/v8/action-sheet/role-info-on-dismiss/vue.md b/static/usage/v8/action-sheet/role-info-on-dismiss/vue.md
index 6f56c29920d..7ac706eb8f3 100644
--- a/static/usage/v8/action-sheet/role-info-on-dismiss/vue.md
+++ b/static/usage/v8/action-sheet/role-info-on-dismiss/vue.md
@@ -51,8 +51,8 @@
         },
       ];
 
-      const logResult = (ev: CustomEvent) => {
-        console.log(JSON.stringify(ev.detail, null, 2));
+      const logResult = (event: CustomEvent) => {
+        console.log(JSON.stringify(event.detail, null, 2));
       };
 
       return {
diff --git a/static/usage/v8/alert/buttons/angular/example_component_ts.md b/static/usage/v8/alert/buttons/angular/example_component_ts.md
index 55be132d670..228a591e5e2 100644
--- a/static/usage/v8/alert/buttons/angular/example_component_ts.md
+++ b/static/usage/v8/alert/buttons/angular/example_component_ts.md
@@ -27,9 +27,8 @@ export class ExampleComponent {
     },
   ];
 
-  setResult(event: Event) {
-    const ev = event as CustomEvent<OverlayEventDetail<string>>;
-    console.log(`Dismissed with role: ${ev.detail.role}`);
+  setResult(event: CustomEvent<OverlayEventDetail>) {
+    console.log(`Dismissed with role: ${event.detail.role}`);
   }
 }
 ```
diff --git a/static/usage/v8/alert/buttons/demo.html b/static/usage/v8/alert/buttons/demo.html
index 77b29df207e..df74653a2d2 100644
--- a/static/usage/v8/alert/buttons/demo.html
+++ b/static/usage/v8/alert/buttons/demo.html
@@ -40,8 +40,8 @@
         },
       ];
 
-      alert.addEventListener('ionAlertDidDismiss', (ev) => {
-        console.log(`Dismissed with role: ${ev.detail.role}`);
+      alert.addEventListener('ionAlertDidDismiss', (event) => {
+        console.log(`Dismissed with role: ${event.detail.role}`);
       });
     </script>
   </body>
diff --git a/static/usage/v8/alert/buttons/javascript.md b/static/usage/v8/alert/buttons/javascript.md
index 21a45f7cf4d..efd64d7f484 100644
--- a/static/usage/v8/alert/buttons/javascript.md
+++ b/static/usage/v8/alert/buttons/javascript.md
@@ -22,8 +22,8 @@
     },
   ];
 
-  alert.addEventListener('ionAlertDidDismiss', (ev) => {
-    console.log(`Dismissed with role: ${ev.detail.role}`);
+  alert.addEventListener('ionAlertDidDismiss', (event) => {
+    console.log(`Dismissed with role: ${event.detail.role}`);
   });
 </script>
 ```
diff --git a/static/usage/v8/alert/buttons/vue.md b/static/usage/v8/alert/buttons/vue.md
index 245797ab7c1..72b684fe4c4 100644
--- a/static/usage/v8/alert/buttons/vue.md
+++ b/static/usage/v8/alert/buttons/vue.md
@@ -29,8 +29,8 @@
     },
   ];
 
-  const logResult = (ev: CustomEvent) => {
-    console.log(`Dismissed with role: ${ev.detail.role}`);
+  const logResult = (event: CustomEvent) => {
+    console.log(`Dismissed with role: ${event.detail.role}`);
   };
 </script>
 ```
diff --git a/static/usage/v8/animations/gesture/angular/example_component_ts.md b/static/usage/v8/animations/gesture/angular/example_component_ts.md
index 49bb9e92f64..e13a50cdb4b 100644
--- a/static/usage/v8/animations/gesture/angular/example_component_ts.md
+++ b/static/usage/v8/animations/gesture/angular/example_component_ts.md
@@ -26,23 +26,23 @@ export class ExampleComponent {
 
   constructor(private animationCtrl: AnimationController, private gestureCtrl: GestureController) {}
 
-  private onMove(ev: GestureDetail) {
+  private onMove(event: GestureDetail) {
     if (!this.started) {
       this.animation.progressStart();
       this.started = true;
     }
 
-    this.animation.progressStep(this.getStep(ev));
+    this.animation.progressStep(this.getStep(event));
   }
 
-  private onEnd(ev: GestureDetail) {
+  private onEnd(event: GestureDetail) {
     if (!this.started) {
       return;
     }
 
     this.gesture.enable(false);
 
-    const step = this.getStep(ev);
+    const step = this.getStep(event);
     const shouldComplete = step > 0.5;
 
     this.animation.progressEnd(shouldComplete ? 1 : 0, step).onFinish(() => {
@@ -57,8 +57,8 @@ export class ExampleComponent {
     return Math.max(min, Math.min(n, max));
   }
 
-  private getStep(ev: GestureDetail) {
-    const delta = this.initialStep + ev.deltaX;
+  private getStep(event: GestureDetail) {
+    const delta = this.initialStep + event.deltaX;
     return this.clamp(0, delta / this.MAX_TRANSLATE, 1);
   }
 
@@ -73,8 +73,8 @@ export class ExampleComponent {
       el: this.card.nativeElement,
       threshold: 0,
       gestureName: 'card-drag',
-      onMove: (ev) => this.onMove(ev),
-      onEnd: (ev) => this.onEnd(ev),
+      onMove: (event) => this.onMove(event),
+      onEnd: (event) => this.onEnd(event),
     }));
 
     gesture.enable(true);
diff --git a/static/usage/v8/animations/gesture/demo.html b/static/usage/v8/animations/gesture/demo.html
index 14515b16303..5fefafc8ed2 100644
--- a/static/usage/v8/animations/gesture/demo.html
+++ b/static/usage/v8/animations/gesture/demo.html
@@ -37,29 +37,29 @@
         el: card,
         threshold: 0,
         gestureName: 'card-drag',
-        onMove: (ev) => onMove(ev),
-        onEnd: (ev) => onEnd(ev),
+        onMove: (event) => onMove(event),
+        onEnd: (event) => onEnd(event),
       });
 
       gesture.enable(true);
 
-      const onMove = (ev) => {
+      const onMove = (event) => {
         if (!started) {
           animation.progressStart();
           started = true;
         }
 
-        animation.progressStep(getStep(ev));
+        animation.progressStep(getStep(event));
       };
 
-      const onEnd = (ev) => {
+      const onEnd = (event) => {
         if (!started) {
           return;
         }
 
         gesture.enable(false);
 
-        const step = getStep(ev);
+        const step = getStep(event);
         const shouldComplete = step > 0.5;
 
         animation.progressEnd(shouldComplete ? 1 : 0, step).onFinish(() => {
@@ -74,8 +74,8 @@
         return Math.max(min, Math.min(n, max));
       };
 
-      const getStep = (ev) => {
-        const delta = initialStep + ev.deltaX;
+      const getStep = (event) => {
+        const delta = initialStep + event.deltaX;
         return clamp(0, delta / MAX_TRANSLATE, 1);
       };
     </script>
diff --git a/static/usage/v8/animations/gesture/javascript.md b/static/usage/v8/animations/gesture/javascript.md
index 3535705d5eb..6037b6340f2 100644
--- a/static/usage/v8/animations/gesture/javascript.md
+++ b/static/usage/v8/animations/gesture/javascript.md
@@ -53,29 +53,29 @@
     el: card,
     threshold: 0,
     gestureName: 'card-drag',
-    onMove: (ev) => onMove(ev),
-    onEnd: (ev) => onEnd(ev),
+    onMove: (event) => onMove(event),
+    onEnd: (event) => onEnd(event),
   });
 
   gesture.enable(true);
 
-  var onMove = (ev) => {
+  var onMove = (event) => {
     if (!started) {
       animation.progressStart();
       started = true;
     }
 
-    animation.progressStep(getStep(ev));
+    animation.progressStep(getStep(event));
   };
 
-  var onEnd = (ev) => {
+  var onEnd = (event) => {
     if (!started) {
       return;
     }
 
     gesture.enable(false);
 
-    const step = getStep(ev);
+    const step = getStep(event);
     const shouldComplete = step > 0.5;
 
     animation.progressEnd(shouldComplete ? 1 : 0, step).onFinish(() => {
@@ -90,8 +90,8 @@
     return Math.max(min, Math.min(n, max));
   };
 
-  var getStep = (ev) => {
-    const delta = initialStep + ev.deltaX;
+  var getStep = (event) => {
+    const delta = initialStep + event.deltaX;
     return clamp(0, delta / MAX_TRANSLATE, 1);
   };
 </script>
diff --git a/static/usage/v8/animations/gesture/react/main_tsx.md b/static/usage/v8/animations/gesture/react/main_tsx.md
index 73fca7dfe22..730e8a47212 100644
--- a/static/usage/v8/animations/gesture/react/main_tsx.md
+++ b/static/usage/v8/animations/gesture/react/main_tsx.md
@@ -30,29 +30,29 @@ function Example() {
         el: cardEl.current!,
         threshold: 0,
         gestureName: 'card-drag',
-        onMove: (ev) => onMove(ev),
-        onEnd: (ev) => onEnd(ev),
+        onMove: (event) => onMove(event),
+        onEnd: (event) => onEnd(event),
       });
 
       gesture.current.enable(true);
 
-      const onMove = (ev: GestureDetail) => {
+      const onMove = (event: GestureDetail) => {
         if (!started.current) {
           animation.current!.progressStart();
           started.current = true;
         }
 
-        animation.current!.progressStep(getStep(ev));
+        animation.current!.progressStep(getStep(event));
       };
 
-      const onEnd = (ev: GestureDetail) => {
+      const onEnd = (event: GestureDetail) => {
         if (!started.current) {
           return;
         }
 
         gesture.current!.enable(false);
 
-        const step = getStep(ev);
+        const step = getStep(event);
         const shouldComplete = step > 0.5;
 
         animation.current!.progressEnd(shouldComplete ? 1 : 0, step).onFinish(() => {
@@ -67,8 +67,8 @@ function Example() {
         return Math.max(min, Math.min(n, max));
       };
 
-      const getStep = (ev: GestureDetail) => {
-        const delta = initialStep.current + ev.deltaX;
+      const getStep = (event: GestureDetail) => {
+        const delta = initialStep.current + event.deltaX;
         return clamp(0, delta / MAX_TRANSLATE, 1);
       };
     }
diff --git a/static/usage/v8/animations/gesture/vue.md b/static/usage/v8/animations/gesture/vue.md
index 9555355fe48..8ac4d91dafc 100644
--- a/static/usage/v8/animations/gesture/vue.md
+++ b/static/usage/v8/animations/gesture/vue.md
@@ -44,29 +44,29 @@
           el: card,
           threshold: 0,
           gestureName: 'card-drag',
-          onMove: (ev) => onMove(ev),
-          onEnd: (ev) => onEnd(ev),
+          onMove: (event) => onMove(event),
+          onEnd: (event) => onEnd(event),
         });
 
         gesture.enable(true);
 
-        const onMove = (ev: GestureDetail) => {
+        const onMove = (event: GestureDetail) => {
           if (!started) {
             animation.progressStart();
             started = true;
           }
 
-          animation.progressStep(getStep(ev));
+          animation.progressStep(getStep(event));
         };
 
-        const onEnd = (ev: GestureDetail) => {
+        const onEnd = (event: GestureDetail) => {
           if (!started) {
             return;
           }
 
           gesture.enable(false);
 
-          const step = getStep(ev);
+          const step = getStep(event);
           const shouldComplete = step > 0.5;
 
           animation.progressEnd(shouldComplete ? 1 : 0, step).onFinish(() => {
@@ -81,8 +81,8 @@
           return Math.max(min, Math.min(n, max));
         };
 
-        const getStep = (ev: GestureDetail) => {
-          const delta = initialStep + ev.deltaX;
+        const getStep = (event: GestureDetail) => {
+          const delta = initialStep + event.deltaX;
           return clamp(0, delta / MAX_TRANSLATE, 1);
         };
       });
diff --git a/static/usage/v8/common.js b/static/usage/v8/common.js
index 1c84b69d961..0047419a322 100644
--- a/static/usage/v8/common.js
+++ b/static/usage/v8/common.js
@@ -19,8 +19,8 @@ window.addEventListener('DOMContentLoaded', () => {
    * the demos loaded in iframes can match the
    * docs website theme.
    */
-  window.addEventListener('message', (ev) => {
-    const { data } = ev;
+  window.addEventListener('message', (event) => {
+    const { data } = event;
 
     if (data.darkMode) {
       document.documentElement.classList.add('ion-theme-dark');
@@ -78,8 +78,8 @@ window.addEventListener('DOMContentLoaded', () => {
    * already created so that it does not wait on an event
    * that was already fired.
    */
-  const ev = new CustomEvent('demoReady');
-  window.dispatchEvent(ev);
+  const event = new CustomEvent('demoReady');
+  window.dispatchEvent(event);
 
   window.demoReady = true;
 });
diff --git a/static/usage/v8/content/scroll-events/angular/example_component_ts.md b/static/usage/v8/content/scroll-events/angular/example_component_ts.md
index 248333cb201..58a9275d49f 100644
--- a/static/usage/v8/content/scroll-events/angular/example_component_ts.md
+++ b/static/usage/v8/content/scroll-events/angular/example_component_ts.md
@@ -13,8 +13,8 @@ export class ExampleComponent {
     console.log('scroll start');
   }
 
-  handleScroll(ev: CustomEvent<ScrollDetail>) {
-    console.log('scroll', JSON.stringify(ev.detail));
+  handleScroll(event: CustomEvent<ScrollDetail>) {
+    console.log('scroll', JSON.stringify(event.detail));
   }
 
   handleScrollEnd() {
diff --git a/static/usage/v8/content/scroll-events/demo.html b/static/usage/v8/content/scroll-events/demo.html
index e2e0d1c7550..696b4316c85 100644
--- a/static/usage/v8/content/scroll-events/demo.html
+++ b/static/usage/v8/content/scroll-events/demo.html
@@ -70,7 +70,7 @@ <h1>Scroll to fire the scroll events and view them in the console.</h1>
       content.scrollEvents = true;
 
       content.addEventListener('ionScrollStart', () => console.log('scroll start'));
-      content.addEventListener('ionScroll', (ev) => console.log('scroll', JSON.stringify(ev.detail)));
+      content.addEventListener('ionScroll', (event) => console.log('scroll', JSON.stringify(event.detail)));
       content.addEventListener('ionScrollEnd', () => console.log('scroll end'));
     </script>
   </body>
diff --git a/static/usage/v8/content/scroll-events/javascript.md b/static/usage/v8/content/scroll-events/javascript.md
index 822a1b04f81..f143544dbfc 100644
--- a/static/usage/v8/content/scroll-events/javascript.md
+++ b/static/usage/v8/content/scroll-events/javascript.md
@@ -56,7 +56,7 @@
   content.scrollEvents = true;
 
   content.addEventListener('ionScrollStart', () => console.log('scroll start'));
-  content.addEventListener('ionScroll', (ev) => console.log('scroll', JSON.stringify(ev.detail)));
+  content.addEventListener('ionScroll', (event) => console.log('scroll', JSON.stringify(event.detail)));
   content.addEventListener('ionScrollEnd', () => console.log('scroll end'));
 </script>
 ```
diff --git a/static/usage/v8/content/scroll-events/react.md b/static/usage/v8/content/scroll-events/react.md
index 4247de13b39..43b7a7e31ee 100644
--- a/static/usage/v8/content/scroll-events/react.md
+++ b/static/usage/v8/content/scroll-events/react.md
@@ -7,8 +7,8 @@ function Example() {
     console.log('scroll start');
   }
 
-  function handleScroll(ev: CustomEvent<ScrollDetail>) {
-    console.log('scroll', JSON.stringify(ev.detail));
+  function handleScroll(event: CustomEvent<ScrollDetail>) {
+    console.log('scroll', JSON.stringify(event.detail));
   }
 
   function handleScrollEnd() {
diff --git a/static/usage/v8/content/scroll-events/vue.md b/static/usage/v8/content/scroll-events/vue.md
index 1b8bada7d57..bc1b5daaa41 100644
--- a/static/usage/v8/content/scroll-events/vue.md
+++ b/static/usage/v8/content/scroll-events/vue.md
@@ -68,8 +68,8 @@
       handleScrollStart() {
         console.log('scroll start');
       },
-      handleScroll(ev: CustomEvent) {
-        console.log('scroll', JSON.stringify(ev.detail));
+      handleScroll(event: CustomEvent) {
+        console.log('scroll', JSON.stringify(event.detail));
       },
       handleScrollEnd() {
         console.log('scroll end');
diff --git a/static/usage/v8/fab/before-content/angular/example_component_ts.md b/static/usage/v8/fab/before-content/angular/example_component_ts.md
index f77b2189490..2d72b2217a5 100644
--- a/static/usage/v8/fab/before-content/angular/example_component_ts.md
+++ b/static/usage/v8/fab/before-content/angular/example_component_ts.md
@@ -57,10 +57,10 @@ export class ExampleComponent implements OnInit {
     }
   }
 
-  onIonInfinite(ev: InfiniteScrollCustomEvent) {
+  onIonInfinite(event: InfiniteScrollCustomEvent) {
     this.generateItems();
     setTimeout(() => {
-      ev.target.complete();
+      event.target.complete();
     }, 500);
   }
 }
diff --git a/static/usage/v8/fab/before-content/react.md b/static/usage/v8/fab/before-content/react.md
index b3eef14cc40..15ef68be93e 100644
--- a/static/usage/v8/fab/before-content/react.md
+++ b/static/usage/v8/fab/before-content/react.md
@@ -47,9 +47,9 @@ function Example() {
         ))}
       </IonList>
       <IonInfiniteScroll
-        onIonInfinite={(ev) => {
+        onIonInfinite={(event) => {
           generateItems();
-          setTimeout(() => ev.target.complete(), 500);
+          setTimeout(() => event.target.complete(), 500);
         }}
       >
         <IonInfiniteScrollContent></IonInfiniteScrollContent>
diff --git a/static/usage/v8/fab/before-content/vue.md b/static/usage/v8/fab/before-content/vue.md
index f8ff0c5ae4f..76c32e940fa 100644
--- a/static/usage/v8/fab/before-content/vue.md
+++ b/static/usage/v8/fab/before-content/vue.md
@@ -61,9 +61,9 @@
         }
       };
 
-      const ionInfinite = (ev: InfiniteScrollCustomEvent) => {
+      const ionInfinite = (event: InfiniteScrollCustomEvent) => {
         generateItems();
-        setTimeout(() => ev.target.complete(), 500);
+        setTimeout(() => event.target.complete(), 500);
       };
 
       generateItems();
diff --git a/static/usage/v8/infinite-scroll/basic/angular/example_component_ts.md b/static/usage/v8/infinite-scroll/basic/angular/example_component_ts.md
index 7c35aba2138..94a8fa83721 100644
--- a/static/usage/v8/infinite-scroll/basic/angular/example_component_ts.md
+++ b/static/usage/v8/infinite-scroll/basic/angular/example_component_ts.md
@@ -31,10 +31,10 @@ export class ExampleComponent implements OnInit {
     }
   }
 
-  onIonInfinite(ev: InfiniteScrollCustomEvent) {
+  onIonInfinite(event: InfiniteScrollCustomEvent) {
     this.generateItems();
     setTimeout(() => {
-      ev.target.complete();
+      event.target.complete();
     }, 500);
   }
 }
diff --git a/static/usage/v8/infinite-scroll/basic/react.md b/static/usage/v8/infinite-scroll/basic/react.md
index c12032a6540..145aa32dd47 100644
--- a/static/usage/v8/infinite-scroll/basic/react.md
+++ b/static/usage/v8/infinite-scroll/basic/react.md
@@ -39,9 +39,9 @@ function Example() {
         ))}
       </IonList>
       <IonInfiniteScroll
-        onIonInfinite={(ev) => {
+        onIonInfinite={(event) => {
           generateItems();
-          setTimeout(() => ev.target.complete(), 500);
+          setTimeout(() => event.target.complete(), 500);
         }}
       >
         <IonInfiniteScrollContent></IonInfiniteScrollContent>
diff --git a/static/usage/v8/infinite-scroll/basic/vue.md b/static/usage/v8/infinite-scroll/basic/vue.md
index dc7a7c45f46..61c08173971 100644
--- a/static/usage/v8/infinite-scroll/basic/vue.md
+++ b/static/usage/v8/infinite-scroll/basic/vue.md
@@ -51,9 +51,9 @@
         }
       };
 
-      const ionInfinite = (ev: InfiniteScrollCustomEvent) => {
+      const ionInfinite = (event: InfiniteScrollCustomEvent) => {
         generateItems();
-        setTimeout(() => ev.target.complete(), 500);
+        setTimeout(() => event.target.complete(), 500);
       };
 
       generateItems();
diff --git a/static/usage/v8/input/filtering/angular/example_component_ts.md b/static/usage/v8/input/filtering/angular/example_component_ts.md
index 19554af7c42..c5306e0012c 100644
--- a/static/usage/v8/input/filtering/angular/example_component_ts.md
+++ b/static/usage/v8/input/filtering/angular/example_component_ts.md
@@ -13,8 +13,8 @@ export class ExampleComponent {
 
   @ViewChild('ionInputEl', { static: true }) ionInputEl!: IonInput;
 
-  onInput(ev: CustomEvent) {
-    const value = (ev.target as HTMLIonInputElement).value ?? '';
+  onInput(event: CustomEvent) {
+    const value = (event.target as HTMLIonInputElement).value ?? '';
 
     // Removes non alphanumeric characters
     const filteredValue = (value as string).replace(/[^a-zA-Z0-9]+/g, '');
diff --git a/static/usage/v8/input/filtering/demo.html b/static/usage/v8/input/filtering/demo.html
index deadb9f3189..e5f3a58c562 100644
--- a/static/usage/v8/input/filtering/demo.html
+++ b/static/usage/v8/input/filtering/demo.html
@@ -25,8 +25,8 @@
 
     <script>
       const input = document.querySelector('ion-input');
-      input.addEventListener('ionInput', (ev) => {
-        const value = ev.target.value;
+      input.addEventListener('ionInput', (event) => {
+        const value = event.target.value;
 
         // Removes non alphanumeric characters
         input.value = value.replace(/[^a-zA-Z0-9]+/g, '');
diff --git a/static/usage/v8/input/filtering/javascript.md b/static/usage/v8/input/filtering/javascript.md
index 37af94dd426..8b17b16723b 100644
--- a/static/usage/v8/input/filtering/javascript.md
+++ b/static/usage/v8/input/filtering/javascript.md
@@ -7,8 +7,8 @@
 
 <script>
   var input = document.querySelector('ion-input');
-  input.addEventListener('ionInput', (ev) => {
-    const value = ev.target.value;
+  input.addEventListener('ionInput', (event) => {
+    const value = event.target.value;
     // Removes non alphanumeric characters
     input.value = value.replace(/[^a-zA-Z0-9]+/g, '');
   });
diff --git a/static/usage/v8/input/filtering/react.md b/static/usage/v8/input/filtering/react.md
index 1722f8ad9af..af36ce43c2b 100644
--- a/static/usage/v8/input/filtering/react.md
+++ b/static/usage/v8/input/filtering/react.md
@@ -6,8 +6,8 @@ function Example() {
   const [inputModel, setInputModel] = useState('');
   const ionInputEl = useRef<HTMLIonInputElement>(null);
 
-  const onInput = (ev: Event) => {
-    const value = (ev.target as HTMLIonInputElement).value as string;
+  const onInput = (event: Event) => {
+    const value = (event.target as HTMLIonInputElement).value as string;
 
     // Removes non alphanumeric characters
     const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, '');
diff --git a/static/usage/v8/input/filtering/vue.md b/static/usage/v8/input/filtering/vue.md
index a95e5dcc843..8335d386636 100644
--- a/static/usage/v8/input/filtering/vue.md
+++ b/static/usage/v8/input/filtering/vue.md
@@ -21,8 +21,8 @@
     setup() {
       const ionInputEl = ref();
       const inputModel = ref('');
-      const onInput = (ev) => {
-        const value = ev.target!.value;
+      const onInput = (event) => {
+        const value = event.target!.value;
 
         // Removes non alphanumeric characters
         const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, '');
diff --git a/static/usage/v8/input/helper-error/demo.html b/static/usage/v8/input/helper-error/demo.html
index 76a11e8be75..aeca87c3852 100644
--- a/static/usage/v8/input/helper-error/demo.html
+++ b/static/usage/v8/input/helper-error/demo.html
@@ -34,7 +34,7 @@
     <script>
       const input = document.querySelector('ion-input');
 
-      input.addEventListener('ionInput', (ev) => validate(ev));
+      input.addEventListener('ionInput', (event) => validate(event));
       input.addEventListener('ionBlur', () => markTouched());
 
       const validateEmail = (email) => {
@@ -43,8 +43,8 @@
         );
       };
 
-      const validate = (ev) => {
-        const value = ev.target.value;
+      const validate = (event) => {
+        const value = event.target.value;
 
         input.classList.remove('ion-valid');
         input.classList.remove('ion-invalid');
diff --git a/static/usage/v8/input/helper-error/javascript.md b/static/usage/v8/input/helper-error/javascript.md
index 6c1150bdb06..406f1e6e797 100644
--- a/static/usage/v8/input/helper-error/javascript.md
+++ b/static/usage/v8/input/helper-error/javascript.md
@@ -11,7 +11,7 @@
 <script>
   const input = document.querySelector('ion-input');
 
-  input.addEventListener('ionInput', (ev) => validate(ev));
+  input.addEventListener('ionInput', (event) => validate(event));
   input.addEventListener('ionBlur', () => markTouched());
 
   const validateEmail = (email) => {
@@ -20,8 +20,8 @@
     );
   };
 
-  const validate = (ev) => {
-    const value = ev.target.value;
+  const validate = (event) => {
+    const value = event.target.value;
 
     input.classList.remove('ion-valid');
     input.classList.remove('ion-invalid');
diff --git a/static/usage/v8/input/helper-error/react.md b/static/usage/v8/input/helper-error/react.md
index 0067c90dac9..88b2051f003 100644
--- a/static/usage/v8/input/helper-error/react.md
+++ b/static/usage/v8/input/helper-error/react.md
@@ -12,8 +12,8 @@ function Example() {
     );
   };
 
-  const validate = (ev: Event) => {
-    const value = (ev.target as HTMLInputElement).value;
+  const validate = (event: Event) => {
+    const value = (event.target as HTMLInputElement).value;
 
     setIsValid(undefined);
 
diff --git a/static/usage/v8/input/helper-error/vue.md b/static/usage/v8/input/helper-error/vue.md
index ce801d04ac7..e4f5ef538b6 100644
--- a/static/usage/v8/input/helper-error/vue.md
+++ b/static/usage/v8/input/helper-error/vue.md
@@ -26,8 +26,8 @@
         );
       },
 
-      validate(ev) {
-        const value = ev.target.value;
+      validate(event) {
+        const value = event.target.value;
 
         this.$refs.input.$el.classList.remove('ion-valid');
         this.$refs.input.$el.classList.remove('ion-invalid');
diff --git a/static/usage/v8/menu/type/demo.html b/static/usage/v8/menu/type/demo.html
index 7d8b90230a1..77f50fa39d5 100644
--- a/static/usage/v8/menu/type/demo.html
+++ b/static/usage/v8/menu/type/demo.html
@@ -62,8 +62,8 @@ <h2>Select an overlay type:</h2>
       const menu = document.querySelector('ion-menu');
       const radioGroup = document.querySelector('ion-radio-group');
 
-      radioGroup.addEventListener('ionChange', (ev) => {
-        menu.type = ev.detail.value;
+      radioGroup.addEventListener('ionChange', (event) => {
+        menu.type = event.detail.value;
       });
     </script>
   </body>
diff --git a/static/usage/v8/menu/type/javascript.md b/static/usage/v8/menu/type/javascript.md
index 100e2e2d091..a6b5b7e5fc1 100644
--- a/static/usage/v8/menu/type/javascript.md
+++ b/static/usage/v8/menu/type/javascript.md
@@ -48,8 +48,8 @@
   const menu = document.querySelector('ion-menu');
   const radioGroup = document.querySelector('ion-radio-group');
 
-  radioGroup.addEventListener('ionChange', (ev) => {
-    menu.type = ev.detail.value;
+  radioGroup.addEventListener('ionChange', (event) => {
+    menu.type = event.detail.value;
   });
 </script>
 ```
diff --git a/static/usage/v8/menu/type/react.md b/static/usage/v8/menu/type/react.md
index 3caca163c30..af341a0e753 100644
--- a/static/usage/v8/menu/type/react.md
+++ b/static/usage/v8/menu/type/react.md
@@ -42,8 +42,8 @@ function Example() {
           <h2>Select an overlay type:</h2>
           <IonRadioGroup
             value={menuType}
-            onIonChange={(ev: RadioGroupCustomEvent) => {
-              setMenuType(ev.detail.value);
+            onIonChange={(event: RadioGroupCustomEvent) => {
+              setMenuType(event.detail.value);
             }}
           >
             <IonItem>
diff --git a/static/usage/v8/modal/can-dismiss/boolean/angular/example_component_ts.md b/static/usage/v8/modal/can-dismiss/boolean/angular/example_component_ts.md
index eeb7aa9fce5..344baa479b4 100644
--- a/static/usage/v8/modal/can-dismiss/boolean/angular/example_component_ts.md
+++ b/static/usage/v8/modal/can-dismiss/boolean/angular/example_component_ts.md
@@ -28,9 +28,8 @@ export class ExampleComponent {
     this.presentingElement = document.querySelector('.ion-page');
   }
 
-  onTermsChanged(event: Event) {
-    const ev = event as CheckboxCustomEvent;
-    this.canDismiss = ev.detail.checked;
+  onTermsChanged(event: CheckboxCustomEvent) {
+    this.canDismiss = event.detail.checked;
   }
 }
 ```
diff --git a/static/usage/v8/modal/can-dismiss/boolean/demo.html b/static/usage/v8/modal/can-dismiss/boolean/demo.html
index 09d67874029..530926ccee0 100644
--- a/static/usage/v8/modal/can-dismiss/boolean/demo.html
+++ b/static/usage/v8/modal/can-dismiss/boolean/demo.html
@@ -55,8 +55,8 @@
 
       modal.addEventListener('didPresent', () => {
         const terms = document.getElementById('terms');
-        terms.addEventListener('ionChange', (ev) => {
-          modal.canDismiss = ev.detail.checked;
+        terms.addEventListener('ionChange', (event) => {
+          modal.canDismiss = event.detail.checked;
         });
       });
     </script>
diff --git a/static/usage/v8/modal/can-dismiss/boolean/javascript.md b/static/usage/v8/modal/can-dismiss/boolean/javascript.md
index af2ab152fc9..3dde7734e5a 100644
--- a/static/usage/v8/modal/can-dismiss/boolean/javascript.md
+++ b/static/usage/v8/modal/can-dismiss/boolean/javascript.md
@@ -41,8 +41,8 @@
 
   modal.addEventListener('didPresent', () => {
     var terms = document.getElementById('terms');
-    terms.addEventListener('ionChange', (ev) => {
-      modal.canDismiss = ev.detail.checked;
+    terms.addEventListener('ionChange', (event) => {
+      modal.canDismiss = event.detail.checked;
     });
   });
 </script>
diff --git a/static/usage/v8/modal/can-dismiss/boolean/react.md b/static/usage/v8/modal/can-dismiss/boolean/react.md
index f136b0e28fb..0b817b8f185 100644
--- a/static/usage/v8/modal/can-dismiss/boolean/react.md
+++ b/static/usage/v8/modal/can-dismiss/boolean/react.md
@@ -54,8 +54,8 @@ function Example() {
               <IonCheckbox
                 id="terms"
                 checked={canDismiss}
-                onIonChange={(ev) => {
-                  setCanDismiss(ev.detail.checked);
+                onIonChange={(event) => {
+                  setCanDismiss(event.detail.checked);
                 }}
               >
                 <div className="ion-text-wrap">Do you accept the terms and conditions?</div>
diff --git a/static/usage/v8/modal/can-dismiss/boolean/vue.md b/static/usage/v8/modal/can-dismiss/boolean/vue.md
index 3504c7230cd..1944ce5eb21 100644
--- a/static/usage/v8/modal/can-dismiss/boolean/vue.md
+++ b/static/usage/v8/modal/can-dismiss/boolean/vue.md
@@ -70,8 +70,8 @@
       dismiss() {
         this.$refs.modal.$el.dismiss();
       },
-      onTermsChanged(ev: CheckboxCustomEvent) {
-        this.canDismiss = ev.detail.checked;
+      onTermsChanged(event: CheckboxCustomEvent) {
+        this.canDismiss = event.detail.checked;
       },
     },
     mounted() {
diff --git a/static/usage/v8/modal/can-dismiss/child-state/react/child_tsx.md b/static/usage/v8/modal/can-dismiss/child-state/react/child_tsx.md
index 35035eb357e..f87706f75cf 100644
--- a/static/usage/v8/modal/can-dismiss/child-state/react/child_tsx.md
+++ b/static/usage/v8/modal/can-dismiss/child-state/react/child_tsx.md
@@ -20,8 +20,8 @@ interface ChildProps {
 }
 
 function Child({ dismissChange, dismiss }: ChildProps) {
-  const checkboxChanged = (ev: CheckboxCustomEvent) => {
-    const checked = ev.detail.checked;
+  const checkboxChanged = (event: CheckboxCustomEvent) => {
+    const checked = event.detail.checked;
     dismissChange(checked);
   };
 
diff --git a/static/usage/v8/modal/can-dismiss/child-state/react/main_tsx.md b/static/usage/v8/modal/can-dismiss/child-state/react/main_tsx.md
index d8db547e7f9..5657089983f 100644
--- a/static/usage/v8/modal/can-dismiss/child-state/react/main_tsx.md
+++ b/static/usage/v8/modal/can-dismiss/child-state/react/main_tsx.md
@@ -52,8 +52,8 @@ function Example() {
             role: 'cancel',
           },
         ],
-        onWillDismiss: (ev) => {
-          if (ev.detail.role === 'confirm') {
+        onWillDismiss: (event) => {
+          if (event.detail.role === 'confirm') {
             resolve(true);
           } else {
             reject();
diff --git a/static/usage/v8/modal/can-dismiss/child-state/vue/child_vue.md b/static/usage/v8/modal/can-dismiss/child-state/vue/child_vue.md
index 6c402f88a98..ffbb483864e 100644
--- a/static/usage/v8/modal/can-dismiss/child-state/vue/child_vue.md
+++ b/static/usage/v8/modal/can-dismiss/child-state/vue/child_vue.md
@@ -43,8 +43,8 @@
     props.modal.$el.dismiss();
   };
 
-  const checkboxChanged = (ev) => {
-    const checked = ev.detail.checked;
+  const checkboxChanged = (event) => {
+    const checked = event.detail.checked;
     emit('dismissChange', checked);
   };
 </script>
diff --git a/static/usage/v8/modal/can-dismiss/function/react.md b/static/usage/v8/modal/can-dismiss/function/react.md
index 9ef7f6f682b..bed9be270d4 100644
--- a/static/usage/v8/modal/can-dismiss/function/react.md
+++ b/static/usage/v8/modal/can-dismiss/function/react.md
@@ -41,8 +41,8 @@ function Example() {
             role: 'cancel',
           },
         ],
-        onWillDismiss: (ev) => {
-          if (ev.detail.role === 'confirm') {
+        onWillDismiss: (event) => {
+          if (event.detail.role === 'confirm') {
             resolve(true);
           } else {
             reject();
diff --git a/static/usage/v8/modal/controller/react.md b/static/usage/v8/modal/controller/react.md
index 6bcf8749560..0cb92e7ad36 100644
--- a/static/usage/v8/modal/controller/react.md
+++ b/static/usage/v8/modal/controller/react.md
@@ -50,9 +50,9 @@ function Example() {
 
   function openModal() {
     present({
-      onWillDismiss: (ev: CustomEvent<OverlayEventDetail>) => {
-        if (ev.detail.role === 'confirm') {
-          setMessage(`Hello, ${ev.detail.data}!`);
+      onWillDismiss: (event: CustomEvent<OverlayEventDetail>) => {
+        if (event.detail.role === 'confirm') {
+          setMessage(`Hello, ${event.detail.data}!`);
         }
       },
     });
diff --git a/static/usage/v8/modal/inline/basic/angular/example_component_ts.md b/static/usage/v8/modal/inline/basic/angular/example_component_ts.md
index ab087edaadd..283bb0023fd 100644
--- a/static/usage/v8/modal/inline/basic/angular/example_component_ts.md
+++ b/static/usage/v8/modal/inline/basic/angular/example_component_ts.md
@@ -45,10 +45,9 @@ export class ExampleComponent {
     this.modal.dismiss(this.name, 'confirm');
   }
 
-  onWillDismiss(event: Event) {
-    const ev = event as CustomEvent<OverlayEventDetail<string>>;
-    if (ev.detail.role === 'confirm') {
-      this.message = `Hello, ${ev.detail.data}!`;
+  onWillDismiss(event: CustomEvent<OverlayEventDetail>) {
+    if (event.detail.role === 'confirm') {
+      this.message = `Hello, ${event.detail.data}!`;
     }
   }
 }
diff --git a/static/usage/v8/modal/inline/basic/demo.html b/static/usage/v8/modal/inline/basic/demo.html
index b8d9c85f745..48bdf4053be 100644
--- a/static/usage/v8/modal/inline/basic/demo.html
+++ b/static/usage/v8/modal/inline/basic/demo.html
@@ -58,10 +58,10 @@
         modal.dismiss(input.value, 'confirm');
       }
 
-      modal.addEventListener('willDismiss', (ev) => {
-        if (ev.detail.role === 'confirm') {
+      modal.addEventListener('willDismiss', (event) => {
+        if (event.detail.role === 'confirm') {
           const message = document.querySelector('#message');
-          message.textContent = `Hello ${ev.detail.data}!`;
+          message.textContent = `Hello ${event.detail.data}!`;
         }
       });
     </script>
diff --git a/static/usage/v8/modal/inline/basic/javascript.md b/static/usage/v8/modal/inline/basic/javascript.md
index 318f29e7611..754e94ca639 100644
--- a/static/usage/v8/modal/inline/basic/javascript.md
+++ b/static/usage/v8/modal/inline/basic/javascript.md
@@ -39,10 +39,10 @@
     modal.dismiss(input.value, 'confirm');
   }
 
-  modal.addEventListener('willDismiss', (ev) => {
-    if (ev.detail.role === 'confirm') {
+  modal.addEventListener('willDismiss', (event) => {
+    if (event.detail.role === 'confirm') {
       const message = document.querySelector('#message');
-      message.textContent = `Hello ${ev.detail.data}!`;
+      message.textContent = `Hello ${event.detail.data}!`;
     }
   });
 </script>
diff --git a/static/usage/v8/modal/inline/basic/react.md b/static/usage/v8/modal/inline/basic/react.md
index 1ca9670066a..0ca73d66844 100644
--- a/static/usage/v8/modal/inline/basic/react.md
+++ b/static/usage/v8/modal/inline/basic/react.md
@@ -26,9 +26,9 @@ function Example() {
     modal.current?.dismiss(input.current?.value, 'confirm');
   }
 
-  function onWillDismiss(ev: CustomEvent<OverlayEventDetail>) {
-    if (ev.detail.role === 'confirm') {
-      setMessage(`Hello, ${ev.detail.data}!`);
+  function onWillDismiss(event: CustomEvent<OverlayEventDetail>) {
+    if (event.detail.role === 'confirm') {
+      setMessage(`Hello, ${event.detail.data}!`);
     }
   }
 
@@ -44,7 +44,7 @@ function Example() {
           Open
         </IonButton>
         <p>{message}</p>
-        <IonModal ref={modal} trigger="open-modal" onWillDismiss={(ev) => onWillDismiss(ev)}>
+        <IonModal ref={modal} trigger="open-modal" onWillDismiss={(event) => onWillDismiss(event)}>
           <IonHeader>
             <IonToolbar>
               <IonButtons slot="start">
diff --git a/static/usage/v8/modal/inline/basic/vue.md b/static/usage/v8/modal/inline/basic/vue.md
index 5aac3115a1d..50bad5487a4 100644
--- a/static/usage/v8/modal/inline/basic/vue.md
+++ b/static/usage/v8/modal/inline/basic/vue.md
@@ -62,9 +62,9 @@
     modal.value.$el.dismiss(name, 'confirm');
   };
 
-  const onWillDismiss = (ev: CustomEvent<OverlayEventDetail>) => {
-    if (ev.detail.role === 'confirm') {
-      message.value = `Hello, ${ev.detail.data}!`;
+  const onWillDismiss = (event: CustomEvent<OverlayEventDetail>) => {
+    if (event.detail.role === 'confirm') {
+      message.value = `Hello, ${event.detail.data}!`;
     }
   };
 </script>
diff --git a/static/usage/v8/picker-legacy/inline/isOpen/demo.html b/static/usage/v8/picker-legacy/inline/isOpen/demo.html
index b1959269d0e..c3bae2a860f 100644
--- a/static/usage/v8/picker-legacy/inline/isOpen/demo.html
+++ b/static/usage/v8/picker-legacy/inline/isOpen/demo.html
@@ -59,7 +59,7 @@
         },
       ];
 
-      picker.addEventListener('ionPickerDidDismiss', (ev) => {
+      picker.addEventListener('ionPickerDidDismiss', (event) => {
         picker.isOpen = false;
       });
     </script>
diff --git a/static/usage/v8/picker-legacy/inline/isOpen/javascript.md b/static/usage/v8/picker-legacy/inline/isOpen/javascript.md
index 53031bd60b6..6d78b7cb89a 100644
--- a/static/usage/v8/picker-legacy/inline/isOpen/javascript.md
+++ b/static/usage/v8/picker-legacy/inline/isOpen/javascript.md
@@ -42,7 +42,7 @@
     },
   ];
 
-  picker.addEventListener('ionPickerDidDismiss', (ev) => {
+  picker.addEventListener('ionPickerDidDismiss', (event) => {
     picker.isOpen = false;
   });
 </script>
diff --git a/static/usage/v8/popover/presenting/controller/vue/example_vue.md b/static/usage/v8/popover/presenting/controller/vue/example_vue.md
index c477a870895..538479cee2f 100644
--- a/static/usage/v8/popover/presenting/controller/vue/example_vue.md
+++ b/static/usage/v8/popover/presenting/controller/vue/example_vue.md
@@ -10,10 +10,10 @@
   export default {
     components: { IonButton },
     methods: {
-      async openPopover(ev: Event) {
+      async openPopover(event: Event) {
         const popover = await popoverController.create({
           component: Popover,
-          event: ev,
+          event: event,
         });
         await popover.present();
 
diff --git a/static/usage/v8/radio/using-comparewith/angular/example_component_ts.md b/static/usage/v8/radio/using-comparewith/angular/example_component_ts.md
index 1158167fc16..4e969a433bb 100644
--- a/static/usage/v8/radio/using-comparewith/angular/example_component_ts.md
+++ b/static/usage/v8/radio/using-comparewith/angular/example_component_ts.md
@@ -37,8 +37,8 @@ export class ExampleComponent {
     return o1.id === o2.id;
   }
 
-  handleChange(ev: Event): void {
-    const target = ev.target as HTMLInputElement;
+  handleChange(event: Event): void {
+    const target = event.target as HTMLInputElement;
     console.log('Current value:', JSON.stringify(target.value));
   }
 }
diff --git a/static/usage/v8/radio/using-comparewith/react.md b/static/usage/v8/radio/using-comparewith/react.md
index dff3b4233a6..bbecd62f841 100644
--- a/static/usage/v8/radio/using-comparewith/react.md
+++ b/static/usage/v8/radio/using-comparewith/react.md
@@ -35,7 +35,7 @@ function Example() {
     <IonList>
       <IonRadioGroup
         compareWith={compareWith}
-        onIonChange={(ev) => console.log('Current value:', JSON.stringify(ev.detail.value))}
+        onIonChange={(event) => console.log('Current value:', JSON.stringify(event.detail.value))}
       >
         {foods.map((food) => (
           <IonItem>
diff --git a/static/usage/v8/radio/using-comparewith/vue.md b/static/usage/v8/radio/using-comparewith/vue.md
index 28518284654..d12db87e609 100644
--- a/static/usage/v8/radio/using-comparewith/vue.md
+++ b/static/usage/v8/radio/using-comparewith/vue.md
@@ -45,8 +45,8 @@
       compareWith(o1, o2) {
         return o1.id === o2.id;
       },
-      handleChange(ev) {
-        console.log('Current value:', JSON.stringify(ev.detail.value));
+      handleChange(event) {
+        console.log('Current value:', JSON.stringify(event.detail.value));
       },
     },
   });
diff --git a/static/usage/v8/range/ion-change-event/angular/example_component_ts.md b/static/usage/v8/range/ion-change-event/angular/example_component_ts.md
index e1502344095..b329cbbc601 100644
--- a/static/usage/v8/range/ion-change-event/angular/example_component_ts.md
+++ b/static/usage/v8/range/ion-change-event/angular/example_component_ts.md
@@ -9,8 +9,8 @@ import { IonRange, RangeCustomEvent } from '@ionic/angular/standalone';
   imports: [IonRange],
 })
 export class ExampleComponent {
-  onIonChange(ev: Event) {
-    console.log('ionChange emitted value:', (ev as RangeCustomEvent).detail.value);
+  onIonChange(event: RangeCustomEvent) {
+    console.log('ionChange emitted value:', event.detail.value);
   }
 }
 ```
diff --git a/static/usage/v8/range/ion-knob-move-event/angular/example_component_ts.md b/static/usage/v8/range/ion-knob-move-event/angular/example_component_ts.md
index b13b84b308d..cdfa78fc713 100644
--- a/static/usage/v8/range/ion-knob-move-event/angular/example_component_ts.md
+++ b/static/usage/v8/range/ion-knob-move-event/angular/example_component_ts.md
@@ -9,12 +9,12 @@ import { IonRange, RangeCustomEvent } from '@ionic/angular/standalone';
   imports: [IonRange],
 })
 export class ExampleComponent {
-  onIonKnobMoveStart(ev: Event) {
-    console.log('ionKnobMoveStart:', (ev as RangeCustomEvent).detail.value);
+  onIonKnobMoveStart(event: RangeCustomEvent) {
+    console.log('ionKnobMoveStart:', event.detail.value);
   }
 
-  onIonKnobMoveEnd(ev: Event) {
-    console.log('ionKnobMoveEnd:', (ev as RangeCustomEvent).detail.value);
+  onIonKnobMoveEnd(event: RangeCustomEvent) {
+    console.log('ionKnobMoveEnd:', event.detail.value);
   }
 }
 ```
diff --git a/static/usage/v8/reorder/basic/angular/example_component_ts.md b/static/usage/v8/reorder/basic/angular/example_component_ts.md
index a0e47f6b8b6..541fd9c6df3 100644
--- a/static/usage/v8/reorder/basic/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/basic/angular/example_component_ts.md
@@ -16,15 +16,15 @@ import {
   imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
-  handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
+  handleReorder(event: CustomEvent<ItemReorderEventDetail>) {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
-    console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
+    console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
 
     // Finish the reorder and position the item in the DOM based on
     // where the gesture ended. This method can also be called directly
     // by the reorder group
-    ev.detail.complete();
+    event.detail.complete();
   }
 }
 ```
diff --git a/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md b/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md
index d4f3cc02ac9..e9bdafd6df8 100644
--- a/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md
@@ -29,15 +29,15 @@ export class ExampleComponent {
     addIcons({ pizza });
   }
 
-  handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
+  handleReorder(event: CustomEvent<ItemReorderEventDetail>) {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
-    console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
+    console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
 
     // Finish the reorder and position the item in the DOM based on
     // where the gesture ended. This method can also be called directly
     // by the reorder group
-    ev.detail.complete();
+    event.detail.complete();
   }
 }
 ```
diff --git a/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md b/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md
index 4ebfef05c5a..bdd83c0417f 100644
--- a/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md
@@ -17,15 +17,15 @@ import {
   imports: [IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
-  handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
+  handleReorder(event: CustomEvent<ItemReorderEventDetail>) {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
-    console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
+    console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
 
     // Finish the reorder and position the item in the DOM based on
     // where the gesture ended. This method can also be called directly
     // by the reorder group
-    ev.detail.complete();
+    event.detail.complete();
   }
 }
 ```
diff --git a/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md b/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md
index 0914b726e0e..496e59f15e1 100644
--- a/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md
@@ -19,15 +19,15 @@ import {
 export class ExampleComponent {
   public isDisabled = true;
 
-  handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
+  handleReorder(event: CustomEvent<ItemReorderEventDetail>) {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
-    console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
+    console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
 
     // Finish the reorder and position the item in the DOM based on
     // where the gesture ended. This method can also be called directly
     // by the reorder group
-    ev.detail.complete();
+    event.detail.complete();
   }
 
   toggleReorder() {
diff --git a/static/usage/v8/reorder/updating-data/angular/example_component_ts.md b/static/usage/v8/reorder/updating-data/angular/example_component_ts.md
index bab1ace34d0..f70f2bed206 100644
--- a/static/usage/v8/reorder/updating-data/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/updating-data/angular/example_component_ts.md
@@ -18,7 +18,7 @@ import {
 export class ExampleComponent {
   items = [1, 2, 3, 4, 5];
 
-  handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
+  handleReorder(event: CustomEvent<ItemReorderEventDetail>) {
     // Before complete is called with the items they will remain in the
     // order before the drag
     console.log('Before complete', this.items);
@@ -26,7 +26,7 @@ export class ExampleComponent {
     // Finish the reorder and position the item in the DOM based on
     // where the gesture ended. Update the items variable to the
     // new order of items
-    this.items = ev.detail.complete(this.items);
+    this.items = event.detail.complete(this.items);
 
     // After complete is called the items will be in the new order
     console.log('After complete', this.items);
diff --git a/static/usage/v8/reorder/wrapper/angular/example_component_ts.md b/static/usage/v8/reorder/wrapper/angular/example_component_ts.md
index a0e47f6b8b6..541fd9c6df3 100644
--- a/static/usage/v8/reorder/wrapper/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/wrapper/angular/example_component_ts.md
@@ -16,15 +16,15 @@ import {
   imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
 })
 export class ExampleComponent {
-  handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
+  handleReorder(event: CustomEvent<ItemReorderEventDetail>) {
     // The `from` and `to` properties contain the index of the item
     // when the drag started and ended, respectively
-    console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
+    console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
 
     // Finish the reorder and position the item in the DOM based on
     // where the gesture ended. This method can also be called directly
     // by the reorder group
-    ev.detail.complete();
+    event.detail.complete();
   }
 }
 ```
diff --git a/static/usage/v8/searchbar/debounce/react.md b/static/usage/v8/searchbar/debounce/react.md
index 0aece7108d6..216dd64d726 100644
--- a/static/usage/v8/searchbar/debounce/react.md
+++ b/static/usage/v8/searchbar/debounce/react.md
@@ -17,9 +17,9 @@ function Example() {
   ];
   let [results, setResults] = useState([...data]);
 
-  const handleInput = (ev: Event) => {
+  const handleInput = (event: Event) => {
     let query = '';
-    const target = ev.target as HTMLIonSearchbarElement;
+    const target = event.target as HTMLIonSearchbarElement;
     if (target) query = target.value!.toLowerCase();
 
     setResults(data.filter((d) => d.toLowerCase().indexOf(query) > -1));
@@ -27,7 +27,7 @@ function Example() {
 
   return (
     <>
-      <IonSearchbar debounce={1000} onIonInput={(ev) => handleInput(ev)}></IonSearchbar>
+      <IonSearchbar debounce={1000} onIonInput={(event) => handleInput(event)}></IonSearchbar>
 
       <IonList>
         {results.map((result) => (
diff --git a/static/usage/v8/select/basic/responding-to-interaction/vue.md b/static/usage/v8/select/basic/responding-to-interaction/vue.md
index a12b3238c60..418fe0b426f 100644
--- a/static/usage/v8/select/basic/responding-to-interaction/vue.md
+++ b/static/usage/v8/select/basic/responding-to-interaction/vue.md
@@ -24,8 +24,8 @@
   export default defineComponent({
     components: { IonItem, IonList, IonSelect, IonSelectOption },
     methods: {
-      handleChange(ev) {
-        console.log('ionChange fired with value: ' + ev.detail.value);
+      handleChange(event) {
+        console.log('ionChange fired with value: ' + event.detail.value);
       },
       handleCancel() {
         console.log('ionCancel fired');
diff --git a/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_ts.md b/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_ts.md
index 976de91ea50..526527c0ff4 100644
--- a/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_ts.md
+++ b/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_ts.md
@@ -45,8 +45,8 @@ export class ExampleComponent {
     return o1.id === o2.id;
   }
 
-  handleChange(ev: Event) {
-    const target = ev.target as HTMLIonSelectElement;
+  handleChange(event: Event) {
+    const target = event.target as HTMLIonSelectElement;
     console.log('Current value:', JSON.stringify(target.value));
   }
 }
diff --git a/static/usage/v8/select/objects-as-values/multiple-selection/react.md b/static/usage/v8/select/objects-as-values/multiple-selection/react.md
index a41ed0c8670..3fc8c0d54f9 100644
--- a/static/usage/v8/select/objects-as-values/multiple-selection/react.md
+++ b/static/usage/v8/select/objects-as-values/multiple-selection/react.md
@@ -46,7 +46,7 @@ function Example() {
           aria-label="Food"
           placeholder="Select food"
           compareWith={compareWith}
-          onIonChange={(ev) => console.log('Current value:', JSON.stringify(ev.detail.value))}
+          onIonChange={(event) => console.log('Current value:', JSON.stringify(event.detail.value))}
           multiple={true}
         >
           {foods.map((food) => (
diff --git a/static/usage/v8/select/objects-as-values/multiple-selection/vue.md b/static/usage/v8/select/objects-as-values/multiple-selection/vue.md
index cf095fd89c0..b99b76d7a65 100644
--- a/static/usage/v8/select/objects-as-values/multiple-selection/vue.md
+++ b/static/usage/v8/select/objects-as-values/multiple-selection/vue.md
@@ -54,8 +54,8 @@
 
         return o1.id === o2.id;
       },
-      handleChange(ev) {
-        console.log('Current value:', JSON.stringify(ev.detail.value));
+      handleChange(event) {
+        console.log('Current value:', JSON.stringify(event.detail.value));
       },
     },
   });
diff --git a/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_ts.md b/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_ts.md
index e984a6f6544..f2010f15ddd 100644
--- a/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_ts.md
+++ b/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_ts.md
@@ -37,8 +37,8 @@ export class ExampleComponent {
     return o1 && o2 ? o1.id === o2.id : o1 === o2;
   }
 
-  handleChange(ev: Event) {
-    const target = ev.target as HTMLIonSelectElement;
+  handleChange(event: Event) {
+    const target = event.target as HTMLIonSelectElement;
     console.log('Current value:', JSON.stringify(target.value));
   }
 }
diff --git a/static/usage/v8/select/objects-as-values/using-comparewith/react.md b/static/usage/v8/select/objects-as-values/using-comparewith/react.md
index ff1fe016e84..ba3a3b7f556 100644
--- a/static/usage/v8/select/objects-as-values/using-comparewith/react.md
+++ b/static/usage/v8/select/objects-as-values/using-comparewith/react.md
@@ -38,7 +38,7 @@ function Example() {
           aria-label="Food"
           placeholder="Select food"
           compareWith={compareWith}
-          onIonChange={(ev) => console.log('Current value:', JSON.stringify(ev.detail.value))}
+          onIonChange={(event) => console.log('Current value:', JSON.stringify(event.detail.value))}
         >
           {foods.map((food) => (
             <IonSelectOption key={food.id} value={food}>
diff --git a/static/usage/v8/select/objects-as-values/using-comparewith/vue.md b/static/usage/v8/select/objects-as-values/using-comparewith/vue.md
index e93b223f6a1..e45a73f1d53 100644
--- a/static/usage/v8/select/objects-as-values/using-comparewith/vue.md
+++ b/static/usage/v8/select/objects-as-values/using-comparewith/vue.md
@@ -45,8 +45,8 @@
       compareWith(o1, o2) {
         return o1 && o2 ? o1.id === o2.id : o1 === o2;
       },
-      handleChange(ev) {
-        console.log('Current value:', JSON.stringify(ev.detail.value));
+      handleChange(event) {
+        console.log('Current value:', JSON.stringify(event.detail.value));
       },
     },
   });
diff --git a/static/usage/v8/select/typeahead/angular/typeahead_component_ts.md b/static/usage/v8/select/typeahead/angular/typeahead_component_ts.md
index f9de32444d0..73f2cc20644 100644
--- a/static/usage/v8/select/typeahead/angular/typeahead_component_ts.md
+++ b/static/usage/v8/select/typeahead/angular/typeahead_component_ts.md
@@ -57,8 +57,8 @@ export class TypeaheadComponent implements OnInit {
     this.selectionChange.emit(this.workingSelectedValues);
   }
 
-  searchbarInput(ev: Event) {
-    const inputElement = ev.target as HTMLInputElement;
+  searchbarInput(event: Event) {
+    const inputElement = event.target as HTMLInputElement;
     this.filterList(inputElement.value);
   }
 
@@ -90,8 +90,8 @@ export class TypeaheadComponent implements OnInit {
     return this.workingSelectedValues.includes(value);
   }
 
-  checkboxChange(ev: CustomEvent<{ checked: boolean; value: string }>) {
-    const { checked, value } = ev.detail;
+  checkboxChange(event: CustomEvent<{ checked: boolean; value: string }>) {
+    const { checked, value } = event.detail;
 
     if (checked) {
       this.workingSelectedValues = [...this.workingSelectedValues, value];
diff --git a/static/usage/v8/select/typeahead/demo.html b/static/usage/v8/select/typeahead/demo.html
index 4d75f3797c3..d067398d5ed 100644
--- a/static/usage/v8/select/typeahead/demo.html
+++ b/static/usage/v8/select/typeahead/demo.html
@@ -167,12 +167,12 @@
       };
 
       // Listen for all ionChange events from the checkbox
-      modal.addEventListener('ionChange', (ev) => {
-        if (ev.target.tagName !== 'ION-CHECKBOX') {
+      modal.addEventListener('ionChange', (event) => {
+        if (event.target.tagName !== 'ION-CHECKBOX') {
           return;
         }
 
-        const { checked, value } = ev.detail;
+        const { checked, value } = event.detail;
 
         if (checked) {
           workingSelectedFruits = [...workingSelectedFruits, value];
@@ -186,8 +186,8 @@
        * we need to update the view with
        * the filtered list.
        */
-      searchbar.addEventListener('ionInput', (ev) => {
-        renderList(ev.target.value);
+      searchbar.addEventListener('ionInput', (event) => {
+        renderList(event.target.value);
       });
 
       /**
@@ -195,8 +195,8 @@
        * update the parent page with the
        * selected fruits.
        */
-      modal.addEventListener('ionModalWillDismiss', (ev) => {
-        const { data } = ev.detail;
+      modal.addEventListener('ionModalWillDismiss', (event) => {
+        const { data } = event.detail;
 
         if (data === undefined) return;
 
@@ -209,7 +209,7 @@
        * When the modal has completed we need to
        * reset the filtered state of the list.
        */
-      modal.addEventListener('ionModalDidDismiss', (ev) => {
+      modal.addEventListener('ionModalDidDismiss', (event) => {
         searchbar.value = undefined;
         renderList();
       });
diff --git a/static/usage/v8/select/typeahead/javascript.md b/static/usage/v8/select/typeahead/javascript.md
index e98741c6df2..2f2737a1d92 100644
--- a/static/usage/v8/select/typeahead/javascript.md
+++ b/static/usage/v8/select/typeahead/javascript.md
@@ -153,12 +153,12 @@
   }
 
   // Listen for all ionChange events from the checkbox
-  modal.addEventListener('ionChange', (ev) => {
-    if (ev.target.tagName !== 'ION-CHECKBOX') {
+  modal.addEventListener('ionChange', (event) => {
+    if (event.target.tagName !== 'ION-CHECKBOX') {
       return;
     }
 
-    const { checked, value } = ev.detail;
+    const { checked, value } = event.detail;
 
     if (checked) {
       workingSelectedFruits = [...workingSelectedFruits, value];
@@ -172,8 +172,8 @@
    * we need to update the view with
    * the filtered list.
    */
-  searchbar.addEventListener('ionInput', (ev) => {
-    renderList(ev.target.value);
+  searchbar.addEventListener('ionInput', (event) => {
+    renderList(event.target.value);
   });
 
   /**
@@ -181,8 +181,8 @@
    * update the parent page with the
    * selected fruits.
    */
-  modal.addEventListener('ionModalWillDismiss', (ev) => {
-    const { data } = ev.detail;
+  modal.addEventListener('ionModalWillDismiss', (event) => {
+    const { data } = event.detail;
 
     if (data === undefined) return;
 
@@ -195,7 +195,7 @@
    * When the modal has completed we need to
    * reset the filtered state of the list.
    */
-  modal.addEventListener('ionModalDidDismiss', (ev) => {
+  modal.addEventListener('ionModalDidDismiss', (event) => {
     searchbar.value = undefined;
     renderList();
   });
diff --git a/static/usage/v8/select/typeahead/react/typeahead_component_tsx.md b/static/usage/v8/select/typeahead/react/typeahead_component_tsx.md
index 6026c0fbe9f..7aee53fae3f 100644
--- a/static/usage/v8/select/typeahead/react/typeahead_component_tsx.md
+++ b/static/usage/v8/select/typeahead/react/typeahead_component_tsx.md
@@ -45,8 +45,8 @@ function AppTypeahead(props: TypeaheadProps) {
     }
   };
 
-  const searchbarInput = (ev: any) => {
-    filterList(ev.target.value);
+  const searchbarInput = (event: any) => {
+    filterList(event.target.value);
   };
 
   /**
@@ -77,8 +77,8 @@ function AppTypeahead(props: TypeaheadProps) {
     }
   };
 
-  const checkboxChange = (ev: CheckboxCustomEvent) => {
-    const { checked, value } = ev.detail;
+  const checkboxChange = (event: CheckboxCustomEvent) => {
+    const { checked, value } = event.detail;
 
     if (checked) {
       setWorkingSelectedValues([...workingSelectedValues, value]);
diff --git a/static/usage/v8/select/typeahead/vue/typeahead_component_vue.md b/static/usage/v8/select/typeahead/vue/typeahead_component_vue.md
index 33017c3e291..71bf0622b8a 100644
--- a/static/usage/v8/select/typeahead/vue/typeahead_component_vue.md
+++ b/static/usage/v8/select/typeahead/vue/typeahead_component_vue.md
@@ -80,8 +80,8 @@
         emit('selection-change', workingSelectedValues.value);
       };
 
-      const searchbarInput = (ev: SearchbarCustomEvent) => {
-        filterList(ev.target.value);
+      const searchbarInput = (event: SearchbarCustomEvent) => {
+        filterList(event.target.value);
       };
 
       /**
@@ -110,8 +110,8 @@
         }
       };
 
-      const checkboxChange = (ev: CheckboxCustomEvent) => {
-        const { checked, value } = ev.detail;
+      const checkboxChange = (event: CheckboxCustomEvent) => {
+        const { checked, value } = event.detail;
 
         if (checked) {
           workingSelectedValues.value = [...workingSelectedValues.value, value];
diff --git a/static/usage/v8/textarea/helper-error/demo.html b/static/usage/v8/textarea/helper-error/demo.html
index c1de5cd46b4..9717f30e60d 100644
--- a/static/usage/v8/textarea/helper-error/demo.html
+++ b/static/usage/v8/textarea/helper-error/demo.html
@@ -33,7 +33,7 @@
     <script>
       const textarea = document.querySelector('ion-textarea');
 
-      textarea.addEventListener('ionInput', (ev) => validate(ev));
+      textarea.addEventListener('ionInput', (event) => validate(event));
       textarea.addEventListener('ionBlur', () => markTouched());
 
       const validateEmail = (email) => {
@@ -42,8 +42,8 @@
         );
       };
 
-      const validate = (ev) => {
-        const value = ev.target.value;
+      const validate = (event) => {
+        const value = event.target.value;
 
         textarea.classList.remove('ion-valid');
         textarea.classList.remove('ion-invalid');
diff --git a/static/usage/v8/textarea/helper-error/javascript.md b/static/usage/v8/textarea/helper-error/javascript.md
index 4bcdf69990d..ae7b0346037 100644
--- a/static/usage/v8/textarea/helper-error/javascript.md
+++ b/static/usage/v8/textarea/helper-error/javascript.md
@@ -10,7 +10,7 @@
 <script>
   const textarea = document.querySelector('ion-textarea');
 
-  textarea.addEventListener('ionInput', (ev) => validate(ev));
+  textarea.addEventListener('ionInput', (event) => validate(event));
   textarea.addEventListener('ionBlur', () => markTouched());
 
   const validateEmail = (email) => {
@@ -19,8 +19,8 @@
     );
   };
 
-  const validate = (ev) => {
-    const value = ev.target.value;
+  const validate = (event) => {
+    const value = event.target.value;
 
     textarea.classList.remove('ion-valid');
     textarea.classList.remove('ion-invalid');
diff --git a/static/usage/v8/textarea/helper-error/react.md b/static/usage/v8/textarea/helper-error/react.md
index 01d3207dc85..b3b2e05e63b 100644
--- a/static/usage/v8/textarea/helper-error/react.md
+++ b/static/usage/v8/textarea/helper-error/react.md
@@ -14,8 +14,8 @@ function Example() {
     );
   };
 
-  const validate = (ev: Event) => {
-    const value = (ev.target as HTMLTextAreaElement).value;
+  const validate = (event: Event) => {
+    const value = (event.target as HTMLTextAreaElement).value;
 
     setIsValid(undefined);
 
diff --git a/static/usage/v8/textarea/helper-error/vue.md b/static/usage/v8/textarea/helper-error/vue.md
index f0fe51ebee8..36412d18029 100644
--- a/static/usage/v8/textarea/helper-error/vue.md
+++ b/static/usage/v8/textarea/helper-error/vue.md
@@ -25,8 +25,8 @@
         );
       },
 
-      validate(ev) {
-        const value = ev.target.value;
+      validate(event) {
+        const value = event.target.value;
 
         this.$refs.input.$el.classList.remove('ion-valid');
         this.$refs.input.$el.classList.remove('ion-invalid');
diff --git a/static/usage/v8/theming/class-dark-mode/demo.html b/static/usage/v8/theming/class-dark-mode/demo.html
index a13159fbd1d..4a1709c0c81 100644
--- a/static/usage/v8/theming/class-dark-mode/demo.html
+++ b/static/usage/v8/theming/class-dark-mode/demo.html
@@ -69,8 +69,8 @@
       const toggle = document.querySelector('#paletteToggle');
 
       // Listen for the toggle check/uncheck to toggle the dark palette
-      toggle.addEventListener('ionChange', (ev) => {
-        toggleDarkPalette(ev.detail.checked);
+      toggle.addEventListener('ionChange', (event) => {
+        toggleDarkPalette(event.detail.checked);
       });
 
       // Use matchMedia to check the user preference
@@ -101,8 +101,8 @@
 
       // Demo only code below
       // ----------------------------------------------------
-      window.addEventListener('demoReady', (ev) => {
-        const palette = ev.target.localStorage.getItem('palette');
+      window.addEventListener('demoReady', (event) => {
+        const palette = event.target.localStorage.getItem('palette');
         const isDark = palette === 'dark' ? true : false;
 
         // Initialize the dark palette based on the initial
@@ -110,8 +110,8 @@
         initializeDarkPalette(isDark);
       });
 
-      window.addEventListener('message', (ev) => {
-        toggle.checked = ev.data.darkMode;
+      window.addEventListener('message', (event) => {
+        toggle.checked = event.data.darkMode;
       });
     </script>
 
diff --git a/static/usage/v8/theming/class-dark-mode/javascript/index_html.md b/static/usage/v8/theming/class-dark-mode/javascript/index_html.md
index 9d453acbb38..5e2e16e2dde 100644
--- a/static/usage/v8/theming/class-dark-mode/javascript/index_html.md
+++ b/static/usage/v8/theming/class-dark-mode/javascript/index_html.md
@@ -54,8 +54,8 @@
   const toggle = document.querySelector('#paletteToggle');
 
   // Listen for the toggle check/uncheck to toggle the dark palette
-  toggle.addEventListener('ionChange', (ev) => {
-    toggleDarkPalette(ev.detail.checked);
+  toggle.addEventListener('ionChange', (event) => {
+    toggleDarkPalette(event.detail.checked);
   });
 
   // Use matchMedia to check the user preference
diff --git a/static/usage/v8/theming/class-dark-mode/react/main_tsx.md b/static/usage/v8/theming/class-dark-mode/react/main_tsx.md
index 2c80eac0083..fa342bd21b0 100644
--- a/static/usage/v8/theming/class-dark-mode/react/main_tsx.md
+++ b/static/usage/v8/theming/class-dark-mode/react/main_tsx.md
@@ -26,8 +26,8 @@ function Example() {
   const [paletteToggle, setPaletteToggle] = useState(false);
 
   // Listen for the toggle check/uncheck to toggle the dark palette
-  const toggleChange = (ev: ToggleCustomEvent) => {
-    toggleDarkPalette(ev.detail.checked);
+  const toggleChange = (event: ToggleCustomEvent) => {
+    toggleDarkPalette(event.detail.checked);
   };
 
   // Add or remove the "ion-palette-dark" class on the html element
diff --git a/static/usage/v8/theming/class-dark-mode/vue/example_vue.md b/static/usage/v8/theming/class-dark-mode/vue/example_vue.md
index 388c364e53d..7562baef0e0 100644
--- a/static/usage/v8/theming/class-dark-mode/vue/example_vue.md
+++ b/static/usage/v8/theming/class-dark-mode/vue/example_vue.md
@@ -116,8 +116,8 @@
       prefersDark.addEventListener('change', (mediaQuery) => initializeDarkPalette(mediaQuery.matches));
 
       // Listen for the toggle check/uncheck to toggle the dark palette
-      const toggleChange = (ev: ToggleCustomEvent) => {
-        toggleDarkPalette(ev.detail.checked);
+      const toggleChange = (event: ToggleCustomEvent) => {
+        toggleDarkPalette(event.detail.checked);
       };
 
       return {
diff --git a/static/usage/v8/theming/class-high-contrast-mode/demo.html b/static/usage/v8/theming/class-high-contrast-mode/demo.html
index 98de0a60fda..e8e53a85019 100644
--- a/static/usage/v8/theming/class-high-contrast-mode/demo.html
+++ b/static/usage/v8/theming/class-high-contrast-mode/demo.html
@@ -78,12 +78,12 @@
       const highContrastModeToggle = document.querySelector('#highContrastModeToggle');
 
       // Listen for the toggle check/uncheck to toggle the dark palette
-      darkModeToggle.addEventListener('ionChange', (ev) => {
-        toggleDarkPalette(ev.detail.checked);
+      darkModeToggle.addEventListener('ionChange', (event) => {
+        toggleDarkPalette(event.detail.checked);
       });
 
-      highContrastModeToggle.addEventListener('ionChange', (ev) => {
-        toggleHighContrastPalette(ev.detail.checked);
+      highContrastModeToggle.addEventListener('ionChange', (event) => {
+        toggleHighContrastPalette(event.detail.checked);
       });
 
       // Use matchMedia to check the user preference
@@ -121,8 +121,8 @@
 
       // Demo only code below
       // ----------------------------------------------------
-      window.addEventListener('demoReady', (ev) => {
-        const palette = ev.target.localStorage.getItem('palette');
+      window.addEventListener('demoReady', (event) => {
+        const palette = event.target.localStorage.getItem('palette');
         const isDark = palette === 'dark' ? true : false;
 
         // Initialize the dark palette based on the initial
@@ -130,8 +130,8 @@
         initializeDarkPalette(isDark);
       });
 
-      window.addEventListener('message', (ev) => {
-        darkModeToggle.checked = ev.data.darkMode;
+      window.addEventListener('message', (event) => {
+        darkModeToggle.checked = event.data.darkMode;
       });
     </script>
 
diff --git a/static/usage/v8/theming/class-high-contrast-mode/javascript/index_html.md b/static/usage/v8/theming/class-high-contrast-mode/javascript/index_html.md
index 6f4f95a96b6..bd8d6fead9e 100644
--- a/static/usage/v8/theming/class-high-contrast-mode/javascript/index_html.md
+++ b/static/usage/v8/theming/class-high-contrast-mode/javascript/index_html.md
@@ -58,12 +58,12 @@
   const highContrastPaletteToggle = document.querySelector('#highContrastPaletteToggle');
 
   // Listen for the toggle check/uncheck to toggle the palette
-  darkPaletteToggle.addEventListener('ionChange', (ev) => {
-    toggleDarkPalette(ev.detail.checked);
+  darkPaletteToggle.addEventListener('ionChange', (event) => {
+    toggleDarkPalette(event.detail.checked);
   });
 
-  highContrastPaletteToggle.addEventListener('ionChange', (ev) => {
-    toggleHighContrastPalette(ev.detail.checked);
+  highContrastPaletteToggle.addEventListener('ionChange', (event) => {
+    toggleHighContrastPalette(event.detail.checked);
   });
 
   // Use matchMedia to check the user preference
diff --git a/static/usage/v8/theming/class-high-contrast-mode/react/main_tsx.md b/static/usage/v8/theming/class-high-contrast-mode/react/main_tsx.md
index 913136d826b..c7852259727 100644
--- a/static/usage/v8/theming/class-high-contrast-mode/react/main_tsx.md
+++ b/static/usage/v8/theming/class-high-contrast-mode/react/main_tsx.md
@@ -27,12 +27,12 @@ function Example() {
   const [highContrastPaletteToggle, setHighContrastPaletteToggle] = useState(false);
 
   // Listen for the toggle check/uncheck to toggle the palettes
-  const darkPaletteToggleChange = (ev: ToggleCustomEvent) => {
-    toggleDarkPalette(ev.detail.checked);
+  const darkPaletteToggleChange = (event: ToggleCustomEvent) => {
+    toggleDarkPalette(event.detail.checked);
   };
 
-  const highContrastPaletteToggleChange = (ev: ToggleCustomEvent) => {
-    toggleHighContrastPalette(ev.detail.checked);
+  const highContrastPaletteToggleChange = (event: ToggleCustomEvent) => {
+    toggleHighContrastPalette(event.detail.checked);
   };
 
   // Add or remove the "ion-palette-dark" class on the html element
diff --git a/static/usage/v8/theming/class-high-contrast-mode/vue/example_vue.md b/static/usage/v8/theming/class-high-contrast-mode/vue/example_vue.md
index 0fda4a0c6ce..579fc0e8817 100644
--- a/static/usage/v8/theming/class-high-contrast-mode/vue/example_vue.md
+++ b/static/usage/v8/theming/class-high-contrast-mode/vue/example_vue.md
@@ -135,13 +135,13 @@
       prefersHighContrast.addEventListener('change', (mediaQuery) => initializeHighContrastPalette(mediaQuery.matches));
 
       // Listen for the toggle check/uncheck to toggle the dark palette
-      const darkChange = (ev: ToggleCustomEvent) => {
-        toggleDarkPalette(ev.detail.checked);
+      const darkChange = (event: ToggleCustomEvent) => {
+        toggleDarkPalette(event.detail.checked);
       };
 
       // Listen for the toggle check/uncheck to toggle the high contrast palette
-      const highContrastChange = (ev: ToggleCustomEvent) => {
-        toggleHighContrastPalette(ev.detail.checked);
+      const highContrastChange = (event: ToggleCustomEvent) => {
+        toggleHighContrastPalette(event.detail.checked);
       };
 
       return {
diff --git a/static/usage/v8/toast/buttons/demo.html b/static/usage/v8/toast/buttons/demo.html
index ae95396fbfa..c9db7414c53 100644
--- a/static/usage/v8/toast/buttons/demo.html
+++ b/static/usage/v8/toast/buttons/demo.html
@@ -45,8 +45,8 @@
         },
       ];
 
-      toast.addEventListener('ionToastDidDismiss', (ev) => {
-        const { role } = ev.detail;
+      toast.addEventListener('ionToastDidDismiss', (event) => {
+        const { role } = event.detail;
         console.log(`Dismissed with role: ${role}`);
       });
     </script>
diff --git a/static/usage/v8/toast/buttons/javascript.md b/static/usage/v8/toast/buttons/javascript.md
index 843c1a469c6..dd425a862d6 100644
--- a/static/usage/v8/toast/buttons/javascript.md
+++ b/static/usage/v8/toast/buttons/javascript.md
@@ -22,8 +22,8 @@
     },
   ];
 
-  toast.addEventListener('ionToastDidDismiss', (ev) => {
-    const { role } = ev.detail;
+  toast.addEventListener('ionToastDidDismiss', (event) => {
+    const { role } = event.detail;
     console.log(`Dismissed with role: ${role}`);
   });
 </script>
diff --git a/static/usage/v8/toast/buttons/vue.md b/static/usage/v8/toast/buttons/vue.md
index fc05a785e17..d76b30f18d9 100644
--- a/static/usage/v8/toast/buttons/vue.md
+++ b/static/usage/v8/toast/buttons/vue.md
@@ -35,8 +35,8 @@
           },
         },
       ];
-      const handleDismiss = (ev: CustomEvent) => {
-        const { role } = ev.detail;
+      const handleDismiss = (event: CustomEvent) => {
+        const { role } = event.detail;
         console.log(`Dismissed with role: ${role}`);
       };
 
diff --git a/versioned_docs/version-v7/developing/hardware-back-button.md b/versioned_docs/version-v7/developing/hardware-back-button.md
index 3f7b0d9f4ad..1841b6e52a2 100644
--- a/versioned_docs/version-v7/developing/hardware-back-button.md
+++ b/versioned_docs/version-v7/developing/hardware-back-button.md
@@ -67,8 +67,8 @@ The `ionBackButton` event will not be emitted when running an app in a browser o
 <TabItem value="javascript">
 
 ```javascript
-document.addEventListener('ionBackButton', (ev) => {
-  ev.detail.register(10, () => {
+document.addEventListener('ionBackButton', (event) => {
+  event.detail.register(10, () => {
     console.log('Handler was called!');
   });
 });
@@ -108,8 +108,8 @@ constructor(private platform: Platform) {
 <TabItem value="react">
 
 ```tsx
-document.addEventListener('ionBackButton', (ev) => {
-  ev.detail.register(10, () => {
+document.addEventListener('ionBackButton', (event) => {
+  event.detail.register(10, () => {
     console.log('Handler was called!');
   });
 });
@@ -157,12 +157,12 @@ Each hardware back button callback has a `processNextHandler` parameter. Calling
 <TabItem value="javascript">
 
 ```javascript
-document.addEventListener('ionBackButton', (ev) => {
-  ev.detail.register(5, () => {
+document.addEventListener('ionBackButton', (event) => {
+  event.detail.register(5, () => {
     console.log('Another handler was called!');
   });
 
-  ev.detail.register(10, (processNextHandler) => {
+  event.detail.register(10, (processNextHandler) => {
     console.log('Handler was called!');
 
     processNextHandler();
@@ -216,12 +216,12 @@ constructor(private platform: Platform) {
 <TabItem value="react">
 
 ```tsx
-document.addEventListener('ionBackButton', (ev) => {
-  ev.detail.register(5, () => {
+document.addEventListener('ionBackButton', (event) => {
+  event.detail.register(5, () => {
     console.log('Another handler was called!');
   });
 
-  ev.detail.register(10, (processNextHandler) => {
+  event.detail.register(10, (processNextHandler) => {
     console.log('Handler was called!');
 
     processNextHandler();
@@ -261,16 +261,16 @@ This example shows how to indicate to Ionic Framework that you want the next han
 Internally, Ionic Framework uses something similar to a priority queue to manage hardware back button handlers. The handler with the largest priority value will be called first. In the event that there are multiple handlers with the same priority value, the _last_ handler of the same priority added to this queue will be the first handler to be called.
 
 ```javascript
-document.addEventListener('ionBackButton', (ev) => {
+document.addEventListener('ionBackButton', (event) => {
   // Handler A
-  ev.detail.register(10, (processNextHandler) => {
+  event.detail.register(10, (processNextHandler) => {
     console.log('Handler A was called!');
 
     processNextHandler();
   });
 
   // Handler B
-  ev.detail.register(10, (processNextHandler) => {
+  event.detail.register(10, (processNextHandler) => {
     console.log('Handler B was called!');
 
     processNextHandler();
@@ -305,8 +305,8 @@ import { App } from '@capacitor/app';
 ...
 
 const routerEl = document.querySelector('ion-router');
-document.addEventListener('ionBackButton', (ev: BackButtonEvent) => {
-  ev.detail.register(-1, () => {
+document.addEventListener('ionBackButton', (event: BackButtonEvent) => {
+  event.detail.register(-1, () => {
     const path = window.location.pathname;
     if (path === routerEl.root) {
       App.exitApp();
@@ -368,8 +368,8 @@ import { App } from '@capacitor/app';
 ...
 
 const ionRouter = useIonRouter();
-document.addEventListener('ionBackButton', (ev) => {
-  ev.detail.register(-1, () => {
+document.addEventListener('ionBackButton', (event) => {
+  event.detail.register(-1, () => {
     if (!ionRouter.canGoBack()) {
       App.exitApp();
     }
diff --git a/versioned_docs/version-v7/developing/keyboard.md b/versioned_docs/version-v7/developing/keyboard.md
index f8e95318870..20fa164f1af 100644
--- a/versioned_docs/version-v7/developing/keyboard.md
+++ b/versioned_docs/version-v7/developing/keyboard.md
@@ -90,8 +90,8 @@ Detecting the presence of an on-screen keyboard is useful for adjusting the posi
 <TabItem value="javascript">
 
 ```javascript
-window.addEventListener('ionKeyboardDidShow', ev => {
-  const { keyboardHeight } = ev;
+window.addEventListener('ionKeyboardDidShow', event => {
+  const { keyboardHeight } = event;
   // Do something with the keyboard height such as translating an input above the keyboard.
 });
 
@@ -108,8 +108,8 @@ import { Platform } from '@ionic/angular';
 ...
 
 constructor(private platform: Platform) {
-  this.platform.keyboardDidShow.subscribe(ev => {
-    const { keyboardHeight } = ev;
+  this.platform.keyboardDidShow.subscribe(event => {
+    const { keyboardHeight } = event;
     // Do something with the keyboard height such as translating an input above the keyboard.
   });
 
@@ -127,8 +127,8 @@ import { Platform } from '@ionic/angular/standalone';
 ...
 
 constructor(private platform: Platform) {
-  this.platform.keyboardDidShow.subscribe(ev => {
-    const { keyboardHeight } = ev;
+  this.platform.keyboardDidShow.subscribe(event => {
+    const { keyboardHeight } = event;
     // Do something with the keyboard height such as translating an input above the keyboard.
   });
 
diff --git a/versioned_docs/version-v7/utilities/gestures.md b/versioned_docs/version-v7/utilities/gestures.md
index 875876b3b56..86202dd90ee 100644
--- a/versioned_docs/version-v7/utilities/gestures.md
+++ b/versioned_docs/version-v7/utilities/gestures.md
@@ -47,7 +47,7 @@ const gesture = createGesture({
   el: elementRef,
   threshold: 15,
   gestureName: 'my-gesture',
-  onMove: ev => onMoveHandler(ev)
+  onMove: event => onMoveHandler(event)
 });
 
 ```
@@ -65,7 +65,7 @@ const gesture: Gesture = createGesture({
   el: elementRef,
   threshold: 15,
   gestureName: 'my-gesture',
-  onMove: ev => onMoveHandler(ev)
+  onMove: event => onMoveHandler(event)
 });
 ```
 </TabItem>
@@ -86,7 +86,7 @@ constructor(private gestureCtrl: GestureController) {
     el: this.element.nativeElement,
     threshold: 15,
     gestureName: 'my-gesture',
-    onMove: ev => this.onMoveHandler(ev)
+    onMove: event => this.onMoveHandler(event)
   }, true);
   // The `true` above ensures that callbacks run inside NgZone.
 }
@@ -110,7 +110,7 @@ constructor(private gestureCtrl: GestureController) {
     el: this.element.nativeElement,
     threshold: 15,
     gestureName: 'my-gesture',
-    onMove: ev => this.onMoveHandler(ev)
+    onMove: event => this.onMoveHandler(event)
   }, true);
   // The `true` above ensures that callbacks run inside NgZone.
 }
@@ -130,7 +130,7 @@ const gesture: Gesture = createGesture({
   el: elementRef,
   threshold: 15,
   gestureName: 'my-gesture',
-  onMove: ev => onMoveHandler(ev)
+  onMove: event => onMoveHandler(event)
 });
 ```
 </TabItem>
@@ -152,7 +152,7 @@ const gesture = createGesture({
   el: elementRef.value,
   threshold: 15,
   gestureName: 'my-gesture',
-  onMove: ev => onMoveHandler(ev)
+  onMove: event => onMoveHandler(event)
 });
 
 ```