@ionic/core 8.8.9-dev.11780414486.1df2bd72 → 8.8.9-dev.11780493108.1d8e1a89

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

@@ -1,3 +1,64 @@
+/**
+ * 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;
+ *   }
+ * }
+ */
+/**
+ * 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.
+ */
+/**
+ * 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
@@ -74,8 +135,8 @@
   --max-height: 90%;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -288,6 +349,40 @@ textarea.alert-input {
   resize: none;
 }
 
+.alert-radio-label,
+.alert-checkbox-label {
+  display: flex;
+  align-items: center;
+}
+
+.select-option-content {
+  flex: 1;
+}
+
+.select-option-description {
+  display: block;
+}
+
+.alert-radio-label,
+.alert-checkbox-label {
+  gap: 12px;
+}
+
+.select-option-description {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 5px;
+  padding-bottom: 0;
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  font-size: 0.75rem;
+}
+
+/**
+ * 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
@@ -343,6 +438,12 @@ textarea.alert-input {
  *   }
  * }
  */
+/**
+ * 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/alert/alert.js

@@ -7,18 +7,20 @@ import { createButtonActiveGesture } from "../../utils/gesture/button-active";
 import { raf } from "../../utils/helpers";
 import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
-import { BACKDROP, cleanupRootFocusTrapAccessibility, createDelegateController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
+import { createDelegateController, createTriggerController, BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
+import { renderOptionLabel } from "../../utils/select-option-render";
 import { getClassMap } from "../../utils/theme";
 import { config } from "../../global/config";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonMode, getIonTheme } from "../../global/ionic-global";
 import { iosEnterAnimation } from "./animations/ios.enter";
 import { iosLeaveAnimation } from "./animations/ios.leave";
 import { mdEnterAnimation } from "./animations/md.enter";
 import { mdLeaveAnimation } from "./animations/md.leave";
 // TODO(FW-2832): types
 /**
- * @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.
  */
 export class Alert {
     constructor() {
@@ -50,7 +52,7 @@ export class Alert {
         this.backdropDismiss = true;
         /**
          * If `true`, the alert will be translucent.
-         * Only applies when the mode is `"ios"` and the device supports
+         * Only applies when the theme is `"ios"` and the device supports
          * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          */
         this.translucent = false;
@@ -179,22 +181,7 @@ export class Alert {
         this.inputType = inputTypes.values().next().value;
         this.processedInputs = inputs.map((i, index) => {
             var _a;
-            return ({
-                type: i.type || 'text',
-                name: i.name || `${index}`,
-                placeholder: i.placeholder || '',
-                value: i.value,
-                label: i.label,
-                checked: !!i.checked,
-                disabled: !!i.disabled,
-                id: i.id || `alert-input-${this.overlayIndex}-${index}`,
-                handler: i.handler,
-                min: i.min,
-                max: i.max,
-                cssClass: (_a = i.cssClass) !== null && _a !== void 0 ? _a : '',
-                attributes: i.attributes || {},
-                tabindex: i.type === 'radio' && i !== focusable ? -1 : 0,
-            });
+            return Object.assign(Object.assign({}, i), { type: i.type || 'text', name: i.name || `${index}`, placeholder: i.placeholder || '', checked: !!i.checked, disabled: !!i.disabled, id: i.id || `alert-input-${this.overlayIndex}-${index}`, cssClass: (_a = i.cssClass) !== null && _a !== void 0 ? _a : '', attributes: i.attributes || {}, tabindex: i.type === 'radio' && i !== focusable ? -1 : 0 });
         });
     }
     connectedCallback() {
@@ -222,10 +209,6 @@ export class Alert {
             this.gesture.destroy();
             this.gesture = undefined;
         }
-        // Clean up aria-hidden if removed without dismiss() being called
-        if (this.presented) {
-            cleanupRootFocusTrapAccessibility();
-        }
         (_a = this.buttonGroupResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.buttonGroupResizeObserver = undefined;
     }
@@ -392,18 +375,50 @@ export class Alert {
     }
     renderCheckbox() {
         const inputs = this.processedInputs;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         if (inputs.length === 0) {
             return null;
         }
-        return (h("div", { class: "alert-checkbox-group" }, inputs.map((i) => (h("button", { type: "button", onClick: () => this.cbClick(i), "aria-checked": `${i.checked}`, id: i.id, disabled: i.disabled, tabIndex: i.tabindex, role: "checkbox", class: Object.assign(Object.assign({}, getClassMap(i.cssClass)), { 'alert-tappable': true, 'alert-checkbox': true, 'alert-checkbox-button': true, 'ion-focusable': true, 'alert-checkbox-button-disabled': i.disabled || false }) }, h("div", { class: "alert-button-inner" }, h("div", { class: "alert-checkbox-icon" }, h("div", { class: "alert-checkbox-inner" })), h("div", { class: "alert-checkbox-label" }, i.label)), mode === 'md' && h("ion-ripple-effect", null))))));
+        return (h("div", { class: "alert-checkbox-group" }, inputs.map((i) => {
+            /**
+             * Cast to `SelectAlertInput` to access rich content
+             * fields (`startContent`, `endContent`, `description`)
+             * that are passed through from `ion-select` but not
+             * part of the public `AlertInput` interface.
+             */
+            const richInput = i;
+            const optionLabelOptions = {
+                id: richInput.id,
+                label: richInput.label,
+                startContent: richInput.startContent,
+                endContent: richInput.endContent,
+                description: richInput.description,
+            };
+            return (h("button", { type: "button", onClick: () => this.cbClick(i), "aria-checked": `${i.checked}`, id: i.id, disabled: i.disabled, tabIndex: i.tabindex, role: "checkbox", class: Object.assign(Object.assign({}, getClassMap(i.cssClass)), { 'alert-tappable': true, 'alert-checkbox': true, 'alert-checkbox-button': true, 'ion-focusable': true, 'alert-checkbox-button-disabled': i.disabled || false }) }, h("div", { class: "alert-button-inner" }, h("div", { class: "alert-checkbox-icon" }, h("div", { class: "alert-checkbox-inner" })), renderOptionLabel(optionLabelOptions, 'alert-checkbox-label')), theme === 'md' && h("ion-ripple-effect", null)));
+        })));
     }
     renderRadio() {
         const inputs = this.processedInputs;
         if (inputs.length === 0) {
             return null;
         }
-        return (h("div", { class: "alert-radio-group", role: "radiogroup", "aria-activedescendant": this.activeId }, inputs.map((i) => (h("button", { type: "button", onClick: () => this.rbClick(i), "aria-checked": `${i.checked}`, disabled: i.disabled, id: i.id, tabIndex: i.tabindex, class: Object.assign(Object.assign({}, getClassMap(i.cssClass)), { 'alert-radio-button': true, 'alert-tappable': true, 'alert-radio': true, 'ion-focusable': true, 'alert-radio-button-disabled': i.disabled || false }), role: "radio" }, h("div", { class: "alert-button-inner" }, h("div", { class: "alert-radio-icon" }, h("div", { class: "alert-radio-inner" })), h("div", { class: "alert-radio-label" }, i.label)))))));
+        return (h("div", { class: "alert-radio-group", role: "radiogroup", "aria-activedescendant": this.activeId }, inputs.map((i) => {
+            /**
+             * Cast to `SelectAlertInput` to access rich content
+             * fields (`startContent`, `endContent`, `description`)
+             * that are passed through from `ion-select` but not
+             * part of the public `AlertInput` interface.
+             */
+            const richInput = i;
+            const optionLabelOptions = {
+                id: richInput.id,
+                label: richInput.label,
+                startContent: richInput.startContent,
+                endContent: richInput.endContent,
+                description: richInput.description,
+            };
+            return (h("button", { type: "button", onClick: () => this.rbClick(i), "aria-checked": `${i.checked}`, disabled: i.disabled, id: i.id, tabIndex: i.tabindex, class: Object.assign(Object.assign({}, getClassMap(i.cssClass)), { 'alert-radio-button': true, 'alert-tappable': true, 'alert-radio': true, 'ion-focusable': true, 'alert-radio-button-disabled': i.disabled || false }), role: "radio" }, h("div", { class: "alert-button-inner" }, h("div", { class: "alert-radio-icon" }, h("div", { class: "alert-radio-inner" })), renderOptionLabel(optionLabelOptions, 'alert-radio-label'))));
+        })));
     }
     renderInput() {
         const inputs = this.processedInputs;
@@ -478,12 +493,12 @@ export class Alert {
     }
     renderAlertButtons() {
         const buttons = this.processedButtons;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const alertButtonGroupClass = {
             'alert-button-group': true,
             'alert-button-group-vertical': buttons.length > 2 || this.isButtonGroupWrapped,
         };
-        return (h("div", { class: alertButtonGroupClass, ref: (el) => (this.buttonGroupEl = el) }, buttons.map((button) => (h("button", Object.assign({}, button.htmlAttributes, { type: "button", id: button.id, class: buttonClass(button), tabIndex: 0, onClick: () => this.buttonClick(button) }), h("span", { class: "alert-button-inner" }, button.text), mode === 'md' && h("ion-ripple-effect", null))))));
+        return (h("div", { class: alertButtonGroupClass, ref: (el) => (this.buttonGroupEl = el) }, buttons.map((button) => (h("button", Object.assign({}, button.htmlAttributes, { type: "button", id: button.id, class: buttonClass(button), tabIndex: 0, onClick: () => this.buttonClick(button) }), h("span", { class: "alert-button-inner" }, button.text), theme === 'md' && h("ion-ripple-effect", null))))));
     }
     renderAlertMessage(msgId) {
         const { customHTMLEnabled, message } = this;
@@ -494,7 +509,7 @@ export class Alert {
     }
     render() {
         const { overlayIndex, header, subHeader, message, htmlAttributes } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const hdrId = `alert-${overlayIndex}-hdr`;
         const msgId = `alert-${overlayIndex}-msg`;
         const subHdrId = `alert-${overlayIndex}-sub-hdr`;
@@ -506,22 +521,24 @@ export class Alert {
          * If neither are defined, do not set aria-labelledby.
          */
         const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
-        return (h(Host, { key: '80642b44e08bcbe73f7a217578f89716827e2f7d', tabindex: "-1", style: {
+        return (h(Host, { key: '2989941c96a6cf912a138dfa4a5b2f498732f9ce', tabindex: "-1", style: {
                 zIndex: `${20000 + overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: 'f7777dfd624d4a6253681bf36ab3b66389617fb5', tappable: this.backdropDismiss }), h("div", { key: '2a3a03bae54ff66d7d182d41eda7158b5228fdbc', tabindex: "0", "aria-hidden": "true" }), h("div", Object.assign({ key: '255051adf9deeb3d9b872906b8eaa4a93075325c', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el) }, htmlAttributes), h("div", { key: '3039e1a0f37617b9cba644b259b62097401cf84b', class: "alert-head" }, header && (h("h2", { key: 'b65dc3fa312a520d893d0710a28d72dfad17d020', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: 'e1f9bd496f2baaa28c7c0c6efb7b84591d1548de', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: 'ffa52291e21ee6a56bf11abbef87c698512ae477', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '5db1dce6054f16ea8da7830754c740ace31eb9d1', tabindex: "0", "aria-hidden": "true" })));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: '9bd0b98932ef02b49bc3c158593bbd335d5572e7', tappable: this.backdropDismiss }), h("div", { key: 'b73aac37b66bd452d2af71e8af93f7cb203b1e6f', tabindex: "0", "aria-hidden": "true" }), h("div", Object.assign({ key: '3800988e5748bea78838aa2056de5294964b4123', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el) }, htmlAttributes), h("div", { key: '64d55d99033424bcf6f6e1d8e98cf4cffa4327cd', class: "alert-head" }, header && (h("h2", { key: '25249605494fe90975a242b41085bf1561eab9f9', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: '7cff7a2286199593b34ae21b47efd8b1402c8b59', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: 'aad62db41db68ed4b7f643be92b4c025027835a3', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: 'f39c5f551d76bffcff96f0dec8cd0e54c442c116', tabindex: "0", "aria-hidden": "true" })));
     }
     static get is() { return "ion-alert"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "ios": ["alert.ios.scss"],
-            "md": ["alert.md.scss"]
+            "md": ["alert.md.scss"],
+            "ionic": ["alert.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["alert.ios.css"],
-            "md": ["alert.md.css"]
+            "md": ["alert.md.css"],
+            "ionic": ["alert.ionic.css"]
         };
     }
     static get properties() {
@@ -831,7 +848,7 @@ export class Alert {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the alert will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
+                    "text": "If `true`, the alert will be translucent.\nOnly applies when the theme is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1,3 +1,64 @@
+/**
+ * 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;
+ *   }
+ * }
+ */
+/**
+ * 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.
+ */
+/**
+ * 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
@@ -74,8 +135,8 @@
   --max-height: 90%;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -288,6 +349,40 @@ textarea.alert-input {
   resize: none;
 }
 
+.alert-radio-label,
+.alert-checkbox-label {
+  display: flex;
+  align-items: center;
+}
+
+.select-option-content {
+  flex: 1;
+}
+
+.select-option-description {
+  display: block;
+}
+
+.alert-radio-label,
+.alert-checkbox-label {
+  gap: 12px;
+}
+
+.select-option-description {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 5px;
+  padding-bottom: 0;
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  font-size: 0.75rem;
+}
+
+/**
+ * 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
@@ -343,6 +438,12 @@ textarea.alert-input {
  *   }
  * }
  */
+/**
+ * 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/app/app.js

@@ -1,58 +1,15 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Build, Host, h } from "@stencil/core";
-import { shouldUseCloseWatcher } from "../../utils/hardware-back-button";
-import { printIonWarning } from "../../utils/logging/index";
-import { isPlatform } from "../../utils/platform";
+import { Host, h } from "@stencil/core";
+import { focusElements } from "../../utils/focus-visible";
 import { config } from "../../global/config";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
+/**
+ * @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.
+ */
 export class App {
-    componentDidLoad() {
-        if (Build.isBrowser) {
-            this.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) => (this.focusVisible = module.startFocusVisible()));
-            });
-        }
-    }
-    disconnectedCallback() {
-        if (this.loadTimeout) {
-            clearTimeout(this.loadTimeout);
-        }
-    }
     /**
      * 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
@@ -65,22 +22,16 @@ export class App {
      * @param elements An array of HTML elements to set focus on.
      */
     async setFocus(elements) {
-        if (this.focusVisible) {
-            this.focusVisible.setFocus(elements);
-        }
-    }
-    rIC(callback) {
-        if ('requestIdleCallback' in window) {
-            window.requestIdleCallback(callback);
-        }
-        else {
-            this.loadTimeout = setTimeout(callback, 32);
-        }
+        /**
+         * The focus-visible utility is used to set focus on an
+         * element that uses `ion-focusable`.
+         */
+        focusElements(elements);
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '77a7459d3e42b3715a5a7e1cf468e2ebc99e54bb', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '3b7e84c7c4187287123413f90838cda89136b2a4', class: {
+                [theme]: true,
                 'ion-page': true,
                 'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
             } }));
@@ -130,22 +81,3 @@ export class App {
     }
     static get elementRef() { return "el"; }
 }
-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;
-};