@ionic/core 8.4.0 → 8.4.1-dev.11730807985.1b046f37

package/dist/collection/components/toolbar/toolbar.ios.css

@@ -1,36 +1,3 @@
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
 /**
  * A heuristic that applies CSS to tablet
  * viewports.
@@ -84,20 +51,10 @@
   padding-right: var(--ion-safe-area-right);
   padding-left: var(--ion-safe-area-left);
   color: var(--color);
-  font-family: var(--ion-font-family, inherit);
   contain: content;
-  z-index: 10;
   box-sizing: border-box;
 }
 
-:host(.ion-color) {
-  color: var(--ion-color-contrast);
-}
-
-:host(.ion-color) .toolbar-background {
-  background: var(--ion-color-base);
-}
-
 .toolbar-container {
   -webkit-padding-start: var(--padding-start);
   padding-inline-start: var(--padding-start);
@@ -114,13 +71,12 @@
   min-height: var(--min-height);
   contain: content;
   overflow: hidden;
-  z-index: 10;
   box-sizing: border-box;
 }
 
 .toolbar-background {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -131,17 +87,104 @@
   background: var(--background);
   contain: strict;
   opacity: calc(var(--opacity) * var(--opacity-scale));
-  z-index: -1;
   pointer-events: none;
 }
 
 ::slotted(ion-progress-bar) {
-  left: 0;
   right: 0;
+  left: 0;
   bottom: 0;
   position: absolute;
 }
 
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+:host {
+  font-family: var(--ion-font-family, inherit);
+  z-index: 10;
+}
+
+:host(.ion-color) {
+  color: var(--ion-color-contrast);
+}
+
+:host(.ion-color) .toolbar-background {
+  background: var(--ion-color-base);
+}
+
+.toolbar-container {
+  z-index: 10;
+}
+
+.toolbar-background {
+  z-index: -1;
+}
+
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/toolbar/toolbar.js

@@ -3,14 +3,15 @@
  */
 import { Host, forceUpdate, h } from "@stencil/core";
 import { createColorClasses, hostContext } from "../../utils/theme";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  *
  * @slot - Content is placed between the named slots if provided without a slot.
  * @slot start - Content is placed to the left of the toolbar text in LTR, and to the right in RTL.
