@editora/ui-core 0.1.24 → 0.2.0

package/dist/date-time-picker.esm.js

@@ -1,8 +1,8 @@
 import { E as W } from "./ElementBase-BeZT54Hj.mjs";
 import { s as Y, a as J } from "./control-name-Bpj7F34X.mjs";
 import { c as G } from "./dismissable-layer-BmPIoK80.mjs";
-import { r as Q } from "./calendar-B3PUKHQm.mjs";
-import { r as X, e as tt, i as v, s as et, b as it, f as st, t as rt, n as E, d as nt, p as F, o as N, a as at, m as R, j as Z, k as j, q as y, l as ot, c as lt } from "./date-time-utils-BTlxnz5j.mjs";
+import { r as Q } from "./calendar-DmxiZrR7.mjs";
+import { r as X, e as tt, i as g, s as et, b as it, f as rt, t as st, n as E, d as nt, p as F, o as N, a as at, m as R, j as Z, k as j, q as y, l as ot, c as lt } from "./date-time-utils-B4hAkt36.mjs";
 let dt = 0;
 const ut = `
   <svg viewBox="0 0 20 20" class="icon-svg" aria-hidden="true" focusable="false">
@@ -28,18 +28,18 @@ const ut = `
       color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent),
       color-mix(in srgb, var(--ui-color-surface, #ffffff) 90%, var(--ui-color-surface-alt, #f8fafc))
     );
-    --ui-dtp-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
+    --ui-dtp-border: var(--ui-color-line, var(--ui-color-border, #cbd5e1));
     --ui-dp-text: var(--ui-color-text, #0f172a);
     --ui-dp-muted: var(--ui-color-muted, #526175);
     --ui-dtp-accent: var(--ui-color-primary, #2563eb);
     --ui-dtp-success: var(--ui-color-success, #15803d);
     --ui-dtp-error: var(--ui-color-danger, #dc2626);
-    --ui-dtp-radius: 12px;
+    --ui-dtp-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     --ui-dtp-panel-radius: 14px;
     --ui-dtp-z: 1600;
     --ui-dtp-shadow: none;
     --ui-dtp-gap: 12px;
-    --ui-dtp-hit: 42px;
+    --ui-dtp-hit: var(--ui-control-height-2, 32px);
     --ui-dtp-duration: 160ms;
     --ui-dtp-ease: cubic-bezier(0.2, 0.9, 0.24, 1);
     color-scheme: light dark;
@@ -61,11 +61,14 @@ const ut = `
   }
 
   :host([size="sm"]) {
-    --ui-dtp-hit: 38px;
+    --ui-dtp-action-size: 24px;
+    --ui-dtp-action-bleed: -1px;
+    --ui-dtp-hit: var(--ui-control-height-1, 24px);
   }
 
   :host([size="lg"]) {
-    --ui-dtp-hit: 48px;
+    --ui-dtp-action-size: 28px;
+    --ui-dtp-hit: var(--ui-control-height-3, 40px);
   }
 
   .root {
@@ -91,6 +94,7 @@ const ut = `
   }
 
   .field {
+    box-sizing: border-box;
     display: grid;
     grid-template-columns: auto minmax(0, 1fr) auto auto auto;
     align-items: center;
@@ -106,18 +110,20 @@ const ut = `
 
   .field[data-open="true"],
   .field:focus-within {
-    border-color: color-mix(in srgb, var(--ui-dtp-accent) 70%, transparent);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-dtp-accent) 22%, transparent), 0 10px 22px rgba(2, 6, 23, 0.12);
+    border-color: var(--ui-ring-color, var(--ui-dtp-accent));
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-dtp-accent));
+    outline-offset: -1px;
+    box-shadow: none;
   }
 
   .field[data-invalid="true"] {
     border-color: color-mix(in srgb, var(--ui-dtp-error) 72%, transparent);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-dtp-error) 20%, transparent);
+    box-shadow: 0 0 0 1px var(--ui-dtp-error);
   }
 
   .field[data-state="success"]:not([data-invalid="true"]) {
     border-color: color-mix(in srgb, var(--ui-dtp-success) 56%, transparent);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-dtp-success) 18%, transparent);
+    box-shadow: 0 0 0 1px var(--ui-dtp-success);
   }
 
   .input {
@@ -127,12 +133,12 @@ const ut = `
     outline: none;
     min-inline-size: 0;
     inline-size: 100%;
-    padding: 8px 0;
+    padding: 0;
     font: 500 14px/1.35 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   }
 
   .input::placeholder {
-    color: color-mix(in srgb, var(--ui-dp-text) 44%, transparent);
+    color: var(--ui-color-placeholder, color-mix(in srgb, var(--ui-dp-text) 62%, transparent));
   }
 
   .icon {
@@ -152,8 +158,9 @@ const ut = `
   .btn {
     border: 1px solid transparent;
     background: color-mix(in srgb, var(--ui-dtp-bg) 84%, transparent);
-    inline-size: 28px;
-    block-size: 28px;
+    inline-size: var(--ui-dtp-action-size, 24px);
+    block-size: var(--ui-dtp-action-size, 24px);
+    margin-block: var(--ui-dtp-action-bleed, 0px);
     border-radius: 8px;
     color: color-mix(in srgb, var(--ui-dp-text) 72%, transparent);
     cursor: pointer;
@@ -294,7 +301,7 @@ const ut = `
       color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent),
       color-mix(in srgb, var(--ui-color-surface, #ffffff) 90%, var(--ui-color-surface-alt, #f8fafc))
     );
-    --ui-dtp-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
+    --ui-dtp-border: var(--ui-color-line, var(--ui-color-border, #cbd5e1));
     --ui-dp-text: var(--ui-color-text, #0f172a);
     --ui-dp-muted: var(--ui-color-muted, #526175);
     --ui-dtp-accent: var(--ui-color-primary, #2563eb);
@@ -522,7 +529,7 @@ class _t extends W {
   connectedCallback() {
     if (super.connectedCallback(), this.root.addEventListener("click", this._onRootClickBound), this.root.addEventListener("input", this._onRootInputBound), this.root.addEventListener("change", this._onRootChangeBound), this.root.addEventListener("focusout", this._onRootBlurBound), this.root.addEventListener("keydown", this._onRootKeyDownBound), !this._isInitialized) {
       const t = U(this.getAttribute("value") || this.getAttribute("default-value"));
-      this._value = t, this._pending = { ...t }, this._draft = this._formatDisplay(t), this._open = this.hasAttribute("open") || v(this.getAttribute("default-open")), this._isInitialized = !0;
+      this._value = t, this._pending = { ...t }, this._draft = this._formatDisplay(t), this._open = this.hasAttribute("open") || g(this.getAttribute("default-open")), this._isInitialized = !0;
     }
     this._open && !this._isInlineMode() && this._ensureOverlay();
   }
@@ -558,22 +565,22 @@ class _t extends W {
     return this.hasAttribute("readonly");
   }
   _allowInput() {
-    return v(this.getAttribute("allow-input"), !0);
+    return g(this.getAttribute("allow-input"), !0);
   }
   _clearable() {
-    return v(this.getAttribute("clearable"), !0);
+    return g(this.getAttribute("clearable"), !0);
   }
   _closeOnSelect() {
-    return v(this.getAttribute("close-on-select"), !1);
+    return g(this.getAttribute("close-on-select"), !1);
   }
   _shouldAutoCommit() {
     return this._closeOnSelect() || !this._showFooter();
   }
   _showFooter() {
-    return v(this.getAttribute("show-footer"), !0);
+    return g(this.getAttribute("show-footer"), !0);
   }
   _isBare() {
-    return v(this.getAttribute("bare"), !1);
+    return g(this.getAttribute("bare"), !1);
   }
   _locale() {
     return it(this.getAttribute("locale"));
@@ -590,8 +597,8 @@ class _t extends W {
   }
   _formatDisplay(t) {
     if (!t.date || !t.time) return "";
-    const e = st(t.date, this._locale(), "locale", null);
-    return this._is12h() ? `${e} ${rt(t.time, this._locale())}` : `${e} ${t.time}`;
+    const e = rt(t.date, this._locale(), "locale", null);
+    return this._is12h() ? `${e} ${st(t.time, this._locale())}` : `${e} ${t.time}`;
   }
   _is12h() {
     return (this.getAttribute("format") || "24h") === "12h";
@@ -601,10 +608,10 @@ class _t extends W {
     if (e) return e;
     const i = nt(t, this._locale());
     if (i) return i;
-    const s = new Date(t);
-    if (!Number.isFinite(s.getTime())) return null;
-    const o = s.getFullYear(), a = String(s.getMonth() + 1).padStart(2, "0"), r = String(s.getDate()).padStart(2, "0");
-    return `${o}-${a}-${r}`;
+    const r = new Date(t);
+    if (!Number.isFinite(r.getTime())) return null;
+    const o = r.getFullYear(), a = String(r.getMonth() + 1).padStart(2, "0"), s = String(r.getDate()).padStart(2, "0");
+    return `${o}-${a}-${s}`;
   }
   _syncOpenAttribute(t) {
     this._syncing = !0;
@@ -662,16 +669,16 @@ class _t extends W {
   }
   _clampState(t) {
     if (!t.date) return { date: null, time: t.time };
-    const e = this._minDate(), i = this._maxDate(), s = at(t.date, e, i), o = t.time || "00:00";
-    let a = this._minDateTime(), r = this._maxDateTime();
-    if (a && r && R(a, r) > 0) {
+    const e = this._minDate(), i = this._maxDate(), r = at(t.date, e, i), o = t.time || "00:00";
+    let a = this._minDateTime(), s = this._maxDateTime();
+    if (a && s && R(a, s) > 0) {
       const _ = a;
-      a = r, r = _;
+      a = s, s = _;
     }
-    let n = Z(s, o) || `${s}T00:00`;
-    a && R(n, a) < 0 && (n = a), r && R(n, r) > 0 && (n = r);
+    let n = Z(r, o) || `${r}T00:00`;
+    a && R(n, a) < 0 && (n = a), s && R(n, s) > 0 && (n = s);
     const d = j(n);
-    return d ? { date: d.date, time: d.time } : { date: s, time: o };
+    return d ? { date: d.date, time: d.time } : { date: r, time: o };
   }
   _commit(t, e) {
     if (this._isInteractionBlocked() || this._isReadonly()) return;
@@ -679,15 +686,15 @@ class _t extends W {
       this._value = { date: null, time: null }, this._pending = { date: null, time: null }, this._draft = "", this._inlineError = "", this._syncValueAttribute(this._value), this._emitInput(e), this._emitChange(e), this._updateHostState();
       return;
     }
-    const i = y(t.time || ""), s = this._clampState({
+    const i = y(t.time || ""), r = this._clampState({
       date: E(t.date),
       time: i ? `${p(i.hours)}:${p(i.minutes)}` : null
     });
-    if (!s.date || !s.time) {
+    if (!r.date || !r.time) {
       this._inlineError = this.getAttribute("error") || this._translations().invalidDateTime, this._emitInvalid(JSON.stringify(t), "parse"), this._updateHostState();
       return;
     }
-    this._value = s, this._pending = { ...s }, this._draft = this._formatDisplay(s), this._inlineError = "", this._syncValueAttribute(this._value), this._emitInput(e), this._emitChange(e), this._updateHostState();
+    this._value = r, this._pending = { ...r }, this._draft = this._formatDisplay(r), this._inlineError = "", this._syncValueAttribute(this._value), this._emitInput(e), this._emitChange(e), this._updateHostState();
   }
   _setOpen(t, e) {
     t && this._isInteractionBlocked() || this._open !== t && (this._open = t, this._syncOpenAttribute(t), this._syncOverlay(e), this._updateHostState(), this.dispatchEvent(new CustomEvent(t ? "open" : "close", { bubbles: !0, composed: !0 })));
@@ -738,27 +745,27 @@ class _t extends W {
     if (!this._overlay || !this._open || this._isMobileSheet()) return;
     const t = this.root.querySelector(".field"), e = this._overlay.querySelector(".panel");
     if (!t || !e) return;
-    const i = e.getAttribute("data-placement"), s = lt(
+    const i = e.getAttribute("data-placement"), r = lt(
       t.getBoundingClientRect(),
       e.getBoundingClientRect(),
       8,
       8,
       i === "top" ? "top" : i === "bottom" ? "bottom" : null
     );
-    e.style.position = "absolute", e.style.top = `${Math.round(s.top)}px`, e.style.left = `${Math.round(s.left)}px`, e.setAttribute("data-placement", s.placement);
+    e.style.position = "absolute", e.style.top = `${Math.round(r.top)}px`, e.style.left = `${Math.round(r.left)}px`, e.setAttribute("data-placement", r.placement);
   }
   _timeOptions() {
-    const t = y(this._pending.time || "00:00") || { hours: 0, minutes: 0 }, e = this._minuteStep(), i = this._is12h() ? Array.from({ length: 12 }, (a, r) => {
-      const n = r + 1, d = t.hours % 12 || 12;
+    const t = y(this._pending.time || "00:00") || { hours: 0, minutes: 0 }, e = this._minuteStep(), i = this._is12h() ? Array.from({ length: 12 }, (a, s) => {
+      const n = s + 1, d = t.hours % 12 || 12;
       return `<option value="${n}" ${n === d ? "selected" : ""}>${p(n)}</option>`;
-    }).join("") : Array.from({ length: 24 }, (a, r) => `<option value="${r}" ${r === t.hours ? "selected" : ""}>${p(r)}</option>`).join(""), s = Array.from({ length: Math.ceil(60 / e) }, (a, r) => {
-      const n = Math.min(59, r * e);
+    }).join("") : Array.from({ length: 24 }, (a, s) => `<option value="${s}" ${s === t.hours ? "selected" : ""}>${p(s)}</option>`).join(""), r = Array.from({ length: Math.ceil(60 / e) }, (a, s) => {
+      const n = Math.min(59, s * e);
       return `<option value="${n}" ${n === t.minutes ? "selected" : ""}>${p(n)}</option>`;
     }).join(""), o = t.hours >= 12 ? "pm" : "am";
-    return { hours: i, minutes: s, meridiem: o };
+    return { hours: i, minutes: r, meridiem: o };
   }
   _renderSurfaceInner(t, e = !1) {
-    const i = this._translations(), s = this._timeOptions(), o = (this.getAttribute("label") || "").trim(), a = c(o), r = c(o || i.selectDate), n = this._pending.date && this._pending.time ? this._formatDisplay(this._pending) : "", d = `
+    const i = this._translations(), r = this._timeOptions(), o = (this.getAttribute("label") || "").trim(), a = c(o), s = c(o || i.selectDate), n = this._pending.date && this._pending.time ? this._formatDisplay(this._pending) : "", d = `
       <header class="head">
         <div>
           <p class="head-title" ${o ? "" : "hidden"}>${a}</p>
@@ -770,9 +777,9 @@ class _t extends W {
         <section class="time-panel" part="time">
           <span class="icon" aria-hidden="true">${K}</span>
           <div class="time-grid" data-meridiem="${this._is12h() ? "true" : "false"}">
-            <div><label>${c(i.hour)}</label><select data-segment="hours" aria-label="${c(i.hour)}">${s.hours}</select></div>
-            <div><label>${c(i.minute)}</label><select data-segment="minutes" aria-label="${c(i.minute)}">${s.minutes}</select></div>
-            ${this._is12h() ? `<div><label>${c(i.meridiem)}</label><select data-segment="meridiem" aria-label="${c(i.meridiem)}"><option value="am" ${s.meridiem === "am" ? "selected" : ""}>${c(i.am)}</option><option value="pm" ${s.meridiem === "pm" ? "selected" : ""}>${c(i.pm)}</option></select></div>` : ""}
+            <div><label>${c(i.hour)}</label><select data-segment="hours" aria-label="${c(i.hour)}">${r.hours}</select></div>
+            <div><label>${c(i.minute)}</label><select data-segment="minutes" aria-label="${c(i.minute)}">${r.minutes}</select></div>
+            ${this._is12h() ? `<div><label>${c(i.meridiem)}</label><select data-segment="meridiem" aria-label="${c(i.meridiem)}"><option value="am" ${r.meridiem === "am" ? "selected" : ""}>${c(i.am)}</option><option value="pm" ${r.meridiem === "pm" ? "selected" : ""}>${c(i.pm)}</option></select></div>` : ""}
           </div>
         </section>
       </div>
@@ -786,18 +793,18 @@ class _t extends W {
     return e ? d : `
       <style>${mt}</style>
       ${t ? '<div class="sheet-backdrop" data-action="backdrop"></div>' : ""}
-      <section class="${t ? "sheet" : "panel"}" id="${this._panelId}" role="dialog" aria-modal="${t ? "true" : "false"}" aria-label="${r}" part="${t ? "sheet" : "popover"}">${d}</section>
+      <section class="${t ? "sheet" : "panel"}" id="${this._panelId}" role="dialog" aria-modal="${t ? "true" : "false"}" aria-label="${s}" part="${t ? "sheet" : "popover"}">${d}</section>
     `;
   }
   _syncCalendar(t) {
-    const e = (r, n) => {
+    const e = (s, n) => {
       if (n == null || n === "") {
-        t.hasAttribute(r) && t.removeAttribute(r);
+        t.hasAttribute(s) && t.removeAttribute(s);
         return;
       }
-      t.getAttribute(r) !== n && t.setAttribute(r, n);
-    }, i = (r, n) => {
-      n ? e(r, "") : e(r, null);
+      t.getAttribute(s) !== n && t.setAttribute(s, n);
+    }, i = (s, n) => {
+      n ? e(s, "") : e(s, null);
     };
     e("selection", "single"), e("value", this._pending.date), e("min", this.getAttribute("min")), e("max", this.getAttribute("max")), e("locale", this.getAttribute("locale")), e("translations", this.getAttribute("translations")), e("week-start", this.getAttribute("week-start"));
     const o = this.getAttribute("size") || "sm", a = t.classList.contains("dt-calendar-inline");
@@ -820,20 +827,20 @@ class _t extends W {
   _setClosestOptionValue(t, e) {
     const i = Array.from(t.options).map((a) => Number(a.value)).filter((a) => Number.isFinite(a));
     if (!i.length) return;
-    let s = i[0], o = Math.abs(s - e);
+    let r = i[0], o = Math.abs(r - e);
     for (let a = 1; a < i.length; a += 1) {
-      const r = i[a], n = Math.abs(r - e);
-      n < o && (s = r, o = n);
+      const s = i[a], n = Math.abs(s - e);
+      n < o && (r = s, o = n);
     }
-    t.value = String(s);
+    t.value = String(r);
   }
   _syncOverlayState() {
     if (!this._overlay) return;
     this._syncOverlayHostZIndex();
     const t = this._isMobileSheet();
     this._ensureOverlayContent(t), this._syncDismissableLayer();
-    const e = this._translations(), i = this._overlay.querySelector(".panel, .sheet"), s = this._overlay.querySelector(".footer");
-    i && (i.dataset.bare = this._isBare() ? "true" : "false"), s && (s.hidden = !this._showFooter());
+    const e = this._translations(), i = this._overlay.querySelector(".panel, .sheet"), r = this._overlay.querySelector(".footer");
+    i && (i.dataset.bare = this._isBare() ? "true" : "false"), r && (r.hidden = !this._showFooter());
     const o = this._overlay.querySelector(".head-title");
     if (o) {
       const l = (this.getAttribute("label") || "").trim();
@@ -841,8 +848,8 @@ class _t extends W {
     }
     const a = this._overlay.querySelector(".head-meta");
     a && (a.textContent = this._pending.date && this._pending.time ? this._formatDisplay(this._pending) : e.selectDate);
-    const r = this._overlay.querySelector(".dt-calendar");
-    r && this._syncCalendar(r);
+    const s = this._overlay.querySelector(".dt-calendar");
+    s && this._syncCalendar(s);
     const n = y(this._pending.time || "00:00") || { hours: 0, minutes: 0 }, d = this._overlay.querySelector('select[data-segment="hours"]'), _ = this._overlay.querySelector('select[data-segment="minutes"]'), m = this._overlay.querySelector('select[data-segment="meridiem"]');
     if (d) {
       const l = this._is12h() ? n.hours % 12 || 12 : n.hours;
@@ -858,18 +865,18 @@ class _t extends W {
     this._syncOverlayState();
   }
   _applyTimeFromSurface(t) {
-    const e = t.querySelector('select[data-segment="hours"]'), i = t.querySelector('select[data-segment="minutes"]'), s = t.querySelector('select[data-segment="meridiem"]');
+    const e = t.querySelector('select[data-segment="hours"]'), i = t.querySelector('select[data-segment="minutes"]'), r = t.querySelector('select[data-segment="meridiem"]');
     if (!e || !i) return;
     const o = Number(e.value), a = Number(i.value);
     if (!Number.isFinite(o) || !Number.isFinite(a)) return;
-    let r = o;
+    let s = o;
     if (this._is12h()) {
-      const n = s?.value === "pm" ? "pm" : "am";
-      n === "pm" && r < 12 && (r += 12), n === "am" && r === 12 && (r = 0);
+      const n = r?.value === "pm" ? "pm" : "am";
+      n === "pm" && s < 12 && (s += 12), n === "am" && s === 12 && (s = 0);
     }
     this._pending = this._clampState({
       date: this._pending.date,
-      time: `${p(r)}:${p(a)}`
+      time: `${p(s)}:${p(a)}`
     }), this._emitInput("time");
   }
   _onRootClick(t) {
@@ -886,8 +893,8 @@ class _t extends W {
         return;
       }
       if (this._isInlineMode() && i === "now") {
-        const s = /* @__PURE__ */ new Date(), o = String(s.getMonth() + 1).padStart(2, "0"), a = String(s.getDate()).padStart(2, "0"), r = `${s.getFullYear()}-${o}-${a}`, n = `${p(s.getHours())}:${p(s.getMinutes())}`;
-        this._pending = this._clampState({ date: r, time: n }), this._emitInput("now"), this._updateHostState();
+        const r = /* @__PURE__ */ new Date(), o = String(r.getMonth() + 1).padStart(2, "0"), a = String(r.getDate()).padStart(2, "0"), s = `${r.getFullYear()}-${o}-${a}`, n = `${p(r.getHours())}:${p(r.getMinutes())}`;
+        this._pending = this._clampState({ date: s, time: n }), this._emitInput("now"), this._updateHostState();
         return;
       }
       if (this._isInlineMode() && i === "cancel") {
@@ -929,12 +936,12 @@ class _t extends W {
       this._commit({ date: null, time: null }, "blur");
       return;
     }
-    const s = /^(.+)\s+(\d{1,2}:\d{2}(?::\d{2})?(?:\s?[ap]m)?)$/i.exec(i);
-    if (!s) {
+    const r = /^(.+)\s+(\d{1,2}:\d{2}(?::\d{2})?(?:\s?[ap]m)?)$/i.exec(i);
+    if (!r) {
       this._inlineError = this.getAttribute("error") || this._translations().invalidDateTime, this._emitInvalid(i, "parse"), this._updateHostState();
       return;
     }
-    const o = this._parseDateInput(s[1]), a = y(s[2]) ? s[2] : null;
+    const o = this._parseDateInput(r[1]), a = y(r[2]) ? r[2] : null;
     if (!o || !a) {
       this._inlineError = this.getAttribute("error") || this._translations().invalidDateTime, this._emitInvalid(i, "parse"), this._updateHostState();
       return;
@@ -969,8 +976,8 @@ class _t extends W {
         return;
       }
       if (i === "now") {
-        const s = /* @__PURE__ */ new Date(), o = String(s.getMonth() + 1).padStart(2, "0"), a = String(s.getDate()).padStart(2, "0"), r = `${s.getFullYear()}-${o}-${a}`, n = `${p(s.getHours())}:${p(s.getMinutes())}`;
-        this._pending = this._clampState({ date: r, time: n }), this._emitInput("now"), this._renderOverlay();
+        const r = /* @__PURE__ */ new Date(), o = String(r.getMonth() + 1).padStart(2, "0"), a = String(r.getDate()).padStart(2, "0"), s = `${r.getFullYear()}-${o}-${a}`, n = `${p(r.getHours())}:${p(r.getMinutes())}`;
+        this._pending = this._clampState({ date: s, time: n }), this._emitInput("now"), this._renderOverlay();
         return;
       }
       i === "apply" && (this._commit(this._pending, "apply"), this._setOpen(!1, "apply"));
@@ -984,7 +991,7 @@ class _t extends W {
     if (this._isInteractionBlocked() || this._isReadonly()) return;
     const e = t.target;
     if (!e || e.tagName.toLowerCase() !== "ui-calendar") return;
-    const i = t.type, s = t.detail, o = E(i === "select" ? s?.value || null : s?.value);
+    const i = t.type, r = t.detail, o = E(i === "select" ? r?.value || null : r?.value);
     if (o) {
       if (this._pending = this._clampState({ date: o, time: this._pending.time || "09:00" }), this._emitInput("calendar"), this._shouldAutoCommit() && this._pending.time) {
         this._commit(this._pending, "calendar"), this._setOpen(!1, "calendar");
@@ -1003,16 +1010,16 @@ class _t extends W {
   }
   _updateHostState() {
     if (!this._hasView) return;
-    const t = this.getAttribute("label") || "", e = this.getAttribute("hint") || "", i = this.getAttribute("error") || "", s = this._inlineError || i, o = !!x(this._value), a = this.getAttribute("name") || "", r = this._allowInput() ? this._draft : this._formatDisplay(this._value), n = this._isInlineMode(), d = this._translations(), _ = s ? "error" : this._state();
+    const t = this.getAttribute("label") || "", e = this.getAttribute("hint") || "", i = this.getAttribute("error") || "", r = this._inlineError || i, o = !!x(this._value), a = this.getAttribute("name") || "", s = this._allowInput() ? this._draft : this._formatDisplay(this._value), n = this._isInlineMode(), d = this._translations(), _ = r ? "error" : this._state();
     this._state() === "loading" ? this.setAttribute("aria-busy", "true") : this.removeAttribute("aria-busy");
-    const m = this.root.querySelector(".label"), S = this.root.querySelector(".label-text"), $ = this.root.querySelector(".required"), l = this.root.querySelector(".input"), w = this.root.querySelector('.btn[data-action="clear"]'), b = this.root.querySelector('.btn[data-action="toggle"]'), g = this.root.querySelector(".hint"), I = this.root.querySelector(".error"), k = this.root.querySelector(".hidden-input");
-    if (m && (m.hidden = !t), m && (m.id = this._labelId, m.setAttribute("for", this._inputId)), S && (S.textContent = t), $ && ($.hidden = !this.hasAttribute("required")), l && (l.value !== r && (l.value = r), l.id = this._inputId, l.placeholder = d.dateTimePlaceholder, l.readOnly = !this._allowInput() || this._isReadonly(), l.disabled = this._isInteractionBlocked(), l.required = this.hasAttribute("required"), l.autocomplete = "off", l.setAttribute("role", "combobox"), l.setAttribute("aria-haspopup", "dialog"), l.setAttribute("aria-expanded", n ? "false" : String(this._open)), l.setAttribute("aria-controls", this._panelId), l.setAttribute("aria-invalid", s ? "true" : "false"), Y(l, this, t ? this._labelId : null, l.placeholder)), w && (w.hidden = !(this._clearable() && o), w.setAttribute("aria-label", d.clear), w.disabled = this._isInteractionBlocked()), b && (b.hidden = n, b.setAttribute("aria-label", d.toggleCalendar), b.setAttribute("aria-expanded", n ? "false" : String(this._open)), b.setAttribute("aria-controls", this._panelId), b.disabled = this._isInteractionBlocked()), g && (g.id = this._hintId, g.hidden = !e, g.textContent = e), I && (I.id = this._errorId, I.hidden = !s, I.textContent = s), l) {
+    const m = this.root.querySelector(".label"), S = this.root.querySelector(".label-text"), $ = this.root.querySelector(".required"), l = this.root.querySelector(".input"), w = this.root.querySelector('.btn[data-action="clear"]'), b = this.root.querySelector('.btn[data-action="toggle"]'), v = this.root.querySelector(".hint"), I = this.root.querySelector(".error"), k = this.root.querySelector(".hidden-input");
+    if (m && (m.hidden = !t), m && (m.id = this._labelId, m.setAttribute("for", this._inputId)), S && (S.textContent = t), $ && ($.hidden = !this.hasAttribute("required")), l && (l.value !== s && (l.value = s), l.id = this._inputId, l.placeholder = d.dateTimePlaceholder, l.readOnly = !this._allowInput() || this._isReadonly(), l.disabled = this._isInteractionBlocked(), l.required = this.hasAttribute("required"), l.autocomplete = "off", l.setAttribute("role", "combobox"), l.setAttribute("aria-haspopup", "dialog"), l.setAttribute("aria-expanded", n ? "false" : String(this._open)), l.setAttribute("aria-controls", this._panelId), l.setAttribute("aria-invalid", r ? "true" : "false"), Y(l, this, t ? this._labelId : null, l.placeholder)), w && (w.hidden = !(this._clearable() && o), w.setAttribute("aria-label", d.clear), w.disabled = this._isInteractionBlocked()), b && (b.hidden = n, b.setAttribute("aria-label", d.toggleCalendar), b.setAttribute("aria-expanded", n ? "false" : String(this._open)), b.setAttribute("aria-controls", this._panelId), b.disabled = this._isInteractionBlocked()), v && (v.id = this._hintId, v.hidden = !e, v.textContent = e), I && (I.id = this._errorId, I.hidden = !r, I.textContent = r), l) {
       const f = [];
-      e && g && !g.hidden && f.push(this._hintId), s && f.push(this._errorId), J(l, this, this._uid, f);
+      e && v && !v.hidden && f.push(this._hintId), r && f.push(this._errorId), J(l, this, this._uid, f);
     }
     k && (k.disabled = !a, k.name = a, k.value = x(this._value) || "");
     const C = this.root.querySelector(".field");
-    C && (C.dataset.open = this._open && !n ? "true" : "false", C.dataset.invalid = s ? "true" : "false", C.dataset.state = _);
+    C && (C.dataset.open = this._open && !n ? "true" : "false", C.dataset.invalid = r ? "true" : "false", C.dataset.state = _);
     const u = this.root.querySelector(".inline-panel");
     if (u) {
       u.hidden = !n, u.id = this._panelId, u.dataset.bare = this._isBare() ? "true" : "false", u.setAttribute("role", "dialog"), u.setAttribute("aria-modal", "false"), u.setAttribute("aria-label", t || d.selectDate);