voyager-ionic-core 7.6.5 → 7.7.0

package/dist/collection/components/alert/alert.js

@@ -387,9 +387,9 @@ export class Alert {
          * If neither is defined, don't set aria-labelledby.
          */
         const ariaLabelledBy = header ? hdrId : subHeader ? subHdrId : null;
-        return (h(Host, Object.assign({ role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: '8327e1aef6c404c2021d43aaa542d86e839817f5', role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { tappable: this.backdropDismiss }), h("div", { tabindex: "0" }), h("div", { class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { class: "alert-head" }, header && (h("h2", { id: hdrId, class: "alert-title" }, header)), subHeader && (h("h2", { id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { tabindex: "0" })));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '814a4e1b4f7560026b089b762c68401b6277355e', tappable: this.backdropDismiss }), h("div", { key: 'b31ce08019e7223a098d18cb857f72eddc245e98', tabindex: "0" }), h("div", { key: '77efa4b9f7062f55ba0998a09a24550ec0b9b4f5', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '648e0768610ee57f9e5c84b8955da497ec9b0b82', class: "alert-head" }, header && (h("h2", { id: hdrId, class: "alert-title" }, header)), subHeader && (h("h2", { id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: 'f3d752cce77ca021dc959611ad5078b94b7f3cec', tabindex: "0" })));
     }
     static get is() { return "ion-alert"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/alert/test/basic/alert.e2e.js

@@ -55,10 +55,6 @@ configs().forEach(({ config, screenshot, title }) => {
             await alertFixture.open('#longMessage');
             await alertFixture.screenshot('longMessage');
         });
-        test('more than two buttons', async () => {
-            await alertFixture.open('#multipleButtons');
-            await alertFixture.screenshot('multipleButtons');
-        });
         test('no message', async () => {
             await alertFixture.open('#noMessage');
             await alertFixture.screenshot('noMessage');
@@ -81,6 +77,35 @@ configs().forEach(({ config, screenshot, title }) => {
         });
     });
 });
+configs({ themes: ['light', 'dark'] }).forEach(({ config, screenshot, title }) => {
+    test.describe(title('should not have visual regressions'), () => {
+        test('more than two buttons', async ({ page }) => {
+            await page.setContent(`
+        <ion-alert
+          header="Alert"
+          sub-header="Subtitle"
+          message="This is an alert message."
+          is-open="true"
+        ></ion-alert>
+
+        <script>
+          const alert = document.querySelector('ion-alert');
+          alert.buttons = [
+            'Open Modal',
+            {
+              text: 'Delete',
+              id: 'delete-button',
+              role: 'destructive',
+            },
+            'Cancel'
+          ];
+        </script>
+      `, config);
+            const alert = page.locator('ion-alert');
+            await expect(alert).toHaveScreenshot(screenshot(`alert-multipleButtons`));
+        });
+    });
+});
 class AlertFixture {
     constructor(page, screenshot) {
         this.page = page;

package/dist/collection/components/app/app.js

@@ -2,6 +2,8 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Build, Host, h } from "@stencil/core";
+import { shoudUseCloseWatcher } from "../../utils/hardware-back-button";
+import { printIonWarning } from "../../utils/logging/index";
 import { isPlatform } from "../../utils/platform";
 import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
@@ -25,10 +27,18 @@ export class App {
                     import('../../utils/input-shims/input-shims').then((module) => module.startInputShims(config, platform));
                 }
                 const hardwareBackButtonModule = await import('../../utils/hardware-back-button');
-                if (config.getBoolean('hardwareBackButton', isHybrid)) {
+                const supportsHardwareBackButtonEvents = isHybrid || shoudUseCloseWatcher();
+                if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
                     hardwareBackButtonModule.startHardwareBackButton();
                 }
                 else {
+                    /**
+                     * If an app sets hardwareBackButton: false and experimentalCloseWatcher: true
+                     * then the close watcher will not be used.
+                     */
+                    if (shoudUseCloseWatcher()) {
+                        printIonWarning('experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.');
+                    }
                     hardwareBackButtonModule.blockHardwareBackButton();
                 }
                 if (typeof window !== 'undefined') {
@@ -55,7 +65,7 @@ export class App {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { class: {
+        return (h(Host, { key: '3535eb5c0dab78a78011e552524a98599b2b650f', class: {
                 [mode]: true,
                 'ion-page': true,
                 'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),

package/dist/collection/components/avatar/avatar.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Avatar {
     render() {
-        return (h(Host, { class: getIonMode(this) }, h("slot", null)));
+        return (h(Host, { key: '95d7ca334f9b66e0983cbc1b782ded0b9a54eaa9', class: getIonMode(this) }, h("slot", { key: '011d20189acdb03bee328aa4fa0511826a0b3a36' })));
     }
     static get is() { return "ion-avatar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/back-button/back-button.js

@@ -72,7 +72,7 @@ export class BackButton {
         const showBackButton = defaultHref !== undefined;
         const mode = getIonMode(this);
         const ariaLabel = inheritedAttributes['aria-label'] || backButtonText || 'back';
-        return (h(Host, { onClick: this.onClick, class: createColorClasses(color, {
+        return (h(Host, { key: '175fff2d7a41d2deaaf7b781c5ba2aac9311ebf4', onClick: this.onClick, class: createColorClasses(color, {
                 [mode]: true,
                 button: true, // ion-buttons target .button
                 'back-button-disabled': disabled,
@@ -82,7 +82,7 @@ export class BackButton {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 'show-back-button': showBackButton,
-            }) }, h("button", { type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { class: "button-inner" }, backButtonIcon && (h("ion-icon", { part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), mode === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
+            }) }, h("button", { key: '59fe30c167ea82e2431e45d46060a01bcb2aea77', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: '3d704fb7ef001446361e7a09d43763a771b242b9', class: "button-inner" }, backButtonIcon && (h("ion-icon", { part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), mode === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
     }
     static get is() { return "ion-back-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -35,7 +35,7 @@ export class Backdrop {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { tabindex: "-1", "aria-hidden": "true", class: {
+        return (h(Host, { key: 'b2adb9dabef01fa49388d67d9e8a4a370931f633', tabindex: "-1", "aria-hidden": "true", class: {
                 [mode]: true,
                 'backdrop-hide': !this.visible,
                 'backdrop-no-tappable': !this.tappable,

package/dist/collection/components/badge/badge.js

@@ -13,9 +13,9 @@ export class Badge {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { class: createColorClasses(this.color, {
+        return (h(Host, { key: '043eea016721e53f0af1cbf1371bc08694281204', class: createColorClasses(this.color, {
                 [mode]: true,
-            }) }, h("slot", null)));
+            }) }, h("slot", { key: 'bd510450d6b60f2794491244e68a83049a5ef6dd' })));
     }
     static get is() { return "ion-badge"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -64,7 +64,7 @@ export class Breadcrumb {
         // to show the separator as long as it isn't also the last breadcrumb
         // otherwise if not collapsed use the value in separator
         const showSeparator = last ? false : collapsed ? (showCollapsedIndicator && !last ? true : false) : separator;
-        return (h(Host, { onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation), "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '632efa1bc6dc446e81efe8cd7763cb9b16466563', onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation), "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'breadcrumb-active': active,
                 'breadcrumb-collapsed': collapsed,
@@ -74,7 +74,7 @@ export class Breadcrumb {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': clickable,
                 'ion-focusable': clickable,
-            }) }, h(TagType, Object.assign({}, attrs, { class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("slot", { name: "start" }), h("slot", null), h("slot", { name: "end" })), showCollapsedIndicator && (h("button", { part: "collapsed-indicator", "aria-label": "Show more breadcrumbs", onClick: () => this.collapsedIndicatorClick(), ref: (collapsedEl) => (this.collapsedRef = collapsedEl), class: {
+            }) }, h(TagType, Object.assign({ key: '6f232cfc590b2e2a23a2e1ee40d6658e7d8b4953' }, attrs, { class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("slot", { key: 'fec56c6f92c147fbd6273d3efb82b1a6c944699c', name: "start" }), h("slot", { key: '80aa33cdcaab810f544803c6105b489172542846' }), h("slot", { key: '6e1d3f332ae35f5061204bece9756a9bac4aaf4a', name: "end" })), showCollapsedIndicator && (h("button", { part: "collapsed-indicator", "aria-label": "Show more breadcrumbs", onClick: () => this.collapsedIndicatorClick(), ref: (collapsedEl) => (this.collapsedRef = collapsedEl), class: {
                 'breadcrumbs-collapsed-indicator': true,
             } }, h("ion-icon", { "aria-hidden": "true", icon: ellipsisHorizontal, lazy: false }))), showSeparator && (
         /**

package/dist/collection/components/breadcrumbs/breadcrumbs.js

@@ -105,12 +105,12 @@ export class Breadcrumbs {
     render() {
         const { color, collapsed } = this;
         const mode = getIonMode(this);
-        return (h(Host, { class: createColorClasses(color, {
+        return (h(Host, { key: '35f8a2bffdd85ba6dc31834ebef69602a5a7cca1', class: createColorClasses(color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'breadcrumbs-collapsed': collapsed,
-            }) }, h("slot", { onSlotchange: this.slotChanged })));
+            }) }, h("slot", { key: 'ada062b5d17380d311861d1cf1a22dd62bac5497', onSlotchange: this.slotChanged })));
     }
     static get is() { return "ion-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/button/button.js

@@ -199,7 +199,7 @@ export class Button {
         {
             type !== 'button' && this.renderHiddenButton();
         }
-        return (h(Host, { onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '8533314504b286ec10e26722f93376d86a7ca1c9', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 [buttonType]: true,
                 [`${buttonType}-${expand}`]: expand !== undefined,
@@ -214,7 +214,7 @@ export class Button {
                 'button-disabled': disabled,
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h(TagType, Object.assign({}, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { class: "button-inner" }, h("slot", { name: "icon-only" }), h("slot", { name: "start" }), h("slot", null), h("slot", { name: "end" })), mode === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
+            }) }, h(TagType, Object.assign({ key: '79bf020fdac0c2ceb2b05547b3e5a9a11e60abb4' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("span", { key: '109481ba86102647023b746b054b2718d3c9d92a', class: "button-inner" }, h("slot", { key: 'f824ddd9f988b9bd33136555b16aa790d9291b49', name: "icon-only" }), h("slot", { key: 'd614f4e430792c5f93be4b3a8c57a826d74b9cfd', name: "start" }), h("slot", { key: '95d00c8a980c31cc7f84732f51a17a0cd285a7cb' }), h("slot", { key: 'a228ff52cbe04dc9d2e22bb66611ecc96d130e6f', name: "end" })), mode === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
     }
     static get is() { return "ion-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/button/test/basic/button.e2e.js

@@ -44,7 +44,7 @@ configs({ modes: ['md'] }).forEach(({ config, screenshot, title }) => {
                 await page.mouse.move(boundingBox.x + boundingBox.width / 2, boundingBox.y + boundingBox.height / 2);
                 await page.mouse.down();
             }
-            await page.waitForSelector('#default.ion-activated');
+            await page.locator('#default.ion-activated').waitFor();
             await expect(button).toHaveScreenshot(screenshot(`button-ripple-effect`));
         });
     });

package/dist/collection/components/buttons/buttons.js

@@ -9,7 +9,7 @@ export class Buttons {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { class: {
+        return (h(Host, { key: '52c0c5535f5688a481746fe8fd92b6c02941526f', class: {
                 [mode]: true,
                 ['buttons-collapse']: this.collapse,
             } }));

package/dist/collection/components/card/card.js

@@ -49,7 +49,7 @@ export class Card {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { class: createColorClasses(this.color, {
+        return (h(Host, { key: '9e35c114ce466623024b94dd6797118ad027417d', class: createColorClasses(this.color, {
                 [mode]: true,
                 'card-disabled': this.disabled,
                 'ion-activatable': this.isClickable(),

package/dist/collection/components/card-content/card-content.js

@@ -9,7 +9,7 @@ import { getIonMode } from "../../global/ionic-global";
 export class CardContent {
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { class: {
+        return (h(Host, { key: 'd4da147bb0b0b14684b54d37d04ba5a8f7a7d71d', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`card-content-${mode}`]: true,

package/dist/collection/components/card-header/card-header.js

@@ -14,11 +14,11 @@ export class CardHeader {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { class: createColorClasses(this.color, {
+        return (h(Host, { key: '070294064c4b17c941961c9cccf1ae6592b385b6', class: createColorClasses(this.color, {
                 'card-header-translucent': this.translucent,
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, h("slot", null)));
+            }) }, h("slot", { key: 'adac918d5e93bf69b07c5bda329ebf8c719bd623' })));
     }
     static get is() { return "ion-card-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card-subtitle/card-subtitle.js

@@ -13,10 +13,10 @@ export class CardSubtitle {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
+        return (h(Host, { key: 'ae115cf349cd13f88d20b1fbab6b8a813a87b925', role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, h("slot", null)));
+            }) }, h("slot", { key: 'f5dd779b34b5c5c541cbbe56cc8a877e50513252' })));
     }
     static get is() { return "ion-card-subtitle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card-title/card-title.js

@@ -13,10 +13,10 @@ export class CardTitle {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { role: "heading", "aria-level": "2", class: createColorClasses(this.color, {
+        return (h(Host, { key: '432d7bf971fda63c30c748986143ec2a8be9e4af', role: "heading", "aria-level": "2", class: createColorClasses(this.color, {
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, h("slot", null)));
+            }) }, h("slot", { key: '3c5dcf6ac1bf981c6c0488f0027765269c80db5a' })));
     }
     static get is() { return "ion-card-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/chip/chip.js

@@ -15,12 +15,12 @@ export class Chip {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'eca7cc616c0c9dd2ab28efd41e203fa094880e9e', "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [mode]: true,
                 'chip-outline': this.outline,
                 'chip-disabled': this.disabled,
                 'ion-activatable': true,
-            }) }, h("slot", null), mode === 'md' && h("ion-ripple-effect", null)));
+            }) }, h("slot", { key: 'b64c9067132791f73a8434c37d5a335fb2d96f74' }), mode === 'md' && h("ion-ripple-effect", null)));
     }
     static get is() { return "ion-chip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/col/col.js

@@ -111,9 +111,9 @@ export class Col {
     render() {
         const isRTL = document.dir === 'rtl';
         const mode = getIonMode(this);
-        return (h(Host, { class: {
+        return (h(Host, { key: 'c186972dd12d10a4600975c326f20666fed96abf', class: {
                 [mode]: true,
-            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", null)));
+            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '54cc8bd92f94cfd30d9f3e8e59e0f0dc38abfd63' })));
     }
     static get is() { return "ion-col"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/content/content.js

@@ -336,7 +336,7 @@ export class Content {
         const transitionShadow = mode === 'ios';
         const TagType = isMainContent ? 'main' : 'div';
         this.resize();
-        return (h(Host, { class: createColorClasses(this.color, {
+        return (h(Host, { key: '65d85e1f7f85876a76eec79addc4bd9f697a5d84', class: createColorClasses(this.color, {
                 [mode]: true,
                 'content-sizing': hostContext('ion-popover', this.el),
                 overscroll: forceOverscroll,
@@ -344,12 +344,12 @@ export class Content {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, h("div", { ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), h(TagType, { class: {
+            } }, h("div", { key: 'e2ac474a62cbc864772c497469100436f41289ff', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), h(TagType, { key: '567a4bc2bcb13adfd987b088f95ac4b20b789f2c', class: {
                 'inner-scroll': true,
                 'scroll-x': scrollX,
                 'scroll-y': scrollY,
                 overscroll: (scrollX || scrollY) && forceOverscroll,
-            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", null)), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, h("slot", { name: "fixed" })));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '13909f87dd9f49bf1664ad95038499da376b9480' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, h("slot", { key: '05b56c139e203cfd1e3dd08054e99328e97e9243', name: "fixed" })));
     }
     static get is() { return "ion-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -526,22 +526,41 @@ export class Datetime {
             const didChangeMonth = (month !== undefined && month !== workingParts.month) || (year !== undefined && year !== workingParts.year);
             const bodyIsVisible = el.classList.contains('datetime-ready');
             const { isGridStyle, showMonthAndYear } = this;
-            if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
-                this.animateToDate(targetValue);
+            let areAllSelectedDatesInSameMonth = true;
+            if (Array.isArray(valueToProcess)) {
+                const firstMonth = valueToProcess[0].month;
+                for (const date of valueToProcess) {
+                    if (date.month !== firstMonth) {
+                        areAllSelectedDatesInSameMonth = false;
+                        break;
+                    }
+                }
             }
-            else {
-                /**
-                 * We only need to do this if we didn't just animate to a new month,
-                 * since that calls prevMonth/nextMonth which calls setWorkingParts for us.
-                 */
-                this.setWorkingParts({
-                    month,
-                    day,
-                    year,
-                    hour,
-                    minute,
-                    ampm,
-                });
+            /**
+             * If there is more than one date selected
+             * and the dates aren't all in the same month,
+             * then we should neither animate to the date
+             * nor update the working parts because we do
+             * not know which date the user wants to view.
+             */
+            if (areAllSelectedDatesInSameMonth) {
+                if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
+                    this.animateToDate(targetValue);
+                }
+                else {
+                    /**
+                     * We only need to do this if we didn't just animate to a new month,
+                     * since that calls prevMonth/nextMonth which calls setWorkingParts for us.
+                     */
+                    this.setWorkingParts({
+                        month,
+                        day,
+                        year,
+                        hour,
+                        minute,
+                        ampm,
+                    });
+                }
             }
         };
         this.animateToDate = async (targetValue) => {
@@ -1574,7 +1593,7 @@ export class Datetime {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (h(Host, { "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: 'b00545b7bbba3ccf35d53c1eec4f1614fb830c11', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,

package/dist/collection/components/datetime/test/a11y/datetime.e2e.js

@@ -21,7 +21,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         </div>
       `, config);
             const container = page.locator('#container');
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(container).toHaveScreenshot(screenshot(`datetime-scale`));
         });
     });
@@ -64,7 +64,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
         <ion-datetime value="2022-02-22T16:30:00" show-default-buttons="true" show-clear-button="true"></ion-datetime>
     `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const clearButton = page.locator('#clear-button button');
             const selectedDay = page.locator('.calendar-day-active');
             await expect(selectedDay).toHaveText('22');
@@ -80,7 +80,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
         <ion-datetime value="2022-02-28"></ion-datetime>
     `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
             const calendarBody = page.locator('.calendar-body');
             await expect(calendarMonthYear).toHaveText('February 2022');

package/dist/collection/components/datetime/test/basic/datetime.e2e.js

@@ -82,7 +82,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
           }
         </script>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const datetime = page.locator('ion-datetime');
             const ionChange = await page.spyOnEvent('ionChange');
             // Oct 1, 2022
@@ -188,7 +188,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             await page.setContent(`
         <ion-datetime value="2022-05-03"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const calendarBody = page.locator('ion-datetime .calendar-body');
             const calendarHeader = page.locator('ion-datetime .calendar-month-year');
             await expect(calendarHeader).toHaveText(/May 2022/);
@@ -200,7 +200,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             await page.setContent(`
         <ion-datetime value="2022-05-03"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const calendarBody = page.locator('ion-datetime .calendar-body');
             const calendarHeader = page.locator('ion-datetime .calendar-month-year');
             await expect(calendarHeader).toHaveText(/May 2022/);
@@ -213,7 +213,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             await page.setContent(`
         <ion-datetime value="2022-05-03"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const calendarBody = page.locator('ion-datetime .calendar-body');
             const calendarHeader = page.locator('ion-datetime .calendar-month-year');
             await expect(calendarHeader).toHaveText(/May 2022/);
@@ -237,7 +237,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await page.setContent(`
         <ion-datetime></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const monthYearButton = page.locator('ion-datetime .calendar-month-year');
             const monthYearInterface = page.locator('ion-datetime .datetime-year');
             const datetime = page.locator('ion-datetime');
@@ -249,7 +249,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await expect(datetime).not.toHaveClass(/datetime-ready/);
             await datetime.evaluate((el) => el.style.removeProperty('display'));
             await expect(datetime).toBeVisible();
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             // month/year interface should be reset
             await expect(monthYearInterface).toBeHidden();
         });
@@ -287,7 +287,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await page.setContent(`
         <ion-datetime value="2022-11-10" show-clear-button="true"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const selectedDay = page.locator('ion-datetime .calendar-day-active');
             await expect(selectedDay).toHaveText('10');
             await page.click('ion-datetime #clear-button');
@@ -306,7 +306,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             await page.setContent(`
         <ion-datetime presentation="date" value="2022-01-02"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const ionChange = await page.spyOnEvent('ionChange');
             const calendarButtons = page.locator('.calendar-day:not([disabled])');
             await calendarButtons.nth(0).click();
@@ -317,7 +317,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             await page.setContent(`
         <ion-datetime presentation="date" value="2022-01-02"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const ionChange = await page.spyOnEvent('ionChange');
             const datetime = page.locator('ion-datetime');
             await datetime.evaluate((el) => (el.value = '2022-01-01'));
@@ -349,7 +349,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         </script>
       `, config);
             const datetime = page.locator('ion-datetime');
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(datetime.locator('.calendar-day-today')).toHaveScreenshot(screenshot(`datetime-today-calendar-button`));
         });
     });
@@ -369,7 +369,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         <ion-datetime value="2021-01-01"></ion-datetime>
       `, config);
             const datetime = page.locator('ion-datetime');
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(datetime).toHaveScreenshot(screenshot(`date-highlight-start-of-month`));
             await datetime.evaluate((el) => (el.value = '2021-01-31'));
             await page.waitForChanges();
@@ -387,7 +387,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             await page.setContent(`
         <ion-datetime value="2023-08-01"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const datetime = page.locator('ion-datetime');
             const day = datetime.locator(`.calendar-day[data-day='1'][data-month='8']`);
             await day.focus();

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

@@ -9,7 +9,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             await page.setContent(`
         <ion-datetime locale="en-US" presentation="date" value="2022-01-31"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
         });
         test('should switch the calendar header when moving to a month with a different number of days', async ({ page, }) => {
             const monthYearToggle = page.locator('ion-datetime .calendar-month-year');

package/dist/collection/components/datetime/test/disable-dates/datetime.e2e.js

@@ -99,7 +99,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
         test.describe('check example usages', () => {
             test.beforeEach(async ({ page }) => {
                 await page.goto('/src/components/datetime/test/disable-dates', config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').first().waitFor();
             });
             test('should disable a specific date', async ({ page }) => {
                 const disabledDay = queryAllDisabledDays(page, '#specificDate');

package/dist/collection/components/datetime/test/disabled/datetime.e2e.js

@@ -20,7 +20,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
             await page.setContent(`
         <ion-datetime value="2022-02-28" disabled></ion-datetime>
     `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const febFirstButton = page.locator(`.calendar-day[data-day='1'][data-month='2']`);
             await expect(febFirstButton).toBeDisabled();
         });
@@ -28,7 +28,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
             await page.setContent(`
         <ion-datetime value="2022-02-28" disabled></ion-datetime>
     `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
             await expect(calendarMonthYear.locator('button')).toBeDisabled();
         });
@@ -46,7 +46,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
 
         <ion-datetime value="2022-02-22T16:30:00" show-default-buttons="true" show-clear-button="true" disabled></ion-datetime>
     `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const clearButton = page.locator('#clear-button button');
             await expect(clearButton).toBeDisabled();
         });
@@ -54,7 +54,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
             await page.setContent(`
         <ion-datetime value="2022-02-28" disabled></ion-datetime>
     `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
             const calendarBody = page.locator('.calendar-body');
             await expect(calendarMonthYear).toHaveText('February 2022');