@lekoala/date-picker 0.4.0 → 0.5.0

package/src/date-calendar.js

@@ -1,4 +1,5 @@
 import { CalendarModel } from "./calendar-model.js";
+import { getDefaultControlClasses, resolveControlClasses, sameControlClasses } from "./control-classes.js";
 import {
   addDays,
   clampDate,
@@ -155,7 +156,10 @@ export class DateCalendarElement extends HTMLElement {
     /** @type {DateRange} */
     this._paintedRange = { start: "", end: "" };
     this._paintedPreview = false;
+    /** @type {Map<string, DateState>} States of the current rendered grid. */
+    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);
@@ -323,6 +327,23 @@ export class DateCalendarElement extends HTMLElement {
     this.toggleAttribute("show-week-numbers", Boolean(value));
   }
 
+  /**
+   * Author classes for header controls; merged with global defaults.
+   * @public
+   * @returns {import("./control-classes.js").ControlClasses}
+   */
+  get controlClasses() {
+    return { ...this._controlClasses };
+  }
+
+  /** @param {Partial<import("./control-classes.js").ControlClasses> | null} value */
+  set controlClasses(value) {
+    const classes = resolveControlClasses(value);
+    if (sameControlClasses(classes, this._controlClasses)) return;
+    this._controlClasses = classes;
+    if (this._connected) this.render();
+  }
+
   /** @public */
   get messages() {
     return this._messages;
@@ -420,16 +441,10 @@ export class DateCalendarElement extends HTMLElement {
   }
 
   _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,
+    });
   }
 
   /** @param {HTMLElement} element @returns {string} */
@@ -647,17 +662,27 @@ export class DateCalendarElement extends HTMLElement {
    * hover of a live range preview.
    */
   _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]")) {
       if (!(cell instanceof HTMLTableCellElement)) 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));
+      // A moving preview changes only the band. Its accessible labels always
+      // omit range roles; entering/leaving preview still updates those labels.
+      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);
+      }
     }
   }
 
@@ -847,6 +872,7 @@ export class DateCalendarElement extends HTMLElement {
       )
       .join("");
 
