@dooboostore/simple-web-component 1.0.5 → 1.0.6

package/dist/esm-bundle/dooboostore-simple-web-component.esm.js

@@ -1167,43 +1167,6 @@ var ReflectUtils;
   };
 })(ReflectUtils || (ReflectUtils = {}));
 
-// src/decorators/attributeChanged.ts
-var ATTRIBUTE_CHANGED_METADATA_KEY = Symbol("simple-web-component:attribute-changed");
-var ATTRIBUTE_CHANGED_WILDCARD = "*";
-function attributeChanged(arg1, arg2, arg3) {
-  const decorator = (attributeName, target, propertyKey) => {
-    const constructor = target.constructor;
-    let meta = ReflectUtils.getMetadata(ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
-    if (!meta) {
-      meta = /* @__PURE__ */ new Map();
-      ReflectUtils.defineMetadata(ATTRIBUTE_CHANGED_METADATA_KEY, meta, constructor);
-    }
-    let methods = meta.get(attributeName);
-    if (!methods) {
-      methods = [];
-      meta.set(attributeName, methods);
-    }
-    if (!methods.includes(propertyKey)) {
-      methods.push(propertyKey);
-    }
-  };
-  if (typeof arg1 === "string") {
-    return (target, propertyKey) => {
-      decorator(arg1, target, propertyKey);
-    };
-  } else if (Array.isArray(arg1)) {
-    return (target, propertyKey) => {
-      arg1.forEach((name) => decorator(name, target, propertyKey));
-    };
-  } else if (arg1 && arg2) {
-    decorator(ATTRIBUTE_CHANGED_WILDCARD, arg1, arg2);
-  }
-}
-var getAttributeChangedMap = (target) => {
-  const constructor = target instanceof Function ? target : target.constructor;
-  return ReflectUtils.getMetadata(ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
-};
-
 // src/decorators/innerHtml.ts
 var INNER_HTML_METADATA_KEY = Symbol("simple-web-component:inner-html");
 function innerHtml(arg1, arg2, arg3) {
@@ -1288,9 +1251,10 @@ var getQueryAllMetadata = (target) => {
 
 // src/decorators/addEventListener.ts
 var ADD_EVENT_LISTENER_METADATA_KEY = Symbol("simple-web-component:add-event-listener");
-var addEventListener = (options) => {
+function addEventListener(arg1, arg2) {
   return (target, propertyKey, descriptor) => {
     const constructor = target.constructor;
+    const options = typeof arg1 === "string" ? { type: arg1, query: arg2 } : arg1;
     let listeners = ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
     if (!listeners) {
       listeners = [];
@@ -1298,7 +1262,7 @@ var addEventListener = (options) => {
     }
     listeners.push({ options, propertyKey });
   };
-};
+}
 var getAddEventListenerMetadata = (target) => {
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
@@ -1311,6 +1275,9 @@ var ON_BEFORE_DISCONNECTED_METADATA_KEY = Symbol("simple-web-component:on-before
 var ON_AFTER_DISCONNECTED_METADATA_KEY = Symbol("simple-web-component:on-after-disconnected");
 var ON_BEFORE_ADOPTED_METADATA_KEY = Symbol("simple-web-component:on-before-adopted");
 var ON_AFTER_ADOPTED_METADATA_KEY = Symbol("simple-web-component:on-after-adopted");
+var ON_ADD_EVENT_LISTENER_METADATA_KEY = Symbol("simple-web-component:on-add-event-listener");
+var ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol("simple-web-component:on-attribute-changed");
+var ATTRIBUTE_CHANGED_WILDCARD = "*";
 function createLifecycleDecorator(metadataKey) {
   return (target, propertyKey) => {
     const constructor = target.constructor;
@@ -1331,13 +1298,258 @@ var onDisconnected = onAfterDisconnected;
 var onBeforeAdopted = createLifecycleDecorator(ON_BEFORE_ADOPTED_METADATA_KEY);
 var onAfterAdopted = createLifecycleDecorator(ON_AFTER_ADOPTED_METADATA_KEY);
 var onAdopted = onAfterAdopted;
+var onAddEventListener = createLifecycleDecorator(ON_ADD_EVENT_LISTENER_METADATA_KEY);
+function onAttributeChanged(arg1, arg2, arg3) {
+  const decorator = (attributeName, target, propertyKey) => {
+    const constructor = target.constructor;
+    let meta = ReflectUtils.getMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
+    if (!meta) {
+      meta = /* @__PURE__ */ new Map();
+      ReflectUtils.defineMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, meta, constructor);
+    }
+    let methods = meta.get(attributeName);
+    if (!methods) {
+      methods = [];
+      meta.set(attributeName, methods);
+    }
+    if (!methods.includes(propertyKey)) {
+      methods.push(propertyKey);
+    }
+  };
+  if (typeof arg1 === "string") {
+    return (target, propertyKey) => {
+      decorator(arg1, target, propertyKey);
+    };
+  } else if (Array.isArray(arg1)) {
+    return (target, propertyKey) => {
+      arg1.forEach((name) => decorator(name, target, propertyKey));
+    };
+  } else if (arg1 && arg2) {
+    decorator(ATTRIBUTE_CHANGED_WILDCARD, arg1, arg2);
+  }
+}
 var getLifecycleMetadata = (target, metadataKey) => {
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(metadataKey, constructor);
 };
 
+// src/decorators/attribute.ts
+var ATTRIBUTE_METADATA_KEY = Symbol("simple-web-component:attribute");
+function attribute(nameOrOptions) {
+  return (target, propertyKey) => {
+    const constructor = target.constructor;
+    const options = typeof nameOrOptions === "string" ? { name: nameOrOptions } : nameOrOptions || {};
+    if (!options.name) options.name = String(propertyKey);
+    if (!options.type) options.type = String;
+    if (options.disableReflect === void 0) options.disableReflect = false;
+    let list = ReflectUtils.getMetadata(ATTRIBUTE_METADATA_KEY, constructor);
+    if (!list) {
+      list = [];
+      ReflectUtils.defineMetadata(ATTRIBUTE_METADATA_KEY, list, constructor);
+    }
+    list.push({ propertyKey, options });
+    const internalKey = Symbol(String(propertyKey));
+    Object.defineProperty(target, propertyKey, {
+      get() {
+        return this[internalKey];
+      },
+      set(val) {
+        const oldVal = this[internalKey];
+        if (oldVal === val) return;
+        let convertedVal = val;
+        if (options.type === Number) convertedVal = Number(val);
+        else if (options.type === Boolean) convertedVal = Boolean(val);
+        else if (options.type === Object && typeof val === "string") {
+          try {
+            convertedVal = JSON.parse(val);
+          } catch (e) {
+            convertedVal = val;
+          }
+        }
+        this[internalKey] = convertedVal;
+        if (!options.disableReflect && this.setAttribute) {
+          if (convertedVal === null || convertedVal === void 0 || convertedVal === false) {
+            this.removeAttribute(options.name);
+          } else {
+            const attrVal = typeof convertedVal === "object" ? JSON.stringify(convertedVal) : String(convertedVal);
+            if (this.getAttribute(options.name) !== attrVal) {
+              this.setAttribute(options.name, attrVal);
+            }
+          }
+        }
+      },
+      enumerable: true,
+      configurable: true
+    });
+  };
+}
+var getAttributeMetadataList = (target) => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(ATTRIBUTE_METADATA_KEY, constructor);
+};
+
+// src/decorators/state.ts
+var STATE_METADATA_KEY = Symbol("simple-web-component:state");
+function state(arg1, arg2) {
+  const decorator = (options, target, propertyKey) => {
+    const constructor = target.constructor;
+    if (!options.name) options.name = String(propertyKey);
+    let list = ReflectUtils.getMetadata(STATE_METADATA_KEY, constructor);
+    if (!list) {
+      list = [];
+      ReflectUtils.defineMetadata(STATE_METADATA_KEY, list, constructor);
+    }
+    list.push({ propertyKey, options });
+  };
+  if (arg2) {
+    return decorator({}, arg1, arg2);
+  }
+  return (target, propertyKey) => {
+    const options = typeof arg1 === "string" ? { name: arg1 } : arg1 || {};
+    decorator(options, target, propertyKey);
+  };
+}
+var getStateMetadataList = (target) => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(STATE_METADATA_KEY, constructor);
+};
+
+// src/decorators/emitCustomEvent.ts
+var EMIT_CUSTOM_EVENT_METADATA_KEY = Symbol("simple-web-component:emit-custom-event");
+function emitCustomEvent(typeOrOptions) {
+  return (target, propertyKey, descriptor) => {
+    const constructor = target.constructor;
+    const options = typeof typeOrOptions === "string" ? { type: typeOrOptions } : typeOrOptions;
+    if (!options.attributeName) {
+      options.attributeName = `on${options.type}`;
+    }
+    if (options.bubbles === void 0) options.bubbles = true;
+    if (options.composed === void 0) options.composed = true;
+    let list = ReflectUtils.getMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, constructor);
+    if (!list) {
+      list = [];
+      ReflectUtils.defineMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, list, constructor);
+    }
+    list.push({ propertyKey, options });
+    const originalMethod = descriptor.value;
+    descriptor.value = function(...args) {
+      const detail = originalMethod.apply(this, args);
+      const event = new CustomEvent(options.type, {
+        detail,
+        bubbles: options.bubbles,
+        composed: options.composed,
+        cancelable: options.cancelable
+      });
+      this.dispatchEvent(event);
+      return detail;
+    };
+  };
+}
+var getEmitCustomEventMetadataList = (target) => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, constructor);
+};
+
+// src/utils/Utils.ts
+var SwcUtils = class _SwcUtils {
+  static getValueByPath(obj, path, asKey) {
+    if (!obj || !path) return void 0;
+    const parts = path.split(".");
+    let result = obj;
+    let success = true;
+    for (const part of parts) {
+      if (result !== null && typeof result === "object" && part in result) {
+        result = result[part];
+      } else {
+        success = false;
+        break;
+      }
+    }
+    if (success && result !== obj && !(result instanceof HTMLElement)) {
+      return result;
+    }
+    if (path === asKey) return obj;
+    if (path.startsWith(asKey + ".")) {
+      const subParts = parts.slice(1);
+      let subResult = obj;
+      for (const part of subParts) {
+        if (subResult !== null && typeof subResult === "object" && part in subResult) {
+          subResult = subResult[part];
+        } else {
+          return void 0;
+        }
+      }
+      return subResult;
+    }
+    if (obj instanceof HTMLElement && obj.parentElement) {
+    }
+    return void 0;
+  }
+  static applyData(node, data, options) {
+    const { asKey, asIndexKey, index } = options;
+    const context = {};
+    if (index !== void 0) {
+      context[asIndexKey] = index.toString();
+    }
+    const walk = (n) => {
+      if (n.nodeType === Node.TEXT_NODE) {
+        if (!n._original) n._original = n.textContent;
+        let text = n._original;
+        text = text.replace(/{{(.*?)}}/g, (match, path) => {
+          path = path.trim();
+          if (context[path] !== void 0) return context[path];
+          const val = _SwcUtils.getValueByPath(data, path, asKey);
+          return val !== void 0 ? val : match;
+        });
+        if (n.textContent !== text) n.textContent = text;
+      } else if (n.nodeType === Node.ELEMENT_NODE) {
+        const el = n;
+        Array.from(el.attributes).forEach((a) => {
+          if (!a._original) a._original = a.value;
+          let val = a._original;
+          val = val.replace(/{{(.*?)}}/g, (match, path) => {
+            path = path.trim();
+            if (context[path] !== void 0) return context[path];
+            const v = _SwcUtils.getValueByPath(data, path, asKey);
+            return v !== void 0 ? v : match;
+          });
+          if (a.value !== val) a.value = val;
+        });
+        el.childNodes.forEach(walk);
+      }
+    };
+    walk(node);
+  }
+  static createReactiveProxy(target, onChange, onIndexChange) {
+    const makeRecursiveProxy = (obj) => {
+      if (typeof obj !== "object" || obj === null || obj instanceof Node) return obj;
+      return new Proxy(obj, {
+        set: (t, prop, val) => {
+          const oldVal = t[prop];
+          if (oldVal === val) return true;
+          t[prop] = makeRecursiveProxy(val);
+          const isIndex = !isNaN(Number(prop)) && Array.isArray(t);
+          if (isIndex && onIndexChange) {
+            onIndexChange(Number(prop), val);
+          } else {
+            onChange();
+          }
+          return true;
+        },
+        deleteProperty: (t, prop) => {
+          delete t[prop];
+          onChange();
+          return true;
+        }
+      });
+    };
+    return makeRecursiveProxy(target);
+  }
+};
+
 // src/decorators/elementDefine.ts
 var ELEMENT_CONFIG_KEY = Symbol("simple-web-component:element-config");
+var STATE_CHANGE_EVENT = "swc:state-change";
 var BUILT_IN_TAG_MAP = /* @__PURE__ */ new Map();
 var registerTag = (className, tagName) => {
   if (typeof globalThis !== "undefined" && globalThis[className]) {
@@ -1413,17 +1625,49 @@ var elementDefine = (inConfig) => (constructor) => {
       proto = Object.getPrototypeOf(proto);
     }
   }
-  const attributeChangedMap = getAttributeChangedMap(constructor);
-  const observedFromDecorators = attributeChangedMap ? Array.from(attributeChangedMap.keys()).filter((it) => it !== ATTRIBUTE_CHANGED_WILDCARD) : [];
-  const mergedObservedAttributes = [.../* @__PURE__ */ new Set([...config.observedAttributes ?? [], ...observedFromDecorators])];
+  const attributePropsList = getAttributeMetadataList(constructor);
+  const emitCustomEventList = getEmitCustomEventMetadataList(constructor);
+  const stateList = getStateMetadataList(constructor);
+  const observedFromProps = attributePropsList ? attributePropsList.map((it) => it.options.name) : [];
+  const observedFromEmits = emitCustomEventList ? emitCustomEventList.map((it) => it.options.attributeName) : [];
+  const mergedObservedAttributes = [.../* @__PURE__ */ new Set([...config.observedAttributes ?? [], ...observedFromProps, ...observedFromEmits])];
   const NewClass = class extends constructor {
     constructor(...args) {
       super(...args);
+      this._swcId = Math.random().toString(36).substring(2, 11);
       this._observer = null;
       this._boundElements = /* @__PURE__ */ new WeakMap();
+      this._activeListeners = [];
+      this._emitHandlers = /* @__PURE__ */ new Map();
+      this._stateBindings = /* @__PURE__ */ new Map();
+      this._internalStates = /* @__PURE__ */ new Map();
+      this._externalSources = /* @__PURE__ */ new Map();
+      if (stateList) {
+        stateList.forEach((meta) => {
+          const key = meta.propertyKey;
+          const stateName = meta.options.name;
+          const initialVal = this[key];
+          this._internalStates.set(
+            key,
+            SwcUtils.createReactiveProxy(initialVal, () => this._updateState(stateName))
+          );
+          Object.defineProperty(this, key, {
+            get: () => this._internalStates.get(key),
+            set: (newVal) => {
+              if (this._internalStates.get(key) === newVal) return;
+              this._internalStates.set(
+                key,
+                SwcUtils.createReactiveProxy(newVal, () => this._updateState(stateName))
+              );
+              this._updateState(stateName);
+            },
+            enumerable: true,
+            configurable: true
+          });
+        });
+      }
       const innerHtmlList = getInnerHtmlMetadataList(this);
-      const useShadow = innerHtmlList?.some((it) => it.options.useShadow === true);
-      if (useShadow === true && !this.shadowRoot) {
+      if (innerHtmlList?.some((it) => it.options.useShadow === true) && !this.shadowRoot) {
         this.attachShadow({ mode: "open" });
       }
     }
@@ -1431,6 +1675,7 @@ var elementDefine = (inConfig) => (constructor) => {
       return mergedObservedAttributes;
     }
     _syncDecorators() {
+      this._buildStateMap();
       const queryMetadata = getQueryMetadata(this);
       if (queryMetadata) {
         queryMetadata.filter((it) => it.isMethod).forEach((it) => {
@@ -1460,9 +1705,9 @@ var elementDefine = (inConfig) => (constructor) => {
       const eventListeners = getAddEventListenerMetadata(this);
       if (eventListeners) {
         eventListeners.forEach((it) => {
-          const { selector, eventName, useShadow, ...options } = it.options;
+          const { query: query2, type, useShadow, ...options } = it.options;
           const root = useShadow !== false && this.shadowRoot ? this.shadowRoot : this;
-          const targetElements = selector ? root.querySelectorAll(selector) : [this];
+          const targetElements = query2 ? root.querySelectorAll(query2) : [this];
           targetElements.forEach((targetElement) => {
             if (targetElement) {
               let bound = this._boundElements.get(targetElement);
@@ -1470,127 +1715,220 @@ var elementDefine = (inConfig) => (constructor) => {
                 bound = /* @__PURE__ */ new Set();
                 this._boundElements.set(targetElement, bound);
               }
-              const eventKey = `event:${String(it.propertyKey)}:${eventName}`;
+              const eventKey = `event:${String(it.propertyKey)}:${type}`;
               if (!bound.has(eventKey)) {
-                targetElement.addEventListener(
-                  eventName,
-                  (event) => {
-                    this[it.propertyKey](event);
-                  },
-                  options
-                );
+                const handler = (event) => {
+                  if (it.options.stopImmediatePropagation) event.stopImmediatePropagation();
+                  if (it.options.stopPropagation) event.stopPropagation();
+                  if (it.options.preventDefault) event.preventDefault();
+                  this[it.propertyKey](event, targetElement);
+                };
+                targetElement.addEventListener(type, handler, options);
                 bound.add(eventKey);
+                if (config.autoRemoveEventListeners) this._activeListeners.push({ el: targetElement, type, handler, options });
+                const addEventMethods = getLifecycleMetadata(this, ON_ADD_EVENT_LISTENER_METADATA_KEY);
+                addEventMethods?.forEach((m) => {
+                  if (typeof this[m] === "function") this[m](targetElement, type, handler);
+                });
               }
             }
           });
         });
       }
     }
+    _buildStateMap() {
+      this._stateBindings.clear();
+      this._externalSources.clear();
+      const scan = (root) => {
+        const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
+        let node = null;
+        while (node = walker.nextNode()) {
+          if (node.nodeType === Node.TEXT_NODE) this._parseAndBind(node, "text");
+          else if (node.nodeType === Node.ELEMENT_NODE) {
+            const el = node;
+            const alias = el.getAttribute("as");
+            if (alias) {
+              this._externalSources.set(alias, el);
+              el.addEventListener(STATE_CHANGE_EVENT, () => this._updateState(alias));
+            }
+            Array.from(el.attributes).forEach((attr) => this._parseAndBind(attr, "attribute", el));
+          }
+        }
+      };
+      if (this.shadowRoot) scan(this.shadowRoot);
+      scan(this);
+    }
+    _parseAndBind(node, type, owner) {
+      const content = node.textContent || "";
+      const matches = Array.from(content.matchAll(/{{(.*?)}}/g));
+      if (matches.length === 0) return;
+      matches.forEach((match) => {
+        const fullPath = match[1].trim();
+        const rootName = fullPath.split(".")[0];
+        const isState = stateList?.some((s) => s.options.name === rootName);
+        const isLogicKey = this._asKey === rootName || this._asIndexKey === rootName;
+        const isExternal = this._externalSources.has(rootName);
+        const isSelfAlias = this.getAttribute("as") === rootName;
+        if (!isState && !isLogicKey && !isExternal && !isSelfAlias) return;
+        if (!this._stateBindings.has(rootName)) this._stateBindings.set(rootName, []);
+        const tplKey = `__swc_original_${this._swcId}`;
+        if (!node[tplKey]) node[tplKey] = content;
+        this._stateBindings.get(rootName).push({ node, type, owner, path: fullPath });
+        this._updateState(rootName);
+      });
+    }
+    _updateState(stateName) {
+      if (!this._stateBindings) return;
+      this._executeBindingUpdate(stateName);
+      const selfAlias = this.getAttribute("as");
+      if (selfAlias && selfAlias !== stateName) this._executeBindingUpdate(selfAlias);
+      this.dispatchEvent(new CustomEvent(STATE_CHANGE_EVENT, { bubbles: true, composed: true }));
+    }
+    _executeBindingUpdate(stateName) {
+      const bindings = this._stateBindings.get(stateName);
+      if (!bindings) return;
+      const tplKey = `__swc_original_${this._swcId}`;
+      bindings.forEach((bin) => {
+        let text = bin.node[tplKey];
+        const matches = Array.from(text.matchAll(/{{(.*?)}}/g));
+        for (const match of matches) {
+          const path = match[1].trim();
+          const root = path.split(".")[0];
+          let val = void 0;
+          let current = this;
+          while (current) {
+            const currentNewClass = current;
+            if (current.getAttribute("as") === root) {
+              val = SwcUtils.getValueByPath(current, path.split(".").slice(1).join(".") || "value", "value");
+              if (val !== void 0) break;
+            }
+            const externalSource = currentNewClass._externalSources?.get(root);
+            if (externalSource) {
+              val = SwcUtils.getValueByPath(externalSource, path.split(".").slice(1).join(".") || "value", "value");
+              if (val !== void 0) break;
+            }
+            const cStates = getStateMetadataList(current.constructor);
+            const cAttrs = getAttributeMetadataList(current.constructor);
+            const sMeta = cStates?.find((s) => s.options.name === root);
+            const aMeta = cAttrs?.find((a) => a.options.name === root);
+            if (sMeta || aMeta) {
+              let aPath = path;
+              if (sMeta && sMeta.options.name !== String(sMeta.propertyKey)) aPath = path.replace(sMeta.options.name, String(sMeta.propertyKey));
+              else if (aMeta && aMeta.options.name !== String(aMeta.propertyKey)) aPath = path.replace(aMeta.options.name, String(aMeta.propertyKey));
+              val = SwcUtils.getValueByPath(current, aPath, root);
+              if (val !== void 0) break;
+            }
+            current = current.parentElement || current.getRootNode().host;
+          }
+          if (val !== void 0) {
+            const strVal = val === null || val === void 0 ? "" : typeof val === "object" ? "[Object]" : String(val);
+            text = text.replace(match[0], strVal);
+            if (bin.type === "attribute" && bin.owner) {
+              if (val === null || val === void 0) bin.owner.removeAttribute(bin.attrName);
+              else bin.owner.setAttribute(bin.attrName, text);
+            }
+          }
+        }
+        if (bin.type === "text") bin.node.textContent = text;
+      });
+    }
     disconnectedCallback() {
-      const beforeMethods = getLifecycleMetadata(this, ON_BEFORE_DISCONNECTED_METADATA_KEY);
-      beforeMethods?.forEach((m) => {
+      const bMethods = getLifecycleMetadata(this, ON_BEFORE_DISCONNECTED_METADATA_KEY);
+      bMethods?.forEach((m) => {
         if (typeof this[m] === "function") this[m]();
       });
-      if (this._observer) {
-        this._observer.disconnect();
-      }
-      if (super.disconnectedCallback) {
-        super.disconnectedCallback();
+      if (this._observer) this._observer.disconnect();
+      if (config.autoRemoveEventListeners) {
+        this._activeListeners.forEach(({ el, type, handler, options }) => el.removeEventListener(type, handler, options));
+        this._activeListeners = [];
       }
-      const afterMethods = getLifecycleMetadata(this, ON_AFTER_DISCONNECTED_METADATA_KEY);
-      afterMethods?.forEach((m) => {
+      if (super.disconnectedCallback) super.disconnectedCallback();
+      const aMethods = getLifecycleMetadata(this, ON_AFTER_DISCONNECTED_METADATA_KEY);
+      aMethods?.forEach((m) => {
         if (typeof this[m] === "function") this[m]();
       });
     }
     adoptedCallback() {
-      const beforeMethods = getLifecycleMetadata(this, ON_BEFORE_ADOPTED_METADATA_KEY);
-      beforeMethods?.forEach((m) => {
+      const bMethods = getLifecycleMetadata(this, ON_BEFORE_ADOPTED_METADATA_KEY);
+      bMethods?.forEach((m) => {
         if (typeof this[m] === "function") this[m]();
       });
-      if (super.adoptedCallback) {
-        super.adoptedCallback();
-      }
-      const afterMethods = getLifecycleMetadata(this, ON_AFTER_ADOPTED_METADATA_KEY);
-      afterMethods?.forEach((m) => {
+      if (super.adoptedCallback) super.adoptedCallback();
+      const aMethods = getLifecycleMetadata(this, ON_AFTER_ADOPTED_METADATA_KEY);
+      aMethods?.forEach((m) => {
         if (typeof this[m] === "function") this[m]();
       });
     }
     async connectedCallback() {
-      const beforeMethods = getLifecycleMetadata(this, ON_BEFORE_CONNECTED_METADATA_KEY);
-      beforeMethods?.forEach((m) => {
+      const bMethods = getLifecycleMetadata(this, ON_BEFORE_CONNECTED_METADATA_KEY);
+      bMethods?.forEach((m) => {
         if (typeof this[m] === "function") this[m]();
       });
-      if (typeof this.initCore === "function") {
-        this.initCore();
-      }
-      const innerHtmlList = getInnerHtmlMetadataList(this);
-      let shadowContent = "";
-      let lightContent = "";
-      if (innerHtmlList) {
-        for (const meta of innerHtmlList) {
+      if (typeof this.initCore === "function") this.initCore();
+      const iHtmlList = getInnerHtmlMetadataList(this);
+      let sContent = "";
+      let lContent = "";
+      if (iHtmlList) {
+        for (const meta of iHtmlList) {
           const result = await this[meta.propertyKey]();
           if (result !== void 0) {
-            if (meta.options.useShadow === true) {
-              shadowContent += result;
-            } else {
-              lightContent += result;
-            }
+            if (meta.options.useShadow === true) sContent += result;
+            else lContent += result;
           }
         }
       }
-      if (this.shadowRoot) {
-        this.shadowRoot.innerHTML = shadowContent;
-      }
-      if (lightContent) {
-        this.innerHTML = lightContent;
-      }
+      if (this.shadowRoot) this.shadowRoot.innerHTML = sContent;
+      if (lContent) this.innerHTML = lContent;
       this._syncDecorators();
-      this._observer = new MutationObserver(() => {
-        this._syncDecorators();
-      });
-      const target = this.shadowRoot || this;
-      this._observer.observe(target, { childList: true, subtree: true });
-      if (super.connectedCallback) {
-        await super.connectedCallback();
-      }
-      const afterMethods = getLifecycleMetadata(this, ON_AFTER_CONNECTED_METADATA_KEY);
-      afterMethods?.forEach((m) => {
+      this._observer = new MutationObserver(() => this._syncDecorators());
+      this._observer.observe(this.shadowRoot || this, { childList: true, subtree: true });
+      if (super.connectedCallback) await super.connectedCallback();
+      const aMethods = getLifecycleMetadata(this, ON_AFTER_CONNECTED_METADATA_KEY);
+      aMethods?.forEach((m) => {
         if (typeof this[m] === "function") this[m]();
       });
     }
-    // 4. Handle attribute changes and route to decorated methods
     attributeChangedCallback(name, oldValue, newValue) {
-      if (super.attributeChangedCallback) {
-        super.attributeChangedCallback(name, oldValue, newValue);
-      }
-      const methodKeys = attributeChangedMap?.get(name);
-      if (methodKeys && Array.isArray(methodKeys)) {
-        methodKeys.forEach((key) => {
-          if (typeof this[key] === "function") {
-            this[key](newValue, oldValue, name);
+      if (super.attributeChangedCallback) super.attributeChangedCallback(name, oldValue, newValue);
+      if (attributePropsList) {
+        attributePropsList.forEach((meta) => {
+          if (meta.options.name === name) {
+            if (String(this[meta.propertyKey]) !== String(newValue)) this[meta.propertyKey] = newValue;
           }
         });
       }
-      const wildcardMethodKeys = attributeChangedMap?.get(ATTRIBUTE_CHANGED_WILDCARD);
-      if (wildcardMethodKeys && Array.isArray(wildcardMethodKeys)) {
-        wildcardMethodKeys.forEach((key) => {
-          if (typeof this[key] === "function") {
-            this[key](newValue, oldValue, name);
-          }
+      if (typeof this._updateState === "function") this._updateState(name);
+      const aMethodsMap = getLifecycleMetadata(constructor, ON_ATTRIBUTE_CHANGED_METADATA_KEY);
+      const mKeys = aMethodsMap?.get(name);
+      if (mKeys && Array.isArray(mKeys))
+        mKeys.forEach((key) => {
+          if (typeof this[key] === "function") this[key](newValue, oldValue, name);
         });
+      if (emitCustomEventList) {
+        const eMeta = emitCustomEventList.find((it) => it.options.attributeName === name);
+        if (eMeta) {
+          const eType = eMeta.options.type;
+          const oHandler = this._emitHandlers.get(eType);
+          if (oHandler) this.removeEventListener(eType, oHandler);
+          if (newValue) {
+            const nHandler = (e) => {
+              new Function("event", "$data", newValue).call(this, e, e.detail);
+            };
+            this.addEventListener(eType, nHandler);
+            this._emitHandlers.set(eType, nHandler);
+          }
+        }
       }
+      const wMethodsKeys = aMethodsMap?.get(ATTRIBUTE_CHANGED_WILDCARD);
+      if (wMethodsKeys && Array.isArray(wMethodsKeys))
+        wMethodsKeys.forEach((key) => {
+          if (typeof this[key] === "function") this[key](newValue, oldValue, name);
+        });
     }
   };
   const registry = config.customElementRegistry || (typeof customElements !== "undefined" ? customElements : void 0);
   if (registry && !registry.get(config.name)) {
-    const options = extendsTagName ? { extends: extendsTagName } : void 0;
-    if (extendsTagName && typeof document !== "undefined") {
-      const isSupported = document.createElement(extendsTagName, { is: "any" }).outerHTML.indexOf("is=") !== -1;
-      if (!isSupported) {
-        console.warn(`[SWC] Browser does not support 'is' attribute (Customized Built-in Elements). If you are on Safari, please include '@ungap/custom-elements' polyfill.`);
-      }
-    }
-    registry.define(config.name, NewClass, options);
+    registry.define(config.name, NewClass, config.extends ? { extends: config.extends } : void 0);
   }
   ReflectUtils.defineMetadata(ELEMENT_CONFIG_KEY, config, NewClass);
   return NewClass;
@@ -1600,71 +1938,6 @@ var getElementConfig = (target) => {
   return ReflectUtils.getMetadata(ELEMENT_CONFIG_KEY, constructor);
 };
 
-// src/utils/Utils.ts
-var SwcUtils = class _SwcUtils {
-  static getValueByPath(obj, path, asKey) {
-    if (path === asKey) return obj;
-    if (path.startsWith(`${asKey}.`)) {
-      return path.split(".").slice(1).reduce((acc, part) => acc && acc[part], obj);
-    }
-    return void 0;
-  }
-  static applyData(node, data, options) {
-    const { asKey, asIndexKey, index } = options;
-    const context = {};
-    if (index !== void 0) {
-      context[asIndexKey] = index.toString();
-    }
-    const walk = (n) => {
-      if (n.nodeType === Node.TEXT_NODE) {
-        if (!n._original) n._original = n.textContent;
-        let text = n._original;
-        text = text.replace(/{{(.*?)}}/g, (match, path) => {
-          path = path.trim();
-          if (context[path] !== void 0) return context[path];
-          const val = _SwcUtils.getValueByPath(data, path, asKey);
-          return val !== void 0 ? val : match;
-        });
-        if (n.textContent !== text) n.textContent = text;
-      } else if (n.nodeType === Node.ELEMENT_NODE) {
-        const el = n;
-        Array.from(el.attributes).forEach((a) => {
-          if (!a._original) a._original = a.value;
-          let val = a._original;
-          val = val.replace(/{{(.*?)}}/g, (match, path) => {
-            path = path.trim();
-            if (context[path] !== void 0) return context[path];
-            const v = _SwcUtils.getValueByPath(data, path, asKey);
-            return v !== void 0 ? v : match;
-          });
-          if (a.value !== val) a.value = val;
-        });
-        el.childNodes.forEach(walk);
-      }
-    };
-    walk(node);
-  }
-  static createReactiveProxy(target, onChange, onIndexChange) {
-    return new Proxy(target, {
-      set: (t, prop, val) => {
-        const isIndex = !isNaN(Number(prop));
-        t[prop] = val;
-        if (isIndex && onIndexChange) {
-          onIndexChange(Number(prop), val);
-        } else {
-          onChange();
-        }
-        return true;
-      },
-      deleteProperty: (t, prop) => {
-        delete t[prop];
-        onChange();
-        return true;
-      }
-    });
-  }
-};
-
 // src/elements/SwcHTMLElementBase.ts
 var SwcHTMLElementBase = class extends HTMLElement {
   constructor() {
@@ -2284,9 +2557,9 @@ var SwcIfAnchor = class SwcIfAnchor2 extends SwcHTMLAnchorElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -2666,9 +2939,9 @@ var SwcIfArea = class SwcIfArea2 extends SwcHTMLAreaElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -3048,9 +3321,9 @@ var SwcIfAudio = class SwcIfAudio2 extends SwcHTMLAudioElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -3430,9 +3703,9 @@ var SwcIfBase = class SwcIfBase2 extends SwcHTMLBaseElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -3812,9 +4085,9 @@ var SwcIfButton = class SwcIfButton2 extends SwcHTMLButtonElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -4194,9 +4467,9 @@ var SwcIfCanvas = class SwcIfCanvas2 extends SwcHTMLCanvasElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -4576,9 +4849,9 @@ var SwcIfData = class SwcIfData2 extends SwcHTMLDataElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -4958,9 +5231,9 @@ var SwcIfDataList = class SwcIfDataList2 extends SwcHTMLDataListElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -5340,9 +5613,9 @@ var SwcIfDetails = class SwcIfDetails2 extends SwcHTMLDetailsElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -5722,9 +5995,9 @@ var SwcIfDialog = class SwcIfDialog2 extends SwcHTMLDialogElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -6104,9 +6377,9 @@ var SwcIfDiv = class SwcIfDiv2 extends SwcHTMLDivElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -6486,9 +6759,9 @@ var SwcIfDl = class SwcIfDl2 extends SwcHTMLDListElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -6868,9 +7141,9 @@ var SwcIfEmbed = class SwcIfEmbed2 extends SwcHTMLEmbedElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -7250,9 +7523,9 @@ var SwcIfFieldSet = class SwcIfFieldSet2 extends SwcHTMLFieldSetElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -7632,9 +7905,9 @@ var SwcIfForm = class SwcIfForm2 extends SwcHTMLFormElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -8014,9 +8287,9 @@ var SwcIfHr = class SwcIfHr2 extends SwcHTMLHRElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -8396,9 +8669,9 @@ var SwcIfIFrame = class SwcIfIFrame2 extends SwcHTMLIFrameElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -8778,9 +9051,9 @@ var SwcIfImage = class SwcIfImage2 extends SwcHTMLImageElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -9160,9 +9433,9 @@ var SwcIfInput = class SwcIfInput2 extends SwcHTMLInputElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -9542,9 +9815,9 @@ var SwcIfLabel = class SwcIfLabel2 extends SwcHTMLLabelElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -9924,9 +10197,9 @@ var SwcIfLegend = class SwcIfLegend2 extends SwcHTMLLegendElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -10306,9 +10579,9 @@ var SwcIfLi = class SwcIfLi2 extends SwcHTMLLIElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -10688,9 +10961,9 @@ var SwcIfLink = class SwcIfLink2 extends SwcHTMLLinkElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -11070,9 +11343,9 @@ var SwcIfMap = class SwcIfMap2 extends SwcHTMLMapElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -11452,9 +11725,9 @@ var SwcIfMeta = class SwcIfMeta2 extends SwcHTMLMetaElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -11834,9 +12107,9 @@ var SwcIfMeter = class SwcIfMeter2 extends SwcHTMLMeterElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -12216,9 +12489,9 @@ var SwcIfMod = class SwcIfMod2 extends SwcHTMLModElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -12598,9 +12871,9 @@ var SwcIfObject = class SwcIfObject2 extends SwcHTMLObjectElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -12980,9 +13253,9 @@ var SwcIfOl = class SwcIfOl2 extends SwcHTMLOListElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -13362,9 +13635,9 @@ var SwcIfOptGroup = class SwcIfOptGroup2 extends SwcHTMLOptGroupElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -13744,9 +14017,9 @@ var SwcIfOption = class SwcIfOption2 extends SwcHTMLOptionElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -14126,9 +14399,9 @@ var SwcIfOutput = class SwcIfOutput2 extends SwcHTMLOutputElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -14508,9 +14781,9 @@ var SwcIfParagraph = class SwcIfParagraph2 extends SwcHTMLParagraphElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -14890,9 +15163,9 @@ var SwcIfParam = class SwcIfParam2 extends SwcHTMLParamElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -15272,9 +15545,9 @@ var SwcIfPicture = class SwcIfPicture2 extends SwcHTMLPictureElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -15654,9 +15927,9 @@ var SwcIfPre = class SwcIfPre2 extends SwcHTMLPreElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -16036,9 +16309,9 @@ var SwcIfProgress = class SwcIfProgress2 extends SwcHTMLProgressElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -16418,9 +16691,9 @@ var SwcIfQuote = class SwcIfQuote2 extends SwcHTMLQuoteElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -16800,9 +17073,9 @@ var SwcIfScript = class SwcIfScript2 extends SwcHTMLScriptElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -17182,9 +17455,9 @@ var SwcIfSelect = class SwcIfSelect2 extends SwcHTMLSelectElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -17564,9 +17837,9 @@ var SwcIfSlot = class SwcIfSlot2 extends SwcHTMLSlotElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -17946,9 +18219,9 @@ var SwcIfSource = class SwcIfSource2 extends SwcHTMLSourceElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -18328,9 +18601,9 @@ var SwcIfSpan = class SwcIfSpan2 extends SwcHTMLSpanElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -18710,9 +18983,9 @@ var SwcIfStyle = class SwcIfStyle2 extends SwcHTMLStyleElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -19092,9 +19365,9 @@ var SwcIfTable = class SwcIfTable2 extends SwcHTMLTableElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -19474,9 +19747,9 @@ var SwcIfTableSection = class SwcIfTableSection2 extends SwcHTMLTableSectionElem
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -19856,9 +20129,9 @@ var SwcIfTableCell = class SwcIfTableCell2 extends SwcHTMLTableCellElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -20238,9 +20511,9 @@ var SwcIfTemplate = class SwcIfTemplate2 extends SwcHTMLTemplateElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -20620,9 +20893,9 @@ var SwcIfTextArea = class SwcIfTextArea2 extends SwcHTMLTextAreaElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -21002,9 +21275,9 @@ var SwcIfTime = class SwcIfTime2 extends SwcHTMLTimeElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -21384,9 +21657,9 @@ var SwcIfTitle = class SwcIfTitle2 extends SwcHTMLTitleElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -21766,9 +22039,9 @@ var SwcIfTableRow = class SwcIfTableRow2 extends SwcHTMLTableRowElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -22148,9 +22421,9 @@ var SwcIfTrack = class SwcIfTrack2 extends SwcHTMLTrackElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -22530,9 +22803,9 @@ var SwcIfUl = class SwcIfUl2 extends SwcHTMLUListElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -22912,9 +23185,9 @@ var SwcIfVideo = class SwcIfVideo2 extends SwcHTMLVideoElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -23294,9 +23567,9 @@ var SwcIfHeading = class SwcIfHeading2 extends SwcHTMLHeadingElementBase {
     if (isTruthy && this._masterTplNodes.length > 0) {
       this._masterTplNodes.forEach((tplNode) => {
         const clone = tplNode.cloneNode(true);
-        this.appendChild(clone);
         if (clone.style)
           clone.style.display = "contents";
+        this.appendChild(clone);
         this.applyData(clone, this._swcValue);
       });
     }
@@ -23517,18 +23790,23 @@ SwcOtherHeading = __decorate342([
 ], SwcOtherHeading);
 export {
   ADD_EVENT_LISTENER_METADATA_KEY,
-  ATTRIBUTE_CHANGED_METADATA_KEY,
   ATTRIBUTE_CHANGED_WILDCARD,
+  ATTRIBUTE_METADATA_KEY,
   ELEMENT_CONFIG_KEY,
+  EMIT_CUSTOM_EVENT_METADATA_KEY,
   INNER_HTML_METADATA_KEY,
+  ON_ADD_EVENT_LISTENER_METADATA_KEY,
   ON_AFTER_ADOPTED_METADATA_KEY,
   ON_AFTER_CONNECTED_METADATA_KEY,
   ON_AFTER_DISCONNECTED_METADATA_KEY,
+  ON_ATTRIBUTE_CHANGED_METADATA_KEY,
   ON_BEFORE_ADOPTED_METADATA_KEY,
   ON_BEFORE_CONNECTED_METADATA_KEY,
   ON_BEFORE_DISCONNECTED_METADATA_KEY,
   QUERY_ALL_METADATA_KEY,
   QUERY_METADATA_KEY,
+  STATE_CHANGE_EVENT,
+  STATE_METADATA_KEY,
   SwcChoose,
   SwcChooseAnchor,
   SwcChooseArea,
@@ -23930,27 +24208,33 @@ export {
   SwcWhenUl,
   SwcWhenVideo,
   addEventListener,
-  attributeChanged,
+  attribute,
   elementDefine,
+  emitCustomEvent,
   getAddEventListenerMetadata,
-  getAttributeChangedMap,
+  getAttributeMetadataList,
   getElementConfig,
+  getEmitCustomEventMetadataList,
   getInnerHtmlMetadataList,
   getLifecycleMetadata,
   getQueryAllMetadata,
   getQueryMetadata,
+  getStateMetadataList,
   innerHtml,
+  onAddEventListener,
   onAdopted,
   onAfterAdopted,
   onAfterConnected,
   onAfterDisconnected,
+  onAttributeChanged,
   onBeforeAdopted,
   onBeforeConnected,
   onBeforeDisconnected,
   onConnected,
   onDisconnected,
   query,
-  queryAll
+  queryAll,
+  state
 };
 /*! Bundled license information: