@k2b/ui 0.44.0 → 0.45.0

package/dist/ssr/inputs/DatePicker.js

@@ -18,32 +18,44 @@ var _tmpl$ = ["<i class=\"", "\" aria-hidden=\"true\"></i>"],
   _tmpl$0 = ["<button type=\"button\">", "</button>"],
   _tmpl$1 = ["<div class=\"k2b-date-weekdays\" aria-hidden=\"true\">", "", "</div>"],
   _tmpl$10 = ["<div class=\"k2b-date-grid\" role=\"grid\">", "", "</div>"],
-  _tmpl$11 = ["<section class=\"k2b-date-calendar\"", "><header class=\"k2b-date-calendar__header\"><button type=\"button\" class=\"k2b-date-calendar__nav\"", "><i class=\"ti ti-chevron-left\" aria-hidden=\"true\"></i></button><button type=\"button\" class=\"k2b-date-calendar__title\">", "</button><button type=\"button\" class=\"k2b-date-calendar__nav\"", "><i class=\"ti ti-chevron-right\" aria-hidden=\"true\"></i></button></header>", "</section>"],
-  _tmpl$12 = ["<div class=\"k2b-date-months\" role=\"group\" aria-label=\"", "\">", "</div>"],
-  _tmpl$13 = ["<button type=\"button\"", ">", "</button>"],
-  _tmpl$14 = ["<span class=\"k2b-date-weekend\" style=\"", "\"></span>"],
-  _tmpl$15 = ["<span", ">", "</span>"],
-  _tmpl$16 = ["<span class=\"k2b-date-weekend\" aria-hidden=\"true\" style=\"", "\"></span>"],
-  _tmpl$17 = ["<div class=\"k2b-date-week\" role=\"row\">", "</div>"],
-  _tmpl$18 = ["<button type=\"button\" role=\"gridcell\"", ">", "</button>"],
-  _tmpl$19 = ["<span>", "</span>"],
-  _tmpl$20 = ["<label class=\"k2b-date-time\">", "<span class=\"k2b-date-time__control\"><input type=\"text\" inputmode=\"numeric\"", " placeholder=\"09:00\"", "><i class=\"ti ti-clock\" aria-hidden=\"true\"></i></span></label>"],
-  _tmpl$21 = ["<div class=\"k2b-date-popover__body\">", "", "</div>"],
-  _tmpl$22 = ["<button type=\"button\" class=\"k2b-date-optional-time__remove\"", "><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button>"],
-  _tmpl$23 = ["<div class=\"k2b-date-optional-time\"", ">", "</div>"],
-  _tmpl$24 = ["<div class=\"k2b-date-actions\">", "<button type=\"button\" class=\"k2b-date-apply\"", ">", "</button></div>"],
-  _tmpl$25 = ["<button type=\"button\" class=\"k2b-date-optional-time__add\"><i class=\"ti ti-clock-plus\" aria-hidden=\"true\"></i>", "</button>"],
-  _tmpl$26 = ["<span class=\"k2b-date-range-value\"><span>", "</span><i class=\"ti ti-arrow-narrow-right\" aria-hidden=\"true\"></i><span>", "</span></span>"],
-  _tmpl$27 = ["<span class=\"k2b-date-duration\"><i class=\"ti ti-hourglass-low\" aria-hidden=\"true\"></i>", "</span>"],
-  _tmpl$28 = ["<div class=\"k2b-date-range-times\">", "", "</div>"],
-  _tmpl$29 = ["<div class=\"k2b-date-durations\" role=\"group\"", ">", "</div>"];
+  _tmpl$11 = ["<footer class=\"k2b-date-calendar__limits\"><span>", "</span><span>", "</span></footer>"],
+  _tmpl$12 = ["<section class=\"k2b-date-calendar\"", "><header class=\"k2b-date-calendar__header\"><button type=\"button\" class=\"k2b-date-calendar__nav\"", "><i class=\"ti ti-chevron-left\" aria-hidden=\"true\"></i></button><button type=\"button\" class=\"k2b-date-calendar__title\">", "</button><button type=\"button\" class=\"k2b-date-calendar__nav\"", "><i class=\"ti ti-chevron-right\" aria-hidden=\"true\"></i></button></header>", "", "</section>"],
+  _tmpl$13 = ["<div class=\"k2b-date-months\" role=\"group\" aria-label=\"", "\">", "</div>"],
+  _tmpl$14 = ["<button type=\"button\"", ">", "</button>"],
+  _tmpl$15 = ["<span class=\"k2b-date-weekend\" style=\"", "\"></span>"],
+  _tmpl$16 = ["<span", ">", "</span>"],
+  _tmpl$17 = ["<span class=\"k2b-date-weekend\" aria-hidden=\"true\" style=\"", "\"></span>"],
+  _tmpl$18 = ["<div class=\"k2b-date-week\" role=\"row\">", "</div>"],
+  _tmpl$19 = ["<button type=\"button\" role=\"gridcell\"", "", ">", "</button>"],
+  _tmpl$20 = ["<span>", "</span>"],
+  _tmpl$21 = ["<label class=\"k2b-date-time\">", "<span class=\"k2b-date-time__control\"><input type=\"text\" inputmode=\"numeric\"", " placeholder=\"09:00\"", "><i class=\"ti ti-clock\" aria-hidden=\"true\"></i></span></label>"],
+  _tmpl$22 = ["<p", " class=\"k2b-date-status\"", ">", "</p>"],
+  _tmpl$23 = ["<span class=\"k2b-sr-only\" aria-live=\"polite\">", "</span>"],
+  _tmpl$24 = ["<button type=\"button\" class=\"k2b-input-shell__clear k2b-input-clear-action k2b-date-field__clear\"", "><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button>"],
+  _tmpl$25 = ["<button type=\"button\" class=\"k2b-date-field__toggle\" tabindex=\"-1\"", "><i class=\"ti ti-chevron-down\" aria-hidden=\"true\"></i></button>"],
+  _tmpl$26 = ["<div class=\"k2b-date-popover__body\">", "", "</div>"],
+  _tmpl$27 = ["<div class=\"k2b-date-picker k2b-date-field\"", "><div class=\"k2b-input-shell\"", "><span class=\"k2b-input-shell__icon k2b-date-field__icon\" aria-hidden=\"true\"><i class=\"ti ti-calendar\"></i></span>", "", "", "<div", " class=\"k2b-date-popover\" popover=\"manual\" role=\"dialog\"", ">", "</div></div>", "</div>"],
+  _tmpl$28 = "<span class=\"k2b-date-field__lock\" aria-hidden=\"true\"><i class=\"ti ti-lock\"></i></span>",
+  _tmpl$29 = ["<div class=\"k2b-date-actions\">", "<button type=\"button\" class=\"k2b-date-apply\"", ">", "</button></div>"],
+  _tmpl$30 = ["<span class=\"k2b-date-duration\"><i class=\"ti ti-hourglass-low\" aria-hidden=\"true\"></i>", "</span>"],
+  _tmpl$31 = ["<div class=\"k2b-date-picker k2b-date-field\" data-range=\"true\"", "><div class=\"k2b-input-shell\" role=\"group\"", "><span class=\"k2b-input-shell__icon k2b-date-field__icon\" aria-hidden=\"true\"><i class=\"ti ti-calendar-stats\"></i></span>", "<i class=\"ti ti-arrow-narrow-right k2b-date-field__arrow\" aria-hidden=\"true\"></i>", "<span class=\"k2b-date-field__spacer\"></span>", "", "<div", " class=\"k2b-date-popover\" popover=\"manual\" role=\"dialog\"", ">", "</div></div>", "</div>"],
+  _tmpl$32 = ["<button type=\"button\" class=\"k2b-date-optional-time__remove\"", "><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button>"],
+  _tmpl$33 = ["<div class=\"k2b-date-optional-time\"", ">", "</div>"],
+  _tmpl$34 = ["<button type=\"button\" class=\"k2b-date-optional-time__add\"><i class=\"ti ti-clock-plus\" aria-hidden=\"true\"></i>", "</button>"],
+  _tmpl$35 = ["<span class=\"k2b-date-range-value\"><span>", "</span><i class=\"ti ti-arrow-narrow-right\" aria-hidden=\"true\"></i><span>", "</span></span>"],
+  _tmpl$36 = ["<div class=\"k2b-date-range-times\">", "", "</div>"],
+  _tmpl$37 = ["<div class=\"k2b-date-durations\" role=\"group\"", ">", "</div>"];
 import { dates } from "@k2b/stdlib";
