@lekoala/date-picker 0.3.0 → 0.4.0

package/dist/date-picker.js

@@ -1,4 +1,4 @@
-/*** @lekoala/date-picker v0.3.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] || "";
@@ -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;
@@ -1078,7 +1258,7 @@
       }
       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;
@@ -1091,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;
@@ -1101,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;
@@ -1150,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;
@@ -1172,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>`;
@@ -1198,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}">
@@ -1208,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;
@@ -1686,7 +1865,7 @@
       }
       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();
@@ -1706,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) {
@@ -1778,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"];
@@ -1797,6 +1977,9 @@
       this._lastFocusEndpoint = "";
       this._rangeCommitId = 0;
       this._pendingIntents = new Map;
+      this._previewDate = "";
+      this._drag = null;
+      this._suppressGridClick = false;
       this._buttons = [];
       this._returnFocus = null;
       this._panel = null;
@@ -1839,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();
@@ -1903,7 +2086,7 @@
       ];
       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();
@@ -2148,6 +2331,7 @@
         const field = this._fields[index];
         button.disabled = Boolean(field?.input.disabled || field?.input.readOnly);
       }
+      this._syncDragAffordance();
       const active = this._range?.activeEndpoint === "end" ? 1 : 0;
       if (this._open && (this._fields[active]?.input.disabled || this._fields[active]?.input.readOnly)) {
         this.hide(false);
@@ -2331,7 +2515,15 @@
           signal
         });
       }
-      calendar.addEventListener("click", (event) => this._captureGridIntent(event), { capture: true, signal });
+      calendar.addEventListener("click", (event) => {
+        if (this._suppressGridClick) {
+          this._suppressGridClick = false;
+          event.preventDefault();
+          event.stopImmediatePropagation();
+          return;
+        }
+        this._captureGridIntent(event);
+      }, { capture: true, signal });
       calendar.addEventListener("keydown", (event) => this._captureGridIntent(event), {
         capture: true,
         signal
@@ -2344,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) },
@@ -2360,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))
@@ -2396,6 +2595,7 @@
       const target = this._boundCanonical(endpoint) || todayISO();
       calendar.display = monthKey(target);
       calendar.focusedDate = target;
+      this._clearPreview();
     }
     _onRangeTriggerClick(endpoint, event) {
       if (!this._open) {
@@ -2478,7 +2678,190 @@
       if (!isDate(date))
         return;
       this._pendingIntents.clear();
-      this._pendingIntents.set(date, ++this._rangeCommitId);
+      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) {
@@ -2581,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();
@@ -2594,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)
@@ -2613,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) {
@@ -2691,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)
@@ -2825,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" });
@@ -2841,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");
@@ -2904,6 +3295,12 @@
       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();