@lekoala/date-picker 0.1.1 → 0.3.0

package/dist/date-picker.js

@@ -1,4 +1,4 @@
-/*** @lekoala/date-picker v0.1.1 - https://github.com/lekoala/date-picker ***/
+/*** @lekoala/date-picker v0.3.0 - https://github.com/lekoala/date-picker ***/
 (() => {
   var __defProp = Object.defineProperty;
   var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -387,6 +387,32 @@
       timeZone: "UTC"
     }).format(toIntlDate(`${value.slice(0, 7)}-15`));
   }
+  function monthYearOrder(locale = "") {
+    const resolved = resolveLocale(locale);
+    try {
+      const parts = new Intl.DateTimeFormat(resolved, {
+        calendar: "gregory",
+        year: "numeric",
+        month: "long",
+        timeZone: "UTC"
+      }).formatToParts(toIntlDate("2026-09-15"));
+      let monthIndex = -1;
+      let yearIndex = -1;
+      parts.forEach((part, index) => {
+        const type = part.type;
+        if (type === "month") {
+          if (monthIndex < 0)
+            monthIndex = index;
+        } else if (type === "year" || type === "relatedYear" || type === "yearName") {
+          if (yearIndex < 0)
+            yearIndex = index;
+        }
+      });
+      if (monthIndex >= 0 && yearIndex >= 0)
+        return yearIndex < monthIndex ? ["year", "month"] : ["month", "year"];
+    } catch {}
+    return ["month", "year"];
+  }
   function monthNames(locale = "", style = "long") {
     const resolved = resolveLocale(locale);
     const formatter = new Intl.DateTimeFormat(resolved, { calendar: "gregory", month: style, timeZone: "UTC" });
@@ -567,7 +593,8 @@
       "locale",
       "fixed-weeks",
       "show-week-numbers",
-      "selection"
+      "selection",
+      "month-format"
     ];
     constructor() {
       super();
@@ -689,6 +716,15 @@
     set selection(value) {
       this.setAttribute("selection", value === "none" ? "none" : "single");
     }
+    get monthFormat() {
+      return this.getAttribute("month-format") === "short" ? "short" : "long";
+    }
+    set monthFormat(value) {
+      if (value === "short")
+        this.setAttribute("month-format", "short");
+      else
+        this.removeAttribute("month-format");
+    }
     get highlightedRange() {
       return { ...this._highlightedRange };
     }
@@ -798,7 +834,7 @@
       return weeks;
     }
     _focusTargetKey(element) {
-      if (element.matches(".dp-month-select, .dp-year-select, .dp-year-input") && element.id) {
+      if (element.matches(".dp-month-select, .dp-year-input") && element.id) {
         return `#${CSS.escape(element.id)}`;
       }
       if (element.matches(".dp-nav[data-calendar-action]")) {
@@ -1040,10 +1076,6 @@
         this._setDisplay(`${this.display.slice(0, 4)}-${target.value}`);
         return;
       }
-      if (target instanceof HTMLSelectElement && target.matches(".dp-year-select")) {
-        this._setDisplay(`${target.value}-${this.display.slice(5, 7)}`);
-        return;
-      }
       if (target instanceof HTMLInputElement && target.matches(".dp-year-input")) {
         const year = Number(target.value);
         if (!Number.isInteger(year) || year < 1 || year > 9999) {
@@ -1109,7 +1141,7 @@
       const display = this.display;
       const displayYear = yearOf(display);
       const displayMonth = Number(display.slice(5, 7));
-      const names = monthNames(locale, "long");
+      const names = monthNames(locale, this.monthFormat);
       const weekdayShort = weekdayNames(locale, this.firstDay, "short");
       const weekdayLong = weekdayNames(locale, this.firstDay, "long");
       const weeks = this._weeks();
@@ -1154,14 +1186,18 @@
       }).join("");
       const focusedElement = document.activeElement;
       const focusKey = focusedElement instanceof HTMLElement && this.contains(focusedElement) ? this._focusTargetKey(focusedElement) : "";
+      const yearFirst = monthYearOrder(locale)[0] === "year";
+      this.toggleAttribute("data-year-first", yearFirst);
+      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" 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" 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">
-          <label class="dp-visually-hidden" for="${this._id}-month">${escapeHtml(this._messages.month)}</label>
-          <select id="${this._id}-month" class="dp-month-select" aria-label="${escapeHtml(this._messages.month)}">${monthOptions}</select>
-          <label class="dp-visually-hidden" for="${this._id}-year">${escapeHtml(this._messages.year)}</label>
-          <input id="${this._id}-year" class="dp-year-input" type="number" inputmode="numeric" value="${displayYear}"${minYearAttr}${maxYearAttr} aria-label="${escapeHtml(this._messages.year)}">
+          ${yearFirst ? yearControl : monthControl}
+          ${yearFirst ? monthControl : yearControl}
           <button type="button" class="dp-nav dp-prev" 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="m10 4-4 4 4 4"/></svg></button>
           <button type="button" class="dp-nav dp-next" 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="m6 4 4 4-4 4"/></svg></button>
         </div>
@@ -1174,7 +1210,11 @@
       this._rendering = false;
       if (focusKey) {
         queueMicrotask(() => {
-          const target = this.querySelector(focusKey);
+          let selector = focusKey;
+          if (selector.startsWith(".dp-day[data-date=")) {
+            selector = `.dp-day[data-date="${CSS.escape(this._model.focused)}"]`;
+          }
+          const target = this.querySelector(selector);
           if (target instanceof HTMLElement)
             target.focus();
         });
@@ -1516,8 +1556,11 @@
     const availableHeight = `${getAvailableHeight(referenceRect, side, boundary, distance, shiftPadding)}px`;
     const { style } = floating;
     const roomChanged = style.getPropertyValue("--available-height") !== availableHeight;
-    style.left = `${coords.x}px`;
-    style.top = `${coords.y}px`;
+    const win = options.coordinateSpace === "document" ? reference.ownerDocument.defaultView : null;
+    const originX = win ? win.scrollX : 0;
+    const originY = win ? win.scrollY : 0;
+    style.left = `${coords.x + originX}px`;
+    style.top = `${coords.y + originY}px`;
     style.setProperty("--arrow-x", `${arrowX}%`);
     style.setProperty("--arrow-y", `${arrowY}%`);
     style.setProperty("--available-height", availableHeight);
@@ -1624,16 +1667,23 @@
     }
     handleInput() {
       const input = this.input;
-      this._dirty = true;
+      const text = input.value.trim();
+      const canonical = this.canonical ? this.adapter.format(this.canonical) : "";
       this.dirty();
+      if (text === canonical) {
+        this._dirty = false;
+        if (this.hidden)
+          this.hidden.value = this.canonical;
+        input.setCustomValidity("");
+        return;
+      }
+      this._dirty = true;
       if (this.hidden)
         this.hidden.value = "";
-      const text = input.value.trim();
       if (!text) {
         input.setCustomValidity("");
         return;
       }
-      const canonical = this.canonical ? this.adapter.format(this.canonical) : "";
       input.setCustomValidity(text === canonical ? "" : this.messages.invalidDate);
     }
     async commit() {
@@ -1697,11 +1747,40 @@
     }
   }
 
+  // src/time.js
+  var TIME_RE = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?$/;
+  function parseTimeParts(value) {
+    const match = TIME_RE.exec(String(value || ""));
+    if (!match)
+      return null;
+    const hour = Number(match[1]);
+    const minute = Number(match[2]);
+    const second = match[3] === undefined ? 0 : Number(match[3]);
+    const millisecond = match[4] === undefined ? 0 : Number(match[4].padEnd(3, "0"));
+    if (hour > 23 || minute > 59 || second > 59 || millisecond > 999)
+      return null;
+    return { hour, minute, second, millisecond };
+  }
+  function isTime(value) {
+    return parseTimeParts(value) !== null;
+  }
+  function toMillis(parts) {
+    return ((parts.hour * 60 + parts.minute) * 60 + parts.second) * 1000 + parts.millisecond;
+  }
+  function compareTimes(a, b) {
+    const left = parseTimeParts(a);
+    const right = parseTimeParts(b);
+    if (!left || !right)
+      throw new TypeError("compareTimes() expects HH:MM values");
+    const diff = toMillis(left) - toMillis(right);
+    return diff === 0 ? 0 : diff < 0 ? -1 : 1;
+  }
+
   // src/date-picker.js
   var uid2 = 0;
 
   class DatePickerElement extends HTMLElement {
-    static observedAttributes = ["value", "locale", "min", "max", "open-on-focus"];
+    static observedAttributes = ["value", "locale", "min", "max", "open-on-focus", "month-format"];
     constructor() {
       super();
       this._id = `date-picker-${++uid2}`;
@@ -1713,10 +1792,13 @@
       this._fields = null;
       this._range = null;
       this._orderTags = new Set;
+      this._timeFields = [null, null];
+      this._timeOrderOwned = new Set;
       this._lastFocusEndpoint = "";
       this._rangeCommitId = 0;
       this._pendingIntents = new Map;
-      this._button = null;
+      this._buttons = [];
+      this._returnFocus = null;
       this._panel = null;
       this._calendar = null;
       this._originalDescribedBy = "";
@@ -1732,6 +1814,7 @@
       this._dateState = null;
       this._renderDay = null;
       this._isDateDisabled = null;
+      this._coordinateSpace = "viewport";
     }
     _rangeMode() {
       return this.hasAttribute("range") && Boolean(this._range);
@@ -1746,13 +1829,14 @@
       this._connectSingle();
     }
     _connectSingle() {
-      const input = this.querySelector(":scope > input:not([type=hidden])");
+      const input = this.querySelector(":scope > input:not([type=hidden]):not([type=time]):not([data-time-start]):not([data-time-end])");
       if (!(input instanceof HTMLInputElement)) {
         console.warn("<date-picker> expects a direct child text input");
         return;
       }
       this._connected = true;
       this._input = input;
+      this._discoverTimeFields();
       this._field = new DateFieldController(input, { messages: this._messages, locale: this.locale });
       this._field.onAttributesChanged = () => this._syncInputState();
       this._field.confirm = (date) => this._confirmDate(date);
@@ -1775,7 +1859,31 @@
         input.defaultValue = input.value;
       }
     }
+    _discoverTimeFields() {
+      this._timeFields = [null, null];
+      const markers = ["data-time-start", "data-time-end"];
+      for (const [index, marker] of markers.entries()) {
+        const matches = this.querySelectorAll(`:scope > input[${marker}]`);
+        if (matches.length > 1) {
+          console.warn(`<date-picker> expects at most one direct child input[${marker}]; ignoring extras`);
+        }
+        const candidate = matches[0];
+        if (candidate == null)
+          continue;
+        if (!(candidate instanceof HTMLInputElement) || candidate.type !== "time") {
+          console.warn(`<date-picker> input[${marker}] must be an <input type="time">; ignoring it`);
+          continue;
+        }
+        this._timeFields[index] = candidate;
+      }
+      if (this.querySelector(":scope > input[type=time]:not([data-time-start]):not([data-time-end])")) {
+        console.warn("<date-picker> time inputs need [data-time-start] or [data-time-end]; ignoring it");
+      }
+    }
     _connectRange() {
+      if (this.querySelector(":scope > input[data-time-start], :scope > input[data-time-end]")) {
+        console.warn("<date-picker range> time companions are not supported yet; leaving them native");
+      }
       const startInput = this.querySelector(":scope > input[data-range-start]");
       const endInput = this.querySelector(":scope > input[data-range-end]");
       if (!(startInput instanceof HTMLInputElement) || !(endInput instanceof HTMLInputElement)) {
@@ -1798,7 +1906,7 @@
         field.confirm = (date) => this._confirmDate(date);
         field.setupFormValue();
       }
-      this._build(endInput);
+      this._build();
       this._setRangeAria();
       this._syncRangeFields();
       this._bindRange();
@@ -1827,6 +1935,8 @@
       this.hide(false);
       this._controller?.abort();
       this._controller = null;
+      this._clearTimeOrderValidity();
+      this._timeFields = [null, null];
       if (this._rangeMode()) {
         for (const field of this._fields || [])
           this._teardownField(field);
@@ -1836,10 +1946,12 @@
         this._teardownField(this._field);
       }
       this._field = null;
-      this._button?.remove();
+      for (const { button } of this._buttons)
+        button.remove();
+      this._buttons = [];
+      this._returnFocus = null;
       this._panel?.remove();
       this._formatHint?.remove();
-      this._button = null;
       this._panel = null;
       this._calendar = null;
       this._formatHint = null;
@@ -1911,6 +2023,15 @@
       else
         this.removeAttribute("locale");
     }
+    get monthFormat() {
+      return this.getAttribute("month-format") === "short" ? "short" : "long";
+    }
+    set monthFormat(value) {
+      if (value === "short")
+        this.setAttribute("month-format", "short");
+      else
+        this.removeAttribute("month-format");
+    }
     get min() {
       const value = this.getAttribute("min") || "";
       return isDate(value) ? value : "";
@@ -1994,6 +2115,12 @@
       if (this._connected)
         this.validate();
     }
+    get coordinateSpace() {
+      return this._coordinateSpace;
+    }
+    set coordinateSpace(value) {
+      this._coordinateSpace = value === "document" ? "document" : "viewport";
+    }
     _adapter() {
       return this._field?.adapter ?? this._fields?.[0]?.adapter ?? createDateAdapter(this.locale);
     }
@@ -2005,8 +2132,9 @@
       if (!input)
         return;
       this._field?.syncInputState();
-      if (this._button)
-        this._button.disabled = input.disabled || input.readOnly;
+      const button = this._buttons[0]?.button;
+      if (button)
+        button.disabled = input.disabled || input.readOnly;
       if (this._open && (input.disabled || input.readOnly))
         this.hide(false);
     }
@@ -2015,10 +2143,12 @@
         return;
       for (const field of this._fields)
         field.syncInputState();
+      for (const { button, endpoint } of this._buttons) {
+        const index = endpoint === "end" ? 1 : 0;
+        const field = this._fields[index];
+        button.disabled = Boolean(field?.input.disabled || field?.input.readOnly);
+      }
       const active = this._range?.activeEndpoint === "end" ? 1 : 0;
-      const disabled = this._fields.every((field) => field.input.disabled || field.input.readOnly);
-      if (this._button)
-        this._button.disabled = disabled;
       if (this._open && (this._fields[active]?.input.disabled || this._fields[active]?.input.readOnly)) {
         this.hide(false);
       }
@@ -2036,19 +2166,37 @@
         input.setAttribute("aria-controls", this._panel.id);
       }
     }
-    _build(anchorInput) {
-      const input = anchorInput || this._input;
-      if (!input)
-        return;
-      const panelId = `${this._id}-panel`;
-      const hintId = `${this._id}-format`;
+    _createTrigger(endpoint) {
       const button = document.createElement("button");
       button.type = "button";
       button.className = "dp-picker-button";
       button.setAttribute("aria-haspopup", "dialog");
       button.setAttribute("aria-expanded", "false");
-      button.setAttribute("aria-controls", panelId);
+      button.setAttribute("aria-controls", `${this._id}-panel`);
+      if (endpoint)
+        button.dataset.endpoint = endpoint;
       button.innerHTML = '<span aria-hidden="true"><svg viewBox="0 0 16 16" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><rect x="1.75" y="3" width="12.5" height="11" rx="1.75"/><path d="M1.75 6.75h12.5"/><path d="M5.25 1.75v2.5M10.75 1.75v2.5"/></svg></span>';
+      return button;
+    }
+    _build() {
+      const ranges = this._rangeMode();
+      const targets = [];
+      if (ranges) {
+        for (const [index, field] of (this._fields || []).entries()) {
+          targets.push([field.input, index === 1 ? "end" : "start"]);
+        }
+      } else if (this._input) {
+        targets.push([this._input, ""]);
+      }
+      if (!targets.length)
+        return;
+      const panelId = `${this._id}-panel`;
+      const hintId = `${this._id}-format`;
+      this._buttons = targets.map(([input, endpoint]) => {
+        const button = this._createTrigger(endpoint);
+        input.insertAdjacentElement("afterend", button);
+        return { button, endpoint };
+      });
       const panel = document.createElement("div");
       panel.id = panelId;
       panel.className = "dp-picker-panel";
@@ -2062,28 +2210,25 @@
       const hint = document.createElement("span");
       hint.id = hintId;
       hint.className = "dp-visually-hidden";
-      input.insertAdjacentElement("afterend", button);
-      button.insertAdjacentElement("afterend", panel);
-      panel.insertAdjacentElement("afterend", hint);
-      this._button = button;
+      this.append(panel, hint);
       this._panel = panel;
       this._calendar = calendar;
       this._formatHint = hint;
-      if (!this._rangeMode()) {
-        this._originalDescribedBy = input.getAttribute("aria-describedby") || "";
+      if (!ranges && this._input) {
+        this._originalDescribedBy = this._input.getAttribute("aria-describedby") || "";
         const describedBy = [this._originalDescribedBy, hintId].filter(Boolean).join(" ");
-        input.setAttribute("aria-describedby", describedBy);
-        input.setAttribute("role", "combobox");
-        input.setAttribute("aria-haspopup", "dialog");
-        input.setAttribute("aria-expanded", "false");
-        input.setAttribute("aria-controls", panelId);
+        this._input.setAttribute("aria-describedby", describedBy);
+        this._input.setAttribute("role", "combobox");
+        this._input.setAttribute("aria-haspopup", "dialog");
+        this._input.setAttribute("aria-expanded", "false");
+        this._input.setAttribute("aria-controls", panelId);
       }
       this._refreshLocale();
       this._refreshButtonLabel();
     }
     _bind() {
       const input = this._input;
-      const button = this._button;
+      const button = this._buttons[0]?.button;
       const calendar = this._calendar;
       if (!input || !button || !calendar)
         return;
@@ -2107,6 +2252,13 @@
       input.addEventListener("keydown", (event) => {
         this._onFieldKeyDown("", event);
       }, { signal });
+      for (const [index, timeInput] of this._timeFields.entries()) {
+        if (!timeInput)
+          continue;
+        const endpoint = index === 1 ? "end" : "start";
+        timeInput.addEventListener("input", () => this._revalidateTimeOrder(endpoint), { signal });
+        timeInput.addEventListener("change", () => this._revalidateTimeOrder(endpoint), { signal });
+      }
       button.addEventListener("click", (event) => {
         if (this._open) {
           if (event.detail === 0) {
@@ -2116,8 +2268,9 @@
           this.hide(false);
           return;
         }
-        this.show();
+        this.show({ returnFocus: button });
       }, { signal });
+      button.addEventListener("keydown", (event) => this._onTriggerKeyDown("", event), { signal });
       calendar.addEventListener("dateactivate", (event) => {
         const custom = event;
         const date = custom.detail?.date;
@@ -2131,7 +2284,7 @@
           this._field?.dirty();
           this._setValue(date, { emit: true, format: true });
           this.hide(false);
-          this._focusInput();
+          this._restoreFocus();
         });
       }, { signal });
       calendar.addEventListener("dateloadend", () => void this.validate(), { signal });
@@ -2153,9 +2306,8 @@
       this.addEventListener("keydown", (event) => this._onEscape(event), { signal });
     }
     _bindRange() {
-      const button = this._button;
       const calendar = this._calendar;
-      if (!this._fields || !button || !calendar)
+      if (!this._fields || !this._buttons.length || !calendar)
         return;
       const controller = new AbortController;
       this._controller = controller;
@@ -2168,17 +2320,17 @@
         field.input.addEventListener("focus", (event) => this._onFieldFocus(endpoint, event), { signal });
         field.input.addEventListener("keydown", (event) => this._onFieldKeyDown(endpoint, event), { signal });
       }
-      button.addEventListener("click", (event) => {
-        if (this._open) {
-          if (event.detail === 0) {
-            setTimeout(() => this._calendar?.focusGrid(), 0);
-            return;
-          }
-          this.hide(false);
-          return;
-        }
-        this.show();
-      }, { signal });
+      for (const entry of this._buttons) {
+        const endpoint = entry.endpoint;
+        if (endpoint === "")
+          continue;
+        entry.button.addEventListener("click", (event) => this._onRangeTriggerClick(endpoint, event), {
+          signal
+        });
+        entry.button.addEventListener("keydown", (event) => this._onTriggerKeyDown(endpoint, event), {
+          signal
+        });
+      }
       calendar.addEventListener("click", (event) => this._captureGridIntent(event), { capture: true, signal });
       calendar.addEventListener("keydown", (event) => this._captureGridIntent(event), {
         capture: true,
@@ -2233,8 +2385,51 @@
       }, { capture: true, signal });
       this.addEventListener("keydown", (event) => this._onEscape(event), { signal });
     }
