@ionic/core 8.8.20-dev.11787158518.168a2fea → 8.8.20-dev.11788449221.155f9f1e

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

@@ -1,6 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import caretLeftRegular from "@phosphor-icons/core/assets/regular/caret-left.svg";
+import caretRightRegular from "@phosphor-icons/core/assets/regular/caret-right.svg";
 import { Host, h, writeTask } from "@stencil/core";
 import { startFocusVisible } from "../../utils/focus-visible";
 import { getElementRoot, raf, renderHiddenInput } from "../../utils/helpers";
@@ -10,7 +12,7 @@ import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses } from "../../utils/theme";
 import { caretDownSharp, caretUpSharp, chevronBack, chevronDown, chevronForward } from "ionicons/icons";
 import { config } from "../../global/config";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonMode, getIonTheme } from "../../global/ionic-global";
 import { isSameDay, warnIfValueOutOfBounds, isBefore, isAfter } from "./utils/comparison";
 import { generateMonths, getDaysOfMonth, getDaysOfWeek, getToday, getMonthColumnData, getDayColumnData, getYearColumnData, getTimeColumnsData, getCombinedDateColumnData, } from "./utils/data";
 import { formatValue, getLocalizedDateTime, getLocalizedTime, getMonthAndYear } from "./utils/format";
