@k2b/ui 0.44.0 → 0.46.0

package/dist/browser/inputs/DatePicker.js

@@ -1,7 +1,7 @@
 import { template as _$template } from "solid-js/web";
 import { delegateEvents as _$delegateEvents } from "solid-js/web";
-import { setProperty as _$setProperty } from "solid-js/web";
 import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { setProperty as _$setProperty } from "solid-js/web";
 import { className as _$className } from "solid-js/web";
 import { getNextMarker as _$getNextMarker } from "solid-js/web";
 import { setAttribute as _$setAttribute } from "solid-js/web";
@@ -23,30 +23,42 @@ var _tmpl$ = /*#__PURE__*/_$template(`<button type=button class="k2b-date-trigge
   _tmpl$7 = /*#__PURE__*/_$template(`<button type=button>`),
   _tmpl$8 = /*#__PURE__*/_$template(`<div class=k2b-date-weekdays aria-hidden=true><!$><!/><!$><!/>`),
   _tmpl$9 = /*#__PURE__*/_$template(`<div class=k2b-date-grid role=grid><!$><!/><!$><!/>`),
-  _tmpl$0 = /*#__PURE__*/_$template(`<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><!$><!/>`),
-  _tmpl$1 = /*#__PURE__*/_$template(`<div class=k2b-date-months role=group>`),
-  _tmpl$10 = /*#__PURE__*/_$template(`<span class=k2b-date-weekend>`),
-  _tmpl$11 = /*#__PURE__*/_$template(`<span>`),
-  _tmpl$12 = /*#__PURE__*/_$template(`<span class=k2b-date-weekend aria-hidden=true>`),
-  _tmpl$13 = /*#__PURE__*/_$template(`<div class=k2b-date-week role=row>`),
-  _tmpl$14 = /*#__PURE__*/_$template(`<button type=button role=gridcell>`),
-  _tmpl$15 = /*#__PURE__*/_$template(`<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>`),
-  _tmpl$16 = /*#__PURE__*/_$template(`<div class=k2b-date-popover__body><!$><!/><!$><!/>`),
-  _tmpl$17 = /*#__PURE__*/_$template(`<button type=button class=k2b-date-optional-time__remove><i class="ti ti-x"aria-hidden=true>`),
-  _tmpl$18 = /*#__PURE__*/_$template(`<div class=k2b-date-optional-time>`),
-  _tmpl$19 = /*#__PURE__*/_$template(`<div class=k2b-date-actions><!$><!/><button type=button class=k2b-date-apply>`),
-  _tmpl$20 = /*#__PURE__*/_$template(`<button type=button class=k2b-date-optional-time__add><i class="ti ti-clock-plus"aria-hidden=true></i><!$><!/>`),
-  _tmpl$21 = /*#__PURE__*/_$template(`<span class=k2b-date-range-value><span></span><i class="ti ti-arrow-narrow-right"aria-hidden=true></i><span>`),
-  _tmpl$22 = /*#__PURE__*/_$template(`<span class=k2b-date-duration><i class="ti ti-hourglass-low"aria-hidden=true></i><!$><!/>`),
-  _tmpl$23 = /*#__PURE__*/_$template(`<div class=k2b-date-range-times><!$><!/><!$><!/>`),
-  _tmpl$24 = /*#__PURE__*/_$template(`<div class=k2b-date-durations role=group>`);
+  _tmpl$0 = /*#__PURE__*/_$template(`<footer class=k2b-date-calendar__limits><span></span><span>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<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><!$><!/><!$><!/>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<div class=k2b-date-months role=group>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<span class=k2b-date-weekend>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<span>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<span class=k2b-date-weekend aria-hidden=true>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<div class=k2b-date-week role=row>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<button type=button role=gridcell>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<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>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<p class=k2b-date-status>`),
+  _tmpl$18 = /*#__PURE__*/_$template(`<span class=k2b-sr-only aria-live=polite>`),
+  _tmpl$19 = /*#__PURE__*/_$template(`<button type=button class="k2b-input-shell__clear k2b-input-clear-action k2b-date-field__clear"><i class="ti ti-x"aria-hidden=true>`),
+  _tmpl$20 = /*#__PURE__*/_$template(`<button type=button class=k2b-date-field__toggle tabindex=-1><i class="ti ti-chevron-down"aria-hidden=true>`),
+  _tmpl$21 = /*#__PURE__*/_$template(`<div class=k2b-date-popover__body><!$><!/><!$><!/>`),
+  _tmpl$22 = /*#__PURE__*/_$template(`<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><input><!$><!/><!$><!/><div class=k2b-date-popover popover=manual role=dialog></div></div><!$><!/>`),
+  _tmpl$23 = /*#__PURE__*/_$template(`<span class=k2b-date-field__lock aria-hidden=true><i class="ti ti-lock">`),
+  _tmpl$24 = /*#__PURE__*/_$template(`<div class=k2b-date-actions><!$><!/><button type=button class=k2b-date-apply>`),
+  _tmpl$25 = /*#__PURE__*/_$template(`<span class=k2b-date-duration><i class="ti ti-hourglass-low"aria-hidden=true></i><!$><!/>`),
+  _tmpl$26 = /*#__PURE__*/_$template(`<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><input><i class="ti ti-arrow-narrow-right k2b-date-field__arrow"aria-hidden=true></i><input><span class=k2b-date-field__spacer></span><!$><!/><!$><!/><div class=k2b-date-popover popover=manual role=dialog></div></div><!$><!/>`),
+  _tmpl$27 = /*#__PURE__*/_$template(`<button type=button class=k2b-date-optional-time__remove><i class="ti ti-x"aria-hidden=true>`),
+  _tmpl$28 = /*#__PURE__*/_$template(`<div class=k2b-date-optional-time>`),
+  _tmpl$29 = /*#__PURE__*/_$template(`<button type=button class=k2b-date-optional-time__add><i class="ti ti-clock-plus"aria-hidden=true></i><!$><!/>`),
+  _tmpl$30 = /*#__PURE__*/_$template(`<span class=k2b-date-range-value><span></span><i class="ti ti-arrow-narrow-right"aria-hidden=true></i><span>`),
+  _tmpl$31 = /*#__PURE__*/_$template(`<div class=k2b-date-range-times><!$><!/><!$><!/>`),
+  _tmpl$32 = /*#__PURE__*/_$template(`<div class=k2b-date-durations role=group>`);
 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 => {
@@ -57,10 +69,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;
@@ -331,7 +351,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, {
@@ -388,7 +420,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()));
@@ -396,8 +428,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());
   };
@@ -428,13 +470,15 @@ function DatePickerPanel(props) {
     }
   };
   return (() => {
-    var _el$27 = _$getNextElement(_tmpl$0),
+    var _el$27 = _$getNextElement(_tmpl$1),
       _el$28 = _el$27.firstChild,
       _el$29 = _el$28.firstChild,
       _el$30 = _el$29.nextSibling,
       _el$31 = _el$30.nextSibling,
-      _el$42 = _el$28.nextSibling,
-      [_el$43, _co$10] = _$getNextMarker(_el$42.nextSibling);
+      _el$45 = _el$28.nextSibling,
+      [_el$46, _co$10] = _$getNextMarker(_el$45.nextSibling),
+      _el$47 = _el$46.nextSibling,
+      [_el$48, _co$11] = _$getNextMarker(_el$47.nextSibling);
     var _ref$3 = calendar;
     typeof _ref$3 === "function" ? _$use(_ref$3, _el$27) : calendar = _el$27;
     _el$29.$$click = () => view() === "days" ? moveMonth(-1) : moveYear(-1);
@@ -457,34 +501,34 @@ function DatePickerPanel(props) {
       },
       get fallback() {
         return (() => {
-          var _el$44 = _$getNextElement(_tmpl$1);
-          _$insert(_el$44, _$createComponent(For, {
+          var _el$49 = _$getNextElement(_tmpl$10);
+          _$insert(_el$49, _$createComponent(For, {
             get each() {
               return months();
             },
             children: (name, index) => (() => {
-              var _el$45 = _$getNextElement(_tmpl$7);
-              _el$45.$$click = () => {
+              var _el$50 = _$getNextElement(_tmpl$7);
+              _el$50.$$click = () => {
                 props.setVisibleMonth(monthDate(month().year, index(), context()));
                 setView("days");
               };
-              _$insert(_el$45, name);
+              _$insert(_el$50, name);
               _$effect(_p$ => {
-                var _v$0 = index() === month().month,
-                  _v$1 = index() === month().month ? "true" : undefined;
-                _v$0 !== _p$.e && _$setAttribute(_el$45, "aria-pressed", _p$.e = _v$0);
-                _v$1 !== _p$.t && _$setAttribute(_el$45, "data-selected", _p$.t = _v$1);
+                var _v$10 = index() === month().month,
+                  _v$11 = index() === month().month ? "true" : undefined;
+                _v$10 !== _p$.e && _$setAttribute(_el$50, "aria-pressed", _p$.e = _v$10);
+                _v$11 !== _p$.t && _$setAttribute(_el$50, "data-selected", _p$.t = _v$11);
                 return _p$;
               }, {
                 e: undefined,
                 t: undefined
               });
               _$runHydrationEvents();
-              return _el$45;
+              return _el$50;
             })()
           }));
-          _$effect(() => _$setAttribute(_el$44, "aria-label", `Months in ${month().year}`));
-          return _el$44;
+          _$effect(() => _$setAttribute(_el$49, "aria-label", `Months in ${month().year}`));
+          return _el$49;
         })();
       },
       get children() {
@@ -499,9 +543,9 @@ function DatePickerPanel(props) {
               return bands();
             },
             children: band => (() => {
-              var _el$46 = _$getNextElement(_tmpl$10);
-              _$effect(_$p => _$setStyleProperty(_el$46, "grid-column", `${band.start + 1} / span ${band.span}`));
-              return _el$46;
+              var _el$51 = _$getNextElement(_tmpl$11);
+              _$effect(_$p => _$setStyleProperty(_el$51, "grid-column", `${band.start + 1} / span ${band.span}`));
+              return _el$51;
             })()
           }), _el$34, _co$8);
           _$insert(_el$32, _$createComponent(For, {
@@ -509,10 +553,10 @@ function DatePickerPanel(props) {
               return weekdays();
             },
             children: (day, index) => (() => {
-              var _el$47 = _$getNextElement(_tmpl$11);
-              _$insert(_el$47, day);
-              _$effect(() => _$setAttribute(_el$47, "data-weekend", weekendColumns()[index()] ? "true" : undefined));
-              return _el$47;
+              var _el$52 = _$getNextElement(_tmpl$12);
+              _$insert(_el$52, day);
+              _$effect(() => _$setAttribute(_el$52, "data-weekend", weekendColumns()[index()] ? "true" : undefined));
+              return _el$52;
             })()
           }), _el$36, _co$9);
           return _el$32;
@@ -527,18 +571,18 @@ function DatePickerPanel(props) {
               return bands();
             },
             children: band => (() => {
-              var _el$48 = _$getNextElement(_tmpl$12);
+              var _el$53 = _$getNextElement(_tmpl$13);
               _$effect(_p$ => {
-                var _v$10 = `${band.start + 1} / span ${band.span}`,
-                  _v$11 = `1 / span ${dayRows().length}`;
-                _v$10 !== _p$.e && _$setStyleProperty(_el$48, "grid-column", _p$.e = _v$10);
-                _v$11 !== _p$.t && _$setStyleProperty(_el$48, "grid-row", _p$.t = _v$11);
+                var _v$12 = `${band.start + 1} / span ${band.span}`,
+                  _v$13 = `1 / span ${dayRows().length}`;
+                _v$12 !== _p$.e && _$setStyleProperty(_el$53, "grid-column", _p$.e = _v$12);
+                _v$13 !== _p$.t && _$setStyleProperty(_el$53, "grid-row", _p$.t = _v$13);
                 return _p$;
               }, {
                 e: undefined,
                 t: undefined
               });
-              return _el$48;
+              return _el$53;
             })()
           }), _el$39, _co$0);
           _$insert(_el$37, _$createComponent(For, {
@@ -546,8 +590,8 @@ function DatePickerPanel(props) {
               return dayRows();
             },
             children: week => (() => {
-              var _el$49 = _$getNextElement(_tmpl$13);
-              _$insert(_el$49, _$createComponent(For, {
+              var _el$54 = _$getNextElement(_tmpl$14);
+              _$insert(_el$54, _$createComponent(For, {
                 each: week,
                 children: (cell, cellIndex) => {
                   const selected = () => props.selected?.() === cell.key;
@@ -558,39 +602,47 @@ function DatePickerPanel(props) {
                   const active = () => selected() || isRangeEdge(cell.key, range());
                   const focusable = () => cell.key === defaultFocus();
                   const today = () => cell.key === todayKey();
+                  const label = () => {
+                    const name = today() ? todayLabel(cell.label) : cell.label;
+                    return blocked(cell.key) ? inputMessages().notSelectable({
+                      date: name
+                    }) : name;
+                  };
                   return (() => {
-                    var _el$50 = _$getNextElement(_tmpl$14);
-                    _el$50.addEventListener("pointerleave", () => props.onDayPreview?.(null));
-                    _el$50.addEventListener("pointerenter", () => props.onDayPreview?.(cell.key));
-                    _el$50.addEventListener("focus", () => {
+                    var _el$55 = _$getNextElement(_tmpl$15);
+                    _el$55.addEventListener("pointerleave", () => props.onDayPreview?.(null));
+                    _el$55.addEventListener("pointerenter", () => props.onDayPreview?.(cell.key));
+                    _el$55.addEventListener("focus", () => {
                       setFocusedKey(cell.key);
                       props.onDayPreview?.(cell.key);
                     });
-                    _el$50.addEventListener("blur", () => props.onDayPreview?.(null));
-                    _el$50.$$keydown = event => handleDayKeyDown(event, cell.day);
-                    _el$50.$$click = () => props.onSelect(cell.key);
-                    _$insert(_el$50, () => cell.number);
+                    _el$55.addEventListener("blur", () => props.onDayPreview?.(null));
+                    _el$55.$$keydown = event => handleDayKeyDown(event, cell.day);
+                    _el$55.$$click = () => props.onSelect(cell.key);
+                    _$insert(_el$55, () => cell.number);
                     _$effect(_p$ => {
-                      var _v$12 = cell.key,
-                        _v$13 = focusable() ? "true" : undefined,
-                        _v$14 = cell.outside ? "true" : undefined,
-                        _v$15 = weekendColumns()[cellIndex()] ? "true" : undefined,
-                        _v$16 = inRange(cell.key, range()) && !active() ? "true" : undefined,
-                        _v$17 = today() ? "true" : undefined,
-                        _v$18 = today() ? "date" : undefined,
-                        _v$19 = today() ? todayLabel(cell.label) : cell.label,
-                        _v$20 = active(),
-                        _v$21 = focusable() ? 0 : -1;
-                      _v$12 !== _p$.e && _$setAttribute(_el$50, "data-date-day", _p$.e = _v$12);
-                      _v$13 !== _p$.t && _$setAttribute(_el$50, "data-date-focus", _p$.t = _v$13);
-                      _v$14 !== _p$.a && _$setAttribute(_el$50, "data-outside", _p$.a = _v$14);
-                      _v$15 !== _p$.o && _$setAttribute(_el$50, "data-weekend", _p$.o = _v$15);
-                      _v$16 !== _p$.i && _$setAttribute(_el$50, "data-in-range", _p$.i = _v$16);
-                      _v$17 !== _p$.n && _$setAttribute(_el$50, "data-today", _p$.n = _v$17);
-                      _v$18 !== _p$.s && _$setAttribute(_el$50, "aria-current", _p$.s = _v$18);
-                      _v$19 !== _p$.h && _$setAttribute(_el$50, "aria-label", _p$.h = _v$19);
-                      _v$20 !== _p$.r && _$setAttribute(_el$50, "aria-selected", _p$.r = _v$20);
-                      _v$21 !== _p$.d && _$setAttribute(_el$50, "tabindex", _p$.d = _v$21);
+                      var _v$14 = cell.key,
+                        _v$15 = focusable() ? "true" : undefined,
+                        _v$16 = cell.outside ? "true" : undefined,
+                        _v$17 = weekendColumns()[cellIndex()] ? "true" : undefined,
+                        _v$18 = inRange(cell.key, range()) && !active() ? "true" : undefined,
+                        _v$19 = today() ? "true" : undefined,
+                        _v$20 = today() ? "date" : undefined,
+                        _v$21 = label(),
+                        _v$22 = active(),
+                        _v$23 = blocked(cell.key),
+                        _v$24 = focusable() ? 0 : -1;
+                      _v$14 !== _p$.e && _$setAttribute(_el$55, "data-date-day", _p$.e = _v$14);
+                      _v$15 !== _p$.t && _$setAttribute(_el$55, "data-date-focus", _p$.t = _v$15);
+                      _v$16 !== _p$.a && _$setAttribute(_el$55, "data-outside", _p$.a = _v$16);
+                      _v$17 !== _p$.o && _$setAttribute(_el$55, "data-weekend", _p$.o = _v$17);
+                      _v$18 !== _p$.i && _$setAttribute(_el$55, "data-in-range", _p$.i = _v$18);
+                      _v$19 !== _p$.n && _$setAttribute(_el$55, "data-today", _p$.n = _v$19);
+                      _v$20 !== _p$.s && _$setAttribute(_el$55, "aria-current", _p$.s = _v$20);
+                      _v$21 !== _p$.h && _$setAttribute(_el$55, "aria-label", _p$.h = _v$21);
+                      _v$22 !== _p$.r && _$setAttribute(_el$55, "aria-selected", _p$.r = _v$22);
+                      _v$23 !== _p$.d && _$setProperty(_el$55, "disabled", _p$.d = _v$23);
+                      _v$24 !== _p$.l && _$setAttribute(_el$55, "tabindex", _p$.l = _v$24);
                       return _p$;
                     }, {
                       e: undefined,
@@ -602,32 +654,62 @@ function DatePickerPanel(props) {
                       s: undefined,
                       h: undefined,
                       r: undefined,
-                      d: undefined
+                      d: undefined,
+                      l: undefined
                     });
                     _$runHydrationEvents();
-                    return _el$50;
+                    return _el$55;
                   })();
                 }
               }));
-              return _el$49;
+              return _el$54;
             })()
           }), _el$41, _co$1);
           return _el$37;
         })()];
       }
-    }), _el$43, _co$10);
+    }), _el$46, _co$10);
+    _$insert(_el$27, _$createComponent(Show, {
+      get when() {
+        return props.min || props.max;
+      },
+      get children() {
+        var _el$42 = _$getNextElement(_tmpl$0),
+          _el$43 = _el$42.firstChild,
+          _el$44 = _el$43.nextSibling;
+        _$insert(_el$43, (() => {
+          var _c$ = _$memo(() => !!props.min);
+          return () => _c$() ? inputMessages().limitFrom({
+            date: formatDateInput(props.min, context().locale)
+          }) : "";
+        })());
+        _$insert(_el$44, (() => {
+          var _c$2 = _$memo(() => !!props.max);
+          return () => _c$2() ? inputMessages().limitUntil({
+            date: formatDateInput(props.max, context().locale)
+          }) : "";
+        })());
+        return _el$42;
+      }
+    }), _el$48, _co$11);
     _$effect(_p$ => {
       var _v$7 = messages().calendar,
-        _v$8 = previousLabel(),
-        _v$9 = nextLabel();
+        _v$8 = stepBlocked(-1),
+        _v$9 = previousLabel(),
+        _v$0 = stepBlocked(1),
+        _v$1 = nextLabel();
       _v$7 !== _p$.e && _$setAttribute(_el$27, "aria-label", _p$.e = _v$7);
-      _v$8 !== _p$.t && _$setAttribute(_el$29, "aria-label", _p$.t = _v$8);
-      _v$9 !== _p$.a && _$setAttribute(_el$31, "aria-label", _p$.a = _v$9);
+      _v$8 !== _p$.t && _$setProperty(_el$29, "disabled", _p$.t = _v$8);
+      _v$9 !== _p$.a && _$setAttribute(_el$29, "aria-label", _p$.a = _v$9);
+      _v$0 !== _p$.o && _$setProperty(_el$31, "disabled", _p$.o = _v$0);
+      _v$1 !== _p$.i && _$setAttribute(_el$31, "aria-label", _p$.i = _v$1);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
-      a: undefined
+      a: undefined,
+      o: undefined,
+      i: undefined
     });
     _$runHydrationEvents();
     return _el$27;
@@ -636,78 +718,1277 @@ function DatePickerPanel(props) {
 function TimeInput(props) {
   const messages = useUiMessages();
   return (() => {
-    var _el$51 = _$getNextElement(_tmpl$15),
-      _el$55 = _el$51.firstChild,
-      [_el$56, _co$11] = _$getNextMarker(_el$55.nextSibling),
-      _el$53 = _el$56.nextSibling,
-      _el$54 = _el$53.firstChild;
-    _$insert(_el$51, _$createComponent(Show, {
+    var _el$56 = _$getNextElement(_tmpl$16),
+      _el$60 = _el$56.firstChild,
+      [_el$61, _co$12] = _$getNextMarker(_el$60.nextSibling),
+      _el$58 = _el$61.nextSibling,
+      _el$59 = _el$58.firstChild;
+    _$insert(_el$56, _$createComponent(Show, {
       get when() {
         return props.label;
       },
       get children() {
-        var _el$52 = _$getNextElement(_tmpl$11);
-        _$insert(_el$52, () => props.label);
-        return _el$52;
+        var _el$57 = _$getNextElement(_tmpl$12);
+        _$insert(_el$57, () => props.label);
+        return _el$57;
       }
-    }), _el$56, _co$11);
-    _el$54.addEventListener("blur", () => props.onChange(normalizeTimeInput(props.time)));
-    _el$54.$$input = event => props.onChange(filterTimeInput(event.currentTarget.value));
-    _$effect(() => _$setAttribute(_el$54, "aria-label", props.label ? messages().timeLabel({
+    }), _el$61, _co$12);
+    _el$59.addEventListener("blur", () => props.onChange(normalizeTimeInput(props.time)));
+    _el$59.$$input = event => props.onChange(filterTimeInput(event.currentTarget.value));
+    _$effect(() => _$setAttribute(_el$59, "aria-label", props.label ? messages().timeLabel({
       label: props.label
     }) : messages().time));
-    _$effect(() => _$setProperty(_el$54, "value", props.time));
+    _$effect(() => _$setProperty(_el$59, "value", props.time));
     _$runHydrationEvents();
-    return _el$51;
+    return _el$56;
   })();
 }
+
+/** 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 [(() => {
+    var _el$62 = _$getNextElement(_tmpl$17);
+    var _ref$4 = props.ref;
+    typeof _ref$4 === "function" ? _$use(_ref$4, _el$62) : props.ref = _el$62;
+    _$insert(_el$62, () => props.text);
+    _$effect(_p$ => {
+      var _v$25 = props.id,
+        _v$26 = props.tone,
+        _v$27 = typeof props.text === "string" && props.text ? props.text : undefined;
+      _v$25 !== _p$.e && _$setAttribute(_el$62, "id", _p$.e = _v$25);
+      _v$26 !== _p$.t && _$setAttribute(_el$62, "data-tone", _p$.t = _v$26);
+      _v$27 !== _p$.a && _$setAttribute(_el$62, "title", _p$.a = _v$27);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$62;
+  })(), (() => {
+    var _el$63 = _$getNextElement(_tmpl$18);
+    _$insert(_el$63, () => props.announcement);
+    return _el$63;
+  })()];
+}
+
+/**
+ * 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() {
+      var _el$64 = _$getNextElement(_tmpl$22),
+        _el$65 = _el$64.firstChild,
+        _el$66 = _el$65.firstChild,
+        _el$67 = _el$66.nextSibling,
+        _el$76 = _el$67.nextSibling,
+        [_el$77, _co$15] = _$getNextMarker(_el$76.nextSibling),
+        _el$78 = _el$77.nextSibling,
+        [_el$79, _co$16] = _$getNextMarker(_el$78.nextSibling),
+        _el$70 = _el$79.nextSibling,
+        _el$80 = _el$65.nextSibling,
+        [_el$81, _co$17] = _$getNextMarker(_el$80.nextSibling);
+      _el$64.$$focusout = onFocusOut;
+      _el$65.$$pointerdown = onPointerDown;
+      var _ref$5 = shell;
+      typeof _ref$5 === "function" ? _$use(_ref$5, _el$65) : shell = _el$65;
+      var _ref$6 = input;
+      typeof _ref$6 === "function" ? _$use(_ref$6, _el$67) : input = _el$67;
+      _$spread(_el$67, _$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;
+        },
+        "onInput": event => {
+          setText(event.currentTarget.value);
+          setDirty(true);
+          clearTimeout(announceTimer);
+          announceTimer = setTimeout(() => {
+            const result = parsed();
+            setAnnouncement(result?.kind === "date" ? spokenDateText(result.date, result.note, locale(), t()) : "");
+          }, 500);
+        },
+        "onKeyDown": onKeyDown
+      }), false, false);
+      _$insert(_el$65, _$createComponent(Show, {
+        get when() {
+          return _$memo(() => !!props.owner.clearable)() && interactive();
+        },
+        get children() {
+          var _el$68 = _$getNextElement(_tmpl$19);
+          _el$68.$$click = () => {
+            pick(null);
+            input?.focus();
+          };
+          _$effect(_p$ => {
+            var _v$28 = text() ? undefined : "true",
+              _v$29 = uiMessages().clearDate;
+            _v$28 !== _p$.e && _$setAttribute(_el$68, "data-hidden", _p$.e = _v$28);
+            _v$29 !== _p$.t && _$setAttribute(_el$68, "aria-label", _p$.t = _v$29);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          _$runHydrationEvents();
+          return _el$68;
+        }
+      }), _el$77, _co$15);
+      _$insert(_el$65, _$createComponent(Show, {
+        get when() {
+          return !props.owner.readOnly;
+        },
+        get fallback() {
+          return _$getNextElement(_tmpl$23);
+        },
+        get children() {
+          var _el$69 = _$getNextElement(_tmpl$20);
+          _el$69.$$click = event => {
+            // Pointers are handled on pointerdown; this is activation by assistive technology.
+            if (event.detail === 0) openCalendar(true);
+          };
+          var _ref$7 = toggle;
+          typeof _ref$7 === "function" ? _$use(_ref$7, _el$69) : toggle = _el$69;
+          _$effect(_p$ => {
+            var _v$30 = props.owner.disabled,
+              _v$31 = calendar.open() ? t().closeCalendar : t().openCalendar,
+              _v$32 = calendar.open() || sheetOpen(),
+              _v$33 = sheetOpen() ? sheetId : popoverId;
+            _v$30 !== _p$.e && _$setProperty(_el$69, "disabled", _p$.e = _v$30);
+            _v$31 !== _p$.t && _$setAttribute(_el$69, "aria-label", _p$.t = _v$31);
+            _v$32 !== _p$.a && _$setAttribute(_el$69, "aria-expanded", _p$.a = _v$32);
+            _v$33 !== _p$.o && _$setAttribute(_el$69, "aria-controls", _p$.o = _v$33);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined,
+            a: undefined,
+            o: undefined
+          });
+          _$runHydrationEvents();
+          return _el$69;
+        }
+      }), _el$79, _co$16);
+      _el$70.$$keydown = event => {
+        if (event.key !== "Escape" && !(event.key === "ArrowUp" && event.altKey)) return;
+        event.preventDefault();
+        event.stopPropagation();
+        calendar.close();
+        input?.focus();
+      };
+      _el$70.$$pointerdown = keepFocus;
+      var _ref$8 = calendar.ref;
+      typeof _ref$8 === "function" ? _$use(_ref$8, _el$70) : calendar.ref = _el$70;
+      _$setAttribute(_el$70, "id", popoverId);
+      _$insert(_el$70, _$createComponent(Show, {
+        get when() {
+          return calendar.open();
+        },
+        get children() {
+          var _el$71 = _$getNextElement(_tmpl$21),
+            _el$72 = _el$71.firstChild,
+            [_el$73, _co$13] = _$getNextMarker(_el$72.nextSibling),
+            _el$74 = _el$73.nextSibling,
+            [_el$75, _co$14] = _$getNextMarker(_el$74.nextSibling);
+          _$insert(_el$71, _$createComponent(PresetRail, {
+            get presets() {
+              return props.owner.presets;
+            },
+            onSelect: value => {
+              pick(value);
+              caretToEnd(input);
+            }
+          }), _el$73, _co$13);
+          _$insert(_el$71, _$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;
+            }
+          }), _el$75, _co$14);
+          return _el$71;
+        }
+      }));
+      _$insert(_el$64, _$createComponent(DateStatusLine, {
+        ref: element => {
+          statusLine = element;
+        },
+        id: statusId,
+        get tone() {
+          return status().tone;
+        },
+        get text() {
+          return status().text;
+        },
+        get announcement() {
+          return announcement();
+        }
+      }), _el$81, _co$17);
+      _$effect(_p$ => {
+        var _v$34 = calendar.open() ? "true" : undefined,
+          _v$35 = props.owner.readOnly ? "true" : undefined,
+          _v$36 = invalid() ? "true" : undefined,
+          _v$37 = fieldName(props.owner) ?? uiMessages().datePicker;
+        _v$34 !== _p$.e && _$setAttribute(_el$64, "data-open", _p$.e = _v$34);
+        _v$35 !== _p$.t && _$setAttribute(_el$64, "data-readonly", _p$.t = _v$35);
+        _v$36 !== _p$.a && _$setAttribute(_el$65, "data-invalid", _p$.a = _v$36);
+        _v$37 !== _p$.o && _$setAttribute(_el$70, "aria-label", _p$.o = _v$37);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined,
+        o: undefined
+      });
+      _$runHydrationEvents();
+      return _el$64;
+    }
+  });
+}
+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 => [(() => {
+    var _el$83 = _$getNextElement(_tmpl$21),
+      _el$84 = _el$83.firstChild,
+      [_el$85, _co$18] = _$getNextMarker(_el$84.nextSibling),
+      _el$86 = _el$85.nextSibling,
+      [_el$87, _co$19] = _$getNextMarker(_el$86.nextSibling);
+    _$insert(_el$83, _$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()));
+          }
+        });
+      }
+    }), _el$85, _co$18);
+    _$insert(_el$83, _$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;
+      }
+    }), _el$87, _co$19);
+    return _el$83;
+  })(), (() => {
+    var _el$88 = _$getNextElement(_tmpl$24),
+      _el$90 = _el$88.firstChild,
+      [_el$91, _co$20] = _$getNextMarker(_el$90.nextSibling),
+      _el$89 = _el$91.nextSibling;
+    _$insert(_el$88, _$createComponent(Show, {
+      get when() {
+        return formatDateOnlyRangeDuration(shownRange(), props.dateConfig());
+      },
+      children: duration => (() => {
+        var _el$92 = _$getNextElement(_tmpl$25),
+          _el$93 = _el$92.firstChild,
+          _el$94 = _el$93.nextSibling,
+          [_el$95, _co$21] = _$getNextMarker(_el$94.nextSibling);
+        _$insert(_el$92, duration, _el$95, _co$21);
+        return _el$92;
+      })()
+    }), _el$91, _co$20);
+    _el$89.$$click = () => onApply(picked());
+    _$insert(_el$89, () => uiMessages().apply);
+    _$effect(() => _$setProperty(_el$89, "disabled", !canApply()));
+    _$runHydrationEvents();
+    return _el$88;
+  })()];
+  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() {
+      var _el$96 = _$getNextElement(_tmpl$26),
+        _el$97 = _el$96.firstChild,
+        _el$98 = _el$97.firstChild,
+        _el$99 = _el$98.nextSibling,
+        _el$100 = _el$99.nextSibling,
+        _el$101 = _el$100.nextSibling,
+        _el$102 = _el$101.nextSibling,
+        _el$106 = _el$102.nextSibling,
+        [_el$107, _co$22] = _$getNextMarker(_el$106.nextSibling),
+        _el$108 = _el$107.nextSibling,
+        [_el$109, _co$23] = _$getNextMarker(_el$108.nextSibling),
+        _el$105 = _el$109.nextSibling,
+        _el$110 = _el$97.nextSibling,
+        [_el$111, _co$24] = _$getNextMarker(_el$110.nextSibling);
+      _el$96.$$focusout = onFocusOut;
+      _el$97.$$pointerdown = onPointerDown;
+      var _ref$9 = shell;
+      typeof _ref$9 === "function" ? _$use(_ref$9, _el$97) : shell = _el$97;
+      var _ref$0 = startInput;
+      typeof _ref$0 === "function" ? _$use(_ref$0, _el$99) : startInput = _el$99;
+      _$spread(_el$99, _$mergeProps(inputProps, {
+        "role": "combobox",
+        get ["aria-controls"]() {
+          return sheetOpen() ? sheetId : popoverId;
+        },
+        get id() {
+          return meta.controlId;
+        },
+        get ["aria-label"]() {
+          return _$memo(() => !!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;
+        },
+        get onInput() {
+          return onInput(setStartText);
+        }
+      }), false, false);
+      var _ref$1 = endInput;
+      typeof _ref$1 === "function" ? _$use(_ref$1, _el$101) : endInput = _el$101;
+      _$spread(_el$101, _$mergeProps(inputProps, {
+        "role": "combobox",
+        get ["aria-controls"]() {
+          return sheetOpen() ? sheetId : popoverId;
+        },
+        get ["aria-label"]() {
+          return _$memo(() => !!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;
+        },
+        get onInput() {
+          return onInput(setEndText);
+        }
+      }), false, false);
+      _$insert(_el$97, _$createComponent(Show, {
+        get when() {
+          return _$memo(() => !!props.owner.clearable)() && interactive();
+        },
+        get children() {
+          var _el$103 = _$getNextElement(_tmpl$19);
+          _el$103.$$click = () => {
+            commitRange({
+              start: null,
+              end: null
+            });
+            startInput?.focus();
+          };
+          _$effect(_p$ => {
+            var _v$38 = startText() || endText() ? undefined : "true",
+              _v$39 = uiMessages().clearDate;
+            _v$38 !== _p$.e && _$setAttribute(_el$103, "data-hidden", _p$.e = _v$38);
+            _v$39 !== _p$.t && _$setAttribute(_el$103, "aria-label", _p$.t = _v$39);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          _$runHydrationEvents();
+          return _el$103;
+        }
+      }), _el$107, _co$22);
+      _$insert(_el$97, _$createComponent(Show, {
+        get when() {
+          return !props.owner.readOnly;
+        },
+        get fallback() {
+          return _$getNextElement(_tmpl$23);
+        },
+        get children() {
+          var _el$104 = _$getNextElement(_tmpl$20);
+          _el$104.$$click = event => {
+            if (event.detail === 0) openCalendar(true);
+          };
+          var _ref$10 = toggle;
+          typeof _ref$10 === "function" ? _$use(_ref$10, _el$104) : toggle = _el$104;
+          _$effect(_p$ => {
+            var _v$40 = props.owner.disabled,
+              _v$41 = calendar.open() ? t().closeCalendar : t().openCalendar,
+              _v$42 = calendar.open() || sheetOpen(),
+              _v$43 = sheetOpen() ? sheetId : popoverId;
+            _v$40 !== _p$.e && _$setProperty(_el$104, "disabled", _p$.e = _v$40);
+            _v$41 !== _p$.t && _$setAttribute(_el$104, "aria-label", _p$.t = _v$41);
+            _v$42 !== _p$.a && _$setAttribute(_el$104, "aria-expanded", _p$.a = _v$42);
+            _v$43 !== _p$.o && _$setAttribute(_el$104, "aria-controls", _p$.o = _v$43);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined,
+            a: undefined,
+            o: undefined
+          });
+          _$runHydrationEvents();
+          return _el$104;
+        }
+      }), _el$109, _co$23);
+      _el$105.$$keydown = event => {
+        if (event.key !== "Escape" && !(event.key === "ArrowUp" && event.altKey)) return;
+        event.preventDefault();
+        event.stopPropagation();
+        calendar.close();
+        startInput?.focus();
+      };
+      _el$105.$$pointerdown = keepFocus;
+      var _ref$11 = calendar.ref;
+      typeof _ref$11 === "function" ? _$use(_ref$11, _el$105) : calendar.ref = _el$105;
+      _$setAttribute(_el$105, "id", popoverId);
+      _$insert(_el$105, _$createComponent(Show, {
+        get when() {
+          return calendar.open();
+        },
+        get children() {
+          return rangeCalendar(range => {
+            apply(range);
+            caretToEnd(endInput);
+          });
+        }
+      }));
+      _$insert(_el$96, _$createComponent(DateStatusLine, {
+        ref: element => {
+          statusLine = element;
+        },
+        id: statusId,
+        get tone() {
+          return status().tone;
+        },
+        get text() {
+          return status().text;
+        },
+        get announcement() {
+          return announcement();
+        }
+      }), _el$111, _co$24);
+      _$effect(_p$ => {
+        var _v$44 = calendar.open() ? "true" : undefined,
+          _v$45 = props.owner.readOnly ? "true" : undefined,
+          _v$46 = props.owner.label ? meta.labelId : undefined,
+          _v$47 = props.owner.label ? undefined : props.owner["aria-label"],
+          _v$48 = invalid() ? "true" : undefined,
+          _v$49 = name() ?? uiMessages().datePicker;
+        _v$44 !== _p$.e && _$setAttribute(_el$96, "data-open", _p$.e = _v$44);
+        _v$45 !== _p$.t && _$setAttribute(_el$96, "data-readonly", _p$.t = _v$45);
+        _v$46 !== _p$.a && _$setAttribute(_el$97, "aria-labelledby", _p$.a = _v$46);
+        _v$47 !== _p$.o && _$setAttribute(_el$97, "aria-label", _p$.o = _v$47);
+        _v$48 !== _p$.i && _$setAttribute(_el$97, "data-invalid", _p$.i = _v$48);
+        _v$49 !== _p$.n && _$setAttribute(_el$105, "aria-label", _p$.n = _v$49);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined,
+        o: undefined,
+        i: undefined,
+        n: undefined
+      });
+      _$runHydrationEvents();
+      return _el$96;
+    }
+  });
+}
 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 => (() => {
-      var _el$57 = _$getNextElement(_tmpl$16),
-        _el$58 = _el$57.firstChild,
-        [_el$59, _co$12] = _$getNextMarker(_el$58.nextSibling),
-        _el$60 = _el$59.nextSibling,
-        [_el$61, _co$13] = _$getNextMarker(_el$60.nextSibling);
-      _$insert(_el$57, _$createComponent(PresetRail, {
-        get presets() {
-          return props.presets;
+    get children() {
+      return _$createComponent(PickerShell, {
+        owner: props,
+        icon: "ti ti-calendar",
+        valueLabel: valueLabel,
+        get valueContent() {
+          return props.renderValue ? () => props.renderValue(value()) : undefined;
         },
-        onSelect: value => {
-          close();
-          commitFieldValue(props, value);
-        }
-      }), _el$59, _co$12);
-      _$insert(_el$57, _$createComponent(DatePickerPanel, {
-        visibleMonth: visibleMonth,
-        setVisibleMonth: setVisibleMonth,
-        selected: value,
-        focusDate: value,
-        onSelect: value => {
-          close();
-          commitFieldValue(props, value);
+        clearValue: null,
+        onOpen: () => setVisibleMonth(parseDateValue(openingDay(value(), {
+          min: props.min,
+          max: props.max
+        }, dateConfig()), dateConfig())),
+        get wide() {
+          return Boolean(props.presets?.length);
         },
-        get dateConfig() {
-          return dateConfig();
-        }
-      }), _el$61, _co$13);
-      return _el$57;
-    })()
+        children: close => (() => {
+          var _el$113 = _$getNextElement(_tmpl$21),
+            _el$114 = _el$113.firstChild,
+            [_el$115, _co$25] = _$getNextMarker(_el$114.nextSibling),
+            _el$116 = _el$115.nextSibling,
+            [_el$117, _co$26] = _$getNextMarker(_el$116.nextSibling);
+          _$insert(_el$113, _$createComponent(PresetRail, {
+            get presets() {
+              return props.presets;
+            },
+            onSelect: value => {
+              close();
+              commitFieldValue(props, value);
+            }
+          }), _el$115, _co$25);
+          _$insert(_el$113, _$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;
+            }
+          }), _el$117, _co$26);
+          return _el$113;
+        })()
+      });
+    }
   });
 }
 export function DateTimePicker(props) {
@@ -730,7 +2011,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;
@@ -767,12 +2051,12 @@ export function DateTimePicker(props) {
         commitFieldValue(props, next);
       };
       return [(() => {
-        var _el$62 = _$getNextElement(_tmpl$16),
-          _el$63 = _el$62.firstChild,
-          [_el$64, _co$14] = _$getNextMarker(_el$63.nextSibling),
-          _el$65 = _el$64.nextSibling,
-          [_el$66, _co$15] = _$getNextMarker(_el$65.nextSibling);
-        _$insert(_el$62, _$createComponent(PresetRail, {
+        var _el$118 = _$getNextElement(_tmpl$21),
+          _el$119 = _el$118.firstChild,
+          [_el$120, _co$27] = _$getNextMarker(_el$119.nextSibling),
+          _el$121 = _el$120.nextSibling,
+          [_el$122, _co$28] = _$getNextMarker(_el$121.nextSibling);
+        _$insert(_el$118, _$createComponent(PresetRail, {
           get presets() {
             return props.presets;
           },
@@ -780,8 +2064,8 @@ export function DateTimePicker(props) {
             close();
             commitFieldValue(props, value);
           }
-        }), _el$64, _co$14);
-        _$insert(_el$62, _$createComponent(DatePickerPanel, {
+        }), _el$120, _co$27);
+        _$insert(_el$118, _$createComponent(DatePickerPanel, {
           visibleMonth: visibleMonth,
           setVisibleMonth: setVisibleMonth,
           selected: draftDate,
@@ -794,15 +2078,21 @@ export function DateTimePicker(props) {
           },
           get dateConfig() {
             return dateConfig();
+          },
+          get min() {
+            return props.min;
+          },
+          get max() {
+            return props.max;
           }
-        }), _el$66, _co$15);
-        return _el$62;
+        }), _el$122, _co$28);
+        return _el$118;
       })(), (() => {
-        var _el$67 = _$getNextElement(_tmpl$19),
-          _el$71 = _el$67.firstChild,
-          [_el$72, _co$16] = _$getNextMarker(_el$71.nextSibling),
-          _el$70 = _el$72.nextSibling;
-        _$insert(_el$67, _$createComponent(Show, {
+        var _el$123 = _$getNextElement(_tmpl$24),
+          _el$127 = _el$123.firstChild,
+          [_el$128, _co$29] = _$getNextMarker(_el$127.nextSibling),
+          _el$126 = _el$128.nextSibling;
+        _$insert(_el$123, _$createComponent(Show, {
           get when() {
             return props.optionalTime;
           },
@@ -815,25 +2105,25 @@ export function DateTimePicker(props) {
             });
           },
           get children() {
-            var _el$68 = _$getNextElement(_tmpl$18);
-            var _ref$4 = timeField;
-            typeof _ref$4 === "function" ? _$use(_ref$4, _el$68) : timeField = _el$68;
-            _$insert(_el$68, _$createComponent(Show, {
+            var _el$124 = _$getNextElement(_tmpl$28);
+            var _ref$12 = timeField;
+            typeof _ref$12 === "function" ? _$use(_ref$12, _el$124) : timeField = _el$124;
+            _$insert(_el$124, _$createComponent(Show, {
               get when() {
                 return withTime();
               },
               get fallback() {
                 return (() => {
-                  var _el$73 = _$getNextElement(_tmpl$20),
-                    _el$74 = _el$73.firstChild,
-                    _el$75 = _el$74.nextSibling,
-                    [_el$76, _co$17] = _$getNextMarker(_el$75.nextSibling);
-                  _el$73.$$click = addTime;
-                  var _ref$5 = addTimeButton;
-                  typeof _ref$5 === "function" ? _$use(_ref$5, _el$73) : addTimeButton = _el$73;
-                  _$insert(_el$73, () => messages().addTime, _el$76, _co$17);
+                  var _el$129 = _$getNextElement(_tmpl$29),
+                    _el$130 = _el$129.firstChild,
+                    _el$131 = _el$130.nextSibling,
+                    [_el$132, _co$30] = _$getNextMarker(_el$131.nextSibling);
+                  _el$129.$$click = addTime;
+                  var _ref$13 = addTimeButton;
+                  typeof _ref$13 === "function" ? _$use(_ref$13, _el$129) : addTimeButton = _el$129;
+                  _$insert(_el$129, () => messages().addTime, _el$132, _co$30);
                   _$runHydrationEvents();
-                  return _el$73;
+                  return _el$129;
                 })();
               },
               get children() {
@@ -843,32 +2133,32 @@ export function DateTimePicker(props) {
                   },
                   onChange: setDraftTime
                 }), (() => {
-                  var _el$69 = _$getNextElement(_tmpl$17);
-                  _el$69.$$click = removeTime;
+                  var _el$125 = _$getNextElement(_tmpl$27);
+                  _el$125.$$click = removeTime;
                   _$effect(_p$ => {
-                    var _v$22 = messages().removeTime,
-                      _v$23 = messages().removeTime;
-                    _v$22 !== _p$.e && _$setAttribute(_el$69, "aria-label", _p$.e = _v$22);
-                    _v$23 !== _p$.t && _$setAttribute(_el$69, "title", _p$.t = _v$23);
+                    var _v$50 = messages().removeTime,
+                      _v$51 = messages().removeTime;
+                    _v$50 !== _p$.e && _$setAttribute(_el$125, "aria-label", _p$.e = _v$50);
+                    _v$51 !== _p$.t && _$setAttribute(_el$125, "title", _p$.t = _v$51);
                     return _p$;
                   }, {
                     e: undefined,
                     t: undefined
                   });
                   _$runHydrationEvents();
-                  return _el$69;
+                  return _el$125;
                 })()];
               }
             }));
-            _$effect(() => _$setAttribute(_el$68, "data-with-time", withTime() ? "true" : undefined));
-            return _el$68;
+            _$effect(() => _$setAttribute(_el$124, "data-with-time", withTime() ? "true" : undefined));
+            return _el$124;
           }
-        }), _el$72, _co$16);
-        _el$70.$$click = apply;
-        _$insert(_el$70, () => messages().apply);
-        _$effect(() => _$setProperty(_el$70, "disabled", !canApply()));
+        }), _el$128, _co$29);
+        _el$126.$$click = apply;
+        _$insert(_el$126, () => messages().apply);
+        _$effect(() => _$setProperty(_el$126, "disabled", !canApply()));
         _$runHydrationEvents();
-        return _el$67;
+        return _el$123;
       })()];
     }
   });
@@ -909,7 +2199,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 "";
@@ -919,19 +2212,19 @@ export function DateRangePicker(props) {
   const valueContent = () => {
     const format = withTime() ? formatDateTimeValue : displayDate;
     return (() => {
-      var _el$77 = _$getNextElement(_tmpl$21),
-        _el$78 = _el$77.firstChild,
-        _el$79 = _el$78.nextSibling,
-        _el$80 = _el$79.nextSibling;
-      _$insert(_el$78, (() => {
-        var _c$ = _$memo(() => !!value().start);
-        return () => _c$() ? format(value().start, dateConfig()) : messages().start;
+      var _el$133 = _$getNextElement(_tmpl$30),
+        _el$134 = _el$133.firstChild,
+        _el$135 = _el$134.nextSibling,
+        _el$136 = _el$135.nextSibling;
+      _$insert(_el$134, (() => {
+        var _c$3 = _$memo(() => !!value().start);
+        return () => _c$3() ? format(value().start, dateConfig()) : messages().start;
       })());
-      _$insert(_el$80, (() => {
-        var _c$2 = _$memo(() => !!value().end);
-        return () => _c$2() ? format(value().end, dateConfig()) : "End";
+      _$insert(_el$136, (() => {
+        var _c$4 = _$memo(() => !!value().end);
+        return () => _c$4() ? format(value().end, dateConfig()) : "End";
       })());
-      return _el$77;
+      return _el$133;
     })();
   };
   const selectDate = value => {
@@ -985,151 +2278,171 @@ 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
-    },
-    get timezone() {
-      return _$memo(() => !!withTime())() ? dateConfig().timeZone : undefined;
+  return _$createComponent(Show, {
+    get when() {
+      return props.appearance === "plain" || withTime();
     },
-    footerMeta: () => _$createComponent(Show, {
-      get when() {
-        return durationLabel();
-      },
-      get children() {
-        var _el$81 = _$getNextElement(_tmpl$22),
-          _el$82 = _el$81.firstChild,
-          _el$83 = _el$82.nextSibling,
-          [_el$84, _co$18] = _$getNextMarker(_el$83.nextSibling);
-        _$insert(_el$81, durationLabel, _el$84, _co$18);
-        return _el$81;
-      }
-    }),
-    onOpen: syncDraft,
-    get wide() {
-      return Boolean(props.datePresets?.length || props.presets?.length);
+    get fallback() {
+      return _$createComponent(DateRangeTextField, {
+        owner: props,
+        value: value,
+        dateConfig: dateConfig
+      });
     },
-    children: close => [(() => {
-      var _el$85 = _$getNextElement(_tmpl$16),
-        _el$86 = _el$85.firstChild,
-        [_el$87, _co$19] = _$getNextMarker(_el$86.nextSibling),
-        _el$88 = _el$87.nextSibling,
-        [_el$89, _co$20] = _$getNextMarker(_el$88.nextSibling);
-      _$insert(_el$85, _$createComponent(Show, {
-        get when() {
-          return props.datePresets?.length;
+    get children() {
+      return _$createComponent(PickerShell, {
+        owner: props,
+        icon: "ti ti-calendar-stats",
+        valueLabel: valueLabel,
+        valueContent: valueContent,
+        clearValue: {
+          start: null,
+          end: null
         },
-        get fallback() {
-          return _$createComponent(PresetRail, {
-            get presets() {
-              return props.presets;
-            },
-            onSelect: value => {
-              close();
-              commitFieldValue(props, value);
-            }
-          });
+        get timezone() {
+          return _$memo(() => !!withTime())() ? dateConfig().timeZone : undefined;
         },
-        get children() {
-          return _$createComponent(PresetRail, {
-            get presets() {
-              return props.datePresets;
+        footerMeta: () => _$createComponent(Show, {
+          get when() {
+            return durationLabel();
+          },
+          get children() {
+            var _el$137 = _$getNextElement(_tmpl$25),
+              _el$138 = _el$137.firstChild,
+              _el$139 = _el$138.nextSibling,
+              [_el$140, _co$31] = _$getNextMarker(_el$139.nextSibling);
+            _$insert(_el$137, durationLabel, _el$140, _co$31);
+            return _el$137;
+          }
+        }),
+        onOpen: syncDraft,
+        get wide() {
+          return Boolean(props.datePresets?.length || props.presets?.length);
+        },
+        children: close => [(() => {
+          var _el$141 = _$getNextElement(_tmpl$21),
+            _el$142 = _el$141.firstChild,
+            [_el$143, _co$32] = _$getNextMarker(_el$142.nextSibling),
+            _el$144 = _el$143.nextSibling,
+            [_el$145, _co$33] = _$getNextMarker(_el$144.nextSibling);
+          _$insert(_el$141, _$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);
+                }
+              });
+            },
+            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()));
+                }
               });
-              if (value) setVisibleMonth(parseDateValue(value, dateConfig()));
             }
-          });
-        }
-      }), _el$87, _co$19);
-      _$insert(_el$85, _$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();
-        }
-      }), _el$89, _co$20);
-      return _el$85;
-    })(), _$createComponent(Show, {
-      get when() {
-        return withTime();
-      },
-      get children() {
-        var _el$90 = _$getNextElement(_tmpl$23),
-          _el$91 = _el$90.firstChild,
-          [_el$92, _co$21] = _$getNextMarker(_el$91.nextSibling),
-          _el$93 = _el$92.nextSibling,
-          [_el$94, _co$22] = _$getNextMarker(_el$93.nextSibling);
-        _$insert(_el$90, _$createComponent(TimeInput, {
-          get label() {
-            return messages().start;
-          },
-          get time() {
-            return startTime();
-          },
-          onChange: setStartTime
-        }), _el$92, _co$21);
-        _$insert(_el$90, _$createComponent(TimeInput, {
-          get label() {
-            return messages().end;
-          },
-          get time() {
-            return endTime();
+          }), _el$143, _co$32);
+          _$insert(_el$141, _$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();
+            },
+            get min() {
+              return props.min;
+            },
+            get max() {
+              return props.max;
+            }
+          }), _el$145, _co$33);
+          return _el$141;
+        })(), _$createComponent(Show, {
+          get when() {
+            return withTime();
           },
-          onChange: setEndTime
-        }), _el$94, _co$22);
-        return _el$90;
-      }
-    }), (() => {
-      var _el$95 = _$getNextElement(_tmpl$19),
-        _el$98 = _el$95.firstChild,
-        [_el$99, _co$23] = _$getNextMarker(_el$98.nextSibling),
-        _el$97 = _el$99.nextSibling;
-      _$insert(_el$95, _$createComponent(Show, {
-        get when() {
-          return _$memo(() => !!withTime())() && props.durationPresets?.length;
-        },
-        get children() {
-          var _el$96 = _$getNextElement(_tmpl$24);
-          _$insert(_el$96, _$createComponent(For, {
-            get each() {
-              return props.durationPresets;
+          get children() {
+            var _el$146 = _$getNextElement(_tmpl$31),
+              _el$147 = _el$146.firstChild,
+              [_el$148, _co$34] = _$getNextMarker(_el$147.nextSibling),
+              _el$149 = _el$148.nextSibling,
+              [_el$150, _co$35] = _$getNextMarker(_el$149.nextSibling);
+            _$insert(_el$146, _$createComponent(TimeInput, {
+              get label() {
+                return messages().start;
+              },
+              get time() {
+                return startTime();
+              },
+              onChange: setStartTime
+            }), _el$148, _co$34);
+            _$insert(_el$146, _$createComponent(TimeInput, {
+              get label() {
+                return messages().end;
+              },
+              get time() {
+                return endTime();
+              },
+              onChange: setEndTime
+            }), _el$150, _co$35);
+            return _el$146;
+          }
+        }), (() => {
+          var _el$151 = _$getNextElement(_tmpl$24),
+            _el$154 = _el$151.firstChild,
+            [_el$155, _co$36] = _$getNextMarker(_el$154.nextSibling),
+            _el$153 = _el$155.nextSibling;
+          _$insert(_el$151, _$createComponent(Show, {
+            get when() {
+              return _$memo(() => !!withTime())() && props.durationPresets?.length;
             },
-            children: preset => (() => {
-              var _el$100 = _$getNextElement(_tmpl$7);
-              _el$100.$$click = () => applyDuration(preset.minutes);
-              _$insert(_el$100, () => preset.label);
-              _$effect(() => _$setAttribute(_el$100, "aria-pressed", durationMinutes() === preset.minutes));
-              _$runHydrationEvents();
-              return _el$100;
-            })()
-          }));
-          _$effect(() => _$setAttribute(_el$96, "aria-label", messages().durationPresets));
-          return _el$96;
-        }
-      }), _el$99, _co$23);
-      _el$97.$$click = () => commit(close);
-      _$insert(_el$97, () => messages().apply);
-      _$effect(() => _$setProperty(_el$97, "disabled", Boolean(draftRange().start) !== Boolean(draftRange().end) || Boolean(withTime() && draftRange().start && draftRange().end && (!isCompleteTime(startTime()) || !isCompleteTime(endTime())))));
-      _$runHydrationEvents();
-      return _el$95;
-    })()]
+            get children() {
+              var _el$152 = _$getNextElement(_tmpl$32);
+              _$insert(_el$152, _$createComponent(For, {
+                get each() {
+                  return props.durationPresets;
+                },
+                children: preset => (() => {
+                  var _el$156 = _$getNextElement(_tmpl$7);
+                  _el$156.$$click = () => applyDuration(preset.minutes);
+                  _$insert(_el$156, () => preset.label);
+                  _$effect(() => _$setAttribute(_el$156, "aria-pressed", durationMinutes() === preset.minutes));
+                  _$runHydrationEvents();
+                  return _el$156;
+                })()
+              }));
+              _$effect(() => _$setAttribute(_el$152, "aria-label", messages().durationPresets));
+              return _el$152;
+            }
+          }), _el$155, _co$36);
+          _el$153.$$click = () => commit(close);
+          _$insert(_el$153, () => messages().apply);
+          _$effect(() => _$setProperty(_el$153, "disabled", Boolean(draftRange().start) !== Boolean(draftRange().end) || Boolean(withTime() && draftRange().start && draftRange().end && (!isCompleteTime(startTime()) || !isCompleteTime(endTime())))));
+          _$runHydrationEvents();
+          return _el$151;
+        })()]
+      });
+    }
   });
 }
-_$delegateEvents(["click", "keydown", "input"]);
+_$delegateEvents(["click", "keydown", "input", "focusout", "pointerdown"]);
 //# sourceMappingURL=DatePicker.js.map