+    _activateRangeEndpoint(endpoint) {
+      const calendar = this._calendar;
+      if (!this._range || !calendar)
+        return;
+      this._range.focus(endpoint);
+      this._rangeCommitId++;
+      this._pendingIntents.clear();
+      this._lastFocusEndpoint = endpoint;
+      const target = this._boundCanonical(endpoint) || todayISO();
+      calendar.display = monthKey(target);
+      calendar.focusedDate = target;
+    }
+    _onRangeTriggerClick(endpoint, event) {
+      if (!this._open) {
+        this.show({ endpoint });
+        return;
+      }
+      if (event.detail === 0) {
+        this._activateRangeEndpoint(endpoint);
+        setTimeout(() => this._calendar?.focusGrid(), 0);
+        return;
+      }
+      if (endpoint !== this._range?.activeEndpoint) {
+        this._activateRangeEndpoint(endpoint);
+        return;
+      }
+      this.hide(false);
+    }
+    _onTriggerKeyDown(endpoint, event) {
+      if (event.key !== "ArrowDown")
+        return;
+      event.preventDefault();
+      if (this._open) {
+        if (this._rangeMode() && endpoint)
+          this._activateRangeEndpoint(endpoint);
+        setTimeout(() => this._calendar?.focusGrid(), 0);
+        return;
+      }
+      if (this._rangeMode())
+        this.show({ endpoint: endpoint || undefined });
+      else
+        this.show({ returnFocus: this._buttons[0]?.button });
+    }
     _onFieldKeyDown(endpoint, event) {
-      if (event.key === "ArrowDown" || event.altKey && event.key === "ArrowDown") {
+      if (event.key === "ArrowDown") {
         event.preventDefault();
         if (this._rangeMode() && endpoint) {
           this._lastFocusEndpoint = endpoint;
@@ -2282,6 +2477,7 @@
       const date = cell?.getAttribute("data-date") || "";
       if (!isDate(date))
         return;
+      this._pendingIntents.clear();
       this._pendingIntents.set(date, ++this._rangeCommitId);
     }
     _onEscape(event) {
@@ -2299,6 +2495,7 @@
       calendar.locale = this.locale;
       calendar.min = this.min;
       calendar.max = this.max;
+      calendar.monthFormat = this.monthFormat;
       calendar.messages = this._messages;
       calendar.source = this._source;
       calendar.dateState = this._dateState;
@@ -2343,7 +2540,8 @@
       this._refreshButtonLabel();
     }
     _refreshButtonLabel() {
-      if (!this._button)
+      const single = this._buttons[0]?.button;
+      if (!single)
         return;
       if (this._rangeMode()) {
         this._refreshRangeButtonLabel();
@@ -2351,16 +2549,19 @@
       }
       const prefix = this._value ? this._messages.changeDate : this._messages.chooseDate;
       const suffix = this._value ? `, ${formatLongDate(this._value, this.locale)}` : "";
-      this._button.setAttribute("aria-label", `${prefix}${suffix}`);
+      single.setAttribute("aria-label", `${prefix}${suffix}`);
     }
     _refreshRangeButtonLabel() {
-      if (!this._button || !this._range)
+      if (!this._range)
         return;
       const { start, end } = this._range;
-      const hasRange = Boolean(start && end);
-      const prefix = hasRange ? this._messages.changeDate : this._messages.chooseDate;
-      const suffix = hasRange ? `, ${formatLongDate(start, this.locale)} – ${formatLongDate(end, this.locale)}` : "";
-      this._button.setAttribute("aria-label", `${prefix}${suffix}`);
+      for (const { button, endpoint } of this._buttons) {
+        const bound = endpoint === "end" ? end : start;
+        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;
+        button.setAttribute("aria-label", `${prefix}${suffix}, ${boundLabel}`);
+      }
     }
     _reflectValue(value) {
       this._reflecting = true;
@@ -2433,7 +2634,7 @@
         this._orderTags.delete(index);
         return false;
       }
-      this._setBound(which, result.value || "", { emit: true, user: true, format: result.status === "ok" });
+      this._setBound(which, result.value || "", { emit: false, user: true, format: result.status === "ok" });
       return true;
     }
     _setBound(which, value, options = {}) {
@@ -2524,6 +2725,33 @@
         }
       }
     }
+    _revalidateTimeOrder(which) {
+      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 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 shouldHaveOrder = inverted && bound === which;
+        if (shouldHaveOrder) {
+          input.setCustomValidity(message);
+          this._timeOrderOwned.add(input);
+        } else if (this._timeOrderOwned.has(input)) {
+          input.setCustomValidity("");
+          this._timeOrderOwned.delete(input);
+        }
+      }
+    }
+    _clearTimeOrderValidity() {
+      for (const input of this._timeOrderOwned)
+        input.setCustomValidity("");
+      this._timeOrderOwned.clear();
+    }
     _restoreDefault() {
       const field = this._field;
       if (!field)
@@ -2565,10 +2793,14 @@
         this._suppressFocusOpen = false;
       }, 0);
     }
-    _focusInput() {
+    _restoreFocus() {
+      const target = this._returnFocus;
+      this._returnFocus = null;
+      if (!(target instanceof HTMLElement) || !target.isConnected || target.matches(":disabled"))
+        return;
       this._suppressFocusOpen = true;
       setTimeout(() => {
-        this._input?.focus();
+        target.focus();
         this._suppressFocusOpen = false;
       }, 0);
     }
@@ -2608,28 +2840,24 @@
         return true;
       if (!input.value.trim()) {
         input.setCustomValidity("");
-        return input.checkValidity();
+      } else {
+        await this._commitText(false, { force: true });
       }
-      await this._commitText(false, { force: true });
-      return input.checkValidity();
+      this._revalidateTimeOrder("start");
+      this._revalidateTimeOrder("end");
+      const timesValid = this._timeFields.every((timeInput) => timeInput?.checkValidity() ?? true);
+      return input.checkValidity() && timesValid;
     }
     show(options = {}) {
       const panel = this._panel;
       const calendar = this._calendar;
-      const button = this._button;
-      if (!panel || !calendar || !button || this._open)
+      if (!panel || !calendar || !this._buttons.length || this._open)
         return;
       if (this._rangeMode()) {
-        const endpoint = this._resolveRangeEndpoint();
+        const endpoint = options.endpoint || this._resolveRangeEndpoint();
         if (!endpoint)
           return;
-        this._range?.focus(endpoint);
-        this._rangeCommitId++;
-        this._pendingIntents.clear();
-        const target = this._boundCanonical(endpoint) || todayISO();
-        calendar.display = monthKey(target);
-        calendar.focusedDate = target;
-        this._lastFocusEndpoint = endpoint;
+        this._activateRangeEndpoint(endpoint);
       } else {
         const input = this._input;
         if (!input || input.disabled || input.readOnly)
@@ -2637,11 +2865,19 @@
         const target = this._value || this._adapter().parse(input.value) || todayISO();
         calendar.display = monthKey(target);
         calendar.focusedDate = target;
+        this._returnFocus = options.returnFocus instanceof HTMLElement ? options.returnFocus : input;
       }
       panel.showPopover();
       this._open = true;
       this._setExpanded(true);
-      const position = () => reposition(this, panel, { placement: "bottom-start", distance: 4, shiftPadding: 8 });
+      const coordinateSpace = this.coordinateSpace;
+      panel.style.position = coordinateSpace === "document" ? "absolute" : "fixed";
+      const position = () => reposition(this, panel, {
+        placement: "bottom-start",
+        distance: 4,
+        shiftPadding: 8,
+        coordinateSpace
+      });
       position();
       this._stopTracking = autoUpdate(this, panel, position);
       if (options.moveFocus !== false)
@@ -2651,7 +2887,8 @@
     _setExpanded(expanded) {
       const value = expanded ? "true" : "false";
       this._input?.setAttribute("aria-expanded", value);
-      this._button?.setAttribute("aria-expanded", value);
+      for (const { button } of this._buttons)
+        button.setAttribute("aria-expanded", value);
       for (const field of this._fields || [])
         field.input.setAttribute("aria-expanded", value);
     }
@@ -2673,7 +2910,7 @@
           if (endpoint)
             this._focusField(endpoint);
         } else {
-          this._focusInput();
+          this._restoreFocus();
         }
       }
       this.dispatchEvent(new Event("close", { bubbles: true }));