@ionic/core 7.6.7-dev.11706625796.1b3c1ab2 → 7.6.7-dev.11706894781.1cd59fde

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.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             await expect(container).toHaveScreenshot(screenshot(`datetime-scale`));
         });
     });
@@ -38,7 +38,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     `, config);
             const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
             const datetime = page.locator('ion-datetime');
-            const monthYearButton = page.locator('.calendar-month-year ion-item');
+            const monthYearButton = page.locator('.calendar-month-year-toggle');
             const prevButton = page.locator('.calendar-next-prev ion-button:nth-child(1)');
             const nextButton = page.locator('.calendar-next-prev ion-button:nth-child(2)');
             await page.keyboard.press(tabKey);
@@ -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.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             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.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             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/a11y/datetime.spec.js

@@ -2,7 +2,6 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { newSpecPage } from "@stencil/core/testing";
-import { Item } from "../../../item/item";
 import { Datetime } from "../../datetime";
 describe('datetime', () => {
     beforeEach(() => {
@@ -18,25 +17,23 @@ describe('datetime', () => {
         let page;
         beforeEach(async () => {
             page = await newSpecPage({
-                components: [Datetime, Item],
+                components: [Datetime],
                 html: `<ion-datetime></ion-datetime>`,
             });
         });
         it('should have aria-label "Show year picker" when collapsed', async () => {
             const datetime = page.body.querySelector('ion-datetime');
-            const item = datetime.shadowRoot.querySelector('.calendar-month-year ion-item');
-            const monthYearToggleBtn = item.shadowRoot.querySelector('button');
+            const monthYearToggleBtn = datetime.shadowRoot.querySelector('.calendar-month-year .calendar-month-year-toggle');
             const ariaLabel = monthYearToggleBtn.getAttribute('aria-label');
             expect(ariaLabel).toContain('Show year picker');
         });
         it('should have aria-label "Hide year picker" when expanded', async () => {
             const datetime = page.body.querySelector('ion-datetime');
-            const item = datetime.shadowRoot.querySelector('.calendar-month-year ion-item');
-            item.click();
+            const monthYearToggleBtn = datetime.shadowRoot.querySelector('.calendar-month-year .calendar-month-year-toggle');
+            monthYearToggleBtn.click();
             await page.waitForChanges();
-            const itemAfter = datetime.shadowRoot.querySelector('.calendar-month-year ion-item');
-            const monthYearToggleBtn = itemAfter.shadowRoot.querySelector('button');
-            const ariaLabel = monthYearToggleBtn.getAttribute('aria-label');
+            const monthYearToggleBtnAfter = datetime.shadowRoot.querySelector('.calendar-month-year .calendar-month-year-toggle');
+            const ariaLabel = monthYearToggleBtnAfter.getAttribute('aria-label');
             expect(ariaLabel).toContain('Hide year picker');
         });
     });

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.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             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.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             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.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             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.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             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.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             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.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             // 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.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             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.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             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.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             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.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             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.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             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.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             const datetime = page.locator('ion-datetime');
             const day = datetime.locator(`.calendar-day[data-day='1'][data-month='8']`);
             await day.focus();
@@ -401,4 +401,14 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
             await expect(datetime).toHaveScreenshot(screenshot(`datetime-focus-calendar-day`));
         });
     });
+    test.describe(title('datetime: calendar month toggle'), () => {
+        test('should have focus styles', async ({ page }) => {
+            await page.setContent('<ion-datetime value="2021-01-01"></ion-datetime>', config);
+            const datetime = page.locator('ion-datetime');
+            await page.waitForSelector('.datetime-ready');
+            const monthYearToggle = datetime.locator('.calendar-month-year-toggle');
+            monthYearToggle.evaluate((el) => el.classList.add('ion-focused'));
+            await expect(datetime).toHaveScreenshot(screenshot(`date-month-toggle-focused`));
+        });
+    });
 });

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

@@ -9,11 +9,11 @@ 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.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
         });
         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');
-            const monthColumnItems = page.locator('ion-datetime .month-column .picker-item:not(.picker-item-empty)');
+            const monthColumnItems = page.locator('ion-datetime .month-column ion-picker-column-option');
             await expect(monthYearToggle).toContainText('January 2022');
             await monthYearToggle.click();
             await page.waitForChanges();
@@ -24,7 +24,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         });
         test('should adjust the selected day when moving to a month with a different number of days', async ({ page }) => {
             const monthYearToggle = page.locator('ion-datetime .calendar-month-year');
-            const monthColumnItems = page.locator('ion-datetime .month-column .picker-item:not(.picker-item-empty)');
+            const monthColumnItems = page.locator('ion-datetime .month-column ion-picker-column-option');
             const datetime = page.locator('ion-datetime');
             const ionChange = await page.spyOnEvent('ionChange');
             await monthYearToggle.click();

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.locator('.datetime-ready').first().waitFor();
+                await page.waitForSelector('.datetime-ready');
             });
             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.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             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.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             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.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             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.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             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/disabled/datetime.spec.js

@@ -4,8 +4,8 @@
 import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { Datetime } from "../../../datetime/datetime";
-import { PickerColumnInternal } from "../../../picker-column-internal/picker-column-internal";
-import { PickerInternal } from "../../../picker-internal/picker-internal";
+import { PickerColumn } from "../../../picker-column/picker-column";
+import { Picker } from "../../../picker/picker";
 describe('ion-datetime disabled', () => {
     beforeEach(() => {
         // IntersectionObserver isn't available in test environment
@@ -19,12 +19,12 @@ describe('ion-datetime disabled', () => {
     });
     it('picker should be disabled in prefer wheel mode', async () => {
         const page = await newSpecPage({
-            components: [Datetime, PickerColumnInternal, PickerInternal],
+            components: [Datetime, PickerColumn, Picker],
             template: () => (h("ion-datetime", { id: "inline-datetime-wheel", disabled: true, "prefer-wheel": true, value: "2022-04-21T00:00:00" })),
         });
         await page.waitForChanges();
         const datetime = page.body.querySelector('ion-datetime');
-        const columns = datetime.shadowRoot.querySelectorAll('ion-picker-column-internal');
+        const columns = datetime.shadowRoot.querySelectorAll('ion-picker-column');
         await expect(columns.length).toEqual(4);
         columns.forEach((column) => {
             expect(column.disabled).toBe(true);

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

@@ -14,7 +14,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
                 await page.setContent(`
           <ion-datetime value="2022-02-22T16:30:00" presentation="date-time"></ion-datetime>
         `, config);
-                await page.locator('.datetime-ready').waitFor();
+                await page.waitForSelector('.datetime-ready');
                 const datetime = page.locator('ion-datetime');
                 await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-date-time`));
             });
@@ -22,7 +22,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
                 await page.setContent(`
           <ion-datetime value="2022-02-22T16:30:00" presentation="time-date"></ion-datetime>
         `, config);
-                await page.locator('.datetime-ready').waitFor();
+                await page.waitForSelector('.datetime-ready');
                 const datetime = page.locator('ion-datetime');
                 await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-time-date`));
             });
@@ -30,7 +30,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
                 await page.setContent(`
           <ion-datetime value="2022-02-22T16:30:00" presentation="time"></ion-datetime>
         `, config);
-                await page.locator('.datetime-ready').waitFor();
+                await page.waitForSelector('.datetime-ready');
                 const datetime = page.locator('ion-datetime');
                 await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-time`));
             });
@@ -38,7 +38,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
                 await page.setContent(`
           <ion-datetime value="2022-02-22T16:30:00" presentation="date"></ion-datetime>
         `, config);
-                await page.locator('.datetime-ready').waitFor();
+                await page.waitForSelector('.datetime-ready');
                 const datetime = page.locator('ion-datetime');
                 await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-date`));
             });
@@ -56,7 +56,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
                 await page.setContent(`
           <ion-datetime size="cover" value="2022-02-22T16:30:00" presentation="date-time"></ion-datetime>
         `, config);
-                await page.locator('.datetime-ready').waitFor();
+                await page.waitForSelector('.datetime-ready');
                 const datetime = page.locator('ion-datetime');
                 await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-date-time`));
             });
@@ -64,7 +64,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
                 await page.setContent(`
           <ion-datetime size="cover" value="2022-02-22T16:30:00" presentation="time-date"></ion-datetime>
         `, config);
-                await page.locator('.datetime-ready').waitFor();
+                await page.waitForSelector('.datetime-ready');
                 const datetime = page.locator('ion-datetime');
                 await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-time-date`));
             });
@@ -72,7 +72,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
                 await page.setContent(`
           <ion-datetime size="cover" value="2022-02-22T16:30:00" presentation="time"></ion-datetime>
         `, config);
-                await page.locator('.datetime-ready').waitFor();
+                await page.waitForSelector('.datetime-ready');
                 const datetime = page.locator('ion-datetime');
                 await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-time`));
             });
@@ -80,7 +80,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
                 await page.setContent(`
           <ion-datetime size="cover" value="2022-02-22T16:30:00" presentation="date"></ion-datetime>
         `, config);
-                await page.locator('.datetime-ready').waitFor();
+                await page.waitForSelector('.datetime-ready');
                 const datetime = page.locator('ion-datetime');
                 await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-date`));
             });
@@ -96,7 +96,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         test('month selection should work after changing presentation', async ({ page }) => {
             await page.goto('/src/components/datetime/test/display', config);
             const ionWorkingPartsDidChange = await page.spyOnEvent('ionWorkingPartsDidChange');
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             const select = page.locator('select#presentation');
             await select.selectOption('date-time');
             await page.waitForChanges();

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

@@ -77,7 +77,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await page.setContent(`
         <ion-datetime locale="ar-EG" presentation="date" value="2022-01-01"></ion-datetime>
       `, config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             const datetimeButtons = page.locator('ion-datetime .calendar-day:not([disabled])');
             await expect(datetimeButtons.nth(0)).toHaveText('١');
             await expect(datetimeButtons.nth(1)).toHaveText('٢');
@@ -85,10 +85,10 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         });
         test('should correctly localize year column data', async ({ page }) => {
             await page.setContent(`
-        <ion-datetime prefer-wheel="true" locale="ar-EG" presentation="date" value="2022-01-01"></ion-datetime>
+        <ion-datetime prefer-wheel="true" locale="ar-EG" presentation="date" value="2022-01-01" max="2022" min="2022"></ion-datetime>
       `, config);
-            await page.locator('.datetime-ready').waitFor();
-            const datetimeYear = page.locator('ion-datetime .year-column .picker-item[data-value="2022"]');
+            await page.waitForSelector('.datetime-ready');
+            const datetimeYear = page.locator('ion-datetime .year-column ion-picker-column-option').nth(0);
             await expect(datetimeYear).toHaveText('٢٠٢٢');
         });
     });
@@ -111,7 +111,7 @@ class DatetimeLocaleFixture {
       ></ion-datetime>
     `, config);
         this.datetime = this.page.locator('ion-datetime');
