@sparkle-learning/core 0.0.33 → 0.0.36

package/dist/esm/ion-datetime.entry.js

@@ -1,875 +1,12 @@
-import { r as registerInstance, i as createEvent, w as writeTask, h, H as Host, e as getElement } from './index-5568e3fa.js';
-import { b as chevronBack, d as chevronForward, c as chevronDown, f as caretUpSharp, g as caretDownSharp } from './index-ea26196a.js';
-import { g as getIonMode } from './ionic-global-0939c477.js';
-import { startFocusVisible } from './focus-visible-40cda868.js';
-import { b as raf, d as renderHiddenInput, g as getElementRoot } from './helpers-9d0930de.js';
+import { r as registerInstance, i as createEvent, w as writeTask, h, H as Host, e as getElement } from './index-c04b9ed5.js';
+import { d as chevronBack, c as chevronForward, a as chevronDown, f as caretUpSharp, g as caretDownSharp } from './index-4044fde9.js';
+import { g as getIonMode } from './ionic-global-4903e23e.js';
+import { startFocusVisible } from './focus-visible-4e9a0764.js';
+import { l as raf, d as renderHiddenInput, g as getElementRoot } from './helpers-bf0e23d6.js';
+import { a as printIonWarning, p as printIonError } from './index-dad75b83.js';
 import { i as isRTL } from './dir-03012648.js';
-import { c as createColorClasses } from './theme-c336c9d9.js';
-
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-/**
- * Returns true if the selected day is equal to the reference day
- */
-const isSameDay = (baseParts, compareParts) => {
-  return (baseParts.month === compareParts.month &&
-    baseParts.day === compareParts.day &&
-    baseParts.year === compareParts.year);
-};
-/**
- * Returns true is the selected day is before the reference day.
- */
-const isBefore = (baseParts, compareParts) => {
-  return (baseParts.year < compareParts.year ||
-    baseParts.year === compareParts.year && baseParts.month < compareParts.month ||
-    baseParts.year === compareParts.year && baseParts.month === compareParts.month && baseParts.day < compareParts.day);
-};
-/**
- * Returns true is the selected day is after the reference day.
- */
-const isAfter = (baseParts, compareParts) => {
-  return (baseParts.year > compareParts.year ||
-    baseParts.year === compareParts.year && baseParts.month > compareParts.month ||
-    baseParts.year === compareParts.year && baseParts.month === compareParts.month && baseParts.day > compareParts.day);
-};
-
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-/**
- * Determines if given year is a
- * leap year. Returns `true` if year
- * is a leap year. Returns `false`
- * otherwise.
- */
-const isLeapYear = (year) => {
-  return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
-};
-const is24Hour = (locale, hourCycle) => {
-  /**
-   * If developer has explicitly enabled h23 time
-   * then return early and do not look at the system default.
-   */
-  if (hourCycle !== undefined) {
-    return hourCycle === 'h23';
-  }
-  /**
-   * If hourCycle was not specified, check the locale
-   * that is set on the user's device. We first check the
-   * Intl.DateTimeFormat hourCycle option as developers can encode this
-   * option into the locale string. Example: `en-US-u-hc-h23`
-   */
-  const formatted = new Intl.DateTimeFormat(locale, { hour: 'numeric' });
-  const options = formatted.resolvedOptions();
-  if (options.hourCycle !== undefined) {
-    return options.hourCycle === 'h23';
-  }
-  /**
-   * If hourCycle is not specified (either through lack
-   * of browser support or locale information) then fall
-   * back to this slower hourCycle check.
-   */
-  const date = new Date('5/18/2021 00:00');
-  const parts = formatted.formatToParts(date);
-  const hour = parts.find(p => p.type === 'hour');
-  if (!hour) {
-    throw new Error('Hour value not found from DateTimeFormat');
-  }
-  return hour.value === '00';
-};
-/**
- * Given a date object, returns the number
- * of days in that month.
- * Month value begin at 1, not 0.
- * i.e. January = month 1.
- */
-const getNumDaysInMonth = (month, year) => {
-  return (month === 4 || month === 6 || month === 9 || month === 11) ? 30 : (month === 2) ? isLeapYear(year) ? 29 : 28 : 31;
-};
-/**
- * Certain locales display month then year while
- * others display year then month.
- * We can use Intl.DateTimeFormat to determine
- * the ordering for each locale.
- */
-const isMonthFirstLocale = (locale) => {
-  /**
-   * By setting month and year we guarantee that only
-   * month, year, and literal (slashes '/', for example)
-   * values are included in the formatToParts results.
-   *
-   * The ordering of the parts will be determined by
-   * the locale. So if the month is the first value,
-   * then we know month should be shown first. If the
-   * year is the first value, then we know year should be shown first.
-   *
-   * This ordering can be controlled by customizing the locale property.
-   */
-  const parts = new Intl.DateTimeFormat(locale, { month: 'numeric', year: 'numeric' }).formatToParts(new Date());
-  return parts[0].type === 'month';
-};
-
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-const twoDigit = (val) => {
-  return ('0' + (val !== undefined ? Math.abs(val) : '0')).slice(-2);
-};
-const fourDigit = (val) => {
-  return ('000' + (val !== undefined ? Math.abs(val) : '0')).slice(-4);
-};
-const convertDataToISO = (data) => {
-  // https://www.w3.org/TR/NOTE-datetime
-  let rtn = '';
-  if (data.year !== undefined) {
-    // YYYY
-    rtn = fourDigit(data.year);
-    if (data.month !== undefined) {
-      // YYYY-MM
-      rtn += '-' + twoDigit(data.month);
-      if (data.day !== undefined) {
-        // YYYY-MM-DD
-        rtn += '-' + twoDigit(data.day);
-        if (data.hour !== undefined) {
-          // YYYY-MM-DDTHH:mm:SS
-          rtn += `T${twoDigit(data.hour)}:${twoDigit(data.minute)}:00`;
-          if (data.tzOffset === undefined) {
-            // YYYY-MM-DDTHH:mm:SSZ
-            rtn += 'Z';
-          }
-          else {
-            // YYYY-MM-DDTHH:mm:SS+/-HH:mm
-            rtn += (data.tzOffset > 0 ? '+' : '-') + twoDigit(Math.floor(Math.abs(data.tzOffset / 60))) + ':' + twoDigit(data.tzOffset % 60);
-          }
-        }
-      }
-    }
-  }
-  else if (data.hour !== undefined) {
-    // HH:mm
-    rtn = twoDigit(data.hour) + ':' + twoDigit(data.minute);
-  }
-  return rtn;
-};
-/**
- * Converts an 12 hour value to 24 hours.
- */
-const convert12HourTo24Hour = (hour, ampm) => {
-  if (ampm === undefined) {
-    return hour;
-  }
-  /**
-   * If AM and 12am
-   * then return 00:00.
-   * Otherwise just return
-   * the hour since it is
-   * already in 24 hour format.
-   */
-  if (ampm === 'am') {
-    if (hour === 12) {
-      return 0;
-    }
-    return hour;
-  }
-  /**
-   * If PM and 12pm
-   * just return 12:00
-   * since it is already
-   * in 24 hour format.
-   * Otherwise add 12 hours
-   * to the time.
-   */
-  if (hour === 12) {
-    return 12;
-  }
-  return hour + 12;
-};
-const getStartOfWeek = (refParts) => {
-  const { dayOfWeek } = refParts;
-  if (dayOfWeek === null || dayOfWeek === undefined) {
-    throw new Error('No day of week provided');
-  }
-  return subtractDays(refParts, dayOfWeek);
-};
-const getEndOfWeek = (refParts) => {
-  const { dayOfWeek } = refParts;
-  if (dayOfWeek === null || dayOfWeek === undefined) {
-    throw new Error('No day of week provided');
-  }
-  return addDays(refParts, 6 - dayOfWeek);
-};
-const getNextDay = (refParts) => {
-  return addDays(refParts, 1);
-};
-const getPreviousDay = (refParts) => {
-  return subtractDays(refParts, 1);
-};
-const getPreviousWeek = (refParts) => {
-  return subtractDays(refParts, 7);
-};
-const getNextWeek = (refParts) => {
-  return addDays(refParts, 7);
-};
-/**
- * Given datetime parts, subtract
- * numDays from the date.
- * Returns a new DatetimeParts object
- * Currently can only go backward at most 1 month.
- */
-const subtractDays = (refParts, numDays) => {
-  const { month, day, year } = refParts;
-  if (day === null) {
-    throw new Error('No day provided');
-  }
-  const workingParts = {
-    month,
-    day,
-    year
-  };
-  workingParts.day = day - numDays;
-  /**
-   * If wrapping to previous month
-   * update days and decrement month
-   */
-  if (workingParts.day < 1) {
-    workingParts.month -= 1;
-  }
-  /**
-   * If moving to previous year, reset
-   * month to December and decrement year
-   */
-  if (workingParts.month < 1) {
-    workingParts.month = 12;
-    workingParts.year -= 1;
-  }
-  /**
-   * Determine how many days are in the current
-   * month
-   */
-  if (workingParts.day < 1) {
-    const daysInMonth = getNumDaysInMonth(workingParts.month, workingParts.year);
-    /**
-     * Take num days in month and add the
-     * number of underflow days. This number will
-     * be negative.
-     * Example: 1 week before Jan 2, 2021 is
-     * December 26, 2021 so:
-     * 2 - 7 = -5
-     * 31 + (-5) = 26
-     */
-    workingParts.day = daysInMonth + workingParts.day;
-  }
-  return workingParts;
-};
-/**
- * Given datetime parts, add
- * numDays to the date.
- * Returns a new DatetimeParts object
- * Currently can only go forward at most 1 month.
- */
-const addDays = (refParts, numDays) => {
-  const { month, day, year } = refParts;
-  if (day === null) {
-    throw new Error('No day provided');
-  }
-  const workingParts = {
-    month,
-    day,
-    year
-  };
-  const daysInMonth = getNumDaysInMonth(month, year);
-  workingParts.day = day + numDays;
-  /**
-   * If wrapping to next month
-   * update days and increment month
-   */
-  if (workingParts.day > daysInMonth) {
-    workingParts.day -= daysInMonth;
-    workingParts.month += 1;
-  }
-  /**
-   * If moving to next year, reset
-   * month to January and increment year
-   */
-  if (workingParts.month > 12) {
-    workingParts.month = 1;
-    workingParts.year += 1;
-  }
-  return workingParts;
-};
-/**
- * Given DatetimeParts, generate the previous month.
- */
-const getPreviousMonth = (refParts) => {
-  /**
-   * If current month is January, wrap backwards
-   *  to December of the previous year.
-   */
-  const month = (refParts.month === 1) ? 12 : refParts.month - 1;
-  const year = (refParts.month === 1) ? refParts.year - 1 : refParts.year;
-  const numDaysInMonth = getNumDaysInMonth(month, year);
-  const day = (numDaysInMonth < refParts.day) ? numDaysInMonth : refParts.day;
-  return { month, year, day };
-};
-/**
- * Given DatetimeParts, generate the next month.
- */
-const getNextMonth = (refParts) => {
-  /**
-   * If current month is December, wrap forwards
-   *  to January of the next year.
-   */
-  const month = (refParts.month === 12) ? 1 : refParts.month + 1;
-  const year = (refParts.month === 12) ? refParts.year + 1 : refParts.year;
-  const numDaysInMonth = getNumDaysInMonth(month, year);
-  const day = (numDaysInMonth < refParts.day) ? numDaysInMonth : refParts.day;
-  return { month, year, day };
-};
-const changeYear = (refParts, yearDelta) => {
-  const month = refParts.month;
-  const year = refParts.year + yearDelta;
-  const numDaysInMonth = getNumDaysInMonth(month, year);
-  const day = (numDaysInMonth < refParts.day) ? numDaysInMonth : refParts.day;
-  return { month, year, day };
-};
-/**
- * Given DatetimeParts, generate the previous year.
- */
-const getPreviousYear = (refParts) => {
-  return changeYear(refParts, -1);
-};
-/**
- * Given DatetimeParts, generate the next year.
- */
-const getNextYear = (refParts) => {
-  return changeYear(refParts, 1);
-};
-/**
- * If PM, then internal value should
- * be converted to 24-hr time.
- * Does not apply when public
- * values are already 24-hr time.
- */
-const getInternalHourValue = (hour, use24Hour, ampm) => {
-  if (use24Hour) {
-    return hour;
-  }
-  return convert12HourTo24Hour(hour, ampm);
-};
-/**
- * Unless otherwise stated, all month values are
- * 1 indexed instead of the typical 0 index in JS Date.
- * Example:
- *   January = Month 0 when using JS Date
- *   January = Month 1 when using this datetime util
- */
-/**
- * Given the current datetime parts and a new AM/PM value
- * calculate what the hour should be in 24-hour time format.
- * Used when toggling the AM/PM segment since we store our hours
- * in 24-hour time format internally.
- */
-const calculateHourFromAMPM = (currentParts, newAMPM) => {
-  const { ampm: currentAMPM, hour } = currentParts;
-  let newHour = hour;
-  /**
-   * If going from AM --> PM, need to update the
-   *
-   */
-  if (currentAMPM === 'am' && newAMPM === 'pm') {
-    newHour = convert12HourTo24Hour(newHour, 'pm');
-    /**
-     * If going from PM --> AM
-     */
-  }
-  else if (currentAMPM === 'pm' && newAMPM === 'am') {
-    newHour = Math.abs(newHour - 12);
-  }
-  return newHour;
-};
-
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-/**
- * Returns the current date as
- * an ISO string in the user's
- * timezone.
- */
-const getToday = () => {
-  /**
-   * Grab the current date object
-   * as well as the timezone offset
-   */
-  const date = new Date();
-  const tzOffset = date.getTimezoneOffset();
-  /**
-   * When converting to ISO string, everything is
-   * set to UTC. Since we want to show these dates
-   * relative to the user's timezone, we need to
-   * subtract the timezone offset from the date
-   * so that when `toISOString()` adds it back
-   * there was a net change of zero hours from the
-   * local date.
-   */
-  date.setHours(date.getHours() - (tzOffset / 60));
-  return 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];
-const hour12 = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
-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];
-/**
- * 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) => {
-  const numDays = getNumDaysInMonth(month, 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 });
-  }
-  for (let i = 0; i <= offset; i++) {
-    days = [
-      { day: null, dayOfWeek: null },
-      ...days
-    ];
-  }
-  return days;
-};
-/**
- * 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 = (refParts, hourCycle = 'h12', minParts, maxParts, hourValues, minuteValues) => {
-  const use24Hour = hourCycle === 'h23';
-  let processedHours = use24Hour ? hour23 : hour12;
-  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 >= 13;
-      }
-      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) => {
-  return [
-    getPreviousMonth(refParts),
-    { month: refParts.month, year: refParts.year, day: refParts.day },
-    getNextMonth(refParts)
-  ];
-};
-const getPickerMonths = (locale, refParts, minParts, maxParts, monthValues) => {
-  const { year } = refParts;
-  const months = [];
-  if (monthValues !== undefined) {
-    let processedMonths = monthValues;
-    if ((maxParts === null || maxParts === void 0 ? void 0 : maxParts.month) !== undefined) {
-      processedMonths = processedMonths.filter(month => month <= maxParts.month);
-    }
-    if ((minParts === null || minParts === void 0 ? void 0 : 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, { month: 'long', 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, { month: 'long', timeZone: 'UTC' }).format(date);
-      months.push({ text: monthString, value: i });
-    }
-  }
-  return months;
-};
-const getCalendarYears = (refParts, minParts, maxParts, yearValues) => {
-  if (yearValues !== undefined) {
-    let processedYears = yearValues;
-    if ((maxParts === null || maxParts === void 0 ? void 0 : maxParts.year) !== undefined) {
-      processedYears = processedYears.filter(year => year <= maxParts.year);
-    }
-    if ((minParts === null || minParts === void 0 ? void 0 : minParts.year) !== undefined) {
-      processedYears = processedYears.filter(year => year >= minParts.year);
-    }
-    return processedYears;
-  }
-  else {
-    const { year } = refParts;
-    const maxYear = ((maxParts === null || maxParts === void 0 ? void 0 : maxParts.year) || year);
-    const minYear = ((minParts === null || minParts === void 0 ? void 0 : minParts.year) || year - 100);
-    const years = [];
-    for (let i = maxYear; i >= minYear; i--) {
-      years.push(i);
-    }
-    return years;
-  }
-};
-
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-const get12HourTime = (hour) => {
-  return hour % 12 || 12;
-};
-const getFormattedAMPM = (ampm) => {
-  if (ampm === undefined) {
-    return '';
-  }
-  return ampm.toUpperCase();
-};
-const getFormattedTime = (refParts, use24Hour) => {
-  if (refParts.hour === undefined || refParts.minute === undefined) {
-    return 'Invalid Time';
-  }
-  const hour = use24Hour ? getFormattedHour(refParts.hour, use24Hour) : get12HourTime(refParts.hour);
-  const minute = addTimePadding(refParts.minute);
-  if (use24Hour) {
-    return `${hour}:${minute}`;
-  }
-  return `${hour}:${minute} ${getFormattedAMPM(refParts.ampm)}`;
-};
-/**
- * Adds padding to a time value so
- * that it is always 2 digits.
- */
-const addTimePadding = (value) => {
-  const valueToString = value.toString();
-  if (valueToString.length > 1) {
-    return valueToString;
-  }
-  return `0${valueToString}`;
-};
-/**
- * Formats the hour value so that it
- * is always 2 digits. Only applies
- * if using 12 hour format.
- */
-const getFormattedHour = (hour, use24Hour) => {
-  if (!use24Hour) {
-    return hour.toString();
-  }
-  return addTimePadding(hour);
-};
-/**
- * Generates an aria-label to be read by screen readers
- * given a local, a date, and whether or not that date is
- * today's date.
- */
-const generateDayAriaLabel = (locale, today, refParts) => {
-  if (refParts.day === null) {
-    return null;
-  }
-  /**
-   * MM/DD/YYYY will return midnight in the user's timezone.
-   */
-  const date = new Date(`${refParts.month}/${refParts.day}/${refParts.year} GMT+0000`);
-  const labelString = new Intl.DateTimeFormat(locale, { weekday: 'long', month: 'long', day: 'numeric', timeZone: 'UTC' }).format(date);
-  /**
-   * If date is today, prepend "Today" so screen readers indicate
-   * that the date is today.
-   */
-  return (today) ? `Today, ${labelString}` : labelString;
-};
-/**
- * Gets the day of the week, month, and day
- * Used for the header in MD mode.
- */
-const getMonthAndDay = (locale, refParts) => {
-  const date = new Date(`${refParts.month}/${refParts.day}/${refParts.year} GMT+0000`);
-  return new Intl.DateTimeFormat(locale, { weekday: 'short', month: 'short', day: 'numeric', timeZone: 'UTC' }).format(date);
-};
-/**
- * Given a locale and a date object,
- * return a formatted string that includes
- * the month name and full year.
- * Example: May 2021
- */
-const getMonthAndYear = (locale, refParts) => {
-  const date = new Date(`${refParts.month}/${refParts.day}/${refParts.year} GMT+0000`);
-  return new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric', timeZone: 'UTC' }).format(date);
-};
-
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-const ISO_8601_REGEXP = /^(\d{4}|[+\-]\d{6})(?:-(\d{2})(?:-(\d{2}))?)?(?:T(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{3}))?)?(?:(Z)|([+\-])(\d{2})(?::(\d{2}))?)?)?$/;
-const TIME_REGEXP = /^((\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{3}))?)?(?:(Z)|([+\-])(\d{2})(?::(\d{2}))?)?)?$/;
-/**
- * Use to convert a string of comma separated numbers or
- * an array of numbers, and clean up any user input
- */
-const convertToArrayOfNumbers = (input) => {
-  if (input === undefined) {
-    return;
-  }
-  let processedInput = input;
-  if (typeof input === 'string') {
-    // convert the string to an array of strings
-    // auto remove any whitespace and [] characters
-    processedInput = input.replace(/\[|\]|\s/g, '').split(',');
-  }
-  let values;
-  if (Array.isArray(processedInput)) {
-    // ensure each value is an actual number in the returned array
-    values = processedInput
-      .map((num) => parseInt(num, 10))
-      .filter(isFinite);
-  }
-  else {
-    values = [processedInput];
-  }
-  return values;
-};
-/**
- * Extracts date information
- * from a .calendar-day element
- * into DatetimeParts.
- */
-const getPartsFromCalendarDay = (el) => {
-  return {
-    month: parseInt(el.getAttribute('data-month'), 10),
-    day: parseInt(el.getAttribute('data-day'), 10),
-    year: parseInt(el.getAttribute('data-year'), 10),
-    dayOfWeek: parseInt(el.getAttribute('data-day-of-week'), 10)
-  };
-};
-/**
- * Given an ISO-8601 string, format out the parts
- * We do not use the JS Date object here because
- * it adjusts the date for the current timezone.
- */
-const parseDate = (val) => {
-  // manually parse IS0 cuz Date.parse cannot be trusted
-  // ISO 8601 format: 1994-12-15T13:47:20Z
-  let parse = null;
-  if (val != null && val !== '') {
-    // try parsing for just time first, HH:MM
-    parse = TIME_REGEXP.exec(val);
-    if (parse) {
-      // adjust the array so it fits nicely with the datetime parse
-      parse.unshift(undefined, undefined);
-      parse[2] = parse[3] = undefined;
-    }
-    else {
-      // try parsing for full ISO datetime
-      parse = ISO_8601_REGEXP.exec(val);
-    }
-  }
-  if (parse === null) {
-    // wasn't able to parse the ISO datetime
-    return undefined;
-  }
-  // ensure all the parse values exist with at least 0
-  for (let i = 1; i < 8; i++) {
-    parse[i] = parse[i] !== undefined ? parseInt(parse[i], 10) : undefined;
-  }
-  let tzOffset = 0;
-  if (parse[9] && parse[10]) {
-    // hours
-    tzOffset = parseInt(parse[10], 10) * 60;
-    if (parse[11]) {
-      // minutes
-      tzOffset += parseInt(parse[11], 10);
-    }
-    if (parse[9] === '-') {
-      // + or -
-      tzOffset *= -1;
-    }
-  }
-  return {
-    year: parse[1],
-    month: parse[2],
-    day: parse[3],
-    hour: parse[4],
-    minute: parse[5],
-    second: parse[6],
-    millisecond: parse[7],
-    tzOffset,
-  };
-};
+import { c as createColorClasses } from './theme-7ef00c83.js';
+import { g as generateDayAriaLabel, i as isBefore, a as isAfter, b as isSameDay, c as getPreviousMonth, d as getNextMonth, p as parseDate, e as getToday, f as getPartsFromCalendarDay, h as getEndOfWeek, j as getStartOfWeek, k as getPreviousDay, l as getNextDay, m as getPreviousWeek, n as getNextWeek, w as warnIfValueOutOfBounds, o as convertToArrayOfNumbers, q as convertDataToISO, r as getCombinedDateColumnData, s as getMonthColumnData, t as getDayColumnData, u as getYearColumnData, v as isMonthFirstLocale, x as getTimeColumnsData, y as isLocaleDayPeriodRTL, z as getDaysOfWeek, A as getMonthAndYear, B as getDaysOfMonth, C as generateMonths, D as is24Hour, E as getLocalizedTime, F as getMonthAndDay, G as formatValue, H as getNextYear, I as getPreviousYear, J as clampDate, K as parseAmPm, L as calculateHourFromAMPM } from './parse-1ae3a9bb.js';
 
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
@@ -940,33 +77,49 @@ const isDayDisabled = (refParts, minParts, maxParts, dayValues) => {
   return false;
 };
 /**
- * Given a locale, a date, the selected date, and today's date,
+ * Given a locale, a date, the selected date(s), and today's date,
  * generate the state for a given calendar day button.
  */
 const getCalendarDayState = (locale, refParts, activeParts, todayParts, minParts, maxParts, dayValues) => {
-  const isActive = isSameDay(refParts, activeParts);
+  /**
+   * activeParts signals what day(s) are currently selected in the datetime.
+   * If multiple="true", this will be an array, but the logic in this util
+   * is the same whether we have one selected day or many because we're only
+   * calculating the state for one button. So, we treat a single activeParts value
+   * the same as an array of length one.
+   */
+  const activePartsArray = Array.isArray(activeParts) ? activeParts : [activeParts];
+  /**
+   * The day button is active if it is selected, or in other words, if refParts
+   * matches at least one selected date.
+   */
+  const isActive = activePartsArray.find((parts) => isSameDay(refParts, parts)) !== undefined;
   const isToday = isSameDay(refParts, todayParts);
   const disabled = isDayDisabled(refParts, minParts, maxParts, dayValues);
+  /**
+   * Note that we always return one object regardless of whether activeParts
+   * was an array, since we pare down to one value for isActive.
+   */
   return {
     disabled,
     isActive,
     isToday,
     ariaSelected: isActive ? 'true' : null,
-    ariaLabel: generateDayAriaLabel(locale, isToday, refParts)
+    ariaLabel: generateDayAriaLabel(locale, isToday, refParts),
   };
 };
 /**
  * Returns `true` if the month is disabled given the
  * current date value and min/max date constraints.
  */
