diff --git a/static/usage/v7/refresher/advanced/angular/example_component_ts.md b/static/usage/v7/refresher/advanced/angular/example_component_ts.md
index db6bd8d6099..b7d91143633 100644
--- a/static/usage/v7/refresher/advanced/angular/example_component_ts.md
+++ b/static/usage/v7/refresher/advanced/angular/example_component_ts.md
@@ -11,6 +11,7 @@ import {
   IonRefresherContent,
   IonTitle,
   IonToolbar,
+  RefresherCustomEvent,
 } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
@@ -82,10 +83,10 @@ export class ExampleComponent {
     }
   }
 
-  handleRefresh(event: CustomEvent) {
+  handleRefresh(event: RefresherCustomEvent) {
     setTimeout(() => {
       this.addItems(3, true);
-      (event.target as HTMLIonRefresherElement).complete();
+      event.target.complete();
     }, 2000);
   }
 }
diff --git a/static/usage/v7/refresher/advanced/react/main_tsx.md b/static/usage/v7/refresher/advanced/react/main_tsx.md
index f4cdf27d4eb..2ddb57ac50a 100644
--- a/static/usage/v7/refresher/advanced/react/main_tsx.md
+++ b/static/usage/v7/refresher/advanced/react/main_tsx.md
@@ -11,7 +11,7 @@ import {
   IonRefresherContent,
   IonTitle,
   IonToolbar,
-  RefresherEventDetail,
+  RefresherCustomEvent,
 } from '@ionic/react';
 import { ellipse } from 'ionicons/icons';
 
@@ -44,7 +44,7 @@ function Example() {
     }
   }, []);
 
