@ionic/core 8.8.18-dev.11786385944.17aca7e5 → 8.8.18-dev.11786399582.1d58c37d

package/dist/esm/index-tcQvqkiX.js

@@ -250,7 +250,224 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
   if (module) {
     return module[exportName];
   }
-  /*!__STENCIL_STATIC_IMPORT_SWITCH__*/
+  
+        if (!hmrVersionId || !BUILD.hotModuleReplacement) {
+          const processMod = importedModule => {
+              cmpModules.set(bundleId, importedModule);
+              return importedModule[exportName];
+          }
+          switch(bundleId) {
+              
+                case 'ion-action-sheet':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-action-sheet.entry.js').then(processMod, consoleError);
+                case 'ion-alert':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-alert.entry.js').then(processMod, consoleError);
+                case 'ion-back-button':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-back-button.entry.js').then(processMod, consoleError);
+                case 'ion-backdrop':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-backdrop.entry.js').then(processMod, consoleError);
+                case 'ion-checkbox':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-checkbox.entry.js').then(processMod, consoleError);
+                case 'ion-chip':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-chip.entry.js').then(processMod, consoleError);
+                case 'ion-input':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-input.entry.js').then(processMod, consoleError);
+                case 'ion-textarea':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-textarea.entry.js').then(processMod, consoleError);
+                case 'ion-loading':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-loading.entry.js').then(processMod, consoleError);
+                case 'ion-modal':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-modal.entry.js').then(processMod, consoleError);
+                case 'ion-img':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-img.entry.js').then(processMod, consoleError);
+                case 'ion-popover':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-popover.entry.js').then(processMod, consoleError);
+                case 'ion-progress-bar':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-progress-bar.entry.js').then(processMod, consoleError);
+                case 'ion-range':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-range.entry.js').then(processMod, consoleError);
+                case 'ion-ripple-effect':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-ripple-effect.entry.js').then(processMod, consoleError);
+                case 'ion-searchbar':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-searchbar.entry.js').then(processMod, consoleError);
+                case 'ion-spinner':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-spinner.entry.js').then(processMod, consoleError);
+                case 'ion-split-pane':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-split-pane.entry.js').then(processMod, consoleError);
+                case 'ion-text':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-text.entry.js').then(processMod, consoleError);
+                case 'ion-toast':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-toast.entry.js').then(processMod, consoleError);
+                case 'ion-toggle':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-toggle.entry.js').then(processMod, consoleError);
+                case 'ion-button_2':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-button_2.entry.js').then(processMod, consoleError);
+                case 'ion-infinite-scroll_2':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-infinite-scroll_2.entry.js').then(processMod, consoleError);
+                case 'ion-nav_2':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-nav_2.entry.js').then(processMod, consoleError);
+                case 'ion-radio_2':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-radio_2.entry.js').then(processMod, consoleError);
+                case 'ion-refresher_2':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-refresher_2.entry.js').then(processMod, consoleError);
+                case 'ion-reorder_2':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-reorder_2.entry.js').then(processMod, consoleError);
+                case 'ion-segment_2':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-segment_2.entry.js').then(processMod, consoleError);
+                case 'ion-tab_2':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-tab_2.entry.js').then(processMod, consoleError);
+                case 'ion-tab-bar_2':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-tab-bar_2.entry.js').then(processMod, consoleError);
+                case 'ion-accordion_2':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-accordion_2.entry.js').then(processMod, consoleError);
+                case 'ion-breadcrumb_2':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-breadcrumb_2.entry.js').then(processMod, consoleError);
+                case 'ion-avatar_3':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-avatar_3.entry.js').then(processMod, consoleError);
+                case 'ion-datetime_3':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-datetime_3.entry.js').then(processMod, consoleError);
+                case 'ion-fab_3':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-fab_3.entry.js').then(processMod, consoleError);
+                case 'ion-col_3':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-col_3.entry.js').then(processMod, consoleError);
+                case 'ion-item-option_3':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-item-option_3.entry.js').then(processMod, consoleError);
+                case 'ion-menu_3':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-menu_3.entry.js').then(processMod, consoleError);
+                case 'ion-select_3':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-select_3.entry.js').then(processMod, consoleError);
+                case 'ion-route_4':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-route_4.entry.js').then(processMod, consoleError);
+                case 'ion-card_5':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-card_5.entry.js').then(processMod, consoleError);
+                case 'ion-app_8':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-app_8.entry.js').then(processMod, consoleError);
+                case 'ion-item_8':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-item_8.entry.js').then(processMod, consoleError);
+                case 'ion-datetime-button':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-datetime-button.entry.js').then(processMod, consoleError);
+                case 'ion-input-otp':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-input-otp.entry.js').then(processMod, consoleError);
+                case 'ion-input-password-toggle':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-input-password-toggle.entry.js').then(processMod, consoleError);
+                case 'ion-segment-content':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-segment-content.entry.js').then(processMod, consoleError);
+                case 'ion-segment-view':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-segment-view.entry.js').then(processMod, consoleError);
+                case 'ion-picker':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-picker.entry.js').then(processMod, consoleError);
+                case 'ion-picker-column':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-picker-column.entry.js').then(processMod, consoleError);
+                case 'ion-picker-column-option':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-picker-column-option.entry.js').then(processMod, consoleError);
+                case 'ion-select-modal':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './ion-select-modal.entry.js').then(processMod, consoleError);
+          }
+      }
   return import(
     /* @vite-ignore */
     /* webpackInclude: /\.entry\.js$/ */

package/dist/esm/ion-app_8.entry.js

@@ -6,7 +6,7 @@ import { shouldUseCloseWatcher } from './hardware-back-button-B93Gru0Y.js';
 import { a as isPlatform, b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
 import { i as inheritAriaAttributes, h as hasLazyBuild, c as componentOnReady, e as clamp, s as shallowEqualStringMap } from './helpers-HEqiOzXb.js';
 import { i as isRTL } from './dir-C53feagD.js';
-import { c as createColorClasses, h as hostContext } from './theme-DiVJyqlX.js';
+import { h as hostContext, c as createColorClasses } from './theme-DiVJyqlX.js';
 import { b as findIonContent, p as printIonContentErrorMsg, g as getScrollElement } from './index-Dw-wN0Ja.js';
 import { c as createKeyboardController } from './keyboard-controller-BaaVITYt.js';
 import { g as getTimeGivenProgression } from './cubic-bezier-hHmYLOfE.js';
@@ -224,6 +224,9 @@ const Content = class {
          */
         this.scrollEvents = false;
     }
+    fullscreenChanged() {
+        this.setupFullscreenResizeObserver();
+    }
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
@@ -263,6 +266,12 @@ const Content = class {
                 closestTabs.addEventListener('ionTabBarLoaded', this.tabsLoadCallback);
             }
         }
+        // Re-observe on reattach, since componentDidLoad only fires once.
+        this.setupFullscreenResizeObserver();
+    }
+    componentDidLoad() {
+        // The custom elements build assigns fullscreen after connectedCallback.
+        this.setupFullscreenResizeObserver();
     }
     disconnectedCallback() {
         this.onScrollEnd();
@@ -284,6 +293,42 @@ const Content = class {
             clearTimeout(this.resizeTimeout);
             this.resizeTimeout = null;
         }
+        this.destroyFullscreenResizeObserver();
+    }
+    /**
+     * Header and footer sizes can change after load without a window resize
+     * firing, so the `resize` listener alone misses those changes.
+     *
+     * Popover content is excluded because `contain: none` lets its offsets drive
+     * the host's own height, which would feed back into the observer.
+     */
+    setupFullscreenResizeObserver() {
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        if (!this.fullscreen || hostContext('ion-popover', this.el)) {
+            this.destroyFullscreenResizeObserver();
+            return;
+        }
+        if (this.fullscreenResizeObserver !== undefined) {
+            return;
+        }
+        this.fullscreenResizeObserver = new ResizeObserver(() => {
+            // A hidden page reports a 0x0 box, which would zero the offsets. Same
+            // reasoning as the guard in onResize, minus its debounce so the
+            // correction lands in the next frame instead of 100ms later.
+            if (this.el.offsetParent === null) {
+                return;
+            }
+            this.resize();
+        });
+        this.fullscreenResizeObserver.observe(this.el);
+    }
+    destroyFullscreenResizeObserver() {
+        if (this.fullscreenResizeObserver !== undefined) {
+            this.fullscreenResizeObserver.disconnect();
+            this.fullscreenResizeObserver = undefined;
+        }
     }
     /**
      * Rotating certain devices can update
@@ -522,7 +567,7 @@ const Content = class {
         const forceOverscroll = this.shouldForceOverscroll();
         const transitionShadow = mode === 'ios';
         this.resize();
-        return (h(Host, Object.assign({ key: '8c1bc4a4df8698d3884741eb38512dc059210c50', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
+        return (h(Host, Object.assign({ key: '9551c759df407b10d809171641fc6e8f14d92219', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
                 [mode]: true,
                 'content-fullscreen': this.fullscreen,
                 'content-sizing': hostContext('ion-popover', this.el),
@@ -531,14 +576,19 @@ const Content = class {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, inheritedAttributes), h("div", { key: '5e7412549b51ef7543d9378ecab9aac6bc461588', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '33f6fbf7e1e027c7cbd2dda95b487f18dc648cef', class: {
+            } }, inheritedAttributes), h("div", { key: 'c6de8fd226f0d10a534eb107fe032ac155fbe68e', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '082fc2936061360060b48221ecb1c864a3711fa0', class: {
                 'inner-scroll': true,
                 'scroll-x': scrollX,
                 'scroll-y': scrollY,
                 overscroll: (scrollX || scrollY) && forceOverscroll,
-            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '00c8fe7b9e73533c702273c9457d274195d54e98' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '0d2286206facb22696a9ca7e74a3f6b7d2397aab' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
     }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "fullscreen": [{
+                "fullscreenChanged": 0
+            }]
+    }; }
 };
 const getParentElement = (el) => {
     var _a;

package/dist/esm/ion-datetime_3.entry.js

@@ -771,6 +771,10 @@ const Datetime = class {
          * Set true only by `visibleCallback`. Lets `hiddenCallback` ignore the
          * synthetic "not intersecting" entry IntersectionObserver fires on
          * `observe()` when the host mounts offscreen.
+         *
+         * Don't reset this in `disconnectedCallback`. Overlays disconnect and
+         * reconnect the host without re-creating the observers, so a reset there
+         * makes `hiddenCallback` miss the dismissal.
          */
         this.hasBeenIntersecting = false;
         this.prevPresentation = null;
