@ionic/core 9.0.11-dev.11793726772.1e883321 → 9.0.11-dev.11793728481.1fc40367

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/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-11-03T17:29:33",
+  "timestamp": "2026-11-03T17:58:50",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.45.2",
@@ -10737,164 +10737,47 @@
         {
           "name": "--background",
           "annotation": "prop",
-          "docs": "Background of the content",
-          "mode": "ionic"
-        },
-        {
-          "name": "--background",
-          "annotation": "prop",
-          "docs": "Background of the content",
-          "mode": "ios"
-        },
-        {
-          "name": "--background",
-          "annotation": "prop",
-          "docs": "Background of the content",
-          "mode": "md"
-        },
-        {
-          "name": "--color",
-          "annotation": "prop",
-          "docs": "Color of the content",
-          "mode": "ionic"
+          "docs": "Background of the content"
         },
         {
           "name": "--color",
           "annotation": "prop",
-          "docs": "Color of the content",
-          "mode": "ios"
-        },
-        {
-          "name": "--color",
-          "annotation": "prop",
-          "docs": "Color of the content",
-          "mode": "md"
-        },
-        {
-          "name": "--keyboard-offset",
-          "annotation": "prop",
-          "docs": "Keyboard offset of the content",
-          "mode": "ionic"
+          "docs": "Color of the content"
         },
         {
           "name": "--keyboard-offset",
           "annotation": "prop",
-          "docs": "Keyboard offset of the content",
-          "mode": "ios"
-        },
-        {
-          "name": "--keyboard-offset",
-          "annotation": "prop",
-          "docs": "Keyboard offset of the content",
-          "mode": "md"
-        },
-        {
-          "name": "--offset-bottom",
-          "annotation": "prop",
-          "docs": "Offset bottom of the content",
-          "mode": "ionic"
-        },
-        {
-          "name": "--offset-bottom",
-          "annotation": "prop",
-          "docs": "Offset bottom of the content",
-          "mode": "ios"
+          "docs": "Keyboard offset of the content"
         },
         {
           "name": "--offset-bottom",
           "annotation": "prop",
-          "docs": "Offset bottom of the content",
-          "mode": "md"
-        },
-        {
-          "name": "--offset-top",
-          "annotation": "prop",
-          "docs": "Offset top of the content",
-          "mode": "ionic"
-        },
-        {
-          "name": "--offset-top",
-          "annotation": "prop",
-          "docs": "Offset top of the content",
-          "mode": "ios"
+          "docs": "Offset bottom of the content"
         },
         {
           "name": "--offset-top",
           "annotation": "prop",
-          "docs": "Offset top of the content",
-          "mode": "md"
-        },
-        {
-          "name": "--padding-bottom",
-          "annotation": "prop",
-          "docs": "Bottom padding of the content",
-          "mode": "ionic"
-        },
-        {
-          "name": "--padding-bottom",
-          "annotation": "prop",
-          "docs": "Bottom padding of the content",
-          "mode": "ios"
+          "docs": "Offset top of the content"
         },
         {
           "name": "--padding-bottom",
           "annotation": "prop",
-          "docs": "Bottom padding of the content",
-          "mode": "md"
+          "docs": "Bottom padding of the content"
         },
         {
           "name": "--padding-end",
           "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content",
-          "mode": "ionic"
-        },
-        {
-          "name": "--padding-end",
-          "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content",
-          "mode": "ios"
-        },
-        {
-          "name": "--padding-end",
-          "annotation": "prop",
-          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content",
-          "mode": "md"
-        },
-        {
-          "name": "--padding-start",
-          "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content",
-          "mode": "ionic"
+          "docs": "Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content"
         },
         {
           "name": "--padding-start",
           "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content",
-          "mode": "ios"
-        },
-        {
-          "name": "--padding-start",
-          "annotation": "prop",
-          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content",
-          "mode": "md"
-        },
-        {
-          "name": "--padding-top",
-          "annotation": "prop",
-          "docs": "Top padding of the content",
-          "mode": "ionic"
-        },
-        {
-          "name": "--padding-top",
-          "annotation": "prop",
-          "docs": "Top padding of the content",
-          "mode": "ios"
+          "docs": "Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content"
         },
         {
           "name": "--padding-top",
           "annotation": "prop",
-          "docs": "Top padding of the content",
-          "mode": "md"
+          "docs": "Top padding of the content"
         }
       ],
       "slots": [
@@ -11014,6 +10897,22 @@
           "name": "part",
           "text": "calendar-day disabled - The calendar day that is disabled."
         },
+        {
+          "name": "part",
+          "text": "range-start - The calendar day button that is the start of a range selection."
+        },
+        {
+          "name": "part",
+          "text": "range-end - The calendar day button that is the end of a range selection."
+        },
+        {
+          "name": "part",
+          "text": "range-selection - The calendar day button that is part of a range selection (includes start and end)."
+        },
+        {
+          "name": "part",
+          "text": "range-track - The track that connects the start and end days of a range selection."
+        },
         {
           "name": "part",
           "text": "datetime-header - The datetime header contains the content for the `title` slot and the selected date."
@@ -11246,6 +11145,35 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "endDateLabel",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "end-date-label",
+          "reflectToAttr": false,
+          "docs": "The text shown in the datetime header when the end of the range\nis empty, also used by screen readers to announce the end date.\nOnly applies when `selectionMode=\"range\"`.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'End date'"
+            }
+          ],
+          "default": "'End date'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "firstDayOfWeek",
           "type": "number",
@@ -11642,12 +11570,17 @@
           "reflectToAttr": false,
           "docs": "If `true`, multiple dates can be selected at once. Only\napplies to `presentation=\"date\"` and `preferWheel=\"false\"`.",
           "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "Use `selectionMode=\"multiple\"` instead."
