@jasonshimmy/custom-elements-runtime 0.1.0 → 0.1.2

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

@@ -1,18 +1,18 @@
 function Re(e) {
   let t = new Proxy(e, {
-    set: (o, l, f) => (o[l] = f, s(), !0)
+    set: (i, l, c) => (i[l] = c, s(), !0)
   });
   const n = [];
-  function r(o) {
-    n.push(o), o(t);
+  function r(i) {
+    n.push(i), i(t);
   }
-  function i() {
+  function o() {
     return t;
   }
   function s() {
-    n.forEach((o) => o(t));
+    n.forEach((i) => i(t));
   }
-  return { subscribe: r, getState: i };
+  return { subscribe: r, getState: o };
 }
 class B extends EventTarget {
   handlers = {};
@@ -31,10 +31,10 @@ class B extends EventTarget {
    * @param data - Optional event payload
    */
   emit(t, n) {
-    const r = Date.now(), i = this.eventCounters.get(t);
-    if (!i || r - i.window > 1e3)
+    const r = Date.now(), o = this.eventCounters.get(t);
+    if (!o || r - o.window > 1e3)
       this.eventCounters.set(t, { count: 1, window: r });
-    else if (i.count++, i.count > 50 && (console.error(`Event storm detected for "${t}": ${i.count} events in 1 second. Throttling...`), i.count > 100)) {
+    else if (o.count++, o.count > 50 && (console.error(`Event storm detected for "${t}": ${o.count} events in 1 second. Throttling...`), o.count > 100)) {
       console.warn(`Blocking further "${t}" events to prevent infinite loop`);
       return;
     }
@@ -45,9 +45,9 @@ class B extends EventTarget {
       cancelable: !0
     }));
     const s = this.handlers[t];
-    s && s.forEach((o) => {
+    s && s.forEach((i) => {
       try {
-        o(n);
+        i(n);
       } catch (l) {
         console.error(`Error in global event handler for "${t}":`, l);
       }
@@ -93,8 +93,8 @@ class B extends EventTarget {
    */
   once(t, n) {
     return new Promise((r) => {
-      const i = this.on(t, (s) => {
-        i(), n(s), r(s);
+      const o = this.on(t, (s) => {
+        o(), n(s), r(s);
       });
     });
   }
@@ -140,8 +140,8 @@ class B extends EventTarget {
 }
 const Be = B.getInstance();
 function P(e, t = {}, n, r) {
-  const i = r ?? t.key;
-  return { tag: e, key: i, props: t, children: n };
+  const o = r ?? t.key;
+  return { tag: e, key: o, props: t, children: n };
 }
 function I(e) {
   return !!e && typeof e == "object" && (e.type === "AnchorBlock" || e.tag === "#anchor");
@@ -153,63 +153,63 @@ function le(e, t) {
   return e.key != null ? e : { ...e, key: t };
 }
 function ce(e, t = [], n = {}) {
-  const r = {}, i = {}, s = {}, o = /([:@#]?)([a-zA-Z0-9-:\.]+)=("([^"\\]*(\\.[^"\\]*)*)"|'([^'\\]*(\\.[^'\\]*)*)')/g;
+  const r = {}, o = {}, s = {}, i = /([:@#]?)([a-zA-Z0-9-:\.]+)=("([^"\\]*(\\.[^"\\]*)*)"|'([^'\\]*(\\.[^'\\]*)*)')/g;
   let l;
-  for (; l = o.exec(e); ) {
-    const f = l[1], u = l[2], p = (l[4] || l[6]) ?? "", d = p.match(/^{{(\d+)}}$/);
-    let c = d ? t[Number(d[1])] ?? null : p;
-    if (d || (c === "true" ? c = !0 : c === "false" ? c = !1 : c === "null" ? c = null : isNaN(Number(c)) || (c = Number(c))), f === ":")
-      typeof c == "boolean" ? i[u] = c : c != null && (r[u] = c);
-    else if (f === "@") {
-      const y = "on" + u.charAt(0).toUpperCase() + u.slice(1);
-      r[y] = typeof c == "function" ? c : typeof n[c] == "function" ? n[c] : void 0;
-    } else if (f === "#") {
-      const [y, ...h] = u.split("."), S = [...h];
-      let m = c, a = [...S];
-      if (y === "model" && typeof m == "string" && m.includes(".")) {
-        const b = ["trim", "number", "lazy"], g = m.split(".");
-        let x = m;
+  for (; l = i.exec(e); ) {
+    const c = l[1], d = l[2], p = (l[4] || l[6]) ?? "", u = p.match(/^{{(\d+)}}$/);
+    let f = u ? t[Number(u[1])] ?? null : p;
+    if (u || (f === "true" ? f = !0 : f === "false" ? f = !1 : f === "null" ? f = null : isNaN(Number(f)) || (f = Number(f))), c === ":")
+      typeof f == "boolean" ? o[d] = f : f != null && (r[d] = f);
+    else if (c === "@") {
+      const m = "on" + d.charAt(0).toUpperCase() + d.slice(1);
+      r[m] = typeof f == "function" ? f : typeof n[f] == "function" ? n[f] : void 0;
+    } else if (c === "#") {
+      const [m, ...h] = d.split("."), S = [...h];
+      let y = f, a = [...S];
+      if (m === "model" && typeof y == "string" && y.includes(".")) {
+        const b = ["trim", "number", "lazy"], g = y.split(".");
+        let x = y;
         const w = [];
         for (let k = g.length - 1; k > 0 && b.includes(g[k]); k--)
           w.unshift(g[k]), x = g.slice(0, k).join(".");
-        m = x, a.push(...w);
+        y = x, a.push(...w);
       }
-      s[y] = {
-        value: m,
+      s[m] = {
+        value: y,
         modifiers: a
       };
-    } else u === "ref" ? r.ref = c : i[u] = c;
+    } else d === "ref" ? r.ref = f : o[d] = f;
   }
-  return { props: r, attrs: i, directives: s };
+  return { props: r, attrs: o, directives: s };
 }
 function fe(e, t, n) {
   function r(a, b) {
     return P("#text", {}, a, b);
   }
-  let i = "";
+  let o = "";
   for (let a = 0; a < e.length; a++)
-    i += e[a], a < t.length && (i += `{{${a}}}`);
-  const s = /<\/?([a-zA-Z0-9-]+)([^>]*)\/?>|{{(\d+)}}|([^<]+)/g, o = [];
-  let l = null, f, u = [], p = null, d = {}, c, y = 0, h = [];
+    o += e[a], a < t.length && (o += `{{${a}}}`);
+  const s = /<\/?([a-zA-Z0-9-]+)([^>]*)\/?>|{{(\d+)}}|([^<]+)/g, i = [];
+  let l = null, c, d = [], p = null, u = {}, f, m = 0, h = [];
   function S(a) {
-    !a || typeof a != "object" || I(a) || (a.props || a.attrs ? (a.props && (d.props || (d.props = {}), Object.assign(d.props, a.props)), a.attrs && (d.attrs || (d.attrs = {}), Object.keys(a.attrs).forEach((b) => {
-      if (b === "style" && d.attrs.style) {
-        const g = d.attrs.style.replace(
+    !a || typeof a != "object" || I(a) || (a.props || a.attrs ? (a.props && (u.props || (u.props = {}), Object.assign(u.props, a.props)), a.attrs && (u.attrs || (u.attrs = {}), Object.keys(a.attrs).forEach((b) => {
+      if (b === "style" && u.attrs.style) {
+        const g = u.attrs.style.replace(
           /;?\s*$/,
           ""
         ), x = a.attrs.style.replace(/^;?\s*/, "");
-        d.attrs.style = g + "; " + x;
-      } else if (b === "class" && d.attrs.class) {
-        const g = d.attrs.class.trim().split(/\s+/).filter(Boolean), x = a.attrs.class.trim().split(/\s+/).filter(Boolean), w = [
+        u.attrs.style = g + "; " + x;
+      } else if (b === "class" && u.attrs.class) {
+        const g = u.attrs.class.trim().split(/\s+/).filter(Boolean), x = a.attrs.class.trim().split(/\s+/).filter(Boolean), w = [
           .../* @__PURE__ */ new Set([...g, ...x])
         ];
-        d.attrs.class = w.join(" ");
+        u.attrs.class = w.join(" ");
       } else
-        d.attrs[b] = a.attrs[b];
-    }))) : (d.props || (d.props = {}), Object.assign(d.props, a)));
+        u.attrs[b] = a.attrs[b];
+    }))) : (u.props || (u.props = {}), Object.assign(u.props, a)));
   }
-  function m(a, b) {
-    const g = p ? u : h;
+  function y(a, b) {
+    const g = p ? d : h;
     if (I(a)) {
       const x = a.key ?? b;
       let w = a.children;
@@ -228,7 +228,7 @@ function fe(e, t, n) {
       if (a.length === 0) return;
       for (let x = 0; x < a.length; x++) {
         const w = a[x];
-        I(w) || R(w) || Array.isArray(w) ? m(w, `${b}-${x}`) : w !== null && typeof w == "object" ? S(w) : g.push(r(String(w), `${b}-${x}`));
+        I(w) || R(w) || Array.isArray(w) ? y(w, `${b}-${x}`) : w !== null && typeof w == "object" ? S(w) : g.push(r(String(w), `${b}-${x}`));
       }
       return;
     }
@@ -238,13 +238,13 @@ function fe(e, t, n) {
     }
     g.push(r(String(a), b));
   }
-  for (; f = s.exec(i); )
-    if (f[1]) {
-      const a = f[1], b = f[0][1] === "/", g = f[0][f[0].length - 2] === "/", {
+  for (; c = s.exec(o); )
+    if (c[1]) {
+      const a = c[1], b = c[0][1] === "/", g = c[0][c[0].length - 2] === "/", {
         props: x,
         attrs: w,
         directives: k
-      } = ce(f[2] || "", t, n), $ = { props: {}, attrs: {} };
+      } = ce(c[2] || "", t, n), $ = { props: {}, attrs: {} };
       for (const v in x) $.props[v] = x[v];
       for (const v in w) $.attrs[v] = w[v];
       for (const [v, _] of Object.entries(k))
@@ -271,20 +271,20 @@ function fe(e, t, n) {
           } else if (A && typeof A == "object")
             for (const [j, L] of Object.entries(A))
               L && E.push(...j.split(/\s+/).filter(Boolean));
-          const M = $.attrs.class || "", O = [
+          const O = $.attrs.class || "", M = [
             .../* @__PURE__ */ new Set([
-              ...M.split(/\s+/).filter(Boolean),
+              ...O.split(/\s+/).filter(Boolean),
               ...E
             ])
           ];
-          $.attrs.class = O.join(" ");
+          $.attrs.class = M.join(" ");
         } else if (v === "style") {
           const A = _.value;
           let E = "";
           if (typeof A == "string")
             E = A;
           else if (A && typeof A == "object") {
-            const O = [];
+            const M = [];
             for (const [j, L] of Object.entries(A))
               if (L != null && L !== "") {
                 const N = j.replace(
@@ -317,12 +317,12 @@ function fe(e, t, n) {
                   "max-height"
                 ];
                 let X = String(L);
-                typeof L == "number" && se.includes(N) && (X = `${L}px`), O.push(`${N}: ${X}`);
+                typeof L == "number" && se.includes(N) && (X = `${L}px`), M.push(`${N}: ${X}`);
               }
-            E = O.join("; ") + (O.length > 0 ? ";" : "");
+            E = M.join("; ") + (M.length > 0 ? ";" : "");
           }
-          const M = $.attrs.style || "";
-          $.attrs.style = M + (M && !M.endsWith(";") ? "; " : "") + E;
+          const O = $.attrs.style || "";
+          $.attrs.style = O + (O && !O.endsWith(";") ? "; " : "") + E;
         }
       const C = {};
       for (const [v, _] of Object.entries(k))
@@ -330,30 +330,30 @@ function fe(e, t, n) {
       if (Object.keys(C).length > 0 && ($.directives = C), b) {
         const v = P(
           p,
-          d,
-          u.length === 1 && R(u[0]) && u[0].tag === "#text" ? typeof u[0].children == "string" ? u[0].children : "" : u.length ? u : void 0,
-          c
-        ), _ = o.pop();
-        _ ? (p = _.tag, d = _.props, c = _.key, u = _.children, u.push(v)) : l = v;
-      } else g ? (p ? u : h).push(P(a, $, void 0, void 0)) : (p && o.push({
+          u,
+          d.length === 1 && R(d[0]) && d[0].tag === "#text" ? typeof d[0].children == "string" ? d[0].children : "" : d.length ? d : void 0,
+          f
+        ), _ = i.pop();
+        _ ? (p = _.tag, u = _.props, f = _.key, d = _.children, d.push(v)) : l = v;
+      } else g ? (p ? d : h).push(P(a, $, void 0, void 0)) : (p && i.push({
         tag: p,
-        props: d,
-        children: u,
-        key: c
-      }), p = a, d = $, u = []);
-    } else if (typeof f[3] < "u") {
-      const a = Number(f[3]), b = t[a], g = `interp-${a}`;
-      m(b, g);
-    } else if (f[4]) {
-      const a = f[4], b = p ? u : h, g = a.split(/({{\d+}})/);
+        props: u,
+        children: d,
+        key: f
+      }), p = a, u = $, d = []);
+    } else if (typeof c[3] < "u") {
+      const a = Number(c[3]), b = t[a], g = `interp-${a}`;
+      y(b, g);
+    } else if (c[4]) {
+      const a = c[4], b = p ? d : h, g = a.split(/({{\d+}})/);
       for (const x of g) {
         if (!x) continue;
         const w = x.match(/^{{(\d+)}}$/);
         if (w) {
           const k = Number(w[1]), $ = t[k], C = `interp-${k}`;
-          m($, C);
+          y($, C);
         } else {
-          const k = `text-${y++}`;
+          const k = `text-${m++}`;
           b.push(r(x, k));
         }
       }
@@ -371,17 +371,17 @@ function fe(e, t, n) {
   }
   return P("div", {}, "", "fallback-root");
 }
-function Me(e, ...t) {
+function Oe(e, ...t) {
   const n = t[t.length - 1], r = typeof n == "object" && n && !Array.isArray(n) ? n : void 0;
   return fe(e, t, r);
 }
-function Oe(e, t) {
+function Me(e, t) {
   return K(e ? t : [], "when-block");
 }
 function Ne(e, t) {
   return e.map((n, r) => {
-    const i = typeof n == "object" ? n?.key ?? n?.id ?? `idx-${r}` : String(n);
-    return K(t(n, r), `each-${i}`);
+    const o = typeof n == "object" ? n?.key ?? n?.id ?? `idx-${r}` : String(n);
+    return K(t(n, r), `each-${o}`);
   });
 }
 function Pe() {
@@ -394,11 +394,11 @@ function Pe() {
       return e.push([!0, t]), this;
     },
     done() {
-      return de(...e);
+      return ue(...e);
     }
   };
 }
-function de(...e) {
+function ue(...e) {
   for (let t = 0; t < e.length; t++) {
     const [n, r] = e[t];
     if (n) return [K(r, `whenChain-branch-${t}`)];
@@ -417,54 +417,54 @@ function z(e, t) {
   return t.split(".").reduce((n, r) => n?.[r], e);
 }
 function Y(e, t, n) {
-  const r = t.split("."), i = r.pop();
-  if (!i) return;
-  const s = r.reduce((o, l) => (l in o || (o[l] = {}), o[l]), e);
-  s[i] = n;
+  const r = t.split("."), o = r.pop();
+  if (!o) return;
+  const s = r.reduce((i, l) => (l in i || (i[l] = {}), i[l]), e);
+  s[o] = n;
 }
-function ue(e, t, n, r, i, s, o) {
+function de(e, t, n, r, o, s, i) {
   if (!s) return;
-  const l = t.includes("lazy"), f = t.includes("trim"), u = t.includes("number"), p = () => {
-    const m = s._state || s;
-    return z(m, e);
-  }, d = p();
-  let c = "text";
-  const y = r?.type;
-  if (o instanceof HTMLInputElement ? c = y || o.type || "text" : o instanceof HTMLSelectElement ? c = "select" : o instanceof HTMLTextAreaElement && (c = "textarea"), c === "checkbox")
-    if (Array.isArray(d)) {
-      const m = o?.getAttribute("value") || r?.value || "", a = d.includes(m);
-      o && o.checked !== a && (n.checked = a);
+  const l = t.includes("lazy"), c = t.includes("trim"), d = t.includes("number"), p = () => {
+    const y = s._state || s;
+    return z(y, e);
+  }, u = p();
+  let f = "text";
+  const m = r?.type;
+  if (i instanceof HTMLInputElement ? f = m || i.type || "text" : i instanceof HTMLSelectElement ? f = "select" : i instanceof HTMLTextAreaElement && (f = "textarea"), f === "checkbox")
+    if (Array.isArray(u)) {
+      const y = i?.getAttribute("value") || r?.value || "", a = u.includes(y);
+      i && i.checked !== a && (n.checked = a);
     } else {
-      const m = o?.getAttribute("true-value") || !0, a = d === m;
-      o && o.checked !== a && (n.checked = a);
+      const y = i?.getAttribute("true-value") || !0, a = u === y;
+      i && i.checked !== a && (n.checked = a);
     }
-  else if (c === "radio") {
-    const m = r?.value || "", a = d === m;
-    o && o.checked !== a && (n.checked = a);
-  } else if (c === "select")
-    if (o && o.hasAttribute("multiple")) {
-      const m = o, a = Array.isArray(d) ? d : [];
+  else if (f === "radio") {
+    const y = r?.value || "", a = u === y;
+    i && i.checked !== a && (n.checked = a);
+  } else if (f === "select")
+    if (i && i.hasAttribute("multiple")) {
+      const y = i, a = Array.isArray(u) ? u : [];
       setTimeout(() => {
-        Array.from(m.options).forEach((b) => {
+        Array.from(y.options).forEach((b) => {
           const g = a.includes(b.value);
           b.selected !== g && (b.selected = g);
         });
       }, 0);
     } else
       setTimeout(() => {
-        o instanceof HTMLSelectElement && o.value !== String(d) && (o.value = String(d));
+        i instanceof HTMLSelectElement && i.value !== String(u) && (i.value = String(u));
       }, 0);
   else {
-    const m = String(d ?? "");
-    (!o || o.value !== m) && (n.value = d);
+    const y = String(u ?? "");
+    (!i || i.value !== y) && (n.value = u);
   }
-  const h = l || c === "checkbox" || c === "radio" || c === "select" ? "change" : "input", S = (m) => {
-    if (m.isComposing || i._isComposing || m.isTrusted === !1) return;
-    const a = m.target;
+  const h = l || f === "checkbox" || f === "radio" || f === "select" ? "change" : "input", S = (y) => {
+    if (y.isComposing || o._isComposing || y.isTrusted === !1) return;
+    const a = y.target;
     if (a._modelUpdating) return;
     const b = p();
     let g = a.value;
-    if (c === "checkbox")
+    if (f === "checkbox")
       if (Array.isArray(b)) {
         const $ = a.getAttribute("value") || "", C = [...b];
         if (a.checked)
@@ -478,35 +478,35 @@ function ue(e, t, n, r, i, s, o) {
         const $ = a.getAttribute("true-value") || !0, C = a.getAttribute("false-value") || !1;
         g = a.checked ? $ : C;
       }
-    else if (c === "radio")
+    else if (f === "radio")
       g = a.getAttribute("value") || a.value;
-    else if (c === "select" && a.multiple) {
+    else if (f === "select" && a.multiple) {
       const $ = a;
       g = Array.from($.selectedOptions).map(
         (C) => C.value
       );
-    } else if (f && (g = g.trim()), u) {
+    } else if (c && (g = g.trim()), d) {
       const $ = Number(g);
       isNaN($) || (g = $);
     }
     const x = s._state || s, w = z(x, e);
     if (Array.isArray(g) && Array.isArray(w) ? JSON.stringify([...g].sort()) !== JSON.stringify([...w].sort()) : g !== w) {
-      const $ = m.target;
+      const $ = y.target;
       $._modelUpdating = !0, Y(x, e, g), setTimeout(() => {
         $._modelUpdating = !1;
       }, 0), s._requestRender && s._requestRender();
     }
   };
-  if (i[h] = S, c === "text" || c === "textarea") {
-    const m = () => {
-      i._isComposing = !0;
+  if (o[h] = S, f === "text" || f === "textarea") {
+    const y = () => {
+      o._isComposing = !0;
     }, a = (b) => {
-      i._isComposing = !1;
+      o._isComposing = !1;
       const g = b.target;
       setTimeout(() => {
         if (g) {
           let x = g.value;
-          if (f && (x = x.trim()), u) {
+          if (c && (x = x.trim()), d) {
             const C = Number(x);
             isNaN(C) || (x = C);
           }
@@ -517,57 +517,57 @@ function ue(e, t, n, r, i, s, o) {
         }
       }, 0);
     };
-    i.compositionstart = m, i.compositionend = a;
+    o.compositionstart = y, o.compositionend = a;
   }
 }
 function pe(e, t, n, r) {
   if (r)
     try {
-      const i = JSON.parse(e);
-      if (typeof i == "object")
-        for (const [s, o] of Object.entries(i))
-          t[s] = o;
+      const o = JSON.parse(e);
+      if (typeof o == "object")
+        for (const [s, i] of Object.entries(o))
+          t[s] = i;
     } catch {
-      const i = z(r, e);
-      n[e] = i;
+      const o = z(r, e);
+      n[e] = o;
     }
 }
 function he(e, t, n) {
   if (!n) return;
-  const r = z(n, e), i = t.style || "", s = r ? "" : "none";
-  if (i) {
-    const o = i.split(";").filter(Boolean), l = o.findIndex(
-      (f) => f.trim().startsWith("display:")
+  const r = z(n, e), o = t.style || "", s = r ? "" : "none";
+  if (o) {
+    const i = o.split(";").filter(Boolean), l = i.findIndex(
+      (c) => c.trim().startsWith("display:")
     );
-    l >= 0 ? o[l] = `display: ${s}` : o.push(`display: ${s}`), t.style = o.join("; ");
+    l >= 0 ? i[l] = `display: ${s}` : i.push(`display: ${s}`), t.style = i.join("; ");
   } else
     t.style = `display: ${s}`;
 }
 function ge(e, t, n) {
   if (!n) return;
   const r = z(n, e);
-  let i = [];
-  typeof r == "string" ? i = [r] : Array.isArray(r) ? i = r.filter(Boolean) : typeof r == "object" && (i = Object.entries(r).filter(([, l]) => !!l).map(([l]) => l));
-  const s = t.class || "", o = s ? `${s} ${i.join(" ")}`.trim() : i.join(" ");
-  o && (t.class = o);
+  let o = [];
+  typeof r == "string" ? o = [r] : Array.isArray(r) ? o = r.filter(Boolean) : typeof r == "object" && (o = Object.entries(r).filter(([, l]) => !!l).map(([l]) => l));
+  const s = t.class || "", i = s ? `${s} ${o.join(" ")}`.trim() : o.join(" ");
+  i && (t.class = i);
 }
-function ye(e, t, n) {
+function me(e, t, n) {
   let r;
   if (typeof e == "string") {
     if (!n) return;
     r = z(n, e);
   } else
     r = e;
-  let i = "";
+  let o = "";
   if (typeof r == "string")
-    i = r;
+    o = r;
   else if (r && typeof r == "object") {
-    const o = [];
-    for (const [l, f] of Object.entries(r))
-      if (f != null && f !== "") {
-        const u = l.replace(
+    const i = [];
+    for (const [l, c] of Object.entries(r))
+      if (c != null && c !== "") {
+        const d = l.replace(
           /[A-Z]/g,
-          (c) => `-${c.toLowerCase()}`
+          (f) => `-${f.toLowerCase()}`
         ), p = [
           "width",
           "height",
@@ -594,75 +594,75 @@ function ye(e, t, n) {
           "min-height",
           "max-height"
         ];
-        let d = String(f);
-        typeof f == "number" && p.includes(u) && (d = `${f}px`), o.push(`${u}: ${d}`);
+        let u = String(c);
+        typeof c == "number" && p.includes(d) && (u = `${c}px`), i.push(`${d}: ${u}`);
       }
-    i = o.join("; ") + (o.length > 0 ? ";" : "");
+    o = i.join("; ") + (i.length > 0 ? ";" : "");
   }
   const s = t.style || "";
-  t.style = s + (s && !s.endsWith(";") ? "; " : "") + i;
+  t.style = s + (s && !s.endsWith(";") ? "; " : "") + o;
 }
 function ie(e, t, n, r) {
-  const i = {}, s = { ...r || {} }, o = {};
-  for (const [l, f] of Object.entries(e)) {
-    const { value: u, modifiers: p } = f;
+  const o = {}, s = { ...r || {} }, i = {};
+  for (const [l, c] of Object.entries(e)) {
+    const { value: d, modifiers: p } = c;
     switch (l) {
       case "model":
-        ue(
-          typeof u == "string" ? u : String(u),
+        de(
+          typeof d == "string" ? d : String(d),
           p,
-          i,
-          s,
           o,
+          s,
+          i,
           t,
           n
         );
         break;
       case "bind":
-        pe(u, i, s, t);
+        pe(d, o, s, t);
         break;
       case "show":
-        he(u, s, t);
+        he(d, s, t);
         break;
       case "class":
-        ge(u, s, t);
+        ge(d, s, t);
         break;
       case "style":
-        ye(u, s, t);
+        me(d, s, t);
         break;
     }
   }
-  return { props: i, attrs: s, listeners: o };
+  return { props: o, attrs: s, listeners: i };
 }
 function Z(e, t) {
   if (Array.isArray(e)) {
     const s = /* @__PURE__ */ new Set();
-    return e.map((o) => {
-      if (!o || typeof o != "object") return o;
-      let l = o.props?.key ?? o.key;
+    return e.map((i) => {
+      if (!i || typeof i != "object") return i;
+      let l = i.props?.key ?? i.key;
       if (!l) {
-        const d = o.tag || "node", c = o.props?.attrs?.id ?? o.props?.attrs?.name ?? o.props?.attrs?.["data-key"] ?? "";
-        l = c ? `${t}:${d}:${c}` : `${t}:${d}`;
+        const u = i.tag || "node", f = i.props?.attrs?.id ?? i.props?.attrs?.name ?? i.props?.attrs?.["data-key"] ?? "";
+        l = f ? `${t}:${u}:${f}` : `${t}:${u}`;
       }
-      let f = l, u = 1;
-      for (; s.has(f); )
-        f = `${l}#${u++}`;
-      s.add(f);
-      let p = o.children;
-      return Array.isArray(p) && (p = Z(p, f)), { ...o, key: f, children: p };
+      let c = l, d = 1;
+      for (; s.has(c); )
+        c = `${l}#${d++}`;
+      s.add(c);
+      let p = i.children;
+      return Array.isArray(p) && (p = Z(p, c)), { ...i, key: c, children: p };
     });
   }
   const n = e;
-  let r = n.props?.key ?? n.key ?? t, i = n.children;
-  return Array.isArray(i) && (i = Z(i, r)), { ...n, key: r, children: i };
+  let r = n.props?.key ?? n.key ?? t, o = n.children;
+  return Array.isArray(o) && (o = Z(o, r)), { ...n, key: r, children: o };
 }
-function me(e, t, n, r) {
-  const i = n.directives ?? {}, s = ie(
-    i,
+function ye(e, t, n, r) {
+  const o = n.directives ?? {}, s = ie(
+    o,
     r,
     e,
     n.attrs
-  ), o = {
+  ), i = {
     ...t.props,
     ...n.props,
     ...s.props
@@ -670,105 +670,105 @@ function me(e, t, n, r) {
     ...t.attrs,
     ...n.attrs,
     ...s.attrs
-  }, f = t.props ?? {}, u = o;
-  for (const c in { ...f, ...u }) {
-    const y = f[c], h = u[c];
-    y !== h && (c === "value" && (e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement || e instanceof HTMLSelectElement) ? e.value !== h && (e.value = h ?? "") : c === "checked" && e instanceof HTMLInputElement ? e.checked = !!h : c.startsWith("on") && typeof h == "function" ? (typeof y == "function" && e.removeEventListener(c.slice(2).toLowerCase(), y), e.addEventListener(c.slice(2).toLowerCase(), h)) : h == null || h === !1 ? e.removeAttribute(c) : e.setAttribute(c, String(h)));
+  }, c = t.props ?? {}, d = i;
+  for (const f in { ...c, ...d }) {
+    const m = c[f], h = d[f];
+    m !== h && (f === "value" && (e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement || e instanceof HTMLSelectElement) ? e.value !== h && (e.value = h ?? "") : f === "checked" && e instanceof HTMLInputElement ? e.checked = !!h : f.startsWith("on") && typeof h == "function" ? (typeof m == "function" && e.removeEventListener(f.slice(2).toLowerCase(), m), e.addEventListener(f.slice(2).toLowerCase(), h)) : h == null || h === !1 ? e.removeAttribute(f) : e.setAttribute(f, String(h)));
   }
-  for (const [c, y] of Object.entries(
+  for (const [f, m] of Object.entries(
     s.listeners || {}
   ))
-    e.addEventListener(c, y);
-  const p = t.attrs ?? {}, d = l;
-  for (const c in { ...p, ...d }) {
-    const y = p[c], h = d[c];
-    y !== h && (h == null || h === !1 ? e.removeAttribute(c) : e.setAttribute(c, String(h)));
+    e.addEventListener(f, m);
+  const p = t.attrs ?? {}, u = l;
+  for (const f in { ...p, ...u }) {
+    const m = p[f], h = u[f];
+    m !== h && (h == null || h === !1 ? e.removeAttribute(f) : e.setAttribute(f, String(h)));
   }
 }
 function T(e, t, n) {
   if (typeof e == "string")
     return document.createTextNode(e);
   if (e.tag === "#text") {
-    const d = document.createTextNode(
+    const u = document.createTextNode(
       typeof e.children == "string" ? e.children : ""
     );
-    return e.key != null && (d.key = e.key), d;
+    return e.key != null && (u.key = e.key), u;
   }
   if (e.tag === "#anchor") {
-    const d = e, c = Array.isArray(d.children) ? d.children : [], y = document.createTextNode(""), h = document.createTextNode("");
-    d.key != null && (y.key = `${d.key}:start`, h.key = `${d.key}:end`), d._startNode = y, d._endNode = h;
+    const u = e, f = Array.isArray(u.children) ? u.children : [], m = document.createTextNode(""), h = document.createTextNode("");
+    u.key != null && (m.key = `${u.key}:start`, h.key = `${u.key}:end`), u._startNode = m, u._endNode = h;
     const S = document.createDocumentFragment();
-    S.appendChild(y);
-    for (const m of c)
-      S.appendChild(T(m, t));
+    S.appendChild(m);
+    for (const y of f)
+      S.appendChild(T(y, t));
     return S.appendChild(h), S;
   }
   const r = document.createElement(e.tag);
   e.key != null && (r.key = e.key);
-  const { props: i = {}, attrs: s = {}, directives: o = {} } = e.props ?? {}, l = ie(o, t, r, s), f = {
-    ...i,
+  const { props: o = {}, attrs: s = {}, directives: i = {} } = e.props ?? {}, l = ie(i, t, r, s), c = {
+    ...o,
     ...l.props
-  }, u = {
+  }, d = {
     ...s,
     ...l.attrs
   };
-  for (const d in u) {
-    const c = u[d];
-    typeof c == "boolean" ? c && r.setAttribute(d, "") : c != null && r.setAttribute(d, String(c));
-  }
-  for (const d in f) {
-    const c = f[d];
-    if (d === "value" && (r instanceof HTMLInputElement || r instanceof HTMLTextAreaElement || r instanceof HTMLSelectElement))
-      r.value = c ?? "";
-    else if (d === "checked" && r instanceof HTMLInputElement)
-      r.checked = !!c;
-    else if (d.startsWith("on") && typeof c == "function")
-      r.addEventListener(d.slice(2).toLowerCase(), c);
+  for (const u in d) {
+    const f = d[u];
+    typeof f == "boolean" ? f && r.setAttribute(u, "") : f != null && r.setAttribute(u, String(f));
+  }
+  for (const u in c) {
+    const f = c[u];
+    if (u === "value" && (r instanceof HTMLInputElement || r instanceof HTMLTextAreaElement || r instanceof HTMLSelectElement))
+      r.value = f ?? "";
+    else if (u === "checked" && r instanceof HTMLInputElement)
+      r.checked = !!f;
+    else if (u.startsWith("on") && typeof f == "function")
+      r.addEventListener(u.slice(2).toLowerCase(), f);
     else {
-      if (d.startsWith("on") && c === void 0)
+      if (u.startsWith("on") && f === void 0)
         continue;
-      c == null || c === !1 ? r.removeAttribute(d) : r.setAttribute(d, String(c));
+      f == null || f === !1 ? r.removeAttribute(u) : r.setAttribute(u, String(f));
     }
   }
-  for (const [d, c] of Object.entries(
+  for (const [u, f] of Object.entries(
     l.listeners || {}
   ))
-    r.addEventListener(d, c);
+    r.addEventListener(u, f);
   const p = e.props?.ref ?? (e.props?.props && e.props.props.ref);
   if (typeof e != "string" && p && n && (n[p] = r), Array.isArray(e.children))
-    for (const d of e.children)
-      r.appendChild(T(d, t, n));
+    for (const u of e.children)
+      r.appendChild(T(u, t, n));
   else typeof e.children == "string" && (r.textContent = e.children);
   return r;
 }
-function be(e, t, n, r, i) {
+function be(e, t, n, r, o) {
   if (typeof n == "string") {
     e.textContent !== n && (e.textContent = n);
     return;
   }
   if (!Array.isArray(n)) return;
-  const s = Array.from(e.childNodes), o = Array.isArray(t) ? t : [], l = /* @__PURE__ */ new Map();
-  for (const y of o)
-    y && y.key != null && l.set(y.key, y);
-  const f = /* @__PURE__ */ new Map();
-  for (const y of s) {
-    const h = y.key;
-    h != null && f.set(h, y);
-  }
-  const u = /* @__PURE__ */ new Set();
+  const s = Array.from(e.childNodes), i = Array.isArray(t) ? t : [], l = /* @__PURE__ */ new Map();
+  for (const m of i)
+    m && m.key != null && l.set(m.key, m);
+  const c = /* @__PURE__ */ new Map();
+  for (const m of s) {
+    const h = m.key;
+    h != null && c.set(h, m);
+  }
+  const d = /* @__PURE__ */ new Set();
   let p = e.firstChild;
-  function d(y, h) {
-    let S = y;
-    for (; S && (u.add(S), S !== h); )
+  function u(m, h) {
+    let S = m;
+    for (; S && (d.add(S), S !== h); )
       S = S.nextSibling;
   }
-  function c(y, h, S, m) {
+  function f(m, h, S, y) {
     const a = [];
-    let b = y.nextSibling;
+    let b = m.nextSibling;
     for (; b && b !== h; )
       a.push(b), b = b.nextSibling;
     const g = Array.isArray(S) ? S : [];
-    if (m.some((w) => w && w.key != null) || g.some((w) => w && w.key != null)) {
+    if (y.some((w) => w && w.key != null) || g.some((w) => w && w.key != null)) {
       const w = /* @__PURE__ */ new Map(), k = /* @__PURE__ */ new Map();
       for (const v of g)
         v && v.key != null && w.set(v.key, v);
@@ -777,8 +777,8 @@ function be(e, t, n, r, i) {
         _ != null && k.set(_, v);
       }
       const $ = /* @__PURE__ */ new Set();
-      let C = y.nextSibling;
-      for (const v of m) {
+      let C = m.nextSibling;
+      for (const v of y) {
         let _;
         if (v.key != null && k.has(v.key)) {
           const A = w.get(v.key);
@@ -797,121 +797,121 @@ function be(e, t, n, r, i) {
     } else {
       const w = Math.min(
         g.length,
-        m.length
+        y.length
       );
       for (let k = 0; k < w; k++) {
-        const $ = g[k], C = m[k], v = D(a[k], $, C, r);
+        const $ = g[k], C = y[k], v = D(a[k], $, C, r);
         v !== a[k] && (e.insertBefore(v, a[k]), e.removeChild(a[k]));
       }
-      for (let k = w; k < m.length; k++)
-        e.insertBefore(T(m[k], r), h);
+      for (let k = w; k < y.length; k++)
+        e.insertBefore(T(y[k], r), h);
       for (let k = w; k < a.length; k++)
         e.removeChild(a[k]);
     }
   }
-  for (const y of n) {
+  for (const m of n) {
     let h;
-    if (y.tag === "#anchor") {
-      const S = y.key, m = `${S}:start`, a = `${S}:end`;
-      let b = f.get(m), g = f.get(a);
-      const x = Array.isArray(y.children) ? y.children : [];
-      if (b || (b = document.createTextNode(""), b.key = m), g || (g = document.createTextNode(""), g.key = a), y._startNode = b, y._endNode = g, !e.contains(b) || !e.contains(g)) {
+    if (m.tag === "#anchor") {
+      const S = m.key, y = `${S}:start`, a = `${S}:end`;
+      let b = c.get(y), g = c.get(a);
+      const x = Array.isArray(m.children) ? m.children : [];
+      if (b || (b = document.createTextNode(""), b.key = y), g || (g = document.createTextNode(""), g.key = a), m._startNode = b, m._endNode = g, !e.contains(b) || !e.contains(g)) {
         e.insertBefore(b, p);
         for (const w of x)
           e.insertBefore(T(w, r), p);
         e.insertBefore(g, p);
       } else
-        c(
+        f(
           b,
           g,
           l.get(S)?.children,
           x
         );
-      d(b, g), p = g.nextSibling;
+      u(b, g), p = g.nextSibling;
       continue;
     }
-    if (y.key != null && f.has(y.key)) {
-      const S = l.get(y.key);
+    if (m.key != null && c.has(m.key)) {
+      const S = l.get(m.key);
       h = D(
-        f.get(y.key),
+        c.get(m.key),
         S,
-        y,
+        m,
         r,
-        i
-      ), u.add(h), h !== p && e.contains(h) && (p && !e.contains(p) && (p = null), e.insertBefore(h, p));
+        o
+      ), d.add(h), h !== p && e.contains(h) && (p && !e.contains(p) && (p = null), e.insertBefore(h, p));
     } else
-      h = T(y, r, i), p && !e.contains(p) && (p = null), e.insertBefore(h, p), u.add(h);
+      h = T(m, r, o), p && !e.contains(p) && (p = null), e.insertBefore(h, p), d.add(h);
     p = h.nextSibling;
   }
-  for (const y of s)
-    if (!u.has(y) && e.contains(y)) {
-      if (y instanceof HTMLElement && i)
-        for (const h in i)
-          i[h] === y && delete i[h];
-      e.removeChild(y);
+  for (const m of s)
+    if (!d.has(m) && e.contains(m)) {
+      if (m instanceof HTMLElement && o)
+        for (const h in o)
+          o[h] === m && delete o[h];
+      e.removeChild(m);
     }
 }
-function D(e, t, n, r, i) {
-  if (t && typeof t != "string" && t.props?.ref && i && delete i[t.props.ref], t === n) return e;
+function D(e, t, n, r, o) {
+  if (t && typeof t != "string" && t.props?.ref && o && delete o[t.props.ref], t === n) return e;
   if (typeof n == "string") {
     if (e.nodeType === Node.TEXT_NODE)
       return e.textContent !== n && (e.textContent = n), e;
     {
-      const o = document.createTextNode(n);
-      return e.parentNode?.replaceChild(o, e), o;
+      const i = document.createTextNode(n);
+      return e.parentNode?.replaceChild(i, e), i;
     }
   }
   if (n && typeof n != "string" && n.tag === "#anchor") {
-    const o = n, l = Array.isArray(o.children) ? o.children : [], f = o._startNode ?? document.createTextNode(""), u = o._endNode ?? document.createTextNode("");
-    o.key != null && (f.key = `${o.key}:start`, u.key = `${o.key}:end`), o._startNode = f, o._endNode = u;
+    const i = n, l = Array.isArray(i.children) ? i.children : [], c = i._startNode ?? document.createTextNode(""), d = i._endNode ?? document.createTextNode("");
+    i.key != null && (c.key = `${i.key}:start`, d.key = `${i.key}:end`), i._startNode = c, i._endNode = d;
     const p = document.createDocumentFragment();
-    p.appendChild(f);
-    for (const d of l)
-      p.appendChild(T(d, r));
-    return p.appendChild(u), e.parentNode?.replaceChild(p, e), f;
+    p.appendChild(c);
+    for (const u of l)
+      p.appendChild(T(u, r));
+    return p.appendChild(d), e.parentNode?.replaceChild(p, e), c;
   }
   if (!n) {
-    const o = document.createComment("removed");
-    return e.parentNode?.replaceChild(o, e), o;
+    const i = document.createComment("removed");
+    return e.parentNode?.replaceChild(i, e), i;
   }
   if (!t || typeof t == "string") {
-    const o = T(n, r, i);
-    return typeof n != "string" && n.props?.ref && i && (i[n.props.ref] = o), e.parentNode?.replaceChild(o, e), o;
+    const i = T(n, r, o);
+    return typeof n != "string" && n.props?.ref && o && (o[n.props.ref] = i), e.parentNode?.replaceChild(i, e), i;
   }
   if (n.tag === "#anchor") {
-    const o = Array.isArray(n.children) ? n.children : [], l = n._startNode ?? document.createTextNode(""), f = n._endNode ?? document.createTextNode("");
-    n.key != null && (l.key = `${n.key}:start`, f.key = `${n.key}:end`), n._startNode = l, n._endNode = f;
-    const u = document.createDocumentFragment();
-    u.appendChild(l);
-    for (const p of o)
-      u.appendChild(T(p, r));
-    return u.appendChild(f), e.parentNode?.replaceChild(u, e), l;
+    const i = Array.isArray(n.children) ? n.children : [], l = n._startNode ?? document.createTextNode(""), c = n._endNode ?? document.createTextNode("");
+    n.key != null && (l.key = `${n.key}:start`, c.key = `${n.key}:end`), n._startNode = l, n._endNode = c;
+    const d = document.createDocumentFragment();
+    d.appendChild(l);
+    for (const p of i)
+      d.appendChild(T(p, r));
+    return d.appendChild(c), e.parentNode?.replaceChild(d, e), l;
   }
   if (typeof t != "string" && typeof n != "string" && t.tag === n.tag && t.key === n.key) {
-    const o = e;
-    return me(o, t.props || {}, n.props || {}, r), be(o, t.children, n.children, r, i), typeof n != "string" && n.props?.ref && i && (i[n.props.ref] = o), o;
+    const i = e;
+    return ye(i, t.props || {}, n.props || {}, r), be(i, t.children, n.children, r, o), typeof n != "string" && n.props?.ref && o && (o[n.props.ref] = i), i;
   }
-  const s = T(n, r, i);
-  return typeof n != "string" && n.props?.ref && i && (i[n.props.ref] = s), e.parentNode?.replaceChild(s, e), s;
+  const s = T(n, r, o);
+  return typeof n != "string" && n.props?.ref && o && (o[n.props.ref] = s), e.parentNode?.replaceChild(s, e), s;
 }
 function xe(e, t, n, r) {
-  const i = (p) => p.key == null ? { ...p, key: "__root__" } : p;
-  let s = Array.isArray(t) ? { tag: "div", key: "__root__", children: t } : i(t);
+  const o = (p) => p.key == null ? { ...p, key: "__root__" } : p;
+  let s = Array.isArray(t) ? { tag: "div", key: "__root__", children: t } : o(t);
   s = Z(s, String(s.key ?? "root"));
-  const o = e._prevVNode ?? null, l = e._prevDom ?? e.firstChild ?? null;
-  let f;
-  o && l ? typeof o != "string" && typeof s != "string" && o.tag === s.tag && o.key === s.key ? f = D(l, o, s, n, r) : (f = T(s, n, r), e.replaceChild(f, l)) : (f = T(s, n, r), e.firstChild ? e.replaceChild(f, e.firstChild) : e.appendChild(f));
-  const u = [];
+  const i = e._prevVNode ?? null, l = e._prevDom ?? e.firstChild ?? null;
+  let c;
+  i && l ? typeof i != "string" && typeof s != "string" && i.tag === s.tag && i.key === s.key ? c = D(l, i, s, n, r) : (c = T(s, n, r), e.replaceChild(c, l)) : (c = T(s, n, r), e.firstChild ? e.replaceChild(c, e.firstChild) : e.appendChild(c));
+  const d = [];
   for (let p = 0; p < e.childNodes.length; p++) {
-    const d = e.childNodes[p];
-    if (d !== f && d.nodeName !== "STYLE") {
-      if (d instanceof HTMLElement && r)
-        for (const c in r)
-          r[c] === d && delete r[c];
-      u.push(d);
+    const u = e.childNodes[p];
+    if (u !== c && u.nodeName !== "STYLE") {
+      if (u instanceof HTMLElement && r)
+        for (const f in r)
+          r[f] === u && delete r[f];
+      d.push(u);
     }
   }
-  u.forEach((p) => e.removeChild(p)), e._prevVNode = s, e._prevDom = f;
+  d.forEach((p) => e.removeChild(p)), e._prevVNode = s, e._prevDom = c;
 }
 function oe(e) {
   return e.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\s+/g, " ").replace(/\s*([{}:;,>+~])\s*/g, "$1").replace(/;}/g, "}").trim();
@@ -925,128 +925,62 @@ function ve(e) {
 }
 const we = `
   :host, *, ::before, ::after {
+    all: isolate;
     box-sizing: border-box;
-    border-width: 0;
-    border-style: solid;
-    border-color: currentColor;
-  }
-  :host {
-    font-size: 16px;
-    line-height: 1.5;
-    font-family: ui-sans-serif, system-ui, sans-serif;
-    -webkit-text-size-adjust: 100%;
-    text-size-adjust: 100%;
-    color: inherit;
-    background-color: transparent;
-  }
-  *, ::before, ::after {
-    -webkit-tap-highlight-color: transparent;
+    border: 0 solid currentColor;
     margin: 0;
     padding: 0;
     font: inherit;
     vertical-align: baseline;
     background: transparent;
     color: inherit;
+    -webkit-tap-highlight-color: transparent;
   }
-  button, input, optgroup, select, textarea {
-    font: inherit;
-    color: inherit;
+  :host {
+    display: contents;
+    font: 16px/1.5 ui-sans-serif, system-ui, sans-serif;
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+  }
+  button, input, select, textarea {
     background: transparent;
-    border: none;
     outline: none;
-    margin: 0;
-    padding: 0;
-  }
-  textarea {
-    resize: vertical;
-  }
-  progress {
-    vertical-align: baseline;
-  }
-  button, textarea {
-    overflow: visible;
-  }
-  input[type="search"]::-webkit-search-decoration,
-  input[type="search"]::-webkit-search-cancel-button,
-  input[type="search"]::-webkit-search-results-button,
-  input[type="search"]::-webkit-search-results-decoration {
-    -webkit-appearance: none;
   }
+  textarea { resize: vertical }
+  progress { vertical-align: baseline }
+  button, textarea { overflow: visible }
   img, svg, video, canvas, audio, iframe, embed, object {
     display: block;
     max-width: 100%;
     height: auto;
-    vertical-align: middle;
   }
-  select {
-    text-transform: none;
-  }
-  optgroup {
-    font-weight: bold;
-  }
-  fieldset {
-    border: none;
-  }
-  svg {
-    fill: currentColor;
-    stroke: none;
-  }
-  a {
-    color: inherit;
-    text-decoration: inherit;
-  }
-  a, button {
+  svg { fill: currentColor; stroke: none }
+  a { text-decoration: inherit; cursor: pointer }
+  button, [type=button], [type=reset], [type=submit] {
     cursor: pointer;
-  }
-  input[type="file"] {
-    border: 0;
-  }
-  button, [type="button"], [type="reset"], [type="submit"] {
     appearance: button;
-    background-color: transparent;
-    background-image: none;
-  }
-  [type='button'], [type='reset'], [type='submit'] {
+    background: none;
     -webkit-user-select: none;
     user-select: none;
   }
-  ::-webkit-input-placeholder { color: inherit; opacity: 0.5; }
-  ::placeholder { color: inherit; opacity: 0.5; }
+  ::-webkit-input-placeholder, ::placeholder {
+    color: inherit; opacity: .5;
+  }
   *:focus {
-    outline: 2px solid #3b82f6;
+    outline: 2px solid var(--color-blue-500, #3b82f6);
     outline-offset: 2px;
   }
-  ol, ul {
-    list-style: none;
-  }
-  table {
-    border-collapse: collapse;
-    border-spacing: 0;
-  }
-  strong {
-    font-weight: bolder;
-  }
+  ol, ul { list-style: none }
+  table { border-collapse: collapse }
   sub, sup {
-    font-size: 0.75em;
+    font-size: .75em;
     line-height: 0;
     position: relative;
-    vertical-align: baseline;
-  }
-  sub {
-    bottom: -0.25em;
-  }
-  sup {
-    top: -0.5em;
-  }
-  [disabled] {
-    cursor: not-allowed;
-  }
-  [hidden] {
-    display: none;
-  }
-  [aria-disabled="true"] {
-    cursor: not-allowed;
   }
+  sub { bottom: -.25em }
+  sup { top: -.5em }
+  [disabled], [aria-disabled=true] { cursor: not-allowed }
+  [hidden] { display: none }
 `, ke = {
   gray: {
     50: "var(--color-gray-50, #f9fafb)",
@@ -1060,6 +994,18 @@ const we = `
     800: "var(--color-gray-800, #1f2937)",
     900: "var(--color-gray-900, #111827)"
   },
+  neutral: {
+    50: "var(--color-neutral-50, #fafafa)",
+    100: "var(--color-neutral-100, #f5f5f5)",
+    200: "var(--color-neutral-200, #e5e5e5)",
+    300: "var(--color-neutral-300, #d4d4d4)",
+    400: "var(--color-neutral-400, #a3a3a3)",
+    500: "var(--color-neutral-500, #737373)",
+    600: "var(--color-neutral-600, #525252)",
+    700: "var(--color-neutral-700, #404040)",
+    800: "var(--color-neutral-800, #262626)",
+    900: "var(--color-neutral-900, #171717)"
+  },
   slate: {
     50: "var(--color-slate-50, #f8fafc)",
     100: "var(--color-slate-100, #f1f5f9)",
@@ -1179,6 +1125,26 @@ const we = `
   "inline-flex": "display:inline-flex;",
   grid: "display:grid;",
   hidden: "display:none;",
+  /* Sizing & Spacing */
+  "w-full": "width:100%;",
+  "w-screen": "width:100dvw;",
+  "h-full": "height:100%;",
+  "h-screen": "height:100dvw;",
+  "max-w-full": "max-width:100%;",
+  "max-h-full": "max-height:100%;",
+  "min-w-0": "min-width:0;",
+  "min-h-0": "min-height:0;",
+  "m-auto": "margin:auto;",
+  "mx-auto": "margin-inline:auto;",
+  "my-auto": "margin-block:auto;",
+  /* Overflow */
+  "overflow-auto": "overflow:auto;",
+  "overflow-hidden": "overflow:hidden;",
+  "overflow-visible": "overflow:visible;",
+  "overflow-scroll": "overflow:scroll;",
+  /* Pointer Events */
+  "pointer-events-none": "pointer-events:none;",
+  "pointer-events-auto": "pointer-events:auto;",
   /* Accessibility */
   "sr-only": "position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;",
   "not-sr-only": "position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal;",
@@ -1283,7 +1249,28 @@ const we = `
   "items-stretch": "align-items:stretch;",
   "justify-center": "justify-content:center;",
   "justify-start": "justify-content:flex-start;",
+  "justify-between": "justify-content:space-between;",
+  "justify-around": "justify-content:space-around;",
+  "justify-evenly": "justify-content:space-evenly;",
   "justify-end": "justify-content:flex-end;",
+  "flex-wrap": "flex-wrap:wrap;",
+  "flex-nowrap": "flex-wrap:nowrap;",
+  "flex-wrap-reverse": "flex-wrap:wrap-reverse;",
+  "content-center": "align-content:center;",
+  "content-start": "align-content:flex-start;",
+  "content-end": "align-content:flex-end;",
+  "content-between": "align-content:space-between;",
+  "content-around": "align-content:space-around;",
+  "content-stretch": "align-content:stretch;",
+  "self-auto": "align-self:auto;",
+  "self-start": "align-self:flex-start;",
+  "self-end": "align-self:flex-end;",
+  "self-center": "align-self:center;",
+  "self-stretch": "align-self:stretch;",
+  "flex-1": "flex:1 1 0%;",
+  "flex-auto": "flex:1 1 auto;",
+  "flex-initial": "flex:0 1 auto;",
+  "flex-none": "flex:0 0 auto;",
   "flex-col": "flex-direction:column;",
   "flex-row": "flex-direction:row;",
   grow: "flex-grow:1;",
@@ -1303,7 +1290,7 @@ const we = `
   "transition-colors": "transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;",
   "transition-opacity": "transition-property:opacity;",
   "transition-transform": "transition-property:transform;"
-}, _e = "0.25rem", ee = {
+}, _e = "var(--spacing, 0.25rem)", ee = {
   m: ["margin"],
   mx: ["margin-inline"],
   my: ["margin-block"],
@@ -1321,6 +1308,12 @@ const we = `
   inset: ["inset"],
   "inset-x": ["inset-inline"],
   "inset-y": ["inset-block"],
+  h: ["height"],
+  w: ["width"],
+  "min-h": ["min-height"],
+  "min-w": ["min-width"],
+  "max-h": ["max-height"],
+  "max-w": ["max-width"],
   top: ["top"],
   bottom: ["bottom"],
   left: ["left"],
@@ -1367,19 +1360,19 @@ const we = `
 function U(e) {
   const t = e.startsWith("-"), r = (t ? e.slice(1) : e).split("-");
   if (r.length < 2) return null;
-  const i = r.slice(0, -1).join("-"), s = r[r.length - 1], o = parseFloat(s);
-  if (Number.isNaN(o) || !ee[i]) return null;
+  const o = r.slice(0, -1).join("-"), s = r[r.length - 1], i = parseFloat(s);
+  if (Number.isNaN(i) || !ee[o]) return null;
   const l = t ? "-" : "";
-  return ee[i].map((f) => `${f}:calc(${l}${_e} * ${o});`).join("");
+  return ee[o].map((c) => `${c}:calc(${l}${_e} * ${i});`).join("");
 }
 function re(e) {
-  const t = e.replace("#", ""), n = parseInt(t, 16), r = n >> 16 & 255, i = n >> 8 & 255, s = n & 255;
-  return `${r} ${i} ${s}`;
+  const t = e.replace("#", ""), n = parseInt(t, 16), r = n >> 16 & 255, o = n >> 8 & 255, s = n & 255;
+  return `${r} ${o} ${s}`;
 }
 function Se(e) {
   const t = /^(bg|text|border|shadow|outline|caret|accent)-([a-z]+)-?(\d{2,3}|DEFAULT)?$/.exec(e);
   if (!t) return null;
-  const [, n, r, i = "DEFAULT"] = t, s = ke[r]?.[i];
+  const [, n, r, o = "DEFAULT"] = t, s = ke[r]?.[o];
   return s ? `${{
     bg: "background-color",
     text: "color",
@@ -1402,29 +1395,29 @@ function q(e) {
     if (n !== void 0) {
       const s = /#([0-9a-f]{6})/i.exec(r);
       if (s) {
-        const o = re(s[0]);
-        return r.replace(/#([0-9a-f]{6})/i, `rgb(${o} / ${n})`);
+        const i = re(s[0]);
+        return r.replace(/#([0-9a-f]{6})/i, `rgb(${i} / ${n})`);
       }
     }
     return r;
   }
-  const i = W(t);
-  if (i && n !== void 0) {
-    const s = /#([0-9a-f]{6})/i.exec(i);
+  const o = W(t);
+  if (o && n !== void 0) {
+    const s = /#([0-9a-f]{6})/i.exec(o);
     if (s) {
-      const o = re(s[0]);
-      return i.replace(/#([0-9a-f]{6})/i, `rgb(${o} / ${n})`);
+      const i = re(s[0]);
+      return o.replace(/#([0-9a-f]{6})/i, `rgb(${i} / ${n})`);
     }
   }
-  return i;
+  return o;
 }
 function W(e) {
   const t = e.indexOf("-["), n = e.endsWith("]");
   if (t > 0 && n) {
     const r = e.slice(0, t);
-    let i = e.slice(t + 2, -1);
-    i = i.replace(/_/g, " ");
-    const o = {
+    let o = e.slice(t + 2, -1);
+    o = o.replace(/_/g, " ");
+    const i = {
       bg: "background-color",
       text: "color",
       p: "padding",
@@ -1464,7 +1457,7 @@ function W(e) {
       leading: "line-height",
       z: "z-index"
     }[r] ?? r.replace(/_/g, "-");
-    if (o && i) return `${o}:${i};`;
+    if (i && o) return `${i}:${o};`;
   }
   return null;
 }
@@ -1475,10 +1468,10 @@ function Ee(e) {
   const t = /class\s*=\s*["']([^"']+)["']/g, n = [];
   let r;
   for (; r = t.exec(e); ) {
-    let i = "", s = !1;
-    for (const o of r[1])
-      o === "[" && (s = !0), o === "]" && (s = !1), o === " " && !s ? (i && n.push(i), i = "") : i += o;
-    i && n.push(i);
+    let o = "", s = !1;
+    for (const i of r[1])
+      i === "[" && (s = !0), i === "]" && (s = !1), i === " " && !s ? (o && n.push(o), o = "") : o += i;
+    o && n.push(o);
   }
   return n.filter(Boolean);
 }
@@ -1486,27 +1479,27 @@ const ne = /* @__PURE__ */ new Map(), Te = 16;
 function je(e) {
   const t = Date.now(), n = ne.get(e);
   if (n && t - n.timestamp < Te) return n.css;
-  const r = Ee(e), i = new Set(r), s = [], o = [], l = [], f = [], u = {};
+  const r = Ee(e), o = new Set(r), s = [], i = [], l = [], c = [], d = {};
   function p(h, S = !1) {
-    const m = (S ? "dark|" : "") + h;
-    if (m in u) return u[m];
-    const a = c(h, S);
-    return u[m] = a, a;
+    const y = (S ? "dark|" : "") + h;
+    if (y in d) return d[y];
+    const a = f(h, S);
+    return d[y] = a, a;
   }
-  function d(h) {
-    const S = h.some((a) => V.includes(a)), m = h.includes("dark");
-    return h.length === 0 ? 1 : !S && !m ? 2 : S && !m ? 3 : 4;
+  function u(h) {
+    const S = h.some((a) => V.includes(a)), y = h.includes("dark");
+    return h.length === 0 ? 1 : !S && !y ? 2 : S && !y ? 3 : 4;
   }
-  function c(h, S = !1) {
-    const m = h.split(":"), a = m.find(
+  function f(h, S = !1) {
+    const y = h.split(":"), a = y.find(
       (_) => F[_] || U(_) || q(_) || W(_)
     );
     if (!a) return null;
     const b = F[a] ?? U(a) ?? q(a) ?? W(a);
     if (!b) return null;
     let g = `.${Ae(h)}`, x = b;
-    const w = m.indexOf(a);
-    let k = w >= 0 ? m.slice(0, w) : [];
+    const w = y.indexOf(a);
+    let k = w >= 0 ? y.slice(0, w) : [];
     S && (k = k.filter((_) => _ !== "dark"));
     const $ = k.filter((_) => V.includes(_)), C = $.length ? $[$.length - 1] : null;
     for (const _ of k) {
@@ -1517,22 +1510,22 @@ function je(e) {
     let v = `${g}{${x}}`;
     return S && C ? v = `@media (prefers-color-scheme: dark) and ${te[C]}{${v}}` : S ? v = `@media (prefers-color-scheme: dark){${v}}` : C && (v = `@media ${te[C]}{${v}}`), v;
   }
-  for (const h of i) {
-    const S = h.split(":"), m = S.find(
+  for (const h of o) {
+    const S = h.split(":"), y = S.find(
       (x) => F[x] || U(x) || q(x) || W(x)
     );
-    if (!m) continue;
-    const a = S.indexOf(m), b = a >= 0 ? S.slice(0, a) : [], g = d(b);
+    if (!y) continue;
+    const a = S.indexOf(y), b = a >= 0 ? S.slice(0, a) : [], g = u(b);
     if (g === 4) {
       const x = p(h, !0);
-      x && f.push(x);
+      x && c.push(x);
     } else {
       const x = p(h);
-      x && (g === 1 ? s.push(x) : g === 2 ? o.push(x) : g === 3 && l.push(x));
+      x && (g === 1 ? s.push(x) : g === 2 ? i.push(x) : g === 3 && l.push(x));
     }
   }
-  const y = [...s, ...o, ...l, ...f].join("");
-  return ne.set(e, { css: y, timestamp: t }), y;
+  const m = [...s, ...i, ...l, ...c].join("");
+  return ne.set(e, { css: m, timestamp: t }), m;
 }
 const Le = /* @__PURE__ */ new Map();
 function Q(e) {
@@ -1559,10 +1552,10 @@ function He(e, ...t) {
 function Ie(e, t, n) {
   let r = Q(e);
   r.includes("-") || (r = `cer-${r}`);
-  let i;
-  typeof t == "function" ? i = { ...n, render: t } : i = t, typeof i.onError != "function" && (i.onError = (s, o) => {
-    console.error(`[${r}] Error:`, s, o);
-  }), Le.set(r, i), typeof window < "u" && !customElements.get(r) && customElements.define(r, ze(i));
+  let o;
+  typeof t == "function" ? o = { ...n, render: t } : o = t, typeof o.onError != "function" && (o.onError = (s, i) => {
+    console.error(`[${r}] Error:`, s, i);
+  }), Le.set(r, o), typeof window < "u" && !customElements.get(r) && customElements.define(r, ze(o));
 }
 function ze(e) {
   if (!e.render)
@@ -1596,12 +1589,35 @@ function ze(e) {
         value: this._refs,
         writable: !1,
         enumerable: !1,
-        // Hide from iteration to avoid proxy traps
         configurable: !1
-      }), this.context = t, Object.keys(e).forEach((n) => {
+      }), this.context = t, this._applyProps(e), Object.defineProperty(this.context, "emit", {
+        value: (n, r, o) => {
+          this.dispatchEvent(
+            new CustomEvent(n, {
+              detail: r,
+              bubbles: !0,
+              composed: !0,
+              ...o || {}
+            })
+          );
+          const s = `on${n.charAt(0).toUpperCase()}${n.slice(1)}`, i = typeof this[s] == "function" ? this[s] : void 0, l = typeof this.context[s] == "function" ? this.context[s] : void 0, c = typeof e[s] == "function" ? e[s] : void 0;
+          i && i(r, this.context), l && l !== i && l(r, this.context), c && c !== i && c !== l && c(r, this.context);
+        },
+        writable: !1,
+        enumerable: !1,
+        configurable: !1
+      }), Object.keys(e).forEach((n) => {
         const r = e[n];
-        typeof r == "function" && !n.startsWith("on") && (this.context[n] = (...i) => r(...i, this.context));
-      }), this._applyProps(e), this._applyComputed(e), this._initializing = !1, this._initWatchers(e), this._render(e);
+        if (typeof r == "function" && !n.startsWith("on"))
+          this.context[n] = (...o) => r(...o, this.context);
+        else if (n.startsWith("on") && n.length > 2 && n[2] === n[2].toUpperCase()) {
+          const o = n.slice(2, 3).toLowerCase() + n.slice(3);
+          this.addEventListener(o, (s) => {
+            const i = typeof this[n] == "function" ? this[n] : this.context[n];
+            typeof i == "function" && i(s.detail, this.context);
+          });
+        }
+      }), this._applyComputed(e), this._initializing = !1, this._initWatchers(e), this._render(e);
     }
     connectedCallback() {
       this._runLogicWithinErrorBoundary(e, () => {
@@ -1631,8 +1647,8 @@ function ze(e) {
         t.computed && Object.entries(t.computed).forEach(([n, r]) => {
           Object.defineProperty(this.context, n, {
             get: () => {
-              const i = r(this.context);
-              return J(i);
+              const o = r(this.context);
+              return J(o);
             },
             enumerable: !0
           });
@@ -1655,8 +1671,8 @@ function ze(e) {
         if (n instanceof Promise) {
           this._templateLoading = !0, n.then((r) => (this._templateLoading = !1, this._templateError = null, this._renderOutput(r), r)).catch((r) => {
             if (this._templateLoading = !1, this._templateError = r, t.errorTemplate) {
-              const i = t.errorTemplate(r, this.context);
-              return this._renderOutput(i), i;
+              const o = t.errorTemplate(r, this.context);
+              return this._renderOutput(o), o;
             }
             throw r;
           }), t.loadingTemplate && this._renderOutput(t.loadingTemplate(this.context));
@@ -1669,15 +1685,15 @@ function ze(e) {
     _renderOutput(t) {
       if (!this.shadowRoot) return;
       const n = new Proxy(this.context, {
-        get: (r, i) => i === "_requestRender" ? () => this._requestRender() : i === "context" ? r : typeof i == "string" && i.includes(".") ? i.split(".").reduce((s, o) => s?.[o], r) : r[i],
-        set: (r, i, s) => {
-          if (typeof i == "string" && i.includes(".")) {
-            const o = i.split("."), l = o.pop();
+        get: (r, o) => o === "_requestRender" ? () => this._requestRender() : o === "context" ? r : typeof o == "string" && o.includes(".") ? o.split(".").reduce((s, i) => s?.[i], r) : r[o],
+        set: (r, o, s) => {
+          if (typeof o == "string" && o.includes(".")) {
+            const i = o.split("."), l = i.pop();
             if (!l) return !1;
-            const f = o.reduce((u, p) => (p in u || (u[p] = {}), u[p]), r);
-            return f[l] = s, !0;
+            const c = i.reduce((d, p) => (p in d || (d[p] = {}), d[p]), r);
+            return c[l] = s, !0;
           }
-          return r[i] = s, !0;
+          return r[o] = s, !0;
         }
       });
       xe(
@@ -1712,10 +1728,10 @@ function ze(e) {
         }
         let r = "";
         t.style && (typeof t.style == "string" ? r = t.style : typeof t.style == "function" && (r = t.style(this.context)));
-        let i = ve(`${r}
+        let o = ve(`${r}
 ${n}
 `);
-        i = oe(i), this._styleSheet || (this._styleSheet = new CSSStyleSheet()), (this._styleSheet.cssRules.length === 0 || this._styleSheet.toString() !== i) && this._styleSheet.replaceSync(i), this.shadowRoot.adoptedStyleSheets = [G(), this._styleSheet];
+        o = oe(o), this._styleSheet || (this._styleSheet = new CSSStyleSheet()), (this._styleSheet.cssRules.length === 0 || this._styleSheet.toString() !== o) && this._styleSheet.replaceSync(o), this.shadowRoot.adoptedStyleSheets = [G(), this._styleSheet];
       });
     }
     // --- Error Boundary function ---
@@ -1733,11 +1749,11 @@ ${n}
     // --- State, props, computed ---
     _initContext(t) {
       try {
-        let n = function(i, s = "") {
-          return Array.isArray(i) ? new Proxy(i, {
-            get(o, l, f) {
-              const u = Reflect.get(o, l, f);
-              return typeof u == "function" && typeof l == "string" && [
+        let n = function(o, s = "") {
+          return Array.isArray(o) ? new Proxy(o, {
+            get(i, l, c) {
+              const d = Reflect.get(i, l, c);
+              return typeof d == "function" && typeof l == "string" && [
                 "push",
                 "pop",
                 "shift",
@@ -1745,44 +1761,44 @@ ${n}
                 "splice",
                 "sort",
                 "reverse"
-              ].includes(l) ? function(...d) {
-                const c = u.apply(o, d);
+              ].includes(l) ? function(...u) {
+                const f = d.apply(i, u);
                 if (!r._initializing) {
-                  const y = s || "root";
-                  r._triggerWatchers(y, o), r._render(t);
+                  const m = s || "root";
+                  r._triggerWatchers(m, i), r._render(t);
                 }
-                return c;
-              } : u;
+                return f;
+              } : d;
             },
-            set(o, l, f) {
-              if (o[l] = f, !r._initializing) {
-                const u = s ? `${s}.${String(l)}` : String(l);
-                r._triggerWatchers(u, f), r._render(t);
+            set(i, l, c) {
+              if (i[l] = c, !r._initializing) {
+                const d = s ? `${s}.${String(l)}` : String(l);
+                r._triggerWatchers(d, c), r._render(t);
               }
               return !0;
             },
-            deleteProperty(o, l) {
-              if (delete o[l], !r._initializing) {
-                const f = s ? `${s}.${String(l)}` : String(l);
-                r._triggerWatchers(f, void 0), r._render(t);
+            deleteProperty(i, l) {
+              if (delete i[l], !r._initializing) {
+                const c = s ? `${s}.${String(l)}` : String(l);
+                r._triggerWatchers(c, void 0), r._render(t);
               }
               return !0;
             }
-          }) : i && typeof i == "object" ? (Object.keys(i).forEach((o) => {
-            const l = s ? `${s}.${o}` : o;
-            i[o] = n(i[o], l);
-          }), new Proxy(i, {
-            set(o, l, f) {
-              const u = s ? `${s}.${String(l)}` : String(l);
-              return o[l] = n(f, u), r._initializing || (r._triggerWatchers(
-                u,
-                o[l]
+          }) : o && typeof o == "object" ? (Object.keys(o).forEach((i) => {
+            const l = s ? `${s}.${i}` : i;
+            o[i] = n(o[i], l);
+          }), new Proxy(o, {
+            set(i, l, c) {
+              const d = s ? `${s}.${String(l)}` : String(l);
+              return i[l] = n(c, d), r._initializing || (r._triggerWatchers(
+                d,
+                i[l]
               ), r._render(t)), !0;
             },
-            get(o, l, f) {
-              return Reflect.get(o, l, f);
+            get(i, l, c) {
+              return Reflect.get(i, l, c);
             }
-          })) : i;
+          })) : o;
         };
         const r = this;
         return n({ ...t.state });
@@ -1793,17 +1809,17 @@ ${n}
     _initWatchers(t) {
       if (t.watch)
         for (const [n, r] of Object.entries(t.watch)) {
-          let i, s = {};
-          if (Array.isArray(r) ? (i = r[0], s = r[1] || {}) : i = r, this._watchers.set(n, {
-            callback: i,
+          let o, s = {};
+          if (Array.isArray(r) ? (o = r[0], s = r[1] || {}) : o = r, this._watchers.set(n, {
+            callback: o,
             options: s,
             oldValue: this._getNestedValue(n)
           }), s.immediate)
             try {
-              const o = this._getNestedValue(n);
-              i(o, void 0, this.context);
-            } catch (o) {
-              console.error(`Error in immediate watcher for "${n}":`, o);
+              const i = this._getNestedValue(n);
+              o(i, void 0, this.context);
+            } catch (i) {
+              console.error(`Error in immediate watcher for "${n}":`, i);
             }
         }
     }
@@ -1814,40 +1830,44 @@ ${n}
       );
     }
     _triggerWatchers(t, n) {
-      const r = (s, o) => {
-        if (s === o) return !0;
-        if (typeof s != typeof o || typeof s != "object" || s === null || o === null) return !1;
-        if (Array.isArray(s) && Array.isArray(o))
-          return s.length !== o.length ? !1 : s.every((u, p) => r(u, o[p]));
-        const l = Object.keys(s), f = Object.keys(o);
-        return l.length !== f.length ? !1 : l.every((u) => r(s[u], o[u]));
-      }, i = this._watchers.get(t);
-      if (i && !r(n, i.oldValue))
+      const r = (s, i) => {
+        if (s === i) return !0;
+        if (typeof s != typeof i || typeof s != "object" || s === null || i === null) return !1;
+        if (Array.isArray(s) && Array.isArray(i))
+          return s.length !== i.length ? !1 : s.every((d, p) => r(d, i[p]));
+        const l = Object.keys(s), c = Object.keys(i);
+        return l.length !== c.length ? !1 : l.every((d) => r(s[d], i[d]));
+      }, o = this._watchers.get(t);
+      if (o && !r(n, o.oldValue))
         try {
-          i.callback(n, i.oldValue, this.context), i.oldValue = n;
+          o.callback(n, o.oldValue, this.context), o.oldValue = n;
         } catch (s) {
           console.error(`Error in watcher for "${t}":`, s);
         }
-      for (const [s, o] of this._watchers.entries())
-        if (o.options.deep && t.startsWith(s + "."))
+      for (const [s, i] of this._watchers.entries())
+        if (i.options.deep && t.startsWith(s + "."))
           try {
             const l = this._getNestedValue(s);
-            r(l, o.oldValue) || (o.callback(l, o.oldValue, this.context), o.oldValue = l);
+            r(l, i.oldValue) || (i.callback(l, i.oldValue, this.context), i.oldValue = l);
           } catch (l) {
             console.error(`Error in deep watcher for "${s}":`, l);
           }
     }
     _applyProps(t) {
       try {
-        let n = function(r, i) {
-          return i === Boolean ? r === "true" : i === Number ? Number(r) : r;
+        let n = function(r, o) {
+          return o === Boolean ? r === "true" : o === Number ? Number(r) : r;
         };
         if (!t.props) return;
-        Object.entries(t.props).forEach(([r, i]) => {
-          const s = this.getAttribute(Q(r));
-          s !== null ? this.context[r] = J(
-            n(s, i.type)
-          ) : "default" in i && i.default !== void 0 && (this.context[r] = J(i.default));
+        Object.entries(t.props).forEach(([r, o]) => {
+          if (o.type === Function && typeof this[r] == "function")
+            this.context[r] = this[r];
+          else {
+            const s = this.getAttribute(Q(r));
+            s !== null ? this.context[r] = J(
+              n(s, o.type)
+            ) : "default" in o && o.default !== void 0 && (this.context[r] = J(o.default));
+          }
         });
       } catch (n) {
         this._hasError = !0, t.onError && t.onError(n, this.context), t.errorFallback && this.shadowRoot && (this.shadowRoot.innerHTML = t.errorFallback(
@@ -1865,8 +1885,8 @@ export {
   He as css,
   Ne as each,
   Be as eventBus,
-  Me as html,
+  Oe as html,
   Pe as match,
-  Oe as when
+  Me as when
 };
 //# sourceMappingURL=custom-elements-runtime.es.js.map