voyager-ionic-core 7.7.3 → 8.0.0-beta.2

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

@@ -60,7 +60,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           <ion-datetime presentation="date" prefer-wheel="true" min="2019-05-05" max="2023-10-01" value="2019-05-30"></ion-datetime>
         `, config);
                 await page.locator('.datetime-ready').waitFor();
-                const dayValues = page.locator('ion-datetime .day-column .picker-item[data-value]');
+                const dayValues = page.locator('ion-datetime .day-column ion-picker-column-option');
                 expect(await dayValues.count()).toEqual(27);
             });
             test('should respect the max bounds', async ({ page }) => {
@@ -68,7 +68,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           <ion-datetime presentation="date" prefer-wheel="true" min="2019-05-05" max="2023-10-01" value="2023-10-01"></ion-datetime>
         `, config);
                 await page.locator('.datetime-ready').waitFor();
-                const dayValues = page.locator('ion-datetime .day-column .picker-item[data-value]');
+                const dayValues = page.locator('ion-datetime .day-column ion-picker-column-option');
                 expect(await dayValues.count()).toEqual(1);
             });
             test('should respect isDateEnabled preference', async ({ page }) => {
@@ -86,9 +86,9 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           </script>
         `, config);
                 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]');
+                const disabledMonths = page.locator('.month-column ion-picker-column-option.option-disabled');
+                const disabledYears = page.locator('.year-column ion-picker-column-option.option-disabled');
+                const disabledDays = page.locator('.day-column ion-picker-column-option.option-disabled');
                 expect(await disabledMonths.count()).toBe(0);
                 expect(await disabledYears.count()).toBe(0);
                 expect(await disabledDays.count()).toBe(15);
@@ -105,9 +105,9 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           ></ion-datetime>
         `, config);
                 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)');
+                const monthValues = page.locator('.month-column ion-picker-column-option');
+                const yearValues = page.locator('.year-column ion-picker-column-option');
+                const dayValues = page.locator('.day-column ion-picker-column-option');
                 expect(await monthValues.count()).toBe(2);
                 expect(await yearValues.count()).toBe(3);
                 expect(await dayValues.count()).toBe(5);
@@ -134,7 +134,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         `, config);
                 await page.locator('.datetime-ready').waitFor();
                 const ionChange = await page.spyOnEvent('ionChange');
-                const monthValues = page.locator('.month-column .picker-item:not(.picker-item-empty)');
+                const monthValues = page.locator('.month-column ion-picker-column-option');
                 // Change month value
                 await monthValues.nth(0).click();
                 await ionChange.next();
@@ -161,7 +161,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         `, config);
                 await page.locator('.datetime-ready').waitFor();
                 const ionChange = await page.spyOnEvent('ionChange');
-                const dayValues = page.locator('.day-column .picker-item:not(.picker-item-empty)');
+                const dayValues = page.locator('.day-column ion-picker-column-option');
                 // Change day value
                 await dayValues.nth(0).click();
                 await ionChange.next();
@@ -175,7 +175,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         `, config);
                 await page.locator('.datetime-ready').waitFor();
                 const ionChange = await page.spyOnEvent('ionChange');
-                const yearValues = page.locator('.year-column .picker-item:not(.picker-item-empty)');
+                const yearValues = page.locator('.year-column ion-picker-column-option');
                 /**
                  * Change year value
                  * The 0th index is the current
@@ -192,9 +192,9 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
                 const datetime = page.locator('ion-datetime');
                 await datetime.evaluate((el) => (el.value = '2021-05-25T12:40:00.000Z'));
                 await page.waitForChanges();
-                const selectedMonth = datetime.locator('.month-column .picker-item-active');
-                const selectedDay = datetime.locator('.day-column .picker-item-active');
-                const selectedYear = datetime.locator('.year-column .picker-item-active');
+                const selectedMonth = datetime.locator('.month-column ion-picker-column-option.option-active');
+                const selectedDay = datetime.locator('.day-column ion-picker-column-option.option-active');
+                const selectedYear = datetime.locator('.year-column ion-picker-column-option.option-active');
                 await expect(selectedMonth).toHaveText(/May/);
                 await expect(selectedDay).toHaveText(/25/);
                 await expect(selectedYear).toHaveText(/2021/);
@@ -213,8 +213,8 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             ></ion-datetime>
           `, config);
                     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)');
