@ionic/core 8.8.3-dev.11774545677.151db026 → 8.8.3-nightly.20260327

package/dist/collection/global/ionic-global.js

@@ -1,155 +1,14 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Build, getMode, setMode, getElement } from "@stencil/core";
+import { getMode, setMode } from "@stencil/core";
 import { printIonWarning } from "../utils/logging/index";
-import { shouldUseCloseWatcher } from "../utils/hardware-back-button";
 import { isPlatform, setupPlatforms } from "../utils/platform";
 import { config, configFromSession, configFromURL, saveConfig } from "./config";
+// TODO(FW-2832): types
 let defaultMode;
-let defaultTheme = 'md';
-let rICHandle;
-/**
- * Prints a warning message to the developer to inform them of
- * an invalid configuration of mode and theme.
- * @param mode The invalid mode configuration.
- * @param theme The invalid theme configuration.
- */
-const printInvalidModeWarning = (mode, theme, ref) => {
-    printIonWarning(`Invalid mode and theme combination provided: mode: ${mode}, theme: ${theme}. Fallback mode ${getDefaultModeForTheme(theme)} will be used.`, ref);
-};
-/**
- * Validates if a mode is accepted for a theme configuration.
- * @param mode The mode to validate.
- * @param theme The theme the mode is being used with.
- * @returns `true` if the mode is valid for the theme, `false` if invalid.
- */
-export const isModeValidForTheme = (mode, theme) => {
-    if (mode === 'md') {
-        return theme === 'md' || theme === 'ionic';
-    }
-    else if (mode === 'ios') {
-        return theme === 'ios' || theme === 'ionic';
-    }
-    return false;
-};
-/**
- * Returns the default mode for a specified theme.
- * @param theme The theme to return a default mode for.
- * @returns The default mode, either `ios` or `md`.
- */
-const getDefaultModeForTheme = (theme) => {
-    if (theme === 'ios') {
-        return 'ios';
-    }
-    return 'md';
-};
-/**
- * Returns the default theme for a specified mode.
- * @param mode The mode to return a default theme for.
- * @returns The default theme.
- */
-const getDefaultThemeForMode = (mode) => {
-    if (mode === 'ios') {
-        return 'ios';
-    }
-    return 'md';
-};
-const isModeSupported = (elmMode) => ['ios', 'md'].includes(elmMode);
-const isThemeSupported = (theme) => ['ios', 'md', 'ionic'].includes(theme);
-const isIonicElement = (elm) => { var _a; return (_a = elm.tagName) === null || _a === void 0 ? void 0 : _a.startsWith('ION-'); };
-/**
- * Returns the mode value of the element reference or the closest
- * parent with a valid mode.
- * @param ref The element reference to look up the mode for.
- * @param theme Optionally can provide the theme to avoid an additional look-up.
- * @returns The mode value for the element reference.
- */
-export const getIonMode = (ref, theme = getIonTheme(ref)) => {
-    var _a;
-    if ((ref === null || ref === void 0 ? void 0 : ref.mode) && isModeValidForTheme(ref === null || ref === void 0 ? void 0 : ref.mode, theme)) {
-        /**
-         * If the reference already has a mode configuration,
-         * use it instead of performing a look-up.
-         */
-        return ref.mode;
-    }
-    else {
-        const el = getElement(ref);
-        const mode = ((_a = el.closest('[mode]')) === null || _a === void 0 ? void 0 : _a.getAttribute('mode')) || defaultMode;
-        if (isModeValidForTheme(mode, theme)) {
-            /**
-             * The mode configuration is supported for the configured theme.
-             */
-            return mode;
-        }
-        else {
-            printInvalidModeWarning(mode, theme, ref);
-        }
-    }
-    return getDefaultModeForTheme(theme);
-};
-/**
- * Returns the theme value of the element reference or the closest
- * parent with a valid theme.
- *
- * @param ref The element reference to look up the theme for.
- * @returns The theme value for the element reference, defaults to
- * the default theme if it cannot be determined.
- */
-export const getIonTheme = (ref) => {
-    var _a, _b;
-    const theme = ref && getMode(ref);
-    if (theme) {
-        return theme;
-    }
-    /**
-     * If the theme cannot be detected, then fallback to using
-     * the `mode` attribute to determine the style sheets to use.
-     */
-    const el = getElement(ref);
-    const mode = (_a = ref === null || ref === void 0 ? void 0 : ref.mode) !== null && _a !== void 0 ? _a : (_b = el.closest('[mode]')) === null || _b === void 0 ? void 0 : _b.getAttribute('mode');
-    if (mode) {
-        return getDefaultThemeForMode(mode);
-    }
-    /**
-     * If a mode is not detected, then fallback to using the
-     * default theme.
-     */
-    return defaultTheme;
-};
-export const rIC = (callback) => {
-    if ('requestIdleCallback' in window) {
-        return window.requestIdleCallback(callback);
-    }
-    return setTimeout(callback, 32);
-};
-export const cIC = (id) => {
-    if ('cancelIdleCallback' in window) {
-        window.cancelIdleCallback(id);
-    }
-    else {
-        clearTimeout(id);
-    }
-};
-export const needInputShims = () => {
-    /**
-     * iOS always needs input shims
-     */
-    const needsShimsIOS = isPlatform(window, 'ios') && isPlatform(window, 'mobile');
-    if (needsShimsIOS) {
-        return true;
-    }
-    /**
-     * Android only needs input shims when running
-     * in the browser and only if the browser is using the
-     * new Chrome 108+ resize behavior: https://developer.chrome.com/blog/viewport-resize-behavior/
-     */
-    const isAndroidMobileWeb = isPlatform(window, 'android') && isPlatform(window, 'mobileweb');
-    if (isAndroidMobileWeb) {
-        return true;
-    }
-    return false;
+export const getIonMode = (ref) => {
+    return (ref && getMode(ref)) || defaultMode;
 };
 export const initialize = (userConfig = {}) => {
     if (typeof window === 'undefined') {
@@ -167,120 +26,33 @@ export const initialize = (userConfig = {}) => {
     }
     // Setup platforms
     setupPlatforms(win);
+    // first see if the mode was set as an attribute on <html>
+    // which could have been set by the user, or by pre-rendering
+    // otherwise get the mode via config settings, and fallback to md
     Ionic.config = config;
-    /**
-     * Check if the mode was set as an attribute on <html>
-     * which could have been set by the user, or by pre-rendering
-     * otherwise get the mode via config settings, and fallback to md.
-     */
     Ionic.mode = defaultMode = config.get('mode', doc.documentElement.getAttribute('mode') || (isPlatform(win, 'ios') ? 'ios' : 'md'));
-    /**
-     * Check if the theme was set as an attribute on <html>
-     * which could have been set by the user, or by pre-rendering
-     * otherwise get the theme via config settings, and fallback to md.
-     */
-    Ionic.theme = defaultTheme = config.get('theme', doc.documentElement.getAttribute('theme') || getDefaultThemeForMode(defaultMode));
-    if (!isModeValidForTheme(defaultMode, defaultTheme)) {
-        printInvalidModeWarning(defaultMode, defaultTheme, configObj);
-        defaultMode = getDefaultModeForTheme(defaultTheme);
-    }
     config.set('mode', defaultMode);
     doc.documentElement.setAttribute('mode', defaultMode);
     doc.documentElement.classList.add(defaultMode);
-    config.set('theme', defaultTheme);
-    doc.documentElement.setAttribute('theme', defaultTheme);
-    doc.documentElement.classList.add(defaultTheme);
     if (config.getBoolean('_testing')) {
         config.set('animated', false);
     }
+    const isIonicElement = (elm) => { var _a; return (_a = elm.tagName) === null || _a === void 0 ? void 0 : _a.startsWith('ION-'); };
+    const isAllowedIonicModeValue = (elmMode) => ['ios', 'md'].includes(elmMode);
     setMode((elm) => {
-        /**
-         * Iterate over all the element nodes, to both validate and
-         * set the "mode" that is used for determining the styles to
-         * apply to the element.
-         *
-         * setMode refers to Stencil's internal metadata for "mode",
-         * which is used to set the correct styleUrl for the component.
-         *
-         * If the "theme" attribute or property is set, then use it
-         * to determine the style sheets to use.
-         *
-         * If the "mode" attribute or property is set, then use it
-         * to determine the style sheets to use. This is fallback
-         * behavior for applications that are not setting the "theme".
-         */
         while (elm) {
-            const theme = elm.getAttribute('theme');
-            if (theme) {
-                if (isThemeSupported(theme)) {
-                    return theme;
-                }
-                else if (isIonicElement(elm)) {
-                    printIonWarning(`Invalid theme: "${theme}". Supported themes include: "ios" or "md".`);
-                }
-            }
-            /**
-             * If a theme is not detected, then fallback to using the
-             * `mode` attribute to determine the style sheets to use.
-             */
-            const elmMode = elm.getAttribute('mode');
+            const elmMode = elm.mode || elm.getAttribute('mode');
             if (elmMode) {
-                if (isModeSupported(elmMode)) {
+                if (isAllowedIonicModeValue(elmMode)) {
                     return elmMode;
                 }
                 else if (isIonicElement(elm)) {
-                    printIonWarning(`Invalid mode: "${elmMode}". Ionic modes can be only "ios" or "md"`);
+                    printIonWarning('Invalid ionic mode: "' + elmMode + '", expected: "ios" or "md"');
                 }
             }
             elm = elm.parentElement;
         }
-        return defaultTheme;
+        return defaultMode;
     });
-    // `IonApp` code
-    // ----------------------------------------------
-    if (Build.isBrowser) {
-        // If initialize is called again, clear the previous pending callback
-        if (rICHandle !== undefined) {
-            cIC(rICHandle);
-        }
-        rICHandle = rIC(async () => {
-            const isHybrid = isPlatform(window, 'hybrid');
-            if (!config.getBoolean('_testing')) {
-                import('../utils/tap-click').then((module) => module.startTapClick(config));
-            }
-            if (config.getBoolean('statusTap', isHybrid)) {
-                import('../utils/status-tap').then((module) => module.startStatusTap());
-            }
-            if (config.getBoolean('inputShims', needInputShims())) {
-                /**
-                 * needInputShims() ensures that only iOS and Android
-                 * platforms proceed into this block.
-                 */
-                const platform = isPlatform(window, 'ios') ? 'ios' : 'android';
-                import('../utils/input-shims/input-shims').then((module) => module.startInputShims(config, platform));
-            }
-            const hardwareBackButtonModule = await import('../utils/hardware-back-button');
-            const supportsHardwareBackButtonEvents = isHybrid || shouldUseCloseWatcher();
-            if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
-                hardwareBackButtonModule.startHardwareBackButton();
-            }
-            else {
-                /**
-                 * If an app sets hardwareBackButton: false and experimentalCloseWatcher: true
-                 * then the close watcher will not be used.
-                 */
-                if (shouldUseCloseWatcher()) {
-                    printIonWarning('[ion-app] - experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.');
-                }
-                hardwareBackButtonModule.blockHardwareBackButton();
-            }
-            if (typeof window !== 'undefined') {
-                import('../utils/keyboard/keyboard').then((module) => module.startKeyboardAssist(window));
-            }
-            import('../utils/focus-visible').then((module) => module.getOrInitFocusVisibleUtility());
-            // Reset handle once executed
-            rICHandle = undefined;
-        });
-    }
 };
 export default initialize;

package/dist/collection/utils/focus-trap.js

@@ -14,7 +14,7 @@ import { focusVisibleElement } from "./helpers";
  * Note: We need this distinction because `disabled="false"` is
  * valid usage for the disabled property on ion-button.
  */
-export 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])';
+export 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])';
 /**
  * Focuses the first descendant in a context
  * that can receive focus. If none exists,
@@ -66,18 +66,7 @@ const focusElementInContext = (hostToFocus, fallbackElement) => {
     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.
-        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;
-        }
+        elementToFocus = shadowRoot.querySelector(focusableQueryString) || hostToFocus;
     }
     if (elementToFocus) {
         const radioGroup = elementToFocus.closest('ion-radio-group');

package/dist/collection/utils/focus-visible.js

@@ -17,28 +17,6 @@ const FOCUS_KEYS = [
     'Home',
     'End',
 ];
-let focusVisibleUtility = null;
-export const getOrInitFocusVisibleUtility = () => {
-    if (!focusVisibleUtility) {
-        focusVisibleUtility = startFocusVisible();
-    }
-    return focusVisibleUtility;
-};
-/**
- * Used to set focus on an element that uses `ion-focusable`.
- * Do not use this if focusing the element as a result of a keyboard
- * event as the focus utility should handle this for us. This method
- * should be used when we want to programmatically focus an element as
- * a result of another user action. (Ex: We focus the first element
- * inside of a popover when the user presents it, but the popover is not always
- * presented as a result of keyboard action.)
- *
- * @param elements - The elements to set focus on.
- */
-export const focusElements = (elements) => {
-    const focusVisible = getOrInitFocusVisibleUtility();
-    focusVisible.setFocus(elements);
-};
 export const startFocusVisible = (rootEl) => {
     let currentFocus = [];
     let keyboardMode = true;

package/dist/collection/utils/forms/validity.js

@@ -13,34 +13,3 @@ export const checkInvalidState = (el) => {
     const hasIonInvalid = el.classList.contains('ion-invalid');
     return hasIonTouched && hasIonInvalid;
 };
-export const getValidityFlags = (validity) => {
-    return {
-        badInput: validity.badInput,
-        customError: validity.customError,
-        patternMismatch: validity.patternMismatch,
-        rangeOverflow: validity.rangeOverflow,
-        rangeUnderflow: validity.rangeUnderflow,
-        stepMismatch: validity.stepMismatch,
-        tooLong: validity.tooLong,
-        tooShort: validity.tooShort,
-        typeMismatch: validity.typeMismatch,
-        valueMissing: validity.valueMissing,
-    };
-};
-/**
- * Reports the validity state of a native form element to ElementInternals.
- * This delegates to the native element's built-in validation, which automatically
- * handles required, minlength, maxlength, and other constraints.
- */
-export const reportValidityToElementInternals = (nativeElement, internals) => {
-    if (!(nativeElement === null || nativeElement === void 0 ? void 0 : nativeElement.validity)) {
-        return;
-    }
-    if (nativeElement.validity.valid) {
-        internals.setValidity({});
-    }
-    else {
-        const validityFlags = getValidityFlags(nativeElement.validity);
-        internals.setValidity(validityFlags, nativeElement.validationMessage, nativeElement);
-    }
-};

package/dist/collection/utils/framework-delegate.js

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { config } from "../global/config";
 import { componentOnReady } from "./helpers";
 // TODO(FW-2832): types
 export const attachComponent = async (delegate, container, component, cssClasses, componentProps, inline) => {
@@ -102,8 +101,7 @@ export const CoreDelegate = () => {
          * Get the root of the app and
          * add the overlay there.
          */
-        const appRootSelector = config.get('appRootSelector', 'ion-app');
-        const app = document.querySelector(appRootSelector) || document.body;
+        const app = document.querySelector('ion-app') || document.body;
         /**
          * Create a placeholder comment so that
          * we can return this component to where

package/dist/collection/utils/hardware-back-button.js

@@ -48,20 +48,6 @@ export const startHardwareBackButton = () => {
             },
         });
         doc.dispatchEvent(ev);
-        /**
-         * If no handlers have been registered, fall back to the default
-         * behavior of navigating back in history. This ensures the hardware
-         * back button works even when no router or custom handler is present.
-         */
-        if (handlers.length === 0) {
-            handlers.push({
-                priority: FALLBACK_BACK_BUTTON_PRIORITY,
-                handler: () => {
-                    win === null || win === void 0 ? void 0 : win.history.back();
-                },
-                id: index++,
-            });
-        }
         const executeAction = async (handlerRegister) => {
             try {
                 if (handlerRegister === null || handlerRegister === void 0 ? void 0 : handlerRegister.handler) {
@@ -125,4 +111,3 @@ export const startHardwareBackButton = () => {
 };
 export const OVERLAY_BACK_BUTTON_PRIORITY = 100;
 export const MENU_BACK_BUTTON_PRIORITY = 99; // 1 less than overlay priority since menu is displayed behind overlays
-const FALLBACK_BACK_BUTTON_PRIORITY = -1; // Fallback when no other handlers are registered

package/dist/collection/utils/helpers.js

@@ -1,9 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { focusElements } from "./focus-visible";
 import { printIonError } from "./logging/index";
-import { config } from "../global/config";
 export const transitionEndAsync = (el, expectedDuration = 0) => {
     return new Promise((resolve) => {
         transitionEnd(el, expectedDuration, resolve);
@@ -205,17 +203,6 @@ export const raf = (h) => {
 export const hasShadowDom = (el) => {
     return !!el.shadowRoot && !!el.attachShadow;
 };
-/**
- * Focuses a given element while ensuring proper focus management
- * within the Ionic framework. If the element is marked as `ion-focusable`,
- * this function will delegate focus handling to `ion-app` or manually
- * apply focus when a custom app root is used.
- *
- * This function helps maintain accessibility and expected focus behavior
- * in both standard and custom root environments.
- *
- * @param el - The element to focus.
- */
 export const focusVisibleElement = (el) => {
     el.focus();
     /**
@@ -225,52 +212,11 @@ export const focusVisibleElement = (el) => {
      * however, there are times when we need to manually control
      * this behavior so we call the `setFocus` method on ion-app
      * which will let us explicitly set the elements to focus.
-     *
-     * Note: The element passed to this function might be an inner
-     * focusable element (e.g., a native <button> inside ion-button's
-     * shadow root). If so, we need to find the host element that has
-     * the ion-focusable class to pass to setFocus.
      */
-    let elToFocus = el;
-    // If the element doesn't have ion-focusable, check if it's inside
-    // a shadow root and use the host element instead
-    if (!el.classList.contains('ion-focusable')) {
-        const rootNode = el.getRootNode();
-        if (rootNode instanceof ShadowRoot && rootNode.host instanceof HTMLElement) {
-            elToFocus = rootNode.host;
-        }
-    }
-    if (elToFocus.classList.contains('ion-focusable')) {
-        const appRootSelector = config.get('appRootSelector', 'ion-app');
-        const app = elToFocus.closest(appRootSelector);
+    if (el.classList.contains('ion-focusable')) {
+        const app = el.closest('ion-app');
         if (app) {
-            if (appRootSelector === 'ion-app') {
-                /**
-                 * If the app root is the default, then it will be
-                 * in charge of setting focus. This is because the
-                 * focus-visible utility is attached to the app root
-                 * and will handle setting focus on the correct element.
-                 */
-                app.setFocus([elToFocus]);
-            }
-            else {
-                /**
-                 * When using a custom app root selector, the focus-visible
-                 * utility is not available to manage focus automatically.
-                 * If we set focus immediately, the element may not be fully
-                 * rendered or interactive, especially if it was just added
-                 * to the DOM. Using requestAnimationFrame ensures that focus
-                 * is applied on the next frame, allowing the DOM to settle
-                 * before changing focus.
-                 */
-                requestAnimationFrame(() => {
-                    /**
-                     * The focus-visible utility is used to set focus on an
-                     * element that uses `ion-focusable`.
-                     */
-                    focusElements([elToFocus]);
-                });
-            }
+            app.setFocus([el]);
         }
     }
 };

package/dist/collection/utils/keyboard/keyboard-controller.js

@@ -2,7 +2,6 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { doc, win } from "../browser/index";
-import { config } from "../../global/config";
 import { Keyboard, KeyboardResize } from "../native/keyboard";
 /**
  * The element that resizes when the keyboard opens
@@ -26,8 +25,7 @@ const getResizeContainer = (resizeMode) => {
      * on that. In the event `ion-app` is not available then
      * we can fall back to `body`.
      */
-    const appRootSelector = config.get('appRootSelector', 'ion-app');
-    const ionApp = doc.querySelector(appRootSelector);
+    const ionApp = doc.querySelector('ion-app');
     return ionApp !== null && ionApp !== void 0 ? ionApp : doc.body;
 };
 /**

package/dist/collection/utils/menu-controller/animations/overlay.js

@@ -27,8 +27,8 @@ export const menuOverlayAnimation = (menu) => {
     }
     menuAnimation.addElement(menu.menuInnerEl).fromTo('transform', `translateX(${closedX})`, `translateX(${openedX})`);
     const mode = getIonMode(menu);
-    const isIOS = mode === 'ios';
-    const opacity = isIOS ? 0.2 : 0.25;
+    const isIos = mode === 'ios';
+    const opacity = isIos ? 0.2 : 0.25;
     backdropAnimation.addElement(menu.backdropEl).fromTo('opacity', 0.01, opacity);
-    return baseAnimation(isIOS).addAnimation([menuAnimation, backdropAnimation]);
+    return baseAnimation(isIos).addAnimation([menuAnimation, backdropAnimation]);
 };

package/dist/collection/utils/menu-controller/animations/push.js

@@ -14,7 +14,6 @@ export const menuPushAnimation = (menu) => {
     let menuClosedX;
     const mode = getIonMode(menu);
     const width = menu.width;
-    const isIOS = mode === 'ios';
     if (menu.isEndSide) {
         contentOpenedX = -width + 'px';
         menuClosedX = width + 'px';
@@ -30,5 +29,5 @@ export const menuPushAnimation = (menu) => {
         .addElement(menu.contentEl)
         .fromTo('transform', 'translateX(0px)', `translateX(${contentOpenedX})`);
     const backdropAnimation = createAnimation().addElement(menu.backdropEl).fromTo('opacity', 0.01, 0.32);
-    return baseAnimation(isIOS).addAnimation([menuAnimation, contentAnimation, backdropAnimation]);
+    return baseAnimation(mode === 'ios').addAnimation([menuAnimation, contentAnimation, backdropAnimation]);
 };

package/dist/collection/utils/menu-controller/animations/reveal.js

@@ -11,10 +11,9 @@ import { baseAnimation } from "./base";
  */
 export const menuRevealAnimation = (menu) => {
     const mode = getIonMode(menu);
-    const isIOS = mode === 'ios';
     const openedX = menu.width * (menu.isEndSide ? -1 : 1) + 'px';
     const contentOpen = createAnimation()
         .addElement(menu.contentEl) // REVIEW
         .fromTo('transform', 'translateX(0px)', `translateX(${openedX})`);
-    return baseAnimation(isIOS).addAnimation(contentOpen);
+    return baseAnimation(mode === 'ios').addAnimation(contentOpen);
 };

package/dist/collection/utils/overlays.js

@@ -319,86 +319,6 @@ const connectListeners = (doc) => {
         doc.addEventListener('focus', (ev) => {
             trapKeyboardFocus(ev, doc);
         }, 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, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover');
-            if (!lastOverlay || lastOverlay.classList.contains(FOCUS_TRAP_DISABLE_CLASS))
-                return;
-            const activeElement = doc.activeElement;
-            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
-            const allFocusable = [
-                ...lastOverlay.querySelectorAll(focusableQueryString),
-                ...(((_c = lastOverlay.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll(focusableQueryString)) || []),
-            ];
-            if (allFocusable.length === 0) {
-                ev.preventDefault();
-                return;
-            }
-            // Find current element's index (accounting for shadow DOM)
-            const 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;
-            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') {
-                        focusVisibleElement(innerFocusable);
-                        return;
-                    }
-                }
-                focusVisibleElement(element);
-            };
-            if (ev.shiftKey) {
-                // Shift+Tab: previous element, wrap to last if at first
-                if (currentIndex <= 0) {
-                    focusLastDescendant(lastOverlay);
-                }
-                else {
-                    focusElement(allFocusable[currentIndex - 1]);
-                }
-            }
-            else {
-                // Tab: next element, wrap to first if at last
-                if (currentIndex < 0 || currentIndex >= allFocusable.length - 1) {
-                    focusFirstDescendant(lastOverlay);
-                }
-                else {
-                    focusElement(allFocusable[currentIndex + 1]);
-                }
-            }
-        }, true);
         // handle back-button click
         doc.addEventListener('ionBackButton', (ev) => {
             const lastOverlay = getPresentedOverlay(doc);
@@ -719,8 +639,7 @@ export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLe
     return true;
 };
 const getAppRoot = (doc) => {
-    const appRootSelector = config.get('appRootSelector', 'ion-app');
-    return doc.querySelector(appRootSelector) || doc.body;
+    return doc.querySelector('ion-app') || doc.body;
 };
 const overlayAnimation = async (overlay, animationBuilder, baseEl, opts) => {
     // Make overlay visible in case it's hidden