@lekoala/date-picker 0.3.0 → 0.5.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.5.0 - https://github.com/lekoala/date-picker ***/
 (() => {
   var __defProp = Object.defineProperty;
   var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -176,15 +176,48 @@
     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) {
+        if (!options.fixedWeeks || weeks.length >= 6 || compareDates(week[6], addDays("9999-12-31", -7)) > 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}`);
@@ -265,6 +298,30 @@
     }
   }
 
+  // src/control-classes.js
+  function normalizeControlClass(value) {
+    if (typeof value !== "string")
+      return "";
+    return [
+      ...new Set(value.split(/\s+/).filter((token) => token && !token.startsWith("dp-") && ![...token].some((char) => char.charCodeAt(0) < 32 || char.charCodeAt(0) === 127)))
+    ].join(" ");
+  }
+  function sameControlClasses(a, b) {
+    return a.month === b.month && a.year === b.year && a.nav === b.nav;
+  }
+  var defaults = { month: "", year: "", nav: "" };
+  function getDefaultControlClasses() {
+    return { ...defaults };
+  }
+  function resolveControlClasses(classes) {
+    const result = getDefaultControlClasses();
+    for (const role of ["month", "year", "nav"]) {
+      if (classes && Object.hasOwn(classes, role))
+        result[role] = normalizeControlClass(classes[role]);
+    }
+    return result;
+  }
+
   // src/date-range.js
   function normalizeRange(range) {
     if (range == null)
@@ -312,39 +369,160 @@
     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;
+  var dateFormatters = new Map;
+  var digitMaps = new Map;
+  function cached(cache, key, create) {
+    const existing = cache.get(key);
+    if (existing !== undefined)
+      return existing;
+    const value = create();
+    const oldest = cache.keys().next().value;
+    if (cache.size >= 64 && oldest !== undefined)
+      cache.delete(oldest);
+    cache.set(key, value);
+    return value;
+  }
+  function dateFormatter(locale, options) {
+    const key = JSON.stringify([locale, options]);
+    return cached(dateFormatters, key, () => new Intl.DateTimeFormat(locale, options));
+  }
   function resolveLocale(locale = "") {
     if (locale)
       return locale;
@@ -355,21 +533,25 @@
     return "en-US";
   }
   function digitMap(locale) {
-    const formatter = new Intl.NumberFormat(locale, { useGrouping: false });
-    const map = new Map;
-    for (let i = 0;i <= 9; i++)
-      map.set(formatter.format(i), String(i));
-    return map;
+    return cached(digitMaps, locale, () => {
+      const formatter = new Intl.NumberFormat(locale, { useGrouping: false });
+      const map = new Map;
+      for (let i = 0;i <= 9; i++)
+        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;
   }
   function formatLongDate(value, locale = "") {
     const resolved = resolveLocale(locale);
-    return new Intl.DateTimeFormat(resolved, {
+    return dateFormatter(resolved, {
       calendar: "gregory",
       weekday: "long",
       year: "numeric",
@@ -380,7 +562,7 @@
   }
   function formatMonthYear(value, locale = "") {
     const resolved = resolveLocale(locale);
-    return new Intl.DateTimeFormat(resolved, {
+    return dateFormatter(resolved, {
       calendar: "gregory",
       year: "numeric",
       month: "long",
@@ -390,7 +572,7 @@
   function monthYearOrder(locale = "") {
     const resolved = resolveLocale(locale);
     try {
-      const parts = new Intl.DateTimeFormat(resolved, {
+      const parts = dateFormatter(resolved, {
         calendar: "gregory",
         year: "numeric",
         month: "long",
@@ -415,12 +597,12 @@
   }
   function monthNames(locale = "", style = "long") {
     const resolved = resolveLocale(locale);
-    const formatter = new Intl.DateTimeFormat(resolved, { calendar: "gregory", month: style, timeZone: "UTC" });
+    const formatter = dateFormatter(resolved, { calendar: "gregory", month: style, timeZone: "UTC" });
     return Array.from({ length: 12 }, (_, index) => formatter.format(toIntlDate(`2026-${String(index + 1).padStart(2, "0")}-15`)));
   }
   function weekdayNames(locale = "", firstDay = 1, style = "short") {
     const resolved = resolveLocale(locale);
-    const formatter = new Intl.DateTimeFormat(resolved, {
+    const formatter = dateFormatter(resolved, {
       calendar: "gregory",
       weekday: style,
       timeZone: "UTC"
@@ -438,7 +620,7 @@
   }
   function createDateAdapter(locale = "") {
     const resolved = resolveLocale(locale);
-    const formatter = new Intl.DateTimeFormat(resolved, {
+    const formatter = dateFormatter(resolved, {
       calendar: "gregory",
       year: "numeric",
       month: "2-digit",
@@ -462,8 +644,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 {
@@ -517,9 +699,9 @@
     rangeOrderStart: "Start must be on or before end",
     rangeOrderEnd: "End must be on or after start"
   };
-  var defaults = { ...DEFAULT_MESSAGES };
+  var defaults2 = { ...DEFAULT_MESSAGES };
   function getDefaultMessages() {
-    return { ...defaults };
+    return { ...defaults2 };
   }
 
   // src/source.js
@@ -557,19 +739,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,7 +799,11 @@
       this._renderDay = null;
       this._isDateDisabled = null;
       this._highlightedRange = { start: "", end: "" };
+      this._paintedRange = { start: "", end: "" };
+      this._paintedPreview = false;
+      this._renderedStates = new Map;
       this._messages = getDefaultMessages();
+      this._controlClasses = getDefaultControlClasses();
       this._onClick = this._onClick.bind(this);
       this._onChange = this._onChange.bind(this);
       this._onKeyDown = this._onKeyDown.bind(this);
@@ -730,11 +921,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");
@@ -748,6 +940,17 @@
     set showWeekNumbers(value) {
       this.toggleAttribute("show-week-numbers", Boolean(value));
     }
+    get controlClasses() {
+      return { ...this._controlClasses };
+    }
+    set controlClasses(value) {
+      const classes = resolveControlClasses(value);
+      if (sameControlClasses(classes, this._controlClasses))
+        return;
+      this._controlClasses = classes;
+      if (this._connected)
+        this.render();
+    }
     get messages() {
       return this._messages;
     }
@@ -796,7 +999,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,21 +1020,21 @@
       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 });
-      if (!this.fixedWeeks || weeks.length >= 6)
-        return weeks;
-      let cursor = weeks[weeks.length - 1]?.[6] || "";
-      while (weeks.length < 6 && cursor) {
-        const week = [];
-        for (let i = 1;i <= 7; i++)
-          week.push(addDays(cursor, i));
-        weeks.push(week);
-        cursor = week[6];
-      }
-      return weeks;
+      return getMonthWeeks(clampDisplayMonth(display, this.firstDay), {
+        firstDay: this.firstDay,
+        fixedWeeks: this.fixedWeeks
+      });
     }
     _focusTargetKey(element) {
       if (element.matches(".dp-month-select, .dp-year-input") && element.id) {
@@ -934,7 +1137,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 +1155,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 +1210,48 @@
       }
       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() {
+      const previousRange = this._paintedRange;
+      const previousPreview = this._paintedPreview;
+      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);
+        if (position === rangePosition(date, previousRange) && previousPreview === this._paintedPreview)
+          continue;
+        for (const [name, on] of Object.entries(rangeAttributeMap(position))) {
+          if (on)
+            cell.setAttribute(name, "true");
+          else
+            cell.removeAttribute(name);
+        }
+        if (!previousPreview || !this._paintedPreview) {
+          const state = this._renderedStates.get(date) || {};
+          const label = this._dayLabel(date, state, position);
+          if (cell.getAttribute("aria-label") !== label)
+            cell.setAttribute("aria-label", label);
+        }
+      }
+    }
     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 +1307,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 +1317,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 +1330,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 +1342,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 +1391,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;
@@ -1163,23 +1406,18 @@
         return `<option value="${String(month).padStart(2, "0")}"${month === displayMonth ? " selected" : ""}${disabled ? " disabled" : ""}>${escapeHtml(name)}</option>`;
       }).join("");
       const dayHeaders = weekdayShort.map((name, index) => `<th scope="col" abbr="${escapeHtml(weekdayLong[index])}">${escapeHtml(name.replace(".", ""))}</th>`).join("");
+      this._renderedStates.clear();
       const rows = weeks.map((week) => {
         const weekNumber = showWeeks ? `<th scope="row" class="dp-week-number">${isoWeekNumber(week[0])}</th>` : "";
         const cells = week.map((date) => {
           const state = this.getDateState(date);
+          this._renderedStates.set(date, state);
           const outside = monthKey(date) !== display;
           const selected = this.value === date;
           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>`;
@@ -1188,18 +1426,22 @@
       const focusKey = focusedElement instanceof HTMLElement && this.contains(focusedElement) ? this._focusTargetKey(focusedElement) : "";
       const yearFirst = monthYearOrder(locale)[0] === "year";
       this.toggleAttribute("data-year-first", yearFirst);
+      const classes = this._controlClasses;
+      const monthClass = escapeHtml(classes.month || "dp-skin");
+      const yearClass = escapeHtml(classes.year || "dp-skin");
+      const navClass = escapeHtml(classes.nav || "dp-skin");
       const monthControl = `<label class="dp-visually-hidden" for="${this._id}-month">${escapeHtml(this._messages.month)}</label>
-          <select id="${this._id}-month" class="dp-month-select" aria-label="${escapeHtml(this._messages.month)}">${monthOptions}</select>`;
+          <select id="${this._id}-month" class="dp-month-select ${monthClass}" aria-label="${escapeHtml(this._messages.month)}">${monthOptions}</select>`;
       const yearControl = `<label class="dp-visually-hidden" for="${this._id}-year">${escapeHtml(this._messages.year)}</label>
-          <input id="${this._id}-year" class="dp-year-input" type="number" inputmode="numeric" value="${displayYear}"${minYearAttr}${maxYearAttr} aria-label="${escapeHtml(this._messages.year)}">`;
+          <input id="${this._id}-year" class="dp-year-input ${yearClass}" type="number" inputmode="numeric" value="${displayYear}"${minYearAttr}${maxYearAttr} aria-label="${escapeHtml(this._messages.year)}">`;
       this._rendering = true;
       this.innerHTML = `
       <div class="dp-calendar-shell">
         <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 ${navClass}" 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 ${navClass}" 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 +1450,8 @@
         </table>
       </div>`;
       this._rendering = false;
+      this._paintedRange = { ...this._highlightedRange };
+      this._paintedPreview = this.hasAttribute("data-range-preview");
       if (focusKey) {
         queueMicrotask(() => {
           let selector = focusKey;
@@ -1227,7 +1471,7 @@
           const extra = cell.querySelector(".dp-day-extra");
           if (!(extra instanceof HTMLElement))
             continue;
-          const content = this._renderDay(date, this.getDateState(date));
+          const content = this._renderDay(date, this._renderedStates.get(date) || {});
           if (content instanceof Node)
             extra.append(content);
           else if (content !== undefined && content !== null)
@@ -1243,13 +1487,15 @@
   function crossAxisFor(side) {
     return side === "top" || side === "bottom" ? "x" : "y";
   }
+  var OPPOSITE = { top: "bottom", bottom: "top", left: "right", right: "left" };
+  var PLACEMENTS = new Set(Object.keys(OPPOSITE).flatMap((side) => [side, `${side}-start`, `${side}-end`]));
+  var COORDINATE_SPACES = new Set(["viewport", "document"]);
   function parsePlacement(placement) {
+    if (!PLACEMENTS.has(placement))
+      throw new TypeError(`Unknown placement: ${placement}`);
     const [side, align = null] = placement.split("-");
     return { side, align, crossAxis: crossAxisFor(side) };
   }
-  function flipSide(side) {
-    return { top: "bottom", bottom: "top", left: "right", right: "left" }[side] || side;
-  }
   function computeCoords(reference, floating, side, align, rtl, distance) {
     const crossAxis = crossAxisFor(side);
     const commonX = reference.x + reference.width / 2 - floating.width / 2;
@@ -1281,17 +1527,12 @@
   function overflowOn(position, size, start, end) {
     return Math.max(start - position, 0) + Math.max(position + size - end, 0);
   }
-  function isRTL(element) {
-    const direction = "dir" in element ? element.dir : "";
-    if (direction === "rtl")
-      return true;
-    if (direction === "ltr")
-      return false;
-    const win = element.ownerDocument?.defaultView;
-    if (win?.CSS?.supports?.("selector(:dir(rtl))") && typeof element.matches === "function") {
-      return element.matches(":dir(rtl)");
+  function isRTL(reference) {
+    const win = reference.ownerDocument?.defaultView;
+    if (win && reference instanceof win.Element) {
+      return win.getComputedStyle(reference).direction === "rtl";
     }
-    return Boolean(win?.Element && element instanceof win.Element && win.getComputedStyle(element).direction === "rtl");
+    return "dir" in reference && reference.dir === "rtl";
   }
   var STABLE_SCROLLBAR_MAX_WIDTH = 25;
   function getViewportBoundary(doc) {
@@ -1329,8 +1570,14 @@
     const percent = (referenceCenter - boxStart) / size * 100;
     return Math.round(Math.min(100, Math.max(0, percent)) * 1000) / 1000;
   }
-  function isOutsideBoundary(rect, boundary) {
-    return rect.right < boundary.x || rect.left > boundary.right || rect.bottom < boundary.y || rect.top > boundary.bottom;
+  function isOutsideBoundary(rects, boundary) {
+    for (let i = 0;i < rects.length; i++) {
+      const rect = rects[i];
+      if (rect.right >= boundary.x && rect.left <= boundary.right && rect.bottom >= boundary.y && rect.top <= boundary.bottom) {
+        return false;
+      }
+    }
+    return true;
   }
   function getAvailableHeight(referenceRect, side, boundary, distance, padding) {
     if (side === "top") {
@@ -1385,10 +1632,22 @@
         for (const [subscription, type] of notifications) {
           if (!subscriptions.has(subscription) || !subscription.floating.isConnected)
             continue;
-          subscription.callback({ type });
+          try {
+            subscription.callback({ type });
+          } catch (error) {
+            reportError(error);
+          }
         }
       });
     }
+    function reportError(error) {
+      if (typeof win.reportError === "function")
+        win.reportError(error);
+      else
+        win.setTimeout(() => {
+          throw error;
+        });
+    }
     function notifyAll(type) {
       for (const subscription of subscriptions)
         queue(subscription, type);
@@ -1479,28 +1738,32 @@
     return trackerFor(floating).add(reference, floating, callback);
   }
   function positionOnce(reference, floating, options) {
+    const placement = options.placement === undefined ? "bottom-start" : options.placement;
+    let { side, align, crossAxis } = parsePlacement(placement);
+    const coordinateSpace = options.coordinateSpace === undefined ? "viewport" : options.coordinateSpace;
+    if (!COORDINATE_SPACES.has(coordinateSpace)) {
+      throw new TypeError(`Unknown coordinateSpace: ${coordinateSpace}`);
+    }
     if (!isVisible(floating))
       return null;
-    const placement = options.placement || "bottom-start";
     const distance = options.distance || 0;
     const flip = options.flip !== false;
     const shift = options.shift !== false;
     const shiftPadding = options.shiftPadding ?? 4;
-    let { side, align, crossAxis } = parsePlacement(placement);
     const rtl = align ? isRTL(reference) : false;
     const rects = reference.getClientRects();
-    const referenceRect = side === "bottom" ? rects[rects.length - 1] : rects[0];
-    if (!referenceRect)
+    if (!rects.length)
       return null;
+    const rectFor = (s) => s === "bottom" ? rects[rects.length - 1] : rects[0];
     const boundary = getBoundary(reference, options);
-    if (!boundary || isOutsideBoundary(referenceRect, boundary))
+    if (!boundary || isOutsideBoundary(rects, boundary))
       return null;
     const floatingRect = getFloatingSize(floating);
     const limits = {
       x: { size: floatingRect.width, start: boundary.x, end: boundary.right },
       y: { size: floatingRect.height, start: boundary.y, end: boundary.bottom }
     };
-    const place = (nextSide, nextAlign) => computeCoords(referenceRect, floatingRect, nextSide, nextAlign, rtl, distance);
+    const place = (nextSide, nextAlign) => computeCoords(rectFor(nextSide), floatingRect, nextSide, nextAlign, rtl, distance);
     const overflowAt = (position, axis) => {
       const { size, start, end } = limits[axis];
       return overflowOn(position, size, start + shiftPadding, end - shiftPadding);
@@ -1510,31 +1773,30 @@
       return overflowAt(shift ? clampToBoundary(position, size, start, end, shiftPadding) : position, axis);
     };
     let coords = place(side, align);
+    const overflowFor = (nextSide, at) => {
+      const cross = crossAxisFor(nextSide);
+      const main = cross === "x" ? "y" : "x";
+      const mainOverflow = overflowAt(at[main], main);
+      return { main: mainOverflow, total: mainOverflow + shiftedOverflowAt(at[cross], cross) };
+    };
     if (flip) {
-      const mainAxis = crossAxis === "x" ? "y" : "x";
-      let overflow = overflowAt(coords[mainAxis], mainAxis);
-      if (overflow > 0) {
-        const opposite = flipSide(side);
-        const flipped = place(opposite, align);
-        const flippedOverflow = overflowAt(flipped[mainAxis], mainAxis);
-        if (flippedOverflow < overflow) {
-          side = opposite;
-          coords = flipped;
-          overflow = flippedOverflow;
-        }
-      }
-      if (mainAxis === "x" && overflow > 0) {
-        const above = place("top", align);
-        const below = place("bottom", align);
-        const useBottom = overflowAt(below.y, "y") < overflowAt(above.y, "y");
-        const candidate = useBottom ? below : above;
-        const swapped = overflowAt(candidate.y, "y") + shiftedOverflowAt(candidate.x, "x");
-        if (swapped < overflow + shiftedOverflowAt(coords.y, "y")) {
-          side = useBottom ? "bottom" : "top";
-          crossAxis = "x";
-          coords = candidate;
+      let best = overflowFor(side, coords);
+      const consider = (nextSide) => {
+        const next = place(nextSide, align);
+        const overflow = overflowFor(nextSide, next);
+        if (overflow.total < best.total) {
+          side = nextSide;
+          coords = next;
+          best = overflow;
         }
+      };
+      if (best.main > 0)
+        consider(OPPOSITE[side]);
+      if (crossAxis === "y" && best.main > 0) {
+        consider("top");
+        consider("bottom");
       }
+      crossAxis = crossAxisFor(side);
     }
     if (crossAxis === "x" && shift && align) {
       const overflow = overflowAt(coords.x, "x");
@@ -1551,12 +1813,13 @@
       const { size, start, end } = limits[crossAxis];
       coords[crossAxis] = clampToBoundary(coords[crossAxis], size, start, end, shiftPadding);
     }
-    const arrowX = arrowPercent(referenceRect.x + referenceRect.width / 2, coords.x, floatingRect.width);
-    const arrowY = arrowPercent(referenceRect.y + referenceRect.height / 2, coords.y, floatingRect.height);
-    const availableHeight = `${getAvailableHeight(referenceRect, side, boundary, distance, shiftPadding)}px`;
+    const resolvedRect = rectFor(side);
+    const arrowX = arrowPercent(resolvedRect.x + resolvedRect.width / 2, coords.x, floatingRect.width);
+    const arrowY = arrowPercent(resolvedRect.y + resolvedRect.height / 2, coords.y, floatingRect.height);
+    const availableHeight = `${getAvailableHeight(resolvedRect, side, boundary, distance, shiftPadding)}px`;
     const { style } = floating;
     const roomChanged = style.getPropertyValue("--available-height") !== availableHeight;
-    const win = options.coordinateSpace === "document" ? reference.ownerDocument.defaultView : null;
+    const win = coordinateSpace === "document" ? reference.ownerDocument.defaultView : null;
     const originX = win ? win.scrollX : 0;
     const originY = win ? win.scrollY : 0;
     style.left = `${coords.x + originX}px`;
@@ -1684,9 +1947,9 @@
         input.setCustomValidity("");
         return;
       }
-      input.setCustomValidity(text === canonical ? "" : this.messages.invalidDate);
+      input.setCustomValidity(this.messages.invalidDate);
     }
-    async commit() {
+    async commit(options = {}) {
       const input = this.input;
       const commitId = ++this._commitId;
       const text = input.value.trim();
@@ -1706,7 +1969,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 +2041,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 +2061,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;
@@ -1810,6 +2077,7 @@
       this._open = false;
       this._suppressFocusOpen = false;
       this._messages = getDefaultMessages();
+      this._controlClasses = getDefaultControlClasses();
       this._source = null;
       this._dateState = null;
       this._renderDay = null;
@@ -1839,7 +2107,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 +2171,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();
@@ -2064,6 +2332,17 @@
     get open() {
       return this._open;
     }
+    get controlClasses() {
+      return { ...this._controlClasses };
+    }
+    set controlClasses(value) {
+      const classes = resolveControlClasses(value);
+      if (sameControlClasses(classes, this._controlClasses))
+        return;
+      this._controlClasses = classes;
+      if (this._calendar)
+        this._calendar.controlClasses = this._controlClasses;
+    }
     get messages() {
       return this._messages;
     }
@@ -2148,6 +2427,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);
@@ -2226,6 +2506,23 @@
       this._refreshLocale();
       this._refreshButtonLabel();
     }
+    _bindPopup(signal, input, restore) {
+      this.ownerDocument.addEventListener("pointerdown", (event) => {
+        if (!this._open || event.composedPath().includes(this))
+          return;
+        this.hide(false);
+      }, { capture: true, signal });
+      this.ownerDocument.addEventListener("reset", (event) => {
+        if (!(event.target instanceof HTMLFormElement) || !input || event.target !== input.form)
+          return;
+        this.hide(false);
+        queueMicrotask(() => {
+          if (!event.defaultPrevented)
+            restore();
+        });
+      }, { capture: true, signal });
+      this.addEventListener("keydown", (event) => this._onEscape(event), { signal });
+    }
     _bind() {
       const input = this._input;
       const button = this._buttons[0]?.button;
@@ -2288,22 +2585,7 @@
         });
       }, { signal });
       calendar.addEventListener("dateloadend", () => void this.validate(), { signal });
-      this.ownerDocument.addEventListener("pointerdown", (event) => {
-        if (!this._open || event.composedPath().includes(this))
-          return;
-        this.hide(false);
-      }, { capture: true, signal });
-      this.ownerDocument.addEventListener("reset", (event) => {
-        const form = event.target;
-        if (form instanceof HTMLFormElement && this._input && form === this._input.form) {
-          this.hide(false);
-          queueMicrotask(() => {
-            if (!event.defaultPrevented)
-              this._restoreDefault();
-          });
-        }
-      }, { capture: true, signal });
-      this.addEventListener("keydown", (event) => this._onEscape(event), { signal });
+      this._bindPopup(signal, this._input, () => this._restoreDefault());
     }
     _bindRange() {
       const calendar = this._calendar;
@@ -2331,7 +2613,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 +2634,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,30 +2647,25 @@
             }));
             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))
-          return;
-        this.hide(false);
-      }, { capture: true, signal });
-      this.ownerDocument.addEventListener("reset", (event) => {
-        const form = event.target;
-        if (form instanceof HTMLFormElement && this._fields && form === this._fields[0].input.form) {
-          this.hide(false);
-          queueMicrotask(() => {
-            if (!event.defaultPrevented)
-              this._restoreRangeDefault();
-          });
-        }
-      }, { capture: true, signal });
-      this.addEventListener("keydown", (event) => this._onEscape(event), { signal });
+      this._bindPopup(signal, this._fields?.[0]?.input, () => this._restoreRangeDefault());
     }
     _activateRangeEndpoint(endpoint) {
       const calendar = this._calendar;
@@ -2396,6 +2678,7 @@
       const target = this._boundCanonical(endpoint) || todayISO();
       calendar.display = monthKey(target);
       calendar.focusedDate = target;
+      this._clearPreview();
     }
     _onRangeTriggerClick(endpoint, event) {
       if (!this._open) {
@@ -2478,7 +2761,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) {
@@ -2496,6 +2962,7 @@
       calendar.min = this.min;
       calendar.max = this.max;
       calendar.monthFormat = this.monthFormat;
+      calendar.controlClasses = this._controlClasses;
       calendar.messages = this._messages;
       calendar.source = this._source;
       calendar.dateState = this._dateState;
@@ -2581,7 +3048,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 +3061,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 +3082,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 +3164,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 +3300,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 +3316,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 +3379,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();