@latty-ds/web 0.2.0

package/dist/components/calendar/index.js

@@ -0,0 +1,958 @@
+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;
+};
+
+// src/components/calendar/calendar.ts
+import { html } from "lit";
+import { customElement, property as property2, state } from "lit/decorators.js";
+
+// src/base/themeable-element.ts
+import { LitElement } from "lit";
+import { property } from "lit/decorators.js";
+var ThemeableElement = class extends LitElement {
+  willUpdate(changed) {
+    super.willUpdate(changed);
+    if (changed.has("theme")) {
+      this._syncThemeAttribute();
+    }
+  }
+  _syncThemeAttribute() {
+    if (this.theme === "dark" || this.theme === "light") {
+      this.setAttribute("data-theme", this.theme);
+    } else {
+      this.removeAttribute("data-theme");
+    }
+  }
+};
+__decorateClass([
+  property({ reflect: true })
+], ThemeableElement.prototype, "theme", 2);
+
+// src/components/calendar/calendar.ts
+import "@latty-ds/icons";
+
+// src/components/calendar/calendar.styles.ts
+import { css } from "lit";
+var calendarStyles = css`
+  :host {
+    display: inline-block;
+    font-family: 'Hanken Grotesk', sans-serif;
+  }
+
+  .calendar {
+    background: var(--lt-bg-default);
+    border-radius: var(--lt-border-radius);
+    border: 1px solid var(--lt-border-default);
+    display: flex;
+    flex-direction: column;
+    gap: var(--lt-spacing-2);
+    padding: var(--lt-spacing-3);
+    width: 17.25rem;
+  }
+
+  /* ── Header ── */
+
+  .header {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .month-label-btn {
+    align-items: center;
+    background: transparent;
+    border-radius: var(--lt-border-radius);
+    border: 1px solid transparent;
+    color: var(--lt-text-default);
+    cursor: pointer;
+    display: inline-flex;
+    font-family: inherit;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    gap: var(--lt-spacing-1);
+    letter-spacing: 0.01em;
+    padding: var(--lt-spacing-1) var(--lt-spacing-2);
+    transition:
+      background 120ms ease,
+      border-color 120ms ease;
+  }
+
+  .month-label-btn:hover:not(:disabled) {
+    background: var(--lt-bg-neutral-subtle);
+    border-color: var(--lt-border-default);
+  }
+
+  .month-label-btn--open {
+    background: var(--lt-bg-neutral-subtle);
+    border-color: var(--lt-border-default);
+  }
+
+  .month-label-btn:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .picker-chevron {
+    color: var(--lt-text-subtle);
+    transition: transform 150ms ease;
+  }
+
+  .month-label-btn--open .picker-chevron {
+    transform: rotate(180deg);
+  }
+
+  .nav-btn {
+    align-items: center;
+    background: transparent;
+    border-radius: var(--lt-border-radius);
+    border: 1px solid transparent;
+    color: var(--lt-text-subtle);
+    cursor: pointer;
+    display: inline-flex;
+    height: 2rem;
+    justify-content: center;
+    padding: 0;
+    transition:
+      background 120ms ease,
+      border-color 120ms ease,
+      color 120ms ease;
+    width: 2rem;
+  }
+
+  .nav-btn:hover:not(:disabled) {
+    background: var(--lt-bg-neutral-subtle);
+    border-color: var(--lt-border-default);
+    color: var(--lt-text-default);
+  }
+
+  .nav-btn:disabled {
+    color: var(--lt-text-disabled);
+    cursor: not-allowed;
+  }
+
+  /* ── Weekday headers ── */
+
+  .weekdays {
+    column-gap: 0;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  .weekday {
+    color: var(--lt-text-muted);
+    font-size: 0.75rem;
+    font-weight: 500;
+    text-align: center;
+  }
+
+  /* ── Day grid ── */
+
+  .grid {
+    column-gap: 0;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    row-gap: var(--lt-spacing-1);
+  }
+
+  [role='row'] {
+    display: contents;
+  }
+
+  /* Day button — strip layer in range mode */
+  .day {
+    align-items: center;
+    background: transparent;
+    border: none;
+    color: var(--lt-text-default);
+    cursor: pointer;
+    display: inline-flex;
+    font-family: inherit;
+    font-size: 0.8125rem;
+    font-weight: 400;
+    height: 2.25rem;
+    justify-content: center;
+    outline: none;
+    padding: 0;
+    transition: background 100ms ease;
+    width: 100%;
+  }
+
+  .day:disabled {
+    cursor: not-allowed;
+  }
+
+  /* Day inner — the visible circle */
+  .day__inner {
+    align-items: center;
+    background: transparent;
+    border: 2px solid transparent;
+    border-radius: 50%;
+    color: inherit;
+    display: inline-flex;
+    font-size: inherit;
+    font-weight: inherit;
+    height: 2.25rem;
+    justify-content: center;
+    transition:
+      background 100ms ease,
+      border-color 100ms ease,
+      color 100ms ease;
+    width: 2.25rem;
+  }
+
+  .day:hover:not(:disabled) .day__inner {
+    background: var(--lt-bg-neutral-subtle);
+  }
+
+  .day:focus-visible .day__inner {
+    outline: 2px solid var(--lt-border-focus);
+    outline-offset: 1px;
+  }
+
+  /* Today ring */
+  .day--today .day__inner {
+    border-color: var(--lt-border-primary);
+    font-weight: 600;
+  }
+
+  /* Single-mode selected */
+  .day--selected .day__inner {
+    background: var(--lt-interactive-primary-bg);
+    border-color: transparent;
+    color: var(--lt-text-on-primary);
+    font-weight: 600;
+  }
+
+  .day--selected:hover:not(:disabled) .day__inner {
+    background: var(--lt-interactive-primary-bg-hover);
+  }
+
+  /* Outside days */
+  .day--outside {
+    color: var(--lt-text-muted);
+    opacity: 0.5;
+  }
+
+  /* Empty filler cell */
+  .day--empty {
+    background: transparent;
+    border: none;
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .day:disabled .day__inner {
+    color: var(--lt-text-disabled);
+    opacity: 0.4;
+  }
+
+  /* ── Range strips (on .day button = strip layer) ── */
+
+  /* Start: transparent on left, strip on right */
+  .day--range-left {
+    background: linear-gradient(to right, transparent 50%, var(--lt-bg-primary-subtle) 50%);
+  }
+
+  /* End: strip on left, transparent on right */
+  .day--range-right {
+    background: linear-gradient(to right, var(--lt-bg-primary-subtle) 50%, transparent 50%);
+  }
+
+  /* Same-day start+end — no strip needed */
+  .day--range-left.day--range-right {
+    background: transparent;
+  }
+
+  /* Days between confirmed endpoints */
+  .day--in-range {
+    background: var(--lt-bg-primary-subtle);
+  }
+
+  .day--in-range:hover:not(:disabled) .day__inner {
+    background: var(--lt-bg-neutral-subtle);
+  }
+
+  /* Days between hover preview endpoints */
+  .day--in-hover-range {
+    background: var(--lt-bg-primary-subtle);
+    opacity: 0.45;
+  }
+
+  /* Confirmed range endpoint circle */
+  .day--range-confirmed .day__inner {
+    background: var(--lt-interactive-primary-bg);
+    border-color: transparent;
+    color: var(--lt-text-on-primary);
+    font-weight: 600;
+  }
+
+  .day--range-confirmed:hover:not(:disabled) .day__inner {
+    background: var(--lt-interactive-primary-bg-hover);
+  }
+
+  /* Hover preview endpoint circle (semi-transparent) */
+  .day--range-hover .day__inner {
+    background: var(--lt-interactive-primary-bg);
+    border-color: transparent;
+    color: var(--lt-text-on-primary);
+    opacity: 0.5;
+  }
+
+  /* ── Multi-month layout ── */
+
+  .calendar--multi {
+    width: auto;
+  }
+
+  .month-label-row {
+    display: flex;
+    flex: 1;
+    justify-content: space-around;
+  }
+
+  .month-label {
+    color: var(--lt-text-default);
+    font-size: 0.9375rem;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    text-align: center;
+  }
+
+  .month-panels {
+    display: flex;
+    gap: var(--lt-spacing-4);
+  }
+
+  .month-col {
+    width: 17.25rem;
+  }
+
+  /* ── Month/year picker ── */
+
+  .picker-months {
+    display: grid;
+    gap: var(--lt-spacing-1);
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .picker-month-btn {
+    background: transparent;
+    border-radius: var(--lt-border-radius);
+    border: 1px solid transparent;
+    color: var(--lt-text-default);
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.8125rem;
+    font-weight: 400;
+    padding: var(--lt-spacing-2) 0;
+    text-align: center;
+    transition:
+      background 100ms ease,
+      border-color 100ms ease;
+  }
+
+  .picker-month-btn:hover:not(:disabled) {
+    background: var(--lt-bg-neutral-subtle);
+    border-color: var(--lt-border-default);
+  }
+
+  .picker-month-btn--current {
+    background: var(--lt-interactive-primary-bg);
+    border-color: transparent;
+    color: var(--lt-text-on-primary);
+    font-weight: 600;
+  }
+
+  .picker-month-btn--current:hover:not(:disabled) {
+    background: var(--lt-interactive-primary-bg-hover);
+  }
+
+  .picker-month-btn:disabled {
+    color: var(--lt-text-disabled);
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  /* ── Footer ── */
+
+  .footer {
+    border-top: 1px solid var(--lt-border-subtle);
+    display: flex;
+    justify-content: flex-end;
+    padding-top: var(--lt-spacing-1);
+  }
+
+  .today-btn {
+    background: transparent;
+    border-radius: var(--lt-border-radius);
+    border: 1px solid var(--lt-border-default);
+    color: var(--lt-text-subtle);
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.75rem;
+    font-weight: 500;
+    padding: var(--lt-spacing-1) var(--lt-spacing-2);
+    transition:
+      background 120ms ease,
+      border-color 120ms ease,
+      color 120ms ease;
+  }
+
+  .today-btn:hover:not(:disabled) {
+    background: var(--lt-bg-neutral-subtle);
+    border-color: var(--lt-border-strong);
+    color: var(--lt-text-default);
+  }
+
+  .today-btn:disabled {
+    color: var(--lt-text-disabled);
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
+
+// src/utils/dispatch.ts
+var dispatch = (host, name, detail, init) => host.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true, ...init }));
+
+// src/components/calendar/calendar.ts
+var Calendar = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.mode = "single";
+    this.value = "";
+    this.valueStart = "";
+    this.valueEnd = "";
+    this.min = "";
+    this.max = "";
+    this.locale = "en-US";
+    this.weekStart = "0";
+    this.showOutsideDays = true;
+    this.disabled = false;
+    this.months = 1;
+    /** Specific dates to disable, as an array of Date objects. Not reflected as an attribute. */
+    this.disabledDates = [];
+    this._viewYear = (/* @__PURE__ */ new Date()).getFullYear();
+    this._viewMonth = (/* @__PURE__ */ new Date()).getMonth();
+    this._focusedDate = null;
+    this._hoverDate = null;
+    this._pickingMonthYear = false;
+    this._pickerYear = (/* @__PURE__ */ new Date()).getFullYear();
+    this._handleCalendarKeyDown = (e) => {
+      if (e.key === "Escape" && this._pickingMonthYear) {
+        e.stopPropagation();
+        this._closePicker();
+      }
+    };
+    this._handleGridMouseOver = (e) => {
+      if (this.mode !== "range" || this.valueEnd) return;
+      const btn = e.target.closest("[data-date]");
+      if (btn?.dataset.date) {
+        const d = this._parseDate(btn.dataset.date);
+        if (d && (!this._hoverDate || !this._isSameDay(d, this._hoverDate))) {
+          this._hoverDate = d;
+        }
+      }
+    };
+    this._handleGridMouseLeave = () => {
+      if (this.mode === "range") this._hoverDate = null;
+    };
+    this._handleKeyDown = (e) => {
+      const today = /* @__PURE__ */ new Date();
+      const focusedDate = this._focusedDate ?? this._parseDate(this.value) ?? new Date(this._viewYear, this._viewMonth, today.getDate() || 1);
+      const next = new Date(focusedDate);
+      const weekStart = Number(this.weekStart);
+      switch (e.key) {
+        case "ArrowRight":
+          next.setDate(next.getDate() + 1);
+          break;
+        case "ArrowLeft":
+          next.setDate(next.getDate() - 1);
+          break;
+        case "ArrowDown":
+          next.setDate(next.getDate() + 7);
+          break;
+        case "ArrowUp":
+          next.setDate(next.getDate() - 7);
+          break;
+        case "Home": {
+          const offset = (next.getDay() - weekStart + 7) % 7;
+          next.setDate(next.getDate() - offset);
+          break;
+        }
+        case "End": {
+          const offset = (next.getDay() - weekStart + 7) % 7;
+          next.setDate(next.getDate() + (6 - offset));
+          break;
+        }
+        case "PageUp":
+          e.preventDefault();
+          this._navigate(-1);
+          return;
+        case "PageDown":
+          e.preventDefault();
+          this._navigate(1);
+          return;
+        case "Enter":
+        case " ": {
+          e.preventDefault();
+          const days = this._buildDays();
+          const day = days.find((d) => this._isSameDay(d.date, focusedDate));
+          if (day && !day.isDisabled) this._selectDay(day);
+          return;
+        }
+        default:
+          return;
+      }
+      e.preventDefault();
+      if (next.getFullYear() !== this._viewYear || next.getMonth() !== this._viewMonth) {
+        this._viewYear = next.getFullYear();
+        this._viewMonth = next.getMonth();
+      }
+      this._focusedDate = next;
+      this._focusCell(this._toIso(next));
+    };
+  }
+  willUpdate(changed) {
+    super.willUpdate(changed);
+    if (changed.has("value") && this.value) {
+      const d = this._parseDate(this.value);
+      if (d) {
+        this._viewYear = d.getFullYear();
+        this._viewMonth = d.getMonth();
+      }
+    }
+    if (changed.has("valueStart") && this.valueStart) {
+      const d = this._parseDate(this.valueStart);
+      if (d) {
+        this._viewYear = d.getFullYear();
+        this._viewMonth = d.getMonth();
+      }
+    }
+    if (changed.has("months") && this.months > 1 && this._pickingMonthYear) {
+      this._pickingMonthYear = false;
+    }
+  }
+  _monthAtOffset(offset) {
+    let m = this._viewMonth + offset;
+    let y = this._viewYear;
+    while (m > 11) {
+      m -= 12;
+      y++;
+    }
+    return { year: y, month: m };
+  }
+  _parseDate(iso) {
+    if (!iso) return null;
+    const d = /* @__PURE__ */ new Date(`${iso}T00:00:00`);
+    return isNaN(d.getTime()) ? null : d;
+  }
+  _toIso(date) {
+    const y = date.getFullYear();
+    const m = String(date.getMonth() + 1).padStart(2, "0");
+    const d = String(date.getDate()).padStart(2, "0");
+    return `${y}-${m}-${d}`;
+  }
+  _isSameDay(a, b) {
+    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+  }
+  _isDisabled(date) {
+    if (this.disabled) return true;
+    if (this.min) {
+      const min = this._parseDate(this.min);
+      if (min && date < min) return true;
+    }
+    if (this.max) {
+      const max = this._parseDate(this.max);
+      if (max && date > max) return true;
+    }
+    return this.disabledDates.some((d) => this._isSameDay(d, date));
+  }
+  _buildDays(year = this._viewYear, month = this._viewMonth) {
+    const today = /* @__PURE__ */ new Date();
+    const selected = this._parseDate(this.value);
+    const weekStart = Number(this.weekStart);
+    const rangeStart = this.mode === "range" ? this._parseDate(this.valueStart) : null;
+    const rangeEnd = this.mode === "range" ? this._parseDate(this.valueEnd) : null;
+    let visHoverStart = null;
+    let visHoverEnd = null;
+    if (rangeStart && !rangeEnd && this._hoverDate) {
+      if (this._hoverDate >= rangeStart) {
+        visHoverStart = rangeStart;
+        visHoverEnd = this._hoverDate;
+      } else {
+        visHoverStart = this._hoverDate;
+        visHoverEnd = rangeStart;
+      }
+    }
+    const firstOfMonth = new Date(year, month, 1);
+    const lastOfMonth = new Date(year, month + 1, 0);
+    const startOffset = (firstOfMonth.getDay() - weekStart + 7) % 7;
+    const totalCurrent = startOffset + lastOfMonth.getDate();
+    const endOffset = totalCurrent % 7 === 0 ? 0 : 7 - totalCurrent % 7;
+    const days = [];
+    const buildDay = (date, isCurrentMonth) => {
+      const isRangeStart = !!rangeStart && this._isSameDay(date, rangeStart);
+      const isRangeEnd = !!rangeEnd && this._isSameDay(date, rangeEnd);
+      const isInRange = !!rangeStart && !!rangeEnd && date > rangeStart && date < rangeEnd && !this._isSameDay(date, rangeStart) && !this._isSameDay(date, rangeEnd);
+      const isRangeHoverStart = !!visHoverStart && this._isSameDay(date, visHoverStart);
+      const isRangeHoverEnd = !!visHoverEnd && !this._isSameDay(visHoverStart, visHoverEnd) && this._isSameDay(date, visHoverEnd);
+      const isInHoverRange = !!visHoverStart && !!visHoverEnd && date > visHoverStart && date < visHoverEnd;
+      return {
+        date,
+        isCurrentMonth,
+        isToday: this._isSameDay(date, today),
+        isSelected: this.mode === "single" && selected ? this._isSameDay(date, selected) : false,
+        isDisabled: this._isDisabled(date),
+        isRangeStart,
+        isRangeEnd,
+        isInRange,
+        isRangeHoverStart,
+        isRangeHoverEnd,
+        isInHoverRange
+      };
+    };
+    for (let i = startOffset; i > 0; i--) {
+      days.push(buildDay(new Date(year, month, 1 - i), false));
+    }
+    for (let d = 1; d <= lastOfMonth.getDate(); d++) {
+      days.push(buildDay(new Date(year, month, d), true));
+    }
+    for (let d = 1; d <= endOffset; d++) {
+      days.push(buildDay(new Date(year, month + 1, d), false));
+    }
+    return days;
+  }
+  _getWeekdayLabels() {
+    const weekStart = Number(this.weekStart);
+    const fmt = new Intl.DateTimeFormat(this.locale, { weekday: "narrow" });
+    const refSunday = new Date(2026, 0, 4);
+    return Array.from({ length: 7 }, (_, i) => {
+      const date = new Date(refSunday);
+      date.setDate(refSunday.getDate() + weekStart + i);
+      return fmt.format(date);
+    });
+  }
+  _navigate(delta) {
+    if (this._pickingMonthYear) {
+      this._pickerYear += delta;
+      return;
+    }
+    let month = this._viewMonth + delta;
+    let year = this._viewYear;
+    while (month < 0) {
+      month += 12;
+      year--;
+    }
+    while (month > 11) {
+      month -= 12;
+      year++;
+    }
+    this._viewMonth = month;
+    this._viewYear = year;
+    this._focusedDate = null;
+    dispatch(this, "month-change", { year: this._viewYear, month: this._viewMonth });
+  }
+  _openPicker() {
+    this._pickerYear = this._viewYear;
+    this._pickingMonthYear = true;
+  }
+  _closePicker() {
+    this._pickingMonthYear = false;
+  }
+  _selectPickerMonth(month) {
+    this._viewYear = this._pickerYear;
+    this._viewMonth = month;
+    this._pickingMonthYear = false;
+    this._focusedDate = null;
+    dispatch(this, "month-change", { year: this._viewYear, month: this._viewMonth });
+  }
+  _selectDay(day) {
+    if (day.isDisabled || this.disabled) return;
+    if (!day.isCurrentMonth) {
+      this._viewMonth = day.date.getMonth();
+      this._viewYear = day.date.getFullYear();
+    }
+    if (this.mode === "range") {
+      const iso2 = this._toIso(day.date);
+      const hasStart = !!this.valueStart;
+      const hasEnd = !!this.valueEnd;
+      if (!hasStart || hasEnd) {
+        this.valueStart = iso2;
+        this.valueEnd = "";
+        this._hoverDate = null;
+      } else {
+        const startDate = this._parseDate(this.valueStart);
+        if (this._isSameDay(day.date, startDate)) {
+          this.valueStart = "";
+        } else if (day.date < startDate) {
+          this.valueEnd = this.valueStart;
+          this.valueStart = iso2;
+        } else {
+          this.valueEnd = iso2;
+        }
+        if (this.valueStart && this.valueEnd) {
+          dispatch(this, "change", { valueStart: this.valueStart, valueEnd: this.valueEnd });
+        }
+      }
+      this._focusedDate = day.date;
+      return;
+    }
+    const iso = this._toIso(day.date);
+    this.value = iso;
+    this._focusedDate = day.date;
+    dispatch(this, "change", { value: iso });
+  }
+  _goToToday() {
+    const today = /* @__PURE__ */ new Date();
+    this._viewYear = today.getFullYear();
+    this._viewMonth = today.getMonth();
+    this._focusedDate = null;
+    this._pickingMonthYear = false;
+  }
+  _dayAriaLabel(date) {
+    return new Intl.DateTimeFormat(this.locale, {
+      weekday: "long",
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    }).format(date);
+  }
+  _focusCell(iso) {
+    this.updateComplete.then(() => {
+      const target = this.shadowRoot?.querySelector(`[data-date="${iso}"]`);
+      target?.focus();
+    });
+  }
+  _renderDay(day, rovingDate) {
+    if (!day.isCurrentMonth && !this.showOutsideDays) {
+      return html`<div role="gridcell" aria-hidden="true" class="day day--empty"></div>`;
+    }
+    const isRangeLeft = day.isRangeStart || day.isRangeHoverStart;
+    const isRangeRight = day.isRangeEnd || day.isRangeHoverEnd;
+    const isRangeConfirmed = day.isRangeStart || day.isRangeEnd;
+    const isRangeHoverPoint = !isRangeConfirmed && (day.isRangeHoverStart || day.isRangeHoverEnd);
+    const classes = [
+      "day",
+      !day.isCurrentMonth ? "day--outside" : "",
+      day.isToday ? "day--today" : "",
+      day.isSelected ? "day--selected" : "",
+      isRangeLeft ? "day--range-left" : "",
+      isRangeRight ? "day--range-right" : "",
+      isRangeConfirmed ? "day--range-confirmed" : "",
+      isRangeHoverPoint ? "day--range-hover" : "",
+      day.isInRange ? "day--in-range" : "",
+      day.isInHoverRange ? "day--in-hover-range" : ""
+    ].filter(Boolean).join(" ");
+    const iso = this._toIso(day.date);
+    const isSelected = day.isSelected || day.isRangeStart || day.isRangeEnd;
+    return html`
+      <button
+        role="gridcell"
+        class=${classes}
+        data-date=${iso}
+        ?disabled=${day.isDisabled}
+        aria-selected=${isSelected ? "true" : "false"}
+        aria-label=${this._dayAriaLabel(day.date)}
+        tabindex=${this._isSameDay(day.date, rovingDate) ? 0 : -1}
+        @click=${() => this._selectDay(day)}
+        @keydown=${this._handleKeyDown}
+      >
+        <span class="day__inner">${day.date.getDate()}</span>
+      </button>
+    `;
+  }
+  _renderMonthGrid(year, month, gridLabel, rovingDate) {
+    const days = this._buildDays(year, month);
+    const weekdayLabels = this._getWeekdayLabels();
+    const weeks = [];
+    for (let i = 0; i < days.length; i += 7) weeks.push(days.slice(i, i + 7));
+    return html`
+      <div class="weekdays" aria-hidden="true">
+        ${weekdayLabels.map((label) => html`<div class="weekday">${label}</div>`)}
+      </div>
+      <div
+        class="grid"
+        role="grid"
+        aria-label="${gridLabel}"
+        @mouseover=${this._handleGridMouseOver}
+        @mouseleave=${this._handleGridMouseLeave}
+      >
+        ${weeks.map((week) => html` <div role="row">${week.map((day) => this._renderDay(day, rovingDate))}</div> `)}
+      </div>
+    `;
+  }
+  render() {
+    const today = /* @__PURE__ */ new Date();
+    const isMulti = this.months > 1;
+    const rovingAnchor = this._parseDate(this.mode === "range" ? this.valueStart : this.value);
+    const rovingDate = this._focusedDate ?? rovingAnchor ?? (today.getFullYear() === this._viewYear && today.getMonth() === this._viewMonth ? today : null) ?? new Date(this._viewYear, this._viewMonth, 1);
+    const footer = html`
+      <div class="footer">
+        <button class="today-btn" ?disabled=${this.disabled} @click=${this._goToToday}>Today</button>
+      </div>
+    `;
+    if (isMulti) {
+      const panelLabels = Array.from({ length: this.months }, (_, i) => {
+        const { year, month } = this._monthAtOffset(i);
+        return new Intl.DateTimeFormat(this.locale, { month: "long", year: "numeric" }).format(new Date(year, month));
+      });
+      return html`
+        <div class="calendar calendar--multi" part="base" @keydown=${this._handleCalendarKeyDown}>
+          <div class="header">
+            <button
+              class="nav-btn"
+              aria-label="Previous month"
+              ?disabled=${this.disabled}
+              @click=${() => this._navigate(-1)}
+            >
+              <lt-icon name="arrow-left" size="sm"></lt-icon>
+            </button>
+            <div class="month-label-row">
+              ${panelLabels.map(
+        (label, i) => html`<span class="month-label" aria-live=${i === 0 ? "polite" : "off"} aria-atomic="true"
+                    >${label}</span
+                  >`
+      )}
+            </div>
+            <button
+              class="nav-btn"
+              aria-label="Next month"
+              ?disabled=${this.disabled}
+              @click=${() => this._navigate(1)}
+            >
+              <lt-icon name="arrow-right" size="sm"></lt-icon>
+            </button>
+          </div>
+          <div class="month-panels">
+            ${Array.from(
+        { length: this.months },
+        (_, i) => html`
+                <div class="month-col">
+                  ${this._renderMonthGrid(
+          this._monthAtOffset(i).year,
+          this._monthAtOffset(i).month,
+          panelLabels[i],
+          rovingDate
+        )}
+                </div>
+              `
+      )}
+          </div>
+          ${footer}
+        </div>
+      `;
+    }
+    const monthLabel = new Intl.DateTimeFormat(this.locale, { month: "long", year: "numeric" }).format(
+      new Date(this._viewYear, this._viewMonth)
+    );
+    const prevLabel = this._pickingMonthYear ? "Previous year" : "Previous month";
+    const nextLabel = this._pickingMonthYear ? "Next year" : "Next month";
+    const header = html`
+      <div class="header">
+        <button class="nav-btn" aria-label=${prevLabel} ?disabled=${this.disabled} @click=${() => this._navigate(-1)}>
+          <lt-icon name="arrow-left" size="sm"></lt-icon>
+        </button>
+        <button
+          class="month-label-btn ${this._pickingMonthYear ? "month-label-btn--open" : ""}"
+          aria-expanded=${this._pickingMonthYear ? "true" : "false"}
+          aria-label="Choose month and year"
+          ?disabled=${this.disabled}
+          @click=${() => this._pickingMonthYear ? this._closePicker() : this._openPicker()}
+        >
+          <span aria-live="polite" aria-atomic="true">${this._pickingMonthYear ? this._pickerYear : monthLabel}</span>
+          <lt-icon name="arrow-down" size="sm" class="picker-chevron"></lt-icon>
+        </button>
+        <button class="nav-btn" aria-label=${nextLabel} ?disabled=${this.disabled} @click=${() => this._navigate(1)}>
+          <lt-icon name="arrow-right" size="sm"></lt-icon>
+        </button>
+      </div>
+    `;
+    const pickerBody = this._pickingMonthYear ? html`
+          <div class="picker-months">
+            ${Array.from({ length: 12 }, (_, i) => {
+      const label = new Intl.DateTimeFormat(this.locale, { month: "short" }).format(
+        new Date(this._pickerYear, i)
+      );
+      const isCurrent = i === this._viewMonth && this._pickerYear === this._viewYear;
+      return html`
+                <button
+                  class="picker-month-btn ${isCurrent ? "picker-month-btn--current" : ""}"
+                  ?disabled=${this.disabled}
+                  @click=${() => this._selectPickerMonth(i)}
+                >
+                  ${label}
+                </button>
+              `;
+    })}
+          </div>
+        ` : this._renderMonthGrid(this._viewYear, this._viewMonth, monthLabel, rovingDate);
+    return html`
+      <div class="calendar" part="base" @keydown=${this._handleCalendarKeyDown}>${header} ${pickerBody} ${footer}</div>
+    `;
+  }
+};
+Calendar.styles = calendarStyles;
+__decorateClass([
+  property2({ reflect: true })
+], Calendar.prototype, "mode", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Calendar.prototype, "value", 2);
+__decorateClass([
+  property2({ reflect: true, attribute: "value-start" })
+], Calendar.prototype, "valueStart", 2);
+__decorateClass([
+  property2({ reflect: true, attribute: "value-end" })
+], Calendar.prototype, "valueEnd", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Calendar.prototype, "min", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Calendar.prototype, "max", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Calendar.prototype, "locale", 2);
+__decorateClass([
+  property2({ attribute: "week-start", reflect: true })
+], Calendar.prototype, "weekStart", 2);
+__decorateClass([
+  property2({ type: Boolean, attribute: "show-outside-days", reflect: true })
+], Calendar.prototype, "showOutsideDays", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], Calendar.prototype, "disabled", 2);
+__decorateClass([
+  property2({ type: Number, reflect: true })
+], Calendar.prototype, "months", 2);
+__decorateClass([
+  state()
+], Calendar.prototype, "_viewYear", 2);
+__decorateClass([
+  state()
+], Calendar.prototype, "_viewMonth", 2);
+__decorateClass([
+  state()
+], Calendar.prototype, "_focusedDate", 2);
+__decorateClass([
+  state()
+], Calendar.prototype, "_hoverDate", 2);
+__decorateClass([
+  state()
+], Calendar.prototype, "_pickingMonthYear", 2);
+__decorateClass([
+  state()
+], Calendar.prototype, "_pickerYear", 2);
+Calendar = __decorateClass([
+  customElement("lt-calendar")
+], Calendar);
+export {
+  Calendar
+};