@lekoala/date-picker 0.5.2 → 0.6.0

package/docs/CALENDAR-INTEGRATION.md

@@ -74,3 +74,100 @@ Both packages expose month-week derivation. They stay **deliberately duplicated*
 - `@lekoala/date-picker` owns civil string math (`dates.getMonthWeeks()`, `YYYY-MM-DD`).
 
 This keeps the two packages dependency-free from each other: a circular dependency between a picker and a scheduler would cost more than a few duplicated lines. `dates.getMonthWeeks()` keeps the scheduler's important contract (full civil weeks, configurable first day, 4–6 rows, no forced padding) so both stay interchangeable for the mini-calendar seam. A future shared `@lekoala/date-math` package is possible, but only as a separate proposal; it must not introduce a circular dependency.
+
+## App-owned range endpoint drag
+
+`<date-picker range>` owns the range workflow, not pointer interaction ([D9](DECISIONS.md)). This recipe is a **tested starting point**, not a feature-equivalent replacement for the removed built-in drag: it shows the public seams and the guarantees they give, and leaves the gesture policy to the application.
+
+```js
+const picker = document.querySelector("date-picker[range]");
+const calendar = picker.calendar;
+const inputs = {
+  start: picker.querySelector("input[data-range-start]"),
+  end: picker.querySelector("input[data-range-end]"),
+};
+
+const TRAVEL = 4; // px; below this a press never moves a bound
+const isoAt = (x, y) => {
+  const element = document.elementFromPoint(x, y);
+  const cell = element instanceof Element ? element.closest("[data-date]") : null;
+  return cell?.getAttribute("data-date") || "";
+};
+const isEditable = (bound) =>
+  !inputs[bound].matches(":disabled") && !inputs[bound].readOnly;
+const clamp = (date, bound, range) =>
+  bound === "start"
+    ? range.end && date > range.end ? range.end : date
+    : range.start && date < range.start ? range.start : date;
+
+let armed = null;
+let gesture = 0; // app-owned intent generation
+
+const cancel = () => { armed = null; };
+
+calendar.addEventListener("pointerdown", (event) => {
+  if (!event.isPrimary || event.button !== 0) return;
+  if (event.pointerType !== "mouse" && event.pointerType !== "pen") return;
+  armed = null; // a new primary press supersedes a stale gesture
+  const cell = event.target.closest("[data-date]");
+  const range = picker.range;
+  if (!cell || !range?.start || !range?.end) return;
+  const start = cell.hasAttribute("data-range-start");
+  const end = cell.hasAttribute("data-range-end");
+  if (start === end) return; // no handle on a one-day range
+  const bound = start ? "start" : "end";
+  if (!isEditable(bound)) return;
+  event.preventDefault(); // otherwise Firefox starts a text-selection drag
+  armed = { id: ++gesture, bound, x: event.clientX, y: event.clientY };
+  calendar.setPointerCapture(event.pointerId);
+});
+
+calendar.addEventListener("pointerup", async (event) => {
+  const drag = armed;
+  armed = null;
+  if (!drag) return;
+  if (calendar.hasPointerCapture(event.pointerId)) calendar.releasePointerCapture(event.pointerId);
+  const travelled =
+    Math.abs(event.clientX - drag.x) > TRAVEL || Math.abs(event.clientY - drag.y) > TRAVEL;
+  if (!travelled) return;
+  const range = picker.range;
+  const date = isoAt(event.clientX, event.clientY);
+  if (!date || !range?.start || !range?.end) return;
+  const next = clamp(date, drag.bound, range);
+  if (next === range[drag.bound]) return;
+  // Availability plus the cancelable dateactivate veto, in one public call.
+  if (!(await calendar.activateDate(next))) return;
+  // A newer gesture supersedes this one, and a concurrent range change wins.
+  if (drag.id !== gesture || !picker.open) return;
+  const current = picker.range;
+  if (!current || current.start !== range.start || current.end !== range.end) return;
+  picker.range = drag.bound === "start"
+    ? { start: next, end: range.end }
+    : { start: range.start, end: next };
+  inputs[drag.bound].dispatchEvent(new Event("input", { bubbles: true }));
+  inputs[drag.bound].dispatchEvent(new Event("change", { bubbles: true }));
+});
+
+calendar.addEventListener("pointercancel", cancel);
+calendar.addEventListener("lostpointercapture", cancel);
+```
+
+What the recipe implements, and `test/browser/app-owned-drag.spec.js` covers:
+
+- a **travel threshold** (4 px): a press that does not travel far enough never moves a bound;
+- a new primary press supersedes any stale armed gesture; `pointercancel` and `lostpointercapture` abandon it;
+- pointer capture, so a drag that leaves the grid still ends correctly;
+- the bound the gesture started on, clamped against the opposite bound;
+- availability plus the cancelable `dateactivate` veto through `activateDate()`;
+- an app-owned generation, so the older of two pending gestures never wins;
+- a committed-range check after the await, so a programmatic or validation-driven `rangechange` during availability wins;
+- one `rangechange`, plus native `input`/`change` only on the bound that moved.
+
+What stays application-owned, and is **not** provided by this recipe:
+
+- touch: the recipe handles mouse and pen only; add `touch-action`, a threshold and long-press policy if you need touch dragging;
+- a cursor affordance: the removed `data-range-drag` styling is gone, style your own;
+- a draft typed in the *other* bound: writing `picker.range` reformats both committed fields, so the draft is discarded;
+- a mid-flight active-endpoint switch: the recipe applies the bound the gesture started on.
+
+The component still guarantees the parts that belong to it: the activation is availability-checked and cancellable, and only a displayable (ordered) pair is ever forwarded to `highlightedRange`.

package/docs/DECISIONS.md

@@ -54,12 +54,12 @@ Context: DOM-backed styling hooks become API the moment they are documented —
 
 Pointing and typing are different contracts, deliberately.
 
-- **Interaction** (click, keyboard, endpoint drag) always yields an ordered range. While a range is being created, the second selection is sorted against the anchor: `10` then `5` commits `5 -> 10`, and `10` then `10` a one-day range. No `dateinvalid` is fired merely because the second point is earlier.
+- **Interaction** (click, keyboard) always yields an ordered range. While a range is being created, the second selection is sorted against the anchor: `10` then `5` commits `5 -> 10`, and `10` then `10` a one-day range. No `dateinvalid` is fired merely because the second point is earlier.
 - **Text entry** may be temporarily inverted. Typing `start` past `end` keeps both values and reports `rangeOrderStart` / `rangeOrderEnd` on the modified bound, because a half-typed pair is a normal editing state.
 - An explicit change to **one bound of an already complete pair** keeps that bound's identity: moving `end` before `start` is refused rather than silently rewriting the other field.
 - Because one interaction can move both bounds at once, a transition describes the whole resulting pair (`{ status, endpoint, changedEndpoints, range, activeEndpoint }`) and is applied in a single write: one `rangechange`, with synthetic `input` / `change` only on the bounds that actually moved.
-- Hover, keyboard focus and endpoint drag read the **same projection** (`previewRange()`) that the commit applies, so what the band promises is what the next selection commits. A preview writes nothing: no `rangechange`, no field write, no validation, no source request.
-- Click, keyboard and drop all end in that one range machine and in the same `ensureDate` plus cancelable `dateactivate` path, so an application veto cannot be bypassed by choosing another input device.
+- Hover and keyboard focus read the **same projection** (`previewRange()`) that the commit applies, so what the band promises is what the next selection commits. A preview writes nothing: no `rangechange`, no field write, no validation, no source request.
+- Click and keyboard end in that one range machine and in the same `ensureDate` plus cancelable `dateactivate` path, so an application veto cannot be bypassed by choosing another input device.
 
 ## D7 — Author classes own header control styling
 
