@ionic/core 7.5.7-dev.11700601905.13f94170 → 7.5.7-dev.11701113479.149fdab6

package/dist/cjs/{overlays-2ffc5f27.js → overlays-dbb71984.js}

@@ -6,6 +6,7 @@
 const index = require('./index-306a7476.js');
 const ionicGlobal = require('./ionic-global-ea2901a3.js');
 const frameworkDelegate = require('./framework-delegate-c0873a6f.js');
+const gestureController = require('./gesture-controller-d6a3f907.js');
 const hardwareBackButton = require('./hardware-back-button-b67c8e75.js');
 const helpers = require('./helpers-ea4ccbcb.js');
 const index$1 = require('./index-cc7dfb7c.js');
@@ -30,7 +31,10 @@ const alertController = /*@__PURE__*/ createController('ion-alert');
 const actionSheetController = /*@__PURE__*/ createController('ion-action-sheet');
 const loadingController = /*@__PURE__*/ createController('ion-loading');
 const modalController = /*@__PURE__*/ createController('ion-modal');
-const pickerController = /*@__PURE__*/ createController('ion-picker');
+/**
+ * @deprecated Use the inline ion-picker component instead.
+ */
+const pickerController = /*@__PURE__*/ createController('ion-picker-legacy');
 const popoverController = /*@__PURE__*/ createController('ion-popover');
 const toastController = /*@__PURE__*/ createController('ion-toast');
 /**
@@ -140,7 +144,7 @@ const focusLastDescendant = (ref, overlay) => {
  * Should NOT include: Toast
  */
 const trapKeyboardFocus = (ev, doc) => {
-  const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover');
+  const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover');
   const target = ev.target;
   /**
    * If no active overlay, ignore this event.
@@ -325,7 +329,7 @@ const dismissOverlay = (doc, data, role, overlayTag, id) => {
  */
 const getOverlays = (doc, selector) => {
   if (selector === undefined) {
-    selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover,ion-toast';
+    selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover,ion-toast';
   }
   return Array.from(doc.querySelectorAll(selector)).filter((c) => c.overlayIndex > 0);
 };
@@ -391,6 +395,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
     return;
   }
   setRootAriaHidden(true);
