@lekoala/date-picker 0.4.0 → 0.5.1

package/src/date-picker.js

@@ -1,11 +1,18 @@
 import { autoUpdate, reposition } from "@lekoala/floating";
+import {
+  getDefaultControlClasses,
+  normalizeControlClasses,
+  resolveControlClasses,
+  setDefaultControlClasses,
+} from "./control-classes.js";
 import { compareDates, isDate, monthKey, todayISO } from "./date.js";
 import { DateCalendarElement } from "./date-calendar.js";
 import { DateFieldController } from "./date-field.js";
 import { DateRangeController, normalizeRange } from "./date-range.js";
 import { createDateAdapter, formatLongDate, resolveLocale } from "./intl.js";
-import { getDefaultMessages } from "./messages.js";
+import { getDefaultMessages, setDefaultMessages, subscribeDefaultMessages } from "./messages.js";
 import { compareTimes, isTime } from "./time.js";
+import { upgradeProperties } from "./upgrade-properties.js";
 
 let uid = 0;
 
@@ -15,6 +22,26 @@ const DRAG_THRESHOLD = 4;
 export class DatePickerElement extends HTMLElement {
   static observedAttributes = ["value", "locale", "min", "max", "open-on-focus", "month-format"];
 
+  /** @public @param {Partial<import("./control-classes.js").ControlClasses>} classes */
+  static setDefaultControlClasses(classes) {
+    setDefaultControlClasses(classes);
+  }
+
+  /** @public */
+  static getDefaultControlClasses() {
+    return getDefaultControlClasses();
+  }
+
+  /** @public @param {Partial<typeof import("./messages.js").DEFAULT_MESSAGES>} messages */
+  static setDefaultMessages(messages) {
+    setDefaultMessages(messages);
+  }
+
+  /** @public */
+  static getDefaultMessages() {
+    return getDefaultMessages();
+  }
+
   constructor() {
     super();
     this._id = `date-picker-${++uid}`;
@@ -62,7 +89,12 @@ export class DatePickerElement extends HTMLElement {
     this._stopTracking = null;
     this._open = false;
     this._suppressFocusOpen = false;
-    this._messages = getDefaultMessages();
+    /** @type {typeof import("./messages.js").DEFAULT_MESSAGES | null} */
+    this._messages = null;
+    /** @type {Partial<import("./control-classes.js").ControlClasses> | null} */
+    this._controlClasses = null;
+    /** @type {(() => void) | null} */
+    this._stopDefaultMessages = null;
     /** @type {any} */
     this._source = null;
     /** @type {any} */
@@ -81,11 +113,29 @@ export class DatePickerElement extends HTMLElement {
 
   connectedCallback() {
     if (this._connected) return;
-    if (this.hasAttribute("range")) {
-      this._connectRange();
-      return;
+    upgradeProperties(this, [
+      "locale",
+      "min",
+      "max",
+      "monthFormat",
+      "openOnFocus",
+      "coordinateSpace",
+      "controlClasses",
+      "messages",
+      "source",
+      "dateState",
+      "renderDay",
+      "isDateDisabled",
+    ]);
+    if (this.hasAttribute("range")) this._connectRange();
+    else this._connectSingle();
+    // The range setter requires the controller created by _connectRange().
+    if (this._connected) {
+      upgradeProperties(this, ["value", "range"]);
+      this._stopDefaultMessages = subscribeDefaultMessages(() => {
+        if (this._messages === null) this._refreshMessages();
+      });
     }
-    this._connectSingle();
   }
 
   _connectSingle() {
@@ -99,7 +149,7 @@ export class DatePickerElement extends HTMLElement {
     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();
@@ -113,7 +163,7 @@ export class DatePickerElement extends HTMLElement {
       this.getAttribute("value") || (isDate(input.value) ? input.value : adapter.parse(input.value));
     if (initial && isDate(initial)) this._setValue(initial, { emit: false, format: true });
     else if (!input.value) this._setValue("", { emit: false, format: false });
-    else input.setCustomValidity(this._messages.invalidDate);
+    else input.setCustomValidity(this.messages.invalidDate);
 
     // Native form reset restores control defaultValues, then _restoreDefault()
     // recommits the canonical value from them. Never redefine an author-provided
@@ -169,8 +219,8 @@ export class DatePickerElement extends HTMLElement {
     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 = [
@@ -193,8 +243,8 @@ export class DatePickerElement extends HTMLElement {
     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);
-    if (endInput.value.trim() && !isDate(initialEnd)) endInput.setCustomValidity(this._messages.invalidDate);
+      startInput.setCustomValidity(this.messages.invalidDate);
+    if (endInput.value.trim() && !isDate(initialEnd)) endInput.setCustomValidity(this.messages.invalidDate);
 
     if (this._fields[0].hidden) this._fields[0].hidden.defaultValue = this._range.start;
     if (this._fields[1].hidden) this._fields[1].hidden.defaultValue = this._range.end;
@@ -207,6 +257,8 @@ export class DatePickerElement extends HTMLElement {
   }
 
   disconnectedCallback() {
+    this._stopDefaultMessages?.();
+    this._stopDefaultMessages = null;
     this._connected = false;
     this.hide(false);
     this._controller?.abort();
@@ -353,18 +405,43 @@ export class DatePickerElement extends HTMLElement {
     return this._open;
   }
 
-  /** @public */
+  /**
+   * Author classes for header controls; omitted roles follow current global defaults.
+   * @public
+   * @returns {import("./control-classes.js").ControlClasses}
+   */
+  get controlClasses() {
+    return resolveControlClasses(this._controlClasses);
+  }
+
+  /** @param {Partial<import("./control-classes.js").ControlClasses> | null} value */
+  set controlClasses(value) {
+    this._controlClasses = normalizeControlClasses(value);
+    if (this._calendar) this._calendar.controlClasses = this._controlClasses;
+  }
+
+  /** @public @returns {typeof import("./messages.js").DEFAULT_MESSAGES} */
   get messages() {
-    return this._messages;
+    return this._messages ?? getDefaultMessages();
   }
 
+  /** @param {Partial<typeof import("./messages.js").DEFAULT_MESSAGES> | null} value */
   set messages(value) {
-    this._messages = { ...getDefaultMessages(), ...(value || {}) };
+    this._messages = value == null ? null : { ...getDefaultMessages(), ...value };
     if (this._calendar) this._calendar.messages = this._messages;
-    for (const field of this._fields || []) field.setMessages(this._messages);
-    this._field?.setMessages(this._messages);
+    this._refreshMessages();
+  }
+
+  _refreshMessages() {
+    const messages = this.messages;
+    for (const field of this._fields || []) 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();
-    void this.validate();
+    if (this._connected) void this.validate();
   }
 
   /** @public @returns {any} */
@@ -522,7 +599,7 @@ export class DatePickerElement extends HTMLElement {
     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";
@@ -553,6 +630,31 @@ export class DatePickerElement extends HTMLElement {
     this._refreshButtonLabel();
   }
 
+  /** @param {AbortSignal} signal @param {HTMLInputElement | null | undefined} input @param {() => void} restore */
+  _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;
+        // Reset is cancelable and runs before native values have been restored.
+        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;
@@ -641,30 +743,7 @@ export class DatePickerElement extends HTMLElement {
     // Re-check availability after a source load. validate() commits with
     // moveDisplay:false, so the visible month stays where the user navigated.
     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) {
-          // The reset event fires before the control values are restored and
-          // is cancelable; only resync when the reset actually applies.
-          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() {
@@ -772,28 +851,7 @@ export class DatePickerElement extends HTMLElement {
     // Re-check availability after a source load. validate() commits with
     // moveDisplay:false, so the visible month stays where the user navigated.
     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());
   }
 
   /**
@@ -1177,13 +1235,14 @@ export class DatePickerElement extends HTMLElement {
     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;
     calendar.renderDay = this._renderDay;
     calendar.isDateDisabled = this._isDateDisabled;
     if (!this._rangeMode() && this._value) calendar.value = this._value;
-    if (panel) panel.setAttribute("aria-label", this._messages.calendar);
+    if (panel) panel.setAttribute("aria-label", this.messages.calendar);
   }
 
   _refreshLocale() {
@@ -1192,7 +1251,7 @@ export class DatePickerElement extends HTMLElement {
     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;
@@ -1207,7 +1266,7 @@ export class DatePickerElement extends HTMLElement {
     const field = this._field;
     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;
@@ -1223,7 +1282,7 @@ export class DatePickerElement extends HTMLElement {
       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}`);
   }
@@ -1235,9 +1294,9 @@ export class DatePickerElement extends HTMLElement {
     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}`);
     }
   }
@@ -1293,7 +1352,7 @@ export class DatePickerElement extends HTMLElement {
     }
     const confirmed = await calendar.ensureDate(date);
     const state = calendar.getDateState(date);
-    if (!confirmed || state.disabled) return { ok: false, message: this._messages.unavailableDate };
+    if (!confirmed || state.disabled) return { ok: false, message: this.messages.unavailableDate };
     return { ok: true };
   }
 
@@ -1424,7 +1483,7 @@ export class DatePickerElement extends HTMLElement {
     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);
@@ -1460,7 +1519,7 @@ export class DatePickerElement extends HTMLElement {
     for (const [index, bound] of bounds.entries()) {
       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);

package/src/date.js

@@ -165,9 +165,10 @@ export function endOfWeek(value, firstDay = 1) {
 }
 
 /**
- * True civil weeks covering the anchor month: 4..6 full rows, never padded.
+ * Civil weeks covering the anchor month: 4..6 full rows. Optional fixed weeks
+ * pads to six rows when a full extra week fits inside the canonical window.
  * @param {string} value YYYY-MM or YYYY-MM-DD
- * @param {{firstDay?: number}} [options]
+ * @param {{firstDay?: number, fixedWeeks?: boolean}} [options]
  */
 export function getMonthWeeks(value, options = {}) {
   const firstDay = options.firstDay ?? 1;
@@ -183,7 +184,11 @@ export function getMonthWeeks(value, options = {}) {
     // Stop from the built week's own end: advancing the cursor past the final
     // week (e.g. from 9999-12-25 to 10000-01-01) would leave the canonical
     // window even when every emitted day is valid.
-    if (compareDates(week[6], end) >= 0) break;
+    if (compareDates(week[6], end) >= 0) {
+      // Another complete week must fit before the last canonical date.
+      if (!options.fixedWeeks || weeks.length >= 6 || compareDates(week[6], addDays("9999-12-31", -7)) > 0)
+        break;
+    }
     cursor = addDays(cursor, 7);
   }
   return weeks;

package/src/index.js

@@ -1,4 +1,5 @@
 export { CalendarModel } from "./calendar-model.js";
+export { getDefaultControlClasses, setDefaultControlClasses } from "./control-classes.js";
 export * as dates from "./date.js";
 export { DateCalendarElement } from "./date-calendar.js";
 export { DatePickerElement } from "./date-picker.js";

package/src/intl.js

@@ -2,6 +2,33 @@ import { isDate, normalizeFirstDay, parseDate, toIntlDate, toISODate } from "./d
 
 const BIDI = /[\u200e\u200f\u061c\u202a-\u202e\u2066-\u2069]/g;
 
+/** @type {Map<string, Intl.DateTimeFormat>} */
+const dateFormatters = new Map();
+/** @type {Map<string, Map<string, string>>} */
+const digitMaps = new Map();
+
+/**
+ * Bound retained locales/options even when an application cycles through many.
+ * @template T
+ * @param {Map<string, T>} cache @param {string} key @param {() => T} create
+ * @returns {T}
+ */
+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;
+}
+
+/** @param {string} locale @param {Intl.DateTimeFormatOptions} options */
+function dateFormatter(locale, options) {
+  const key = JSON.stringify([locale, options]);
+  return cached(dateFormatters, key, () => new Intl.DateTimeFormat(locale, options));
+}
+
 /** @param {string} [locale] */
 export function resolveLocale(locale = "") {
   if (locale) return locale;
@@ -12,10 +39,12 @@ export function resolveLocale(locale = "") {
 
 /** @param {string} locale */
 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;
+  });
 }
 
 /**
@@ -33,7 +62,7 @@ function normalizeDigits(text, locale, options = {}) {
 /** @param {string} value @param {string} [locale] */
 export function formatLongDate(value, locale = "") {
   const resolved = resolveLocale(locale);
-  return new Intl.DateTimeFormat(resolved, {
+  return dateFormatter(resolved, {
     calendar: "gregory",
     weekday: "long",
     year: "numeric",
@@ -46,7 +75,7 @@ export function formatLongDate(value, locale = "") {
 /** @param {string} value @param {string} [locale] */
 export function formatMonthYear(value, locale = "") {
   const resolved = resolveLocale(locale);
-  return new Intl.DateTimeFormat(resolved, {
+  return dateFormatter(resolved, {
     calendar: "gregory",
     year: "numeric",
     month: "long",
@@ -65,7 +94,7 @@ export function formatMonthYear(value, locale = "") {
 export function monthYearOrder(locale = "") {
   const resolved = resolveLocale(locale);
   try {
-    const parts = new Intl.DateTimeFormat(resolved, {
+    const parts = dateFormatter(resolved, {
       calendar: "gregory",
       year: "numeric",
       month: "long",
@@ -92,7 +121,7 @@ export function monthYearOrder(locale = "") {
 /** @param {string} [locale] @param {"long"|"short"} [style] */
 export 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`)),
   );
@@ -105,7 +134,7 @@ export function monthNames(locale = "", style = "long") {
  */
 export 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",
@@ -131,7 +160,7 @@ function escapeRegExp(value) {
  */
 export function createDateAdapter(locale = "") {
   const resolved = resolveLocale(locale);
-  const formatter = new Intl.DateTimeFormat(resolved, {
+  const formatter = dateFormatter(resolved, {
     calendar: "gregory",
     year: "numeric",
     month: "2-digit",

package/src/messages.js

@@ -28,4 +28,16 @@ export function getDefaultMessages() {
 /** @param {Partial<typeof DEFAULT_MESSAGES>} messages */
 export function setDefaultMessages(messages) {
   defaults = { ...defaults, ...messages };
+  for (const listener of listeners) listener();
+}
+
+/** @type {Set<() => void>} */
+const listeners = new Set();
+
+/** @param {() => void} listener */
+export function subscribeDefaultMessages(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
 }

package/src/source.js

@@ -28,17 +28,27 @@ export function normalizeDateStates(payload) {
 
 /**
  * Small fetch adapter for legacy/configUrl-like endpoints.
+ * Resolve and validate the URL immediately against the document or worker location.
  * @param {string | URL} url
  * @param {{map?:(payload:unknown)=>unknown, params?:(range:{start:string,end:string})=>Record<string,string>}} [options]
  */
 export function createFetchSource(url, options = {}) {
+  const base = typeof document !== "undefined" ? document.baseURI : globalThis.location?.href;
+  let resolved;
+  try {
+    resolved = new URL(String(url), base);
+  } catch (cause) {
+    throw new TypeError(
+      base
+        ? `Invalid date source URL: ${url}`
+        : "Date source: absolute URL required outside a document or worker location",
+      { cause },
+    );
+  }
   return {
     /** @param {{start:string,end:string}} range @param {{signal?:AbortSignal}} [context] */
     async load(range, context = {}) {
-      const target = new URL(
-        String(url),
-        typeof document !== "undefined" ? document.baseURI : "http://localhost/",
-      );
+      const target = new URL(resolved);
       const params = options.params ? options.params(range) : range;
       for (const [key, value] of Object.entries(params)) target.searchParams.set(key, String(value));
       const response = await fetch(target, { signal: context.signal });

package/src/upgrade-properties.js

@@ -0,0 +1,14 @@
+/**
+ * Replay properties assigned before custom-element definition through their setters.
+ * Call only once the element is ready to accept the listed properties.
+ * @param {HTMLElement} element
+ * @param {string[]} properties
+ */
+export 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);
+  }
+}