@k2b/ui 0.29.0 → 0.30.0

package/dist/browser/inputs/DatePicker.js

@@ -1,6 +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 { className as _$className } from "solid-js/web";
 import { getNextMarker as _$getNextMarker } from "solid-js/web";
 import { setAttribute as _$setAttribute } from "solid-js/web";
@@ -20,27 +21,33 @@ var _tmpl$ = /*#__PURE__*/_$template(`<button type=button class="k2b-date-trigge
   _tmpl$5 = /*#__PURE__*/_$template(`<div class=k2b-date-picker><button type=button class=k2b-date-trigger aria-haspopup=dialog><i aria-hidden=true></i><span class=k2b-date-trigger__value></span><i class="ti ti-chevron-down k2b-date-trigger__chevron"aria-hidden=true></i></button><!$><!/><div class=k2b-date-popover popover=auto role=dialog><!$><!/><!$><!/>`),
   _tmpl$6 = /*#__PURE__*/_$template(`<aside class=k2b-date-presets>`),
   _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$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>`),
-  _tmpl$11 = /*#__PURE__*/_$template(`<div class=k2b-date-week role=row>`),
-  _tmpl$12 = /*#__PURE__*/_$template(`<button type=button role=gridcell>`),
-  _tmpl$13 = /*#__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$14 = /*#__PURE__*/_$template(`<div class=k2b-date-popover__body><!$><!/><!$><!/>`),
-  _tmpl$15 = /*#__PURE__*/_$template(`<div class=k2b-date-actions><!$><!/><button type=button class=k2b-date-apply>`),
-  _tmpl$16 = /*#__PURE__*/_$template(`<span class=k2b-date-range-value><span></span><i class="ti ti-arrow-narrow-right"aria-hidden=true></i><span>`),
-  _tmpl$17 = /*#__PURE__*/_$template(`<span class=k2b-date-duration><i class="ti ti-hourglass-low"aria-hidden=true></i><!$><!/>`),
-  _tmpl$18 = /*#__PURE__*/_$template(`<div class=k2b-date-range-times><!$><!/><!$><!/>`),
-  _tmpl$19 = /*#__PURE__*/_$template(`<div class=k2b-date-durations 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>`);
 import { dates } from "@k2b/stdlib";
 import { createEffect, createMemo, createSignal, For, onCleanup, onMount, Show } from "solid-js";
 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 { dateKey, displayDate, filterTimeInput, formatDateOnlyRangeDuration, formatDateTimeValue, inRange, isCompleteTime, isRangeEdge, monthDate, monthNames, msUntilNextDay, normalizeTimeInput, orderedRange, parseDateValue, pickerContext, previewRange, resolveFocusDay, splitDateTime, toDateTimeValue, yearMonth } from "./date-picker";
+import { isWeekendKey } from "../intl/weekend";
+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 => {
   if (!popover) return false;
@@ -375,6 +382,9 @@ function DatePickerPanel(props) {
     document.addEventListener("visibilitychange", refresh);
     onCleanup(() => document.removeEventListener("visibilitychange", refresh));
   });
+  // The weekend columns of the locale, read from the first week so they follow the grid's first day of the week.
+  const weekendColumns = createMemo(() => (dayRows()[0] ?? []).map(cell => isWeekendKey(cell.key, context().locale)));
+  const bands = createMemo(() => weekendBands(weekendColumns()));
   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.
