@rastr/controls 0.0.0-stage → 0.1.0-beta.2

package/dist/index.js

@@ -0,0 +1,753 @@
+// src/dom.ts
+function h(tag, props = {}, ...children) {
+  const el = document.createElement(tag);
+  if (props.class) el.className = props.class;
+  for (const [name, value] of Object.entries(props.attrs ?? {})) setAttr(el, name, value);
+  if (props.text !== void 0) el.textContent = props.text;
+  for (const child of children) {
+    if (child !== null && child !== void 0 && child !== false) el.append(child);
+  }
+  return el;
+}
+function setAttr(el, name, value) {
+  if (value === false || value === null || value === void 0) el.removeAttribute(name);
+  else el.setAttribute(name, value === true ? "" : String(value));
+}
+var ids = 0;
+var uniqueId = (prefix) => `${prefix}-${++ids}`;
+
+// src/popover.ts
+var GAP_PX = 4;
+var VIEWPORT_MARGIN_PX = 8;
+var POPOVER_OPEN_EVENT = "rastr:popover-open";
+var current = null;
+function closeControlPopover(within) {
+  if (current && (!within || within.contains(current.anchor) || within.contains(current.element))) current.close();
+}
+function openControlPopover(anchor, content, options) {
+  current?.close();
+  const host = anchor.closest("dialog, .rs-grid") ?? document.body;
+  const element = h("div", { class: "rs-control-popover" }, content);
+  host.append(element);
+  const position = () => {
+    const rect = anchor.getBoundingClientRect();
+    element.style.minWidth = `${rect.width}px`;
+    element.style.removeProperty("max-height");
+    const box = element.getBoundingClientRect();
+    const below = window.innerHeight - VIEWPORT_MARGIN_PX - (rect.bottom + GAP_PX);
+    const above = rect.top - GAP_PX - VIEWPORT_MARGIN_PX;
+    let top;
+    if (box.height <= below || box.height > above && below >= above) {
+      top = rect.bottom + GAP_PX;
+      if (box.height > below) element.style.maxHeight = `${Math.max(below, 0)}px`;
+    } else {
+      const height = Math.min(box.height, above);
+      if (box.height > above) element.style.maxHeight = `${Math.max(above, 0)}px`;
+      top = rect.top - GAP_PX - height;
+    }
+    const left = Math.max(VIEWPORT_MARGIN_PX, Math.min(rect.left, window.innerWidth - Math.max(box.width, rect.width) - VIEWPORT_MARGIN_PX));
+    element.style.top = `${top}px`;
+    element.style.left = `${left}px`;
+  };
+  let closed = false;
+  const onPointerDown = (event) => {
+    const target = event.target;
+    if (!anchor.isConnected || !element.contains(target) && !anchor.contains(target)) popover.close();
+  };
+  const onKeyDown = () => {
+    if (!anchor.isConnected) popover.close();
+  };
+  const onScroll = (event) => {
+    if (!(event.target instanceof Node && element.contains(event.target))) popover.close();
+  };
+  const onResize = () => popover.close();
+  const onFocusOut = (event) => {
+    const next = event.relatedTarget;
+    if (next instanceof Node && !element.contains(next) && !anchor.contains(next)) popover.close();
+  };
+  const onOtherOpen = (event) => {
+    if (event.detail !== element) popover.close();
+  };
+  const popover = {
+    element,
+    anchor,
+    close() {
+      if (closed) return;
+      closed = true;
+      if (current === popover) current = null;
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("keydown", onKeyDown, true);
+      document.removeEventListener("scroll", onScroll, true);
+      document.removeEventListener(POPOVER_OPEN_EVENT, onOtherOpen);
+      window.removeEventListener("resize", onResize);
+      element.removeEventListener("focusout", onFocusOut);
+      element.remove();
+      options.onClose();
+    }
+  };
+  position();
+  document.dispatchEvent(new CustomEvent(POPOVER_OPEN_EVENT, { detail: element }));
+  document.addEventListener("pointerdown", onPointerDown, true);
+  document.addEventListener("keydown", onKeyDown, true);
+  document.addEventListener("scroll", onScroll, true);
+  document.addEventListener(POPOVER_OPEN_EVENT, onOtherOpen);
+  window.addEventListener("resize", onResize);
+  element.addEventListener("focusout", onFocusOut);
+  current = popover;
+  return popover;
+}
+
+// src/select.ts
+var TYPEAHEAD_MS = 600;
+var PAGE = 10;
+function createSelect(init) {
+  let options = init.options;
+  let value = init.value;
+  let popover = null;
+  let optionEls = [];
+  let active = -1;
+  let typed = "";
+  let typedAt = 0;
+  const listId = uniqueId("rs-select-list");
+  const label = h("span", { class: "rs-select__label" });
+  const element = h(
+    "button",
+    {
+      class: init.className ? `rs-select ${init.className}` : "rs-select",
+      attrs: { type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": "false", "aria-label": init.label }
+    },
+    label
+  );
+  const render = () => {
+    const chosen = options.find((o) => o.value === value);
+    label.textContent = chosen?.label ?? init.placeholder ?? "";
+    setAttr(element, "data-value", value);
+    setAttr(element, "data-placeholder", chosen === void 0);
+  };
+  const enabledFrom = (index, step) => {
+    for (let i = Math.max(0, Math.min(index, options.length - 1)); i >= 0 && i < options.length; i += step) {
+      if (!options[i]?.disabled) return i;
+    }
+    return active;
+  };
+  const setActive = (index, step = 1) => {
+    if (optionEls.length === 0) return;
+    active = enabledFrom(index, step);
+    optionEls.forEach((el2, i) => setAttr(el2, "data-active", i === active));
+    const el = optionEls[active];
+    setAttr(element, "aria-activedescendant", el?.id);
+    el?.scrollIntoView?.({ block: "nearest" });
+  };
+  const close = () => popover?.close();
+  const choose = (index) => {
+    const option = options[index];
+    if (option?.disabled) return;
+    close();
+    element.focus();
+    if (!option) return;
+    const changed = option.value !== value;
+    value = option.value;
+    render();
+    if (changed) init.onChange(value);
+    init.onChoose?.(value);
+  };
+  const open = () => {
+    if (popover) return;
+    const list = h("div", { class: "rs-select__list", attrs: { role: "listbox", id: listId, "aria-label": init.label } });
+    optionEls = options.map((option, index) => {
+      const el = h("div", {
+        class: "rs-select__option",
+        attrs: {
+          role: "option",
+          id: `${listId}-${index}`,
+          "aria-selected": String(option.value === value),
+          "aria-disabled": option.disabled ? "true" : null,
+          "data-value": option.value,
+          title: option.title
+        },
+        text: option.label
+      });
+      el.addEventListener("pointerdown", (event) => event.preventDefault());
+      el.addEventListener("mousemove", () => {
+        if (!option.disabled) setActive(index);
+      });
+      el.addEventListener("click", () => choose(index));
+      return el;
+    });
+    list.append(...optionEls);
+    popover = openControlPopover(element, list, {
+      onClose: () => {
+        popover = null;
+        optionEls = [];
+        setAttr(element, "aria-expanded", "false");
+        setAttr(element, "aria-controls", null);
+        setAttr(element, "aria-activedescendant", null);
+      }
+    });
+    setAttr(element, "aria-expanded", "true");
+    setAttr(element, "aria-controls", listId);
+    setActive(Math.max(options.findIndex((o) => o.value === value), 0));
+  };
+  const search = (char) => {
+    const now = Date.now();
+    typed = now - typedAt > TYPEAHEAD_MS ? char : typed + char;
+    typedAt = now;
+    const find = (text) => options.findIndex((o) => !o.disabled && o.label.toLocaleLowerCase().startsWith(text.toLocaleLowerCase()));
+    let index = find(typed);
+    if (index < 0 && typed.length > 1) {
+      typed = char;
+      index = find(char);
+    }
+    return index;
+  };
+  const searching = () => typed !== "" && Date.now() - typedAt <= TYPEAHEAD_MS;
+  element.addEventListener("click", () => popover ? close() : open());
+  element.addEventListener("keydown", (event) => {
+    const opened = popover !== null;
+    let handled = true;
+    const key = event.key === " " && opened && searching() ? "Char" : event.key;
+    switch (key) {
+      case "ArrowDown":
+        if (opened) setActive(active + 1);
+        else open();
+        break;
+      case "ArrowUp":
+        if (opened && event.altKey) choose(active);
+        else if (opened) setActive(active - 1, -1);
+        else open();
+        break;
+      case "PageDown":
+        if (opened) setActive(active + PAGE);
+        else handled = false;
+        break;
+      case "PageUp":
+        if (opened) setActive(active - PAGE, -1);
+        else handled = false;
+        break;
+      case "Home":
+        if (opened) setActive(0);
+        else handled = false;
+        break;
+      case "End":
+        if (opened) setActive(optionEls.length - 1, -1);
+        else handled = false;
+        break;
+      case "Enter":
+      case " ":
+        if (opened) choose(active);
+        else open();
+        break;
+      case "Escape":
+        if (opened) close();
+        else handled = false;
+        break;
+      case "Tab":
+        close();
+        handled = false;
+        break;
+      default:
+        handled = false;
+        if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+          const index = search(event.key);
+          if (index >= 0 && opened) setActive(index);
+          else if (index >= 0 && options[index].value !== value) {
+            value = options[index].value;
+            render();
+            init.onChange(value);
+          }
+          handled = true;
+        }
+    }
+    if (handled) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  });
+  render();
+  return {
+    element,
+    get value() {
+      return value;
+    },
+    setValue(next) {
+      value = next;
+      render();
+    },
+    setOptions(next) {
+      options = next;
+      close();
+      render();
+    },
+    setLabel(label2) {
+      setAttr(element, "aria-label", label2);
+    },
+    focus: () => element.focus(),
+    destroy() {
+      close();
+      element.remove();
+    }
+  };
+}
+
+// src/i18n.ts
+var cs = {
+  chooseDate: "Vybrat datum",
+  chooseDateTime: "Vybrat datum a \u010Das",
+  calendar: "Kalend\xE1\u0159",
+  previousMonth: "P\u0159edchoz\xED m\u011Bs\xEDc",
+  nextMonth: "Dal\u0161\xED m\u011Bs\xEDc",
+  today: "Dnes",
+  clear: "Vymazat",
+  time: "\u010Cas",
+  invalidDate: "Neplatn\xE9 datum"
+};
+var en = {
+  chooseDate: "Choose date",
+  chooseDateTime: "Choose date and time",
+  calendar: "Calendar",
+  previousMonth: "Previous month",
+  nextMonth: "Next month",
+  today: "Today",
+  clear: "Clear",
+  time: "Time",
+  invalidDate: "Invalid date"
+};
+var CONTROLS_MESSAGES = { cs, en };
+function resolveControlsMessages(locale, overrides = {}) {
+  return { ...locale.toLowerCase().startsWith("en") ? en : cs, ...overrides };
+}
+
+// src/date-text.ts
+var ISO = /^(\d{4})-(\d{1,2})-(\d{1,2})(?:[ T](\d{1,2}):(\d{2}))?$/;
+var LOCAL = /^(\d{1,4})\s*([./-])\s*(\d{1,4})\s*\2\s*(\d{1,4})\.?(?:\s+(\d{1,2}):(\d{2}))?$/;
+var pad = (n) => String(n).padStart(2, "0");
+function isValidDay(year, month, day) {
+  const date = new Date(Date.UTC(year, month - 1, day));
+  return date.getUTCFullYear() === year && date.getUTCMonth() === month - 1 && date.getUTCDate() === day;
+}
+var toIsoDay = (d) => `${d.year}-${pad(d.month)}-${pad(d.day)}`;
+function dayOf(value, kind) {
+  if (!value) return null;
+  if (kind === "date") {
+    const match = /^(\d{4})-(\d{2})-(\d{2})/.exec(value);
+    return match ? { year: Number(match[1]), month: Number(match[2]), day: Number(match[3]) } : null;
+  }
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? null : { year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate() };
+}
+function timeOf(value) {
+  const date = value ? new Date(value) : null;
+  return date && !Number.isNaN(date.getTime()) ? `${pad(date.getHours())}:${pad(date.getMinutes())}` : "00:00";
+}
+function parseTime(text) {
+  const match = /^\s*(\d{1,2}):(\d{2})\s*$/.exec(text);
+  if (!match) return void 0;
+  const hours = Number(match[1]);
+  const minutes = Number(match[2]);
+  return hours < 24 && minutes < 60 ? { hours, minutes } : void 0;
+}
+function valueOf(day, kind, time = { hours: 0, minutes: 0 }) {
+  return kind === "date" ? toIsoDay(day) : new Date(day.year, day.month - 1, day.day, time.hours, time.minutes).toISOString();
+}
+function dateOrder(locale) {
+  const parts = new Intl.DateTimeFormat(locale, { day: "numeric", month: "numeric", year: "numeric", timeZone: "UTC" }).formatToParts(
+    new Date(Date.UTC(2026, 1, 1))
+  );
+  return parts.filter((p) => p.type === "day" || p.type === "month" || p.type === "year").map((p) => p.type);
+}
+function fullYear(twoDigits) {
+  const year = 2e3 + twoDigits;
+  return year <= (/* @__PURE__ */ new Date()).getFullYear() + 20 ? year : year - 100;
+}
+function parseDateText(text, locale, kind) {
+  const trimmed = text.trim();
+  if (trimmed === "") return null;
+  let year;
+  let month;
+  let day;
+  let hours;
+  let minutes;
+  const iso = ISO.exec(trimmed);
+  if (iso) {
+    [year, month, day] = [Number(iso[1]), Number(iso[2]), Number(iso[3])];
+    [hours, minutes] = [iso[4], iso[5]];
+  } else {
+    const local = LOCAL.exec(trimmed);
+    if (!local) return void 0;
+    const numbers = [local[1], local[3], local[4]];
+    const fields = {};
+    dateOrder(locale).forEach((field, i) => fields[field] = numbers[i] ?? "");
+    const rawYear = fields.year ?? "";
+    if ((fields.day ?? "").length > 2 || (fields.month ?? "").length > 2 || rawYear.length !== 2 && rawYear.length !== 4) return void 0;
+    [day, month] = [Number(fields.day), Number(fields.month)];
+    year = rawYear.length === 2 ? fullYear(Number(rawYear)) : Number(rawYear);
+    [hours, minutes] = [local[5], local[6]];
+  }
+  if (!isValidDay(year, month, day)) return void 0;
+  if (kind === "date") return hours === void 0 ? toIsoDay({ year, month, day }) : void 0;
+  const time = hours === void 0 ? { hours: 0, minutes: 0 } : parseTime(`${hours}:${minutes}`);
+  return time ? valueOf({ year, month, day }, kind, time) : void 0;
+}
+function formatDateText(value, locale, kind) {
+  const day = dayOf(value, kind);
+  if (!day) return "";
+  const text = new Intl.DateTimeFormat(locale, { day: "numeric", month: "numeric", year: "numeric", timeZone: "UTC" }).format(
+    new Date(Date.UTC(day.year, day.month - 1, day.day))
+  );
+  return kind === "date" ? text : `${text} ${timeOf(value)}`;
+}
+function datePattern(locale, kind) {
+  const czech = /^(cs|sk)\b/i.test(locale);
+  const letters = { day: "d", month: "m", year: czech ? "rrrr" : "yyyy" };
+  const date = new Intl.DateTimeFormat(locale, { day: "numeric", month: "numeric", year: "numeric", timeZone: "UTC" }).formatToParts(new Date(Date.UTC(2026, 1, 1))).map((part) => letters[part.type] ?? part.value).join("").replace(/[\u00a0\u202f]/g, " ");
+  return kind === "date" ? date : `${date} hh:mm`;
+}
+
+// src/calendar.ts
+var sameDay = (a, b) => a !== null && a.year === b.year && a.month === b.month && a.day === b.day;
+function addDays(day, days) {
+  const date = new Date(Date.UTC(day.year, day.month - 1, day.day + days));
+  return { year: date.getUTCFullYear(), month: date.getUTCMonth() + 1, day: date.getUTCDate() };
+}
+function addMonths(day, months) {
+  const first = new Date(Date.UTC(day.year, day.month - 1 + months, 1));
+  const year = first.getUTCFullYear();
+  const month = first.getUTCMonth() + 1;
+  const last = new Date(Date.UTC(year, month, 0)).getUTCDate();
+  return { year, month, day: Math.min(day.day, last) };
+}
+function firstWeekday(locale) {
+  try {
+    const intl = new Intl.Locale(locale);
+    const firstDay = (intl.getWeekInfo?.() ?? intl.weekInfo)?.firstDay;
+    if (firstDay !== void 0) return firstDay % 7;
+  } catch {
+  }
+  return /^en(-US)?$/i.test(locale) ? 0 : 1;
+}
+function createCalendar(options) {
+  const m = options.messages;
+  let focused = options.selected ?? options.today;
+  let time = options.time;
+  const titleId = uniqueId("rs-calendar-title");
+  const title = h("span", { class: "rs-calendar__title", attrs: { id: titleId, "aria-live": "polite" } });
+  const nav = (step, label, glyph) => {
+    const button = h("button", { class: "rs-calendar__nav", attrs: { type: "button", "aria-label": label, "data-step": step }, text: glyph });
+    button.addEventListener("click", () => {
+      focused = addMonths(focused, step);
+      render();
+    });
+    return button;
+  };
+  const weekdays = h("div", { class: "rs-calendar__weekdays", attrs: { role: "row" } });
+  const grid = h("div", { class: "rs-calendar__grid", attrs: { role: "grid", "aria-labelledby": titleId } });
+  const element = h(
+    "div",
+    { class: "rs-calendar", attrs: { role: "dialog", "aria-modal": "false", "aria-label": `${m.calendar}: ${options.label}` } },
+    h("div", { class: "rs-calendar__head" }, title, nav(-1, m.previousMonth, "\u2039"), nav(1, m.nextMonth, "\u203A")),
+    grid
+  );
+  const start = firstWeekday(options.locale);
+  const weekdayFormat = new Intl.DateTimeFormat(options.locale, { weekday: "short", timeZone: "UTC" });
+  const weekdayName = new Intl.DateTimeFormat(options.locale, { weekday: "long", timeZone: "UTC" });
+  for (let i = 0; i < 7; i++) {
+    const date = new Date(Date.UTC(2026, 0, 4 + start + i));
+    weekdays.append(h("span", { attrs: { role: "columnheader", "aria-label": weekdayName.format(date) }, text: weekdayFormat.format(date) }));
+  }
+  const monthFormat = new Intl.DateTimeFormat(options.locale, { month: "long", year: "numeric", timeZone: "UTC" });
+  const fullFormat = new Intl.DateTimeFormat(options.locale, { dateStyle: "full", timeZone: "UTC" });
+  let timeInput = null;
+  const pick = (day) => {
+    const parsed = options.kind === "datetime" ? parseTime(time) : { hours: 0, minutes: 0 };
+    if (!parsed) {
+      if (timeInput) {
+        setAttr(timeInput, "aria-invalid", "true");
+        timeInput.focus();
+      }
+      return;
+    }
+    options.onPick(day, parsed);
+  };
+  const dayButtons = /* @__PURE__ */ new Map();
+  const keyOf = (d) => `${d.year}-${d.month}-${d.day}`;
+  const render = () => {
+    title.textContent = monthFormat.format(new Date(Date.UTC(focused.year, focused.month - 1, 1)));
+    const first = { year: focused.year, month: focused.month, day: 1 };
+    const weekday = new Date(Date.UTC(first.year, first.month - 1, 1)).getUTCDay();
+    let cursor = addDays(first, -((weekday - start + 7) % 7));
+    dayButtons.clear();
+    const rows = [];
+    for (let week = 0; week < 6; week++) {
+      const row = h("div", { attrs: { role: "row" } });
+      for (let i = 0; i < 7; i++) {
+        const day = cursor;
+        const isFocused = sameDay(focused, day);
+        const button = h("button", {
+          class: "rs-calendar__day",
+          attrs: {
+            type: "button",
+            role: "gridcell",
+            tabindex: isFocused ? 0 : -1,
+            "aria-label": fullFormat.format(new Date(Date.UTC(day.year, day.month - 1, day.day))),
+            "aria-selected": String(sameDay(options.selected, day)),
+            "data-selected": sameDay(options.selected, day),
+            "data-today": sameDay(options.today, day),
+            "data-outside": day.month !== focused.month
+          },
+          text: String(day.day)
+        });
+        button.addEventListener("click", () => pick(day));
+        dayButtons.set(keyOf(day), button);
+        row.append(button);
+        cursor = addDays(cursor, 1);
+      }
+      rows.push(row);
+    }
+    grid.replaceChildren(weekdays, ...rows);
+  };
+  const moveFocus = (next) => {
+    focused = next;
+    render();
+    dayButtons.get(keyOf(focused))?.focus();
+  };
+  grid.addEventListener("keydown", (event) => {
+    const weekday = (new Date(Date.UTC(focused.year, focused.month - 1, focused.day)).getUTCDay() - start + 7) % 7;
+    let next = null;
+    switch (event.key) {
+      case "ArrowLeft":
+        next = addDays(focused, -1);
+        break;
+      case "ArrowRight":
+        next = addDays(focused, 1);
+        break;
+      case "ArrowUp":
+        next = addDays(focused, -7);
+        break;
+      case "ArrowDown":
+        next = addDays(focused, 7);
+        break;
+      case "PageUp":
+        next = addMonths(focused, event.shiftKey ? -12 : -1);
+        break;
+      case "PageDown":
+        next = addMonths(focused, event.shiftKey ? 12 : 1);
+        break;
+      case "Home":
+        next = addDays(focused, -weekday);
+        break;
+      case "End":
+        next = addDays(focused, 6 - weekday);
+        break;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        event.stopPropagation();
+        pick(focused);
+        return;
+      default:
+        return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    moveFocus(next);
+  });
+  element.addEventListener("keydown", (event) => {
+    if (event.key !== "Escape") return;
+    event.preventDefault();
+    event.stopPropagation();
+    options.onCancel();
+  });
+  const action = (name, label, run) => {
+    const button = h("button", { class: "rs-calendar__action", attrs: { type: "button", "data-action": name }, text: label });
+    button.addEventListener("click", run);
+    return button;
+  };
+  const foot = h("div", { class: "rs-calendar__foot" }, action("clear", m.clear, () => options.onClear()));
+  if (options.kind === "datetime") {
+    const field = h("input", { class: "rs-calendar__time", attrs: { type: "text", inputmode: "numeric", "aria-label": m.time, placeholder: "hh:mm" } });
+    field.value = time;
+    field.addEventListener("input", () => {
+      time = field.value;
+      setAttr(field, "aria-invalid", parseTime(time) ? null : "true");
+    });
+    field.addEventListener("keydown", (event) => {
+      if (event.key !== "Enter") return;
+      event.preventDefault();
+      event.stopPropagation();
+      pick(focused);
+    });
+    timeInput = field;
+    foot.append(field);
+  }
+  foot.append(action("today", m.today, () => pick(options.today)));
+  element.append(foot);
+  render();
+  return {
+    element,
+    focus: () => dayButtons.get(keyOf(focused))?.focus()
+  };
+}
+
+// src/date-input.ts
+var CALENDAR_ICON = "M7 2v2H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2zM5 9h14v10H5z";
+function calendarIcon() {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("width", "14");
+  svg.setAttribute("height", "14");
+  svg.setAttribute("aria-hidden", "true");
+  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  path.setAttribute("d", CALENDAR_ICON);
+  path.setAttribute("fill", "currentColor");
+  svg.append(path);
+  return svg;
+}
+function sameMinute(a, b) {
+  const x = new Date(a);
+  const y = new Date(b);
+  return Math.floor(x.getTime() / 6e4) === Math.floor(y.getTime() / 6e4);
+}
+var todayOf = () => {
+  const now = /* @__PURE__ */ new Date();
+  return { year: now.getFullYear(), month: now.getMonth() + 1, day: now.getDate() };
+};
+function createDateInput(options) {
+  const m = resolveControlsMessages(options.locale, options.messages);
+  let value = options.value;
+  let popover = null;
+  const input = h("input", {
+    class: "rs-date__input",
+    attrs: {
+      type: "text",
+      autocomplete: "off",
+      "aria-label": options.label,
+      "aria-keyshortcuts": "Alt+ArrowDown",
+      placeholder: datePattern(options.locale, options.kind)
+    }
+  });
+  const button = h(
+    "button",
+    {
+      class: "rs-date__button",
+      attrs: { type: "button", tabindex: -1, "aria-haspopup": "dialog", "aria-expanded": "false", "aria-label": options.kind === "date" ? m.chooseDate : m.chooseDateTime }
+    },
+    calendarIcon()
+  );
+  const element = h("div", { class: options.className ? `rs-date ${options.className}` : "rs-date" }, input, button);
+  let shown = "";
+  const show = () => {
+    shown = formatDateText(value, options.locale, options.kind);
+    input.value = shown;
+    setAttr(input, "aria-invalid", null);
+    setAttr(input, "title", null);
+  };
+  const set = (next) => {
+    const changed = next !== value;
+    value = next;
+    show();
+    if (changed) options.onChange(value);
+  };
+  const commitText = () => {
+    if (input.value === shown) {
+      setAttr(input, "aria-invalid", null);
+      return true;
+    }
+    const parsed = parseDateText(input.value, options.locale, options.kind);
+    if (parsed === void 0) {
+      setAttr(input, "aria-invalid", "true");
+      setAttr(input, "title", m.invalidDate);
+      return false;
+    }
+    setAttr(input, "title", null);
+    if (options.kind === "datetime" && parsed !== null && value !== null && sameMinute(parsed, value)) {
+      show();
+      return true;
+    }
+    set(parsed);
+    return true;
+  };
+  const close = () => popover?.close();
+  const open = () => {
+    if (popover) return;
+    const typed = parseDateText(input.value, options.locale, options.kind);
+    const shown2 = typed === void 0 ? value : typed;
+    const calendar = createCalendar({
+      kind: options.kind,
+      selected: dayOf(shown2, options.kind),
+      today: todayOf(),
+      time: timeOf(options.kind === "datetime" ? shown2 : null),
+      locale: options.locale,
+      messages: m,
+      label: options.label,
+      onPick: (day, time) => {
+        close();
+        set(valueOf(day, options.kind, time));
+        input.focus();
+      },
+      onClear: () => {
+        close();
+        set(null);
+        input.focus();
+      },
+      onCancel: () => {
+        close();
+        input.focus();
+      }
+    });
+    popover = openControlPopover(element, calendar.element, {
+      onClose: () => {
+        popover = null;
+        setAttr(button, "aria-expanded", "false");
+      }
+    });
+    setAttr(button, "aria-expanded", "true");
+    calendar.focus();
+  };
+  input.addEventListener("blur", () => {
+    commitText();
+  });
+  input.addEventListener("keydown", (event) => {
+    if (event.key === "Enter") {
+      if (!commitText()) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    } else if (event.key === "ArrowDown" && event.altKey) {
+      event.preventDefault();
+      event.stopPropagation();
+      open();
+    }
+  });
+  button.addEventListener("pointerdown", (event) => event.preventDefault());
+  button.addEventListener("click", () => popover ? close() : open());
+  show();
+  return {
+    element,
+    input,
+    get value() {
+      return value;
+    },
+    setValue(next) {
+      value = next;
+      show();
+    },
+    focus: () => input.focus(),
+    destroy() {
+      close();
+      element.remove();
+    }
+  };
+}
+export {
+  CONTROLS_MESSAGES,
+  POPOVER_OPEN_EVENT,
+  closeControlPopover,
+  createDateInput,
+  createSelect,
+  datePattern,
+  formatDateText,
+  openControlPopover,
+  parseDateText,
+  resolveControlsMessages
+};
+//# sourceMappingURL=index.js.map