@ionic/core 8.8.20-dev.11787158518.168a2fea → 8.8.20-dev.11788449221.155f9f1e

package/dist/cjs/{overlays-KaNVDNqC.js → overlays-Bxjqh2m3.js}

@@ -3,13 +3,11 @@
  */
 'use strict';
 
-var index$1 = require('./index-DkNv4J_i.js');
-var helpers = require('./helpers-YPQybDph.js');
-var hardwareBackButton = require('./hardware-back-button-fqpYh-kd.js');
-var index = require('./index-uvry__L4.js');
-var ionicGlobal = require('./ionic-global-k6hOWWpn.js');
-var frameworkDelegate = require('./framework-delegate-Dfo5XsGv.js');
-var gestureController = require('./gesture-controller-BDUH7687.js');
+var ionicGlobal = require('./ionic-global-DYLhJaw7.js');
+var helpers = require('./helpers-Dhimwhpn.js');
+var index = require('./index-C1knGA9x.js');
+var frameworkDelegate = require('./framework-delegate-IvkF1VuM.js');
+var gestureController = require('./gesture-controller-dtqlP_q4.js');
 
 /**
  * This query string selects elements that
@@ -23,7 +21,7 @@ var gestureController = require('./gesture-controller-BDUH7687.js');
  * Note: We need this distinction because `disabled="false"` is
  * valid usage for the disabled property on ion-button.
  */
-const focusableQueryString = '[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-checkbox:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-radio:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])';
+const focusableQueryString = '[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-checkbox:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-radio:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])';
 /**
  * Focuses the first descendant in a context
  * that can receive focus. If none exists,
@@ -36,7 +34,7 @@ const focusableQueryString = '[tabindex]:not([tabindex^="-"]):not([hidden]):not(
  */
 const focusFirstDescendant = (ref, fallbackElement) => {
     const firstInput = ref.querySelector(focusableQueryString);
-    focusElementInContext(firstInput, fallbackElement ?? ref);
+    focusElementInContext(firstInput, fallbackElement !== null && fallbackElement !== void 0 ? fallbackElement : ref);
 };
 /**
  * Focuses the last descendant in a context
@@ -51,7 +49,7 @@ const focusFirstDescendant = (ref, fallbackElement) => {
 const focusLastDescendant = (ref, fallbackElement) => {
     const inputs = Array.from(ref.querySelectorAll(focusableQueryString));
     const lastInput = inputs.length > 0 ? inputs[inputs.length - 1] : null;
-    focusElementInContext(lastInput, fallbackElement ?? ref);
+    focusElementInContext(lastInput, fallbackElement !== null && fallbackElement !== void 0 ? fallbackElement : ref);
 };
 /**
  * Focuses a particular element in a context. If the element
@@ -72,10 +70,21 @@ const focusLastDescendant = (ref, fallbackElement) => {
  */
 const focusElementInContext = (hostToFocus, fallbackElement) => {
     let elementToFocus = hostToFocus;
-    const shadowRoot = hostToFocus?.shadowRoot;
+    const shadowRoot = hostToFocus === null || hostToFocus === void 0 ? void 0 : hostToFocus.shadowRoot;
     if (shadowRoot) {
         // If there are no inner focusable elements, just focus the host element.
-        elementToFocus = shadowRoot.querySelector(focusableQueryString) || hostToFocus;
+        const innerFocusable = shadowRoot.querySelector(focusableQueryString);
+        // If the host has a setFocus() method, use it to delegate focus properly.
+        // This is needed for shadow DOM components like ion-textarea that override
+        // focus() to delegate to their inner native elements.
+        const hasSetFocus = typeof hostToFocus.setFocus === 'function';
+        if (innerFocusable && hasSetFocus) {
+            // Keep the host element so we can call setFocus() on it
+            elementToFocus = hostToFocus;
+        }
+        else {
+            elementToFocus = innerFocusable || hostToFocus;
+        }
     }
     if (elementToFocus) {
         const radioGroup = elementToFocus.closest('ion-radio-group');
@@ -95,12 +104,120 @@ const focusElementInContext = (hostToFocus, fallbackElement) => {
 let lastOverlayIndex = 0;
 let lastId = 0;
 const activeAnimations = new WeakMap();
+const OVERLAY_FOCUS_TRAP_SELECTOR = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover';
+/**
+ * The focus trap is generic and knows nothing about which components are
+ * inside an overlay. Components mark their elements with these `data-*`
+ * attributes, which the trap reads, to control how Tab moves through them.
+ * This keeps private component class names (e.g. `.modal-handle`,
+ * `.action-sheet-button`) out of the trap, so changing a component does
+ *  not silently break Tab order.
+ *
+ * - `data-focus-ignore`: skip this element as a tab stop.
+ * - `data-focus-order`: explicit numeric placement in the tab sequence.
+ * - `data-roving-focus`: a container whose focusable descendants share a
+ *   single tab stop via a roving tabindex.
+ */
+const FOCUS_IGNORE_SELECTOR = '[data-focus-ignore]';
+const FOCUS_ORDER_SELECTOR = '[data-focus-order]';
+const ROVING_FOCUS_SELECTOR = '[data-roving-focus]';
+/**
+ * Returns the roving-focus group an element belongs to, or `null`.
+ * A member is a descendant of a `[data-roving-focus]` container. The
+ * container itself is not a member. Members share a single tab stop.
+ */
+const getRovingFocusGroup = (el) => {
+    const group = el.closest(ROVING_FOCUS_SELECTOR);
+    return group !== null && group !== el ? group : null;
+};
+/**
+ * Whether an element participates in a roving-focus group.
+ */
+const isRovingFocusItem = (el) => getRovingFocusGroup(el) !== null;
 /**
- * Determines if the overlay's backdrop is always blocking (no background interaction).
+ * Returns the currently focused element for keyboard focus checks.
+ *
+ * Starts from `document.activeElement` (non-shadow / light DOM focus).
+ * If focus is inside one or more open shadow roots
+ * (e.g. native control inside `ion-radio`), walks through nested
+ * `shadowRoot.activeElement` values until the innermost focused node is reached.
+ */
+const getActiveElement = (ownerDoc) => {
+    var _a;
+    let active = ownerDoc.activeElement;
+    if (!active) {
+        return null;
+    }
+    while ((_a = active.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) {
+        active = active.shadowRoot.activeElement;
+    }
+    return active;
+};
+/**
+ * Walks from a focused node (possibly deep inside shadow roots) up to
+ * the nearest roving-focus host (e.g. `ion-radio` inside an
+ * `ion-radio-group`, or an action sheet `<button role="radio">`).
+ */
+const getRovingFocusHost = (active) => {
+    let n = active;
+    while (n) {
+        if (isRovingFocusItem(n)) {
+            return n;
+        }
+        const root = n.getRootNode();
+        if (root instanceof ShadowRoot && root.host instanceof HTMLElement) {
+            n = root.host;
+        }
+        else {
+            return null;
+        }
+    }
+    return null;
+};
+/**
+ * Reorders focusables for components that declare an explicit tab order
+ * via `data-focus-order`. Elements without the attribute keep their
+ * visual order and are visited first. Elements with it are appended
+ * afterwards, sorted by ascending numeric value.
+ *
+ * Example (sheet modal): the options have no order and are visited
+ * first in visual order, then the drag handle (`data-focus-order="1"`),
+ * then the header Cancel button (`data-focus-order="2"`).
+ */
+const applyFocusOrder = (elements) => {
+    const sortByVisualPosition = (els) => [...els].sort((a, b) => {
+        const ra = a.getBoundingClientRect();
+        const rb = b.getBoundingClientRect();
+        const topDiff = ra.top - rb.top;
+        if (Math.abs(topDiff) > 1) {
+            return topDiff;
+        }
+        return ra.left - rb.left;
+    });
+    const unordered = elements.filter((el) => !el.matches(FOCUS_ORDER_SELECTOR));
+    const ordered = elements
+        .filter((el) => el.matches(FOCUS_ORDER_SELECTOR))
+        .sort((a, b) => Number(a.getAttribute('data-focus-order')) - Number(b.getAttribute('data-focus-order')));
+    return [...sortByVisualPosition(unordered), ...ordered];
+};
+/**
+ * Roving-focus members use a tabindex pattern where only one member is
+ * tabbable (`tabIndex="0"`) while the others are not (`tabIndex="-1"`).
+ * This returns the index of the current tabbable member.
+ */
+const getTabbableRovingFocusIndex = (elements, overlay) => {
+    return elements.findIndex((el) => {
+        return overlay.contains(el) && isRovingFocusItem(el) && el.tabIndex >= 0;
+    });
+};
+/**
+ * Determines if the overlay's backdrop is always blocking
+ * (no background interaction).
  * Returns false if showBackdrop=false or backdropBreakpoint > 0.
  */
 const isBackdropAlwaysBlocking = (el) => {
-    return el.showBackdrop !== false && !((el.backdropBreakpoint ?? 0) > 0);
+    var _a;
+    return el.showBackdrop !== false && !(((_a = el.backdropBreakpoint) !== null && _a !== void 0 ? _a : 0) > 0);
 };
 const createController = (tagName) => {
     return {
@@ -119,6 +236,10 @@ const alertController = /*@__PURE__*/ createController('ion-alert');
 const actionSheetController = /*@__PURE__*/ createController('ion-action-sheet');
 const loadingController = /*@__PURE__*/ createController('ion-loading');
 const modalController = /*@__PURE__*/ createController('ion-modal');
+/**
+ * @deprecated Use the inline ion-picker component instead.
+ */
+const pickerController = /*@__PURE__*/ createController('ion-picker-legacy');
 const popoverController = /*@__PURE__*/ createController('ion-popover');
 const toastController = /*@__PURE__*/ createController('ion-toast');
 /**
@@ -158,6 +279,7 @@ const setOverlayId = (el) => {
     return el.id;
 };
 const createOverlay = (tagName, opts) => {
+    // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
     if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined') {
         return window.customElements.whenDefined(tagName).then(() => {
             const element = document.createElement(tagName);
@@ -166,7 +288,7 @@ const createOverlay = (tagName, opts) => {
              * Convert the passed in overlay options into props
              * that get passed down into the new overlay.
              */
-            Object.assign(element, { ...opts, hasController: true });
+            Object.assign(element, Object.assign(Object.assign({}, opts), { hasController: true }));
             // append the overlay element to the document body
             getAppRoot(document).appendChild(element);
             return new Promise((resolve) => helpers.componentOnReady(element, resolve));
@@ -190,7 +312,7 @@ const isOverlayHidden = (overlay) => overlay.classList.contains('overlay-hidden'
  */
 const focusElementInOverlay = (hostToFocus, overlay) => {
     let elementToFocus = hostToFocus;
-    const shadowRoot = hostToFocus?.shadowRoot;
+    const shadowRoot = hostToFocus === null || hostToFocus === void 0 ? void 0 : hostToFocus.shadowRoot;
     if (shadowRoot) {
         // If there are no inner focusable elements, just focus the host element.
         elementToFocus = shadowRoot.querySelector(focusableQueryString) || hostToFocus;
@@ -211,7 +333,7 @@ const focusElementInOverlay = (hostToFocus, overlay) => {
  * Should NOT include: Toast
  */
 const trapKeyboardFocus = (ev, doc) => {
-    const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-popover');
+    const lastOverlay = getPresentedOverlay(doc, OVERLAY_FOCUS_TRAP_SELECTOR);
     const target = ev.target;
     /**
      * If no active overlay, ignore this event.
@@ -394,11 +516,181 @@ const connectListeners = (doc) => {
         doc.addEventListener('focus', (ev) => {
             trapKeyboardFocus(ev, doc);
         }, true);
+        /**
+         * Remember which roving-focus member last received focus
+         * (arrows, click, or Tab). A roving group keeps `tabIndex=0` on a
+         * single member (e.g. the checked/first radio), so the Tab trap
+         * uses this when wrapping back into the group or focusing its slot.
+         */
+        doc.addEventListener('focusin', (ev) => {
+            const lastOverlay = getPresentedOverlay(doc, OVERLAY_FOCUS_TRAP_SELECTOR);
+            if (!lastOverlay || lastOverlay.classList.contains(FOCUS_TRAP_DISABLE_CLASS)) {
+                return;
+            }
+            const target = ev.target;
+            if (!(target instanceof HTMLElement)) {
+                return;
+            }
+            const rovingHost = getRovingFocusHost(target);
+            if (rovingHost && lastOverlay.contains(rovingHost)) {
+                lastOverlay.trapLastRovingFocus = rovingHost;
+            }
+        }, true);
+        // Listen for keydown events to intercept Tab navigation.
+        // This is needed for Safari and Firefox which may skip focusable
+        // elements or allow focus to escape the overlay.
+        // It also ensures proper focus delegation for shadow DOM elements
+        // like ion-textarea.
+        doc.addEventListener('keydown', (ev) => {
+            var _a, _b, _c;
+            if (ev.key !== 'Tab' && ev.key !== 'Alt+Tab')
+                return;
+            const lastOverlay = getPresentedOverlay(doc, OVERLAY_FOCUS_TRAP_SELECTOR);
+            if (!lastOverlay || lastOverlay.classList.contains(FOCUS_TRAP_DISABLE_CLASS))
+                return;
+            const activeElement = getActiveElement(doc);
+            if (activeElement === lastOverlay) {
+                ev.preventDefault();
+                focusFirstDescendant(lastOverlay);
+                return;
+            }
+            // Check if activeElement is inside the overlay (including shadow DOM)
+            const isInsideOverlay = activeElement
+                ? lastOverlay.contains(activeElement) ||
+                    (activeElement.getRootNode() instanceof ShadowRoot &&
+                        lastOverlay.contains(activeElement.getRootNode().host)) ||
+                    ((_b = (_a = lastOverlay.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(activeElement)) !== null && _b !== void 0 ? _b : false)
+                : false;
+            if (!isInsideOverlay)
+                return;
+            // Get all focusable elements from both light and shadow DOM
+            let allFocusable = [
+                ...lastOverlay.querySelectorAll(focusableQueryString),
+                ...(((_c = lastOverlay.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll(focusableQueryString)) || []),
+            ];
+            /**
+             * Some elements match `focusableQueryString` but are not
+             * intended tab stops (e.g. the `ion-item` wrappers a select
+             * modal renders around its options). Components opt these out
+             * with `data-focus-ignore` so Tab can move between the real
+             * controls.
+             */
+            allFocusable = allFocusable.filter((el) => !el.matches(FOCUS_IGNORE_SELECTOR));
+            /**
+             * A roving-focus group is a single tab stop: only its currently
+             * tabbable member (`tabIndex >= 0`) participates. Other
+             * focusables inside the group are not independent tab stops —
+             * this includes inactive members and focusable wrappers such as
+             * the `ion-item` that carries `ion-focusable` on behalf of a
+             * radio. Drop them so Tab moves between the group and the
+             * surrounding controls (e.g. the handle), not into the wrappers.
+             */
+            allFocusable = allFocusable.filter((el) => !isRovingFocusItem(el) || el.tabIndex >= 0);
+            /**
+             * When a component declares an explicit tab order via
+             * `data-focus-order` (e.g. a sheet modal's handle and Cancel
+             * button), reorder accordingly. Overlays that declare no order
+             * keep their DOM order.
+             */
+            if (allFocusable.some((el) => el.matches(FOCUS_ORDER_SELECTOR))) {
+                allFocusable = applyFocusOrder(allFocusable);
+            }
+            if (allFocusable.length === 0) {
+                ev.preventDefault();
+                return;
+            }
+            // Find current element's index (accounting for shadow DOM)
+            let currentIndex = activeElement
+                ? allFocusable.findIndex((el) => {
+                    var _a;
+                    if (el === activeElement)
+                        return true;
+                    if ((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(activeElement))
+                        return true;
+                    const rootNode = activeElement.getRootNode();
+                    return rootNode instanceof ShadowRoot && rootNode.host === el;
+                })
+                : -1;
+            /**
+             * A roving-focus group keeps `tabIndex=0` on a single member
+             * while the others are `-1`. Arrow keys can move focus onto a
+             * `tabIndex=-1` member, which `focusableQueryString` excludes,
+             * so `findIndex` yields -1 and Tab would wrap to
+             * `allFocusable[0]`. Treat focus on any group member as the
+             * group's tabbable slot so Tab goes to the next control (e.g.
+             * handle → Cancel), not back to the first member.
+             */
+            if (currentIndex < 0 && activeElement) {
+                const rovingHost = getRovingFocusHost(activeElement);
+                if (rovingHost && lastOverlay.contains(rovingHost)) {
+                    const directIndex = allFocusable.indexOf(rovingHost);
+                    if (directIndex >= 0) {
+                        currentIndex = directIndex;
+                    }
+                    else {
+                        const tabbableIndex = getTabbableRovingFocusIndex(allFocusable, lastOverlay);
+                        if (tabbableIndex >= 0) {
+                            currentIndex = tabbableIndex;
+                        }
+                    }
+                }
+            }
+            ev.preventDefault();
+            // Helper to focus an element, handling shadow DOM properly
+            const focusElement = (element) => {
+                const shadowRoot = element.shadowRoot;
+                if (shadowRoot) {
+                    const innerFocusable = shadowRoot.querySelector(focusableQueryString);
+                    if (innerFocusable && typeof element.setFocus !== 'function') {
+                        helpers.focusVisibleElement(innerFocusable);
+                        return;
+                    }
+                }
+                helpers.focusVisibleElement(element);
+            };
+            let nextIndex;
+            if (ev.shiftKey) {
+                // Shift+Tab: previous element, wrap to last if at first
+                if (currentIndex <= 0) {
+                    nextIndex = allFocusable.length - 1;
+                }
+                else {
+                    nextIndex = currentIndex - 1;
+                }
+            }
+            else {
+                // Tab: next element, wrap to first if at last
+                if (currentIndex < 0 || currentIndex >= allFocusable.length - 1) {
+                    nextIndex = 0;
+                }
+                else {
+                    nextIndex = currentIndex + 1;
+                }
+            }
+            const nextEl = allFocusable[nextIndex];
+            const overlayTrap = lastOverlay;
+            const tabbableRovingIndex = getTabbableRovingFocusIndex(allFocusable, lastOverlay);
+            /**
+             * The trap list only includes one tabbable member of a roving
+             * group (`tabIndex >= 0`), usually the checked/first radio.
+             * `focusin` tracks the real last-focused member. Use it whenever
+             * Tab would focus that slot (wrap from Cancel, Shift+Tab from
+             * handle, etc.).
+             */
+            let focusTarget = nextEl;
+            if (tabbableRovingIndex >= 0 && nextIndex === tabbableRovingIndex) {
+                const saved = overlayTrap.trapLastRovingFocus;
+                if ((saved === null || saved === void 0 ? void 0 : saved.isConnected) && lastOverlay.contains(saved) && saved !== nextEl) {
+                    focusTarget = saved;
+                }
+            }
+            focusElement(focusTarget);
+        }, true);
         // handle back-button click
         doc.addEventListener('ionBackButton', (ev) => {
             const lastOverlay = getPresentedOverlay(doc);
-            if (lastOverlay?.backdropDismiss) {
-                ev.detail.register(hardwareBackButton.OVERLAY_BACK_BUTTON_PRIORITY, () => {
+            if (lastOverlay === null || lastOverlay === void 0 ? void 0 : lastOverlay.backdropDismiss) {
+                ev.detail.register(ionicGlobal.OVERLAY_BACK_BUTTON_PRIORITY, () => {
                     /**
                      * Do not return this promise otherwise
                      * the hardware back button utility will
@@ -421,11 +713,11 @@ const connectListeners = (doc) => {
          * this behavior will be handled via the ionBackButton
          * event.
          */
-        if (!hardwareBackButton.shouldUseCloseWatcher()) {
+        if (!ionicGlobal.shouldUseCloseWatcher()) {
             doc.addEventListener('keydown', (ev) => {
                 if (ev.key === 'Escape') {
                     const lastOverlay = getPresentedOverlay(doc);
-                    if (lastOverlay?.backdropDismiss) {
+                    if (lastOverlay === null || lastOverlay === void 0 ? void 0 : lastOverlay.backdropDismiss) {
                         lastOverlay.dismiss(undefined, BACKDROP);
                     }
                 }
@@ -445,7 +737,7 @@ const dismissOverlay = (doc, data, role, overlayTag, id) => {
  */
 const getOverlays = (doc, selector) => {
     if (selector === undefined) {
-        selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-popover,ion-toast';
+        selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover,ion-toast';
     }
     return Array.from(doc.querySelectorAll(selector)).filter((c) => c.overlayIndex > 0);
 };
@@ -507,30 +799,8 @@ const setRootAriaHidden = (hidden = false) => {
         viewContainer.removeAttribute('aria-hidden');
     }
 };
-/**
- * Cleans up root `aria-hidden` and `backdrop-no-scroll` when
- * an overlay is removed from the DOM without going through
- * the `dismiss()` flow (e.g., when a framework unmounts the
- * overlay during a route change).
- *
- * Should be called from an overlay's `disconnectedCallback`
- * when the overlay was still presented at the time of removal.
- */
-const cleanupRootFocusTrapAccessibility = () => {
-    if (typeof document === 'undefined') {
-        return;
-    }
-    const remainingOverlays = getPresentedOverlays(document);
-    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(gestureController.BACKDROP_NO_SCROLL);
-    }
-};
-const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
+const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, ionicEnterAnimation, opts) => {
+    var _a, _b;
     if (overlay.presented) {
         return;
     }
@@ -576,16 +846,20 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
         }
         document.body.classList.add(gestureController.BACKDROP_NO_SCROLL);
     }
-    overlay.willPresentShorthand?.emit();
+    (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
+    const theme = ionicGlobal.getIonTheme(overlay);
     const mode = ionicGlobal.getIonMode(overlay);
+    const selectedAnimation = mode === 'ios'
+        ? iosEnterAnimation
+        : theme === 'ionic' && ionicEnterAnimation
+            ? ionicEnterAnimation
+            : mdEnterAnimation;
     // get the user's animation fn if one was provided
-    const animationBuilder = overlay.enterAnimation
-        ? overlay.enterAnimation
-        : index.config.get(name, mode === 'ios' ? iosEnterAnimation : mdEnterAnimation);
+    const animationBuilder = overlay.enterAnimation ? overlay.enterAnimation : index.config.get(name, selectedAnimation);
     const completed = await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
     if (completed) {
         overlay.didPresent.emit();
-        overlay.didPresentShorthand?.emit();
+        (_b = overlay.didPresentShorthand) === null || _b === void 0 ? void 0 : _b.emit();
     }
     /**
      * If the focused element is already
@@ -605,7 +879,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
          * exists (e.g. picker-legacy), we fall back to the host.
          */
         const overlayWrapper = helpers.getElementRoot(overlay.el).querySelector('[role="dialog"][tabindex]');
-        const focusTarget = overlayWrapper ?? overlay.el;
+        const focusTarget = overlayWrapper !== null && overlayWrapper !== void 0 ? overlayWrapper : overlay.el;
         /**
          * `preventScroll` keeps this a pure focus move so the viewport does not
          * jump when the wrapper is partially off-screen (e.g. a sheet modal).
@@ -615,7 +889,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
         try {
             focusTarget.focus({ preventScroll: true });
         }
-        catch {
+        catch (_c) {
             focusTarget.focus();
         }
     }
@@ -651,7 +925,7 @@ const restoreElementFocus = async (overlayEl) => {
     }
     // Ensure active element is blurred to prevent a11y warning issues
     previousElement.blur();
-    const shadowRoot = previousElement?.shadowRoot;
+    const shadowRoot = previousElement === null || previousElement === void 0 ? void 0 : previousElement.shadowRoot;
     if (shadowRoot) {
         // If there are no inner focusable elements, just focus the host element.
         previousElement = shadowRoot.querySelector(focusableQueryString) || previousElement;
@@ -686,10 +960,11 @@ const restoreElementFocus = async (overlayEl) => {
     }
 };
 const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnimation, opts) => {
+    var _a, _b;
     if (!overlay.presented) {
         return false;
     }
-    const presentedOverlays = index$1.doc !== undefined ? getPresentedOverlays(index$1.doc) : [];
+    const presentedOverlays = ionicGlobal.doc !== undefined ? getPresentedOverlays(ionicGlobal.doc) : [];
     /**
      * For accessibility, toasts lack focus traps and don't receive
      * `aria-hidden` on the root element when presented.
@@ -720,7 +995,7 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
         // Overlay contents should not be clickable during dismiss
         overlay.el.style.setProperty('pointer-events', 'none');
         overlay.willDismiss.emit({ data, role });
-        overlay.willDismissShorthand?.emit({ data, role });
+        (_a = overlay.willDismissShorthand) === null || _a === void 0 ? void 0 : _a.emit({ data, role });
         const mode = ionicGlobal.getIonMode(overlay);
         const animationBuilder = overlay.leaveAnimation
             ? overlay.leaveAnimation
@@ -730,7 +1005,7 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
             await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
         }
         overlay.didDismiss.emit({ data, role });
-        overlay.didDismissShorthand?.emit({ data, role });
+        (_b = overlay.didDismissShorthand) === null || _b === void 0 ? void 0 : _b.emit({ data, role });
         // Get a reference to all animations currently assigned to this overlay
         // Then tear them down to return the overlay to its initial visual state
         const animations = activeAnimations.get(overlay) || [];
@@ -758,7 +1033,8 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
     return true;
 };
 const getAppRoot = (doc) => {
-    return doc.querySelector('ion-app') || doc.body;
+    const appRootSelector = index.config.get('appRootSelector', 'ion-app');
+    return doc.querySelector(appRootSelector) || doc.body;
 };
 const overlayAnimation = async (overlay, animationBuilder, baseEl, opts) => {
     // Make overlay visible in case it's hidden
@@ -771,7 +1047,7 @@ const overlayAnimation = async (overlay, animationBuilder, baseEl, opts) => {
     if (overlay.keyboardClose) {
         animation.beforeAddWrite(() => {
             const activeElement = baseEl.ownerDocument.activeElement;
-            if (activeElement?.matches('input,ion-input, ion-textarea')) {
+            if (activeElement === null || activeElement === void 0 ? void 0 : activeElement.matches('input,ion-input, ion-textarea')) {
                 activeElement.blur();
             }
         });
@@ -958,7 +1234,6 @@ exports.GESTURE = GESTURE;
 exports.OVERLAY_GESTURE_PRIORITY = OVERLAY_GESTURE_PRIORITY;
 exports.actionSheetController = actionSheetController;
 exports.alertController = alertController;
-exports.cleanupRootFocusTrapAccessibility = cleanupRootFocusTrapAccessibility;
 exports.createDelegateController = createDelegateController;
 exports.createTriggerController = createTriggerController;
 exports.dismiss = dismiss;
@@ -969,6 +1244,7 @@ exports.getPresentedOverlay = getPresentedOverlay;
 exports.isCancel = isCancel;
 exports.loadingController = loadingController;
 exports.modalController = modalController;
+exports.pickerController = pickerController;
 exports.popoverController = popoverController;
 exports.prepareOverlay = prepareOverlay;
 exports.present = present;