@ionic/core 8.7.18-dev.11770916502.174efd7f → 8.7.18-dev.11771365900.125bf49c

package/hydrate/index.mjs

@@ -18571,11 +18571,11 @@ class ItemDivider {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '1523095ce4af3f2611512ff0948ead659959ee4a', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'ee8b2c8d5e415c0d8badf84fa7670932da4e809e', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'item-divider-sticky': this.sticky,
                 item: true,
-            }) }, hAsync("slot", { key: '39105d888e115416c3a3fe588da44b4c61f4e5fe', name: "start" }), hAsync("div", { key: '67e16f1056bd39187f3629c1bb383b7abbda829b', class: "item-divider-inner" }, hAsync("div", { key: 'b3a218fdcc7b9aeab6e0155340152d39fa0b6329', class: "item-divider-wrapper" }, hAsync("slot", { key: '69d8587533b387869d34b075d02f61396858fc90' })), hAsync("slot", { key: 'b91c654699b3b26d0012ea0c719c4a07d1fcfbaa', name: "end" }))));
+            }) }, hAsync("slot", { key: 'a1b7bbb1a008b0a56887f130d166931033801746', name: "start" }), hAsync("div", { key: '9d572da46ab616bdf881098e96aa6796a249507f', class: "item-divider-inner" }, hAsync("div", { key: 'a57a2c17093b74b9e4f8fd2778230a440b293aa1', class: "item-divider-wrapper" }, hAsync("slot", { key: 'ef15ebf58f3acd4b4d1b7c51144e26c3759dba49' })), hAsync("slot", { key: '1787c2400534301fe72b8ec213d0ce1e8f75b65a', name: "end" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -18605,7 +18605,7 @@ class ItemGroup {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'e49dc8f99247d2431d7c6db01b6e021a0f5b1c37', role: "group", class: {
+        return (hAsync(Host, { key: 'f1743af1d075682f63fae3802c5c5bf050507563', role: "group", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-group-${mode}`]: true,
@@ -18675,12 +18675,12 @@ class ItemOption {
                 href: this.href,
                 target: this.target,
             };
-        return (hAsync(Host, { key: '189a0040b97163b2336bf216baa71d584c5923a8', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '058310ac361612c16f2ef70c74279ba7c24128c5', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'item-option-disabled': disabled,
                 'item-option-expandable': expandable,
                 'ion-activatable': true,
-            }) }, hAsync(TagType, Object.assign({ key: '5a7140eb99da5ec82fe2ea3ea134513130763399' }, attrs, { class: "button-native", part: "native", disabled: disabled }), hAsync("span", { key: '9b8577e612706b43e575c9a20f2f9d35c0d1bcb1', class: "button-inner" }, hAsync("slot", { key: '9acb82f04e4822bfaa363cc2c4d29d5c0fec0ad6', name: "top" }), hAsync("div", { key: '66f5fb4fdd0c39f205574c602c793dcf109c7a17', class: "horizontal-wrapper" }, hAsync("slot", { key: '3761a32bca7c6c41b7eb394045497cfde181a62a', name: "start" }), hAsync("slot", { key: 'a96a568955cf6962883dc6771726d3d07462da00', name: "icon-only" }), hAsync("slot", { key: 'af5dfe5eb41456b9359bafe3615b576617ed7b57' }), hAsync("slot", { key: '00426958066ab7b949ff966fabad5cf8a0b54079', name: "end" })), hAsync("slot", { key: 'ae66c8bd536a9f27865f49240980d7b4b831b229', name: "bottom" })), mode === 'md' && hAsync("ion-ripple-effect", { key: '30df6c935ef8a3f28a6bc1f3bb162ca4f80aaf26' }))));
+            }) }, hAsync(TagType, Object.assign({ key: '045052656ab652bec065d421950fe9ea00dc1141' }, attrs, { class: "button-native", part: "native", disabled: disabled }), hAsync("span", { key: '988b9166c0dda3c822a99ceace4c105339b2465b', class: "button-inner" }, hAsync("slot", { key: '8050b870ada6b09283f8acbcbb6d2bd1c76508b3', name: "top" }), hAsync("div", { key: 'a206e7b09e660c878ce3c5b61d018e8cdd89dc55', class: "horizontal-wrapper" }, hAsync("slot", { key: '394e5e4ce14cd19b5d5eafca29bb9f971f5f0741', name: "start" }), hAsync("slot", { key: 'dd4c3a1bee7622df40a3d8f2a298045b772f1600', name: "icon-only" }), hAsync("slot", { key: '318f3ec97b722c5e7df1a78b1e0439f919d0aacc' }), hAsync("slot", { key: 'fff6a9a602cf7bd698528982f91742a2d36ea245', name: "end" })), hAsync("slot", { key: '26b4bb155701d8080b486dbad7bb9a6d2e35182c', name: "bottom" })), mode === 'md' && hAsync("ion-ripple-effect", { key: '152b74643bf0f5725c39bfdbb940f0f32ec83d58' }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -18729,7 +18729,7 @@ class ItemOptions {
     render() {
         const mode = getIonMode$1(this);
         const isEnd = isEndSide(this.side);
-        return (hAsync(Host, { key: '05a22a505e043c2715e3805e5e26ab4668940af0', class: {
+        return (hAsync(Host, { key: '7b4b93984182222c64c7a2a22a18e52ac19e3049', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-options-${mode}`]: true,
@@ -19194,7 +19194,7 @@ class ItemSliding {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'd812322c9fb5da4ee16e99dc38bfb24cb4590d03', class: {
+        return (hAsync(Host, { key: '8fd81d74701402294a48b79c56d6eceadafd4881', class: {
                 [mode]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
@@ -19299,13 +19299,13 @@ class Label {
     render() {
         const position = this.position;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'd6fba1a97189acc8ddfd64a2f009954a3e46e188', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '684ddfa719e34d743489ff05a0df067829257c73', class: createColorClasses$1(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',
-            }) }, hAsync("slot", { key: 'ce0ab50b5700398fdf50f36d02b7ad287eb71481' })));
+            }) }, hAsync("slot", { key: '4aace3e2b36250e832c44f63bea21116d77220fb' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -19403,10 +19403,10 @@ class ListHeader {
     render() {
         const { lines } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'd9bc827ad8cc77231efddc2435831a7fc080f77d', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '2e529021279761b2b2889885437f619b0e8f71c4', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 [`list-header-lines-${lines}`]: lines !== undefined,
-            }) }, hAsync("div", { key: '02dd9698304a7b2997ea1487e2f308bebea2b44c', class: "list-header-inner" }, hAsync("slot", { key: '01d63a572c003286ae467a1ab23631e37e695042' }))));
+            }) }, hAsync("div", { key: '9a6a11b0db015df79374f6489a40b959bc80b3e4', class: "list-header-inner" }, hAsync("slot", { key: 'ef347fc6afb47850797e2e4d1aeefcd6a318f789' }))));
     }
     static get style() { return {
         ios: listHeaderIosCss,
@@ -19691,9 +19691,9 @@ class Loading {
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (hAsync(Host, Object.assign({ key: '4497183ce220242abe19ae15f328f9a92ccafbbc', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: 'f86ddbc600cb5c396b7de38fb5f49625388c3c3f', 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 }) }), hAsync("ion-backdrop", { key: '231dec84e424a2dc358ce95b84d6035cf43e4dea', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: 'c9af29b6e6bb49a217396a5c874bbfb8835a926c', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'a8659863743cdeccbe1ba810eaabfd3ebfcb86f3', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { key: '3b346f39bc71691bd8686556a1e142198a7b12fa', class: "loading-spinner" }, hAsync("ion-spinner", { key: '8dc2bf1556e5138e262827f1516c59ecd09f3520', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: '054164c0dbae9a0e0973dd3c8e28f5b771820310', tabindex: "0", "aria-hidden": "true" })));
+            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), hAsync("ion-backdrop", { key: 'b53727aaddc37ef3c685fcc150c6d5193290a847', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '4c61bede8e0a4e47daa6f1f9d0f364ef6aec0bc3', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '84e51ceb07118f1eaeb757df28801c255496931b', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { key: 'fc97f1912e0fc558b7c309a5bc084415f5f620b2', class: "loading-spinner" }, hAsync("ion-spinner", { key: '6e186d856cd3f10f22c3e317ef00f31b4216459c', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: 'dcbe9d9a619daa1c08174e73827bdabeb59dde92', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -20742,14 +20742,14 @@ class Menu {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (hAsync(Host, { key: '70a427f3414a476414c3386efe6c8723fd37eccf', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (hAsync(Host, { key: '29ef73894e2795e4ce23e59888ffb87faf4dd543', 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),
-            } }, hAsync("div", { key: '83af04e5a47d5a92caafaf06088a7114ae61984b', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, hAsync("slot", { key: '7b35048642864bd0f30de9f6b61c949c1b601692' })), hAsync("ion-backdrop", { key: '347af516c7970d80dd11c6d1ed61e9a040ceb5fb', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, hAsync("div", { key: '22e44f7bd602ee0c96550f0dfc22ac81c0033ad6', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, hAsync("slot", { key: '7bbef92fe03bb3ce4d3981eb8535aab449aab2fc' })), hAsync("ion-backdrop", { key: '9ab8d5b61563e16b212c71c03869d4fc23a0400b', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -20857,7 +20857,7 @@ class MenuButton {
             type: this.type,
         };
         const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
-        return (hAsync(Host, { key: '9f0f0e50d39a6872508220c58e64bb2092a0d7ef', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'dcade732e366f0687d92cb9ce4065b78b0b41d24', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses$1(color, {
                 [mode]: true,
                 button: true, // ion-buttons target .button
                 'menu-button-hidden': hidden,
@@ -20866,7 +20866,7 @@ class MenuButton {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, hAsync("button", Object.assign({ key: 'ffebf7083d23501839970059ef8e411b571de197' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), hAsync("span", { key: 'cab0c1c763b3ce33ef11dba1d230f66126e59424', class: "button-inner" }, hAsync("slot", { key: 'ccfd2be8479b75b5c63e97e1ca7dfe203e9b36ee' }, hAsync("ion-icon", { key: 'ac254fe7f327b08f1ae3fcea89d5cf0e83c9a96c', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && hAsync("ion-ripple-effect", { key: 'f0f17c4ca96e3eed3c1727ee00578d40af8f0115', type: "unbounded" }))));
+            }) }, hAsync("button", Object.assign({ key: '7c4a449e239679376f38471d95fd602f9caec5f6' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), hAsync("span", { key: '8bb5bf453280a66109198c970b678ad800c7a8cf', class: "button-inner" }, hAsync("slot", { key: '7f78b1e7a0695f2bd600d13ca81f50dd8b965726' }, hAsync("ion-icon", { key: '9f67f5bb06b1f03a6e5df9ecbe23ebf69fb40756', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && hAsync("ion-ripple-effect", { key: '10be7145c614144e94c3cc0b92dc5ee4e1587fe6', type: "unbounded" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -20919,10 +20919,10 @@ class MenuToggle {
     render() {
         const mode = getIonMode$1(this);
         const hidden = this.autoHide && !this.visible;
-        return (hAsync(Host, { key: 'cd567114769a30bd3871ed5d15bf42aed39956e1', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
+        return (hAsync(Host, { key: '55135952f3a42cb5d21916dfb7b169d894b381e3', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
                 [mode]: true,
                 'menu-toggle-hidden': hidden,
-            } }, hAsync("slot", { key: '773d4cff95ca75f23578b1e1dca53c9933f28a33' })));
+            } }, hAsync("slot", { key: 'e8ecb59a6ec075b07e2a1b8fcdf7df3dd9975a03' })));
     }
     static get style() { return menuToggleCss; }
     static get cmpMeta() { return {
@@ -22804,170 +22804,9 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
     };
 };
 
-/**
- * These thresholds match the SCSS media query breakpoints in modal.vars.scss
- * that trigger the centered dialog layout (non-fullscreen modal).
- *
- * SCSS defines two height breakpoints: $modal-inset-min-height-small (600px)
- * and $modal-inset-min-height-large (768px). We use the smaller one because
- * that's the threshold where the modal transitions from fullscreen to centered
- * dialog — the larger breakpoint only increases the dialog's height.
- */
-const MODAL_INSET_MIN_WIDTH = 768;
-const MODAL_INSET_MIN_HEIGHT = 600;
-const EDGE_THRESHOLD = 5;
-/**
- * Cache for resolved root safe-area-top value, invalidated once per frame.
- */
-let cachedRootSafeAreaTop = null;
-let cacheInvalidationScheduled$1 = false;
-/**
- * Determines if the current viewport meets the CSS media query conditions
- * that cause regular modals to render as centered dialogs instead of fullscreen.
- * Matches: @media (min-width: 768px) and (min-height: 600px)
- */
-const isCenteredDialogViewport = () => {
-    if (!win$1)
-        return false;
-    return win$1.matchMedia(`(min-width: ${MODAL_INSET_MIN_WIDTH}px) and (min-height: ${MODAL_INSET_MIN_HEIGHT}px)`)
-        .matches;
-};
-/**
- * Resolves the current root --ion-safe-area-top value to pixels.
- * Uses a temporary element because getComputedStyle on :root returns
- * the declared value of custom properties (e.g. "env(safe-area-inset-top)")
- * rather than a resolved number.
- *
- * Results are cached for the current frame to avoid repeated reflows.
- */
-const getRootSafeAreaTop = () => {
-    if (cachedRootSafeAreaTop !== null) {
-        return cachedRootSafeAreaTop;
-    }
-    const doc = win$1 === null || win$1 === void 0 ? void 0 : win$1.document;
-    if (!(doc === null || doc === void 0 ? void 0 : doc.body)) {
-        return 0;
-    }
-    const el = doc.createElement('div');
-    el.style.cssText =
-        'position:fixed;visibility:hidden;pointer-events:none;top:0;left:0;' + 'padding-top:var(--ion-safe-area-top,0px);';
-    doc.body.appendChild(el);
-    const value = parseFloat(getComputedStyle(el).paddingTop) || 0;
-    el.remove();
-    cachedRootSafeAreaTop = value;
-    if (!cacheInvalidationScheduled$1) {
-        cacheInvalidationScheduled$1 = true;
-        raf(() => {
-            cachedRootSafeAreaTop = null;
-            cacheInvalidationScheduled$1 = false;
-        });
-    }
-    return value;
-};
-/**
- * Returns the initial safe-area configuration based on modal type.
- * This is called before animation starts and uses configuration-based prediction.
- *
- * @param context - Modal context information
- * @returns SafeAreaConfig with initial safe-area values
- */
-const getInitialSafeAreaConfig = (context) => {
-    const { isSheetModal, isCardModal } = context;
-    // Sheet modals always zero top safe-area. The sheet height offset from the
-    // top edge is handled by --ion-modal-offset-top (set in modal.tsx) using
-    // the resolved root value, so --ion-safe-area-top is never needed for
-    // height calculation. Keeping it at 0px prevents header content from
-    // getting double-offset padding.
-    if (isSheetModal) {
-        return {
-            top: '0px',
-            bottom: 'inherit',
-            left: '0px',
-            right: '0px',
-        };
-    }
-    // Card modals need safe-area for height calculation.
-    // Note: isCardModal is already gated on mode === 'ios' by the caller.
-    if (isCardModal) {
-        return {
-            top: 'inherit',
-            bottom: 'inherit',
-            left: '0px',
-            right: '0px',
-        };
-    }
-    // On viewports that meet the centered dialog media query breakpoints,
-    // regular modals render as centered dialogs (not fullscreen), so they
-    // don't touch any screen edges and don't need safe-area insets.
-    if (isCenteredDialogViewport()) {
-        return {
-            top: '0px',
-            bottom: '0px',
-            left: '0px',
-            right: '0px',
-        };
-    }
-    // Fullscreen modals on phone - inherit all safe areas
-    return {
-        top: 'inherit',
-        bottom: 'inherit',
-        left: 'inherit',
-        right: 'inherit',
-    };
-};
-/**
- * Returns safe-area configuration based on actual modal position.
- * Detects which edges the modal overlaps with and only applies safe-area to those edges.
- *
- * Note: On Android edge-to-edge (API 36+), getBoundingClientRect() may report
- * inconsistent values. Sheet and card modals avoid this by using configuration-based
- * prediction instead. Regular modals use coordinate detection which works reliably
- * on web and iOS; Android edge-to-edge may need a configuration-based fallback
- * once a reliable detection mechanism is available.
- *
- * @param wrapperEl - The modal wrapper element to measure
- * @returns SafeAreaConfig based on position
- */
-const getPositionBasedSafeAreaConfig = (wrapperEl) => {
-    var _a, _b;
-    const rect = wrapperEl.getBoundingClientRect();
-    const vh = (_a = win$1 === null || win$1 === void 0 ? void 0 : win$1.innerHeight) !== null && _a !== void 0 ? _a : 0;
-    const vw = (_b = win$1 === null || win$1 === void 0 ? void 0 : win$1.innerWidth) !== null && _b !== void 0 ? _b : 0;
-    // Only apply safe-area to sides where modal overlaps with screen edge
-    return {
-        top: rect.top <= EDGE_THRESHOLD ? 'inherit' : '0px',
-        bottom: rect.bottom >= vh - EDGE_THRESHOLD ? 'inherit' : '0px',
-        left: rect.left <= EDGE_THRESHOLD ? 'inherit' : '0px',
-        right: rect.right >= vw - EDGE_THRESHOLD ? 'inherit' : '0px',
-    };
-};
-/**
- * Applies safe-area CSS custom property overrides to the modal host element.
- *
- * @param hostEl - The modal host element (ion-modal)
- * @param config - Safe-area configuration to apply
- */
-const applySafeAreaOverrides = (hostEl, config) => {
-    hostEl.style.setProperty('--ion-safe-area-top', config.top);
-    hostEl.style.setProperty('--ion-safe-area-bottom', config.bottom);
-    hostEl.style.setProperty('--ion-safe-area-left', config.left);
-    hostEl.style.setProperty('--ion-safe-area-right', config.right);
-};
-/**
- * Clears safe-area CSS custom property overrides from the modal host element.
- *
- * @param hostEl - The modal host element (ion-modal)
- */
-const clearSafeAreaOverrides = (hostEl) => {
-    hostEl.style.removeProperty('--ion-safe-area-top');
-    hostEl.style.removeProperty('--ion-safe-area-bottom');
-    hostEl.style.removeProperty('--ion-safe-area-left');
-    hostEl.style.removeProperty('--ion-safe-area-right');
-};
-
-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}}@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-modal-offset-top, 0px) + 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}";
+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}";
 
-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}}@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-modal-offset-top, 0px) + 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(.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}";
 
 // TODO(FW-2832): types
 /**
@@ -23190,31 +23029,13 @@ class Modal {
         }
     }
     onWindowResize() {
-        if (!this.presented)
+        // Only handle resize for iOS card modals when no custom animations are provided
+        if (getIonMode$1(this) !== 'ios' || !this.presentingElement || this.enterAnimation || this.leaveAnimation) {
             return;
+        }
         clearTimeout(this.resizeTimeout);
         this.resizeTimeout = setTimeout(() => {
-            const context = this.getSafeAreaContext();
-            // iOS card modals: handle portrait/landscape view transitions
-            if (context.isCardModal && !this.enterAnimation && !this.leaveAnimation) {
-                this.handleViewTransition();
-            }
-            // Sheet modals: re-compute the internal offset property since safe-area
-            // values may change on device rotation (e.g., portrait notch vs landscape).
-            if (context.isSheetModal) {
-                this.updateSheetOffsetTop();
-            }
-            // Regular (non-sheet, non-card) modals: update safe-area overrides
-            // since the viewport may have crossed the centered-dialog breakpoint.
-            if (!context.isSheetModal && !context.isCardModal) {
-                this.updateSafeAreaOverrides();
-                // Re-evaluate fullscreen safe-area padding: clear first, then re-apply
-                if (this.wrapperEl) {
-                    this.wrapperEl.style.removeProperty('height');
-                    this.wrapperEl.style.removeProperty('padding-bottom');
-                }
-                this.applyFullscreenSafeArea();
-            }
+            this.handleViewTransition();
         }, 50); // Debounce to avoid excessive calls during active resizing
     }
     breakpointsChanged(breakpoints) {
@@ -23231,9 +23052,6 @@ class Modal {
         this.triggerController.removeClickListener();
         this.cleanupViewTransitionListener();
         this.cleanupParentRemovalObserver();
-        // Also called in dismiss() — intentional dual cleanup covers both
-        // dismiss-then-remove and direct DOM removal without dismiss.
-        this.cleanupSafeAreaOverrides();
     }
     componentWillLoad() {
         var _a;
@@ -23394,11 +23212,6 @@ class Modal {
             await waitForMount();
         }
         writeTask(() => this.el.classList.add('show-modal'));
-        // Recalculate isSheetModal before safe-area setup because framework
-        // bindings (e.g., Angular) may not have been applied when componentWillLoad ran.
-        this.isSheetModal = this.breakpoints !== undefined && this.initialBreakpoint !== undefined;
-        // Set initial safe-area overrides before animation
-        this.setInitialSafeAreaOverrides();
         const hasCardModal = presentingElement !== undefined;
         /**
          * We need to change the status bar at the
@@ -23416,10 +23229,6 @@ class Modal {
             backdropBreakpoint: this.backdropBreakpoint,
             expandToScroll: this.expandToScroll,
         });
-        // Update safe-area based on actual position after animation
-        this.updateSafeAreaOverrides();
-        // Apply fullscreen safe-area padding if needed
-        this.applyFullscreenSafeArea();
         /* tslint:disable-next-line */
         if (typeof window !== 'undefined') {
             /**
@@ -23451,7 +23260,13 @@ class Modal {
             };
             window.addEventListener(KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
         }
-        if (this.isSheetModal) {
+        /**
+         * Recalculate isSheetModal because framework bindings (e.g., Angular)
+         * may not have been applied when componentWillLoad ran.
+         */
+        const isSheetModal = this.breakpoints !== undefined && this.initialBreakpoint !== undefined;
+        this.isSheetModal = isSheetModal;
+        if (isSheetModal) {
             this.initSheetGesture();
         }
         else if (hasCardModal) {
@@ -23641,9 +23456,6 @@ class Modal {
         if (this.gestureAnimationDismissing && role !== GESTURE) {
             return false;
         }
-        // Cancel any pending resize timeout to prevent stale updates during dismiss
-        clearTimeout(this.resizeTimeout);
-        this.resizeTimeout = undefined;
         /**
          * Because the canDismiss check below is async,
          * we need to claim a lock before the check happens,
@@ -23698,7 +23510,6 @@ class Modal {
             }
             this.cleanupViewTransitionListener();
             this.cleanupParentRemovalObserver();
-            this.cleanupSafeAreaOverrides();
             this.cleanupChildRoutePassthrough();
         }
         this.currentBreakpoint = undefined;
@@ -23819,9 +23630,6 @@ class Modal {
         this.viewTransitionAnimation = transitionAnimation;
         transitionAnimation.play().then(() => {
             this.viewTransitionAnimation = undefined;
-            // Wait for a layout pass after the transition so getBoundingClientRect()
-            // in getPositionBasedSafeAreaConfig() reflects the new dimensions.
-            raf(() => this.updateSafeAreaOverrides());
             // After orientation transition, recreate the swipe-to-close gesture
             // with updated animation that reflects the new presenting element state
             this.reinitSwipeToClose();
@@ -23948,123 +23756,6 @@ class Modal {
         (_a = this.parentRemovalObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.parentRemovalObserver = undefined;
     }
-    /**
-     * Creates the context object for safe-area utilities.
-     */
-    getSafeAreaContext() {
-        return {
-            isSheetModal: this.isSheetModal,
-            isCardModal: this.presentingElement !== undefined && getIonMode$1(this) === 'ios',
-            presentingElement: this.presentingElement,
-            breakpoints: this.breakpoints,
-            currentBreakpoint: this.currentBreakpoint,
-        };
-    }
-    /**
-     * Sets initial safe-area overrides before modal animation.
-     * Called in present() before animation starts.
-     *
-     * For sheet modals, the SCSS --height formula uses --ion-modal-offset-top
-     * (an internal property) instead of --ion-safe-area-top. We resolve the
-     * root safe-area-top to pixels and set --ion-modal-offset-top, decoupling
-     * the height calculation from --ion-safe-area-top (which is zeroed for
-     * sheets to prevent header content from getting double-offset padding).
-     */
-    setInitialSafeAreaOverrides() {
-        const context = this.getSafeAreaContext();
-        const safeAreaConfig = getInitialSafeAreaConfig(context);
-        applySafeAreaOverrides(this.el, safeAreaConfig);
-        // Set the internal offset property with the resolved root safe-area-top value
-        if (context.isSheetModal) {
-            this.updateSheetOffsetTop();
-        }
-    }
-    /**
-     * 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).
-     */
-    updateSheetOffsetTop() {
-        const safeAreaTop = getRootSafeAreaTop();
-        this.el.style.setProperty('--ion-modal-offset-top', `${safeAreaTop}px`);
-    }
-    /**
-     * Updates safe-area overrides during dynamic state changes.
-     * Called after animations, during gestures, and on orientation changes.
-     */
-    updateSafeAreaOverrides() {
-        const { wrapperEl, el } = this;
-        const context = this.getSafeAreaContext();
-        // Sheet modals: safe-area is fully determined at presentation time
-        // (top is always 0px, height is frozen). Nothing to update.
-        if (context.isSheetModal)
-            return;
-        // Card modals have fixed safe-area requirements set by initial prediction.
-        if (context.isCardModal)
-            return;
-        // wrapperEl is required for position-based detection below
-        if (!wrapperEl)
-            return;
-        // Regular modals: use position-based detection to correctly handle both
-        // fullscreen modals and centered dialogs with custom dimensions.
-        const safeAreaConfig = getPositionBasedSafeAreaConfig(wrapperEl);
-        applySafeAreaOverrides(el, safeAreaConfig);
-    }
-    /**
-     * Applies padding-bottom to fullscreen modal wrapper to prevent
-     * content from overlapping system navigation bar.
-     */
-    applyFullscreenSafeArea() {
-        const { wrapperEl, el } = this;
-        if (!wrapperEl)
-            return;
-        const context = this.getSafeAreaContext();
-        if (context.isSheetModal || context.isCardModal)
-            return;
-        // Check for standard Ionic layout children (ion-content, ion-footer),
-        // searching one level deep for wrapped components (e.g.,
-        // <app-footer><ion-footer>...</ion-footer></app-footer>).
-        // Note: uses a manual loop instead of querySelector(':scope > ...') because
-        // Stencil's mock-doc (used in spec tests) does not support :scope.
-        let hasContent = false;
-        let hasFooter = false;
-        for (const child of Array.from(el.children)) {
-            if (child.tagName === 'ION-CONTENT')
-                hasContent = true;
-            if (child.tagName === 'ION-FOOTER')
-                hasFooter = true;
-            for (const grandchild of Array.from(child.children)) {
-                if (grandchild.tagName === 'ION-CONTENT')
-                    hasContent = true;
-                if (grandchild.tagName === 'ION-FOOTER')
-                    hasFooter = true;
-            }
-        }
-        // Only apply wrapper padding for standard Ionic layouts (has ion-content
-        // but no ion-footer). Custom modals with raw HTML are fully
-        // developer-controlled and should not be modified.
-        if (!hasContent || hasFooter)
-            return;
-        // Reduce wrapper height by safe-area and add equivalent padding so the
-        // total visual size stays the same but the flex content area shrinks.
-        // Using height + padding instead of box-sizing: border-box avoids
-        // breaking custom modals that set --border-width (border-box would
-        // include the border inside the height, changing the layout).
-        wrapperEl.style.setProperty('height', 'calc(var(--height) - var(--ion-safe-area-bottom, 0px))');
-        wrapperEl.style.setProperty('padding-bottom', 'var(--ion-safe-area-bottom, 0px)');
-    }
-    /**
-     * Clears all safe-area overrides and padding from wrapper.
-     */
-    cleanupSafeAreaOverrides() {
-        clearSafeAreaOverrides(this.el);
-        // Remove internal sheet offset property
-        this.el.style.removeProperty('--ion-modal-offset-top');
-        if (this.wrapperEl) {
-            this.wrapperEl.style.removeProperty('height');
-            this.wrapperEl.style.removeProperty('padding-bottom');
-        }
-    }
     render() {
         const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap, expandToScroll, } = this;
         const showHandle = handle !== false && isSheetModal;
@@ -24072,20 +23763,20 @@ class Modal {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (hAsync(Host, Object.assign({ key: '038ae26c2cb040043c7d0c217a4de6a7ae909235', "no-router": true,
+        return (hAsync(Host, Object.assign({ key: '978ba9cc81464b2d9b4caaf36285d5f7bf7e568d', "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 }), hAsync("ion-backdrop", { key: '6bab796467b370e79b24ce17c5a3d51adb07ee8c', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: 'b9a19e86a2c7f079c88ef7a914c7c890aa601887', class: "modal-shadow" }), hAsync("div", Object.assign({ key: 'f4315c34aa78be4e3540361755964be2ddf43265',
+            }, 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 }), hAsync("ion-backdrop", { key: '9f95566d8e0c06bb9607f514484848c250f35f1f', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: '91ff26d4f3ab4367f3a2940f51c6a5a3d4c972c3', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '064b2dba13854505a4eb1f5e54296ac79cb7a2bd',
             /*
               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: '3f7792bd65e0f8634e62bf27f9edcb636a03030a', 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: 'b579b08b114022032d078a527111456ceefc7b35', 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) })), hAsync("slot", { key: '001e5b01831e240bd98f75ff62446b90b64d8394', 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) })), hAsync("slot", { key: 'dacea58475b72d9c0209934ff31f3be6b9ac8c85', onSlotchange: this.onSlotChange }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -25033,7 +24724,7 @@ class Nav {
         }
     }
     render() {
-        return hAsync("slot", { key: '8067c9835d255daec61f33dba200fd3a6ff839a0' });
+        return hAsync("slot", { key: 'a549286b51b1bb23c9ef51f71148452228d0ab14' });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -25106,7 +24797,7 @@ class NavLink {
         };
     }
     render() {
-        return hAsync(Host, { key: '6dbb1ad4f351e9215375aac11ab9b53762e07a08', onClick: this.onClick });
+        return hAsync(Host, { key: 'd4d80feb51c0d92b0bedf6952c892f9df3002046', onClick: this.onClick });
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -25137,9 +24828,9 @@ class Note {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '0ec2ef7367d867fd7588611953f696eecdf3221e', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'b86a6acc9274df6528d224d4c11ab826a0f84dbc', class: createColorClasses$1(this.color, {
                 [mode]: true,
-            }) }, hAsync("slot", { key: 'a200b94ddffb29cf6dabe6e984220930ea7efdef' })));
+            }) }, hAsync("slot", { key: '5de76567ed7713827cd277a42db102faf34190c8' })));
     }
     static get style() { return {
         ios: noteIosCss,
@@ -25899,11 +25590,11 @@ class Picker {
     render() {
         const { htmlAttributes } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, Object.assign({ key: 'b95440747eb80cba23ae676d399d5e5816722c58', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '80f66d33780d8a1352d24be9cb63a0cc03d01ab5', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: Object.assign({ [mode]: true,
                 // Used internally for styling
-                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), hAsync("ion-backdrop", { key: '169d1c83ef40e7fcb134219a585298b403a70b0f', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '98518e5f5cea2dfb8dfa63d9545e9ae3a5765023', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '151755ab8eb23f9adafbfe201349398f5a69dee7', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, hAsync("div", { key: '5dcf93b2f4fe8f4fce7c7aec8f85ef45a03ef470', class: "picker-toolbar" }, this.buttons.map((b) => (hAsync("div", { class: buttonWrapperClass(b) }, hAsync("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass$1(b) }, b.text))))), hAsync("div", { key: 'fd5d66708edd38adc5a4d2fad7298969398a05e3', class: "picker-columns" }, hAsync("div", { key: '1b5830fd6cef1016af7736792c514965d6cb38a8', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => hAsync("ion-picker-legacy-column", { col: c })), hAsync("div", { key: 'c6edeca7afd69e13c9c66ba36f261974fd0f8f78', class: "picker-below-highlight" }))), hAsync("div", { key: 'e2a4b24710e30579b14b82dbfd3761b2187797b5', tabindex: "0", "aria-hidden": "true" })));
+                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), hAsync("ion-backdrop", { key: '97fb8e10ba08b197610cb8c0cdea61103883d55f', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: 'b3969cb6fbf7153623d14e3ca1493d3370efb211', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '299268483c3727e698d9135bfdf40349a7050ac1', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, hAsync("div", { key: '95394de3ef691899b7dbf416f56fd3e86bbdce3f', class: "picker-toolbar" }, this.buttons.map((b) => (hAsync("div", { class: buttonWrapperClass(b) }, hAsync("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass$1(b) }, b.text))))), hAsync("div", { key: '05f18bb8d00dc0e22f691b7e41f90f729a6c66d7', class: "picker-columns" }, hAsync("div", { key: '4a8fdf224effc0af67fd413e2e6aca8a78d1cf43', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => hAsync("ion-picker-legacy-column", { col: c })), hAsync("div", { key: 'e50a31db45e3f39e9d0fed36a21be9257eec09bf', class: "picker-below-highlight" }))), hAsync("div", { key: '5a78cb2176ac807ea0c195c6b76cd0e8eef9d4c0', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -26872,9 +26563,9 @@ class PickerColumnCmp {
     render() {
         const col = this.col;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'ed32d108dd94f0302fb453c31a3497ebae65ec37', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
+        return (hAsync(Host, { key: '86125e95f18837dfd021db01777d72a1562d8ee3', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
                 'max-width': this.col.columnWidth,
-            } }, col.prefix && (hAsync("div", { key: '9f0634890e66fd4ae74f826d1eea3431de121393', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), hAsync("div", { key: '337e996e5be91af16446085fe22436f213b771eb', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (hAsync("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (hAsync("div", { key: 'd69a132599d78d9e5107f12228978cfce4e43098', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (hAsync("div", { key: 'b0f3d39e0bd128781066ffefb7a1e40d12a9e76d', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), hAsync("div", { key: '0b106ac4d56916eaaa7f09d1b68348b3754b7bba', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (hAsync("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (hAsync("div", { key: '00ff2f9dbb4561787e5a5223327c6a2a33f8362e', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -26991,10 +26682,10 @@ class PickerColumnOption {
     render() {
         const { color, disabled, ariaLabel } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'f816729941aabcb31ddfdce3ffe2e2139030d715', class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'c45a1c14a351bf57d7113671164852349be5aa8a', class: createColorClasses$1(color, {
                 [mode]: true,
                 ['option-disabled']: disabled,
-            }) }, hAsync("div", { key: 'd942de84fd14d7dc06b1e5cf4f7920d1dc3c6371', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, hAsync("slot", { key: 'b0df5717b42209e649097209a01476e1a66f5c5c' }))));
+            }) }, hAsync("div", { key: '824930b658c6e3fb493ac4c6c2451d38c6bc4829', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, hAsync("slot", { key: '019df4dcf46e629bdbebcd46ed3ab29669feab27' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -27019,58 +26710,6 @@ class PickerColumnOption {
     }; }
 }
 
-/**
- * Shared per-frame cache for safe-area insets. Avoids creating a temporary
- * DOM element and forcing a synchronous reflow on every call within the same
- * frame (e.g., multiple popovers presenting simultaneously). Invalidated
- * after the next animation frame so values stay fresh across orientation
- * changes and viewport resizes.
- */
-let cachedInsets = null;
-let cacheInvalidationScheduled = false;
-/**
- * Resolves the current --ion-safe-area-* CSS custom property values
- * to actual pixel numbers. A temporary element is needed because
- * getComputedStyle on :root returns the declared value of custom
- * properties (e.g. "env(safe-area-inset-top)") rather than a
- * resolved number. By assigning them to standard padding properties,
- * the browser resolves the value.
- *
- * Results are cached for the current frame to avoid repeated reflows.
- */
-const getSafeAreaInsets = (doc) => {
-    if (cachedInsets !== null) {
-        return cachedInsets;
-    }
-    if (doc.body === null) {
-        return { top: 0, bottom: 0, left: 0, right: 0 };
-    }
-    const el = doc.createElement('div');
-    el.style.cssText =
-        'position:fixed;visibility:hidden;pointer-events:none;top:0;left:0;' +
-            'padding-top:var(--ion-safe-area-top,0px);' +
-            'padding-bottom:var(--ion-safe-area-bottom,0px);' +
-            'padding-left:var(--ion-safe-area-left,0px);' +
-            'padding-right:var(--ion-safe-area-right,0px);';
-    doc.body.appendChild(el);
-    const style = getComputedStyle(el);
-    const insets = {
-        top: parseFloat(style.paddingTop) || 0,
-        bottom: parseFloat(style.paddingBottom) || 0,
-        left: parseFloat(style.paddingLeft) || 0,
-        right: parseFloat(style.paddingRight) || 0,
-    };
-    el.remove();
-    cachedInsets = insets;
-    if (!cacheInvalidationScheduled) {
-        cacheInvalidationScheduled = true;
-        raf(() => {
-            cachedInsets = null;
-            cacheInvalidationScheduled = false;
-        });
-    }
-    return insets;
-};
 /**
  * Returns the dimensions of the popover
  * arrow on `ios` mode. If arrow is disabled
@@ -27706,10 +27345,8 @@ const calculatePopoverCenterAlign = (side, triggerBoundingBox, contentWidth, con
  * Adjusts popover positioning coordinates
  * such that popover does not appear offscreen
  * or overlapping safe area bounds.
- *
- * @internal - This is not part of the public API.
  */
-const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyWidth, bodyHeight, contentWidth, contentHeight, safeArea, contentOriginX, contentOriginY, triggerCoordinates, coordArrowTop = 0, coordArrowLeft = 0, arrowHeight = 0) => {
+const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyWidth, bodyHeight, contentWidth, contentHeight, safeAreaMargin, contentOriginX, contentOriginY, triggerCoordinates, coordArrowTop = 0, coordArrowLeft = 0, arrowHeight = 0) => {
     let arrowTop = coordArrowTop;
     const arrowLeft = coordArrowLeft;
     let left = coordLeft;
@@ -27719,19 +27356,16 @@ const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyW
     let originY = contentOriginY;
     let checkSafeAreaLeft = false;
     let checkSafeAreaRight = false;
-    let checkSafeAreaTop = false;
-    let checkSafeAreaBottom = false;
     const triggerTop = triggerCoordinates
         ? triggerCoordinates.top + triggerCoordinates.height
         : bodyHeight / 2 - contentHeight / 2;
     const triggerHeight = triggerCoordinates ? triggerCoordinates.height : 0;
     let addPopoverBottomClass = false;
-    const hideArrow = false;
     /**
      * Adjust popover so it does not
      * go off the left of the screen.
      */
-    if (left < bodyPadding + safeArea.left) {
+    if (left < bodyPadding + safeAreaMargin) {
         left = bodyPadding;
         checkSafeAreaLeft = true;
         originX = 'left';
@@ -27740,58 +27374,41 @@ const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyW
          * go off the right of the screen.
          */
     }
-    else if (contentWidth + bodyPadding + left + safeArea.right > bodyWidth) {
+    else if (contentWidth + bodyPadding + left + safeAreaMargin > bodyWidth) {
         checkSafeAreaRight = true;
         left = bodyWidth - contentWidth - bodyPadding;
         originX = 'right';
     }
     /**
      * Adjust popover so it does not
-     * go off the bottom of the screen
-     * or overlap the bottom safe area.
+     * go off the top of the screen.
      * If popover is on the left or the right of
      * the trigger, then we should not adjust top
      * margins.
      */
-    if (triggerTop + triggerHeight + contentHeight > bodyHeight - safeArea.bottom &&
-        (side === 'top' || side === 'bottom')) {
-        /**
-         * Calculate where the popover top would be if flipped
-         * above the trigger. Check whether that position clears
-         * the top safe area with room for bodyPadding.
-         */
-        const idealFlipTop = triggerTop - contentHeight - triggerHeight - (arrowHeight - 1);
-        if (idealFlipTop >= safeArea.top + bodyPadding) {
+    if (triggerTop + triggerHeight + contentHeight > bodyHeight && (side === 'top' || side === 'bottom')) {
+        if (triggerTop - contentHeight > 0) {
             /**
-             * Popover fits above the trigger without overlapping
-             * the top safe area. Use the ideal position directly —
-             * no safe-area CSS vars needed since it clears both edges.
+             * While we strive to align the popover with the trigger
+             * on smaller screens this is not always possible. As a result,
+             * we adjust the popover up so that it does not hang
+             * off the bottom of the screen. However, we do not want to move
+             * the popover up so much that it goes off the top of the screen.
+             *
+             * We chose 12 here so that the popover position looks a bit nicer as
+             * it is not right up against the edge of the screen.
              */
-            top = idealFlipTop;
+            top = Math.max(12, triggerTop - contentHeight - triggerHeight - (arrowHeight - 1));
             arrowTop = top + contentHeight;
             originY = 'bottom';
             addPopoverBottomClass = true;
-        }
-        else {
             /**
-             * Can't flip above the trigger. Constrain the bottom
-             * edge while keeping the top near the trigger. This
-             * creates a scrollable area anchored to the trigger.
+             * If not enough room for popover to appear
+             * above trigger, then cut it off.
              */
+        }
+        else {
             bottom = bodyPadding;
-            checkSafeAreaBottom = true;
-            /**
-             * When the trigger is near the bottom of the screen,
-             * the calculated top may be at or past the bottom
-             * constraint, leaving zero visible height. In that
-             * case, pull top up to the top safe area so the
-             * popover fills the available space between safe areas.
-             */
-            const bottomEdge = bodyHeight - safeArea.bottom - bodyPadding;
-            if (top >= bottomEdge) {
-                top = safeArea.top + bodyPadding;
-                checkSafeAreaTop = true;
-            }
         }
     }
     return {
@@ -27802,12 +27419,9 @@ const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyW
         originY,
         checkSafeAreaLeft,
         checkSafeAreaRight,
-        checkSafeAreaTop,
-        checkSafeAreaBottom,
         arrowTop,
         arrowLeft,
         addPopoverBottomClass,
-        hideArrow,
     };
 };
 const shouldShowArrow = (side, didAdjustBounds = false, ev, trigger) => {
@@ -27837,15 +27451,6 @@ const shouldShowArrow = (side, didAdjustBounds = false, ev, trigger) => {
 };
 
 const POPOVER_IOS_BODY_PADDING = 5;
-/**
- * Minimum edge margin for iOS popovers ensures visual spacing from screen
- * edges on devices without safe areas (e.g., older iPhones without notches).
- * Previously this was a hardcoded `safeAreaMargin = 25` that served dual
- * purpose: safe-area avoidance AND visual spacing. Now that actual safe-area
- * insets are read dynamically, this floor preserves the visual spacing when
- * safe-area values are 0.
- */
-const POPOVER_IOS_MIN_EDGE_MARGIN = 25;
 /**
  * iOS Popover Enter Animation
  */
@@ -27871,16 +27476,8 @@ const iosEnterAnimation$1 = (baseEl, opts) => {
     };
     const results = getPopoverPosition(isRTL, contentWidth, contentHeight, arrowWidth, arrowHeight, reference, side, align, defaultPosition, trigger, ev);
     const padding = size === 'cover' ? 0 : POPOVER_IOS_BODY_PADDING;
-    const rawSafeArea = getSafeAreaInsets(doc);
-    const safeArea = size === 'cover'
-        ? { top: 0, bottom: 0, left: 0, right: 0 }
-        : {
-            top: Math.max(rawSafeArea.top, POPOVER_IOS_MIN_EDGE_MARGIN),
-            bottom: Math.max(rawSafeArea.bottom, POPOVER_IOS_MIN_EDGE_MARGIN),
-            left: Math.max(rawSafeArea.left, POPOVER_IOS_MIN_EDGE_MARGIN),
-            right: Math.max(rawSafeArea.right, POPOVER_IOS_MIN_EDGE_MARGIN),
-        };
-    const { originX, originY, top, left, bottom, checkSafeAreaLeft, checkSafeAreaRight, checkSafeAreaTop, checkSafeAreaBottom, arrowTop, arrowLeft, addPopoverBottomClass} = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, safeArea, results.originX, results.originY, results.referenceCoordinates, results.arrowTop, results.arrowLeft, arrowHeight);
+    const margin = size === 'cover' ? 0 : 25;
+    const { originX, originY, top, left, bottom, checkSafeAreaLeft, checkSafeAreaRight, arrowTop, arrowLeft, addPopoverBottomClass, } = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, margin, results.originX, results.originY, results.referenceCoordinates, results.arrowTop, results.arrowLeft, arrowHeight);
     const baseAnimation = createAnimation();
     const backdropAnimation = createAnimation();
     const contentAnimation = createAnimation();
@@ -27911,14 +27508,10 @@ const iosEnterAnimation$1 = (baseEl, opts) => {
             baseEl.classList.add('popover-bottom');
         }
         if (bottom !== undefined) {
-            let bottomValue = `${bottom}px`;
-            if (checkSafeAreaBottom) {
-                bottomValue = `${bottom}px + var(--ion-safe-area-bottom, 0px)`;
-            }
-            contentEl.style.setProperty('bottom', `calc(${bottomValue})`);
+            contentEl.style.setProperty('bottom', `${bottom}px`);
         }
-        const safeAreaLeft = ' + var(--ion-safe-area-left, 0px)';
-        const safeAreaRight = ' - var(--ion-safe-area-right, 0px)';
+        const safeAreaLeft = ' + var(--ion-safe-area-left, 0)';
+        const safeAreaRight = ' - var(--ion-safe-area-right, 0)';
         let leftValue = `${left}px`;
         if (checkSafeAreaLeft) {
             leftValue = `${left}px${safeAreaLeft}`;
@@ -27926,11 +27519,7 @@ const iosEnterAnimation$1 = (baseEl, opts) => {
         if (checkSafeAreaRight) {
             leftValue = `${left}px${safeAreaRight}`;
         }
-        let topValue = `${top}px`;
-        if (checkSafeAreaTop) {
-            topValue = `${top}px + var(--ion-safe-area-top, 0px)`;
-        }
-        contentEl.style.setProperty('top', `calc(${topValue} + var(--offset-y, 0))`);
+        contentEl.style.setProperty('top', `calc(${top}px + var(--offset-y, 0))`);
         contentEl.style.setProperty('left', `calc(${leftValue} + var(--offset-x, 0))`);
         contentEl.style.setProperty('transform-origin', `${originY} ${originX}`);
         if (arrowEl !== null) {
@@ -28006,23 +27595,7 @@ const mdEnterAnimation$1 = (baseEl, opts) => {
     };
     const results = getPopoverPosition(isRTL, contentWidth, contentHeight, 0, 0, reference, side, align, defaultPosition, trigger, ev);
     const padding = size === 'cover' ? 0 : POPOVER_MD_BODY_PADDING;
-    // MD mode now applies safe-area insets (previously passed 0, ignoring all safe areas).
-    // This is needed for Android edge-to-edge (API 36+) where system bars overlap content.
-    const safeArea = size === 'cover' ? { top: 0, bottom: 0, left: 0, right: 0 } : getSafeAreaInsets(doc);
-    const { originX, originY, top, left, bottom, checkSafeAreaLeft, checkSafeAreaRight, checkSafeAreaTop, checkSafeAreaBottom, addPopoverBottomClass, } = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, safeArea, results.originX, results.originY, results.referenceCoordinates);
-    const safeAreaLeftCalc = ' + var(--ion-safe-area-left, 0px)';
-    const safeAreaRightCalc = ' - var(--ion-safe-area-right, 0px)';
-    let leftValue = `${left}px`;
-    if (checkSafeAreaLeft) {
-        leftValue = `${left}px${safeAreaLeftCalc}`;
-    }
-    if (checkSafeAreaRight) {
-        leftValue = `${left}px${safeAreaRightCalc}`;
-    }
-    let topValue = `${top}px`;
-    if (checkSafeAreaTop) {
-        topValue = `${top}px + var(--ion-safe-area-top, 0px)`;
-    }
+    const { originX, originY, top, left, bottom } = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, 0, results.originX, results.originY, results.referenceCoordinates);
     const baseAnimation = createAnimation();
     const backdropAnimation = createAnimation();
     const wrapperAnimation = createAnimation();
@@ -28039,17 +27612,13 @@ const mdEnterAnimation$1 = (baseEl, opts) => {
     contentAnimation
         .addElement(contentEl)
         .beforeStyles({
-        top: `calc(${topValue} + var(--offset-y, 0px))`,
-        left: `calc(${leftValue} + var(--offset-x, 0px))`,
+        top: `calc(${top}px + var(--offset-y, 0px))`,
+        left: `calc(${left}px + var(--offset-x, 0px))`,
         'transform-origin': `${originY} ${originX}`,
     })
         .beforeAddWrite(() => {
         if (bottom !== undefined) {
-            let bottomValue = `${bottom}px`;
-            if (checkSafeAreaBottom) {
-                bottomValue = `${bottom}px + var(--ion-safe-area-bottom, 0px)`;
-            }
-            contentEl.style.setProperty('bottom', `calc(${bottomValue})`);
+            contentEl.style.setProperty('bottom', `${bottom}px`);
         }
     })
         .fromTo('transform', 'scale(0.8)', 'scale(1)');
@@ -28061,7 +27630,7 @@ const mdEnterAnimation$1 = (baseEl, opts) => {
         if (size === 'cover') {
             baseEl.style.setProperty('--width', `${contentWidth}px`);
         }
-        if (addPopoverBottomClass) {
+        if (originY === 'bottom') {
             baseEl.classList.add('popover-bottom');
         }
     })
@@ -28557,9 +28126,9 @@ class Popover {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (hAsync(Host, Object.assign({ key: '42863f748c93f709d433931d969230137b37d42d', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '2edd8333c630efbce59071f8a383e4326e928dbc', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && hAsync("ion-backdrop", { key: '22b6d82178b52158b76ab3fd9a7dd738fd6e4bbf', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: 'b76335c64e992a964ed3fb91d17a992c3474b4cd', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '018c846c32e7ff7fa010528e6b37a17e5f03c84c', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '350c468c80052da3a07768bceab98fe159c35a43', class: "popover-content", part: "content" }, hAsync("slot", { key: '686443c17ac9873d33905c1cdb67e6d6da675282' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && hAsync("ion-backdrop", { key: 'aac4e68b08197534375e8ea3f8c9ea0c10ab2af4', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: 'b7f4ebf57d4148b32856b0075d286f454be8de5d', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '607d94c28d73e8e957175a7c0f6e8a99ec4dcd53', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '4366a5a5de550c09895e923f345583508e1ec30c', class: "popover-content", part: "content" }, hAsync("slot", { key: 'eb7886fbc99c15b667b7d825d24f1c12d9380f03' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -28664,7 +28233,7 @@ class ProgressBar {
         const mode = getIonMode$1(this);
         // If the progress is displayed as a solid bar.
         const progressSolid = buffer === 1;
-        return (hAsync(Host, { key: 'dc69693b5d2dcb2b6e4296d7cb85bc27507f3fa6', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'c859e48f3d24a458239e36d925e5dc003ed07c6b', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses$1(color, {
                 [mode]: true,
                 [`progress-bar-${type}`]: true,
                 'progress-paused': paused,
@@ -28849,7 +28418,7 @@ class Radio {
         const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
         const mode = getIonMode$1(this);
         const inItem = hostContext('ion-item', el);
-        return (hAsync(Host, { key: '3353b28172b7f837d4b38964169b5b5f4ba02788', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'af5dc59ed528150872e907ed1036e3e2decba939', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
                 [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -28860,10 +28429,10 @@ class Radio {
                 // Focus and active styling should not apply when the radio is in an item
                 'ion-activatable': !inItem,
                 'ion-focusable': !inItem,
-            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, hAsync("label", { key: '418a0a48366ff900e97da123abf665bbbda87fb7', class: "radio-wrapper" }, hAsync("div", { key: '6e5acdd8c8f5d0ad26632a65396afef8094153d1', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, hAsync("label", { key: '1312aba3259a87fe23a6911cdfa477e309469c8b', class: "radio-wrapper" }, hAsync("div", { key: 'b342aa27e240a300836d2a135658d346b95daf09', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, hAsync("slot", { key: '10b157162cd283d624153c747679609cf0bbf11e' })), hAsync("div", { key: '4c45cca95cb105cd6df1025a26e3c045272184a0', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, hAsync("slot", { key: '0a4613d29aa783d1882cf889377f7e4fd4fea51d' })), hAsync("div", { key: '191faea79dc4cd8befc4b873f5bd9f5af8ca2acc', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29102,7 +28671,7 @@ class RadioGroup {
         const { label, labelId, el, name, value } = this;
         const mode = getIonMode$1(this);
         renderHiddenInput(true, el, name, value, false);
-        return (hAsync(Host, { key: 'db593b3ed511e9395e3c7bfd91b787328692cd6d', role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, class: mode }, this.renderHintText(), hAsync("div", { key: '85045b45a0100a45f3b9a35d1c5a25ec63d525c4', class: "radio-group-wrapper" }, hAsync("slot", { key: '53dacb87ce62398e78771fb2efaf839ab922d946' }))));
+        return (hAsync(Host, { key: 'db593b3ed511e9395e3c7bfd91b787328692cd6d', role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, class: mode }, this.renderHintText(), hAsync("slot", { key: 'd683b01c1ba34fe843c4b320bce4661a117472a5' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29862,7 +29431,7 @@ class Range {
         const needsEndAdjustment = inItem && !hasEndContent;
         const mode = getIonMode$1(this);
         renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (hAsync(Host, { key: 'ef7b01f80515bcaeb2983934ad7f10a6bd5d13ec', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'affcac4709096a48a5b4c1864b209b6352f6b078', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
@@ -29871,10 +29440,10 @@ class Range {
                 [`range-label-placement-${labelPlacement}`]: true,
                 'range-item-start-adjustment': needsStartAdjustment,
                 'range-item-end-adjustment': needsEndAdjustment,
-            }) }, hAsync("label", { key: 'fd8aa90a9d52be9da024b907e68858dae424449d', class: "range-wrapper", id: "range-label" }, hAsync("div", { key: '2172b4f329c22017dd23475c80aac25ba6e753eb', class: {
+            }) }, hAsync("label", { key: 'c7cf95fa831d10b17c137995d0a9e0cf84006a76', class: "range-wrapper", id: "range-label" }, hAsync("div", { key: '5b8479c7939ae0f94a042c3aafd64316e4577d30', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, label !== undefined ? hAsync("div", { class: "label-text" }, label) : hAsync("slot", { name: "label" })), hAsync("div", { key: '3c318bf2ea0576646d4c010bf44573fd0f483186', class: "native-wrapper" }, hAsync("slot", { key: '6586fd6fc96271e73f8a86c202d1913ad1a26f96', name: "start" }), this.renderRangeSlider(), hAsync("slot", { key: '74ac0bc2d2cb66ef708bb729f88b6ecbc1b2155d', name: "end" })))));
+            }, part: "label" }, label !== undefined ? hAsync("div", { class: "label-text" }, label) : hAsync("slot", { name: "label" })), hAsync("div", { key: '3c275d822b29a8008e044722e8b6bdabd3ecfad7', class: "native-wrapper" }, hAsync("slot", { key: '03c849d0aa708914984ad57ca292bc5fc66ecad5', name: "start" }), this.renderRangeSlider(), hAsync("slot", { key: '10ca7b8152cac00b45d8fa98ad91410f59fd176a', name: "end" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -30841,7 +30410,7 @@ class Refresher {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '2d1bd880877b698604542ab2d602d38b9504d975', slot: "fixed", class: {
+        return (hAsync(Host, { key: '06d61cc53260ce146dd6906cc96597e9baaa17cf', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,
@@ -31065,7 +30634,7 @@ class RefresherContent {
         const pullingIcon = this.pullingIcon;
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'e235f8a9a84070ece2e2066ced234a64663bfa1d', class: mode }, hAsync("div", { key: '9121691818ddaa35801a5f442e144ac27686cf19', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (hAsync("div", { key: 'c8d65d740f1575041bd3b752c789077927397fe4', class: "refresher-pulling-icon" }, hAsync("div", { key: '309dd904977eaa788b09ea95b7fa4996a73bec5b', class: "spinner-arrow-container" }, hAsync("ion-spinner", { key: 'a2a1480f67775d56ca7822e76be1e9f983bca2f9', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (hAsync("div", { key: '811d7e06d324bf4b6a18a31427a43e5177f3ae3a', class: "arrow-container" }, hAsync("ion-icon", { key: '86cc48e2e8dc054ff6ff1299094da35b524be63d', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (hAsync("div", { key: '464ae097dbc95c18a2dd7dfd03f8489153dab719', class: "refresher-pulling-icon" }, hAsync("ion-icon", { key: 'ed6875978b9035add562caa743a68353743d978f', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), hAsync("div", { key: 'aff891924e44354543fec484e5cde1ca92e69904', class: "refresher-refreshing" }, this.refreshingSpinner && (hAsync("div", { key: '842d7ac4ff10a1058775493d62f31cbdcd34f7a0', class: "refresher-refreshing-icon" }, hAsync("ion-spinner", { key: '8c3e6195501e7e78d5cde1e3ad1fef90fd4a953f', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+        return (hAsync(Host, { key: '4add42b9fdfded359d1b054d04c2c6ff48e028c8', class: mode }, hAsync("div", { key: '45d4e4e0adfed7f96dd1849767aa2cde947de044', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (hAsync("div", { key: '6bd6c8ef5bf6e10699eec3bd8646431bfe1077a0', class: "refresher-pulling-icon" }, hAsync("div", { key: '852d20414da53352c8e58bc627e0fda38eff97cb', class: "spinner-arrow-container" }, hAsync("ion-spinner", { key: '0dde3578a80cc4b77a07c4d1db1af80c7eb10c27', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (hAsync("div", { key: 'c71dbfcf416a19c30fed38f722ebf0358c2181dd', class: "arrow-container" }, hAsync("ion-icon", { key: 'fa7c2cf624e7a9c41964e66cabc88c594da6d1fd', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (hAsync("div", { key: '3dd68c9968b421c379d1c4349ba619ee0a189c6d', class: "refresher-pulling-icon" }, hAsync("ion-icon", { key: 'f83bceceae4fa8245f91939fb6db589a595e975b', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), hAsync("div", { key: '98e22ceb0f7883e871f815f6199f5cb313e2e086', class: "refresher-refreshing" }, this.refreshingSpinner && (hAsync("div", { key: 'faabe8a9b61c02a00994ef978bb82b9ba4537214', class: "refresher-refreshing-icon" }, hAsync("ion-spinner", { key: '029a0c073ee1a07f01211e12ba2abc985cf21ed7', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -31106,7 +30675,7 @@ class Reorder {
     render() {
         const mode = getIonMode$1(this);
         const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
-        return (hAsync(Host, { key: 'e6807bb349725682e99e791ac65e729a360d64e8', class: mode }, hAsync("slot", { key: '1c691cdbffa6427ba08dc12184c69559ed5d5506' }, hAsync("ion-icon", { key: '8b4150302cdca475379582b2251737b5e74079b1', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+        return (hAsync(Host, { key: 'b869db61ca6393cf1476f2111a66b387b567c6d1', class: mode }, hAsync("slot", { key: 'a78edd1776835282b8b5c841377018f36c83296c' }, hAsync("ion-icon", { key: '7fb067c47bbb9a7258e5063f028282cc097d0f94', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -31377,7 +30946,7 @@ class ReorderGroup {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'b9641f3061d67fbfe68317b901ec33267046e073', class: {
+        return (hAsync(Host, { key: '9527bbdedaab63d31f562c874a7332ea60c4b47b', class: {
                 [mode]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
@@ -31493,7 +31062,7 @@ class RippleEffect {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'ae9d3b1ed6773a9b9bb2267129f7e9af23b6c9fc', role: "presentation", class: {
+        return (hAsync(Host, { key: '3b59cbb44741569a7350f9638b4392add673b6f1', role: "presentation", class: {
                 [mode]: true,
                 unbounded: this.unbounded,
             } }));
@@ -32452,10 +32021,10 @@ class RouterLink {
             rel: this.rel,
             target: this.target,
         };
-        return (hAsync(Host, { key: 'd7f2affcde45c5fbb6cb46cd1c30008ee92a68c5', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '8372835161d507c7b821b7536c55f912eb6ce704', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'ion-activatable': true,
-            }) }, hAsync("a", Object.assign({ key: 'babafae85ca5c6429958d383feff0493ff8cf33e' }, attrs), hAsync("slot", { key: '50314e9555bbf6dffa0c50c3f763009dee59b10b' }))));
+            }) }, hAsync("a", Object.assign({ key: '315966e14a17760f3f64197e8315200039787897' }, attrs), hAsync("slot", { key: '95fc1697b884225e85e647dddcaa8f4af8b9a979' }))));
     }
     static get style() { return routerLinkCss; }
     static get cmpMeta() { return {
@@ -32652,7 +32221,7 @@ class RouterOutlet {
         return true;
     }
     render() {
-        return hAsync("slot", { key: '84b50f1155b0d780dff802ee13223287259fd525' });
+        return hAsync("slot", { key: '386c41745b61daba161cf75063da97fe29ba36cb' });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -32685,7 +32254,7 @@ class Row {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '65592a79621bd8f75f9566db3e8c05a4b8fc6048', class: getIonMode$1(this) }, hAsync("slot", { key: '56f09784db7a0299c9ce76dfcede185b295251ff' })));
+        return (hAsync(Host, { key: '8ba906a8cbea060a79ed658c9bf34906f0c11d38', class: getIonMode$1(this) }, hAsync("slot", { key: 'd1009176f45b588fa52c7d9eb336f3c6d3214bb8' })));
     }
     static get style() { return rowCss; }
     static get cmpMeta() { return {
@@ -33126,8 +32695,8 @@ class Searchbar {
         const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
         const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
         const shouldShowCancelButton = this.shouldShowCancelButton();
-        const cancelButton = this.showCancelButton !== 'never' && (hAsync("button", { key: '19e18775856db87daeb4b9e3d7bca0461915a0df', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, hAsync("div", { key: 'b3bbdcc033f3bd3441d619e4a252cef0dad4d07e', "aria-hidden": "true" }, mode === 'md' ? (hAsync("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (hAsync(Host, { key: '074aa60e051bfb3225e87d44bbb6346c59c73574', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (hAsync("button", { key: 'bf574336a561a5bf66c771fb606a9b19adbecb68', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, hAsync("div", { key: '747ad4368bda5044198259d5bc8f7be9e472e5af', "aria-hidden": "true" }, mode === 'md' ? (hAsync("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (hAsync(Host, { key: 'bcc5b33a2859903ba11bfc5c611c6a2aaa71d06b', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -33137,14 +32706,14 @@ class Searchbar {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, hAsync("div", { key: '54f58a79fe36e85d9295157303f1be89c98bbdaf', class: "searchbar-input-container" }, hAsync("input", Object.assign({ key: 'f991a37fcf54d26b7ad10d89084764e03d97b9de', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, hAsync("ion-icon", { key: '8b44dd90a3292c5cf872ef16a8520675f5673494', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), hAsync("button", { key: '79d9cfed8f01268044f82811a35d323a12dca749', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, hAsync("div", { key: 'ac0dbf5ddd9c4eb6d714f45c62c44ba3d0bf034d', class: "searchbar-input-container" }, hAsync("input", Object.assign({ key: '4b9fdac1b0d5a7a68bf61a6beb00f166434d3e84', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, hAsync("ion-icon", { key: '32a889c48b3960560a3873061b4ac5a8a5ce532f', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), hAsync("button", { key: '71222df691ef0b95008e619f755224d069ee9388', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: 'aa3b9fa8a61f853236783ac7bcd0b113ea65ece2', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: 'f1c8c0bd8fbb655085875731d3ece387dbe2967e', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -33739,14 +33308,14 @@ class Segment {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'e67ed512739cf2cfe657b0c44ebc3dfb1e9fbb79', role: "tablist", onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '725cc37b25c539fa5e3ae8d90530ae33ededc3de', role: "tablist", onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'segment-activated': this.activated,
                 'segment-disabled': this.disabled,
                 'segment-scrollable': this.scrollable,
-            }) }, hAsync("slot", { key: '804d8acfcb9abfeeee38244b015fbc5c36330b9e', onSlotchange: this.onSlottedItemsChange })));
+            }) }, hAsync("slot", { key: 'c51cf7ea50325866a9367d214e12bc3754870335', onSlotchange: this.onSlottedItemsChange })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -33886,7 +33455,7 @@ class SegmentButton {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const mode = getIonMode$1(this);
         const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
-        return (hAsync(Host, { key: '26cb7ee90455bcaa6416125802d7e5729fa05b5b', class: {
+        return (hAsync(Host, { key: 'f69e2a24198a7c57543dbe66902da039a6569c64', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -33902,7 +33471,7 @@ class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, hAsync("button", Object.assign({ key: '75add37f11c107d1e2cfdb154e08004e9579e863', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), hAsync("span", { key: '8e720d2a3e304903685bf09d226a64e944d78a22', class: "button-inner" }, hAsync("slot", { key: 'c8e7b3ebf8f03042a1001155643b585283c73c65' })), mode === 'md' && hAsync("ion-ripple-effect", { key: '3586ac317b8d82c92b0ccfbfae42f8778612321b' })), hAsync("div", { key: '9cf93957da9e8dc333c8b05327bb903385b1c5f4', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, hAsync("div", { key: 'd3b6f0b3860ec6896b46703f64ed1cc8c75612e3', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, hAsync("button", Object.assign({ key: '0a6fea3a374074af19f7ece0ba3a7cf1e269ab6d', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), hAsync("span", { key: '991018a38c59a6f3d76b2e952e5569c874d2c13e', class: "button-inner" }, hAsync("slot", { key: '23c547c80108025027b913c7fcbec189286627a3' })), mode === 'md' && hAsync("ion-ripple-effect", { key: '7faa9d06ab6aa7346d16b0b6808979759a79650c' })), hAsync("div", { key: '0d61badf2c227dc38e20185b2b2bb590a5efa434', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, hAsync("div", { key: 'a84035752b78491c344179d1e61d109fb4bd1cf1', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -33937,7 +33506,7 @@ class SegmentContent {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: 'db6876f2aee7afa1ea8bc147337670faa68fae1c' }, hAsync("slot", { key: 'bc05714a973a5655668679033f5809a1da6db8cc' })));
+        return (hAsync(Host, { key: '665f41a854621f898eaf7ba9a49e77cc9326501e' }, hAsync("slot", { key: '635aa57fbf6167dcd36fe8dc5dfc1c313637ac04' })));
     }
     static get style() { return segmentContentCss; }
     static get cmpMeta() { return {
@@ -34052,10 +33621,10 @@ class SegmentView {
     }
     render() {
         const { disabled, isManualScroll } = this;
-        return (hAsync(Host, { key: 'e180b67bb3143a5f4611fb358c037be6fc782a8f', class: {
+        return (hAsync(Host, { key: '1c9bfce83967a93d63c225031a5cd688509d8fc8', class: {
                 'segment-view-disabled': disabled,
                 'segment-view-scroll-disabled': isManualScroll === false,
-            } }, hAsync("slot", { key: '41c11d6a7406a10f5c64a2e73abfc072afd8fc73' })));
+            } }, hAsync("slot", { key: '19fee034e76fffbdb5f622cb514037c00f9d55d5' })));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -34822,7 +34391,7 @@ class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (hAsync(Host, { key: 'd8026835993d0e6dce747098f741a06ae4e4f54d', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '9f0a833ebc3df27a42146b07bcbb181c05f5e5c4', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -34840,7 +34409,7 @@ class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, hAsync("label", { key: 'fcfb40209d6d07d49c7fdca4884b31abf6ac2567', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: 'f191664f2290c3890bde1156157c83a6ff17dbe2', class: "select-wrapper-inner" }, hAsync("slot", { key: '317a28d1115b4214f291e228ce0fe6fc782e57d5', name: "start" }), hAsync("div", { key: 'db68e18abd5ca3a1023d7c7b58bf89893ae18073', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '4274e042267c2234a198b0f65c89477898d08130', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: '2e2eb1ee2b2791e0683d9afb186fde6e938ca59c', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, hAsync("label", { key: '4b32396d8557c0d1cba13440a11e66b8eb7b13a9', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: 'd226cc8e30cd5202c235476cfa1632fc40bc609f', class: "select-wrapper-inner" }, hAsync("slot", { key: 'df813ff3b7de518c70ea4fedd25bcb965607026d', name: "start" }), hAsync("div", { key: '4a4e9348a136c598b7b08f80ecdcca268afec2d5', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: 'f168d8b42a1e193ad27d09e5f1553b231f0332e5', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: 'ec3deede22dd403cb16a08f532ae4809cf86a3e7', class: "select-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -35001,7 +34570,7 @@ class SelectModal {
             } }, option.text))));
     }
     render() {
-        return (hAsync(Host, { key: 'b6c0dec240b2e41985b15fdf4e5a6d3a145c1567', class: getIonMode$1(this) }, hAsync("ion-header", { key: 'cd177e85ee0f62a60a3a708342d6ab6eb19a44dc' }, hAsync("ion-toolbar", { key: 'aee8222a5a4daa540ad202b2e4cac1ef93d9558c' }, this.header !== undefined && hAsync("ion-title", { key: '5f8fecc764d97bf840d3d4cfddeeccd118ab4436' }, this.header), hAsync("ion-buttons", { key: '919033950d7c2b0101f96a9c9698219de9f568ea', slot: "end" }, hAsync("ion-button", { key: '34b571cab6dced4bde555a077a21e91800829931', onClick: () => this.closeModal() }, "Close")))), hAsync("ion-content", { key: '3c9153d26ba7a5a03d3b20fcd628d0c3031661a7' }, hAsync("ion-list", { key: 'e00b222c071bc97c82ad1bba4db95a8a5c43ed6d' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
+        return (hAsync(Host, { key: '5bffdb106e6f628dae2e2aeb9ee8008b5c547b3a', class: getIonMode$1(this) }, hAsync("ion-header", { key: '4de1c33b0504372f8a0a26123e4e086080ee1ecb' }, hAsync("ion-toolbar", { key: '5d55a67d1db4352c260e9e0457d5dac6110b6598' }, this.header !== undefined && hAsync("ion-title", { key: '4f07fe8a9af8c9bd0852af2a9b95517d16356e50' }, this.header), hAsync("ion-buttons", { key: 'ca676a34f7cd3dd6b465b0d803434c2e2c8536c5', slot: "end" }, hAsync("ion-button", { key: '801ed63a357c7c9d354668851db65e5c1b0e1abe', onClick: () => this.closeModal() }, "Close")))), hAsync("ion-content", { key: 'f3c239ec9d84b8ed7413ea9db6efa18e29aca285' }, hAsync("ion-list", { key: '40c157e9abe477171a39ae7e6e1cd4ed08735cb4' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -35035,7 +34604,7 @@ class SelectOption {
         this.disabled = false;
     }
     render() {
-        return hAsync(Host, { key: '3a70eea9fa03a9acba582180761d18347c72acee', role: "option", id: this.inputId, class: getIonMode$1(this) });
+        return hAsync(Host, { key: '824730b6c1e4f15b716e91b05840e890af5f1577', role: "option", id: this.inputId, class: getIonMode$1(this) });
     }
     get el() { return getElement(this); }
     static get style() { return selectOptionCss; }
@@ -35152,7 +34721,7 @@ class SelectPopover {
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
-        return (hAsync(Host, { key: 'ab931b49b59283825bd2afa3f7f995b0e6e05bef', class: getIonMode$1(this) }, hAsync("ion-list", { key: '3bd12b67832607596b912a73d5b3ae9b954b244d' }, header !== undefined && hAsync("ion-list-header", { key: '97da930246edf7423a039c030d40e3ff7a5148a3' }, header), hasSubHeaderOrMessage && (hAsync("ion-item", { key: 'c579df6ea8fac07bb0c59d34c69b149656863224' }, hAsync("ion-label", { key: 'af699c5f465710ccb13b8cf8e7be66f0e8acfad1', class: "ion-text-wrap" }, subHeader !== undefined && hAsync("h3", { key: 'df9a936d42064b134e843c7229f314a2a3ec7e80' }, subHeader), message !== undefined && hAsync("p", { key: '9c3ddad378df00f106afa94e9928cf68c17124dd' }, message)))), this.renderOptions(options))));
+        return (hAsync(Host, { key: '0c9845a40d3fc392b0a7d64e2a6ed27d94bb7634', class: getIonMode$1(this) }, hAsync("ion-list", { key: '84a30f6661b0f8c00e6fa199658ed2adbcf27358' }, header !== undefined && hAsync("ion-list-header", { key: '13f5f56bbfbc06751fa516291a2da72629b60ece' }, header), hasSubHeaderOrMessage && (hAsync("ion-item", { key: '3d39d18e720e798bbde334e79e6832091c7dfb81' }, hAsync("ion-label", { key: 'd3051b0d140120b44bf5e79572f6f287e7cfb03a', class: "ion-text-wrap" }, subHeader !== undefined && hAsync("h3", { key: 'b16805956f3316f8ec703c123b76f717488e8637' }, subHeader), message !== undefined && hAsync("p", { key: '2215ac4ab4146a14e75a79192e319a8016286b5f' }, message)))), this.renderOptions(options))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -35202,11 +34771,11 @@ class SkeletonText {
         const animated = this.animated && config.getBoolean('animated', true);
         const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'd86ef7392507cdbf48dfd3a71f02d7a83eda4aae', class: {
+        return (hAsync(Host, { key: 'cb8da9aba121811b9a4ffdae60ed88105897cb3c', class: {
                 [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, hAsync("span", { key: '8e8b5a232a6396d2bba691b05f9de4da44b2965c' }, "\u00A0")));
+            } }, hAsync("span", { key: '5379deee3c76d46d615be0cba14b4f60129ffa25' }, "\u00A0")));
     }
     get el() { return getElement(this); }
     static get style() { return skeletonTextCss; }
@@ -35258,7 +34827,7 @@ class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (hAsync(Host, { key: 'a33d6421fcc885995fbc7a348516525f68ca496c', class: createColorClasses$1(self.color, {
+        return (hAsync(Host, { key: 'dd1954e557fa14b943e761474e29e4316ba53938', class: createColorClasses$1(self.color, {
                 [mode]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),
@@ -35357,12 +34926,12 @@ class SplitPane {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'd5e30df12f1f1f855da4c66f98076b9dce762c59', class: {
+        return (hAsync(Host, { key: '05c88c009fbe2e223fd261760a2b49da1653ff62', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, hAsync("slot", { key: '3e30d7cf3bc1cf434e16876a0cb2a36377b8e00f' })));
+            } }, hAsync("slot", { key: 'b35865082661253c4468520d79234fa5dab5bd35' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -35428,10 +34997,10 @@ class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (hAsync(Host, { key: 'dbad8fe9f1566277d14647626308eaf1601ab01f', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (hAsync(Host, { key: 'fbd837bad7a0632336d46a597ace23673b153e48', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, hAsync("slot", { key: '3be64f4e7161f6769aaf8e4dcb5293fcaa09af45' })));
+            } }, hAsync("slot", { key: '35c218169fda826c9c1337558e0278d0c7f5f26a' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -35543,11 +35112,11 @@ class TabBar {
         const { color, translucent, keyboardVisible } = this;
         const mode = getIonMode$1(this);
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (hAsync(Host, { key: '9daf4e2acaff6e3ce3878cf9dd5109fb1afbbebe', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '24e164eaf81a0bec9237b561465618f10990806c', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses$1(color, {
                 [mode]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, hAsync("slot", { key: '1d15aa2da8501e8e7eff11ad4a491478be845c43' })));
+            }) }, hAsync("slot", { key: '0ca29a2d97a7c38bbf43f8d79e271b874b4d9be8' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -35643,7 +35212,7 @@ class TabButton {
             rel,
             target,
         };
-        return (hAsync(Host, { key: 'ce9d29ced0c781d6b2fa62cd5feb801c11fc42e8', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (hAsync(Host, { key: '638b93ef40701ec3aefb89b1579eb91aaf6d4f8a', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [mode]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -35655,7 +35224,7 @@ class TabButton {
                 'ion-activatable': true,
                 'ion-selectable': true,
                 'ion-focusable': true,
-            } }, hAsync("a", Object.assign({ key: '01cb0ed2e77c5c1a8abd48da1bb07ac1b305d0b6' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), hAsync("span", { key: 'd0240c05f42217cfb186b86ff8a0c9cd70b9c8df', class: "button-inner" }, hAsync("slot", { key: '0a20b84925037dbaa8bb4a495b813d3f7c2e58ac' })), mode === 'md' && hAsync("ion-ripple-effect", { key: '4c92c27178cdac89d69cffef8d2c39c3644914e8', type: "unbounded" }))));
+            } }, hAsync("a", Object.assign({ key: 'c053d32fbcdad8d5e4a409956b47164d7a080c6b' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), hAsync("span", { key: 'b3b460d33ec978a46b069442280d31b23bc8e794', class: "button-inner" }, hAsync("slot", { key: '87b3928475c941263261101b8fae27c6370d4671' })), mode === 'md' && hAsync("ion-ripple-effect", { key: '6532e5b4546aebe4becaebe1c93ce0e6aedaffe7', type: "unbounded" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -35846,7 +35415,7 @@ class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (hAsync(Host, { key: '7b4b302f2942d8d131f6fc24e817989a8be08867', onIonTabButtonClick: this.onTabClicked }, hAsync("slot", { key: '2c51cf14c0f17a8ddf2d879858c984cdf8fd3147', name: "top" }), hAsync("div", { key: '7e9d6055092d41bd9bc80ae15965f77e216feb84', class: "tabs-inner" }, hAsync("slot", { key: 'c308a787e37ff7f6653531d70deca597a7602d26' })), hAsync("slot", { key: 'd5f5e693710c853570811602f859cf3e88272684', name: "bottom" })));
+        return (hAsync(Host, { key: 'c7131135b31aa312dc0207602561e1c0f4ac3e53', onIonTabButtonClick: this.onTabClicked }, hAsync("slot", { key: '6c46e91c0389bbcea1f15f35cf3ea513a74ac545', name: "top" }), hAsync("div", { key: '4f1b649d8bb60b61402b97359de204979c5eda52', class: "tabs-inner" }, hAsync("slot", { key: '8d1ef4952be4fb33567376e1083ea4da697fcae0' })), hAsync("slot", { key: '260b8da8031494e9cb4635b3d22c49a433042db1', name: "bottom" })));
     }
     get el() { return getElement(this); }
     static get style() { return tabsCss; }
@@ -35886,9 +35455,9 @@ class Text {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '361035eae7b92dc109794348d39bad2f596eb6be', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'bfaa49d35f43b8036725ae8a322c716fc6e43bdf', class: createColorClasses$1(this.color, {
                 [mode]: true,
-            }) }, hAsync("slot", { key: 'c7b8835cf485ba9ecd73298f0529276ce1ea0852' })));
+            }) }, hAsync("slot", { key: 'c04880cd1935b42cbe60f58fd523b4d8a96072dc' })));
     }
     static get style() { return textCss; }
     static get cmpMeta() { return {
@@ -36349,7 +35918,7 @@ class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (hAsync(Host, { key: 'a70a62d7aae3831a50acd74f60b930925ada1326', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '2c9de566803dd007cee3639ddd04accb68663b32', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -36358,7 +35927,7 @@ class Textarea {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, hAsync("label", { key: '8a2dd59a60f7469df84018eb0ede3a9ec3862703', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: '1bfc368236e3da7a225a45118c27fbfc1fe5fa46', class: "textarea-wrapper-inner" }, hAsync("div", { key: '215cbb2635ff52e31a8973376989b85e7245d40f', class: "start-slot-wrapper" }, hAsync("slot", { key: '9f6b461cdee9d629deb695d2bea054ece2f32305', name: "start" })), hAsync("div", { key: 'c1af35a2d5bc452bebe0b22a26d15ff52b4e9fc8', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, hAsync("textarea", Object.assign({ key: '69a69b3cf0932baafbe37e6e846f1a571608d3f2', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), hAsync("div", { key: 'c053ea8b865d0e29763aed2e4939cc9c9e374c15', class: "end-slot-wrapper" }, hAsync("slot", { key: '930aa641833b0df54b9ea10368fc2f46d5f491f6', name: "end" }))), shouldRenderHighlight && hAsync("div", { key: '8d12597d15f5f429d80e8272ea99e64ed924e482', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, hAsync("label", { key: 'a0602b57fae26f148729b19c296de31b4923ad44', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: '4ff96c999ba015c6c94be888da76d2dbd33020d7', class: "textarea-wrapper-inner" }, hAsync("div", { key: '8827db21d38d6c0bc2949f183b976eca692210be', class: "start-slot-wrapper" }, hAsync("slot", { key: 'e90b69e2b427a51f9a6ec201053e55b914ef5b9d', name: "start" })), hAsync("div", { key: '22de2b64734d6a677939ff372df9de13b58923e6', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, hAsync("textarea", Object.assign({ key: '0e125c47ae292bea21484824746dbee922e728b0', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), hAsync("div", { key: '52d8f9048596cd598a99b74e3d0b322890d8513d', class: "end-slot-wrapper" }, hAsync("slot", { key: 'd9c8a7c33c47533dfe2eb8b12006c7f38d3cd11b', name: "end" }))), shouldRenderHighlight && hAsync("div", { key: 'aaf672b846a35f0aeb0b3ec172dc808eb871eb5a', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -36421,7 +35990,7 @@ class Thumbnail {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '70ada828e8cf541ab3b47f94b7e56ce34114ef88', class: getIonMode$1(this) }, hAsync("slot", { key: 'c43e105669d2bae123619b616f3af8ca2f722d61' })));
+        return (hAsync(Host, { key: 'b250e01664238f1dca8f9757b15bc3d5d9387ffa', class: getIonMode$1(this) }, hAsync("slot", { key: '72cb568bccabc983c5186a7596ef6c6d4ebf5ad9' })));
     }
     static get style() { return thumbnailCss; }
     static get cmpMeta() { return {
@@ -37279,9 +36848,9 @@ class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('[ion-toast] - This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
         }
-        return (hAsync(Host, Object.assign({ key: 'd1ecd90c87700aad4685e230cdd430aa286b8791', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '4a303f9ebb69614e9dca677d9d80a4a275de0d85', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses$1(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), hAsync("div", { key: '4bfc863417324de69e222054d5cf9c452038b41e', class: wrapperClass }, hAsync("div", { key: '3417940afec0392e81b7d54c7cb00f3ab6c30d47', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { key: '6bf878fbc85c01e1e5faa9d97d46255a6511a952', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("div", { key: '54b500348a9c37660c3aff37436d9188e4374947', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+            }, class: createColorClasses$1(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), hAsync("div", { key: '4f58fcbba8dce9834eab743fc91715935216f3d0', class: wrapperClass }, hAsync("div", { key: 'bbc7b73b186432bd4be8247c5de2ce3b2551fb0a', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { key: '0b953478eb739ceb864373416183bfbf5ce2f9f1', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("div", { key: '7a63497d1c0440256218426194851a969b042ca6', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -37593,7 +37162,7 @@ class Toggle {
         const value = this.getValue();
         const rtl = isRTL$1(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (hAsync(Host, { key: 'f569148edd89ee041a4719ffc4733c16b05229bd', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '736e1dcfca34fd41f6f0632652e7f86d6996a232', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses$1(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -37603,10 +37172,10 @@ class Toggle {
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, hAsync("label", { key: '3027f2ac4be6de422a14486d847fbee77f615db1', class: "toggle-wrapper", htmlFor: inputId }, hAsync("input", Object.assign({ key: '4b0304c9e879e432b80184b4e5de37d55c11b436', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), hAsync("div", { key: '8ef265ec942e7f01ff31cbb202ed146c6bf94e02', class: {
+            }) }, hAsync("label", { key: 'e697739fd3964c1c6c23331cf7e38a9841c46a6a', class: "toggle-wrapper", htmlFor: inputId }, hAsync("input", Object.assign({ key: '3d500b8c1bc879591249d183c1abb3f5f26aff6b', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), hAsync("div", { key: 'e38f3fe0e66b4ca434fd81514f5ef771c2960841', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, hAsync("slot", { key: '7b162b7dd27199cca2a4c995276a18b9f8e44aaf' }), this.renderHintText()), hAsync("div", { key: 'd13c34bd42fca01cc73ddb4ea7e471b33a282a3e', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, hAsync("slot", { key: '006dd3558264d69ab020c07005b348adc4ecdd5b' }), this.renderHintText()), hAsync("div", { key: 'dd4e52de31caabee41ec1bc58efecd1e213368c9', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -37716,10 +37285,10 @@ class Toolbar {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (hAsync(Host, { key: 'f6c4f669a6a61c5eac4cbb5ea0aa97c48ae5bd46', class: Object.assign(Object.assign({}, childStyles), createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'b849db2863778dee6c5a251bffa1b3a657aeb036', class: Object.assign(Object.assign({}, childStyles), createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, hAsync("div", { key: '9c81742ffa02de9ba7417025b077d05e67305074', class: "toolbar-background", part: "background" }), hAsync("div", { key: '5fc96d166fa47894a062e41541a9beee38078a36', class: "toolbar-container", part: "container" }, hAsync("slot", { key: 'b62c0d9d59a70176bdbf769aec6090d7a166853b', name: "start" }), hAsync("slot", { key: 'd01d3cc2c50e5aaa49c345b209fe8dbdf3d48131', name: "secondary" }), hAsync("div", { key: '3aaa3a2810aedd38c37eb616158ec7b9638528fc', class: "toolbar-content", part: "content" }, hAsync("slot", { key: '357246690f8d5e1cc3ca369611d4845a79edf610' })), hAsync("slot", { key: '06ed3cca4f7ebff4a54cd877dad3cc925ccf9f75', name: "primary" }), hAsync("slot", { key: 'e453d43d14a26b0d72f41e1b81a554bab8ece811', name: "end" }))));
+            })) }, hAsync("div", { key: '67f5bba9c4f527c3f35bfe1313a2b85741f9b246', class: "toolbar-background", part: "background" }), hAsync("div", { key: '085e8c68f056e5b0deb9d1606431fbeb45dae8e5', class: "toolbar-container", part: "container" }, hAsync("slot", { key: '15227c79c3baf883fd8c43fdb7e1313453933c79', name: "start" }), hAsync("slot", { key: '0b8a7f7e685aa31c80d9bc03446ccc3a9d07e0e8', name: "secondary" }), hAsync("div", { key: '57e4628c1fa89df79dd80456259db961bb691404', class: "toolbar-content", part: "content" }, hAsync("slot", { key: '82c2f6e1acf8d96db259bd8baf295881801edbd5' })), hAsync("slot", { key: 'b2d4afb15214199f206c0a5e08b581e4c9c2f58a', name: "primary" }), hAsync("slot", { key: 'bfb909a0c472f8834046c2ea23bef2f562167ad3', name: "end" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -37765,11 +37334,11 @@ class ToolbarTitle {
     render() {
         const mode = getIonMode$1(this);
         const size = this.getSize();
-        return (hAsync(Host, { key: 'e599c0bf1b0817df3fa8360bdcd6d787f751c371', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '44e63f8439df64c470692904427b417e19406476', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, hAsync("div", { key: '6e7eee9047d6759876bb31d7305b76efc7c4338c', class: "toolbar-title" }, hAsync("slot", { key: 'bf790eb4c83dd0af4f2fd1f85ab4af5819f46ff4' }))));
+            }) }, hAsync("div", { key: '784cf60a0db16045391891cc8fad0c7dbeba4039', class: "toolbar-title" }, hAsync("slot", { key: '0c720a50479ba257e8756337aeb9b0ab7516a227' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {