@lekoala/date-picker 0.1.1 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lekoala/date-picker",
-  "version": "0.1.1",
+  "version": "0.3.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",
@@ -162,13 +162,13 @@
     "prepublishOnly": "bun run verify"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.5.11",
+    "@biomejs/biome": "2.5.13",
     "@lekoala/calendar": "0.1.0",
-    "@playwright/test": "1.62.1",
+    "@playwright/test": "1.63.0",
     "temporal-polyfill": "^1.0.4",
     "typescript": "7.0.2"
   },
   "dependencies": {
-    "@lekoala/floating": "^0.1.1"
+    "@lekoala/floating": "^0.2.0"
   }
 }

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 };
@@ -368,7 +386,7 @@ export class DateCalendarElement extends HTMLElement {
 
   /** @param {HTMLElement} element @returns {string} */
   _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]")) {
@@ -398,7 +416,8 @@ export class DateCalendarElement extends HTMLElement {
     const outsideBounds =
       (this.min && compareDates(date, this.min) < 0) || (this.max && compareDates(date, this.max) > 0);
     const explicitlyEnabled = state.enabled === true;
-    // min/max > state.disabled > enabled:true lifts only isDateDisabled().
+    // min/max > resolved state.disabled > isDateDisabled(), unless resolved
+    // state.enabled === true lifts only isDateDisabled().
     const disabledByRule = explicitlyEnabled ? false : Boolean(this._isDateDisabled?.(date));
     const disabled = Boolean(outsideBounds) || Boolean(state.disabled) || disabledByRule;
     return { ...state, disabled };
@@ -624,10 +643,6 @@ export class DateCalendarElement extends HTMLElement {
       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) {
@@ -688,7 +703,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 +773,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 +802,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-field.js

@@ -117,18 +117,26 @@ export class DateFieldController {
   }
 
   /** Live text input: the raw text no longer matches the canonical value, so
-   * the hidden ISO must not submit it. */
+   * the hidden ISO must not submit it. A text that formats back to the current
+   * canonical value (e.g. re-applied by a calendar pick) keeps the ISO value
+   * valid; invalidating in-flight commits first still drops stale async work. */
   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);
   }
 

package/src/date-picker.css

@@ -1,14 +1,20 @@
 :where(date-calendar, date-picker) {
-  --dp-bg: Canvas;
-  --dp-fg: CanvasText;
-  --dp-muted: color-mix(in srgb, CanvasText 58%, Canvas);
-  --dp-border: color-mix(in srgb, CanvasText 22%, Canvas);
-  --dp-hover: color-mix(in srgb, CanvasText 7%, Canvas);
-  --dp-accent: Highlight;
-  --dp-accent-fg: HighlightText;
+  --dp-bg: #ffffff;
+  --dp-fg: #1f2328;
+  --dp-muted: color-mix(in srgb, var(--dp-fg) 58%, var(--dp-bg));
+  --dp-border: color-mix(in srgb, var(--dp-fg) 16%, var(--dp-bg));
+  --dp-hover: color-mix(in srgb, var(--dp-fg) 5%, var(--dp-bg));
+  --dp-accent: #2563eb;
+  --dp-accent-fg: #fff;
   --dp-radius: 0.5rem;
   --dp-day-size: 2.75rem;
-  --dp-gap: 0.25rem;
+  --dp-gap: 0.375rem;
+  --dp-header-control-size: 2.25rem;
+  --dp-header-block-gap: 0.75rem;
+  --dp-row-gap: 0.375rem;
+  --dp-picker-button-size: 2.5rem;
+  --dp-year-inline-size: 5.5rem;
+  --dp-day-radius: calc(var(--dp-radius) * 0.75);
   color: var(--dp-fg);
   font: inherit;
 }
@@ -39,42 +45,85 @@ 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;
+  /* Uniform horizontal rhythm: the four header controls are self-evident from
+     their kind and position, so no group gets an extra semantic gap. The air
+     belongs to the vertical zones (header -> weekdays -> dates). */
   gap: var(--dp-gap);
-  margin-block-end: 0.4rem;
+  margin-block-end: var(--dp-header-block-gap);
 }
 
-.dp-calendar-header .dp-prev {
-  margin-inline-start: calc(var(--dp-gap) * 2.5);
+/* 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 :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;
 }
 
-.dp-calendar-header select,
 .dp-calendar-header input {
   min-inline-size: 0;
   padding-inline: 0.45rem;
 }
 
+/* Author-drawn caret so the month select matches the nav controls without a
+   hardcoded SVG color (currentColor keeps theming). 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-month-select {
   inline-size: 100%;
+  min-inline-size: 0;
+  /* Long month names in a narrow track (compact consumers, long locales)
+     would paint under the caret: truncate with an ellipsis instead. */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  appearance: none;
+  padding-inline: 0.45rem 2rem;
+  background-image:
+    linear-gradient(45deg, transparent 50%, currentColor 50%),
+    linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position:
+    calc(100% - 0.9rem) 50%,
+    calc(100% - 0.65rem) 50%;
+  background-size: 0.3rem 0.3rem;
+  background-repeat: no-repeat;
+}
+
+/* Inherited RTL mirrors the header layout via the grid. The logical
+   `padding-inline` already flips, so only the physically-positioned caret has
+   to follow it to the other side. */
+[dir="rtl"] .dp-month-select,
+html[dir="rtl"] .dp-month-select {
+  background-position:
+    0.9rem 50%,
+    0.65rem 50%;
 }
 
 .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 +137,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;
@@ -98,6 +155,14 @@ date-calendar {
   background: var(--dp-hover);
 }
 
+/* Shared control focus: accent border + light halo. Day cells keep their
+   dedicated outline ring below; the picker trigger has its own inner ring. */
+.dp-calendar-header :where(button, select, input):focus-visible {
+  outline: none;
+  border-color: var(--dp-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dp-accent) 22%, transparent);
+}
+
 .dp-day:hover:not([data-disabled="true"]):not([data-selected="true"]):not([data-range-start="true"]):not(
   [data-range-end="true"]
 ) {
@@ -110,8 +175,8 @@ date-calendar {
 
 .dp-grid {
   border-collapse: separate;
-  /* --dp-gap scopes to the header grid; day-cell spacing stays fixed. */
-  border-spacing: 0 0.25rem;
+  /* --dp-gap scopes to the header grid; vertical week rhythm is --dp-row-gap. */
+  border-spacing: 0 var(--dp-row-gap);
   table-layout: fixed;
 }
 
@@ -124,26 +189,41 @@ date-calendar {
 }
 
 .dp-grid thead th {
-  block-size: 1.6rem;
+  block-size: 1.5rem;
   color: var(--dp-muted);
   font-size: 0.72rem;
-  font-weight: 600;
+  font-weight: 500;
 }
 
 .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;
   font-size: 0.875rem;
 }
 
+/* Inner ring: keyboard focus stays inside the cell instead of reading as a
+   second selected state or bleeding onto a neighbouring range band. It is an
+   `outline` (not an inset box-shadow) because forced colors computes
+   box-shadow to `none`, which would erase the keyboard indicator entirely. */
 .dp-day:focus-visible {
   outline: 2px solid var(--dp-accent);
-  outline-offset: 1px;
-  z-index: 1;
+  outline-offset: -2px;
+}
+
+/* On an accent-filled cell the ring inverts so it stays readable. */
+.dp-day:is([data-selected="true"], [data-range-start="true"], [data-range-end="true"]):focus-visible {
+  outline-color: var(--dp-accent-fg);
+}
+
+/* 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"] {
@@ -151,14 +231,13 @@ date-calendar {
   color: var(--dp-accent-fg);
 }
 
-.dp-day[data-today="true"]:not([data-selected="true"]) {
+/* Today never competes with a stronger state: a selected day or a range
+   endpoint keeps its own treatment, in normal rendering and in
+   forced-colors alike. */
+.dp-day[data-today="true"]:not([data-selected="true"], [data-range-start="true"], [data-range-end="true"]) {
   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;
@@ -187,13 +266,13 @@ date-calendar {
 }
 
 .dp-day[data-in-range="true"]:first-of-type {
-  border-start-start-radius: var(--dp-radius);
-  border-end-start-radius: var(--dp-radius);
+  border-start-start-radius: var(--dp-day-radius);
+  border-end-start-radius: var(--dp-day-radius);
 }
 
 .dp-day[data-in-range="true"]:last-of-type {
-  border-start-end-radius: var(--dp-radius);
-  border-end-end-radius: var(--dp-radius);
+  border-start-end-radius: var(--dp-day-radius);
+  border-end-end-radius: var(--dp-day-radius);
 }
 
 .dp-day-number {
@@ -201,6 +280,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;
@@ -225,18 +315,95 @@ date-calendar {
 date-picker {
   position: relative;
   display: inline-grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-columns: minmax(0, 1fr);
   align-items: stretch;
   max-inline-size: 100%;
 }
 
+/* Visible focus is normalized to --dp-accent so the component holds together
+   without a consumer stylesheet; the field's own look stays consumer-owned. */
+date-picker > input:not([type="hidden"]):focus-visible {
+  border-color: var(--dp-accent);
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dp-accent) 20%, transparent);
+}
+
+/* Every authored control is a grid item. */
 date-picker > input:not([type="hidden"]) {
-  grid-column: 1;
   min-inline-size: 0;
 }
 
-date-picker[range] > input:not([type="hidden"]) {
+/* Date fields reserve room for the trigger, which is painted inside the
+   field's own box: the field is the real outer box, so its focus ring wraps
+   the affordance too. `grid-row` must stay explicit, otherwise the trigger
+   (placed with a definite row) claims the row and pushes the field down. */
+date-picker > input:not([type="hidden"]):not([type="time"]) {
   grid-column: 1;
+  grid-row: 1;
+  box-sizing: border-box;
+  inline-size: 100%;
+  padding-inline-end: calc(var(--dp-picker-button-size) + 0.5rem);
+}
+
+/* The trigger is a real button overlaid on the field's inline-end, like the
+   native `input[type=time]` indicator: no chrome of its own, transparent, so
+   the authored field background and border stay visible underneath. */
+.dp-picker-button {
+  display: grid;
+  place-items: center;
+  grid-column: 1;
+  grid-row: 1;
+  justify-self: end;
+  align-self: stretch;
+  inline-size: var(--dp-picker-button-size);
+  min-inline-size: 0;
+  border: 0;
+  background: transparent;
+  color: var(--dp-fg);
+  font: inherit;
+  cursor: pointer;
+}
+
+/* Like the native time indicator: the ring wraps the icon, not the field (the
+   field already shows its own ring through :focus-visible). Same radius as
+   everywhere else: no bespoke shape. */
+.dp-picker-button:focus-visible {
+  outline: 2px solid var(--dp-accent);
+  outline-offset: -5px;
+  border-radius: var(--dp-radius);
+}
+
+/* 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.
+   Each companion keeps its own box and its own gap: nothing is joined, so
+   focus rings never merge and no neighbour swallows another's focus. */
+date-picker:has(> [data-time-start], > [data-time-end]) {
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  column-gap: var(--dp-gap);
+}
+
+date-picker:has(> [data-time-start]):has(> [data-time-end]) {
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
+}
+
+date-picker > input[data-time-start] {
+  grid-column: 2;
+  grid-row: 1;
+  min-inline-size: 0;
+}
+
+date-picker > input[data-time-end] {
+  grid-column: 3;
+  grid-row: 1;
+  min-inline-size: 0;
+}
+
+/* Range: two stacked fields, each owning its trigger, sharing one popup and
+   one calendar. No trigger spans both bounds, so each bound keeps a local
+   affordance and a local focus target. */
+date-picker[range] {
+  row-gap: var(--dp-gap);
 }
 
 date-picker[range] > input[data-range-start] {
@@ -247,35 +414,26 @@ date-picker[range] > input[data-range-end] {
   grid-row: 2;
 }
 
-.dp-picker-button {
-  grid-column: 2;
-  min-inline-size: 2.5rem;
-  border: 1px solid var(--dp-border);
-  border-inline-start: 0;
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
-  border-start-end-radius: var(--dp-radius);
-  border-end-end-radius: var(--dp-radius);
-  background: var(--dp-bg);
-  color: var(--dp-fg);
-  font: inherit;
-  cursor: pointer;
+date-picker[range] > .dp-picker-button[data-endpoint="start"] {
+  grid-row: 1;
 }
 
-date-picker[range] > .dp-picker-button {
-  grid-row: 1 / span 2;
+date-picker[range] > .dp-picker-button[data-endpoint="end"] {
+  grid-row: 2;
 }
 
 .dp-picker-panel[popover] {
+  /* Safe baseline. show() switches to absolute only when the consumer
+   * explicitly selects document coordinate space. */
   position: fixed;
   inset: auto;
   margin: 0;
-  padding: 0.65rem;
+  padding: 0.875rem 1rem;
   border: 1px solid var(--dp-border);
   border-radius: var(--dp-radius);
   background: var(--dp-bg);
   color: var(--dp-fg);
-  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.16);
+  box-shadow: 0 0.5rem 1.5rem rgb(15 23 42 / 0.12);
   max-block-size: var(--available-height, 90svh);
   max-inline-size: calc(100vi - 1rem);
   overflow: auto;
@@ -286,19 +444,22 @@ date-picker[range] > .dp-picker-button {
 }
 
 @media (forced-colors: active) {
-  .dp-day[data-selected="true"] {
-    border: 2px solid Highlight;
-    background-color: Canvas;
-    color: CanvasText;
-    font-weight: 700;
+  /* The author-drawn caret is a gradient and disappears here: hand the
+     control back to the browser instead of trying to rebuild it. */
+  .dp-month-select,
+  [dir="rtl"] .dp-month-select {
+    appearance: auto;
+    background-image: none;
+    padding-inline: 0.45rem;
   }
 
-  .dp-day[data-range-start="true"],
-  .dp-day[data-range-end="true"] {
+  /* Fills vanish here, so selection and endpoints fall back to a 2px
+     Highlight border. The in-range underline is the only band marker left:
+     the range fill is lost and the browser does not know the semantics. */
+  .dp-day:is([data-selected="true"], [data-range-start="true"], [data-range-end="true"]) {
     border: 2px solid Highlight;
     background-color: Canvas;
     color: CanvasText;
-    font-weight: 700;
   }
 
   .dp-day[data-in-range="true"] {
@@ -314,15 +475,8 @@ date-picker[range] > .dp-picker-button {
     background-color: Highlight;
   }
 
-  .dp-day[data-selected="true"]::before {
-    content: "";
-    position: absolute;
-    inset: 3px;
-    border: 1px solid CanvasText;
-    border-radius: calc(var(--dp-radius) * 0.5);
-    pointer-events: none;
-  }
-
+  /* Pin the today marker: the deterministic accent is a non-system color
+     and would otherwise remap unpredictably here. */
   .dp-day[data-today="true"] {
     border-color: Highlight;
   }
@@ -331,11 +485,4 @@ date-picker[range] > .dp-picker-button {
     color: CanvasText;
     forced-color-adjust: none;
   }
-
-  .dp-day[data-disabled="true"],
-  .dp-calendar-header :where(button, select, input):disabled,
-  .dp-picker-button:disabled {
-    opacity: 1;
-    color: GrayText;
-  }
 }