@@ -20,7 +22,8 @@ import { clampDate, convertToArrayOfNumbers, getPartsFromCalendarDay, parseAmPm,
 import { getCalendarDayState, getHighlightStyles, isDayDisabled, isMonthDisabled, isNextMonthDisabled, isPrevMonthDisabled, } from "./utils/state";
 import { checkForPresentationFormatMismatch, warnIfTimeZoneProvided } from "./utils/validate";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  *
  * @slot title - The title of the datetime.
  * @slot buttons - The buttons in the datetime.
@@ -54,364 +57,814 @@ import { checkForPresentationFormatMismatch, warnIfTimeZoneProvided } from "./ut
  * @part datetime-selected-date - The element that contains the selected date.
  */
 export class Datetime {
-    inputId = `ion-dt-${datetimeIds++}`;
-    calendarBodyRef;
-    popoverRef;
-    intersectionTrackerRef;
-    clearFocusVisible;
-    parsedMinuteValues;
-    parsedHourValues;
-    parsedMonthValues;
-    parsedYearValues;
-    parsedDayValues;
-    destroyCalendarListener;
-    destroyKeyboardMO;
-    // TODO(FW-2832): types (DatetimeParts causes some errors that need untangling)
-    minParts;
-    maxParts;
-    todayParts;
-    defaultParts;
-    loadTimeout;
-    /**
-     * Set true only by `visibleCallback`. Lets `hiddenCallback` ignore the
-     * synthetic "not intersecting" entry IntersectionObserver fires on
-     * `observe()` when the host mounts offscreen.
-     *
-     * Don't reset this in `disconnectedCallback`. Overlays disconnect and
-     * reconnect the host without re-creating the observers, so a reset there
-     * makes `hiddenCallback` miss the dismissal.
-     */
-    hasBeenIntersecting = false;
-    prevPresentation = null;
-    resolveForceDateScrolling;
-    showMonthAndYear = false;
-    activeParts = [];
-    workingParts = {
-        month: 5,
-        day: 28,
-        year: 2021,
-        hour: 13,
-        minute: 52,
-        ampm: 'pm',
-        isAdjacentDay: false,
-    };
-    el;
-    isTimePopoverOpen = false;
-    /**
-     * When defined, will force the datetime to render the month
-     * containing the specified date. Currently, this should only
-     * be used to enable immediately auto-scrolling to the new month,
-     * and should then be reset to undefined once the transition is
-     * finished and the forced month is now in view.
-     *
-     * Applies to grid-style datetimes only.
-     */
-    forceRenderDate;
-    /**
-     * The color to use from your application's color palette.
-     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-     * For more information on colors, refer to [theming](/docs/theming/basics).
-     */
-    color;
-    /**
-     * The name of the control, which is submitted with the form data.
-     */
-    name = this.inputId;
-    /**
-     * If `true`, the user cannot interact with the datetime.
-     */
-    disabled = false;
-    /**
-     * Formatting options for dates and times.
-     * Should include a 'date' and/or 'time' object, each of which is of type [Intl.DateTimeFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options).
-     *
-     */
-    formatOptions;
+    constructor() {
+        this.inputId = `ion-dt-${datetimeIds++}`;
+        /**
+         * Set true only by `visibleCallback`. Lets `hiddenCallback` ignore the
+         * synthetic "not intersecting" entry IntersectionObserver fires on
+         * `observe()` when the host mounts offscreen.
+         *
+         * Don't reset this in `disconnectedCallback`. Overlays disconnect and
+         * reconnect the host without re-creating the observers, so a reset there
+         * makes `hiddenCallback` miss the dismissal.
+         */
+        this.hasBeenIntersecting = false;
+        this.prevPresentation = null;
+        this.showMonthAndYear = false;
+        this.activeParts = [];
+        this.workingParts = {
+            month: 5,
+            day: 28,
+            year: 2021,
+            hour: 13,
+            minute: 52,
+            ampm: 'pm',
+            isAdjacentDay: false,
+        };
+        this.isTimePopoverOpen = false;
+        /**
+         * The color to use from your application's color palette.
+         * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+         * For more information on colors, refer to [theming](/docs/theming/basics).
+         */
+        this.color = 'primary';
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * If `true`, the user cannot interact with the datetime.
+         */
+        this.disabled = false;
+        /**
+         * If `true`, the datetime appears normal but the selected date cannot be changed.
+         */
+        this.readonly = false;
+        /**
+         * If `true`, the datetime calendar displays a six-week (42-day) layout,
+         * including days from the previous and next months to fill the grid.
+         * These adjacent days are selectable unless disabled.
+         */
+        this.showAdjacentDays = false;
+        /**
+         * Which values you want to select. `"date"` will show
+         * a calendar picker to select the month, day, and year. `"time"`
+         * will show a time picker to select the hour, minute, and (optionally)
+         * AM/PM. `"date-time"` will show the date picker first and time picker second.
+         * `"time-date"` will show the time picker first and date picker second.
+         */
+        this.presentation = 'date-time';
+        /**
+         * The text to display on the picker's cancel button.
+         */
+        this.cancelText = 'Cancel';
+        /**
+         * The text to display on the picker's "Done" button.
+         */
+        this.doneText = 'Done';
+        /**
+         * The text to display on the picker's "Clear" button.
+         */
+        this.clearText = 'Clear';
+        /**
+         * The locale to use for `ion-datetime`. This
+         * impacts month and day name formatting.
+         * The `"default"` value refers to the default
+         * locale set by your device.
+         */
+        this.locale = 'default';
+        /**
+         * The first day of the week to use for `ion-datetime`. The
+         * default value is `0` and represents Sunday.
+         */
+        this.firstDayOfWeek = 0;
+        /**
+         * If `true`, multiple dates can be selected at once. Only
+         * applies to `presentation="date"` and `preferWheel="false"`.
+         */
+        this.multiple = false;
+        /**
+         * If `true`, a header will be shown above the calendar
+         * picker. This will include both the slotted title, and
+         * the selected date.
+         */
+        this.showDefaultTitle = false;
+        /**
+         * If `true`, the default "Cancel" and "OK" buttons
+         * will be rendered at the bottom of the `ion-datetime`
+         * component. Developers can also use the `button` slot
+         * if they want to customize these buttons. If custom
+         * buttons are set in the `button` slot then the
+         * default buttons will not be rendered.
+         */
+        this.showDefaultButtons = false;
+        /**
+         * If `true`, a "Clear" button will be rendered alongside
+         * the default "Cancel" and "OK" buttons at the bottom of the `ion-datetime`
+         * component. Developers can also use the `button` slot
+         * if they want to customize these buttons. If custom
+         * buttons are set in the `button` slot then the
+         * default buttons will not be rendered.
+         */
+        this.showClearButton = false;
+        /**
+         * If `true`, the default "Time" label will be rendered
+         * for the time selector of the `ion-datetime` component.
+         * Developers can also use the `time-label` slot
+         * if they want to customize this label. If a custom
+         * label is set in the `time-label` slot then the
+         * default label will not be rendered.
+         */
+        this.showDefaultTimeLabel = true;
+        /**
+         * If `cover`, the `ion-datetime` will expand to cover the full width of its container.
+         * If `fixed`, the `ion-datetime` will have a fixed width.
+         */
+        this.size = 'fixed';
+        /**
+         * If `true`, a wheel picker will be rendered instead of a calendar grid
+         * where possible. If `false`, a calendar grid will be rendered instead of
+         * a wheel picker where possible.
+         *
+         * A wheel picker can be rendered instead of a grid when `presentation` is
+         * one of the following values: `"date"`, `"date-time"`, or `"time-date"`.
+         *
+         * A wheel picker will always be rendered regardless of
+         * the `preferWheel` value when `presentation` is one of the following values:
+         * `"time"`, `"month"`, `"month-year"`, or `"year"`.
+         */
+        this.preferWheel = false;
+        this.warnIfIncorrectValueUsage = () => {
+            const { multiple, value } = this;
+            if (!multiple && Array.isArray(value)) {
+                /**
+                 * We do some processing on the `value` array so
+                 * that it looks more like an array when logged to
+                 * the console.
+                 * Example given ['a', 'b']
+                 * Default toString() behavior: a,b
+                 * Custom behavior: ['a', 'b']
+                 */
+                printIonWarning(`[ion-datetime] - An array of values was passed, but multiple is "false". This is incorrect usage and may result in unexpected behaviors. To dismiss this warning, pass a string to the "value" property when multiple="false".
+
+  Value Passed: [${value.map((v) => `'${v}'`).join(', ')}]
+`, this.el);
+            }
+        };
+        this.setValue = (value) => {
+            this.value = value;
+            this.ionChange.emit({ value });
+        };
+        /**
+         * Returns the DatetimePart interface
+         * to use when rendering an initial set of
+         * data. This should be used when rendering an
+         * interface in an environment where the `value`
+         * may not be set. This function works
+         * by returning the first selected date and then
+         * falling back to defaultParts if no active date
+         * is selected.
+         */
+        this.getActivePartsWithFallback = () => {
+            var _a;
+            const { defaultParts } = this;
+            return (_a = this.getActivePart()) !== null && _a !== void 0 ? _a : defaultParts;
+        };
+        this.getActivePart = () => {
+            const { activeParts } = this;
+            return Array.isArray(activeParts) ? activeParts[0] : activeParts;
+        };
+        this.closeParentOverlay = (role) => {
+            const popoverOrModal = this.el.closest('ion-modal, ion-popover');
+            if (popoverOrModal) {
+                popoverOrModal.dismiss(undefined, role);
+            }
+        };
+        this.setWorkingParts = (parts) => {
+            this.workingParts = Object.assign({}, parts);
+        };
+        this.setActiveParts = (parts, removeDate = false) => {
+            /** if the datetime component is in readonly mode,
+             * allow browsing of the calendar without changing
+             * the set value
+             */
+            if (this.readonly) {
+                return;
+            }
+            const { multiple, minParts, maxParts, activeParts } = this;
+            /**
+             * When setting the active parts, it is possible
+             * to set invalid data. For example,
+             * when updating January 31 to February,
+             * February 31 does not exist. As a result
+             * we need to validate the active parts and
+             * ensure that we are only setting valid dates.
+             * Additionally, we need to update the working parts
+             * too in the event that the validated parts are different.
+             */
+            const validatedParts = validateParts(parts, minParts, maxParts);
+            this.setWorkingParts(validatedParts);
+            if (multiple) {
+                const activePartsArray = Array.isArray(activeParts) ? activeParts : [activeParts];
+                if (removeDate) {
+                    this.activeParts = activePartsArray.filter((p) => !isSameDay(p, validatedParts));
+                }
+                else {
+                    this.activeParts = [...activePartsArray, validatedParts];
+                }
+            }
+            else {
+                this.activeParts = Object.assign({}, validatedParts);
+            }
+            const hasSlottedButtons = this.el.querySelector('[slot="buttons"]') !== null;
+            if (hasSlottedButtons || this.showDefaultButtons) {
+                return;
+            }
+            this.confirm();
+        };
+        this.initializeKeyboardListeners = () => {
+            const calendarBodyRef = this.calendarBodyRef;
+            if (!calendarBodyRef) {
+                return;
+            }
+            const root = this.el.shadowRoot;
+            /**
+             * Get a reference to the month
+             * element we are currently viewing.
+             */
+            const currentMonth = calendarBodyRef.querySelector('.calendar-month:nth-of-type(2)');
+            /**
+             * When focusing the calendar body, we want to pass focus
+             * to the working day, but other days should
+             * only be accessible using the arrow keys. Pressing
+             * Tab should jump between bodies of selectable content.
+             */
+            const checkCalendarBodyFocus = (ev) => {
+                var _a;
+                const record = ev[0];
+                /**
+                 * If calendar body was already focused
+                 * when this fired or if the calendar body
+                 * if not currently focused, we should not re-focus
+                 * the inner day.
+                 */
+                if (((_a = record.oldValue) === null || _a === void 0 ? void 0 : _a.includes('ion-focused')) || !calendarBodyRef.classList.contains('ion-focused')) {
+                    return;
+                }
+                this.focusWorkingDay(currentMonth);
+            };
+            const mo = new MutationObserver(checkCalendarBodyFocus);
+            mo.observe(calendarBodyRef, { attributeFilter: ['class'], attributeOldValue: true });
+            this.destroyKeyboardMO = () => {
+                mo === null || mo === void 0 ? void 0 : mo.disconnect();
+            };
+            /**
+             * We must use keydown not keyup as we want
+             * to prevent scrolling when using the arrow keys.
+             */
+            calendarBodyRef.addEventListener('keydown', (ev) => {
+                const activeElement = root.activeElement;
+                if (!activeElement || !activeElement.classList.contains('calendar-day')) {
+                    return;
+                }
+                const parts = getPartsFromCalendarDay(activeElement);
+                let partsToFocus;
+                switch (ev.key) {
+                    case 'ArrowDown':
+                        ev.preventDefault();
+                        partsToFocus = getNextWeek(parts);
+                        break;
+                    case 'ArrowUp':
+                        ev.preventDefault();
+                        partsToFocus = getPreviousWeek(parts);
+                        break;
+                    case 'ArrowRight':
+                        ev.preventDefault();
+                        partsToFocus = getNextDay(parts);
+                        break;
+                    case 'ArrowLeft':
+                        ev.preventDefault();
+                        partsToFocus = getPreviousDay(parts);
+                        break;
+                    case 'Home':
+                        ev.preventDefault();
+                        partsToFocus = getStartOfWeek(parts);
+                        break;
+                    case 'End':
+                        ev.preventDefault();
+                        partsToFocus = getEndOfWeek(parts);
+                        break;
+                    case 'PageUp':
+                        ev.preventDefault();
+                        partsToFocus = ev.shiftKey ? getPreviousYear(parts) : getPreviousMonth(parts);
+                        break;
+                    case 'PageDown':
+                        ev.preventDefault();
+                        partsToFocus = ev.shiftKey ? getNextYear(parts) : getNextMonth(parts);
+                        break;
+                    /**
+                     * Do not preventDefault here
+                     * as we do not want to override other
+                     * browser defaults such as pressing Enter/Space
+                     * to select a day.
+                     */
+                    default:
+                        return;
+                }
+                /**
+                 * If the day we want to move focus to is
+                 * disabled, do not do anything.
+                 */
+                if (isDayDisabled(partsToFocus, this.minParts, this.maxParts)) {
+                    return;
+                }
+                this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), partsToFocus));
+                /**
+                 * Give view a chance to re-render
+                 * then move focus to the new working day
+                 */
+                requestAnimationFrame(() => this.focusWorkingDay(currentMonth));
+            });
+        };
+        this.focusWorkingDay = (currentMonth) => {
+            /**
+             * Get the number of offset days so
+             * we know how much to offset our next selector by
+             * to grab the correct calendar-day element.
+             */
+            const { day, month, year } = this.workingParts;
+            const firstOfMonth = new Date(`${month}/1/${year}`).getDay();
+            const offset = firstOfMonth >= this.firstDayOfWeek
+                ? firstOfMonth - this.firstDayOfWeek
+                : 7 - (this.firstDayOfWeek - firstOfMonth);
+            if (day === null) {
+                return;
+            }
+            /**
+             * Get the calendar day element
+             * and focus it.
+             */
+            const dayEl = currentMonth.querySelector(`.calendar-day-wrapper:nth-of-type(${offset + day}) .calendar-day`);
+            if (dayEl) {
+                dayEl.focus();
+            }
+        };
+        this.processMinParts = () => {
+            const { min, defaultParts } = this;
+            if (min === undefined) {
+                this.minParts = undefined;
+                return;
+            }
+            this.minParts = parseMinParts(min, defaultParts);
+        };
+        this.processMaxParts = () => {
+            const { max, defaultParts } = this;
+            if (max === undefined) {
+                this.maxParts = undefined;
+                return;
+            }
+            this.maxParts = parseMaxParts(max, defaultParts);
+        };
+        this.initializeCalendarListener = () => {
+            const calendarBodyRef = this.calendarBodyRef;
+            if (!calendarBodyRef) {
+                return;
+            }
+            /**
+             * For performance reasons, we only render 3
+             * months at a time: The current month, the previous
+             * month, and the next month. We have a scroll listener
+             * on the calendar body to append/prepend new months.
+             *
+             * We can do this because Stencil is smart enough to not
+             * re-create the .calendar-month containers, but rather
+             * update the content within those containers.
+             *
+             * As an added bonus, WebKit has some troubles with
+             * scroll-snap-stop: always, so not rendering all of
+             * the months in a row allows us to mostly sidestep
+             * that issue.
+             */
+            const months = calendarBodyRef.querySelectorAll('.calendar-month');
+            const startMonth = months[0];
+            const workingMonth = months[1];
+            const endMonth = months[2];
+            const mode = getIonMode(this);
+            const needsiOSRubberBandFix = mode === 'ios' && typeof navigator !== 'undefined' && navigator.maxTouchPoints > 1;
+            /**
+             * Before setting up the scroll listener,
+             * scroll the middle month into view.
+             * scrollIntoView() will scroll entire page
+             * if element is not in viewport. Use scrollLeft instead.
+             */
+            writeTask(() => {
+                calendarBodyRef.scrollLeft = startMonth.clientWidth * (isRTL(this.el) ? -1 : 1);
+                const getChangedMonth = (parts) => {
+                    const box = calendarBodyRef.getBoundingClientRect();
+                    /**
+                     * If the current scroll position is all the way to the left
+                     * then we have scrolled to the previous month.
+                     * Otherwise, assume that we have scrolled to the next
+                     * month. We have a tolerance of 2px to account for
+                     * sub pixel rendering.
+                     *
+                     * Check below the next line ensures that we did not
+                     * swipe and abort (i.e. we swiped but we are still on the current month).
+                     */
+                    const condition = isRTL(this.el) ? calendarBodyRef.scrollLeft >= -2 : calendarBodyRef.scrollLeft <= 2;
+                    const month = condition ? startMonth : endMonth;
+                    /**
+                     * The edge of the month must be lined up with
+                     * the edge of the calendar body in order for
+                     * the component to update. Otherwise, it
+                     * may be the case that the user has paused their
+                     * swipe or the browser has not finished snapping yet.
+                     * Rather than check if the x values are equal,
+                     * we give it a tolerance of 2px to account for
+                     * sub pixel rendering.
+                     */
+                    const monthBox = month.getBoundingClientRect();
+                    if (Math.abs(monthBox.x - box.x) > 2)
+                        return;
+                    /**
+                     * If we're force-rendering a month, assume we've
+                     * scrolled to that and return it.
+                     *
+                     * If forceRenderDate is ever used in a context where the
+                     * forced month is not immediately auto-scrolled to, this
+                     * should be updated to also check whether `month` has the
+                     * same month and year as the forced date.
+                     */
+                    const { forceRenderDate } = this;
+                    if (forceRenderDate !== undefined) {
+                        return { month: forceRenderDate.month, year: forceRenderDate.year, day: forceRenderDate.day };
+                    }
+                    /**
+                     * From here, we can determine if the start
+                     * month or the end month was scrolled into view.
+                     * If no month was changed, then we can return from
+                     * the scroll callback early.
+                     */
+                    if (month === startMonth) {
+                        return getPreviousMonth(parts);
+                    }
+                    else if (month === endMonth) {
+                        return getNextMonth(parts);
+                    }
+                    else {
+                        return;
+                    }
+                };
+                const updateActiveMonth = () => {
+                    if (needsiOSRubberBandFix) {
+                        calendarBodyRef.style.removeProperty('pointer-events');
+                        appliediOSRubberBandFix = false;
+                    }
+                    /**
+                     * If the month did not change
+                     * then we can return early.
+                     */
+                    const newDate = getChangedMonth(this.workingParts);
+                    if (!newDate)
+                        return;
+                    const { month, day, year } = newDate;
+                    if (isMonthDisabled({ month, year, day: null }, {
+                        minParts: Object.assign(Object.assign({}, this.minParts), { day: null }),
+                        maxParts: Object.assign(Object.assign({}, this.maxParts), { day: null }),
+                    })) {
+                        return;
+                    }
+                    /**
+                     * Prevent scrolling for other browsers
+                     * to give the DOM time to update and the container
+                     * time to properly snap.
+                     */
+                    calendarBodyRef.style.setProperty('overflow', 'hidden');
+                    /**
+                     * Use a writeTask here to ensure
+                     * that the state is updated and the
+                     * correct month is scrolled into view
+                     * in the same frame. This is not
+                     * typically a problem on newer devices
+                     * but older/slower device may have a flicker
+                     * if we did not do this.
+                     */
+                    writeTask(() => {
+                        var _a;
+                        this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), { month, day: day, year }));
+                        calendarBodyRef.scrollLeft = workingMonth.clientWidth * (isRTL(this.el) ? -1 : 1);
+                        calendarBodyRef.style.removeProperty('overflow');
+                        if (this.resolveForceDateScrolling) {
+                            this.resolveForceDateScrolling();
+                        }
+                        const activeEl = this.el.shadowRoot.activeElement;
+                        if (activeEl && activeEl.classList.contains('calendar-day')) {
+                            (_a = activeEl.closest('.calendar-body')) === null || _a === void 0 ? void 0 : _a.focus();
+                        }
+                    });
+                };
+                /**
+                 * When the container finishes scrolling we
+                 * need to update the DOM with the selected month.
+                 */
+                let scrollTimeout;
+                /**
+                 * We do not want to attempt to set pointer-events
+                 * multiple times within a single swipe gesture as
+                 * that adds unnecessary work to the main thread.
+                 */
+                let appliediOSRubberBandFix = false;
+                const scrollCallback = () => {
+                    if (scrollTimeout) {
+                        clearTimeout(scrollTimeout);
+                    }
+                    /**
+                     * On iOS it is possible to quickly rubber band
+                     * the scroll area before the scroll timeout has fired.
+                     * This results in users reaching the end of the scrollable
+                     * container before the DOM has updated.
+                     * By setting `pointer-events: none` we can ensure that
+                     * subsequent swipes do not happen while the container
+                     * is snapping.
+                     */
+                    if (!appliediOSRubberBandFix && needsiOSRubberBandFix) {
+                        calendarBodyRef.style.setProperty('pointer-events', 'none');
+                        appliediOSRubberBandFix = true;
+                    }
+                    // Wait ~3 frames
+                    scrollTimeout = setTimeout(updateActiveMonth, 50);
+                };
+                calendarBodyRef.addEventListener('scroll', scrollCallback);
+                this.destroyCalendarListener = () => {
+                    calendarBodyRef.removeEventListener('scroll', scrollCallback);
+                };
+            });
+        };
+        /**
+         * Clean up all listeners except for the overlay
+         * listener. This is so that we can re-create the listeners
+         * if the datetime has been hidden/presented by a modal or popover.
+         */
+        this.destroyInteractionListeners = () => {
+            const { destroyCalendarListener, destroyKeyboardMO } = this;
+            if (destroyCalendarListener !== undefined) {
+                destroyCalendarListener();
+            }
+            if (destroyKeyboardMO !== undefined) {
+                destroyKeyboardMO();
+            }
+        };
+        /**
+         * TODO(FW-6931): Remove this fallback upon solving the root cause
+         * Fallback to ensure the datetime becomes ready even if
+         * IntersectionObserver never reports it as intersecting.
+         *
+         * This is primarily used in environments where the observer
+         * might not fire as expected, such as when running under
+         * synthetic tests that stub IntersectionObserver.
+         */
+        this.ensureReadyIfVisible = () => {
+            if (this.el.classList.contains('datetime-ready')) {
+                return;
+            }
+            const rect = this.el.getBoundingClientRect();
+            if (rect.width === 0 || rect.height === 0) {
+                return;
+            }
+            this.markReady();
+        };
+        this.markReady = () => {
+            if (this.el.classList.contains('datetime-ready')) {
+                return;
+            }
+            this.initializeListeners();
+            /**
+             * TODO FW-2793: Datetime needs a frame to ensure that it
+             * can properly scroll contents into view. As a result
+             * we hide the scrollable content until after that frame
+             * so users do not see the content quickly shifting. The downside
+             * is that the content will pop into view a frame after. Maybe there
+             * is a better way to handle this?
+             */
+            writeTask(() => {
+                this.el.classList.add('datetime-ready');
+            });
+        };
+        this.loadTimeoutCleanup = () => {
+            if (this.loadTimeout) {
+                clearTimeout(this.loadTimeout);
+                this.loadTimeout = undefined;
+            }
+        };
+        this.processValue = (value) => {
+            const hasValue = value !== null && value !== undefined && value !== '' && (!Array.isArray(value) || value.length > 0);
+            const valueToProcess = hasValue ? parseDate(value) : this.defaultParts;
+            const { minParts, maxParts, workingParts, el } = this;
+            this.warnIfIncorrectValueUsage();
+            /**
+             * Return early if the value wasn't parsed correctly, such as
+             * if an improperly formatted date string was provided.
+             */
+            if (!valueToProcess) {
+                return;
+            }
+            /**
+             * Datetime should only warn of out of bounds values
+             * if set by the user. If the `value` is undefined,
+             * we will default to today's date which may be out
+             * of bounds. In this case, the warning makes it look
+             * like the developer did something wrong which is
+             * not true.
+             */
+            if (hasValue) {
+                warnIfValueOutOfBounds(valueToProcess, minParts, maxParts);
+            }
+            /**
+             * If there are multiple values, clamp to the last one.
+             * This is because the last value is the one that the user
+             * has most recently interacted with.
+             */
+            const singleValue = Array.isArray(valueToProcess) ? valueToProcess[valueToProcess.length - 1] : valueToProcess;
+            const targetValue = clampDate(singleValue, minParts, maxParts);
+            const { month, day, year, hour, minute } = targetValue;
+            const ampm = parseAmPm(hour);
+            /**
+             * Since `activeParts` indicates a value that been explicitly selected
+             * either by the user or the app, only update `activeParts` if the
+             * `value` property is set.
+             */
+            if (hasValue) {
+                if (Array.isArray(valueToProcess)) {
+                    this.activeParts = [...valueToProcess];
+                }
+                else {
+                    this.activeParts = {
+                        month,
+                        day,
+                        year,
+                        hour,
+                        minute,
+                        ampm,
+                    };
+                }
+            }
+            else {
+                /**
+                 * Reset the active parts if the value is not set.
+                 * This will clear the selected calendar day when
+                 * performing a clear action or using the reset() method.
+                 */
+                this.activeParts = [];
+            }
+            const didChangeMonth = (month !== undefined && month !== workingParts.month) || (year !== undefined && year !== workingParts.year);
+            const bodyIsVisible = el.classList.contains('datetime-ready');
+            const { isGridStyle, showMonthAndYear } = this;
+            if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
+                /**
+                 * Only animate if:
+                 * 1. We're using grid style (wheel style pickers should just jump to new value)
+                 * 2. The month and/or year actually changed, and both are defined (otherwise there's nothing to animate to)
+                 * 3. The calendar body is visible (prevents animation when in collapsed datetime-button, for example)
+                 * 4. The month/year picker is not open (since you wouldn't see the animation anyway)
+                 */
+                this.animateToDate(targetValue);
+            }
+            else {
+                this.setWorkingParts({
+                    month,
+                    day,
+                    year,
+                    hour,
+                    minute,
+                    ampm,
+                });
+            }
+        };
+        this.animateToDate = async (targetValue) => {
+            const { workingParts } = this;
+            /**
+             * Tell other render functions that we need to force the
+             * target month to appear in place of the actual next/prev month.
+             * Because this is a State variable, a rerender will be triggered
+             * automatically, updating the rendered months.
+             */
+            this.forceRenderDate = targetValue;
+            /**
+             * Flag that we've started scrolling to the forced date.
+             * The resolve function will be called by the datetime's
+             * scroll listener when it's done updating everything.
+             * This is a replacement for making prev/nextMonth async,
+             * since the logic we're waiting on is in a listener.
+             */
+            const forceDateScrollingPromise = new Promise((resolve) => {
+                this.resolveForceDateScrolling = resolve;
+            });
+            /**
+             * Animate smoothly to the forced month. This will also update
+             * workingParts and correct the surrounding months for us.
+             */
+            const targetMonthIsBefore = isBefore(targetValue, workingParts);
+            targetMonthIsBefore ? this.prevMonth() : this.nextMonth();
+            await forceDateScrollingPromise;
+            this.resolveForceDateScrolling = undefined;
+            this.forceRenderDate = undefined;
+        };
+        this.onFocus = () => {
+            this.ionFocus.emit();
+        };
+        this.onBlur = () => {
+            this.ionBlur.emit();
+        };
+        this.hasValue = () => {
+            return this.value != null;
+        };
+        this.nextMonth = () => {
+            const calendarBodyRef = this.calendarBodyRef;
+            if (!calendarBodyRef) {
+                return;
+            }
+            const nextMonth = calendarBodyRef.querySelector('.calendar-month:last-of-type');
+            if (!nextMonth) {
+                return;
+            }
+            const left = nextMonth.offsetWidth * 2;
+            const scrollMode = config.getBoolean('animated', true) ? 'smooth' : 'instant';
+            calendarBodyRef.scrollTo({
+                top: 0,
+                left: left * (isRTL(this.el) ? -1 : 1),
+                behavior: scrollMode,
+            });
+        };
+        this.prevMonth = () => {
+            const calendarBodyRef = this.calendarBodyRef;
+            if (!calendarBodyRef) {
+                return;
+            }
+            const prevMonth = calendarBodyRef.querySelector('.calendar-month:first-of-type');
+            if (!prevMonth) {
+                return;
+            }
+            const left = prevMonth.offsetWidth * 2;
+            const scrollMode = config.getBoolean('animated', true) ? 'smooth' : 'instant';
+            calendarBodyRef.scrollTo({
+                top: 0,
+                left: left * (isRTL(this.el) ? 1 : -1),
+                behavior: scrollMode,
+            });
+        };
+        this.toggleMonthAndYearView = () => {
+            this.showMonthAndYear = !this.showMonthAndYear;
+        };
+    }
     formatOptionsChanged() {
         const { el, formatOptions, presentation } = this;
         checkForPresentationFormatMismatch(el, presentation, formatOptions);
         warnIfTimeZoneProvided(el, formatOptions);
     }
