@blukavantui/community 0.0.0-stage → 1.0.1

package/src/runtime/date-range-picker.js

@@ -0,0 +1,817 @@
+// ../blu-grid/docs/scripts/advanced/shared.js
+import { state, register } from "./kernel.js";
+var shared = state("advanced", () => ({ instances: /* @__PURE__ */ new Map(), serial: 0 }));
+var uid = () => `blu-advanced-${++shared.serial}`;
+function node(tag, cls, text) {
+  const el = document.createElement(tag);
+  if (cls) el.className = cls;
+  if (text !== void 0) el.textContent = String(text);
+  return el;
+}
+function attr(el, name, value) {
+  if (value === null || value === void 0) el.removeAttribute(name);
+  else el.setAttribute(name, String(value));
+  return el;
+}
+function button(text, action, cls = "blu-picker__button") {
+  const el = node("button", cls, text);
+  el.type = "button";
+  el.addEventListener("click", action);
+  return el;
+}
+function emit(s, name, ...args) {
+  if (s.dead) return;
+  try {
+    Promise.resolve(s.events[name]?.(...args)).catch((e) => report(s, e));
+  } catch (e) {
+    report(s, e);
+  }
+}
+function report(s, error) {
+  if (s.dead) return;
+  const message = error?.message || String(error);
+  s.notice.textContent = message;
+  if (s.lastError !== message) {
+    s.lastError = message;
+    emit(s, "Error", message);
+  }
+}
+function list(value, name) {
+  const items = typeof value === "string" ? JSON.parse(value || "[]") : value || [];
+  if (!Array.isArray(items)) throw Error(name + " must be a list.");
+  return items;
+}
+function createAPI(kind, init2, update2) {
+  const destroy = (key) => {
+    const s = shared.instances.get(key);
+    if (!s || s.kind !== kind) return;
+    s.dead = true;
+    s.dispose?.();
+    s.root.remove();
+    s.notice.remove();
+    if (s.host._bluAdvancedOwner === key) delete s.host._bluAdvancedOwner;
+    shared.instances.delete(key);
+  };
+  return register(kind, () => ({ sync(id, options = {}, events = {}, owner) {
+    const host = document.getElementById(id);
+    if (!host) return kind + " host was not found.";
+    const key = owner || id;
+    let s = shared.instances.get(key);
+    if (s && (s.host !== host || s.kind !== kind)) {
+      s.destroy(s.key);
+      s = null;
+    }
+    const previous = shared.instances.get(host._bluAdvancedOwner);
+    if (previous && previous !== s) previous.destroy(previous.key);
+    if (!s) {
+      s = { key, host, kind, uid: uid(), options, events, dead: false, destroy };
+      s.root = node("div");
+      s.notice = attr(node("div", "blu-advanced-sr"), "role", "status");
+      attr(s.notice, "aria-atomic", "true");
+      host.append(s.root, s.notice);
+      shared.instances.set(key, s);
+      host._bluAdvancedOwner = key;
+      try {
+        init2(s);
+      } catch (e) {
+        destroy(key);
+        throw e;
+      }
+    }
+    s.options = options;
+    s.events = events;
+    try {
+      update2(s);
+      host.dataset.bluRuntimeReady = "true";
+      return "";
+    } catch (e) {
+      report(s, e);
+      return e.message || String(e);
+    }
+  }, destroy }));
+}
+
+// ../blu-grid/docs/scripts/advanced/date-utils.js
+var pad = (n) => String(n).padStart(2, "0");
+function dateValue(d) {
+  return String(d.getFullYear()).padStart(4, "0") + "-" + pad(d.getMonth() + 1) + "-" + pad(d.getDate());
+}
+function dateObject(value) {
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(String(value));
+  if (!match || +match[1] < 1 || +match[1] > 9999) return null;
+  const date = new Date(2e3, +match[2] - 1, +match[3], 12);
+  date.setFullYear(+match[1]);
+  return dateValue(date) === value ? date : null;
+}
+function timeValue(value) {
+  const m = /^(\d{2}):(\d{2})$/.exec(String(value));
+  return m && +m[1] < 24 && +m[2] < 60 ? m[1] + ":" + m[2] : null;
+}
+function parseDate(text, format = "YYYY-MM-DD") {
+  text = String(text).trim();
+  if (!text) return "";
+  let value = text;
+  if (format !== "YYYY-MM-DD") {
+    const m = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/.exec(text);
+    if (!m) return null;
+    value = m[3] + "-" + pad(+(format === "DD/MM/YYYY" ? m[2] : m[1])) + "-" + pad(+(format === "DD/MM/YYYY" ? m[1] : m[2]));
+  }
+  return dateObject(value) ? value : null;
+}
+function formatDate(value, format = "YYYY-MM-DD") {
+  if (!value) return "";
+  const parts = value.split("-");
+  return format === "MM/DD/YYYY" ? parts[1] + "/" + parts[2] + "/" + parts[0] : format === "DD/MM/YYYY" ? parts[2] + "/" + parts[1] + "/" + parts[0] : value;
+}
+function parseTime(text, cycle = 24) {
+  text = String(text).trim();
+  if (!text) return "";
+  const m = /^(\d{1,2}):(\d{2})(?:\s*(AM|PM))?$/i.exec(text);
+  if (!m || +m[2] > 59 || (cycle === 12 ? !m[3] || +m[1] < 1 || +m[1] > 12 : !!m[3] || +m[1] > 23)) return null;
+  return pad(m[3] ? +m[1] % 12 + (m[3].toUpperCase() === "PM" ? 12 : 0) : +m[1]) + ":" + m[2];
+}
+function formatTime(value, cycle = 24) {
+  if (!value) return "";
+  const [h, m] = value.split(":").map(Number);
+  return cycle === 12 ? (h % 12 || 12) + ":" + pad(m) + " " + (h < 12 ? "AM" : "PM") : pad(h) + ":" + pad(m);
+}
+function addDays(value, count) {
+  const date = dateObject(value);
+  date.setDate(date.getDate() + count);
+  return dateValue(date);
+}
+function addMonths(value, count) {
+  const date = dateObject(value), day = date.getDate();
+  date.setDate(1);
+  date.setMonth(date.getMonth() + count);
+  date.setDate(Math.min(day, new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate()));
+  return dateValue(date);
+}
+function daysBetween(start, end) {
+  const a = dateObject(start), b = dateObject(end);
+  return Math.round((b.getTime() - a.getTime()) / 864e5);
+}
+function validateDate(value, min, max, disabled) {
+  if (!dateObject(value)) return "Enter a real calendar date.";
+  if (min && value < min) return "Choose " + min + " or later.";
+  if (max && value > max) return "Choose " + max + " or earlier.";
+  if (disabled?.has(value)) return "This date is unavailable.";
+  return "";
+}
+function validateRange(start, end, options = {}) {
+  if (!start || !end) return "Choose both a start date and an end date.";
+  const issue = validateDate(start, options.Min, options.Max, options.disabled) || validateDate(end, options.Min, options.Max, options.disabled);
+  if (issue) return issue;
+  if (end < start) return "End date must be on or after start date.";
+  const length = daysBetween(start, end) + 1;
+  if (options.MinRangeDays && length < options.MinRangeDays) return "Choose at least " + options.MinRangeDays + " days.";
+  if (options.MaxRangeDays && length > options.MaxRangeDays) return "Choose no more than " + options.MaxRangeDays + " days.";
+  if (options.disabled) {
+    for (const day of options.disabled) if (day >= start && day <= end) return "The range includes an unavailable date.";
+  }
+  return "";
+}
+
+// ../blu-grid/docs/scripts/advanced/pickers.js
+var formatOptions = ["YYYY-MM-DD", "MM/DD/YYYY", "DD/MM/YYYY"];
+var today = () => dateValue(/* @__PURE__ */ new Date());
+var datePart = (value) => String(value || "").split("T")[0];
+var timePart = (value) => String(value || "").split("T")[1] || "";
+function labelDate(s, value) {
+  const date = dateObject(value);
+  return date ? new Intl.DateTimeFormat(s.locale, { dateStyle: "full" }).format(date) : value;
+}
+function setError(s, message, fields = s.fields) {
+  s.error.textContent = message;
+  s.error.hidden = !message || s.isOpen;
+  if (s.dialogError) s.dialogError.textContent = s.isOpen ? message : "";
+  for (const field of s.fields) attr(field.input, "aria-invalid", message && fields.includes(field) ? "true" : null);
+  const valid = !message;
+  if (s.valid !== valid || s.validationMessage !== message) {
+    s.valid = valid;
+    s.validationMessage = message;
+    emit(s, "ValidationChanged", valid, message);
+  }
+}
+function calendarIssue(s, date) {
+  return validateDate(date, datePart(s.options.Min), datePart(s.options.Max), s.disabledDates);
+}
+function timeIssue(s, time, date) {
+  if (!timeValue(time)) return "Enter a valid time.";
+  const value = s.dateTime ? date + "T" + time : time, min = s.options.Min, max = s.options.Max;
+  if (min && value < min) return "Choose " + min + " or later.";
+  if (max && value > max) return "Choose " + max + " or earlier.";
+  return "";
+}
+function validate(s, first, end, time) {
+  if (s.range) {
+    if (!first && !end && !s.options.IsRequired) return "";
+    return validateRange(first, end, { ...s.options, disabled: s.disabledDates });
+  }
+  if (!first && !time) return s.options.IsRequired ? "A " + (s.timeOnly ? "time" : "date") + " is required." : "";
+  if (!s.timeOnly) {
+    if (!first) return "Choose a date.";
+    const issue = calendarIssue(s, first);
+    if (issue) return issue;
+  }
+  if (s.hasTime) {
+    if (!time) return "Choose a time.";
+    return timeIssue(s, time, first);
+  }
+  return "";
+}
+function paintInputs(s) {
+  if (s.timeOnly) s.fields[0].input.value = formatTime(s.value, s.cycle);
+  else {
+    s.fields[0].input.value = formatDate(s.range ? s.start : datePart(s.value), s.format);
+    if (s.range) s.fields[1].input.value = formatDate(s.end, s.format);
+    if (s.dateTime) s.fields[1].input.value = formatTime(timePart(s.value), s.cycle);
+  }
+  const selected = s.range ? [s.start, s.end].filter(Boolean).join(" to ") : s.value;
+  s.typedDirty = false;
+  s.clearButton.hidden = s.options.ShowClear === false || !selected;
+}
+function close(s, restore = true) {
+  if (!s.isOpen) return;
+  s.isOpen = false;
+  if (s.dialog.hidePopover && s.dialog.matches(":popover-open")) s.dialog.hidePopover();
+  s.dialog.hidden = true;
+  s.error.hidden = !s.validationMessage;
+  for (const { input } of s.fields) attr(input, "aria-expanded", "false");
+  if (restore && s.anchor?.isConnected && !s.anchor.disabled) s.anchor.focus({ preventScroll: true });
+  emit(s, "OpenChanged", false);
+}
+function positionPopup(s) {
+  if (!s.isOpen || s.dead) return;
+  const anchor = s.anchor.getBoundingClientRect(), view = window.visualViewport;
+  const left = view?.offsetLeft || 0, top = view?.offsetTop || 0, width = view?.width || document.documentElement.clientWidth, height = view?.height || window.innerHeight, gap = 6, edge = 8;
+  if (anchor.bottom <= top || anchor.top >= top + height || anchor.right <= left || anchor.left >= left + width) {
+    close(s, false);
+    return;
+  }
+  const panel = s.dialog, panelWidth = Math.min(s.timeOnly ? 300 : 344, width - edge * 2);
+  panel.dataset.compact = String(height < 420);
+  panel.style.width = panelWidth + "px";
+  panel.style.maxHeight = "none";
+  const below = Math.max(0, top + height - edge - anchor.bottom - gap), above = Math.max(0, anchor.top - gap - top - edge);
+  const natural = panel.scrollHeight + 2, up = natural > below && above > below, room = Math.max(0, height - edge * 2);
+  panel.style.maxHeight = room + "px";
+  panel.style.left = Math.max(left + edge, Math.min(anchor.left, left + width - edge - panelWidth)) + "px";
+  const preferred = up ? anchor.top - gap - natural : anchor.bottom + gap;
+  panel.style.top = Math.max(top + edge, Math.min(preferred, top + height - edge - Math.min(natural, room))) + "px";
+  panel.dataset.placement = up ? "top" : "bottom";
+}
+function focusPopup(s) {
+  const timeField = s.timeOnly || s.dateTime && s.anchor === s.fields[1].input;
+  (timeField ? s.hours : s.calendar.querySelector('[data-date="' + s.focusDate + '"]') || s.monthSelect).focus();
+}
+function commit(s, first, end, time, keepOpen = false) {
+  const issue = validate(s, first, end, time);
+  setError(s, issue);
+  if (issue) {
+    s.dialogError.textContent = issue;
+    return false;
+  }
+  const returnToInput = document.activeElement === s.clearButton && !first && !end && !time;
+  const value = s.timeOnly ? time : s.dateTime ? first ? first + "T" + time : "" : first;
+  const changed = s.range ? s.start !== first || s.end !== end : s.value !== value;
+  if (s.range) {
+    s.start = first;
+    s.end = end;
+    s.options.StartDate = first;
+    s.options.EndDate = end;
+  } else {
+    s.value = value;
+    s.options.Value = value;
+  }
+  s.inputSignature = JSON.stringify(s.range ? [s.start, s.end] : [s.value]);
+  paintInputs(s);
+  if (!keepOpen) close(s);
+  if (returnToInput) s.fields[0].input.focus();
+  s.notice.textContent = s.range ? first ? labelDate(s, first) + " to " + labelDate(s, end) : "Date range cleared" : value ? "Selected " + (s.timeOnly ? formatTime(value, s.cycle) : labelDate(s, first) + (s.hasTime ? " at " + formatTime(time, s.cycle) : "")) : "Selection cleared";
+  if (changed) {
+    if (s.range) emit(s, "Change", first, end);
+    else emit(s, "Change", value);
+  }
+  return true;
+}
+function typed(s, keepOpen = false) {
+  if (s.options.IsDisabled || s.options.IsReadOnly) return;
+  const first = s.timeOnly ? "" : parseDate(s.fields[0].input.value, s.format), end = s.range ? parseDate(s.fields[1].input.value, s.format) : "";
+  const time = s.hasTime ? parseTime(s.fields[s.timeOnly ? 0 : 1].input.value, s.cycle) : "";
+  if (first === null || end === null) {
+    setError(s, "Enter a real date using " + s.format + ".");
+    return;
+  }
+  if (time === null) {
+    setError(s, s.cycle === 12 ? "Enter a time such as 9:15 AM." : "Enter a time such as 14:30.");
+    return;
+  }
+  if (commit(s, first, end, time, keepOpen) && keepOpen) {
+    s.draftStart = first;
+    s.draftEnd = end;
+    s.draftTime = time;
+    if (first) {
+      s.focusDate = first;
+      s.month = first.slice(0, 7);
+    }
+    paintCalendar(s);
+    paintTimes(s);
+    paintDraft(s);
+    positionPopup(s);
+  }
+}
+function buildFields(s) {
+  const count = s.range || s.dateTime ? 2 : 1;
+  s.fields = [];
+  for (let i = 0; i < count; i++) {
+    const field = node("div", "blu-picker__field"), label = node("label"), input = node("input", "blu-picker__input");
+    input.type = "text";
+    input.id = s.uid + "-input-" + i;
+    label.htmlFor = input.id;
+    input.autocomplete = "off";
+    input.spellcheck = false;
+    attr(input, "role", "combobox");
+    attr(input, "aria-haspopup", "dialog");
+    attr(input, "aria-expanded", "false");
+    attr(input, "aria-autocomplete", "none");
+    attr(input, "aria-controls", s.uid + "-dialog");
+    attr(input, "aria-describedby", s.uid + "-hint " + s.uid + "-error " + s.uid + "-keyboard");
+    input.addEventListener("input", () => {
+      s.typedDirty = true;
+    });
+    input.addEventListener("change", () => typed(s, s.isOpen));
+    input.addEventListener("pointerdown", (event) => {
+      if (event.pointerType === "mouse") {
+        s.touchOpen = false;
+        input.inputMode = "text";
+      }
+      if ((event.pointerType === "touch" || event.pointerType === "pen") && s.manualInput !== input && !s.options.IsDisabled && !s.options.IsReadOnly) {
+        event.preventDefault();
+        s.touchOpen = true;
+        input.inputMode = "none";
+        open(s, input, true);
+      }
+    });
+    input.addEventListener("click", (event) => {
+      if (s.manualInput === input) return;
+      if (s.touchOpen) {
+        event.preventDefault();
+        open(s, input, true);
+      } else open(s, input, false);
+    });
+    input.addEventListener("blur", () => {
+      if (s.manualInput === input) s.manualInput = null;
+    });
+    input.addEventListener("keydown", (event) => {
+      if (event.ctrlKey || event.metaKey || event.shiftKey) return;
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        open(s, input, true);
+      }
+      if (event.key === "Enter") {
+        event.preventDefault();
+        if (!s.isOpen && !s.typedDirty) open(s, input, true);
+        else typed(s);
+      }
+      if (event.key === "Tab") close(s, false);
+    });
+    const control = node("div", "blu-picker__field-control"), icon = attr(node("span", "blu-picker__field-icon"), "aria-hidden", "true");
+    icon.innerHTML = s.timeOnly || s.dateTime && i ? '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="12" cy="12" r="8.5"/><path d="M12 7v5l3 2"/></svg>' : '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="4" y="5" width="16" height="16" rx="3"/><path d="M8 3v4m8-4v4M4 10h16m-11 4h2m3 0h2m-7 3h2"/></svg>';
+    control.append(input, icon);
+    field.append(label, control);
+    s.fields.push({ field, label, input });
+    s.fieldRow.append(field);
+  }
+}
+function appendOption(select, value, label) {
+  const option = node("option", "", label);
+  option.value = String(value);
+  select.append(option);
+  return option;
+}
+function selectField(s, label, name) {
+  const wrap = node("label", "blu-picker__select-field"), caption = node("span", "", label), select = node("select", "blu-picker__input");
+  select.id = s.uid + "-" + name;
+  wrap.append(caption, select);
+  return { wrap, select };
+}
+function focusDay(s, value) {
+  const min = datePart(s.options.Min) || "0001-01-01", max = datePart(s.options.Max) || "9999-12-31";
+  value = value < min ? min : value > max ? max : value;
+  if (!dateObject(value)) return;
+  s.focusDate = value;
+  s.month = value.slice(0, 7);
+  paintCalendar(s);
+  s.calendar.querySelector('[data-date="' + value + '"]')?.focus();
+}
+function keyDay(s, event, value) {
+  if (event.altKey || event.ctrlKey || event.metaKey) return;
+  let next;
+  const offsets = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 };
+  if (event.key in offsets) next = addDays(value, offsets[event.key]);
+  else if (event.key === "Home" || event.key === "End") {
+    const day = (dateObject(value).getDay() - s.firstDay + 7) % 7;
+    next = addDays(value, event.key === "Home" ? -day : 6 - day);
+  } else if (event.key === "PageUp" || event.key === "PageDown") next = addMonths(value, (event.key === "PageUp" ? -1 : 1) * (event.shiftKey ? 12 : 1));
+  if (next) {
+    event.preventDefault();
+    focusDay(s, next);
+  }
+}
+function chooseDay(s, value) {
+  if (calendarIssue(s, value)) return;
+  s.dialogError.textContent = "";
+  s.focusDate = value;
+  if (s.range) {
+    if (s.rangeNext === "start") {
+      s.draftStart = value;
+      s.draftEnd = "";
+      s.rangeNext = "end";
+    } else {
+      if (value < s.draftStart) {
+        s.draftEnd = s.draftStart;
+        s.draftStart = value;
+      } else s.draftEnd = value;
+      s.rangeNext = "start";
+    }
+  } else s.draftStart = value;
+  if (!s.hasTime && !s.range) {
+    commit(s, value, "", "");
+    return;
+  }
+  paintCalendar(s);
+  s.calendar.querySelector('[data-date="' + value + '"]')?.focus();
+  paintDraft(s);
+}
+function paintDraft(s) {
+  const full = s.range ? s.draftStart ? labelDate(s, s.draftStart) + (s.draftEnd ? " to " + labelDate(s, s.draftEnd) : " \u2014 choose an end date") : "Choose a start date" : s.hasTime ? (s.draftStart ? labelDate(s, s.draftStart) + " \xB7 " : "") + formatTime(s.draftTime, s.cycle) : "";
+  const short = (value) => dateObject(value) ? new Intl.DateTimeFormat(s.locale, { month: "short", day: "numeric" }).format(dateObject(value)) : "";
+  s.selectionSpeech.textContent = full;
+  s.selectionVisual.textContent = s.range ? s.draftStart ? short(s.draftStart) + (s.draftEnd ? " \u2013 " + short(s.draftEnd) : " \u2014 choose end") : "Choose start date" : s.dateTime ? short(s.draftStart) + " \xB7 " + formatTime(s.draftTime, s.cycle) : s.timeOnly ? formatTime(s.draftTime, s.cycle) : "";
+  s.selection.hidden = !full;
+}
+function paintCalendar(s) {
+  const date = dateObject(s.month + "-01");
+  if (!date) return;
+  const year = date.getFullYear(), month = date.getMonth(), minYear = Number(datePart(s.options.Min).slice(0, 4)) || 1, maxYear = Number(datePart(s.options.Max).slice(0, 4)) || 9999;
+  s.monthSelect.value = String(month);
+  s.yearInput.value = String(year);
+  attr(s.yearInput, "aria-invalid", null);
+  s.yearInput.min = String(minYear);
+  s.yearInput.max = String(maxYear);
+  const caption = new Intl.DateTimeFormat(s.locale, { month: "long", year: "numeric" }).format(date);
+  if (s.caption.textContent !== caption) s.caption.textContent = caption;
+  const offset = (date.getDay() - s.firstDay + 7) % 7, last = new Date(year, month + 1, 0).getDate();
+  if (!s.focusDate.startsWith(s.month)) s.focusDate = s.month + "-01";
+  if (!s.dayCells) {
+    const body = node("tbody");
+    s.dayCells = [];
+    for (let row = 0; row < 6; row++) {
+      const tr = node("tr");
+      for (let col = 0; col < 7; col++) {
+        const td = node("td"), b = button("", () => chooseDay(s, b.dataset.date), "blu-picker__day");
+        b.addEventListener("keydown", (e) => keyDay(s, e, b.dataset.date));
+        b.addEventListener("focus", () => {
+          s.focusDate = b.dataset.date;
+          for (const other of s.dayCells) other.button.tabIndex = other.button === b ? 0 : -1;
+        });
+        td.append(b);
+        tr.append(td);
+        s.dayCells.push({ cell: td, button: b });
+      }
+      body.append(tr);
+    }
+    s.calendar.append(body);
+  }
+  for (let i = 0; i < s.dayCells.length; i++) {
+    const { cell: td, button: b } = s.dayCells[i], day = i - offset + 1, inMonth = day > 0 && day <= last;
+    b.hidden = !inMonth;
+    if (!inMonth) {
+      b.tabIndex = -1;
+      delete b.dataset.date;
+      attr(td, "aria-selected", null);
+      continue;
+    }
+    const value = s.month + "-" + pad(day), chosen = value === s.draftStart || s.range && value === s.draftEnd, between = s.range && s.draftStart && s.draftEnd && value > s.draftStart && value < s.draftEnd;
+    const unavailable = calendarIssue(s, value), selected = !!(chosen || between);
+    const rangeContext = s.range && chosen ? value === s.draftStart ? s.draftEnd ? ", range starts here; " + labelDate(s, s.draftStart) + " to " + labelDate(s, s.draftEnd) : ", start date; choose an end date" : ", range ends here; " + labelDate(s, s.draftStart) + " to " + labelDate(s, s.draftEnd) : "";
+    const name = labelDate(s, value) + (selected ? ", selected" : "") + rangeContext + (unavailable ? ", unavailable" : "");
+    b.dataset.date = value;
+    b.tabIndex = value === s.focusDate ? 0 : -1;
+    if (b.textContent !== String(day)) b.textContent = String(day);
+    if (b.getAttribute("aria-label") !== name) attr(b, "aria-label", name);
+    attr(td, "aria-selected", String(selected));
+    attr(b, "aria-disabled", unavailable ? "true" : null);
+    attr(b, "aria-current", value === today() ? "date" : null);
+    b.dataset.selected = String(chosen);
+    b.dataset.between = String(!!between);
+  }
+  for (let row = 0; row < 6; row++) s.dayCells[row * 7].cell.parentElement.hidden = row * 7 - offset + 1 > last;
+  const min = datePart(s.options.Min), max = datePart(s.options.Max);
+  s.prev.disabled = !!min && s.month <= min.slice(0, 7) || year === 1 && month === 0;
+  s.next.disabled = !!max && s.month >= max.slice(0, 7) || year === 9999 && month === 11;
+  s.todayButton.hidden = s.timeOnly || s.options.ShowToday === false;
+  s.todayButton.disabled = !!calendarIssue(s, today());
+}
+function paintTimes(s) {
+  if (!s.hasTime) return;
+  const [h, m] = (s.draftTime || "09:00").split(":").map(Number);
+  s.hours.replaceChildren();
+  s.minutes.replaceChildren();
+  for (let i = 0; i < (s.cycle === 12 ? 12 : 24); i++) appendOption(s.hours, s.cycle === 12 ? i + 1 : i, pad(s.cycle === 12 ? i + 1 : i));
+  for (let i = 0; i < 60; i += s.step) appendOption(s.minutes, i, pad(i));
+  if (m % s.step) appendOption(s.minutes, m, pad(m) + " (entered)");
+  s.hours.value = String(s.cycle === 12 ? h % 12 || 12 : h);
+  s.minutes.value = String(m);
+  s.period.value = h < 12 ? "AM" : "PM";
+  s.periodField.hidden = s.cycle !== 12;
+  paintDraft(s);
+}
+function open(s, input = s.fields[0].input, moveFocus = true) {
+  if (s.options.IsDisabled || s.options.IsReadOnly) return;
+  s.anchor = input;
+  s.manualInput = null;
+  s.typeButton.hidden = !s.touchOpen;
+  if (s.isOpen) {
+    if (s.range) s.rangeNext = input === s.fields[1].input && s.draftStart ? "end" : "start";
+    positionPopup(s);
+    if (moveFocus) focusPopup(s);
+    return;
+  }
+  s.draftStart = s.timeOnly ? "" : s.range ? s.start : datePart(s.value);
+  s.draftEnd = s.end || "";
+  s.draftTime = s.timeOnly ? s.value : timePart(s.value);
+  if (s.hasTime && !timeValue(s.draftTime)) s.draftTime = "09:00";
+  s.rangeNext = "start";
+  if (s.range && input === s.fields[1].input && s.draftStart) s.rangeNext = "end";
+  const chosen = s.range && s.rangeNext === "end" ? s.draftEnd : s.draftStart;
+  s.focusDate = dateObject(chosen) ? chosen : dateObject(s.draftStart) ? s.draftStart : today();
+  const min = datePart(s.options.Min), max = datePart(s.options.Max);
+  if (!s.timeOnly) {
+    if (min && s.focusDate < min) s.focusDate = min;
+    if (max && s.focusDate > max) s.focusDate = max;
+  }
+  s.month = s.focusDate.slice(0, 7);
+  s.dialogError.textContent = "";
+  paintCalendar(s);
+  paintTimes(s);
+  paintDraft(s);
+  s.isOpen = true;
+  s.dialog.hidden = false;
+  if (s.dialog.showPopover) s.dialog.showPopover();
+  s.dialog.scrollTop = 0;
+  for (const { input: field } of s.fields) attr(field, "aria-expanded", "true");
+  positionPopup(s);
+  if (moveFocus && s.isOpen) focusPopup(s);
+  emit(s, "OpenChanged", true);
+}
+function init(s) {
+  s.range = s.kind === "DateRangePicker";
+  s.timeOnly = s.kind === "TimePicker";
+  s.dateTime = s.kind === "DateTimePicker";
+  s.hasTime = s.timeOnly || s.dateTime;
+  s.root.className = "blu-picker";
+  s.fieldRow = node("div", "blu-picker__fields");
+  s.error = attr(node("div", "blu-picker__error"), "role", "alert");
+  s.error.id = s.uid + "-error";
+  s.error.hidden = true;
+  s.hint = node("div", "blu-picker__hint");
+  s.hint.id = s.uid + "-hint";
+  s.actions = node("div", "blu-picker__actions");
+  s.clearButton = button("Clear", () => commit(s, "", "", ""));
+  s.actions.append(s.clearButton);
+  s.root.append(s.fieldRow, s.hint, s.actions, s.error);
+  buildFields(s);
+  const keyboard = node("span", "blu-advanced-sr", "Click the field or press Down Arrow to browse. Escape closes the popup.");
+  keyboard.id = s.uid + "-keyboard";
+  s.root.append(keyboard);
+  s.dialog = node("div", "blu-picker__dialog blu-picker__popup");
+  s.dialog.id = s.uid + "-dialog";
+  s.dialog.hidden = true;
+  attr(s.dialog, "role", "dialog");
+  attr(s.dialog, "aria-labelledby", s.uid + "-title");
+  attr(s.dialog, "aria-modal", "false");
+  if (s.dialog.showPopover) attr(s.dialog, "popover", "manual");
+  s.root.append(s.dialog);
+  s.title = node("h2", "blu-advanced-sr");
+  s.title.id = s.uid + "-title";
+  s.dialog.append(s.title);
+  s.presets = node("div", "blu-picker__presets");
+  s.dialog.append(s.presets);
+  s.calendarArea = node("div", "blu-picker__calendar-area");
+  s.calendarArea.hidden = s.timeOnly;
+  s.dialog.append(s.calendarArea);
+  const nav = node("div", "blu-picker__calendar-nav");
+  const month = selectField(s, "Month", "month");
+  s.monthSelect = month.select;
+  const year = node("label", "blu-picker__select-field");
+  year.append(node("span", "", "Year"));
+  s.yearInput = node("input", "blu-picker__input");
+  s.yearInput.type = "number";
+  s.yearInput.step = "1";
+  year.append(s.yearInput);
+  const move = (delta) => {
+    const candidate = addMonths(s.focusDate, delta);
+    focusDay(s, candidate);
+  };
+  s.prev = button("\u2039", () => move(-1));
+  attr(s.prev, "aria-label", "Previous month");
+  s.next = button("\u203A", () => move(1));
+  attr(s.next, "aria-label", "Next month");
+  nav.append(s.prev, month.wrap, year, s.next);
+  s.calendarArea.append(nav);
+  s.monthSelect.addEventListener("change", () => focusDay(s, String(s.yearInput.value).padStart(4, "0") + "-" + pad(+s.monthSelect.value + 1) + "-01"));
+  s.yearInput.addEventListener("change", () => {
+    const y = Number(s.yearInput.value);
+    if (!Number.isInteger(y) || y < +s.yearInput.min || y > +s.yearInput.max) {
+      s.dialogError.textContent = "Enter a year from " + s.yearInput.min + " to " + s.yearInput.max + ".";
+      attr(s.yearInput, "aria-invalid", "true");
+      return;
+    }
+    attr(s.yearInput, "aria-invalid", null);
+    s.dialogError.textContent = "";
+    focusDay(s, String(y).padStart(4, "0") + "-" + pad(+s.monthSelect.value + 1) + "-01");
+  });
+  s.caption = attr(node("h3", "blu-picker__caption blu-advanced-sr"), "aria-live", "polite");
+  s.caption.id = s.uid + "-caption";
+  s.calendarArea.append(s.caption);
+  s.calendar = attr(node("table", "blu-picker__calendar"), "role", "grid");
+  attr(s.calendar, "aria-labelledby", s.caption.id);
+  if (s.range) attr(s.calendar, "aria-multiselectable", "true");
+  s.calendarArea.append(s.calendar);
+  s.todayButton = button("Today", () => {
+    s.focusDate = today();
+    s.month = s.focusDate.slice(0, 7);
+    chooseDay(s, s.focusDate);
+  });
+  s.calendarArea.append(node("p", "blu-advanced-sr", "Arrow keys move by day or week. Home/End move within the week. Page Up/Down change month; hold Shift to change year."));
+  s.timeArea = node("div", "blu-picker__time-area");
+  s.timeArea.hidden = !s.hasTime;
+  s.dialog.append(s.timeArea);
+  const h = selectField(s, "Hour", "hour"), m = selectField(s, "Minute", "minute"), p = selectField(s, "AM / PM", "period");
+  s.hours = h.select;
+  s.minutes = m.select;
+  s.period = p.select;
+  s.periodField = p.wrap;
+  appendOption(s.period, "AM", "AM");
+  appendOption(s.period, "PM", "PM");
+  s.timeArea.append(h.wrap, m.wrap, p.wrap);
+  for (const el of [s.hours, s.minutes, s.period]) el.addEventListener("change", () => {
+    let hour = +s.hours.value;
+    if (s.cycle === 12) hour = hour % 12 + (s.period.value === "PM" ? 12 : 0);
+    s.draftTime = pad(hour) + ":" + pad(+s.minutes.value);
+    s.dialogError.textContent = "";
+    paintDraft(s);
+  });
+  s.selection = attr(node("div", "blu-picker__selection"), "role", "status");
+  attr(s.selection, "aria-atomic", "true");
+  s.selectionSpeech = node("span", "blu-advanced-sr");
+  s.selectionVisual = attr(node("span"), "aria-hidden", "true");
+  s.selection.append(s.selectionSpeech, s.selectionVisual);
+  s.dialogError = attr(node("div", "blu-picker__error"), "role", "alert");
+  s.dialogError.id = s.uid + "-dialog-error";
+  attr(s.yearInput, "aria-describedby", s.dialogError.id);
+  s.apply = button("Apply", () => commit(s, s.draftStart, s.draftEnd, s.draftTime), "blu-picker__button blu-picker__button--primary");
+  s.apply.hidden = !s.range && !s.hasTime;
+  s.typeButton = button("Type", () => {
+    const input = s.anchor;
+    close(s, false);
+    s.manualInput = input;
+    input.inputMode = "text";
+    input.focus({ preventScroll: true });
+  });
+  attr(s.typeButton, "aria-label", "Type a date or time");
+  s.typeButton.hidden = true;
+  const footer = node("div", "blu-picker__popup-actions");
+  footer.append(s.typeButton, s.todayButton, button("Cancel", () => close(s)), s.apply);
+  s.dialog.append(s.selection, s.dialogError, footer);
+  const outside = (event) => {
+    if (s.isOpen && !s.root.contains(event.target)) close(s, false);
+  };
+  const escape = (event) => {
+    if (s.isOpen && event.key === "Escape" && !event.defaultPrevented) {
+      event.preventDefault();
+      event.stopPropagation();
+      close(s);
+    }
+  };
+  const reposition = (event) => {
+    if (!s.isOpen || s.dialog.contains(event?.target)) return;
+    cancelAnimationFrame(s.positionFrame);
+    s.positionFrame = requestAnimationFrame(() => positionPopup(s));
+  };
+  document.addEventListener("pointerdown", outside, true);
+  document.addEventListener("focusin", outside);
+  s.root.addEventListener("keydown", escape);
+  window.addEventListener("resize", reposition);
+  document.addEventListener("scroll", reposition, true);
+  window.visualViewport?.addEventListener("resize", reposition);
+  window.visualViewport?.addEventListener("scroll", reposition);
+  if (window.ResizeObserver) {
+    s.popupObserver = new ResizeObserver(() => reposition());
+    s.popupObserver.observe(s.fieldRow);
+    s.popupObserver.observe(s.dialog);
+  }
+  s.dispose = () => {
+    close(s, false);
+    cancelAnimationFrame(s.positionFrame);
+    s.popupObserver?.disconnect();
+    document.removeEventListener("pointerdown", outside, true);
+    document.removeEventListener("focusin", outside);
+    s.root.removeEventListener("keydown", escape);
+    window.removeEventListener("resize", reposition);
+    document.removeEventListener("scroll", reposition, true);
+    window.visualViewport?.removeEventListener("resize", reposition);
+    window.visualViewport?.removeEventListener("scroll", reposition);
+  };
+}
+function update(s) {
+  const renderSignature = JSON.stringify(s.options);
+  if (s.renderSignature === renderSignature) return;
+  const active = s.isOpen ? document.activeElement : null, focusDate = active?.dataset?.date, focusId = active?.id;
+  const o = s.options;
+  s.label = String(o.Label || { DatePicker: "Date", TimePicker: "Time", DateTimePicker: "Date and time", DateRangePicker: "Date range" }[s.kind]);
+  s.locale = String(o.Locale || "en-US");
+  new Intl.DateTimeFormat(s.locale);
+  s.format = formatOptions.includes(o.DateFormat) ? o.DateFormat : "YYYY-MM-DD";
+  s.cycle = Number(o.HourCycle) === 12 ? 12 : 24;
+  s.step = Number(o.MinuteStep ?? 15);
+  if (!Number.isInteger(s.step) || s.step < 1 || s.step > 60) throw Error("MinuteStep must be a whole number from 1 to 60.");
+  s.firstDay = Number(o.FirstDayOfWeek ?? 1);
+  if (!Number.isInteger(s.firstDay) || s.firstDay < 0 || s.firstDay > 6) throw Error("FirstDayOfWeek must be 0\u20136.");
+  s.disabledDates = new Set(list(o.DisabledDatesJson ?? o.DisabledDates, "DisabledDates").map((item) => typeof item === "string" ? item : item.Date));
+  for (const d of s.disabledDates) if (!dateObject(d)) throw Error("DisabledDates must contain ISO calendar dates.");
+  for (const name of ["Min", "Max"]) if (o[name] && !(s.timeOnly ? timeValue(o[name]) : dateObject(datePart(o[name])) && (!s.dateTime || timeValue(timePart(o[name]))))) throw Error(name + " must use the documented ISO value format.");
+  if (o.Min && o.Max && o.Min > o.Max) throw Error("Min must be on or before Max.");
+  for (const field of ["MinRangeDays", "MaxRangeDays"]) if (o[field] !== void 0 && (!Number.isInteger(Number(o[field])) || Number(o[field]) < 0)) throw Error(field + " must be a non-negative whole number.");
+  if (o.MinRangeDays && o.MaxRangeDays && Number(o.MinRangeDays) > Number(o.MaxRangeDays)) throw Error("MinRangeDays must not exceed MaxRangeDays.");
+  const next = s.range ? [String(o.StartDate || ""), String(o.EndDate || "")] : [String(o.Value || "")];
+  const signature = JSON.stringify(next), changed = signature !== s.inputSignature;
+  s.inputSignature = signature;
+  if (s.range) {
+    s.start = next[0];
+    s.end = next[1];
+  } else s.value = next[0];
+  s.fields.forEach((field, index) => {
+    field.label.textContent = s.range ? s.label + (index ? " \u2014 end" : " \u2014 start") : s.dateTime ? s.label + (index ? " \u2014 time" : " \u2014 date") : s.label;
+    field.input.disabled = !!o.IsDisabled;
+    field.input.readOnly = !!o.IsReadOnly;
+    field.input.required = !!o.IsRequired;
+    field.input.placeholder = String(o.Placeholder || (s.timeOnly || s.dateTime && index ? s.cycle === 12 ? "9:00 AM" : "09:00" : s.format));
+  });
+  s.hint.textContent = s.timeOnly ? (s.cycle === 12 ? "h:mm AM/PM" : "HH:mm") + " \xB7 local time" : s.format + (s.dateTime ? " \xB7 " + (s.cycle === 12 ? "h:mm AM/PM" : "HH:mm") + " local time" : "");
+  s.title.textContent = s.label;
+  s.clearButton.disabled = !!o.IsDisabled || !!o.IsReadOnly;
+  if (changed || s.previousFormat !== s.format || s.previousCycle !== s.cycle) {
+    paintInputs(s);
+    const hasValue = next.some(Boolean);
+    setError(s, hasValue ? validate(s, s.timeOnly ? "" : s.range ? s.start : datePart(s.value), s.end || "", s.timeOnly ? s.value : timePart(s.value)) : "");
+    s.previousFormat = s.format;
+    s.previousCycle = s.cycle;
+  }
+  s.monthSelect.replaceChildren();
+  for (let m = 0; m < 12; m++) appendOption(s.monthSelect, m, new Intl.DateTimeFormat(s.locale, { month: "long" }).format(new Date(2024, m, 1)));
+  s.calendar.tHead?.remove();
+  const thead = node("thead"), tr = node("tr");
+  for (let i = 0; i < 7; i++) {
+    const d = new Date(2024, 0, 7 + (i + s.firstDay) % 7), th = node("th", "", new Intl.DateTimeFormat(s.locale, { weekday: "short" }).format(d));
+    th.scope = "col";
+    th.abbr = new Intl.DateTimeFormat(s.locale, { weekday: "long" }).format(d);
+    tr.append(th);
+  }
+  thead.append(tr);
+  s.calendar.prepend(thead);
+  s.presets.replaceChildren();
+  s.presets.hidden = !s.range;
+  if (s.range) for (const preset of list(o.PresetsJson ?? o.Presets, "Presets")) {
+    if (!preset.Label || !dateObject(preset.StartDate) || !dateObject(preset.EndDate)) throw Error("Presets need Label, StartDate and EndDate.");
+    const b = button(preset.Label, () => {
+      s.draftStart = preset.StartDate;
+      s.draftEnd = preset.EndDate;
+      s.rangeNext = "start";
+      s.focusDate = s.draftStart;
+      s.month = s.focusDate.slice(0, 7);
+      s.dialogError.textContent = "";
+      paintCalendar(s);
+      paintDraft(s);
+    });
+    b.disabled = !!validateRange(preset.StartDate, preset.EndDate, { ...o, disabled: s.disabledDates });
+    s.presets.append(b);
+  }
+  if (s.isOpen) {
+    if (o.IsDisabled || o.IsReadOnly || changed) close(s);
+    else {
+      paintCalendar(s);
+      paintTimes(s);
+      if (focusDate) s.calendar.querySelector('[data-date="' + focusDate + '"]')?.focus();
+      else if (focusId) document.getElementById(focusId)?.focus();
+      positionPopup(s);
+    }
+  }
+  s.renderSignature = renderSignature;
+}
+var installDateRangePicker = () => createAPI("DateRangePicker", init, update);
+export {
+  installDateRangePicker
+};