@ionic/core 7.3.4-dev.11694438635.14743086 → 7.3.4-dev.11694441708.198de185

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

@@ -33,17 +33,16 @@ import { getCalendarDayState, getHighlightStyles, isDayDisabled, isMonthDisabled
  *
  * @part month-year-button - The button that opens the month/year picker when
  * using a grid style layout.
- *
- * @part calendar-day - The individual buttons that display a day inside of the datetime
- * calendar.
- * @part calendar-day active - The currently selected calendar day.
- * @part calendar-day today - The calendar day that contains the current day.
- * @part calendar-day disabled - The calendar day that is disabled.
  */
 export class Datetime {
   constructor() {
     this.inputId = `ion-dt-${datetimeIds++}`;
     this.prevPresentation = null;
+    /**
+     * Duplicate reference to `activeParts` that does not trigger a re-render of the component.
+     * Allows caching an instance of the `activeParts` in between render cycles.
+     */
+    this.activePartsClone = [];
     this.warnIfIncorrectValueUsage = () => {
       const { multiple, value } = this;
       if (!multiple && Array.isArray(value)) {
@@ -71,9 +70,9 @@ export class Datetime {
      * data. This should be used when rendering an
      * interface in an environment where the `value`
      * may not be set. This function works
-     * by returning the first selected date and then
-     * falling back to defaultParts if no active date
-     * is selected.
+     * by returning the first selected date in
+     * "activePartsClone" and then falling back to
+     * defaultParts if no active date is selected.
      */
     this.getActivePartsWithFallback = () => {
       var _a;
@@ -81,8 +80,8 @@ export class Datetime {
       return (_a = this.getActivePart()) !== null && _a !== void 0 ? _a : defaultParts;
     };
     this.getActivePart = () => {
-      const { activeParts } = this;
-      return Array.isArray(activeParts) ? activeParts[0] : activeParts;
+      const { activePartsClone } = this;
+      return Array.isArray(activePartsClone) ? activePartsClone[0] : activePartsClone;
     };
     this.closeParentOverlay = () => {
       const popoverOrModal = this.el.closest('ion-modal, ion-popover');
@@ -94,7 +93,7 @@ export class Datetime {
       this.workingParts = Object.assign({}, parts);
     };
     this.setActiveParts = (parts, removeDate = false) => {
-      const { multiple, minParts, maxParts, activeParts } = this;
+      const { multiple, minParts, maxParts, activePartsClone } = this;
       /**
        * When setting the active parts, it is possible
        * to set invalid data. For example,
@@ -108,7 +107,16 @@ export class Datetime {
       const validatedParts = validateParts(parts, minParts, maxParts);
       this.setWorkingParts(validatedParts);
       if (multiple) {
-        const activePartsArray = Array.isArray(activeParts) ? activeParts : [activeParts];
+        /**
+         * 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, validatedParts));
         }
@@ -233,7 +241,7 @@ export class Datetime {
       /**
        * Get the number of padding days so
        * we know how much to offset our next selector by
-       * to grab the correct calendar-day element.
+       * to grab the correct calenday-day element.
        */
       const padding = currentMonth.querySelectorAll('.calendar-day-padding');
       const { day } = this.workingParts;
@@ -244,7 +252,7 @@ export class Datetime {
        * Get the calendar day element
        * and focus it.
        */
-      const dayEl = currentMonth.querySelector(`.calendar-day-wrapper:nth-of-type(${padding.length + day}) .calendar-day`);
+      const dayEl = currentMonth.querySelector(`.calendar-day:nth-of-type(${padding.length + day})`);
       if (dayEl) {
         dayEl.focus();
       }
@@ -325,19 +333,6 @@ export class Datetime {
           const monthBox = month.getBoundingClientRect();
           if (Math.abs(monthBox.x - box.x) > 2)
             return;
-          /**
-           * If we're force-rendering a month, assume we've
-           * scrolled to that and return it.
-           *
-           * If forceRenderDate is ever used in a context where the
-           * forced month is not immediately auto-scrolled to, this
-           * should be updated to also check whether `month` has the
-           * same month and year as the forced date.
-           */
-          const { forceRenderDate } = this;
-          if (forceRenderDate !== undefined) {
-            return { month: forceRenderDate.month, year: forceRenderDate.year, day: forceRenderDate.day };
-          }
           /**
            * From here, we can determine if the start
            * month or the end month was scrolled into view.
@@ -392,9 +387,6 @@ export class Datetime {
             this.setWorkingParts(Object.assign(Object.assign({}, this.workingParts), { month, day: day, year }));
             calendarBodyRef.scrollLeft = workingMonth.clientWidth * (isRTL(this.el) ? -1 : 1);
             calendarBodyRef.style.removeProperty('overflow');
-            if (this.resolveForceDateScrolling) {
-              this.resolveForceDateScrolling();
-            }
           });
         };
         /**
@@ -449,17 +441,10 @@ export class Datetime {
       }
     };
     this.processValue = (value) => {
-      const hasValue = value !== null && value !== undefined && (!Array.isArray(value) || value.length > 0);
+      const hasValue = value !== null && value !== undefined;
       const valueToProcess = hasValue ? parseDate(value) : this.defaultParts;
-      const { minParts, maxParts, workingParts, el } = this;
+      const { minParts, maxParts } = this;
       this.warnIfIncorrectValueUsage();
-      /**
-       * Return early if the value wasn't parsed correctly, such as
-       * if an improperly formatted date string was provided.
-       */
-      if (!valueToProcess) {
-        return;
-      }
       /**
        * Datetime should only warn of out of bounds values
        * if set by the user. If the `value` is undefined,
@@ -477,9 +462,16 @@ export class Datetime {
        * that the values don't necessarily have to be in order.
        */
       const singleValue = Array.isArray(valueToProcess) ? valueToProcess[0] : valueToProcess;
-      const targetValue = clampDate(singleValue, minParts, maxParts);
-      const { month, day, year, hour, minute } = targetValue;
+      const { month, day, year, hour, minute } = clampDate(singleValue, minParts, maxParts);
       const ampm = parseAmPm(hour);
+      this.setWorkingParts({
+        month,
+        day,
+        year,
+        hour,
+        minute,
+        ampm,
+      });
       /**
        * Since `activeParts` indicates a value that
        * been explicitly selected either by the
@@ -509,62 +501,6 @@ export class Datetime {
          */
         this.activeParts = [];
       }
-      /**
-       * Only animate if:
-       * 1. We're using grid style (wheel style pickers should just jump to new value)
-       * 2. The month and/or year actually changed, and both are defined (otherwise there's nothing to animate to)
-       * 3. The calendar body is visible (prevents animation when in collapsed datetime-button, for example)
-       * 4. The month/year picker is not open (since you wouldn't see the animation anyway)
-       */
-      const didChangeMonth = (month !== undefined && month !== workingParts.month) || (year !== undefined && year !== workingParts.year);
-      const bodyIsVisible = el.classList.contains('datetime-ready');
-      const { isGridStyle, showMonthAndYear } = this;
-      if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
-        this.animateToDate(targetValue);
-      }
-      else {
-        /**
-         * We only need to do this if we didn't just animate to a new month,
-         * since that calls prevMonth/nextMonth which calls setWorkingParts for us.
-         */
-        this.setWorkingParts({
-          month,
-          day,
-          year,
-          hour,
-          minute,
-          ampm,
-        });
-      }
-    };
-    this.animateToDate = async (targetValue) => {
-      const { workingParts } = this;
-      /**
-       * Tell other render functions that we need to force the
-       * target month to appear in place of the actual next/prev month.
-       * Because this is a State variable, a rerender will be triggered
-       * automatically, updating the rendered months.
-       */
-      this.forceRenderDate = targetValue;
-      /**
-       * Flag that we've started scrolling to the forced date.
-       * The resolve function will be called by the datetime's
-       * scroll listener when it's done updating everything.
-       * This is a replacement for making prev/nextMonth async,
-       * since the logic we're waiting on is in a listener.
-       */
-      const forceDateScrollingPromise = new Promise((resolve) => {
-        this.resolveForceDateScrolling = resolve;
-      });
-      /**
-       * Animate smoothly to the forced month. This will also update
-       * workingParts and correct the surrounding months for us.
-       */
-      const targetMonthIsBefore = isBefore(targetValue, workingParts);
-      targetMonthIsBefore ? this.prevMonth() : this.nextMonth();
-      await forceDateScrollingPromise;
-      this.resolveForceDateScrolling = undefined;
-      this.forceRenderDate = undefined;
     };
     this.onFocus = () => {
       this.ionFocus.emit();
@@ -620,7 +556,6 @@ export class Datetime {
       ampm: 'pm',
     };
     this.isTimePopoverOpen = false;
-    this.forceRenderDate = undefined;
     this.color = 'primary';
     this.name = this.inputId;
     this.disabled = false;
@@ -660,11 +595,6 @@ export class Datetime {
   maxChanged() {
     this.processMaxParts();
   }
-  get isGridStyle() {
-    const { presentation, preferWheel } = this;
-    const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
-    return hasDatePresentation && !preferWheel;
-  }
   yearValuesChanged() {
     this.parsedYearValues = convertToArrayOfNumbers(this.yearValues);
   }
@@ -680,13 +610,51 @@ export class Datetime {
   minuteValuesChanged() {
     this.parsedMinuteValues = convertToArrayOfNumbers(this.minuteValues);
   }
+  activePartsChanged() {
+    this.activePartsClone = this.activeParts;
+  }
   /**
    * Update the datetime value when the value changes
    */
-  async valueChanged() {
-    const { value } = this;
+  valueChanged() {
+    const { value, minParts, maxParts, workingParts } = this;
     if (this.hasValue()) {
-      this.processValue(value);
+      this.warnIfIncorrectValueUsage();
+      /**
+       * Clones the value of the `activeParts` to the private clone, to update
+       * the date display on the current render cycle without causing another render.
+       *
+       * 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 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.ionValueChange.emit({ value });
@@ -889,6 +857,8 @@ export class Datetime {
         printIonWarning('The highlightedDates property is not supported with preferWheel="true".', el);
       }
     }
+    this.processMinParts();
+    this.processMaxParts();
     const hourValues = (this.parsedHourValues = convertToArrayOfNumbers(this.hourValues));
     const minuteValues = (this.parsedMinuteValues = convertToArrayOfNumbers(this.minuteValues));
     const monthValues = (this.parsedMonthValues = convertToArrayOfNumbers(this.monthValues));
@@ -896,8 +866,6 @@ export class Datetime {
     const dayValues = (this.parsedDayValues = convertToArrayOfNumbers(this.dayValues));
     const todayParts = (this.todayParts = parseDate(getToday()));
     this.defaultParts = getClosestValidDate(todayParts, monthValues, dayValues, yearValues, hourValues, minuteValues);
-    this.processMinParts();
-    this.processMaxParts();
     this.processValue(this.value);
     this.emitStyle();
   }
@@ -1282,7 +1250,7 @@ export class Datetime {
       const { el, highlightedDates, isDateEnabled, multiple } = this;
       const referenceParts = { month, day, year };
       const isCalendarPadding = day === null;
-      const { isActive, isToday, ariaLabel, ariaSelected, disabled, text } = getCalendarDayState(this.locale, referenceParts, this.activeParts, this.todayParts, this.minParts, this.maxParts, this.parsedDayValues);
+      const { isActive, isToday, ariaLabel, ariaSelected, disabled, text } = getCalendarDayState(this.locale, referenceParts, this.activePartsClone, this.todayParts, this.minParts, this.maxParts, this.parsedDayValues);
       const dateIsoString = convertDataToISO(referenceParts);
       let isCalDayDisabled = isCalMonthDisabled || disabled;
       if (!isCalDayDisabled && isDateEnabled !== undefined) {
@@ -1306,30 +1274,14 @@ export class Datetime {
       if (highlightedDates !== undefined && !isActive && day !== null) {
         dateStyle = getHighlightStyles(highlightedDates, dateIsoString, el);
       }
-      let dateParts = undefined;
-      // "Filler days" at the beginning of the grid should not get the calendar day
-      // CSS parts added to them
-      if (!isCalendarPadding) {
-        dateParts = `calendar-day${isActive ? ' active' : ''}${isToday ? ' today' : ''}${isCalDayDisabled ? ' disabled' : ''}`;
-      }
-      return (h("div", { class: "calendar-day-wrapper" }, h("button", {
-        // We need to use !important for the inline styles here because
-        // otherwise the CSS shadow parts will override these styles.
-        // See https://github.com/WICG/webcomponents/issues/847
-        // Both the CSS shadow parts and highlightedDates styles are
-        // provided by the developer, but highlightedDates styles should
-        // always take priority.
-        ref: (el) => {
-          if (el) {
-            el.style.setProperty('color', `${dateStyle ? dateStyle.textColor : ''}`, 'important');
-            el.style.setProperty('background-color', `${dateStyle ? dateStyle.backgroundColor : ''}`, 'important');
-          }
-        }, tabindex: "-1", "data-day": day, "data-month": month, "data-year": year, "data-index": index, "data-day-of-week": dayOfWeek, disabled: isCalDayDisabled, class: {
+      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': isCalendarPadding,
           'calendar-day': true,
           'calendar-day-active': isActive,
           'calendar-day-today': isToday,
-        }, part: dateParts, "aria-hidden": isCalendarPadding ? 'true' : null, "aria-selected": ariaSelected, "aria-label": ariaLabel, onClick: () => {
+        }, style: dateStyle && {
+          color: dateStyle.textColor,
+        }, "aria-hidden": isCalendarPadding ? 'true' : null, "aria-selected": ariaSelected, "aria-label": ariaLabel, onClick: () => {
           if (isCalendarPadding) {
             return;
           }
@@ -1349,12 +1301,13 @@ export class Datetime {
               day,
               year }));
           }
-        }
-      }, text)));
+        } }, h("div", { class: "calendar-day-highlight", style: {
+          backgroundColor: dateStyle === null || dateStyle === void 0 ? void 0 : dateStyle.backgroundColor,
+        } }), text));
     }))));
   }
   renderCalendarBody() {
-    return (h("div", { class: "calendar-body ion-focusable", ref: (el) => (this.calendarBodyRef = el), tabindex: "0" }, generateMonths(this.workingParts, this.forceRenderDate).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);
     })));
   }
@@ -1509,13 +1462,14 @@ export class Datetime {
     }
   }
   render() {
-    const { name, value, disabled, el, color, readonly, showMonthAndYear, preferWheel, presentation, size, isGridStyle, } = this;
+    const { name, value, disabled, el, color, readonly, showMonthAndYear, preferWheel, presentation, size } = this;
     const mode = getIonMode(this);
     const isMonthAndYearPresentation = presentation === 'year' || presentation === 'month' || presentation === 'month-year';
     const shouldShowMonthAndYear = showMonthAndYear || isMonthAndYearPresentation;
     const monthYearPickerOpen = showMonthAndYear && !isMonthAndYearPresentation;
     const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
     const hasWheelVariant = hasDatePresentation && preferWheel;
+    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,
@@ -1526,7 +1480,7 @@ export class Datetime {
         [`datetime-presentation-${presentation}`]: true,
         [`datetime-size-${size}`]: true,
         [`datetime-prefer-wheel`]: hasWheelVariant,
-        [`datetime-grid`]: isGridStyle,
+        [`datetime-grid`]: hasGrid,
       })) }, this.renderDatetime(mode)));
   }
   static get is() { return "ion-datetime"; }
@@ -2085,8 +2039,7 @@ export class Datetime {
       "showMonthAndYear": {},
       "activeParts": {},
       "workingParts": {},
-      "isTimePopoverOpen": {},
-      "forceRenderDate": {}
+      "isTimePopoverOpen": {}
     };
   }
   static get events() {
@@ -2314,6 +2267,9 @@ export class Datetime {
       }, {
         "propName": "minuteValues",
         "methodName": "minuteValuesChanged"
+      }, {
+        "propName": "activeParts",
+        "methodName": "activePartsChanged"
       }, {
         "propName": "value",
         "methodName": "valueChanged"

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

@@ -1,3 +1,36 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 :host {
   /**
    * @prop --background: The primary background of the datetime component.
@@ -281,8 +314,6 @@ ion-picker-column-internal {
 }
 
 :host .calendar-body .calendar-month {
-  display: flex;
-  flex-flow: column;
   /**
    * Swiping should snap to at
    * most one month at a time.
@@ -316,21 +347,11 @@ ion-picker-column-internal {
   grid-template-columns: repeat(7, 1fr);
 }
 
-:host .calendar-day-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 0;
-  min-height: 0;
-  overflow: visible;
-}
-
 /**
  * Center the day text vertically
  * and horizontally within its grid cell.
  */
 :host .calendar-day {
-  border-radius: 50%;
   -webkit-padding-start: 0px;
   padding-inline-start: 0px;
   -webkit-padding-end: 0px;
@@ -362,9 +383,18 @@ ion-picker-column-internal {
   opacity: 0.4;
 }
 
-.calendar-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);
+.calendar-day-highlight {
+  border-radius: 32px;
+  -webkit-padding-start: 4px;
+  padding-inline-start: 4px;
+  -webkit-padding-end: 4px;
+  padding-inline-end: 4px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  position: absolute;
+  width: 32px;
+  height: 32px;
+  z-index: -1;
 }
 
 :host .datetime-time {
@@ -418,6 +448,39 @@ ion-picker-column-internal {
   --color: var(--ion-color-base);
 }
 
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 :host {
   --background: var(--ion-color-step-100, #ffffff);
   --title-color: var(--ion-color-contrast);
@@ -483,21 +546,32 @@ ion-picker-column-internal {
 }
 
 :host .calendar-day {
-  width: 42px;
-  min-width: 42px;
-  height: 42px;
+  -webkit-padding-start: 0px;
+  padding-inline-start: 0px;
+  -webkit-padding-end: 0;
+  padding-inline-end: 0;
+  padding-top: 13px;
+  padding-bottom: 13px;
   font-size: 14px;
 }
 
+.calendar-day:focus .calendar-day-highlight {
+  background: rgba(var(--ion-color-base-rgb), 0.2);
+  box-shadow: 0px 0px 0px 4px 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 {
-  border: 1px solid var(--ion-color-base);
   color: var(--ion-color-base);
 }
 
+.calendar-day.calendar-day-today .calendar-day-highlight {
+  border: 1px solid var(--ion-color-base);
+}
+
 /**
  * Day that is not today but
  * is selected should have ion-color for
@@ -507,7 +581,7 @@ ion-picker-column-internal {
   color: var(--ion-color-contrast);
 }
 
-.calendar-day.calendar-day-active {
+.calendar-day.calendar-day-active .calendar-day-highlight {
   border: 1px solid var(--ion-color-base);
   background: var(--ion-color-base);
 }

package/dist/collection/components/datetime/test/basic/datetime.e2e.js

@@ -348,28 +348,3 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
     });
   });
 });
-/**
- * This behavior does not differ across
- * directions.
- */
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('datetime: focus'), () => {
-    test('should focus the selected day and then the day after', async ({ page }) => {
-      await page.setContent(`
-        <ion-datetime value="2023-08-01"></ion-datetime>
-      `, config);
-      await page.waitForSelector('.datetime-ready');
-      const datetime = page.locator('ion-datetime');
-      const day = datetime.locator(`.calendar-day[data-day='1'][data-month='8']`);
-      await day.focus();
-      await page.waitForChanges();
-      await expect(day).toBeFocused();
-      await expect(datetime).toHaveScreenshot(screenshot(`datetime-focus-selected-calendar-day`));
-      await page.keyboard.press('ArrowRight');
-      await page.waitForChanges();
-      const nextDay = datetime.locator(`.calendar-day[data-day='2'][data-month='8']`);
-      await expect(nextDay).toBeFocused();
-      await expect(datetime).toHaveScreenshot(screenshot(`datetime-focus-calendar-day`));
-    });
-  });
-});

package/dist/collection/components/datetime/test/color/datetime.e2e.js

@@ -10,7 +10,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('datetime: color'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto('/src/components/datetime/test/color', config);
-      const datetime = page.locator('#color-datetime');
+      const datetime = page.locator('ion-datetime');
       await expect(datetime).toHaveScreenshot(screenshot(`datetime-color`));
       await page.evaluate(() => document.body.classList.toggle('dark'));
       await page.waitForChanges();

package/dist/collection/components/datetime/test/custom/datetime.e2e.js

@@ -13,7 +13,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-wheel`));
     });
     test('should allow styling time picker in grid style datetimes', async ({ page }) => {
-      const timeButton = page.locator('#custom-grid .time-body');
+      const timeButton = page.locator('ion-datetime .time-body');
       const popover = page.locator('.popover-viewport');
       const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
       await expect(timeButton).toHaveScreenshot(screenshot(`datetime-custom-time-button`));
@@ -22,31 +22,5 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await expect(popover).toHaveScreenshot(screenshot(`datetime-custom-time-picker`));
       await expect(timeButton).toHaveScreenshot(screenshot(`datetime-custom-time-button-active`));
     });
-    test('should allow styling calendar days in grid style datetimes', async ({ page }) => {
-      const datetime = page.locator('#custom-calendar-days');
-      await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-calendar-days`));
-    });
-  });
-});
-/**
- * This behavior does not differ across
- * directions.
- */
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('datetime: custom focus'), () => {
-    test('should focus the selected day and then the day after', async ({ page }) => {
-      await page.goto(`/src/components/datetime/test/custom`, config);
-      const datetime = page.locator('#custom-calendar-days');
-      const day = datetime.locator(`.calendar-day[data-day='15'][data-month='6']`);
-      await day.focus();
-      await page.waitForChanges();
-      await expect(day).toBeFocused();
-      await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-focus-selected-calendar-day`));
-      await page.keyboard.press('ArrowRight');
-      await page.waitForChanges();
-      const nextDay = datetime.locator(`.calendar-day[data-day='16'][data-month='6']`);
-      await expect(nextDay).toBeFocused();
-      await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-focus-calendar-day`));
-    });
   });
 });