-    /**
-     * If `true`, the datetime appears normal but the selected date cannot be changed.
-     */
-    readonly = false;
-    /**
-     * Returns if an individual date (calendar day) is enabled or disabled.
-     *
-     * If `true`, the day will be enabled/interactive.
-     * If `false`, the day will be disabled/non-interactive.
-     *
-     * The function accepts an ISO 8601 date string of a given day.
-     * By default, all days are enabled. Developers can use this function
-     * to write custom logic to disable certain days.
-     *
-     * The function is called for each rendered calendar day, for the previous, current and next month.
-     * Custom implementations should be optimized for performance to avoid jank.
-     */
-    isDateEnabled;
-    /**
-     * If `true`, the datetime calendar displays a six-week (42-day) layout,
-     * including days from the previous and next months to fill the grid.
-     * These adjacent days are selectable unless disabled.
-     */
-    showAdjacentDays = false;
     disabledChanged() {
         this.emitStyle();
     }
-    /**
-     * The minimum datetime allowed. Value must be a date string
-     * following the
-     * [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),
-     * such as `1996-12-19`. The format does not have to be specific to an exact
-     * datetime. For example, the minimum could just be the year, such as `1994`.
-     * Defaults to the beginning of the year, 100 years ago from today.
-     */
-    min;
     minChanged() {
         this.processMinParts();
     }