+                    const monthValues = page.locator('.month-column ion-picker-column-option');
+                    const dayValues = page.locator('.day-column ion-picker-column-option');
                     await expect(monthValues).toHaveText(['1月', '2月', '3月']);
                     await expect(dayValues).toHaveText(['1日', '2日', '3日']);
                 });
@@ -228,7 +228,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             ></ion-datetime>
           `, config);
                     await page.locator('.datetime-ready').waitFor();
-                    const columns = page.locator('ion-picker-column-internal');
+                    const columns = page.locator('ion-picker-column');
                     await expect(columns.nth(0)).toHaveClass(/month-column/);
                     await expect(columns.nth(1)).toHaveClass(/day-column/);
                     await expect(columns.nth(2)).toHaveClass(/year-column/);
@@ -243,7 +243,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             ></ion-datetime>
           `, config);
                     await page.locator('.datetime-ready').waitFor();
-                    const columns = page.locator('ion-picker-column-internal');
+                    const columns = page.locator('ion-picker-column');
                     await expect(columns.nth(0)).toHaveClass(/day-column/);
                     await expect(columns.nth(1)).toHaveClass(/month-column/);
                     await expect(columns.nth(2)).toHaveClass(/year-column/);
@@ -256,7 +256,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           <ion-datetime presentation="date-time" prefer-wheel="true" min="2019-05-05" value="2019-05-10T16:30:00"></ion-datetime>
         `, config);
                 await page.locator('.datetime-ready').waitFor();
-                const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
+                const dayValues = page.locator('ion-datetime .date-column ion-picker-column-option');
                 expect(await dayValues.count()).toEqual(57);
             });
             test('should respect the max bounds', async ({ page }) => {
@@ -264,7 +264,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           <ion-datetime presentation="date-time" prefer-wheel="true" max="2023-06-10" value="2023-06-05T16:30:00"></ion-datetime>
         `, config);
                 await page.locator('.datetime-ready').waitFor();
-                const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
+                const dayValues = page.locator('ion-datetime .date-column ion-picker-column-option');
                 expect(await dayValues.count()).toEqual(41);
             });
             test('should respect isDateEnabled preference', async ({ page }) => {
@@ -282,7 +282,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           </script>
         `, config);
                 await page.locator('.datetime-ready').waitFor();
-                const disabledDates = page.locator('.date-column .picker-item[disabled]');
+                const disabledDates = page.locator('.date-column ion-picker-column-option.option-disabled');
                 expect(await disabledDates.count()).toBe(44);
             });
             test('should respect month, day, and year preferences', async ({ page }) => {
@@ -297,7 +297,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           ></ion-datetime>
         `, config);
                 await page.locator('.datetime-ready').waitFor();
-                const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
+                const dateValues = page.locator('.date-column ion-picker-column-option');
                 expect(await dateValues.count()).toBe(5);
             });
             test('should correctly localize the date data', async ({ page }) => {
@@ -312,7 +312,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           ></ion-datetime>
         `, config);
                 await page.locator('.datetime-ready').waitFor();
-                const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
+                const dateValues = page.locator('.date-column ion-picker-column-option');
                 await expect(dateValues).toHaveText(['2月1日(火)', '2月2日(水)', '2月3日(木)']);
             });
             test('should respect min and max bounds even across years', async ({ page }) => {
@@ -327,15 +327,16 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         `, config);
                 await page.locator('.datetime-ready').waitFor();
                 const dateColumn = page.locator('.date-column');
-                const dateValues = dateColumn.locator('.picker-item:not(.picker-item-empty)');
+                const dateColumnScrollEl = dateColumn.locator('.picker-opts');
+                const dateValues = dateColumn.locator('ion-picker-column-option');
                 expect(await dateValues.count()).toBe(90);
                 /**
                  * Select 1st item to change the dates rendered
                  */
-                await expect(dateValues.nth(0)).toHaveAttribute('data-value', '2022-1-1');
-                await dateColumn.evaluate((el) => (el.scrollTop = 0));
+                await expect(dateValues.nth(0)).toHaveJSProperty('value', '2022-1-1');
+                await dateColumnScrollEl.evaluate((el) => (el.scrollTop = 0));
                 await page.waitForChanges();
-                await expect(dateValues.nth(0)).toHaveAttribute('data-value', '2021-12-1');
+                await expect(dateValues.nth(0)).toHaveJSProperty('value', '2021-12-1');
             });
             test('should keep sliding window if default window is within min and max constraints', async ({ page }) => {
                 await page.setContent(`
@@ -348,7 +349,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           ></ion-datetime>
         `, config);
                 await page.locator('.datetime-ready').waitFor();
-                const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
+                const dayValues = page.locator('.date-column ion-picker-column-option');
                 expect(await dayValues.count()).toBe(92);
             });
             test('should narrow sliding window if default window is not within min and max constraints', async ({ page }) => {
@@ -362,7 +363,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           ></ion-datetime>
         `, config);
                 await page.locator('.datetime-ready').waitFor();
-                const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
+                const dayValues = page.locator('.date-column ion-picker-column-option');
                 expect(await dayValues.count()).toBe(15);
             });
             test('selecting date should update value when no value is set', async ({ page }) => {
@@ -374,7 +375,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         `, config);
                 await page.locator('.datetime-ready').waitFor();
                 const ionChange = await page.spyOnEvent('ionChange');
-                const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
+                const dayValues = page.locator('.date-column ion-picker-column-option');
                 // Change day/month value
                 await dayValues.nth(0).click();
                 await ionChange.next();
@@ -386,7 +387,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           <ion-datetime presentation="time-date" prefer-wheel="true" min="2019-05-05" value="2019-05-10T16:30:00"></ion-datetime>
         `, config);
                 await page.locator('.datetime-ready').waitFor();
-                const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
+                const dayValues = page.locator('ion-datetime .date-column ion-picker-column-option');
                 expect(await dayValues.count()).toEqual(57);
             });
             test('should respect the max bounds', async ({ page }) => {
@@ -394,7 +395,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           <ion-datetime presentation="time-date" prefer-wheel="true" max="2023-06-10" value="2023-06-05T16:30:00"></ion-datetime>
         `, config);
                 await page.locator('.datetime-ready').waitFor();
