@ionic/core 9.0.11-dev.11793726772.1e883321 → 9.0.11-dev.11793727726.19b906b5

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

@@ -349,11 +349,108 @@
 
 :host .calendar-day-wrapper {
   display: flex;
+  position: relative;
   align-items: center;
   justify-content: center;
   min-width: 0;
   min-height: 0;
   overflow: visible;
+  /**
+   * Create a stacking context so the range track
+   * (::before with z-index: -1) stays behind the
+   * day button but above the host background.
+   */
+  z-index: 0;
+}
+
+/**
+ * Each day in the range draws its own piece of the track with a
+ * ::before. In-range days fill the cell, while the start and end
+ * caps cover the half between the pill center and the next day.
+ *
+ * Grid columns are `1fr`, so cell edges land on fractional pixels
+ * and a cell's track can fall a hairline short of its neighbor's.
+ * Each day therefore extends 1px toward the next day in the range,
+ * which the next day paints over except inside such a gap.
+ *
+ * @prop --range-background: The background color of the range selection track.
+ */
+:host .calendar-day-wrapper-in-range::before,
+:host .calendar-day-wrapper-range-start::before,
+:host .calendar-day-wrapper-range-end::before {
+  position: absolute;
+  top: 50%;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  height: var(--range-track-height);
+  transform: translateY(-50%);
+  /**
+   * `--range-background` is translucent by default, so it is layered
+   * over the datetime background to paint an opaque track. Where two
+   * days overlap, the color stays the same instead of doubling up
+   * into a darker line.
+   */
+  background: linear-gradient(var(--range-background), var(--range-background)), linear-gradient(var(--background), var(--background));
+  content: "";
+  z-index: -1;
+}
+
+:host .calendar-day-wrapper-range-start::before {
+  inset-inline-start: 50%;
+}
+
+:host .calendar-day-wrapper-range-end::before {
+  inset-inline-end: 50%;
+}
+
+/**
+ * Only extend toward a day that draws the track as well. The last
+ * day of a week is followed by the next row, and the next day is
+ * unpainted when it ends the selection or is disabled inside the
+ * range, so extending there would leave a 1px nub.
+ */
+:host .calendar-day-wrapper-in-range:not(:nth-child(7n)):has(+ .calendar-day-wrapper-in-range)::before,
+:host .calendar-day-wrapper-in-range:not(:nth-child(7n)):has(+ .calendar-day-wrapper-range-end)::before,
+:host .calendar-day-wrapper-range-start:not(:nth-child(7n)):has(+ .calendar-day-wrapper-in-range)::before,
+:host .calendar-day-wrapper-range-start:not(:nth-child(7n)):has(+ .calendar-day-wrapper-range-end)::before {
+  inset-inline-end: -1px;
+}
+
+/**
+ * A range that continues onto the next week runs the track
+ * through the grid padding to the edge of the calendar.
+ */
+:host .calendar-day-wrapper-in-range:nth-child(7n)::before,
+:host .calendar-day-wrapper-range-start:nth-child(7n)::before {
+  inset-inline-end: calc(var(--range-track-edge-overflow, 0px) * -1);
+}
+
+:host .calendar-day-wrapper-in-range:nth-child(7n+1)::before,
+:host .calendar-day-wrapper-range-end:nth-child(7n+1)::before {
+  inset-inline-start: calc(var(--range-track-edge-overflow, 0px) * -1);
+}
+
+/**
+ * When a single day is both the start and end of the range,
+ * do not show a track since there is nothing to connect.
+ */
+:host .calendar-day-wrapper-range-start.calendar-day-wrapper-range-end::before {
+  display: none;
+}
+
+/**
+ * When the component is disabled, fade the whole grid once instead of
+ * fading each day. Fading a day makes it its own compositing group, so
+ * the 1px that each day extends toward the next would be painted twice
+ * and read as a darker seam. The day buttons drop their own disabled
+ * opacity so the grid is the only thing applying it.
+ */
+:host(.datetime-disabled.datetime-range) .calendar-month-grid {
+  opacity: 0.4;
+}
+
+:host(.datetime-disabled.datetime-range) .calendar-month-grid .calendar-day[disabled] {
+  opacity: 1;
 }
 
 /**
@@ -900,6 +997,29 @@ ion-picker {
   color: var(--ion-color-step-500, var(--ion-text-color-step-500, gray));
 }
 
+:host {
+  --range-background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.12);
+  --range-track-height: 42px;
+  --range-track-edge-overflow: 10px;
+}
+
+:host(.ion-color) {
+  --range-background: rgba(var(--ion-color-base-rgb), 0.12);
+}
+
+:host .calendar-day.calendar-day-range-start,
+:host .calendar-day.calendar-day-range-end {
+  border-radius: 50%;
+  background: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary-contrast, #fff);
+}
+
+:host(.ion-color) .calendar-day.calendar-day-range-start,
+:host(.ion-color) .calendar-day.calendar-day-range-end {
+  background: var(--ion-color-base);
+  color: var(--ion-color-contrast);
+}
+
 :host .datetime-time {
   -webkit-padding-start: 16px;
   padding-inline-start: 16px;

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

@@ -74,7 +74,7 @@ export const isDayDisabled = (refParts, minParts, maxParts, dayValues) => {
  * Given a locale, a date, the selected date(s), and today's date,
  * generate the state for a given calendar day button.
  */
-export const getCalendarDayState = (locale, refParts, activeParts, todayParts, minParts, maxParts, dayValues) => {
+export const getCalendarDayState = (locale, refParts, activeParts, todayParts, minParts, maxParts, dayValues, rangeParts) => {
     /**
      * activeParts signals what day(s) are currently selected in the datetime.
      * If multiple="true", this will be an array, but the logic in this util
@@ -90,6 +90,20 @@ export const getCalendarDayState = (locale, refParts, activeParts, todayParts, m
     const isActive = activePartsArray.find((parts) => isSameDay(refParts, parts)) !== undefined;
     const isToday = isSameDay(refParts, todayParts);
     const disabled = isDayDisabled(refParts, minParts, maxParts, dayValues);
+    /**
+     * Range state: determine if this day is the range start, end, or in between.
+     */
+    let isRangeStart = false;
+    let isRangeEnd = false;
+    let isInRange = false;
+    if (rangeParts) {
+        const { start, end } = rangeParts;
+        isRangeStart = isSameDay(refParts, start);
+        if (end) {
+            isRangeEnd = isSameDay(refParts, end);
+            isInRange = !disabled && !isRangeStart && !isRangeEnd && isAfter(refParts, start) && isBefore(refParts, end);
+        }
+    }
     /**
      * Note that we always return one object regardless of whether activeParts
      * was an array, since we pare down to one value for isActive.
@@ -98,6 +112,9 @@ export const getCalendarDayState = (locale, refParts, activeParts, todayParts, m
         disabled,
         isActive,
         isToday,
+        isRangeStart,
+        isRangeEnd,
+        isInRange,
         ariaSelected: isActive ? 'true' : null,
         ariaLabel: generateDayAriaLabel(locale, isToday, refParts),
         text: refParts.day != null ? getDay(locale, refParts) : null,

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

@@ -6,6 +6,7 @@ import { componentOnReady, addEventListener } from "../../utils/helpers";
 import { printIonError } from "../../utils/logging/index";
 import { createColorClasses } from "../../utils/theme";
 import { getIonTheme } from "../../global/ionic-global";
+import { isAfter } from "../datetime/utils/comparison";
 import { getLocalizedDateTime, getLocalizedTime } from "../datetime/utils/format";
 import { getHourCycle } from "../datetime/utils/helpers";
 import { parseDate } from "../datetime/utils/parse";
@@ -53,7 +54,7 @@ export class DatetimeButton {
             if (!datetimeEl) {
                 return;
             }
-            const { value, locale, formatOptions, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
+            const { value, locale, formatOptions, hourCycle, preferWheel, multiple, selectionMode, titleSelectedDatesFormatter, } = datetimeEl;
             const parsedValues = this.getParsedDateValues(value);
             /**
              * Both ion-datetime and ion-datetime-button default to today's date and
@@ -65,6 +66,8 @@ export class DatetimeButton {
             if (!parsedDatetimes) {
                 return;
             }
+            const isRangeMode = selectionMode === 'range';
+            const isMultipleMode = selectionMode === 'multiple' || (selectionMode === undefined && multiple);
             /**
              * If developers incorrectly use multiple="true"
              * with non "date" datetimes, then just select
@@ -74,11 +77,12 @@ export class DatetimeButton {
              */
             const firstParsedDatetime = parsedDatetimes[0];
             const computedHourCycle = getHourCycle(locale, hourCycle);
+            const dateFormatOptions = formatOptions?.date ?? { month: 'short', day: 'numeric', year: 'numeric' };
             this.dateText = this.timeText = undefined;
             switch (datetimePresentation) {
                 case 'date-time':
                 case 'time-date':
-                    const dateText = getLocalizedDateTime(locale, firstParsedDatetime, formatOptions?.date ?? { month: 'short', day: 'numeric', year: 'numeric' });
+                    const dateText = getLocalizedDateTime(locale, firstParsedDatetime, dateFormatOptions);
                     const timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions?.time);
                     if (preferWheel) {
                         this.dateText = `${dateText} ${timeText}`;
@@ -89,7 +93,31 @@ export class DatetimeButton {
                     }
                     break;
                 case 'date':
-                    if (multiple && parsedValues.length !== 1) {
+                    if (isRangeMode && parsedValues.length >= 2) {
+                        /**
+                         * Use the first and last entries in date order, matching
+                         * how ion-datetime reads a range value.
+                         */
+                        let startIndex = 0;
+                        let endIndex = parsedValues.length - 1;
+                        if (isAfter(parsedDatetimes[startIndex], parsedDatetimes[endIndex])) {
+                            [startIndex, endIndex] = [endIndex, startIndex];
+                        }
+                        const rangeValues = [parsedValues[startIndex], parsedValues[endIndex]];
+                        const startDate = getLocalizedDateTime(locale, parsedDatetimes[startIndex], dateFormatOptions);
+                        const endDate = getLocalizedDateTime(locale, parsedDatetimes[endIndex], dateFormatOptions);
+                        let rangeText = `${startDate} - ${endDate}`;
+                        if (titleSelectedDatesFormatter !== undefined) {
+                            try {
+                                rangeText = titleSelectedDatesFormatter(rangeValues);
+                            }
+                            catch (e) {
+                                printIonError('[ion-datetime-button] - Exception in provided `titleSelectedDatesFormatter`:', e);
+                            }
+                        }
+                        this.dateText = rangeText;
+                    }
+                    else if (isMultipleMode && parsedValues.length !== 1) {
                         let headerText = `${parsedValues.length} days`; // default/fallback for multiple selection
                         if (titleSelectedDatesFormatter !== undefined) {
                             try {
@@ -102,7 +130,7 @@ export class DatetimeButton {
                         this.dateText = headerText;
                     }
                     else {
-                        this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, formatOptions?.date ?? { month: 'short', day: 'numeric', year: 'numeric' });
+                        this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, dateFormatOptions);
                     }
                     break;
                 case 'time':
@@ -339,11 +367,11 @@ export class DatetimeButton {
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
         const theme = getIonTheme(this);
-        return (h(Host, { key: '73ba9456313d46e63db37c48b23b38e8e1f88ec6', class: createColorClasses(color, {
+        return (h(Host, { key: 'e022c5c280d4f889c1ba7ca3e96b38063c5add30', class: createColorClasses(color, {
                 [theme]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,
-            }) }, dateText && (h("button", { key: '51f70f2d08823ccd399976c09152c278e0ef108e', 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: '8422d6ca39d3bdecbefe6686afb9c2bcdb271a54', name: "date-target" }, dateText), theme === 'md' && h("ion-ripple-effect", { key: 'f4c1c9c6bcdf772eb326371b9ab3795f7fbc0848' }))), timeText && (h("button", { key: '709a8bc9d0231bfc3c580bcca9065ccc66f4b7da', 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: '2860f54f5a73aa3a42397a1a72619d6369a79025', name: "time-target" }, timeText), theme === 'md' && h("ion-ripple-effect", { key: '306f594bffa84fea1f5e2528cab5ee56c0364e34' })))));
+            }) }, dateText && (h("button", { key: 'b1267d98cefbce7666b0cafa083c42f3116e2398', 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: '3fdfa6adf73ee1e35cdb7f318f1d1ddcf4ab4d7b', name: "date-target" }, dateText), theme === 'md' && h("ion-ripple-effect", { key: 'a832d63c77fffe8d7e0d28827bbb469726373d1e' }))), timeText && (h("button", { key: 'c589bdf2b8221609713f0d3554494dd08a1f2e5b', 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: '10769ddadf7933d78744facaaa153bb413ff484a', name: "time-target" }, timeText), theme === 'md' && h("ion-ripple-effect", { key: '7832de031919ddfb312528b45a3dc8e1c20edea6' })))));
     }
     static get is() { return "ion-datetime-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/modal.ionic.css

@@ -208,8 +208,8 @@ ion-backdrop {
 }
 
 :host {
-  --background: var(--token-bg-surface-elevation-3, var(--token-primitives-base-white, #ffffff));
-  --box-shadow: var(--token-elevation-4, var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-15, 15px) var(--token-shadow-blur-48, 48px) var(--token-shadow-spread-0, 0px) var(--token-shadow-7, rgba(0, 0, 0, 0.18)), var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-3, 3px) var(--token-shadow-blur-12, 12px) var(--token-shadow-spread-0, 0px) var(--token-shadow-5, rgba(0, 0, 0, 0.12)));
+  --background: var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));
+  --box-shadow: var(--token-elevation-3, var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-6, 6px) var(--token-shadow-blur-32, 32px) var(--token-shadow-spread-0, 0px) var(--token-shadow-6, rgba(0, 0, 0, 0.16)), var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-2, 2px) var(--token-shadow-blur-7, 7px) var(--token-shadow-spread-0, 0px) var(--token-shadow-2, rgba(0, 0, 0, 0.05)));
   --backdrop-opacity: 0.7;
   color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
 }

