@ionic/core 7.5.8-dev.11701791090.18ebbea8 → 7.5.8-dev.11701806358.1ca1b519

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

@@ -71,19 +71,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;
@@ -94,7 +81,7 @@ ion-picker-column-internal {
 }
 
 /**
- * This ensures that the picker is apppropriately
+ * This ensures that the picker is appropriately
  * sized and never truncates the text.
  */
 :host(.datetime-size-fixed.datetime-prefer-wheel) {
@@ -317,23 +304,8 @@ ion-picker-column-internal {
   justify-content: space-between;
 }
 
-:host .calendar-action-buttons ion-item,
 :host .calendar-action-buttons ion-button {
-  --background: translucent;
-}
-
-:host .calendar-action-buttons ion-item ion-label {
-  display: flex;
-  align-items: center;
-}
-
-: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;
+  --background: transparent;
 }
 
 :host .calendar-days-of-week {
@@ -515,8 +487,66 @@ ion-picker-column-internal {
   position: static;
 }
 
-:host(.show-month-and-year) .calendar-action-buttons ion-item {
-  --color: var(--ion-color-base);
+: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;
 }
 
 /**
@@ -605,15 +635,31 @@ ion-picker-column-internal {
   margin-top: 10px;
 }
 
-:host .calendar-action-buttons ion-item {
-  --padding-start: 16px;
-  --background-hover: transparent;
-  --background-activated: transparent;
+.calendar-month-year-toggle {
+  -webkit-padding-start: 16px;
+  padding-inline-start: 16px;
+  -webkit-padding-end: 16px;
+  padding-inline-end: 16px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  min-height: 44px;
   font-size: min(1rem, 25.6px);
   font-weight: 600;
 }
+.calendar-month-year-toggle.ion-focused::after {
+  opacity: 0.15;
+}
+
+.calendar-month-year-toggle #toggle-wrapper {
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
+  -webkit-margin-end: 8px;
+  margin-inline-end: 8px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
 
-:host .calendar-action-buttons ion-item ion-icon,
+:host .calendar-action-buttons .calendar-month-year-toggle ion-icon,
 :host .calendar-action-buttons ion-buttons ion-button {
   color: var(--ion-color-base);
 }

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;
@@ -1257,26 +1258,11 @@ export class Datetime {
         const nextMonthDisabled = disabled || isNextMonthDisabled(this.workingParts, this.maxParts);
         // don't use the inheritAttributes util because it removes dir from the host, and we still need that
         const hostDir = this.el.getAttribute('dir') || undefined;
-        return (h("div", { class: "calendar-header" }, h("div", { class: "calendar-action-buttons" }, h("div", { class: "calendar-month-year" }, h("ion-item", { part: "month-year-button", ref: (el) => (this.monthYearToggleItemRef = el), button: true, "aria-label": "Show year picker", detail: false, lines: "none", disabled: disabled, onClick: () => {
-                var _a;
-                this.toggleMonthAndYearView();
-                /**
-                 * TODO: FW-3547
-                 *
-                 * Currently there is not a way to set the aria-label on the inner button
-                 * on the `ion-item` and have it be reactive to changes. This is a workaround
-                 * until we either refactor `ion-item` to a button or Stencil adds a way to
-                 * have reactive props for built-in properties, such as `aria-label`.
-                 */
-                const { monthYearToggleItemRef } = this;
-                if (monthYearToggleItemRef) {
-                    const btn = (_a = monthYearToggleItemRef.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.item-native');
-                    if (btn) {
-                        const monthYearAriaLabel = this.showMonthAndYear ? 'Hide year picker' : 'Show year picker';
-                        btn.setAttribute('aria-label', monthYearAriaLabel);
-                    }
-                }
-            } }, h("ion-label", null, getMonthAndYear(this.locale, this.workingParts), h("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? expandedIcon : collapsedIcon, lazy: false, flipRtl: true })))), h("div", { class: "calendar-next-prev" }, h("ion-buttons", null, h("ion-button", { "aria-label": "Previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth() }, h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronBack, lazy: false, flipRtl: true })), h("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth() }, h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronForward, lazy: false, flipRtl: true }))))), h("div", { class: "calendar-days-of-week", "aria-hidden": "true" }, getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map((d) => {
+        return (h("div", { class: "calendar-header" }, h("div", { class: "calendar-action-buttons" }, h("div", { class: "calendar-month-year" }, h("button", { class: {
+                'calendar-month-year-toggle': true,
+                'ion-activatable': true,
+                'ion-focusable': true,
+            }, part: "month-year-button", disabled: disabled, "aria-label": this.showMonthAndYear ? 'Hide year picker' : 'Show year picker', onClick: () => this.toggleMonthAndYearView() }, h("span", { id: "toggle-wrapper" }, getMonthAndYear(this.locale, this.workingParts), h("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? expandedIcon : collapsedIcon, lazy: false, flipRtl: true })), mode === 'md' && h("ion-ripple-effect", null))), h("div", { class: "calendar-next-prev" }, h("ion-buttons", null, h("ion-button", { "aria-label": "Previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth() }, h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronBack, lazy: false, flipRtl: true })), h("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth() }, h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: chevronForward, lazy: false, flipRtl: true }))))), h("div", { class: "calendar-days-of-week", "aria-hidden": "true" }, getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map((d) => {
             return h("div", { class: "day-of-week" }, d);
         }))));
     }
@@ -1437,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: {
@@ -2365,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

@@ -71,19 +71,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;
@@ -94,7 +81,7 @@ ion-picker-column-internal {
 }
 
 /**
- * This ensures that the picker is apppropriately
+ * This ensures that the picker is appropriately
  * sized and never truncates the text.
  */
 :host(.datetime-size-fixed.datetime-prefer-wheel) {
@@ -317,23 +304,8 @@ ion-picker-column-internal {
   justify-content: space-between;
 }
 
-:host .calendar-action-buttons ion-item,
 :host .calendar-action-buttons ion-button {
-  --background: translucent;
-}
-
-:host .calendar-action-buttons ion-item ion-label {
-  display: flex;
-  align-items: center;
-}
-
-: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;
+  --background: transparent;
 }
 
 :host .calendar-days-of-week {
@@ -515,8 +487,66 @@ ion-picker-column-internal {
   position: static;
 }
 
-:host(.show-month-and-year) .calendar-action-buttons ion-item {
-  --color: var(--ion-color-base);
+: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;
 }
 
 /**
@@ -600,15 +630,36 @@ ion-picker-column-internal {
   font-size: 2.125rem;
 }
 
-:host .datetime-calendar .calendar-action-buttons ion-item {
-  --padding-start: 20px;
-}
-
-:host .calendar-action-buttons ion-item,
 :host .calendar-action-buttons ion-button {
   --color: var(--ion-color-step-650, #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, #595959);
+  z-index: 1;
+}
+.calendar-month-year-toggle.ion-focused::after {
+  opacity: 0.04;
+}
+
+.calendar-month-year-toggle ion-ripple-effect {
+  color: currentColor;
+}
+
+@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;

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 ion-item');
+            const monthYearButton = page.locator('.calendar-month-year-toggle');
             const prevButton = page.locator('.calendar-next-prev ion-button:nth-child(1)');
             const nextButton = page.locator('.calendar-next-prev ion-button:nth-child(2)');
             await page.keyboard.press(tabKey);

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

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

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

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

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

@@ -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('٢٠٢٢');
         });
     });