@@ -423,8 +433,8 @@ function DatePickerPanel(props) {
       _el$29 = _el$28.firstChild,
       _el$30 = _el$29.nextSibling,
       _el$31 = _el$30.nextSibling,
-      _el$34 = _el$28.nextSibling,
-      [_el$35, _co$8] = _$getNextMarker(_el$34.nextSibling);
+      _el$42 = _el$28.nextSibling,
+      [_el$43, _co$10] = _$getNextMarker(_el$42.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);
@@ -447,61 +457,99 @@ function DatePickerPanel(props) {
       },
       get fallback() {
         return (() => {
-          var _el$36 = _$getNextElement(_tmpl$1);
-          _$insert(_el$36, _$createComponent(For, {
+          var _el$44 = _$getNextElement(_tmpl$1);
+          _$insert(_el$44, _$createComponent(For, {
             get each() {
               return months();
             },
             children: (name, index) => (() => {
-              var _el$37 = _$getNextElement(_tmpl$7);
-              _el$37.$$click = () => {
+              var _el$45 = _$getNextElement(_tmpl$7);
+              _el$45.$$click = () => {
                 props.setVisibleMonth(monthDate(month().year, index(), context()));
                 setView("days");
               };
-              _$insert(_el$37, name);
+              _$insert(_el$45, name);
               _$effect(_p$ => {
                 var _v$0 = index() === month().month,
                   _v$1 = index() === month().month ? "true" : undefined;
-                _v$0 !== _p$.e && _$setAttribute(_el$37, "aria-pressed", _p$.e = _v$0);
-                _v$1 !== _p$.t && _$setAttribute(_el$37, "data-selected", _p$.t = _v$1);
+                _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);
                 return _p$;
               }, {
                 e: undefined,
                 t: undefined
               });
               _$runHydrationEvents();
-              return _el$37;
+              return _el$45;
             })()
           }));
-          _$effect(() => _$setAttribute(_el$36, "aria-label", `Months in ${month().year}`));
-          return _el$36;
+          _$effect(() => _$setAttribute(_el$44, "aria-label", `Months in ${month().year}`));
+          return _el$44;
         })();
       },
       get children() {
         return [(() => {
-          var _el$32 = _$getNextElement(_tmpl$8);
+          var _el$32 = _$getNextElement(_tmpl$8),
+            _el$33 = _el$32.firstChild,
+            [_el$34, _co$8] = _$getNextMarker(_el$33.nextSibling),
+            _el$35 = _el$34.nextSibling,
+            [_el$36, _co$9] = _$getNextMarker(_el$35.nextSibling);
+          _$insert(_el$32, _$createComponent(For, {
+            get each() {
+              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;
+            })()
+          }), _el$34, _co$8);
           _$insert(_el$32, _$createComponent(For, {
             get each() {
               return weekdays();
             },
-            children: day => (() => {
-              var _el$38 = _$getNextElement(_tmpl$10);
-              _$insert(_el$38, day);
-              return _el$38;
+            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;
             })()
-          }));
+          }), _el$36, _co$9);
           return _el$32;
         })(), (() => {
-          var _el$33 = _$getNextElement(_tmpl$9);
-          _$insert(_el$33, _$createComponent(For, {
+          var _el$37 = _$getNextElement(_tmpl$9),
+            _el$38 = _el$37.firstChild,
+            [_el$39, _co$0] = _$getNextMarker(_el$38.nextSibling),
+            _el$40 = _el$39.nextSibling,
+            [_el$41, _co$1] = _$getNextMarker(_el$40.nextSibling);
+          _$insert(_el$37, _$createComponent(For, {
+            get each() {
+              return bands();
+            },
+            children: band => (() => {
+              var _el$48 = _$getNextElement(_tmpl$12);
+              _$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);
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined
+              });
+              return _el$48;
+            })()
+          }), _el$39, _co$0);
+          _$insert(_el$37, _$createComponent(For, {
             get each() {
               return dayRows();
             },
             children: week => (() => {
-              var _el$39 = _$getNextElement(_tmpl$11);
-              _$insert(_el$39, _$createComponent(For, {
+              var _el$49 = _$getNextElement(_tmpl$13);
+              _$insert(_el$49, _$createComponent(For, {
                 each: week,
-                children: cell => {
+                children: (cell, cellIndex) => {
                   const selected = () => props.selected?.() === cell.key;
                   const range = () => props.range?.() ?? {
                     start: null,
@@ -511,36 +559,38 @@ function DatePickerPanel(props) {
                   const focusable = () => cell.key === defaultFocus();
                   const today = () => cell.key === todayKey();
                   return (() => {
-                    var _el$40 = _$getNextElement(_tmpl$12);
-                    _el$40.addEventListener("pointerleave", () => props.onDayPreview?.(null));
-                    _el$40.addEventListener("pointerenter", () => props.onDayPreview?.(cell.key));
-                    _el$40.addEventListener("focus", () => {
+                    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", () => {
                       setFocusedKey(cell.key);
                       props.onDayPreview?.(cell.key);
                     });
-                    _el$40.addEventListener("blur", () => props.onDayPreview?.(null));
-                    _el$40.$$keydown = event => handleDayKeyDown(event, cell.day);
-                    _el$40.$$click = () => props.onSelect(cell.key);
-                    _$insert(_el$40, () => cell.number);
+                    _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);
                     _$effect(_p$ => {
-                      var _v$10 = cell.key,
-                        _v$11 = focusable() ? "true" : undefined,
-                        _v$12 = cell.outside ? "true" : undefined,
-                        _v$13 = inRange(cell.key, range()) && !active() ? "true" : undefined,
-                        _v$14 = today() ? "true" : undefined,
-                        _v$15 = today() ? "date" : undefined,
-                        _v$16 = today() ? todayLabel(cell.label) : cell.label,
-                        _v$17 = active(),
-                        _v$18 = focusable() ? 0 : -1;
-                      _v$10 !== _p$.e && _$setAttribute(_el$40, "data-date-day", _p$.e = _v$10);
-                      _v$11 !== _p$.t && _$setAttribute(_el$40, "data-date-focus", _p$.t = _v$11);
-                      _v$12 !== _p$.a && _$setAttribute(_el$40, "data-outside", _p$.a = _v$12);
-                      _v$13 !== _p$.o && _$setAttribute(_el$40, "data-in-range", _p$.o = _v$13);
-                      _v$14 !== _p$.i && _$setAttribute(_el$40, "data-today", _p$.i = _v$14);
-                      _v$15 !== _p$.n && _$setAttribute(_el$40, "aria-current", _p$.n = _v$15);
-                      _v$16 !== _p$.s && _$setAttribute(_el$40, "aria-label", _p$.s = _v$16);
-                      _v$17 !== _p$.h && _$setAttribute(_el$40, "aria-selected", _p$.h = _v$17);
-                      _v$18 !== _p$.r && _$setAttribute(_el$40, "tabindex", _p$.r = _v$18);
+                      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);
                       return _p$;
                     }, {
                       e: undefined,
@@ -551,20 +601,21 @@ function DatePickerPanel(props) {
                       n: undefined,
                       s: undefined,
                       h: undefined,
-                      r: undefined
+                      r: undefined,
+                      d: undefined
                     });
                     _$runHydrationEvents();
-                    return _el$40;
+                    return _el$50;
                   })();
                 }
               }));
-              return _el$39;
+              return _el$49;
             })()
-          }));
-          return _el$33;
+          }), _el$41, _co$1);
+          return _el$37;
         })()];
       }
-    }), _el$35, _co$8);
+    }), _el$43, _co$10);
     _$effect(_p$ => {
       var _v$7 = messages().calendar,
         _v$8 = previousLabel(),
@@ -585,29 +636,29 @@ function DatePickerPanel(props) {
 function TimeInput(props) {
   const messages = useUiMessages();
   return (() => {
-    var _el$41 = _$getNextElement(_tmpl$13),
-      _el$45 = _el$41.firstChild,
-      [_el$46, _co$9] = _$getNextMarker(_el$45.nextSibling),
-      _el$43 = _el$46.nextSibling,
-      _el$44 = _el$43.firstChild;
-    _$insert(_el$41, _$createComponent(Show, {
+    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, {
       get when() {
         return props.label;
       },
       get children() {
-        var _el$42 = _$getNextElement(_tmpl$10);
-        _$insert(_el$42, () => props.label);
-        return _el$42;
+        var _el$52 = _$getNextElement(_tmpl$11);
+        _$insert(_el$52, () => props.label);
+        return _el$52;
       }
-    }), _el$46, _co$9);
-    _el$44.addEventListener("blur", () => props.onChange(normalizeTimeInput(props.time)));
-    _el$44.$$input = event => props.onChange(filterTimeInput(event.currentTarget.value));
-    _$effect(() => _$setAttribute(_el$44, "aria-label", props.label ? messages().timeLabel({
+    }), _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({
       label: props.label
     }) : messages().time));
-    _$effect(() => _$setProperty(_el$44, "value", props.time));
+    _$effect(() => _$setProperty(_el$54, "value", props.time));
     _$runHydrationEvents();
-    return _el$41;
+    return _el$51;
   })();
 }
 export function DatePicker(props) {
@@ -628,12 +679,12 @@ export function DatePicker(props) {
       return Boolean(props.presets?.length);
     },
     children: close => (() => {
-      var _el$47 = _$getNextElement(_tmpl$14),
-        _el$48 = _el$47.firstChild,
-        [_el$49, _co$0] = _$getNextMarker(_el$48.nextSibling),
-        _el$50 = _el$49.nextSibling,
-        [_el$51, _co$1] = _$getNextMarker(_el$50.nextSibling);
-      _$insert(_el$47, _$createComponent(PresetRail, {
+      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;
         },
@@ -641,8 +692,8 @@ export function DatePicker(props) {
           close();
           commitFieldValue(props, value);
         }
-      }), _el$49, _co$0);
-      _$insert(_el$47, _$createComponent(DatePickerPanel, {
+      }), _el$59, _co$12);
+      _$insert(_el$57, _$createComponent(DatePickerPanel, {
         visibleMonth: visibleMonth,
         setVisibleMonth: setVisibleMonth,
         selected: value,
@@ -654,8 +705,8 @@ export function DatePicker(props) {
         get dateConfig() {
           return dateConfig();
         }
-      }), _el$51, _co$1);
-      return _el$47;
+      }), _el$61, _co$13);
+      return _el$57;
     })()
   });
 }
