@ionic/core 8.4.2-dev.11736265112.120bf7af → 8.4.2-dev.11736507189.18234064

package/dist/collection/components/action-sheet/action-sheet.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
@@ -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
@@ -306,11 +318,11 @@
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
   --button-background: linear-gradient(0deg, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08), rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08) 50%, transparent 50%) bottom/100% 1px no-repeat transparent;
   --button-background-activated: var(--ion-text-color, #000);
-  --button-background-activated-opacity: .08;
+  --button-background-activated-opacity: 0.08;
   --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-background-selected: var(--ion-color-step-150, var(--ion-background-color-step-150, var(--ion-background-color, #fff)));
   --button-background-selected-opacity: 1;
   --button-color: var(--ion-color-primary, #0054e9);

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: 'fbc2ba15549c2ab04e759e82df6e177fd80cc0a6', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '748ee5235d0b4cb26d6f1b7589f77af2e37ad28a', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '7ce5fa236cf75e9b1e49c4725c9a811078706554', class: "action-sheet-container" }, h("div", { key: 'dc2251f3bcee4a93e3449f09621cbd2b65d329e9', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { key: '48d325c8a852f56ed57a9ada1a6709d05ba32ee2', 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: '7659a1adf883ec1c01459baceda834b4e2bb132e', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '87bb520aaf7fb31f990d7d04558a5e1990825ecb', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: 'b5e286ecd8b4105b209682c438a6c96819addd77', class: "action-sheet-container" }, h("div", { key: '07b65d599fbecd1f0640ce782c0b058a4881a232', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { key: 'e6e9a3d8c8bb269d36b9dedc6adc175491c19f05', id: headerID, class: {
                 'action-sheet-title': true,
                 'action-sheet-has-sub-title': this.subHeader !== undefined,
-            } }, header, this.subHeader && h("div", { key: '66093728052eb67f37a35f3232761ce4a08896f3', 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: 'f4eb8e3e2885b85af5080df18d0de0bdd1d719de', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: '169f4eb09255aba85062baad49ceb151239fbfb7' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: '25fb8a466dd67ea94c79cfb4f9965527e1ce6d42', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: 'eb5b071e120a2c86afdf967af6a763a43044d1ca', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", { key: '452ad7e1052b2c681e2d98de8193949755ad4d54' })))))), h("div", { key: 'e1cecf280c987c050d9445e2c458b903f153089b', tabindex: "0", "aria-hidden": "true" })));
+            } }, header, this.subHeader && h("div", { key: 'f0dcc3a35d68a48f32ff0d3ffdd5a8d3a588911d', 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: '6b7c5aa7b48960744be71ae258802f914d7f4e90', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: 'd3376d3c472280e5a6a105874fc61af7f74d988f' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: 'f36c3759723767d601591a831e341dbfa4f2ec00', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: '05edbfc2ead662a2534321a7f3bc38418ee7f4ed', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), theme === 'md' && h("ion-ripple-effect", { key: 'a0b7d36520b57ae99f0e2abfebf093ccbad9c52f' })))))), h("div", { key: '8848db646e85251ed03a91ccac262cb45b9ef55b', tabindex: "0", "aria-hidden": "true" })));
     }
     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() {
@@ -234,8 +238,6 @@ export class ActionSheet {
                         }],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "overlay-index",
                 "reflect": false
             },
@@ -261,9 +263,7 @@ export class ActionSheet {
                             "text": undefined
                         }],
                     "text": ""
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "hasController": {
                 "type": "boolean",
@@ -282,8 +282,6 @@ export class ActionSheet {
                         }],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "has-controller",
                 "reflect": false,
                 "defaultValue": "false"
@@ -302,8 +300,6 @@ export class ActionSheet {
                     "tags": [],
                     "text": "If `true`, the keyboard will be automatically dismissed when the overlay is presented."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "keyboard-close",
                 "reflect": false,
                 "defaultValue": "true"
@@ -327,9 +323,7 @@ export class ActionSheet {
                 "docs": {
                     "tags": [],
                     "text": "Animation to use when the action sheet is presented."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "leaveAnimation": {
                 "type": "unknown",
@@ -350,9 +344,7 @@ export class ActionSheet {
                 "docs": {
                     "tags": [],
                     "text": "Animation to use when the action sheet is dismissed."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "buttons": {
                 "type": "unknown",
@@ -374,8 +366,6 @@ export class ActionSheet {
                     "tags": [],
                     "text": "An array of buttons for the action sheet."
                 },
-                "getter": false,
-                "setter": false,
                 "defaultValue": "[]"
             },
             "cssClass": {
@@ -392,8 +382,6 @@ export class ActionSheet {
                     "tags": [],
                     "text": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "css-class",
                 "reflect": false
             },
@@ -411,8 +399,6 @@ export class ActionSheet {
                     "tags": [],
                     "text": "If `true`, the action sheet will be dismissed when the backdrop is clicked."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "backdrop-dismiss",
                 "reflect": false,
                 "defaultValue": "true"
@@ -431,8 +417,6 @@ export class ActionSheet {
                     "tags": [],
                     "text": "Title for the action sheet."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "header",
                 "reflect": false
             },
@@ -450,8 +434,6 @@ export class ActionSheet {
                     "tags": [],
                     "text": "Subtitle for the action sheet."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "sub-header",
                 "reflect": false
             },
@@ -467,10 +449,8 @@ 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)."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "translucent",
                 "reflect": false,
                 "defaultValue": "false"
@@ -489,8 +469,6 @@ export class ActionSheet {
                     "tags": [],
                     "text": "If `true`, the action sheet will animate."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "animated",
                 "reflect": false,
                 "defaultValue": "true"
@@ -508,9 +486,7 @@ export class ActionSheet {
                 "docs": {
                     "tags": [],
                     "text": "Additional attributes to pass to the action sheet."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "isOpen": {
                 "type": "boolean",
@@ -526,8 +502,6 @@ export class ActionSheet {
                     "tags": [],
                     "text": "If `true`, the action sheet will open. If `false`, the action sheet will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the actionSheetController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe action sheet dismisses. You will need to do that in your code."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "is-open",
                 "reflect": false,
                 "defaultValue": "false"
@@ -546,8 +520,6 @@ export class ActionSheet {
                     "tags": [],
                     "text": "An ID corresponding to the trigger element that\ncauses the action sheet to open when clicked."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "trigger",
                 "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() {
@@ -326,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;
@@ -368,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;
@@ -384,7 +385,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 subHdrId = `alert-${overlayIndex}-sub-hdr`;
         const msgId = `alert-${overlayIndex}-msg`;
@@ -396,22 +397,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, Object.assign({ key: 'ad7e14b4f92a09387aa80abfb718a755e4e889d6', role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'ed3805c5dc476a0c27bcbb2e014c445e571651d6', 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: '4b4693dca3c910aa9a61c4d90295d785ec6cbe3d', tappable: this.backdropDismiss }), h("div", { key: '64fd19b8f1d8246dcc869053f858bc33506def4b', tabindex: "0", "aria-hidden": "true" }), 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 && !header && (h("h2", { key: '9c9854dc3b0ad40f1861a49b76d5636afcae9c74', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: '19aaca9912f77cde4ae8079be210eda697ed8de1', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: 'a85d27c516f7cdbc85b19f40d2f0bd865490b6a7', 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: '5325904f185ef82ea89bea5658a3ed2e9377033b', tappable: this.backdropDismiss }), h("div", { key: '321aba838acd718f4df2c293db72a42e0e064aeb', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '0339606e51d924a017b61f40adc4cc57d2941f12', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '2a31b7095cfb8f7f29d6c4d0bc580b083c40a308', class: "alert-head" }, header && (h("h2", { key: '801b64c9a76d8eb216f23645f729fbbd4d53697e', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: '7a0c5525693b59893e2261ea3b6cc320db86dd32', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: 'c1356e9e74cbac684ad22e0788371297c7d7622f', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '770d281aeedca28435090dd04ff9191eb540ffdc', 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.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() {
@@ -433,8 +436,6 @@ export class Alert {
                         }],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "overlay-index",
                 "reflect": false
             },
@@ -460,9 +461,7 @@ export class Alert {
                             "text": undefined
                         }],
                     "text": ""
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "hasController": {
                 "type": "boolean",
@@ -481,8 +480,6 @@ export class Alert {
                         }],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "has-controller",
                 "reflect": false,
                 "defaultValue": "false"
@@ -501,8 +498,6 @@ export class Alert {
                     "tags": [],
                     "text": "If `true`, the keyboard will be automatically dismissed when the overlay is presented."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "keyboard-close",
                 "reflect": false,
                 "defaultValue": "true"
@@ -526,9 +521,7 @@ export class Alert {
                 "docs": {
                     "tags": [],
                     "text": "Animation to use when the alert is presented."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "leaveAnimation": {
                 "type": "unknown",
@@ -549,9 +542,7 @@ export class Alert {
                 "docs": {
                     "tags": [],
                     "text": "Animation to use when the alert is dismissed."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "cssClass": {
                 "type": "string",
@@ -567,8 +558,6 @@ export class Alert {
                     "tags": [],
                     "text": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "css-class",
                 "reflect": false
             },
@@ -586,8 +575,6 @@ export class Alert {
                     "tags": [],
                     "text": "The main title in the heading of the alert."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "header",
                 "reflect": false
             },
@@ -605,8 +592,6 @@ export class Alert {
                     "tags": [],
                     "text": "The subtitle in the heading of the alert. Displayed under the title."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "sub-header",
                 "reflect": false
             },
@@ -630,8 +615,6 @@ export class Alert {
                     "tags": [],
                     "text": "The main message to be displayed in the alert.\n`message` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\nThis property accepts custom HTML as a string.\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "message",
                 "reflect": false
             },
@@ -655,8 +638,6 @@ export class Alert {
                     "tags": [],
                     "text": "Array of buttons to be added to the alert."
                 },
-                "getter": false,
-                "setter": false,
                 "defaultValue": "[]"
             },
             "inputs": {
@@ -679,8 +660,6 @@ export class Alert {
                     "tags": [],
                     "text": "Array of input to show in the alert."
                 },
-                "getter": false,
-                "setter": false,
                 "defaultValue": "[]"
             },
             "backdropDismiss": {
@@ -697,8 +676,6 @@ export class Alert {
                     "tags": [],
                     "text": "If `true`, the alert will be dismissed when the backdrop is clicked."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "backdrop-dismiss",
                 "reflect": false,
                 "defaultValue": "true"
@@ -715,10 +692,8 @@ 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,
                 "attribute": "translucent",
                 "reflect": false,
                 "defaultValue": "false"
@@ -737,8 +712,6 @@ export class Alert {
                     "tags": [],
                     "text": "If `true`, the alert will animate."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "animated",
                 "reflect": false,
                 "defaultValue": "true"
@@ -756,9 +729,7 @@ export class Alert {
                 "docs": {
                     "tags": [],
                     "text": "Additional attributes to pass to the alert."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "isOpen": {
                 "type": "boolean",
@@ -774,8 +745,6 @@ export class Alert {
                     "tags": [],
                     "text": "If `true`, the alert will open. If `false`, the alert will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the alertController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe alert dismisses. You will need to do that in your code."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "is-open",
                 "reflect": false,
                 "defaultValue": "false"
@@ -794,8 +763,6 @@ export class Alert {
                     "tags": [],
                     "text": "An ID corresponding to the trigger element that\ncauses the alert to open when clicked."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "trigger",
                 "reflect": false
             }