@reliability-design/web 1.1.1 → 1.3.0

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

@@ -0,0 +1,1080 @@
+import { LitElement, html, css, nothing } from "lit";
+import { customElement, property, state, query } from "lit/decorators.js";
+import "@reliability-design/icons/rel-icon";
+import "../../styles/vars-v2.css";
+import "../rel-button/rel-button";
+
+interface RangeDay {
+  date: Date;
+  day: number;
+  isCurrentMonth: boolean;
+  isToday: boolean;
+  isDraftFrom: boolean;
+  isDraftTo: boolean;
+  isInRange: boolean;
+  isDisabled: boolean;
+}
+
+interface QuickSelect {
+  label: string;
+  key: string;
+  from: string;
+  to: string;
+  fullWidth?: boolean;
+}
+
+@customElement("rel-range-picker")
+export class RelRangePicker extends LitElement {
+  @property({ type: String }) from: string = "";
+  @property({ type: String }) to: string = "";
+  @property({ type: String }) locale: string = "en-US";
+  @property({ type: String, attribute: "week-start" }) weekStart: "mon" | "sun" = "sun";
+  @property({ type: String, attribute: "min-date" }) minDate: string = "";
+  @property({ type: String, attribute: "max-date" }) maxDate: string = "";
+  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ type: Boolean, reflect: true }) open = false;
+  @property({ type: String }) mode: "popover" | "popup" = "popover";
+  @property({ type: String }) width: string = "";
+  @property({ type: String, attribute: "min-width" }) minWidth: string = "";
+  @property({ type: String, attribute: "max-width" }) maxWidth: string = "";
+  @property({ type: String }) height: string = "";
+  @property({ type: String, attribute: "min-height" }) minHeight: string = "";
+  @property({ type: String, attribute: "max-height" }) maxHeight: string = "";
+  @property({ type: String }) placeholder: string = "Select date range";
+  @property({ type: String, attribute: "trigger-variant" }) triggerVariant: "default" | "icon" = "default";
+
+  @state() private draftFrom: string = "";
+  @state() private draftTo: string = "";
+  @state() private draftActivePreset: string | null = null;
+  @state() private viewYear: number = new Date().getFullYear();
+  @state() private viewMonth: number = new Date().getMonth();
+  @state() private isSelectingRange: boolean = false;
+  @state() private hoverDate: string | null = null;
+
+  @query(".trigger-button") private triggerButton?: HTMLButtonElement;
+
+  static styles = css`
+    :host {
+      display: inline-block;
+      font-family: var(--rel-fontFamilies-primary, Poppins, sans-serif);
+      position: relative;
+    }
+
+    :host([disabled]) {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    :host([disabled]) .trigger-button,
+    :host([disabled]) rel-button {
+      pointer-events: none;
+    }
+
+    /* ── Trigger ── */
+    .trigger-button {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--rel-spacing-space-xs, 8px);
+      padding: var(--rel-spacing-space-sm, 12px) var(--rel-spacing-space-md, 16px);
+      background: var(--rel-color-bg-primary, #fff);
+      border: 1px solid var(--rel-color-border-default, #ddd);
+      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
+      font-family: var(--rel-fontFamilies-primary, Poppins, sans-serif);
+      font-size: var(--rel-fontSizes-md, 14px);
+      color: var(--rel-color-text-primary, #333);
+      cursor: pointer;
+      width: 100%;
+      text-align: left;
+      transition: border-color 0.15s ease;
+    }
+
+    .trigger-button:hover:not(:disabled) {
+      border-color: var(--rel-color-border-strong, #999);
+    }
+
+    .trigger-button:focus-visible {
+      outline: 2px solid var(--rel-color-border-focus, #0091ea);
+      outline-offset: 2px;
+    }
+
+    .trigger-content {
+      flex: 1;
+      color: var(--rel-color-text-primary, #333);
+    }
+
+    .trigger-content.placeholder {
+      color: var(--rel-color-text-placeholder, #a9a9a9);
+    }
+
+    /* ── Popover shell ── */
+    .popover {
+      position: absolute;
+      top: calc(100% + 4px);
+      left: 0;
+      z-index: 2147483647;
+      border: 1px solid var(--rel-color-border-default, #ddd);
+      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
+      background: var(--rel-color-bg-primary, #fff);
+      box-shadow: var(--rel-shadows-shadow-200);
+      overflow: visible;
+      display: none;
+    }
+
+    .popover.open { display: block; }
+
+    .popover.popup {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .backdrop {
+      position: fixed;
+      inset: 0;
+      z-index: 2147483646;
+      background: rgba(0,0,0,0.4);
+    }
+
+    /* ── Two-panel wrapper ── */
+    .picker-wrapper {
+      display: flex;
+      flex-direction: row;
+      align-items: stretch;
+    }
+
+    /* ── Left panel: presets ── */
+    .presets {
+      width: 280px;
+      flex-shrink: 0;
+      flex-grow: 0;
+      border-right: 1px solid var(--rel-color-border-default, #ddd);
+      padding: 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+    }
+
+    .presets-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 6px;
+    }
+
+    .preset-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px 12px;
+      cursor: pointer;
+      font-size: 13px;
+      font-weight: var(--rel-fontWeights-medium, 500);
+      font-family: var(--rel-fontFamilies-primary, Poppins, sans-serif);
+      color: var(--rel-color-text-primary, #333);
+      background: var(--rel-color-bg-tertiary, #f5f5f5);
+      border: none;
+      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
+      width: 100%;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      transition: background 0.15s ease;
+      line-height: 1.3;
+    }
+
+    .preset-item:hover:not(.active) {
+      background: var(--rel-color-bg-hover, #eeeeee);
+    }
+
+    .preset-item.active {
+      background: #1A1A1A;
+      color: #FFFFFF;
+      font-weight: var(--rel-fontWeights-semibold, 600);
+    }
+
+    .preset-item.full-width {
+      grid-column: 1 / -1;
+    }
+
+    /* ── FROM/TO inputs ── */
+    .date-inputs {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 14px 8px 4px;
+      border-top: 1px solid var(--rel-color-border-default, #ddd);
+      margin-top: auto;
+    }
+
+    .date-input-group {
+      flex: 1;
+      min-width: 0;
+      position: relative;
+    }
+
+    .date-input-label {
+      position: absolute;
+      top: -8px;
+      left: 10px;
+      font-size: 11px;
+      font-weight: var(--rel-fontWeights-medium, 500);
+      color: var(--rel-color-text-secondary, #9e9e9e);
+      background: var(--rel-color-bg-primary, #fff);
+      padding: 0 3px;
+      line-height: 1;
+    }
+
+    .date-input-value {
+      display: block;
+      border: 1px solid var(--rel-color-border-default, #ddd);
+      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
+      padding: 6px 8px;
+      font-size: var(--rel-fontSizes-md, 14px);
+      font-weight: var(--rel-fontWeights-semibold, 600);
+      font-family: var(--rel-fontFamilies-primary, Poppins, sans-serif);
+      color: var(--rel-color-text-primary, #333);
+      background: var(--rel-color-bg-primary, #fff);
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    .date-input-value.empty {
+      color: var(--rel-color-text-placeholder, #a9a9a9);
+      font-weight: var(--rel-fontWeights-regular, 400);
+    }
+
+    /* ── Right panel: calendar ── */
+    .calendar-panel {
+      width: 300px;
+      flex-shrink: 0;
+      flex-grow: 0;
+      padding: 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .calendar-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 2px;
+    }
+
+    .month-label {
+      font-size: 15px;
+      font-weight: var(--rel-fontWeights-semibold, 600);
+      color: var(--rel-color-text-heading, #2b2b2b);
+    }
+
+    .nav-btn {
+      background: none;
+      border: none;
+      cursor: pointer;
+      color: var(--rel-color-text-primary, #333);
+      padding: 4px;
+      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
+      display: flex;
+      align-items: center;
+      transition: background 0.15s ease;
+    }
+
+    .nav-btn:hover { background: var(--rel-color-bg-hover, #f5f5f5); }
+
+    /* ── Weekday header ── */
+    .week-header {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      text-align: center;
+    }
+
+    .week-day {
+      font-size: var(--rel-fontSizes-sm, 12px);
+      font-weight: var(--rel-fontWeights-semibold, 600);
+      color: var(--rel-color-text-secondary, #9e9e9e);
+      padding: 2px 0;
+      text-align: center;
+    }
+
+    /* ── Calendar grid ── */
+    .calendar-grid {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+    }
+
+    .day-cell {
+      height: 36px;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+    }
+
+    .day-cell.other-month {
+      opacity: 0.35;
+      pointer-events: none;
+    }
+
+    .day-cell.disabled {
+      opacity: 0.4;
+      pointer-events: none;
+    }
+
+    .day-cell.in-range {
+      background: var(--rel-color-bg-selected, #eeeeee);
+    }
+
+    .day-cell.range-start:not(.range-end) {
+      background: linear-gradient(to right, transparent 50%, var(--rel-color-bg-selected, #eeeeee) 50%);
+    }
+
+    .day-cell.range-end:not(.range-start) {
+      background: linear-gradient(to left, transparent 50%, var(--rel-color-bg-selected, #eeeeee) 50%);
+    }
+
+    .day-cell.range-start.range-end {
+      background: transparent;
+    }
+
+    /* ── Day inner circle ── */
+    .day-inner {
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      font-size: 13px;
+      font-weight: var(--rel-fontWeights-medium, 500);
+      font-family: var(--rel-fontFamilies-primary, Poppins, sans-serif);
+      color: var(--rel-color-text-primary, #333);
+      position: relative;
+      z-index: 1;
+      transition: background 0.15s ease;
+      line-height: 1;
+    }
+
+    .day-cell:not(.disabled):not(.other-month):not(.range-start):not(.range-end):hover .day-inner {
+      background: var(--rel-color-bg-hover, #f5f5f5);
+    }
+
+    /* Today: green outline */
+    .day-cell.today:not(.range-start):not(.range-end) .day-inner {
+      border: 2px solid var(--rel-colors-green-primary, #00f49c);
+    }
+
+    /* Range endpoints: dark fill */
+    .day-cell.range-start .day-inner,
+    .day-cell.range-end .day-inner {
+      background: #1A1A1A;
+      color: #FFFFFF;
+      font-weight: var(--rel-fontWeights-semibold, 600);
+    }
+
+    /* Today AND endpoint: green ring + dark fill */
+    .day-cell.today.range-start .day-inner,
+    .day-cell.today.range-end .day-inner {
+      background: #1A1A1A;
+      color: #FFFFFF;
+      border: 2px solid var(--rel-colors-green-primary, #00f49c);
+    }
+
+    /* ── Dark mode overrides ── */
+    :host-context([data-theme="dark"]) .day-cell.in-range,
+    :host-context(.dark) .day-cell.in-range {
+      background: var(--rel-color-bg-selected, #404040);
+    }
+
+    :host-context([data-theme="dark"]) .day-cell.range-start:not(.range-end),
+    :host-context(.dark) .day-cell.range-start:not(.range-end) {
+      background: linear-gradient(to right, transparent 50%, var(--rel-color-bg-selected, #404040) 50%);
+    }
+
+    :host-context([data-theme="dark"]) .day-cell.range-end:not(.range-start),
+    :host-context(.dark) .day-cell.range-end:not(.range-start) {
+      background: linear-gradient(to left, transparent 50%, var(--rel-color-bg-selected, #404040) 50%);
+    }
+
+    :host-context([data-theme="dark"]) .day-cell.range-start .day-inner,
+    :host-context([data-theme="dark"]) .day-cell.range-end .day-inner,
+    :host-context(.dark) .day-cell.range-start .day-inner,
+    :host-context(.dark) .day-cell.range-end .day-inner {
+      background: #F5F5F5;
+      color: #1A1A1A;
+    }
+
+    :host-context([data-theme="dark"]) .day-cell.today.range-start .day-inner,
+    :host-context([data-theme="dark"]) .day-cell.today.range-end .day-inner,
+    :host-context(.dark) .day-cell.today.range-start .day-inner,
+    :host-context(.dark) .day-cell.today.range-end .day-inner {
+      background: #F5F5F5;
+      color: #1A1A1A;
+      border: 2px solid var(--rel-colors-green-primary, #00f49c);
+    }
+
+    /* ── Footer ── */
+    .calendar-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding-top: 12px;
+      border-top: 1px solid var(--rel-color-border-default, #ddd);
+      margin-top: auto;
+      gap: 8px;
+    }
+
+    .footer-right {
+      display: flex;
+      gap: 8px;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .preset-item, .nav-btn, .day-inner {
+        transition: none;
+      }
+    }
+  `;
+
+  // ── Lifecycle ──
+
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("click", this.handleClickOutside);
+    document.addEventListener("keydown", this.handleGlobalKeydown);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("click", this.handleClickOutside);
+    document.removeEventListener("keydown", this.handleGlobalKeydown);
+  }
+
+  updated() {
+    this.style.width = this.width;
+    this.style.minWidth = this.minWidth;
+    this.style.maxWidth = this.maxWidth;
+    this.style.height = this.height;
+    this.style.minHeight = this.minHeight;
+    this.style.maxHeight = this.maxHeight;
+  }
+
+  // ── Open / close ──
+
+  private handleClickOutside = (e: MouseEvent) => {
+    if (!this.open) return;
+    const path = e.composedPath();
+    if (!path.includes(this)) {
+      this.cancelPopover();
+    }
+  };
+
+  private handleGlobalKeydown = (e: KeyboardEvent) => {
+    if (!this.open) return;
+
+    if (e.key === "Escape") {
+      this.cancelPopover();
+      this.triggerButton?.focus();
+      return;
+    }
+
+    if ((e.target as HTMLElement)?.tagName === "INPUT") return;
+
+    const key = e.key.toUpperCase();
+    const keyMap: Record<string, string> = {
+      T: "Today",
+      M: "Tomorrow",
+      B: "Before Today",
+      W: "This Week",
+      N: "Next Week",
+      "7": "Next 7 Days",
+      "3": "Next 30 Days",
+    };
+
+    const label = keyMap[key];
+    if (!label) return;
+
+    const qs = this.getQuickSelects().find((q) => q.label === label);
+    if (qs) this.selectQuickSelect(qs);
+  };
+
+  private toggleOpen() {
+    if (this.disabled) return;
+    if (this.open) {
+      this.cancelPopover();
+    } else {
+      this.openPopover();
+    }
+  }
+
+  private openPopover() {
+    this.draftFrom = this.from;
+    this.draftTo = this.to;
+    this.draftActivePreset = null;
+    this.isSelectingRange = false;
+    this.hoverDate = null;
+
+    if (this.draftFrom) {
+      const date = this.parseISODate(this.draftFrom);
+      if (date) {
+        this.viewYear = date.getFullYear();
+        this.viewMonth = date.getMonth();
+      }
+    } else {
+      const now = new Date();
+      this.viewYear = now.getFullYear();
+      this.viewMonth = now.getMonth();
+    }
+
+    this.open = true;
+    this.dispatchEvent(
+      new CustomEvent("rel-open-change", {
+        detail: { open: true },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private cancelPopover() {
+    if (!this.open) return;
+    this.open = false;
+    this.draftFrom = "";
+    this.draftTo = "";
+    this.draftActivePreset = null;
+    this.isSelectingRange = false;
+    this.hoverDate = null;
+    this.dispatchEvent(
+      new CustomEvent("rel-open-change", {
+        detail: { open: false },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private applySelection() {
+    if (this.draftFrom || this.draftTo) {
+      this.from = this.draftFrom;
+      this.to = this.draftTo;
+      this.dispatchEvent(
+        new CustomEvent("rel-change", {
+          detail: { from: this.from, to: this.to, label: this.displayLabel },
+          bubbles: true,
+          composed: true,
+        })
+      );
+      this.open = false;
+      this.isSelectingRange = false;
+      this.hoverDate = null;
+      this.dispatchEvent(
+        new CustomEvent("rel-open-change", {
+          detail: { open: false },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    }
+  }
+
+  private resetDraft() {
+    if (this.draftFrom || this.draftTo) {
+      this.draftFrom = "";
+      this.draftTo = "";
+      this.draftActivePreset = null;
+      this.isSelectingRange = false;
+      this.hoverDate = null;
+    }
+  }
+
+  private getTriggerLabel(): string {
+    const from = this.from ? this.formatDisplayDate(this.from) : null;
+    const to = this.to ? this.formatDisplayDate(this.to) : null;
+    if (from && to) return `${from} → ${to}`;
+    if (from) return from;
+    return "";
+  }
+
+  /** Formatted "MM/DD/YYYY → MM/DD/YYYY" (or single date / "") for the current committed `from`/`to`. */
+  get displayLabel(): string {
+    return this.getTriggerLabel();
+  }
+
+  // ── Date utilities ──
+
+  private parseISODate(iso: string): Date | null {
+    const m = iso.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+    if (!m) return null;
+    return new Date(parseInt(m[1]), parseInt(m[2]) - 1, parseInt(m[3]));
+  }
+
+  private formatISODate(date: Date): string {
+    const y = date.getFullYear();
+    const mo = String(date.getMonth() + 1).padStart(2, "0");
+    const d = String(date.getDate()).padStart(2, "0");
+    return `${y}-${mo}-${d}`;
+  }
+
+  private formatDisplayDate(iso: string): string {
+    const date = this.parseISODate(iso);
+    if (!date) return "";
+    return new Intl.DateTimeFormat("en-US", {
+      month: "2-digit",
+      day: "2-digit",
+      year: "numeric",
+    }).format(date);
+  }
+
+  private isSameDay(a: Date, b: Date): boolean {
+    return (
+      a.getFullYear() === b.getFullYear() &&
+      a.getMonth() === b.getMonth() &&
+      a.getDate() === b.getDate()
+    );
+  }
+
+  private isDateDisabled(date: Date): boolean {
+    if (this.minDate) {
+      const min = this.parseISODate(this.minDate);
+      if (min && date < min) return true;
+    }
+    if (this.maxDate) {
+      const max = this.parseISODate(this.maxDate);
+      if (max && date > max) return true;
+    }
+    return false;
+  }
+
+  // ── Quick selects ──
+
+  private getQuickSelects(): QuickSelect[] {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+
+    const yesterday = new Date(today);
+    yesterday.setDate(today.getDate() - 1);
+
+    const tomorrow = new Date(today);
+    tomorrow.setDate(today.getDate() + 1);
+
+    const dow = today.getDay(); // 0 = Sun
+    const thisSunday = new Date(today);
+    thisSunday.setDate(today.getDate() - dow);
+    const thisSaturday = new Date(thisSunday);
+    thisSaturday.setDate(thisSunday.getDate() + 6);
+
+    const nextSunday = new Date(thisSunday);
+    nextSunday.setDate(thisSunday.getDate() + 7);
+    const nextSaturday = new Date(nextSunday);
+    nextSaturday.setDate(nextSunday.getDate() + 6);
+
+    const next7To = new Date(today);
+    next7To.setDate(today.getDate() + 6);
+
+    const next30To = new Date(today);
+    next30To.setDate(today.getDate() + 29);
+
+    return [
+      { label: "Today", key: "T", from: this.formatISODate(today), to: this.formatISODate(today) },
+      { label: "Tomorrow", key: "M", from: this.formatISODate(tomorrow), to: this.formatISODate(tomorrow) },
+      { label: "Before Today", key: "B", from: "1970-01-01", to: this.formatISODate(yesterday) },
+      { label: "This Week", key: "W", from: this.formatISODate(thisSunday), to: this.formatISODate(thisSaturday) },
+      { label: "Next Week", key: "N", from: this.formatISODate(nextSunday), to: this.formatISODate(nextSaturday) },
+      { label: "Next 7 Days", key: "7", from: this.formatISODate(today), to: this.formatISODate(next7To) },
+      { label: "Next 30 Days", key: "3", from: this.formatISODate(today), to: this.formatISODate(next30To), fullWidth: true },
+    ];
+  }
+
+  private selectQuickSelect(qs: QuickSelect) {
+    if (this.disabled) return;
+    this.draftFrom = qs.from;
+    this.draftTo = qs.to;
+    this.draftActivePreset = qs.label;
+    this.isSelectingRange = false;
+    this.hoverDate = null;
+
+    const date = this.parseISODate(qs.from);
+    if (date) {
+      this.viewYear = date.getFullYear();
+      this.viewMonth = date.getMonth();
+    }
+  }
+
+  // ── Calendar navigation ──
+
+  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 getMonthName(): string {
+    return new Intl.DateTimeFormat("en-US", { month: "long" }).format(
+      new Date(this.viewYear, this.viewMonth, 1)
+    );
+  }
+
+  private getWeekdayLabels(): string[] {
+    const formatter = new Intl.DateTimeFormat("en-US", { weekday: "short" });
+    const base = new Date(2024, 0, 7); // Sunday Jan 7 2024
+    return Array.from({ length: 7 }, (_, i) => {
+      const offset = this.weekStart === "mon" ? i + 1 : i;
+      const d = new Date(base);
+      d.setDate(base.getDate() + offset);
+      return formatter.format(d).substring(0, 2);
+    });
+  }
+
+  // ── Calendar day computation ──
+
+  private getCalendarDays(): RangeDay[] {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+
+    const firstDay = new Date(this.viewYear, this.viewMonth, 1);
+    const lastDay = new Date(this.viewYear, this.viewMonth + 1, 0);
+
+    const draftFromDate = this.draftFrom ? this.parseISODate(this.draftFrom) : null;
+    const draftToDate = this.draftTo ? this.parseISODate(this.draftTo) : null;
+
+    let effectiveFrom: Date | null = draftFromDate;
+    let effectiveTo: Date | null = draftToDate;
+
+    if (this.isSelectingRange && this.hoverDate && draftFromDate) {
+      const hDate = this.parseISODate(this.hoverDate);
+      if (hDate) {
+        if (hDate.getTime() >= draftFromDate.getTime()) {
+          effectiveFrom = draftFromDate;
+          effectiveTo = hDate;
+        } else {
+          effectiveFrom = hDate;
+          effectiveTo = draftFromDate;
+        }
+      }
+    }
+
+    const days: RangeDay[] = [];
+
+    let startDay = firstDay.getDay();
+    if (this.weekStart === "mon") {
+      startDay = startDay === 0 ? 6 : startDay - 1;
+    }
+    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: false,
+        isDraftFrom: false,
+        isDraftTo: false,
+        isInRange: false,
+        isDisabled: true,
+      });
+    }
+
+    for (let d = 1; d <= lastDay.getDate(); d++) {
+      const date = new Date(this.viewYear, this.viewMonth, d);
+      const t = date.getTime();
+
+      const isDraftFrom = !!effectiveFrom && this.isSameDay(date, effectiveFrom);
+      const isDraftTo = !!effectiveTo && this.isSameDay(date, effectiveTo);
+      const isInRange =
+        !!effectiveFrom &&
+        !!effectiveTo &&
+        t > effectiveFrom.getTime() &&
+        t < effectiveTo.getTime();
+
+      days.push({
+        date,
+        day: d,
+        isCurrentMonth: true,
+        isToday: this.isSameDay(date, today),
+        isDraftFrom,
+        isDraftTo,
+        isInRange,
+        isDisabled: this.isDateDisabled(date),
+      });
+    }
+
+    const remaining = 42 - days.length;
+    for (let i = 1; i <= remaining; i++) {
+      const date = new Date(this.viewYear, this.viewMonth + 1, i);
+      days.push({
+        date,
+        day: date.getDate(),
+        isCurrentMonth: false,
+        isToday: false,
+        isDraftFrom: false,
+        isDraftTo: false,
+        isInRange: false,
+        isDisabled: true,
+      });
+    }
+
+    return days;
+  }
+
+  // ── Day click / hover ──
+
+  private handleDayClick(day: RangeDay) {
+    if (day.isDisabled || this.disabled) return;
+    const iso = this.formatISODate(day.date);
+
+    if (!this.isSelectingRange) {
+      this.draftFrom = iso;
+      this.draftTo = "";
+      this.draftActivePreset = null;
+      this.isSelectingRange = true;
+      this.hoverDate = null;
+    } else {
+      const fromDate = this.parseISODate(this.draftFrom);
+      if (!fromDate) {
+        this.draftFrom = iso;
+        this.draftTo = "";
+        return;
+      }
+
+      if (day.date.getTime() >= fromDate.getTime()) {
+        this.draftTo = iso;
+      } else {
+        this.draftTo = this.draftFrom;
+        this.draftFrom = iso;
+      }
+
+      this.isSelectingRange = false;
+      this.hoverDate = null;
+      this.draftActivePreset = null;
+    }
+  }
+
+  private handleDayHover(day: RangeDay) {
+    if (!this.isSelectingRange || day.isDisabled) return;
+    this.hoverDate = this.formatISODate(day.date);
+  }
+
+  // ── Render ──
+
+  render() {
+    const quickSelects = this.getQuickSelects();
+    const days = this.getCalendarDays();
+    const weekdayLabels = this.getWeekdayLabels();
+
+    const draftFromDisplay = this.draftFrom ? this.formatDisplayDate(this.draftFrom) : "";
+    const draftToDisplay = this.draftTo ? this.formatDisplayDate(this.draftTo) : "";
+    const triggerLabel = this.getTriggerLabel();
+    const isDraftEmpty = !this.draftFrom && !this.draftTo;
+    const isPopup = this.mode === "popup";
+
+    return html`
+      ${this.triggerVariant === "icon"
+        ? html`
+            <rel-button
+              variant="icon"
+              tone="secondary"
+              ?disabled=${this.disabled}
+              aria-haspopup="dialog"
+              aria-expanded=${this.open}
+              aria-label=${triggerLabel || this.placeholder}
+              @click=${() => this.toggleOpen()}
+            >
+              <rel-icon name="calendar-range"></rel-icon>
+            </rel-button>
+          `
+        : html`
+            <button
+              class="trigger-button"
+              type="button"
+              ?disabled=${this.disabled}
+              aria-haspopup="dialog"
+              aria-expanded=${this.open}
+              aria-label=${triggerLabel || this.placeholder}
+              @click=${this.toggleOpen}
+            >
+              <span class="trigger-content ${triggerLabel ? "" : "placeholder"}">
+                ${triggerLabel || this.placeholder}
+              </span>
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+                <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>
+          `}
+
+      ${isPopup && this.open
+        ? html`<div class="backdrop" @click=${this.cancelPopover}></div>`
+        : nothing}
+
+      <div
+        class="popover ${this.open ? "open" : ""} ${isPopup ? "popup" : ""}"
+        role="dialog"
+        aria-label="Select date range"
+      >
+        <div class="picker-wrapper">
+
+          <!-- ── Left: Quick select ── -->
+          <div class="presets">
+            <div class="presets-grid" role="list" aria-label="Quick date selections">
+              ${quickSelects.map(
+                (qs) => html`
+                  <button
+                    class="preset-item ${qs.fullWidth ? "full-width" : ""} ${this.draftActivePreset === qs.label ? "active" : ""}"
+                    type="button"
+                    role="listitem"
+                    ?disabled=${this.disabled}
+                    aria-pressed=${this.draftActivePreset === qs.label}
+                    @click=${() => this.selectQuickSelect(qs)}
+                  >
+                    <span>${qs.label}</span>
+                    ${this.draftActivePreset === qs.label
+                      ? html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                          <circle cx="12" cy="12" r="12" fill="#00F49C"/>
+                          <path d="M7 12.5l3.5 3.5 6.5-7" stroke="#000000" stroke-width="2"
+                            stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>`
+                      : nothing}
+                  </button>
+                `
+              )}
+            </div>
+
+            <div class="date-inputs">
+              <div class="date-input-group" aria-label="From date">
+                <span class="date-input-label">FROM</span>
+                <div class="date-input-value ${draftFromDisplay ? "" : "empty"}">
+                  ${draftFromDisplay || "MM/DD/YYYY"}
+                </div>
+              </div>
+              <div class="date-input-group" aria-label="To date">
+                <span class="date-input-label">TO</span>
+                <div class="date-input-value ${draftToDisplay ? "" : "empty"}">
+                  ${draftToDisplay || "MM/DD/YYYY"}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- ── Right: Calendar panel ── -->
+          <div class="calendar-panel">
+
+            <div class="calendar-header">
+              <button
+                class="nav-btn"
+                type="button"
+                aria-label="Previous month"
+                @click=${this.previousMonth}
+              >
+                <rel-icon name="chevron-left" size="sm"></rel-icon>
+              </button>
+              <span class="month-label">${this.getMonthName()} ${this.viewYear}</span>
+              <button
+                class="nav-btn"
+                type="button"
+                aria-label="Next month"
+                @click=${this.nextMonth}
+              >
+                <rel-icon name="chevron-right" size="sm"></rel-icon>
+              </button>
+            </div>
+
+            <div class="week-header" role="row">
+              ${weekdayLabels.map(
+                (label) => html`
+                  <div class="week-day" role="columnheader" aria-label="${label}">
+                    ${label}
+                  </div>
+                `
+              )}
+            </div>
+
+            <div
+              class="calendar-grid"
+              role="grid"
+              aria-label="Select date range"
+              @mouseleave=${() => { this.hoverDate = null; }}
+            >
+              ${days.map((day) => {
+                const cellClasses = [
+                  "day-cell",
+                  day.isInRange ? "in-range" : "",
+                  day.isDraftFrom ? "range-start" : "",
+                  day.isDraftTo ? "range-end" : "",
+                  day.isToday ? "today" : "",
+                  day.isDisabled ? "disabled" : "",
+                  !day.isCurrentMonth ? "other-month" : "",
+                ]
+                  .filter(Boolean)
+                  .join(" ");
+
+                return html`
+                  <div
+                    class="${cellClasses}"
+                    role="gridcell"
+                    aria-label="${this.formatISODate(day.date)}"
+                    aria-selected="${day.isDraftFrom || day.isDraftTo || day.isInRange}"
+                    @click=${() => this.handleDayClick(day)}
+                    @mouseenter=${() => this.handleDayHover(day)}
+                  >
+                    <span class="day-inner">${day.day}</span>
+                  </div>
+                `;
+              })}
+            </div>
+
+            <div class="calendar-footer">
+              <rel-button
+                variant="secondary"
+                size="small"
+                border="corner-radius"
+                ?disabled=${isDraftEmpty}
+                @click=${() => this.resetDraft()}
+              >
+                Reset
+              </rel-button>
+              <div class="footer-right">
+                <rel-button
+                  variant="secondary"
+                  size="small"
+                  border="corner-radius"
+                  @click=${() => this.cancelPopover()}
+                >
+                  Cancel
+                </rel-button>
+                <rel-button
+                  variant="primary"
+                  tone="default"
+                  size="small"
+                  border="corner-radius"
+                  ?disabled=${isDraftEmpty}
+                  @click=${() => this.applySelection()}
+                >
+                  Apply
+                </rel-button>
+              </div>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    `;
+
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "rel-range-picker": RelRangePicker;
+  }
+}