@lekoala/date-picker 0.5.3 → 0.6.0

package/docs/API.md

@@ -27,6 +27,16 @@ The public surface — flat event names, `selection` values, `--dp-*` styling to
 
 Presentation-only range band. It never changes `value`, `selection` or `focusedDate`. It accepts an ordered `{ start, end }` pair of `YYYY-MM-DD` values; `end` may be empty (range in progress), and a `start === end` range renders both endpoints with a dedicated label. `null` and `{ start: "", end: "" }` reset the band. Inverted ranges and `{ start: "", end: "…" }` throw a `TypeError` — the property never reorders or guesses. Styled spans render `data-range-start="true"`, `data-in-range="true"`, `data-range-end="true"` and extend each day's `aria-label` accordingly.
 
+### Day cell data attributes
+
+Day cells stay component-owned DOM (D3): `.dp-*` classes are not a styling API and the cell cannot be replaced. These read-only data attributes are stable hooks for application-owned interactions:
+
+- `data-date="YYYY-MM-DD"` — canonical date of the cell;
+- `data-range-start` / `data-in-range` / `data-range-end` — band position painted from `highlightedRange` (a one-day range carries both start and end);
+- `data-range-preview` — on the calendar, not the cell: the band is a proposal, so cells stop contributing a range start/end to their accessible name while it is set.
+
+Applications may read them (for example to hit-test a pointer gesture, see [CALENDAR-INTEGRATION](CALENDAR-INTEGRATION.md)); they must not write them.
+
 ### Callback properties
 
 ```js
@@ -305,7 +315,7 @@ The business range may be temporarily incomplete or inverted; `calendar.highligh
 - **Calendar interaction never produces an inverted range.** While a range is being created, a second pick before the anchor is sorted rather than refused: `10` then `15` gives `10 -> 15`, `10` then `5` gives `5 -> 10`, and `10` then `10` a one-day range. That transition moves **both** bounds at once and is applied in a single write — one `rangechange`, with synthetic `input`/`change` on each bound that moved, and no intermediate inverted pair ever observable. Typed text keeps the opposite contract and may be temporarily inverted (see [DECISIONS D6](DECISIONS.md)).
 - Changing one bound of an already complete pair keeps that bound's identity: moving `end` before `start` is refused (`dateinvalid`, nothing changes) instead of rewriting the other field.
 - **Preview.** While a range is being created, hovering a day or moving the keyboard focus projects the range the next pick would commit onto `calendar.highlightedRange`, and the pick commits exactly what was projected. The projection is visual only: no `rangechange`, no field write, no validation and no source request. It reads the month already loaded, so a day known to be unavailable promises nothing; the real availability check still runs on commit. Pointer hover never moves `focusedDate`, which stays the keyboard target. Leaving the grid, Escape and closing the popup restore the committed band.
-- **Endpoint drag.** On a complete, ordered range whose two ends sit on different days, each endpoint can be dragged with a mouse or pen (pointer events plus capture, armed only once the pointer travels). A handle never crosses the other one — the candidate is clamped to it, equality allowed — an unavailable cell is not a drop target, and `pointercancel` restores the committed band. The drop runs the same projection and the same `ensureDate` + cancelable `dateactivate` path as a click, emits one `rangechange`, and keeps the popup open: a drag adjusts a range, it does not validate it. A press without travel stays a plain click. Touch keeps native scrolling and stays a plain tap.
+- Adjusting an existing bound by pointer (dragging an endpoint) is application-owned: see [DECISIONS D9](DECISIONS.md) and the recipe in [CALENDAR-INTEGRATION.md](CALENDAR-INTEGRATION.md). The picker itself only moves a bound through a calendar activation (`activateDate()` / `dateactivate`).
 - Each bound owns its trigger (`input[data-range-start]` then its trigger, `input[data-range-end]` then its trigger); the two triggers share **one** popup, calendar, source and state. Pressing the other bound's trigger while the popup is open switches the active bound and keeps it open instead of toggling it shut. A trigger never opens a `readonly`/`disabled` bound.
 - Typing stays independent per field. Moving `start` past `end` keeps both values and flags the *modified* bound with `rangeOrderStart`; fixing either side revalidates both. Parse/source errors are never cleared by cross-bound revalidation.
 - A stale availability response resolving after the active endpoint changed (or after a newer selection) never commits; a field focus that switches the endpoint invalidates in-flight activations.
@@ -330,29 +340,6 @@ rangePosition("2026-09-12", range); // "start" | "in" | "end" | "single" | ""
 
 `normalizeRange` validates an ordered displayable range and never reorders: an inversion or an `end` without a `start` throws. `rangePosition` classifies one day within a displayable range (see [`highlightedRange`](#highlightedrange)).
 
-## `DateRangeController`
-
-The pure two-bound state machine behind `date-picker[range]`. It owns the
-selection rules and knows nothing about DOM, popups or async availability.
-
-```js
-const model = new DateRangeController();
-model.focus("start");
-model.activate("2026-09-10"); // { status: "pending", endpoint: "start", … }
-model.previewRange("2026-09-05"); // { start: "2026-09-05", end: "2026-09-10" }
-model.activate("2026-09-05"); // changedEndpoints: ["start", "end"]
-```
-
-- `project(date, editable?)` / `projectEndpoint(date, endpoint, editable?)` describe a transition without applying it;
-- `activate(date, editable?)` / `moveEndpoint(date, endpoint, editable?)` apply one;
-- `previewRange(date, endpoint?, editable?)` returns the displayable band a candidate would produce, or `null` when there is nothing to promise.
-
-A transition is `{ status, endpoint, changedEndpoints, range, activeEndpoint, close? }`.
-`range` is the whole resulting pair, because one interaction can move both
-bounds; `changedEndpoints` names the ones that actually move. Every rule exists
-once, as a projection, and the previews read the same projections the commit
-applies.
-
 ## `createDateAdapter(locale)`
 
 Locale-aware editable numeric adapter:

package/docs/ARCHITECTURE.md

@@ -197,3 +197,75 @@ Expected homes:
 - start/end relationship → `date-range.js`.
 
 Do not add a plugin system to solve a one-off rendering need.
+
+## 11. Lifecycle and supported mutations
+
+### 11.1 One session token
+
+Every lifetime owns one `AbortController`: a picker connection, a calendar connection, a `DateFieldController`. Listeners are attached with its `signal`, and teardown aborts it.
+
+Any write that follows a suspension (`await`, timer, microtask) is checked against **the session captured when the operation started**, never against the current one:
+
+```js
+const session = this._session;
+const result = await field.commit();
+if (session.signal.aborted) return;
+```
+
+A reconnected component has a new, live session. Testing `this._session` after the await would let a stale continuation through — that is the exact failure `1977785` fixed locally. This rule replaces per-path guards; it is not one more guard.
+
+Scheduling stays at the call site (`queueMicrotask` vs `setTimeout`) because Chromium focus behavior depends on it. Only the guard is shared.
+
+### 11.2 Three distinct questions, three mechanisms
+
+| Question | Mechanism | Scope |
+|---|---|---|
+| Is the session I started in still alive? | captured `AbortSignal` | per connection / controller |
+| Is my operation still the newest intent? | monotonic generation (`commitId`, activation id) | per field / per activation |
+| Is the action still allowed now? | native state + interaction state (`isEditable()`, `:disabled`, `_open`, active bound) | read at apply time |
+
+Do not merge them. The signal says nothing about a newer intent, and neither says whether a `<fieldset>` was disabled or the popup closed.
+
+### 11.3 Supported mutations
+
+| Element | Policy |
+|---|---|
+| single/range mode | read at connect; changing it requires reconnecting |
+| identity of `[data-range-start]` / `[data-range-end]` inputs | fixed at connect |
+| presence and role of `[data-time-start]` / `[data-time-end]` | fixed at connect |
+| initial values (`input.value`, `defaultValue`) | read at connect |
+| public API (`value`, `range`, `min`, `max`, `locale`, `source`, `dateState`, `renderDay`, `isDateDisabled`, `messages`, `controlClasses`, `monthFormat`, `openOnFocus`, `coordinateSpace`) | live; each setter documents whether it invalidates pending work |
+| `name`, `form`, `disabled`, `readonly`, disabled fieldset, form reset, `defaultValue` | followed: this is the browser contract, not an arbitrary mutation |
+| visible input text | draft, read at commit (blur/change/validate) |
+| replacing child inputs | unsupported without reconnecting |
+
+Undocumented structural mutations carry no guarantee:
+
+> Undocumented structural mutations provide no resynchronization guarantee and no guarantee that interaction state is preserved. The component supports only the structure captured at connect time and the mutations listed above. To change the structure, disconnect and reconnect the component.
+
+A security or native-data-integrity defect is still acceptable **inside a supported usage**, with a reproducible scenario. It is not required to be robust against arbitrary combinations of DOM mutations.
+
+The initial `name` is captured for restoration; the current `name` stays dynamic.
+
+### 11.4 Reconnect is a new session
+
+Moving an element in the DOM disconnects and reconnects it. That rebuilds the controllers and calendar and abandons in-flight interaction without emitting an event. Native values and public configuration survive; popup, focus and active-bound state do not. This is the contract, not an edge case to patch.
+
+### 11.5 State authorities
+
+Name the authority before touching sync code; everything else is a projection recomputed from it.
+
+| Mode | Authority | Projections |
+|---|---|---|
+| single | `DatePickerElement._value` | field canonical, hidden ISO, formatted text, `calendar.value`, `value` attribute |
+| range | `DateRangeController.start/end` | each field canonical, hidden ISO, texts, `calendar.highlightedRange` (only when displayable) |
+| calendar | `CalendarModel` | DOM, `_renderedStates` (paint cache) |
+| draft | input text | re-read at commit; `_dirty` says whether it differs from the authority |
+| native default | `input.defaultValue` | restored by reset; `_generatedDefault` separates a generated default from an application one |
+
+Priority rules:
+
+- assigning `value`/`range` invalidates pending activations and commits;
+- a form reset wins and resynchronizes everything;
+- a direct native write to the input is read at commit, not watched;
+- a commit result is applied only if the captured session is alive **and** its `commitId` is current.

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.3",
+  "version": "0.6.0",
   "description": "Native-first date picker and inline calendar primitives",
   "type": "module",
   "sideEffects": [

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,8 +164,9 @@ export class DateCalendarElement extends HTMLElement {
     this._id = `date-calendar-${++uid}`;
     this._model = new CalendarModel();
     this._connected = false;
-    /** Connect/disconnect generation guarding deferred work. */
-    this._lifecycleId = 0;
+    /** 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;
@@ -213,7 +215,7 @@ export class DateCalendarElement extends HTMLElement {
 
   connectedCallback() {
     if (this._connected) return;
-    this._lifecycleId++;
+    this._session = createSession();
     upgradeProperties(this, [
       "locale",
       "min",
@@ -233,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();
@@ -242,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();
   }
 
@@ -255,20 +263,31 @@ export class DateCalendarElement extends HTMLElement {
     this._stopDefaultMessages?.();
     this._stopDefaultMessages = null;
     this._connected = false;
-    this._lifecycleId++;
     this._loadController?.abort();
     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);
+    }
   }
 
   /** @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;
@@ -289,18 +308,15 @@ export class DateCalendarElement extends HTMLElement {
         return;
       }
     }
-    if (!this._connected) return;
     this._syncModel();
     this.render();
   }
 
-  /** Run a focus microtask only in the lifecycle that scheduled it. @param {() => void} callback */
+  /** Run a focus microtask only in the connection that scheduled it. @param {() => void} callback */
   _queueFocus(callback) {
-    const lifecycleId = this._lifecycleId;
-    queueMicrotask(() => {
-      if (!this._connected || lifecycleId !== this._lifecycleId) return;
-      callback();
-    });
+    const session = this._session;
+    if (!session) return;
+    queueMicrotask(guard(session.signal, callback));
   }
 
   /** @public */
@@ -646,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");
         }
       }
     })();
@@ -821,7 +838,7 @@ export class DateCalendarElement extends HTMLElement {
    */
   async activateDate(date) {
     if (!this._connected) return false;
-    const lifecycleId = this._lifecycleId;
+    const session = this._session;
     const hostIntent = this._hostIntent?.date === date ? this._hostIntent.intent : undefined;
     this._hostIntent = null;
     /** @param {Event} event */
@@ -833,7 +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 (!this._connected || lifecycleId !== this._lifecycleId) return false;
+    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 })));
@@ -848,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);

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,8 +36,8 @@ export class DateFieldController {
     this.canonical = "";
     this._dirty = false;
     this._commitId = 0;
-    /** A torn-down controller is terminal: no commit may start or resume. */
-    this._disposed = false;
+    /** 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;
@@ -186,7 +187,10 @@ export class DateFieldController {
   async commit(options = {}) {
     const input = this.input;
     const commitId = ++this._commitId;
-    if (this._disposed) return { status: "stale", 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", commitId };
@@ -202,9 +206,12 @@ export class DateFieldController {
     }
     if (this.confirm) {
       const result = await this.confirm(parsed, options);
-      // A disconnect tears this controller down while the confirm is pending;
-      // its result must not touch validity or the hidden field any more.
-      if (this._disposed || commitId !== this._commitId) return { status: "stale", commitId };
+      // 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);
@@ -251,7 +258,7 @@ export class DateFieldController {
    * reconnected picker rebuilds from the live DOM instead of resuming them. */
   teardown() {
     this.dirty();
-    this._disposed = true;
+    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;