v8.7.13

Issue number: resolves #30868

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?

Currently, users are unable to use ionic-framework with node < 24. This
was an accidental change, not something we actually require.

## What is the new behavior?

This change aligns the core file with the [top level
package.json](https://github.com/ionic-team/ionic-framework/blob/main/package.json#L9)
requirement. We may want to look into upping this at some point in the
future, but right now this should be fine.

## Does this introduce a breaking change?

- [ ] Yes
- [X] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.7.13](https://github.com/ionic-team/ionic-framework/compare/v8.7.12...v8.7.13) (2025-12-13)
+
+**Note:** Version bump only for package ionic-framework
+
+
+
+
+
 ## [8.7.12](https://github.com/ionic-team/ionic-framework/compare/v8.7.11...v8.7.12) (2025-12-10)
 
 

core/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.7.13](https://github.com/ionic-team/ionic-framework/compare/v8.7.12...v8.7.13) (2025-12-13)
+
+**Note:** Version bump only for package @ionic/core
+
+
+
+
+
 ## [8.7.12](https://github.com/ionic-team/ionic-framework/compare/v8.7.11...v8.7.12) (2025-12-10)
 
 

core/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@ionic/core",
-  "version": "8.7.12",
+  "version": "8.7.13",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "8.7.12",
+      "version": "8.7.13",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.38.0",
@@ -52,7 +52,7 @@
         "stylelint-order": "^4.1.0"
       },
       "engines": {
-        "node": "24.x"
+        "node": ">= 16"
       }
     },
     "custom-rules": {
@@ -94,7 +94,6 @@
       "version": "7.16.12",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.16.7",
         "@babel/generator": "^7.16.8",
@@ -634,7 +633,6 @@
       "integrity": "sha512-250HTVd/W/KdMygoqaedisvNbHbpbQTN2Hy/8ZYGm1nAqE0Fx7sGss4l0nDg33STxEdDhtVRoL2fIaaiukKseA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -872,7 +870,6 @@
       "version": "4.33.0",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "4.33.0",
         "@typescript-eslint/types": "4.33.0",
@@ -1810,7 +1807,6 @@
     "node_modules/@stencil/core": {
       "version": "4.38.0",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -2235,7 +2231,6 @@
       "version": "6.7.2",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "6.7.2",
         "@typescript-eslint/types": "6.7.2",
@@ -2461,6 +2456,7 @@
       "integrity": "sha512-vay5/oQJdsNHmliWoZfHPoVZZRmnSWhug0BYT34njkYTPqClh3DNWLkZNJBVSjsNMrg0CCrBfoKkjZQPM/QVUw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/parser": "^7.28.5",
         "@vue/shared": "3.5.25",
@@ -2475,6 +2471,7 @@
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
       "dev": true,
       "license": "BSD-2-Clause",
+      "peer": true,
       "engines": {
         "node": ">=0.12"
       },
@@ -2487,7 +2484,8 @@
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@vue/compiler-dom": {
       "version": "3.5.25",
@@ -2495,6 +2493,7 @@
       "integrity": "sha512-4We0OAcMZsKgYoGlMjzYvaoErltdFI2/25wqanuTu+S4gismOTRTBPi4IASOjxWdzIwrYSjnqONfKvuqkXzE2Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-core": "3.5.25",
         "@vue/shared": "3.5.25"
@@ -2506,6 +2505,7 @@
       "integrity": "sha512-PUgKp2rn8fFsI++lF2sO7gwO2d9Yj57Utr5yEsDf3GNaQcowCLKL7sf+LvVFvtJDXUp/03+dC6f2+LCv5aK1ag==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/parser": "^7.28.5",
         "@vue/compiler-core": "3.5.25",
@@ -2523,7 +2523,8 @@
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@vue/compiler-sfc/node_modules/postcss": {
       "version": "8.5.6",
@@ -2545,6 +2546,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -2560,6 +2562,7 @@
       "integrity": "sha512-ritPSKLBcParnsKYi+GNtbdbrIE1mtuFEJ4U1sWeuOMlIziK5GtOL85t5RhsNy4uWIXPgk+OUdpnXiTdzn8o3A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.25",
         "@vue/shared": "3.5.25"
@@ -2571,6 +2574,7 @@
       "integrity": "sha512-5xfAypCQepv4Jog1U4zn8cZIcbKKFka3AgWHEFQeK65OW+Ys4XybP6z2kKgws4YB43KGpqp5D/K3go2UPPunLA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/shared": "3.5.25"
       }
@@ -2581,6 +2585,7 @@
       "integrity": "sha512-Z751v203YWwYzy460bzsYQISDfPjHTl+6Zzwo/a3CsAf+0ccEjQ8c+0CdX1WsumRTHeywvyUFtW6KvNukT/smA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/reactivity": "3.5.25",
         "@vue/shared": "3.5.25"
@@ -2592,6 +2597,7 @@
       "integrity": "sha512-a4WrkYFbb19i9pjkz38zJBg8wa/rboNERq3+hRRb0dHiJh13c+6kAbgqCPfMaJ2gg4weWD3APZswASOfmKwamA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/reactivity": "3.5.25",
         "@vue/runtime-core": "3.5.25",
@@ -2605,6 +2611,7 @@
       "integrity": "sha512-UJaXR54vMG61i8XNIzTSf2Q7MOqZHpp8+x3XLGtE3+fL+nQd+k7O5+X3D/uWrnQXOdMw5VPih+Uremcw+u1woQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-ssr": "3.5.25",
         "@vue/shared": "3.5.25"
@@ -2618,7 +2625,8 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.25.tgz",
       "integrity": "sha512-AbOPdQQnAnzs58H2FrrDxYj/TJfmeS2jdfEEhgiKINy+bnOANmVizIEgq1r+C5zsbs6l1CCQxtcj71rwNQ4jWg==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@zeit/schemas": {
       "version": "2.21.0",
@@ -2641,7 +2649,6 @@
       "version": "7.4.0",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3802,7 +3809,8 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/debug": {
       "version": "2.6.9",
@@ -4096,7 +4104,6 @@
       "version": "7.32.0",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "7.12.11",
         "@eslint/eslintrc": "^0.4.3",
@@ -7292,6 +7299,7 @@
       "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
@@ -7613,6 +7621,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -7967,7 +7976,6 @@
       "integrity": "sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "playwright-core": "cli.js"
       },
@@ -7979,7 +7987,6 @@
       "version": "7.0.35",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "chalk": "^2.4.2",
         "source-map": "^0.6.1",
@@ -8085,7 +8092,6 @@
       "version": "0.36.2",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "postcss": ">=5.0.0"
       }
