feat(modal): add expandToScroll section

docs/api/modal.md

@@ -157,6 +157,14 @@ import SheetHandleBehaviorExample from '@site/static/usage/v8/modal/sheet/handle
 
 <SheetHandleBehaviorExample />
 
+### Scrolling content at all breakpoints
+
+Sheet modals can be configured to allow scrolling content at all breakpoints, making them ideal for displaying content larger than the viewport. By setting the `expandToScroll` property to `false`, the content remains scrollable at every breakpoint. Otherwise, by default, scrolling is only enabled when the sheet modal is fully expanded.
+
+import SheetScrollingContentExample from '@site/static/usage/v8/modal/sheet/expand-to-scroll/index.md';
+
+<SheetScrollingContentExample />
+
 ## Styling
 
 Modals are presented at the root of your application so they overlay your entire app. This behavior applies to both inline modals and modals presented from a controller. As a result, custom modal styles can not be scoped to a particular component as they will not apply to the modal. Instead, styles must be applied globally. For most developers, placing the custom styles in `global.css` is sufficient.

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

@@ -15,8 +15,8 @@
     "@angular/platform-browser": "^19.0.0",
     "@angular/platform-browser-dynamic": "^19.0.0",
     "@angular/router": "^19.0.0",
-    "@ionic/angular": "^8.0.0",
-    "@ionic/core": "^8.0.0",
+    "@ionic/angular": "8.4.4-dev.11741222721.14322935",
+    "@ionic/core": "8.4.4-dev.11741222721.14322935",
     "ionicons": "7.4.0",
     "rxjs": "^7.8.1",
     "tslib": "^2.5.0",

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

@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@ionic/core": "8.4.1",
+    "@ionic/core": "8.4.4-dev.11741222721.14322935",
     "ionicons": "7.4.0"
   }
 }

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

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ionic/react": "8.4.1",
-    "@ionic/react-router": "8.4.1",
+    "@ionic/react": "8.4.4-dev.11741222721.14322935",
+    "@ionic/react-router": "8.4.4-dev.11741222721.14322935",
     "@types/node": "^22.0.0",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.4",

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

@@ -8,8 +8,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ionic/vue": "8.4.1",
-    "@ionic/vue-router": "8.4.1",
+    "@ionic/vue": "8.4.4-dev.11741222721.14322935",
+    "@ionic/vue-router": "8.4.4-dev.11741222721.14322935",
     "vue": "^3.2.25",
     "vue-router": "4.5.0"
   },

static/usage/v8/modal/sheet/expand-to-scroll/angular/example_component_html.md

@@ -0,0 +1,165 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>App</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>
+
+  <ion-modal
+    trigger="open-modal"
+    [initialBreakpoint]="0.25"
+    [breakpoints]="[0, 0.25, 0.5, 0.75, 1]"
+    [expandToScroll]="false"
+  >
+    <ng-template>
+      <ion-content>
+        <ion-list>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=b"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Connor Smith</h2>
+              <p>Sales Rep</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img
+                alt="Silhouette of a person's head"
+                src="https://ionicframework.com/docs/img/demos/avatar.svg"
+              ></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Jack Smith</h2>
+              <p>Product Designer</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=a"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Daniel Smith</h2>
+              <p>Product Designer</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img
+                alt="Silhouette of a person's head"
+                src="https://ionicframework.com/docs/img/demos/avatar.svg"
+              ></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Claire Smith</h2>
+              <p>Graphic Designer</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=c"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Kim Smith</h2>
+              <p>Software Engineer</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img
+                alt="Silhouette of a person's head"
+                src="https://ionicframework.com/docs/img/demos/avatar.svg"
+              ></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Alex Smith</h2>
+              <p>Software Engineer</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img
+                alt="Silhouette of a person's head"
+                src="https://ionicframework.com/docs/img/demos/avatar.svg"
+              ></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Eric Smith</h2>
+              <p>Product Manager</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img
+                alt="Silhouette of a person's head"
+                src="https://ionicframework.com/docs/img/demos/avatar.svg"
+              ></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Grace Smith</h2>
+              <p>Product Manager</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img
+                alt="Silhouette of a person's head"
+                src="https://ionicframework.com/docs/img/demos/avatar.svg"
+              ></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Henry Smith</h2>
+              <p>Product Owner</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=d"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Greg Smith</h2>
+              <p>Director of Operations</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img src="https://i.pravatar.cc/300?u=e"></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Zoey Smith</h2>
+              <p>CEO</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img
+                alt="Silhouette of a person's head"
+                src="https://ionicframework.com/docs/img/demos/avatar.svg"
+              ></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Oliver Smith</h2>
+              <p>COO</p>
+            </ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-avatar slot="start">
+              <ion-img
+                alt="Silhouette of a person's head"
+                src="https://ionicframework.com/docs/img/demos/avatar.svg"
+              ></ion-img>
+            </ion-avatar>
+            <ion-label>
+              <h2>Emma Smith</h2>
+              <p>CTO</p>
+            </ion-label>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+    </ng-template>
+  </ion-modal>
+</ion-content>
+```

static/usage/v8/modal/sheet/expand-to-scroll/angular/example_component_ts.md

@@ -0,0 +1,36 @@
+```ts
+import { Component } from '@angular/core';
+import {
+  IonAvatar,
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonImg,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonModal,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+  imports: [
+    IonAvatar,
+    IonButton,
+    IonContent,
+    IonHeader,
+    IonImg,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonModal,
+    IonTitle,
+    IonToolbar,
+  ],
+})
+export class ExampleComponent {}
+```