npm - @featherk/composables - Versions diffs - 0.6.5 → 0.6.7 - Mend

@featherk/composables 0.6.5 → 0.6.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/date/useMaskedDateInput.d.ts +1 -0
package/dist/featherk-composables.es.js +809 -755
package/dist/featherk-composables.umd.js +1 -1
package/dist/index.d.ts +1 -0
package/dist/range/useMaskedDateRangeInput.d.ts +1 -0
package/dist/time/useMaskedTimeInput.d.ts +1 -0
package/dist/useGridA11y.d.ts +3 -1
package/dist/useGridFilter.d.ts +7 -0
package/docs/date/useMaskedDateInput.md +49 -37
package/docs/grid/useGridA11y.md +12 -1
package/docs/range/useMaskedDateRangeInput.md +13 -1
package/docs/time/useMaskedTimeInput.md +41 -27
package/package.json +1 -1

package/dist/featherk-composables.es.js CHANGED Viewed

@@ -1,119 +1,127 @@
-import { ref as _, onBeforeUnmount as Ie, nextTick as N, computed as h, watch as ve, onMounted as xe, readonly as K, getCurrentScope as Le, onScopeDispose as Pe, toValue as ce, unref as Te, shallowRef as Re } from "vue";
+import { ref as _, onBeforeUnmount as Te, nextTick as j, computed as h, watch as ve, onMounted as xe, readonly as N, getCurrentScope as Le, onScopeDispose as Pe, toValue as ce, unref as Fe, shallowRef as Re } from "vue";
 import { useFocusTrap as qe } from "@vueuse/integrations/useFocusTrap";
-const We = (e) => {
-  const t = _(null);
-  let c = !1, P = null, T = null;
-  const V = [], W = ".k-table-row[data-grid-row-index] [tabindex]", k = () => e?.value?.columns, b = (o) => {
-    const m = o.key || o.code;
-    [" ", "Spacebar", "Space", "Enter"].includes(m) && (o.preventDefault(), o.stopPropagation(), t.value = o.target, o.target.click());
-  }, y = (o) => {
-    if (!t.value) return;
+const _e = (e, t) => {
+  const u = _(null);
+  let q = !1, I = null, L = null;
+  const V = [], A = ".k-table-row[data-grid-row-index] [tabindex]", k = () => e?.value?.columns, S = (o) => {
+    const p = o.key || o.code;
+    [" ", "Spacebar", "Space", "Enter"].includes(p) && (o.preventDefault(), o.stopPropagation(), u.value = o.target, o.target.click());
+  }, g = (o) => {
+    if (!u.value) return;
     if (o.code === "Escape") {
-      o.preventDefault(), o.stopPropagation(), t.value && t.value.focus();
+      o.stopPropagation(), u.value && u.value.focus();
       return;
     }
-    const m = Array.from(
+    const p = Array.from(
       document.querySelectorAll(
         ".k-animation-container .k-popup .k-column-menu .k-columnmenu-item-wrapper .k-columnmenu-item"
       )
-    ), l = document.querySelector(".k-filter-menu-container");
+    ), l = document.querySelector(
+      ".k-animation-container .k-popup .k-column-menu .k-filter-menu-container"
+    );
     if (l) {
       if (o.code === "Tab") {
-        const i = [
+        const s = [
           ".k-filter-menu-container .k-dropdownlist[tabindex='0']",
           ".k-filter-menu-container input.k-input-inner:not([tabindex='-1']):not([disabled])",
-          ".k-filter-menu-container button:not([tabindex='-1']):not([disabled])"
-        ], p = Array.from(
-          l.querySelectorAll(i.join(","))
+          ".k-filter-menu-container button:not([tabindex='-1']):not([disabled])",
+          ".k-checkbox"
+        ], v = t?.focusableMenuSelectors ?? s, b = Array.from(
+          l.querySelectorAll(v.join(","))
         );
-        if (p.length === 0) return;
-        const A = p.findIndex(
-          (C) => C === document.activeElement
+        if (b.length === 0) return;
+        const D = b.findIndex(
+          (H) => H === document.activeElement
         );
-        let S;
-        A === -1 ? S = 0 : o.shiftKey ? S = (A - 1 + p.length) % p.length : S = (A + 1) % p.length, o.preventDefault(), o.stopPropagation(), p[S]?.focus();
-        return;
+        let $;
+        D === -1 ? $ = 0 : o.shiftKey ? $ = (D - 1 + b.length) % b.length : $ = (D + 1) % b.length, o.preventDefault(), o.stopPropagation(), b[$]?.focus();
       }
     } else if (o.code === "ArrowUp" || o.code === "ArrowDown") {
       o.preventDefault(), o.stopPropagation();
-      const i = m.findIndex(
-        (A) => A === document.activeElement
+      const s = p.findIndex(
+        (b) => b === document.activeElement
       );
-      let p = i;
-      o.code === "ArrowUp" ? p = i > 0 ? i - 1 : m.length - 1 : o.code === "ArrowDown" && (p = i < m.length - 1 ? i + 1 : 0), m[p]?.focus();
+      let v = s;
+      o.code === "ArrowUp" ? v = s > 0 ? s - 1 : p.length - 1 : o.code === "ArrowDown" && (v = s < p.length - 1 ? s + 1 : 0), p[v]?.focus();
       return;
     }
-    o.code === "Tab" && (o.preventDefault(), o.stopPropagation(), o.shiftKey ? (t.value?.previousElementSibling).focus() : (t.value?.nextElementSibling).focus());
-  }, w = () => {
-    P = new MutationObserver((o) => {
-      o.forEach((m) => {
-        m.addedNodes.forEach((l) => {
+    if (o.code === "Tab") {
+      o.preventDefault(), o.stopPropagation();
+      const s = u.value?.parentElement;
+      (o.shiftKey ? s?.previousElementSibling : s?.nextElementSibling)?.querySelector(
+        "button, [role='button'], .k-link"
+      )?.focus();
+    }
+  }, P = () => {
+    I = new MutationObserver((o) => {
+      o.forEach((p) => {
+        p.addedNodes.forEach((l) => {
           if (l.nodeType === Node.ELEMENT_NODE) {
-            const i = l;
-            if (i.classList.contains("k-animation-container")) {
-              const A = t.value;
-              A && (A.dataset.featherKSortable === "true" || N(() => {
-                i.querySelectorAll(
+            const s = l;
+            if (s.classList.contains("k-animation-container")) {
+              const b = u.value;
+              b && (b.dataset.featherKSortable === "true" || j(() => {
+                s.querySelectorAll(
                   ".k-columnmenu-item-wrapper"
-                ).forEach((G) => {
-                  G.textContent?.toLowerCase().includes("sort") && G.remove();
+                ).forEach((H) => {
+                  H.textContent?.toLowerCase().includes("sort") && H.remove();
                 });
-              })), i.addEventListener(
+              })), s.addEventListener(
                 "keydown",
-                y
-              ), N(() => {
-                const S = () => {
-                  const C = Array.from(
-                    i.querySelectorAll(
+                g
+              ), j(() => {
+                const D = () => {
+                  const $ = Array.from(
+                    s.querySelectorAll(
                       ".k-animation-container .k-popup .k-column-menu .k-columnmenu-item-wrapper .k-columnmenu-item"
                     )
                   );
-                  if (C.length === 1)
-                    C[0].focus(), C[0].click(), S.attempts = 0;
-                  else if (C.length > 1) {
-                    S.attempts = 0;
+                  if ($.length === 1)
+                    $[0].focus(), $[0].click(), D.attempts = 0;
+                  else if ($.length > 1) {
+                    D.attempts = 0;
                     return;
                   } else
-                    S.attempts === void 0 && (S.attempts = 0), S.attempts++ < 3 && setTimeout(S, 200);
+                    D.attempts === void 0 && (D.attempts = 0), D.attempts++ < 3 && setTimeout(D, 200);
                 };
-                S();
+                D();
               });
             }
-            i.querySelectorAll(
+            s.querySelectorAll(
               ".k-animation-container"
-            ).forEach((A) => {
-              A.addEventListener(
+            ).forEach((b) => {
+              b.addEventListener(
                 "keydown",
-                y
+                g
               );
             });
           }
-        }), m.removedNodes.forEach((l) => {
+        }), p.removedNodes.forEach((l) => {
           if (l.nodeType === Node.ELEMENT_NODE) {
-            const i = l;
-            i.classList.contains("k-animation-container") && i.removeEventListener(
+            const s = l;
+            s.classList.contains("k-animation-container") && s.removeEventListener(
               "keydown",
-              y
-            ), i.querySelectorAll(
+              g
+            ), s.querySelectorAll(
               ".k-animation-container"
-            ).forEach((A) => {
-              A.removeEventListener(
+            ).forEach((b) => {
+              b.removeEventListener(
                 "keydown",
-                y
+                g
               );
             });
           }
         });
       });
-    }), P.observe(document.body, {
+    }), I.observe(document.body, {
       childList: !0,
       subtree: !0
     });
-  }, L = (o) => {
+  }, E = (o) => {
     if (!o.type || !o)
       return;
-    const m = o.target;
-    if (m) {
+    const p = o.target;
+    if (p) {
       if (o.code === "Escape") {
         const l = document.activeElement?.closest(".k-table-row[data-grid-row-index]");
         if (l) {
@@ -123,7 +131,7 @@ const We = (e) => {
               e?.value.$el.querySelectorAll(
                 ".k-table-row[data-grid-row-index]"
               )
-            ).forEach((p) => p.setAttribute("tabindex", "-1"));
+            ).forEach((v) => v.setAttribute("tabindex", "-1"));
           } catch {
           }
           l.setAttribute("tabindex", "0"), l.focus();
@@ -138,141 +146,141 @@ const We = (e) => {
         "Enter",
         "Space"
       ].includes(o.code)) {
-        if (o.preventDefault(), m.classList.contains("k-grid-header-menu") && m.classList.contains("k-grid-column-menu")) {
-          t.value = m;
+        if (o.preventDefault(), p.classList.contains("k-grid-header-menu") && p.classList.contains("k-grid-column-menu")) {
+          u.value = p;
           return;
         }
-        const l = m.closest(
+        const l = p.closest(
           ".k-table-row[data-grid-row-index]"
         );
         if (l) {
           if (["ArrowDown", "ArrowUp"].includes(o.code)) {
-            const i = (A, S) => {
-              let C = S === "next" ? A.nextElementSibling : A.previousElementSibling;
-              for (; C; ) {
-                const G = C;
+            const s = (b, D) => {
+              let $ = D === "next" ? b.nextElementSibling : b.previousElementSibling;
+              for (; $; ) {
+                const H = $;
                 try {
-                  if (G.hasAttribute && G.classList.contains("k-table-row"))
-                    return G;
+                  if (H.hasAttribute && H.classList.contains("k-table-row"))
+                    return H;
                 } catch {
                 }
-                C = S === "next" ? C.nextElementSibling : C.previousElementSibling;
+                $ = D === "next" ? $.nextElementSibling : $.previousElementSibling;
               }
               return null;
-            }, p = o.code === "ArrowDown" ? i(l, "next") : i(l, "previous");
-            p && (l.setAttribute("tabindex", "-1"), p.setAttribute("tabindex", "0"), p.focus());
+            }, v = o.code === "ArrowDown" ? s(l, "next") : s(l, "previous");
+            v && (l.setAttribute("tabindex", "-1"), v.setAttribute("tabindex", "0"), v.focus());
             return;
           }
           if (["ArrowLeft", "ArrowRight"].includes(o.code)) {
             o.preventDefault();
-            const i = l.querySelectorAll(
-              W
+            const s = l.querySelectorAll(
+              A
             );
-            if (i.length === 0) return;
-            let p = Array.from(i).findIndex(
-              (A) => A === document.activeElement
+            if (s.length === 0) return;
+            let v = Array.from(s).findIndex(
+              (b) => b === document.activeElement
             );
-            if (p === -1 && document.activeElement === l) {
-              i[0].focus();
+            if (v === -1 && document.activeElement === l) {
+              s[0].focus();
               return;
             }
-            o.code === "ArrowRight" ? p = p === i.length - 1 ? 0 : p + 1 : o.code === "ArrowLeft" && (p = p === i.length - 1 ? p - 1 : i.length - 1), i[p].focus();
+            o.code === "ArrowRight" ? v = v === s.length - 1 ? 0 : v + 1 : o.code === "ArrowLeft" && (v = v === s.length - 1 ? v - 1 : s.length - 1), s[v].focus();
             return;
           }
         }
       }
     }
-  }, D = () => {
-    N(() => {
+  }, C = () => {
+    j(() => {
       const o = e.value.$el.closest(".k-grid");
       o && o.classList.add("fk-grid");
     });
-  }, x = () => {
-    if (!T)
+  }, T = () => {
+    if (!L)
       try {
         const o = () => {
           try {
-            const i = Array.from(
+            const s = Array.from(
               e.value.$el.querySelectorAll(
                 ".k-table-row[data-grid-row-index]"
               )
             );
-            if (!i || i.length === 0 || i.filter(
-              (S) => S.getAttribute("tabindex") === "0"
+            if (!s || s.length === 0 || s.filter(
+              (D) => D.getAttribute("tabindex") === "0"
             ).length === 1) return;
-            const A = i.find(
-              (S) => S === document.activeElement || S.contains(document.activeElement)
+            const b = s.find(
+              (D) => D === document.activeElement || D.contains(document.activeElement)
             );
-            if (i.forEach((S) => S.setAttribute("tabindex", "-1")), A) {
-              A.setAttribute("tabindex", "0");
+            if (s.forEach((D) => D.setAttribute("tabindex", "-1")), b) {
+              b.setAttribute("tabindex", "0");
               return;
             }
-            i[0].setAttribute("tabindex", "0");
-          } catch (i) {
-            console.error("ensureSingleTabindex error:", i);
+            s[0].setAttribute("tabindex", "0");
+          } catch (s) {
+            console.error("ensureSingleTabindex error:", s);
           }
-        }, m = Array.from(
+        }, p = Array.from(
           e.value.$el.querySelectorAll(
             ".k-table-row[data-grid-row-index]"
           )
         );
-        m.length > 0 && m.forEach((i, p) => {
-          i.setAttribute("tabindex", p === 0 ? "0" : "-1");
+        p.length > 0 && p.forEach((s, v) => {
+          s.setAttribute("tabindex", v === 0 ? "0" : "-1");
         });
         const l = e.value.$el.querySelector(".k-table-tbody");
-        l && (T = new MutationObserver(() => {
+        l && (L = new MutationObserver(() => {
           o();
-        }), T.observe(l, { childList: !0, subtree: !0 }));
+        }), L.observe(l, { childList: !0, subtree: !0 }));
       } catch (o) {
         console.error("Error setting up row navigation:", o);
       }
-  }, $ = () => {
-    N(() => {
-      const m = document.querySelectorAll(".k-grid-header .k-grid-header-menu.k-grid-column-menu");
-      m && m.forEach((l) => {
+  }, U = () => {
+    j(() => {
+      const p = document.querySelectorAll(".k-grid-header .k-grid-header-menu.k-grid-column-menu");
+      p && p.forEach((l) => {
         l.setAttribute("role", "button"), l.addEventListener(
           "keydown",
-          b
+          S
         );
-      }), w(), f();
+      }), P(), y();
     });
-  }, R = () => {
-    const m = document.querySelectorAll(".k-grid-header .k-grid-header-menu.k-grid-column-menu");
-    m && m.forEach((l) => {
+  }, f = () => {
+    const p = document.querySelectorAll(".k-grid-header .k-grid-header-menu.k-grid-column-menu");
+    p && p.forEach((l) => {
       l.removeEventListener(
         "keydown",
-        b
+        S
       );
-    }), P && (P.disconnect(), P = null), T && (T.disconnect(), T = null), V.forEach((l) => l()), V.length = 0;
-  }, f = () => {
+    }), I && (I.disconnect(), I = null), L && (L.disconnect(), L = null), V.forEach((l) => l()), V.length = 0;
+  }, y = () => {
     document.querySelectorAll(
       ".k-grid-header .k-table-thead th"
-    ).forEach((l, i) => {
-      const p = l.querySelector(
+    ).forEach((l, s) => {
+      const v = l.querySelector(
         ".k-grid-header-menu.k-grid-column-menu"
       );
-      if (!p) return;
-      const A = k();
-      if (A && A[i]) {
-        const H = A[i].field ?? "";
-        l.setAttribute("data-feather-k-field", H), l.setAttribute(
+      if (!v) return;
+      const b = k();
+      if (b && b[s]) {
+        const F = b[s].field ?? "";
+        l.setAttribute("data-feather-k-field", F), l.setAttribute(
           "data-feather-k-filterable",
-          A[i].filterable === !1 ? "false" : "true"
+          b[s].filterable === !1 ? "false" : "true"
         ), l.setAttribute(
           "data-feather-k-sortable",
-          A[i].sortable === !1 ? "false" : "true"
+          b[s].sortable === !1 ? "false" : "true"
         );
       }
-      const S = l.dataset.featherKFilterable !== "false", C = l.dataset.featherKSortable !== "false";
-      p.setAttribute("tabindex", "-1"), S || C ? l.style.cursor = "pointer" : l.style.cursor = "default", S ? (l.setAttribute("tabindex", "0"), l.setAttribute("role", "button"), l.setAttribute("aria-haspopup", "menu")) : (l.setAttribute("tabindex", "0"), l.setAttribute("role", "columnheader"), l.removeAttribute("aria-haspopup"));
-      const G = (H) => {
-        H.target?.closest(".k-column-resizer") || (t.value = l, p.click());
-      }, oe = (H) => {
-        if (S)
-          t.value = l, H.preventDefault(), H.stopPropagation(), G(H);
-        else if (C) {
-          t.value = l;
-          const J = new KeyboardEvent("keydown", {
+      const D = l.dataset.featherKFilterable !== "false", $ = l.dataset.featherKSortable !== "false";
+      v.setAttribute("tabindex", "-1"), D || $ ? l.style.cursor = "pointer" : l.style.cursor = "default", D ? (l.setAttribute("tabindex", "0"), l.setAttribute("role", "button"), l.setAttribute("aria-haspopup", "menu")) : (l.setAttribute("tabindex", "0"), l.setAttribute("role", "columnheader"), l.removeAttribute("aria-haspopup"));
+      const H = (F) => {
+        F.target?.closest(".k-column-resizer") || (u.value = l, v.click());
+      }, J = (F) => {
+        if (D)
+          u.value = l, F.preventDefault(), F.stopPropagation(), H(F);
+        else if ($) {
+          u.value = l;
+          const ne = new KeyboardEvent("keydown", {
             key: "Enter",
             code: "Enter",
             keyCode: 13,
@@ -280,193 +288,206 @@ const We = (e) => {
             bubbles: !0,
             cancelable: !0
           });
-          l.dispatchEvent(J);
+          l.dispatchEvent(ne);
         }
       };
-      l.addEventListener("click", oe), V.push(() => {
-        l.removeEventListener("click", oe);
+      l.addEventListener("click", J), V.push(() => {
+        l.removeEventListener("click", J);
       });
-      const Q = (H) => {
-        if ((H.code === "Enter" || H.code === "Space") && (S || C)) {
-          if (t.value = l, t.value.focus(), S)
-            H.preventDefault(), H.stopPropagation(), G(H);
-          else if (C) {
-            const J = l.querySelector(".k-link");
-            J && J.click();
+      const oe = (F) => {
+        if ((F.code === "Enter" || F.code === "Space") && (D || $)) {
+          if (u.value = l, u.value.focus(), D)
+            F.preventDefault(), F.stopPropagation(), H(F);
+          else if ($) {
+            const ne = l.querySelector(".k-link");
+            ne && ne.click();
           }
         }
       };
-      l.addEventListener("keydown", Q, !0), V.push(() => {
-        l.removeEventListener("keydown", Q, !0);
+      l.addEventListener("keydown", oe, !0), V.push(() => {
+        l.removeEventListener("keydown", oe, !0);
       });
     });
-    const m = document.querySelector(".k-grid-header .k-table-thead");
-    if (m) {
-      const l = (i) => {
-        const p = i.target.closest("th");
-        p && (i.code === "Enter" || i.code === "Space") && p.dataset.featherKFilterable === "false" && p.dataset.featherKSortable === "false" && (i.preventDefault(), i.stopImmediatePropagation());
+    const p = document.querySelector(".k-grid-header .k-table-thead");
+    if (p) {
+      const l = (s) => {
+        const v = s.target.closest("th");
+        v && (s.code === "Enter" || s.code === "Space") && v.dataset.featherKFilterable === "false" && v.dataset.featherKSortable === "false" && (s.preventDefault(), s.stopImmediatePropagation());
       };
-      m.addEventListener(
+      p.addEventListener(
         "keydown",
         l,
         !0
         // NOTE: capture phase
       ), V.push(() => {
-        m.removeEventListener(
+        p.removeEventListener(
           "keydown",
           l,
           !0
         );
       });
     }
-  }, g = function(o, m) {
-    const l = o?.event.event.target, i = k();
-    if (!l || !i) return;
-    const p = l.classList.contains("k-link"), A = l.classList.contains("k-columnmenu-item"), S = i.find((C) => C.field === o.event.field)?.sortable && !0;
-    if (!p) {
-      if (A && !S) {
+  }, O = function(o, p) {
+    const l = o?.event.event.target, s = k();
+    if (!l || !s) return;
+    const v = l.classList.contains("k-link"), b = l.classList.contains("k-columnmenu-item"), D = s.find(($) => $.field === o.event.field)?.sortable && !0;
+    if (!v) {
+      if (b && !D) {
         (o.event.sort && void 0)?.filter(
-          (G) => G.field !== o.event.field
+          (H) => H.field !== o.event.field
         );
         return;
       }
-      typeof m == "function" && N(() => {
-        t.value && t.value.focus(), m(o);
+      typeof p == "function" && j(() => {
+        u.value && u.value.focus(), p(o);
       });
     }
-  }, F = () => {
-    if (!c)
+  }, G = () => {
+    if (!q)
       try {
-        D(), x(), $(), c = !0;
+        C(), T(), U(), q = !0;
       } catch (o) {
-        console.error("initA11y failed:", o), R();
+        console.error("initA11y failed:", o), f();
       }
   };
-  return Ie(() => {
-    R();
+  return Te(() => {
+    f();
   }), {
-    activeFilterButton: t,
-    handleGridKeyDown: L,
-    handleSortChange: g,
-    initA11y: F
+    activeFilterButton: u,
+    handleGridKeyDown: E,
+    handleSortChange: O,
+    initA11y: G
   };
 };
-function _e(e) {
-  const t = _(""), c = _(void 0), P = _(!!e.debug), T = _(e.dateFormat ?? "mm/dd/yyyy"), V = h(() => !!e.required), W = _(!1), k = ["ArrowUp", "ArrowDown"], b = ["ArrowLeft", "ArrowRight"], y = h(() => (t.value ?? "").replace(/\D/g, "")), w = (a) => a <= 2 ? "mm" : a <= 5 ? "dd" : y.value.length <= 10 ? "yyyy" : "mm", L = h(() => {
+function ze(e) {
+  const t = _(""), u = _(void 0), q = _(!!e.debug), I = _(e.dateFormat ?? "mm/dd/yyyy"), L = h(() => !!e.required), V = _(!1), A = ["ArrowUp", "ArrowDown"], k = ["ArrowLeft", "ArrowRight"], S = h(() => (t.value ?? "").replace(/\D/g, "")), g = (a) => a <= 2 ? "mm" : a <= 5 ? "dd" : S.value.length <= 10 ? "yyyy" : "mm", P = h(() => {
     const a = t.value && t.value.substring(0, 2).replace(/\D/g, "0") || "0";
     return parseInt(a).toString().padStart(2, "0");
-  }), D = h(() => {
+  }), E = h(() => {
     const a = t.value && t.value.substring(3, 5).replace(/\D/g, "0") || "0";
     return parseInt(a).toString().padStart(2, "0");
-  }), x = h(() => {
+  }), C = h(() => {
     const a = t.value && t.value.substring(6, 10).replace(/\D/g, "0") || "0";
     return parseInt(a).toString().padStart(4, "0");
-  }), $ = (a) => {
-    if (y.value.length === 0) {
+  }), T = (a) => {
+    if (S.value.length === 0) {
       e.onChange({ value: null, event: a });
       return;
     }
-    if (y.value.length < 8) {
+    if (S.value.length < 8) {
       e.onChange({ value: null, event: a });
       return;
     }
-    if ((t.value ?? "").length === 10 && y.value.length === 8) {
-      const [d, I, te] = t.value.split("/"), r = parseInt(d), u = parseInt(I), v = parseInt(te);
-      if (o(v, r, u)) {
-        const M = new Date(v, r - 1, u);
-        R(M) ? e.onChange({ value: M, event: a }) : e.onChange({ value: null, event: a });
+    if ((t.value ?? "").length === 10 && S.value.length === 8) {
+      const [d, M, r] = t.value.split("/"), i = parseInt(d), m = parseInt(M), w = parseInt(r);
+      if (G(w, i, m)) {
+        const B = new Date(w, i - 1, m);
+        U(B) ? e.onChange({ value: B, event: a }) : e.onChange({ value: null, event: a });
       } else
         e.onChange({ value: null, event: a });
     }
-  }, R = (a) => {
-    const d = e.min ?? void 0, I = e.max ?? void 0;
-    return !(d && a < d || I && a > I);
+  }, U = (a) => {
+    const d = e.min ?? void 0, M = e.max ?? void 0;
+    return !(d && a < d || M && a > M);
   }, f = h(() => {
-    if ((t.value ?? "").length === 10 && y.value.length === 8) {
-      const [a, d, I] = (t.value ?? "").split("/"), te = parseInt(a), r = parseInt(d), u = parseInt(I);
-      if (o(u, te, r))
-        return new Date(u, te - 1, r);
+    if ((t.value ?? "").length === 10 && S.value.length === 8) {
+      const [a, d, M] = (t.value ?? "").split("/"), r = parseInt(a), i = parseInt(d), m = parseInt(M);
+      if (G(m, r, i))
+        return new Date(m, r - 1, i);
     }
     return null;
-  }), g = h(() => (t.value ?? "").length === 10 && y.value.length === 8), F = (a, d) => new Date(a, d, 0).getDate(), o = (a, d, I) => d >= 1 && d <= 12 && a >= 1900 && I >= 1 && I <= F(a, d), m = (a) => {
+  }), y = h(() => (t.value ?? "").length === 10 && S.value.length === 8), O = (a, d) => new Date(a, d, 0).getDate(), G = (a, d, M) => d >= 1 && d <= 12 && a >= 1900 && M >= 1 && M <= O(a, d), o = (a) => {
     t.value = a.value;
     const d = a.event?.target;
-    c.value = d?.selectionStart ?? 0, $(a);
-  }, l = (a) => {
-    c.value = a.target.selectionStart ?? 0;
-  }, i = (a, d, I) => {
-    const te = d?.selectionStart ?? c.value ?? 0;
-    c.value = te;
-    let r = parseInt(L.value), u = parseInt(D.value), v = parseInt(x.value);
-    if (!(y.value.length >= 8) || !o(v, r, u)) {
-      const z = e.defaultValue ?? /* @__PURE__ */ new Date();
-      r = z.getMonth() + 1, u = z.getDate(), v = z.getFullYear(), t.value = `${String(r).padStart(2, "0")}/${String(u).padStart(
+    u.value = d?.selectionStart ?? 0, T(a);
+  }, p = (a) => {
+    u.value = a.target.selectionStart ?? 0;
+  }, l = (a, d, M) => {
+    const r = d?.selectionStart ?? u.value ?? 0;
+    u.value = r;
+    let i = parseInt(P.value), m = parseInt(E.value), w = parseInt(C.value);
+    if (!(S.value.length >= 8) || !G(w, i, m)) {
+      const K = e.defaultValue ?? /* @__PURE__ */ new Date();
+      i = K.getMonth() + 1, m = K.getDate(), w = K.getFullYear(), t.value = `${String(i).padStart(2, "0")}/${String(m).padStart(
         2,
         "0"
-      )}/${String(v)}`;
-      const O = new Date(v, r - 1, u);
-      e.onChange({ value: R(O) ? O : null, event: I }), N(() => {
-        requestAnimationFrame(() => {
-          const X = document.getElementById(
-            e.id
-          ), Z = c.value ?? 0;
-          X && (X.focus(), X.setSelectionRange(Z, Z));
-        });
-      });
+      )}/${String(w)}`;
+      const X = new Date(w, i - 1, m);
+      e.onChange({ value: U(X) ? X : null, event: M }), $({ useRAF: !0 });
       return;
     }
-    const U = w(te);
-    if (U === "mm")
-      r = a === "ArrowUp" ? r < 12 ? r + 1 : 1 : r > 1 ? r - 1 : 12;
-    else if (U === "dd") {
-      const z = new Date(v, r, 0).getDate();
-      u = a === "ArrowUp" ? u < z ? u + 1 : 1 : u > 1 ? u - 1 : z;
-    } else U === "yyyy" && (v = a === "ArrowUp" ? v + 1 : Math.max(1, v - 1));
-    t.value = `${String(r).padStart(2, "0")}/${String(u).padStart(
+    const Q = g(r);
+    if (Q === "mm")
+      i = a === "ArrowUp" ? i < 12 ? i + 1 : 1 : i > 1 ? i - 1 : 12;
+    else if (Q === "dd") {
+      const K = new Date(w, i, 0).getDate();
+      m = a === "ArrowUp" ? m < K ? m + 1 : 1 : m > 1 ? m - 1 : K;
+    } else Q === "yyyy" && (w = a === "ArrowUp" ? w + 1 : Math.max(1, w - 1));
+    t.value = `${String(i).padStart(2, "0")}/${String(m).padStart(
       2,
       "0"
-    )}/${String(v)}`;
-    const [ae, j, Y] = t.value.split("/"), ie = new Date(
-      parseInt(Y),
-      parseInt(ae) - 1,
-      parseInt(j)
+    )}/${String(w)}`;
+    const [z, W, ie] = t.value.split("/"), le = new Date(
+      parseInt(ie),
+      parseInt(z) - 1,
+      parseInt(W)
     );
-    ie.toString() !== "Invalid Date" && parseInt(Y) >= 1e3 ? e.onChange({
-      value: R(ie) ? ie : null,
-      event: I
-    }) : e.onChange({ value: null, event: I }), N(() => {
-      requestAnimationFrame(() => {
-        const z = document.getElementById(
-          e.id
-        ), O = c.value ?? 0;
-        z && (z.focus(), z.setSelectionRange(O, O));
-      });
-    });
-  }, p = (a) => {
+    le.toString() !== "Invalid Date" && parseInt(ie) >= 1e3 ? e.onChange({
+      value: U(le) ? le : null,
+      event: M
+    }) : e.onChange({ value: null, event: M }), $({ useRAF: !0 });
+  }, s = (a) => {
     if (a.code === "Space" || a.key === " ") {
       e.onShowCalendar(a);
       return;
     }
-    if (k.includes(a.key)) {
+    if (A.includes(a.key)) {
+      if (a.altKey) return;
       a.preventDefault();
       const d = a.target;
-      i(a.key, d, a);
+      l(a.key, d, a);
     }
-  }, A = (a) => {
+  }, v = (a) => {
     a.preventDefault();
     const d = a.deltaY < 0 ? "ArrowUp" : "ArrowDown";
-    i(d, a.target, a);
-  }, S = (a) => {
+    l(d, a.target, a);
+  }, b = (a) => {
     const d = a.target;
-    if (b.includes(a.key)) {
-      c.value = d?.selectionStart ?? 0;
+    if (k.includes(a.key)) {
+      u.value = d?.selectionStart ?? 0;
       return;
     }
-    k.includes(a.key) && (a.preventDefault(), c.value = d?.selectionStart ?? 0);
-  }, C = (a) => {
-    W.value = !0, V.value && !e.defaultValue && e.externalValue && e.externalValue.value === void 0 && y.value.length === 0 && (e.externalValue.value = "");
+    if (A.includes(a.key)) {
+      if (a.altKey) return;
+      a.preventDefault(), u.value = d?.selectionStart ?? 0;
+    }
+  }, D = (a) => {
+    V.value = !0, L.value && !e.defaultValue && e.externalValue && e.externalValue.value === void 0 && S.value.length === 0 && (e.externalValue.value = "");
     const d = a.target;
-    d && (c.value = d.selectionStart ?? 0);
+    d && (u.value = d.selectionStart ?? 0);
+  }, $ = (a) => {
+    const d = () => {
+      const M = document.getElementById(
+        e.id
+      );
+      if (!M) return;
+      const r = a?.pos ?? u.value ?? M.value.length;
+      try {
+        M.focus(), M.setSelectionRange(r, r);
+      } catch {
+      }
+    };
+    j(() => {
+      if (a?.delay && a.delay > 0) {
+        setTimeout(d, a.delay);
+        return;
+      }
+      if (a?.useRAF) {
+        requestAnimationFrame(d);
+        return;
+      }
+      d();
+    });
   };
   e.externalValue && ve(
     e.externalValue,
@@ -474,17 +495,17 @@ function _e(e) {
       if (a) {
         const d = new Date(a);
         if (d.toString() !== "Invalid Date") {
-          const I = (d.getMonth() + 1).toString().padStart(2, "0"), te = d.getDate().toString().padStart(2, "0"), r = d.getFullYear().toString();
-          t.value = `${I}/${te}/${r}`;
+          const M = (d.getMonth() + 1).toString().padStart(2, "0"), r = d.getDate().toString().padStart(2, "0"), i = d.getFullYear().toString();
+          t.value = `${M}/${r}/${i}`, $({ delay: 50 });
           return;
         }
       }
     },
     { immediate: !0 }
   );
-  const G = h(() => [
-    ["Date", `${L.value} / ${D.value} / ${x.value}`],
-    ["Digits only", y.value],
+  const H = h(() => [
+    ["Date", `${P.value} / ${E.value} / ${C.value}`],
+    ["Digits only", S.value],
     [
       "min",
       e.min?.toLocaleDateString("en-US", {
@@ -501,50 +522,50 @@ function _e(e) {
         day: "2-digit"
       }) ?? null
     ]
-  ]), oe = h(() => {
-    if (!V.value) {
-      if (!g.value) return !0;
+  ]), J = h(() => {
+    if (!L.value) {
+      if (!y.value) return !0;
       const d = f.value;
-      return d ? R(d) : !1;
+      return d ? U(d) : !1;
     }
-    if (!W.value) return !0;
+    if (!V.value) return !0;
     const a = f.value;
-    return !g.value || !a ? !1 : R(a);
-  }), Q = h(() => {
-    if (!V.value) {
-      if (!g.value) return;
+    return !y.value || !a ? !1 : U(a);
+  }), oe = h(() => {
+    if (!L.value) {
+      if (!y.value) return;
       const d = f.value;
-      return d ? R(d) ? "valid" : "out-of-bounds" : "invalid-date";
+      return d ? U(d) ? "valid" : "out-of-bounds" : "invalid-date";
     }
-    if (!W.value) return;
-    if (y.value.length === 0 || !g.value)
+    if (!V.value) return;
+    if (S.value.length === 0 || !y.value)
       return "incomplete";
     const a = f.value;
-    return a ? R(a) ? "valid" : "out-of-bounds" : "invalid-date";
-  }), H = h(() => {
-    const a = Q.value;
+    return a ? U(a) ? "valid" : "out-of-bounds" : "invalid-date";
+  }), F = h(() => {
+    const a = oe.value;
     if (!a || a === "valid") return "";
     if (a === "incomplete")
       return "Required";
     if (a === "invalid-date")
-      return `Must be in ${T.value} format.`;
+      return `Must be in ${I.value} format.`;
     const d = e.min ? e.min.toLocaleDateString("en-US", {
       year: "numeric",
       month: "2-digit",
       day: "2-digit"
-    }) : null, I = e.max ? e.max.toLocaleDateString("en-US", {
+    }) : null, M = e.max ? e.max.toLocaleDateString("en-US", {
       year: "numeric",
       month: "2-digit",
       day: "2-digit"
     }) : null;
     if (a === "out-of-bounds") {
-      if (d && I) return `Must be between ${d} and ${I}.`;
+      if (d && M) return `Must be between ${d} and ${M}.`;
       if (d) return `Must be on or after ${d}.`;
-      if (I) return `Must be on or before ${I}.`;
+      if (M) return `Must be on or before ${M}.`;
     }
     return "";
-  }), J = () => {
-    N(() => {
+  }), ne = () => {
+    j(() => {
       const a = document.getElementById(
         e.id
       );
@@ -553,80 +574,86 @@ function _e(e) {
         return;
       }
       const d = a.closest(".k-datepicker");
-      if (d) {
-        const I = d.parentElement;
-        I ? I.classList.add("fk-datepicker") : console.warn(
-          `Parent of .k-datepicker not found for #${e.id} styling.`
-        );
-      } else {
+      if (!d) {
         console.warn(`.k-datepicker parent not found for #${e.id} styling.`);
         return;
       }
+      const M = d.parentElement;
+      if (M) {
+        if (M.classList.contains("fk-datepicker"))
+          return;
+        M.classList.add("fk-datepicker");
+      } else
+        console.warn(
+          `Parent of .k-datepicker not found for #${e.id} styling.`
+        );
     });
   };
   return xe(() => {
-    J();
+    ne();
   }), {
     raw: t,
-    cursorPos: c,
-    debugEnabled: P,
-    debugLines: G,
-    placeholder: T,
-    isValid: oe,
-    reason: K(Q),
-    validationMessage: H,
-    digitsOnly: y,
-    month: K(L),
-    day: K(D),
-    year: K(x),
-    datePart: w,
-    handleChange: m,
-    handleKeyDown: p,
-    handleWheel: A,
-    handleKeyUp: S,
-    handleClick: l,
-    handleBlur: C
+    cursorPos: u,
+    debugEnabled: q,
+    debugLines: H,
+    placeholder: I,
+    isValid: J,
+    reason: N(oe),
+    validationMessage: F,
+    digitsOnly: S,
+    month: N(P),
+    day: N(E),
+    year: N(C),
+    datePart: g,
+    handleChange: o,
+    handleKeyDown: s,
+    handleWheel: v,
+    handleKeyUp: b,
+    handleClick: p,
+    handleBlur: D,
+    // Expose so consumers can re-run styling when needed
+    initStyling: ne
   };
 }
-function Ge(e) {
-  const t = _(""), c = _(void 0), P = _(!!e.debug), T = _(!1), W = 365 * (1440 * 60 * 1e3), k = /* @__PURE__ */ new Date(), b = new Date(k.getTime() - W), y = new Date(k.getTime() + W);
-  e.min = e.min ?? b, e.max = e.max ?? y;
-  const w = h(() => (t.value ?? "").replace(/\D/g, "")), L = (n, s) => new Date(n, s, 0).getDate(), D = (n, s, E) => s >= 1 && s <= 12 && n >= 1e3 && E >= 1 && E <= L(n, s), x = (n) => Date.UTC(n.getFullYear(), n.getMonth(), n.getDate()), $ = (n) => {
+function Xe(e) {
+  const t = _(""), u = _(void 0), q = _(!!e.debug), I = _(!1), V = 365 * (1440 * 60 * 1e3), A = /* @__PURE__ */ new Date(), k = new Date(A.getTime() - V), S = new Date(A.getTime() + V);
+  e.min = e.min ?? k, e.max = e.max ?? S;
+  const g = h(() => (t.value ?? "").replace(/\D/g, "")), P = (n, c) => new Date(n, c, 0).getDate(), E = (n, c, x) => c >= 1 && c <= 12 && n >= 1e3 && x >= 1 && x <= P(n, c), C = (n) => Date.UTC(n.getFullYear(), n.getMonth(), n.getDate()), T = (n) => {
     if (!n) return null;
-    const s = e.min, E = e.max, q = x(n);
-    return q < x(s) || q > x(E) ? null : n;
-  }, R = (n, s) => e.allowReverse ?? !1 ? !0 : n <= s, f = h(() => (t.value?.length ?? 0) >= 23 && w.value.length >= 16), g = (n) => {
-    if ((n ?? "").length < 23 || w.value.length < 16)
+    const c = e.min, x = e.max, R = C(n);
+    return R < C(c) || R > C(x) ? null : n;
+  }, U = (n, c) => e.allowReverse ?? !1 ? !0 : n <= c, f = h(() => (t.value?.length ?? 0) >= 23 && g.value.length >= 16), y = (n) => {
+    if ((n ?? "").length < 23 || g.value.length < 16)
       return { start: null, end: null };
-    const s = n.substring(0, 10), E = n.substring(13, 23), [q, ne, le] = s.split("/").map((se) => parseInt(se || "0", 10)), [ye, de, fe] = E.split("/").map((se) => parseInt(se || "0", 10)), me = new Date(le, q - 1, ne), he = new Date(fe, ye - 1, de), we = D(le, q, ne) && me.toString() !== "Invalid Date", ke = D(fe, ye, de) && he.toString() !== "Invalid Date";
+    const c = n.substring(0, 10), x = n.substring(13, 23), [R, ee, ae] = c.split("/").map((se) => parseInt(se || "0", 10)), [ge, de, fe] = x.split("/").map((se) => parseInt(se || "0", 10)), me = new Date(ae, R - 1, ee), he = new Date(fe, ge - 1, de), we = E(ae, R, ee) && me.toString() !== "Invalid Date", ke = E(fe, ge, de) && he.toString() !== "Invalid Date";
     return { start: we ? me : null, end: ke ? he : null };
-  }, F = e.externalValid ?? _(!0), o = h(() => g(t.value)), m = h(() => {
-    const n = $(o.value.start), s = $(o.value.end);
-    return { start: n, end: s };
-  }), l = h(() => {
+  }, O = e.externalValid ?? _(!0), G = h(() => y(t.value)), o = h(() => {
+    const n = T(G.value.start), c = T(G.value.end);
+    return { start: n, end: c };
+  }), p = h(() => {
     if (!f.value) return;
-    const n = m.value.start, s = m.value.end;
-    if (!n || !s) return;
-    const E = Math.abs(x(s) - x(n));
-    return Math.round(E / 864e5 + 1);
-  }), i = h(() => {
+    const n = o.value.start, c = o.value.end;
+    if (!n || !c) return;
+    const x = Math.abs(C(c) - C(n));
+    return Math.round(x / 864e5 + 1);
+  }), l = h(() => {
     if (!f.value) return !1;
-    const { start: n, end: s } = o.value;
-    if (!n || !s || !m.value.start || !m.value.end) return !1;
-    const E = m.value.start, q = m.value.end;
-    return !(!R(E, q) || typeof e.maxSpanDays == "number" && l.value !== void 0 && l.value > e.maxSpanDays);
-  }), p = h(() => {
-    const { start: n, end: s } = o.value;
+    const { start: n, end: c } = G.value;
+    if (!n || !c || !o.value.start || !o.value.end) return !1;
+    const x = o.value.start, R = o.value.end;
+    return !(!U(x, R) || typeof e.maxSpanDays == "number" && p.value !== void 0 && p.value > e.maxSpanDays);
+  }), s = h(() => {
+    const { start: n, end: c } = G.value;
     if (!f.value) return "incomplete";
-    if (!n || !s) return "invalid-date";
-    if (!m.value.start || !m.value.end) return "out-of-bounds";
-    const E = m.value.start, q = m.value.end;
-    return R(E, q) ? typeof e.maxSpanDays == "number" && l.value !== void 0 && l.value > e.maxSpanDays ? "span-exceeds-limit" : "valid" : "reversed-range";
-  }), A = _(void 0), S = h(() => {
-    if (F.value !== !1) return "";
-    const { min: n, max: s } = e, E = A.value;
-    if (!E) return "";
-    switch (E) {
+    if (!n || !c) return "invalid-date";
+    if (!o.value.start || !o.value.end) return "out-of-bounds";
+    const x = o.value.start, R = o.value.end;
+    return U(x, R) ? typeof e.maxSpanDays == "number" && p.value !== void 0 && p.value > e.maxSpanDays ? "span-exceeds-limit" : "valid" : "reversed-range";
+  }), v = _(void 0), b = h(() => {
+    if (O.value !== !1) return "";
+    const { min: n, max: c } = e, x = v.value;
+    if (!x) return "";
+    switch (x) {
       case "incomplete":
         return "Required";
       case "invalid-date":
@@ -634,90 +661,90 @@ function Ge(e) {
       case "reversed-range":
         return "End Date must be on or after Start Date.";
       case "out-of-bounds":
-        return n && s ? `Dates must be between ${Q(n)} and ${Q(s)}.` : "Dates must be within the allowed range.";
+        return n && c ? `Dates must be between ${J(n)} and ${J(c)}.` : "Dates must be within the allowed range.";
       case "span-exceeds-limit":
         return typeof e.maxSpanDays == "number" ? `Date range exceeds ${e.maxSpanDays} days.` : "Date range exceeds maximum allowed span.";
       case "valid":
       default:
         return "";
     }
-  }), C = ["ArrowUp", "ArrowDown"], G = ["ArrowLeft", "ArrowRight"], oe = (n, s) => String(n).padStart(s, "0"), Q = (n) => `${oe(n.getMonth() + 1, 2)}/${oe(n.getDate(), 2)}/${oe(
+  }), D = ["ArrowUp", "ArrowDown"], $ = ["ArrowLeft", "ArrowRight"], H = (n, c) => String(n).padStart(c, "0"), J = (n) => `${H(n.getMonth() + 1, 2)}/${H(n.getDate(), 2)}/${H(
     n.getFullYear(),
     4
-  )}`, H = (n) => n <= 2 ? { side: "start", part: "mm" } : n <= 5 ? { side: "start", part: (n <= 3, "dd") } : n <= 11 ? { side: "start", part: "yyyy" } : n <= 15 ? { side: "end", part: "mm" } : n <= 18 ? { side: "end", part: "dd" } : { side: "end", part: "yyyy" }, J = (n, s, E) => {
-    const q = s?.selectionStart ?? c.value ?? 0;
-    c.value = q;
-    const { start: ne, end: le } = g(t.value);
-    if (!ne && !le) {
-      const B = /* @__PURE__ */ new Date(), ue = Q(B);
-      t.value = `${ue} - ${ue}`, e.onChange({ value: { start: B, end: B }, event: E }), N(() => {
+  )}`, oe = (n) => n <= 2 ? { side: "start", part: "mm" } : n <= 5 ? { side: "start", part: (n <= 3, "dd") } : n <= 11 ? { side: "start", part: "yyyy" } : n <= 15 ? { side: "end", part: "mm" } : n <= 18 ? { side: "end", part: "dd" } : { side: "end", part: "yyyy" }, F = (n, c, x) => {
+    const R = c?.selectionStart ?? u.value ?? 0;
+    u.value = R;
+    const { start: ee, end: ae } = y(t.value);
+    if (!ee && !ae) {
+      const Y = /* @__PURE__ */ new Date(), ue = J(Y);
+      t.value = `${ue} - ${ue}`, e.onChange({ value: { start: Y, end: Y }, event: x }), j(() => {
         requestAnimationFrame(() => {
-          const ee = document.getElementById(
+          const Z = document.getElementById(
             e.id
-          ), re = c.value ?? 0;
-          ee && (ee.focus(), ee.setSelectionRange(re, re));
+          ), te = u.value ?? 0;
+          Z && (Z.focus(), Z.setSelectionRange(te, te));
         });
       });
       return;
     }
-    const ye = /* @__PURE__ */ new Date(), de = H(q);
-    let fe = ne ? new Date(ne) : new Date(ye), me = le ? new Date(le) : new Date(ye);
-    const he = (B, ue) => {
+    const ge = /* @__PURE__ */ new Date(), de = oe(R);
+    let fe = ee ? new Date(ee) : new Date(ge), me = ae ? new Date(ae) : new Date(ge);
+    const he = (Y, ue) => {
       if (ue === "mm") {
-        const ee = B.getMonth() + 1, re = n === "ArrowUp" ? ee < 12 ? ee + 1 : 1 : ee > 1 ? ee - 1 : 12;
-        B.setMonth(re - 1);
-        const be = L(B.getFullYear(), re);
-        B.getDate() > be && B.setDate(be);
+        const Z = Y.getMonth() + 1, te = n === "ArrowUp" ? Z < 12 ? Z + 1 : 1 : Z > 1 ? Z - 1 : 12;
+        Y.setMonth(te - 1);
+        const Se = P(Y.getFullYear(), te);
+        Y.getDate() > Se && Y.setDate(Se);
       } else if (ue === "dd") {
-        const ee = L(B.getFullYear(), B.getMonth() + 1), re = B.getDate(), be = n === "ArrowUp" ? re < ee ? re + 1 : 1 : re > 1 ? re - 1 : ee;
-        B.setDate(be);
+        const Z = P(Y.getFullYear(), Y.getMonth() + 1), te = Y.getDate(), Se = n === "ArrowUp" ? te < Z ? te + 1 : 1 : te > 1 ? te - 1 : Z;
+        Y.setDate(Se);
       } else if (ue === "yyyy") {
-        const ee = B.getFullYear();
-        B.setFullYear(n === "ArrowUp" ? ee + 1 : Math.max(1, ee - 1));
-        const re = L(B.getFullYear(), B.getMonth() + 1);
-        B.getDate() > re && B.setDate(re);
+        const Z = Y.getFullYear();
+        Y.setFullYear(n === "ArrowUp" ? Z + 1 : Math.max(1, Z - 1));
+        const te = P(Y.getFullYear(), Y.getMonth() + 1);
+        Y.getDate() > te && Y.setDate(te);
       }
     };
     de.side === "start" ? he(fe, de.part) : he(me, de.part);
-    const we = Q(fe), ke = Q(me);
+    const we = J(fe), ke = J(me);
     t.value = `${we} - ${ke}`;
-    const se = $(fe), De = $(me);
-    se && De && R(se, De) ? e.onChange({ value: { start: se, end: De }, event: E }) : e.onChange({ value: null, event: E }), N(() => {
+    const se = T(fe), De = T(me);
+    se && De && U(se, De) ? e.onChange({ value: { start: se, end: De }, event: x }) : e.onChange({ value: null, event: x }), j(() => {
       requestAnimationFrame(() => {
-        const B = document.getElementById(
+        const Y = document.getElementById(
           e.id
-        ), ue = c.value ?? 0;
-        B && (B.focus(), B.setSelectionRange(ue, ue));
+        ), ue = u.value ?? 0;
+        Y && (Y.focus(), Y.setSelectionRange(ue, ue));
       });
     });
-  }, a = (n) => {
-    const { start: s, end: E } = g(t.value);
-    if (!s || !E) {
+  }, ne = (n) => {
+    const { start: c, end: x } = y(t.value);
+    if (!c || !x) {
       e.onChange({ value: null, event: n });
       return;
     }
-    const q = $(s), ne = $(E);
-    if (!q || !ne) {
+    const R = T(c), ee = T(x);
+    if (!R || !ee) {
       e.onChange({ value: null, event: n });
       return;
     }
-    if (!R(q, ne)) {
+    if (!U(R, ee)) {
       e.onChange({ value: null, event: n });
       return;
     }
-    e.onChange({ value: { start: q, end: ne }, event: n });
-  }, d = (n) => {
-    const s = n.value ?? "", E = n.event;
-    if (!s && E && E.type === "click") {
-      U(E);
+    e.onChange({ value: { start: R, end: ee }, event: n });
+  }, a = (n) => {
+    const c = n.value ?? "", x = n.event;
+    if (!c && x && x.type === "click") {
+      B(x);
       return;
     }
-    t.value = s;
-    const q = E?.target;
-    c.value = q?.selectionStart ?? 0, a(n);
-  }, I = (n) => {
-    c.value = n.target.selectionStart ?? 0;
-  }, te = (n) => {
+    t.value = c;
+    const R = x?.target;
+    u.value = R?.selectionStart ?? 0, ne(n);
+  }, d = (n) => {
+    u.value = n.target.selectionStart ?? 0;
+  }, M = (n) => {
     if (n.code === "Space" || n.key === " ") {
       n.preventDefault(), e.onShowCalendar(n);
       return;
@@ -726,63 +753,63 @@ function Ge(e) {
       n.preventDefault(), e.onShowCalendar(n);
       return;
     }
-    if (C.includes(n.key)) {
+    if (D.includes(n.key)) {
       n.preventDefault();
-      const s = n.target;
-      J(n.key, s, n);
+      const c = n.target;
+      F(n.key, c, n);
     }
   }, r = (n) => {
     n.preventDefault();
-    const s = n.deltaY < 0 ? "ArrowUp" : "ArrowDown";
-    J(s, n.target, n);
-  }, u = (n) => {
-    if (G.includes(n.key) || C.includes(n.key)) {
+    const c = n.deltaY < 0 ? "ArrowUp" : "ArrowDown";
+    F(c, n.target, n);
+  }, i = (n) => {
+    if ($.includes(n.key) || D.includes(n.key)) {
       n.preventDefault();
-      const s = n.target;
-      c.value = s?.selectionStart ?? 0;
+      const c = n.target;
+      u.value = c?.selectionStart ?? 0;
     }
-  }, v = () => {
-    A.value = p.value, (e.manageValid ?? !0) && (F.value = i.value);
-  }, M = (n) => {
-    v();
-  }, U = (n) => {
-    console.log("Clear event:", n), t.value = "", c.value = 0, e.onChange({ value: null, event: n }), v(), N(() => {
-      const s = document.getElementById(
+  }, m = () => {
+    v.value = s.value, (e.manageValid ?? !0) && (O.value = l.value);
+  }, w = (n) => {
+    m();
+  }, B = (n) => {
+    console.log("Clear event:", n), t.value = "", u.value = 0, e.onChange({ value: null, event: n }), m(), j(() => {
+      const c = document.getElementById(
         e.id
       );
-      s && (s.focus(), s.setSelectionRange(0, 0));
+      c && (c.focus(), c.setSelectionRange(0, 0));
     });
   };
   e.externalValue && ve(
     e.externalValue,
     (n) => {
-      const s = n?.start ?? null, E = n?.end ?? null;
-      if (s && E) {
-        if (t.value = `${Q(s)} - ${Q(E)}`, e.isOpen?.value && T.value && e.onRequestClose) {
-          const q = typeof e.closeDelay == "number" ? e.closeDelay : e.closeDelay?.value ?? 0;
+      const c = n?.start ?? null, x = n?.end ?? null;
+      if (c && x) {
+        if (t.value = `${J(c)} - ${J(x)}`, e.isOpen?.value && I.value && e.onRequestClose) {
+          const R = typeof e.closeDelay == "number" ? e.closeDelay : e.closeDelay?.value ?? 0;
           setTimeout(() => {
-            e.onRequestClose?.(), T.value = !1, v();
-          }, q);
+            e.onRequestClose?.(), I.value = !1, m();
+          }, R);
         }
         return;
       }
     },
     { immediate: !0 }
   );
-  const ae = h(
+  const Q = h(
     () => t.value && t.value.substring(0, 2).replace(/\D/g, "0") || "0"
-  ), j = h(
+  ), z = h(
     () => t.value && t.value.substring(3, 5).replace(/\D/g, "0") || "0"
-  ), Y = h(
+  ), W = h(
     () => t.value && t.value.substring(6, 10).replace(/\D/g, "0") || "0"
   ), ie = h(
     () => t.value && t.value.substring(13, 15).replace(/\D/g, "0") || "0"
-  ), z = h(
+  ), le = h(
     () => t.value && t.value.substring(16, 18).replace(/\D/g, "0") || "0"
-  ), O = h(
+  ), K = h(
     () => t.value && t.value.substring(19, 23).replace(/\D/g, "0") || "0"
   ), X = h(() => {
-    const { start: n, end: s } = g(t.value);
+    const { start: n, end: c } = y(t.value);
     return [
       {
         label: "Raw",
@@ -798,70 +825,74 @@ function Ge(e) {
       },
       {
         label: "Start",
-        value: `${String(ae.value).padStart(2, "0")} / ${String(
-          j.value
-        ).padStart(2, "0")} / ${String(Y.value).padStart(4, "0")}`
+        value: `${String(Q.value).padStart(2, "0")} / ${String(
+          z.value
+        ).padStart(2, "0")} / ${String(W.value).padStart(4, "0")}`
       },
       {
         label: "End",
         value: `${String(ie.value).padStart(2, "0")} / ${String(
-          z.value
-        ).padStart(2, "0")} / ${String(O.value).padStart(4, "0")}`
+          le.value
+        ).padStart(2, "0")} / ${String(K.value).padStart(4, "0")}`
       },
-      { label: "Digits only", value: w.value },
+      { label: "Digits only", value: g.value },
       { label: "Mask complete", value: `${f.value}` },
       {
         label: "Parsed",
-        value: `${n ? n.toDateString() : "-"} | ${s ? s.toDateString() : "-"}`
+        value: `${n ? n.toDateString() : "-"} | ${c ? c.toDateString() : "-"}`
       },
       {
         label: "Valid (managed)",
-        value: `${F.value ?? "-"}`
+        value: `${O.value ?? "-"}`
       },
-      { label: "Span (days)", value: `${l.value ?? "-"}` },
+      { label: "Span (days)", value: `${p.value ?? "-"}` },
       {
         label: "Reason",
-        value: `${p.value ?? "-"}`
+        value: `${s.value ?? "-"}`
       },
       {
         label: "Cursor in",
-        value: `${c.value ?? "-"} (${(() => {
-          const E = c.value ?? 0, q = H(E);
-          return `${q.side}.${q.part}`;
+        value: `${u.value ?? "-"} (${(() => {
+          const x = u.value ?? 0, R = oe(x);
+          return `${R.side}.${R.part}`;
         })()})`
       }
     ];
-  }), Z = () => {
-    N(() => {
+  }), re = () => {
+    j(() => {
       const n = document.getElementById(e.id);
       if (!n) {
         console.warn(`#${e.id} not found for styling.`);
         return;
       }
-      const s = n.closest("div");
-      s ? s.classList.add("fk-daterangepicker") : console.warn(`Parent div of #${e.id} not found for styling.`);
+      const c = n.closest("div");
+      if (!c) {
+        console.warn(`Parent div of #${e.id} not found for styling.`);
+        return;
+      }
+      c.classList.contains("fk-daterangepicker") || c.classList.add("fk-daterangepicker");
     });
   };
   xe(() => {
-    Z();
+    re();
   });
-  const ge = () => {
-    N(() => {
+  const ye = () => {
+    j(() => {
       try {
         const n = Array.from(
           document.querySelectorAll(".k-animation-container")
         );
         if (!n.length) return;
-        const E = [...n].reverse().find((le) => le.querySelector(".k-calendar"))?.querySelector(
+        const x = [...n].reverse().find((ae) => ae.querySelector(".k-calendar"))?.querySelector(
           ".k-calendar"
         );
-        if (!E) return;
-        const q = E.querySelectorAll(
+        if (!x) return;
+        const R = x.querySelectorAll(
           ".k-calendar-table"
         );
-        let ne = !1;
-        q.forEach((le) => {
-          le.tabIndex === 0 && (ne ? le.tabIndex = -1 : ne = !0);
+        let ee = !1;
+        R.forEach((ae) => {
+          ae.tabIndex === 0 && (ee ? ae.tabIndex = -1 : ee = !0);
         });
       } catch (n) {
         console.warn(n);
@@ -871,224 +902,225 @@ function Ge(e) {
   return e.isOpen && ve(
     e.isOpen,
     (n) => {
-      n && setTimeout(() => ge(), 0);
+      n && setTimeout(() => ye(), 0);
     },
     { immediate: !1 }
   ), {
     raw: t,
-    cursorPos: c,
-    debugEnabled: P,
+    cursorPos: u,
+    debugEnabled: q,
     debugLines: X,
-    digitsOnly: w,
-    valid: F,
-    validComputed: K(i),
-    reason: K(p),
-    validationMessage: K(S),
-    spanDays: K(l),
-    month1: K(ae),
-    day1: K(j),
-    year1: K(Y),
-    month2: K(ie),
-    day2: K(z),
-    year2: K(O),
-    handleChange: d,
-    handleKeyDown: te,
+    digitsOnly: g,
+    valid: O,
+    validComputed: N(l),
+    reason: N(s),
+    validationMessage: N(b),
+    spanDays: N(p),
+    month1: N(Q),
+    day1: N(z),
+    year1: N(W),
+    month2: N(ie),
+    day2: N(le),
+    year2: N(K),
+    handleChange: a,
+    handleKeyDown: M,
     handleWheel: r,
-    handleKeyUp: u,
-    handleClick: I,
-    handleBlur: M,
-    handleClear: U,
+    handleKeyUp: i,
+    handleClick: d,
+    handleBlur: w,
+    handleClear: B,
     onCalendarChange: () => {
-      T.value = !0;
-    }
+      I.value = !0;
+    },
+    initStyling: re
   };
 }
-function je(e) {
-  const t = _(""), c = _(void 0), P = _(!!e.debug), T = _(e.timeFormat ?? "hh:mm AM"), V = h(() => !!e.required), W = _(!1), k = ["ArrowUp", "ArrowDown"], b = ["ArrowLeft", "ArrowRight"], y = h(() => (t.value ?? "").replace(/\D/g, "")), w = {
+function Je(e) {
+  const t = _(""), u = _(void 0), q = _(!!e.debug), I = _(e.timeFormat ?? "hh:mm AM"), L = h(() => !!e.required), V = _(!1), A = ["ArrowUp", "ArrowDown"], k = ["ArrowLeft", "ArrowRight"], S = h(() => (t.value ?? "").replace(/\D/g, "")), g = {
     H: /[0-9]/,
     h: /[0-9]/,
     M: /[0-9]/,
     m: /[0-9]/,
     A: /[AaPp]/,
     a: /[Mm]/
-  }, L = (r) => r <= 2 ? "hh" : r <= 5 ? "mm" : "ampm", D = h(() => {
-    const r = t.value && t.value.substring(0, 2).replace(/\D/g, "0") || "0", u = parseInt(r);
-    return Math.min(Math.max(u, 0), 23);
-  }), x = h(() => {
-    const r = t.value && t.value.substring(3, 5).replace(/\D/g, "0") || "0", u = parseInt(r);
-    return Math.min(Math.max(u, 0), 59);
-  }), $ = h(() => (t.value?.substring(6, 8) || "AM").toUpperCase().startsWith("P") ? "PM" : "AM"), R = h(() => {
-    const r = parseInt(t.value?.substring(0, 2).replace(/\D/g, "0") || "0"), u = $.value;
-    return r === 12 ? u === "AM" ? 0 : 12 : u === "PM" ? r + 12 : r;
-  }), f = h(() => g.value ? `${String(R.value).padStart(2, "0")}:${String(x.value).padStart(2, "0")}:00` : null), g = h(
+  }, P = (r) => r <= 2 ? "hh" : r <= 5 ? "mm" : "ampm", E = h(() => {
+    const r = t.value && t.value.substring(0, 2).replace(/\D/g, "0") || "0", i = parseInt(r);
+    return Math.min(Math.max(i, 0), 23);
+  }), C = h(() => {
+    const r = t.value && t.value.substring(3, 5).replace(/\D/g, "0") || "0", i = parseInt(r);
+    return Math.min(Math.max(i, 0), 59);
+  }), T = h(() => (t.value?.substring(6, 8) || "AM").toUpperCase().startsWith("P") ? "PM" : "AM"), U = h(() => {
+    const r = parseInt(t.value?.substring(0, 2).replace(/\D/g, "0") || "0"), i = T.value;
+    return r === 12 ? i === "AM" ? 0 : 12 : i === "PM" ? r + 12 : r;
+  }), f = h(() => y.value ? `${String(U.value).padStart(2, "0")}:${String(C.value).padStart(2, "0")}:00` : null), y = h(
     () => /^(\d{2}):(\d{2})\s([AP]M)$/i.test(t.value ?? "")
-  ), F = (r, u, v) => {
-    let M = r % 12;
-    return M === 0 && (M = 12), `${String(M).padStart(2, "0")}:${String(u).padStart(
+  ), O = (r, i, m) => {
+    let w = r % 12;
+    return w === 0 && (w = 12), `${String(w).padStart(2, "0")}:${String(i).padStart(
       2,
       "0"
-    )} ${v}`;
+    )} ${m}`;
+  }, G = (r) => {
+    const i = r.match(/^(\d{2}):(\d{2})\s([AP]M)$/i);
+    if (!i) return null;
+    const m = parseInt(i[1]), w = parseInt(i[2]), B = i[3].toUpperCase();
+    if (m < 1 || m > 12 || w < 0 || w > 59) return null;
+    let Q = m % 12;
+    B === "PM" && (Q += 12);
+    const z = /* @__PURE__ */ new Date();
+    return z.setSeconds(0, 0), z.setHours(Q), z.setMinutes(w), z;
   }, o = (r) => {
-    const u = r.match(/^(\d{2}):(\d{2})\s([AP]M)$/i);
-    if (!u) return null;
-    const v = parseInt(u[1]), M = parseInt(u[2]), U = u[3].toUpperCase();
-    if (v < 1 || v > 12 || M < 0 || M > 59) return null;
-    let ae = v % 12;
-    U === "PM" && (ae += 12);
-    const j = /* @__PURE__ */ new Date();
-    return j.setSeconds(0, 0), j.setHours(ae), j.setMinutes(M), j;
-  }, m = (r) => {
-    if (y.value.length === 0) {
+    if (S.value.length === 0) {
       e.onChange({ value: null, event: r });
       return;
     }
-    if (!g.value) {
+    if (!y.value) {
       e.onChange({ value: null, event: r });
       return;
     }
-    const u = o(t.value);
-    u && i(u) ? e.onChange({ value: u, event: r }) : e.onChange({ value: null, event: r });
-  }, l = (r) => r.getHours() * 60 + r.getMinutes(), i = (r) => {
-    const u = e.min ?? void 0, v = e.max ?? void 0, M = l(r);
-    if (u) {
-      const U = l(u);
-      if (M < U) return !1;
+    const i = G(t.value);
+    i && l(i) ? e.onChange({ value: i, event: r }) : e.onChange({ value: null, event: r });
+  }, p = (r) => r.getHours() * 60 + r.getMinutes(), l = (r) => {
+    const i = e.min ?? void 0, m = e.max ?? void 0, w = p(r);
+    if (i) {
+      const B = p(i);
+      if (w < B) return !1;
     }
-    if (v) {
-      const U = l(v);
-      if (M > U) return !1;
+    if (m) {
+      const B = p(m);
+      if (w > B) return !1;
     }
     return !0;
-  }, p = (r) => {
+  }, s = (r) => {
     t.value = r.value;
-    const u = r.event?.target;
-    c.value = u?.selectionStart ?? 0;
+    const i = r.event?.target;
+    u.value = i?.selectionStart ?? 0;
     try {
-      const v = c.value ?? 0;
-      if (L(v) === "ampm" && (t.value ?? "").length >= 8) {
-        const M = t.value.charAt(6);
-        /[Aa]/.test(M) ? (t.value = `${t.value.slice(0, 6)}AM${t.value.slice(8)}`, N(() => {
+      const m = u.value ?? 0;
+      if (P(m) === "ampm" && (t.value ?? "").length >= 8) {
+        const w = t.value.charAt(6);
+        /[Aa]/.test(w) ? (t.value = `${t.value.slice(0, 6)}AM${t.value.slice(8)}`, j(() => {
           requestAnimationFrame(() => {
-            const U = document.getElementById(
+            const B = document.getElementById(
               e.id
             );
-            U && (U.focus(), U.setSelectionRange(8, 8));
+            B && (B.focus(), B.setSelectionRange(8, 8));
           });
-        })) : /[Pp]/.test(M) && (t.value = `${t.value.slice(0, 6)}PM${t.value.slice(8)}`, N(() => {
+        })) : /[Pp]/.test(w) && (t.value = `${t.value.slice(0, 6)}PM${t.value.slice(8)}`, j(() => {
           requestAnimationFrame(() => {
-            const U = document.getElementById(
+            const B = document.getElementById(
               e.id
             );
-            U && (U.focus(), U.setSelectionRange(8, 8));
+            B && (B.focus(), B.setSelectionRange(8, 8));
           });
         }));
       }
     } catch {
     }
-    m(r);
-  }, A = (r) => {
-    c.value = r.target.selectionStart ?? 0;
-  }, S = (r, u, v) => {
-    const M = u?.selectionStart ?? c.value ?? 0;
-    c.value = M;
-    const U = L(M), ae = (t.value ?? "").match(/^(\d{2}):(\d{2})\s([AP]M)$/i);
-    if (!ae) {
-      if ((t.value ?? "").length === 0 || y.value.length === 0) {
-        const O = /* @__PURE__ */ new Date(), X = O.getHours(), Z = X >= 12 ? "PM" : "AM";
-        t.value = F(X, O.getMinutes(), Z);
-        const ge = o(t.value);
-        ge && i(ge) ? e.onChange({ value: ge, event: v }) : e.onChange({ value: null, event: v }), N(() => {
+    o(r);
+  }, v = (r) => {
+    u.value = r.target.selectionStart ?? 0;
+  }, b = (r, i, m) => {
+    const w = i?.selectionStart ?? u.value ?? 0;
+    u.value = w;
+    const B = P(w), Q = (t.value ?? "").match(/^(\d{2}):(\d{2})\s([AP]M)$/i);
+    if (!Q) {
+      if ((t.value ?? "").length === 0 || S.value.length === 0) {
+        const K = /* @__PURE__ */ new Date(), X = K.getHours(), re = X >= 12 ? "PM" : "AM";
+        t.value = O(X, K.getMinutes(), re);
+        const ye = G(t.value);
+        ye && l(ye) ? e.onChange({ value: ye, event: m }) : e.onChange({ value: null, event: m }), j(() => {
           requestAnimationFrame(() => {
             const n = document.getElementById(
               e.id
-            ), s = c.value ?? 0;
-            n && (n.focus(), n.setSelectionRange(s, s));
+            ), c = u.value ?? 0;
+            n && (n.focus(), n.setSelectionRange(c, c));
           });
         });
       }
       return;
     }
-    let j = parseInt(ae[1]), Y = parseInt(ae[2]), ie = ae[3].toUpperCase();
-    if (U === "hh")
-      r === "ArrowUp" ? j = j < 12 ? j + 1 : 1 : j = j > 1 ? j - 1 : 12;
-    else if (U === "mm") {
-      const O = e.minuteStepRef?.value ?? e.minuteStep ?? 1;
-      if (O === 1)
-        r === "ArrowUp" ? Y = Y < 59 ? Y + 1 : 0 : Y = Y > 0 ? Y - 1 : 59;
+    let z = parseInt(Q[1]), W = parseInt(Q[2]), ie = Q[3].toUpperCase();
+    if (B === "hh")
+      r === "ArrowUp" ? z = z < 12 ? z + 1 : 1 : z = z > 1 ? z - 1 : 12;
+    else if (B === "mm") {
+      const K = e.minuteStepRef?.value ?? e.minuteStep ?? 1;
+      if (K === 1)
+        r === "ArrowUp" ? W = W < 59 ? W + 1 : 0 : W = W > 0 ? W - 1 : 59;
       else if (r === "ArrowUp") {
-        const X = Y % O;
-        let Z = X === 0 ? Y + O : Y + (O - X);
-        Z >= 60 && (Z = 0), Y = Z;
+        const X = W % K;
+        let re = X === 0 ? W + K : W + (K - X);
+        re >= 60 && (re = 0), W = re;
       } else {
-        const X = Y % O;
-        let Z = X === 0 ? Y - O : Y - X;
-        Z < 0 && (Z = 60 - O), Y = Z;
+        const X = W % K;
+        let re = X === 0 ? W - K : W - X;
+        re < 0 && (re = 60 - K), W = re;
       }
-    } else U === "ampm" && (ie = ie === "AM" ? "PM" : "AM");
-    t.value = `${String(j).padStart(2, "0")}:${String(Y).padStart(
+    } else B === "ampm" && (ie = ie === "AM" ? "PM" : "AM");
+    t.value = `${String(z).padStart(2, "0")}:${String(W).padStart(
       2,
       "0"
     )} ${ie}`;
-    const z = o(t.value);
-    z && i(z) ? e.onChange({ value: z, event: v }) : e.onChange({ value: null, event: v }), N(() => {
+    const le = G(t.value);
+    le && l(le) ? e.onChange({ value: le, event: m }) : e.onChange({ value: null, event: m }), j(() => {
       requestAnimationFrame(() => {
-        const O = document.getElementById(
+        const K = document.getElementById(
           e.id
-        ), X = c.value ?? 0;
-        O && (O.focus(), O.setSelectionRange(X, X));
+        ), X = u.value ?? 0;
+        K && (K.focus(), K.setSelectionRange(X, X));
       });
     });
-  }, C = (r) => {
+  }, D = (r) => {
     if (r.code === "Space" || r.key === " ") {
       e.onShowPicker(r);
       return;
     }
-    if (k.includes(r.key)) {
+    if (A.includes(r.key)) {
       r.preventDefault();
-      const u = r.target;
-      S(r.key, u, r);
+      const i = r.target;
+      b(r.key, i, r);
     }
-  }, G = (r) => {
+  }, $ = (r) => {
     r.preventDefault();
-    const u = r.deltaY < 0 ? "ArrowUp" : "ArrowDown";
-    S(u, r.target, r);
-  }, oe = (r) => {
-    const u = r.target;
-    if (b.includes(r.key)) {
-      c.value = u?.selectionStart ?? 0;
+    const i = r.deltaY < 0 ? "ArrowUp" : "ArrowDown";
+    b(i, r.target, r);
+  }, H = (r) => {
+    const i = r.target;
+    if (k.includes(r.key)) {
+      u.value = i?.selectionStart ?? 0;
       return;
     }
-    k.includes(r.key) && (r.preventDefault(), c.value = u?.selectionStart ?? 0);
-  }, Q = (r) => {
-    W.value = !0, V.value && e.externalValue && e.externalValue.value === void 0 && y.value.length === 0 && (e.externalValue.value = "");
-    const u = r.target;
-    u && (c.value = u.selectionStart ?? 0);
+    A.includes(r.key) && (r.preventDefault(), u.value = i?.selectionStart ?? 0);
+  }, J = (r) => {
+    V.value = !0, L.value && e.externalValue && e.externalValue.value === void 0 && S.value.length === 0 && (e.externalValue.value = "");
+    const i = r.target;
+    i && (u.value = i.selectionStart ?? 0);
   };
   e.externalValue && ve(
     e.externalValue,
     (r) => {
       if (r) {
-        const u = new Date(r);
-        if (u.toString() !== "Invalid Date") {
-          const v = u.getHours(), M = v >= 12 ? "PM" : "AM";
-          t.value = F(v, u.getMinutes(), M);
+        const i = new Date(r);
+        if (i.toString() !== "Invalid Date") {
+          const m = i.getHours(), w = m >= 12 ? "PM" : "AM";
+          t.value = O(m, i.getMinutes(), w);
           return;
         }
       }
     },
     { immediate: !0 }
   );
-  const H = h(() => [
+  const oe = h(() => [
     ["Time", t.value || "--:-- --"],
-    ["Hour (12h)", D.value],
-    ["Hour (24h)", R.value],
-    ["Minute", x.value],
-    ["Period", $.value],
+    ["Hour (12h)", E.value],
+    ["Hour (24h)", U.value],
+    ["Minute", C.value],
+    ["Period", T.value],
     ["Time (24h)", f.value ?? "--:--:--"],
-    ["Digits only", y.value],
+    ["Digits only", S.value],
     [
       "Parsed Date",
-      J.value?.toLocaleDateString("en-US", {
+      F.value?.toLocaleDateString("en-US", {
         hour: "2-digit",
         minute: "2-digit"
       }) ?? null
@@ -1107,303 +1139,325 @@ function je(e) {
         minute: "2-digit"
       }) ?? null
     ],
-    ["valid", a.value],
-    ["reason", d.value],
-    ["validationMessage", I.value]
-  ]), J = h(
-    () => o(t.value) ?? null
-  ), a = h(() => {
-    if (!V.value) {
-      if (!g.value) return !0;
-      const u = J.value;
-      return u ? i(u) : !1;
+    ["valid", ne.value],
+    ["reason", a.value],
+    ["validationMessage", d.value]
+  ]), F = h(
+    () => G(t.value) ?? null
+  ), ne = h(() => {
+    if (!L.value) {
+      if (!y.value) return !0;
+      const i = F.value;
+      return i ? l(i) : !1;
     }
-    if (!W.value) return !0;
-    const r = J.value;
-    return !g.value || !r ? !1 : i(r);
-  }), d = h(() => {
-    if (!V.value) {
-      if (!g.value) return;
-      const u = J.value;
-      return u ? i(u) ? "valid" : "out-of-bounds" : "invalid-time";
+    if (!V.value) return !0;
+    const r = F.value;
+    return !y.value || !r ? !1 : l(r);
+  }), a = h(() => {
+    if (!L.value) {
+      if (!y.value) return;
+      const i = F.value;
+      return i ? l(i) ? "valid" : "out-of-bounds" : "invalid-time";
     }
-    if (!W.value) return;
-    if (y.value.length === 0 || !g.value)
+    if (!V.value) return;
+    if (S.value.length === 0 || !y.value)
       return "incomplete";
-    const r = J.value;
-    return r ? i(r) ? "valid" : "out-of-bounds" : "invalid-time";
-  }), I = h(() => {
-    const r = d.value;
+    const r = F.value;
+    return r ? l(r) ? "valid" : "out-of-bounds" : "invalid-time";
+  }), d = h(() => {
+    const r = a.value;
     if (!r || r === "valid") return "";
     if (r === "incomplete")
       return "Required";
     if (r === "invalid-time")
-      return `Must be in ${T.value} format.`;
-    const u = {
+      return `Must be in ${I.value} format.`;
+    const i = {
       hour: "2-digit",
       minute: "2-digit"
-    }, v = e.min ? e.min.toLocaleTimeString("en-US", u) : null, M = e.max ? e.max.toLocaleTimeString("en-US", u) : null;
+    }, m = e.min ? e.min.toLocaleTimeString("en-US", i) : null, w = e.max ? e.max.toLocaleTimeString("en-US", i) : null;
     if (r === "out-of-bounds") {
-      if (v && M) return `Must be between ${v} and ${M}.`;
-      if (v) return `Must be ${v} or later.`;
-      if (M) return `Must be ${M} or earlier.`;
+      if (m && w) return `Must be between ${m} and ${w}.`;
+      if (m) return `Must be ${m} or later.`;
+      if (w) return `Must be ${w} or earlier.`;
     }
     return "";
-  }), te = () => {
-    N(() => {
+  }), M = () => {
+    j(() => {
       const r = document.getElementById(e.id);
       if (!r) {
         console.warn(`#${e.id} not found for styling.`);
         return;
       }
-      const u = r.closest(".k-timepicker");
-      if (!u)
+      const i = r.closest(".k-timepicker");
+      if (!i) {
         console.warn(
           `.k-timepicker parent of #${e.id} not found for styling.`
         );
-      else {
-        const v = u.parentElement;
-        v ? v.classList.add("fk-timepicker") : console.warn(
+        return;
+      }
+      const m = i.parentElement;
+      if (!m) {
+        console.warn(
           `Parent of .k-timepicker not found for #${e.id} styling.`
         );
+        return;
       }
+      m.classList.contains("fk-timepicker") || m.classList.add("fk-timepicker");
     });
   };
   return xe(() => {
-    te();
+    M();
   }), {
     raw: t,
-    rules: w,
-    debugEnabled: P,
-    debugLines: H,
-    placeholder: T,
-    isValid: a,
-    reason: K(d),
-    validationMessage: I,
-    isComplete: g,
-    inRangeTime: i,
-    cursorPos: c,
-    hour: K(D),
-    hour24: K(R),
-    minute: K(x),
-    period: K($),
-    time24: K(f),
-    parsedRawTime: K(J),
-    handleChange: p,
-    handleKeyDown: C,
-    handleKeyUp: oe,
-    handleClick: A,
-    handleWheel: G,
-    handleBlur: Q
+    rules: g,
+    debugEnabled: q,
+    debugLines: oe,
+    placeholder: I,
+    isValid: ne,
+    reason: N(a),
+    validationMessage: d,
+    isComplete: y,
+    inRangeTime: l,
+    cursorPos: u,
+    hour: N(E),
+    hour24: N(U),
+    minute: N(C),
+    period: N(T),
+    time24: N(f),
+    parsedRawTime: N(F),
+    handleChange: s,
+    handleKeyDown: D,
+    handleKeyUp: H,
+    handleClick: v,
+    handleWheel: $,
+    handleBlur: J,
+    // Expose so consumers can reapply theming when Kendo updates DOM
+    initStyling: M
   };
 }
-function Fe(e) {
+function Ue(e) {
   return Le() ? (Pe(e), !0) : !1;
 }
-const $e = typeof window < "u" && typeof document < "u";
+const Ce = typeof window < "u" && typeof document < "u";
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const Ue = Object.prototype.toString, Oe = (e) => Ue.call(e) === "[object Object]", pe = () => {
-}, Be = /* @__PURE__ */ Ke();
-function Ke() {
+const Oe = Object.prototype.toString, Be = (e) => Oe.call(e) === "[object Object]", pe = () => {
+}, Ke = /* @__PURE__ */ Ve();
+function Ve() {
   var e, t;
-  return $e && ((e = window?.navigator) == null ? void 0 : e.userAgent) && (/iP(?:ad|hone|od)/.test(window.navigator.userAgent) || ((t = window?.navigator) == null ? void 0 : t.maxTouchPoints) > 2 && /iPad|Macintosh/.test(window?.navigator.userAgent));
+  return Ce && ((e = window?.navigator) == null ? void 0 : e.userAgent) && (/iP(?:ad|hone|od)/.test(window.navigator.userAgent) || ((t = window?.navigator) == null ? void 0 : t.maxTouchPoints) > 2 && /iPad|Macintosh/.test(window?.navigator.userAgent));
 }
 function Ae(e) {
   return Array.isArray(e) ? e : [e];
 }
-function Ve(e, t, c) {
+function Ye(e, t, u) {
   return ve(
     e,
     t,
     {
-      ...c,
+      ...u,
       immediate: !0
     }
   );
 }
-const Ce = $e ? window : void 0;
-function Se(e) {
+const $e = Ce ? window : void 0;
+function be(e) {
   var t;
-  const c = ce(e);
-  return (t = c?.$el) != null ? t : c;
+  const u = ce(e);
+  return (t = u?.$el) != null ? t : u;
 }
 function Ee(...e) {
-  const t = [], c = () => {
-    t.forEach((k) => k()), t.length = 0;
-  }, P = (k, b, y, w) => (k.addEventListener(b, y, w), () => k.removeEventListener(b, y, w)), T = h(() => {
-    const k = Ae(ce(e[0])).filter((b) => b != null);
-    return k.every((b) => typeof b != "string") ? k : void 0;
-  }), V = Ve(
+  const t = [], u = () => {
+    t.forEach((A) => A()), t.length = 0;
+  }, q = (A, k, S, g) => (A.addEventListener(k, S, g), () => A.removeEventListener(k, S, g)), I = h(() => {
+    const A = Ae(ce(e[0])).filter((k) => k != null);
+    return A.every((k) => typeof k != "string") ? A : void 0;
+  }), L = Ye(
     () => {
-      var k, b;
+      var A, k;
       return [
-        (b = (k = T.value) == null ? void 0 : k.map((y) => Se(y))) != null ? b : [Ce].filter((y) => y != null),
-        Ae(ce(T.value ? e[1] : e[0])),
-        Ae(Te(T.value ? e[2] : e[1])),
+        (k = (A = I.value) == null ? void 0 : A.map((S) => be(S))) != null ? k : [$e].filter((S) => S != null),
+        Ae(ce(I.value ? e[1] : e[0])),
+        Ae(Fe(I.value ? e[2] : e[1])),
         // @ts-expect-error - TypeScript gets the correct types, but somehow still complains
-        ce(T.value ? e[3] : e[2])
+        ce(I.value ? e[3] : e[2])
       ];
     },
-    ([k, b, y, w]) => {
-      if (c(), !k?.length || !b?.length || !y?.length)
+    ([A, k, S, g]) => {
+      if (u(), !A?.length || !k?.length || !S?.length)
         return;
-      const L = Oe(w) ? { ...w } : w;
+      const P = Be(g) ? { ...g } : g;
       t.push(
-        ...k.flatMap(
-          (D) => b.flatMap(
-            (x) => y.map(($) => P(D, x, $, L))
+        ...A.flatMap(
+          (E) => k.flatMap(
+            (C) => S.map((T) => q(E, C, T, P))
           )
         )
       );
     },
     { flush: "post" }
-  ), W = () => {
-    V(), c();
+  ), V = () => {
+    L(), u();
   };
-  return Fe(c), W;
+  return Ue(u), V;
 }
 let Me = !1;
-function Ye(e, t, c = {}) {
-  const { window: P = Ce, ignore: T = [], capture: V = !0, detectIframe: W = !1, controls: k = !1 } = c;
-  if (!P)
-    return k ? { stop: pe, cancel: pe, trigger: pe } : pe;
-  if (Be && !Me) {
+function Ne(e, t, u = {}) {
+  const { window: q = $e, ignore: I = [], capture: L = !0, detectIframe: V = !1, controls: A = !1 } = u;
+  if (!q)
+    return A ? { stop: pe, cancel: pe, trigger: pe } : pe;
+  if (Ke && !Me) {
     Me = !0;
     const f = { passive: !0 };
-    Array.from(P.document.body.children).forEach((g) => g.addEventListener("click", pe, f)), P.document.documentElement.addEventListener("click", pe, f);
+    Array.from(q.document.body.children).forEach((y) => y.addEventListener("click", pe, f)), q.document.documentElement.addEventListener("click", pe, f);
   }
-  let b = !0;
-  const y = (f) => ce(T).some((g) => {
-    if (typeof g == "string")
-      return Array.from(P.document.querySelectorAll(g)).some((F) => F === f.target || f.composedPath().includes(F));
+  let k = !0;
+  const S = (f) => ce(I).some((y) => {
+    if (typeof y == "string")
+      return Array.from(q.document.querySelectorAll(y)).some((O) => O === f.target || f.composedPath().includes(O));
     {
-      const F = Se(g);
-      return F && (f.target === F || f.composedPath().includes(F));
+      const O = be(y);
+      return O && (f.target === O || f.composedPath().includes(O));
     }
   });
-  function w(f) {
-    const g = ce(f);
-    return g && g.$.subTree.shapeFlag === 16;
+  function g(f) {
+    const y = ce(f);
+    return y && y.$.subTree.shapeFlag === 16;
   }
-  function L(f, g) {
-    const F = ce(f), o = F.$.subTree && F.$.subTree.children;
-    return o == null || !Array.isArray(o) ? !1 : o.some((m) => m.el === g.target || g.composedPath().includes(m.el));
+  function P(f, y) {
+    const O = ce(f), G = O.$.subTree && O.$.subTree.children;
+    return G == null || !Array.isArray(G) ? !1 : G.some((o) => o.el === y.target || y.composedPath().includes(o.el));
   }
-  const D = (f) => {
-    const g = Se(e);
-    if (f.target != null && !(!(g instanceof Element) && w(e) && L(e, f)) && !(!g || g === f.target || f.composedPath().includes(g))) {
-      if ("detail" in f && f.detail === 0 && (b = !y(f)), !b) {
-        b = !0;
+  const E = (f) => {
+    const y = be(e);
+    if (f.target != null && !(!(y instanceof Element) && g(e) && P(e, f)) && !(!y || y === f.target || f.composedPath().includes(y))) {
+      if ("detail" in f && f.detail === 0 && (k = !S(f)), !k) {
+        k = !0;
         return;
       }
       t(f);
     }
   };
-  let x = !1;
-  const $ = [
-    Ee(P, "click", (f) => {
-      x || (x = !0, setTimeout(() => {
-        x = !1;
-      }, 0), D(f));
-    }, { passive: !0, capture: V }),
-    Ee(P, "pointerdown", (f) => {
-      const g = Se(e);
-      b = !y(f) && !!(g && !f.composedPath().includes(g));
+  let C = !1;
+  const T = [
+    Ee(q, "click", (f) => {
+      C || (C = !0, setTimeout(() => {
+        C = !1;
+      }, 0), E(f));
+    }, { passive: !0, capture: L }),
+    Ee(q, "pointerdown", (f) => {
+      const y = be(e);
+      k = !S(f) && !!(y && !f.composedPath().includes(y));
     }, { passive: !0 }),
-    W && Ee(P, "blur", (f) => {
+    V && Ee(q, "blur", (f) => {
       setTimeout(() => {
-        var g;
-        const F = Se(e);
-        ((g = P.document.activeElement) == null ? void 0 : g.tagName) === "IFRAME" && !F?.contains(P.document.activeElement) && t(f);
+        var y;
+        const O = be(e);
+        ((y = q.document.activeElement) == null ? void 0 : y.tagName) === "IFRAME" && !O?.contains(q.document.activeElement) && t(f);
       }, 0);
     }, { passive: !0 })
-  ].filter(Boolean), R = () => $.forEach((f) => f());
-  return k ? {
-    stop: R,
+  ].filter(Boolean), U = () => T.forEach((f) => f());
+  return A ? {
+    stop: U,
     cancel: () => {
-      b = !1;
+      k = !1;
     },
     trigger: (f) => {
-      b = !0, D(f), b = !1;
+      k = !0, E(f), k = !1;
     }
-  } : R;
+  } : U;
 }
-function ze(e) {
-  const t = Re(null), c = [
+function Qe(e) {
+  const t = Re(null), u = [
     ".k-animation-container .k-popup",
     ".k-popup",
     ".k-timepicker-popup",
     ".k-menu-popup"
-  ], P = Array.isArray(e.popupSelector) ? e.popupSelector : [e.popupSelector ?? c].flat(), T = (w) => w ? typeof e.initialFocus == "string" ? w.querySelector(e.initialFocus) ?? w : typeof e.initialFocus == "function" ? e.initialFocus(w) ?? w : w.querySelector(
+  ], q = Array.isArray(e.popupSelector) ? e.popupSelector : [e.popupSelector ?? u].flat(), I = (g) => g ? typeof e.initialFocus == "string" ? g.querySelector(e.initialFocus) ?? g : typeof e.initialFocus == "function" ? e.initialFocus(g) ?? g : g.querySelector(
     'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-  ) ?? w : null, { activate: V, deactivate: W } = qe(t, {
+  ) ?? g : null, { activate: L, deactivate: V } = qe(t, {
     escapeDeactivates: !1,
     clickOutsideDeactivates: !1,
     fallbackFocus: () => t.value,
-    initialFocus: () => T(t.value),
+    initialFocus: () => I(t.value),
     ...e.focusTrapOptions ?? {}
   });
-  let k = null, b = _(null);
-  const y = () => {
+  let A = null, k = _(null);
+  const S = () => {
     if (e.resolvePopupEl) return e.resolvePopupEl();
-    const w = (D, x) => {
-      const $ = Array.from(D.querySelectorAll(x));
-      if (!$.length) return null;
-      const R = $.filter(
+    const g = (E, C) => {
+      const T = Array.from(E.querySelectorAll(C));
+      if (!T.length) return null;
+      const U = T.filter(
         (f) => f.offsetParent !== null || f.getClientRects().length > 0
       );
-      return R[R.length - 1] ?? $[$.length - 1] ?? null;
-    }, L = e.triggerEl?.value?.closest?.(".k-animation-container") ?? document.body;
-    for (const D of P) {
-      const x = w(L, D);
-      if (x) return x;
+      return U[U.length - 1] ?? T[T.length - 1] ?? null;
+    }, P = e.triggerEl?.value?.closest?.(".k-animation-container") ?? document.body;
+    for (const E of q) {
+      const C = g(P, E);
+      if (C) return C;
     }
-    for (const D of P) {
-      const x = w(document, D);
-      if (x) return x;
+    for (const E of q) {
+      const C = g(document, E);
+      if (C) return C;
     }
     return null;
   };
-  return Ye(t, (w) => {
-    b.value = "outside", e.isOpen.value && e.onRequestClose?.("outside", w);
+  return Ne(t, (g) => {
+    k.value = "outside", e.isOpen.value && e.onRequestClose?.("outside", g);
   }), ve(
     () => e.isOpen.value,
-    (w) => {
-      w ? (b.value = null, N(() => {
-        const L = y();
-        L && (t.value = L, setTimeout(() => V(), 0), k || (k = (D) => {
-          D.key === "Escape" && (b.value = "escape", e.isOpen.value && e.onRequestClose?.("escape", D));
-        }, document.addEventListener("keydown", k, !0)));
-      })) : (W(), k && (document.removeEventListener("keydown", k, !0), k = null), t.value = null, b.value === "outside" && N(() => {
-        const L = () => {
-          const D = e.triggerEl?.value, x = D?.querySelector("input"), $ = document.activeElement;
-          $ && ($ === x || D && D.contains($)) && (x ?? D)?.blur?.();
+    (g) => {
+      g ? (k.value = null, j(() => {
+        const P = S();
+        P && (t.value = P, setTimeout(() => L(), 0), A || (A = (E) => {
+          E.key === "Escape" && (k.value = "escape", e.isOpen.value && e.onRequestClose?.("escape", E));
+        }, document.addEventListener("keydown", A, !0)));
+      })) : (V(), A && (document.removeEventListener("keydown", A, !0), A = null), t.value = null, k.value === "outside" && j(() => {
+        const P = () => {
+          const E = e.triggerEl?.value, C = E?.querySelector("input"), T = document.activeElement;
+          T && (T === C || E && E.contains(T)) && (C ?? E)?.blur?.();
         };
-        requestAnimationFrame(() => setTimeout(L, 0));
-      }), e.returnFocusToTrigger !== !1 && b.value === "escape" && e.triggerEl?.value && (console.log(
+        requestAnimationFrame(() => setTimeout(P, 0));
+      }), e.returnFocusToTrigger !== !1 && k.value === "escape" && e.triggerEl?.value && (console.log(
         "Returning focus to trigger element:",
         e.triggerEl.value
-      ), N(() => {
-        const L = () => {
-          const D = e.triggerEl?.value;
-          if (!D) return;
-          (D.querySelector("input") ?? D)?.focus?.();
+      ), j(() => {
+        const P = () => {
+          const E = e.triggerEl?.value;
+          if (!E) return;
+          (E.querySelector("input") ?? E)?.focus?.();
         };
-        requestAnimationFrame(() => setTimeout(L, 0));
+        requestAnimationFrame(() => setTimeout(P, 0));
       })));
     }
   ), {
     popupRef: t,
-    activate: V,
-    deactivate: W,
-    lastCloseReason: K(b),
-    setPopupEl: (w) => t.value = w
+    activate: L,
+    deactivate: V,
+    lastCloseReason: N(k),
+    setPopupEl: (g) => t.value = g
   };
 }
+const He = (e) => !!e && typeof e == "object" && "filters" in e && Array.isArray(e.filters), We = (e) => !!e && typeof e == "object" && "field" in e, Ie = (e, t) => !e || typeof e != "object" ? !1 : He(e) ? e.filters.some(
+  (u) => Ie(u, t)
+) : We(e) ? e.field === t : !1, Ze = (e) => {
+  const t = _({}), u = (I) => !e.value || !e.value.filters ? !1 : e.value.filters.some(
+    (L) => Ie(L, I)
+  );
+  return {
+    activeClasses: t,
+    hasFieldFilter: u,
+    updateActiveClass: (I) => {
+      const L = u(I);
+      console.log("updateActiveClass for", I, "hasFilter:", L), t.value[I] = L ? "active" : "", console.log("activeClasses after update", t.value);
+    }
+  };
+};
 export {
-  We as useGridA11y,
-  _e as useMaskedDateInput,
-  Ge as useMaskedDateRangeInput,
-  je as useMaskedTimeInput,
-  ze as usePopupTrap
+  _e as useGridA11y,
+  Ze as useGridFilter,
+  ze as useMaskedDateInput,
+  Xe as useMaskedDateRangeInput,
+  Je as useMaskedTimeInput,
+  Qe as usePopupTrap
 };