@editora/ui-core 0.1.18 → 0.1.19

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

@@ -1,7 +1,7 @@
 import { E as tt } from "./ElementBase-909688f3.mjs";
 import { c as et } from "./dismissable-layer-9c7e6b58.mjs";
 import { r as it, c as N } from "./calendar-2c11b824.mjs";
-import { r as nt, e as rt, i as m, s as st, b as at, p as K, f as Z, a as j, l as W, c as ot, d as w, g as lt, h as dt, n as L } from "./date-time-utils-a2c7af25.mjs";
+import { r as rt, e as nt, i as m, s as st, b as at, p as K, f as Z, a as j, l as W, c as ot, d as w, g as lt, h as dt, n as L } from "./date-time-utils-a2c7af25.mjs";
 import "./scroll-lock-31da444f.mjs";
 import "./positioner-e9770c66.mjs";
 let ut = 0;
@@ -324,6 +324,25 @@ const ct = `
     }
   }
 `, _t = `
+  .ui-date-range-picker-overlay-host {
+    --ui-dp-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
+    --ui-dp-surface: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent),
+      color-mix(in srgb, var(--ui-color-surface, #ffffff) 92%, var(--ui-color-surface-alt, #f8fafc))
+    );
+    --ui-dp-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 76%, transparent);
+    --ui-dp-text: var(--ui-color-text, #0f172a);
+    --ui-dp-muted: var(--ui-color-muted, #64748b);
+    --ui-dp-accent: var(--ui-color-primary, #2563eb);
+    --ui-dp-success: var(--ui-color-success, #15803d);
+    --ui-dp-radius: 12px;
+    --ui-dp-panel-radius: calc(var(--ui-dp-radius) + 2px);
+    --ui-dp-field-error: var(--ui-color-danger, #dc2626);
+    --ui-dp-focus-ring: color-mix(in srgb, var(--ui-dp-accent) 26%, transparent);
+    --ui-dp-duration: 160ms;
+    --ui-dp-ease: cubic-bezier(0.2, 0.9, 0.24, 1);
+  }
   .overlay { position: fixed; z-index: var(--ui-dp-z, 1600); pointer-events: none; }
   .panel {
     pointer-events: auto;
@@ -426,17 +445,17 @@ function bt(c, t) {
   const e = c.trim();
   if (!e)
     return { start: null, end: null };
-  const i = e.split(/\s(?:—|–|to)\s/i).map((r) => r.trim()).filter(Boolean);
+  const i = e.split(/\s(?:—|–|to)\s/i).map((n) => n.trim()).filter(Boolean);
   if (i.length > 1) {
-    const r = w(i[0] || "", t), d = w(i[1] || "", t);
-    return { start: r, end: d };
+    const n = w(i[0] || "", t), d = w(i[1] || "", t);
+    return { start: n, end: d };
   }
   return { start: w(e, t), end: null };
 }
 class yt extends tt {
   constructor() {
-    super(...arguments), this._value = { start: null, end: null }, this._pending = { start: null, end: null }, this._draftStart = "", this._draftEnd = "", this._draftSingle = "", this._inlineError = "", this._open = !1, this._syncing = !1, this._overlay = null, this._dismissableLayer = null, this._releaseScrollLock = null, this._isInitialized = !1, this._hasView = !1, this._restoreFocusEl = null, this._overlayMode = null, this._uid = `ui-drp-${++ut}`, this._singleId = `${this._uid}-single`, this._startId = `${this._uid}-start`, this._endId = `${this._uid}-end`, this._labelId = `${this._uid}-label`, this._hintId = `${this._uid}-hint`, this._errorId = `${this._uid}-error`, this._panelId = `${this._uid}-panel`, this._panelTitleId = `${this._uid}-panel-title`, this._overlayFocusedOnOpen = !1, this._inlineCalendarFramePending = !1, this._inlineCalendarUpgradePending = !1, this._schedulePosition = nt(() => this._positionOverlay()), this._onRootClickBound = (t) => this._onRootClick(t), this._onRootInputBound = (t) => this._onRootInput(t), this._onRootBlurBound = (t) => this._onRootBlur(t), this._onRootKeyDownBound = (t) => this._onRootKeyDown(t), this._onDocumentPointerDownBound = (t) => this._onDocumentPointerDown(t), this._onDocumentKeyDownBound = (t) => this._onDocumentKeyDown(t), this._onWindowResizeBound = () => this._schedulePosition.run(), this._onWindowScrollBound = (t) => {
-      rt(t, [this._overlay]) || this._schedulePosition.run();
+    super(...arguments), this._value = { start: null, end: null }, this._pending = { start: null, end: null }, this._draftStart = "", this._draftEnd = "", this._draftSingle = "", this._inlineError = "", this._open = !1, this._syncing = !1, this._overlay = null, this._dismissableLayer = null, this._releaseScrollLock = null, this._isInitialized = !1, this._hasView = !1, this._restoreFocusEl = null, this._overlayMode = null, this._uid = `ui-drp-${++ut}`, this._singleId = `${this._uid}-single`, this._startId = `${this._uid}-start`, this._endId = `${this._uid}-end`, this._labelId = `${this._uid}-label`, this._hintId = `${this._uid}-hint`, this._errorId = `${this._uid}-error`, this._panelId = `${this._uid}-panel`, this._panelTitleId = `${this._uid}-panel-title`, this._overlayFocusedOnOpen = !1, this._inlineCalendarFramePending = !1, this._inlineCalendarUpgradePending = !1, this._schedulePosition = rt(() => this._positionOverlay()), this._onRootClickBound = (t) => this._onRootClick(t), this._onRootInputBound = (t) => this._onRootInput(t), this._onRootBlurBound = (t) => this._onRootBlur(t), this._onRootKeyDownBound = (t) => this._onRootKeyDown(t), this._onDocumentPointerDownBound = (t) => this._onDocumentPointerDown(t), this._onDocumentKeyDownBound = (t) => this._onDocumentKeyDown(t), this._onWindowResizeBound = () => this._schedulePosition.run(), this._onWindowScrollBound = (t) => {
+      nt(t, [this._overlay]) || this._schedulePosition.run();
     }, this._onOverlayClickBound = (t) => this._onOverlayClick(t), this._onOverlayCalendarBound = (t) => this._onOverlayCalendarChange(t);
   }
   static get observedAttributes() {
@@ -607,8 +626,8 @@ class yt extends tt {
     this.dispatchEvent(new CustomEvent("invalid", { detail: { raw: t, reason: e }, bubbles: !0, composed: !0 }));
   }
   _normalizePending(t) {
-    const { min: e, max: i } = this._resolvedBounds(), n = t.start ? j(t.start, e, i) : null, r = t.end ? j(t.end, e, i) : null;
-    return !n || !r ? { start: n, end: r } : N(n, r) > 0 ? { start: r, end: n } : { start: n, end: r };
+    const { min: e, max: i } = this._resolvedBounds(), r = t.start ? j(t.start, e, i) : null, n = t.end ? j(t.end, e, i) : null;
+    return !r || !n ? { start: r, end: n } : N(r, n) > 0 ? { start: n, end: r } : { start: r, end: n };
   }
   _canCommit(t) {
     return !t.start && !t.end ? !0 : !(!this._allowPartial() && (!t.start || !t.end) || t.start && t.end && !this._allowSameDay() && t.start === t.end);
@@ -670,7 +689,7 @@ class yt extends tt {
       closeOnEscape: !0,
       closeOnPointerOutside: !0,
       closeOnFocusOutside: !1,
-      onBeforeDismiss: (n) => n === "escape-key" ? (this._setOpen(!1, "escape"), !1) : (n === "outside-pointer" && this._setOpen(!1, "outside"), !1)
+      onBeforeDismiss: (r) => r === "escape-key" ? (this._setOpen(!1, "escape"), !1) : (r === "outside-pointer" && this._setOpen(!1, "outside"), !1)
     }));
   }
   _positionOverlay() {
@@ -681,18 +700,18 @@ class yt extends tt {
       return;
     const i = t.getBoundingClientRect();
     e.style.setProperty("--ui-drp-panel-width", `${Math.round(i.width)}px`);
-    const n = e.getBoundingClientRect(), r = e.getAttribute("data-placement"), d = ot(
+    const r = e.getBoundingClientRect(), n = e.getAttribute("data-placement"), d = ot(
       i,
-      n,
+      r,
       8,
       8,
-      r === "top" ? "top" : r === "bottom" ? "bottom" : null
+      n === "top" ? "top" : n === "bottom" ? "bottom" : null
     );
     e.style.position = "absolute", e.style.top = `${Math.round(d.top)}px`, e.style.left = `${Math.round(d.left)}px`, e.setAttribute("data-placement", d.placement);
   }
   _renderPanelInner(t) {
-    const e = this._translations(), i = (this.getAttribute("label") || "").trim(), n = !!i || t, r = t ? "true" : "false", d = `
-      <header class="header" part="header" ${n ? "" : "hidden"}>
+    const e = this._translations(), i = (this.getAttribute("label") || "").trim(), r = !!i || t, n = t ? "true" : "false", d = `
+      <header class="header" part="header" ${r ? "" : "hidden"}>
         <p class="title" id="${this._panelTitleId}" ${i ? "" : "hidden"}>${_(i)}</p>
         ${t ? `<button type="button" class="action" data-action="cancel">${_(e.cancel)}</button>` : ""}
       </header>
@@ -711,7 +730,7 @@ class yt extends tt {
     return `
       <style>${_t}</style>
       ${t ? '<div class="sheet-backdrop" data-action="backdrop"></div>' : ""}
