@ionic/core 7.7.2-dev.11707932366.16baf005 → 7.7.2-dev.11707941206.120570b8

package/dist/collection/components/datetime/datetime.md.css

@@ -61,8 +61,6 @@
    *
    * @prop --wheel-highlight-background: The background of the highlight under the selected
    * item when using a wheel style layout, or in the month/year picker for grid style layouts.
-   * @prop --wheel-highlight-border-radius: The border radius of the highlight under the selected
-   * item when using a wheel style layout, or in the month/year picker for grid style layouts.
    * @prop --wheel-fade-background-rgb: The color of the gradient covering non-selected items
    * when using a wheel style layout, or in the month/year picker for grid style layouts. Must
    * be in RGB format, e.g. `255, 255, 255`.
@@ -73,6 +71,19 @@
   overflow: hidden;
 }
 
+/**
+ * When using the wheel picker to switch
+ * between months, sometimes the allowed
+ * dates may be filtered. As a result, it
+ * is possible to get a layout shift as
+ * the picker column will shrink to fit the
+ * widest item in the column. Setting a minimum
+ * width avoids this layout shifting.
+ */
+ion-picker-column-internal {
+  min-width: 26px;
+}
+
 :host(.datetime-size-fixed) {
   width: auto;
   height: auto;
@@ -83,7 +94,7 @@
 }
 
 /**
- * This ensures that the picker is appropriately
+ * This ensures that the picker is apppropriately
  * sized and never truncates the text.
  */
 :host(.datetime-size-fixed.datetime-prefer-wheel) {
@@ -158,13 +169,79 @@
   display: flex;
 }
 
-:host(.show-month-and-year) .calendar-next-prev,
-:host(.show-month-and-year) .calendar-days-of-week,
-:host(.show-month-and-year) .calendar-body,
-:host(.show-month-and-year) .datetime-time {
-  display: none;
+/**
+ * Safari 14 has an issue where a scroll event
+ * is incorrectly fired when unhiding the calendar content.
+ * To workaround this, we set the opacity
+ * of the content to 0 and hide it offscreen.
+ *
+ * -webkit-named-image is something only WebKit supports
+ * so we use this to detect general WebKit support.
+ * aspect-ratio is only supported in Safari 15+
+ * so by checking lack of aspect-ratio support, we know
+ * that we are in a pre-Safari 15 browser.
+ *
+ * TODO(FW-554): Remove when iOS 14 support is dropped.
+ */
+@supports (background: -webkit-named-image(apple-pay-logo-black)) and (not (aspect-ratio: 1/1)) {
+  :host(.show-month-and-year) .calendar-next-prev,
+  :host(.show-month-and-year) .calendar-days-of-week,
+  :host(.show-month-and-year) .calendar-body,
+  :host(.show-month-and-year) .datetime-time {
+    position: absolute;
+    /**
+     * Use visibility instead of
+     * opacity to ensure element
+     * cannot receive focus
+     */
+    visibility: hidden;
+    pointer-events: none;
+  }
+  @supports (inset-inline-start: 0) {
+    :host(.show-month-and-year) .calendar-next-prev,
+    :host(.show-month-and-year) .calendar-days-of-week,
+    :host(.show-month-and-year) .calendar-body,
+    :host(.show-month-and-year) .datetime-time {
+      inset-inline-start: -99999px;
+    }
+  }
+  @supports not (inset-inline-start: 0) {
+    :host(.show-month-and-year) .calendar-next-prev,
+    :host(.show-month-and-year) .calendar-days-of-week,
+    :host(.show-month-and-year) .calendar-body,
+    :host(.show-month-and-year) .datetime-time {
+      left: -99999px;
+    }
+    :host-context([dir=rtl]):host(.show-month-and-year) .calendar-next-prev, :host-context([dir=rtl]).show-month-and-year .calendar-next-prev, :host-context([dir=rtl]):host(.show-month-and-year) .calendar-days-of-week, :host-context([dir=rtl]).show-month-and-year .calendar-days-of-week, :host-context([dir=rtl]):host(.show-month-and-year) .calendar-body, :host-context([dir=rtl]).show-month-and-year .calendar-body, :host-context([dir=rtl]):host(.show-month-and-year) .datetime-time, :host-context([dir=rtl]).show-month-and-year .datetime-time {
+      left: unset;
+      right: unset;
+      right: -99999px;
+    }
+    @supports selector(:dir(rtl)) {
+      :host(.show-month-and-year:dir(rtl)) .calendar-next-prev, :host(.show-month-and-year:dir(rtl)) .calendar-days-of-week, :host(.show-month-and-year:dir(rtl)) .calendar-body, :host(.show-month-and-year:dir(rtl)) .datetime-time {
+        left: unset;
+        right: unset;
+        right: -99999px;
+      }
+    }
+  }
+}
+/**
+ * This support check two cases:
+ * 1. A WebKit browser that supports aspect-ratio (Safari 15+)
+ * 2. Any non-WebKit browser.
+ * Note that just overriding this display: none is not
+ * sufficient to resolve the issue mentioned above, which
+ * is why we do another set of @supports checks.
+ */
+@supports (not (background: -webkit-named-image(apple-pay-logo-black))) or ((background: -webkit-named-image(apple-pay-logo-black)) and (aspect-ratio: 1/1)) {
+  :host(.show-month-and-year) .calendar-next-prev,
+  :host(.show-month-and-year) .calendar-days-of-week,
+  :host(.show-month-and-year) .calendar-body,
+  :host(.show-month-and-year) .datetime-time {
+    display: none;
+  }
 }
-
 :host(.month-year-picker-open) .datetime-footer {
   display: none;
 }
@@ -240,8 +317,24 @@
   justify-content: space-between;
 }
 
