@ionic/core 9.0.1-dev.11787949960.1e63841c → 9.0.1-dev.11788285010.17561004

package/hydrate/index.js

@@ -422,7 +422,7 @@ const appGlobalScript = initialize || (() => {});
 const globalScripts = appGlobalScript;
 
 /*
- Stencil Hydrate Platform v4.44.1 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Platform v4.43.5 | MIT Licensed | https://stenciljs.com
  */
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -757,8 +757,6 @@ var DEFAULT_DOC_DATA = {
 };
 var SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
 var XLINK_NS = "http://www.w3.org/1999/xlink";
-var MAX_LAZY_LOAD_RETRIES = 3;
-var LAZY_LOAD_RETRY_INTERVAL_MS = 1e3;
 
 // src/utils/style.ts
 function createStyleSheetIfNeededAndSupported(styles2) {
@@ -822,7 +820,7 @@ function getHostSlotNodes(childNodes, hostName, slotName) {
       slottedNodes.push(childNode);
       if (typeof slotName !== "undefined") return slottedNodes;
     }
-    slottedNodes = [...slottedNodes, ...getHostSlotNodes(internalCall(childNode, "childNodes"), hostName, slotName)];
+    slottedNodes = [...slottedNodes, ...getHostSlotNodes(childNode.childNodes, hostName, slotName)];
   }
   return slottedNodes;
 }