@@ -8134,7 +8140,6 @@
       "version": "2.6.1",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "prettier": "bin-prettier.js"
       },
@@ -8492,7 +8497,6 @@
       "version": "2.35.1",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -8714,6 +8718,7 @@
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
       "dev": true,
       "license": "BSD-3-Clause",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9834,4 +9839,4 @@
       }
     }
   }
-}
+}

core/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@ionic/core",
-  "version": "8.7.12",
+  "version": "8.7.13",
   "description": "Base components for Ionic",
   "engines": {
-    "node": "24.x"
+    "node": ">= 16"
   },
   "keywords": [
     "ionic",

core/src/components/datetime-button/test/a11y/datetime-button.e2e.ts

@@ -21,7 +21,6 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, screenshot, c
       );
 
       const datetimeButton = page.locator('ion-datetime-button');
-      await page.locator('.datetime-ready').waitFor();
 
       await expect(datetimeButton).toHaveScreenshot(screenshot(`datetime-button-scale`));
     });
@@ -41,7 +40,6 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, screenshot, c
       );
 
       const datetimeButton = page.locator('ion-datetime-button');
-      await page.locator('.datetime-ready').waitFor();
 
       await expect(datetimeButton).toHaveScreenshot(screenshot(`datetime-button-scale-wrap`));
     });

core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts

@@ -24,9 +24,6 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await dateButton.click();
       await ionModalDidPresent.next();
 
-      // Wait for datetime to be ready before taking screenshot
-      await page.locator('ion-datetime.datetime-ready').waitFor();
-
       await expect(page).toHaveScreenshot(screenshot(`datetime-overlay-modal`));
     });
 
