@lekoala/date-picker 0.4.0 → 0.5.1

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.1 - 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,53 @@
     }
   }
 
+  // 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 normalizeControlClasses(classes) {
+    if (classes == null)
+      return null;
+    const result = {};
+    for (const role of ["month", "year", "nav"]) {
+      if (Object.hasOwn(classes, role))
+        result[role] = normalizeControlClass(classes[role]);
+    }
+    return result;
+  }
+  function usesDefaultControlClasses(classes) {
+    return classes == null || ["month", "year", "nav"].some((role) => !Object.hasOwn(classes, role));
+  }
+  function resolveControlClasses(classes) {
+    return { ...getDefaultControlClasses(), ...normalizeControlClasses(classes) };
+  }
+  function setDefaultControlClasses(classes) {
+    const next = resolveControlClasses(classes);
+    if (sameControlClasses(defaults, next))
+      return;
+    defaults = next;
+    for (const listener of listeners)
+      listener();
+  }
+  var listeners = new Set;
+  function subscribeDefaultControlClasses(listener) {
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  }
+
   // src/date-range.js
   function normalizeRange(range) {
     if (range == null)
@@ -480,6 +529,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 +556,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 +574,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 +585,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 +595,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 +620,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 +643,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 +722,21 @@
     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 };
+  }
+  function setDefaultMessages(messages) {
+    defaults2 = { ...defaults2, ...messages };
+    for (const listener of listeners2)
+      listener();
+  }
+  var listeners2 = new Set;
+  function subscribeDefaultMessages(listener) {
+    listeners2.add(listener);
+    return () => {
+      listeners2.delete(listener);
+    };
   }
 
   // src/source.js
@@ -680,6 +760,17 @@
     return map;
   }
 
+  // src/upgrade-properties.js
+  function upgradeProperties(element, properties) {
+    for (const property of properties) {
+      if (!Object.hasOwn(element, property))
+        continue;
+      const value = Reflect.get(element, property);
+      Reflect.deleteProperty(element, property);
+      Reflect.set(element, property, value);
+    }
+  }
+
   // src/date-calendar.js
   var uid = 0;
   function escapeHtml(value) {
@@ -738,6 +829,18 @@
       "selection",
       "month-format"
     ];
