wrec 0.17.2 → 0.17.3

package/dist/examples/table-wired.js

@@ -0,0 +1,104 @@
+import { css, html, Wrec } from '../wrec';
+class TableWired extends Wrec {
+    static properties = {
+        headings: { type: (Array) },
+        propNames: { type: (Array) },
+        data: { type: (Array) }
+    };
+    static css = css `
+    .sort-indicator {
+      color: white;
+      display: inline-block;
+      line-height: 1rem;
+      margin-left: 0.5rem;
+      width: 1rem;
+    }
+    table {
+      border-collapse: collapse;
+    }
+    td,
+    th {
+      border: 2px solid gray;
+      padding: 0.5rem;
+    }
+    th {
+      background-color: cornflowerblue;
+      color: white;
+      cursor: pointer;
+      > span {
+        pointer-events: none;
+      }
+    }
+  `;
+    // bind is needed here because makeTh uses "this".
+    static html = html `
+    <table>
+      <thead>
+        <tr>
+          this.headings.map(this.makeTh.bind(this))
+        </tr>
+      </thead>
+      <tbody>
+        this.data.map((_obj, index) => this.makeTr(index))
+      </tbody>
+    </table>
+  `;
+    sortAscending = true;
+    sortHeader = null;
+    makeTd(dataIndex, prop) {
+        const value = this.data[dataIndex][prop];
+        return html `<td>${value}</td>`;
+    }
+    makeTh(heading, index) {
+        return html `
+      <th
+        aria-label="sort by ${heading}"
+        data-property="${this.propNames[index]}"
+        onclick="sort"
+        role="button"
+        tabindex="0"
+      >
+        <span>${heading}</span>
+        <span class="sort-indicator"></span>
+      </th>
+    `;
+    }
+    makeTr(dataIndex) {
+        return html `
+      <tr>
+        this.propNames.map(propName => this.makeTd(${dataIndex}, propName))
+      </tr>
+    `;
+    }
+    sort(event) {
+        let th = event.target;
+        const property = th.getAttribute('data-property');
+        this.sortAscending = th === this.sortHeader ? !this.sortAscending : true;
+        this.data.sort((a, b) => {
+            const aValue = a[property];
+            const bValue = b[property];
+            let compare = typeof aValue === 'string'
+                ? aValue.localeCompare(bValue)
+                : typeof aValue === 'number'
+                    ? aValue - bValue
+                    : 0;
+            return this.sortAscending ? compare : -compare;
+        });
+        // Trigger the property set method by assigning a clone.
+        this.data = [...this.data];
+        // Clear sort indicator from previously selected header.
+        if (this.sortHeader) {
+            const sortIndicator = this.sortHeader.querySelector('.sort-indicator');
+            if (sortIndicator)
+                sortIndicator.textContent = '';
+        }
+        // Add sort indicator to currently selected header.
+        const sortIndicator = th.querySelector('.sort-indicator');
+        if (sortIndicator) {
+            sortIndicator.textContent = this.sortAscending ? '\u25B2' : '\u25BC';
+        }
+        this.sortHeader = th;
+    }
+}
+TableWired.register();
+//# sourceMappingURL=table-wired.js.map

package/dist/examples/table-wired.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-wired.js","sourceRoot":"","sources":["../../src/examples/table-wired.ts"],"names":[],"mappings":"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"}

package/dist/paths.js

@@ -0,0 +1,21 @@
+export function getPathValue(obj, path) {
+    let value = obj;
+    for (const key of path.split('.')) {
+        value = value[key];
+    }
+    return value;
+}
+export function setPathValue(obj, path, value) {
+    const keys = path.split('.');
+    const lastIndex = keys.length - 1;
+    let target = obj;
+    keys.forEach((key, index) => {
+        if (index === lastIndex) {
+            target[key] = value;
+        }
+        else {
+            target = target[key];
+        }
+    });
+}
+//# sourceMappingURL=paths.js.map

package/dist/paths.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"paths.js","sourceRoot":"","sources":["../src/paths.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,YAAY,CAAC,GAAgB,EAAE,IAAY;IACzD,IAAI,KAAK,GAAsB,GAAG,CAAC;IACnC,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC;QAClC,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IACrB,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,GAAgB,EAAE,IAAY,EAAE,KAAc;IACzE,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC7B,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;IAClC,IAAI,MAAM,GAAQ,GAAG,CAAC;IACtB,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;QAC1B,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACxB,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;QACtB,CAAC;aAAM,CAAC;YACN,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;QACvB,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC"}

package/dist/proxies.js

@@ -0,0 +1,53 @@
+/**
+ * Creates a recursive Proxy to monitor deep property changes,
+ * passing the dot-separated path to the callback.
+ * @param {Object} target object to proxy
+ * @param {ProxyCallback} callback function to call when any property changes
+ * @param {string} [path=''] current path prefix, used internally for recursion
+ * @returns {Proxy} deep proxy
+ */
+export function createDeepProxy(target, callback, path = '') {
+    // Use a WeakMap to cache proxies and
+    // avoid infinite recursion or memory leaks.
+    const proxyCache = new WeakMap();
+    const deepHandler = {
+        // Intercept property reads.
+        // This creates nested proxies lazily.
+        get(target, key) {
+            const value = Reflect.get(target, key);
+            // If the value is a primitive, return it.
+            if (value === null || typeof value !== 'object')
+                return value;
+            // If a proxy for this object has already been created, return it.
+            const proxy = proxyCache.get(value);
+            if (proxy)
+                return proxy;
+            // Wrap the nested object in a new proxy and return it.
+            const newPath = path ? `${path}.${key}` : key;
+            const nestedProxy = createDeepProxy(value, callback, newPath);
+            proxyCache.set(value, nestedProxy);
+            return nestedProxy;
+        },
+        // Intercept property writes.
+        set(target, key, newValue) {
+            const oldValue = Reflect.get(target, key);
+            if (oldValue !== newValue) {
+                Reflect.set(target, key, newValue);
+                const newPath = path ? `${path}.${key}` : key;
+                callback(newPath, oldValue, newValue);
+            }
+            return true;
+        }
+    };
+    return new Proxy(target, deepHandler);
+}
+// This converts a deep proxy to a plain object.
+export function proxyToPlainObject(obj) {
+    const clone = {};
+    for (const [key, value] of Object.entries(obj)) {
+        const isObject = typeof value === 'object' && value !== null;
+        clone[key] = isObject ? proxyToPlainObject(value) : value;
+    }
+    return clone;
+}
+//# sourceMappingURL=proxies.js.map

package/dist/proxies.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"proxies.js","sourceRoot":"","sources":["../src/proxies.ts"],"names":[],"mappings":"AAQA;;;;;;;GAOG;AACH,MAAM,UAAU,eAAe,CAC7B,MAAmB,EACnB,QAAuB,EACvB,IAAI,GAAG,EAAE;IAET,qCAAqC;IACrC,4CAA4C;IAC5C,MAAM,UAAU,GAAG,IAAI,OAAO,EAAE,CAAC;IAEjC,MAAM,WAAW,GAAG;QAClB,4BAA4B;QAC5B,sCAAsC;QACtC,GAAG,CAAC,MAA2B,EAAE,GAAW;YAC1C,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;YAEvC,0CAA0C;YAC1C,IAAI,KAAK,KAAK,IAAI,IAAI,OAAO,KAAK,KAAK,QAAQ;gBAAE,OAAO,KAAK,CAAC;YAE9D,kEAAkE;YAClE,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;YACpC,IAAI,KAAK;gBAAE,OAAO,KAAK,CAAC;YAExB,uDAAuD;YACvD,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;YAC9C,MAAM,WAAW,GAAG,eAAe,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;YAC9D,UAAU,CAAC,GAAG,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;YACnC,OAAO,WAAW,CAAC;QACrB,CAAC;QAED,6BAA6B;QAC7B,GAAG,CAAC,MAA2B,EAAE,GAAW,EAAE,QAAa;YACzD,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;YAC1C,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;gBAC1B,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC;gBACnC,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;gBAC9C,QAAQ,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;YACxC,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC;KACF,CAAC;IAEF,OAAO,IAAI,KAAK,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;AACxC,CAAC;AAED,gDAAgD;AAChD,MAAM,UAAU,kBAAkB,CAAC,GAAgB;IACjD,MAAM,KAAK,GAAgB,EAAE,CAAC;IAC9B,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;QAC/C,MAAM,QAAQ,GAAG,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,CAAC;QAC7D,KAAK,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,KAAoB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAC3E,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC"}