-      <section class="${t ? "sheet" : "panel"}" id="${this._panelId}" role="dialog" aria-modal="${r}" aria-labelledby="${this._panelTitleId}" part="${t ? "sheet" : "popover"}">${d}</section>
+      <section class="${t ? "sheet" : "panel"}" id="${this._panelId}" role="dialog" aria-modal="${n}" aria-labelledby="${this._panelTitleId}" part="${t ? "sheet" : "popover"}">${d}</section>
     `;
   }
   _syncCalendar(t) {
@@ -721,8 +740,8 @@ class yt extends tt {
         return;
       }
       t.getAttribute(h) !== u && t.setAttribute(h, u);
-    }, i = J(this._pending), { min: n, max: r } = this._resolvedBounds();
-    e("selection", "range"), e("value", i), e("min", n), e("max", r), e("locale", this.getAttribute("locale")), e("translations", this.getAttribute("translations")), e("week-start", this.getAttribute("week-start"));
+    }, i = J(this._pending), { min: r, max: n } = this._resolvedBounds();
+    e("selection", "range"), e("value", i), e("min", r), e("max", n), e("locale", this.getAttribute("locale")), e("translations", this.getAttribute("translations")), e("week-start", this.getAttribute("week-start"));
     const l = this.getAttribute("size") || "sm";
     e("size", l === "lg" ? "md" : "sm"), e("variant", this.getAttribute("variant")), e("outside-click", this.getAttribute("outside-click"));
     const p = t.classList.contains("inline-calendar");
@@ -742,10 +761,10 @@ class yt extends tt {
     t && !this._releaseScrollLock ? this._releaseScrollLock = W() : !t && this._releaseScrollLock && (this._releaseScrollLock(), this._releaseScrollLock = null), this._ensureOverlayContent(t);
     const e = this._overlay.querySelector(".title"), i = this._overlay.querySelector(".panel, .sheet");
     this._syncDismissableLayer();
-    const n = this._overlay.querySelector(".header"), r = this._overlay.querySelector(".presets"), d = this._overlay.querySelector(".footer"), l = this._translations();
-    i && (i.dataset.bare = this._isBare() ? "true" : "false"), n && (n.hidden = !(this.getAttribute("label") || "").trim() && !t);
+    const r = this._overlay.querySelector(".header"), n = this._overlay.querySelector(".presets"), d = this._overlay.querySelector(".footer"), l = this._translations();
+    i && (i.dataset.bare = this._isBare() ? "true" : "false"), r && (r.hidden = !(this.getAttribute("label") || "").trim() && !t);
     const p = this._showFooter();
-    if (r && (r.hidden = !p), d && (d.hidden = !p), e) {
+    if (n && (n.hidden = !p), d && (d.hidden = !p), e) {
       const y = (this.getAttribute("label") || "").trim();
       e.textContent = y, e.hidden = !y;
     }
@@ -796,26 +815,26 @@ class yt extends tt {
   _updateHostState() {
     if (!this._hasView)
       return;
-    const t = this.getAttribute("label") || "", e = this.getAttribute("hint") || "", i = this.getAttribute("error") || "", n = this._inlineError || i, r = this._translations(), d = n ? "error" : this._state(), l = this._rangeVariant(), p = this._isInlineMode(), h = !!(this._value.start || this._value.end || this._pending.start || this._pending.end), u = this._isInteractionBlocked(), b = this.root.querySelector(".label"), A = this.root.querySelector(".label-text"), I = this.root.querySelector(".required"), f = this.root.querySelector(".fields"), a = this.root.querySelector(".single"), o = this.root.querySelector(".start"), s = this.root.querySelector(".end"), y = this.root.querySelector(".sep"), k = this.root.querySelector('.btn[data-action="clear"]'), v = this.root.querySelector('.btn[data-action="toggle"]'), x = this.root.querySelector(".hint"), C = this.root.querySelector(".error"), g = this.root.querySelector(".inline-panel"), q = this.root.querySelector(".inline-panel .presets"), R = this.root.querySelector(".inline-panel .footer"), O = this.root.querySelector(".hidden-range"), z = this.root.querySelector(".hidden-start"), P = this.root.querySelector(".hidden-end"), G = this.root.querySelectorAll(".inline-panel .action");
-    b && (b.hidden = !t, b.id = this._labelId, b.setAttribute("for", l === "single-field" ? this._singleId : this._startId)), A && (A.textContent = t), I && (I.hidden = !this.hasAttribute("required")), f && (f.dataset.single = l === "single-field" ? "true" : "false", f.dataset.invalid = n ? "true" : "false", f.dataset.open = this._open && !p ? "true" : "false", f.dataset.state = d, f.setAttribute("aria-disabled", u ? "true" : "false")), a && (a.value !== this._draftSingle && (a.value = this._draftSingle), a.id = this._singleId, a.hidden = l !== "single-field", a.readOnly = this._isReadonly() || u, a.disabled = u, a.required = this.hasAttribute("required"), a.placeholder = r.startEnd, a.autocomplete = "off", a.setAttribute("role", "combobox"), a.setAttribute("aria-haspopup", "dialog"), a.setAttribute("aria-controls", this._panelId), a.setAttribute("aria-expanded", p ? "false" : String(this._open)), a.setAttribute("aria-invalid", n ? "true" : "false"), t ? a.setAttribute("aria-labelledby", this._labelId) : a.removeAttribute("aria-labelledby")), o && (o.value !== this._draftStart && (o.value = this._draftStart), o.id = this._startId, o.hidden = l === "single-field", o.readOnly = this._isReadonly() || u, o.disabled = u, o.required = this.hasAttribute("required"), o.placeholder = r.startDate, o.autocomplete = "off", o.setAttribute("role", "combobox"), o.setAttribute("aria-haspopup", "dialog"), o.setAttribute("aria-controls", this._panelId), o.setAttribute("aria-expanded", p ? "false" : String(this._open)), o.setAttribute("aria-invalid", n ? "true" : "false"), t ? o.setAttribute("aria-labelledby", this._labelId) : o.removeAttribute("aria-labelledby")), s && (s.value !== this._draftEnd && (s.value = this._draftEnd), s.id = this._endId, s.hidden = l === "single-field", s.readOnly = this._isReadonly() || u, s.disabled = u, s.required = this.hasAttribute("required"), s.placeholder = r.endDate, s.autocomplete = "off", s.setAttribute("role", "combobox"), s.setAttribute("aria-haspopup", "dialog"), s.setAttribute("aria-controls", this._panelId), s.setAttribute("aria-expanded", p ? "false" : String(this._open)), s.setAttribute("aria-invalid", n ? "true" : "false"), t ? s.setAttribute("aria-labelledby", this._labelId) : s.removeAttribute("aria-labelledby")), y && (y.hidden = l === "single-field"), k && (k.hidden = !(this._clearable() && h), k.disabled = u, k.setAttribute("aria-label", r.clearDateRange)), v && (v.hidden = p, v.disabled = u, v.setAttribute("aria-expanded", p ? "false" : String(this._open)), v.setAttribute("aria-controls", this._panelId), v.setAttribute("aria-label", r.toggleCalendar)), x && (x.id = this._hintId, x.hidden = !e, x.textContent = e), C && (C.id = this._errorId, C.hidden = !n, C.textContent = n);
+    const t = this.getAttribute("label") || "", e = this.getAttribute("hint") || "", i = this.getAttribute("error") || "", r = this._inlineError || i, n = this._translations(), d = r ? "error" : this._state(), l = this._rangeVariant(), p = this._isInlineMode(), h = !!(this._value.start || this._value.end || this._pending.start || this._pending.end), u = this._isInteractionBlocked(), b = this.root.querySelector(".label"), A = this.root.querySelector(".label-text"), I = this.root.querySelector(".required"), f = this.root.querySelector(".fields"), a = this.root.querySelector(".single"), o = this.root.querySelector(".start"), s = this.root.querySelector(".end"), y = this.root.querySelector(".sep"), k = this.root.querySelector('.btn[data-action="clear"]'), v = this.root.querySelector('.btn[data-action="toggle"]'), x = this.root.querySelector(".hint"), C = this.root.querySelector(".error"), g = this.root.querySelector(".inline-panel"), q = this.root.querySelector(".inline-panel .presets"), R = this.root.querySelector(".inline-panel .footer"), O = this.root.querySelector(".hidden-range"), z = this.root.querySelector(".hidden-start"), P = this.root.querySelector(".hidden-end"), G = this.root.querySelectorAll(".inline-panel .action");
+    b && (b.hidden = !t, b.id = this._labelId, b.setAttribute("for", l === "single-field" ? this._singleId : this._startId)), A && (A.textContent = t), I && (I.hidden = !this.hasAttribute("required")), f && (f.dataset.single = l === "single-field" ? "true" : "false", f.dataset.invalid = r ? "true" : "false", f.dataset.open = this._open && !p ? "true" : "false", f.dataset.state = d, f.setAttribute("aria-disabled", u ? "true" : "false")), a && (a.value !== this._draftSingle && (a.value = this._draftSingle), a.id = this._singleId, a.hidden = l !== "single-field", a.readOnly = this._isReadonly() || u, a.disabled = u, a.required = this.hasAttribute("required"), a.placeholder = n.startEnd, a.autocomplete = "off", a.setAttribute("role", "combobox"), a.setAttribute("aria-haspopup", "dialog"), a.setAttribute("aria-controls", this._panelId), a.setAttribute("aria-expanded", p ? "false" : String(this._open)), a.setAttribute("aria-invalid", r ? "true" : "false"), t ? a.setAttribute("aria-labelledby", this._labelId) : a.removeAttribute("aria-labelledby")), o && (o.value !== this._draftStart && (o.value = this._draftStart), o.id = this._startId, o.hidden = l === "single-field", o.readOnly = this._isReadonly() || u, o.disabled = u, o.required = this.hasAttribute("required"), o.placeholder = n.startDate, o.autocomplete = "off", o.setAttribute("role", "combobox"), o.setAttribute("aria-haspopup", "dialog"), o.setAttribute("aria-controls", this._panelId), o.setAttribute("aria-expanded", p ? "false" : String(this._open)), o.setAttribute("aria-invalid", r ? "true" : "false"), t ? o.setAttribute("aria-labelledby", this._labelId) : o.removeAttribute("aria-labelledby")), s && (s.value !== this._draftEnd && (s.value = this._draftEnd), s.id = this._endId, s.hidden = l === "single-field", s.readOnly = this._isReadonly() || u, s.disabled = u, s.required = this.hasAttribute("required"), s.placeholder = n.endDate, s.autocomplete = "off", s.setAttribute("role", "combobox"), s.setAttribute("aria-haspopup", "dialog"), s.setAttribute("aria-controls", this._panelId), s.setAttribute("aria-expanded", p ? "false" : String(this._open)), s.setAttribute("aria-invalid", r ? "true" : "false"), t ? s.setAttribute("aria-labelledby", this._labelId) : s.removeAttribute("aria-labelledby")), y && (y.hidden = l === "single-field"), k && (k.hidden = !(this._clearable() && h), k.disabled = u, k.setAttribute("aria-label", n.clearDateRange)), v && (v.hidden = p, v.disabled = u, v.setAttribute("aria-expanded", p ? "false" : String(this._open)), v.setAttribute("aria-controls", this._panelId), v.setAttribute("aria-label", n.toggleCalendar)), x && (x.id = this._hintId, x.hidden = !e, x.textContent = e), C && (C.id = this._errorId, C.hidden = !r, C.textContent = r);
     const D = [];
-    e && x && !x.hidden && D.push(this._hintId), n && D.push(this._errorId);
+    e && x && !x.hidden && D.push(this._hintId), r && D.push(this._errorId);
     const S = D.join(" ");
-    a && (S ? a.setAttribute("aria-describedby", S) : a.removeAttribute("aria-describedby")), o && (S ? o.setAttribute("aria-describedby", S) : o.removeAttribute("aria-describedby")), s && (S ? s.setAttribute("aria-describedby", S) : s.removeAttribute("aria-describedby")), g && (g.hidden = !p, g.id = this._panelId, g.dataset.bare = this._isBare() ? "true" : "false", g.setAttribute("role", "dialog"), g.setAttribute("aria-modal", "false"), g.setAttribute("aria-label", t || r.selectDateRange));
+    a && (S ? a.setAttribute("aria-describedby", S) : a.removeAttribute("aria-describedby")), o && (S ? o.setAttribute("aria-describedby", S) : o.removeAttribute("aria-describedby")), s && (S ? s.setAttribute("aria-describedby", S) : s.removeAttribute("aria-describedby")), g && (g.hidden = !p, g.id = this._panelId, g.dataset.bare = this._isBare() ? "true" : "false", g.setAttribute("role", "dialog"), g.setAttribute("aria-modal", "false"), g.setAttribute("aria-label", t || n.selectDateRange));
     const E = this._showFooter();
     q && (q.hidden = !E), R && (R.hidden = !E), G.forEach((X) => {
       X.disabled = u || this._isReadonly();
     });
     const $ = this.root.querySelector('.inline-panel [data-action="preset-today"]');
-    $ && ($.textContent = r.today);
+    $ && ($.textContent = n.today);
     const M = this.root.querySelector('.inline-panel [data-action="preset-last7"]');
-    M && (M.textContent = r.last7Days);
+    M && (M.textContent = n.last7Days);
     const F = this.root.querySelector('.inline-panel [data-action="preset-month"]');
-    F && (F.textContent = r.thisMonth);
+    F && (F.textContent = n.thisMonth);
     const V = this.root.querySelector('.inline-panel [data-action="clear"]');
-    V && (V.textContent = r.clear);
+    V && (V.textContent = n.clear);
     const H = this.root.querySelector('.inline-panel [data-action="apply"]');
-    H && (H.textContent = r.apply);
+    H && (H.textContent = n.apply);
     const B = this.getAttribute("name") || "", T = this.getAttribute("name-start") || "", U = this.getAttribute("name-end") || "", Q = this._value.start && this._value.end ? `${this._value.start}..${this._value.end}` : "";
     if (O && (O.disabled = !B, O.name = B, O.value = Q), z && (z.disabled = !!B || !T, z.name = T, z.value = this._value.start || ""), P && (P.disabled = !!B || !U, P.name = U, P.value = this._value.end || ""), p) {
       this._scheduleInlineCalendarSync(), this._destroyOverlay();
@@ -827,21 +846,21 @@ class yt extends tt {
     const e = t.target;
     if (!e)
       return;
-    const i = e.closest("[data-action]"), n = i == null ? void 0 : i.getAttribute("data-action");
-    if (n && !this._isInteractionBlocked()) {
-      if (n === "toggle") {
+    const i = e.closest("[data-action]"), r = i == null ? void 0 : i.getAttribute("data-action");
+    if (r && !this._isInteractionBlocked()) {
+      if (r === "toggle") {
         this._restoreFocusEl = i, this._setOpen(!this._open, "toggle");
         return;
       }
-      if (n === "clear") {
+      if (r === "clear") {
         this._commit({ start: null, end: null }, "clear");
         return;
       }
-      if (n === "apply") {
+      if (r === "apply") {
         this._commit(this._pending, "apply"), this._isInlineMode() || this._setOpen(!1, "apply");
         return;
       }
-      n === "cancel" && (this._pending = { ...this._value }, this._isInlineMode() || this._setOpen(!1, "cancel"), this._updateHostState());
+      r === "cancel" && (this._pending = { ...this._value }, this._isInlineMode() || this._setOpen(!1, "cancel"), this._updateHostState());
     }
   }
   _onRootInput(t) {
@@ -856,24 +875,24 @@ class yt extends tt {
   }
   _commitFromDraft(t) {
     if (this._rangeVariant() === "single-field") {
-      const r = this._draftSingle.trim();
-      if (!r)
+      const n = this._draftSingle.trim();
+      if (!n)
         return this._pending = { start: null, end: null }, this._commit(this._pending, t), !0;
-      const d = bt(r, this._locale());
-      return !d.start || !d.end && !this._allowPartial() ? (this._inlineError = this.getAttribute("error") || this._translations().invalidRange, this._emitInvalid(r, "parse"), this._updateHostState(), !1) : (this._pending = this._normalizePending({ start: d.start, end: d.end || null }), this._commit(this._pending, t), !0);
+      const d = bt(n, this._locale());
+      return !d.start || !d.end && !this._allowPartial() ? (this._inlineError = this.getAttribute("error") || this._translations().invalidRange, this._emitInvalid(n, "parse"), this._updateHostState(), !1) : (this._pending = this._normalizePending({ start: d.start, end: d.end || null }), this._commit(this._pending, t), !0);
     }
-    const i = this._draftStart ? w(this._draftStart, this._locale()) : null, n = this._draftEnd ? w(this._draftEnd, this._locale()) : null;
-    return this._draftStart && !i || this._draftEnd && !n ? (this._inlineError = this.getAttribute("error") || this._translations().invalidRange, this._emitInvalid(`${this._draftStart} ${this._draftEnd}`.trim(), "parse"), this._updateHostState(), !1) : (this._pending = this._normalizePending({ start: i, end: n }), this._commit(this._pending, t), !0);
+    const i = this._draftStart ? w(this._draftStart, this._locale()) : null, r = this._draftEnd ? w(this._draftEnd, this._locale()) : null;
+    return this._draftStart && !i || this._draftEnd && !r ? (this._inlineError = this.getAttribute("error") || this._translations().invalidRange, this._emitInvalid(`${this._draftStart} ${this._draftEnd}`.trim(), "parse"), this._updateHostState(), !1) : (this._pending = this._normalizePending({ start: i, end: r }), this._commit(this._pending, t), !0);
   }
   _onRootBlur(t) {
-    var r;
+    var n;
     if (this._isInteractionBlocked() || this._isReadonly())
       return;
     const e = t, i = e.target;
     if (!(i instanceof HTMLInputElement))
       return;
-    const n = e.relatedTarget;
-    n && ((r = this._overlay) != null && r.contains(n)) || this._open && !this._isInlineMode() || (i.classList.contains("single") || i.classList.contains("start") || i.classList.contains("end")) && (i.classList.contains("single") && (this._draftSingle = i.value), i.classList.contains("start") && (this._draftStart = i.value), i.classList.contains("end") && (this._draftEnd = i.value), this._commitFromDraft("blur"));
+    const r = e.relatedTarget;
+    r && ((n = this._overlay) != null && n.contains(r)) || this._open && !this._isInlineMode() || (i.classList.contains("single") || i.classList.contains("start") || i.classList.contains("end")) && (i.classList.contains("single") && (this._draftSingle = i.value), i.classList.contains("start") && (this._draftStart = i.value), i.classList.contains("end") && (this._draftEnd = i.value), this._commitFromDraft("blur"));
   }
   _onRootKeyDown(t) {
     const e = t;
@@ -905,37 +924,37 @@ class yt extends tt {
     const e = t.target;
     if (!e)
       return;
-    const i = e.closest("[data-action]"), n = i == null ? void 0 : i.getAttribute("data-action");
-    if (n && !(this._isInteractionBlocked() || this._isReadonly())) {
-      if (n === "backdrop") {
+    const i = e.closest("[data-action]"), r = i == null ? void 0 : i.getAttribute("data-action");
+    if (r && !(this._isInteractionBlocked() || this._isReadonly())) {
+      if (r === "backdrop") {
         this._setOpen(!1, "outside");
         return;
       }
-      if (n === "clear") {
+      if (r === "clear") {
         this._pending = { start: null, end: null }, this._emitInput("clear"), this._renderOverlay();
         return;
       }
-      if (n === "cancel") {
+      if (r === "cancel") {
         this._pending = { ...this._value }, this._setOpen(!1, "cancel");
         return;
       }
-      if (n === "apply") {
+      if (r === "apply") {
         this._commit(this._pending, "apply"), this._setOpen(!1, "apply");
         return;
       }
-      if (n === "preset-today") {
-        const r = this._todayIso();
-        this._pending = this._normalizePending({ start: r, end: r }), this._emitInput("preset-today"), this._renderOverlay();
+      if (r === "preset-today") {
+        const n = this._todayIso();
+        this._pending = this._normalizePending({ start: n, end: n }), this._emitInput("preset-today"), this._renderOverlay();
         return;
       }
-      if (n === "preset-last7") {
-        const r = this._todayIso();
-        this._pending = this._normalizePending(lt(r, 7)), this._emitInput("preset-last7"), this._renderOverlay();
+      if (r === "preset-last7") {
+        const n = this._todayIso();
+        this._pending = this._normalizePending(lt(n, 7)), this._emitInput("preset-last7"), this._renderOverlay();
         return;
       }
-      if (n === "preset-month") {
-        const r = this._todayIso();
-        this._pending = this._normalizePending(dt(r)), this._emitInput("preset-month"), this._renderOverlay();
+      if (r === "preset-month") {
+        const n = this._todayIso();
+        this._pending = this._normalizePending(dt(n)), this._emitInput("preset-month"), this._renderOverlay();
       }
     }
   }

package/dist/date-range-time-picker.cjs.js

@@ -10,7 +10,7 @@
   <svg viewBox="0 0 20 20" class="icon-svg" aria-hidden="true" focusable="false">
     <path d="M5.22 5.22a.75.75 0 0 1 1.06 0L10 8.94l3.72-3.72a.75.75 0 1 1 1.06 1.06L11.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06L10 11.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06L8.94 10 5.22 6.28a.75.75 0 0 1 0-1.06Z" fill="currentColor"/>
   </svg>
-`,k=`
+`,T=`
   <svg viewBox="0 0 20 20" class="icon-svg" aria-hidden="true" focusable="false">
     <path d="M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16Zm0 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Zm.75 2.75a.75.75 0 0 0-1.5 0v3.88c0 .2.08.4.22.54l2.5 2.5a.75.75 0 1 0 1.06-1.06l-2.28-2.28V6.25Z" fill="currentColor"/>
   </svg>
@@ -266,6 +266,22 @@
     }
   }
 `,st=`
+  .ui-date-range-time-picker-overlay-host {
+    --ui-drtp-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
+    --ui-drtp-surface: linear-gradient(
+      180deg,
+      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-drtp-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
+    --ui-dp-text: var(--ui-color-text, #0f172a);
+    --ui-dp-muted: var(--ui-color-muted, #64748b);
+    --ui-drtp-accent: var(--ui-color-primary, #2563eb);
+    --ui-drtp-panel-radius: 14px;
+    --ui-drtp-shadow: none;
+    --ui-drtp-duration: 160ms;
+    --ui-drtp-ease: cubic-bezier(0.2, 0.9, 0.24, 1);
+  }
   .overlay { position: fixed; z-index: var(--ui-drtp-z, 1600); pointer-events: none; }
   .panel {
     pointer-events: auto;
@@ -502,7 +518,7 @@
     from { opacity: 0; transform: translateY(6px) scale(0.985); }
     to { opacity: 1; transform: translateY(0) scale(1); }
   }
-`;function j(m){if(!m)return{start:null,end:null};try{const t=JSON.parse(m),e=typeof(t==null?void 0:t.start)=="string"?t.start:null,i=typeof(t==null?void 0:t.end)=="string"?t.end:null;return{start:e,end:i}}catch{return{start:null,end:null}}}function W(m){return!m.start&&!m.end?null:JSON.stringify({...m.start?{start:m.start}:{},...m.end?{end:m.end}:{}})}function S(m){return String(m).padStart(2,"0")}function p(m){return m.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function D(m){var a,n;const t=new Date,e=`${S(t.getHours())}:${S(t.getMinutes())}`,i=`${S((t.getHours()+1)%24)}:${S(t.getMinutes())}`,r=s.splitDateTime(m.start||null),l=s.splitDateTime(m.end||null);return{startDate:(r==null?void 0:r.date)||null,endDate:(l==null?void 0:l.date)||null,startTime:((a=r==null?void 0:r.time)==null?void 0:a.slice(0,5))||e,endTime:((n=l==null?void 0:l.time)==null?void 0:n.slice(0,5))||i}}class J extends Y.ElementBase{constructor(){super(...arguments),this._value={start:null,end:null},this._pending=D({start:null,end:null}),this._display="",this._inlineError="",this._open=!1,this._syncing=!1,this._overlay=null,this._dismissableLayer=null,this._releaseScrollLock=null,this._isInitialized=!1,this._hasView=!1,this._restoreFocusEl=null,this._overlayKey=null,this._uid=`ui-drtp-${++X}`,this._inputId=`${this._uid}-input`,this._labelId=`${this._uid}-label`,this._hintId=`${this._uid}-hint`,this._errorId=`${this._uid}-error`,this._panelId=`${this._uid}-panel`,this._schedulePosition=s.rafThrottle(()=>this._positionOverlay()),this._onRootClickBound=t=>this._onRootClick(t),this._onRootChangeBound=t=>this._onRootChange(t),this._onRootKeyDownBound=t=>this._onRootKeyDown(t),this._onOverlayClickBound=t=>this._onOverlayClick(t),this._onOverlayChangeBound=t=>this._onOverlayChange(t),this._onOverlayCalendarBound=t=>this._onOverlayCalendar(t),this._onDocumentPointerDownBound=t=>this._onDocumentPointerDown(t),this._onDocumentKeyDownBound=t=>this._onDocumentKeyDown(t),this._onWindowResizeBound=()=>this._schedulePosition.run(),this._onWindowScrollBound=t=>{s.eventOriginatesWithin(t,[this._overlay])||this._schedulePosition.run()}}static get observedAttributes(){return["open","default-open","value","default-value","min","max","locale","translations","week-start","size","shape","bare","variant","state","step","auto-normalize","allow-partial","disabled","readonly","required","name","close-on-select","clearable","mode","label","hint","error","show-footer"]}connectedCallback(){if(super.connectedCallback(),this.root.addEventListener("click",this._onRootClickBound),this.root.addEventListener("change",this._onRootChangeBound),this.root.addEventListener("keydown",this._onRootKeyDownBound),!this._isInitialized){const t=j(this.getAttribute("value")||this.getAttribute("default-value"));this._value=t,this._pending=D(t),this._display=this._formatDisplay(),this._open=this.hasAttribute("open")||s.isTruthyAttr(this.getAttribute("default-open")),this._isInitialized=!0}this._open&&!this._isInlineMode()&&this._ensureOverlay()}disconnectedCallback(){this.root.removeEventListener("click",this._onRootClickBound),this.root.removeEventListener("change",this._onRootChangeBound),this.root.removeEventListener("keydown",this._onRootKeyDownBound),this._destroyOverlay(),super.disconnectedCallback()}attributeChangedCallback(t,e,i){if(e!==i&&(t==="value"&&!this._syncing&&(this._value=j(i),this._pending=D(this._value),this._display=this._formatDisplay(),this._inlineError=""),t==="open"&&!this._syncing&&(this._open=this.hasAttribute("open"),this._syncOverlay("attribute")),t==="mode"&&this._syncOverlay("attribute"),t==="disabled"&&this.hasAttribute("disabled")&&this._setOpen(!1,"outside"),t==="state"&&this._state()==="loading"&&this._setOpen(!1,"outside"),!!this.isConnected)){if(!this._hasView){this.requestRender();return}this._updateHostState()}}_isInlineMode(){return(this.getAttribute("mode")||"popover")==="inline"}_isMobileSheet(){return s.shouldUseMobileSheet(this.getAttribute("mode"))}_isDisabled(){return this.hasAttribute("disabled")}_state(){const t=(this.getAttribute("state")||"").trim().toLowerCase();return t==="loading"||t==="error"||t==="success"?t:"idle"}_isInteractionBlocked(){return this._isDisabled()||this._state()==="loading"}_locale(){return s.normalizeLocale(this.getAttribute("locale"))}_isReadonly(){return this.hasAttribute("readonly")}_clearable(){return s.isTruthyAttr(this.getAttribute("clearable"),!0)}_showFooter(){return s.isTruthyAttr(this.getAttribute("show-footer"),!0)}_shouldAutoCommit(){return s.isTruthyAttr(this.getAttribute("close-on-select"),!1)||!this._showFooter()}_isBare(){return s.isTruthyAttr(this.getAttribute("bare"),!1)}_allowPartial(){return s.isTruthyAttr(this.getAttribute("allow-partial"),!0)}_autoNormalize(){return s.isTruthyAttr(this.getAttribute("auto-normalize"),!0)}_step(){const t=Number(this.getAttribute("step")||5);return!Number.isFinite(t)||t<1?5:Math.min(60,Math.trunc(t))}_translations(){return Q.resolveDateTimeTranslations(this.getAttribute("locale"),this.getAttribute("translations"))}_syncOpenAttribute(t){this._syncing=!0;try{t?this.hasAttribute("open")||this.setAttribute("open",""):this.hasAttribute("open")&&this.removeAttribute("open")}finally{this._syncing=!1}}_syncValueAttribute(t){const e=W(t);this._syncing=!0;try{e?this.getAttribute("value")!==e&&this.setAttribute("value",e):this.hasAttribute("value")&&this.removeAttribute("value")}finally{this._syncing=!1}}_emitInput(t){const e=this._valueFromPending(),i={mode:"datetimerange",start:e.start,end:e.end,value:e.start&&e.end?{start:e.start,end:e.end}:null,source:t};this.dispatchEvent(new CustomEvent("input",{detail:i,bubbles:!0,composed:!0}))}_emitChange(t){const e={mode:"datetimerange",start:this._value.start,end:this._value.end,value:this._value.start&&this._value.end?{start:this._value.start,end:this._value.end}:null,source:t};this.dispatchEvent(new CustomEvent("change",{detail:e,bubbles:!0,composed:!0}))}_emitInvalid(t,e){this.dispatchEvent(new CustomEvent("invalid",{detail:{raw:t,reason:e},bubbles:!0,composed:!0}))}_valueFromPending(){return{start:s.combineDateTime(this._pending.startDate,this._pending.startTime),end:s.combineDateTime(this._pending.endDate,this._pending.endTime)}}_formatDateTimeDisplay(t){const e=s.splitDateTime(t);return e?`${s.formatDateForDisplay(e.date,this._locale(),"locale",null)} ${e.time}`:t||""}_formatDisplay(){const t=this._value.start,e=this._value.end;return!t&&!e?"":t&&e?`${this._formatDateTimeDisplay(t)} — ${this._formatDateTimeDisplay(e)}`:this._formatDateTimeDisplay(t||e)}_normalizePendingState(t){var h,b;let e=s.combineDateTime(t.startDate,t.startTime),i=s.combineDateTime(t.endDate,t.endTime);if(e&&i&&s.compareDateTimes(e,i)>0&&this._autoNormalize()){const _=e;e=i,i=_}const r=s.parseConstraintDateTime(this.getAttribute("min")),l=s.parseConstraintDateTime(this.getAttribute("max"));let a=r?`${r.date}T${r.time}`:null,n=l?`${l.date}T${l.time}`:null;if(a&&n&&s.compareDateTimes(a,n)>0){const _=a;a=n,n=_}e&&a&&s.compareDateTimes(e,a)<0&&(e=a),e&&n&&s.compareDateTimes(e,n)>0&&(e=n),i&&a&&s.compareDateTimes(i,a)<0&&(i=a),i&&n&&s.compareDateTimes(i,n)>0&&(i=n);const o=s.splitDateTime(e||""),d=s.splitDateTime(i||"");return{startDate:(o==null?void 0:o.date)||null,endDate:(d==null?void 0:d.date)||null,startTime:((h=o==null?void 0:o.time)==null?void 0:h.slice(0,5))||t.startTime,endTime:((b=d==null?void 0:d.time)==null?void 0:b.slice(0,5))||t.endTime}}_commit(t,e){if(this._isInteractionBlocked()||this._isReadonly())return;const i=this._normalizePendingState(t),r={start:s.combineDateTime(i.startDate,i.startTime),end:s.combineDateTime(i.endDate,i.endTime)};if(!this._allowPartial()&&(!r.start||!r.end)){this._inlineError=this.getAttribute("error")||this._translations().rangeIncomplete,this._emitInvalid(JSON.stringify(r),"partial"),this._updateHostState();return}if(r.start&&r.end&&s.compareDateTimes(r.start,r.end)>0){this._inlineError=this.getAttribute("error")||this._translations().invalidRangeOrder,this._emitInvalid(JSON.stringify(r),"order"),this._updateHostState();return}this._value=r,this._pending=i,this._display=this._formatDisplay(),this._inlineError="",this._syncValueAttribute(r),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})))}_syncOverlay(t){if(this._isInlineMode()){this._destroyOverlay();return}if(this._open){this._ensureOverlay(),this._syncOverlayState();return}this._destroyOverlay();const e=this._restoreFocusEl;if(this._restoreFocusEl=null,e&&e.isConnected)try{e.focus()}catch{}}_ensureOverlay(){if(this._overlay||typeof document>"u")return;const t=document.createElement("div");t.style.position="fixed",t.style.left="0",t.style.top="0",t.style.pointerEvents="none",t.addEventListener("click",this._onOverlayClickBound),t.addEventListener("change",this._onOverlayChangeBound),t.addEventListener("change",this._onOverlayCalendarBound),document.body.appendChild(t),this._overlay=t,this._syncOverlayHostZIndex(),document.addEventListener("pointerdown",this._onDocumentPointerDownBound,!0),document.addEventListener("keydown",this._onDocumentKeyDownBound),window.addEventListener("resize",this._onWindowResizeBound),window.addEventListener("scroll",this._onWindowScrollBound,{passive:!0,capture:!0}),this._isMobileSheet()&&(this._releaseScrollLock=s.lockBodyScroll())}_syncOverlayHostZIndex(){if(!this._overlay||typeof window>"u")return;const t=window.getComputedStyle(this).getPropertyValue("--ui-drtp-z").trim();this._overlay.style.zIndex=t||"1600"}_destroyOverlay(){var t;(t=this._dismissableLayer)==null||t.destroy(),this._dismissableLayer=null,this._overlay&&(this._schedulePosition.cancel(),document.removeEventListener("pointerdown",this._onDocumentPointerDownBound,!0),document.removeEventListener("keydown",this._onDocumentKeyDownBound),window.removeEventListener("resize",this._onWindowResizeBound),window.removeEventListener("scroll",this._onWindowScrollBound,!0),this._overlay.removeEventListener("click",this._onOverlayClickBound),this._overlay.removeEventListener("change",this._onOverlayChangeBound),this._overlay.removeEventListener("change",this._onOverlayCalendarBound),this._overlay.parentElement&&this._overlay.parentElement.removeChild(this._overlay),this._overlay=null,this._overlayKey=null,this._releaseScrollLock&&(this._releaseScrollLock(),this._releaseScrollLock=null))}_syncDismissableLayer(){var i;if((i=this._dismissableLayer)==null||i.destroy(),this._dismissableLayer=null,!this._open||!this._overlay)return;const t=this._overlay.querySelector(".panel, .sheet"),e=this.root.querySelector(".field");t&&(this._dismissableLayer=G.createDismissableLayer({node:t,trigger:e,closeOnEscape:!0,closeOnPointerOutside:!0,closeOnFocusOutside:!1,onBeforeDismiss:r=>r==="escape-key"?(this._setOpen(!1,"escape"),!1):(r==="outside-pointer"&&this._setOpen(!1,"outside"),!1)}))}_positionOverlay(){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"),r=s.computePopoverPosition(t.getBoundingClientRect(),e.getBoundingClientRect(),8,8,i==="top"?"top":i==="bottom"?"bottom":null);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(t){const e=s.parseTimeInput(t,!0)||{hours:0,minutes:0,seconds:0},i=this._step(),r=Array.from({length:24},(a,n)=>`<option value="${n}" ${n===e.hours?"selected":""}>${S(n)}</option>`).join(""),l=Array.from({length:Math.ceil(60/i)},(a,n)=>{const o=Math.min(59,n*i);return`<option value="${o}" ${o===e.minutes?"selected":""}>${S(o)}</option>`}).join("");return{hours:r,minutes:l}}_renderSurfaceInner(t,e=!1){const i=this._translations(),r=this._timeOptions(this._pending.startTime),l=this._timeOptions(this._pending.endTime),a=(this.getAttribute("label")||"").trim(),n=p(a),o=p(a||i.selectDateRange),d=this._valueFromPending(),h=d.start&&d.end?`${this._formatDateTimeDisplay(d.start)} — ${this._formatDateTimeDisplay(d.end)}`:i.selectDateRange,b=p(`${i.startTime} ${i.hour}`),_=p(`${i.startTime} ${i.minute}`),x=p(`${i.endTime} ${i.hour}`),u=p(`${i.endTime} ${i.minute}`),f=`
+`;function j(m){if(!m)return{start:null,end:null};try{const t=JSON.parse(m),e=typeof(t==null?void 0:t.start)=="string"?t.start:null,i=typeof(t==null?void 0:t.end)=="string"?t.end:null;return{start:e,end:i}}catch{return{start:null,end:null}}}function W(m){return!m.start&&!m.end?null:JSON.stringify({...m.start?{start:m.start}:{},...m.end?{end:m.end}:{}})}function S(m){return String(m).padStart(2,"0")}function p(m){return m.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function D(m){var a,n;const t=new Date,e=`${S(t.getHours())}:${S(t.getMinutes())}`,i=`${S((t.getHours()+1)%24)}:${S(t.getMinutes())}`,r=s.splitDateTime(m.start||null),l=s.splitDateTime(m.end||null);return{startDate:(r==null?void 0:r.date)||null,endDate:(l==null?void 0:l.date)||null,startTime:((a=r==null?void 0:r.time)==null?void 0:a.slice(0,5))||e,endTime:((n=l==null?void 0:l.time)==null?void 0:n.slice(0,5))||i}}class J extends Y.ElementBase{constructor(){super(...arguments),this._value={start:null,end:null},this._pending=D({start:null,end:null}),this._display="",this._inlineError="",this._open=!1,this._syncing=!1,this._overlay=null,this._dismissableLayer=null,this._releaseScrollLock=null,this._isInitialized=!1,this._hasView=!1,this._restoreFocusEl=null,this._overlayKey=null,this._uid=`ui-drtp-${++X}`,this._inputId=`${this._uid}-input`,this._labelId=`${this._uid}-label`,this._hintId=`${this._uid}-hint`,this._errorId=`${this._uid}-error`,this._panelId=`${this._uid}-panel`,this._schedulePosition=s.rafThrottle(()=>this._positionOverlay()),this._onRootClickBound=t=>this._onRootClick(t),this._onRootChangeBound=t=>this._onRootChange(t),this._onRootKeyDownBound=t=>this._onRootKeyDown(t),this._onOverlayClickBound=t=>this._onOverlayClick(t),this._onOverlayChangeBound=t=>this._onOverlayChange(t),this._onOverlayCalendarBound=t=>this._onOverlayCalendar(t),this._onDocumentPointerDownBound=t=>this._onDocumentPointerDown(t),this._onDocumentKeyDownBound=t=>this._onDocumentKeyDown(t),this._onWindowResizeBound=()=>this._schedulePosition.run(),this._onWindowScrollBound=t=>{s.eventOriginatesWithin(t,[this._overlay])||this._schedulePosition.run()}}static get observedAttributes(){return["open","default-open","value","default-value","min","max","locale","translations","week-start","size","shape","bare","variant","state","step","auto-normalize","allow-partial","disabled","readonly","required","name","close-on-select","clearable","mode","label","hint","error","show-footer"]}connectedCallback(){if(super.connectedCallback(),this.root.addEventListener("click",this._onRootClickBound),this.root.addEventListener("change",this._onRootChangeBound),this.root.addEventListener("keydown",this._onRootKeyDownBound),!this._isInitialized){const t=j(this.getAttribute("value")||this.getAttribute("default-value"));this._value=t,this._pending=D(t),this._display=this._formatDisplay(),this._open=this.hasAttribute("open")||s.isTruthyAttr(this.getAttribute("default-open")),this._isInitialized=!0}this._open&&!this._isInlineMode()&&this._ensureOverlay()}disconnectedCallback(){this.root.removeEventListener("click",this._onRootClickBound),this.root.removeEventListener("change",this._onRootChangeBound),this.root.removeEventListener("keydown",this._onRootKeyDownBound),this._destroyOverlay(),super.disconnectedCallback()}attributeChangedCallback(t,e,i){if(e!==i&&(t==="value"&&!this._syncing&&(this._value=j(i),this._pending=D(this._value),this._display=this._formatDisplay(),this._inlineError=""),t==="open"&&!this._syncing&&(this._open=this.hasAttribute("open"),this._syncOverlay("attribute")),t==="mode"&&this._syncOverlay("attribute"),t==="disabled"&&this.hasAttribute("disabled")&&this._setOpen(!1,"outside"),t==="state"&&this._state()==="loading"&&this._setOpen(!1,"outside"),!!this.isConnected)){if(!this._hasView){this.requestRender();return}this._updateHostState()}}_isInlineMode(){return(this.getAttribute("mode")||"popover")==="inline"}_isMobileSheet(){return s.shouldUseMobileSheet(this.getAttribute("mode"))}_isDisabled(){return this.hasAttribute("disabled")}_state(){const t=(this.getAttribute("state")||"").trim().toLowerCase();return t==="loading"||t==="error"||t==="success"?t:"idle"}_isInteractionBlocked(){return this._isDisabled()||this._state()==="loading"}_locale(){return s.normalizeLocale(this.getAttribute("locale"))}_isReadonly(){return this.hasAttribute("readonly")}_clearable(){return s.isTruthyAttr(this.getAttribute("clearable"),!0)}_showFooter(){return s.isTruthyAttr(this.getAttribute("show-footer"),!0)}_shouldAutoCommit(){return s.isTruthyAttr(this.getAttribute("close-on-select"),!1)||!this._showFooter()}_isBare(){return s.isTruthyAttr(this.getAttribute("bare"),!1)}_allowPartial(){return s.isTruthyAttr(this.getAttribute("allow-partial"),!0)}_autoNormalize(){return s.isTruthyAttr(this.getAttribute("auto-normalize"),!0)}_step(){const t=Number(this.getAttribute("step")||5);return!Number.isFinite(t)||t<1?5:Math.min(60,Math.trunc(t))}_translations(){return Q.resolveDateTimeTranslations(this.getAttribute("locale"),this.getAttribute("translations"))}_syncOpenAttribute(t){this._syncing=!0;try{t?this.hasAttribute("open")||this.setAttribute("open",""):this.hasAttribute("open")&&this.removeAttribute("open")}finally{this._syncing=!1}}_syncValueAttribute(t){const e=W(t);this._syncing=!0;try{e?this.getAttribute("value")!==e&&this.setAttribute("value",e):this.hasAttribute("value")&&this.removeAttribute("value")}finally{this._syncing=!1}}_emitInput(t){const e=this._valueFromPending(),i={mode:"datetimerange",start:e.start,end:e.end,value:e.start&&e.end?{start:e.start,end:e.end}:null,source:t};this.dispatchEvent(new CustomEvent("input",{detail:i,bubbles:!0,composed:!0}))}_emitChange(t){const e={mode:"datetimerange",start:this._value.start,end:this._value.end,value:this._value.start&&this._value.end?{start:this._value.start,end:this._value.end}:null,source:t};this.dispatchEvent(new CustomEvent("change",{detail:e,bubbles:!0,composed:!0}))}_emitInvalid(t,e){this.dispatchEvent(new CustomEvent("invalid",{detail:{raw:t,reason:e},bubbles:!0,composed:!0}))}_valueFromPending(){return{start:s.combineDateTime(this._pending.startDate,this._pending.startTime),end:s.combineDateTime(this._pending.endDate,this._pending.endTime)}}_formatDateTimeDisplay(t){const e=s.splitDateTime(t);return e?`${s.formatDateForDisplay(e.date,this._locale(),"locale",null)} ${e.time}`:t||""}_formatDisplay(){const t=this._value.start,e=this._value.end;return!t&&!e?"":t&&e?`${this._formatDateTimeDisplay(t)} — ${this._formatDateTimeDisplay(e)}`:this._formatDateTimeDisplay(t||e)}_normalizePendingState(t){var h,b;let e=s.combineDateTime(t.startDate,t.startTime),i=s.combineDateTime(t.endDate,t.endTime);if(e&&i&&s.compareDateTimes(e,i)>0&&this._autoNormalize()){const g=e;e=i,i=g}const r=s.parseConstraintDateTime(this.getAttribute("min")),l=s.parseConstraintDateTime(this.getAttribute("max"));let a=r?`${r.date}T${r.time}`:null,n=l?`${l.date}T${l.time}`:null;if(a&&n&&s.compareDateTimes(a,n)>0){const g=a;a=n,n=g}e&&a&&s.compareDateTimes(e,a)<0&&(e=a),e&&n&&s.compareDateTimes(e,n)>0&&(e=n),i&&a&&s.compareDateTimes(i,a)<0&&(i=a),i&&n&&s.compareDateTimes(i,n)>0&&(i=n);const o=s.splitDateTime(e||""),d=s.splitDateTime(i||"");return{startDate:(o==null?void 0:o.date)||null,endDate:(d==null?void 0:d.date)||null,startTime:((h=o==null?void 0:o.time)==null?void 0:h.slice(0,5))||t.startTime,endTime:((b=d==null?void 0:d.time)==null?void 0:b.slice(0,5))||t.endTime}}_commit(t,e){if(this._isInteractionBlocked()||this._isReadonly())return;const i=this._normalizePendingState(t),r={start:s.combineDateTime(i.startDate,i.startTime),end:s.combineDateTime(i.endDate,i.endTime)};if(!this._allowPartial()&&(!r.start||!r.end)){this._inlineError=this.getAttribute("error")||this._translations().rangeIncomplete,this._emitInvalid(JSON.stringify(r),"partial"),this._updateHostState();return}if(r.start&&r.end&&s.compareDateTimes(r.start,r.end)>0){this._inlineError=this.getAttribute("error")||this._translations().invalidRangeOrder,this._emitInvalid(JSON.stringify(r),"order"),this._updateHostState();return}this._value=r,this._pending=i,this._display=this._formatDisplay(),this._inlineError="",this._syncValueAttribute(r),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})))}_syncOverlay(t){if(this._isInlineMode()){this._destroyOverlay();return}if(this._open){this._ensureOverlay(),this._syncOverlayState();return}this._destroyOverlay();const e=this._restoreFocusEl;if(this._restoreFocusEl=null,e&&e.isConnected)try{e.focus()}catch{}}_ensureOverlay(){if(this._overlay||typeof document>"u")return;const t=document.createElement("div");t.className="ui-date-range-time-picker-overlay-host",t.style.position="fixed",t.style.left="0",t.style.top="0",t.style.pointerEvents="none",t.addEventListener("click",this._onOverlayClickBound),t.addEventListener("change",this._onOverlayChangeBound),t.addEventListener("change",this._onOverlayCalendarBound),document.body.appendChild(t),this._overlay=t,this._syncOverlayHostZIndex(),document.addEventListener("pointerdown",this._onDocumentPointerDownBound,!0),document.addEventListener("keydown",this._onDocumentKeyDownBound),window.addEventListener("resize",this._onWindowResizeBound),window.addEventListener("scroll",this._onWindowScrollBound,{passive:!0,capture:!0}),this._isMobileSheet()&&(this._releaseScrollLock=s.lockBodyScroll())}_syncOverlayHostZIndex(){if(!this._overlay||typeof window>"u")return;const t=window.getComputedStyle(this).getPropertyValue("--ui-drtp-z").trim();this._overlay.style.zIndex=t||"1600"}_destroyOverlay(){var t;(t=this._dismissableLayer)==null||t.destroy(),this._dismissableLayer=null,this._overlay&&(this._schedulePosition.cancel(),document.removeEventListener("pointerdown",this._onDocumentPointerDownBound,!0),document.removeEventListener("keydown",this._onDocumentKeyDownBound),window.removeEventListener("resize",this._onWindowResizeBound),window.removeEventListener("scroll",this._onWindowScrollBound,!0),this._overlay.removeEventListener("click",this._onOverlayClickBound),this._overlay.removeEventListener("change",this._onOverlayChangeBound),this._overlay.removeEventListener("change",this._onOverlayCalendarBound),this._overlay.parentElement&&this._overlay.parentElement.removeChild(this._overlay),this._overlay=null,this._overlayKey=null,this._releaseScrollLock&&(this._releaseScrollLock(),this._releaseScrollLock=null))}_syncDismissableLayer(){var i;if((i=this._dismissableLayer)==null||i.destroy(),this._dismissableLayer=null,!this._open||!this._overlay)return;const t=this._overlay.querySelector(".panel, .sheet"),e=this.root.querySelector(".field");t&&(this._dismissableLayer=G.createDismissableLayer({node:t,trigger:e,closeOnEscape:!0,closeOnPointerOutside:!0,closeOnFocusOutside:!1,onBeforeDismiss:r=>r==="escape-key"?(this._setOpen(!1,"escape"),!1):(r==="outside-pointer"&&this._setOpen(!1,"outside"),!1)}))}_positionOverlay(){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"),r=s.computePopoverPosition(t.getBoundingClientRect(),e.getBoundingClientRect(),8,8,i==="top"?"top":i==="bottom"?"bottom":null);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(t){const e=s.parseTimeInput(t,!0)||{hours:0,minutes:0,seconds:0},i=this._step(),r=Array.from({length:24},(a,n)=>`<option value="${n}" ${n===e.hours?"selected":""}>${S(n)}</option>`).join(""),l=Array.from({length:Math.ceil(60/i)},(a,n)=>{const o=Math.min(59,n*i);return`<option value="${o}" ${o===e.minutes?"selected":""}>${S(o)}</option>`}).join("");return{hours:r,minutes:l}}_renderSurfaceInner(t,e=!1){const i=this._translations(),r=this._timeOptions(this._pending.startTime),l=this._timeOptions(this._pending.endTime),a=(this.getAttribute("label")||"").trim(),n=p(a),o=p(a||i.selectDateRange),d=this._valueFromPending(),h=d.start&&d.end?`${this._formatDateTimeDisplay(d.start)} — ${this._formatDateTimeDisplay(d.end)}`:i.selectDateRange,b=p(`${i.startTime} ${i.hour}`),g=p(`${i.startTime} ${i.minute}`),x=p(`${i.endTime} ${i.hour}`),u=p(`${i.endTime} ${i.minute}`),_=`
       <header class="head">
         <div>
           <p class="head-title" ${a?"":"hidden"}>${n}</p>
@@ -513,7 +529,7 @@
         <ui-calendar class="${e?"drtp-calendar-inline":"drtp-calendar"}" part="calendar"></ui-calendar>
         <section class="time-groups" part="time">
           <div class="time-card">
-            <p class="time-title"><span class="icon-inline">${k}</span>${p(i.startTime)} / ${p(i.endTime)}</p>
+            <p class="time-title"><span class="icon-inline">${T}</span>${p(i.startTime)} / ${p(i.endTime)}</p>
             <div class="time-table" role="group" aria-label="${p(i.dateRangeTimePlaceholder)}">
               <div class="time-table-head" aria-hidden="true">
                 <span></span>
@@ -521,12 +537,12 @@
                 <span class="time-col-label">${p(i.minute)}</span>
               </div>
               <div class="time-row">
-                <p class="time-row-label"><span class="icon-inline">${k}</span>${p(i.startTime)}</p>
+                <p class="time-row-label"><span class="icon-inline">${T}</span>${p(i.startTime)}</p>
                 <select data-time="start" data-segment="hours" aria-label="${b}">${r.hours}</select>
-                <select data-time="start" data-segment="minutes" aria-label="${_}">${r.minutes}</select>
+                <select data-time="start" data-segment="minutes" aria-label="${g}">${r.minutes}</select>
               </div>
               <div class="time-row">
-                <p class="time-row-label"><span class="icon-inline">${k}</span>${p(i.endTime)}</p>
+                <p class="time-row-label"><span class="icon-inline">${T}</span>${p(i.endTime)}</p>
                 <select data-time="end" data-segment="hours" aria-label="${x}">${l.hours}</select>
                 <select data-time="end" data-segment="minutes" aria-label="${u}">${l.minutes}</select>
               </div>
@@ -544,11 +560,11 @@
         ${e?"":`<button type="button" class="action" data-action="cancel">${p(i.cancel)}</button>`}
         <button type="button" class="action" data-action="apply" data-tone="primary">${p(i.apply)}</button>
       </footer>
-    `;return e?f:`
+    `;return e?_:`
       <style>${st}</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="${o}" part="${t?"sheet":"popover"}">${f}</section>
-    `}_syncCalendar(t){const e=(d,h)=>{if(h==null||h===""){t.hasAttribute(d)&&t.removeAttribute(d);return}t.getAttribute(d)!==h&&t.setAttribute(d,h)},i=(d,h)=>{h?e(d,""):e(d,null)};e("selection","range"),e("value",JSON.stringify({...this._pending.startDate?{start:this._pending.startDate}:{},...this._pending.endDate?{end:this._pending.endDate}:{}}));const r=s.parseConstraintDateTime(this.getAttribute("min")),l=s.parseConstraintDateTime(this.getAttribute("max"));e("min",(r==null?void 0:r.date)||null),e("max",(l==null?void 0:l.date)||null),e("locale",this.getAttribute("locale")),e("translations",this.getAttribute("translations")),e("week-start",this.getAttribute("week-start"));const n=this.getAttribute("size")||"sm",o=t.classList.contains("drtp-calendar-inline");e("size",n==="lg"?"md":"sm"),e("variant",this.getAttribute("variant")),i("readonly",this._isReadonly()),i("disabled",this._isInteractionBlocked()),i("bare",this._isBare()),e("tabindex","-1"),n==="lg"?(t.style.setProperty("--ui-calendar-day-height","1.95em"),t.style.setProperty("--ui-calendar-day-padding-block","0.2em"),t.style.setProperty("--ui-calendar-day-padding-inline","0.26em"),t.style.setProperty("--ui-calendar-gap","0.42em"),t.style.setProperty("--ui-calendar-day-font-size","0.78em"),t.style.setProperty("--ui-calendar-weekday-font-size","0.7em"),t.style.setProperty("--ui-calendar-title-font-size","0.88em")):(t.style.setProperty("--ui-calendar-day-height","2.4em"),t.style.setProperty("--ui-calendar-day-padding-block","0.14em"),t.style.setProperty("--ui-calendar-day-padding-inline","0.22em"),t.style.setProperty("--ui-calendar-gap","0.34em"),t.style.setProperty("--ui-calendar-day-font-size","0.72em"),t.style.setProperty("--ui-calendar-weekday-font-size","0.64em"),t.style.setProperty("--ui-calendar-title-font-size","0.8em")),o?(t.style.setProperty("--ui-calendar-frame-padding","0.32em"),t.style.setProperty("--ui-calendar-week-gap","0.18em"),t.style.setProperty("--ui-calendar-control-height","1.72em"),t.style.setProperty("--ui-calendar-gap","0.24em")):(t.style.removeProperty("--ui-calendar-frame-padding"),t.style.removeProperty("--ui-calendar-week-gap"),t.style.removeProperty("--ui-calendar-control-height")),e("aria-label",this.getAttribute("label")||this._translations().selectDateRange)}_overlaySignature(t){return[t?"sheet":"popover",this._step(),this.getAttribute("locale")||"",this.getAttribute("label")||"",this.getAttribute("translations")||""].join(":")}_ensureOverlayContent(t){if(!this._overlay)return;const e=this._overlaySignature(t);this._overlayKey===e&&this._overlay.querySelector(".drtp-calendar")||(this._overlayKey=e,this._overlay.innerHTML=t?`<div class="sheet-wrap">${this._renderSurfaceInner(!0)}</div>`:`<div class="overlay">${this._renderSurfaceInner(!1)}</div>`)}_setClosestOptionValue(t,e){const i=Array.from(t.options).map(a=>Number(a.value)).filter(a=>Number.isFinite(a));if(!i.length)return;let r=i[0],l=Math.abs(r-e);for(let a=1;a<i.length;a+=1){const n=i[a],o=Math.abs(n-e);o<l&&(r=n,l=o)}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"),r=this._overlay.querySelector(".presets"),l=this._overlay.querySelector(".footer");i&&(i.dataset.bare=this._isBare()?"true":"false");const a=this._showFooter();r&&(r.hidden=!a),l&&(l.hidden=!a);const n=this._overlay.querySelector(".head-title");if(n){const g=(this.getAttribute("label")||"").trim();n.textContent=g,n.hidden=!g}const o=this._overlay.querySelector(".head-meta"),d=this._valueFromPending();o&&(o.textContent=d.start&&d.end?`${this._formatDateTimeDisplay(d.start)} — ${this._formatDateTimeDisplay(d.end)}`:e.selectDateRange);const h=this._overlay.querySelector(".drtp-calendar");h&&this._syncCalendar(h);const b=s.parseTimeInput(this._pending.startTime,!0)||{hours:0,minutes:0,seconds:0},_=s.parseTimeInput(this._pending.endTime,!0)||{hours:0,minutes:0,seconds:0},x=this._overlay.querySelector('select[data-time="start"][data-segment="hours"]'),u=this._overlay.querySelector('select[data-time="start"][data-segment="minutes"]'),f=this._overlay.querySelector('select[data-time="end"][data-segment="hours"]'),y=this._overlay.querySelector('select[data-time="end"][data-segment="minutes"]');x&&this._setClosestOptionValue(x,b.hours),u&&this._setClosestOptionValue(u,b.minutes),f&&this._setClosestOptionValue(f,_.hours),y&&this._setClosestOptionValue(y,_.minutes);const v=this._isInteractionBlocked()||this._isReadonly();[x,u,f,y].forEach(g=>{g&&(g.disabled=v)}),this._overlay.querySelectorAll(".action, .preset").forEach(g=>{g.disabled=v}),t||this._schedulePosition.run()}_renderOverlay(){this._syncOverlayState()}_applyTimeFromOverlay(t){var o,d;const e=t.getAttribute("data-time"),i=(o=this._overlay)==null?void 0:o.querySelector(`select[data-time="${e}"][data-segment="hours"]`),r=(d=this._overlay)==null?void 0:d.querySelector(`select[data-time="${e}"][data-segment="minutes"]`);if(!e||!i||!r)return;const l=Number(i.value),a=Number(r.value);if(!Number.isFinite(l)||!Number.isFinite(a))return;const n=`${S(l)}:${S(a)}`;e==="start"&&(this._pending.startTime=n),e==="end"&&(this._pending.endTime=n),this._pending=this._normalizePendingState(this._pending),this._emitInput("time")}_todayIso(){const t=new Date,e=String(t.getMonth()+1).padStart(2,"0"),i=String(t.getDate()).padStart(2,"0");return`${t.getFullYear()}-${e}-${i}`}_applyPreset(t){const e=this._todayIso();if(t==="preset-today"){this._pending.startDate=e,this._pending.endDate=e,this._pending=this._normalizePendingState(this._pending),this._emitInput("preset-today");return}if(t==="preset-last7"){const r=s.computeLastDaysRange(e,7);this._pending.startDate=r.start,this._pending.endDate=r.end,this._pending=this._normalizePendingState(this._pending),this._emitInput("preset-last7");return}const i=s.computeMonthRange(e);this._pending.startDate=i.start,this._pending.endDate=i.end,this._pending=this._normalizePendingState(this._pending),this._emitInput("preset-month")}_onRootClick(t){var r;const e=t.target;if(!e)return;const i=(r=e.closest("[data-action]"))==null?void 0:r.getAttribute("data-action");if(i&&!this._isInteractionBlocked()&&!(this._isReadonly()&&i!=="toggle")){if(i==="toggle"){this._restoreFocusEl=e,this._setOpen(!this._open,"toggle");return}if(i==="clear"){this._isInlineMode()?(this._pending=D({start:null,end:null}),this._emitInput("clear"),this._updateHostState()):(this._pending=D({start:null,end:null}),this._commit(this._pending,"clear"));return}if(this._isInlineMode()&&(i==="preset-today"||i==="preset-last7"||i==="preset-month")){this._applyPreset(i),this._updateHostState();return}if(this._isInlineMode()&&i==="cancel"){this._pending=D(this._value),this._updateHostState();return}this._isInlineMode()&&i==="apply"&&this._commit(this._pending,"apply")}}_onRootChange(t){if(!this._isInlineMode())return;const e=t.target;if(e){if(e.tagName.toLowerCase()==="ui-calendar"){this._onOverlayCalendar(t);return}if(e instanceof HTMLSelectElement&&e.closest(".inline-panel")){if(!e.matches("select[data-time][data-segment]")||this._isInteractionBlocked()||this._isReadonly())return;if(this._applyTimeFromOverlay(e),this._shouldAutoCommit()){const i=this._valueFromPending();if(i.start&&i.end){this._commit(this._pending,"time");return}}this._updateHostState()}}}_onRootKeyDown(t){const e=t;if(!this._isInteractionBlocked()){if(e.key==="Escape"&&this._open&&!this._isInlineMode()){e.preventDefault(),this._setOpen(!1,"escape");return}e.key==="ArrowDown"&&!this._open&&!this._isInlineMode()&&(e.preventDefault(),this._setOpen(!0,"keyboard"))}}_onOverlayClick(t){var r;const e=t.target;if(!e)return;const i=(r=e.closest("[data-action]"))==null?void 0:r.getAttribute("data-action");if(i&&!(this._isInteractionBlocked()||this._isReadonly())){if(i==="backdrop"){this._setOpen(!1,"outside");return}if(i==="cancel"){this._pending=D(this._value),this._setOpen(!1,"cancel");return}if(i==="clear"){this._pending=D({start:null,end:null}),this._emitInput("clear"),this._renderOverlay();return}if(i==="preset-today"||i==="preset-last7"||i==="preset-month"){this._applyPreset(i),this._renderOverlay();return}i==="apply"&&(this._commit(this._pending,"apply"),this._setOpen(!1,"apply"))}}_onOverlayChange(t){const e=t.target;if(e instanceof HTMLSelectElement&&e.matches("select[data-time][data-segment]")&&!(this._isInteractionBlocked()||this._isReadonly())&&(this._applyTimeFromOverlay(e),this._shouldAutoCommit())){const i=this._valueFromPending();i.start&&i.end&&(this._commit(this._pending,"time"),this._setOpen(!1,"time"))}}_onOverlayCalendar(t){if(this._isInteractionBlocked()||this._isReadonly())return;const e=t.target;if(!e||e.tagName.toLowerCase()!=="ui-calendar")return;const i=t.detail;if(!(!i||i.mode!=="range")){if(this._pending.startDate=i.start||null,this._pending.endDate=i.end||null,this._pending=this._normalizePendingState(this._pending),this._emitInput("calendar"),this._shouldAutoCommit()&&this._pending.startDate&&this._pending.endDate){this._commit(this._pending,"calendar"),this._setOpen(!1,"calendar");return}this._isInlineMode()?this._updateHostState():this._renderOverlay()}}_onDocumentPointerDown(t){if(!this._open||!this._overlay)return;const e=t.composedPath();e.includes(this)||e.includes(this._overlay)||this._setOpen(!1,"outside")}_onDocumentKeyDown(t){this._open&&t.key==="Escape"&&(t.preventDefault(),this._setOpen(!1,"escape"))}_updateHostState(){if(!this._hasView)return;const t=this.getAttribute("label")||"",e=this.getAttribute("hint")||"",i=this.getAttribute("error")||"",r=this._inlineError||i,l=!!(this._value.start||this._value.end),a=this.getAttribute("name")||"",n=this._isInlineMode(),o=this._translations(),d=r?"error":this._state(),h=this._formatDisplay();this._display=h,this._state()==="loading"?this.setAttribute("aria-busy","true"):this.removeAttribute("aria-busy");const b=this.root.querySelector(".label"),_=this.root.querySelector(".label-text"),x=this.root.querySelector(".required"),u=this.root.querySelector(".input"),f=this.root.querySelector('.btn[data-action="clear"]'),y=this.root.querySelector('.btn[data-action="toggle"]'),v=this.root.querySelector(".hint"),g=this.root.querySelector(".error"),C=this.root.querySelector(".hidden-input");if(b&&(b.hidden=!t,b.id=this._labelId,b.setAttribute("for",this._inputId)),_&&(_.textContent=t),x&&(x.hidden=!this.hasAttribute("required")),u&&(u.value!==h&&(u.value=h),u.id=this._inputId,u.placeholder=o.dateRangeTimePlaceholder,u.readOnly=!0,u.disabled=this._isInteractionBlocked(),u.required=this.hasAttribute("required"),u.autocomplete="off",u.setAttribute("role","combobox"),u.setAttribute("aria-haspopup","dialog"),u.setAttribute("aria-expanded",n?"false":String(this._open)),u.setAttribute("aria-controls",this._panelId),u.setAttribute("aria-invalid",r?"true":"false"),t?u.setAttribute("aria-labelledby",this._labelId):u.removeAttribute("aria-labelledby")),f&&(f.hidden=!(this._clearable()&&l),f.setAttribute("aria-label",o.clearDateRange),f.disabled=this._isInteractionBlocked()),y&&(y.hidden=n,y.setAttribute("aria-label",o.toggleCalendar),y.setAttribute("aria-expanded",n?"false":String(this._open)),y.setAttribute("aria-controls",this._panelId),y.disabled=this._isInteractionBlocked()),v&&(v.id=this._hintId,v.hidden=!e,v.textContent=e),g&&(g.id=this._errorId,g.hidden=!r,g.textContent=r),u){const w=[];e&&v&&!v.hidden&&w.push(this._hintId),r&&w.push(this._errorId),w.length?u.setAttribute("aria-describedby",w.join(" ")):u.removeAttribute("aria-describedby")}C&&(C.disabled=!a,C.name=a,C.value=W(this._value)||"");const I=this.root.querySelector(".field");I&&(I.dataset.open=this._open&&!n?"true":"false",I.dataset.invalid=r?"true":"false",I.dataset.state=d);const c=this.root.querySelector(".inline-panel");if(c){c.hidden=!n,c.id=this._panelId,c.dataset.bare=this._isBare()?"true":"false",c.setAttribute("role","dialog"),c.setAttribute("aria-modal","false"),c.setAttribute("aria-label",t||o.selectDateRange);const w=c.querySelector(".panel-title");w&&(w.textContent=t,w.hidden=!t);const $=c.querySelector(".head-title");$&&($.textContent=t,$.hidden=!t);const q=c.querySelector(".head-meta"),A=this._valueFromPending();q&&(q.textContent=A.start&&A.end?`${this._formatDateTimeDisplay(A.start)} — ${this._formatDateTimeDisplay(A.end)}`:o.selectDateRange);const R=c.querySelector(".drtp-calendar-inline");R&&this._syncCalendar(R);const O=c.querySelector('select[data-time="start"][data-segment="hours"]'),z=c.querySelector('select[data-time="start"][data-segment="minutes"]'),P=c.querySelector('select[data-time="end"][data-segment="hours"]'),B=c.querySelector('select[data-time="end"][data-segment="minutes"]'),L=s.parseTimeInput(this._pending.startTime,!0)||{hours:0,minutes:0,seconds:0},M=s.parseTimeInput(this._pending.endTime,!0)||{hours:0,minutes:0,seconds:0};O&&this._setClosestOptionValue(O,L.hours),z&&this._setClosestOptionValue(z,L.minutes),P&&this._setClosestOptionValue(P,M.hours),B&&this._setClosestOptionValue(B,M.minutes),[O,z,P,B].forEach(T=>{T&&(T.disabled=this._isInteractionBlocked()||this._isReadonly())});const E=c.querySelector('[data-action="preset-today"]');E&&(E.textContent=o.today);const H=c.querySelector('[data-action="preset-last7"]');H&&(H.textContent=o.last7Days);const V=c.querySelector('[data-action="preset-month"]');V&&(V.textContent=o.thisMonth);const F=c.querySelector('[data-action="clear"]');F&&(F.textContent=o.clear);const N=c.querySelector('[data-action="apply"]');N&&(N.textContent=o.apply);const K=c.querySelector(".presets"),U=c.querySelector(".footer"),Z=this._showFooter();K&&(K.hidden=!Z),U&&(U.hidden=!Z),c.querySelectorAll(".action, .preset").forEach(T=>{T.disabled=this._isInteractionBlocked()||this._isReadonly()})}!n&&this._open&&this._syncOverlayState(),n&&this._destroyOverlay()}render(){if(!this._hasView){const t=this._translations();this.setContent(`
+      <section class="${t?"sheet":"panel"}" id="${this._panelId}" role="dialog" aria-modal="${t?"true":"false"}" aria-label="${o}" part="${t?"sheet":"popover"}">${_}</section>
+    `}_syncCalendar(t){const e=(d,h)=>{if(h==null||h===""){t.hasAttribute(d)&&t.removeAttribute(d);return}t.getAttribute(d)!==h&&t.setAttribute(d,h)},i=(d,h)=>{h?e(d,""):e(d,null)};e("selection","range"),e("value",JSON.stringify({...this._pending.startDate?{start:this._pending.startDate}:{},...this._pending.endDate?{end:this._pending.endDate}:{}}));const r=s.parseConstraintDateTime(this.getAttribute("min")),l=s.parseConstraintDateTime(this.getAttribute("max"));e("min",(r==null?void 0:r.date)||null),e("max",(l==null?void 0:l.date)||null),e("locale",this.getAttribute("locale")),e("translations",this.getAttribute("translations")),e("week-start",this.getAttribute("week-start"));const n=this.getAttribute("size")||"sm",o=t.classList.contains("drtp-calendar-inline");e("size",n==="lg"?"md":"sm"),e("variant",this.getAttribute("variant")),i("readonly",this._isReadonly()),i("disabled",this._isInteractionBlocked()),i("bare",this._isBare()),e("tabindex","-1"),n==="lg"?(t.style.setProperty("--ui-calendar-day-height","1.95em"),t.style.setProperty("--ui-calendar-day-padding-block","0.2em"),t.style.setProperty("--ui-calendar-day-padding-inline","0.26em"),t.style.setProperty("--ui-calendar-gap","0.42em"),t.style.setProperty("--ui-calendar-day-font-size","0.78em"),t.style.setProperty("--ui-calendar-weekday-font-size","0.7em"),t.style.setProperty("--ui-calendar-title-font-size","0.88em")):(t.style.setProperty("--ui-calendar-day-height","2.4em"),t.style.setProperty("--ui-calendar-day-padding-block","0.14em"),t.style.setProperty("--ui-calendar-day-padding-inline","0.22em"),t.style.setProperty("--ui-calendar-gap","0.34em"),t.style.setProperty("--ui-calendar-day-font-size","0.72em"),t.style.setProperty("--ui-calendar-weekday-font-size","0.64em"),t.style.setProperty("--ui-calendar-title-font-size","0.8em")),o?(t.style.setProperty("--ui-calendar-frame-padding","0.32em"),t.style.setProperty("--ui-calendar-week-gap","0.18em"),t.style.setProperty("--ui-calendar-control-height","1.72em"),t.style.setProperty("--ui-calendar-gap","0.24em")):(t.style.removeProperty("--ui-calendar-frame-padding"),t.style.removeProperty("--ui-calendar-week-gap"),t.style.removeProperty("--ui-calendar-control-height")),e("aria-label",this.getAttribute("label")||this._translations().selectDateRange)}_overlaySignature(t){return[t?"sheet":"popover",this._step(),this.getAttribute("locale")||"",this.getAttribute("label")||"",this.getAttribute("translations")||""].join(":")}_ensureOverlayContent(t){if(!this._overlay)return;const e=this._overlaySignature(t);this._overlayKey===e&&this._overlay.querySelector(".drtp-calendar")||(this._overlayKey=e,this._overlay.innerHTML=t?`<div class="sheet-wrap">${this._renderSurfaceInner(!0)}</div>`:`<div class="overlay">${this._renderSurfaceInner(!1)}</div>`)}_setClosestOptionValue(t,e){const i=Array.from(t.options).map(a=>Number(a.value)).filter(a=>Number.isFinite(a));if(!i.length)return;let r=i[0],l=Math.abs(r-e);for(let a=1;a<i.length;a+=1){const n=i[a],o=Math.abs(n-e);o<l&&(r=n,l=o)}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"),r=this._overlay.querySelector(".presets"),l=this._overlay.querySelector(".footer");i&&(i.dataset.bare=this._isBare()?"true":"false");const a=this._showFooter();r&&(r.hidden=!a),l&&(l.hidden=!a);const n=this._overlay.querySelector(".head-title");if(n){const f=(this.getAttribute("label")||"").trim();n.textContent=f,n.hidden=!f}const o=this._overlay.querySelector(".head-meta"),d=this._valueFromPending();o&&(o.textContent=d.start&&d.end?`${this._formatDateTimeDisplay(d.start)} — ${this._formatDateTimeDisplay(d.end)}`:e.selectDateRange);const h=this._overlay.querySelector(".drtp-calendar");h&&this._syncCalendar(h);const b=s.parseTimeInput(this._pending.startTime,!0)||{hours:0,minutes:0,seconds:0},g=s.parseTimeInput(this._pending.endTime,!0)||{hours:0,minutes:0,seconds:0},x=this._overlay.querySelector('select[data-time="start"][data-segment="hours"]'),u=this._overlay.querySelector('select[data-time="start"][data-segment="minutes"]'),_=this._overlay.querySelector('select[data-time="end"][data-segment="hours"]'),y=this._overlay.querySelector('select[data-time="end"][data-segment="minutes"]');x&&this._setClosestOptionValue(x,b.hours),u&&this._setClosestOptionValue(u,b.minutes),_&&this._setClosestOptionValue(_,g.hours),y&&this._setClosestOptionValue(y,g.minutes);const v=this._isInteractionBlocked()||this._isReadonly();[x,u,_,y].forEach(f=>{f&&(f.disabled=v)}),this._overlay.querySelectorAll(".action, .preset").forEach(f=>{f.disabled=v}),t||this._schedulePosition.run()}_renderOverlay(){this._syncOverlayState()}_applyTimeFromOverlay(t){var o,d;const e=t.getAttribute("data-time"),i=(o=this._overlay)==null?void 0:o.querySelector(`select[data-time="${e}"][data-segment="hours"]`),r=(d=this._overlay)==null?void 0:d.querySelector(`select[data-time="${e}"][data-segment="minutes"]`);if(!e||!i||!r)return;const l=Number(i.value),a=Number(r.value);if(!Number.isFinite(l)||!Number.isFinite(a))return;const n=`${S(l)}:${S(a)}`;e==="start"&&(this._pending.startTime=n),e==="end"&&(this._pending.endTime=n),this._pending=this._normalizePendingState(this._pending),this._emitInput("time")}_todayIso(){const t=new Date,e=String(t.getMonth()+1).padStart(2,"0"),i=String(t.getDate()).padStart(2,"0");return`${t.getFullYear()}-${e}-${i}`}_applyPreset(t){const e=this._todayIso();if(t==="preset-today"){this._pending.startDate=e,this._pending.endDate=e,this._pending=this._normalizePendingState(this._pending),this._emitInput("preset-today");return}if(t==="preset-last7"){const r=s.computeLastDaysRange(e,7);this._pending.startDate=r.start,this._pending.endDate=r.end,this._pending=this._normalizePendingState(this._pending),this._emitInput("preset-last7");return}const i=s.computeMonthRange(e);this._pending.startDate=i.start,this._pending.endDate=i.end,this._pending=this._normalizePendingState(this._pending),this._emitInput("preset-month")}_onRootClick(t){var r;const e=t.target;if(!e)return;const i=(r=e.closest("[data-action]"))==null?void 0:r.getAttribute("data-action");if(i&&!this._isInteractionBlocked()&&!(this._isReadonly()&&i!=="toggle")){if(i==="toggle"){this._restoreFocusEl=e,this._setOpen(!this._open,"toggle");return}if(i==="clear"){this._isInlineMode()?(this._pending=D({start:null,end:null}),this._emitInput("clear"),this._updateHostState()):(this._pending=D({start:null,end:null}),this._commit(this._pending,"clear"));return}if(this._isInlineMode()&&(i==="preset-today"||i==="preset-last7"||i==="preset-month")){this._applyPreset(i),this._updateHostState();return}if(this._isInlineMode()&&i==="cancel"){this._pending=D(this._value),this._updateHostState();return}this._isInlineMode()&&i==="apply"&&this._commit(this._pending,"apply")}}_onRootChange(t){if(!this._isInlineMode())return;const e=t.target;if(e){if(e.tagName.toLowerCase()==="ui-calendar"){this._onOverlayCalendar(t);return}if(e instanceof HTMLSelectElement&&e.closest(".inline-panel")){if(!e.matches("select[data-time][data-segment]")||this._isInteractionBlocked()||this._isReadonly())return;if(this._applyTimeFromOverlay(e),this._shouldAutoCommit()){const i=this._valueFromPending();if(i.start&&i.end){this._commit(this._pending,"time");return}}this._updateHostState()}}}_onRootKeyDown(t){const e=t;if(!this._isInteractionBlocked()){if(e.key==="Escape"&&this._open&&!this._isInlineMode()){e.preventDefault(),this._setOpen(!1,"escape");return}e.key==="ArrowDown"&&!this._open&&!this._isInlineMode()&&(e.preventDefault(),this._setOpen(!0,"keyboard"))}}_onOverlayClick(t){var r;const e=t.target;if(!e)return;const i=(r=e.closest("[data-action]"))==null?void 0:r.getAttribute("data-action");if(i&&!(this._isInteractionBlocked()||this._isReadonly())){if(i==="backdrop"){this._setOpen(!1,"outside");return}if(i==="cancel"){this._pending=D(this._value),this._setOpen(!1,"cancel");return}if(i==="clear"){this._pending=D({start:null,end:null}),this._emitInput("clear"),this._renderOverlay();return}if(i==="preset-today"||i==="preset-last7"||i==="preset-month"){this._applyPreset(i),this._renderOverlay();return}i==="apply"&&(this._commit(this._pending,"apply"),this._setOpen(!1,"apply"))}}_onOverlayChange(t){const e=t.target;if(e instanceof HTMLSelectElement&&e.matches("select[data-time][data-segment]")&&!(this._isInteractionBlocked()||this._isReadonly())&&(this._applyTimeFromOverlay(e),this._shouldAutoCommit())){const i=this._valueFromPending();i.start&&i.end&&(this._commit(this._pending,"time"),this._setOpen(!1,"time"))}}_onOverlayCalendar(t){if(this._isInteractionBlocked()||this._isReadonly())return;const e=t.target;if(!e||e.tagName.toLowerCase()!=="ui-calendar")return;const i=t.detail;if(!(!i||i.mode!=="range")){if(this._pending.startDate=i.start||null,this._pending.endDate=i.end||null,this._pending=this._normalizePendingState(this._pending),this._emitInput("calendar"),this._shouldAutoCommit()&&this._pending.startDate&&this._pending.endDate){this._commit(this._pending,"calendar"),this._setOpen(!1,"calendar");return}this._isInlineMode()?this._updateHostState():this._renderOverlay()}}_onDocumentPointerDown(t){if(!this._open||!this._overlay)return;const e=t.composedPath();e.includes(this)||e.includes(this._overlay)||this._setOpen(!1,"outside")}_onDocumentKeyDown(t){this._open&&t.key==="Escape"&&(t.preventDefault(),this._setOpen(!1,"escape"))}_updateHostState(){if(!this._hasView)return;const t=this.getAttribute("label")||"",e=this.getAttribute("hint")||"",i=this.getAttribute("error")||"",r=this._inlineError||i,l=!!(this._value.start||this._value.end),a=this.getAttribute("name")||"",n=this._isInlineMode(),o=this._translations(),d=r?"error":this._state(),h=this._formatDisplay();this._display=h,this._state()==="loading"?this.setAttribute("aria-busy","true"):this.removeAttribute("aria-busy");const b=this.root.querySelector(".label"),g=this.root.querySelector(".label-text"),x=this.root.querySelector(".required"),u=this.root.querySelector(".input"),_=this.root.querySelector('.btn[data-action="clear"]'),y=this.root.querySelector('.btn[data-action="toggle"]'),v=this.root.querySelector(".hint"),f=this.root.querySelector(".error"),C=this.root.querySelector(".hidden-input");if(b&&(b.hidden=!t,b.id=this._labelId,b.setAttribute("for",this._inputId)),g&&(g.textContent=t),x&&(x.hidden=!this.hasAttribute("required")),u&&(u.value!==h&&(u.value=h),u.id=this._inputId,u.placeholder=o.dateRangeTimePlaceholder,u.readOnly=!0,u.disabled=this._isInteractionBlocked(),u.required=this.hasAttribute("required"),u.autocomplete="off",u.setAttribute("role","combobox"),u.setAttribute("aria-haspopup","dialog"),u.setAttribute("aria-expanded",n?"false":String(this._open)),u.setAttribute("aria-controls",this._panelId),u.setAttribute("aria-invalid",r?"true":"false"),t?u.setAttribute("aria-labelledby",this._labelId):u.removeAttribute("aria-labelledby")),_&&(_.hidden=!(this._clearable()&&l),_.setAttribute("aria-label",o.clearDateRange),_.disabled=this._isInteractionBlocked()),y&&(y.hidden=n,y.setAttribute("aria-label",o.toggleCalendar),y.setAttribute("aria-expanded",n?"false":String(this._open)),y.setAttribute("aria-controls",this._panelId),y.disabled=this._isInteractionBlocked()),v&&(v.id=this._hintId,v.hidden=!e,v.textContent=e),f&&(f.id=this._errorId,f.hidden=!r,f.textContent=r),u){const w=[];e&&v&&!v.hidden&&w.push(this._hintId),r&&w.push(this._errorId),w.length?u.setAttribute("aria-describedby",w.join(" ")):u.removeAttribute("aria-describedby")}C&&(C.disabled=!a,C.name=a,C.value=W(this._value)||"");const I=this.root.querySelector(".field");I&&(I.dataset.open=this._open&&!n?"true":"false",I.dataset.invalid=r?"true":"false",I.dataset.state=d);const c=this.root.querySelector(".inline-panel");if(c){c.hidden=!n,c.id=this._panelId,c.dataset.bare=this._isBare()?"true":"false",c.setAttribute("role","dialog"),c.setAttribute("aria-modal","false"),c.setAttribute("aria-label",t||o.selectDateRange);const w=c.querySelector(".panel-title");w&&(w.textContent=t,w.hidden=!t);const $=c.querySelector(".head-title");$&&($.textContent=t,$.hidden=!t);const q=c.querySelector(".head-meta"),A=this._valueFromPending();q&&(q.textContent=A.start&&A.end?`${this._formatDateTimeDisplay(A.start)} — ${this._formatDateTimeDisplay(A.end)}`:o.selectDateRange);const R=c.querySelector(".drtp-calendar-inline");R&&this._syncCalendar(R);const O=c.querySelector('select[data-time="start"][data-segment="hours"]'),z=c.querySelector('select[data-time="start"][data-segment="minutes"]'),P=c.querySelector('select[data-time="end"][data-segment="hours"]'),B=c.querySelector('select[data-time="end"][data-segment="minutes"]'),L=s.parseTimeInput(this._pending.startTime,!0)||{hours:0,minutes:0,seconds:0},M=s.parseTimeInput(this._pending.endTime,!0)||{hours:0,minutes:0,seconds:0};O&&this._setClosestOptionValue(O,L.hours),z&&this._setClosestOptionValue(z,L.minutes),P&&this._setClosestOptionValue(P,M.hours),B&&this._setClosestOptionValue(B,M.minutes),[O,z,P,B].forEach(k=>{k&&(k.disabled=this._isInteractionBlocked()||this._isReadonly())});const E=c.querySelector('[data-action="preset-today"]');E&&(E.textContent=o.today);const H=c.querySelector('[data-action="preset-last7"]');H&&(H.textContent=o.last7Days);const V=c.querySelector('[data-action="preset-month"]');V&&(V.textContent=o.thisMonth);const F=c.querySelector('[data-action="clear"]');F&&(F.textContent=o.clear);const N=c.querySelector('[data-action="apply"]');N&&(N.textContent=o.apply);const K=c.querySelector(".presets"),U=c.querySelector(".footer"),Z=this._showFooter();K&&(K.hidden=!Z),U&&(U.hidden=!Z),c.querySelectorAll(".action, .preset").forEach(k=>{k.disabled=this._isInteractionBlocked()||this._isReadonly()})}!n&&this._open&&this._syncOverlayState(),n&&this._destroyOverlay()}render(){if(!this._hasView){const t=this._translations();this.setContent(`
         <style>${rt}</style>
         <div class="root">
           <label class="label" part="label" id="${this._labelId}">
@@ -558,7 +574,7 @@
           <div class="field" part="field input">
             <span class="icon" part="icon">${tt}</span>
             <input class="input" id="${this._inputId}" part="input" readonly />
-            <span class="icon" part="icon">${k}</span>
+            <span class="icon" part="icon">${T}</span>
             <button type="button" class="btn" part="clear" data-action="clear">${it}</button>
             <button type="button" class="btn" part="toggle" data-action="toggle">${et}</button>
           </div>