@editora/ui-core 0.1.18 → 0.1.20

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

@@ -1,9 +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 "./scroll-lock-31da444f.mjs";
-import "./positioner-e9770c66.mjs";
+import { E as tt } from "./ElementBase-YlTLMsGk.mjs";
+import { c as et } from "./dismissable-layer-BmPIoK80.mjs";
+import { r as it, c as N } from "./calendar-DLY4acgn.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-y1N2gvG2.mjs";
 let ut = 0;
 const ct = `
   <svg viewBox="0 0 20 20" class="icon-svg" aria-hidden="true" focusable="false">
@@ -324,6 +322,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;
@@ -404,10 +421,9 @@ const ct = `
   }
 `;
 function Y(c) {
-  if (!c)
-    return { start: null, end: null };
+  if (!c) return { start: null, end: null };
   try {
-    const t = JSON.parse(c), e = L((t == null ? void 0 : t.start) || null), i = L((t == null ? void 0 : t.end) || null);
+    const t = JSON.parse(c), e = L(t?.start || null), i = L(t?.end || null);
     return { start: e, end: i };
   } catch {
     return { start: null, end: null };
@@ -424,19 +440,18 @@ function _(c) {
 }
 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);
+  if (!e) return { start: null, end: null };
+  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,15 +622,14 @@ 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);
   }
   _commit(t, e) {
-    if (this._isInteractionBlocked() || this._isReadonly())
-      return;
+    if (this._isInteractionBlocked() || this._isReadonly()) return;
     const i = this._normalizePending(t);
     if (!this._canCommit(i)) {
       this._inlineError = this.getAttribute("error") || this._translations().invalidRange, this._emitInvalid(JSON.stringify(t), "range"), this._updateHostState();
@@ -644,25 +658,20 @@ class yt extends tt {
       }
   }
   _ensureOverlay() {
-    if (this._overlay || typeof document > "u")
-      return;
+    if (this._overlay || typeof document > "u") return;
     const t = document.createElement("div");
     t.className = "ui-date-range-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("select", this._onOverlayCalendarBound), 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 = W());
   }
   _syncOverlayHostZIndex() {
-    if (!this._overlay || typeof window > "u")
-      return;
+    if (!this._overlay || typeof window > "u") return;
     const t = window.getComputedStyle(this).getPropertyValue("--ui-dp-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("select", this._onOverlayCalendarBound), this._overlay.removeEventListener("change", this._onOverlayCalendarBound), this._overlay.parentElement && this._overlay.parentElement.removeChild(this._overlay), this._overlay = null, this._overlayMode = null, this._releaseScrollLock && (this._releaseScrollLock(), this._releaseScrollLock = null));
+    this._dismissableLayer?.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("select", this._onOverlayCalendarBound), this._overlay.removeEventListener("change", this._onOverlayCalendarBound), this._overlay.parentElement && this._overlay.parentElement.removeChild(this._overlay), this._overlay = null, this._overlayMode = 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;
+    if (this._dismissableLayer?.destroy(), this._dismissableLayer = null, !this._open || !this._overlay) return;
     const t = this._overlay.querySelector(".panel, .sheet"), e = this.root.querySelector(".fields");
     t && (this._dismissableLayer = et({
       node: t,
@@ -670,29 +679,27 @@ 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: (i) => i === "escape-key" ? (this._setOpen(!1, "escape"), !1) : (i === "outside-pointer" && this._setOpen(!1, "outside"), !1)
     }));
   }
   _positionOverlay() {
-    if (!this._overlay || !this._open || this._isMobileSheet())
-      return;
+    if (!this._overlay || !this._open || this._isMobileSheet()) return;
     const t = this.root.querySelector(".fields"), e = this._overlay.querySelector(".panel");
-    if (!t || !e)
-      return;
+    if (!t || !e) 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 +718,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,31 +728,29 @@ 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");
     l === "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")), p ? (t.style.setProperty("--ui-calendar-day-height", l === "lg" ? "2.1em" : "1.92em"), t.style.setProperty("--ui-calendar-day-padding-block", "0.08em"), t.style.setProperty("--ui-calendar-day-padding-inline", "0.14em"), t.style.setProperty("--ui-calendar-frame-padding", "0.28em"), t.style.setProperty("--ui-calendar-week-gap", "0.16em"), t.style.setProperty("--ui-calendar-control-height", "1.64em"), t.style.setProperty("--ui-calendar-gap", "0.2em"), t.style.setProperty("--ui-calendar-day-font-size", l === "lg" ? "0.76em" : "0.68em"), t.style.setProperty("--ui-calendar-weekday-font-size", l === "lg" ? "0.66em" : "0.58em"), t.style.setProperty("--ui-calendar-title-font-size", l === "lg" ? "0.84em" : "0.76em")) : (t.style.removeProperty("--ui-calendar-frame-padding"), t.style.removeProperty("--ui-calendar-week-gap"), t.style.removeProperty("--ui-calendar-control-height")), this._isReadonly() ? e("readonly", "") : e("readonly", null), this._isInteractionBlocked() ? e("disabled", "") : e("disabled", null), this._isBare() ? e("bare", "") : e("bare", null), e("tabindex", "-1"), e("aria-label", this.getAttribute("label") || this._translations().selectDateRange);
   }
   _ensureOverlayContent(t) {
-    if (!this._overlay)
-      return;
+    if (!this._overlay) return;
     const e = t ? "sheet" : "popover";
     this._overlayMode === e && this._overlay.querySelector(".drp-calendar") || (this._overlayMode = e, this._overlay.innerHTML = t ? `<div class="sheet-wrap">${this._renderPanelInner(!0)}</div>` : `<div class="overlay">${this._renderPanelInner(!1)}</div>`);
   }
   _syncOverlayState() {
-    if (!this._overlay)
-      return;
+    if (!this._overlay) return;
     this._syncOverlayHostZIndex();
     const t = this._isMobileSheet();
     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;
     }
@@ -794,28 +799,27 @@ 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);
+    if (!this._hasView) return;
+    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"), E = this.root.querySelector(".inline-panel .presets"), q = 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));
-    const E = this._showFooter();
-    q && (q.hidden = !E), R && (R.hidden = !E), G.forEach((X) => {
+    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 R = this._showFooter();
+    E && (E.hidden = !R), q && (q.hidden = !R), 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();
@@ -825,29 +829,27 @@ class yt extends tt {
   }
   _onRootClick(t) {
     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") {
+    if (!e) return;
+    const i = e.closest("[data-action]"), r = 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) {
     const e = t.target;
-    if (!(e instanceof HTMLInputElement) || this._isInteractionBlocked() || this._isReadonly())
-      return;
+    if (!(e instanceof HTMLInputElement) || this._isInteractionBlocked() || this._isReadonly()) return;
     if (this._rangeVariant() === "single-field" && e.classList.contains("single")) {
       this._draftSingle = e.value, this._inlineError = "";
       return;
@@ -856,24 +858,21 @@ 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;
-    if (this._isInteractionBlocked() || this._isReadonly())
-      return;
+    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"));
+    if (!(i instanceof HTMLInputElement)) return;
+    const r = e.relatedTarget;
+    r && this._overlay?.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;
@@ -893,8 +892,7 @@ class yt extends tt {
     }
   }
   _onDocumentPointerDown(t) {
-    if (!this._open || !this._overlay)
-      return;
+    if (!this._open || !this._overlay) return;
     const e = t.composedPath();
     e.includes(this) || e.includes(this._overlay) || this._setOpen(!1, "outside");
   }
@@ -903,48 +901,45 @@ class yt extends tt {
   }
   _onOverlayClick(t) {
     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") {
+    if (!e) return;
+    const r = e.closest("[data-action]")?.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();
       }
     }
   }
   _onOverlayCalendarChange(t) {
-    if (this._isInteractionBlocked() || this._isReadonly())
-      return;
+    if (this._isInteractionBlocked() || this._isReadonly()) return;
     const e = t.target;
-    if (!e || e.tagName.toLowerCase() !== "ui-calendar")
-      return;
+    if (!e || e.tagName.toLowerCase() !== "ui-calendar") return;
     const i = t.detail;
     if (!(!i || i.mode !== "range")) {
       if (this._pending = this._normalizePending({