@lekoala/date-picker 0.1.1 → 0.2.0

package/dist/types/date-picker.d.ts

@@ -14,6 +14,10 @@ export declare class DatePickerElement extends HTMLElement {
     /** @type {DateRangeController | null} */
     _range: DateRangeController | null;
     _orderTags: Set<any>;
+    /** Native time companions, [start, end]. @type {[HTMLInputElement | null, HTMLInputElement | null]} */
+    _timeFields: [HTMLInputElement | null, HTMLInputElement | null];
+    /** Time inputs currently holding our order error. @type {Set<HTMLInputElement>} */
+    _timeOrderOwned: Set<HTMLInputElement>;
     /** @type {"" | "start" | "end"} */
     _lastFocusEndpoint: "" | "start" | "end";
     _rangeCommitId: number;
@@ -64,6 +68,12 @@ export declare class DatePickerElement extends HTMLElement {
     _rangeMode(): boolean;
     connectedCallback(): void;
     _connectSingle(): void;
+    /**
+     * Find optional native time companions. They stay fully native (no hidden
+     * input, no field controller); the picker only coordinates from/to order.
+     * A bad composition never breaks the date picker: warn and leave times alone.
+     */
+    _discoverTimeFields(): void;
     _connectRange(): void;
     disconnectedCallback(): void;
     /** @param {DateFieldController | null} field */
@@ -89,6 +99,9 @@ export declare class DatePickerElement extends HTMLElement {
     /** @public */
     get locale(): string;
     set locale(value: string);
+    /** @public Visible month-name style forwarded to the popup calendar (`long` | `short`); anything else falls back to `long`. */
+    get monthFormat(): "long" | "short";
+    set monthFormat(value: string);
     /** @public */
     get min(): string;
     set min(value: string);
@@ -232,6 +245,17 @@ export declare class DatePickerElement extends HTMLElement {
      * @param {"start" | "end"} which
      */
     _revalidateRange(which: "start" | "end"): void;
+    /**
+     * Single-mode from/to order on the shared date: `start <= end`.
+     * The order error is attributed to the bound that was just modified; the
+     * other bound only loses a stale order error, never its native validity.
+     * Missing, empty or disabled times fall back to no order constraint: times
+     * are never implicitly required. Equality stays valid (duration rules are
+     * application-owned).
+     * @param {"start" | "end"} which
+     */
+    _revalidateTimeOrder(which: "start" | "end"): void;
+    _clearTimeOrderValidity(): void;
     _restoreDefault(): void;
     _restoreRangeDefault(): void;
     /** @param {"start" | "end"} which */

package/dist/types/date-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../src/date-picker.js"],"names":[],"mappings":"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"}
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../src/date-picker.js"],"names":[],"mappings":"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"}

package/dist/types/index.d.ts

@@ -3,7 +3,7 @@ export * as dates from "./date.js";
 export { DateCalendarElement } from "./date-calendar.js";
 export { DatePickerElement } from "./date-picker.js";
 export { linkDateRange, normalizeRange, rangePosition } from "./date-range.js";
-export { createDateAdapter, formatLongDate, formatMonthYear, monthNames, resolveLocale, weekdayNames, } from "./intl.js";
+export { createDateAdapter, formatLongDate, formatMonthYear, monthNames, monthYearOrder, resolveLocale, weekdayNames, } from "./intl.js";
 export { DEFAULT_MESSAGES, getDefaultMessages, setDefaultMessages } from "./messages.js";
 export { createFetchSource, normalizeDateStates } from "./source.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,KAAK,KAAK,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC/E,OAAO,EACL,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,UAAU,EACV,aAAa,EACb,YAAY,GACb,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACzF,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,KAAK,KAAK,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC/E,OAAO,EACL,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,UAAU,EACV,cAAc,EACd,aAAa,EACb,YAAY,GACb,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACzF,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC"}

package/dist/types/intl.d.ts

@@ -4,6 +4,15 @@ export declare function resolveLocale(locale?: string): string;
 export declare function formatLongDate(value: string, locale?: string): string;
 /** @param {string} value @param {string} [locale] */
 export declare function formatMonthYear(value: string, locale?: string): string;
+/**
+ * Locale order of the visible month/year controls, derived from `Intl` so no
+ * `showMonthAfterYear`-style option is needed. Year-like parts cover the
+ * `relatedYear` / `yearName` variants some calendars expose; anything
+ * unrecognized falls back to month-then-year. This is independent of `dir`:
+ * the locale decides the linguistic order, direction only mirrors the layout.
+ * @param {string} [locale] @returns {["month", "year"] | ["year", "month"]}
+ */
+export declare function monthYearOrder(locale?: string): ["month", "year"] | ["year", "month"];
 /** @param {string} [locale] @param {"long"|"short"} [style] */
 export declare function monthNames(locale?: string, style?: "long" | "short"): string[];
 /**

package/dist/types/intl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"intl.d.ts","sourceRoot":"","sources":["../../src/intl.js"],"names":[],"mappings":"AAIA,+BAA+B;AAC/B,wBAAgB,aAAa,CAAC,MAAM,AADhC,CAAwB,EAAhB,MAC6B,UAKxC;AAmBD,qDAAqD;AACrD,wBAAgB,cAAc,CAAC,KAAK,EADxB,MACwB,EAAE,MAAM,AADlB,CAAwB,EAAhB,MACe,UAUhD;AAED,qDAAqD;AACrD,wBAAgB,eAAe,CAAC,KAAK,EADzB,MACyB,EAAE,MAAM,AADnB,CAAwB,EAAhB,MACgB,UAQjD;AAED,+DAA+D;AAC/D,wBAAgB,UAAU,CAAC,MAAM,AAD7B,CAAyB,EAAjB,MAC0B,EAAE,KAAK,AADhB,CAA+B,EAAvB,MAAM,GAAC,OACU,YAMrD;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,MAAM,AAJhC,CACA,EADQ,MAI6B,EAAE,QAAQ,AAH/C,CACA,EADQ,MAG2C,EAAE,KAAK,AAF1D,CAAwC,EAAhC,MAAM,GAAC,OAAO,GAAC,QAE6C,YAetE;AAOD;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,AAFrC,CAAwB,EAAhB,MAEkC;;;IAiCzC,4BAA4B;kBAAhB,MAAM;IAKlB,6CAA6C;gBAAjC,MAAM,GAAiB,MAAM;EAmB5C;AAED,4BAA4B;AAC5B,wBAAgB,SAAS,CAAC,KAAK,EADnB,MACmB;;;;SAE9B"}
+{"version":3,"file":"intl.d.ts","sourceRoot":"","sources":["../../src/intl.js"],"names":[],"mappings":"AAIA,+BAA+B;AAC/B,wBAAgB,aAAa,CAAC,MAAM,AADhC,CAAwB,EAAhB,MAC6B,UAKxC;AAmBD,qDAAqD;AACrD,wBAAgB,cAAc,CAAC,KAAK,EADxB,MACwB,EAAE,MAAM,AADlB,CAAwB,EAAhB,MACe,UAUhD;AAED,qDAAqD;AACrD,wBAAgB,eAAe,CAAC,KAAK,EADzB,MACyB,EAAE,MAAM,AADnB,CAAwB,EAAhB,MACgB,UAQjD;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,MAAM,AAFlC,CAAyB,EAAjB,MAE+B,GAFJ,CAAC,OAAO,EAAE,MAAM,CAAC,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,CA2B1E;AAED,+DAA+D;AAC/D,wBAAgB,UAAU,CAAC,MAAM,AAD7B,CAAyB,EAAjB,MAC0B,EAAE,KAAK,AADhB,CAA+B,EAAvB,MAAM,GAAC,OACU,YAMrD;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,MAAM,AAJhC,CACA,EADQ,MAI6B,EAAE,QAAQ,AAH/C,CACA,EADQ,MAG2C,EAAE,KAAK,AAF1D,CAAwC,EAAhC,MAAM,GAAC,OAAO,GAAC,QAE6C,YAetE;AAOD;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,AAFrC,CAAwB,EAAhB,MAEkC;;;IAiCzC,4BAA4B;kBAAhB,MAAM;IAKlB,6CAA6C;gBAAjC,MAAM,GAAiB,MAAM;EAmB5C;AAED,4BAA4B;AAC5B,wBAAgB,SAAS,CAAC,KAAK,EADnB,MACmB;;;;SAE9B"}

package/dist/types/time.d.ts

@@ -0,0 +1,8 @@
+/** Civil time check for canonical `input[type=time]` values. @param {string} value */
+export declare function isTime(value: string): boolean;
+/**
+ * Compare two canonical time values. `09:30` equals `09:30:00`.
+ * @param {string} a @param {string} b
+ */
+export declare function compareTimes(a: string, b: string): -1 | 0 | 1;
+//# sourceMappingURL=time.d.ts.map

package/dist/types/time.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time.d.ts","sourceRoot":"","sources":["../../src/time.js"],"names":[],"mappings":"AAkBA,sFAAsF;AACtF,wBAAgB,MAAM,CAAC,KAAK,EAD0C,MAC1C,WAE3B;AAOD;;;GAGG;AACH,wBAAgB,YAAY,CAAC,CAAC,EAFnB,MAEmB,EAAE,CAAC,EAFJ,MAEI,cAMhC"}

package/docs/API.md

@@ -14,6 +14,7 @@ The public surface — flat event names, `selection` values, `--dp-*` styling to
 | `max`               | `YYYY-MM-DD`     | `""`               | Latest activatable date.                     |
 | `first-day`         | `0..6` (`7` alias) | `1`                | First weekday; Sunday=0, Monday=1. `7` is accepted as an ISO-style alias of Sunday (`@lekoala/calendar` uses 1..7) and never shifts the grid. Other values fall back to Monday. |
 | `locale`            | BCP 47 string    | document/navigator | `Intl` locale.                               |
+| `month-format`      | `long \| short`  | `long`             | Visible month-name style in the month select; anything else falls back to `long`. The accessible grid heading always keeps the long month/year form. |
 | `selection`         | `single \| none` | `single`           | Whether accepted activation updates `value`. |
 | `fixed-weeks`       | boolean          | false              | Render six rows; date math itself stays 4–6. |
 | `show-week-numbers` | boolean          | false              | Show ISO week numbers. The column renders only when `first-day === 1` (Monday-first): the ISO week and the displayed week only coincide then. With Sunday-first (`0`/`7`) the column is silently withheld. |
@@ -132,6 +133,7 @@ The direct child text input is required. On enhancement its original `name` move
 - `min`;
 - `max`;
 - `open-on-focus` — boolean (default `true`): open the popover when the input receives focus without moving focus; `open-on-focus="false"` keeps focus alone passive;
+- `month-format` — `long | short` (default `long`): visible month-name style forwarded to the popup calendar;
 - `open` — read-only: whether the popover is shown;
 - `openOnFocus` — property form of `open-on-focus`.
 
@@ -173,6 +175,51 @@ await picker.validate();
 
 Calendar selection also dispatches normal bubbling `input` and `change` events on the visible input.
 
+### Time companions
+
+Date with one time:
+
+```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
+```
+
+Date with from/to times on the same day:
+
+```html
+<date-picker>
+  <input name="appointment[date]">
+  <input type="time" data-time-start name="appointment[from]">
+  <input type="time" data-time-end name="appointment[to]">
+</date-picker>
+```
+
+```text
+appointment[date] = 2026-09-10
+appointment[from] = 09:30
+appointment[to] = 11:00
+```
+
+The submit contract is: `date-picker` owns the civil date selection, the time inputs own their civil time values, the authored HTML `name`s own the submitted structure, and the server/application owns datetime composition plus timezone. The picker never constructs a combined datetime, timestamp or timezone-bearing value.
+
+Future range + time projection (not supported yet — range mode leaves marked times native with a console warning):
+
+```text
+period[start][date]
+period[start][time]
+period[end][date]
+period[end][time]
+```
+
+Optional native time companions (one or both). They are direct children, fixed at connect time, and stay fully native: no hidden input, no `picker.time` property, no `timechange` event — their `input`/`change` events bubble like the date field's. `value` stays a `YYYY-MM-DD` date. The picker only enforces from/to order (`start <= end`, equality allowed, see [D5](DECISIONS.md)); a missing, empty or `disabled` time lifts the constraint, and `validate()` aggregates date validity, native time validity and that order. Range mode does not support time companions yet: marked times there are left native with a console warning.
+
 ## `<date-picker range>` — shared range surface
 
 ```html

package/docs/DECISIONS.md

@@ -37,4 +37,11 @@ Context: DOM-backed styling hooks become API the moment they are documented —
 - Opening on focus **never steals keyboard focus**: the user can start typing immediately. The grid takes focus only on ArrowDown, on the calendar trigger, or after the user moves the pointer into the popup.
 - `show()` / `hide()` are the control surface. `open` is a **read-only getter** reflecting the popover. There is no `open` attribute: the popover element is the single machine of truth and a second state machine would only drift.
 - `readonly` mirrors native semantics: the field is non-editable, the value is still submitted, and the picker cannot change it — the calendar trigger is disabled. `disabled` additionally unsubmits the field. `readonly` is never used to mean "no typing, but calendar selection allowed".
-- Clearing the editable input clears the canonical value (the component renders no internal clear button). Form resets follow the native `defaultValue` contract. This matches the Open UI datepicker `clear` concept: clearing is a text-editing action, not a component-owned affordance.
+- Clearing the editable input clears the canonical value (the component renders no internal clear button). Form resets follow the native `defaultValue` contract. This matches the Open UI datepicker `clear` concept: clearing is a text-editing action, not a component-owned affordance.
+
+## D5 — Time is a native companion, not picker state
+
+- Time fields are authored native `input[type=time]` marked `[data-time-start]` / `[data-time-end]`; `name`, `value`, `required`, `min`, `max`, `step` and submission stay native. There is no hidden time input and no time field controller.
+- `picker.value` / `picker.range` remain date-only (`YYYY-MM-DD`); the picker never constructs a datetime, a timestamp or a timezone-bearing value.
+- The picker only coordinates from/to order (`start <= end`, equality allowed); duration rules stay application-owned.
+- Custom time UI and slot picking stay outside the package.

package/docs/ROADMAP.md

@@ -50,7 +50,8 @@ Use Formidable/Flatpickr cases as migration fixtures:
 
 These should require a separate proposal, not opportunistic growth:
 
-- time picker / datetime picker;
+- custom time-picker UI;
+- combined datetime values;
 - single-grid visual **selection** interaction (the band itself is core presentation via `calendar.highlightedRange`);
 - month-as-value picker;
 - multi-date;
@@ -86,7 +87,7 @@ Cross-check our coverage against the Open UI datepicker research: <https://open-
 | `range` | core | `<date-picker range>` two-field shared surface (U9); `linkDateRange()` stays external (U5). |
 | `range selected` | deferred | selection interaction needs its own proposal; `highlightedRange` covers band presentation only. |
 | `range presets` | deferred | application-owned. |
-| `date-time picker` | deferred | time/datetime is explicitly out of scope. |
+| `date-time picker` | contract boundary | native `input[type=time]` companions only (D5); custom time-picker UI, combined datetime values and timezone-aware values stay deferred. |
 | `side by side` | deferred | maps to "multiple visible months". |
 | `footer` | deferred | not part of the grid contract. |
 | `shape`, `size`, `compact`, `subtle`, `light`, `borderless`, `no icon` | app-owned | styling via public `--dp-*` tokens (D3), not a component API. |

package/docs/USE_CASES.md

@@ -35,7 +35,8 @@ Acceptance:
 - activating a date dispatches `dateactivate` and the application calls `calendarView.gotoDate(date)`;
 - outside-month days remain activatable;
 - six-row height is available as presentation, not baked into month math;
-- ISO week numbers are available.
+- ISO week numbers are available;
+- a narrow/compact presentation can use short month names (`month-format="short"`).
 
 ## U4 — Constrained dates
 
@@ -112,6 +113,18 @@ Acceptance:
 - a stale async availability response arriving after the active endpoint changed never commits a value or closes the popup;
 - only the bounds are validated; per-night availability stays application-owned.
 
+## U10 — Date with native time companions
+
+A form pairs a date with one or two native times (appointment at `09:30`, from/to on the same day).
+
+Acceptance:
+
+- times stay native `input[type=time]` fields with their own names and submission;
+- `value` stays a `YYYY-MM-DD` date;
+- an inverted from/to surfaces an order error on the modified bound;
+- a missing or disabled time lifts the order constraint;
+- calendar selection and form reset keep the entered times.
+
 ## Not a use case for this package
 
 Do not grow the API to cover these without a separate design:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lekoala/date-picker",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Native-first date picker and inline calendar primitives",
   "type": "module",
   "sideEffects": [
@@ -143,7 +143,7 @@
     "typecheck": "tsc -p jsconfig.json",
     "types": "tsc -p tsconfig.types.json",
     "test": "bun test test/unit",
-    "test:syntax": "node --check src/date.js && node --check src/intl.js && node --check src/calendar-model.js && node --check src/source.js && node --check src/messages.js && node --check src/date-calendar.js && node --check src/date-field.js && node --check src/date-picker.js && node --check src/date-range.js && node --check src/index.js && node --check src/define.js",
+    "test:syntax": "node --check src/date.js && node --check src/intl.js && node --check src/calendar-model.js && node --check src/source.js && node --check src/messages.js && node --check src/date-calendar.js && node --check src/date-field.js && node --check src/date-picker.js && node --check src/date-range.js && node --check src/time.js && node --check src/index.js && node --check src/define.js",
     "test:types": "tsc -p test/types/tsconfig.json",
     "test:browser": "playwright test browser --project chromium",
     "test:browser:accessibility": "playwright test test/browser/picker.spec.js test/browser/focus.spec.js test/browser/calendar.spec.js test/browser/form-state.spec.js test/browser/surfaces.spec.js",

package/src/date-calendar.js

@@ -11,7 +11,14 @@ import {
   todayISO,
 } from "./date.js";
 import { normalizeRange, rangePosition } from "./date-range.js";
-import { formatLongDate, formatMonthYear, monthNames, resolveLocale, weekdayNames } from "./intl.js";
+import {
+  formatLongDate,
+  formatMonthYear,
+  monthNames,
+  monthYearOrder,
+  resolveLocale,
+  weekdayNames,
+} from "./intl.js";
 import { getDefaultMessages } from "./messages.js";
 import { normalizeDateStates } from "./source.js";
 
@@ -93,6 +100,7 @@ export class DateCalendarElement extends HTMLElement {
     "fixed-weeks",
     "show-week-numbers",
     "selection",
+    "month-format",
   ];
 
   constructor() {
@@ -237,6 +245,16 @@ export class DateCalendarElement extends HTMLElement {
     this.setAttribute("selection", value === "none" ? "none" : "single");
   }
 
+  /** @public Visible month-name style in the month select (`long` | `short`); anything else falls back to `long`. The accessible grid heading always keeps the long month/year form. */
+  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");
+  }
+
   /** @public */
   get highlightedRange() {
     return { ...this._highlightedRange };
@@ -688,7 +706,7 @@ export class DateCalendarElement extends HTMLElement {
     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();
@@ -758,14 +776,22 @@ export class DateCalendarElement extends HTMLElement {
         ? this._focusTargetKey(focusedElement)
         : "";
 
+    // Visible month/year controls follow the locale order (Intl-derived, never
+    // direction-derived); the flexible header track stays under the month
+    // select via `data-year-first`.
+    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>
@@ -779,7 +805,16 @@ export class DateCalendarElement extends HTMLElement {
 
     if (focusKey) {
       queueMicrotask(() => {
-        const target = this.querySelector(focusKey);
+        let selector = focusKey;
+        // A day-cell key goes stale across display changes: the old date can
+        // reappear as outside-month padding in the new month (fixed-weeks or
+        // overlapping edge weeks). Restoring it would yank keyboard focus back
+        // onto the date the user just navigated away from, so retarget day
+        // cells to the current keyboard position. Controls keep exact restore.
+        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();
       });
     }

package/src/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 {