@ionic/core 8.8.9-dev.11779411201.1a483e09 → 8.8.9-dev.11780349068.18c33698

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

@@ -1,9 +1,3 @@
-/**
- * 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
@@ -59,61 +53,6 @@
  *   }
  * }
  */
-/**
- * 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
@@ -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;
@@ -144,9 +83,11 @@
   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) {
@@ -170,6 +111,7 @@
   background: var(--background);
   contain: content;
   opacity: 0;
+  z-index: 10;
 }
 
 .alert-title {
@@ -284,6 +226,11 @@
   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;
@@ -295,39 +242,6 @@
   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 {
@@ -374,86 +288,6 @@ 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
@@ -509,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
@@ -700,23 +528,11 @@ textarea.alert-input {
   padding-inline-end: 26px;
   padding-top: 13px;
   padding-bottom: 13px;
-  max-width: calc(100% - 26px);
+  flex: 1;
   color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
   font-size: 1rem;
 }
 
-.radio-label-placement-start .alert-radio-label {
-  /**
-   * The label's inline padding clears space for the icon on the
-   * icon's side. When the label is placed at the start, the icon
-   * is at the end, so swap the inline paddings to mirror that geometry.
-   */
-  -webkit-padding-start: 26px;
-  padding-inline-start: 26px;
-  -webkit-padding-end: 52px;
-  padding-inline-end: 52px;
-}
-
 .alert-radio-icon {
   top: 0;
   border-radius: 50%;
@@ -728,15 +544,10 @@ textarea.alert-input {
   border-style: solid;
   border-color: var(--ion-color-step-550, var(--ion-background-color-step-550, #737373));
 }
-
-.radio-label-placement-end .alert-radio-icon {
+.alert-radio-icon {
   inset-inline-start: 26px;
 }
 
-.radio-label-placement-start .alert-radio-icon {
-  inset-inline-end: 26px;
-}
-
 .alert-radio-inner {
   top: 3px;
   border-radius: 50%;
@@ -770,23 +581,12 @@ textarea.alert-input {
   padding-inline-end: 26px;
   padding-top: 13px;
   padding-bottom: 13px;
-  max-width: calc(100% - 26px);
+  flex: 1;
+  width: calc(100% - 53px);
   color: var(--ion-color-step-850, var(--ion-text-color-step-150, #262626));
   font-size: 1rem;
 }
 
-.checkbox-label-placement-start .alert-checkbox-label {
-  /**
-   * The label's inline padding clears space for the icon on the
-   * icon's side. When the label is placed at the start, the icon
-   * is at the end, so swap the inline paddings to mirror that geometry.
-   */
-  -webkit-padding-start: 26px;
-  padding-inline-start: 26px;
-  -webkit-padding-end: 53px;
-  padding-inline-end: 53px;
-}
-
 .alert-checkbox-icon {
   top: 0;
   border-radius: 2px;
@@ -798,15 +598,10 @@ textarea.alert-input {
   border-color: var(--ion-color-step-550, var(--ion-background-color-step-550, #737373));
   contain: strict;
 }
-
-.checkbox-label-placement-end .alert-checkbox-icon {
+.alert-checkbox-icon {
   inset-inline-start: 26px;
 }
 
-.checkbox-label-placement-start .alert-checkbox-icon {
-  inset-inline-end: 26px;
-}
-
 [aria-checked=true] .alert-checkbox-icon {
   border-color: var(--ion-color-primary, #0054e9);
   background-color: var(--ion-color-primary, #0054e9);
@@ -863,7 +658,7 @@ textarea.alert-input {
   overflow: hidden;
 }
 
-.alert-button .alert-button-inner {
+.alert-button-inner {
   justify-content: flex-end;
 }
 
@@ -876,13 +671,4 @@ textarea.alert-input {
     --max-width: min(100vw - 96px, 560px);
     --max-height: min(100vh - 96px, 560px);
   }
-}
-/**
- * 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: 24px;
 }

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"; }
 }