+:host .calendar-action-buttons ion-item,
 :host .calendar-action-buttons ion-button {
-  --background: transparent;
+  --background: translucent;
+}
+
+:host .calendar-action-buttons ion-item ion-label {
+  display: flex;
+  align-items: center;
+  width: auto;
+}
+
+:host .calendar-action-buttons ion-item ion-icon {
+  -webkit-padding-start: 4px;
+  padding-inline-start: 4px;
+  -webkit-padding-end: 0;
+  padding-inline-end: 0;
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
 :host .calendar-days-of-week {
@@ -407,7 +500,7 @@
   padding-bottom: 6px;
   display: flex;
   border: none;
-  background: var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));
+  background: var(--ion-color-step-300, #edeef0);
   color: var(--ion-text-color, #000);
   font-family: inherit;
   font-size: inherit;
@@ -423,72 +516,8 @@
   position: static;
 }
 
-:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle {
-  color: var(--ion-color-base);
-}
-
-.calendar-month-year {
-  min-width: 0;
-}
-
-.calendar-month-year-toggle {
-  font-family: inherit;
-  font-size: inherit;
-  font-style: inherit;
-  font-weight: inherit;
-  letter-spacing: inherit;
-  text-decoration: inherit;
-  text-indent: inherit;
-  text-overflow: inherit;
-  text-transform: inherit;
-  text-align: inherit;
-  white-space: inherit;
-  color: inherit;
-  position: relative;
-  border: 0;
-  outline: none;
-  background: transparent;
-  cursor: pointer;
-  z-index: 1;
-}
-.calendar-month-year-toggle::after {
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  position: absolute;
-  content: "";
-  opacity: 0;
-  transition: opacity 15ms linear, background-color 15ms linear;
-  z-index: -1;
-}
-.calendar-month-year-toggle.ion-focused::after {
-  background: currentColor;
-}
-.calendar-month-year-toggle:disabled {
-  opacity: 0.3;
-  pointer-events: none;
-}
-
-.calendar-month-year-toggle ion-icon {
-  -webkit-padding-start: 4px;
-  padding-inline-start: 4px;
-  -webkit-padding-end: 0;
-  padding-inline-end: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-  flex-shrink: 0;
-}
-
-.calendar-month-year-toggle #toggle-wrapper {
-  display: inline-flex;
-  align-items: center;
-}
-
-ion-picker {
-  --highlight-background: var(--wheel-highlight-background);
-  --highlight-border-radius: var(--wheel-highlight-border-radius);
-  --fade-background-rgb: var(--wheel-fade-background-rgb);
+:host(.show-month-and-year) .calendar-action-buttons ion-item {
+  --color: var(--ion-color-base);
 }
 
 /**
@@ -547,7 +576,7 @@ ion-picker {
  * }
  */
 :host {
-  --background: var(--ion-color-step-100, var(--ion-background-color-step-100, #ffffff));
+  --background: var(--ion-color-step-100, #ffffff);
   --title-color: var(--ion-color-contrast);
 }
 
@@ -572,36 +601,15 @@ ion-picker {
   font-size: 2.125rem;
 }
 
-:host .calendar-action-buttons ion-button {
-  --color: var(--ion-color-step-650, var(--ion-text-color-step-350, #595959));
-}
-
-.calendar-month-year-toggle {
-  -webkit-padding-start: 20px;
-  padding-inline-start: 20px;
-  -webkit-padding-end: 16px;
-  padding-inline-end: 16px;
-  padding-top: 12px;
-  padding-bottom: 12px;
-  min-height: 48px;
-  background: transparent;
-  color: var(--ion-color-step-650, var(--ion-text-color-step-350, #595959));
-  z-index: 1;
-}
-.calendar-month-year-toggle.ion-focused::after {
-  opacity: 0.04;
+:host .datetime-calendar .calendar-action-buttons ion-item {
+  --padding-start: 20px;
 }
 
-.calendar-month-year-toggle ion-ripple-effect {
-  color: currentColor;
+:host .calendar-action-buttons ion-item,
+:host .calendar-action-buttons ion-button {
+  --color: var(--ion-color-step-650, #595959);
 }
 
-@media (any-hover: hover) {
-  .calendar-month-year-toggle.ion-activatable:not(.ion-focused):hover::after {
-    background: currentColor;
-    opacity: 0.04;
-  }
-}
 :host .calendar-days-of-week {
   -webkit-padding-start: 10px;
   padding-inline-start: 10px;
@@ -609,7 +617,7 @@ ion-picker {
   padding-inline-end: 10px;
   padding-top: 0px;
   padding-bottom: 0px;
-  color: var(--ion-color-step-500, var(--ion-text-color-step-500, gray));
+  color: var(--ion-color-step-500, gray);
   font-size: 0.875rem;
   line-height: 36px;
 }
@@ -671,7 +679,7 @@ ion-picker {
 }
 
 :host .time-header {
-  color: var(--ion-color-step-650, var(--ion-text-color-step-350, #595959));
+  color: var(--ion-color-step-650, #595959);
 }
 
 /**

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

@@ -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-toggle');
+            const monthYearButton = page.locator('.calendar-month-year ion-item');
             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);

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

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

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

@@ -401,14 +401,81 @@ 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`));
+});
+/**
+ * This behavior does not differ across
+ * directions.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('datetime: formatOptions'), () => {
+        test('should format header and time button', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime value="2022-02-01T16:30:00">
+          <span slot="title">Select Date</span>
+        </ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.formatOptions = {
+            time: { hour: '2-digit', minute: '2-digit' },
+            date: { day: '2-digit', month: 'long', era: 'short' },
+          }
+        </script>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            const headerDate = page.locator('ion-datetime .datetime-selected-date');
+            await expect(headerDate).toHaveText('February 01 AD');
+            const timeBody = page.locator('ion-datetime .time-body');
+            await expect(timeBody).toHaveText('04:30 PM');
+        });
+    });
+});
+/**
+ * This behavior does not differ across
+ * modes/directions.
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('datetime: formatOptions misconfiguration errors'), () => {
+        test('should log a warning if time zone is provided', async ({ page }) => {
+            const logs = [];
+            page.on('console', (msg) => {
+                if (msg.type() === 'warning') {
+                    logs.push(msg.text());
+                }
+            });
+            await page.setContent(`
+        <ion-datetime value="2022-02-01T16:30:00" presentation="date">
+          <span slot="title">Select Date</span>
+        </ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.formatOptions = {
+            date: { timeZone: 'UTC' },
+          }
+        </script>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            expect(logs.length).toBe(1);
+            expect(logs[0]).toContain('[Ionic Warning]: Datetime: "timeZone" and "timeZoneName" are not supported in "formatOptions".');
+        });
+        test('should log a warning if the required formatOptions are not provided for a presentation', async ({ page }) => {
+            const logs = [];
+            page.on('console', (msg) => {
+                if (msg.type() === 'warning') {
+                    logs.push(msg.text());
+                }
+            });
+            await page.setContent(`
+        <ion-datetime value="2022-02-01T16:30:00">
+          <span slot="title">Select Date</span>
+        </ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.formatOptions = {}
+        </script>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            expect(logs.length).toBe(1);
+            expect(logs[0]).toContain("[Ionic Warning]: Datetime: The 'date-time' presentation requires either a date or time object (or both) in formatOptions.");
         });
     });
 });

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

@@ -13,7 +13,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         });
         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 ion-picker-column-option');
+            const monthColumnItems = page.locator('ion-datetime .month-column .picker-item:not(.picker-item-empty)');
             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 ion-picker-column-option');
+            const monthColumnItems = page.locator('ion-datetime .month-column .picker-item:not(.picker-item-empty)');
             const datetime = page.locator('ion-datetime');
             const ionChange = await page.spyOnEvent('ionChange');
             await monthYearToggle.click();

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 { PickerColumn } from "../../../picker-column/picker-column";
-import { Picker } from "../../../picker/picker";
+import { PickerColumnInternal } from "../../../picker-column-internal/picker-column-internal";
+import { PickerInternal } from "../../../picker-internal/picker-internal";
 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, PickerColumn, Picker],
+            components: [Datetime, PickerColumnInternal, PickerInternal],
             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');
+        const columns = datetime.shadowRoot.querySelectorAll('ion-picker-column-internal');
         await expect(columns.length).toEqual(4);
         columns.forEach((column) => {
             expect(column.disabled).toBe(true);

package/dist/collection/components/datetime/test/format.spec.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { generateDayAriaLabel, getMonthAndDay, getFormattedHour, addTimePadding, getMonthAndYear, getLocalizedDayPeriod, getLocalizedTime, } from "../utils/format";
+import { generateDayAriaLabel, getFormattedHour, addTimePadding, getMonthAndYear, getLocalizedDayPeriod, getLocalizedTime, stripTimeZone, } from "../utils/format";
 describe('generateDayAriaLabel()', () => {
     it('should return Wednesday, May 12', () => {
         const reference = { month: 5, day: 12, year: 2021 };
@@ -24,20 +24,6 @@ describe('generateDayAriaLabel()', () => {
         expect(generateDayAriaLabel('en-US', false, reference)).toEqual('Saturday, April 1');
     });
 });
-describe('getMonthAndDay()', () => {
-    it('should return Tue, May 11', () => {
-        expect(getMonthAndDay('en-US', { month: 5, day: 11, year: 2021 })).toEqual('Tue, May 11');
-    });
-    it('should return mar, 11 may', () => {
-        expect(getMonthAndDay('es-ES', { month: 5, day: 11, year: 2021 })).toEqual('mar, 11 may');
-    });
-    it('should return Sat, Apr 1', () => {
-        expect(getMonthAndDay('en-US', { month: 4, day: 1, year: 2006 })).toEqual('Sat, Apr 1');
-    });
-    it('should return sáb, 1 abr', () => {
-        expect(getMonthAndDay('es-ES', { month: 4, day: 1, year: 2006 })).toEqual('sáb, 1 abr');
-    });
-});
 describe('getFormattedHour()', () => {
     it('should only add padding if using 24 hour time', () => {
         expect(getFormattedHour(1, 'h11')).toEqual('1');
@@ -121,4 +107,68 @@ describe('getLocalizedTime', () => {
         expect(getLocalizedTime('en-US', datetimeParts, 'h12')).toEqual('10:40 PM');
         expect(getLocalizedTime('en-US', datetimeParts, 'h23')).toEqual('22:40');
     });
+    it('should use formatOptions', () => {
+        const datetimeParts = {
+            day: 1,
+            month: 1,
+            year: 2022,
+            hour: 9,
+            minute: 40,
+        };
+        const formatOptions = {
+            hour: '2-digit',
+            minute: '2-digit',
+            dayPeriod: 'short',
+            day: '2-digit',
+        };
+        // Even though this method is intended to be used for time, the date may be displayed as well when passing formatOptions
+        expect(getLocalizedTime('en-US', datetimeParts, 'h12', formatOptions)).toEqual('01, 09:40 in the morning');
+    });
+    it('should override provided time zone with UTC', () => {
+        const datetimeParts = {
+            day: 1,
+            month: 1,
+            year: 2022,
+            hour: 9,
+            minute: 40,
+        };
+        const formatOptions = {
+            timeZone: 'Australia/Sydney',
+            timeZoneName: 'long',
+            hour: 'numeric',
+            minute: 'numeric',
+        };
+        expect(getLocalizedTime('en-US', datetimeParts, 'h12', formatOptions)).toEqual('9:40 AM');
+    });
+    it('should not include time zone name', () => {
+        const datetimeParts = {
+            day: 1,
+            month: 1,
+            year: 2022,
+            hour: 9,
+            minute: 40,
+        };
+        const formatOptions = {
+            timeZone: 'America/Los_Angeles',
+            timeZoneName: 'long',
+            hour: 'numeric',
+            minute: 'numeric',
+        };
+        expect(getLocalizedTime('en-US', datetimeParts, 'h12', formatOptions)).toEqual('9:40 AM');
+    });
+});
+describe('stripTimeZone', () => {
+    it('should remove the time zone name from the options and set the time zone to UTC', () => {
+        const formatOptions = {
+            timeZone: 'America/Los_Angeles',
+            timeZoneName: 'long',
+            hour: 'numeric',
+            minute: 'numeric',
+        };
+        expect(stripTimeZone(formatOptions)).toEqual({
+            timeZone: 'UTC',
+            hour: 'numeric',
+            minute: 'numeric',
+        });
+    });
 });

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

@@ -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" max="2022" min="2022"></ion-datetime>
+        <ion-datetime prefer-wheel="true" locale="ar-EG" presentation="date" value="2022-01-01"></ion-datetime>
       `, config);
             await page.locator('.datetime-ready').waitFor();
-            const datetimeYear = page.locator('ion-datetime .year-column ion-picker-column-option').nth(0);
+            const datetimeYear = page.locator('ion-datetime .year-column .picker-item[data-value="2022"]');
             await expect(datetimeYear).toHaveText('٢٠٢٢');
         });
     });

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

@@ -81,8 +81,8 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
                 const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
                 await page.click('.time-body');
                 await ionPopoverDidPresent.next();
-                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');
+                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)');
                 expect(await hours.count()).toBe(12);
                 expect(await minutes.count()).toBe(60);
             });
@@ -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:first-of-type ion-picker-column-option');
+            const hourPickerItems = page.locator('ion-datetime ion-picker-column-internal:first-of-type .picker-item:not(.picker-item-empty)');
             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:first-of-type ion-picker-column-option');
+            const hourPickerItems = page.locator('ion-datetime ion-picker-column-internal:first-of-type .picker-item:not(.picker-item-empty)');
             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', () => {
@@ -218,7 +218,7 @@ 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 ion-picker-column-option');
+                const monthColumnItems = page.locator('ion-datetime .month-column .picker-item:not(.picker-item-empty)');
                 const ionChange = await page.spyOnEvent('ionChange');
                 await page.locator('.datetime-ready').waitFor();
                 await monthColumnItems.nth(0).click(); // switch to January
@@ -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:nth-child(1) ion-picker-column-option');
+                const hours = page.locator('ion-popover ion-picker-column-internal:nth-child(1) .picker-item:not(.picker-item-empty)');
                 await expect(await hours.count()).toBe(4);
             });
         });

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

@@ -16,7 +16,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         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 > .calendar-month-year-toggle');
+            const pickerButton = page.locator('#date-time .calendar-month-year > ion-item');
             await pickerButton.click();
             await page.waitForChanges();
             await expect(datetimeFooter).not.toBeVisible();