@@ -47,9 +44,6 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await dateButton.click();
       await ionPopoverDidPresent.next();
 
-      // Wait for datetime to be ready before taking screenshot
-      await page.locator('ion-datetime.datetime-ready').waitFor();
-
       await expect(page).toHaveScreenshot(screenshot(`datetime-overlay-popover`));
     });
   });

core/src/components/datetime/datetime.tsx

@@ -108,8 +108,8 @@ export class Datetime implements ComponentInterface {
   private inputId = `ion-dt-${datetimeIds++}`;
   private calendarBodyRef?: HTMLElement;
   private popoverRef?: HTMLIonPopoverElement;
+  private intersectionTrackerRef?: HTMLElement;
   private clearFocusVisible?: () => void;
-  private resizeObserver?: ResizeObserver;
   private parsedMinuteValues?: number[];
   private parsedHourValues?: number[];
   private parsedMonthValues?: number[];
@@ -118,7 +118,6 @@ export class Datetime implements ComponentInterface {
 
   private destroyCalendarListener?: () => void;
   private destroyKeyboardMO?: () => void;
-  private destroyOverlayListeners?: () => void;
 
   // TODO(FW-2832): types (DatetimeParts causes some errors that need untangling)
   private minParts?: any;
@@ -1078,14 +1077,6 @@ export class Datetime implements ComponentInterface {
       this.clearFocusVisible();
       this.clearFocusVisible = undefined;
     }
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-      this.resizeObserver = undefined;
-    }
-    if (this.destroyOverlayListeners) {
-      this.destroyOverlayListeners();
-      this.destroyOverlayListeners = undefined;
-    }
   }
 
   /**
@@ -1111,100 +1102,113 @@ export class Datetime implements ComponentInterface {
   }
 
   /**
-   * Sets up visibility detection for the datetime component.
+   * TODO(FW-6931): Remove this fallback upon solving the root cause
+   * Fallback to ensure the datetime becomes ready even if
+   * IntersectionObserver never reports it as intersecting.
    *
-   * Uses multiple strategies to reliably detect when the datetime becomes
-   * visible, which is necessary for proper initialization of scrollable areas:
-   * 1. ResizeObserver - detects dimension changes
-   * 2. Overlay event listeners - for datetime inside modals/popovers
-   * 3. Polling fallback - for browsers where observers are unreliable (WebKit)
+   * This is primarily used in environments where the observer
+   * might not fire as expected, such as when running under
+   * synthetic tests that stub IntersectionObserver.
    */
