voyager-ionic-core 8.8.12 → 9.0.1

package/dist/collection/components/item-option/item-option.js

@@ -50,12 +50,12 @@ export class ItemOption {
                 href: this.href,
                 target: this.target,
             };
-        return (h(Host, { key: 'b576e8f449ee9a03e659abd923421b051f7427c8', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'a10d36e60d61865141c57c03a114e4845b400a55', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'item-option-disabled': disabled,
                 'item-option-expandable': expandable,
                 'ion-activatable': true,
-            }) }, h(TagType, Object.assign({ key: '568c7de194ecef7d1efec2abdf855b3fce71aa03' }, attrs, { class: "button-native", part: "native", disabled: disabled }), h("span", { key: 'fe1a494a40febc5c415098d8c9b2edad9fac02c9', class: "button-inner", part: "inner" }, h("slot", { key: '8e4ec73c1a9c047a29dac8ad09ff1cce94a751c7', name: "top" }), h("div", { key: '7828c6413d2cab692a3a2e5aa2a17240e0dcb230', class: "horizontal-wrapper", part: "container" }, h("slot", { key: 'c8eb9881db296280ba895ab249e5d1bb3fc27206', name: "start" }), h("slot", { key: '144b18f7ea90a45abbe0b1fa878c87e623897b7b', name: "icon-only" }), h("slot", { key: '6c63ebad29552a32e1ed9ca3c95aa005b35b9b86' }), h("slot", { key: '99478d52600bf32342649a2f74ed8e1eb07407d4', name: "end" })), h("slot", { key: '00247fc54e61cface4e6ac6e8ea05a0685f5e26e', name: "bottom" })), mode === 'md' && h("ion-ripple-effect", { key: 'dc5057f2ff0926b2e5fd1520fed6cf7dc3197cf8' }))));
+            }) }, h(TagType, { key: '5cc49ef73318213f6202d1d0f460f629ea65f17f', ...attrs, class: "button-native", part: "native", disabled: disabled }, h("span", { key: '0643b16660b4ca00b0f3b4dbe2739e9ce076abea', class: "button-inner", part: "inner" }, h("slot", { key: '8778d6d09aa9e0db278ce00c5456a1acfe82c15f', name: "top" }), h("div", { key: '4fc849494c8cb2380015161e096b5c61cf517d90', class: "horizontal-wrapper", part: "container" }, h("slot", { key: '9d0c0a5a63d8ec636df9c85d48bbdb39fb63af5e', name: "start" }), h("slot", { key: 'a40561497c7e7d73173edd24ed335230e6eebb2b', name: "icon-only" }), h("slot", { key: 'b94f2a4aa5bf4a1104497ced1920d6ee43d33659' }), h("slot", { key: '91713dbb3e6a617c00f950857f2ed5e5ffceaa9a', name: "end" })), h("slot", { key: 'f5af33c3bfb50fc629a06e1120bba55da07b2afb', name: "bottom" })), mode === 'md' && h("ion-ripple-effect", { key: 'fc56e1644ef9c5b2e1e66683465a7fd09c05215c' }))));
     }
     static get is() { return "ion-item-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/item-options/item-options.js

@@ -21,7 +21,7 @@ export class ItemOptions {
     render() {
         const mode = getIonMode(this);
         const isEnd = isEndSide(this.side);
-        return (h(Host, { key: '7b4b93984182222c64c7a2a22a18e52ac19e3049', class: {
+        return (h(Host, { key: '6e60ff004d48bf7701711e518ec0b21264496ae8', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-options-${mode}`]: true,

package/dist/collection/components/item-sliding/item-sliding.js

@@ -3,7 +3,7 @@
  */
 import { Host, h } from "@stencil/core";
 import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from "../../utils/content/index";
-import { isEndSide } from "../../utils/helpers";
+import { componentOnReady, isEndSide } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { watchForOptions } from "../../utils/watch-options";
 import { getIonMode } from "../../global/ionic-global";
@@ -96,7 +96,6 @@ export class ItemSliding {
      * @param side The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item.
      */
     async open(side) {
-        var _a;
         /**
          * It is possible for the item to be added to the DOM
          * after the item-sliding component was created. As a result,
@@ -105,7 +104,7 @@ export class ItemSliding {
          * However, if the item is already defined then
          * we do not query for it again.
          */
-        const item = (this.item = (_a = this.item) !== null && _a !== void 0 ? _a : this.el.querySelector('ion-item'));
+        const item = (this.item = this.item ?? this.el.querySelector('ion-item'));
         if (item === null) {
             return;
         }
@@ -179,21 +178,18 @@ export class ItemSliding {
         }
     }
     async updateOptions() {
-        var _a;
-        const options = this.el.querySelectorAll('ion-item-options');
+        const options = Array.from(this.el.querySelectorAll('ion-item-options'));
+        /**
+         * Frameworks that assign element props after inserting the element haven't set
+         * `side` while `connectedCallback` runs, so reading it any earlier reports every
+         * option as `end`.
+         */
+        await Promise.all(options.map((option) => new Promise((resolve) => componentOnReady(option, resolve))));
         let sides = 0;
         // Reset left and right options in case they were removed
         this.leftOptions = this.rightOptions = undefined;
-        for (let i = 0; i < options.length; i++) {
-            const item = options.item(i);
-            /**
-             * We cannot use the componentOnReady helper
-             * util here since we need to wait for all of these items
-             * to be ready before we set `this.sides` and `this.optsDirty`.
-             */
-            // eslint-disable-next-line custom-rules/no-component-on-ready-method
-            const option = item.componentOnReady !== undefined ? await item.componentOnReady() : item;
-            const side = isEndSide((_a = option.side) !== null && _a !== void 0 ? _a : option.getAttribute('side')) ? 'end' : 'start';
+        for (const option of options) {
+            const side = isEndSide(option.side ?? option.getAttribute('side')) ? 'end' : 'start';
             if (side === 'start') {
                 this.leftOptions = option;
                 sides |= 1 /* ItemSide.Start */;
@@ -393,7 +389,7 @@ export class ItemSliding {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '72d2ec1c5074128d2c9ad2f439cdc98daa93e8b5', class: {
+        return (h(Host, { key: '2b00049c5ae2efaa3b81a28892543d733fa6a5d0', class: {
                 [mode]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,

package/dist/collection/components/label/label.js

@@ -58,13 +58,13 @@ export class Label {
     render() {
         const position = this.position;
         const mode = getIonMode(this);
-        return (h(Host, { key: 'd603670c442213c28737b0c052c094705b8c84ef', class: createColorClasses(this.color, {
+        return (h(Host, { key: '461604c1887f322dc13d7df3d5cdbb7ee1361117', class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 [`label-${position}`]: position !== undefined,
                 [`label-no-animate`]: this.noAnimate,
                 'label-rtl': document.dir === 'rtl',
-            }) }, h("slot", { key: 'a8c3aed240a20ee5856c423662878481a1e6d4cf' })));
+            }) }, h("slot", { key: 'a7005d0a217641278aa8e95144e8e4b9ae87a1c5' })));
     }
     static get is() { return "ion-label"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/list/list.js

@@ -21,7 +21,7 @@ export class List {
      */
     async closeSlidingItems() {
         const item = this.el.querySelector('ion-item-sliding');
-        if (item === null || item === void 0 ? void 0 : item.closeOpened) {
+        if (item?.closeOpened) {
             return item.closeOpened();
         }
         return false;
@@ -29,7 +29,7 @@ export class List {
     render() {
         const mode = getIonMode(this);
         const { lines, inset } = this;
-        return (h(Host, { key: '7f9943751542d2cbd49a4ad3f28e16d9949f70d4', role: "list", class: {
+        return (h(Host, { key: 'b21e063d568b07331ea9443647b3faf33265256a', role: "list", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`list-${mode}`]: true,

package/dist/collection/components/list-header/list-header.js

@@ -13,10 +13,10 @@ export class ListHeader {
     render() {
         const { lines } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: 'f5fcd3e6b9f1ba52381fd0d14c0d50517da50f9f', class: createColorClasses(this.color, {
+        return (h(Host, { key: '92ab17533e169b1a1c990285449e0546aac98021', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`list-header-lines-${lines}`]: lines !== undefined,
-            }) }, h("div", { key: '99d09b1d2438ad981d20ff965c8945635c2161a3', class: "list-header-inner", part: "inner" }, h("slot", { key: 'efa7ab08935cfa378734cda0612b49ba5b7b6d36' }))));
+            }) }, h("div", { key: '26639255577380a8e70b61f753aa9ed57590694f', class: "list-header-inner", part: "inner" }, h("slot", { key: 'f69055e7a7a47ae8dcbbe289e18b6630f0792714' }))));
     }
     static get is() { return "ion-list-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/loading/loading.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
 import { raf } from "../../utils/helpers";
 import { createLockController } from "../../utils/lock-controller";
-import { BACKDROP, dismiss, eventMethod, prepareOverlay, present, createDelegateController, createTriggerController, setOverlayId, } from "../../utils/overlays";
+import { BACKDROP, cleanupRootFocusTrapAccessibility, createDelegateController, createTriggerController, dismiss, eventMethod, prepareOverlay, present, restoreRootFocusTrapAccessibility, setOverlayId, } from "../../utils/overlays";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { getClassMap } from "../../utils/theme";
 import { config } from "../../global/config";
@@ -82,14 +82,17 @@ export class Loading {
     connectedCallback() {
         prepareOverlay(this.el);
         this.triggerChanged();
+        // Re-apply the root lock if moved without dismiss() being called
+        if (this.presented) {
+            restoreRootFocusTrapAccessibility(this.el);
+        }
     }
     componentWillLoad() {
-        var _a;
         if (this.spinner === undefined) {
             const mode = getIonMode(this);
             this.spinner = config.get('loadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
         }
-        if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
+        if (!this.htmlAttributes?.id) {
             setOverlayId(this.el);
         }
     }
@@ -114,6 +117,10 @@ export class Loading {
     }
     disconnectedCallback() {
         this.triggerController.removeClickListener();
+        // Clean up aria-hidden if removed without dismiss() being called
+        if (this.presented) {
+            cleanupRootFocusTrapAccessibility();
+        }
     }
     /**
      * Present the loading overlay after it has been created.
@@ -179,9 +186,14 @@ export class Loading {
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (h(Host, Object.assign({ key: 'f86ddbc600cb5c396b7de38fb5f49625388c3c3f', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, { key: 'b4430bc66aedeca19d5645667cba73c169c4bd76', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1", ...htmlAttributes, style: {
                 zIndex: `${40000 + this.overlayIndex}`,
-            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: 'b53727aaddc37ef3c685fcc150c6d5193290a847', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '4c61bede8e0a4e47daa6f1f9d0f364ef6aec0bc3', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '84e51ceb07118f1eaeb757df28801c255496931b', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: 'fc97f1912e0fc558b7c309a5bc084415f5f620b2', class: "loading-spinner" }, h("ion-spinner", { key: '6e186d856cd3f10f22c3e317ef00f31b4216459c', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: 'dcbe9d9a619daa1c08174e73827bdabeb59dde92', tabindex: "0", "aria-hidden": "true" })));
+            }, onIonBackdropTap: this.onBackdropTap, class: {
+                ...getClassMap(this.cssClass),
+                [mode]: true,
+                'overlay-hidden': true,
+                'loading-translucent': this.translucent,
+            } }, h("ion-backdrop", { key: 'dec0df942ae778c99ebd4dbf08d6c2a0a992639d', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '71b2d5fc259666225047fc901648ada1efcd5d4b', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '1d83dc3b57ee70c9e8c0f006c6fa576bd96ecded', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: 'd1cd127e044b8831e396b53122322c1db7e89904', class: "loading-spinner" }, h("ion-spinner", { key: '38c2580cf5659da612872f01801a5fbdc2c023ba', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: '90e5e32ffe0df2c691f364149f43374e676bfaa3', tabindex: "0", "aria-hidden": "true" })));
     }
     static get is() { return "ion-loading"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/menu/menu.js

@@ -103,7 +103,7 @@ export class Menu {
         });
     }
     sideChanged() {
-        this.isEndSide = isEnd(this.side);
+        this.isEndSide = isEnd(this.side, this.el);
         /**
          * Menu direction animation is calculated based on the document direction.
          * If the document direction changes, we need to create a new animation.
@@ -293,9 +293,8 @@ export class Menu {
      * @param role The role of the element that is closing the menu.
      */
     setOpen(shouldOpen, animated = true, role) {
-        var _a;
         // Blur the active element to prevent it from being kept focused inside an element that will be set with aria-hidden="true"
-        (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
+        document.activeElement?.blur();
         return menuController._setOpen(this, shouldOpen, animated, role);
     }
     trapKeyboardFocus(ev, doc) {
@@ -362,7 +361,7 @@ export class Menu {
          * Menu direction animation is calculated based on the document direction.
          * If the document direction changes, we need to create a new animation.
          */
-        const isEndSide = isEnd(this.side);
+        const isEndSide = isEnd(this.side, this.el);
         if (width === this.width && this.animation !== undefined && isEndSide === this.isEndSide) {
             return;
         }
@@ -555,7 +554,6 @@ export class Menu {
         }
     }
     afterAnimation(isOpen, role) {
-        var _a;
         // keep opening/closing the menu disabled for a touch more yet
         // only add listeners/css if it's enabled and isOpen
         // and only remove listeners/css if it's not open
@@ -583,7 +581,7 @@ export class Menu {
              * it isn't already focused. Use the host element instead of the
              * first descendant to avoid the scroll position jumping around.
              */
-            const focusedMenu = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest('ion-menu');
+            const focusedMenu = document.activeElement?.closest('ion-menu');
             if (focusedMenu !== this.el) {
                 this.el.focus();
             }
@@ -658,14 +656,14 @@ export class Menu {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (h(Host, { key: '29ef73894e2795e4ce23e59888ffb87faf4dd543', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (h(Host, { key: '1208ba437fa58680325408d3d4c8580950da1d68', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
                 [mode]: true,
                 [`menu-type-${type}`]: true,
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
                 'split-pane-side': hostContext('ion-split-pane', el),
-            } }, h("div", { key: '22e44f7bd602ee0c96550f0dfc22ac81c0033ad6', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '7bbef92fe03bb3ce4d3981eb8535aab449aab2fc' })), h("ion-backdrop", { key: '9ab8d5b61563e16b212c71c03869d4fc23a0400b', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, h("div", { key: 'c0ddc957b7a7956b41901d77ae02d91e73071c55', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '6e44c56116431a024f114ab85ded1b822c942fac' })), h("ion-backdrop", { key: '5f4bbcf84444d96ec6b02bf567e1aaf95f59078d', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     static get is() { return "ion-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menu-button/menu-button.js

@@ -53,7 +53,7 @@ export class MenuButton {
             type: this.type,
         };
         const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
-        return (h(Host, { key: 'dcade732e366f0687d92cb9ce4065b78b0b41d24', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: 'b8869377822b082c6c4d3f16135b50b733eabf65', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 button: true, // ion-buttons target .button
                 'menu-button-hidden': hidden,
@@ -62,7 +62,7 @@ export class MenuButton {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h("button", Object.assign({ key: '7c4a449e239679376f38471d95fd602f9caec5f6' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: '8bb5bf453280a66109198c970b678ad800c7a8cf', class: "button-inner" }, h("slot", { key: '7f78b1e7a0695f2bd600d13ca81f50dd8b965726' }, h("ion-icon", { key: '9f67f5bb06b1f03a6e5df9ecbe23ebf69fb40756', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && h("ion-ripple-effect", { key: '10be7145c614144e94c3cc0b92dc5ee4e1587fe6', type: "unbounded" }))));
+            }) }, h("button", { key: '48fc0a7011414b60dd7d5136f247e937ae4bb8c8', ...attrs, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: '8c712f28c5afd345e403a9afc525931112852708', class: "button-inner" }, h("slot", { key: 'dd872325e42baf435188478c8d1cfc416075089d' }, h("ion-icon", { key: 'a4f02bdb715b07792c17e12c7837873d70171f88', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && h("ion-ripple-effect", { key: '564e2a8a804e14d1135502f7b17d8b7b9862e81b', type: "unbounded" }))));
     }
     static get is() { return "ion-menu-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menu-toggle/menu-toggle.js

@@ -31,10 +31,10 @@ export class MenuToggle {
     render() {
         const mode = getIonMode(this);
         const hidden = this.autoHide && !this.visible;
-        return (h(Host, { key: '55135952f3a42cb5d21916dfb7b169d894b381e3', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
+        return (h(Host, { key: '76d21ea6493b8161860c941e3754fef1e20395cc', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
                 [mode]: true,
                 'menu-toggle-hidden': hidden,
-            } }, h("slot", { key: 'e8ecb59a6ec075b07e2a1b8fcdf7df3dd9975a03' })));
+            } }, h("slot", { key: '9383610fd3105e1928a38788eb596e313e2b07f8' })));
     }
     static get is() { return "ion-menu-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/animations/ios.enter.js

@@ -26,7 +26,7 @@ export const iosEnterAnimation = (baseEl, opts) => {
     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')));
+    !expandToScroll && contentAnimation?.addElement(baseEl.querySelector('.ion-page'));
     const baseAnimation = createAnimation('entering-base')
         .addElement(baseEl)
         .easing('cubic-bezier(0.32,0.72,0,1)')

package/dist/collection/components/modal/animations/md.enter.js

@@ -28,7 +28,7 @@ export const mdEnterAnimation = (baseEl, opts) => {
     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')));
+    !expandToScroll && contentAnimation?.addElement(baseEl.querySelector('.ion-page'));
     const baseAnimation = createAnimation()
         .addElement(baseEl)
         .easing('cubic-bezier(0.36,0.66,0.04,1)')

package/dist/collection/components/modal/gestures/sheet.js

@@ -6,7 +6,7 @@ import { createGesture } from "../../../utils/gesture/index";
 import { clamp, getElementRoot, raf } from "../../../utils/helpers";
 import { FOCUS_TRAP_DISABLE_CLASS } from "../../../utils/overlays";
 import { getBackdropValueForSheet } from "../utils";
-import { calculateSpringStep, handleCanDismiss } from "./utils";
+import { calculateSpringStep, canSwipeOnContent, handleCanDismiss } from "./utils";
 export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange, onDragStart, onDragMove, onDragEnd) => {
     // Defaults for the sheet swipe animation
     const defaultBackdrop = [
@@ -30,6 +30,8 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
         ],
     };
     const contentEl = baseEl.querySelector('ion-content');
+    // Cache the initial value so the gesture restores it instead of forcing scrolling on.
+    const initialContentScrollY = contentEl?.scrollY ?? true;
     const height = wrapperEl.clientHeight;
     let currentBreakpoint = initialBreakpoint;
     let offset = 0;
@@ -95,9 +97,9 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
                 cachedFooterEl.style.removeProperty('height');
                 cachedFooterEl.style.removeProperty('top');
                 cachedFooterEl.style.removeProperty('left');
-                page === null || page === void 0 ? void 0 : page.style.removeProperty('padding-bottom');
+                page?.style.removeProperty('padding-bottom');
                 // Move to page
-                page === null || page === void 0 ? void 0 : page.appendChild(cachedFooterEl);
+                page?.appendChild(cachedFooterEl);
             });
         }
         else {
@@ -141,7 +143,7 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
                 // when the footer is positioned absolutely. This has to be done before we
                 // make the footer absolutely positioned or we may accidentally cause the
                 // sheet to scroll.
-                page === null || page === void 0 ? void 0 : page.style.setProperty('padding-bottom', `${footerHeights}px`);
+                page?.style.setProperty('padding-bottom', `${footerHeights}px`);
                 // Apply positioning styles to keep footer at bottom
                 cachedFooterEl.classList.add('modal-footer-moving');
                 // Apply our preserved styles to pin the footer
@@ -166,7 +168,7 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
     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]);
+        contentAnimation?.keyframes([...SheetDefaults.CONTENT_KEYFRAMES]);
         animation.progressStart(true, 1 - currentBreakpoint);
         /**
          * If backdrop is not enabled, then content
@@ -190,9 +192,6 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
     }
     const canStart = (detail) => {
         /**
-         * If we are swiping on the content, swiping should only be possible if the content
-         * is scrolled all the way to the top so that we do not interfere with scrolling.
-         *
          * We cannot assume that the `ion-content` target will remain consistent between swipes.
          * For example, when using ion-nav within a modal it is possible to swipe, push a view,
          * and then swipe again. The target content will not be the same between swipes.
@@ -200,30 +199,21 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
         const contentEl = findClosestIonContent(detail.event.target);
         currentBreakpoint = getCurrentBreakpoint();
         /**
-         * If `expandToScroll` is disabled, we should not allow the swipe gesture
-         * to start if the content is not scrolled to the top.
+         * Upwards swipes on the content cannot move the sheet anyway, so this only
+         * blocks swiping the sheet down from the content.
          */
-        if (!expandToScroll && contentEl) {
-            const scrollEl = isIonContent(contentEl) ? getElementRoot(contentEl).querySelector('.inner-scroll') : contentEl;
-            return scrollEl.scrollTop === 0;
-        }
-        if (currentBreakpoint === 1 && contentEl) {
-            /**
-             * The modal should never swipe to close on the content with a refresher.
-             * Note 1: We cannot solve this by making this gesture have a higher priority than
-             * the refresher gesture as the iOS native refresh gesture uses a scroll listener in
-             * addition to a gesture.
-             *
-             * Note 2: Do not use getScrollElement here because we need this to be a synchronous
-             * operation, and getScrollElement is asynchronous.
-             */
-            const scrollEl = isIonContent(contentEl) ? getElementRoot(contentEl).querySelector('.inner-scroll') : contentEl;
-            const hasRefresherInContent = !!contentEl.querySelector('ion-refresher');
-            return !hasRefresherInContent && scrollEl.scrollTop === 0;
+        if (contentEl && (!expandToScroll || currentBreakpoint === 1)) {
+            return canSwipeOnContent(contentEl);
         }
         return true;
     };
     const onStart = (detail) => {
+        /**
+         * Firefox automatically selects the header text during drag
+         * due to the focusable wrapper (tabindex="-1"). Remove any
+         * selection that may have occurred.
+         */
+        window.getSelection()?.removeAllRanges();
         /**
          * If canDismiss is anything other than `true`
          * then users should be able to swipe down
@@ -351,12 +341,22 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
     };
     const onEnd = (detail) => {
         const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY);
+        /**
+         * `snapBreakpoint === 0` is not enough on its own. `canDismiss: false`
+         * snaps to 0 but never dismisses, since `handleCanDismiss` returns early
+         * when canDismiss is not a function. A canDismiss function dismisses
+         * through `handleCanDismiss`, which awaits the callback, so the outcome
+         * is not known when this event is emitted.
+         */
+        const shouldPreventDismiss = canDismissBlocksGesture && snapBreakpoint === 0;
+        const isDismissing = shouldPreventDismiss ? typeof baseEl.canDismiss === 'function' : snapBreakpoint === 0;
         const eventDetail = {
             currentY: detail.currentY,
             deltaY: detail.deltaY,
             velocityY: detail.velocityY,
             progress: calculateProgress(detail.currentY),
             snapBreakpoint,
+            isDismissing,
         };
         /**
          * If expandToScroll is disabled, we should not allow the moveSheetToBreakpoint
@@ -372,7 +372,11 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
              * swap to moving on drag and if we don't swap back here then the footer will get stuck.
              */
             swapFooterPosition('stationary');
-            onDragEnd(eventDetail);
+            /**
+             * The sheet does not move in this case, so the gesture
+             * never dismisses the modal.
+             */
+            onDragEnd({ ...eventDetail, isDismissing: false });
             return;
         }
         moveSheetToBreakpoint({
@@ -445,14 +449,14 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
             onDismiss();
         }
         /**
-         * Enables scrolling immediately if the sheet is about to fully expand
-         * or if it allows scrolling at any breakpoint. Without this, there would
+         * Restores the content's scroll setting 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 (contentEl && (snapToBreakpoint === breakpoints[breakpoints.length - 1] || !expandToScroll)) {
-            contentEl.scrollY = true;
+            contentEl.scrollY = initialContentScrollY;
         }
         /**
          * If expandToScroll is disabled and we're animating
@@ -487,7 +491,7 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
                         raf(() => {
                             wrapperAnimation.keyframes([...SheetDefaults.WRAPPER_KEYFRAMES]);
                             backdropAnimation.keyframes([...SheetDefaults.BACKDROP_KEYFRAMES]);
-                            contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.keyframes([...SheetDefaults.CONTENT_KEYFRAMES]);
+                            contentAnimation?.keyframes([...SheetDefaults.CONTENT_KEYFRAMES]);
                             animation.progressStart(true, 1 - snapToBreakpoint);
                             currentBreakpoint = snapToBreakpoint;
                             onBreakpointChange(currentBreakpoint);
@@ -634,8 +638,19 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
         onMove,
         onEnd,
     });
+    /**
+     * Puts the content back the way the app declared it. A sheet can dismiss
+     * without going through moveSheetToBreakpoint, and an inline modal reuses
+     * the same element on the next present.
+     */
+    const resetContentScroll = () => {
+        if (contentEl) {
+            contentEl.scrollY = initialContentScrollY;
+        }
+    };
     return {
         gesture,
         moveSheetToBreakpoint,
+        resetContentScroll,
     };
 };

package/dist/collection/components/modal/gestures/swipe-to-close.js

@@ -4,10 +4,10 @@
 import { getTimeGivenProgression } from "../../../utils/animation/cubic-bezier";
 import { isIonContent, findClosestIonContent, disableContentScrollY, resetContentScrollY } from "../../../utils/content/index";
 import { createGesture } from "../../../utils/gesture/index";
-import { clamp, getElementRoot } from "../../../utils/helpers";
+import { clamp } from "../../../utils/helpers";
 import { OVERLAY_GESTURE_PRIORITY } from "../../../utils/overlays";
 import { setCardStatusBarDark, setCardStatusBarDefault } from "../utils";
-import { calculateSpringStep, handleCanDismiss } from "./utils";
+import { calculateSpringStep, canSwipeOnContent, handleCanDismiss } from "./utils";
 // Defaults for the card swipe animation
 export const SwipeToCloseDefaults = {
     MIN_PRESENTING_SCALE: 0.915,
@@ -22,7 +22,6 @@ export const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismi
     let isOpen = false;
     let canDismissBlocksGesture = false;
     let contentEl = null;
-    let scrollEl = null;
     const canDismissMaxStep = 0.2;
     let initialScrollY = true;
     let lastStep = 0;
@@ -45,12 +44,6 @@ export const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismi
             return true;
         }
         /**
-         * If we are swiping on the content,
-         * swiping should only be possible if
-         * the content is scrolled all the way
-         * to the top so that we do not interfere
-         * with scrolling.
-         *
          * We cannot assume that the `ion-content`
          * target will remain consistent between
          * swipes. For example, when using
@@ -61,29 +54,7 @@ export const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismi
          */
         contentEl = findClosestIonContent(target);
         if (contentEl) {
-            /**
-             * The card should never swipe to close
-             * on the content with a refresher.
-             * Note: We cannot solve this by making the
-             * swipeToClose gesture have a higher priority
-             * than the refresher gesture as the iOS native
-             * refresh gesture uses a scroll listener in
-             * addition to a gesture.
-             *
-             * Note: Do not use getScrollElement here
-             * because we need this to be a synchronous
-             * operation, and getScrollElement is
-             * asynchronous.
-             */
-            if (isIonContent(contentEl)) {
-                const root = getElementRoot(contentEl);
-                scrollEl = root.querySelector('.inner-scroll');
-            }
-            else {
-                scrollEl = contentEl;
-            }
-            const hasRefresherInContent = !!contentEl.querySelector('ion-refresher');
-            return !hasRefresherInContent && scrollEl.scrollTop === 0;
+            return canSwipeOnContent(contentEl);
         }
         /**
          * Card should be swipeable on all
@@ -97,6 +68,12 @@ export const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismi
     };
     const onStart = (detail) => {
         const { deltaY } = detail;
+        /**
+         * Firefox automatically selects the header text during drag
+         * due to the focusable wrapper (tabindex="-1"). Remove any
+         * selection that may have occurred.
+         */
+        window.getSelection()?.removeAllRanges();
         /**
          * Get the initial scrollY value so
          * that we can correctly reset the scrollY
@@ -249,17 +226,30 @@ export const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismi
          * check canDismiss. 25% was chosen
          * to avoid accidental swipes.
          */
-        if (isAttemptingDismissWithCanDismiss && clampedStep > maxStep / 4) {
+        const isAttemptingCanDismiss = isAttemptingDismissWithCanDismiss && clampedStep > maxStep / 4;
+        if (isAttemptingCanDismiss) {
             handleCanDismiss(el, animation);
         }
         else if (shouldComplete) {
             onDismiss();
         }
+        /**
+         * `shouldComplete` is not enough on its own, since it is always `false`
+         * when canDismiss blocks the gesture. `canDismiss: false` blocks it and
+         * never dismisses, because `handleCanDismiss` returns early when
+         * canDismiss is not a function. A canDismiss function dismisses through
+         * `handleCanDismiss`, which awaits the callback, so the outcome is not
+         * known when this event is emitted.
+         */
+        const isDismissing = isAttemptingDismissWithCanDismiss
+            ? isAttemptingCanDismiss && typeof el.canDismiss === 'function'
+            : shouldComplete;
         const eventDetail = {
             currentY: detail.currentY,
             deltaY: detail.deltaY,
             velocityY: detail.velocityY,
             progress: calculateProgress(el, detail.deltaY),
+            isDismissing,
             snapBreakpoint: shouldComplete ? 0 : 1,
         };
         onDragEnd(eventDetail);

package/dist/collection/components/modal/gestures/utils.js

@@ -1,7 +1,24 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import { findRefresherInContent, isIonContent } from "../../../utils/content/index";
+import { getElementRoot } from "../../../utils/helpers";
 import { GESTURE } from "../../../utils/overlays";
+/**
+ * Swiping is only possible when the content is scrolled to the top, so that we
+ * do not interfere with scrolling, and never on content with a refresher.
+ *
+ * Note: We cannot solve the refresher case with gesture priority as the iOS
+ * native refresh gesture uses a scroll listener in addition to a gesture.
+ *
+ * Note: Do not use `getScrollElement` here because we need this to be a
+ * synchronous operation, and `getScrollElement` is asynchronous.
+ */
+export const canSwipeOnContent = (contentEl) => {
+    const scrollEl = isIonContent(contentEl) ? getElementRoot(contentEl).querySelector('.inner-scroll') : contentEl;
+    const hasRefresherInContent = !!findRefresherInContent(contentEl);
+    return !hasRefresherInContent && scrollEl.scrollTop === 0;
+};
 export const handleCanDismiss = async (el, animation) => {
     /**
      * If canDismiss is not a function