wrec 0.18.2 → 0.18.4

package/dist/wrec.es.js

@@ -1,89 +1,83 @@
-function M(n, t) {
-  let e = n;
-  for (const s of t.split("."))
-    e = e[s];
-  return e;
+function R(r, t) {
+  let s = r;
+  for (const e of t.split("."))
+    s = s[e];
+  return s;
 }
-function H(n, t, e) {
-  const s = t.split("."), o = s.length - 1;
-  let i = n;
-  s.forEach((r, h) => {
-    h === o ? i[r] = e : i = i[r];
+function O(r, t, s) {
+  const e = t.split("."), o = e.length - 1;
+  let i = r;
+  e.forEach((n, h) => {
+    h === o ? i[n] = s : i = i[n];
   });
 }
 class m extends Error {
 }
-const O = /([a-zA-Z-]+)\s*:\s*([^;}]+)/g, P = "a-zA-Z_$", F = P + "0-9", b = `[${P}][${F}]*`, j = /<!--\s*(.*?)\s*-->/, V = /<(\w+)(?:\s[^>]*)?>((?:[^<]|<(?!\w))*?)<\/\1>/g, A = new RegExp(`^this\\.${b}$`), E = new RegExp(`this\\.${b}(\\.${b})*`, "g"), $ = new RegExp(`this\\.${b}(\\.${b})*`), _ = /* @__PURE__ */ new Set(["class", "style"]), N = 5;
-function I(n) {
-  return n instanceof HTMLButtonElement || n instanceof HTMLFieldSetElement || n instanceof HTMLInputElement || n instanceof HTMLSelectElement || n instanceof HTMLTextAreaElement || n instanceof u;
+const k = /([a-zA-Z-]+)\s*:\s*([^;}]+)/g, P = "a-zA-Z_$", F = P + "0-9", b = `[${P}][${F}]*`, j = /<!--\s*(.*?)\s*-->/, _ = /<(\w+)(?:\s[^>]*)?>((?:[^<]|<(?!\w))*?)<\/\1>/g, A = new RegExp(`^this\\.${b}$`), y = new RegExp(`this\\.${b}(\\.${b})*`, "g"), N = new RegExp(`this\\.${b}(\\.${b})*`), V = /* @__PURE__ */ new Set(["class", "style"]), $ = 5;
+function I(r) {
+  return r instanceof HTMLButtonElement || r instanceof HTMLFieldSetElement || r instanceof HTMLInputElement || r instanceof HTMLSelectElement || r instanceof HTMLTextAreaElement || r instanceof u;
 }
-function D(n) {
-  const t = new CSSStyleSheet();
-  for (const e of Array.from(n.cssRules))
-    t.insertRule(e.cssText);
-  return t;
-}
-function z(n, t, e) {
-  const s = document.createElement(n);
+function q(r, t, s) {
+  const e = document.createElement(r);
   if (t)
     for (const [o, i] of Object.entries(t))
-      s.setAttribute(o, i);
-  return e && (s.innerHTML = e), s;
+      e.setAttribute(o, i);
+  return s && (e.innerHTML = s), e;
 }
-const B = (n) => n === String ? "" : n === Number ? 0 : n === Boolean ? !1 : n === Array ? [] : n === Object ? {} : void 0;
-function w(n) {
+const D = (r) => r === String ? "" : r === Number ? 0 : r === Boolean ? !1 : r === Array ? [] : r === Object ? {} : void 0;
+function w(r) {
   const t = [];
-  let e = n.firstElementChild;
-  for (; e; )
-    t.push(e), e.shadowRoot && t.push(...w(e.shadowRoot)), e.firstElementChild && t.push(...w(e)), e = e.nextElementSibling;
+  let s = r.firstElementChild;
+  for (; s; )
+    t.push(s), s.shadowRoot && t.push(...w(s.shadowRoot)), s.firstElementChild && t.push(...w(s)), s = s.nextElementSibling;
   return t;
 }
-const g = (n) => n.substring(N).split(".")[0];
-function x(n, t) {
-  let e = n[0];
-  return t.forEach((s, o) => {
-    e += s + n[o + 1];
-  }), e;
+const E = (r) => r.substring($).split(".")[0];
+function x(r, t) {
+  let s = r[0];
+  return t.forEach((e, o) => {
+    s += e + r[o + 1];
+  }), s;
 }
-function T(n) {
-  const t = typeof n;
+function S(r) {
+  const t = typeof r;
   return t === "string" || t === "number" || t === "boolean";
 }
-function d(n) {
-  return n.localName === "textarea";
+function d(r) {
+  return r.localName === "textarea";
 }
-function R(n) {
-  const { localName: t } = n;
+function v(r) {
+  const { localName: t } = r;
   return t === "input" || t === "select";
 }
-const q = (n) => n.replace(/<!--[\s\S]*?-->/g, "");
-function L(n, t, e, s) {
-  return n.slice(0, t) + s + n.slice(t + e);
+const B = (r) => r.replace(/<!--[\s\S]*?-->/g, "");
+function L(r, t, s, e) {
+  return r.slice(0, t) + e + r.slice(t + s);
 }
-function S(n) {
-  const t = Number(n);
-  if (isNaN(t)) throw new m(`can't convert "${n}" to a number`);
+function C(r) {
+  const t = Number(r);
+  if (isNaN(t)) throw new m(`can't convert "${r}" to a number`);
   return t;
 }
-function k(n, t, e) {
-  const [s, o] = t.split(":");
-  if (T(e))
-    if (typeof e == "boolean") {
-      e ? n.setAttribute(s, s) : n.removeAttribute(s);
-      const i = u.getPropName(s);
-      n[i] = e;
+function H(r, t, s) {
+  const [e, o] = t.split(":");
+  if (S(s))
+    if (typeof s == "boolean") {
+      s ? r.setAttribute(e, e) : r.removeAttribute(e);
+      const i = u.getPropName(e);
+      r[i] = s;
     } else {
-      const i = n.getAttribute(t), r = String(e);
-      i !== r && (n.setAttribute(s, r), s === "value" && R(n) && (n.value = r));
+      const i = r.getAttribute(t), n = String(s);
+      i !== n && (r.setAttribute(e, n), e === "value" && v(r) && (r.value = n));
     }
   else {
     const i = u.getPropName(t);
-    n[i] = e;
+    r[i] = s;
   }
 }
-function C(n, t, e) {
-  const [s, o] = t.split(":");
-  n instanceof CSSStyleRule ? n.style.setProperty(s, e) : (k(n, s, e), s === "value" && R(n) && (n.value = e));
+function T(r, t, s) {
+  const [e, o] = t.split(":");
+  r instanceof CSSStyleRule ? r.style.setProperty(e, s) : (H(r, e, s), e === "value" && v(r) && (r.value = s));
 }
 class u extends HTMLElement {
   // This is used to lookup the camelCase property name
@@ -117,17 +111,15 @@ class u extends HTMLElement {
   // This is a map from properties to expressions that refer to them.
   // It is the sma for all instances of a component.
   // This map cannot be private.
-  //static propToExprsMap: Map<string, string[]> | null = null;
   static propToExprsMap;
-  static stylesheet = null;
   static template = null;
   #t = this.constructor;
   // This is a map from expressions to references to them
   // which can be found in element text content,
   // attribute values, and CSS property values.
   // Each component instance needs its own map.
-  #s = /* @__PURE__ */ new Map();
-  #a = {};
+  #e = /* @__PURE__ */ new Map();
+  #c = {};
   #i;
   // For components that set `formAssociated` to true,
   // this stores in the initial value of each property
@@ -148,157 +140,147 @@ class u extends HTMLElement {
     const t = this.#t;
     t.properties || (t.properties = {}), t.propToComputedMap || (t.propToComputedMap = /* @__PURE__ */ new Map()), t.propToExprsMap || (t.propToExprsMap = /* @__PURE__ */ new Map());
   }
-  attributeChangedCallback(t, e, s) {
+  attributeChangedCallback(t, s, e) {
     t === "disabled" && this.#m();
     const o = u.getPropName(t);
-    if (this.#r(o)) {
-      const i = this.#E(o, String(s));
+    if (this.#n(o)) {
+      const i = this.#y(o, String(e));
       this[o] = i;
-      const r = this.#a[o];
-      r && this.setFormValue(r, String(i)), this.propertyChangedCallback(o, e, s);
+      const n = this.#c[o];
+      n && this.setFormValue(n, String(i)), this.propertyChangedCallback(o, s, e);
     }
   }
   #w() {
     if (!this.shadowRoot) return;
     const t = this.#t;
-    if (t.css) {
-      let { stylesheet: s } = t;
-      if (!s) {
-        s = t.stylesheet = new CSSStyleSheet();
-        const o = `:host([hidden]) { display: none; } ${t.css}`;
-        s.replaceSync(o);
-      }
-      this.shadowRoot.adoptedStyleSheets = [D(s)];
-    }
-    let e = t.template;
-    if (!e) {
-      e = t.template = document.createElement("template");
-      const s = t.html.trim();
-      e.innerHTML = s.startsWith("<") ? s : `<span><!--${s}--></span>`;
+    let { template: s } = t;
+    if (!s) {
+      s = t.template = document.createElement("template");
+      let e = `<style>
+    :host([hidden]) { display: none; }`;
+      t.css && (e += t.css), e += `</style>
+`;
+      let o = t.html.trim();
+      o.startsWith("<") || (o = `<span><!--${o}--></span>`), s.innerHTML = e + o;
     }
-    this.shadowRoot.replaceChildren(e.content.cloneNode(!0));
+    this.shadowRoot.replaceChildren(s.content.cloneNode(!0));
   }
-  changed(t, e, s) {
-    this[e] = s;
+  changed(t, s, e) {
+    this[s] = e;
   }
   connectedCallback() {
-    this.#O(), this.#R(), this.#w(), this.hasAttribute("disabled") && this.#m(), requestAnimationFrame(() => {
-      if (this.shadowRoot) {
-        this.#C(this.shadowRoot), this.#b(this.shadowRoot);
-        for (const t of this.shadowRoot.adoptedStyleSheets)
-          this.#N(t);
-      }
-      this.#T();
+    this.#O(), this.#v(), this.#w(), this.hasAttribute("disabled") && this.#m(), requestAnimationFrame(() => {
+      this.shadowRoot && (this.#T(this.shadowRoot), this.#b(this.shadowRoot)), this.#S();
     });
   }
-  #T() {
-    const t = this.#t, { properties: e } = t;
-    for (const [s, { computed: o }] of Object.entries(e))
-      o && (this[s] = this.#o(o));
+  #S() {
+    const t = this.#t, { properties: s } = t;
+    for (const [e, { computed: o }] of Object.entries(s))
+      o && (this[e] = this.#o(o));
   }
-  #R() {
-    const t = this.#t, { observedAttributes: e, properties: s } = t;
-    for (const [o, i] of Object.entries(s))
-      this.#v(o, i, e);
+  #v() {
+    const t = this.#t, { observedAttributes: s, properties: e } = t;
+    for (const [o, i] of Object.entries(e))
+      this.#M(o, i, s);
   }
-  #v(t, e, s) {
+  #M(t, s, e) {
     const o = u.getAttrName(t), i = this.hasAttribute(o);
-    e.required && !i && this.#e(this, t, "is a required attribute");
-    let r = e.value;
-    this.hasOwnProperty(t) && (r = this[t], delete this[t]);
-    const { type: h } = e, c = h === Boolean ? r || i : s.includes(o) && i ? this.#A(t, o) : r || B(h), f = "#" + t;
-    this[f] = c, e.computed && this.#x(t, e), Object.defineProperty(this, t, {
+    s.required && !i && this.#s(this, t, "is a required attribute");
+    let n = s.value;
+    this.hasOwnProperty(t) && (n = this[t], delete this[t]);
+    const { type: h } = s, a = h === Boolean ? n || i : e.includes(o) && i ? this.#A(t, o) : n || D(h), f = "#" + t;
+    this[f] = a, s.computed && this.#$(t, s), Object.defineProperty(this, t, {
       enumerable: !0,
       get() {
         return this[f];
       },
-      set(a) {
-        h === Number && typeof a == "string" && (a = S(a));
+      set(c) {
+        h === Number && typeof c == "string" && (c = C(c));
         const l = this[f];
-        if (a === l) return;
-        this.#j(t, h, a), this[f] = a;
-        const { state: p, stateProp: y } = this.#t.properties[t];
-        y && H(p, y, a), this.#k(t), this.#L(t, h, a, o), this.#g(t), this.#H(t, a);
-        const v = this.#a[t];
-        v && this.setFormValue(v, String(a)), this.propertyChangedCallback(t, l, a), e.dispatch && this.dispatch("change", { [t]: a });
+        if (c === l) return;
+        this.#F(t, h, c), this[f] = c;
+        const { state: p, stateProp: g } = this.#t.properties[t];
+        g && O(p, g, c), this.#L(t), this.#x(t, h, c, o), this.#E(t), this.#H(t, c);
+        const M = this.#c[t];
+        M && this.setFormValue(M, String(c)), this.propertyChangedCallback(t, l, c), s.dispatch && this.dispatch("change", { [t]: c });
       }
     });
   }
   #m() {
-    const t = this.hasAttribute("disabled"), e = w(this.shadowRoot);
-    for (const s of e)
-      I(s) && (s.disabled = t);
+    const t = this.hasAttribute("disabled"), s = w(this.shadowRoot);
+    for (const e of s)
+      I(e) && (e.disabled = t);
   }
   disconnectedCallback() {
-    this.#s.clear(), this.#f.clear(), this.#l.clear();
+    this.#e.clear(), this.#f.clear(), this.#l.clear();
   }
-  dispatch(t, e) {
+  dispatch(t, s) {
     this.dispatchEvent(
       new CustomEvent(t, {
         bubbles: !0,
         // up DOM tree
         composed: !0,
         // can pass through shadow DOM
-        detail: e
+        detail: s
       })
     );
   }
-  displayIfSet(t, e = "block") {
-    return `display: ${t ? e : "none"}`;
+  displayIfSet(t, s = "block") {
+    return `display: ${t ? s : "none"}`;
   }
   // This inserts a dash before each uppercase letter
   // that is preceded by a lowercase letter or digit.
   static elementName() {
     return this.name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
   }
-  #M(t) {
-    const e = t instanceof u;
-    for (const s of t.getAttributeNames()) {
-      const o = t.getAttribute(s), i = this.#y(t, o);
+  #R(t) {
+    const s = t instanceof u;
+    for (const e of t.getAttributeNames()) {
+      const o = t.getAttribute(e), i = this.#g(t, o);
       if (i) {
-        const r = this[i];
-        r === void 0 && this.#c(t, s, i), t[i] = r;
-        let [h, c] = s.split(":");
-        h === "value" && (c ? (t["on" + c] === void 0 && this.#e(t, s, "refers to an unsupported event name"), t.setAttribute(h, this[i])) : c = "change"), e && t.#l.set(
+        const n = this[i];
+        n === void 0 && this.#a(t, e, i), t[i] = n;
+        let [h, a] = e.split(":");
+        h === "value" && (a ? (t["on" + a] === void 0 && this.#s(t, e, "refers to an unsupported event name"), t.setAttribute(h, this[i])) : a = "change"), s && t.#l.set(
           u.getPropName(h),
           i
         );
       }
-      this.#n(o, t, s);
+      this.#r(o, t, e);
     }
   }
   #o(t) {
-    const e = new Function("return " + t).call(this);
-    return Array.isArray(e) ? e.join("") : e;
+    const s = new Function("return " + t).call(this);
+    return Array.isArray(s) ? s.join("") : s;
   }
   #P(t) {
-    const { localName: e } = t;
-    if (e === "style") {
-      const { sheet: s } = t, o = s?.cssRules ?? [], i = Array.from(o);
-      for (const r of i)
-        if (r.constructor === CSSStyleRule) {
-          const h = Array.from(r.style);
-          for (const c of h)
-            if (c.startsWith("--")) {
-              const f = r.style.getPropertyValue(c);
-              this.#n(f, r, c);
+    const { localName: s } = t;
+    if (s === "style") {
+      const { sheet: e } = t, o = e?.cssRules ?? [], i = Array.from(o);
+      for (const n of i)
+        if (n.constructor === CSSStyleRule) {
+          const h = Array.from(n.style);
+          for (const a of h)
+            if (a.startsWith("--")) {
+              const f = n.style.getPropertyValue(a);
+              this.#r(f, n, a);
             }
         }
     } else {
-      let s = "";
+      let e = "";
       if (d(t)) {
-        this.#n(t.textContent, t);
+        this.#r(t.textContent, t);
         const o = t.textContent?.match(j);
-        o && (s = o[1]);
+        o && (e = o[1]);
       } else {
         const o = Array.from(t.childNodes).find(
           (i) => i.nodeType === Node.COMMENT_NODE
         );
-        o && (s = o.textContent?.trim() ?? "");
+        o && (e = o.textContent?.trim() ?? "");
       }
-      if (s) {
-        const o = this.#y(t, s);
-        o && d(t) ? t.textContent = this[o] : this.#n(s, t);
+      if (e) {
+        const o = this.#g(t, e);
+        o && d(t) ? t.textContent = this[o] : this.#r(e, t);
       }
     }
   }
@@ -309,98 +291,87 @@ class u extends HTMLElement {
   formAssociatedCallback() {
     let t = this.getAttribute("form-assoc");
     if (!t) {
-      const r = this.getAttribute("name");
-      if (r)
-        if (this.#r("value"))
-          t = `value:${r}`;
+      const n = this.getAttribute("name");
+      if (n)
+        if (this.#n("value"))
+          t = `value:${n}`;
         else
           return;
       else
         return;
     }
-    const e = {}, s = t.split(",");
-    for (const r of s) {
-      const [h, c] = r.split(":");
-      e[h.trim()] = c.trim();
+    const s = {}, e = t.split(",");
+    for (const n of e) {
+      const [h, a] = n.split(":");
+      s[h.trim()] = a.trim();
     }
-    this.#a = e, this.#i = new FormData(), this.#h = this.attachInternals(), this.#h.setFormValue(this.#i);
+    this.#c = s, this.#i = new FormData(), this.#h = this.attachInternals(), this.#h.setFormValue(this.#i);
     const o = Object.keys(this.#t.properties), i = this.#f;
-    for (const r of o)
-      i[r] = this[r];
+    for (const n of o)
+      i[n] = this[n];
   }
   formResetCallback() {
     const t = this.#f;
-    for (const e of Object.keys(t)) {
-      let s = t[e];
-      A.test(s) && (s = this.#o(s)), this[e] = s;
+    for (const s of Object.keys(t)) {
+      let e = t[s];
+      A.test(e) && (e = this.#o(e)), this[s] = e;
     }
   }
   static getAttrName(t) {
-    let e = u.#d.get(t);
-    return e || (e = t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), u.#d.set(t, e)), e;
+    let s = u.#d.get(t);
+    return s || (s = t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), u.#d.set(t, s)), s;
   }
   static getPropName(t) {
-    let e = u.#p.get(t);
-    return e || (e = t.replace(/-([a-z])/g, (s, o) => o.toUpperCase()), u.#p.set(t, e)), e;
+    let s = u.#p.get(t);
+    return s || (s = t.replace(/-([a-z])/g, (e, o) => o.toUpperCase()), u.#p.set(t, s)), s;
   }
-  #$(t, e, s) {
-    if (s.length !== 1) return;
-    const [o] = s;
+  #N(t, s, e) {
+    if (e.length !== 1) return;
+    const [o] = e;
     if (!A.test(o)) return;
-    const i = R(t) || d(t);
-    let [r, h] = (e ?? "").split(":");
-    if (!(i && r === "value" || d(t))) return;
-    h ? t["on" + h] === void 0 && this.#e(t, e, "refers to an unsupported event name") : h = "change";
-    const f = g(o);
-    t.addEventListener(h, (a) => {
-      const { target: l } = a;
+    const i = v(t) || d(t);
+    let [n, h] = (s ?? "").split(":");
+    if (!(i && n === "value" || d(t))) return;
+    h ? t["on" + h] === void 0 && this.#s(t, s, "refers to an unsupported event name") : h = "change";
+    const f = E(o);
+    t.addEventListener(h, (c) => {
+      const { target: l } = c;
       if (!l) return;
-      const p = l.value, { type: y } = this.#t.properties[f];
-      this[f] = y === Number ? S(p) : p, this.#g(f);
+      const p = l.value, { type: g } = this.#t.properties[f];
+      this[f] = g === Number ? C(p) : p, this.#E(f);
     });
   }
-  #r(t) {
+  #n(t) {
     return !!this.#t.properties[t];
   }
   #b(t) {
-    const e = Array.from(t.querySelectorAll("*"));
-    for (const s of e)
-      this.#M(s), s.firstElementChild || this.#P(s);
-  }
-  #N(t) {
-    const e = t.cssRules;
-    for (const s of Array.from(e))
-      if (s instanceof CSSStyleRule) {
-        for (const o of Array.from(s.style))
-          if (o.startsWith("--")) {
-            const i = s.style.getPropertyValue(o);
-            this.#n(i, s, o);
-          }
-      }
+    const s = Array.from(t.querySelectorAll("*"));
+    for (const e of s)
+      this.#R(e), e.firstElementChild || this.#P(e);
   }
   static get observedAttributes() {
     const t = Object.keys(this.properties || {}).map(u.getAttrName);
     return t.includes("disabled") || t.push("disabled"), t;
   }
   // Subclasses can override this to add functionality.
-  propertyChangedCallback(t, e, s) {
+  propertyChangedCallback(t, s, e) {
   }
-  #y(t, e) {
-    if (!e || !A.test(e)) return;
-    const s = g(e);
-    return this[s] === void 0 && this.#c(t, "", s), s;
+  #g(t, s) {
+    if (!s || !A.test(s)) return;
+    const e = E(s);
+    return this[e] === void 0 && this.#a(t, "", e), e;
   }
-  #g(t) {
+  #E(t) {
     const o = this.#t.propToExprsMap.get(t) || [];
     for (const i of o) {
-      let r = this.#o(i);
-      const h = this.#s.get(i) ?? [];
-      for (const c of h)
-        if (c instanceof HTMLElement)
-          this.#S(c, r);
-        else if (!(c instanceof CSSStyleRule)) {
-          const { element: f, attrName: a } = c;
-          f instanceof CSSStyleRule ? f.style.setProperty(a, r) : C(f, a, r);
+      let n = this.#o(i);
+      const h = this.#e.get(i) ?? [];
+      for (const a of h)
+        if (a instanceof HTMLElement)
+          this.#C(a, n);
+        else if (!(a instanceof CSSStyleRule)) {
+          const { element: f, attrName: c } = a;
+          f instanceof CSSStyleRule ? f.style.setProperty(c, n) : T(f, c, n);
         }
     }
   }
@@ -408,184 +379,184 @@ class u extends HTMLElement {
     const t = this.elementName();
     customElements.get(t) || customElements.define(t, this);
   }
-  #x(t, e) {
-    const { computed: s, uses: o } = e, i = this.#t.propToComputedMap;
-    function r(c, f) {
-      let a = i.get(c);
-      a || (a = [], i.set(c, a)), a.push([t, f]);
+  #$(t, s) {
+    const { computed: e, uses: o } = s, i = this.#t.propToComputedMap;
+    function n(a, f) {
+      let c = i.get(a);
+      c || (c = [], i.set(a, c)), c.push([t, f]);
     }
-    const h = s.match(E) || [];
-    for (const c of h) {
-      const f = c.substring(N);
-      this[f] === void 0 && this.#c(null, t, f), typeof this[f] != "function" && r(f, s);
+    const h = e.match(y) || [];
+    for (const a of h) {
+      const f = a.substring($);
+      this[f] === void 0 && this.#a(null, t, f), typeof this[f] != "function" && n(f, e);
     }
     if (o)
-      for (const c of o.split(","))
-        r(c, s);
+      for (const a of o.split(","))
+        n(a, e);
   }
   // WARNING: Do not place untrusted JavaScript expressions
   // in attribute values or the text content of elements!
-  #n(t, e, s = void 0) {
+  #r(t, s, e = void 0) {
     if (!t) return;
-    const o = this.#u(e, s, t);
+    const o = this.#u(s, e, t);
     if (!o) {
-      const c = t.replaceAll("this..", "this.");
-      s ? C(e, s, c) : "textContent" in e && (e.textContent = c);
+      const a = t.replaceAll("this..", "this.");
+      e ? T(s, e, a) : "textContent" in s && (s.textContent = a);
       return;
     }
     const i = this.#t;
-    o.forEach((c) => {
-      const f = g(c);
+    o.forEach((a) => {
+      const f = E(a);
       if (typeof this[f] == "function") return;
-      const a = i.propToExprsMap;
-      let l = a.get(f);
-      l || (l = [], a.set(f, l)), l.includes(t) || l.push(t);
+      const c = i.propToExprsMap;
+      let l = c.get(f);
+      l || (l = [], c.set(f, l)), l.includes(t) || l.push(t);
     });
-    for (const [c, f] of this.#s.entries())
-      for (const a of f) {
-        const l = a instanceof HTMLElement || a instanceof CSSStyleRule ? a : a.element;
-        l instanceof CSSStyleRule || l.isConnected || this.#s.set(
-          c,
-          f.filter((p) => p !== a)
+    for (const [a, f] of this.#e.entries())
+      for (const c of f) {
+        const l = c instanceof HTMLElement || c instanceof CSSStyleRule ? c : c.element;
+        l instanceof CSSStyleRule || l.isConnected || this.#e.set(
+          a,
+          f.filter((p) => p !== c)
         );
       }
-    let r = this.#s.get(t);
-    r || (r = [], this.#s.set(t, r)), r.push(s ? { element: e, attrName: s } : e), e instanceof HTMLElement && this.#$(e, s, o);
+    let n = this.#e.get(t);
+    n || (n = [], this.#e.set(t, n)), n.push(e ? { element: s, attrName: e } : s), s instanceof HTMLElement && this.#N(s, e, o);
     const h = this.#o(t);
-    s ? C(e, s, h) : this.#S(e, h);
+    e ? T(s, e, h) : this.#C(s, h);
   }
   // This follows the best practice
   // "Do not override author-set, global attributes."
-  setAttributeSafe(t, e) {
-    this.hasAttribute(t) || this.setAttribute(t, e);
+  setAttributeSafe(t, s) {
+    this.hasAttribute(t) || this.setAttribute(t, s);
   }
-  setFormValue(t, e) {
-    !this.#i || !T(e) || (this.#i.set(t, e), this.#h?.setFormValue(this.#i));
+  setFormValue(t, s) {
+    !this.#i || !S(s) || (this.#i.set(t, s), this.#h?.setFormValue(this.#i));
   }
-  #e(t, e, s) {
+  #s(t, s, e) {
     const o = this.#t, i = t instanceof HTMLElement ? t.localName : "CSS rule";
     throw new m(
-      `component ${o.elementName()}` + (t ? `, element "${i}"` : "") + (e ? `, attribute "${e}"` : "") + ` ${s}`
+      `component ${o.elementName()}` + (t ? `, element "${i}"` : "") + (s ? `, attribute "${s}"` : "") + ` ${e}`
     );
   }
-  #c(t, e, s) {
-    this.#e(t, e, `refers to missing property "${s}"`);
+  #a(t, s, e) {
+    this.#s(t, s, `refers to missing property "${e}"`);
   }
-  #A(t, e) {
-    return this.#E(t, this.getAttribute(e));
+  #A(t, s) {
+    return this.#y(t, this.getAttribute(s));
   }
-  #E(t, e) {
-    if (e?.match(E)) return e;
-    const s = this.#t, { type: o } = s.properties[t];
-    if (o || this.#e(null, t, "does not specify its type"), o === String) return e;
-    if (o === Number) return S(e);
+  #y(t, s) {
+    if (s?.match(y)) return s;
+    const e = this.#t, { type: o } = e.properties[t];
+    if (o || this.#s(null, t, "does not specify its type"), o === String) return s;
+    if (o === Number) return C(s);
     if (o === Boolean)
-      return e === "true" ? !0 : e === "false" || e === "null" ? !1 : (e && e !== t && this.#e(
+      return s === "true" ? !0 : s === "false" || s === "null" ? !1 : (s && s !== t && this.#s(
         null,
         t,
         "is a Boolean attribute, so its value must match attribute name or be missing"
-      ), e === t);
+      ), s === t);
   }
   // Updates the matching attribute for a property if there is one.
   // VS Code thinks this is never called, but it is called by #defineProp.
-  #L(t, e, s, o) {
-    if (T(s) && this.hasAttribute(o)) {
-      const i = e === Boolean ? this.hasAttribute(o) : this.#A(t, o);
-      s !== i && k(this, t, s);
+  #x(t, s, e, o) {
+    if (S(e) && this.hasAttribute(o)) {
+      const i = s === Boolean ? this.hasAttribute(o) : this.#A(t, o);
+      e !== i && H(this, t, e);
     }
   }
   // Updates all computed properties that reference this property.
   // VS Code thinks this is never called, but it is called by #defineProp.
-  #k(t) {
-    const s = this.#t.propToComputedMap.get(t) || [];
-    for (const [o, i] of s)
+  #L(t) {
+    const e = this.#t.propToComputedMap.get(t) || [];
+    for (const [o, i] of e)
       this[o] = this.#o(i);
   }
-  #S(t, e) {
-    if (e === void 0) return;
-    const s = t instanceof HTMLElement, o = typeof e;
-    o !== "string" && o !== "number" && this.#e(
+  #C(t, s) {
+    if (s === void 0) return;
+    const e = t instanceof HTMLElement, o = typeof s;
+    o !== "string" && o !== "number" && this.#s(
       t,
       void 0,
       " computed content is not a string or number"
-    ), t instanceof HTMLElement && d(t) ? t.value = e : s && o === "string" && e.trim().startsWith("<") ? (t.innerHTML = e, this.#C(t), this.#b(t)) : s && (t.textContent = e);
+    ), t instanceof HTMLElement && d(t) ? t.value = s : e && o === "string" && s.trim().startsWith("<") ? (t.innerHTML = s, this.#T(t), this.#b(t)) : e && (t.textContent = s);
   }
   // Update corresponding parent web component property if bound to one.
   // VS Code thinks this is never called, but it is called by #defineProp.
-  #H(t, e) {
-    const s = this.#l.get(t);
-    if (!s) return;
+  #H(t, s) {
+    const e = this.#l.get(t);
+    if (!e) return;
     const o = this.getRootNode();
     if (!(o instanceof ShadowRoot)) return;
     const { host: i } = o;
     if (!i) return;
-    const r = i;
-    r[s] = e;
+    const n = i;
+    n[e] = s;
   }
   /**
    * @param state - WrecState object
    * @param map - object whose keys are state properties and
    *   whose values are component properties
    */
-  useState(t, e) {
-    if (!e) {
-      e = {};
-      for (const s of Object.keys(t))
-        e[s] = s;
+  useState(t, s) {
+    if (!s) {
+      s = {};
+      for (const e of Object.keys(t))
+        s[e] = e;
     }
-    this.#F(t, e);
-    for (const [s, o] of Object.entries(e))
-      if (this.#r(o)) {
-        const i = M(t, s);
+    this.#k(t, s);
+    for (const [e, o] of Object.entries(s))
+      if (this.#n(o)) {
+        const i = R(t, e);
         i !== void 0 && (this[o] = i);
-        const r = this.#t.properties[o];
-        r.state = t, r.stateProp = s;
+        const n = this.#t.properties[o];
+        n.state = t, n.stateProp = e;
       }
-    t.addListener(this, e);
+    t.addListener(this, s);
   }
   #O() {
-    const t = this.#t, e = new Set(Object.keys(t.properties));
-    for (const o of e)
-      _.has(o) && this.#e(
+    const t = this.#t, s = new Set(Object.keys(t.properties));
+    for (const o of s)
+      V.has(o) && this.#s(
         null,
         "",
         `property "${o}" is not allowed because it is a reserved attribute`
       );
-    const s = this.#t.name;
+    const e = this.#t.name;
     for (const o of this.getAttributeNames())
       if (o !== "class" && o !== "id" && o !== "disabled" && !o.startsWith("on")) {
         if (o === "form-assoc") {
           if (!t.formAssociated)
             throw new m(
-              `add "static formAssociated = true;" to class ${s}`
+              `add "static formAssociated = true;" to class ${e}`
             );
           continue;
         }
-        if (!e.has(u.getPropName(o))) {
+        if (!s.has(u.getPropName(o))) {
           if (o === "name") {
             if (t.formAssociated) continue;
             throw new m(
-              `name attribute requires "static formAssociated = true;" in class ${s}`
+              `name attribute requires "static formAssociated = true;" in class ${e}`
             );
           }
-          this.#e(null, o, "is not a supported attribute");
+          this.#s(null, o, "is not a supported attribute");
         }
       }
   }
-  #u(t, e, s) {
-    const o = s.match(E);
+  #u(t, s, e) {
+    const o = e.match(y);
     if (o)
       return o.forEach((i) => {
-        const r = g(i);
-        this[r] === void 0 && this.#c(t, e, r);
+        const n = E(i);
+        this[n] === void 0 && this.#a(t, s, n);
       }), o;
   }
-  #F(t, e) {
-    for (const [s, o] of Object.entries(e)) {
-      let i = M(t, s);
+  #k(t, s) {
+    for (const [e, o] of Object.entries(s)) {
+      let i = R(t, e);
       if (i === void 0)
-        throw new m(`invalid state path "${s}"`);
-      i = this[o], this.#r(o) || this.#e(
+        throw new m(`invalid state path "${e}"`);
+      i = this[o], this.#n(o) || this.#s(
         null,
         o,
         "refers to missing property in useState map"
@@ -593,76 +564,76 @@ class u extends HTMLElement {
     }
   }
   // When type is an array, this can't validate the type of the array elements.
-  #j(t, e, s) {
-    if (s instanceof e) return;
-    let o = typeof s;
+  #F(t, s, e) {
+    if (e instanceof s) return;
+    let o = typeof e;
     if (o === "object") {
-      const { constructor: i } = s;
-      o = i.name, i !== e && this.#e(
+      const { constructor: i } = e;
+      o = i.name, i !== s && this.#s(
         null,
         t,
-        `was set to a ${o}, but must be a ${e.name}`
+        `was set to a ${o}, but must be a ${s.name}`
       );
     }
-    o !== e.name.toLowerCase() && this.#e(
+    o !== s.name.toLowerCase() && this.#s(
       null,
       t,
-      `was set to a ${o}, but must be a ${e.name}`
+      `was set to a ${o}, but must be a ${s.name}`
     );
   }
-  #C(t) {
-    const e = Array.from(t.querySelectorAll("*"));
-    for (const s of e) {
+  #T(t) {
+    const s = Array.from(t.querySelectorAll("*"));
+    for (const e of s) {
       const o = [];
-      for (const i of Array.from(s.attributes)) {
-        const r = i.name;
-        if (r.startsWith("on")) {
-          let h = r.slice(2);
+      for (const i of Array.from(e.attributes)) {
+        const n = i.name;
+        if (n.startsWith("on")) {
+          let h = n.slice(2);
           h = h[0].toLowerCase() + h.slice(1).toLowerCase();
-          const c = i.value;
-          this.#u(s, r, c);
+          const a = i.value;
+          this.#u(e, n, a);
           let f;
-          typeof this[c] == "function" ? f = (a) => this[c](a) : (this.#u(s, r, c), f = () => this.#o(c)), s.addEventListener(h, f), o.push(r);
+          typeof this[a] == "function" ? f = (c) => this[a](c) : (this.#u(e, n, a), f = () => this.#o(a)), e.addEventListener(h, f), o.push(n);
         }
       }
       for (const i of o)
-        s.removeAttribute(i);
+        e.removeAttribute(i);
     }
   }
 }
-function Z(n, ...t) {
-  let e = x(n, t);
+function z(r, ...t) {
+  let s = x(r, t);
   for (; ; ) {
-    const s = O.exec(e);
-    if (!s) break;
-    const o = s[2];
-    if ($.test(o)) {
-      const i = s[1];
+    const e = k.exec(s);
+    if (!e) break;
+    const o = e[2];
+    if (N.test(o)) {
+      const i = e[1];
       if (!i.startsWith("--")) {
-        const r = `--${i}: ${o};
+        const n = `--${i}: ${o};
       ${i}: var(--${i})`;
-        e = L(e, s.index, s[0].length, r);
+        s = L(s, e.index, e[0].length, n);
       }
     }
   }
-  return e;
+  return s;
 }
-function K(n, ...t) {
-  let e = x(n, t);
+function Z(r, ...t) {
+  let s = x(r, t);
   for (; ; ) {
-    const s = V.exec(e);
-    if (!s || s[1] === "style") break;
-    const o = q(s[2]);
-    if ($.test(o)) {
-      const i = `<!-- ${o.trim()} -->`, r = s.index + s[0].indexOf(">") + 1;
-      e = L(e, r, o.length, i);
+    const e = _.exec(s);
+    if (!e || e[1] === "style") break;
+    const o = B(e[2]);
+    if (N.test(o)) {
+      const i = `<!-- ${o.trim()} -->`, n = e.index + e[0].indexOf(">") + 1;
+      s = L(s, n, o.length, i);
     }
   }
-  return e;
+  return s;
 }
 export {
   u as Wrec,
-  z as createElement,
-  Z as css,
-  K as html
+  q as createElement,
+  z as css,
+  Z as html
 };