@reliability-design/web 1.4.4 → 1.4.6

package/dist/components/rel-date-picker/rel-date-picker.ts

@@ -1,6 +1,10 @@
 import { LitElement, html, css, nothing } from "lit";
 import { customElement, property, state, query } from "lit/decorators.js";
+import { live } from "lit/directives/live.js";
 import { formatDatePattern } from "./date-format";
+import { parseDateInput, isDayFirstPattern, isDayFirstLocale } from "./date-parse";
+import { getDeepActiveElement, trapTabKey } from "../../utils/focus.js";
+import { announce } from "../../utils/announce";
 
 interface CalendarDay {
   date: Date;
@@ -74,8 +78,20 @@ export class RelDatePicker extends LitElement {
   @state() private focusedDate: Date | null = null;
   @state() private yearDropdownOpen = false;
   @state() private monthDropdownOpen = false;
+  /** Uncommitted typed text; null → the input shows the committed value. */
+  @state() private inputText: string | null = null;
+  /** Parse/range error message for the typed text (cleared on next input). */
+  @state() private inputError: string | null = null;
 
-  @query(".trigger-button") private triggerButton?: HTMLButtonElement;
+  /**
+   * Whether the next popover open should move focus into the calendar grid.
+   * Icon-click / ArrowDown / external `open` do (previous behavior); opening
+   * by clicking into the text input must NOT, or typing would be impossible.
+   */
+  private focusPanelOnOpen = true;
+
+  @query(".trigger-input") private triggerInput?: HTMLInputElement;
+  @query(".trigger-button") private triggerButton?: HTMLElement;
   @query(".popover") private popoverElement?: HTMLElement;
   @query(".calendar-grid") private calendarGrid?: HTMLElement;
 
@@ -152,9 +168,14 @@ export class RelDatePicker extends LitElement {
       color: var(--rel-text-danger);
     }
 
+    /* Persistent live region — out of flow while empty so it adds no gap. */
+    .date-picker-support.empty {
+      position: absolute;
+    }
+
     .trigger-button {
       width: 100%;
-      min-width: 200px;
+      min-width: min(200px, 100%);
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -174,28 +195,48 @@ export class RelDatePicker extends LitElement {
       letter-spacing: var(--rel-body-md-regular-letter-spacing);
     }
 
-    .trigger-button:hover:not(:disabled) {
+    :host(:not([disabled])) .trigger-button:hover {
       border-color: var(--rel-border-strong);
     }
 
-    .trigger-button:focus-visible {
+    .trigger-button:focus-within {
       outline: 2px solid var(--rel-border-focus);
       outline-offset: 2px;
       border-color: var(--rel-border-focus);
     }
 
-    .trigger-button:disabled {
+    :host([disabled]) .trigger-button {
       cursor: not-allowed;
       background: var(--rel-bg-surface-elevated);
     }
 
+    /* The editable field itself — the wrapper carries the box styles. */
+    .trigger-input {
+      flex: 1;
+      min-width: 0;
+      border: none;
+      background: transparent;
+      padding: 0;
+      margin: 0;
+      outline: none;
+      color: var(--rel-text-default);
+      font: inherit;
+      letter-spacing: inherit;
+      cursor: inherit;
+    }
+
+    .trigger-input::placeholder {
+      color: var(--rel-text-placeholder);
+      opacity: 1;
+    }
+
     /* Error state */
     .trigger-button.error,
-    .trigger-button.error:hover:not(:disabled) {
+    :host(:not([disabled])) .trigger-button.error:hover {
       border-color: var(--rel-border-danger);
     }
 
-    .trigger-button.error:focus-visible {
+    .trigger-button.error:focus-within {
       outline-color: var(--rel-border-danger);
       border-color: var(--rel-border-danger);
     }
@@ -219,15 +260,6 @@ export class RelDatePicker extends LitElement {
       letter-spacing: var(--rel-body-lg-regular-letter-spacing);
     }
 
-    .trigger-content {
-      flex: 1;
-      color: var(--rel-text-default);
-    }
-
-    .trigger-content.placeholder {
-      color: var(--rel-text-placeholder);
-    }
-
     .trigger-icons {
       display: flex;
       align-items: center;
@@ -258,16 +290,34 @@ export class RelDatePicker extends LitElement {
     }
 
     .popover {
+      /* Reset native [popover] UA styles first (the panel is promoted to
+         the top layer so a drawer/sheet/modal ancestor — transformed,
+         overflow:hidden, or an equal-z-index sibling panel — can't clip it
+         or paint over it). While in the top layer, JS overrides the
+         anchored position below with inline fixed coordinates; the CSS
+         anchoring is the no-Popover-API fallback. */
+      margin: 0;
+      width: auto;
+      height: auto;
+      inset: auto;
+      color: inherit;
       position: absolute;
       top: calc(100% + 4px);
       left: 0;
-      z-index: 1000;
+      z-index: 2147483647;
       background: var(--rel-bg-surface);
       border: 1px solid var(--rel-border-default);
       border-radius: var(--rel-border-radius-sm);
       box-shadow: var(--rel-shadows-shadow-300);
       padding: var(--rel-spacing-md);
-      min-width: 280px;
+      /* Never wider or taller than the viewport (small screens). border-box
+         so the caps include border+padding; 314px = the previous 280px
+         content-box min-width, keeping desktop rendering unchanged. */
+      box-sizing: border-box;
+      min-width: min(314px, calc(100vw - 16px));
+      max-width: calc(100vw - 16px);
+      max-height: min(600px, calc(100vh - 16px));
+      overflow-y: auto;
       display: none;
     }
 
@@ -275,6 +325,56 @@ export class RelDatePicker extends LitElement {
       display: block;
     }
 
+    /* Typed-shortcut hints (T → Today, …); each chip applies its value. */
+    .shortcut-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--rel-spacing-2xs);
+      padding-bottom: var(--rel-spacing-xs);
+      margin-bottom: var(--rel-spacing-xs);
+      border-bottom: 1px solid var(--rel-border-subtle);
+    }
+
+    .shortcut-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--rel-spacing-2xs);
+      border: none;
+      background: transparent;
+      border-radius: var(--rel-border-radius-xs);
+      padding: var(--rel-spacing-3xs) var(--rel-spacing-2xs);
+      cursor: pointer;
+      color: var(--rel-text-default);
+      transition: background 0.15s ease;
+      font-family: var(--rel-body-xs-regular-font-family);
+      font-weight: var(--rel-body-xs-regular-font-weight);
+      font-size: var(--rel-body-xs-regular-font-size);
+      line-height: var(--rel-body-xs-regular-line-height);
+      letter-spacing: var(--rel-body-xs-regular-letter-spacing);
+    }
+
+    .shortcut-chip:hover {
+      background: var(--rel-bg-neutral-elevated-1);
+    }
+
+    .shortcut-chip:focus-visible {
+      outline: 2px solid var(--rel-border-focus);
+      outline-offset: -2px;
+    }
+
+    .shortcut-chip kbd {
+      border: 1px solid var(--rel-border-default);
+      border-bottom-width: 2px;
+      border-radius: var(--rel-border-radius-xs);
+      background: var(--rel-bg-surface-elevated);
+      padding: 0 var(--rel-spacing-3xs);
+      min-width: 18px;
+      text-align: center;
+      font-family: inherit;
+      font-size: inherit;
+      color: var(--rel-text-label);
+    }
+
     .calendar-header {
       display: flex;
       align-items: center;
@@ -357,6 +457,11 @@ export class RelDatePicker extends LitElement {
     }
 
     .dropdown-item {
+      display: block;
+      width: 100%;
+      border: none;
+      background: transparent;
+      text-align: left;
       padding: var(--rel-spacing-xs) var(--rel-spacing-sm);
       cursor: pointer;
       color: var(--rel-text-default);
@@ -368,6 +473,11 @@ export class RelDatePicker extends LitElement {
       letter-spacing: var(--rel-body-sm-regular-letter-spacing);
     }
 
+    .dropdown-item:focus-visible {
+      outline: 2px solid var(--rel-border-focus);
+      outline-offset: -2px;
+    }
+
     .dropdown-item:hover {
       background: var(--rel-bg-surface-elevated);
     }
@@ -403,6 +513,13 @@ export class RelDatePicker extends LitElement {
       gap: var(--rel-spacing-3xs);
     }
 
+    .calendar-week {
+      grid-column: 1 / -1;
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: var(--rel-spacing-3xs);
+    }
+
     .day-button {
       aspect-ratio: 1;
       border: none;
@@ -485,6 +602,9 @@ export class RelDatePicker extends LitElement {
     super.disconnectedCallback();
     document.removeEventListener("click", this.handleClickOutside);
     document.removeEventListener("keydown", this.handleEscapeKey);
+    window.removeEventListener("resize", this.onReposition);
+    window.removeEventListener("scroll", this.onReposition, true);
+    this.hideTopLayer();
   }
 
   private handleClickOutside = (e: MouseEvent) => {
@@ -492,13 +612,21 @@ export class RelDatePicker extends LitElement {
 
     const path = e.composedPath();
     if (!path.includes(this)) {
-      this.closeCalendarPopover();
+      // Don't refocus the field — the user clicked somewhere else on purpose.
+      this.closeCalendarPopover(false);
     }
   };
 
   private handleEscapeKey = (e: KeyboardEvent) => {
-    if (e.key === "Escape" && this.open) {
+    if (!this.open) return;
+    if (e.key === "Escape") {
       this.closeCalendarPopover();
+      return;
+    }
+    // The popover announces itself as a dialog — keep Tab inside it.
+    if (e.key === "Tab") {
+      const popover = this.renderRoot.querySelector<HTMLElement>(".popover");
+      if (popover) trapTabKey(e, popover);
     }
   };
 
@@ -511,15 +639,116 @@ export class RelDatePicker extends LitElement {
       }
     }
 
-    if (changedProperties.has("open") && this.open) {
-      // Focus first day when opening
-      setTimeout(() => {
-        const firstDay = this.calendarGrid?.querySelector<HTMLButtonElement>(
-          ".day-button:not(:disabled)"
-        );
-        firstDay?.focus();
-      }, 100);
+    // `open` is a public reflected property (consumers may set it directly,
+    // not only via the trigger), so top-layer promotion syncs here rather
+    // than inside toggle/close.
+    if (changedProperties.has("open")) {
+      if (!this.open) {
+        window.removeEventListener("resize", this.onReposition);
+        window.removeEventListener("scroll", this.onReposition, true);
+        this.hideTopLayer();
+        this.focusPanelOnOpen = true;
+        return;
+      }
+      this.showTopLayer();
+      window.addEventListener("resize", this.onReposition);
+      window.addEventListener("scroll", this.onReposition, true);
+      // Focus the roving cell (selected day, else today, else first
+      // selectable) when opening — not blindly the first of the month —
+      // unless the open came from clicking into the text input (typing must
+      // keep working).
+      const focusPanel = this.focusPanelOnOpen;
+      this.focusPanelOnOpen = true;
+      if (focusPanel) {
+        setTimeout(() => this.focusPanelSelection(), 100);
+      }
+    }
+  }
+
+  /* A drawer/sheet/modal ancestor breaks the anchored panel two ways: a
+   * transform makes it the containing block for position:fixed descendants
+   * (and overflow:hidden clips absolute ones), and an equal-z-index panel
+   * later in the DOM paints over the calendar. Promoting the panel to the
+   * browser top layer sidesteps both — same fix as rel-popover /
+   * rel-autocomplete / rel-select / rel-range-picker. `manual` keeps
+   * outside-click and Escape handling under this component's own control.
+   * While in the top layer the CSS anchoring is meaningless, so the panel
+   * gets inline fixed coordinates from updatePopoverPosition(). */
+
+  private showTopLayer() {
+    const el = this.popoverElement;
+    if (el && typeof el.showPopover === "function") {
+      try {
+        if (!el.matches(":popover-open")) el.showPopover();
+      } catch {
+        /* older engines / detached element — CSS fallback applies */
+      }
     }
+    requestAnimationFrame(() => this.updatePopoverPosition());
+  }
+
+  private hideTopLayer() {
+    const el = this.popoverElement;
+    if (!el) return;
+    if (typeof el.hidePopover === "function") {
+      try {
+        if (el.matches(":popover-open")) el.hidePopover();
+      } catch {
+        /* already hidden or unsupported — nothing to do */
+      }
+    }
+    el.style.position = "";
+    el.style.top = "";
+    el.style.left = "";
+  }
+
+  private onReposition = () => {
+    if (this.open) this.updatePopoverPosition();
+  };
+
+  private updatePopoverPosition = () => {
+    const panel = this.popoverElement;
+    const anchor = this.triggerButton;
+    if (!panel || !anchor || !this.open) return;
+
+    const t = anchor.getBoundingClientRect();
+    const c = panel.getBoundingClientRect();
+
+    // Below the trigger; flip above when there's no room, clamp to the
+    // viewport with an 8px margin on every edge.
+    let top = t.bottom + 4;
+    if (top + c.height > window.innerHeight - 8) {
+      top = Math.max(8, t.top - c.height - 4);
+    }
+    let left = t.left;
+    if (left + c.width > window.innerWidth - 8) {
+      left = window.innerWidth - c.width - 8;
+    }
+    left = Math.max(8, left);
+
+    // Without top-layer support a transformed ancestor may be the containing
+    // block for position:fixed, shifting the panel away from the viewport
+    // coordinates computed above. Apply, re-measure, and cancel the offset.
+    panel.style.position = "fixed";
+    panel.style.top = `${top}px`;
+    panel.style.left = `${left}px`;
+    const applied = panel.getBoundingClientRect();
+    top -= applied.top - top;
+    left -= applied.left - left;
+    panel.style.top = `${top}px`;
+    panel.style.left = `${left}px`;
+  };
+
+  /** Focus the roving day cell (selected day, else today, else first). */
+  private focusPanelSelection() {
+    const target =
+      this.calendarGrid?.querySelector<HTMLButtonElement>(
+        '.day-button[tabindex="0"]:not(:disabled)'
+      ) ??
+      this.calendarGrid?.querySelector<HTMLButtonElement>(
+        ".day-button:not(:disabled)"
+      );
+    target?.focus();
   }
 
   private parseISODate(iso: string): Date | null {
@@ -665,6 +894,26 @@ export class RelDatePicker extends LitElement {
     return formatter.format(new Date(this.viewYear, this.viewMonth, 1));
   }
 
+  private dayLabelFormatter: Intl.DateTimeFormat | null = null;
+  private dayLabelLocale = "";
+
+  private formatDayLabel(date: Date): string {
+    if (!this.dayLabelFormatter || this.dayLabelLocale !== this.locale) {
+      this.dayLabelLocale = this.locale;
+      this.dayLabelFormatter = new Intl.DateTimeFormat(this.locale, {
+        weekday: "long",
+        month: "long",
+        day: "numeric",
+        year: "numeric",
+      });
+    }
+    return this.dayLabelFormatter.format(date);
+  }
+
+  private announceMonth() {
+    announce(`${this.getMonthName()} ${this.viewYear}`);
+  }
+
   private getMonthsList(): { value: number; label: string }[] {
     const months = [];
     for (let i = 0; i < 12; i++) {
@@ -709,11 +958,11 @@ export class RelDatePicker extends LitElement {
     );
   }
 
-  private closeCalendarPopover() {
+  private closeCalendarPopover(refocus = true) {
     this.open = false;
     this.monthDropdownOpen = false;
     this.yearDropdownOpen = false;
-    this.triggerButton?.focus();
+    if (refocus) this.triggerInput?.focus();
     this.dispatchEvent(
       new CustomEvent("rel-open-change", {
         detail: { open: false },
@@ -730,6 +979,7 @@ export class RelDatePicker extends LitElement {
     } else {
       this.viewMonth--;
     }
+    this.announceMonth();
   }
 
   private nextMonth() {
@@ -739,33 +989,40 @@ export class RelDatePicker extends LitElement {
     } else {
       this.viewMonth++;
     }
+    this.announceMonth();
   }
 
   private selectDay(day: CalendarDay) {
     if (day.isDisabled || this.disabled || this.readonly) return;
+    this.commitDate(day.date);
+    if (this.closeOnSelect) {
+      this.closeCalendarPopover();
+    }
+  }
 
-    const newValue = this.formatISODate(day.date);
+  /** Commit a date: set value, reset typed text/error, fire rel-change. */
+  private commitDate(date: Date) {
+    const newValue = this.formatISODate(date);
     this.value = newValue;
-
+    this.inputText = null;
+    this.inputError = null;
     this.dispatchEvent(
       new CustomEvent("rel-change", {
         detail: {
           value: newValue,
-          date: new Date(day.date),
+          date: new Date(date),
         },
         bubbles: true,
         composed: true,
       })
     );
-
-    if (this.closeOnSelect) {
-      this.closeCalendarPopover();
-    }
   }
 
   private clearValue(e: Event) {
     e.stopPropagation();
     this.value = null;
+    this.inputText = null;
+    this.inputError = null;
 
     this.dispatchEvent(
       new CustomEvent("rel-change", {
@@ -779,15 +1036,148 @@ export class RelDatePicker extends LitElement {
     );
   }
 
-  private handleTriggerKeydown(e: KeyboardEvent) {
-    if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+  // ── Typed keyboard entry ──
+
+  /** Ambiguous "a/b" day/month order: display format wins, then locale. */
+  private get dayFirst(): boolean {
+    if (this.displayFormat) {
+      const fromPattern = isDayFirstPattern(this.displayFormat);
+      if (fromPattern !== null) return fromPattern;
+    }
+    return isDayFirstLocale(this.locale);
+  }
+
+  /**
+   * Parse and commit the typed text (Enter / blur). Invalid or out-of-range
+   * text keeps the field in an error state with the text preserved for
+   * correction; the committed value is untouched (Escape reverts the text).
+   */
+  private commitTypedValue() {
+    if (this.inputText === null) return; // nothing typed since last commit
+    const text = this.inputText.trim();
+
+    if (!text) {
+      // Field cleared by keyboard — behaves like the clear button.
+      this.inputText = null;
+      this.inputError = null;
+      if (this.value !== null) {
+        this.value = null;
+        this.dispatchEvent(
+          new CustomEvent("rel-change", {
+            detail: { value: null, date: null },
+            bubbles: true,
+            composed: true,
+          })
+        );
+      }
+      if (this.open) this.closeCalendarPopover();
+      return;
+    }
+
+    const parsed = parseDateInput(text, {
+      referenceDate: new Date(),
+      dayFirst: this.dayFirst,
+      locale: this.locale,
+    });
+    if (!parsed) {
+      this.inputError = "Invalid date";
+      return;
+    }
+    // Midnight-anchored like the calendar grid, so min/max compares match.
+    const date = new Date(parsed.getFullYear(), parsed.getMonth(), parsed.getDate());
+    if (this.isDateDisabledInternal(date)) {
+      this.inputError = "Date not available";
+      return;
+    }
+
+    this.commitDate(date);
+    if (this.open) this.closeCalendarPopover();
+  }
+
+  /** Today ± offset days, committed directly (T shortcuts / popover chips). */
+  private applyDayOffsetShortcut(offsetDays: number) {
+    const now = new Date();
+    const date = new Date(now.getFullYear(), now.getMonth(), now.getDate() + offsetDays);
+    if (this.isDateDisabledInternal(date)) {
+      this.inputError = "Date not available";
+      return;
+    }
+    this.commitDate(date);
+    if (this.open) this.closeCalendarPopover();
+  }
+
+  private handleInputInput(e: Event) {
+    this.inputText = (e.target as HTMLInputElement).value;
+    if (this.inputError) this.inputError = null;
+  }
+
+  private handleInputKeydown(e: KeyboardEvent) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      if (this.inputText === null) {
+        // Nothing typed — Enter opens the popover (previous trigger behavior).
+        if (!this.open) this.toggleCalendarPopover();
+      } else {
+        this.commitTypedValue();
+      }
+      return;
+    }
+    if (e.key === "ArrowDown") {
       e.preventDefault();
       if (!this.open) {
         this.toggleCalendarPopover();
+      } else {
+        this.focusPanelSelection();
       }
+      return;
+    }
+    if (e.key === "Escape" && this.inputText !== null) {
+      // Revert the typed text; the document listener closes the popover.
+      this.inputText = null;
+      this.inputError = null;
     }
   }
 
+  /** Clicking anywhere on the field opens the popover, keeping focus typed-in. */
+  private handleFieldClick() {
+    if (this.open || this.disabled || this.readonly) return;
+    this.focusPanelOnOpen = false;
+    this.toggleCalendarPopover();
+  }
+
+  /** The calendar icon toggles the popover with the previous focus behavior. */
+  private handleIconClick(e: Event) {
+    e.stopPropagation();
+    if (this.open) {
+      this.closeCalendarPopover();
+    } else {
+      this.toggleCalendarPopover();
+    }
+  }
+
+  /** Commit typed text when focus leaves the component entirely. */
+  private handleInputBlur = (e: FocusEvent) => {
+    this.dispatchEvent(new CustomEvent("rel-blur", { bubbles: true, composed: true }));
+    const related = e.relatedTarget as Node | null;
+    if (related && (this.renderRoot.contains(related) || this.contains(related))) {
+      return; // focus moved into the panel/icons — their own handlers commit
+    }
+    this.commitTypedValue();
+  };
+
+  /** T inside the panel (grid/header focus) applies Today directly. */
+  private handlePanelKeydown = (e: KeyboardEvent) => {
+    if (
+      (e.key === "t" || e.key === "T") &&
+      !e.ctrlKey &&
+      !e.metaKey &&
+      !e.altKey
+    ) {
+      e.preventDefault();
+      this.applyDayOffsetShortcut(0);
+    }
+  };
+
   private handleDayKeydown(e: KeyboardEvent, day: CalendarDay, index: number) {
     const days = this.getCalendarDays();
     let targetIndex = index;
@@ -821,6 +1211,7 @@ export class RelDatePicker extends LitElement {
         e.preventDefault();
         if (e.shiftKey) {
           this.viewYear--;
+          this.announceMonth();
         } else {
           this.previousMonth();
         }
@@ -829,6 +1220,7 @@ export class RelDatePicker extends LitElement {
         e.preventDefault();
         if (e.shiftKey) {
           this.viewYear++;
+          this.announceMonth();
         } else {
           this.nextMonth();
         }
@@ -865,24 +1257,127 @@ export class RelDatePicker extends LitElement {
     e.stopPropagation();
     this.monthDropdownOpen = !this.monthDropdownOpen;
     this.yearDropdownOpen = false;
+    if (this.monthDropdownOpen) this.focusOpenDropdownSelection();
   }
 
   private toggleYearDropdown(e: Event) {
     e.stopPropagation();
     this.yearDropdownOpen = !this.yearDropdownOpen;
     this.monthDropdownOpen = false;
+    if (this.yearDropdownOpen) this.focusOpenDropdownSelection();
   }
 
+  private handleDropdownTriggerKeydown(e: KeyboardEvent, kind: "month" | "year") {
+    if (e.key !== "ArrowDown") return;
+    e.preventDefault();
+    e.stopPropagation();
+    this.monthDropdownOpen = kind === "month";
+    this.yearDropdownOpen = kind === "year";
+    this.focusOpenDropdownSelection();
+  }
+
+  private async focusOpenDropdownSelection() {
+    await this.updateComplete;
+    const menu = this.renderRoot.querySelector<HTMLElement>(".dropdown-menu.open");
+    if (!menu) return;
+    const target =
+      menu.querySelector<HTMLElement>(".dropdown-item.selected") ??
+      menu.querySelector<HTMLElement>(".dropdown-item");
+    target?.focus();
+    target?.scrollIntoView({ block: "nearest" });
+  }
+
+  private handleDropdownKeydown = (e: KeyboardEvent) => {
+    const menu = e.currentTarget as HTMLElement;
+    const items = Array.from(
+      menu.querySelectorAll<HTMLElement>(".dropdown-item")
+    );
+    if (items.length === 0) return;
+
+    if (e.key === "Escape") {
+      // Close only the dropdown, not the whole calendar popover behind it.
+      e.preventDefault();
+      e.stopPropagation();
+      const trigger = menu
+        .closest(".dropdown-container")
+        ?.querySelector<HTMLElement>(".dropdown-trigger");
+      this.monthDropdownOpen = false;
+      this.yearDropdownOpen = false;
+      trigger?.focus();
+      return;
+    }
+
+    if (e.key === "Tab") {
+      this.monthDropdownOpen = false;
+      this.yearDropdownOpen = false;
+      return;
+    }
+
+    const idx = items.indexOf(getDeepActiveElement() as HTMLElement);
+    let target: number;
+    switch (e.key) {
+      case "ArrowDown":
+        target = Math.min(items.length - 1, idx + 1);
+        break;
+      case "ArrowUp":
+        target = Math.max(0, idx - 1);
+        break;
+      case "Home":
+        target = 0;
+        break;
+      case "End":
+        target = items.length - 1;
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    items[target]?.focus();
+    items[target]?.scrollIntoView({ block: "nearest" });
+  };
+
   private selectMonth(month: number, e: Event) {
     e.stopPropagation();
+    const trigger = (e.target as HTMLElement)
+      .closest(".dropdown-container")
+      ?.querySelector<HTMLElement>(".dropdown-trigger");
     this.viewMonth = month;
     this.monthDropdownOpen = false;
+    this.announceMonth();
+    // The focused item just went display:none — keep keyboard users anchored.
+    this.updateComplete.then(() => trigger?.focus());
   }
 
   private selectYear(year: number, e: Event) {
     e.stopPropagation();
+    const trigger = (e.target as HTMLElement)
+      .closest(".dropdown-container")
+      ?.querySelector<HTMLElement>(".dropdown-trigger");
     this.viewYear = year;
     this.yearDropdownOpen = false;
+    this.announceMonth();
+    this.updateComplete.then(() => trigger?.focus());
+  }
+
+  /**
+   * Index of the single grid cell carrying tabindex="0". The old expression
+   * (`isSelected || (index === 0 && !value)`) left the grid with ZERO tab
+   * stops once the user arrowed around without a selection.
+   */
+  private getRovingIndex(days: CalendarDay[]): number {
+    const candidates = [
+      this.focusedDate
+        ? days.findIndex(
+            (d) => d.isCurrentMonth && this.isSameDay(d.date, this.focusedDate!)
+          )
+        : -1,
+      days.findIndex((d) => d.isSelected),
+      days.findIndex((d) => d.isCurrentMonth && d.isToday),
+      days.findIndex((d) => d.isCurrentMonth && !d.isDisabled),
+    ];
+    const found = candidates.find((i) => i >= 0);
+    return found ?? 0;
   }
 
   render() {
@@ -890,10 +1385,18 @@ export class RelDatePicker extends LitElement {
     const weekdayLabels = this.getWeekdayLabels();
     const months = this.getMonthsList();
     const years = this.getYearsList();
+    const rovingIndex = this.getRovingIndex(days);
+    const weeks: CalendarDay[][] = [];
+    for (let i = 0; i < days.length; i += 7) {
+      weeks.push(days.slice(i, i + 7));
+    }
 
-    const isError = this.error;
-    const belowText = isError && this.errorMessage ? this.errorMessage : this.helperText;
+    const isError = this.error || this.inputError !== null;
+    const belowText = isError
+      ? this.errorMessage ?? this.inputError ?? this.helperText
+      : this.helperText;
     const describedById = belowText ? "date-picker-desc" : undefined;
+    const displayText = this.value ? this.formatDisplayDate(this.value) : "";
     const wrapperClasses = [
       "date-picker-wrapper",
       this.size,
@@ -917,24 +1420,35 @@ export class RelDatePicker extends LitElement {
           ? html`<input type="hidden" name=${this.name} .value=${this.value ?? ""} />`
           : nothing}
 
-        <button
+        <div
+          part="trigger"
           class="trigger-button ${isError ? "error" : ""}"
-          type="button"
-          ?disabled=${this.disabled}
-          @click=${this.toggleCalendarPopover}
-          @keydown=${this.handleTriggerKeydown}
-          aria-label=${this.label || "Select date"}
-          aria-haspopup="dialog"
-          aria-expanded=${this.open}
-          aria-required=${this.required}
-          aria-invalid=${isError}
-          aria-readonly=${this.readonly}
-          aria-describedby=${describedById ?? nothing}
-          aria-labelledby=${this.label ? "date-picker-label" : nothing}
+          @click=${this.handleFieldClick}
         >
-          <span class="trigger-content ${this.value ? "" : "placeholder"}">
-            ${this.value ? this.formatDisplayDate(this.value) : this.placeholder}
-          </span>
+          <input
+            part="value"
+            class="trigger-input"
+            type="text"
+            .value=${live(this.inputText ?? displayText)}
+            placeholder=${this.placeholder}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            autocomplete="off"
+            spellcheck="false"
+            enterkeyhint="done"
+            @input=${this.handleInputInput}
+            @keydown=${this.handleInputKeydown}
+            @blur=${this.handleInputBlur}
+            role="combobox"
+            aria-label=${this.label || "Select date"}
+            aria-haspopup="dialog"
+            aria-expanded=${this.open}
+            aria-controls="date-picker-panel"
+            aria-required=${this.required}
+            aria-invalid=${isError}
+            aria-describedby=${describedById ?? nothing}
+            aria-labelledby=${this.label ? "date-picker-label" : nothing}
+          />
           <span class="trigger-icons">
             ${this.clearable && this.value
               ? html`
@@ -955,15 +1469,57 @@ export class RelDatePicker extends LitElement {
                   </button>
                 `
               : nothing}
-            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-              <path
-                d="M4 2h1V1h2v1h2V1h2v1h1a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8 3H4v7h8V5z"
-              />
-            </svg>
+            <button
+              class="icon-button"
+              type="button"
+              aria-label="Open calendar"
+              aria-expanded=${this.open}
+              ?disabled=${this.disabled}
+              @click=${this.handleIconClick}
+            >
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+                <path
+                  d="M4 2h1V1h2v1h2V1h2v1h1a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8 3H4v7h8V5z"
+                />
+              </svg>
+            </button>
           </span>
-        </button>
+        </div>
 
-        <div class="popover ${this.open ? "open" : ""}" role="dialog" aria-label="Choose date">
+        <div
+          id="date-picker-panel"
+          class="popover ${this.open ? "open" : ""}"
+          popover="manual"
+          role="dialog"
+          aria-label="Choose date"
+          @keydown=${this.handlePanelKeydown}
+        >
+          <div part="shortcuts" class="shortcut-row">
+            <button
+              class="shortcut-chip"
+              type="button"
+              title="Type T in the field for today"
+              @click=${() => this.applyDayOffsetShortcut(0)}
+            >
+              <kbd aria-hidden="true">T</kbd><span>Today</span>
+            </button>
+            <button
+              class="shortcut-chip"
+              type="button"
+              title="Type T+1 in the field for tomorrow"
+              @click=${() => this.applyDayOffsetShortcut(1)}
+            >
+              <kbd aria-hidden="true">T+1</kbd><span>Tomorrow</span>
+            </button>
+            <button
+              class="shortcut-chip"
+              type="button"
+              title="Type T-1 in the field for yesterday"
+              @click=${() => this.applyDayOffsetShortcut(-1)}
+            >
+              <kbd aria-hidden="true">T-1</kbd><span>Yesterday</span>
+            </button>
+          </div>
           <div class="calendar-header">
             <button
               class="nav-button"
@@ -988,22 +1544,31 @@ export class RelDatePicker extends LitElement {
                 class="dropdown-trigger"
                 type="button"
                 @click=${this.toggleMonthDropdown}
+                @keydown=${(e: KeyboardEvent) => this.handleDropdownTriggerKeydown(e, "month")}
                 aria-label="Select month"
+                aria-haspopup="listbox"
                 aria-expanded=${this.monthDropdownOpen}
               >
                 ${this.getMonthName()}
               </button>
-              <div class="dropdown-menu ${this.monthDropdownOpen ? "open" : ""}">
+              <div
+                class="dropdown-menu ${this.monthDropdownOpen ? "open" : ""}"
+                role="listbox"
+                aria-label="Month"
+                @keydown=${this.handleDropdownKeydown}
+              >
                 ${months.map(
                   (m) => html`
-                    <div
+                    <button
                       class="dropdown-item ${m.value === this.viewMonth ? "selected" : ""}"
+                      type="button"
+                      tabindex="-1"
                       @click=${(e: Event) => this.selectMonth(m.value, e)}
                       role="option"
                       aria-selected=${m.value === this.viewMonth}
                     >
                       ${m.label}
-                    </div>
+                    </button>
                   `
                 )}
               </div>
@@ -1014,22 +1579,31 @@ export class RelDatePicker extends LitElement {
                 class="dropdown-trigger"
                 type="button"
                 @click=${this.toggleYearDropdown}
+                @keydown=${(e: KeyboardEvent) => this.handleDropdownTriggerKeydown(e, "year")}
                 aria-label="Select year"
+                aria-haspopup="listbox"
                 aria-expanded=${this.yearDropdownOpen}
               >
                 ${this.viewYear}
               </button>
-              <div class="dropdown-menu ${this.yearDropdownOpen ? "open" : ""}">
+              <div
+                class="dropdown-menu ${this.yearDropdownOpen ? "open" : ""}"
+                role="listbox"
+                aria-label="Year"
+                @keydown=${this.handleDropdownKeydown}
+              >
                 ${years.map(
                   (y) => html`
-                    <div
+                    <button
                       class="dropdown-item ${y === this.viewYear ? "selected" : ""}"
+                      type="button"
+                      tabindex="-1"
                       @click=${(e: Event) => this.selectYear(y, e)}
                       role="option"
                       aria-selected=${y === this.viewYear}
                     >
                       ${y}
-                    </div>
+                    </button>
                   `
                 )}
               </div>
@@ -1060,34 +1634,42 @@ export class RelDatePicker extends LitElement {
             )}
           </div>
 
-          <div class="calendar-grid" role="grid">
-            ${days.map(
-              (day, index) => html`
-                <button
-                  class="day-button ${day.isSelected ? "selected" : ""} ${day.isToday
-                    ? "today"
-                    : ""} ${!day.isCurrentMonth ? "other-month" : ""}"
-                  role="gridcell"
-                  type="button"
-                  aria-label="${this.formatISODate(day.date)}"
-                  aria-selected="${day.isSelected}"
-                  ?disabled=${day.isDisabled}
-                  @click=${() => this.selectDay(day)}
-                  @keydown=${(e: KeyboardEvent) => this.handleDayKeydown(e, day, index)}
-                  tabindex="${day.isSelected || (index === 0 && !this.value) ? 0 : -1}"
-                >
-                  ${day.day}
-                </button>
+          <div class="calendar-grid" role="grid" aria-label="${this.getMonthName()} ${this.viewYear}">
+            ${weeks.map(
+              (week, weekIndex) => html`
+                <div class="calendar-week" role="row">
+                  ${week.map((day, dayIndex) => {
+                    const index = weekIndex * 7 + dayIndex;
+                    return html`
+                      <button
+                        class="day-button ${day.isSelected ? "selected" : ""} ${day.isToday
+                          ? "today"
+                          : ""} ${!day.isCurrentMonth ? "other-month" : ""}"
+                        role="gridcell"
+                        type="button"
+                        aria-label="${this.formatDayLabel(day.date)}"
+                        aria-selected="${day.isSelected}"
+                        aria-current=${day.isToday ? "date" : nothing}
+                        ?disabled=${day.isDisabled}
+                        @click=${() => this.selectDay(day)}
+                        @keydown=${(e: KeyboardEvent) => this.handleDayKeydown(e, day, index)}
+                        tabindex="${index === rovingIndex ? 0 : -1}"
+                      >
+                        ${day.day}
+                      </button>
+                    `;
+                  })}
+                </div>
               `
             )}
           </div>
         </div>
 
-        ${belowText
-          ? html`<div class="date-picker-support ${isError ? "error" : ""}" id=${describedById}>
-              ${belowText}
-            </div>`
-          : nothing}
+        <div
+          class="date-picker-support ${isError ? "error" : ""} ${belowText ? "" : "empty"}"
+          id="date-picker-desc"
+          aria-live="polite"
+        >${belowText ?? nothing}</div>
       </div>
     `;
   }