-const isMonthDisabled = (refParts, { minParts, maxParts }) => {
+const isMonthDisabled = (refParts, { minParts, maxParts, }) => {
   // If the year is disabled then the month is disabled.
   if (isYearDisabled(refParts.year, minParts, maxParts)) {
     return true;
   }
   // If the date value is before the min date, then the month is disabled.
   // If the date value is after the max date, then the month is disabled.
-  if (minParts && isBefore(refParts, minParts) || maxParts && isAfter(refParts, maxParts)) {
+  if ((minParts && isBefore(refParts, minParts)) || (maxParts && isAfter(refParts, maxParts))) {
     return true;
   }
   return false;
@@ -977,10 +130,10 @@ const isMonthDisabled = (refParts, { minParts, maxParts }) => {
  * previous navigation button is disabled.
  */
 const isPrevMonthDisabled = (refParts, minParts, maxParts) => {
-  const prevMonth = getPreviousMonth(refParts);
+  const prevMonth = Object.assign(Object.assign({}, getPreviousMonth(refParts)), { day: null });
   return isMonthDisabled(prevMonth, {
     minParts,
-    maxParts
+    maxParts,
   });
 };
 /**
@@ -988,15 +141,15 @@ const isPrevMonthDisabled = (refParts, minParts, maxParts) => {
  * determine if the next navigation button is disabled.
  */
 const isNextMonthDisabled = (refParts, maxParts) => {
-  const nextMonth = getNextMonth(refParts);
+  const nextMonth = Object.assign(Object.assign({}, getNextMonth(refParts)), { day: null });
   return isMonthDisabled(nextMonth, {
-    maxParts
+    maxParts,
   });
 };
 
-const datetimeIosCss = ":host{display:flex;flex-flow:column;background:var(--background);overflow:hidden}:host(.datetime-size-fixed){width:auto;max-width:350px;height:auto}: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 .datetime-year .order-month-first .month-column{order:1}:host .datetime-year .order-month-first .year-column{order:2}:host .datetime-year .order-year-first .month-column{order:2;text-align:end}:host .datetime-year .order-year-first .year-column{order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:flex;flex:1 1 auto;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:flex}@supports (background: -webkit-named-image(apple-pay-logo-black)) and (not (aspect-ratio: 1/1)){: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{left:-99999px;position:absolute;visibility:hidden;pointer-events:none}:host-context([dir=rtl]):host(.show-month-and-year) .calendar-next-prev,:host-context([dir=rtl]).show-month-and-year .calendar-next-prev,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-days-of-week,:host-context([dir=rtl]).show-month-and-year .calendar-days-of-week,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-body,:host-context([dir=rtl]).show-month-and-year .calendar-body,:host-context([dir=rtl]):host(.show-month-and-year) .datetime-time,:host-context([dir=rtl]).show-month-and-year .datetime-time{left:unset;right:unset;right:-99999px}}@supports (not (background: -webkit-named-image(apple-pay-logo-black))) or ((background: -webkit-named-image(apple-pay-logo-black)) and (aspect-ratio: 1/1)){: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(.datetime-readonly),:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled){opacity:0.4}: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:flex;justify-content:space-between}:host .calendar-action-buttons{display:flex;justify-content:space-between}:host .calendar-action-buttons ion-item,:host .calendar-action-buttons ion-button{--background:translucent}:host .calendar-action-buttons ion-item ion-label{display:flex;align-items:center}:host .calendar-action-buttons ion-item ion-icon{padding-left:4px;padding-right:0;padding-top:0;padding-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-action-buttons ion-item ion-icon{padding-left:unset;padding-right:unset;-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0}}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}:host .calendar-body{display:flex;flex-grow:1;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{scroll-snap-align:start;scroll-snap-stop:always;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);height:100%}:host .calendar-day{padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;margin-bottom:0px;display:flex;position:relative;align-items:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;cursor:pointer;appearance:none;z-index:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-day{padding-left:unset;padding-right:unset;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px}}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-day{margin-left:unset;margin-right:unset;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px}}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}:host .calendar-day:after{border-radius:32px;padding-left:4px;padding-right:4px;padding-top:4px;padding-bottom:4px;left:50%;top:50%;position:absolute;width:32px;height:32px;transform:translate(-50%, -50%);content:\" \";z-index:-1}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-day:after{padding-left:unset;padding-right:unset;-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px}}:host-context([dir=rtl]){left:unset;right:unset;right:50%}:host .datetime-time{display:flex;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:flex;align-items:center}:host .time-body{border-radius:8px;padding-left:12px;padding-right:12px;padding-top:6px;padding-bottom:6px;display:flex;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;appearance:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .time-body{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}:host .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons ion-item{--color:var(--ion-color-base)}:host{--background:var(--ion-color-light, #ffffff);--background-rgb:var(--ion-color-light-rgb);--title-color:var(--ion-color-step-600, #666666)}:host(.datetime-presentation-date-time),:host(.datetime-presentation-time-date),:host(.datetime-presentation-date){min-height:350px}:host .datetime-header{padding-left:16px;padding-right:16px;padding-top:16px;padding-bottom:16px;border-bottom:0.55px solid var(--ion-color-step-200, #cccccc)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .datetime-header{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}:host .datetime-header .datetime-title{color:var(--title-color);font-size:14px}:host .calendar-action-buttons ion-item{--padding-start:16px;--background-hover:transparent;--background-activated:transparent;font-size:16px;font-weight:600}:host .calendar-action-buttons ion-item ion-icon,:host .calendar-action-buttons ion-buttons ion-button{color:var(--ion-color-base)}:host .calendar-action-buttons ion-buttons{padding-left:0;padding-right:0;padding-top:8px;padding-bottom:0}: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{padding-left:8px;padding-right:8px;padding-top:0;padding-bottom:0;color:var(--ion-color-step-300, #b3b3b3);font-size:12px;font-weight:600;line-height:24px;text-transform:uppercase}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-days-of-week{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}}:host .calendar-body .calendar-month .calendar-month-grid{padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px;height:calc(100% - 16px)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-body .calendar-month .calendar-month-grid{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}}:host .calendar-day{font-size:20px}:host .calendar-day:after{opacity:0.2}:host .calendar-day:focus:after{background:var(--ion-color-base)}:host .calendar-day.calendar-day-today{color:var(--ion-color-base)}:host .calendar-day.calendar-day-active{color:var(--ion-color-base);font-weight:600}:host .calendar-day.calendar-day-active:after{background:var(--ion-color-base)}:host .calendar-day.calendar-day-today.calendar-day-active{color:var(--ion-color-contrast)}:host .calendar-day.calendar-day-today.calendar-day-active:after{background:var(--ion-color-base);opacity:1}:host .datetime-time{padding-left:16px;padding-right:16px;padding-top:8px;padding-bottom:16px;font-size:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .datetime-time{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}:host .datetime-time .time-header{font-weight:600}:host .datetime-buttons{padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px;border-top:0.55px solid var(--ion-color-step-200, #cccccc)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .datetime-buttons{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}}:host .datetime-buttons ::slotted(ion-buttons),:host .datetime-buttons ion-buttons{display:flex;align-items:center;justify-content:space-between}:host .datetime-action-buttons{width:100%}";
+const datetimeIosCss = ":host{display:flex;flex-flow:column;background:var(--background);overflow:hidden}ion-picker-column-internal{min-width:26px}: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: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{order:3;text-align:end}:host .wheel-order-year-first .month-column{order:2;text-align:end}:host .wheel-order-year-first .year-column{order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:flex;flex:1 1 auto;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:flex}@supports (background: -webkit-named-image(apple-pay-logo-black)) and (not (aspect-ratio: 1/1)){: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{left:-99999px;position:absolute;visibility:hidden;pointer-events:none}:host-context([dir=rtl]):host(.show-month-and-year) .calendar-next-prev,:host-context([dir=rtl]).show-month-and-year .calendar-next-prev,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-days-of-week,:host-context([dir=rtl]).show-month-and-year .calendar-days-of-week,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-body,:host-context([dir=rtl]).show-month-and-year .calendar-body,:host-context([dir=rtl]):host(.show-month-and-year) .datetime-time,:host-context([dir=rtl]).show-month-and-year .datetime-time{left:unset;right:unset;right:-99999px}}@supports (not (background: -webkit-named-image(apple-pay-logo-black))) or ((background: -webkit-named-image(apple-pay-logo-black)) and (aspect-ratio: 1/1)){: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-readonly),:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled){opacity:0.4}: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:flex;justify-content:space-between}:host .calendar-action-buttons{display:flex;justify-content:space-between}:host .calendar-action-buttons ion-item,:host .calendar-action-buttons ion-button{--background:translucent}:host .calendar-action-buttons ion-item ion-label{display:flex;align-items:center}:host .calendar-action-buttons ion-item ion-icon{padding-left:4px;padding-right:0;padding-top:0;padding-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-action-buttons ion-item ion-icon{padding-left:unset;padding-right:unset;-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0}}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}:host .calendar-body{display:flex;flex-grow:1;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{scroll-snap-align:start;scroll-snap-stop:always;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);height:100%}:host .calendar-day{padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;margin-bottom:0px;display:flex;position:relative;align-items:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;cursor:pointer;appearance:none;z-index:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-day{padding-left:unset;padding-right:unset;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px}}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-day{margin-left:unset;margin-right:unset;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px}}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}:host .calendar-day:after{border-radius:32px;padding-left:4px;padding-right:4px;padding-top:4px;padding-bottom:4px;position:absolute;top:50%;left:50%;width:32px;height:32px;transform:translate(-50%, -50%);content:\" \";z-index:-1}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-day:after{padding-left:unset;padding-right:unset;-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px}}:host .datetime-time{display:flex;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:flex;align-items:center}:host .time-body{border-radius:8px;padding-left:12px;padding-right:12px;padding-top:6px;padding-bottom:6px;display:flex;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;appearance:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .time-body{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}:host .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons ion-item{--color:var(--ion-color-base)}:host{--background:var(--ion-color-light, #ffffff);--background-rgb:var(--ion-color-light-rgb);--title-color:var(--ion-color-step-600, #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{padding-left:16px;padding-right:16px;padding-top:16px;padding-bottom:16px;border-bottom:0.55px solid var(--ion-color-step-200, #cccccc)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .datetime-header{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}:host .datetime-header .datetime-title{color:var(--title-color);font-size:14px}:host .calendar-action-buttons ion-item{--padding-start:16px;--background-hover:transparent;--background-activated:transparent;font-size:16px;font-weight:600}:host .calendar-action-buttons ion-item ion-icon,:host .calendar-action-buttons ion-buttons ion-button{color:var(--ion-color-base)}:host .calendar-action-buttons ion-buttons{padding-left:0;padding-right:0;padding-top:8px;padding-bottom:0}: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{padding-left:8px;padding-right:8px;padding-top:0;padding-bottom:0;color:var(--ion-color-step-300, #b3b3b3);font-size:12px;font-weight:600;line-height:24px;text-transform:uppercase}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-days-of-week{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}}:host .calendar-body .calendar-month .calendar-month-grid{padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px;height:calc(100% - 16px)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-body .calendar-month .calendar-month-grid{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}}:host .calendar-day{font-size:20px}:host .calendar-day:after{opacity:0.2}:host .calendar-day:focus:after{background:var(--ion-color-base)}:host .calendar-day.calendar-day-today{color:var(--ion-color-base)}:host .calendar-day.calendar-day-active{color:var(--ion-color-base);font-weight:600}:host .calendar-day.calendar-day-active:after{background:var(--ion-color-base)}:host .calendar-day.calendar-day-today.calendar-day-active{color:var(--ion-color-contrast)}:host .calendar-day.calendar-day-today.calendar-day-active:after{background:var(--ion-color-base);opacity:1}:host .datetime-time{padding-left:16px;padding-right:16px;padding-top:8px;padding-bottom:16px;font-size:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .datetime-time{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}:host .datetime-time .time-header{font-weight:600}:host .datetime-buttons{padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px;border-top:0.55px solid var(--ion-color-step-200, #cccccc)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .datetime-buttons{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}}:host .datetime-buttons ::slotted(ion-buttons),:host .datetime-buttons ion-buttons{display:flex;align-items:center;justify-content:space-between}:host .datetime-action-buttons{width:100%}";
 
-const datetimeMdCss = ":host{display:flex;flex-flow:column;background:var(--background);overflow:hidden}:host(.datetime-size-fixed){width:auto;max-width:350px;height:auto}: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 .datetime-year .order-month-first .month-column{order:1}:host .datetime-year .order-month-first .year-column{order:2}:host .datetime-year .order-year-first .month-column{order:2;text-align:end}:host .datetime-year .order-year-first .year-column{order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:flex;flex:1 1 auto;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:flex}@supports (background: -webkit-named-image(apple-pay-logo-black)) and (not (aspect-ratio: 1/1)){: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{left:-99999px;position:absolute;visibility:hidden;pointer-events:none}:host-context([dir=rtl]):host(.show-month-and-year) .calendar-next-prev,:host-context([dir=rtl]).show-month-and-year .calendar-next-prev,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-days-of-week,:host-context([dir=rtl]).show-month-and-year .calendar-days-of-week,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-body,:host-context([dir=rtl]).show-month-and-year .calendar-body,:host-context([dir=rtl]):host(.show-month-and-year) .datetime-time,:host-context([dir=rtl]).show-month-and-year .datetime-time{left:unset;right:unset;right:-99999px}}@supports (not (background: -webkit-named-image(apple-pay-logo-black))) or ((background: -webkit-named-image(apple-pay-logo-black)) and (aspect-ratio: 1/1)){: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(.datetime-readonly),:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled){opacity:0.4}: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:flex;justify-content:space-between}:host .calendar-action-buttons{display:flex;justify-content:space-between}:host .calendar-action-buttons ion-item,:host .calendar-action-buttons ion-button{--background:translucent}:host .calendar-action-buttons ion-item ion-label{display:flex;align-items:center}:host .calendar-action-buttons ion-item ion-icon{padding-left:4px;padding-right:0;padding-top:0;padding-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-action-buttons ion-item ion-icon{padding-left:unset;padding-right:unset;-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0}}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}:host .calendar-body{display:flex;flex-grow:1;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{scroll-snap-align:start;scroll-snap-stop:always;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);height:100%}:host .calendar-day{padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;margin-bottom:0px;display:flex;position:relative;align-items:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;cursor:pointer;appearance:none;z-index:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-day{padding-left:unset;padding-right:unset;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px}}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-day{margin-left:unset;margin-right:unset;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px}}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}:host .calendar-day:after{border-radius:32px;padding-left:4px;padding-right:4px;padding-top:4px;padding-bottom:4px;left:50%;top:50%;position:absolute;width:32px;height:32px;transform:translate(-50%, -50%);content:\" \";z-index:-1}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-day:after{padding-left:unset;padding-right:unset;-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px}}:host-context([dir=rtl]){left:unset;right:unset;right:50%}:host .datetime-time{display:flex;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:flex;align-items:center}:host .time-body{border-radius:8px;padding-left:12px;padding-right:12px;padding-top:6px;padding-bottom:6px;display:flex;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;appearance:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .time-body{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}:host .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons ion-item{--color:var(--ion-color-base)}:host{--background:var(--ion-color-step-100, #ffffff);--title-color:var(--ion-color-contrast)}:host .datetime-header{padding-left:20px;padding-right:20px;padding-top:20px;padding-bottom:20px;background:var(--ion-color-base);color:var(--title-color)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .datetime-header{padding-left:unset;padding-right:unset;-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px}}:host .datetime-header .datetime-title{font-size:12px;text-transform:uppercase}:host .datetime-header .datetime-selected-date{margin-top:30px;font-size:34px}:host .datetime-calendar .calendar-action-buttons ion-item{--padding-start:20px}:host .calendar-action-buttons ion-item,:host .calendar-action-buttons ion-button{color:var(--ion-color-step-650, #595959)}:host .calendar-days-of-week{padding-left:10px;padding-right:10px;padding-top:0px;padding-bottom:0px;color:var(--ion-color-step-500, gray);font-size:14px;line-height:36px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-days-of-week{padding-left:unset;padding-right:unset;-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px}}:host .calendar-body .calendar-month .calendar-month-grid{padding-left:10px;padding-right:10px;padding-top:3px;padding-bottom:0px;grid-template-rows:repeat(6, 1fr)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-body .calendar-month .calendar-month-grid{padding-left:unset;padding-right:unset;-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px}}:host .calendar-day{padding-left:0px;padding-right:0;padding-top:13px;padding-bottom:13px;font-size:14px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-day{padding-left:unset;padding-right:unset;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0;padding-inline-end:0}}:host .calendar-day:focus:after{background:rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .calendar-day.calendar-day-today{color:var(--ion-color-base)}:host .calendar-day.calendar-day-today:after{border:1px solid var(--ion-color-base)}:host .calendar-day.calendar-day-active{color:var(--ion-color-contrast)}:host .calendar-day.calendar-day-active:after{border:1px solid var(--ion-color-base);background:var(--ion-color-base)}:host .datetime-time{padding-left:16px;padding-right:16px;padding-top:8px;padding-bottom:8px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .datetime-time{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}:host .time-header{color:var(--ion-color-step-650, #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{padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:10px;display:flex;align-items:center;justify-content:flex-end}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .datetime-buttons{padding-left:unset;padding-right:unset;-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px}}:host .datetime-view-buttons ion-button{color:var(--ion-color-step-800, #333333)}";
+const datetimeMdCss = ":host{display:flex;flex-flow:column;background:var(--background);overflow:hidden}ion-picker-column-internal{min-width:26px}: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: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{order:3;text-align:end}:host .wheel-order-year-first .month-column{order:2;text-align:end}:host .wheel-order-year-first .year-column{order:1;text-align:start}:host .datetime-calendar,:host .datetime-year{display:flex;flex:1 1 auto;flex-flow:column}:host(.show-month-and-year) .datetime-year{display:flex}@supports (background: -webkit-named-image(apple-pay-logo-black)) and (not (aspect-ratio: 1/1)){: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{left:-99999px;position:absolute;visibility:hidden;pointer-events:none}:host-context([dir=rtl]):host(.show-month-and-year) .calendar-next-prev,:host-context([dir=rtl]).show-month-and-year .calendar-next-prev,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-days-of-week,:host-context([dir=rtl]).show-month-and-year .calendar-days-of-week,:host-context([dir=rtl]):host(.show-month-and-year) .calendar-body,:host-context([dir=rtl]).show-month-and-year .calendar-body,:host-context([dir=rtl]):host(.show-month-and-year) .datetime-time,:host-context([dir=rtl]).show-month-and-year .datetime-time{left:unset;right:unset;right:-99999px}}@supports (not (background: -webkit-named-image(apple-pay-logo-black))) or ((background: -webkit-named-image(apple-pay-logo-black)) and (aspect-ratio: 1/1)){: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-readonly),:host(.datetime-disabled){pointer-events:none}:host(.datetime-disabled){opacity:0.4}: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:flex;justify-content:space-between}:host .calendar-action-buttons{display:flex;justify-content:space-between}:host .calendar-action-buttons ion-item,:host .calendar-action-buttons ion-button{--background:translucent}:host .calendar-action-buttons ion-item ion-label{display:flex;align-items:center}:host .calendar-action-buttons ion-item ion-icon{padding-left:4px;padding-right:0;padding-top:0;padding-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-action-buttons ion-item ion-icon{padding-left:unset;padding-right:unset;-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:0;padding-inline-end:0}}:host .calendar-days-of-week{display:grid;grid-template-columns:repeat(7, 1fr);text-align:center}:host .calendar-body{display:flex;flex-grow:1;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:hidden;scrollbar-width:none;outline:none}:host .calendar-body .calendar-month{scroll-snap-align:start;scroll-snap-stop:always;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);height:100%}:host .calendar-day{padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;margin-bottom:0px;display:flex;position:relative;align-items:center;justify-content:center;border:none;outline:none;background:none;color:currentColor;cursor:pointer;appearance:none;z-index:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-day{padding-left:unset;padding-right:unset;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px}}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-day{margin-left:unset;margin-right:unset;-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px}}:host .calendar-day[disabled]{pointer-events:none;opacity:0.4}:host .calendar-day:after{border-radius:32px;padding-left:4px;padding-right:4px;padding-top:4px;padding-bottom:4px;position:absolute;top:50%;left:50%;width:32px;height:32px;transform:translate(-50%, -50%);content:\" \";z-index:-1}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-day:after{padding-left:unset;padding-right:unset;-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px}}:host .datetime-time{display:flex;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:flex;align-items:center}:host .time-body{border-radius:8px;padding-left:12px;padding-right:12px;padding-top:6px;padding-bottom:6px;display:flex;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;appearance:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .time-body{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}:host .time-body-active{color:var(--ion-color-base)}:host(.in-item){position:static}:host(.show-month-and-year) .calendar-action-buttons ion-item{--color:var(--ion-color-base)}:host{--background:var(--ion-color-step-100, #ffffff);--title-color:var(--ion-color-contrast)}:host .datetime-header{padding-left:20px;padding-right:20px;padding-top:20px;padding-bottom:20px;background:var(--ion-color-base);color:var(--title-color)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .datetime-header{padding-left:unset;padding-right:unset;-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px}}:host .datetime-header .datetime-title{font-size:12px;text-transform:uppercase}:host .datetime-header .datetime-selected-date{margin-top:30px;font-size:34px}:host .datetime-calendar .calendar-action-buttons ion-item{--padding-start:20px}:host .calendar-action-buttons ion-item,:host .calendar-action-buttons ion-button{color:var(--ion-color-step-650, #595959)}:host .calendar-days-of-week{padding-left:10px;padding-right:10px;padding-top:0px;padding-bottom:0px;color:var(--ion-color-step-500, gray);font-size:14px;line-height:36px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-days-of-week{padding-left:unset;padding-right:unset;-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px}}:host .calendar-body .calendar-month .calendar-month-grid{padding-left:10px;padding-right:10px;padding-top:3px;padding-bottom:0px;grid-template-rows:repeat(6, 1fr)}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-body .calendar-month .calendar-month-grid{padding-left:unset;padding-right:unset;-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px}}:host .calendar-day{padding-left:0px;padding-right:0;padding-top:13px;padding-bottom:13px;font-size:14px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .calendar-day{padding-left:unset;padding-right:unset;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0;padding-inline-end:0}}:host .calendar-day:focus:after{background:rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2)}:host .calendar-day.calendar-day-today{color:var(--ion-color-base)}:host .calendar-day.calendar-day-today:after{border:1px solid var(--ion-color-base)}:host .calendar-day.calendar-day-active{color:var(--ion-color-contrast)}:host .calendar-day.calendar-day-active:after{border:1px solid var(--ion-color-base);background:var(--ion-color-base)}:host .datetime-time{padding-left:16px;padding-right:16px;padding-top:8px;padding-bottom:8px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .datetime-time{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}:host .time-header{color:var(--ion-color-step-650, #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{padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:10px;display:flex;align-items:center;justify-content:flex-end}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host .datetime-buttons{padding-left:unset;padding-right:unset;-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:10px;padding-inline-end:10px}}:host .datetime-view-buttons ion-button{color:var(--ion-color-step-800, #333333)}";
 
 const Datetime = class {
   constructor(hostRef) {
@@ -1006,8 +159,17 @@ const Datetime = class {
     this.ionFocus = createEvent(this, "ionFocus", 7);
     this.ionBlur = createEvent(this, "ionBlur", 7);
     this.ionStyle = createEvent(this, "ionStyle", 7);
+    this.ionRender = createEvent(this, "ionRender", 7);
     this.inputId = `ion-dt-${datetimeIds++}`;
-    this.overlayIsPresenting = false;
+    /**
+     * Whether to highlight the active day with a solid circle (as opposed
+     * to the outline circle around today). If you don't specify an initial
+     * value for the datetime, it doesn't automatically init to a default to
+     * avoid unwanted change events firing. If the solid circle were still
+     * shown then, it would look like a date had already been selected, which
+     * is misleading UX.
+     */
+    this.highlightActiveParts = false;
     this.todayParts = parseDate(getToday());
     this.prevPresentation = null;
     this.showMonthAndYear = false;
@@ -1017,7 +179,7 @@ const Datetime = class {
       year: 2021,
       hour: 13,
       minute: 52,
-      ampm: 'pm'
+      ampm: 'pm',
     };
     this.workingParts = {
       month: 5,
@@ -1025,7 +187,7 @@ const Datetime = class {
       year: 2021,
       hour: 13,
       minute: 52,
-      ampm: 'pm'
+      ampm: 'pm',
     };
     this.isPresented = false;
     this.isTimePopoverOpen = false;
@@ -1079,6 +241,11 @@ const Datetime = class {
      * default value is `0` and represents Sunday.
      */
     this.firstDayOfWeek = 0;
+    /**
+     * If `true`, multiple dates can be selected at once. Only
+     * applies to `presentation="date"` and `preferWheel="false"`.
+     */
+    this.multiple = false;
     /**
      * If `true`, a header will be shown above the calendar
      * picker. On `ios` mode this will include the
@@ -1118,6 +285,19 @@ const Datetime = class {
      * If `fixed`, the `ion-datetime` will have a fixed width.
      */
     this.size = 'fixed';
+    /**
+     * If `true`, a wheel picker will be rendered instead of a calendar grid
+     * where possible. If `false`, a calendar grid will be rendered instead of
+     * a wheel picker where possible.
+     *
+     * A wheel picker can be rendered instead of a grid when `presentation` is
+     * one of the following values: `'date'`, `'date-time'`, or `'time-date'`.
+     *
+     * A wheel picker will always be rendered regardless of
+     * the `preferWheel` value when `presentation` is one of the following values:
+     * `'time'`, `'month'`, `'month-year'`, or `'year'`.
+     */
+    this.preferWheel = false;
     this.closeParentOverlay = () => {
       const popoverOrModal = this.el.closest('ion-modal, ion-popover');
       if (popoverOrModal) {
@@ -1127,8 +307,48 @@ const Datetime = class {
     this.setWorkingParts = (parts) => {
       this.workingParts = Object.assign({}, parts);
     };
-    this.setActiveParts = (parts) => {
-      this.activeParts = Object.assign({}, parts);
+    this.setActiveParts = (parts, removeDate = false) => {
+      const { multiple, activePartsClone, highlightActiveParts } = this;
+      if (multiple) {
+        /**
+         * We read from activePartsClone here because valueChanged() only updates that,
+         * so it's the more reliable source of truth. If we read from activeParts, then
+         * if you click July 1, manually set the value to July 2, and then click July 3,
+         * the new value would be [July 1, July 3], ignoring the value set.
+         *
+         * We can then pass the new value to activeParts (rather than activePartsClone)
+         * since the clone will be updated automatically by activePartsChanged().
+         */
+        const activePartsArray = Array.isArray(activePartsClone) ? activePartsClone : [activePartsClone];
+        if (removeDate) {
+          this.activeParts = activePartsArray.filter((p) => !isSameDay(p, parts));
+        }
+        else if (highlightActiveParts) {
+          this.activeParts = [...activePartsArray, parts];
+        }
+        else {
+          /**
+           * If highlightActiveParts is false, that means we just have a
+           * default value of today in activeParts; we need to replace that
+           * rather than adding to it since it's just a placeholder.
+           */
+          this.activeParts = [parts];
+        }
+      }
+      else {
+        this.activeParts = Object.assign({}, parts);
+      }
+      /**
+       * Now that the user has interacted somehow to select something, we can
+       * show the solid highlight. This needs to be done after checking it above,
+       * but before the confirm call below.
+       *
+       * Note that for datetimes with confirm/cancel buttons, the value
+       * isn't updated until you call confirm(). We need to bring the
+       * solid circle back on day click for UX reasons, rather than only
+       * show the circle if `value` is truthy.
+       */
+      this.highlightActiveParts = true;
       const hasSlottedButtons = this.el.querySelector('[slot="buttons"]') !== null;
       if (hasSlottedButtons || this.showDefaultButtons) {
         return;
@@ -1171,8 +391,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 (((_a = record.oldValue) === null || _a === void 0 ? void 0 : _a.includes('ion-focused')) || !calendarBodyRef.classList.contains('ion-focused')) {
           return;
         }
         this.focusWorkingDay(currentMonth);
@@ -1281,7 +500,7 @@ const Datetime = class {
         day,
         year,
         hour,
-        minute
+        minute,
       };
     };
     this.processMaxParts = () => {
@@ -1295,21 +514,19 @@ const Datetime = class {
         day,
         year,
         hour,
-        minute
+        minute,
       };
     };
-    this.initializeCalendarIOListeners = () => {
+    this.initializeCalendarListener = () => {
       const calendarBodyRef = this.getCalendarBodyEl();
       if (!calendarBodyRef) {
         return;
       }
-      const mode = getIonMode(this);
       /**
        * For performance reasons, we only render 3
        * months at a time: The current month, the previous
-       * month, and the next month. We have IntersectionObservers
-       * on the previous and next month elements to append/prepend
-       * new months.
+       * month, and the next month. We have a scroll listener
+       * on the calendar body to append/prepend new months.
        *
        * We can do this because Stencil is smart enough to not
        * re-create the .calendar-month containers, but rather
@@ -1324,61 +541,80 @@ const Datetime = class {
       const startMonth = months[0];
       const workingMonth = months[1];
       const endMonth = months[2];
+      const mode = getIonMode(this);
+      const needsiOSRubberBandFix = mode === 'ios' && typeof navigator !== 'undefined' && navigator.maxTouchPoints > 1;
       /**
-       * Before setting up the IntersectionObserver,
+       * Before setting up the scroll listener,
        * scroll the middle month into view.
        * scrollIntoView() will scroll entire page
        * if element is not in viewport. Use scrollLeft instead.
        */
       writeTask(() => {
         calendarBodyRef.scrollLeft = startMonth.clientWidth * (isRTL(this.el) ? -1 : 1);
-        let endIO;
-        let startIO;
-        const ioCallback = (callbackType, entries) => {
-          const refIO = (callbackType === 'start') ? startIO : endIO;
-          const refMonth = (callbackType === 'start') ? startMonth : endMonth;
-          const refMonthFn = (callbackType === 'start') ? getPreviousMonth : getNextMonth;
+        const getChangedMonth = (parts) => {
+          const box = calendarBodyRef.getBoundingClientRect();
+          const root = this.el.shadowRoot;
+          /**
+           * Get the element that is in the center of the calendar body.
+           * This will be an element inside of the active month.
+           */
+          const elementAtCenter = root.elementFromPoint(box.x + box.width / 2, box.y + box.height / 2);
           /**
-           * If the month is not fully in view, do not do anything
+           * If there is no element then the
+           * component may be re-rendering on a slow device.
            */
-          const ev = entries[0];
-          if (!ev.isIntersecting) {
+          if (!elementAtCenter)
+            return;
+          const month = elementAtCenter.closest('.calendar-month');
+          if (!month)
             return;
-          }
           /**
-           * When presenting an inline overlay,
-           * subsequent presentations will cause
-           * the IO to fire again (since the overlay
-           * is now visible and therefore the calendar
-           * months are intersecting).
+           * The edge of the month must be lined up with
+           * the edge of the calendar body in order for
+           * the component to update. Otherwise, it
+           * may be the case that the user has paused their
+           * swipe or the browser has not finished snapping yet.
+           * Rather than check if the x values are equal,
+           * we give it a tolerance of 2px to account for
+           * sub pixel rendering.
            */
-          if (this.overlayIsPresenting) {
-            this.overlayIsPresenting = false;
+          const monthBox = month.getBoundingClientRect();
+          if (Math.abs(monthBox.x - box.x) > 2)
             return;
+          /**
+           * From here, we can determine if the start
+           * month or the end month was scrolled into view.
+           * If no month was changed, then we can return from
+           * the scroll callback early.
+           */
+          if (month === startMonth) {
+            return getPreviousMonth(parts);
           }
-          const { month, year, day } = refMonthFn(this.workingParts);
-          if (isMonthDisabled({ month, year, day: null }, {
-            minParts: Object.assign(Object.assign({}, this.minParts), { day: null }),
-            maxParts: Object.assign(Object.assign({}, this.maxParts), { day: null })
-          })) {
+          else if (month === endMonth) {
+            return getNextMonth(parts);
+          }
+          else {
             return;
           }
+        };
+        const updateActiveMonth = () => {
+          if (needsiOSRubberBandFix) {
+            calendarBodyRef.style.removeProperty('pointer-events');
+            appliediOSRubberBandFix = false;
+          }
           /**
-           * On iOS, we need to set pointer-events: none
-           * when the user is almost done with the gesture
-           * so that they cannot quickly swipe while
-           * the scrollable container is snapping.
-           * Updating the container while snapping
-           * causes WebKit to snap incorrectly.
+           * If the month did not change
+           * then we can return early.
            */
-          if (mode === 'ios') {
-            const ratio = ev.intersectionRatio;
-            // `maxTouchPoints` will be 1 in device preview, but > 1 on device
-            const shouldDisable = Math.abs(ratio - 0.7) <= 0.1 && navigator.maxTouchPoints > 1;
-            if (shouldDisable) {
-              calendarBodyRef.style.setProperty('pointer-events', 'none');
-              return;
-            }
+          const newDate = getChangedMonth(this.workingParts);
+          if (!newDate)
+            return;
+          const { month, day, year } = newDate;
+          if (isMonthDisabled({ month, year, day: null }, {
+            minParts: Object.assign(Object.assign({}, this.minParts), { day: null }),
+            maxParts: Object.assign(Object.assign({}, this.maxParts), { day: null }),
+          })) {
+            return;
           }
           /**
            * Prevent scrolling for other browsers
@@ -1386,15 +622,6 @@ const Datetime = class {
            * time to properly snap.
            */
           calendarBodyRef.style.setProperty('overflow', 'hidden');
-          /**
-           * Remove the IO temporarily
-           * otherwise you can sometimes get duplicate
-           * events when rubber banding.
-           */
-          if (refIO === undefined) {
-            return;
-          }
-          refIO.disconnect();
           /**
            * Use a writeTask here to ensure
            * that the state is updated and the
@@ -1405,74 +632,45 @@ const Datetime = class {
            * if we did not do this.
            */
           writeTask(() => {
-            // Disconnect all active intersection observers
-            // to avoid a re-render causing a duplicate event.
-            if (this.destroyCalendarIO) {
-              this.destroyCalendarIO();
-            }
-            raf(() => {
-              this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), { month, day: day, year }));
-              calendarBodyRef.scrollLeft = workingMonth.clientWidth * (isRTL(this.el) ? -1 : 1);
-              calendarBodyRef.style.removeProperty('overflow');
-              calendarBodyRef.style.removeProperty('pointer-events');
-              endIO === null || endIO === void 0 ? void 0 : endIO.observe(endMonth);
-              startIO === null || startIO === void 0 ? void 0 : startIO.observe(startMonth);
-            });
-            /**
-             * Now that state has been updated
-             * and the correct month is in view,
-             * we can resume the IO.
-             */
-            // tslint:disable-next-line
-            if (refIO === undefined) {
-              return;
-            }
-            refIO.observe(refMonth);
+            this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), { month, day: day, year }));
+            calendarBodyRef.scrollLeft = workingMonth.clientWidth * (isRTL(this.el) ? -1 : 1);
+            calendarBodyRef.style.removeProperty('overflow');
           });
         };
-        const threshold = mode === 'ios' &&
-          // tslint:disable-next-line
-          typeof navigator !== 'undefined' &&
-          navigator.maxTouchPoints > 1 ?
-          [0.7, 1] : 1;
-        // Intersection observers cannot accurately detect the
-        // intersection with a threshold of 1, when the observed
-        // element width is a sub-pixel value (i.e. 334.05px).
-        // Setting a root margin to 1px solves the issue.
-        const rootMargin = '1px';
         /**
-         * Listen on the first month to
-         * prepend a new month and on the last
-         * month to append a new month.
-         * The 0.7 threshold is required on ios
-         * so that we can remove pointer-events
-         * when adding new months.
-         * Adding to a scroll snapping container
-         * while the container is snapping does not
-         * completely work as expected in WebKit.
-         * Adding pointer-events: none allows us to
-         * avoid these issues.
-         *
-         * This should be fine on Chromium, but
-         * when you set pointer-events: none
-         * it applies to active gestures which is not
-         * something WebKit does.
+         * When the container finishes scrolling we
+         * need to update the DOM with the selected month.
+         */
+        let scrollTimeout;
+        /**
+         * We do not want to attempt to set pointer-events
+         * multiple times within a single swipe gesture as
+         * that adds unnecessary work to the main thread.
          */
-        endIO = new IntersectionObserver(ev => ioCallback('end', ev), {
-          threshold,
-          root: calendarBodyRef,
-          rootMargin
-        });
-        endIO.observe(endMonth);
-        startIO = new IntersectionObserver(ev => ioCallback('start', ev), {
-          threshold,
-          root: calendarBodyRef,
-          rootMargin
-        });
-        startIO.observe(startMonth);
-        this.destroyCalendarIO = () => {
-          endIO === null || endIO === void 0 ? void 0 : endIO.disconnect();
-          startIO === null || startIO === void 0 ? void 0 : startIO.disconnect();
+        let appliediOSRubberBandFix = false;
+        const scrollCallback = () => {
+          if (scrollTimeout) {
+            clearTimeout(scrollTimeout);
+          }
+          /**
+           * On iOS it is possible to quickly rubber band
+           * the scroll area before the scroll timeout has fired.
+           * This results in users reaching the end of the scrollable
+           * container before the DOM has updated.
+           * By setting `pointer-events: none` we can ensure that
+           * subsequent swipes do not happen while the container
+           * is snapping.
+           */
+          if (!appliediOSRubberBandFix && needsiOSRubberBandFix) {
+            calendarBodyRef.style.setProperty('pointer-events', 'none');
+            appliediOSRubberBandFix = true;
+          }
+          // Wait ~3 frames
+          scrollTimeout = setTimeout(updateActiveMonth, 50);
+        };
+        calendarBodyRef.addEventListener('scroll', scrollCallback);
+        this.destroyCalendarListener = () => {
+          calendarBodyRef.removeEventListener('scroll', scrollCallback);
         };
       });
     };
@@ -1482,55 +680,54 @@ const Datetime = class {
      * if the datetime has been hidden/presented by a modal or popover.
      */
     this.destroyInteractionListeners = () => {
-      const { destroyCalendarIO, destroyKeyboardMO } = this;
-      if (destroyCalendarIO !== undefined) {
-        destroyCalendarIO();
+      const { destroyCalendarListener, destroyKeyboardMO } = this;
+      if (destroyCalendarListener !== undefined) {
+        destroyCalendarListener();
       }
       if (destroyKeyboardMO !== undefined) {
         destroyKeyboardMO();
       }
     };
-    /**
-     * When doing subsequent presentations of an inline
-     * overlay, the IO callback will fire again causing
-     * the calendar to go back one month. We need to listen
-     * for the presentation of the overlay so we can properly
-     * cancel that IO callback.
-     */
-    this.initializeOverlayListener = () => {
-      const overlay = this.el.closest('ion-popover, ion-modal');
-      if (overlay === null) {
-        return;
-      }
-      const overlayListener = () => {
-        this.overlayIsPresenting = true;
-      };
-      overlay.addEventListener('willPresent', overlayListener);
-      this.destroyOverlayListener = () => {
-        overlay.removeEventListener('willPresent', overlayListener);
-      };
-    };
     this.processValue = (value) => {
-      const valueToProcess = value || getToday();
-      const { month, day, year, hour, minute, tzOffset } = parseDate(valueToProcess);
-      this.workingParts = {
-        month,
-        day,
-        year,
-        hour,
-        minute,
-        tzOffset,
-        ampm: hour >= 12 ? 'pm' : 'am'
-      };
-      this.activeParts = {
+      this.highlightActiveParts = !!value;
+      let valueToProcess = parseDate(value || getToday());
+      const { minParts, maxParts, multiple } = this;
+      if (!multiple && Array.isArray(value)) {
+        this.value = value[0];
+        valueToProcess = valueToProcess[0];
+      }
+      warnIfValueOutOfBounds(valueToProcess, minParts, maxParts);
+      /**
+       * If there are multiple values, pick an arbitrary one to clamp to. This way,
+       * if the values are across months, we always show at least one of them. Note
+       * that the values don't necessarily have to be in order.
+       */
+      const singleValue = Array.isArray(valueToProcess) ? valueToProcess[0] : valueToProcess;
+      const { month, day, year, hour, minute, tzOffset } = clampDate(singleValue, minParts, maxParts);
+      const ampm = parseAmPm(hour);
+      this.setWorkingParts({
         month,
         day,
         year,
         hour,
         minute,
         tzOffset,
-        ampm: hour >= 12 ? 'pm' : 'am'
-      };
+        ampm,
+      });
+      if (Array.isArray(valueToProcess)) {
+        this.activeParts = [...valueToProcess];
+      }
+      else {
+        this.activeParts = {
+          month,
+          day,
+          year,
+          hour,
+          minute,
+          tzOffset,
+          ampm,
+        };
+      }
     };
     this.onFocus = () => {
       this.ionFocus.emit();
@@ -1554,7 +751,7 @@ const Datetime = class {
       calendarBodyRef.scrollTo({
         top: 0,
         left: left * (isRTL(this.el) ? -1 : 1),
-        behavior: 'smooth'
+        behavior: 'smooth',
       });
     };
     this.prevMonth = () => {
@@ -1569,7 +766,7 @@ const Datetime = class {
       calendarBodyRef.scrollTo({
         top: 0,
         left: 0,
-        behavior: 'smooth'
+        behavior: 'smooth',
       });
     };
     this.toggleMonthAndYearView = () => {
@@ -1607,7 +804,12 @@ const Datetime = class {
    * Update the datetime value when the value changes
    */
   valueChanged() {
+    const { value, minParts, maxParts, workingParts, multiple } = this;
     if (this.hasValue()) {
+      if (!multiple && Array.isArray(value)) {
+        this.value = value[0];
+        return; // setting this.value will trigger re-run of this function
+      }
       /**
        * Clones the value of the `activeParts` to the private clone, to update
        * the date display on the current render cycle without causing another render.
@@ -1615,17 +817,37 @@ const Datetime = class {
        * This allows us to update the current value's date/time display without
        * refocusing or shifting the user's display (leaves the user in place).
        */
-      const { month, day, year, hour, minute } = parseDate(this.value);
-      this.activePartsClone = Object.assign(Object.assign({}, this.activeParts), { month,
-        day,
-        year,
-        hour,
-        minute });
+      const valueDateParts = parseDate(value);
+      if (valueDateParts) {
+        warnIfValueOutOfBounds(valueDateParts, minParts, maxParts);
+        if (Array.isArray(valueDateParts)) {
+          this.activePartsClone = [...valueDateParts];
+        }
+        else {
+          const { month, day, year, hour, minute } = valueDateParts;
+          const ampm = hour != null ? (hour >= 12 ? 'pm' : 'am') : undefined;
+          this.activePartsClone = Object.assign(Object.assign({}, this.activeParts), { month,
+            day,
+            year,
+            hour,
+            minute,
+            ampm });
+          /**
+           * The working parts am/pm value must be updated when the value changes, to
+           * ensure the time picker hour column values are generated correctly.
+           *
+           * Note that we don't need to do this if valueDateParts is an array, since
+           * multiple="true" does not apply to time pickers.
+           */
+          this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm }));
+        }
+      }
+      else {
+        printIonWarning(`Unable to parse date string: ${value}. Please provide a valid ISO 8601 datetime string.`);
+      }
     }
     this.emitStyle();
-    this.ionChange.emit({
-      value: this.value
-    });
+    this.ionChange.emit({ value });
   }
   /**
    * Confirms the selected datetime value, updates the
@@ -1633,18 +855,42 @@ const Datetime = class {
    * or modal that the datetime was presented in.
    */
   async confirm(closeOverlay = false) {
+    const { highlightActiveParts, isCalendarPicker, activeParts } = this;
     /**
-     * Prevent convertDataToISO from doing any
-     * kind of transformation based on timezone
-     * This cancels out any change it attempts to make
+     * We only update the value if the presentation is not a calendar picker,
+     * or if `highlightActiveParts` is true; indicating that the user
+     * has selected a date from the calendar picker.
      *
-     * Important: Take the timezone offset based on
-     * the date that is currently selected, otherwise
-     * there can be 1 hr difference when dealing w/ DST
+     * Otherwise "today" would accidentally be set as the value.
      */
-    const date = new Date(convertDataToISO(this.activeParts));
-    this.activeParts.tzOffset = date.getTimezoneOffset() * -1;
-    this.value = convertDataToISO(this.activeParts);
+    if (highlightActiveParts || !isCalendarPicker) {
+      const activePartsIsArray = Array.isArray(activeParts);
+      if (activePartsIsArray && activeParts.length === 0) {
+        this.value = undefined;
+      }
+      else {
+        /**
+         * Prevent convertDataToISO from doing any
+         * kind of transformation based on timezone
+         * This cancels out any change it attempts to make
+         *
+         * Important: Take the timezone offset based on
+         * the date that is currently selected, otherwise
+         * there can be 1 hr difference when dealing w/ DST
+         */
+        if (activePartsIsArray) {
+          const dates = convertDataToISO(activeParts).map((str) => new Date(str));
+          for (let i = 0; i < dates.length; i++) {
+            activeParts[i].tzOffset = dates[i].getTimezoneOffset() * -1;
+          }
+        }
+        else {
+          const date = new Date(convertDataToISO(activeParts));
+          activeParts.tzOffset = date.getTimezoneOffset() * -1;
+        }
+        this.value = convertDataToISO(activeParts);
+      }
+    }
     if (closeOverlay) {
       this.closeParentOverlay();
     }
@@ -1652,7 +898,7 @@ const Datetime = class {
   /**
    * Resets the internal state of the datetime but does not update the value.
    * Passing a valid ISO-8601 string will reset the state of the component to the provided date.
-   * If no value is provided, the internal state will be reset to today.
+   * If no value is provided, the internal state will be reset to the clamped value of the min, max and today.
    */
   async reset(startDate) {
     this.processValue(startDate);
@@ -1669,6 +915,10 @@ const Datetime = class {
       this.closeParentOverlay();
     }
   }
+  get isCalendarPicker() {
+    const { presentation } = this;
+    return presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
+  }
   connectedCallback() {
     this.clearFocusVisible = startFocusVisible(this.el).destroy;
   }
@@ -1679,9 +929,8 @@ const Datetime = class {
     }
   }
   initializeListeners() {
-    this.initializeCalendarIOListeners();
+    this.initializeCalendarListener();
     this.initializeKeyboardListeners();
-    this.initializeOverlayListener();
   }
   componentDidLoad() {
     /**
@@ -1691,7 +940,6 @@ const Datetime = class {
      * visible if used inside of a modal or a popover otherwise the scrollable
      * areas will not have the correct values snapped into place.
      */
-    let visibleIO;
     const visibleCallback = (entries) => {
       const ev = entries[0];
       if (!ev.isIntersecting) {
@@ -1710,7 +958,7 @@ const Datetime = class {
         this.el.classList.add('datetime-ready');
       });
     };
-    visibleIO = new IntersectionObserver(visibleCallback, { threshold: 0.01 });
+    const visibleIO = new IntersectionObserver(visibleCallback, { threshold: 0.01 });
     /**
      * Use raf to avoid a race condition between the component loading and
      * its display animation starting (such as when shown in a modal). This
@@ -1725,7 +973,6 @@ const Datetime = class {
      * the scroll areas have scroll widths/heights of 0px, so any snapping
      * we did originally has been lost.
      */
-    let hiddenIO;
     const hiddenCallback = (entries) => {
       const ev = entries[0];
       if (ev.isIntersecting) {
@@ -1736,7 +983,7 @@ const Datetime = class {
         this.el.classList.remove('datetime-ready');
       });
     };
-    hiddenIO = new IntersectionObserver(hiddenCallback, { threshold: 0 });
+    const hiddenIO = new IntersectionObserver(hiddenCallback, { threshold: 0 });
     raf(() => hiddenIO === null || hiddenIO === void 0 ? void 0 : hiddenIO.observe(this.el));
     /**
      * Datetime uses Ionic components that emit
@@ -1766,12 +1013,27 @@ const Datetime = class {
     }
     this.prevPresentation = presentation;
     this.destroyInteractionListeners();
-    if (this.destroyOverlayListener !== undefined) {
-      this.destroyOverlayListener();
-    }
     this.initializeListeners();
+    /**
+     * The month/year picker from the date interface
+     * should be closed as it is not available in non-date
+     * interfaces.
+     */
+    this.showMonthAndYear = false;
+    raf(() => {
+      this.ionRender.emit();
+    });
   }
   componentWillLoad() {
+    const { el, multiple, presentation, preferWheel } = this;
+    if (multiple) {
+      if (presentation !== 'date') {
+        printIonWarning('Multiple date selection is only supported for presentation="date".', el);
+      }
+      if (preferWheel) {
+        printIonWarning('Multiple date selection is not supported with preferWheel="true".', el);
+      }
+    }
     this.processMinParts();
     this.processMaxParts();
     this.processValue(this.value);
@@ -1784,11 +1046,16 @@ const Datetime = class {
   }
   emitStyle() {
     this.ionStyle.emit({
-      'interactive': true,
-      'datetime': true,
+      interactive: true,
+      datetime: true,
       'interactive-disabled': this.disabled,
     });
   }
+  /**
+   * Universal render methods
+   * These are pieces of datetime that
+   * are rendered independently of presentation.
+   */
   renderFooter() {
     const { showDefaultButtons, showClearButton } = this;
     const hasSlottedButtons = this.el.querySelector('[slot="buttons"]') !== null;
@@ -1808,83 +1075,316 @@ const Datetime = class {
      */
     return (h("div", { class: "datetime-footer" }, h("div", { class: "datetime-buttons" }, h("div", { class: {
         ['datetime-action-buttons']: true,
-        ['has-clear-button']: this.showClearButton
-      } }, h("slot", { name: "buttons" }, h("ion-buttons", null, showDefaultButtons && h("ion-button", { id: "cancel-button", color: this.color, onClick: () => this.cancel(true) }, this.cancelText), h("div", null, showClearButton && h("ion-button", { id: "clear-button", color: this.color, onClick: () => clearButtonClick() }, this.clearText), showDefaultButtons && h("ion-button", { id: "confirm-button", color: this.color, onClick: () => this.confirm(true) }, this.doneText))))))));
+        ['has-clear-button']: this.showClearButton,
+      } }, h("slot", { name: "buttons" }, h("ion-buttons", null, showDefaultButtons && (h("ion-button", { id: "cancel-button", color: this.color, onClick: () => this.cancel(true) }, this.cancelText)), h("div", null, showClearButton && (h("ion-button", { id: "clear-button", color: this.color, onClick: () => clearButtonClick() }, this.clearText)), showDefaultButtons && (h("ion-button", { id: "confirm-button", color: this.color, onClick: () => this.confirm(true) }, this.doneText)))))))));
   }
-  renderYearView() {
-    const { presentation, workingParts, locale } = this;
-    const calendarYears = getCalendarYears(this.todayParts, this.minParts, this.maxParts, this.parsedYearValues);
-    const showMonth = presentation !== 'year';
-    const showYear = presentation !== 'month';
-    const months = getPickerMonths(locale, workingParts, this.minParts, this.maxParts, this.parsedMonthValues);
-    const years = calendarYears.map(year => {
-      return {
-        text: `${year}`,
-        value: year
-      };
-    });
+  /**
+   * Wheel picker render methods
+   */
+  renderWheelPicker(forcePresentation = this.presentation) {
+    /**
+     * If presentation="time-date" we switch the
+     * order of the render array here instead of
+     * manually reordering each date/time picker
+     * column with CSS. This allows for additional
+     * flexibility if we need to render subsets
+     * of the date/time data or do additional ordering
+     * within the child render functions.
+     */
+    const renderArray = forcePresentation === 'time-date'
+      ? [this.renderTimePickerColumns(forcePresentation), this.renderDatePickerColumns(forcePresentation)]
+      : [this.renderDatePickerColumns(forcePresentation), this.renderTimePickerColumns(forcePresentation)];
+    return h("ion-picker-internal", null, renderArray);
+  }
+  renderDatePickerColumns(forcePresentation) {
+    return forcePresentation === 'date-time' || forcePresentation === 'time-date'
+      ? this.renderCombinedDatePickerColumn()
+      : this.renderIndividualDatePickerColumns(forcePresentation);
+  }
+  renderCombinedDatePickerColumn() {
+    const { activeParts, workingParts, locale, minParts, maxParts, todayParts, isDateEnabled } = this;
+    /**
+     * By default, generate a range of 3 months:
+     * Previous month, current month, and next month
+     */
+    const monthsToRender = generateMonths(workingParts);
+    /**
+     * generateMonths returns the day data as well,
+     * but we do not want the day value to act as a max/min
+     * on the data we are going to generate.
+     */
+    for (let i = 0; i <= monthsToRender.length - 1; i++) {
+      monthsToRender[i].day = null;
+    }
+    /**
+     * If developers have provided their own
+     * min/max values, use that instead. Otherwise,
+     * fallback to the default range of 3 months.
+     */
+    const min = minParts || monthsToRender[0];
+    const max = maxParts || monthsToRender[monthsToRender.length - 1];
+    const result = getCombinedDateColumnData(locale, workingParts, todayParts, min, max, this.parsedDayValues, this.parsedMonthValues);
+    let items = result.items;
+    const parts = result.parts;
+    if (isDateEnabled) {
+      items = items.map((itemObject, index) => {
+        const referenceParts = parts[index];
+        let disabled;
+        try {
+          /**
+           * The `isDateEnabled` implementation is try-catch wrapped
+           * to prevent exceptions in the user's function from
+           * interrupting the calendar rendering.
+           */
+          disabled = !isDateEnabled(convertDataToISO(referenceParts));
+        }
+        catch (e) {
+          printIonError('Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', e);
+        }
+        return Object.assign(Object.assign({}, itemObject), { disabled });
+      });
+    }
+    /**
+     * If we have selected a day already, then default the column
+     * to that value. Otherwise, default it to today.
+     */
+    const todayString = workingParts.day
+      ? `${workingParts.year}-${workingParts.month}-${workingParts.day}`
+      : `${todayParts.year}-${todayParts.month}-${todayParts.day}`;
+    return (h("ion-picker-column-internal", { class: "date-column", color: this.color, items: items, value: todayString, onIonChange: (ev) => {
+        // TODO(FW-1823) Remove this when iOS 14 support is dropped.
+        // Due to a Safari 14 issue we need to destroy
+        // the scroll listener before we update state
+        // and trigger a re-render.
+        if (this.destroyCalendarListener) {
+          this.destroyCalendarListener();
+        }
+        const { value } = ev.detail;
+        const findPart = parts.find(({ month, day, year }) => value === `${year}-${month}-${day}`);
+        this.setWorkingParts(Object.assign(Object.assign({}, workingParts), findPart));
+        if (!Array.isArray(activeParts)) {
+          this.setActiveParts(Object.assign(Object.assign({}, activeParts), findPart));
+        }
+        // We can re-attach the scroll listener after
+        // the working parts have been updated.
+        this.initializeCalendarListener();
+        ev.stopPropagation();
+      } }));
+  }
+  renderIndividualDatePickerColumns(forcePresentation) {
+    const { workingParts, isDateEnabled } = this;
+    const shouldRenderMonths = forcePresentation !== 'year' && forcePresentation !== 'time';
+    const months = shouldRenderMonths
+      ? getMonthColumnData(this.locale, workingParts, this.minParts, this.maxParts, this.parsedMonthValues)
+      : [];
+    const shouldRenderDays = forcePresentation === 'date';
+    let days = shouldRenderDays
+      ? getDayColumnData(this.locale, workingParts, this.minParts, this.maxParts, this.parsedDayValues)
+      : [];
+    if (isDateEnabled) {
+      days = days.map((dayObject) => {
+        const { value } = dayObject;
+        const valueNum = typeof value === 'string' ? parseInt(value) : value;
+        const referenceParts = {
+          month: workingParts.month,
+          day: valueNum,
+          year: workingParts.year,
+        };
+        let disabled;
+        try {
+          /**
+           * The `isDateEnabled` implementation is try-catch wrapped
+           * to prevent exceptions in the user's function from
+           * interrupting the calendar rendering.
+           */
+          disabled = !isDateEnabled(convertDataToISO(referenceParts));
+        }
+        catch (e) {
+          printIonError('Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', e);
+        }
+        return Object.assign(Object.assign({}, dayObject), { disabled });
+      });
+    }
+    const shouldRenderYears = forcePresentation !== 'month' && forcePresentation !== 'time';
+    const years = shouldRenderYears
+      ? getYearColumnData(this.todayParts, this.minParts, this.maxParts, this.parsedYearValues)
+      : [];
+    /**
+     * Certain locales show the day before the month.
+     */
+    const showMonthFirst = isMonthFirstLocale(this.locale, { month: 'numeric', day: 'numeric' });
+    let renderArray = [];
+    if (showMonthFirst) {
+      renderArray = [
+        this.renderMonthPickerColumn(months),
+        this.renderDayPickerColumn(days),
+        this.renderYearPickerColumn(years),
+      ];
+    }
+    else {
+      renderArray = [
+        this.renderDayPickerColumn(days),
+        this.renderMonthPickerColumn(months),
+        this.renderYearPickerColumn(years),
+      ];
+    }
+    return renderArray;
+  }
+  renderDayPickerColumn(days) {
+    var _a;
+    if (days.length === 0) {
+      return [];
+    }
+    const { activeParts, workingParts } = this;
+    return (h("ion-picker-column-internal", { class: "day-column", color: this.color, items: days, value: (_a = (workingParts.day || this.todayParts.day)) !== null && _a !== void 0 ? _a : undefined, onIonChange: (ev) => {
+        // TODO(FW-1823) Remove this when iOS 14 support is dropped.
+        // Due to a Safari 14 issue we need to destroy
+        // the scroll listener before we update state
+        // and trigger a re-render.
+        if (this.destroyCalendarListener) {
+          this.destroyCalendarListener();
+        }
+        this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { day: ev.detail.value }));
+        if (!Array.isArray(activeParts)) {
+          this.setActiveParts(Object.assign(Object.assign({}, activeParts), { day: ev.detail.value }));
+        }
+        // We can re-attach the scroll listener after
+        // the working parts have been updated.
+        this.initializeCalendarListener();
+        ev.stopPropagation();
+      } }));
+  }
+  renderMonthPickerColumn(months) {
+    if (months.length === 0) {
+      return [];
+    }
+    const { activeParts, workingParts } = this;
+    return (h("ion-picker-column-internal", { class: "month-column", color: this.color, items: months, value: workingParts.month, onIonChange: (ev) => {
+        // TODO(FW-1823) Remove this when iOS 14 support is dropped.
+        // Due to a Safari 14 issue we need to destroy
+        // the scroll listener before we update state
+        // and trigger a re-render.
+        if (this.destroyCalendarListener) {
+          this.destroyCalendarListener();
+        }
+        this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { month: ev.detail.value }));
+        if (!Array.isArray(activeParts)) {
+          this.setActiveParts(Object.assign(Object.assign({}, activeParts), { month: ev.detail.value }));
+        }
+        // We can re-attach the scroll listener after
+        // the working parts have been updated.
+        this.initializeCalendarListener();
+        ev.stopPropagation();
+      } }));
+  }
+  renderYearPickerColumn(years) {
+    if (years.length === 0) {
+      return [];
+    }
+    const { activeParts, workingParts } = this;
+    return (h("ion-picker-column-internal", { class: "year-column", color: this.color, items: years, value: workingParts.year, onIonChange: (ev) => {
+        // TODO(FW-1823) Remove this when iOS 14 support is dropped.
+        // Due to a Safari 14 issue we need to destroy
+        // the scroll listener before we update state
+        // and trigger a re-render.
+        if (this.destroyCalendarListener) {
+          this.destroyCalendarListener();
+        }
+        this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { year: ev.detail.value }));
+        if (!Array.isArray(activeParts)) {
+          this.setActiveParts(Object.assign(Object.assign({}, activeParts), { year: ev.detail.value }));
+        }
+        // We can re-attach the scroll listener after
+        // the working parts have been updated.
+        this.initializeCalendarListener();
+        ev.stopPropagation();
+      } }));
+  }
+  renderTimePickerColumns(forcePresentation) {
+    if (['date', 'month', 'month-year', 'year'].includes(forcePresentation)) {
+      return [];
+    }
+    const { hoursData, minutesData, dayPeriodData } = getTimeColumnsData(this.locale, this.workingParts, this.hourCycle, this.value ? this.minParts : undefined, this.value ? this.maxParts : undefined, this.parsedHourValues, this.parsedMinuteValues);
+    return [
+      this.renderHourPickerColumn(hoursData),
+      this.renderMinutePickerColumn(minutesData),
+      this.renderDayPeriodPickerColumn(dayPeriodData),
+    ];
+  }
+  renderHourPickerColumn(hoursData) {
+    const { workingParts, activePartsClone } = this;
+    if (hoursData.length === 0)
+      return [];
+    return (h("ion-picker-column-internal", { color: this.color, value: activePartsClone.hour, items: hoursData, numericInput: true, onIonChange: (ev) => {
+        this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { hour: ev.detail.value }));
+        if (!Array.isArray(activePartsClone)) {
+          this.setActiveParts(Object.assign(Object.assign({}, activePartsClone), { hour: ev.detail.value }));
+        }
+        ev.stopPropagation();
+      } }));
+  }
+  renderMinutePickerColumn(minutesData) {
+    const { workingParts, activePartsClone } = this;
+    if (minutesData.length === 0)
+      return [];
+    return (h("ion-picker-column-internal", { color: this.color, value: activePartsClone.minute, items: minutesData, numericInput: true, onIonChange: (ev) => {
+        this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { minute: ev.detail.value }));
+        if (!Array.isArray(activePartsClone)) {
+          this.setActiveParts(Object.assign(Object.assign({}, activePartsClone), { minute: ev.detail.value }));
+        }
+        ev.stopPropagation();
+      } }));
+  }
+  renderDayPeriodPickerColumn(dayPeriodData) {
+    const { workingParts, activePartsClone } = this;
+    if (dayPeriodData.length === 0) {
+      return [];
+    }
+    const isDayPeriodRTL = isLocaleDayPeriodRTL(this.locale);
+    return (h("ion-picker-column-internal", { style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, value: activePartsClone.ampm, items: dayPeriodData, onIonChange: (ev) => {
+        const hour = calculateHourFromAMPM(workingParts, ev.detail.value);
+        this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm: ev.detail.value, hour }));
+        if (!Array.isArray(activePartsClone)) {
+          this.setActiveParts(Object.assign(Object.assign({}, activePartsClone), { ampm: ev.detail.value, hour }));
+        }
+        ev.stopPropagation();
+      } }));
+  }
+  renderWheelView(forcePresentation) {
+    const { locale } = this;
     const showMonthFirst = isMonthFirstLocale(locale);
     const columnOrder = showMonthFirst ? 'month-first' : 'year-first';
-    return (h("div", { class: "datetime-year" }, h("div", { class: {
-        'datetime-year-body': true,
-        [`order-${columnOrder}`]: true
-      } }, h("ion-picker-internal", null, showMonth &&
-      h("ion-picker-column-internal", { class: "month-column", color: this.color, items: months, value: workingParts.month, onIonChange: (ev) => {
-          // Due to a Safari 14 issue we need to destroy
-          // the intersection observer before we update state
-          // and trigger a re-render.
-          if (this.destroyCalendarIO) {
-            this.destroyCalendarIO();
-          }
-          this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), { month: ev.detail.value }));
-          if (presentation === 'month' || presentation === 'month-year') {
-            this.setActiveParts(Object.assign(Object.assign({}, this.activeParts), { month: ev.detail.value }));
-          }
-          // We can re-attach the intersection observer after
-          // the working parts have been updated.
-          this.initializeCalendarIOListeners();
-          ev.stopPropagation();
-        } }), showYear &&
-      h("ion-picker-column-internal", { class: "year-column", color: this.color, items: years, value: workingParts.year, onIonChange: (ev) => {
-          // Due to a Safari 14 issue we need to destroy
-          // the intersection observer before we update state
-          // and trigger a re-render.
-          if (this.destroyCalendarIO) {
-            this.destroyCalendarIO();
-          }
-          this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), { year: ev.detail.value }));
-          if (presentation === 'year' || presentation === 'month-year') {
-            this.setActiveParts(Object.assign(Object.assign({}, this.activeParts), { year: ev.detail.value }));
-          }
-          // We can re-attach the intersection observer after
-          // the working parts have been updated.
-          this.initializeCalendarIOListeners();
-          ev.stopPropagation();
-        } })))));
+    return (h("div", { class: {
+        [`wheel-order-${columnOrder}`]: true,
+      } }, this.renderWheelPicker(forcePresentation)));
   }
