@lekoala/date-picker 0.2.0 → 0.4.0

package/dist/date-picker.js

@@ -1,4 +1,4 @@
-/*** @lekoala/date-picker v0.2.0 - https://github.com/lekoala/date-picker ***/
+/*** @lekoala/date-picker v0.4.0 - https://github.com/lekoala/date-picker ***/
 (() => {
   var __defProp = Object.defineProperty;
   var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -176,15 +176,46 @@
     const end = endOfWeek(endOfMonth(value), firstDay);
     const weeks = [];
     let cursor = start;
-    while (compareDates(cursor, end) <= 0) {
+    for (;; ) {
       const week = [];
       for (let i = 0;i < 7; i++)
         week.push(addDays(cursor, i));
       weeks.push(week);
+      if (compareDates(week[6], end) >= 0)
+        break;
       cursor = addDays(cursor, 7);
     }
     return weeks;
   }
+  function dayOrdinal(year, month, day) {
+    const base = toUTCDate({ year: 1, month: 1, day: 1 });
+    return Math.round((toUTCDate({ year, month, day }).getTime() - base.getTime()) / 86400000);
+  }
+  function clampDisplayMonth(value, firstDay = 1) {
+    const normalized = normalizeFirstDay(firstDay);
+    const maxOrdinal = dayOrdinal(9999, 12, 31);
+    let key = monthKey(value);
+    for (;; ) {
+      const parsed = parseDate(`${key}-01`);
+      if (!parsed)
+        throw new TypeError(`Invalid civil date/month: ${value}`);
+      const startOrdinal = dayOrdinal(parsed.year, parsed.month, 1);
+      const startOffset = (toUTCDate(parsed).getUTCDay() - normalized + 7) % 7;
+      if (startOrdinal - startOffset < 0) {
+        key = shiftMonth(key, 1);
+        continue;
+      }
+      const lastDay = daysInMonth(parsed.year, parsed.month);
+      const endParts = { year: parsed.year, month: parsed.month, day: lastDay };
+      const endOrdinal = startOrdinal + lastDay - 1;
+      const endOffset = (toUTCDate(endParts).getUTCDay() - normalized + 7) % 7;
+      if (endOrdinal - endOffset + 6 > maxOrdinal) {
+        key = shiftMonth(key, -1);
+        continue;
+      }
+      return key;
+    }
+  }
   function clampDate(value, min = "", max = "") {
     if (!isDate(value))
       throw new TypeError(`Invalid civil date: ${value}`);
@@ -312,36 +343,140 @@
     focus(endpoint) {
       this.activeEndpoint = endpoint;
     }
-    activate(date, editable = () => true) {
+    _refuse(endpoint) {
+      return {
+        status: "refused",
+        endpoint,
+        changedEndpoints: [],
+        range: this.range,
+        activeEndpoint: this.activeEndpoint
+      };
+    }
+    project(date, editable = () => true) {
       if (!isDate(date))
         throw new TypeError(`Invalid range activation: ${date}`);
-      if (this.complete && (compareDates(date, this.start) < 0 || compareDates(date, this.end) > 0)) {
-        const endpoint = compareDates(date, this.start) < 0 ? "start" : "end";
+      const { start, end } = this;
+      if (this.complete && (compareDates(date, start) < 0 || compareDates(date, end) > 0)) {
+        const endpoint = compareDates(date, start) < 0 ? "start" : "end";
         if (!editable(endpoint))
-          return { status: "refused", endpoint };
-        this[endpoint] = date;
-        this.activeEndpoint = endpoint;
-        return { status: "complete", endpoint };
+          return this._refuse(endpoint);
+        return {
+          status: "complete",
+          endpoint,
+          changedEndpoints: [endpoint],
+          range: endpoint === "start" ? { start: date, end } : { start, end: date },
+          activeEndpoint: endpoint
+        };
       }
       if (this.activeEndpoint === "end") {
-        if (this.start && compareDates(date, this.start) < 0) {
-          return { status: "refused", endpoint: "end" };
+        if (start && !end && compareDates(date, start) < 0) {
+          if (!editable("start"))
+            return this._refuse("start");
+          if (!editable("end"))
+            return this._refuse("end");
+          return {
+            status: "complete",
+            endpoint: "end",
+            changedEndpoints: ["start", "end"],
+            range: { start: date, end: start },
+            activeEndpoint: "end"
+          };
         }
+        if (start && compareDates(date, start) < 0)
+          return this._refuse("end");
         if (!editable("end"))
-          return { status: "refused", endpoint: "end" };
-        this.end = date;
-        return { status: this.start ? "complete" : "pending", endpoint: "end" };
+          return this._refuse("end");
+        return {
+          status: start ? "complete" : "pending",
+          endpoint: "end",
+          changedEndpoints: ["end"],
+          range: { start, end: date },
+          activeEndpoint: "end"
+        };
       }
-      if (!editable("start"))
-        return { status: "refused", endpoint: "start" };
-      this.start = date;
-      if (!editable("end")) {
-        return { status: "pending", endpoint: "start", close: true };
+      if (end && !start && compareDates(date, end) > 0) {
+        if (!editable("start"))
+          return this._refuse("start");
+        if (!editable("end"))
+          return this._refuse("end");
+        return {
+          status: "complete",
+          endpoint: "start",
+          changedEndpoints: ["start", "end"],
+          range: { start: end, end: date },
+          activeEndpoint: "start"
+        };
       }
-      this.activeEndpoint = "end";
-      return { status: "pending", endpoint: "start" };
+      if (!editable("start"))
+        return this._refuse("start");
+      const canContinue = editable("end");
+      return {
+        status: "pending",
+        endpoint: "start",
+        changedEndpoints: ["start"],
+        range: { start: date, end },
+        activeEndpoint: canContinue ? "end" : this.activeEndpoint,
+        ...canContinue ? {} : { close: true }
+      };
+    }
+    projectEndpoint(date, endpoint, editable = () => true) {
+      if (!isDate(date))
+        throw new TypeError(`Invalid range activation: ${date}`);
+      if (!this.complete || !editable(endpoint))
+        return this._refuse(endpoint);
+      const { start, end } = this;
+      const previous = endpoint === "start" ? start : end;
+      const target = endpoint === "start" ? earlier(date, end) : later(date, start);
+      return {
+        status: "complete",
+        endpoint,
+        changedEndpoints: target === previous ? [] : [endpoint],
+        range: endpoint === "start" ? { start: target, end } : { start, end: target },
+        activeEndpoint: endpoint
+      };
+    }
+    previewRange(date, endpoint = "", editable = () => true) {
+      if (!isDate(date))
+        return null;
+      if (!endpoint && Boolean(this.start) === Boolean(this.end))
+        return null;
+      const transition = endpoint ? this.projectEndpoint(date, endpoint, editable) : this.project(date, editable);
+      if (transition.status === "refused")
+        return null;
+      const { start, end } = transition.range;
+      if (!start || end && compareDates(end, start) < 0)
+        return null;
+      return { start, end };
+    }
+    _apply(transition) {
+      if (transition.status === "refused")
+        return transition;
+      this.start = transition.range.start;
+      this.end = transition.range.end;
+      this.activeEndpoint = transition.activeEndpoint;
+      return transition;
+    }
+    activate(date, editable = () => true) {
+      return this._apply(this.project(date, editable));
+    }
+    moveEndpoint(date, endpoint, editable = () => true) {
+      return this._apply(this.projectEndpoint(date, endpoint, editable));
     }
   }
+  function later(a, b) {
+    if (!a)
+      return b;
+    if (!b)
+      return a;
+    return compareDates(a, b) >= 0 ? a : b;
+  }
+  function earlier(a, b) {
+    if (!a)
+      return b;
+    if (!b)
+      return a;
+    return compareDates(a, b) <= 0 ? a : b;
+  }
 
   // src/intl.js
   var BIDI = /[\u200e\u200f\u061c\u202a-\u202e\u2066-\u2069]/g;
@@ -361,8 +496,10 @@
       map.set(formatter.format(i), String(i));
     return map;
   }
-  function normalizeDigits(text, locale) {
-    let result = String(text || "").replace(BIDI, "").trim();
+  function normalizeDigits(text, locale, options = {}) {
+    let result = String(text || "").replace(BIDI, "");
+    if (options.trim !== false)
+      result = result.trim();
     for (const [local, ascii] of digitMap(locale))
       result = result.split(local).join(ascii);
     return result;
@@ -462,8 +599,8 @@
         return "(\\d{1,2})";
       if (part.type === "year")
         return "(\\d{4})";
-      const literal = normalizeDigits(part.value, resolved).replace(/\s+/g, " ");
-      return escapeRegExp(literal).replace(/\\ /g, "\\s*");
+      const literal = normalizeDigits(part.value, resolved, { trim: false });
+      return escapeRegExp(literal).replace(/\s+/g, "\\s*");
     }).join("");
     const regex = new RegExp(`^\\s*${pattern}\\s*$`);
     return {
@@ -557,19 +694,24 @@
   function yearOf(month) {
     return Number(month.slice(0, 4));
   }
+  function stepMonthKey(month, amount) {
+    const [year, index] = month.split("-").map(Number);
+    const absolute = year * 12 + (index - 1) + amount;
+    const stepYear = Math.floor(absolute / 12);
+    const stepMonth = (absolute % 12 + 12) % 12 + 1;
+    if (stepYear < 1 || stepYear > 9999)
+      return null;
+    return `${String(stepYear).padStart(4, "0")}-${String(stepMonth).padStart(2, "0")}`;
+  }
+  function rangeAttributeMap(position) {
+    return {
+      "data-range-start": position === "start" || position === "single",
+      "data-range-end": position === "end" || position === "single",
+      "data-in-range": position === "in"
+    };
+  }
   function rangeAttributes(position) {
-    switch (position) {
-      case "single":
-        return ' data-range-start="true" data-range-end="true"';
-      case "start":
-        return ' data-range-start="true"';
-      case "end":
-        return ' data-range-end="true"';
-      case "in":
-        return ' data-in-range="true"';
-      default:
-        return "";
-    }
+    return Object.entries(rangeAttributeMap(position)).filter(([, on]) => on).map(([name]) => ` ${name}="true"`).join("");
   }
   function rangeLabelKey(position) {
     if (position === "single")
@@ -612,6 +754,8 @@
       this._renderDay = null;
       this._isDateDisabled = null;
       this._highlightedRange = { start: "", end: "" };
+      this._paintedRange = { start: "", end: "" };
+      this._paintedPreview = false;
       this._messages = getDefaultMessages();
       this._onClick = this._onClick.bind(this);
       this._onChange = this._onChange.bind(this);
@@ -730,11 +874,12 @@
     }
     set highlightedRange(value) {
       const next = normalizeRange(value);
-      if (next.start === this._highlightedRange.start && next.end === this._highlightedRange.end)
+      const preview = this.hasAttribute("data-range-preview");
+      if (next.start === this._paintedRange.start && next.end === this._paintedRange.end && preview === this._paintedPreview)
         return;
       this._highlightedRange = next;
       if (this._connected)
-        this.render();
+        this._updateRangeDom();
     }
     get fixedWeeks() {
       return this.hasAttribute("fixed-weeks");
@@ -796,7 +941,7 @@
       const attrDisplay = this.getAttribute("display") || "";
       if (attrDisplay) {
         try {
-          this._model.setDisplay(attrDisplay);
+          this._model.setDisplay(clampDisplayMonth(attrDisplay, firstDay));
         } catch {}
       } else if (this._model.value) {
         this._model.display = monthKey(this._model.value);
@@ -817,10 +962,18 @@
       this._rendering = false;
     }
     _clamp(value) {
-      return clampDate(value, this.min, this.max);
+      const bounded = clampDate(value, this.min, this.max);
+      const month = monthKey(bounded);
+      const safeMonth = clampDisplayMonth(month, this.firstDay);
+      if (safeMonth === month)
+        return bounded;
+      const day = Number(bounded.slice(8, 10)) || 1;
+      const candidate = addDays(`${safeMonth}-01`, day - 1);
+      const last = endOfMonth(safeMonth);
+      return compareDates(candidate, last) > 0 ? last : candidate;
     }
     _weeks(display = this.display) {
-      const weeks = getMonthWeeks(display, { firstDay: this.firstDay });
+      const weeks = getMonthWeeks(clampDisplayMonth(display, this.firstDay), { firstDay: this.firstDay });
       if (!this.fixedWeeks || weeks.length >= 6)
         return weeks;
       let cursor = weeks[weeks.length - 1]?.[6] || "";
@@ -834,7 +987,7 @@
       return weeks;
     }
     _focusTargetKey(element) {
-      if (element.matches(".dp-month-select, .dp-year-select, .dp-year-input") && element.id) {
+      if (element.matches(".dp-month-select, .dp-year-input") && element.id) {
         return `#${CSS.escape(element.id)}`;
       }
       if (element.matches(".dp-nav[data-calendar-action]")) {
@@ -934,7 +1087,7 @@
     }
     _setDisplay(display, options = {}) {
       const previous = this._model.display;
-      this._model.setDisplay(display);
+      this._model.setDisplay(clampDisplayMonth(display, this.firstDay));
       this._model.focused = this._clamp(this._model.focused);
       this._model.display = monthKey(this._model.focused);
       this._reflect("display", this._model.display);
@@ -952,10 +1105,10 @@
       }));
     }
     previousMonth() {
-      return this._setDisplay(shiftMonth(this.display, -1));
+      return this._setDisplay(stepMonthKey(this.display, -1) ?? this.display);
     }
     nextMonth() {
-      return this._setDisplay(shiftMonth(this.display, 1));
+      return this._setDisplay(stepMonthKey(this.display, 1) ?? this.display);
     }
     focusDate(date, options = {}) {
       if (!isDate(date))
@@ -1007,12 +1160,39 @@
       }
       return false;
     }
+    _dayLabel(date, state, position) {
+      const rangeLabel = this.hasAttribute("data-range-preview") ? "" : rangeLabelKey(position);
+      const description = typeof state.description === "string" ? state.description : "";
+      return [
+        formatLongDate(date, this.locale),
+        description,
+        rangeLabel ? this._messages[rangeLabel] : "",
+        state.disabled ? this._messages.unavailable : ""
+      ].filter(Boolean).join(". ");
+    }
+    _updateRangeDom() {
+      this._paintedRange = { ...this._highlightedRange };
+      this._paintedPreview = this.hasAttribute("data-range-preview");
+      for (const cell of this.querySelectorAll(".dp-day[data-date]")) {
+        if (!(cell instanceof HTMLTableCellElement))
+          continue;
+        const date = cell.dataset.date || "";
+        const position = rangePosition(date, this._highlightedRange);
+        for (const [name, on] of Object.entries(rangeAttributeMap(position))) {
+          if (on)
+            cell.setAttribute(name, "true");
+          else
+            cell.removeAttribute(name);
+        }
+        cell.setAttribute("aria-label", this._dayLabel(date, this.getDateState(date), position));
+      }
+    }
     focusGrid() {
       const target = this.querySelector(`.dp-day[data-date="${CSS.escape(this.focusedDate)}"]`);
       if (target instanceof HTMLElement)
         target.focus();
     }
-    async _activate(date) {
+    async activateDate(date) {
       const confirmed = await this.ensureDate(date);
       const state = this.getDateState(date);
       if (!confirmed || state.disabled) {
@@ -1068,7 +1248,7 @@
       this._reflect("display", this._model.display);
       if (previousDisplay !== this.display)
         this._emitDisplayChange();
-      this._activate(date);
+      this.activateDate(date);
     }
     _onChange(event) {
       const target = event.target;
@@ -1076,13 +1256,9 @@
         this._setDisplay(`${this.display.slice(0, 4)}-${target.value}`);
         return;
       }
-      if (target instanceof HTMLSelectElement && target.matches(".dp-year-select")) {
-        this._setDisplay(`${target.value}-${this.display.slice(5, 7)}`);
-        return;
-      }
       if (target instanceof HTMLInputElement && target.matches(".dp-year-input")) {
         const year = Number(target.value);
-        if (!Number.isInteger(year) || year < 1 || year > 9999) {
+        if (!Number.isInteger(year) || year < 1 || year > 9998) {
           if (this._connected)
             this.render(false);
           return;
@@ -1095,8 +1271,10 @@
       if (!(target instanceof HTMLTableCellElement) || !target.matches(".dp-day[data-date]"))
         return;
       const date = target.dataset.date || "";
-      if (isDate(date))
-        this._model.focused = date;
+      if (!isDate(date))
+        return;
+      this._model.focused = date;
+      this.dispatchEvent(new CustomEvent("datefocus", { detail: { date, state: this.getDateState(date) }, bubbles: true }));
     }
     _onKeyDown(event) {
       const target = event.target;
@@ -1105,7 +1283,7 @@
       const date = target.dataset.date || this.focusedDate;
       if (event.key === "Enter" || event.key === " ") {
         event.preventDefault();
-        this._activate(date);
+        this.activateDate(date);
         return;
       }
       const anchorFocused = this._model.focused;
@@ -1154,8 +1332,10 @@
       const gridId = `${this._id}-grid`;
       const minMonth = this.min ? monthKey(this.min) : "";
       const maxMonth = this.max ? monthKey(this.max) : "";
-      const prevDisabled = Boolean(minMonth && shiftMonth(display, -1) < minMonth);
-      const nextDisabled = Boolean(maxMonth && shiftMonth(display, 1) > maxMonth);
+      const prevKey = stepMonthKey(display, -1);
+      const nextKey = stepMonthKey(display, 1);
+      const prevDisabled = Boolean(minMonth && prevKey !== null && prevKey < minMonth);
+      const nextDisabled = Boolean(maxMonth && nextKey !== null && nextKey > maxMonth);
       const minYearAttr = this.min ? ` min="${Number(this.min.slice(0, 4))}"` : "";
       const maxYearAttr = this.max ? ` max="${Number(this.max.slice(0, 4))}"` : "";
       const showWeeks = this.showWeekNumbers && this.firstDay === 1;
@@ -1176,14 +1356,7 @@
           const focused = this.focusedDate === date;
           const isToday = date === today;
           const position = rangePosition(date, this._highlightedRange);
-          const rangeLabel = rangeLabelKey(position);
-          const description = typeof state.description === "string" ? state.description : "";
-          const label = [
-            formatLongDate(date, locale),
-            description,
-            rangeLabel ? this._messages[rangeLabel] : "",
-            state.disabled ? this._messages.unavailable : ""
-          ].filter(Boolean).join(". ");
+          const label = this._dayLabel(date, state, position);
           return `<td class="dp-day" data-date="${date}"${outside ? ' data-outside-month="true"' : ""}${isToday ? ' data-today="true" aria-current="date"' : ""}${selected ? ' data-selected="true" aria-selected="true"' : ""}${rangeAttributes(position)}${state.disabled ? ' data-disabled="true" aria-disabled="true"' : ""} tabindex="${focused ? "0" : "-1"}" aria-label="${escapeHtml(label)}"><span class="dp-day-number" aria-hidden="true">${Number(date.slice(8, 10))}</span><span class="dp-day-extra" aria-hidden="true"></span></td>`;
         }).join("");
         return `<tr>${weekNumber}${cells}</tr>`;
@@ -1202,8 +1375,8 @@
         <div class="dp-calendar-header">
           ${yearFirst ? yearControl : monthControl}
           ${yearFirst ? monthControl : yearControl}
-          <button type="button" class="dp-nav dp-prev" data-calendar-action="previous" aria-label="${escapeHtml(this._messages.previousMonth)}"${prevDisabled ? " disabled" : ""}><svg aria-hidden="true" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m10 4-4 4 4 4"/></svg></button>
-          <button type="button" class="dp-nav dp-next" data-calendar-action="next" aria-label="${escapeHtml(this._messages.nextMonth)}"${nextDisabled ? " disabled" : ""}><svg aria-hidden="true" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 4 4 4-4 4"/></svg></button>
+          <button type="button" class="dp-nav dp-prev" data-calendar-action="previous" aria-label="${escapeHtml(this._messages.previousMonth)}"${prevDisabled ? " disabled" : ""}><svg aria-hidden="true" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m4 10 4-4 4 4"/></svg></button>
+          <button type="button" class="dp-nav dp-next" data-calendar-action="next" aria-label="${escapeHtml(this._messages.nextMonth)}"${nextDisabled ? " disabled" : ""}><svg aria-hidden="true" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m4 6 4 4 4-4"/></svg></button>
         </div>
         <h2 id="${headingId}" class="dp-calendar-heading dp-visually-hidden" aria-live="polite">${escapeHtml(formatMonthYear(`${display}-15`, locale))}</h2>
         <table id="${gridId}" class="dp-grid" role="grid" aria-labelledby="${headingId}">
@@ -1212,6 +1385,8 @@
         </table>
       </div>`;
       this._rendering = false;
+      this._paintedRange = { ...this._highlightedRange };
+      this._paintedPreview = this.hasAttribute("data-range-preview");
       if (focusKey) {
         queueMicrotask(() => {
           let selector = focusKey;
@@ -1560,8 +1735,11 @@
     const availableHeight = `${getAvailableHeight(referenceRect, side, boundary, distance, shiftPadding)}px`;
     const { style } = floating;
     const roomChanged = style.getPropertyValue("--available-height") !== availableHeight;
-    style.left = `${coords.x}px`;
-    style.top = `${coords.y}px`;
+    const win = options.coordinateSpace === "document" ? reference.ownerDocument.defaultView : null;
+    const originX = win ? win.scrollX : 0;
+    const originY = win ? win.scrollY : 0;
+    style.left = `${coords.x + originX}px`;
+    style.top = `${coords.y + originY}px`;
     style.setProperty("--arrow-x", `${arrowX}%`);
     style.setProperty("--arrow-y", `${arrowY}%`);
     style.setProperty("--available-height", availableHeight);
@@ -1668,19 +1846,26 @@
     }
     handleInput() {
       const input = this.input;
-      this._dirty = true;
+      const text = input.value.trim();
+      const canonical = this.canonical ? this.adapter.format(this.canonical) : "";
       this.dirty();
+      if (text === canonical) {
+        this._dirty = false;
+        if (this.hidden)
+          this.hidden.value = this.canonical;
+        input.setCustomValidity("");
+        return;
+      }
+      this._dirty = true;
       if (this.hidden)
         this.hidden.value = "";
-      const text = input.value.trim();
       if (!text) {
         input.setCustomValidity("");
         return;
       }
-      const canonical = this.canonical ? this.adapter.format(this.canonical) : "";
       input.setCustomValidity(text === canonical ? "" : this.messages.invalidDate);
     }
-    async commit() {
+    async commit(options = {}) {
       const input = this.input;
       const commitId = ++this._commitId;
       const text = input.value.trim();
@@ -1700,7 +1885,7 @@
         return { status: "invalid" };
       }
       if (this.confirm) {
-        const result = await this.confirm(parsed);
+        const result = await this.confirm(parsed, options);
         if (commitId !== this._commitId)
           return { status: "stale" };
         if (!result?.ok) {
@@ -1772,6 +1957,7 @@
 
   // src/date-picker.js
   var uid2 = 0;
+  var DRAG_THRESHOLD = 4;
 
   class DatePickerElement extends HTMLElement {
     static observedAttributes = ["value", "locale", "min", "max", "open-on-focus", "month-format"];
@@ -1791,7 +1977,11 @@
       this._lastFocusEndpoint = "";
       this._rangeCommitId = 0;
       this._pendingIntents = new Map;
-      this._button = null;
+      this._previewDate = "";
+      this._drag = null;
+      this._suppressGridClick = false;
+      this._buttons = [];
+      this._returnFocus = null;
       this._panel = null;
       this._calendar = null;
       this._originalDescribedBy = "";
@@ -1807,6 +1997,7 @@
       this._dateState = null;
       this._renderDay = null;
       this._isDateDisabled = null;
+      this._coordinateSpace = "viewport";
     }
     _rangeMode() {
       return this.hasAttribute("range") && Boolean(this._range);
@@ -1831,7 +2022,7 @@
       this._discoverTimeFields();
       this._field = new DateFieldController(input, { messages: this._messages, locale: this.locale });
       this._field.onAttributesChanged = () => this._syncInputState();
-      this._field.confirm = (date) => this._confirmDate(date);
+      this._field.confirm = (date, options) => this._confirmDate(date, options);
       this._setupFormValue();
       this._build();
       this._syncInputState();
@@ -1895,10 +2086,10 @@
       ];
       for (const field of this._fields) {
         field.onAttributesChanged = () => this._syncRangeFields();
-        field.confirm = (date) => this._confirmDate(date);
+        field.confirm = (date, options) => this._confirmDate(date, options);
         field.setupFormValue();
       }
-      this._build(endInput);
+      this._build();
       this._setRangeAria();
       this._syncRangeFields();
       this._bindRange();
@@ -1938,10 +2129,12 @@
         this._teardownField(this._field);
       }
       this._field = null;
-      this._button?.remove();
+      for (const { button } of this._buttons)
+        button.remove();
+      this._buttons = [];
+      this._returnFocus = null;
       this._panel?.remove();
       this._formatHint?.remove();
-      this._button = null;
       this._panel = null;
       this._calendar = null;
       this._formatHint = null;
@@ -2105,6 +2298,12 @@
       if (this._connected)
         this.validate();
     }
+    get coordinateSpace() {
+      return this._coordinateSpace;
+    }
+    set coordinateSpace(value) {
+      this._coordinateSpace = value === "document" ? "document" : "viewport";
+    }
     _adapter() {
       return this._field?.adapter ?? this._fields?.[0]?.adapter ?? createDateAdapter(this.locale);
     }
@@ -2116,8 +2315,9 @@
       if (!input)
         return;
       this._field?.syncInputState();
-      if (this._button)
-        this._button.disabled = input.disabled || input.readOnly;
+      const button = this._buttons[0]?.button;
+      if (button)
+        button.disabled = input.disabled || input.readOnly;
       if (this._open && (input.disabled || input.readOnly))
         this.hide(false);
     }
@@ -2126,10 +2326,13 @@
         return;
       for (const field of this._fields)
         field.syncInputState();
+      for (const { button, endpoint } of this._buttons) {
+        const index = endpoint === "end" ? 1 : 0;
+        const field = this._fields[index];
+        button.disabled = Boolean(field?.input.disabled || field?.input.readOnly);
+      }
+      this._syncDragAffordance();
       const active = this._range?.activeEndpoint === "end" ? 1 : 0;
-      const disabled = this._fields.every((field) => field.input.disabled || field.input.readOnly);
-      if (this._button)
-        this._button.disabled = disabled;
       if (this._open && (this._fields[active]?.input.disabled || this._fields[active]?.input.readOnly)) {
         this.hide(false);
       }
@@ -2147,19 +2350,37 @@
         input.setAttribute("aria-controls", this._panel.id);
       }
     }
-    _build(anchorInput) {
-      const input = anchorInput || this._input;
-      if (!input)
-        return;
-      const panelId = `${this._id}-panel`;
-      const hintId = `${this._id}-format`;
+    _createTrigger(endpoint) {
       const button = document.createElement("button");
       button.type = "button";
       button.className = "dp-picker-button";
       button.setAttribute("aria-haspopup", "dialog");
       button.setAttribute("aria-expanded", "false");
-      button.setAttribute("aria-controls", panelId);
+      button.setAttribute("aria-controls", `${this._id}-panel`);
+      if (endpoint)
+        button.dataset.endpoint = endpoint;
       button.innerHTML = '<span aria-hidden="true"><svg viewBox="0 0 16 16" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><rect x="1.75" y="3" width="12.5" height="11" rx="1.75"/><path d="M1.75 6.75h12.5"/><path d="M5.25 1.75v2.5M10.75 1.75v2.5"/></svg></span>';
+      return button;
+    }
+    _build() {
+      const ranges = this._rangeMode();
+      const targets = [];
+      if (ranges) {
+        for (const [index, field] of (this._fields || []).entries()) {
+          targets.push([field.input, index === 1 ? "end" : "start"]);
+        }
+      } else if (this._input) {
+        targets.push([this._input, ""]);
+      }
+      if (!targets.length)
+        return;
+      const panelId = `${this._id}-panel`;
+      const hintId = `${this._id}-format`;
+      this._buttons = targets.map(([input, endpoint]) => {
+        const button = this._createTrigger(endpoint);
+        input.insertAdjacentElement("afterend", button);
+        return { button, endpoint };
+      });
       const panel = document.createElement("div");
       panel.id = panelId;
       panel.className = "dp-picker-panel";
@@ -2173,28 +2394,25 @@
       const hint = document.createElement("span");
       hint.id = hintId;
       hint.className = "dp-visually-hidden";
-      input.insertAdjacentElement("afterend", button);
-      button.insertAdjacentElement("afterend", panel);
-      panel.insertAdjacentElement("afterend", hint);
-      this._button = button;
+      this.append(panel, hint);
       this._panel = panel;
       this._calendar = calendar;
       this._formatHint = hint;
-      if (!this._rangeMode()) {
-        this._originalDescribedBy = input.getAttribute("aria-describedby") || "";
+      if (!ranges && this._input) {
+        this._originalDescribedBy = this._input.getAttribute("aria-describedby") || "";
         const describedBy = [this._originalDescribedBy, hintId].filter(Boolean).join(" ");
-        input.setAttribute("aria-describedby", describedBy);
-        input.setAttribute("role", "combobox");
-        input.setAttribute("aria-haspopup", "dialog");
-        input.setAttribute("aria-expanded", "false");
-        input.setAttribute("aria-controls", panelId);
+        this._input.setAttribute("aria-describedby", describedBy);
+        this._input.setAttribute("role", "combobox");
+        this._input.setAttribute("aria-haspopup", "dialog");
+        this._input.setAttribute("aria-expanded", "false");
+        this._input.setAttribute("aria-controls", panelId);
       }
       this._refreshLocale();
       this._refreshButtonLabel();
     }
     _bind() {
       const input = this._input;
-      const button = this._button;
+      const button = this._buttons[0]?.button;
       const calendar = this._calendar;
       if (!input || !button || !calendar)
         return;
@@ -2234,8 +2452,9 @@
           this.hide(false);
           return;
         }
-        this.show();
+        this.show({ returnFocus: button });
       }, { signal });
+      button.addEventListener("keydown", (event) => this._onTriggerKeyDown("", event), { signal });
       calendar.addEventListener("dateactivate", (event) => {
         const custom = event;
         const date = custom.detail?.date;
@@ -2249,7 +2468,7 @@
           this._field?.dirty();
           this._setValue(date, { emit: true, format: true });
           this.hide(false);
-          this._focusInput();
+          this._restoreFocus();
         });
       }, { signal });
       calendar.addEventListener("dateloadend", () => void this.validate(), { signal });
@@ -2271,9 +2490,8 @@
       this.addEventListener("keydown", (event) => this._onEscape(event), { signal });
     }
     _bindRange() {
-      const button = this._button;
       const calendar = this._calendar;
-      if (!this._fields || !button || !calendar)
+      if (!this._fields || !this._buttons.length || !calendar)
         return;
       const controller = new AbortController;
       this._controller = controller;
@@ -2286,18 +2504,26 @@
         field.input.addEventListener("focus", (event) => this._onFieldFocus(endpoint, event), { signal });
         field.input.addEventListener("keydown", (event) => this._onFieldKeyDown(endpoint, event), { signal });
       }
-      button.addEventListener("click", (event) => {
-        if (this._open) {
-          if (event.detail === 0) {
-            setTimeout(() => this._calendar?.focusGrid(), 0);
-            return;
-          }
-          this.hide(false);
+      for (const entry of this._buttons) {
+        const endpoint = entry.endpoint;
+        if (endpoint === "")
+          continue;
+        entry.button.addEventListener("click", (event) => this._onRangeTriggerClick(endpoint, event), {
+          signal
+        });
+        entry.button.addEventListener("keydown", (event) => this._onTriggerKeyDown(endpoint, event), {
+          signal
+        });
+      }
+      calendar.addEventListener("click", (event) => {
+        if (this._suppressGridClick) {
+          this._suppressGridClick = false;
+          event.preventDefault();
+          event.stopImmediatePropagation();
           return;
         }
-        this.show();
-      }, { signal });
-      calendar.addEventListener("click", (event) => this._captureGridIntent(event), { capture: true, signal });
+        this._captureGridIntent(event);
+      }, { capture: true, signal });
       calendar.addEventListener("keydown", (event) => this._captureGridIntent(event), {
         capture: true,
         signal
@@ -2310,15 +2536,12 @@
         queueMicrotask(() => {
           if (custom.defaultPrevented || !this._connected || !this._range)
             return;
-          const pending = this._pendingIntents.get(date);
-          if (pending === undefined || pending !== this._rangeCommitId)
+          const intent = this._pendingIntents.get(date);
+          if (intent === undefined || intent.id !== this._rangeCommitId)
             return;
           this._pendingIntents.delete(date);
-          const result = this._range.activate(date, (which) => {
-            const index = which === "end" ? 1 : 0;
-            const field = this._fields?.[index];
-            return field != null && !field.input.disabled && !field.input.readOnly;
-          });
+          const editable = (bound) => this._boundEditable(bound);
+          const result = intent.endpoint ? this._range.moveEndpoint(date, intent.endpoint, editable) : this._range.activate(date, editable);
           if (result.status === "refused") {
             this._calendar?.dispatchEvent(new CustomEvent("dateinvalid", {
               detail: { date, state: this._calendar.getDateState(date) },
@@ -2326,13 +2549,23 @@
             }));
             return;
           }
-          this._setBound(result.endpoint, date, { emit: true, user: true });
+          this._applyRangeTransition(result);
+          if (intent.endpoint)
+            return;
           if (result.close || result.status === "complete") {
             this.hide(false);
             this._focusField(result.endpoint);
           }
         });
       }, { signal });
+      calendar.addEventListener("datefocus", (event) => this._onGridDateFocus(event), { signal });
+      calendar.addEventListener("pointerover", (event) => this._onGridPointerOver(event), { signal });
+      calendar.addEventListener("pointerleave", () => this._onGridPointerLeave(), { signal });
+      calendar.addEventListener("pointerdown", (event) => this._onGridPointerDown(event), { signal });
+      calendar.addEventListener("pointermove", (event) => this._onGridPointerMove(event), { signal });
+      calendar.addEventListener("pointerup", (event) => this._onGridPointerUp(event), { signal });
+      calendar.addEventListener("pointercancel", (event) => this._onGridPointerCancel(event), { signal });
+      calendar.addEventListener("lostpointercapture", (event) => this._onGridPointerCancel(event), { signal });
       calendar.addEventListener("dateloadend", () => void this.validate(), { signal });
       this.ownerDocument.addEventListener("pointerdown", (event) => {
         if (!this._open || event.composedPath().includes(this))
@@ -2351,8 +2584,52 @@
       }, { capture: true, signal });
       this.addEventListener("keydown", (event) => this._onEscape(event), { signal });
     }
+    _activateRangeEndpoint(endpoint) {
+      const calendar = this._calendar;
+      if (!this._range || !calendar)
+        return;
+      this._range.focus(endpoint);
+      this._rangeCommitId++;
+      this._pendingIntents.clear();
+      this._lastFocusEndpoint = endpoint;
+      const target = this._boundCanonical(endpoint) || todayISO();
+      calendar.display = monthKey(target);
+      calendar.focusedDate = target;
+      this._clearPreview();
+    }
+    _onRangeTriggerClick(endpoint, event) {
+      if (!this._open) {
+        this.show({ endpoint });
+        return;
+      }
+      if (event.detail === 0) {
+        this._activateRangeEndpoint(endpoint);
+        setTimeout(() => this._calendar?.focusGrid(), 0);
+        return;
+      }
+      if (endpoint !== this._range?.activeEndpoint) {
+        this._activateRangeEndpoint(endpoint);
+        return;
+      }
+      this.hide(false);
+    }
+    _onTriggerKeyDown(endpoint, event) {
+      if (event.key !== "ArrowDown")
+        return;
+      event.preventDefault();
+      if (this._open) {
+        if (this._rangeMode() && endpoint)
+          this._activateRangeEndpoint(endpoint);
+        setTimeout(() => this._calendar?.focusGrid(), 0);
+        return;
+      }
+      if (this._rangeMode())
+        this.show({ endpoint: endpoint || undefined });
+      else
+        this.show({ returnFocus: this._buttons[0]?.button });
+    }
     _onFieldKeyDown(endpoint, event) {
-      if (event.key === "ArrowDown" || event.altKey && event.key === "ArrowDown") {
+      if (event.key === "ArrowDown") {
         event.preventDefault();
         if (this._rangeMode() && endpoint) {
           this._lastFocusEndpoint = endpoint;
@@ -2400,7 +2677,191 @@
       const date = cell?.getAttribute("data-date") || "";
       if (!isDate(date))
         return;
-      this._pendingIntents.set(date, ++this._rangeCommitId);
+      this._pendingIntents.clear();
+      this._pendingIntents.set(date, { id: ++this._rangeCommitId, endpoint: "" });
+    }
+    _boundEditable(bound) {
+      const field = this._fields?.[bound === "end" ? 1 : 0];
+      return field != null && !field.input.disabled && !field.input.readOnly;
+    }
+    _applyRangeTransition(transition) {
+      const fields = this._fields;
+      if (!fields || !this._range || transition.status === "refused")
+        return;
+      const moved = [];
+      for (const which of transition.changedEndpoints) {
+        const field = fields[which === "end" ? 1 : 0];
+        const next = which === "end" ? transition.range.end : transition.range.start;
+        if (!field || field.canonical === next)
+          continue;
+        field.setCanonical(next, { format: true });
+        moved.push(field);
+      }
+      this._syncHighlight();
+      this._refreshRangeButtonLabel();
+      this._revalidateRange(transition.endpoint);
+      if (!moved.length)
+        return;
+      this._emitRangeChange();
+      for (const field of moved) {
+        field.input.dispatchEvent(new Event("input", { bubbles: true }));
+        field.input.dispatchEvent(new Event("change", { bubbles: true }));
+      }
+    }
+    _setPreview(date, endpoint = "") {
+      const calendar = this._calendar;
+      if (!calendar || !this._range || !this._open)
+        return;
+      const candidate = isDate(date) && !calendar.getDateState(date).disabled ? date : "";
+      const preview = candidate ? this._range.previewRange(candidate, endpoint, (bound) => this._boundEditable(bound)) : null;
+      if (!preview) {
+        this._clearPreview();
+        return;
+      }
+      this._previewDate = candidate;
+      calendar.toggleAttribute("data-range-preview", true);
+      calendar.highlightedRange = preview;
+    }
+    _clearPreview() {
+      if (!this._previewDate)
+        return;
+      this._syncHighlight();
+    }
+    _onGridDateFocus(event) {
+      if (this._drag)
+        return;
+      const date = event.detail?.date;
+      if (isDate(date))
+        this._setPreview(date);
+    }
+    _onGridPointerOver(event) {
+      const pointer = event;
+      if (this._drag || pointer.pointerType === "touch")
+        return;
+      this._setPreview(this._cellDate(pointer.target));
+    }
+    _onGridPointerLeave() {
+      if (this._drag?.active === false)
+        this._drag = null;
+      if (this._drag)
+        return;
+      this._clearPreview();
+    }
+    _cellDate(target) {
+      const cell = target instanceof Element ? target.closest(".dp-day[data-date]") : null;
+      const date = cell?.getAttribute("data-date") || "";
+      return isDate(date) ? date : "";
+    }
+    _dateAtPoint(x, y) {
+      const element = this.ownerDocument.elementFromPoint(x, y);
+      if (!(element instanceof Element) || !this._calendar?.contains(element))
+        return "";
+      return this._cellDate(element);
+    }
+    _onGridPointerDown(event) {
+      const pointer = event;
+      this._suppressGridClick = false;
+      if (this._drag?.active === false)
+        this._drag = null;
+      if (!this._open || !this._range || this._drag)
+        return;
+      if (!pointer.isPrimary || pointer.button !== 0)
+        return;
+      if (pointer.pointerType !== "mouse" && pointer.pointerType !== "pen")
+        return;
+      if (!this._range.complete)
+        return;
+      const cell = pointer.target instanceof Element ? pointer.target.closest(".dp-day[data-date]") : null;
+      if (!(cell instanceof HTMLElement))
+        return;
+      const isStart = cell.hasAttribute("data-range-start");
+      const isEnd = cell.hasAttribute("data-range-end");
+      if (isStart === isEnd)
+        return;
+      const endpoint = isStart ? "start" : "end";
+      const date = this._cellDate(cell);
+      if (!date || !this._boundEditable(endpoint))
+        return;
+      this._drag = {
+        pointerId: pointer.pointerId,
+        endpoint,
+        x: pointer.clientX,
+        y: pointer.clientY,
+        date,
+        active: false
+      };
+    }
+    _onGridPointerMove(event) {
+      const pointer = event;
+      const drag = this._drag;
+      if (!drag || pointer.pointerId !== drag.pointerId)
+        return;
+      if (!drag.active) {
+        const travelled = Math.abs(pointer.clientX - drag.x) > DRAG_THRESHOLD || Math.abs(pointer.clientY - drag.y) > DRAG_THRESHOLD;
+        if (!travelled)
+          return;
+        drag.active = true;
+        try {
+          this._calendar?.setPointerCapture(drag.pointerId);
+        } catch {}
+        this._syncDragAffordance();
+      }
+      const date = this._dateAtPoint(pointer.clientX, pointer.clientY);
+      if (!date || this._calendar?.getDateState(date).disabled)
+        return;
+      drag.date = date;
+      this._setPreview(date, drag.endpoint);
+    }
+    _onGridPointerUp(event) {
+      const pointer = event;
+      const drag = this._drag;
+      if (!drag || pointer.pointerId !== drag.pointerId)
+        return;
+      this._drag = null;
+      this._releaseDragCapture(drag.pointerId);
+      if (!drag.active) {
+        this._syncDragAffordance();
+        return;
+      }
+      this._suppressGridClick = true;
+      const transition = this._range?.projectEndpoint(drag.date, drag.endpoint, (bound) => this._boundEditable(bound));
+      if (!transition || transition.status === "refused" || !transition.changedEndpoints.length) {
+        this._syncHighlight();
+        return;
+      }
+      const target = drag.endpoint === "start" ? transition.range.start : transition.range.end;
+      this._pendingIntents.clear();
+      this._pendingIntents.set(target, { id: ++this._rangeCommitId, endpoint: drag.endpoint });
+      this._calendar?.activateDate(target);
+    }
+    _onGridPointerCancel(event) {
+      const pointer = event;
+      const drag = this._drag;
+      if (!drag || pointer.pointerId !== drag.pointerId)
+        return;
+      this._drag = null;
+      this._releaseDragCapture(drag.pointerId);
+      this._syncHighlight();
+    }
+    _releaseDragCapture(pointerId) {
+      const calendar = this._calendar;
+      if (calendar?.hasPointerCapture(pointerId))
+        calendar.releasePointerCapture(pointerId);
+    }
+    _syncDragAffordance() {
+      const calendar = this._calendar;
+      if (!calendar || !this._range)
+        return;
+      if (this._drag?.active) {
+        calendar.setAttribute("data-range-drag", "active");
+        return;
+      }
+      const { start, end } = this._range;
+      const draggable = this._range.complete && start !== end && (this._boundEditable("start") || this._boundEditable("end"));
+      if (draggable)
+        calendar.setAttribute("data-range-drag", "ready");
+      else
+        calendar.removeAttribute("data-range-drag");
     }
     _onEscape(event) {
       if (event.key === "Escape" && this._open) {
@@ -2462,7 +2923,8 @@
       this._refreshButtonLabel();
     }
     _refreshButtonLabel() {
-      if (!this._button)
+      const single = this._buttons[0]?.button;
+      if (!single)
         return;
       if (this._rangeMode()) {
         this._refreshRangeButtonLabel();
@@ -2470,16 +2932,19 @@
       }
       const prefix = this._value ? this._messages.changeDate : this._messages.chooseDate;
       const suffix = this._value ? `, ${formatLongDate(this._value, this.locale)}` : "";
-      this._button.setAttribute("aria-label", `${prefix}${suffix}`);
+      single.setAttribute("aria-label", `${prefix}${suffix}`);
     }
     _refreshRangeButtonLabel() {
-      if (!this._button || !this._range)
+      if (!this._range)
         return;
       const { start, end } = this._range;
-      const hasRange = Boolean(start && end);
-      const prefix = hasRange ? this._messages.changeDate : this._messages.chooseDate;
-      const suffix = hasRange ? `, ${formatLongDate(start, this.locale)} – ${formatLongDate(end, this.locale)}` : "";
-      this._button.setAttribute("aria-label", `${prefix}${suffix}`);
+      for (const { button, endpoint } of this._buttons) {
+        const bound = endpoint === "end" ? end : start;
+        const prefix = bound ? this._messages.changeDate : this._messages.chooseDate;
+        const suffix = bound ? `, ${formatLongDate(bound, this.locale)}` : "";
+        const boundLabel = endpoint === "end" ? this._messages.rangeEnd : this._messages.rangeStart;
+        button.setAttribute("aria-label", `${prefix}${suffix}, ${boundLabel}`);
+      }
     }
     _reflectValue(value) {
       this._reflecting = true;
@@ -2499,7 +2964,7 @@
       this._field?.setCanonical(this._value, { format: options.format !== false });
       if (this._calendar) {
         this._calendar.value = this._value;
-        if (this._value)
+        if (this._value && options.moveDisplay !== false)
           this._calendar.focusedDate = this._value;
       }
       this._refreshButtonLabel();
@@ -2512,13 +2977,15 @@
         }
       }
     }
-    async _confirmDate(date) {
+    async _confirmDate(date, options = {}) {
       const calendar = this._calendar;
       if (!calendar)
         return { ok: true };
-      const display = monthKey(date);
-      if (calendar.display !== display)
-        calendar.display = display;
+      if (options.moveDisplay !== false) {
+        const display = monthKey(date);
+        if (calendar.display !== display)
+          calendar.display = display;
+      }
       const confirmed = await calendar.ensureDate(date);
       const state = calendar.getDateState(date);
       if (!confirmed || state.disabled)
@@ -2531,10 +2998,14 @@
         return false;
       if (!options.force && !field.isDirty)
         return false;
-      const result = await field.commit();
+      const result = await field.commit(options);
       if (result.status === "stale" || result.status === "invalid")
         return false;
-      this._setValue(result.value || "", { emit, format: result.status === "ok" });
+      this._setValue(result.value || "", {
+        emit,
+        format: result.status === "ok",
+        moveDisplay: options.moveDisplay
+      });
       return true;
     }
     async _commitFieldText(which) {
@@ -2552,7 +3023,7 @@
         this._orderTags.delete(index);
         return false;
       }
-      this._setBound(which, result.value || "", { emit: true, user: true, format: result.status === "ok" });
+      this._setBound(which, result.value || "", { emit: false, user: true, format: result.status === "ok" });
       return true;
     }
     _setBound(which, value, options = {}) {
@@ -2609,19 +3080,21 @@
         return;
       this.dispatchEvent(new CustomEvent("rangechange", { detail: { ...this._range.range }, bubbles: true }));
     }
+    _displayRange() {
+      const { start, end } = this._range?.range ?? { start: "", end: "" };
+      if (!start)
+        return { start: "", end: "" };
+      if (end && compareDates(end, start) < 0)
+        return { start, end: "" };
+      return { start, end };
+    }
     _syncHighlight() {
       if (!this._calendar || !this._range)
         return;
-      const { start, end } = this._range;
-      if (!start) {
-        this._calendar.highlightedRange = { start: "", end: "" };
-        return;
-      }
-      if (end && compareDates(end, start) < 0) {
-        this._calendar.highlightedRange = { start, end: "" };
-      } else {
-        this._calendar.highlightedRange = { start, end };
-      }
+      this._previewDate = "";
+      this._calendar.removeAttribute("data-range-preview");
+      this._calendar.highlightedRange = this._displayRange();
+      this._syncDragAffordance();
     }
     _revalidateRange(which) {
       if (!this._fields || !this._range)
@@ -2711,10 +3184,14 @@
         this._suppressFocusOpen = false;
       }, 0);
     }
-    _focusInput() {
+    _restoreFocus() {
+      const target = this._returnFocus;
+      this._returnFocus = null;
+      if (!(target instanceof HTMLElement) || !target.isConnected || target.matches(":disabled"))
+        return;
       this._suppressFocusOpen = true;
       setTimeout(() => {
-        this._input?.focus();
+        target.focus();
         this._suppressFocusOpen = false;
       }, 0);
     }
@@ -2739,7 +3216,7 @@
         if (!fields)
           return true;
         for (const [index, field] of fields.entries()) {
-          const result = await field.commit();
+          const result = await field.commit({ moveDisplay: false });
           if (result.status === "ok" || result.status === "clear") {
             const which = index === 1 ? "end" : "start";
             this._setBound(which, result.value || "", { format: result.status === "ok" });
@@ -2755,7 +3232,7 @@
       if (!input.value.trim()) {
         input.setCustomValidity("");
       } else {
-        await this._commitText(false, { force: true });
+        await this._commitText(false, { force: true, moveDisplay: false });
       }
       this._revalidateTimeOrder("start");
       this._revalidateTimeOrder("end");
@@ -2765,20 +3242,13 @@
     show(options = {}) {
       const panel = this._panel;
       const calendar = this._calendar;
-      const button = this._button;
-      if (!panel || !calendar || !button || this._open)
+      if (!panel || !calendar || !this._buttons.length || this._open)
         return;
       if (this._rangeMode()) {
-        const endpoint = this._resolveRangeEndpoint();
+        const endpoint = options.endpoint || this._resolveRangeEndpoint();
         if (!endpoint)
           return;
-        this._range?.focus(endpoint);
-        this._rangeCommitId++;
-        this._pendingIntents.clear();
-        const target = this._boundCanonical(endpoint) || todayISO();
-        calendar.display = monthKey(target);
-        calendar.focusedDate = target;
-        this._lastFocusEndpoint = endpoint;
+        this._activateRangeEndpoint(endpoint);
       } else {
         const input = this._input;
         if (!input || input.disabled || input.readOnly)
@@ -2786,11 +3256,19 @@
         const target = this._value || this._adapter().parse(input.value) || todayISO();
         calendar.display = monthKey(target);
         calendar.focusedDate = target;
+        this._returnFocus = options.returnFocus instanceof HTMLElement ? options.returnFocus : input;
       }
       panel.showPopover();
       this._open = true;
       this._setExpanded(true);
-      const position = () => reposition(this, panel, { placement: "bottom-start", distance: 4, shiftPadding: 8 });
+      const coordinateSpace = this.coordinateSpace;
+      panel.style.position = coordinateSpace === "document" ? "absolute" : "fixed";
+      const position = () => reposition(this, panel, {
+        placement: "bottom-start",
+        distance: 4,
+        shiftPadding: 8,
+        coordinateSpace
+      });
       position();
       this._stopTracking = autoUpdate(this, panel, position);
       if (options.moveFocus !== false)
@@ -2800,7 +3278,8 @@
     _setExpanded(expanded) {
       const value = expanded ? "true" : "false";
       this._input?.setAttribute("aria-expanded", value);
-      this._button?.setAttribute("aria-expanded", value);
+      for (const { button } of this._buttons)
+        button.setAttribute("aria-expanded", value);
       for (const field of this._fields || [])
         field.input.setAttribute("aria-expanded", value);
     }
@@ -2816,13 +3295,19 @@
       this._setExpanded(false);
       this._rangeCommitId++;
       this._pendingIntents.clear();
+      this._suppressGridClick = false;
+      if (this._drag) {
+        this._releaseDragCapture(this._drag.pointerId);
+        this._drag = null;
+      }
+      this._syncHighlight();
       if (restoreFocus) {
         if (this._rangeMode()) {
           const endpoint = this._restoreFocusEndpoint();
           if (endpoint)
             this._focusField(endpoint);
         } else {
-          this._focusInput();
+          this._restoreFocus();
         }
       }
       this.dispatchEvent(new Event("close", { bubbles: true }));