@webtides/element-js 0.7.2 → 1.0.0-alpha.1

package/dist/index.js

@@ -1,10 +1,8 @@
 var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => {
-  if (typeof key !== "symbol")
-    key += "";
-  if (key in obj)
-    return __defProp(obj, key, {enumerable: true, configurable: true, writable: true, value});
-  return obj[key] = value;
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
 };
 
 // src/util/AttributeParser.js
@@ -60,8 +58,23 @@ function dashToCamel(string) {
 function camelToDash(string) {
   return string.replace(/([A-Z])/g, "-$1").toLowerCase();
 }
+function encodeAttribute(attribute2) {
+  return `${attribute2}`.replace(/'/g, "&apos;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\r\n/g, "\n").replace(/[\r\n]/g, "\n");
+}
 
 // src/util/DOMHelper.js
+var ELEMENT_NODE = 1;
+var COMMENT_NODE = 8;
+var getNodePath = (node) => {
+  const path = [];
+  let parentNode = node.parentNode;
+  while (parentNode) {
+    path.push([...parentNode.childNodes].indexOf(node));
+    node = parentNode;
+    parentNode = node.parentNode;
+  }
+  return path;
+};
 function getShadowParentOrBody(element) {
   if (element instanceof ShadowRoot) {
     return element;
@@ -75,23 +88,28 @@ function getShadowParentOrBody(element) {
 }
 var supportsAdoptingStyleSheets = () => "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype;
 var supportsAppendingStyleSheets = !window.ShadyDOM;
+var convertStringToTemplate = (string) => {
+  var _a;
+  const template = (_a = globalThis.document) == null ? void 0 : _a.createElement("template");
+  template.innerHTML = string.trimStart().trimEnd();
+  return template.content;
+};
 
 // src/util/Store.js
 var Store = class {
   constructor(value) {
-    __publicField(this, "_observer", new Set());
+    __publicField(this, "_observer", /* @__PURE__ */ new Set());
     __publicField(this, "_singlePropertyMode", false);
     __publicField(this, "_state", {});
     this._singlePropertyMode = arguments.length > 0 && !isObjectLike(value);
-    const specificValues = this._singlePropertyMode ? {value} : value;
-    this._state = {...!this._singlePropertyMode && this.properties(), ...specificValues};
+    const specificValues = this._singlePropertyMode ? { value } : value;
+    this._state = { ...!this._singlePropertyMode && this.properties(), ...specificValues };
     Object.entries(this._state).map(([key, value2]) => {
       Object.defineProperty(this, key, {
         get: () => {
           return this._state[key];
         },
         set: (newValue) => {
-          const oldState = structuredClone(this._state);
           const oldValue = this._state[key];
           this._state[key] = newValue;
           if (!deepEquals(newValue, oldValue)) {
@@ -99,7 +117,7 @@ var Store = class {
             if (watch.hasOwnProperty(key) && typeof watch[key] === "function") {
               watch[key](newValue, oldValue);
             }
-            this.requestUpdate(oldState);
+            this.requestUpdate();
           }
         }
       });
@@ -123,7 +141,7 @@ var Store = class {
   unsubscribe(observer) {
     this._observer.delete(observer);
   }
-  requestUpdate(oldState) {
+  requestUpdate() {
     this._observer.forEach(async (observer) => {
       var _a, _b;
       if (observer instanceof BaseElement) {
@@ -131,9 +149,9 @@ var Store = class {
         if (Object.keys((_a = observer.watch()) != null ? _a : {}).length > 0) {
           const properties = observer.properties();
           Object.keys((_b = observer.watch()) != null ? _b : {}).forEach((key) => {
-            if (properties[key] === this) {
-              observer.callPropertyWatcher(key, this._state, oldState);
-              observer.notifyPropertyChange(key, this._state);
+            if (observer._state[key] === this) {
+              observer.callPropertyWatcher(key, this, this);
+              observer.notifyPropertyChange(key, this);
             }
           });
         }
@@ -185,23 +203,19 @@ var BaseElement = class extends HTMLElement {
       propertyOptions: {},
       ...options
     };
-    if (options.childListUpdate !== void 0 && options.childListUpdate !== null) {
-      this._options.mutationObserverOptions.childList = options.childListUpdate;
-      console.warn(`[${this.localName}] Using the "childListUpdate" option is deprecated and will be removed before 1.0! Please use the "mutationObserverOptions" dictionary instead. See the docs for more info`);
-    }
   }
   connectedCallback() {
     this.defineAttributesAsProperties();
     this.defineProperties();
-    this.defineComputedProperties();
     this.definePropertyInjection();
     this.defineObserver();
     if (this.hasAttribute("defer-update") || this._options.deferUpdate) {
       this.registerEventsAndRefs();
       this.triggerHook("connected");
     } else {
-      this.requestUpdate({notify: false}).then(() => {
+      this.requestUpdate({ notify: false }).then(() => {
         this.triggerHook("connected");
+        this.triggerHook("afterUpdate");
       });
     }
   }
@@ -209,7 +223,10 @@ var BaseElement = class extends HTMLElement {
     this._mutationObserver = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
         if (mutation.type === "attributes" && mutation.target === this && this._state.hasOwnProperty(dashToCamel(mutation.attributeName))) {
-          this[dashToCamel(mutation.attributeName)] = parseAttribute(this.getAttribute(mutation.attributeName), this._options.propertyOptions[dashToCamel(mutation.attributeName)]);
+          this[dashToCamel(mutation.attributeName)] = parseAttribute(
+            this.getAttribute(mutation.attributeName),
+            this._options.propertyOptions[dashToCamel(mutation.attributeName)]
+          );
         }
         if (mutation.type === "attributes" && mutation.target !== this) {
           this.requestUpdate();
@@ -240,7 +257,7 @@ var BaseElement = class extends HTMLElement {
     });
     this.triggerHook("disconnected");
   }
-  requestUpdate(options = {notify: true}) {
+  requestUpdate(options = { notify: true }) {
     if (options.notify === true) {
       this.triggerHook("beforeUpdate");
     }
@@ -249,19 +266,19 @@ var BaseElement = class extends HTMLElement {
       this._batchUpdate = false;
     }
     return new Promise((resolve, reject) => {
-      this._requestedUpdates.push({resolve, reject});
+      this._requestedUpdates.push({ resolve, reject });
       this._batchUpdate = requestAnimationFrame(() => {
         try {
           this.update(options);
-          this._requestedUpdates.forEach(({resolve: resolve2, reject: reject2}) => resolve2());
+          this._requestedUpdates.forEach(({ resolve: resolve2, reject: reject2 }) => resolve2());
         } catch (e) {
-          this._requestedUpdates.forEach(({resolve: resolve2, reject: reject2}) => reject2(e));
+          this._requestedUpdates.forEach(({ resolve: resolve2, reject: reject2 }) => reject2(e));
         }
         this._requestedUpdates = [];
       });
     });
   }
-  update(options = {notify: true}) {
+  update(options = { notify: true }) {
     this.registerEventsAndRefs();
     if (options.notify === true) {
       this.triggerHook("afterUpdate");
@@ -273,19 +290,19 @@ var BaseElement = class extends HTMLElement {
   }
   defineAttributesAsProperties() {
     const ignoreAttributes = ["class", "style"];
-    Array.from(this.attributes).filter((attribute) => {
-      return !ignoreAttributes.includes(attribute.name);
-    }).forEach((attribute) => {
-      const name = dashToCamel(attribute.name);
+    Array.from(this.attributes).filter((attribute2) => {
+      return !ignoreAttributes.includes(attribute2.name);
+    }).forEach((attribute2) => {
+      const name = dashToCamel(attribute2.name);
       const parseOptions = this._options.propertyOptions[name];
-      this.defineProperty(name, parseAttribute(attribute.value, parseOptions), true);
+      this.defineProperty(name, parseAttribute(attribute2.value, parseOptions), true);
     });
   }
   properties() {
     return {};
   }
   defineProperties() {
-    Object.keys({...this.injectProperties(), ...this.properties()}).forEach((prop) => {
+    Object.keys({ ...this.injectProperties(), ...this.properties() }).forEach((prop) => {
       const value = this[prop] || this.properties()[prop];
       this.defineProperty(prop, value);
     });
@@ -299,7 +316,7 @@ var BaseElement = class extends HTMLElement {
       return;
     }
     if (!reflectAttribute && ((_a = this._options.propertyOptions[property]) == null ? void 0 : _a.reflect)) {
-      this.reflectProperty({property, newValue: value});
+      this.reflectProperty({ property, newValue: value });
     }
     if (((_b = this._options.propertyOptions[property]) == null ? void 0 : _b.reflect) === false) {
       this.removeAttribute(camelToDash(property));
@@ -319,7 +336,7 @@ var BaseElement = class extends HTMLElement {
             newValue.subscribe(this);
           }
           if (reflectAttribute || ((_a2 = this._options.propertyOptions[property]) == null ? void 0 : _a2.reflect)) {
-            this.reflectProperty({property, newValue, newValueString});
+            this.reflectProperty({ property, newValue, newValueString });
           }
           if (this._options.autoUpdate) {
             this.requestUpdate({
@@ -354,7 +371,7 @@ var BaseElement = class extends HTMLElement {
   }
   reflectProperty(options) {
     var _a;
-    const {property, newValue} = options;
+    const { property, newValue } = options;
     const newValueString = options.newValueString || JSON.stringify(newValue);
     if (newValue === void 0 || newValue === null || isNaN(newValue)) {
       this.setAttribute(camelToDash(property), "");
@@ -381,7 +398,7 @@ var BaseElement = class extends HTMLElement {
     }
   }
   requestContext(propertyName, valueOrCallback) {
-    this.dispatch("request-context", {[propertyName]: valueOrCallback}, true);
+    this.dispatch("request-context", { [propertyName]: valueOrCallback }, true);
   }
   onRequestContext(event) {
     var _a;
@@ -399,9 +416,6 @@ var BaseElement = class extends HTMLElement {
       }
     });
   }
-  hooks() {
-    return {};
-  }
   connected() {
   }
   beforeUpdate() {
@@ -411,11 +425,6 @@ var BaseElement = class extends HTMLElement {
   disconnected() {
   }
   triggerHook(name) {
-    if (this.hooks && name in this.hooks()) {
-      console.warn(`[${this.localName}] Using the hooks() map for lifecycle hooks is deprecated! Please overwrite the existing lifecycle hook functions. See the docs for more info`);
-      this.hooks()[name]();
-      return;
-    }
     if (name in this) {
       this[name]();
     }
@@ -423,19 +432,6 @@ var BaseElement = class extends HTMLElement {
   watch() {
     return {};
   }
-  computed() {
-    return {};
-  }
-  defineComputedProperties() {
-    Object.keys(this.computed()).forEach((prop) => {
-      if (!this.hasOwnProperty(prop)) {
-        console.warn(`[${this.localName}] Using the computed() map for computed properties is deprecated! Please use regular JS getters and return the computed value. See the docs for more info`);
-        Object.defineProperty(this, prop, {
-          get: () => this.computed()[prop]()
-        });
-      }
-    });
-  }
   events() {
     return {};
   }
@@ -444,7 +440,7 @@ var BaseElement = class extends HTMLElement {
     const eventDefinitions = this.events();
     Object.keys(eventDefinitions).forEach((elementSelector) => {
       const events = eventDefinitions[elementSelector];
-      const selectorWhiteList = {window, document, this: this.getRoot()};
+      const selectorWhiteList = { window, document, this: this.getRoot() };
       const whiteListElement = selectorWhiteList[elementSelector];
       const eventTargets = whiteListElement ? [whiteListElement] : this.getRoot().querySelectorAll(elementSelector);
       eventTargets.forEach((eventTarget) => {
@@ -454,18 +450,18 @@ var BaseElement = class extends HTMLElement {
           if (typeof notation === "function") {
             const callback = notation.bind(this);
             eventTarget.addEventListener(eventName, callback);
-            this._registeredEvents.push({eventTarget, eventName, callback});
+            this._registeredEvents.push({ eventTarget, eventName, callback });
           } else if (typeof notation === "object" && typeof notation.listener === "function") {
             const callback = notation.listener.bind(this);
             eventTarget.addEventListener(eventName, callback, (_a = notation.options) != null ? _a : {});
-            this._registeredEvents.push({eventTarget, eventName, callback});
+            this._registeredEvents.push({ eventTarget, eventName, callback });
           }
         });
       });
     });
   }
   removeEvents() {
-    this._registeredEvents.forEach(({eventTarget, eventName, callback}) => {
+    this._registeredEvents.forEach(({ eventTarget, eventName, callback }) => {
       if (eventTarget === window || eventTarget === document || this.getRoot().contains(eventTarget)) {
         eventTarget.removeEventListener(eventName, callback);
       }
@@ -489,7 +485,9 @@ var BaseElement = class extends HTMLElement {
       } else if (!hasListRef) {
         refsMap[refKey] = refNode;
       } else {
-        console.warn(`Did not register singular ref ${refKey}, ${refNode} as a ref list is already registered under the same name.`);
+        console.warn(
+          `Did not register singular ref ${refKey}, ${refNode} as a ref list is already registered under the same name.`
+        );
       }
     });
     this.$refs = refsMap;
@@ -546,11 +544,6 @@ var _StyledElement = class extends BaseElement {
     super.connectedCallback();
     if (supportsAdoptingStyleSheets() && this._options.shadowRender) {
       this.adoptStyleSheets();
-    } else if (this._options.shadowRender && window.ShadyCSS !== void 0) {
-      window.ShadyCSS.ScopingShim.prepareAdoptedCssText(this._styles, this.localName);
-    }
-    if (window.ShadyCSS !== void 0) {
-      window.ShadyCSS.styleElement(this);
     }
   }
   styles() {
@@ -560,7 +553,7 @@ var _StyledElement = class extends BaseElement {
     var _a, _b;
     if (!supportsAdoptingStyleSheets() || this._options.shadowRender === false) {
       const appendableStyles = [...this._styles];
-      if (this._options.shadowRender && this._options.adoptGlobalStyles && !window.ShadyCSS) {
+      if (this._options.shadowRender && this._options.adoptGlobalStyles) {
         appendableStyles.unshift((_b = (_a = _StyledElement.globalStyles) == null ? void 0 : _a.textContent) != null ? _b : "");
       }
       this.appendStyleSheets(appendableStyles);
@@ -604,979 +597,688 @@ var StyledElement = _StyledElement;
 __publicField(StyledElement, "globalStyles", null);
 StyledElement.updateGlobalStyles();
 
-// node_modules/lit-html/lib/directive.js
-/**
- * @license
- * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
- * This code may only be used under the BSD style license found at
- * http://polymer.github.io/LICENSE.txt
- * The complete set of authors may be found at
- * http://polymer.github.io/AUTHORS.txt
- * The complete set of contributors may be found at
- * http://polymer.github.io/CONTRIBUTORS.txt
- * Code distributed by Google as part of the polymer project is also
- * subject to an additional IP rights grant found at
- * http://polymer.github.io/PATENTS.txt
- */
-var directives = new WeakMap();
-var isDirective = (o) => {
-  return typeof o === "function" && directives.has(o);
-};
-
-// node_modules/lit-html/lib/dom.js
-/**
- * @license
- * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
- * This code may only be used under the BSD style license found at
- * http://polymer.github.io/LICENSE.txt
- * The complete set of authors may be found at
- * http://polymer.github.io/AUTHORS.txt
- * The complete set of contributors may be found at
- * http://polymer.github.io/CONTRIBUTORS.txt
- * Code distributed by Google as part of the polymer project is also
- * subject to an additional IP rights grant found at
- * http://polymer.github.io/PATENTS.txt
- */
-var isCEPolyfill = typeof window !== "undefined" && window.customElements != null && window.customElements.polyfillWrapFlushCallback !== void 0;
-var removeNodes = (container, start, end = null) => {
-  while (start !== end) {
-    const n = start.nextSibling;
-    container.removeChild(start);
-    start = n;
+// src/dom-parts/Part.js
+var Part = class {
+  constructor() {
+    __publicField(this, "processor");
+  }
+  update(value) {
   }
 };
 
-// node_modules/lit-html/lib/part.js
-/**
- * @license
- * Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
- * This code may only be used under the BSD style license found at
- * http://polymer.github.io/LICENSE.txt
- * The complete set of authors may be found at
- * http://polymer.github.io/AUTHORS.txt
- * The complete set of contributors may be found at
- * http://polymer.github.io/CONTRIBUTORS.txt
- * Code distributed by Google as part of the polymer project is also
- * subject to an additional IP rights grant found at
- * http://polymer.github.io/PATENTS.txt
- */
-var noChange = {};
-var nothing = {};
-
-// node_modules/lit-html/lib/template.js
-/**
- * @license
- * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
- * This code may only be used under the BSD style license found at
- * http://polymer.github.io/LICENSE.txt
- * The complete set of authors may be found at
- * http://polymer.github.io/AUTHORS.txt
- * The complete set of contributors may be found at
- * http://polymer.github.io/CONTRIBUTORS.txt
- * Code distributed by Google as part of the polymer project is also
- * subject to an additional IP rights grant found at
- * http://polymer.github.io/PATENTS.txt
- */
-var marker = `{{lit-${String(Math.random()).slice(2)}}}`;
-var nodeMarker = `<!--${marker}-->`;
-var markerRegex = new RegExp(`${marker}|${nodeMarker}`);
-var boundAttributeSuffix = "$lit$";
-var Template = class {
-  constructor(result, element) {
-    this.parts = [];
-    this.element = element;
-    const nodesToRemove = [];
-    const stack = [];
-    const walker = document.createTreeWalker(element.content, 133, null, false);
-    let lastPartIndex = 0;
-    let index = -1;
-    let partIndex = 0;
-    const {strings, values: {length}} = result;
-    while (partIndex < length) {
-      const node = walker.nextNode();
-      if (node === null) {
-        walker.currentNode = stack.pop();
-        continue;
-      }
-      index++;
-      if (node.nodeType === 1) {
-        if (node.hasAttributes()) {
-          const attributes = node.attributes;
-          const {length: length2} = attributes;
-          let count = 0;
-          for (let i = 0; i < length2; i++) {
-            if (endsWith(attributes[i].name, boundAttributeSuffix)) {
-              count++;
-            }
-          }
-          while (count-- > 0) {
-            const stringForPart = strings[partIndex];
-            const name = lastAttributeNameRegex.exec(stringForPart)[2];
-            const attributeLookupName = name.toLowerCase() + boundAttributeSuffix;
-            const attributeValue = node.getAttribute(attributeLookupName);
-            node.removeAttribute(attributeLookupName);
-            const statics = attributeValue.split(markerRegex);
-            this.parts.push({type: "attribute", index, name, strings: statics});
-            partIndex += statics.length - 1;
-          }
-        }
-        if (node.tagName === "TEMPLATE") {
-          stack.push(node);
-          walker.currentNode = node.content;
-        }
-      } else if (node.nodeType === 3) {
-        const data = node.data;
-        if (data.indexOf(marker) >= 0) {
-          const parent = node.parentNode;
-          const strings2 = data.split(markerRegex);
-          const lastIndex = strings2.length - 1;
-          for (let i = 0; i < lastIndex; i++) {
-            let insert;
-            let s = strings2[i];
-            if (s === "") {
-              insert = createMarker();
-            } else {
-              const match = lastAttributeNameRegex.exec(s);
-              if (match !== null && endsWith(match[2], boundAttributeSuffix)) {
-                s = s.slice(0, match.index) + match[1] + match[2].slice(0, -boundAttributeSuffix.length) + match[3];
-              }
-              insert = document.createTextNode(s);
-            }
-            parent.insertBefore(insert, node);
-            this.parts.push({type: "node", index: ++index});
-          }
-          if (strings2[lastIndex] === "") {
-            parent.insertBefore(createMarker(), node);
-            nodesToRemove.push(node);
-          } else {
-            node.data = strings2[lastIndex];
-          }
-          partIndex += lastIndex;
-        }
-      } else if (node.nodeType === 8) {
-        if (node.data === marker) {
-          const parent = node.parentNode;
-          if (node.previousSibling === null || index === lastPartIndex) {
-            index++;
-            parent.insertBefore(createMarker(), node);
-          }
-          lastPartIndex = index;
-          this.parts.push({type: "node", index});
-          if (node.nextSibling === null) {
-            node.data = "";
-          } else {
-            nodesToRemove.push(node);
-            index--;
-          }
-          partIndex++;
-        } else {
-          let i = -1;
-          while ((i = node.data.indexOf(marker, i + 1)) !== -1) {
-            this.parts.push({type: "node", index: -1});
-            partIndex++;
-          }
-        }
-      }
-    }
-    for (const n of nodesToRemove) {
-      n.parentNode.removeChild(n);
-    }
-  }
+// src/dom-parts/AttributePart.js
+var processBooleanAttribute = (node, name, oldValue) => {
+  node.removeAttribute(`?${name}`);
+  return (newValue) => {
+    const value = !!(newValue == null ? void 0 : newValue.valueOf()) && newValue !== "false";
+    if (oldValue !== value) {
+      node.toggleAttribute(name, oldValue = !!value);
+    }
+  };
 };
-var endsWith = (str, suffix) => {
-  const index = str.length - suffix.length;
-  return index >= 0 && str.slice(index) === suffix;
+var processPropertyAttribute = (node, name) => {
+  node.removeAttribute(`.${name}`);
+  return (value) => {
+    node[name] = value;
+  };
 };
-var isTemplatePartActive = (part) => part.index !== -1;
-var createMarker = () => document.createComment("");
-var lastAttributeNameRegex = /([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;
-
-// node_modules/lit-html/lib/template-instance.js
-/**
- * @license
- * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
- * This code may only be used under the BSD style license found at
- * http://polymer.github.io/LICENSE.txt
- * The complete set of authors may be found at
- * http://polymer.github.io/AUTHORS.txt
- * The complete set of contributors may be found at
- * http://polymer.github.io/CONTRIBUTORS.txt
- * Code distributed by Google as part of the polymer project is also
- * subject to an additional IP rights grant found at
- * http://polymer.github.io/PATENTS.txt
- */
-var TemplateInstance = class {
-  constructor(template, processor, options) {
-    this.__parts = [];
-    this.template = template;
-    this.processor = processor;
-    this.options = options;
-  }
-  update(values) {
-    let i = 0;
-    for (const part of this.__parts) {
-      if (part !== void 0) {
-        part.setValue(values[i]);
-      }
-      i++;
-    }
-    for (const part of this.__parts) {
-      if (part !== void 0) {
-        part.commit();
-      }
-    }
-  }
-  _clone() {
-    const fragment = isCEPolyfill ? this.template.element.content.cloneNode(true) : document.importNode(this.template.element.content, true);
-    const stack = [];
-    const parts2 = this.template.parts;
-    const walker = document.createTreeWalker(fragment, 133, null, false);
-    let partIndex = 0;
-    let nodeIndex = 0;
-    let part;
-    let node = walker.nextNode();
-    while (partIndex < parts2.length) {
-      part = parts2[partIndex];
-      if (!isTemplatePartActive(part)) {
-        this.__parts.push(void 0);
-        partIndex++;
-        continue;
-      }
-      while (nodeIndex < part.index) {
-        nodeIndex++;
-        if (node.nodeName === "TEMPLATE") {
-          stack.push(node);
-          walker.currentNode = node.content;
-        }
-        if ((node = walker.nextNode()) === null) {
-          walker.currentNode = stack.pop();
-          node = walker.nextNode();
+var processEventAttribute = (node, name) => {
+  node.removeAttribute(name);
+  let oldValue = void 0;
+  let type = name.startsWith("@") ? name.slice(1) : name.toLowerCase().slice(2);
+  return (newValue) => {
+    if (oldValue !== newValue) {
+      if (oldValue)
+        node.removeEventListener(type, oldValue);
+      if (oldValue = newValue)
+        node.addEventListener(type, oldValue);
+    }
+  };
+};
+var processAttribute = (node, name) => {
+  var _a;
+  let oldValue, orphan = true;
+  const attributeNode = (_a = globalThis.document) == null ? void 0 : _a.createAttributeNS(null, name);
+  return (newValue) => {
+    const value = newValue == null ? void 0 : newValue.valueOf();
+    if (oldValue !== value) {
+      if ((oldValue = value) == null) {
+        if (!orphan) {
+          node.removeAttributeNode(attributeNode);
+          orphan = true;
         }
-      }
-      if (part.type === "node") {
-        const part2 = this.processor.handleTextExpression(this.options);
-        part2.insertAfterNode(node.previousSibling);
-        this.__parts.push(part2);
       } else {
-        this.__parts.push(...this.processor.handleAttributeExpressions(node, part.name, part.strings, this.options));
+        attributeNode.value = value;
+        if (orphan) {
+          node.setAttributeNodeNS(attributeNode);
+          orphan = false;
+        }
       }
-      partIndex++;
     }
-    if (isCEPolyfill) {
-      document.adoptNode(fragment);
-      customElements.upgrade(fragment);
-    }
-    return fragment;
-  }
+  };
 };
-
-// node_modules/lit-html/lib/template-result.js
-/**
- * @license
- * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
- * This code may only be used under the BSD style license found at
- * http://polymer.github.io/LICENSE.txt
- * The complete set of authors may be found at
- * http://polymer.github.io/AUTHORS.txt
- * The complete set of contributors may be found at
- * http://polymer.github.io/CONTRIBUTORS.txt
- * Code distributed by Google as part of the polymer project is also
- * subject to an additional IP rights grant found at
- * http://polymer.github.io/PATENTS.txt
- */
-var commentMarker = ` ${marker} `;
-var TemplateResult = class {
-  constructor(strings, values, type, processor) {
-    this.strings = strings;
-    this.values = values;
-    this.type = type;
-    this.processor = processor;
-  }
-  getHTML() {
-    const l = this.strings.length - 1;
-    let html2 = "";
-    let isCommentBinding = false;
-    for (let i = 0; i < l; i++) {
-      const s = this.strings[i];
-      const commentOpen = s.lastIndexOf("<!--");
-      isCommentBinding = (commentOpen > -1 || isCommentBinding) && s.indexOf("-->", commentOpen + 1) === -1;
-      const attributeMatch = lastAttributeNameRegex.exec(s);
-      if (attributeMatch === null) {
-        html2 += s + (isCommentBinding ? commentMarker : nodeMarker);
-      } else {
-        html2 += s.substr(0, attributeMatch.index) + attributeMatch[1] + attributeMatch[2] + boundAttributeSuffix + attributeMatch[3] + marker;
-      }
-    }
-    html2 += this.strings[l];
-    return html2;
+var processAttributePart = (node, name) => {
+  if (name.startsWith("?")) {
+    return processBooleanAttribute(node, name.slice(1), false);
   }
-  getTemplateElement() {
-    const template = document.createElement("template");
-    template.innerHTML = this.getHTML();
-    return template;
+  if (name.startsWith(".")) {
+    return processPropertyAttribute(node, name.slice(1));
   }
+  if (name.startsWith("@") || name.startsWith("on")) {
+    return processEventAttribute(node, name);
+  }
+  return processAttribute(node, name);
 };
-
-// node_modules/lit-html/lib/parts.js
-/**
- * @license
- * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
- * This code may only be used under the BSD style license found at
- * http://polymer.github.io/LICENSE.txt
- * The complete set of authors may be found at
- * http://polymer.github.io/AUTHORS.txt
- * The complete set of contributors may be found at
- * http://polymer.github.io/CONTRIBUTORS.txt
- * Code distributed by Google as part of the polymer project is also
- * subject to an additional IP rights grant found at
- * http://polymer.github.io/PATENTS.txt
- */
-var isPrimitive = (value) => {
-  return value === null || !(typeof value === "object" || typeof value === "function");
-};
-var isIterable = (value) => {
-  return Array.isArray(value) || !!(value && value[Symbol.iterator]);
-};
-var AttributeCommitter = class {
-  constructor(element, name, strings) {
-    this.dirty = true;
-    this.element = element;
+var AttributePart = class extends Part {
+  constructor(node, name, initialValue) {
+    super();
+    __publicField(this, "name");
+    __publicField(this, "interpolations", 1);
+    __publicField(this, "values", []);
+    __publicField(this, "currentValueIndex", 0);
+    __publicField(this, "initialValue");
     this.name = name;
-    this.strings = strings;
-    this.parts = [];
-    for (let i = 0; i < strings.length - 1; i++) {
-      this.parts[i] = this._createPart();
-    }
+    this.initialValue = initialValue;
+    this.processor = processAttributePart(node.nextElementSibling, this.name);
   }
-  _createPart() {
-    return new AttributePart(this);
-  }
-  _getValue() {
-    const strings = this.strings;
-    const l = strings.length - 1;
-    let text = "";
-    for (let i = 0; i < l; i++) {
-      text += strings[i];
-      const part = this.parts[i];
-      if (part !== void 0) {
-        const v = part.value;
-        if (isPrimitive(v) || !isIterable(v)) {
-          text += typeof v === "string" ? v : String(v);
-        } else {
-          for (const t of v) {
-            text += typeof t === "string" ? t : String(t);
-          }
-        }
-      }
-    }
-    text += strings[l];
-    return text;
+  addNode(node) {
+    this.interpolations++;
   }
-  commit() {
-    if (this.dirty) {
-      this.dirty = false;
-      this.element.setAttribute(this.name, this._getValue());
+  update(value) {
+    if (this.initialValue === "") {
+      this.processor(value);
+      return;
     }
-  }
-};
-var AttributePart = class {
-  constructor(committer) {
-    this.value = void 0;
-    this.committer = committer;
-  }
-  setValue(value) {
-    if (value !== noChange && (!isPrimitive(value) || value !== this.value)) {
-      this.value = value;
-      if (!isDirective(value)) {
-        this.committer.dirty = true;
-      }
+    this.values[this.currentValueIndex++] = value;
+    if (this.interpolations === this.currentValueIndex) {
+      this.currentValueIndex = 0;
+      let replaceIndex = 0;
+      const parsedValue = this.initialValue.replace(/\x03/g, () => this.values[replaceIndex++]);
+      this.processor(parsedValue);
     }
   }
-  commit() {
-    while (isDirective(this.value)) {
-      const directive2 = this.value;
-      this.value = noChange;
-      directive2(this);
-    }
-    if (this.value === noChange) {
-      return;
+};
+
+// src/dom-parts/ChildNodePart.js
+var removeChildNodes = (node) => {
+  var _a;
+  const range = (_a = globalThis.document) == null ? void 0 : _a.createRange();
+  const firstChild = Array.isArray(node) ? node[0] : node instanceof TemplatePart ? node.childNodes[0] : node.firstChild;
+  const lastChild = Array.isArray(node) ? node[node.length - 1] : node instanceof TemplatePart ? node.childNodes[node.childNodes.length - 1] : node.lastChild;
+  range.setStartAfter(firstChild);
+  range.setEndAfter(lastChild);
+  range.deleteContents();
+  return firstChild;
+};
+var removeNodesBetweenComments = (commentNode) => {
+  while (commentNode.previousSibling) {
+    if (commentNode.previousSibling.nodeType === COMMENT_NODE && commentNode.previousSibling.data === commentNode.data.replace("/", "")) {
+      break;
     }
-    this.committer.commit();
+    commentNode.parentNode.removeChild(commentNode.previousSibling);
   }
 };
-var NodePart = class {
-  constructor(options) {
-    this.value = void 0;
-    this.__pendingValue = void 0;
-    this.options = options;
-  }
-  appendInto(container) {
-    this.startNode = container.appendChild(createMarker());
-    this.endNode = container.appendChild(createMarker());
-  }
-  insertAfterNode(ref) {
-    this.startNode = ref;
-    this.endNode = ref.nextSibling;
-  }
-  appendIntoPart(part) {
-    part.__insert(this.startNode = createMarker());
-    part.__insert(this.endNode = createMarker());
-  }
-  insertAfterPart(ref) {
-    ref.__insert(this.startNode = createMarker());
-    this.endNode = ref.endNode;
-    ref.endNode = this.startNode;
-  }
-  setValue(value) {
-    this.__pendingValue = value;
-  }
-  commit() {
-    if (this.startNode.parentNode === null) {
-      return;
+var diffChildNodes = function(parentNode, domChildNodes, templateChildNodes, anchorNode) {
+  let length = Math.max(templateChildNodes.length, domChildNodes.length);
+  for (let index = 0; index < length; index++) {
+    let domChildNode = domChildNodes[index];
+    let templateChildNode = templateChildNodes[index];
+    if (!domChildNode) {
+      if (templateChildNode instanceof TemplatePart) {
+        anchorNode.before(...templateChildNode.childNodes);
+      } else if (typeof templateChildNode === "object" && "ELEMENT_NODE" in templateChildNode) {
+        parentNode.insertBefore(templateChildNode, anchorNode);
+      } else {
+        parentNode.insertBefore(document.createTextNode(templateChildNode), anchorNode);
+      }
+      continue;
     }
-    while (isDirective(this.__pendingValue)) {
-      const directive2 = this.__pendingValue;
-      this.__pendingValue = noChange;
-      directive2(this);
+    if (!templateChildNode) {
+      parentNode.removeChild(removeChildNodes(domChildNode));
+      continue;
     }
-    const value = this.__pendingValue;
-    if (value === noChange) {
-      return;
+    if (domChildNode === templateChildNode) {
+      continue;
     }
-    if (isPrimitive(value)) {
-      if (value !== this.value) {
-        this.__commitText(value);
-      }
-    } else if (value instanceof TemplateResult) {
-      this.__commitTemplateResult(value);
-    } else if (value instanceof Node) {
-      this.__commitNode(value);
-    } else if (isIterable(value)) {
-      this.__commitIterable(value);
-    } else if (value === nothing) {
-      this.value = nothing;
-      this.clear();
-    } else {
-      this.__commitText(value);
+    if (templateChildNode.nodeType !== domChildNode.nodeType) {
+      parentNode.replaceChild(templateChildNode, domChildNode);
+      continue;
     }
-  }
-  __insert(node) {
-    this.endNode.parentNode.insertBefore(node, this.endNode);
-  }
-  __commitNode(value) {
-    if (this.value === value) {
-      return;
+    if (templateChildNode.nodeType === ELEMENT_NODE && templateChildNode.tagName !== domChildNode.tagName) {
+      parentNode.replaceChild(templateChildNode, domChildNode);
+      continue;
     }
-    this.clear();
-    this.__insert(value);
-    this.value = value;
-  }
-  __commitText(value) {
-    const node = this.startNode.nextSibling;
-    value = value == null ? "" : value;
-    const valueAsString = typeof value === "string" ? value : String(value);
-    if (node === this.endNode.previousSibling && node.nodeType === 3) {
-      node.data = valueAsString;
-    } else {
-      this.__commitNode(document.createTextNode(valueAsString));
+    if (templateChildNode.nodeType === ELEMENT_NODE && templateChildNode.tagName === "SVG") {
+      parentNode.replaceChild(templateChildNode, domChildNode);
+      continue;
     }
-    this.value = value;
   }
-  __commitTemplateResult(value) {
-    const template = this.options.templateFactory(value);
-    if (this.value instanceof TemplateInstance && this.value.template === template) {
-      this.value.update(value.values);
-    } else {
-      const instance = new TemplateInstance(template, value.processor, this.options);
-      const fragment = instance._clone();
-      instance.update(value.values);
-      this.__commitNode(fragment);
-      this.value = instance;
-    }
-  }
-  __commitIterable(value) {
-    if (!Array.isArray(this.value)) {
-      this.value = [];
-      this.clear();
-    }
-    const itemParts = this.value;
-    let partIndex = 0;
-    let itemPart;
-    for (const item of value) {
-      itemPart = itemParts[partIndex];
-      if (itemPart === void 0) {
-        itemPart = new NodePart(this.options);
-        itemParts.push(itemPart);
-        if (partIndex === 0) {
-          itemPart.appendIntoPart(this);
-        } else {
-          itemPart.insertAfterPart(itemParts[partIndex - 1]);
+  return templateChildNodes;
+};
+var processNodePart = (comment, initialValue) => {
+  let nodes = [];
+  let oldValue = initialValue instanceof TemplatePart ? [...initialValue.childNodes] : initialValue;
+  let cachedTextNode = void 0;
+  const processNodeValue = (newValue) => {
+    var _a, _b;
+    switch (typeof newValue) {
+      case "string":
+      case "number":
+      case "boolean":
+        if (oldValue !== newValue) {
+          oldValue = newValue;
+          if (!cachedTextNode)
+            cachedTextNode = (_a = globalThis.document) == null ? void 0 : _a.createTextNode("");
+          cachedTextNode.data = newValue;
+          if (((_b = comment.previousSibling) == null ? void 0 : _b.data) === comment.data.replace("/", "")) {
+            comment.parentNode.insertBefore(cachedTextNode, comment);
+          } else {
+            comment.previousSibling.data = newValue;
+          }
+          nodes = [cachedTextNode];
         }
-      }
-      itemPart.setValue(item);
-      itemPart.commit();
-      partIndex++;
-    }
-    if (partIndex < itemParts.length) {
-      itemParts.length = partIndex;
-      this.clear(itemPart && itemPart.endNode);
+        break;
+      case "object":
+      case "undefined":
+        if (newValue === null || newValue === void 0) {
+          if (oldValue !== newValue) {
+            oldValue = newValue;
+            removeNodesBetweenComments(comment);
+            nodes = [];
+          }
+          break;
+        }
+        if (Array.isArray(newValue)) {
+          if (newValue.length === 0) {
+            removeNodesBetweenComments(comment);
+            nodes = [];
+          } else {
+            nodes = diffChildNodes(comment.parentNode, oldValue || [], newValue, comment);
+          }
+          oldValue = newValue;
+          break;
+        }
+        if (oldValue !== newValue) {
+          if ("ELEMENT_NODE" in newValue) {
+            oldValue = newValue;
+            nodes = diffChildNodes(comment.parentNode, nodes, [newValue], comment);
+          } else if (newValue instanceof TemplatePart) {
+            oldValue = newValue;
+            nodes = diffChildNodes(comment.parentNode, nodes, [...newValue.childNodes], comment);
+          } else {
+            console.warn("Could not process value", newValue);
+          }
+        }
+        break;
+      case "function":
+        processNodeValue(newValue(comment));
+        break;
     }
-  }
-  clear(startNode = this.startNode) {
-    removeNodes(this.startNode.parentNode, startNode.nextSibling, this.endNode);
-  }
+  };
+  return processNodeValue;
 };
-var BooleanAttributePart = class {
-  constructor(element, name, strings) {
-    this.value = void 0;
-    this.__pendingValue = void 0;
-    if (strings.length !== 2 || strings[0] !== "" || strings[1] !== "") {
-      throw new Error("Boolean attributes can only contain a single expression");
+var ChildNodePart = class extends Part {
+  constructor(startNode, value) {
+    var _a;
+    if (startNode && (startNode == null ? void 0 : startNode.nodeType) !== COMMENT_NODE) {
+      throw new Error("ChildNodePart: startNode is not a comment node");
     }
-    this.element = element;
-    this.name = name;
-    this.strings = strings;
-  }
-  setValue(value) {
-    this.__pendingValue = value;
-  }
-  commit() {
-    while (isDirective(this.__pendingValue)) {
-      const directive2 = this.__pendingValue;
-      this.__pendingValue = noChange;
-      directive2(this);
+    super();
+    __publicField(this, "startNode");
+    __publicField(this, "endNode");
+    __publicField(this, "parts", []);
+    __publicField(this, "templatePart");
+    __publicField(this, "childNodes", []);
+    let serverSideRendered = false;
+    if (startNode) {
+      const placeholder = startNode.data;
+      const childNodes = [startNode];
+      let childNode = startNode.nextSibling;
+      while (childNode && childNode.data !== `/${placeholder}`) {
+        childNodes.push(childNode);
+        childNode = childNode.nextSibling;
+      }
+      const endNode = childNode;
+      childNodes.push(endNode);
+      if (childNodes.length > 2) {
+        serverSideRendered = true;
+      }
+      this.childNodes = childNodes;
+      this.startNode = startNode;
+      this.endNode = endNode;
     }
-    if (this.__pendingValue === noChange) {
-      return;
+    const initialValue = this.parseValue(value);
+    if (this.endNode) {
+      this.processor = processNodePart(this.endNode, serverSideRendered ? initialValue : void 0);
     }
-    const value = !!this.__pendingValue;
-    if (this.value !== value) {
-      if (value) {
-        this.element.setAttribute(this.name, "");
-      } else {
-        this.element.removeAttribute(this.name);
+    if (!serverSideRendered) {
+      if (value instanceof TemplateResult || Array.isArray(value)) {
+        this.updateParts(value);
       }
-      this.value = value;
+      this.childNodes = [...this.childNodes];
+      (_a = this.processor) == null ? void 0 : _a.call(this, initialValue);
     }
-    this.__pendingValue = noChange;
   }
-};
-var PropertyCommitter = class extends AttributeCommitter {
-  constructor(element, name, strings) {
-    super(element, name, strings);
-    this.single = strings.length === 2 && strings[0] === "" && strings[1] === "";
-  }
-  _createPart() {
-    return new PropertyPart(this);
-  }
-  _getValue() {
-    if (this.single) {
-      return this.parts[0].value;
+  update(value) {
+    var _a;
+    const parsedValue = this.parseValue(value);
+    if (value instanceof TemplateResult || Array.isArray(value)) {
+      this.updateParts(value);
     }
-    return super._getValue();
+    (_a = this.processor) == null ? void 0 : _a.call(this, parsedValue);
   }
-  commit() {
-    if (this.dirty) {
-      this.dirty = false;
-      this.element[this.name] = this._getValue();
+  updateParts(value) {
+    var _a;
+    if (value instanceof TemplateResult) {
+      this.templatePart.update(value);
     }
-  }
-};
-var PropertyPart = class extends AttributePart {
-};
-var eventOptionsSupported = false;
-(() => {
-  try {
-    const options = {
-      get capture() {
-        eventOptionsSupported = true;
-        return false;
+    if (Array.isArray(value)) {
+      for (let index = 0; index < value.length; index++) {
+        (_a = this.parts[index]) == null ? void 0 : _a.update(value[index]);
       }
-    };
-    window.addEventListener("test", options, options);
-    window.removeEventListener("test", options, options);
-  } catch (_e) {
-  }
-})();
-var EventPart = class {
-  constructor(element, eventName, eventContext) {
-    this.value = void 0;
-    this.__pendingValue = void 0;
-    this.element = element;
-    this.eventName = eventName;
-    this.eventContext = eventContext;
-    this.__boundHandleEvent = (e) => this.handleEvent(e);
-  }
-  setValue(value) {
-    this.__pendingValue = value;
-  }
-  commit() {
-    while (isDirective(this.__pendingValue)) {
-      const directive2 = this.__pendingValue;
-      this.__pendingValue = noChange;
-      directive2(this);
     }
-    if (this.__pendingValue === noChange) {
-      return;
+  }
+  parseValue(value) {
+    var _a;
+    if (value instanceof TemplateResult) {
+      if (!this.templatePart) {
+        const templatePartCommentNodes = (_a = this.childNodes) == null ? void 0 : _a.filter(
+          (node) => node && node.nodeType === COMMENT_NODE && node.data === "template-part"
+        );
+        const startNode = templatePartCommentNodes[0];
+        this.templatePart = new TemplatePart(startNode, value);
+      }
+      return this.templatePart;
     }
-    const newListener = this.__pendingValue;
-    const oldListener = this.value;
-    const shouldRemoveListener = newListener == null || oldListener != null && (newListener.capture !== oldListener.capture || newListener.once !== oldListener.once || newListener.passive !== oldListener.passive);
-    const shouldAddListener = newListener != null && (oldListener == null || shouldRemoveListener);
-    if (shouldRemoveListener) {
-      this.element.removeEventListener(this.eventName, this.__boundHandleEvent, this.__options);
+    if (Array.isArray(value)) {
+      return this.parseArray(value);
     }
-    if (shouldAddListener) {
-      this.__options = getOptions(newListener);
-      this.element.addEventListener(this.eventName, this.__boundHandleEvent, this.__options);
+    return value;
+  }
+  parseArray(values) {
+    var _a, _b;
+    const parsedValues = [];
+    for (let index = 0; index < values.length; index++) {
+      let value = values[index];
+      if (value instanceof TemplateResult) {
+        let templatePart = this.parts[index];
+        if (!templatePart) {
+          const templatePartCommentNodes = (_a = this.childNodes) == null ? void 0 : _a.filter(
+            (node) => node && node.nodeType === COMMENT_NODE && node.data === "template-part"
+          );
+          const startNode = templatePartCommentNodes[index];
+          templatePart = new TemplatePart(startNode, value);
+          this.parts[index] = templatePart;
+        }
+        parsedValues[index] = templatePart;
+      } else if (Array.isArray(value)) {
+        let childNodePart = this.parts[index];
+        if (!childNodePart) {
+          const templatePartCommentNodes = (_b = this.childNodes) == null ? void 0 : _b.filter(
+            (node) => node && node.nodeType === COMMENT_NODE && node.data === "template-part"
+          );
+          const startNode = templatePartCommentNodes[index];
+          childNodePart = new ChildNodePart(startNode, value);
+          this.parts[index] = childNodePart;
+        }
+        parsedValues[index] = childNodePart;
+      } else {
+        parsedValues[index] = typeof value === "function" ? value() : value;
+      }
     }
-    this.value = newListener;
-    this.__pendingValue = noChange;
+    return parsedValues;
   }
-  handleEvent(event) {
-    if (typeof this.value === "function") {
-      this.value.call(this.eventContext || this.element, event);
-    } else {
-      this.value.handleEvent(event);
+};
+
+// src/dom-parts/NodePart.js
+var NodePart = class extends Part {
+  constructor(node, initialValue) {
+    if (!isObjectLike(initialValue) && !initialValue.directiveClass) {
+      throw new Error(
+        "NodePart: value is not a wrapped directive function. You must wrap you custom directive class with the defineDirective function."
+      );
     }
+    super();
+    __publicField(this, "node");
+    __publicField(this, "directive");
+    this.node = node.nextElementSibling;
+    const { directiveClass, values } = initialValue;
+    this.directive = new directiveClass(node.nextElementSibling);
+  }
+  update(value) {
+    const { directiveClass, values } = value;
+    this.directive.update(...values);
   }
 };
-var getOptions = (o) => o && (eventOptionsSupported ? {capture: o.capture, passive: o.passive, once: o.once} : o.capture);
 
-// node_modules/lit-html/lib/default-template-processor.js
-/**
- * @license
- * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
- * This code may only be used under the BSD style license found at
- * http://polymer.github.io/LICENSE.txt
- * The complete set of authors may be found at
- * http://polymer.github.io/AUTHORS.txt
- * The complete set of contributors may be found at
- * http://polymer.github.io/CONTRIBUTORS.txt
- * Code distributed by Google as part of the polymer project is also
- * subject to an additional IP rights grant found at
- * http://polymer.github.io/PATENTS.txt
- */
-var DefaultTemplateProcessor = class {
-  handleAttributeExpressions(element, name, strings, options) {
-    const prefix = name[0];
-    if (prefix === ".") {
-      const committer2 = new PropertyCommitter(element, name.slice(1), strings);
-      return committer2.parts;
+// src/dom-parts/TemplatePart.js
+var partsCache = /* @__PURE__ */ new WeakMap();
+var fragmentsCache = /* @__PURE__ */ new WeakMap();
+var TemplatePart = class extends Part {
+  constructor(startNode, value) {
+    if (startNode && (startNode == null ? void 0 : startNode.nodeType) !== COMMENT_NODE) {
+      throw new Error("TemplatePart: startNode is not a comment node");
     }
-    if (prefix === "@") {
-      return [new EventPart(element, name.slice(1), options.eventContext)];
+    super();
+    __publicField(this, "parts", []);
+    __publicField(this, "strings");
+    __publicField(this, "childNodes", []);
+    let serverSideRendered = false;
+    if (startNode) {
+      const placeholder = startNode.data;
+      const childNodes = [startNode];
+      let childNode = startNode.nextSibling;
+      while (childNode && childNode.data !== `/${placeholder}`) {
+        childNodes.push(childNode);
+        childNode = childNode.nextSibling;
+      }
+      const endNode = childNode;
+      childNodes.push(endNode);
+      if (childNodes.length > 2) {
+        serverSideRendered = true;
+        this.childNodes = childNodes;
+      }
     }
-    if (prefix === "?") {
-      return [new BooleanAttributePart(element, name.slice(1), strings)];
+    this.parseValue(value);
+    if (!serverSideRendered) {
+      this.updateParts(value.values);
+      this.childNodes = [...this.childNodes];
     }
-    const committer = new AttributeCommitter(element, name, strings);
-    return committer.parts;
   }
-  handleTextExpression(options) {
-    return new NodePart(options);
+  update(value) {
+    this.parseValue(value);
+    this.updateParts(value.values);
   }
-};
-var defaultTemplateProcessor = new DefaultTemplateProcessor();
-
-// node_modules/lit-html/lib/template-factory.js
-/**
- * @license
- * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
- * This code may only be used under the BSD style license found at
- * http://polymer.github.io/LICENSE.txt
- * The complete set of authors may be found at
- * http://polymer.github.io/AUTHORS.txt
- * The complete set of contributors may be found at
- * http://polymer.github.io/CONTRIBUTORS.txt
- * Code distributed by Google as part of the polymer project is also
- * subject to an additional IP rights grant found at
- * http://polymer.github.io/PATENTS.txt
- */
-function templateFactory(result) {
-  let templateCache = templateCaches.get(result.type);
-  if (templateCache === void 0) {
-    templateCache = {
-      stringsArray: new WeakMap(),
-      keyString: new Map()
-    };
-    templateCaches.set(result.type, templateCache);
+  updateParts(values) {
+    var _a;
+    for (let index = 0; index < values.length; index++) {
+      (_a = this.parts[index]) == null ? void 0 : _a.update(values[index]);
+    }
   }
-  let template = templateCache.stringsArray.get(result.strings);
-  if (template !== void 0) {
-    return template;
+  parseValue(templateResult) {
+    var _a;
+    if (this.strings !== templateResult.strings) {
+      if (this.childNodes.length === 0) {
+        let fragment = fragmentsCache.get(templateResult.strings);
+        if (!fragment) {
+          fragment = this.parseFragment(templateResult);
+          fragmentsCache.set(templateResult.strings, fragment);
+        }
+        const importedFragment = (_a = globalThis.document) == null ? void 0 : _a.importNode(fragment, true);
+        this.childNodes = importedFragment.childNodes;
+      }
+      let parts = partsCache.get(templateResult.strings);
+      if (!parts) {
+        parts = templateResult.parseParts(this.childNodes);
+        partsCache.set(templateResult.strings, parts);
+      }
+      let previousAttributePart = void 0;
+      this.parts = parts.map((part, index) => {
+        const node = part.path.reduceRight(({ childNodes }, i) => childNodes[i], this);
+        if (part.type === "node") {
+          return new ChildNodePart(node, templateResult.values[index]);
+        }
+        if (part.type === "attribute") {
+          if (previousAttributePart && previousAttributePart.name === part.name) {
+            previousAttributePart.addNode(node);
+            return previousAttributePart;
+          }
+          return previousAttributePart = new AttributePart(node, part.name, part.initialValue);
+        }
+        if (part.type === "directive") {
+          return new NodePart(node, templateResult.values[index]);
+        }
+        throw `cannot map part: ${part}`;
+      });
+      this.strings = templateResult.strings;
+    }
   }
-  const key = result.strings.join(marker);
-  template = templateCache.keyString.get(key);
-  if (template === void 0) {
-    template = new Template(result, result.getTemplateElement());
-    templateCache.keyString.set(key, template);
+  parseFragment(templateResult) {
+    const templateString = templateResult.templateString;
+    return convertStringToTemplate(templateString);
   }
-  templateCache.stringsArray.set(result.strings, template);
-  return template;
-}
-var templateCaches = new Map();
-
-// node_modules/lit-html/lib/render.js
-/**
- * @license
- * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
- * This code may only be used under the BSD style license found at
- * http://polymer.github.io/LICENSE.txt
- * The complete set of authors may be found at
- * http://polymer.github.io/AUTHORS.txt
- * The complete set of contributors may be found at
- * http://polymer.github.io/CONTRIBUTORS.txt
- * Code distributed by Google as part of the polymer project is also
- * subject to an additional IP rights grant found at
- * http://polymer.github.io/PATENTS.txt
- */
-var parts = new WeakMap();
-var render = (result, container, options) => {
-  let part = parts.get(container);
-  if (part === void 0) {
-    removeNodes(container, container.firstChild);
-    parts.set(container, part = new NodePart(Object.assign({templateFactory}, options)));
-    part.appendInto(container);
-  }
-  part.setValue(result);
-  part.commit();
 };
 
-// node_modules/lit-html/lit-html.js
-/**
- * @license
- * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
- * This code may only be used under the BSD style license found at
- * http://polymer.github.io/LICENSE.txt
- * The complete set of authors may be found at
- * http://polymer.github.io/AUTHORS.txt
- * The complete set of contributors may be found at
- * http://polymer.github.io/CONTRIBUTORS.txt
- * Code distributed by Google as part of the polymer project is also
- * subject to an additional IP rights grant found at
- * http://polymer.github.io/PATENTS.txt
- */
-if (typeof window !== "undefined") {
-  (window["litHtmlVersions"] || (window["litHtmlVersions"] = [])).push("1.2.1");
-}
-var html = (strings, ...values) => new TemplateResult(strings, values, "html", defaultTemplateProcessor);
-
-// node_modules/lit-html/lib/modify-template.js
-/**
- * @license
- * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
- * This code may only be used under the BSD style license found at
- * http://polymer.github.io/LICENSE.txt
- * The complete set of authors may be found at
- * http://polymer.github.io/AUTHORS.txt
- * The complete set of contributors may be found at
- * http://polymer.github.io/CONTRIBUTORS.txt
- * Code distributed by Google as part of the polymer project is also
- * subject to an additional IP rights grant found at
- * http://polymer.github.io/PATENTS.txt
- */
-var walkerNodeFilter = 133;
-function removeNodesFromTemplate(template, nodesToRemove) {
-  const {element: {content}, parts: parts2} = template;
-  const walker = document.createTreeWalker(content, walkerNodeFilter, null, false);
-  let partIndex = nextActiveIndexInTemplateParts(parts2);
-  let part = parts2[partIndex];
-  let nodeIndex = -1;
-  let removeCount = 0;
-  const nodesToRemoveInTemplate = [];
-  let currentRemovingNode = null;
-  while (walker.nextNode()) {
-    nodeIndex++;
-    const node = walker.currentNode;
-    if (node.previousSibling === currentRemovingNode) {
-      currentRemovingNode = null;
-    }
-    if (nodesToRemove.has(node)) {
-      nodesToRemoveInTemplate.push(node);
-      if (currentRemovingNode === null) {
-        currentRemovingNode = node;
+// src/dom-parts/TemplateResult.js
+var voidElements = /^(?:area|base|br|col|embed|hr|img|input|link|meta|source|track|wbr)$/i;
+var elements = /<([a-z]+[a-z0-9:._-]*)([^>]*?)(\/?)>/g;
+var attributes = /([^\s]*)=((?:")[^"]*(?:")|(?:')[^']*(?:')|[^\s\/>]*)|([^\s\/>]*)/g;
+var partPositions = /[\x01\x02]/g;
+var interpolation = new RegExp(`(<!--dom-part-(\\d+)--><!--/dom-part-(\\d+)-->|(\\S\\w+)="(")?|)`, "g");
+var createTemplateString = (templateStrings, attributePlaceholders = "") => {
+  let partIndex = 0;
+  let template = templateStrings.join("
").trim();
+  template = template.replace(elements, (_, name, attributesString, trailingSlash) => {
+    let elementTagWithAttributes = name + attributesString.replaceAll("
", attributePlaceholders).trimEnd();
+    if (trailingSlash.length)
+      elementTagWithAttributes += voidElements.test(name) ? " /" : "></" + name;
+    const attributeParts = attributesString.replace(attributes, (attribute2, name2, valueWithQuotes, directive) => {
+      if (directive) {
+        return `<!--$-->`;
       }
+      const value = (valueWithQuotes == null ? void 0 : valueWithQuotes.startsWith('"')) || (valueWithQuotes == null ? void 0 : valueWithQuotes.startsWith("'")) ? valueWithQuotes.slice(1, -1) : valueWithQuotes;
+      const partsCount = (attribute2.match(/\x01/g) || []).length;
+      const parts = [];
+      for (let index = 0; index < partsCount; index++) {
+        parts.push(`<!--:${name2}=${value.replaceAll("
", "")}-->`);
+      }
+      return parts.join("");
+    });
+    return `
+				${attributesString.includes("
") ? attributeParts : ""}
+				<${elementTagWithAttributes}>
+			`;
+  });
+  template = template.replace(partPositions, (partPosition) => {
+    if (partPosition === "
") {
+      return `<!--dom-part-${partIndex}--><!--/dom-part-${partIndex++}-->`;
     }
-    if (currentRemovingNode !== null) {
-      removeCount++;
-    }
-    while (part !== void 0 && part.index === nodeIndex) {
-      part.index = currentRemovingNode !== null ? -1 : part.index - removeCount;
-      partIndex = nextActiveIndexInTemplateParts(parts2, partIndex);
-      part = parts2[partIndex];
+    if (partPosition === "") {
+      return `dom-part-${partIndex++}`;
     }
-  }
-  nodesToRemoveInTemplate.forEach((n) => n.parentNode.removeChild(n));
-}
-var countNodes = (node) => {
-  let count = node.nodeType === 11 ? 0 : 1;
-  const walker = document.createTreeWalker(node, walkerNodeFilter, null, false);
-  while (walker.nextNode()) {
-    count++;
-  }
-  return count;
+  });
+  return `
+		<!--template-part-->
+		${template}
+		<!--/template-part-->
+	`;
 };
-var nextActiveIndexInTemplateParts = (parts2, startIndex = -1) => {
-  for (let i = startIndex + 1; i < parts2.length; i++) {
-    const part = parts2[i];
-    if (isTemplatePartActive(part)) {
-      return i;
-    }
+var attribute = (name, value, isSingleValue = true) => {
+  return ` ${name}="${encodeAttribute(isObjectLike(value) ? JSON.stringify(value) : value)}${isSingleValue ? '"' : ""}`;
+};
+var getValue = (value) => {
+  switch (typeof value) {
+    case "string":
+      return encodeAttribute(value);
+    case "boolean":
+    case "number":
+      return String(value);
+    case "object":
+      switch (true) {
+        case Array.isArray(value):
+          return value.map(getValue).join("");
+        case value instanceof TemplateResult:
+          return value.toString();
+      }
+      break;
+    case "function":
+      return getValue(value());
   }
-  return -1;
+  return value == null ? "" : encodeAttribute(String(value));
 };
-function insertNodeIntoTemplate(template, node, refNode = null) {
-  const {element: {content}, parts: parts2} = template;
-  if (refNode === null || refNode === void 0) {
-    content.appendChild(node);
-    return;
-  }
-  const walker = document.createTreeWalker(content, walkerNodeFilter, null, false);
-  let partIndex = nextActiveIndexInTemplateParts(parts2);
-  let insertCount = 0;
-  let walkerIndex = -1;
-  while (walker.nextNode()) {
-    walkerIndex++;
-    const walkerNode = walker.currentNode;
-    if (walkerNode === refNode) {
-      insertCount = countNodes(node);
-      refNode.parentNode.insertBefore(node, refNode);
+var parsedUpdates = /* @__PURE__ */ new WeakMap();
+var templateParts = /* @__PURE__ */ new WeakMap();
+var TemplateResult = class {
+  constructor(strings, ...values) {
+    this.strings = strings;
+    this.values = values;
+  }
+  renderInto(domNode) {
+    let serverSideRendered = false;
+    let templatePart = templateParts.get(domNode);
+    if (!templatePart) {
+      const startNode = Array.from(domNode.childNodes).filter((node) => node.nodeType === COMMENT_NODE).find((node) => node.data === "template-part");
+      serverSideRendered = startNode !== void 0;
+      templatePart = new TemplatePart(startNode, this);
+      templateParts.set(domNode, templatePart);
+      if (!serverSideRendered) {
+        domNode.replaceChildren(...templatePart.childNodes);
+      }
+    } else {
+      templatePart.update(this);
     }
-    while (partIndex !== -1 && parts2[partIndex].index === walkerIndex) {
-      if (insertCount > 0) {
-        while (partIndex !== -1) {
-          parts2[partIndex].index += insertCount;
-          partIndex = nextActiveIndexInTemplateParts(parts2, partIndex);
+  }
+  parse(strings) {
+    const html2 = createTemplateString(strings, "");
+    const parts = [];
+    let i = 0;
+    let match = null;
+    while (match = interpolation.exec(html2)) {
+      const pre = html2.slice(i, match.index);
+      i = match.index + match[0].length;
+      if (match[2]) {
+        const index = match[2];
+        parts.push((value) => `${pre}<!--dom-part-${index}-->${getValue(value)}<!--/dom-part-${index}-->`);
+      } else if (match[4]) {
+        const isSingleValue = match[5] !== void 0;
+        let name = match[4];
+        switch (true) {
+          case name[0] === "?":
+            const booleanName = name.slice(1).toLowerCase();
+            parts.push((value) => {
+              if (!value)
+                return "";
+              return `${pre} ${booleanName}=""`;
+            });
+            break;
+          case name[0] === ".":
+            const lower = name.slice(1).toLowerCase();
+            parts.push((value) => {
+              let result = pre;
+              if (value === null || value === void 0 || value === "") {
+                result += attribute(lower, "");
+              } else {
+                result += attribute(lower, value, isSingleValue);
+              }
+              return result;
+            });
+            break;
+          case name[0] === "@":
+            name = "on" + name.slice(1);
+          case (name[0] === "o" && name[1] === "n"):
+            parts.push((value) => {
+              return pre;
+            });
+            break;
+          default:
+            parts.push((value) => {
+              let result = pre;
+              if (value != null) {
+                result += attribute(name, value, isSingleValue);
+              }
+              return result;
+            });
+            break;
         }
-        return;
+      } else {
+        parts.push((value) => {
+          let result = pre;
+          if (isObjectLike(value) && value.directiveClass) {
+          } else if (value != null) {
+            result += encodeAttribute(isObjectLike(value) ? JSON.stringify(value) : value);
+          }
+          return result;
+        });
       }
-      partIndex = nextActiveIndexInTemplateParts(parts2, partIndex);
     }
+    if (parts.length !== strings.length - 1) {
+      throw {
+        name: "ParseTemplateError",
+        message: "Could not parse parts from template correctly. Parts length has not the expected length.",
+        strings,
+        templateString: html2,
+        parts
+      };
+    }
+    if (parts.length) {
+      const last = parts[parts.length - 1];
+      const chunk = html2.slice(i);
+      parts[parts.length - 1] = (value) => last(value) + chunk;
+    } else {
+      parts.push(() => html2);
+    }
+    return parts;
   }
-}
-
-// node_modules/lit-html/lib/shady-render.js
-/**
- * @license
- * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
- * This code may only be used under the BSD style license found at
- * http://polymer.github.io/LICENSE.txt
- * The complete set of authors may be found at
- * http://polymer.github.io/AUTHORS.txt
- * The complete set of contributors may be found at
- * http://polymer.github.io/CONTRIBUTORS.txt
- * Code distributed by Google as part of the polymer project is also
- * subject to an additional IP rights grant found at
- * http://polymer.github.io/PATENTS.txt
- */
-var getTemplateCacheKey = (type, scopeName) => `${type}--${scopeName}`;
-var compatibleShadyCSSVersion = true;
-if (typeof window.ShadyCSS === "undefined") {
-  compatibleShadyCSSVersion = false;
-} else if (typeof window.ShadyCSS.prepareTemplateDom === "undefined") {
-  console.warn(`Incompatible ShadyCSS version detected. Please update to at least @webcomponents/webcomponentsjs@2.0.2 and @webcomponents/shadycss@1.3.1.`);
-  compatibleShadyCSSVersion = false;
-}
-var shadyTemplateFactory = (scopeName) => (result) => {
-  const cacheKey = getTemplateCacheKey(result.type, scopeName);
-  let templateCache = templateCaches.get(cacheKey);
-  if (templateCache === void 0) {
-    templateCache = {
-      stringsArray: new WeakMap(),
-      keyString: new Map()
+  parseParts(childNodes) {
+    var _a, _b;
+    const range = (_a = globalThis.document) == null ? void 0 : _a.createRange();
+    range.setStartBefore(childNodes[0]);
+    range.setEndAfter(childNodes[childNodes.length - 1]);
+    const template = range.cloneContents();
+    const treeWalker = (_b = globalThis.document) == null ? void 0 : _b.createTreeWalker(template, 128);
+    let node = treeWalker.currentNode;
+    const getParts = () => {
+      const parts2 = [];
+      let currentPart = void 0;
+      while (node = treeWalker.nextNode()) {
+        if (/^template-part$/.test(node.data) && currentPart) {
+          currentPart.parts = getParts();
+        }
+        if (/^\/template-part$/.test(node.data)) {
+          return parts2;
+        }
+        if (/^dom-part-\d+$/.test(node.data)) {
+          parts2.push(currentPart = { type: "node", path: getNodePath(node), parts: [] });
+        }
+        if (/^dom-part-\d+:/.test(node.data)) {
+          const [_, attribute2] = node.data.split(":");
+          const [name, initialValue] = attribute2.split("=");
+          currentPart = void 0;
+          parts2.push({ type: "attribute", path: getNodePath(node), name, initialValue });
+        }
+        if (/^dom-part-\d+\$/.test(node.data)) {
+          currentPart = void 0;
+          parts2.push({ type: "directive", path: getNodePath(node) });
+        }
+      }
+      return parts2;
     };
-    templateCaches.set(cacheKey, templateCache);
-  }
-  let template = templateCache.stringsArray.get(result.strings);
-  if (template !== void 0) {
-    return template;
-  }
-  const key = result.strings.join(marker);
-  template = templateCache.keyString.get(key);
-  if (template === void 0) {
-    const element = result.getTemplateElement();
-    if (compatibleShadyCSSVersion) {
-      window.ShadyCSS.prepareTemplateDom(element, scopeName);
-    }
-    template = new Template(result, element);
-    templateCache.keyString.set(key, template);
+    const parts = getParts();
+    if (parts.length !== this.strings.length - 1) {
+      throw {
+        name: "ParseTemplateError",
+        message: "Could not parse parts from template correctly. Parts length has not the expected length. -> " + JSON.stringify({
+          strings: this.strings,
+          templateString: this.templateString,
+          childNodes,
+          template,
+          parts
+        })
+      };
+    }
+    return parts;
+  }
+  get templateString() {
+    return createTemplateString(this.strings);
   }
-  templateCache.stringsArray.set(result.strings, template);
-  return template;
-};
-var TEMPLATE_TYPES = ["html", "svg"];
-var removeStylesFromLitTemplates = (scopeName) => {
-  TEMPLATE_TYPES.forEach((type) => {
-    const templates = templateCaches.get(getTemplateCacheKey(type, scopeName));
-    if (templates !== void 0) {
-      templates.keyString.forEach((template) => {
-        const {element: {content}} = template;
-        const styles = new Set();
-        Array.from(content.querySelectorAll("style")).forEach((s) => {
-          styles.add(s);
-        });
-        removeNodesFromTemplate(template, styles);
-      });
+  toString() {
+    let updates = parsedUpdates.get(this.strings);
+    if (!updates) {
+      updates = this.parse(this.strings);
+      parsedUpdates.set(this.strings, updates);
     }
-  });
-};
-var shadyRenderSet = new Set();
-var prepareTemplateStyles = (scopeName, renderedDOM, template) => {
-  shadyRenderSet.add(scopeName);
-  const templateElement = !!template ? template.element : document.createElement("template");
-  const styles = renderedDOM.querySelectorAll("style");
-  const {length} = styles;
-  if (length === 0) {
-    window.ShadyCSS.prepareTemplateStyles(templateElement, scopeName);
-    return;
-  }
-  const condensedStyle = document.createElement("style");
-  for (let i = 0; i < length; i++) {
-    const style2 = styles[i];
-    style2.parentNode.removeChild(style2);
-    condensedStyle.textContent += style2.textContent;
-  }
-  removeStylesFromLitTemplates(scopeName);
-  const content = templateElement.content;
-  if (!!template) {
-    insertNodeIntoTemplate(template, condensedStyle, content.firstChild);
-  } else {
-    content.insertBefore(condensedStyle, content.firstChild);
-  }
-  window.ShadyCSS.prepareTemplateStyles(templateElement, scopeName);
-  const style = content.querySelector("style");
-  if (window.ShadyCSS.nativeShadow && style !== null) {
-    renderedDOM.insertBefore(style.cloneNode(true), renderedDOM.firstChild);
-  } else if (!!template) {
-    content.insertBefore(condensedStyle, content.firstChild);
-    const removes = new Set();
-    removes.add(condensedStyle);
-    removeNodesFromTemplate(template, removes);
+    return this.values.length ? this.values.map((value, index) => updates[index](value)).join("") : updates[0]();
   }
 };
-var render2 = (result, container, options) => {
-  if (!options || typeof options !== "object" || !options.scopeName) {
-    throw new Error("The `scopeName` option is required.");
-  }
-  const scopeName = options.scopeName;
-  const hasRendered = parts.has(container);
-  const needsScoping = compatibleShadyCSSVersion && container.nodeType === 11 && !!container.host;
-  const firstScopeRender = needsScoping && !shadyRenderSet.has(scopeName);
-  const renderContainer = firstScopeRender ? document.createDocumentFragment() : container;
-  render(result, renderContainer, Object.assign({templateFactory: shadyTemplateFactory(scopeName)}, options));
-  if (firstScopeRender) {
-    const part = parts.get(renderContainer);
-    parts.delete(renderContainer);
-    const template = part.value instanceof TemplateInstance ? part.value.template : void 0;
-    prepareTemplateStyles(scopeName, renderContainer, template);
-    removeNodes(container, container.firstChild);
-    container.appendChild(renderContainer);
-    parts.set(container, part);
-  }
-  if (!hasRendered && needsScoping) {
-    window.ShadyCSS.styleElement(container.host);
-  }
+
+// src/dom-parts/html.js
+var html = function(strings, ...values) {
+  return new TemplateResult(strings, ...values);
+};
+
+// src/dom-parts/render.js
+var render = (template, domNode) => {
+  template.renderInto(domNode);
 };
 
 // src/TemplateElement.js
@@ -1594,7 +1296,7 @@ var TemplateElement = class extends StyledElement {
     });
     this._template = this._options.template;
     if (this._options.shadowRender)
-      this.attachShadow({mode: "open"});
+      this.attachShadow({ mode: "open" });
   }
   template() {
     return html``;
@@ -1608,10 +1310,7 @@ var TemplateElement = class extends StyledElement {
     if (typeof template === "string") {
       this.getRoot().innerHTML = `${template}`;
     } else {
-      render2(html` ${template} `, this.getRoot(), {
-        scopeName: this.localName,
-        eventContext: this
-      });
+      render(template, this.getRoot());
     }
   }
   getRoot() {