-  private initializeVisibilityObserver() {
-    const { el } = this;
-
-    const markReady = () => {
-      if (el.classList.contains('datetime-ready')) {
-        return;
-      }
-      this.initializeListeners();
-      writeTask(() => {
-        el.classList.add('datetime-ready');
-      });
-    };
-
-    const markHidden = () => {
-      this.destroyInteractionListeners();
-      this.showMonthAndYear = false;
-      writeTask(() => {
-        el.classList.remove('datetime-ready');
-      });
-      startVisibilityPolling();
-    };
-
-    /**
-     * FW-6931: Poll for visibility as a fallback for browsers where
-     * ResizeObserver doesn't fire reliably (e.g., WebKit).
-     */
-    const startVisibilityPolling = () => {
-      let pollCount = 0;
-      const poll = () => {
-        if (el.classList.contains('datetime-ready') || pollCount++ >= 60) {
-          return;
-        }
-        const { width, height } = el.getBoundingClientRect();
-        if (width > 0 && height > 0) {
-          markReady();
-        } else {
-          raf(poll);
-        }
-      };
-      raf(poll);
-    };
-
-    /**
-     * FW-6931: Listen for overlay present/dismiss events when datetime
-     * is inside a modal or popover.
-     */
-    const parentOverlay = el.closest('ion-modal, ion-popover') as HTMLIonModalElement | HTMLIonPopoverElement | null;
-    if (parentOverlay) {
-      const handlePresent = () => markReady();
-      const handleDismiss = () => markHidden();
-
-      parentOverlay.addEventListener('didPresent', handlePresent);
-      parentOverlay.addEventListener('didDismiss', handleDismiss);
-
-      this.destroyOverlayListeners = () => {
-        parentOverlay.removeEventListener('didPresent', handlePresent);
-        parentOverlay.removeEventListener('didDismiss', handleDismiss);
-      };
+  private ensureReadyIfVisible = () => {
+    if (this.el.classList.contains('datetime-ready')) {
+      return;
     }
 
-    if (typeof ResizeObserver !== 'undefined') {
-      this.resizeObserver = new ResizeObserver((entries) => {
-        const { width, height } = entries[0].contentRect;
-        const isVisible = width > 0 && height > 0;
-        const isReady = el.classList.contains('datetime-ready');
-
-        if (isVisible && !isReady) {
-          markReady();
-        } else if (!isVisible && isReady) {
-          markHidden();
-        }
-      });
-
-      // Use raf to avoid race condition with modal/popover animations
-      raf(() => this.resizeObserver?.observe(el));
-      startVisibilityPolling();
-    } else {
-      // Test environment fallback - mark ready immediately
-      writeTask(() => {
-        el.classList.add('datetime-ready');
-      });
+    const rect = this.el.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) {
+      return;
     }
-  }
+
+    this.initializeListeners();
+
+    writeTask(() => {
+      this.el.classList.add('datetime-ready');
+    });
+  };
 
   componentDidLoad() {
-    this.initializeVisibilityObserver();
+    const { el, intersectionTrackerRef } = this;
+
+    /**
+     * If a scrollable element is hidden using `display: none`,
+     * it will not have a scroll height meaning we cannot scroll elements
+     * into view. As a result, we will need to wait for the datetime to become
+     * visible if used inside of a modal or a popover otherwise the scrollable
+     * areas will not have the correct values snapped into place.
+     */
+    const visibleCallback = (entries: IntersectionObserverEntry[]) => {
+      const ev = entries[0];
+      if (!ev.isIntersecting) {
+        return;
+      }
+
+      this.initializeListeners();
+
+      /**
+       * TODO FW-2793: Datetime needs a frame to ensure that it
+       * can properly scroll contents into view. As a result
+       * we hide the scrollable content until after that frame
+       * so users do not see the content quickly shifting. The downside
+       * is that the content will pop into view a frame after. Maybe there
+       * is a better way to handle this?
+       */
+      writeTask(() => {
+        this.el.classList.add('datetime-ready');
+      });
+    };
+    const visibleIO = new IntersectionObserver(visibleCallback, { threshold: 0.01, root: el });
+
+    /**
+     * Use raf to avoid a race condition between the component loading and
+     * its display animation starting (such as when shown in a modal). This
+     * could cause the datetime to start at a visibility of 0, erroneously
+     * triggering the `hiddenIO` observer below.
+     */
+    raf(() => visibleIO?.observe(intersectionTrackerRef!));
+
+    /**
+     * TODO(FW-6931): Remove this fallback upon solving the root cause
+     * Fallback: If IntersectionObserver never reports that the
+     * datetime is visible but the host clearly has layout, ensure
+     * we still initialize listeners and mark the component as ready.
+     *
+     * We schedule this after everything has had a chance to run.
+     */
+    setTimeout(() => {
+      this.ensureReadyIfVisible();
+    }, 100);
+
+    /**
+     * We need to clean up listeners when the datetime is hidden
+     * in a popover/modal so that we can properly scroll containers
+     * back into view if they are re-presented. When the datetime is hidden
+     * the scroll areas have scroll widths/heights of 0px, so any snapping
+     * we did originally has been lost.
+     */
+    const hiddenCallback = (entries: IntersectionObserverEntry[]) => {
+      const ev = entries[0];
+      if (ev.isIntersecting) {
+        return;
+      }
+
+      this.destroyInteractionListeners();
+
+      /**
+       * When datetime is hidden, we need to make sure that
+       * the month/year picker is closed. Otherwise,
+       * it will be open when the datetime re-appears
+       * and the scroll area of the calendar grid will be 0.
+       * As a result, the wrong month will be shown.
+       */
+      this.showMonthAndYear = false;
+
+      writeTask(() => {
+        this.el.classList.remove('datetime-ready');
+      });
+    };
+    const hiddenIO = new IntersectionObserver(hiddenCallback, { threshold: 0, root: el });
+    raf(() => hiddenIO?.observe(intersectionTrackerRef!));
 
     /**
      * Datetime uses Ionic components that emit
@@ -2689,6 +2693,20 @@ export class Datetime implements ComponentInterface {
           }),
         }}
       >
+        {/*
+          WebKit has a quirk where IntersectionObserver callbacks are delayed until after
+          an accelerated animation finishes if the "root" specified in the config is the
+          browser viewport (the default behavior if "root" is not specified). This means
+          that when presenting a datetime in a modal on iOS the calendar body appears
+          blank until the modal animation finishes.
+
+          We can work around this by observing .intersection-tracker and using the host
+          (ion-datetime) as the "root". This allows the IO callback to fire the moment
+          the datetime is visible. The .intersection-tracker element should not have
+          dimensions or additional styles, and it should not be positioned absolutely
+          otherwise the IO callback may fire at unexpected times.
+        */}
+        <div class="intersection-tracker" ref={(el) => (this.intersectionTrackerRef = el)}></div>
         {this.renderDatetime(mode)}
       </Host>
     );