@@ -72,3 +72,30 @@ The `.dp-*` namespace stays internal (D3); it is reserved and ignored in author
 Both element classes expose static `setDefaultControlClasses`, `getDefaultControlClasses`, `setDefaultMessages` and `getDefaultMessages` methods delegating to the existing module functions. This additive API makes defaults available in classic builds through `customElements.get()` without introducing a global. The constructors share one defaults state within a build. Instances without overrides resolve current defaults when used, and connected instances refresh when defaults change. Disconnected instances unsubscribe and read current defaults on reconnection. For `controlClasses`, an assignment stores only the normalized roles provided: omitted roles follow current global defaults at read/render time, an explicit empty string restores the library skin for that role, and `null` follows all defaults. Global class changes also refresh instances with partial overrides. Message assignments merge with current defaults and pin that instance setting; `null` resumes following global message defaults. Pickers forward only their own overrides to their calendar, preserving global inheritance.
 
 Writable public properties assigned before element definition are replayed through their setters on connection. Options are applied before building controls; picker `value` and `range` wait for the fields and range controller. The display, focus, activation and selection contracts remain distinct.
+
+## D9 — Endpoint dragging is an application interaction
+
+`<date-picker range>` owns the range workflow: which bound a pick targets, sorting, atomic pair writes, validation and events. It does **not** implement pointer dragging of the two endpoints.
+
+- A pointer gesture that moves a bound is a second interaction machine (pointer capture, travel threshold, `pointercancel`, `lostpointercapture`, trailing-click suppression, a per-gesture endpoint identity). It is not rejected as a feature; it sits at a different abstraction level from range semantics. The picker owns the range rules, not the pointer gesture.
+- The application writes the public API, not internal state: `calendar.activateDate(date)` for availability plus the cancelable `dateactivate` veto, then `picker.range = { start, end }`, then native `input`/`change` on the bound it moved. `dates.compareDates` stays public for the clamp against the opposite bound.
+- The calendar keeps the seams this requires: `datefocus`, `highlightedRange`, `data-range-preview` (a proposal is never announced as a range start/end), `activateDate()`, and the stable day-cell markers `data-date` / `data-range-start` / `data-range-end`.
+- Moving a bound is an availability-checked action, never a silent rewrite: a refused or vetoed activation leaves the range untouched.
+- A tested **starting point** ships in `docs/CALENDAR-INTEGRATION.md` and is covered by `test/browser/app-owned-drag.spec.js`. It implements the travel threshold, supersedes stale gestures, abandons a gesture on `pointercancel`/`lostpointercapture`, and refuses to apply after a concurrent `picker.range` change. It is not a feature-equivalent replacement: touch handling, a cursor affordance, the discard of a draft typed in the other bound, and a mid-flight endpoint switch stay application-owned.
+- The existence of that recipe is not a reason to re-add an integrated drag. A separate optional `range-drag` module is not introduced before a real consumer demonstrates the need.
+
+Dragging is not replaced by an opt-in attribute. Either the application implements it, or the picker does not offer it.
+
+## D10 — Range preview stays picker-owned
+
+The 0.6 scope review considered removing the hover/keyboard range preview together with endpoint dragging. Measured on the post-drag code, it does not meet the removal criteria:
+
+- one transient field (`_previewDate`), ~60 lines in the picker, a 20-line pure projection (`previewRange()`), three listeners and two CSS rules;
+- no lifecycle guard beyond `_open` and the current range;
+- synchronous (no `await`), so the transition harness covers it without a new async case.
+
+It also carries a real UX contract: the band shows what the next pick will commit, and a proposal is never announced as a committed selection (`data-range-preview`). Removing it would either lose that contract or force every application to reimplement it.
+
+The drag failed these criteria: pointer capture, cancellation, trailing click, endpoint identity and a cursor affordance were its own machine. The two features are therefore not a pair — drag is application-owned (D9), preview stays here.
+
+Revisit only if a real consumer needs a picker without preview. The answer would then be an explicit opt-out, not a silent removal.

