@ionic/core 8.8.8-nightly.20260520 → 8.8.9-dev.11779403760.13ea2a08

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
@@ -53,6 +59,61 @@
  *   }
  * }
  */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 :host {
   /**
    * @prop --background: Background of the alert
@@ -74,8 +135,8 @@
   --max-height: 90%;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -83,11 +144,9 @@
   align-items: center;
   justify-content: center;
   outline: none;
-  font-family: var(--ion-font-family, inherit);
   contain: strict;
   touch-action: none;
   user-select: none;
-  z-index: 1001;
 }
 
 :host(.overlay-hidden) {
@@ -111,7 +170,6 @@
   background: var(--background);
   contain: content;
   opacity: 0;
-  z-index: 10;
 }
 
 .alert-title {
@@ -226,11 +284,6 @@
   z-index: 0;
 }
 
-.alert-button.ion-focused,
-.alert-tappable.ion-focused {
-  background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
-}
-
 .alert-button-inner {
   display: flex;
   flex-flow: row nowrap;
@@ -242,6 +295,39 @@
   min-height: inherit;
 }
 
+/**
+ * Label is on the right of the radio in LTR and
+ * on the left in RTL.
+ */
+.radio-label-placement-start,
+.checkbox-label-placement-start {
+  flex-direction: row-reverse;
+}
+
+/**
+ * Label is on the left of the radio in LTR and
+ * on the right in RTL.
+ */
+.radio-label-placement-end,
+.checkbox-label-placement-end {
+  flex-direction: row;
+}
+
+.radio-justify-start,
+.checkbox-justify-start {
+  justify-content: start;
+}
+
+.radio-justify-end,
+.checkbox-justify-end {
+  justify-content: end;
+}
+
+.radio-justify-space-between,
+.checkbox-justify-space-between {
+  justify-content: space-between;
+}
+
 .alert-input-disabled,
 .alert-checkbox-button-disabled .alert-button-inner,
 .alert-radio-button-disabled .alert-button-inner {
@@ -288,6 +374,86 @@ textarea.alert-input {
   resize: none;
 }
 
+.alert-radio-label,
+.alert-checkbox-label {
+  display: flex;
+  align-items: center;
+}
+
+/**
+ * Rich-content rows have inner pieces (start, content, description, end)
+ * that need the label to span the available row width.
+ */
+.alert-radio-label-has-rich-content,
+.alert-checkbox-label-has-rich-content {
+  flex: 1;
+}
+
+.select-option-content {
+  flex: 1;
+}
+
+.select-option-start,
+.select-option-end {
+  display: flex;
+  align-items: center;
+}
+
+/**
+ * Cap slotted children so they can't stretch the option
+ * row out of proportion, keeping rows visually uniform
+ * regardless of the content. ion-icon is excluded because
+ * its `contain: strict` makes intrinsic sizes resolve to 0,
+ * which would collapse the icon to zero width.
+ */
+.select-option-start > *:not(ion-icon),
+.select-option-end > *:not(ion-icon) {
+  max-width: fit-content;
+}
+
+.select-option-description {
+  display: block;
+}
+
+:host {
+  font-family: var(--ion-font-family, inherit);
+  z-index: 1001;
+}
+
+.alert-wrapper {
+  z-index: 10;
+}
+
+.alert-button.ion-focused,
+.alert-tappable.ion-focused {
+  background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
+}
+
+.alert-radio-label,
+.alert-checkbox-label {
+  gap: 12px;
+}
+
+.select-option-start,
+.select-option-end {
+  gap: 8px;
+}
+
+.select-option-description {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 5px;
+  padding-bottom: 0;
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  font-size: 0.75rem;
+}
+
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -343,6 +509,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
@@ -529,8 +701,6 @@ textarea.alert-input {
   padding-inline-end: 13px;
   padding-top: 13px;
   padding-bottom: 13px;
-  flex: 1;
-  order: 0;
   color: var(--ion-text-color, #000);
 }
 
@@ -540,7 +710,7 @@ textarea.alert-input {
 
 .alert-radio-icon {
   position: relative;
-  order: 1;
+  flex-shrink: 0;
   min-width: 30px;
 }
 
@@ -556,7 +726,12 @@ textarea.alert-input {
   border-style: solid;
   border-color: var(--ion-color-primary, #0054e9);
 }
-[aria-checked=true] .alert-radio-inner {
+
+[aria-checked=true] .radio-label-placement-end .alert-radio-inner {
+  inset-inline-end: 7px;
+}
+
+[aria-checked=true] .radio-label-placement-start .alert-radio-inner {
   inset-inline-start: 7px;
 }
 
@@ -567,19 +742,15 @@ textarea.alert-input {
   padding-inline-end: 13px;
   padding-top: 13px;
   padding-bottom: 13px;
-  flex: 1;
   color: var(--ion-text-color, #000);
 }
 
 .alert-checkbox-icon {
   border-radius: 50%;
-  -webkit-margin-start: 16px;
-  margin-inline-start: 16px;
-  -webkit-margin-end: 6px;
-  margin-inline-end: 6px;
   margin-top: 10px;
   margin-bottom: 10px;
   position: relative;
+  flex-shrink: 0;
   width: min(1.375rem, 55.836px);
   height: min(1.375rem, 55.836px);
   border-width: 0.125rem;
@@ -589,6 +760,20 @@ textarea.alert-input {
   contain: strict;
 }
 
+.checkbox-label-placement-end .alert-checkbox-icon {
+  -webkit-margin-start: 16px;
+  margin-inline-start: 16px;
+  -webkit-margin-end: 6px;
+  margin-inline-end: 6px;
+}
+
+.checkbox-label-placement-start .alert-checkbox-icon {
+  -webkit-margin-start: 6px;
+  margin-inline-start: 6px;
+  -webkit-margin-end: 16px;
+  margin-inline-end: 16px;
+}
+
 [aria-checked=true] .alert-checkbox-icon {
   border-color: var(--ion-color-primary, #0054e9);
   background-color: var(--ion-color-primary, #0054e9);
@@ -606,10 +791,15 @@ textarea.alert-input {
   border-style: solid;
   border-color: var(--ion-background-color, #fff);
 }
-[aria-checked=true] .alert-checkbox-inner {
+
+[aria-checked=true] .checkbox-label-placement-end .alert-checkbox-inner {
   inset-inline-start: calc(min(1.375rem, 55.836px) / 3);
 }
 
+[aria-checked=true] .checkbox-label-placement-start .alert-checkbox-inner {
+  inset-inline-end: calc(min(1.375rem, 55.836px) / 3);
+}
+
 .alert-button-group {
   -webkit-margin-end: -0.55px;
   margin-inline-end: -0.55px;
@@ -705,4 +895,14 @@ textarea.alert-input {
 .alert-button-role-destructive.ion-activated,
 .alert-button-role-destructive.ion-focused {
   color: var(--ion-color-danger, #c5000f);
+}
+
+/**
+ * Cap slotted children so they can't stretch the option
+ * row out of proportion, keeping rows visually uniform
+ * regardless of the content.
+ */
+.select-option-start > *,
+.select-option-end > * {
+  max-height: min(1.5rem, 48px);
 }

package/dist/collection/components/alert/alert.js

@@ -7,18 +7,21 @@ import { createButtonActiveGesture } from "../../utils/gesture/button-active";
 import { raf } from "../../utils/helpers";
 import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
+import { getOverlayLabelJustify, getOverlayLabelPlacement } from "../../utils/overlay-control-label";
 import { createDelegateController, createTriggerController, BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
+import { renderOptionLabel } from "../../utils/select-option-render";
 import { getClassMap } from "../../utils/theme";
 import { config } from "../../global/config";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonMode, getIonTheme } from "../../global/ionic-global";
 import { iosEnterAnimation } from "./animations/ios.enter";
 import { iosLeaveAnimation } from "./animations/ios.leave";
 import { mdEnterAnimation } from "./animations/md.enter";
 import { mdLeaveAnimation } from "./animations/md.leave";
 // TODO(FW-2832): types
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  */
 export class Alert {
     constructor() {
@@ -50,7 +53,7 @@ export class Alert {
         this.backdropDismiss = true;
         /**
          * If `true`, the alert will be translucent.
-         * Only applies when the mode is `"ios"` and the device supports
+         * Only applies when the theme is `"ios"` and the device supports
          * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          */
         this.translucent = false;
@@ -179,22 +182,7 @@ export class Alert {
         this.inputType = inputTypes.values().next().value;
         this.processedInputs = inputs.map((i, index) => {
             var _a;
-            return ({
-                type: i.type || 'text',
-                name: i.name || `${index}`,
-                placeholder: i.placeholder || '',
-                value: i.value,
-                label: i.label,
-                checked: !!i.checked,
-                disabled: !!i.disabled,
-                id: i.id || `alert-input-${this.overlayIndex}-${index}`,
-                handler: i.handler,
-                min: i.min,
-                max: i.max,
-                cssClass: (_a = i.cssClass) !== null && _a !== void 0 ? _a : '',
-                attributes: i.attributes || {},
-                tabindex: i.type === 'radio' && i !== focusable ? -1 : 0,
-            });
+            return Object.assign(Object.assign({}, i), { type: i.type || 'text', name: i.name || `${index}`, placeholder: i.placeholder || '', checked: !!i.checked, disabled: !!i.disabled, id: i.id || `alert-input-${this.overlayIndex}-${index}`, cssClass: (_a = i.cssClass) !== null && _a !== void 0 ? _a : '', attributes: i.attributes || {}, tabindex: i.type === 'radio' && i !== focusable ? -1 : 0 });
         });
     }
     connectedCallback() {
@@ -388,18 +376,65 @@ 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) => {
+            var _a, _b;
+            /**
+             * Cast to `SelectAlertInput` to access rich content
+             * fields (`startContent`, `endContent`, `description`)
+             * that are passed through from `ion-select` but not
+             * part of the public `AlertInput` interface.
+             */
+            const richInput = i;
+            const optionLabelOptions = {
+                id: richInput.id,
+                label: richInput.label,
+                startContent: richInput.startContent,
+                endContent: richInput.endContent,
+                description: richInput.description,
+            };
+            const defaultLabelPlacement = getOverlayLabelPlacement(theme, 'checkbox');
+            const defaultJustify = getOverlayLabelJustify(theme, 'checkbox');
+            return (h("button", { type: "button", onClick: () => this.cbClick(i), "aria-checked": `${i.checked}`, id: i.id, disabled: i.disabled, tabIndex: i.tabindex, role: "checkbox", class: Object.assign(Object.assign({}, getClassMap(i.cssClass)), { 'alert-tappable': true, 'alert-checkbox': true, 'alert-checkbox-button': true, 'ion-focusable': !i.disabled, 'ion-activatable': !i.disabled, 'alert-checkbox-button-disabled': i.disabled || false }) }, h("div", { class: {
+                    'alert-button-inner': true,
+                    [`checkbox-label-placement-${(_a = richInput.labelPlacement) !== null && _a !== void 0 ? _a : defaultLabelPlacement}`]: true,
+                    [`checkbox-justify-${(_b = richInput.justify) !== null && _b !== void 0 ? _b : defaultJustify}`]: true,
+                } }, h("div", { class: "alert-checkbox-icon" }, theme === 'ionic' ? (h("svg", { class: "alert-checkbox-inner", viewBox: "0 0 256 256", "aria-hidden": "true" }, h("path", { d: "M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z" }))) : (h("div", { class: "alert-checkbox-inner" }))), renderOptionLabel(optionLabelOptions, 'alert-checkbox-label')), theme === 'md' && h("ion-ripple-effect", null)));
+        })));
     }
     renderRadio() {
         const inputs = this.processedInputs;
+        const theme = getIonTheme(this);
         if (inputs.length === 0) {
             return null;
         }
-        return (h("div", { class: "alert-radio-group", role: "radiogroup", "aria-activedescendant": this.activeId }, inputs.map((i) => (h("button", { type: "button", onClick: () => this.rbClick(i), "aria-checked": `${i.checked}`, disabled: i.disabled, id: i.id, tabIndex: i.tabindex, class: Object.assign(Object.assign({}, getClassMap(i.cssClass)), { 'alert-radio-button': true, 'alert-tappable': true, 'alert-radio': true, 'ion-focusable': true, 'alert-radio-button-disabled': i.disabled || false }), role: "radio" }, h("div", { class: "alert-button-inner" }, h("div", { class: "alert-radio-icon" }, h("div", { class: "alert-radio-inner" })), h("div", { class: "alert-radio-label" }, i.label)))))));
+        return (h("div", { class: "alert-radio-group", role: "radiogroup", "aria-activedescendant": this.activeId }, inputs.map((i) => {
+            var _a, _b;
+            /**
+             * Cast to `SelectAlertInput` to access rich content
+             * fields (`startContent`, `endContent`, `description`)
+             * that are passed through from `ion-select` but not
+             * part of the public `AlertInput` interface.
+             */
+            const richInput = i;
+            const optionLabelOptions = {
+                id: richInput.id,
+                label: richInput.label,
+                startContent: richInput.startContent,
+                endContent: richInput.endContent,
+                description: richInput.description,
+            };
+            const defaultLabelPlacement = getOverlayLabelPlacement(theme, 'radio');
+            const defaultJustify = getOverlayLabelJustify(theme, 'radio');
+            return (h("button", { type: "button", onClick: () => this.rbClick(i), "aria-checked": `${i.checked}`, disabled: i.disabled, id: i.id, tabIndex: i.tabindex, class: Object.assign(Object.assign({}, getClassMap(i.cssClass)), { 'alert-radio-button': true, 'alert-tappable': true, 'alert-radio': true, 'ion-focusable': !i.disabled, 'ion-activatable': !i.disabled, 'alert-radio-button-disabled': i.disabled || false }), role: "radio" }, h("div", { class: {
+                    'alert-button-inner': true,
+                    [`radio-label-placement-${(_a = richInput.labelPlacement) !== null && _a !== void 0 ? _a : defaultLabelPlacement}`]: true,
+                    [`radio-justify-${(_b = richInput.justify) !== null && _b !== void 0 ? _b : defaultJustify}`]: true,
+                } }, h("div", { class: "alert-radio-icon" }, h("div", { class: "alert-radio-inner" })), renderOptionLabel(optionLabelOptions, 'alert-radio-label'))));
+        })));
     }
     renderInput() {
         const inputs = this.processedInputs;
@@ -474,12 +509,12 @@ export class Alert {
     }
     renderAlertButtons() {
         const buttons = this.processedButtons;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const alertButtonGroupClass = {
             'alert-button-group': true,
             'alert-button-group-vertical': buttons.length > 2 || this.isButtonGroupWrapped,
         };
-        return (h("div", { class: alertButtonGroupClass, ref: (el) => (this.buttonGroupEl = el) }, buttons.map((button) => (h("button", Object.assign({}, button.htmlAttributes, { type: "button", id: button.id, class: buttonClass(button), tabIndex: 0, onClick: () => this.buttonClick(button) }), h("span", { class: "alert-button-inner" }, button.text), mode === 'md' && h("ion-ripple-effect", null))))));
+        return (h("div", { class: alertButtonGroupClass, ref: (el) => (this.buttonGroupEl = el) }, buttons.map((button) => (h("button", Object.assign({}, button.htmlAttributes, { type: "button", id: button.id, class: buttonClass(button), tabIndex: 0, onClick: () => this.buttonClick(button) }), h("span", { class: "alert-button-inner" }, button.text), theme === 'md' && h("ion-ripple-effect", null))))));
     }
     renderAlertMessage(msgId) {
         const { customHTMLEnabled, message } = this;
@@ -490,7 +525,7 @@ export class Alert {
     }
     render() {
         const { overlayIndex, header, subHeader, message, htmlAttributes } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const hdrId = `alert-${overlayIndex}-hdr`;
         const msgId = `alert-${overlayIndex}-msg`;
         const subHdrId = `alert-${overlayIndex}-sub-hdr`;
@@ -502,22 +537,24 @@ export class Alert {
          * If neither are defined, do not set aria-labelledby.
          */
         const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
-        return (h(Host, { key: '8d54ccd725ea634be080e67b56fa5efe498f496c', tabindex: "-1", style: {
+        return (h(Host, { key: '8b65a5c9fcd30cf0ad44ed0fe9edc1dc60c8c06a', tabindex: "-1", style: {
                 zIndex: `${20000 + overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: '05a238583342285545587de9dce144a82d779193', tappable: this.backdropDismiss }), h("div", { key: 'e52c53fd9845e66781af01b2a788a291b45a927c', tabindex: "0", "aria-hidden": "true" }), h("div", Object.assign({ key: '8417e52eebca24ff436fab0703666db51072f980', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el) }, htmlAttributes), h("div", { key: '5c560d4800b24d41961423718108b54be6cd6f91', class: "alert-head" }, header && (h("h2", { key: '8637b64cd5125b2258115d1c11f3743113658608', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: '7a4e61a02c29b16b336d8acaf6569b30de6fe71e', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: '30844b6a0a7e3dab46514cd548ecffa86dcd59cb', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '39c824fee1e60ad8d6234c79d22ceb8bba8004af', 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: '67dcabc30a298d636c863e0501b4a90cb1206a5a', tappable: this.backdropDismiss }), h("div", { key: '45f49be97019898be5c2d01f1635634e82f07d59', tabindex: "0", "aria-hidden": "true" }), h("div", Object.assign({ key: '5eed6d5617175666b6d656381615e3c42e83691c', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el) }, htmlAttributes), h("div", { key: 'cc68b6d31dc9b3ab4dd09a62a9fcf860f273eff1', class: "alert-head" }, header && (h("h2", { key: '7480c9b01bef2a9ac3a4e266d16c6a1bf90c63e8', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: '8d9447f5fa355289f27d7ec3e44d781aeffb2296', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: '7a3c0101e869e824bee45df38601d3b561d905b0', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: 'e9f1f6f057b9e1a24b702b7f5225f691a1ca53c6', tabindex: "0", "aria-hidden": "true" })));
     }
     static get is() { return "ion-alert"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "ios": ["alert.ios.scss"],
-            "md": ["alert.md.scss"]
+            "md": ["alert.md.scss"],
+            "ionic": ["alert.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["alert.ios.css"],
-            "md": ["alert.md.css"]
+            "md": ["alert.md.css"],
+            "ionic": ["alert.ionic.css"]
         };
     }
     static get properties() {
@@ -827,7 +864,7 @@ export class Alert {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the alert will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
+                    "text": "If `true`, the alert will be translucent.\nOnly applies when the theme is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
                 },
                 "getter": false,
                 "setter": false,