-    /**
-     * The maximum datetime allowed. Value must be a date string
-     * following the
-     * [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),
-     * `1996-12-19`. The format does not have to be specific to an exact
-     * datetime. For example, the maximum could just be the year, such as `1994`.
-     * Defaults to the end of this year.
-     */
-    max;
     maxChanged() {
         this.processMaxParts();
     }
-    /**
-     * Which values you want to select. `"date"` will show
-     * a calendar picker to select the month, day, and year. `"time"`
-     * will show a time picker to select the hour, minute, and (optionally)
-     * AM/PM. `"date-time"` will show the date picker first and time picker second.
-     * `"time-date"` will show the time picker first and date picker second.
-     */
-    presentation = 'date-time';
     presentationChanged() {
         const { el, formatOptions, presentation } = this;
         checkForPresentationFormatMismatch(el, presentation, formatOptions);
     }
     get isGridStyle() {
         const { presentation, preferWheel } = this;
-        const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
-        return hasDatePresentation && !preferWheel;
-    }
-    /**
-     * The text to display on the picker's cancel button.
-     */
-    cancelText = 'Cancel';
-    /**
-     * The text to display on the picker's "Done" button.
-     */
-    doneText = 'Done';
-    /**
-     * The text to display on the picker's "Clear" button.
-     */
-    clearText = 'Clear';
-    /**
-     * Values used to create the list of selectable years. By default
-     * the year values range between the `min` and `max` datetime inputs. However, to
-     * control exactly which years to display, the `yearValues` input can take a number, an array
-     * of numbers, or string of comma separated numbers. For example, to show upcoming and
-     * recent leap years, then this input's value would be `yearValues="2008,2012,2016,2020,2024"`.
-     */
-    yearValues;
-    yearValuesChanged() {
-        this.parsedYearValues = convertToArrayOfNumbers(this.yearValues);
-    }
-    /**
-     * Values used to create the list of selectable months. By default
-     * the month values range from `1` to `12`. However, to control exactly which months to
-     * display, the `monthValues` input can take a number, an array of numbers, or a string of
-     * comma separated numbers. For example, if only summer months should be shown, then this
-     * input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a
-     * zero-based index, meaning January's value is `1`, and December's is `12`.
-     */
-    monthValues;
-    monthValuesChanged() {
-        this.parsedMonthValues = convertToArrayOfNumbers(this.monthValues);
-    }
-    /**
-     * Values used to create the list of selectable days. By default
-     * every day is shown for the given month. However, to control exactly which days of
-     * the month to display, the `dayValues` input can take a number, an array of numbers, or
-     * a string of comma separated numbers. Note that even if the array days have an invalid
-     * number for the selected month, like `31` in February, it will correctly not show
-     * days which are not valid for the selected month.
-     */
-    dayValues;
-    dayValuesChanged() {
-        this.parsedDayValues = convertToArrayOfNumbers(this.dayValues);
-    }
-    /**
-     * Values used to create the list of selectable hours. By default
-     * the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However,
-     * to control exactly which hours to display, the `hourValues` input can take a number, an
-     * array of numbers, or a string of comma separated numbers.
-     */
-    hourValues;
-    hourValuesChanged() {
-        this.parsedHourValues = convertToArrayOfNumbers(this.hourValues);
-    }
-    /**
-     * Values used to create the list of selectable minutes. By default
-     * the minutes range from `0` to `59`. However, to control exactly which minutes to display,
-     * the `minuteValues` input can take a number, an array of numbers, or a string of comma
-     * separated numbers. For example, if the minute selections should only be every 15 minutes,
-     * then this input value would be `minuteValues="0,15,30,45"`.
-     */
-    minuteValues;
-    minuteValuesChanged() {
-        this.parsedMinuteValues = convertToArrayOfNumbers(this.minuteValues);
-    }
-    /**
-     * The locale to use for `ion-datetime`. This
-     * impacts month and day name formatting.
-     * The `"default"` value refers to the default
-     * locale set by your device.
-     */
-    locale = 'default';
-    /**
-     * The first day of the week to use for `ion-datetime`. The
-     * default value is `0` and represents Sunday.
-     */
-    firstDayOfWeek = 0;
-    /**
-     * A callback used to format the header text that shows how many
-     * dates are selected. Only used if there are 0 or more than 1
-     * selected (i.e. unused for exactly 1). By default, the header
-     * text is set to "numberOfDates days".
-     *
-     * See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this
-     * if you need to access `this` from within the callback.
-     */
-    titleSelectedDatesFormatter;
-    /**
-     * If `true`, multiple dates can be selected at once. Only
-     * applies to `presentation="date"` and `preferWheel="false"`.
-     */
-    multiple = false;
-    /**
-     * Used to apply custom text and background colors to specific dates.
-     *
-     * Can be either an array of objects containing ISO strings and colors,
-     * or a callback that receives an ISO string and returns the colors.
-     *
-     * Only applies to the `date`, `date-time`, and `time-date` presentations,
-     * with `preferWheel="false"`.
-     */
-    highlightedDates;
-    /**
-     * The value of the datetime as a valid ISO 8601 datetime string.
-     * This should be an array of strings only when `multiple="true"`.
-     */
-    value;
-    /**
-     * Update the datetime value when the value changes
-     */
-    async valueChanged() {
-        const { value } = this;
-        if (this.hasValue()) {
-            this.processValue(value);
-        }
-        this.emitStyle();
-        this.ionValueChange.emit({ value });
-    }
-    /**
-     * If `true`, a header will be shown above the calendar
-     * picker. This will include both the slotted title, and
-     * the selected date.
-     */
-    showDefaultTitle = false;
-    /**
-     * If `true`, the default "Cancel" and "OK" buttons
-     * will be rendered at the bottom of the `ion-datetime`
-     * component. Developers can also use the `button` slot
-     * if they want to customize these buttons. If custom
-     * buttons are set in the `button` slot then the
-     * default buttons will not be rendered.
-     */
-    showDefaultButtons = false;
-    /**
-     * If `true`, a "Clear" button will be rendered alongside
-     * the default "Cancel" and "OK" buttons at the bottom of the `ion-datetime`
-     * component. Developers can also use the `button` slot
-     * if they want to customize these buttons. If custom
-     * buttons are set in the `button` slot then the
-     * default buttons will not be rendered.
-     */
-    showClearButton = false;
-    /**
-     * If `true`, the default "Time" label will be rendered
-     * for the time selector of the `ion-datetime` component.
-     * Developers can also use the `time-label` slot
-     * if they want to customize this label. If a custom
-     * label is set in the `time-label` slot then the
-     * default label will not be rendered.
-     */
-    showDefaultTimeLabel = true;
-    /**
-     * The hour cycle of the `ion-datetime`. If no value is set, this is
-     * specified by the current locale.
-     */
-    hourCycle;
-    /**
-     * If `cover`, the `ion-datetime` will expand to cover the full width of its container.
-     * If `fixed`, the `ion-datetime` will have a fixed width.
-     */
-    size = 'fixed';
-    /**
-     * If `true`, a wheel picker will be rendered instead of a calendar grid
-     * where possible. If `false`, a calendar grid will be rendered instead of
-     * a wheel picker where possible.
-     *
-     * A wheel picker can be rendered instead of a grid when `presentation` is
-     * one of the following values: `"date"`, `"date-time"`, or `"time-date"`.
-     *
-     * A wheel picker will always be rendered regardless of
-     * the `preferWheel` value when `presentation` is one of the following values:
-     * `"time"`, `"month"`, `"month-year"`, or `"year"`.
-     */
-    preferWheel = false;
-    /**
-     * Emitted when the datetime selection was cancelled.
-     */
-    ionCancel;
-    /**
-     * Emitted when the value (selected date) has changed.
-     *
-     * This event will not emit when programmatically setting the `value` property.
-     */
-    ionChange;
-    /**
-     * Emitted when the value property has changed.
-     * This is used to ensure that ion-datetime-button can respond
-     * to any value property changes.
-     * @internal
-     */
-    ionValueChange;
-    /**
-     * Emitted when the datetime has focus.
-     */
-    ionFocus;
-    /**
-     * Emitted when the datetime loses focus.
-     */
-    ionBlur;
-    /**
-     * Emitted when the styles change.
-     * @internal
-     */
-    ionStyle;
+        const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
+        return hasDatePresentation && !preferWheel;
+    }
+    yearValuesChanged() {
+        this.parsedYearValues = convertToArrayOfNumbers(this.yearValues);
+    }
+    monthValuesChanged() {
+        this.parsedMonthValues = convertToArrayOfNumbers(this.monthValues);
+    }
+    dayValuesChanged() {
+        this.parsedDayValues = convertToArrayOfNumbers(this.dayValues);
+    }
+    hourValuesChanged() {
+        this.parsedHourValues = convertToArrayOfNumbers(this.hourValues);
+    }
+    minuteValuesChanged() {
+        this.parsedMinuteValues = convertToArrayOfNumbers(this.minuteValues);
+    }
     /**
-     * Emitted when componentDidRender is fired.
-     * @internal
+     * Update the datetime value when the value changes
      */
