@ionic/core 7.7.4 → 7.7.5-dev.11710260658.1fc29a6c

package/dist/cjs/{overlays-53b60f81.js → overlays-dd5e1ec9.js}

@@ -4,8 +4,8 @@
 'use strict';
 
 const index = require('./index-c8d52405.js');
-const hardwareBackButton = require('./hardware-back-button-4cb049f1.js');
-const ionicGlobal = require('./ionic-global-59aa7eb7.js');
+const hardwareBackButton = require('./hardware-back-button-1d378ca9.js');
+const ionicGlobal = require('./ionic-global-34d0d04a.js');
 const frameworkDelegate = require('./framework-delegate-e0e13baa.js');
 const helpers = require('./helpers-da4c0ed1.js');
 const index$1 = require('./index-5915f9b3.js');
@@ -456,15 +456,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
         return;
     }
     setRootAriaHidden(true);
-    /**
-     * Hide all other overlays from screen readers so only this one
-     * can be read. Note that presenting an overlay always makes
-     * it the topmost one.
-     */
-    if (index.doc !== undefined) {
-        const presentedOverlays = getPresentedOverlays(index.doc);
-        presentedOverlays.forEach((o) => o.setAttribute('aria-hidden', 'true'));
-    }
+    hideOverlaysFromScreenReaders(overlay.el);
     overlay.presented = true;
     overlay.willPresent.emit();
     (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
@@ -557,7 +549,7 @@ const restoreElementFocus = async (overlayEl) => {
     }
 };
 const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnimation, opts) => {
-    var _a, _b, _c;
+    var _a, _b;
     if (!overlay.presented) {
         return false;
     }
@@ -608,13 +600,7 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
         console.error(err);
     }
     overlay.el.remove();
-    /**
-     * If there are other overlays presented, unhide the new
-     * topmost one from screen readers.
-     */
-    if (index.doc !== undefined) {
-        (_c = getPresentedOverlay(index.doc)) === null || _c === void 0 ? void 0 : _c.removeAttribute('aria-hidden');
-    }
+    revealOverlaysToScreenReaders();
     return true;
 };
 const getAppRoot = (doc) => {
@@ -810,6 +796,69 @@ const createTriggerController = () => {
         removeClickListener,
     };
 };
+/**
+ * Ensure that underlying overlays have aria-hidden if necessary so that screen readers
+ * cannot move focus to these elements. Note that we cannot rely on focus/focusin/focusout
+ * events here because those events do not fire when the screen readers moves to a non-focusable
+ * element such as text.
+ * Without this logic screen readers would be able to move focus outside of the top focus-trapped overlay.
+ *
+ * @param newTopMostOverlay - The overlay that is being presented. Since the overlay has not been
+ * fully presented yet at the time this function is called it will not be included in the getPresentedOverlays result.
+ */
+const hideOverlaysFromScreenReaders = (newTopMostOverlay) => {
+    var _a;
+    if (index.doc === undefined)
+        return;
+    const overlays = getPresentedOverlays(index.doc);
+    for (let i = overlays.length - 1; i >= 0; i--) {
+        const presentedOverlay = overlays[i];
+        const nextPresentedOverlay = (_a = overlays[i + 1]) !== null && _a !== void 0 ? _a : newTopMostOverlay;
+        // If next overlay has aria-hidden then all remaining overlays will have it too.
+        if (nextPresentedOverlay.hasAttribute('aria-hidden')) {
+            presentedOverlay.setAttribute('aria-hidden', 'true');
+            /**
+             * If the next overlay is a Toast this does not have aria-hidden then current overlay
+             * should not have aria-hidden either so focus can remain in the current overlay.
+             */
+        }
+        else if (nextPresentedOverlay.tagName !== 'ION-TOAST') {
+            presentedOverlay.setAttribute('aria-hidden', 'true');
+        }
+    }
+};
+/**
+ * When dismissing an overlay we need to reveal the new top-most overlay to screen readers.
+ * If the top-most overlay is a Toast we potentially need to reveal more overlays since
+ * focus is never automatically moved to the Toast.
+ */
+const revealOverlaysToScreenReaders = () => {
+    if (index.doc === undefined)
+        return;
+    // If there are other overlays presented, unhide the new topmost one from screen readers.
+    const overlays = getPresentedOverlays(index.doc);
+    for (let i = overlays.length - 1; i >= 0; i--) {
+        const currentOverlay = overlays[i];
+        /**
+         * If the current we are looking at is a Toast then we can remove aria-hidden.
+         * However, we potentially need to keep looking at the overlay stack because there
+         * could be more Toasts underneath. Additionally, we need to unhide the closest non-Toast
+         * overlay too so focus can move there since focus is never automatically moved to the Toast.
+         */
+        if (currentOverlay.tagName === 'ION-TOAST') {
+            currentOverlay.removeAttribute('aria-hidden');
+            /**
+             * If we found a non-Toast element then we can just remove aria-hidden and stop searching entirely
+             * since this overlay should always receive focus. As a result, all underlying overlays should still
+             * be hidden from screen readers.
+             */
+        }
+        else {
+            currentOverlay.removeAttribute('aria-hidden');
+            break;
+        }
+    }
+};
 
 exports.BACKDROP = BACKDROP;
 exports.GESTURE = GESTURE;

