@dooboostore/simple-web-component 1.0.22 → 1.0.23

package/dist/esm/utils/TemplateUtils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/TemplateUtils.ts"],
-  "sourcesContent": ["export interface CreateElementInfo {\n  tagName: string;\n  innerHtml?: string;\n}\n\nexport namespace TemplateUtils {\n  /**\n   * Tagged template function to create a DocumentFragment from HTML string.\n   */\n  export const htmlFragment = (strings: TemplateStringsArray, ...values: any[]): DocumentFragment => {\n    const raw = strings.reduce((acc, str, i) => acc + str + (values[i] !== undefined ? values[i] : ''), '');\n    const template = document.createElement('template');\n    template.innerHTML = raw.trim();\n    return template.content;\n  };\n\n  /**\n   * Tagged template function to create a Text node from string.\n   */\n  export const textNode = (strings: TemplateStringsArray, ...values: any[]): Text => {\n    const raw = strings.reduce((acc, str, i) => acc + str + (values[i] !== undefined ? values[i] : ''), '');\n    return document.createTextNode(raw);\n  };\n\n  /**\n   * Generic element creator using a configuration object and attribute map.\n   */\n  export const createElement = <T extends HTMLElement>(info: CreateElementInfo, attrs: Record<string, any> = {}): T => {\n    const el = document.createElement(info.tagName) as T;\n    if (info.innerHtml !== undefined) el.innerHTML = info.innerHtml;\n    Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));\n    return el;\n  };\n\n  /**\n   * Internal factory to create tagged template functions for specific HTML elements.\n   */\n  const createTagFunction = <T extends HTMLElement>(tagName: string) => {\n    return (strings: TemplateStringsArray, ...values: any[]): T => {\n      const el = document.createElement(tagName) as T;\n      el.innerHTML = strings.reduce((acc, str, i) => acc + str + (values[i] !== undefined ? values[i] : ''), '');\n      return el;\n    };\n  };\n\n  // Specific Element Factories\n  export const htmlDivElement = createTagFunction<HTMLDivElement>('div');\n  export const htmlSpanElement = createTagFunction<HTMLSpanElement>('span');\n  export const htmlButtonElement = createTagFunction<HTMLButtonElement>('button');\n  export const htmlUlElement = createTagFunction<HTMLUListElement>('ul');\n  export const htmlLiElement = createTagFunction<HTMLLIElement>('li');\n  export const htmlInputElement = createTagFunction<HTMLInputElement>('input');\n  export const htmlAElement = createTagFunction<HTMLAnchorElement>('a');\n  export const htmlPElement = createTagFunction<HTMLParagraphElement>('p');\n  export const htmlH1Element = createTagFunction<HTMLHeadingElement>('h1');\n  export const htmlH2Element = createTagFunction<HTMLHeadingElement>('h2');\n  export const htmlH3Element = createTagFunction<HTMLHeadingElement>('h3');\n  export const htmlH4Element = createTagFunction<HTMLHeadingElement>('h4');\n  export const htmlH5Element = createTagFunction<HTMLHeadingElement>('h5');\n  export const htmlH6Element = createTagFunction<HTMLHeadingElement>('h6');\n  export const htmlSectionElement = createTagFunction<HTMLElement>('section');\n  export const htmlArticleElement = createTagFunction<HTMLElement>('article');\n}\n\nexport const htmlFragment = TemplateUtils.htmlFragment;\nexport const textNode = TemplateUtils.textNode;\nexport const createElement = TemplateUtils.createElement;\nexport const htmlDivElement = TemplateUtils.htmlDivElement;\nexport const htmlSpanElement = TemplateUtils.htmlSpanElement;\nexport const htmlButtonElement = TemplateUtils.htmlButtonElement;\nexport const htmlUlElement = TemplateUtils.htmlUlElement;\nexport const htmlLiElement = TemplateUtils.htmlLiElement;\nexport const htmlInputElement = TemplateUtils.htmlInputElement;\nexport const htmlAElement = TemplateUtils.htmlAElement;\nexport const htmlPElement = TemplateUtils.htmlPElement;\nexport const htmlH1Element = TemplateUtils.htmlH1Element;\nexport const htmlH2Element = TemplateUtils.htmlH2Element;\nexport const htmlH3Element = TemplateUtils.htmlH3Element;\nexport const htmlH4Element = TemplateUtils.htmlH4Element;\nexport const htmlH5Element = TemplateUtils.htmlH5Element;\nexport const htmlH6Element = TemplateUtils.htmlH6Element;\nexport const htmlSectionElement = TemplateUtils.htmlSectionElement;\nexport const htmlArticleElement = TemplateUtils.htmlArticleElement;\n"],
-  "mappings": "AAKO,IAAU;AAAA,CAAV,CAAUA,mBAAV;AAIE,EAAMA,eAAA,eAAe,CAAC,YAAkC,WAAoC;AACjG,UAAM,MAAM,QAAQ,OAAO,CAAC,KAAK,KAAK,MAAM,MAAM,OAAO,OAAO,CAAC,MAAM,SAAY,OAAO,CAAC,IAAI,KAAK,EAAE;AACtG,UAAM,WAAW,SAAS,cAAc,UAAU;AAClD,aAAS,YAAY,IAAI,KAAK;AAC9B,WAAO,SAAS;AAAA,EAClB;AAKO,EAAMA,eAAA,WAAW,CAAC,YAAkC,WAAwB;AACjF,UAAM,MAAM,QAAQ,OAAO,CAAC,KAAK,KAAK,MAAM,MAAM,OAAO,OAAO,CAAC,MAAM,SAAY,OAAO,CAAC,IAAI,KAAK,EAAE;AACtG,WAAO,SAAS,eAAe,GAAG;AAAA,EACpC;AAKO,EAAMA,eAAA,gBAAgB,CAAwB,MAAyB,QAA6B,CAAC,MAAS;AACnH,UAAM,KAAK,SAAS,cAAc,KAAK,OAAO;AAC9C,QAAI,KAAK,cAAc,OAAW,IAAG,YAAY,KAAK;AACtD,WAAO,QAAQ,KAAK,EAAE,QAAQ,CAAC,CAAC,GAAG,CAAC,MAAM,GAAG,aAAa,GAAG,OAAO,CAAC,CAAC,CAAC;AACvE,WAAO;AAAA,EACT;AAKA,QAAM,oBAAoB,CAAwB,YAAoB;AACpE,WAAO,CAAC,YAAkC,WAAqB;AAC7D,YAAM,KAAK,SAAS,cAAc,OAAO;AACzC,SAAG,YAAY,QAAQ,OAAO,CAAC,KAAK,KAAK,MAAM,MAAM,OAAO,OAAO,CAAC,MAAM,SAAY,OAAO,CAAC,IAAI,KAAK,EAAE;AACzG,aAAO;AAAA,IACT;AAAA,EACF;AAGO,EAAMA,eAAA,iBAAiB,kBAAkC,KAAK;AAC9D,EAAMA,eAAA,kBAAkB,kBAAmC,MAAM;AACjE,EAAMA,eAAA,oBAAoB,kBAAqC,QAAQ;AACvE,EAAMA,eAAA,gBAAgB,kBAAoC,IAAI;AAC9D,EAAMA,eAAA,gBAAgB,kBAAiC,IAAI;AAC3D,EAAMA,eAAA,mBAAmB,kBAAoC,OAAO;AACpE,EAAMA,eAAA,eAAe,kBAAqC,GAAG;AAC7D,EAAMA,eAAA,eAAe,kBAAwC,GAAG;AAChE,EAAMA,eAAA,gBAAgB,kBAAsC,IAAI;AAChE,EAAMA,eAAA,gBAAgB,kBAAsC,IAAI;AAChE,EAAMA,eAAA,gBAAgB,kBAAsC,IAAI;AAChE,EAAMA,eAAA,gBAAgB,kBAAsC,IAAI;AAChE,EAAMA,eAAA,gBAAgB,kBAAsC,IAAI;AAChE,EAAMA,eAAA,gBAAgB,kBAAsC,IAAI;AAChE,EAAMA,eAAA,qBAAqB,kBAA+B,SAAS;AACnE,EAAMA,eAAA,qBAAqB,kBAA+B,SAAS;AAAA,GAxD3D;AA2DV,MAAM,eAAe,cAAc;AACnC,MAAM,WAAW,cAAc;AAC/B,MAAM,gBAAgB,cAAc;AACpC,MAAM,iBAAiB,cAAc;AACrC,MAAM,kBAAkB,cAAc;AACtC,MAAM,oBAAoB,cAAc;AACxC,MAAM,gBAAgB,cAAc;AACpC,MAAM,gBAAgB,cAAc;AACpC,MAAM,mBAAmB,cAAc;AACvC,MAAM,eAAe,cAAc;AACnC,MAAM,eAAe,cAAc;AACnC,MAAM,gBAAgB,cAAc;AACpC,MAAM,gBAAgB,cAAc;AACpC,MAAM,gBAAgB,cAAc;AACpC,MAAM,gBAAgB,cAAc;AACpC,MAAM,gBAAgB,cAAc;AACpC,MAAM,gBAAgB,cAAc;AACpC,MAAM,qBAAqB,cAAc;AACzC,MAAM,qBAAqB,cAAc;",
+  "sourcesContent": ["export interface CreateElementInfo {\n  tagName: string;\n  innerHtml?: string;\n}\n\nexport namespace TemplateUtils {\n  /**\n   * Tagged template function to create a DocumentFragment from HTML string.\n   */\n  export const htmlFragment = (strings: TemplateStringsArray, ...values: any[]): DocumentFragment => {\n    const raw = strings.reduce((acc, str, i) => acc + str + (values[i] !== undefined ? values[i] : ''), '');\n    const template = document.createElement('template');\n    template.innerHTML = raw.trim();\n    return template.content;\n  };\n\n  /**\n   * Tagged template function to create a Text node from string.\n   */\n  export const textNode = (strings: TemplateStringsArray, ...values: any[]): Text => {\n    const raw = strings.reduce((acc, str, i) => acc + str + (values[i] !== undefined ? values[i] : ''), '');\n    return document.createTextNode(raw);\n  };\n\n  /**\n   * Tagged template function to create a Comment node from string.\n   */\n  export const commentNode = (strings: TemplateStringsArray, ...values: any[]): Comment => {\n    const raw = strings.reduce((acc, str, i) => acc + str + (values[i] !== undefined ? values[i] : ''), '');\n    return document.createComment(raw);\n  };\n\n  /**\n   * Generic element creator using a configuration object and attribute map.\n   */\n  export const createElement = <T extends HTMLElement>(info: CreateElementInfo, attrs: Record<string, any> = {}): T => {\n    const el = document.createElement(info.tagName) as T;\n    if (info.innerHtml !== undefined) el.innerHTML = info.innerHtml;\n    Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));\n    return el;\n  };\n\n  /**\n   * Internal factory to create tagged template functions for specific HTML elements.\n   */\n  const createTagFunction = <T extends HTMLElement>(tagName: string) => {\n    return (strings: TemplateStringsArray, ...values: any[]): T => {\n      const el = document.createElement(tagName) as T;\n      el.innerHTML = strings.reduce((acc, str, i) => acc + str + (values[i] !== undefined ? values[i] : ''), '');\n      return el;\n    };\n  };\n\n  // Specific Element Factories\n  export const htmlDivElement = createTagFunction<HTMLDivElement>('div');\n  export const htmlSpanElement = createTagFunction<HTMLSpanElement>('span');\n  export const htmlButtonElement = createTagFunction<HTMLButtonElement>('button');\n  export const htmlUlElement = createTagFunction<HTMLUListElement>('ul');\n  export const htmlLiElement = createTagFunction<HTMLLIElement>('li');\n  export const htmlInputElement = createTagFunction<HTMLInputElement>('input');\n  export const htmlAElement = createTagFunction<HTMLAnchorElement>('a');\n  export const htmlPElement = createTagFunction<HTMLParagraphElement>('p');\n  export const htmlH1Element = createTagFunction<HTMLHeadingElement>('h1');\n  export const htmlH2Element = createTagFunction<HTMLHeadingElement>('h2');\n  export const htmlH3Element = createTagFunction<HTMLHeadingElement>('h3');\n  export const htmlH4Element = createTagFunction<HTMLHeadingElement>('h4');\n  export const htmlH5Element = createTagFunction<HTMLHeadingElement>('h5');\n  export const htmlH6Element = createTagFunction<HTMLHeadingElement>('h6');\n  export const htmlSectionElement = createTagFunction<HTMLElement>('section');\n  export const htmlArticleElement = createTagFunction<HTMLElement>('article');\n}\n\nexport const htmlFragment = TemplateUtils.htmlFragment;\nexport const textNode = TemplateUtils.textNode;\nexport const commentNode = TemplateUtils.commentNode;\nexport const createElement = TemplateUtils.createElement;\nexport const htmlDivElement = TemplateUtils.htmlDivElement;\nexport const htmlSpanElement = TemplateUtils.htmlSpanElement;\nexport const htmlButtonElement = TemplateUtils.htmlButtonElement;\nexport const htmlUlElement = TemplateUtils.htmlUlElement;\nexport const htmlLiElement = TemplateUtils.htmlLiElement;\nexport const htmlInputElement = TemplateUtils.htmlInputElement;\nexport const htmlAElement = TemplateUtils.htmlAElement;\nexport const htmlPElement = TemplateUtils.htmlPElement;\nexport const htmlH1Element = TemplateUtils.htmlH1Element;\nexport const htmlH2Element = TemplateUtils.htmlH2Element;\nexport const htmlH3Element = TemplateUtils.htmlH3Element;\nexport const htmlH4Element = TemplateUtils.htmlH4Element;\nexport const htmlH5Element = TemplateUtils.htmlH5Element;\nexport const htmlH6Element = TemplateUtils.htmlH6Element;\nexport const htmlSectionElement = TemplateUtils.htmlSectionElement;\nexport const htmlArticleElement = TemplateUtils.htmlArticleElement;\n"],
+  "mappings": "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",
   "names": ["TemplateUtils"]
 }

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

