@reliability-design/web 1.4.6 → 1.4.7

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

@@ -1,1676 +0,0 @@
-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;
-  day: number;
-  isCurrentMonth: boolean;
-  isToday: boolean;
-  isSelected: boolean;
-  isDisabled: boolean;
-}
-  
-@customElement("rel-date-picker")
-export class RelDatePicker extends LitElement {
-  @property({ type: String, reflect: true }) value: string | null = null;
-  @property({ type: String }) placeholder = "Select date";
-  @property({ type: String }) label: string | null = null;
-  @property({ type: Boolean, reflect: true }) disabled = false;
-  @property({ type: Boolean }) required = false;
-  @property({ type: Boolean, reflect: true }) readonly = false;
-
-  // Date bounds. minDate/maxDate are the standard names; min/max are kept as
-  // deprecated aliases (minDate/maxDate win when both are set).
-  @property({ type: String, attribute: "min-date" }) minDate: string | null = null;
-  @property({ type: String, attribute: "max-date" }) maxDate: string | null = null;
-  /** @deprecated use minDate */
-  @property({ type: String }) min: string | null = null;
-  /** @deprecated use maxDate */
-  @property({ type: String }) max: string | null = null;
-
-  @property({ type: String, attribute: "week-start" }) weekStart: "sun" | "mon" = "sun";
-  @property({ type: String }) locale = "en-US";
-
-  // ── Display formatting of the SELECTED value ──
-  // `displayFormat` is a token pattern (YYYY-MM-DD, MM/DD/YYYY, DD/MM/YYYY, …);
-  // see date-format.ts for the token table. `formatDate` is a full callback and
-  // takes precedence. When neither is set the locale long date is used, so
-  // existing consumers are unaffected. Neither affects parsing, the popup
-  // calendar, or accessibility — only the visible trigger text.
-  @property({ type: String, attribute: "display-format" }) displayFormat: string | null = null;
-  /**
-   * Full control over the selected-value display; wins over `displayFormat`.
-   * Reactive (attribute:false) so assigning it after render re-renders the
-   * trigger — frameworks set callbacks as properties post-creation.
-   */
-  @property({ attribute: false }) formatDate?: (date: Date) => string;
-  @property({ type: Boolean, reflect: true }) open = false;
-  @property({ type: Boolean, attribute: "close-on-select" }) closeOnSelect = true;
-  @property({ type: Boolean }) clearable = false;
-
-  // ── Standardized input API (mirrors rel-textfield) ──
-  @property({ type: Boolean }) error = false;
-  @property({ type: String, attribute: "error-message" }) errorMessage?: string;
-  @property({ type: String, attribute: "helper-text" }) helperText?: string;
-  @property({ type: String }) name?: string;
-  @property({ type: String }) size: "small" | "medium" | "large" = "medium";
-  @property({ type: String, reflect: true }) variant: "outlined" = "outlined";
-  @property({ type: Boolean, reflect: true }) fullWidth = false;
-
-  // Custom disabled predicate (not settable via attribute)
-  public isDateDisabled?: (date: Date) => boolean;
-
-  // minDate/maxDate supersede the deprecated min/max aliases
-  private get minBound(): string | null {
-    return this.minDate ?? this.min;
-  }
-  private get maxBound(): string | null {
-    return this.maxDate ?? this.max;
-  }
-
-  @state() private viewYear: number = new Date().getFullYear();
-  @state() private viewMonth: number = new Date().getMonth();
-  @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;
-
-  /**
-   * 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;
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: block;
-      font-family: var(--rel-fonts-font-family);
-      position: relative;
-    }
-
-    /* Intrinsic width by default; set fullWidth to fill the parent. */
-    :host(:not([fullwidth])) {
-      display: inline-block;
-      width: auto;
-    }
-
-    :host([disabled]) {
-      opacity: 0.6;
-      cursor: not-allowed;
-    }
-
-    :host([disabled]) * {
-      pointer-events: none;
-    }
-
-    :host([readonly]) .trigger-button {
-      cursor: default;
-    }
-
-    .date-picker-wrapper {
-      display: flex;
-      flex-direction: column;
-      gap: var(--rel-spacing-xs);
-    }
-
-    .label {
-      color: var(--rel-text-label);
-
-      font-family: var(--rel-body-sm-medium-font-family);
-
-      font-weight: var(--rel-body-sm-medium-font-weight);
-
-      font-size: var(--rel-body-sm-medium-font-size);
-
-      line-height: var(--rel-body-sm-medium-line-height);
-
-      letter-spacing: var(--rel-body-sm-medium-letter-spacing);
-
-    }
-
-    .required-mark {
-      color: var(--rel-text-danger);
-      margin-left: 2px;
-    }
-
-    /* Support text (helperText / errorMessage) */
-    .date-picker-support {
-      color: var(--rel-text-placeholder);
-
-      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);
-
-    }
-
-    .date-picker-support.error {
-      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: min(200px, 100%);
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: var(--rel-spacing-xs);
-      padding: var(--rel-spacing-sm) var(--rel-spacing-md);
-      background: var(--rel-bg-surface);
-      border: 1px solid var(--rel-border-default);
-      border-radius: var(--rel-border-radius-sm);
-      color: var(--rel-text-default);
-      cursor: pointer;
-      transition: all 0.15s ease;
-      text-align: left;
-      font-family: var(--rel-body-md-regular-font-family);
-      font-weight: var(--rel-body-md-regular-font-weight);
-      font-size: var(--rel-body-md-regular-font-size);
-      line-height: var(--rel-body-md-regular-line-height);
-      letter-spacing: var(--rel-body-md-regular-letter-spacing);
-    }
-
-    :host(:not([disabled])) .trigger-button:hover {
-      border-color: var(--rel-border-strong);
-    }
-
-    .trigger-button:focus-within {
-      outline: 2px solid var(--rel-border-focus);
-      outline-offset: 2px;
-      border-color: var(--rel-border-focus);
-    }
-
-    :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,
-    :host(:not([disabled])) .trigger-button.error:hover {
-      border-color: var(--rel-border-danger);
-    }
-
-    .trigger-button.error:focus-within {
-      outline-color: var(--rel-border-danger);
-      border-color: var(--rel-border-danger);
-    }
-
-    /* Size variants (medium is the base .trigger-button style) */
-    .date-picker-wrapper.small .trigger-button {
-      padding: var(--rel-spacing-xs) var(--rel-spacing-sm);
-      font-family: var(--rel-body-sm-regular-font-family);
-      font-weight: var(--rel-body-sm-regular-font-weight);
-      font-size: var(--rel-body-sm-regular-font-size);
-      line-height: var(--rel-body-sm-regular-line-height);
-      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
-    }
-
-    .date-picker-wrapper.large .trigger-button {
-      padding: var(--rel-spacing-md) var(--rel-spacing-md);
-      font-family: var(--rel-body-lg-regular-font-family);
-      font-weight: var(--rel-body-lg-regular-font-weight);
-      font-size: var(--rel-body-lg-regular-font-size);
-      line-height: var(--rel-body-lg-regular-line-height);
-      letter-spacing: var(--rel-body-lg-regular-letter-spacing);
-    }
-
-    .trigger-icons {
-      display: flex;
-      align-items: center;
-      gap: var(--rel-spacing-2xs);
-    }
-
-    .icon-button {
-      background: none;
-      border: none;
-      padding: var(--rel-spacing-3xs);
-      cursor: pointer;
-      color: var(--rel-text-placeholder);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: var(--rel-border-radius-xs);
-      transition: all 0.15s ease;
-    }
-
-    .icon-button:hover {
-      background: var(--rel-bg-surface-elevated);
-      color: var(--rel-text-default);
-    }
-
-    .icon-button svg {
-      width: 16px;
-      height: 16px;
-    }
-
-    .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: 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);
-      /* 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;
-    }
-
-    .popover.open {
-      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;
-      justify-content: space-between;
-      margin-bottom: var(--rel-spacing-md);
-      gap: var(--rel-spacing-xs);
-    }
-
-    .nav-button {
-      background: transparent;
-      border: none;
-      width: 32px;
-      height: 32px;
-      border-radius: var(--rel-border-radius-sm);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      color: var(--rel-text-default);
-      transition: background-color 0.15s ease;
-    }
-
-    .nav-button:hover {
-      background: var(--rel-bg-surface-elevated);
-    }
-
-    .nav-button:focus-visible {
-      outline: 2px solid var(--rel-border-focus);
-      outline-offset: 2px;
-    }
-
-    .dropdown-container {
-      position: relative;
-      flex: 1;
-    }
-
-    .dropdown-trigger {
-      width: 100%;
-      padding: var(--rel-spacing-xs) var(--rel-spacing-sm);
-      background: var(--rel-bg-surface);
-      border: 1px solid var(--rel-border-default);
-      border-radius: var(--rel-border-radius-sm);
-      color: var(--rel-text-label);
-      cursor: pointer;
-      text-align: center;
-      transition: all 0.15s ease;
-      font-family: var(--rel-body-sm-medium-font-family);
-      font-weight: var(--rel-body-sm-medium-font-weight);
-      font-size: var(--rel-body-sm-medium-font-size);
-      line-height: var(--rel-body-sm-medium-line-height);
-      letter-spacing: var(--rel-body-sm-medium-letter-spacing);
-    }
-
-    .dropdown-trigger:hover {
-      background: var(--rel-bg-surface-elevated);
-    }
-
-    .dropdown-trigger:focus-visible {
-      outline: 2px solid var(--rel-border-focus);
-      outline-offset: 2px;
-    }
-
-    .dropdown-menu {
-      position: absolute;
-      top: calc(100% + 4px);
-      left: 0;
-      right: 0;
-      z-index: 10;
-      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-200);
-      max-height: 200px;
-      overflow-y: auto;
-      display: none;
-    }
-
-    .dropdown-menu.open {
-      display: block;
-    }
-
-    .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);
-      transition: background-color 0.15s ease;
-      font-family: var(--rel-body-sm-regular-font-family);
-      font-weight: var(--rel-body-sm-regular-font-weight);
-      font-size: var(--rel-body-sm-regular-font-size);
-      line-height: var(--rel-body-sm-regular-line-height);
-      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);
-    }
-
-    .dropdown-item.selected {
-      background: var(--rel-bg-info-light);
-      color: var(--rel-text-info);
-      font-weight: var(--rel-body-md-semibold-font-weight);
-    }
-
-    .weekdays {
-      display: grid;
-      grid-template-columns: repeat(7, 1fr);
-      gap: var(--rel-spacing-3xs);
-      margin-bottom: var(--rel-spacing-xs);
-    }
-
-    .weekday {
-      text-align: center;
-      color: var(--rel-text-placeholder);
-      padding: var(--rel-spacing-xs);
-      text-transform: uppercase;
-      font-family: var(--rel-body-xs-semibold-font-family);
-      font-weight: var(--rel-body-xs-semibold-font-weight);
-      font-size: var(--rel-body-xs-semibold-font-size);
-      line-height: var(--rel-body-xs-semibold-line-height);
-      letter-spacing: var(--rel-body-xs-semibold-letter-spacing);
-    }
-
-    .calendar-grid {
-      display: grid;
-      grid-template-columns: repeat(7, 1fr);
-      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;
-      background: transparent;
-      border-radius: var(--rel-border-radius-sm);
-      color: var(--rel-text-default);
-      cursor: pointer;
-      position: relative;
-      transition: all 0.15s ease;
-      font-family: var(--rel-body-sm-medium-font-family);
-      font-weight: var(--rel-body-sm-medium-font-weight);
-      font-size: var(--rel-body-sm-medium-font-size);
-      line-height: var(--rel-body-sm-medium-line-height);
-      letter-spacing: var(--rel-body-sm-medium-letter-spacing);
-    }
-
-    .day-button:hover:not(:disabled):not(.selected) {
-      background: var(--rel-bg-surface-elevated);
-    }
-
-    .day-button:focus-visible {
-      outline: 2px solid var(--rel-border-focus);
-      outline-offset: -2px;
-      z-index: 1;
-    }
-
-    .day-button.today:not(.selected) {
-      border: 2px solid var(--rel-border-brand);
-    }
-
-    .day-button.selected {
-      background: var(--rel-action-brand-fill);
-      color: var(--rel-action-brand-label-icons-primary);
-      font-weight: var(--rel-body-md-semibold-font-weight);
-    }
-
-    .day-button.other-month {
-      color: var(--rel-text-placeholder);
-      opacity: 0.5;
-    }
-
-    .day-button:disabled {
-      color: var(--rel-text-disabled);
-      cursor: not-allowed;
-      opacity: 0.5;
-    }
-
-    .day-button:disabled:hover {
-      background: transparent;
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .trigger-button,
-      .icon-button,
-      .nav-button,
-      .dropdown-trigger,
-      .dropdown-item,
-      .day-button {
-        transition: none;
-      }
-    }
-  `;
-
-  connectedCallback() {
-    super.connectedCallback();
-    if (this.value) {
-      const date = this.parseISODate(this.value);
-      if (date) {
-        this.viewYear = date.getFullYear();
-        this.viewMonth = date.getMonth();
-      }
-    }
-
-    // Click outside handler
-    document.addEventListener("click", this.handleClickOutside);
-    document.addEventListener("keydown", this.handleEscapeKey);
-  }
-
-  disconnectedCallback() {
-    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) => {
-    if (!this.open) return;
-
-    const path = e.composedPath();
-    if (!path.includes(this)) {
-      // Don't refocus the field — the user clicked somewhere else on purpose.
-      this.closeCalendarPopover(false);
-    }
-  };
-
-  private handleEscapeKey = (e: KeyboardEvent) => {
-    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);
-    }
-  };
-
-  updated(changedProperties: Map<string, any>) {
-    if (changedProperties.has("value") && this.value) {
-      const date = this.parseISODate(this.value);
-      if (date) {
-        this.viewYear = date.getFullYear();
-        this.viewMonth = date.getMonth();
-      }
-    }
-
-    // `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 {
-    const match = iso.match(/^(\d{4})-(\d{2})-(\d{2})$/);
-    if (!match) return null;
-    const [, year, month, day] = match;
-    return new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
-  }
-
-  private formatISODate(date: Date): string {
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, "0");
-    const day = String(date.getDate()).padStart(2, "0");
-    return `${year}-${month}-${day}`;
-  }
-
-  private formatDisplayDate(iso: string): string {
-    const date = this.parseISODate(iso);
-    if (!date) return iso;
-
-    // 1) explicit callback wins (fall back on error so a bad callback can't
-    //    blank the field)
-    if (typeof this.formatDate === "function") {
-      try {
-        const out = this.formatDate(date);
-        if (typeof out === "string") return out;
-      } catch {
-        /* fall through to the default */
-      }
-    }
-    // 2) token pattern (e.g. "YYYY-MM-DD")
-    if (this.displayFormat) {
-      return formatDatePattern(date, this.displayFormat, this.locale);
-    }
-    // 3) backward-compatible locale long date
-    return new Intl.DateTimeFormat(this.locale, {
-      year: "numeric",
-      month: "long",
-      day: "numeric",
-    }).format(date);
-  }
-
-  private isSameDay(date1: Date, date2: Date): boolean {
-    return (
-      date1.getFullYear() === date2.getFullYear() &&
-      date1.getMonth() === date2.getMonth() &&
-      date1.getDate() === date2.getDate()
-    );
-  }
-
-  private isDateDisabledInternal(date: Date): boolean {
-    if (this.disabled) return true;
-
-    if (this.minBound) {
-      const minDate = this.parseISODate(this.minBound);
-      if (minDate && date < minDate) return true;
-    }
-
-    if (this.maxBound) {
-      const maxDate = this.parseISODate(this.maxBound);
-      if (maxDate && date > maxDate) return true;
-    }
-
-    if (this.isDateDisabled && this.isDateDisabled(date)) {
-      return true;
-    }
-
-    return false;
-  }
-
-  private getCalendarDays(): CalendarDay[] {
-    const days: CalendarDay[] = [];
-    const firstDayOfMonth = new Date(this.viewYear, this.viewMonth, 1);
-    const lastDayOfMonth = new Date(this.viewYear, this.viewMonth + 1, 0);
-    const today = new Date();
-    const selectedDate = this.value ? this.parseISODate(this.value) : null;
-
-    let startDay = firstDayOfMonth.getDay();
-    if (this.weekStart === "mon") {
-      startDay = startDay === 0 ? 6 : startDay - 1;
-    }
-
-    // Leading days from previous month
-    for (let i = startDay - 1; i >= 0; i--) {
-      const date = new Date(this.viewYear, this.viewMonth, -i);
-      days.push({
-        date,
-        day: date.getDate(),
-        isCurrentMonth: false,
-        isToday: this.isSameDay(date, today),
-        isSelected: selectedDate ? this.isSameDay(date, selectedDate) : false,
-        isDisabled: true, // Leading days not selectable
-      });
-    }
-
-    // Current month days
-    for (let day = 1; day <= lastDayOfMonth.getDate(); day++) {
-      const date = new Date(this.viewYear, this.viewMonth, day);
-      days.push({
-        date,
-        day,
-        isCurrentMonth: true,
-        isToday: this.isSameDay(date, today),
-        isSelected: selectedDate ? this.isSameDay(date, selectedDate) : false,
-        isDisabled: this.isDateDisabledInternal(date),
-      });
-    }
-
-    // Trailing days from next month
-    const remainingCells = 42 - days.length; // 6 weeks max
-    for (let i = 1; i <= remainingCells; i++) {
-      const date = new Date(this.viewYear, this.viewMonth + 1, i);
-      days.push({
-        date,
-        day: date.getDate(),
-        isCurrentMonth: false,
-        isToday: this.isSameDay(date, today),
-        isSelected: selectedDate ? this.isSameDay(date, selectedDate) : false,
-        isDisabled: true, // Trailing days not selectable
-      });
-    }
-
-    return days;
-  }
-
-  private getWeekdayLabels(): string[] {
-    const formatter = new Intl.DateTimeFormat(this.locale, { weekday: "short" });
-    const days = [];
-    const baseDate = new Date(2024, 0, 7); // Sunday, Jan 7, 2024
-
-    for (let i = 0; i < 7; i++) {
-      const offset = this.weekStart === "mon" ? i + 1 : i;
-      const date = new Date(baseDate);
-      date.setDate(baseDate.getDate() + offset);
-      days.push(formatter.format(date).substring(0, 2));
-    }
-
-    return days;
-  }
-
-  private getMonthName(): string {
-    const formatter = new Intl.DateTimeFormat(this.locale, { month: "long" });
-    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++) {
-      const formatter = new Intl.DateTimeFormat(this.locale, { month: "long" });
-      const label = formatter.format(new Date(2024, i, 1));
-      months.push({ value: i, label });
-    }
-    return months;
-  }
-
-  private getYearsList(): number[] {
-    const currentYear = new Date().getFullYear();
-    let startYear = currentYear - 100;
-    let endYear = currentYear + 10;
-
-    if (this.minBound) {
-      const minDate = this.parseISODate(this.minBound);
-      if (minDate) startYear = Math.max(startYear, minDate.getFullYear() - 5);
-    }
-
-    if (this.maxBound) {
-      const maxDate = this.parseISODate(this.maxBound);
-      if (maxDate) endYear = Math.min(endYear, maxDate.getFullYear() + 5);
-    }
-
-    const years = [];
-    for (let y = startYear; y <= endYear; y++) {
-      years.push(y);
-    }
-    return years.reverse(); // Most recent first
-  }
-
-  private toggleCalendarPopover() {
-    if (this.disabled || this.readonly) return;
-    this.open = !this.open;
-    this.dispatchEvent(
-      new CustomEvent("rel-open-change", {
-        detail: { open: this.open },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  private closeCalendarPopover(refocus = true) {
-    this.open = false;
-    this.monthDropdownOpen = false;
-    this.yearDropdownOpen = false;
-    if (refocus) this.triggerInput?.focus();
-    this.dispatchEvent(
-      new CustomEvent("rel-open-change", {
-        detail: { open: false },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  private previousMonth() {
-    if (this.viewMonth === 0) {
-      this.viewMonth = 11;
-      this.viewYear--;
-    } else {
-      this.viewMonth--;
-    }
-    this.announceMonth();
-  }
-
-  private nextMonth() {
-    if (this.viewMonth === 11) {
-      this.viewMonth = 0;
-      this.viewYear++;
-    } 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();
-    }
-  }
-
-  /** 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(date),
-        },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  private clearValue(e: Event) {
-    e.stopPropagation();
-    this.value = null;
-    this.inputText = null;
-    this.inputError = null;
-
-    this.dispatchEvent(
-      new CustomEvent("rel-change", {
-        detail: {
-          value: null,
-          date: null,
-        },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  // ── 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;
-
-    switch (e.key) {
-      case "ArrowLeft":
-        e.preventDefault();
-        targetIndex = index - 1;
-        break;
-      case "ArrowRight":
-        e.preventDefault();
-        targetIndex = index + 1;
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        targetIndex = index - 7;
-        break;
-      case "ArrowDown":
-        e.preventDefault();
-        targetIndex = index + 7;
-        break;
-      case "Home":
-        e.preventDefault();
-        targetIndex = index - (index % 7);
-        break;
-      case "End":
-        e.preventDefault();
-        targetIndex = index - (index % 7) + 6;
-        break;
-      case "PageUp":
-        e.preventDefault();
-        if (e.shiftKey) {
-          this.viewYear--;
-          this.announceMonth();
-        } else {
-          this.previousMonth();
-        }
-        return;
-      case "PageDown":
-        e.preventDefault();
-        if (e.shiftKey) {
-          this.viewYear++;
-          this.announceMonth();
-        } else {
-          this.nextMonth();
-        }
-        return;
-      case "Enter":
-      case " ":
-        e.preventDefault();
-        this.selectDay(day);
-        return;
-      default:
-        return;
-    }
-
-    if (targetIndex >= 0 && targetIndex < days.length) {
-      const targetDay = days[targetIndex];
-      if (!targetDay.isCurrentMonth) {
-        if (targetIndex < index) {
-          this.previousMonth();
-        } else {
-          this.nextMonth();
-        }
-      }
-      this.requestUpdate();
-      this.updateComplete.then(() => {
-        const buttons = this.calendarGrid?.querySelectorAll<HTMLButtonElement>(".day-button");
-        if (buttons && buttons[targetIndex]) {
-          buttons[targetIndex].focus();
-        }
-      });
-    }
-  }
-
-  private toggleMonthDropdown(e: Event) {
-    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() {
-    const days = this.getCalendarDays();
-    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 || 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,
-      isError ? "error" : "",
-      this.readonly ? "readonly" : "",
-    ]
-      .filter(Boolean)
-      .join(" ");
-
-    return html`
-      <div part="base" class="${wrapperClasses}">
-        ${this.label
-          ? html`<label part="label" class="label" id="date-picker-label"
-              >${this.label}${this.required
-                ? html`<span class="required-mark" aria-hidden="true">*</span>`
-                : nothing}</label
-            >`
-          : nothing}
-
-        ${this.name
-          ? html`<input type="hidden" name=${this.name} .value=${this.value ?? ""} />`
-          : nothing}
-
-        <div
-          part="trigger"
-          class="trigger-button ${isError ? "error" : ""}"
-          @click=${this.handleFieldClick}
-        >
-          <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`
-                  <button
-                    class="icon-button"
-                    type="button"
-                    aria-label="Clear date"
-                    @click=${this.clearValue}
-                  >
-                    <svg viewBox="0 0 16 16" fill="currentColor">
-                      <path
-                        d="M4 4l8 8M12 4l-8 8"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                      />
-                    </svg>
-                  </button>
-                `
-              : nothing}
-            <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>
-        </div>
-
-        <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"
-              @click=${this.previousMonth}
-              aria-label="Previous month"
-              type="button"
-            >
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-                <path
-                  d="M10 12L6 8L10 4"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  fill="none"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
-            </button>
-
-            <div class="dropdown-container">
-              <button
-                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" : ""}"
-                role="listbox"
-                aria-label="Month"
-                @keydown=${this.handleDropdownKeydown}
-              >
-                ${months.map(
-                  (m) => html`
-                    <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}
-                    </button>
-                  `
-                )}
-              </div>
-            </div>
-
-            <div class="dropdown-container">
-              <button
-                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" : ""}"
-                role="listbox"
-                aria-label="Year"
-                @keydown=${this.handleDropdownKeydown}
-              >
-                ${years.map(
-                  (y) => html`
-                    <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}
-                    </button>
-                  `
-                )}
-              </div>
-            </div>
-
-            <button
-              class="nav-button"
-              @click=${this.nextMonth}
-              aria-label="Next month"
-              type="button"
-            >
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-                <path
-                  d="M6 4L10 8L6 12"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  fill="none"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
-            </button>
-          </div>
-
-          <div class="weekdays">
-            ${weekdayLabels.map(
-              (label) => html` <div class="weekday" aria-label="${label}">${label}</div> `
-            )}
-          </div>
-
-          <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>
-
-        <div
-          class="date-picker-support ${isError ? "error" : ""} ${belowText ? "" : "empty"}"
-          id="date-picker-desc"
-          aria-live="polite"
-        >${belowText ?? nothing}</div>
-      </div>
-    `;
-  }
-}