package/docs/TESTING.md

@@ -48,6 +48,14 @@ Browser tests should cover behavior that cannot be trusted to a DOM shim:
 - range validation;
 - forced-colors/zoom smoke cases.
 
+## Transition harness
+
+`test/browser/lifecycle.spec.js` is the controlled-promise matrix: an operation suspends on a source promise, a newer state change lands, then the old operation settles. Each case asserts canonical value, visible text, hidden ISO and events (plus validity for constraint cases). Extend this matrix instead of adding another one-off regression spec for a lifecycle guard.
+
+## Evidence bar
+
+A test for a defect fails before the fix. A finding states the violated invariant, a reproducible scenario reachable through supported usage, the concrete impact, and the failure mode. Unsupported structural mutations are closed by "disconnect and reconnect" (`ARCHITECTURE.md` §11.3). An audit or review that finds no actionable defect is a valid outcome.
+
 ## Core invariants
 
 Keep explicit tests for these regressions:

package/docs/USE_CASES.md

@@ -113,7 +113,6 @@ Acceptance:
 - a stale async availability response arriving after the active endpoint changed never commits a value or closes the popup;
 - calendar interaction never produces an inverted range: while a range is being created, a second selection before the first is sorted (`10` then `5` commits `5 -> 10`) in one atomic update; an explicit change to one bound of an already complete pair keeps that bound's identity instead;
 - pointer hover and keyboard navigation project the range the next selection would commit onto the band, without changing any value, and a selection commits exactly what was projected;
-- the endpoints of a complete range can be dragged to adjust it, through the same projection, the same availability check and the same cancelable activation as a click;
 - only the bounds are validated; per-night availability stays application-owned.
 
 ## U10 — Date with native time companions
@@ -149,7 +148,7 @@ Do not grow the API to cover these without a separate design:
 - timezone conversion;
 - appointment recurrence;
 - resource scheduling;
