voyager-ionic-core 7.6.3 → 7.7.0

package/dist/collection/components/datetime/test/prefer-wheel/datetime.e2e.js

@@ -21,28 +21,28 @@ configs().forEach(({ title, screenshot, config }) => {
             await page.setContent(`
         <ion-datetime size="cover" presentation="date" prefer-wheel="true" value="2019-05-30" max="2022"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page).toHaveScreenshot(screenshot(`datetime-wheel-date-diff`));
         });
         test('should not have visual regressions for date-time wheel', async ({ page }) => {
             await page.setContent(`
         <ion-datetime size="cover" presentation="date-time" prefer-wheel="true" value="2019-05-30T16:30:00" max="2022"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page).toHaveScreenshot(screenshot(`datetime-wheel-date-time-diff`));
         });
         test('should not have visual regressions for time-date wheel', async ({ page }) => {
             await page.setContent(`
         <ion-datetime size="cover" presentation="time-date" prefer-wheel="true" value="2019-05-30T16:30:00" max="2022"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page).toHaveScreenshot(screenshot(`datetime-wheel-time-date-diff`));
         });
         test('should render a condense header when specified', async ({ page }) => {
             await page.setContent(`
         <ion-datetime size="cover" presentation="time-date" prefer-wheel="true" value="2019-05-30T16:30:00" max="2022"><div slot="title">My Custom Title</div></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const datetime = page.locator('ion-datetime');
             await expect(datetime).toHaveScreenshot(screenshot(`datetime-wheel-header-diff`));
         });
@@ -59,7 +59,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
                 await page.setContent(`
           <ion-datetime presentation="date" prefer-wheel="true" min="2019-05-05" max="2023-10-01" value="2019-05-30"></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const dayValues = page.locator('ion-datetime .day-column .picker-item[data-value]');
                 expect(await dayValues.count()).toEqual(27);
             });
@@ -67,7 +67,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
                 await page.setContent(`
           <ion-datetime presentation="date" prefer-wheel="true" min="2019-05-05" max="2023-10-01" value="2023-10-01"></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const dayValues = page.locator('ion-datetime .day-column .picker-item[data-value]');
                 expect(await dayValues.count()).toEqual(1);
             });
@@ -85,7 +85,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             }
           </script>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const disabledMonths = page.locator('.month-column .picker-item[disabled]');
                 const disabledYears = page.locator('.year-column .picker-item[disabled]');
                 const disabledDays = page.locator('.day-column .picker-item[disabled]');
@@ -104,7 +104,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             year-values="2022,2020,2019"
           ></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const monthValues = page.locator('.month-column .picker-item:not(.picker-item-empty)');
                 const yearValues = page.locator('.year-column .picker-item:not(.picker-item-empty)');
                 const dayValues = page.locator('.day-column .picker-item:not(.picker-item-empty)');
@@ -132,7 +132,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             }
           </script>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const ionChange = await page.spyOnEvent('ionChange');
                 const monthValues = page.locator('.month-column .picker-item:not(.picker-item-empty)');
                 // Change month value
@@ -159,7 +159,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             }
           </script>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const ionChange = await page.spyOnEvent('ionChange');
                 const dayValues = page.locator('.day-column .picker-item:not(.picker-item-empty)');
                 // Change day value
@@ -173,7 +173,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             prefer-wheel="true"
           ></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const ionChange = await page.spyOnEvent('ionChange');
                 const yearValues = page.locator('.year-column .picker-item:not(.picker-item-empty)');
                 /**
@@ -188,7 +188,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
                 await page.setContent(`
             <ion-datetime presentation="date" prefer-wheel="true" min="2019-05-05" max="2023-10-01" value="2019-05-30"></ion-datetime>
           `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const datetime = page.locator('ion-datetime');
                 await datetime.evaluate((el) => (el.value = '2021-05-25T12:40:00.000Z'));
                 await page.waitForChanges();
@@ -212,7 +212,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
               value="2022-01-01"
             ></ion-datetime>
           `, config);
-                    await page.waitForSelector('.datetime-ready');
+                    await page.locator('.datetime-ready').waitFor();
                     const monthValues = page.locator('.month-column .picker-item:not(.picker-item-empty)');
                     const dayValues = page.locator('.day-column .picker-item:not(.picker-item-empty)');
                     await expect(monthValues).toHaveText(['1月', '2月', '3月']);
@@ -227,7 +227,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
               value="2022-01-01"
             ></ion-datetime>
           `, config);
-                    await page.waitForSelector('.datetime-ready');
+                    await page.locator('.datetime-ready').waitFor();
                     const columns = page.locator('ion-picker-column-internal');
                     await expect(columns.nth(0)).toHaveClass(/month-column/);
                     await expect(columns.nth(1)).toHaveClass(/day-column/);
@@ -242,7 +242,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
               value="2022-01-01"
             ></ion-datetime>
           `, config);
-                    await page.waitForSelector('.datetime-ready');
+                    await page.locator('.datetime-ready').waitFor();
                     const columns = page.locator('ion-picker-column-internal');
                     await expect(columns.nth(0)).toHaveClass(/day-column/);
                     await expect(columns.nth(1)).toHaveClass(/month-column/);
@@ -255,7 +255,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
                 await page.setContent(`
           <ion-datetime presentation="date-time" prefer-wheel="true" min="2019-05-05" value="2019-05-10T16:30:00"></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
                 expect(await dayValues.count()).toEqual(57);
             });
@@ -263,7 +263,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
                 await page.setContent(`
           <ion-datetime presentation="date-time" prefer-wheel="true" max="2023-06-10" value="2023-06-05T16:30:00"></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
                 expect(await dayValues.count()).toEqual(41);
             });
@@ -281,7 +281,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             }
           </script>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const disabledDates = page.locator('.date-column .picker-item[disabled]');
                 expect(await disabledDates.count()).toBe(44);
             });
@@ -296,7 +296,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             year-values="2022,2020,2019"
           ></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
                 expect(await dateValues.count()).toBe(5);
             });
@@ -311,7 +311,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             value="2022-02-01"
           ></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
                 await expect(dateValues).toHaveText(['2月1日(火)', '2月2日(水)', '2月3日(木)']);
             });
@@ -325,7 +325,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             max="2023-01-01"
           ></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const dateColumn = page.locator('.date-column');
                 const dateValues = dateColumn.locator('.picker-item:not(.picker-item-empty)');
                 expect(await dateValues.count()).toBe(90);
@@ -347,7 +347,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             min="2010-01-01"
           ></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
                 expect(await dayValues.count()).toBe(92);
             });
@@ -361,7 +361,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             min="2022-05-01"
           ></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
                 expect(await dayValues.count()).toBe(15);
             });
@@ -372,7 +372,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             prefer-wheel="true"
           ></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const ionChange = await page.spyOnEvent('ionChange');
                 const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
                 // Change day/month value
@@ -385,7 +385,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
                 await page.setContent(`
           <ion-datetime presentation="time-date" prefer-wheel="true" min="2019-05-05" value="2019-05-10T16:30:00"></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
                 expect(await dayValues.count()).toEqual(57);
             });
@@ -393,7 +393,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
                 await page.setContent(`
           <ion-datetime presentation="time-date" prefer-wheel="true" max="2023-06-10" value="2023-06-05T16:30:00"></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
                 expect(await dayValues.count()).toEqual(41);
             });
@@ -411,7 +411,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             }
           </script>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const disabledDates = page.locator('.date-column .picker-item[disabled]');
                 expect(await disabledDates.count()).toBe(44);
             });
@@ -426,7 +426,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             year-values="2022,2020,2019"
           ></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
                 expect(await dateValues.count()).toBe(5);
             });
@@ -441,7 +441,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             value="2022-02-01"
           ></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
                 await expect(dateValues).toHaveText(['2月1日(火)', '2月2日(水)', '2月3日(木)']);
             });
@@ -455,7 +455,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             max="2023-01-01"
           ></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const dateColumn = page.locator('.date-column');
                 const dateValues = dateColumn.locator('.picker-item:not(.picker-item-empty)');
                 expect(await dateValues.count()).toBe(90);
@@ -477,7 +477,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           min="2010-01-01"
         ></ion-datetime>
       `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
                 expect(await dayValues.count()).toBe(92);
             });
@@ -491,7 +491,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           min="2022-05-01"
         ></ion-datetime>
       `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
                 expect(await dayValues.count()).toBe(15);
             });

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

@@ -85,7 +85,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await page.setContent(`
         <ion-datetime presentation="date"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const datetime = page.locator('ion-datetime');
             const monthYearButton = page.locator('ion-datetime .calendar-month-year');
             await monthYearButton.click();
@@ -136,7 +136,7 @@ class DatetimePresentationFixture {
         await this.page.setContent(`
       <ion-datetime presentation="${presentation}" value="2010-03-10T13:00:00"></ion-datetime>
     `, config);
-        await this.page.waitForSelector('.datetime-ready');
+        await this.page.locator('.datetime-ready').waitFor();
         this.datetime = this.page.locator('ion-datetime');
     }
     async screenshot(name, screenshotFn) {
@@ -151,7 +151,7 @@ class TimePickerFixture {
         await this.page.setContent(`
       <ion-datetime presentation="time" value="${value}"></ion-datetime>
     `, config);
-        await this.page.waitForSelector('.datetime-ready');
+        await this.page.locator('.datetime-ready').waitFor();
         this.timePicker = this.page.locator('ion-datetime');
     }
     async setValue(value) {

package/dist/collection/components/datetime/test/readonly/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" readonly></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();
         });
@@ -29,7 +29,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
         <ion-datetime value="2022-02-22T16:30:00" readonly></ion-datetime>
     `, config);
             const ionChange = await page.spyOnEvent('ionChange');
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
             await expect(calendarMonthYear).toHaveText('February 2022');
             await calendarMonthYear.click();
@@ -44,7 +44,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
         <ion-datetime value="2022-02-22T16:30:00" readonly></ion-datetime>
     `, config);
             const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
             const monthYearButton = page.locator('.calendar-month-year ion-item');
             await expect(calendarMonthYear).toHaveText('February 2022');
@@ -105,7 +105,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" readonly></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();
         });

package/dist/collection/components/datetime/test/set-value/datetime.e2e.js

@@ -7,7 +7,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     test.describe(title('datetime: set-value'), () => {
         test('should update the active date when value is initially set', async ({ page }) => {
             await page.goto('/src/components/datetime/test/set-value', config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const datetime = page.locator('ion-datetime');
             await datetime.evaluate((el) => (el.value = '2021-11-25T12:40:00.000Z'));
             await page.waitForChanges();
@@ -16,7 +16,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         });
         test('should update the active time when value is initially set', async ({ page }) => {
             await page.goto('/src/components/datetime/test/set-value', config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const datetime = page.locator('ion-datetime');
             await datetime.evaluate((el) => (el.value = '2021-11-25T12:40:00.000Z'));
             await page.waitForChanges();
@@ -27,7 +27,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await page.setContent(`
         <ion-datetime presentation="date" locale="en-US"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const datetime = page.locator('ion-datetime');
             const activeDayButton = page.locator('.calendar-day-active');
             await datetime.evaluate((el) => (el.value = '2021-10-05'));
@@ -39,7 +39,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         });
         test('should scroll to new month when value is initially set and then updated', async ({ page }) => {
             await page.goto('/src/components/datetime/test/set-value', config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const datetime = page.locator('ion-datetime');
             await datetime.evaluate((el) => (el.value = '2021-05-25T12:40:00.000Z'));
             await page.waitForChanges();

package/dist/collection/components/datetime/test/time-label/datetime.e2e.js

@@ -9,7 +9,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 timeLabel = page.locator('ion-datetime .time-header');
             await expect(timeLabel).toHaveText('Time');
         });
@@ -17,7 +17,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await page.setContent(`
         <ion-datetime show-default-time-label="false"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const timeLabel = page.locator('ion-datetime .time-header');
             await expect(timeLabel).toHaveText('');
         });

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

@@ -9,7 +9,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await page.setContent(`
         <ion-datetime locale="en-US" presentation="date" day-values="1,2,3"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const items = page.locator('.calendar-day:not([disabled])');
             /**
              * Datetime calendar grid renders 3 months by default,
@@ -68,7 +68,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
           }
         </script>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const minuteItems = page.locator('ion-picker-column-internal:nth-of-type(2) .picker-item:not(.picker-item-empty)');
             await expect(minuteItems).toHaveText(['00', '15', '30', '45']);
             await expect(minuteItems.nth(1)).toHaveClass(/picker-item-active/);
@@ -105,7 +105,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
           }
         </script>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const monthItems = page.locator('.month-column .picker-item:not(.picker-item-empty)');
             await expect(monthItems).toHaveText(['January']);
             await expect(monthItems.nth(0)).toHaveClass(/picker-item-active/);
@@ -132,7 +132,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
           }
         </script>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const todayButton = page.locator('.calendar-day[data-day="10"][data-month="10"][data-year="2022"]');
             await expect(todayButton).toHaveClass(/calendar-day-today/);
         });

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

@@ -336,7 +336,7 @@ export class DatetimeButton {
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
         const mode = getIonMode(this);
-        return (h(Host, { class: createColorClasses(color, {
+        return (h(Host, { key: '36fe34d4225940611d74bdef5b954d54749d2dca', class: createColorClasses(color, {
                 [mode]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,

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

@@ -14,7 +14,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button datetime="datetime"></ion-datetime-button>
         <ion-datetime id="datetime" presentation="date-time"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
         });
         test('should switch to a date-only view when the date button is clicked', async ({ page }) => {
             const datetime = page.locator('ion-datetime');
@@ -37,7 +37,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
         <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="date-time"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page.locator('#date-button')).toContainText('Jan 1, 2022');
             await expect(page.locator('#time-button')).toContainText('6:30 AM');
         });
@@ -46,7 +46,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
         <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="month-year"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page.locator('#date-button')).toContainText('January 2022');
             await expect(page.locator('#time-button')).toBeHidden();
         });
@@ -55,7 +55,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
         <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="year"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page.locator('#date-button')).toContainText('2022');
             await expect(page.locator('#time-button')).toBeHidden();
         });
@@ -64,7 +64,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
         <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="month"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page.locator('#date-button')).toContainText('January');
             await expect(page.locator('#time-button')).toBeHidden();
         });
@@ -73,7 +73,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
         <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="time"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page.locator('#time-button')).toContainText('6:30 AM');
             await expect(page.locator('#date-button')).toBeHidden();
         });
@@ -82,7 +82,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
         <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="date"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const datetime = page.locator('ion-datetime');
             const dateTarget = page.locator('#date-button');
             await expect(dateTarget).toContainText('Jan 1, 2022');
@@ -99,7 +99,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
         <ion-datetime id="datetime" value="2022-01" presentation="month-year"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page.locator('#date-button')).toContainText('January 2022');
             await expect(page.locator('#time-button')).toBeHidden();
         });
@@ -112,7 +112,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
         <ion-datetime id="datetime" value="2022" presentation="year"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page.locator('#date-button')).toContainText('2022');
             await expect(page.locator('#time-button')).toBeHidden();
         });
@@ -123,7 +123,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button datetime="datetime"></ion-datetime-button>
         <ion-datetime locale="es-ES" id="datetime" value="2022-01-01T06:30:00" presentation="date-time"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             /**
              * The entire text reads 1 ene 2022, but some browsers will add
              * a period after "ene". Just checking ene allows us to verify the
@@ -137,7 +137,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button datetime="datetime"></ion-datetime-button>
         <ion-datetime hour-cycle="h23" locale="en-US" id="datetime" value="2022-01-01T16:30:00" presentation="date-time"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page.locator('#time-button')).toContainText('16:30');
         });
         test('should ignore the timezone when selecting a date', async ({ page }) => {
@@ -145,7 +145,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button datetime="datetime"></ion-datetime-button>
         <ion-datetime locale="en-US" id="datetime" value="2022-01-02T06:30:00" presentation="date-time"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const timeTarget = page.locator('#time-button');
             await expect(timeTarget).toContainText('6:30');
             const firstOfMonth = page.locator('ion-datetime .calendar-day[data-month="1"][data-day="1"]');
@@ -160,7 +160,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button datetime="datetime"></ion-datetime-button>
         <ion-datetime locale="en-US" id="datetime" value="2022-01-01T06:30:00" presentation="date-time" prefer-wheel="true"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page.locator('#date-button')).toContainText('Jan 1, 2022 6:30 AM');
             await expect(page.locator('#time-button')).not.toBeVisible();
         });
@@ -169,7 +169,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         <ion-datetime-button datetime="datetime"></ion-datetime-button>
         <ion-datetime locale="en-US" id="datetime" value="2022-01-01T06:30:00" presentation="time-date" prefer-wheel="true"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page.locator('#date-button')).toContainText('Jan 1, 2022 6:30 AM');
             await expect(page.locator('#time-button')).not.toBeVisible();
         });

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

@@ -10,7 +10,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         <ion-datetime-button datetime="datetime" disabled="true"></ion-datetime-button>
         <ion-datetime id="datetime" presentation="date-time"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page.locator('#date-button')).toBeDisabled();
             await expect(page.locator('#time-button')).toBeDisabled();
         });
@@ -19,7 +19,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         <ion-datetime-button datetime="datetime" disabled="true"></ion-datetime-button>
         <ion-datetime id="datetime" presentation="date-time" value="2022-01-01T16:30:00"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const datetimeButton = page.locator('ion-datetime-button');
             await expect(datetimeButton).toHaveScreenshot(screenshot(`datetime-button-disabled`));
         });