@k2b/ui 0.11.0 → 0.13.0

package/dist/browser/inputs/DatePicker.js

@@ -14,28 +14,29 @@ import { spread as _$spread } from "solid-js/web";
 import { mergeProps as _$mergeProps } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
 var _tmpl$ = /*#__PURE__*/_$template(`<button type=button class="k2b-date-trigger__clear k2b-input-clear-action"><i class="ti ti-x"aria-hidden=true>`),
-  _tmpl$2 = /*#__PURE__*/_$template(`<span class=k2b-date-popover__timezone><i class="ti ti-world"aria-hidden=true></i><!$><!/>`),
-  _tmpl$3 = /*#__PURE__*/_$template(`<footer class=k2b-date-popover__footer><span></span><!$><!/>`),
-  _tmpl$4 = /*#__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$5 = /*#__PURE__*/_$template(`<aside class=k2b-date-presets>`),
-  _tmpl$6 = /*#__PURE__*/_$template(`<button type=button>`),
-  _tmpl$7 = /*#__PURE__*/_$template(`<div class=k2b-date-weekdays aria-hidden=true>`),
-  _tmpl$8 = /*#__PURE__*/_$template(`<div class=k2b-date-grid role=grid>`),
-  _tmpl$9 = /*#__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$0 = /*#__PURE__*/_$template(`<div class=k2b-date-months role=group>`),
-  _tmpl$1 = /*#__PURE__*/_$template(`<span>`),
-  _tmpl$10 = /*#__PURE__*/_$template(`<div class=k2b-date-week role=row>`),
-  _tmpl$11 = /*#__PURE__*/_$template(`<button type=button role=gridcell>`),
-  _tmpl$12 = /*#__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$13 = /*#__PURE__*/_$template(`<div class=k2b-date-popover__body><!$><!/><!$><!/>`),
-  _tmpl$14 = /*#__PURE__*/_$template(`<div class=k2b-date-actions><!$><!/><button type=button class=k2b-date-apply>Apply`),
-  _tmpl$15 = /*#__PURE__*/_$template(`<span class=k2b-date-range-value><span></span><i class="ti ti-arrow-narrow-right"aria-hidden=true></i><span>`),
-  _tmpl$16 = /*#__PURE__*/_$template(`<span class=k2b-date-duration><i class="ti ti-hourglass-low"aria-hidden=true></i><!$><!/>`),
-  _tmpl$17 = /*#__PURE__*/_$template(`<div class=k2b-date-range-times><!$><!/><!$><!/>`),
-  _tmpl$18 = /*#__PURE__*/_$template(`<div class=k2b-date-durations role=group>`);
+  _tmpl$2 = /*#__PURE__*/_$template(`<button type=button class=k2b-date-popover__clear><i class="ti ti-x"aria-hidden=true></i><!$><!/>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<span class=k2b-date-popover__timezone><i class="ti ti-world"aria-hidden=true></i><!$><!/>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<footer class=k2b-date-popover__footer><span></span><!$><!/><!$><!/>`),
+  _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$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>`);
 import { dates } from "@k2b/stdlib";
 import { createEffect, createMemo, createSignal, For, onCleanup, onMount, Show } from "solid-js";
-import { createFieldMeta, Field, fieldControlAria } from "../internal/field";
+import { createFieldMeta, Field, fieldControlAria, fieldDescribedBy } from "../internal/field";
 import { returnFocus, ringOnReturn } from "../internal/focus-return";
 import { useDateConfigLocale } from "../intl/locale";
 import { useUiMessages } from "../intl/messages";
@@ -97,6 +98,13 @@ function PickerShell(props) {
     });
   };
   const toggle = () => open() ? close() : show();
+  const plain = () => props.owner.appearance === "plain";
+  const canClear = () => Boolean(props.owner.clearable && props.valueLabel() && !props.owner.disabled);
+  const clear = () => {
+    close();
+    commitFieldValue(props.owner, props.clearValue);
+    trigger?.focus();
+  };
   onMount(() => {
     const syncOpenState = () => setOpen(popoverIsOpen(popover));
     popover?.addEventListener("toggle", syncOpenState);
@@ -133,17 +141,17 @@ function PickerShell(props) {
     },
     meta: meta,
     get children() {
-      var _el$ = _$getNextElement(_tmpl$4),
+      var _el$ = _$getNextElement(_tmpl$5),
         _el$2 = _el$.firstChild,
         _el$3 = _el$2.firstChild,
         _el$4 = _el$3.nextSibling,
-        _el$17 = _el$2.nextSibling,
-        [_el$18, _co$5] = _$getNextMarker(_el$17.nextSibling),
-        _el$6 = _el$18.nextSibling,
-        _el$13 = _el$6.firstChild,
-        [_el$14, _co$3] = _$getNextMarker(_el$13.nextSibling),
-        _el$15 = _el$14.nextSibling,
-        [_el$16, _co$4] = _$getNextMarker(_el$15.nextSibling);
+        _el$23 = _el$2.nextSibling,
+        [_el$24, _co$7] = _$getNextMarker(_el$23.nextSibling),
+        _el$6 = _el$24.nextSibling,
+        _el$19 = _el$6.firstChild,
+        [_el$20, _co$5] = _$getNextMarker(_el$19.nextSibling),
+        _el$21 = _el$20.nextSibling,
+        [_el$22, _co$6] = _$getNextMarker(_el$21.nextSibling);
       var _ref$ = trigger;
       typeof _ref$ === "function" ? _$use(_ref$, _el$2) : trigger = _el$2;
       _$spread(_el$2, _$mergeProps({
@@ -166,6 +174,9 @@ function PickerShell(props) {
           return `${meta.controlId}-popover`;
         }
       }, () => fieldControlAria(meta, props.owner), {
+        get ["aria-describedby"]() {
+          return [fieldDescribedBy(meta, props.owner), `${meta.controlId}-value`].filter(Boolean).join(" ");
+        },
         "onClick": toggle,
         "onKeyDown": event => {
           if (event.key === "ArrowDown") {
@@ -187,21 +198,19 @@ function PickerShell(props) {
       }));
       _$insert(_el$, _$createComponent(Show, {
         get when() {
-          return _$memo(() => !!(props.owner.clearable && props.valueLabel()))() && !props.owner.disabled;
+          return _$memo(() => !!canClear())() && !plain();
         },
         get children() {
           var _el$5 = _$getNextElement(_tmpl$);
           _el$5.$$click = event => {
             event.stopPropagation();
-            close();
-            commitFieldValue(props.owner, props.clearValue);
-            trigger?.focus();
+            clear();
           };
           _$effect(() => _$setAttribute(_el$5, "aria-label", messages().clearDate));
           _$runHydrationEvents();
           return _el$5;
         }
-      }), _el$18, _co$5);
+      }), _el$24, _co$7);
       _el$6.addEventListener("toggle", event => {
         const nextOpen = event.newState === "open";
         setOpen(nextOpen);
@@ -214,48 +223,71 @@ function PickerShell(props) {
       };
       var _ref$2 = popover;
       typeof _ref$2 === "function" ? _$use(_ref$2, _el$6) : popover = _el$6;
-      _$insert(_el$6, () => props.children(close), _el$14, _co$3);
+      _$insert(_el$6, () => props.children(close), _el$20, _co$5);
       _$insert(_el$6, _$createComponent(Show, {
         get when() {
-          return props.footerMeta || props.timezone;
+          return props.footerMeta || props.timezone || plain() && canClear();
         },
         get children() {
-          var _el$7 = _$getNextElement(_tmpl$3),
+          var _el$7 = _$getNextElement(_tmpl$4),
             _el$8 = _el$7.firstChild,
-            _el$11 = _el$8.nextSibling,
-            [_el$12, _co$2] = _$getNextMarker(_el$11.nextSibling);
+            _el$15 = _el$8.nextSibling,
+            [_el$16, _co$3] = _$getNextMarker(_el$15.nextSibling),
+            _el$17 = _el$16.nextSibling,
+            [_el$18, _co$4] = _$getNextMarker(_el$17.nextSibling);
           _$insert(_el$8, () => props.footerMeta?.());
           _$insert(_el$7, _$createComponent(Show, {
             get when() {
-              return props.timezone;
+              return _$memo(() => !!plain())() && canClear();
             },
             get children() {
               var _el$9 = _$getNextElement(_tmpl$2),
                 _el$0 = _el$9.firstChild,
                 _el$1 = _el$0.nextSibling,
                 [_el$10, _co$] = _$getNextMarker(_el$1.nextSibling);
-              _$insert(_el$9, () => props.timezone, _el$10, _co$);
+              _el$9.$$click = clear;
+              _$insert(_el$9, () => messages().clearDate, _el$10, _co$);
+              _$runHydrationEvents();
               return _el$9;
             }
-          }), _el$12, _co$2);
+          }), _el$16, _co$3);
+          _$insert(_el$7, _$createComponent(Show, {
+            get when() {
+              return props.timezone;
+            },
+            get children() {
+              var _el$11 = _$getNextElement(_tmpl$3),
+                _el$12 = _el$11.firstChild,
+                _el$13 = _el$12.nextSibling,
+                [_el$14, _co$2] = _$getNextMarker(_el$13.nextSibling);
+              _$insert(_el$11, () => props.timezone, _el$14, _co$2);
+              return _el$11;
+            }
+          }), _el$18, _co$4);
           return _el$7;
         }
-      }), _el$16, _co$4);
+      }), _el$22, _co$6);
       _$effect(_p$ => {
-        var _v$ = error() ? "true" : undefined,
-          _v$2 = `${props.icon} k2b-date-trigger__icon`,
-          _v$3 = `${meta.controlId}-popover`,
-          _v$4 = typeof props.owner.label === "string" ? props.owner.label : messages().datePicker;
-        _v$ !== _p$.e && _$setAttribute(_el$, "data-invalid", _p$.e = _v$);
-        _v$2 !== _p$.t && _$className(_el$3, _p$.t = _v$2);
-        _v$3 !== _p$.a && _$setAttribute(_el$6, "id", _p$.a = _v$3);
-        _v$4 !== _p$.o && _$setAttribute(_el$6, "aria-label", _p$.o = _v$4);
+        var _v$ = props.owner.appearance ?? "field",
+          _v$2 = error() ? "true" : undefined,
+          _v$3 = `${props.icon} k2b-date-trigger__icon`,
+          _v$4 = `${meta.controlId}-value`,
+          _v$5 = `${meta.controlId}-popover`,
+          _v$6 = typeof props.owner.label === "string" ? props.owner.label : messages().datePicker;
+        _v$ !== _p$.e && _$setAttribute(_el$, "data-appearance", _p$.e = _v$);
+        _v$2 !== _p$.t && _$setAttribute(_el$, "data-invalid", _p$.t = _v$2);
+        _v$3 !== _p$.a && _$className(_el$3, _p$.a = _v$3);
+        _v$4 !== _p$.o && _$setAttribute(_el$4, "id", _p$.o = _v$4);
+        _v$5 !== _p$.i && _$setAttribute(_el$6, "id", _p$.i = _v$5);
+        _v$6 !== _p$.n && _$setAttribute(_el$6, "aria-label", _p$.n = _v$6);
         return _p$;
       }, {
         e: undefined,
         t: undefined,
         a: undefined,
-        o: undefined
+        o: undefined,
+        i: undefined,
+        n: undefined
       });
       _$runHydrationEvents();
       return _el$;
@@ -269,21 +301,21 @@ function PresetRail(props) {
       return props.presets?.length;
     },
     get children() {
-      var _el$19 = _$getNextElement(_tmpl$5);
-      _$insert(_el$19, _$createComponent(For, {
+      var _el$25 = _$getNextElement(_tmpl$6);
+      _$insert(_el$25, _$createComponent(For, {
         get each() {
           return props.presets;
         },
         children: preset => (() => {
-          var _el$20 = _$getNextElement(_tmpl$6);
-          _el$20.$$click = () => props.onSelect(preset.value);
-          _$insert(_el$20, () => preset.label);
+          var _el$26 = _$getNextElement(_tmpl$7);
+          _el$26.$$click = () => props.onSelect(preset.value);
+          _$insert(_el$26, () => preset.label);
           _$runHydrationEvents();
-          return _el$20;
+          return _el$26;
         })()
       }));
-      _$effect(() => _$setAttribute(_el$19, "aria-label", messages().datePresets));
-      return _el$19;
+      _$effect(() => _$setAttribute(_el$25, "aria-label", messages().datePresets));
+      return _el$25;
     }
   });
 }
@@ -357,18 +389,18 @@ function DatePickerPanel(props) {
     }
   };
   return (() => {
-    var _el$21 = _$getNextElement(_tmpl$9),
-      _el$22 = _el$21.firstChild,
-      _el$23 = _el$22.firstChild,
-      _el$24 = _el$23.nextSibling,
-      _el$25 = _el$24.nextSibling,
-      _el$28 = _el$22.nextSibling,
-      [_el$29, _co$6] = _$getNextMarker(_el$28.nextSibling);
+    var _el$27 = _$getNextElement(_tmpl$0),
+      _el$28 = _el$27.firstChild,
+      _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);
     var _ref$3 = calendar;
-    typeof _ref$3 === "function" ? _$use(_ref$3, _el$21) : calendar = _el$21;
-    _el$23.$$click = () => view() === "days" ? moveMonth(-1) : moveYear(-1);
-    _el$24.$$click = () => setView(view() === "days" ? "months" : "days");
-    _$insert(_el$24, _$createComponent(Show, {
+    typeof _ref$3 === "function" ? _$use(_ref$3, _el$27) : calendar = _el$27;
+    _el$29.$$click = () => view() === "days" ? moveMonth(-1) : moveYear(-1);
+    _el$30.$$click = () => setView(view() === "days" ? "months" : "days");
+    _$insert(_el$30, _$createComponent(Show, {
       get when() {
         return view() === "days";
       },
@@ -379,66 +411,66 @@ function DatePickerPanel(props) {
         return dates.formatMonthYear(props.visibleMonth(), context());
       }
     }));
-    _el$25.$$click = () => view() === "days" ? moveMonth(1) : moveYear(1);
-    _$insert(_el$21, _$createComponent(Show, {
+    _el$31.$$click = () => view() === "days" ? moveMonth(1) : moveYear(1);
+    _$insert(_el$27, _$createComponent(Show, {
       get when() {
         return view() === "days";
       },
       get fallback() {
         return (() => {
-          var _el$30 = _$getNextElement(_tmpl$0);
-          _$insert(_el$30, _$createComponent(For, {
+          var _el$36 = _$getNextElement(_tmpl$1);
+          _$insert(_el$36, _$createComponent(For, {
             get each() {
               return months();
             },
             children: (name, index) => (() => {
-              var _el$31 = _$getNextElement(_tmpl$6);
-              _el$31.$$click = () => {
+              var _el$37 = _$getNextElement(_tmpl$7);
+              _el$37.$$click = () => {
                 props.setVisibleMonth(monthDate(month().year, index(), context()));
                 setView("days");
               };
-              _$insert(_el$31, name);
+              _$insert(_el$37, name);
               _$effect(_p$ => {
-                var _v$8 = index() === month().month,
-                  _v$9 = index() === month().month ? "true" : undefined;
-                _v$8 !== _p$.e && _$setAttribute(_el$31, "aria-pressed", _p$.e = _v$8);
-                _v$9 !== _p$.t && _$setAttribute(_el$31, "data-selected", _p$.t = _v$9);
+                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);
                 return _p$;
               }, {
                 e: undefined,
                 t: undefined
               });
               _$runHydrationEvents();
-              return _el$31;
+              return _el$37;
             })()
           }));
-          _$effect(() => _$setAttribute(_el$30, "aria-label", `Months in ${month().year}`));
-          return _el$30;
+          _$effect(() => _$setAttribute(_el$36, "aria-label", `Months in ${month().year}`));
+          return _el$36;
         })();
       },
       get children() {
         return [(() => {
-          var _el$26 = _$getNextElement(_tmpl$7);
-          _$insert(_el$26, _$createComponent(For, {
+          var _el$32 = _$getNextElement(_tmpl$8);
+          _$insert(_el$32, _$createComponent(For, {
             get each() {
               return weekdays();
             },
             children: day => (() => {
-              var _el$32 = _$getNextElement(_tmpl$1);
-              _$insert(_el$32, day);
-              return _el$32;
+              var _el$38 = _$getNextElement(_tmpl$10);
+              _$insert(_el$38, day);
+              return _el$38;
             })()
           }));
-          return _el$26;
+          return _el$32;
         })(), (() => {
-          var _el$27 = _$getNextElement(_tmpl$8);
-          _$insert(_el$27, _$createComponent(For, {
+          var _el$33 = _$getNextElement(_tmpl$9);
+          _$insert(_el$33, _$createComponent(For, {
             get each() {
               return dayRows();
             },
             children: week => (() => {
-              var _el$33 = _$getNextElement(_tmpl$10);
-              _$insert(_el$33, _$createComponent(For, {
+              var _el$39 = _$getNextElement(_tmpl$11);
+              _$insert(_el$39, _$createComponent(For, {
                 each: week,
                 children: cell => {
                   const selected = () => props.selected?.() === cell.key;
@@ -449,32 +481,32 @@ function DatePickerPanel(props) {
                   const active = () => selected() || isRangeEdge(cell.key, range());
                   const focusable = () => cell.key === defaultFocus();
                   return (() => {
-                    var _el$34 = _$getNextElement(_tmpl$11);
-                    _el$34.addEventListener("pointerleave", () => props.onDayPreview?.(null));
-                    _el$34.addEventListener("pointerenter", () => props.onDayPreview?.(cell.key));
-                    _el$34.addEventListener("focus", () => {
+                    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", () => {
                       setFocusedKey(cell.key);
                       props.onDayPreview?.(cell.key);
                     });
-                    _el$34.addEventListener("blur", () => props.onDayPreview?.(null));
-                    _el$34.$$keydown = event => handleDayKeyDown(event, cell.day);
-                    _el$34.$$click = () => props.onSelect(cell.key);
-                    _$insert(_el$34, () => cell.number);
+                    _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);
                     _$effect(_p$ => {
-                      var _v$0 = cell.key,
-                        _v$1 = focusable() ? "true" : undefined,
-                        _v$10 = cell.outside ? "true" : undefined,
-                        _v$11 = inRange(cell.key, range()) && !active() ? "true" : undefined,
-                        _v$12 = cell.label,
-                        _v$13 = active(),
-                        _v$14 = focusable() ? 0 : -1;
-                      _v$0 !== _p$.e && _$setAttribute(_el$34, "data-date-day", _p$.e = _v$0);
-                      _v$1 !== _p$.t && _$setAttribute(_el$34, "data-date-focus", _p$.t = _v$1);
-                      _v$10 !== _p$.a && _$setAttribute(_el$34, "data-outside", _p$.a = _v$10);
-                      _v$11 !== _p$.o && _$setAttribute(_el$34, "data-in-range", _p$.o = _v$11);
-                      _v$12 !== _p$.i && _$setAttribute(_el$34, "aria-label", _p$.i = _v$12);
-                      _v$13 !== _p$.n && _$setAttribute(_el$34, "aria-selected", _p$.n = _v$13);
-                      _v$14 !== _p$.s && _$setAttribute(_el$34, "tabindex", _p$.s = _v$14);
+                      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 = cell.label,
+                        _v$15 = active(),
+                        _v$16 = 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, "aria-label", _p$.i = _v$14);
+                      _v$15 !== _p$.n && _$setAttribute(_el$40, "aria-selected", _p$.n = _v$15);
+                      _v$16 !== _p$.s && _$setAttribute(_el$40, "tabindex", _p$.s = _v$16);
                       return _p$;
                     }, {
                       e: undefined,
@@ -486,24 +518,24 @@ function DatePickerPanel(props) {
                       s: undefined
                     });
                     _$runHydrationEvents();
-                    return _el$34;
+                    return _el$40;
                   })();
                 }
               }));
-              return _el$33;
+              return _el$39;
             })()
           }));
-          return _el$27;
+          return _el$33;
         })()];
       }
-    }), _el$29, _co$6);
+    }), _el$35, _co$8);
     _$effect(_p$ => {
-      var _v$5 = messages().calendar,
-        _v$6 = previousLabel(),
-        _v$7 = nextLabel();
-      _v$5 !== _p$.e && _$setAttribute(_el$21, "aria-label", _p$.e = _v$5);
-      _v$6 !== _p$.t && _$setAttribute(_el$23, "aria-label", _p$.t = _v$6);
-      _v$7 !== _p$.a && _$setAttribute(_el$25, "aria-label", _p$.a = _v$7);
+      var _v$7 = messages().calendar,
+        _v$8 = previousLabel(),
+        _v$9 = 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);
       return _p$;
     }, {
       e: undefined,
@@ -511,35 +543,35 @@ function DatePickerPanel(props) {
       a: undefined
     });
     _$runHydrationEvents();
-    return _el$21;
+    return _el$27;
   })();
 }
 function TimeInput(props) {
   const messages = useUiMessages();
   return (() => {
-    var _el$35 = _$getNextElement(_tmpl$12),
-      _el$39 = _el$35.firstChild,
-      [_el$40, _co$7] = _$getNextMarker(_el$39.nextSibling),
-      _el$37 = _el$40.nextSibling,
-      _el$38 = _el$37.firstChild;
-    _$insert(_el$35, _$createComponent(Show, {
+    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, {
       get when() {
         return props.label;
       },
       get children() {
-        var _el$36 = _$getNextElement(_tmpl$1);
-        _$insert(_el$36, () => props.label);
-        return _el$36;
+        var _el$42 = _$getNextElement(_tmpl$10);
+        _$insert(_el$42, () => props.label);
+        return _el$42;
       }
-    }), _el$40, _co$7);
-    _el$38.addEventListener("blur", () => props.onChange(normalizeTimeInput(props.time)));
-    _el$38.$$input = event => props.onChange(filterTimeInput(event.currentTarget.value));
-    _$effect(() => _$setAttribute(_el$38, "aria-label", props.label ? messages().timeLabel({
+    }), _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({
       label: props.label
     }) : messages().time));
-    _$effect(() => _$setProperty(_el$38, "value", props.time));
+    _$effect(() => _$setProperty(_el$44, "value", props.time));
     _$runHydrationEvents();
-    return _el$35;
+    return _el$41;
   })();
 }
 export function DatePicker(props) {
@@ -551,18 +583,21 @@ export function DatePicker(props) {
     owner: props,
     icon: "ti ti-calendar",
     valueLabel: valueLabel,
+    get valueContent() {
+      return props.renderValue ? () => props.renderValue(value()) : undefined;
+    },
     clearValue: null,
     onOpen: () => setVisibleMonth(parseDateValue(value(), dateConfig())),
     get wide() {
       return Boolean(props.presets?.length);
     },
     children: close => (() => {
-      var _el$41 = _$getNextElement(_tmpl$13),
-        _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);
-      _$insert(_el$41, _$createComponent(PresetRail, {
+      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, {
         get presets() {
           return props.presets;
         },
@@ -570,8 +605,8 @@ export function DatePicker(props) {
           close();
           commitFieldValue(props, value);
         }
-      }), _el$43, _co$8);
-      _$insert(_el$41, _$createComponent(DatePickerPanel, {
+      }), _el$49, _co$0);
+      _$insert(_el$47, _$createComponent(DatePickerPanel, {
         visibleMonth: visibleMonth,
         setVisibleMonth: setVisibleMonth,
         selected: value,
@@ -583,12 +618,13 @@ export function DatePicker(props) {
         get dateConfig() {
           return dateConfig();
         }
-      }), _el$45, _co$9);
-      return _el$41;
+      }), _el$51, _co$1);
+      return _el$47;
     })()
   });
 }
 export function DateTimePicker(props) {
+  const messages = useUiMessages();
   const value = () => resolveMaybeAccessor(props.value);
   const dateConfig = useDateConfigLocale(() => props.dateConfig);
   const parts = () => splitDateTime(value(), dateConfig());
@@ -606,6 +642,9 @@ export function DateTimePicker(props) {
     owner: props,
     icon: "ti ti-calendar-time",
     valueLabel: valueLabel,
+    get valueContent() {
+      return props.renderValue ? () => props.renderValue(value()) : undefined;
+    },
     clearValue: null,
     get timezone() {
       return dateConfig().timeZone;
@@ -615,12 +654,12 @@ export function DateTimePicker(props) {
       return Boolean(props.presets?.length);
     },
     children: close => [(() => {
-      var _el$46 = _$getNextElement(_tmpl$13),
-        _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);
-      _$insert(_el$46, _$createComponent(PresetRail, {
+      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;
         },
@@ -628,8 +667,8 @@ export function DateTimePicker(props) {
           close();
           commitFieldValue(props, value);
         }
-      }), _el$48, _co$0);
-      _$insert(_el$46, _$createComponent(DatePickerPanel, {
+      }), _el$54, _co$10);
+      _$insert(_el$52, _$createComponent(DatePickerPanel, {
         visibleMonth: visibleMonth,
         setVisibleMonth: setVisibleMonth,
         selected: draftDate,
@@ -641,28 +680,29 @@ export function DateTimePicker(props) {
         get dateConfig() {
           return dateConfig();
         }
-      }), _el$50, _co$1);
-      return _el$46;
+      }), _el$56, _co$11);
+      return _el$52;
     })(), (() => {
-      var _el$51 = _$getNextElement(_tmpl$14),
-        _el$53 = _el$51.firstChild,
-        [_el$54, _co$10] = _$getNextMarker(_el$53.nextSibling),
-        _el$52 = _el$54.nextSibling;
-      _$insert(_el$51, _$createComponent(TimeInput, {
+      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$54, _co$10);
-      _el$52.$$click = () => {
+      }), _el$60, _co$12);
+      _el$58.$$click = () => {
         if (!draftDate() || !isCompleteTime(draftTime())) return;
         const value = toDateTimeValue(draftDate(), draftTime(), dateConfig());
         close();
         commitFieldValue(props, value);
       };
-      _$effect(() => _$setProperty(_el$52, "disabled", !draftDate() || !isCompleteTime(draftTime())));
+      _$insert(_el$58, () => messages().apply);
+      _$effect(() => _$setProperty(_el$58, "disabled", !draftDate() || !isCompleteTime(draftTime())));
       _$runHydrationEvents();
-      return _el$51;
+      return _el$57;
     })()]
   });
 }
@@ -709,19 +749,19 @@ export function DateRangePicker(props) {
   const valueContent = () => {
     const format = withTime() ? formatDateTimeValue : displayDate;
     return (() => {
-      var _el$55 = _$getNextElement(_tmpl$15),
-        _el$56 = _el$55.firstChild,
-        _el$57 = _el$56.nextSibling,
-        _el$58 = _el$57.nextSibling;
-      _$insert(_el$56, (() => {
+      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 _c$ = _$memo(() => !!value().start);
         return () => _c$() ? format(value().start, dateConfig()) : messages().start;
       })());
-      _$insert(_el$58, (() => {
+      _$insert(_el$64, (() => {
         var _c$2 = _$memo(() => !!value().end);
         return () => _c$2() ? format(value().end, dateConfig()) : "End";
       })());
-      return _el$55;
+      return _el$61;
     })();
   };
   const selectDate = value => {
@@ -798,12 +838,12 @@ export function DateRangePicker(props) {
         return durationLabel();
       },
       get children() {
-        var _el$59 = _$getNextElement(_tmpl$16),
-          _el$60 = _el$59.firstChild,
-          _el$61 = _el$60.nextSibling,
-          [_el$62, _co$11] = _$getNextMarker(_el$61.nextSibling);
-        _$insert(_el$59, durationLabel, _el$62, _co$11);
-        return _el$59;
+        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;
       }
     }),
     onOpen: syncDraft,
@@ -811,12 +851,12 @@ export function DateRangePicker(props) {
       return Boolean(props.datePresets?.length || props.presets?.length);
     },
     children: close => [(() => {
-      var _el$63 = _$getNextElement(_tmpl$13),
-        _el$64 = _el$63.firstChild,
-        [_el$65, _co$12] = _$getNextMarker(_el$64.nextSibling),
-        _el$66 = _el$65.nextSibling,
-        [_el$67, _co$13] = _$getNextMarker(_el$66.nextSibling);
-      _$insert(_el$63, _$createComponent(Show, {
+      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, {
         get when() {
           return props.datePresets?.length;
         },
@@ -848,8 +888,8 @@ export function DateRangePicker(props) {
             }
           });
         }
-      }), _el$65, _co$12);
-      _$insert(_el$63, _$createComponent(DatePickerPanel, {
+      }), _el$71, _co$14);
+      _$insert(_el$69, _$createComponent(DatePickerPanel, {
         visibleMonth: visibleMonth,
         setVisibleMonth: setVisibleMonth,
         range: displayRange,
@@ -862,19 +902,19 @@ export function DateRangePicker(props) {
         get dateConfig() {
           return dateConfig();
         }
-      }), _el$67, _co$13);
-      return _el$63;
+      }), _el$73, _co$15);
+      return _el$69;
     })(), _$createComponent(Show, {
       get when() {
         return withTime();
       },
       get children() {
-        var _el$68 = _$getNextElement(_tmpl$17),
-          _el$69 = _el$68.firstChild,
-          [_el$70, _co$14] = _$getNextMarker(_el$69.nextSibling),
-          _el$71 = _el$70.nextSibling,
-          [_el$72, _co$15] = _$getNextMarker(_el$71.nextSibling);
-        _$insert(_el$68, _$createComponent(TimeInput, {
+        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, {
           get label() {
             return messages().start;
           },
@@ -882,8 +922,8 @@ export function DateRangePicker(props) {
             return startTime();
           },
           onChange: setStartTime
-        }), _el$70, _co$14);
-        _$insert(_el$68, _$createComponent(TimeInput, {
+        }), _el$76, _co$16);
+        _$insert(_el$74, _$createComponent(TimeInput, {
           get label() {
             return messages().end;
           },
@@ -891,41 +931,42 @@ export function DateRangePicker(props) {
             return endTime();
           },
           onChange: setEndTime
-        }), _el$72, _co$15);
-        return _el$68;
+        }), _el$78, _co$17);
+        return _el$74;
       }
     }), (() => {
-      var _el$73 = _$getNextElement(_tmpl$14),
-        _el$76 = _el$73.firstChild,
-        [_el$77, _co$16] = _$getNextMarker(_el$76.nextSibling),
-        _el$75 = _el$77.nextSibling;
-      _$insert(_el$73, _$createComponent(Show, {
+      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, {
         get when() {
           return _$memo(() => !!withTime())() && props.durationPresets?.length;
         },
         get children() {
-          var _el$74 = _$getNextElement(_tmpl$18);
-          _$insert(_el$74, _$createComponent(For, {
+          var _el$80 = _$getNextElement(_tmpl$19);
+          _$insert(_el$80, _$createComponent(For, {
             get each() {
               return props.durationPresets;
             },
             children: preset => (() => {
-              var _el$78 = _$getNextElement(_tmpl$6);
-              _el$78.$$click = () => applyDuration(preset.minutes);
-              _$insert(_el$78, () => preset.label);
-              _$effect(() => _$setAttribute(_el$78, "aria-pressed", durationMinutes() === preset.minutes));
+              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));
               _$runHydrationEvents();
-              return _el$78;
+              return _el$84;
             })()
           }));
-          _$effect(() => _$setAttribute(_el$74, "aria-label", messages().durationPresets));
-          return _el$74;
+          _$effect(() => _$setAttribute(_el$80, "aria-label", messages().durationPresets));
+          return _el$80;
         }
-      }), _el$77, _co$16);
-      _el$75.$$click = () => commit(close);
-      _$effect(() => _$setProperty(_el$75, "disabled", Boolean(draftRange().start) !== Boolean(draftRange().end) || Boolean(withTime() && draftRange().start && draftRange().end && (!isCompleteTime(startTime()) || !isCompleteTime(endTime())))));
+      }), _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())))));
       _$runHydrationEvents();
-      return _el$73;
+      return _el$79;
     })()]
   });
 }