@lekoala/date-picker 0.1.0

package/src/date-field.js

@@ -0,0 +1,203 @@
+import { isDate } from "./date.js";
+import { createDateAdapter } from "./intl.js";
+
+/**
+ * Owns a single editable form field inside a picker: the visible input, its
+ * hidden canonical ISO field, the Intl adapter and the text commit pipeline
+ * (parsing, availability gate, stale-response protection).
+ *
+ * It deliberately knows nothing about calendars, popups or ranges. Remote
+ * availability is injected as an async `confirm(date)` callback and the
+ * committed canonical value is applied by the coordinator, so all canonical
+ * reflection and events stay at the picker level.
+ */
+export class DateFieldController {
+  /**
+   * @param {HTMLInputElement} input
+   * @param {{messages?: Record<string, string>, locale?: string}} [options]
+   */
+  constructor(input, options = {}) {
+    this.input = input;
+    this.messages = options.messages || {};
+    this.adapter = createDateAdapter(options.locale || "");
+    /** @type {HTMLInputElement | null} */
+    this.hidden = null;
+    /** Current canonical value (YYYY-MM-DD or ""). */
+    this.canonical = "";
+    this._dirty = false;
+    this._commitId = 0;
+    this._originalName = input.getAttribute("name") || "";
+    /** @type {MutationObserver | null} */
+    this._attributeObserver = null;
+    /** @type {(() => void) | null} */
+    this.onAttributesChanged = null;
+    /**
+     * Async availability gate for a parsed date. Returning `{ ok: false }`
+     * marks the target unavailable. Swappable at runtime.
+     * @type {((date: string) => Promise<{ok: boolean, message?: string}>) | null}
+     */
+    this.confirm = null;
+  }
+
+  /** @param {string} locale */
+  setLocale(locale) {
+    this.adapter = createDateAdapter(locale || "");
+  }
+
+  /** @param {Record<string, string>} messages */
+  setMessages(messages) {
+    this.messages = messages || {};
+  }
+
+  /** @param {string} value */
+  format(value) {
+    return this.adapter.format(value);
+  }
+
+  /** @param {string} text */
+  parse(text) {
+    return this.adapter.parse(text);
+  }
+
+  get placeholder() {
+    return this.adapter.placeholder;
+  }
+
+  get isDisabled() {
+    return this.input.disabled;
+  }
+
+  get isReadOnly() {
+    return this.input.readOnly;
+  }
+
+  /** Create the hidden canonical field for an authored `name` and observe the
+   * input for dynamic name/form/disabled changes. */
+  setupFormValue() {
+    const input = this.input;
+    this._originalName = input.getAttribute("name") || "";
+    this._attributeObserver = new MutationObserver(() => this.onAttributesChanged?.());
+    this._attributeObserver.observe(input, {
+      attributes: true,
+      attributeFilter: ["disabled", "readonly", "name", "form"],
+    });
+    this.syncInputState();
+  }
+
+  /** Sync the hidden field with the current dynamic attributes. */
+  syncInputState() {
+    const input = this.input;
+    const name = input.getAttribute("name") || "";
+    if (name) {
+      if (!this.hidden) {
+        const hidden = document.createElement("input");
+        hidden.type = "hidden";
+        hidden.value = this.canonical;
+        input.insertAdjacentElement("afterend", hidden);
+        this.hidden = hidden;
+      }
+      if (this.hidden) this.hidden.name = name;
+      input.removeAttribute("name");
+    }
+    if (this.hidden) {
+      if (input.hasAttribute("form")) this.hidden.setAttribute("form", input.getAttribute("form") || "");
+      else this.hidden.removeAttribute("form");
+      this.hidden.disabled = input.disabled;
+    }
+  }
+
+  /** Invalidate any pending (possibly in-flight) commit. */
+  dirty() {
+    this._commitId++;
+  }
+
+  /** Whether the user edited the visible text since the last application. */
+  get isDirty() {
+    return this._dirty;
+  }
+
+  /** Live text input: the raw text no longer matches the canonical value, so
+   * the hidden ISO must not submit it. */
+  handleInput() {
+    const input = this.input;
+    this._dirty = true;
+    this.dirty();
+    if (this.hidden) this.hidden.value = "";
+    const text = input.value.trim();
+    if (!text) {
+      input.setCustomValidity("");
+      return;
+    }
+    const canonical = this.canonical ? this.adapter.format(this.canonical) : "";
+    input.setCustomValidity(text === canonical ? "" : this.messages.invalidDate);
+  }
+
+  /**
+   * Commit the visible text. Returns the parsed canonical date on success, the
+   * empty string on a clear, or a falsy marker for invalid/stale commits. The
+   * caller applies the canonical value so reflection and events stay central.
+   * @returns {Promise<{status: "ok" | "clear" | "invalid" | "stale", value?: string}>}
+   */
+  async commit() {
+    const input = this.input;
+    const commitId = ++this._commitId;
+    const text = input.value.trim();
+    if (!text) {
+      if (commitId !== this._commitId) return { status: "stale" };
+      input.setCustomValidity("");
+      return { status: "clear", value: "" };
+    }
+    const parsed = this.adapter.parse(text);
+    if (!parsed) {
+      if (commitId !== this._commitId) return { status: "stale" };
+      if (this.hidden) this.hidden.value = "";
+      input.setCustomValidity(this.messages.invalidDate);
+      return { status: "invalid" };
+    }
+    if (this.confirm) {
+      const result = await this.confirm(parsed);
+      if (commitId !== this._commitId) return { status: "stale" };
+      if (!result?.ok) {
+        if (this.hidden) this.hidden.value = "";
+        input.setCustomValidity(result?.message || this.messages.unavailableDate);
+        return { status: "invalid" };
+      }
+    }
+    return { status: "ok", value: parsed };
+  }
+
+  /**
+   * @param {string} value
+   * @param {{format?: boolean}} [options]
+   */
+  setCanonical(value, options = {}) {
+    const next = value || "";
+    if (next && !isDate(next)) throw new TypeError(`Invalid date-picker value: ${next}`);
+    // A programmatic/coordinator application supersedes any in-flight text
+    // commit, so an older pending result can never overwrite a newer value.
+    this.dirty();
+    this.canonical = next;
+    this._dirty = false;
+    if (this.hidden) this.hidden.value = next;
+    if (options.format !== false) this.input.value = next ? this.adapter.format(next) : "";
+    this.input.setCustomValidity("");
+  }
+
+  /** Restore value from `input.defaultValue` (native form reset). */
+  restoreDefault() {
+    const text = String(this.input.defaultValue ?? "").trim();
+    const parsed = isDate(text) ? text : this.adapter.parse(text);
+    return parsed && isDate(parsed) ? parsed : "";
+  }
+
+  /** Remove the hidden field and attribute observer, restoring the original
+   * authored `name` on the visible input. */
+  teardown() {
+    this._attributeObserver?.disconnect();
+    this._attributeObserver = null;
+    const hiddenName = this.hidden?.getAttribute("name") || this._originalName;
+    if (hiddenName) this.input.setAttribute("name", hiddenName);
+    this.hidden?.remove();
+    this.hidden = null;
+  }
+}

