voyager-ionic-core 8.8.17 → 9.0.1

package/dist/collection/components/datetime/datetime.ios.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);
 }
 
@@ -603,6 +620,11 @@ ion-picker {
 
 :host .calendar-action-buttons .calendar-month-year-toggle ion-icon,
 :host .calendar-action-buttons ion-buttons ion-button {
+  color: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color) .calendar-action-buttons .calendar-month-year-toggle ion-icon,
+:host(.ion-color) .calendar-action-buttons ion-buttons ion-button {
   color: var(--ion-color-base);
 }
 
@@ -768,15 +790,23 @@ ion-picker {
 }
 
 .calendar-day.calendar-day-active {
-  background: rgba(var(--ion-color-base-rgb), 0.2);
+  background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);
   font-size: min(1.375rem, 35.2px);
 }
 
+:host(.ion-color) .calendar-day.calendar-day-active {
+  background: rgba(var(--ion-color-base-rgb), 0.2);
+}
+
 /**
  * Day that today but not selected
  * should have ion-color for text color.
  */
 :host .calendar-day.calendar-day-today {
+  color: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color) .calendar-day.calendar-day-today {
   color: var(--ion-color-base);
 }
 
@@ -787,16 +817,26 @@ ion-picker {
  */
 :host .calendar-day.calendar-day-active,
 :host .calendar-day.calendar-day-adjacent-day.calendar-day-active {
-  color: var(--ion-color-base);
+  color: var(--ion-color-primary, #0054e9);
   font-weight: 600;
 }
 
+:host(.ion-color) .calendar-day.calendar-day-active,
+:host(.ion-color) .calendar-day.calendar-day-adjacent-day.calendar-day-active {
+  color: var(--ion-color-base);
+}
+
 /**
  * Day that is selected and is today
  * should have base background color
  * with contrast text.
  */
 :host .calendar-day.calendar-day-today.calendar-day-active {
+  background: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary-contrast, #fff);
+}
+
+:host(.ion-color) .calendar-day.calendar-day-today.calendar-day-active {
   background: var(--ion-color-base);
   color: var(--ion-color-contrast);
 }

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

@@ -60,6 +60,10 @@ export class Datetime {
          * Set true only by `visibleCallback`. Lets `hiddenCallback` ignore the
          * synthetic "not intersecting" entry IntersectionObserver fires on
          * `observe()` when the host mounts offscreen.
+         *
+         * Don't reset this in `disconnectedCallback`. Overlays disconnect and
+         * reconnect the host without re-creating the observers, so a reset there
+         * makes `hiddenCallback` miss the dismissal.
          */
         this.hasBeenIntersecting = false;
         this.prevPresentation = null;
@@ -75,12 +79,6 @@ export class Datetime {
             isAdjacentDay: false,
         };
         this.isTimePopoverOpen = false;
-        /**
-         * The color to use from your application's color palette.
-         * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-         * For more information on colors, see [theming](/docs/theming/basics).
-         */
-        this.color = 'primary';
         /**
          * The name of the control, which is submitted with the form data.
          */
@@ -219,9 +217,8 @@ export class Datetime {
          * is selected.
          */
         this.getActivePartsWithFallback = () => {
-            var _a;
             const { defaultParts } = this;
-            return (_a = this.getActivePart()) !== null && _a !== void 0 ? _a : defaultParts;
+            return this.getActivePart() ?? defaultParts;
         };
         this.getActivePart = () => {
             const { activeParts } = this;
@@ -234,7 +231,9 @@ export class Datetime {
             }
         };
         this.setWorkingParts = (parts) => {
-            this.workingParts = Object.assign({}, parts);
+            this.workingParts = {
+                ...parts,
+            };
         };
         this.setActiveParts = (parts, removeDate = false) => {
             /** if the datetime component is in readonly mode,
@@ -267,7 +266,9 @@ export class Datetime {
                 }
             }
             else {
-                this.activeParts = Object.assign({}, validatedParts);
+                this.activeParts = {
+                    ...validatedParts,
+                };
             }
             const hasSlottedButtons = this.el.querySelector('[slot="buttons"]') !== null;
             if (hasSlottedButtons || this.showDefaultButtons) {
@@ -293,7 +294,6 @@ export class Datetime {
              * Tab should jump between bodies of selectable content.
              */
             const checkCalendarBodyFocus = (ev) => {
-                var _a;
                 const record = ev[0];
                 /**
                  * If calendar body was already focused
@@ -301,7 +301,7 @@ export class Datetime {
                  * if not currently focused, we should not re-focus
                  * the inner day.
                  */
-                if (((_a = record.oldValue) === null || _a === void 0 ? void 0 : _a.includes('ion-focused')) || !calendarBodyRef.classList.contains('ion-focused')) {
+                if (record.oldValue?.includes('ion-focused') || !calendarBodyRef.classList.contains('ion-focused')) {
                     return;
                 }
                 this.focusWorkingDay(currentMonth);
@@ -309,7 +309,7 @@ export class Datetime {
             const mo = new MutationObserver(checkCalendarBodyFocus);
             mo.observe(calendarBodyRef, { attributeFilter: ['class'], attributeOldValue: true });
             this.destroyKeyboardMO = () => {
-                mo === null || mo === void 0 ? void 0 : mo.disconnect();
+                mo?.disconnect();
             };
             /**
              * We must use keydown not keyup as we want
@@ -371,7 +371,10 @@ export class Datetime {
                 if (isDayDisabled(partsToFocus, this.minParts, this.maxParts)) {
                     return;
                 }
-                this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), partsToFocus));
+                this.setWorkingParts({
+                    ...this.workingParts,
+                    ...partsToFocus,
+                });
                 /**
                  * Give view a chance to re-render
                  * then move focus to the new working day
@@ -522,8 +525,8 @@ export class Datetime {
                         return;
                     const { month, day, year } = newDate;
                     if (isMonthDisabled({ month, year, day: null }, {
-                        minParts: Object.assign(Object.assign({}, this.minParts), { day: null }),
-                        maxParts: Object.assign(Object.assign({}, this.maxParts), { day: null }),
+                        minParts: { ...this.minParts, day: null },
+                        maxParts: { ...this.maxParts, day: null },
                     })) {
                         return;
                     }
@@ -543,8 +546,12 @@ export class Datetime {
                      * if we did not do this.
                      */
                     writeTask(() => {
-                        var _a;
-                        this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), { month, day: day, year }));
+                        this.setWorkingParts({
+                            ...this.workingParts,
+                            month,
+                            day: day,
+                            year,
+                        });
                         calendarBodyRef.scrollLeft = workingMonth.clientWidth * (isRTL(this.el) ? -1 : 1);
                         calendarBodyRef.style.removeProperty('overflow');
                         if (this.resolveForceDateScrolling) {
@@ -552,7 +559,7 @@ export class Datetime {
                         }
                         const activeEl = this.el.shadowRoot.activeElement;
                         if (activeEl && activeEl.classList.contains('calendar-day')) {
-                            (_a = activeEl.closest('.calendar-body')) === null || _a === void 0 ? void 0 : _a.focus();
+                            activeEl.closest('.calendar-body')?.focus();
                         }
                     });
                 };
@@ -943,7 +950,6 @@ export class Datetime {
             this.clearFocusVisible = undefined;
         }
         this.loadTimeoutCleanup();
-        this.hasBeenIntersecting = false;
     }
     initializeListeners() {
         this.initializeCalendarListener();
@@ -973,7 +979,7 @@ export class Datetime {
          * could cause the datetime to start at a visibility of 0, erroneously
          * triggering the `hiddenIO` observer below.
          */
-        raf(() => visibleIO === null || visibleIO === void 0 ? void 0 : visibleIO.observe(intersectionTrackerRef));
+        raf(() => visibleIO?.observe(intersectionTrackerRef));
         /**
          * TODO(FW-6931): Remove this fallback upon solving the root cause
          * Fallback: If IntersectionObserver never reports that the
@@ -1019,7 +1025,7 @@ export class Datetime {
             });
         };
         const hiddenIO = new IntersectionObserver(hiddenCallback, { threshold: 0, root: el });
-        raf(() => hiddenIO === null || hiddenIO === void 0 ? void 0 : hiddenIO.observe(intersectionTrackerRef));
+        raf(() => hiddenIO?.observe(intersectionTrackerRef));
         /**
          * Datetime uses Ionic components that emit
          * ionFocus and ionBlur. These events are
@@ -1200,7 +1206,6 @@ export class Datetime {
     }
     renderCombinedDatePickerColumn() {
         const { defaultParts, disabled, workingParts, locale, minParts, maxParts, todayParts, isDateEnabled } = this;
-        const activePart = this.getActivePartsWithFallback();
         /**
          * By default, generate a range of 3 months:
          * Previous month, current month, and next month
@@ -1240,7 +1245,10 @@ export class Datetime {
                 catch (e) {
                     printIonError('[ion-datetime] - Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', e);
                 }
-                return Object.assign(Object.assign({}, itemObject), { disabled });
+                return {
+                    ...itemObject,
+                    disabled,
+                };
             });
         }
         /**
@@ -1253,10 +1261,18 @@ export class Datetime {
         return (h("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a date", class: "date-column", color: this.color, disabled: disabled, value: todayString, onIonChange: (ev) => {
                 const { value } = ev.detail;
                 const findPart = parts.find(({ month, day, year }) => value === `${year}-${month}-${day}`);
-                this.setWorkingParts(Object.assign(Object.assign({}, workingParts), findPart));
-                this.setActiveParts(Object.assign(Object.assign({}, activePart), findPart));
+                // Read live so parts a sibling column just committed are included.
+                const activePart = this.getActivePartsWithFallback();
+                this.setWorkingParts({
+                    ...this.workingParts,
+                    ...findPart,
+                });
+                this.setActiveParts({
+                    ...activePart,
+                    ...findPart,
+                });
                 ev.stopPropagation();
-            } }, items.map((item) => (h("ion-picker-column-option", { part: item.value === todayString ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: item.value, disabled: item.disabled, value: item.value }, item.text)))));
+            } }, items.map((item) => (h("ion-picker-column-option", { color: this.color, part: item.value === todayString ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: item.value, disabled: item.disabled, value: item.value }, item.text)))));
     }
     renderIndividualDatePickerColumns(forcePresentation) {
         const { workingParts, isDateEnabled } = this;
@@ -1289,7 +1305,10 @@ export class Datetime {
                 catch (e) {
                     printIonError('[ion-datetime] - Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', e);
                 }
-                return Object.assign(Object.assign({}, dayObject), { disabled });
+                return {
+                    ...dayObject,
+                    disabled,
+                };
             });
         }
         const shouldRenderYears = forcePresentation !== 'month' && forcePresentation !== 'time';
@@ -1318,48 +1337,68 @@ export class Datetime {
         return renderArray;
     }
     renderDayPickerColumn(days) {
-        var _a;
         if (days.length === 0) {
             return [];
         }
         const { disabled, workingParts } = this;
-        const activePart = this.getActivePartsWithFallback();
-        const pickerColumnValue = (_a = (workingParts.day !== null ? workingParts.day : this.defaultParts.day)) !== null && _a !== void 0 ? _a : undefined;
+        const pickerColumnValue = (workingParts.day !== null ? workingParts.day : this.defaultParts.day) ?? undefined;
         return (h("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a day", class: "day-column", color: this.color, disabled: disabled, value: pickerColumnValue, onIonChange: (ev) => {
-                this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { day: ev.detail.value }));
-                this.setActiveParts(Object.assign(Object.assign({}, activePart), { day: ev.detail.value }));
+                // Read live so parts a sibling column just committed are included.
+                const activePart = this.getActivePartsWithFallback();
+                this.setWorkingParts({
+                    ...this.workingParts,
+                    day: ev.detail.value,
+                });
+                this.setActiveParts({
+                    ...activePart,
+                    day: ev.detail.value,
+                });
                 ev.stopPropagation();
-            } }, days.map((day) => (h("ion-picker-column-option", { part: day.value === pickerColumnValue ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: day.value, disabled: day.disabled, value: day.value }, day.text)))));
+            } }, days.map((day) => (h("ion-picker-column-option", { color: this.color, part: day.value === pickerColumnValue ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: day.value, disabled: day.disabled, value: day.value }, day.text)))));
     }
     renderMonthPickerColumn(months) {
         if (months.length === 0) {
             return [];
         }
         const { disabled, workingParts } = this;
-        const activePart = this.getActivePartsWithFallback();
         return (h("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a month", class: "month-column", color: this.color, disabled: disabled, value: workingParts.month, onIonChange: (ev) => {
-                this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { month: ev.detail.value }));
+                // Read live so parts a sibling column just committed are included.
+                const activePart = this.getActivePartsWithFallback();
+                this.setWorkingParts({
+                    ...this.workingParts,
+                    month: ev.detail.value,
+                });
                 // Month wheel is navigation-only in multi-select mode as a fix for https://github.com/ionic-team/ionic-framework/issues/29673
                 if (!this.multiple) {
-                    this.setActiveParts(Object.assign(Object.assign({}, activePart), { month: ev.detail.value }));
+                    this.setActiveParts({
+                        ...activePart,
+                        month: ev.detail.value,
+                    });
                 }
                 ev.stopPropagation();
-            } }, months.map((month) => (h("ion-picker-column-option", { part: month.value === workingParts.month ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: month.value, disabled: month.disabled, value: month.value }, month.text)))));
+            } }, months.map((month) => (h("ion-picker-column-option", { color: this.color, part: month.value === workingParts.month ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: month.value, disabled: month.disabled, value: month.value }, month.text)))));
     }
     renderYearPickerColumn(years) {
         if (years.length === 0) {
             return [];
         }
         const { disabled, workingParts } = this;
-        const activePart = this.getActivePartsWithFallback();
         return (h("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a year", class: "year-column", color: this.color, disabled: disabled, value: workingParts.year, onIonChange: (ev) => {
-                this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { year: ev.detail.value }));
+                // Read live so parts a sibling column just committed are included.
+                const activePart = this.getActivePartsWithFallback();
+                this.setWorkingParts({
+                    ...this.workingParts,
+                    year: ev.detail.value,
+                });
                 // Year wheel is navigation-only in multi-select mode as a fix for https://github.com/ionic-team/ionic-framework/issues/29673
                 if (!this.multiple) {
-                    this.setActiveParts(Object.assign(Object.assign({}, activePart), { year: ev.detail.value }));
+                    this.setActiveParts({
+                        ...activePart,
+                        year: ev.detail.value,
+                    });
                 }
                 ev.stopPropagation();
-            } }, years.map((year) => (h("ion-picker-column-option", { part: year.value === workingParts.year ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: year.value, disabled: year.disabled, value: year.value }, year.text)))));
+            } }, years.map((year) => (h("ion-picker-column-option", { color: this.color, part: year.value === workingParts.year ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: year.value, disabled: year.disabled, value: year.value }, year.text)))));
     }
     renderTimePickerColumns(forcePresentation) {
         if (['date', 'month', 'month-year', 'year'].includes(forcePresentation)) {
@@ -1384,40 +1423,64 @@ export class Datetime {
         ];
     }
     renderHourPickerColumn(hoursData) {
-        const { disabled, workingParts } = this;
+        const { disabled } = this;
         if (hoursData.length === 0)
             return [];
         const activePart = this.getActivePartsWithFallback();
         return (h("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select an hour", color: this.color, disabled: disabled, value: activePart.hour, numericInput: true, onIonChange: (ev) => {
-                this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { hour: ev.detail.value }));
-                this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { hour: ev.detail.value }));
+                // Read live so parts a sibling column just committed are included.
+                this.setWorkingParts({
+                    ...this.workingParts,
+                    hour: ev.detail.value,
+                });
+                this.setActiveParts({
+                    ...this.getActivePartsWithFallback(),
+                    hour: ev.detail.value,
+                });
                 ev.stopPropagation();
-            } }, hoursData.map((hour) => (h("ion-picker-column-option", { part: hour.value === activePart.hour ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: hour.value, disabled: hour.disabled, value: hour.value }, hour.text)))));
+            } }, hoursData.map((hour) => (h("ion-picker-column-option", { color: this.color, part: hour.value === activePart.hour ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: hour.value, disabled: hour.disabled, value: hour.value }, hour.text)))));
     }
     renderMinutePickerColumn(minutesData) {
-        const { disabled, workingParts } = this;
+        const { disabled } = this;
         if (minutesData.length === 0)
             return [];
         const activePart = this.getActivePartsWithFallback();
         return (h("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a minute", color: this.color, disabled: disabled, value: activePart.minute, numericInput: true, onIonChange: (ev) => {
-                this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { minute: ev.detail.value }));
-                this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { minute: ev.detail.value }));
+                // Read live so parts a sibling column just committed are included.
+                this.setWorkingParts({
+                    ...this.workingParts,
+                    minute: ev.detail.value,
+                });
+                this.setActiveParts({
+                    ...this.getActivePartsWithFallback(),
+                    minute: ev.detail.value,
+                });
                 ev.stopPropagation();
-            } }, minutesData.map((minute) => (h("ion-picker-column-option", { part: minute.value === activePart.minute ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: minute.value, disabled: minute.disabled, value: minute.value }, minute.text)))));
+            } }, minutesData.map((minute) => (h("ion-picker-column-option", { color: this.color, part: minute.value === activePart.minute ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: minute.value, disabled: minute.disabled, value: minute.value }, minute.text)))));
     }
     renderDayPeriodPickerColumn(dayPeriodData) {
-        const { disabled, workingParts } = this;
+        const { disabled } = this;
         if (dayPeriodData.length === 0) {
             return [];
         }
         const activePart = this.getActivePartsWithFallback();
         const isDayPeriodRTL = isLocaleDayPeriodRTL(this.locale);
         return (h("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a day period", style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, onIonChange: (ev) => {
-                const hour = calculateHourFromAMPM(workingParts, ev.detail.value);
-                this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm: ev.detail.value, hour }));
-                this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { ampm: ev.detail.value, hour }));
+                // Read live so parts a sibling column just committed are included.
+                const currentParts = this.workingParts;
+                const hour = calculateHourFromAMPM(currentParts, ev.detail.value);
+                this.setWorkingParts({
+                    ...currentParts,
+                    ampm: ev.detail.value,
+                    hour,
+                });
+                this.setActiveParts({
+                    ...this.getActivePartsWithFallback(),
+                    ampm: ev.detail.value,
+                    hour,
+                });
                 ev.stopPropagation();
-            } }, dayPeriodData.map((dayPeriod) => (h("ion-picker-column-option", { part: dayPeriod.value === activePart.ampm ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: dayPeriod.value, disabled: dayPeriod.disabled, value: dayPeriod.value }, dayPeriod.text)))));
+            } }, dayPeriodData.map((dayPeriod) => (h("ion-picker-column-option", { color: this.color, part: dayPeriod.value === activePart.ampm ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: dayPeriod.value, disabled: dayPeriod.disabled, value: dayPeriod.value }, dayPeriod.text)))));
     }
     renderWheelView(forcePresentation) {
         const { locale } = this;
@@ -1461,8 +1524,8 @@ export class Datetime {
                 // The day is not used when checking if a month is disabled.
                 // Users should be able to access the min or max month, even if the
                 // min/max date is out of bounds (e.g. min is set to Feb 15, Feb should not be disabled).
-                minParts: Object.assign(Object.assign({}, this.minParts), { day: null }),
-                maxParts: Object.assign(Object.assign({}, this.maxParts), { day: null }),
+                minParts: { ...this.minParts, day: null },
+                maxParts: { ...this.maxParts, day: null },
             });
         // The working month should never have swipe disabled.
         // Otherwise the CSS scroll snap will not work and the user
@@ -1571,18 +1634,24 @@ export class Datetime {
                     if (isAdjacentDay) {
                         // The user selected a day outside the current month. Ignore this button, as the month will be re-rendered.
                         this.el.blur();
-                        this.activeParts = Object.assign(Object.assign({}, activePart), referenceParts);
+                        this.activeParts = { ...activePart, ...referenceParts };
                         this.animateToDate(referenceParts);
                         this.confirm();
                     }
                     else {
-                        this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), referenceParts));
+                        this.setWorkingParts({
+                            ...this.workingParts,
+                            ...referenceParts,
+                        });
                         // Multiple only needs date info so we can wipe out other fields like time.
                         if (multiple) {
                             this.setActiveParts(referenceParts, isActive);
                         }
                         else {
-                            this.setActiveParts(Object.assign(Object.assign({}, activePart), referenceParts));
+                            this.setActiveParts({
+                                ...activePart,
+                                ...referenceParts,
+                            });
                         }
                     }
                 }
@@ -1625,7 +1694,7 @@ export class Datetime {
                         await popoverRef.onWillDismiss();
                         this.isTimePopoverOpen = false;
                     }
-                } }, getLocalizedTime(locale, activePart, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time)),
+                } }, getLocalizedTime(locale, activePart, computedHourCycle, formatOptions?.time)),
             h("ion-popover", { alignment: "center", translucent: true, overlayIndex: 1, arrow: false, onWillPresent: (ev) => {
                     /**
                      * Intersection Observers do not consistently fire between Blink and Webkit
@@ -1648,7 +1717,6 @@ export class Datetime {
         ];
     }
     getHeaderSelectedDateText() {
-        var _a;
         const { activeParts, formatOptions, multiple, titleSelectedDatesFormatter } = this;
         const isArray = Array.isArray(activeParts);
         let headerText;
@@ -1665,7 +1733,7 @@ export class Datetime {
         }
         else {
             // for exactly 1 day selected (multiple set or not), show a formatted version of that
-            headerText = getLocalizedDateTime(this.locale, this.getActivePartsWithFallback(), (_a = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _a !== void 0 ? _a : { weekday: 'short', month: 'short', day: 'numeric' });
+            headerText = getLocalizedDateTime(this.locale, this.getActivePartsWithFallback(), formatOptions?.date ?? { weekday: 'short', month: 'short', day: 'numeric' });
         }
         return headerText;
     }
@@ -1754,17 +1822,19 @@ export class Datetime {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (h(Host, { key: '5e0b83cb88a87945eaae2f9402751819b75452ee', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
-                [mode]: true,
-                ['datetime-readonly']: readonly,
-                ['datetime-disabled']: disabled,
-                'show-month-and-year': shouldShowMonthAndYear,
-                'month-year-picker-open': monthYearPickerOpen,
-                [`datetime-presentation-${presentation}`]: true,
-                [`datetime-size-${size}`]: true,
-                [`datetime-prefer-wheel`]: hasWheelVariant,
-                [`datetime-grid`]: isGridStyle,
-            })) }, h("div", { key: '9f9ba72e9879525961b00abe342a7891492ca0ff', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+        return (h(Host, { key: '4e0b529a70924b065bcc6191e08550428b5a52a0', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: {
+                ...createColorClasses(color, {
+                    [mode]: true,
+                    ['datetime-readonly']: readonly,
+                    ['datetime-disabled']: disabled,
+                    'show-month-and-year': shouldShowMonthAndYear,
+                    'month-year-picker-open': monthYearPickerOpen,
+                    [`datetime-presentation-${presentation}`]: true,
+                    [`datetime-size-${size}`]: true,
+                    [`datetime-prefer-wheel`]: hasWheelVariant,
+                    [`datetime-grid`]: isGridStyle,
+                }),
+            } }, h("div", { key: 'cc9d1b92f960984cb0466d0003a240ace67da243', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     static get is() { return "ion-datetime"; }
     static get encapsulation() { return "shadow"; }
@@ -1801,13 +1871,12 @@ export class Datetime {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)."
+                    "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, refer to [theming](/docs/theming/basics)."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "color",
-                "defaultValue": "'primary'"
+                "attribute": "color"
             },
             "name": {
                 "type": "string",