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

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
@@ -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
@@ -528,11 +700,23 @@ textarea.alert-input {
   padding-inline-end: 26px;
   padding-top: 13px;
   padding-bottom: 13px;
-  flex: 1;
+  max-width: calc(100% - 26px);
   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%;
@@ -544,10 +728,15 @@ textarea.alert-input {
   border-style: solid;
   border-color: var(--ion-color-step-550, var(--ion-background-color-step-550, #737373));
 }
-.alert-radio-icon {
+
+.radio-label-placement-end .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%;
@@ -581,12 +770,23 @@ textarea.alert-input {
   padding-inline-end: 26px;
   padding-top: 13px;
   padding-bottom: 13px;
-  flex: 1;
-  width: calc(100% - 53px);
+  max-width: calc(100% - 26px);
   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;
@@ -598,10 +798,15 @@ textarea.alert-input {
   border-color: var(--ion-color-step-550, var(--ion-background-color-step-550, #737373));
   contain: strict;
 }
-.alert-checkbox-icon {
+
+.checkbox-label-placement-end .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);
@@ -658,7 +863,7 @@ textarea.alert-input {
   overflow: hidden;
 }
 
-.alert-button-inner {
+.alert-button .alert-button-inner {
   justify-content: flex-end;
 }
 
@@ -671,4 +876,13 @@ 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,58 +1,15 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-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 { Host, h } from "@stencil/core";
+import { focusElements } from "../../utils/focus-visible";
 import { config } from "../../global/config";
-import { getIonMode } from "../../global/ionic-global";
+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.
+ */
 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
@@ -65,22 +22,16 @@ export class App {
      * @param elements An array of HTML elements to set focus on.
      */
     async setFocus(elements) {
-        if (this.focusVisible) {
-            this.focusVisible.setFocus(elements);
-        }
-    }
-    rIC(callback) {
-        if ('requestIdleCallback' in window) {
-            window.requestIdleCallback(callback);
-        }
-        else {
-            this.loadTimeout = setTimeout(callback, 32);
-        }
+        /**
+         * The focus-visible utility is used to set focus on an
+         * element that uses `ion-focusable`.
+         */
+        focusElements(elements);
     }
     render() {
-        const mode = getIonMode(this);
-        return (h(Host, { key: '77a7459d3e42b3715a5a7e1cf468e2ebc99e54bb', class: {
-                [mode]: true,
+        const theme = getIonTheme(this);
+        return (h(Host, { key: '3b7e84c7c4187287123413f90838cda89136b2a4', class: {
+                [theme]: true,
                 'ion-page': true,
                 'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
             } }));
@@ -130,22 +81,3 @@ 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;
-};