@ionic/core 8.6.0 → 8.6.1-dev.11749483665.140e610d

package/dist/esm/{animation-BWcUKtbn.js → animation-Cgfm6Out.js}

@@ -1,8 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { o as printIonError } from './index-B_U9CtaY.js';
-import { w as win } from './index-ZjP4CjeZ.js';
+import { t as printIonError, q as win } from './index-BBrR3goV.js';
 
 let animationPrefix;
 const getAnimationPrefix = (el) => {

package/dist/esm/{button-active-Bxcnevju.js → button-active-DvzVF2u_.js}

@@ -1,8 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as writeTask } from './index-B_U9CtaY.js';
-import { h as hapticSelectionEnd, a as hapticSelectionChanged, b as hapticSelectionStart } from './haptic-DzAMWJuk.js';
+import { w as writeTask } from './index-BBrR3goV.js';
+import { h as hapticSelectionEnd, a as hapticSelectionChanged, b as hapticSelectionStart } from './haptic-ZZTn7IWt.js';
 import { createGesture } from './index-CfgBF1SE.js';
 
 const createButtonActiveGesture = (el, isButton) => {

package/dist/esm/{capacitor-CFERIeaU.js → capacitor-Dvc8Ydvg.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as win } from './index-ZjP4CjeZ.js';
+import { q as win } from './index-BBrR3goV.js';
 
 const getCapacitor = () => {
     if (win !== undefined) {

package/dist/esm/caret-down-D1t981Ih.js

@@ -0,0 +1,6 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+const caretDownSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0yMTMuNjYsMTAxLjY2bC04MCw4MGE4LDgsMCwwLDEtMTEuMzIsMGwtODAtODBBOCw4LDAsMCwxLDUzLjY2LDkwLjM0TDEyOCwxNjQuNjlsNzQuMzQtNzQuMzVhOCw4LDAsMCwxLDExLjMyLDExLjMyWiIvPjwvc3ZnPg==';
+
+export { caretDownSvg as c };

package/dist/esm/caret-left-fIOYmaqA.js

@@ -0,0 +1,6 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+const caretLeftSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0xNjUuNjYsMjAyLjM0YTgsOCwwLDAsMS0xMS4zMiwxMS4zMmwtODAtODBhOCw4LDAsMCwxLDAtMTEuMzJsODAtODBhOCw4LDAsMCwxLDExLjMyLDExLjMyTDkxLjMxLDEyOFoiLz48L3N2Zz4=';
+
+export { caretLeftSvg as c };

package/dist/esm/caret-right-BYSs-jZz.js

@@ -0,0 +1,6 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+const caretRightSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0xODEuNjYsMTMzLjY2bC04MCw4MGE4LDgsMCwwLDEtMTEuMzItMTEuMzJMMTY0LjY5LDEyOCw5MC4zNCw1My42NmE4LDgsMCwwLDEsMTEuMzItMTEuMzJsODAsODBBOCw4LDAsMCwxLDE4MS42NiwxMzMuNjZaIi8+PC9zdmc+';
+
+export { caretRightSvg as c };

package/dist/esm/{config-AaTyISnm.js → config-DwiPHIF5.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { o as printIonError } from './index-B_U9CtaY.js';
+import { t as printIonError } from './index-BBrR3goV.js';
 
 /**
  * Does a simple sanitization of all elements

package/dist/esm/{data-GIsHsYIB.js → data-HHZs0eLV.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { m as printIonWarning } from './index-B_U9CtaY.js';
+import { n as printIonWarning } from './index-BBrR3goV.js';
 
 /**
  * Returns true if the selected day is equal to the reference day
@@ -1147,20 +1147,20 @@ const hour23 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18
 // h24 hour system uses 1-24. Midnight starts at 24:00.
 const hour24 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 0];
 /**
- * Given a locale and a mode,
+ * Given a locale and a theme,
  * return an array with formatted days
- * of the week. iOS should display days
- * such as "Mon" or "Tue".
+ * of the week. iOS and Ionic themes should
+ * display days such as "Mon" or "Tue".
  * MD should display days such as "M"
  * or "T".
  */
-const getDaysOfWeek = (locale, mode, firstDayOfWeek = 0) => {
+const getDaysOfWeek = (locale, theme, firstDayOfWeek = 0) => {
     /**
      * Nov 1st, 2020 starts on a Sunday.
      * ion-datetime assumes weeks start on Sunday,
      * but is configurable via `firstDayOfWeek`.
      */
-    const weekdayFormat = mode === 'ios' ? 'short' : 'narrow';
+    const weekdayFormat = theme === 'md' ? 'narrow' : 'short';
     const intl = new Intl.DateTimeFormat(locale, { weekday: weekdayFormat });
     const startDate = new Date('11/01/2020');
     const daysOfWeek = [];

package/dist/{cjs/focus-visible-CCvKiLh3.js → esm/focus-visible-vXpMhGrs.js}

@@ -1,8 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-'use strict';
-
 const ION_FOCUSED = 'ion-focused';
 const ION_FOCUSABLE = 'ion-focusable';
 const FOCUS_KEYS = [
@@ -19,6 +17,28 @@ const FOCUS_KEYS = [
     'Home',
     'End',
 ];
+let focusVisibleUtility = null;
+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.
+ */
+const focusElements = (elements) => {
+    const focusVisible = getOrInitFocusVisibleUtility();
+    focusVisible.setFocus(elements);
+};
 const startFocusVisible = (rootEl) => {
     let currentFocus = [];
     let keyboardMode = true;
@@ -74,4 +94,4 @@ const startFocusVisible = (rootEl) => {
     };
 };
 
-exports.startFocusVisible = startFocusVisible;
+export { focusElements, getOrInitFocusVisibleUtility, startFocusVisible };

package/dist/esm/{framework-delegate-DxcnWic_.js → framework-delegate-B4Rily6A.js}

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

package/dist/esm/{haptic-DzAMWJuk.js → haptic-ZZTn7IWt.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { g as getCapacitor } from './capacitor-CFERIeaU.js';
+import { g as getCapacitor } from './capacitor-Dvc8Ydvg.js';
 
 var ImpactStyle;
 (function (ImpactStyle) {

package/dist/esm/{helpers-1O4D2b7y.js → helpers-D_90HVv6.js}

@@ -1,7 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { o as printIonError } from './index-B_U9CtaY.js';
+import { focusElements } from './focus-visible-vXpMhGrs.js';
+import { t as printIonError, m as config } from './index-BBrR3goV.js';
 
 const transitionEndAsync = (el, expectedDuration = 0) => {
     return new Promise((resolve) => {
@@ -201,6 +202,17 @@ const raf = (h) => {
 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.
+ */
 const focusVisibleElement = (el) => {
     el.focus();
     /**
@@ -212,9 +224,36 @@ const focusVisibleElement = (el) => {
      * which will let us explicitly set the elements to focus.
      */
     if (el.classList.contains('ion-focusable')) {
-        const app = el.closest('ion-app');
+        const appRootSelector = config.get('appRootSelector', 'ion-app');
+        const app = el.closest(appRootSelector);
         if (app) {
-            app.setFocus([el]);
+            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([el]);
+            }
+            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([el]);
+                });
+            }
         }
     }
 };

package/dist/esm/{index-B_U9CtaY.js → index-BBrR3goV.js}

@@ -121,6 +121,126 @@ const printRequiredElementError = (el, ...targetSelectors) => {
     return console.error(`<${el.tagName.toLowerCase()}> must be used inside ${targetSelectors.join(' or ')}.`);
 };
 
+const win$1 = typeof window !== 'undefined' ? window : undefined;
+const doc = typeof document !== 'undefined' ? document : undefined;
+
+/**
+ * CloseWatcher is a newer API that lets
+ * use detect the hardware back button event
+ * in a web browser: https://caniuse.com/?search=closewatcher
+ * However, not every browser supports it yet.
+ *
+ * This needs to be a function so that we can
+ * check the config once it has been set.
+ * Otherwise, this code would be evaluated the
+ * moment this file is evaluated which could be
+ * before the config is set.
+ */
+const shouldUseCloseWatcher = () => config.get('experimentalCloseWatcher', false) && win$1 !== undefined && 'CloseWatcher' in win$1;
+/**
+ * When hardwareBackButton: false in config,
+ * we need to make sure we also block the default
+ * webview behavior. If we don't then it will be
+ * possible for users to navigate backward while
+ * an overlay is still open. Additionally, it will
+ * give the appearance that the hardwareBackButton
+ * config is not working as the page transition
+ * will still happen.
+ */
+const blockHardwareBackButton = () => {
+    document.addEventListener('backbutton', () => { }); // eslint-disable-line
+};
+const startHardwareBackButton = () => {
+    const doc = document;
+    let busy = false;
+    const backButtonCallback = () => {
+        if (busy) {
+            return;
+        }
+        let index = 0;
+        let handlers = [];
+        const ev = new CustomEvent('ionBackButton', {
+            bubbles: false,
+            detail: {
+                register(priority, handler) {
+                    handlers.push({ priority, handler, id: index++ });
+                },
+            },
+        });
+        doc.dispatchEvent(ev);
+        const executeAction = async (handlerRegister) => {
+            try {
+                if (handlerRegister === null || handlerRegister === void 0 ? void 0 : handlerRegister.handler) {
+                    const result = handlerRegister.handler(processHandlers);
+                    if (result != null) {
+                        await result;
+                    }
+                }
+            }
+            catch (e) {
+                printIonError('[ion-app] - Exception in startHardwareBackButton:', e);
+            }
+        };
+        const processHandlers = () => {
+            if (handlers.length > 0) {
+                let selectedHandler = {
+                    priority: Number.MIN_SAFE_INTEGER,
+                    handler: () => undefined,
+                    id: -1,
+                };
+                handlers.forEach((handler) => {
+                    if (handler.priority >= selectedHandler.priority) {
+                        selectedHandler = handler;
+                    }
+                });
+                busy = true;
+                handlers = handlers.filter((handler) => handler.id !== selectedHandler.id);
+                executeAction(selectedHandler).then(() => (busy = false));
+            }
+        };
+        processHandlers();
+    };
+    /**
+     * If the CloseWatcher is defined then
+     * we don't want to also listen for the native
+     * backbutton event otherwise we may get duplicate
+     * events firing.
+     */
+    if (shouldUseCloseWatcher()) {
+        let watcher;
+        const configureWatcher = () => {
+            watcher === null || watcher === void 0 ? void 0 : watcher.destroy();
+            watcher = new win$1.CloseWatcher();
+            /**
+             * Once a close request happens
+             * the watcher gets destroyed.
+             * As a result, we need to re-configure
+             * the watcher so we can respond to other
+             * close requests.
+             */
+            watcher.onclose = () => {
+                backButtonCallback();
+                configureWatcher();
+            };
+        };
+        configureWatcher();
+    }
+    else {
+        doc.addEventListener('backbutton', backButtonCallback);
+    }
+};
+const OVERLAY_BACK_BUTTON_PRIORITY = 100;
+const MENU_BACK_BUTTON_PRIORITY = 99; // 1 less than overlay priority since menu is displayed behind overlays
+
+var hardwareBackButton = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    MENU_BACK_BUTTON_PRIORITY: MENU_BACK_BUTTON_PRIORITY,
+    OVERLAY_BACK_BUTTON_PRIORITY: OVERLAY_BACK_BUTTON_PRIORITY,
+    blockHardwareBackButton: blockHardwareBackButton,
+    shouldUseCloseWatcher: shouldUseCloseWatcher,
+    startHardwareBackButton: startHardwareBackButton
+});
+
 const getPlatforms = (win) => setupPlatforms(win);
 const isPlatform = (winOrPlatform, platform) => {
     if (typeof winOrPlatform === 'string') {
@@ -210,10 +330,143 @@ const PLATFORMS_MAP = {
     hybrid: isHybrid,
 };
 
-// TODO(FW-2832): types
 let defaultMode;
-const getIonMode = (ref) => {
-    return (ref && getMode(ref)) || defaultMode;
+let defaultTheme = 'md';
+/**
+ * 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.
+ */
+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.
+ */
+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.
+ */
+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;
+};
+const rIC = (callback) => {
+    if ('requestIdleCallback' in window) {
+        window.requestIdleCallback(callback);
+    }
+    else {
+        setTimeout(callback, 32);
+    }
+};
+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;
 };
 const initialize = (userConfig = {}) => {
     if (typeof window === 'undefined') {
@@ -231,34 +484,115 @@ 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 elmMode = elm.mode || elm.getAttribute('mode');
+            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');
             if (elmMode) {
-                if (isAllowedIonicModeValue(elmMode)) {
+                if (isModeSupported(elmMode)) {
                     return elmMode;
                 }
                 else if (isIonicElement(elm)) {
-                    printIonWarning('Invalid ionic mode: "' + elmMode + '", expected: "ios" or "md"');
+                    printIonWarning(`Invalid mode: "${elmMode}". Ionic modes can be only "ios" or "md"`);
                 }
             }
             elm = elm.parentElement;
         }
-        return defaultMode;
+        return defaultTheme;
     });
+    // `IonApp` code
+    // ----------------------------------------------
+    {
+        rIC(async () => {
+            const isHybrid = isPlatform(window, 'hybrid');
+            if (!config.getBoolean('_testing')) {
+                import('./index-k4x4i7EL.js').then((module) => module.startTapClick(config));
+            }
+            if (config.getBoolean('statusTap', isHybrid)) {
+                import('./status-tap-DLatL9pG.js').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('./input-shims-DEtEJcaS.js').then((module) => module.startInputShims(config, platform));
+            }
+            const hardwareBackButtonModule = await Promise.resolve().then(function () { return hardwareBackButton; });
+            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('./keyboard-BsZp3qPH.js').then((module) => module.startKeyboardAssist(window));
+            }
+            import('./focus-visible-vXpMhGrs.js').then((module) => module.getOrInitFocusVisibleUtility());
+        });
+    }
 };
 
 const globalScripts = initialize;
@@ -3295,4 +3629,4 @@ var hostListenerOpts = (flags) => supportsListenerOptions ? {
 // src/runtime/nonce.ts
 var setNonce = (nonce) => plt.$nonce$ = nonce;
 
-export { Build as B, Fragment as F, H, LogLevel as L, isPlatform as a, bootstrapLazy as b, getPlatforms as c, createEvent as d, getIonMode as e, readTask as f, globalScripts as g, h, initialize as i, Host as j, getElement as k, config as l, printIonWarning as m, forceUpdate as n, printIonError as o, promiseResolve as p, getAssetPath as q, registerInstance as r, setNonce as s, printRequiredElementError as t, writeTask as w };
+export { Build as B, Fragment as F, H, LogLevel as L, MENU_BACK_BUTTON_PRIORITY as M, OVERLAY_BACK_BUTTON_PRIORITY as O, isPlatform as a, bootstrapLazy as b, getPlatforms as c, createEvent as d, getIonMode as e, readTask as f, globalScripts as g, getIonTheme as h, initialize as i, h as j, Host as k, getElement as l, config as m, printIonWarning as n, forceUpdate as o, promiseResolve as p, win$1 as q, registerInstance as r, setNonce as s, printIonError as t, getAssetPath as u, doc as v, writeTask as w, shouldUseCloseWatcher as x, printRequiredElementError as y };

package/dist/esm/{index-DfBA5ztX.js → index-BoSPzYKk.js}

@@ -1,8 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { l as config, m as printIonWarning, w as writeTask, B as Build } from './index-B_U9CtaY.js';
-import { r as raf } from './helpers-1O4D2b7y.js';
+import { m as config, n as printIonWarning, w as writeTask, B as Build } from './index-BBrR3goV.js';
+import { r as raf } from './helpers-D_90HVv6.js';
 
 const LIFECYCLE_WILL_ENTER = 'ionViewWillEnter';
 const LIFECYCLE_DID_ENTER = 'ionViewDidEnter';
@@ -118,8 +118,8 @@ const createFocusController = () => {
 };
 const LAST_FOCUS = 'ion-last-focus';
 
-const iosTransitionAnimation = () => import('./ios.transition-BmXtMRXZ.js');
-const mdTransitionAnimation = () => import('./md.transition-CLI683c7.js');
+const iosTransitionAnimation = () => import('./ios.transition-C_-UP8wE.js');
+const mdTransitionAnimation = () => import('./md.transition-BDWkLsNw.js');
 const focusController = createFocusController();
 // TODO(FW-2832): types
 const transition = (opts) => {