-    ionRender;
+    async valueChanged() {
+        const { value } = this;
+        if (this.hasValue()) {
+            this.processValue(value);
+        }
+        this.emitStyle();
+        this.ionValueChange.emit({ value });
+    }
     /**
      * Confirms the selected datetime value, updates the
      * `value` property, and optionally closes the popover
@@ -481,425 +934,10 @@ export class Datetime {
     async getDefaultPart() {
         return this.defaultParts;
     }
-    warnIfIncorrectValueUsage = () => {
-        const { multiple, value } = this;
-        if (!multiple && Array.isArray(value)) {
-            /**
-             * We do some processing on the `value` array so
-             * that it looks more like an array when logged to
-             * the console.
-             * Example given ['a', 'b']
-             * Default toString() behavior: a,b
-             * Custom behavior: ['a', 'b']
-             */
-            printIonWarning(`[ion-datetime] - An array of values was passed, but multiple is "false". This is incorrect usage and may result in unexpected behaviors. To dismiss this warning, pass a string to the "value" property when multiple="false".
-
-  Value Passed: [${value.map((v) => `'${v}'`).join(', ')}]
-`, this.el);
-        }
-    };
-    setValue = (value) => {
-        this.value = value;
-        this.ionChange.emit({ value });
-    };
-    /**
-     * Returns the DatetimePart interface
-     * to use when rendering an initial set of
-     * data. This should be used when rendering an
-     * interface in an environment where the `value`
-     * may not be set. This function works
-     * by returning the first selected date and then
-     * falling back to defaultParts if no active date
-     * is selected.
-     */
-    getActivePartsWithFallback = () => {
-        const { defaultParts } = this;
-        return this.getActivePart() ?? defaultParts;
-    };
-    getActivePart = () => {
-        const { activeParts } = this;
-        return Array.isArray(activeParts) ? activeParts[0] : activeParts;
-    };
-    closeParentOverlay = (role) => {
-        const popoverOrModal = this.el.closest('ion-modal, ion-popover');
-        if (popoverOrModal) {
-            popoverOrModal.dismiss(undefined, role);
-        }
-    };
-    setWorkingParts = (parts) => {
-        this.workingParts = {
-            ...parts,
-        };
-    };
-    setActiveParts = (parts, removeDate = false) => {
-        /** if the datetime component is in readonly mode,
-         * allow browsing of the calendar without changing
-         * the set value
-         */
-        if (this.readonly) {
-            return;
-        }
-        const { multiple, minParts, maxParts, activeParts } = this;
-        /**
-         * When setting the active parts, it is possible
-         * to set invalid data. For example,
-         * when updating January 31 to February,
-         * February 31 does not exist. As a result
-         * we need to validate the active parts and
-         * ensure that we are only setting valid dates.
-         * Additionally, we need to update the working parts
-         * too in the event that the validated parts are different.
-         */
-        const validatedParts = validateParts(parts, minParts, maxParts);
-        this.setWorkingParts(validatedParts);
-        if (multiple) {
-            const activePartsArray = Array.isArray(activeParts) ? activeParts : [activeParts];
-            if (removeDate) {
-                this.activeParts = activePartsArray.filter((p) => !isSameDay(p, validatedParts));
-            }
-            else {
-                this.activeParts = [...activePartsArray, validatedParts];
-            }
-        }
-        else {
-            this.activeParts = {
-                ...validatedParts,
-            };
-        }
-        const hasSlottedButtons = this.el.querySelector('[slot="buttons"]') !== null;
-        if (hasSlottedButtons || this.showDefaultButtons) {
-            return;
-        }
-        this.confirm();
-    };
     get isCalendarPicker() {
         const { presentation } = this;
         return presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
     }
