@k2b/ui 0.50.0 → 0.51.0

package/dist/browser/inputs/PeriodPicker.js

@@ -0,0 +1,874 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { setProperty as _$setProperty } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<button type=button class=k2b-period-picker__trigger aria-haspopup=dialog><i class="ti ti-calendar"aria-hidden=true></i><span class=k2b-period-picker__value><span></span><!$><!/></span><i aria-hidden=true>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<div class=k2b-period-picker__popover popover=auto role=dialog>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<span class=k2b-period-picker__detail> · <!$><!/>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<span aria-hidden=true>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<button type=button role=option class="k2b-dropdown__item k2b-period-picker__option k2b-period-picker__custom"><span class=k2b-dropdown__copy><span></span></span><span class=k2b-period-picker__hint></span><i class="ti ti-chevron-right k2b-dropdown__check"aria-hidden=true>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-period-picker__list role=listbox><!$><!/><!$><!/>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<div class=k2b-period-picker__panel><!$><!/><!$><!/>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<button type=button role=option class="k2b-dropdown__item k2b-period-picker__option"><span class=k2b-dropdown__copy><span></span></span><span class=k2b-period-picker__hint></span><i class="ti ti-check k2b-dropdown__check"aria-hidden=true>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<div class="k2b-field k2b-period-picker__field"><label class=k2b-field__label></label><div class=k2b-input-shell><input class=k2b-input type=text inputmode=numeric autocomplete=off></div><p class=k2b-period-picker__error>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<button type=button class=k2b-period-picker__back><i class="ti ti-chevron-left"aria-hidden=true></i><!$><!/>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<i class="ti ti-hourglass-low"aria-hidden=true>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<div class=k2b-period-picker__editor role=group><!$><!/><div class=k2b-period-picker__fields><!$><!/><!$><!/></div><div class=k2b-period-picker__months><!$><!/><!$><!/></div><div class=k2b-period-picker__actions><span class=k2b-date-duration aria-live=polite><!$><!/><!$><!/></span><button type=button class=k2b-date-apply>`);
+import { dates } from "@k2b/stdlib";
+import { batch, createComputed, createEffect, createMemo, createSignal, For, on, onCleanup, Show } from "solid-js";
+import { prefersMenuSheet } from "../actions/phone-sheet";
+import { createFieldMeta, Field, fieldDescribedBy } from "../internal/field";
+import { returnFocus, ringOnReturn } from "../internal/focus-return";
+import { useDateConfigLocale } from "../intl/locale";
+import { useUiMessages } from "../intl/messages";
+import { DatePickerPanel } from "./DatePicker";
+import { dateInputPattern, formatDateInput, parseDateInput } from "./date-input";
+import { resolveDateInputMessages } from "./date-input-messages";
+import { errorText } from "./date-input-status";
+import { parseDateValue, pickRangeDay, previewRange, rangeAnchor } from "./date-picker";
+import { commitFieldValue, resolveMaybeAccessor } from "./field-contract";
+import { formatPeriodDays, formatPeriodRange, periodContext, periodDayCount, widePeriodRangeSample } from "./period";
+import { builtInPresetLabel, usePeriodPickerMessages } from "./period-picker-messages";
+/** Two months side by side need room for the list and both calendars. */
+const TWO_MONTHS_QUERY = "(min-width: 56rem)";
+const presetLabel = (preset, t) => preset.label ?? builtInPresetLabel(t, preset.key) ?? preset.key;
+
+/** Places the popover under (or over) the trigger; it grows toward the side with room, right-aligned near the right edge. */
+const placePeriodPopover = (trigger, popover) => {
+  const margin = 8;
+  const gap = 4;
+  const rect = trigger.getBoundingClientRect();
+  const box = popover.getBoundingClientRect();
+  const width = Math.min(box.width, window.innerWidth - margin * 2);
+  const fromLeft = rect.left;
+  const fromRight = rect.right - width;
+  const left = fromLeft + width <= window.innerWidth - margin ? fromLeft : Math.max(margin, fromRight);
+  const roomBelow = window.innerHeight - rect.bottom - gap - margin;
+  const roomAbove = rect.top - gap - margin;
+  const above = box.height > roomBelow && roomAbove > roomBelow;
+  const top = above ? Math.max(margin, rect.top - box.height - gap) : Math.min(rect.bottom + gap, window.innerHeight - box.height - margin);
+  popover.style.left = `${Math.max(margin, Math.min(left, window.innerWidth - width - margin))}px`;
+  popover.style.top = `${Math.max(margin, top)}px`;
+};
+const popoverIsOpen = popover => {
+  try {
+    return Boolean(popover?.matches(":popover-open"));
+  } catch {
+    return false;
+  }
+};
+
+/**
+ * PeriodPicker — one control for the period an evaluation or dashboard shows: presets such as "This month" plus a
+ * custom range, edited in the same popover (a bottom sheet on phones). The trigger shows the preset with its days or
+ * the custom days with their count, and keeps the width of its longest text so nothing beside it moves.
+ */
+export function PeriodPicker(props) {
+  const t = usePeriodPickerMessages();
+  const meta = createFieldMeta(props.id);
+  const dateConfig = useDateConfigLocale(() => props.dateConfig);
+  const locale = () => dateConfig().locale ?? "en";
+  const value = () => resolveMaybeAccessor(props.value);
+  const custom = () => props.custom ?? true;
+  const disabled = createMemo(() => Boolean(props.disabled || props.loading));
+  // Read again on every opening, so a picker left open past midnight shows the new day's presets next time.
+  const [clockTick, setClockTick] = createSignal(0);
+  const context = createMemo(() => {
+    clockTick();
+    return periodContext({
+      now: props.now,
+      timeZone: dateConfig().timeZone,
+      weekStartsOn: dateConfig().weekStartsOn ?? dateConfig().firstDayOfWeek
+    });
+  });
+  const since = date => t().since({
+    date
+  });
+  const presetText = preset => ({
+    label: presetLabel(preset, t()),
+    detail: formatPeriodDays(preset.resolve(context()), context().today, locale(), since)
+  });
+  const rangeText = range => ({
+    label: formatPeriodRange(range, locale()),
+    detail: t().days({
+      count: periodDayCount(range)
+    })
+  });
+  const selectedPreset = () => {
+    const current = value();
+    return current && "preset" in current ? props.presets.find(preset => preset.key === current.preset) : undefined;
+  };
+  const current = createMemo(() => {
+    const selected = value();
+    if (!selected) return undefined;
+    if ("preset" in selected) {
+      const preset = selectedPreset();
+      return preset ? presetText(preset) : undefined;
+    }
+    return rangeText(selected);
+  });
+  const joined = text => text.detail ? `${text.label} · ${text.detail}` : text.label;
+  // Every text the trigger can show shares one grid cell, so it keeps the widest one's width.
+  const widths = createMemo(() => [...props.presets.map(preset => joined(presetText(preset))), ...(custom() ? [joined(rangeText(widePeriodRangeSample(context().today)))] : []), t().choosePeriod]);
+  const [open, setOpen] = createSignal(false);
+  const [view, setView] = createSignal("list");
+  const [sheetOpen, setSheetOpen] = createSignal(false);
+  let trigger;
+  let popover;
+  let openedByKeyboard = false;
+  const popoverId = `${meta.controlId}-period`;
+  const sheetId = `${meta.controlId}-sheet`;
+  const valueId = `${meta.controlId}-value`;
+
+  // A trigger disabled while a change saves would drop keyboard focus on the page; it comes back once enabled.
+  let refocus = false;
+  createComputed(on(disabled, isDisabled => {
+    if (isDisabled) refocus = trigger !== undefined && document.activeElement === trigger;
+  }, {
+    defer: true
+  }));
+  createEffect(on(disabled, isDisabled => {
+    if (isDisabled || !refocus) return;
+    refocus = false;
+    const active = document.activeElement;
+    if (trigger?.isConnected && (active === null || active === document.body)) trigger.focus();
+  }, {
+    defer: true
+  }));
+  const place = () => {
+    if (trigger && popover && open()) placePeriodPopover(trigger, popover);
+  };
+  createEffect(() => {
+    if (!open()) return;
+    view();
+    queueMicrotask(place);
+    window.addEventListener("resize", place);
+    window.addEventListener("scroll", place, true);
+    onCleanup(() => {
+      window.removeEventListener("resize", place);
+      window.removeEventListener("scroll", place, true);
+    });
+  });
+  const close = () => {
+    // Before hiding, so the popover does not return focus on its own.
+    if (popover?.contains(document.activeElement)) returnFocus(trigger, openedByKeyboard);
+    if (popoverIsOpen(popover)) popover?.hidePopover();
+    setOpen(false);
+  };
+  onCleanup(() => {
+    if (popoverIsOpen(popover)) popover?.hidePopover();
+  });
+  const pick = next => {
+    close();
+    if (sheetOpen()) return;
+    commitFieldValue(props, next);
+  };
+  const initialView = () => {
+    const selected = value();
+    return custom() && selected && !("preset" in selected) ? "custom" : "list";
+  };
+  const openSheet = async () => {
+    setSheetOpen(true);
+    const {
+      openDateSheet
+    } = await import("./date-sheet");
+    const result = await openDateSheet({
+      title: typeof props.label === "string" ? props.label : props["aria-label"] ?? t().period,
+      subtitle: current() ? joined(current()) : t().choosePeriod,
+      ariaLabel: typeof props.label === "string" ? props.label : props["aria-label"] ?? t().period,
+      id: sheetId,
+      locale: locale(),
+      content: closeSheet => _$createComponent(PeriodPanel, {
+        sheet: true,
+        get presets() {
+          return props.presets;
+        },
+        get custom() {
+          return custom();
+        },
+        value: value,
+        get initialView() {
+          return initialView();
+        },
+        context: context,
+        dateConfig: dateConfig,
+        presetText: presetText,
+        rangeText: rangeText,
+        get label() {
+          return props["aria-label"] ?? t().period;
+        },
+        onPick: closeSheet
+      })
+    });
+    setSheetOpen(false);
+    if (result) commitFieldValue(props, result);
+    trigger?.focus({
+      preventScroll: true
+    });
+  };
+  const show = () => {
+    if (disabled() || !popover) return;
+    setClockTick(tick => tick + 1);
+    openedByKeyboard = ringOnReturn(trigger);
+    if (prefersMenuSheet()) return void openSheet();
+    setView(initialView());
+    popover.showPopover();
+    setOpen(true);
+    queueMicrotask(() => {
+      place();
+      popover?.querySelector('[role="option"][tabindex="0"]')?.focus();
+    });
+  };
+  const name = () => props.label ? undefined : `${props["aria-label"] ?? t().period}: ${current() ? joined(current()) : t().choosePeriod}`;
+  return _$createComponent(Field, {
+    get ["class"]() {
+      return `k2b-period-picker ${props.class ?? ""}`;
+    },
+    get label() {
+      return props.label;
+    },
+    get description() {
+      return props.description;
+    },
+    get error() {
+      return props.error;
+    },
+    meta: meta,
+    get required() {
+      return props.required;
+    },
+    get disabled() {
+      return disabled();
+    },
+    get children() {
+      return [(() => {
+        var _el$ = _$getNextElement(_tmpl$),
+          _el$2 = _el$.firstChild,
+          _el$3 = _el$2.nextSibling,
+          _el$4 = _el$3.firstChild,
+          _el$5 = _el$4.nextSibling,
+          [_el$6, _co$] = _$getNextMarker(_el$5.nextSibling),
+          _el$7 = _el$3.nextSibling;
+        _el$.$$keydown = event => {
+          if ((event.key === "ArrowDown" || event.key === "ArrowUp") && !open()) {
+            event.preventDefault();
+            show();
+          }
+        };
+        _el$.$$click = () => open() ? close() : show();
+        var _ref$ = trigger;
+        typeof _ref$ === "function" ? _$use(_ref$, _el$) : trigger = _el$;
+        _$setAttribute(_el$4, "id", valueId);
+        _$insert(_el$4, _$createComponent(Show, {
+          get when() {
+            return current();
+          },
+          get fallback() {
+            return t().choosePeriod;
+          },
+          children: text => [_$memo(() => text().label), _$createComponent(Show, {
+            get when() {
+              return text().detail;
+            },
+            get children() {
+              var _el$9 = _$getNextElement(_tmpl$3),
+                _el$0 = _el$9.firstChild,
+                _el$1 = _el$0.nextSibling,
+                [_el$10, _co$2] = _$getNextMarker(_el$1.nextSibling);
+              _$insert(_el$9, () => text().detail, _el$10, _co$2);
+              return _el$9;
+            }
+          })]
+        }));
+        _$insert(_el$3, _$createComponent(For, {
+          get each() {
+            return widths();
+          },
+          children: text => (() => {
+            var _el$11 = _$getNextElement(_tmpl$4);
+            _$insert(_el$11, text);
+            return _el$11;
+          })()
+        }), _el$6, _co$);
+        _$effect(_p$ => {
+          var _v$ = meta.controlId,
+            _v$2 = open() || sheetOpen(),
+            _v$3 = sheetOpen() ? sheetId : popoverId,
+            _v$4 = name(),
+            _v$5 = props.label ? `${meta.labelId} ${valueId}` : undefined,
+            _v$6 = fieldDescribedBy(meta, props),
+            _v$7 = resolveMaybeAccessor(props.error) ? "true" : undefined,
+            _v$8 = props.loading ? "true" : undefined,
+            _v$9 = disabled(),
+            _v$0 = current() ? undefined : "true",
+            _v$1 = props.loading ? "ti ti-loader-2 k2b-spin" : "ti ti-chevron-down";
+          _v$ !== _p$.e && _$setAttribute(_el$, "id", _p$.e = _v$);
+          _v$2 !== _p$.t && _$setAttribute(_el$, "aria-expanded", _p$.t = _v$2);
+          _v$3 !== _p$.a && _$setAttribute(_el$, "aria-controls", _p$.a = _v$3);
+          _v$4 !== _p$.o && _$setAttribute(_el$, "aria-label", _p$.o = _v$4);
+          _v$5 !== _p$.i && _$setAttribute(_el$, "aria-labelledby", _p$.i = _v$5);
+          _v$6 !== _p$.n && _$setAttribute(_el$, "aria-describedby", _p$.n = _v$6);
+          _v$7 !== _p$.s && _$setAttribute(_el$, "aria-invalid", _p$.s = _v$7);
+          _v$8 !== _p$.h && _$setAttribute(_el$, "aria-busy", _p$.h = _v$8);
+          _v$9 !== _p$.r && _$setProperty(_el$, "disabled", _p$.r = _v$9);
+          _v$0 !== _p$.d && _$setAttribute(_el$3, "data-placeholder", _p$.d = _v$0);
+          _v$1 !== _p$.l && _$className(_el$7, _p$.l = _v$1);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined,
+          i: undefined,
+          n: undefined,
+          s: undefined,
+          h: undefined,
+          r: undefined,
+          d: undefined,
+          l: undefined
+        });
+        _$runHydrationEvents();
+        return _el$;
+      })(), (() => {
+        var _el$8 = _$getNextElement(_tmpl$2);
+        _el$8.$$keydown = event => {
+          if (event.key !== "Escape") return;
+          event.preventDefault();
+          event.stopPropagation();
+          close();
+        };
+        _$use(element => {
+          popover = element;
+          // Light dismiss (a click outside) hides it without us; keep the state in step.
+          element.addEventListener("toggle", () => {
+            if (!popoverIsOpen(element)) setOpen(false);
+          });
+        }, _el$8);
+        _$setAttribute(_el$8, "id", popoverId);
+        _$insert(_el$8, _$createComponent(Show, {
+          get when() {
+            return open();
+          },
+          get children() {
+            return _$createComponent(PeriodPanel, {
+              get presets() {
+                return props.presets;
+              },
+              get custom() {
+                return custom();
+              },
+              value: value,
+              get initialView() {
+                return view();
+              },
+              onViewChange: setView,
+              context: context,
+              dateConfig: dateConfig,
+              presetText: presetText,
+              rangeText: rangeText,
+              get label() {
+                return props["aria-label"] ?? t().period;
+              },
+              onPick: pick
+            });
+          }
+        }));
+        _$effect(() => _$setAttribute(_el$8, "aria-label", props["aria-label"] ?? (typeof props.label === "string" ? props.label : t().period)));
+        _$runHydrationEvents();
+        return _el$8;
+      })()];
+    }
+  });
+}
+function PeriodPanel(props) {
+  const t = usePeriodPickerMessages();
+  const [view, setViewSignal] = createSignal(props.initialView);
+  const setView = next => {
+    setViewSignal(next);
+    props.onViewChange?.(next);
+  };
+  const selected = () => props.value();
+  const explicit = () => {
+    const current = selected();
+    return current && !("preset" in current) ? current : undefined;
+  };
+  const isSelected = preset => {
+    const current = selected();
+    return Boolean(current && "preset" in current && current.preset === preset.key);
+  };
+  const optionCount = () => props.presets.length + (props.custom ? 1 : 0);
+  const initialActive = () => {
+    const index = props.presets.findIndex(isSelected);
+    if (index >= 0) return index;
+    return explicit() && props.custom ? props.presets.length : 0;
+  };
+  const [active, setActive] = createSignal(initialActive());
+  let list;
+  const focusOption = index => {
+    setActive(index);
+    queueMicrotask(() => list?.querySelector(`[data-option-index="${index}"]`)?.focus());
+  };
+  const onListKeyDown = event => {
+    const count = optionCount();
+    const moves = {
+      ArrowDown: (active() + 1) % count,
+      ArrowUp: (active() - 1 + count) % count,
+      Home: 0,
+      End: count - 1
+    };
+    const next = moves[event.key];
+    if (next === undefined) return;
+    event.preventDefault();
+    focusOption(next);
+  };
+  let panel;
+  const openCustom = () => {
+    setActive(props.presets.length);
+    setView("custom");
+    // In the sheet the list goes away with the focused option; focus continues on the calendar's day.
+    if (props.sheet) queueMicrotask(() => panel?.querySelector('[data-date-focus="true"]')?.focus());
+  };
+  return (() => {
+    var _el$12 = _$getNextElement(_tmpl$7),
+      _el$22 = _el$12.firstChild,
+      [_el$23, _co$5] = _$getNextMarker(_el$22.nextSibling),
+      _el$24 = _el$23.nextSibling,
+      [_el$25, _co$6] = _$getNextMarker(_el$24.nextSibling);
+    var _ref$2 = panel;
+    typeof _ref$2 === "function" ? _$use(_ref$2, _el$12) : panel = _el$12;
+    _$insert(_el$12, _$createComponent(Show, {
+      get when() {
+        return !props.sheet || view() === "list";
+      },
+      get children() {
+        var _el$13 = _$getNextElement(_tmpl$6),
+          _el$18 = _el$13.firstChild,
+          [_el$19, _co$3] = _$getNextMarker(_el$18.nextSibling),
+          _el$20 = _el$19.nextSibling,
+          [_el$21, _co$4] = _$getNextMarker(_el$20.nextSibling);
+        _el$13.$$keydown = onListKeyDown;
+        var _ref$3 = list;
+        typeof _ref$3 === "function" ? _$use(_ref$3, _el$13) : list = _el$13;
+        _$insert(_el$13, _$createComponent(For, {
+          get each() {
+            return props.presets;
+          },
+          children: (preset, index) => {
+            const text = () => props.presetText(preset);
+            return (() => {
+              var _el$26 = _$getNextElement(_tmpl$8),
+                _el$27 = _el$26.firstChild,
+                _el$28 = _el$27.firstChild,
+                _el$29 = _el$27.nextSibling,
+                _el$30 = _el$29.nextSibling;
+              _el$26.$$click = () => props.onPick({
+                preset: preset.key
+              });
+              _el$26.addEventListener("focus", () => setActive(index()));
+              _$insert(_el$28, () => text().label);
+              _$insert(_el$29, () => text().detail);
+              _$effect(_p$ => {
+                var _v$15 = index(),
+                  _v$16 = isSelected(preset) && view() === "list",
+                  _v$17 = active() === index() ? 0 : -1,
+                  _v$18 = isSelected(preset) && view() === "list" ? undefined : "true";
+                _v$15 !== _p$.e && _$setAttribute(_el$26, "data-option-index", _p$.e = _v$15);
+                _v$16 !== _p$.t && _$setAttribute(_el$26, "aria-selected", _p$.t = _v$16);
+                _v$17 !== _p$.a && _$setAttribute(_el$26, "tabindex", _p$.a = _v$17);
+                _v$18 !== _p$.o && _$setAttribute(_el$30, "data-hidden", _p$.o = _v$18);
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined,
+                a: undefined,
+                o: undefined
+              });
+              _$runHydrationEvents();
+              return _el$26;
+            })();
+          }
+        }), _el$19, _co$3);
+        _$insert(_el$13, _$createComponent(Show, {
+          get when() {
+            return props.custom;
+          },
+          get children() {
+            var _el$14 = _$getNextElement(_tmpl$5),
+              _el$15 = _el$14.firstChild,
+              _el$16 = _el$15.firstChild,
+              _el$17 = _el$15.nextSibling;
+            _el$14.$$click = openCustom;
+            _el$14.addEventListener("focus", () => setActive(props.presets.length));
+            _$insert(_el$16, () => t().custom);
+            _$insert(_el$17, (() => {
+              var _c$ = _$memo(() => !!explicit());
+              return () => _c$() ? props.rangeText(explicit()).label : "";
+            })());
+            _$effect(_p$ => {
+              var _v$10 = props.presets.length,
+                _v$11 = view() === "custom" || Boolean(explicit()),
+                _v$12 = active() === props.presets.length ? 0 : -1;
+              _v$10 !== _p$.e && _$setAttribute(_el$14, "data-option-index", _p$.e = _v$10);
+              _v$11 !== _p$.t && _$setAttribute(_el$14, "aria-selected", _p$.t = _v$11);
+              _v$12 !== _p$.a && _$setAttribute(_el$14, "tabindex", _p$.a = _v$12);
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined,
+              a: undefined
+            });
+            _$runHydrationEvents();
+            return _el$14;
+          }
+        }), _el$21, _co$4);
+        _$effect(() => _$setAttribute(_el$13, "aria-label", props.label));
+        _$runHydrationEvents();
+        return _el$13;
+      }
+    }), _el$23, _co$5);
+    _$insert(_el$12, _$createComponent(Show, {
+      get when() {
+        return view() === "custom";
+      },
+      get children() {
+        return _$createComponent(RangeEditor, {
+          get initial() {
+            const current = explicit();
+            if (current) return current;
+            const preset = props.presets.find(isSelected);
+            const range = preset?.resolve(props.context());
+            return range?.start && range.end ? {
+              start: range.start,
+              end: range.end
+            } : null;
+          },
+          get today() {
+            return props.context().today;
+          },
+          get dateConfig() {
+            return props.dateConfig;
+          },
+          get rangeText() {
+            return props.rangeText;
+          },
+          get sheet() {
+            return props.sheet;
+          },
+          onBack: () => {
+            setView("list");
+            focusOption(props.presets.length);
+          },
+          onApply: range => props.onPick(range)
+        });
+      }
+    }), _el$25, _co$6);
+    _$effect(_p$ => {
+      var _v$13 = view(),
+        _v$14 = props.sheet ? "true" : undefined;
+      _v$13 !== _p$.e && _$setAttribute(_el$12, "data-view", _p$.e = _v$13);
+      _v$14 !== _p$.t && _$setAttribute(_el$12, "data-sheet", _p$.t = _v$14);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$12;
+  })();
+}
+function RangeEditor(props) {
+  const t = usePeriodPickerMessages();
+  const ui = useUiMessages();
+  const locale = () => props.dateConfig().locale ?? "en";
+  const inputT = () => resolveDateInputMessages(locale());
+  const config = () => ({
+    ...props.dateConfig(),
+    weekStartsOn: props.dateConfig().weekStartsOn ?? props.dateConfig().firstDayOfWeek ?? 1
+  });
+  const [draft, setDraft] = createSignal({
+    start: props.initial?.start ?? null,
+    end: props.initial?.end ?? null
+  });
+  const [anchor, setAnchor] = createSignal(null);
+  const [preview, setPreview] = createSignal(null);
+  const [startText, setStartText] = createSignal(props.initial ? formatDateInput(props.initial.start, locale()) : "");
+  const [endText, setEndText] = createSignal(props.initial ? formatDateInput(props.initial.end, locale()) : "");
+  const [startError, setStartError] = createSignal("");
+  const [endError, setEndError] = createSignal("");
+  // Follows the window: narrowing it below two months' room drops the second month, widening adds it.
+  const query = !props.sheet && typeof matchMedia === "function" ? matchMedia(TWO_MONTHS_QUERY) : undefined;
+  const [wide, setWide] = createSignal(Boolean(query?.matches));
+  if (query) {
+    const update = () => setWide(query.matches);
+    query.addEventListener("change", update);
+    onCleanup(() => query.removeEventListener("change", update));
+  }
+  const twoMonths = () => !props.sheet && wide();
+  // Months are anchored on their 1st: stepping from 31 March or 30 November never skips a month.
+  const monthOf = (key, offset = 0) => {
+    const year = Number(key.slice(0, 4));
+    const month = Number(key.slice(5, 7)) - 1 + offset;
+    return parseDateValue(`${year + Math.floor(month / 12)}-${String((month % 12 + 12) % 12 + 1).padStart(2, "0")}-01`, config());
+  };
+  const keyOf = date => dates.formatDateKey(date, config());
+  // The first visible month: the end's month, and the one before it when two months show.
+  const [first, setFirstMonth] = createSignal(monthOf(props.initial?.end ?? props.today, twoMonths() ? -1 : 0));
+  const setFirst = date => setFirstMonth(monthOf(keyOf(date)));
+  const second = createMemo(() => monthOf(keyOf(first()), 1));
+  const shown = createMemo(() => previewRange(draft(), anchor(), preview()));
+  let months;
+  const startId = createFieldMeta().controlId;
+  const endId = createFieldMeta().controlId;
+  const isShown = date => dates.isSameMonth(date, first(), config()) || twoMonths() && dates.isSameMonth(date, second(), config());
+  const fill = range => {
+    setStartText(range.start ? formatDateInput(range.start, locale()) : "");
+    setEndText(range.end ? formatDateInput(range.end, locale()) : "");
+    setStartError("");
+    setEndError("");
+  };
+  const pickDay = key => {
+    const next = pickRangeDay(draft(), anchor(), key);
+    batch(() => {
+      setDraft(next.range);
+      setAnchor(next.anchor);
+      setPreview(null);
+      fill(next.range);
+    });
+  };
+  /** Reads one typed half; returns the day, `null` for empty, or `undefined` after showing an error. */
+  const readText = (text, setError) => {
+    const result = parseDateInput(text, {
+      today: props.today,
+      locale: locale()
+    });
+    if (result.kind === "empty") return null;
+    if (result.kind === "error") {
+      setError(errorText(result.error, locale(), inputT(), props.today));
+      return undefined;
+    }
+    setError("");
+    return result.date;
+  };
+  const commitTyped = () => {
+    const start = readText(startText(), setStartError);
+    const end = readText(endText(), setEndError);
+    if (start === undefined || end === undefined) return undefined;
+    const range = {
+      start,
+      end
+    };
+    batch(() => {
+      setDraft(range);
+      setAnchor(null);
+    });
+    if (start && end && end < start) {
+      setEndError(inputT().endBeforeStart);
+      return undefined;
+    }
+    if (start && !end) setEndError(inputT().missingEnd);
+    if (end && !start) setStartError(inputT().missingStart);
+    const visible = end ?? start;
+    if (visible && !isShown(parseDateValue(visible, config()))) setFirstMonth(monthOf(visible, twoMonths() ? -1 : 0));
+    return start && end ? {
+      start,
+      end
+    } : undefined;
+  };
+  const complete = () => {
+    const range = draft();
+    return range.start && range.end && !startError() && !endError() ? {
+      start: range.start,
+      end: range.end
+    } : undefined;
+  };
+  const apply = () => {
+    const typed = commitTyped();
+    if (typed) props.onApply(typed);
+  };
+  const fieldKeyDown = event => {
+    if (event.key !== "Enter") return;
+    event.preventDefault();
+    apply();
+  };
+  const placeholder = () => dateInputPattern(locale(), {
+    day: inputT().dayLetters,
+    month: inputT().monthLetters,
+    year: inputT().yearLetters
+  });
+  const status = () => {
+    const range = shown();
+    return range.start && range.end ? props.rangeText({
+      start: range.start,
+      end: range.end
+    }).detail : "";
+  };
+  const field = fieldProps => (() => {
+    var _el$31 = _$getNextElement(_tmpl$9),
+      _el$32 = _el$31.firstChild,
+      _el$33 = _el$32.nextSibling,
+      _el$34 = _el$33.firstChild,
+      _el$35 = _el$33.nextSibling;
+    _$insert(_el$32, () => fieldProps.label);
+    _el$34.$$keydown = fieldKeyDown;
+    _el$34.addEventListener("blur", () => commitTyped());
+    _el$34.$$input = event => fieldProps.setText(event.currentTarget.value);
+    _$setAttribute(_el$34, "spellcheck", false);
+    _$insert(_el$35, () => fieldProps.error());
+    _$effect(_p$ => {
+      var _v$19 = fieldProps.error() ? "true" : undefined,
+        _v$20 = fieldProps.id,
+        _v$21 = fieldProps.id,
+        _v$22 = placeholder(),
+        _v$23 = fieldProps.error() ? "true" : undefined,
+        _v$24 = fieldProps.error() ? `${fieldProps.id}-error` : undefined,
+        _v$25 = `${fieldProps.id}-error`;
+      _v$19 !== _p$.e && _$setAttribute(_el$31, "data-invalid", _p$.e = _v$19);
+      _v$20 !== _p$.t && _$setAttribute(_el$32, "for", _p$.t = _v$20);
+      _v$21 !== _p$.a && _$setAttribute(_el$34, "id", _p$.a = _v$21);
+      _v$22 !== _p$.o && _$setAttribute(_el$34, "placeholder", _p$.o = _v$22);
+      _v$23 !== _p$.i && _$setAttribute(_el$34, "aria-invalid", _p$.i = _v$23);
+      _v$24 !== _p$.n && _$setAttribute(_el$34, "aria-describedby", _p$.n = _v$24);
+      _v$25 !== _p$.s && _$setAttribute(_el$35, "id", _p$.s = _v$25);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined
+    });
+    _$effect(() => _$setProperty(_el$34, "value", fieldProps.text()));
+    _$runHydrationEvents();
+    return _el$31;
+  })();
+  return (() => {
+    var _el$36 = _$getNextElement(_tmpl$10),
+      _el$59 = _el$36.firstChild,
+      [_el$60, _co$12] = _$getNextMarker(_el$59.nextSibling),
+      _el$41 = _el$60.nextSibling,
+      _el$42 = _el$41.firstChild,
+      [_el$43, _co$8] = _$getNextMarker(_el$42.nextSibling),
+      _el$44 = _el$43.nextSibling,
+      [_el$45, _co$9] = _$getNextMarker(_el$44.nextSibling),
+      _el$46 = _el$41.nextSibling,
+      _el$47 = _el$46.firstChild,
+      [_el$48, _co$0] = _$getNextMarker(_el$47.nextSibling),
+      _el$49 = _el$48.nextSibling,
+      [_el$50, _co$1] = _$getNextMarker(_el$49.nextSibling),
+      _el$51 = _el$46.nextSibling,
+      _el$52 = _el$51.firstChild,
+      _el$54 = _el$52.firstChild,
+      [_el$55, _co$10] = _$getNextMarker(_el$54.nextSibling),
+      _el$56 = _el$55.nextSibling,
+      [_el$57, _co$11] = _$getNextMarker(_el$56.nextSibling),
+      _el$58 = _el$52.nextSibling;
+    _$insert(_el$36, _$createComponent(Show, {
+      get when() {
+        return props.sheet;
+      },
+      get children() {
+        var _el$37 = _$getNextElement(_tmpl$0),
+          _el$38 = _el$37.firstChild,
+          _el$39 = _el$38.nextSibling,
+          [_el$40, _co$7] = _$getNextMarker(_el$39.nextSibling);
+        _el$37.$$click = () => props.onBack();
+        _$insert(_el$37, () => t().backToPresets, _el$40, _co$7);
+        _$runHydrationEvents();
+        return _el$37;
+      }
+    }), _el$60, _co$12);
+    _$insert(_el$41, () => field({
+      id: startId,
+      label: t().from,
+      text: startText,
+      setText: setStartText,
+      error: startError
+    }), _el$43, _co$8);
+    _$insert(_el$41, () => field({
+      id: endId,
+      label: t().to,
+      text: endText,
+      setText: setEndText,
+      error: endError
+    }), _el$45, _co$9);
+    var _ref$4 = months;
+    typeof _ref$4 === "function" ? _$use(_ref$4, _el$46) : months = _el$46;
+    _$insert(_el$46, _$createComponent(DatePickerPanel, {
+      visibleMonth: first,
+      setVisibleMonth: setFirst,
+      range: shown,
+      focusDate: () => draft().start,
+      onSelect: pickDay,
+      onDayPreview: key => setPreview(rangeAnchor(draft(), anchor()) ? key : null),
+      get dateConfig() {
+        return config();
+      },
+      get nav() {
+        return twoMonths() ? "previous" : "both";
+      },
+      get hideOutside() {
+        return twoMonths();
+      },
+      isShown: isShown,
+      focusRoot: () => months
+    }), _el$48, _co$0);
+    _$insert(_el$46, _$createComponent(Show, {
+      get when() {
+        return twoMonths();
+      },
+      get children() {
+        return _$createComponent(DatePickerPanel, {
+          visibleMonth: second,
+          setVisibleMonth: date => setFirstMonth(monthOf(keyOf(date), -1)),
+          range: shown,
+          focusDate: () => draft().end,
+          onSelect: pickDay,
+          onDayPreview: key => setPreview(rangeAnchor(draft(), anchor()) ? key : null),
+          get dateConfig() {
+            return config();
+          },
+          nav: "next",
+          hideOutside: true,
+          isShown: isShown,
+          focusRoot: () => months
+        });
+      }
+    }), _el$50, _co$1);
+    _$insert(_el$52, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!shown().start)() && shown().end;
+      },
+      get children() {
+        return _$getNextElement(_tmpl$1);
+      }
+    }), _el$55, _co$10);
+    _$insert(_el$52, status, _el$57, _co$11);
+    _el$58.$$click = apply;
+    _$insert(_el$58, () => ui().apply);
+    _$effect(_p$ => {
+      var _v$26 = t().custom,
+        _v$27 = !complete();
+      _v$26 !== _p$.e && _$setAttribute(_el$36, "aria-label", _p$.e = _v$26);
+      _v$27 !== _p$.t && _$setProperty(_el$58, "disabled", _p$.t = _v$27);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    _$runHydrationEvents();
+    return _el$36;
+  })();
+}
+export default PeriodPicker;
+_$delegateEvents(["click", "keydown", "input"]);
+//# sourceMappingURL=PeriodPicker.js.map