@expressivecss/expressive 0.15.0 → 0.17.0

package/dist/js/chunks/{chunk-GJL6GCIU.mjs → chunk-H6YIKFAQ.mjs}

@@ -1,17 +1,95 @@
 import {
-  DockedDisplayPlugin
-} from "./chunk-M3MURWMB.mjs";
+  ModalDisplayPlugin,
+  createDisplayPlugin,
+  hideModal
+} from "./chunk-B55LWKBM.mjs";
 import {
   FormSelect
-} from "./chunk-WDK4T63U.mjs";
-import {
-  Utils
-} from "./chunk-M372EDXD.mjs";
+} from "./chunk-XJPMW5SP.mjs";
 import {
   Component
-} from "./chunk-PD6HYHAE.mjs";
+} from "./chunk-EB2V4OKL.mjs";
+import {
+  Utils,
+  afterFormReset,
+  pickerFooter
+} from "./chunk-67UNY7RH.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 +124,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 +143,8 @@ var _defaults = {
     cancel: "Cancel",
     clear: "Clear",
     done: "Ok",
-    previousMonth: "\u2039",
-    nextMonth: "\u203A",
+    previousMonth: "Previous month",
+    nextMonth: "Next month",
     months: [
       "January",
       "February",
@@ -114,12 +190,14 @@ 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;
     /** What setInputValue last wrote, so reading it back does not depend on the parser. */
     this._writtenInputs = /* @__PURE__ */ new WeakMap();
-    /** Rows renderRow has already checked, so renderBody does not parse them again. */
-    this._checkedRows = /* @__PURE__ */ new Set();
+    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. */
@@ -129,18 +207,20 @@ var _Datepicker = class _Datepicker extends Component {
     /** id linking the controls element to the table's aria-labelledby. */
     this._randId = null;
     this._focusedDate = null;
+    // Bound to the date inputs only, so the target is one of them.
     this._handleInputClick = (e) => {
-      if (e.target.type == "date" && (this.options.openByDefault || this.options.container)) e.preventDefault();
+      const input = e.target;
+      if (input.type == "date" && (this.options.openByDefault || this.options.container)) e.preventDefault();
       this._batchDraws(() => {
-        this.setDateFromInput(e.target);
+        this.setDateFromInput(input);
         this.draw();
-        this.gotoDate(e.target === this.el ? this.date : this.endDate);
+        this.gotoDate(input === 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);
@@ -151,7 +231,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;
@@ -160,7 +240,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 = {
@@ -192,13 +272,13 @@ var _Datepicker = class _Datepicker extends Component {
     };
     this._handleCalendarClick = (e) => {
       const target = e.target;
-      if (target.classList.contains("is-disabled")) return;
+      if (target.closest(".is-disabled")) return;
       this._batchDraws(() => {
         if (target.classList.contains("datepicker-day-button") && !target.classList.contains("is-empty") && !target.parentElement.classList.contains("is-disabled") && !target.parentElement.classList.contains("is-selection-disabled")) {
           const selectedDate = new Date(
-            e.target.getAttribute("data-year"),
-            e.target.getAttribute("data-month"),
-            e.target.getAttribute("data-day")
+            Number(target.getAttribute("data-year")),
+            Number(target.getAttribute("data-month")),
+            Number(target.getAttribute("data-day"))
           );
           if (!this.multiple || this.options.isMultipleSelection) {
             this.setDate(selectedDate);
@@ -216,18 +296,17 @@ 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)) {
-          return;
-        }
-        this.setDate(date, false, _Datepicker._isDate(this.date));
+        this.setDate(date, false, _Datepicker._isDate(this.date) && date >= this.date);
         return;
       }
       this._clearDates();
       this.draw();
     };
+    // Like a day click: a picker with Ok and Cancel, which a modal always is,
+    // writes the cleared input on Ok, so Cancel keeps the value.
     this._handleClearClick = () => {
       this._clearDates();
-      this.setInputValues();
+      if (this.options.autoSubmit) this._finishSelection();
     };
     this._clearDates = () => {
       this.date = null;
@@ -241,8 +320,16 @@ 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._readBack = () => {
+      if (this.options.isMultipleSelection) this._readBackMultiple();
+      else this._readBackSingle();
+      this.draw();
+    };
     this._handleInputChange = (e) => {
-      if (e["detail"]?.firedBy === this) return;
+      if (e instanceof CustomEvent && e.detail?.firedBy === this) return;
       this.setDateFromInput(e.target);
     };
     this._finishSelection = () => {
@@ -250,21 +337,15 @@ 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);
+      hideModal(this.displayPlugin);
+      this._notify("cancel", this.options.onCancel, { args: [] });
     };
-    this.el["Expressive_Datepicker"] = this;
-    this.options = {
-      ..._Datepicker.defaults,
-      ...options
-    };
-    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 });
+    this._setDateBounds();
     this.id = Utils.guid();
     if (this.options.isMultipleSelection) {
       this.multiple = true;
@@ -274,7 +355,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;
@@ -282,11 +364,13 @@ 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);
+        this.gotoDate(this._withinBounds(defDate));
       }
     } else {
-      this.gotoDate(/* @__PURE__ */ new Date());
+      this.gotoDate(this._withinBounds(/* @__PURE__ */ new Date()));
     }
     if (this.options.isDateRange) {
       this.multiple = true;
@@ -298,21 +382,19 @@ var _Datepicker = class _Datepicker extends Component {
         }
       }
     }
-    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.
    *
@@ -328,65 +410,55 @@ 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();
     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") {
@@ -399,7 +471,7 @@ var _Datepicker = class _Datepicker extends Component {
         this.endDateEl = this.createDateInput();
         this.endDateEl.classList.add("datepicker-end-date");
       } else {
-        this.endDateEl = document.querySelector(this.options.dateRangeEndEl);
+        this.endDateEl = Utils.querySelector(this.el, this.options.dateRangeEndEl);
         if (!this.endDateEl) {
           console.warn("Specified date range end input element in dateRangeEndEl not found");
         } else {
@@ -407,14 +479,12 @@ 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);
-    }
-    if (this.options.container) {
-      const optEl = this.options.container;
-      this.options.container = optEl instanceof HTMLElement ? optEl : document.querySelector(optEl);
-      this.options.container.append(this.containerEl);
+    pickerFooter(this.footer, this.options, "datepicker-clear", this._handleClearClick, this._confirm, this._cancel);
+    const optEl = this.options.container;
+    const container = typeof optEl === "string" ? Utils.querySelector(this.el, optEl) : optEl;
+    if (container) {
+      this.options.container = container;
+      container.append(this.containerEl);
     } else {
       const appendTo = !this.endDateEl ? this.el : this.endDateEl;
       if (!this.options.openByDefault) this.containerEl.setAttribute("style", "display: none; visibility: hidden;");
@@ -444,29 +514,44 @@ 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 written = !this.options.parse && this._writtenInputs.get(el);
-    const parsedDate = written && written.value === el.value ? written.date : 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.setDate(date, false, isEndDate, true);
+    const unchanged = this._shows(el, date);
+    this._selectTypedMultiDate(el, date);
+    this.setDate(date, unchanged, isEndDate, true);
+  }
+  /** Whether `date` is the date already selected for `el`. */
+  _shows(el, date) {
+    return this._selectedDateFor(el)?.getTime() === date.getTime();
+  }
+  // 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.
@@ -481,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) {
@@ -499,6 +584,10 @@ var _Datepicker = class _Datepicker extends Component {
     if (!_Datepicker._isDate(date)) {
       return;
     }
+    return this._withinBounds(date);
+  }
+  /** A copy of `date`, moved to minDate or maxDate when it falls outside them. */
+  _withinBounds(date) {
     const min = this.options.minDate, max = this.options.maxDate;
     if (_Datepicker._isDate(min) && date < min) {
       date = min;
@@ -507,6 +596,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.
@@ -530,7 +651,7 @@ var _Datepicker = class _Datepicker extends Component {
     } else {
       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
@@ -645,7 +766,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) {
@@ -654,10 +775,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);
+    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)) {
@@ -689,9 +810,6 @@ var _Datepicker = class _Datepicker extends Component {
         isToday,
         isDisabled,
         isEmpty,
-        isStartRange,
-        isEndRange,
-        isInRange,
         showDaysInNextAndPreviousMonths: this.options.showDaysInNextAndPreviousMonths,
         isDateRangeStart,
         isDateRangeEnd,
@@ -712,9 +830,6 @@ 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"
@@ -728,7 +843,7 @@ var _Datepicker = class _Datepicker extends Component {
       }
     }
     for (const [property, className] of Object.entries(classMap)) {
-      if (opts.hasOwnProperty(property) && opts[property]) {
+      if (opts[property]) {
         arr.push(className);
       }
     }
@@ -740,7 +855,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. */
@@ -761,7 +875,6 @@ var _Datepicker = class _Datepicker extends Component {
   renderBody(rows) {
     const html = rows.join("");
     const safeHtml = _Datepicker._calendarMarkup(html, "tbody");
-    this._checkedRows.clear();
     return "<tbody>" + safeHtml + "</tbody>";
   }
   static _calendarMarkup(html, parent) {
@@ -802,6 +915,24 @@ var _Datepicker = class _Datepicker extends Component {
    * Depends on the month, which is deliberately *not* part of the controls
    * cache key - so the reuse path has to recompute and reapply it.
    */
+  /**
+   * Removes the time from minDate and maxDate, on copies: the caller's Date
+   * objects are theirs. Each also sets the month and year bounds, which the
+   * arrows, the month and year lists and PageUp/PageDown read. They used to
+   * stay at their defaults, so the calendar paged into months where every
+   * day was disabled.
+   */
+  _setDateBounds() {
+    const { minDate, maxDate } = this.options;
+    if (minDate) {
+      this.options.minDate = new Date(new Date(minDate.getTime()).setHours(0, 0, 0, 0));
+      Object.assign(this.options, { minYear: minDate.getFullYear(), minMonth: minDate.getMonth() });
+    }
+    if (maxDate) {
+      this.options.maxDate = new Date(new Date(maxDate.getTime()).setHours(0, 0, 0, 0));
+      Object.assign(this.options, { maxYear: maxDate.getFullYear(), maxMonth: maxDate.getMonth() });
+    }
+  }
   _arrowState(year, month) {
     const opts = this.options;
     const isMinYear = year === opts.minYear;
@@ -857,7 +988,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;
@@ -866,7 +997,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>";
   }
   /**
@@ -906,6 +1037,7 @@ 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 restoreSelect = this._selectFocusRestorer(active);
     const year = this.calendars[0].year;
     const month = this.calendars[0].month;
     this._renderDateDisplay(this.date, this.endDate);
@@ -920,10 +1052,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();
@@ -965,78 +1114,37 @@ var _Datepicker = class _Datepicker extends Component {
   _setupEventHandlers() {
     this._addInputEventHandlers(this.el);
     if (this.endDateEl) this._addInputEventHandlers(this.endDateEl);
-    this.calendarEl.addEventListener("click", this._handleCalendarClick);
-    this.calendarEl.addEventListener("keydown", this._handleCalendarKeydown);
-    this.calendarEl.addEventListener("focusin", this._handleCalendarFocus);
+    const { signal } = this._events;
+    afterFormReset(this.el, this._readBack, 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);
-    }
   }
+  /** A date input's listeners. An input the picker removes keeps them, but no event reaches it then. */
   _addInputEventHandlers(input) {
-    input.addEventListener("click", this._handleInputClick);
-    input.addEventListener("keydown", this._handleInputKeydown);
-    input.addEventListener("change", this._handleInputChange);
-  }
-  _removeInputEventHandlers(input) {
-    input.removeEventListener("click", this._handleInputClick);
-    input.removeEventListener("keydown", this._handleInputKeydown);
-    input.removeEventListener("change", this._handleInputChange);
+    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));
@@ -1046,7 +1154,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;
@@ -1059,18 +1167,34 @@ var _Datepicker = class _Datepicker extends Component {
   }
   // change view to a specific month (zero-index, e.g. 0: January)
   gotoMonth(month) {
-    if (!isNaN(month)) {
-      this.calendars[0].month = parseInt(month, 10);
+    if (!isNaN(Number(month))) {
+      this.calendars[0].month = parseInt(String(month), 10);
       this.adjustCalendars();
     }
   }
   // change view to a specific full year (e.g. "2012")
   gotoYear(year) {
-    if (!isNaN(year)) {
-      this.calendars[0].year = parseInt(year, 10);
+    if (!isNaN(Number(year))) {
+      this.calendars[0].year = parseInt(String(year), 10);
       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) {
@@ -1087,10 +1211,10 @@ var _Datepicker = class _Datepicker extends Component {
     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">
@@ -1101,6 +1225,7 @@ _Datepicker._template = `
 var Datepicker = _Datepicker;
 
 export {
+  readDate,
   Datepicker
 };
-//# sourceMappingURL=chunk-GJL6GCIU.mjs.map
+//# sourceMappingURL=chunk-H6YIKFAQ.mjs.map