@lekoala/date-picker 0.5.0 → 0.5.2

package/src/date-picker.js

@@ -1,21 +1,52 @@
 import { autoUpdate, reposition } from "@lekoala/floating";
-import { getDefaultControlClasses, resolveControlClasses, sameControlClasses } from "./control-classes.js";
+import { activationIntents } from "./activation-intents.js";
+import {
+  getDefaultControlClasses,
+  normalizeControlClasses,
+  resolveControlClasses,
+  setDefaultControlClasses,
+} from "./control-classes.js";
 import { compareDates, isDate, monthKey, todayISO } from "./date.js";
 import { DateCalendarElement } from "./date-calendar.js";
-import { DateFieldController } from "./date-field.js";
+import { DateFieldController, isEditable } from "./date-field.js";
 import { DateRangeController, normalizeRange } from "./date-range.js";
 import { createDateAdapter, formatLongDate, resolveLocale } from "./intl.js";
-import { getDefaultMessages } from "./messages.js";
+import { getDefaultMessages, setDefaultMessages, subscribeDefaultMessages } from "./messages.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 */
+
 export class DatePickerElement extends HTMLElement {
   static observedAttributes = ["value", "locale", "min", "max", "open-on-focus", "month-format"];
 
+  /** @public @param {Partial<import("./control-classes.js").ControlClasses>} classes */
+  static setDefaultControlClasses(classes) {
+    setDefaultControlClasses(classes);
+  }
+
+  /** @public */
+  static getDefaultControlClasses() {
+    return getDefaultControlClasses();
+  }
+
+  /** @public @param {Partial<typeof import("./messages.js").DEFAULT_MESSAGES>} messages */
+  static setDefaultMessages(messages) {
+    setDefaultMessages(messages);
+  }
+
+  /** @public */
+  static getDefaultMessages() {
+    return getDefaultMessages();
+  }
+
   constructor() {
     super();
     this._id = `date-picker-${++uid}`;
@@ -36,12 +67,10 @@ export class DatePickerElement extends HTMLElement {
     this._timeOrderOwned = new Set();
     /** @type {"" | "start" | "end"} */
     this._lastFocusEndpoint = "";
-    this._rangeCommitId = 0;
-    /** Grid activation intents, keyed by date: the generation at interaction
-     * time (range mode supersession/stale protection) plus the bound a drag
-     * drop targets, empty for a normal pick.
-     * @type {Map<string, {id: number, endpoint: "" | "start" | "end"}>} */
-    this._pendingIntents = new Map();
+    /** Activation generation. A grid intent records it at interaction time
+     * and travels with its own activation (see `activationIntents`), so a late
+     * response is checked against the generation, never looked up by date. */
+    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} */
@@ -63,15 +92,19 @@ export class DatePickerElement extends HTMLElement {
     this._stopTracking = null;
     this._open = false;
     this._suppressFocusOpen = false;
-    this._messages = getDefaultMessages();
-    this._controlClasses = getDefaultControlClasses();
-    /** @type {any} */
+    /** @type {typeof import("./messages.js").DEFAULT_MESSAGES | null} */
+    this._messages = null;
+    /** @type {Partial<import("./control-classes.js").ControlClasses> | null} */
+    this._controlClasses = null;
+    /** @type {(() => void) | null} */
+    this._stopDefaultMessages = null;
+    /** @type {import("./date-calendar.js").DateSource | null} */
     this._source = null;
-    /** @type {any} */
+    /** @type {import("./date-calendar.js").DateStateResolver | null} */
     this._dateState = null;
-    /** @type {any} */
+    /** @type {import("./date-calendar.js").DayRenderer | null} */
     this._renderDay = null;
-    /** @type {any} */
+    /** @type {import("./date-calendar.js").DateDisabledPredicate | null} */
     this._isDateDisabled = null;
     /** Public picker coordinate-space request. @type {"viewport" | "document"} */
     this._coordinateSpace = "viewport";
@@ -83,11 +116,32 @@ export class DatePickerElement extends HTMLElement {
 
   connectedCallback() {
     if (this._connected) return;
-    if (this.hasAttribute("range")) {
-      this._connectRange();
-      return;
+    upgradeProperties(this, [
+      "locale",
+      "min",
+      "max",
+      "monthFormat",
+      "openOnFocus",
+      "coordinateSpace",
+      "controlClasses",
+      "messages",
+      "source",
+      "dateState",
+      "renderDay",
+      "isDateDisabled",
+    ]);
+    if (this.hasAttribute("range")) this._connectRange();
+    else this._connectSingle();
+    // 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();
     }
-    this._connectSingle();
   }
 
   _connectSingle() {
@@ -101,7 +155,7 @@ export class DatePickerElement extends HTMLElement {
     this._connected = true;
     this._input = input;
     this._discoverTimeFields();
-    this._field = new DateFieldController(input, { messages: this._messages, locale: this.locale });
+    this._field = new DateFieldController(input, { messages: this.messages, locale: this.locale });
     this._field.onAttributesChanged = () => this._syncInputState();
     this._field.confirm = (date, options) => this._confirmDate(date, options);
     this._setupFormValue();
@@ -115,18 +169,14 @@ export class DatePickerElement extends HTMLElement {
       this.getAttribute("value") || (isDate(input.value) ? input.value : adapter.parse(input.value));
     if (initial && isDate(initial)) this._setValue(initial, { emit: false, format: true });
     else if (!input.value) this._setValue("", { emit: false, format: false });
-    else input.setCustomValidity(this._messages.invalidDate);
+    else input.setCustomValidity(this.messages.invalidDate);
 
     // Native form reset restores control defaultValues, then _restoreDefault()
-    // recommits the canonical value from them. Never redefine an author-provided
-    // input.defaultValue here: the next reset must use the native default (which
-    // the app may change). Only when enhancement itself supplies the initial
-    // text (picker value attr, no input value attr) does that text become the
-    // default to restore.
+    // recommits the canonical value from them. Only when enhancement itself
+    // supplies the initial text (picker value attr, no input value attr) does
+    // that text become the default to restore.
     if (this._field.hidden) this._field.hidden.defaultValue = this._value;
-    if (input.getAttribute("value") == null && input.defaultValue === "") {
-      input.defaultValue = input.value;
-    }
+    this._field.adoptDefault();
   }
 
   /**
@@ -171,8 +221,8 @@ export class DatePickerElement extends HTMLElement {
     this._connected = true;
     this._input = null;
     this._fields = [
-      new DateFieldController(startInput, { messages: this._messages, locale: this.locale }),
-      new DateFieldController(endInput, { messages: this._messages, locale: this.locale }),
+      new DateFieldController(startInput, { messages: this.messages, locale: this.locale }),
+      new DateFieldController(endInput, { messages: this.messages, locale: this.locale }),
     ];
     this._range = new DateRangeController();
     this._rangeOriginalDescribedBy = [
@@ -193,22 +243,27 @@ export class DatePickerElement extends HTMLElement {
     const adapter = this._adapter();
     const initialStart = isDate(startInput.value) ? startInput.value : adapter.parse(startInput.value);
     const initialEnd = isDate(endInput.value) ? endInput.value : adapter.parse(endInput.value);
+    // Read the authored text before _setRange() reformats an unparsable one away.
+    const startText = startInput.value;
+    const endText = endInput.value;
     this._setRange(initialStart || "", initialEnd || "", { emit: false });
-    if (startInput.value.trim() && !isDate(initialStart))
-      startInput.setCustomValidity(this._messages.invalidDate);
-    if (endInput.value.trim() && !isDate(initialEnd)) endInput.setCustomValidity(this._messages.invalidDate);
+    for (const [input, text, initial] of /** @type {const} */ ([
+      [startInput, startText, initialStart],
+      [endInput, endText, initialEnd],
+    ])) {
+      if (!text.trim() || isDate(initial)) continue;
+      input.value = text;
+      input.setCustomValidity(this.messages.invalidDate);
+    }
 
     if (this._fields[0].hidden) this._fields[0].hidden.defaultValue = this._range.start;
     if (this._fields[1].hidden) this._fields[1].hidden.defaultValue = this._range.end;
-    if (startInput.getAttribute("value") == null && startInput.defaultValue === "") {
-      startInput.defaultValue = startInput.value;
-    }
-    if (endInput.getAttribute("value") == null && endInput.defaultValue === "") {
-      endInput.defaultValue = endInput.value;
-    }
+    for (const field of this._fields) field.adoptDefault();
   }
 
   disconnectedCallback() {
+    this._stopDefaultMessages?.();
+    this._stopDefaultMessages = null;
     this._connected = false;
     this.hide(false);
     this._controller?.abort();
@@ -254,8 +309,10 @@ export class DatePickerElement extends HTMLElement {
     if (!this._connected || this._reflecting || oldValue === newValue) return;
     if (name === "value") {
       if (this._rangeMode()) return;
-      if (!newValue || isDate(newValue))
+      if (!newValue || isDate(newValue)) {
+        this._supersedeActivations();
         this._setValue(newValue || "", { emit: false, format: true, reflect: false });
+      }
       return;
     }
     if (name === "locale") this._refreshLocale();
@@ -284,6 +341,7 @@ export class DatePickerElement extends HTMLElement {
       throw new TypeError("value is not available in range mode; use range");
     }
     if (value && !isDate(value)) throw new TypeError(`Invalid date-picker value: ${value}`);
+    this._supersedeActivations();
     this._setValue(value || "", { emit: false, format: true });
   }
 
@@ -295,6 +353,7 @@ export class DatePickerElement extends HTMLElement {
   set range(value) {
     if (!this._rangeMode()) throw new TypeError("range is only available on <date-picker range>");
     const { start, end } = normalizeRange(value);
+    this._supersedeActivations();
     this._setRange(start, end);
   }
 
@@ -356,37 +415,45 @@ export class DatePickerElement extends HTMLElement {
   }
 
   /**
-   * Author classes for header controls; merged with global defaults.
+   * Author classes for header controls; omitted roles follow current global defaults.
    * @public
    * @returns {import("./control-classes.js").ControlClasses}
    */
   get controlClasses() {
-    return { ...this._controlClasses };
+    return resolveControlClasses(this._controlClasses);
   }
 
   /** @param {Partial<import("./control-classes.js").ControlClasses> | null} value */
   set controlClasses(value) {
-    const classes = resolveControlClasses(value);
-    if (sameControlClasses(classes, this._controlClasses)) return;
-    this._controlClasses = classes;
+    this._controlClasses = normalizeControlClasses(value);
     if (this._calendar) this._calendar.controlClasses = this._controlClasses;
   }
 
-  /** @public */
+  /** @public @returns {typeof import("./messages.js").DEFAULT_MESSAGES} */
   get messages() {
-    return this._messages;
+    return this._messages ?? getDefaultMessages();
   }
 
+  /** @param {Partial<typeof import("./messages.js").DEFAULT_MESSAGES> | null} value */
   set messages(value) {
-    this._messages = { ...getDefaultMessages(), ...(value || {}) };
+    this._messages = value == null ? null : { ...getDefaultMessages(), ...value };
     if (this._calendar) this._calendar.messages = this._messages;
-    for (const field of this._fields || []) field.setMessages(this._messages);
-    this._field?.setMessages(this._messages);
+    this._refreshMessages();
+  }
+
+  _refreshMessages() {
+    const messages = this.messages;
+    for (const field of this._fields || []) field.setMessages(messages);
+    this._field?.setMessages(messages);
+    this._panel?.setAttribute("aria-label", messages.calendar);
+    const field = this._field ?? this._fields?.[0];
+    if (this._formatHint && field)
+      this._formatHint.textContent = `${messages.formatHint}: ${field.placeholder}`;
     this._refreshButtonLabel();
-    void this.validate();
+    if (this._connected) void this.validate();
   }
 
-  /** @public @returns {any} */
+  /** @public @returns {import("./date-calendar.js").DateSource | null} */
   get source() {
     return this._source;
   }
@@ -397,7 +464,7 @@ export class DatePickerElement extends HTMLElement {
     if (this._connected) void this.validate();
   }
 
-  /** @public @returns {any} */
+  /** @public @returns {import("./date-calendar.js").DateStateResolver | null} */
   get dateState() {
     return this._dateState;
   }
@@ -408,7 +475,7 @@ export class DatePickerElement extends HTMLElement {
     if (this._connected) void this.validate();
   }
 
-  /** @public @returns {any} */
+  /** @public @returns {import("./date-calendar.js").DayRenderer | null} */
   get renderDay() {
     return this._renderDay;
   }
@@ -418,7 +485,7 @@ export class DatePickerElement extends HTMLElement {
     if (this._calendar) this._calendar.renderDay = this._renderDay;
   }
 
-  /** @public @returns {any} */
+  /** @public @returns {import("./date-calendar.js").DateDisabledPredicate | null} */
   get isDateDisabled() {
     return this._isDateDisabled;
   }
@@ -453,8 +520,10 @@ export class DatePickerElement extends HTMLElement {
     // movement lives in the field controller.
     this._field?.syncInputState();
     const button = this._buttons[0]?.button;
+    // Own state only: a disabled ancestor fieldset already disables the button
+    // natively, and copying it would stick once the fieldset is re-enabled.
     if (button) button.disabled = input.disabled || input.readOnly;
-    if (this._open && (input.disabled || input.readOnly)) this.hide(false);
+    if (this._open && !isEditable(input)) this.hide(false);
   }
 
   _syncRangeFields() {
@@ -469,9 +538,8 @@ export class DatePickerElement extends HTMLElement {
     }
     this._syncDragAffordance();
     const active = this._range?.activeEndpoint === "end" ? 1 : 0;
-    if (this._open && (this._fields[active]?.input.disabled || this._fields[active]?.input.readOnly)) {
-      this.hide(false);
-    }
+    const activeInput = this._fields[active]?.input;
+    if (this._open && activeInput && !isEditable(activeInput)) this.hide(false);
   }
 
   _setRangeAria() {
@@ -541,7 +609,7 @@ export class DatePickerElement extends HTMLElement {
     panel.className = "dp-picker-panel";
     panel.setAttribute("popover", "manual");
     panel.setAttribute("role", "dialog");
-    panel.setAttribute("aria-label", this._messages.calendar);
+    panel.setAttribute("aria-label", this.messages.calendar);
 
     const calendar = new DateCalendarElement();
     calendar.selection = "none";
@@ -663,17 +731,27 @@ export class DatePickerElement extends HTMLElement {
       { signal },
     );
     button.addEventListener("keydown", (event) => this._onTriggerKeyDown("", event), { signal });
+    calendar.addEventListener("click", (event) => this._captureGridIntent(event), { capture: true, signal });
+    calendar.addEventListener("keydown", (event) => this._captureGridIntent(event), {
+      capture: true,
+      signal,
+    });
     calendar.addEventListener(
       "dateactivate",
       (event) => {
         const custom = /** @type {CustomEvent} */ (event);
         const date = custom.detail?.date;
         if (!isDate(date)) return;
+        const intent = /** @type {PickIntent | undefined} */ (activationIntents.get(custom));
         // 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 (this._input?.disabled || this._input?.readOnly) 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.
+          if (intent && intent.id !== this._activationId) return;
+          if (!this._input || !isEditable(this._input)) return;
           this._field?.dirty();
           this._setValue(date, { emit: true, format: true });
           this.hide(false);
@@ -697,7 +775,16 @@ export class DatePickerElement extends HTMLElement {
 
     for (const [index, field] of this._fields.entries()) {
       const endpoint = index === 1 ? "end" : "start";
-      field.input.addEventListener("input", () => field.handleInput(), { signal });
+      field.input.addEventListener(
+        "input",
+        () => {
+          // handleInput() rewrites the custom validity: any order error is gone.
+          field.handleInput();
+          this._orderTags.delete(index);
+          if (!field.isDirty) this._revalidateRange(endpoint);
+        },
+        { signal },
+      );
       field.input.addEventListener("change", () => void this._commitFieldText(endpoint), { signal });
       field.input.addEventListener("blur", () => void this._commitFieldText(endpoint), { signal });
       field.input.addEventListener(
@@ -748,11 +835,10 @@ export class DatePickerElement extends HTMLElement {
         if (!isDate(date)) return;
         queueMicrotask(() => {
           if (custom.defaultPrevented || !this._connected || !this._range) return;
-          const intent = this._pendingIntents.get(date);
+          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._rangeCommitId) return;
-          this._pendingIntents.delete(date);
+          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.
@@ -805,8 +891,7 @@ export class DatePickerElement extends HTMLElement {
     const calendar = this._calendar;
     if (!this._range || !calendar) return;
     this._range.focus(endpoint);
-    this._rangeCommitId++;
-    this._pendingIntents.clear();
+    this._activationId++;
     this._lastFocusEndpoint = endpoint;
     const target = this._boundCanonical(endpoint) || todayISO();
     calendar.display = monthKey(target);
@@ -892,8 +977,7 @@ export class DatePickerElement extends HTMLElement {
     if (switched) {
       // A late calendar activation targeting the previous endpoint must not
       // commit after the intent moved to the other bound.
-      this._rangeCommitId++;
-      this._pendingIntents.clear();
+      this._activationId++;
     }
     if (!this.openOnFocus || this._suppressFocusOpen) return;
     const related = event.relatedTarget;
@@ -901,30 +985,49 @@ export class DatePickerElement extends HTMLElement {
     if (!this._open) this.show({ moveFocus: false });
   }
 
-  /** Record range-mode grid activation intent (click or keyboard) so a stale,
+  /** Record grid activation intent (click or keyboard) so a stale,
    * late-confirmed dateactivate can be recognized and dropped. Each new grid
    * activation supersedes every earlier pending one.
    * @param {Event} event */
   _captureGridIntent(event) {
-    if (!this._rangeMode() || !this._range) return;
+    if (this._rangeMode() ? !this._range : !this._field) return;
     if (event.type === "keydown") {
       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;
-    // Each activation supersedes every earlier pending one.
-    this._pendingIntents.clear();
-    this._pendingIntents.set(date, { id: ++this._rangeCommitId, endpoint: "" });
+    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
+   */
+  _attachIntent(date, endpoint) {
+    if (!this._calendar) return;
+    this._calendar._hostIntent = { date, intent: { id: ++this._activationId, endpoint } };
+  }
+
+  /**
+   * Invalidate every pending grid activation: each one carries its own intent,
+   * which now fails the generation check. A programmatic
+   * `calendar.activateDate()` carries none.
+   */
+  _supersedeActivations() {
+    this._activationId++;
   }
 
   /** Whether one bound can receive a user pick right now.
    * @param {"start" | "end"} bound */
   _boundEditable(bound) {
     const field = this._fields?.[bound === "end" ? 1 : 0];
-    return field != null && !field.input.disabled && !field.input.readOnly;
+    return field != null && isEditable(field.input);
   }
 
   /**
@@ -1122,8 +1225,7 @@ export class DatePickerElement extends HTMLElement {
     // 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._pendingIntents.clear();
-    this._pendingIntents.set(target, { id: ++this._rangeCommitId, endpoint: drag.endpoint });
+    this._attachIntent(target, drag.endpoint);
     void this._calendar?.activateDate(target);
   }
 
@@ -1184,7 +1286,7 @@ export class DatePickerElement extends HTMLElement {
     calendar.renderDay = this._renderDay;
     calendar.isDateDisabled = this._isDateDisabled;
     if (!this._rangeMode() && this._value) calendar.value = this._value;
-    if (panel) panel.setAttribute("aria-label", this._messages.calendar);
+    if (panel) panel.setAttribute("aria-label", this.messages.calendar);
   }
 
   _refreshLocale() {
@@ -1193,7 +1295,7 @@ export class DatePickerElement extends HTMLElement {
     if (this._rangeMode() && this._fields) {
       this._fields[0].setLocale(this.locale);
       this._fields[1].setLocale(this.locale);
-      hint.textContent = `${this._messages.formatHint}: ${this._fields[0].placeholder}`;
+      hint.textContent = `${this.messages.formatHint}: ${this._fields[0].placeholder}`;
       for (const [index, field] of this._fields.entries()) {
         if (!field.input.hasAttribute("placeholder") || this._generatedPlaceholder) {
           field.input.placeholder = field.placeholder;
@@ -1208,7 +1310,7 @@ export class DatePickerElement extends HTMLElement {
     const field = this._field;
     if (!field) return;
     field.setLocale(this.locale);
-    hint.textContent = `${this._messages.formatHint}: ${field.placeholder}`;
+    hint.textContent = `${this.messages.formatHint}: ${field.placeholder}`;
     if (!field.input.hasAttribute("placeholder") || this._generatedPlaceholder) {
       field.input.placeholder = field.placeholder;
       this._generatedPlaceholder = true;
@@ -1224,7 +1326,7 @@ export class DatePickerElement extends HTMLElement {
       this._refreshRangeButtonLabel();
       return;
     }
-    const prefix = this._value ? this._messages.changeDate : this._messages.chooseDate;
+    const prefix = this._value ? this.messages.changeDate : this.messages.chooseDate;
     const suffix = this._value ? `, ${formatLongDate(this._value, this.locale)}` : "";
     single.setAttribute("aria-label", `${prefix}${suffix}`);
   }
@@ -1236,9 +1338,9 @@ export class DatePickerElement extends HTMLElement {
     const { start, end } = this._range;
     for (const { button, endpoint } of this._buttons) {
       const bound = endpoint === "end" ? end : start;
-      const prefix = bound ? this._messages.changeDate : this._messages.chooseDate;
+      const prefix = bound ? this.messages.changeDate : this.messages.chooseDate;
       const suffix = bound ? `, ${formatLongDate(bound, this.locale)}` : "";
-      const boundLabel = endpoint === "end" ? this._messages.rangeEnd : this._messages.rangeStart;
+      const boundLabel = endpoint === "end" ? this.messages.rangeEnd : this.messages.rangeStart;
       button.setAttribute("aria-label", `${prefix}${suffix}, ${boundLabel}`);
     }
   }
@@ -1294,7 +1396,7 @@ export class DatePickerElement extends HTMLElement {
     }
     const confirmed = await calendar.ensureDate(date);
     const state = calendar.getDateState(date);
-    if (!confirmed || state.disabled) return { ok: false, message: this._messages.unavailableDate };
+    if (!confirmed || state.disabled) return { ok: false, message: this.messages.unavailableDate };
     return { ok: true };
   }
 
@@ -1345,7 +1447,7 @@ export class DatePickerElement extends HTMLElement {
     if (!field) return false;
     // User initiated picks must respect disabled/readonly bounds; reset,
     // explicit validation and programmatic assignments keep their own path.
-    if (options.user === true && (field.input.disabled || field.input.readOnly)) return false;
+    if (options.user === true && !isEditable(field.input)) return false;
     const next = value || "";
     // The range model may already hold the target (a calendar activation moved
     // it), so change detection reads the field canonical, not the model.
@@ -1425,7 +1527,7 @@ export class DatePickerElement extends HTMLElement {
     for (const bound of bounds) {
       const index = bound === "end" ? 1 : 0;
       const input = this._fields[index].input;
-      const message = bound === "end" ? this._messages.rangeOrderEnd : this._messages.rangeOrderStart;
+      const message = bound === "end" ? this.messages.rangeOrderEnd : this.messages.rangeOrderStart;
       const shouldHaveOrder = inverted && bound === which;
       if (shouldHaveOrder) {
         input.setCustomValidity(message);
@@ -1451,8 +1553,8 @@ export class DatePickerElement extends HTMLElement {
     /** @type {["start", "end"]} */
     const bounds = ["start", "end"];
     const inputs = [startInput, endInput];
-    const startValue = startInput && !startInput.disabled ? startInput.value.trim() : "";
-    const endValue = endInput && !endInput.disabled ? endInput.value.trim() : "";
+    const startValue = startInput && !startInput.matches(":disabled") ? startInput.value.trim() : "";
+    const endValue = endInput && !endInput.matches(":disabled") ? endInput.value.trim() : "";
     const inverted =
       Boolean(startInput && endInput && startValue && endValue) &&
       isTime(startValue) &&
@@ -1461,7 +1563,7 @@ export class DatePickerElement extends HTMLElement {
     for (const [index, bound] of bounds.entries()) {
       const input = inputs[index];
       if (!input) continue;
-      const message = bound === "end" ? this._messages.rangeOrderEnd : this._messages.rangeOrderStart;
+      const message = bound === "end" ? this.messages.rangeOrderEnd : this.messages.rangeOrderStart;
       const shouldHaveOrder = inverted && bound === which;
       if (shouldHaveOrder) {
         input.setCustomValidity(message);
@@ -1542,12 +1644,12 @@ export class DatePickerElement extends HTMLElement {
     if (!this._fields) return "";
     const preferred = this._lastFocusEndpoint || "start";
     const preferredIndex = preferred === "end" ? 1 : 0;
-    if (!this._fields[preferredIndex].input.disabled && !this._fields[preferredIndex].input.readOnly) {
+    if (isEditable(this._fields[preferredIndex].input)) {
       return preferred;
     }
     const alternative = preferred === "end" ? "start" : "end";
     const alternativeIndex = alternative === "end" ? 1 : 0;
-    if (!this._fields[alternativeIndex].input.disabled && !this._fields[alternativeIndex].input.readOnly) {
+    if (isEditable(this._fields[alternativeIndex].input)) {
       return alternative;
     }
     return "";
@@ -1563,6 +1665,8 @@ 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 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") {
           const which = index === 1 ? "end" : "start";
           this._setBound(which, result.value || "", { format: result.status === "ok" });
@@ -1574,11 +1678,9 @@ export class DatePickerElement extends HTMLElement {
     }
     const input = this._field?.input;
     if (!input) return true;
-    if (!input.value.trim()) {
-      input.setCustomValidity("");
-    } else {
-      await this._commitText(false, { force: true, moveDisplay: false });
-    }
+    // 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 });
     // 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");
@@ -1598,7 +1700,7 @@ export class DatePickerElement extends HTMLElement {
       this._activateRangeEndpoint(endpoint);
     } else {
       const input = this._input;
-      if (!input || input.disabled || input.readOnly) return;
+      if (!input || !isEditable(input)) return;
       const target = this._value || this._adapter().parse(input.value) || todayISO();
       calendar.display = monthKey(target);
       calendar.focusedDate = target;
@@ -1646,8 +1748,7 @@ export class DatePickerElement extends HTMLElement {
     }
     this._open = false;
     this._setExpanded(false);
-    this._rangeCommitId++;
-    this._pendingIntents.clear();
+    this._supersedeActivations();
     this._suppressGridClick = false;
     if (this._drag) {
       this._releaseDragCapture(this._drag.pointerId);
@@ -1676,7 +1777,7 @@ export class DatePickerElement extends HTMLElement {
     if (active) {
       const index = active === "end" ? 1 : 0;
       const field = this._fields?.[index];
-      if (field && !field.input.disabled && !field.input.readOnly) return active;
+      if (field && isEditable(field.input)) return active;
     }
     return this._resolveRangeEndpoint();
   }