@@ -664,19 +715,38 @@ export function DateTimePicker(props) {
   const value = () => resolveMaybeAccessor(props.value);
   const dateConfig = useDateConfigLocale(() => props.dateConfig);
   const parts = () => splitDateTime(value(), dateConfig());
+  const defaultTime = () => props.defaultTime ?? "09:00";
+  // Without `optionalTime` every value has a time; with it a date key has none.
+  const valueHasTime = () => !props.optionalTime || Boolean(value()) && !isDateKey(value());
   const [visibleMonth, setVisibleMonth] = createSignal(parseDateValue(parts().date, dateConfig()));
   const [draftDate, setDraftDate] = createSignal(parts().date);
-  const [draftTime, setDraftTime] = createSignal(parts().time || "09:00");
-  const valueLabel = () => formatDateTimeValue(value(), dateConfig());
+  const [draftTime, setDraftTime] = createSignal(parts().time || defaultTime());
+  const [withTime, setWithTime] = createSignal(valueHasTime());
+  const valueLabel = () => valueHasTime() ? formatDateTimeValue(value(), dateConfig()) : displayDate(value(), dateConfig());
+  let addTimeButton;
+  let timeField;
   const syncDraft = () => {
     const next = parts();
     setDraftDate(next.date);
-    setDraftTime(next.time || "09:00");
+    setDraftTime(next.time || defaultTime());
+    setWithTime(valueHasTime());
     setVisibleMonth(parseDateValue(next.date, dateConfig()));
   };
+  const canApply = () => Boolean(draftDate()) && (!withTime() || isCompleteTime(draftTime()));
+  const draftValue = () => withTime() ? toDateTimeValue(draftDate(), draftTime(), dateConfig()) : draftDate() || null;
+  const addTime = () => {
+    setWithTime(true);
+    queueMicrotask(() => timeField?.querySelector("input")?.focus());
+  };
+  const removeTime = () => {
+    setWithTime(false);
+    queueMicrotask(() => addTimeButton?.focus());
+  };
   return _$createComponent(PickerShell, {
     owner: props,
-    icon: "ti ti-calendar-time",
+    get icon() {
+      return props.optionalTime && !valueHasTime() ? "ti ti-calendar" : "ti ti-calendar-time";
+    },
     valueLabel: valueLabel,
     get valueContent() {
       return props.renderValue ? () => props.renderValue(value()) : undefined;
@@ -689,57 +759,118 @@ export function DateTimePicker(props) {
     get wide() {
       return Boolean(props.presets?.length);
     },
-    children: close => [(() => {
-      var _el$52 = _$getNextElement(_tmpl$14),
-        _el$53 = _el$52.firstChild,
-        [_el$54, _co$10] = _$getNextMarker(_el$53.nextSibling),
-        _el$55 = _el$54.nextSibling,
-        [_el$56, _co$11] = _$getNextMarker(_el$55.nextSibling);
-      _$insert(_el$52, _$createComponent(PresetRail, {
-        get presets() {
-          return props.presets;
-        },
-        onSelect: value => {
-          close();
-          commitFieldValue(props, value);
-        }
-      }), _el$54, _co$10);
-      _$insert(_el$52, _$createComponent(DatePickerPanel, {
-        visibleMonth: visibleMonth,
-        setVisibleMonth: setVisibleMonth,
-        selected: draftDate,
-        focusDate: draftDate,
-        onSelect: value => {
-          setDraftDate(value);
-          setVisibleMonth(parseDateValue(value, dateConfig()));
-        },
-        get dateConfig() {
-          return dateConfig();
-        }
-      }), _el$56, _co$11);
-      return _el$52;
-    })(), (() => {
-      var _el$57 = _$getNextElement(_tmpl$15),
-        _el$59 = _el$57.firstChild,
-        [_el$60, _co$12] = _$getNextMarker(_el$59.nextSibling),
-        _el$58 = _el$60.nextSibling;
-      _$insert(_el$57, _$createComponent(TimeInput, {
-        get time() {
-          return draftTime();
-        },
-        onChange: setDraftTime
-      }), _el$60, _co$12);
-      _el$58.$$click = () => {
-        if (!draftDate() || !isCompleteTime(draftTime())) return;
-        const value = toDateTimeValue(draftDate(), draftTime(), dateConfig());
+    children: close => {
+      const apply = () => {
+        if (!canApply()) return;
+        const next = draftValue();
         close();
-        commitFieldValue(props, value);
+        commitFieldValue(props, next);
       };
-      _$insert(_el$58, () => messages().apply);
-      _$effect(() => _$setProperty(_el$58, "disabled", !draftDate() || !isCompleteTime(draftTime())));
-      _$runHydrationEvents();
-      return _el$57;
-    })()]
+      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, {
+          get presets() {
+            return props.presets;
+          },
+          onSelect: value => {
+            close();
+            commitFieldValue(props, value);
+          }
+        }), _el$64, _co$14);
+        _$insert(_el$62, _$createComponent(DatePickerPanel, {
+          visibleMonth: visibleMonth,
+          setVisibleMonth: setVisibleMonth,
+          selected: draftDate,
+          focusDate: draftDate,
+          onSelect: value => {
+            setDraftDate(value);
+            setVisibleMonth(parseDateValue(value, dateConfig()));
+            // A date without a time is complete with the day, as in the date picker.
+            if (props.optionalTime && !withTime()) apply();
+          },
+          get dateConfig() {
+            return dateConfig();
+          }
+        }), _el$66, _co$15);
+        return _el$62;
+      })(), (() => {
+        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, {
+          get when() {
+            return props.optionalTime;
+          },
+          get fallback() {
+            return _$createComponent(TimeInput, {
+              get time() {
+                return draftTime();
+              },
+              onChange: setDraftTime
+            });
+          },
+          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, {
+              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);
+                  _$runHydrationEvents();
+                  return _el$73;
+                })();
+              },
+              get children() {
+                return [_$createComponent(TimeInput, {
+                  get time() {
+                    return draftTime();
+                  },
+                  onChange: setDraftTime
+                }), (() => {
+                  var _el$69 = _$getNextElement(_tmpl$17);
+                  _el$69.$$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);
+                    return _p$;
+                  }, {
+                    e: undefined,
+                    t: undefined
+                  });
+                  _$runHydrationEvents();
+                  return _el$69;
+                })()];
+              }
+            }));
+            _$effect(() => _$setAttribute(_el$68, "data-with-time", withTime() ? "true" : undefined));
+            return _el$68;
+          }
+        }), _el$72, _co$16);
+        _el$70.$$click = apply;
+        _$insert(_el$70, () => messages().apply);
+        _$effect(() => _$setProperty(_el$70, "disabled", !canApply()));
+        _$runHydrationEvents();
+        return _el$67;
+      })()];
+    }
   });
 }
 export function DateRangePicker(props) {
@@ -762,16 +893,19 @@ export function DateRangePicker(props) {
     start: parts().start.date || null,
     end: parts().end.date || null
   });
