@ionic/core 7.5.8-dev.11701876182.1e71e7a0 → 7.5.8-dev.11702056888.11188f48

package/dist/cjs/{overlays-27a6fb16.js → overlays-e8e05b0e.js}

@@ -3,9 +3,10 @@
  */
 'use strict';
 
-const index = require('./index-c8d52405.js');
+const index = require('./index-306a7476.js');
 const ionicGlobal = require('./ionic-global-f4a2093b.js');
 const frameworkDelegate = require('./framework-delegate-1c29b14a.js');
+const gestureController = require('./gesture-controller-9436f482.js');
 const hardwareBackButton = require('./hardware-back-button-76833cac.js');
 const helpers = require('./helpers-76bb7efb.js');
 const index$1 = require('./index-5915f9b3.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 {
@@ -564,7 +571,6 @@ const safeCall = (handler, arg) => {
 };
 const BACKDROP = 'backdrop';
 const GESTURE = 'gesture';
-const OVERLAY_GESTURE_PRIORITY = 39;
 /**
  * Creates a delegate controller.
  *
@@ -694,7 +700,6 @@ const createTriggerController = () => {
 
 exports.BACKDROP = BACKDROP;
 exports.GESTURE = GESTURE;
-exports.OVERLAY_GESTURE_PRIORITY = OVERLAY_GESTURE_PRIORITY;
 exports.actionSheetController = actionSheetController;
 exports.activeAnimations = activeAnimations;
 exports.alertController = alertController;

package/dist/cjs/{swipe-back-2a858bbd.js → swipe-back-b8f2330b.js}

@@ -5,8 +5,8 @@
 
 const helpers = require('./helpers-76bb7efb.js');
 const dir = require('./dir-94c21456.js');
-const index = require('./index-d1b59ffa.js');
-require('./gesture-controller-c40c045a.js');
+const index = require('./index-ee07ed59.js');
+require('./gesture-controller-9436f482.js');
 
 const createSwipeBackGesture = (el, canStartHandler, onStartHandler, onMoveHandler, onEndHandler) => {
     const win = el.ownerDocument.defaultView;

package/dist/collection/collection-manifest.json

@@ -24,8 +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/picker-column/picker-column.js",
+    "components/picker/picker.js",
     "components/datetime-button/datetime-button.js",
     "components/fab/fab.js",
     "components/fab-button/fab-button.js",
@@ -55,8 +55,9 @@
     "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-option/picker-column-option.js",
+    "components/picker-legacy/picker.js",
+    "components/picker-legacy-column/picker-column.js",
     "components/popover/popover.js",
     "components/progress-bar/progress-bar.js",
     "components/range/range.js",
@@ -287,8 +288,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/checkbox/checkbox.ios.css

@@ -163,6 +163,12 @@
 }
 
 .label-text-wrapper {
+  /**
+   * This ensures that double tapping this text
+   * clicks the <label> and focuses the checkbox
+   * when a screen reader is enabled.
+   */
+  pointer-events: none;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;

package/dist/collection/components/checkbox/checkbox.js

@@ -13,7 +13,6 @@ import { getIonMode } from "../../global/ionic-global";
  * @slot - The label text to associate with the checkbox. Use the "labelPlacement" property to control where the label is placed relative to the checkbox.
  *
  * @part container - The container for the checkbox mark.
- * @part label - The label text describing the checkbox.
  * @part mark - The checkmark used to indicate the checked state.
  */
 export class Checkbox {
@@ -81,8 +80,6 @@ export class Checkbox {
     emitStyle() {
         const style = {
             'interactive-disabled': this.disabled,
-            // TODO(FW-3100): remove this
-            legacy: !!this.legacy,
         };
         // TODO(FW-3100): remove this
         if (this.legacyFormController.hasLegacyControl()) {
@@ -118,7 +115,7 @@ export class Checkbox {
             }), onClick: this.onClick }, h("label", { class: "checkbox-wrapper" }, h("input", Object.assign({ type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, inheritedAttributes)), h("div", { class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': el.textContent === '',
-            }, part: "label" }, h("slot", null)), h("div", { class: "native-wrapper" }, h("svg", { class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
+            } }, h("slot", null)), h("div", { class: "native-wrapper" }, h("svg", { class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
     }
     // TODO(FW-3100): remove this
     renderLegacyCheckbox() {

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

@@ -163,6 +163,12 @@
 }
 
 .label-text-wrapper {
+  /**
+   * This ensures that double tapping this text
+   * clicks the <label> and focuses the checkbox
+   * when a screen reader is enabled.
+   */
+  pointer-events: none;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;

package/dist/collection/components/checkbox/test/checkbox.spec.js

@@ -3,20 +3,6 @@
  */
 import { newSpecPage } from "@stencil/core/testing";
 import { Checkbox } from "../checkbox";
-describe('ion-checkbox: shadow parts', () => {
-    it('should render the checkbox with shadow parts', async () => {
-        const page = await newSpecPage({
-            components: [Checkbox],
-            html: `
-        <ion-checkbox>Checkbox</ion-checkbox>
-      `,
-        });
-        const checkbox = page.body.querySelector('ion-checkbox');
-        expect(checkbox).toHaveShadowPart('container');
-        expect(checkbox).toHaveShadowPart('label');
-        expect(checkbox).toHaveShadowPart('mark');
-    });
-});
 describe('ion-checkbox: disabled', () => {
     it('clicking disabled checkbox should not toggle checked state', async () => {
         const page = await newSpecPage({

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

@@ -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;
@@ -94,7 +83,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,24 +306,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;
-  width: auto;
-}
-
-:host .calendar-action-buttons ion-item ion-icon {
-  -webkit-padding-start: 4px;
-  padding-inline-start: 4px;
-  -webkit-padding-end: 0;
-  padding-inline-end: 0;
-  padding-top: 0;
-  padding-bottom: 0;
+  --background: transparent;
 }
 
 :host .calendar-days-of-week {
@@ -516,8 +489,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;
 }
 
 /**
@@ -606,15 +637,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`;