@ionic/core 7.5.8-dev.11701894917.1c1465bd → 7.5.8-dev.11702074871.1238046f

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

@@ -977,7 +977,7 @@ export class Datetime {
         const renderArray = forcePresentation === 'time-date'
             ? [this.renderTimePickerColumns(forcePresentation), this.renderDatePickerColumns(forcePresentation)]
             : [this.renderDatePickerColumns(forcePresentation), this.renderTimePickerColumns(forcePresentation)];
-        return h("ion-picker-internal", null, renderArray);
+        return h("ion-picker", null, renderArray);
     }
     renderDatePickerColumns(forcePresentation) {
         return forcePresentation === 'date-time' || forcePresentation === 'time-date'
@@ -1036,7 +1036,7 @@ export class Datetime {
         const todayString = workingParts.day !== null
             ? `${workingParts.year}-${workingParts.month}-${workingParts.day}`
             : `${defaultParts.year}-${defaultParts.month}-${defaultParts.day}`;
-        return (h("ion-picker-column-internal", { class: "date-column", color: this.color, disabled: disabled, items: items, value: todayString, onIonChange: (ev) => {
+        return (h("ion-picker-column", { class: "date-column", color: this.color, disabled: disabled, value: todayString, onIonChange: (ev) => {
                 // TODO(FW-1823) Remove this when iOS 14 support is dropped.
                 // Due to a Safari 14 issue we need to destroy
                 // the scroll listener before we update state
@@ -1052,7 +1052,7 @@ export class Datetime {
                 // the working parts have been updated.
                 this.initializeCalendarListener();
                 ev.stopPropagation();
-            } }));
+            } }, items.map((item) => (h("ion-picker-column-option", { part: item.value === todayString ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: item.value, disabled: item.disabled, value: item.value }, item.text)))));
     }
     renderIndividualDatePickerColumns(forcePresentation) {
         const { workingParts, isDateEnabled } = this;
@@ -1120,7 +1120,8 @@ export class Datetime {
         }
         const { disabled, workingParts } = this;
         const activePart = this.getActivePartsWithFallback();
-        return (h("ion-picker-column-internal", { class: "day-column", color: this.color, disabled: disabled, items: days, value: (_a = (workingParts.day !== null ? workingParts.day : this.defaultParts.day)) !== null && _a !== void 0 ? _a : undefined, onIonChange: (ev) => {
+        const pickerColumnValue = (_a = (workingParts.day !== null ? workingParts.day : this.defaultParts.day)) !== null && _a !== void 0 ? _a : undefined;
+        return (h("ion-picker-column", { class: "day-column", color: this.color, disabled: disabled, value: pickerColumnValue, onIonChange: (ev) => {
                 // TODO(FW-1823) Remove this when iOS 14 support is dropped.
                 // Due to a Safari 14 issue we need to destroy
                 // the scroll listener before we update state
@@ -1134,7 +1135,7 @@ export class Datetime {
                 // the working parts have been updated.
                 this.initializeCalendarListener();
                 ev.stopPropagation();
-            } }));
+            } }, days.map((day) => (h("ion-picker-column-option", { part: day.value === pickerColumnValue ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: day.value, disabled: day.disabled, value: day.value }, day.text)))));
     }
     renderMonthPickerColumn(months) {
         if (months.length === 0) {
@@ -1142,7 +1143,7 @@ export class Datetime {
         }
         const { disabled, workingParts } = this;
         const activePart = this.getActivePartsWithFallback();
-        return (h("ion-picker-column-internal", { class: "month-column", color: this.color, disabled: disabled, items: months, value: workingParts.month, onIonChange: (ev) => {
+        return (h("ion-picker-column", { class: "month-column", color: this.color, disabled: disabled, value: workingParts.month, onIonChange: (ev) => {
                 // TODO(FW-1823) Remove this when iOS 14 support is dropped.
                 // Due to a Safari 14 issue we need to destroy
                 // the scroll listener before we update state
@@ -1156,7 +1157,7 @@ export class Datetime {
                 // the working parts have been updated.
                 this.initializeCalendarListener();
                 ev.stopPropagation();
-            } }));
+            } }, months.map((month) => (h("ion-picker-column-option", { part: month.value === workingParts.month ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: month.value, disabled: month.disabled, value: month.value }, month.text)))));
     }
     renderYearPickerColumn(years) {
         if (years.length === 0) {
@@ -1164,7 +1165,7 @@ export class Datetime {
         }
         const { disabled, workingParts } = this;
         const activePart = this.getActivePartsWithFallback();
-        return (h("ion-picker-column-internal", { class: "year-column", color: this.color, disabled: disabled, items: years, value: workingParts.year, onIonChange: (ev) => {
+        return (h("ion-picker-column", { class: "year-column", color: this.color, disabled: disabled, value: workingParts.year, onIonChange: (ev) => {
                 // TODO(FW-1823) Remove this when iOS 14 support is dropped.
                 // Due to a Safari 14 issue we need to destroy
                 // the scroll listener before we update state
@@ -1178,7 +1179,7 @@ export class Datetime {
                 // the working parts have been updated.
                 this.initializeCalendarListener();
                 ev.stopPropagation();
-            } }));
+            } }, years.map((year) => (h("ion-picker-column-option", { part: year.value === workingParts.year ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: year.value, disabled: year.disabled, value: year.value }, year.text)))));
     }
     renderTimePickerColumns(forcePresentation) {
         if (['date', 'month', 'month-year', 'year'].includes(forcePresentation)) {
@@ -1207,22 +1208,22 @@ export class Datetime {
         if (hoursData.length === 0)
             return [];
         const activePart = this.getActivePartsWithFallback();
-        return (h("ion-picker-column-internal", { color: this.color, disabled: disabled, value: activePart.hour, items: hoursData, numericInput: true, onIonChange: (ev) => {
+        return (h("ion-picker-column", { color: this.color, disabled: disabled, value: activePart.hour, numericInput: true, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { hour: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { hour: ev.detail.value }));
                 ev.stopPropagation();
-            } }));
+            } }, hoursData.map((hour) => (h("ion-picker-column-option", { part: hour.value === activePart.hour ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: hour.value, disabled: hour.disabled, value: hour.value }, hour.text)))));
     }
     renderMinutePickerColumn(minutesData) {
         const { disabled, workingParts } = this;
         if (minutesData.length === 0)
             return [];
         const activePart = this.getActivePartsWithFallback();
-        return (h("ion-picker-column-internal", { color: this.color, disabled: disabled, value: activePart.minute, items: minutesData, numericInput: true, onIonChange: (ev) => {
+        return (h("ion-picker-column", { color: this.color, disabled: disabled, value: activePart.minute, numericInput: true, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { minute: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { minute: ev.detail.value }));
                 ev.stopPropagation();
-            } }));
+            } }, minutesData.map((minute) => (h("ion-picker-column-option", { part: minute.value === activePart.minute ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: minute.value, disabled: minute.disabled, value: minute.value }, minute.text)))));
     }
     renderDayPeriodPickerColumn(dayPeriodData) {
         const { disabled, workingParts } = this;
@@ -1231,12 +1232,12 @@ export class Datetime {
         }
         const activePart = this.getActivePartsWithFallback();
         const isDayPeriodRTL = isLocaleDayPeriodRTL(this.locale);
-        return (h("ion-picker-column-internal", { style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, items: dayPeriodData, onIonChange: (ev) => {
+        return (h("ion-picker-column", { style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, onIonChange: (ev) => {
                 const hour = calculateHourFromAMPM(workingParts, ev.detail.value);
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm: ev.detail.value, hour }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { ampm: ev.detail.value, hour }));
                 ev.stopPropagation();
-            } }));
+            } }, dayPeriodData.map((dayPeriod) => (h("ion-picker-column-option", { part: dayPeriod.value === activePart.ampm ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: dayPeriod.value, disabled: dayPeriod.disabled, value: dayPeriod.value }, dayPeriod.text)))));
     }
     renderWheelView(forcePresentation) {
         const { locale } = this;
@@ -1422,7 +1423,7 @@ export class Datetime {
                      * This will correctly scroll the element position to the correct time value,
                      * before the popover is fully presented.
                      */
-                    const cols = ev.target.querySelectorAll('ion-picker-column-internal');
+                    const cols = ev.target.querySelectorAll('ion-picker-column');
                     // TODO (FW-615): Potentially remove this when intersection observers are fixed in picker column
                     cols.forEach((col) => col.scrollActiveItemIntoView());
                 }, style: {
@@ -2350,3 +2351,5 @@ export class Datetime {
     }
 }
 let datetimeIds = 0;
+const WHEEL_ITEM_PART = 'wheel-item';
+const WHEEL_ITEM_ACTIVE_PART = `active`;

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

@@ -61,6 +61,8 @@
    *
    * @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`.
@@ -71,19 +73,6 @@
   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;
@@ -562,6 +551,12 @@ ion-picker-column-internal {
   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);
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

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 .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/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/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"></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.waitForSelector('.datetime-ready');
-            const datetimeYear = page.locator('ion-datetime .year-column .picker-item[data-value="2022"]');
+            const datetimeYear = page.locator('ion-datetime .year-column ion-picker-column-option').nth(0);
             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-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);
             });
@@ -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', () => {
@@ -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 .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.waitForSelector('.datetime-ready');
                 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-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/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.waitForSelector('.datetime-ready');
-                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.waitForSelector('.datetime-ready');
-                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.waitForSelector('.datetime-ready');
-                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.waitForSelector('.datetime-ready');
-                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.waitForSelector('.datetime-ready');
                 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.waitForSelector('.datetime-ready');
                 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.waitForSelector('.datetime-ready');
                 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.waitForSelector('.datetime-ready');
-                    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.waitForSelector('.datetime-ready');
-                    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.waitForSelector('.datetime-ready');
-                    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.waitForSelector('.datetime-ready');
-                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.waitForSelector('.datetime-ready');
-                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.waitForSelector('.datetime-ready');
-                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.waitForSelector('.datetime-ready');
-                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.waitForSelector('.datetime-ready');
-                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.waitForSelector('.datetime-ready');
                 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.waitForSelector('.datetime-ready');
-                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.waitForSelector('.datetime-ready');
-                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.waitForSelector('.datetime-ready');
                 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.waitForSelector('.datetime-ready');
-                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.waitForSelector('.datetime-ready');
-                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.waitForSelector('.datetime-ready');
-                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.waitForSelector('.datetime-ready');
-                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.waitForSelector('.datetime-ready');
-                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.waitForSelector('.datetime-ready');
                 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.waitForSelector('.datetime-ready');
-                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.waitForSelector('.datetime-ready');
-                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();
@@ -53,7 +53,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
             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 }) => {