core/src/components/datetime/test/basic/datetime.e2e.ts

@@ -395,18 +395,40 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 });
 
 /**
- * Verify that datetime becomes ready via ResizeObserver.
- * This tests that the datetime properly initializes when it has
- * dimensions, using ResizeObserver to detect visibility.
+ * Synthetic IntersectionObserver fallback behavior.
+ *
+ * This test stubs IntersectionObserver so that the callback
+ * never reports an intersecting entry. The datetime should
+ * still become ready via its internal fallback logic.
  */
 configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
-  test.describe(title('datetime: visibility detection'), () => {
-    test('should become ready when rendered with dimensions', async ({ page }, testInfo) => {
+  test.describe(title('datetime: IO fallback'), () => {
+    test('should become ready even if IntersectionObserver never reports visible', async ({ page }, testInfo) => {
       testInfo.annotations.push({
         type: 'issue',
         description: 'https://github.com/ionic-team/ionic-framework/issues/30706',
       });
 
+      await page.addInitScript(() => {
+        const OriginalIO = window.IntersectionObserver;
+        (window as any).IntersectionObserver = function (callback: any, options: any) {
+          const instance = new OriginalIO(() => {}, options);
+          const originalObserve = instance.observe.bind(instance);
+
+          instance.observe = (target: Element) => {
+            originalObserve(target);
+            callback([
+              {
+                isIntersecting: false,
+                target,
+              } as IntersectionObserverEntry,
+            ]);
+          };
+
+          return instance;
+        } as any;
+      });
+
       await page.setContent(
         `
         <ion-datetime value="2022-05-03"></ion-datetime>
@@ -416,8 +438,8 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
 
       const datetime = page.locator('ion-datetime');
 
-      // Wait for the datetime to become ready via ResizeObserver
-      await page.locator('.datetime-ready').waitFor();
+      // Give the fallback a short amount of time to run
+      await page.waitForTimeout(100);
 
       await expect(datetime).toHaveClass(/datetime-ready/);
 

core/src/components/datetime/test/custom/datetime.e2e.ts

@@ -52,7 +52,6 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('datetime: custom focus'), () => {
     test('should focus the selected day and then the day after', async ({ page }) => {
       await page.goto(`/src/components/datetime/test/custom`, config);
-      await page.locator('.datetime-ready').last().waitFor();
 
       const datetime = page.locator('#custom-calendar-days');
 

core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts

@@ -7,7 +7,6 @@ configs().forEach(({ title, screenshot, config }) => {
       await page.goto('/src/components/datetime/test/first-day-of-week', config);
 
       const datetime = page.locator('ion-datetime');
-      await page.locator('.datetime-ready').waitFor();
       await expect(datetime).toHaveScreenshot(screenshot(`datetime-day-of-week`));
     });
   });

core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts

@@ -10,7 +10,6 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       `,
         config
       );
-      await page.locator('.datetime-ready').waitFor();
     });
 
     test('should render highlights correctly when using an array', async ({ page }) => {

lerna.json

@@ -3,5 +3,5 @@
     "core",
     "packages/*"
   ],
-  "version": "8.7.12"
+  "version": "8.7.13"
 }

packages/angular-server/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.7.13](https://github.com/ionic-team/ionic-framework/compare/v8.7.12...v8.7.13) (2025-12-13)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
 ## [8.7.12](https://github.com/ionic-team/ionic-framework/compare/v8.7.11...v8.7.12) (2025-12-10)
 
 **Note:** Version bump only for package @ionic/angular-server

packages/angular-server/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular-server",
-  "version": "8.7.12",
+  "version": "8.7.13",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular-server",
-      "version": "8.7.12",
+      "version": "8.7.13",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^8.7.12"
+        "@ionic/core": "^8.7.13"
       },
       "devDependencies": {
         "@angular-eslint/eslint-plugin": "^16.0.0",
@@ -11289,4 +11289,4 @@
       }
     }
   }
-}
+}

packages/angular-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular-server",
-  "version": "8.7.12",
+  "version": "8.7.13",
   "description": "Angular SSR Module for Ionic",
   "keywords": [
     "ionic",
@@ -62,6 +62,6 @@
   },
   "prettier": "@ionic/prettier-config",
   "dependencies": {
-    "@ionic/core": "^8.7.12"
+    "@ionic/core": "^8.7.13"
   }
 }

