@reachweb/alpine-calendar 0.1.1

package/dist/alpine-calendar.es.js

@@ -0,0 +1,2946 @@
+class CalendarDate {
+  // 1-31
+  constructor(year, month, day) {
+    this.year = year;
+    this.month = month;
+    this.day = day;
+  }
+  // ---------------------------------------------------------------------------
+  // Factory methods
+  // ---------------------------------------------------------------------------
+  /** Resolve "today" in a given IANA timezone (fallback: browser default). */
+  static today(timezone) {
+    const now = /* @__PURE__ */ new Date();
+    if (timezone) {
+      return CalendarDate.fromNativeDate(now, timezone);
+    }
+    return new CalendarDate(now.getFullYear(), now.getMonth() + 1, now.getDate());
+  }
+  /** Create from a native Date, interpreting it in the given timezone. */
+  static fromNativeDate(date, timezone) {
+    if (timezone) {
+      const parts = new Intl.DateTimeFormat("en-US", {
+        timeZone: timezone,
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit"
+      }).formatToParts(date);
+      let year = 0;
+      let month = 0;
+      let day = 0;
+      for (const part of parts) {
+        if (part.type === "year") year = Number(part.value);
+        else if (part.type === "month") month = Number(part.value);
+        else if (part.type === "day") day = Number(part.value);
+      }
+      return new CalendarDate(year, month, day);
+    }
+    return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
+  }
+  /** Create from an ISO string (YYYY-MM-DD). Returns null for invalid formats or out-of-range values. */
+  static fromISO(iso) {
+    const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
+    if (!match) return null;
+    const year = Number(match[1]);
+    const month = Number(match[2]);
+    const day = Number(match[3]);
+    if (month < 1 || month > 12) return null;
+    if (day < 1 || day > daysInMonth(year, month)) return null;
+    return new CalendarDate(year, month, day);
+  }
+  // ---------------------------------------------------------------------------
+  // Serialization
+  // ---------------------------------------------------------------------------
+  /** Convert to a native Date (midnight local time). */
+  toNativeDate() {
+    return new Date(this.year, this.month - 1, this.day);
+  }
+  /** Serialize to ISO string YYYY-MM-DD. */
+  toISO() {
+    const y = String(this.year).padStart(4, "0");
+    const m = String(this.month).padStart(2, "0");
+    const d = String(this.day).padStart(2, "0");
+    return `${y}-${m}-${d}`;
+  }
+  /** Unique string key for use in Sets/Maps. */
+  toKey() {
+    return this.toISO();
+  }
+  // ---------------------------------------------------------------------------
+  // Comparison helpers
+  // ---------------------------------------------------------------------------
+  isSame(other) {
+    return this.year === other.year && this.month === other.month && this.day === other.day;
+  }
+  isBefore(other) {
+    if (this.year !== other.year) return this.year < other.year;
+    if (this.month !== other.month) return this.month < other.month;
+    return this.day < other.day;
+  }
+  isAfter(other) {
+    if (this.year !== other.year) return this.year > other.year;
+    if (this.month !== other.month) return this.month > other.month;
+    return this.day > other.day;
+  }
+  /** Inclusive range check: start <= this <= end. */
+  isBetween(start, end) {
+    return !this.isBefore(start) && !this.isAfter(end);
+  }
+  /**
+   * Number of days from this date to another.
+   * Positive when `other` is after `this`, negative when before.
+   * Uses UTC to avoid DST issues.
+   */
+  diffDays(other) {
+    const a = Date.UTC(this.year, this.month - 1, this.day);
+    const b = Date.UTC(other.year, other.month - 1, other.day);
+    return Math.round((b - a) / 864e5);
+  }
+  // ---------------------------------------------------------------------------
+  // Arithmetic (returns new CalendarDate — immutable)
+  // ---------------------------------------------------------------------------
+  addDays(days) {
+    const d = this.toNativeDate();
+    d.setDate(d.getDate() + days);
+    return CalendarDate.fromNativeDate(d);
+  }
+  /** Add months with day clamping (e.g. Jan 31 + 1 month = Feb 28/29). */
+  addMonths(months) {
+    let newMonth = this.month - 1 + months;
+    const newYear = this.year + Math.floor(newMonth / 12);
+    newMonth = (newMonth % 12 + 12) % 12;
+    const maxDay = daysInMonth(newYear, newMonth + 1);
+    const newDay = Math.min(this.day, maxDay);
+    return new CalendarDate(newYear, newMonth + 1, newDay);
+  }
+  addYears(years) {
+    const maxDay = daysInMonth(this.year + years, this.month);
+    const newDay = Math.min(this.day, maxDay);
+    return new CalendarDate(this.year + years, this.month, newDay);
+  }
+  startOfMonth() {
+    return new CalendarDate(this.year, this.month, 1);
+  }
+  endOfMonth() {
+    return new CalendarDate(this.year, this.month, daysInMonth(this.year, this.month));
+  }
+  // ---------------------------------------------------------------------------
+  // Formatting
+  // ---------------------------------------------------------------------------
+  /**
+   * Format the date using Intl.DateTimeFormat options.
+   *
+   * @param options - Intl.DateTimeFormat options (e.g. { month: 'long', year: 'numeric' })
+   * @param locale  - BCP 47 locale string (default: browser locale)
+   */
+  format(options, locale) {
+    const d = this.toNativeDate();
+    return new Intl.DateTimeFormat(locale, options).format(d);
+  }
+}
+function daysInMonth(year, month) {
+  return new Date(year, month, 0).getDate();
+}
+function getISOWeekNumber(date) {
+  const d = new Date(Date.UTC(date.year, date.month - 1, date.day));
+  const dayNum = d.getUTCDay() || 7;
+  d.setUTCDate(d.getUTCDate() + 4 - dayNum);
+  const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+  return Math.ceil(((d.getTime() - yearStart.getTime()) / 864e5 + 1) / 7);
+}
+function precomputeSets(opts) {
+  return {
+    disabledKeys: opts.disabledDates ? new Set(opts.disabledDates.map((d) => d.toKey())) : void 0,
+    disabledDays: opts.disabledDaysOfWeek ? new Set(opts.disabledDaysOfWeek) : void 0,
+    enabledKeys: opts.enabledDates ? new Set(opts.enabledDates.map((d) => d.toKey())) : void 0,
+    enabledDays: opts.enabledDaysOfWeek ? new Set(opts.enabledDaysOfWeek) : void 0,
+    disabledMonths: opts.disabledMonths ? new Set(opts.disabledMonths) : void 0,
+    enabledMonths: opts.enabledMonths ? new Set(opts.enabledMonths) : void 0,
+    disabledYears: opts.disabledYears ? new Set(opts.disabledYears) : void 0,
+    enabledYears: opts.enabledYears ? new Set(opts.enabledYears) : void 0
+  };
+}
+function checkDisabled(date, minDate, maxDate, sets) {
+  if (minDate && date.isBefore(minDate)) return true;
+  if (maxDate && date.isAfter(maxDate)) return true;
+  if (sets.enabledKeys && sets.enabledKeys.has(date.toKey())) return false;
+  if (sets.enabledYears && !sets.enabledYears.has(date.year)) return true;
+  if (sets.disabledYears && sets.disabledYears.has(date.year)) return true;
+  if (sets.enabledMonths && !sets.enabledMonths.has(date.month)) return true;
+  if (sets.disabledMonths && sets.disabledMonths.has(date.month)) return true;
+  const needsDow = sets.enabledDays !== void 0 || sets.disabledDays !== void 0;
+  const dow = needsDow ? date.toNativeDate().getDay() : -1;
+  if (sets.enabledDays && !sets.enabledDays.has(dow)) return true;
+  if (sets.disabledKeys && sets.disabledKeys.has(date.toKey())) return true;
+  if (sets.disabledDays && sets.disabledDays.has(dow)) return true;
+  return false;
+}
+function matchesRule(rule, date) {
+  if (rule.from && rule.to) {
+    return date.isBetween(rule.from, rule.to);
+  }
+  if (rule.recurringMonths) {
+    return rule.recurringMonths.has(date.month);
+  }
+  return false;
+}
+function findBestRule(rules, date) {
+  let best;
+  for (const rule of rules) {
+    if (!matchesRule(rule, date)) continue;
+    if (!best || rule.priority > best.priority) {
+      best = rule;
+    }
+  }
+  return best;
+}
+function createDateConstraint(options) {
+  const { minDate, maxDate, rules } = options;
+  const globalSets = precomputeSets(options);
+  const precomputedRules = rules == null ? void 0 : rules.map((rule, index) => ({
+    from: rule.from,
+    to: rule.to,
+    recurringMonths: rule.months ? new Set(rule.months) : void 0,
+    minDate: rule.minDate,
+    maxDate: rule.maxDate,
+    minRange: rule.minRange,
+    maxRange: rule.maxRange,
+    sets: precomputeSets(rule),
+    hasMinDate: rule.minDate !== void 0,
+    hasMaxDate: rule.maxDate !== void 0,
+    priority: rule.priority ?? 0,
+    originalIndex: index
+  }));
+  if (!precomputedRules || precomputedRules.length === 0) {
+    return (date) => checkDisabled(date, minDate, maxDate, globalSets);
+  }
+  return (date) => {
+    const rule = findBestRule(precomputedRules, date);
+    if (!rule) {
+      return checkDisabled(date, minDate, maxDate, globalSets);
+    }
+    const effectiveMinDate = rule.hasMinDate ? rule.minDate : minDate;
+    const effectiveMaxDate = rule.hasMaxDate ? rule.maxDate : maxDate;
+    const mergedSets = {
+      disabledKeys: rule.sets.disabledKeys !== void 0 ? rule.sets.disabledKeys : globalSets.disabledKeys,
+      disabledDays: rule.sets.disabledDays !== void 0 ? rule.sets.disabledDays : globalSets.disabledDays,
+      enabledKeys: rule.sets.enabledKeys !== void 0 ? rule.sets.enabledKeys : globalSets.enabledKeys,
+      enabledDays: rule.sets.enabledDays !== void 0 ? rule.sets.enabledDays : globalSets.enabledDays,
+      disabledMonths: rule.sets.disabledMonths !== void 0 ? rule.sets.disabledMonths : globalSets.disabledMonths,
+      enabledMonths: rule.sets.enabledMonths !== void 0 ? rule.sets.enabledMonths : globalSets.enabledMonths,
+      disabledYears: rule.sets.disabledYears !== void 0 ? rule.sets.disabledYears : globalSets.disabledYears,
+      enabledYears: rule.sets.enabledYears !== void 0 ? rule.sets.enabledYears : globalSets.enabledYears
+    };
+    return checkDisabled(date, effectiveMinDate, effectiveMaxDate, mergedSets);
+  };
+}
+function createRangeValidator(options) {
+  const { minRange, maxRange, rules } = options;
+  if (minRange === void 0 && maxRange === void 0 && (!rules || rules.every((r) => r.minRange === void 0 && r.maxRange === void 0))) {
+    return () => true;
+  }
+  const rangeRules = rules == null ? void 0 : rules.map((rule, index) => ({
+    from: rule.from,
+    to: rule.to,
+    recurringMonths: rule.months ? new Set(rule.months) : void 0,
+    minDate: rule.minDate,
+    maxDate: rule.maxDate,
+    minRange: rule.minRange,
+    maxRange: rule.maxRange,
+    sets: precomputeSets(rule),
+    hasMinDate: rule.minDate !== void 0,
+    hasMaxDate: rule.maxDate !== void 0,
+    priority: rule.priority ?? 0,
+    originalIndex: index
+  }));
+  return (start, end) => {
+    let effectiveMinRange = minRange;
+    let effectiveMaxRange = maxRange;
+    if (rangeRules) {
+      const rule = findBestRule(rangeRules, start);
+      if (rule) {
+        if (rule.minRange !== void 0) effectiveMinRange = rule.minRange;
+        if (rule.maxRange !== void 0) effectiveMaxRange = rule.maxRange;
+      }
+    }
+    const length = start.diffDays(end) + 1;
+    if (effectiveMinRange !== void 0 && length < effectiveMinRange) return false;
+    if (effectiveMaxRange !== void 0 && length > effectiveMaxRange) return false;
+    return true;
+  };
+}
+function createMonthConstraint(options) {
+  const { minDate, maxDate } = options;
+  const disabledMonthSet = options.disabledMonths ? new Set(options.disabledMonths) : void 0;
+  const enabledMonthSet = options.enabledMonths ? new Set(options.enabledMonths) : void 0;
+  const disabledYearSet = options.disabledYears ? new Set(options.disabledYears) : void 0;
+  const enabledYearSet = options.enabledYears ? new Set(options.enabledYears) : void 0;
+  return (year, month) => {
+    if (minDate) {
+      const endOfMonth = new CalendarDate(year, month, 1).endOfMonth();
+      if (endOfMonth.isBefore(minDate)) return true;
+    }
+    if (maxDate) {
+      const startOfMonth = new CalendarDate(year, month, 1);
+      if (startOfMonth.isAfter(maxDate)) return true;
+    }
+    if (enabledYearSet && !enabledYearSet.has(year)) return true;
+    if (disabledYearSet && disabledYearSet.has(year)) return true;
+    if (enabledMonthSet && !enabledMonthSet.has(month)) return true;
+    if (disabledMonthSet && disabledMonthSet.has(month)) return true;
+    return false;
+  };
+}
+function createYearConstraint(options) {
+  const { minDate, maxDate } = options;
+  const disabledYearSet = options.disabledYears ? new Set(options.disabledYears) : void 0;
+  const enabledYearSet = options.enabledYears ? new Set(options.enabledYears) : void 0;
+  return (year) => {
+    if (minDate) {
+      const endOfYear = new CalendarDate(year, 12, 31);
+      if (endOfYear.isBefore(minDate)) return true;
+    }
+    if (maxDate) {
+      const startOfYear = new CalendarDate(year, 1, 1);
+      if (startOfYear.isAfter(maxDate)) return true;
+    }
+    if (enabledYearSet && !enabledYearSet.has(year)) return true;
+    if (disabledYearSet && disabledYearSet.has(year)) return true;
+    return false;
+  };
+}
+function isDateDisabled(date, options) {
+  return createDateConstraint(options)(date);
+}
+const DEFAULT_MESSAGES = {
+  beforeMinDate: "Before the earliest available date",
+  afterMaxDate: "After the latest available date",
+  disabledDate: "This date is not available",
+  disabledDayOfWeek: "This day of the week is not available",
+  disabledMonth: "This month is not available",
+  disabledYear: "This year is not available",
+  notEnabledDate: "This date is not available",
+  notEnabledDayOfWeek: "This day of the week is not available",
+  notEnabledMonth: "This month is not available",
+  notEnabledYear: "This year is not available"
+};
+function collectReasons(date, minDate, maxDate, sets, msgs) {
+  const reasons = [];
+  if (minDate && date.isBefore(minDate)) {
+    reasons.push(msgs.beforeMinDate);
+    return reasons;
+  }
+  if (maxDate && date.isAfter(maxDate)) {
+    reasons.push(msgs.afterMaxDate);
+    return reasons;
+  }
+  if (sets.enabledKeys && sets.enabledKeys.has(date.toKey())) return reasons;
+  if (sets.enabledYears && !sets.enabledYears.has(date.year)) {
+    reasons.push(msgs.notEnabledYear);
+    return reasons;
+  }
+  if (sets.disabledYears && sets.disabledYears.has(date.year)) {
+    reasons.push(msgs.disabledYear);
+    return reasons;
+  }
+  if (sets.enabledMonths && !sets.enabledMonths.has(date.month)) {
+    reasons.push(msgs.notEnabledMonth);
+    return reasons;
+  }
+  if (sets.disabledMonths && sets.disabledMonths.has(date.month)) {
+    reasons.push(msgs.disabledMonth);
+    return reasons;
+  }
+  const needsDow = sets.enabledDays !== void 0 || sets.disabledDays !== void 0;
+  const dow = needsDow ? date.toNativeDate().getDay() : -1;
+  if (sets.enabledDays && !sets.enabledDays.has(dow)) {
+    reasons.push(msgs.notEnabledDayOfWeek);
+  }
+  if (sets.disabledKeys && sets.disabledKeys.has(date.toKey())) {
+    reasons.push(msgs.disabledDate);
+  }
+  if (sets.disabledDays && sets.disabledDays.has(dow)) {
+    reasons.push(msgs.disabledDayOfWeek);
+  }
+  return reasons;
+}
+function createDisabledReasons(options, messages) {
+  const { minDate, maxDate, rules } = options;
+  const msgs = { ...DEFAULT_MESSAGES, ...messages };
+  const globalSets = precomputeSets(options);
+  const precomputedRules = rules == null ? void 0 : rules.map((rule, index) => ({
+    from: rule.from,
+    to: rule.to,
+    recurringMonths: rule.months ? new Set(rule.months) : void 0,
+    minDate: rule.minDate,
+    maxDate: rule.maxDate,
+    minRange: rule.minRange,
+    maxRange: rule.maxRange,
+    sets: precomputeSets(rule),
+    hasMinDate: rule.minDate !== void 0,
+    hasMaxDate: rule.maxDate !== void 0,
+    priority: rule.priority ?? 0,
+    originalIndex: index
+  }));
+  if (!precomputedRules || precomputedRules.length === 0) {
+    return (date) => collectReasons(date, minDate, maxDate, globalSets, msgs);
+  }
+  return (date) => {
+    const rule = findBestRule(precomputedRules, date);
+    if (!rule) {
+      return collectReasons(date, minDate, maxDate, globalSets, msgs);
+    }
+    const effectiveMinDate = rule.hasMinDate ? rule.minDate : minDate;
+    const effectiveMaxDate = rule.hasMaxDate ? rule.maxDate : maxDate;
+    const mergedSets = {
+      disabledKeys: rule.sets.disabledKeys !== void 0 ? rule.sets.disabledKeys : globalSets.disabledKeys,
+      disabledDays: rule.sets.disabledDays !== void 0 ? rule.sets.disabledDays : globalSets.disabledDays,
+      enabledKeys: rule.sets.enabledKeys !== void 0 ? rule.sets.enabledKeys : globalSets.enabledKeys,
+      enabledDays: rule.sets.enabledDays !== void 0 ? rule.sets.enabledDays : globalSets.enabledDays,
+      disabledMonths: rule.sets.disabledMonths !== void 0 ? rule.sets.disabledMonths : globalSets.disabledMonths,
+      enabledMonths: rule.sets.enabledMonths !== void 0 ? rule.sets.enabledMonths : globalSets.enabledMonths,
+      disabledYears: rule.sets.disabledYears !== void 0 ? rule.sets.disabledYears : globalSets.disabledYears,
+      enabledYears: rule.sets.enabledYears !== void 0 ? rule.sets.enabledYears : globalSets.enabledYears
+    };
+    return collectReasons(date, effectiveMinDate, effectiveMaxDate, mergedSets, msgs);
+  };
+}
+function generateMonth(year, month, firstDayOfWeek = 0, today, isDisabled) {
+  const todayRef = today ?? CalendarDate.today();
+  const disabledFn = isDisabled ?? (() => false);
+  const firstOfMonth = new CalendarDate(year, month, 1);
+  const firstDow = firstOfMonth.toNativeDate().getDay();
+  const offset = (firstDow - firstDayOfWeek + 7) % 7;
+  const gridStart = firstOfMonth.addDays(-offset);
+  const rows = [];
+  const weekNumbers = [];
+  for (let row = 0; row < 6; row++) {
+    const cells = [];
+    for (let col = 0; col < 7; col++) {
+      const dayIndex = row * 7 + col;
+      const date = gridStart.addDays(dayIndex);
+      cells.push({
+        date,
+        isCurrentMonth: date.month === month && date.year === year,
+        isToday: date.isSame(todayRef),
+        isDisabled: disabledFn(date)
+      });
+    }
+    const firstCell = cells[0];
+    if (firstCell) weekNumbers.push(getISOWeekNumber(firstCell.date));
+    rows.push(cells);
+  }
+  return { year, month, rows, weekNumbers };
+}
+function generateMonthGrid(year, today, locale, isMonthDisabled) {
+  const todayRef = today ?? CalendarDate.today();
+  const disabledFn = isMonthDisabled ?? (() => false);
+  const rows = [];
+  for (let row = 0; row < 3; row++) {
+    const cells = [];
+    for (let col = 0; col < 4; col++) {
+      const month = row * 4 + col + 1;
+      const d = new CalendarDate(year, month, 1);
+      cells.push({
+        month,
+        year,
+        label: d.format({ month: "short" }, locale),
+        isCurrentMonth: todayRef.month === month && todayRef.year === year,
+        isDisabled: disabledFn(year, month)
+      });
+    }
+    rows.push(cells);
+  }
+  return rows;
+}
+function generateYearGrid(centerYear, today, isYearDisabled) {
+  const todayRef = today ?? CalendarDate.today();
+  const disabledFn = isYearDisabled ?? (() => false);
+  const startYear = Math.floor(centerYear / 12) * 12;
+  const rows = [];
+  for (let row = 0; row < 3; row++) {
+    const cells = [];
+    for (let col = 0; col < 4; col++) {
+      const year = startYear + row * 4 + col;
+      cells.push({
+        year,
+        label: String(year),
+        isCurrentYear: todayRef.year === year,
+        isDisabled: disabledFn(year)
+      });
+    }
+    rows.push(cells);
+  }
+  return rows;
+}
+function generateMonths(year, month, count, firstDayOfWeek = 0, today, isDisabled) {
+  const grids = [];
+  for (let i = 0; i < count; i++) {
+    let targetMonth = month + i;
+    let targetYear = year;
+    while (targetMonth > 12) {
+      targetMonth -= 12;
+      targetYear++;
+    }
+    grids.push(generateMonth(targetYear, targetMonth, firstDayOfWeek, today, isDisabled));
+  }
+  return grids;
+}
+class SingleSelection {
+  constructor(initial) {
+    this.selected = null;
+    this.selected = initial ?? null;
+  }
+  isSelected(date) {
+    return this.selected !== null && this.selected.isSame(date);
+  }
+  /** Toggle: select the date, or deselect if it's already selected. */
+  toggle(date) {
+    if (this.selected !== null && this.selected.isSame(date)) {
+      this.selected = null;
+    } else {
+      this.selected = date;
+    }
+  }
+  clear() {
+    this.selected = null;
+  }
+  toArray() {
+    return this.selected !== null ? [this.selected] : [];
+  }
+  /** Returns the ISO string of the selected date, or empty string. */
+  toValue() {
+    return this.selected !== null ? this.selected.toISO() : "";
+  }
+  /** Direct access to the current selection. */
+  getSelected() {
+    return this.selected;
+  }
+}
+class MultipleSelection {
+  constructor(initial) {
+    this.keys = /* @__PURE__ */ new Set();
+    if (initial) {
+      for (const date of initial) {
+        this.keys.add(date.toKey());
+      }
+    }
+  }
+  isSelected(date) {
+    return this.keys.has(date.toKey());
+  }
+  /** Toggle: add the date if absent, remove if present. */
+  toggle(date) {
+    const key = date.toKey();
+    if (this.keys.has(key)) {
+      this.keys.delete(key);
+    } else {
+      this.keys.add(key);
+    }
+  }
+  clear() {
+    this.keys.clear();
+  }
+  /** Returns selected dates sorted chronologically. */
+  toArray() {
+    return [...this.keys].sort().map((key) => CalendarDate.fromISO(key));
+  }
+  /** Returns comma-separated ISO strings, sorted chronologically. */
+  toValue() {
+    return [...this.keys].sort().join(", ");
+  }
+  /** Number of currently selected dates. */
+  get count() {
+    return this.keys.size;
+  }
+}
+class RangeSelection {
+  constructor(start, end) {
+    this.start = null;
+    this.end = null;
+    this.start = start ?? null;
+    this.end = end ?? null;
+  }
+  isSelected(date) {
+    if (this.start !== null && this.start.isSame(date)) return true;
+    if (this.end !== null && this.end.isSame(date)) return true;
+    return false;
+  }
+  /**
+   * Toggle behavior for range selection:
+   * 1. Nothing selected → set as start
+   * 2. Only start selected → set as end (swap if before start)
+   * 3. Both selected → clear and set as new start
+   */
+  toggle(date) {
+    if (this.start === null) {
+      this.start = date;
+    } else if (this.end === null) {
+      if (date.isBefore(this.start)) {
+        this.end = this.start;
+        this.start = date;
+      } else if (date.isSame(this.start)) {
+        this.start = null;
+      } else {
+        this.end = date;
+      }
+    } else {
+      this.start = date;
+      this.end = null;
+    }
+  }
+  /**
+   * Directly set both start and end of the range.
+   * Useful for programmatic assignment where `toggle()` semantics are undesirable
+   * (e.g., same-day ranges where toggling the same date would deselect).
+   */
+  setRange(start, end) {
+    this.start = start;
+    this.end = end;
+  }
+  clear() {
+    this.start = null;
+    this.end = null;
+  }
+  /** Returns [start, end] if both set, [start] if partial, or [] if empty. */
+  toArray() {
+    if (this.start === null) return [];
+    if (this.end === null) return [this.start];
+    return [this.start, this.end];
+  }
+  /** Returns "start – end" ISO strings, or just start, or empty string. */
+  toValue() {
+    if (this.start === null) return "";
+    if (this.end === null) return this.start.toISO();
+    return `${this.start.toISO()} – ${this.end.toISO()}`;
+  }
+  /**
+   * Check if a date falls within the range (inclusive), with optional
+   * hover preview for visual feedback during range building.
+   *
+   * When only start is selected and the user hovers over a date,
+   * pass that date as `hoverDate` to preview the range.
+   */
+  isInRange(date, hoverDate) {
+    if (this.start !== null && this.end !== null) {
+      return date.isBetween(this.start, this.end);
+    }
+    if (this.start !== null && hoverDate !== void 0) {
+      const rangeStart = this.start.isBefore(hoverDate) ? this.start : hoverDate;
+      const rangeEnd = this.start.isBefore(hoverDate) ? hoverDate : this.start;
+      return date.isBetween(rangeStart, rangeEnd);
+    }
+    return false;
+  }
+  /** Direct access to the range endpoints. */
+  getStart() {
+    return this.start;
+  }
+  getEnd() {
+    return this.end;
+  }
+  /** Whether the range is partially selected (start only, no end). */
+  isPartial() {
+    return this.start !== null && this.end === null;
+  }
+  /** Whether the range is fully selected (both start and end). */
+  isComplete() {
+    return this.start !== null && this.end !== null;
+  }
+}
+const TOKEN_FORMATTERS = {
+  YYYY: (d) => String(d.year).padStart(4, "0"),
+  YY: (d) => String(d.year % 100).padStart(2, "0"),
+  MM: (d) => String(d.month).padStart(2, "0"),
+  M: (d) => String(d.month),
+  DD: (d) => String(d.day).padStart(2, "0"),
+  D: (d) => String(d.day)
+};
+const TOKEN_NAMES$2 = Object.keys(TOKEN_FORMATTERS).sort((a, b) => b.length - a.length);
+function formatDate(date, format) {
+  let remaining = format;
+  let result = "";
+  while (remaining.length > 0) {
+    let matched = false;
+    for (const token of TOKEN_NAMES$2) {
+      if (remaining.startsWith(token)) {
+        const formatter = TOKEN_FORMATTERS[token];
+        if (formatter) {
+          result += formatter(date);
+          remaining = remaining.slice(token.length);
+          matched = true;
+          break;
+        }
+      }
+    }
+    if (!matched) {
+      result += remaining[0];
+      remaining = remaining.slice(1);
+    }
+  }
+  return result;
+}
+function formatRange(start, end, format) {
+  return `${formatDate(start, format)} – ${formatDate(end, format)}`;
+}
+function formatMultiple(dates, format, maxDisplay) {
+  if (dates.length === 0) return "";
+  if (maxDisplay !== void 0 && dates.length > maxDisplay) {
+    return `${dates.length} dates selected`;
+  }
+  return dates.map((d) => formatDate(d, format)).join(", ");
+}
+const TOKENS = {
+  YYYY: { pattern: "(\\d{4})", extract: (m) => Number(m) },
+  YY: { pattern: "(\\d{2})", extract: (m) => 2e3 + Number(m) },
+  MM: { pattern: "(\\d{1,2})", extract: (m) => Number(m) },
+  M: { pattern: "(\\d{1,2})", extract: (m) => Number(m) },
+  DD: { pattern: "(\\d{1,2})", extract: (m) => Number(m) },
+  D: { pattern: "(\\d{1,2})", extract: (m) => Number(m) }
+};
+const TOKEN_NAMES$1 = Object.keys(TOKENS).sort((a, b) => b.length - a.length);
+function compileFormat(format) {
+  let remaining = format;
+  let regexStr = "^";
+  const extractors = [];
+  let groupIndex = 1;
+  while (remaining.length > 0) {
+    let matched = false;
+    for (const name of TOKEN_NAMES$1) {
+      if (remaining.startsWith(name)) {
+        const def = TOKENS[name];
+        if (def) {
+          regexStr += def.pattern;
+          extractors.push({ token: name, index: groupIndex });
+          groupIndex++;
+          remaining = remaining.slice(name.length);
+          matched = true;
+          break;
+        }
+      }
+    }
+    if (!matched) {
+      const char = remaining[0];
+      regexStr += escapeRegex(char);
+      remaining = remaining.slice(1);
+    }
+  }
+  regexStr += "$";
+  return { regex: new RegExp(regexStr), extractors };
+}
+function escapeRegex(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function isValidDate(year, month, day) {
+  if (month < 1 || month > 12) return false;
+  if (day < 1) return false;
+  if (day > daysInMonth(year, month)) return false;
+  if (year < 1) return false;
+  return true;
+}
+function parseDate(input, format) {
+  const trimmed = input.trim();
+  if (trimmed === "") return null;
+  const { regex, extractors } = compileFormat(format);
+  const match = regex.exec(trimmed);
+  if (!match) return null;
+  let year = 0;
+  let month = 0;
+  let day = 0;
+  for (const { token, index } of extractors) {
+    const value = match[index];
+    if (value === void 0) return null;
+    const def = TOKENS[token];
+    if (!def) return null;
+    const extracted = def.extract(value);
+    if (token === "YYYY" || token === "YY") {
+      year = extracted;
+    } else if (token === "MM" || token === "M") {
+      month = extracted;
+    } else if (token === "DD" || token === "D") {
+      day = extracted;
+    }
+  }
+  if (!isValidDate(year, month, day)) return null;
+  return new CalendarDate(year, month, day);
+}
+function parseDateRange(input, format) {
+  const trimmed = input.trim();
+  if (trimmed === "") return null;
+  const separators = [" – ", " — ", " - "];
+  for (const sep of separators) {
+    const idx = trimmed.indexOf(sep);
+    if (idx !== -1) {
+      const startStr = trimmed.slice(0, idx);
+      const endStr = trimmed.slice(idx + sep.length);
+      const start = parseDate(startStr, format) ?? CalendarDate.fromISO(startStr.trim());
+      const end = parseDate(endStr, format) ?? CalendarDate.fromISO(endStr.trim());
+      if (start && end) return [start, end];
+    }
+  }
+  return null;
+}
+function parseDateMultiple(input, format) {
+  const trimmed = input.trim();
+  if (trimmed === "") return [];
+  const parts = trimmed.split(",");
+  const dates = [];
+  for (const part of parts) {
+    const date = parseDate(part, format) ?? CalendarDate.fromISO(part.trim());
+    if (date) dates.push(date);
+  }
+  return dates;
+}
+const TOKEN_DIGIT_COUNT = {
+  YYYY: 4,
+  YY: 2,
+  MM: 2,
+  M: 2,
+  DD: 2,
+  D: 2
+};
+const TOKEN_NAMES = Object.keys(TOKEN_DIGIT_COUNT).sort((a, b) => b.length - a.length);
+function extractDigits(str) {
+  return str.replace(/\D/g, "");
+}
+function countDigits(str) {
+  let count = 0;
+  for (const ch of str) {
+    if (ch >= "0" && ch <= "9") count++;
+  }
+  return count;
+}
+function applyMaskSlots(digits, slots) {
+  let result = "";
+  let digitIndex = 0;
+  for (const slot of slots) {
+    if (slot.type === "digit") {
+      if (digitIndex >= digits.length) break;
+      result += digits[digitIndex];
+      digitIndex++;
+    } else {
+      if (digitIndex > 0) {
+        result += slot.char;
+      } else {
+        break;
+      }
+    }
+  }
+  return result;
+}
+function cursorAfterNDigits(masked, slots, digitCount) {
+  if (digitCount <= 0) return 0;
+  let seen = 0;
+  for (let i = 0; i < masked.length && i < slots.length; i++) {
+    const slot = slots[i];
+    if (slot && slot.type === "digit") {
+      seen++;
+      if (seen === digitCount) {
+        let pos = i + 1;
+        while (pos < slots.length && pos < masked.length) {
+          const next = slots[pos];
+          if (!next || next.type !== "literal") break;
+          pos++;
+        }
+        return pos;
+      }
+    }
+  }
+  return masked.length;
+}
+function parseFormatToSlots(format) {
+  const slots = [];
+  let remaining = format;
+  while (remaining.length > 0) {
+    let matched = false;
+    for (const token of TOKEN_NAMES) {
+      if (remaining.startsWith(token)) {
+        const count = TOKEN_DIGIT_COUNT[token];
+        if (count === void 0) continue;
+        for (let i = 0; i < count; i++) {
+          slots.push({ type: "digit", char: "9" });
+        }
+        remaining = remaining.slice(token.length);
+        matched = true;
+        break;
+      }
+    }
+    if (!matched) {
+      slots.push({ type: "literal", char: remaining[0] });
+      remaining = remaining.slice(1);
+    }
+  }
+  return slots;
+}
+function createMask(format) {
+  const slots = parseFormatToSlots(format);
+  const maxDigits = slots.filter((s) => s.type === "digit").length;
+  const pattern = slots.map((s) => s.type === "digit" ? "9" : s.char).join("");
+  return {
+    apply(rawInput) {
+      const digits = extractDigits(rawInput).slice(0, maxDigits);
+      return applyMaskSlots(digits, slots);
+    },
+    get pattern() {
+      return pattern;
+    },
+    get format() {
+      return format;
+    },
+    get length() {
+      return slots.length;
+    },
+    get slots() {
+      return slots;
+    },
+    get maxDigits() {
+      return maxDigits;
+    }
+  };
+}
+function createMaskHandlers(mask) {
+  const { slots, maxDigits } = mask;
+  function onInput(e) {
+    const el = e.target;
+    const rawValue = el.value;
+    const cursorPos = el.selectionStart ?? rawValue.length;
+    const digitsBefore = countDigits(rawValue.slice(0, cursorPos));
+    const digits = extractDigits(rawValue).slice(0, maxDigits);
+    const masked = applyMaskSlots(digits, slots);
+    el.value = masked;
+    const newCursor = cursorAfterNDigits(masked, slots, digitsBefore);
+    el.setSelectionRange(newCursor, newCursor);
+  }
+  function onKeyDown(e) {
+    const el = e.target;
+    const pos = el.selectionStart ?? 0;
+    const selEnd = el.selectionEnd ?? pos;
+    if (pos !== selEnd) return;
+    if (e.key === "Backspace" && pos > 0) {
+      const prevSlot = pos <= slots.length ? slots[pos - 1] : void 0;
+      if (prevSlot && prevSlot.type === "literal") {
+        e.preventDefault();
+        let targetPos = pos - 1;
+        while (targetPos > 0) {
+          const s = slots[targetPos - 1];
+          if (!s || s.type !== "literal") break;
+          targetPos--;
+        }
+        if (targetPos > 0) {
+          const currentDigits = extractDigits(el.value);
+          const digitIndex = countDigits(el.value.slice(0, targetPos));
+          if (digitIndex > 0) {
+            const newDigits = currentDigits.slice(0, digitIndex - 1) + currentDigits.slice(digitIndex);
+            const masked = applyMaskSlots(newDigits, slots);
+            el.value = masked;
+            const newCursor = cursorAfterNDigits(masked, slots, digitIndex - 1);
+            el.setSelectionRange(newCursor, newCursor);
+          }
+        }
+      }
+    }
+    if (e.key === "Delete" && pos < el.value.length) {
+      const curSlot = pos < slots.length ? slots[pos] : void 0;
+      if (curSlot && curSlot.type === "literal") {
+        e.preventDefault();
+        let targetPos = pos + 1;
+        while (targetPos < slots.length) {
+          const s = slots[targetPos];
+          if (!s || s.type !== "literal") break;
+          targetPos++;
+        }
+        if (targetPos < el.value.length) {
+          const currentDigits = extractDigits(el.value);
+          const digitIndex = countDigits(el.value.slice(0, targetPos));
+          const newDigits = currentDigits.slice(0, digitIndex) + currentDigits.slice(digitIndex + 1);
+          const masked = applyMaskSlots(newDigits, slots);
+          el.value = masked;
+          const newCursor = cursorAfterNDigits(masked, slots, digitIndex);
+          el.setSelectionRange(newCursor, newCursor);
+        }
+      }
+    }
+  }
+  function onPaste(e) {
+    var _a;
+    e.preventDefault();
+    const el = e.target;
+    const pasted = ((_a = e.clipboardData) == null ? void 0 : _a.getData("text")) ?? "";
+    const pastedDigits = extractDigits(pasted);
+    if (pastedDigits.length === 0) return;
+    const pos = el.selectionStart ?? 0;
+    const end = el.selectionEnd ?? pos;
+    const currentDigits = extractDigits(el.value);
+    const digitsBefore = countDigits(el.value.slice(0, pos));
+    const digitsInSelection = countDigits(el.value.slice(pos, end));
+    const newDigits = (currentDigits.slice(0, digitsBefore) + pastedDigits + currentDigits.slice(digitsBefore + digitsInSelection)).slice(0, maxDigits);
+    const masked = applyMaskSlots(newDigits, slots);
+    el.value = masked;
+    const targetDigitCount = Math.min(digitsBefore + pastedDigits.length, maxDigits);
+    const newCursor = cursorAfterNDigits(masked, slots, targetDigitCount);
+    el.setSelectionRange(newCursor, newCursor);
+  }
+  return { onInput, onKeyDown, onPaste };
+}
+function attachMask(input, format) {
+  const mask = createMask(format);
+  const handlers = createMaskHandlers(mask);
+  input.addEventListener("input", handlers.onInput);
+  input.addEventListener("keydown", handlers.onKeyDown);
+  input.addEventListener("paste", handlers.onPaste);
+  if (input.value) {
+    input.value = mask.apply(input.value);
+  }
+  return () => {
+    input.removeEventListener("input", handlers.onInput);
+    input.removeEventListener("keydown", handlers.onKeyDown);
+    input.removeEventListener("paste", handlers.onPaste);
+  };
+}
+const closeSvg = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><line x1="4" y1="4" x2="12" y2="12"/><line x1="12" y1="4" x2="4" y2="12"/></svg>';
+const GRID_ROWS = 6;
+function dayRow(ri, showWeekNumbers) {
+  const rowClass = showWeekNumbers ? "rc-row rc-row--week-numbers" : "rc-row";
+  const weekNumCell = showWeekNumbers ? `<div class="rc-week-number" x-text="mg.weekNumbers[${ri}]"></div>` : "";
+  return `<div class="${rowClass}" x-show="mg.rows.length > ${ri}">
+                ${weekNumCell}<template x-for="cell in (mg.rows[${ri}] || [])" :key="cell.date.toISO()">
+                  <div :class="dayClasses(cell)" :id="'day-' + cell.date.toISO()" :aria-selected="isSelected(cell.date)" :aria-disabled="cell.isDisabled" :title="dayTitle(cell)" role="option" tabindex="-1" @click="!cell.isDisabled && selectDate(cell.date)" @mouseenter="hoverDate = cell.date" @mouseleave="hoverDate = null" x-text="cell.date.day"></div>
+                </template>
+              </div>`;
+}
+function dayRows(showWeekNumbers) {
+  return Array.from({ length: GRID_ROWS }, (_, ri) => dayRow(ri, showWeekNumbers)).join("\n            ");
+}
+function yearPickerView() {
+  return `<template x-if="view === 'years'">
+  <div class="rc-view-enter">
+    <div class="rc-header">
+      <button class="rc-header__nav" @click="prev()" :disabled="!canGoPrev" aria-label="Previous decade">&#8249;</button>
+      <span class="rc-header__label" x-text="decadeLabel"></span>
+      <button class="rc-header__nav" @click="next()" :disabled="!canGoNext" aria-label="Next decade">&#8250;</button>
+    </div>
+    <div class="rc-year-grid" role="group" :aria-label="decadeLabel">
+      <template x-for="cell in yearGrid.flat()" :key="cell.year">
+        <div :class="yearClasses(cell)" :aria-disabled="cell.isDisabled" tabindex="-1" @click="!cell.isDisabled && selectYear(cell.year)" x-text="cell.label"></div>
+      </template>
+    </div>
+  </div>
+</template>`;
+}
+function monthPickerView() {
+  return `<template x-if="view === 'months'">
+  <div class="rc-view-enter">
+    <div class="rc-header">
+      <button class="rc-header__nav" @click="prev()" :disabled="!canGoPrev" aria-label="Previous year">&#8249;</button>
+      <button class="rc-header__label" @click="setView('years')" aria-label="Change view" x-text="yearLabel"></button>
+      <button class="rc-header__nav" @click="next()" :disabled="!canGoNext" aria-label="Next year">&#8250;</button>
+    </div>
+    <div class="rc-month-grid" role="group" :aria-label="yearLabel">
+      <template x-for="cell in monthGrid.flat()" :key="cell.month">
+        <div :class="monthClasses(cell)" :aria-disabled="cell.isDisabled" tabindex="-1" @click="!cell.isDisabled && selectMonth(cell.month)" x-text="cell.label"></div>
+      </template>
+    </div>
+  </div>
+</template>`;
+}
+function dayView(isDual, showWeekNumbers) {
+  const prevStyle = isDual ? ` :style="gi > 0 ? 'visibility:hidden' : ''"` : "";
+  const nextStyle = isDual ? ` :style="gi < grid.length - 1 ? 'visibility:hidden' : ''"` : "";
+  const monthsClass = isDual ? ` :class="{ 'rc-months--dual': monthCount === 2 }"` : "";
+  const gridClassBinding = `:class="{ 'rc-grid--slide-next': _navDirection === 'next', 'rc-grid--slide-prev': _navDirection === 'prev' }"`;
+  const weekdayBlock = showWeekNumbers ? `<div class="rc-weekdays rc-weekdays--week-numbers">
+          <span class="rc-weekday rc-week-label"></span>
+          <template x-for="wd in weekdayHeaders" :key="wd">
+            <span class="rc-weekday" x-text="wd"></span>
+          </template>
+        </div>` : `<div class="rc-weekdays">
+          <template x-for="wd in weekdayHeaders" :key="wd">
+            <span class="rc-weekday" x-text="wd"></span>
+          </template>
+        </div>`;
+  const gridClass = showWeekNumbers ? '"rc-grid rc-grid--week-numbers"' : '"rc-grid"';
+  const rows = dayRows(showWeekNumbers);
+  return `<template x-if="view === 'days'">
+  <div class="rc-months${isDual ? "" : " rc-view-enter"}"${monthsClass}${isDual ? "" : ""}>
+    <template x-for="(mg, gi) in grid" :key="mg.year + '-' + mg.month">
+      <div${isDual ? "" : ""}>
+        <div class="rc-header">
+          <button class="rc-header__nav" @click="prev()" :disabled="!canGoPrev" aria-label="Previous month"${prevStyle}>&#8249;</button>
+          <button class="rc-header__label" @click="setView('months')" aria-label="Change view" x-text="monthYearLabel(gi)"></button>
+          <button class="rc-header__nav" @click="next()" :disabled="!canGoNext" aria-label="Next month"${nextStyle}>&#8250;</button>
+        </div>
+        ${weekdayBlock}
+        <div class="rc-grid-wrapper">
+          <div class=${gridClass} ${gridClassBinding} @animationend="_navDirection = ''" role="listbox" :aria-label="monthYearLabel(gi)">
+            ${rows}
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>`;
+}
+function scrollableDayView(showWeekNumbers, scrollHeight) {
+  const weekdayBlock = showWeekNumbers ? `<div class="rc-weekdays rc-weekdays--week-numbers">
+          <span class="rc-weekday rc-week-label"></span>
+          <template x-for="wd in weekdayHeaders" :key="wd">
+            <span class="rc-weekday" x-text="wd"></span>
+          </template>
+        </div>` : `<div class="rc-weekdays">
+          <template x-for="wd in weekdayHeaders" :key="wd">
+            <span class="rc-weekday" x-text="wd"></span>
+          </template>
+        </div>`;
+  const gridClass = showWeekNumbers ? '"rc-grid rc-grid--week-numbers"' : '"rc-grid"';
+  const rows = dayRows(showWeekNumbers);
+  return `<template x-if="view === 'days'">
+  <div>
+    <div class="rc-header rc-header--scroll-sticky">
+      <span class="rc-header__label rc-header__label--scroll" x-text="scrollHeaderLabel"></span>
+    </div>
+    ${weekdayBlock}
+    <div class="rc-months rc-months--scroll" style="max-height: ${scrollHeight}px">
+      <template x-for="(mg, gi) in grid" :key="mg.year + '-' + mg.month">
+        <div :data-month-id="'month-' + mg.year + '-' + mg.month">
+          <div class="rc-header rc-header--scroll" x-show="gi > 0">
+            <span class="rc-header__label rc-header__label--scroll" x-text="monthYearLabel(gi)"></span>
+          </div>
+          <div class=${gridClass} role="listbox" :aria-label="monthYearLabel(gi)">
+            ${rows}
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>`;
+}
+function wizardChrome() {
+  return `<div class="rc-wizard-steps">
+  <template x-for="step in wizardTotalSteps" :key="step">
+    <div class="rc-wizard-step" :class="{ 'rc-wizard-step--active': wizardStep === step, 'rc-wizard-step--done': wizardStep > step }"></div>
+  </template>
+</div>
+<div class="rc-wizard-label" x-text="wizardStepLabel"></div>
+<template x-if="wizardStep > 1">
+  <button class="rc-wizard-back" @click="wizardBack()" aria-label="Go back">&#8249; Back</button>
+</template>`;
+}
+function wizardSummary() {
+  return `<div class="rc-wizard-summary" x-show="wizardSummary" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 transform translate-y-1" x-transition:enter-end="opacity-100 transform translate-y-0" x-text="wizardSummary"></div>`;
+}
+function popupWrapper(content) {
+  return `<div x-ref="popup" x-show="isOpen" :style="popupStyle" class="rc-popup-overlay" @click.self="close()" role="dialog" aria-modal="true" :aria-label="popupAriaLabel" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
+${content}
+</div>`;
+}
+function popupHeader(isWizard) {
+  const title = isWizard ? '<span class="rc-popup-header__title" x-text="wizardStepLabel"></span>' : '<span class="rc-popup-header__title">Select Date</span>';
+  return `<div class="rc-popup-header">
+  ${title}
+  <button class="rc-popup-header__close" @click="close()" aria-label="Close calendar">${closeSvg}</button>
+</div>`;
+}
+function presetsBlock() {
+  return `<div class="rc-presets" role="group" aria-label="Quick select">
+  <template x-for="(preset, pi) in presets" :key="pi">
+    <button class="rc-preset" @click="applyPreset(pi)" x-text="preset.label"></button>
+  </template>
+</div>`;
+}
+function hiddenInputs() {
+  return `<template x-if="inputName">
+  <template x-for="val in hiddenInputValues" :key="val">
+    <input type="hidden" :name="inputName" :value="val">
+  </template>
+</template>`;
+}
+function generateCalendarTemplate(options) {
+  const { display, isDualMonth, isWizard, hasName, showWeekNumbers, hasPresets, isScrollable, scrollHeight } = options;
+  const isPopup = display === "popup";
+  const calendarClass = isWizard ? "rc-calendar rc-calendar--wizard" : "rc-calendar";
+  const ariaLabel = isWizard ? "Birth date wizard" : "Calendar";
+  const parts = [];
+  if (isPopup) {
+    parts.push(popupHeader(isWizard));
+  }
+  if (isWizard) {
+    parts.push(wizardChrome());
+  }
+  parts.push(yearPickerView());
+  parts.push(monthPickerView());
+  if (isScrollable) {
+    parts.push(scrollableDayView(showWeekNumbers, scrollHeight));
+  } else {
+    parts.push(dayView(isDualMonth, showWeekNumbers));
+  }
+  if (hasPresets) {
+    parts.push(presetsBlock());
+  }
+  if (isWizard) {
+    parts.push(wizardSummary());
+  }
+  if (hasName) {
+    parts.push(hiddenInputs());
+  }
+  const calendarInner = parts.join("\n");
+  const calendarEl = `<div class="${calendarClass}" @keydown="handleKeydown($event)" tabindex="0" :aria-activedescendant="focusedDateISO ? 'day-' + focusedDateISO : null" role="application" aria-label="${ariaLabel}">
+<div class="rc-sr-only" role="status" aria-live="polite" aria-atomic="true" x-text="_statusMessage"></div>
+${calendarInner}
+</div>`;
+  if (isPopup) {
+    return popupWrapper(calendarEl);
+  }
+  return calendarEl;
+}
+function alpine(self) {
+  return self;
+}
+function parseISODate(s) {
+  return CalendarDate.fromISO(s);
+}
+function parseISODates(arr) {
+  return arr.map((s) => CalendarDate.fromISO(s)).filter((d) => d !== null);
+}
+function parseConfigRule(rule) {
+  const from = rule.from ? parseISODate(rule.from) : null;
+  const to = rule.to ? parseISODate(rule.to) : null;
+  const hasDateRange = from !== null && to !== null;
+  const hasMonths = Array.isArray(rule.months) && rule.months.length > 0;
+  if (!hasDateRange && !hasMonths) return null;
+  const result = {};
+  if (hasDateRange) {
+    result.from = from;
+    result.to = to;
+  }
+  if (hasMonths) {
+    result.months = rule.months;
+  }
+  if (rule.priority !== void 0) {
+    result.priority = rule.priority;
+  }
+  if (rule.minDate) {
+    const d = parseISODate(rule.minDate);
+    if (d) result.minDate = d;
+  }
+  if (rule.maxDate) {
+    const d = parseISODate(rule.maxDate);
+    if (d) result.maxDate = d;
+  }
+  if (rule.disabledDates) {
+    result.disabledDates = parseISODates(rule.disabledDates);
+  }
+  if (rule.disabledDaysOfWeek) {
+    result.disabledDaysOfWeek = rule.disabledDaysOfWeek;
+  }
+  if (rule.enabledDates) {
+    result.enabledDates = parseISODates(rule.enabledDates);
+  }
+  if (rule.enabledDaysOfWeek) {
+    result.enabledDaysOfWeek = rule.enabledDaysOfWeek;
+  }
+  if (rule.disabledMonths) {
+    result.disabledMonths = rule.disabledMonths;
+  }
+  if (rule.enabledMonths) {
+    result.enabledMonths = rule.enabledMonths;
+  }
+  if (rule.disabledYears) {
+    result.disabledYears = rule.disabledYears;
+  }
+  if (rule.enabledYears) {
+    result.enabledYears = rule.enabledYears;
+  }
+  if (rule.minRange !== void 0) {
+    result.minRange = rule.minRange;
+  }
+  if (rule.maxRange !== void 0) {
+    result.maxRange = rule.maxRange;
+  }
+  return result;
+}
+function validateConfig(config) {
+  const warn = (msg) => console.warn(`[reach-calendar] ${msg}`);
+  if (config.months !== void 0 && (config.months < 1 || !Number.isInteger(config.months))) {
+    warn(`months must be a positive integer, got: ${config.months}`);
+  }
+  if (config.wizard && config.months && config.months >= 3) {
+    warn("months >= 3 (scrollable) is not compatible with wizard mode; using months: 1");
+  }
+  if (config.firstDay !== void 0 && (config.firstDay < 0 || config.firstDay > 6)) {
+    warn(`firstDay must be 0-6, got: ${config.firstDay}`);
+  }
+  if (config.minDate && !CalendarDate.fromISO(config.minDate)) {
+    warn(`invalid minDate: "${config.minDate}"`);
+  }
+  if (config.maxDate && !CalendarDate.fromISO(config.maxDate)) {
+    warn(`invalid maxDate: "${config.maxDate}"`);
+  }
+  if (config.minDate && config.maxDate) {
+    const min = CalendarDate.fromISO(config.minDate);
+    const max = CalendarDate.fromISO(config.maxDate);
+    if (min && max && min.isAfter(max)) {
+      warn(`minDate "${config.minDate}" is after maxDate "${config.maxDate}"`);
+    }
+  }
+  if (config.minRange !== void 0 && config.maxRange !== void 0 && config.minRange > config.maxRange) {
+    warn(`minRange (${config.minRange}) exceeds maxRange (${config.maxRange})`);
+  }
+  if (config.wizard && config.mode && config.mode !== "single") {
+    warn(`wizard mode is designed for single selection; mode "${config.mode}" may not work as expected`);
+  }
+  if (config.timezone) {
+    try {
+      Intl.DateTimeFormat(void 0, { timeZone: config.timezone });
+    } catch {
+      warn(`invalid timezone: "${config.timezone}"`);
+    }
+  }
+}
+function buildConstraints(cfg, messages) {
+  const opts = {};
+  if (cfg.minDate) {
+    const d = CalendarDate.fromISO(cfg.minDate);
+    if (d) opts.minDate = d;
+  }
+  if (cfg.maxDate) {
+    const d = CalendarDate.fromISO(cfg.maxDate);
+    if (d) opts.maxDate = d;
+  }
+  if (cfg.disabledDates) {
+    opts.disabledDates = parseISODates(cfg.disabledDates);
+  }
+  if (cfg.disabledDaysOfWeek) {
+    opts.disabledDaysOfWeek = cfg.disabledDaysOfWeek;
+  }
+  if (cfg.enabledDates) {
+    opts.enabledDates = parseISODates(cfg.enabledDates);
+  }
+  if (cfg.enabledDaysOfWeek) {
+    opts.enabledDaysOfWeek = cfg.enabledDaysOfWeek;
+  }
+  if (cfg.disabledMonths) {
+    opts.disabledMonths = cfg.disabledMonths;
+  }
+  if (cfg.enabledMonths) {
+    opts.enabledMonths = cfg.enabledMonths;
+  }
+  if (cfg.disabledYears) {
+    opts.disabledYears = cfg.disabledYears;
+  }
+  if (cfg.enabledYears) {
+    opts.enabledYears = cfg.enabledYears;
+  }
+  if (cfg.minRange !== void 0) {
+    opts.minRange = cfg.minRange;
+  }
+  if (cfg.maxRange !== void 0) {
+    opts.maxRange = cfg.maxRange;
+  }
+  if (cfg.rules) {
+    const parsedRules = cfg.rules.map((r) => parseConfigRule(r)).filter((r) => r !== null);
+    if (parsedRules.length > 0) {
+      opts.rules = parsedRules;
+    }
+  }
+  return {
+    isDisabledDate: createDateConstraint(opts),
+    isRangeValid: createRangeValidator(opts),
+    isMonthDisabled: createMonthConstraint(opts),
+    isYearDisabled: createYearConstraint(opts),
+    getDisabledReasons: createDisabledReasons(opts, messages)
+  };
+}
+const CONSTRAINT_KEYS = [
+  "minDate",
+  "maxDate",
+  "disabledDates",
+  "disabledDaysOfWeek",
+  "enabledDates",
+  "enabledDaysOfWeek",
+  "disabledMonths",
+  "enabledMonths",
+  "disabledYears",
+  "enabledYears",
+  "minRange",
+  "maxRange",
+  "rules"
+];
+function extractConstraintConfig(cfg) {
+  const result = {};
+  for (const key of CONSTRAINT_KEYS) {
+    if (cfg[key] !== void 0) {
+      result[key] = cfg[key];
+    }
+  }
+  return result;
+}
+function createCalendarData(config = {}, Alpine) {
+  validateConfig(config);
+  const mode = config.mode ?? "single";
+  const display = config.display ?? "inline";
+  const format = config.format ?? "DD/MM/YYYY";
+  const firstDay = config.firstDay ?? 0;
+  let timezone = config.timezone;
+  if (timezone) {
+    try {
+      Intl.DateTimeFormat(void 0, { timeZone: timezone });
+    } catch {
+      timezone = void 0;
+    }
+  }
+  const wizardConfig = config.wizard ?? false;
+  const rawMonthCount = config.months ?? 1;
+  const monthCount = wizardConfig && rawMonthCount >= 3 ? 1 : rawMonthCount;
+  const isScrollable = monthCount >= 3;
+  const scrollHeight = config.scrollHeight ?? 400;
+  const wizard = !!wizardConfig;
+  const wizardMode = wizardConfig === true ? "full" : wizardConfig === false ? "none" : wizardConfig;
+  const wizardTotalSteps = wizardMode === "none" ? 0 : wizardMode === "full" ? 3 : 2;
+  const wizardStartView = wizardMode === "full" || wizardMode === "year-month" ? "years" : wizardMode === "month-day" ? "months" : "days";
+  const useMask = config.mask ?? true;
+  const showWeekNumbers = config.showWeekNumbers ?? false;
+  const presets = config.presets ?? [];
+  const inputName = config.name ?? "";
+  const inputId = config.inputId ?? null;
+  const inputRef = config.inputRef ?? "rc-input";
+  const locale = config.locale;
+  const closeOnSelect = config.closeOnSelect ?? true;
+  const beforeSelectCb = config.beforeSelect ?? null;
+  const constraintMessages = config.constraintMessages;
+  const constraints = buildConstraints(config, constraintMessages);
+  function buildSelection() {
+    if (mode === "multiple") return new MultipleSelection();
+    if (mode === "range") return new RangeSelection();
+    return new SingleSelection();
+  }
+  const selection = buildSelection();
+  if (config.value) {
+    if (mode === "single") {
+      const d = parseDate(config.value, format) ?? CalendarDate.fromISO(config.value);
+      if (d && !constraints.isDisabledDate(d)) selection.toggle(d);
+    } else if (mode === "range") {
+      const range = parseDateRange(config.value, format);
+      if (range) {
+        let [start, end] = range;
+        if (end.isBefore(start)) {
+          const tmp = start;
+          start = end;
+          end = tmp;
+        }
+        if (!constraints.isDisabledDate(start) && !constraints.isDisabledDate(end) && constraints.isRangeValid(start, end)) {
+          selection.toggle(start);
+          selection.toggle(end);
+        }
+      }
+    } else if (mode === "multiple") {
+      const dates = parseDateMultiple(config.value, format);
+      for (const d of dates) {
+        if (!constraints.isDisabledDate(d)) selection.toggle(d);
+      }
+    }
+  }
+  const today = CalendarDate.today(timezone);
+  const initialDates = selection.toArray();
+  const defaultViewDate = initialDates.length > 0 ? initialDates[0] : today;
+  const viewDate = wizardMode === "full" || wizardMode === "year-month" ? new CalendarDate(today.year - 30, today.month, today.day) : defaultViewDate;
+  function computeFormattedValue(sel) {
+    const dates = sel.toArray();
+    if (dates.length === 0) return "";
+    const first = dates[0];
+    if (mode === "range" && dates.length === 2) {
+      return formatRange(first, dates[1], format);
+    }
+    if (mode === "multiple") {
+      return formatMultiple(dates, format);
+    }
+    return formatDate(first, format);
+  }
+  return {
+    // --- Config (exposed to templates) ---
+    mode,
+    display,
+    format,
+    monthCount,
+    firstDay,
+    wizard,
+    wizardMode,
+    wizardTotalSteps,
+    showWeekNumbers,
+    presets,
+    inputName,
+    // --- Reactive state ---
+    month: viewDate.month,
+    year: viewDate.year,
+    view: wizard ? wizardStartView : "days",
+    isOpen: display === "inline",
+    grid: [],
+    monthGrid: [],
+    yearGrid: [],
+    inputValue: computeFormattedValue(selection),
+    popupStyle: display === "popup" ? "position:fixed;inset:0;z-index:50;" : "",
+    focusedDate: null,
+    hoverDate: null,
+    wizardStep: wizard ? 1 : 0,
+    _wizardYear: null,
+    _wizardMonth: null,
+    _wizardDay: null,
+    // --- Internal state ---
+    _navDirection: "",
+    _selection: selection,
+    _today: today,
+    _constraintConfig: extractConstraintConfig(config),
+    _isDisabledDate: constraints.isDisabledDate,
+    _isRangeValid: constraints.isRangeValid,
+    _isMonthDisabled: constraints.isMonthDisabled,
+    _isYearDisabled: constraints.isYearDisabled,
+    _getDisabledReasons: constraints.getDisabledReasons,
+    _inputEl: null,
+    _detachInput: null,
+    _syncing: false,
+    _suppressFocusOpen: false,
+    _Alpine: Alpine ?? null,
+    _autoRendered: false,
+    // Scrollable multi-month state
+    isScrollable,
+    _scrollHeight: scrollHeight,
+    _scrollContainerEl: null,
+    _scrollObserver: null,
+    /** Index into grid[] of the month currently visible at top of scroll viewport. */
+    _scrollVisibleIndex: 0,
+    /**
+     * Reactive counter bumped on selection changes. Read by dayClasses() so Alpine
+     * re-evaluates class bindings without needing a full grid rebuild.
+     */
+    _selectionRev: 0,
+    // --- Accessibility: live region ---
+    _statusMessage: "",
+    // --- Getters ---
+    get selectedDates() {
+      return this._selection.toArray();
+    },
+    get formattedValue() {
+      return computeFormattedValue(this._selection);
+    },
+    /** ISO string values for hidden form inputs. */
+    get hiddenInputValues() {
+      return this._selection.toArray().map((d) => d.toISO());
+    },
+    /** ISO string of focused date for aria-activedescendant binding. */
+    get focusedDateISO() {
+      return this.focusedDate ? this.focusedDate.toISO() : "";
+    },
+    /** ID for the popup input element (for external label association). */
+    get inputId() {
+      return inputId;
+    },
+    /** Accessible label for the popup input element. */
+    get inputAriaLabel() {
+      if (mode === "range") return "Select date range";
+      if (mode === "multiple") return "Select dates";
+      if (wizard) return "Select birth date";
+      return "Select date";
+    },
+    /** Accessible label for the popup dialog. */
+    get popupAriaLabel() {
+      if (wizard) return "Birth date wizard";
+      if (mode === "range") return "Date range picker";
+      return "Date picker";
+    },
+    /** Label for the current wizard step (e.g. "Select Year"). */
+    get wizardStepLabel() {
+      if (!this.wizard) return "";
+      if (wizardMode === "full") {
+        if (this.wizardStep === 1) return "Select Year";
+        if (this.wizardStep === 2) return "Select Month";
+        return "Select Day";
+      }
+      if (wizardMode === "year-month") {
+        if (this.wizardStep === 1) return "Select Year";
+        return "Select Month";
+      }
+      if (wizardMode === "month-day") {
+        if (this.wizardStep === 1) return "Select Month";
+        return "Select Day";
+      }
+      return "";
+    },
+    /** Summary of wizard selections so far (e.g. "1995 · June · 15"). */
+    get wizardSummary() {
+      if (!wizard) return "";
+      const parts = [];
+      if (this._wizardYear !== null) parts.push(String(this._wizardYear));
+      if (this._wizardMonth !== null) {
+        const d = new CalendarDate(this._wizardYear ?? this.year, this._wizardMonth, 1);
+        parts.push(d.format({ month: "long" }, locale));
+      }
+      if (this._wizardDay !== null) parts.push(String(this._wizardDay));
+      return parts.join(" · ");
+    },
+    /**
+     * Localized short weekday headers in the correct order for the current `firstDay`.
+     * Returns an array of 7 short names (e.g., ["Mo", "Tu", "We", ...]).
+     */
+    get weekdayHeaders() {
+      const headers = [];
+      const refSunday = new Date(2026, 0, 4);
+      for (let i = 0; i < 7; i++) {
+        const dayIndex = (this.firstDay + i) % 7;
+        const d = new Date(refSunday);
+        d.setDate(refSunday.getDate() + dayIndex);
+        headers.push(
+          new Intl.DateTimeFormat(locale, { weekday: "short" }).format(d)
+        );
+      }
+      return headers;
+    },
+    // --- Lifecycle ---
+    init() {
+      var _a;
+      const el = alpine(this).$el;
+      const hasCalendar = el.querySelector(".rc-calendar") !== null;
+      if (!hasCalendar && config.template !== false && ((_a = this._Alpine) == null ? void 0 : _a.initTree)) {
+        const fragment = document.createRange().createContextualFragment(
+          generateCalendarTemplate({
+            display: this.display,
+            isDualMonth: this.monthCount === 2,
+            isWizard: this.wizardMode !== "none",
+            hasName: !!this.inputName,
+            showWeekNumbers: this.showWeekNumbers,
+            hasPresets: this.presets.length > 0,
+            isScrollable: this.isScrollable,
+            scrollHeight: this._scrollHeight
+          })
+        );
+        const newElements = Array.from(fragment.children).filter(
+          (c) => c instanceof HTMLElement
+        );
+        el.appendChild(fragment);
+        for (const child of newElements) {
+          this._Alpine.initTree(child);
+        }
+        this._autoRendered = true;
+      }
+      this._rebuildGrid();
+      this._rebuildMonthGrid();
+      this._rebuildYearGrid();
+      alpine(this).$watch("month", () => {
+        this._rebuildGrid();
+        this._emitNavigate();
+        this._announceNavigation();
+        if (this.isScrollable) {
+          alpine(this).$nextTick(() => {
+            this._rebindScrollObserver();
+          });
+        }
+      });
+      alpine(this).$watch("year", () => {
+        this._rebuildGrid();
+        this._rebuildMonthGrid();
+        this._rebuildYearGrid();
+        this._emitNavigate();
+        this._announceNavigation();
+        if (this.isScrollable) {
+          alpine(this).$nextTick(() => {
+            this._rebindScrollObserver();
+          });
+        }
+      });
+      alpine(this).$watch("view", () => {
+        this._emitViewChange();
+        this._announceViewChange();
+      });
+      alpine(this).$nextTick(() => {
+        const refs = alpine(this).$refs;
+        if (refs && refs[inputRef] && refs[inputRef] instanceof HTMLInputElement) {
+          this.bindInput(refs[inputRef]);
+        } else if (this.display === "popup") {
+          console.warn(
+            `[reach-calendar] Popup mode requires an <input x-ref="${inputRef}"> inside the component container.`
+          );
+        }
+        if (this.isScrollable) {
+          this._initScrollListener();
+        }
+      });
+    },
+    destroy() {
+      var _a, _b;
+      if (this._scrollObserver) {
+        this._scrollObserver.disconnect();
+        this._scrollObserver = null;
+      }
+      this._scrollContainerEl = null;
+      if (this._detachInput) {
+        this._detachInput();
+        this._detachInput = null;
+      }
+      this._inputEl = null;
+      if (this._autoRendered) {
+        const el = alpine(this).$el;
+        (_a = el.querySelector(".rc-popup-overlay")) == null ? void 0 : _a.remove();
+        (_b = el.querySelector(".rc-calendar")) == null ? void 0 : _b.remove();
+        this._autoRendered = false;
+      }
+    },
+    // --- Grid ---
+    _rebuildGrid() {
+      this.grid = generateMonths(
+        this.year,
+        this.month,
+        this.monthCount,
+        this.firstDay,
+        this._today,
+        this._isDisabledDate
+      );
+    },
+    /** Rebuild the 3×4 month picker grid for the current year. */
+    _rebuildMonthGrid() {
+      this.monthGrid = generateMonthGrid(this.year, this._today, locale, this._isMonthDisabled);
+    },
+    /** Rebuild the 3×4 year picker grid for the current year's 12-year block. */
+    _rebuildYearGrid() {
+      this.yearGrid = generateYearGrid(this.year, this._today, this._isYearDisabled);
+    },
+    /**
+     * Build a flat array of grid items for template rendering, interleaving week number
+     * markers with day cells. Used by the auto-rendered template when `showWeekNumbers` is true.
+     */
+    dayGridItems(mg) {
+      const items = [];
+      for (let ri = 0; ri < mg.rows.length; ri++) {
+        const row = mg.rows[ri];
+        if (!row || row.length === 0) continue;
+        const firstCell = row[0];
+        items.push({
+          isWeekNumber: true,
+          weekNumber: mg.weekNumbers[ri] ?? 0,
+          // Placeholder cell — template guards prevent access when isWeekNumber is true
+          cell: firstCell,
+          key: `wn-${ri}`
+        });
+        for (const cell of row) {
+          items.push({
+            isWeekNumber: false,
+            weekNumber: 0,
+            cell,
+            key: cell.date.toISO()
+          });
+        }
+      }
+      return items;
+    },
+    /** Year label for the month view header (e.g. "2026"). */
+    get yearLabel() {
+      return String(this.year);
+    },
+    /** Decade range label for the year view header (e.g. "2016 – 2027"). */
+    get decadeLabel() {
+      const startYear = Math.floor(this.year / 12) * 12;
+      return `${startYear} – ${startYear + 11}`;
+    },
+    /**
+     * Whether backward navigation is possible from the current position.
+     *
+     * - Days view: checks if the previous month has any selectable dates.
+     * - Months view: checks if the previous year has any selectable months.
+     * - Years view: checks if the previous 12-year block has any selectable years.
+     *
+     * Usage in Alpine template:
+     * ```html
+     * <button @click="prev()" :disabled="!canGoPrev">←</button>
+     * ```
+     */
+    get canGoPrev() {
+      if (this.view === "days") {
+        if (this.isScrollable) return false;
+        const d = new CalendarDate(this.year, this.month, 1).addMonths(-1);
+        return !this._isMonthDisabled(d.year, d.month);
+      }
+      if (this.view === "months") {
+        return !this._isYearDisabled(this.year - 1);
+      }
+      if (this.view === "years") {
+        const blockStart = Math.floor(this.year / 12) * 12;
+        for (let y = blockStart - 12; y < blockStart; y++) {
+          if (!this._isYearDisabled(y)) return true;
+        }
+        return false;
+      }
+      return true;
+    },
+    /**
+     * Whether forward navigation is possible from the current position.
+     *
+     * - Days view: checks if the next month has any selectable dates.
+     * - Months view: checks if the next year has any selectable months.
+     * - Years view: checks if the next 12-year block has any selectable years.
+     *
+     * Usage in Alpine template:
+     * ```html
+     * <button @click="next()" :disabled="!canGoNext">→</button>
+     * ```
+     */
+    get canGoNext() {
+      if (this.view === "days") {
+        if (this.isScrollable) return false;
+        const d = new CalendarDate(this.year, this.month, 1).addMonths(1);
+        return !this._isMonthDisabled(d.year, d.month);
+      }
+      if (this.view === "months") {
+        return !this._isYearDisabled(this.year + 1);
+      }
+      if (this.view === "years") {
+        const blockStart = Math.floor(this.year / 12) * 12;
+        for (let y = blockStart + 12; y < blockStart + 24; y++) {
+          if (!this._isYearDisabled(y)) return true;
+        }
+        return false;
+      }
+      return true;
+    },
+    /**
+     * Compute CSS class object for a year cell in the year picker view.
+     */
+    yearClasses(cell) {
+      const selected = this.year === cell.year && this.view === "months";
+      return {
+        "rc-year": true,
+        "rc-year--current": cell.isCurrentYear,
+        "rc-year--selected": selected,
+        "rc-year--disabled": cell.isDisabled
+      };
+    },
+    /**
+     * Compute CSS class object for a month cell in the month picker view.
+     */
+    monthClasses(cell) {
+      const selected = this.month === cell.month && this.view === "days";
+      return {
+        "rc-month": true,
+        "rc-month--current": cell.isCurrentMonth,
+        "rc-month--selected": selected,
+        "rc-month--disabled": cell.isDisabled
+      };
+    },
+    /**
+     * Get a localized "Month Year" label for a specific month grid.
+     * @param gridIndex - Index into the `grid` array (0 for first month, 1 for second).
+     */
+    monthYearLabel(gridIndex) {
+      const g = this.grid[gridIndex];
+      if (!g) return "";
+      const d = new CalendarDate(g.year, g.month, 1);
+      return d.format({ month: "long", year: "numeric" }, locale);
+    },
+    /**
+     * Compute CSS class object for a day cell.
+     * Returns an object keyed by class name with boolean values, suitable for Alpine `:class`.
+     */
+    dayClasses(cell) {
+      void this._selectionRev;
+      const d = cell.date;
+      const selected = this.isSelected(d);
+      const rangeStart = this.isRangeStart(d);
+      const rangeEnd = this.isRangeEnd(d);
+      const inRange = this.isInRange(d, this.hoverDate ?? void 0);
+      const isOtherMonth = !cell.isCurrentMonth;
+      let rangeInvalid = false;
+      if (mode === "range" && this.hoverDate !== null && !cell.isDisabled && !selected && this._selection.isPartial()) {
+        rangeInvalid = !this.isDateSelectableForRange(d);
+      }
+      return {
+        "rc-day": true,
+        "rc-day--today": cell.isToday,
+        "rc-day--selected": selected,
+        "rc-day--range-start": rangeStart,
+        "rc-day--range-end": rangeEnd,
+        "rc-day--in-range": inRange && !rangeStart && !rangeEnd,
+        "rc-day--disabled": cell.isDisabled,
+        "rc-day--other-month": isOtherMonth,
+        "rc-day--hidden": isOtherMonth && this.monthCount > 1,
+        "rc-day--focused": this.focusedDate !== null && this.focusedDate.isSame(d),
+        "rc-day--range-invalid": rangeInvalid
+      };
+    },
+    /**
+     * Get tooltip text for a day cell explaining why it is disabled.
+     * Returns an empty string for enabled dates.
+     */
+    dayTitle(cell) {
+      if (!cell.isDisabled) return "";
+      return this._getDisabledReasons(cell.date).join("; ");
+    },
+    // --- Input binding ---
+    /**
+     * Bind an input element to the calendar.
+     *
+     * Sets up input masking (if enabled), syncs the initial value, and
+     * attaches an input listener to keep `inputValue` in sync.
+     *
+     * Usage:
+     * ```html
+     * <!-- Alpine component root with calendar() -->
+     *   <input x-ref="rc-input" type="text">
+     * ```
+     * The component auto-binds to the ref named by `config.inputRef` (default: `rc-input`) during init().
+     * For custom refs, set `inputRef` in config or call `bindInput($refs.myInput)` explicitly.
+     */
+    bindInput(el) {
+      if (this._detachInput) {
+        this._detachInput();
+        this._detachInput = null;
+      }
+      this._inputEl = el;
+      el.value = this.inputValue;
+      if (useMask) {
+        this._detachInput = attachMask(el, format);
+        this.inputValue = el.value;
+      }
+      const syncHandler = () => {
+        if (!this._syncing) {
+          this.inputValue = el.value;
+        }
+      };
+      el.addEventListener("input", syncHandler);
+      const focusHandler = () => this.handleFocus();
+      const blurHandler = () => this.handleBlur();
+      el.addEventListener("focus", focusHandler);
+      el.addEventListener("blur", blurHandler);
+      if (display === "popup") {
+        el.setAttribute("role", "combobox");
+        el.setAttribute("aria-haspopup", "dialog");
+        el.setAttribute("aria-expanded", String(this.isOpen));
+        el.setAttribute("autocomplete", "off");
+        if (inputId && !el.id) {
+          el.id = inputId;
+        }
+        if (!el.getAttribute("aria-label")) {
+          el.setAttribute("aria-label", this.inputAriaLabel);
+        }
+      }
+      const prevDetach = this._detachInput;
+      this._detachInput = () => {
+        prevDetach == null ? void 0 : prevDetach();
+        el.removeEventListener("input", syncHandler);
+        el.removeEventListener("focus", focusHandler);
+        el.removeEventListener("blur", blurHandler);
+        if (display === "popup") {
+          el.removeAttribute("role");
+          el.removeAttribute("aria-haspopup");
+          el.removeAttribute("aria-expanded");
+          el.removeAttribute("autocomplete");
+        }
+      };
+      if (!el.placeholder) {
+        el.placeholder = format.toLowerCase();
+      }
+    },
+    /**
+     * Handle input event for unbound inputs (using `:value` + `@input`).
+     * When using `bindInput()`, this is handled automatically.
+     */
+    handleInput(e) {
+      const el = e.target;
+      this.inputValue = el.value;
+    },
+    /**
+     * Handle focus on the input element.
+     * Opens the calendar popup in popup display mode.
+     */
+    handleFocus() {
+      if (this._suppressFocusOpen) {
+        this._suppressFocusOpen = false;
+        return;
+      }
+      this.open();
+    },
+    /**
+     * Handle blur on the input element.
+     * Parses the typed value, updates selection if valid, and reformats the input.
+     */
+    handleBlur() {
+      const value = this._inputEl ? this._inputEl.value : this.inputValue;
+      if (!value.trim()) {
+        if (this._selection.toArray().length > 0) {
+          this._selection.clear();
+          this._selectionRev++;
+          this._emitChange();
+        }
+        this._syncInputFromSelection();
+        return;
+      }
+      let changed = false;
+      if (mode === "single") {
+        const parsed = parseDate(value, format) ?? CalendarDate.fromISO(value);
+        if (parsed && !this._isDisabledDate(parsed)) {
+          this._selection.clear();
+          this._selection.toggle(parsed);
+          this.month = parsed.month;
+          this.year = parsed.year;
+          changed = true;
+        }
+      } else if (mode === "range") {
+        const range = parseDateRange(value, format);
+        if (range) {
+          let [start, end] = range;
+          if (end.isBefore(start)) {
+            const tmp = start;
+            start = end;
+            end = tmp;
+          }
+          if (!this._isDisabledDate(start) && !this._isDisabledDate(end) && this._isRangeValid(start, end)) {
+            this._selection.clear();
+            this._selection.toggle(start);
+            this._selection.toggle(end);
+            this.month = start.month;
+            this.year = start.year;
+            changed = true;
+          }
+        }
+      } else if (mode === "multiple") {
+        const dates = parseDateMultiple(value, format);
+        const valid = dates.filter((d) => !this._isDisabledDate(d));
+        if (valid.length > 0) {
+          this._selection.clear();
+          for (const d of valid) {
+            this._selection.toggle(d);
+          }
+          const first = valid[0];
+          this.month = first.month;
+          this.year = first.year;
+          changed = true;
+        }
+      }
+      if (changed) {
+        this._selectionRev++;
+        this._emitChange();
+      }
+      this._syncInputFromSelection();
+    },
+    // --- Internal: input sync ---
+    /** Update inputValue and bound input element from current selection. */
+    _syncInputFromSelection() {
+      this._syncing = true;
+      this.inputValue = this.formattedValue;
+      if (this._inputEl) {
+        this._inputEl.value = this.inputValue;
+      }
+      this._syncing = false;
+    },
+    /** Announce a message to screen readers via the aria-live status region. */
+    _announce(message) {
+      this._statusMessage = "";
+      alpine(this).$nextTick(() => {
+        this._statusMessage = message;
+      });
+    },
+    /** Announce the current navigation context (month/year/decade) for screen readers. */
+    _announceNavigation() {
+      if (this.view === "days") {
+        if (this.monthCount > 1 && !this.isScrollable) {
+          const labels = [];
+          for (let i = 0; i < this.grid.length; i++) {
+            labels.push(this.monthYearLabel(i));
+          }
+          this._announce(labels.join(" – "));
+        } else {
+          this._announce(this.monthYearLabel(0));
+        }
+      } else if (this.view === "months") {
+        this._announce("Year: " + this.year);
+      } else if (this.view === "years") {
+        this._announce("Decade: " + this.decadeLabel);
+      }
+    },
+    /** Announce the new view after a view switch for screen readers. */
+    _announceViewChange() {
+      if (this.view === "days") {
+        this._announce(this.monthYearLabel(0));
+      } else if (this.view === "months") {
+        this._announce("Select month, " + this.year);
+      } else if (this.view === "years") {
+        this._announce("Select year, " + this.decadeLabel);
+      }
+    },
+    /** Dispatch calendar:change event with current selection state. */
+    _emitChange() {
+      alpine(this).$dispatch("calendar:change", {
+        value: this._selection.toValue(),
+        dates: this._selection.toArray().map((d) => d.toISO()),
+        formatted: this.formattedValue
+      });
+    },
+    /** Dispatch calendar:navigate event on month/year change. */
+    _emitNavigate() {
+      alpine(this).$dispatch("calendar:navigate", {
+        year: this.year,
+        month: this.month,
+        view: this.view
+      });
+    },
+    /** Dispatch calendar:view-change event on view switch. */
+    _emitViewChange() {
+      alpine(this).$dispatch("calendar:view-change", {
+        view: this.view,
+        year: this.year,
+        month: this.month
+      });
+    },
+    // --- Navigation ---
+    prev() {
+      this._navDirection = "prev";
+      if (this.view === "days") {
+        if (this.isScrollable) return;
+        const d = new CalendarDate(this.year, this.month, 1).addMonths(-1);
+        this.month = d.month;
+        this.year = d.year;
+      } else if (this.view === "months") {
+        this.year--;
+      } else if (this.view === "years") {
+        this.year -= 12;
+      }
+    },
+    next() {
+      this._navDirection = "next";
+      if (this.view === "days") {
+        if (this.isScrollable) return;
+        const d = new CalendarDate(this.year, this.month, 1).addMonths(1);
+        this.month = d.month;
+        this.year = d.year;
+      } else if (this.view === "months") {
+        this.year++;
+      } else if (this.view === "years") {
+        this.year += 12;
+      }
+    },
+    goToToday() {
+      this.month = this._today.month;
+      this.year = this._today.year;
+      this.view = "days";
+    },
+    // --- Selection ---
+    selectDate(dateOrISO) {
+      const date = typeof dateOrISO === "string" ? CalendarDate.fromISO(dateOrISO) : dateOrISO;
+      if (!date) return;
+      if (this._isDisabledDate(date)) return;
+      if (mode === "range") {
+        const range = this._selection;
+        const rangeStart = range.getStart();
+        if (range.isPartial() && rangeStart && !date.isSame(rangeStart)) {
+          let start = rangeStart;
+          let end = date;
+          if (end.isBefore(start)) {
+            const tmp = start;
+            start = end;
+            end = tmp;
+          }
+          if (!this._isRangeValid(start, end)) return;
+        }
+      }
+      if (beforeSelectCb) {
+        const action = this._selection.isSelected(date) ? "deselect" : "select";
+        const result = beforeSelectCb(date, {
+          mode,
+          selectedDates: this._selection.toArray(),
+          action
+        });
+        if (result === false) return;
+      }
+      const wasSelected = this._selection.isSelected(date);
+      const wasPartialRange = mode === "range" && this._selection.isPartial();
+      this._selection.toggle(date);
+      if (wizard) this._wizardDay = date.day;
+      this._selectionRev++;
+      this._emitChange();
+      this._syncInputFromSelection();
+      const dateLabel = date.format({ weekday: "long", month: "long", day: "numeric", year: "numeric" }, locale);
+      if (mode === "single") {
+        this._announce(dateLabel + " selected");
+      } else if (mode === "multiple") {
+        const count = this._selection.toArray().length;
+        if (wasSelected) {
+          this._announce(dateLabel + " deselected. " + count + " dates selected");
+        } else {
+          this._announce(dateLabel + " selected. " + count + " dates selected");
+        }
+      } else if (mode === "range") {
+        const range = this._selection;
+        if (range.isPartial()) {
+          this._announce("Range start: " + dateLabel + ". Select end date");
+        } else if (wasPartialRange) {
+          const dates = range.toArray();
+          if (dates.length === 2) {
+            const startLabel = dates[0].format({ weekday: "long", month: "long", day: "numeric", year: "numeric" }, locale);
+            const endLabel = dates[1].format({ weekday: "long", month: "long", day: "numeric", year: "numeric" }, locale);
+            this._announce("Range: " + startLabel + " to " + endLabel);
+          }
+        }
+      }
+      if (closeOnSelect && display === "popup" && this.isOpen) {
+        const isComplete = mode === "single" || mode === "range" && !this._selection.isPartial() || mode === "multiple";
+        if (isComplete) this.close();
+      }
+    },
+    isSelected(date) {
+      return this._selection.isSelected(date);
+    },
+    isInRange(date, hoverDate) {
+      if (mode !== "range") return false;
+      return this._selection.isInRange(date, hoverDate);
+    },
+    isRangeStart(date) {
+      if (mode !== "range") return false;
+      const start = this._selection.getStart();
+      return start !== null && date.isSame(start);
+    },
+    isRangeEnd(date) {
+      if (mode !== "range") return false;
+      const end = this._selection.getEnd();
+      return end !== null && date.isSame(end);
+    },
+    /**
+     * Check whether selecting `date` as a range endpoint would produce a valid range.
+     *
+     * Returns `true` when:
+     * - The date is not disabled AND
+     * - Either no range start is selected yet (any non-disabled date can start), OR
+     * - Completing the range with this date would satisfy minRange/maxRange constraints.
+     *
+     * Returns `false` for non-range modes.
+     *
+     * Useful for dimming dates in the UI that would result in an invalid range.
+     */
+    isDateSelectableForRange(date) {
+      if (mode !== "range") return false;
+      if (this._isDisabledDate(date)) return false;
+      const range = this._selection;
+      if (!range.isPartial()) return true;
+      const rangeStart = range.getStart();
+      if (!rangeStart) return true;
+      if (date.isSame(rangeStart)) return true;
+      let start = rangeStart;
+      let end = date;
+      if (end.isBefore(start)) {
+        const tmp = start;
+        start = end;
+        end = tmp;
+      }
+      return this._isRangeValid(start, end);
+    },
+    /**
+     * Get human-readable reasons why a date is disabled.
+     * Returns an empty array for enabled dates.
+     * Accepts a CalendarDate or ISO string.
+     */
+    getDisabledReason(date) {
+      const d = typeof date === "string" ? CalendarDate.fromISO(date) : date;
+      if (!d) return [];
+      return this._getDisabledReasons(d);
+    },
+    clearSelection() {
+      this._selection.clear();
+      this._selectionRev++;
+      this._emitChange();
+      this._syncInputFromSelection();
+      this._announce("Selection cleared");
+    },
+    // --- Programmatic control ---
+    /**
+     * Set the calendar selection programmatically.
+     *
+     * Accepts a single ISO date string, an array of ISO strings, or CalendarDate(s).
+     * The calendar navigates to show the first selected date.
+     *
+     * Usage:
+     * ```js
+     * // Single mode
+     * $data.setValue('2025-06-15')
+     *
+     * // Multiple mode
+     * $data.setValue(['2025-06-15', '2025-06-20'])
+     *
+     * // Range mode
+     * $data.setValue(['2025-06-15', '2025-06-20'])
+     *
+     * // With CalendarDate
+     * $data.setValue(new CalendarDate(2025, 6, 15))
+     * ```
+     */
+    setValue(value) {
+      this._selection.clear();
+      const dates = [];
+      if (typeof value === "string") {
+        const d = CalendarDate.fromISO(value) ?? parseDate(value, format);
+        if (d && !this._isDisabledDate(d)) {
+          dates.push(d);
+        }
+      } else if (Array.isArray(value)) {
+        for (const v of value) {
+          const d = typeof v === "string" ? CalendarDate.fromISO(v) ?? parseDate(v, format) : v;
+          if (d && !this._isDisabledDate(d)) {
+            dates.push(d);
+          }
+        }
+      } else if (value instanceof CalendarDate) {
+        if (!this._isDisabledDate(value)) {
+          dates.push(value);
+        }
+      }
+      if (mode === "range" && dates.length === 2) {
+        let [start, end] = dates;
+        if (end.isBefore(start)) {
+          const tmp = start;
+          start = end;
+          end = tmp;
+        }
+        if (!this._isRangeValid(start, end)) {
+          this._selectionRev++;
+          this._emitChange();
+          this._syncInputFromSelection();
+          return;
+        }
+        this._selection.setRange(start, end);
+      } else {
+        for (const d of dates) {
+          this._selection.toggle(d);
+        }
+      }
+      const selected = this._selection.toArray();
+      if (selected.length > 0) {
+        const first = selected[0];
+        this.month = first.month;
+        this.year = first.year;
+      }
+      this._selectionRev++;
+      this._emitChange();
+      this._syncInputFromSelection();
+    },
+    /**
+     * Clear the current selection. Alias for `clearSelection()`.
+     */
+    clear() {
+      this.clearSelection();
+    },
+    /**
+     * Navigate the calendar to a specific year and month without changing selection.
+     *
+     * Usage:
+     * ```js
+     * $data.goTo(2025, 6)   // Navigate to June 2025
+     * $data.goTo(2030)      // Navigate to the current month in 2030
+     * ```
+     */
+    goTo(year, month) {
+      this.year = year;
+      if (month !== void 0) {
+        this.month = month;
+      }
+      this.view = "days";
+      if (this.isScrollable) {
+        this._rebuildGrid();
+        alpine(this).$nextTick(() => {
+          this._rebindScrollObserver();
+          this._scrollToMonth(year, month ?? this.month);
+        });
+      }
+    },
+    /**
+     * Get the current selection as an array of CalendarDate objects.
+     *
+     * Returns a new array each time (safe to mutate).
+     *
+     * Usage:
+     * ```js
+     * const dates = $data.getSelection()
+     * console.log(dates.map(d => d.toISO()))
+     * ```
+     */
+    getSelection() {
+      return [...this._selection.toArray()];
+    },
+    /**
+     * Apply a predefined range preset by index.
+     *
+     * Evaluates the preset's `value()` function, sets the selection to the
+     * returned `[start, end]` range, navigates to the start date, and
+     * emits a change event. In popup mode with `closeOnSelect`, the popup closes.
+     *
+     * Usage in Alpine template:
+     * ```html
+     * <template x-for="(preset, pi) in presets" :key="pi">
+     *   <button @click="applyPreset(pi)" x-text="preset.label"></button>
+     * </template>
+     * ```
+     */
+    applyPreset(index) {
+      const preset = this.presets[index];
+      if (!preset) return;
+      const [start, end] = preset.value();
+      if (mode === "single") {
+        this.setValue(start);
+      } else {
+        this.setValue([start, end]);
+      }
+      if (this.display === "popup" && closeOnSelect) {
+        this.close();
+      }
+    },
+    // --- Runtime config ---
+    /**
+     * Update constraint-related configuration at runtime.
+     *
+     * Rebuilds all constraint functions and refreshes grids. Accepts the same
+     * constraint properties as `CalendarConfig` (minDate, maxDate, disabledDates,
+     * disabledDaysOfWeek, enabledDates, enabledDaysOfWeek, disabledMonths,
+     * enabledMonths, disabledYears, enabledYears, minRange, maxRange, rules).
+     *
+     * Updates are **merged** with the existing constraint config. To remove a
+     * previously set constraint, pass `undefined` explicitly (e.g.
+     * `{ disabledDaysOfWeek: undefined }`).
+     *
+     * Usage:
+     * ```js
+     * $data.updateConstraints({ minDate: '2025-06-01', disabledDaysOfWeek: [0, 6] })
+     * ```
+     */
+    updateConstraints(updates) {
+      const merged = { ...this._constraintConfig };
+      for (const key of CONSTRAINT_KEYS) {
+        if (key in updates) {
+          merged[key] = updates[key];
+        }
+      }
+      this._constraintConfig = merged;
+      const c = buildConstraints(merged, constraintMessages);
+      this._isDisabledDate = c.isDisabledDate;
+      this._isRangeValid = c.isRangeValid;
+      this._isMonthDisabled = c.isMonthDisabled;
+      this._isYearDisabled = c.isYearDisabled;
+      this._getDisabledReasons = c.getDisabledReasons;
+      this._rebuildGrid();
+      this._rebuildMonthGrid();
+      this._rebuildYearGrid();
+      if (this.isScrollable) {
+        alpine(this).$nextTick(() => {
+          this._rebindScrollObserver();
+        });
+      }
+    },
+    // --- View switching ---
+    setView(newView) {
+      this.view = newView;
+    },
+    selectMonth(targetMonth) {
+      if (this._isMonthDisabled(this.year, targetMonth)) return;
+      this.month = targetMonth;
+      this._wizardMonth = targetMonth;
+      if (wizardMode === "year-month") {
+        this.wizardStep = wizardTotalSteps;
+        this.selectDate(new CalendarDate(this.year, targetMonth, 1));
+        return;
+      }
+      this.view = "days";
+      if (wizard) {
+        this.wizardStep = wizardMode === "month-day" ? 2 : 3;
+      }
+    },
+    selectYear(targetYear) {
+      if (this._isYearDisabled(targetYear)) return;
+      this.year = targetYear;
+      this._wizardYear = targetYear;
+      this.view = "months";
+      if (this.wizard) this.wizardStep = 2;
+    },
+    /** Navigate the wizard back one step. No-op if not in wizard mode. */
+    wizardBack() {
+      if (!this.wizard) return;
+      if (wizardMode === "full") {
+        if (this.wizardStep === 3) {
+          this.wizardStep = 2;
+          this.view = "months";
+          this._wizardMonth = null;
+          this._wizardDay = null;
+        } else if (this.wizardStep === 2) {
+          this.wizardStep = 1;
+          this.view = "years";
+          this._wizardYear = null;
+          this._wizardMonth = null;
+        }
+      } else if (wizardMode === "year-month") {
+        if (this.wizardStep === 2) {
+          this.wizardStep = 1;
+          this.view = "years";
+          this._wizardYear = null;
+          this._wizardMonth = null;
+        }
+      } else if (wizardMode === "month-day") {
+        if (this.wizardStep === 2) {
+          this.wizardStep = 1;
+          this.view = "months";
+          this._wizardMonth = null;
+        }
+      }
+    },
+    // --- Popup ---
+    open() {
+      var _a;
+      if (this.display !== "popup") return;
+      if (wizard) {
+        this.wizardStep = 1;
+        this.view = wizardStartView;
+        this._wizardYear = null;
+        this._wizardMonth = null;
+        this._wizardDay = null;
+        if (wizardMode !== "month-day") {
+          this.year = this._today.year - 30;
+          this._rebuildYearGrid();
+        }
+      }
+      this.isOpen = true;
+      (_a = this._inputEl) == null ? void 0 : _a.setAttribute("aria-expanded", "true");
+      alpine(this).$dispatch("calendar:open");
+      alpine(this).$nextTick(() => {
+      });
+    },
+    close() {
+      var _a;
+      if (this.display !== "popup") return;
+      this.isOpen = false;
+      (_a = this._inputEl) == null ? void 0 : _a.setAttribute("aria-expanded", "false");
+      alpine(this).$dispatch("calendar:close");
+    },
+    toggle() {
+      if (this.isOpen) {
+        this.close();
+      } else {
+        this.open();
+      }
+    },
+    /**
+     * Handle keydown events on the calendar container.
+     *
+     * Supports full keyboard navigation per ARIA grid pattern:
+     * - Arrow keys: move focus between days (±1 day / ±7 days)
+     * - Enter/Space: select the focused day
+     * - PageUp/PageDown: navigate prev/next month (+ Shift: prev/next year)
+     * - Home/End: jump to first/last day of current month
+     * - Escape: return to day view from month/year picker, or close popup
+     * - Tab: natural tab order (exits calendar)
+     *
+     * Uses `aria-activedescendant` pattern: the calendar grid container holds
+     * focus (`tabindex="0"`), and `focusedDate` drives which cell is visually
+     * highlighted. Day cells should have `id="day-{ISO}"` in the template.
+     *
+     * Usage in Alpine template:
+     * ```html
+     * <div @keydown="handleKeydown($event)" tabindex="0"
+     *      :aria-activedescendant="focusedDateISO ? 'day-' + focusedDateISO : null">
+     * ```
+     */
+    handleKeydown(e) {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        if (this.wizard && this.wizardStep > 1) {
+          this.wizardBack();
+          return;
+        }
+        if (this.view === "months" || this.view === "years") {
+          this.view = "days";
+          return;
+        }
+        if (display === "popup" && this.isOpen) {
+          this.close();
+          if (this._inputEl) {
+            this._suppressFocusOpen = true;
+            this._inputEl.focus();
+          }
+        }
+        return;
+      }
+      if (this.view === "days") {
+        switch (e.key) {
+          // Navigation keys: auto-initialize focusedDate if not set
+          case "ArrowRight":
+          case "ArrowLeft":
+          case "ArrowDown":
+          case "ArrowUp":
+          case "PageDown":
+          case "PageUp":
+          case "Home":
+          case "End": {
+            e.preventDefault();
+            if (!this.focusedDate) {
+              const selected = this._selection.toArray();
+              if (selected.length > 0) {
+                this.focusedDate = selected[0];
+              } else {
+                this.focusedDate = new CalendarDate(this.year, this.month, 1);
+              }
+            }
+            if (e.key === "ArrowRight") this._moveFocus(1);
+            else if (e.key === "ArrowLeft") this._moveFocus(-1);
+            else if (e.key === "ArrowDown") this._moveFocus(7);
+            else if (e.key === "ArrowUp") this._moveFocus(-7);
+            else if (e.key === "PageDown") this._moveFocusByMonths(e.shiftKey ? 12 : 1);
+            else if (e.key === "PageUp") this._moveFocusByMonths(e.shiftKey ? -12 : -1);
+            else if (e.key === "Home")
+              this._setFocusedDate(new CalendarDate(this.year, this.month, 1));
+            else if (e.key === "End")
+              this._setFocusedDate(new CalendarDate(this.year, this.month, 1).endOfMonth());
+            return;
+          }
+          // Selection keys: only act when focus is already established
+          case "Enter":
+          case " ":
+            if (this.focusedDate) {
+              e.preventDefault();
+              this.selectDate(this.focusedDate);
+            }
+            return;
+        }
+      }
+    },
+    // --- Internal: keyboard focus management ---
+    /**
+     * Move focusedDate by a number of days, navigating months as needed.
+     * Skips disabled dates in the direction of movement (up to 31 attempts).
+     */
+    _moveFocus(deltaDays) {
+      if (!this.focusedDate) return;
+      let candidate = this.focusedDate.addDays(deltaDays);
+      let attempts = 0;
+      while (this._isDisabledDate(candidate) && attempts < 31) {
+        candidate = candidate.addDays(deltaDays > 0 ? 1 : -1);
+        attempts++;
+      }
+      if (this._isDisabledDate(candidate)) return;
+      this._setFocusedDate(candidate);
+    },
+    /**
+     * Move focusedDate by a number of months, clamping the day to valid range.
+     */
+    _moveFocusByMonths(deltaMonths) {
+      if (!this.focusedDate) return;
+      const candidate = this.focusedDate.addMonths(deltaMonths);
+      this._setFocusedDate(candidate);
+    },
+    /**
+     * Set focusedDate and navigate the calendar view if needed.
+     */
+    _setFocusedDate(date) {
+      this.focusedDate = date;
+      if (this.isScrollable) {
+        alpine(this).$nextTick(() => {
+          this._scrollToMonth(date.year, date.month);
+        });
+        return;
+      }
+      if (date.month !== this.month || date.year !== this.year) {
+        this.month = date.month;
+        this.year = date.year;
+      }
+    },
+    // --- Internal: scrollable multi-month ---
+    /** Label for the sticky header in scrollable mode — tracks the topmost visible month. */
+    get scrollHeaderLabel() {
+      if (!this.isScrollable) return "";
+      const mg = this.grid[this._scrollVisibleIndex];
+      if (!mg) return "";
+      const d = new CalendarDate(mg.year, mg.month, 1);
+      return d.format({ month: "long", year: "numeric" }, locale);
+    },
+    /** Attach an IntersectionObserver that updates the sticky header as the user scrolls. */
+    _initScrollListener() {
+      if (typeof IntersectionObserver === "undefined") return;
+      const el = alpine(this).$el;
+      const container = el.querySelector(".rc-months--scroll");
+      if (!container) return;
+      this._scrollContainerEl = container;
+      const monthEls = container.querySelectorAll("[data-month-id]");
+      if (monthEls.length === 0) return;
+      const indexMap = /* @__PURE__ */ new Map();
+      monthEls.forEach((el2, i) => indexMap.set(el2, i));
+      const visible = /* @__PURE__ */ new Set();
+      const observer = new IntersectionObserver(
+        (entries) => {
+          for (const entry of entries) {
+            const idx = indexMap.get(entry.target);
+            if (idx === void 0) continue;
+            if (entry.isIntersecting) {
+              visible.add(idx);
+            } else {
+              visible.delete(idx);
+            }
+          }
+          if (visible.size > 0) {
+            const minIdx = Math.min(...visible);
+            if (this._scrollVisibleIndex !== minIdx) {
+              this._scrollVisibleIndex = minIdx;
+            }
+          }
+        },
+        { root: container, rootMargin: "0px 0px -90% 0px", threshold: 0 }
+      );
+      monthEls.forEach((el2) => observer.observe(el2));
+      this._scrollObserver = observer;
+    },
+    /** Disconnect and re-initialize the scroll observer after DOM rebuild. */
+    _rebindScrollObserver() {
+      if (this._scrollObserver) {
+        this._scrollObserver.disconnect();
+        this._scrollObserver = null;
+      }
+      this._initScrollListener();
+    },
+    /** Smooth scroll a specific month into view inside the scroll container. */
+    _scrollToMonth(year, month) {
+      if (!this._scrollContainerEl) return;
+      const el = this._scrollContainerEl.querySelector(
+        `[data-month-id="month-${year}-${month}"]`
+      );
+      if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  };
+}
+function presetToday(label = "Today", timezone) {
+  return {
+    label,
+    value: () => {
+      const today = CalendarDate.today(timezone);
+      return [today, today];
+    }
+  };
+}
+function presetYesterday(label = "Yesterday", timezone) {
+  return {
+    label,
+    value: () => {
+      const yesterday = CalendarDate.today(timezone).addDays(-1);
+      return [yesterday, yesterday];
+    }
+  };
+}
+function presetLastNDays(days, label, timezone) {
+  return {
+    label: label ?? `Last ${days} Days`,
+    value: () => {
+      const today = CalendarDate.today(timezone);
+      return [today.addDays(-(days - 1)), today];
+    }
+  };
+}
+function presetThisWeek(label = "This Week", firstDay = 1, timezone) {
+  return {
+    label,
+    value: () => {
+      const today = CalendarDate.today(timezone);
+      const dow = today.toNativeDate().getDay();
+      const diff = (dow - firstDay + 7) % 7;
+      const weekStart = today.addDays(-diff);
+      return [weekStart, today];
+    }
+  };
+}
+function presetLastWeek(label = "Last Week", firstDay = 1, timezone) {
+  return {
+    label,
+    value: () => {
+      const today = CalendarDate.today(timezone);
+      const dow = today.toNativeDate().getDay();
+      const diff = (dow - firstDay + 7) % 7;
+      const thisWeekStart = today.addDays(-diff);
+      const lastWeekStart = thisWeekStart.addDays(-7);
+      const lastWeekEnd = thisWeekStart.addDays(-1);
+      return [lastWeekStart, lastWeekEnd];
+    }
+  };
+}
+function presetThisMonth(label = "This Month", timezone) {
+  return {
+    label,
+    value: () => {
+      const today = CalendarDate.today(timezone);
+      return [today.startOfMonth(), today];
+    }
+  };
+}
+function presetLastMonth(label = "Last Month", timezone) {
+  return {
+    label,
+    value: () => {
+      const today = CalendarDate.today(timezone);
+      const prevMonth = today.addMonths(-1);
+      return [
+        prevMonth.startOfMonth(),
+        new CalendarDate(prevMonth.year, prevMonth.month, daysInMonth(prevMonth.year, prevMonth.month))
+      ];
+    }
+  };
+}
+function presetThisYear(label = "This Year", timezone) {
+  return {
+    label,
+    value: () => {
+      const today = CalendarDate.today(timezone);
+      return [new CalendarDate(today.year, 1, 1), today];
+    }
+  };
+}
+function presetLastYear(label = "Last Year", timezone) {
+  return {
+    label,
+    value: () => {
+      const today = CalendarDate.today(timezone);
+      const prevYear = today.year - 1;
+      return [new CalendarDate(prevYear, 1, 1), new CalendarDate(prevYear, 12, 31)];
+    }
+  };
+}
+function computePosition(reference, floating, options = {}) {
+  const placement = options.placement ?? "bottom-start";
+  const offset = options.offset ?? 4;
+  const flip = options.flip ?? true;
+  const refRect = reference.getBoundingClientRect();
+  const floatRect = floating.getBoundingClientRect();
+  const viewportHeight = window.innerHeight;
+  const viewportWidth = window.innerWidth;
+  let x;
+  const side = placement.includes("start") ? "start" : "end";
+  if (side === "start") {
+    x = refRect.left;
+  } else {
+    x = refRect.right - floatRect.width;
+  }
+  x = clamp(x, 0, Math.max(0, viewportWidth - floatRect.width));
+  const isBottom = placement.startsWith("bottom");
+  let resolvedPlacement = placement;
+  if (isBottom) {
+    const yBelow = refRect.bottom + offset;
+    const fitsBelow = yBelow + floatRect.height <= viewportHeight;
+    if (!fitsBelow && flip) {
+      const yAbove2 = refRect.top - offset - floatRect.height;
+      const fitsAbove = yAbove2 >= 0;
+      if (fitsAbove) {
+        resolvedPlacement = placement.replace("bottom", "top");
+        return { x, y: yAbove2, placement: resolvedPlacement };
+      }
+    }
+    return { x, y: yBelow, placement: resolvedPlacement };
+  }
+  const yAbove = refRect.top - offset - floatRect.height;
+  if (yAbove < 0 && flip) {
+    const yBelow = refRect.bottom + offset;
+    const fitsBelow = yBelow + floatRect.height <= viewportHeight;
+    if (fitsBelow) {
+      resolvedPlacement = placement.replace("top", "bottom");
+      return { x, y: yBelow, placement: resolvedPlacement };
+    }
+  }
+  return { x, y: Math.max(0, yAbove), placement: resolvedPlacement };
+}
+function autoUpdate(reference, update, throttleMs = 16) {
+  let ticking = false;
+  let rafId = 0;
+  let timerId = 0;
+  const onEvent = () => {
+    if (ticking) return;
+    ticking = true;
+    if (throttleMs <= 16) {
+      rafId = requestAnimationFrame(() => {
+        update();
+        ticking = false;
+      });
+    } else {
+      timerId = window.setTimeout(() => {
+        update();
+        ticking = false;
+      }, throttleMs);
+    }
+  };
+  window.addEventListener("resize", onEvent, { passive: true });
+  const scrollParents = getScrollParents(reference);
+  for (const parent of scrollParents) {
+    parent.addEventListener("scroll", onEvent, { passive: true });
+  }
+  return () => {
+    cancelAnimationFrame(rafId);
+    clearTimeout(timerId);
+    window.removeEventListener("resize", onEvent);
+    for (const parent of scrollParents) {
+      parent.removeEventListener("scroll", onEvent);
+    }
+  };
+}
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+function getScrollParents(element) {
+  const parents = [];
+  let current = element.parentElement;
+  while (current) {
+    const style = getComputedStyle(current);
+    const overflow = style.overflow + style.overflowX + style.overflowY;
+    if (/auto|scroll|overlay/.test(overflow)) {
+      parents.push(current);
+    }
+    current = current.parentElement;
+  }
+  parents.push(document);
+  return parents;
+}
+let globalDefaults = {};
+function calendarPlugin(Alpine) {
+  Alpine.data(
+    "calendar",
+    (config = {}) => createCalendarData({ ...globalDefaults, ...config }, Alpine)
+  );
+}
+calendarPlugin.defaults = (config) => {
+  globalDefaults = { ...globalDefaults, ...config };
+};
+calendarPlugin.getDefaults = () => ({ ...globalDefaults });
+calendarPlugin.resetDefaults = () => {
+  globalDefaults = {};
+};
+export {
+  CalendarDate,
+  MultipleSelection,
+  RangeSelection,
+  SingleSelection,
+  attachMask,
+  autoUpdate,
+  calendarPlugin,
+  computePosition,
+  createCalendarData,
+  createDateConstraint,
+  createDisabledReasons,
+  createMask,
+  createMaskHandlers,
+  createRangeValidator,
+  daysInMonth,
+  calendarPlugin as default,
+  formatDate,
+  formatMultiple,
+  formatRange,
+  generateMonth,
+  generateMonthGrid,
+  generateMonths,
+  generateYearGrid,
+  getISOWeekNumber,
+  isDateDisabled,
+  parseDate,
+  parseDateMultiple,
+  parseDateRange,
+  parseFormatToSlots,
+  presetLastMonth,
+  presetLastNDays,
+  presetLastWeek,
+  presetLastYear,
+  presetThisMonth,
+  presetThisWeek,
+  presetThisYear,
+  presetToday,
+  presetYesterday
+};
+//# sourceMappingURL=alpine-calendar.es.js.map