@lekoala/date-picker 0.1.1 → 0.2.0

package/README.md

@@ -2,7 +2,7 @@
 
 Small, native-first date picker and inline calendar primitives.
 
-> v0.1: the interaction contract, event names, public styling tokens and the component API are frozen — see [docs/DECISIONS.md](docs/DECISIONS.md). Internal DOM and class names are `.dp-*` implementation details and stay private.
+> v0.2: the interaction contract, event names, public styling tokens and the component API are frozen — see [docs/DECISIONS.md](docs/DECISIONS.md). Internal DOM and class names are `.dp-*` implementation details and stay private.
 
 This project fills the gap between a normal editable date field and a full scheduling calendar. A plain date input remains the right answer for simple CMS/editing forms. This component becomes useful when a date has context: availability, disabled days, annotations, remote state, start/end relationships, or a mini calendar that navigates another view.
 
@@ -77,6 +77,24 @@ const cleanup = linkDateRange(startPicker, endPicker);
 
 The relationship applies `end >= start` and `start <= end` as effective bounds. Neither picker knows about its sibling.
 
+## Date + time
+
+A date pairs with one or two native time companions. The picker owns the civil date; the time inputs own their civil time values:
+
+```html
+<date-picker>
+  <input name="appointment[date]">
+  <input type="time" data-time-start name="appointment[time]">
+</date-picker>
+```
+
+```text
+appointment[date] = 2026-09-10
+appointment[time] = 09:30
+```
+
+The application/server combines these civil values and applies the relevant timezone when a datetime/instant is needed. The picker never constructs a combined datetime value.
+
 ## Availability and per-day metadata
 
 The calendar accepts a source function or `{ load() }` object with the same abortable shape used elsewhere in LeKoala components:
@@ -194,7 +212,7 @@ The default ESM exports point at `src/`, matching the native-first development s
 
 ## Scope
 
-Included in v0.1:
+Included in v0.2:
 
 - inline single-date selection;
 - mini-calendar/navigation-only use;
@@ -205,15 +223,20 @@ Included in v0.1:
 - presentation-only range band (`highlightedRange`);
 - shared-calendar two-field range picker (`<date-picker range>`);
 - linked start/end pickers (`linkDateRange`);
+- native time companions (one or two `input[type=time]` beside the date);
+- `Intl` month/year control order + `month-format="short"`;
+- RTL through the inherited `dir` (no `isRTL` option);
+- readable keyboard focus on disabled/selected days;
+- compact-consumer CSS tokens (`--dp-header-control-size`, `--dp-day-radius`, …);
 - async per-day state with cancellation;
 - custom day decorations that cannot replace the accessible cell;
 - fixed six-row presentation as an opt-in;
 - ISO week numbers;
 - keyboard and focus contracts.
 
-Deliberately out of scope for v0.1:
+Deliberately out of scope for v0.2:
 
-- time or datetime picking;
+- custom time-picker UI and combined datetime values (only native `input[type=time]` companions are supported);
 - timezones;
 - in-place single-calendar range *selection interaction* (use the two-field picker);
 - multi-date selection;

package/custom-elements.json

@@ -37,6 +37,9 @@
             },
             {
               "name": "selection"
+            },
+            {
+              "name": "month-format"
             }
           ],
           "members": [
@@ -72,6 +75,10 @@
               "kind": "getter",
               "name": "selection"
             },
+            {
+              "kind": "getter",
+              "name": "monthFormat"
+            },
             {
               "kind": "getter",
               "name": "highlightedRange"
@@ -190,6 +197,21 @@
             },
             {
               "name": "--dp-gap"
+            },
+            {
+              "name": "--dp-header-control-size"
+            },
+            {
+              "name": "--dp-header-block-gap"
+            },
+            {
+              "name": "--dp-nav-gap"
+            },
+            {
+              "name": "--dp-year-inline-size"
+            },
+            {
+              "name": "--dp-day-radius"
             }
           ]
         }
@@ -228,6 +250,9 @@
             },
             {
               "name": "open-on-focus"
+            },
+            {
+              "name": "month-format"
             }
           ],
           "members": [
@@ -251,6 +276,10 @@
               "kind": "getter",
               "name": "locale"
             },
+            {
+              "kind": "getter",
+              "name": "monthFormat"
+            },
             {
               "kind": "getter",
               "name": "min"
@@ -347,6 +376,21 @@
             },
             {
               "name": "--dp-gap"
+            },
+            {
+              "name": "--dp-header-control-size"
+            },
+            {
+              "name": "--dp-header-block-gap"
+            },
+            {
+              "name": "--dp-nav-gap"
+            },
+            {
+              "name": "--dp-year-inline-size"
+            },
+            {
+              "name": "--dp-day-radius"
             }
           ]
         }

package/dist/date-picker.css

@@ -9,6 +9,11 @@
   --dp-radius: 0.5rem;
   --dp-day-size: 2.75rem;
   --dp-gap: 0.25rem;
+  --dp-header-control-size: 2.25rem;
+  --dp-header-block-gap: 0.4rem;
+  --dp-nav-gap: calc(var(--dp-gap) * 2.5);
+  --dp-year-inline-size: 5.5rem;
+  --dp-day-radius: calc(var(--dp-radius) * 0.75);
   color: var(--dp-fg);
   font: inherit;
 }
@@ -39,22 +44,46 @@ date-calendar {
 .dp-calendar-header {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto auto auto;
-  align-items: center;
+  /* Stretch (not center): once a UA natural height exceeds
+     --dp-header-control-size, the row grows to the tallest control and the
+     others stretch to match, so month/year/nav stay equal. */
+  align-items: stretch;
   gap: var(--dp-gap);
-  margin-block-end: 0.4rem;
+  margin-block-end: var(--dp-header-block-gap);
+}
+
+/* Locale year-first order (Intl-derived, direction-independent): the flexible
+   track stays under the month select so the fixed-width year input never
+   stretches. Visual mirroring itself is left to the inherited `dir`. */
+date-calendar[data-year-first] .dp-calendar-header {
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
 }
 
 .dp-calendar-header .dp-prev {
-  margin-inline-start: calc(var(--dp-gap) * 2.5);
+  margin-inline-start: var(--dp-nav-gap);
 }
 
 .dp-calendar-header :where(button, select, input) {
-  min-block-size: 2.25rem;
+  min-block-size: var(--dp-header-control-size);
+  box-sizing: border-box;
+  /* Shared vertical metrics: UA default padding/line-height differ per control
+     (up to ~13px apart), which only shows once --dp-header-control-size drops
+     below content size. */
+  padding-block: 0.15rem;
   border: 1px solid var(--dp-border);
   border-radius: calc(var(--dp-radius) * 0.75);
   background: var(--dp-bg);
   color: var(--dp-fg);
   font: inherit;
+  line-height: 1.2;
+}
+
+/* The select menulist carries UA-internal leading that author padding only
+   adds to (and it ignores line-height), so it gets zero author padding.
+   Equal outer heights come from the header grid's stretch alignment: the row
+   sizes to the tallest control and the others stretch to match. */
+.dp-calendar-header select {
+  padding-block: 0;
 }
 
 .dp-calendar-header select,
@@ -65,16 +94,20 @@ date-calendar {
 
 .dp-month-select {
   inline-size: 100%;
+  /* Long month names in a narrow track (compact consumers, long locales)
+     would paint under the native caret: truncate with an ellipsis instead. */
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .dp-year-input {
-  inline-size: 5.5rem;
+  inline-size: var(--dp-year-inline-size);
 }
 
 .dp-nav {
   display: grid;
   place-items: center;
-  inline-size: 2.25rem;
+  inline-size: var(--dp-header-control-size);
   padding: 0;
   font-size: 1.35rem;
   line-height: 1;
@@ -88,6 +121,14 @@ date-calendar {
   pointer-events: none;
 }
 
+/* Inherited RTL mirrors the header layout via the grid; mirror the nav glyphs
+   so previous/next keep their visual sense. Actions stay chronological: no
+   button swap, no keyboard remapping. */
+[dir="rtl"] .dp-nav svg,
+html[dir="rtl"] .dp-nav svg {
+  transform: scaleX(-1);
+}
+
 .dp-calendar-header :where(button, select, input):disabled,
 .dp-picker-button:disabled {
   cursor: not-allowed;
@@ -133,7 +174,7 @@ date-calendar {
 .dp-day {
   position: relative;
   border: 1px solid transparent;
-  border-radius: calc(var(--dp-radius) * 0.75);
+  border-radius: var(--dp-day-radius);
   cursor: pointer;
   outline: none;
   vertical-align: middle;
@@ -142,10 +183,21 @@ date-calendar {
 
 .dp-day:focus-visible {
   outline: 2px solid var(--dp-accent);
-  outline-offset: 1px;
+  outline-offset: 2px;
+  /* Separation gap between the cell fill and the ring: invisible on plain
+     days, but keeps the ring readable on accent-filled days (selected, range
+     endpoints) where an accent-on-accent outline would disappear. */
+  box-shadow: 0 0 0 2px var(--dp-bg);
   z-index: 1;
 }
 
+/* Base tint for days outside the displayed month. It stays before the
+   selection states so selected/range endpoints keep their accent-contrast
+   text on the accent fill (equal specificity, source order decides). */
+.dp-day[data-outside-month="true"] {
+  color: var(--dp-muted);
+}
+
 .dp-day[data-selected="true"] {
   background: var(--dp-accent);
   color: var(--dp-accent-fg);
@@ -155,10 +207,6 @@ date-calendar {
   border-color: var(--dp-accent);
 }
 
-.dp-day[data-outside-month="true"] {
-  color: var(--dp-muted);
-}
-
 .dp-day[data-disabled="true"] {
   cursor: not-allowed;
   opacity: 0.42;
@@ -201,6 +249,17 @@ date-calendar {
   font-variant-numeric: tabular-nums;
 }
 
+/* A focused disabled day stays discoverable by keyboard: restore full opacity
+   so the focus outline renders at full strength, and mark the number with the
+   muted tone (same language as outside-month days) instead of the wash-out. */
+.dp-day[data-disabled="true"]:focus-visible {
+  opacity: 1;
+}
+
+.dp-day[data-disabled="true"]:focus-visible .dp-day-number {
+  color: var(--dp-muted);
+}
+
 .dp-day-extra {
   position: absolute;
   inset-inline: 2px;
@@ -235,16 +294,56 @@ date-picker > input:not([type="hidden"]) {
   min-inline-size: 0;
 }
 
+/* Optional native time companions share the date row; authored inputs stay
+   consumer-styled, the picker only reserves their grid cells. Time tracks are
+   flexible (never `auto`) so a wide UA time control cannot squeeze the date. */
+date-picker:has(> [data-time-start], > [data-time-end]) {
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+}
+
+date-picker:has(> [data-time-start]):has(> [data-time-end]) {
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1fr);
+}
+
+date-picker > input[data-time-start] {
+  grid-column: 3;
+  grid-row: 1;
+  min-inline-size: 0;
+  inline-size: 100%;
+  margin-inline-start: var(--dp-gap);
+}
+
+date-picker > input[data-time-end] {
+  grid-column: 4;
+  grid-row: 1;
+  min-inline-size: 0;
+  inline-size: 100%;
+}
+
+/* From/to read as one joined control: square the inner corners, but only
+   when both companions are present so a lone time keeps its own radius. */
+date-picker:has(> [data-time-start]):has(> [data-time-end]) > input[data-time-start] {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+date-picker:has(> [data-time-start]):has(> [data-time-end]) > input[data-time-end] {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+
 date-picker[range] > input:not([type="hidden"]) {
   grid-column: 1;
 }
 
 date-picker[range] > input[data-range-start] {
   grid-row: 1;
+  border-end-start-radius: 0;
 }
 
 date-picker[range] > input[data-range-end] {
   grid-row: 2;
+  border-start-start-radius: 0;
 }
 
 .dp-picker-button {

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.2.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 };
     }
@@ -1109,7 +1145,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 +1190,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 +1214,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();
         });
@@ -1697,11 +1741,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,6 +1786,8 @@
       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;
@@ -1746,13 +1821,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 +1851,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)) {
@@ -1827,6 +1927,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);
@@ -1911,6 +2013,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 : "";
@@ -2107,6 +2218,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) {
@@ -2299,6 +2417,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;
@@ -2524,6 +2643,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)
@@ -2608,10 +2754,13 @@
         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;