voyager-ionic-core 8.7.9 → 8.7.13

package/components/ion-textarea.js

@@ -2,7 +2,8 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, Build, writeTask, h, Host } from '@stencil/core/internal/client';
-import { c as createNotchController, a as checkInvalidState } from './validity.js';
+import { c as createNotchController } from './notch-controller.js';
+import { c as checkInvalidState } from './validity.js';
 import { l as debounceEvent, i as inheritAriaAttributes, d as inheritAttributes, c as componentOnReady } from './helpers.js';
 import { c as createSlotMutationController, g as getCounterText } from './input.utils.js';
 import { h as hostContext, c as createColorClasses } from './theme.js';

package/components/ion-toggle.js

@@ -1,8 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host } from '@stencil/core/internal/client';
 import { i as inheritAriaAttributes, e as renderHiddenInput } from './helpers.js';
+import { c as checkInvalidState } from './validity.js';
 import { d as hapticSelection } from './haptic.js';
 import { a as isPlatform, b as getIonMode } from './ionic-global.js';
 import { i as isRTL } from './dir.js';
@@ -33,6 +34,10 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
         this.inheritedAttributes = {};
         this.didLoad = false;
         this.activated = false;
+        /**
+         * Track validation state for proper aria-live announcements.
+         */
+        this.isInvalid = false;
         /**
          * The name of the control, which is submitted with the form data.
          */
@@ -146,15 +151,52 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
         });
     }
     async connectedCallback() {
+        const { didLoad, el } = this;
         /**
          * If we have not yet rendered
          * ion-toggle, then toggleTrack is not defined.
          * But if we are moving ion-toggle via appendChild,
          * then toggleTrack will be defined.
          */
-        if (this.didLoad) {
+        if (didLoad) {
             this.setupGesture();
         }
+        // Watch for class changes to update validation state.
+        if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
+            this.validationObserver = new MutationObserver(() => {
+                const newIsInvalid = checkInvalidState(el);
+                if (this.isInvalid !== newIsInvalid) {
+                    this.isInvalid = newIsInvalid;
+                    /**
+                     * Screen readers tend to announce changes
+                     * to `aria-describedby` when the attribute
+                     * is changed during a blur event for a
+                     * native form control.
+                     * However, the announcement can be spotty
+                     * when using a non-native form control
+                     * and `forceUpdate()`.
+                     * This is due to `forceUpdate()` internally
+                     * rescheduling the DOM update to a lower
+                     * priority queue regardless if it's called
+                     * inside a Promise or not, thus causing
+                     * the screen reader to potentially miss the
+                     * change.
+                     * By using a State variable inside a Promise,
+                     * it guarantees a re-render immediately at
+                     * a higher priority.
+                     */
+                    Promise.resolve().then(() => {
+                        this.hintTextId = this.getHintTextId();
+                    });
+                }
+            });
+            this.validationObserver.observe(el, {
+                attributes: true,
+                attributeFilter: ['class'],
+            });
+        }
+        // Always set initial state
+        this.isInvalid = checkInvalidState(el);
     }
     componentDidLoad() {
         this.setupGesture();
@@ -165,9 +207,15 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
             this.gesture.destroy();
             this.gesture = undefined;
         }
+        // Clean up validation observer to prevent memory leaks.
+        if (this.validationObserver) {
+            this.validationObserver.disconnect();
+            this.validationObserver = undefined;
+        }
     }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
