@lekoala/date-picker 0.5.1 → 0.5.3

package/dist/date-picker.js

@@ -1,4 +1,4 @@
-/*** @lekoala/date-picker v0.5.1 - https://github.com/lekoala/date-picker ***/
+/*** @lekoala/date-picker v0.5.3 - https://github.com/lekoala/date-picker ***/
 (() => {
   var __defProp = Object.defineProperty;
   var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -44,6 +44,9 @@
     defineDatePicker: () => defineDatePicker
   });
 
+  // src/activation-intents.js
+  var activationIntents = new WeakMap;
+
   // src/date.js
   var DATE_RE = /^(\d{4})-(\d{2})-(\d{2})$/;
   var MONTH_RE = /^(\d{4})-(\d{2})$/;
@@ -75,9 +78,11 @@
     const text = String(value || "");
     const monthMatch = MONTH_RE.exec(text);
     if (monthMatch) {
+      const year = Number(monthMatch[1]);
       const month = Number(monthMatch[2]);
-      if (month >= 1 && month <= 12)
+      if (year >= 1 && year <= 9999 && month >= 1 && month <= 12) {
         return `${monthMatch[1]}-${String(month).padStart(2, "0")}`;
+      }
     }
     const parsed = parseDate(text);
     if (!parsed)
@@ -846,8 +851,12 @@
       this._id = `date-calendar-${++uid}`;
       this._model = new CalendarModel;
       this._connected = false;
+      this._lifecycleId = 0;
       this._rendering = false;
+      this._heading = null;
+      this._renderRoot = null;
       this._source = null;
+      this._hostIntent = null;
       this._sourceStates = new Map;
       this._loadedRanges = new Set;
       this._loadController = null;
@@ -872,6 +881,7 @@
     connectedCallback() {
       if (this._connected)
         return;
+      this._lifecycleId++;
       upgradeProperties(this, [
         "locale",
         "min",
@@ -914,6 +924,7 @@
       this._stopDefaultMessages?.();
       this._stopDefaultMessages = null;
       this._connected = false;
+      this._lifecycleId++;
       this._loadController?.abort();
       this._loadController = null;
       this._loadingKey = "";
@@ -923,12 +934,43 @@
       this.removeEventListener("keydown", this._onKeyDown);
       this.removeEventListener("focusin", this._onFocusIn);
     }
-    attributeChangedCallback() {
-      if (!this._connected || this._rendering)
+    attributeChangedCallback(name, _oldValue, newValue) {
+      if (this._rendering)
+        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;
+        }
+      }
+      if (!this._connected)
         return;
       this._syncModel();
       this.render();
     }
+    _queueFocus(callback) {
+      const lifecycleId = this._lifecycleId;
+      queueMicrotask(() => {
+        if (!this._connected || lifecycleId !== this._lifecycleId)
+          return;
+        callback();
+      });
+    }
     get locale() {
       return resolveLocale(this.getAttribute("locale") || "");
     }
@@ -1269,7 +1311,7 @@
         this._moveFocusDom(previousFocused, this._model.focused, moveFocus);
       }
       if (moveFocus)
-        queueMicrotask(() => this.focusGrid());
+        this._queueFocus(() => this.focusGrid());
     }
     _moveFocusDom(previous, next, moveFocus = true) {
       const prevCell = previous ? this.querySelector(`.dp-day[data-date="${CSS.escape(previous)}"]`) : null;
@@ -1284,6 +1326,15 @@
         this.focusGrid();
       }
     }
+    _syncRovingDom(date) {
+      for (const cell of this.querySelectorAll('.dp-day[tabindex="0"]')) {
+        if (cell instanceof HTMLElement && cell.dataset.date !== date)
+          cell.tabIndex = -1;
+      }
+      const cell = this.querySelector(`.dp-day[data-date="${CSS.escape(date)}"]`);
+      if (cell instanceof HTMLElement)
+        cell.tabIndex = 0;
+    }
     _moveSelectionDom(previousValue, nextValue) {
       if (previousValue) {
         const prev = this.querySelector(`.dp-day[data-date="${CSS.escape(previousValue)}"]`);
@@ -1344,17 +1395,29 @@
         target.focus();
     }
     async activateDate(date) {
+      if (!this._connected)
+        return false;
+      const lifecycleId = this._lifecycleId;
+      const hostIntent = this._hostIntent?.date === date ? this._hostIntent.intent : undefined;
+      this._hostIntent = null;
+      const tagged = (event) => {
+        if (hostIntent !== undefined)
+          activationIntents.set(event, hostIntent);
+        return event;
+      };
       const confirmed = await this.ensureDate(date);
+      if (!this._connected || lifecycleId !== this._lifecycleId)
+        return false;
       const state = this.getDateState(date);
       if (!confirmed || state.disabled) {
-        this.dispatchEvent(new CustomEvent("dateinvalid", { detail: { date, state }, bubbles: true }));
+        this.dispatchEvent(tagged(new CustomEvent("dateinvalid", { detail: { date, state }, bubbles: true })));
         return false;
       }
-      const accepted = this.dispatchEvent(new CustomEvent("dateactivate", {
+      const accepted = this.dispatchEvent(tagged(new CustomEvent("dateactivate", {
         detail: { date, state },
         bubbles: true,
         cancelable: true
-      }));
+      })));
       if (!accepted)
         return false;
       if (this.selection === "single") {
@@ -1399,6 +1462,8 @@
       this._reflect("display", this._model.display);
       if (previousDisplay !== this.display)
         this._emitDisplayChange();
+      else
+        this._syncRovingDom(this._model.focused);
       this.activateDate(date);
     }
     _onChange(event) {
@@ -1409,7 +1474,7 @@
       }
       if (target instanceof HTMLInputElement && target.matches(".dp-year-input")) {
         const year = Number(target.value);
-        if (!Number.isInteger(year) || year < 1 || year > 9998) {
+        if (!Number.isInteger(year) || year < 1 || year > 9999) {
           if (this._connected)
             this.render(false);
           return;
@@ -1425,6 +1490,7 @@
       if (!isDate(date))
         return;
       this._model.focused = date;
+      this._syncRovingDom(date);
       this.dispatchEvent(new CustomEvent("datefocus", { detail: { date, state: this.getDateState(date) }, bubbles: true }));
     }
     _onKeyDown(event) {
@@ -1487,8 +1553,8 @@
       const nextKey = stepMonthKey(display, 1);
       const prevDisabled = Boolean(minMonth && prevKey !== null && prevKey < minMonth);
       const nextDisabled = Boolean(maxMonth && nextKey !== null && nextKey > maxMonth);
-      const minYearAttr = this.min ? ` min="${Number(this.min.slice(0, 4))}"` : "";
-      const maxYearAttr = this.max ? ` max="${Number(this.max.slice(0, 4))}"` : "";
+      const minYearAttr = ` min="${this.min ? Number(this.min.slice(0, 4)) : 1}"`;
+      const maxYearAttr = ` max="${this.max ? Number(this.max.slice(0, 4)) : 9999}"`;
       const showWeeks = this.showWeekNumbers && this.firstDay === 1;
       const weekHeader = showWeeks ? `<th scope="col" class="dp-week-heading" abbr="${escapeHtml(this.messages.week)}">#</th>` : "";
       const monthOptions = names.map((name, index) => {
@@ -1526,8 +1592,20 @@
           <select id="${this._id}-month" class="dp-month-select ${monthClass}" aria-label="${escapeHtml(this.messages.month)}">${monthOptions}</select>`;
       const yearControl = `<label class="dp-visually-hidden" for="${this._id}-year">${escapeHtml(this.messages.year)}</label>
           <input id="${this._id}-year" class="dp-year-input ${yearClass}" type="number" inputmode="numeric" value="${displayYear}"${minYearAttr}${maxYearAttr} aria-label="${escapeHtml(this.messages.year)}">`;
+      if (!this._heading?.isConnected || !this._renderRoot?.isConnected) {
+        this.replaceChildren();
+        const heading = document.createElement("h2");
+        heading.id = headingId;
+        heading.className = "dp-calendar-heading dp-visually-hidden";
+        heading.setAttribute("aria-live", "polite");
+        const renderRoot = document.createElement("div");
+        renderRoot.className = "dp-calendar-render";
+        this.append(heading, renderRoot);
+        this._heading = heading;
+        this._renderRoot = renderRoot;
+      }
       this._rendering = true;
-      this.innerHTML = `
+      this._renderRoot.innerHTML = `
       <div class="dp-calendar-shell">
         <div class="dp-calendar-header">
           ${yearFirst ? yearControl : monthControl}
@@ -1535,17 +1613,17 @@
           <button type="button" class="dp-nav dp-prev ${navClass}" data-calendar-action="previous" aria-label="${escapeHtml(this.messages.previousMonth)}"${prevDisabled ? " disabled" : ""}><svg aria-hidden="true" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m4 10 4-4 4 4"/></svg></button>
           <button type="button" class="dp-nav dp-next ${navClass}" data-calendar-action="next" aria-label="${escapeHtml(this.messages.nextMonth)}"${nextDisabled ? " disabled" : ""}><svg aria-hidden="true" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m4 6 4 4 4-4"/></svg></button>
         </div>
-        <h2 id="${headingId}" class="dp-calendar-heading dp-visually-hidden" aria-live="polite">${escapeHtml(formatMonthYear(`${display}-15`, locale))}</h2>
         <table id="${gridId}" class="dp-grid" role="grid" aria-labelledby="${headingId}">
           <thead><tr>${weekHeader}${dayHeaders}</tr></thead>
           <tbody>${rows}</tbody>
         </table>
       </div>`;
+      this._heading.textContent = formatMonthYear(`${display}-15`, locale);
       this._rendering = false;
       this._paintedRange = { ...this._highlightedRange };
       this._paintedPreview = this.hasAttribute("data-range-preview");
       if (focusKey) {
-        queueMicrotask(() => {
+        this._queueFocus(() => {
           let selector = focusKey;
           if (selector.startsWith(".dp-day[data-date=")) {
             selector = `.dp-day[data-date="${CSS.escape(this._model.focused)}"]`;
@@ -1946,6 +2024,10 @@
   }
 
   // src/date-field.js
+  function isEditable(input) {
+    return !input.matches(":disabled") && !input.readOnly;
+  }
+
   class DateFieldController {
     constructor(input, options = {}) {
       this.input = input;
@@ -1955,13 +2037,27 @@
       this.canonical = "";
       this._dirty = false;
       this._commitId = 0;
+      this._disposed = false;
       this._originalName = input.getAttribute("name") || "";
       this._attributeObserver = null;
       this.onAttributesChanged = null;
       this.confirm = null;
+      this._generatedDefault = null;
     }
     setLocale(locale) {
+      const generated = this._generatedDefault;
+      const previous = generated ? this.adapter.format(generated) : null;
       this.adapter = createDateAdapter(locale || "");
+      if (generated && this.input.defaultValue === previous) {
+        this.input.defaultValue = this.adapter.format(generated);
+      }
+    }
+    adoptDefault() {
+      const input = this.input;
+      if (input.getAttribute("value") != null || input.defaultValue !== "")
+        return;
+      input.defaultValue = input.value;
+      this._generatedDefault = this.canonical && input.value ? this.canonical : null;
     }
     setMessages(messages) {
       this.messages = messages || {};
@@ -1976,7 +2072,7 @@
       return this.adapter.placeholder;
     }
     get isDisabled() {
-      return this.input.disabled;
+      return this.input.matches(":disabled");
     }
     get isReadOnly() {
       return this.input.readOnly;
@@ -2044,34 +2140,39 @@
     async commit(options = {}) {
       const input = this.input;
       const commitId = ++this._commitId;
+      if (this._disposed)
+        return { status: "stale", commitId };
       const text = input.value.trim();
       if (!text) {
         if (commitId !== this._commitId)
-          return { status: "stale" };
+          return { status: "stale", commitId };
         input.setCustomValidity("");
-        return { status: "clear", value: "" };
+        return { status: "clear", value: "", commitId };
       }
       const parsed = this.adapter.parse(text);
       if (!parsed) {
         if (commitId !== this._commitId)
-          return { status: "stale" };
+          return { status: "stale", commitId };
         if (this.hidden)
           this.hidden.value = "";
         input.setCustomValidity(this.messages.invalidDate);
-        return { status: "invalid" };
+        return { status: "invalid", commitId };
       }
       if (this.confirm) {
         const result = await this.confirm(parsed, options);
-        if (commitId !== this._commitId)
-          return { status: "stale" };
+        if (this._disposed || commitId !== this._commitId)
+          return { status: "stale", commitId };
         if (!result?.ok) {
           if (this.hidden)
             this.hidden.value = "";
           input.setCustomValidity(result?.message || this.messages.unavailableDate);
-          return { status: "invalid" };
+          return { status: "invalid", commitId };
         }
       }
-      return { status: "ok", value: parsed };
+      return { status: "ok", value: parsed, commitId };
+    }
+    isCommitCurrent(commitId) {
+      return commitId === this._commitId;
     }
     setCanonical(value, options = {}) {
       const next = value || "";
@@ -2092,6 +2193,8 @@
       return parsed && isDate(parsed) ? parsed : "";
     }
     teardown() {
+      this.dirty();
+      this._disposed = true;
       this._attributeObserver?.disconnect();
       this._attributeObserver = null;
       const hiddenName = this.hidden?.getAttribute("name") || this._originalName;
@@ -2163,8 +2266,7 @@
       this._timeFields = [null, null];
       this._timeOrderOwned = new Set;
       this._lastFocusEndpoint = "";
-      this._rangeCommitId = 0;
-      this._pendingIntents = new Map;
+      this._activationId = 0;
       this._previewDate = "";
       this._drag = null;
       this._suppressGridClick = false;
@@ -2175,7 +2277,7 @@
       this._originalDescribedBy = "";
       this._rangeOriginalDescribedBy = ["", ""];
       this._formatHint = null;
-      this._generatedPlaceholder = false;
+      this._generatedPlaceholders = new WeakSet;
       this._controller = null;
       this._stopTracking = null;
       this._open = false;
@@ -2192,6 +2294,9 @@
     _rangeMode() {
       return this.hasAttribute("range") && Boolean(this._range);
     }
+    _ownsField(field) {
+      return this._connected && (field === this._field || Boolean(this._fields?.includes(field)));
+    }
     connectedCallback() {
       if (this._connected)
         return;
@@ -2219,6 +2324,7 @@
           if (this._messages === null)
             this._refreshMessages();
         });
+        this.validate();
       }
     }
     _connectSingle() {
@@ -2248,9 +2354,7 @@
         input.setCustomValidity(this.messages.invalidDate);
       if (this._field.hidden)
         this._field.hidden.defaultValue = this._value;
-      if (input.getAttribute("value") == null && input.defaultValue === "") {
-        input.defaultValue = input.value;
-      }
+      this._field.adoptDefault();
     }
     _discoverTimeFields() {
       this._timeFields = [null, null];
@@ -2307,26 +2411,30 @@
       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);
+      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 [
+        [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._suppressFocusOpen = false;
       this.hide(false);
       this._controller?.abort();
       this._controller = null;
@@ -2367,13 +2475,29 @@
       input.removeAttribute("aria-controls");
     }
     attributeChangedCallback(name, oldValue, newValue) {
-      if (!this._connected || this._reflecting || oldValue === newValue)
+      if (this._reflecting || oldValue === newValue)
+        return;
+      if (name === "value" && newValue && !isDate(newValue)) {
+        this._reflectValue(this._value);
+        return;
+      }
+      if ((name === "min" || name === "max") && newValue && !isDate(newValue)) {
+        this.removeAttribute(name);
+        if (this._connected) {
+          this._syncCalendarOptions();
+          this.validate();
+        }
+        return;
+      }
+      if (!this._connected)
         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")
@@ -2398,6 +2522,7 @@
       }
       if (value && !isDate(value))
         throw new TypeError(`Invalid date-picker value: ${value}`);
+      this._supersedeActivations();
       this._setValue(value || "", { emit: false, format: true });
     }
     get range() {
@@ -2407,6 +2532,7 @@
       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);
     }
     get locale() {
@@ -2547,7 +2673,7 @@
       const button = this._buttons[0]?.button;
       if (button)
         button.disabled = input.disabled || input.readOnly;
-      if (this._open && (input.disabled || input.readOnly))
+      if (this._open && !isEditable(input))
         this.hide(false);
     }
     _syncRangeFields() {
@@ -2562,9 +2688,9 @@
       }
       this._syncDragAffordance();
       const active = this._range?.activeEndpoint === "end" ? 1 : 0;
-      if (this._open && (this._fields[active]?.input.disabled || this._fields[active]?.input.readOnly)) {
+      const activeInput = this._fields[active]?.input;
+      if (this._open && activeInput && !isEditable(activeInput))
         this.hide(false);
-      }
     }
     _setRangeAria() {
       if (!this._fields || !this._panel || !this._formatHint)
@@ -2650,7 +2776,7 @@
           return;
         this.hide(false);
         queueMicrotask(() => {
-          if (!event.defaultPrevented)
+          if (!signal.aborted && !event.defaultPrevented)
             restore();
         });
       }, { capture: true, signal });
@@ -2692,7 +2818,7 @@
       button.addEventListener("click", (event) => {
         if (this._open) {
           if (event.detail === 0) {
-            setTimeout(() => this._calendar?.focusGrid(), 0);
+            this._defer(() => this._calendar?.focusGrid());
             return;
           }
           this.hide(false);
@@ -2701,15 +2827,23 @@
         this.show({ returnFocus: button });
       }, { 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 = event;
         const date = custom.detail?.date;
         if (!isDate(date))
           return;
+        const intent = activationIntents.get(custom);
         queueMicrotask(() => {
-          if (custom.defaultPrevented || !this._connected)
+          if (signal.aborted || custom.defaultPrevented || !this._connected)
             return;
-          if (this._input?.disabled || this._input?.readOnly)
+          if (intent && intent.id !== this._activationId)
+            return;
+          if (!this._input || !isEditable(this._input))
             return;
           this._field?.dirty();
           this._setValue(date, { emit: true, format: true });
@@ -2729,7 +2863,12 @@
       const { signal } = controller;
       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", () => {
+          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("focus", (event) => this._onFieldFocus(endpoint, event), { signal });
@@ -2765,12 +2904,11 @@
         if (!isDate(date))
           return;
         queueMicrotask(() => {
-          if (custom.defaultPrevented || !this._connected || !this._range)
+          if (signal.aborted || custom.defaultPrevented || !this._connected || !this._range)
             return;
-          const intent = this._pendingIntents.get(date);
-          if (intent === undefined || intent.id !== this._rangeCommitId)
+          const intent = activationIntents.get(custom);
+          if (intent === undefined || intent.id !== this._activationId)
             return;
-          this._pendingIntents.delete(date);
           const editable = (bound) => this._boundEditable(bound);
           const result = intent.endpoint ? this._range.moveEndpoint(date, intent.endpoint, editable) : this._range.activate(date, editable);
           if (result.status === "refused") {
@@ -2805,8 +2943,7 @@
       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);
@@ -2820,7 +2957,7 @@
       }
       if (event.detail === 0) {
         this._activateRangeEndpoint(endpoint);
-        setTimeout(() => this._calendar?.focusGrid(), 0);
+        this._defer(() => this._calendar?.focusGrid());
         return;
       }
       if (endpoint !== this._range?.activeEndpoint) {
@@ -2836,7 +2973,7 @@
       if (this._open) {
         if (this._rangeMode() && endpoint)
           this._activateRangeEndpoint(endpoint);
-        setTimeout(() => this._calendar?.focusGrid(), 0);
+        this._defer(() => this._calendar?.focusGrid());
         return;
       }
       if (this._rangeMode())
@@ -2852,7 +2989,7 @@
           this._range?.focus(endpoint);
         }
         if (this._open) {
-          setTimeout(() => this._calendar?.focusGrid(), 0);
+          this._defer(() => this._calendar?.focusGrid());
         } else {
           this.show();
         }
@@ -2868,8 +3005,7 @@
       this._lastFocusEndpoint = endpoint;
       this._range?.focus(endpoint);
       if (switched) {
-        this._rangeCommitId++;
-        this._pendingIntents.clear();
+        this._activationId++;
       }
       if (!this.openOnFocus || this._suppressFocusOpen)
         return;
@@ -2880,25 +3016,34 @@
         this.show({ moveFocus: false });
     }
     _captureGridIntent(event) {
-      if (!this._rangeMode() || !this._range)
+      if (this._rangeMode() ? !this._range : !this._field)
         return;
       if (event.type === "keydown") {
         const key = event.key;
         if (key !== "Enter" && key !== " ")
           return;
       }
+      if (event.type === "click" && this._suppressGridClick)
+        return;
       if (!(event.target instanceof Element))
         return;
       const cell = event.target.closest(".dp-day[data-date]");
       const date = cell?.getAttribute("data-date") || "";
       if (!isDate(date))
         return;
-      this._pendingIntents.clear();
-      this._pendingIntents.set(date, { id: ++this._rangeCommitId, endpoint: "" });
+      this._attachIntent(date, "");
+    }
+    _attachIntent(date, endpoint) {
+      if (!this._calendar)
+        return;
+      this._calendar._hostIntent = { date, intent: { id: ++this._activationId, endpoint } };
+    }
+    _supersedeActivations() {
+      this._activationId++;
     }
     _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);
     }
     _applyRangeTransition(transition) {
       const fields = this._fields;
@@ -3046,8 +3191,7 @@
         return;
       }
       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);
       this._calendar?.activateDate(target);
     }
     _onGridPointerCancel(event) {
@@ -3115,9 +3259,9 @@
         this._fields[1].setLocale(this.locale);
         hint.textContent = `${this.messages.formatHint}: ${this._fields[0].placeholder}`;
         for (const [index, field] of this._fields.entries()) {
-          if (!field.input.hasAttribute("placeholder") || this._generatedPlaceholder) {
+          if (!field.input.hasAttribute("placeholder") || this._generatedPlaceholders.has(field.input)) {
             field.input.placeholder = field.placeholder;
-            this._generatedPlaceholder = true;
+            this._generatedPlaceholders.add(field.input);
           }
           const canonical = index === 1 ? this._range?.end || "" : this._range?.start || "";
           if (canonical)
@@ -3131,9 +3275,9 @@
         return;
       field.setLocale(this.locale);
       hint.textContent = `${this.messages.formatHint}: ${field.placeholder}`;
-      if (!field.input.hasAttribute("placeholder") || this._generatedPlaceholder) {
+      if (!field.input.hasAttribute("placeholder") || this._generatedPlaceholders.has(field.input)) {
         field.input.placeholder = field.placeholder;
-        this._generatedPlaceholder = true;
+        this._generatedPlaceholders.add(field.input);
       }
       if (this._value)
         field.input.value = field.format(this._value);
@@ -3216,6 +3360,9 @@
       if (!options.force && !field.isDirty)
         return false;
       const result = await field.commit(options);
+      if (!this._ownsField(field) || !field.isCommitCurrent(result.commitId)) {
+        return false;
+      }
       if (result.status === "stale" || result.status === "invalid")
         return false;
       this._setValue(result.value || "", {
@@ -3234,6 +3381,8 @@
       if (!field?.isDirty)
         return false;
       const result = await field.commit();
+      if (!this._ownsField(field) || !field.isCommitCurrent(result.commitId))
+        return false;
       if (result.status === "stale")
         return false;
       if (result.status === "invalid") {
@@ -3253,7 +3402,7 @@
       const field = fields[index];
       if (!field)
         return false;
-      if (options.user === true && (field.input.disabled || field.input.readOnly))
+      if (options.user === true && !isEditable(field.input))
         return false;
       const next = value || "";
       const previous = field.canonical;
@@ -3337,8 +3486,8 @@
       const [startInput, endInput] = this._timeFields;
       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) && isTime(endValue) && compareTimes(endValue, startValue) < 0;
       for (const [index, bound] of bounds.entries()) {
         const input = inputs[index];
@@ -3360,6 +3509,14 @@
         input.setCustomValidity("");
       this._timeOrderOwned.clear();
     }
+    _defer(callback) {
+      const controller = this._controller;
+      setTimeout(() => {
+        if (!this._connected || !controller || controller.signal.aborted || this._controller !== controller)
+          return;
+        callback();
+      }, 0);
+    }
     _restoreDefault() {
       const field = this._field;
       if (!field)
@@ -3396,10 +3553,10 @@
       if (!input)
         return;
       this._suppressFocusOpen = true;
-      setTimeout(() => {
+      this._defer(() => {
         input.focus();
         this._suppressFocusOpen = false;
-      }, 0);
+      });
     }
     _restoreFocus() {
       const target = this._returnFocus;
@@ -3407,22 +3564,22 @@
       if (!(target instanceof HTMLElement) || !target.isConnected || target.matches(":disabled"))
         return;
       this._suppressFocusOpen = true;
-      setTimeout(() => {
+      this._defer(() => {
         target.focus();
         this._suppressFocusOpen = false;
-      }, 0);
+      });
     }
     _resolveRangeEndpoint() {
       if (!this._fields)
         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 "";
@@ -3434,6 +3591,10 @@
           return true;
         for (const [index, field] of fields.entries()) {
           const result = await field.commit({ moveDisplay: false });
+          if (!this._ownsField(field) || !field.isCommitCurrent(result.commitId))
+            continue;
+          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" });
@@ -3444,13 +3605,12 @@
         return fields.every((field) => field.input.checkValidity());
       }
       const input = this._field?.input;
-      if (!input)
-        return true;
-      if (!input.value.trim()) {
-        input.setCustomValidity("");
-      } else {
-        await this._commitText(false, { force: true, moveDisplay: false });
+      if (!input) {
+        const dateInputs = this.hasAttribute("range") ? this.querySelectorAll(":scope > input[data-range-start], :scope > input[data-range-end]") : this._input ? [this._input] : [];
+        const timeInputs = this.querySelectorAll(":scope > input[type=time][data-time-start], :scope > input[type=time][data-time-end]");
+        return [...dateInputs, ...timeInputs].every((candidate) => candidate instanceof HTMLInputElement && candidate.checkValidity());
       }
+      await this._commitText(false, { force: true, moveDisplay: false });
       this._revalidateTimeOrder("start");
       this._revalidateTimeOrder("end");
       const timesValid = this._timeFields.every((timeInput) => timeInput?.checkValidity() ?? true);
@@ -3468,7 +3628,7 @@
         this._activateRangeEndpoint(endpoint);
       } else {
         const input = this._input;
-        if (!input || input.disabled || input.readOnly)
+        if (!input || !isEditable(input))
           return;
         const target = this._value || this._adapter().parse(input.value) || todayISO();
         calendar.display = monthKey(target);
@@ -3488,8 +3648,14 @@
       });
       position();
       this._stopTracking = autoUpdate(this, panel, position);
-      if (options.moveFocus !== false)
-        queueMicrotask(() => calendar.focusGrid());
+      if (options.moveFocus !== false) {
+        const controller = this._controller;
+        queueMicrotask(() => {
+          if (!this._connected || !controller || controller.signal.aborted || this._controller !== controller)
+            return;
+          calendar.focusGrid();
+        });
+      }
       this.dispatchEvent(new Event("open", { bubbles: true }));
     }
     _setExpanded(expanded) {
@@ -3510,8 +3676,7 @@
       } catch {}
       this._open = false;
       this._setExpanded(false);
-      this._rangeCommitId++;
-      this._pendingIntents.clear();
+      this._supersedeActivations();
       this._suppressGridClick = false;
       if (this._drag) {
         this._releaseDragCapture(this._drag.pointerId);
@@ -3534,7 +3699,7 @@
       if (active) {
         const index = active === "end" ? 1 : 0;
         const field = this._fields?.[index];
-        if (field && !field.input.disabled && !field.input.readOnly)
+        if (field && isEditable(field.input))
           return active;
       }
       return this._resolveRangeEndpoint();