@ionic/core 8.4.4-dev.11741105335.1f4941f2 → 8.4.4-dev.11741136034.11909e03

package/hydrate/index.mjs

@@ -3223,12 +3223,9 @@ let accordionIds = 0;
  * @param message - The string message to be logged to the console.
  */
 const printIonWarning = (message, ...params) => {
-    const logLevel = config.get('logLevel', "WARN" /* LogLevel.WARN */);
-    if (["WARN" /* LogLevel.WARN */].includes(logLevel)) {
-        return console.warn(`[Ionic Warning]: ${message}`, ...params);
-    }
+    return console.warn(`[Ionic Warning]: ${message}`, ...params);
 };
-/**
+/*
  * Logs an error to the console with an Ionic prefix
  * to indicate the library that is warning the developer.
  *
@@ -3236,10 +3233,7 @@ const printIonWarning = (message, ...params) => {
  * @param params - Additional arguments to supply to the console.error.
  */
 const printIonError = (message, ...params) => {
-    const logLevel = config.get('logLevel', "ERROR" /* LogLevel.ERROR */);
-    if (["ERROR" /* LogLevel.ERROR */, "WARN" /* LogLevel.WARN */].includes(logLevel)) {
-        return console.error(`[Ionic Error]: ${message}`, ...params);
-    }
+    return console.error(`[Ionic Error]: ${message}`, ...params);
 };
 /**
  * Prints an error informing developers that an implementation requires an element to be used
@@ -7003,6 +6997,7 @@ class Alert {
         }
     }
     onKeydown(ev) {
+        var _a;
         const inputTypes = new Set(this.processedInputs.map((i) => i.type));
         /**
          * Based on keyboard navigation requirements, the
@@ -7012,6 +7007,17 @@ class Alert {
             ev.preventDefault();
             return;
         }
+        /**
+         * Ensure when alert container is being focused, and the user presses the tab + shift keys, the focus will be set to the last alert button.
+         */
+        if (ev.target.classList.contains('alert-wrapper')) {
+            if (ev.key === 'Tab' && ev.shiftKey) {
+                ev.preventDefault();
+                const lastChildBtn = (_a = this.wrapperEl) === null || _a === void 0 ? void 0 : _a.querySelector('.alert-button:last-child');
+                lastChildBtn.focus();
+                return;
+            }
+        }
         // The only inputs we want to navigate between using arrow keys are the radios
         // ignore the keydown event if it is not on a radio button
         if (!inputTypes.has('radio') ||
@@ -7143,7 +7149,16 @@ class Alert {
     async present() {
         const unlock = await this.lockController.lock();
         await this.delegateController.attachViewToDom();
-        await present(this, 'alertEnter', iosEnterAnimation$5, mdEnterAnimation$4);
+        await present(this, 'alertEnter', iosEnterAnimation$5, mdEnterAnimation$4).then(() => {
+            var _a, _b;
+            if (this.buttons.length === 1 && this.inputs.length === 0) {
+                const queryBtn = (_a = this.wrapperEl) === null || _a === void 0 ? void 0 : _a.querySelector('.alert-button');
+                queryBtn.focus();
+            }
+            else {
+                (_b = this.wrapperEl) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+        });
         unlock();
     }
     /**
@@ -7315,8 +7330,8 @@ class Alert {
         const { overlayIndex, header, subHeader, message, htmlAttributes } = this;
         const mode = getIonMode$1(this);
         const hdrId = `alert-${overlayIndex}-hdr`;
-        const subHdrId = `alert-${overlayIndex}-sub-hdr`;
         const msgId = `alert-${overlayIndex}-msg`;
+        const subHdrId = `alert-${overlayIndex}-sub-hdr`;
         const role = this.inputs.length > 0 || this.buttons.length > 0 ? 'alertdialog' : 'alert';
         /**
          * Use both the header and subHeader ids if they are defined.
@@ -7325,9 +7340,9 @@ class Alert {
          * If neither are defined, do not set aria-labelledby.
          */
         const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
-        return (hAsync(Host, Object.assign({ key: 'ad7e14b4f92a09387aa80abfb718a755e4e889d6', role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, { key: 'cf4106a77213c7a9ca510a2b9fda47a179c03844', tabindex: "-1", style: {
                 zIndex: `${20000 + overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), hAsync("ion-backdrop", { key: '4b4693dca3c910aa9a61c4d90295d785ec6cbe3d', tappable: this.backdropDismiss }), hAsync("div", { key: '64fd19b8f1d8246dcc869053f858bc33506def4b', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'e61ba6f339c3a02cecd37d8b641ee5043018eb29', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, hAsync("div", { key: '044e00667ffcb74aa2c5e0d0b42669c4004dbb4f', class: "alert-head" }, header && (hAsync("h2", { key: '1aaae8d58722c4cf5debb1f00415ab7ed0a52bbd', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (hAsync("h2", { key: '9c9854dc3b0ad40f1861a49b76d5636afcae9c74', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (hAsync("h3", { key: '19aaca9912f77cde4ae8079be210eda697ed8de1', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), hAsync("div", { key: 'a85d27c516f7cdbc85b19f40d2f0bd865490b6a7', tabindex: "0", "aria-hidden": "true" })));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, hAsync("ion-backdrop", { key: '8bd13553c3bc548367a84dba8955940b2a43d782', tappable: this.backdropDismiss }), hAsync("div", { key: '4a89918ab6f0f4eb8be3da4703cffe1469b765c0', tabindex: "0", "aria-hidden": "true" }), hAsync("div", Object.assign({ key: '28fee816801cb7f08d1f0ff7e8f277732cadfd2b', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el) }, htmlAttributes), hAsync("div", { key: 'e0f4a19b352fbea1db65ff28fbb9ebfdd8600583', class: "alert-head" }, header && (hAsync("h2", { key: 'e47f9b036c9179d4cea955d97770fed1e58a2ad3', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (hAsync("h2", { key: '95f90fb025f4e29d5e5d78f787733d2321300787', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (hAsync("h3", { key: '73488f2d301d1579e4457fcc8d01e8b6f133b849', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), hAsync("div", { key: '8c6767195aeadf99da422f6e55d5c47b1d64562a', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -8503,7 +8518,6 @@ class Checkbox {
         this.labelPlacement = 'start';
         this.justify = undefined;
         this.alignment = undefined;
-        this.required = false;
     }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
@@ -8515,11 +8529,11 @@ class Checkbox {
         }
     }
     render() {
-        const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, required, } = this;
+        const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, } = this;
         const mode = getIonMode$1(this);
         const path = getSVGPath(mode, indeterminate);
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (hAsync(Host, { key: '07a5884062dd256b570e856270c74a5a09d2f2a5', "aria-checked": indeterminate ? 'mixed' : `${checked}`, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '6dc787e1100521d08c4900104e1a3e2f594e919f', "aria-checked": indeterminate ? 'mixed' : `${checked}`, class: createColorClasses$1(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'checkbox-checked': checked,
@@ -8529,10 +8543,10 @@ class Checkbox {
                 [`checkbox-justify-${justify}`]: justify !== undefined,
                 [`checkbox-alignment-${alignment}`]: alignment !== undefined,
                 [`checkbox-label-placement-${labelPlacement}`]: true,
-            }), onClick: this.onClick }, hAsync("label", { key: '3439d546e8b60187421db698eab63a0bdd31c973', class: "checkbox-wrapper" }, hAsync("input", Object.assign({ key: '9f45cf7dbdedcf01ec132c11e16979adb1aa102f', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, inheritedAttributes)), hAsync("div", { key: '4e882f98939cc4b7c7ab7459c751d3f4bb2023fe', class: {
+            }), onClick: this.onClick }, hAsync("label", { key: '68222fb736a5ec3f2e488649b0e2ce0417dcb224', class: "checkbox-wrapper" }, hAsync("input", Object.assign({ key: 'f12962d7e9b19c744cfdbdeccc67ae7f5d080281', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, inheritedAttributes)), hAsync("div", { key: 'c72df2699414b1e5a41a1bc267bc634f0c93dcff', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': el.textContent === '',
-            }, part: "label" }, hAsync("slot", { key: '0abda81297a086d02c4a56af75005547971dfcfe' })), hAsync("div", { key: '36489ea3f48a7d0ec46b77c243f9f253ef5c2b3b', class: "native-wrapper" }, hAsync("svg", { key: '4c53b52f5e93752672a34eb6f180b75fa9af9046', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
+            }, part: "label" }, hAsync("slot", { key: 'a2a80285178a7e0e3b536fc9ca26b8b444aa4307' })), hAsync("div", { key: 'c2b05e0d1fe8df5dcd72858220b5ff51ecaee4cc', class: "native-wrapper" }, hAsync("svg", { key: 'ee24913fded72258ebd9713654a6dba92a18fcf7', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
     }
     getSVGPath(mode, indeterminate) {
         let path = indeterminate ? (hAsync("path", { d: "M6 12L18 12", part: "mark" })) : (hAsync("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));
@@ -8559,7 +8573,6 @@ class Checkbox {
             "labelPlacement": [1, "label-placement"],
             "justify": [1],
             "alignment": [1],
-            "required": [4],
             "setFocus": [64]
         },
         "$listeners$": undefined,
@@ -19035,7 +19048,7 @@ const computeDuration = (remaining, velocity) => {
 };
 
 const createSheetEnterAnimation = (opts) => {
-    const { currentBreakpoint, backdropBreakpoint, expandToScroll } = opts;
+    const { currentBreakpoint, backdropBreakpoint } = opts;
     /**
      * If the backdropBreakpoint is undefined, then the backdrop
      * should always fade in. If the backdropBreakpoint came before the
@@ -19055,16 +19068,7 @@ const createSheetEnterAnimation = (opts) => {
         { offset: 0, opacity: 1, transform: 'translateY(100%)' },
         { offset: 1, opacity: 1, transform: `translateY(${100 - currentBreakpoint * 100}%)` },
     ]);
-    /**
-     * This allows the content to be scrollable at any breakpoint.
-     */
-    const contentAnimation = !expandToScroll
-        ? createAnimation('contentAnimation').keyframes([
-            { offset: 0, opacity: 1, maxHeight: `${(1 - currentBreakpoint) * 100}%` },
-            { offset: 1, opacity: 1, maxHeight: `${currentBreakpoint * 100}%` },
-        ])
-        : undefined;
-    return { wrapperAnimation, backdropAnimation, contentAnimation };
+    return { wrapperAnimation, backdropAnimation };
 };
 const createSheetLeaveAnimation = (opts) => {
     const { currentBreakpoint, backdropBreakpoint } = opts;
@@ -19099,68 +19103,22 @@ const createEnterAnimation$1 = () => {
     })
         .afterClearStyles(['pointer-events']);
     const wrapperAnimation = createAnimation().fromTo('transform', 'translateY(100vh)', 'translateY(0vh)');
-    return { backdropAnimation, wrapperAnimation, contentAnimation: undefined };
+    return { backdropAnimation, wrapperAnimation };
 };
 /**
  * iOS Modal Enter Animation for the Card presentation style
  */
 const iosEnterAnimation$3 = (baseEl, opts) => {
-    const { presentingEl, currentBreakpoint, expandToScroll } = opts;
+    const { presentingEl, currentBreakpoint } = opts;
     const root = getElementRoot(baseEl);
-    const { wrapperAnimation, backdropAnimation, contentAnimation } = currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation$1();
+    const { wrapperAnimation, backdropAnimation } = currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation$1();
     backdropAnimation.addElement(root.querySelector('ion-backdrop'));
     wrapperAnimation.addElement(root.querySelectorAll('.modal-wrapper, .modal-shadow')).beforeStyles({ opacity: 1 });
-    // The content animation is only added if scrolling is enabled for
-    // all the breakpoints.
-    !expandToScroll && (contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.addElement(baseEl.querySelector('.ion-page')));
     const baseAnimation = createAnimation('entering-base')
         .addElement(baseEl)
         .easing('cubic-bezier(0.32,0.72,0,1)')
         .duration(500)
-        .addAnimation([wrapperAnimation])
-        .beforeAddWrite(() => {
-        if (expandToScroll) {
-            // Scroll can only be done when the modal is fully expanded.
-            return;
-        }
-        /**
-         * There are some browsers that causes flickering when
-         * dragging the content when scroll is enabled at every
-         * breakpoint. This is due to the wrapper element being
-         * transformed off the screen and having a snap animation.
-         *
-         * A workaround is to clone the footer element and append
-         * it outside of the wrapper element. This way, the footer
-         * is still visible and the drag can be done without
-         * flickering. The original footer is hidden until the modal
-         * is dismissed. This maintains the animation of the footer
-         * when the modal is dismissed.
-         *
-         * The workaround needs to be done before the animation starts
-         * so there are no flickering issues.
-         */
-        const ionFooter = baseEl.querySelector('ion-footer');
-        /**
-         * This check is needed to prevent more than one footer
-         * from being appended to the shadow root.
-         * Otherwise, iOS and MD enter animations would append
-         * the footer twice.
-         */
-        const ionFooterAlreadyAppended = baseEl.shadowRoot.querySelector('ion-footer');
-        if (ionFooter && !ionFooterAlreadyAppended) {
-            const footerHeight = ionFooter.clientHeight;
-            const clonedFooter = ionFooter.cloneNode(true);
-            baseEl.shadowRoot.appendChild(clonedFooter);
-            ionFooter.style.setProperty('display', 'none');
-            ionFooter.setAttribute('aria-hidden', 'true');
-            // Padding is added to prevent some content from being hidden.
-            const page = baseEl.querySelector('.ion-page');
-            page.style.setProperty('padding-bottom', `${footerHeight}px`);
-        }
-    });
-    if (contentAnimation) {
-        baseAnimation.addAnimation(contentAnimation);
-    }
+        .addAnimation(wrapperAnimation);
     if (presentingEl) {
         const isMobile = window.innerWidth < 768;
         const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
@@ -19238,7 +19196,7 @@ const createLeaveAnimation$1 = () => {
  * iOS Modal Leave Animation
  */
 const iosLeaveAnimation$3 = (baseEl, opts, duration = 500) => {
-    const { presentingEl, currentBreakpoint, expandToScroll } = opts;
+    const { presentingEl, currentBreakpoint } = opts;
     const root = getElementRoot(baseEl);
     const { wrapperAnimation, backdropAnimation } = currentBreakpoint !== undefined ? createSheetLeaveAnimation(opts) : createLeaveAnimation$1();
     backdropAnimation.addElement(root.querySelector('ion-backdrop'));
@@ -19247,29 +19205,7 @@ const iosLeaveAnimation$3 = (baseEl, opts, duration = 500) => {
         .addElement(baseEl)
         .easing('cubic-bezier(0.32,0.72,0,1)')
         .duration(duration)
-        .addAnimation(wrapperAnimation)
-        .beforeAddWrite(() => {
-        if (expandToScroll) {
-            // Scroll can only be done when the modal is fully expanded.
-            return;
-        }
-        /**
-         * If expandToScroll is disabled, we need to swap
-         * the visibility to the original, so the footer
-         * dismisses with the modal and doesn't stay
-         * until the modal is removed from the DOM.
-         */
-        const ionFooter = baseEl.querySelector('ion-footer');
-        if (ionFooter) {
-            const clonedFooter = baseEl.shadowRoot.querySelector('ion-footer');
-            ionFooter.style.removeProperty('display');
-            ionFooter.removeAttribute('aria-hidden');
-            clonedFooter.style.setProperty('display', 'none');
-            clonedFooter.setAttribute('aria-hidden', 'true');
-            const page = baseEl.querySelector('.ion-page');
-            page.style.removeProperty('padding-bottom');
-        }
-    });
+        .addAnimation(wrapperAnimation);
     if (presentingEl) {
         const isMobile = window.innerWidth < 768;
         const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
@@ -19347,69 +19283,22 @@ const createEnterAnimation = () => {
         { offset: 0, opacity: 0.01, transform: 'translateY(40px)' },
         { offset: 1, opacity: 1, transform: `translateY(0px)` },
     ]);
-    return { backdropAnimation, wrapperAnimation, contentAnimation: undefined };
+    return { backdropAnimation, wrapperAnimation };
 };
 /**
  * Md Modal Enter Animation
  */
 const mdEnterAnimation$2 = (baseEl, opts) => {
-    const { currentBreakpoint, expandToScroll } = opts;
+    const { currentBreakpoint } = opts;
     const root = getElementRoot(baseEl);
-    const { wrapperAnimation, backdropAnimation, contentAnimation } = currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation();
+    const { wrapperAnimation, backdropAnimation } = currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation();
     backdropAnimation.addElement(root.querySelector('ion-backdrop'));
     wrapperAnimation.addElement(root.querySelector('.modal-wrapper'));
-    // The content animation is only added if scrolling is enabled for
-    // all the breakpoints.
-    expandToScroll && (contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.addElement(baseEl.querySelector('.ion-page')));
-    const baseAnimation = createAnimation()
+    return createAnimation()
         .addElement(baseEl)
         .easing('cubic-bezier(0.36,0.66,0.04,1)')
         .duration(280)
-        .addAnimation([backdropAnimation, wrapperAnimation])
-        .beforeAddWrite(() => {
-        if (expandToScroll) {
-            // Scroll can only be done when the modal is fully expanded.
-            return;
-        }
-        /**
-         * There are some browsers that causes flickering when
-         * dragging the content when scroll is enabled at every
-         * breakpoint. This is due to the wrapper element being
-         * transformed off the screen and having a snap animation.
-         *
-         * A workaround is to clone the footer element and append
-         * it outside of the wrapper element. This way, the footer
-         * is still visible and the drag can be done without
-         * flickering. The original footer is hidden until the modal
-         * is dismissed. This maintains the animation of the footer
-         * when the modal is dismissed.
-         *
-         * The workaround needs to be done before the animation starts
-         * so there are no flickering issues.
-         */
-        const ionFooter = baseEl.querySelector('ion-footer');
-        /**
-         * This check is needed to prevent more than one footer
-         * from being appended to the shadow root.
-         * Otherwise, iOS and MD enter animations would append
-         * the footer twice.
-         */
-        const ionFooterAlreadyAppended = baseEl.shadowRoot.querySelector('ion-footer');
-        if (ionFooter && !ionFooterAlreadyAppended) {
-            const footerHeight = ionFooter.clientHeight;
-            const clonedFooter = ionFooter.cloneNode(true);
-            baseEl.shadowRoot.appendChild(clonedFooter);
-            ionFooter.style.setProperty('display', 'none');
-            ionFooter.setAttribute('aria-hidden', 'true');
-            // Padding is added to prevent some content from being hidden.
-            const page = baseEl.querySelector('.ion-page');
-            page.style.setProperty('padding-bottom', `${footerHeight}px`);
-        }
-    });
-    if (contentAnimation) {
-        baseAnimation.addAnimation(contentAnimation);
-    }
-    return baseAnimation;
+        .addAnimation([backdropAnimation, wrapperAnimation]);
 };
 
 const createLeaveAnimation = () => {
@@ -19424,41 +19313,18 @@ const createLeaveAnimation = () => {
  * Md Modal Leave Animation
  */
 const mdLeaveAnimation$2 = (baseEl, opts) => {
-    const { currentBreakpoint, expandToScroll } = opts;
+    const { currentBreakpoint } = opts;
     const root = getElementRoot(baseEl);
     const { wrapperAnimation, backdropAnimation } = currentBreakpoint !== undefined ? createSheetLeaveAnimation(opts) : createLeaveAnimation();
     backdropAnimation.addElement(root.querySelector('ion-backdrop'));
     wrapperAnimation.addElement(root.querySelector('.modal-wrapper'));
-    const baseAnimation = createAnimation()
+    return createAnimation()
         .easing('cubic-bezier(0.47,0,0.745,0.715)')
         .duration(200)
-        .addAnimation([backdropAnimation, wrapperAnimation])
-        .beforeAddWrite(() => {
-        if (expandToScroll) {
-            // Scroll can only be done when the modal is fully expanded.
-            return;
-        }
-        /**
-         * If expandToScroll is disabled, we need to swap
-         * the visibility to the original, so the footer
-         * dismisses with the modal and doesn't stay
-         * until the modal is removed from the DOM.
-         */
-        const ionFooter = baseEl.querySelector('ion-footer');
-        if (ionFooter) {
-            const clonedFooter = baseEl.shadowRoot.querySelector('ion-footer');
-            ionFooter.style.removeProperty('display');
-            ionFooter.removeAttribute('aria-hidden');
-            clonedFooter.style.setProperty('display', 'none');
-            clonedFooter.setAttribute('aria-hidden', 'true');
-            const page = baseEl.querySelector('.ion-page');
-            page.style.removeProperty('padding-bottom');
-        }
-    });
-    return baseAnimation;
+        .addAnimation([backdropAnimation, wrapperAnimation]);
 };
 
-const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange) => {
+const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], getCurrentBreakpoint, onDismiss, onBreakpointChange) => {
     // Defaults for the sheet swipe animation
     const defaultBackdrop = [
         { offset: 0, opacity: 'var(--backdrop-opacity)' },
@@ -19475,10 +19341,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
             { offset: 1, transform: 'translateY(100%)' },
         ],
         BACKDROP_KEYFRAMES: backdropBreakpoint !== 0 ? customBackdrop : defaultBackdrop,
-        CONTENT_KEYFRAMES: [
-            { offset: 0, maxHeight: '100%' },
-            { offset: 1, maxHeight: '0%' },
-        ],
     };
     const contentEl = baseEl.querySelector('ion-content');
     const height = wrapperEl.clientHeight;
@@ -19486,11 +19348,10 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
     let offset = 0;
     let canDismissBlocksGesture = false;
     const canDismissMaxStep = 0.95;
-    const maxBreakpoint = breakpoints[breakpoints.length - 1];
-    const minBreakpoint = breakpoints[0];
     const wrapperAnimation = animation.childAnimations.find((ani) => ani.id === 'wrapperAnimation');
     const backdropAnimation = animation.childAnimations.find((ani) => ani.id === 'backdropAnimation');
-    const contentAnimation = animation.childAnimations.find((ani) => ani.id === 'contentAnimation');
+    const maxBreakpoint = breakpoints[breakpoints.length - 1];
+    const minBreakpoint = breakpoints[0];
     const enableBackdrop = () => {
         baseEl.style.setProperty('pointer-events', 'auto');
         backdropEl.style.setProperty('pointer-events', 'auto');
@@ -19513,31 +19374,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
          */
         baseEl.classList.add(FOCUS_TRAP_DISABLE_CLASS);
     };
-    /**
-     * Toggles the visible modal footer when `expandToScroll` is disabled.
-     * @param footer The footer to show.
-     */
-    const swapFooterVisibility = (footer) => {
-        const originalFooter = baseEl.querySelector('ion-footer');
-        if (!originalFooter) {
-            return;
-        }
-        const clonedFooter = wrapperEl.nextElementSibling;
-        const footerToHide = footer === 'original' ? clonedFooter : originalFooter;
-        const footerToShow = footer === 'original' ? originalFooter : clonedFooter;
-        footerToShow.style.removeProperty('display');
-        footerToShow.removeAttribute('aria-hidden');
-        const page = baseEl.querySelector('.ion-page');
-        if (footer === 'original') {
-            page.style.removeProperty('padding-bottom');
-        }
-        else {
-            const pagePadding = footerToShow.clientHeight;
-            page.style.setProperty('padding-bottom', `${pagePadding}px`);
-        }
-        footerToHide.style.setProperty('display', 'none');
-        footerToHide.setAttribute('aria-hidden', 'true');
-    };
     /**
      * After the entering animation completes,
      * we need to set the animation to go from
@@ -19549,7 +19385,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
     if (wrapperAnimation && backdropAnimation) {
         wrapperAnimation.keyframes([...SheetDefaults.WRAPPER_KEYFRAMES]);
         backdropAnimation.keyframes([...SheetDefaults.BACKDROP_KEYFRAMES]);
-        contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.keyframes([...SheetDefaults.CONTENT_KEYFRAMES]);
         animation.progressStart(true, 1 - currentBreakpoint);
         /**
          * If backdrop is not enabled, then content
@@ -19566,7 +19401,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
             disableBackdrop();
         }
     }
-    if (contentEl && currentBreakpoint !== maxBreakpoint && expandToScroll) {
+    if (contentEl && currentBreakpoint !== maxBreakpoint) {
         contentEl.scrollY = false;
     }
     const canStart = (detail) => {
@@ -19580,13 +19415,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
          */
         const contentEl = findClosestIonContent(detail.event.target);
         currentBreakpoint = getCurrentBreakpoint();
-        /**
-         * If we have expandToScroll disabled, we should not allow the swipe gesture to start
-         * if the content is being swiped.
-         */
-        if (!expandToScroll && contentEl) {
-            return false;
-        }
         if (currentBreakpoint === 1 && contentEl) {
             /**
              * The modal should never swipe to close on the content with a refresher.
@@ -19617,15 +19445,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
          * Remove undefined check
          */
         canDismissBlocksGesture = baseEl.canDismiss !== undefined && baseEl.canDismiss !== true && minBreakpoint === 0;
-        /**
-         * If expandToScroll is disabled, we need to swap
-         * the footer visibility to the original, so if the modal
-         * is dismissed, the footer dismisses with the modal
-         * and doesn't stay on the screen after the modal is gone.
-         */
-        if (!expandToScroll) {
-            swapFooterVisibility('original');
-        }
         /**
          * If we are pulling down, then it is possible we are pulling on the content.
          * We do not want scrolling to happen at the same time as the gesture.
@@ -19741,19 +19560,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
                     opacity: `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(snapToBreakpoint, backdropBreakpoint)})`,
                 },
             ]);
-            if (contentAnimation) {
-                /**
-                 * The modal content should scroll at any breakpoint when expandToScroll
-                 * is disabled. In order to do this, the content needs to be completely
-                 * viewable so scrolling can access everything. Otherwise, the default
-                 * behavior would show the content off the screen and only allow
-                 * scrolling when the sheet is fully expanded.
-                 */
-                contentAnimation.keyframes([
-                    { offset: 0, maxHeight: `${(1 - breakpointOffset) * 100}%` },
-                    { offset: 1, maxHeight: `${snapToBreakpoint * 100}%` },
-                ]);
-            }
             animation.progressStep(0);
         }
         /**
@@ -19761,14 +19567,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
          * snapping animation completes.
          */
         gesture.enable(false);
-        /**
-         * If expandToScroll is disabled, we need to swap
-         * the footer visibility to the cloned one so the footer
-         * doesn't flicker when the sheet's height is animated.
-         */
-        if (!expandToScroll && shouldRemainOpen) {
-            swapFooterVisibility('cloned');
-        }
         if (shouldPreventDismiss) {
             handleCanDismiss(baseEl, animation);
         }
@@ -19776,13 +19574,13 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
             onDismiss();
         }
         /**
-         * Enables scrolling immediately if the sheet is about to fully expand
-         * or if it allows scrolling at any breakpoint. Without this, there would
-         * be a ~500ms delay while the modal animation completes, causing a
-         * noticeable lag. Native iOS allows scrolling as soon as the gesture is
-         * released, so we align with that behavior.
+         * If the sheet is going to be fully expanded then we should enable
+         * scrolling immediately. The sheet modal animation takes ~500ms to finish
+         * so if we wait until then there is a visible delay for when scrolling is
+         * re-enabled. Native iOS allows for scrolling on the sheet modal as soon
+         * as the gesture is released, so we align with that.
          */
-        if (contentEl && (snapToBreakpoint === breakpoints[breakpoints.length - 1] || !expandToScroll)) {
+        if (contentEl && snapToBreakpoint === breakpoints[breakpoints.length - 1]) {
             contentEl.scrollY = true;
         }
         return new Promise((resolve) => {
@@ -19800,7 +19598,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
                         raf(() => {
                             wrapperAnimation.keyframes([...SheetDefaults.WRAPPER_KEYFRAMES]);
                             backdropAnimation.keyframes([...SheetDefaults.BACKDROP_KEYFRAMES]);
-                            contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.keyframes([...SheetDefaults.CONTENT_KEYFRAMES]);
                             animation.progressStart(true, 1 - snapToBreakpoint);
                             currentBreakpoint = snapToBreakpoint;
                             onBreakpointChange(currentBreakpoint);
@@ -19853,10 +19650,10 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
     };
 };
 
-const modalIosCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.4)}:host(.modal-card),:host(.modal-sheet){--border-radius:10px}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:10px}}.modal-wrapper{-webkit-transform:translate3d(0,  100%,  0);transform:translate3d(0,  100%,  0)}@media screen and (max-width: 767px){@supports (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - max(30px, var(--ion-safe-area-top)) - 10px)}}@supports not (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - 40px)}}:host(.modal-card) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-card){--backdrop-opacity:0;--width:100%;-ms-flex-align:end;align-items:flex-end}:host(.modal-card) .modal-shadow{display:none}:host(.modal-card) ion-backdrop{pointer-events:none}}@media screen and (min-width: 768px){:host(.modal-card){--width:calc(100% - 120px);--height:calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));--max-width:720px;--max-height:1000px;--backdrop-opacity:0;--box-shadow:0px 0px 30px 10px rgba(0, 0, 0, 0.1);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{-webkit-box-shadow:none;box-shadow:none}:host(.modal-card) .modal-shadow{-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer ion-toolbar:first-of-type{padding-top:6px}";
+const modalIosCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.4)}:host(.modal-card),:host(.modal-sheet){--border-radius:10px}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:10px}}.modal-wrapper{-webkit-transform:translate3d(0,  100%,  0);transform:translate3d(0,  100%,  0)}@media screen and (max-width: 767px){@supports (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - max(30px, var(--ion-safe-area-top)) - 10px)}}@supports not (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - 40px)}}:host(.modal-card) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-card){--backdrop-opacity:0;--width:100%;-ms-flex-align:end;align-items:flex-end}:host(.modal-card) .modal-shadow{display:none}:host(.modal-card) ion-backdrop{pointer-events:none}}@media screen and (min-width: 768px){:host(.modal-card){--width:calc(100% - 120px);--height:calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));--max-width:720px;--max-height:1000px;--backdrop-opacity:0;--box-shadow:0px 0px 30px 10px rgba(0, 0, 0, 0.1);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{-webkit-box-shadow:none;box-shadow:none}:host(.modal-card) .modal-shadow{-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}";
 var IonModalIosStyle0 = modalIosCss;
 
-const modalMdCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:2px;--box-shadow:0 28px 48px rgba(0, 0, 0, 0.4)}}.modal-wrapper{-webkit-transform:translate3d(0,  40px,  0);transform:translate3d(0,  40px,  0);opacity:0.01}";
+const modalMdCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:2px;--box-shadow:0 28px 48px rgba(0, 0, 0, 0.4)}}.modal-wrapper{-webkit-transform:translate3d(0,  40px,  0);transform:translate3d(0,  40px,  0);opacity:0.01}";
 var IonModalMdStyle0 = modalMdCss;
 
 // TODO(FW-2832): types
@@ -19935,7 +19732,6 @@ class Modal {
         this.enterAnimation = undefined;
         this.leaveAnimation = undefined;
         this.breakpoints = undefined;
-        this.expandToScroll = true;
         this.initialBreakpoint = undefined;
         this.backdropBreakpoint = 0;
         this.handle = undefined;
@@ -20151,7 +19947,6 @@ class Modal {
             presentingEl: presentingElement,
             currentBreakpoint: this.initialBreakpoint,
             backdropBreakpoint: this.backdropBreakpoint,
-            expandToScroll: this.expandToScroll,
         });
         /* tslint:disable-next-line */
         if (typeof window !== 'undefined') {
@@ -20202,10 +19997,7 @@ class Modal {
         // should be in the DOM and referenced by now, except
         // for the presenting el
         const animationBuilder = this.leaveAnimation || config.get('modalLeave', iosLeaveAnimation$3);
-        const ani = (this.animation = animationBuilder(el, {
-            presentingEl: this.presentingElement,
-            expandToScroll: this.expandToScroll,
-        }));
+        const ani = (this.animation = animationBuilder(el, { presentingEl: this.presentingElement }));
         const contentEl = findIonContent(el);
         if (!contentEl) {
             printIonContentErrorMsg(el);
@@ -20250,10 +20042,9 @@ class Modal {
             presentingEl: this.presentingElement,
             currentBreakpoint: initialBreakpoint,
             backdropBreakpoint,
-            expandToScroll: this.expandToScroll,
         }));
         ani.progressStart(true, 1);
-        const { gesture, moveSheetToBreakpoint } = createSheetGesture(this.el, this.backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, ani, this.sortedBreakpoints, this.expandToScroll, () => { var _a; return (_a = this.currentBreakpoint) !== null && _a !== void 0 ? _a : 0; }, () => this.sheetOnDismiss(), (breakpoint) => {
+        const { gesture, moveSheetToBreakpoint } = createSheetGesture(this.el, this.backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, ani, this.sortedBreakpoints, () => { var _a; return (_a = this.currentBreakpoint) !== null && _a !== void 0 ? _a : 0; }, () => this.sheetOnDismiss(), (breakpoint) => {
             if (this.currentBreakpoint !== breakpoint) {
                 this.currentBreakpoint = breakpoint;
                 this.ionBreakpointDidChange.emit({ breakpoint });
@@ -20331,7 +20122,6 @@ class Modal {
             presentingEl: presentingElement,
             currentBreakpoint: (_a = this.currentBreakpoint) !== null && _a !== void 0 ? _a : this.initialBreakpoint,
             backdropBreakpoint: this.backdropBreakpoint,
-            expandToScroll: this.expandToScroll,
         });
         if (dismissed) {
             const { delegate } = this.getDelegate();
@@ -20417,23 +20207,23 @@ class Modal {
         return true;
     }
     render() {
-        const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap, expandToScroll, } = this;
+        const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap } = this;
         const showHandle = handle !== false && isSheetModal;
         const mode = getIonMode$1(this);
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
-        return (hAsync(Host, Object.assign({ key: 'ff15df63e72caaeb0a4ad68e9eedeaaa7d3f3bde', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: 'b4da5111fe4719fa450c39b2d4bd884a302a7924', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), hAsync("ion-backdrop", { key: '27a73655779af9d175a829d3d2d29e42fd2a63ee', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: '406a65080087e7895026ecc2f04e9d707439e86f', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '8e410eb925374158996c82cbbd522f07d741679e',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), hAsync("ion-backdrop", { key: 'c12dbf747e0eb914eaf1331798548ffc7e147763', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: 'da546ee80c6576b5acc66e959fd5009e0b9a8160', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '306ebe6427440ad5f7ed36d590e562d15a503b75',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
               shadow DOM otherwise ion-button will not be highlighted
               when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
             */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '7326c969ebe5a70a35e83b09d3db2bb848c90e47', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: 'c5d17e346fe255a7c0cacbbf15c0083f2d09c488', class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), hAsync("slot", { key: '0b65cdb9e337a27edf437b9e754e79f1449c217d' }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), hAsync("slot", { key: '5cc714170a00b67f3eda0cd1d6f37c1489a99c83' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -20455,7 +20245,6 @@ class Modal {
             "enterAnimation": [16],
             "leaveAnimation": [16],
             "breakpoints": [16],
-            "expandToScroll": [4, "expand-to-scroll"],
             "initialBreakpoint": [2, "initial-breakpoint"],
             "backdropBreakpoint": [2, "backdrop-breakpoint"],
             "handle": [4],
@@ -29930,7 +29719,6 @@ class Select {
         this.expandedIcon = undefined;
         this.shape = undefined;
         this.value = undefined;
-        this.required = false;
     }
     styleChanged() {
         this.emitStyle();
@@ -29986,8 +29774,15 @@ class Select {
         }
         this.isExpanded = true;
         const overlay = (this.overlay = await this.createOverlay(event));
-        // Add logic to scroll selected item into view before presenting
-        const scrollSelectedIntoView = () => {
+        overlay.onDidDismiss().then(() => {
+            this.overlay = undefined;
+            this.isExpanded = false;
+            this.ionDismiss.emit();
+            this.setFocus();
+        });
+        await overlay.present();
+        // focus selected option for popovers and modals
+        if (this.interface === 'popover' || this.interface === 'modal') {
             const indexOfSelected = this.childOpts.findIndex((o) => o.value === this.value);
             if (indexOfSelected > -1) {
                 const selectedItem = overlay.querySelector(`.select-interface-option:nth-child(${indexOfSelected + 1})`);
@@ -30005,7 +29800,6 @@ class Select {
                      */
                     const interactiveEl = selectedItem.querySelector('ion-radio, ion-checkbox');
                     if (interactiveEl) {
-                        selectedItem.scrollIntoView({ block: 'nearest' });
                         // Needs to be called before `focusVisibleElement` to prevent issue with focus event bubbling
                         // and removing `ion-focused` style
                         interactiveEl.setFocus();
@@ -30029,40 +29823,7 @@ class Select {
                     focusVisibleElement(firstEnabledOption.closest('ion-item'));
                 }
             }
-        };
-        // For modals and popovers, we can scroll before they're visible
-        if (this.interface === 'modal') {
-            overlay.addEventListener('ionModalWillPresent', scrollSelectedIntoView, { once: true });
-        }
-        else if (this.interface === 'popover') {
-            overlay.addEventListener('ionPopoverWillPresent', scrollSelectedIntoView, { once: true });
-        }
-        else {
-            /**
-             * For alerts and action sheets, we need to wait a frame after willPresent
-             * because these overlays don't have their content in the DOM immediately
-             * when willPresent fires. By waiting a frame, we ensure the content is
-             * rendered and can be properly scrolled into view.
-             */
-            const scrollAfterRender = () => {
-                requestAnimationFrame(() => {
-                    scrollSelectedIntoView();
-                });
-            };
-            if (this.interface === 'alert') {
-                overlay.addEventListener('ionAlertWillPresent', scrollAfterRender, { once: true });
-            }
-            else if (this.interface === 'action-sheet') {
-                overlay.addEventListener('ionActionSheetWillPresent', scrollAfterRender, { once: true });
-            }
         }
-        overlay.onDidDismiss().then(() => {
-            this.overlay = undefined;
-            this.isExpanded = false;
-            this.ionDismiss.emit();
-            this.setFocus();
-        });
-        await overlay.present();
         return overlay;
     }
     createOverlay(ev) {
@@ -30442,8 +30203,8 @@ class Select {
         return renderedLabel;
     }
     renderListbox() {
-        const { disabled, inputId, isExpanded, required } = this;
-        return (hAsync("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, "aria-required": `${required}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
+        const { disabled, inputId, isExpanded } = this;
+        return (hAsync("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
     }
     render() {
         const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value } = this;
@@ -30474,7 +30235,7 @@ class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (hAsync(Host, { key: 'f7cf03de773cd85da42978e274d65cc1eb6ed8a3', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '144dfa5c49549a74fe516c65b9b8104a477ac789', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -30490,7 +30251,7 @@ class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, hAsync("label", { key: '91674f8f5cce37c87a7096d09b3f1d351cba1527', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), hAsync("div", { key: '2229333833047db13ed2a01cb10bb6e6f774031d', class: "select-wrapper-inner" }, hAsync("slot", { key: 'f2766bdf8bff261efa5711f72d9edef407e45189', name: "start" }), hAsync("div", { key: '84fec020ecaaac41298a01dbffdbb2f3744170b4', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '9b91237d7a1621bce1e15546abcb4f6b74cccc5f', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: 'e02aea3e8f344376013257f5261a29408e62b359', class: "select-highlight" }))));
+            }) }, hAsync("label", { key: '0edcfcbac575a9dccc77991531b6980d1caebf42', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), hAsync("div", { key: '348151d90cb093f5d21c7d4a834264ac4a312c40', class: "select-wrapper-inner" }, hAsync("slot", { key: '8b7708c7f81217435c58276da0c08bba766d9500', name: "start" }), hAsync("div", { key: '10c520a335da0a0d1cf40f9365597beb244d3b48', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '0f15c40a5495e98e29d2a21ba21e0bc6f1c0125a', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: 'c87faad2e5ebf7f9453397d7ede43abd64d21294', class: "select-highlight" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -30526,7 +30287,6 @@ class Select {
             "expandedIcon": [1, "expanded-icon"],
             "shape": [1],
             "value": [1032],
-            "required": [4],
             "isExpanded": [32],
             "open": [64]
         },
@@ -32923,7 +32683,6 @@ class Toggle {
         this.labelPlacement = 'start';
         this.justify = undefined;
         this.alignment = undefined;
-        this.required = false;
     }
     disabledChanged() {
         if (this.gesture) {
@@ -33005,12 +32764,12 @@ class Toggle {
         return this.el.textContent !== '';
     }
     render() {
-        const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment, required } = this;
+        const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment } = this;
         const mode = getIonMode$1(this);
         const value = this.getValue();
         const rtl = isRTL$1(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (hAsync(Host, { key: 'ed75573caa6e37011f1453dd7f723fb9bd8a3656', onClick: this.onClick, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'f52195ec3bc14c024647cb41319c32a4cd330e19', onClick: this.onClick, class: createColorClasses$1(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -33020,10 +32779,10 @@ class Toggle {
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, hAsync("label", { key: '484860e2a33f4d123904edb96159f0e1972d3add', class: "toggle-wrapper" }, hAsync("input", Object.assign({ key: '360b53080aacfd99a9ff60ffb5219816bd4163ee', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, this.inheritedAttributes)), hAsync("div", { key: 'f7239fa668fe11257239ea30cf0198e4f3274f6b', class: {
+            }) }, hAsync("label", { key: 'f8b3a215ad85b2cee611ad63449b584e1640f27f', class: "toggle-wrapper" }, hAsync("input", Object.assign({ key: 'f387b1ea840737a9737917e516834c887be99c09', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), hAsync("div", { key: '936af880db59fe377cd2de9101eb28a1c4fb8914', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, hAsync("slot", { key: '9495a4a39889822ee68e0d89dc5a2f863d1feb3c' })), hAsync("div", { key: '55f1eb08c4b705e94fbcf02220bbe1d292f06155', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, hAsync("slot", { key: '80a6672e2e792c15011a9496dcd75363cdba31c6' })), hAsync("div", { key: '2b2b318b38ab27b194c0dab4cecd77d9d780f2ca', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -33046,7 +32805,6 @@ class Toggle {
             "labelPlacement": [1, "label-placement"],
             "justify": [1],
             "alignment": [1],
-            "required": [4],
             "activated": [32]
         },
         "$listeners$": undefined,
@@ -33078,10 +32836,6 @@ var IonToolbarMdStyle0 = toolbarMdCss;
  * @slot secondary - Content is placed to the left of the toolbar text in `ios` mode, and directly to the right in `md` mode.
  * @slot primary - Content is placed to the right of the toolbar text in `ios` mode, and to the far right in `md` mode.
  * @slot end - Content is placed to the right of the toolbar text in LTR, and to the left in RTL.
- *
- * @part background - The background of the toolbar, covering the entire area behind the toolbar content.
- * @part container - The container that wraps all toolbar content, including the default slot and named slot content.
- * @part content - The container for the default slot, wrapping content provided without a named slot.
  */
 class Toolbar {
     constructor(hostRef) {
@@ -33132,10 +32886,10 @@ class Toolbar {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (hAsync(Host, { key: '4fdc9ae82a93237cc28ceb95b0ebd8069b62839d', class: Object.assign(Object.assign({}, childStyles), createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '462538a5ecd01baf3cde116c9f029aeda26c81be', class: Object.assign(Object.assign({}, childStyles), createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, hAsync("div", { key: '443a216362bbbf1c149ed12140d52b0f0ea2d664', class: "toolbar-background", part: "background" }), hAsync("div", { key: '1df87f4027d605e42757a13d4828df45b90a4fdc', class: "toolbar-container", part: "container" }, hAsync("slot", { key: 'f66f34972be8e3f4915b9c6f5808600dbaedb1ea', name: "start" }), hAsync("slot", { key: '14f38b0975e956f404c4eb3ee56f2055c6615276', name: "secondary" }), hAsync("div", { key: '75ba5953a25c7544793484d2b245792cb0a5af75', class: "toolbar-content", part: "content" }, hAsync("slot", { key: '149dfa58ff7106f318fecb4134e7c69edf8bc231' })), hAsync("slot", { key: '807ab9ad21d7f1d9d427a4086460bcb9e5e8c019', name: "primary" }), hAsync("slot", { key: 'bd2f9da95d2fa8e74dc6e0666587ceecbba99d9f', name: "end" }))));
+            })) }, hAsync("div", { key: 'c0b4415d3b2472de643a9be7cb3b13b3b628621b', class: "toolbar-background" }), hAsync("div", { key: '0ccb8a2dbeaa28d8f9bed87629c0c097446690c2', class: "toolbar-container" }, hAsync("slot", { key: '3e726dac359e923df21d80301651f16063a3de20', name: "start" }), hAsync("slot", { key: 'cd799330b56a7f8833bc61bb2807aafb21846f71', name: "secondary" }), hAsync("div", { key: '395282e6ac8c53576922dcdb5f08c25d34638c86', class: "toolbar-content" }, hAsync("slot", { key: 'a437c60e4ba5aae65e55169ae82a6f379868ec1d' })), hAsync("slot", { key: '711af9b9d321a7b31ede924c9bdcad767aa9a1ca', name: "primary" }), hAsync("slot", { key: 'ecc02edeaf80a837890bcb08d5096df1e22a0b9a', name: "end" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {