wrec 0.16.9 → 0.17.1

package/README.md

@@ -41,12 +41,12 @@ Here are the steps:
 
 1. Create a new directory for the project and `cd` to it.
 
-1. Create a `package.json` file entering `npm init`.
+1. Enter `npm init -y` to create a `package.json` file.
 
-1. Install wrec by entering `npm i wrec`.
+1. Enter `npm i wrec` to install the wrec library.
 
-1. Install vite by entering `npm i -D vite`.
-   This is only used to run a local HTTP server.
+1. Enter `npm i -D vite` to install vite.
+   This is used to run a local HTTP server.
 
 1. Add the following script in `package.json`:
 
@@ -91,7 +91,7 @@ Here are the steps:
          </button>
          <span>this.count</span>
          <button onClick="this.count++" type="button">+</button>
-         <span>(this.count < 10 ? "single" : "double") + " digit"</span>
+         <span>(this.count < 10 ? "single" : "multi") + "-digit"</span>
        </div>
      `;
    }
@@ -113,7 +113,7 @@ Here are the steps:
    </html>
    ```
 
-1. Start a local server by entering `npm run dev`.
+1. Enter `npm run dev` to start a local server.
 
 1. Browse localhost:5173.
 
@@ -173,3 +173,28 @@ This uses the `data-binding`, `number-slider`, `radio-group`,
 `select-list`, and `toggle-switch` components.
 
 `speedometer-demo.html` demonstrates fancy graphics.
+
+`state-demo.html` demonstrates using the `WrecState` class
+to share state across multiple wrec components.
+
+- This creates a `WrecState` object with the name "demo"
+  and with a "name" property set to "World".
+- The "value" property of the `labeled-input` component
+  is mapped to the state "name" property.
+- The "name" property of the `hello-world` component
+  is mapped to the state "name" property because
+  when no mapping is specified, identical property names are mapped.
+- Changing the input value in the `label-input` component and
+  moving focus to commit the change updates the state `name` property.
+- The `hello-world` component uses that same state property.
+- Clicking the "Reset" button sets the state "name" property
+  back to "World".
+- The state object can be retrieved and modified
+  in the DevTools console as follows:
+
+  ```js
+  state = WrecState.get('demo');
+  state; // to examine the entire object
+  state.name; // to see current value of "name" property
+  state.name = 'Earth'; // to modify "name" property
+  ```

package/dist/wrec.es.js

@@ -1,133 +1,156 @@
-function S(r, t) {
+function R(r, t) {
   let e = r;
   for (const s of t.split("."))
     e = e[s];
   return e;
 }
-function N(r, t, e) {
+function O(r, t, e) {
   const s = t.split("."), o = s.length - 1;
   let i = r;
-  s.forEach((n, a) => {
-    a === o ? i[n] = e : i = i[n];
+  s.forEach((n, h) => {
+    h === o ? i[n] = e : i = i[n];
   });
 }
-class p extends Error {
+class m extends Error {
 }
-const O = /([a-zA-Z-]+)\s*:\s*([^;}]+)/g, P = "a-zA-Z_$", H = P + "0-9", d = `[${P}][${H}]*`, k = /<!--\s*(.*?)\s*-->/, F = /<(\w+)(?:\s[^>]*)?>((?:[^<]|<(?!\w))*?)<\/\1>/g, j = new RegExp(`^this\\.${d}$`), b = new RegExp(`this\\.${d}(\\.${d})*`, "g"), R = new RegExp(`this\\.${d}(\\.${d})*`), v = 5;
+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 l;
+  return r instanceof HTMLButtonElement || r instanceof HTMLFieldSetElement || r instanceof HTMLInputElement || r instanceof HTMLSelectElement || r instanceof HTMLTextAreaElement || r instanceof u;
 }
-function D(r, t, e) {
+function q(r, t, e) {
   const s = document.createElement(r);
   if (t)
     for (const [o, i] of Object.entries(t))
       s.setAttribute(o, i);
   return e && (s.innerHTML = e), s;
 }
-const B = (r) => r === String ? "" : r === Number ? 0 : r === Boolean ? !1 : r === Array ? [] : r === Object ? {} : void 0;
-function E(r) {
+const D = (r) => r === String ? "" : r === Number ? 0 : r === Boolean ? !1 : r === Array ? [] : r === Object ? {} : void 0;
+function w(r) {
   const t = [];
   let e = r.firstElementChild;
   for (; e; )
-    t.push(e), e.shadowRoot && t.push(...E(e.shadowRoot)), e.firstElementChild && t.push(...E(e)), e = e.nextElementSibling;
+    t.push(e), e.shadowRoot && t.push(...w(e.shadowRoot)), e.firstElementChild && t.push(...w(e)), e = e.nextElementSibling;
   return t;
 }
-function C(r, t) {
-  if (r.id === t) return r;
-  const { shadowRoot: e } = r;
-  if (e)
-    for (const s of Array.from(e.children)) {
-      const o = C(s, t);
-      if (o) return o;
-    }
-  for (const s of Array.from(r.children)) {
-    const o = C(s, t);
-    if (o) return o;
-  }
-  return null;
-}
-const g = (r) => r.substring(v).split(".")[0];
+const E = (r) => r.substring($).split(".")[0];
 function x(r, t) {
   let e = r[0];
   return t.forEach((s, o) => {
     e += s + r[o + 1];
   }), e;
 }
-function w(r) {
+function S(r) {
   const t = typeof r;
   return t === "string" || t === "number" || t === "boolean";
 }
-const V = (r) => r.replace(/<!--[\s\S]*?-->/g, "");
-function $(r, t, e, s) {
+function d(r) {
+  return r.localName === "textarea";
+}
+function v(r) {
+  const { localName: t } = r;
+  return t === "input" || t === "select";
+}
+const B = (r) => r.replace(/<!--[\s\S]*?-->/g, "");
+function L(r, t, e, s) {
   return r.slice(0, t) + s + r.slice(t + e);
 }
-function y(r) {
+function C(r) {
   const t = Number(r);
-  if (isNaN(t)) throw new p(`can't convert "${r}" to a number`);
+  if (isNaN(t)) throw new m(`can't convert "${r}" to a number`);
   return t;
 }
-function L(r, t, e) {
-  if (w(e))
+function H(r, t, e) {
+  const [s, o] = t.split(":");
+  if (S(e))
     if (typeof e == "boolean") {
-      e ? r.setAttribute(t, t) : r.removeAttribute(t);
-      const s = l.getPropName(t);
-      r[s] = e;
-    } else
-      r.getAttribute(t) !== e && r.setAttribute(t, String(e));
+      e ? r.setAttribute(s, s) : r.removeAttribute(s);
+      const i = u.getPropName(s);
+      r[i] = e;
+    } else {
+      const i = r.getAttribute(t), n = String(e);
+      i !== n && (r.setAttribute(s, n), s === "value" && v(r) && (r.value = n));
+    }
   else {
-    const s = l.getPropName(t);
-    r[s] = e;
+    const i = u.getPropName(t);
+    r[i] = e;
   }
 }
-function A(r, t, e) {
-  r instanceof CSSRule ? r.style.setProperty(t, e) : L(r, t, e);
+function T(r, t, e) {
+  const [s, o] = t.split(":");
+  r instanceof CSSRule ? r.style.setProperty(s, e) : (H(r, s, e), s === "value" && v(r) && (r.value = e));
 }
-class l extends HTMLElement {
+class u extends HTMLElement {
+  // This is used to lookup the camelCase property name
+  // that corresponds to a kebab-case attribute name.
   static #p = /* @__PURE__ */ new Map();
+  // This is used to lookup the kebab-case attribute name
+  // that corresponds to a camelCase property name.
   static #d = /* @__PURE__ */ new Map();
-  static #m = /* @__PURE__ */ new Map();
+  // This can be set in each Wrec subclass.
+  // It describes CSS rules that a web component uses.
   static css = "";
+  // Set this to true in Wrec subclasses that need
+  // the ability to contribute data to form submissions.
   static formAssociated = !1;
+  // This must be set in each Wrec subclass.
+  // It describes HTML that a web component renders.
   static html = "";
+  // There is one instance of `properties`, `propToComputedMap`,
+  // and `propToExprsMap` per Wrec subclass,
+  // not one for only the Wrec class.
+  // This must be set in each Wrec subclass.
+  // It describes all the properties that a web component supports.
   static properties = {};
+  // This is a map from properties to arrays of
+  // computed property expressions that use the property.
+  // It is used to update computed properties
+  // when the properties on which they depend are modified.
+  // See the method #updateComputedProperties.
+  // This map cannot be private.
   static propToComputedMap = null;
+  // 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 = 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();
-  #c = {};
-  #o;
-  #b = {};
-  #a = null;
-  #f = /* @__PURE__ */ new Map();
-  // This must be an instance property and cannot be private because
-  // child components need to access the property in their parent component.
-  #h = /* @__PURE__ */ new Map();
+  #a = {};
+  #i;
+  // For components that set `formAssociated` to true,
+  // this stores in the initial value of each property
+  // in the formAssociatedCallback method
+  // so they can be restored in the formResetCallback method.
+  #f = {};
+  #h = null;
+  // This is a map from properties in this web component
+  // to corresponding properties in a parent web component.
+  // This must be an instance property because
+  // each component instance can have its properties mapped
+  // to the properties of different parent components.
+  // This is used to update a parent property
+  // when the corresponding child property value changes.
+  #l = /* @__PURE__ */ new Map();
   constructor() {
     super(), this.attachShadow({ mode: "open" });
     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) {
-    t === "disabled" && this.#y();
-    const o = l.getPropName(t);
+    t === "disabled" && this.#m();
+    const o = u.getPropName(t);
     if (this.#n(o)) {
-      const i = this.#w(o, String(s));
+      const i = this.#y(o, String(s));
       this[o] = i;
-      const n = this.#c[o];
+      const n = this.#a[o];
       n && this.setFormValue(n, String(i)), this.propertyChangedCallback(o, e, s);
     }
   }
-  // attrName must be "value" OR undefined!
-  #g(t, e, s, o) {
-    t.addEventListener(o, (n) => {
-      const a = n.target, { value: c } = a, { type: h } = this.#t.properties[e];
-      this[e] = h === Number ? y(c) : c;
-    });
-    let i = this.#f.get(e);
-    i || (i = [], this.#f.set(e, i)), i.push(s ? { element: t, attrName: s } : t);
-  }
-  #S() {
+  #w() {
     const t = this.#t;
     let e = t.template;
     if (!e) {
@@ -141,54 +164,50 @@ class l extends HTMLElement {
     this[e] = s;
   }
   connectedCallback() {
-    this.#I(), this.#R(), this.#S(), this.hasAttribute("disabled") && this.#y(), requestAnimationFrame(() => {
-      this.shadowRoot && (this.#M(this.shadowRoot), this.#A(this.shadowRoot), l.#O()), this.#P();
+    this.#O(), this.#v(), this.#w(), this.hasAttribute("disabled") && this.#m(), requestAnimationFrame(() => {
+      this.shadowRoot && (this.#T(this.shadowRoot), this.#b(this.shadowRoot)), this.#S();
     });
   }
-  #P() {
+  #S() {
     const t = this.#t, { properties: e } = t;
     for (const [s, { computed: o }] of Object.entries(e))
-      o && (this[s] = this.#i(o));
-  }
-  static dataForId(t) {
-    const e = crypto.randomUUID();
-    return l.#d.set(e, t), e;
+      o && (this[s] = this.#o(o));
   }
-  #R() {
+  #v() {
     const t = this.#t, { observedAttributes: e, properties: s } = t;
     for (const [o, i] of Object.entries(s))
-      this.#v(o, i, e);
+      this.#M(o, i, e);
   }
-  #v(t, e, s) {
-    const o = l.getAttrName(t), i = this.hasAttribute(o);
+  #M(t, e, s) {
+    const o = u.getAttrName(t), i = this.hasAttribute(o);
     e.required && !i && this.#e(this, t, "is a required attribute");
     let n = e.value;
-    this.hasOwnProperty(t) && (n = this[t], delete this[t]), console.log("wrec.ts #defineProp: propName =", t), console.log("wrec.ts #defineProp: value =", n);
-    const { type: a } = e, c = a === Boolean ? n || i : s.includes(o) && i ? this.#C(t, o) : n || B(a), h = "#" + t;
-    this[h] = c, e.computed && this.#N(t, e), Object.defineProperty(this, t, {
+    this.hasOwnProperty(t) && (n = this[t], delete this[t]);
+    const { type: h } = e, c = h === Boolean ? n || i : s.includes(o) && i ? this.#A(t, o) : n || D(h), f = "#" + t;
+    this[f] = c, e.computed && this.#$(t, e), Object.defineProperty(this, t, {
       enumerable: !0,
       get() {
-        return this[h];
+        return this[f];
       },
-      set(f) {
-        a === Number && typeof f == "string" && (f = y(f));
-        const u = this[h];
-        if (f === u) return;
-        this.#V(t, a, f), this[h] = f;
-        const { state: m, stateProp: T } = this.#t.properties[t];
-        T && N(m, T, f), this.#F(t), this.#H(t, a, f, o), this.#L(t), this.#j(t, f);
-        const M = this.#c[t];
-        M && this.setFormValue(M, String(f)), this.propertyChangedCallback(t, u, f), e.dispatch && this.dispatch("change", { [t]: f });
+      set(a) {
+        h === Number && typeof a == "string" && (a = C(a));
+        const l = this[f];
+        if (a === l) return;
+        this.#F(t, h, a), this[f] = a;
+        const { state: p, stateProp: g } = this.#t.properties[t];
+        g && O(p, g, a), this.#L(t), this.#x(t, h, a, o), this.#E(t), this.#H(t, a);
+        const M = this.#a[t];
+        M && this.setFormValue(M, String(a)), this.propertyChangedCallback(t, l, a), e.dispatch && this.dispatch("change", { [t]: a });
       }
     });
   }
-  #y() {
-    const t = this.hasAttribute("disabled"), e = E(this.shadowRoot);
+  #m() {
+    const t = this.hasAttribute("disabled"), e = w(this.shadowRoot);
     for (const s of e)
       I(s) && (s.disabled = t);
   }
   disconnectedCallback() {
-    this.#s.clear(), this.#h.clear();
+    this.#s.clear(), this.#f.clear(), this.#l.clear();
   }
   dispatch(t, e) {
     this.dispatchEvent(
@@ -209,43 +228,44 @@ class l extends HTMLElement {
   static elementName() {
     return this.name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
   }
-  #x(t) {
-    const e = t instanceof l;
+  #R(t) {
+    const e = t instanceof u;
     for (const s of t.getAttributeNames()) {
-      const o = t.getAttribute(s), i = this.#E(t, o);
+      const o = t.getAttribute(s), i = this.#g(t, o);
       if (i) {
         const n = this[i];
-        n === void 0 && this.#r(t, s, i), t[i] = n;
-        let [a, c] = s.split(":");
-        a === "value" && (c ? (t["on" + c] === void 0 && this.#e(t, s, "refers to an unsupported event name"), t.setAttribute(a, this[i])) : c = "change", this.#g(t, i, a, c)), e && t.#h.set(
-          l.getPropName(a),
+        n === void 0 && this.#c(t, s, i), t[i] = n;
+        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(
+          u.getPropName(h),
           i
         );
       }
-      this.#l(o, t, s);
+      this.#r(o, t, s);
     }
   }
-  #i(t) {
+  #o(t) {
     const e = new Function("return " + t).call(this);
     return Array.isArray(e) ? e.join("") : e;
   }
-  #$(t) {
+  #P(t) {
     const { localName: e } = t;
     if (e === "style") {
       const { sheet: s } = t, o = s?.cssRules ?? [], i = Array.from(o);
       for (const n of i)
         if (n.constructor === CSSStyleRule) {
-          const a = Array.from(n.style);
-          for (const c of a)
+          const h = Array.from(n.style);
+          for (const c of h)
             if (c.startsWith("--")) {
-              const h = n.style.getPropertyValue(c);
-              this.#l(h, n, c);
+              const f = n.style.getPropertyValue(c);
+              this.#r(f, n, c);
             }
         }
     } else {
       let s = "";
-      if (e === "textarea") {
-        const o = t.textContent?.match(k);
+      if (d(t)) {
+        this.#r(t.textContent, t);
+        const o = t.textContent?.match(j);
         o && (s = o[1]);
       } else {
         const o = Array.from(t.childNodes).find(
@@ -254,8 +274,8 @@ class l extends HTMLElement {
         o && (s = o.textContent?.trim() ?? "");
       }
       if (s) {
-        const o = this.#E(t, s);
-        e === "textarea" && o ? (this.#g(t, o, null, "change"), t.textContent = this[o]) : this.#l(s, t);
+        const o = this.#g(t, s);
+        o && d(t) ? t.textContent = this[o] : this.#r(s, t);
       }
     }
   }
@@ -271,80 +291,99 @@ class l extends HTMLElement {
         if (this.#n("value"))
           t = `value:${n}`;
         else
-          throw new p(
-            "can't submit by name because component has no value property"
-          );
+          return;
       else
         return;
     }
     const e = {}, s = t.split(",");
     for (const n of s) {
-      const [a, c] = n.split(":");
-      e[a.trim()] = c.trim();
+      const [h, c] = n.split(":");
+      e[h.trim()] = c.trim();
     }
-    this.#c = e, this.#o = new FormData(), this.#a = this.attachInternals(), this.#a.setFormValue(this.#o);
-    const o = Object.keys(this.#t.properties), i = this.#b;
+    this.#a = e, 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 n of o)
       i[n] = this[n];
   }
   formResetCallback() {
-    const t = this.#b;
-    for (const e of Object.keys(t))
-      this[e] = t[e];
+    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;
+    }
   }
   static getAttrName(t) {
-    let e = l.#m.get(t);
-    return e || (e = t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), l.#m.set(t, e)), e;
+    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;
   }
   static getPropName(t) {
-    let e = l.#p.get(t);
-    return e || (e = t.replace(/-([a-z])/g, (s, o) => o.toUpperCase()), l.#p.set(t, e)), e;
+    let e = u.#p.get(t);
+    return e || (e = t.replace(/-([a-z])/g, (s, o) => o.toUpperCase()), u.#p.set(t, e)), e;
+  }
+  #N(t, e, s) {
+    if (s.length !== 1) return;
+    const [o] = s;
+    if (!A.test(o)) return;
+    const i = v(t) || d(t);
+    let [n, h] = (e ?? "").split(":");
+    if (!(i && n === "value" || d(t))) return;
+    h ? t["on" + h] === void 0 && this.#e(t, e, "refers to an unsupported event name") : h = "change";
+    const f = E(o);
+    t.addEventListener(h, (a) => {
+      const { target: l } = a;
+      if (!l) return;
+      const p = l.value, { type: g } = this.#t.properties[f];
+      this[f] = g === Number ? C(p) : p, this.#E(f);
+    });
   }
   #n(t) {
     return !!this.#t.properties[t];
   }
-  #A(t) {
+  #b(t) {
     const e = Array.from(t.querySelectorAll("*"));
     for (const s of e)
-      this.#x(s), s.firstElementChild || this.#$(s);
+      this.#R(s), s.firstElementChild || this.#P(s);
   }
   static get observedAttributes() {
-    const t = Object.keys(this.properties || {}).map(l.getAttrName);
+    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) {
   }
-  #E(t, e) {
-    if (!e || !j.test(e)) return;
-    const s = g(e);
-    return this[s] === void 0 && this.#r(t, "", s), s;
+  #g(t, e) {
+    if (!e || !A.test(e)) return;
+    const s = E(e);
+    return this[s] === void 0 && this.#c(t, "", s), s;
   }
-  #L(t) {
+  #E(t) {
     const o = this.#t.propToExprsMap.get(t) || [];
     for (const i of o) {
-      const n = this.#i(i), a = this.#s.get(i) ?? [];
-      for (const c of a)
-        c instanceof HTMLElement ? this.#T(c, n) : c instanceof CSSStyleRule || A(c.element, c.attrName, n);
+      let n = this.#o(i);
+      const h = this.#s.get(i) ?? [];
+      for (const c of h)
+        if (c instanceof HTMLElement)
+          this.#C(c, n);
+        else if (!(c instanceof CSSStyleRule)) {
+          const { element: f, attrName: a } = c;
+          f instanceof CSSStyleRule ? f.style.setProperty(a, n) : T(f, a, n);
+        }
     }
-    requestAnimationFrame(() => {
-      this.#k(t);
-    });
   }
   static register() {
     const t = this.elementName();
     customElements.get(t) || customElements.define(t, this);
   }
-  #N(t, e) {
+  #$(t, e) {
     const { computed: s, uses: o } = e, i = this.#t.propToComputedMap;
-    function n(c, h) {
-      let f = i.get(c);
-      f || (f = [], i.set(c, f)), f.push([t, h]);
+    function n(c, f) {
+      let a = i.get(c);
+      a || (a = [], i.set(c, a)), a.push([t, f]);
     }
-    const a = s.match(b) || [];
-    for (const c of a) {
-      const h = c.substring(v);
-      this[h] === void 0 && this.#r(null, t, h), typeof this[h] != "function" && n(h, s);
+    const h = s.match(y) || [];
+    for (const c of h) {
+      const f = c.substring($);
+      this[f] === void 0 && this.#c(null, t, f), typeof this[f] != "function" && n(f, s);
     }
     if (o)
       for (const c of o.split(","))
@@ -352,34 +391,34 @@ class l extends HTMLElement {
   }
   // WARNING: Do not place untrusted JavaScript expressions
   // in attribute values or the text content of elements!
-  #l(t, e, s = void 0) {
+  #r(t, e, s = void 0) {
     if (!t) return;
     const o = this.#u(e, s, t);
     if (!o) {
       const c = t.replaceAll("this..", "this.");
-      s ? A(e, s, c) : "textContent" in e && (e.textContent = c);
+      s ? T(e, s, c) : "textContent" in e && (e.textContent = c);
       return;
     }
     const i = this.#t;
     o.forEach((c) => {
-      const h = g(c);
-      if (typeof this[h] == "function") return;
-      const f = i.propToExprsMap;
-      let u = f.get(h);
-      u || (u = [], f.set(h, u)), u.includes(t) || u.push(t);
+      const f = E(c);
+      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);
     });
-    for (const [c, h] of this.#s.entries())
-      for (const f of h) {
-        const u = f instanceof HTMLElement || f instanceof CSSStyleRule ? f : f.element;
-        u instanceof CSSStyleRule || u.isConnected || this.#s.set(
+    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,
-          h.filter((m) => m !== f)
+          f.filter((p) => p !== a)
         );
       }
     let n = this.#s.get(t);
-    n || (n = [], this.#s.set(t, n)), n.push(s ? { element: e, attrName: s } : e);
-    const a = this.#i(t);
-    s ? A(e, s, a) : this.#T(e, a);
+    n || (n = [], this.#s.set(t, n)), n.push(s ? { element: e, attrName: s } : e), e instanceof HTMLElement && this.#N(e, s, o);
+    const h = this.#o(t);
+    s ? T(e, s, h) : this.#C(e, h);
   }
   // This follows the best practice
   // "Do not override author-set, global attributes."
@@ -387,33 +426,25 @@ class l extends HTMLElement {
     this.hasAttribute(t) || this.setAttribute(t, e);
   }
   setFormValue(t, e) {
-    !this.#o || !w(e) || (this.#o.set(t, e), this.#a?.setFormValue(this.#o));
-  }
-  static #O() {
-    for (const [t, e] of l.#d.entries()) {
-      const s = C(document.body, t);
-      if (s)
-        for (const [o, i] of Object.entries(e))
-          s[o] = i;
-    }
+    !this.#i || !S(e) || (this.#i.set(t, e), this.#h?.setFormValue(this.#i));
   }
   #e(t, e, s) {
     const o = this.#t, i = t instanceof HTMLElement ? t.localName : "CSS rule";
-    throw new p(
+    throw new m(
       `component ${o.elementName()}` + (t ? `, element "${i}"` : "") + (e ? `, attribute "${e}"` : "") + ` ${s}`
     );
   }
-  #r(t, e, s) {
+  #c(t, e, s) {
     this.#e(t, e, `refers to missing property "${s}"`);
   }
-  #C(t, e) {
-    return this.#w(t, this.getAttribute(e));
+  #A(t, e) {
+    return this.#y(t, this.getAttribute(e));
   }
-  #w(t, e) {
-    if (e?.match(b)) return e;
+  #y(t, e) {
+    if (e?.match(y)) 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 y(e);
+    if (o === Number) return C(e);
     if (o === Boolean)
       return e === "true" ? !0 : e === "false" || e === "null" ? !1 : (e && e !== t && this.#e(
         null,
@@ -422,43 +453,33 @@ class l extends HTMLElement {
       ), e === t);
   }
   // Updates the matching attribute for a property if there is one.
-  #H(t, e, s, o) {
-    if (w(s) && this.hasAttribute(o)) {
-      const i = e === Boolean ? this.hasAttribute(o) : this.#C(t, o);
-      s !== i && L(this, t, s);
+  // VS Code thinks this is never called, but it is called by #defineProp.
+  #x(t, e, s, o) {
+    if (S(s) && this.hasAttribute(o)) {
+      const i = e === Boolean ? this.hasAttribute(o) : this.#A(t, o);
+      s !== i && H(this, t, s);
     }
   }
-  #k(t) {
-    const e = this[t], s = this.#f.get(t) || [];
-    for (const o of s)
-      if (o instanceof HTMLElement)
-        o.localName === "textarea" ? o.value = e : o.textContent = e;
-      else if (!(o instanceof CSSStyleRule)) {
-        const { element: i, attrName: n } = o;
-        if (i instanceof HTMLElement) {
-          const a = l.getPropName(n);
-          i[a] = e;
-        } else i instanceof CSSStyleRule && i.style.setProperty(n, e);
-      }
-  }
   // Updates all computed properties that reference this property.
-  #F(t) {
+  // VS Code thinks this is never called, but it is called by #defineProp.
+  #L(t) {
     const s = this.#t.propToComputedMap.get(t) || [];
     for (const [o, i] of s)
-      this[o] = this.#i(i);
+      this[o] = this.#o(i);
   }
-  #T(t, e) {
+  #C(t, e) {
     if (e === void 0) return;
-    const s = t instanceof HTMLElement, o = s ? t.localName : "", i = typeof e;
-    i !== "string" && i !== "number" && this.#e(
+    const s = t instanceof HTMLElement, o = typeof e;
+    o !== "string" && o !== "number" && this.#e(
       t,
       void 0,
       " computed content is not a string or number"
-    ), o === "textarea" ? t.value = e : s && i === "string" && e.trim().startsWith("<") ? (t.innerHTML = e, this.#M(t), this.#A(t)) : s && (t.textContent = e);
+    ), t instanceof HTMLElement && d(t) ? t.value = e : s && o === "string" && e.trim().startsWith("<") ? (t.innerHTML = e, this.#T(t), this.#b(t)) : s && (t.textContent = e);
   }
   // Update corresponding parent web component property if bound to one.
-  #j(t, e) {
-    const s = this.#h.get(t);
+  // 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;
     const o = this.getRootNode();
     if (!(o instanceof ShadowRoot)) return;
@@ -478,32 +499,39 @@ class l extends HTMLElement {
       for (const s of Object.keys(t))
         e[s] = s;
     }
-    this.#B(t, e);
+    this.#k(t, e);
     for (const [s, o] of Object.entries(e))
       if (this.#n(o)) {
-        const i = S(t, s);
+        const i = R(t, s);
         i !== void 0 && (this[o] = i);
         const n = this.#t.properties[o];
         n.state = t, n.stateProp = s;
       }
     t.addListener(this, e);
   }
-  #I() {
-    const t = this.#t, e = this.#t.name, s = new Set(Object.keys(t.properties));
+  #O() {
+    const t = this.#t, e = new Set(Object.keys(t.properties));
+    for (const o of e)
+      V.has(o) && this.#e(
+        null,
+        "",
+        `property "${o}" is not allowed because it is a reserved attribute`
+      );
+    const s = this.#t.name;
     for (const o of this.getAttributeNames())
       if (o !== "class" && o !== "id" && o !== "disabled" && !o.startsWith("on")) {
         if (o === "form-assoc") {
-          if (!this.#t.formAssociated)
-            throw new p(
-              `add "static formAssociated = true;" to class ${e}`
+          if (!t.formAssociated)
+            throw new m(
+              `add "static formAssociated = true;" to class ${s}`
             );
           continue;
         }
-        if (!s.has(l.getPropName(o))) {
+        if (!e.has(u.getPropName(o))) {
           if (o === "name") {
             if (t.formAssociated) continue;
-            throw new p(
-              `name attribute requires "static formAssociated = true;" in class ${e}`
+            throw new m(
+              `name attribute requires "static formAssociated = true;" in class ${s}`
             );
           }
           this.#e(null, o, "is not a supported attribute");
@@ -511,18 +539,18 @@ class l extends HTMLElement {
       }
   }
   #u(t, e, s) {
-    const o = s.match(b);
+    const o = s.match(y);
     if (o)
       return o.forEach((i) => {
-        const n = g(i);
-        this[n] === void 0 && this.#r(t, e, n);
+        const n = E(i);
+        this[n] === void 0 && this.#c(t, e, n);
       }), o;
   }
-  #B(t, e) {
+  #k(t, e) {
     for (const [s, o] of Object.entries(e)) {
-      let i = S(t, s);
+      let i = R(t, s);
       if (i === void 0)
-        throw new p(`invalid state path "${s}"`);
+        throw new m(`invalid state path "${s}"`);
       i = this[o], this.#n(o) || this.#e(
         null,
         o,
@@ -531,7 +559,7 @@ class l extends HTMLElement {
     }
   }
   // When type is an array, this can't validate the type of the array elements.
-  #V(t, e, s) {
+  #F(t, e, s) {
     if (s instanceof e) return;
     let o = typeof s;
     if (o === "object") {
@@ -548,19 +576,19 @@ class l extends HTMLElement {
       `was set to a ${o}, but must be a ${e.name}`
     );
   }
-  #M(t) {
+  #T(t) {
     const e = Array.from(t.querySelectorAll("*"));
     for (const s of e) {
       const o = [];
       for (const i of Array.from(s.attributes)) {
         const n = i.name;
         if (n.startsWith("on")) {
-          let a = n.slice(2);
-          a = a[0].toLowerCase() + a.slice(1).toLowerCase();
+          let h = n.slice(2);
+          h = h[0].toLowerCase() + h.slice(1).toLowerCase();
           const c = i.value;
           this.#u(s, n, c);
-          let h;
-          typeof this[c] == "function" ? h = (f) => this[c](f) : (this.#u(s, n, c), h = () => this.#i(c)), s.addEventListener(a, h), o.push(n);
+          let f;
+          typeof this[c] == "function" ? f = (a) => this[c](a) : (this.#u(s, n, c), f = () => this.#o(c)), s.addEventListener(h, f), o.push(n);
         }
       }
       for (const i of o)
@@ -568,39 +596,39 @@ class l extends HTMLElement {
     }
   }
 }
-function q(r, ...t) {
+function z(r, ...t) {
   let e = x(r, t);
   for (; ; ) {
-    const s = O.exec(e);
+    const s = k.exec(e);
     if (!s) break;
     const o = s[2];
-    if (R.test(o)) {
+    if (N.test(o)) {
       const i = s[1];
       if (!i.startsWith("--")) {
         const n = `--${i}: ${o};
         ${i}: var(--${i});`;
-        e = $(e, s.index, s[0].length, n);
+        e = L(e, s.index, s[0].length, n);
       }
     }
   }
   return e;
 }
-function _(r, ...t) {
+function Z(r, ...t) {
   let e = x(r, t);
   for (; ; ) {
-    const s = F.exec(e);
-    if (!s) break;
-    const o = V(s[2]);
-    if (R.test(o)) {
+    const s = _.exec(e);
+    if (!s || s[1] === "style") break;
+    const o = B(s[2]);
+    if (N.test(o)) {
       const i = `<!-- ${o.trim()} -->`, n = s.index + s[0].indexOf(">") + 1;
-      e = $(e, n, o.length, i);
+      e = L(e, n, o.length, i);
     }
   }
   return e;
 }
 export {
-  l as Wrec,
-  D as createElement,
-  q as css,
-  _ as html
+  u as Wrec,
+  q as createElement,
+  z as css,
+  Z as html
 };

package/dist/wrec.umd.js

@@ -1,2 +1,2 @@
-(function(p,d){typeof exports=="object"&&typeof module<"u"?d(exports):typeof define=="function"&&define.amd?define(["exports"],d):(p=typeof globalThis<"u"?globalThis:p||self,d(p.wrec={}))})(this,(function(p){"use strict";function d(r,t){let e=r;for(const s of t.split("."))e=e[s];return e}function O(r,t,e){const s=t.split("."),o=s.length-1;let i=r;s.forEach((n,a)=>{a===o?i[n]=e:i=i[n]})}class m extends Error{}const H=/([a-zA-Z-]+)\s*:\s*([^;}]+)/g,M="a-zA-Z_$",k=M+"0-9",b=`[${M}][${k}]*`,j=/<!--\s*(.*?)\s*-->/,F=/<(\w+)(?:\s[^>]*)?>((?:[^<]|<(?!\w))*?)<\/\1>/g,I=new RegExp(`^this\\.${b}$`),g=new RegExp(`this\\.${b}(\\.${b})*`,"g"),P=new RegExp(`this\\.${b}(\\.${b})*`),R=5;function B(r){return r instanceof HTMLButtonElement||r instanceof HTMLFieldSetElement||r instanceof HTMLInputElement||r instanceof HTMLSelectElement||r instanceof HTMLTextAreaElement||r instanceof l}function V(r,t,e){const s=document.createElement(r);if(t)for(const[o,i]of Object.entries(t))s.setAttribute(o,i);return e&&(s.innerHTML=e),s}const D=r=>r===String?"":r===Number?0:r===Boolean?!1:r===Array?[]:r===Object?{}:void 0;function y(r){const t=[];let e=r.firstElementChild;for(;e;)t.push(e),e.shadowRoot&&t.push(...y(e.shadowRoot)),e.firstElementChild&&t.push(...y(e)),e=e.nextElementSibling;return t}function E(r,t){if(r.id===t)return r;const{shadowRoot:e}=r;if(e)for(const s of Array.from(e.children)){const o=E(s,t);if(o)return o}for(const s of Array.from(r.children)){const o=E(s,t);if(o)return o}return null}const A=r=>r.substring(R).split(".")[0];function v(r,t){let e=r[0];return t.forEach((s,o)=>{e+=s+r[o+1]}),e}function T(r){const t=typeof r;return t==="string"||t==="number"||t==="boolean"}const q=r=>r.replace(/<!--[\s\S]*?-->/g,"");function $(r,t,e,s){return r.slice(0,t)+s+r.slice(t+e)}function w(r){const t=Number(r);if(isNaN(t))throw new m(`can't convert "${r}" to a number`);return t}function x(r,t,e){if(T(e))if(typeof e=="boolean"){e?r.setAttribute(t,t):r.removeAttribute(t);const s=l.getPropName(t);r[s]=e}else r.getAttribute(t)!==e&&r.setAttribute(t,String(e));else{const s=l.getPropName(t);r[s]=e}}function C(r,t,e){r instanceof CSSRule?r.style.setProperty(t,e):x(r,t,e)}class l extends HTMLElement{static#p=new Map;static#d=new Map;static#m=new Map;static css="";static formAssociated=!1;static html="";static properties={};static propToComputedMap=null;static propToExprsMap=null;static template=null;#t=this.constructor;#s=new Map;#c={};#o;#b={};#a=null;#f=new Map;#h=new Map;constructor(){super(),this.attachShadow({mode:"open"});const t=this.#t;t.properties||(t.properties={}),t.propToComputedMap||(t.propToComputedMap=new Map),t.propToExprsMap||(t.propToExprsMap=new Map)}attributeChangedCallback(t,e,s){t==="disabled"&&this.#y();const o=l.getPropName(t);if(this.#n(o)){const i=this.#w(o,String(s));this[o]=i;const n=this.#c[o];n&&this.setFormValue(n,String(i)),this.propertyChangedCallback(o,e,s)}}#g(t,e,s,o){t.addEventListener(o,n=>{const a=n.target,{value:c}=a,{type:h}=this.#t.properties[e];this[e]=h===Number?w(c):c});let i=this.#f.get(e);i||(i=[],this.#f.set(e,i)),i.push(s?{element:t,attrName:s}:t)}#M(){const t=this.#t;let e=t.template;if(!e){e=t.template=document.createElement("template");let s="<style> :host([hidden]) { display: none; } ";t.css&&(s+=t.css),s+="</style>",s+=t.html,e.innerHTML=s}this.shadowRoot?.replaceChildren(e.content.cloneNode(!0))}changed(t,e,s){this[e]=s}connectedCallback(){this.#I(),this.#R(),this.#M(),this.hasAttribute("disabled")&&this.#y(),requestAnimationFrame(()=>{this.shadowRoot&&(this.#S(this.shadowRoot),this.#E(this.shadowRoot),l.#O()),this.#P()})}#P(){const t=this.#t,{properties:e}=t;for(const[s,{computed:o}]of Object.entries(e))o&&(this[s]=this.#i(o))}static dataForId(t){const e=crypto.randomUUID();return l.#d.set(e,t),e}#R(){const t=this.#t,{observedAttributes:e,properties:s}=t;for(const[o,i]of Object.entries(s))this.#v(o,i,e)}#v(t,e,s){const o=l.getAttrName(t),i=this.hasAttribute(o);e.required&&!i&&this.#e(this,t,"is a required attribute");let n=e.value;this.hasOwnProperty(t)&&(n=this[t],delete this[t]),console.log("wrec.ts #defineProp: propName =",t),console.log("wrec.ts #defineProp: value =",n);const{type:a}=e,c=a===Boolean?n||i:s.includes(o)&&i?this.#T(t,o):n||D(a),h="#"+t;this[h]=c,e.computed&&this.#N(t,e),Object.defineProperty(this,t,{enumerable:!0,get(){return this[h]},set(f){a===Number&&typeof f=="string"&&(f=w(f));const u=this[h];if(f===u)return;this.#V(t,a,f),this[h]=f;const{state:S,stateProp:L}=this.#t.properties[t];L&&O(S,L,f),this.#j(t),this.#H(t,a,f,o),this.#L(t),this.#F(t,f);const N=this.#c[t];N&&this.setFormValue(N,String(f)),this.propertyChangedCallback(t,u,f),e.dispatch&&this.dispatch("change",{[t]:f})}})}#y(){const t=this.hasAttribute("disabled"),e=y(this.shadowRoot);for(const s of e)B(s)&&(s.disabled=t)}disconnectedCallback(){this.#s.clear(),this.#h.clear()}dispatch(t,e){this.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,detail:e}))}displayIfSet(t,e="block"){return`display: ${t?e:"none"}`}static elementName(){return this.name.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}#$(t){const e=t instanceof l;for(const s of t.getAttributeNames()){const o=t.getAttribute(s),i=this.#A(t,o);if(i){const n=this[i];n===void 0&&this.#r(t,s,i),t[i]=n;let[a,c]=s.split(":");a==="value"&&(c?(t["on"+c]===void 0&&this.#e(t,s,"refers to an unsupported event name"),t.setAttribute(a,this[i])):c="change",this.#g(t,i,a,c)),e&&t.#h.set(l.getPropName(a),i)}this.#l(o,t,s)}}#i(t){const e=new Function("return "+t).call(this);return Array.isArray(e)?e.join(""):e}#x(t){const{localName:e}=t;if(e==="style"){const{sheet:s}=t,o=s?.cssRules??[],i=Array.from(o);for(const n of i)if(n.constructor===CSSStyleRule){const a=Array.from(n.style);for(const c of a)if(c.startsWith("--")){const h=n.style.getPropertyValue(c);this.#l(h,n,c)}}}else{let s="";if(e==="textarea"){const o=t.textContent?.match(j);o&&(s=o[1])}else{const o=Array.from(t.childNodes).find(i=>i.nodeType===Node.COMMENT_NODE);o&&(s=o.textContent?.trim()??"")}if(s){const o=this.#A(t,s);e==="textarea"&&o?(this.#g(t,o,null,"change"),t.textContent=this[o]):this.#l(s,t)}}}formAssociatedCallback(){let t=this.getAttribute("form-assoc");if(!t){const n=this.getAttribute("name");if(n)if(this.#n("value"))t=`value:${n}`;else throw new m("can't submit by name because component has no value property");else return}const e={},s=t.split(",");for(const n of s){const[a,c]=n.split(":");e[a.trim()]=c.trim()}this.#c=e,this.#o=new FormData,this.#a=this.attachInternals(),this.#a.setFormValue(this.#o);const o=Object.keys(this.#t.properties),i=this.#b;for(const n of o)i[n]=this[n]}formResetCallback(){const t=this.#b;for(const e of Object.keys(t))this[e]=t[e]}static getAttrName(t){let e=l.#m.get(t);return e||(e=t.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase(),l.#m.set(t,e)),e}static getPropName(t){let e=l.#p.get(t);return e||(e=t.replace(/-([a-z])/g,(s,o)=>o.toUpperCase()),l.#p.set(t,e)),e}#n(t){return!!this.#t.properties[t]}#E(t){const e=Array.from(t.querySelectorAll("*"));for(const s of e)this.#$(s),s.firstElementChild||this.#x(s)}static get observedAttributes(){const t=Object.keys(this.properties||{}).map(l.getAttrName);return t.includes("disabled")||t.push("disabled"),t}propertyChangedCallback(t,e,s){}#A(t,e){if(!e||!I.test(e))return;const s=A(e);return this[s]===void 0&&this.#r(t,"",s),s}#L(t){const o=this.#t.propToExprsMap.get(t)||[];for(const i of o){const n=this.#i(i),a=this.#s.get(i)??[];for(const c of a)c instanceof HTMLElement?this.#C(c,n):c instanceof CSSStyleRule||C(c.element,c.attrName,n)}requestAnimationFrame(()=>{this.#k(t)})}static register(){const t=this.elementName();customElements.get(t)||customElements.define(t,this)}#N(t,e){const{computed:s,uses:o}=e,i=this.#t.propToComputedMap;function n(c,h){let f=i.get(c);f||(f=[],i.set(c,f)),f.push([t,h])}const a=s.match(g)||[];for(const c of a){const h=c.substring(R);this[h]===void 0&&this.#r(null,t,h),typeof this[h]!="function"&&n(h,s)}if(o)for(const c of o.split(","))n(c,s)}#l(t,e,s=void 0){if(!t)return;const o=this.#u(e,s,t);if(!o){const c=t.replaceAll("this..","this.");s?C(e,s,c):"textContent"in e&&(e.textContent=c);return}const i=this.#t;o.forEach(c=>{const h=A(c);if(typeof this[h]=="function")return;const f=i.propToExprsMap;let u=f.get(h);u||(u=[],f.set(h,u)),u.includes(t)||u.push(t)});for(const[c,h]of this.#s.entries())for(const f of h){const u=f instanceof HTMLElement||f instanceof CSSStyleRule?f:f.element;u instanceof CSSStyleRule||u.isConnected||this.#s.set(c,h.filter(S=>S!==f))}let n=this.#s.get(t);n||(n=[],this.#s.set(t,n)),n.push(s?{element:e,attrName:s}:e);const a=this.#i(t);s?C(e,s,a):this.#C(e,a)}setAttributeSafe(t,e){this.hasAttribute(t)||this.setAttribute(t,e)}setFormValue(t,e){!this.#o||!T(e)||(this.#o.set(t,e),this.#a?.setFormValue(this.#o))}static#O(){for(const[t,e]of l.#d.entries()){const s=E(document.body,t);if(s)for(const[o,i]of Object.entries(e))s[o]=i}}#e(t,e,s){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}`)}#r(t,e,s){this.#e(t,e,`refers to missing property "${s}"`)}#T(t,e){return this.#w(t,this.getAttribute(e))}#w(t,e){if(e?.match(g))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 w(e);if(o===Boolean)return e==="true"?!0:e==="false"||e==="null"?!1:(e&&e!==t&&this.#e(null,t,"is a Boolean attribute, so its value must match attribute name or be missing"),e===t)}#H(t,e,s,o){if(T(s)&&this.hasAttribute(o)){const i=e===Boolean?this.hasAttribute(o):this.#T(t,o);s!==i&&x(this,t,s)}}#k(t){const e=this[t],s=this.#f.get(t)||[];for(const o of s)if(o instanceof HTMLElement)o.localName==="textarea"?o.value=e:o.textContent=e;else if(!(o instanceof CSSStyleRule)){const{element:i,attrName:n}=o;if(i instanceof HTMLElement){const a=l.getPropName(n);i[a]=e}else i instanceof CSSStyleRule&&i.style.setProperty(n,e)}}#j(t){const s=this.#t.propToComputedMap.get(t)||[];for(const[o,i]of s)this[o]=this.#i(i)}#C(t,e){if(e===void 0)return;const s=t instanceof HTMLElement,o=s?t.localName:"",i=typeof e;i!=="string"&&i!=="number"&&this.#e(t,void 0," computed content is not a string or number"),o==="textarea"?t.value=e:s&&i==="string"&&e.trim().startsWith("<")?(t.innerHTML=e,this.#S(t),this.#E(t)):s&&(t.textContent=e)}#F(t,e){const s=this.#h.get(t);if(!s)return;const o=this.getRootNode();if(!(o instanceof ShadowRoot))return;const{host:i}=o;if(!i)return;const n=i;n[s]=e}useState(t,e){if(!e){e={};for(const s of Object.keys(t))e[s]=s}this.#B(t,e);for(const[s,o]of Object.entries(e))if(this.#n(o)){const i=d(t,s);i!==void 0&&(this[o]=i);const n=this.#t.properties[o];n.state=t,n.stateProp=s}t.addListener(this,e)}#I(){const t=this.#t,e=this.#t.name,s=new Set(Object.keys(t.properties));for(const o of this.getAttributeNames())if(o!=="class"&&o!=="id"&&o!=="disabled"&&!o.startsWith("on")){if(o==="form-assoc"){if(!this.#t.formAssociated)throw new m(`add "static formAssociated = true;" to class ${e}`);continue}if(!s.has(l.getPropName(o))){if(o==="name"){if(t.formAssociated)continue;throw new m(`name attribute requires "static formAssociated = true;" in class ${e}`)}this.#e(null,o,"is not a supported attribute")}}}#u(t,e,s){const o=s.match(g);if(o)return o.forEach(i=>{const n=A(i);this[n]===void 0&&this.#r(t,e,n)}),o}#B(t,e){for(const[s,o]of Object.entries(e)){let i=d(t,s);if(i===void 0)throw new m(`invalid state path "${s}"`);i=this[o],this.#n(o)||this.#e(null,o,"refers to missing property in useState map")}}#V(t,e,s){if(s instanceof e)return;let o=typeof s;if(o==="object"){const{constructor:i}=s;o=i.name,i!==e&&this.#e(null,t,`was set to a ${o}, but must be a ${e.name}`)}o!==e.name.toLowerCase()&&this.#e(null,t,`was set to a ${o}, but must be a ${e.name}`)}#S(t){const e=Array.from(t.querySelectorAll("*"));for(const s of e){const o=[];for(const i of Array.from(s.attributes)){const n=i.name;if(n.startsWith("on")){let a=n.slice(2);a=a[0].toLowerCase()+a.slice(1).toLowerCase();const c=i.value;this.#u(s,n,c);let h;typeof this[c]=="function"?h=f=>this[c](f):(this.#u(s,n,c),h=()=>this.#i(c)),s.addEventListener(a,h),o.push(n)}}for(const i of o)s.removeAttribute(i)}}}function _(r,...t){let e=v(r,t);for(;;){const s=H.exec(e);if(!s)break;const o=s[2];if(P.test(o)){const i=s[1];if(!i.startsWith("--")){const n=`--${i}: ${o};
-        ${i}: var(--${i});`;e=$(e,s.index,s[0].length,n)}}}return e}function z(r,...t){let e=v(r,t);for(;;){const s=F.exec(e);if(!s)break;const o=q(s[2]);if(P.test(o)){const i=`<!-- ${o.trim()} -->`,n=s.index+s[0].indexOf(">")+1;e=$(e,n,o.length,i)}}return e}p.Wrec=l,p.createElement=V,p.css=_,p.html=z,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})}));
+(function(p,d){typeof exports=="object"&&typeof module<"u"?d(exports):typeof define=="function"&&define.amd?define(["exports"],d):(p=typeof globalThis<"u"?globalThis:p||self,d(p.wrec={}))})(this,(function(p){"use strict";function d(r,t){let e=r;for(const s of t.split("."))e=e[s];return e}function k(r,t,e){const s=t.split("."),o=s.length-1;let i=r;s.forEach((n,h)=>{h===o?i[n]=e:i=i[n]})}class b extends Error{}const j=/([a-zA-Z-]+)\s*:\s*([^;}]+)/g,P="a-zA-Z_$",F=P+"0-9",g=`[${P}][${F}]*`,_=/<!--\s*(.*?)\s*-->/,V=/<(\w+)(?:\s[^>]*)?>((?:[^<]|<(?!\w))*?)<\/\1>/g,T=new RegExp(`^this\\.${g}$`),C=new RegExp(`this\\.${g}(\\.${g})*`,"g"),N=new RegExp(`this\\.${g}(\\.${g})*`),I=new Set(["class","style"]),$=5;function D(r){return r instanceof HTMLButtonElement||r instanceof HTMLFieldSetElement||r instanceof HTMLInputElement||r instanceof HTMLSelectElement||r instanceof HTMLTextAreaElement||r instanceof u}function B(r,t,e){const s=document.createElement(r);if(t)for(const[o,i]of Object.entries(t))s.setAttribute(o,i);return e&&(s.innerHTML=e),s}const q=r=>r===String?"":r===Number?0:r===Boolean?!1:r===Array?[]:r===Object?{}:void 0;function w(r){const t=[];let e=r.firstElementChild;for(;e;)t.push(e),e.shadowRoot&&t.push(...w(e.shadowRoot)),e.firstElementChild&&t.push(...w(e)),e=e.nextElementSibling;return t}const A=r=>r.substring($).split(".")[0];function x(r,t){let e=r[0];return t.forEach((s,o)=>{e+=s+r[o+1]}),e}function S(r){const t=typeof r;return t==="string"||t==="number"||t==="boolean"}function E(r){return r.localName==="textarea"}function v(r){const{localName:t}=r;return t==="input"||t==="select"}const z=r=>r.replace(/<!--[\s\S]*?-->/g,"");function L(r,t,e,s){return r.slice(0,t)+s+r.slice(t+e)}function M(r){const t=Number(r);if(isNaN(t))throw new b(`can't convert "${r}" to a number`);return t}function O(r,t,e){const[s,o]=t.split(":");if(S(e))if(typeof e=="boolean"){e?r.setAttribute(s,s):r.removeAttribute(s);const i=u.getPropName(s);r[i]=e}else{const i=r.getAttribute(t),n=String(e);i!==n&&(r.setAttribute(s,n),s==="value"&&v(r)&&(r.value=n))}else{const i=u.getPropName(t);r[i]=e}}function R(r,t,e){const[s,o]=t.split(":");r instanceof CSSRule?r.style.setProperty(s,e):(O(r,s,e),s==="value"&&v(r)&&(r.value=e))}class u extends HTMLElement{static#p=new Map;static#d=new Map;static css="";static formAssociated=!1;static html="";static properties={};static propToComputedMap=null;static propToExprsMap=null;static template=null;#t=this.constructor;#s=new Map;#a={};#i;#f={};#h=null;#u=new Map;constructor(){super(),this.attachShadow({mode:"open"});const t=this.#t;t.properties||(t.properties={}),t.propToComputedMap||(t.propToComputedMap=new Map),t.propToExprsMap||(t.propToExprsMap=new Map)}attributeChangedCallback(t,e,s){t==="disabled"&&this.#m();const o=u.getPropName(t);if(this.#n(o)){const i=this.#y(o,String(s));this[o]=i;const n=this.#a[o];n&&this.setFormValue(n,String(i)),this.propertyChangedCallback(o,e,s)}}#w(){const t=this.#t;let e=t.template;if(!e){e=t.template=document.createElement("template");let s="<style> :host([hidden]) { display: none; } ";t.css&&(s+=t.css),s+="</style>",s+=t.html,e.innerHTML=s}this.shadowRoot?.replaceChildren(e.content.cloneNode(!0))}changed(t,e,s){this[e]=s}connectedCallback(){this.#H(),this.#v(),this.#w(),this.hasAttribute("disabled")&&this.#m(),requestAnimationFrame(()=>{this.shadowRoot&&(this.#C(this.shadowRoot),this.#b(this.shadowRoot)),this.#S()})}#S(){const t=this.#t,{properties:e}=t;for(const[s,{computed:o}]of Object.entries(e))o&&(this[s]=this.#o(o))}#v(){const t=this.#t,{observedAttributes:e,properties:s}=t;for(const[o,i]of Object.entries(s))this.#M(o,i,e)}#M(t,e,s){const o=u.getAttrName(t),i=this.hasAttribute(o);e.required&&!i&&this.#e(this,t,"is a required attribute");let n=e.value;this.hasOwnProperty(t)&&(n=this[t],delete this[t]);const{type:h}=e,c=h===Boolean?n||i:s.includes(o)&&i?this.#A(t,o):n||q(h),f="#"+t;this[f]=c,e.computed&&this.#$(t,e),Object.defineProperty(this,t,{enumerable:!0,get(){return this[f]},set(a){h===Number&&typeof a=="string"&&(a=M(a));const l=this[f];if(a===l)return;this.#j(t,h,a),this[f]=a;const{state:m,stateProp:y}=this.#t.properties[t];y&&k(m,y,a),this.#L(t),this.#x(t,h,a,o),this.#E(t),this.#O(t,a);const H=this.#a[t];H&&this.setFormValue(H,String(a)),this.propertyChangedCallback(t,l,a),e.dispatch&&this.dispatch("change",{[t]:a})}})}#m(){const t=this.hasAttribute("disabled"),e=w(this.shadowRoot);for(const s of e)D(s)&&(s.disabled=t)}disconnectedCallback(){this.#s.clear(),this.#f.clear(),this.#u.clear()}dispatch(t,e){this.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,detail:e}))}displayIfSet(t,e="block"){return`display: ${t?e:"none"}`}static elementName(){return this.name.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}#R(t){const e=t instanceof u;for(const s of t.getAttributeNames()){const o=t.getAttribute(s),i=this.#g(t,o);if(i){const n=this[i];n===void 0&&this.#c(t,s,i),t[i]=n;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.#u.set(u.getPropName(h),i)}this.#r(o,t,s)}}#o(t){const e=new Function("return "+t).call(this);return Array.isArray(e)?e.join(""):e}#P(t){const{localName:e}=t;if(e==="style"){const{sheet:s}=t,o=s?.cssRules??[],i=Array.from(o);for(const n of i)if(n.constructor===CSSStyleRule){const h=Array.from(n.style);for(const c of h)if(c.startsWith("--")){const f=n.style.getPropertyValue(c);this.#r(f,n,c)}}}else{let s="";if(E(t)){this.#r(t.textContent,t);const o=t.textContent?.match(_);o&&(s=o[1])}else{const o=Array.from(t.childNodes).find(i=>i.nodeType===Node.COMMENT_NODE);o&&(s=o.textContent?.trim()??"")}if(s){const o=this.#g(t,s);o&&E(t)?t.textContent=this[o]:this.#r(s,t)}}}formAssociatedCallback(){let t=this.getAttribute("form-assoc");if(!t){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 n of s){const[h,c]=n.split(":");e[h.trim()]=c.trim()}this.#a=e,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 n of o)i[n]=this[n]}formResetCallback(){const t=this.#f;for(const e of Object.keys(t)){let s=t[e];T.test(s)&&(s=this.#o(s)),this[e]=s}}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}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}#N(t,e,s){if(s.length!==1)return;const[o]=s;if(!T.test(o))return;const i=v(t)||E(t);let[n,h]=(e??"").split(":");if(!(i&&n==="value"||E(t)))return;h?t["on"+h]===void 0&&this.#e(t,e,"refers to an unsupported event name"):h="change";const f=A(o);t.addEventListener(h,a=>{const{target:l}=a;if(!l)return;const m=l.value,{type:y}=this.#t.properties[f];this[f]=y===Number?M(m):m,this.#E(f)})}#n(t){return!!this.#t.properties[t]}#b(t){const e=Array.from(t.querySelectorAll("*"));for(const s of e)this.#R(s),s.firstElementChild||this.#P(s)}static get observedAttributes(){const t=Object.keys(this.properties||{}).map(u.getAttrName);return t.includes("disabled")||t.push("disabled"),t}propertyChangedCallback(t,e,s){}#g(t,e){if(!e||!T.test(e))return;const s=A(e);return this[s]===void 0&&this.#c(t,"",s),s}#E(t){const o=this.#t.propToExprsMap.get(t)||[];for(const i of o){let n=this.#o(i);const h=this.#s.get(i)??[];for(const c of h)if(c instanceof HTMLElement)this.#T(c,n);else if(!(c instanceof CSSStyleRule)){const{element:f,attrName:a}=c;f instanceof CSSStyleRule?f.style.setProperty(a,n):R(f,a,n)}}}static register(){const t=this.elementName();customElements.get(t)||customElements.define(t,this)}#$(t,e){const{computed:s,uses:o}=e,i=this.#t.propToComputedMap;function n(c,f){let a=i.get(c);a||(a=[],i.set(c,a)),a.push([t,f])}const h=s.match(C)||[];for(const c of h){const f=c.substring($);this[f]===void 0&&this.#c(null,t,f),typeof this[f]!="function"&&n(f,s)}if(o)for(const c of o.split(","))n(c,s)}#r(t,e,s=void 0){if(!t)return;const o=this.#l(e,s,t);if(!o){const c=t.replaceAll("this..","this.");s?R(e,s,c):"textContent"in e&&(e.textContent=c);return}const i=this.#t;o.forEach(c=>{const f=A(c);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)});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(m=>m!==a))}let n=this.#s.get(t);n||(n=[],this.#s.set(t,n)),n.push(s?{element:e,attrName:s}:e),e instanceof HTMLElement&&this.#N(e,s,o);const h=this.#o(t);s?R(e,s,h):this.#T(e,h)}setAttributeSafe(t,e){this.hasAttribute(t)||this.setAttribute(t,e)}setFormValue(t,e){!this.#i||!S(e)||(this.#i.set(t,e),this.#h?.setFormValue(this.#i))}#e(t,e,s){const o=this.#t,i=t instanceof HTMLElement?t.localName:"CSS rule";throw new b(`component ${o.elementName()}`+(t?`, element "${i}"`:"")+(e?`, attribute "${e}"`:"")+` ${s}`)}#c(t,e,s){this.#e(t,e,`refers to missing property "${s}"`)}#A(t,e){return this.#y(t,this.getAttribute(e))}#y(t,e){if(e?.match(C))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 M(e);if(o===Boolean)return e==="true"?!0:e==="false"||e==="null"?!1:(e&&e!==t&&this.#e(null,t,"is a Boolean attribute, so its value must match attribute name or be missing"),e===t)}#x(t,e,s,o){if(S(s)&&this.hasAttribute(o)){const i=e===Boolean?this.hasAttribute(o):this.#A(t,o);s!==i&&O(this,t,s)}}#L(t){const s=this.#t.propToComputedMap.get(t)||[];for(const[o,i]of s)this[o]=this.#o(i)}#T(t,e){if(e===void 0)return;const s=t instanceof HTMLElement,o=typeof e;o!=="string"&&o!=="number"&&this.#e(t,void 0," computed content is not a string or number"),t instanceof HTMLElement&&E(t)?t.value=e:s&&o==="string"&&e.trim().startsWith("<")?(t.innerHTML=e,this.#C(t),this.#b(t)):s&&(t.textContent=e)}#O(t,e){const s=this.#u.get(t);if(!s)return;const o=this.getRootNode();if(!(o instanceof ShadowRoot))return;const{host:i}=o;if(!i)return;const n=i;n[s]=e}useState(t,e){if(!e){e={};for(const s of Object.keys(t))e[s]=s}this.#k(t,e);for(const[s,o]of Object.entries(e))if(this.#n(o)){const i=d(t,s);i!==void 0&&(this[o]=i);const n=this.#t.properties[o];n.state=t,n.stateProp=s}t.addListener(this,e)}#H(){const t=this.#t,e=new Set(Object.keys(t.properties));for(const o of e)I.has(o)&&this.#e(null,"",`property "${o}" is not allowed because it is a reserved attribute`);const s=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 b(`add "static formAssociated = true;" to class ${s}`);continue}if(!e.has(u.getPropName(o))){if(o==="name"){if(t.formAssociated)continue;throw new b(`name attribute requires "static formAssociated = true;" in class ${s}`)}this.#e(null,o,"is not a supported attribute")}}}#l(t,e,s){const o=s.match(C);if(o)return o.forEach(i=>{const n=A(i);this[n]===void 0&&this.#c(t,e,n)}),o}#k(t,e){for(const[s,o]of Object.entries(e)){let i=d(t,s);if(i===void 0)throw new b(`invalid state path "${s}"`);i=this[o],this.#n(o)||this.#e(null,o,"refers to missing property in useState map")}}#j(t,e,s){if(s instanceof e)return;let o=typeof s;if(o==="object"){const{constructor:i}=s;o=i.name,i!==e&&this.#e(null,t,`was set to a ${o}, but must be a ${e.name}`)}o!==e.name.toLowerCase()&&this.#e(null,t,`was set to a ${o}, but must be a ${e.name}`)}#C(t){const e=Array.from(t.querySelectorAll("*"));for(const s of e){const o=[];for(const i of Array.from(s.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.#l(s,n,c);let f;typeof this[c]=="function"?f=a=>this[c](a):(this.#l(s,n,c),f=()=>this.#o(c)),s.addEventListener(h,f),o.push(n)}}for(const i of o)s.removeAttribute(i)}}}function Z(r,...t){let e=x(r,t);for(;;){const s=j.exec(e);if(!s)break;const o=s[2];if(N.test(o)){const i=s[1];if(!i.startsWith("--")){const n=`--${i}: ${o};
+        ${i}: var(--${i});`;e=L(e,s.index,s[0].length,n)}}}return e}function K(r,...t){let e=x(r,t);for(;;){const s=V.exec(e);if(!s||s[1]==="style")break;const o=z(s[2]);if(N.test(o)){const i=`<!-- ${o.trim()} -->`,n=s.index+s[0].indexOf(">")+1;e=L(e,n,o.length,i)}}return e}p.Wrec=u,p.createElement=B,p.css=Z,p.html=K,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -2,7 +2,7 @@
   "name": "wrec",
   "description": "a small library that greatly simplifies building web components",
   "author": "R. Mark Volkmann",
-  "version": "0.16.9",
+  "version": "0.17.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -25,7 +25,7 @@
     "clean": "rm -rf dist",
     "preview": "vite preview",
     "lint": "oxlint",
-    "minify": "tsc && terser dist/wrec.js dist/state.js -c -m -o dist/wrec.min.js",
+    "minify": "tsc && terser dist/wrec.js dist/wrec-state.js -c -m -o dist/wrec.min.js",
     "reinstall": "rm -rf node_modules package-lock.json && npm install",
     "test": "playwright test",
     "testui": "playwright test --ui",