voyager-ionic-core 9.0.7 → 9.0.9

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

@@ -453,7 +453,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 textarea
@@ -467,8 +471,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;
@@ -1060,12 +1064,20 @@
   --padding-end: 16px;
   /**
    * The measured width of the start container, as a negative offset
-   * in LTR and a positive one in RTL. Written to the host by the
-   * start container controller, so renaming it here requires renaming
+   * in LTR and a positive one in RTL. Written to the host by the start
+   * and end container controller, so renaming it here requires renaming
    * it there too. Declared with a default so the label is positioned
    * correctly before the first measurement runs.
    */
   --internal-start-container-adjustment: 0px;
+  /**
+   * The measured combined width of the start and end containers.
+   * Written to the host by the start and end container controller, so
+   * renaming it here requires renaming it there too. Declared with a
+   * default so the floating label falls back to the width of the
+   * control before the first measurement runs.
+   */
+  --internal-start-end-container-width: 0px;
 }
 
 :host(.textarea-fill-outline.textarea-shape-round) {
@@ -1120,11 +1132,12 @@
 }
 
 /**
- * The resting label is positioned relative to the control so it can size to
- * the space between the start and end slots. When floating, the label needs
- * to escape the control and position itself relative to the wrapper instead.
+ * The label is positioned relative to the control whether it is resting
+ * over the textarea or floating in the notch, so its max-width always resolves
+ * against the same width. This lets the max-width animate between the
+ * resting and floating values without jumping.
  */
-:host(.textarea-fill-outline:not(.label-floating)) .textarea-control {
+:host(.textarea-fill-outline) .textarea-control {
   position: relative;
 }
 
@@ -1133,9 +1146,8 @@
   transform-origin: left top;
   position: absolute;
   /**
-   * While resting this is the width of the textarea, which already
-   * excludes the start and end slots. Once the label floats the
-   * containing block becomes the wrapper and the rule below takes over.
+   * This is the width of the textarea, which already
+   * excludes the start and end slots.
    */
   max-width: 100%;
 }
@@ -1168,12 +1180,11 @@
   margin-top: 0;
   margin-bottom: 0;
   /**
-   * Label text should not extend
-   * beyond the bounds of the textarea.
+   * Label text should not extend beyond the bounds of the textarea.
+   * The control excludes the start and end slots, but the notch spans
+   * the full width of the outline, so their width is added back.
    */
-  max-width: calc(
-    (100% - var(--padding-start) - var(--padding-end) - 8px) / 0.75
-  );
+  max-width: calc((100% + var(--internal-start-end-container-width) - 8px) / 0.75);
 }
 
 /**

package/dist/collection/utils/forms/index.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 export * from './notch-controller';
-export * from './start-container-controller';
+export * from './start-end-container-controller';
 export * from './compare-with-utils';
 export * from './item-multiple-inputs';
 export * from './click-controller';

package/dist/collection/utils/forms/{start-container-controller.js → start-end-container-controller.js}

@@ -18,10 +18,19 @@ export const SKIP_LABEL_TRANSITION_CLASS = 'skip-label-transition';
  */
 export 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.
+ */
+export 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
@@ -30,29 +39,36 @@ export const START_CONTAINER_ADJUSTMENT_VAR = '--internal-start-container-adjust
  * @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.
  */
-export const createStartContainerController = (el, getStartContainer, shouldApplyAdjustment) => {
+export 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 = 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;
@@ -63,7 +79,17 @@ export const createStartContainerController = (el, getStartContainer, shouldAppl
          */
         measurementRaf = 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
@@ -86,29 +112,36 @@ export const createStartContainerController = (el, getStartContainer, shouldAppl
         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();
@@ -124,9 +157,10 @@ export const createStartContainerController = (el, getStartContainer, shouldAppl
         }
         // Re-apply from scratch if the element is connected again
         appliedAdjustment = undefined;
+        appliedStartEndWidth = undefined;
     };
     return {
-        calculateStartContainerWidth,
+        calculateContainerWidths,
         destroy,
     };
 };

package/dist/collection/utils/transition/index.js

@@ -229,6 +229,17 @@ export const setPageHidden = (el, hidden) => {
         el.classList.remove('ion-page-hidden');
     }
 };
