@dooboostore/simple-web-component 1.0.23 → 1.0.24

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

@@ -5924,8 +5924,27 @@ function attribute(selector, options = {}) {
 var findAllAttributeMetadata = (target) => {
   return ReflectUtils.findAllMetadata(ATTRIBUTE_METADATA_KEY, target).flat();
 };
-function attributeHost(attrName, options = {}) {
-  return attribute(":host", { ...options, name: attrName });
+function attributeHost(targetOrAttrOrOptions, propertyKeyOrOptions) {
+  if (propertyKeyOrOptions !== void 0 && (typeof propertyKeyOrOptions === "string" || typeof propertyKeyOrOptions === "symbol")) {
+    const fieldName = String(propertyKeyOrOptions);
+    return attribute(":host", { name: fieldName })(targetOrAttrOrOptions, propertyKeyOrOptions);
+  }
+  if (typeof targetOrAttrOrOptions === "string") {
+    const attrName = targetOrAttrOrOptions;
+    const options = typeof propertyKeyOrOptions === "object" ? propertyKeyOrOptions : {};
+    return attribute(":host", { ...options, name: attrName });
+  } else if (typeof targetOrAttrOrOptions === "object") {
+    const options = targetOrAttrOrOptions;
+    return (target, propertyKey) => {
+      const fieldName = String(propertyKey);
+      return attribute(":host", { ...options, name: fieldName })(target, propertyKey);
+    };
+  } else {
+    return (target, propertyKey) => {
+      const fieldName = String(propertyKey);
+      return attribute(":host", { name: fieldName })(target, propertyKey);
+    };
+  }
 }
 
 // src/decorators/changedAttributeHost.ts
@@ -5979,11 +5998,11 @@ function setAttribute(selector, name, options = {}) {
         const applyRoot = (t) => {
           if (!t) return;
           if (r === "auto") {
-            targetEls.push(t.shadowRoot || t);
-            return;
+            targetEls.push(t);
+          } else {
+            if (r === "light" || r === "all") targetEls.push(t);
+            if ((r === "shadow" || r === "all") && t.shadowRoot) targetEls.push(t.shadowRoot);
           }
-          if (r === "light" || r === "all") targetEls.push(t);
-          if ((r === "shadow" || r === "all") && t.shadowRoot) targetEls.push(t.shadowRoot);
         };
         if (selector === ":window") targetEls.push(currentWin);
         else if (selector === ":document") targetEls.push(currentWin.document);
@@ -6067,15 +6086,20 @@ function applyNode(selector, options = { position: "beforeEnd" }) {
         const currentDoc = currentWin.document;
         const pos = options.position || "beforeEnd";
         const r = options.root || "auto";
-        const getTargetRoot = () => {
+        const applyRoot = (t) => {
+          if (!t || !(t instanceof HTMLElement))
+            return t;
+          if (r === "auto")
+            return t.shadowRoot || t;
           if (r === "shadow")
-            return this.shadowRoot;
+            return t.shadowRoot;
           if (r === "light")
-            return this;
+            return t;
           if (r === "all")
-            return this.shadowRoot || this;
-          return this.shadowRoot || this;
+            return t.shadowRoot || t;
+          return t;
         };
+        const hostSet = SwcUtils.getHostSet(this);
         if (pos === "remove") {
           if (res) {
             if (selector === ":host" || !selector) {
@@ -6085,7 +6109,7 @@ function applyNode(selector, options = { position: "beforeEnd" }) {
                 this.remove();
               }
             } else {
-              const targetRoot = getTargetRoot();
+              const targetRoot = applyRoot(this);
               if (targetRoot) {
                 const targets = targetRoot.querySelectorAll(selector);
                 targets.forEach((el) => el.remove());
@@ -6094,14 +6118,22 @@ function applyNode(selector, options = { position: "beforeEnd" }) {
           }
         } else {
           let targetEl = null;
-          if (selector === ":host" || !selector) {
-            if (r === "shadow") {
-              targetEl = this.shadowRoot;
-            } else {
-              targetEl = this;
-            }
+          if (selector === ":host") {
+            targetEl = applyRoot(this);
+          } else if (selector === ":parentHost") {
+            targetEl = applyRoot(hostSet.$parentHost);
+          } else if (selector === ":appHost") {
+            targetEl = applyRoot(hostSet.$appHost);
+          } else if (selector === ":firstHost") {
+            targetEl = applyRoot(hostSet.$firstHost);
+          } else if (selector === ":lastHost") {
+            targetEl = applyRoot(hostSet.$lastHost);
+          } else if (selector === ":firstAppHost") {
+            targetEl = applyRoot(hostSet.$firstHost);
+          } else if (selector === ":lastAppHost") {
+            targetEl = applyRoot(hostSet.$lastAppHost);
           } else {
-            const targetRoot = getTargetRoot();
+            const targetRoot = applyRoot(this);
             targetEl = targetRoot ? targetRoot.querySelector(selector) : null;
           }
           if (targetEl) {
@@ -6146,27 +6178,108 @@ var findAllApplyNodeMetadata = (target) => {
   });
   return result;
 };
-function applyNodeHost(options = { position: "beforeEnd" }) {
-  return applyNode(":host", options);
+function applyNodeHost(targetOrOptions, propertyKey, descriptor) {
+  console.log("vvvvv");
+  if (propertyKey !== void 0 && typeof propertyKey === "string" || typeof propertyKey === "symbol") {
+    return applyNode(":host", { position: "beforeEnd" })(targetOrOptions, propertyKey, descriptor);
+  }
+  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+    const options = targetOrOptions;
+    return applyNode(":host", { ...options, position: options.position || "beforeEnd" });
+  } else {
+    return applyNode(":host", { position: "beforeEnd" });
+  }
+}
+function applyBeforeBeginNode(selector, options) {
+  return applyNode(selector, { ...options, position: "beforeBegin" });
+}
+function applyAfterBeginNode(selector, options) {
+  return applyNode(selector, { ...options, position: "afterBegin" });
+}
+function applyBeforeEndNode(selector, options) {
+  return applyNode(selector, { ...options, position: "beforeEnd" });
+}
+function applyAfterEndNode(selector, options) {
+  return applyNode(selector, { ...options, position: "afterEnd" });
+}
+function applyReplaceNode(selector, options) {
+  return applyNode(selector, { ...options, position: "replace" });
+}
+function applyReplaceChildrenNode(selector, options) {
+  return applyNode(selector, { ...options, position: "replaceChildren" });
+}
+function applyInnerHtmlNode(selector, options) {
+  return applyNode(selector, { ...options, position: "innerHtml" });
+}
+function applyInnerTextNode(selector, options) {
+  return applyNode(selector, { ...options, position: "innerText" });
+}
+function applyRemoveNode(selector, options) {
+  return applyNode(selector, { ...options, position: "remove" });
+}
+function applyBeforeBeginNodeHost(targetOrOptions, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = applyNode(":host", { position: "beforeBegin" });
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return applyNode(":host", { ...targetOrOptions || {}, position: "beforeBegin" });
+}
+function applyAfterBeginNodeHost(optionsOrTarget, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = applyNode(":host", { position: "afterBegin" });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(":host", { ...optionsOrTarget || {}, position: "afterBegin" });
+}
+function applyBeforeEndNodeHost(optionsOrTarget, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = applyNode(":host", { position: "beforeEnd" });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(":host", { ...optionsOrTarget || {}, position: "beforeEnd" });
+}
+function applyAfterEndNodeHost(optionsOrTarget, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = applyNode(":host", { position: "afterEnd" });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(":host", { ...optionsOrTarget || {}, position: "afterEnd" });
+}
+function applyReplaceNodeHost(optionsOrTarget, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = applyNode(":host", { position: "replace" });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(":host", { ...optionsOrTarget || {}, position: "replace" });
+}
+function applyReplaceChildrenNodeHost(optionsOrTarget, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = applyNode(":host", { position: "replaceChildren" });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(":host", { ...optionsOrTarget || {}, position: "replaceChildren" });
+}
+function applyInnerHtmlNodeHost(optionsOrTarget, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = applyNode(":host", { position: "innerHtml" });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(":host", { ...optionsOrTarget || {}, position: "innerHtml" });
+}
+function applyInnerTextNodeHost(optionsOrTarget, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = applyNode(":host", { position: "innerText" });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(":host", { ...optionsOrTarget || {}, position: "innerText" });
+}
+function applyRemoveNodeHost(optionsOrTarget, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = applyNode(":host", { position: "remove" });
+    return decorator(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode(":host", { ...optionsOrTarget || {}, position: "remove" });
 }
-var applyBeforeBeginNode = (selector, options = {}) => applyNode(selector, { ...options, position: "beforeBegin" });
-var applyAfterBeginNode = (selector, options = {}) => applyNode(selector, { ...options, position: "afterBegin" });
-var applyBeforeEndNode = (selector, options = {}) => applyNode(selector, { ...options, position: "beforeEnd" });
-var applyAfterEndNode = (selector, options = {}) => applyNode(selector, { ...options, position: "afterEnd" });
-var applyReplaceNode = (selector, options = {}) => applyNode(selector, { ...options, position: "replace" });
-var applyReplaceChildrenNode = (selector, options = {}) => applyNode(selector, { ...options, position: "replaceChildren" });
-var applyInnerHtmlNode = (selector, options = {}) => applyNode(selector, { ...options, position: "innerHtml" });
-var applyInnerTextNode = (selector, options = {}) => applyNode(selector, { ...options, position: "innerText" });
-var applyRemoveNode = (selector, options = {}) => applyNode(selector, { ...options, position: "remove" });
-var applyBeforeBeginNodeHost = (options = {}) => applyNode(":host", { ...options, position: "beforeBegin" });
-var applyAfterBeginNodeHost = (options = {}) => applyNode(":host", { ...options, position: "afterBegin" });
-var applyBeforeEndNodeHost = (options = {}) => applyNode(":host", { ...options, position: "beforeEnd" });
-var applyAfterEndNodeHost = (options = {}) => applyNode(":host", { ...options, position: "afterEnd" });
-var applyReplaceNodeHost = (options = {}) => applyNode(":host", { ...options, position: "replace" });
-var applyReplaceChildrenNodeHost = (options = {}) => applyNode(":host", { ...options, position: "replaceChildren" });
-var applyInnerHtmlNodeHost = (options = {}) => applyNode(":host", { ...options, position: "innerHtml" });
-var applyInnerTextNodeHost = (options = {}) => applyNode(":host", { ...options, position: "innerText" });
-var applyRemoveNodeHost = (options = {}) => applyNode(":host", { ...options, position: "remove" });
 
 // src/decorators/query.ts
 var QUERY_METADATA_KEY = Symbol("simple-web-component:query");
@@ -6267,8 +6380,76 @@ var getQueryMetadata = (target) => {
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(QUERY_METADATA_KEY, constructor);
 };
-function queryHost(options) {
-  return query(":host", options);
+function queryHost(targetOrOptions, propertyKey) {
+  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+    return query(":host", {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+    return query(":host", targetOrOptions);
+  } else {
+    return query(":host", {});
+  }
+}
+var host = queryHost;
+function parentHost(targetOrOptions, propertyKey) {
+  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+    return query(":parentHost", {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+    return query(":parentHost", targetOrOptions);
+  } else {
+    return query(":parentHost", {});
+  }
+}
+function appHost(targetOrOptions, propertyKey) {
+  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+    return query(":appHost", {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+    return query(":appHost", targetOrOptions);
+  } else {
+    return query(":appHost", {});
+  }
+}
+function firstHost(targetOrOptions, propertyKey) {
+  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+    return query(":firstHost", {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+    return query(":firstHost", targetOrOptions);
+  } else {
+    return query(":firstHost", {});
+  }
+}
+function lastHost(targetOrOptions, propertyKey) {
+  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+    return query(":lastHost", {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+    return query(":lastHost", targetOrOptions);
+  } else {
+    return query(":lastHost", {});
+  }
+}
+function firstAppHost(targetOrOptions, propertyKey) {
+  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+    return query(":firstAppHost", {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+    return query(":firstAppHost", targetOrOptions);
+  } else {
+    return query(":firstAppHost", {});
+  }
+}
+function lastAppHost(targetOrOptions, propertyKey) {
+  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+    return query(":lastAppHost", {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+    return query(":lastAppHost", targetOrOptions);
+  } else {
+    return query(":lastAppHost", {});
+  }
 }
 
 // src/decorators/queryAll.ts
@@ -6367,8 +6548,76 @@ var getQueryAllMetadata = (target) => {
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(QUERY_ALL_METADATA_KEY, constructor);
 };
-function queryAllHost(options) {
-  return queryAll(":host", options);
+function queryAllHost(targetOrOptions, propertyKey) {
+  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+    return queryAll(":host", {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+    return queryAll(":host", targetOrOptions);
+  } else {
+    return queryAll(":host", {});
+  }
+}
+var allHost = queryAllHost;
+function allParentHost(targetOrOptions, propertyKey) {
+  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+    return queryAll(":parentHost", {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+    return queryAll(":parentHost", targetOrOptions);
+  } else {
+    return queryAll(":parentHost", {});
+  }
+}
+function allAppHost(targetOrOptions, propertyKey) {
+  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+    return queryAll(":appHost", {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+    return queryAll(":appHost", targetOrOptions);
+  } else {
+    return queryAll(":appHost", {});
+  }
+}
+function allFirstHost(targetOrOptions, propertyKey) {
+  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+    return queryAll(":firstHost", {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+    return queryAll(":firstHost", targetOrOptions);
+  } else {
+    return queryAll(":firstHost", {});
+  }
+}
+function allLastHost(targetOrOptions, propertyKey) {
+  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+    return queryAll(":lastHost", {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+    return queryAll(":lastHost", targetOrOptions);
+  } else {
+    return queryAll(":lastHost", {});
+  }
+}
+function allFirstAppHost(targetOrOptions, propertyKey) {
+  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+    return queryAll(":firstAppHost", {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+    return queryAll(":firstAppHost", targetOrOptions);
+  } else {
+    return queryAll(":firstAppHost", {});
+  }
+}
+function allLastAppHost(targetOrOptions, propertyKey) {
+  if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+    return queryAll(":lastAppHost", {})(targetOrOptions, propertyKey);
+  }
+  if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+    return queryAll(":lastAppHost", targetOrOptions);
+  } else {
+    return queryAll(":lastAppHost", {});
+  }
 }
 
 // src/decorators/classList.ts
@@ -6391,27 +6640,40 @@ function createClassListDecorator(action) {
           const r = options.root || "auto";
           const hostSet = SwcUtils.getHostSet(this);
           const targetEls = [];
-          if (selector === ":host" || !selector) {
-            targetEls.push(this);
-          } else if (selector === ":parentHost") {
-            if (hostSet.$parentHost) targetEls.push(hostSet.$parentHost);
-          } else if (selector === ":appHost") {
-            if (hostSet.$appHost) targetEls.push(hostSet.$appHost);
-          } else {
+          const applyRoot = (t) => {
+            if (!t || !(t instanceof HTMLElement)) return;
+            if (r === "auto") {
+              targetEls.push(t);
+            } else {
+              if (r === "light" || r === "all") targetEls.push(t);
+              if ((r === "shadow" || r === "all") && t.shadowRoot) {
+              }
+            }
+          };
+          if (selector === ":parentHost") applyRoot(hostSet.$parentHost);
+          else if (selector === ":appHost") applyRoot(hostSet.$appHost);
+          else if (selector === ":firstHost") applyRoot(hostSet.$firstHost);
+          else if (selector === ":lastHost") applyRoot(hostSet.$lastHost);
+          else if (selector === ":firstAppHost") applyRoot(hostSet.$firstAppHost);
+          else if (selector === ":lastAppHost") applyRoot(hostSet.$lastAppHost);
+          else if (selector === ":hosts") hostSet.$hosts.forEach(applyRoot);
+          else if (selector === ":appHosts") hostSet.$appHosts.forEach(applyRoot);
+          else if (selector === ":host" || !selector) applyRoot(this);
+          else {
             if (r === "shadow") {
               const found = this.shadowRoot?.querySelectorAll(selector);
-              if (found) targetEls.push(...found);
+              if (found) targetEls.push(...Array.from(found));
             } else if (r === "light") {
               const found = this.querySelectorAll(selector);
-              if (found) targetEls.push(...found);
+              if (found) targetEls.push(...Array.from(found));
             } else if (r === "all") {
               const sFound = this.shadowRoot?.querySelectorAll(selector);
               const lFound = this.querySelectorAll(selector);
-              if (sFound) targetEls.push(...sFound);
-              if (lFound) targetEls.push(...lFound);
+              if (sFound) targetEls.push(...Array.from(sFound));
+              if (lFound) targetEls.push(...Array.from(lFound));
             } else {
               const found = (this.shadowRoot || this).querySelectorAll(selector);
-              if (found) targetEls.push(...found);
+              if (found) targetEls.push(...Array.from(found));
             }
           }
           targetEls.forEach((targetEl) => {
@@ -6454,11 +6716,41 @@ var updateClassList = (selector, options = {}) => createClassListDecorator("upda
 var addClassList = (selector, options = {}) => createClassListDecorator("add")(selector, options);
 var removeClassList = (selector, options = {}) => createClassListDecorator("remove")(selector, options);
 var toggleClassList = (selector, options = {}) => createClassListDecorator("toggle")(selector, options);
-var setClassListHost = (options = {}) => createClassListDecorator("set")(":host", options);
-var updateClassListHost = (options = {}) => createClassListDecorator("update")(":host", options);
-var addClassListHost = (options = {}) => createClassListDecorator("add")(":host", options);
-var removeClassListHost = (options = {}) => createClassListDecorator("remove")(":host", options);
-var toggleClassListHost = (options = {}) => createClassListDecorator("toggle")(":host", options);
+function setClassListHost(targetOrOptions, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = createClassListDecorator("set")(":host", {});
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return createClassListDecorator("set")(":host", targetOrOptions || {});
+}
+function updateClassListHost(targetOrOptions, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = createClassListDecorator("update")(":host", {});
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return createClassListDecorator("update")(":host", targetOrOptions || {});
+}
+function addClassListHost(targetOrOptions, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = createClassListDecorator("add")(":host", {});
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return createClassListDecorator("add")(":host", targetOrOptions || {});
+}
+function removeClassListHost(targetOrOptions, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = createClassListDecorator("remove")(":host", {});
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return createClassListDecorator("remove")(":host", targetOrOptions || {});
+}
+function toggleClassListHost(targetOrOptions, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = createClassListDecorator("toggle")(":host", {});
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return createClassListDecorator("toggle")(":host", targetOrOptions || {});
+}
 var findAllClassListMetadata = (target) => {
   const result = /* @__PURE__ */ new Map();
   const maps = ReflectUtils.findAllMetadata(CLASS_LIST_METADATA_KEY, target);
@@ -6490,27 +6782,40 @@ function createStyleDecorator(action) {
           const r = options.root || "auto";
           const hostSet = SwcUtils.getHostSet(this);
           const targetEls = [];
-          if (selector === ":host" || !selector) {
-            targetEls.push(this);
-          } else if (selector === ":parentHost") {
-            if (hostSet.$parentHost) targetEls.push(hostSet.$parentHost);
-          } else if (selector === ":appHost") {
-            if (hostSet.$appHost) targetEls.push(hostSet.$appHost);
-          } else {
+          const applyRoot = (t) => {
+            if (!t || !(t instanceof HTMLElement)) return;
+            if (r === "auto") {
+              targetEls.push(t);
+            } else {
+              if (r === "light" || r === "all") targetEls.push(t);
+              if ((r === "shadow" || r === "all") && t.shadowRoot) {
+              }
+            }
+          };
+          if (selector === ":parentHost") applyRoot(hostSet.$parentHost);
+          else if (selector === ":appHost") applyRoot(hostSet.$appHost);
+          else if (selector === ":firstHost") applyRoot(hostSet.$firstHost);
+          else if (selector === ":lastHost") applyRoot(hostSet.$lastHost);
+          else if (selector === ":firstAppHost") applyRoot(hostSet.$firstAppHost);
+          else if (selector === ":lastAppHost") applyRoot(hostSet.$lastAppHost);
+          else if (selector === ":hosts") hostSet.$hosts.forEach(applyRoot);
+          else if (selector === ":appHosts") hostSet.$appHosts.forEach(applyRoot);
+          else if (selector === ":host" || !selector) applyRoot(this);
+          else {
             if (r === "shadow") {
               const found = this.shadowRoot?.querySelectorAll(selector);
-              if (found) targetEls.push(...found);
+              if (found) targetEls.push(...Array.from(found));
             } else if (r === "light") {
               const found = this.querySelectorAll(selector);
-              if (found) targetEls.push(...found);
+              if (found) targetEls.push(...Array.from(found));
             } else if (r === "all") {
               const sFound = this.shadowRoot?.querySelectorAll(selector);
               const lFound = this.querySelectorAll(selector);
-              if (sFound) targetEls.push(...sFound);
-              if (lFound) targetEls.push(...lFound);
+              if (sFound) targetEls.push(...Array.from(sFound));
+              if (lFound) targetEls.push(...Array.from(lFound));
             } else {
               const found = (this.shadowRoot || this).querySelectorAll(selector);
-              if (found) targetEls.push(...found);
+              if (found) targetEls.push(...Array.from(found));
             }
           }
           targetEls.forEach((targetEl) => {
@@ -6537,11 +6842,29 @@ function createStyleDecorator(action) {
   };
 }
 var setStyle = (selector, options = {}) => createStyleDecorator("set")(selector, options);
-var setStyleHost = (options = {}) => createStyleDecorator("set")(":host", options);
+function setStyleHost(targetOrOptions, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = createStyleDecorator("set")(":host", {});
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return createStyleDecorator("set")(":host", targetOrOptions || {});
+}
 var updateStyle = (selector, options = {}) => createStyleDecorator("update")(selector, options);
-var updateStyleHost = (options = {}) => createStyleDecorator("update")(":host", options);
+function updateStyleHost(targetOrOptions, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = createStyleDecorator("update")(":host", {});
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return createStyleDecorator("update")(":host", targetOrOptions || {});
+}
 var removeStyle = (selector, options = {}) => createStyleDecorator("remove")(selector, options);
-var removeStyleHost = (options = {}) => createStyleDecorator("remove")(":host", options);
+function removeStyleHost(targetOrOptions, propertyKey, descriptor) {
+  if (propertyKey !== void 0) {
+    const decorator = createStyleDecorator("remove")(":host", {});
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return createStyleDecorator("remove")(":host", targetOrOptions || {});
+}
 var findAllStyleMetadata = (target) => {
   const result = /* @__PURE__ */ new Map();
   const maps = ReflectUtils.findAllMetadata(STYLE_METADATA_KEY, target);
@@ -6555,6 +6878,131 @@ var findAllStyleMetadata = (target) => {
 
 // src/utils/Utils.ts
 var SWC_NOT_FOUND = Symbol("SWC_NOT_FOUND");
+var htmlFragment = (html, doc) => {
+  const d = doc || (typeof document !== "undefined" ? document : void 0);
+  if (!d) throw new Error("Document is not available");
+  const template = d.createElement("template");
+  template.innerHTML = html.trim();
+  return template.content;
+};
+var textNode = (text, doc) => {
+  const d = doc || (typeof document !== "undefined" ? document : void 0);
+  if (!d) throw new Error("Document is not available");
+  return d.createTextNode(text !== void 0 && text !== null ? String(text) : "");
+};
+var commentNode = (comment, doc) => {
+  const d = doc || (typeof document !== "undefined" ? document : void 0);
+  if (!d) throw new Error("Document is not available");
+  return d.createComment(comment !== void 0 && comment !== null ? String(comment) : "");
+};
+var createElement = (tagName, options) => {
+  const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+  if (!d) throw new Error("Document is not available");
+  const el = d.createElement(tagName);
+  if (options?.html) el.innerHTML = options.html;
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+var htmlDivElement = (html, options) => {
+  const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+  if (!d) throw new Error("Document is not available");
+  const el = d.createElement("div");
+  el.innerHTML = html.trim();
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+var htmlSpanElement = (html, options) => {
+  const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+  if (!d) throw new Error("Document is not available");
+  const el = d.createElement("span");
+  el.innerHTML = html.trim();
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+var htmlButtonElement = (html, options) => {
+  const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+  if (!d) throw new Error("Document is not available");
+  const el = d.createElement("button");
+  el.innerHTML = html.trim();
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+var htmlUlElement = (options) => {
+  const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+  if (!d) throw new Error("Document is not available");
+  const el = d.createElement("ul");
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+var htmlLiElement = (html, options) => {
+  const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+  if (!d) throw new Error("Document is not available");
+  const el = d.createElement("li");
+  el.innerHTML = html.trim();
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+var htmlAElement = (html, options) => {
+  const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+  if (!d) throw new Error("Document is not available");
+  const el = d.createElement("a");
+  el.innerHTML = html.trim();
+  if (options?.href) el.href = options.href;
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+var htmlPElement = (html, options) => {
+  const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+  if (!d) throw new Error("Document is not available");
+  const el = d.createElement("p");
+  el.innerHTML = html.trim();
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+var htmlHeadingElement = (level, html, options) => {
+  const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+  if (!d) throw new Error("Document is not available");
+  const el = d.createElement(`h${level}`);
+  el.innerHTML = html.trim();
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+var htmlSectionElement = (options) => {
+  const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+  if (!d) throw new Error("Document is not available");
+  const el = d.createElement("section");
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+var htmlArticleElement = (options) => {
+  const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+  if (!d) throw new Error("Document is not available");
+  const el = d.createElement("article");
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
 var SwcUtils;
 ((SwcUtils2) => {
   SwcUtils2.getHelperSet = (win) => {
@@ -6617,7 +7065,7 @@ var SwcUtils;
   };
   SwcUtils2.getAppHosts = (el) => {
     const hosts = (0, SwcUtils2.getHosts)(el);
-    return hosts.filter((host) => host.tagName.toLowerCase() === "swc-app" || host.getAttribute("is")?.startsWith("swc-app-"));
+    return hosts.filter((host2) => host2.tagName.toLowerCase() === "swc-app" || host2.getAttribute("is")?.startsWith("swc-app-"));
   };
   SwcUtils2.getAppHost = (el) => {
     const appHosts = (0, SwcUtils2.getAppHosts)(el);
@@ -6874,9 +7322,9 @@ var handleGlobalSwcEvent = async (event) => {
     if (!(node instanceof HTMLElement)) continue;
     const script = node.getAttribute?.(attrName);
     if (script && !getElementConfig(node)) {
-      const host = SwcUtils.findNearestSwcHost(node);
-      if (host && host.isConnected && typeof host.__swc_executeAttributeEvent === "function") {
-        await host.__swc_executeAttributeEvent(node, attrName, script, event);
+      const host2 = SwcUtils.findNearestSwcHost(node);
+      if (host2 && host2.isConnected && typeof host2.__swc_executeAttributeEvent === "function") {
+        await host2.__swc_executeAttributeEvent(node, attrName, script, event);
         event.__swc_handled = true;
         break;
       }
@@ -8074,74 +8522,6 @@ var ValidUtils2;
     return /Mobi/i.test(targetWindow.navigator.userAgent);
   };
 })(ValidUtils2 || (ValidUtils2 = {}));
-
-// src/utils/TemplateUtils.ts
-var TemplateUtils;
-((TemplateUtils2) => {
-  TemplateUtils2.htmlFragment = (strings, ...values) => {
-    const raw = strings.reduce((acc, str, i) => acc + str + (values[i] !== void 0 ? values[i] : ""), "");
-    const template = document.createElement("template");
-    template.innerHTML = raw.trim();
-    return template.content;
-  };
-  TemplateUtils2.textNode = (strings, ...values) => {
-    const raw = strings.reduce((acc, str, i) => acc + str + (values[i] !== void 0 ? values[i] : ""), "");
-    return document.createTextNode(raw);
-  };
-  TemplateUtils2.commentNode = (strings, ...values) => {
-    const raw = strings.reduce((acc, str, i) => acc + str + (values[i] !== void 0 ? values[i] : ""), "");
-    return document.createComment(raw);
-  };
-  TemplateUtils2.createElement = (info, attrs = {}) => {
-    const el = document.createElement(info.tagName);
-    if (info.innerHtml !== void 0) el.innerHTML = info.innerHtml;
-    Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
-    return el;
-  };
-  const createTagFunction = (tagName) => {
-    return (strings, ...values) => {
-      const el = document.createElement(tagName);
-      el.innerHTML = strings.reduce((acc, str, i) => acc + str + (values[i] !== void 0 ? values[i] : ""), "");
-      return el;
-    };
-  };
-  TemplateUtils2.htmlDivElement = createTagFunction("div");
-  TemplateUtils2.htmlSpanElement = createTagFunction("span");
-  TemplateUtils2.htmlButtonElement = createTagFunction("button");
-  TemplateUtils2.htmlUlElement = createTagFunction("ul");
-  TemplateUtils2.htmlLiElement = createTagFunction("li");
-  TemplateUtils2.htmlInputElement = createTagFunction("input");
-  TemplateUtils2.htmlAElement = createTagFunction("a");
-  TemplateUtils2.htmlPElement = createTagFunction("p");
-  TemplateUtils2.htmlH1Element = createTagFunction("h1");
-  TemplateUtils2.htmlH2Element = createTagFunction("h2");
-  TemplateUtils2.htmlH3Element = createTagFunction("h3");
-  TemplateUtils2.htmlH4Element = createTagFunction("h4");
-  TemplateUtils2.htmlH5Element = createTagFunction("h5");
-  TemplateUtils2.htmlH6Element = createTagFunction("h6");
-  TemplateUtils2.htmlSectionElement = createTagFunction("section");
-  TemplateUtils2.htmlArticleElement = createTagFunction("article");
-})(TemplateUtils || (TemplateUtils = {}));
-var htmlFragment = TemplateUtils.htmlFragment;
-var textNode = TemplateUtils.textNode;
-var commentNode = TemplateUtils.commentNode;
-var createElement = TemplateUtils.createElement;
-var htmlDivElement = TemplateUtils.htmlDivElement;
-var htmlSpanElement = TemplateUtils.htmlSpanElement;
-var htmlButtonElement = TemplateUtils.htmlButtonElement;
-var htmlUlElement = TemplateUtils.htmlUlElement;
-var htmlLiElement = TemplateUtils.htmlLiElement;
-var htmlInputElement = TemplateUtils.htmlInputElement;
-var htmlAElement = TemplateUtils.htmlAElement;
-var htmlPElement = TemplateUtils.htmlPElement;
-var htmlH1Element = TemplateUtils.htmlH1Element;
-var htmlH2Element = TemplateUtils.htmlH2Element;
-var htmlH3Element = TemplateUtils.htmlH3Element;
-var htmlH4Element = TemplateUtils.htmlH4Element;
-var htmlH5Element = TemplateUtils.htmlH5Element;
-var htmlH6Element = TemplateUtils.htmlH6Element;
-var htmlSectionElement = TemplateUtils.htmlSectionElement;
-var htmlArticleElement = TemplateUtils.htmlArticleElement;
 export {
   ADD_EVENT_LISTENER_METADATA_KEY,
   APPLY_NODE_METADATA_KEY,
@@ -8170,11 +8550,18 @@ export {
   STYLE_METADATA_KEY,
   SWC_NOT_FOUND,
   SwcUtils,
-  TemplateUtils,
   addClassList,
   addClassListHost,
   addEventListener,
   addEventListenerHost,
+  allAppHost,
+  allFirstAppHost,
+  allFirstHost,
+  allHost,
+  allLastAppHost,
+  allLastHost,
+  allParentHost,
+  appHost,
   applyAfterBeginNode,
   applyAfterBeginNodeHost,
   applyAfterEndNode,
@@ -8211,6 +8598,8 @@ export {
   findAllLifecycleMetadata,
   findAllSetAttributeMetadata,
   findAllStyleMetadata,
+  firstAppHost,
+  firstHost,
   getAddEventListenerMetadata,
   getChangedAttributeMetadata,
   getElementConfig,
@@ -8219,23 +8608,20 @@ export {
   getQueryAllMetadata,
   getQueryMetadata,
   getSetAttributeMetadata,
+  host,
   htmlAElement,
   htmlArticleElement,
   htmlButtonElement,
   htmlDivElement,
   htmlFragment,
-  htmlH1Element,
-  htmlH2Element,
-  htmlH3Element,
-  htmlH4Element,
-  htmlH5Element,
-  htmlH6Element,
-  htmlInputElement,
+  htmlHeadingElement,
   htmlLiElement,
   htmlPElement,
   htmlSectionElement,
   htmlSpanElement,
   htmlUlElement,
+  lastAppHost,
+  lastHost,
   onAddEventListener,
   onAdopted,
   onAfterAdopted,
@@ -8248,6 +8634,7 @@ export {
   onConnectedInnerHtml,
   onConstructor,
   onDisconnected,
+  parentHost,
   query,
   queryAll,
   queryAllHost,