docs(modal): add type import and cleanup

Author: thetaPC

static/code/stackblitz/v8/angular/package.json

@@ -15,8 +15,8 @@
     "@angular/platform-browser": "^20.0.0",
     "@angular/platform-browser-dynamic": "^20.0.0",
     "@angular/router": "^20.0.0",
-    "@ionic/angular": "8.7.14",
-    "@ionic/core": "8.7.14",
+    "@ionic/angular": "8.7.17-dev.11772030258.1ee4f499",
+    "@ionic/core": "8.7.17-dev.11772030258.1ee4f499",
     "ionicons": "8.0.13",
     "rxjs": "^7.8.1",
     "tslib": "^2.5.0",

static/code/stackblitz/v8/html/package.json

@@ -9,7 +9,7 @@
     "start": "vite preview"
   },
   "dependencies": {
-    "@ionic/core": "8.7.14",
+    "@ionic/core": "8.7.17-dev.11772030258.1ee4f499",
     "ionicons": "8.0.13"
   },
   "devDependencies": {

static/code/stackblitz/v8/react/package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ionic/react": "8.7.14",
-    "@ionic/react-router": "8.7.14",
+    "@ionic/react": "8.7.17-dev.11772030258.1ee4f499",
+    "@ionic/react-router": "8.7.17-dev.11772030258.1ee4f499",
     "@types/node": "^24.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",

static/code/stackblitz/v8/vue/package.json

@@ -8,8 +8,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ionic/vue": "8.7.14",
-    "@ionic/vue-router": "8.7.14",
+    "@ionic/vue": "8.7.17-dev.11772030258.1ee4f499",
+    "@ionic/vue-router": "8.7.17-dev.11772030258.1ee4f499",
     "vue": "^3.2.25",
     "vue-router": "5.0.1"
   },

static/usage/v8/modal/card/drag-events/angular/example_component_ts.md

@@ -1,6 +1,7 @@
 ```ts
 import { Component, ElementRef, ViewChild, OnInit } from '@angular/core';
 import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonModal, IonLabel } from '@ionic/angular/standalone';
+import type { ModalDragEventDetail } from '@ionic/core';
 
 @Component({
   selector: 'app-example',
@@ -36,7 +37,7 @@ export class ExampleComponent implements OnInit {
     appEl.style.transition = 'none';
   }
 
-  onDragMove(event: any) {
+  onDragMove(event: CustomEvent<ModalDragEventDetail>) {
     // `progress` is a value from 1 (top) to 0 (bottom)
     const { progress } = event.detail;
 
@@ -54,7 +55,7 @@ export class ExampleComponent implements OnInit {
     appEl.style.setProperty('filter', `brightness(${brightnessValue}%)`, 'important');
   }
 
-  onDragEnd(event: any) {
+  onDragEnd(event: CustomEvent<ModalDragEventDetail>) {
     // `progress` is a value from 1 (top) to 0 (bottom)
     const { progress } = event.detail;
 

static/usage/v8/modal/card/drag-events/demo.html

@@ -20,7 +20,7 @@
     </ion-toolbar>
   </ion-header>
   <ion-content class="ion-padding">
-    <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
+    <ion-button id="open-modal" expand="block">Open Card Modal</ion-button>
 
     <ion-modal trigger="open-modal">
       <ion-header>

static/usage/v8/modal/card/drag-events/javascript.md

@@ -6,7 +6,7 @@
     </ion-toolbar>
   </ion-header>
   <ion-content class="ion-padding">
-    <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
+    <ion-button id="open-modal" expand="block">Open Card Modal</ion-button>
 
     <ion-modal trigger="open-modal">
       <ion-header>

static/usage/v8/modal/card/drag-events/react.md

@@ -1,6 +1,7 @@
 ```tsx
 import React, { useRef, useState, useEffect } from 'react';
 import { IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage, IonLabel } from '@ionic/react';
+import type { ModalDragEventDetail } from '@ionic/react';
 
 function Example() {
   const modal = useRef<HTMLIonModalElement>(null);
@@ -26,7 +27,7 @@ function Example() {
     page.current!.style.transition = 'none';
   };
 
-  const onDragMove = (event: CustomEvent) => {
+  const onDragMove = (event: CustomEvent<ModalDragEventDetail>) => {
     // `progress` is a value from 1 (top) to 0 (bottom)
     const { progress } = event.detail;
 
@@ -43,7 +44,7 @@ function Example() {
     page.current!.style.setProperty('filter', `brightness(${brightnessValue}%)`, 'important');
   };
 
-  const onDragEnd = (event: CustomEvent) => {
+  const onDragEnd = (event: CustomEvent<ModalDragEventDetail>) => {
     // `progress` is a value from 1 (top) to 0 (bottom)
     const { progress } = event.detail;
 

static/usage/v8/modal/card/drag-events/vue.md

@@ -17,7 +17,7 @@
         @ionDragStart="onDragStart()"
         @ionDragMove="onDragMove($event)"
         @ionDragEnd="onDragEnd($event)"
-        @willDismiss="onWillDismiss"
+        @willDismiss="onWillDismiss()"
       >
         <ion-header>
           <ion-toolbar>
@@ -37,6 +37,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import { IonPage, IonModal, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonLabel } from '@ionic/vue';
+import type { ModalDragEventDetail } from '@ionic/vue';
 
 const modal = ref();
 const page = ref<HTMLDivElement | null>(null);
@@ -67,7 +68,7 @@ const onDragStart = () => {
   appEl.style.transition = 'none';
 };
 
-const onDragMove = (event: CustomEvent) => {
+const onDragMove = (event: CustomEvent<ModalDragEventDetail>) => {
   // `progress` is a value from 1 (top) to 0 (bottom)
   const { progress } = event.detail;
 
@@ -85,7 +86,7 @@ const onDragMove = (event: CustomEvent) => {
   appEl.style.setProperty('filter', `brightness(${brightnessValue}%)`, 'important');
 };
 
-const onDragEnd = (event: CustomEvent) => {
+const onDragEnd = (event: CustomEvent<ModalDragEventDetail>) => {
   // `progress` is a value from 1 (top) to 0 (bottom)
   const { progress } = event.detail;
 

static/usage/v8/modal/sheet/drag-events/angular/example_component_html.md

@@ -11,7 +11,7 @@
     #modal
     trigger="open-modal"
     [initialBreakpoint]="0.25"
-    [breakpoints]="[0, 0.25, 0.5, 0.75]"
+    [breakpoints]="[0, 0.25, 0.5, 0.75, 1]"
     (ionDragStart)="onDragStart()"
     (ionDragMove)="onDragMove($event)"
     (ionDragEnd)="onDragEnd($event)"