@ionic/core 8.3.2-dev.11728333520.118877e0 → 8.3.2-dev.11729014526.1ab61c12

package/dist/collection/components/action-sheet/action-sheet.js

@@ -7,13 +7,14 @@ import { raf } from "../../utils/helpers";
 import { createLockController } from "../../utils/lock-controller";
 import { BACKDROP, createDelegateController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
 import { getClassMap } from "../../utils/theme";
-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";
 /**
- * @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 ActionSheet {
     constructor() {
@@ -152,6 +153,7 @@ export class ActionSheet {
         }
     }
     componentDidLoad() {
+        const mode = getIonMode(this);
         /**
          * Only create gesture if:
          * 1. A gesture does not already exist
@@ -160,7 +162,7 @@ export class ActionSheet {
          * 4. A group ref exists
          */
         const { groupEl, wrapperEl } = this;
-        if (!this.gesture && getIonMode(this) === 'ios' && wrapperEl && groupEl) {
+        if (!this.gesture && mode === 'ios' && wrapperEl && groupEl) {
             readTask(() => {
                 const isScrollable = groupEl.scrollHeight > groupEl.clientHeight;
                 if (!isScrollable) {
@@ -189,30 +191,32 @@ export class ActionSheet {
     }
     render() {
         const { header, htmlAttributes, overlayIndex } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const allButtons = this.getButtons();
         const cancelButton = allButtons.find((b) => b.role === 'cancel');
         const buttons = allButtons.filter((b) => b.role !== 'cancel');
         const headerID = `action-sheet-${overlayIndex}-header`;
-        return (h(Host, Object.assign({ key: '7bbd202ca9e19727e7514abbe073687d982f80c3', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '7fbcf04cb0243a39d87b08b29265880c92f0ad3f', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '23344a9221a2e6720d7b9de5249dc37256cafa7b', tappable: this.backdropDismiss }), h("div", { key: 'd46361bb5cdc32a7922dcf76b566f358a6174bfa', tabindex: "0" }), h("div", { key: '136c3f2e77c8a2eac8e9ae4bb13d735e1d62598d', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '6168ea8b2be42020b2edeb8ff3a0f3d1254be37a', class: "action-sheet-container" }, h("div", { key: '29b9e6619dc54574733a704d6bf885839151bd84', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { key: '536ce764bfddb3816ea3512d90f4acef2ccb8589', id: headerID, class: {
+            }, class: Object.assign(Object.assign({ [theme]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '897a78d622d666b27410354501317b0b3eb48093', tappable: this.backdropDismiss }), h("div", { key: 'ad5c42ebfa41a89cac1df8167afa76c8e9bd3947', tabindex: "0" }), h("div", { key: '18c881b0df474f53959f14a497e050d2a7ec2eb7', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: 'f2788afe2d371e80244c13ba6c259894a5ffe6ea', class: "action-sheet-container" }, h("div", { key: 'a48766378a6951da925707e59a662a2371544083', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { key: 'a76b97ed07af33785ed48bfede75658081b4ad43', id: headerID, class: {
                 'action-sheet-title': true,
                 'action-sheet-has-sub-title': this.subHeader !== undefined,
-            } }, header, this.subHeader && h("div", { key: '6d888219145824fd36cdfe0d3c8388bbf2769777', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && h("ion-ripple-effect", null))))), cancelButton && (h("div", { key: '46f98f0ed5a9bdb3e35feb9ae71c4489c17b7d77', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: 'e3c457bced8ad5f692e48de26e65f731fd631b4f' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: '4cba6dc559f734ecc852e024959210cd0dd25354', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: '9df64989aad1b4d1e75edf4d37ab208965cfe37f', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", { key: '558089275a29177cefdb2e38eefc9b5c8b62872b' })))))), h("div", { key: 'fa4df6e043b00a6e4126dbc71cb344cfc2b2e7bc', tabindex: "0" })));
+            } }, header, this.subHeader && h("div", { key: '7e033981ae660204fd71a1f983e383d6601ad688', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), theme === 'md' && h("ion-ripple-effect", null))))), cancelButton && (h("div", { key: '404f04670ad494b7a6578167d2e2935197550185', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: '49b4a535e6749b9dbac135d064831457c43b6e35' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: '159fd069191f32b962bda834756a7f0d7e1b1ca0', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: 'c06fb27fa0b3daad25d621124f44f3ec6c4bf015', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), theme === 'md' && h("ion-ripple-effect", { key: 'f6d6179b58da0dfe3310fe957c0441fd20abb47a' })))))), h("div", { key: '3222a9753771914b523a98354ef6d2373bb19aa2', tabindex: "0" })));
     }
     static get is() { return "ion-action-sheet"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "ios": ["action-sheet.ios.scss"],
-            "md": ["action-sheet.md.scss"]
+            "md": ["action-sheet.md.scss"],
+            "ionic": ["action-sheet.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["action-sheet.ios.css"],
-            "md": ["action-sheet.md.css"]
+            "md": ["action-sheet.md.css"],
+            "ionic": ["action-sheet.md.css"]
         };
     }
     static get properties() {
@@ -445,7 +449,7 @@ export class ActionSheet {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the action sheet 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 action sheet 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)."
                 },
                 "attribute": "translucent",
                 "reflect": false,

package/dist/collection/components/action-sheet/action-sheet.md.css

@@ -1,3 +1,9 @@
+/**
+ * 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
@@ -98,8 +104,8 @@
   --max-height: calc(100% - (var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   display: block;
@@ -116,8 +122,8 @@
 }
 
 .action-sheet-wrapper {
-  left: 0;
   right: 0;
+  left: 0;
   bottom: 0;
   transform: translate3d(0,  100%,  0);
   display: block;
@@ -204,8 +210,8 @@
 }
 
 .action-sheet-button::after {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -246,6 +252,12 @@
     opacity: var(--button-background-hover-opacity);
   }
 }
+/**
+ * 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
@@ -310,9 +322,9 @@
   --button-background-activated: transparent;
   --button-background-activated-opacity: 0;
   --button-background-hover: currentColor;
-  --button-background-hover-opacity: .04;
+  --button-background-hover-opacity: 0.04;
   --button-background-focused: currentColor;
-  --button-background-focused-opacity: .12;
+  --button-background-focused-opacity: 0.12;
   --button-color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
   --button-color-disabled: var(--button-color);
   --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);

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

@@ -1,3 +1,9 @@
+/**
+ * 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 +80,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 +294,12 @@ textarea.alert-input {
   resize: none;
 }
 
+/**
+ * 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 +355,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

@@ -10,14 +10,15 @@ import { createDelegateController, createTriggerController, BACKDROP, dismiss, e
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 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() {
@@ -212,27 +213,7 @@ export class Alert {
     async present() {
         const unlock = await this.lockController.lock();
         await this.delegateController.attachViewToDom();
-        const ariaDescribedBy = this.el.getAttribute('aria-describedby');
-        const ariaLabelledBy = this.el.getAttribute('aria-labelledby');
-        if (ariaDescribedBy) {
-            this.el.removeAttribute('aria-describedby');
-        }
-        if (ariaLabelledBy) {
-            this.el.removeAttribute('aria-labelledby');
-        }
-        await present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation).then(() => {
-            const firstButton = this.el.querySelector('.alert-button-role-cancel') ||
-                this.el.querySelector('.alert-button');
-            if (firstButton) {
-                firstButton.focus();
-            }
-            if (ariaDescribedBy) {
-                this.el.setAttribute('aria-describedby', ariaDescribedBy);
-            }
-            if (ariaLabelledBy) {
-                this.el.setAttribute('aria-labelledby', ariaLabelledBy);
-            }
-        });
+        await present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation);
         unlock();
     }
     /**
@@ -346,11 +327,11 @@ 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) => (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)), theme === 'md' && h("ion-ripple-effect", null))))));
     }
     renderRadio() {
         const inputs = this.processedInputs;
@@ -388,12 +369,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,
         };
-        return (h("div", { class: alertButtonGroupClass }, 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 }, 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;
@@ -404,34 +385,34 @@ 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 subHdrId = `alert-${overlayIndex}-sub-hdr`;
         const msgId = `alert-${overlayIndex}-msg`;
         const role = this.inputs.length > 0 || this.buttons.length > 0 ? 'alertdialog' : 'alert';
         /**
-         * Use both the header and subHeader ids if they are defined.
-         * If only the header is defined, use the header id.
-         * If only the subHeader is defined, use the subHeader id.
-         * If neither are defined, do not set aria-labelledby.
+         * If the header is defined, use that. Otherwise, fall back to the subHeader.
+         * If neither is defined, don't set aria-labelledby.
          */
-        const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
-        return (h(Host, Object.assign({ key: '791c3ba1f6abcda8fe153b4955f23606a0b3a9aa', role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { style: {
+        const ariaLabelledBy = header ? hdrId : subHeader ? subHdrId : null;
+        return (h(Host, Object.assign({ key: 'f94be430d013dbed789006bf51f7fa15c2ab9a52', role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { 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: '54b07de06a8afa1ada43aa4913ac0c2a426cb481', tappable: this.backdropDismiss }), h("div", { key: 'b1a2b429da950955986e8f8a8c1876494d1d4e41', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '8b2717b23acc271f0745b321d637cb2f57a82cd3', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '05cda2b08bfd8446f9b3173cf90cf54152c27615', class: "alert-head" }, header && (h("h2", { key: '7c186a1e3d14c482020262627f769bf2305e4d66', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: '425ac023c9bf6d401137424f8d664a5404dee4b7', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: 'c9444dc007533a99e98b6524e45049d344ec4015', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: 'de8934de31a8c655fd78d069a39a4927544e93ce', 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: 'f2e2ea4faa80e01396af170366706e8693fc62af', tappable: this.backdropDismiss }), h("div", { key: '43d3d320a194da2cf641e426a8f0da7305221010', tabindex: "0" }), h("div", { key: 'e61ba6f339c3a02cecd37d8b641ee5043018eb29', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '044e00667ffcb74aa2c5e0d0b42669c4004dbb4f', class: "alert-head" }, header && (h("h2", { key: '1aaae8d58722c4cf5debb1f00415ab7ed0a52bbd', id: hdrId, class: "alert-title" }, header)), subHeader && (h("h2", { key: '1a3012e49cd91380957f710bac766c163e119f72', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: 'dd77d86dcebb2c78d3325d93c70d4b7fb452d702', tabindex: "0" })));
     }
     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.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["alert.ios.css"],
-            "md": ["alert.md.css"]
+            "md": ["alert.md.css"],
+            "ionic": ["alert.md.css"]
         };
     }
     static get properties() {
@@ -709,7 +690,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)."
                 },
                 "attribute": "translucent",
                 "reflect": false,
@@ -942,10 +923,6 @@ export class Alert {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
-                        },
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
                         }
                     },
                     "return": "Promise<void>"

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

@@ -1,3 +1,9 @@
+/**
+ * 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 +80,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 +294,12 @@ textarea.alert-input {
   resize: none;
 }
 
+/**
+ * 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 +355,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

@@ -6,7 +6,11 @@ import { shouldUseCloseWatcher } from "../../utils/hardware-back-button";
 import { printIonWarning } from "../../utils/logging/index";
 import { isPlatform } from "../../utils/platform";
 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) {
@@ -49,6 +53,7 @@ export class App {
         }
     }
     /**
+     * @internal
      * 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
@@ -63,9 +68,9 @@ export class App {
         }
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '96715520fd05d6f0e6fa26a8ba78792cfccd4c0a', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: 'd65c8ab0ff36058e8d66849617b530b1df43dbb7', class: {
+                [theme]: true,
                 'ion-page': true,
                 'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
             } }));
@@ -104,8 +109,11 @@ export class App {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Used to set focus on an element that uses `ion-focusable`.\nDo not use this if focusing the element as a result of a keyboard\nevent as the focus utility should handle this for us. This method\nshould be used when we want to programmatically focus an element as\na result of another user action. (Ex: We focus the first element\ninside of a popover when the user presents it, but the popover is not always\npresented as a result of keyboard action.)",
-                    "tags": []
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Used to set focus on an element that uses `ion-focusable`.\nDo not use this if focusing the element as a result of a keyboard\nevent as the focus utility should handle this for us. This method\nshould be used when we want to programmatically focus an element as\na result of another user action. (Ex: We focus the first element\ninside of a popover when the user presents it, but the popover is not always\npresented as a result of keyboard action.)"
+                        }]
                 }
             }
         };