package/src/date-picker.css

@@ -0,0 +1,344 @@
+:where(date-calendar, date-picker) {
+  --dp-bg: Canvas;
+  --dp-fg: CanvasText;
+  --dp-muted: color-mix(in srgb, CanvasText 58%, Canvas);
+  --dp-border: color-mix(in srgb, CanvasText 22%, Canvas);
+  --dp-hover: color-mix(in srgb, CanvasText 7%, Canvas);
+  --dp-accent: Highlight;
+  --dp-accent-fg: HighlightText;
+  --dp-radius: 0.5rem;
+  --dp-day-size: 2.75rem;
+  --dp-gap: 0.25rem;
+  color: var(--dp-fg);
+  font: inherit;
+}
+
+.dp-visually-hidden {
+  position: absolute !important;
+  inline-size: 1px !important;
+  block-size: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+date-calendar {
+  display: block;
+  inline-size: max-content;
+  max-inline-size: 100%;
+}
+
+.dp-calendar-shell {
+  inline-size: max-content;
+  max-inline-size: 100%;
+}
+
+.dp-calendar-header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto auto;
+  align-items: center;
+  gap: var(--dp-gap);
+  margin-block-end: 0.4rem;
+}
+
+.dp-calendar-header .dp-prev {
+  margin-inline-start: calc(var(--dp-gap) * 2.5);
+}
+
+.dp-calendar-header :where(button, select, input) {
+  min-block-size: 2.25rem;
+  border: 1px solid var(--dp-border);
+  border-radius: calc(var(--dp-radius) * 0.75);
+  background: var(--dp-bg);
+  color: var(--dp-fg);
+  font: inherit;
+}
+
+.dp-calendar-header select,
+.dp-calendar-header input {
+  min-inline-size: 0;
+  padding-inline: 0.45rem;
+}
+
+.dp-month-select {
+  inline-size: 100%;
+}
+
+.dp-year-input {
+  inline-size: 5.5rem;
+}
+
+.dp-nav {
+  display: grid;
+  place-items: center;
+  inline-size: 2.25rem;
+  padding: 0;
+  font-size: 1.35rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.dp-nav svg {
+  display: block;
+  inline-size: 1rem;
+  block-size: 1rem;
+  pointer-events: none;
+}
+
+.dp-calendar-header :where(button, select, input):disabled,
+.dp-picker-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.dp-nav:hover:not(:disabled) {
+  background: var(--dp-hover);
+}
+
+.dp-day:hover:not([data-disabled="true"]):not([data-selected="true"]):not([data-range-start="true"]):not(
+  [data-range-end="true"]
+) {
+  background: var(--dp-hover);
+}
+
+.dp-calendar-heading {
+  margin: 0 0 0.35rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-align: center;
+}
+
+.dp-grid {
+  border-collapse: separate;
+  /* --dp-gap scopes to the header grid; day-cell spacing stays fixed. */
+  border-spacing: 0 0.25rem;
+  table-layout: fixed;
+}
+
+.dp-grid :where(th, td) {
+  box-sizing: border-box;
+  inline-size: var(--dp-day-size);
+  block-size: var(--dp-day-size);
+  padding: 0;
+  text-align: center;
+}
+
+.dp-grid thead th {
+  block-size: 1.6rem;
+  color: var(--dp-muted);
+  font-size: 0.72rem;
+  font-weight: 600;
+}
+
+.dp-day {
+  position: relative;
+  border: 1px solid transparent;
+  border-radius: calc(var(--dp-radius) * 0.75);
+  cursor: pointer;
+  outline: none;
+  vertical-align: middle;
+  font-size: 0.875rem;
+}
+
+.dp-day:focus-visible {
+  outline: 2px solid var(--dp-accent);
+  outline-offset: 1px;
+  z-index: 1;
+}
+
+.dp-day[data-selected="true"] {
+  background: var(--dp-accent);
+  color: var(--dp-accent-fg);
+}
+
+.dp-day[data-today="true"]:not([data-selected="true"]) {
+  border-color: var(--dp-accent);
+}
+
+.dp-day[data-outside-month="true"] {
+  color: var(--dp-muted);
+}
+
+.dp-day[data-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.42;
+}
+
+.dp-day[data-range-start="true"],
+.dp-day[data-range-end="true"] {
+  background: var(--dp-accent);
+  color: var(--dp-accent-fg);
+}
+
+.dp-day[data-in-range="true"] {
+  border-radius: 0;
+  background: color-mix(in srgb, var(--dp-accent) 18%, var(--dp-bg));
+}
+
+/* Join the band without gaps, including the corners beside each endpoint. */
+.dp-day[data-range-start="true"]:has(+ [data-in-range="true"], + [data-range-end="true"]) {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.dp-day:is([data-in-range="true"], [data-range-start="true"]) + .dp-day[data-range-end="true"] {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+
+.dp-day[data-in-range="true"]:first-of-type {
+  border-start-start-radius: var(--dp-radius);
+  border-end-start-radius: var(--dp-radius);
+}
+
+.dp-day[data-in-range="true"]:last-of-type {
+  border-start-end-radius: var(--dp-radius);
+  border-end-end-radius: var(--dp-radius);
+}
+
+.dp-day-number {
+  display: block;
+  font-variant-numeric: tabular-nums;
+}
+
+.dp-day-extra {
+  position: absolute;
+  inset-inline: 2px;
+  inset-block-end: 1px;
+  display: flex;
+  justify-content: center;
+  gap: 2px;
+  min-block-size: 0.35rem;
+  font-size: 0.55rem;
+  line-height: 1;
+  pointer-events: none;
+}
+
+.dp-week-number,
+.dp-week-heading {
+  inline-size: 1.6rem !important;
+  color: var(--dp-muted);
+  font-size: 0.65rem;
+  font-weight: 500;
+}
+
+date-picker {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: stretch;
+  max-inline-size: 100%;
+}
+
+date-picker > input:not([type="hidden"]) {
+  grid-column: 1;
+  min-inline-size: 0;
+}
+
+date-picker[range] > input:not([type="hidden"]) {
+  grid-column: 1;
+}
+
+date-picker[range] > input[data-range-start] {
+  grid-row: 1;
+}
+
+date-picker[range] > input[data-range-end] {
+  grid-row: 2;
+}
+
+.dp-picker-button {
+  grid-column: 2;
+  min-inline-size: 2.5rem;
+  border: 1px solid var(--dp-border);
+  border-inline-start: 0;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  border-start-end-radius: var(--dp-radius);
+  border-end-end-radius: var(--dp-radius);
+  background: var(--dp-bg);
+  color: var(--dp-fg);
+  font: inherit;
+  cursor: pointer;
+}
+
+date-picker[range] > .dp-picker-button {
+  grid-row: 1 / span 2;
+}
+
+.dp-picker-panel[popover] {
+  position: fixed;
+  inset: auto;
+  margin: 0;
+  padding: 0.65rem;
+  border: 1px solid var(--dp-border);
+  border-radius: var(--dp-radius);
+  background: var(--dp-bg);
+  color: var(--dp-fg);
+  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.16);
+  max-block-size: var(--available-height, 90svh);
+  max-inline-size: calc(100vi - 1rem);
+  overflow: auto;
+}
+
+.dp-picker-panel:not(:popover-open) {
+  display: none;
+}
+
+@media (forced-colors: active) {
+  .dp-day[data-selected="true"] {
+    border: 2px solid Highlight;
+    background-color: Canvas;
+    color: CanvasText;
+    font-weight: 700;
+  }
+
+  .dp-day[data-range-start="true"],
+  .dp-day[data-range-end="true"] {
+    border: 2px solid Highlight;
+    background-color: Canvas;
+    color: CanvasText;
+    font-weight: 700;
+  }
+
+  .dp-day[data-in-range="true"] {
+    color: CanvasText;
+  }
+
+  .dp-day[data-in-range="true"]::after {
+    content: "";
+    position: absolute;
+    inset-inline: 3px;
+    inset-block-end: 4px;
+    block-size: 1px;
+    background-color: Highlight;
+  }
+
+  .dp-day[data-selected="true"]::before {
+    content: "";
+    position: absolute;
+    inset: 3px;
+    border: 1px solid CanvasText;
+    border-radius: calc(var(--dp-radius) * 0.5);
+    pointer-events: none;
+  }
+
+  .dp-day[data-today="true"] {
+    border-color: Highlight;
+  }
+
+  .dp-day-extra {
+    color: CanvasText;
+    forced-color-adjust: none;
+  }
+
+  .dp-day[data-disabled="true"],
+  .dp-calendar-header :where(button, select, input):disabled,
+  .dp-picker-button:disabled {
+    opacity: 1;
+    color: GrayText;
+  }
+}