@@ -789,7 +793,7 @@ const Datetime = class {
         /**
          * The color to use from your application's color palette.
          * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-         * For more information on colors, see [theming](/docs/theming/basics).
+         * For more information on colors, refer to [theming](/docs/theming/basics).
          */
         this.color = 'primary';
         /**
@@ -1654,7 +1658,6 @@ const Datetime = class {
             this.clearFocusVisible = undefined;
         }
         this.loadTimeoutCleanup();
-        this.hasBeenIntersecting = false;
     }
     initializeListeners() {
         this.initializeCalendarListener();
@@ -2465,7 +2468,7 @@ const Datetime = class {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (h(Host, { key: '5e0b83cb88a87945eaae2f9402751819b75452ee', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: '48555ab73ae3f22b56d15e83ff5e29b854ccc2ef', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -2475,7 +2478,7 @@ const Datetime = class {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, h("div", { key: '9f9ba72e9879525961b00abe342a7891492ca0ff', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, h("div", { key: 'd09134c540f93a8cc92cdf41ad5d3623632d144f', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ion-modal.entry.js

@@ -1695,6 +1695,41 @@ const getRootSafeAreaTop = () => {
     }
     return value;
 };
+/**
+ * Calls back when the resolved root `--ion-safe-area-top` changes, which no
+ * event and no window resize covers. The probe's height tracks the variable, so
+ * a change to it becomes a size change the observer can see.
+ */
+const onRootSafeAreaTopChange = (callback) => {
+    const doc = win === null || win === void 0 ? void 0 : win.document;
+    if (!(doc === null || doc === void 0 ? void 0 : doc.body) || typeof ResizeObserver === 'undefined') {
+        return () => undefined;
+    }
+    const probe = doc.createElement('div');
+    probe.style.cssText =
+        'position:fixed;visibility:hidden;pointer-events:none;top:0;left:0;width:0;' +
+            'height:var(--ion-safe-area-top,0px);';
+    doc.body.appendChild(probe);
+    /**
+     * Seeded with the value the caller has already applied, so a change that
+     * lands before the observer's first delivery still gets reported. Comparing
+     * against an unset value instead would consume that first delivery and treat
+     * the new inset as the baseline.
+     */
+    let lastHeight = getRootSafeAreaTop();
+    const observer = new ResizeObserver((entries) => {
+        const { height } = entries[0].contentRect;
+        if (height !== lastHeight) {
+            lastHeight = height;
+            callback(height);
+        }
+    });
+    observer.observe(probe);
+    return () => {
+        observer.disconnect();
+        probe.remove();
+    };
+};
 /**
  * True when the modal host declares BOTH a non-fullscreen `--width` AND a
  * non-fullscreen `--height` (i.e. a centered-dialog-like modal that doesn't
@@ -2847,16 +2882,18 @@ const Modal = class {
         // Set the internal offset property with the resolved root safe-area-top value
         if (context.isSheetModal) {
             this.updateSheetOffsetTop();
+            this.unsubscribeRootSafeAreaTop = onRootSafeAreaTopChange((safeAreaTop) => this.updateSheetOffsetTop(safeAreaTop));
         }
     }
     /**
-     * Resolves the current root --ion-safe-area-top value and sets the
-     * internal --ion-modal-offset-top property on the host element.
-     * Called on present and on resize (e.g., device rotation changes safe-area).
+     * Sets the internal --ion-modal-offset-top property on the host element,
+     * resolving the current root --ion-safe-area-top when no value is given.
+     * Called on present, on resize (e.g., device rotation changes safe-area),
+     * and whenever the root safe-area value itself changes.
      */
-    updateSheetOffsetTop() {
-        const safeAreaTop = getRootSafeAreaTop();
-        this.el.style.setProperty('--ion-modal-offset-top', `${safeAreaTop}px`);
+    updateSheetOffsetTop(safeAreaTop) {
+        const value = safeAreaTop !== null && safeAreaTop !== void 0 ? safeAreaTop : getRootSafeAreaTop();
+        this.el.style.setProperty('--ion-modal-offset-top', `${value}px`);
     }
     /**
      * Updates safe-area overrides during dynamic state changes.
@@ -2955,7 +2992,10 @@ const Modal = class {
      * Clears all safe-area overrides and padding.
      */
     cleanupSafeAreaOverrides() {
+        var _a;
         clearSafeAreaOverrides(this.el);
+        (_a = this.unsubscribeRootSafeAreaTop) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.unsubscribeRootSafeAreaTop = undefined;
         // Remove internal sheet offset property
         this.el.style.removeProperty('--ion-modal-offset-top');
         const { contentEl } = this.findContentAndFooter();
@@ -2968,11 +3008,11 @@ const Modal = class {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (h(Host, Object.assign({ key: '09f09a10d858e976bc2a989f30db925348a7784c', "no-router": true,
+        return (h(Host, Object.assign({ key: 'c4b2713ebc788ac8672e18fdd5069e4253c4da34', "no-router": true,
             // Allow the modal to be navigable when the handle is focusable
             tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -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, onFocus: this.onModalFocus }), h("ion-backdrop", { key: 'b197319bdddf0b979ccacdb63dbceccfd9bf2560', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'c848ff6a10e9092cdb10a6f21c9a299a72b17ca9', class: "modal-shadow" }), h("div", Object.assign({ key: 'e7c8e67807d49098aba63dce69a1bbf9647bbab6',
+            }, 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, onFocus: this.onModalFocus }), h("ion-backdrop", { key: '2cc0afff8a815954492138afb0fca042243afddd', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '9844700b9436f9bfa1a69ba436e9ca46d70cf316', class: "modal-shadow" }), h("div", Object.assign({ key: 'ab1cd56ca956c773c9242fb42ff320bac7627b4b',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
@@ -2985,9 +3025,9 @@ const Modal = class {
               without the tabindex focus() would be a no-op and screen readers
               may not properly announce the dialog and its content when it opens.
             */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", tabIndex: -1, class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '0851cc75ee7367e13d1993a9c4d8b1b4de1d3bf0', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", tabIndex: -1, class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: 'c7706794e04a962178640e9a9a11c56288c45e08', 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", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: 'b4d9bc13dc0867e858db8e1c7277bd09b7fce44c', onSlotchange: this.onSlotChange }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: 'c44fd9810cdd3286f096af98e5a4072f8f44c193', onSlotchange: this.onSlotChange }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {