@reliability-design/web 1.0.3 → 1.1.1

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

@@ -0,0 +1,916 @@
+import { LitElement, html, css, nothing } from "lit";
+import { customElement, property, state, query } from "lit/decorators.js";
+
+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: String }) min: string | null = null;
+  @property({ type: String }) max: string | null = null;
+  @property({ type: String, attribute: "week-start" }) weekStart: "sun" | "mon" = "sun";
+  @property({ type: String }) locale = "en-US";
+  @property({ type: Boolean, reflect: true }) open = false;
+  @property({ type: Boolean, attribute: "close-on-select" }) closeOnSelect = true;
+  @property({ type: Boolean }) clearable = false;
+
+  // Custom disabled predicate (not settable via attribute)
+  public isDateDisabled?: (date: Date) => boolean;
+
+  @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;
+
+  @query(".trigger-button") private triggerButton?: HTMLButtonElement;
+  @query(".popover") private popoverElement?: HTMLElement;
+  @query(".calendar-grid") private calendarGrid?: HTMLElement;
+
+  static styles = css`
+    :host {
+      display: inline-block;
+      font-family: var(--rel-fontFamilies-primary);
+      position: relative;
+    }
+
+    :host([disabled]) {
+      opacity: 0.6;
+      pointer-events: none;
+    }
+
+    .date-picker-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: var(--rel-spacing-space-xs);
+    }
+
+    .label {
+      font-size: var(--rel-fontSizes-sm);
+      font-weight: var(--rel-fontWeights-medium);
+      color: var(--rel-text-heading);
+    }
+
+    .trigger-button {
+      width: 100%;
+      min-width: 200px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--rel-spacing-space-xs);
+      padding: var(--rel-spacing-space-sm) var(--rel-spacing-space-md);
+      background: var(--rel-colors-white);
+      border: 1px solid var(--rel-border-default);
+      border-radius: var(--rel-borders-radius-border-radius-200);
+      font-family: var(--rel-fontFamilies-primary);
+      font-size: var(--rel-fontSizes-md);
+      color: var(--rel-text-primary);
+      cursor: pointer;
+      transition: all 0.15s ease;
+      text-align: left;
+    }
+
+    .trigger-button:hover:not(:disabled) {
+      border-color: var(--rel-colors-gray-heading);
+    }
+
+    .trigger-button:focus-visible {
+      outline: 2px solid var(--rel-colors-blue-primary);
+      outline-offset: 2px;
+      border-color: var(--rel-colors-blue-primary);
+    }
+
+    .trigger-button:disabled {
+      cursor: not-allowed;
+      background: var(--rel-surface-secondary);
+    }
+
+    .trigger-content {
+      flex: 1;
+      color: var(--rel-text-primary);
+    }
+
+    .trigger-content.placeholder {
+      color: var(--rel-colors-gray-placeholder);
+    }
+
+    .trigger-icons {
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-2xs);
+    }
+
+    .icon-button {
+      background: none;
+      border: none;
+      padding: var(--rel-spacing-space-3xs);
+      cursor: pointer;
+      color: var(--rel-colors-gray-placeholder);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--rel-borders-radius-border-radius-100);
+      transition: all 0.15s ease;
+    }
+
+    .icon-button:hover {
+      background: var(--rel-surface-secondary);
+      color: var(--rel-colors-gray-heading);
+    }
+
+    .icon-button svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    .popover {
+      position: absolute;
+      top: calc(100% + 4px);
+      left: 0;
+      z-index: 1000;
+      background: var(--rel-colors-white);
+      border: 1px solid var(--rel-border-default);
+      border-radius: var(--rel-borders-radius-border-radius-200);
+      box-shadow: var(--rel-shadows-shadow-300);
+      padding: var(--rel-spacing-space-md);
+      min-width: 280px;
+      display: none;
+    }
+
+    .popover.open {
+      display: block;
+    }
+
+    .calendar-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: var(--rel-spacing-space-md);
+      gap: var(--rel-spacing-space-xs);
+    }
+
+    .nav-button {
+      background: transparent;
+      border: none;
+      width: 32px;
+      height: 32px;
+      border-radius: var(--rel-borders-radius-border-radius-200);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      color: var(--rel-colors-gray-primary);
+      transition: background-color 0.15s ease;
+    }
+
+    .nav-button:hover {
+      background: var(--rel-surface-secondary);
+    }
+
+    .nav-button:focus-visible {
+      outline: 2px solid var(--rel-colors-blue-primary);
+      outline-offset: 2px;
+    }
+
+    .dropdown-container {
+      position: relative;
+      flex: 1;
+    }
+
+    .dropdown-trigger {
+      width: 100%;
+      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
+      background: var(--rel-colors-white);
+      border: 1px solid var(--rel-border-default);
+      border-radius: var(--rel-borders-radius-border-radius-200);
+      font-family: var(--rel-fontFamilies-primary);
+      font-size: var(--rel-fontSizes-sm);
+      font-weight: var(--rel-fontWeights-medium);
+      color: var(--rel-text-heading);
+      cursor: pointer;
+      text-align: center;
+      transition: all 0.15s ease;
+    }
+
+    .dropdown-trigger:hover {
+      background: var(--rel-surface-secondary);
+    }
+
+    .dropdown-trigger:focus-visible {
+      outline: 2px solid var(--rel-colors-blue-primary);
+      outline-offset: 2px;
+    }
+
+    .dropdown-menu {
+      position: absolute;
+      top: calc(100% + 4px);
+      left: 0;
+      right: 0;
+      z-index: 10;
+      background: var(--rel-colors-white);
+      border: 1px solid var(--rel-border-default);
+      border-radius: var(--rel-borders-radius-border-radius-200);
+      box-shadow: var(--rel-shadows-shadow-200);
+      max-height: 200px;
+      overflow-y: auto;
+      display: none;
+    }
+
+    .dropdown-menu.open {
+      display: block;
+    }
+
+    .dropdown-item {
+      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
+      cursor: pointer;
+      font-size: var(--rel-fontSizes-sm);
+      color: var(--rel-text-primary);
+      transition: background-color 0.15s ease;
+    }
+
+    .dropdown-item:hover {
+      background: var(--rel-surface-secondary);
+    }
+
+    .dropdown-item.selected {
+      background: var(--rel-colors-blue-bg);
+      color: var(--rel-colors-blue-primary);
+      font-weight: var(--rel-fontWeights-semibold);
+    }
+
+    .weekdays {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: var(--rel-spacing-space-3xs);
+      margin-bottom: var(--rel-spacing-space-xs);
+    }
+
+    .weekday {
+      text-align: center;
+      font-size: var(--rel-fontSizes-xs);
+      font-weight: var(--rel-fontWeights-semibold);
+      color: var(--rel-colors-gray-placeholder);
+      padding: var(--rel-spacing-space-xs);
+      text-transform: uppercase;
+    }
+
+    .calendar-grid {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: var(--rel-spacing-space-3xs);
+    }
+
+    .day-button {
+      aspect-ratio: 1;
+      border: none;
+      background: transparent;
+      border-radius: var(--rel-borders-radius-border-radius-200);
+      font-size: var(--rel-fontSizes-sm);
+      font-weight: var(--rel-fontWeights-medium);
+      color: var(--rel-text-primary);
+      cursor: pointer;
+      position: relative;
+      transition: all 0.15s ease;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    .day-button:hover:not(:disabled):not(.selected) {
+      background: var(--rel-surface-secondary);
+    }
+
+    .day-button:focus-visible {
+      outline: 2px solid var(--rel-colors-blue-primary);
+      outline-offset: -2px;
+      z-index: 1;
+    }
+
+    .day-button.today:not(.selected) {
+      border: 2px solid var(--rel-colors-blue-primary);
+    }
+
+    .day-button.selected {
+      background: var(--rel-colors-green-primary);
+      color: var(--rel-colors-black);
+      font-weight: var(--rel-fontWeights-semibold);
+    }
+
+    .day-button.other-month {
+      color: var(--rel-colors-gray-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);
+  }
+
+  private handleClickOutside = (e: MouseEvent) => {
+    if (!this.open) return;
+
+    const path = e.composedPath();
+    if (!path.includes(this)) {
+      this.closeCalendarPopover();
+    }
+  };
+
+  private handleEscapeKey = (e: KeyboardEvent) => {
+    if (e.key === "Escape" && this.open) {
+      this.closeCalendarPopover();
+    }
+  };
+
+  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();
+      }
+    }
+
+    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);
+    }
+  }
+
+  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;
+
+    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.min) {
+      const minDate = this.parseISODate(this.min);
+      if (minDate && date < minDate) return true;
+    }
+
+    if (this.max) {
+      const maxDate = this.parseISODate(this.max);
+      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 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.min) {
+      const minDate = this.parseISODate(this.min);
+      if (minDate) startYear = Math.max(startYear, minDate.getFullYear() - 5);
+    }
+
+    if (this.max) {
+      const maxDate = this.parseISODate(this.max);
+      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) return;
+    this.open = !this.open;
+    this.dispatchEvent(
+      new CustomEvent("rel-open-change", {
+        detail: { open: this.open },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private closeCalendarPopover() {
+    this.open = false;
+    this.monthDropdownOpen = false;
+    this.yearDropdownOpen = false;
+    this.triggerButton?.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--;
+    }
+  }
+
+  private nextMonth() {
+    if (this.viewMonth === 11) {
+      this.viewMonth = 0;
+      this.viewYear++;
+    } else {
+      this.viewMonth++;
+    }
+  }
+
+  private selectDay(day: CalendarDay) {
+    if (day.isDisabled || this.disabled) return;
+
+    const newValue = this.formatISODate(day.date);
+    this.value = newValue;
+
+    this.dispatchEvent(
+      new CustomEvent("rel-change", {
+        detail: {
+          value: newValue,
+          date: new Date(day.date),
+        },
+        bubbles: true,
+        composed: true,
+      })
+    );
+
+    if (this.closeOnSelect) {
+      this.closeCalendarPopover();
+    }
+  }
+
+  private clearValue(e: Event) {
+    e.stopPropagation();
+    this.value = null;
+
+    this.dispatchEvent(
+      new CustomEvent("rel-change", {
+        detail: {
+          value: null,
+          date: null,
+        },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private handleTriggerKeydown(e: KeyboardEvent) {
+    if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+      e.preventDefault();
+      if (!this.open) {
+        this.toggleCalendarPopover();
+      }
+    }
+  }
+
+  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--;
+        } else {
+          this.previousMonth();
+        }
+        return;
+      case "PageDown":
+        e.preventDefault();
+        if (e.shiftKey) {
+          this.viewYear++;
+        } 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;
+  }
+
+  private toggleYearDropdown(e: Event) {
+    e.stopPropagation();
+    this.yearDropdownOpen = !this.yearDropdownOpen;
+    this.monthDropdownOpen = false;
+  }
+
+  private selectMonth(month: number, e: Event) {
+    e.stopPropagation();
+    this.viewMonth = month;
+    this.monthDropdownOpen = false;
+  }
+
+  private selectYear(year: number, e: Event) {
+    e.stopPropagation();
+    this.viewYear = year;
+    this.yearDropdownOpen = false;
+  }
+
+  render() {
+    const days = this.getCalendarDays();
+    const weekdayLabels = this.getWeekdayLabels();
+    const months = this.getMonthsList();
+    const years = this.getYearsList();
+
+    return html`
+      <div class="date-picker-wrapper">
+        ${this.label
+          ? html`<label class="label" id="date-picker-label">${this.label}</label>`
+          : nothing}
+
+        <button
+          class="trigger-button"
+          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-labelledby=${this.label ? "date-picker-label" : nothing}
+        >
+          <span class="trigger-content ${this.value ? "" : "placeholder"}">
+            ${this.value ? this.formatDisplayDate(this.value) : this.placeholder}
+          </span>
+          <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}
+            <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>
+          </span>
+        </button>
+
+        <div class="popover ${this.open ? "open" : ""}" role="dialog" aria-label="Choose date">
+          <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}
+                aria-label="Select month"
+                aria-expanded=${this.monthDropdownOpen}
+              >
+                ${this.getMonthName()}
+              </button>
+              <div class="dropdown-menu ${this.monthDropdownOpen ? "open" : ""}">
+                ${months.map(
+                  (m) => html`
+                    <div
+                      class="dropdown-item ${m.value === this.viewMonth ? "selected" : ""}"
+                      @click=${(e: Event) => this.selectMonth(m.value, e)}
+                      role="option"
+                      aria-selected=${m.value === this.viewMonth}
+                    >
+                      ${m.label}
+                    </div>
+                  `
+                )}
+              </div>
+            </div>
+
+            <div class="dropdown-container">
+              <button
+                class="dropdown-trigger"
+                type="button"
+                @click=${this.toggleYearDropdown}
+                aria-label="Select year"
+                aria-expanded=${this.yearDropdownOpen}
+              >
+                ${this.viewYear}
+              </button>
+              <div class="dropdown-menu ${this.yearDropdownOpen ? "open" : ""}">
+                ${years.map(
+                  (y) => html`
+                    <div
+                      class="dropdown-item ${y === this.viewYear ? "selected" : ""}"
+                      @click=${(e: Event) => this.selectYear(y, e)}
+                      role="option"
+                      aria-selected=${y === this.viewYear}
+                    >
+                      ${y}
+                    </div>
+                  `
+                )}
+              </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">
+            ${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>
+        </div>
+      </div>
+    `;
+  }
+}