+/**
+ * Blocks clicks on `el` during a swipe to go back without animations,
+ * so releasing the pointer doesn't click whatever is under it. Returns
+ * a function that unblocks it after the release click.
+ */
+export const blockSwipeClicks = (el) => {
+    el.style.setProperty('pointer-events', 'none');
+    return () => {
+        setTimeout(() => el.style.removeProperty('pointer-events'));
+    };
+};
 const setZIndex = (enteringEl, leavingEl, direction) => {
     if (enteringEl !== undefined) {
         enteringEl.style.zIndex = direction === 'back' ? '99' : '101';

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-10-09T04:07:06",
+  "timestamp": "2026-10-28T03:31:14",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.45.2",
@@ -3315,7 +3315,7 @@
           "mutable": false,
           "attr": "visible",
           "reflectToAttr": false,
-          "docs": "If `true`, the backdrop will be visible.",
+          "docs": "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`.",
           "docsTags": [
             {
               "name": "default",
@@ -9696,7 +9696,7 @@
               "docs": "If `true`, closes the parent overlay. Defaults to `false`."
             }
           ],
-          "docs": "Emits the ionCancel event and\noptionally closes the popover\nor modal that the datetime was\npresented in.",
+          "docs": "Emits the ionCancel event, discards\nany unconfirmed selection, and\noptionally closes the popover or\nmodal that the datetime was\npresented in.",
           "docsTags": [
             {
               "name": "param",

package/dist/esm/{index-BBASprVu.js → index-z9vdZN7I.js}

@@ -118,8 +118,8 @@ const createFocusController = () => {
 };
 const LAST_FOCUS = 'ion-last-focus';
 
-const iosTransitionAnimation = () => import('./ios.transition-B8netzsb.js');
-const mdTransitionAnimation = () => import('./md.transition-DNCSSiXk.js');
+const iosTransitionAnimation = () => import('./ios.transition-BkUGiDUz.js');
+const mdTransitionAnimation = () => import('./md.transition-B6hlrWjR.js');
 const focusController = createFocusController();
 // TODO(FW-2832): types
 /**
@@ -341,6 +341,17 @@ const setPageHidden = (el, hidden) => {
         el.classList.remove('ion-page-hidden');
     }
 };
+/**
+ * Blocks clicks on `el` during a swipe to go back without animations,
+ * so releasing the pointer doesn't click whatever is under it. Returns
+ * a function that unblocks it after the release click.
+ */
+const blockSwipeClicks = (el) => {
+    el.style.setProperty('pointer-events', 'none');
+    return () => {
+        setTimeout(() => el.style.removeProperty('pointer-events'));
+    };
+};
 const setZIndex = (enteringEl, leavingEl, direction) => {
     if (enteringEl !== undefined) {
         enteringEl.style.zIndex = direction === 'back' ? '99' : '101';
@@ -415,4 +426,4 @@ const getIosIonHeader = (opts) => {
     return element.querySelector('ion-header');
 };
 
-export { LIFECYCLE_WILL_ENTER as L, LIFECYCLE_DID_ENTER as a, LIFECYCLE_WILL_LEAVE as b, LIFECYCLE_DID_LEAVE as c, LIFECYCLE_WILL_UNLOAD as d, deepReady as e, getIonPageElement as g, lifecycle as l, setPageHidden as s, transition as t, waitForMount as w };
+export { LIFECYCLE_WILL_ENTER as L, LIFECYCLE_DID_ENTER as a, LIFECYCLE_WILL_LEAVE as b, LIFECYCLE_DID_LEAVE as c, LIFECYCLE_WILL_UNLOAD as d, deepReady as e, blockSwipeClicks as f, getIonPageElement as g, lifecycle as l, setPageHidden as s, transition as t, waitForMount as w };

package/dist/esm/index.js

@@ -2,9 +2,9 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 export { c as createAnimation } from './animation-DmtJpz89.js';
-export { a as LIFECYCLE_DID_ENTER, c as LIFECYCLE_DID_LEAVE, L as LIFECYCLE_WILL_ENTER, b as LIFECYCLE_WILL_LEAVE, d as LIFECYCLE_WILL_UNLOAD, g as getIonPageElement } from './index-BBASprVu.js';
-export { iosTransitionAnimation } from './ios.transition-B8netzsb.js';
-export { mdTransitionAnimation } from './md.transition-DNCSSiXk.js';
+export { a as LIFECYCLE_DID_ENTER, c as LIFECYCLE_DID_LEAVE, L as LIFECYCLE_WILL_ENTER, b as LIFECYCLE_WILL_LEAVE, d as LIFECYCLE_WILL_UNLOAD, g as getIonPageElement } from './index-z9vdZN7I.js';
+export { iosTransitionAnimation } from './ios.transition-BkUGiDUz.js';
+export { mdTransitionAnimation } from './md.transition-B6hlrWjR.js';
 export { g as getTimeGivenProgression } from './cubic-bezier-hHmYLOfE.js';
 export { createGesture } from './index-BmLuEdV7.js';
 export { g as getPlatforms, i as initialize, a as isPlatform } from './ionic-global-Cep6oYzK.js';

package/dist/esm/ion-app_8.entry.js

@@ -12,7 +12,7 @@ import { c as createKeyboardController } from './keyboard-controller-B2NoF7bV.js
 import { g as getTimeGivenProgression } from './cubic-bezier-hHmYLOfE.js';
 import { a as attachComponent, d as detachComponent } from './framework-delegate-CDjM1vRH.js';
 import { c as createLockController } from './lock-controller-B-hirT0v.js';
-import { t as transition } from './index-BBASprVu.js';
+import { t as transition, f as blockSwipeClicks } from './index-z9vdZN7I.js';
 import './gesture-controller-B_gJaBk0.js';
 import './keyboard-Cmqp5iZD.js';
 import './capacitor-CHJaJ9aX.js';
@@ -1262,6 +1262,14 @@ const RouterOutlet = class {
     async connectedCallback() {
         const onStart = () => {
             this.gestureOrAnimationInProgress = true;
+            /**
+             * Without animations there's nothing for the swipe to drive, so
+             * wait until the gesture ends to decide whether to go back.
+             */
+            if (!(this.animated && config.getBoolean('animated', true))) {
+                this.unblockSwipeClicks = blockSwipeClicks(this.el);
+                return;
+            }
             if (this.swipeHandler) {
                 this.swipeHandler.onStart();
             }
@@ -1295,7 +1303,21 @@ const RouterOutlet = class {
                 this.ani.progressEnd(shouldComplete ? 1 : 0, newStepValue, dur);
             }
             else {
-                this.gestureOrAnimationInProgress = false;
+                const { swipeHandler, unblockSwipeClicks: unblock } = this;
+                this.unblockSwipeClicks = undefined;
+                // The stack can change during the swipe, so check that going back is still possible.
+                if (unblock && shouldComplete && swipeHandler?.canStart()) {
+                    new Promise((resolve) => resolve(swipeHandler.onStart()))
+                        .then(() => swipeHandler.onEnd(true))
+                        .finally(() => {
+                        this.gestureOrAnimationInProgress = false;
+                        unblock();
+                    });
+                }
+                else {
+                    this.gestureOrAnimationInProgress = false;
+                    unblock?.();
+                }
             }
         });
         if (this.swipeGesture === undefined) {
@@ -1318,6 +1340,12 @@ const RouterOutlet = class {
             this.gesture.destroy();
             this.gesture = undefined;
         }
+        // Destroying the gesture skips onEnd, so end a deferred swipe here.
+        if (this.unblockSwipeClicks) {
+            this.unblockSwipeClicks();
+            this.unblockSwipeClicks = undefined;
+            this.gestureOrAnimationInProgress = false;
+        }
     }
     /** @internal */
     async commit(enteringEl, leavingEl, opts) {
@@ -1429,7 +1457,7 @@ const RouterOutlet = class {
         return true;
     }
     render() {
-        return h("slot", { key: 'b84efe2b852f24f6b43e0667b25266f9223447ae' });
+        return h("slot", { key: '811f32d8794e58fcc79deef1e217c4d419778742' });
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ion-backdrop.entry.js

@@ -14,6 +14,10 @@ const Backdrop = class {
         this.ionBackdropTap = createEvent(this, "ionBackdropTap", 7);
         /**
          * 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;
         /**
@@ -39,7 +43,7 @@ const Backdrop = class {
     }
     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,

package/dist/esm/ion-datetime.entry.js

@@ -765,6 +765,13 @@ const Datetime = class {
         this.ionStyle = createEvent(this, "ionStyle", 7);
         this.ionRender = createEvent(this, "ionRender", 7);
         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 = [];
@@ -928,6 +935,7 @@ const Datetime = class {
             if (popoverOrModal) {
                 popoverOrModal.dismiss(undefined, role);
             }
+            return popoverOrModal !== null;
         };
         this.setWorkingParts = (parts) => {
             this.workingParts = {
@@ -942,6 +950,7 @@ const Datetime = class {
             if (this.readonly) {
                 return;
             }
+            this.hasUnconfirmedSelection = true;
             const { multiple, minParts, maxParts, activeParts } = this;
             /**
              * When setting the active parts, it is possible
@@ -1362,7 +1371,8 @@ const Datetime = class {
                 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;
@@ -1425,13 +1435,14 @@ const Datetime = class {
             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);
             }
@@ -1602,6 +1613,7 @@ const Datetime = class {
                 this.setValue(convertDataToISO(activeParts));
             }
         }
+        this.hasUnconfirmedSelection = false;
         if (closeOverlay) {
             this.closeParentOverlay(CONFIRM_ROLE);
         }
@@ -1617,17 +1629,22 @@ const Datetime = class {
         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);
         }
     }
     /**
@@ -1649,6 +1666,7 @@ const Datetime = class {
         this.loadTimeout = setTimeout(() => {
             this.ensureReadyIfVisible();
         }, 100);
+        this.initializeOverlayPresentListener();
     }
     disconnectedCallback() {
         if (this.clearFocusVisible) {
@@ -1656,6 +1674,34 @@ const Datetime = class {
             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();
@@ -2538,7 +2584,7 @@ const Datetime = class {
         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,
@@ -2550,7 +2596,7 @@ const Datetime = class {
                     [`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)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {