@lekoala/date-picker 0.5.0 → 0.5.2

package/dist/date-picker.js

@@ -1,4 +1,4 @@
-/*** @lekoala/date-picker v0.5.0 - https://github.com/lekoala/date-picker ***/
+/*** @lekoala/date-picker v0.5.2 - 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})$/;
@@ -313,14 +316,37 @@
   function getDefaultControlClasses() {
     return { ...defaults };
   }
-  function resolveControlClasses(classes) {
-    const result = getDefaultControlClasses();
+  function normalizeControlClasses(classes) {
+    if (classes == null)
+      return null;
+    const result = {};
     for (const role of ["month", "year", "nav"]) {
-      if (classes && Object.hasOwn(classes, role))
+      if (Object.hasOwn(classes, role))
         result[role] = normalizeControlClass(classes[role]);
     }
     return result;
   }
+  function usesDefaultControlClasses(classes) {
+    return classes == null || ["month", "year", "nav"].some((role) => !Object.hasOwn(classes, role));
+  }
+  function resolveControlClasses(classes) {
+    return { ...getDefaultControlClasses(), ...normalizeControlClasses(classes) };
+  }
+  function setDefaultControlClasses(classes) {
+    const next = resolveControlClasses(classes);
+    if (sameControlClasses(defaults, next))
+      return;
+    defaults = next;
+    for (const listener of listeners)
+      listener();
+  }
+  var listeners = new Set;
+  function subscribeDefaultControlClasses(listener) {
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  }
 
   // src/date-range.js
   function normalizeRange(range) {
@@ -703,6 +729,18 @@
   function getDefaultMessages() {
     return { ...defaults2 };
   }
+  function setDefaultMessages(messages) {
+    defaults2 = { ...defaults2, ...messages };
+    for (const listener of listeners2)
+      listener();
+  }
+  var listeners2 = new Set;
+  function subscribeDefaultMessages(listener) {
+    listeners2.add(listener);
+    return () => {
+      listeners2.delete(listener);
+    };
+  }
 
   // src/source.js
   function normalizeDateStates(payload) {
@@ -725,6 +763,17 @@
     return map;
   }
 
+  // src/upgrade-properties.js
+  function upgradeProperties(element, properties) {
+    for (const property of properties) {
+      if (!Object.hasOwn(element, property))
+        continue;
+      const value = Reflect.get(element, property);
+      Reflect.deleteProperty(element, property);
+      Reflect.set(element, property, value);
+    }
+  }
+
   // src/date-calendar.js
   var uid = 0;
   function escapeHtml(value) {
@@ -783,6 +832,18 @@
       "selection",
       "month-format"
     ];
+    static setDefaultControlClasses(classes) {
+      setDefaultControlClasses(classes);
+    }
+    static getDefaultControlClasses() {
+      return getDefaultControlClasses();
+    }
+    static setDefaultMessages(messages) {
+      setDefaultMessages(messages);
+    }
+    static getDefaultMessages() {
+      return getDefaultMessages();
+    }
     constructor() {
       super();
       this._id = `date-calendar-${++uid}`;
@@ -790,6 +851,7 @@
       this._connected = false;
       this._rendering = false;
       this._source = null;
+      this._hostIntent = null;
       this._sourceStates = new Map;
       this._loadedRanges = new Set;
       this._loadController = null;
@@ -802,8 +864,10 @@
       this._paintedRange = { start: "", end: "" };
       this._paintedPreview = false;
       this._renderedStates = new Map;
-      this._messages = getDefaultMessages();
-      this._controlClasses = getDefaultControlClasses();
+      this._messages = null;
+      this._controlClasses = null;
+      this._stopDefaultMessages = null;
+      this._stopDefaultControlClasses = null;
       this._onClick = this._onClick.bind(this);
       this._onChange = this._onChange.bind(this);
       this._onKeyDown = this._onKeyDown.bind(this);
@@ -812,15 +876,47 @@
     connectedCallback() {
       if (this._connected)
         return;
+      upgradeProperties(this, [
+        "locale",
+        "min",
+        "max",
+        "firstDay",
+        "selection",
+        "monthFormat",
+        "fixedWeeks",
+        "showWeekNumbers",
+        "controlClasses",
+        "messages",
+        "source",
+        "dateState",
+        "renderDay",
+        "isDateDisabled",
+        "highlightedRange",
+        "value",
+        "display"
+      ]);
+      this._syncModel();
+      upgradeProperties(this, ["focusedDate"]);
+      this._stopDefaultControlClasses = subscribeDefaultControlClasses(() => {
+        if (usesDefaultControlClasses(this._controlClasses))
+          this.render();
+      });
+      this._stopDefaultMessages = subscribeDefaultMessages(() => {
+        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);
-      this._syncModel();
       this.render();
     }
     disconnectedCallback() {
+      this._stopDefaultControlClasses?.();
+      this._stopDefaultControlClasses = null;
+      this._stopDefaultMessages?.();
+      this._stopDefaultMessages = null;
       this._connected = false;
       this._loadController?.abort();
       this._loadController = null;
@@ -941,21 +1037,21 @@
       this.toggleAttribute("show-week-numbers", Boolean(value));
     }
     get controlClasses() {
-      return { ...this._controlClasses };
+      return resolveControlClasses(this._controlClasses);
     }
     set controlClasses(value) {
-      const classes = resolveControlClasses(value);
-      if (sameControlClasses(classes, this._controlClasses))
+      const previous = this.controlClasses;
+      this._controlClasses = normalizeControlClasses(value);
+      if (sameControlClasses(previous, this.controlClasses))
         return;
-      this._controlClasses = classes;
       if (this._connected)
         this.render();
     }
     get messages() {
-      return this._messages;
+      return this._messages ?? getDefaultMessages();
     }
     set messages(value) {
-      this._messages = { ...getDefaultMessages(), ...value || {} };
+      this._messages = value == null ? null : { ...getDefaultMessages(), ...value };
       if (this._connected)
         this.render();
     }
@@ -1192,6 +1288,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)}"]`);
@@ -1216,8 +1321,8 @@
       return [
         formatLongDate(date, this.locale),
         description,
-        rangeLabel ? this._messages[rangeLabel] : "",
-        state.disabled ? this._messages.unavailable : ""
+        rangeLabel ? this.messages[rangeLabel] : "",
+        state.disabled ? this.messages.unavailable : ""
       ].filter(Boolean).join(". ");
     }
     _updateRangeDom() {
@@ -1252,17 +1357,24 @@
         target.focus();
     }
     async activateDate(date) {
+      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);
       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") {
@@ -1307,6 +1419,8 @@
       this._reflect("display", this._model.display);
       if (previousDisplay !== this.display)
         this._emitDisplayChange();
+      else
+        this._syncRovingDom(this._model.focused);
       this.activateDate(date);
     }
     _onChange(event) {
@@ -1317,7 +1431,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;
@@ -1333,6 +1447,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) {
@@ -1395,10 +1510,10 @@
       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 weekHeader = showWeeks ? `<th scope="col" class="dp-week-heading" abbr="${escapeHtml(this.messages.week)}">#</th>` : "";
       const monthOptions = names.map((name, index) => {
         const month = index + 1;
         const key = `${String(displayYear).padStart(4, "0")}-${String(month).padStart(2, "0")}`;
@@ -1426,22 +1541,22 @@
       const focusKey = focusedElement instanceof HTMLElement && this.contains(focusedElement) ? this._focusTargetKey(focusedElement) : "";
       const yearFirst = monthYearOrder(locale)[0] === "year";
       this.toggleAttribute("data-year-first", yearFirst);
-      const classes = this._controlClasses;
+      const classes = this.controlClasses;
       const monthClass = escapeHtml(classes.month || "dp-skin");
       const yearClass = escapeHtml(classes.year || "dp-skin");
       const navClass = escapeHtml(classes.nav || "dp-skin");
-      const monthControl = `<label class="dp-visually-hidden" for="${this._id}-month">${escapeHtml(this._messages.month)}</label>
-          <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)}">`;
+      const monthControl = `<label class="dp-visually-hidden" for="${this._id}-month">${escapeHtml(this.messages.month)}</label>
+          <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)}">`;
       this._rendering = true;
       this.innerHTML = `
       <div class="dp-calendar-shell">
         <div class="dp-calendar-header">
           ${yearFirst ? yearControl : monthControl}
           ${yearFirst ? monthControl : yearControl}
-          <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>
+          <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}">
@@ -1854,6 +1969,10 @@
   }
 
   // src/date-field.js
+  function isEditable(input) {
+    return !input.matches(":disabled") && !input.readOnly;
+  }
+
   class DateFieldController {
     constructor(input, options = {}) {
       this.input = input;
@@ -1867,9 +1986,22 @@
       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 || {};
@@ -1884,7 +2016,7 @@
       return this.adapter.placeholder;
     }
     get isDisabled() {
-      return this.input.disabled;
+      return this.input.matches(":disabled");
     }
     get isReadOnly() {
       return this.input.readOnly;
@@ -2045,6 +2177,18 @@
 
   class DatePickerElement extends HTMLElement {
     static observedAttributes = ["value", "locale", "min", "max", "open-on-focus", "month-format"];
+    static setDefaultControlClasses(classes) {
+      setDefaultControlClasses(classes);
+    }
+    static getDefaultControlClasses() {
+      return getDefaultControlClasses();
+    }
+    static setDefaultMessages(messages) {
+      setDefaultMessages(messages);
+    }
+    static getDefaultMessages() {
+      return getDefaultMessages();
+    }
     constructor() {
       super();
       this._id = `date-picker-${++uid2}`;
@@ -2059,8 +2203,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;
@@ -2076,8 +2219,9 @@
       this._stopTracking = null;
       this._open = false;
       this._suppressFocusOpen = false;
-      this._messages = getDefaultMessages();
-      this._controlClasses = getDefaultControlClasses();
+      this._messages = null;
+      this._controlClasses = null;
+      this._stopDefaultMessages = null;
       this._source = null;
       this._dateState = null;
       this._renderDay = null;
@@ -2090,11 +2234,32 @@
     connectedCallback() {
       if (this._connected)
         return;
-      if (this.hasAttribute("range")) {
+      upgradeProperties(this, [
+        "locale",
+        "min",
+        "max",
+        "monthFormat",
+        "openOnFocus",
+        "coordinateSpace",
+        "controlClasses",
+        "messages",
+        "source",
+        "dateState",
+        "renderDay",
+        "isDateDisabled"
+      ]);
+      if (this.hasAttribute("range"))
         this._connectRange();
-        return;
+      else
+        this._connectSingle();
+      if (this._connected) {
+        upgradeProperties(this, ["value", "range"]);
+        this._stopDefaultMessages = subscribeDefaultMessages(() => {
+          if (this._messages === null)
+            this._refreshMessages();
+        });
+        this.validate();
       }
-      this._connectSingle();
     }
     _connectSingle() {
       const input = this.querySelector(":scope > input:not([type=hidden]):not([type=time]):not([data-time-start]):not([data-time-end])");
@@ -2105,7 +2270,7 @@
       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();
@@ -2120,12 +2285,10 @@
       else if (!input.value)
         this._setValue("", { emit: false, format: false });
       else
-        input.setCustomValidity(this._messages.invalidDate);
+        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];
@@ -2161,8 +2324,8 @@
       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 = [
@@ -2182,23 +2345,28 @@
       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.hide(false);
       this._controller?.abort();
@@ -2245,8 +2413,10 @@
       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")
@@ -2271,6 +2441,7 @@
       }
       if (value && !isDate(value))
         throw new TypeError(`Invalid date-picker value: ${value}`);
+      this._supersedeActivations();
       this._setValue(value || "", { emit: false, format: true });
     }
     get range() {
@@ -2280,6 +2451,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() {
@@ -2333,28 +2505,34 @@
       return this._open;
     }
     get controlClasses() {
-      return { ...this._controlClasses };
+      return resolveControlClasses(this._controlClasses);
     }
     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;
     }
     get messages() {
-      return this._messages;
+      return this._messages ?? getDefaultMessages();
     }
     set messages(value) {
-      this._messages = { ...getDefaultMessages(), ...value || {} };
+      this._messages = value == null ? null : { ...getDefaultMessages(), ...value };
       if (this._calendar)
         this._calendar.messages = this._messages;
+      this._refreshMessages();
+    }
+    _refreshMessages() {
+      const messages = this.messages;
       for (const field of this._fields || [])
-        field.setMessages(this._messages);
-      this._field?.setMessages(this._messages);
+        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();
-      this.validate();
+      if (this._connected)
+        this.validate();
     }
     get source() {
       return this._source;
@@ -2414,7 +2592,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() {
@@ -2429,9 +2607,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)
@@ -2482,7 +2660,7 @@
       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";
       calendar.fixedWeeks = true;
@@ -2568,15 +2746,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)
             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 });
@@ -2596,7 +2782,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 });
@@ -2634,10 +2825,9 @@
         queueMicrotask(() => {
           if (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") {
@@ -2672,8 +2862,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);
@@ -2735,8 +2924,7 @@
       this._lastFocusEndpoint = endpoint;
       this._range?.focus(endpoint);
       if (switched) {
-        this._rangeCommitId++;
-        this._pendingIntents.clear();
+        this._activationId++;
       }
       if (!this.openOnFocus || this._suppressFocusOpen)
         return;
@@ -2747,25 +2935,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;
@@ -2913,8 +3110,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) {
@@ -2971,7 +3167,7 @@
       if (!this._rangeMode() && this._value)
         calendar.value = this._value;
       if (panel)
-        panel.setAttribute("aria-label", this._messages.calendar);
+        panel.setAttribute("aria-label", this.messages.calendar);
     }
     _refreshLocale() {
       const hint = this._formatHint;
@@ -2980,7 +3176,7 @@
       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;
@@ -2997,7 +3193,7 @@
       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;
@@ -3014,7 +3210,7 @@
         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}`);
     }
@@ -3024,9 +3220,9 @@
       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}`);
       }
     }
@@ -3073,7 +3269,7 @@
       const confirmed = await calendar.ensureDate(date);
       const state = calendar.getDateState(date);
       if (!confirmed || state.disabled)
-        return { ok: false, message: this._messages.unavailableDate };
+        return { ok: false, message: this.messages.unavailableDate };
       return { ok: true };
     }
     async _commitText(emit, options = {}) {
@@ -3120,7 +3316,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;
@@ -3189,7 +3385,7 @@
       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);
@@ -3204,14 +3400,14 @@
       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];
         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);
@@ -3284,12 +3480,12 @@
         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 "";
@@ -3301,6 +3497,8 @@
           return true;
         for (const [index, field] of fields.entries()) {
           const result = await field.commit({ moveDisplay: false });
+          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" });
@@ -3313,11 +3511,7 @@
       const input = this._field?.input;
       if (!input)
         return true;
-      if (!input.value.trim()) {
-        input.setCustomValidity("");
-      } else {
-        await this._commitText(false, { force: true, moveDisplay: false });
-      }
+      await this._commitText(false, { force: true, moveDisplay: false });
       this._revalidateTimeOrder("start");
       this._revalidateTimeOrder("end");
       const timesValid = this._timeFields.every((timeInput) => timeInput?.checkValidity() ?? true);
@@ -3335,7 +3529,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);
@@ -3377,8 +3571,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);
@@ -3401,7 +3594,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();