+    this._renderedStates.clear();
     const rows = weeks
       .map((week) => {
         const weekNumber = showWeeks
@@ -855,6 +881,7 @@ export class DateCalendarElement extends HTMLElement {
         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;
@@ -879,10 +906,14 @@ export class DateCalendarElement extends HTMLElement {
     // select via `data-year-first`.
     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 = `
@@ -890,8 +921,8 @@ export class DateCalendarElement extends HTMLElement {
         <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}">
@@ -925,7 +956,7 @@ export class DateCalendarElement extends HTMLElement {
         const date = cell.dataset.date || "";
         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) extra.textContent = String(content);
       }

package/src/date-field.js

@@ -138,7 +138,7 @@ export class DateFieldController {
       input.setCustomValidity("");
       return;
     }
-    input.setCustomValidity(text === canonical ? "" : this.messages.invalidDate);
+    input.setCustomValidity(this.messages.invalidDate);
   }
 
   /**

package/src/date-picker.css

@@ -46,7 +46,7 @@ date-calendar {
 
 .dp-calendar-header {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto auto auto;
+  grid-template-columns: minmax(0, 1fr) var(--dp-year-inline-size) auto auto;
   /* Stretch (not center): once a UA natural height exceeds
      --dp-header-control-size, the row grows to the tallest control and the
      others stretch to match, so month/year/nav stay equal. */
@@ -62,12 +62,16 @@ date-calendar {
    track stays under the month select so the fixed-width year input never
    stretches. Visual mirroring itself is left to the inherited `dir`. */
 date-calendar[data-year-first] .dp-calendar-header {
-  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  grid-template-columns: var(--dp-year-inline-size) minmax(0, 1fr) auto auto;
 }
 
 .dp-calendar-header :where(button, select, input) {
-  min-block-size: var(--dp-header-control-size);
   box-sizing: border-box;
+  min-inline-size: 0;
+}
+
+.dp-calendar-header .dp-skin {
+  min-block-size: var(--dp-header-control-size);
   /* Shared vertical metrics: UA default padding/line-height differ per control
      (up to ~13px apart), which only shows once --dp-header-control-size drops
      below content size. */
@@ -80,8 +84,7 @@ date-calendar[data-year-first] .dp-calendar-header {
   line-height: 1.2;
 }
 
-.dp-calendar-header input {
-  min-inline-size: 0;
+.dp-calendar-header input.dp-skin {
   padding-inline: 0.45rem;
 }
 
@@ -91,11 +94,13 @@ date-calendar[data-year-first] .dp-calendar-header {
    control and the others stretch to match. */
 .dp-month-select {
   inline-size: 100%;
-  min-inline-size: 0;
   /* Long month names in a narrow track (compact consumers, long locales)
      would paint under the caret: truncate with an ellipsis instead. */
   overflow: hidden;
   text-overflow: ellipsis;
+}
+
+.dp-month-select.dp-skin {
   appearance: none;
   padding-inline: 0.45rem 2rem;
   background-image:
@@ -111,18 +116,18 @@ date-calendar[data-year-first] .dp-calendar-header {
 /* Inherited RTL mirrors the header layout via the grid. The logical
    `padding-inline` already flips, so only the physically-positioned caret has
    to follow it to the other side. */
-[dir="rtl"] .dp-month-select,
-html[dir="rtl"] .dp-month-select {
+[dir="rtl"] .dp-month-select.dp-skin,
+html[dir="rtl"] .dp-month-select.dp-skin {
   background-position:
     0.9rem 50%,
     0.65rem 50%;
 }
 
 .dp-year-input {
-  inline-size: var(--dp-year-inline-size);
+  inline-size: 100%;
 }
 
-.dp-nav {
+.dp-nav.dp-skin {
   display: grid;
   place-items: center;
   inline-size: var(--dp-header-control-size);
@@ -139,19 +144,19 @@ html[dir="rtl"] .dp-month-select {
   pointer-events: none;
 }
 
-.dp-calendar-header :where(button, select, input):disabled,
+.dp-calendar-header .dp-skin:disabled,
 .dp-picker-button:disabled {
   cursor: not-allowed;
   opacity: 0.45;
 }
 
-.dp-nav:hover:not(:disabled) {
+.dp-nav.dp-skin:hover:not(:disabled) {
   background: var(--dp-hover);
 }
 
 /* Inner outlines survive forced colors and keep focus inside each control.
    The picker trigger uses a tighter inset around its icon below. */
-.dp-calendar-header :where(button, select, input):focus-visible,
+.dp-calendar-header .dp-skin:focus-visible,
 date-picker > input:not([type="hidden"]):focus-visible,
 .dp-day:focus-visible {
   outline: var(--dp-focus-width) solid var(--dp-focus);
@@ -446,8 +451,8 @@ date-picker[range] > .dp-picker-button[data-endpoint="end"] {
 @media (forced-colors: active) {
   /* The author-drawn caret is a gradient and disappears here: hand the
      control back to the browser instead of trying to rebuild it. */
-  .dp-month-select,
-  [dir="rtl"] .dp-month-select {
+  .dp-month-select.dp-skin,
+  [dir="rtl"] .dp-month-select.dp-skin {
     appearance: auto;
     background-image: none;
     padding-inline: 0.45rem;

package/src/date-picker.js

@@ -1,4 +1,5 @@
 import { autoUpdate, reposition } from "@lekoala/floating";
+import { getDefaultControlClasses, resolveControlClasses, sameControlClasses } from "./control-classes.js";
 import { compareDates, isDate, monthKey, todayISO } from "./date.js";
 import { DateCalendarElement } from "./date-calendar.js";
 import { DateFieldController } from "./date-field.js";
@@ -63,6 +64,7 @@ export class DatePickerElement extends HTMLElement {
     this._open = false;
     this._suppressFocusOpen = false;
     this._messages = getDefaultMessages();
+    this._controlClasses = getDefaultControlClasses();
     /** @type {any} */
     this._source = null;
     /** @type {any} */
@@ -353,6 +355,23 @@ export class DatePickerElement extends HTMLElement {
     return this._open;
   }
 
+  /**
+   * Author classes for header controls; merged with global defaults.
+   * @public
+   * @returns {import("./control-classes.js").ControlClasses}
+   */
+  get controlClasses() {
+    return { ...this._controlClasses };
+  }
+
+  /** @param {Partial<import("./control-classes.js").ControlClasses> | null} value */
+  set controlClasses(value) {
+    const classes = resolveControlClasses(value);
+    if (sameControlClasses(classes, this._controlClasses)) return;
+    this._controlClasses = classes;
+    if (this._calendar) this._calendar.controlClasses = this._controlClasses;
+  }
+
   /** @public */
   get messages() {
     return this._messages;
@@ -553,6 +572,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 +685,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 +793,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,6 +1177,7 @@ 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;

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/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 });