package/dist/collection/components/popover/popover.ionic.css

@@ -262,8 +262,7 @@
 :host {
   --width: 250px;
   --max-height: 90%;
-  --background: var(--token-bg-surface-elevation-3, var(--token-primitives-base-white, #ffffff));
-  --box-shadow: var(--token-elevation-3, var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-6, 6px) var(--token-shadow-blur-32, 32px) var(--token-shadow-spread-0, 0px) var(--token-shadow-6, rgba(0, 0, 0, 0.16)), var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-2, 2px) var(--token-shadow-blur-7, 7px) var(--token-shadow-spread-0, 0px) var(--token-shadow-2, rgba(0, 0, 0, 0.05)));
+  --box-shadow: var(--token-elevation-4, var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-15, 15px) var(--token-shadow-blur-48, 48px) var(--token-shadow-spread-0, 0px) var(--token-shadow-7, rgba(0, 0, 0, 0.18)), var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-3, 3px) var(--token-shadow-blur-12, 12px) var(--token-shadow-spread-0, 0px) var(--token-shadow-5, rgba(0, 0, 0, 0.12)));
   --backdrop-opacity: 0.3;
 }
 

package/dist/collection/components/toast/toast.ionic.css

@@ -235,7 +235,7 @@
   }
 }
 :host {
-  --box-shadow: var(--token-elevation-2, var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-8, 8px) var(--token-shadow-blur-25, 25px) var(--token-shadow-spread-0, 0px) var(--token-shadow-4, rgba(0, 0, 0, 0.08)), var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-1, 1px) var(--token-shadow-blur-5, 5px) var(--token-shadow-spread-0, 0px) var(--token-shadow-2, rgba(0, 0, 0, 0.05)));
+  --box-shadow: var(--token-elevation-4, var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-15, 15px) var(--token-shadow-blur-48, 48px) var(--token-shadow-spread-0, 0px) var(--token-shadow-7, rgba(0, 0, 0, 0.18)), var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-3, 3px) var(--token-shadow-blur-12, 12px) var(--token-shadow-spread-0, 0px) var(--token-shadow-5, rgba(0, 0, 0, 0.12)));
   --max-width: 343px;
   --start: var(--token-space-200, var(--token-scale-200, 8px));
   --end: var(--token-space-200, var(--token-scale-200, 8px));