-    initializeKeyboardListeners = () => {
-        const calendarBodyRef = this.calendarBodyRef;
-        if (!calendarBodyRef) {
-            return;
-        }
-        const root = this.el.shadowRoot;
-        /**
-         * Get a reference to the month
-         * element we are currently viewing.
-         */
-        const currentMonth = calendarBodyRef.querySelector('.calendar-month:nth-of-type(2)');
-        /**
-         * When focusing the calendar body, we want to pass focus
-         * to the working day, but other days should
-         * only be accessible using the arrow keys. Pressing
-         * Tab should jump between bodies of selectable content.
-         */
-        const checkCalendarBodyFocus = (ev) => {
-            const record = ev[0];
-            /**
-             * If calendar body was already focused
-             * when this fired or if the calendar body
-             * if not currently focused, we should not re-focus
-             * the inner day.
-             */
-            if (record.oldValue?.includes('ion-focused') || !calendarBodyRef.classList.contains('ion-focused')) {
-                return;
-            }
-            this.focusWorkingDay(currentMonth);
-        };
-        const mo = new MutationObserver(checkCalendarBodyFocus);
-        mo.observe(calendarBodyRef, { attributeFilter: ['class'], attributeOldValue: true });
-        this.destroyKeyboardMO = () => {
-            mo?.disconnect();
-        };
-        /**
-         * We must use keydown not keyup as we want
-         * to prevent scrolling when using the arrow keys.
-         */
-        calendarBodyRef.addEventListener('keydown', (ev) => {
-            const activeElement = root.activeElement;
-            if (!activeElement || !activeElement.classList.contains('calendar-day')) {
-                return;
-            }
-            const parts = getPartsFromCalendarDay(activeElement);
-            let partsToFocus;
-            switch (ev.key) {
-                case 'ArrowDown':
-                    ev.preventDefault();
-                    partsToFocus = getNextWeek(parts);
-                    break;
-                case 'ArrowUp':
-                    ev.preventDefault();
-                    partsToFocus = getPreviousWeek(parts);
-                    break;
-                case 'ArrowRight':
-                    ev.preventDefault();
-                    partsToFocus = getNextDay(parts);
-                    break;
-                case 'ArrowLeft':
-                    ev.preventDefault();
-                    partsToFocus = getPreviousDay(parts);
-                    break;
-                case 'Home':
-                    ev.preventDefault();
-                    partsToFocus = getStartOfWeek(parts);
-                    break;
-                case 'End':
-                    ev.preventDefault();
-                    partsToFocus = getEndOfWeek(parts);
-                    break;
-                case 'PageUp':
-                    ev.preventDefault();
-                    partsToFocus = ev.shiftKey ? getPreviousYear(parts) : getPreviousMonth(parts);
-                    break;
-                case 'PageDown':
-                    ev.preventDefault();
-                    partsToFocus = ev.shiftKey ? getNextYear(parts) : getNextMonth(parts);
-                    break;
-                /**
-                 * Do not preventDefault here
-                 * as we do not want to override other
-                 * browser defaults such as pressing Enter/Space
-                 * to select a day.
-                 */
-                default:
-                    return;
-            }
-            /**
-             * If the day we want to move focus to is
-             * disabled, do not do anything.
-             */
-            if (isDayDisabled(partsToFocus, this.minParts, this.maxParts)) {
-                return;
-            }
-            this.setWorkingParts({
-                ...this.workingParts,
-                ...partsToFocus,
-            });
-            /**
-             * Give view a chance to re-render
-             * then move focus to the new working day
-             */
-            requestAnimationFrame(() => this.focusWorkingDay(currentMonth));
-        });
-    };
-    focusWorkingDay = (currentMonth) => {
-        /**
-         * Get the number of offset days so
-         * we know how much to offset our next selector by
-         * to grab the correct calendar-day element.
-         */
-        const { day, month, year } = this.workingParts;
-        const firstOfMonth = new Date(`${month}/1/${year}`).getDay();
-        const offset = firstOfMonth >= this.firstDayOfWeek
-            ? firstOfMonth - this.firstDayOfWeek
-            : 7 - (this.firstDayOfWeek - firstOfMonth);
-        if (day === null) {
-            return;
-        }
-        /**
-         * Get the calendar day element
-         * and focus it.
-         */
-        const dayEl = currentMonth.querySelector(`.calendar-day-wrapper:nth-of-type(${offset + day}) .calendar-day`);
-        if (dayEl) {
-            dayEl.focus();
-        }
-    };
-    processMinParts = () => {
-        const { min, defaultParts } = this;
-        if (min === undefined) {
-            this.minParts = undefined;
-            return;
-        }
-        this.minParts = parseMinParts(min, defaultParts);
-    };
-    processMaxParts = () => {
-        const { max, defaultParts } = this;
-        if (max === undefined) {
-            this.maxParts = undefined;
-            return;
-        }
-        this.maxParts = parseMaxParts(max, defaultParts);
-    };
-    initializeCalendarListener = () => {
-        const calendarBodyRef = this.calendarBodyRef;
-        if (!calendarBodyRef) {
-            return;
-        }
-        /**
-         * For performance reasons, we only render 3
-         * months at a time: The current month, the previous
-         * month, and the next month. We have a scroll listener
-         * on the calendar body to append/prepend new months.
-         *
-         * We can do this because Stencil is smart enough to not
-         * re-create the .calendar-month containers, but rather
-         * update the content within those containers.
-         *
-         * As an added bonus, WebKit has some troubles with
-         * scroll-snap-stop: always, so not rendering all of
-         * the months in a row allows us to mostly sidestep
-         * that issue.
-         */
-        const months = calendarBodyRef.querySelectorAll('.calendar-month');
-        const startMonth = months[0];
-        const workingMonth = months[1];
-        const endMonth = months[2];
-        const mode = getIonMode(this);
-        const needsiOSRubberBandFix = mode === 'ios' && typeof navigator !== 'undefined' && navigator.maxTouchPoints > 1;
-        /**
-         * Before setting up the scroll listener,
-         * scroll the middle month into view.
-         * scrollIntoView() will scroll entire page
-         * if element is not in viewport. Use scrollLeft instead.
-         */
-        writeTask(() => {
-            calendarBodyRef.scrollLeft = startMonth.clientWidth * (isRTL(this.el) ? -1 : 1);
-            const getChangedMonth = (parts) => {
-                const box = calendarBodyRef.getBoundingClientRect();
-                /**
-                 * If the current scroll position is all the way to the left
-                 * then we have scrolled to the previous month.
-                 * Otherwise, assume that we have scrolled to the next
-                 * month. We have a tolerance of 2px to account for
-                 * sub pixel rendering.
-                 *
-                 * Check below the next line ensures that we did not
-                 * swipe and abort (i.e. we swiped but we are still on the current month).
-                 */
-                const condition = isRTL(this.el) ? calendarBodyRef.scrollLeft >= -2 : calendarBodyRef.scrollLeft <= 2;
-                const month = condition ? startMonth : endMonth;
-                /**
-                 * The edge of the month must be lined up with
-                 * the edge of the calendar body in order for
-                 * the component to update. Otherwise, it
-                 * may be the case that the user has paused their
-                 * swipe or the browser has not finished snapping yet.
-                 * Rather than check if the x values are equal,
-                 * we give it a tolerance of 2px to account for
-                 * sub pixel rendering.
-                 */
-                const monthBox = month.getBoundingClientRect();
-                if (Math.abs(monthBox.x - box.x) > 2)
-                    return;
-                /**
-                 * If we're force-rendering a month, assume we've
-                 * scrolled to that and return it.
-                 *
-                 * If forceRenderDate is ever used in a context where the
-                 * forced month is not immediately auto-scrolled to, this
-                 * should be updated to also check whether `month` has the
-                 * same month and year as the forced date.
-                 */
-                const { forceRenderDate } = this;
-                if (forceRenderDate !== undefined) {
-                    return { month: forceRenderDate.month, year: forceRenderDate.year, day: forceRenderDate.day };
-                }
-                /**
-                 * From here, we can determine if the start
-                 * month or the end month was scrolled into view.
-                 * If no month was changed, then we can return from
-                 * the scroll callback early.
-                 */
-                if (month === startMonth) {
-                    return getPreviousMonth(parts);
-                }
-                else if (month === endMonth) {
-                    return getNextMonth(parts);
-                }
-                else {
-                    return;
-                }
-            };
-            const updateActiveMonth = () => {
-                if (needsiOSRubberBandFix) {
-                    calendarBodyRef.style.removeProperty('pointer-events');
-                    appliediOSRubberBandFix = false;
-                }
-                /**
-                 * If the month did not change
-                 * then we can return early.
-                 */
-                const newDate = getChangedMonth(this.workingParts);
-                if (!newDate)
-                    return;
-                const { month, day, year } = newDate;
-                if (isMonthDisabled({ month, year, day: null }, {
-                    minParts: { ...this.minParts, day: null },
-                    maxParts: { ...this.maxParts, day: null },
-                })) {
-                    return;
-                }
-                /**
-                 * Prevent scrolling for other browsers
-                 * to give the DOM time to update and the container
-                 * time to properly snap.
-                 */
-                calendarBodyRef.style.setProperty('overflow', 'hidden');
-                /**
-                 * Use a writeTask here to ensure
-                 * that the state is updated and the
-                 * correct month is scrolled into view
-                 * in the same frame. This is not
-                 * typically a problem on newer devices
-                 * but older/slower device may have a flicker
-                 * if we did not do this.
-                 */
-                writeTask(() => {
-                    this.setWorkingParts({
-                        ...this.workingParts,
-                        month,
-                        day: day,
-                        year,
-                    });
-                    calendarBodyRef.scrollLeft = workingMonth.clientWidth * (isRTL(this.el) ? -1 : 1);
-                    calendarBodyRef.style.removeProperty('overflow');
-                    if (this.resolveForceDateScrolling) {
-                        this.resolveForceDateScrolling();
-                    }
-                    const activeEl = this.el.shadowRoot.activeElement;
-                    if (activeEl && activeEl.classList.contains('calendar-day')) {
-                        activeEl.closest('.calendar-body')?.focus();
-                    }
-                });
-            };
-            /**
-             * When the container finishes scrolling we
-             * need to update the DOM with the selected month.
-             */
-            let scrollTimeout;
-            /**
-             * We do not want to attempt to set pointer-events
-             * multiple times within a single swipe gesture as
-             * that adds unnecessary work to the main thread.
-             */
-            let appliediOSRubberBandFix = false;
-            const scrollCallback = () => {
-                if (scrollTimeout) {
-                    clearTimeout(scrollTimeout);
-                }
-                /**
-                 * On iOS it is possible to quickly rubber band
-                 * the scroll area before the scroll timeout has fired.
-                 * This results in users reaching the end of the scrollable
-                 * container before the DOM has updated.
-                 * By setting `pointer-events: none` we can ensure that
-                 * subsequent swipes do not happen while the container
-                 * is snapping.
-                 */
-                if (!appliediOSRubberBandFix && needsiOSRubberBandFix) {
-                    calendarBodyRef.style.setProperty('pointer-events', 'none');
-                    appliediOSRubberBandFix = true;
-                }
-                // Wait ~3 frames
-                scrollTimeout = setTimeout(updateActiveMonth, 50);
-            };
-            calendarBodyRef.addEventListener('scroll', scrollCallback);
-            this.destroyCalendarListener = () => {
-                calendarBodyRef.removeEventListener('scroll', scrollCallback);
-            };
-        });
-    };
     connectedCallback() {
         this.clearFocusVisible = startFocusVisible(this.el).destroy;
         this.loadTimeout = setTimeout(() => {
@@ -913,66 +951,10 @@ export class Datetime {
         }
         this.loadTimeoutCleanup();
     }
-    /**
-     * Clean up all listeners except for the overlay
-     * listener. This is so that we can re-create the listeners
-     * if the datetime has been hidden/presented by a modal or popover.
-     */
-    destroyInteractionListeners = () => {
-        const { destroyCalendarListener, destroyKeyboardMO } = this;
-        if (destroyCalendarListener !== undefined) {
-            destroyCalendarListener();
-        }
-        if (destroyKeyboardMO !== undefined) {
-            destroyKeyboardMO();
-        }
-    };
     initializeListeners() {
         this.initializeCalendarListener();
         this.initializeKeyboardListeners();
     }
-    /**
-     * TODO(FW-6931): Remove this fallback upon solving the root cause
-     * Fallback to ensure the datetime becomes ready even if
-     * IntersectionObserver never reports it as intersecting.
-     *
-     * This is primarily used in environments where the observer
-     * might not fire as expected, such as when running under
-     * synthetic tests that stub IntersectionObserver.
-     */
-    ensureReadyIfVisible = () => {
-        if (this.el.classList.contains('datetime-ready')) {
-            return;
-        }
-        const rect = this.el.getBoundingClientRect();
-        if (rect.width === 0 || rect.height === 0) {
-            return;
-        }
-        this.markReady();
-    };
-    markReady = () => {
-        if (this.el.classList.contains('datetime-ready')) {
-            return;
-        }
-        this.initializeListeners();
-        /**
-         * TODO FW-2793: Datetime needs a frame to ensure that it
-         * can properly scroll contents into view. As a result
-         * we hide the scrollable content until after that frame
-         * so users do not see the content quickly shifting. The downside
-         * is that the content will pop into view a frame after. Maybe there
-         * is a better way to handle this?
-         */
-        writeTask(() => {
-            this.el.classList.add('datetime-ready');
-        });
-    };
-    loadTimeoutCleanup = () => {
-        if (this.loadTimeout) {
-            clearTimeout(this.loadTimeout);
-            this.loadTimeout = undefined;
-        }
-    };
     componentDidLoad() {
         const { el, intersectionTrackerRef } = this;
         /**
@@ -997,7 +979,7 @@ export class Datetime {
          * could cause the datetime to start at a visibility of 0, erroneously
          * triggering the `hiddenIO` observer below.
          */
-        raf(() => visibleIO?.observe(intersectionTrackerRef));
+        raf(() => visibleIO === null || visibleIO === void 0 ? void 0 : visibleIO.observe(intersectionTrackerRef));
         /**
          * TODO(FW-6931): Remove this fallback upon solving the root cause
          * Fallback: If IntersectionObserver never reports that the
@@ -1043,7 +1025,7 @@ export class Datetime {
             });
         };
         const hiddenIO = new IntersectionObserver(hiddenCallback, { threshold: 0, root: el });
-        raf(() => hiddenIO?.observe(intersectionTrackerRef));
+        raf(() => hiddenIO === null || hiddenIO === void 0 ? void 0 : hiddenIO.observe(intersectionTrackerRef));
         /**
          * Datetime uses Ionic components that emit
          * ionFocus and ionBlur. These events are
@@ -1116,119 +1098,6 @@ export class Datetime {
             this.ionRender.emit();
         });
     }
-    processValue = (value) => {
-        const hasValue = value !== null && value !== undefined && value !== '' && (!Array.isArray(value) || value.length > 0);
-        const valueToProcess = hasValue ? parseDate(value) : this.defaultParts;
-        const { minParts, maxParts, workingParts, el } = this;
-        this.warnIfIncorrectValueUsage();
-        /**
-         * Return early if the value wasn't parsed correctly, such as
-         * if an improperly formatted date string was provided.
-         */
-        if (!valueToProcess) {
-            return;
-        }
-        /**
-         * Datetime should only warn of out of bounds values
-         * if set by the user. If the `value` is undefined,
-         * we will default to today's date which may be out
-         * of bounds. In this case, the warning makes it look
-         * like the developer did something wrong which is
-         * not true.
-         */
-        if (hasValue) {
-            warnIfValueOutOfBounds(valueToProcess, minParts, maxParts);
-        }
-        /**
-         * If there are multiple values, clamp to the last one.
-         * This is because the last value is the one that the user
-         * has most recently interacted with.
-         */
-        const singleValue = Array.isArray(valueToProcess) ? valueToProcess[valueToProcess.length - 1] : valueToProcess;
-        const targetValue = clampDate(singleValue, minParts, maxParts);
-        const { month, day, year, hour, minute } = targetValue;
-        const ampm = parseAmPm(hour);
-        /**
-         * Since `activeParts` indicates a value that been explicitly selected
-         * either by the user or the app, only update `activeParts` if the
-         * `value` property is set.
-         */
-        if (hasValue) {
-            if (Array.isArray(valueToProcess)) {
-                this.activeParts = [...valueToProcess];
-            }
-            else {
-                this.activeParts = {
-                    month,
-                    day,
-                    year,
-                    hour,
-                    minute,
-                    ampm,
-                };
-            }
-        }
-        else {
-            /**
-             * Reset the active parts if the value is not set.
-             * This will clear the selected calendar day when
-             * performing a clear action or using the reset() method.
-             */
-            this.activeParts = [];
-        }
-        const didChangeMonth = (month !== undefined && month !== workingParts.month) || (year !== undefined && year !== workingParts.year);
-        const bodyIsVisible = el.classList.contains('datetime-ready');
-        const { isGridStyle, showMonthAndYear } = this;
-        if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
-            /**
-             * Only animate if:
-             * 1. We're using grid style (wheel style pickers should just jump to new value)
-             * 2. The month and/or year actually changed, and both are defined (otherwise there's nothing to animate to)
-             * 3. The calendar body is visible (prevents animation when in collapsed datetime-button, for example)
-             * 4. The month/year picker is not open (since you wouldn't see the animation anyway)
-             */
-            this.animateToDate(targetValue);
-        }
-        else {
-            this.setWorkingParts({
-                month,
-                day,
-                year,
-                hour,
-                minute,
-                ampm,
-            });
-        }
-    };
-    animateToDate = async (targetValue) => {
-        const { workingParts } = this;
-        /**
-         * Tell other render functions that we need to force the
-         * target month to appear in place of the actual next/prev month.
-         * Because this is a State variable, a rerender will be triggered
-         * automatically, updating the rendered months.
-         */
-        this.forceRenderDate = targetValue;
-        /**
-         * Flag that we've started scrolling to the forced date.
-         * The resolve function will be called by the datetime's
-         * scroll listener when it's done updating everything.
-         * This is a replacement for making prev/nextMonth async,
-         * since the logic we're waiting on is in a listener.
-         */
-        const forceDateScrollingPromise = new Promise((resolve) => {
-            this.resolveForceDateScrolling = resolve;
-        });
-        /**
-         * Animate smoothly to the forced month. This will also update
-         * workingParts and correct the surrounding months for us.
-         */
-        const targetMonthIsBefore = isBefore(targetValue, workingParts);
-        targetMonthIsBefore ? this.prevMonth() : this.nextMonth();
-        await forceDateScrollingPromise;
-        this.resolveForceDateScrolling = undefined;
-        this.forceRenderDate = undefined;
-    };
     componentWillLoad() {
         const { el, formatOptions, highlightedDates, multiple, presentation, preferWheel } = this;
         if (multiple) {
@@ -1279,58 +1148,13 @@ export class Datetime {
             'interactive-disabled': this.disabled,
         });
     }
-    onFocus = () => {
-        this.ionFocus.emit();
-    };
-    onBlur = () => {
-        this.ionBlur.emit();
-    };
-    hasValue = () => {
-        return this.value != null;
-    };
-    nextMonth = () => {
-        const calendarBodyRef = this.calendarBodyRef;
-        if (!calendarBodyRef) {
-            return;
-        }
-        const nextMonth = calendarBodyRef.querySelector('.calendar-month:last-of-type');
-        if (!nextMonth) {
-            return;
-        }
-        const left = nextMonth.offsetWidth * 2;
-        const scrollMode = config.getBoolean('animated', true) ? 'smooth' : 'instant';
-        calendarBodyRef.scrollTo({
-            top: 0,
-            left: left * (isRTL(this.el) ? -1 : 1),
-            behavior: scrollMode,
-        });
-    };
-    prevMonth = () => {
-        const calendarBodyRef = this.calendarBodyRef;
-        if (!calendarBodyRef) {
-            return;
-        }
-        const prevMonth = calendarBodyRef.querySelector('.calendar-month:first-of-type');
-        if (!prevMonth) {
-            return;
-        }
-        const left = prevMonth.offsetWidth * 2;
-        const scrollMode = config.getBoolean('animated', true) ? 'smooth' : 'instant';
-        calendarBodyRef.scrollTo({
-            top: 0,
-            left: left * (isRTL(this.el) ? 1 : -1),
-            behavior: scrollMode,
-        });
-    };
-    toggleMonthAndYearView = () => {
-        this.showMonthAndYear = !this.showMonthAndYear;
-    };
     /**
      * Universal render methods
      * These are pieces of datetime that
      * are rendered independently of presentation.
      */
     renderFooter() {
+        const theme = getIonTheme(this);
         const { disabled, readonly, showDefaultButtons, showClearButton } = this;
         /**
          * The cancel, clear, and confirm buttons
@@ -1338,6 +1162,7 @@ export class Datetime {
          * is disabled or readonly.
          */
         const isButtonDisabled = disabled || readonly;
+        const confirmFill = theme === 'ionic' ? 'solid' : undefined;
         const hasSlottedButtons = this.el.querySelector('[slot="buttons"]') !== null;
         if (!hasSlottedButtons && !showDefaultButtons && !showClearButton) {
             return;
@@ -1356,7 +1181,7 @@ export class Datetime {
         return (h("div", { class: "datetime-footer" }, h("div", { class: "datetime-buttons" }, h("div", { class: {
                 ['datetime-action-buttons']: true,
                 ['has-clear-button']: this.showClearButton,
-            } }, h("slot", { name: "buttons" }, h("ion-buttons", null, showDefaultButtons && (h("ion-button", { id: "cancel-button", color: this.color, onClick: () => this.cancel(true), disabled: isButtonDisabled }, this.cancelText)), h("div", { class: "datetime-action-buttons-container" }, showClearButton && (h("ion-button", { id: "clear-button", color: this.color, onClick: () => clearButtonClick(), disabled: isButtonDisabled }, this.clearText)), showDefaultButtons && (h("ion-button", { id: "confirm-button", color: this.color, onClick: () => this.confirm(true), disabled: isButtonDisabled }, this.doneText)))))))));
+            } }, h("slot", { name: "buttons" }, showDefaultButtons && (h("ion-button", { id: "cancel-button", color: this.color, onClick: () => this.cancel(true), disabled: isButtonDisabled }, this.cancelText)), h("div", { class: "datetime-action-buttons-container" }, showClearButton && (h("ion-button", { id: "clear-button", color: this.color, onClick: () => clearButtonClick(), disabled: isButtonDisabled }, this.clearText)), showDefaultButtons && (h("ion-button", { id: "confirm-button", fill: confirmFill, color: this.color, onClick: () => this.confirm(true), disabled: isButtonDisabled }, this.doneText))))))));
     }
     /**
      * Wheel picker render methods
@@ -1423,10 +1248,7 @@ export class Datetime {
                 catch (e) {
                     printIonError('[ion-datetime] - Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', e);
                 }
-                return {
-                    ...itemObject,
-                    disabled,
-                };
+                return Object.assign(Object.assign({}, itemObject), { disabled });
             });
         }
         /**
@@ -1439,16 +1261,10 @@ export class Datetime {
         return (h("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a date", class: "date-column", color: this.color, disabled: disabled, value: todayString, onIonChange: (ev) => {
                 const { value } = ev.detail;
                 const findPart = parts.find(({ month, day, year }) => value === `${year}-${month}-${day}`);
-                this.setWorkingParts({
-                    ...workingParts,
-                    ...findPart,
-                });
-                this.setActiveParts({
-                    ...activePart,
-                    ...findPart,
-                });
+                this.setWorkingParts(Object.assign(Object.assign({}, workingParts), findPart));
+                this.setActiveParts(Object.assign(Object.assign({}, activePart), findPart));
                 ev.stopPropagation();
-            } }, items.map((item) => (h("ion-picker-column-option", { color: this.color, 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)))));
+            } }, 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;
@@ -1481,10 +1297,7 @@ export class Datetime {
                 catch (e) {
                     printIonError('[ion-datetime] - Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', e);
                 }
-                return {
-                    ...dayObject,
-                    disabled,
-                };
+                return Object.assign(Object.assign({}, dayObject), { disabled });
             });
         }
         const shouldRenderYears = forcePresentation !== 'month' && forcePresentation !== 'time';
@@ -1513,23 +1326,18 @@ export class Datetime {
         return renderArray;
     }
     renderDayPickerColumn(days) {
+        var _a;
         if (days.length === 0) {
             return [];
         }
         const { disabled, workingParts } = this;
         const activePart = this.getActivePartsWithFallback();
-        const pickerColumnValue = (workingParts.day !== null ? workingParts.day : this.defaultParts.day) ?? undefined;
+        const pickerColumnValue = (_a = (workingParts.day !== null ? workingParts.day : this.defaultParts.day)) !== null && _a !== void 0 ? _a : undefined;
         return (h("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a day", class: "day-column", color: this.color, disabled: disabled, value: pickerColumnValue, onIonChange: (ev) => {
-                this.setWorkingParts({
-                    ...workingParts,
-                    day: ev.detail.value,
-                });
-                this.setActiveParts({
-                    ...activePart,
-                    day: ev.detail.value,
-                });
+                this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { day: ev.detail.value }));
+                this.setActiveParts(Object.assign(Object.assign({}, activePart), { day: ev.detail.value }));
                 ev.stopPropagation();
-            } }, days.map((day) => (h("ion-picker-column-option", { color: this.color, 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)))));
+            } }, 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) {
@@ -1538,19 +1346,13 @@ export class Datetime {
         const { disabled, workingParts } = this;
         const activePart = this.getActivePartsWithFallback();
         return (h("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a month", class: "month-column", color: this.color, disabled: disabled, value: workingParts.month, onIonChange: (ev) => {
-                this.setWorkingParts({
-                    ...workingParts,
-                    month: ev.detail.value,
-                });
+                this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { month: ev.detail.value }));
                 // Month wheel is navigation-only in multi-select mode as a fix for https://github.com/ionic-team/ionic-framework/issues/29673
                 if (!this.multiple) {
-                    this.setActiveParts({
-                        ...activePart,
-                        month: ev.detail.value,
-                    });
+                    this.setActiveParts(Object.assign(Object.assign({}, activePart), { month: ev.detail.value }));
                 }
                 ev.stopPropagation();
-            } }, months.map((month) => (h("ion-picker-column-option", { color: this.color, 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)))));
+            } }, 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) {
@@ -1559,19 +1361,13 @@ export class Datetime {
         const { disabled, workingParts } = this;
         const activePart = this.getActivePartsWithFallback();
         return (h("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a year", class: "year-column", color: this.color, disabled: disabled, value: workingParts.year, onIonChange: (ev) => {
-                this.setWorkingParts({
-                    ...workingParts,
-                    year: ev.detail.value,
-                });
+                this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { year: ev.detail.value }));
                 // Year wheel is navigation-only in multi-select mode as a fix for https://github.com/ionic-team/ionic-framework/issues/29673
                 if (!this.multiple) {
-                    this.setActiveParts({
-                        ...activePart,
-                        year: ev.detail.value,
-                    });
+                    this.setActiveParts(Object.assign(Object.assign({}, activePart), { year: ev.detail.value }));
                 }
                 ev.stopPropagation();
-            } }, years.map((year) => (h("ion-picker-column-option", { color: this.color, 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)))));
+            } }, 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)) {
@@ -1601,16 +1397,10 @@ export class Datetime {
             return [];
         const activePart = this.getActivePartsWithFallback();
         return (h("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select an hour", color: this.color, disabled: disabled, value: activePart.hour, numericInput: true, onIonChange: (ev) => {
-                this.setWorkingParts({
-                    ...workingParts,
-                    hour: ev.detail.value,
-                });
-                this.setActiveParts({
-                    ...this.getActivePartsWithFallback(),
-                    hour: ev.detail.value,
-                });
+                this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { hour: ev.detail.value }));
+                this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { hour: ev.detail.value }));
                 ev.stopPropagation();
-            } }, hoursData.map((hour) => (h("ion-picker-column-option", { color: this.color, 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)))));
+            } }, 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;
@@ -1618,16 +1408,10 @@ export class Datetime {
             return [];
         const activePart = this.getActivePartsWithFallback();
         return (h("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a minute", color: this.color, disabled: disabled, value: activePart.minute, numericInput: true, onIonChange: (ev) => {
-                this.setWorkingParts({
-                    ...workingParts,
-                    minute: ev.detail.value,
-                });
-                this.setActiveParts({
-                    ...this.getActivePartsWithFallback(),
-                    minute: ev.detail.value,
-                });
+                this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { minute: ev.detail.value }));
+                this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { minute: ev.detail.value }));
                 ev.stopPropagation();
-            } }, minutesData.map((minute) => (h("ion-picker-column-option", { color: this.color, 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)))));
+            } }, 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;
@@ -1638,18 +1422,10 @@ export class Datetime {
         const isDayPeriodRTL = isLocaleDayPeriodRTL(this.locale);
         return (h("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a day period", style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, onIonChange: (ev) => {
                 const hour = calculateHourFromAMPM(workingParts, ev.detail.value);
-                this.setWorkingParts({
-                    ...workingParts,
-                    ampm: ev.detail.value,
-                    hour,
-                });
-                this.setActiveParts({
-                    ...this.getActivePartsWithFallback(),
-                    ampm: ev.detail.value,
-                    hour,
-                });
+                this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm: ev.detail.value, hour }));
+                this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { ampm: ev.detail.value, hour }));
                 ev.stopPropagation();
-            } }, dayPeriodData.map((dayPeriod) => (h("ion-picker-column-option", { color: this.color, 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)))));
+            } }, 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;
@@ -1662,10 +1438,8 @@ export class Datetime {
     /**
      * Grid Render Methods
      */