packages/angular/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.7.13](https://github.com/ionic-team/ionic-framework/compare/v8.7.12...v8.7.13) (2025-12-13)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
 ## [8.7.12](https://github.com/ionic-team/ionic-framework/compare/v8.7.11...v8.7.12) (2025-12-10)
 
 

packages/angular/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "8.7.12",
+  "version": "8.7.13",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "8.7.12",
+      "version": "8.7.13",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^8.7.12",
+        "@ionic/core": "^8.7.13",
         "ionicons": "^8.0.13",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.3.0"
@@ -9095,4 +9095,4 @@
       }
     }
   }
-}
+}

packages/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "8.7.12",
+  "version": "8.7.13",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -48,7 +48,7 @@
     }
   },
   "dependencies": {
-    "@ionic/core": "^8.7.12",
+    "@ionic/core": "^8.7.13",
     "ionicons": "^8.0.13",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.3.0"

packages/docs/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.7.13](https://github.com/ionic-team/ionic-framework/compare/v8.7.12...v8.7.13) (2025-12-13)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
 ## [8.7.12](https://github.com/ionic-team/ionic-framework/compare/v8.7.11...v8.7.12) (2025-12-10)
 
 **Note:** Version bump only for package @ionic/docs

packages/docs/package-lock.json

@@ -1,13 +1,13 @@
 {
   "name": "@ionic/docs",
-  "version": "8.7.12",
+  "version": "8.7.13",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/docs",
-      "version": "8.7.12",
+      "version": "8.7.13",
       "license": "MIT"
     }
   }
-}
+}

packages/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/docs",
-  "version": "8.7.12",
+  "version": "8.7.13",
   "description": "Pre-packaged API documentation for the Ionic docs.",
   "main": "core.json",
   "types": "core.d.ts",

packages/react-router/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.7.13](https://github.com/ionic-team/ionic-framework/compare/v8.7.12...v8.7.13) (2025-12-13)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
 ## [8.7.12](https://github.com/ionic-team/ionic-framework/compare/v8.7.11...v8.7.12) (2025-12-10)
 
 **Note:** Version bump only for package @ionic/react-router

packages/react-router/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react-router",
-  "version": "8.7.12",
+  "version": "8.7.13",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react-router",
-      "version": "8.7.12",
+      "version": "8.7.13",
       "license": "MIT",
       "dependencies": {
-        "@ionic/react": "^8.7.12",
+        "@ionic/react": "^8.7.13",
         "tslib": "*"
       },
       "devDependencies": {
@@ -6847,4 +6847,4 @@
       "dev": true
     }
   }
