@ionic/core 8.1.2 → 8.1.3-dev.11717426643.18ac3ae5

package/dist/collection/components/accordion/accordion.js

@@ -5,9 +5,10 @@ import { Host, h } from "@stencil/core";
 import { addEventListener, getElementRoot, raf, removeEventListener, transitionEndAsync } from "../../utils/helpers";
 import { chevronDown } from "ionicons/icons";
 import { config } from "../../global/config";
-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 header - Content is placed at the top and is used to
  * expand or collapse the accordion item.
@@ -80,11 +81,13 @@ export class Accordion {
             button.setAttribute('aria-expanded', `${expanded}`);
         };
         this.slotToggleIcon = () => {
+            var _a;
             const ionItem = this.getSlottedHeaderIonItem();
             if (!ionItem) {
                 return;
             }
-            const { toggleIconSlot, toggleIcon } = this;
+            const { toggleIconSlot } = this;
+            const accordionToggleIcon = (_a = this.toggleIcon) !== null && _a !== void 0 ? _a : config.get('accordionToggleIcon', chevronDown);
             /**
              * Check if there already is a toggle icon.
              * If so, do not add another one.
@@ -97,7 +100,7 @@ export class Accordion {
             iconEl.slot = toggleIconSlot;
             iconEl.lazy = false;
             iconEl.classList.add('ion-accordion-toggle-icon');
-            iconEl.icon = toggleIcon;
+            iconEl.icon = accordionToggleIcon;
             iconEl.setAttribute('aria-hidden', 'true');
             ionItem.appendChild(iconEl);
         };
@@ -242,7 +245,7 @@ export class Accordion {
         this.value = `ion-accordion-${accordionIds++}`;
         this.disabled = false;
         this.readonly = false;
-        this.toggleIcon = chevronDown;
+        this.toggleIcon = undefined;
         this.toggleIconSlot = 'end';
     }
     valueChanged() {
@@ -298,13 +301,13 @@ export class Accordion {
     }
     render() {
         const { disabled, readonly } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const expanded = this.state === 4 /* AccordionState.Expanded */ || this.state === 8 /* AccordionState.Expanding */;
         const headerPart = expanded ? 'header expanded' : 'header';
         const contentPart = expanded ? 'content expanded' : 'content';
         this.setAria(expanded);
-        return (h(Host, { key: '073e1d02c18dcbc20c68648426e87c14750c031d', class: {
-                [mode]: true,
+        return (h(Host, { key: 'e105f59834c5ccd5c50c388a9691358f8f720023', class: {
+                [theme]: true,
                 'accordion-expanding': this.state === 8 /* AccordionState.Expanding */,
                 'accordion-expanded': this.state === 4 /* AccordionState.Expanded */,
                 'accordion-collapsing': this.state === 2 /* AccordionState.Collapsing */,
@@ -314,7 +317,7 @@ export class Accordion {
                 'accordion-disabled': disabled,
                 'accordion-readonly': readonly,
                 'accordion-animated': this.shouldAnimate(),
-            } }, h("div", { key: '9b4cf326de8bb6b4033992903c0c1bfd7eea9bcc', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, h("slot", { key: '464c32a37f64655eacf4218284214f5f30b14a1e', name: "header" })), h("div", { key: '8bb52e6a62d7de0106b253201a89a32e79d9a594', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, h("div", { key: '1d9dfd952ad493754aaeea7a8f625b33c2dd90a0', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: '970dfbc55a612d739d0ca3b7b1a08e5c96d0c479', name: "content" })))));
+            } }, h("div", { key: 'd8657c9cf4855f78946df36cb7b3aaab6c31099a', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, h("slot", { key: '69b12865553484bd810ed80d9e6e396abb6ba9ed', name: "header" })), h("div", { key: '3f329c28eaee1bcb96d899ad17504e2cb2ff69a3', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, h("div", { key: '9579c3676935d542cb52eabc25d6701651221efb', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: '80bd3b22f80c144403dfbeba563f1a23910843e0', name: "content" })))));
     }
     static get is() { return "ion-accordion"; }
     static get encapsulation() { return "shadow"; }
@@ -322,13 +325,15 @@ export class Accordion {
     static get originalStyleUrls() {
         return {
             "ios": ["accordion.ios.scss"],
-            "md": ["accordion.md.scss"]
+            "md": ["accordion.md.scss"],
+            "ionic": ["accordion.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["accordion.ios.css"],
-            "md": ["accordion.md.css"]
+            "md": ["accordion.md.css"],
+            "ionic": ["accordion.md.css"]
         };
     }
     static get properties() {
@@ -392,18 +397,17 @@ export class Accordion {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The toggle icon to use. This icon will be\nrotated when the accordion is expanded\nor collapsed."
                 },
                 "attribute": "toggle-icon",
-                "reflect": false,
-                "defaultValue": "chevronDown"
+                "reflect": false
             },
             "toggleIconSlot": {
                 "type": "string",

package/dist/collection/components/accordion/accordion.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

package/dist/collection/components/accordion-group/accordion-group.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
@@ -53,6 +59,12 @@
  *   }
  * }
  */
+/**
+ * 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/accordion-group/accordion-group.js

@@ -3,9 +3,10 @@
  */
 import { Host, h } from "@stencil/core";
 import { printIonWarning } from "../../utils/logging/index";
-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.
  */
 export class AccordionGroup {
     constructor() {
@@ -196,26 +197,28 @@ export class AccordionGroup {
     }
     render() {
         const { disabled, readonly, expand } = this;
-        const mode = getIonMode(this);
-        return (h(Host, { key: '82f3e77066fabb4736638ee4c487ad56efd39c63', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '7652f9e1f433b51e59d6a40b3adf7a05ee1e72bb', class: {
+                [theme]: true,
                 'accordion-group-disabled': disabled,
                 'accordion-group-readonly': readonly,
                 [`accordion-group-expand-${expand}`]: true,
-            }, role: "presentation" }, h("slot", { key: 'a3c791ea887fc640b512f81d429be465ae902b3d' })));
+            }, role: "presentation" }, h("slot", { key: '0c0bcafa4af7047e523671c6d0969ae69398292a' })));
     }
     static get is() { return "ion-accordion-group"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["accordion-group.ios.scss"],
-            "md": ["accordion-group.md.scss"]
+            "md": ["accordion-group.md.scss"],
+            "ionic": ["accordion-group.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["accordion-group.ios.css"],
-            "md": ["accordion-group.md.css"]
+            "md": ["accordion-group.md.css"],
+            "ionic": ["accordion-group.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/accordion-group/accordion-group.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
@@ -53,6 +59,12 @@
  *   }
  * }
  */
+/**
+ * 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
@@ -121,6 +133,12 @@
   margin-bottom: 16px;
 }
 
+/**
+ * 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/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() {
@@ -149,6 +150,7 @@ export class ActionSheet {
         setOverlayId(this.el);
     }
     componentDidLoad() {
+        const mode = getIonMode(this);
         /**
          * Only create gesture if:
          * 1. A gesture does not already exist
@@ -157,7 +159,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) {
@@ -186,30 +188,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: 'b640e9730af4bd9ec569884cf203c63102e0ea59', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '4926d42cea83073dbe46c767322078af6e15110b', 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: 'bcfa5b7ffb5c265ef54caa114e697ada11f20c12', tappable: this.backdropDismiss }), h("div", { key: '207ae95b5365ce1d76170a05bdf8c83c3ba5de42', tabindex: "0" }), h("div", { key: 'bf2b4e8d57c822a4ea2bbe6c34b1b2f2067e4c02', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '9c4841eb03ca1378c5abc1e3aafbbcfaaa43c345', class: "action-sheet-container" }, h("div", { key: 'fa438b8663f5d30852e5967da0471489efa783b2', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { key: '2c600f1cd8314d65137fb1bfa180312b4791121a', 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: '105dd2cdad2b31c40142e784cddde5bb08eac968', tappable: this.backdropDismiss }), h("div", { key: 'd21b66922c3c6dcfd1698dbd44273def87d10c26', tabindex: "0" }), h("div", { key: '1d2777b45aafb073ca541b77cb813c4b0f36aa64', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '882816abae8fdea280eff1af401a4a3c98f9edc4', class: "action-sheet-container" }, h("div", { key: 'd89b2f6fc91b013f06a8d1648e5f3a00ff15b364', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { key: 'dd9ea553fb9f9c19f8d5b3f3659f01811be706e6', id: headerID, class: {
                 'action-sheet-title': true,
                 'action-sheet-has-sub-title': this.subHeader !== undefined,
-            } }, header, this.subHeader && h("div", { key: 'a98d6a3f7948733de22a07432e56255f11243b7b', 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: '5c5abd0e0b3d486ba2bfe437e28a23b2c7c4c955', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: '520a23bbbe6c7436f5bc58bad162d7894b870e54' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: '28c90f66786ee82316adc6cfd68d322d2038357d', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: 'fd49fcea260c7addc9b07718eeb02d4fa6e4d900', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", { key: 'c83f636e171fe77635a4fce2b97161447e10546a' })))))), h("div", { key: 'd304920fc7cb006b87542183a3224a7e460abd3d', tabindex: "0" })));
+            } }, header, this.subHeader && h("div", { key: 'cbd1c671154f00317f716719478b98e96f34abcc', 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: '4b588f9adf87aa92515f8061b5fee10d3e29dfca', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: 'a229a57032d9ba74d8b4753a3cb1aabdb603f603' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: 'd453f7c64fad5210c46dcdf9a14e29a578430bd7', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: '4874280d228c76abeb43c43fc1de4714d1daad6c', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), theme === 'md' && h("ion-ripple-effect", { key: '61e0405b72b8ca7062937c36f405bddaef562560' })))))), h("div", { key: '22ed0b0e4cbad704cf4424250bb138e9c0aa8cb4', 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() {
@@ -442,7 +446,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() {
@@ -323,11 +324,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;
@@ -365,12 +366,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;
@@ -381,7 +382,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`;
@@ -391,22 +392,24 @@ export class Alert {
          * If neither is defined, don't set aria-labelledby.
          */
         const ariaLabelledBy = header ? hdrId : subHeader ? subHdrId : null;
-        return (h(Host, Object.assign({ key: 'b1875ea565c40a25915e26e61864f8c61d840ccc', role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'da02eb325cd4b01121327a65dbc29144f4437c73', 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: '37d9d7d1a47bfa23c3bb8d8d9805f52a5bbedf61', tappable: this.backdropDismiss }), h("div", { key: '0134cc90b7f02dcdd13dfdc39a72f2259182de90', tabindex: "0" }), h("div", { key: 'ed054b063ec2d1847b3234d5bdf3e66054784ed7', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: 'fb81befae081424f03c64b434ffdd79bb1b00d0c', class: "alert-head" }, header && (h("h2", { key: '92596dfdd92c4f63c82ed86b4a2473b3110daae3', id: hdrId, class: "alert-title" }, header)), subHeader && (h("h2", { key: 'ba7a0734cf818224f453604ec638770ca61bfef6', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '41a2619836a4af5d158216ef14b49985c7941b78', tabindex: "0" })));
+            }, 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: '5c9f99ce34d2cb61df940a8c8d3bd56d35399ee0', tappable: this.backdropDismiss }), h("div", { key: '9743836d244a46a8017ece6e0d0eb9e79de457ef', tabindex: "0" }), h("div", { key: '131a0ee4b1597766e45ca1e33989befbf4646bf9', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: 'b70bbd4c079186ae70368518b4182fb98b82f925', class: "alert-head" }, header && (h("h2", { key: '293d1422ff584a69e6c2f38ab9c53285b496cb4d', id: hdrId, class: "alert-title" }, header)), subHeader && (h("h2", { key: '78f41d03dee087153282db242c7cafdc30467f02', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '17564849cbe2ba5b3f86fb0c96f2a08e52f97476', 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() {
@@ -684,7 +687,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,

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