-    renderCalendarHeader(mode) {
-        const { disabled } = this;
-        const expandedIcon = mode === 'ios' ? chevronDown : caretUpSharp;
-        const collapsedIcon = mode === 'ios' ? chevronForward : caretDownSharp;
+    renderCalendarHeader(theme) {
+        const { disabled, datetimeNextIcon, datetimePreviousIcon, datetimeCollapsedIcon, datetimeExpandedIcon } = this;
         const prevMonthDisabled = disabled || isPrevMonthDisabled(this.workingParts, this.minParts, this.maxParts);
         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
@@ -1674,7 +1448,7 @@ export class Datetime {
                 '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(), part: "navigation-button previous-button" }, 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(), part: "navigation-button next-button" }, 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", part: "calendar-days-of-week" }, getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map((d) => {
+            }, 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), theme !== 'ionic' && (h("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? datetimeExpandedIcon : datetimeCollapsedIcon, lazy: false, flipRtl: true }))), theme === 'md' && h("ion-ripple-effect", null))), h("div", { class: "calendar-next-prev" }, h("ion-button", { "aria-label": "Previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth(), part: "navigation-button previous-button" }, h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: datetimePreviousIcon, lazy: false, flipRtl: true })), h("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth(), part: "navigation-button next-button" }, h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: datetimeNextIcon, lazy: false, flipRtl: true })))), h("div", { class: "calendar-days-of-week", "aria-hidden": "true", part: "calendar-days-of-week" }, getDaysOfWeek(this.locale, theme, this.firstDayOfWeek % 7).map((d) => {
             return h("div", { class: "day-of-week" }, d);
         }))));
     }