+  // The day of the last click that started a one-day range; the next click on another day extends from it.
+  const [anchor, setAnchor] = createSignal(null);
   const [previewDate, setPreviewDate] = createSignal(null);
   const [startTime, setStartTime] = createSignal(parts().start.time || "09:00");
   const [endTime, setEndTime] = createSignal(parts().end.time || "10:00");
-  const displayRange = createMemo(() => previewRange(draftRange(), previewDate()));
+  const displayRange = createMemo(() => previewRange(draftRange(), anchor(), previewDate()));
   const syncDraft = () => {
     const next = parts();
     setDraftRange({
       start: next.start.date || null,
       end: next.end.date || null
     });
+    setAnchor(null);
     setPreviewDate(null);
     setStartTime(next.start.time || "09:00");
     setEndTime(next.end.time || "10:00");
@@ -785,31 +919,25 @@ export function DateRangePicker(props) {
   const valueContent = () => {
     const format = withTime() ? formatDateTimeValue : displayDate;
     return (() => {
-      var _el$61 = _$getNextElement(_tmpl$16),
-        _el$62 = _el$61.firstChild,
-        _el$63 = _el$62.nextSibling,
-        _el$64 = _el$63.nextSibling;
-      _$insert(_el$62, (() => {
+      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;
       })());
-      _$insert(_el$64, (() => {
+      _$insert(_el$80, (() => {
         var _c$2 = _$memo(() => !!value().end);
         return () => _c$2() ? format(value().end, dateConfig()) : "End";
       })());
-      return _el$61;
+      return _el$77;
     })();
   };
   const selectDate = value => {
-    const current = draftRange();
-    if (!current.start || current.end) {
-      setDraftRange({
-        start: value,
-        end: null
-      });
-    } else {
-      setDraftRange(orderedRange(current.start, value));
-    }
+    const next = pickRangeDay(draftRange(), anchor(), value);
+    setDraftRange(next.range);
+    setAnchor(next.anchor);
     setPreviewDate(null);
   };
   const applyDuration = minutes => {
@@ -874,12 +1002,12 @@ export function DateRangePicker(props) {
         return durationLabel();
       },
       get children() {
-        var _el$65 = _$getNextElement(_tmpl$17),
-          _el$66 = _el$65.firstChild,
-          _el$67 = _el$66.nextSibling,
-          [_el$68, _co$13] = _$getNextMarker(_el$67.nextSibling);
-        _$insert(_el$65, durationLabel, _el$68, _co$13);
-        return _el$65;
+        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,
@@ -887,12 +1015,12 @@ export function DateRangePicker(props) {
       return Boolean(props.datePresets?.length || props.presets?.length);
     },
     children: close => [(() => {
-      var _el$69 = _$getNextElement(_tmpl$14),
-        _el$70 = _el$69.firstChild,
-        [_el$71, _co$14] = _$getNextMarker(_el$70.nextSibling),
-        _el$72 = _el$71.nextSibling,
-        [_el$73, _co$15] = _$getNextMarker(_el$72.nextSibling);
-      _$insert(_el$69, _$createComponent(Show, {
+      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;
         },
@@ -924,33 +1052,30 @@ export function DateRangePicker(props) {
             }
           });
         }
-      }), _el$71, _co$14);
-      _$insert(_el$69, _$createComponent(DatePickerPanel, {
+      }), _el$87, _co$19);
+      _$insert(_el$85, _$createComponent(DatePickerPanel, {
         visibleMonth: visibleMonth,
         setVisibleMonth: setVisibleMonth,
         range: displayRange,
         focusDate: () => draftRange().start,
         onSelect: selectDate,
-        onDayPreview: value => {
-          const current = draftRange();
-          setPreviewDate(current.start && !current.end ? value : null);
-        },
+        onDayPreview: value => setPreviewDate(rangeAnchor(draftRange(), anchor()) ? value : null),
         get dateConfig() {
           return dateConfig();
         }
-      }), _el$73, _co$15);
-      return _el$69;
+      }), _el$89, _co$20);
+      return _el$85;
     })(), _$createComponent(Show, {
       get when() {
         return withTime();
       },
       get children() {
-        var _el$74 = _$getNextElement(_tmpl$18),
-          _el$75 = _el$74.firstChild,
-          [_el$76, _co$16] = _$getNextMarker(_el$75.nextSibling),
-          _el$77 = _el$76.nextSibling,
-          [_el$78, _co$17] = _$getNextMarker(_el$77.nextSibling);
-        _$insert(_el$74, _$createComponent(TimeInput, {
+        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;
           },
@@ -958,8 +1083,8 @@ export function DateRangePicker(props) {
             return startTime();
           },
           onChange: setStartTime
-        }), _el$76, _co$16);
-        _$insert(_el$74, _$createComponent(TimeInput, {
+        }), _el$92, _co$21);
+        _$insert(_el$90, _$createComponent(TimeInput, {
           get label() {
             return messages().end;
           },
@@ -967,42 +1092,42 @@ export function DateRangePicker(props) {
             return endTime();
           },
           onChange: setEndTime
-        }), _el$78, _co$17);
-        return _el$74;
+        }), _el$94, _co$22);
+        return _el$90;
       }
     }), (() => {
-      var _el$79 = _$getNextElement(_tmpl$15),
-        _el$82 = _el$79.firstChild,
-        [_el$83, _co$18] = _$getNextMarker(_el$82.nextSibling),
-        _el$81 = _el$83.nextSibling;
-      _$insert(_el$79, _$createComponent(Show, {
+      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$80 = _$getNextElement(_tmpl$19);
-          _$insert(_el$80, _$createComponent(For, {
+          var _el$96 = _$getNextElement(_tmpl$24);
+          _$insert(_el$96, _$createComponent(For, {
             get each() {
               return props.durationPresets;
             },
             children: preset => (() => {
-              var _el$84 = _$getNextElement(_tmpl$7);
-              _el$84.$$click = () => applyDuration(preset.minutes);
-              _$insert(_el$84, () => preset.label);
-              _$effect(() => _$setAttribute(_el$84, "aria-pressed", durationMinutes() === preset.minutes));
+              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$84;
+              return _el$100;
             })()
           }));
-          _$effect(() => _$setAttribute(_el$80, "aria-label", messages().durationPresets));
-          return _el$80;
+          _$effect(() => _$setAttribute(_el$96, "aria-label", messages().durationPresets));
+          return _el$96;
         }
-      }), _el$83, _co$18);
-      _el$81.$$click = () => commit(close);
-      _$insert(_el$81, () => messages().apply);
-      _$effect(() => _$setProperty(_el$81, "disabled", Boolean(draftRange().start) !== Boolean(draftRange().end) || Boolean(withTime() && draftRange().start && draftRange().end && (!isCompleteTime(startTime()) || !isCompleteTime(endTime())))));
+      }), _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$79;
+      return _el$95;
     })()]
   });
 }