@lekoala/date-picker 0.4.0 → 0.5.0

package/dist/date-picker.js

@@ -1,4 +1,4 @@
-/*** @lekoala/date-picker v0.4.0 - https://github.com/lekoala/date-picker ***/
+/*** @lekoala/date-picker v0.5.0 - https://github.com/lekoala/date-picker ***/
 (() => {
   var __defProp = Object.defineProperty;
   var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -181,8 +181,10 @@
       for (let i = 0;i < 7; i++)
         week.push(addDays(cursor, i));
       weeks.push(week);
-      if (compareDates(week[6], end) >= 0)
-        break;
+      if (compareDates(week[6], end) >= 0) {
+        if (!options.fixedWeeks || weeks.length >= 6 || compareDates(week[6], addDays("9999-12-31", -7)) > 0)
+          break;
+      }
       cursor = addDays(cursor, 7);
     }
     return weeks;
@@ -296,6 +298,30 @@
     }
   }
 
+  // src/control-classes.js
+  function normalizeControlClass(value) {
+    if (typeof value !== "string")
+      return "";
+    return [
+      ...new Set(value.split(/\s+/).filter((token) => token && !token.startsWith("dp-") && ![...token].some((char) => char.charCodeAt(0) < 32 || char.charCodeAt(0) === 127)))
+    ].join(" ");
+  }
+  function sameControlClasses(a, b) {
+    return a.month === b.month && a.year === b.year && a.nav === b.nav;
+  }
+  var defaults = { month: "", year: "", nav: "" };
+  function getDefaultControlClasses() {
+    return { ...defaults };
+  }
+  function resolveControlClasses(classes) {
+    const result = getDefaultControlClasses();
+    for (const role of ["month", "year", "nav"]) {
+      if (classes && Object.hasOwn(classes, role))
+        result[role] = normalizeControlClass(classes[role]);
+    }
+    return result;
+  }
+
   // src/date-range.js
   function normalizeRange(range) {
     if (range == null)
@@ -480,6 +506,23 @@
 
   // src/intl.js
   var BIDI = /[\u200e\u200f\u061c\u202a-\u202e\u2066-\u2069]/g;
+  var dateFormatters = new Map;
+  var digitMaps = new Map;
+  function cached(cache, key, create) {
+    const existing = cache.get(key);
+    if (existing !== undefined)
+      return existing;
+    const value = create();
+    const oldest = cache.keys().next().value;
+    if (cache.size >= 64 && oldest !== undefined)
+      cache.delete(oldest);
+    cache.set(key, value);
+    return value;
+  }
+  function dateFormatter(locale, options) {
+    const key = JSON.stringify([locale, options]);
+    return cached(dateFormatters, key, () => new Intl.DateTimeFormat(locale, options));
+  }
   function resolveLocale(locale = "") {
     if (locale)
       return locale;
@@ -490,11 +533,13 @@
     return "en-US";
   }
   function digitMap(locale) {
-    const formatter = new Intl.NumberFormat(locale, { useGrouping: false });
-    const map = new Map;
-    for (let i = 0;i <= 9; i++)
-      map.set(formatter.format(i), String(i));
-    return map;
+    return cached(digitMaps, locale, () => {
+      const formatter = new Intl.NumberFormat(locale, { useGrouping: false });
+      const map = new Map;
+      for (let i = 0;i <= 9; i++)
+        map.set(formatter.format(i), String(i));
+      return map;
+    });
   }
   function normalizeDigits(text, locale, options = {}) {
     let result = String(text || "").replace(BIDI, "");
@@ -506,7 +551,7 @@
   }
   function formatLongDate(value, locale = "") {
     const resolved = resolveLocale(locale);
-    return new Intl.DateTimeFormat(resolved, {
+    return dateFormatter(resolved, {
       calendar: "gregory",
       weekday: "long",
       year: "numeric",
@@ -517,7 +562,7 @@
   }
   function formatMonthYear(value, locale = "") {
     const resolved = resolveLocale(locale);
-    return new Intl.DateTimeFormat(resolved, {
+    return dateFormatter(resolved, {
       calendar: "gregory",
       year: "numeric",
       month: "long",
@@ -527,7 +572,7 @@
   function monthYearOrder(locale = "") {
     const resolved = resolveLocale(locale);
     try {
-      const parts = new Intl.DateTimeFormat(resolved, {
+      const parts = dateFormatter(resolved, {
         calendar: "gregory",
         year: "numeric",
         month: "long",
@@ -552,12 +597,12 @@
   }
   function monthNames(locale = "", style = "long") {
     const resolved = resolveLocale(locale);
-    const formatter = new Intl.DateTimeFormat(resolved, { calendar: "gregory", month: style, timeZone: "UTC" });
+    const formatter = dateFormatter(resolved, { calendar: "gregory", month: style, timeZone: "UTC" });
     return Array.from({ length: 12 }, (_, index) => formatter.format(toIntlDate(`2026-${String(index + 1).padStart(2, "0")}-15`)));
   }
   function weekdayNames(locale = "", firstDay = 1, style = "short") {
     const resolved = resolveLocale(locale);
-    const formatter = new Intl.DateTimeFormat(resolved, {
+    const formatter = dateFormatter(resolved, {
       calendar: "gregory",
       weekday: style,
       timeZone: "UTC"
@@ -575,7 +620,7 @@
   }
   function createDateAdapter(locale = "") {
     const resolved = resolveLocale(locale);
-    const formatter = new Intl.DateTimeFormat(resolved, {
+    const formatter = dateFormatter(resolved, {
       calendar: "gregory",
       year: "numeric",
       month: "2-digit",
@@ -654,9 +699,9 @@
     rangeOrderStart: "Start must be on or before end",
     rangeOrderEnd: "End must be on or after start"
   };
-  var defaults = { ...DEFAULT_MESSAGES };
+  var defaults2 = { ...DEFAULT_MESSAGES };
   function getDefaultMessages() {
-    return { ...defaults };
+    return { ...defaults2 };
   }
 
   // src/source.js
@@ -756,7 +801,9 @@
       this._highlightedRange = { start: "", end: "" };
       this._paintedRange = { start: "", end: "" };
       this._paintedPreview = false;
+      this._renderedStates = new Map;
       this._messages = getDefaultMessages();
+      this._controlClasses = getDefaultControlClasses();
       this._onClick = this._onClick.bind(this);
       this._onChange = this._onChange.bind(this);
       this._onKeyDown = this._onKeyDown.bind(this);
@@ -893,6 +940,17 @@
     set showWeekNumbers(value) {
       this.toggleAttribute("show-week-numbers", Boolean(value));
     }
+    get controlClasses() {
+      return { ...this._controlClasses };
+    }
+    set controlClasses(value) {
+      const classes = resolveControlClasses(value);
+      if (sameControlClasses(classes, this._controlClasses))
+        return;
+      this._controlClasses = classes;
+      if (this._connected)
+        this.render();
+    }
     get messages() {
       return this._messages;
     }
@@ -973,18 +1031,10 @@
       return compareDates(candidate, last) > 0 ? last : candidate;
     }
     _weeks(display = this.display) {
-      const weeks = getMonthWeeks(clampDisplayMonth(display, this.firstDay), { firstDay: this.firstDay });
-      if (!this.fixedWeeks || weeks.length >= 6)
-        return weeks;
-      let cursor = weeks[weeks.length - 1]?.[6] || "";
-      while (weeks.length < 6 && cursor) {
-        const week = [];
-        for (let i = 1;i <= 7; i++)
-          week.push(addDays(cursor, i));
-        weeks.push(week);
-        cursor = week[6];
-      }
-      return weeks;
+      return getMonthWeeks(clampDisplayMonth(display, this.firstDay), {
+        firstDay: this.firstDay,
+        fixedWeeks: this.fixedWeeks
+      });
     }
     _focusTargetKey(element) {
       if (element.matches(".dp-month-select, .dp-year-input") && element.id) {
@@ -1171,6 +1221,8 @@
       ].filter(Boolean).join(". ");
     }
     _updateRangeDom() {
+      const previousRange = this._paintedRange;
+      const previousPreview = this._paintedPreview;
       this._paintedRange = { ...this._highlightedRange };
       this._paintedPreview = this.hasAttribute("data-range-preview");
       for (const cell of this.querySelectorAll(".dp-day[data-date]")) {
@@ -1178,13 +1230,20 @@
           continue;
         const date = cell.dataset.date || "";
         const position = rangePosition(date, this._highlightedRange);
+        if (position === rangePosition(date, previousRange) && previousPreview === this._paintedPreview)
+          continue;
         for (const [name, on] of Object.entries(rangeAttributeMap(position))) {
           if (on)
             cell.setAttribute(name, "true");
           else
             cell.removeAttribute(name);
         }
-        cell.setAttribute("aria-label", this._dayLabel(date, this.getDateState(date), position));
+        if (!previousPreview || !this._paintedPreview) {
+          const state = this._renderedStates.get(date) || {};
+          const label = this._dayLabel(date, state, position);
+          if (cell.getAttribute("aria-label") !== label)
+            cell.setAttribute("aria-label", label);
+        }
       }
     }
     focusGrid() {
@@ -1347,10 +1406,12 @@
         return `<option value="${String(month).padStart(2, "0")}"${month === displayMonth ? " selected" : ""}${disabled ? " disabled" : ""}>${escapeHtml(name)}</option>`;
       }).join("");
       const dayHeaders = weekdayShort.map((name, index) => `<th scope="col" abbr="${escapeHtml(weekdayLong[index])}">${escapeHtml(name.replace(".", ""))}</th>`).join("");
+      this._renderedStates.clear();
       const rows = weeks.map((week) => {
         const weekNumber = showWeeks ? `<th scope="row" class="dp-week-number">${isoWeekNumber(week[0])}</th>` : "";
         const cells = week.map((date) => {
           const state = this.getDateState(date);
+          this._renderedStates.set(date, state);
           const outside = monthKey(date) !== display;
           const selected = this.value === date;
           const focused = this.focusedDate === date;
@@ -1365,18 +1426,22 @@
       const focusKey = focusedElement instanceof HTMLElement && this.contains(focusedElement) ? this._focusTargetKey(focusedElement) : "";
       const yearFirst = monthYearOrder(locale)[0] === "year";
       this.toggleAttribute("data-year-first", yearFirst);
+      const classes = this._controlClasses;
+      const monthClass = escapeHtml(classes.month || "dp-skin");
+      const yearClass = escapeHtml(classes.year || "dp-skin");
+      const navClass = escapeHtml(classes.nav || "dp-skin");
       const monthControl = `<label class="dp-visually-hidden" for="${this._id}-month">${escapeHtml(this._messages.month)}</label>
-          <select id="${this._id}-month" class="dp-month-select" aria-label="${escapeHtml(this._messages.month)}">${monthOptions}</select>`;
+          <select id="${this._id}-month" class="dp-month-select ${monthClass}" aria-label="${escapeHtml(this._messages.month)}">${monthOptions}</select>`;
       const yearControl = `<label class="dp-visually-hidden" for="${this._id}-year">${escapeHtml(this._messages.year)}</label>
-          <input id="${this._id}-year" class="dp-year-input" type="number" inputmode="numeric" value="${displayYear}"${minYearAttr}${maxYearAttr} aria-label="${escapeHtml(this._messages.year)}">`;
+          <input id="${this._id}-year" class="dp-year-input ${yearClass}" type="number" inputmode="numeric" value="${displayYear}"${minYearAttr}${maxYearAttr} aria-label="${escapeHtml(this._messages.year)}">`;
       this._rendering = true;
       this.innerHTML = `
       <div class="dp-calendar-shell">
         <div class="dp-calendar-header">
           ${yearFirst ? yearControl : monthControl}
           ${yearFirst ? monthControl : yearControl}
-          <button type="button" class="dp-nav dp-prev" data-calendar-action="previous" aria-label="${escapeHtml(this._messages.previousMonth)}"${prevDisabled ? " disabled" : ""}><svg aria-hidden="true" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m4 10 4-4 4 4"/></svg></button>
-          <button type="button" class="dp-nav dp-next" data-calendar-action="next" aria-label="${escapeHtml(this._messages.nextMonth)}"${nextDisabled ? " disabled" : ""}><svg aria-hidden="true" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m4 6 4 4 4-4"/></svg></button>
+          <button type="button" class="dp-nav dp-prev ${navClass}" data-calendar-action="previous" aria-label="${escapeHtml(this._messages.previousMonth)}"${prevDisabled ? " disabled" : ""}><svg aria-hidden="true" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m4 10 4-4 4 4"/></svg></button>
+          <button type="button" class="dp-nav dp-next ${navClass}" data-calendar-action="next" aria-label="${escapeHtml(this._messages.nextMonth)}"${nextDisabled ? " disabled" : ""}><svg aria-hidden="true" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m4 6 4 4 4-4"/></svg></button>
         </div>
         <h2 id="${headingId}" class="dp-calendar-heading dp-visually-hidden" aria-live="polite">${escapeHtml(formatMonthYear(`${display}-15`, locale))}</h2>
         <table id="${gridId}" class="dp-grid" role="grid" aria-labelledby="${headingId}">
@@ -1406,7 +1471,7 @@
           const extra = cell.querySelector(".dp-day-extra");
           if (!(extra instanceof HTMLElement))
             continue;
-          const content = this._renderDay(date, this.getDateState(date));
+          const content = this._renderDay(date, this._renderedStates.get(date) || {});
           if (content instanceof Node)
             extra.append(content);
           else if (content !== undefined && content !== null)
@@ -1422,13 +1487,15 @@
   function crossAxisFor(side) {
     return side === "top" || side === "bottom" ? "x" : "y";
   }
+  var OPPOSITE = { top: "bottom", bottom: "top", left: "right", right: "left" };
+  var PLACEMENTS = new Set(Object.keys(OPPOSITE).flatMap((side) => [side, `${side}-start`, `${side}-end`]));
+  var COORDINATE_SPACES = new Set(["viewport", "document"]);
   function parsePlacement(placement) {
+    if (!PLACEMENTS.has(placement))
+      throw new TypeError(`Unknown placement: ${placement}`);
     const [side, align = null] = placement.split("-");
     return { side, align, crossAxis: crossAxisFor(side) };
   }
-  function flipSide(side) {
-    return { top: "bottom", bottom: "top", left: "right", right: "left" }[side] || side;
-  }
   function computeCoords(reference, floating, side, align, rtl, distance) {
     const crossAxis = crossAxisFor(side);
     const commonX = reference.x + reference.width / 2 - floating.width / 2;
@@ -1460,17 +1527,12 @@
   function overflowOn(position, size, start, end) {
     return Math.max(start - position, 0) + Math.max(position + size - end, 0);
   }
-  function isRTL(element) {
-    const direction = "dir" in element ? element.dir : "";
-    if (direction === "rtl")
-      return true;
-    if (direction === "ltr")
-      return false;
-    const win = element.ownerDocument?.defaultView;
-    if (win?.CSS?.supports?.("selector(:dir(rtl))") && typeof element.matches === "function") {
-      return element.matches(":dir(rtl)");
+  function isRTL(reference) {
+    const win = reference.ownerDocument?.defaultView;
+    if (win && reference instanceof win.Element) {
+      return win.getComputedStyle(reference).direction === "rtl";
     }
-    return Boolean(win?.Element && element instanceof win.Element && win.getComputedStyle(element).direction === "rtl");
+    return "dir" in reference && reference.dir === "rtl";
   }
   var STABLE_SCROLLBAR_MAX_WIDTH = 25;
   function getViewportBoundary(doc) {
@@ -1508,8 +1570,14 @@
     const percent = (referenceCenter - boxStart) / size * 100;
     return Math.round(Math.min(100, Math.max(0, percent)) * 1000) / 1000;
   }
-  function isOutsideBoundary(rect, boundary) {
-    return rect.right < boundary.x || rect.left > boundary.right || rect.bottom < boundary.y || rect.top > boundary.bottom;
+  function isOutsideBoundary(rects, boundary) {
+    for (let i = 0;i < rects.length; i++) {
+      const rect = rects[i];
+      if (rect.right >= boundary.x && rect.left <= boundary.right && rect.bottom >= boundary.y && rect.top <= boundary.bottom) {
+        return false;
+      }
+    }
+    return true;
   }
   function getAvailableHeight(referenceRect, side, boundary, distance, padding) {
     if (side === "top") {
@@ -1564,10 +1632,22 @@
         for (const [subscription, type] of notifications) {
           if (!subscriptions.has(subscription) || !subscription.floating.isConnected)
             continue;
-          subscription.callback({ type });
+          try {
+            subscription.callback({ type });
+          } catch (error) {
+            reportError(error);
+          }
         }
       });
     }
+    function reportError(error) {
+      if (typeof win.reportError === "function")
+        win.reportError(error);
+      else
+        win.setTimeout(() => {
+          throw error;
+        });
+    }
     function notifyAll(type) {
       for (const subscription of subscriptions)
         queue(subscription, type);
@@ -1658,28 +1738,32 @@
     return trackerFor(floating).add(reference, floating, callback);
   }
   function positionOnce(reference, floating, options) {
+    const placement = options.placement === undefined ? "bottom-start" : options.placement;
+    let { side, align, crossAxis } = parsePlacement(placement);
+    const coordinateSpace = options.coordinateSpace === undefined ? "viewport" : options.coordinateSpace;
+    if (!COORDINATE_SPACES.has(coordinateSpace)) {
+      throw new TypeError(`Unknown coordinateSpace: ${coordinateSpace}`);
+    }
     if (!isVisible(floating))
       return null;
-    const placement = options.placement || "bottom-start";
     const distance = options.distance || 0;
     const flip = options.flip !== false;
     const shift = options.shift !== false;
     const shiftPadding = options.shiftPadding ?? 4;
-    let { side, align, crossAxis } = parsePlacement(placement);
     const rtl = align ? isRTL(reference) : false;
     const rects = reference.getClientRects();
-    const referenceRect = side === "bottom" ? rects[rects.length - 1] : rects[0];
-    if (!referenceRect)
+    if (!rects.length)
       return null;
+    const rectFor = (s) => s === "bottom" ? rects[rects.length - 1] : rects[0];
     const boundary = getBoundary(reference, options);
-    if (!boundary || isOutsideBoundary(referenceRect, boundary))
+    if (!boundary || isOutsideBoundary(rects, boundary))
       return null;
     const floatingRect = getFloatingSize(floating);
     const limits = {
       x: { size: floatingRect.width, start: boundary.x, end: boundary.right },
       y: { size: floatingRect.height, start: boundary.y, end: boundary.bottom }
     };
-    const place = (nextSide, nextAlign) => computeCoords(referenceRect, floatingRect, nextSide, nextAlign, rtl, distance);
+    const place = (nextSide, nextAlign) => computeCoords(rectFor(nextSide), floatingRect, nextSide, nextAlign, rtl, distance);
     const overflowAt = (position, axis) => {
       const { size, start, end } = limits[axis];
       return overflowOn(position, size, start + shiftPadding, end - shiftPadding);
@@ -1689,31 +1773,30 @@
       return overflowAt(shift ? clampToBoundary(position, size, start, end, shiftPadding) : position, axis);
     };
     let coords = place(side, align);
+    const overflowFor = (nextSide, at) => {
+      const cross = crossAxisFor(nextSide);
+      const main = cross === "x" ? "y" : "x";
+      const mainOverflow = overflowAt(at[main], main);
+      return { main: mainOverflow, total: mainOverflow + shiftedOverflowAt(at[cross], cross) };
+    };
     if (flip) {
-      const mainAxis = crossAxis === "x" ? "y" : "x";
-      let overflow = overflowAt(coords[mainAxis], mainAxis);
-      if (overflow > 0) {
-        const opposite = flipSide(side);
-        const flipped = place(opposite, align);
-        const flippedOverflow = overflowAt(flipped[mainAxis], mainAxis);
-        if (flippedOverflow < overflow) {
-          side = opposite;
-          coords = flipped;
-          overflow = flippedOverflow;
-        }
-      }
-      if (mainAxis === "x" && overflow > 0) {
-        const above = place("top", align);
-        const below = place("bottom", align);
-        const useBottom = overflowAt(below.y, "y") < overflowAt(above.y, "y");
-        const candidate = useBottom ? below : above;
-        const swapped = overflowAt(candidate.y, "y") + shiftedOverflowAt(candidate.x, "x");
-        if (swapped < overflow + shiftedOverflowAt(coords.y, "y")) {
-          side = useBottom ? "bottom" : "top";
-          crossAxis = "x";
-          coords = candidate;
+      let best = overflowFor(side, coords);
+      const consider = (nextSide) => {
+        const next = place(nextSide, align);
+        const overflow = overflowFor(nextSide, next);
+        if (overflow.total < best.total) {
+          side = nextSide;
+          coords = next;
+          best = overflow;
         }
+      };
+      if (best.main > 0)
+        consider(OPPOSITE[side]);
+      if (crossAxis === "y" && best.main > 0) {
+        consider("top");
+        consider("bottom");
       }
+      crossAxis = crossAxisFor(side);
     }
     if (crossAxis === "x" && shift && align) {
       const overflow = overflowAt(coords.x, "x");
@@ -1730,12 +1813,13 @@
       const { size, start, end } = limits[crossAxis];
       coords[crossAxis] = clampToBoundary(coords[crossAxis], size, start, end, shiftPadding);
     }
-    const arrowX = arrowPercent(referenceRect.x + referenceRect.width / 2, coords.x, floatingRect.width);
-    const arrowY = arrowPercent(referenceRect.y + referenceRect.height / 2, coords.y, floatingRect.height);
-    const availableHeight = `${getAvailableHeight(referenceRect, side, boundary, distance, shiftPadding)}px`;
+    const resolvedRect = rectFor(side);
+    const arrowX = arrowPercent(resolvedRect.x + resolvedRect.width / 2, coords.x, floatingRect.width);
+    const arrowY = arrowPercent(resolvedRect.y + resolvedRect.height / 2, coords.y, floatingRect.height);
+    const availableHeight = `${getAvailableHeight(resolvedRect, side, boundary, distance, shiftPadding)}px`;
     const { style } = floating;
     const roomChanged = style.getPropertyValue("--available-height") !== availableHeight;
-    const win = options.coordinateSpace === "document" ? reference.ownerDocument.defaultView : null;
+    const win = coordinateSpace === "document" ? reference.ownerDocument.defaultView : null;
     const originX = win ? win.scrollX : 0;
     const originY = win ? win.scrollY : 0;
     style.left = `${coords.x + originX}px`;
@@ -1863,7 +1947,7 @@
         input.setCustomValidity("");
         return;
       }
-      input.setCustomValidity(text === canonical ? "" : this.messages.invalidDate);
+      input.setCustomValidity(this.messages.invalidDate);
     }
     async commit(options = {}) {
       const input = this.input;
@@ -1993,6 +2077,7 @@
       this._open = false;
       this._suppressFocusOpen = false;
       this._messages = getDefaultMessages();
+      this._controlClasses = getDefaultControlClasses();
       this._source = null;
       this._dateState = null;
       this._renderDay = null;
@@ -2247,6 +2332,17 @@
     get open() {
       return this._open;
     }
+    get controlClasses() {
+      return { ...this._controlClasses };
+    }
+    set controlClasses(value) {
+      const classes = resolveControlClasses(value);
+      if (sameControlClasses(classes, this._controlClasses))
+        return;
+      this._controlClasses = classes;
+      if (this._calendar)
+        this._calendar.controlClasses = this._controlClasses;
+    }
     get messages() {
       return this._messages;
     }
@@ -2410,6 +2506,23 @@
       this._refreshLocale();
       this._refreshButtonLabel();
     }
+    _bindPopup(signal, input, restore) {
+      this.ownerDocument.addEventListener("pointerdown", (event) => {
+        if (!this._open || event.composedPath().includes(this))
+          return;
+        this.hide(false);
+      }, { capture: true, signal });
+      this.ownerDocument.addEventListener("reset", (event) => {
+        if (!(event.target instanceof HTMLFormElement) || !input || event.target !== input.form)
+          return;
+        this.hide(false);
+        queueMicrotask(() => {
+          if (!event.defaultPrevented)
+            restore();
+        });
+      }, { capture: true, signal });
+      this.addEventListener("keydown", (event) => this._onEscape(event), { signal });
+    }
     _bind() {
       const input = this._input;
       const button = this._buttons[0]?.button;
@@ -2472,22 +2585,7 @@
         });
       }, { signal });
       calendar.addEventListener("dateloadend", () => void this.validate(), { signal });
-      this.ownerDocument.addEventListener("pointerdown", (event) => {
-        if (!this._open || event.composedPath().includes(this))
-          return;
-        this.hide(false);
-      }, { capture: true, signal });
-      this.ownerDocument.addEventListener("reset", (event) => {
-        const form = event.target;
-        if (form instanceof HTMLFormElement && this._input && form === this._input.form) {
-          this.hide(false);
-          queueMicrotask(() => {
-            if (!event.defaultPrevented)
-              this._restoreDefault();
-          });
-        }
-      }, { capture: true, signal });
-      this.addEventListener("keydown", (event) => this._onEscape(event), { signal });
+      this._bindPopup(signal, this._input, () => this._restoreDefault());
     }
     _bindRange() {
       const calendar = this._calendar;
@@ -2567,22 +2665,7 @@
       calendar.addEventListener("pointercancel", (event) => this._onGridPointerCancel(event), { signal });
       calendar.addEventListener("lostpointercapture", (event) => this._onGridPointerCancel(event), { signal });
       calendar.addEventListener("dateloadend", () => void this.validate(), { signal });
-      this.ownerDocument.addEventListener("pointerdown", (event) => {
-        if (!this._open || event.composedPath().includes(this))
-          return;
-        this.hide(false);
-      }, { capture: true, signal });
-      this.ownerDocument.addEventListener("reset", (event) => {
-        const form = event.target;
-        if (form instanceof HTMLFormElement && this._fields && form === this._fields[0].input.form) {
-          this.hide(false);
-          queueMicrotask(() => {
-            if (!event.defaultPrevented)
-              this._restoreRangeDefault();
-          });
-        }
-      }, { capture: true, signal });
-      this.addEventListener("keydown", (event) => this._onEscape(event), { signal });
+      this._bindPopup(signal, this._fields?.[0]?.input, () => this._restoreRangeDefault());
     }
     _activateRangeEndpoint(endpoint) {
       const calendar = this._calendar;
@@ -2879,6 +2962,7 @@
       calendar.min = this.min;
       calendar.max = this.max;
       calendar.monthFormat = this.monthFormat;
+      calendar.controlClasses = this._controlClasses;
       calendar.messages = this._messages;
       calendar.source = this._source;
       calendar.dateState = this._dateState;