package/dist/wrec-state.js

@@ -0,0 +1,160 @@
+import { createDeepProxy, proxyToPlainObject } from './proxies.js';
+const inBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';
+class WrecError extends Error {
+}
+// JavaScript does not allow creating a subclass of the Proxy class.
+export class WrecState {
+    static #stateMap = new Map();
+    static {
+        if (inBrowser) {
+            window.addEventListener('beforeunload', () => {
+                // This persists the data in all WrecState objects
+                // created with the "persist" option set to true
+                // to sessionStorage as JSON strings so they can be
+                // restored after the user refreshes the page.
+                for (const [name, state] of this.#stateMap.entries()) {
+                    if (state.#persist) {
+                        const obj = proxyToPlainObject(state);
+                        sessionStorage.setItem('wrec-state-' + name, JSON.stringify(obj));
+                    }
+                }
+            });
+        }
+    }
+    // This static method is useful for accessing a specific WrecState object
+    // from the DevTools console.  For example:
+    // state = WrecState.get('vault');
+    //
+    // WrecState object properties are accessed via nested Proxy objects
+    // so all changes can be monitored.
+    //
+    // Properties can be directly modified as follows:
+    // state.color = 'blue';
+    // state.team.leader.name = 'Mark';
+    static get(name) {
+        return this.#stateMap.get(name);
+    }
+    #id = Symbol('objectId');
+    // This cannot be replaced by a WeakMap<ChangeListener, Set<string>>
+    // because there is no way to iterate over the keys of a WeakMap.
+    #listenerHolders = [];
+    #name;
+    #persist;
+    #proxy;
+    constructor(name, persist, initial) {
+        if (!name)
+            throw new WrecError('name cannot be empty');
+        if (WrecState.#stateMap.has(name)) {
+            throw new WrecError(`WrecState with name "${name}" already exists`);
+        }
+        this.#name = name;
+        this.#persist = persist;
+        this.#proxy = createDeepProxy({}, this.#notifyListeners.bind(this));
+        // If there is existing state data in sessionStorage,
+        // use that instead of the supplied initial data.
+        if (persist && inBrowser) {
+            const json = sessionStorage.getItem('wrec-state-' + name);
+            const existingState = json ? JSON.parse(json) : undefined;
+            if (existingState)
+                initial = existingState;
+        }
+        if (initial) {
+            for (const [key, value] of Object.entries(initial)) {
+                this.addProperty(key, value);
+            }
+        }
+        WrecState.#stateMap.set(name, this);
+    }
+    /**
+     * @param listener - object that has a "changed" method
+     * @param map - map from state property paths to component properties
+     */
+    addListener(listener, map = {}) {
+        // Check if the listener was already added.
+        const listenerHolder = this.#listenerHolders.find(listenerHolder => listenerHolder.listenerRef.deref() === listener);
+        if (listenerHolder) {
+            // Add properties to existing propertyMap.
+            const { propertyMap } = listenerHolder;
+            for (const [key, value] of Object.entries(map)) {
+                propertyMap[key] = value;
+            }
+        }
+        else {
+            // Add a new listener.
+            this.#listenerHolders.push({
+                listenerRef: new WeakRef(listener),
+                propertyMap: map
+            });
+        }
+    }
+    addProperty(propName, initialValue) {
+        Object.defineProperty(this, propName, {
+            enumerable: true,
+            get() {
+                return this.#proxy[propName];
+            },
+            set(newValue) {
+                this.#proxy[propName] = newValue;
+            }
+        });
+        this.#proxy[propName] = initialValue;
+    }
+    get id() {
+        return this.#id;
+    }
+    // This is useful for debugging from the DevTools console.
+    // For example: state.log()
+    log() {
+        console.log('WrecState:', this.#name);
+        for (const [key, value] of Object.entries(this.#proxy)) {
+            console.log(`  ${key} = ${JSON.stringify(value)}`);
+        }
+    }
+    #notifyListeners(statePath, oldValue, newValue) {
+        /* For debugging ...
+        console.log(
+          `state.ts: path ${statePath} changed from`,
+          `${JSON.stringify(oldValue)} to ${JSON.stringify(newValue)}`
+        );
+        */
+        const staleHolders = new Set();
+        for (const holder of this.#listenerHolders) {
+            const listener = holder.listenerRef.deref();
+            // If the WeakRef no longer refers to a valid object ...
+            if (!listener) {
+                staleHolders.add(holder);
+                // If the listener is an HTMLElement
+                // that is disconnected from the DOM ...
+            }
+            else if (inBrowser &&
+                listener instanceof HTMLElement &&
+                !listener.isConnected) {
+                staleHolders.add(holder);
+            }
+            else {
+                const { propertyMap } = holder;
+                const keys = Object.keys(propertyMap);
+                if (keys.length === 0 || keys.includes(statePath)) {
+                    listener.changed(statePath, propertyMap[statePath], newValue, oldValue, this);
+                }
+            }
+        }
+        // WARNING: If the element is connected again later,
+        // the WrecState useState method must be called again
+        // to re-add the element as a listener.
+        this.#listenerHolders = this.#listenerHolders.filter(holder => !staleHolders.has(holder));
+    }
+    removeListener(listener) {
+        this.#listenerHolders = this.#listenerHolders.filter(holder => {
+            return holder.listenerRef.deref() !== listener;
+        });
+    }
+}
+if (inBrowser) {
+    const inDevelopment = process.env.NODE_ENV === 'development';
+    if (inDevelopment) {
+        // This makes the WrecState class available in the DevTools console.
+        window.WrecState = WrecState;
+    }
+}
+//# sourceMappingURL=wrec-state.js.map

package/dist/wrec-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wrec-state.js","sourceRoot":"","sources":["../src/wrec-state.ts"],"names":[],"mappings":"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"}

package/dist/wrec.es.js

@@ -15,7 +15,7 @@ class m extends Error {
 }
 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;
+  return r instanceof HTMLButtonElement || r instanceof HTMLFieldSetElement || r instanceof HTMLInputElement || r instanceof HTMLSelectElement || r instanceof HTMLTextAreaElement || r instanceof l;
 }
 function q(r, t, e) {
   const s = document.createElement(r);
@@ -64,14 +64,14 @@ function H(r, t, e) {
   if (S(e))
     if (typeof e == "boolean") {
       e ? r.setAttribute(s, s) : r.removeAttribute(s);
-      const i = u.getPropName(s);
+      const i = l.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);
+    const i = l.getPropName(t);
     r[i] = e;
   }
 }
@@ -79,7 +79,7 @@ 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 u extends HTMLElement {
+class l extends HTMLElement {
   // This is used to lookup the camelCase property name
   // that corresponds to a kebab-case attribute name.
   static #p = /* @__PURE__ */ new Map();
@@ -100,18 +100,19 @@ class u extends HTMLElement {
   // 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 = {};
+  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;
+  static propToComputedMap;
   // 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 propToExprsMap: Map<string, string[]> | null = null;
+  static propToExprsMap;
   static template = null;
   #t = this.constructor;
   // This is a map from expressions to references to them
@@ -134,7 +135,7 @@ class u extends HTMLElement {
   // 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();
+  #u = /* @__PURE__ */ new Map();
   constructor() {
     super(), this.attachShadow({ mode: "open" });
     const t = this.#t;
@@ -142,7 +143,7 @@ class u extends HTMLElement {
   }
   attributeChangedCallback(t, e, s) {
     t === "disabled" && this.#m();
-    const o = u.getPropName(t);
+    const o = l.getPropName(t);
     if (this.#n(o)) {
       const i = this.#y(o, String(s));
       this[o] = i;
@@ -179,7 +180,7 @@ class u extends HTMLElement {
       this.#M(o, i, e);
   }
   #M(t, e, s) {
-    const o = u.getAttrName(t), i = this.hasAttribute(o);
+    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]);
@@ -191,13 +192,13 @@ class u extends HTMLElement {
       },
       set(a) {
         h === Number && typeof a == "string" && (a = C(a));
-        const l = this[f];
-        if (a === l) return;
+        const u = this[f];
+        if (a === u) 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 });
+        M && this.setFormValue(M, String(a)), this.propertyChangedCallback(t, u, a), e.dispatch && this.dispatch("change", { [t]: a });
       }
     });
   }
