voyager-ionic-core 9.0.6 → 9.0.9

package/dist/cjs/{overlays-C68wNDWY.js → overlays-CLld3axA.js}

@@ -3,10 +3,10 @@
  */
 'use strict';
 
-var helpers = require('./helpers-Crluoxqu.js');
-var index = require('./index-SAR1xwtW.js');
-var ionicGlobal = require('./ionic-global-C1h8Yi_K.js');
-var frameworkDelegate = require('./framework-delegate-DTLbqaaO.js');
+var helpers = require('./helpers-Cqr69qxA.js');
+var index = require('./index-BiQyIvoc.js');
+var ionicGlobal = require('./ionic-global-48ceLiJ6.js');
+var frameworkDelegate = require('./framework-delegate-JbKIVMzR.js');
 var gestureController = require('./gesture-controller-CeJslptU.js');
 
 /**
@@ -35,6 +35,23 @@ const shouldUseCloseWatcher = () => index.config.get('experimentalCloseWatcher',
 const blockHardwareBackButton = () => {
     document.addEventListener('backbutton', () => { });
 };
+const closeWatcherConditions = [];
+let syncCloseWatcher;
+/**
+ * Registers a check for whether the back button
+ * has something to close. The CloseWatcher is only
+ * active while one of these checks passes.
+ */
+const addCloseWatcherCondition = (condition) => {
+    closeWatcherConditions.push(condition);
+};
+/**
+ * Call this whenever something the back button
+ * can close opens or closes.
+ */
+const updateCloseWatcher = () => {
+    syncCloseWatcher?.();
+};
 const startHardwareBackButton = () => {
     const doc = document;
     let busy = false;
@@ -86,32 +103,44 @@ const startHardwareBackButton = () => {
         processHandlers();
     };
     /**
-     * If the CloseWatcher is defined then
-     * we don't want to also listen for the native
-     * backbutton event otherwise we may get duplicate
-     * events firing.
+     * Android WebView never sends the hardware back
+     * button to a CloseWatcher, so hybrid apps still
+     * need this. Browsers never fire backbutton.
      */
+    doc.addEventListener('backbutton', backButtonCallback);
     if (shouldUseCloseWatcher()) {
         let watcher;
-        const configureWatcher = () => {
-            watcher?.destroy();
+        /**
+         * An active CloseWatcher stops the back button from
+         * navigating, so only keep one while there's something to close.
+         */
+        syncCloseWatcher = () => {
+            const canClose = closeWatcherConditions.some((condition) => condition());
+            if (!canClose) {
+                watcher?.destroy();
+                watcher = undefined;
+                return;
+            }
+            if (watcher !== undefined) {
+                return;
+            }
             watcher = new helpers.win.CloseWatcher();
             /**
              * Once a close request happens
              * the watcher gets destroyed.
              * As a result, we need to re-configure
              * the watcher so we can respond to other
-             * close requests.
+             * close requests, including after one that
+             * closed nothing, like a modal whose canDismiss
+             * returned false.
              */
             watcher.onclose = () => {
+                watcher = undefined;
                 backButtonCallback();
-                configureWatcher();
+                syncCloseWatcher?.();
             };
         };
-        configureWatcher();
-    }
-    else {
-        doc.addEventListener('backbutton', backButtonCallback);
+        syncCloseWatcher();
     }
 };
 const OVERLAY_BACK_BUTTON_PRIORITY = 100;
@@ -121,9 +150,11 @@ var hardwareBackButton = /*#__PURE__*/Object.freeze({
     __proto__: null,
     MENU_BACK_BUTTON_PRIORITY: MENU_BACK_BUTTON_PRIORITY,
     OVERLAY_BACK_BUTTON_PRIORITY: OVERLAY_BACK_BUTTON_PRIORITY,
+    addCloseWatcherCondition: addCloseWatcherCondition,
     blockHardwareBackButton: blockHardwareBackButton,
     shouldUseCloseWatcher: shouldUseCloseWatcher,
-    startHardwareBackButton: startHardwareBackButton
+    startHardwareBackButton: startHardwareBackButton,
+    updateCloseWatcher: updateCloseWatcher
 });
 
 /**
@@ -209,6 +240,11 @@ const focusElementInContext = (hostToFocus, fallbackElement) => {
 
 let lastOverlayIndex = 0;
 let lastId = 0;
+/**
+ * Every overlay except toast, which doesn't trap
+ * focus or close on back.
+ */
+const NON_TOAST_OVERLAYS = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-popover';
 const activeAnimations = new WeakMap();
 /**
  * Determines if the overlay's backdrop is always blocking (no background interaction).
@@ -335,7 +371,7 @@ const focusElementInOverlay = (hostToFocus, overlay) => {
  * Should NOT include: Toast
  */
 const trapKeyboardFocus = (ev, doc) => {
-    const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-popover');
+    const lastOverlay = getPresentedOverlay(doc, NON_TOAST_OVERLAYS);
     const target = ev.target;
     /**
      * If no active overlay, ignore this event.
@@ -518,6 +554,11 @@ const connectListeners = (doc) => {
         doc.addEventListener('focus', (ev) => {
             trapKeyboardFocus(ev, doc);
         }, true);
+        /**
+         * Whether the overlay actually dismisses is checked at press time,
+         * since `backdropDismiss` can change while it's open.
+         */
+        addCloseWatcherCondition(() => getPresentedOverlay(doc, NON_TOAST_OVERLAYS) !== undefined);
         // handle back-button click
         doc.addEventListener('ionBackButton', (ev) => {
             const lastOverlay = getPresentedOverlay(doc);
@@ -641,7 +682,8 @@ const setRootAriaHidden = (hidden = false) => {
  * Cleans up root `aria-hidden` and `backdrop-no-scroll` when
  * an overlay is removed from the DOM without going through
  * the `dismiss()` flow (e.g., when a framework unmounts the
- * overlay during a route change).
+ * overlay during a route change). Also releases the
+ * CloseWatcher if nothing is left to close.
  *
  * Should be called from an overlay's `disconnectedCallback`
  * when the overlay was still presented at the time of removal.
@@ -650,6 +692,7 @@ const cleanupRootFocusTrapAccessibility = () => {
     if (typeof document === 'undefined') {
         return;
     }
+    updateCloseWatcher();
     const remainingOverlays = getPresentedOverlays(document);
     const hasRemainingLocking = remainingOverlays.some((o) => locksAppRoot(o));
     if (!hasRemainingLocking) {
@@ -671,7 +714,9 @@ const applyRootLock = (el) => {
 };
 /**
  * Re-applies the root lock that `cleanupRootFocusTrapAccessibility()` released.
- * Call from `connectedCallback` when the overlay is still presented.
+ * Call from `connectedCallback` when the overlay is still presented. Also
+ * re-arms the CloseWatcher, which every overlay needs, so that happens
+ * before the `locksAppRoot` check.
  *
  * A synchronous move keeps the overlay connected, so the lock survives. A
  * detach with a re-insert in a later task releases it, which is the shape a
@@ -681,6 +726,7 @@ const restoreRootFocusTrapAccessibility = (overlayEl) => {
     if (typeof document === 'undefined') {
         return;
     }
+    updateCloseWatcher();
     const el = overlayEl;
     if (!locksAppRoot(el)) {
         return;
@@ -894,6 +940,11 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
         index.printIonError(`[${overlay.el.tagName.toLowerCase()}] - `, err);
     }
     overlay.el.remove();
+    /**
+     * Release the back button if nothing
+     * else is left to close.
+     */
+    updateCloseWatcher();
     return true;
 };
 const getAppRoot = (doc) => {
@@ -902,6 +953,12 @@ const getAppRoot = (doc) => {
 const overlayAnimation = async (overlay, animationBuilder, baseEl, opts) => {
     // Make overlay visible in case it's hidden
     baseEl.classList.remove('overlay-hidden');
+    /**
+     * Removing `overlay-hidden` makes the overlay count
+     * as presented, so back can dismiss it while it
+     * animates in.
+     */
+    updateCloseWatcher();
     const aniRoot = overlay.el;
     const animation = animationBuilder(aniRoot, opts);
     if (!overlay.animated || !index.config.getBoolean('animated', true)) {
@@ -1131,6 +1188,7 @@ exports.GESTURE = GESTURE;
 exports.MENU_BACK_BUTTON_PRIORITY = MENU_BACK_BUTTON_PRIORITY;
 exports.OVERLAY_GESTURE_PRIORITY = OVERLAY_GESTURE_PRIORITY;
 exports.actionSheetController = actionSheetController;
+exports.addCloseWatcherCondition = addCloseWatcherCondition;
 exports.alertController = alertController;
 exports.cleanupRootFocusTrapAccessibility = cleanupRootFocusTrapAccessibility;
 exports.createDelegateController = createDelegateController;
@@ -1153,3 +1211,4 @@ exports.safeCall = safeCall;
 exports.setOverlayId = setOverlayId;
 exports.shouldUseCloseWatcher = shouldUseCloseWatcher;
 exports.toastController = toastController;
+exports.updateCloseWatcher = updateCloseWatcher;

package/dist/cjs/{select-option-render-C-Yh9yZG.js → select-option-render-CzyhrkOu.js}

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-SAR1xwtW.js');
-var index$1 = require('./index-BSD7toMO.js');
+var index = require('./index-BiQyIvoc.js');
+var index$1 = require('./index-B4ONUQRp.js');
 
 /**
  * Converts a DOM node into a Stencil VNode (or text string) so the

package/dist/cjs/{slot-mutation-controller-zixZ5LyH.js → slot-mutation-controller-B2OfJEBH.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var helpers = require('./helpers-Crluoxqu.js');
+var helpers = require('./helpers-Cqr69qxA.js');
 var dir = require('./dir-zwDPRE5K.js');
 
 /**
@@ -167,10 +167,19 @@ const SKIP_LABEL_TRANSITION_CLASS = 'skip-label-transition';
  */
 const START_CONTAINER_ADJUSTMENT_VAR = '--internal-start-container-adjustment';
 /**
- * A utility to measure and update the start container width adjustment
- * for form components (input, textarea, select) with `fill="outline"`.
- * This adjustment compensates for the start container width when
- * positioning floating/stacked labels within the outline border.
+ * Set on the host as an inline style. The component stylesheets declare
+ * this property and read it with `var()`, so it must stay in sync with
+ * the `--internal-start-end-container-width` references in those files.
+ * Renaming it here requires renaming it there too.
+ */
+const START_END_CONTAINER_WIDTH_VAR = '--internal-start-end-container-width';
+/**
+ * A utility to measure the start and end containers of form components
+ * (input, textarea, select) with `fill="outline"` and write the results
+ * to the host. The start container width offsets floating/stacked labels
+ * so they line up with the outline border. The combined start and end
+ * container width lets the floating label size itself to the full width
+ * of the outline while still being positioned relative to the control.
  *
  * Measurement is deferred with raf() to avoid forcing layout during
  * component updates, and a ResizeObserver watches for dynamic width
@@ -179,29 +188,36 @@ const START_CONTAINER_ADJUSTMENT_VAR = '--internal-start-container-adjustment';
  * @internal
  * @param el - The host element (ion-input, ion-textarea, or ion-select).
  * @param getStartContainer - A callback that returns the start container element.
- * @param shouldApplyAdjustment - A callback that determines whether the adjustment should be applied.
+ * @param getEndContainer - A callback that returns the end container element.
+ * @param shouldMeasure - A callback that determines whether the containers should be measured.
  */
-const createStartContainerController = (el, getStartContainer, shouldApplyAdjustment) => {
+const createStartEndContainerController = (el, getStartContainer, getEndContainer, shouldMeasure) => {
     let resizeObserver;
-    let observedContainer;
+    let observedStartContainer;
+    let observedEndContainer;
     let measurementRaf;
     let transitionRaf;
     let appliedAdjustment;
-    const calculateAdjustment = () => {
-        const startSlot = getStartContainer();
-        if (!startSlot || !shouldApplyAdjustment()) {
-            return '';
+    let appliedStartEndWidth;
+    /*
+     * Round to one decimal place so fractional widths produce a stable
+     * label offset and width when a container is added, removed, or resized.
+     */
+    const roundWidth = (width) => Math.round(width * 10) / 10;
+    const measureContainers = () => {
+        const startContainer = getStartContainer();
+        if (!startContainer || !shouldMeasure()) {
+            return { adjustment: '', startEndWidth: '' };
         }
-        /*
-         * Round to one decimal place so fractional widths produce a stable
-         * label offset when the start container is added, removed, or resized.
-         */
-        const startContainerWidth = startSlot.getBoundingClientRect().width;
-        const roundedWidth = Math.round(startContainerWidth * 10) / 10;
+        const startContainerWidth = roundWidth(startContainer.getBoundingClientRect().width);
+        const endContainerWidth = roundWidth(getEndContainer()?.getBoundingClientRect().width ?? 0);
         const sign = dir.isRTL(el) ? '' : '-';
-        return roundedWidth ? `${sign}${roundedWidth}px` : '0px';
+        return {
+            adjustment: startContainerWidth ? `${sign}${startContainerWidth}px` : '0px',
+            startEndWidth: `${roundWidth(startContainerWidth + endContainerWidth)}px`,
+        };
     };
-    const scheduleAdjustmentUpdate = () => {
+    const scheduleMeasurement = () => {
         // Return if there is already a measurement queued to avoid a flicker
         if (measurementRaf !== undefined) {
             return;
@@ -212,7 +228,17 @@ const createStartContainerController = (el, getStartContainer, shouldApplyAdjust
          */
         measurementRaf = helpers.raf(() => {
             measurementRaf = undefined;
-            const adjustment = calculateAdjustment();
+            const { adjustment, startEndWidth } = measureContainers();
+            /*
+             * The width only changes how much of the label fits, so it can
+             * animate. The transition is not suppressed here because the end
+             * container can change size while the label is floating, such as
+             * when async content loads, and that should not cut the float short.
+             */
+            if (startEndWidth !== appliedStartEndWidth) {
+                el.style.setProperty(START_END_CONTAINER_WIDTH_VAR, startEndWidth);
+                appliedStartEndWidth = startEndWidth;
+            }
             // Only suppress the label transition when the label has to move
             if (adjustment !== appliedAdjustment) {
                 // Discard a removal queued by an earlier change
@@ -235,29 +261,36 @@ const createStartContainerController = (el, getStartContainer, shouldApplyAdjust
         if (resizeObserver) {
             resizeObserver.disconnect();
             resizeObserver = undefined;
-            observedContainer = undefined;
+            observedStartContainer = undefined;
+            observedEndContainer = undefined;
         }
     };
     const setupResizeObserver = () => {
-        const startSlot = getStartContainer();
-        // Stop watching once the adjustment no longer applies
-        if (!startSlot || !shouldApplyAdjustment()) {
+        const startContainer = getStartContainer();
+        const endContainer = getEndContainer();
+        // Stop watching once the measurements no longer apply
+        if (!startContainer || !shouldMeasure()) {
             disconnectResizeObserver();
             return;
         }
-        // Return when prerendering or already watching this container
-        if (typeof ResizeObserver !== 'function' || (resizeObserver && observedContainer === startSlot)) {
+        // Return when prerendering or already watching these containers
+        if (typeof ResizeObserver !== 'function' ||
+            (resizeObserver && observedStartContainer === startContainer && observedEndContainer === endContainer)) {
             return;
         }
         disconnectResizeObserver();
         resizeObserver = new ResizeObserver(() => {
-            scheduleAdjustmentUpdate();
+            scheduleMeasurement();
         });
-        observedContainer = startSlot;
-        resizeObserver.observe(startSlot);
+        observedStartContainer = startContainer;
+        resizeObserver.observe(startContainer);
+        if (endContainer) {
+            observedEndContainer = endContainer;
+            resizeObserver.observe(endContainer);
+        }
     };
-    const calculateStartContainerWidth = () => {
-        scheduleAdjustmentUpdate();
+    const calculateContainerWidths = () => {
+        scheduleMeasurement();
     };
     const destroy = () => {
         disconnectResizeObserver();
@@ -273,9 +306,10 @@ const createStartContainerController = (el, getStartContainer, shouldApplyAdjust
         }
         // Re-apply from scratch if the element is connected again
         appliedAdjustment = undefined;
+        appliedStartEndWidth = undefined;
     };
     return {
-        calculateStartContainerWidth,
+        calculateContainerWidths,
         destroy,
     };
 };
@@ -461,5 +495,5 @@ const createSlotMutationController = (el, slotName, mutationCallback) => {
 exports.createClickController = createClickController;
 exports.createNotchController = createNotchController;
 exports.createSlotMutationController = createSlotMutationController;
-exports.createStartContainerController = createStartContainerController;
+exports.createStartEndContainerController = createStartEndContainerController;
 exports.getSlottedClickContent = getSlottedClickContent;

package/dist/cjs/{status-tap-C3frTJ4c.js → status-tap-CDA0Y3Ad.js}

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-var index = require('./index-SAR1xwtW.js');
-var index$1 = require('./index-BAM4223M.js');
-var helpers = require('./helpers-Crluoxqu.js');
+var index = require('./index-BiQyIvoc.js');
+var index$1 = require('./index-CNaZ6SYM.js');
+var helpers = require('./helpers-Cqr69qxA.js');
 require('./dir-zwDPRE5K.js');
 
 const startStatusTap = () => {

package/dist/cjs/{swipe-back-ChrfFzIe.js → swipe-back-Dy8pxJCF.js}

@@ -3,10 +3,10 @@
  */
 'use strict';
 
-var helpers = require('./helpers-Crluoxqu.js');
+var helpers = require('./helpers-Cqr69qxA.js');
 var dir = require('./dir-zwDPRE5K.js');
 var index = require('./index-DRPqwSvU.js');
-require('./index-SAR1xwtW.js');
+require('./index-BiQyIvoc.js');
 require('./gesture-controller-CeJslptU.js');
 
 const createSwipeBackGesture = (el, canStartHandler, onStartHandler, onMoveHandler, onEndHandler) => {

package/dist/collection/collection-manifest.json

@@ -99,7 +99,7 @@
   "mixins": [],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.45.1",
+    "version": "4.45.2",
     "typescriptVersion": "5.8.3"
   },
   "collections": [

package/dist/collection/components/backdrop/backdrop.js

@@ -7,6 +7,10 @@ export class Backdrop {
     constructor() {
         /**
          * If `true`, the backdrop will be visible.
+         * This property controls whether or not the backdrop's
+         * default background is shown. It does not control whether
+         * or not the backdrop blocks interaction, and it does not
+         * override a custom background set on `ion-backdrop`.
          */
         this.visible = true;
         /**
@@ -32,7 +36,7 @@ export class Backdrop {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '7abaf2c310aa399607451b14063265e8a5846938', "aria-hidden": "true", class: {
+        return (h(Host, { key: '14141148f4a22371b8ad7cb9dcdc32398ec109aa', "aria-hidden": "true", class: {
                 [mode]: true,
                 'backdrop-hide': !this.visible,
                 'backdrop-no-tappable': !this.tappable,
@@ -66,7 +70,7 @@ export class Backdrop {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the backdrop will be visible."
+                    "text": "If `true`, the backdrop will be visible.\nThis property controls whether or not the backdrop's\ndefault background is shown. It does not control whether\nor not the backdrop blocks interaction, and it does not\noverride a custom background set on `ion-backdrop`."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/datetime/datetime.js

@@ -56,6 +56,13 @@ import { checkForPresentationFormatMismatch, warnIfTimeZoneProvided } from "./ut
 export class Datetime {
     constructor() {
         this.inputId = `ion-dt-${datetimeIds++}`;
+        /**
+         * Set when the user selects a value, cleared when it's confirmed
+         * or `processValue` runs (`reset()`, or `value` being set to a
+         * non-empty value). The overlay present listener only discards a
+         * selection while this is set.
+         */
+        this.hasUnconfirmedSelection = false;
         this.prevPresentation = null;
         this.showMonthAndYear = false;
         this.activeParts = [];
@@ -219,6 +226,7 @@ export class Datetime {
             if (popoverOrModal) {
                 popoverOrModal.dismiss(undefined, role);
             }
+            return popoverOrModal !== null;
         };
         this.setWorkingParts = (parts) => {
             this.workingParts = {
@@ -233,6 +241,7 @@ export class Datetime {
             if (this.readonly) {
                 return;
             }
+            this.hasUnconfirmedSelection = true;
             const { multiple, minParts, maxParts, activeParts } = this;
             /**
              * When setting the active parts, it is possible
@@ -653,7 +662,8 @@ export class Datetime {
                 this.loadTimeout = undefined;
             }
         };
-        this.processValue = (value) => {
+        this.processValue = (value, animated = true) => {
+            this.hasUnconfirmedSelection = false;
             const hasValue = value !== null && value !== undefined && value !== '' && (!Array.isArray(value) || value.length > 0);
             const valueToProcess = hasValue ? parseDate(value) : this.defaultParts;
             const { minParts, maxParts, workingParts, el } = this;
@@ -716,13 +726,14 @@ export class Datetime {
             const didChangeMonth = (month !== undefined && month !== workingParts.month) || (year !== undefined && year !== workingParts.year);
             const bodyIsVisible = el.classList.contains('datetime-ready');
             const { isGridStyle, showMonthAndYear } = this;
-            if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
+            if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear && animated) {
                 /**
                  * Only animate if:
                  * 1. We're using grid style (wheel style pickers should just jump to new value)
                  * 2. The month and/or year actually changed, and both are defined (otherwise there's nothing to animate to)
                  * 3. The calendar body is visible (prevents animation when in collapsed datetime-button, for example)
                  * 4. The month/year picker is not open (since you wouldn't see the animation anyway)
+                 * 5. The caller did not opt out (e.g. the parent overlay is still hidden)
                  */
                 this.animateToDate(targetValue);
             }
@@ -893,6 +904,7 @@ export class Datetime {
                 this.setValue(convertDataToISO(activeParts));
             }
         }
+        this.hasUnconfirmedSelection = false;
         if (closeOverlay) {
             this.closeParentOverlay(CONFIRM_ROLE);
         }
@@ -908,17 +920,22 @@ export class Datetime {
         this.processValue(startDate);
     }
     /**
-     * Emits the ionCancel event and
-     * optionally closes the popover
-     * or modal that the datetime was
+     * Emits the ionCancel event, discards
+     * any unconfirmed selection, and
+     * optionally closes the popover or
+     * modal that the datetime was
      * presented in.
      *
      * @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
      */
     async cancel(closeOverlay = false) {
         this.ionCancel.emit();
-        if (closeOverlay) {
-            this.closeParentOverlay(CANCEL_ROLE);
+        /**
+         * When a parent overlay closes, the present listener discards
+         * the selection on the next open. Otherwise discard it now.
+         */
+        if (!closeOverlay || !this.closeParentOverlay(CANCEL_ROLE)) {
+            this.processValue(this.value);
         }
     }
     /**
@@ -940,6 +957,7 @@ export class Datetime {
         this.loadTimeout = setTimeout(() => {
             this.ensureReadyIfVisible();
         }, 100);
+        this.initializeOverlayPresentListener();
     }
     disconnectedCallback() {
         if (this.clearFocusVisible) {
@@ -947,6 +965,34 @@ export class Datetime {
             this.clearFocusVisible = undefined;
         }
         this.loadTimeoutCleanup();
+        if (this.destroyOverlayPresentListener) {
+            this.destroyOverlayPresentListener();
+            this.destroyOverlayPresentListener = undefined;
+        }
+    }
+    /**
+     * A datetime in a modal or popover stays mounted between
+     * presentations, so an unconfirmed selection would still show when
+     * it reopens. Discarding on present rather than dismiss lets app
+     * code that runs on dismiss still confirm or reset the selection,
+     * whatever order its listeners were added in.
+     */
+    initializeOverlayPresentListener() {
+        const overlay = this.el.closest('ion-modal, ion-popover');
+        if (!overlay) {
+            return;
+        }
+        const eventName = overlay.tagName === 'ION-MODAL' ? 'ionModalWillPresent' : 'ionPopoverWillPresent';
+        const onPresent = (ev) => {
+            // Ignore nested overlays and skip when there's nothing to discard.
+            if (ev.target !== overlay || !this.hasUnconfirmedSelection) {
+                return;
+            }
+            // The overlay is still hidden, so skip the month animation.
+            this.processValue(this.value, false);
+        };
+        overlay.addEventListener(eventName, onPresent);
+        this.destroyOverlayPresentListener = () => overlay.removeEventListener(eventName, onPresent);
     }
     initializeListeners() {
         this.initializeCalendarListener();
@@ -1829,7 +1875,7 @@ export class Datetime {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (h(Host, { key: 'a9128b5c55464e30a269daf9d725bf430c8c655c', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: {
+        return (h(Host, { key: 'e9b99bb5610fc7fe879200a56dcc865c6e2f1404', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: {
                 ...createColorClasses(color, {
                     [mode]: true,
                     ['datetime-readonly']: readonly,
@@ -1841,7 +1887,7 @@ export class Datetime {
                     [`datetime-prefer-wheel`]: hasWheelVariant,
                     [`datetime-grid`]: isGridStyle,
                 }),
-            } }, h("div", { key: 'b49f3a98db2b7cf535d7ea894d518f75f8a1fefb', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            } }, h("div", { key: 'a5e61be2989468dc24ec8fb394116d9339b7824c', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     static get is() { return "ion-datetime"; }
     static get encapsulation() { return "shadow"; }
@@ -2721,7 +2767,7 @@ export class Datetime {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Emits the ionCancel event and\noptionally closes the popover\nor modal that the datetime was\npresented in.",
+                    "text": "Emits the ionCancel event, discards\nany unconfirmed selection, and\noptionally closes the popover or\nmodal that the datetime was\npresented in.",
                     "tags": [{
                             "name": "param",
                             "text": "closeOverlay If `true`, closes the parent overlay. Defaults to `false`."

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

@@ -425,7 +425,11 @@
    * would not be able to see what they are typing.
    */
   max-width: 200px;
-  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  /**
+   * The max-width animates with the transform so the label does not
+   * reveal its full floating width while it is still at full size.
+   */
+  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), max-width 150ms cubic-bezier(0.4, 0, 0.2, 1);
   /**
    * This ensures that double tapping this text
    * clicks the <label> and focuses the input
@@ -439,8 +443,8 @@
  * disable the label transition to prevent the floating label
  * from animating as its position is adjusted.
  *
- * This class is applied by the start container controller, so
- * renaming it here requires renaming it there too.
+ * This class is applied by the start and end container controller,
+ * so renaming it here requires renaming it there too.
  */
 :host(.skip-label-transition) .label-text-wrapper {
   transition: none;