@jasonshimmy/custom-elements-runtime 0.1.10 → 0.1.12

package/dist/custom-elements-runtime.es.js

@@ -17,11 +17,11 @@ function $e() {
       return e.push([!0, t]), this;
     },
     done() {
-      return _e(...e);
+      return Se(...e);
     }
   };
 }
-function _e(...e) {
+function Se(...e) {
   for (let t = 0; t < e.length; t++) {
     const [r, n] = e[t];
     if (r) return [Y(n, `whenChain-branch-${t}`)];
@@ -194,7 +194,7 @@ function oe(e) {
     })[t]
   ) : e;
 }
-function Se(e, t, r) {
+function _e(e, t, r) {
   if (r)
     for (const [n, o] of Object.entries(r)) {
       let s, i = {};
@@ -219,9 +219,9 @@ function Ce(e, t, r, n) {
     if (i === a) return !0;
     if (typeof i != typeof a || typeof i != "object" || i === null || a === null) return !1;
     if (Array.isArray(i) && Array.isArray(a))
-      return i.length !== a.length ? !1 : i.every((p, g) => o(p, a[g]));
+      return i.length !== a.length ? !1 : i.every((h, g) => o(h, a[g]));
     const c = Object.keys(i), f = Object.keys(a);
-    return c.length !== f.length ? !1 : c.every((p) => o(i[p], a[p]));
+    return c.length !== f.length ? !1 : c.every((h) => o(i[h], a[h]));
   }, s = t.get(r);
   if (s && !o(n, s.oldValue))
     try {
@@ -238,7 +238,7 @@ function Ce(e, t, r, n) {
         console.error(`Error in deep watcher for "${i}":`, c);
       }
 }
-function Ae(e, t, r) {
+function Ee(e, t, r) {
   if (!t.props) return;
   function n(o, s) {
     return s === Boolean ? o === "true" : s === Number ? Number(o) : o;
@@ -252,7 +252,7 @@ function Ae(e, t, r) {
     }
   });
 }
-function Ee(e, t, r, n) {
+function Ae(e, t, r, n) {
   e.onConnected && !r && (e.onConnected(t), n(!0));
 }
 function Te(e, t, r, n, o, s, i, a) {
@@ -270,7 +270,7 @@ function M(e, t) {
   }
 }
 function O(e, t) {
-  return t.split(".").reduce((r, n) => r?.[n], e);
+  return typeof t == "string" ? t.split(".").reduce((r, n) => r?.[n], e) : t;
 }
 function fe(e, t, r) {
   const n = t.split("."), o = n.pop();
@@ -280,30 +280,30 @@ function fe(e, t, r) {
 }
 function Le(e, t, r, n, o, s, i) {
   if (!s) return;
-  const a = t.includes("lazy"), c = t.includes("trim"), f = t.includes("number"), p = () => {
-    const h = s._state || s;
-    return O(h, e);
-  }, g = p();
+  const a = t.includes("lazy"), c = t.includes("trim"), f = t.includes("number"), h = () => {
+    const p = s._state || s;
+    return O(p, e);
+  }, g = h();
   let l = "text";
-  const b = n?.type;
-  if (i instanceof HTMLInputElement ? l = b || i.type || "text" : i instanceof HTMLSelectElement ? l = "select" : i instanceof HTMLTextAreaElement && (l = "textarea"), l === "checkbox")
+  const x = n?.type;
+  if (i instanceof HTMLInputElement ? l = x || i.type || "text" : i instanceof HTMLSelectElement ? l = "select" : i instanceof HTMLTextAreaElement && (l = "textarea"), l === "checkbox")
     if (Array.isArray(g)) {
-      const h = i?.getAttribute("value") || n?.value || "", d = g.includes(h);
-      i && i.checked !== d && (r.checked = d);
+      const p = i?.getAttribute("value") || n?.value || "", u = g.includes(p);
+      i && i.checked !== u && (r.checked = u);
     } else {
-      const h = i?.getAttribute("true-value") || !0, d = g === h;
-      i && i.checked !== d && (r.checked = d);
+      const p = i?.getAttribute("true-value") || !0, u = g === p;
+      i && i.checked !== u && (r.checked = u);
     }
   else if (l === "radio") {
-    const h = n?.value || "", d = g === h;
-    i && i.checked !== d && (r.checked = d);
+    const p = n?.value || "", u = g === p;
+    i && i.checked !== u && (r.checked = u);
   } else if (l === "select")
     if (i && i.hasAttribute("multiple")) {
-      const h = i, d = Array.isArray(g) ? g : [];
+      const p = i, u = Array.isArray(g) ? g : [];
       setTimeout(() => {
-        Array.from(h.options).forEach((v) => {
-          const x = d.includes(v.value);
-          v.selected !== x && (v.selected = x);
+        Array.from(p.options).forEach((y) => {
+          const b = u.includes(y.value);
+          y.selected !== b && (y.selected = b);
         });
       }, 0);
     } else
@@ -311,69 +311,69 @@ function Le(e, t, r, n, o, s, i) {
         i instanceof HTMLSelectElement && i.value !== String(g) && (i.value = String(g));
       }, 0);
   else {
-    const h = String(g ?? "");
-    (!i || i.value !== h) && (r.value = g);
-  }
-  const y = a || l === "checkbox" || l === "radio" || l === "select" ? "change" : "input", m = (h) => {
-    if (h.isComposing || o._isComposing || h.isTrusted === !1) return;
-    const d = h.target;
-    if (d._modelUpdating) return;
-    const v = p();
-    let x = d.value;
+    const p = String(g ?? "");
+    (!i || i.value !== p) && (r.value = g);
+  }
+  const m = a || l === "checkbox" || l === "radio" || l === "select" ? "change" : "input", v = (p) => {
+    if (p.isComposing || o._isComposing || p.isTrusted === !1) return;
+    const u = p.target;
+    if (u._modelUpdating) return;
+    const y = h();
+    let b = u.value;
     if (l === "checkbox")
-      if (Array.isArray(v)) {
-        const _ = d.getAttribute("value") || "", S = [...v];
-        if (d.checked)
-          S.includes(_) || S.push(_);
+      if (Array.isArray(y)) {
+        const k = u.getAttribute("value") || "", _ = [...y];
+        if (u.checked)
+          _.includes(k) || _.push(k);
         else {
-          const C = S.indexOf(_);
-          C > -1 && S.splice(C, 1);
+          const C = _.indexOf(k);
+          C > -1 && _.splice(C, 1);
         }
-        x = S;
+        b = _;
       } else {
-        const _ = d.getAttribute("true-value") || !0, S = d.getAttribute("false-value") || !1;
-        x = d.checked ? _ : S;
+        const k = u.getAttribute("true-value") || !0, _ = u.getAttribute("false-value") || !1;
+        b = u.checked ? k : _;
       }
     else if (l === "radio")
-      x = d.getAttribute("value") || d.value;
-    else if (l === "select" && d.multiple) {
-      const _ = d;
-      x = Array.from(_.selectedOptions).map(
-        (S) => S.value
+      b = u.getAttribute("value") || u.value;
+    else if (l === "select" && u.multiple) {
+      const k = u;
+      b = Array.from(k.selectedOptions).map(
+        (_) => _.value
       );
-    } else if (c && (x = x.trim()), f) {
-      const _ = Number(x);
-      isNaN(_) || (x = _);
+    } else if (c && (b = b.trim()), f) {
+      const k = Number(b);
+      isNaN(k) || (b = k);
     }
-    const u = s._state || s, $ = O(u, e);
-    if (Array.isArray(x) && Array.isArray($) ? JSON.stringify([...x].sort()) !== JSON.stringify([...$].sort()) : x !== $) {
-      const _ = h.target;
-      _._modelUpdating = !0, fe(u, e, x), setTimeout(() => {
-        _._modelUpdating = !1;
+    const d = s._state || s, $ = O(d, e);
+    if (Array.isArray(b) && Array.isArray($) ? JSON.stringify([...b].sort()) !== JSON.stringify([...$].sort()) : b !== $) {
+      const k = p.target;
+      k._modelUpdating = !0, fe(d, e, b), setTimeout(() => {
+        k._modelUpdating = !1;
       }, 0), s._requestRender && s._requestRender();
     }
   };
-  if (o[y] = m, l === "text" || l === "textarea") {
-    const h = () => {
+  if (o[m] = v, l === "text" || l === "textarea") {
+    const p = () => {
       o._isComposing = !0;
-    }, d = (v) => {
+    }, u = (y) => {
       o._isComposing = !1;
-      const x = v.target;
+      const b = y.target;
       setTimeout(() => {
-        if (x) {
-          let u = x.value;
-          if (c && (u = u.trim()), f) {
-            const S = Number(u);
-            isNaN(S) || (u = S);
+        if (b) {
+          let d = b.value;
+          if (c && (d = d.trim()), f) {
+            const _ = Number(d);
+            isNaN(_) || (d = _);
           }
           const $ = s._state || s, w = O($, e);
-          (Array.isArray(u) && Array.isArray(w) ? JSON.stringify([...u].sort()) !== JSON.stringify([...w].sort()) : u !== w) && (x && (x._modelUpdating = !0, setTimeout(() => {
-            x._modelUpdating = !1;
-          }, 0)), fe($, e, u), s._requestRender && s._requestRender());
+          (Array.isArray(d) && Array.isArray(w) ? JSON.stringify([...d].sort()) !== JSON.stringify([...w].sort()) : d !== w) && (b && (b._modelUpdating = !0, setTimeout(() => {
+            b._modelUpdating = !1;
+          }, 0)), fe($, e, d), s._requestRender && s._requestRender());
         }
       }, 0);
     };
-    o.compositionstart = h, o.compositionend = d;
+    o.compositionstart = p, o.compositionend = u;
   }
 }
 function Be(e, t, r, n) {
@@ -403,7 +403,7 @@ function Re(e, t, r) {
   if (!r) return;
   const n = O(r, e);
   let o = [];
-  typeof n == "string" ? o = [n] : Array.isArray(n) ? o = n.filter(Boolean) : typeof n == "object" && (o = Object.entries(n).filter(([, a]) => !!a).map(([a]) => a));
+  typeof n == "string" ? o = [n] : Array.isArray(n) ? o = n.filter(Boolean) : typeof n == "object" && (o = Object.entries(n).filter(([, a]) => !!a).flatMap(([a]) => a.split(/\s+/).filter(Boolean)));
   const s = t.class || "", i = s ? `${s} ${o.join(" ")}`.trim() : o.join(" ");
   i && (t.class = i);
 }
@@ -424,7 +424,7 @@ function Ne(e, t, r) {
         const f = a.replace(
           /[A-Z]/g,
           (l) => `-${l.toLowerCase()}`
-        ), p = [
+        ), h = [
           "width",
           "height",
           "top",
@@ -451,7 +451,7 @@ function Ne(e, t, r) {
           "max-height"
         ];
         let g = String(c);
-        typeof c == "number" && p.includes(f) && (g = `${c}px`), i.push(`${f}: ${g}`);
+        typeof c == "number" && h.includes(f) && (g = `${c}px`), i.push(`${f}: ${g}`);
       }
     o = i.join("; ") + (i.length > 0 ? ";" : "");
   }
@@ -461,12 +461,12 @@ function Ne(e, t, r) {
 function be(e, t, r, n) {
   const o = {}, s = { ...n || {} }, i = {};
   for (const [a, c] of Object.entries(e)) {
-    const { value: f, modifiers: p } = c;
+    const { value: f, modifiers: h } = c;
     switch (a) {
       case "model":
         Le(
           typeof f == "string" ? f : String(f),
-          p,
+          h,
           o,
           s,
           i,
@@ -504,8 +504,8 @@ function se(e, t) {
       for (; s.has(c); )
         c = `${a}#${f++}`;
       s.add(c);
-      let p = i.children;
-      return Array.isArray(p) && (p = se(p, c)), { ...i, key: c, children: p };
+      let h = i.children;
+      return Array.isArray(h) && (h = se(h, c)), { ...i, key: c, children: h };
     });
   }
   const r = e;
@@ -528,17 +528,17 @@ function Me(e, t, r, n) {
     ...s.attrs
   }, c = t.props ?? {}, f = i;
   for (const l in { ...c, ...f }) {
-    const b = c[l], y = f[l];
-    b !== y && (l === "value" && (e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement || e instanceof HTMLSelectElement) ? e.value !== y && (e.value = y ?? "") : l === "checked" && e instanceof HTMLInputElement ? e.checked = !!y : l.startsWith("on") && typeof y == "function" ? (typeof b == "function" && e.removeEventListener(l.slice(2).toLowerCase(), b), e.addEventListener(l.slice(2).toLowerCase(), y)) : y == null || y === !1 ? e.removeAttribute(l) : e.setAttribute(l, String(y)));
+    const x = c[l], m = f[l];
+    x !== m && (l === "value" && (e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement || e instanceof HTMLSelectElement) ? e.value !== m && (e.value = m ?? "") : l === "checked" && e instanceof HTMLInputElement ? e.checked = !!m : l.startsWith("on") && typeof m == "function" ? (typeof x == "function" && e.removeEventListener(l.slice(2).toLowerCase(), x), e.addEventListener(l.slice(2).toLowerCase(), m)) : m == null || m === !1 ? e.removeAttribute(l) : e.setAttribute(l, String(m)));
   }
-  for (const [l, b] of Object.entries(
+  for (const [l, x] of Object.entries(
     s.listeners || {}
   ))
-    e.addEventListener(l, b);
-  const p = t.attrs ?? {}, g = a;
-  for (const l in { ...p, ...g }) {
-    const b = p[l], y = g[l];
-    b !== y && (y == null || y === !1 ? e.removeAttribute(l) : e.setAttribute(l, String(y)));
+    e.addEventListener(l, x);
+  const h = t.attrs ?? {}, g = a;
+  for (const l in { ...h, ...g }) {
+    const x = h[l], m = g[l];
+    x !== m && (m == null || m === !1 ? e.removeAttribute(l) : e.setAttribute(l, String(m)));
   }
 }
 function L(e, t, r) {
@@ -551,15 +551,15 @@ function L(e, t, r) {
     return e.key != null && (g.key = e.key), g;
   }
   if (e.tag === "#anchor") {
-    const g = e, l = Array.isArray(g.children) ? g.children : [], b = document.createTextNode(""), y = document.createTextNode("");
-    g.key != null && (b.key = `${g.key}:start`, y.key = `${g.key}:end`), g._startNode = b, g._endNode = y;
-    const m = document.createDocumentFragment();
-    m.appendChild(b);
-    for (const h of l) {
-      const d = L(h, t);
-      m.appendChild(d);
+    const g = e, l = Array.isArray(g.children) ? g.children : [], x = document.createTextNode(""), m = document.createTextNode("");
+    g.key != null && (x.key = `${g.key}:start`, m.key = `${g.key}:end`), g._startNode = x, g._endNode = m;
+    const v = document.createDocumentFragment();
+    v.appendChild(x);
+    for (const p of l) {
+      const u = L(p, t);
+      v.appendChild(u);
     }
-    return m.appendChild(y), m;
+    return v.appendChild(m), v;
   }
   const n = document.createElement(e.tag);
   e.key != null && (n.key = e.key);
@@ -592,8 +592,8 @@ function L(e, t, r) {
     a.listeners || {}
   ))
     n.addEventListener(g, l);
-  const p = e.props?.ref ?? (e.props?.props && e.props.props.ref);
-  if (typeof e != "string" && p && r && (r[p] = n), Array.isArray(e.children))
+  const h = e.props?.ref ?? (e.props?.props && e.props.props.ref);
+  if (typeof e != "string" && h && r && (r[h] = n), Array.isArray(e.children))
     for (const g of e.children)
       n.appendChild(L(g, t, r));
   else typeof e.children == "string" && (n.textContent = e.children);
@@ -606,103 +606,103 @@ function Oe(e, t, r, n, o) {
   }
   if (!Array.isArray(r)) return;
   const s = Array.from(e.childNodes), i = Array.isArray(t) ? t : [], a = /* @__PURE__ */ new Map();
-  for (const b of i)
-    b && b.key != null && a.set(b.key, b);
+  for (const x of i)
+    x && x.key != null && a.set(x.key, x);
   const c = /* @__PURE__ */ new Map();
-  for (const b of s) {
-    const y = b.key;
-    y != null && c.set(y, b);
+  for (const x of s) {
+    const m = x.key;
+    m != null && c.set(m, x);
   }
   const f = /* @__PURE__ */ new Set();
-  let p = e.firstChild;
-  function g(b, y) {
-    let m = b;
-    for (; m && (f.add(m), m !== y); )
-      m = m.nextSibling;
-  }
-  function l(b, y, m, h) {
-    const d = [];
-    let v = b.nextSibling;
-    for (; v && v !== y; )
-      d.push(v), v = v.nextSibling;
-    const x = Array.isArray(m) ? m : [];
-    if (h.some(($) => $ && $.key != null) || x.some(($) => $ && $.key != null)) {
+  let h = e.firstChild;
+  function g(x, m) {
+    let v = x;
+    for (; v && (f.add(v), v !== m); )
+      v = v.nextSibling;
+  }
+  function l(x, m, v, p) {
+    const u = [];
+    let y = x.nextSibling;
+    for (; y && y !== m; )
+      u.push(y), y = y.nextSibling;
+    const b = Array.isArray(v) ? v : [];
+    if (p.some(($) => $ && $.key != null) || b.some(($) => $ && $.key != null)) {
       const $ = /* @__PURE__ */ new Map(), w = /* @__PURE__ */ new Map();
-      for (const C of x)
+      for (const C of b)
         C && C.key != null && $.set(C.key, C);
-      for (const C of d) {
-        const k = C.key;
-        k != null && w.set(k, C);
+      for (const C of u) {
+        const S = C.key;
+        S != null && w.set(S, C);
       }
-      const _ = /* @__PURE__ */ new Set();
-      let S = b.nextSibling;
-      for (const C of h) {
-        let k;
+      const k = /* @__PURE__ */ new Set();
+      let _ = x.nextSibling;
+      for (const C of p) {
+        let S;
         if (C.key != null && w.has(C.key)) {
           const B = $.get(C.key);
-          k = Q(
+          S = Q(
             w.get(C.key),
             B,
             C,
             n
-          ), _.add(k), k !== S && e.contains(k) && e.insertBefore(k, S);
+          ), k.add(S), S !== _ && e.contains(S) && e.insertBefore(S, _);
         } else
-          k = L(C, n), e.insertBefore(k, S), _.add(k);
-        S = k.nextSibling;
+          S = L(C, n), e.insertBefore(S, _), k.add(S);
+        _ = S.nextSibling;
       }
-      for (const C of d)
-        !_.has(C) && e.contains(C) && e.removeChild(C);
+      for (const C of u)
+        !k.has(C) && e.contains(C) && e.removeChild(C);
     } else {
       const $ = Math.min(
-        x.length,
-        h.length
+        b.length,
+        p.length
       );
       for (let w = 0; w < $; w++) {
-        const _ = x[w], S = h[w], C = Q(d[w], _, S, n);
-        C !== d[w] && (e.insertBefore(C, d[w]), e.removeChild(d[w]));
+        const k = b[w], _ = p[w], C = Q(u[w], k, _, n);
+        C !== u[w] && (e.insertBefore(C, u[w]), e.removeChild(u[w]));
       }
-      for (let w = $; w < h.length; w++)
-        e.insertBefore(L(h[w], n), y);
-      for (let w = $; w < d.length; w++)
-        e.removeChild(d[w]);
+      for (let w = $; w < p.length; w++)
+        e.insertBefore(L(p[w], n), m);
+      for (let w = $; w < u.length; w++)
+        e.removeChild(u[w]);
     }
   }
-  for (const b of r) {
-    let y;
-    if (b.tag === "#anchor") {
-      const m = b.key, h = `${m}:start`, d = `${m}:end`;
-      let v = c.get(h), x = c.get(d);
-      const u = Array.isArray(b.children) ? b.children : [];
-      if (v || (v = document.createTextNode(""), v.key = h), x || (x = document.createTextNode(""), x.key = d), b._startNode = v, b._endNode = x, !e.contains(v) || !e.contains(x)) {
-        e.insertBefore(v, p);
-        for (const $ of u)
-          e.insertBefore(L($, n), p);
-        e.insertBefore(x, p);
+  for (const x of r) {
+    let m;
+    if (x.tag === "#anchor") {
+      const v = x.key, p = `${v}:start`, u = `${v}:end`;
+      let y = c.get(p), b = c.get(u);
+      const d = Array.isArray(x.children) ? x.children : [];
+      if (y || (y = document.createTextNode(""), y.key = p), b || (b = document.createTextNode(""), b.key = u), x._startNode = y, x._endNode = b, !e.contains(y) || !e.contains(b)) {
+        e.insertBefore(y, h);
+        for (const $ of d)
+          e.insertBefore(L($, n), h);
+        e.insertBefore(b, h);
       } else
         l(
-          v,
-          x,
-          a.get(m)?.children,
-          u
+          y,
+          b,
+          a.get(v)?.children,
+          d
         );
-      g(v, x), p = x.nextSibling;
+      g(y, b), h = b.nextSibling;
       continue;
     }
-    if (b.key != null && c.has(b.key)) {
-      const m = a.get(b.key);
-      y = Q(
-        c.get(b.key),
-        m,
-        b,
+    if (x.key != null && c.has(x.key)) {
+      const v = a.get(x.key);
+      m = Q(
+        c.get(x.key),
+        v,
+        x,
         n,
         o
-      ), f.add(y), y !== p && e.contains(y) && (p && !e.contains(p) && (p = null), e.insertBefore(y, p));
+      ), f.add(m), m !== h && e.contains(m) && (h && !e.contains(h) && (h = null), e.insertBefore(m, h));
     } else
-      y = L(b, n, o), p && !e.contains(p) && (p = null), e.insertBefore(y, p), f.add(y);
-    p = y.nextSibling;
+      m = L(x, n, o), h && !e.contains(h) && (h = null), e.insertBefore(m, h), f.add(m);
+    h = m.nextSibling;
   }
-  for (const b of s)
-    !f.has(b) && e.contains(b) && (M(b, o), e.removeChild(b));
+  for (const x of s)
+    !f.has(x) && e.contains(x) && (M(x, o), e.removeChild(x));
 }
 function Q(e, t, r, n, o) {
   if (t && typeof t != "string" && t.props?.ref && o && M(e, o), t === r) return e;
@@ -717,13 +717,13 @@ function Q(e, t, r, n, o) {
   if (r && typeof r != "string" && r.tag === "#anchor") {
     const i = r, a = Array.isArray(i.children) ? i.children : [], c = i._startNode ?? document.createTextNode(""), f = i._endNode ?? document.createTextNode("");
     i.key != null && (c.key = `${i.key}:start`, f.key = `${i.key}:end`), i._startNode = c, i._endNode = f;
-    const p = document.createDocumentFragment();
-    p.appendChild(c);
+    const h = document.createDocumentFragment();
+    h.appendChild(c);
     for (const g of a) {
       const l = L(g, n);
-      p.appendChild(l);
+      h.appendChild(l);
     }
-    return p.appendChild(f), e.parentNode?.replaceChild(p, e), c;
+    return h.appendChild(f), e.parentNode?.replaceChild(h, e), c;
   }
   if (!r) {
     M(e, o);
@@ -740,8 +740,8 @@ function Q(e, t, r, n, o) {
     r.key != null && (a.key = `${r.key}:start`, c.key = `${r.key}:end`), r._startNode = a, r._endNode = c;
     const f = document.createDocumentFragment();
     f.appendChild(a);
-    for (const p of i)
-      f.appendChild(L(p, n));
+    for (const h of i)
+      f.appendChild(L(h, n));
     return f.appendChild(c), e.parentNode?.replaceChild(f, e), a;
   }
   if (typeof t != "string" && typeof r != "string" && t.tag === r.tag && t.key === r.key) {
@@ -765,8 +765,8 @@ function Pe(e, t, r, n) {
   s && i ? typeof s != "string" && typeof o != "string" && s.tag === o.tag && s.key === o.key ? a = Q(i, s, o, r, n) : (a = L(o, r, n), e.replaceChild(a, i)) : (a = L(o, r, n), e.firstChild ? e.replaceChild(a, e.firstChild) : e.appendChild(a));
   const c = [];
   for (let f = 0; f < e.childNodes.length; f++) {
-    const p = e.childNodes[f];
-    p !== a && p.nodeName !== "STYLE" && (M(p, n), c.push(p));
+    const h = e.childNodes[f];
+    h !== a && h.nodeName !== "STYLE" && (M(h, n), c.push(h));
   }
   c.forEach((f) => e.removeChild(f)), e._prevVNode = o, e._prevDom = a;
 }
@@ -1348,57 +1348,57 @@ function Ze(e) {
   const t = Date.now(), r = ge.get(e);
   if (r && t - r.timestamp < Qe) return r.css;
   const n = Je(e), o = new Set(n), s = [], i = [], a = [], c = [], f = {};
-  function p(y, m = !1) {
-    const h = (m ? "dark|" : "") + y;
-    if (h in f) return f[h];
-    const d = l(y, m);
-    return f[h] = d, d;
-  }
-  function g(y) {
-    const m = y.some((d) => ee.includes(d)), h = y.includes("dark");
-    return y.length === 0 ? 1 : !m && !h ? 2 : m && !h ? 3 : 4;
-  }
-  function l(y, m = !1) {
-    const h = y.split(":"), d = h.find(
-      (k) => G[k] || te(k) || re(k) || Z(k)
+  function h(m, v = !1) {
+    const p = (v ? "dark|" : "") + m;
+    if (p in f) return f[p];
+    const u = l(m, v);
+    return f[p] = u, u;
+  }
+  function g(m) {
+    const v = m.some((u) => ee.includes(u)), p = m.includes("dark");
+    return m.length === 0 ? 1 : !v && !p ? 2 : v && !p ? 3 : 4;
+  }
+  function l(m, v = !1) {
+    const p = m.split(":"), u = p.find(
+      (S) => G[S] || te(S) || re(S) || Z(S)
     );
-    if (!d) return null;
-    const v = G[d] ?? te(d) ?? re(d) ?? Z(d);
-    if (!v) return null;
-    let x = `.${Ue(y)}`, u = v;
-    const $ = h.indexOf(d);
-    let w = $ >= 0 ? h.slice(0, $) : [];
-    m && (w = w.filter((k) => k !== "dark"));
-    const _ = w.filter((k) => ee.includes(k)), S = _.length ? _[_.length - 1] : null;
-    for (const k of w) {
-      const B = Ve(k);
+    if (!u) return null;
+    const y = G[u] ?? te(u) ?? re(u) ?? Z(u);
+    if (!y) return null;
+    let b = `.${Ue(m)}`, d = y;
+    const $ = p.indexOf(u);
+    let w = $ >= 0 ? p.slice(0, $) : [];
+    v && (w = w.filter((S) => S !== "dark"));
+    const k = w.filter((S) => ee.includes(S)), _ = k.length ? k[k.length - 1] : null;
+    for (const S of w) {
+      const B = Ve(S);
       if (B) {
-        x = `${B}${x}`;
+        b = `${B}${b}`;
         continue;
       }
-      if (ee.includes(k)) continue;
-      const A = Ie[k];
-      typeof A == "function" && (x = A(x, u).replace(/\{.*$/, ""));
+      if (ee.includes(S)) continue;
+      const E = Ie[S];
+      typeof E == "function" && (b = E(b, d).replace(/\{.*$/, ""));
     }
-    let C = `${x}{${u}}`;
-    return m && S ? C = `@media (prefers-color-scheme: dark) and ${pe[S]}{${C}}` : m ? C = `@media (prefers-color-scheme: dark){${C}}` : S && (C = `@media ${pe[S]}{${C}}`), C;
+    let C = `${b}{${d}}`;
+    return v && _ ? C = `@media (prefers-color-scheme: dark) and ${pe[_]}{${C}}` : v ? C = `@media (prefers-color-scheme: dark){${C}}` : _ && (C = `@media ${pe[_]}{${C}}`), C;
   }
-  for (const y of o) {
-    const m = y.split(":"), h = m.find(
-      (u) => G[u] || te(u) || re(u) || Z(u)
+  for (const m of o) {
+    const v = m.split(":"), p = v.find(
+      (d) => G[d] || te(d) || re(d) || Z(d)
     );
-    if (!h) continue;
-    const d = m.indexOf(h), v = d >= 0 ? m.slice(0, d) : [], x = g(v);
-    if (x === 4) {
-      const u = p(y, !0);
-      u && c.push(u);
+    if (!p) continue;
+    const u = v.indexOf(p), y = u >= 0 ? v.slice(0, u) : [], b = g(y);
+    if (b === 4) {
+      const d = h(m, !0);
+      d && c.push(d);
     } else {
-      const u = p(y);
-      u && (x === 1 ? s.push(u) : x === 2 ? i.push(u) : x === 3 && a.push(u));
+      const d = h(m);
+      d && (b === 1 ? s.push(d) : b === 2 ? i.push(d) : b === 3 && a.push(d));
     }
   }
-  const b = [...s, ...i, ...a, ...c].join("");
-  return ge.set(e, { css: b, timestamp: t }), b;
+  const x = [...s, ...i, ...a, ...c].join("");
+  return ge.set(e, { css: x, timestamp: t }), x;
 }
 const F = [];
 function Xe(e, t, r, n, o, s, i, a) {
@@ -1561,7 +1561,7 @@ function tt(e) {
     }
     connectedCallback() {
       this._runLogicWithinErrorBoundary(e, () => {
-        Ee(
+        Ae(
           e,
           this.context,
           this._mounted,
@@ -1710,8 +1710,8 @@ function tt(e) {
               ].includes(a) ? function(...g) {
                 const l = f.apply(i, g);
                 if (!n._initializing) {
-                  const b = s || "root";
-                  n._triggerWatchers(b, i), n._render(t);
+                  const x = s || "root";
+                  n._triggerWatchers(x, i), n._render(t);
                 }
                 return l;
               } : f;
@@ -1754,7 +1754,7 @@ function tt(e) {
     }
     _initWatchers(t) {
       this._runLogicWithinErrorBoundary(t, () => {
-        Se(
+        _e(
           this.context,
           this._watchers,
           t.watch || {}
@@ -1767,7 +1767,7 @@ function tt(e) {
     _applyProps(t) {
       this._runLogicWithinErrorBoundary(t, () => {
         try {
-          Ae(this, t, this.context);
+          Ee(this, t, this.context);
         } catch (r) {
           this._hasError = !0, t.onError && t.onError(r, this.context), t.errorFallback && this.shadowRoot && (this.shadowRoot.innerHTML = t.errorFallback(r, this.context));
         }
@@ -1792,90 +1792,90 @@ function nt(e, t = [], r = {}) {
   const n = {}, o = {}, s = {}, i = /([:@#]?)([a-zA-Z0-9-:\.]+)=("([^"\\]*(\\.[^"\\]*)*)"|'([^'\\]*(\\.[^'\\]*)*)')/g;
   let a;
   for (; a = i.exec(e); ) {
-    const c = a[1], f = a[2], p = (a[4] || a[6]) ?? "", g = p.match(/^{{(\d+)}}$/);
-    let l = g ? t[Number(g[1])] ?? null : p;
-    if (g || (l === "true" ? l = !0 : l === "false" ? l = !1 : l === "null" ? l = null : isNaN(Number(l)) || (l = Number(l))), c === ":")
-      typeof l == "boolean" ? o[f] = l : l != null && (typeof r[l] < "u" ? n[f] = r[l] : n[f] = l);
-    else if (c === "@") {
-      const b = "on" + f.charAt(0).toUpperCase() + f.slice(1);
-      n[b] = typeof l == "function" ? l : typeof r[l] == "function" ? r[l] : void 0;
-    } else if (c === "#") {
-      const [b, ...y] = f.split("."), m = [...y];
-      let h = l, d = [...m];
-      if (b === "model" && typeof h == "string" && h.includes(".")) {
-        const v = ["trim", "number", "lazy"], x = h.split(".");
-        let u = h;
+    const c = a[1], f = a[2], h = (a[4] || a[6]) ?? "", g = h.match(/^{{(\d+)}}$/);
+    let l = g ? t[Number(g[1])] ?? null : h;
+    if (g || (l === "true" ? l = !0 : l === "false" ? l = !1 : l === "null" ? l = null : isNaN(Number(l)) || (l = Number(l))), c === ":" && f === "class" || c === "#") {
+      const [x, ...m] = f.split("."), v = [...m];
+      let p = l, u = [...v];
+      if (x === "model" && typeof p == "string" && p.includes(".")) {
+        const y = ["trim", "number", "lazy"], b = p.split(".");
+        let d = p;
         const $ = [];
-        for (let w = x.length - 1; w > 0 && v.includes(x[w]); w--)
-          $.unshift(x[w]), u = x.slice(0, w).join(".");
-        h = u, d.push(...$);
+        for (let w = b.length - 1; w > 0 && y.includes(b[w]); w--)
+          $.unshift(b[w]), d = b.slice(0, w).join(".");
+        p = d, u.push(...$);
       }
-      s[b] = {
-        value: h,
-        modifiers: d
+      s[x] = {
+        value: p,
+        modifiers: u
       };
+    } else if (c === ":")
+      typeof l == "boolean" ? o[f] = l : l != null && (typeof r[l] < "u" ? n[f] = r[l] : n[f] = l);
+    else if (c === "@") {
+      const x = "on" + f.charAt(0).toUpperCase() + f.slice(1);
+      n[x] = typeof l == "function" ? l : typeof r[l] == "function" ? r[l] : void 0;
     } else f === "ref" ? n.ref = l : o[f] = l;
   }
   return { props: n, attrs: o, directives: s };
 }
 function ot(e, t, r) {
   const n = F.length > 0 ? F[F.length - 1] : void 0, o = r ?? n;
-  function s(u, $) {
-    return I("#text", {}, u, $);
+  function s(d, $) {
+    return I("#text", {}, d, $);
   }
   let i = "";
-  for (let u = 0; u < e.length; u++)
-    i += e[u], u < t.length && (i += `{{${u}}}`);
+  for (let d = 0; d < e.length; d++)
+    i += e[d], d < t.length && (i += `{{${d}}}`);
   const a = /<\/?([a-zA-Z0-9-]+)((?:\s+[^\s=>/]+(?:\s*=\s*(?:"(?:\\.|[^"])*"|'(?:\\.|[^'])*'|[^\s>]+))?)*)\s*\/?>|{{(\d+)}}|([^<]+)/g, c = [];
-  let f, p = [], g = null, l = {}, b, y = 0, m = [];
-  function h(u) {
-    !u || typeof u != "object" || X(u) || (u.props || u.attrs ? (u.props && (l.props || (l.props = {}), Object.assign(l.props, u.props)), u.attrs && (l.attrs || (l.attrs = {}), Object.keys(u.attrs).forEach(($) => {
+  let f, h = [], g = null, l = {}, x, m = 0, v = [];
+  function p(d) {
+    !d || typeof d != "object" || X(d) || (d.props || d.attrs ? (d.props && (l.props || (l.props = {}), Object.assign(l.props, d.props)), d.attrs && (l.attrs || (l.attrs = {}), Object.keys(d.attrs).forEach(($) => {
       if ($ === "style" && l.attrs.style) {
         const w = l.attrs.style.replace(
           /;?\s*$/,
           ""
-        ), _ = u.attrs.style.replace(/^;?\s*/, "");
-        l.attrs.style = w + "; " + _;
+        ), k = d.attrs.style.replace(/^;?\s*/, "");
+        l.attrs.style = w + "; " + k;
       } else if ($ === "class" && l.attrs.class) {
-        const w = l.attrs.class.trim().split(/\s+/).filter(Boolean), _ = u.attrs.class.trim().split(/\s+/).filter(Boolean), S = [
-          .../* @__PURE__ */ new Set([...w, ..._])
+        const w = l.attrs.class.trim().split(/\s+/).filter(Boolean), k = d.attrs.class.trim().split(/\s+/).filter(Boolean), _ = [
+          .../* @__PURE__ */ new Set([...w, ...k])
         ];
-        l.attrs.class = S.join(" ");
+        l.attrs.class = _.join(" ");
       } else
-        l.attrs[$] = u.attrs[$];
-    }))) : (l.props || (l.props = {}), Object.assign(l.props, u)));
-  }
-  function d(u, $) {
-    const w = g ? p : m;
-    if (X(u)) {
-      const _ = u.key ?? $;
-      let S = u.children;
+        l.attrs[$] = d.attrs[$];
+    }))) : (l.props || (l.props = {}), Object.assign(l.props, d)));
+  }
+  function u(d, $) {
+    const w = g ? h : v;
+    if (X(d)) {
+      const k = d.key ?? $;
+      let _ = d.children;
       w.push({
-        ...u,
-        key: _,
-        children: S
+        ...d,
+        key: k,
+        children: _
       });
       return;
     }
-    if (J(u)) {
-      w.push(rt(u, void 0));
+    if (J(d)) {
+      w.push(rt(d, void 0));
       return;
     }
-    if (Array.isArray(u)) {
-      if (u.length === 0) return;
-      for (let _ = 0; _ < u.length; _++) {
-        const S = u[_];
-        X(S) || J(S) || Array.isArray(S) ? d(S, `${$}-${_}`) : S !== null && typeof S == "object" ? h(S) : w.push(s(String(S), `${$}-${_}`));
+    if (Array.isArray(d)) {
+      if (d.length === 0) return;
+      for (let k = 0; k < d.length; k++) {
+        const _ = d[k];
+        X(_) || J(_) || Array.isArray(_) ? u(_, `${$}-${k}`) : _ !== null && typeof _ == "object" ? p(_) : w.push(s(String(_), `${$}-${k}`));
       }
       return;
     }
-    if (u !== null && typeof u == "object") {
-      h(u);
+    if (d !== null && typeof d == "object") {
+      p(d);
       return;
     }
-    w.push(s(String(u), $));
+    w.push(s(String(d), $));
   }
-  const v = /* @__PURE__ */ new Set([
+  const y = /* @__PURE__ */ new Set([
     "area",
     "base",
     "br",
@@ -1893,54 +1893,54 @@ function ot(e, t, r) {
   ]);
   for (; f = a.exec(i); )
     if (f[1]) {
-      const u = f[1], $ = f[0][1] === "/", w = f[0][f[0].length - 2] === "/" || v.has(u), {
-        props: _,
-        attrs: S,
+      const d = f[1], $ = f[0][1] === "/", w = f[0][f[0].length - 2] === "/" || y.has(d), {
+        props: k,
+        attrs: _,
         directives: C
-      } = nt(f[2] || "", t, o), k = { props: {}, attrs: {} };
-      for (const A in _) k.props[A] = _[A];
-      for (const A in S) k.attrs[A] = S[A];
-      for (const [A, T] of Object.entries(C)) {
-        if (A === "bind")
+      } = nt(f[2] || "", t, o), S = { props: {}, attrs: {} };
+      for (const E in k) S.props[E] = k[E];
+      for (const E in _) S.attrs[E] = _[E];
+      for (const [E, T] of Object.entries(C)) {
+        if (E === "bind")
           if (typeof T.value == "object" && T.value !== null)
-            for (const [E, j] of Object.entries(T.value))
-              typeof j == "boolean" ? k.attrs[E] = j : j != null && (k.attrs[E] = String(j));
-          else T.value != null && (k.attrs[A] = String(T.value));
-        if (["show", "class", "style"].includes(A) && (k.directives || (k.directives = {}), k.directives[A] = T), A === "show") {
-          const E = !!T.value;
-          k.attrs.style = (k.attrs.style || "") + (E ? "" : "; display: none !important");
-        } else if (A === "class") {
-          const E = T.value;
+            for (const [A, j] of Object.entries(T.value))
+              typeof j == "boolean" ? S.attrs[A] = j : j != null && (S.attrs[A] = String(j));
+          else T.value != null && (S.attrs[E] = String(T.value));
+        if (["show", "class", "style"].includes(E) && (S.directives || (S.directives = {}), S.directives[E] = T), E === "show") {
+          const A = !!T.value;
+          S.attrs.style = (S.attrs.style || "") + (A ? "" : "; display: none !important");
+        } else if (E === "class") {
+          const A = T.value;
           let j = [];
-          if (typeof E == "string")
-            j = E.split(/\s+/).filter(Boolean);
-          else if (Array.isArray(E)) {
-            for (const z of E)
-              if (typeof z == "string")
-                j.push(...z.split(/\s+/).filter(Boolean));
-              else if (z && typeof z == "object")
-                for (const [R, V] of Object.entries(z))
-                  V && j.push(...R.split(/\s+/).filter(Boolean));
-          } else if (E && typeof E == "object")
-            for (const [z, R] of Object.entries(E))
-              R && j.push(...z.split(/\s+/).filter(Boolean));
-          const H = k.attrs.class || "", q = [
+          if (typeof A == "string")
+            j = A.split(/\s+/).filter(Boolean);
+          else if (Array.isArray(A)) {
+            for (const R of A)
+              if (typeof R == "string")
+                j.push(...R.split(/\s+/).filter(Boolean));
+              else if (R && typeof R == "object")
+                for (const [N, V] of Object.entries(R))
+                  V && j.push(...N.split(/\s+/).filter(Boolean));
+          } else if (A && typeof A == "object")
+            for (const [R, N] of Object.entries(A))
+              N && j.push(...R.split(/\s+/).filter(Boolean));
+          const H = S.attrs.class || "", q = [
             .../* @__PURE__ */ new Set([
               ...H.split(/\s+/).filter(Boolean),
               ...j
             ])
           ];
-          k.attrs.class = q.join(" ");
-        } else if (A === "style") {
-          const E = T.value;
+          S.attrs.class = q.join(" ");
+        } else if (E === "style") {
+          const A = T.value;
           let j = "";
-          if (typeof E == "string")
-            j = E;
-          else if (E && typeof E == "object") {
+          if (typeof A == "string")
+            j = A;
+          else if (A && typeof A == "object") {
             const q = [];
-            for (const [z, R] of Object.entries(E))
-              if (R != null && R !== "") {
-                const V = z.replace(
+            for (const [R, N] of Object.entries(A))
+              if (N != null && N !== "") {
+                const V = R.replace(
                   /[A-Z]/g,
                   (ke) => `-${ke.toLowerCase()}`
                 ), we = [
@@ -1969,57 +1969,57 @@ function ot(e, t, r) {
                   "min-height",
                   "max-height"
                 ];
-                let le = String(R);
-                typeof R == "number" && we.includes(V) && (le = `${R}px`), q.push(`${V}: ${le}`);
+                let le = String(N);
+                typeof N == "number" && we.includes(V) && (le = `${N}px`), q.push(`${V}: ${le}`);
               }
             j = q.join("; ") + (q.length > 0 ? ";" : "");
           }
-          const H = k.attrs.style || "";
-          k.attrs.style = H + (H && !H.endsWith(";") ? "; " : "") + j;
+          const H = S.attrs.style || "";
+          S.attrs.style = H + (H && !H.endsWith(";") ? "; " : "") + j;
         }
       }
       const B = {};
-      for (const [A, T] of Object.entries(C))
-        ["bind", "show", "class", "style"].includes(A) || (B[A] = T);
-      if (Object.keys(B).length > 0 && (k.directives = B), $) {
-        const A = I(
+      for (const [E, T] of Object.entries(C))
+        ["bind", "show", "class", "style"].includes(E) || (B[E] = T);
+      if (Object.keys(B).length > 0 && (S.directives = B), $) {
+        const E = I(
           g,
           l,
-          p.length === 1 && J(p[0]) && p[0].tag === "#text" ? typeof p[0].children == "string" ? p[0].children : "" : p.length ? p : void 0,
-          b
+          h.length === 1 && J(h[0]) && h[0].tag === "#text" ? typeof h[0].children == "string" ? h[0].children : "" : h.length ? h : void 0,
+          x
         ), T = c.pop();
-        T ? (g = T.tag, l = T.props, b = T.key, p = T.children, p.push(A)) : (m.push(A), g = null, l = {}, b = void 0, p = []);
-      } else w ? g ? p.push(I(u, k, void 0, void 0)) : m.push(I(u, k, void 0, void 0)) : (g && c.push({
+        T ? (g = T.tag, l = T.props, x = T.key, h = T.children, h.push(E)) : (v.push(E), g = null, l = {}, x = void 0, h = []);
+      } else w ? g ? h.push(I(d, S, void 0, void 0)) : v.push(I(d, S, void 0, void 0)) : (g && c.push({
         tag: g,
         props: l,
-        children: p,
-        key: b
-      }), g = u, l = k, p = []);
+        children: h,
+        key: x
+      }), g = d, l = S, h = []);
     } else if (typeof f[3] < "u") {
-      const u = Number(f[3]), $ = t[u], w = `interp-${u}`;
-      d($, w);
+      const d = Number(f[3]), $ = t[d], w = `interp-${d}`;
+      u($, w);
     } else if (f[4]) {
-      const u = f[4], $ = g ? p : m, w = u.split(/({{\d+}})/);
-      for (const _ of w) {
-        if (!_) continue;
-        const S = _.match(/^{{(\d+)}}$/);
-        if (S) {
-          const C = Number(S[1]), k = t[C], B = `interp-${C}`;
-          d(k, B);
+      const d = f[4], $ = g ? h : v, w = d.split(/({{\d+}})/);
+      for (const k of w) {
+        if (!k) continue;
+        const _ = k.match(/^{{(\d+)}}$/);
+        if (_) {
+          const C = Number(_[1]), S = t[C], B = `interp-${C}`;
+          u(S, B);
         } else {
-          const C = `text-${y++}`;
-          $.push(s(_, C));
+          const C = `text-${m++}`;
+          $.push(s(k, C));
         }
       }
     }
-  const x = m.filter((u) => J(u) && u.tag === "#text" ? typeof u.children == "string" && u.children.trim() !== "" : !0);
-  return x.length === 1 ? x[0] : x.length > 1 ? x : I("div", {}, "", "fallback-root");
+  const b = v.filter((d) => J(d) && d.tag === "#text" ? typeof d.children == "string" && d.children.trim() !== "" : !0);
+  return b.length === 1 ? b[0] : b.length > 1 ? b : I("div", {}, "", "fallback-root");
 }
 function W(e, ...t) {
   const r = t[t.length - 1], n = typeof r == "object" && r && !Array.isArray(r) ? r : void 0;
   return ot(e, t, n);
 }
-const me = (e) => e ? typeof URLSearchParams > "u" ? {} : Object.fromEntries(new URLSearchParams(e)) : {}, N = (e, t) => {
+const me = (e) => e ? typeof URLSearchParams > "u" ? {} : Object.fromEntries(new URLSearchParams(e)) : {}, z = (e, t) => {
   for (const r of e) {
     const n = [], o = r.path.replace(/:[^/]+/g, (a) => (n.push(a.slice(1)), "([^/]+)")), s = new RegExp(`^${o}$`), i = t.match(s);
     if (i) {
@@ -2046,96 +2046,139 @@ async function it(e) {
 }
 function st(e) {
   const { routes: t, base: r = "", initialUrl: n } = e;
-  let o, s, i, a, c, f, p;
-  const g = async (m, h) => {
-    const d = t.find((v) => N([v], m.path).route !== null);
-    if (d?.beforeEnter)
+  let o, s, i, a, c, f, h;
+  const g = async (v, p) => {
+    const u = t.find((y) => z([y], v.path).route !== null);
+    if (u?.beforeEnter)
       try {
-        const v = await d.beforeEnter(m, h);
-        return typeof v == "string" ? (await y(v, !0), !1) : v !== !1;
-      } catch (v) {
-        return console.error("beforeEnter error", v), !1;
+        const y = await u.beforeEnter(v, p);
+        return typeof y == "string" ? (await m(y, !0), !1) : y !== !1;
+      } catch (y) {
+        return console.error("beforeEnter error", y), !1;
       }
     return !0;
-  }, l = async (m, h) => {
-    const d = t.find((v) => N([v], m.path).route !== null);
-    if (d?.onEnter)
+  }, l = async (v, p) => {
+    const u = t.find((y) => z([y], v.path).route !== null);
+    if (u?.onEnter)
       try {
-        const v = await d.onEnter(m, h);
-        return typeof v == "string" ? (await y(v, !0), !1) : v !== !1;
-      } catch (v) {
-        return console.error("onEnter error", v), !1;
+        const y = await u.onEnter(v, p);
+        return typeof y == "string" ? (await m(y, !0), !1) : y !== !1;
+      } catch (y) {
+        return console.error("onEnter error", y), !1;
       }
     return !0;
-  }, b = (m, h) => {
-    const d = t.find((v) => N([v], m.path).route !== null);
-    if (d?.afterEnter)
+  }, x = (v, p) => {
+    const u = t.find((y) => z([y], v.path).route !== null);
+    if (u?.afterEnter)
       try {
-        d.afterEnter(m, h);
-      } catch (v) {
-        console.error("afterEnter error", v);
+        u.afterEnter(v, p);
+      } catch (y) {
+        console.error("afterEnter error", y);
       }
-  }, y = async (m, h = !1) => {
+  }, m = async (v, p = !1) => {
     try {
-      const d = {
-        path: m.replace(r, "") || "/",
+      const u = {
+        path: v.replace(r, "") || "/",
         query: {}
-      }, v = N(t, d.path);
-      if (!v) throw new Error(`No route found for ${d.path}`);
-      const x = i.getState(), u = {
-        path: d.path,
-        params: v.params,
-        query: d.query
+      }, y = z(t, u.path);
+      if (!y) throw new Error(`No route found for ${u.path}`);
+      const b = i.getState(), d = {
+        path: u.path,
+        params: y.params,
+        query: u.query
       };
-      if (!await g(u, x) || !await l(u, x)) return;
-      typeof window < "u" && typeof document < "u" && (h ? window.history.replaceState({}, "", r + m) : window.history.pushState({}, "", r + m)), i.setState(u), b(u, x);
-    } catch (d) {
-      console.error("Navigation error:", d);
+      if (!await g(d, b) || !await l(d, b)) return;
+      typeof window < "u" && typeof document < "u" && (p ? window.history.replaceState({}, "", r + v) : window.history.pushState({}, "", r + v)), i.setState(d), x(d, b);
+    } catch (u) {
+      console.error("Navigation error:", u);
     }
   };
   if (typeof window < "u" && typeof document < "u") {
     o = () => {
-      const h = new URL(window.location.href), d = h.pathname.replace(r, "") || "/", v = me(h.search);
-      return { path: d, query: v };
+      const p = new URL(window.location.href), u = p.pathname.replace(r, "") || "/", y = me(p.search);
+      return { path: u, query: y };
     }, s = o();
-    const m = N(t, s.path);
+    const v = z(t, s.path);
     i = ce({
       path: s.path,
-      params: m.params,
+      params: v.params,
       query: s.query
-    }), a = async (h = !1) => {
-      const d = o();
-      await y(d.path, h);
-    }, window.addEventListener("popstate", () => a(!0)), c = (h) => y(h, !1), f = (h) => y(h, !0), p = () => window.history.back();
+    }), a = async (p = !1) => {
+      const u = o();
+      await m(u.path, p);
+    }, window.addEventListener("popstate", () => a(!0)), c = (p) => m(p, !1), f = (p) => m(p, !0), h = () => window.history.back();
   } else {
     o = () => {
-      const h = new URL(n || "/", "http://localhost"), d = h.pathname.replace(r, "") || "/", v = me(h.search);
-      return { path: d, query: v };
+      const u = new URL(n || "/", "http://localhost"), y = u.pathname.replace(r, "") || "/", b = me(u.search);
+      return { path: y, query: b };
     }, s = o();
-    const m = N(t, s.path);
+    const v = z(t, s.path);
     i = ce({
       path: s.path,
-      params: m.params,
+      params: v.params,
       query: s.query
     }), a = async () => {
-    }, c = async () => {
-    }, f = async () => {
-    }, p = () => {
+      const u = o();
+      await p(u.path);
+    };
+    const p = async (u) => {
+      try {
+        const y = {
+          path: u.replace(r, "") || "/",
+          query: {}
+        }, b = z(t, y.path);
+        if (!b) throw new Error(`No route found for ${y.path}`);
+        const d = i.getState(), $ = {
+          path: y.path,
+          params: b.params,
+          query: y.query
+        }, w = t.find((k) => z([k], $.path).route !== null);
+        if (w?.beforeEnter)
+          try {
+            const k = await w.beforeEnter($, d);
+            if (typeof k == "string") {
+              await p(k);
+              return;
+            }
+            if (k === !1) return;
+          } catch {
+            return;
+          }
+        if (w?.onEnter)
+          try {
+            const k = await w.onEnter($, d);
+            if (typeof k == "string") {
+              await p(k);
+              return;
+            }
+            if (k === !1) return;
+          } catch {
+            return;
+          }
+        if (i.setState($), w?.afterEnter)
+          try {
+            w.afterEnter($, d);
+          } catch {
+          }
+      } catch {
+      }
+    };
+    c = async (u) => p(u), f = async (u) => p(u), h = () => {
     };
   }
   return {
     store: i,
     push: c,
     replace: f,
-    back: p,
+    back: h,
     subscribe: i.subscribe,
-    matchRoute: (m) => N(t, m),
+    matchRoute: (v) => z(t, v),
     getCurrent: () => i.getState(),
     resolveRouteComponent: it
   };
 }
 function ht(e, t) {
-  return N(e, t);
+  return z(e, t);
 }
 function gt(e) {
   const t = st(e);
@@ -2168,6 +2211,7 @@ function gt(e) {
       ariaCurrentValue: { type: String, default: "page" },
       disabled: { type: Boolean, default: !1 },
       external: { type: Boolean, default: !1 },
+      class: { type: String, default: "" },
       style: { type: String, default: ve`
         [aria-disabled="true"] {
           pointer-events: none;
@@ -2177,37 +2221,36 @@ function gt(e) {
     },
     style: (r) => r.style,
     render: (r) => {
-      const n = t.getCurrent(), o = r.to, s = r.exact, i = r.exactActiveClass, a = r.activeClass, c = r.ariaCurrentValue, f = r.tag, p = r.disabled, g = r.external, l = n.path === o, b = s ? l : n && typeof n.path == "string" ? n.path.startsWith(o) : !1, y = l ? i : b ? a : "", m = l ? `aria-current="${c}"` : "", h = f === "button", d = p ? h ? 'disabled aria-disabled="true" tabindex="-1"' : 'aria-disabled="true" tabindex="-1"' : "", v = g && (f === "a" || !f) ? 'target="_blank" rel="noopener noreferrer"' : "";
+      const n = t.getCurrent(), o = r.to, s = r.exact, i = r.exactActiveClass, a = r.activeClass, c = r.ariaCurrentValue, f = r.tag, h = r.disabled, g = r.external, l = n.path === o, x = s ? l : n && typeof n.path == "string" ? n.path.startsWith(o) : !1, m = l ? i : x ? a : "", v = l ? `aria-current="${c}"` : "", p = f === "button", u = h ? p ? 'disabled aria-disabled="true" tabindex="-1"' : 'aria-disabled="true" tabindex="-1"' : "", y = g && (f === "a" || !f) ? 'target="_blank" rel="noopener noreferrer"' : "";
       return W`
-        ${$e().when(h, W`
+        ${$e().when(p, W`
             <button
               part="button"
-              class="${y}"
-              ${m}
-              ${d}
+              :class="${r.class} ${m}"
               ${v}
-              data-on-click="navigate"
+              ${u}
+              ${y}
+              @click="navigate"
             ><slot></slot></button>
           `).otherwise(W`
             <a
               part="link"
               href="${o}"
-              class="${y}"
-              ${m}
-              ${d}
+              :class="${r.class} ${m}"
               ${v}
-              data-on-click="navigate"
+              ${u}
+              ${y}
+              @click="navigate"
             ><slot></slot></a>
           `).done()}
       `;
     },
     navigate: (r, n) => {
-      const { disabled: o, external: s, tag: i, replace: a, to: c } = n.props;
-      if (o) {
+      if (n.disabled) {
         r.preventDefault();
         return;
       }
-      s && (i === "a" || !i) || (r.preventDefault(), a ? t.replace(c) : t.push(c));
+      n.external && (n.tag === "a" || !n.tag) || (r.preventDefault(), n.replace ? t.replace(n.to) : t.push(n.to));
     }
   }), t;
 }
@@ -2223,7 +2266,7 @@ export {
   gt as initRouter,
   pt as listen,
   $e as match,
-  N as matchRoute,
+  z as matchRoute,
   ht as matchRouteSSR,
   ut as off,
   ft as on,