@manzanohq/components 0.1.1 → 0.1.4

package/dist/components/date-range-picker/date-range-picker.component.js

@@ -0,0 +1,567 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import { html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import {
+  getMonthGrid,
+  getWeekdayNames,
+  formatMonthYear,
+  formatDateString,
+  parseDateString,
+  addDays
+} from "../../internal/date-utils.js";
+import styles from "./date-range-picker.styles.js";
+class MzDateRangePicker extends ManzanoElement {
+  constructor() {
+    super();
+    this.startDate = "";
+    this.endDate = "";
+    this.min = "";
+    this.max = "";
+    this.placeholder = "Select dates";
+    this.disabled = false;
+    this.inline = false;
+    this.firstDayOfWeek = 0;
+    this.showPresets = false;
+    this.locale = "";
+    this.isOpen = false;
+    this.selectionPhase = "idle";
+    this.hoverDate = "";
+    this.pendingStart = "";
+    this.pendingEnd = "";
+    this.blurTimeout = null;
+    this.outsideClickHandler = (e) => {
+      if (!this.contains(e.target)) {
+        this.hide();
+      }
+    };
+    const now = /* @__PURE__ */ new Date();
+    this.leftViewDate = new Date(now.getFullYear(), now.getMonth(), 1);
+  }
+  willUpdate(changed) {
+    if (changed.has("startDate") && this.startDate) {
+      const parsed = parseDateString(this.startDate);
+      if (parsed) {
+        this.leftViewDate = new Date(parsed.getFullYear(), parsed.getMonth(), 1);
+      }
+    }
+    if (changed.has("startDate") || changed.has("endDate")) {
+      if (!this.isOpen) {
+        this.pendingStart = this.startDate;
+        this.pendingEnd = this.endDate;
+      }
+    }
+  }
+  updated(changed) {
+    if (changed.has("isOpen")) {
+      this.toggleAttribute("open", this.isOpen);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("click", this.outsideClickHandler, true);
+    if (this.blurTimeout) clearTimeout(this.blurTimeout);
+  }
+  /** Opens the calendar dropdown. */
+  show() {
+    if (this.disabled || this.inline) return;
+    this.pendingStart = this.startDate;
+    this.pendingEnd = this.endDate;
+    this.selectionPhase = "idle";
+    this.hoverDate = "";
+    this.isOpen = true;
+    document.addEventListener("click", this.outsideClickHandler, true);
+    this.emit("mz-show");
+    this.updateComplete.then(() => this.focusInitialDay());
+  }
+  /** Closes the calendar dropdown without applying. */
+  hide() {
+    if (!this.isOpen) return;
+    this.isOpen = false;
+    this.selectionPhase = "idle";
+    this.hoverDate = "";
+    this.pendingStart = this.startDate;
+    this.pendingEnd = this.endDate;
+    document.removeEventListener("click", this.outsideClickHandler, true);
+    this.emit("mz-hide");
+    const input = this.shadowRoot?.querySelector(".drp__input");
+    input?.focus();
+  }
+  /** Applies the pending selection and closes. */
+  apply() {
+    if (!this.pendingStart || !this.pendingEnd) return;
+    this.startDate = this.pendingStart;
+    this.endDate = this.pendingEnd;
+    this.selectionPhase = "idle";
+    this.hoverDate = "";
+    this.emit("mz-range-change", {
+      detail: { startDate: this.startDate, endDate: this.endDate }
+    });
+    if (!this.inline) {
+      this.isOpen = false;
+      document.removeEventListener("click", this.outsideClickHandler, true);
+      this.emit("mz-hide");
+    }
+  }
+  /** Clears the selected range. */
+  clear() {
+    this.pendingStart = "";
+    this.pendingEnd = "";
+    this.selectionPhase = "idle";
+    this.hoverDate = "";
+    if (this.inline) {
+      this.startDate = "";
+      this.endDate = "";
+      this.emit("mz-range-change", { detail: { startDate: "", endDate: "" } });
+    }
+  }
+  // --- Formatting ---
+  formatDisplay(dateStr) {
+    if (!dateStr) return "";
+    const parsed = parseDateString(dateStr);
+    if (!parsed) return dateStr;
+    const locale = this.locale || void 0;
+    return new Intl.DateTimeFormat(locale, { year: "numeric", month: "short", day: "numeric" }).format(parsed);
+  }
+  // --- Date checks ---
+  isDateDisabled(dateStr) {
+    if (this.min && dateStr < this.min) return true;
+    if (this.max && dateStr > this.max) return true;
+    return false;
+  }
+  // --- Selection logic (operates on pending state) ---
+  handleDayClick(dateStr) {
+    if (this.isDateDisabled(dateStr)) return;
+    if (this.selectionPhase === "idle") {
+      this.pendingStart = dateStr;
+      this.pendingEnd = "";
+      this.selectionPhase = "selecting-end";
+    } else {
+      if (dateStr < this.pendingStart) {
+        this.pendingStart = dateStr;
+        this.pendingEnd = "";
+      } else {
+        this.pendingEnd = dateStr;
+        this.selectionPhase = "idle";
+        this.hoverDate = "";
+      }
+    }
+  }
+  handleDayHover(dateStr) {
+    if (this.selectionPhase === "selecting-end") {
+      this.hoverDate = dateStr;
+    }
+  }
+  // --- Interaction handlers ---
+  handleControlClick(e) {
+    e.stopPropagation();
+    if (this.disabled) return;
+    if (this.isOpen) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+  handleBlur() {
+    this.blurTimeout = setTimeout(() => {
+      if (this.isOpen) this.hide();
+    }, 150);
+  }
+  handleKeydown(e) {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      this.hide();
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (this.isOpen) {
+        if (this.pendingStart && this.pendingEnd) {
+          this.apply();
+        } else {
+          this.hide();
+        }
+      } else {
+        this.show();
+      }
+    }
+  }
+  handlePanelKeydown(e) {
+    if (e.key === "Enter") {
+      const target = e.target;
+      if (target.classList?.contains("drp__day")) return;
+      e.preventDefault();
+      if (this.pendingStart && this.pendingEnd) {
+        this.apply();
+      }
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      this.hide();
+    } else if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(e.key)) {
+      this.handleArrowKey(e);
+    }
+  }
+  handleArrowKey(e) {
+    const target = e.target;
+    if (!target.classList?.contains("drp__day")) return;
+    e.preventDefault();
+    const dateStr = target.getAttribute("data-date");
+    if (!dateStr) return;
+    const parsed = parseDateString(dateStr);
+    if (!parsed) return;
+    let next;
+    switch (e.key) {
+      case "ArrowLeft":
+        next = addDays(parsed, -1);
+        break;
+      case "ArrowRight":
+        next = addDays(parsed, 1);
+        break;
+      case "ArrowUp":
+        next = addDays(parsed, -7);
+        break;
+      case "ArrowDown":
+        next = addDays(parsed, 7);
+        break;
+      default:
+        return;
+    }
+    const nextStr = formatDateString(next.getFullYear(), next.getMonth(), next.getDate());
+    if (this.isDateDisabled(nextStr)) return;
+    const rightViewDate = new Date(this.leftViewDate.getFullYear(), this.leftViewDate.getMonth() + 2, 0);
+    if (next < this.leftViewDate) {
+      this.prevMonth();
+    } else if (next > rightViewDate) {
+      this.nextMonth();
+    }
+    this.updateComplete.then(() => {
+      const btn = this.shadowRoot?.querySelector(`[data-date="${nextStr}"]`);
+      btn?.focus();
+    });
+  }
+  focusInitialDay() {
+    const panel = this.shadowRoot?.querySelector(".drp__panel");
+    if (!panel) return;
+    const target = panel.querySelector(".drp__day--selected:not(:disabled)") || panel.querySelector(".drp__day--today:not(:disabled)") || panel.querySelector(".drp__day:not(:disabled):not(.drp__day--outside)");
+    target?.focus();
+  }
+  handlePanelClick(e) {
+    e.stopPropagation();
+    if (this.blurTimeout) {
+      clearTimeout(this.blurTimeout);
+      this.blurTimeout = null;
+    }
+  }
+  // --- Navigation ---
+  prevMonth() {
+    this.leftViewDate = new Date(this.leftViewDate.getFullYear(), this.leftViewDate.getMonth() - 1, 1);
+  }
+  nextMonth() {
+    this.leftViewDate = new Date(this.leftViewDate.getFullYear(), this.leftViewDate.getMonth() + 1, 1);
+  }
+  // --- Presets ---
+  applyPreset(type) {
+    const today = /* @__PURE__ */ new Date();
+    const y = today.getFullYear();
+    const m = today.getMonth();
+    const d = today.getDate();
+    const todayStr = formatDateString(y, m, d);
+    let start = "";
+    let end = "";
+    switch (type) {
+      case "today":
+        start = end = todayStr;
+        break;
+      case "last7": {
+        const s = new Date(y, m, d - 6);
+        start = formatDateString(s.getFullYear(), s.getMonth(), s.getDate());
+        end = todayStr;
+        break;
+      }
+      case "last30": {
+        const s = new Date(y, m, d - 29);
+        start = formatDateString(s.getFullYear(), s.getMonth(), s.getDate());
+        end = todayStr;
+        break;
+      }
+      case "thisMonth":
+        start = formatDateString(y, m, 1);
+        end = todayStr;
+        break;
+    }
+    this.pendingStart = start;
+    this.pendingEnd = end;
+    this.selectionPhase = "idle";
+    this.hoverDate = "";
+    const parsed = parseDateString(start);
+    if (parsed) {
+      this.leftViewDate = new Date(parsed.getFullYear(), parsed.getMonth(), 1);
+    }
+    this.startDate = start;
+    this.endDate = end;
+    this.emit("mz-range-change", { detail: { startDate: start, endDate: end } });
+    if (!this.inline) {
+      this.isOpen = false;
+      document.removeEventListener("click", this.outsideClickHandler, true);
+      this.emit("mz-hide");
+    }
+  }
+  // --- Day state classification (uses pending values) ---
+  getDayCellClasses(dateStr, isCurrentMonth) {
+    const isStart = dateStr === this.pendingStart;
+    const isEnd = dateStr === this.pendingEnd;
+    let inRange = false;
+    let isRangeStart = false;
+    let isRangeEnd = false;
+    let inPreview = false;
+    let isPreviewStart = false;
+    let isPreviewEnd = false;
+    if (this.pendingStart && this.pendingEnd) {
+      inRange = dateStr > this.pendingStart && dateStr < this.pendingEnd;
+      isRangeStart = isStart;
+      isRangeEnd = isEnd;
+    } else if (this.selectionPhase === "selecting-end" && this.pendingStart && this.hoverDate) {
+      const effectiveEnd = this.hoverDate >= this.pendingStart ? this.hoverDate : this.pendingStart;
+      const effectiveStart = this.hoverDate >= this.pendingStart ? this.pendingStart : this.hoverDate;
+      inPreview = dateStr > effectiveStart && dateStr < effectiveEnd;
+      isPreviewStart = dateStr === effectiveStart;
+      isPreviewEnd = dateStr === effectiveEnd;
+    }
+    return {
+      "drp__day-cell": true,
+      "drp__day-cell--in-range": inRange,
+      "drp__day-cell--range-start": isRangeStart && isCurrentMonth,
+      "drp__day-cell--range-end": isRangeEnd && isCurrentMonth,
+      "drp__day-cell--preview": inPreview,
+      "drp__day-cell--preview-start": isPreviewStart && isCurrentMonth,
+      "drp__day-cell--preview-end": isPreviewEnd && isCurrentMonth
+    };
+  }
+  // --- Render helpers ---
+  renderMonth(viewDate, showPrev, showNext) {
+    const year = viewDate.getFullYear();
+    const month = viewDate.getMonth();
+    const locale = this.locale || void 0;
+    const weekdayNames = getWeekdayNames(this.firstDayOfWeek, locale);
+    const weeks = getMonthGrid(year, month, this.firstDayOfWeek);
+    return html`
+      <div class="drp__month" role="grid" aria-label="${formatMonthYear(viewDate, locale)}">
+        <div class="drp__month-header">
+          ${showPrev ? html`<button type="button" class="drp__nav" @click=${this.prevMonth} aria-label="Previous month">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
+              </button>` : html`<div class="drp__nav-spacer"></div>`}
+          <span class="drp__month-title">${formatMonthYear(viewDate, locale)}</span>
+          ${showNext ? html`<button type="button" class="drp__nav" @click=${this.nextMonth} aria-label="Next month">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
+              </button>` : html`<div class="drp__nav-spacer"></div>`}
+        </div>
+
+        <div class="drp__weekdays" role="row">
+          ${weekdayNames.map((name) => html`<div class="drp__weekday" role="columnheader">${name}</div>`)}
+        </div>
+
+        ${weeks.map((week) => html`
+          <div class="drp__days" role="row">
+            ${week.map((cell) => this.renderDayCell(cell))}
+          </div>
+        `)}
+      </div>
+    `;
+  }
+  renderDayCell(cell) {
+    if (!cell.isCurrentMonth) {
+      return html`<div class="drp__day-cell"><div class="drp__day drp__day--outside"></div></div>`;
+    }
+    const dateStr = formatDateString(
+      cell.date.getFullYear(),
+      cell.date.getMonth(),
+      cell.date.getDate()
+    );
+    const isDisabledDate = this.isDateDisabled(dateStr);
+    const isSelected = dateStr === this.pendingStart || dateStr === this.pendingEnd;
+    const cellClasses = this.getDayCellClasses(dateStr, cell.isCurrentMonth);
+    const locale = this.locale || void 0;
+    const fullDateLabel = new Intl.DateTimeFormat(locale, {
+      weekday: "long",
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    }).format(cell.date);
+    return html`
+      <div class=${classMap(cellClasses)}>
+        <button type="button"
+          class=${classMap({
+      "drp__day": true,
+      "drp__day--selected": isSelected,
+      "drp__day--today": cell.isToday,
+      "drp__day--disabled": isDisabledDate
+    })}
+          ?disabled=${isDisabledDate}
+          role="gridcell"
+          aria-selected=${isSelected ? "true" : "false"}
+          aria-label="${fullDateLabel}"
+          data-date="${dateStr}"
+          tabindex=${isSelected ? "0" : "-1"}
+          @click=${() => this.handleDayClick(dateStr)}
+          @mouseenter=${() => this.handleDayHover(dateStr)}>
+          ${cell.date.getDate()}
+        </button>
+      </div>
+    `;
+  }
+  renderFooter() {
+    const hasCompleteRange = this.pendingStart && this.pendingEnd;
+    const hasPending = this.pendingStart || this.pendingEnd;
+    return html`
+      <div class="drp__footer">
+        ${this.showPresets ? html`
+          <div class="drp__presets">
+            <button type="button" class="drp__preset" @click=${() => this.applyPreset("today")}>Today</button>
+            <button type="button" class="drp__preset" @click=${() => this.applyPreset("last7")}>Last 7 days</button>
+            <button type="button" class="drp__preset" @click=${() => this.applyPreset("last30")}>Last 30 days</button>
+            <button type="button" class="drp__preset" @click=${() => this.applyPreset("thisMonth")}>This month</button>
+          </div>
+        ` : nothing}
+        <div class="drp__actions">
+          ${hasPending ? html`
+            <button type="button" class="drp__clear" @click=${() => this.clear()}>Clear</button>
+          ` : nothing}
+          <button type="button" class="drp__apply" ?disabled=${!hasCompleteRange} @click=${() => this.apply()}>Apply</button>
+        </div>
+      </div>
+    `;
+  }
+  render() {
+    const rightViewDate = new Date(this.leftViewDate.getFullYear(), this.leftViewDate.getMonth() + 1, 1);
+    const showPanel = this.isOpen || this.inline;
+    let announcement = "";
+    if (this.selectionPhase === "selecting-end" && this.pendingStart) {
+      announcement = `Start date selected: ${this.formatDisplay(this.pendingStart)}. Select an end date.`;
+    } else if (this.pendingStart && this.pendingEnd) {
+      announcement = `Range selected: ${this.formatDisplay(this.pendingStart)} to ${this.formatDisplay(this.pendingEnd)}. Press Apply or Enter to confirm.`;
+    }
+    return html`
+      <div part="base" class=${classMap({
+      "drp": true,
+      "drp--open": this.isOpen,
+      "drp--disabled": this.disabled,
+      "drp--inline": this.inline
+    })}>
+        ${!this.inline ? html`
+          <div part="control" class="drp__control" @click=${this.handleControlClick}>
+            <input class="drp__input drp__input--start" type="text"
+              .value=${this.formatDisplay(this.startDate)}
+              placeholder=${this.startDate ? "" : this.placeholder}
+              ?disabled=${this.disabled}
+              readonly
+              @focus=${() => {
+    }}
+              @blur=${this.handleBlur}
+              @keydown=${this.handleKeydown}
+              aria-label="Start date"
+            />
+            ${this.startDate || this.endDate ? html`
+              <span class="drp__arrow">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
+              </span>
+              <input class="drp__input drp__input--end" type="text"
+                .value=${this.formatDisplay(this.endDate)}
+                placeholder="End date"
+                ?disabled=${this.disabled}
+                readonly
+                tabindex="-1"
+                aria-label="End date"
+              />
+            ` : nothing}
+            <div class="drp__icon">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
+                <line x1="16" y1="2" x2="16" y2="6"/>
+                <line x1="8" y1="2" x2="8" y2="6"/>
+                <line x1="3" y1="10" x2="21" y2="10"/>
+              </svg>
+            </div>
+          </div>
+        ` : nothing}
+
+        ${showPanel ? html`
+          <div part="panel" class="drp__panel" role="dialog" aria-label="Date range picker"
+            @click=${this.handlePanelClick}
+            @keydown=${this.handlePanelKeydown}
+            @mouseleave=${() => {
+      this.hoverDate = "";
+    }}>
+            <div class="drp__months">
+              ${this.renderMonth(this.leftViewDate, true, false)}
+              ${this.renderMonth(rightViewDate, false, true)}
+            </div>
+            ${this.renderFooter()}
+          </div>
+        ` : nothing}
+
+        <div class="drp__sr-only" role="status" aria-live="polite">${announcement}</div>
+      </div>
+    `;
+  }
+}
+MzDateRangePicker.styles = styles;
+__decorateClass([
+  property({ attribute: "start-date" })
+], MzDateRangePicker.prototype, "startDate", 2);
+__decorateClass([
+  property({ attribute: "end-date" })
+], MzDateRangePicker.prototype, "endDate", 2);
+__decorateClass([
+  property()
+], MzDateRangePicker.prototype, "min", 2);
+__decorateClass([
+  property()
+], MzDateRangePicker.prototype, "max", 2);
+__decorateClass([
+  property()
+], MzDateRangePicker.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzDateRangePicker.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzDateRangePicker.prototype, "inline", 2);
+__decorateClass([
+  property({ type: Number, attribute: "first-day-of-week" })
+], MzDateRangePicker.prototype, "firstDayOfWeek", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-presets" })
+], MzDateRangePicker.prototype, "showPresets", 2);
+__decorateClass([
+  property()
+], MzDateRangePicker.prototype, "locale", 2);
+__decorateClass([
+  state()
+], MzDateRangePicker.prototype, "isOpen", 2);
+__decorateClass([
+  state()
+], MzDateRangePicker.prototype, "leftViewDate", 2);
+__decorateClass([
+  state()
+], MzDateRangePicker.prototype, "selectionPhase", 2);
+__decorateClass([
+  state()
+], MzDateRangePicker.prototype, "hoverDate", 2);
+__decorateClass([
+  state()
+], MzDateRangePicker.prototype, "pendingStart", 2);
+__decorateClass([
+  state()
+], MzDateRangePicker.prototype, "pendingEnd", 2);
+export {
+  MzDateRangePicker
+};
+//# sourceMappingURL=date-range-picker.component.js.map

