@lekoala/date-picker 0.4.0 → 0.5.1

package/src/date-calendar.js

@@ -1,4 +1,13 @@
 import { CalendarModel } from "./calendar-model.js";
+import {
+  getDefaultControlClasses,
+  normalizeControlClasses,
+  resolveControlClasses,
+  sameControlClasses,
+  setDefaultControlClasses,
+  subscribeDefaultControlClasses,
+  usesDefaultControlClasses,
+} from "./control-classes.js";
 import {
   addDays,
   clampDate,
@@ -20,8 +29,9 @@ import {
   resolveLocale,
   weekdayNames,
 } from "./intl.js";
-import { getDefaultMessages } from "./messages.js";
+import { getDefaultMessages, setDefaultMessages, subscribeDefaultMessages } from "./messages.js";
 import { normalizeDateStates } from "./source.js";
+import { upgradeProperties } from "./upgrade-properties.js";
 
 let uid = 0;
 
@@ -127,6 +137,26 @@ export class DateCalendarElement extends HTMLElement {
     "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-calendar-${++uid}`;
@@ -155,7 +185,16 @@ export class DateCalendarElement extends HTMLElement {
     /** @type {DateRange} */
     this._paintedRange = { start: "", end: "" };
     this._paintedPreview = false;
-    this._messages = getDefaultMessages();
+    /** @type {Map<string, DateState>} States of the current rendered grid. */
+    this._renderedStates = new Map();
+    /** @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 {(() => void) | null} */
+    this._stopDefaultControlClasses = null;
     this._onClick = this._onClick.bind(this);
     this._onChange = this._onChange.bind(this);
     this._onKeyDown = this._onKeyDown.bind(this);
@@ -164,16 +203,46 @@ export class DateCalendarElement extends HTMLElement {
 
   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;
@@ -323,13 +392,31 @@ export class DateCalendarElement extends HTMLElement {
     this.toggleAttribute("show-week-numbers", Boolean(value));
   }
 
-  /** @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) {
+    const previous = this.controlClasses;
+    this._controlClasses = normalizeControlClasses(value);
+    if (sameControlClasses(previous, this.controlClasses)) return;
+    if (this._connected) this.render();
+  }
+
+  /** @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._connected) this.render();
   }
 
@@ -420,16 +507,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} */
@@ -633,8 +714,8 @@ export class DateCalendarElement extends HTMLElement {
     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(". ");
@@ -647,17 +728,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);
+      }
     }
   }
 
@@ -828,7 +919,7 @@ export class DateCalendarElement extends HTMLElement {
     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>`
+      ? `<th scope="col" class="dp-week-heading" abbr="${escapeHtml(this.messages.week)}">#</th>`
       : "";
 
     const monthOptions = names
@@ -847,6 +938,7 @@ export class DateCalendarElement extends HTMLElement {
       )
       .join("");
 
+    this._renderedStates.clear();
     const rows = weeks
       .map((week) => {
         const weekNumber = showWeeks
@@ -855,6 +947,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 +972,14 @@ export class DateCalendarElement extends HTMLElement {
     // select via `data-year-first`.
     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 = `
@@ -890,8 +987,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 +1022,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;