@reliability-design/web 1.4.6 → 1.4.8

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

@@ -1,1688 +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 "@reliability-design/icons/rel-icon";
-import "../rel-button/rel-button";
-import { announce } from "../../utils/announce";
-import { isEditableTarget } from "../../utils/shortcuts";
-import { parseDateInput } from "../rel-date-picker/date-parse";
-
-interface RangeDay {
-  date: Date;
-  day: number;
-  isCurrentMonth: boolean;
-  isToday: boolean;
-  isDraftFrom: boolean;
-  isDraftTo: boolean;
-  isInRange: boolean;
-  isDisabled: boolean;
-  isWeekend: 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";
-  @property({ type: Boolean }) clearable = false;
-
-  @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;
-  /** ISO date of the cell that owns the grid's single Tab stop (roving tabindex). */
-  @state() private focusedDate: string | null = null;
-  /** Uncommitted typed text; null → the input shows the committed range. */
-  @state() private inputText: string | null = null;
-  /** Parse/range error message for the typed text (cleared on next input). */
-  @state() private inputError: string | null = null;
-
-  @query(".trigger-input") private triggerInput?: HTMLInputElement;
-  @query(".popover") private popoverEl?: HTMLDivElement;
-  @query(".backdrop") private backdropEl?: HTMLDivElement;
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: inline-block;
-      font-family: var(--rel-body-md-regular-font-family);
-      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-xs, 8px);
-      padding: var(--rel-spacing-sm, 12px) var(--rel-spacing-md, 16px);
-      background: var(--rel-bg-surface);
-      border: 1px solid var(--rel-border-default);
-      border-radius: var(--rel-border-radius-sm, 8px);
-      color: var(--rel-text-default);
-      cursor: pointer;
-      width: 100%;
-      text-align: left;
-      transition: border-color 0.15s ease;
-      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-accent);
-    }
-
-    .trigger-button:focus-within {
-      outline: 2px solid var(--rel-border-focus);
-      outline-offset: 2px;
-    }
-
-    .trigger-button.error {
-      border-color: var(--rel-border-danger);
-    }
-
-    .trigger-button.error:focus-within {
-      outline-color: var(--rel-border-danger);
-    }
-
-    /* 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;
-    }
-
-    /* Typed-entry error line (the component has no helper-text API). */
-    .range-picker-support.error {
-      margin-top: var(--rel-spacing-2xs);
-      color: var(--rel-text-danger);
-      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);
-    }
-
-    .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 shell ── */
-    .popover {
-      /* Reset native [popover] UA styles first (the shell is promoted to
-         the top layer so transformed / overflow:hidden ancestors — e.g. a
-         centered rel-modal panel — can't hijack or clip 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;
-      padding: 0;
-      width: auto;
-      height: auto;
-      color: inherit;
-      position: absolute;
-      top: calc(100% + 4px);
-      left: 0;
-      z-index: 2147483647;
-      border: 1px solid var(--rel-border-default);
-      border-radius: var(--rel-border-radius-sm, 8px);
-      background: var(--rel-bg-neutral);
-      box-shadow: var(--rel-shadows-shadow-200);
-      /* Never wider or taller than the viewport (small screens) — the
-         two-calendar layout scrolls inside the shell instead of bleeding
-         off-screen. border-box so the caps include the 1px borders. */
-      box-sizing: border-box;
-      max-width: calc(100vw - 16px);
-      max-height: calc(100vh - 16px);
-      overflow: auto;
-      display: none;
-    }
-
-    .popover.open { display: block; }
-
-    .popover.popup {
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
-
-    .backdrop {
-      position: fixed;
-      inset: 0;
-      /* Reset native [popover] UA styles — the backdrop is promoted to the
-         top layer right before the panel so the panel stacks above it. */
-      margin: 0;
-      padding: 0;
-      width: auto;
-      height: auto;
-      border: none;
-      z-index: 2147483646;
-      background: rgba(0,0,0,0.4);
-    }
-
-    /* ── Two-panel wrapper ── */
-    .picker-wrapper {
-      font-family: var(--rel-body-lg-regular-font-family);
-      font-weight: var(--rel-body-lg-regular-font-weight);
-      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-border-default);
-      padding: var(--rel-spacing-sm);
-      background: var(--rel-bg-surface-elevated);
-      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 var(--rel-spacing-sm);
-      cursor: pointer;
-      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);
-      color: var(--rel-action-neutral-label-icons-link);
-      background: var(--rel-bg-neutral-elevated-1);
-      border: none;
-      border-radius: var(--rel-border-radius-sm, 8px);
-      width: 100%;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      transition: background 0.15s ease;
-    }
-
-    .preset-item:hover:not(.active) {
-      background: var(--rel-action-overlay-hover);
-    }
-
-    .preset-item.active {
-      background: var(--rel-bg-neutral-inverse-2);
-      color: var(--rel-text-inverse);
-      font-weight: var(--rel-body-sm-semibold-font-weight);
-    }
-
-    .preset-item.full-width {
-      grid-column: 1 / -1;
-    }
-
-    /* Single-key hint chip on each preset (T, M, W, …). */
-    .preset-key {
-      flex-shrink: 0;
-      margin-left: var(--rel-spacing-2xs);
-      border: 1px solid var(--rel-border-default);
-      border-bottom-width: 2px;
-      border-radius: var(--rel-border-radius-xs);
-      background: var(--rel-bg-surface);
-      padding: 0 var(--rel-spacing-3xs);
-      min-width: 18px;
-      text-align: center;
-      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);
-      color: var(--rel-text-label);
-    }
-
-    .preset-item.active .preset-key {
-      display: none;
-    }
-
-    /* ── FROM/TO inputs ── */
-    .date-inputs {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 14px 8px 4px;
-      border-top: 1px solid var(--rel-border-default);
-      margin-top: auto;
-    }
-
-    .date-input-group {
-      flex: 1;
-      min-width: 0;
-      position: relative;
-    }
-
-    .date-input-label {
-      position: absolute;
-      top: -8px;
-      left: 10px;
-      /* Figma: the FROM/TO tag is the nested TextField's floating label (body-sm-regular) */
-      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);
-      color: var(--rel-text-body);
-      background: var(--rel-bg-surface);
-      padding: 0 3px;
-    }
-
-    .date-input-value {
-      display: block;
-      border: 1px solid var(--rel-border-default);
-      border-radius: var(--rel-border-radius-sm, 8px);
-      padding: 6px 8px;
-      color: var(--rel-text-default);
-      background: var(--rel-bg-surface);
-      width: 100%;
-      box-sizing: border-box;
-      font-family: var(--rel-body-md-semibold-font-family);
-      font-weight: var(--rel-body-md-semibold-font-weight);
-      font-size: var(--rel-body-md-semibold-font-size);
-      line-height: var(--rel-body-md-semibold-line-height);
-      letter-spacing: var(--rel-body-md-semibold-letter-spacing);
-    }
-
-    .date-input-value.empty {
-      color: var(--rel-text-placeholder);
-      font-weight: var(--rel-body-md-regular-font-weight);
-    }
-
-    /* ── 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-family: var(--rel-body-lg-semibold-font-family);
-      font-weight: var(--rel-body-lg-semibold-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);
-      color: var(--rel-text-label);
-    }
-
-    .nav-btn {
-      background: none;
-      border: none;
-      cursor: pointer;
-      color: var(--rel-action-neutral-label-icons-ghost);
-      padding: var(--rel-spacing-2xs);
-      border-radius: var(--rel-border-radius-sm, 8px);
-      display: flex;
-      align-items: center;
-      transition: background 0.15s ease;
-    }
-
-    .nav-btn:hover { background: var(--rel-action-overlay-hover); }
-
-    /* ── Weekday header ── */
-    .week-header {
-      display: grid;
-      grid-template-columns: repeat(7, 1fr);
-      text-align: center;
-    }
-
-    .week-day {
-      color: var(--rel-text-body);
-      padding: 2px 0;
-      /* Figma: sm-regular family + xs-medium weight on sm-medium metrics */
-      font-family: var(--rel-body-sm-regular-font-family);
-      font-weight: var(--rel-body-xs-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);
-      text-align: center;
-    }
-
-    /* ── Calendar grid ── */
-    .calendar-table {
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
-    }
-
-    .calendar-grid {
-      display: grid;
-      grid-template-columns: repeat(7, 1fr);
-    }
-
-    .calendar-week {
-      grid-column: 1 / -1;
-      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:focus-visible {
-      outline: 2px solid var(--rel-border-focus);
-      outline-offset: -2px;
-      z-index: 2;
-    }
-
-    .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-bg-neutral-elevated-2);
-    }
-
-    .day-cell.range-start:not(.range-end) {
-      background: linear-gradient(to right, transparent 50%, var(--rel-bg-neutral-elevated-2) 50%);
-    }
-
-    .day-cell.range-end:not(.range-start) {
-      background: linear-gradient(to left, transparent 50%, var(--rel-bg-neutral-elevated-2) 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-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);
-      color: var(--rel-text-default);
-      position: relative;
-      z-index: 1;
-      transition: background 0.15s ease;
-    }
-
-    .day-cell:not(.disabled):not(.other-month):not(.range-start):not(.range-end):hover .day-inner {
-      background: var(--rel-action-overlay-hover);
-    }
-
-    /* Pressed (Figma State=Active): elevated-2 fill on the day circle */
-    .day-cell:not(.disabled):not(.other-month):not(.range-start):not(.range-end):active .day-inner {
-      background: var(--rel-bg-neutral-elevated-2);
-    }
-
-    /* Weekend (Figma Day of a week=Weekend): 70% text opacity unless a range endpoint */
-    .day-cell.weekend:not(.range-start):not(.range-end) .day-inner {
-      opacity: 0.7;
-    }
-
-    /* Today: green outline */
-    .day-cell.today:not(.range-start):not(.range-end) .day-inner {
-      font-weight: var(--rel-body-md-medium-font-weight);
-      border: 2px solid var(--rel-border-brand);
-    }
-
-    /* Range endpoints: dark fill */
-    .day-cell.range-start .day-inner,
-    .day-cell.range-end .day-inner {
-      background: var(--rel-action-brand-fill);
-      color: var(--rel-action-brand-label-icons-primary);
-      font-weight: var(--rel-body-sm-semibold-font-weight);
-    }
-
-    /* Today AND endpoint: green ring + dark fill */
-    .day-cell.today.range-start .day-inner,
-    .day-cell.today.range-end .day-inner {
-      background: var(--rel-action-brand-fill);
-      color: var(--rel-action-brand-label-icons-primary);
-      border: 2px solid var(--rel-border-brand);
-    }
-
-    /* ── Footer ── */
-    .calendar-footer {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding-top: 12px;
-      border-top: 1px solid var(--rel-border-default);
-      margin-top: auto;
-      gap: 8px;
-    }
-
-    .footer-right {
-      display: flex;
-      gap: 8px;
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .preset-item, .nav-btn, .day-inner, .icon-button {
-        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);
-    window.removeEventListener("resize", this.onReposition);
-    window.removeEventListener("scroll", this.onReposition, true);
-    this.hideTopLayer();
-  }
-
-  updated(changed: Map<string, unknown>) {
-    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` is a public reflected property (consumers may set it directly,
-    // not only via the trigger), so top-layer promotion syncs here rather
-    // than inside openPopover/cancelPopover.
-    if (changed.has("open")) {
-      if (this.open) {
-        this.showTopLayer();
-        window.addEventListener("resize", this.onReposition);
-        window.addEventListener("scroll", this.onReposition, true);
-      } else {
-        window.removeEventListener("resize", this.onReposition);
-        window.removeEventListener("scroll", this.onReposition, true);
-        this.hideTopLayer();
-      }
-    }
-  }
-
-  /* A transformed ancestor (e.g. rel-modal's centered panel with
-   * translate(-50%,-50%)) becomes the containing block for position:fixed
-   * descendants, and its overflow:hidden clips position:absolute ones —
-   * either way the picker shell breaks inside a modal. Promoting shell
-   * (and popup-mode backdrop) to the browser top layer sidesteps both —
-   * same fix as rel-popover / rel-autocomplete / rel-select. `manual`
-   * keeps outside-click and Escape handling under this component's own
-   * control. While in the top layer the CSS anchoring (absolute, below
-   * the trigger) is meaningless, so popover mode gets inline fixed
-   * coordinates from updatePopoverPosition(). */
-
-  private showTopLayer() {
-    // Backdrop first — later-shown popovers stack above earlier ones.
-    for (const el of [this.mode === "popup" ? this.backdropEl : undefined, this.popoverEl]) {
-      if (!el || typeof el.showPopover !== "function") continue;
-      try {
-        if (!el.matches(":popover-open")) el.showPopover();
-      } catch {
-        /* older engines / detached element — CSS fallback applies */
-      }
-    }
-    if (this.mode === "popover") {
-      requestAnimationFrame(() => this.updatePopoverPosition());
-    }
-  }
-
-  private hideTopLayer() {
-    for (const el of [this.popoverEl, this.backdropEl]) {
-      if (!el || typeof el.hidePopover !== "function") continue;
-      try {
-        if (el.matches(":popover-open")) el.hidePopover();
-      } catch {
-        /* already hidden or unsupported — nothing to do */
-      }
-    }
-    if (this.popoverEl) {
-      this.popoverEl.style.position = "";
-      this.popoverEl.style.top = "";
-      this.popoverEl.style.left = "";
-    }
-  }
-
-  private onReposition = () => {
-    if (this.open && this.mode === "popover") this.updatePopoverPosition();
-  };
-
-  private updatePopoverPosition = () => {
-    const panel = this.popoverEl;
-    if (!panel || !this.open || this.mode !== "popover") return;
-
-    // Host rect anchors both trigger variants (default button and icon).
-    const t = this.getBoundingClientRect();
-    const c = panel.getBoundingClientRect();
-
-    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 shell 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`;
-  };
-
-  // ── 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.triggerInput?.focus();
-      return;
-    }
-
-    // composedPath-aware: a document-level e.target retargets to the host,
-    // so a plain tagName check misses the typed-entry input in the shadow
-    // root — single-key preset shortcuts must not fire while typing.
-    if (isEditableTarget(e)) return;
-    if (e.ctrlKey || e.metaKey || e.altKey) 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;
-    this.focusedDate = 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() {
-    // An empty draft is committable when a committed range exists — this is
-    // how Reset propagates to the trigger (Reset → Apply clears the input).
-    if (!this.draftFrom && !this.draftTo && !this.from && !this.to) return;
-    this.from = this.draftFrom;
-    this.to = this.draftTo;
-    this.inputText = null;
-    this.inputError = null;
-    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 clearRange(e: Event) {
-    e.stopPropagation();
-    this.from = "";
-    this.to = "";
-    this.draftFrom = "";
-    this.draftTo = "";
-    this.draftActivePreset = null;
-    this.isSelectingRange = false;
-    this.hoverDate = null;
-    this.inputText = null;
-    this.inputError = null;
-    this.dispatchEvent(
-      new CustomEvent("rel-change", {
-        detail: { from: "", to: "", label: "" },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  // ── Typed keyboard entry ──
-
-  /**
-   * Parse "date → date" text into an ISO from/to pair, or null. Each side
-   * goes through rel-date-picker's parseDateInput, so ISO / numeric /
-   * month-name dates and the t / t±N shortcuts all work per side.
-   * Separators: "→", "..", spaced "-", or the word "to" ("t - t+7",
-   * "21/7 to 28/7"). A single date yields a one-day range. Reversed input
-   * is normalized (from ≤ to). dayFirst is hard-coded false because the
-   * displayed format is always MM/DD/YYYY.
-   */
-  private parseRangeText(text: string): { from: string; to: string } | null {
-    const parts = text
-      .split(/\s+to\s+|\s*(?:→|\.\.)\s*|\s+-\s+/i)
-      .map((p) => p.trim())
-      .filter(Boolean);
-    if (parts.length < 1 || parts.length > 2) return null;
-
-    const opts = { referenceDate: new Date(), dayFirst: false, locale: this.locale };
-    const fromDate = parseDateInput(parts[0], opts);
-    if (!fromDate) return null;
-    const toDate = parts.length === 2 ? parseDateInput(parts[1], opts) : fromDate;
-    if (!toDate) return null;
-
-    const [a, b] =
-      fromDate.getTime() <= toDate.getTime() ? [fromDate, toDate] : [toDate, fromDate];
-    return { from: this.formatISODate(a), to: this.formatISODate(b) };
-  }
-
-  /**
-   * 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 range 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.from || this.to) {
-        this.from = "";
-        this.to = "";
-        this.draftFrom = "";
-        this.draftTo = "";
-        this.draftActivePreset = null;
-        this.dispatchEvent(
-          new CustomEvent("rel-change", {
-            detail: { from: "", to: "", label: "" },
-            bubbles: true,
-            composed: true,
-          })
-        );
-      }
-      if (this.open) this.cancelPopover();
-      return;
-    }
-
-    const range = this.parseRangeText(text);
-    if (!range) {
-      this.inputError = "Invalid date range";
-      return;
-    }
-    const fromDate = this.parseISODate(range.from)!;
-    const toDate = this.parseISODate(range.to)!;
-    if (this.isDateDisabled(fromDate) || this.isDateDisabled(toDate)) {
-      this.inputError = "Date not available";
-      return;
-    }
-
-    this.from = range.from;
-    this.to = range.to;
-    this.inputText = null;
-    this.inputError = null;
-    this.dispatchEvent(
-      new CustomEvent("rel-change", {
-        detail: { from: this.from, to: this.to, label: this.displayLabel },
-        bubbles: true,
-        composed: true,
-      })
-    );
-    if (this.open) this.cancelPopover();
-  }
-
-  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 panel (previous trigger behavior).
-        if (!this.open) this.openPopover();
-      } else {
-        this.commitTypedValue();
-      }
-      return;
-    }
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      if (!this.open) this.openPopover();
-      return;
-    }
-    if (e.key === "Escape" && this.inputText !== null) {
-      // Revert the typed text; the document listener closes the panel.
-      this.inputText = null;
-      this.inputError = null;
-    }
-  }
-
-  /** Clicking anywhere on the field opens the panel (never closes). */
-  private handleFieldClick() {
-    if (this.open || this.disabled) return;
-    this.openPopover();
-  }
-
-  /** The calendar icon toggles the panel (previous trigger behavior). */
-  private handleIconClick(e: Event) {
-    e.stopPropagation();
-    this.toggleOpen();
-  }
-
-  /** 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();
-  };
-
-  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--;
-    }
-    announce(`${this.getMonthName()} ${this.viewYear}`);
-  }
-
-  private nextMonth() {
-    if (this.viewMonth === 11) {
-      this.viewMonth = 0;
-      this.viewYear++;
-    } else {
-      this.viewMonth++;
-    }
-    announce(`${this.getMonthName()} ${this.viewYear}`);
-  }
-
-  private getMonthName(): string {
-    return new Intl.DateTimeFormat("en-US", { month: "long" }).format(
-      new Date(this.viewYear, this.viewMonth, 1)
-    );
-  }
-
-  private dayLabelFormatter: Intl.DateTimeFormat | null = null;
-
-  private formatDayLabel(day: RangeDay): string {
-    if (!this.dayLabelFormatter) {
-      this.dayLabelFormatter = new Intl.DateTimeFormat("en-US", {
-        weekday: "long",
-        month: "long",
-        day: "numeric",
-        year: "numeric",
-      });
-    }
-    let label = this.dayLabelFormatter.format(day.date);
-    if (day.isDraftFrom) label += ", range start";
-    if (day.isDraftTo) label += ", range end";
-    return label;
-  }
-
-  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,
-        isWeekend: date.getDay() === 0 || date.getDay() === 6,
-      });
-    }
-
-    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),
-        isWeekend: date.getDay() === 0 || date.getDay() === 6,
-      });
-    }
-
-    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,
-        isWeekend: date.getDay() === 0 || date.getDay() === 6,
-      });
-    }
-
-    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;
-      announce(`From date ${this.formatDisplayDate(iso)}`);
-    } else {
-      const fromDate = this.parseISODate(this.draftFrom);
-      if (!fromDate) {
-        this.draftFrom = iso;
-        this.draftTo = "";
-        announce(`From date ${this.formatDisplayDate(iso)}`);
-        return;
-      }
-
-      if (day.date.getTime() >= fromDate.getTime()) {
-        this.draftTo = iso;
-        announce(`To date ${this.formatDisplayDate(iso)}`);
-      } else {
-        this.draftTo = this.draftFrom;
-        this.draftFrom = iso;
-        announce(`From date ${this.formatDisplayDate(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);
-  }
-
-  // ── Grid keyboard navigation (APG grid pattern) ──
-
-  /**
-   * The cell that carries tabindex="0". Prefers the last roved date, then the
-   * draft start, then today, then the first selectable day — always exactly
-   * one Tab stop, even after arrowing away with nothing selected.
-   */
-  private getRovingIso(days: RangeDay[]): string {
-    const inView = days.filter((d) => d.isCurrentMonth);
-    if (inView.length === 0) return "";
-
-    const candidates = [
-      this.focusedDate,
-      this.draftFrom,
-      this.formatISODate(new Date()),
-    ];
-    for (const iso of candidates) {
-      if (iso && inView.some((d) => this.formatISODate(d.date) === iso)) {
-        return iso;
-      }
-    }
-    const firstEnabled = inView.find((d) => !d.isDisabled) ?? inView[0];
-    return this.formatISODate(firstEnabled.date);
-  }
-
-  private handleGridKeydown = (e: KeyboardEvent) => {
-    const cell = (e.target as HTMLElement).closest?.(".day-cell") as
-      | HTMLElement
-      | null;
-    const iso = cell?.dataset.iso;
-    if (!iso) return;
-    const date = this.parseISODate(iso);
-    if (!date) return;
-
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      const isDisabled = this.isDateDisabled(date);
-      if (!isDisabled) {
-        this.handleDayClick({
-          date,
-          day: date.getDate(),
-          isCurrentMonth: true,
-          isToday: false,
-          isDraftFrom: false,
-          isDraftTo: false,
-          isInRange: false,
-          isDisabled,
-          isWeekend: false,
-        });
-      }
-      return;
-    }
-
-    const next = new Date(date);
-    const dow = next.getDay();
-    switch (e.key) {
-      case "ArrowLeft":
-        next.setDate(next.getDate() - 1);
-        break;
-      case "ArrowRight":
-        next.setDate(next.getDate() + 1);
-        break;
-      case "ArrowUp":
-        next.setDate(next.getDate() - 7);
-        break;
-      case "ArrowDown":
-        next.setDate(next.getDate() + 7);
-        break;
-      case "Home":
-        next.setDate(
-          next.getDate() -
-            (this.weekStart === "mon" ? (dow === 0 ? 6 : dow - 1) : dow)
-        );
-        break;
-      case "End":
-        next.setDate(
-          next.getDate() +
-            (this.weekStart === "mon" ? (dow === 0 ? 0 : 7 - dow) : 6 - dow)
-        );
-        break;
-      case "PageUp":
-        if (e.shiftKey) next.setFullYear(next.getFullYear() - 1);
-        else next.setMonth(next.getMonth() - 1);
-        break;
-      case "PageDown":
-        if (e.shiftKey) next.setFullYear(next.getFullYear() + 1);
-        else next.setMonth(next.getMonth() + 1);
-        break;
-      default:
-        return;
-    }
-
-    e.preventDefault();
-    this.moveGridFocusTo(next);
-  };
-
-  private async moveGridFocusTo(date: Date) {
-    this.focusedDate = this.formatISODate(date);
-
-    if (
-      date.getMonth() !== this.viewMonth ||
-      date.getFullYear() !== this.viewYear
-    ) {
-      this.viewMonth = date.getMonth();
-      this.viewYear = date.getFullYear();
-    }
-
-    // Keyboard twin of handleDayHover: keep the range preview following focus.
-    if (this.isSelectingRange && !this.isDateDisabled(date)) {
-      this.hoverDate = this.focusedDate;
-    }
-
-    await this.updateComplete;
-    this.renderRoot
-      .querySelector<HTMLElement>(`.day-cell[data-iso="${this.focusedDate}"]`)
-      ?.focus();
-  }
-
-  // ── Render ──
-
-  render() {
-    const quickSelects = this.getQuickSelects();
-    const days = this.getCalendarDays();
-    const rovingIso = this.getRovingIso(days);
-    const weekdayLabels = this.getWeekdayLabels();
-    const weeks: RangeDay[][] = [];
-    for (let i = 0; i < days.length; i += 7) {
-      weeks.push(days.slice(i, i + 7));
-    }
-
-    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`
-            <div
-              part="trigger"
-              class="trigger-button ${this.inputError ? "error" : ""}"
-              @click=${this.handleFieldClick}
-            >
-              <input
-                part="value"
-                class="trigger-input"
-                type="text"
-                .value=${live(this.inputText ?? triggerLabel)}
-                placeholder=${this.placeholder}
-                ?disabled=${this.disabled}
-                autocomplete="off"
-                spellcheck="false"
-                enterkeyhint="done"
-                @input=${this.handleInputInput}
-                @keydown=${this.handleInputKeydown}
-                @blur=${this.handleInputBlur}
-                role="combobox"
-                aria-label=${this.placeholder}
-                aria-haspopup="dialog"
-                aria-expanded=${this.open}
-                aria-controls="range-picker-panel"
-                aria-invalid=${this.inputError !== null}
-                aria-describedby=${this.inputError ? "range-picker-desc" : nothing}
-              />
-              <span class="trigger-icons">
-                ${this.clearable && (this.from || this.to)
-                  ? html`
-                      <button
-                        class="icon-button"
-                        type="button"
-                        aria-label="Clear date range"
-                        @click=${this.clearRange}
-                      >
-                        <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-                          <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 date range panel"
-                  aria-expanded=${this.open}
-                  ?disabled=${this.disabled}
-                  @click=${this.handleIconClick}
-                >
-                  <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>
-              </span>
-            </div>
-            ${this.inputError
-              ? html`<div class="range-picker-support error" id="range-picker-desc">
-                  ${this.inputError}
-                </div>`
-              : nothing}
-          `}
-
-      ${isPopup && this.open
-        ? html`<div part="overlay" class="backdrop" popover="manual" @click=${this.cancelPopover}></div>`
-        : nothing}
-
-      <div
-        part="panel" class="popover ${this.open ? "open" : ""} ${isPopup ? "popup" : ""}"
-        id="range-picker-panel"
-        popover="manual"
-        role="dialog"
-        aria-label="Select date range"
-      >
-        <div class="picker-wrapper">
-
-          <!-- ── Left: Quick select ── -->
-          <div part="list" class="presets">
-            <div class="presets-grid" role="group" aria-label="Quick date selections">
-              ${quickSelects.map(
-                (qs) => html`
-                  <button
-                    part="option" class="preset-item ${qs.fullWidth ? "full-width" : ""} ${this.draftActivePreset === qs.label ? "active" : ""}"
-                    type="button"
-                    ?disabled=${this.disabled}
-                    aria-pressed=${this.draftActivePreset === qs.label}
-                    @click=${() => this.selectQuickSelect(qs)}
-                  >
-                    <span>${qs.label}</span>
-                    ${this.draftActivePreset !== qs.label
-                      ? html`<kbd class="preset-key" aria-hidden="true" title="Press ${qs.key} while the panel is open">${qs.key}</kbd>`
-                      : nothing}
-                    ${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="var(--rel-bg-brand)"/>
-                          <path d="M7 12.5l3.5 3.5 6.5-7" stroke="var(--rel-text-static-dark)" 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
-                part="action" 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
-                part="action" 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="calendar-table" role="grid" aria-label="Select date range">
-              <div class="week-header" role="row">
-                ${weekdayLabels.map(
-                  (label) => html`
-                    <div class="week-day" role="columnheader" aria-label="${label}">
-                      ${label}
-                    </div>
-                  `
-                )}
-              </div>
-
-              <div
-                part="list" class="calendar-grid"
-                @mouseleave=${() => { this.hoverDate = null; }}
-                @keydown=${this.handleGridKeydown}
-              >
-                ${weeks.map(
-                  (week) => html`
-                    <div class="calendar-week" role="row">
-                      ${week.map((day) => {
-                        const iso = this.formatISODate(day.date);
-                        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" : "",
-                          day.isWeekend ? "weekend" : "",
-                        ]
-                          .filter(Boolean)
-                          .join(" ");
-
-                        return html`
-                          <div
-                            class="${cellClasses}"
-                            role="gridcell"
-                            tabindex="${day.isCurrentMonth && iso === rovingIso ? 0 : -1}"
-                            data-iso="${iso}"
-                            aria-label="${this.formatDayLabel(day)}"
-                            aria-selected="${day.isDraftFrom || day.isDraftTo || day.isInRange}"
-                            aria-disabled="${day.isDisabled ? "true" : nothing}"
-                            @click=${() => this.handleDayClick(day)}
-                            @mouseenter=${() => this.handleDayHover(day)}
-                          >
-                            <span class="day-inner">${day.day}</span>
-                          </div>
-                        `;
-                      })}
-                    </div>
-                  `
-                )}
-              </div>
-            </div>
-
-            <div part="footer" 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 && !this.from && !this.to}
-                  @click=${() => this.applySelection()}
-                >
-                  Apply
-                </rel-button>
-              </div>
-            </div>
-
-          </div>
-        </div>
-      </div>
-    `;
-
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "rel-range-picker": RelRangePicker;
-  }
-}