@ionic/core 8.8.6-dev.11777490150.1970e4f2 → 8.8.6-nightly.20260430

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

@@ -9,18 +9,16 @@ import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
 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, getIonTheme } from "../../global/ionic-global";
+import { getIonMode } 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 the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Alert {
     constructor() {
@@ -51,7 +49,7 @@ export class Alert {
         this.backdropDismiss = true;
         /**
          * If `true`, the alert will be translucent.
-         * Only applies when the theme is `"ios"` and the device supports
+         * Only applies when the mode is `"ios"` and the device supports
          * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          */
         this.translucent = false;
@@ -173,7 +171,22 @@ export class Alert {
         this.inputType = inputTypes.values().next().value;
         this.processedInputs = inputs.map((i, index) => {
             var _a;
-            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 });
+            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,
+            });
         });
     }
     connectedCallback() {
@@ -357,50 +370,18 @@ export class Alert {
     }
     renderCheckbox() {
         const inputs = this.processedInputs;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         if (inputs.length === 0) {
             return null;
         }
-        return (h("div", { class: "alert-checkbox-group" }, inputs.map((i) => {
-            /**
-             * Cast to `SelectAlertInput` to access rich content
-             * fields (`startContent`, `endContent`, `description`)
-             * that are passed through from `ion-select` but not
-             * part of the public `AlertInput` interface.
-             */
-            const richInput = i;
-            const optionLabelOptions = {
-                id: richInput.id,
-                label: richInput.label,
-                startContent: richInput.startContent,
-                endContent: richInput.endContent,
-                description: richInput.description,
-            };
-            return (h("button", { type: "button", onClick: () => this.cbClick(i), "aria-checked": `${i.checked}`, id: i.id, disabled: i.disabled, tabIndex: i.tabindex, role: "checkbox", class: Object.assign(Object.assign({}, getClassMap(i.cssClass)), { 'alert-tappable': true, 'alert-checkbox': true, 'alert-checkbox-button': true, 'ion-focusable': true, 'alert-checkbox-button-disabled': i.disabled || false }) }, h("div", { class: "alert-button-inner" }, h("div", { class: "alert-checkbox-icon" }, h("div", { class: "alert-checkbox-inner" })), renderOptionLabel(optionLabelOptions, 'alert-checkbox-label')), theme === 'md' && h("ion-ripple-effect", null)));
-        })));
+        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))))));
     }
     renderRadio() {
         const inputs = this.processedInputs;
         if (inputs.length === 0) {
             return null;
         }
-        return (h("div", { class: "alert-radio-group", role: "radiogroup", "aria-activedescendant": this.activeId }, inputs.map((i) => {
-            /**
-             * Cast to `SelectAlertInput` to access rich content
-             * fields (`startContent`, `endContent`, `description`)
-             * that are passed through from `ion-select` but not
-             * part of the public `AlertInput` interface.
-             */
-            const richInput = i;
-            const optionLabelOptions = {
-                id: richInput.id,
-                label: richInput.label,
-                startContent: richInput.startContent,
-                endContent: richInput.endContent,
-                description: richInput.description,
-            };
-            return (h("button", { type: "button", onClick: () => this.rbClick(i), "aria-checked": `${i.checked}`, disabled: i.disabled, id: i.id, tabIndex: i.tabindex, class: Object.assign(Object.assign({}, getClassMap(i.cssClass)), { 'alert-radio-button': true, 'alert-tappable': true, 'alert-radio': true, 'ion-focusable': true, 'alert-radio-button-disabled': i.disabled || false }), role: "radio" }, h("div", { class: "alert-button-inner" }, h("div", { class: "alert-radio-icon" }, h("div", { class: "alert-radio-inner" })), renderOptionLabel(optionLabelOptions, 'alert-radio-label'))));
-        })));
+        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)))))));
     }
     renderInput() {
         const inputs = this.processedInputs;
@@ -431,12 +412,12 @@ export class Alert {
     }
     renderAlertButtons() {
         const buttons = this.processedButtons;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(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), theme === '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), mode === 'md' && h("ion-ripple-effect", null))))));
     }
     renderAlertMessage(msgId) {
         const { customHTMLEnabled, message } = this;
@@ -447,7 +428,7 @@ export class Alert {
     }
     render() {
         const { overlayIndex, header, subHeader, message, htmlAttributes } = this;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const hdrId = `alert-${overlayIndex}-hdr`;
         const msgId = `alert-${overlayIndex}-msg`;
         const subHdrId = `alert-${overlayIndex}-sub-hdr`;
@@ -459,24 +440,22 @@ 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: '643939c4af9c1a68b60eea5724f8662f13bb3f72', tabindex: "-1", style: {
+        return (h(Host, { key: '6025440b9cd369d4fac89e7e4296c84a10a0b8e0', tabindex: "-1", style: {
                 zIndex: `${20000 + overlayIndex}`,
-            }, 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: '4780caec3fe71a8d5f2112b8b8726d5a7de91192', tappable: this.backdropDismiss }), h("div", { key: 'cc401fcade02bfc557820d31554d5e054da79b28', tabindex: "0", "aria-hidden": "true" }), h("div", Object.assign({ key: '234caa09b6e0d224bdce0de0659dcdbd668cad91', 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: 'c8c72cd019eace73b622f2510e533c281267c48a', class: "alert-head" }, header && (h("h2", { key: '0d95f68560dbb67721476d184df0d8654a07959c', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: '6444463a2aeef3f076b0bfdfeba4387ced177826', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: 'a92d7b54567152b57a8ccab6840e851c8fe5a47b', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '3ba2cdf15219f03123f6dd884eb7a4da38549c08', tabindex: "0", "aria-hidden": "true" })));
+            }, 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: '3cd5ca8b99cb95b11dd22ab41a820d841142896f', tappable: this.backdropDismiss }), h("div", { key: '4cc62ae6e21424057d22aeef1e8fc77011e77cd5', tabindex: "0", "aria-hidden": "true" }), h("div", Object.assign({ key: '364057a69f25aa88904df17bdcf7e5bf714e7830', 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: '78694e3c0db2d408df3899fb1a90859bcc8d14cc', class: "alert-head" }, header && (h("h2", { key: 'ec88ff3e4e1ea871b5975133fdcf4cac38b05e0f', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: '9b09bc8bb68af255ef8b7d22587acc946148e544', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: '99abe815f75d2df7f1b77c0df9f3436724fea76f', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: 'a43d0c22c0e46b1ef911f92ffeb253d7911b85f7', 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"],
-            "ionic": ["alert.ionic.scss"]
+            "md": ["alert.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["alert.ios.css"],
-            "md": ["alert.md.css"],
-            "ionic": ["alert.ionic.css"]
+            "md": ["alert.md.css"]
         };
     }
     static get properties() {
@@ -786,7 +765,7 @@ export class Alert {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "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)."
+                    "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)."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1,64 +1,3 @@
-/**
- * A heuristic that applies CSS to tablet
- * viewports.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to mobile
- * viewports (i.e. phones, not tablets).
- *
- * Usage:
- * @include mobile-viewport() {
- *   :host {
- *     background-color: blue;
- *   }
- * }
- */
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -135,8 +74,8 @@
   --max-height: 90%;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -349,40 +288,6 @@ textarea.alert-input {
   resize: none;
 }
 
-.alert-radio-label,
-.alert-checkbox-label {
-  display: flex;
-  align-items: center;
-}
-
-.select-option-content {
-  flex: 1;
-}
-
-.select-option-description {
-  display: block;
-}
-
-.alert-radio-label,
-.alert-checkbox-label {
-  gap: 12px;
-}
-
-.select-option-description {
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 5px;
-  padding-bottom: 0;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
-  font-size: 0.75rem;
-}
-
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -438,12 +343,6 @@ textarea.alert-input {
  *   }
  * }
  */
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

package/dist/collection/components/app/app.js

@@ -1,15 +1,58 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Host, h } from "@stencil/core";
-import { focusElements } from "../../utils/focus-visible";
+import { Build, Host, h } from "@stencil/core";
+import { shouldUseCloseWatcher } from "../../utils/hardware-back-button";
+import { printIonWarning } from "../../utils/logging/index";
+import { isPlatform } from "../../utils/platform";
 import { config } from "../../global/config";
-import { getIonTheme } from "../../global/ionic-global";
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
+import { getIonMode } from "../../global/ionic-global";
 export class App {
+    componentDidLoad() {
+        if (Build.isBrowser) {
+            this.rIC(async () => {
+                const isHybrid = isPlatform(window, 'hybrid');
+                if (!config.getBoolean('_testing')) {
+                    import('../../utils/tap-click').then((module) => module.startTapClick(config));
+                }
+                if (config.getBoolean('statusTap', isHybrid)) {
+                    import('../../utils/status-tap').then((module) => module.startStatusTap());
+                }
+                if (config.getBoolean('inputShims', needInputShims())) {
+                    /**
+                     * needInputShims() ensures that only iOS and Android
+                     * platforms proceed into this block.
+                     */
+                    const platform = isPlatform(window, 'ios') ? 'ios' : 'android';
+                    import('../../utils/input-shims/input-shims').then((module) => module.startInputShims(config, platform));
+                }
+                const hardwareBackButtonModule = await import('../../utils/hardware-back-button');
+                const supportsHardwareBackButtonEvents = isHybrid || shouldUseCloseWatcher();
+                if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
+                    hardwareBackButtonModule.startHardwareBackButton();
+                }
+                else {
+                    /**
+                     * If an app sets hardwareBackButton: false and experimentalCloseWatcher: true
+                     * then the close watcher will not be used.
+                     */
+                    if (shouldUseCloseWatcher()) {
+                        printIonWarning('[ion-app] - experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.');
+                    }
+                    hardwareBackButtonModule.blockHardwareBackButton();
+                }
+                if (typeof window !== 'undefined') {
+                    import('../../utils/keyboard/keyboard').then((module) => module.startKeyboardAssist(window));
+                }
+                import('../../utils/focus-visible').then((module) => (this.focusVisible = module.startFocusVisible()));
+            });
+        }
+    }
+    disconnectedCallback() {
+        if (this.loadTimeout) {
+            clearTimeout(this.loadTimeout);
+        }
+    }
     /**
      * Used to set focus on an element that uses `ion-focusable`.
      * Do not use this if focusing the element as a result of a keyboard
@@ -22,16 +65,22 @@ export class App {
      * @param elements An array of HTML elements to set focus on.
      */
     async setFocus(elements) {
-        /**
-         * The focus-visible utility is used to set focus on an
-         * element that uses `ion-focusable`.
-         */
-        focusElements(elements);
+        if (this.focusVisible) {
+            this.focusVisible.setFocus(elements);
+        }
+    }
+    rIC(callback) {
+        if ('requestIdleCallback' in window) {
+            window.requestIdleCallback(callback);
+        }
+        else {
+            this.loadTimeout = setTimeout(callback, 32);
+        }
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '3b7e84c7c4187287123413f90838cda89136b2a4', class: {
-                [theme]: true,
+        const mode = getIonMode(this);
+        return (h(Host, { key: '77a7459d3e42b3715a5a7e1cf468e2ebc99e54bb', class: {
+                [mode]: true,
                 'ion-page': true,
                 'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
             } }));
@@ -81,3 +130,22 @@ export class App {
     }
     static get elementRef() { return "el"; }
 }
+const needInputShims = () => {
+    /**
+     * iOS always needs input shims
+     */
+    const needsShimsIOS = isPlatform(window, 'ios') && isPlatform(window, 'mobile');
+    if (needsShimsIOS) {
+        return true;
+    }
+    /**
+     * Android only needs input shims when running
+     * in the browser and only if the browser is using the
+     * new Chrome 108+ resize behavior: https://developer.chrome.com/blog/viewport-resize-behavior/
+     */
+    const isAndroidMobileWeb = isPlatform(window, 'android') && isPlatform(window, 'mobileweb');
+    if (isAndroidMobileWeb) {
+        return true;
+    }
+    return false;
+};

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

@@ -1,3 +1,36 @@
+/**
+ * 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.
+ */
 /**
  * A heuristic that applies CSS to tablet
  * viewports.
@@ -26,7 +59,6 @@
    */
   border-radius: var(--border-radius);
   display: block;
-  position: relative;
 }
 
 ::slotted(ion-img),
@@ -38,12 +70,6 @@
   overflow: hidden;
 }
 
-/**
- * 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/avatar/avatar.js

@@ -2,139 +2,23 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { getIonTheme } from "../../global/ionic-global";
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
+import { getIonMode } from "../../global/ionic-global";
 export class Avatar {
-    constructor() {
-        /**
-         * If `true`, the user cannot interact with the avatar.
-         */
-        this.disabled = false;
-    }
-    get hasImage() {
-        return !!this.el.querySelector('ion-img') || !!this.el.querySelector('img');
-    }
-    get hasIcon() {
-        return !!this.el.querySelector('ion-icon');
-    }
-    getSize() {
-        const theme = getIonTheme(this);
-        const { size } = this;
-        // TODO(ROU-10752): Remove theme check when sizes are defined for all themes.
-        if (theme !== 'ionic') {
-            return undefined;
-        }
-        if (size === undefined) {
-            return 'medium';
-        }
-        return size;
-    }
-    getShape() {
-        const theme = getIonTheme(this);
-        const { shape } = this;
-        // TODO(ROU-10755): Remove theme check when shapes are defined for all themes.
-        if (theme !== 'ionic') {
-            return undefined;
-        }
-        if (shape === undefined) {
-            return 'round';
-        }
-        return shape;
-    }
     render() {
-        const { hasImage, hasIcon, disabled } = this;
-        const theme = getIonTheme(this);
-        const size = this.getSize();
-        const shape = this.getShape();
-        return (h(Host, { key: '78ff5863d80f0e334b679a1ba530008dee4e0e69', class: {
-                [theme]: true,
-                [`avatar-${size}`]: size !== undefined,
-                [`avatar-${shape}`]: shape !== undefined,
-                [`avatar-image`]: hasImage,
-                [`avatar-icon`]: hasIcon,
-                [`avatar-disabled`]: disabled,
-            } }, h("slot", { key: '7f82734af2338a2afca67e1c600c64352a52e8a2' })));
+        return (h(Host, { key: '998217066084f966bf5d356fed85bcbd451f675a', class: getIonMode(this) }, h("slot", { key: '1a6f7c9d4dc6a875f86b5b3cda6d59cb39587f22' })));
     }
     static get is() { return "ion-avatar"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["avatar.ios.scss"],
-            "md": ["avatar.md.scss"],
-            "ionic": ["avatar.ionic.scss"]
+            "md": ["avatar.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["avatar.ios.css"],
-            "md": ["avatar.md.css"],
-            "ionic": ["avatar.ionic.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "size": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'",
-                    "resolved": "\"large\" | \"medium\" | \"small\" | \"xlarge\" | \"xsmall\" | \"xxsmall\" | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Set to `\"xxsmall\"` for the smallest size.\nSet to `\"xsmall\"` for a very small size.\nSet to `\"small\"` for a compact size.\nSet to `\"medium\"` for the default height and width.\nSet to `\"large\"` for a larger size.\nSet to `\"xlarge\"` for the largest dimensions.\n\nDefaults to `\"medium\"` for the `ionic` theme, undefined for all other themes."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "size"
-            },
-            "shape": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'soft' | 'round' | 'rectangular'",
-                    "resolved": "\"rectangular\" | \"round\" | \"soft\" | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Set to `\"soft\"` for an avatar with slightly rounded corners,\n`\"round\"` for an avatar with fully rounded corners, or `\"rectangular\"`\nfor an avatar without rounded corners.\n\nDefaults to `\"round\"` for the `ionic` theme, undefined for all other themes."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "shape"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, the user cannot interact with the avatar."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            }
+            "md": ["avatar.md.css"]
         };
     }
-    static get elementRef() { return "el"; }
 }