package/dist/components/date-range-picker/date-range-picker.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/date-range-picker/date-range-picker.component.ts"],
+  "sourcesContent": ["import { html, nothing, type TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport {\n  getMonthGrid,\n  getWeekdayNames,\n  formatMonthYear,\n  formatDateString,\n  parseDateString,\n  addDays,\n  type DayCell\n} from '../../internal/date-utils.js';\nimport styles from './date-range-picker.styles.js';\n\ntype SelectionPhase = 'idle' | 'selecting-end';\n\n/**\n * @summary An Airbnb-style date range picker with two side-by-side month calendars.\n *\n * @tag mz-date-range-picker\n *\n * @event mz-range-change - Emitted when a range is applied. Detail: { startDate, endDate }\n * @event mz-show - Emitted when the dropdown opens.\n * @event mz-hide - Emitted when the dropdown closes.\n *\n * @csspart base - The component wrapper.\n * @csspart control - The trigger input wrapper.\n * @csspart panel - The calendar dropdown panel.\n */\nexport class MzDateRangePicker extends ManzanoElement {\n  static styles = styles;\n\n  /** The range start date in YYYY-MM-DD format. */\n  @property({ attribute: 'start-date' }) startDate = '';\n\n  /** The range end date in YYYY-MM-DD format. */\n  @property({ attribute: 'end-date' }) endDate = '';\n\n  /** Minimum selectable date in YYYY-MM-DD format. */\n  @property() min = '';\n\n  /** Maximum selectable date in YYYY-MM-DD format. */\n  @property() max = '';\n\n  /** Placeholder text for the trigger. */\n  @property() placeholder = 'Select dates';\n\n  /** Disables the component. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Show calendars inline (always visible, no dropdown). */\n  @property({ type: Boolean, reflect: true }) inline = false;\n\n  /** First day of the week (0 = Sunday, 1 = Monday, etc.). */\n  @property({ type: Number, attribute: 'first-day-of-week' }) firstDayOfWeek = 0;\n\n  /** Show quick-select preset buttons. */\n  @property({ type: Boolean, attribute: 'show-presets' }) showPresets = false;\n\n  /** Locale for date formatting. Uses browser default when empty. */\n  @property() locale = '';\n\n  @state() private isOpen = false;\n  @state() private leftViewDate: Date;\n  @state() private selectionPhase: SelectionPhase = 'idle';\n  @state() private hoverDate = '';\n\n  // Pending (draft) selection \u2014 only committed on Apply/Enter\n  @state() private pendingStart = '';\n  @state() private pendingEnd = '';\n\n  private blurTimeout: ReturnType<typeof setTimeout> | null = null;\n\n  private outsideClickHandler = (e: MouseEvent) => {\n    if (!this.contains(e.target as Node)) {\n      this.hide();\n    }\n  };\n\n  constructor() {\n    super();\n    const now = new Date();\n    this.leftViewDate = new Date(now.getFullYear(), now.getMonth(), 1);\n  }\n\n  willUpdate(changed: Map<string, unknown>): void {\n    if (changed.has('startDate') && this.startDate) {\n      const parsed = parseDateString(this.startDate);\n      if (parsed) {\n        this.leftViewDate = new Date(parsed.getFullYear(), parsed.getMonth(), 1);\n      }\n    }\n    // Sync pending state when properties change externally\n    if (changed.has('startDate') || changed.has('endDate')) {\n      if (!this.isOpen) {\n        this.pendingStart = this.startDate;\n        this.pendingEnd = this.endDate;\n      }\n    }\n  }\n\n  updated(changed: Map<string, unknown>): void {\n    if (changed.has('isOpen')) {\n      this.toggleAttribute('open', this.isOpen);\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this.outsideClickHandler, true);\n    if (this.blurTimeout) clearTimeout(this.blurTimeout);\n  }\n\n  /** Opens the calendar dropdown. */\n  show(): void {\n    if (this.disabled || this.inline) return;\n    // Snapshot current committed values into pending\n    this.pendingStart = this.startDate;\n    this.pendingEnd = this.endDate;\n    this.selectionPhase = 'idle';\n    this.hoverDate = '';\n    this.isOpen = true;\n    document.addEventListener('click', this.outsideClickHandler, true);\n    this.emit('mz-show');\n    // Focus first selected/today day after render\n    this.updateComplete.then(() => this.focusInitialDay());\n  }\n\n  /** Closes the calendar dropdown without applying. */\n  hide(): void {\n    if (!this.isOpen) return;\n    this.isOpen = false;\n    this.selectionPhase = 'idle';\n    this.hoverDate = '';\n    // Revert pending \u2014 don't change committed values\n    this.pendingStart = this.startDate;\n    this.pendingEnd = this.endDate;\n    document.removeEventListener('click', this.outsideClickHandler, true);\n    this.emit('mz-hide');\n    // Return focus to trigger\n    const input = this.shadowRoot?.querySelector('.drp__input') as HTMLElement | null;\n    input?.focus();\n  }\n\n  /** Applies the pending selection and closes. */\n  apply(): void {\n    if (!this.pendingStart || !this.pendingEnd) return;\n    this.startDate = this.pendingStart;\n    this.endDate = this.pendingEnd;\n    this.selectionPhase = 'idle';\n    this.hoverDate = '';\n    this.emit('mz-range-change', {\n      detail: { startDate: this.startDate, endDate: this.endDate }\n    });\n    if (!this.inline) {\n      this.isOpen = false;\n      document.removeEventListener('click', this.outsideClickHandler, true);\n      this.emit('mz-hide');\n    }\n  }\n\n  /** Clears the selected range. */\n  clear(): void {\n    this.pendingStart = '';\n    this.pendingEnd = '';\n    this.selectionPhase = 'idle';\n    this.hoverDate = '';\n    if (this.inline) {\n      this.startDate = '';\n      this.endDate = '';\n      this.emit('mz-range-change', { detail: { startDate: '', endDate: '' } });\n    }\n  }\n\n  // --- Formatting ---\n\n  private formatDisplay(dateStr: string): string {\n    if (!dateStr) return '';\n    const parsed = parseDateString(dateStr);\n    if (!parsed) return dateStr;\n    const locale = this.locale || undefined;\n    return new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'short', day: 'numeric' }).format(parsed);\n  }\n\n  // --- Date checks ---\n\n  private isDateDisabled(dateStr: string): boolean {\n    if (this.min && dateStr < this.min) return true;\n    if (this.max && dateStr > this.max) return true;\n    return false;\n  }\n\n  // --- Selection logic (operates on pending state) ---\n\n  private handleDayClick(dateStr: string): void {\n    if (this.isDateDisabled(dateStr)) return;\n\n    if (this.selectionPhase === 'idle') {\n      // First click \u2014 set pending start\n      this.pendingStart = dateStr;\n      this.pendingEnd = '';\n      this.selectionPhase = 'selecting-end';\n    } else {\n      // Second click\n      if (dateStr < this.pendingStart) {\n        // Clicked before start \u2014 restart\n        this.pendingStart = dateStr;\n        this.pendingEnd = '';\n        // Stay in selecting-end phase\n      } else {\n        // Complete the pending range\n        this.pendingEnd = dateStr;\n        this.selectionPhase = 'idle';\n        this.hoverDate = '';\n      }\n    }\n  }\n\n  private handleDayHover(dateStr: string): void {\n    if (this.selectionPhase === 'selecting-end') {\n      this.hoverDate = dateStr;\n    }\n  }\n\n  // --- Interaction handlers ---\n\n  private handleControlClick(e: MouseEvent): void {\n    e.stopPropagation();\n    if (this.disabled) return;\n    if (this.isOpen) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  private handleBlur(): void {\n    this.blurTimeout = setTimeout(() => {\n      if (this.isOpen) this.hide();\n    }, 150);\n  }\n\n  private handleKeydown(e: KeyboardEvent): void {\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      this.hide();\n    } else if (e.key === 'Enter') {\n      e.preventDefault();\n      if (this.isOpen) {\n        // Enter applies if we have a complete pending range\n        if (this.pendingStart && this.pendingEnd) {\n          this.apply();\n        } else {\n          this.hide();\n        }\n      } else {\n        this.show();\n      }\n    }\n  }\n\n  private handlePanelKeydown(e: KeyboardEvent): void {\n    if (e.key === 'Enter') {\n      // Only intercept Enter on Apply-like context, not on day buttons\n      const target = e.target as HTMLElement;\n      if (target.classList?.contains('drp__day')) return; // Let day button click handle it\n      e.preventDefault();\n      if (this.pendingStart && this.pendingEnd) {\n        this.apply();\n      }\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      this.hide();\n    } else if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) {\n      this.handleArrowKey(e);\n    }\n  }\n\n  private handleArrowKey(e: KeyboardEvent): void {\n    const target = e.target as HTMLElement;\n    if (!target.classList?.contains('drp__day')) return;\n    e.preventDefault();\n\n    const dateStr = target.getAttribute('data-date');\n    if (!dateStr) return;\n\n    const parsed = parseDateString(dateStr);\n    if (!parsed) return;\n\n    let next: Date;\n    switch (e.key) {\n      case 'ArrowLeft': next = addDays(parsed, -1); break;\n      case 'ArrowRight': next = addDays(parsed, 1); break;\n      case 'ArrowUp': next = addDays(parsed, -7); break;\n      case 'ArrowDown': next = addDays(parsed, 7); break;\n      default: return;\n    }\n\n    const nextStr = formatDateString(next.getFullYear(), next.getMonth(), next.getDate());\n    if (this.isDateDisabled(nextStr)) return;\n\n    // If navigating past the visible months, shift view\n    const rightViewDate = new Date(this.leftViewDate.getFullYear(), this.leftViewDate.getMonth() + 2, 0);\n    if (next < this.leftViewDate) {\n      this.prevMonth();\n    } else if (next > rightViewDate) {\n      this.nextMonth();\n    }\n\n    // Focus the target day after render\n    this.updateComplete.then(() => {\n      const btn = this.shadowRoot?.querySelector(`[data-date=\"${nextStr}\"]`) as HTMLElement | null;\n      btn?.focus();\n    });\n  }\n\n  private focusInitialDay(): void {\n    const panel = this.shadowRoot?.querySelector('.drp__panel');\n    if (!panel) return;\n    // Try: selected start, then today, then first enabled day\n    const target =\n      panel.querySelector('.drp__day--selected:not(:disabled)') as HTMLElement ||\n      panel.querySelector('.drp__day--today:not(:disabled)') as HTMLElement ||\n      panel.querySelector('.drp__day:not(:disabled):not(.drp__day--outside)') as HTMLElement;\n    target?.focus();\n  }\n\n  private handlePanelClick(e: MouseEvent): void {\n    e.stopPropagation();\n    if (this.blurTimeout) {\n      clearTimeout(this.blurTimeout);\n      this.blurTimeout = null;\n    }\n  }\n\n  // --- Navigation ---\n\n  private prevMonth(): void {\n    this.leftViewDate = new Date(this.leftViewDate.getFullYear(), this.leftViewDate.getMonth() - 1, 1);\n  }\n\n  private nextMonth(): void {\n    this.leftViewDate = new Date(this.leftViewDate.getFullYear(), this.leftViewDate.getMonth() + 1, 1);\n  }\n\n  // --- Presets ---\n\n  private applyPreset(type: string): void {\n    const today = new Date();\n    const y = today.getFullYear();\n    const m = today.getMonth();\n    const d = today.getDate();\n    const todayStr = formatDateString(y, m, d);\n\n    let start = '';\n    let end = '';\n\n    switch (type) {\n      case 'today':\n        start = end = todayStr;\n        break;\n      case 'last7': {\n        const s = new Date(y, m, d - 6);\n        start = formatDateString(s.getFullYear(), s.getMonth(), s.getDate());\n        end = todayStr;\n        break;\n      }\n      case 'last30': {\n        const s = new Date(y, m, d - 29);\n        start = formatDateString(s.getFullYear(), s.getMonth(), s.getDate());\n        end = todayStr;\n        break;\n      }\n      case 'thisMonth':\n        start = formatDateString(y, m, 1);\n        end = todayStr;\n        break;\n    }\n\n    // Presets auto-apply (clicking a preset IS the explicit intent)\n    this.pendingStart = start;\n    this.pendingEnd = end;\n    this.selectionPhase = 'idle';\n    this.hoverDate = '';\n\n    const parsed = parseDateString(start);\n    if (parsed) {\n      this.leftViewDate = new Date(parsed.getFullYear(), parsed.getMonth(), 1);\n    }\n\n    this.startDate = start;\n    this.endDate = end;\n    this.emit('mz-range-change', { detail: { startDate: start, endDate: end } });\n    if (!this.inline) {\n      this.isOpen = false;\n      document.removeEventListener('click', this.outsideClickHandler, true);\n      this.emit('mz-hide');\n    }\n  }\n\n  // --- Day state classification (uses pending values) ---\n\n  private getDayCellClasses(dateStr: string, isCurrentMonth: boolean): Record<string, boolean> {\n    const isStart = dateStr === this.pendingStart;\n    const isEnd = dateStr === this.pendingEnd;\n\n    let inRange = false;\n    let isRangeStart = false;\n    let isRangeEnd = false;\n    let inPreview = false;\n    let isPreviewStart = false;\n    let isPreviewEnd = false;\n\n    if (this.pendingStart && this.pendingEnd) {\n      // Complete pending range\n      inRange = dateStr > this.pendingStart && dateStr < this.pendingEnd;\n      isRangeStart = isStart;\n      isRangeEnd = isEnd;\n    } else if (this.selectionPhase === 'selecting-end' && this.pendingStart && this.hoverDate) {\n      // Preview range while hovering\n      const effectiveEnd = this.hoverDate >= this.pendingStart ? this.hoverDate : this.pendingStart;\n      const effectiveStart = this.hoverDate >= this.pendingStart ? this.pendingStart : this.hoverDate;\n      inPreview = dateStr > effectiveStart && dateStr < effectiveEnd;\n      isPreviewStart = dateStr === effectiveStart;\n      isPreviewEnd = dateStr === effectiveEnd;\n    }\n\n    return {\n      'drp__day-cell': true,\n      'drp__day-cell--in-range': inRange,\n      'drp__day-cell--range-start': isRangeStart && isCurrentMonth,\n      'drp__day-cell--range-end': isRangeEnd && isCurrentMonth,\n      'drp__day-cell--preview': inPreview,\n      'drp__day-cell--preview-start': isPreviewStart && isCurrentMonth,\n      'drp__day-cell--preview-end': isPreviewEnd && isCurrentMonth\n    };\n  }\n\n  // --- Render helpers ---\n\n  private renderMonth(viewDate: Date, showPrev: boolean, showNext: boolean): TemplateResult {\n    const year = viewDate.getFullYear();\n    const month = viewDate.getMonth();\n    const locale = this.locale || undefined;\n    const weekdayNames = getWeekdayNames(this.firstDayOfWeek, locale);\n    const weeks = getMonthGrid(year, month, this.firstDayOfWeek);\n\n    return html`\n      <div class=\"drp__month\" role=\"grid\" aria-label=\"${formatMonthYear(viewDate, locale)}\">\n        <div class=\"drp__month-header\">\n          ${showPrev\n            ? html`<button type=\"button\" class=\"drp__nav\" @click=${this.prevMonth} aria-label=\"Previous month\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"15 18 9 12 15 6\"/></svg>\n              </button>`\n            : html`<div class=\"drp__nav-spacer\"></div>`\n          }\n          <span class=\"drp__month-title\">${formatMonthYear(viewDate, locale)}</span>\n          ${showNext\n            ? html`<button type=\"button\" class=\"drp__nav\" @click=${this.nextMonth} aria-label=\"Next month\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"/></svg>\n              </button>`\n            : html`<div class=\"drp__nav-spacer\"></div>`\n          }\n        </div>\n\n        <div class=\"drp__weekdays\" role=\"row\">\n          ${weekdayNames.map(name => html`<div class=\"drp__weekday\" role=\"columnheader\">${name}</div>`)}\n        </div>\n\n        ${weeks.map(week => html`\n          <div class=\"drp__days\" role=\"row\">\n            ${week.map(cell => this.renderDayCell(cell))}\n          </div>\n        `)}\n      </div>\n    `;\n  }\n\n  private renderDayCell(cell: DayCell): TemplateResult {\n    if (!cell.isCurrentMonth) {\n      return html`<div class=\"drp__day-cell\"><div class=\"drp__day drp__day--outside\"></div></div>`;\n    }\n\n    const dateStr = formatDateString(\n      cell.date.getFullYear(),\n      cell.date.getMonth(),\n      cell.date.getDate()\n    );\n    const isDisabledDate = this.isDateDisabled(dateStr);\n    const isSelected = dateStr === this.pendingStart || dateStr === this.pendingEnd;\n    const cellClasses = this.getDayCellClasses(dateStr, cell.isCurrentMonth);\n\n    const locale = this.locale || undefined;\n    const fullDateLabel = new Intl.DateTimeFormat(locale, {\n      weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'\n    }).format(cell.date);\n\n    return html`\n      <div class=${classMap(cellClasses)}>\n        <button type=\"button\"\n          class=${classMap({\n            'drp__day': true,\n            'drp__day--selected': isSelected,\n            'drp__day--today': cell.isToday,\n            'drp__day--disabled': isDisabledDate\n          })}\n          ?disabled=${isDisabledDate}\n          role=\"gridcell\"\n          aria-selected=${isSelected ? 'true' : 'false'}\n          aria-label=\"${fullDateLabel}\"\n          data-date=\"${dateStr}\"\n          tabindex=${isSelected ? '0' : '-1'}\n          @click=${() => this.handleDayClick(dateStr)}\n          @mouseenter=${() => this.handleDayHover(dateStr)}>\n          ${cell.date.getDate()}\n        </button>\n      </div>\n    `;\n  }\n\n  private renderFooter(): TemplateResult {\n    const hasCompleteRange = this.pendingStart && this.pendingEnd;\n    const hasPending = this.pendingStart || this.pendingEnd;\n\n    return html`\n      <div class=\"drp__footer\">\n        ${this.showPresets ? html`\n          <div class=\"drp__presets\">\n            <button type=\"button\" class=\"drp__preset\" @click=${() => this.applyPreset('today')}>Today</button>\n            <button type=\"button\" class=\"drp__preset\" @click=${() => this.applyPreset('last7')}>Last 7 days</button>\n            <button type=\"button\" class=\"drp__preset\" @click=${() => this.applyPreset('last30')}>Last 30 days</button>\n            <button type=\"button\" class=\"drp__preset\" @click=${() => this.applyPreset('thisMonth')}>This month</button>\n          </div>\n        ` : nothing}\n        <div class=\"drp__actions\">\n          ${hasPending ? html`\n            <button type=\"button\" class=\"drp__clear\" @click=${() => this.clear()}>Clear</button>\n          ` : nothing}\n          <button type=\"button\" class=\"drp__apply\" ?disabled=${!hasCompleteRange} @click=${() => this.apply()}>Apply</button>\n        </div>\n      </div>\n    `;\n  }\n\n  render() {\n    const rightViewDate = new Date(this.leftViewDate.getFullYear(), this.leftViewDate.getMonth() + 1, 1);\n    const showPanel = this.isOpen || this.inline;\n\n    // Live region announcement\n    let announcement = '';\n    if (this.selectionPhase === 'selecting-end' && this.pendingStart) {\n      announcement = `Start date selected: ${this.formatDisplay(this.pendingStart)}. Select an end date.`;\n    } else if (this.pendingStart && this.pendingEnd) {\n      announcement = `Range selected: ${this.formatDisplay(this.pendingStart)} to ${this.formatDisplay(this.pendingEnd)}. Press Apply or Enter to confirm.`;\n    }\n\n    return html`\n      <div part=\"base\" class=${classMap({\n        'drp': true,\n        'drp--open': this.isOpen,\n        'drp--disabled': this.disabled,\n        'drp--inline': this.inline\n      })}>\n        ${!this.inline ? html`\n          <div part=\"control\" class=\"drp__control\" @click=${this.handleControlClick}>\n            <input class=\"drp__input drp__input--start\" type=\"text\"\n              .value=${this.formatDisplay(this.startDate)}\n              placeholder=${this.startDate ? '' : this.placeholder}\n              ?disabled=${this.disabled}\n              readonly\n              @focus=${() => {}}\n              @blur=${this.handleBlur}\n              @keydown=${this.handleKeydown}\n              aria-label=\"Start date\"\n            />\n            ${this.startDate || this.endDate ? html`\n              <span class=\"drp__arrow\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"9 18 15 12 9 6\"/></svg>\n              </span>\n              <input class=\"drp__input drp__input--end\" type=\"text\"\n                .value=${this.formatDisplay(this.endDate)}\n                placeholder=\"End date\"\n                ?disabled=${this.disabled}\n                readonly\n                tabindex=\"-1\"\n                aria-label=\"End date\"\n              />\n            ` : nothing}\n            <div class=\"drp__icon\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"/>\n                <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"/>\n                <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"/>\n                <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"/>\n              </svg>\n            </div>\n          </div>\n        ` : nothing}\n\n        ${showPanel ? html`\n          <div part=\"panel\" class=\"drp__panel\" role=\"dialog\" aria-label=\"Date range picker\"\n            @click=${this.handlePanelClick}\n            @keydown=${this.handlePanelKeydown}\n            @mouseleave=${() => { this.hoverDate = ''; }}>\n            <div class=\"drp__months\">\n              ${this.renderMonth(this.leftViewDate, true, false)}\n              ${this.renderMonth(rightViewDate, false, true)}\n            </div>\n            ${this.renderFooter()}\n          </div>\n        ` : nothing}\n\n        <div class=\"drp__sr-only\" role=\"status\" aria-live=\"polite\">${announcement}</div>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/date-range-picker/date-range-picker.d.ts

@@ -0,0 +1,8 @@
+import { MzDateRangePicker } from './date-range-picker.component.js';
+export * from './date-range-picker.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'mz-date-range-picker': MzDateRangePicker;
+    }
+}
+//# sourceMappingURL=date-range-picker.d.ts.map

package/dist/components/date-range-picker/date-range-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-picker.d.ts","sourceRoot":"","sources":["../../../src/components/date-range-picker/date-range-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAErE,cAAc,kCAAkC,CAAC;AAIjD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,iBAAiB,CAAC;KAC3C;CACF"}

package/dist/components/date-range-picker/date-range-picker.js

@@ -0,0 +1,4 @@
+import { MzDateRangePicker } from "./date-range-picker.component.js";
+export * from "./date-range-picker.component.js";
+MzDateRangePicker.define("mz-date-range-picker");
+//# sourceMappingURL=date-range-picker.js.map