@@ -5715,30 +5715,6 @@ var Expression;
   })(Path = Expression2.Path || (Expression2.Path = {}));
 })(Expression || (Expression = {}));
 
-// src/decorators/onConnectedInnerHtml.ts
-var INNER_HTML_METADATA_KEY = Symbol("simple-web-component:inner-html");
-function onConnectedInnerHtml(arg1, arg2, arg3) {
-  const decorator = (options, target, propertyKey) => {
-    const constructor = target.constructor;
-    let list = ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
-    if (!list) {
-      list = [];
-      ReflectUtils.defineMetadata(INNER_HTML_METADATA_KEY, list, constructor);
-    }
-    list.push({ propertyKey, options });
-  };
-  if (arg2) {
-    return decorator({}, arg1, arg2);
-  }
-  return (target, propertyKey) => {
-    decorator(arg1 || {}, target, propertyKey);
-  };
-}
-var getOnConnectedInnerHtmlMetadata = (target) => {
-  const constructor = target instanceof Function ? target : target.constructor;
-  return ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
-};
-
 // src/decorators/addEventListener.ts
 var ADD_EVENT_LISTENER_METADATA_KEY = Symbol("simple-web-component:add-event-listener");
 function addEventListener(selectorOrTarget, type, options = {}) {
@@ -5769,6 +5745,7 @@ var ON_AFTER_DISCONNECTED_METADATA_KEY = Symbol("simple-web-component:on-after-d
 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 INNER_HTML_METADATA_KEY = Symbol("simple-web-component:inner-html");
 var ATTRIBUTE_CHANGED_WILDCARD = "*";
 function createLifecycleDecorator(metadataKey) {
   return (target, propertyKey) => {
@@ -5792,10 +5769,31 @@ 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 onConnectedInnerHtml(arg1, arg2, arg3) {
+  const decorator = (options, target, propertyKey) => {
+    const constructor = target.constructor;
+    let list = ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
+    if (!list) {
+      list = [];
+      ReflectUtils.defineMetadata(INNER_HTML_METADATA_KEY, list, constructor);
+    }
+    list.push({ propertyKey, options });
+  };
+  if (arg2) {
+    return decorator({}, arg1, arg2);
+  }
+  return (target, propertyKey) => {
+    decorator(arg1 || {}, target, propertyKey);
+  };
+}
 var findAllLifecycleMetadata = (target, metadataKey) => {
   const results = ReflectUtils.findAllMetadataFlatten(metadataKey, target);
   return results.length > 0 ? results : void 0;
 };
+var getOnConnectedInnerHtmlMetadata = (target) => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
+};
 
 // src/decorators/attribute.ts
 var ATTRIBUTE_METADATA_KEY = Symbol("simple-web-component:attribute");
@@ -5899,7 +5897,6 @@ function attribute(selector, options = {}) {
       },
       set(nv) {
         const targetType = options.type || designType;
-        console.log("---set", propertyKey, targetType, nv, this, this.__swc_syncing_init);
         const attrName = options.name || String(propertyKey);
         const conf = getElementConfig(this);
         const currentWin = this._resolveWindow?.(conf) || (typeof window !== "undefined" ? window : void 0);
@@ -6068,32 +6065,70 @@ function applyNode(selector, options = { position: "beforeEnd" }) {
         const conf = getElementConfig(this);
         const currentWin = this._resolveWindow?.(conf) || (typeof window !== "undefined" ? window : void 0);
         const currentDoc = currentWin.document;
-        let targetEl = null;
-        if (selector === ":host" || !selector) {
-          targetEl = this;
+        const pos = options.position || "beforeEnd";
+        const r = options.root || "auto";
+        const getTargetRoot = () => {
+          if (r === "shadow")
+            return this.shadowRoot;
+          if (r === "light")
+            return this;
+          if (r === "all")
+            return this.shadowRoot || this;
+          return this.shadowRoot || this;
+        };
+        if (pos === "remove") {
+          if (res) {
+            if (selector === ":host" || !selector) {
+              if (r === "shadow" && this.shadowRoot) {
+                this.shadowRoot.replaceChildren();
+              } else {
+                this.remove();
+              }
+            } else {
+              const targetRoot = getTargetRoot();
+              if (targetRoot) {
+                const targets = targetRoot.querySelectorAll(selector);
+                targets.forEach((el) => el.remove());
+              }
+            }
+          }
         } else {
-          targetEl = (this.shadowRoot || this).querySelector(selector);
-        }
-        if (targetEl) {
-          const nodes = normalizeNodes(res, currentDoc);
-          const pos = options.position || "beforeEnd";
-          if (pos === "replace") {
-            targetEl.replaceWith(...nodes);
-          } else if (pos === "replaceChildren") {
-            targetEl.replaceChildren(...nodes);
-          } else if (pos === "innerHtml") {
-            targetEl.innerHTML = res !== void 0 && res !== null ? String(res) : "";
-          } else if (pos === "innerText") {
-            targetEl.innerText = res !== void 0 && res !== null ? String(res) : "";
+          let targetEl = null;
+          if (selector === ":host" || !selector) {
+            if (r === "shadow") {
+              targetEl = this.shadowRoot;
+            } else {
+              targetEl = this;
+            }
           } else {
-            if (pos === "beforeEnd")
-              targetEl.append(...nodes);
-            else if (pos === "afterBegin")
-              targetEl.prepend(...nodes);
-            else if (pos === "beforeBegin")
-              targetEl.before(...nodes);
-            else if (pos === "afterEnd")
-              targetEl.after(...nodes);
+            const targetRoot = getTargetRoot();
+            targetEl = targetRoot ? targetRoot.querySelector(selector) : null;
+          }
+          if (targetEl) {
+            const isShadowRoot = targetEl instanceof ShadowRoot;
+            const nodes = normalizeNodes(res, currentDoc);
+            if (pos === "replace") {
+              if (!isShadowRoot) {
+                targetEl.replaceWith(...nodes);
+              }
+            } else if (pos === "replaceChildren") {
+              targetEl.replaceChildren(...nodes);
+            } else if (pos === "innerHtml") {
+              targetEl.innerHTML = res !== void 0 && res !== null ? String(res) : "";
+            } else if (pos === "innerText") {
+              if (targetEl.innerText !== void 0) {
+                targetEl.innerText = res !== void 0 && res !== null ? String(res) : "";
+              }
+            } else {
+              if (pos === "beforeEnd")
+                targetEl.append(...nodes);
+              else if (pos === "afterBegin")
+                targetEl.prepend(...nodes);
+              else if (pos === "beforeBegin" && !isShadowRoot)
+                targetEl.before(...nodes);
+              else if (pos === "afterEnd" && !isShadowRoot)
+                targetEl.after(...nodes);
+            }
           }
         }
       }
@@ -6114,6 +6149,24 @@ var findAllApplyNodeMetadata = (target) => {
 function applyNodeHost(options = { position: "beforeEnd" }) {
   return applyNode(":host", options);
 }
+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");
@@ -6321,7 +6374,7 @@ function queryAllHost(options) {
 // src/decorators/classList.ts
 var CLASS_LIST_METADATA_KEY = Symbol("simple-web-component:class-list");
 function createClassListDecorator(action) {
-  return (selector) => {
+  return (selector, options = {}) => {
     return (target, propertyKey, descriptor) => {
       const constructor = target.constructor;
       let metaList = ReflectUtils.getOwnMetadata(CLASS_LIST_METADATA_KEY, constructor);
@@ -6329,19 +6382,39 @@ function createClassListDecorator(action) {
         metaList = /* @__PURE__ */ new Map();
         ReflectUtils.defineMetadata(CLASS_LIST_METADATA_KEY, metaList, constructor);
       }
-      metaList.set(propertyKey, { propertyKey, selector, action });
+      metaList.set(propertyKey, { propertyKey, selector, action, options });
       const original = descriptor.value;
       descriptor.value = async function(...args) {
         ensureInit2(this);
         const res = await original.apply(this, args);
         if (res !== void 0) {
+          const r = options.root || "auto";
           const hostSet = SwcUtils.getHostSet(this);
-          let targetEl = null;
-          if (selector === ":host" || !selector) targetEl = this;
-          else if (selector === ":parentHost") targetEl = hostSet.$parentHost;
-          else if (selector === ":appHost") targetEl = hostSet.$appHost;
-          else targetEl = (this.shadowRoot || this).querySelector(selector);
-          if (targetEl) {
+          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 {
+            if (r === "shadow") {
+              const found = this.shadowRoot?.querySelectorAll(selector);
+              if (found) targetEls.push(...found);
+            } else if (r === "light") {
+              const found = this.querySelectorAll(selector);
+              if (found) targetEls.push(...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);
+            } else {
+              const found = (this.shadowRoot || this).querySelectorAll(selector);
+              if (found) targetEls.push(...found);
+            }
+          }
+          targetEls.forEach((targetEl) => {
             if (action === "set") {
               let classes = "";
               if (typeof res === "object" && res !== null && !Array.isArray(res)) {
@@ -6369,23 +6442,23 @@ function createClassListDecorator(action) {
               const classes = Array.isArray(res) ? res.map(String) : [String(res)];
               classes.forEach((c) => targetEl.classList.toggle(c));
             }
-          }
+          });
         }
         return res;
       };
     };
   };
 }
-var setClassList = createClassListDecorator("set");
-var updateClassList = createClassListDecorator("update");
-var addClassList = createClassListDecorator("add");
-var removeClassList = createClassListDecorator("remove");
-var toggleClassList = createClassListDecorator("toggle");
-var setClassListHost = createClassListDecorator("set").bind(null, ":host");
-var updateClassListHost = createClassListDecorator("update").bind(null, ":host");
-var addClassListHost = createClassListDecorator("add").bind(null, ":host");
-var removeClassListHost = createClassListDecorator("remove").bind(null, ":host");
-var toggleClassListHost = createClassListDecorator("toggle").bind(null, ":host");
+var setClassList = (selector, options = {}) => createClassListDecorator("set")(selector, options);
+var updateClassList = (selector, options = {}) => createClassListDecorator("update")(selector, options);
+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);
 var findAllClassListMetadata = (target) => {
   const result = /* @__PURE__ */ new Map();
   const maps = ReflectUtils.findAllMetadata(CLASS_LIST_METADATA_KEY, target);
@@ -6400,7 +6473,7 @@ var findAllClassListMetadata = (target) => {
 // src/decorators/style.ts
 var STYLE_METADATA_KEY = Symbol("simple-web-component:style");
 function createStyleDecorator(action) {
-  return (selector) => {
+  return (selector, options = {}) => {
     return (target, propertyKey, descriptor) => {
       const constructor = target.constructor;
       let metaList = ReflectUtils.getOwnMetadata(STYLE_METADATA_KEY, constructor);
@@ -6408,19 +6481,39 @@ function createStyleDecorator(action) {
         metaList = /* @__PURE__ */ new Map();
         ReflectUtils.defineMetadata(STYLE_METADATA_KEY, metaList, constructor);
       }
-      metaList.set(propertyKey, { propertyKey, selector, action });
+      metaList.set(propertyKey, { propertyKey, selector, action, options });
       const original = descriptor.value;
       descriptor.value = async function(...args) {
         ensureInit2(this);
         const res = await original.apply(this, args);
         if (res !== void 0) {
+          const r = options.root || "auto";
           const hostSet = SwcUtils.getHostSet(this);
-          let targetEl = null;
-          if (selector === ":host" || !selector) targetEl = this;
-          else if (selector === ":parentHost") targetEl = hostSet.$parentHost;
-          else if (selector === ":appHost") targetEl = hostSet.$appHost;
-          else targetEl = (this.shadowRoot || this).querySelector(selector);
-          if (targetEl) {
+          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 {
+            if (r === "shadow") {
+              const found = this.shadowRoot?.querySelectorAll(selector);
+              if (found) targetEls.push(...found);
+            } else if (r === "light") {
+              const found = this.querySelectorAll(selector);
+              if (found) targetEls.push(...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);
+            } else {
+              const found = (this.shadowRoot || this).querySelectorAll(selector);
+              if (found) targetEls.push(...found);
+            }
+          }
+          targetEls.forEach((targetEl) => {
             if (action === "set") {
               targetEl.style.cssText = "";
               if (typeof res === "object" && res !== null) {
@@ -6436,16 +6529,19 @@ function createStyleDecorator(action) {
               const props = Array.isArray(res) ? res : [res];
               props.forEach((p) => targetEl.style.removeProperty(String(p)));
             }
-          }
+          });
         }
         return res;
       };
     };
   };
 }
-var setStyle = createStyleDecorator("set");
-var updateStyle = createStyleDecorator("update");
-var removeStyle = createStyleDecorator("remove");
+var setStyle = (selector, options = {}) => createStyleDecorator("set")(selector, options);
+var setStyleHost = (options = {}) => createStyleDecorator("set")(":host", options);
+var updateStyle = (selector, options = {}) => createStyleDecorator("update")(selector, options);
+var updateStyleHost = (options = {}) => createStyleDecorator("update")(":host", options);
+var removeStyle = (selector, options = {}) => createStyleDecorator("remove")(selector, options);
+var removeStyleHost = (options = {}) => createStyleDecorator("remove")(":host", options);
 var findAllStyleMetadata = (target) => {
   const result = /* @__PURE__ */ new Map();
   const maps = ReflectUtils.findAllMetadata(STYLE_METADATA_KEY, target);
@@ -7992,6 +8088,10 @@ var TemplateUtils;
     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;
@@ -8024,6 +8124,7 @@ var TemplateUtils;
 })(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;
@@ -8074,11 +8175,30 @@ export {
   addClassListHost,
   addEventListener,
   addEventListenerHost,
+  applyAfterBeginNode,
+  applyAfterBeginNodeHost,
+  applyAfterEndNode,
+  applyAfterEndNodeHost,
+  applyBeforeBeginNode,
+  applyBeforeBeginNodeHost,
+  applyBeforeEndNode,
+  applyBeforeEndNodeHost,
+  applyInnerHtmlNode,
+  applyInnerHtmlNodeHost,
+  applyInnerTextNode,
+  applyInnerTextNodeHost,
   applyNode,
   applyNodeHost,
+  applyRemoveNode,
+  applyRemoveNodeHost,
+  applyReplaceChildrenNode,
+  applyReplaceChildrenNodeHost,
+  applyReplaceNode,
+  applyReplaceNodeHost,
   attribute,
   attributeHost,
   changedAttributeHost,
+  commentNode,
   createElement,
   elementDefine,
   emitCustomEvent,
@@ -8135,18 +8255,21 @@ export {
   removeClassList,
   removeClassListHost,
   removeStyle,
+  removeStyleHost,
   resolveTargetEls,
   setAttribute,
   setAttributeHost,
   setClassList,
   setClassListHost,
   setStyle,
+  setStyleHost,
   textNode,
   toggleClassList,
   toggleClassListHost,
   updateClassList,
   updateClassListHost,
-  updateStyle
+  updateStyle,
+  updateStyleHost
 };
 /*! Bundled license information: