@lekoala/date-picker 0.5.2 → 0.6.0

package/dist/date-picker.js

@@ -1,4 +1,4 @@
-/*** @lekoala/date-picker v0.5.2 - https://github.com/lekoala/date-picker ***/
+/*** @lekoala/date-picker v0.6.0 - https://github.com/lekoala/date-picker ***/
 (() => {
   var __defProp = Object.defineProperty;
   var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -78,9 +78,11 @@
     const text = String(value || "");
     const monthMatch = MONTH_RE.exec(text);
     if (monthMatch) {
+      const year = Number(monthMatch[1]);
       const month = Number(monthMatch[2]);
-      if (month >= 1 && month <= 12)
+      if (year >= 1 && year <= 9999 && month >= 1 && month <= 12) {
         return `${monthMatch[1]}-${String(month).padStart(2, "0")}`;
+      }
     }
     const parsed = parseDate(text);
     if (!parsed)
@@ -471,28 +473,12 @@
         ...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) {
+    previewRange(date, editable = () => true) {
       if (!isDate(date))
         return null;
-      if (!endpoint && Boolean(this.start) === Boolean(this.end))
+      if (Boolean(this.start) === Boolean(this.end))
         return null;
-      const transition = endpoint ? this.projectEndpoint(date, endpoint, editable) : this.project(date, editable);
+      const transition = this.project(date, editable);
       if (transition.status === "refused")
         return null;
       const { start, end } = transition.range;
@@ -511,23 +497,6 @@
     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
@@ -742,6 +711,17 @@
     };
   }
 
+  // src/session.js
+  function createSession() {
+    return new AbortController;
+  }
+  function guard(signal, callback) {
+    return () => {
+      if (!signal.aborted)
+        callback();
+    };
+  }
+
   // src/source.js
   function normalizeDateStates(payload) {
     const raw = payload && typeof payload === "object" && !Array.isArray(payload) && "dates" in payload ? payload.dates : payload;
@@ -849,7 +829,10 @@
       this._id = `date-calendar-${++uid}`;
       this._model = new CalendarModel;
       this._connected = false;
+      this._session = null;
       this._rendering = false;
+      this._heading = null;
+      this._renderRoot = null;
       this._source = null;
       this._hostIntent = null;
       this._sourceStates = new Map;
@@ -876,6 +859,7 @@
     connectedCallback() {
       if (this._connected)
         return;
+      this._session = createSession();
       upgradeProperties(this, [
         "locale",
         "min",
@@ -895,7 +879,10 @@
         "value",
         "display"
       ]);
+      this._normalizeAttributes();
       this._syncModel();
+      if (this.hasAttribute("display"))
+        this._reflect("display", this._model.display);
       upgradeProperties(this, ["focusedDate"]);
       this._stopDefaultControlClasses = subscribeDefaultControlClasses(() => {
         if (usesDefaultControlClasses(this._controlClasses))
@@ -906,10 +893,11 @@
           this.render();
       });
       this._connected = true;
-      this.addEventListener("click", this._onClick);
-      this.addEventListener("change", this._onChange);
-      this.addEventListener("keydown", this._onKeyDown);
-      this.addEventListener("focusin", this._onFocusIn);
+      const { signal } = this._session;
+      this.addEventListener("click", this._onClick, { signal });
+      this.addEventListener("change", this._onChange, { signal });
+      this.addEventListener("keydown", this._onKeyDown, { signal });
+      this.addEventListener("focusin", this._onFocusIn, { signal });
       this.render();
     }
     disconnectedCallback() {
@@ -922,17 +910,55 @@
       this._loadController = null;
       this._loadingKey = "";
       this._loadingPromise = null;
-      this.removeEventListener("click", this._onClick);
-      this.removeEventListener("change", this._onChange);
-      this.removeEventListener("keydown", this._onKeyDown);
-      this.removeEventListener("focusin", this._onFocusIn);
+      this.removeAttribute("data-loading");
+      this._session?.abort();
+      this._session = null;
+    }
+    _normalizeAttributes() {
+      const value = this.getAttribute("value");
+      if (value && !isDate(value))
+        this.removeAttribute("value");
+      for (const name of ["min", "max"]) {
+        const raw = this.getAttribute(name);
+        if (raw && !isDate(raw))
+          this.removeAttribute(name);
+      }
     }
-    attributeChangedCallback() {
-      if (!this._connected || this._rendering)
+    attributeChangedCallback(name, _oldValue, newValue) {
+      if (this._rendering)
+        return;
+      if (!this._connected)
+        return;
+      if (name === "value" && newValue && !isDate(newValue)) {
+        this._reflect("value", this._model.value);
+        return;
+      }
+      if ((name === "min" || name === "max") && newValue && !isDate(newValue)) {
+        this._reflect(name, "");
+        if (this._connected) {
+          this._syncModel();
+          this.render();
+        }
         return;
+      }
+      if (name === "display" && newValue) {
+        try {
+          if (monthKey(newValue) !== newValue)
+            throw new TypeError("Non-canonical month");
+        } catch {
+          this._reflect("display", this._model.display);
+          return;
+        }
+      }
       this._syncModel();
       this.render();
     }
+    _queueFocus(callback) {
+      const session = this._session;
+      if (!session)
+        return;
+      queueMicrotask(guard(session.signal, callback));
+    }
     get locale() {
       return resolveLocale(this.getAttribute("locale") || "");
     }
@@ -1220,11 +1246,9 @@
         } finally {
           if (this._loadController === controller) {
             this._loadController = null;
-            this.removeAttribute("data-loading");
-          }
-          if (this._loadingKey === key) {
             this._loadingKey = "";
             this._loadingPromise = null;
+            this.removeAttribute("data-loading");
           }
         }
       })();