+  document.body.classList.add(gestureController.BACKDROP_NO_SCROLL);
   overlay.presented = true;
   overlay.willPresent.emit();
   (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
@@ -453,12 +458,14 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
   if (!overlay.presented) {
     return false;
   }
+  const lastOverlay = index.doc !== undefined && getPresentedOverlays(index.doc).length === 1;
   /**
    * If this is the last visible overlay then
    * we want to re-add the root to the accessibility tree.
    */
-  if (index.doc !== undefined && getPresentedOverlays(index.doc).length === 1) {
+  if (lastOverlay) {
     setRootAriaHidden(false);
+    document.body.classList.remove(gestureController.BACKDROP_NO_SCROLL);
   }
   overlay.presented = false;
   try {

package/dist/cjs/{swipe-back-d0412fb6.js → swipe-back-a6dc6e5d.js}

@@ -5,8 +5,8 @@
 
 const helpers = require('./helpers-ea4ccbcb.js');
 const dir = require('./dir-f1e0ca26.js');
-const index = require('./index-0ee995e4.js');
-require('./gesture-controller-b46721be.js');
+const index = require('./index-0f8b33f8.js');
+require('./gesture-controller-d6a3f907.js');
 
 const createSwipeBackGesture = (el, canStartHandler, onStartHandler, onMoveHandler, onEndHandler) => {
   const win = el.ownerDocument.defaultView;

package/dist/collection/collection-manifest.json

@@ -24,6 +24,8 @@
     "components/col/col.js",
     "components/content/content.js",
     "components/datetime/datetime.js",
+    "components/picker-column-internal/picker-column-internal.js",
+    "components/picker-internal/picker-internal.js",
     "components/datetime-button/datetime-button.js",
     "components/fab/fab.js",
     "components/fab-button/fab-button.js",
@@ -53,10 +55,8 @@
     "components/nav/nav.js",
     "components/nav-link/nav-link.js",
     "components/note/note.js",
-    "components/picker/picker.js",
-    "components/picker-column/picker-column.js",
-    "components/picker-column-internal/picker-column-internal.js",
-    "components/picker-internal/picker-internal.js",
+    "components/picker-column-legacy/picker-column.js",
+    "components/picker-legacy/picker.js",
     "components/popover/popover.js",
     "components/progress-bar/progress-bar.js",
     "components/range/range.js",
@@ -287,8 +287,8 @@
     {
       "components": [
         "ion-datetime",
-        "ion-picker",
-        "ion-picker-column"
+        "ion-picker-legacy",
+        "ion-picker-legacy-column"
       ]
     },
     {

package/dist/collection/components/backdrop/backdrop.js

@@ -2,25 +2,13 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { GESTURE_CONTROLLER } from "../../utils/gesture/index";
 import { getIonMode } from "../../global/ionic-global";
 export class Backdrop {
   constructor() {
-    this.blocker = GESTURE_CONTROLLER.createBlocker({
-      disableScroll: true,
-    });
     this.visible = true;
     this.tappable = true;
     this.stopPropagation = true;
   }
-  connectedCallback() {
-    if (this.stopPropagation) {
-      this.blocker.block();
-    }
-  }
-  disconnectedCallback() {
-    this.blocker.unblock();
-  }
   onMouseDown(ev) {
     this.emitTap(ev);
   }

package/dist/collection/components/content/content.css

@@ -97,10 +97,6 @@
   color: var(--ion-color-contrast);
 }
 
-:host(.outer-content) {
-  --background: var(--ion-color-step-50, #f2f2f2);
-}
-
 #background-content {
   left: 0px;
   right: 0px;

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

@@ -94,7 +94,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 +317,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 +500,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 +648,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

@@ -704,24 +704,14 @@ export class Datetime {
    * or modal that the datetime was presented in.
    */
   async confirm(closeOverlay = false) {
-    const { isCalendarPicker, activeParts, preferWheel, workingParts } = this;
+    const { isCalendarPicker, activeParts } = this;
     /**
      * We only update the value if the presentation is not a calendar picker.
      */
     if (activeParts !== undefined || !isCalendarPicker) {
       const activePartsIsArray = Array.isArray(activeParts);
       if (activePartsIsArray && activeParts.length === 0) {
-        if (preferWheel) {
-          /**
-           * If the datetime is using a wheel picker, but the
-           * active parts are empty, then the user has confirmed the
-           * initial value (working parts) presented to them.
-           */
-          this.setValue(convertDataToISO(workingParts));
-        }
-        else {
-          this.setValue(undefined);
-        }
+        this.setValue(undefined);
       }
       else {
         this.setValue(convertDataToISO(activeParts));
@@ -925,18 +915,9 @@ export class Datetime {
     const yearValues = (this.parsedYearValues = convertToArrayOfNumbers(this.yearValues));
     const dayValues = (this.parsedDayValues = convertToArrayOfNumbers(this.dayValues));
     const todayParts = (this.todayParts = parseDate(getToday()));
+    this.defaultParts = getClosestValidDate(todayParts, monthValues, dayValues, yearValues, hourValues, minuteValues);
     this.processMinParts();
     this.processMaxParts();
-    this.defaultParts = getClosestValidDate({
-      refParts: todayParts,
-      monthValues,
-      dayValues,
-      yearValues,
-      hourValues,
-      minuteValues,
-      minParts: this.minParts,
-      maxParts: this.maxParts,
-    });
     this.processValue(this.value);
     this.emitStyle();
   }
@@ -1004,7 +985,7 @@ export class Datetime {
       : this.renderIndividualDatePickerColumns(forcePresentation);
   }
   renderCombinedDatePickerColumn() {
-    const { defaultParts, workingParts, locale, minParts, maxParts, todayParts, isDateEnabled } = this;
+    const { defaultParts, disabled, workingParts, locale, minParts, maxParts, todayParts, isDateEnabled } = this;
     const activePart = this.getActivePartsWithFallback();
     /**
      * By default, generate a range of 3 months:
@@ -1055,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, items: items, value: todayString, onIonChange: (ev) => {
+    return (h("ion-picker-column-internal", { class: "date-column", color: this.color, disabled: disabled, items: items, 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
@@ -1137,9 +1118,9 @@ export class Datetime {
     if (days.length === 0) {
       return [];
     }
-    const { workingParts } = this;
+    const { disabled, workingParts } = this;
     const activePart = this.getActivePartsWithFallback();
-    return (h("ion-picker-column-internal", { class: "day-column", color: this.color, items: days, value: (_a = (workingParts.day !== null ? workingParts.day : this.defaultParts.day)) !== null && _a !== void 0 ? _a : undefined, onIonChange: (ev) => {
+    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) => {
         // 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
@@ -1159,9 +1140,9 @@ export class Datetime {
     if (months.length === 0) {
       return [];
     }
-    const { workingParts } = this;
+    const { disabled, workingParts } = this;
     const activePart = this.getActivePartsWithFallback();
-    return (h("ion-picker-column-internal", { class: "month-column", color: this.color, items: months, value: workingParts.month, onIonChange: (ev) => {
+    return (h("ion-picker-column-internal", { class: "month-column", color: this.color, disabled: disabled, items: months, 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
@@ -1181,9 +1162,9 @@ export class Datetime {
     if (years.length === 0) {
       return [];
     }
-    const { workingParts } = this;
+    const { disabled, workingParts } = this;
     const activePart = this.getActivePartsWithFallback();
-    return (h("ion-picker-column-internal", { class: "year-column", color: this.color, items: years, value: workingParts.year, onIonChange: (ev) => {
+    return (h("ion-picker-column-internal", { class: "year-column", color: this.color, disabled: disabled, items: years, 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
@@ -1222,35 +1203,35 @@ export class Datetime {
     ];
   }
   renderHourPickerColumn(hoursData) {
-    const { workingParts } = this;
+    const { disabled, workingParts } = this;
     if (hoursData.length === 0)
       return [];
     const activePart = this.getActivePartsWithFallback();
-    return (h("ion-picker-column-internal", { color: this.color, value: activePart.hour, items: hoursData, numericInput: true, onIonChange: (ev) => {
+    return (h("ion-picker-column-internal", { color: this.color, disabled: disabled, value: activePart.hour, items: hoursData, 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();
       } }));
   }
   renderMinutePickerColumn(minutesData) {
-    const { workingParts } = this;
+    const { disabled, workingParts } = this;
     if (minutesData.length === 0)
       return [];
     const activePart = this.getActivePartsWithFallback();
-    return (h("ion-picker-column-internal", { color: this.color, value: activePart.minute, items: minutesData, numericInput: true, onIonChange: (ev) => {
+    return (h("ion-picker-column-internal", { color: this.color, disabled: disabled, value: activePart.minute, items: minutesData, 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();
       } }));
   }
   renderDayPeriodPickerColumn(dayPeriodData) {
-    const { workingParts } = this;
+    const { disabled, workingParts } = this;
     if (dayPeriodData.length === 0) {
       return [];
     }
     const activePart = this.getActivePartsWithFallback();
     const isDayPeriodRTL = isLocaleDayPeriodRTL(this.locale);
-    return (h("ion-picker-column-internal", { style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, value: activePart.ampm, items: dayPeriodData, onIonChange: (ev) => {
+    return (h("ion-picker-column-internal", { style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, items: dayPeriodData, 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 }));
@@ -1276,26 +1257,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);
     }))));
   }

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

@@ -94,7 +94,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 +317,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 +500,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 +643,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`));
+    });
+  });
 });