+            },
             {
               "name": "default",
               "text": "false"
             }
           ],
           "default": "false",
+          "deprecation": "Use `selectionMode=\"multiple\"` instead.",
           "values": [
             {
               "type": "boolean"
@@ -11806,6 +11739,37 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "selectionMode",
+          "type": "\"multiple\" | \"range\" | undefined",
+          "complexType": {
+            "original": "'multiple' | 'range'",
+            "resolved": "\"multiple\" | \"range\" | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "selection-mode",
+          "reflectToAttr": false,
+          "docs": "Controls the date selection behavior.\n`'multiple'` enables selecting multiple individual dates.\n`'range'` enables selecting a start and end date range.\nWhen unset, single-date selection is used.\n\nRange selection only works with `presentation=\"date\"` and `preferWheel=\"false\"`.",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "multiple",
+              "type": "string"
+            },
+            {
+              "value": "range",
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "showAdjacentDays",
           "type": "boolean",
@@ -11985,6 +11949,35 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "startDateLabel",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "start-date-label",
+          "reflectToAttr": false,
+          "docs": "The text shown in the datetime header when the start of the range\nis empty, also used by screen readers to announce the start date.\nOnly applies when `selectionMode=\"range\"`.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'Start date'"
+            }
+          ],
+          "default": "'Start date'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "theme",
           "type": "\"ios\" | \"md\" | \"ionic\"",
@@ -12166,6 +12159,12 @@
               "Promise": {
                 "location": "global",
                 "id": "global::Promise"
+              },
+              "DatetimeParts": {
+                "location": "import",
+                "path": "./datetime-interface",
+                "id": "src/components/datetime/datetime-interface.ts::DatetimeParts",
+                "referenceLocation": "DatetimeParts"
               }
             },
             "return": "Promise<void>"
@@ -12335,6 +12334,24 @@
           "docs": "The width of the ring around the focused element.",
           "mode": "ionic"
         },
+        {
+          "name": "--range-background",
+          "annotation": "prop",
+          "docs": "The background color of the range selection track.",
+          "mode": "ionic"
+        },
+        {
+          "name": "--range-background",
+          "annotation": "prop",
+          "docs": "The background color of the range selection track.",
+          "mode": "ios"
+        },
+        {
+          "name": "--range-background",
+          "annotation": "prop",
+          "docs": "The background color of the range selection track.",
+          "mode": "md"
+        },
         {
           "name": "--title-color",
           "annotation": "prop",
@@ -12451,6 +12468,22 @@
           "name": "previous-button",
           "docs": "The button used to navigate to the previous month when using a grid style layout."
         },
+        {
+          "name": "range-end",
+          "docs": "The calendar day button that is the end of a range selection."
+        },
+        {
+          "name": "range-selection",
+          "docs": "The calendar day button that is part of a range selection (includes start and end)."
+        },
+        {
+          "name": "range-start",
+          "docs": "The calendar day button that is the start of a range selection."
+        },
+        {
+          "name": "range-track",
+          "docs": "The track that connects the start and end days of a range selection."
+        },
         {
           "name": "time-button",
           "docs": "The button that opens the time picker when using a grid style\nlayout with `presentation=\"date-time\"` or `\"time-date\"`."

package/dist/esm/{format-NT7iHsbA.js → format-DUHrIiJq.js}

@@ -1122,4 +1122,4 @@ const formatValue = (value) => {
     return Array.isArray(value) ? value.join(',') : value;
 };
 
-export { getNextWeek as A, parseMinParts as B, parseMaxParts as C, parseDate as D, warnIfValueOutOfBounds as E, parseAmPm as F, clampDate as G, convertToArrayOfNumbers as H, convertDataToISO as I, getClosestValidDate as J, isMonthFirstLocale as K, isLocaleDayPeriodRTL as L, calculateHourFromAMPM as M, getMonthAndYear as N, getLocalizedTime as O, getLocalizedDateTime as P, formatValue as Q, getPreviousMonth as a, getTodayLabel as b, getYear as c, getHourCycle as d, getInternalHourValue as e, getFormattedHour as f, getNextMonth as g, addTimePadding as h, getLocalizedDayPeriod as i, isBefore as j, isSameDay as k, isAfter as l, is24Hour as m, getNumDaysInMonth as n, getDay as o, generateDayAriaLabel as p, getPartsFromCalendarDay as q, removeDateTzOffset as r, getNextYear as s, getPreviousYear as t, getEndOfWeek as u, validateParts as v, getStartOfWeek as w, getPreviousDay as x, getNextDay as y, getPreviousWeek as z };
+export { getPreviousWeek as A, getNextWeek as B, parseMinParts as C, parseMaxParts as D, parseDate as E, warnIfValueOutOfBounds as F, clampDate as G, parseAmPm as H, convertToArrayOfNumbers as I, getClosestValidDate as J, isMonthFirstLocale as K, isLocaleDayPeriodRTL as L, calculateHourFromAMPM as M, getMonthAndYear as N, getLocalizedTime as O, getLocalizedDateTime as P, formatValue as Q, getPreviousMonth as a, getTodayLabel as b, getYear as c, getHourCycle as d, getInternalHourValue as e, getFormattedHour as f, getNextMonth as g, addTimePadding as h, getLocalizedDayPeriod as i, isBefore as j, isSameDay as k, isAfter as l, is24Hour as m, getNumDaysInMonth as n, getDay as o, generateDayAriaLabel as p, getNextDay as q, removeDateTzOffset as r, convertDataToISO as s, getPartsFromCalendarDay as t, getNextYear as u, validateParts as v, getPreviousYear as w, getEndOfWeek as x, getStartOfWeek as y, getPreviousDay as z };