-- drag/drop;
+- drag/drop of events or range endpoints (endpoint moves are application-owned, see [DECISIONS D9](DECISIONS.md));
 - event rendering;
 - multi-day scheduler views.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lekoala/date-picker",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "Native-first date picker and inline calendar primitives",
   "type": "module",
   "sideEffects": [
@@ -141,7 +141,7 @@
     "lint": "biome check .",
     "format": "biome format --write .",
     "typecheck": "tsc -p jsconfig.json",
-    "types": "tsc -p tsconfig.types.json",
+    "types": "tsc -p tsconfig.types.json && bun scripts/trim-types.js",
     "test": "bun test test/unit",
     "test:syntax": "bun scripts/check-syntax.js",
     "test:types": "tsc -p test/types/tsconfig.json",

package/src/date-calendar.js

@@ -31,6 +31,7 @@ import {
   weekdayNames,
 } from "./intl.js";
 import { getDefaultMessages, setDefaultMessages, subscribeDefaultMessages } from "./messages.js";
+import { createSession, guard } from "./session.js";
 import { normalizeDateStates } from "./source.js";
 import { upgradeProperties } from "./upgrade-properties.js";
 
@@ -163,7 +164,14 @@ export class DateCalendarElement extends HTMLElement {
     this._id = `date-calendar-${++uid}`;
     this._model = new CalendarModel();
     this._connected = false;
+    /** Connection lifetime token. Deferred work captures it, never reads it late. */
+    /** @type {AbortController | null} */
+    this._session = null;
     this._rendering = false;
+    /** Persistent live heading; render() updates its text after it is attached. @type {HTMLHeadingElement | null} */
+    this._heading = null;
+    /** Replaceable visual subtree kept separate from the persistent live heading. @type {HTMLDivElement | null} */
+    this._renderRoot = null;
     /** @type {DateSource | null} */
     this._source = null;
     /** Intent the host attached to the next activation of `date`.
@@ -207,6 +215,7 @@ export class DateCalendarElement extends HTMLElement {
 
   connectedCallback() {
     if (this._connected) return;
+    this._session = createSession();
     upgradeProperties(this, [
       "locale",
       "min",
@@ -226,7 +235,12 @@ export class DateCalendarElement extends HTMLElement {
       "value",
       "display",
     ]);
+    this._normalizeAttributes();
     this._syncModel();
+    // An authored display may be non-canonical or outside the renderable
+    // window: reflect the clamped model month rather than keeping author text
+    // that the model never accepted.
+    if (this.hasAttribute("display")) this._reflect("display", this._model.display);
     upgradeProperties(this, ["focusedDate"]);
     this._stopDefaultControlClasses = subscribeDefaultControlClasses(() => {
       if (usesDefaultControlClasses(this._controlClasses)) this.render();
@@ -235,10 +249,11 @@ export class DateCalendarElement extends HTMLElement {
       if (this._messages === null) 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();
   }
 
@@ -252,18 +267,58 @@ export class DateCalendarElement extends HTMLElement {
     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;
+  }
+
+  /** Establish canonical connect-time constraints. */
+  _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) return;
+  /** @param {string} name @param {string|null} _oldValue @param {string|null} newValue */
+  attributeChangedCallback(name, _oldValue, newValue) {
+    if (this._rendering) return;
+    // Attributes are prepared offline and normalized at connect: no reflection,
+    // model sync or render runs on a detached element.
+    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();
   }
 
+  /** Run a focus microtask only in the connection that scheduled it. @param {() => void} callback */
+  _queueFocus(callback) {
+    const session = this._session;
+    if (!session) return;
+    queueMicrotask(guard(session.signal, callback));
+  }
+
   /** @public */
   get locale() {
     return resolveLocale(this.getAttribute("locale") || "");
@@ -607,13 +662,14 @@ export class DateCalendarElement extends HTMLElement {
         this.dispatchEvent(new CustomEvent("dateloaderror", { detail: { ...range, error }, bubbles: true }));
         return "failed";
       } finally {
+        // All cleanup belongs to the controller that started this load: a
+        // stale operation must never clear the key or promise of a newer load
+        // for the same month (a reconnect can start one immediately).
         if (this._loadController === controller) {
           this._loadController = null;
-          this.removeAttribute("data-loading");
-        }
-        if (this._loadingKey === key) {
           this._loadingKey = "";
           this._loadingPromise = null;
+          this.removeAttribute("data-loading");
         }
       }
     })();
@@ -669,7 +725,7 @@ export class DateCalendarElement extends HTMLElement {
       // Same month: no full render, just move the roving tabindex.
       this._moveFocusDom(previousFocused, this._model.focused, moveFocus);
     }
-    if (moveFocus) queueMicrotask(() => this.focusGrid());
+    if (moveFocus) this._queueFocus(() => this.focusGrid());
   }
 
   /** @param {string} previous @param {string} next @param {boolean} [moveFocus] */
@@ -781,6 +837,8 @@ export class DateCalendarElement extends HTMLElement {
    * @param {string} date @returns {Promise<boolean>}
    */
   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;
     /** @param {Event} event */
@@ -792,6 +850,7 @@ export class DateCalendarElement extends HTMLElement {
     // source resolves must not be treated as available, and a cancelled or
     // failed load must not authorize it either.
     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 })));
@@ -806,7 +865,7 @@ export class DateCalendarElement extends HTMLElement {
         }),
       ),
     );