-  function handleRefresh(event: CustomEvent<RefresherEventDetail>) {
+  function handleRefresh(event: RefresherCustomEvent) {
     setTimeout(() => {
       addItems(3, true);
       event.detail.complete();
diff --git a/static/usage/v7/refresher/advanced/vue.md b/static/usage/v7/refresher/advanced/vue.md
index c5ec3047d44..8a34a29f86e 100644
--- a/static/usage/v7/refresher/advanced/vue.md
+++ b/static/usage/v7/refresher/advanced/vue.md
@@ -51,6 +51,7 @@
       IonRefresherContent,
       IonTitle,
       IonToolbar,
+      RefresherCustomEvent,
     },
     setup() {
       const names = [
@@ -82,7 +83,7 @@
 
       addItems(5);
 
-      const handleRefresh = (event: CustomEvent) => {
+      const handleRefresh = (event: RefresherCustomEvent) => {
         setTimeout(() => {
           addItems(3, true);
           event.target.complete();
diff --git a/static/usage/v7/refresher/basic/angular/example_component_ts.md b/static/usage/v7/refresher/basic/angular/example_component_ts.md
index 8edb4e4dc1f..da27a11e0af 100644
--- a/static/usage/v7/refresher/basic/angular/example_component_ts.md
+++ b/static/usage/v7/refresher/basic/angular/example_component_ts.md
@@ -7,6 +7,7 @@ import {
   IonRefresherContent,
   IonTitle,
   IonToolbar,
+  RefresherCustomEvent,
 } from '@ionic/angular/standalone';
 
 @Component({
@@ -16,10 +17,10 @@ import {
   imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  handleRefresh(event: CustomEvent) {
+  handleRefresh(event: RefresherCustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
-      (event.target as HTMLIonRefresherElement).complete();
+      event.target.complete();
     }, 2000);
   }
 }
diff --git a/static/usage/v7/refresher/basic/react.md b/static/usage/v7/refresher/basic/react.md
index 02b0504208b..bcdd53422d8 100644
--- a/static/usage/v7/refresher/basic/react.md
+++ b/static/usage/v7/refresher/basic/react.md
@@ -7,11 +7,11 @@ import {
   IonRefresherContent,
   IonTitle,
   IonToolbar,
-  RefresherEventDetail,
+  RefresherCustomEvent,
 } from '@ionic/react';
 
 function Example() {
-  function handleRefresh(event: CustomEvent<RefresherEventDetail>) {
+  function handleRefresh(event: RefresherCustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
       event.detail.complete();
diff --git a/static/usage/v7/refresher/basic/vue.md b/static/usage/v7/refresher/basic/vue.md
index 870081dcfbf..fceacabdd6c 100644
--- a/static/usage/v7/refresher/basic/vue.md
+++ b/static/usage/v7/refresher/basic/vue.md
@@ -16,13 +16,21 @@
 </template>
 
 <script lang="ts">
-  import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar } from '@ionic/vue';
+  import {
+    IonContent,
+    IonHeader,
+    IonRefresher,
+    IonRefresherContent,
+    IonTitle,
+    IonToolbar,
+    RefresherCustomEvent,
+  } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar },
     setup() {
-      const handleRefresh = (event: CustomEvent) => {
+      const handleRefresh = (event: RefresherCustomEvent) => {
         setTimeout(() => {
           // Any calls to load data go here
           event.target.complete();
diff --git a/static/usage/v7/refresher/custom-content/angular/example_component_ts.md b/static/usage/v7/refresher/custom-content/angular/example_component_ts.md
index 8edb4e4dc1f..da27a11e0af 100644
--- a/static/usage/v7/refresher/custom-content/angular/example_component_ts.md
+++ b/static/usage/v7/refresher/custom-content/angular/example_component_ts.md
@@ -7,6 +7,7 @@ import {
   IonRefresherContent,
   IonTitle,
   IonToolbar,
+  RefresherCustomEvent,
 } from '@ionic/angular/standalone';
 
 @Component({
@@ -16,10 +17,10 @@ import {
   imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  handleRefresh(event: CustomEvent) {
+  handleRefresh(event: RefresherCustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
-      (event.target as HTMLIonRefresherElement).complete();
+      event.target.complete();
     }, 2000);
   }
 }
diff --git a/static/usage/v7/refresher/custom-content/react.md b/static/usage/v7/refresher/custom-content/react.md
index 9349b2d2857..dabe3059aab 100644
--- a/static/usage/v7/refresher/custom-content/react.md
+++ b/static/usage/v7/refresher/custom-content/react.md
@@ -7,12 +7,12 @@ import {
   IonRefresherContent,
   IonTitle,
   IonToolbar,
-  RefresherEventDetail,
+  RefresherCustomEvent,
 } from '@ionic/react';
 import { chevronDownCircleOutline } from 'ionicons/icons';
 
 function Example() {
-  function handleRefresh(event: CustomEvent<RefresherEventDetail>) {
+  function handleRefresh(event: RefresherCustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
       event.detail.complete();
diff --git a/static/usage/v7/refresher/custom-content/vue.md b/static/usage/v7/refresher/custom-content/vue.md
index af350137449..9607d02cb7d 100644
--- a/static/usage/v7/refresher/custom-content/vue.md
+++ b/static/usage/v7/refresher/custom-content/vue.md
@@ -27,9 +27,17 @@
   import { chevronDownCircleOutline } from 'ionicons/icons';
 
   export default defineComponent({
-    components: { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar },
+    components: {
+      IonContent,
+      IonHeader,
+      IonRefresher,
+      IonRefresherContent,
+      IonTitle,
+      IonToolbar,
+      RefresherCustomEvent,
+    },
     setup() {
-      const handleRefresh = (event: CustomEvent) => {
+      const handleRefresh = (event: RefresherCustomEvent) => {
         setTimeout(() => {
           // Any calls to load data go here
           event.target.complete();
diff --git a/static/usage/v7/refresher/custom-scroll-target/angular/example_component_ts.md b/static/usage/v7/refresher/custom-scroll-target/angular/example_component_ts.md
index 8edb4e4dc1f..da27a11e0af 100644
--- a/static/usage/v7/refresher/custom-scroll-target/angular/example_component_ts.md
+++ b/static/usage/v7/refresher/custom-scroll-target/angular/example_component_ts.md
@@ -7,6 +7,7 @@ import {
   IonRefresherContent,
   IonTitle,
   IonToolbar,
+  RefresherCustomEvent,
 } from '@ionic/angular/standalone';
 
 @Component({
@@ -16,10 +17,10 @@ import {
   imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  handleRefresh(event: CustomEvent) {
+  handleRefresh(event: RefresherCustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
-      (event.target as HTMLIonRefresherElement).complete();
+      event.target.complete();
     }, 2000);
   }
 }
diff --git a/static/usage/v7/refresher/custom-scroll-target/react/main_tsx.md b/static/usage/v7/refresher/custom-scroll-target/react/main_tsx.md
index a8a52b4d29d..0bee7ff5cc3 100644
--- a/static/usage/v7/refresher/custom-scroll-target/react/main_tsx.md
+++ b/static/usage/v7/refresher/custom-scroll-target/react/main_tsx.md
@@ -7,13 +7,13 @@ import {
   IonRefresherContent,
   IonTitle,
   IonToolbar,
-  RefresherEventDetail,
+  RefresherCustomEvent,
 } from '@ionic/react';
 
 import './main.css';
 
 function Example() {
-  function handleRefresh(event: CustomEvent<RefresherEventDetail>) {
+  function handleRefresh(event: RefresherCustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
       event.detail.complete();
diff --git a/static/usage/v7/refresher/custom-scroll-target/vue.md b/static/usage/v7/refresher/custom-scroll-target/vue.md
index 4673a73b345..9b4c6274d1b 100644
--- a/static/usage/v7/refresher/custom-scroll-target/vue.md
+++ b/static/usage/v7/refresher/custom-scroll-target/vue.md
@@ -18,13 +18,21 @@
 </template>
 
 <script lang="ts">
-  import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar } from '@ionic/vue';
+  import {
+    IonContent,
+    IonHeader,
+    IonRefresher,
+    IonRefresherContent,
+    IonTitle,
+    IonToolbar,
+    RefresherCustomEvent,
+  } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar },
     setup() {
-      const handleRefresh = (event: CustomEvent) => {
+      const handleRefresh = (event: RefresherCustomEvent) => {
         setTimeout(() => {
           // Any calls to load data go here
           event.target.complete();
diff --git a/static/usage/v7/refresher/pull-properties/angular/example_component_ts.md b/static/usage/v7/refresher/pull-properties/angular/example_component_ts.md
index 8edb4e4dc1f..da27a11e0af 100644
--- a/static/usage/v7/refresher/pull-properties/angular/example_component_ts.md
+++ b/static/usage/v7/refresher/pull-properties/angular/example_component_ts.md
@@ -7,6 +7,7 @@ import {
   IonRefresherContent,
   IonTitle,
   IonToolbar,
+  RefresherCustomEvent,
 } from '@ionic/angular/standalone';
 
 @Component({
@@ -16,10 +17,10 @@ import {
   imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  handleRefresh(event: CustomEvent) {
+  handleRefresh(event: RefresherCustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
-      (event.target as HTMLIonRefresherElement).complete();
+      event.target.complete();
     }, 2000);
   }
 }
diff --git a/static/usage/v7/refresher/pull-properties/react.md b/static/usage/v7/refresher/pull-properties/react.md
index e62afa17bdd..278e50aa34a 100644
--- a/static/usage/v7/refresher/pull-properties/react.md
+++ b/static/usage/v7/refresher/pull-properties/react.md
@@ -7,11 +7,11 @@ import {
   IonRefresherContent,
   IonTitle,
   IonToolbar,
-  RefresherEventDetail,
+  RefresherCustomEvent,
 } from '@ionic/react';
 
 function Example() {
-  function handleRefresh(event: CustomEvent<RefresherEventDetail>) {
+  function handleRefresh(event: RefresherCustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
       event.detail.complete();
diff --git a/static/usage/v7/refresher/pull-properties/vue.md b/static/usage/v7/refresher/pull-properties/vue.md
index 0d3e1b45e9f..b9279686005 100644
--- a/static/usage/v7/refresher/pull-properties/vue.md
+++ b/static/usage/v7/refresher/pull-properties/vue.md
@@ -16,13 +16,21 @@
 </template>
 
 <script lang="ts">
-  import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar } from '@ionic/vue';
+  import {
+    IonContent,
+    IonHeader,
+    IonRefresher,
+    IonRefresherContent,
+    IonTitle,
+    IonToolbar,
+    RefresherCustomEvent,
+  } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar },
     setup() {
-      const handleRefresh = (event: CustomEvent) => {
+      const handleRefresh = (event: RefresherCustomEvent) => {
         setTimeout(() => {
           // Any calls to load data go here
           event.target.complete();
diff --git a/static/usage/v8/refresher/advanced/angular/example_component_ts.md b/static/usage/v8/refresher/advanced/angular/example_component_ts.md
index db6bd8d6099..b7d91143633 100644
--- a/static/usage/v8/refresher/advanced/angular/example_component_ts.md
+++ b/static/usage/v8/refresher/advanced/angular/example_component_ts.md
@@ -11,6 +11,7 @@ import {
   IonRefresherContent,
   IonTitle,
   IonToolbar,
+  RefresherCustomEvent,
 } from '@ionic/angular/standalone';
 
 import { addIcons } from 'ionicons';
@@ -82,10 +83,10 @@ export class ExampleComponent {
     }
   }
 
-  handleRefresh(event: CustomEvent) {
+  handleRefresh(event: RefresherCustomEvent) {
     setTimeout(() => {
       this.addItems(3, true);
-      (event.target as HTMLIonRefresherElement).complete();
+      event.target.complete();
     }, 2000);
   }
 }
diff --git a/static/usage/v8/refresher/advanced/react/main_tsx.md b/static/usage/v8/refresher/advanced/react/main_tsx.md
index f4cdf27d4eb..2ddb57ac50a 100644
--- a/static/usage/v8/refresher/advanced/react/main_tsx.md
+++ b/static/usage/v8/refresher/advanced/react/main_tsx.md
@@ -11,7 +11,7 @@ import {
   IonRefresherContent,
   IonTitle,
   IonToolbar,
-  RefresherEventDetail,
+  RefresherCustomEvent,
 } from '@ionic/react';
 import { ellipse } from 'ionicons/icons';
 
@@ -44,7 +44,7 @@ function Example() {
     }
   }, []);
 
-  function handleRefresh(event: CustomEvent<RefresherEventDetail>) {
+  function handleRefresh(event: RefresherCustomEvent) {
     setTimeout(() => {
       addItems(3, true);
       event.detail.complete();
diff --git a/static/usage/v8/refresher/advanced/vue.md b/static/usage/v8/refresher/advanced/vue.md
index c5ec3047d44..8a34a29f86e 100644
--- a/static/usage/v8/refresher/advanced/vue.md
+++ b/static/usage/v8/refresher/advanced/vue.md
@@ -51,6 +51,7 @@
       IonRefresherContent,
       IonTitle,
       IonToolbar,
+      RefresherCustomEvent,
     },
     setup() {
       const names = [
@@ -82,7 +83,7 @@
 
       addItems(5);
 
-      const handleRefresh = (event: CustomEvent) => {
+      const handleRefresh = (event: RefresherCustomEvent) => {
         setTimeout(() => {
           addItems(3, true);
           event.target.complete();
diff --git a/static/usage/v8/refresher/basic/angular/example_component_ts.md b/static/usage/v8/refresher/basic/angular/example_component_ts.md
index 8edb4e4dc1f..da27a11e0af 100644
--- a/static/usage/v8/refresher/basic/angular/example_component_ts.md
+++ b/static/usage/v8/refresher/basic/angular/example_component_ts.md
@@ -7,6 +7,7 @@ import {
   IonRefresherContent,
   IonTitle,
   IonToolbar,
+  RefresherCustomEvent,
 } from '@ionic/angular/standalone';
 
 @Component({
@@ -16,10 +17,10 @@ import {
   imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  handleRefresh(event: CustomEvent) {
+  handleRefresh(event: RefresherCustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
-      (event.target as HTMLIonRefresherElement).complete();
+      event.target.complete();
     }, 2000);
   }
 }
diff --git a/static/usage/v8/refresher/basic/react.md b/static/usage/v8/refresher/basic/react.md
index 02b0504208b..bcdd53422d8 100644
--- a/static/usage/v8/refresher/basic/react.md
+++ b/static/usage/v8/refresher/basic/react.md
@@ -7,11 +7,11 @@ import {
   IonRefresherContent,
   IonTitle,
   IonToolbar,
-  RefresherEventDetail,
+  RefresherCustomEvent,
 } from '@ionic/react';
 
 function Example() {
-  function handleRefresh(event: CustomEvent<RefresherEventDetail>) {
+  function handleRefresh(event: RefresherCustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
       event.detail.complete();
diff --git a/static/usage/v8/refresher/basic/vue.md b/static/usage/v8/refresher/basic/vue.md
index 870081dcfbf..fceacabdd6c 100644
--- a/static/usage/v8/refresher/basic/vue.md
+++ b/static/usage/v8/refresher/basic/vue.md
@@ -16,13 +16,21 @@
 </template>
 
 <script lang="ts">
-  import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar } from '@ionic/vue';
+  import {
+    IonContent,
+    IonHeader,
+    IonRefresher,
+    IonRefresherContent,
+    IonTitle,
+    IonToolbar,
+    RefresherCustomEvent,
+  } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar },
     setup() {
-      const handleRefresh = (event: CustomEvent) => {
+      const handleRefresh = (event: RefresherCustomEvent) => {
         setTimeout(() => {
           // Any calls to load data go here
           event.target.complete();
diff --git a/static/usage/v8/refresher/custom-content/angular/example_component_ts.md b/static/usage/v8/refresher/custom-content/angular/example_component_ts.md
index 8edb4e4dc1f..da27a11e0af 100644
--- a/static/usage/v8/refresher/custom-content/angular/example_component_ts.md
+++ b/static/usage/v8/refresher/custom-content/angular/example_component_ts.md
@@ -7,6 +7,7 @@ import {
   IonRefresherContent,
   IonTitle,
   IonToolbar,
+  RefresherCustomEvent,
 } from '@ionic/angular/standalone';
 
 @Component({
@@ -16,10 +17,10 @@ import {
   imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  handleRefresh(event: CustomEvent) {
+  handleRefresh(event: RefresherCustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
-      (event.target as HTMLIonRefresherElement).complete();
+      event.target.complete();
     }, 2000);
   }
 }
diff --git a/static/usage/v8/refresher/custom-content/react.md b/static/usage/v8/refresher/custom-content/react.md
index 9349b2d2857..dabe3059aab 100644
--- a/static/usage/v8/refresher/custom-content/react.md
+++ b/static/usage/v8/refresher/custom-content/react.md
@@ -7,12 +7,12 @@ import {
   IonRefresherContent,
   IonTitle,
   IonToolbar,
-  RefresherEventDetail,
+  RefresherCustomEvent,
 } from '@ionic/react';
 import { chevronDownCircleOutline } from 'ionicons/icons';
 
 function Example() {
-  function handleRefresh(event: CustomEvent<RefresherEventDetail>) {
+  function handleRefresh(event: RefresherCustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
       event.detail.complete();
diff --git a/static/usage/v8/refresher/custom-content/vue.md b/static/usage/v8/refresher/custom-content/vue.md
index af350137449..9607d02cb7d 100644
--- a/static/usage/v8/refresher/custom-content/vue.md
+++ b/static/usage/v8/refresher/custom-content/vue.md
@@ -27,9 +27,17 @@
   import { chevronDownCircleOutline } from 'ionicons/icons';
 
   export default defineComponent({
-    components: { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar },
+    components: {
+      IonContent,
+      IonHeader,
+      IonRefresher,
+      IonRefresherContent,
+      IonTitle,
+      IonToolbar,
+      RefresherCustomEvent,
+    },
     setup() {
-      const handleRefresh = (event: CustomEvent) => {
+      const handleRefresh = (event: RefresherCustomEvent) => {
         setTimeout(() => {
           // Any calls to load data go here
           event.target.complete();
diff --git a/static/usage/v8/refresher/custom-scroll-target/angular/example_component_ts.md b/static/usage/v8/refresher/custom-scroll-target/angular/example_component_ts.md
index 8edb4e4dc1f..da27a11e0af 100644
--- a/static/usage/v8/refresher/custom-scroll-target/angular/example_component_ts.md
+++ b/static/usage/v8/refresher/custom-scroll-target/angular/example_component_ts.md
@@ -7,6 +7,7 @@ import {
   IonRefresherContent,
   IonTitle,
   IonToolbar,
+  RefresherCustomEvent,
 } from '@ionic/angular/standalone';
 
 @Component({
@@ -16,10 +17,10 @@ import {
   imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  handleRefresh(event: CustomEvent) {
+  handleRefresh(event: RefresherCustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
-      (event.target as HTMLIonRefresherElement).complete();
+      event.target.complete();
     }, 2000);
   }
 }
diff --git a/static/usage/v8/refresher/custom-scroll-target/react/main_tsx.md b/static/usage/v8/refresher/custom-scroll-target/react/main_tsx.md
index a8a52b4d29d..0bee7ff5cc3 100644
--- a/static/usage/v8/refresher/custom-scroll-target/react/main_tsx.md
+++ b/static/usage/v8/refresher/custom-scroll-target/react/main_tsx.md
@@ -7,13 +7,13 @@ import {
   IonRefresherContent,
   IonTitle,
   IonToolbar,
-  RefresherEventDetail,
+  RefresherCustomEvent,
 } from '@ionic/react';
 
 import './main.css';
 
 function Example() {
-  function handleRefresh(event: CustomEvent<RefresherEventDetail>) {
+  function handleRefresh(event: RefresherCustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
       event.detail.complete();
diff --git a/static/usage/v8/refresher/custom-scroll-target/vue.md b/static/usage/v8/refresher/custom-scroll-target/vue.md
index 4673a73b345..9b4c6274d1b 100644
--- a/static/usage/v8/refresher/custom-scroll-target/vue.md
+++ b/static/usage/v8/refresher/custom-scroll-target/vue.md
@@ -18,13 +18,21 @@
 </template>
 
 <script lang="ts">
-  import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar } from '@ionic/vue';
+  import {
+    IonContent,
+    IonHeader,
+    IonRefresher,
+    IonRefresherContent,
+    IonTitle,
+    IonToolbar,
+    RefresherCustomEvent,
+  } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar },
     setup() {
-      const handleRefresh = (event: CustomEvent) => {
+      const handleRefresh = (event: RefresherCustomEvent) => {
         setTimeout(() => {
           // Any calls to load data go here
           event.target.complete();
diff --git a/static/usage/v8/refresher/pull-properties/angular/example_component_ts.md b/static/usage/v8/refresher/pull-properties/angular/example_component_ts.md
index 8edb4e4dc1f..da27a11e0af 100644
--- a/static/usage/v8/refresher/pull-properties/angular/example_component_ts.md
+++ b/static/usage/v8/refresher/pull-properties/angular/example_component_ts.md
@@ -7,6 +7,7 @@ import {
   IonRefresherContent,
   IonTitle,
   IonToolbar,
+  RefresherCustomEvent,
 } from '@ionic/angular/standalone';
 
 @Component({
@@ -16,10 +17,10 @@ import {
   imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar],
 })
 export class ExampleComponent {
-  handleRefresh(event: CustomEvent) {
+  handleRefresh(event: RefresherCustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
-      (event.target as HTMLIonRefresherElement).complete();
+      event.target.complete();
     }, 2000);
   }
 }
diff --git a/static/usage/v8/refresher/pull-properties/react.md b/static/usage/v8/refresher/pull-properties/react.md
index e62afa17bdd..278e50aa34a 100644
--- a/static/usage/v8/refresher/pull-properties/react.md
+++ b/static/usage/v8/refresher/pull-properties/react.md
@@ -7,11 +7,11 @@ import {
   IonRefresherContent,
   IonTitle,
   IonToolbar,
-  RefresherEventDetail,
+  RefresherCustomEvent,
 } from '@ionic/react';
 
 function Example() {
-  function handleRefresh(event: CustomEvent<RefresherEventDetail>) {
+  function handleRefresh(event: RefresherCustomEvent) {
     setTimeout(() => {
       // Any calls to load data go here
       event.detail.complete();
diff --git a/static/usage/v8/refresher/pull-properties/vue.md b/static/usage/v8/refresher/pull-properties/vue.md
index 0d3e1b45e9f..b9279686005 100644
--- a/static/usage/v8/refresher/pull-properties/vue.md
+++ b/static/usage/v8/refresher/pull-properties/vue.md
@@ -16,13 +16,21 @@
 </template>
 
 <script lang="ts">
-  import { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar } from '@ionic/vue';
+  import {
+    IonContent,
+    IonHeader,
+    IonRefresher,
+    IonRefresherContent,
+    IonTitle,
+    IonToolbar,
+    RefresherCustomEvent,
+  } from '@ionic/vue';
   import { defineComponent } from 'vue';
 
   export default defineComponent({
     components: { IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar },
     setup() {
-      const handleRefresh = (event: CustomEvent) => {
+      const handleRefresh = (event: RefresherCustomEvent) => {
         setTimeout(() => {
           // Any calls to load data go here
           event.target.complete();