-}
+}

packages/react-router/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react-router",
-  "version": "8.7.12",
+  "version": "8.7.13",
   "description": "React Router wrapper for @ionic/react",
   "keywords": [
     "ionic",
@@ -36,7 +36,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@ionic/react": "^8.7.12",
+    "@ionic/react": "^8.7.13",
     "tslib": "*"
   },
   "peerDependencies": {

packages/react/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.7.13](https://github.com/ionic-team/ionic-framework/compare/v8.7.12...v8.7.13) (2025-12-13)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
 ## [8.7.12](https://github.com/ionic-team/ionic-framework/compare/v8.7.11...v8.7.12) (2025-12-10)
 
 

packages/react/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react",
-  "version": "8.7.12",
+  "version": "8.7.13",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react",
-      "version": "8.7.12",
+      "version": "8.7.13",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^8.7.12",
+        "@ionic/core": "^8.7.13",
         "ionicons": "^8.0.13",
         "tslib": "*"
       },
@@ -11916,4 +11916,4 @@
       }
     }
   }
-}
+}

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react",
-  "version": "8.7.12",
+  "version": "8.7.13",
   "description": "React specific wrapper for @ionic/core",
   "keywords": [
     "ionic",
@@ -40,7 +40,7 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "^8.7.12",
+    "@ionic/core": "^8.7.13",
     "ionicons": "^8.0.13",
     "tslib": "*"
   },

packages/vue-router/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.7.13](https://github.com/ionic-team/ionic-framework/compare/v8.7.12...v8.7.13) (2025-12-13)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
 ## [8.7.12](https://github.com/ionic-team/ionic-framework/compare/v8.7.11...v8.7.12) (2025-12-10)
 
 **Note:** Version bump only for package @ionic/vue-router

packages/vue-router/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue-router",
-  "version": "8.7.12",
+  "version": "8.7.13",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue-router",
-      "version": "8.7.12",
+      "version": "8.7.13",
       "license": "MIT",
       "dependencies": {
-        "@ionic/vue": "^8.7.12"
+        "@ionic/vue": "^8.7.13"
       },
       "devDependencies": {
         "@ionic/eslint-config": "^0.3.0",
@@ -12994,4 +12994,4 @@
       "dev": true
     }
   }
-}
+}

packages/vue-router/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue-router",
-  "version": "8.7.12",
+  "version": "8.7.13",
   "description": "Vue Router integration for @ionic/vue",
   "scripts": {
     "test.spec": "jest",
@@ -44,7 +44,7 @@
   },
   "homepage": "https://github.com/ionic-team/ionic-framework#readme",
   "dependencies": {
-    "@ionic/vue": "^8.7.12"
+    "@ionic/vue": "^8.7.13"
   },
   "devDependencies": {
     "@ionic/eslint-config": "^0.3.0",

packages/vue/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.7.13](https://github.com/ionic-team/ionic-framework/compare/v8.7.12...v8.7.13) (2025-12-13)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
 ## [8.7.12](https://github.com/ionic-team/ionic-framework/compare/v8.7.11...v8.7.12) (2025-12-10)
 
 **Note:** Version bump only for package @ionic/vue

packages/vue/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue",
-  "version": "8.7.12",
+  "version": "8.7.13",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue",
-      "version": "8.7.12",
+      "version": "8.7.13",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^8.7.12",
+        "@ionic/core": "^8.7.13",
         "@stencil/vue-output-target": "0.10.7",
         "ionicons": "^8.0.13"
       },
@@ -4022,4 +4022,4 @@
       "dev": true
     }
   }
-}
+}

packages/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue",
-  "version": "8.7.12",
+  "version": "8.7.13",
   "description": "Vue specific wrapper for @ionic/core",
   "scripts": {
     "eslint": "eslint src",
@@ -68,7 +68,7 @@
     "vue-router": "^4.0.16"
   },
   "dependencies": {
-    "@ionic/core": "^8.7.12",
+    "@ionic/core": "^8.7.13",
     "@stencil/vue-output-target": "0.10.7",
     "ionicons": "^8.0.13"
   },