-        await this.page.locator('.datetime-ready').waitFor();
+        await this.page.waitForSelector('.datetime-ready');
     }
     async expectLocalizedDatePicker(screenshot) {
         await this.expectLocalizedPicker(screenshot);

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

@@ -32,7 +32,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
           }
         </script>
     `, config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             const prevButton = page.locator('ion-datetime .calendar-next-prev ion-button:nth-child(1)');
             const nextButton = page.locator('ion-datetime .calendar-next-prev ion-button:nth-child(2)');
             await expect(nextButton).toHaveJSProperty('disabled', false);
@@ -48,21 +48,21 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
         test('datetime: minmax months disabled', async ({ page }) => {
             await page.goto('/src/components/datetime/test/minmax', config);
             const calendarMonths = page.locator('ion-datetime#inside .calendar-month');
-            await page.locator('.datetime-ready').first().waitFor();
+            await page.waitForSelector('.datetime-ready');
             await expect(calendarMonths.nth(0)).not.toHaveClass(/calendar-month-disabled/);
             await expect(calendarMonths.nth(1)).not.toHaveClass(/calendar-month-disabled/);
             await expect(calendarMonths.nth(2)).toHaveClass(/calendar-month-disabled/);
         });
         test('datetime: minmax navigation disabled', async ({ page }) => {
             await page.goto('/src/components/datetime/test/minmax', config);
-            await page.locator('.datetime-ready').first().waitFor();
+            await page.waitForSelector('.datetime-ready');
             const navButtons = page.locator('ion-datetime#outside .calendar-next-prev ion-button');
             await expect(navButtons.nth(0)).toHaveAttribute('disabled', '');
             await expect(navButtons.nth(1)).toHaveAttribute('disabled', '');
         });
         test('datetime: min including day should not disable month', async ({ page }) => {
             await page.goto('/src/components/datetime/test/minmax', config);
-            await page.locator('.datetime-ready').first().waitFor();
+            await page.waitForSelector('.datetime-ready');
             const calendarMonths = page.locator('ion-datetime#min-with-day .calendar-month');
             await expect(calendarMonths.nth(0)).toHaveClass(/calendar-month-disabled/);
             await expect(calendarMonths.nth(1)).not.toHaveClass(/calendar-month-disabled/);
@@ -77,12 +77,12 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
                 await page.setContent(`
           <ion-datetime min="2022-04-22T04:10:00" max="2022-05-21T21:30:00"></ion-datetime>
       `, config);
-                await page.locator('.datetime-ready').waitFor();
+                await page.waitForSelector('.datetime-ready');
                 const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
                 await page.click('.time-body');
                 await ionPopoverDidPresent.next();
-                const hours = page.locator('ion-popover ion-picker-column-internal:nth-child(1) .picker-item:not(.picker-item-empty)');
-                const minutes = page.locator('ion-popover ion-picker-column-internal:nth-child(2) .picker-item:not(.picker-item-empty)');
+                const hours = page.locator('ion-popover ion-picker-column:nth-child(1) ion-picker-column-option');
+                const minutes = page.locator('ion-popover ion-picker-column:nth-child(2) ion-picker-column-option');
                 expect(await hours.count()).toBe(12);
                 expect(await minutes.count()).toBe(60);
             });
@@ -90,7 +90,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
         test.describe('setting value outside bounds should show in-bounds month', () => {
             const testDisplayedMonth = async (page, content, expectedString = /June 2021/) => {
                 await page.setContent(content, config);
-                await page.locator('.datetime-ready').waitFor();
+                await page.waitForSelector('.datetime-ready');
                 const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
                 await expect(calendarMonthYear).toHaveText(expectedString);
             };
@@ -126,7 +126,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
           });
         </script>
       `, config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             const datetimeMonthDidChange = await page.spyOnEvent('datetimeMonthDidChange');
             const eventButton = page.locator('button#bind');
             await eventButton.click();
@@ -159,7 +159,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
           value="2022-04-25T08:30:00"
         ></ion-datetime>
       `, config);
-            const hourPickerItems = page.locator('ion-datetime ion-picker-column-internal:first-of-type .picker-item:not(.picker-item-empty)');
+            const hourPickerItems = page.locator('ion-datetime ion-picker-column:first-of-type ion-picker-column-option');
             await expect(hourPickerItems).toHaveText(['8', '9', '10', '11']);
         });
         test('should include 12PM when minimum is greater than 12', async ({ page }) => {
@@ -175,7 +175,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
           value="2022-07-29T12:00:00"
         ></ion-datetime>
       `, config);