-    if (!accepted) return false;
+    if (!accepted || session.signal.aborted) return false;
     if (this.selection === "single") {
       const previousValue = this._model.value;
       this._model.setValue(date);
@@ -1007,8 +1066,21 @@ export class DateCalendarElement extends HTMLElement {
     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}
@@ -1016,18 +1088,18 @@ export class DateCalendarElement extends HTMLElement {
           <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;
         // A day-cell key goes stale across display changes: the old date can
         // reappear as outside-month padding in the new month (fixed-weeks or

package/src/date-field.js

@@ -1,5 +1,6 @@
 import { isDate } from "./date.js";
 import { createDateAdapter } from "./intl.js";
+import { createSession } from "./session.js";
 
 /**
  * Whether the user may edit this input right now. `:disabled` is the effective
@@ -35,6 +36,8 @@ export class DateFieldController {
     this.canonical = "";
     this._dirty = false;
     this._commitId = 0;
+    /** Lifetime token: torn down with the field, so no commit can start or resume. */
+    this._session = createSession();
     this._originalName = input.getAttribute("name") || "";
     /** @type {MutationObserver | null} */
     this._attributeObserver = null;
@@ -179,34 +182,50 @@ export class DateFieldController {
    * `options` is forwarded to the `confirm` gate so a revalidation can ask it
    * not to move the calendar display (source reloads must not re-home it).
    * @param {{moveDisplay?: boolean}} [options]
-   * @returns {Promise<{status: "ok" | "clear" | "invalid" | "stale", value?: string}>}
+   * @returns {Promise<{status: "ok" | "clear" | "invalid" | "stale", value?: string, commitId: number}>}
    */
   async commit(options = {}) {
     const input = this.input;
     const commitId = ++this._commitId;
+    // One controller has one lifetime, so this captured session is the
+    // controller's only session: teardown aborts it for good.
+    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" };
+      if (commitId !== this._commitId) 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" };
+      if (commitId !== this._commitId) 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" };
+      // The session is captured by this controller's own lifetime: a teardown
+      // aborts it, so the pending result must not touch validity or the hidden
+      // field any more.
+      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 };
+  }
+
+  /** A coordinator must re-check this after awaiting commit(), including for
+   * synchronous clear/invalid results whose Promise resumes in a microtask.
+   * @param {number} commitId */
+  isCommitCurrent(commitId) {
+    return commitId === this._commitId;
   }
 
   /**
@@ -234,8 +253,12 @@ export class DateFieldController {
   }
 
   /** Remove the hidden field and attribute observer, restoring the original
-   * authored `name` on the visible input. */
+   * authored `name` on the visible input. A disconnect is a teardown, not a
+   * pause: in-flight commits are invalidated and later ones are refused, so a
+   * reconnected picker rebuilds from the live DOM instead of resuming them. */
   teardown() {
+    this.dirty();
+    this._session.abort();
     this._attributeObserver?.disconnect();
     this._attributeObserver = null;
     const hiddenName = this.hidden?.getAttribute("name") || this._originalName;

package/src/date-picker.css

@@ -267,8 +267,8 @@ date-picker > input:not([type="hidden"]):focus-visible,
 }
 
 /* Projected band: the range the next commit would produce. It reads as one
-   step short of the committed band, so a hovered, keyboard or dragged preview
-   is never mistaken for the selection itself. */
+   step short of the committed band, so a hovered or keyboard preview is never
+   mistaken for the selection itself. */
 [data-range-preview] .dp-day:is([data-range-start="true"], [data-range-end="true"]) {
   background: color-mix(in srgb, var(--dp-accent) 58%, var(--dp-bg));
 }
@@ -277,17 +277,6 @@ date-picker > input:not([type="hidden"]):focus-visible,
   background: color-mix(in srgb, var(--dp-accent) 11%, var(--dp-bg));
 }
 
-/* Endpoint handles are draggable only while the committed range is complete
-   and its two ends sit on different days. */
-[data-range-drag] .dp-day:is([data-range-start="true"], [data-range-end="true"]) {
-  cursor: grab;
-}
-
-[data-range-drag="active"],
-[data-range-drag="active"] .dp-day {
-  cursor: grabbing;
-}
-
 .dp-day-number {
   display: block;
   font-variant-numeric: tabular-nums;