voyager-ionic-core 8.8.12 → 9.0.1

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

@@ -218,6 +218,10 @@
   justify-content: space-between;
 }
 
+:host .datetime-action-buttons ion-button {
+  --color: var(--ion-color-primary, #0054e9);
+}
+
 /**
  * The confirm and clear buttons are grouped in a
  * container so that they appear on the end opposite
@@ -372,6 +376,11 @@
 }
 
 .calendar-day:not(.calendar-day-adjacent-day):focus {
+  background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);
+  box-shadow: 0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);
+}
+
+:host(.ion-color) .calendar-day:not(.calendar-day-adjacent-day):focus {
   background: rgba(var(--ion-color-base-rgb), 0.2);
   box-shadow: 0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);
 }
@@ -416,6 +425,10 @@
 }
 
 :host .time-body-active {
+  color: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color) .time-body-active {
   color: var(--ion-color-base);
 }
 
@@ -424,6 +437,10 @@
 }
 
 :host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle {
+  color: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle {
   color: var(--ion-color-base);
 }
 
@@ -548,6 +565,10 @@ ion-picker {
  */
 :host {
   --background: var(--ion-color-step-100, var(--ion-background-color-step-100, #ffffff));
+  --title-color: var(--ion-color-primary-contrast, #fff);
+}
+
+:host(.ion-color) {
   --title-color: var(--ion-color-contrast);
 }
 
@@ -558,10 +579,14 @@ ion-picker {
   padding-inline-end: 20px;
   padding-top: 20px;
   padding-bottom: 20px;
-  background: var(--ion-color-base);
+  background: var(--ion-color-primary, #0054e9);
   color: var(--title-color);
 }
 
+:host(.ion-color) .datetime-header {
+  background: var(--ion-color-base);
+}
+
 :host .datetime-header .datetime-title {
   font-size: 0.75rem;
   text-transform: uppercase;
@@ -643,6 +668,11 @@ ion-picker {
  * should have ion-color for text color.
  */
 :host .calendar-day.calendar-day-today {
+  border: 1px solid var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color) .calendar-day.calendar-day-today {
   border: 1px solid var(--ion-color-base);
   color: var(--ion-color-base);
 }
@@ -654,11 +684,22 @@ ion-picker {
  */
 :host .calendar-day.calendar-day-active,
 :host .calendar-day.calendar-day-adjacent-day.calendar-day-active {
+  color: var(--ion-color-primary-contrast, #fff);
+}
+
+:host(.ion-color) .calendar-day.calendar-day-active,
+:host(.ion-color) .calendar-day.calendar-day-adjacent-day.calendar-day-active {
   color: var(--ion-color-contrast);
 }
 
 .calendar-day.calendar-day-active,
 .calendar-day.calendar-day-active:focus {
+  border: 1px solid var(--ion-color-primary, #0054e9);
+  background: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color) .calendar-day.calendar-day-active,
+:host(.ion-color) .calendar-day.calendar-day-active:focus {
   border: 1px solid var(--ion-color-base);
   background: var(--ion-color-base);
 }

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

@@ -292,15 +292,15 @@ export const getMonthColumnData = (locale, refParts, minParts, maxParts, monthVa
     const months = [];
     if (monthValues !== undefined) {
         let processedMonths = monthValues;
-        if ((maxParts === null || maxParts === void 0 ? void 0 : maxParts.month) !== undefined) {
+        if (maxParts?.month !== undefined) {
             processedMonths = processedMonths.filter((month) => month <= maxParts.month);
         }
-        if ((minParts === null || minParts === void 0 ? void 0 : minParts.month) !== undefined) {
+        if (minParts?.month !== undefined) {
             processedMonths = processedMonths.filter((month) => month >= minParts.month);
         }
         processedMonths.forEach((processedMonth) => {
             const date = new Date(`${processedMonth}/1/${year} GMT+0000`);
-            const monthString = new Intl.DateTimeFormat(locale, Object.assign(Object.assign({}, formatOptions), { timeZone: 'UTC' })).format(date);
+            const monthString = new Intl.DateTimeFormat(locale, { ...formatOptions, timeZone: 'UTC' }).format(date);
             months.push({ text: monthString, value: processedMonth });
         });
     }
@@ -333,7 +333,7 @@ export const getMonthColumnData = (locale, refParts, minParts, maxParts, monthVa
              * 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, Object.assign(Object.assign({}, formatOptions), { timeZone: 'UTC' })).format(date);
+            const monthString = new Intl.DateTimeFormat(locale, { ...formatOptions, timeZone: 'UTC' }).format(date);
             months.push({ text: monthString, value: i });
         }
     }
@@ -362,10 +362,10 @@ export const getDayColumnData = (locale, refParts, minParts, maxParts, dayValues
      * Otherwise, fallback to the max/min days in a month.
      */
     const numDaysInMonth = getNumDaysInMonth(month, year);
-    const maxDay = (maxParts === null || maxParts === void 0 ? void 0 : maxParts.day) !== null && (maxParts === null || maxParts === void 0 ? void 0 : maxParts.day) !== undefined && maxParts.year === year && maxParts.month === month
+    const maxDay = maxParts?.day !== null && maxParts?.day !== undefined && maxParts.year === year && maxParts.month === month
         ? maxParts.day
         : numDaysInMonth;
-    const minDay = (minParts === null || minParts === void 0 ? void 0 : minParts.day) !== null && (minParts === null || minParts === void 0 ? void 0 : minParts.day) !== undefined && minParts.year === year && minParts.month === month
+    const minDay = minParts?.day !== null && minParts?.day !== undefined && minParts.year === year && minParts.month === month
         ? minParts.day
         : 1;
     if (dayValues !== undefined) {
@@ -373,35 +373,34 @@ export const getDayColumnData = (locale, refParts, minParts, maxParts, dayValues
         processedDays = processedDays.filter((day) => day >= minDay && day <= maxDay);
         processedDays.forEach((processedDay) => {
             const date = new Date(`${month}/${processedDay}/${year} GMT+0000`);
-            const dayString = new Intl.DateTimeFormat(locale, Object.assign(Object.assign({}, formatOptions), { timeZone: 'UTC' })).format(date);
+            const dayString = new Intl.DateTimeFormat(locale, { ...formatOptions, timeZone: 'UTC' }).format(date);
             days.push({ text: dayString, value: processedDay });
         });
     }
     else {
         for (let i = minDay; i <= maxDay; i++) {
             const date = new Date(`${month}/${i}/${year} GMT+0000`);
-            const dayString = new Intl.DateTimeFormat(locale, Object.assign(Object.assign({}, formatOptions), { timeZone: 'UTC' })).format(date);
+            const dayString = new Intl.DateTimeFormat(locale, { ...formatOptions, timeZone: 'UTC' }).format(date);
             days.push({ text: dayString, value: i });
         }
     }
     return days;
 };
 export const getYearColumnData = (locale, refParts, minParts, maxParts, yearValues) => {
-    var _a, _b;
     let processedYears = [];
     if (yearValues !== undefined) {
         processedYears = yearValues;
-        if ((maxParts === null || maxParts === void 0 ? void 0 : maxParts.year) !== undefined) {
+        if (maxParts?.year !== undefined) {
             processedYears = processedYears.filter((year) => year <= maxParts.year);
         }
-        if ((minParts === null || minParts === void 0 ? void 0 : minParts.year) !== undefined) {
+        if (minParts?.year !== undefined) {
             processedYears = processedYears.filter((year) => year >= minParts.year);
         }
     }
     else {
         const { year } = refParts;
-        const maxYear = (_a = maxParts === null || maxParts === void 0 ? void 0 : maxParts.year) !== null && _a !== void 0 ? _a : year;
-        const minYear = (_b = minParts === null || minParts === void 0 ? void 0 : minParts.year) !== null && _b !== void 0 ? _b : year - 100;
+        const maxYear = maxParts?.year ?? year;
+        const minYear = minParts?.year ?? year - 100;
         for (let i = minYear; i <= maxYear; i++) {
             processedYears.push(i);
         }
@@ -459,7 +458,7 @@ export const getCombinedDateColumnData = (locale, todayParts, minParts, maxParts
         const dateParts = [];
         const dateColumnItems = [];
         monthDays.forEach((dayObject) => {
-            const isToday = isSameDay(Object.assign(Object.assign({}, referenceMonth), { day: dayObject.value }), todayParts);
+            const isToday = isSameDay({ ...referenceMonth, day: dayObject.value }, todayParts);
             /**
              * Today's date should read as "Today" (localized)
              * not the actual date string

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

@@ -15,7 +15,8 @@ const getFormattedDayPeriod = (dayPeriod) => {
  * confusion.
  */
 export const stripTimeZone = (formatOptions) => {
-    return Object.assign(Object.assign({}, formatOptions), {
+    return {
+        ...formatOptions,
         /**
          * Setting the time zone to UTC ensures that the value shown is always the
          * same as what was selected and safeguards against older Safari bugs with
@@ -25,8 +26,8 @@ export const stripTimeZone = (formatOptions) => {
         /**
          * We do not want to display the time zone name
          */
-        timeZoneName: undefined
-    });
+        timeZoneName: undefined,
+    };
 };
 export const getLocalizedTime = (locale, refParts, hourCycle, formatOptions = { hour: 'numeric', minute: 'numeric' }) => {
     const timeParts = {
@@ -36,13 +37,20 @@ export const getLocalizedTime = (locale, refParts, hourCycle, formatOptions = {
     if (timeParts.hour === undefined || timeParts.minute === undefined) {
         return 'Invalid Time';
     }
-    return new Intl.DateTimeFormat(locale, Object.assign(Object.assign({}, stripTimeZone(formatOptions)), {
+    return new Intl.DateTimeFormat(locale, {
+        ...stripTimeZone(formatOptions),
         /**
          * We use hourCycle here instead of hour12 due to:
          * https://bugs.chromium.org/p/chromium/issues/detail?id=1347316&q=hour12&can=2
          */
-        hourCycle
-    })).format(new Date(convertDataToISO(Object.assign({
+        hourCycle,
+        /**
+         * Setting Z at the end indicates that this
+         * date string is in the UTC time zone. This
+         * prevents new Date from adding the time zone
+         * offset when getting the ISO string.
+         */
+    }).format(new Date(convertDataToISO({
         /**
          * JS uses a simplified ISO 8601 format which allows for
          * date-only formats and date-time formats, but not
@@ -54,8 +62,11 @@ export const getLocalizedTime = (locale, refParts, hourCycle, formatOptions = {
          * values, so passing these date values should have no impact
          * on the time output.
          */
-        year: 2023, day: 1, month: 1
-    }, timeParts)) + 'Z'));
+        year: 2023,
+        day: 1,
+        month: 1,
+        ...timeParts,
+    }) + 'Z'));
 };
 /**
  * Adds padding to a time value so
@@ -164,7 +175,6 @@ export const getYear = (locale, refParts) => {
  * with a normalized time.
  */
 export const getNormalizedDate = (refParts) => {
-    var _a, _b, _c;
     const timeString = refParts.hour !== undefined && refParts.minute !== undefined ? ` ${refParts.hour}:${refParts.minute}` : '';
     /**
      * We use / notation here for the date
@@ -176,7 +186,7 @@ export const getNormalizedDate = (refParts) => {
      * account for this and still return a valid date. However,
      * this is not a consistent behavior across all browsers.
      */
-    return new Date(`${(_a = refParts.month) !== null && _a !== void 0 ? _a : 1}/${(_b = refParts.day) !== null && _b !== void 0 ? _b : 1}/${(_c = refParts.year) !== null && _c !== void 0 ? _c : 2023}${timeString} GMT+0000`);
+    return new Date(`${refParts.month ?? 1}/${refParts.day ?? 1}/${refParts.year ?? 2023}${timeString} GMT+0000`);
 };
 /**
  * Given a locale, DatetimeParts, and options
@@ -207,7 +217,7 @@ export const getLocalizedDateTimeParts = (locale, refParts, options) => {
  * with Intl.DateTimeFormat.
  */
 const getDateTimeFormat = (locale, options) => {
-    return new Intl.DateTimeFormat(locale, Object.assign(Object.assign({}, options), { timeZone: 'UTC' }));
+    return new Intl.DateTimeFormat(locale, { ...options, timeZone: 'UTC' });
 };
 /**
  * Gets a localized version of "Today"

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

@@ -282,7 +282,7 @@ export const calculateHourFromAMPM = (currentParts, newAMPM) => {
  */
 export const validateParts = (parts, minParts, maxParts) => {
     const { month, day, year } = parts;
-    const partsCopy = clampDate(Object.assign({}, parts), minParts, maxParts);
+    const partsCopy = clampDate({ ...parts }, minParts, maxParts);
     const numDays = getNumDaysInMonth(month, year);
     /**
      * If the max number of days
@@ -358,7 +358,7 @@ export const validateParts = (parts, minParts, maxParts) => {
  */
 export const getClosestValidDate = ({ refParts, monthValues, dayValues, yearValues, hourValues, minuteValues, minParts, maxParts, }) => {
     const { hour, minute, day, month, year } = refParts;
-    const copyParts = Object.assign(Object.assign({}, refParts), { dayOfWeek: undefined });
+    const copyParts = { ...refParts, dayOfWeek: undefined };
     if (yearValues !== undefined) {
         // Filters out years that are out of the min/max bounds
         const filteredYears = yearValues.filter((year) => {
@@ -389,10 +389,10 @@ export const getClosestValidDate = ({ refParts, monthValues, dayValues, yearValu
     if (day !== null && dayValues !== undefined) {
         // Filters out days that are out of the min/max bounds
         const filteredDays = dayValues.filter((day) => {
-            if (minParts !== undefined && isBefore(Object.assign(Object.assign({}, copyParts), { day }), minParts)) {
+            if (minParts !== undefined && isBefore({ ...copyParts, day }, minParts)) {
                 return false;
             }
-            if (maxParts !== undefined && isAfter(Object.assign(Object.assign({}, copyParts), { day }), maxParts)) {
+            if (maxParts !== undefined && isAfter({ ...copyParts, day }, maxParts)) {
                 return false;
             }
             return true;
@@ -402,10 +402,10 @@ export const getClosestValidDate = ({ refParts, monthValues, dayValues, yearValu
     if (hour !== undefined && hourValues !== undefined) {
         // Filters out hours that are out of the min/max bounds
         const filteredHours = hourValues.filter((hour) => {
-            if ((minParts === null || minParts === void 0 ? void 0 : minParts.hour) !== undefined && isSameDay(copyParts, minParts) && hour < minParts.hour) {
+            if (minParts?.hour !== undefined && isSameDay(copyParts, minParts) && hour < minParts.hour) {
                 return false;
             }
-            if ((maxParts === null || maxParts === void 0 ? void 0 : maxParts.hour) !== undefined && isSameDay(copyParts, maxParts) && hour > maxParts.hour) {
+            if (maxParts?.hour !== undefined && isSameDay(copyParts, maxParts) && hour > maxParts.hour) {
                 return false;
             }
             return true;
@@ -416,13 +416,13 @@ export const getClosestValidDate = ({ refParts, monthValues, dayValues, yearValu
     if (minute !== undefined && minuteValues !== undefined) {
         // Filters out minutes that are out of the min/max bounds
         const filteredMinutes = minuteValues.filter((minute) => {
-            if ((minParts === null || minParts === void 0 ? void 0 : minParts.minute) !== undefined &&
+            if (minParts?.minute !== undefined &&
                 isSameDay(copyParts, minParts) &&
                 copyParts.hour === minParts.hour &&
                 minute < minParts.minute) {
                 return false;
             }
-            if ((maxParts === null || maxParts === void 0 ? void 0 : maxParts.minute) !== undefined &&
+            if (maxParts?.minute !== undefined &&
                 isSameDay(copyParts, maxParts) &&
                 copyParts.hour === maxParts.hour &&
                 minute > maxParts.minute) {

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

@@ -142,19 +142,19 @@ export const parseMaxParts = (max, todayParts) => {
      * so that the correct initial value can be selected. As a result,
      * we need to fill in any omitted data with the min or max values.
      */
-    const yearValue = year !== null && year !== void 0 ? year : todayParts.year;
-    const monthValue = month !== null && month !== void 0 ? month : 12;
+    const yearValue = year ?? todayParts.year;
+    const monthValue = month ?? 12;
     return {
         month: monthValue,
-        day: day !== null && day !== void 0 ? day : getNumDaysInMonth(monthValue, yearValue),
+        day: day ?? getNumDaysInMonth(monthValue, yearValue),
         /**
          * Passing in "HH:mm" is a valid ISO-8601
          * string, so we just default to the current year
          * in this case.
          */
         year: yearValue,
-        hour: hour !== null && hour !== void 0 ? hour : 23,
-        minute: minute !== null && minute !== void 0 ? minute : 59,
+        hour: hour ?? 23,
+        minute: minute ?? 59,
     };
 };
 /**
@@ -183,15 +183,15 @@ export const parseMinParts = (min, todayParts) => {
      * we need to fill in any omitted data with the min or max values.
      */
     return {
-        month: month !== null && month !== void 0 ? month : 1,
-        day: day !== null && day !== void 0 ? day : 1,
+        month: month ?? 1,
+        day: day ?? 1,
         /**
          * Passing in "HH:mm" is a valid ISO-8601
          * string, so we just default to the current year
          * in this case.
          */
-        year: year !== null && year !== void 0 ? year : todayParts.year,
-        hour: hour !== null && hour !== void 0 ? hour : 0,
-        minute: minute !== null && minute !== void 0 ? minute : 0,
+        year: year ?? todayParts.year,
+        hour: hour ?? 0,
+        minute: minute ?? 0,
     };
 };

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

@@ -125,7 +125,10 @@ export const isMonthDisabled = (refParts, { minParts, maxParts, }) => {
  * previous navigation button is disabled.
  */
 export const isPrevMonthDisabled = (refParts, minParts, maxParts) => {
-    const prevMonth = Object.assign(Object.assign({}, getPreviousMonth(refParts)), { day: null });
+    const prevMonth = {
+        ...getPreviousMonth(refParts),
+        day: null,
+    };
     return isMonthDisabled(prevMonth, {
         minParts,
         maxParts,
@@ -136,7 +139,10 @@ export const isPrevMonthDisabled = (refParts, minParts, maxParts) => {
  * determine if the next navigation button is disabled.
  */
 export const isNextMonthDisabled = (refParts, maxParts) => {
-    const nextMonth = Object.assign(Object.assign({}, getNextMonth(refParts)), { day: null });
+    const nextMonth = {
+        ...getNextMonth(refParts),
+        day: null,
+    };
     return isMonthDisabled(nextMonth, {
         maxParts,
     });

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

@@ -8,11 +8,10 @@ import { printIonWarning } from "../../../utils/logging/index";
  * confusion.
  */
 export const warnIfTimeZoneProvided = (el, formatOptions) => {
-    var _a, _b, _c, _d;
-    if (((_a = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) === null || _a === void 0 ? void 0 : _a.timeZone) ||
-        ((_b = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) === null || _b === void 0 ? void 0 : _b.timeZoneName) ||
-        ((_c = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) === null || _c === void 0 ? void 0 : _c.timeZone) ||
-        ((_d = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) === null || _d === void 0 ? void 0 : _d.timeZoneName)) {
+    if (formatOptions?.date?.timeZone ||
+        formatOptions?.date?.timeZoneName ||
+        formatOptions?.time?.timeZone ||
+        formatOptions?.time?.timeZoneName) {
         printIonWarning('[ion-datetime] - "timeZone" and "timeZoneName" are not supported in "formatOptions".', el);
     }
 };

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

@@ -82,6 +82,11 @@
 
 :host(.time-active) #time-button,
 :host(.date-active) #date-button {
+  color: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color.time-active) #time-button,
+:host(.ion-color.date-active) #date-button {
   color: var(--ion-color-base);
 }
 

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

@@ -6,7 +6,6 @@ import { componentOnReady, addEventListener } from "../../utils/helpers";
 import { printIonError } from "../../utils/logging/index";
 import { createColorClasses } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
-import { getToday } from "../datetime/utils/data";
 import { getLocalizedDateTime, getLocalizedTime } from "../datetime/utils/format";
 import { getHourCycle } from "../datetime/utils/helpers";
 import { parseDate } from "../datetime/utils/parse";
@@ -24,12 +23,6 @@ export class DatetimeButton {
         this.overlayEl = null;
         this.datetimePresentation = 'date-time';
         this.datetimeActive = false;
-        /**
-         * The color to use from your application's color palette.
-         * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-         * For more information on colors, see [theming](/docs/theming/basics).
-         */
-        this.color = 'primary';
         /**
          * If `true`, the user cannot interact with the button.
          */
@@ -54,8 +47,7 @@ export class DatetimeButton {
          * ion-datetime and then format it according
          * to the locale specified on ion-datetime.
          */
-        this.setDateTimeText = () => {
-            var _a, _b, _c, _d, _e;
+        this.setDateTimeText = async () => {
             const { datetimeEl, datetimePresentation } = this;
             if (!datetimeEl) {
                 return;
@@ -63,10 +55,12 @@ export class DatetimeButton {
             const { value, locale, formatOptions, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
             const parsedValues = this.getParsedDateValues(value);
             /**
-             * Both ion-datetime and ion-datetime-button default
-             * to today's date and time if no value is set.
+             * Both ion-datetime and ion-datetime-button default to today's date and
+             * time if no value is set. We read the datetime's computed default so the
+             * button respects the same constraints (min, max, minuteValues, etc.) that
+             * the datetime applies to its own fallback, instead of using a raw "now".
              */
-            const parsedDatetimes = parseDate(parsedValues.length > 0 ? parsedValues : [getToday()]);
+            const parsedDatetimes = parsedValues.length > 0 ? parseDate(parsedValues) : [await datetimeEl.getDefaultPart()];
             if (!parsedDatetimes) {
                 return;
             }
@@ -83,8 +77,8 @@ export class DatetimeButton {
             switch (datetimePresentation) {
                 case 'date-time':
                 case 'time-date':
-                    const dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_a = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _a !== void 0 ? _a : { month: 'short', day: 'numeric', year: 'numeric' });
-                    const timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time);
+                    const dateText = getLocalizedDateTime(locale, firstParsedDatetime, formatOptions?.date ?? { month: 'short', day: 'numeric', year: 'numeric' });
+                    const timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions?.time);
                     if (preferWheel) {
                         this.dateText = `${dateText} ${timeText}`;
                     }
@@ -107,20 +101,20 @@ export class DatetimeButton {
                         this.dateText = headerText;
                     }
                     else {
-                        this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_b = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _b !== void 0 ? _b : { month: 'short', day: 'numeric', year: 'numeric' });
+                        this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, formatOptions?.date ?? { month: 'short', day: 'numeric', year: 'numeric' });
                     }
                     break;
                 case 'time':
-                    this.timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time);
+                    this.timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions?.time);
                     break;
                 case 'month-year':
-                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_c = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _c !== void 0 ? _c : { month: 'long', year: 'numeric' });
+                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, formatOptions?.date ?? { month: 'long', year: 'numeric' });
                     break;
                 case 'month':
-                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_d = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) !== null && _d !== void 0 ? _d : { month: 'long' });
+                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, formatOptions?.time ?? { month: 'long' });
                     break;
                 case 'year':
-                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_e = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) !== null && _e !== void 0 ? _e : { year: 'numeric' });
+                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, formatOptions?.time ?? { year: 'numeric' });
                     break;
             }
         };
@@ -241,9 +235,12 @@ export class DatetimeButton {
                  * so that the popover aligns with the individual
                  * button that was clicked, not the component container.
                  */
-                overlayEl.present(Object.assign(Object.assign({}, ev), { detail: {
+                overlayEl.present({
+                    ...ev,
+                    detail: {
                         ionShadowTarget: triggerEl,
-                    } }));
+                    },
+                });
             }
             else {
                 overlayEl.present();
@@ -341,11 +338,11 @@ export class DatetimeButton {
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '11d037e6ab061e5116842970760b04850b42f2c7', class: createColorClasses(color, {
+        return (h(Host, { key: '2aaa284fe9b53b6347fcb5a1d325fbab1a6f38bd', class: createColorClasses(color, {
                 [mode]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,
-            }) }, dateText && (h("button", { key: '08ecb62da0fcbf7466a1f2403276712a3ff17fbc', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, h("slot", { key: '1c04853d4d23c0f1a594602bde44511c98355644', name: "date-target" }, dateText), mode === 'md' && h("ion-ripple-effect", { key: '5fc566cd4bc885bcf983ce99e3dc65d7f485bf9b' }))), timeText && (h("button", { key: 'c9c5c34ac338badf8659da22bea5829d62c51169', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, h("slot", { key: '147a9d2069dbf737f6fc64787823d6d5af5aa653', name: "time-target" }, timeText), mode === 'md' && h("ion-ripple-effect", { key: '70a5e25b75ed90ac6bba003468435f67aa9d8f0a' })))));
+            }) }, dateText && (h("button", { key: 'd9698471fa5d5c834ca73db57f9ed98dfc705b4c', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, h("slot", { key: 'c8761a7f25ae5b93c953b3486dd6335f5ad4fd53', name: "date-target" }, dateText), mode === 'md' && h("ion-ripple-effect", { key: '3dd5e97af8d35a2b008de4ab01f690b3c2223135' }))), timeText && (h("button", { key: '1107ca2382940b642b551f885f7ca763012c236c', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, h("slot", { key: '5cff53e486923b03715b9ab4dc0947e26f4ea1d9', name: "time-target" }, timeText), mode === 'md' && h("ion-ripple-effect", { key: '5aac1facb6fc7457307c4f59a241e3a5b31facc8' })))));
     }
     static get is() { return "ion-datetime-button"; }
     static get encapsulation() { return "shadow"; }
@@ -387,8 +384,7 @@ export class DatetimeButton {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "color",
-                "defaultValue": "'primary'"
+                "attribute": "color"
             },
             "disabled": {
                 "type": "boolean",

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

@@ -82,6 +82,11 @@
 
 :host(.time-active) #time-button,
 :host(.date-active) #date-button {
+  color: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color.time-active) #time-button,
+:host(.ion-color.date-active) #date-button {
   color: var(--ion-color-base);
 }