-import { createEffect, createMemo, createSignal, For, onCleanup, onMount, Show } from "solid-js";
+import { batch, createEffect, createMemo, createSignal, For, on, onCleanup, onMount, Show } from "solid-js";
+import { prefersMenuSheet } from "../actions/phone-sheet";
 import { createFieldMeta, Field, fieldControlAria, fieldDescribedBy } from "../internal/field";
 import { returnFocus, ringOnReturn } from "../internal/focus-return";
 import { useDateConfigLocale } from "../intl/locale";
 import { resolveUiMessages, useUiMessages } from "../intl/messages";
 import { isWeekendKey } from "../intl/weekend";
+import { dateInputPattern, formatDateInput, parseDateInput } from "./date-input";
+import { resolveDateInputMessages } from "./date-input-messages";
+import { draftStatusText, errorText, formatDateLong, limitErrorText, rangeStatusText, restStatusText, spokenDateText, typingStatusText } from "./date-input-status";
 import { dateKey, displayDate, filterTimeInput, formatDateOnlyRangeDuration, formatDateTimeValue, inRange, isCompleteTime, isDateKey, isRangeEdge, monthDate, monthNames, msUntilNextDay, normalizeTimeInput, parseDateValue, pickerContext, pickRangeDay, previewRange, rangeAnchor, resolveFocusDay, splitDateTime, toDateTimeValue, weekendBands, yearMonth } from "./date-picker";
 import { commitFieldValue, resolveMaybeAccessor } from "./field-contract";
 const popoverIsOpen = popover => {
@@ -54,10 +66,18 @@ const popoverIsOpen = popover => {
     return false;
   }
 };