@@ -1693,8 +1467,8 @@ export class Datetime {
                 // The day is not used when checking if a month is disabled.
                 // Users should be able to access the min or max month, even if the
                 // min/max date is out of bounds (e.g. min is set to Feb 15, Feb should not be disabled).
-                minParts: { ...this.minParts, day: null },
-                maxParts: { ...this.maxParts, day: null },
+                minParts: Object.assign(Object.assign({}, this.minParts), { day: null }),
+                maxParts: Object.assign(Object.assign({}, this.maxParts), { day: null }),
             });
         // The working month should never have swipe disabled.
         // Otherwise the CSS scroll snap will not work and the user
@@ -1803,24 +1577,18 @@ export class Datetime {
                     if (isAdjacentDay) {
                         // The user selected a day outside the current month. Ignore this button, as the month will be re-rendered.
                         this.el.blur();
-                        this.activeParts = { ...activePart, ...referenceParts };
+                        this.activeParts = Object.assign(Object.assign({}, activePart), referenceParts);
                         this.animateToDate(referenceParts);
                         this.confirm();
                     }
                     else {
-                        this.setWorkingParts({
-                            ...this.workingParts,
-                            ...referenceParts,
-                        });
+                        this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), referenceParts));
                         // Multiple only needs date info so we can wipe out other fields like time.
                         if (multiple) {
                             this.setActiveParts(referenceParts, isActive);
                         }
                         else {
-                            this.setActiveParts({
-                                ...activePart,
-                                ...referenceParts,
-                            });
+                            this.setActiveParts(Object.assign(Object.assign({}, activePart), referenceParts));
                         }
                     }
                 }
@@ -1832,8 +1600,8 @@ export class Datetime {
             return this.renderMonth(month, year);
         })));
     }
-    renderCalendar(mode) {
-        return (h("div", { class: "datetime-calendar", key: "datetime-calendar" }, this.renderCalendarHeader(mode), this.renderCalendarBody()));
+    renderCalendar(theme) {
+        return (h("div", { class: "datetime-calendar", key: "datetime-calendar" }, this.renderCalendarHeader(theme), this.renderCalendarBody()));
     }
     renderTimeLabel() {
         const hasSlottedTimeLabel = this.el.querySelector('[slot="time-label"]') !== null;
@@ -1863,7 +1631,7 @@ export class Datetime {
                         await popoverRef.onWillDismiss();
                         this.isTimePopoverOpen = false;
                     }
-                } }, getLocalizedTime(locale, activePart, computedHourCycle, formatOptions?.time)),
+                } }, getLocalizedTime(locale, activePart, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time)),
             h("ion-popover", { alignment: "center", translucent: true, overlayIndex: 1, arrow: false, onWillPresent: (ev) => {
                     /**
                      * Intersection Observers do not consistently fire between Blink and Webkit
@@ -1886,6 +1654,7 @@ export class Datetime {
         ];
     }
     getHeaderSelectedDateText() {
+        var _a;
         const { activeParts, formatOptions, multiple, titleSelectedDatesFormatter } = this;
         const isArray = Array.isArray(activeParts);
         let headerText;
@@ -1902,7 +1671,7 @@ export class Datetime {
         }
         else {
             // for exactly 1 day selected (multiple set or not), show a formatted version of that
-            headerText = getLocalizedDateTime(this.locale, this.getActivePartsWithFallback(), formatOptions?.date ?? { weekday: 'short', month: 'short', day: 'numeric' });
+            headerText = getLocalizedDateTime(this.locale, this.getActivePartsWithFallback(), (_a = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _a !== void 0 ? _a : { weekday: 'short', month: 'short', day: 'numeric' });
         }
         return headerText;
     }
@@ -1940,7 +1709,7 @@ export class Datetime {
      * Render entry point
      * All presentation types are rendered from here.
      */
-    renderDatetime(mode) {
+    renderDatetime(theme) {
         const { presentation, preferWheel } = this;
         /**
          * Certain presentation types have separate grid and wheel displays.
@@ -1954,7 +1723,7 @@ export class Datetime {
             case 'date-time':
                 return [
                     this.renderHeader(),
-                    this.renderCalendar(mode),
+                    this.renderCalendar(theme),
                     this.renderCalendarViewMonthYearPicker(),
                     this.renderTime(),
                     this.renderFooter(),
@@ -1963,7 +1732,7 @@ export class Datetime {
                 return [
                     this.renderHeader(),
                     this.renderTime(),
-                    this.renderCalendar(mode),
+                    this.renderCalendar(theme),
                     this.renderCalendarViewMonthYearPicker(),
                     this.renderFooter(),
                 ];
@@ -1976,47 +1745,119 @@ export class Datetime {
             default:
                 return [
                     this.renderHeader(),
-                    this.renderCalendar(mode),
+                    this.renderCalendar(theme),
                     this.renderCalendarViewMonthYearPicker(),
                     this.renderFooter(),
                 ];
         }
     }
+    /**
+     * Get the icon to use for the next icon.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get datetimeNextIcon() {
+        // Determine the theme and map to default icons
+        const theme = getIonTheme(this);
+        const defaultIcons = {
+            ios: chevronForward,
+            ionic: caretRightRegular,
+            md: chevronForward,
+        };
+        // Get the default icon based on the theme, falling back to 'md' icon if necessary
+        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+        // Return the configured datetime next icon or the default icon
+        return config.get('datetimeNextIcon', defaultIcon);
+    }
+    /**
+     * Get the icon to use for the previous icon.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get datetimePreviousIcon() {
+        // Determine the theme and map to default icons
+        const theme = getIonTheme(this);
+        const defaultIcons = {
+            ios: chevronBack,
+            ionic: caretLeftRegular,
+            md: chevronBack,
+        };
+        // Get the default icon based on the theme, falling back to 'md' icon if necessary
+        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+        // Return the configured datetime previous icon or the default icon
+        return config.get('datetimePreviousIcon', defaultIcon);
+    }
+    /**
+     * Get the icon to use for the show month and year icon.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get datetimeCollapsedIcon() {
+        // Determine the theme and map to default icons
+        const theme = getIonTheme(this);
+        const defaultIcons = {
+            ios: chevronForward,
+            ionic: undefined,
+            md: caretDownSharp,
+        };
+        // Get the default icon based on the theme, falling back to 'md' icon if necessary
+        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+        // Return the configured datetime show month and year icon or the default icon
+        return config.get('datetimeCollapsedIcon', defaultIcon);
+    }
+    /**
+     * Get the icon to use for the hide month and year icon.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get datetimeExpandedIcon() {
+        // Determine the theme and map to default icons
+        const theme = getIonTheme(this);
+        const defaultIcons = {
+            ios: chevronDown,
+            ionic: undefined,
+            md: caretUpSharp,
+        };
+        // Get the default icon based on the theme, falling back to 'md' icon if necessary
+        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+        // Return the configured datetime hide month and year icon or the default icon
+        return config.get('datetimeExpandedIcon', defaultIcon);
+    }
     render() {
         const { name, value, disabled, el, color, readonly, showMonthAndYear, preferWheel, presentation, size, isGridStyle, } = this;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const isMonthAndYearPresentation = presentation === 'year' || presentation === 'month' || presentation === 'month-year';
         const shouldShowMonthAndYear = showMonthAndYear || isMonthAndYearPresentation;
         const monthYearPickerOpen = showMonthAndYear && !isMonthAndYearPresentation;
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (h(Host, { key: 'd8e6dfe5e3bffb1c38a3e37b63b3aec099f40d29', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: {
-                ...createColorClasses(color, {
-                    [mode]: true,
-                    ['datetime-readonly']: readonly,
-                    ['datetime-disabled']: disabled,
-                    'show-month-and-year': shouldShowMonthAndYear,
-                    'month-year-picker-open': monthYearPickerOpen,
-                    [`datetime-presentation-${presentation}`]: true,
-                    [`datetime-size-${size}`]: true,
-                    [`datetime-prefer-wheel`]: hasWheelVariant,
-                    [`datetime-grid`]: isGridStyle,
-                }),
-            } }, h("div", { key: '20889d3c68dd5109633c0e214411a63d6f3025bb', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+        return (h(Host, { key: '04fb1740b1d722d20cdbb32b19d9a3b7d3334db0', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+                [theme]: true,
+                ['datetime-readonly']: readonly,
+                ['datetime-disabled']: disabled,
+                'show-month-and-year': shouldShowMonthAndYear,
+                'month-year-picker-open': monthYearPickerOpen,
+                [`datetime-presentation-${presentation}`]: true,
+                [`datetime-size-${size}`]: true,
+                [`datetime-prefer-wheel`]: hasWheelVariant,
+                [`datetime-grid`]: isGridStyle,
+            })) }, h("div", { key: '0cbb85b4c71e521c81b37a98da0123a1c3a15fac', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(theme)));
     }
     static get is() { return "ion-datetime"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["datetime.ios.scss"],
-            "md": ["datetime.md.scss"]
+            "md": ["datetime.md.scss"],
+            "ionic": ["datetime.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["datetime.ios.css"],
-            "md": ["datetime.md.css"]
+            "md": ["datetime.md.css"],
+            "ionic": ["datetime.ionic.css"]
         };
     }
     static get properties() {
@@ -2045,7 +1886,8 @@ export class Datetime {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "color"
+                "attribute": "color",
+                "defaultValue": "'primary'"
             },
             "name": {
                 "type": "string",