- * @slot secondary - Content is placed to the left of the toolbar text in `ios` mode, and directly to the right in `md` mode.
- * @slot primary - Content is placed to the right of the toolbar text in `ios` mode, and to the far right in `md` mode.
+ * @slot secondary - Content is placed to the left of the toolbar text in the `"ios"` theme, and directly to the right in the `"md"` theme.
+ * @slot primary - Content is placed to the right of the toolbar text in the `"ios"` theme, and to the far right in the `"md"` theme.
  * @slot end - Content is placed to the right of the toolbar text in LTR, and to the left in RTL.
  */
 export class Toolbar {
@@ -57,28 +58,30 @@ export class Toolbar {
         }
     }
     render() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const childStyles = {};
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (h(Host, { key: '462538a5ecd01baf3cde116c9f029aeda26c81be', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
-                [mode]: true,
+        return (h(Host, { key: '31d2cea6423110a58ed8ba749e422889c6f6d310', class: Object.assign(Object.assign({}, childStyles), createColorClasses(this.color, {
+                [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, h("div", { key: 'c0b4415d3b2472de643a9be7cb3b13b3b628621b', class: "toolbar-background" }), h("div", { key: '0ccb8a2dbeaa28d8f9bed87629c0c097446690c2', class: "toolbar-container" }, h("slot", { key: '3e726dac359e923df21d80301651f16063a3de20', name: "start" }), h("slot", { key: 'cd799330b56a7f8833bc61bb2807aafb21846f71', name: "secondary" }), h("div", { key: '395282e6ac8c53576922dcdb5f08c25d34638c86', class: "toolbar-content" }, h("slot", { key: 'a437c60e4ba5aae65e55169ae82a6f379868ec1d' })), h("slot", { key: '711af9b9d321a7b31ede924c9bdcad767aa9a1ca', name: "primary" }), h("slot", { key: 'ecc02edeaf80a837890bcb08d5096df1e22a0b9a', name: "end" }))));
+            })) }, h("div", { key: 'a3ecd195af52489725b7396c0aab32a9b4d4a49c', class: "toolbar-background" }), h("div", { key: 'cfdc07edc4b002370df08ce4c913c3a52955252a', class: "toolbar-container" }, h("slot", { key: 'b77feb227ab03d0fe095fdf620973e8502b486e6', name: "start" }), h("slot", { key: '4284acf3c65df07e74908ee6620d5595255ac547', name: "secondary" }), h("div", { key: '879fdaedc732cbf414d24f3ed3b0abcf4baaae71', class: "toolbar-content" }, h("slot", { key: '975a411effa1492d6c4eb9302b3d8580bbce192d' })), h("slot", { key: '5cfef86927c398b40710769bbdba9cf4c45100c5', name: "primary" }), h("slot", { key: '416036fa2a84a8ef0cb6329d68da040c47bd2aea', name: "end" }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["toolbar.ios.scss"],
-            "md": ["toolbar.md.scss"]
+            "md": ["toolbar.md.scss"],
+            "ionic": ["toolbar.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["toolbar.ios.css"],
-            "md": ["toolbar.md.css"]
+            "md": ["toolbar.md.css"],
+            "ionic": ["toolbar.ionic.css"]
         };
     }
     static get properties() {

package/dist/collection/components/toolbar/toolbar.md.css

@@ -1,36 +1,3 @@
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
 /**
  * A heuristic that applies CSS to tablet
  * viewports.
@@ -84,20 +51,10 @@
   padding-right: var(--ion-safe-area-right);
   padding-left: var(--ion-safe-area-left);
   color: var(--color);
-  font-family: var(--ion-font-family, inherit);
   contain: content;
-  z-index: 10;
   box-sizing: border-box;
 }
 
-:host(.ion-color) {
-  color: var(--ion-color-contrast);
-}
-
-:host(.ion-color) .toolbar-background {
-  background: var(--ion-color-base);
-}
-
 .toolbar-container {
   -webkit-padding-start: var(--padding-start);
   padding-inline-start: var(--padding-start);
@@ -114,13 +71,12 @@
   min-height: var(--min-height);
   contain: content;
   overflow: hidden;
-  z-index: 10;
   box-sizing: border-box;
 }
 
 .toolbar-background {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -131,17 +87,104 @@
   background: var(--background);
   contain: strict;
   opacity: calc(var(--opacity) * var(--opacity-scale));
-  z-index: -1;
   pointer-events: none;
 }
 
 ::slotted(ion-progress-bar) {
-  left: 0;
   right: 0;
+  left: 0;
   bottom: 0;
   position: absolute;
 }
 
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+:host {
+  font-family: var(--ion-font-family, inherit);
+  z-index: 10;
+}
+
+:host(.ion-color) {
+  color: var(--ion-color-contrast);
+}
+
+:host(.ion-color) .toolbar-background {
+  background: var(--ion-color-base);
+}
+
+.toolbar-container {
+  z-index: 10;
+}
+
+.toolbar-background {
+  z-index: -1;
+}
+
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

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

@@ -1,13 +1,148 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { getMode, setMode, setPlatformHelpers } from "@stencil/core";
+import { Build, getMode, setMode, setPlatformHelpers, getElement } 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;
-export 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.
+ */
+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) {
+        window.requestIdleCallback(callback);
+    }
+    else {
+        setTimeout(callback, 32);
+    }
+};
+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 initialize = (userConfig = {}) => {
     if (typeof window === 'undefined') {
@@ -36,33 +171,114 @@ 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 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)) {
-                    console.warn('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
+    // ----------------------------------------------
+    if (Build.isBrowser) {
+        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('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());
+        });
+    }
 };
 export default initialize;