+    static setDefaultControlClasses(classes) {
+      setDefaultControlClasses(classes);
+    }
+    static getDefaultControlClasses() {
+      return getDefaultControlClasses();
+    }
+    static setDefaultMessages(messages) {
+      setDefaultMessages(messages);
+    }
+    static getDefaultMessages() {
+      return getDefaultMessages();
+    }
     constructor() {
       super();
       this._id = `date-calendar-${++uid}`;
@@ -756,7 +859,11 @@
       this._highlightedRange = { start: "", end: "" };
       this._paintedRange = { start: "", end: "" };
       this._paintedPreview = false;
-      this._messages = getDefaultMessages();
+      this._renderedStates = new Map;
+      this._messages = null;
+      this._controlClasses = null;
+      this._stopDefaultMessages = null;
+      this._stopDefaultControlClasses = null;
       this._onClick = this._onClick.bind(this);
       this._onChange = this._onChange.bind(this);
       this._onKeyDown = this._onKeyDown.bind(this);
@@ -765,15 +872,47 @@
     connectedCallback() {
       if (this._connected)
         return;
+      upgradeProperties(this, [
+        "locale",
+        "min",
+        "max",
+        "firstDay",
+        "selection",
+        "monthFormat",
+        "fixedWeeks",
+        "showWeekNumbers",
+        "controlClasses",
+        "messages",
+        "source",
+        "dateState",
+        "renderDay",
+        "isDateDisabled",
+        "highlightedRange",
+        "value",
+        "display"
+      ]);
+      this._syncModel();
+      upgradeProperties(this, ["focusedDate"]);
+      this._stopDefaultControlClasses = subscribeDefaultControlClasses(() => {
+        if (usesDefaultControlClasses(this._controlClasses))
+          this.render();
+      });
+      this._stopDefaultMessages = subscribeDefaultMessages(() => {
+        if (this._messages === null)
+          this.render();
+      });
       this._connected = true;
       this.addEventListener("click", this._onClick);
       this.addEventListener("change", this._onChange);
       this.addEventListener("keydown", this._onKeyDown);
       this.addEventListener("focusin", this._onFocusIn);
-      this._syncModel();
       this.render();
     }
     disconnectedCallback() {
+      this._stopDefaultControlClasses?.();
+      this._stopDefaultControlClasses = null;
+      this._stopDefaultMessages?.();
+      this._stopDefaultMessages = null;
       this._connected = false;
       this._loadController?.abort();
       this._loadController = null;
@@ -893,11 +1032,22 @@
     set showWeekNumbers(value) {
       this.toggleAttribute("show-week-numbers", Boolean(value));
     }
+    get controlClasses() {
+      return resolveControlClasses(this._controlClasses);
+    }
+    set controlClasses(value) {
+      const previous = this.controlClasses;
+      this._controlClasses = normalizeControlClasses(value);
+      if (sameControlClasses(previous, this.controlClasses))
+        return;
+      if (this._connected)
+        this.render();
+    }
     get messages() {
-      return this._messages;
+      return this._messages ?? getDefaultMessages();
     }
     set messages(value) {
-      this._messages = { ...getDefaultMessages(), ...value || {} };
+      this._messages = value == null ? null : { ...getDefaultMessages(), ...value };
       if (this._connected)
         this.render();
     }
@@ -973,18 +1123,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) {
@@ -1166,11 +1308,13 @@
       return [
         formatLongDate(date, this.locale),
         description,
-        rangeLabel ? this._messages[rangeLabel] : "",
-        state.disabled ? this._messages.unavailable : ""
+        rangeLabel ? this.messages[rangeLabel] : "",
+        state.disabled ? this.messages.unavailable : ""
       ].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 +1322,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() {
@@ -1339,7 +1490,7 @@
       const minYearAttr = this.min ? ` min="${Number(this.min.slice(0, 4))}"` : "";
       const maxYearAttr = this.max ? ` max="${Number(this.max.slice(0, 4))}"` : "";
       const showWeeks = this.showWeekNumbers && this.firstDay === 1;
-      const weekHeader = showWeeks ? `<th scope="col" class="dp-week-heading" abbr="${escapeHtml(this._messages.week)}">#</th>` : "";
+      const weekHeader = showWeeks ? `<th scope="col" class="dp-week-heading" abbr="${escapeHtml(this.messages.week)}">#</th>` : "";
       const monthOptions = names.map((name, index) => {
         const month = index + 1;
         const key = `${String(displayYear).padStart(4, "0")}-${String(month).padStart(2, "0")}`;
@@ -1347,10 +1498,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 +1518,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 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>`;
-      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)}">`;
+      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 ${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 ${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 +1563,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 +1579,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 +1619,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 +1662,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 +1724,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 +1830,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 +1865,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 +1905,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 +2039,7 @@
         input.setCustomValidity("");
         return;
       }
-      input.setCustomValidity(text === canonical ? "" : this.messages.invalidDate);
+      input.setCustomValidity(this.messages.invalidDate);
     }
     async commit(options = {}) {
       const input = this.input;
@@ -1961,6 +2137,18 @@
 
   class DatePickerElement extends HTMLElement {
     static observedAttributes = ["value", "locale", "min", "max", "open-on-focus", "month-format"];
+    static setDefaultControlClasses(classes) {
+      setDefaultControlClasses(classes);
+    }
+    static getDefaultControlClasses() {
+      return getDefaultControlClasses();
+    }
+    static setDefaultMessages(messages) {
+      setDefaultMessages(messages);
+    }
+    static getDefaultMessages() {
+      return getDefaultMessages();
+    }
     constructor() {
       super();
       this._id = `date-picker-${++uid2}`;
@@ -1992,7 +2180,9 @@
       this._stopTracking = null;
       this._open = false;
       this._suppressFocusOpen = false;
-      this._messages = getDefaultMessages();
+      this._messages = null;
+      this._controlClasses = null;
+      this._stopDefaultMessages = null;
       this._source = null;
       this._dateState = null;
       this._renderDay = null;
@@ -2005,11 +2195,31 @@
     connectedCallback() {
       if (this._connected)
         return;
-      if (this.hasAttribute("range")) {
+      upgradeProperties(this, [
+        "locale",
+        "min",
+        "max",
+        "monthFormat",
+        "openOnFocus",
+        "coordinateSpace",
+        "controlClasses",
+        "messages",
+        "source",
+        "dateState",
+        "renderDay",
+        "isDateDisabled"
+      ]);
+      if (this.hasAttribute("range"))
         this._connectRange();
-        return;
+      else
+        this._connectSingle();
+      if (this._connected) {
+        upgradeProperties(this, ["value", "range"]);
+        this._stopDefaultMessages = subscribeDefaultMessages(() => {
+          if (this._messages === null)
+            this._refreshMessages();
+        });
       }
-      this._connectSingle();
     }
     _connectSingle() {
       const input = this.querySelector(":scope > input:not([type=hidden]):not([type=time]):not([data-time-start]):not([data-time-end])");
@@ -2020,7 +2230,7 @@
       this._connected = true;
       this._input = input;
       this._discoverTimeFields();
-      this._field = new DateFieldController(input, { messages: this._messages, locale: this.locale });
+      this._field = new DateFieldController(input, { messages: this.messages, locale: this.locale });
       this._field.onAttributesChanged = () => this._syncInputState();
       this._field.confirm = (date, options) => this._confirmDate(date, options);
       this._setupFormValue();
@@ -2035,7 +2245,7 @@
       else if (!input.value)
         this._setValue("", { emit: false, format: false });
       else
-        input.setCustomValidity(this._messages.invalidDate);
+        input.setCustomValidity(this.messages.invalidDate);
       if (this._field.hidden)
         this._field.hidden.defaultValue = this._value;
       if (input.getAttribute("value") == null && input.defaultValue === "") {
@@ -2076,8 +2286,8 @@
       this._connected = true;
       this._input = null;
       this._fields = [
-        new DateFieldController(startInput, { messages: this._messages, locale: this.locale }),
-        new DateFieldController(endInput, { messages: this._messages, locale: this.locale })
+        new DateFieldController(startInput, { messages: this.messages, locale: this.locale }),
+        new DateFieldController(endInput, { messages: this.messages, locale: this.locale })
       ];
       this._range = new DateRangeController;
       this._rangeOriginalDescribedBy = [
@@ -2099,9 +2309,9 @@
       const initialEnd = isDate(endInput.value) ? endInput.value : adapter.parse(endInput.value);
       this._setRange(initialStart || "", initialEnd || "", { emit: false });
       if (startInput.value.trim() && !isDate(initialStart))
-        startInput.setCustomValidity(this._messages.invalidDate);
+        startInput.setCustomValidity(this.messages.invalidDate);
       if (endInput.value.trim() && !isDate(initialEnd))
-        endInput.setCustomValidity(this._messages.invalidDate);
+        endInput.setCustomValidity(this.messages.invalidDate);
       if (this._fields[0].hidden)
         this._fields[0].hidden.defaultValue = this._range.start;
       if (this._fields[1].hidden)
@@ -2114,6 +2324,8 @@
       }
     }
     disconnectedCallback() {
+      this._stopDefaultMessages?.();
+      this._stopDefaultMessages = null;
       this._connected = false;
       this.hide(false);
       this._controller?.abort();
@@ -2247,18 +2459,35 @@
     get open() {
       return this._open;
     }
+    get controlClasses() {
+      return resolveControlClasses(this._controlClasses);
+    }
+    set controlClasses(value) {
+      this._controlClasses = normalizeControlClasses(value);
+      if (this._calendar)
+        this._calendar.controlClasses = this._controlClasses;
+    }
     get messages() {
-      return this._messages;
+      return this._messages ?? getDefaultMessages();
     }
     set messages(value) {
-      this._messages = { ...getDefaultMessages(), ...value || {} };
+      this._messages = value == null ? null : { ...getDefaultMessages(), ...value };
       if (this._calendar)
         this._calendar.messages = this._messages;
+      this._refreshMessages();
+    }
+    _refreshMessages() {
+      const messages = this.messages;
       for (const field of this._fields || [])
-        field.setMessages(this._messages);
-      this._field?.setMessages(this._messages);
+        field.setMessages(messages);
+      this._field?.setMessages(messages);
+      this._panel?.setAttribute("aria-label", messages.calendar);
+      const field = this._field ?? this._fields?.[0];
+      if (this._formatHint && field)
+        this._formatHint.textContent = `${messages.formatHint}: ${field.placeholder}`;
       this._refreshButtonLabel();
-      this.validate();
+      if (this._connected)
+        this.validate();
     }
     get source() {
       return this._source;
@@ -2386,7 +2615,7 @@
       panel.className = "dp-picker-panel";
       panel.setAttribute("popover", "manual");
       panel.setAttribute("role", "dialog");
-      panel.setAttribute("aria-label", this._messages.calendar);
+      panel.setAttribute("aria-label", this.messages.calendar);
       const calendar = new DateCalendarElement;
       calendar.selection = "none";
       calendar.fixedWeeks = true;
@@ -2410,6 +2639,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 +2718,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 +2798,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 +3095,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;
@@ -2887,7 +3104,7 @@
       if (!this._rangeMode() && this._value)
         calendar.value = this._value;
       if (panel)
-        panel.setAttribute("aria-label", this._messages.calendar);
+        panel.setAttribute("aria-label", this.messages.calendar);
     }
     _refreshLocale() {
       const hint = this._formatHint;
@@ -2896,7 +3113,7 @@
       if (this._rangeMode() && this._fields) {
         this._fields[0].setLocale(this.locale);
         this._fields[1].setLocale(this.locale);
-        hint.textContent = `${this._messages.formatHint}: ${this._fields[0].placeholder}`;
+        hint.textContent = `${this.messages.formatHint}: ${this._fields[0].placeholder}`;
         for (const [index, field] of this._fields.entries()) {
           if (!field.input.hasAttribute("placeholder") || this._generatedPlaceholder) {
             field.input.placeholder = field.placeholder;
@@ -2913,7 +3130,7 @@
       if (!field)
         return;
       field.setLocale(this.locale);
-      hint.textContent = `${this._messages.formatHint}: ${field.placeholder}`;
+      hint.textContent = `${this.messages.formatHint}: ${field.placeholder}`;
       if (!field.input.hasAttribute("placeholder") || this._generatedPlaceholder) {
         field.input.placeholder = field.placeholder;
         this._generatedPlaceholder = true;
@@ -2930,7 +3147,7 @@
         this._refreshRangeButtonLabel();
         return;
       }
-      const prefix = this._value ? this._messages.changeDate : this._messages.chooseDate;
+      const prefix = this._value ? this.messages.changeDate : this.messages.chooseDate;
       const suffix = this._value ? `, ${formatLongDate(this._value, this.locale)}` : "";
       single.setAttribute("aria-label", `${prefix}${suffix}`);
     }
@@ -2940,9 +3157,9 @@
       const { start, end } = this._range;
       for (const { button, endpoint } of this._buttons) {
         const bound = endpoint === "end" ? end : start;
-        const prefix = bound ? this._messages.changeDate : this._messages.chooseDate;
+        const prefix = bound ? this.messages.changeDate : this.messages.chooseDate;
         const suffix = bound ? `, ${formatLongDate(bound, this.locale)}` : "";
-        const boundLabel = endpoint === "end" ? this._messages.rangeEnd : this._messages.rangeStart;
+        const boundLabel = endpoint === "end" ? this.messages.rangeEnd : this.messages.rangeStart;
         button.setAttribute("aria-label", `${prefix}${suffix}, ${boundLabel}`);
       }
     }
@@ -2989,7 +3206,7 @@
       const confirmed = await calendar.ensureDate(date);
       const state = calendar.getDateState(date);
       if (!confirmed || state.disabled)
-        return { ok: false, message: this._messages.unavailableDate };
+        return { ok: false, message: this.messages.unavailableDate };
       return { ok: true };
     }
     async _commitText(emit, options = {}) {
@@ -3105,7 +3322,7 @@
       for (const bound of bounds) {
         const index = bound === "end" ? 1 : 0;
         const input = this._fields[index].input;
-        const message = bound === "end" ? this._messages.rangeOrderEnd : this._messages.rangeOrderStart;
+        const message = bound === "end" ? this.messages.rangeOrderEnd : this.messages.rangeOrderStart;
         const shouldHaveOrder = inverted && bound === which;
         if (shouldHaveOrder) {
           input.setCustomValidity(message);
@@ -3127,7 +3344,7 @@
         const input = inputs[index];
         if (!input)
           continue;
-        const message = bound === "end" ? this._messages.rangeOrderEnd : this._messages.rangeOrderStart;
+        const message = bound === "end" ? this.messages.rangeOrderEnd : this.messages.rangeOrderStart;
         const shouldHaveOrder = inverted && bound === which;
         if (shouldHaveOrder) {
           input.setCustomValidity(message);