@expressivecss/expressive 0.14.1 → 0.16.0

package/dist/js/chunks/{chunk-5HQSGDZ5.mjs → chunk-QXKWVHBD.mjs}

@@ -1,17 +1,94 @@
 import {
-  DockedDisplayPlugin
-} from "./chunk-YMSXJON6.mjs";
+  ModalDisplayPlugin,
+  createDisplayPlugin,
+  hideModal
+} from "./chunk-OUCHKSAW.mjs";
 import {
   FormSelect
-} from "./chunk-3GVFZ4XO.mjs";
-import {
-  Utils
-} from "./chunk-MNPROCZF.mjs";
+} from "./chunk-EVCVFEV3.mjs";
 import {
   Component
-} from "./chunk-LTWPGFBR.mjs";
+} from "./chunk-CMGXGYUC.mjs";
+import {
+  Utils,
+  pickerFooter
+} from "./chunk-ZVLOUDIJ.mjs";
 
 // src/ts/components/datepicker.ts
+var MONTHS = Array.from({ length: 12 }, (_, month) => new Date(Date.UTC(2023, month, 1)));
+var WEEKDAYS = Array.from({ length: 7 }, (_, day) => new Date(Date.UTC(2023, 0, 1 + day)));
+function localeDates(locale) {
+  const names = (dates, options) => {
+    const format = new Intl.DateTimeFormat(locale, { ...options, calendar: "gregory", timeZone: "UTC" });
+    return dates.map((date) => format.format(date));
+  };
+  const intl = new Intl.Locale(locale);
+  const week = intl.getWeekInfo?.() ?? intl.weekInfo;
+  return {
+    week: week ? { firstDay: week.firstDay % 7 } : {},
+    i18n: {
+      months: names(MONTHS, { month: "long" }),
+      monthsShort: names(MONTHS, { month: "short" }),
+      weekdays: names(WEEKDAYS, { weekday: "long" }),
+      weekdaysShort: names(WEEKDAYS, { weekday: "short" }),
+      weekdaysAbbrev: names(WEEKDAYS, { weekday: "narrow" })
+    }
+  };
+}
+var escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+var NUMBER = "(\\d{1,2})";
+var named = (names, key) => [
+  `(${names.map(escapeRegExp).join("|")})`,
+  (parts, text) => key && (parts[key] = names.findIndex((name) => name.toLowerCase() === text.toLowerCase()))
+];
+var READERS = {
+  d: () => [NUMBER, (parts, text) => parts.day = +text],
+  dd: () => [NUMBER, (parts, text) => parts.day = +text],
+  ddd: (i18n) => named(i18n.weekdaysShort),
+  dddd: (i18n) => named(i18n.weekdays),
+  m: () => [NUMBER, (parts, text) => parts.month = +text - 1],
+  mm: () => [NUMBER, (parts, text) => parts.month = +text - 1],
+  mmm: (i18n) => named(i18n.monthsShort, "month"),
+  mmmm: (i18n) => named(i18n.months, "month"),
+  // As Date.parse reads them: 00 to 49 in this century, 50 to 99 in the last.
+  yy: () => ["(\\d{2})", (parts, text) => parts.year = +text + (+text < 50 ? 2e3 : 1900)],
+  yyyy: () => ["(\\d{4})", (parts, text) => parts.year = +text]
+};
+var pad = (n) => String(n).padStart(2, "0");
+var FORMATS = {
+  d: (date) => date.getDate(),
+  dd: (date) => pad(date.getDate()),
+  ddd: (date, i18n) => i18n.weekdaysShort[date.getDay()],
+  dddd: (date, i18n) => i18n.weekdays[date.getDay()],
+  m: (date) => date.getMonth() + 1,
+  mm: (date) => pad(date.getMonth() + 1),
+  mmm: (date, i18n) => i18n.monthsShort[date.getMonth()],
+  mmmm: (date, i18n) => i18n.months[date.getMonth()],
+  yy: (date) => String(date.getFullYear()).slice(2),
+  yyyy: (date) => date.getFullYear()
+};
+function readDate(value, format, i18n) {
+  const readers = [];
+  const pattern = format.split(/(d{1,4}|m{1,4}|y{4}|yy|!.)/g).map((token) => {
+    const reader = READERS[token]?.(i18n);
+    if (reader) readers.push(reader);
+    return reader ? reader[0] : escapeRegExp(token);
+  });
+  const match = new RegExp(`^\\s*${pattern.join("")}\\s*$`, "iu").exec(value);
+  if (!match) return null;
+  const parts = {};
+  readers.forEach(([, set], i) => set(parts, match[i + 1]));
+  const date = new Date(2e3, 0, 1);
+  date.setFullYear(parts.year, parts.month, parts.day);
+  const same = [date.getFullYear(), date.getMonth(), date.getDate()].join() === [parts.year, parts.month, parts.day].join();
+  return same ? date : null;
+}
+function withLocale(el, options = {}) {
+  const locale = Utils.locale(el);
+  if (!locale) return options;
+  const { week, i18n } = localeDates(locale);
+  return { ...week, ...options, i18n: { ...i18n, ...options.i18n } };
+}
 var _defaults = {
   // the default output format for the input field value
   format: "mmm dd, yyyy",
@@ -46,8 +123,6 @@ var _defaults = {
   maxYear: 9999,
   minMonth: void 0,
   maxMonth: void 0,
-  startRange: null,
-  endRange: null,
   isRTL: false,
   yearRangeReverse: false,
   // Render the month after year in the calendar title
@@ -67,8 +142,8 @@ var _defaults = {
     cancel: "Cancel",
     clear: "Clear",
     done: "Ok",
-    previousMonth: "\u2039",
-    nextMonth: "\u203A",
+    previousMonth: "Previous month",
+    nextMonth: "Next month",
     months: [
       "January",
       "February",
@@ -114,10 +189,15 @@ var _defaults = {
 };
 var _Datepicker = class _Datepicker extends Component {
   constructor(el, options) {
-    super(el, options, _Datepicker);
+    options = withLocale(el, options);
+    super(el, options);
     this.multiple = false;
-    /** Rows renderRow has already checked, so renderBody does not parse them again. */
-    this._checkedRows = /* @__PURE__ */ new Set();
+    /** What setInputValue last wrote, so reading it back does not depend on the parser. */
+    this._writtenInputs = /* @__PURE__ */ new WeakMap();
+    this._form = null;
+    this._resetDates = /* @__PURE__ */ new WeakMap();
+    // Counts selections, so a callback that selects again silences the stale event.
+    this._selection = 0;
     /** Nesting depth of {@link _batchDraws}; > 0 means draws are being collected. */
     this._drawDepth = 0;
     /** Whether a draw was requested while batching. */
@@ -134,11 +214,11 @@ var _Datepicker = class _Datepicker extends Component {
         this.draw();
         this.gotoDate(e.target === this.el ? this.date : this.endDate);
       });
-      if (this.displayPlugin) this.displayPlugin.show();
+      this._showDisplay();
       if (this.options.onInputInteraction) this.options.onInputInteraction.call(this);
     };
-    this._handleInputKeydown = (e) => {
-      if (e.key === Utils.keys.ENTER) {
+    this._handleInputKeydown = Utils.ignoringComposition((e) => {
+      if (e.key === "Enter") {
         e.preventDefault();
         this._batchDraws(() => {
           this.setDateFromInput(e.target);
@@ -149,7 +229,7 @@ var _Datepicker = class _Datepicker extends Component {
         this._syncCalendarFocus(true);
         if (this.options.onInputInteraction) this.options.onInputInteraction.call(this);
       }
-    };
+    });
     this._handleCalendarFocus = (event) => {
       const button = event.target;
       if (!button.matches(".datepicker-day-button")) return;
@@ -158,7 +238,7 @@ var _Datepicker = class _Datepicker extends Component {
     };
     this._handleCalendarKeydown = (event) => {
       const button = event.target;
-      if (!button.matches(".datepicker-day-button") || event.altKey || event.ctrlKey || event.metaKey) return;
+      if (!button.matches(".datepicker-day-button") || !Utils.plainKey(event)) return;
       const date = this._dayDate(button);
       const weekday = (date.getDay() - this.options.firstDay + 7) % 7;
       const offsets = {
@@ -198,7 +278,7 @@ var _Datepicker = class _Datepicker extends Component {
             e.target.getAttribute("data-month"),
             e.target.getAttribute("data-day")
           );
-          if (!this.multiple || this.multiple && this.options.isMultipleSelection) {
+          if (!this.multiple || this.options.isMultipleSelection) {
             this.setDate(selectedDate);
           }
           if (this.options.isDateRange) {
@@ -214,7 +294,7 @@ var _Datepicker = class _Datepicker extends Component {
     };
     this._handleDateRangeCalendarClick = (date) => {
       if (this.endDate == null || !_Datepicker._compareDates(date, this.endDate)) {
-        if (_Datepicker._isDate(this.date) && _Datepicker._comparePastDate(date, this.date)) {
+        if (_Datepicker._isDate(this.date) && date < this.date) {
           return;
         }
         this.setDate(date, false, _Datepicker._isDate(this.date));
@@ -239,6 +319,18 @@ var _Datepicker = class _Datepicker extends Component {
     this._handleYearChange = (e) => {
       this.gotoYear(e.target.value);
     };
+    // A reset restores the inputs' values after its event, without a change
+    // event. Drop the inputs added for extra dates and read the selection back
+    // from what the reset left.
+    this._handleFormReset = (e) => {
+      clearTimeout(this._resetTimer);
+      this._resetTimer = setTimeout(() => {
+        if (e.defaultPrevented) return;
+        if (this.options.isMultipleSelection) this._readBackMultiple();
+        else this._readBackSingle();
+        this.draw();
+      });
+    };
     this._handleInputChange = (e) => {
       if (e["detail"]?.firedBy === this) return;
       this.setDateFromInput(e.target);
@@ -248,21 +340,17 @@ var _Datepicker = class _Datepicker extends Component {
     };
     this._confirm = () => {
       this._finishSelection();
-      if (typeof this.options.onConfirm === "function") this.options.onConfirm.call(this);
+      hideModal(this.displayPlugin);
+      this._notify("confirm", this.options.onConfirm, { args: [] });
     };
     this._cancel = () => {
-      if (typeof this.options.onCancel === "function") this.options.onCancel.call(this);
-    };
-    this.el["Expressive_Datepicker"] = this;
-    this.options = {
-      ..._Datepicker.defaults,
-      ...options
+      hideModal(this.displayPlugin);
+      this._notify("cancel", this.options.onCancel, { args: [] });
     };
-    if (!!options && options.hasOwnProperty("i18n") && typeof options.i18n === "object") {
-      this.options.i18n = { ..._Datepicker.defaults.i18n, ...options.i18n };
-    }
-    if (this.options.minDate) this.options.minDate.setHours(0, 0, 0, 0);
-    if (this.options.maxDate) this.options.maxDate.setHours(0, 0, 0, 0);
+    if (this.options.displayPlugin === "modal") Object.assign(this.options, { openByDefault: true, autoSubmit: false });
+    const { minDate, maxDate } = this.options;
+    if (minDate) this.options.minDate = new Date(new Date(minDate.getTime()).setHours(0, 0, 0, 0));
+    if (maxDate) this.options.maxDate = new Date(new Date(maxDate.getTime()).setHours(0, 0, 0, 0));
     this.id = Utils.guid();
     if (this.options.isMultipleSelection) {
       this.multiple = true;
@@ -272,7 +360,8 @@ var _Datepicker = class _Datepicker extends Component {
     this._setupVariables();
     this._insertHTMLIntoDOM();
     this._setupEventHandlers();
-    if (!this.options.defaultDate) {
+    const fromValue = !this.options.defaultDate;
+    if (fromValue) {
       this.options.defaultDate = this._parseInput(this.el.value);
     }
     const defDate = this.options.defaultDate;
@@ -280,6 +369,8 @@ var _Datepicker = class _Datepicker extends Component {
       if (this.options.setDefaultDate) {
         this.setDate(defDate, true);
         this.setInputValue(this.el, defDate);
+      } else if (fromValue && this._isSelectableDay(defDate)) {
+        this.setDate(defDate, true);
       } else {
         this.gotoDate(defDate);
       }
@@ -296,21 +387,19 @@ var _Datepicker = class _Datepicker extends Component {
         }
       }
     }
-    if (this.options.displayPlugin) {
-      if (this.options.displayPlugin === "docked") this.displayPlugin = DockedDisplayPlugin.init(this.el, this.containerEl, this.options.displayPluginOptions);
-    }
+    this.displayPlugin = createDisplayPlugin(this.options.displayPlugin, this.el, this.containerEl, this.options.displayPluginOptions, this._cancel);
+    if (this.endDateEl) this.displayPlugin?.triggers.push(this.endDateEl);
+    for (const input of [this.el, this.endDateEl]) this._rememberResetDate(input);
+  }
+  // Only a default the picker wrote needs this: any other default text parses
+  // at reset exactly as it did here.
+  _rememberResetDate(input) {
+    const written = input && this._writtenInputs.get(input);
+    if (written && written.value === input.defaultValue) this._resetDates.set(input, written);
   }
   static get defaults() {
     return _defaults;
   }
-  /**
-   * Initializes instances of Datepicker.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
-  static init(els, options = {}) {
-    return super.init(els, options, _Datepicker);
-  }
   /**
    * Escape a value for interpolation into the calendar markup.
    *
@@ -326,65 +415,56 @@ var _Datepicker = class _Datepicker extends Component {
   static _isDate(obj) {
     return /Date/.test(Object.prototype.toString.call(obj)) && !isNaN(obj.getTime());
   }
+  /**
+   * A value read without a custom parser: in the picker's own string format
+   * with its names, or else as an ISO date or by the browser.
+   */
+  _readDefault(value, el) {
+    const { format, i18n } = this.options;
+    const read = typeof format === "string" && el.type !== "date" ? readDate(value, format, i18n) : null;
+    return read ?? _Datepicker._parseDate(value);
+  }
   static _parseDate(value) {
     value = value.trim();
     if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) return new Date(Date.parse(value));
     const date = /* @__PURE__ */ new Date(value + "T00:00:00");
     return date.getDate() === Number(value.slice(-2)) ? date : /* @__PURE__ */ new Date(NaN);
   }
-  _parseInput(value) {
-    if (!value.trim() || !this.options.parse) return _Datepicker._parseDate(value);
+  _parseInput(value, el = this.el) {
+    if (!value.trim() || !this.options.parse) return this._readDefault(value, el);
     return this.options.parse(
       value,
       typeof this.options.format === "string" ? this.options.format : ""
     );
   }
-  static _isWeekend(date) {
-    const day = date.getDay();
-    return day === 0 || day === 6;
-  }
   /**
    * @deprecated as this function has no effect without any return statement or global parameter setter.
    */
   static _setToStartOfDay(date) {
     if (_Datepicker._isDate(date)) date.setHours(0, 0, 0, 0);
   }
-  static _getDaysInMonth(year, month) {
-    return [31, _Datepicker._isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
-  }
-  static _isLeapYear(year) {
-    return year % 4 === 0 && year % 100 !== 0 || year % 400 === 0;
-  }
   static _compareDates(a, b) {
     return a.getTime() === b.getTime();
   }
-  static _compareWithinRange(day, date, dateEnd) {
-    return day.getTime() > date.getTime() && day.getTime() < dateEnd.getTime();
-  }
-  static _comparePastDate(a, b) {
-    return a.getTime() < b.getTime();
-  }
-  static getInstance(el) {
-    return el["Expressive_Datepicker"];
-  }
   destroy() {
-    this._removeEventHandlers();
+    this._events.abort();
+    clearTimeout(this._resetTimer);
     this.dateEls?.slice(1).forEach((input) => this._removeDateInput(input));
     if (!this.options.dateRangeEndEl && this.endDateEl) this._removeDateInput(this.endDateEl);
     this.displayPlugin?.destroy();
     this.containerEl.remove();
     this.destroySelects();
-    this.el["Expressive_Datepicker"] = void 0;
+    this._removeDateOverlay();
+    super.destroy();
+  }
+  // CSS paints data-date over a native date input's own text.
+  _removeDateOverlay() {
+    this.el.classList.remove("datepicker-date-input");
+    for (const input of [this.el, this.endDateEl]) if (input?.type === "date") input.removeAttribute("data-date");
   }
   destroySelects() {
-    const oldYearSelect = this.calendarEl.querySelector(".orig-select-year");
-    if (oldYearSelect) {
-      FormSelect.getInstance(oldYearSelect).destroy();
-    }
-    const oldMonthSelect = this.calendarEl.querySelector(".orig-select-month");
-    if (oldMonthSelect) {
-      FormSelect.getInstance(oldMonthSelect).destroy();
-    }
+    this._formSelect(".orig-select-year")?.destroy();
+    this._formSelect(".orig-select-month")?.destroy();
   }
   _insertHTMLIntoDOM() {
     if (this.el.type == "date") {
@@ -405,10 +485,7 @@ var _Datepicker = class _Datepicker extends Component {
         }
       }
     }
-    Utils.createButton(this.footer, this.options.i18n.clear, ["datepicker-clear"], this.options.showClearBtn, this._handleClearClick);
-    if (!this.options.autoSubmit) {
-      Utils.createConfirmationContainer(this.footer, this.options.i18n.done, this.options.i18n.cancel, this._confirm, this._cancel);
-    }
+    pickerFooter(this.footer, this.options, "datepicker-clear", this._handleClearClick, this._confirm, this._cancel);
     if (this.options.container) {
       const optEl = this.options.container;
       this.options.container = optEl instanceof HTMLElement ? optEl : document.querySelector(optEl);
@@ -442,29 +519,40 @@ var _Datepicker = class _Datepicker extends Component {
    */
   formatDate(date, format) {
     const formatArray = format.split(/(d{1,4}|m{1,4}|y{4}|yy|!.)/g);
-    return formatArray.map((label) => this.formats[label] ? this.formats[label](date) : label).join("");
+    return formatArray.map((label) => FORMATS[label] ? FORMATS[label](date, this.options.i18n) : label).join("");
   }
   /**
    * Sets date from input field.
    */
   setDateFromInput(el) {
-    if (el.type === "date") this.setDataDate(el, _Datepicker._parseDate(el.value));
+    this._syncDataDate(el);
     if ((this.options.isDateRange || !this.options.isMultipleSelection) && !el.value.trim()) {
       this.setSingleDate(null, el === this.endDateEl);
       this.draw();
       return;
     }
-    const parsedDate = this._parseInput(el.value);
+    const parsedDate = this._dateInInput(el);
     if (!_Datepicker._isDate(parsedDate)) return;
     const date = new Date(parsedDate.getTime());
     _Datepicker._setToStartOfDay(date);
     const isEndDate = el === this.endDateEl;
-    if (this.options.isDateRange && (isEndDate ? this.date && date < this.date : this.endDate && date > this.endDate)) {
-      this.setInputValue(el, isEndDate ? this.endDate : this.date);
+    const outOfOrder = this.options.isDateRange && (isEndDate ? this.date && date < this.date : this.endDate && date > this.endDate);
+    if (outOfOrder || this._isDisabledDay(date)) {
+      this.setInputValue(el, this._selectedDateFor(el));
       return;
     }
+    this._selectTypedMultiDate(el, date);
     this.setDate(date, false, isEndDate, true);
   }
+  // setDate does not toggle a typed date into a multiple selection, so it goes
+  // in here, in place of the date its input showed. Re-reading an input on
+  // click leaves the selection as it was.
+  _selectTypedMultiDate(el, date) {
+    if (!this.options.isMultipleSelection) return;
+    const shown = this._selectedDateFor(el);
+    this.dates = this.dates.filter((day) => day !== shown && day.getTime() !== date.getTime());
+    this.setMultiDate(date);
+  }
   /**
    * Set a date on the datepicker.
    * @param date Date to set on the datepicker.
@@ -478,12 +566,12 @@ var _Datepicker = class _Datepicker extends Component {
       return;
     }
     _Datepicker._setToStartOfDay(selectedDate);
+    const selection = ++this._selection;
     if (!this.options.isMultipleSelection) this.setSingleDate(selectedDate, isEndDate);
     else if (!fromUserInput) this.setMultiDate(selectedDate);
     this.gotoDate(selectedDate);
-    if (!preventOnSelect && typeof this.options.onSelect === "function") {
-      this.options.onSelect.call(this, selectedDate);
-    }
+    if (preventOnSelect) return;
+    this._notify("select", this.options.onSelect, { args: [selectedDate], detail: { date: selectedDate }, current: () => selection === this._selection });
   }
   validateDate(date) {
     if (!date) {
@@ -504,6 +592,38 @@ var _Datepicker = class _Datepicker extends Component {
     }
     return new Date(date.getTime());
   }
+  /**
+   * The date an input holds. Without a custom parser, Date.parse reads
+   * "05/10/2026" from a dd/mm/yyyy format as 10 May, so reuse the date behind
+   * a value the picker wrote, or behind the value the input resets to.
+   */
+  _dateInInput(el) {
+    const known = !this.options.parse && [this._writtenInputs.get(el), this._resetDates.get(el)].find((entry) => entry?.value === el.value);
+    return known ? known.date : this._parseInput(el.value, el);
+  }
+  /** The selected date an input shows: its place in `dates` for a multiple selection. */
+  _selectedDateFor(el) {
+    if (this.options.isMultipleSelection) return this.dates[this.dateEls.indexOf(el)] ?? null;
+    return el === this.endDateEl ? this.endDate : this.date;
+  }
+  /** `_isDisabledDay` for a date that may carry a time of day. */
+  _isSelectableDay(date) {
+    const day = new Date(date.getTime());
+    _Datepicker._setToStartOfDay(day);
+    return !this._isDisabledDay(day);
+  }
+  /** Whether the calendar shows `day` as disabled: outside the bounds, or refused by an option. */
+  _isDisabledDay(day) {
+    return this._isOutOfBounds(day) || this._isRefusedDay(day);
+  }
+  _isOutOfBounds(day) {
+    const { minDate, maxDate } = this.options;
+    return minDate && day < minDate || maxDate && day > maxDate;
+  }
+  _isRefusedDay(day) {
+    const { disableWeekends, disableDayFn } = this.options;
+    return disableWeekends && [0, 6].includes(day.getDay()) || !!disableDayFn?.(day);
+  }
   /**
    * Set a single date on the datepicker.
    * @param date Date to set on the datepicker.
@@ -512,7 +632,7 @@ var _Datepicker = class _Datepicker extends Component {
   setSingleDate(date, isEndDate) {
     if (!isEndDate) {
       this.date = date;
-    } else if (isEndDate) {
+    } else {
       this.endDate = date;
     }
   }
@@ -521,15 +641,13 @@ var _Datepicker = class _Datepicker extends Component {
    * @param date Date to set on the datepicker.
    */
   setMultiDate(date) {
-    const selectedDate = this.dates?.find((item) => {
-      return item.getTime() === date.getTime() ? item : false;
-    });
-    if (!selectedDate) {
+    const index = this.dates.findIndex((item) => item.getTime() === date.getTime());
+    if (index === -1) {
       this.dates.push(date);
     } else {
-      this.dates.splice(this.dates.indexOf(selectedDate), 1);
+      this.dates.splice(index, 1);
     }
-    this.dates.sort((a, b) => a.getTime() < b.getTime() ? -1 : 0);
+    this.dates.sort((a, b) => a.getTime() - b.getTime());
   }
   /**
    * Sets the data-date attribute on the date input field
@@ -569,6 +687,7 @@ var _Datepicker = class _Datepicker extends Component {
     } else {
       el.value = this.toString(date);
     }
+    this._writtenInputs.set(el, { value: el.value, date: _Datepicker._isDate(date) ? new Date(date.getTime()) : null });
     el.dispatchEvent(
       new CustomEvent("change", {
         bubbles: true,
@@ -643,7 +762,7 @@ var _Datepicker = class _Datepicker extends Component {
     this.adjustCalendars();
   }
   render(year, month, randId) {
-    const now = /* @__PURE__ */ new Date(), days = _Datepicker._getDaysInMonth(year, month), data = [];
+    const now = /* @__PURE__ */ new Date(), days = new Date(year, month + 1, 0).getDate(), data = [];
     let before = new Date(year, month, 1).getDay(), row = [];
     _Datepicker._setToStartOfDay(now);
     if (this.options.firstDay > 0) {
@@ -652,15 +771,10 @@ var _Datepicker = class _Datepicker extends Component {
         before += 7;
       }
     }
-    const previousMonth = month === 0 ? 11 : month - 1, nextMonth = month === 11 ? 0 : month + 1, yearOfPreviousMonth = month === 0 ? year - 1 : year, yearOfNextMonth = month === 11 ? year + 1 : year, daysInPreviousMonth = _Datepicker._getDaysInMonth(yearOfPreviousMonth, previousMonth);
-    let cells = days + before, after = cells;
-    while (after > 7) {
-      after -= 7;
-    }
-    cells += 7 - after;
-    let isWeekSelected = false;
+    const previousMonth = month === 0 ? 11 : month - 1, nextMonth = month === 11 ? 0 : month + 1, yearOfPreviousMonth = month === 0 ? year - 1 : year, yearOfNextMonth = month === 11 ? year + 1 : year, daysInPreviousMonth = new Date(year, month, 0).getDate();
+    const cells = Math.ceil((days + before) / 7) * 7;
     for (let i = 0, r = 0; i < cells; i++) {
-      const day = new Date(year, month, 1 + (i - before)), isToday = _Datepicker._compareDates(day, now), hasEvent = this.options.events.indexOf(day.toDateString()) !== -1, isEmpty = i < before || i >= days + before, isStartRange = this.options.startRange && _Datepicker._compareDates(this.options.startRange, day), isEndRange = this.options.endRange && _Datepicker._compareDates(this.options.endRange, day), isInRange = this.options.startRange && this.options.endRange && this.options.startRange < day && day < this.options.endRange, isDisabled = this.options.minDate && day < this.options.minDate || this.options.maxDate && day > this.options.maxDate || this.options.disableWeekends && _Datepicker._isWeekend(day) || this.options.disableDayFn && this.options.disableDayFn(day), isDateRangeStart = this.options.isDateRange && this.date && this.endDate && _Datepicker._compareDates(this.date, day), isDateRangeEnd = this.options.isDateRange && this.endDate && _Datepicker._compareDates(this.endDate, day), isDateRange = this.options.isDateRange && _Datepicker._isDate(this.date) && _Datepicker._isDate(this.endDate) && _Datepicker._compareWithinRange(day, this.date, this.endDate);
+      const day = new Date(year, month, 1 + (i - before)), isToday = _Datepicker._compareDates(day, now), hasEvent = this.options.events.indexOf(day.toDateString()) !== -1, isEmpty = i < before || i >= days + before, isDisabled = this._isDisabledDay(day), isDateRangeStart = this.options.isDateRange && this.date && this.endDate && _Datepicker._compareDates(this.date, day), isDateRangeEnd = this.options.isDateRange && this.endDate && _Datepicker._compareDates(this.endDate, day), isDateRange = this.options.isDateRange && [this.date, this.endDate].every(_Datepicker._isDate) && day > this.date && day < this.endDate;
       let dayNumber = 1 + (i - before), monthNumber = month, yearNumber = year;
       let isSelected = false;
       if (_Datepicker._isDate(this.date)) {
@@ -692,9 +806,6 @@ var _Datepicker = class _Datepicker extends Component {
         isToday,
         isDisabled,
         isEmpty,
-        isStartRange,
-        isEndRange,
-        isInRange,
         showDaysInNextAndPreviousMonths: this.options.showDaysInNextAndPreviousMonths,
         isDateRangeStart,
         isDateRangeEnd,
@@ -702,10 +813,9 @@ var _Datepicker = class _Datepicker extends Component {
       };
       row.push(this.renderDay(dayConfig));
       if (++r === 7) {
-        data.push(this.renderRow(row, this.options.isRTL, isWeekSelected));
+        data.push(this.renderRow(row, this.options.isRTL, false));
         row = [];
         r = 0;
-        isWeekSelected = false;
       }
     }
     return this.renderTable(this.options, data, randId);
@@ -716,13 +826,10 @@ var _Datepicker = class _Datepicker extends Component {
       isToday: "is-today",
       isSelected: "is-selected",
       hasEvent: "has-event",
-      isInRange: "is-inrange",
-      isStartRange: "is-startrange",
-      isEndRange: "is-endrange",
       isDateRangeStart: "is-daterange-start",
       isDateRangeEnd: "is-daterange-end",
       isDateRange: "is-daterange"
-    }, ariaSelected = !(["isSelected", "isDateRange"].filter((prop) => !!(opts.hasOwnProperty(prop) && opts[prop] === true)).length === 0), arr = ["datepicker-day"];
+    }, ariaSelected = opts.isSelected === true || opts.isDateRange === true, arr = ["datepicker-day"];
     if (opts.isEmpty) {
       if (opts.showDaysInNextAndPreviousMonths) {
         arr.push("is-outside-current-month");
@@ -744,7 +851,6 @@ var _Datepicker = class _Datepicker extends Component {
   /** Assemble calendar cells; reject unsupported elements and attributes. */
   renderRow(days, isRTL, isRowSelected) {
     const row = '<tr class="datepicker-row' + (isRowSelected ? " is-selected" : "") + '">' + _Datepicker._calendarMarkup((isRTL ? days.reverse() : days).join(""), "tr") + "</tr>";
-    this._checkedRows.add(row);
     return row;
   }
   /** Assemble calendar rows; reject unsupported elements and attributes. */
@@ -764,13 +870,13 @@ var _Datepicker = class _Datepicker extends Component {
   /** Wrap calendar rows after validating and encoding their contents. */
   renderBody(rows) {
     const html = rows.join("");
-    const checked = rows.every((row) => this._checkedRows.has(row));
-    this._checkedRows.clear();
-    return "<tbody>" + (checked ? html : _Datepicker._calendarMarkup(html, "tbody")) + "</tbody>";
+    const safeHtml = _Datepicker._calendarMarkup(html, "tbody");
+    return "<tbody>" + safeHtml + "</tbody>";
   }
   static _calendarMarkup(html, parent) {
     const template = document.createElement("template");
     template.innerHTML = html;
+    const childOf = { tbody: "tr", tr: "td", td: "button" };
     const attributes = {
       tr: ["class"],
       td: ["class", "data-day", "aria-selected"],
@@ -784,8 +890,8 @@ var _Datepicker = class _Datepicker extends Component {
         return _Datepicker._escape(node.textContent);
       }
       if (!(node instanceof HTMLElement)) throw new TypeError("Unsupported calendar row content");
-      const tag = node.localName === "tr" ? "tr" : node.localName === "td" ? "td" : node.localName === "button" ? "button" : null;
-      if (!tag || !(container === "tbody" && tag === "tr" || container === "tr" && tag === "td" || container === "td" && tag === "button")) {
+      const tag = childOf[container];
+      if (!tag || node.localName !== tag) {
         throw new TypeError("Unsupported calendar row element");
       }
       if ([...node.attributes].some((attr) => !attributes[tag].includes(attr.name))) {
@@ -860,7 +966,7 @@ var _Datepicker = class _Datepicker extends Component {
     if (opts.yearRangeReverse) arr.reverse();
     const yearHtml = `<select class="datepicker-select orig-select-year" tabindex="-1">${arr.join("")}</select>`;
     const leftArrow = '<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/><path d="M0-.5h24v24H0z" fill="none"/></svg>';
-    html += `<button class="month-prev${prev ? "" : " is-disabled"}" type="button">${leftArrow}</button>`;
+    html += `<button class="month-prev${prev ? "" : " is-disabled"}" type="button" aria-label="${_Datepicker._escape(opts.i18n.previousMonth)}">${leftArrow}</button>`;
     html += '<div class="selects-container">';
     if (opts.showMonthAfterYear) {
       html += yearHtml + monthHtml;
@@ -869,7 +975,7 @@ var _Datepicker = class _Datepicker extends Component {
     }
     html += "</div>";
     const rightArrow = '<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>';
-    html += `<button class="month-next${next ? "" : " is-disabled"}" type="button">${rightArrow}</button>`;
+    html += `<button class="month-next${next ? "" : " is-disabled"}" type="button" aria-label="${_Datepicker._escape(opts.i18n.nextMonth)}">${rightArrow}</button>`;
     return html += "</div>";
   }
   /**
@@ -909,26 +1015,10 @@ var _Datepicker = class _Datepicker extends Component {
     const active = this.calendarEl.getRootNode().activeElement;
     const restoreDayFocus = active?.matches(".datepicker-day-button") && this.calendarEl.contains(active);
     const restoreArrow = this.calendarEl.contains(active) && active?.matches(".month-prev, .month-next") ? active.classList.contains("month-prev") ? ".month-prev" : ".month-next" : null;
-    const opts = this.options, minYear = opts.minYear, maxYear = opts.maxYear, minMonth = opts.minMonth, maxMonth = opts.maxMonth;
-    if (this._y <= minYear) {
-      this._y = minYear;
-      if (!isNaN(minMonth) && this._m < minMonth) {
-        this._m = minMonth;
-      }
-    }
-    if (this._y >= maxYear) {
-      this._y = maxYear;
-      if (!isNaN(maxMonth) && this._m > maxMonth) {
-        this._m = maxMonth;
-      }
-    }
+    const restoreSelect = this._selectFocusRestorer(active);
     const year = this.calendars[0].year;
     const month = this.calendars[0].month;
-    if (!this.options.isDateRange) {
-      this._renderDateDisplay(this.date);
-    } else {
-      this._renderDateDisplay(this.date, this.endDate);
-    }
+    this._renderDateDisplay(this.date, this.endDate);
     const key = this._controlsCacheKey(year);
     if (key === this._controlsKey && this.calendarEl.querySelector(".datepicker-controls")) {
       this._reuseControls(year, month);
@@ -940,10 +1030,27 @@ var _Datepicker = class _Datepicker extends Component {
     this._renderCalendarTable(year, month);
     this._syncCalendarFocus(!!restoreDayFocus);
     if (restoreArrow) this.calendarEl.querySelector(restoreArrow)?.focus();
+    restoreSelect();
     if (typeof this.options.onDraw === "function") {
       this.options.onDraw.call(this);
     }
   }
+  _formSelect(selector) {
+    const el = this.calendarEl.querySelector(selector);
+    return el ? FormSelect.getInstance(el) : void 0;
+  }
+  /**
+   * Picking a year rebuilds both selects under the focus, which is on the old
+   * input or in its menu. The returned callback, run after the redraw, gives
+   * focus to the matching new input if the old one went with the rebuild.
+   */
+  _selectFocusRestorer(active) {
+    const holdsFocus = (select) => !!select && (select.input === active || !!select.menuEl?.contains(active));
+    const selector = [".orig-select-year", ".orig-select-month"].find((s) => holdsFocus(this._formSelect(s)));
+    return () => {
+      if (selector && !active.isConnected) this._formSelect(selector)?.input.focus();
+    };
+  }
   /** Tear down the two FormSelects and render the controls from scratch. */
   _rebuildControls(year, month) {
     this.destroySelects();
@@ -983,79 +1090,40 @@ var _Datepicker = class _Datepicker extends Component {
     else this.calendarEl.insertAdjacentHTML("beforeend", html);
   }
   _setupEventHandlers() {
-    this.el.addEventListener("click", this._handleInputClick);
-    this.el.addEventListener("keydown", this._handleInputKeydown);
-    this.el.addEventListener("change", this._handleInputChange);
-    this.endDateEl?.addEventListener("click", this._handleInputClick);
-    this.endDateEl?.addEventListener("keydown", this._handleInputKeydown);
-    this.endDateEl?.addEventListener("change", this._handleInputChange);
-    this.calendarEl.addEventListener("click", this._handleCalendarClick);
-    this.calendarEl.addEventListener("keydown", this._handleCalendarKeydown);
-    this.calendarEl.addEventListener("focusin", this._handleCalendarFocus);
+    this._addInputEventHandlers(this.el);
+    if (this.endDateEl) this._addInputEventHandlers(this.endDateEl);
+    this._form = this.el.form;
+    const { signal } = this._events;
+    this._form?.addEventListener("reset", this._handleFormReset, { signal });
+    this.calendarEl.addEventListener("click", this._handleCalendarClick, { signal });
+    this.calendarEl.addEventListener("keydown", this._handleCalendarKeydown, { signal });
+    this.calendarEl.addEventListener("focusin", this._handleCalendarFocus, { signal });
   }
   _setupVariables() {
     const template = document.createElement("template");
     template.innerHTML = _Datepicker._template.trim();
     this.containerEl = template.content.firstChild;
     this.calendarEl = this.containerEl.querySelector(".datepicker-calendar");
-    this.yearTextEl = this.containerEl.querySelector(".year-text");
     this.dateTextEl = this.containerEl.querySelector(".date-text");
     this.footer = this.containerEl.querySelector(".datepicker-footer");
-    this.formats = {
-      d: (date) => {
-        return date.getDate();
-      },
-      dd: (date) => {
-        const d = date.getDate();
-        return (d < 10 ? "0" : "") + d;
-      },
-      ddd: (date) => {
-        return this.options.i18n.weekdaysShort[date.getDay()];
-      },
-      dddd: (date) => {
-        return this.options.i18n.weekdays[date.getDay()];
-      },
-      m: (date) => {
-        return date.getMonth() + 1;
-      },
-      mm: (date) => {
-        const m = date.getMonth() + 1;
-        return (m < 10 ? "0" : "") + m;
-      },
-      mmm: (date) => {
-        return this.options.i18n.monthsShort[date.getMonth()];
-      },
-      mmmm: (date) => {
-        return this.options.i18n.months[date.getMonth()];
-      },
-      yy: (date) => {
-        return ("" + date.getFullYear()).slice(2);
-      },
-      yyyy: (date) => {
-        return date.getFullYear();
-      }
-    };
-  }
-  _removeEventHandlers() {
-    for (const input of this.dateEls ?? [this.el]) this._removeInputEventHandlers(input);
-    this.calendarEl.removeEventListener("click", this._handleCalendarClick);
-    this.calendarEl.removeEventListener("keydown", this._handleCalendarKeydown);
-    this.calendarEl.removeEventListener("focusin", this._handleCalendarFocus);
-    if (this.options.isDateRange && this.endDateEl) {
-      this._removeInputEventHandlers(this.endDateEl);
-    }
   }
-  _removeInputEventHandlers(input) {
-    input.removeEventListener("click", this._handleInputClick);
-    input.removeEventListener("keydown", this._handleInputKeydown);
-    input.removeEventListener("change", this._handleInputChange);
+  /** A date input's listeners. An input the picker removes keeps them, but no event reaches it then. */
+  _addInputEventHandlers(input) {
+    const { signal } = this._events;
+    input.addEventListener("click", this._handleInputClick, { signal });
+    input.addEventListener("keydown", this._handleInputKeydown, { signal });
+    input.addEventListener("change", this._handleInputChange, { signal });
   }
   _removeDateInput(input) {
     const focused = input.getRootNode().activeElement === input;
-    this._removeInputEventHandlers(input);
     input.remove();
     if (focused && document.activeElement === document.body) this.el.focus();
   }
+  /** Shows a docked or modal calendar. A modal takes focus from the input, so the selected day gets it. */
+  _showDisplay() {
+    this.displayPlugin?.show();
+    if (this.displayPlugin instanceof ModalDisplayPlugin) this._syncCalendarFocus(true);
+  }
   _dayDate(button) {
     const date = /* @__PURE__ */ new Date(0);
     date.setFullYear(Number(button.dataset.year), Number(button.dataset.month), Number(button.dataset.day));
@@ -1065,7 +1133,7 @@ var _Datepicker = class _Datepicker extends Component {
   _syncCalendarFocus(restore = false) {
     const buttons = [...this.calendarEl.querySelectorAll(".datepicker-day-button")];
     const current = buttons.filter((button) => !button.parentElement.classList.contains("is-selection-disabled"));
-    const preferred = this._focusedDate || this.date || /* @__PURE__ */ new Date();
+    const preferred = this._focusedDate || this.date || new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0));
     const target = current.find((button) => _Datepicker._compareDates(this._dayDate(button), preferred)) || current.find((button) => button.parentElement.classList.contains("is-selected")) || current.find((button) => !button.parentElement.classList.contains("is-disabled")) || current[0];
     for (const button of buttons) {
       button.tabIndex = button === target ? 0 : -1;
@@ -1090,6 +1158,22 @@ var _Datepicker = class _Datepicker extends Component {
       this.adjustCalendars();
     }
   }
+  _readBackMultiple() {
+    for (const input of this.dateEls.splice(1)) this._removeDateInput(input);
+    this.dates = [];
+    this._syncDataDate(this.el);
+    const date = this._dateInInput(this.el);
+    if (_Datepicker._isDate(date) && this._isSelectableDay(date)) this.setDate(date, true);
+  }
+  /** A native date input's overlay text follows its value, including an empty one. */
+  _syncDataDate(el) {
+    if (el.type === "date") this.setDataDate(el, _Datepicker._parseDate(el.value));
+  }
+  _readBackSingle() {
+    this.setSingleDate(null, false);
+    this.setSingleDate(null, true);
+    for (const input of [this.el, this.endDateEl]) if (input) this.setDateFromInput(input);
+  }
   renderDayName(opts, day, abbr = false) {
     day += opts.firstDay;
     while (day >= 7) {
@@ -1101,17 +1185,15 @@ var _Datepicker = class _Datepicker extends Component {
     const dateInput = this.el.cloneNode(true);
     dateInput.removeAttribute("id");
     dateInput.classList.add("no-autoinit");
-    dateInput.addEventListener("click", this._handleInputClick);
-    dateInput.addEventListener("keydown", this._handleInputKeydown);
-    dateInput.addEventListener("change", this._handleInputChange);
+    this._addInputEventHandlers(dateInput);
     this.el.parentElement.appendChild(dateInput);
     return dateInput;
   }
 };
+_Datepicker.key = "Expressive_Datepicker";
 _Datepicker._template = `
         <div class="datepicker-container">
           <div class="datepicker-date-display">
-            <span class="year-text"></span>
             <span class="date-text"></span>
           </div>
           <div class="datepicker-calendar-container">
@@ -1122,6 +1204,7 @@ _Datepicker._template = `
 var Datepicker = _Datepicker;
 
 export {
+  readDate,
   Datepicker
 };
-//# sourceMappingURL=chunk-5HQSGDZ5.mjs.map
+//# sourceMappingURL=chunk-QXKWVHBD.mjs.map