@@ -1273,7 +1297,7 @@
         this._moveFocusDom(previousFocused, this._model.focused, moveFocus);
       }
       if (moveFocus)
-        queueMicrotask(() => this.focusGrid());
+        this._queueFocus(() => this.focusGrid());
     }
     _moveFocusDom(previous, next, moveFocus = true) {
       const prevCell = previous ? this.querySelector(`.dp-day[data-date="${CSS.escape(previous)}"]`) : null;
@@ -1357,6 +1381,9 @@
         target.focus();
     }
     async activateDate(date) {
+      if (!this._connected)
+        return false;
+      const session = this._session;
       const hostIntent = this._hostIntent?.date === date ? this._hostIntent.intent : undefined;
       this._hostIntent = null;
       const tagged = (event) => {
@@ -1365,6 +1392,8 @@
         return event;
       };
       const confirmed = await this.ensureDate(date);
+      if (!session || session.signal.aborted)
+        return false;
       const state = this.getDateState(date);
       if (!confirmed || state.disabled) {
         this.dispatchEvent(tagged(new CustomEvent("dateinvalid", { detail: { date, state }, bubbles: true })));
@@ -1375,7 +1404,7 @@
         bubbles: true,
         cancelable: true
       })));
-      if (!accepted)
+      if (!accepted || session.signal.aborted)
         return false;
       if (this.selection === "single") {
         const previousValue = this._model.value;
@@ -1549,8 +1578,20 @@
           <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 ${yearClass}" type="number" inputmode="numeric" value="${displayYear}"${minYearAttr}${maxYearAttr} aria-label="${escapeHtml(this.messages.year)}">`;
+      if (!this._heading?.isConnected || !this._renderRoot?.isConnected) {
+        this.replaceChildren();
+        const heading = document.createElement("h2");
+        heading.id = headingId;
+        heading.className = "dp-calendar-heading dp-visually-hidden";
+        heading.setAttribute("aria-live", "polite");
+        const renderRoot = document.createElement("div");
+        renderRoot.className = "dp-calendar-render";
+        this.append(heading, renderRoot);
+        this._heading = heading;
+        this._renderRoot = renderRoot;
+      }
       this._rendering = true;
-      this.innerHTML = `
+      this._renderRoot.innerHTML = `
       <div class="dp-calendar-shell">
         <div class="dp-calendar-header">
           ${yearFirst ? yearControl : monthControl}
@@ -1558,17 +1599,17 @@
           <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}">
           <thead><tr>${weekHeader}${dayHeaders}</tr></thead>
           <tbody>${rows}</tbody>
         </table>
       </div>`;
+      this._heading.textContent = formatMonthYear(`${display}-15`, locale);
       this._rendering = false;
       this._paintedRange = { ...this._highlightedRange };
       this._paintedPreview = this.hasAttribute("data-range-preview");
       if (focusKey) {
-        queueMicrotask(() => {
+        this._queueFocus(() => {
           let selector = focusKey;
           if (selector.startsWith(".dp-day[data-date=")) {
             selector = `.dp-day[data-date="${CSS.escape(this._model.focused)}"]`;
@@ -1982,6 +2023,7 @@
       this.canonical = "";
       this._dirty = false;
       this._commitId = 0;
+      this._session = createSession();
       this._originalName = input.getAttribute("name") || "";
       this._attributeObserver = null;
       this.onAttributesChanged = null;
@@ -2084,34 +2126,41 @@
     async commit(options = {}) {
       const input = this.input;
       const commitId = ++this._commitId;
+      const session = this._session;
+      if (session.signal.aborted)
+        return { status: "stale", commitId };
       const text = input.value.trim();
       if (!text) {
         if (commitId !== this._commitId)
-          return { status: "stale" };
+          return { status: "stale", commitId };
         input.setCustomValidity("");
-        return { status: "clear", value: "" };
+        return { status: "clear", value: "", commitId };
       }
       const parsed = this.adapter.parse(text);
       if (!parsed) {
         if (commitId !== this._commitId)
-          return { status: "stale" };
+          return { status: "stale", commitId };
         if (this.hidden)
           this.hidden.value = "";
         input.setCustomValidity(this.messages.invalidDate);
-        return { status: "invalid" };
+        return { status: "invalid", commitId };
       }
       if (this.confirm) {
         const result = await this.confirm(parsed, options);
-        if (commitId !== this._commitId)
-          return { status: "stale" };
+        if (session.signal.aborted || commitId !== this._commitId) {
+          return { status: "stale", commitId };
+        }
         if (!result?.ok) {
           if (this.hidden)
             this.hidden.value = "";
           input.setCustomValidity(result?.message || this.messages.unavailableDate);
-          return { status: "invalid" };
+          return { status: "invalid", commitId };
         }
       }
-      return { status: "ok", value: parsed };
+      return { status: "ok", value: parsed, commitId };
+    }
+    isCommitCurrent(commitId) {
+      return commitId === this._commitId;
     }
     setCanonical(value, options = {}) {
       const next = value || "";
@@ -2132,6 +2181,8 @@
       return parsed && isDate(parsed) ? parsed : "";
     }
     teardown() {
+      this.dirty();
+      this._session.abort();
       this._attributeObserver?.disconnect();
       this._attributeObserver = null;
       const hiddenName = this.hidden?.getAttribute("name") || this._originalName;
@@ -2173,7 +2224,6 @@
 
   // 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"];
@@ -2205,8 +2255,6 @@
       this._lastFocusEndpoint = "";
       this._activationId = 0;
       this._previewDate = "";
-      this._drag = null;
-      this._suppressGridClick = false;
       this._buttons = [];
       this._returnFocus = null;
       this._panel = null;
@@ -2214,8 +2262,8 @@
       this._originalDescribedBy = "";
       this._rangeOriginalDescribedBy = ["", ""];
       this._formatHint = null;
-      this._generatedPlaceholder = false;
-      this._controller = null;
+      this._generatedPlaceholders = new WeakSet;
+      this._session = null;
       this._stopTracking = null;
       this._open = false;
       this._suppressFocusOpen = false;
@@ -2234,6 +2282,7 @@
     connectedCallback() {
       if (this._connected)
         return;
+      this._session = createSession();
       upgradeProperties(this, [
         "locale",
         "min",
@@ -2248,17 +2297,31 @@
         "renderDay",
         "isDateDisabled"
       ]);
+      this._normalizeAttributes();
       if (this.hasAttribute("range"))
         this._connectRange();
       else
         this._connectSingle();
-      if (this._connected) {
-        upgradeProperties(this, ["value", "range"]);
-        this._stopDefaultMessages = subscribeDefaultMessages(() => {
-          if (this._messages === null)
-            this._refreshMessages();
-        });
-        this.validate();
+      if (!this._connected) {
+        this._session.abort();
+        this._session = null;
+        return;
+      }
+      upgradeProperties(this, ["value", "range"]);
+      this._stopDefaultMessages = subscribeDefaultMessages(() => {
+        if (this._messages === null)
+          this._refreshMessages();
+      });
+      this.validate();
+    }
+    _normalizeAttributes() {
+      const value = this.getAttribute("value");
+      if (value && !isDate(value))
+        this.removeAttribute("value");
+      for (const name of ["min", "max"]) {
+        const raw = this.getAttribute(name);
+        if (raw && !isDate(raw))
+          this.removeAttribute(name);
       }
     }
     _connectSingle() {
@@ -2368,9 +2431,10 @@
       this._stopDefaultMessages?.();
       this._stopDefaultMessages = null;
       this._connected = false;
+      this._suppressFocusOpen = false;
       this.hide(false);
-      this._controller?.abort();
-      this._controller = null;
+      this._session?.abort();
+      this._session = null;
       this._clearTimeOrderValidity();
       this._timeFields = [null, null];
       if (this._rangeMode()) {
@@ -2408,8 +2472,22 @@
       input.removeAttribute("aria-controls");
     }
     attributeChangedCallback(name, oldValue, newValue) {
-      if (!this._connected || this._reflecting || oldValue === newValue)
+      if (this._reflecting || oldValue === newValue)
+        return;
+      if (!this._connected)
         return;
+      if (name === "value" && newValue && !isDate(newValue)) {
+        this._reflectValue(this._value);
+        return;
+      }
+      if ((name === "min" || name === "max") && newValue && !isDate(newValue)) {
+        this.removeAttribute(name);
+        if (this._connected) {
+          this._syncCalendarOptions();
+          this.validate();
+        }
+        return;
+      }
       if (name === "value") {
         if (this._rangeMode())
           return;
@@ -2605,7 +2683,6 @@
         const field = this._fields[index];
         button.disabled = Boolean(field?.input.disabled || field?.input.readOnly);
       }
-      this._syncDragAffordance();
       const active = this._range?.activeEndpoint === "end" ? 1 : 0;
       const activeInput = this._fields[active]?.input;
       if (this._open && activeInput && !isEditable(activeInput))
@@ -2694,10 +2771,10 @@
         if (!(event.target instanceof HTMLFormElement) || !input || event.target !== input.form)
           return;
         this.hide(false);
-        queueMicrotask(() => {
+        queueMicrotask(guard(signal, () => {
           if (!event.defaultPrevented)
             restore();
-        });
+        }));
       }, { capture: true, signal });
       this.addEventListener("keydown", (event) => this._onEscape(event), { signal });
     }
@@ -2707,9 +2784,10 @@
       const calendar = this._calendar;
       if (!input || !button || !calendar)
         return;
-      const controller = new AbortController;
-      this._controller = controller;
-      const { signal } = controller;
+      const session = this._session;
+      if (!session)
+        return;
+      const { signal } = session;
       input.addEventListener("input", () => {
         this._field?.handleInput();
       }, { signal });
@@ -2737,7 +2815,7 @@
       button.addEventListener("click", (event) => {
         if (this._open) {
           if (event.detail === 0) {
-            setTimeout(() => this._calendar?.focusGrid(), 0);
+            this._defer(() => this._calendar?.focusGrid());
             return;
           }
           this.hide(false);
@@ -2758,7 +2836,7 @@
           return;
         const intent = activationIntents.get(custom);
         queueMicrotask(() => {
-          if (custom.defaultPrevented || !this._connected)
+          if (signal.aborted || custom.defaultPrevented)
             return;
           if (intent && intent.id !== this._activationId)
             return;
@@ -2777,9 +2855,10 @@
       const calendar = this._calendar;
       if (!this._fields || !this._buttons.length || !calendar)
         return;
-      const controller = new AbortController;
-      this._controller = controller;
-      const { signal } = controller;
+      const session = this._session;
+      if (!session)
+        return;
+      const { signal } = session;
       for (const [index, field] of this._fields.entries()) {
         const endpoint = index === 1 ? "end" : "start";
         field.input.addEventListener("input", () => {
@@ -2805,12 +2884,6 @@
         });
       }
       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), {
@@ -2823,13 +2896,13 @@
         if (!isDate(date))
           return;
         queueMicrotask(() => {
-          if (custom.defaultPrevented || !this._connected || !this._range)
+          if (signal.aborted || custom.defaultPrevented || !this._range)
             return;
           const intent = activationIntents.get(custom);
           if (intent === undefined || intent.id !== this._activationId)
             return;
           const editable = (bound) => this._boundEditable(bound);
-          const result = intent.endpoint ? this._range.moveEndpoint(date, intent.endpoint, editable) : this._range.activate(date, editable);
+          const result = this._range.activate(date, editable);
           if (result.status === "refused") {
             this._calendar?.dispatchEvent(new CustomEvent("dateinvalid", {
               detail: { date, state: this._calendar.getDateState(date) },
@@ -2838,8 +2911,6 @@
             return;
           }
           this._applyRangeTransition(result);
-          if (intent.endpoint)
-            return;
           if (result.close || result.status === "complete") {
             this.hide(false);
             this._focusField(result.endpoint);
@@ -2849,11 +2920,6 @@
       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._bindPopup(signal, this._fields?.[0]?.input, () => this._restoreRangeDefault());
     }
@@ -2876,7 +2942,7 @@
       }
       if (event.detail === 0) {
         this._activateRangeEndpoint(endpoint);
-        setTimeout(() => this._calendar?.focusGrid(), 0);
+        this._defer(() => this._calendar?.focusGrid());
         return;
       }
       if (endpoint !== this._range?.activeEndpoint) {
@@ -2892,7 +2958,7 @@
       if (this._open) {
         if (this._rangeMode() && endpoint)
           this._activateRangeEndpoint(endpoint);
-        setTimeout(() => this._calendar?.focusGrid(), 0);
+        this._defer(() => this._calendar?.focusGrid());
         return;
       }
       if (this._rangeMode())
@@ -2908,7 +2974,7 @@
           this._range?.focus(endpoint);
         }
         if (this._open) {
-          setTimeout(() => this._calendar?.focusGrid(), 0);
+          this._defer(() => this._calendar?.focusGrid());
         } else {
           this.show();
         }
@@ -2942,20 +3008,18 @@
         if (key !== "Enter" && key !== " ")
           return;
       }
-      if (event.type === "click" && this._suppressGridClick)
-        return;
       if (!(event.target instanceof Element))
         return;
       const cell = event.target.closest(".dp-day[data-date]");
       const date = cell?.getAttribute("data-date") || "";
       if (!isDate(date))
         return;
-      this._attachIntent(date, "");
+      this._attachIntent(date);
     }
-    _attachIntent(date, endpoint) {
+    _attachIntent(date) {
       if (!this._calendar)
         return;
-      this._calendar._hostIntent = { date, intent: { id: ++this._activationId, endpoint } };
+      this._calendar._hostIntent = { date, intent: { id: ++this._activationId } };
     }
     _supersedeActivations() {
       this._activationId++;
@@ -2988,12 +3052,12 @@
         field.input.dispatchEvent(new Event("change", { bubbles: true }));
       }
     }
-    _setPreview(date, endpoint = "") {
+    _setPreview(date) {
       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;
+      const preview = candidate ? this._range.previewRange(candidate, (bound) => this._boundEditable(bound)) : null;
       if (!preview) {
         this._clearPreview();
         return;
@@ -3008,23 +3072,17 @@
       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")
+      if (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) {
@@ -3032,116 +3090,6 @@
       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._attachIntent(target, 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) {
         event.preventDefault();
@@ -3178,9 +3126,9 @@
         this._fields[1].setLocale(this.locale);
         hint.textContent = `${this.messages.formatHint}: ${this._fields[0].placeholder}`;
         for (const [index, field] of this._fields.entries()) {
-          if (!field.input.hasAttribute("placeholder") || this._generatedPlaceholder) {
+          if (!field.input.hasAttribute("placeholder") || this._generatedPlaceholders.has(field.input)) {
             field.input.placeholder = field.placeholder;
-            this._generatedPlaceholder = true;
+            this._generatedPlaceholders.add(field.input);
           }
           const canonical = index === 1 ? this._range?.end || "" : this._range?.start || "";
           if (canonical)
@@ -3194,9 +3142,9 @@
         return;
       field.setLocale(this.locale);
       hint.textContent = `${this.messages.formatHint}: ${field.placeholder}`;
-      if (!field.input.hasAttribute("placeholder") || this._generatedPlaceholder) {
+      if (!field.input.hasAttribute("placeholder") || this._generatedPlaceholders.has(field.input)) {
         field.input.placeholder = field.placeholder;
-        this._generatedPlaceholder = true;
+        this._generatedPlaceholders.add(field.input);
       }
       if (this._value)
         field.input.value = field.format(this._value);
@@ -3274,11 +3222,15 @@
     }
     async _commitText(emit, options = {}) {
       const field = this._field;
-      if (!field)
+      const session = this._session;
+      if (!field || !session)
         return false;
       if (!options.force && !field.isDirty)
         return false;
       const result = await field.commit(options);
+      if (session.signal.aborted || !field.isCommitCurrent(result.commitId)) {
+        return false;
+      }
       if (result.status === "stale" || result.status === "invalid")
         return false;
       this._setValue(result.value || "", {
@@ -3290,13 +3242,16 @@
     }
     async _commitFieldText(which) {
       const fields = this._fields;
-      if (!fields)
+      const session = this._session;
+      if (!fields || !session)
         return false;
       const index = which === "end" ? 1 : 0;
       const field = fields[index];
       if (!field?.isDirty)
         return false;
       const result = await field.commit();
+      if (session.signal.aborted || !field.isCommitCurrent(result.commitId))
+        return false;
       if (result.status === "stale")
         return false;
       if (result.status === "invalid") {
@@ -3374,7 +3329,6 @@
       this._previewDate = "";
       this._calendar.removeAttribute("data-range-preview");
       this._calendar.highlightedRange = this._displayRange();
-      this._syncDragAffordance();
     }
     _revalidateRange(which) {
       if (!this._fields || !this._range)
@@ -3423,6 +3377,12 @@
         input.setCustomValidity("");
       this._timeOrderOwned.clear();
     }
+    _defer(callback) {
+      const session = this._session;
+      if (!session)
+        return;
+      setTimeout(guard(session.signal, callback), 0);
+    }
     _restoreDefault() {
       const field = this._field;
       if (!field)
@@ -3459,10 +3419,10 @@
       if (!input)
         return;
       this._suppressFocusOpen = true;
-      setTimeout(() => {
+      this._defer(() => {
         input.focus();
         this._suppressFocusOpen = false;
-      }, 0);
+      });
     }
     _restoreFocus() {
       const target = this._returnFocus;
@@ -3470,10 +3430,10 @@
       if (!(target instanceof HTMLElement) || !target.isConnected || target.matches(":disabled"))
         return;
       this._suppressFocusOpen = true;
-      setTimeout(() => {
+      this._defer(() => {
         target.focus();
         this._suppressFocusOpen = false;
-      }, 0);
+      });
     }
     _resolveRangeEndpoint() {
       if (!this._fields)
@@ -3491,12 +3451,18 @@
       return "";
     }
     async validate() {
+      const session = this._session;
       if (this._rangeMode()) {
         const fields = this._fields;
         if (!fields)
           return true;
         for (const [index, field] of fields.entries()) {
           const result = await field.commit({ moveDisplay: false });
+          if (!session || session.signal.aborted) {
+            return fields.every((field) => field.input.checkValidity());
+          }
+          if (!field.isCommitCurrent(result.commitId))
+            continue;
           if (result.status === "invalid")
             this._orderTags.delete(index);
           if (result.status === "ok" || result.status === "clear") {
@@ -3509,9 +3475,15 @@
         return fields.every((field) => field.input.checkValidity());
       }
       const input = this._field?.input;
-      if (!input)
-        return true;
+      if (!input) {
+        const dateInputs = this.hasAttribute("range") ? this.querySelectorAll(":scope > input[data-range-start], :scope > input[data-range-end]") : this._input ? [this._input] : [];
+        const timeInputs = this.querySelectorAll(":scope > input[type=time][data-time-start], :scope > input[type=time][data-time-end]");
+        return [...dateInputs, ...timeInputs].every((candidate) => candidate instanceof HTMLInputElement && candidate.checkValidity());
+      }
       await this._commitText(false, { force: true, moveDisplay: false });
+      if (!session || session.signal.aborted) {
+        return input.checkValidity() && this._timeFields.every((timeInput) => timeInput?.checkValidity() ?? true);
+      }
       this._revalidateTimeOrder("start");
       this._revalidateTimeOrder("end");
       const timesValid = this._timeFields.every((timeInput) => timeInput?.checkValidity() ?? true);
@@ -3549,8 +3521,11 @@
       });
       position();
       this._stopTracking = autoUpdate(this, panel, position);
-      if (options.moveFocus !== false)
-        queueMicrotask(() => calendar.focusGrid());
+      if (options.moveFocus !== false) {
+        const session = this._session;
+        if (session)
+          queueMicrotask(guard(session.signal, () => calendar.focusGrid()));
+      }
       this.dispatchEvent(new Event("open", { bubbles: true }));
     }
     _setExpanded(expanded) {
@@ -3572,11 +3547,6 @@
       this._open = false;
       this._setExpanded(false);
       this._supersedeActivations();
-      this._suppressGridClick = false;
-      if (this._drag) {
-        this._releaseDragCapture(this._drag.pointerId);
-        this._drag = null;
-      }
       this._syncHighlight();
       if (restoreFocus) {
         if (this._rangeMode()) {