@lekoala/date-picker 0.5.2 → 0.6.0

package/src/date-picker.js

@@ -12,17 +12,14 @@ import { DateFieldController, isEditable } from "./date-field.js";
 import { DateRangeController, normalizeRange } from "./date-range.js";
 import { createDateAdapter, formatLongDate, resolveLocale } from "./intl.js";
 import { getDefaultMessages, setDefaultMessages, subscribeDefaultMessages } from "./messages.js";
+import { createSession, guard } from "./session.js";
 import { compareTimes, isTime } from "./time.js";
 import { upgradeProperties } from "./upgrade-properties.js";
 
 let uid = 0;
 
-/** Pointer travel, in CSS pixels, that turns a press into an endpoint drag. */
-const DRAG_THRESHOLD = 4;
-
-/** A grid activation intent: the generation at interaction time plus the bound
- * a drag drop targets, empty for a normal pick.
- * @typedef {{id: number, endpoint: "" | "start" | "end"}} PickIntent */
+/** A grid activation intent: the generation at interaction time.
+ * @typedef {{id: number}} PickIntent */
 
 export class DatePickerElement extends HTMLElement {
   static observedAttributes = ["value", "locale", "min", "max", "open-on-focus", "month-format"];
@@ -73,10 +70,6 @@ export class DatePickerElement extends HTMLElement {
     this._activationId = 0;
     /** Candidate date currently projected onto the calendar band, if any. */
     this._previewDate = "";
-    /** Live endpoint drag, or null. @type {{pointerId:number, endpoint:"start"|"end", x:number, y:number, date:string, active:boolean} | null} */
-    this._drag = null;
-    /** A real drag already committed; swallow the click that follows it. */
-    this._suppressGridClick = false;
     /** Overlaid calendar triggers, one per field (single) or per bound (range). @type {{button: HTMLButtonElement, endpoint: "" | "start" | "end"}[]} */
     this._buttons = [];
     /** Control that opened the popover, so single mode can restore focus to it.
@@ -87,8 +80,10 @@ export class DatePickerElement extends HTMLElement {
     this._originalDescribedBy = "";
     this._rangeOriginalDescribedBy = ["", ""];
     this._formatHint = null;
-    this._generatedPlaceholder = false;
-    this._controller = null;
+    /** Inputs whose placeholder was generated by this element. */
+    this._generatedPlaceholders = new WeakSet();
+    /** Connection lifetime token. Captured by every async operation. @type {AbortController | null} */
+    this._session = null;
     this._stopTracking = null;
     this._open = false;
     this._suppressFocusOpen = false;
@@ -116,6 +111,7 @@ export class DatePickerElement extends HTMLElement {
 
   connectedCallback() {
     if (this._connected) return;
+    this._session = createSession();
     upgradeProperties(this, [
       "locale",
       "min",
@@ -130,17 +126,34 @@ export class DatePickerElement extends HTMLElement {
       "renderDay",
       "isDateDisabled",
     ]);
+    this._normalizeAttributes();
     if (this.hasAttribute("range")) this._connectRange();
     else this._connectSingle();
+    // A refused structure (missing input) must not leave a live session behind:
+    // _connected stays the readiness gate, the session is only the token.
+    if (!this._connected) {
+      this._session.abort();
+      this._session = null;
+      return;
+    }
     // The range setter requires the controller created by _connectRange().
-    if (this._connected) {
-      upgradeProperties(this, ["value", "range"]);
-      this._stopDefaultMessages = subscribeDefaultMessages(() => {
-        if (this._messages === null) this._refreshMessages();
-      });
-      // Applying the initial value clears custom validity; check it against
-      // min/max/isDateDisabled/source like any later constraint change.
-      void this.validate();
+    upgradeProperties(this, ["value", "range"]);
+    this._stopDefaultMessages = subscribeDefaultMessages(() => {
+      if (this._messages === null) this._refreshMessages();
+    });
+    // Applying the initial value clears custom validity; check it against
+    // min/max/isDateDisabled/source like any later constraint change.
+    void this.validate();
+  }
+
+  /** Establish the canonical connect-time state: invalid constraints are
+   * dropped here, not rewritten while the element is detached. */
+  _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);
     }
   }
 
@@ -265,9 +278,10 @@ export class DatePickerElement extends HTMLElement {
     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()) {
@@ -306,7 +320,22 @@ export class DatePickerElement extends HTMLElement {
 
   /** @param {string} name @param {string|null} oldValue @param {string|null} newValue */
   attributeChangedCallback(name, oldValue, newValue) {
-    if (!this._connected || this._reflecting || oldValue === newValue) return;
+    if (this._reflecting || oldValue === newValue) return;
+    // Attributes are prepared offline and normalized at connect: no reflection,
+    // constrained sync or validation runs on a detached element.
+    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();
+        void this.validate();
+      }
+      return;
+    }
     if (name === "value") {
       if (this._rangeMode()) return;
       if (!newValue || isDate(newValue)) {
@@ -536,7 +565,6 @@ export class DatePickerElement extends HTMLElement {
       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)) this.hide(false);
@@ -656,9 +684,11 @@ export class DatePickerElement extends HTMLElement {
         if (!(event.target instanceof HTMLFormElement) || !input || event.target !== input.form) return;
         // Reset is cancelable and runs before native values have been restored.
         this.hide(false);
-        queueMicrotask(() => {
-          if (!event.defaultPrevented) restore();
-        });
+        queueMicrotask(
+          guard(signal, () => {
+            if (!event.defaultPrevented) restore();
+          }),
+        );
       },
       { capture: true, signal },
     );
@@ -670,9 +700,9 @@ export class DatePickerElement extends HTMLElement {
     const button = this._buttons[0]?.button;
     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",
@@ -720,7 +750,7 @@ export class DatePickerElement extends HTMLElement {
           // open-on-focus, where the popup is already open when Tab reaches the
           // button; Escape keeps closing it. Defer focus as in the input handler.
           if (event.detail === 0) {
-            setTimeout(() => this._calendar?.focusGrid(), 0);
+            this._defer(() => this._calendar?.focusGrid());
             return;
           }
           this.hide(false);
@@ -746,7 +776,7 @@ export class DatePickerElement extends HTMLElement {
         // The app listener on <date-picker> runs after this during bubbling;
         // defer the commit so preventDefault() is actually respected.
         queueMicrotask(() => {
-          if (custom.defaultPrevented || !this._connected) return;
+          if (signal.aborted || custom.defaultPrevented) return;
           // A grid pick that resolves after the popup closed, after a newer pick
           // or after a programmatic value must not overwrite it. A programmatic
           // calendar.activateDate() carries no intent and still commits.
@@ -769,9 +799,9 @@ export class DatePickerElement extends HTMLElement {
   _bindRange() {
     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";
@@ -811,14 +841,6 @@ export class DatePickerElement extends HTMLElement {
     calendar.addEventListener(
       "click",
       (event) => {
-        if (this._suppressGridClick) {
-          // The gesture already committed through the drop path; this click is
-          // only the tail of the drag and must not activate a second time.
-          this._suppressGridClick = false;
-          event.preventDefault();
-          event.stopImmediatePropagation();
-          return;
-        }
         this._captureGridIntent(event);
       },
       { capture: true, signal },
@@ -834,17 +856,14 @@ export class DatePickerElement extends HTMLElement {
         const date = custom.detail?.date;
         if (!isDate(date)) return;
         queueMicrotask(() => {
-          if (custom.defaultPrevented || !this._connected || !this._range) return;
+          if (signal.aborted || custom.defaultPrevented || !this._range) return;
           const intent = /** @type {PickIntent | undefined} */ (activationIntents.get(custom));
           // A response is dropped when the active endpoint changed, the popup
           // closed or a newer activation superseded this one.
           if (intent === undefined || intent.id !== this._activationId) return;
           const editable = (/** @type {"start" | "end"} */ bound) => this._boundEditable(bound);
-          // Click, keyboard and drop share this one machine; only the entry
-          // point differs, a drag naming the handle it grabbed.
-          const result = intent.endpoint
-            ? this._range.moveEndpoint(date, intent.endpoint, editable)
-            : this._range.activate(date, editable);
+          // Click and keyboard share this one machine.
+          const result = this._range.activate(date, editable);
           if (result.status === "refused") {
             this._calendar?.dispatchEvent(
               new CustomEvent("dateinvalid", {
@@ -855,9 +874,6 @@ export class DatePickerElement extends HTMLElement {
             return;
           }
           this._applyRangeTransition(result);
-          // A drop adjusts an existing range rather than validating it, so the
-          // popup stays open for the next adjustment.
-          if (intent.endpoint) return;
           if (result.close || result.status === "complete") {
             this.hide(false);
             this._focusField(result.endpoint);
@@ -871,11 +887,6 @@ export class DatePickerElement extends HTMLElement {
     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 });
     // Re-check availability after a source load. validate() commits with
     // moveDisplay:false, so the visible month stays where the user navigated.
     calendar.addEventListener("dateloadend", () => void this.validate(), { signal });
@@ -917,7 +928,7 @@ export class DatePickerElement extends HTMLElement {
       // Keyboard activation of an already-open picker: switch the bound, then
       // move into the grid. Escape keeps closing it.
       this._activateRangeEndpoint(endpoint);
-      setTimeout(() => this._calendar?.focusGrid(), 0);
+      this._defer(() => this._calendar?.focusGrid());
       return;
     }
     if (endpoint !== this._range?.activeEndpoint) {
@@ -940,7 +951,7 @@ export class DatePickerElement extends HTMLElement {
     if (this._open) {
       if (this._rangeMode() && endpoint) this._activateRangeEndpoint(endpoint);
       // Chromium drops script-initiated focus changes during keydown dispatch.
-      setTimeout(() => this._calendar?.focusGrid(), 0);
+      this._defer(() => this._calendar?.focusGrid());
       return;
     }
     if (this._rangeMode()) this.show({ endpoint: endpoint || undefined });
@@ -958,7 +969,7 @@ export class DatePickerElement extends HTMLElement {
       if (this._open) {
         // Chromium drops script-initiated focus changes made during keydown
         // dispatch; defer to a macrotask so the grid can take keyboard focus.
-        setTimeout(() => this._calendar?.focusGrid(), 0);
+        this._defer(() => this._calendar?.focusGrid());
       } else {
         this.show();
       }
@@ -995,23 +1006,21 @@ export class DatePickerElement extends HTMLElement {
       const key = /** @type {KeyboardEvent} */ (event).key;
       if (key !== "Enter" && key !== " ") return;
     }
-    // The click tail of a drag never activates: it must not supersede the drop.
-    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);
   }
 
   /**
    * Hand a new intent to the calendar's next activation of `date`. Taking a
    * new generation supersedes every earlier pending activation.
-   * @param {string} date @param {"" | "start" | "end"} endpoint
+   * @param {string} 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 } };
   }
 
   /**
@@ -1066,16 +1075,16 @@ export class DatePickerElement extends HTMLElement {
    * `rangechange`, no field write, no validation and no source request — the
    * projection reads the month state already loaded, and the real availability
    * check still runs on commit.
-   * @param {string} date @param {"" | "start" | "end"} [endpoint]
+   * @param {string} date
    */
-  _setPreview(date, endpoint = "") {
+  _setPreview(date) {
     const calendar = this._calendar;
     if (!calendar || !this._range || !this._open) return;
     // A cell already known to be unavailable must not promise a band that the
     // commit would refuse.
     const candidate = isDate(date) && !calendar.getDateState(date).disabled ? date : "";
     const preview = candidate
-      ? this._range.previewRange(candidate, endpoint, (bound) => this._boundEditable(bound))
+      ? this._range.previewRange(candidate, (bound) => this._boundEditable(bound))
       : null;
     if (!preview) {
       this._clearPreview();
@@ -1096,7 +1105,6 @@ export class DatePickerElement extends HTMLElement {
   _onGridDateFocus(event) {
     // The keyboard candidate is the cell that actually took focus, so Enter
     // commits exactly what the roving focus was previewing.
-    if (this._drag) return;
     const date = /** @type {CustomEvent} */ (event).detail?.date;
     if (isDate(date)) this._setPreview(date);
   }
@@ -1108,15 +1116,11 @@ export class DatePickerElement extends HTMLElement {
    */
   _onGridPointerOver(event) {
     const pointer = /** @type {PointerEvent} */ (event);
-    if (this._drag || pointer.pointerType === "touch") return;
+    if (pointer.pointerType === "touch") return;
     this._setPreview(this._cellDate(pointer.target));
   }
 
   _onGridPointerLeave() {
-    // Before capture, a gesture that leaves the grid can no longer become a
-    // drag; drop it so it cannot block the next press.
-    if (this._drag?.active === false) this._drag = null;
-    if (this._drag) return;
     this._clearPreview();
   }
 
@@ -1127,141 +1131,6 @@ export class DatePickerElement extends HTMLElement {
     return isDate(date) ? date : "";
   }
 
-  /** @param {number} x @param {number} y @returns {string} */
-  _dateAtPoint(x, y) {
-    const element = this.ownerDocument.elementFromPoint(x, y);
-    if (!(element instanceof Element) || !this._calendar?.contains(element)) return "";
-    return this._cellDate(element);
-  }
-
-  /**
-   * Arm an endpoint drag. Only a complete, ordered range offers two distinct
-   * handles; a one-day range carries both markers on the same cell, and
-   * guessing which one the user meant would be worse than not dragging.
-   * @param {Event} event
-   */
-  _onGridPointerDown(event) {
-    const pointer = /** @type {PointerEvent} */ (event);
-    this._suppressGridClick = false;
-    // An armed gesture that never started and never released (the pointer left
-    // the grid) must not block the next one.
-    if (this._drag?.active === false) this._drag = null;
-    if (!this._open || !this._range || this._drag) return;
-    if (!pointer.isPrimary || pointer.button !== 0) return;
-    // Mouse and pen first: touch keeps native scrolling (no global
-    // `touch-action: none`) and stays a plain tap.
-    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,
-    };
-  }
-
-  /** @param {Event} event */
-  _onGridPointerMove(event) {
-    const pointer = /** @type {PointerEvent} */ (event);
-    const drag = this._drag;
-    if (!drag || pointer.pointerId !== drag.pointerId) return;
-    if (!drag.active) {
-      // A press and release without travel stays a plain click.
-      const travelled =
-        Math.abs(pointer.clientX - drag.x) > DRAG_THRESHOLD ||
-        Math.abs(pointer.clientY - drag.y) > DRAG_THRESHOLD;
-      if (!travelled) return;
-      drag.active = true;
-      // Capture only once the gesture is a drag. Capturing on the press would
-      // retarget the trailing click to the calendar and swallow a plain pick
-      // on the very cell that carries a handle.
-      try {
-        this._calendar?.setPointerCapture(drag.pointerId);
-      } catch {
-        // No active pointer for this id (synthetic event): move and up still
-        // arrive through normal bubbling.
-      }
-      this._syncDragAffordance();
-    }
-    const date = this._dateAtPoint(pointer.clientX, pointer.clientY);
-    // An unavailable cell is not a drop target: hold the last valid projection
-    // instead of promising a move that would be refused.
-    if (!date || this._calendar?.getDateState(date).disabled) return;
-    drag.date = date;
-    this._setPreview(date, drag.endpoint);
-  }
-
-  /** @param {Event} event */
-  _onGridPointerUp(event) {
-    const pointer = /** @type {PointerEvent} */ (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;
-    }
-    // The drop goes through the same availability check and the same
-    // cancelable `dateactivate` seam as a click, under the same generation
-    // guard: a late response can never move a bound after the popup closed or
-    // after a newer interaction.
-    const target = drag.endpoint === "start" ? transition.range.start : transition.range.end;
-    this._attachIntent(target, drag.endpoint);
-    void this._calendar?.activateDate(target);
-  }
-
-  /** @param {Event} event */
-  _onGridPointerCancel(event) {
-    const pointer = /** @type {PointerEvent} */ (event);
-    const drag = this._drag;
-    if (!drag || pointer.pointerId !== drag.pointerId) return;
-    this._drag = null;
-    this._releaseDragCapture(drag.pointerId);
-    // A cancelled gesture commits nothing and restores the committed band.
-    this._syncHighlight();
-  }
-
-  /** @param {number} pointerId */
-  _releaseDragCapture(pointerId) {
-    const calendar = this._calendar;
-    if (calendar?.hasPointerCapture(pointerId)) calendar.releasePointerCapture(pointerId);
-  }
-
-  /** Expose whether the band currently offers draggable handles, and whether
-   * one is being dragged, so the cursor can say so. */
-  _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");
-  }
-
   /** @param {KeyboardEvent} event */
   _onEscape(event) {
     if (event.key === "Escape" && this._open) {
@@ -1297,9 +1166,9 @@ export class DatePickerElement extends HTMLElement {
       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) field.input.value = field.format(canonical);
@@ -1311,9 +1180,9 @@ export class DatePickerElement extends HTMLElement {
     if (!field) 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);
     this._refreshButtonLabel();
@@ -1403,11 +1272,15 @@ export class DatePickerElement extends HTMLElement {
   /** @param {boolean} emit @param {{force?: boolean, moveDisplay?: boolean}} [options] */
   async _commitText(emit, options = {}) {
     const field = this._field;
-    if (!field) return false;
+    const session = this._session;
+    if (!field || !session) return false;
     // Blur/change skip untouched text; explicit validation must recheck the
     // current value against the latest constraints regardless of dirtiness.
     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 || "", {
       emit,
@@ -1420,11 +1293,13 @@ export class DatePickerElement extends HTMLElement {
   /** @param {"start" | "end"} which */
   async _commitFieldText(which) {
     const fields = this._fields;
-    if (!fields) return false;
+    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") {
       this._orderTags.delete(index);
@@ -1510,7 +1385,6 @@ export class DatePickerElement extends HTMLElement {
     this._previewDate = "";
     this._calendar.removeAttribute("data-range-preview");
     this._calendar.highlightedRange = this._displayRange();
-    this._syncDragAffordance();
   }
 
   /**
@@ -1580,6 +1454,14 @@ export class DatePickerElement extends HTMLElement {
     this._timeOrderOwned.clear();
   }
 
+  /** Run a timer only while the connection that scheduled it remains active.
+   * @param {() => void} callback */
+  _defer(callback) {
+    const session = this._session;
+    if (!session) return;
+    setTimeout(guard(session.signal, callback), 0);
+  }
+
   _restoreDefault() {
     const field = this._field;
     if (!field) return;
@@ -1616,10 +1498,10 @@ export class DatePickerElement extends HTMLElement {
     const input = this._fields?.[index]?.input;
     if (!input) return;
     this._suppressFocusOpen = true;
-    setTimeout(() => {
+    this._defer(() => {
       input.focus();
       this._suppressFocusOpen = false;
-    }, 0);
+    });
   }
 
   /**
@@ -1633,10 +1515,10 @@ export class DatePickerElement extends HTMLElement {
     this._returnFocus = null;
     if (!(target instanceof HTMLElement) || !target.isConnected || target.matches(":disabled")) return;
     this._suppressFocusOpen = true;
-    setTimeout(() => {
+    this._defer(() => {
       target.focus();
       this._suppressFocusOpen = false;
-    }, 0);
+    });
   }
 
   /** @returns {"" | "start" | "end"} */
@@ -1657,6 +1539,7 @@ export class DatePickerElement extends HTMLElement {
 
   /** @public */
   async validate() {
+    const session = this._session;
     if (this._rangeMode()) {
       const fields = this._fields;
       if (!fields) return true;
@@ -1665,6 +1548,12 @@ export class DatePickerElement extends HTMLElement {
       // Empty text flows through commit()'s "clear" outcome, not an early exit.
       for (const [index, field] of fields.entries()) {
         const result = await field.commit({ moveDisplay: false });
+        // A dead session owns nothing: report authored validity and stop,
+        // instead of revalidating (and writing) the rebuilt instance.
+        if (!session || session.signal.aborted) {
+          return fields.every((field) => field.input.checkValidity());
+        }
+        if (!field.isCommitCurrent(result.commitId)) continue;
         // A parse/source error replaced the order error, which no longer owns it.
         if (result.status === "invalid") this._orderTags.delete(index);
         if (result.status === "ok" || result.status === "clear") {
@@ -1677,10 +1566,29 @@ export class DatePickerElement extends HTMLElement {
       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(),
+      );
+    }
     // Empty text flows through commit()'s "clear" outcome so the canonical
     // value and hidden ISO are cleared with it.
     await this._commitText(false, { force: true, moveDisplay: false });
+    if (!session || session.signal.aborted) {
+      // Read native validity; never revalidate a rebuilt instance from a dead
+      // operation (the time order would write on the new companions).
+      return (
+        input.checkValidity() && this._timeFields.every((timeInput) => timeInput?.checkValidity() ?? true)
+      );
+    }
     // Same start-then-end order as the range path, so a from/to inversion
     // ends reported on "end". A programmatic time change resyncs here too.
     this._revalidateTimeOrder("start");
@@ -1724,7 +1632,10 @@ export class DatePickerElement extends HTMLElement {
       });
     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 }));
   }
 
@@ -1749,11 +1660,6 @@ export class DatePickerElement extends HTMLElement {
     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()) {