+        this.hintTextId = this.getHintTextId();
     }
     onStart() {
         this.activated = true;
@@ -208,9 +256,9 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
     get hasLabel() {
         return this.el.textContent !== '';
     }
-    getHintTextID() {
-        const { el, helperText, errorText, helperTextId, errorTextId } = this;
-        if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
+    getHintTextId() {
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
+        if (isInvalid && errorText) {
             return errorTextId;
         }
         if (helperText) {
@@ -223,7 +271,7 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
      * This element should only be rendered if hint text is set.
      */
     renderHintText() {
-        const { helperText, errorText, helperTextId, errorTextId } = this;
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         /**
          * undefined and empty string values should
          * be treated as not having helper/error text.
@@ -232,15 +280,15 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
         if (!hasHintText) {
             return;
         }
-        return (h("div", { class: "toggle-bottom" }, h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text" }, helperText), h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text" }, errorText)));
+        return (h("div", { class: "toggle-bottom" }, h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null), h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text", role: "alert" }, isInvalid ? errorText : null)));
     }
     render() {
-        const { activated, alignment, checked, color, disabled, el, errorTextId, hasLabel, inheritedAttributes, inputId, inputLabelId, justify, labelPlacement, name, required, } = this;
+        const { activated, alignment, checked, color, disabled, el, hasLabel, inheritedAttributes, inputId, inputLabelId, justify, labelPlacement, name, required, } = this;
         const mode = getIonMode(this);
         const value = this.getValue();
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '17bbbc8d229868e5c872b2bc5a3faf579780c5e0', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === errorTextId, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses(color, {
+        return (h(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(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -250,10 +298,10 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, h("label", { key: '673625b62a2c909e95dccb642c91312967a6cd1c', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '7dc3f357b4708116663970047765da9f8f845bf0', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), h("div", { key: '8f1c6a182031e8cbc6727e5f4ac0e00ad4247447', class: {
+            }) }, h("label", { key: '3027f2ac4be6de422a14486d847fbee77f615db1', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '4b0304c9e879e432b80184b4e5de37d55c11b436', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), h("div", { key: '8ef265ec942e7f01ff31cbb202ed146c6bf94e02', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '8322b9d54dc7edeb4e16fefcde9f7ebca8d5c3e1' }), this.renderHintText()), h("div", { key: 'fe6984143db817a7b3020a3f57cf5418fc3dcc0e', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '7b162b7dd27199cca2a4c995276a18b9f8e44aaf' }), this.renderHintText()), h("div", { key: 'd13c34bd42fca01cc73ddb4ea7e471b33a282a3e', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -276,7 +324,9 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
         "justify": [1],
         "alignment": [1],
         "required": [4],
-        "activated": [32]
+        "activated": [32],
+        "isInvalid": [32],
+        "hintTextId": [32]
     }, undefined, {
         "disabled": ["disabledChanged"]
     }]);

package/components/item.js

@@ -262,7 +262,7 @@ const Item = /*@__PURE__*/ proxyCustomElement(class Item extends HTMLElement {
         "color": [513],
         "button": [4],
         "detail": [4],
-        "detailIcon": [8, "detail-icon"],
+        "detailIcon": [1, "detail-icon"],
         "disabled": [516],
         "download": [1],
         "href": [1],

package/components/modal.js

@@ -1921,7 +1921,13 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
             };
             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) {
@@ -2003,6 +2009,79 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
         this.gesture = gesture;
         this.moveSheetToBreakpoint = moveSheetToBreakpoint;
         this.gesture.enable(true);
+        /**
+         * When backdrop interaction is allowed, nested router outlets from child routes
+         * may block pointer events to parent content. Apply passthrough styles only when
+         * the modal was the sole content of a child route page.
+         * See https://github.com/ionic-team/ionic-framework/issues/30700
+         */
+        const backdropNotBlocking = this.showBackdrop === false || this.focusTrap === false || backdropBreakpoint > 0;
+        if (backdropNotBlocking) {
+            this.setupChildRoutePassthrough();
+        }
+    }
+    /**
+     * For sheet modals that allow background interaction, sets up pointer-events
+     * passthrough on child route page wrappers and nested router outlets.
+     */
+    setupChildRoutePassthrough() {
+        var _a;
+        // Cache the page parent for cleanup
+        this.cachedPageParent = this.getOriginalPageParent();
+        const pageParent = this.cachedPageParent;
+        // Skip ion-app (controller modals) and pages with visible sibling content next to the modal
+        if (!pageParent || pageParent.tagName === 'ION-APP') {
+            return;
+        }
+        const hasVisibleContent = Array.from(pageParent.children).some((child) => {
+            var _a;
+            return child !== this.el &&
+                !(child instanceof HTMLElement && window.getComputedStyle(child).display === 'none') &&
+                child.tagName !== 'TEMPLATE' &&
+                child.tagName !== 'SLOT' &&
+                !(child.nodeType === Node.TEXT_NODE && !((_a = child.textContent) === null || _a === void 0 ? void 0 : _a.trim()));
+        });
+        if (hasVisibleContent) {
+            return;
+        }
+        // Child route case: page only contained the modal
+        pageParent.classList.add('ion-page-overlay-passthrough');
+        // Also make nested router outlets passthrough
+        const routerOutlet = pageParent.parentElement;
+        if ((routerOutlet === null || routerOutlet === void 0 ? void 0 : routerOutlet.tagName) === 'ION-ROUTER-OUTLET' && ((_a = routerOutlet.parentElement) === null || _a === void 0 ? void 0 : _a.tagName) !== 'ION-APP') {
+            routerOutlet.style.setProperty('pointer-events', 'none');
+            routerOutlet.setAttribute('data-overlay-passthrough', 'true');
+        }
+    }
+    /**
+     * Finds the ion-page ancestor of the modal's original parent location.
+     */
+    getOriginalPageParent() {
+        if (!this.cachedOriginalParent) {
+            return null;
+        }
+        let pageParent = this.cachedOriginalParent;
+        while (pageParent && !pageParent.classList.contains('ion-page')) {
+            pageParent = pageParent.parentElement;
+        }
+        return pageParent;
+    }
+    /**
+     * Removes passthrough styles added by setupChildRoutePassthrough.
+     */
+    cleanupChildRoutePassthrough() {
+        const pageParent = this.cachedPageParent;
+        if (!pageParent) {
+            return;
+        }
+        pageParent.classList.remove('ion-page-overlay-passthrough');
+        const routerOutlet = pageParent.parentElement;
+        if (routerOutlet === null || routerOutlet === void 0 ? void 0 : routerOutlet.hasAttribute('data-overlay-passthrough')) {
+            routerOutlet.style.removeProperty('pointer-events');
+            routerOutlet.removeAttribute('data-overlay-passthrough');
+        }
+        // Clear the cached reference
+        this.cachedPageParent = undefined;
     }
     sheetOnDismiss() {
         /**
@@ -2092,6 +2171,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
             }
             this.cleanupViewTransitionListener();
             this.cleanupParentRemovalObserver();
+            this.cleanupChildRoutePassthrough();
         }
         this.currentBreakpoint = undefined;
         this.animation = undefined;
@@ -2288,6 +2368,17 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
             this.cachedOriginalParent.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
             return;
         }
+        /**
+         * Don't observe for controller-based modals or when the parent is the
+         * app root (document.body or ion-app). These parents won't be removed,
+         * and observing document.body with subtree: true causes performance
+         * issues with frameworks like Angular during change detection.
+         */
+        if (this.hasController ||
+            this.cachedOriginalParent === document.body ||
+            this.cachedOriginalParent.tagName === 'ION-APP') {
+            return;
+        }
         this.parentRemovalObserver = new MutationObserver((mutations) => {
             mutations.forEach((mutation) => {
                 if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
@@ -2329,20 +2420,20 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (h(Host, Object.assign({ key: '9e9a7bd591eb17a225a00b4fa2e379e94601d17f', "no-router": true,
+        return (h(Host, Object.assign({ key: '9a75095a13de0cfc96f1fa69fd92777d25da8daa', "no-router": true,
             // Allow the modal to be navigable when the handle is focusable
             tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: 'e5eae2c14f830f75e308fcd7f4c10c86fac5b962', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'e268f9cd310c3cf4e051b5b92524ce4fb70d005e', class: "modal-shadow" }), h("div", Object.assign({ key: '9c380f36c18144c153077b15744d1c3346bce63e',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: 'd02612d8063ef20f59f173ff47795f71cdaaf63e', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '708761b70a93e34c08faae079569f444c7416a4c', class: "modal-shadow" }), h("div", Object.assign({ key: 'a72226ff1a98229f9bfd9207b98fc57e02baa430',
             /*
               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 && (h("button", { key: '2d5ee6d5959d97309c306e8ce72eb0f2c19be144', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '0547f32323882660221385d84d492929caa77c6b', class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: '5590434c35ea04c42fc006498bc189038e15a298', onSlotchange: this.onSlotChange }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: 'fccbd64518b6fa22f9e874deb6b4ba55d8d89c3b', onSlotchange: this.onSlotChange }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -2379,6 +2470,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
         "keepContentsMounted": [4, "keep-contents-mounted"],
         "focusTrap": [4, "focus-trap"],
         "canDismiss": [4, "can-dismiss"],
+        "isSheetModal": [32],
         "presented": [32],
         "present": [64],
         "dismiss": [64],

package/components/notch-controller.js

@@ -0,0 +1,153 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { w as win } from './index9.js';
+import { r as raf } from './helpers.js';
+
+/**
+ * A utility to calculate the size of an outline notch
+ * width relative to the content passed. This is used in
+ * components such as `ion-select` with `fill="outline"`
+ * where we need to pass slotted HTML content. This is not
+ * needed when rendering plaintext content because we can
+ * render the plaintext again hidden with `opacity: 0` inside
+ * of the notch. As a result we can rely on the intrinsic size
+ * of the element to correctly compute the notch width. We
+ * cannot do this with slotted content because we cannot project
+ * it into 2 places at once.
+ *
+ * @internal
+ * @param el: The host element
+ * @param getNotchSpacerEl: A function that returns a reference to the notch spacer element inside of the component template.
+ * @param getLabelSlot: A function that returns a reference to the slotted content.
+ */
+const createNotchController = (el, getNotchSpacerEl, getLabelSlot) => {
+    let notchVisibilityIO;
+    const needsExplicitNotchWidth = () => {
+        const notchSpacerEl = getNotchSpacerEl();
+        if (
+        /**
+         * If the notch is not being used
+         * then we do not need to set the notch width.
+         */
+        notchSpacerEl === undefined ||
+            /**
+             * If either the label property is being
+             * used or the label slot is not defined,
+             * then we do not need to estimate the notch width.
+             */
+            el.label !== undefined ||
+            getLabelSlot() === null) {
+            return false;
+        }
+        return true;
+    };
+    const calculateNotchWidth = () => {
+        if (needsExplicitNotchWidth()) {
+            /**
+             * Run this the frame after
+             * the browser has re-painted the host element.
+             * Otherwise, the label element may have a width
+             * of 0 and the IntersectionObserver will be used.
+             */
+            raf(() => {
+                setNotchWidth();
+            });
+        }
+    };
+    /**
+     * When using a label prop we can render
+     * the label value inside of the notch and
+     * let the browser calculate the size of the notch.
+     * However, we cannot render the label slot in multiple
+     * places so we need to manually calculate the notch dimension
+     * based on the size of the slotted content.
+     *
+     * This function should only be used to set the notch width
+     * on slotted label content. The notch width for label prop
+     * content is automatically calculated based on the
+     * intrinsic size of the label text.
+     */
+    const setNotchWidth = () => {
+        const notchSpacerEl = getNotchSpacerEl();
+        if (notchSpacerEl === undefined) {
+            return;
+        }
+        if (!needsExplicitNotchWidth()) {
+            notchSpacerEl.style.removeProperty('width');
+            return;
+        }
+        const width = getLabelSlot().scrollWidth;
+        if (
+        /**
+         * If the computed width of the label is 0
+         * and notchSpacerEl's offsetParent is null
+         * then that means the element is hidden.
+         * As a result, we need to wait for the element
+         * to become visible before setting the notch width.
+         *
+         * We do not check el.offsetParent because
+         * that can be null if the host element has
+         * position: fixed applied to it.
+         * notchSpacerEl does not have position: fixed.
+         */
+        width === 0 &&
+            notchSpacerEl.offsetParent === null &&
+            win !== undefined &&
+            'IntersectionObserver' in win) {
+            /**
+             * If there is an IO already attached
+             * then that will update the notch
+             * once the element becomes visible.
+             * As a result, there is no need to create
+             * another one.
+             */
+            if (notchVisibilityIO !== undefined) {
+                return;
+            }
+            const io = (notchVisibilityIO = new IntersectionObserver((ev) => {
+                /**
+                 * If the element is visible then we
+                 * can try setting the notch width again.
+                 */
+                if (ev[0].intersectionRatio === 1) {
+                    setNotchWidth();
+                    io.disconnect();
+                    notchVisibilityIO = undefined;
+                }
+            }, 
+            /**
+             * Set the root to be the host element
+             * This causes the IO callback
+             * to be fired in WebKit as soon as the element
+             * is visible. If we used the default root value
+             * then WebKit would only fire the IO callback
+             * after any animations (such as a modal transition)
+             * finished, and there would potentially be a flicker.
+             */
+            { threshold: 0.01, root: el }));
+            io.observe(notchSpacerEl);
+            return;
+        }
+        /**
+         * If the element is visible then we can set the notch width.
+         * The notch is only visible when the label is scaled,
+         * which is why we multiply the width by 0.75 as this is
+         * the same amount the label element is scaled by in the host CSS.
+         * (See $form-control-label-stacked-scale in ionic.globals.scss).
+         */
+        notchSpacerEl.style.setProperty('width', `${width * 0.75}px`);
+    };
+    const destroy = () => {
+        if (notchVisibilityIO) {
+            notchVisibilityIO.disconnect();
+            notchVisibilityIO = undefined;
+        }
+    };
+    return {
+        calculateNotchWidth,
+        destroy,
+    };
+};
+
+export { createNotchController as c };

package/components/overlays.js

@@ -93,6 +93,14 @@ const focusElementInContext = (hostToFocus, fallbackElement) => {
 let lastOverlayIndex = 0;
 let lastId = 0;
 const activeAnimations = new WeakMap();
+/**
+ * Determines if the overlay's backdrop is always blocking (no background interaction).
+ * Returns false if showBackdrop=false or backdropBreakpoint > 0.
+ */
+const isBackdropAlwaysBlocking = (el) => {
+    var _a;
+    return el.showBackdrop !== false && !(((_a = el.backdropBreakpoint) !== null && _a !== void 0 ? _a : 0) > 0);
+};
 const createController = (tagName) => {
     return {
         create(options) {
@@ -536,9 +544,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
      */
     const overlayEl = overlay.el;
     const shouldTrapFocus = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false;
-    // Only lock out root content when backdrop is active. Developers relying on showBackdrop=false
-    // expect background interaction to remain enabled.
-    const shouldLockRoot = shouldTrapFocus && overlayEl.showBackdrop !== false;
+    const shouldLockRoot = shouldTrapFocus && isBackdropAlwaysBlocking(overlayEl);
     overlay.presented = true;
     overlay.willPresent.emit();
     if (shouldLockRoot) {
@@ -654,10 +660,10 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
      */
     const overlaysLockingRoot = presentedOverlays.filter((o) => {
         const el = o;
-        return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && el.showBackdrop !== false;
+        return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && isBackdropAlwaysBlocking(el);
     });
     const overlayEl = overlay.el;
-    const locksRoot = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && overlayEl.showBackdrop !== false;
+    const locksRoot = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && isBackdropAlwaysBlocking(overlayEl);
     /**
      * If this is the last visible overlay that is trapping focus
      * then we want to re-add the root to the accessibility tree.

package/components/popover.js

@@ -1181,6 +1181,10 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
         if (destroyTriggerInteraction) {
             destroyTriggerInteraction();
         }
+        if (this.headerResizeObserver) {
+            this.headerResizeObserver.disconnect();
+            this.headerResizeObserver = undefined;
+        }
     }
     componentWillLoad() {
         var _a, _b;
@@ -1283,6 +1287,7 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
          */
         this.ionMount.emit();
         this.usersElement = await attachComponent(delegate, el, this.component, ['popover-viewport'], this.componentProps, inline);
+        this.recalculateContentOnHeaderReady();
         if (!this.keyboardEvents) {
             this.configureKeyboardInteraction();
         }
@@ -1328,6 +1333,35 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
         }
         unlock();
     }
+    /**
+     * Watch the header for height changes and trigger content dimension
+     * recalculation when the header has a height > 0. This sets the offset-top
+     * of the content to the height of the header correctly.
+     */
+    recalculateContentOnHeaderReady() {
+        var _a;
+        const popoverContent = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.popover-content');
+        if (!popoverContent) {
+            return;
+        }
+        const contentContainer = this.usersElement || popoverContent;
+        const header = contentContainer.querySelector('ion-header');
+        const contentElements = contentContainer.querySelectorAll('ion-content');
+        if (!header || contentElements.length === 0) {
+            return;
+        }
+        this.headerResizeObserver = new ResizeObserver(async () => {
+            var _a;
+            if (header.offsetHeight > 0) {
+                (_a = this.headerResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+                this.headerResizeObserver = undefined;
+                for (const contentEl of contentElements) {
+                    await contentEl.recalculateDimensions();
+                }
+            }
+        });
+        this.headerResizeObserver.observe(header);
+    }
     /**
      * Dismiss the popover overlay after it has been presented.
      * This is a no-op if the overlay has not been presented yet. If you want
@@ -1389,9 +1423,9 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (h(Host, Object.assign({ key: '16866c02534968c982cf4730d2936d03a5107c8b', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '42863f748c93f709d433931d969230137b37d42d', "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 && h("ion-backdrop", { key: '0df258601a4d30df3c27aa8234a7d5e056c3ecbb', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'f94e80ed996b957b5cd09b826472b4f60e8fcc78', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '185ce22f6386e8444a9cc7b8818dbfc16c463c99', class: "popover-arrow", part: "arrow" }), h("div", { key: '206202b299404e110de5397b229678cca18568d3', class: "popover-content", part: "content" }, h("slot", { key: 'ee543a0b92d6e35a837c0a0e4617c7b0fc4ad0b0' })))));
+            }, 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 && h("ion-backdrop", { key: '22b6d82178b52158b76ab3fd9a7dd738fd6e4bbf', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'b76335c64e992a964ed3fb91d17a992c3474b4cd', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '018c846c32e7ff7fa010528e6b37a17e5f03c84c', class: "popover-arrow", part: "arrow" }), h("div", { key: '350c468c80052da3a07768bceab98fe159c35a43', class: "popover-content", part: "content" }, h("slot", { key: '686443c17ac9873d33905c1cdb67e6d6da675282' })))));
     }
     get el() { return this; }
     static get watchers() { return {