-                const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
+                const dayValues = page.locator('ion-datetime .date-column ion-picker-column-option');
                 expect(await dayValues.count()).toEqual(41);
             });
             test('should respect isDateEnabled preference', async ({ page }) => {
@@ -412,7 +413,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           </script>
         `, config);
                 await page.locator('.datetime-ready').waitFor();
-                const disabledDates = page.locator('.date-column .picker-item[disabled]');
+                const disabledDates = page.locator('.date-column ion-picker-column-option.option-disabled');
                 expect(await disabledDates.count()).toBe(44);
             });
             test('should respect month, day, and year preferences', async ({ page }) => {
@@ -427,7 +428,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           ></ion-datetime>
         `, config);
                 await page.locator('.datetime-ready').waitFor();
-                const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
+                const dateValues = page.locator('.date-column ion-picker-column-option');
                 expect(await dateValues.count()).toBe(5);
             });
             test('should correctly localize the date data', async ({ page }) => {
@@ -442,7 +443,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           ></ion-datetime>
         `, config);
                 await page.locator('.datetime-ready').waitFor();
-                const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
+                const dateValues = page.locator('.date-column ion-picker-column-option');
                 await expect(dateValues).toHaveText(['2月1日(火)', '2月2日(水)', '2月3日(木)']);
             });
             test('should respect min and max bounds even across years', async ({ page }) => {
@@ -457,15 +458,16 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         `, config);
                 await page.locator('.datetime-ready').waitFor();
                 const dateColumn = page.locator('.date-column');
-                const dateValues = dateColumn.locator('.picker-item:not(.picker-item-empty)');
+                const dateColumnScrollEl = dateColumn.locator('.picker-opts');
+                const dateValues = dateColumn.locator('ion-picker-column-option');
                 expect(await dateValues.count()).toBe(90);
                 /**
                  * Select 1st item to change the dates rendered
                  */
-                await expect(dateValues.nth(0)).toHaveAttribute('data-value', '2022-1-1');
-                await dateColumn.evaluate((el) => (el.scrollTop = 0));
+                await expect(dateValues.nth(0)).toHaveJSProperty('value', '2022-1-1');
+                await dateColumnScrollEl.evaluate((el) => (el.scrollTop = 0));
                 await page.waitForChanges();
-                await expect(dateValues.nth(0)).toHaveAttribute('data-value', '2021-12-1');
+                await expect(dateValues.nth(0)).toHaveJSProperty('value', '2021-12-1');
             });
             test('should keep sliding window if default window is within min and max constraints', async ({ page }) => {
                 await page.setContent(`
@@ -478,7 +480,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         ></ion-datetime>
       `, config);
                 await page.locator('.datetime-ready').waitFor();
-                const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
+                const dayValues = page.locator('.date-column ion-picker-column-option');
                 expect(await dayValues.count()).toBe(92);
             });
             test('should narrow sliding window if default window is not within min and max constraints', async ({ page }) => {
@@ -492,7 +494,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         ></ion-datetime>
       `, config);
                 await page.locator('.datetime-ready').waitFor();
-                const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
+                const dayValues = page.locator('.date-column ion-picker-column-option');
                 expect(await dayValues.count()).toBe(15);
             });
         });

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

@@ -161,7 +161,7 @@ class TimePickerFixture {
         await this.page.waitForChanges();
     }
     async expectTime(hour, minute, ampm) {
-        const pickerColumns = this.timePicker.locator('ion-picker-column-internal');
+        const pickerColumns = this.timePicker.locator('ion-picker-column');
         await expect(pickerColumns.nth(0)).toHaveJSProperty('value', hour);
         await expect(pickerColumns.nth(1)).toHaveJSProperty('value', minute);
         await expect(pickerColumns.nth(2)).toHaveJSProperty('value', ampm);

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

@@ -34,7 +34,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
             await expect(calendarMonthYear).toHaveText('February 2022');
             await calendarMonthYear.click();
             await page.waitForChanges();
-            await page.locator('.month-column .picker-item[data-value="3"]').click();
+            await page.locator('.month-column ion-picker-column-option').nth(2).click();
             await page.waitForChanges();
             await expect(calendarMonthYear).toHaveText('March 2022');
             await expect(ionChange).not.toHaveReceivedEvent();
@@ -46,14 +46,14 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
             const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
             await page.locator('.datetime-ready').waitFor();
             const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
-            const monthYearButton = page.locator('.calendar-month-year ion-item');
+            const monthYearButton = page.locator('.calendar-month-year-toggle');
             await expect(calendarMonthYear).toHaveText('February 2022');
             await page.keyboard.press(tabKey);
             await expect(monthYearButton).toBeFocused();
             await page.waitForChanges();
             await page.keyboard.press('Enter');
             await page.waitForChanges();
-            const marchPickerItem = page.locator('.month-column .picker-item[data-value="3"]');
+            const marchPickerItem = page.locator('.month-column ion-picker-column-option').nth(2);
             await expect(marchPickerItem).toBeVisible();
         });
         test('should view next month via next button', async ({ page }) => {
@@ -75,7 +75,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
     `, 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)');
             const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');

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

@@ -22,28 +22,28 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await page.setContent(`
         <ion-datetime locale="en-US" presentation="month-year" month-values="5,6,10"></ion-datetime>
       `, config);
-            const items = page.locator('.month-column .picker-item:not(.picker-item-empty)');
+            const items = page.locator('.month-column ion-picker-column-option');
             await expect(items).toHaveText(['May', 'June', 'October']);
         });
         test('should render correct years', async ({ page }) => {
             await page.setContent(`
         <ion-datetime locale="en-US" presentation="month-year" year-values="2022,2021,2020"></ion-datetime>
       `, config);
-            const items = page.locator('.year-column .picker-item:not(.picker-item-empty)');
+            const items = page.locator('.year-column ion-picker-column-option');
             await expect(items).toHaveText(['2022', '2021', '2020']);
         });
         test('should render correct hours', async ({ page }) => {
             await page.setContent(`
         <ion-datetime locale="en-US" presentation="time" hour-values="1,2,3"></ion-datetime>
       `, config);
-            const items = page.locator('ion-picker-column-internal:first-of-type .picker-item:not(.picker-item-empty)');
+            const items = page.locator('ion-picker-column:first-of-type ion-picker-column-option');
             await expect(items).toHaveText(['1', '2', '3']);
         });
         test('should render correct minutes', async ({ page }) => {
             await page.setContent(`
         <ion-datetime locale="en-US" presentation="time" minute-values="1,2,3"></ion-datetime>
       `, config);
-            const items = page.locator('ion-picker-column-internal:nth-of-type(2) .picker-item:not(.picker-item-empty)');
+            const items = page.locator('ion-picker-column:nth-of-type(2) ion-picker-column-option');
             await expect(items).toHaveText(['01', '02', '03']);
         });
         test('should adjust default parts for allowed hour and minute values', async ({ page }) => {
@@ -69,19 +69,22 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         </script>
       `, config);
             await page.locator('.datetime-ready').waitFor();
-            const minuteItems = page.locator('ion-picker-column-internal:nth-of-type(2) .picker-item:not(.picker-item-empty)');
+            const minuteColumn = page.locator('ion-picker-column').nth(1);
+            const minuteItems = minuteColumn.locator('ion-picker-column-option');
             await expect(minuteItems).toHaveText(['00', '15', '30', '45']);
-            await expect(minuteItems.nth(1)).toHaveClass(/picker-item-active/);
-            const hourItems = page.locator('ion-picker-column-internal:nth-of-type(1) .picker-item:not(.picker-item-empty)');
+            await expect(minuteColumn).toHaveJSProperty('value', 15);
+            const hourColumn = page.locator('ion-picker-column').nth(0);
+            const hourItems = hourColumn.locator('ion-picker-column-option');
             await expect(hourItems).toHaveText(['2']);
-            await expect(hourItems.nth(0)).toHaveClass(/picker-item-active/);
+            await expect(hourColumn).toHaveJSProperty('value', 2);
             /**
              * Since the allowed hour is 2AM, the time period
              * should switch from PM to AM.
              */
-            const ampmItems = page.locator('ion-picker-column-internal:nth-of-type(3) .picker-item:not(.picker-item-empty)');
+            const ampmColumn = page.locator('ion-picker-column').nth(2);
+            const ampmItems = ampmColumn.locator('ion-picker-column-option');
             await expect(ampmItems).toHaveText(['AM', 'PM']);
-            await expect(ampmItems.nth(0)).toHaveClass(/picker-item-active/);
+            await expect(ampmColumn).toHaveJSProperty('value', 'am');
         });
         test('should adjust default parts month for allowed month values', async ({ page }) => {
             /**
@@ -106,9 +109,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         </script>
       `, config);
             await page.locator('.datetime-ready').waitFor();
-            const monthItems = page.locator('.month-column .picker-item:not(.picker-item-empty)');
+            const monthItems = page.locator('.month-column ion-picker-column-option');
             await expect(monthItems).toHaveText(['January']);
-            await expect(monthItems.nth(0)).toHaveClass(/picker-item-active/);
+            await expect(monthItems.nth(0)).toHaveClass(/option-active/);
         });
         test('today date highlight should persist even if disallowed from dayValues', async ({ page }) => {
             /**

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

@@ -323,7 +323,7 @@ export const getMonthColumnData = (locale, refParts, minParts, maxParts, monthVa
  * @param minParts The minimum bound on the date that can be returned
  * @param maxParts The maximum bound on the date that can be returned
  * @param dayValues The allowed date values
- * @returns Date data to be used in ion-picker-column-internal
+ * @returns Date data to be used in ion-picker-column
  */
 export const getDayColumnData = (locale, refParts, minParts, maxParts, dayValues, formatOptions = {
     day: 'numeric',

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

@@ -9,7 +9,26 @@ const getFormattedDayPeriod = (dayPeriod) => {
     }
     return dayPeriod.toUpperCase();
 };
-export const getLocalizedTime = (locale, refParts, hourCycle) => {
+/**
+ * Including time zone options may lead to the rendered text showing a
+ * different time from what was selected in the Datetime, which could cause
+ * confusion.
+ */
+export const stripTimeZone = (formatOptions) => {
+    return Object.assign(Object.assign({}, formatOptions), {
+        /**
+         * Setting the time zone to UTC ensures that the value shown is always the
+         * same as what was selected and safeguards against older Safari bugs with
+         * Intl.DateTimeFormat.
+         */
+        timeZone: 'UTC',
+        /**
+         * We do not want to display the time zone name
+         */
+        timeZoneName: undefined
+    });
+};
+export const getLocalizedTime = (locale, refParts, hourCycle, formatOptions = { hour: 'numeric', minute: 'numeric' }) => {
     const timeParts = {
         hour: refParts.hour,
         minute: refParts.minute,
@@ -17,28 +36,13 @@ export const getLocalizedTime = (locale, refParts, hourCycle) => {
     if (timeParts.hour === undefined || timeParts.minute === undefined) {
         return 'Invalid Time';
     }
-    return new Intl.DateTimeFormat(locale, {
-        hour: 'numeric',
-        minute: 'numeric',
-        /**
-         * Setting the timeZone to UTC prevents
-         * new Intl.DatetimeFormat from subtracting
-         * the user's current timezone offset
-         * when formatting the time.
-         */
-        timeZone: 'UTC',
+    return new Intl.DateTimeFormat(locale, Object.assign(Object.assign({}, stripTimeZone(formatOptions)), {
         /**
          * We use hourCycle here instead of hour12 due to:
          * https://bugs.chromium.org/p/chromium/issues/detail?id=1347316&q=hour12&can=2
          */
-        hourCycle,
-        /**
-         * Setting Z at the end indicates that this
-         * date string is in the UTC time zone. This
-         * prevents new Date from adding the time zone
-         * offset when getting the ISO string.
-         */
-    }).format(new Date(convertDataToISO(Object.assign({
+        hourCycle
+    })).format(new Date(convertDataToISO(Object.assign({
         /**
          * JS uses a simplified ISO 8601 format which allows for
          * date-only formats and date-time formats, but not
@@ -125,14 +129,6 @@ export const generateDayAriaLabel = (locale, today, refParts) => {
      */
     return today ? `Today, ${labelString}` : labelString;
 };
-/**
- * Gets the day of the week, month, and day
- * Used for the header in MD mode.
- */
-export const getMonthAndDay = (locale, refParts) => {
-    const date = getNormalizedDate(refParts);
-    return new Intl.DateTimeFormat(locale, { weekday: 'short', month: 'short', day: 'numeric', timeZone: 'UTC' }).format(date);
-};
 /**
  * Given a locale and a date object,
  * return a formatted string that includes
@@ -143,15 +139,6 @@ export const getMonthAndYear = (locale, refParts) => {
     const date = getNormalizedDate(refParts);
     return new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric', timeZone: 'UTC' }).format(date);
 };
-/**
- * Given a locale and a date object,
- * return a formatted string that includes
- * the short month, numeric day, and full year.
- * Example: Apr 22, 2021
- */
-export const getMonthDayAndYear = (locale, refParts) => {
-    return getLocalizedDateTime(locale, refParts, { month: 'short', day: 'numeric', year: 'numeric' });
-};
 /**
  * Given a locale and a date object,
  * return a formatted string that includes
@@ -201,7 +188,7 @@ export const getNormalizedDate = (refParts) => {
  */
 export const getLocalizedDateTime = (locale, refParts, options) => {
     const date = getNormalizedDate(refParts);
-    return getDateTimeFormat(locale, options).format(date);
+    return getDateTimeFormat(locale, stripTimeZone(options)).format(date);
 };
 /**
  * Given a locale, DatetimeParts, and options

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

@@ -0,0 +1,45 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { printIonWarning } from "../../../utils/logging/index";
+/**
+ * If a time zone is provided in the format options, the rendered text could
+ * differ from what was selected in the Datetime, which could cause
+ * confusion.
+ */
+export const warnIfTimeZoneProvided = (el, formatOptions) => {
+    var _a, _b, _c, _d;
+    if (((_a = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) === null || _a === void 0 ? void 0 : _a.timeZone) ||
+        ((_b = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) === null || _b === void 0 ? void 0 : _b.timeZoneName) ||
+        ((_c = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) === null || _c === void 0 ? void 0 : _c.timeZone) ||
+        ((_d = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) === null || _d === void 0 ? void 0 : _d.timeZoneName)) {
+        printIonWarning('Datetime: "timeZone" and "timeZoneName" are not supported in "formatOptions".', el);
+    }
+};
+export const checkForPresentationFormatMismatch = (el, presentation, formatOptions) => {
+    // formatOptions is not required
+    if (!formatOptions)
+        return;
+    // If formatOptions is provided, the date and/or time objects are required, depending on the presentation
+    switch (presentation) {
+        case 'date':
+        case 'month-year':
+        case 'month':
+        case 'year':
+            if (formatOptions.date === undefined) {
+                printIonWarning(`Datetime: The '${presentation}' presentation requires a date object in formatOptions.`, el);
+            }
+            break;
+        case 'time':
+            if (formatOptions.time === undefined) {
+                printIonWarning(`Datetime: The 'time' presentation requires a time object in formatOptions.`, el);
+            }
+            break;
+        case 'date-time':
+        case 'time-date':
+            if (formatOptions.date === undefined && formatOptions.time === undefined) {
+                printIonWarning(`Datetime: The '${presentation}' presentation requires either a date or time object (or both) in formatOptions.`, el);
+            }
+            break;
+    }
+};