-            const hourPickerItems = page.locator('ion-datetime ion-picker-column-internal:first-of-type .picker-item:not(.picker-item-empty)');
+            const hourPickerItems = page.locator('ion-datetime ion-picker-column:first-of-type ion-picker-column-option');
             await expect(hourPickerItems).toHaveText(['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']);
         });
         test.describe('minmax value adjustment when out of bounds', () => {
@@ -186,7 +186,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
             value="2022-10-11T06:00"
           ></ion-datetime>
         `, config);
-                await page.locator('.datetime-ready').waitFor();
+                await page.waitForSelector('.datetime-ready');
                 const datetime = page.locator('ion-datetime');
                 const ionChange = await page.spyOnEvent('ionChange');
                 const dayButton = page.locator('ion-datetime .calendar-day[data-day="10"][data-month="10"][data-year="2022"]');
@@ -201,7 +201,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
             value="2022-10-11T09:00"
           ></ion-datetime>
         `, config);
-                await page.locator('.datetime-ready').waitFor();
+                await page.waitForSelector('.datetime-ready');
                 const datetime = page.locator('ion-datetime');
                 const ionChange = await page.spyOnEvent('ionChange');
                 const dayButton = page.locator('ion-datetime .calendar-day[data-day="10"][data-month="10"][data-year="2022"]');
@@ -218,9 +218,9 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
           ></ion-datetime>
         `, config);
                 const datetime = page.locator('ion-datetime');
-                const monthColumnItems = page.locator('ion-datetime .month-column .picker-item:not(.picker-item-empty)');
+                const monthColumnItems = page.locator('ion-datetime .month-column ion-picker-column-option');
                 const ionChange = await page.spyOnEvent('ionChange');
-                await page.locator('.datetime-ready').waitFor();
+                await page.waitForSelector('.datetime-ready');
                 await monthColumnItems.nth(0).click(); // switch to January
                 await ionChange.next();
                 await expect(datetime).toHaveJSProperty('value', '2022-01-15T00:00:00');
@@ -248,7 +248,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
             }
           </script>
         `, config);
-                await page.locator('.datetime-ready').waitFor();
+                await page.waitForSelector('.datetime-ready');
                 // Select Jan 10, 2022
                 const maxDate = page.locator('ion-datetime .calendar-day[data-day="10"][data-month="1"][data-year="2022"]');
                 await maxDate.click();
@@ -258,7 +258,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
                 const timeButton = page.locator('ion-datetime .time-body');
                 await timeButton.click();
                 await ionPopoverDidPresent.next();
-                const hours = page.locator('ion-popover ion-picker-column-internal:nth-child(1) .picker-item:not(.picker-item-empty)');
+                const hours = page.locator('ion-popover ion-picker-column:nth-child(1) ion-picker-column-option');
                 await expect(await hours.count()).toBe(4);
             });
         });

package/dist/collection/components/datetime/test/month-year-picker/datetime.e2e.js

@@ -11,12 +11,12 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     test.describe(title('datetime: month-year picker'), () => {
         test.beforeEach(async ({ page }) => {
             await page.goto('/src/components/datetime/test/month-year-picker', config);
-            await page.locator('.datetime-ready').first().waitFor();
+            await page.waitForSelector('.datetime-ready');
         });
         test('should hide the footer when picker is open', async ({ page }) => {
             const datetimeFooter = page.locator('#date-time .datetime-footer');
             await expect(datetimeFooter).toBeVisible();
-            const pickerButton = page.locator('#date-time .calendar-month-year > ion-item');
+            const pickerButton = page.locator('#date-time .calendar-month-year > .calendar-month-year-toggle');
             await pickerButton.click();
             await page.waitForChanges();
             await expect(datetimeFooter).not.toBeVisible();

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

@@ -41,7 +41,7 @@ class DatetimeMultipleFixture {
       </script>
     `, config);
         this.datetime = this.page.locator('ion-datetime');
-        await this.page.locator('.datetime-ready').waitFor();
+        await this.page.waitForSelector('.datetime-ready');
         return this.datetime;
     }
     async expectMultipleDatePicker(id, screenshot) {
@@ -233,7 +233,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           }
         </script>
       `, config);
-            await page.locator(`.datetime-ready`).waitFor();
+            await page.waitForSelector(`.datetime-ready`);
             const datetime = page.locator('ion-datetime');
             const header = datetime.locator('.datetime-selected-date');
             await expect(header).toHaveText('Mon, Oct 10');

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

@@ -11,7 +11,7 @@ configs().forEach(({ title, screenshot, config }) => {
             const openDateTimeBtn = page.locator('ion-button#open-datetime');
             await openDateTimeBtn.click();
             await ionPopoverDidPresent.next();
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             await expect(page).toHaveScreenshot(screenshot(`datetime-position-base`));
             const timepickerBtn = page.locator('ion-datetime .time-body');
             await timepickerBtn.click();