voyager-ionic-core 8.8.12 → 9.0.1

package/dist/esm/{ion-datetime_3.entry.js → ion-datetime.entry.js}

@@ -1,23 +1,541 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { j as printIonError, f as printIonWarning, r as registerInstance, c as createEvent, w as writeTask, h, d as Host, g as getElement } from './index-tcQvqkiX.js';
+import { j as printIonError, f as printIonWarning, r as registerInstance, c as createEvent, w as writeTask, e as config, h, d as Host, g as getElement } from './index-C23AVPx9.js';
 import { startFocusVisible } from './focus-visible-BmVRXR1y.js';
-import { r as raf, g as getElementRoot, a as renderHiddenInput, e as clamp } from './helpers-HEqiOzXb.js';
-import { F as FOCUS_TRAP_DISABLE_CLASS, d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-TbiM4mdr.js';
-import { i as isRTL } from './dir-C53feagD.js';
-import { c as createColorClasses, g as getClassMap } from './theme-DiVJyqlX.js';
-import { l as chevronDown, o as caretUpSharp, p as chevronForward, q as caretDownSharp, c as chevronBack } from './index-DV3sJJW8.js';
-import { b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
-import { i as isBefore, a as isAfter, g as getPreviousMonth, b as getNextMonth, c as isSameDay, d as getDay, e as generateDayAriaLabel, v as validateParts, f as getPartsFromCalendarDay, h as getNextYear, j as getPreviousYear, k as getEndOfWeek, l as getStartOfWeek, m as getPreviousDay, n as getNextDay, o as getPreviousWeek, p as getNextWeek, q as parseMinParts, r as parseMaxParts, s as parseDate, w as warnIfValueOutOfBounds, t as parseAmPm, u as clampDate, x as convertToArrayOfNumbers, y as convertDataToISO, z as getToday, A as getClosestValidDate, B as generateMonths, C as getNumDaysInMonth, D as getCombinedDateColumnData, E as getMonthColumnData, F as getDayColumnData, G as getYearColumnData, H as isMonthFirstLocale, I as getTimeColumnsData, J as isLocaleDayPeriodRTL, K as calculateHourFromAMPM, L as getDaysOfWeek, M as getMonthAndYear, N as getDaysOfMonth, O as getHourCycle, P as getLocalizedTime, Q as getLocalizedDateTime, R as formatValue } from './data-DZI70dKr.js';
-import { c as createLockController } from './lock-controller-B-hirT0v.js';
-import { c as createAnimation } from './animation-DLJpuoEz.js';
-import { a as hapticSelectionChanged, h as hapticSelectionEnd, b as hapticSelectionStart } from './haptic-DzAMWJuk.js';
+import { r as raf, g as getElementRoot, a as renderHiddenInput } from './helpers-BSmc0nst.js';
+import { F as FOCUS_TRAP_DISABLE_CLASS } from './overlays-DKE0DgvE.js';
+import { i as isRTL } from './dir-Dojwmvde.js';
+import { c as createColorClasses } from './theme-byZM6qHV.js';
+import { b as chevronDown, d as caretUpSharp, e as chevronForward, f as caretDownSharp, c as chevronBack } from './index-BvabGprD.js';
+import { b as getIonMode } from './ionic-global-ZXjCXKH0.js';
+import { r as removeDateTzOffset, g as getNextMonth, a as getPreviousMonth, b as getTodayLabel, c as getYear, d as getHourCycle, e as getInternalHourValue, f as getFormattedHour, h as addTimePadding, i as getLocalizedDayPeriod, j as isBefore, k as isSameDay, l as isAfter, m as is24Hour, n as getNumDaysInMonth, o as getDay, p as generateDayAriaLabel, v as validateParts, q as getPartsFromCalendarDay, s as getNextYear, t as getPreviousYear, u as getEndOfWeek, w as getStartOfWeek, x as getPreviousDay, y as getNextDay, z as getPreviousWeek, A as getNextWeek, B as parseMinParts, C as parseMaxParts, D as parseDate, E as warnIfValueOutOfBounds, F as parseAmPm, G as clampDate, H as convertToArrayOfNumbers, I as convertDataToISO, J as getClosestValidDate, K as isMonthFirstLocale, L as isLocaleDayPeriodRTL, M as calculateHourFromAMPM, N as getMonthAndYear, O as getLocalizedTime, P as getLocalizedDateTime, Q as formatValue } from './format-DDFE9jM5.js';
 import './index-ZjP4CjeZ.js';
-import './hardware-back-button-B93Gru0Y.js';
-import './framework-delegate-FnPGymXL.js';
-import './gesture-controller-BTEOs1at.js';
-import './capacitor-CFERIeaU.js';
+import './hardware-back-button-DmkiRgOT.js';
+import './framework-delegate-BwNhx9NR.js';
+import './gesture-controller-B_gJaBk0.js';
+
+/**
+ * Returns the current date as
+ * an ISO string in the user's
+ * time zone.
+ */
+const getToday = () => {
+    /**
+     * ion-datetime intentionally does not
+     * parse time zones/do automatic time zone
+     * conversion when accepting user input.
+     * However when we get today's date string,
+     * we want it formatted relative to the user's
+     * time zone.
+     *
+     * When calling toISOString(), the browser
+     * will convert the date to UTC time by either adding
+     * or subtracting the time zone offset.
+     * To work around this, we need to either add
+     * or subtract the time zone offset to the Date
+     * object prior to calling toISOString().
+     * This allows us to get an ISO string
+     * that is in the user's time zone.
+     */
+    return removeDateTzOffset(new Date()).toISOString();
+};
+const minutes = [
+    0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31,
+    32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59,
+];
+// h11 hour system uses 0-11. Midnight starts at 0:00am.
+const hour11 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+// h12 hour system uses 0-12. Midnight starts at 12:00am.
+const hour12 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+// h23 hour system uses 0-23. Midnight starts at 0:00.
+const hour23 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23];
+// h24 hour system uses 1-24. Midnight starts at 24:00.
+const hour24 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 0];
+/**
+ * Given a locale and a mode,
+ * return an array with formatted days
+ * of the week. iOS should display days
+ * such as "Mon" or "Tue".
+ * MD should display days such as "M"
+ * or "T".
+ */
+const getDaysOfWeek = (locale, mode, firstDayOfWeek = 0) => {
+    /**
+     * Nov 1st, 2020 starts on a Sunday.
+     * ion-datetime assumes weeks start on Sunday,
+     * but is configurable via `firstDayOfWeek`.
+     */
+    const weekdayFormat = mode === 'ios' ? 'short' : 'narrow';
+    const intl = new Intl.DateTimeFormat(locale, { weekday: weekdayFormat });
+    const startDate = new Date('11/01/2020');
+    const daysOfWeek = [];
+    /**
+     * For each day of the week,
+     * get the day name.
+     */
+    for (let i = firstDayOfWeek; i < firstDayOfWeek + 7; i++) {
+        const currentDate = new Date(startDate);
+        currentDate.setDate(currentDate.getDate() + i);
+        daysOfWeek.push(intl.format(currentDate));
+    }
+    return daysOfWeek;
+};
+/**
+ * Returns an array containing all of the
+ * days in a month for a given year. Values are
+ * aligned with a week calendar starting on
+ * the firstDayOfWeek value (Sunday by default)
+ * using null values.
+ */
+const getDaysOfMonth = (month, year, firstDayOfWeek, showAdjacentDays = false) => {
+    const numDays = getNumDaysInMonth(month, year);
+    let previousNumDays; //previous month number of days
+    if (month === 1) {
+        // If the current month is January, the previous month should be December of the previous year.
+        previousNumDays = getNumDaysInMonth(12, year - 1);
+    }
+    else {
+        // Otherwise, the previous month should be the current month - 1 of the same year.
+        previousNumDays = getNumDaysInMonth(month - 1, year);
+    }
+    const firstOfMonth = new Date(`${month}/1/${year}`).getDay();
+    /**
+     * To get the first day of the month aligned on the correct
+     * day of the week, we need to determine how many "filler" days
+     * to generate. These filler days as empty/disabled buttons
+     * that fill the space of the days of the week before the first
+     * of the month.
+     *
+     * There are two cases here:
+     *
+     * 1. If firstOfMonth = 4, firstDayOfWeek = 0 then the offset
+     * is (4 - (0 + 1)) = 3. Since the offset loop goes from 0 to 3 inclusive,
+     * this will generate 4 filler days (0, 1, 2, 3), and then day of week 4 will have
+     * the first day of the month.
+     *
+     * 2. If firstOfMonth = 2, firstDayOfWeek = 4 then the offset
+     * is (6 - (4 - 2)) = 4. Since the offset loop goes from 0 to 4 inclusive,
+     * this will generate 5 filler days (0, 1, 2, 3, 4), and then day of week 5 will have
+     * the first day of the month.
+     */
+    const offset = firstOfMonth >= firstDayOfWeek ? firstOfMonth - (firstDayOfWeek + 1) : 6 - (firstDayOfWeek - firstOfMonth);
+    let days = [];
+    for (let i = 1; i <= numDays; i++) {
+        days.push({ day: i, dayOfWeek: (offset + i) % 7, isAdjacentDay: false });
+    }
+    if (showAdjacentDays) {
+        for (let i = 0; i <= offset; i++) {
+            // Using offset create previous month adjacent day, starting from last day
+            days = [{ day: previousNumDays - i, dayOfWeek: (previousNumDays - i) % 7, isAdjacentDay: true }, ...days];
+        }
+        // Calculate positiveOffset
+        // The calendar will display 42 days (6 rows of 7 columns)
+        // Knowing this the offset is 41 (we start at index 0)
+        // minus (the previous offset + the current month days)
+        const positiveOffset = 41 - (numDays + offset);
+        for (let i = 0; i < positiveOffset; i++) {
+            days.push({ day: i + 1, dayOfWeek: (numDays + offset + i) % 7, isAdjacentDay: true });
+        }
+    }
+    else {
+        for (let i = 0; i <= offset; i++) {
+            days = [{ day: null, dayOfWeek: null, isAdjacentDay: false }, ...days];
+        }
+    }
+    return days;
+};
+/**
+ * Returns an array of pre-defined hour
+ * values based on the provided hourCycle.
+ */
+const getHourData = (hourCycle) => {
+    switch (hourCycle) {
+        case 'h11':
+            return hour11;
+        case 'h12':
+            return hour12;
+        case 'h23':
+            return hour23;
+        case 'h24':
+            return hour24;
+        default:
+            throw new Error(`Invalid hour cycle "${hourCycle}"`);
+    }
+};
+/**
+ * Given a local, reference datetime parts and option
+ * max/min bound datetime parts, calculate the acceptable
+ * hour and minute values according to the bounds and locale.
+ */
+const generateTime = (locale, refParts, hourCycle = 'h12', minParts, maxParts, hourValues, minuteValues) => {
+    const computedHourCycle = getHourCycle(locale, hourCycle);
+    const use24Hour = is24Hour(computedHourCycle);
+    let processedHours = getHourData(computedHourCycle);
+    let processedMinutes = minutes;
+    let isAMAllowed = true;
+    let isPMAllowed = true;
+    if (hourValues) {
+        processedHours = processedHours.filter((hour) => hourValues.includes(hour));
+    }
+    if (minuteValues) {
+        processedMinutes = processedMinutes.filter((minute) => minuteValues.includes(minute));
+    }
+    if (minParts) {
+        /**
+         * If ref day is the same as the
+         * minimum allowed day, filter hour/minute
+         * values according to min hour and minute.
+         */
+        if (isSameDay(refParts, minParts)) {
+            /**
+             * Users may not always set the hour/minute for
+             * min value (i.e. 2021-06-02) so we should allow
+             * all hours/minutes in that case.
+             */
+            if (minParts.hour !== undefined) {
+                processedHours = processedHours.filter((hour) => {
+                    const convertedHour = refParts.ampm === 'pm' ? (hour + 12) % 24 : hour;
+                    return (use24Hour ? hour : convertedHour) >= minParts.hour;
+                });
+                isAMAllowed = minParts.hour < 13;
+            }
+            if (minParts.minute !== undefined) {
+                /**
+                 * The minimum minute range should not be enforced when
+                 * the hour is greater than the min hour.
+                 *
+                 * For example with a minimum range of 09:30, users
+                 * should be able to select 10:00-10:29 and beyond.
+                 */
+                let isPastMinHour = false;
+                if (minParts.hour !== undefined && refParts.hour !== undefined) {
+                    if (refParts.hour > minParts.hour) {
+                        isPastMinHour = true;
+                    }
+                }
+                processedMinutes = processedMinutes.filter((minute) => {
+                    if (isPastMinHour) {
+                        return true;
+                    }
+                    return minute >= minParts.minute;
+                });
+            }
+            /**
+             * If ref day is before minimum
+             * day do not render any hours/minute values
+             */
+        }
+        else if (isBefore(refParts, minParts)) {
+            processedHours = [];
+            processedMinutes = [];
+            isAMAllowed = isPMAllowed = false;
+        }
+    }
+    if (maxParts) {
+        /**
+         * If ref day is the same as the
+         * maximum allowed day, filter hour/minute
+         * values according to max hour and minute.
+         */
+        if (isSameDay(refParts, maxParts)) {
+            /**
+             * Users may not always set the hour/minute for
+             * max value (i.e. 2021-06-02) so we should allow
+             * all hours/minutes in that case.
+             */
+            if (maxParts.hour !== undefined) {
+                processedHours = processedHours.filter((hour) => {
+                    const convertedHour = refParts.ampm === 'pm' ? (hour + 12) % 24 : hour;
+                    return (use24Hour ? hour : convertedHour) <= maxParts.hour;
+                });
+                isPMAllowed = maxParts.hour >= 12;
+            }
+            if (maxParts.minute !== undefined && refParts.hour === maxParts.hour) {
+                // The available minutes should only be filtered when the hour is the same as the max hour.
+                // For example if the max hour is 10:30 and the current hour is 10:00,
+                // users should be able to select 00-30 minutes.
+                // If the current hour is 09:00, users should be able to select 00-60 minutes.
+                processedMinutes = processedMinutes.filter((minute) => minute <= maxParts.minute);
+            }
+            /**
+             * If ref day is after minimum
+             * day do not render any hours/minute values
+             */
+        }
+        else if (isAfter(refParts, maxParts)) {
+            processedHours = [];
+            processedMinutes = [];
+            isAMAllowed = isPMAllowed = false;
+        }
+    }
+    return {
+        hours: processedHours,
+        minutes: processedMinutes,
+        am: isAMAllowed,
+        pm: isPMAllowed,
+    };
+};
+/**
+ * Given DatetimeParts, generate the previous,
+ * current, and and next months.
+ */
+const generateMonths = (refParts, forcedDate) => {
+    const current = { month: refParts.month, year: refParts.year, day: refParts.day };
+    /**
+     * If we're forcing a month to appear, and it's different from the current month,
+     * ensure it appears by replacing the next or previous month as appropriate.
+     */
+    if (forcedDate !== undefined && (refParts.month !== forcedDate.month || refParts.year !== forcedDate.year)) {
+        const forced = { month: forcedDate.month, year: forcedDate.year, day: forcedDate.day };
+        const forcedMonthIsBefore = isBefore(forced, current);
+        return forcedMonthIsBefore
+            ? [forced, current, getNextMonth(refParts)]
+            : [getPreviousMonth(refParts), current, forced];
+    }
+    return [getPreviousMonth(refParts), current, getNextMonth(refParts)];
+};
+const getMonthColumnData = (locale, refParts, minParts, maxParts, monthValues, formatOptions = {
+    month: 'long',
+}) => {
+    const { year } = refParts;
+    const months = [];
+    if (monthValues !== undefined) {
+        let processedMonths = monthValues;
+        if (maxParts?.month !== undefined) {
+            processedMonths = processedMonths.filter((month) => month <= maxParts.month);
+        }
+        if (minParts?.month !== undefined) {
+            processedMonths = processedMonths.filter((month) => month >= minParts.month);
+        }
+        processedMonths.forEach((processedMonth) => {
+            const date = new Date(`${processedMonth}/1/${year} GMT+0000`);
+            const monthString = new Intl.DateTimeFormat(locale, { ...formatOptions, timeZone: 'UTC' }).format(date);
+            months.push({ text: monthString, value: processedMonth });
+        });
+    }
+    else {
+        const maxMonth = maxParts && maxParts.year === year ? maxParts.month : 12;
+        const minMonth = minParts && minParts.year === year ? minParts.month : 1;
+        for (let i = minMonth; i <= maxMonth; i++) {
+            /**
+             *
+             * There is a bug on iOS 14 where
+             * Intl.DateTimeFormat takes into account
+             * the local timezone offset when formatting dates.
+             *
+             * Forcing the timezone to 'UTC' fixes the issue. However,
+             * we should keep this workaround as it is safer. In the event
+             * this breaks in another browser, we will not be impacted
+             * because all dates will be interpreted in UTC.
+             *
+             * Example:
+             * new Intl.DateTimeFormat('en-US', { month: 'long' }).format(new Date('Sat Apr 01 2006 00:00:00 GMT-0400 (EDT)')) // "March"
+             * new Intl.DateTimeFormat('en-US', { month: 'long', timeZone: 'UTC' }).format(new Date('Sat Apr 01 2006 00:00:00 GMT-0400 (EDT)')) // "April"
+             *
+             * In certain timezones, iOS 14 shows the wrong
+             * date for .toUTCString(). To combat this, we
+             * force all of the timezones to GMT+0000 (UTC).
+             *
+             * Example:
+             * Time Zone: Central European Standard Time
+             * new Date('1/1/1992').toUTCString() // "Tue, 31 Dec 1991 23:00:00 GMT"
+             * new Date('1/1/1992 GMT+0000').toUTCString() // "Wed, 01 Jan 1992 00:00:00 GMT"
+             */
+            const date = new Date(`${i}/1/${year} GMT+0000`);
+            const monthString = new Intl.DateTimeFormat(locale, { ...formatOptions, timeZone: 'UTC' }).format(date);
+            months.push({ text: monthString, value: i });
+        }
+    }
+    return months;
+};
+/**
+ * Returns information regarding
+ * selectable dates (i.e 1st, 2nd, 3rd, etc)
+ * within a reference month.
+ * @param locale The locale to format the date with
+ * @param refParts The reference month/year to generate dates for
+ * @param minParts The minimum bound on the date that can be returned
+ * @param maxParts The maximum bound on the date that can be returned
+ * @param dayValues The allowed date values
+ * @returns Date data to be used in ion-picker-column
+ */
+const getDayColumnData = (locale, refParts, minParts, maxParts, dayValues, formatOptions = {
+    day: 'numeric',
+}) => {
+    const { month, year } = refParts;
+    const days = [];
+    /**
+     * If we have max/min bounds that in the same
+     * month/year as the refParts, we should
+     * use the define day as the max/min day.
+     * Otherwise, fallback to the max/min days in a month.
+     */
+    const numDaysInMonth = getNumDaysInMonth(month, year);
+    const maxDay = maxParts?.day !== null && maxParts?.day !== undefined && maxParts.year === year && maxParts.month === month
+        ? maxParts.day
+        : numDaysInMonth;
+    const minDay = minParts?.day !== null && minParts?.day !== undefined && minParts.year === year && minParts.month === month
+        ? minParts.day
+        : 1;
+    if (dayValues !== undefined) {
+        let processedDays = dayValues;
+        processedDays = processedDays.filter((day) => day >= minDay && day <= maxDay);
+        processedDays.forEach((processedDay) => {
+            const date = new Date(`${month}/${processedDay}/${year} GMT+0000`);
+            const dayString = new Intl.DateTimeFormat(locale, { ...formatOptions, timeZone: 'UTC' }).format(date);
+            days.push({ text: dayString, value: processedDay });
+        });
+    }
+    else {
+        for (let i = minDay; i <= maxDay; i++) {
+            const date = new Date(`${month}/${i}/${year} GMT+0000`);
+            const dayString = new Intl.DateTimeFormat(locale, { ...formatOptions, timeZone: 'UTC' }).format(date);
+            days.push({ text: dayString, value: i });
+        }
+    }
+    return days;
+};
+const getYearColumnData = (locale, refParts, minParts, maxParts, yearValues) => {
+    let processedYears = [];
+    if (yearValues !== undefined) {
+        processedYears = yearValues;
+        if (maxParts?.year !== undefined) {
+            processedYears = processedYears.filter((year) => year <= maxParts.year);
+        }
+        if (minParts?.year !== undefined) {
+            processedYears = processedYears.filter((year) => year >= minParts.year);
+        }
+    }
+    else {
+        const { year } = refParts;
+        const maxYear = maxParts?.year ?? year;
+        const minYear = minParts?.year ?? year - 100;
+        for (let i = minYear; i <= maxYear; i++) {
+            processedYears.push(i);
+        }
+    }
+    return processedYears.map((year) => ({
+        text: getYear(locale, { year, month: refParts.month, day: refParts.day }),
+        value: year,
+    }));
+};
+/**
+ * Given a starting date and an upper bound,
+ * this functions returns an array of all
+ * month objects in that range.
+ */
+const getAllMonthsInRange = (currentParts, maxParts) => {
+    if (currentParts.month === maxParts.month && currentParts.year === maxParts.year) {
+        return [currentParts];
+    }
+    return [currentParts, ...getAllMonthsInRange(getNextMonth(currentParts), maxParts)];
+};
+/**
+ * Creates and returns picker items
+ * that represent the days in a month.
+ * Example: "Thu, Jun 2"
+ */
+const getCombinedDateColumnData = (locale, todayParts, minParts, maxParts, dayValues, monthValues) => {
+    let items = [];
+    let parts = [];
+    /**
+     * Get all month objects from the min date
+     * to the max date. Note: Do not use getMonthColumnData
+     * as that function only generates dates within a
+     * single year.
+     */
+    let months = getAllMonthsInRange(minParts, maxParts);
+    /**
+     * Filter out any disallowed month values.
+     */
+    if (monthValues) {
+        months = months.filter(({ month }) => monthValues.includes(month));
+    }
+    /**
+     * Get all of the days in the month.
+     * From there, generate an array where
+     * each item has the month, date, and day
+     * of work as the text.
+     */
+    months.forEach((monthObject) => {
+        const referenceMonth = { month: monthObject.month, day: null, year: monthObject.year };
+        const monthDays = getDayColumnData(locale, referenceMonth, minParts, maxParts, dayValues, {
+            month: 'short',
+            day: 'numeric',
+            weekday: 'short',
+        });
+        const dateParts = [];
+        const dateColumnItems = [];
+        monthDays.forEach((dayObject) => {
+            const isToday = isSameDay({ ...referenceMonth, day: dayObject.value }, todayParts);
+            /**
+             * Today's date should read as "Today" (localized)
+             * not the actual date string
+             */
+            dateColumnItems.push({
+                text: isToday ? getTodayLabel(locale) : dayObject.text,
+                value: `${referenceMonth.year}-${referenceMonth.month}-${dayObject.value}`,
+            });
+            /**
+             * When selecting a date in the wheel picker
+             * we need access to the raw datetime parts data.
+             * The picker column only accepts values of
+             * type string or number, so we need to return
+             * two sets of data: A data set to be passed
+             * to the picker column, and a data set to
+             * be used to reference the raw data when
+             * updating the picker column value.
+             */
+            dateParts.push({
+                month: referenceMonth.month,
+                year: referenceMonth.year,
+                day: dayObject.value,
+            });
+        });
+        parts = [...parts, ...dateParts];
+        items = [...items, ...dateColumnItems];
+    });
+    return {
+        parts,
+        items,
+    };
+};
+const getTimeColumnsData = (locale, refParts, hourCycle, minParts, maxParts, allowedHourValues, allowedMinuteValues) => {
+    const computedHourCycle = getHourCycle(locale, hourCycle);
+    const use24Hour = is24Hour(computedHourCycle);
+    const { hours, minutes, am, pm } = generateTime(locale, refParts, computedHourCycle, minParts, maxParts, allowedHourValues, allowedMinuteValues);
+    const hoursItems = hours.map((hour) => {
+        return {
+            text: getFormattedHour(hour, computedHourCycle),
+            value: getInternalHourValue(hour, use24Hour, refParts.ampm),
+        };
+    });
+    const minutesItems = minutes.map((minute) => {
+        return {
+            text: addTimePadding(minute),
+            value: minute,
+        };
+    });
+    const dayPeriodItems = [];
+    if (am && !use24Hour) {
+        dayPeriodItems.push({
+            text: getLocalizedDayPeriod(locale, 'am'),
+            value: 'am',
+        });
+    }
+    if (pm && !use24Hour) {
+        dayPeriodItems.push({
+            text: getLocalizedDayPeriod(locale, 'pm'),
+            value: 'pm',
+        });
+    }
+    return {
+        minutesData: minutesItems,
+        hoursData: hoursItems,
+        dayPeriodData: dayPeriodItems,
+    };
+};
 
 const isYearDisabled = (refYear, minParts, maxParts) => {
     if (minParts && minParts.year > refYear) {
@@ -139,7 +657,10 @@ const isMonthDisabled = (refParts, { minParts, maxParts, }) => {
  * previous navigation button is disabled.
  */
 const isPrevMonthDisabled = (refParts, minParts, maxParts) => {
-    const prevMonth = Object.assign(Object.assign({}, getPreviousMonth(refParts)), { day: null });
+    const prevMonth = {
+        ...getPreviousMonth(refParts),
+        day: null,
+    };
     return isMonthDisabled(prevMonth, {
         minParts,
         maxParts,
@@ -150,7 +671,10 @@ const isPrevMonthDisabled = (refParts, minParts, maxParts) => {
  * determine if the next navigation button is disabled.
  */
 const isNextMonthDisabled = (refParts, maxParts) => {
-    const nextMonth = Object.assign(Object.assign({}, getNextMonth(refParts)), { day: null });
+    const nextMonth = {
+        ...getNextMonth(refParts),
+        day: null,
+    };
     return isMonthDisabled(nextMonth, {
         maxParts,
     });
@@ -193,11 +717,10 @@ const getHighlightStyles = (highlightedDates, dateIsoString, el) => {
  * confusion.
  */
 const warnIfTimeZoneProvided = (el, formatOptions) => {
-    var _a, _b, _c, _d;
-    if (((_a = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) === null || _a === void 0 ? void 0 : _a.timeZone) ||
-        ((_b = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) === null || _b === void 0 ? void 0 : _b.timeZoneName) ||
-        ((_c = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) === null || _c === void 0 ? void 0 : _c.timeZone) ||
-        ((_d = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) === null || _d === void 0 ? void 0 : _d.timeZoneName)) {
+    if (formatOptions?.date?.timeZone ||
+        formatOptions?.date?.timeZoneName ||
+        formatOptions?.time?.timeZone ||
+        formatOptions?.time?.timeZoneName) {
         printIonWarning('[ion-datetime] - "timeZone" and "timeZoneName" are not supported in "formatOptions".', el);
     }
 };
@@ -229,9 +752,9 @@ const checkForPresentationFormatMismatch = (el, presentation, formatOptions) =>
     }
 };
 
-const datetimeIosCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}:host(.datetime-size-cover){width:100%}:host .calendar-body,:host .datetime-year{opacity:0}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .calendar-body{opacity:1}:host(.datetime-ready) .datetime-year{display:none;opacity:1}:host .wheel-order-year-first .day-column{-ms-flex-order:3;order:3;text-align:end}:host .wheel-order-year-first .month-column{-ms-flex-order:2;order:2;text-align:end}:host .wheel-order-year-first .year-column{-ms-flex-order:1;order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:-ms-flexbox;display:flex}:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.datetime-action-buttons .datetime-action-buttons-container{display:-ms-flexbox;display:flex}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-action-buttons ion-button{--background:transparent}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}:host .calendar-body{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible}.calendar-day{border-radius:50%;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}.calendar-day:not(.calendar-day-adjacent-day):focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .time-body{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:-ms-flexbox;display:flex;border:none;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-base)}.calendar-month-year{min-width:0}.calendar-month-year-toggle{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;position:relative;border:0;outline:none;background:transparent;cursor:pointer;z-index:1}.calendar-month-year-toggle::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0;-webkit-transition:opacity 15ms linear, background-color 15ms linear;transition:opacity 15ms linear, background-color 15ms linear;z-index:-1}.calendar-month-year-toggle.ion-focused::after{background:currentColor}.calendar-month-year-toggle:disabled{opacity:0.3;pointer-events:none}.calendar-month-year-toggle ion-icon{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0;-ms-flex-negative:0;flex-shrink:0}.calendar-month-year-toggle #toggle-wrapper{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}ion-picker{--highlight-background:var(--wheel-highlight-background);--highlight-border-radius:var(--wheel-highlight-border-radius);--fade-background-rgb:var(--wheel-fade-background-rgb)}:host{--background:var(--ion-color-light, #f4f5f8);--background-rgb:var(--ion-color-light-rgb, 244, 245, 248);--title-color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}:host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)),:host(.datetime-presentation-time-date:not(.datetime-prefer-wheel)),:host(.datetime-presentation-date:not(.datetime-prefer-wheel)){min-height:350px}:host .datetime-header{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:16px;padding-bottom:16px;border-bottom:0.55px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #cccccc));font-size:min(0.875rem, 22.4px)}:host .datetime-header .datetime-title{color:var(--title-color)}:host .datetime-header .datetime-selected-date{margin-top:10px}.calendar-month-year-toggle{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;min-height:44px;font-size:min(1rem, 25.6px);font-weight:600}.calendar-month-year-toggle.ion-focused::after{opacity:0.15}.calendar-month-year-toggle #toggle-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:10px;margin-bottom:10px}:host .calendar-action-buttons .calendar-month-year-toggle ion-icon,:host .calendar-action-buttons ion-buttons ion-button{color:var(--ion-color-base)}:host .calendar-action-buttons ion-buttons{-ms-flex-align:stretch;align-items:stretch;height:100%}:host .calendar-action-buttons ion-buttons ion-button{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host .calendar-days-of-week{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0;color:var(--ion-color-step-300, var(--ion-text-color-step-700, #b3b3b3));font-size:min(0.75rem, 19.2px);font-weight:600;line-height:24px;text-transform:uppercase}@supports (border-radius: mod(1px, 1px)){.calendar-days-of-week .day-of-week{width:clamp(20px, calc(mod(min(1rem, 24px), 24px) * 10), 100%);height:24px;overflow:hidden}.calendar-day{border-radius:max(8px, mod(min(1rem, 24px), 24px) * 10)}}@supports ((border-radius: mod(1px, 1px)) and (background: -webkit-named-image(apple-pay-logo-black)) and (not (contain-intrinsic-size: none))) or (not (border-radius: mod(1px, 1px))){.calendar-days-of-week .day-of-week{width:auto;height:auto;overflow:initial}.calendar-day{border-radius:32px}}:host .calendar-body .calendar-month .calendar-month-grid{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;-ms-flex-align:center;align-items:center;height:calc(100% - 16px)}:host .calendar-day-wrapper{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;height:0;min-height:1rem}:host .calendar-day{width:40px;min-width:40px;height:40px;font-size:min(1.25rem, 32px)}.calendar-day.calendar-day-active{background:rgba(var(--ion-color-base-rgb), 0.2);font-size:min(1.375rem, 35.2px)}:host .calendar-day.calendar-day-today{color:var(--ion-color-base)}:host .calendar-day.calendar-day-active,:host .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-base);font-weight:600}:host .calendar-day.calendar-day-today.calendar-day-active{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host .calendar-day.calendar-day-adjacent-day{color:var(--ion-color-step-300, var(--ion-text-color-step-700, #b3b3b3))}:host .datetime-time{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:16px;font-size:min(1rem, 25.6px)}:host .datetime-time .time-header{font-weight:600}:host .datetime-buttons{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;border-top:0.55px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #cccccc))}:host .datetime-buttons ::slotted(ion-buttons),:host .datetime-buttons ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}:host .datetime-action-buttons{width:100%}`;
+const datetimeIosCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}:host(.datetime-size-cover){width:100%}:host .calendar-body,:host .datetime-year{opacity:0}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .calendar-body{opacity:1}:host(.datetime-ready) .datetime-year{display:none;opacity:1}:host .wheel-order-year-first .day-column{-ms-flex-order:3;order:3;text-align:end}:host .wheel-order-year-first .month-column{-ms-flex-order:2;order:2;text-align:end}:host .wheel-order-year-first .year-column{-ms-flex-order:1;order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:-ms-flexbox;display:flex}:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .datetime-action-buttons ion-button{--color:var(--ion-color-primary, #0054e9)}.datetime-action-buttons .datetime-action-buttons-container{display:-ms-flexbox;display:flex}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-action-buttons ion-button{--background:transparent}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}:host .calendar-body{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible}.calendar-day{border-radius:50%;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}.calendar-day:not(.calendar-day-adjacent-day):focus{background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2)}:host(.ion-color) .calendar-day:not(.calendar-day-adjacent-day):focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .time-body{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:-ms-flexbox;display:flex;border:none;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host .time-body-active{color:var(--ion-color-primary, #0054e9)}:host(.ion-color) .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-primary, #0054e9)}:host(.ion-color.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-base)}.calendar-month-year{min-width:0}.calendar-month-year-toggle{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;position:relative;border:0;outline:none;background:transparent;cursor:pointer;z-index:1}.calendar-month-year-toggle::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0;-webkit-transition:opacity 15ms linear, background-color 15ms linear;transition:opacity 15ms linear, background-color 15ms linear;z-index:-1}.calendar-month-year-toggle.ion-focused::after{background:currentColor}.calendar-month-year-toggle:disabled{opacity:0.3;pointer-events:none}.calendar-month-year-toggle ion-icon{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0;-ms-flex-negative:0;flex-shrink:0}.calendar-month-year-toggle #toggle-wrapper{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}ion-picker{--highlight-background:var(--wheel-highlight-background);--highlight-border-radius:var(--wheel-highlight-border-radius);--fade-background-rgb:var(--wheel-fade-background-rgb)}:host{--background:var(--ion-color-light, #f4f5f8);--background-rgb:var(--ion-color-light-rgb, 244, 245, 248);--title-color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}:host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)),:host(.datetime-presentation-time-date:not(.datetime-prefer-wheel)),:host(.datetime-presentation-date:not(.datetime-prefer-wheel)){min-height:350px}:host .datetime-header{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:16px;padding-bottom:16px;border-bottom:0.55px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #cccccc));font-size:min(0.875rem, 22.4px)}:host .datetime-header .datetime-title{color:var(--title-color)}:host .datetime-header .datetime-selected-date{margin-top:10px}.calendar-month-year-toggle{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;min-height:44px;font-size:min(1rem, 25.6px);font-weight:600}.calendar-month-year-toggle.ion-focused::after{opacity:0.15}.calendar-month-year-toggle #toggle-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:10px;margin-bottom:10px}:host .calendar-action-buttons .calendar-month-year-toggle ion-icon,:host .calendar-action-buttons ion-buttons ion-button{color:var(--ion-color-primary, #0054e9)}:host(.ion-color) .calendar-action-buttons .calendar-month-year-toggle ion-icon,:host(.ion-color) .calendar-action-buttons ion-buttons ion-button{color:var(--ion-color-base)}:host .calendar-action-buttons ion-buttons{-ms-flex-align:stretch;align-items:stretch;height:100%}:host .calendar-action-buttons ion-buttons ion-button{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host .calendar-days-of-week{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0;color:var(--ion-color-step-300, var(--ion-text-color-step-700, #b3b3b3));font-size:min(0.75rem, 19.2px);font-weight:600;line-height:24px;text-transform:uppercase}@supports (border-radius: mod(1px, 1px)){.calendar-days-of-week .day-of-week{width:clamp(20px, calc(mod(min(1rem, 24px), 24px) * 10), 100%);height:24px;overflow:hidden}.calendar-day{border-radius:max(8px, mod(min(1rem, 24px), 24px) * 10)}}@supports ((border-radius: mod(1px, 1px)) and (background: -webkit-named-image(apple-pay-logo-black)) and (not (contain-intrinsic-size: none))) or (not (border-radius: mod(1px, 1px))){.calendar-days-of-week .day-of-week{width:auto;height:auto;overflow:initial}.calendar-day{border-radius:32px}}:host .calendar-body .calendar-month .calendar-month-grid{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;-ms-flex-align:center;align-items:center;height:calc(100% - 16px)}:host .calendar-day-wrapper{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;height:0;min-height:1rem}:host .calendar-day{width:40px;min-width:40px;height:40px;font-size:min(1.25rem, 32px)}.calendar-day.calendar-day-active{background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);font-size:min(1.375rem, 35.2px)}:host(.ion-color) .calendar-day.calendar-day-active{background:rgba(var(--ion-color-base-rgb), 0.2)}:host .calendar-day.calendar-day-today{color:var(--ion-color-primary, #0054e9)}:host(.ion-color) .calendar-day.calendar-day-today{color:var(--ion-color-base)}:host .calendar-day.calendar-day-active,:host .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-primary, #0054e9);font-weight:600}:host(.ion-color) .calendar-day.calendar-day-active,:host(.ion-color) .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-base)}:host .calendar-day.calendar-day-today.calendar-day-active{background:var(--ion-color-primary, #0054e9);color:var(--ion-color-primary-contrast, #fff)}:host(.ion-color) .calendar-day.calendar-day-today.calendar-day-active{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host .calendar-day.calendar-day-adjacent-day{color:var(--ion-color-step-300, var(--ion-text-color-step-700, #b3b3b3))}:host .datetime-time{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:16px;font-size:min(1rem, 25.6px)}:host .datetime-time .time-header{font-weight:600}:host .datetime-buttons{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;border-top:0.55px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #cccccc))}:host .datetime-buttons ::slotted(ion-buttons),:host .datetime-buttons ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}:host .datetime-action-buttons{width:100%}`;
 
-const datetimeMdCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}:host(.datetime-size-cover){width:100%}:host .calendar-body,:host .datetime-year{opacity:0}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .calendar-body{opacity:1}:host(.datetime-ready) .datetime-year{display:none;opacity:1}:host .wheel-order-year-first .day-column{-ms-flex-order:3;order:3;text-align:end}:host .wheel-order-year-first .month-column{-ms-flex-order:2;order:2;text-align:end}:host .wheel-order-year-first .year-column{-ms-flex-order:1;order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:-ms-flexbox;display:flex}:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.datetime-action-buttons .datetime-action-buttons-container{display:-ms-flexbox;display:flex}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-action-buttons ion-button{--background:transparent}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}:host .calendar-body{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible}.calendar-day{border-radius:50%;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}.calendar-day:not(.calendar-day-adjacent-day):focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .time-body{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:-ms-flexbox;display:flex;border:none;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-base)}.calendar-month-year{min-width:0}.calendar-month-year-toggle{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;position:relative;border:0;outline:none;background:transparent;cursor:pointer;z-index:1}.calendar-month-year-toggle::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0;-webkit-transition:opacity 15ms linear, background-color 15ms linear;transition:opacity 15ms linear, background-color 15ms linear;z-index:-1}.calendar-month-year-toggle.ion-focused::after{background:currentColor}.calendar-month-year-toggle:disabled{opacity:0.3;pointer-events:none}.calendar-month-year-toggle ion-icon{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0;-ms-flex-negative:0;flex-shrink:0}.calendar-month-year-toggle #toggle-wrapper{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}ion-picker{--highlight-background:var(--wheel-highlight-background);--highlight-border-radius:var(--wheel-highlight-border-radius);--fade-background-rgb:var(--wheel-fade-background-rgb)}:host{--background:var(--ion-color-step-100, var(--ion-background-color-step-100, #ffffff));--title-color:var(--ion-color-contrast)}:host .datetime-header{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:20px;padding-bottom:20px;background:var(--ion-color-base);color:var(--title-color)}:host .datetime-header .datetime-title{font-size:0.75rem;text-transform:uppercase}:host .datetime-header .datetime-selected-date{margin-top:30px;font-size:2.125rem}:host .calendar-action-buttons ion-button{--color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959))}.calendar-month-year-toggle{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:12px;padding-bottom:12px;min-height:48px;background:transparent;color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959));z-index:1}.calendar-month-year-toggle.ion-focused::after{opacity:0.04}.calendar-month-year-toggle ion-ripple-effect{color:currentColor}@media (any-hover: hover){.calendar-month-year-toggle.ion-activatable:not(.ion-focused):hover::after{background:currentColor;opacity:0.04}}:host .calendar-days-of-week{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:0px;padding-bottom:0px;color:var(--ion-color-step-500, var(--ion-text-color-step-500, gray));font-size:0.875rem;line-height:36px}:host .calendar-body .calendar-month .calendar-month-grid{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:4px;padding-bottom:4px;grid-template-rows:repeat(6, 1fr)}:host .calendar-day{width:42px;min-width:42px;height:42px;font-size:0.875rem}:host .calendar-day.calendar-day-today{border:1px solid var(--ion-color-base);color:var(--ion-color-base)}:host .calendar-day.calendar-day-active,:host .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-contrast)}.calendar-day.calendar-day-active,.calendar-day.calendar-day-active:focus{border:1px solid var(--ion-color-base);background:var(--ion-color-base)}:host .calendar-day.calendar-day-adjacent-day{color:var(--ion-color-step-500, var(--ion-text-color-step-500, gray))}:host .datetime-time{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:8px}:host .time-header{color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959))}:host(.datetime-presentation-month) .datetime-year,:host(.datetime-presentation-year) .datetime-year,:host(.datetime-presentation-month-year) .datetime-year{margin-top:20px;margin-bottom:20px}:host .datetime-buttons{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:10px;padding-bottom:10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}`;
+const datetimeMdCss = () => `:host{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;background:var(--background);overflow:hidden}:host(.datetime-size-fixed){width:auto;height:auto}:host(.datetime-size-fixed:not(.datetime-prefer-wheel)){max-width:350px}:host(.datetime-size-fixed.datetime-prefer-wheel){min-width:350px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}:host(.datetime-size-cover){width:100%}:host .calendar-body,:host .datetime-year{opacity:0}:host(:not(.datetime-ready)) .datetime-year{position:absolute;pointer-events:none}:host(.datetime-ready) .calendar-body{opacity:1}:host(.datetime-ready) .datetime-year{display:none;opacity:1}:host .wheel-order-year-first .day-column{-ms-flex-order:3;order:3;text-align:end}:host .wheel-order-year-first .month-column{-ms-flex-order:2;order:2;text-align:end}:host .wheel-order-year-first .year-column{-ms-flex-order:1;order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-flow:column;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:-ms-flexbox;display:flex}:host(.show-month-and-year) .calendar-next-prev,:host(.show-month-and-year) .calendar-days-of-week,:host(.show-month-and-year) .calendar-body,:host(.show-month-and-year) .datetime-time{display:none}:host(.month-year-picker-open) .datetime-footer{display:none}:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled) .calendar-days-of-week,:host(.datetime-disabled) .datetime-time{opacity:0.4}:host(.datetime-readonly){pointer-events:none;}:host(.datetime-readonly) .calendar-action-buttons,:host(.datetime-readonly) .calendar-body,:host(.datetime-readonly) .datetime-year{pointer-events:initial}:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled]{opacity:1}:host .datetime-header .datetime-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .datetime-action-buttons.has-clear-button{width:100%}:host .datetime-action-buttons ion-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .datetime-action-buttons ion-button{--color:var(--ion-color-primary, #0054e9)}.datetime-action-buttons .datetime-action-buttons-container{display:-ms-flexbox;display:flex}:host .calendar-action-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host .calendar-action-buttons ion-button{--background:transparent}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}.calendar-days-of-week .day-of-week{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0}:host .calendar-body{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;scroll-snap-align:start;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}:host .calendar-body .calendar-month-disabled{scroll-snap-align:none}:host .calendar-body::-webkit-scrollbar{display:none}:host .calendar-body .calendar-month-grid{display:grid;grid-template-columns:repeat(7, 1fr)}:host .calendar-day-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:0;min-height:0;overflow:visible}.calendar-day{border-radius:50%;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:0px;margin-bottom:0px;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;font-family:var(--ion-font-family, inherit);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:0}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}.calendar-day:not(.calendar-day-adjacent-day):focus{background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2)}:host(.ion-color) .calendar-day:not(.calendar-day-adjacent-day):focus{background:rgba(var(--ion-color-base-rgb), 0.2);-webkit-box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .datetime-time{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host(.datetime-presentation-time) .datetime-time{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}:host ion-popover{--height:200px}:host .time-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .time-body{border-radius:8px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:-ms-flexbox;display:flex;border:none;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host .time-body-active{color:var(--ion-color-primary, #0054e9)}:host(.ion-color) .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-primary, #0054e9)}:host(.ion-color.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle{color:var(--ion-color-base)}.calendar-month-year{min-width:0}.calendar-month-year-toggle{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;position:relative;border:0;outline:none;background:transparent;cursor:pointer;z-index:1}.calendar-month-year-toggle::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0;-webkit-transition:opacity 15ms linear, background-color 15ms linear;transition:opacity 15ms linear, background-color 15ms linear;z-index:-1}.calendar-month-year-toggle.ion-focused::after{background:currentColor}.calendar-month-year-toggle:disabled{opacity:0.3;pointer-events:none}.calendar-month-year-toggle ion-icon{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0;padding-top:0;padding-bottom:0;-ms-flex-negative:0;flex-shrink:0}.calendar-month-year-toggle #toggle-wrapper{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}ion-picker{--highlight-background:var(--wheel-highlight-background);--highlight-border-radius:var(--wheel-highlight-border-radius);--fade-background-rgb:var(--wheel-fade-background-rgb)}:host{--background:var(--ion-color-step-100, var(--ion-background-color-step-100, #ffffff));--title-color:var(--ion-color-primary-contrast, #fff)}:host(.ion-color){--title-color:var(--ion-color-contrast)}:host .datetime-header{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px;padding-top:20px;padding-bottom:20px;background:var(--ion-color-primary, #0054e9);color:var(--title-color)}:host(.ion-color) .datetime-header{background:var(--ion-color-base)}:host .datetime-header .datetime-title{font-size:0.75rem;text-transform:uppercase}:host .datetime-header .datetime-selected-date{margin-top:30px;font-size:2.125rem}:host .calendar-action-buttons ion-button{--color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959))}.calendar-month-year-toggle{-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:12px;padding-bottom:12px;min-height:48px;background:transparent;color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959));z-index:1}.calendar-month-year-toggle.ion-focused::after{opacity:0.04}.calendar-month-year-toggle ion-ripple-effect{color:currentColor}@media (any-hover: hover){.calendar-month-year-toggle.ion-activatable:not(.ion-focused):hover::after{background:currentColor;opacity:0.04}}:host .calendar-days-of-week{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:0px;padding-bottom:0px;color:var(--ion-color-step-500, var(--ion-text-color-step-500, gray));font-size:0.875rem;line-height:36px}:host .calendar-body .calendar-month .calendar-month-grid{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:4px;padding-bottom:4px;grid-template-rows:repeat(6, 1fr)}:host .calendar-day{width:42px;min-width:42px;height:42px;font-size:0.875rem}:host .calendar-day.calendar-day-today{border:1px solid var(--ion-color-primary, #0054e9);color:var(--ion-color-primary, #0054e9)}:host(.ion-color) .calendar-day.calendar-day-today{border:1px solid var(--ion-color-base);color:var(--ion-color-base)}:host .calendar-day.calendar-day-active,:host .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-primary-contrast, #fff)}:host(.ion-color) .calendar-day.calendar-day-active,:host(.ion-color) .calendar-day.calendar-day-adjacent-day.calendar-day-active{color:var(--ion-color-contrast)}.calendar-day.calendar-day-active,.calendar-day.calendar-day-active:focus{border:1px solid var(--ion-color-primary, #0054e9);background:var(--ion-color-primary, #0054e9)}:host(.ion-color) .calendar-day.calendar-day-active,:host(.ion-color) .calendar-day.calendar-day-active:focus{border:1px solid var(--ion-color-base);background:var(--ion-color-base)}:host .calendar-day.calendar-day-adjacent-day{color:var(--ion-color-step-500, var(--ion-text-color-step-500, gray))}:host .datetime-time{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:8px;padding-bottom:8px}:host .time-header{color:var(--ion-color-step-650, var(--ion-text-color-step-350, #595959))}:host(.datetime-presentation-month) .datetime-year,:host(.datetime-presentation-year) .datetime-year,:host(.datetime-presentation-month-year) .datetime-year{margin-top:20px;margin-bottom:20px}:host .datetime-buttons{-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px;padding-top:10px;padding-bottom:10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}`;
 
 const Datetime = class {
     constructor(hostRef) {
@@ -248,6 +771,10 @@ const Datetime = class {
          * 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;
@@ -263,12 +790,6 @@ const Datetime = class {
             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, see [theming](/docs/theming/basics).
-         */
-        this.color = 'primary';
         /**
          * The name of the control, which is submitted with the form data.
          */
@@ -407,9 +928,8 @@ const Datetime = class {
          * is selected.
          */
         this.getActivePartsWithFallback = () => {
-            var _a;
             const { defaultParts } = this;
-            return (_a = this.getActivePart()) !== null && _a !== void 0 ? _a : defaultParts;
+            return this.getActivePart() ?? defaultParts;
         };
         this.getActivePart = () => {
             const { activeParts } = this;
@@ -422,7 +942,9 @@ const Datetime = class {
             }
         };
         this.setWorkingParts = (parts) => {
-            this.workingParts = Object.assign({}, parts);
+            this.workingParts = {
+                ...parts,
+            };
         };
         this.setActiveParts = (parts, removeDate = false) => {
             /** if the datetime component is in readonly mode,
@@ -455,7 +977,9 @@ const Datetime = class {
                 }
             }
             else {
-                this.activeParts = Object.assign({}, validatedParts);
+                this.activeParts = {
+                    ...validatedParts,
+                };
             }
             const hasSlottedButtons = this.el.querySelector('[slot="buttons"]') !== null;
             if (hasSlottedButtons || this.showDefaultButtons) {
@@ -481,7 +1005,6 @@ const Datetime = class {
              * Tab should jump between bodies of selectable content.
              */
             const checkCalendarBodyFocus = (ev) => {
-                var _a;
                 const record = ev[0];
                 /**
                  * If calendar body was already focused
@@ -489,7 +1012,7 @@ const Datetime = class {
                  * 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')) {
+                if (record.oldValue?.includes('ion-focused') || !calendarBodyRef.classList.contains('ion-focused')) {
                     return;
                 }
                 this.focusWorkingDay(currentMonth);
@@ -497,7 +1020,7 @@ const Datetime = class {
             const mo = new MutationObserver(checkCalendarBodyFocus);
             mo.observe(calendarBodyRef, { attributeFilter: ['class'], attributeOldValue: true });
             this.destroyKeyboardMO = () => {
-                mo === null || mo === void 0 ? void 0 : mo.disconnect();
+                mo?.disconnect();
             };
             /**
              * We must use keydown not keyup as we want
@@ -559,7 +1082,10 @@ const Datetime = class {
                 if (isDayDisabled(partsToFocus, this.minParts, this.maxParts)) {
                     return;
                 }
-                this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), partsToFocus));
+                this.setWorkingParts({
+                    ...this.workingParts,
+                    ...partsToFocus,
+                });
                 /**
                  * Give view a chance to re-render
                  * then move focus to the new working day
@@ -710,8 +1236,8 @@ const Datetime = class {
                         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 }),
+                        minParts: { ...this.minParts, day: null },
+                        maxParts: { ...this.maxParts, day: null },
                     })) {
                         return;
                     }
@@ -731,8 +1257,12 @@ const Datetime = class {
                      * if we did not do this.
                      */
                     writeTask(() => {
-                        var _a;
-                        this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), { month, day: day, year }));
+                        this.setWorkingParts({
+                            ...this.workingParts,
+                            month,
+                            day: day,
+                            year,
+                        });
                         calendarBodyRef.scrollLeft = workingMonth.clientWidth * (isRTL(this.el) ? -1 : 1);
                         calendarBodyRef.style.removeProperty('overflow');
                         if (this.resolveForceDateScrolling) {
@@ -740,7 +1270,7 @@ const Datetime = class {
                         }
                         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();
+                            activeEl.closest('.calendar-body')?.focus();
                         }
                     });
                 };
@@ -969,10 +1499,11 @@ const Datetime = class {
                 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: 'smooth',
+                behavior: scrollMode,
             });
         };
         this.prevMonth = () => {
@@ -985,10 +1516,11 @@ const Datetime = class {
                 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: 'smooth',
+                behavior: scrollMode,
             });
         };
         this.toggleMonthAndYearView = () => {
@@ -1103,6 +1635,16 @@ const Datetime = class {
             this.closeParentOverlay(CANCEL_ROLE);
         }
     }
+    /**
+     * Returns the default parts the datetime falls back to when no value is set:
+     * today's date and time snapped to the closest value allowed by the
+     * component's constraints (`min`, `max`, and the `*Values` props).
+     *
+     * @internal
+     */
+    async getDefaultPart() {
+        return this.defaultParts;
+    }
     get isCalendarPicker() {
         const { presentation } = this;
         return presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
@@ -1119,7 +1661,6 @@ const Datetime = class {
             this.clearFocusVisible = undefined;
         }
         this.loadTimeoutCleanup();
-        this.hasBeenIntersecting = false;
     }
     initializeListeners() {
         this.initializeCalendarListener();
@@ -1149,7 +1690,7 @@ const Datetime = class {
          * could cause the datetime to start at a visibility of 0, erroneously
          * triggering the `hiddenIO` observer below.
          */
-        raf(() => visibleIO === null || visibleIO === void 0 ? void 0 : visibleIO.observe(intersectionTrackerRef));
+        raf(() => visibleIO?.observe(intersectionTrackerRef));
         /**
          * TODO(FW-6931): Remove this fallback upon solving the root cause
          * Fallback: If IntersectionObserver never reports that the
@@ -1195,7 +1736,7 @@ const Datetime = class {
             });
         };
         const hiddenIO = new IntersectionObserver(hiddenCallback, { threshold: 0, root: el });
-        raf(() => hiddenIO === null || hiddenIO === void 0 ? void 0 : hiddenIO.observe(intersectionTrackerRef));
+        raf(() => hiddenIO?.observe(intersectionTrackerRef));
         /**
          * Datetime uses Ionic components that emit
          * ionFocus and ionBlur. These events are
@@ -1376,7 +1917,6 @@ const Datetime = class {
     }
     renderCombinedDatePickerColumn() {
         const { defaultParts, disabled, workingParts, locale, minParts, maxParts, todayParts, isDateEnabled } = this;
-        const activePart = this.getActivePartsWithFallback();
         /**
          * By default, generate a range of 3 months:
          * Previous month, current month, and next month
@@ -1416,7 +1956,10 @@ const Datetime = class {
                 catch (e) {
                     printIonError('[ion-datetime] - Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', e);
                 }
-                return Object.assign(Object.assign({}, itemObject), { disabled });
+                return {
+                    ...itemObject,
+                    disabled,
+                };
             });
         }
         /**
@@ -1429,10 +1972,18 @@ const Datetime = class {
         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(Object.assign(Object.assign({}, workingParts), findPart));
-                this.setActiveParts(Object.assign(Object.assign({}, activePart), findPart));
+                // Read live so parts a sibling column just committed are included.
+                const activePart = this.getActivePartsWithFallback();
+                this.setWorkingParts({
+                    ...this.workingParts,
+                    ...findPart,
+                });
+                this.setActiveParts({
+                    ...activePart,
+                    ...findPart,
+                });
                 ev.stopPropagation();
-            } }, items.map((item) => (h("ion-picker-column-option", { part: item.value === todayString ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: item.value, disabled: item.disabled, value: item.value }, item.text)))));
+            } }, 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)))));
     }
     renderIndividualDatePickerColumns(forcePresentation) {
         const { workingParts, isDateEnabled } = this;
@@ -1465,7 +2016,10 @@ const Datetime = class {
                 catch (e) {
                     printIonError('[ion-datetime] - Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', e);
                 }
-                return Object.assign(Object.assign({}, dayObject), { disabled });
+                return {
+                    ...dayObject,
+                    disabled,
+                };
             });
         }
         const shouldRenderYears = forcePresentation !== 'month' && forcePresentation !== 'time';
@@ -1494,42 +2048,68 @@ const Datetime = class {
         return renderArray;
     }
     renderDayPickerColumn(days) {
-        var _a;
         if (days.length === 0) {
             return [];
         }
         const { disabled, workingParts } = this;
-        const activePart = this.getActivePartsWithFallback();
-        const pickerColumnValue = (_a = (workingParts.day !== null ? workingParts.day : this.defaultParts.day)) !== null && _a !== void 0 ? _a : undefined;
+        const pickerColumnValue = (workingParts.day !== null ? workingParts.day : this.defaultParts.day) ?? 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(Object.assign(Object.assign({}, workingParts), { day: ev.detail.value }));
-                this.setActiveParts(Object.assign(Object.assign({}, activePart), { day: ev.detail.value }));
+                // Read live so parts a sibling column just committed are included.
+                const activePart = this.getActivePartsWithFallback();
+                this.setWorkingParts({
+                    ...this.workingParts,
+                    day: ev.detail.value,
+                });
+                this.setActiveParts({
+                    ...activePart,
+                    day: ev.detail.value,
+                });
                 ev.stopPropagation();
-            } }, days.map((day) => (h("ion-picker-column-option", { part: day.value === pickerColumnValue ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: day.value, disabled: day.disabled, value: day.value }, day.text)))));
+            } }, 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)))));
     }
     renderMonthPickerColumn(months) {
         if (months.length === 0) {
             return [];
         }
         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(Object.assign(Object.assign({}, workingParts), { month: ev.detail.value }));
-                this.setActiveParts(Object.assign(Object.assign({}, activePart), { month: ev.detail.value }));
+                // Read live so parts a sibling column just committed are included.
+                const activePart = this.getActivePartsWithFallback();
+                this.setWorkingParts({
+                    ...this.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,
+                    });
+                }
                 ev.stopPropagation();
-            } }, months.map((month) => (h("ion-picker-column-option", { part: month.value === workingParts.month ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: month.value, disabled: month.disabled, value: month.value }, month.text)))));
+            } }, 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)))));
     }
     renderYearPickerColumn(years) {
         if (years.length === 0) {
             return [];
         }
         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(Object.assign(Object.assign({}, workingParts), { year: ev.detail.value }));
-                this.setActiveParts(Object.assign(Object.assign({}, activePart), { year: ev.detail.value }));
+                // Read live so parts a sibling column just committed are included.
+                const activePart = this.getActivePartsWithFallback();
+                this.setWorkingParts({
+                    ...this.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,
+                    });
+                }
                 ev.stopPropagation();
-            } }, years.map((year) => (h("ion-picker-column-option", { part: year.value === workingParts.year ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: year.value, disabled: year.disabled, value: year.value }, year.text)))));
+            } }, 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)))));
     }
     renderTimePickerColumns(forcePresentation) {
         if (['date', 'month', 'month-year', 'year'].includes(forcePresentation)) {
@@ -1554,40 +2134,64 @@ const Datetime = class {
         ];
     }
     renderHourPickerColumn(hoursData) {
-        const { disabled, workingParts } = this;
+        const { disabled } = this;
         if (hoursData.length === 0)
             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(Object.assign(Object.assign({}, workingParts), { hour: ev.detail.value }));
-                this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { hour: ev.detail.value }));
+                // Read live so parts a sibling column just committed are included.
+                this.setWorkingParts({
+                    ...this.workingParts,
+                    hour: ev.detail.value,
+                });
+                this.setActiveParts({
+                    ...this.getActivePartsWithFallback(),
+                    hour: ev.detail.value,
+                });
                 ev.stopPropagation();
-            } }, hoursData.map((hour) => (h("ion-picker-column-option", { part: hour.value === activePart.hour ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: hour.value, disabled: hour.disabled, value: hour.value }, hour.text)))));
+            } }, 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)))));
     }
     renderMinutePickerColumn(minutesData) {
-        const { disabled, workingParts } = this;
+        const { disabled } = this;
         if (minutesData.length === 0)
             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(Object.assign(Object.assign({}, workingParts), { minute: ev.detail.value }));
-                this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { minute: ev.detail.value }));
+                // Read live so parts a sibling column just committed are included.
+                this.setWorkingParts({
+                    ...this.workingParts,
+                    minute: ev.detail.value,
+                });
+                this.setActiveParts({
+                    ...this.getActivePartsWithFallback(),
+                    minute: ev.detail.value,
+                });
                 ev.stopPropagation();
-            } }, minutesData.map((minute) => (h("ion-picker-column-option", { part: minute.value === activePart.minute ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: minute.value, disabled: minute.disabled, value: minute.value }, minute.text)))));
+            } }, 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)))));
     }
     renderDayPeriodPickerColumn(dayPeriodData) {
-        const { disabled, workingParts } = this;
+        const { disabled } = this;
         if (dayPeriodData.length === 0) {
             return [];
         }
         const activePart = this.getActivePartsWithFallback();
         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(Object.assign(Object.assign({}, workingParts), { ampm: ev.detail.value, hour }));
-                this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { ampm: ev.detail.value, hour }));
+                // Read live so parts a sibling column just committed are included.
+                const currentParts = this.workingParts;
+                const hour = calculateHourFromAMPM(currentParts, ev.detail.value);
+                this.setWorkingParts({
+                    ...currentParts,
+                    ampm: ev.detail.value,
+                    hour,
+                });
+                this.setActiveParts({
+                    ...this.getActivePartsWithFallback(),
+                    ampm: ev.detail.value,
+                    hour,
+                });
                 ev.stopPropagation();
-            } }, dayPeriodData.map((dayPeriod) => (h("ion-picker-column-option", { part: dayPeriod.value === activePart.ampm ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: dayPeriod.value, disabled: dayPeriod.disabled, value: dayPeriod.value }, dayPeriod.text)))));
+            } }, 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)))));
     }
     renderWheelView(forcePresentation) {
         const { locale } = this;
@@ -1631,8 +2235,8 @@ const Datetime = class {
                 // 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: Object.assign(Object.assign({}, this.minParts), { day: null }),
-                maxParts: Object.assign(Object.assign({}, this.maxParts), { day: null }),
+                minParts: { ...this.minParts, day: null },
+                maxParts: { ...this.maxParts, day: null },
             });
         // The working month should never have swipe disabled.
         // Otherwise the CSS scroll snap will not work and the user
@@ -1741,18 +2345,24 @@ const Datetime = class {
                     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 = Object.assign(Object.assign({}, activePart), referenceParts);
+                        this.activeParts = { ...activePart, ...referenceParts };
                         this.animateToDate(referenceParts);
                         this.confirm();
                     }
                     else {
-                        this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), referenceParts));
+                        this.setWorkingParts({
+                            ...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(Object.assign(Object.assign({}, activePart), referenceParts));
+                            this.setActiveParts({
+                                ...activePart,
+                                ...referenceParts,
+                            });
                         }
                     }
                 }
@@ -1795,7 +2405,7 @@ const Datetime = class {
                         await popoverRef.onWillDismiss();
                         this.isTimePopoverOpen = false;
                     }
-                } }, getLocalizedTime(locale, activePart, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time)),
+                } }, getLocalizedTime(locale, activePart, computedHourCycle, 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
@@ -1818,7 +2428,6 @@ const Datetime = class {
         ];
     }
     getHeaderSelectedDateText() {
-        var _a;
         const { activeParts, formatOptions, multiple, titleSelectedDatesFormatter } = this;
         const isArray = Array.isArray(activeParts);
         let headerText;
@@ -1835,7 +2444,7 @@ const Datetime = class {
         }
         else {
             // for exactly 1 day selected (multiple set or not), show a formatted version of that
-            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' });
+            headerText = getLocalizedDateTime(this.locale, this.getActivePartsWithFallback(), formatOptions?.date ?? { weekday: 'short', month: 'short', day: 'numeric' });
         }
         return headerText;
     }
@@ -1924,17 +2533,19 @@ const Datetime = class {
         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: '323c8c2327088f00934b8c93c3306538cb9b5677', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, 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: '1e0855c8909bc3f1e48a21ad68159fa782060691', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+        return (h(Host, { key: '4e0b529a70924b065bcc6191e08550428b5a52a0', "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: 'cc9d1b92f960984cb0466d0003a240ace67da243', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -1984,636 +2595,4 @@ Datetime.style = {
     md: datetimeMdCss()
 };
 
-/**
- * iOS Picker Enter Animation
- */
-const iosEnterAnimation = (baseEl) => {
-    const baseAnimation = createAnimation();
-    const backdropAnimation = createAnimation();
-    const wrapperAnimation = createAnimation();
-    backdropAnimation
-        .addElement(baseEl.querySelector('ion-backdrop'))
-        .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
-        .beforeStyles({
-        'pointer-events': 'none',
-    })
-        .afterClearStyles(['pointer-events']);
-    wrapperAnimation
-        .addElement(baseEl.querySelector('.picker-wrapper'))
-        .fromTo('transform', 'translateY(100%)', 'translateY(0%)');
-    return baseAnimation
-        .addElement(baseEl)
-        .easing('cubic-bezier(.36,.66,.04,1)')
-        .duration(400)
-        .addAnimation([backdropAnimation, wrapperAnimation]);
-};
-
-/**
- * iOS Picker Leave Animation
- */
-const iosLeaveAnimation = (baseEl) => {
-    const baseAnimation = createAnimation();
-    const backdropAnimation = createAnimation();
-    const wrapperAnimation = createAnimation();
-    backdropAnimation
-        .addElement(baseEl.querySelector('ion-backdrop'))
-        .fromTo('opacity', 'var(--backdrop-opacity)', 0.01);
-    wrapperAnimation
-        .addElement(baseEl.querySelector('.picker-wrapper'))
-        .fromTo('transform', 'translateY(0%)', 'translateY(100%)');
-    return baseAnimation
-        .addElement(baseEl)
-        .easing('cubic-bezier(.36,.66,.04,1)')
-        .duration(400)
-        .addAnimation([backdropAnimation, wrapperAnimation]);
-};
-
-const pickerIosCss = () => `.sc-ion-picker-legacy-ios-h{--border-radius:0;--border-style:solid;--min-width:auto;--width:100%;--max-width:500px;--min-height:auto;--max-height:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;font-family:var(--ion-font-family, inherit);contain:strict;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1001}.sc-ion-picker-legacy-ios-h{inset-inline-start:0}.overlay-hidden.sc-ion-picker-legacy-ios-h{display:none}.picker-wrapper.sc-ion-picker-legacy-ios{border-radius:var(--border-radius);left:0;right:0;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;-webkit-transform:translate3d(0,  100%,  0);transform:translate3d(0,  100%,  0);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;overflow:hidden;z-index:10}.picker-toolbar.sc-ion-picker-legacy-ios{width:100%;background:transparent;contain:strict;z-index:1}.picker-button.sc-ion-picker-legacy-ios{border:0;font-family:inherit}.picker-button.sc-ion-picker-legacy-ios:active,.picker-button.sc-ion-picker-legacy-ios:focus{outline:none}.picker-columns.sc-ion-picker-legacy-ios{display:-ms-flexbox;display:flex;position:relative;-ms-flex-pack:center;justify-content:center;margin-bottom:var(--ion-safe-area-bottom, 0);contain:strict;overflow:hidden}.picker-above-highlight.sc-ion-picker-legacy-ios,.picker-below-highlight.sc-ion-picker-legacy-ios{display:none;pointer-events:none}.sc-ion-picker-legacy-ios-h{--background:var(--ion-background-color, #fff);--border-width:1px 0 0;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));--height:260px;--backdrop-opacity:var(--ion-backdrop-opacity, 0.26);color:var(--ion-item-color, var(--ion-text-color, #000))}.picker-toolbar.sc-ion-picker-legacy-ios{display:-ms-flexbox;display:flex;height:44px;border-bottom:0.55px solid var(--border-color)}.picker-toolbar-button.sc-ion-picker-legacy-ios{-ms-flex:1;flex:1;text-align:end}.picker-toolbar-button.sc-ion-picker-legacy-ios:last-child .picker-button.sc-ion-picker-legacy-ios{font-weight:600}.picker-toolbar-button.sc-ion-picker-legacy-ios:first-child{font-weight:normal;text-align:start}.picker-button.sc-ion-picker-legacy-ios,.picker-button.ion-activated.sc-ion-picker-legacy-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:1em;padding-inline-start:1em;-webkit-padding-end:1em;padding-inline-end:1em;padding-top:0;padding-bottom:0;height:44px;background:transparent;color:var(--ion-color-primary, #0054e9);font-size:16px}.picker-columns.sc-ion-picker-legacy-ios{height:215px;-webkit-perspective:1000px;perspective:1000px}.picker-above-highlight.sc-ion-picker-legacy-ios{top:0;-webkit-transform:translate3d(0,  0,  90px);transform:translate3d(0,  0,  90px);display:block;position:absolute;width:100%;height:81px;border-bottom:1px solid var(--border-color);background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, var(--background, var(--ion-background-color, #fff))), to(rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8)));background:linear-gradient(to bottom, var(--background, var(--ion-background-color, #fff)) 20%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%);z-index:10}.picker-above-highlight.sc-ion-picker-legacy-ios{inset-inline-start:0}.picker-below-highlight.sc-ion-picker-legacy-ios{top:115px;-webkit-transform:translate3d(0,  0,  90px);transform:translate3d(0,  0,  90px);display:block;position:absolute;width:100%;height:119px;border-top:1px solid var(--border-color);background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, var(--background, var(--ion-background-color, #fff))), to(rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8)));background:linear-gradient(to top, var(--background, var(--ion-background-color, #fff)) 30%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%);z-index:11}.picker-below-highlight.sc-ion-picker-legacy-ios{inset-inline-start:0}`;
-
-const pickerMdCss = () => `.sc-ion-picker-legacy-md-h{--border-radius:0;--border-style:solid;--min-width:auto;--width:100%;--max-width:500px;--min-height:auto;--max-height:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;font-family:var(--ion-font-family, inherit);contain:strict;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1001}.sc-ion-picker-legacy-md-h{inset-inline-start:0}.overlay-hidden.sc-ion-picker-legacy-md-h{display:none}.picker-wrapper.sc-ion-picker-legacy-md{border-radius:var(--border-radius);left:0;right:0;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;-webkit-transform:translate3d(0,  100%,  0);transform:translate3d(0,  100%,  0);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;overflow:hidden;z-index:10}.picker-toolbar.sc-ion-picker-legacy-md{width:100%;background:transparent;contain:strict;z-index:1}.picker-button.sc-ion-picker-legacy-md{border:0;font-family:inherit}.picker-button.sc-ion-picker-legacy-md:active,.picker-button.sc-ion-picker-legacy-md:focus{outline:none}.picker-columns.sc-ion-picker-legacy-md{display:-ms-flexbox;display:flex;position:relative;-ms-flex-pack:center;justify-content:center;margin-bottom:var(--ion-safe-area-bottom, 0);contain:strict;overflow:hidden}.picker-above-highlight.sc-ion-picker-legacy-md,.picker-below-highlight.sc-ion-picker-legacy-md{display:none;pointer-events:none}.sc-ion-picker-legacy-md-h{--background:var(--ion-background-color, #fff);--border-width:0.55px 0 0;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));--height:260px;--backdrop-opacity:var(--ion-backdrop-opacity, 0.26);color:var(--ion-item-color, var(--ion-text-color, #000))}.picker-toolbar.sc-ion-picker-legacy-md{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;height:44px}.picker-button.sc-ion-picker-legacy-md,.picker-button.ion-activated.sc-ion-picker-legacy-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:1.1em;padding-inline-start:1.1em;-webkit-padding-end:1.1em;padding-inline-end:1.1em;padding-top:0;padding-bottom:0;height:44px;background:transparent;color:var(--ion-color-primary, #0054e9);font-size:14px;font-weight:500;text-transform:uppercase;-webkit-box-shadow:none;box-shadow:none}.picker-columns.sc-ion-picker-legacy-md{height:216px;-webkit-perspective:1800px;perspective:1800px}.picker-above-highlight.sc-ion-picker-legacy-md{top:0;-webkit-transform:translate3d(0,  0,  90px);transform:translate3d(0,  0,  90px);position:absolute;width:100%;height:81px;border-bottom:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, var(--ion-background-color, #fff)), to(rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8)));background:linear-gradient(to bottom, var(--ion-background-color, #fff) 20%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 100%);z-index:10}.picker-above-highlight.sc-ion-picker-legacy-md{inset-inline-start:0}.picker-below-highlight.sc-ion-picker-legacy-md{top:115px;-webkit-transform:translate3d(0,  0,  90px);transform:translate3d(0,  0,  90px);position:absolute;width:100%;height:119px;border-top:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, var(--ion-background-color, #fff)), to(rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8)));background:linear-gradient(to top, var(--ion-background-color, #fff) 30%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 100%);z-index:11}.picker-below-highlight.sc-ion-picker-legacy-md{inset-inline-start:0}`;
-
-const Picker = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.didPresent = createEvent(this, "ionPickerDidPresent", 7);
-        this.willPresent = createEvent(this, "ionPickerWillPresent", 7);
-        this.willDismiss = createEvent(this, "ionPickerWillDismiss", 7);
-        this.didDismiss = createEvent(this, "ionPickerDidDismiss", 7);
-        this.didPresentShorthand = createEvent(this, "didPresent", 7);
-        this.willPresentShorthand = createEvent(this, "willPresent", 7);
-        this.willDismissShorthand = createEvent(this, "willDismiss", 7);
-        this.didDismissShorthand = createEvent(this, "didDismiss", 7);
-        this.delegateController = createDelegateController(this);
-        this.lockController = createLockController();
-        this.triggerController = createTriggerController();
-        this.presented = false;
-        /** @internal */
-        this.hasController = false;
-        /**
-         * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
-         */
-        this.keyboardClose = true;
-        /**
-         * Array of buttons to be displayed at the top of the picker.
-         */
-        this.buttons = [];
-        /**
-         * Array of columns to be displayed in the picker.
-         */
-        this.columns = [];
-        /**
-         * Number of milliseconds to wait before dismissing the picker.
-         */
-        this.duration = 0;
-        /**
-         * If `true`, a backdrop will be displayed behind the picker.
-         */
-        this.showBackdrop = true;
-        /**
-         * If `true`, the picker will be dismissed when the backdrop is clicked.
-         */
-        this.backdropDismiss = true;
-        /**
-         * If `true`, the picker will animate.
-         */
-        this.animated = true;
-        /**
-         * If `true`, the picker will open. If `false`, the picker will close.
-         * Use this if you need finer grained control over presentation, otherwise
-         * just use the pickerController or the `trigger` property.
-         * Note: `isOpen` will not automatically be set back to `false` when
-         * the picker dismisses. You will need to do that in your code.
-         */
-        this.isOpen = false;
-        this.onBackdropTap = () => {
-            this.dismiss(undefined, BACKDROP);
-        };
-        this.dispatchCancelHandler = (ev) => {
-            const role = ev.detail.role;
-            if (isCancel(role)) {
-                const cancelButton = this.buttons.find((b) => b.role === 'cancel');
-                this.callButtonHandler(cancelButton);
-            }
-        };
-    }
-    onIsOpenChange(newValue, oldValue) {
-        if (newValue === true && oldValue === false) {
-            this.present();
-        }
-        else if (newValue === false && oldValue === true) {
-            this.dismiss();
-        }
-    }
-    triggerChanged() {
-        const { trigger, el, triggerController } = this;
-        if (trigger) {
-            triggerController.addClickListener(el, trigger);
-        }
-    }
-    connectedCallback() {
-        prepareOverlay(this.el);
-        this.triggerChanged();
-    }
-    disconnectedCallback() {
-        this.triggerController.removeClickListener();
-    }
-    componentWillLoad() {
-        var _a;
-        if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
-            setOverlayId(this.el);
-        }
-    }
-    componentDidLoad() {
-        printIonWarning('[ion-picker-legacy] - ion-picker-legacy and ion-picker-legacy-column have been deprecated in favor of new versions of the ion-picker and ion-picker-column components. These new components display inline with your page content allowing for more presentation flexibility than before.', this.el);
-        /**
-         * If picker was rendered with isOpen="true"
-         * then we should open picker immediately.
-         */
-        if (this.isOpen === true) {
-            raf(() => this.present());
-        }
-        /**
-         * When binding values in frameworks such as Angular
-         * it is possible for the value to be set after the Web Component
-         * initializes but before the value watcher is set up in Stencil.
-         * As a result, the watcher callback may not be fired.
-         * We work around this by manually calling the watcher
-         * callback when the component has loaded and the watcher
-         * is configured.
-         */
-        this.triggerChanged();
-    }
-    /**
-     * Present the picker overlay after it has been created.
-     */
-    async present() {
-        const unlock = await this.lockController.lock();
-        await this.delegateController.attachViewToDom();
-        await present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined);
-        if (this.duration > 0) {
-            this.durationTimeout = setTimeout(() => this.dismiss(), this.duration);
-        }
-        unlock();
-    }
-    /**
-     * Dismiss the picker overlay after it has been presented.
-     *
-     * @param data Any data to emit in the dismiss events.
-     * @param role The role of the element that is dismissing the picker.
-     * This can be useful in a button handler for determining which button was
-     * clicked to dismiss the picker.
-     * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-     */
-    async dismiss(data, role) {
-        const unlock = await this.lockController.lock();
-        if (this.durationTimeout) {
-            clearTimeout(this.durationTimeout);
-        }
-        const dismissed = await dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation, iosLeaveAnimation);
-        if (dismissed) {
-            this.delegateController.removeViewFromDom();
-        }
-        unlock();
-        return dismissed;
-    }
-    /**
-     * Returns a promise that resolves when the picker did dismiss.
-     */
-    onDidDismiss() {
-        return eventMethod(this.el, 'ionPickerDidDismiss');
-    }
-    /**
-     * Returns a promise that resolves when the picker will dismiss.
-     */
-    onWillDismiss() {
-        return eventMethod(this.el, 'ionPickerWillDismiss');
-    }
-    /**
-     * Get the column that matches the specified name.
-     *
-     * @param name The name of the column.
-     */
-    getColumn(name) {
-        return Promise.resolve(this.columns.find((column) => column.name === name));
-    }
-    async buttonClick(button) {
-        const role = button.role;
-        if (isCancel(role)) {
-            return this.dismiss(undefined, role);
-        }
-        const shouldDismiss = await this.callButtonHandler(button);
-        if (shouldDismiss) {
-            return this.dismiss(this.getSelected(), button.role);
-        }
-        return Promise.resolve();
-    }
-    async callButtonHandler(button) {
-        if (button) {
-            // a handler has been provided, execute it
-            // pass the handler the values from the inputs
-            const rtn = await safeCall(button.handler, this.getSelected());
-            if (rtn === false) {
-                // if the return value of the handler is false then do not dismiss
-                return false;
-            }
-        }
-        return true;
-    }
-    getSelected() {
-        const selected = {};
-        this.columns.forEach((col, index) => {
-            const selectedColumn = col.selectedIndex !== undefined ? col.options[col.selectedIndex] : undefined;
-            selected[col.name] = {
-                text: selectedColumn ? selectedColumn.text : undefined,
-                value: selectedColumn ? selectedColumn.value : undefined,
-                columnIndex: index,
-            };
-        });
-        return selected;
-    }
-    render() {
-        const { htmlAttributes } = this;
-        const mode = getIonMode(this);
-        return (h(Host, Object.assign({ key: '80f66d33780d8a1352d24be9cb63a0cc03d01ab5', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
-                zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true,
-                // Used internally for styling
-                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '97fb8e10ba08b197610cb8c0cdea61103883d55f', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'b3969cb6fbf7153623d14e3ca1493d3370efb211', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '299268483c3727e698d9135bfdf40349a7050ac1', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: '95394de3ef691899b7dbf416f56fd3e86bbdce3f', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: '05f18bb8d00dc0e22f691b7e41f90f729a6c66d7', class: "picker-columns" }, h("div", { key: '4a8fdf224effc0af67fd413e2e6aca8a78d1cf43', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: 'e50a31db45e3f39e9d0fed36a21be9257eec09bf', class: "picker-below-highlight" }))), h("div", { key: '5a78cb2176ac807ea0c195c6b76cd0e8eef9d4c0', tabindex: "0", "aria-hidden": "true" })));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "isOpen": [{
-                "onIsOpenChange": 0
-            }],
-        "trigger": [{
-                "triggerChanged": 0
-            }]
-    }; }
-};
-const buttonWrapperClass = (button) => {
-    return {
-        [`picker-toolbar-${button.role}`]: button.role !== undefined,
-        'picker-toolbar-button': true,
-    };
-};
-const buttonClass = (button) => {
-    return Object.assign({ 'picker-button': true, 'ion-activatable': true }, getClassMap(button.cssClass));
-};
-Picker.style = {
-    ios: pickerIosCss(),
-    md: pickerMdCss()
-};
-
-const pickerColumnIosCss = () => `.picker-col{display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;height:100%;-webkit-box-sizing:content-box;box-sizing:content-box;contain:content}.picker-opts{position:relative;-ms-flex:1;flex:1;max-width:100%}.picker-opt{top:0;display:block;position:absolute;width:100%;border:0;text-align:center;text-overflow:ellipsis;white-space:nowrap;contain:strict;overflow:hidden;will-change:transform}.picker-opt{inset-inline-start:0}.picker-opt.picker-opt-disabled{pointer-events:none}.picker-opt-disabled{opacity:0}.picker-opts-left{-ms-flex-pack:start;justify-content:flex-start}.picker-opts-right{-ms-flex-pack:end;justify-content:flex-end}.picker-opt:active,.picker-opt:focus{outline:none}.picker-prefix{position:relative;-ms-flex:1;flex:1;text-align:end;white-space:nowrap}.picker-suffix{position:relative;-ms-flex:1;flex:1;text-align:start;white-space:nowrap}.picker-col{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:0;padding-bottom:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.picker-prefix,.picker-suffix,.picker-opts{top:77px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;color:inherit;font-size:20px;line-height:42px;pointer-events:none}.picker-opt{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-transform-origin:center center;transform-origin:center center;height:46px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;background:transparent;color:inherit;font-size:20px;line-height:42px;-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:auto}:host-context([dir=rtl]) .picker-opt{-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}[dir=rtl] .picker-opt{-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}@supports selector(:dir(rtl)){.picker-opt:dir(rtl){-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}}`;
-
-const pickerColumnMdCss = () => `.picker-col{display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;height:100%;-webkit-box-sizing:content-box;box-sizing:content-box;contain:content}.picker-opts{position:relative;-ms-flex:1;flex:1;max-width:100%}.picker-opt{top:0;display:block;position:absolute;width:100%;border:0;text-align:center;text-overflow:ellipsis;white-space:nowrap;contain:strict;overflow:hidden;will-change:transform}.picker-opt{inset-inline-start:0}.picker-opt.picker-opt-disabled{pointer-events:none}.picker-opt-disabled{opacity:0}.picker-opts-left{-ms-flex-pack:start;justify-content:flex-start}.picker-opts-right{-ms-flex-pack:end;justify-content:flex-end}.picker-opt:active,.picker-opt:focus{outline:none}.picker-prefix{position:relative;-ms-flex:1;flex:1;text-align:end;white-space:nowrap}.picker-suffix{position:relative;-ms-flex:1;flex:1;text-align:start;white-space:nowrap}.picker-col{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.picker-prefix,.picker-suffix,.picker-opts{top:77px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;color:inherit;font-size:22px;line-height:42px;pointer-events:none}.picker-opt{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;height:43px;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;background:transparent;color:inherit;font-size:22px;line-height:42px;-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:auto}.picker-prefix,.picker-suffix,.picker-opt.picker-opt-selected{color:var(--ion-color-primary, #0054e9)}`;
-
-const PickerColumnCmp = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.ionPickerColChange = createEvent(this, "ionPickerColChange", 7);
-        this.optHeight = 0;
-        this.rotateFactor = 0;
-        this.scaleFactor = 1;
-        this.velocity = 0;
-        this.y = 0;
-        this.noAnimate = true;
-        // `colDidChange` is a flag that gets set when the column is changed
-        // dynamically. When this flag is set, the column will refresh
-        // after the component re-renders to incorporate the new column data.
-        // This is necessary because `this.refresh` queries for the option elements,
-        // so it needs to wait for the latest elements to be available in the DOM.
-        // Ex: column is created with 3 options. User updates the column data
-        // to have 5 options. The column will still think it only has 3 options.
-        this.colDidChange = false;
-    }
-    colChanged() {
-        this.colDidChange = true;
-    }
-    async connectedCallback() {
-        let pickerRotateFactor = 0;
-        let pickerScaleFactor = 0.81;
-        const mode = getIonMode(this);
-        if (mode === 'ios') {
-            pickerRotateFactor = -0.46;
-            pickerScaleFactor = 1;
-        }
-        this.rotateFactor = pickerRotateFactor;
-        this.scaleFactor = pickerScaleFactor;
-        this.gesture = (await import('./index-CfgBF1SE.js')).createGesture({
-            el: this.el,
-            gestureName: 'picker-swipe',
-            gesturePriority: 100,
-            threshold: 0,
-            passive: false,
-            onStart: (ev) => this.onStart(ev),
-            onMove: (ev) => this.onMove(ev),
-            onEnd: (ev) => this.onEnd(ev),
-        });
-        this.gesture.enable();
-        // Options have not been initialized yet
-        // Animation must be disabled through the `noAnimate` flag
-        // Otherwise, the options will render
-        // at the top of the column and transition down
-        this.tmrId = setTimeout(() => {
-            this.noAnimate = false;
-            // After initialization, `refresh()` will be called
-            // At this point, animation will be enabled. The options will
-            // animate as they are being selected.
-            this.refresh(true);
-        }, 250);
-    }
-    componentDidLoad() {
-        this.onDomChange();
-    }
-    componentDidUpdate() {
-        // Options may have changed since last update.
-        if (this.colDidChange) {
-            // Animation must be disabled through the `onDomChange` parameter.
-            // Otherwise, the recently added options will render
-            // at the top of the column and transition down
-            this.onDomChange(true, false);
-            this.colDidChange = false;
-        }
-    }
-    disconnectedCallback() {
-        if (this.rafId !== undefined)
-            cancelAnimationFrame(this.rafId);
-        if (this.tmrId)
-            clearTimeout(this.tmrId);
-        if (this.gesture) {
-            this.gesture.destroy();
-            this.gesture = undefined;
-        }
-    }
-    emitColChange() {
-        this.ionPickerColChange.emit(this.col);
-    }
-    setSelected(selectedIndex, duration) {
-        // if there is a selected index, then figure out it's y position
-        // if there isn't a selected index, then just use the top y position
-        const y = selectedIndex > -1 ? -(selectedIndex * this.optHeight) : 0;
-        this.velocity = 0;
-        // set what y position we're at
-        if (this.rafId !== undefined)
-            cancelAnimationFrame(this.rafId);
-        this.update(y, duration, true);
-        this.emitColChange();
-    }
-    update(y, duration, saveY) {
-        if (!this.optsEl) {
-            return;
-        }
-        // ensure we've got a good round number :)
-        let translateY = 0;
-        let translateZ = 0;
-        const { col, rotateFactor } = this;
-        const prevSelected = col.selectedIndex;
-        const selectedIndex = (col.selectedIndex = this.indexForY(-y));
-        const durationStr = duration === 0 ? '' : duration + 'ms';
-        const scaleStr = `scale(${this.scaleFactor})`;
-        const children = this.optsEl.children;
-        for (let i = 0; i < children.length; i++) {
-            const button = children[i];
-            const opt = col.options[i];
-            const optOffset = i * this.optHeight + y;
-            let transform = '';
-            if (rotateFactor !== 0) {
-                const rotateX = optOffset * rotateFactor;
-                if (Math.abs(rotateX) <= 90) {
-                    translateY = 0;
-                    translateZ = 90;
-                    transform = `rotateX(${rotateX}deg) `;
-                }
-                else {
-                    translateY = -9999;
-                }
-            }
-            else {
-                translateZ = 0;
-                translateY = optOffset;
-            }
-            const selected = selectedIndex === i;
-            transform += `translate3d(0px,${translateY}px,${translateZ}px) `;
-            if (this.scaleFactor !== 1 && !selected) {
-                transform += scaleStr;
-            }
-            // Update transition duration
-            if (this.noAnimate) {
-                opt.duration = 0;
-                button.style.transitionDuration = '';
-            }
-            else if (duration !== opt.duration) {
-                opt.duration = duration;
-                button.style.transitionDuration = durationStr;
-            }
-            // Update transform
-            if (transform !== opt.transform) {
-                opt.transform = transform;
-            }
-            button.style.transform = transform;
-            /**
-             * Ensure that the select column
-             * item has the selected class
-             */
-            opt.selected = selected;
-            if (selected) {
-                button.classList.add(PICKER_OPT_SELECTED);
-            }
-            else {
-                button.classList.remove(PICKER_OPT_SELECTED);
-            }
-        }
-        this.col.prevSelected = prevSelected;
-        if (saveY) {
-            this.y = y;
-        }
-        if (this.lastIndex !== selectedIndex) {
-            // have not set a last index yet
-            hapticSelectionChanged();
-            this.lastIndex = selectedIndex;
-        }
-    }
-    decelerate() {
-        if (this.velocity !== 0) {
-            // still decelerating
-            this.velocity *= DECELERATION_FRICTION;
-            // do not let it go slower than a velocity of 1
-            this.velocity = this.velocity > 0 ? Math.max(this.velocity, 1) : Math.min(this.velocity, -1);
-            let y = this.y + this.velocity;
-            if (y > this.minY) {
-                // whoops, it's trying to scroll up farther than the options we have!
-                y = this.minY;
-                this.velocity = 0;
-            }
-            else if (y < this.maxY) {
-                // gahh, it's trying to scroll down farther than we can!
-                y = this.maxY;
-                this.velocity = 0;
-            }
-            this.update(y, 0, true);
-            const notLockedIn = Math.round(y) % this.optHeight !== 0 || Math.abs(this.velocity) > 1;
-            if (notLockedIn) {
-                // isn't locked in yet, keep decelerating until it is
-                this.rafId = requestAnimationFrame(() => this.decelerate());
-            }
-            else {
-                this.velocity = 0;
-                this.emitColChange();
-                hapticSelectionEnd();
-            }
-        }
-        else if (this.y % this.optHeight !== 0) {
-            // needs to still get locked into a position so options line up
-            const currentPos = Math.abs(this.y % this.optHeight);
-            // create a velocity in the direction it needs to scroll
-            this.velocity = currentPos > this.optHeight / 2 ? 1 : -1;
-            this.decelerate();
-        }
-    }
-    indexForY(y) {
-        return Math.min(Math.max(Math.abs(Math.round(y / this.optHeight)), 0), this.col.options.length - 1);
-    }
-    onStart(detail) {
-        // We have to prevent default in order to block scrolling under the picker
-        // but we DO NOT have to stop propagation, since we still want
-        // some "click" events to capture
-        if (detail.event.cancelable) {
-            detail.event.preventDefault();
-        }
-        detail.event.stopPropagation();
-        hapticSelectionStart();
-        // reset everything
-        if (this.rafId !== undefined)
-            cancelAnimationFrame(this.rafId);
-        const options = this.col.options;
-        let minY = options.length - 1;
-        let maxY = 0;
-        for (let i = 0; i < options.length; i++) {
-            if (!options[i].disabled) {
-                minY = Math.min(minY, i);
-                maxY = Math.max(maxY, i);
-            }
-        }
-        this.minY = -(minY * this.optHeight);
-        this.maxY = -(maxY * this.optHeight);
-    }
-    onMove(detail) {
-        if (detail.event.cancelable) {
-            detail.event.preventDefault();
-        }
-        detail.event.stopPropagation();
-        // update the scroll position relative to pointer start position
-        let y = this.y + detail.deltaY;
-        if (y > this.minY) {
-            // scrolling up higher than scroll area
-            y = Math.pow(y, 0.8);
-            this.bounceFrom = y;
-        }
-        else if (y < this.maxY) {
-            // scrolling down below scroll area
-            y += Math.pow(this.maxY - y, 0.9);
-            this.bounceFrom = y;
-        }
-        else {
-            this.bounceFrom = 0;
-        }
-        this.update(y, 0, false);
-    }
-    onEnd(detail) {
-        if (this.bounceFrom > 0) {
-            // bounce back up
-            this.update(this.minY, 100, true);
-            this.emitColChange();
-            return;
-        }
-        else if (this.bounceFrom < 0) {
-            // bounce back down
-            this.update(this.maxY, 100, true);
-            this.emitColChange();
-            return;
-        }
-        this.velocity = clamp(-MAX_PICKER_SPEED, detail.velocityY * 23, MAX_PICKER_SPEED);
-        if (this.velocity === 0 && detail.deltaY === 0) {
-            const opt = detail.event.target.closest('.picker-opt');
-            if (opt === null || opt === void 0 ? void 0 : opt.hasAttribute('opt-index')) {
-                this.setSelected(parseInt(opt.getAttribute('opt-index'), 10), TRANSITION_DURATION);
-            }
-        }
-        else {
-            this.y += detail.deltaY;
-            if (Math.abs(detail.velocityY) < 0.05) {
-                const isScrollingUp = detail.deltaY > 0;
-                const optHeightFraction = (Math.abs(this.y) % this.optHeight) / this.optHeight;
-                if (isScrollingUp && optHeightFraction > 0.5) {
-                    this.velocity = Math.abs(this.velocity) * -1;
-                }
-                else if (!isScrollingUp && optHeightFraction <= 0.5) {
-                    this.velocity = Math.abs(this.velocity);
-                }
-            }
-            this.decelerate();
-        }
-    }
-    refresh(forceRefresh, animated) {
-        var _a;
-        let min = this.col.options.length - 1;
-        let max = 0;
-        const options = this.col.options;
-        for (let i = 0; i < options.length; i++) {
-            if (!options[i].disabled) {
-                min = Math.min(min, i);
-                max = Math.max(max, i);
-            }
-        }
-        /**
-         * Only update selected value if column has a
-         * velocity of 0. If it does not, then the
-         * column is animating might land on
-         * a value different than the value at
-         * selectedIndex
-         */
-        if (this.velocity !== 0) {
-            return;
-        }
-        const selectedIndex = clamp(min, (_a = this.col.selectedIndex) !== null && _a !== void 0 ? _a : 0, max);
-        if (this.col.prevSelected !== selectedIndex || forceRefresh) {
-            const y = selectedIndex * this.optHeight * -1;
-            const duration = animated ? TRANSITION_DURATION : 0;
-            this.velocity = 0;
-            this.update(y, duration, true);
-        }
-    }
-    onDomChange(forceRefresh, animated) {
-        const colEl = this.optsEl;
-        if (colEl) {
-            // DOM READ
-            // We perfom a DOM read over a rendered item, this needs to happen after the first render or after the column has changed
-            this.optHeight = colEl.firstElementChild ? colEl.firstElementChild.clientHeight : 0;
-        }
-        this.refresh(forceRefresh, animated);
-    }
-    render() {
-        const col = this.col;
-        const mode = getIonMode(this);
-        return (h(Host, { key: '86125e95f18837dfd021db01777d72a1562d8ee3', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
-                'max-width': this.col.columnWidth,
-            } }, col.prefix && (h("div", { key: 'b0f3d39e0bd128781066ffefb7a1e40d12a9e76d', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '0b106ac4d56916eaaa7f09d1b68348b3754b7bba', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { key: '00ff2f9dbb4561787e5a5223327c6a2a33f8362e', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "col": [{
-                "colChanged": 0
-            }]
-    }; }
-};
-const PICKER_OPT_SELECTED = 'picker-opt-selected';
-const DECELERATION_FRICTION = 0.97;
-const MAX_PICKER_SPEED = 90;
-const TRANSITION_DURATION = 150;
-PickerColumnCmp.style = {
-    ios: pickerColumnIosCss(),
-    md: pickerColumnMdCss()
-};
-
-export { Datetime as ion_datetime, Picker as ion_picker_legacy, PickerColumnCmp as ion_picker_legacy_column };
+export { Datetime as ion_datetime };