@@ -1066,11 +1064,6 @@ var h = (nodeName, vnodeData, ...children) => {
       } else if (child != null && typeof child !== "boolean") {
         if (simple = typeof nodeName !== "function" && !isComplexType(child)) {
           child = String(child);
-        } else if (typeof nodeName !== "function" && child.$flags$ === void 0) {
-          {
-            consoleError("Invalid vNode child");
-          }
-          continue;
         }
         if (simple && lastSimple) {
           vNodeChildren[vNodeChildren.length - 1].$text$ += child;
@@ -2306,7 +2299,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
       }
     }
     if (newValue == null || newValue === false) {
-      if (newValue !== false || elm.getAttribute(memberName) === "" || flags & 4 /* isHost */ && !isEnumeratedAttribute(memberName)) {
+      if (newValue !== false || elm.getAttribute(memberName) === "") {
         if (xlink) {
           elm.removeAttributeNS(XLINK_NS, memberName);
         } else {
@@ -2323,8 +2316,6 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
     }
   }
 };
-var ENUMERATED_ATTRIBUTES = /* @__PURE__ */ new Set(["draggable", "contenteditable", "spellcheck"]);
-var isEnumeratedAttribute = (attrName) => ENUMERATED_ATTRIBUTES.has(attrName) || attrName.startsWith("aria-");
 var parseClassListRegex = /\s/;
 var parseClassList = (value) => {
   if (typeof value === "object" && value && "baseVal" in value) {
@@ -2727,10 +2718,7 @@ var markSlotContentForRelocation = (elm) => {
       const slotName = childNode["s-sn"];
       for (j = hostContentNodes.length - 1; j >= 0; j--) {
         node = hostContentNodes[j];
-        if (!node["s-cn"] && !node["s-nr"] && node["s-hn"] !== childNode["s-hn"] && // let an exact named-slot match override a stale default-slot claim. Skip this for
-        // `slotName === ''` itself - a matched default node's cached `s-sn` is `''` too, which
-        // would trivially "match" on every re-render and force pointless re-insertion.
-        (!node["s-sh"] || node["s-sh"] !== childNode["s-hn"] || slotName !== "" && getSlotName(node) === slotName)) {
+        if (!node["s-cn"] && !node["s-nr"] && node["s-hn"] !== childNode["s-hn"] && (!node["s-sh"] || node["s-sh"] !== childNode["s-hn"])) {
           if (isNodeLocatedInSlot(node, slotName)) {
             let relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
             checkSlotFallbackVisibility = true;
@@ -2800,7 +2788,7 @@ var insertBefore = (parent, newNode, reference, isInitialLoad) => {
       return newNode;
     }
   }
-  if ((parent == null ? void 0 : parent.__insertBefore)) {
+  if (parent.__insertBefore) {
     return parent.__insertBefore(newNode, reference);
   } else {
     return parent == null ? void 0 : parent.insertBefore(newNode, reference);
@@ -3305,12 +3293,10 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
 
 // src/runtime/initialize-component.ts
 var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
-  var _a2;
   let Cstr;
   try {
     if ((hostRef.$flags$ & 32 /* hasInitializedComponent */) === 0) {
       hostRef.$flags$ |= 32 /* hasInitializedComponent */;
-      hostRef.$flags$ &= -1025 /* hasFailedLoad */;
       const bundleId = cmpMeta.$lazyBundleId$;
       if (bundleId) {
         const CstrImport = loadModule(cmpMeta);
@@ -3322,11 +3308,6 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
           Cstr = CstrImport;
         }
         if (!Cstr) {
-          hostRef.$flags$ &= -33 /* hasInitializedComponent */;
-          hostRef.$loadRetryCount$ = ((_a2 = hostRef.$loadRetryCount$) != null ? _a2 : 0) + 1;
-          if (hostRef.$loadRetryCount$ < MAX_LAZY_LOAD_RETRIES) {
-            hostRef.$flags$ |= 1024 /* hasFailedLoad */;
-          }
           throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
         }
         if (!Cstr.isProxied) {
@@ -3406,7 +3387,7 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       hostRef.$onRenderResolve$();
       hostRef.$onRenderResolve$ = void 0;
     }
-    if (hostRef.$onReadyResolve$ && !(hostRef.$flags$ & 1024 /* hasFailedLoad */)) {
+    if (hostRef.$onReadyResolve$) {
       hostRef.$onReadyResolve$(elm);
     }
   }
@@ -3465,8 +3446,6 @@ var connectedCallback = (elm) => {
       addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
       if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
         fireConnectedCallback(hostRef.$lazyInstance$, elm);
-      } else if (hostRef.$flags$ & 1024 /* hasFailedLoad */) {
-        setTimeout(() => initializeComponent(elm, hostRef, cmpMeta), LAZY_LOAD_RETRY_INTERVAL_MS);
       } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
         hostRef.$onReadyPromise$.then(() => fireConnectedCallback(hostRef.$lazyInstance$, elm));
       }
@@ -7982,15 +7961,6 @@ const activeAnimations = new WeakMap();
 const isBackdropAlwaysBlocking = (el) => {
     return el.showBackdrop !== false && !((el.backdropBreakpoint ?? 0) > 0);
 };
-/**
- * Whether the overlay takes the app root out of the accessibility tree and
- * blocks body scroll while presented. Toasts never do, modal and popover can
- * opt out with `focusTrap={false}`, and a backdrop that does not block
- * (`showBackdrop={false}`, or a `backdropBreakpoint` above 0) is excluded.
- */
-const locksAppRoot = (el) => {
-    return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && isBackdropAlwaysBlocking(el);
-};
 const createController = (tagName) => {
     return {
         create(options) {
@@ -8359,13 +8329,6 @@ const getPresentedOverlay = (doc, overlayTag, id) => {
     // Otherwise, return the last overlay with the given id
     return (id === undefined ? overlays : overlays.filter((o) => o.id === id)).slice(-1)[0];
 };
-/**
- * The element an app nests its views under. Overlays hide this rather than the
- * whole root, so the overlay itself (a sibling) stays reachable.
- */
-const getViewContainer = () => {
-    return getAppRoot(document).querySelector('ion-router-outlet, #ion-view-container-root');
-};
 /**
  * When an overlay is presented, the main
  * focus is the overlay not the page content.
@@ -8389,7 +8352,8 @@ const getViewContainer = () => {
  * for main content.
  */
 const setRootAriaHidden = (hidden = false) => {
-    const viewContainer = getViewContainer();
+    const root = getAppRoot(document);
+    const viewContainer = root.querySelector('ion-router-outlet, #ion-view-container-root');
     if (!viewContainer) {
         return;
     }
@@ -8414,42 +8378,15 @@ const cleanupRootFocusTrapAccessibility = () => {
         return;
     }
     const remainingOverlays = getPresentedOverlays(document);
-    const hasRemainingLocking = remainingOverlays.some((o) => locksAppRoot(o));
+    const hasRemainingLocking = remainingOverlays.some((o) => {
+        const el = o;
+        return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && isBackdropAlwaysBlocking(el);
+    });
     if (!hasRemainingLocking) {
         setRootAriaHidden(false);
         document.body.classList.remove(BACKDROP_NO_SCROLL);
     }
 };
-/**
- * Applies the root lock itself: `aria-hidden` on the view container, and
- * `backdrop-no-scroll` on the body. Shared by `present()` and the restore
- * below, which have to stay in lockstep.
- */
-const applyRootLock = (el) => {
-    // Hiding the container the overlay now sits in would hide the overlay too.
-    if (!getViewContainer()?.contains(el)) {
-        setRootAriaHidden(true);
-    }
-    document.body.classList.add(BACKDROP_NO_SCROLL);
-};
-/**
- * Re-applies the root lock that `cleanupRootFocusTrapAccessibility()` released.
- * Call from `connectedCallback` when the overlay is still presented.
- *
- * A synchronous move keeps the overlay connected, so the lock survives. A
- * detach with a re-insert in a later task releases it, which is the shape a
- * framework produces when it takes a subtree out and puts it back.
- */
-const restoreRootFocusTrapAccessibility = (overlayEl) => {
-    if (typeof document === 'undefined') {
-        return;
-    }
-    const el = overlayEl;
-    if (!locksAppRoot(el)) {
-        return;
-    }
-    applyRootLock(el);
-};
 const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
     if (overlay.presented) {
         return;
@@ -8466,7 +8403,15 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
         restoreElementFocus(overlay.el);
     }
     /**
-     * Some apps move inline overlays to a specific container
+     * Due to accessibility guidelines, toasts do not have
+     * focus traps.
+     *
+     * All other overlays should have focus traps to prevent
+     * the keyboard focus from leaving the overlay unless
+     * developers explicitly opt out (for example, sheet
+     * modals that should permit background interaction).
+     *
+     * Note: Some apps move inline overlays to a specific container
      * during the willPresent lifecycle (e.g., React portals via
      * onWillPresent). Defer applying aria-hidden/inert to the app
      * root until after willPresent so we can detect where the
@@ -8475,11 +8420,18 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
      * to avoid disabling the overlay.
      */
     const overlayEl = overlay.el;
-    const shouldLockRoot = locksAppRoot(overlayEl);
+    const shouldTrapFocus = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false;
+    const shouldLockRoot = shouldTrapFocus && isBackdropAlwaysBlocking(overlayEl);
     overlay.presented = true;
     overlay.willPresent.emit();
     if (shouldLockRoot) {
-        applyRootLock(overlayEl);
+        const root = getAppRoot(document);
+        const viewContainer = root.querySelector('ion-router-outlet, #ion-view-container-root');
+        const overlayInsideViewContainer = viewContainer ? viewContainer.contains(overlayEl) : false;
+        if (!overlayInsideViewContainer) {
+            setRootAriaHidden(true);
+        }
+        document.body.classList.add(BACKDROP_NO_SCROLL);
     }
     overlay.willPresentShorthand?.emit();
     const mode = getIonMode$1(overlay);
@@ -8605,9 +8557,12 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
      * from the root element when the last focus-trapping overlay
      * is dismissed.
      */
-    const overlaysLockingRoot = presentedOverlays.filter((o) => locksAppRoot(o));
+    const overlaysLockingRoot = presentedOverlays.filter((o) => {
+        const el = o;
+        return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && isBackdropAlwaysBlocking(el);
+    });
     const overlayEl = overlay.el;
-    const locksRoot = locksAppRoot(overlayEl);
+    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.
@@ -10603,13 +10558,6 @@ class ActionSheet {
     connectedCallback() {
         prepareOverlay(this.el);
         this.triggerChanged();
-        // `componentDidLoad` only fires once per instance, so a reconnect has to
-        // rebuild the gesture its disconnect destroyed.
-        this.setupButtonActiveGesture();
-        // Re-apply the root lock if moved without dismiss() being called
-        if (this.presented) {
-            restoreRootFocusTrapAccessibility(this.el);
-        }
     }
     disconnectedCallback() {
         if (this.gesture) {
@@ -10629,33 +10577,24 @@ class ActionSheet {
         // Initialize activeRadioId for radio buttons
         this.buttonsChanged();
     }
-    /**
-     * Only create gesture if:
-     * 1. A gesture does not already exist
-     * 2. App is running in iOS mode
-     * 3. A wrapper ref exists
-     * 4. A group ref exists
-     * 5. The host is still connected, since a reconnect can schedule this and
-     *    disconnect again before the task runs
-     */
-    setupButtonActiveGesture() {
+    componentDidLoad() {
+        /**
+         * Only create gesture if:
+         * 1. A gesture does not already exist
+         * 2. App is running in iOS mode
+         * 3. A wrapper ref exists
+         * 4. A group ref exists
+         */
         const { groupEl, wrapperEl } = this;
-        if (getIonMode$1(this) !== 'ios' || !wrapperEl || !groupEl) {
-            return;
+        if (!this.gesture && getIonMode$1(this) === 'ios' && wrapperEl && groupEl) {
+            readTask(() => {
+                const isScrollable = groupEl.scrollHeight > groupEl.clientHeight;
+                if (!isScrollable) {
+                    this.gesture = createButtonActiveGesture(wrapperEl, (refEl) => refEl.classList.contains('action-sheet-button'));
+                    this.gesture.enable(true);
+                }
+            });
         }
-        readTask(() => {
-            // Bail if a call queued ahead of this one already built the gesture
-            // (a second would orphan the first with its listeners still bound), if
-            // the host disconnected while this task waited, or if the group scrolls.
-            if (this.gesture || !this.el.isConnected || groupEl.scrollHeight > groupEl.clientHeight) {
-                return;
-            }
-            this.gesture = createButtonActiveGesture(wrapperEl, (refEl) => refEl.classList.contains('action-sheet-button'));
-            this.gesture.enable(true);
-        });
-    }
-    componentDidLoad() {
-        this.setupButtonActiveGesture();
         /**
          * If action sheet was rendered with isOpen="true"
          * then we should open action sheet immediately.
@@ -10748,17 +10687,17 @@ class ActionSheet {
         const cancelButton = allButtons.find((b) => b.role === 'cancel');
         const buttons = allButtons.filter((b) => b.role !== 'cancel');
         const headerID = `action-sheet-${overlayIndex}-header`;
-        return (hAsync(Host, { key: '83b47ea6b81d4eec6582c1dcaae6f267c78ba634', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1", ...htmlAttributes, style: {
+        return (hAsync(Host, { key: '7685831da9a78b73473246a2cea95cefa79a53c3', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1", ...htmlAttributes, style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: {
                 [mode]: true,
                 ...getClassMap(this.cssClass),
                 'overlay-hidden': true,
                 'action-sheet-translucent': this.translucent,
-            }, onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, hAsync("ion-backdrop", { key: '3652793ec76adcfb87b814eb65d1260ae26f6910', tappable: this.backdropDismiss }), hAsync("div", { key: '7de3a51daf95b50e02734a2cc8eec6f55b1473f3', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '9b76bbf12901b956f7ee6d984f7f71e169bb5939', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, hAsync("div", { key: 'cb52c905275a46ff27810fb1b4748ab533a78c45', class: "action-sheet-container" }, hAsync("div", { key: '578c7194cfbcb65c1e41e15c390af41f179a2686', class: "action-sheet-group", ref: (el) => (this.groupEl = el), role: hasRadioButtons ? 'radiogroup' : undefined }, header !== undefined && (hAsync("div", { key: 'ee961307c25cb1fcb0c6bbf667a8ed76ab717860', id: headerID, class: {
+            }, onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, hAsync("ion-backdrop", { key: 'c70f00e401cac99b89412d1adb867f35bc855d57', tappable: this.backdropDismiss }), hAsync("div", { key: '3332893ce3098f1435875480b1269b2821d41660', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'eb406b0a9e303d6f94c5c7aa99c6f4c089bfbd41', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, hAsync("div", { key: '92ec855379f10e1e0bfce6ff68b45d3cda0c137c', class: "action-sheet-container" }, hAsync("div", { key: 'bc88a396d75396f574961471bf7e6c4edb513353', class: "action-sheet-group", ref: (el) => (this.groupEl = el), role: hasRadioButtons ? 'radiogroup' : undefined }, header !== undefined && (hAsync("div", { key: '33329e0193818888bdcaa443ff5ea301802e0787', id: headerID, class: {
                 'action-sheet-title': true,
                 'action-sheet-has-sub-title': this.subHeader !== undefined,
-            } }, header, this.subHeader && hAsync("div", { key: '82d4016010db14d3f3b9911c276cb9a63b960ef4', class: "action-sheet-sub-title" }, this.subHeader))), this.renderActionSheetButtons(buttons)), cancelButton && (hAsync("div", { key: 'a88fbfab194e13c6642a65f2e19a12299dd4ac23', class: "action-sheet-group action-sheet-group-cancel" }, hAsync("button", { key: 'a232b8d23f1fc2efb7b37a605102b6994761a2f6', ...cancelButton.htmlAttributes, type: "button", class: buttonClass$2(cancelButton), onClick: () => this.buttonClick(cancelButton) }, hAsync("span", { key: '19a7d95d3428d78a56b7dacabdec8fc0b722d8c2', class: "action-sheet-button-inner" }, cancelButton.icon && (hAsync("ion-icon", { key: '5f3f3cb996a48e6365a3a09ea72ddc68ac9ccb78', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && hAsync("ion-ripple-effect", { key: '6e8fcb5f103ac19aa4b0682f19791cef0a147001' })))))), hAsync("div", { key: '36f63ab77949c88f662e2cf6bb18510cb9de6a9f', tabindex: "0", "aria-hidden": "true" })));
+            } }, header, this.subHeader && hAsync("div", { key: '92ac5a9217a12b7417f7aca9c4fdb7bf6b051364', class: "action-sheet-sub-title" }, this.subHeader))), this.renderActionSheetButtons(buttons)), cancelButton && (hAsync("div", { key: '020463b830fa48fc3ae647ea64f2aaa4d0969305', class: "action-sheet-group action-sheet-group-cancel" }, hAsync("button", { key: 'cefa9c70a2233f6652a81b1a2eae6e717712144d', ...cancelButton.htmlAttributes, type: "button", class: buttonClass$2(cancelButton), onClick: () => this.buttonClick(cancelButton) }, hAsync("span", { key: '56d7e2f8bfb3644e4476895164d334445fda9b2f', class: "action-sheet-button-inner" }, cancelButton.icon && (hAsync("ion-icon", { key: '6a4a49254ec5cd96f4e0dce9447f90d8cac81913', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && hAsync("ion-ripple-effect", { key: '7d3c6e8d70b0922ea0f75520856285ce1005c891' })))))), hAsync("div", { key: '958fc43e603c6a7f5d1e649d3326fce0f163b5d0', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -11140,15 +11079,10 @@ class Alert {
         this.triggerChanged();
         /**
          * If the alert was previously connected and is being reattached, the
-         * `ResizeObserver` and the button gesture were torn down. `componentDidLoad`
-         * only fires once per instance, so re-establish both here on reconnect.
+         * ResizeObserver was disconnected. componentDidLoad only fires once per
+         * instance, so re-establish the observer here on reconnect.
          */
         this.setupButtonGroupResizeObserver();
-        this.setupButtonActiveGesture();
-        // Re-apply the root lock if moved without dismiss() being called
-        if (this.presented) {
-            restoreRootFocusTrapAccessibility(this.el);
-        }
     }
     componentWillLoad() {
         if (!this.htmlAttributes?.id) {
@@ -11170,20 +11104,17 @@ class Alert {
         this.buttonGroupResizeObserver?.disconnect();
         this.buttonGroupResizeObserver = undefined;
     }
-    /**
-     * Only create gesture if:
-     * 1. A gesture does not already exist
-     * 2. App is running in iOS mode
-     * 3. A wrapper ref exists
-     */
-    setupButtonActiveGesture() {
+    componentDidLoad() {
+        /**
+         * Only create gesture if:
+         * 1. A gesture does not already exist
+         * 2. App is running in iOS mode
+         * 3. A wrapper ref exists
+         */
         if (!this.gesture && getIonMode$1(this) === 'ios' && this.wrapperEl) {
             this.gesture = createButtonActiveGesture(this.wrapperEl, (refEl) => refEl.classList.contains('alert-button'));
             this.gesture.enable(true);
         }
-    }
-    componentDidLoad() {
-        this.setupButtonActiveGesture();
         this.setupButtonGroupResizeObserver();
         /**
          * If alert was rendered with isOpen="true"
@@ -11504,14 +11435,14 @@ class Alert {
          * If neither are defined, do not set aria-labelledby.
          */
         const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
-        return (hAsync(Host, { key: '083b5250dc4c76e85240e0225abcb7ca2b66de2f', tabindex: "-1", style: {
+        return (hAsync(Host, { key: '022f3463b8e6c52064b90ec304c524847c3d5ad3', tabindex: "-1", style: {
                 zIndex: `${20000 + overlayIndex}`,
             }, class: {
                 ...getClassMap(this.cssClass),
                 [mode]: true,
                 'overlay-hidden': true,
                 'alert-translucent': this.translucent,
-            }, onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, hAsync("ion-backdrop", { key: '65c92a956d998ae9016396dd2a29c42ab7376d0e', tappable: this.backdropDismiss }), hAsync("div", { key: 'f2288fa0b7ef9d0bf031c168fe78c48422cf91c8', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'dbb109435c378f77c6b0231e58756f8a0467732d', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el), ...htmlAttributes }, hAsync("div", { key: '075597f94719673cf1f894a8566e1036849afa75', class: "alert-head" }, header && (hAsync("h2", { key: 'f96f4b1db8473c62040beed6e96108c733978d73', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (hAsync("h2", { key: 'dbd824ef19a07bddde4eb928f11de7c7cadf98b8', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (hAsync("h3", { key: '4774fa13700dd23aec7930492acae80de3bdf5d1', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), hAsync("div", { key: '5c728b7457e231f64294bbec821bdb547c6437dd', tabindex: "0", "aria-hidden": "true" })));
+            }, onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, hAsync("ion-backdrop", { key: 'c3cd05738bc2834f54707edeb2fae06ec10d6fd2', tappable: this.backdropDismiss }), hAsync("div", { key: 'b44fadd9ba7ddf073854c5035538d11ae8e66bc2', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'fafea048141a6c7957e62aef31faa8041dd610c1', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el), ...htmlAttributes }, hAsync("div", { key: '3ad9d2d4b7cf425eab8293ddc12eff0fe8df1517', class: "alert-head" }, header && (hAsync("h2", { key: '7d9154f5ee595b7e4da6ecf3a20871f104c1256e', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (hAsync("h2", { key: '1f891f38004be6964e9406b84dd580145c42516a', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (hAsync("h3", { key: '2ab4d344ecb7e384e8f6d3d3e59ee5a1bbcc832c', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), hAsync("div", { key: '78a4ff09aa3aaafcd0dc2a42d036767d83b3cfa2', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -13690,23 +13621,6 @@ class Content {
         const mode = getIonMode$1(this);
         return forceOverscroll === undefined ? mode === 'ios' && isPlatform('ios') : forceOverscroll;
     }
-    /**
-     * Whether this component should size itself to its contents height, which
-     * is the case inside any popover and inside a modal whose `--height` is a
-     * content-based value. Those overlays give the content no definite height
-     * to fill.
-     */
-    shouldSizeToContent() {
-        if (hostContext('ion-popover', this.el)) {
-            return true;
-        }
-        const modal = this.el.closest('ion-modal');
-        if (modal === null) {
-            return false;
-        }
-        const height = getComputedStyle(modal).getPropertyValue('--height').trim();
-        return CONTENT_SIZED_HEIGHTS.includes(height);
-    }
     resize() {
     }
     /**
@@ -13886,21 +13800,21 @@ class Content {
         const forceOverscroll = this.shouldForceOverscroll();
         const transitionShadow = mode === 'ios';
         this.resize();
-        return (hAsync(Host, { key: 'd6ea57ec1f5def0bfd22f52ec5a5bbe6aa2f8e8e', role: isMainContent ? 'main' : undefined, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '9551c759df407b10d809171641fc6e8f14d92219', role: isMainContent ? 'main' : undefined, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'content-fullscreen': this.fullscreen,
-                'content-sizing': this.shouldSizeToContent(),
+                'content-sizing': hostContext('ion-popover', this.el),
                 overscroll: forceOverscroll,
                 [`content-${rtl}`]: true,
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            }, ...inheritedAttributes }, hAsync("div", { key: '3ea7145f051ac3870ffb2b0c1fd83c20ce42d431', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? hAsync("slot", { name: "fixed" }) : null, hAsync("div", { key: 'af112b5f681fd40417c82bee085263c85755dad5', class: {
+            }, ...inheritedAttributes }, hAsync("div", { key: 'c6de8fd226f0d10a534eb107fe032ac155fbe68e', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? hAsync("slot", { name: "fixed" }) : null, hAsync("div", { key: '082fc2936061360060b48221ecb1c864a3711fa0', class: {
                 'inner-scroll': true,
                 'scroll-x': scrollX,
                 'scroll-y': scrollY,
                 overscroll: (scrollX || scrollY) && forceOverscroll,
-            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, hAsync("slot", { key: '1b130c5713874fe457934359a1a1709a8cdb257a' })), transitionShadow ? (hAsync("div", { class: "transition-effect" }, hAsync("div", { class: "transition-cover" }), hAsync("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? hAsync("slot", { name: "fixed" }) : null));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, hAsync("slot", { key: '0d2286206facb22696a9ca7e74a3f6b7d2397aab' })), transitionShadow ? (hAsync("div", { class: "transition-effect" }, hAsync("div", { class: "transition-cover" }), hAsync("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? hAsync("slot", { name: "fixed" }) : null));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -13933,11 +13847,6 @@ class Content {
         "$attrsToReflect$": [["color", "color"]]
     }; }
 }
-/**
- * `ion-modal` `--height` values that size the modal to its contents, leaving
- * children an indefinite height to resolve against.
- */
-const CONTENT_SIZED_HEIGHTS = ['auto', 'fit-content', 'min-content', 'max-content'];
 const getParentElement = (el) => {
     if (el.parentElement) {
         // normal element with a parent element
@@ -17119,6 +17028,7 @@ class Datetime {
     }
     renderCombinedDatePickerColumn() {
         const { defaultParts, disabled, workingParts, locale, minParts, maxParts, todayParts, isDateEnabled } = this;
+        const activePart = this.getActivePartsWithFallback();
         /**
          * By default, generate a range of 3 months:
          * Previous month, current month, and next month
@@ -17174,10 +17084,8 @@ class Datetime {
         return (hAsync("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a date", class: "date-column", color: this.color, disabled: disabled, value: todayString, onIonChange: (ev) => {
                 const { value } = ev.detail;
                 const findPart = parts.find(({ month, day, year }) => value === `${year}-${month}-${day}`);
-                // Read live so parts a sibling column just committed are included.
-                const activePart = this.getActivePartsWithFallback();
                 this.setWorkingParts({
-                    ...this.workingParts,
+                    ...workingParts,
                     ...findPart,
                 });
                 this.setActiveParts({
@@ -17254,12 +17162,11 @@ class Datetime {
             return [];
         }
         const { disabled, workingParts } = this;
+        const activePart = this.getActivePartsWithFallback();
         const pickerColumnValue = (workingParts.day !== null ? workingParts.day : this.defaultParts.day) ?? undefined;
         return (hAsync("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a day", class: "day-column", color: this.color, disabled: disabled, value: pickerColumnValue, onIonChange: (ev) => {
-                // Read live so parts a sibling column just committed are included.
-                const activePart = this.getActivePartsWithFallback();
                 this.setWorkingParts({
-                    ...this.workingParts,
+                    ...workingParts,
                     day: ev.detail.value,
                 });
                 this.setActiveParts({
@@ -17274,11 +17181,10 @@ class Datetime {
             return [];
         }
         const { disabled, workingParts } = this;
+        const activePart = this.getActivePartsWithFallback();
         return (hAsync("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a month", class: "month-column", color: this.color, disabled: disabled, value: workingParts.month, onIonChange: (ev) => {
-                // Read live so parts a sibling column just committed are included.
-                const activePart = this.getActivePartsWithFallback();
                 this.setWorkingParts({
-                    ...this.workingParts,
+                    ...workingParts,
                     month: ev.detail.value,
                 });
                 // Month wheel is navigation-only in multi-select mode as a fix for https://github.com/ionic-team/ionic-framework/issues/29673
@@ -17296,11 +17202,10 @@ class Datetime {
             return [];
         }
         const { disabled, workingParts } = this;
+        const activePart = this.getActivePartsWithFallback();
         return (hAsync("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a year", class: "year-column", color: this.color, disabled: disabled, value: workingParts.year, onIonChange: (ev) => {
-                // Read live so parts a sibling column just committed are included.
-                const activePart = this.getActivePartsWithFallback();
                 this.setWorkingParts({
-                    ...this.workingParts,
+                    ...workingParts,
                     year: ev.detail.value,
                 });
                 // Year wheel is navigation-only in multi-select mode as a fix for https://github.com/ionic-team/ionic-framework/issues/29673
@@ -17336,14 +17241,13 @@ class Datetime {
         ];
     }
     renderHourPickerColumn(hoursData) {
-        const { disabled } = this;
+        const { disabled, workingParts } = this;
         if (hoursData.length === 0)
             return [];
         const activePart = this.getActivePartsWithFallback();
         return (hAsync("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select an hour", color: this.color, disabled: disabled, value: activePart.hour, numericInput: true, onIonChange: (ev) => {
-                // Read live so parts a sibling column just committed are included.
                 this.setWorkingParts({
-                    ...this.workingParts,
+                    ...workingParts,
                     hour: ev.detail.value,
                 });
                 this.setActiveParts({
@@ -17354,14 +17258,13 @@ class Datetime {
             } }, hoursData.map((hour) => (hAsync("ion-picker-column-option", { color: this.color, part: hour.value === activePart.hour ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: hour.value, disabled: hour.disabled, value: hour.value }, hour.text)))));
     }
     renderMinutePickerColumn(minutesData) {
-        const { disabled } = this;
+        const { disabled, workingParts } = this;
         if (minutesData.length === 0)
             return [];
         const activePart = this.getActivePartsWithFallback();
         return (hAsync("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a minute", color: this.color, disabled: disabled, value: activePart.minute, numericInput: true, onIonChange: (ev) => {
-                // Read live so parts a sibling column just committed are included.
                 this.setWorkingParts({
-                    ...this.workingParts,
+                    ...workingParts,
                     minute: ev.detail.value,
                 });
                 this.setActiveParts({
@@ -17372,18 +17275,16 @@ class Datetime {
             } }, minutesData.map((minute) => (hAsync("ion-picker-column-option", { color: this.color, part: minute.value === activePart.minute ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: minute.value, disabled: minute.disabled, value: minute.value }, minute.text)))));
     }
     renderDayPeriodPickerColumn(dayPeriodData) {
-        const { disabled } = this;
+        const { disabled, workingParts } = this;
         if (dayPeriodData.length === 0) {
             return [];
         }
         const activePart = this.getActivePartsWithFallback();
         const isDayPeriodRTL = isLocaleDayPeriodRTL(this.locale);
         return (hAsync("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a day period", style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, onIonChange: (ev) => {
-                // Read live so parts a sibling column just committed are included.
-                const currentParts = this.workingParts;
-                const hour = calculateHourFromAMPM(currentParts, ev.detail.value);
+                const hour = calculateHourFromAMPM(workingParts, ev.detail.value);
                 this.setWorkingParts({
-                    ...currentParts,
+                    ...workingParts,
                     ampm: ev.detail.value,
                     hour,
                 });
@@ -17735,7 +17636,7 @@ class Datetime {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (hAsync(Host, { key: '4e0b529a70924b065bcc6191e08550428b5a52a0', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: {
+        return (hAsync(Host, { key: 'd8e6dfe5e3bffb1c38a3e37b63b3aec099f40d29', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: {
                 ...createColorClasses$1(color, {
                     [mode]: true,
                     ['datetime-readonly']: readonly,
@@ -17747,7 +17648,7 @@ class Datetime {
                     [`datetime-prefer-wheel`]: hasWheelVariant,
                     [`datetime-grid`]: isGridStyle,
                 }),
-            } }, hAsync("div", { key: 'cc9d1b92f960984cb0466d0003a240ace67da243', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            } }, hAsync("div", { key: '20889d3c68dd5109633c0e214411a63d6f3025bb', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -22429,17 +22330,19 @@ class ItemSliding {
         }
     }
     async updateOptions() {
-        const options = Array.from(this.el.querySelectorAll('ion-item-options'));
-        /**
-         * Frameworks that assign element props after inserting the element haven't set
-         * `side` while `connectedCallback` runs, so reading it any earlier reports every
-         * option as `end`.
-         */
-        await Promise.all(options.map((option) => new Promise((resolve) => componentOnReady(option, resolve))));
+        const options = this.el.querySelectorAll('ion-item-options');
         let sides = 0;
         // Reset left and right options in case they were removed
         this.leftOptions = this.rightOptions = undefined;
-        for (const option of options) {
+        for (let i = 0; i < options.length; i++) {
+            const item = options.item(i);
+            /**
+             * We cannot use the componentOnReady helper
+             * util here since we need to wait for all of these items
+             * to be ready before we set `this.sides` and `this.optsDirty`.
+             */
+            // eslint-disable-next-line custom-rules/no-component-on-ready-method
+            const option = item.componentOnReady !== undefined ? await item.componentOnReady() : item;
             const side = isEndSide(option.side ?? option.getAttribute('side')) ? 'end' : 'start';
             if (side === 'start') {
                 this.leftOptions = option;
@@ -22638,7 +22541,7 @@ class ItemSliding {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '02174ca963753d3a51a4249068f3d436f8acb03d', class: {
+        return (hAsync(Host, { key: '15f6a98f8c888e86c29827cdf55d98ace08699dd', class: {
                 [mode]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
@@ -23051,10 +22954,6 @@ class Loading {
     connectedCallback() {
         prepareOverlay(this.el);
         this.triggerChanged();
-        // Re-apply the root lock if moved without dismiss() being called
-        if (this.presented) {
-            restoreRootFocusTrapAccessibility(this.el);
-        }
     }
     componentWillLoad() {
         if (this.spinner === undefined) {
@@ -23155,14 +23054,14 @@ class Loading {
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (hAsync(Host, { key: 'b4430bc66aedeca19d5645667cba73c169c4bd76', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1", ...htmlAttributes, style: {
+        return (hAsync(Host, { key: '2d14122ff3081de73631a7fdd4affdd5c73b8618', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1", ...htmlAttributes, style: {
                 zIndex: `${40000 + this.overlayIndex}`,
             }, onIonBackdropTap: this.onBackdropTap, class: {
                 ...getClassMap(this.cssClass),
                 [mode]: true,
                 'overlay-hidden': true,
                 'loading-translucent': this.translucent,
-            } }, hAsync("ion-backdrop", { key: 'dec0df942ae778c99ebd4dbf08d6c2a0a992639d', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '71b2d5fc259666225047fc901648ada1efcd5d4b', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '1d83dc3b57ee70c9e8c0f006c6fa576bd96ecded', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { key: 'd1cd127e044b8831e396b53122322c1db7e89904', class: "loading-spinner" }, hAsync("ion-spinner", { key: '38c2580cf5659da612872f01801a5fbdc2c023ba', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: '90e5e32ffe0df2c691f364149f43374e676bfaa3', tabindex: "0", "aria-hidden": "true" })));
+            } }, hAsync("ion-backdrop", { key: 'b7d5bb0d670a20c159d7f67327bf3b1489449188', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '085ce92bd2004d323ab47eb472b83826e48dc619', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '4ecd5bfc0bbd3da434d32f0f319f867a44c5e1f1', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { key: '5a4498e1421e09d01c0ee4312eae5272e95c3127', class: "loading-spinner" }, hAsync("ion-spinner", { key: '1b3bc7d45d775195657ead3535f65e6b79f37e84', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: 'bc7c5467b9f1c6ab957f79934e97acc713bdec37', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -26683,9 +26582,9 @@ const clearSafeAreaOverrides = (hostEl) => {
     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:100%;--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-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;outline:none}.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-wrapper{outline:none}.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 modalMdCss = () => `:host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:100%;--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-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;outline:none}.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-wrapper{outline:none}.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}`;
 
 // TODO(FW-2832): types
 /**
@@ -26721,9 +26620,6 @@ class Modal {
         this.inline = false;
         // Whether or not modal is being dismissed via gesture
         this.gestureAnimationDismissing = false;
-        // True from the first safe-area write in `present()` until the enter
-        // animation settles. A position-based read in that window is not the rest position.
-        this.isPresenting = false;
         this.presented = false;
         /** @internal */
         this.hasController = false;
@@ -26960,17 +26856,6 @@ class Modal {
         const { el } = this;
         prepareOverlay(el);
         this.triggerChanged();
-        // A disconnect tears down state this presentation still needs and cannot
-        // tell a re-insert from a removal, so put it back.
-        if (this.presented || this.isPresenting) {
-            this.restoreSafeAreaOverrides();
-        }
-        // A relocation from `willPresent` reaches these before `present()` has
-        // applied the lock, so they apply it instead. Both are idempotent.
-        if (this.presented) {
-            restoreRootFocusTrapAccessibility(el);
-            this.initParentRemovalObserver();
-        }
     }
     disconnectedCallback() {
         this.triggerController.removeClickListener();
@@ -27148,33 +27033,25 @@ class 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;
-        this.isPresenting = true;
+        // Set initial safe-area overrides before animation
+        this.setInitialSafeAreaOverrides();
         const hasCardModal = presentingElement !== undefined;
-        // Wrapped so a throw cannot strand `isPresenting`, which would suppress
-        // the position-based correction for the life of this instance.
-        try {
-            // Set initial safe-area overrides before animation
-            this.setInitialSafeAreaOverrides();
-            /**
-             * We need to change the status bar at the
-             * start of the animation so that it completes
-             * by the time the card animation is done.
-             */
-            if (hasCardModal && getIonMode$1(this) === 'ios') {
-                // Cache the original status bar color before the modal is presented
-                this.statusBarStyle = await StatusBar.getStyle();
-                setCardStatusBarDark();
-            }
-            await present(this, 'modalEnter', iosEnterAnimation$2, mdEnterAnimation$2, {
-                presentingEl: presentingElement,
-                currentBreakpoint: this.initialBreakpoint,
-                backdropBreakpoint: this.backdropBreakpoint,
-                expandToScroll: this.expandToScroll,
-            });
-        }
-        finally {
-            this.isPresenting = false;
+        /**
+         * We need to change the status bar at the
+         * start of the animation so that it completes
+         * by the time the card animation is done.
+         */
+        if (hasCardModal && getIonMode$1(this) === 'ios') {
+            // Cache the original status bar color before the modal is presented
+            this.statusBarStyle = await StatusBar.getStyle();
+            setCardStatusBarDark();
         }
+        await present(this, 'modalEnter', iosEnterAnimation$2, mdEnterAnimation$2, {
+            presentingEl: presentingElement,
+            currentBreakpoint: this.initialBreakpoint,
+            backdropBreakpoint: this.backdropBreakpoint,
+            expandToScroll: this.expandToScroll,
+        });
         // Update safe-area based on actual position after animation
         this.updateSafeAreaOverrides();
         // Apply fullscreen safe-area padding if needed
@@ -27676,9 +27553,6 @@ class Modal {
             this.cachedOriginalParent.tagName === 'ION-APP') {
             return;
         }
-        // Both `present()` and a reconnect call this, so drop any existing
-        // observer. Below the guards, so a call that bails cannot leave none.
-        this.cleanupParentRemovalObserver();
         this.parentRemovalObserver = new MutationObserver((mutations) => {
             mutations.forEach((mutation) => {
                 if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
@@ -27757,9 +27631,6 @@ class Modal {
         // Set the internal offset property with the resolved root safe-area-top value
         if (context.isSheetModal) {
             this.updateSheetOffsetTop();
-            // A restore after a DOM move runs this a second time for the same
-            // modal, so drop the previous subscription rather than stacking one.
-            this.unsubscribeRootSafeAreaTop?.();
             this.unsubscribeRootSafeAreaTop = onRootSafeAreaTopChange((safeAreaTop) => this.updateSheetOffsetTop(safeAreaTop));
         }
     }
@@ -27878,31 +27749,6 @@ class Modal {
         const { contentEl } = this.findContentAndFooter();
         this.clearContentSafeAreaPadding(contentEl);
     }
-    /**
-     * Re-applies what `cleanupSafeAreaOverrides()` removed for a modal moved
-     * while presented. Anything needing no measurement goes on synchronously so
-     * the modal is never painted without safe-area. The position-based
-     * correction waits a frame for the layout pass it reads.
-     */
-    restoreSafeAreaOverrides() {
-        this.setInitialSafeAreaOverrides();
-        this.applyFullscreenSafeArea();
-        raf(() => {
-            // A dismiss or another move can land first, and a read before the enter
-            // animation settles is not the rest position. `present()` redoes it.
-            if (!this.presented || !this.el.isConnected || this.isPresenting) {
-                return;
-            }
-            // A hidden subtree carries `display: none`, so there is no box and the
-            // read would write the safe-area for a modal touching no edge. The
-            // prediction applied above holds until the modal is shown again.
-            const { width, height } = this.el.getBoundingClientRect();
-            if (width === 0 && height === 0) {
-                return;
-            }
-            this.updateSafeAreaOverrides();
-        });
-    }
     render() {
         const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap, expandToScroll, } = this;
         const showHandle = handle !== false && isSheetModal;
@@ -27910,7 +27756,7 @@ class Modal {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (hAsync(Host, { key: '7c9c736052c5a788cf31040b6b2386dd9ea7454b', "no-router": true,
+        return (hAsync(Host, { key: 'a471c293319cb6ee5ffb7ffafec0b8413e4289de', "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}`,
@@ -27923,7 +27769,7 @@ class Modal {
                 '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: '01b5b5765fb3a32393c736065c824bf760728823', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: '40fa7727a0923f7d7461dd027f1511a6a148d84a', class: "modal-shadow" }), hAsync("div", { key: '9af934b607f60795bd5bff7bee6eacfc9b14fa35',
+            }, onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }, hAsync("ion-backdrop", { key: 'f67934afd4ddad64623856fb641cb6db846df428', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: 'a23f5cb6cf60c8f717c1dd556bce375829c80a43', class: "modal-shadow" }), hAsync("div", { key: '51eb6cd1070e4b7e49840a78dc7437238c867a01',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
@@ -27936,9 +27782,9 @@ class Modal {
               without the tabindex focus() would be a no-op and screen readers
               may not properly announce the dialog and its content when it opens.
             */
-            role: "dialog", ...inheritedAttributes, "aria-modal": "true", tabIndex: -1, class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }, showHandle && (hAsync("button", { key: 'df84a6806413b13efc5b03c862edde83151579a7', class: "modal-handle",
+            role: "dialog", ...inheritedAttributes, "aria-modal": "true", tabIndex: -1, class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }, showHandle && (hAsync("button", { key: 'f49a144642b5c227c0c2b00b33f4c7e37a2bf088', 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: '072d3929ec6f25481946b184d8ac24219011e783', 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: 'e781c0d5881762c6b61aa432721a38b49580ff64', onSlotchange: this.onSlotChange }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29413,12 +29259,6 @@ class PickerColumn {
         this.isColumnVisible = false;
         this.canExitInputMode = true;
         this.updateValueTextOnScroll = false;
-        this.isUserScroll = false;
-        /**
-         * The haptics for the wheel picker are an iOS-only feature. As a result,
-         * they should be disabled on Android.
-         */
-        this.enableHaptics = false;
         this.ariaLabel = null;
         this.isActive = false;
         /**
@@ -29450,12 +29290,6 @@ class PickerColumn {
                      */
                     this.canExitInputMode = canExitInputMode;
                     this.updateValueTextOnScroll = false;
-                    /**
-                     * This scroll takes over from whatever the user was doing, so an outside
-                     * press must not commit an option the column is only passing through.
-                     */
-                    this.isUserScroll = false;
-                    this.stopWatchingForOutsidePress();
                     scrollEl.scroll({
                         top,
                         left: 0,
@@ -29510,117 +29344,6 @@ class PickerColumn {
             }
             this.isActive = state;
         };
-        this.clearScrollEndTimeout = () => {
-            if (this.scrollEndTimeout) {
-                clearTimeout(this.scrollEndTimeout);
-                this.scrollEndTimeout = undefined;
-            }
-        };
-        /**
-         * Resets the idle timer that commits the centered option.
-         */
-        this.resetScrollEndTimeout = () => {
-            this.clearScrollEndTimeout();
-            this.scrollEndTimeout = setTimeout(this.settle, SCROLL_END_DELAY);
-        };
-        /**
-         * Capture so the column still commits if an application's own pointerdown
-         * handler stops the event before it reaches the document.
-         */
-        this.watchForOutsidePress = () => {
-            doc?.addEventListener('pointerdown', this.onPointerDownOutside, { capture: true });
-        };
-        this.stopWatchingForOutsidePress = () => {
-            doc?.removeEventListener('pointerdown', this.onPointerDownOutside, { capture: true });
-        };
-        /**
-         * Resets everything the current scroll interaction is holding, so nothing
-         * pending on it can commit later.
-         */
-        this.discardScroll = () => {
-            this.stopWatchingForOutsidePress();
-            this.clearScrollEndTimeout();
-            this.scrollEndCallback = undefined;
-            this.centeredOption = undefined;
-            this.haltedAtScrollTop = undefined;
-            this.isScrolling = false;
-            this.isUserScroll = false;
-            this.canExitInputMode = true;
-        };
-        /**
-         * Commits the option that is currently centered under the highlight and ends
-         * the scroll interaction.
-         */
-        this.settle = () => {
-            const { centeredOption } = this;
-            this.clearScrollEndTimeout();
-            this.stopWatchingForOutsidePress();
-            this.isUserScroll = false;
-            this.isScrolling = false;
-            this.updateValueTextOnScroll = true;
-            this.enableHaptics && hapticSelectionEnd();
-            /**
-             * Certain tasks (such as those that
-             * cause re-renders) should only be done
-             * once scrolling has finished, otherwise
-             * flickering may occur.
-             */
-            const { scrollEndCallback } = this;
-            if (scrollEndCallback) {
-                scrollEndCallback();
-                this.scrollEndCallback = undefined;
-            }
-            /**
-             * Reset this flag as the
-             * next scroll interaction could
-             * be a scroll from the user. In this
-             * case, we should exit input mode.
-             */
-            this.canExitInputMode = true;
-            if (centeredOption !== undefined) {
-                // Cleared here so a later scroll that centers nothing cannot fall back on it.
-                this.centeredOption = undefined;
-                if (centeredOption.isConnected) {
-                    this.setValue(centeredOption.value);
-                }
-            }
-        };
-        /**
-         * Commits the option the user can see when they press anything outside of the
-         * column during a scroll they started. This runs on pointerdown rather than
-         * click so the value is up to date by the time an application's own click
-         * handler (a Save button, for example) reads it.
-         */
-        this.onPointerDownOutside = (ev) => {
-            const { centeredOption, parentEl, scrollEl } = this;
-            if (!this.isScrolling) {
-                return;
-            }
-            /**
-             * The column can live in another component's Shadow DOM, where a document
-             * listener sees the target retargeted to the outer host. The composed path
-             * is the only reliable way to tell a press on the column apart.
-             */
-            const path = ev.composedPath();
-            /**
-             * A press anywhere in the parent picker counts as inside, so reaching for a
-             * sibling wheel leaves this column coasting.
-             */
-            if (path.includes(this.el) || (parentEl != null && path.includes(parentEl))) {
-                return;
-            }
-            /**
-             * Landing on the centered option halts the in-flight momentum scroll, so the
-             * committed value and the option the user is left looking at agree. The
-             * option list can be replaced mid-scroll, and a detached option has no
-             * offset to center on.
-             */
-            if (centeredOption !== undefined && centeredOption.isConnected) {
-                this.centerPickerItemInView(centeredOption, false, false);
-                this.haltedAtScrollTop = scrollEl?.scrollTop;
-            }
-            this.settle();
-        };
         /**
          * When the column scrolls, the component
          * needs to determine which item is centered
@@ -29628,42 +29351,27 @@ class PickerColumn {
          * the item object.
          */
         this.initializeScrollListener = () => {
-            this.enableHaptics = isPlatform('ios');
+            /**
+             * The haptics for the wheel picker are
+             * an iOS-only feature. As a result, they should
+             * be disabled on Android.
+             */
+            const enableHaptics = isPlatform('ios');
             const { el, scrollEl } = this;
+            let timeout;
             let activeEl = this.activeItem;
             const scrollCallback = () => {
                 raf(() => {
-                    /**
-                     * This frame cannot be cancelled, and moving the column disconnects it
-                     * without the observer reporting a change, so this checks live state.
-                     */
-                    if (!this.el.isConnected || !this.isColumnVisible || !scrollEl)
+                    if (!scrollEl)
                         return;
-                    const { haltedAtScrollTop } = this;
-                    if (haltedAtScrollTop !== undefined) {
-                        /**
-                         * Still at the halted position, so this frame is the halt landing
-                         * rather than the wheel moving, and re-arming would start a second
-                         * commit cycle.
-                         */
-                        if (Math.abs(scrollEl.scrollTop - haltedAtScrollTop) <= HALT_TOLERANCE)
-                            return;
-                        this.haltedAtScrollTop = undefined;
+                    if (timeout) {
+                        clearTimeout(timeout);
+                        timeout = undefined;
                     }
-                    // Armed before the early returns below, so a scroll never ends uncommitted.
-                    this.resetScrollEndTimeout();
                     if (!this.isScrolling) {
-                        this.enableHaptics && hapticSelectionStart();
+                        enableHaptics && hapticSelectionStart();
                         this.isScrolling = true;
                     }
-                    /**
-                     * Only a user-driven scroll holds an uncommitted selection. Checked every
-                     * frame because the user can take hold of the wheel mid-scroll, and
-                     * re-adding the same listener is a no-op.
-                     */
-                    if (this.isUserScroll) {
-                        this.watchForOutsidePress();
-                    }
                     /**
                      * Select item in the center of the column
                      * which is the month/year that we want to select
@@ -29723,23 +29431,18 @@ class PickerColumn {
                             newActiveElement = fallbackActiveElement;
                         }
                     }
-                    /**
-                     * A scroll can land with no selectable option centered, such as an
-                     * overscroll bounce briefly centering the empty padding rows. Keep the
-                     * current selection until an option is centered again.
-                     */
-                    if (newActiveElement === undefined || newActiveElement.disabled) {
-                        return;
-                    }
                     if (activeEl !== undefined) {
                         this.setPickerItemActiveState(activeEl, false);
                     }
+                    if (newActiveElement === undefined || newActiveElement.disabled) {
+                        return;
+                    }
                     /**
                      * If we are selecting a new value,
                      * we need to run haptics again.
                      */
                     if (newActiveElement !== activeEl) {
-                        this.enableHaptics && hapticSelectionChanged();
+                        enableHaptics && hapticSelectionChanged();
                         if (this.canExitInputMode) {
                             /**
                              * The native iOS wheel picker
@@ -29771,14 +29474,32 @@ class PickerColumn {
                     if (this.updateValueTextOnScroll) {
                         this.assistiveFocusable?.setAttribute('aria-valuetext', this.getOptionValueText(newActiveElement));
                     }
-                    this.centeredOption = newActiveElement;
+                    timeout = setTimeout(() => {
+                        this.isScrolling = false;
+                        this.updateValueTextOnScroll = true;
+                        enableHaptics && hapticSelectionEnd();
+                        /**
+                         * Certain tasks (such as those that
+                         * cause re-renders) should only be done
+                         * once scrolling has finished, otherwise
+                         * flickering may occur.
+                         */
+                        const { scrollEndCallback } = this;
+                        if (scrollEndCallback) {
+                            scrollEndCallback();
+                            this.scrollEndCallback = undefined;
+                        }
+                        /**
+                         * Reset this flag as the
+                         * next scroll interaction could
+                         * be a scroll from the user. In this
+                         * case, we should exit input mode.
+                         */
+                        this.canExitInputMode = true;
+                        this.setValue(newActiveElement.value);
+                    }, 250);
                 });
             };
-            const userScrollCallback = () => {
-                this.isUserScroll = true;
-                // Taking hold of the wheel ends the halt even if it has not moved yet.
-                this.haltedAtScrollTop = undefined;
-            };
             /**
              * Wrap this in an raf so that the scroll callback
              * does not fire when component is initially shown.
@@ -29787,19 +29508,8 @@ class PickerColumn {
                 if (!scrollEl)
                     return;
                 scrollEl.addEventListener('scroll', scrollCallback);
-                scrollEl.addEventListener('pointerdown', userScrollCallback);
-                scrollEl.addEventListener('wheel', userScrollCallback, { passive: true });
-                /**
-                 * A `pointerdown` fires once per touch, so a drag that pauses long enough
-                 * to commit would look like a scroll the column started. A `touchmove`
-                 * keeps arriving while the finger moves.
-                 */
-                scrollEl.addEventListener('touchmove', userScrollCallback, { passive: true });
                 this.destroyScrollListener = () => {
                     scrollEl.removeEventListener('scroll', scrollCallback);
-                    scrollEl.removeEventListener('pointerdown', userScrollCallback);
-                    scrollEl.removeEventListener('wheel', userScrollCallback);
-                    scrollEl.removeEventListener('touchmove', userScrollCallback);
                 };
             });
         };
@@ -29982,14 +29692,6 @@ class PickerColumn {
             }
             else {
                 this.isColumnVisible = false;
-                /**
-                 * The pending timer still runs so it resets the scroll state, but the
-                 * option it would have committed is dropped. A column the user cannot
-                 * see should not change its value.
-                 */
-                this.stopWatchingForOutsidePress();
-                this.centeredOption = undefined;
-                this.haltedAtScrollTop = undefined;
                 if (this.destroyScrollListener) {
                     this.destroyScrollListener();
                     this.destroyScrollListener = undefined;
@@ -30060,13 +29762,6 @@ class PickerColumn {
     connectedCallback() {
         this.ariaLabel = this.el.getAttribute('aria-label') ?? 'Select a value';
     }
-    disconnectedCallback() {
-        /**
-         * A pending settle would otherwise commit a value on a column that is no
-         * longer in the DOM.
-         */
-        this.discardScroll();
-    }
     get activeItem() {
         const { value } = this;
         const options = Array.from(this.el.querySelectorAll('ion-picker-column-option'));
@@ -30084,14 +29779,14 @@ class PickerColumn {
     render() {
         const { color, disabled, isActive, numericInput } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '60a893619d0b01fba53fbccef67a10d533a22657', class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '78b46ad10d88ea1bb43ca8c36748767912f03224', class: createColorClasses$1(color, {
                 [mode]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
                 ['picker-column-disabled']: disabled,
-            }) }, hAsync("slot", { key: '79f1e047f89c5ec916ed02efaac56ef3f73b8969', name: "prefix" }), hAsync("div", { key: 'c45c86e88353a196ff38159f40f390bc27852c9e', class: "picker-opts", ref: (el) => {
+            }) }, hAsync("slot", { key: '761e501df77f7de896ffb3ebb99ebf88c5c3bf70', name: "prefix" }), hAsync("div", { key: '9f4caaeef8ab704522a85f30876d371712f47c5c', class: "picker-opts", ref: (el) => {
                 this.scrollEl = el;
-            }, role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": this.getOptionValueText(this.activeItem), "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }, hAsync("div", { key: 'e02d76752f5d3dd4cd2846fbc28645f1508a4b49', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: 'd577bcbadc530970b2781692b050811633625c5a', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: 'c89e78c3a896bc1f55b922d01df16fdbb1259bdd', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("slot", { key: '6c597ff899692597432ee2aa0b42de53b86deed4' }), hAsync("div", { key: '91686ed94f14c47647836ed4d63e54b5c54ee3b9', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '2ff058c6d0e8cef4e143c2d848f9a52684579af1', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: 'bc7386bec6fced36e44084a7a137b3fe6506c996', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), hAsync("slot", { key: '8835fd3f4e025bce964e6f05984c9aaadc20d7fb', name: "suffix" })));
+            }, role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": this.getOptionValueText(this.activeItem), "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }, hAsync("div", { key: '9d3533436aba6c61c93f65f84a077fba832194a0', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '3f18d3a47361f06f55321b65fdf5742a61722b26', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: 'eac0d20ab8c533ef829875e323e93e1ee2067d6d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("slot", { key: '92e25989ef41cf6f910c73238e1a0a5ac03f1c1f' }), hAsync("div", { key: '33a84644ebdc84108b44a8e3a129b54e824939c8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '128ad61a3a68c7ff2d2e44a6e968424fcc608a15', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '6e4d59a4f75befcbbf47279a263f28a69b12dbbd', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), hAsync("slot", { key: '3c6621b64438792a3024c90e3d9916a0a3614506', name: "suffix" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -30123,19 +29818,6 @@ class PickerColumn {
     }; }
 }
 const PICKER_ITEM_ACTIVE_CLASS = 'option-active';
-/**
- * How long the column must be idle before the centered option is treated as
- * the user's selection. Replaceable by the `scrollend` event once that is
- * supported everywhere (https://caniuse.com/?search=scrollend).
- */
-const SCROLL_END_DELAY = 250;
-/**
- * How far, in pixels, the column may report from where it was halted and still
- * count as having stayed there. Centering targets a position between two snap
- * points, so mandatory snapping corrects it by half the column height less
- * three option heights: 2px at the default sizes.
- */
-const HALT_TOLERANCE = 2;
 
 const pickerColumnOptionIosCss = () => `.picker-column-option-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) .picker-column-option-button{cursor:default}`;
 
@@ -31538,13 +31220,6 @@ class Popover {
         const { configureTriggerInteraction, el } = this;
         prepareOverlay(el);
         configureTriggerInteraction();
-        // Re-apply the root lock if moved without dismiss() being called
-        if (this.presented) {
-            restoreRootFocusTrapAccessibility(el);
-            // The disconnect tore down the header observer, and `present()` is its
-            // only other caller, so a move mid-layout would lose the recalculation.
-            this.recalculateContentOnHeaderReady();
-        }
     }
     disconnectedCallback() {
         const { destroyTriggerInteraction } = this;
@@ -31722,12 +31397,6 @@ class Popover {
         if (!header || contentElements.length === 0) {
             return;
         }
-        // Both `present()` and a reconnect call this, so drop any existing
-        // observer. Below the guards, so a call that bails cannot leave none.
-        if (this.headerResizeObserver) {
-            this.headerResizeObserver.disconnect();
-            this.headerResizeObserver = undefined;
-        }
         this.headerResizeObserver = new ResizeObserver(async () => {
             if (header.offsetHeight > 0) {
                 this.headerResizeObserver?.disconnect();
@@ -31800,7 +31469,7 @@ class Popover {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (hAsync(Host, { key: 'b5e9c788f58397203976d5f8302dfb89e916efe1', "aria-modal": "true", "no-router": true, tabindex: "-1", ...htmlAttributes, style: {
+        return (hAsync(Host, { key: '52ffc7116969ae1b8b927e67f2acbfe5f5434f70', "aria-modal": "true", "no-router": true, tabindex: "-1", ...htmlAttributes, style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: {
                 ...getClassMap(this.cssClass),
@@ -31811,7 +31480,7 @@ class Popover {
                 [`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: 'f3977833c5b2c0087c286ee54363b478d69eb115', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: '1059893d6fd2932ca8adcdf8d45a5d66f4794727', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '24d7988bdd95882ad77fcaa7112aeda55878bee4', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '4d6992e0a9d629f11763045f9199f9a77fa521ab', class: "popover-content", part: "content" }, hAsync("slot", { key: 'b29747419620a01a6c34e9e846cd529b0b210145' })))));
+            }, onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }, !parentPopover && hAsync("ion-backdrop", { key: '79a8e851dbd22119e21ffb2f4709c555251045c8', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: 'c46c9f62c3ef3f902e23f27404eaa446a5d8cf88', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '9fdcbbc4ea6c7bde74f646d48eb77296b2c9dd83', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '138e56bb83462ebb0908edb522b45ecf94b82aeb', class: "popover-content", part: "content" }, hAsync("slot", { key: 'daeefcf002e8d89e91d6e0faf7f63f75b68a2dbe' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -37606,6 +37275,11 @@ class SegmentButton {
             addEventListener$1(segmentEl, 'ionSelect', this.updateState);
             addEventListener$1(segmentEl, 'ionStyle', this.updateStyle);
         }
+        // Prevent buttons from being disabled when associated with segment content
+        if (this.contentId && this.disabled) {
+            printIonWarning(`[ion-segment-button] - Segment buttons cannot be disabled when associated with an <ion-segment-content>.`);
+            this.disabled = false;
+        }
     }
     disconnectedCallback() {
         const segmentEl = this.segmentEl;
@@ -37622,15 +37296,6 @@ class SegmentButton {
         // Return if there is no contentId defined
         if (!this.contentId)
             return;
-        /**
-         * Checked here rather than in `connectedCallback` so frameworks that assign element
-         * props after inserting the element have set `disabled` by now. A disabled ion-segment
-         * pushes that onto its buttons too, which this guard should not undo.
-         */
-        if (this.disabled && this.segmentEl?.disabled !== true) {
-            printIonWarning(`[ion-segment-button] - Segment buttons cannot be disabled when associated with an <ion-segment-content>.`);
-            this.disabled = false;
-        }
         // Attempt to find the Segment Content by its contentId
         const segmentContent = document.getElementById(this.contentId);
         // If no associated Segment Content exists, log an error and return
@@ -37665,7 +37330,7 @@ class SegmentButton {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const mode = getIonMode$1(this);
         const hasSegmentColor = () => segmentEl?.color !== undefined;
-        return (hAsync(Host, { key: 'd8acc71d87e26b32f20b2d0f9a6acc9f0dab0dee', class: {
+        return (hAsync(Host, { key: '2b4b7ad8b981d2ee39aba5b9c734de8a5bd045ba', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -37681,7 +37346,7 @@ class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, hAsync("button", { key: 'ce65da07b1a012bce353b3c6c24eecfbd4071d54', "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: '6c4b4dcd20e407e5dc31674bea23633d8a09187a', class: "button-inner" }, hAsync("slot", { key: '817145ae77a3c5ada88ab95723d881f1bde96b2a' })), mode === 'md' && hAsync("ion-ripple-effect", { key: '054d7e5e2a13013914fac6bbde8efdb28d9b459e' })), hAsync("div", { key: 'c48074881a302510ad4752eeb9383222cd3a54cb', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, hAsync("div", { key: '7672a6b10ee18ad026b798fbd8207dc3cd5683f9', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, hAsync("button", { key: '9cc58cfbe70844a0f5e1a307002e0d04e044be99', "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: '6443551951ce589efdb2d0e1fd1a14e35b82ed19', class: "button-inner" }, hAsync("slot", { key: 'c3548b469ae6e5477d8372cb28bc70dff3a24d18' })), mode === 'md' && hAsync("ion-ripple-effect", { key: 'fb176415ca1702766c4d7a5964ec0bb467bdcb55' })), hAsync("div", { key: 'aa22b4752f8336d0e232a1e0894e87023b284a08', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, hAsync("div", { key: '61e29ea52048fa0583fce6c20c81614a4d0199cb', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -38725,7 +38390,7 @@ class Select {
         const hasOutlineFill = mode === 'md' && fill === 'outline';
         renderHiddenInput(true, el, name, parseValue(value), disabled);
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || isExpanded));
-        return (hAsync(Host, { key: 'b2f161e3706e139e61440cd13e162714b1b75d72', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '5d1e5bf46d0f204efdcb55cc42cfde52e6db304b', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -38743,7 +38408,7 @@ class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, hAsync("label", { key: '944a2eb468154a21260d181fdaf67828a71eb902', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, hasOutlineFill && this.renderOutlineContainer(), hAsync("div", { key: '927200c53548b1bb4f52d6a167605b724a7b7d0d', class: "select-start", part: "start", ref: (el) => (this.startContainerEl = el) }, hAsync("slot", { key: '6e14b95e9b95c116b16744d630600e90977782bc', name: "start" })), hAsync("div", { key: '8451ed4300ac005963075be36a04ea8763bc0fdd', class: "select-control", part: "control" }, this.renderLabel(), hAsync("div", { key: '207e7b63f3224a4870579365ac992da6784fb31f', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox(), !hasFloatingOrStackedLabel && this.renderSelectIcon())), hAsync("div", { key: '5c17367d488db4d570f31b25e33560efa9011500', class: "select-end", part: "end" }, hasFloatingOrStackedLabel && this.renderSelectIcon(), hAsync("slot", { key: '21fd8c0d9bee8cffef9ef6984cacd31e8f38211c', name: "end" })), shouldRenderHighlight && hAsync("div", { key: '1fff767db9a1ec07b274ef65ff7ae8fb976e6ad2', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, hAsync("label", { key: '15fd1f8e06510ae8472c621cf8cf90e51172e0be', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, hasOutlineFill && this.renderOutlineContainer(), hAsync("div", { key: '7964e3d9351671899793b117896acdda25ec24c4', class: "select-start", part: "start", ref: (el) => (this.startContainerEl = el) }, hAsync("slot", { key: 'aa309ef155c4025acfd7ed5739b5221c85097b36', name: "start" })), hAsync("div", { key: '23d5a9dfea64a9d81b0b36d9426b15bed98901b9', class: "select-control", part: "control" }, this.renderLabel(), hAsync("div", { key: '810da9fbfa8771e09b5fb768d64e5f04858b5833', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox(), !hasFloatingOrStackedLabel && this.renderSelectIcon())), hAsync("div", { key: 'bf1c04704326ecfa14cf2e49bb76d3fb45beb08d', class: "select-end", part: "end" }, hasFloatingOrStackedLabel && this.renderSelectIcon(), hAsync("slot", { key: '76a8bcaeefdcaa908aebd820d93171b08165cee3', name: "end" })), shouldRenderHighlight && hAsync("div", { key: '55a9c417a82323a44e16328fd62a634d9d7c558b', class: "select-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -38852,14 +38517,29 @@ const textForValue = (opts, value, compareWith, useHTML = false) => {
         return getOptionContent(selectOpt, undefined, true);
     }
     /**
-     * Every text-only context reads only the default slot, so the start
-     * and end slots stay out of the `aria-label` and the overlay labels.
-     * Both config paths derive that text through the same helper, so they
-     * cannot disagree about what an option's text is. `null` marks an
-     * option with no text, which is dropped from the joined text of a
-     * `multiple` select rather than joined in as an empty entry.
+     * When custom HTML is enabled, extract only the default slot content.
+     * This ensures aria-label and other text-only contexts read only
+     * the relevant option text.
      */
-    return getDefaultSlotPlainText(selectOpt) || null;
+    if (customHTMLEnabled) {
+        const content = getOptionContent(selectOpt);
+        if (typeof content === 'string') {
+            return content;
+        }
+        /**
+         * Elements were found in the default slot, extract and concatenate
+         * their text content while trimming whitespace.
+         */
+        if (content) {
+            const texts = Array.from(content.childNodes)
+                .map((n) => n.textContent?.trim())
+                .filter((t) => t);
+            return texts.join(' ') || null;
+        }
+        // Empty option
+        return null;
+    }
+    return getDefaultSlotPlainText(selectOpt);
 };
 /**
  * Trims whitespace from all text nodes within a DOM tree.
@@ -38915,13 +38595,9 @@ const getOptionContent = (option, slotName, useHTML = false) => {
     if (nodes.length === 0) {
         return null;
     }
-    /**
-     * Return plain text if no elements are found. This reads the option the
-     * same way the non-custom-HTML path does, so the two do not disagree
-     * about what an option's text is.
-     */
+    // Return plain text if no elements are found
     if (!slotName && nodes.every((n) => n.nodeType === Node.TEXT_NODE)) {
-        return getDefaultSlotPlainText(option) || null;
+        return nodes.map((n) => n.textContent?.trim()).join(' ') || null;
     }
     /**
      * Mirror known custom-element properties (e.g. ion-icon's `icon`)
@@ -38977,43 +38653,22 @@ const getOptionDefaultSlot = (option) => {
     }
     return defaultSlotNodes;
 };
-/**
- * Concatenates the text a node renders, skipping the subtrees of tags
- * whose contents the browser never paints (`script`, `style`, and the
- * rest of `blockedTags`). `textContent` includes those, so reading it
- * directly would put stylesheet or script source into the select text
- * and the `aria-label`.
- *
- * @param node - The node to read text from.
- * @returns The node's rendered text.
- */
-const getRenderedTextContent = (node) => {
-    if (node.nodeType === Node.TEXT_NODE) {
-        return node.textContent ?? '';
-    }
-    if (node.nodeType !== Node.ELEMENT_NODE) {
-        return '';
-    }
-    if (blockedTags.includes(node.tagName.toLowerCase())) {
-        return '';
-    }
-    return Array.from(node.childNodes)
-        .map((child) => getRenderedTextContent(child))
-        .join('');
-};
 /**
  * Extracts plain text from only the default slot of an option,
- * excluding content assigned to named slots (start/end). Text is
- * concatenated with no separator and collapsible whitespace is
- * collapsed, approximating how the browser renders the option.
- * NBSP is not collapsible, so it is preserved.
- *
- * @param option - The `ion-select-option` element to read text from.
- * @returns The option's default slot text.
+ * excluding content assigned to named slots (start/end).
  */
 const getDefaultSlotPlainText = (option) => {
-    const text = (getOptionDefaultSlot(option) ?? []).map((node) => getRenderedTextContent(node)).join('');
-    return text.replace(/[ \t\n\r\f]+/g, ' ').replace(/^[ \t\n\r\f]+|[ \t\n\r\f]+$/g, '');
+    const texts = Array.from(option.childNodes)
+        .filter((node) => {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            return !node.hasAttribute('slot');
+        }
+        return node.nodeType === Node.TEXT_NODE;
+    })
+        .filter((node) => node.nodeType === Node.TEXT_NODE)
+        .map((n) => n.textContent?.trim())
+        .filter((t) => t);
+    return texts.join(' ');
 };
 /**
  * Extracts the rich content from an `ion-select-option`.
@@ -43089,7 +42744,7 @@ var NAMESPACE = (
 );
 
 /*
- Stencil Hydrate Runner v4.44.1 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Runner v4.43.5 | MIT Licensed | https://stenciljs.com
  */
 var __create = Object.create;
 var __defProp = Object.defineProperty;