-export const placeDatePopover = (trigger, popover, wide) => {
+
+/** `below` is a line under the trigger that the panel must not cover, such as a typed field's status line. */
+export const placeDatePopover = (trigger, popover, wide, below) => {
   const margin = 8;
   const gap = 4;
-  const rect = trigger.getBoundingClientRect();
+  const triggerRect = trigger.getBoundingClientRect();
+  const belowRect = below?.getBoundingClientRect();
+  const rect = {
+    left: triggerRect.left,
+    top: triggerRect.top,
+    bottom: Math.max(triggerRect.bottom, belowRect?.height ? belowRect.bottom : 0)
+  };
   // Keep the panel at its designed width instead of stretching to a full-width
   // trigger; it only ever shrinks to fit a narrow viewport.
   const preferredWidth = wide ? 440 : 336;
@@ -234,7 +254,19 @@ function DatePickerPanel(props) {
   const [view, setView] = createSignal("days");
   const context = createMemo(() => pickerContext(props.dateConfig));
   const month = createMemo(() => yearMonth(props.visibleMonth(), context()));
-  const weeks = createMemo(() => dates.getMonthGrid(month().year, month().month, context()));
+  // Always six weeks: typing moves an open calendar between months, and a month with fewer weeks would resize it.
+  const weeks = createMemo(() => {
+    const grid = [...dates.getMonthGrid(month().year, month().month, context())];
+    while (grid.length < 6) {
+      const last = grid[grid.length - 1].at(-1);
+      grid.push(Array.from({
+        length: 7
+      }, (_, index) => dates.addDays(last, index + 1, context())));
+    }
+    return grid;
+  });
+  const blocked = key => Boolean(props.min && key < props.min || props.max && key > props.max);
+  const inputMessages = createMemo(() => resolveDateInputMessages(context().locale));
   const weekdays = createMemo(() => dates.weekdays(context()));
   const months = createMemo(() => monthNames(context()));
   const dayNameFormatter = createMemo(() => new Intl.DateTimeFormat(context().locale, {
@@ -291,7 +323,7 @@ function DatePickerPanel(props) {
   let calendar;
   // Days that belong to the visible month; the roving tabindex must land on one
   // of them or the grid becomes unreachable by keyboard after month navigation.
-  const monthDayKeys = createMemo(() => dayRows().flat().filter(day => !day.outside).map(day => day.key));
+  const monthDayKeys = createMemo(() => dayRows().flat().filter(day => !day.outside && !blocked(day.key)).map(day => day.key));
   // Remembers where arrow-key navigation left off so Tab returns to that day.
   const [focusedKey, setFocusedKey] = createSignal();
   const defaultFocus = createMemo(() => resolveFocusDay(monthDayKeys(), focusedKey() || props.focusDate?.() || props.selected?.() || todayKey()));
@@ -299,8 +331,18 @@ function DatePickerPanel(props) {
   const moveYear = delta => props.setVisibleMonth(monthDate(month().year + delta, month().month, context()));
   const previousLabel = () => view() === "days" ? messages().previousMonth : messages().previousYear;
   const nextLabel = () => view() === "days" ? messages().nextMonth : messages().nextYear;
+  // A step whose whole month (or year) lies outside min/max is not offered.
+  const stepBlocked = delta => {
+    if (view() === "days") {
+      const target = dateKey(dates.addMonths(props.visibleMonth(), delta, context()), context()).slice(0, 7);
+      return Boolean(props.min && target < props.min.slice(0, 7) || props.max && target > props.max.slice(0, 7));
+    }
+    const year = String(month().year + delta);
+    return Boolean(props.min && year < props.min.slice(0, 4) || props.max && year > props.max.slice(0, 4));
+  };
   const focusDate = date => {
     const targetKey = dateKey(date, context());
+    if (blocked(targetKey)) return;
     if (!dates.isSameMonth(date, props.visibleMonth(), context())) props.setVisibleMonth(date);
     queueMicrotask(() => calendar?.querySelector(`[data-date-day="${targetKey}"]`)?.focus());
   };
@@ -330,7 +372,7 @@ function DatePickerPanel(props) {
       focusDate(dates.addDays(day, offset, context()));
     }
   };
-  return _$ssr(_tmpl$11, _$ssrAttribute("aria-label", _$escape(messages().calendar, true), false), _$ssrAttribute("aria-label", _$escape(previousLabel(), true), false), _$escape(_$createComponent(Show, {
+  return _$ssr(_tmpl$12, _$ssrAttribute("aria-label", _$escape(messages().calendar, true), false), _$ssrAttribute("disabled", stepBlocked(-1), true) + _$ssrAttribute("aria-label", _$escape(previousLabel(), true), false), _$escape(_$createComponent(Show, {
     get when() {
       return view() === "days";
     },
@@ -340,16 +382,16 @@ function DatePickerPanel(props) {
     get children() {
       return dates.formatMonthYear(props.visibleMonth(), context());
     }
-  })), _$ssrAttribute("aria-label", _$escape(nextLabel(), true), false), _$escape(_$createComponent(Show, {
+  })), _$ssrAttribute("disabled", stepBlocked(1), true) + _$ssrAttribute("aria-label", _$escape(nextLabel(), true), false), _$escape(_$createComponent(Show, {
     get when() {
       return view() === "days";
     },
     get fallback() {
-      return _$ssr(_tmpl$12, `Months in ${_$escape(month().year, true)}`, _$escape(_$createComponent(For, {
+      return _$ssr(_tmpl$13, `Months in ${_$escape(month().year, true)}`, _$escape(_$createComponent(For, {
         get each() {
           return months();
         },
-        children: (name, index) => _$ssr(_tmpl$13, _$ssrAttribute("aria-pressed", _$escape(index(), true) === _$escape(month().month, true), false) + _$ssrAttribute("data-selected", index() === month().month ? "true" : _$escape(undefined, true), false), _$escape(name))
+        children: (name, index) => _$ssr(_tmpl$14, _$ssrAttribute("aria-pressed", _$escape(index(), true) === _$escape(month().month, true), false) + _$ssrAttribute("data-selected", index() === month().month ? "true" : _$escape(undefined, true), false), _$escape(name))
       })));
     },
     get children() {
@@ -357,22 +399,22 @@ function DatePickerPanel(props) {
         get each() {
           return bands();
         },
-        children: band => _$ssr(_tmpl$14, _$ssrStyleProperty("grid-column:", `${_$escape(band.start, true) + 1} / span ${_$escape(band.span, true)}`))
+        children: band => _$ssr(_tmpl$15, _$ssrStyleProperty("grid-column:", `${_$escape(band.start, true) + 1} / span ${_$escape(band.span, true)}`))
       })), _$escape(_$createComponent(For, {
         get each() {
           return weekdays();
         },
-        children: (day, index) => _$ssr(_tmpl$15, _$ssrAttribute("data-weekend", weekendColumns()[index()] ? "true" : _$escape(undefined, true), false), _$escape(day))
+        children: (day, index) => _$ssr(_tmpl$16, _$ssrAttribute("data-weekend", weekendColumns()[index()] ? "true" : _$escape(undefined, true), false), _$escape(day))
       }))), _$ssr(_tmpl$10, _$escape(_$createComponent(For, {
         get each() {
           return bands();
         },
-        children: band => _$ssr(_tmpl$16, _$ssrStyleProperty("grid-column:", `${_$escape(band.start, true) + 1} / span ${_$escape(band.span, true)}`) + _$ssrStyleProperty(";grid-row:", `1 / span ${_$escape(dayRows().length, true)}`))
+        children: band => _$ssr(_tmpl$17, _$ssrStyleProperty("grid-column:", `${_$escape(band.start, true) + 1} / span ${_$escape(band.span, true)}`) + _$ssrStyleProperty(";grid-row:", `1 / span ${_$escape(dayRows().length, true)}`))
       })), _$escape(_$createComponent(For, {
         get each() {
           return dayRows();
         },
-        children: week => _$ssr(_tmpl$17, _$escape(_$createComponent(For, {
+        children: week => _$ssr(_tmpl$18, _$escape(_$createComponent(For, {
           each: week,
           children: (cell, cellIndex) => {
             const selected = () => props.selected?.() === cell.key;
@@ -383,64 +425,1007 @@ function DatePickerPanel(props) {
             const active = () => selected() || isRangeEdge(cell.key, range());
             const focusable = () => cell.key === defaultFocus();
             const today = () => cell.key === todayKey();
-            return _$ssr(_tmpl$18, _$ssrAttribute("data-date-day", _$escape(cell.key, true), false) + _$ssrAttribute("data-date-focus", focusable() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-outside", cell.outside ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-weekend", weekendColumns()[cellIndex()] ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-in-range", inRange(cell.key, range()) && !active() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-today", today() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-current", today() ? "date" : _$escape(undefined, true), false) + _$ssrAttribute("aria-label", today() ? _$escape(todayLabel(cell.label), true) : _$escape(cell.label, true), false) + _$ssrAttribute("aria-selected", _$escape(active(), true), false) + _$ssrAttribute("tabindex", focusable() ? 0 : -1, false), _$escape(cell.number));
+            const label = () => {
+              const name = today() ? todayLabel(cell.label) : cell.label;
+              return blocked(cell.key) ? inputMessages().notSelectable({
+                date: name
+              }) : name;
+            };
+            return _$ssr(_tmpl$19, _$ssrAttribute("data-date-day", _$escape(cell.key, true), false) + _$ssrAttribute("data-date-focus", focusable() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-outside", cell.outside ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-weekend", weekendColumns()[cellIndex()] ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-in-range", inRange(cell.key, range()) && !active() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-today", today() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-current", today() ? "date" : _$escape(undefined, true), false) + _$ssrAttribute("aria-label", _$escape(label(), true), false) + _$ssrAttribute("aria-selected", _$escape(active(), true), false), _$ssrAttribute("disabled", blocked(cell.key), true) + _$ssrAttribute("tabindex", focusable() ? 0 : -1, false), _$escape(cell.number));
           }
         })))
       })))];
     }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.min || props.max;
+    },
+    get children() {
+      return _$ssr(_tmpl$11, props.min ? _$escape(inputMessages().limitFrom({
+        date: formatDateInput(props.min, context().locale)
+      })) : "", props.max ? _$escape(inputMessages().limitUntil({
+        date: formatDateInput(props.max, context().locale)
+      })) : "");
+    }
   })));
 }
 function TimeInput(props) {
   const messages = useUiMessages();
-  return _$ssr(_tmpl$20, _$escape(_$createComponent(Show, {
+  return _$ssr(_tmpl$21, _$escape(_$createComponent(Show, {
     get when() {
       return props.label;
     },
     get children() {
-      return _$ssr(_tmpl$19, _$escape(props.label));
+      return _$ssr(_tmpl$20, _$escape(props.label));
     }
   })), _$ssrAttribute("value", _$escape(props.time, true), false), _$ssrAttribute("aria-label", props.label ? _$escape(messages().timeLabel({
     label: props.label
   }), true) : _$escape(messages().time, true), false));
 }
+
+/** The calendar popover of a typed field: it lives inside the field's shell, so focus in the calendar keeps the field's focus edge. */
+function createCalendarPopover(options) {
+  const [open, setOpen] = createSignal(false);
+  let popover;
+  const place = () => {
+    const anchor = options.anchor();
+    if (anchor && popover && open()) placeDatePopover(anchor, popover, options.wide(), options.below());
+  };
+  const show = () => {
+    if (!popover || popoverIsOpen(popover)) return;
+    setOpen(true);
+    popover.showPopover();
+    place();
+  };
+  const close = () => {
+    if (popoverIsOpen(popover)) popover?.hidePopover();
+    setOpen(false);
+  };
+  createEffect(() => {
+    if (!open()) return;
+    window.addEventListener("resize", place);
+    window.addEventListener("scroll", place, true);
+    onCleanup(() => {
+      window.removeEventListener("resize", place);
+      window.removeEventListener("scroll", place, true);
+    });
+  });
+  onCleanup(close);
+  return {
+    open,
+    show,
+    close,
+    place,
+    ref: element => {
+      popover = element;
+      // The browser also hides a popover itself, for example when it leaves the top layer.
+      element.addEventListener("toggle", () => setOpen(popoverIsOpen(element)));
+    },
+    element: () => popover,
+    focusDay: () => queueMicrotask(() => popover?.querySelector('[data-date-focus="true"]')?.focus())
+  };
+}
+
+/** The day an empty calendar opens on: today, moved inside min/max, so a limited field never opens on locked months only. */
+const openingDay = (value, limits, context) => {
+  if (value) return value;
+  const today = dateKey(new Date(), context);
+  if (limits.min && today < limits.min) return limits.min;
+  if (limits.max && today > limits.max) return limits.max;
+  return today;
+};
+const fieldName = owner => typeof owner.label === "string" ? owner.label : owner["aria-label"];
+
+/** Clicks on the calendar's empty space keep focus where it is, so the draft and caret stay in the text. */
+const keepFocus = event => {
+  if (!event.target.closest("button")) event.preventDefault();
+};
+const caretToEnd = input => {
+  input?.focus();
+  input?.setSelectionRange(input.value.length, input.value.length);
+};
+function DateStatusLine(props) {
+  return [_$ssr(_tmpl$22, _$ssrAttribute("id", _$escape(props.id, true), false), _$ssrAttribute("data-tone", _$escape(props.tone, true), false) + _$ssrAttribute("title", typeof props.text === "string" && props.text ? _$escape(props.text, true) : _$escape(undefined, true), false), _$escape(props.text)), _$ssr(_tmpl$23, _$escape(props.announcement))];
+}
+
+/**
+ * The typed date field. The text and the calendar always show the same day: typing moves the calendar, picking a day
+ * fills the text, and the status line says which day the text means before it is committed.
+ */
+function DateTextField(props) {
+  const uiMessages = useUiMessages();
+  const meta = createFieldMeta(props.owner.id);
+  const locale = () => props.dateConfig().locale;
+  const t = createMemo(() => resolveDateInputMessages(locale()));
+  const today = () => dateKey(new Date(), props.dateConfig());
+  const format = key => key ? formatDateInput(key, locale()) : "";
+  const limits = () => ({
+    min: props.owner.min,
+    max: props.owner.max
+  });
+  const interactive = () => !props.owner.disabled && !props.owner.readOnly;
+  const [text, setText] = createSignal(format(props.value()));
+  const [dirty, setDirty] = createSignal(false);
+  const [failure, setFailure] = createSignal();
+  const [announcement, setAnnouncement] = createSignal("");
+  const [visibleMonth, setVisibleMonth] = createSignal(parseDateValue(openingDay(props.value(), limits(), props.dateConfig()), props.dateConfig()));
+  let shell;
+  let input;
+  let toggle;
+  let statusLine;
+  const [sheetOpen, setSheetOpen] = createSignal(false);
+  let announceTimer;
+  const calendar = createCalendarPopover({
+    anchor: () => shell,
+    below: () => statusLine,
+    wide: () => Boolean(props.owner.presets?.length)
+  });
+  const popoverId = `${meta.controlId}-calendar`;
+  const sheetId = `${meta.controlId}-sheet`;
+  // The status line holds the field's message slot, so it carries the `<id>-error` every field family uses.
+  const statusId = meta.errorId;
+  const parse = value => parseDateInput(value, {
+    today: today(),
+    locale: locale()
+  });
+  const parsed = createMemo(() => dirty() ? parse(text()) : undefined);
+  const draftKey = () => {
+    const result = parsed();
+    if (!result) return props.value();
+    return result.kind === "date" ? result.date : null;
+  };
+
+  // A value set from outside replaces the text, unless someone is typing.
+  createEffect(on([props.value, locale], () => {
+    if (dirty()) return;
+    setText(format(props.value()));
+    setFailure(undefined);
+    setVisibleMonth(parseDateValue(openingDay(props.value(), limits(), props.dateConfig()), props.dateConfig()));
+  }));
+  // The calendar follows the typed day, and a refused text stops being red once it means an allowed day.
+  createEffect(on(parsed, result => {
+    if (result?.kind === "date") {
+      setVisibleMonth(parseDateValue(result.date, props.dateConfig()));
+      if (!limitErrorText(result.date, limits(), locale(), t())) setFailure(undefined);
+    } else if (result?.kind === "empty") setFailure(undefined);
+  }));
+  onCleanup(() => clearTimeout(announceTimer));
+  const externalError = () => resolveMaybeAccessor(props.owner.error);
+  const invalid = () => Boolean(failure() || externalError());
+  const status = createMemo(() => {
+    const failed = failure();
+    if (failed) return {
+      tone: "error",
+      text: failed
+    };
+    const result = parsed();
+    if (result?.kind === "date") {
+      const limit = limitErrorText(result.date, limits(), locale(), t());
+      return limit ? {
+        tone: "rest",
+        text: limit
+      } : {
+        tone: "draft",
+        text: draftStatusText(result.date, result.note, locale(), t())
+      };
+    }
+    if (result?.kind === "error") return {
+      tone: "rest",
+      text: typingStatusText(result.error, locale(), t(), today())
+    };
+    const external = externalError();
+    if (external) return {
+      tone: "error",
+      text: external
+    };
+    const value = props.value();
+    if (!value || result) return {
+      tone: "rest",
+      text: ""
+    };
+    return {
+      tone: "rest",
+      text: props.owner.renderValue?.(value) ?? restStatusText(value, today(), locale())
+    };
+  });
+  const save = next => {
+    if (next !== props.value()) commitFieldValue(props.owner, next);
+  };
+  const fail = message => {
+    setFailure(message);
+    setAnnouncement(message);
+  };
+  /** Enter, leaving the field and a picked day commit; a refused text stays for correction and the value is kept. */
+  const commit = () => {
+    const result = parse(text());
+    setDirty(false);
+    if (result.kind === "empty") {
+      if (props.owner.required) return fail(t().required);
+      setFailure(undefined);
+      return save(null);
+    }
+    if (result.kind === "error") return fail(errorText(result.error, locale(), t(), today()));
+    const limit = limitErrorText(result.date, limits(), locale(), t());
+    if (limit) return fail(limit);
+    setFailure(undefined);
+    setText(format(result.date));
+    save(result.date);
+  };
+  const restore = () => {
+    setText(format(props.value()));
+    setDirty(false);
+    setFailure(undefined);
+    setVisibleMonth(parseDateValue(openingDay(props.value(), limits(), props.dateConfig()), props.dateConfig()));
+    calendar.close();
+  };
+  const pick = key => {
+    setText(format(key));
+    setDirty(false);
+    setFailure(undefined);
+    save(key);
+    calendar.close();
+  };
+  const openSheet = async () => {
+    setSheetOpen(true);
+    calendar.close();
+    const {
+      openDateSheet
+    } = await import("./date-sheet");
+    await openDateSheet({
+      title: props.owner.label ?? props.owner["aria-label"],
+      subtitle: props.value() ? formatDateLong(props.value(), locale()) : t().noDate,
+      ariaLabel: fieldName(props.owner),
+      id: sheetId,
+      locale: locale() ?? "en",
+      content: close => _$createComponent(DatePickerPanel, {
+        visibleMonth: visibleMonth,
+        setVisibleMonth: setVisibleMonth,
+        selected: draftKey,
+        focusDate: draftKey,
+        onSelect: key => {
+          // Saved at once: the sheet's promise settles only after its history entry has gone.
+          pick(key);
+          close(key);
+        },
+        get dateConfig() {
+          return props.dateConfig();
+        },
+        get min() {
+          return props.owner.min;
+        },
+        get max() {
+          return props.owner.max;
+        }
+      })
+    });
+    setSheetOpen(false);
+    toggle?.focus({
+      preventScroll: true
+    });
+  };
+  /** Phones open the calendar as a sheet; there the text only brings up the keypad. */
+  const openCalendar = focusDay => {
+    if (!interactive()) return;
+    if (prefersMenuSheet()) return void openSheet();
+    if (!dirty()) setVisibleMonth(parseDateValue(openingDay(props.value(), limits(), props.dateConfig()), props.dateConfig()));
+    calendar.show();
+    if (focusDay) calendar.focusDay();
+  };
+  const onPointerDown = event => {
+    const target = event.target;
+    if (!interactive() || calendar.element()?.contains(target) || target.closest(".k2b-date-field__clear")) return;
+    const onIcon = target.closest(".k2b-date-field__toggle, .k2b-date-field__icon");
+    if (prefersMenuSheet()) {
+      if (onIcon) {
+        event.preventDefault();
+        void openSheet();
+      }
+      return;
+    }
+    if (onIcon) {
+      event.preventDefault();
+      input?.focus();
+      if (calendar.open()) calendar.close();else openCalendar(false);
+      return;
+    }
+    // A pointer in the text opens the calendar and keeps the caret; Tab focus never opens it.
+    if (event.button === 0 && !calendar.open()) setTimeout(() => openCalendar(false));
+  };
+  const onKeyDown = event => {
+    // A refused text keeps Enter too, so it does not submit the form around it.
+    if (event.key === "Enter" && (dirty() || calendar.open() || failure())) {
+      event.preventDefault();
+      commit();
+      calendar.close();
+    } else if (event.key === "Escape" && (dirty() || calendar.open() || failure())) {
+      event.preventDefault();
+      event.stopPropagation();
+      restore();
+    } else if (event.key === "ArrowDown") {
+      event.preventDefault();
+      openCalendar(true);
+    } else if (event.key === "ArrowUp" && event.altKey) {
+      event.preventDefault();
+      calendar.close();
+    }
+  };
+  const onFocusOut = event => {
+    const next = event.relatedTarget;
+    if (sheetOpen() || next === input || next && calendar.element()?.contains(next)) return;
+    if (dirty()) commit();
+    calendar.close();
+  };
+  return _$createComponent(Field, {
+    get ["class"]() {
+      return props.owner.class;
+    },
+    get label() {
+      return props.owner.label;
+    },
+    get description() {
+      return props.owner.description;
+    },
+    get required() {
+      return props.owner.required;
+    },
+    get disabled() {
+      return props.owner.disabled;
+    },
+    meta: meta,
+    get children() {
+      return _$ssr(_tmpl$27, _$ssrAttribute("data-open", calendar.open() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-readonly", props.owner.readOnly ? "true" : _$escape(undefined, true), false), _$ssrAttribute("data-invalid", invalid() ? "true" : _$escape(undefined, true), false), _$ssrElement("input", _$mergeProps(() => fieldControlAria(meta, props.owner), {
+        get id() {
+          return meta.controlId;
+        },
+        "class": "k2b-input",
+        type: "text",
+        inputMode: "numeric",
+        autocomplete: "off",
+        spellcheck: false,
+        role: "combobox",
+        "aria-haspopup": "dialog",
+        get ["aria-expanded"]() {
+          return calendar.open() || sheetOpen();
+        },
+        get ["aria-controls"]() {
+          return sheetOpen() ? sheetId : popoverId;
+        },
+        get ["aria-describedby"]() {
+          return [props.owner["aria-describedby"], props.owner.description ? meta.descriptionId : undefined, statusId].filter(Boolean).join(" ");
+        },
+        get ["aria-invalid"]() {
+          return invalid() ? "true" : undefined;
+        },
+        get placeholder() {
+          return props.owner.placeholder ?? datePattern(locale(), t());
+        },
+        get value() {
+          return text();
+        },
+        get disabled() {
+          return props.owner.disabled;
+        },
+        get readOnly() {
+          return props.owner.readOnly;
+        }
+      }), undefined, false), _$escape(_$createComponent(Show, {
+        get when() {
+          return _$memo(() => !!props.owner.clearable)() && interactive();
+        },
+        get children() {
+          return _$ssr(_tmpl$24, _$ssrAttribute("data-hidden", text() ? _$escape(undefined, true) : "true", false) + _$ssrAttribute("aria-label", _$escape(uiMessages().clearDate, true), false));
+        }
+      })), _$escape(_$createComponent(Show, {
+        get when() {
+          return !props.owner.readOnly;
+        },
+        get fallback() {
+          return _$ssr(_tmpl$28);
+        },
+        get children() {
+          return _$ssr(_tmpl$25, _$ssrAttribute("disabled", props.owner.disabled, true) + _$ssrAttribute("aria-label", calendar.open() ? _$escape(t().closeCalendar, true) : _$escape(t().openCalendar, true), false) + _$ssrAttribute("aria-expanded", _$escape(calendar.open() || sheetOpen(), true), false) + _$ssrAttribute("aria-controls", sheetOpen() ? _$escape(sheetId, true) : _$escape(popoverId, true), false));
+        }
+      })), _$ssrAttribute("id", _$escape(popoverId, true), false), _$ssrAttribute("aria-label", _$escape(fieldName(props.owner) ?? uiMessages().datePicker, true), false), _$escape(_$createComponent(Show, {
+        get when() {
+          return calendar.open();
+        },
+        get children() {
+          return _$ssr(_tmpl$26, _$escape(_$createComponent(PresetRail, {
+            get presets() {
+              return props.owner.presets;
+            },
+            onSelect: value => {
+              pick(value);
+              caretToEnd(input);
+            }
+          })), _$escape(_$createComponent(DatePickerPanel, {
+            visibleMonth: visibleMonth,
+            setVisibleMonth: setVisibleMonth,
+            selected: draftKey,
+            focusDate: draftKey,
+            onSelect: key => {
+              pick(key);
+              caretToEnd(input);
+            },
+            get dateConfig() {
+              return props.dateConfig();
+            },
+            get min() {
+              return props.owner.min;
+            },
+            get max() {
+              return props.owner.max;
+            }
+          })));
+        }
+      })), _$escape(_$createComponent(DateStatusLine, {
+        id: statusId,
+        get tone() {
+          return status().tone;
+        },
+        get text() {
+          return status().text;
+        },
+        get announcement() {
+          return announcement();
+        }
+      })));
+    }
+  });
+}
+const datePattern = (locale, t) => dateInputPattern(locale, {
+  day: t.dayLetters,
+  month: t.monthLetters,
+  year: t.yearLetters
+});
+
+/** "11.11.2026 – 14.11.2026", "11.11. bis 14.11." or "Nov 11 to Nov 14" pasted into either half fills both. */
+const splitPastedRange = text => {
+  const parts = text.trim().split(/\s*[–—]\s*|\s+-\s+|\s+(?:bis|to|until)\s+/i);
+  return parts.length === 2 && parts[0] && parts[1] ? [parts[0], parts[1]] : undefined;
+};
+
+/** A date-only range as two typed halves in one field; the calendar keeps two clicks and Apply. */
+function DateRangeTextField(props) {
+  const uiMessages = useUiMessages();
+  const meta = createFieldMeta(props.owner.id);
+  const locale = () => props.dateConfig().locale;
+  const t = createMemo(() => resolveDateInputMessages(locale()));
+  const today = () => dateKey(new Date(), props.dateConfig());
+  const format = key => key ? formatDateInput(key, locale()) : "";
+  const limits = () => ({
+    min: props.owner.min,
+    max: props.owner.max
+  });
+  const interactive = () => !props.owner.disabled && !props.owner.readOnly;
+  const [startText, setStartText] = createSignal(format(props.value().start));
+  const [endText, setEndText] = createSignal(format(props.value().end));
+  const [dirty, setDirty] = createSignal(false);
+  const [failure, setFailure] = createSignal();
+  const [announcement, setAnnouncement] = createSignal("");
+  const [visibleMonth, setVisibleMonth] = createSignal(parseDateValue(openingDay(props.value().start || props.value().end, limits(), props.dateConfig()), props.dateConfig()));
+  // The calendar's own draft: two clicks pick a range, Apply commits it.
+  const [picked, setPicked] = createSignal(props.value());
+  const [anchor, setAnchor] = createSignal(null);
+  const [previewDate, setPreviewDate] = createSignal(null);
+  let shell;
+  let startInput;
+  let endInput;
+  let toggle;
+  let statusLine;
+  const [sheetOpen, setSheetOpen] = createSignal(false);
+  let announceTimer;
+  const wide = () => Boolean(props.owner.datePresets?.length || props.owner.presets?.length);
+  const calendar = createCalendarPopover({
+    anchor: () => shell,
+    below: () => statusLine,
+    wide
+  });
+  const popoverId = `${meta.controlId}-calendar`;
+  const sheetId = `${meta.controlId}-sheet`;
+  // The status line holds the field's message slot, so it carries the `<id>-error` every field family uses.
+  const statusId = meta.errorId;
+  const name = () => fieldName(props.owner);
+  const parse = value => parseDateInput(value, {
+    today: today(),
+    locale: locale()
+  });
+  const halves = createMemo(() => dirty() ? [parse(startText()), parse(endText())] : undefined);
+  const draft = createMemo(() => {
+    const current = halves();
+    if (!current) return props.value();
+    const [start, end] = current;
+    return {
+      start: start.kind === "date" ? start.date : null,
+      end: end.kind === "date" ? end.date : null
+    };
+  });
+  const shownRange = createMemo(() => previewRange(picked(), anchor(), previewDate()));
+  const fill = range => {
+    setStartText(format(range.start));
+    setEndText(format(range.end));
+  };
+  createEffect(on([props.value, locale], () => {
+    if (dirty()) return;
+    fill(props.value());
+    setPicked(props.value());
+    setFailure(undefined);
+  }));
+  createEffect(on(draft, range => {
+    // A day picked in the calendar wrote this text itself; its half-picked range keeps going.
+    if (!dirty() || range.start === picked().start && range.end === picked().end) return;
+    setPicked(range);
+    setAnchor(null);
+    if (range.start || range.end) setVisibleMonth(parseDateValue(range.start || range.end, props.dateConfig()));
+    setFailure(undefined);
+  }));
+  onCleanup(() => clearTimeout(announceTimer));
+  const externalError = () => resolveMaybeAccessor(props.owner.error);
+  const invalid = () => Boolean(failure() || externalError());
+  const status = createMemo(() => {
+    const failed = failure();
+    if (failed) return {
+      tone: "error",
+      text: failed
+    };
+    const current = halves();
+    if (current) {
+      const mistake = current.find(half => half.kind === "error");
+      if (mistake) return {
+        tone: "rest",
+        text: typingStatusText(mistake.error, locale(), t(), today())
+      };
+      const range = draft();
+      const limit = [range.start, range.end].map(key => key && limitErrorText(key, limits(), locale(), t())).find(Boolean);
+      if (limit) return {
+        tone: "rest",
+        text: limit
+      };
+      const text = rangeStatusText(range, locale(), t());
+      return {
+        tone: text ? "draft" : "rest",
+        text: text ? `→ ${text}` : ""
+      };
+    }
+    const external = externalError();
+    if (external) return {
+      tone: "error",
+      text: external
+    };
+    return {
+      tone: "rest",
+      text: rangeStatusText(props.value(), locale(), t())
+    };
+  });
+  const save = next => {
+    if (next.start !== props.value().start || next.end !== props.value().end) commitFieldValue(props.owner, next);
+  };
+  const fail = message => {
+    setFailure(message);
+    setAnnouncement(message);
+  };
+  const commitRange = range => {
+    setDirty(false);
+    const limit = [range.start, range.end].map(key => key && limitErrorText(key, limits(), locale(), t())).find(Boolean);
+    if (limit) return fail(limit);
+    if (range.start && range.end && range.end < range.start) return fail(t().endBeforeStart);
+    if (range.start && !range.end) return fail(t().missingEnd);
+    if (range.end && !range.start) return fail(t().missingStart);
+    if (!range.start && props.owner.required) return fail(t().required);
+    setFailure(undefined);
+    fill(range);
+    setPicked(range);
+    save(range);
+  };
+  const commit = () => {
+    const [start, end] = [parse(startText()), parse(endText())];
+    const mistake = [start, end].find(half => half.kind === "error");
+    if (mistake) {
+      setDirty(false);
+      return fail(errorText(mistake.error, locale(), t(), today()));
+    }
+    commitRange({
+      start: start.kind === "date" ? start.date : null,
+      end: end.kind === "date" ? end.date : null
+    });
+  };
+  const restore = () => {
+    fill(props.value());
+    setPicked(props.value());
+    setAnchor(null);
+    setDirty(false);
+    setFailure(undefined);
+    calendar.close();
+  };
+  /** Calendar clicks fill both halves at once, so the text, the status line and the calendar show the same range. */
+  const pickDay = key => {
+    const next = pickRangeDay(picked(), anchor(), key);
+    // One update: the start alone would read as a typed range and reset the anchor of the next click.
+    batch(() => {
+      setPicked(next.range);
+      setAnchor(next.anchor);
+      setPreviewDate(null);
+      fill(next.range);
+      setDirty(true);
+    });
+  };
+  const apply = range => {
+    commitRange(range);
+    calendar.close();
+  };
+  const canApply = () => Boolean(picked().start) === Boolean(picked().end);
+  const rangeCalendar = onApply => [_$ssr(_tmpl$26, _$escape(_$createComponent(Show, {
+    get when() {
+      return props.owner.datePresets?.length;
+    },
+    get fallback() {
+      return _$createComponent(PresetRail, {
+        get presets() {
+          return props.owner.presets;
+        },
+        onSelect: onApply
+      });
+    },
+    get children() {
+      return _$createComponent(PresetRail, {
+        get presets() {
+          return props.owner.datePresets;
+        },
+        onSelect: value => {
+          const next = value ? {
+            start: value,
+            end: value
+          } : {
+            start: null,
+            end: null
+          };
+          batch(() => {
+            setPicked(next);
+            setAnchor(null);
+            fill(next);
+            setDirty(true);
+          });
+          if (value) setVisibleMonth(parseDateValue(value, props.dateConfig()));
+        }
+      });
+    }
+  })), _$escape(_$createComponent(DatePickerPanel, {
+    visibleMonth: visibleMonth,
+    setVisibleMonth: setVisibleMonth,
+    range: shownRange,
+    focusDate: () => picked().start,
+    onSelect: pickDay,
+    onDayPreview: key => setPreviewDate(rangeAnchor(picked(), anchor()) ? key : null),
+    get dateConfig() {
+      return props.dateConfig();
+    },
+    get min() {
+      return props.owner.min;
+    },
+    get max() {
+      return props.owner.max;
+    }
+  }))), _$ssr(_tmpl$29, _$escape(_$createComponent(Show, {
+    get when() {
+      return formatDateOnlyRangeDuration(shownRange(), props.dateConfig());
+    },
+    children: duration => _$ssr(_tmpl$30, _$escape(duration()))
+  })), _$ssrAttribute("disabled", !canApply(), true), _$escape(uiMessages().apply))];
+  const openSheet = async () => {
+    setSheetOpen(true);
+    calendar.close();
+    const before = {
+      start: startText(),
+      end: endText(),
+      dirty: dirty()
+    };
+    // Every opening starts from the text, also after a dismissed sheet left other days picked.
+    batch(() => {
+      setPicked(draft());
+      setAnchor(null);
+      setPreviewDate(null);
+    });
+    const {
+      openDateSheet
+    } = await import("./date-sheet");
+    const range = await openDateSheet({
+      title: props.owner.label ?? props.owner["aria-label"],
+      subtitle: rangeStatusText(props.value(), locale(), t()) || t().noDate,
+      ariaLabel: name(),
+      id: sheetId,
+      locale: locale() ?? "en",
+      content: close => rangeCalendar(next => {
+        // Saved at once, as in the single date sheet.
+        commitRange(next);
+        close(next);
+      })
+    });
+    setSheetOpen(false);
+    // A dismissed sheet saves nothing and leaves the text as it was before the sheet opened.
+    if (!range) batch(() => {
+      setStartText(before.start);
+      setEndText(before.end);
+      setDirty(before.dirty);
+      setAnchor(null);
+    });
+    toggle?.focus({
+      preventScroll: true
+    });
+  };
+  const openCalendar = focusDay => {
+    if (!interactive()) return;
+    setAnchor(null);
+    setPreviewDate(null);
+    setPicked(draft());
+    if (prefersMenuSheet()) return void openSheet();
+    const range = draft();
+    setVisibleMonth(parseDateValue(openingDay(range.start || range.end, limits(), props.dateConfig()), props.dateConfig()));
+    calendar.show();
+    if (focusDay) calendar.focusDay();
+  };
+  const onPointerDown = event => {
+    const target = event.target;
+    if (!interactive() || calendar.element()?.contains(target) || target.closest(".k2b-date-field__clear")) return;
+    const onIcon = target.closest(".k2b-date-field__toggle, .k2b-date-field__icon");
+    if (prefersMenuSheet()) {
+      if (onIcon) {
+        event.preventDefault();
+        void openSheet();
+      }
+      return;
+    }
+    if (onIcon) {
+      event.preventDefault();
+      if (!shell?.contains(document.activeElement)) startInput?.focus();
+      if (calendar.open()) calendar.close();else openCalendar(false);
+      return;
+    }
+    if (event.button === 0 && !calendar.open()) setTimeout(() => openCalendar(false));
+  };
+  const onKeyDown = event => {
+    // A refused text keeps Enter too, so it does not submit the form around it.
+    if (event.key === "Enter" && (dirty() || calendar.open() || failure())) {
+      event.preventDefault();
+      commit();
+      calendar.close();
+    } else if (event.key === "Escape" && (dirty() || calendar.open() || failure())) {
+      event.preventDefault();
+      event.stopPropagation();
+      restore();
+    } else if (event.key === "ArrowDown") {
+      event.preventDefault();
+      openCalendar(true);
+    } else if (event.key === "ArrowUp" && event.altKey) {
+      event.preventDefault();
+      calendar.close();
+    }
+  };
+  const onInput = setter => event => {
+    setter(event.currentTarget.value);
+    setDirty(true);
+    clearTimeout(announceTimer);
+    announceTimer = setTimeout(() => {
+      const range = draft();
+      setAnnouncement(range.start || range.end ? rangeStatusText(range, locale(), t()) : "");
+    }, 500);
+  };
+  const onPaste = event => {
+    const parts = splitPastedRange(event.clipboardData?.getData("text") ?? "");
+    if (!parts) return;
+    event.preventDefault();
+    setStartText(parts[0]);
+    setEndText(parts[1]);
+    setDirty(true);
+  };
+  const onFocusOut = event => {
+    const next = event.relatedTarget;
+    if (sheetOpen() || next && shell?.contains(next)) return;
+    if (dirty()) commit();
+    calendar.close();
+  };
+  const inputProps = {
+    class: "k2b-input",
+    type: "text",
+    inputMode: "numeric",
+    autocomplete: "off",
+    spellcheck: false,
+    "aria-haspopup": "dialog",
+    onKeyDown,
+    onPaste
+  };
+  const describedBy = () => [props.owner["aria-describedby"], props.owner.description ? meta.descriptionId : undefined, statusId].filter(Boolean).join(" ");
+  return _$createComponent(Field, {
+    get ["class"]() {
+      return props.owner.class;
+    },
+    get label() {
+      return props.owner.label;
+    },
+    get description() {
+      return props.owner.description;
+    },
+    get required() {
+      return props.owner.required;
+    },
+    get disabled() {
+      return props.owner.disabled;
+    },
+    meta: meta,
+    get children() {
+      return _$ssr(_tmpl$31, _$ssrAttribute("data-open", calendar.open() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-readonly", props.owner.readOnly ? "true" : _$escape(undefined, true), false), _$ssrAttribute("aria-labelledby", props.owner.label ? _$escape(meta.labelId, true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-label", props.owner.label ? _$escape(undefined, true) : _$escape(props.owner["aria-label"], true), false) + _$ssrAttribute("data-invalid", invalid() ? "true" : _$escape(undefined, true), false), _$ssrElement("input", _$mergeProps(inputProps, {
+        role: "combobox",
+        get ["aria-controls"]() {
+          return sheetOpen() ? sheetId : popoverId;
+        },
+        get id() {
+          return meta.controlId;
+        },
+        get ["aria-label"]() {
+          return name() ? t().startOf({
+            label: name()
+          }) : t().start;
+        },
+        get ["aria-expanded"]() {
+          return calendar.open() || sheetOpen();
+        },
+        get ["aria-describedby"]() {
+          return describedBy();
+        },
+        get ["aria-invalid"]() {
+          return invalid() ? "true" : undefined;
+        },
+        get ["aria-required"]() {
+          return props.owner.required || undefined;
+        },
+        get placeholder() {
+          return t().start;
+        },
+        get value() {
+          return startText();
+        },
+        get disabled() {
+          return props.owner.disabled;
+        },
+        get readOnly() {
+          return props.owner.readOnly;
+        }
+      }), undefined, false), _$ssrElement("input", _$mergeProps(inputProps, {
+        role: "combobox",
+        get ["aria-controls"]() {
+          return sheetOpen() ? sheetId : popoverId;
+        },
+        get ["aria-label"]() {
+          return name() ? t().endOf({
+            label: name()
+          }) : t().end;
+        },
+        get ["aria-expanded"]() {
+          return calendar.open() || sheetOpen();
+        },
+        get ["aria-describedby"]() {
+          return describedBy();
+        },
+        get ["aria-invalid"]() {
+          return invalid() ? "true" : undefined;
+        },
+        get ["aria-required"]() {
+          return props.owner.required || undefined;
+        },
+        get placeholder() {
+          return t().end;
+        },
+        get value() {
+          return endText();
+        },
+        get disabled() {
+          return props.owner.disabled;
+        },
+        get readOnly() {
+          return props.owner.readOnly;
+        }
+      }), undefined, false), _$escape(_$createComponent(Show, {
+        get when() {
+          return _$memo(() => !!props.owner.clearable)() && interactive();
+        },
+        get children() {
+          return _$ssr(_tmpl$24, _$ssrAttribute("data-hidden", startText() || endText() ? _$escape(undefined, true) : "true", false) + _$ssrAttribute("aria-label", _$escape(uiMessages().clearDate, true), false));
+        }
+      })), _$escape(_$createComponent(Show, {
+        get when() {
+          return !props.owner.readOnly;
+        },
+        get fallback() {
+          return _$ssr(_tmpl$28);
+        },
+        get children() {
+          return _$ssr(_tmpl$25, _$ssrAttribute("disabled", props.owner.disabled, true) + _$ssrAttribute("aria-label", calendar.open() ? _$escape(t().closeCalendar, true) : _$escape(t().openCalendar, true), false) + _$ssrAttribute("aria-expanded", _$escape(calendar.open() || sheetOpen(), true), false) + _$ssrAttribute("aria-controls", sheetOpen() ? _$escape(sheetId, true) : _$escape(popoverId, true), false));
+        }
+      })), _$ssrAttribute("id", _$escape(popoverId, true), false), _$ssrAttribute("aria-label", _$escape(name() ?? uiMessages().datePicker, true), false), _$escape(_$createComponent(Show, {
+        get when() {
+          return calendar.open();
+        },
+        get children() {
+          return rangeCalendar(range => {
+            apply(range);
+            caretToEnd(endInput);
+          });
+        }
+      })), _$escape(_$createComponent(DateStatusLine, {
+        id: statusId,
+        get tone() {
+          return status().tone;
+        },
+        get text() {
+          return status().text;
+        },
+        get announcement() {
+          return announcement();
+        }
+      })));
+    }
+  });
+}
 export function DatePicker(props) {
   const value = () => resolveMaybeAccessor(props.value);
   const dateConfig = useDateConfigLocale(() => props.dateConfig);
   const [visibleMonth, setVisibleMonth] = createSignal(parseDateValue(value(), dateConfig()));
   const valueLabel = () => displayDate(value(), dateConfig());
-  return _$createComponent(PickerShell, {
-    owner: props,
-    icon: "ti ti-calendar",
-    valueLabel: valueLabel,
-    get valueContent() {
-      return props.renderValue ? () => props.renderValue(value()) : undefined;
+  return _$createComponent(Show, {
+    get when() {
+      return props.appearance === "plain";
     },
-    clearValue: null,
-    onOpen: () => setVisibleMonth(parseDateValue(value(), dateConfig())),
-    get wide() {
-      return Boolean(props.presets?.length);
+    get fallback() {
+      return _$createComponent(DateTextField, {
+        owner: props,
+        value: value,
+        dateConfig: dateConfig
+      });
     },
-    children: close => _$ssr(_tmpl$21, _$escape(_$createComponent(PresetRail, {
-      get presets() {
-        return props.presets;
-      },
-      onSelect: value => {
-        close();
-        commitFieldValue(props, value);
-      }
-    })), _$escape(_$createComponent(DatePickerPanel, {
-      visibleMonth: visibleMonth,
-      setVisibleMonth: setVisibleMonth,
-      selected: value,
-      focusDate: value,
-      onSelect: value => {
-        close();
-        commitFieldValue(props, value);
-      },
-      get dateConfig() {
-        return dateConfig();
-      }
-    })))
+    get children() {
+      return _$createComponent(PickerShell, {
+        owner: props,
+        icon: "ti ti-calendar",
+        valueLabel: valueLabel,
+        get valueContent() {
+          return props.renderValue ? () => props.renderValue(value()) : undefined;
+        },
+        clearValue: null,
+        onOpen: () => setVisibleMonth(parseDateValue(openingDay(value(), {
+          min: props.min,
+          max: props.max
+        }, dateConfig()), dateConfig())),
+        get wide() {
+          return Boolean(props.presets?.length);
+        },
+        children: close => _$ssr(_tmpl$26, _$escape(_$createComponent(PresetRail, {
+          get presets() {
+            return props.presets;
+          },
+          onSelect: value => {
+            close();
+            commitFieldValue(props, value);
+          }
+        })), _$escape(_$createComponent(DatePickerPanel, {
+          visibleMonth: visibleMonth,
+          setVisibleMonth: setVisibleMonth,
+          selected: value,
+          focusDate: value,
+          onSelect: value => {
+            close();
+            commitFieldValue(props, value);
+          },
+          get dateConfig() {
+            return dateConfig();
+          },
+          get min() {
+            return props.min;
+          },
+          get max() {
+            return props.max;
+          }
+        })))
+      });
+    }
   });
 }
 export function DateTimePicker(props) {
@@ -463,7 +1448,10 @@ export function DateTimePicker(props) {
     setDraftDate(next.date);
     setDraftTime(next.time || defaultTime());
     setWithTime(valueHasTime());
-    setVisibleMonth(parseDateValue(next.date, dateConfig()));
+    setVisibleMonth(parseDateValue(openingDay(next.date, {
+      min: props.min,
+      max: props.max
+    }, dateConfig()), dateConfig()));
   };
   const canApply = () => Boolean(draftDate()) && (!withTime() || isCompleteTime(draftTime()));
   const draftValue = () => withTime() ? toDateTimeValue(draftDate(), draftTime(), dateConfig()) : draftDate() || null;
@@ -499,7 +1487,7 @@ export function DateTimePicker(props) {
         close();
         commitFieldValue(props, next);
       };
-      return [_$ssr(_tmpl$21, _$escape(_$createComponent(PresetRail, {
+      return [_$ssr(_tmpl$26, _$escape(_$createComponent(PresetRail, {
         get presets() {
           return props.presets;
         },
@@ -520,8 +1508,14 @@ export function DateTimePicker(props) {
         },
         get dateConfig() {
           return dateConfig();
+        },
+        get min() {
+          return props.min;
+        },
+        get max() {
+          return props.max;
         }
-      }))), _$ssr(_tmpl$24, _$escape(_$createComponent(Show, {
+      }))), _$ssr(_tmpl$29, _$escape(_$createComponent(Show, {
         get when() {
           return props.optionalTime;
         },
@@ -534,12 +1528,12 @@ export function DateTimePicker(props) {
           });
         },
         get children() {
-          return _$ssr(_tmpl$23, _$ssrAttribute("data-with-time", withTime() ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+          return _$ssr(_tmpl$33, _$ssrAttribute("data-with-time", withTime() ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
             get when() {
               return withTime();
             },
             get fallback() {
-              return _$ssr(_tmpl$25, _$escape(messages().addTime));
+              return _$ssr(_tmpl$34, _$escape(messages().addTime));
             },
             get children() {
               return [_$createComponent(TimeInput, {
@@ -547,7 +1541,7 @@ export function DateTimePicker(props) {
                   return draftTime();
                 },
                 onChange: setDraftTime
-              }), _$ssr(_tmpl$22, _$ssrAttribute("aria-label", _$escape(messages().removeTime, true), false) + _$ssrAttribute("title", _$escape(messages().removeTime, true), false))];
+              }), _$ssr(_tmpl$32, _$ssrAttribute("aria-label", _$escape(messages().removeTime, true), false) + _$ssrAttribute("title", _$escape(messages().removeTime, true), false))];
             }
           })));
         }
@@ -591,7 +1585,10 @@ export function DateRangePicker(props) {
     setPreviewDate(null);
     setStartTime(next.start.time || "09:00");
     setEndTime(next.end.time || "10:00");
-    setVisibleMonth(parseDateValue(next.start.date || next.end.date, dateConfig()));
+    setVisibleMonth(parseDateValue(openingDay(next.start.date || next.end.date, {
+      min: props.min,
+      max: props.max
+    }, dateConfig()), dateConfig()));
   };
   const valueLabel = () => {
     if (!value().start && !value().end) return "";
@@ -600,7 +1597,7 @@ export function DateRangePicker(props) {
   };
   const valueContent = () => {
     const format = withTime() ? formatDateTimeValue : displayDate;
-    return _$ssr(_tmpl$26, value().start ? _$escape(format(value().start, dateConfig())) : _$escape(messages().start), value().end ? _$escape(format(value().end, dateConfig())) : "End");
+    return _$ssr(_tmpl$35, value().start ? _$escape(format(value().start, dateConfig())) : _$escape(messages().start), value().end ? _$escape(format(value().end, dateConfig())) : "End");
   };
   const selectDate = value => {
     const next = pickRangeDay(draftRange(), anchor(), value);
@@ -653,108 +1650,128 @@ export function DateRangePicker(props) {
     close();
     commitFieldValue(props, value);
   };
-  return _$createComponent(PickerShell, {
-    owner: props,
-    icon: "ti ti-calendar-stats",
-    valueLabel: valueLabel,
-    valueContent: valueContent,
-    clearValue: {
-      start: null,
-      end: null
+  return _$createComponent(Show, {
+    get when() {
+      return props.appearance === "plain" || withTime();
     },
-    get timezone() {
-      return _$memo(() => !!withTime())() ? dateConfig().timeZone : undefined;
-    },
-    footerMeta: () => _$createComponent(Show, {
-      get when() {
-        return durationLabel();
-      },
-      get children() {
-        return _$ssr(_tmpl$27, _$escape(durationLabel()));
-      }
-    }),
-    onOpen: syncDraft,
-    get wide() {
-      return Boolean(props.datePresets?.length || props.presets?.length);
-    },
-    children: close => [_$ssr(_tmpl$21, _$escape(_$createComponent(Show, {
-      get when() {
-        return props.datePresets?.length;
-      },
-      get fallback() {
-        return _$createComponent(PresetRail, {
-          get presets() {
-            return props.presets;
+    get fallback() {
+      return _$createComponent(DateRangeTextField, {
+        owner: props,
+        value: value,
+        dateConfig: dateConfig
+      });
+    },
+    get children() {
+      return _$createComponent(PickerShell, {
+        owner: props,
+        icon: "ti ti-calendar-stats",
+        valueLabel: valueLabel,
+        valueContent: valueContent,
+        clearValue: {
+          start: null,
+          end: null
+        },
+        get timezone() {
+          return _$memo(() => !!withTime())() ? dateConfig().timeZone : undefined;
+        },
+        footerMeta: () => _$createComponent(Show, {
+          get when() {
+            return durationLabel();
           },
-          onSelect: value => {
-            close();
-            commitFieldValue(props, value);
+          get children() {
+            return _$ssr(_tmpl$30, _$escape(durationLabel()));
           }
-        });
-      },
-      get children() {
-        return _$createComponent(PresetRail, {
-          get presets() {
-            return props.datePresets;
+        }),
+        onOpen: syncDraft,
+        get wide() {
+          return Boolean(props.datePresets?.length || props.presets?.length);
+        },
+        children: close => [_$ssr(_tmpl$26, _$escape(_$createComponent(Show, {
+          get when() {
+            return props.datePresets?.length;
           },
-          onSelect: value => {
-            setDraftRange(value ? {
-              start: value,
-              end: value
-            } : {
-              start: null,
-              end: null
+          get fallback() {
+            return _$createComponent(PresetRail, {
+              get presets() {
+                return props.presets;
+              },
+              onSelect: value => {
+                close();
+                commitFieldValue(props, value);
+              }
             });
-            if (value) setVisibleMonth(parseDateValue(value, dateConfig()));
-          }
-        });
-      }
-    })), _$escape(_$createComponent(DatePickerPanel, {
-      visibleMonth: visibleMonth,
-      setVisibleMonth: setVisibleMonth,
-      range: displayRange,
-      focusDate: () => draftRange().start,
-      onSelect: selectDate,
-      onDayPreview: value => setPreviewDate(rangeAnchor(draftRange(), anchor()) ? value : null),
-      get dateConfig() {
-        return dateConfig();
-      }
-    }))), _$createComponent(Show, {
-      get when() {
-        return withTime();
-      },
-      get children() {
-        return _$ssr(_tmpl$28, _$escape(_$createComponent(TimeInput, {
-          get label() {
-            return messages().start;
           },
-          get time() {
-            return startTime();
+          get children() {
+            return _$createComponent(PresetRail, {
+              get presets() {
+                return props.datePresets;
+              },
+              onSelect: value => {
+                setDraftRange(value ? {
+                  start: value,
+                  end: value
+                } : {
+                  start: null,
+                  end: null
+                });
+                if (value) setVisibleMonth(parseDateValue(value, dateConfig()));
+              }
+            });
+          }
+        })), _$escape(_$createComponent(DatePickerPanel, {
+          visibleMonth: visibleMonth,
+          setVisibleMonth: setVisibleMonth,
+          range: displayRange,
+          focusDate: () => draftRange().start,
+          onSelect: selectDate,
+          onDayPreview: value => setPreviewDate(rangeAnchor(draftRange(), anchor()) ? value : null),
+          get dateConfig() {
+            return dateConfig();
           },
-          onChange: setStartTime
-        })), _$escape(_$createComponent(TimeInput, {
-          get label() {
-            return messages().end;
+          get min() {
+            return props.min;
           },
-          get time() {
-            return endTime();
+          get max() {
+            return props.max;
+          }
+        }))), _$createComponent(Show, {
+          get when() {
+            return withTime();
           },
-          onChange: setEndTime
-        })));
-      }
-    }), _$ssr(_tmpl$24, _$escape(_$createComponent(Show, {
-      get when() {
-        return _$memo(() => !!withTime())() && props.durationPresets?.length;
-      },
-      get children() {
-        return _$ssr(_tmpl$29, _$ssrAttribute("aria-label", _$escape(messages().durationPresets, true), false), _$escape(_$createComponent(For, {
-          get each() {
-            return props.durationPresets;
+          get children() {
+            return _$ssr(_tmpl$36, _$escape(_$createComponent(TimeInput, {
+              get label() {
+                return messages().start;
+              },
+              get time() {
+                return startTime();
+              },
+              onChange: setStartTime
+            })), _$escape(_$createComponent(TimeInput, {
+              get label() {
+                return messages().end;
+              },
+              get time() {
+                return endTime();
+              },
+              onChange: setEndTime
+            })));
+          }
+        }), _$ssr(_tmpl$29, _$escape(_$createComponent(Show, {
+          get when() {
+            return _$memo(() => !!withTime())() && props.durationPresets?.length;
           },
-          children: preset => _$ssr(_tmpl$13, _$ssrAttribute("aria-pressed", _$escape(durationMinutes(), true) === _$escape(preset.minutes, true), false), _$escape(preset.label))
-        })));
-      }
-    })), _$ssrAttribute("disabled", Boolean(draftRange().start) !== Boolean(draftRange().end) || Boolean(withTime() && draftRange().start && draftRange().end && (!isCompleteTime(startTime()) || !isCompleteTime(endTime()))), true), _$escape(messages().apply))]
+          get children() {
+            return _$ssr(_tmpl$37, _$ssrAttribute("aria-label", _$escape(messages().durationPresets, true), false), _$escape(_$createComponent(For, {
+              get each() {
+                return props.durationPresets;
+              },
+              children: preset => _$ssr(_tmpl$14, _$ssrAttribute("aria-pressed", _$escape(durationMinutes(), true) === _$escape(preset.minutes, true), false), _$escape(preset.label))
+            })));
+          }
+        })), _$ssrAttribute("disabled", Boolean(draftRange().start) !== Boolean(draftRange().end) || Boolean(withTime() && draftRange().start && draftRange().end && (!isCompleteTime(startTime()) || !isCompleteTime(endTime()))), true), _$escape(messages().apply))]
+      });
+    }
   });
 }
 //# sourceMappingURL=DatePicker.js.map