@@ -207,7 +208,7 @@ class u extends HTMLElement {
       I(s) && (s.disabled = t);
   }
   disconnectedCallback() {
-    this.#s.clear(), this.#f.clear(), this.#l.clear();
+    this.#s.clear(), this.#f.clear(), this.#u.clear();
   }
   dispatch(t, e) {
     this.dispatchEvent(
@@ -229,15 +230,15 @@ class u extends HTMLElement {
     return this.name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
   }
   #R(t) {
-    const e = t instanceof u;
+    const e = t instanceof l;
     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.#l.set(
-          u.getPropName(h),
+        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(
+          l.getPropName(h),
           i
         );
       }
@@ -313,12 +314,12 @@ class u extends HTMLElement {
     }
   }
   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 e = l.#d.get(t);
+    return e || (e = t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), l.#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;
+    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, e, s) {
     if (s.length !== 1) return;
@@ -330,9 +331,9 @@ class u extends HTMLElement {
     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];
+      const { target: u } = a;
+      if (!u) return;
+      const p = u.value, { type: g } = this.#t.properties[f];
       this[f] = g === Number ? C(p) : p, this.#E(f);
     });
   }
@@ -345,7 +346,7 @@ class u extends HTMLElement {
       this.#R(s), s.firstElementChild || this.#P(s);
   }
   static get observedAttributes() {
-    const t = Object.keys(this.properties || {}).map(u.getAttrName);
+    const t = Object.keys(this.properties || {}).map(l.getAttrName);
     return t.includes("disabled") || t.push("disabled"), t;
   }
   // Subclasses can override this to add functionality.
@@ -393,7 +394,7 @@ class u extends HTMLElement {
   // in attribute values or the text content of elements!
   #r(t, e, s = void 0) {
     if (!t) return;
-    const o = this.#u(e, s, t);
+    const o = this.#l(e, s, t);
     if (!o) {
       const c = t.replaceAll("this..", "this.");
       s ? T(e, s, c) : "textContent" in e && (e.textContent = c);
@@ -404,13 +405,13 @@ class u extends HTMLElement {
       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);
+      let u = a.get(f);
+      u || (u = [], a.set(f, u)), u.includes(t) || u.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(
+        const u = a instanceof HTMLElement || a instanceof CSSStyleRule ? a : a.element;
+        u instanceof CSSStyleRule || u.isConnected || this.#s.set(
           c,
           f.filter((p) => p !== a)
         );
@@ -479,7 +480,7 @@ class u extends HTMLElement {
   // 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);
+    const s = this.#u.get(t);
     if (!s) return;
     const o = this.getRootNode();
     if (!(o instanceof ShadowRoot)) return;
@@ -527,7 +528,7 @@ class u extends HTMLElement {
             );
           continue;
         }
-        if (!e.has(u.getPropName(o))) {
+        if (!e.has(l.getPropName(o))) {
           if (o === "name") {
             if (t.formAssociated) continue;
             throw new m(
@@ -538,7 +539,7 @@ class u extends HTMLElement {
         }
       }
   }
-  #u(t, e, s) {
+  #l(t, e, s) {
     const o = s.match(y);
     if (o)
       return o.forEach((i) => {
@@ -586,9 +587,9 @@ class u extends HTMLElement {
           let h = n.slice(2);
           h = h[0].toLowerCase() + h.slice(1).toLowerCase();
           const c = i.value;
-          this.#u(s, n, c);
+          this.#l(s, n, c);
           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);
+          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)
@@ -627,7 +628,7 @@ function Z(r, ...t) {
   return e;
 }
 export {
-  u as Wrec,
+  l as Wrec,
   q as createElement,
   z as css,
   Z as html