package/dist/cjs/{status-tap-dbe2342f.js → status-tap-d9ebd6d3.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const index = require('./index-ea266398.js');
+const index = require('./index-c42c9063.js');
 const index$1 = require('./index-bef98850.js');
 const helpers = require('./helpers-da4c0ed1.js');
 require('./index-5915f9b3.js');

package/dist/collection/collection-manifest.json

@@ -94,7 +94,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.12.4",
+    "version": "4.12.5",
     "typescriptVersion": "5.3.3"
   },
   "collections": [

package/dist/collection/components/checkbox/checkbox.js

@@ -105,7 +105,7 @@ export class Checkbox {
         const mode = getIonMode(this);
         const path = getSVGPath(mode, indeterminate);
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { class: createColorClasses(color, {
+        return (h(Host, { "aria-checked": indeterminate ? 'mixed' : `${checked}`, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'checkbox-checked': checked,

package/dist/collection/components/checkbox/test/checkbox.spec.js

@@ -32,3 +32,15 @@ describe('ion-checkbox: disabled', () => {
         expect(checkbox.checked).toBe(false);
     });
 });
+describe('ion-checkbox: indeterminate', () => {
+    it('should have a mixed value for aria-checked', async () => {
+        const page = await newSpecPage({
+            components: [Checkbox],
+            html: `
+        <ion-checkbox indeterminate="true">Checkbox</ion-checkbox>
+      `,
+        });
+        const checkbox = page.body.querySelector('ion-checkbox');
+        expect(checkbox.getAttribute('aria-checked')).toBe('mixed');
+    });
+});

package/dist/collection/components/range/range.js

@@ -58,8 +58,14 @@ export class Range {
                     el: rangeSlider,
                     gestureName: 'range',
                     gesturePriority: 100,
-                    threshold: 0,
-                    onStart: (ev) => this.onStart(ev),
+                    /**
+                     * Provide a threshold since the drag movement
+                     * might be a user scrolling the view.
+                     * If this is true, then the range
+                     * should not move.
+                     */
+                    threshold: 10,
+                    onStart: () => this.onStart(),
                     onMove: (ev) => this.onMove(ev),
                     onEnd: (ev) => this.onEnd(ev),
                 });
@@ -242,33 +248,93 @@ export class Range {
         this.value = this.ensureValueInBounds(this.value);
         this.ionChange.emit({ value: this.value });
     }
-    onStart(detail) {
-        const { contentEl } = this;
-        if (contentEl) {
+    /**
+     * The value should be updated on touch end or
+     * when the component is being dragged.
+     * This follows the native behavior of mobile devices.
+     *
+     * For example: When the user lifts their finger from the
+     * screen after tapping the bar or dragging the bar or knob.
+     */
+    onStart() {
+        this.ionKnobMoveStart.emit({ value: this.ensureValueInBounds(this.value) });
+    }
+    /**
+     * The value should be updated while dragging the
+     * bar or knob.
+     *
+     * While the user is dragging, the view
+     * should not scroll. This is to prevent the user from
+     * feeling disoriented while dragging.
+     *
+     * The user can scroll on the view if the knob or
+     * bar is not being dragged.
+     *
+     * @param detail The details of the gesture event.
+     */
+    onMove(detail) {
+        const { contentEl, pressedKnob } = this;
+        const currentX = detail.currentX;
+        /**
+         * Since the user is dragging on the bar or knob, the view should not scroll.
+         *
+         * This only needs to be done once.
+         */
+        if (contentEl && this.initialContentScrollY === undefined) {
             this.initialContentScrollY = disableContentScrollY(contentEl);
         }
-        const rect = (this.rect = this.rangeSlider.getBoundingClientRect());
-        const currentX = detail.currentX;
-        // figure out which knob they started closer to
-        let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);
-        if (isRTL(this.el)) {
-            ratio = 1 - ratio;
+        /**
+         * The `pressedKnob` can be undefined if the user just
+         * started dragging the knob.
+         *
+         * This is necessary to determine which knob the user is dragging,
+         * especially when it's a dual knob.
+         * Plus, it determines when to apply certain styles.
+         *
+         * This only needs to be done once since the knob won't change
+         * while the user is dragging.
+         */
+        if (pressedKnob === undefined) {
+            this.setPressedKnob(currentX);
         }
-        this.pressedKnob = !this.dualKnobs || Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio) ? 'A' : 'B';
-        this.setFocus(this.pressedKnob);
-        // update the active knob's position
         this.update(currentX);
-        this.ionKnobMoveStart.emit({ value: this.ensureValueInBounds(this.value) });
-    }
-    onMove(detail) {
-        this.update(detail.currentX);
     }
+    /**
+     * The value should be updated on touch end:
+     * - When the user lifts their finger from the screen after
+     * tapping the bar.
+     *
+     * @param detail The details of the gesture or mouse event.
+     */
     onEnd(detail) {
         const { contentEl, initialContentScrollY } = this;
-        if (contentEl) {
+        const currentX = detail.currentX || detail.clientX;
+        /**
+         * The `pressedKnob` can be undefined if the user never
+         * dragged the knob. They just tapped on the bar.
+         *
+         * This is necessary to determine which knob the user is changing,
+         * especially when it's a dual knob.
+         * Plus, it determines when to apply certain styles.
+         */
+        if (this.pressedKnob === undefined) {
+            this.setPressedKnob(currentX);
+        }
+        /**
+         * The user is no longer dragging the bar or
+         * knob (if they were dragging it).
+         *
+         * The user can now scroll on the view in the next gesture event.
+         */
+        if (contentEl && initialContentScrollY !== undefined) {
             resetContentScrollY(contentEl, initialContentScrollY);
         }
-        this.update(detail.currentX);
+        // update the active knob's position
+        this.update(currentX);
+        /**
+         * Reset the pressed knob to undefined since the user
+         * may start dragging a different knob in the next gesture event.
+         */
         this.pressedKnob = undefined;
         this.emitValueChange();
         this.ionKnobMoveEnd.emit({ value: this.ensureValueInBounds(this.value) });
@@ -295,6 +361,16 @@ export class Range {
         // Update input value
         this.updateValue();
     }
+    setPressedKnob(currentX) {
+        const rect = (this.rect = this.rangeSlider.getBoundingClientRect());
+        // figure out which knob they started closer to
+        let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);
+        if (isRTL(this.el)) {
+            ratio = 1 - ratio;
+        }
+        this.pressedKnob = !this.dualKnobs || Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio) ? 'A' : 'B';
+        this.setFocus(this.pressedKnob);
+    }
     get valA() {
         return ratioToValue(this.ratioA, this.min, this.max, this.step);
     }
@@ -497,7 +573,36 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
         if (!this.legacyFormController.hasLegacyControl() && this.hasLabel) {
             labelledBy = 'range-label';
         }
-        return (h("div", { class: "range-slider", ref: (rangeEl) => (this.rangeSlider = rangeEl) }, ticks.map((tick) => (h("div", { style: tickStyle(tick), role: "presentation", class: {
+        return (h("div", { class: "range-slider", ref: (rangeEl) => (this.rangeSlider = rangeEl),
+            /**
+             * Since the gesture has a threshold, the value
+             * won't change until the user has dragged past
+             * the threshold. This is to prevent the range
+             * from moving when the user is scrolling.
+             *
+             * This results in the value not being updated
+             * and the event emitters not being triggered
+             * if the user taps on the range. This is why
+             * we need to listen for the "pointerUp" event.
+             */
+            onPointerUp: (ev) => {
+                /**
+                 * If the user drags the knob on the web
+                 * version (does not occur on mobile),
+                 * the "pointerUp" event will be triggered
+                 * along with the gesture's events.
+                 * This leads to duplicate events.
+                 *
+                 * By checking if the pressedKnob is undefined,
+                 * we can determine if the "pointerUp" event was
+                 * triggered by a tap or a drag. If it was
+                 * dragged, the pressedKnob will be defined.
+                 */
+                if (this.pressedKnob === undefined) {
+                    this.onStart();
+                    this.onEnd(ev);
+                }
+            } }, ticks.map((tick) => (h("div", { style: tickStyle(tick), role: "presentation", class: {
                 'range-tick': true,
                 'range-tick-active': tick.active,
             }, part: tick.active ? 'tick-active' : 'tick' }))), h("div", { class: "range-bar-container" }, h("div", { class: "range-bar", role: "presentation", part: "bar" }), h("div", { class: {

package/dist/collection/components/range/test/range-events.e2e.js

@@ -54,6 +54,33 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
                 expect(rangeStart).toHaveReceivedEventDetail({ value: 20 });
                 expect(rangeEnd).toHaveReceivedEventDetail({ value: 21 });
             });
+            test('should emit end event on tap', async ({ page }, testInfo) => {
+                testInfo.annotations.push({
+                    type: 'issue',
+                    description: 'https://github.com/ionic-team/ionic-framework/issues/28487',
+                });
+                await page.setContent(`<ion-range aria-label="Range" value="20"></ion-range>`, config);
+                const range = page.locator('ion-range');
+                const rangeEndSpy = await page.spyOnEvent('ionKnobMoveEnd');
+                const rangeBoundingBox = await range.boundingBox();
+                /**
+                 * Coordinates for the click event.
+                 * These need to be near the end of the range
+                 * (or anything that isn't the current value).
+                 *
+                 * The number 50 is arbitrary, but it should be
+                 * less than the width of the range.
+                 */
+                const x = rangeBoundingBox.width - 50;
+                // The y coordinate is the middle of the range.
+                const y = rangeBoundingBox.height / 2;
+                // Click near the end of the range.
+                await range.click({
+                    position: { x, y },
+                });
+                await rangeEndSpy.next();
+                expect(rangeEndSpy.length).toBe(1);
+            });
             // TODO FW-2873
             test.skip('should not scroll when the knob is swiped', async ({ page, skip }) => {
                 skip.browser('webkit', 'mouse.wheel is not available in WebKit');

package/dist/collection/utils/overlays.js

@@ -455,15 +455,7 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
         return;
     }
     setRootAriaHidden(true);
-    /**
-     * Hide all other overlays from screen readers so only this one
-     * can be read. Note that presenting an overlay always makes
-     * it the topmost one.
-     */
-    if (doc !== undefined) {
-        const presentedOverlays = getPresentedOverlays(doc);
-        presentedOverlays.forEach((o) => o.setAttribute('aria-hidden', 'true'));
-    }
+    hideOverlaysFromScreenReaders(overlay.el);
     overlay.presented = true;
     overlay.willPresent.emit();
     (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
@@ -556,7 +548,7 @@ const restoreElementFocus = async (overlayEl) => {
     }
 };
 export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnimation, opts) => {
-    var _a, _b, _c;
+    var _a, _b;
     if (!overlay.presented) {
         return false;
     }
@@ -607,13 +599,7 @@ export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLe
         console.error(err);
     }
     overlay.el.remove();
-    /**
-     * If there are other overlays presented, unhide the new
-     * topmost one from screen readers.
-     */
-    if (doc !== undefined) {
-        (_c = getPresentedOverlay(doc)) === null || _c === void 0 ? void 0 : _c.removeAttribute('aria-hidden');
-    }
+    revealOverlaysToScreenReaders();
     return true;
 };
 const getAppRoot = (doc) => {
@@ -809,3 +795,66 @@ export const createTriggerController = () => {
         removeClickListener,
     };
 };
+/**
+ * Ensure that underlying overlays have aria-hidden if necessary so that screen readers
+ * cannot move focus to these elements. Note that we cannot rely on focus/focusin/focusout
+ * events here because those events do not fire when the screen readers moves to a non-focusable
+ * element such as text.
+ * Without this logic screen readers would be able to move focus outside of the top focus-trapped overlay.
+ *
+ * @param newTopMostOverlay - The overlay that is being presented. Since the overlay has not been
+ * fully presented yet at the time this function is called it will not be included in the getPresentedOverlays result.
+ */
+const hideOverlaysFromScreenReaders = (newTopMostOverlay) => {
+    var _a;
+    if (doc === undefined)
+        return;
+    const overlays = getPresentedOverlays(doc);
+    for (let i = overlays.length - 1; i >= 0; i--) {
+        const presentedOverlay = overlays[i];
+        const nextPresentedOverlay = (_a = overlays[i + 1]) !== null && _a !== void 0 ? _a : newTopMostOverlay;
+        // If next overlay has aria-hidden then all remaining overlays will have it too.
+        if (nextPresentedOverlay.hasAttribute('aria-hidden')) {
+            presentedOverlay.setAttribute('aria-hidden', 'true');
+            /**
+             * If the next overlay is a Toast this does not have aria-hidden then current overlay
+             * should not have aria-hidden either so focus can remain in the current overlay.
+             */
+        }
+        else if (nextPresentedOverlay.tagName !== 'ION-TOAST') {
+            presentedOverlay.setAttribute('aria-hidden', 'true');
+        }
+    }
+};
+/**
+ * When dismissing an overlay we need to reveal the new top-most overlay to screen readers.
+ * If the top-most overlay is a Toast we potentially need to reveal more overlays since
+ * focus is never automatically moved to the Toast.
+ */
+const revealOverlaysToScreenReaders = () => {
+    if (doc === undefined)
+        return;
+    // If there are other overlays presented, unhide the new topmost one from screen readers.
+    const overlays = getPresentedOverlays(doc);
+    for (let i = overlays.length - 1; i >= 0; i--) {
+        const currentOverlay = overlays[i];
+        /**
+         * If the current we are looking at is a Toast then we can remove aria-hidden.
+         * However, we potentially need to keep looking at the overlay stack because there
+         * could be more Toasts underneath. Additionally, we need to unhide the closest non-Toast
+         * overlay too so focus can move there since focus is never automatically moved to the Toast.
+         */
+        if (currentOverlay.tagName === 'ION-TOAST') {
+            currentOverlay.removeAttribute('aria-hidden');
+            /**
+             * If we found a non-Toast element then we can just remove aria-hidden and stop searching entirely
+             * since this overlay should always receive focus. As a result, all underlying overlays should still
+             * be hidden from screen readers.
+             */
+        }
+        else {
+            currentOverlay.removeAttribute('aria-hidden');
+            break;
+        }
+    }
+};

package/dist/collection/utils/test/overlays/overlays.spec.js

@@ -3,6 +3,7 @@
  */
 import { newSpecPage } from "@stencil/core/testing";
 import { Modal } from "../../../components/modal/modal";
+import { Toast } from "../../../components/toast/toast";
 import { Nav } from "../../../components/nav/nav";
 import { RouterOutlet } from "../../../components/router-outlet/router-outlet";
 import { setRootAriaHidden } from "../../overlays";
@@ -150,4 +151,56 @@ describe('aria-hidden on individual overlays', () => {
         await modalOne.present();
         expect(modalOne.hasAttribute('aria-hidden')).toEqual(false);
     });
+    it('should not hide previous overlay is top-most overlay is toast', async () => {
+        const page = await newSpecPage({
+            components: [Modal, Toast],
+            html: `
+        <ion-modal id="m-one"></ion-modal>
+        <ion-modal id="m-two"></ion-modal>
+        <ion-toast id="t-one"></ion-toast>
+        <ion-toast id="t-two"></ion-toast>
+      `,
+        });
+        const modalOne = page.body.querySelector('ion-modal#m-one');
+        const modalTwo = page.body.querySelector('ion-modal#m-two');
+        const toastOne = page.body.querySelector('ion-toast#t-one');
+        const toastTwo = page.body.querySelector('ion-toast#t-two');
+        await modalOne.present();
+        await modalTwo.present();
+        await toastOne.present();
+        await toastTwo.present();
+        expect(modalOne.hasAttribute('aria-hidden')).toEqual(true);
+        expect(modalTwo.hasAttribute('aria-hidden')).toEqual(false);
+        expect(toastOne.hasAttribute('aria-hidden')).toEqual(false);
+        expect(toastTwo.hasAttribute('aria-hidden')).toEqual(false);
+        await toastTwo.dismiss();
+        expect(modalOne.hasAttribute('aria-hidden')).toEqual(true);
+        expect(modalTwo.hasAttribute('aria-hidden')).toEqual(false);
+        expect(toastOne.hasAttribute('aria-hidden')).toEqual(false);
+        await toastOne.dismiss();
+        expect(modalOne.hasAttribute('aria-hidden')).toEqual(true);
+        expect(modalTwo.hasAttribute('aria-hidden')).toEqual(false);
+    });
+    it('should hide previous overlay even with a toast that is not the top-most overlay', async () => {
+        const page = await newSpecPage({
+            components: [Modal, Toast],
+            html: `
+        <ion-modal id="m-one"></ion-modal>
+        <ion-toast id="t-one"></ion-toast>
+        <ion-modal id="m-two"></ion-modal>
+      `,
+        });
+        const modalOne = page.body.querySelector('ion-modal#m-one');
+        const modalTwo = page.body.querySelector('ion-modal#m-two');
+        const toastOne = page.body.querySelector('ion-toast#t-one');
+        await modalOne.present();
+        await toastOne.present();
+        await modalTwo.present();
+        expect(modalOne.hasAttribute('aria-hidden')).toEqual(true);
+        expect(toastOne.hasAttribute('aria-hidden')).toEqual(true);
+        expect(modalTwo.hasAttribute('aria-hidden')).toEqual(false);
+        await modalTwo.dismiss();
+        expect(modalOne.hasAttribute('aria-hidden')).toEqual(false);
+        expect(toastOne.hasAttribute('aria-hidden')).toEqual(false);
+    });
 });

package/dist/docs.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2024-03-06T17:59:51",
+  "timestamp": "2024-03-12T16:26:05",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.12.4",
+    "version": "4.12.5",
     "typescriptVersion": "5.3.3"
   },
   "components": [

package/dist/esm/{app-globals-cfb6787b.js → app-globals-4689f35b.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { i as initialize } from './ionic-global-c976d684.js';
+import { i as initialize } from './ionic-global-c836c8c6.js';
 
 const globalScripts = initialize;
 

package/dist/esm/{button-active-01502123.js → button-active-57422dbf.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as writeTask } from './index-9b6d6df3.js';
+import { w as writeTask } from './index-eab5468b.js';
 import { h as hapticSelectionEnd, a as hapticSelectionStart, b as hapticSelectionChanged } from './haptic-554688a5.js';
 import { createGesture } from './index-2cf77112.js';
 

package/dist/esm/{hardware-back-button-3a14f99e.js → hardware-back-button-adcc28d5.js}

@@ -2,8 +2,8 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { w as win } from './index-a5d50daf.js';
-import { c as config } from './ionic-global-c976d684.js';
-import './index-9b6d6df3.js';
+import { c as config } from './ionic-global-c836c8c6.js';
+import './index-eab5468b.js';
 
 /**
  * CloseWatcher is a newer API that lets

package/dist/esm/{index-c43cf47f.js → index-84ee782d.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as writeTask, B as Build } from './index-9b6d6df3.js';
+import { w as writeTask, B as Build } from './index-eab5468b.js';
 import { r as raf } from './helpers-be245865.js';
 
 const LIFECYCLE_WILL_ENTER = 'ionViewWillEnter';
@@ -10,8 +10,8 @@ const LIFECYCLE_WILL_LEAVE = 'ionViewWillLeave';
 const LIFECYCLE_DID_LEAVE = 'ionViewDidLeave';
 const LIFECYCLE_WILL_UNLOAD = 'ionViewWillUnload';
 
-const iosTransitionAnimation = () => import('./ios.transition-da7d9344.js');
-const mdTransitionAnimation = () => import('./md.transition-bdaf610c.js');
+const iosTransitionAnimation = () => import('./ios.transition-eb28f539.js');
+const mdTransitionAnimation = () => import('./md.transition-fd4e98e6.js');
 // TODO(FW-2832): types
 const transition = (opts) => {
     return new Promise((resolve, reject) => {

package/dist/esm/{index-9c9d8b49.js → index-a3478902.js}

@@ -2,10 +2,10 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { d as doc } from './index-a5d50daf.js';
-import { MENU_BACK_BUTTON_PRIORITY } from './hardware-back-button-3a14f99e.js';
+import { MENU_BACK_BUTTON_PRIORITY } from './hardware-back-button-adcc28d5.js';
 import { p as printIonWarning } from './index-9b0d46f4.js';
 import { c as componentOnReady } from './helpers-be245865.js';
-import { b as getIonMode } from './ionic-global-c976d684.js';
+import { b as getIonMode } from './ionic-global-c836c8c6.js';
 import { c as createAnimation } from './animation-6a0c5338.js';
 
 /**

package/dist/esm/{index-9b6d6df3.js → index-eab5468b.js}

@@ -2267,7 +2267,8 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
     if ((hostRef.$flags$ & 32 /* HOST_FLAGS.hasInitializedComponent */) === 0) {
         // Let the runtime know that the component has been initialized
         hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
-        {
+        const bundleId = cmpMeta.$lazyBundleId$;
+        if (bundleId) {
             // lazy loaded components
             // request the component's implementation to be
             // wired up with the host element
@@ -2314,6 +2315,14 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
             endNewInstance();
             fireConnectedCallback(hostRef.$lazyInstance$);
         }
+        else {
+            // sync constructor component
+            Cstr = elm.constructor;
+            // wait for the CustomElementRegistry to mark the component as ready before setting `isWatchReady`. Otherwise,
+            // watchers may fire prematurely if `customElements.get()`/`customElements.whenDefined()` resolves _before_
+            // Stencil has completed instantiating the component.
+            customElements.whenDefined(cmpMeta.$tagName$).then(() => (hostRef.$flags$ |= 128 /* HOST_FLAGS.isWatchReady */));
+        }
         if (Cstr.style) {
             // this component has styles but we haven't registered them yet
             let style = Cstr.style;