+  /**
+   * Grid Render Methods
+   */
   renderCalendarHeader(mode) {
     const expandedIcon = mode === 'ios' ? chevronDown : caretUpSharp;
     const collapsedIcon = mode === 'ios' ? chevronForward : caretDownSharp;
     const prevMonthDisabled = isPrevMonthDisabled(this.workingParts, this.minParts, this.maxParts);
     const nextMonthDisabled = isNextMonthDisabled(this.workingParts, this.maxParts);
-    return (h("div", { class: "calendar-header" }, h("div", { class: "calendar-action-buttons" }, h("div", { class: "calendar-month-year" }, h("ion-item", { button: true, detail: false, lines: "none", onClick: () => this.toggleMonthAndYearView() }, h("ion-label", null, getMonthAndYear(this.locale, this.workingParts), " ", h("ion-icon", { icon: this.showMonthAndYear ? expandedIcon : collapsedIcon, lazy: false })))), h("div", { class: "calendar-next-prev" }, h("ion-buttons", null, h("ion-button", { disabled: prevMonthDisabled, onClick: () => this.prevMonth() }, h("ion-icon", { slot: "icon-only", icon: chevronBack, lazy: false, flipRtl: true })), h("ion-button", { disabled: nextMonthDisabled, onClick: () => this.nextMonth() }, h("ion-icon", { slot: "icon-only", icon: chevronForward, lazy: false, flipRtl: true }))))), h("div", { class: "calendar-days-of-week" }, getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map(d => {
+    return (h("div", { class: "calendar-header" }, h("div", { class: "calendar-action-buttons" }, h("div", { class: "calendar-month-year" }, h("ion-item", { button: true, detail: false, lines: "none", onClick: () => this.toggleMonthAndYearView() }, h("ion-label", null, getMonthAndYear(this.locale, this.workingParts), ' ', h("ion-icon", { icon: this.showMonthAndYear ? expandedIcon : collapsedIcon, lazy: false })))), h("div", { class: "calendar-next-prev" }, h("ion-buttons", null, h("ion-button", { disabled: prevMonthDisabled, onClick: () => this.prevMonth() }, h("ion-icon", { slot: "icon-only", icon: chevronBack, lazy: false, flipRtl: true })), h("ion-button", { disabled: nextMonthDisabled, onClick: () => this.nextMonth() }, h("ion-icon", { slot: "icon-only", icon: chevronForward, lazy: false, flipRtl: true }))))), h("div", { class: "calendar-days-of-week" }, getDaysOfWeek(this.locale, mode, this.firstDayOfWeek % 7).map((d) => {
       return h("div", { class: "day-of-week" }, d);
     }))));
   }
   renderMonth(month, year) {
+    const { highlightActiveParts } = this;
     const yearAllowed = this.parsedYearValues === undefined || this.parsedYearValues.includes(year);
     const monthAllowed = this.parsedMonthValues === undefined || this.parsedMonthValues.includes(month);
     const isCalMonthDisabled = !yearAllowed || !monthAllowed;
     const swipeDisabled = isMonthDisabled({
       month,
       year,
-      day: null
+      day: null,
     }, {
       // 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 })
+      maxParts: Object.assign(Object.assign({}, this.maxParts), { day: null }),
     });
     // The working month should never have swipe disabled.
     // Otherwise the CSS scroll snap will not work and the user
@@ -1893,16 +1393,31 @@ const Datetime = class {
     return (h("div", { class: {
         'calendar-month': true,
         // Prevents scroll snap swipe gestures for months outside of the min/max bounds
-        'calendar-month-disabled': !isWorkingMonth && swipeDisabled
+        'calendar-month-disabled': !isWorkingMonth && swipeDisabled,
       } }, h("div", { class: "calendar-month-grid" }, getDaysOfMonth(month, year, this.firstDayOfWeek % 7).map((dateObject, index) => {
       const { day, dayOfWeek } = dateObject;
+      const { isDateEnabled, multiple } = this;
       const referenceParts = { month, day, year };
       const { isActive, isToday, ariaLabel, ariaSelected, disabled } = getCalendarDayState(this.locale, referenceParts, this.activePartsClone, this.todayParts, this.minParts, this.maxParts, this.parsedDayValues);
-      return (h("button", { tabindex: "-1", "data-day": day, "data-month": month, "data-year": year, "data-index": index, "data-day-of-week": dayOfWeek, disabled: isCalMonthDisabled || disabled, class: {
+      let isCalDayDisabled = isCalMonthDisabled || disabled;
+      if (!isCalDayDisabled && isDateEnabled !== undefined) {
+        try {
+          /**
+           * The `isDateEnabled` implementation is try-catch wrapped
+           * to prevent exceptions in the user's function from
+           * interrupting the calendar rendering.
+           */
+          isCalDayDisabled = !isDateEnabled(convertDataToISO(referenceParts));
+        }
+        catch (e) {
+          printIonError('Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', e);
+        }
+      }
+      return (h("button", { tabindex: "-1", "data-day": day, "data-month": month, "data-year": year, "data-index": index, "data-day-of-week": dayOfWeek, disabled: isCalDayDisabled, class: {
           'calendar-day-padding': day === null,
           'calendar-day': true,
-          'calendar-day-active': isActive,
-          'calendar-day-today': isToday
+          'calendar-day-active': isActive && highlightActiveParts,
+          'calendar-day-today': isToday,
         }, "aria-selected": ariaSelected, "aria-label": ariaLabel, onClick: () => {
           if (day === null) {
             return;
@@ -1910,14 +1425,24 @@ const Datetime = class {
           this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), { month,
             day,
             year }));
-          this.setActiveParts(Object.assign(Object.assign({}, this.activeParts), { month,
-            day,
-            year }));
+          // multiple only needs date info, so we can wipe out other fields like time
+          if (multiple) {
+            this.setActiveParts({
+              month,
+              day,
+              year,
+            }, isActive && highlightActiveParts);
+          }
+          else {
+            this.setActiveParts(Object.assign(Object.assign({}, this.activeParts), { month,
+              day,
+              year }));
+          }
         } }, day));
     }))));
   }
   renderCalendarBody() {
-    return (h("div", { class: "calendar-body ion-focusable", ref: el => this.calendarBodyRef = el, tabindex: "0" }, generateMonths(this.workingParts).map(({ month, year }) => {
+    return (h("div", { class: "calendar-body ion-focusable", ref: (el) => (this.calendarBodyRef = el), tabindex: "0" }, generateMonths(this.workingParts).map(({ month, year }) => {
       return this.renderMonth(month, year);
     })));
   }
@@ -1929,45 +1454,29 @@ const Datetime = class {
     if (!hasSlottedTimeLabel && !this.showDefaultTimeLabel) {
       return;
     }
-    return (h("slot", { name: "time-label" }, "Time"));
+    return h("slot", { name: "time-label" }, "Time");
   }
-  renderTimePicker(hoursItems, minutesItems, ampmItems, use24Hour) {
-    const { color, activePartsClone, workingParts } = this;
-    return (h("ion-picker-internal", null, h("ion-picker-column-internal", { color: color, value: activePartsClone.hour, items: hoursItems, numericInput: true, onIonChange: (ev) => {
-        this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { hour: ev.detail.value }));
-        this.setActiveParts(Object.assign(Object.assign({}, activePartsClone), { hour: ev.detail.value }));
-        ev.stopPropagation();
-      } }), h("ion-picker-column-internal", { color: color, value: activePartsClone.minute, items: minutesItems, numericInput: true, onIonChange: (ev) => {
-        this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { minute: ev.detail.value }));
-        this.setActiveParts(Object.assign(Object.assign({}, activePartsClone), { minute: ev.detail.value }));
-        ev.stopPropagation();
-      } }), !use24Hour && h("ion-picker-column-internal", { color: color, value: activePartsClone.ampm, items: ampmItems, 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({}, activePartsClone), { ampm: ev.detail.value, hour }));
-        ev.stopPropagation();
-      } })));
-  }
-  renderTimeOverlay(hoursItems, minutesItems, ampmItems, use24Hour) {
+  renderTimeOverlay() {
+    const use24Hour = is24Hour(this.locale, this.hourCycle);
     return [
       h("div", { class: "time-header" }, this.renderTimeLabel()),
       h("button", { class: {
           'time-body': true,
-          'time-body-active': this.isTimePopoverOpen
+          'time-body-active': this.isTimePopoverOpen,
         }, "aria-expanded": "false", "aria-haspopup": "true", onClick: async (ev) => {
           const { popoverRef } = this;
           if (popoverRef) {
             this.isTimePopoverOpen = true;
             popoverRef.present(new CustomEvent('ionShadowTarget', {
               detail: {
-                ionShadowTarget: ev.target
-              }
+                ionShadowTarget: ev.target,
+              },
             }));
             await popoverRef.onWillDismiss();
             this.isTimePopoverOpen = false;
           }
-        } }, getFormattedTime(this.activePartsClone, use24Hour)),
-      h("ion-popover", { alignment: "center", translucent: true, overlayIndex: 1, arrow: false, onWillPresent: ev => {
+        } }, getLocalizedTime(this.locale, this.activePartsClone, use24Hour)),
+      h("ion-popover", { alignment: "center", translucent: true, overlayIndex: 1, arrow: false, onWillPresent: (ev) => {
           /**
            * Intersection Observers do not consistently fire between Blink and Webkit
            * when toggling the visibility of the popover and trying to scroll the picker
@@ -1978,15 +1487,23 @@ const Datetime = class {
            */
           const cols = ev.target.querySelectorAll('ion-picker-column-internal');
           // TODO (FW-615): Potentially remove this when intersection observers are fixed in picker column
-          cols.forEach(col => col.scrollActiveItemIntoView());
+          cols.forEach((col) => col.scrollActiveItemIntoView());
         }, style: {
-          '--offset-y': '-10px'
+          '--offset-y': '-10px',
+          '--min-width': 'fit-content',
         },
         // Allow native browser keyboard events to support up/down/home/end key
         // navigation within the time picker.
-        keyboardEvents: true, ref: el => this.popoverRef = el }, this.renderTimePicker(hoursItems, minutesItems, ampmItems, use24Hour))
+        keyboardEvents: true, ref: (el) => (this.popoverRef = el) }, this.renderWheelPicker('time')),
     ];
   }
+  renderCalendarViewHeader(mode) {
+    const hasSlottedTitle = this.el.querySelector('[slot="title"]') !== null;
+    if (!hasSlottedTitle && !this.showDefaultTitle) {
+      return;
+    }
+    return (h("div", { class: "datetime-header" }, h("div", { class: "datetime-title" }, h("slot", { name: "title" }, "Select Date")), mode === 'md' && !this.multiple && (h("div", { class: "datetime-selected-date" }, getMonthAndDay(this.locale, this.activeParts)))));
+  }
   /**
    * Render time picker inside of datetime.
    * Do not pass color prop to segment on
@@ -1995,98 +1512,88 @@ const Datetime = class {
    * should just be the default segment.
    */
   renderTime() {
-    const { workingParts, presentation } = this;
+    const { presentation } = this;
     const timeOnlyPresentation = presentation === 'time';
-    const use24Hour = is24Hour(this.locale, this.hourCycle);
-    const { hours, minutes, am, pm } = generateTime(this.workingParts, use24Hour ? 'h23' : 'h12', this.minParts, this.maxParts, this.parsedHourValues, this.parsedMinuteValues);
-    const hoursItems = hours.map(hour => {
-      return {
-        text: getFormattedHour(hour, use24Hour),
-        value: getInternalHourValue(hour, use24Hour, workingParts.ampm)
-      };
-    });
-    const minutesItems = minutes.map(minute => {
-      return {
-        text: addTimePadding(minute),
-        value: minute
-      };
-    });
-    const ampmItems = [];
-    if (am) {
-      ampmItems.push({
-        text: 'AM',
-        value: 'am'
-      });
-    }
-    if (pm) {
-      ampmItems.push({
-        text: 'PM',
-        value: 'pm'
-      });
-    }
-    return (h("div", { class: "datetime-time" }, timeOnlyPresentation ? this.renderTimePicker(hoursItems, minutesItems, ampmItems, use24Hour) : this.renderTimeOverlay(hoursItems, minutesItems, ampmItems, use24Hour)));
+    return (h("div", { class: "datetime-time" }, timeOnlyPresentation ? this.renderWheelPicker() : this.renderTimeOverlay()));
   }
-  renderCalendarViewHeader(mode) {
-    const hasSlottedTitle = this.el.querySelector('[slot="title"]') !== null;
-    if (!hasSlottedTitle && !this.showDefaultTitle) {
-      return;
-    }
-    return (h("div", { class: "datetime-header" }, h("div", { class: "datetime-title" }, h("slot", { name: "title" }, "Select Date")), mode === 'md' && h("div", { class: "datetime-selected-date" }, getMonthAndDay(this.locale, this.activeParts))));
+  /**
+   * Renders the month/year picker that is
+   * displayed on the calendar grid.
+   * The .datetime-year class has additional
+   * styles that let us show/hide the
+   * picker when the user clicks on the
+   * toggle in the calendar header.
+   */
+  renderCalendarViewMonthYearPicker() {
+    return h("div", { class: "datetime-year" }, this.renderWheelView('month-year'));
   }
+  /**
+   * Render entry point
+   * All presentation types are rendered from here.
+   */
   renderDatetime(mode) {
-    const { presentation } = this;
+    const { presentation, preferWheel } = this;
+    /**
+     * Certain presentation types have separate grid and wheel displays.
+     * If preferWheel is true then we should show a wheel picker instead.
+     */
+    const hasWheelVariant = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
+    if (preferWheel && hasWheelVariant) {
+      return [this.renderWheelView(), this.renderFooter()];
+    }
     switch (presentation) {
       case 'date-time':
         return [
           this.renderCalendarViewHeader(mode),
           this.renderCalendar(mode),
-          this.renderYearView(),
+          this.renderCalendarViewMonthYearPicker(),
           this.renderTime(),
-          this.renderFooter()
+          this.renderFooter(),
         ];
       case 'time-date':
         return [
           this.renderCalendarViewHeader(mode),
           this.renderTime(),
           this.renderCalendar(mode),
-          this.renderYearView(),
-          this.renderFooter()
+          this.renderCalendarViewMonthYearPicker(),
+          this.renderFooter(),
         ];
       case 'time':
-        return [
-          this.renderTime(),
-          this.renderFooter()
-        ];
+        return [this.renderTime(), this.renderFooter()];
       case 'month':
       case 'month-year':
       case 'year':
-        return [
-          this.renderYearView(),
-          this.renderFooter()
-        ];
+        return [this.renderWheelView(), this.renderFooter()];
       default:
         return [
           this.renderCalendarViewHeader(mode),
           this.renderCalendar(mode),
-          this.renderYearView(),
-          this.renderFooter()
+          this.renderCalendarViewMonthYearPicker(),
+          this.renderFooter(),
         ];
     }
   }
   render() {
-    const { name, value, disabled, el, color, isPresented, readonly, showMonthAndYear, presentation, size } = this;
+    const { name, value, disabled, el, color, isPresented, readonly, showMonthAndYear, preferWheel, presentation, size, } = this;
     const mode = getIonMode(this);
     const isMonthAndYearPresentation = presentation === 'year' || presentation === 'month' || presentation === 'month-year';
     const shouldShowMonthAndYear = showMonthAndYear || isMonthAndYearPresentation;
-    renderHiddenInput(true, el, name, value, disabled);
+    const monthYearPickerOpen = showMonthAndYear && !isMonthAndYearPresentation;
+    const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
+    const hasWheelVariant = hasDatePresentation && preferWheel;
+    const hasGrid = hasDatePresentation && !preferWheel;
+    renderHiddenInput(true, el, name, formatValue(value), disabled);
     return (h(Host, { "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
         [mode]: true,
         ['datetime-presented']: isPresented,
         ['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-size-${size}`]: true,
+        [`datetime-prefer-wheel`]: hasWheelVariant,
+        [`datetime-grid`]: hasGrid,
       })) }, this.renderDatetime(mode)));
   }
   get el() { return getElement(this); }