@dooboostore/simple-web-component 1.0.43 → 1.0.45

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

@@ -1158,6 +1158,7 @@ var dooboostoreSimpleWebComponent = (() => {
     SwcAppAside: () => SwcAppAside,
     SwcAppBody: () => SwcAppBody,
     SwcAppDiv: () => SwcAppDiv,
+    SwcAppEngine: () => SwcAppEngine,
     SwcAppFooter: () => SwcAppFooter,
     SwcAppHeader: () => SwcAppHeader,
     SwcAppMain: () => SwcAppMain,
@@ -1166,7 +1167,6 @@ var dooboostoreSimpleWebComponent = (() => {
     SwcAppSection: () => SwcAppSection,
     SwcUtils: () => SwcUtils,
     addClass: () => addClass,
-    addClassThis: () => addClassThis,
     addEventListener: () => addEventListener,
     addEventListenerAppHost: () => addEventListenerAppHost,
     addEventListenerDelegate: () => addEventListenerDelegate,
@@ -1176,28 +1176,21 @@ var dooboostoreSimpleWebComponent = (() => {
     addEventListenerDocument: () => addEventListenerDocument,
     addEventListenerThis: () => addEventListenerThis,
     addEventListenerWindow: () => addEventListenerWindow,
-    afterBeginLightNodeThis: () => afterBeginLightNodeThis,
-    afterBeginNodeThis: () => afterBeginNodeThis,
-    allAppHost: () => allAppHost,
-    allParentHost: () => allParentHost,
     appendHtmlSlot: () => appendHtmlSlot,
     appendSlot: () => appendSlot,
     appendTextSlot: () => appendTextSlot,
     applyAttribute: () => applyAttribute,
     applyClass: () => applyClass,
-    applyClassThis: () => applyClassThis,
     applyNode: () => applyNode,
-    applyNodeThis: () => applyNodeThis,
     applyProperty: () => applyProperty,
     applySlot: () => applySlot,
     applyStyle: () => applyStyle,
-    applyStyleThis: () => applyStyleThis,
     attribute: () => attribute,
-    attributeThis: () => attributeThis,
-    beforeEndLightNodeThis: () => beforeEndLightNodeThis,
-    beforeEndNodeThis: () => beforeEndNodeThis,
-    beforeEndShadowNodeThis: () => beforeEndShadowNodeThis,
-    changedAttributeThis: () => changedAttributeThis,
+    changedAttribute: () => changedAttribute,
+    changedRoute: () => changedRoute,
+    clearChildrenLight: () => clearChildrenLight,
+    clearChildrenNode: () => clearChildrenNode,
+    clearNode: () => clearNode,
     clearSlot: () => clearSlot,
     commentNode: () => commentNode,
     convertAttributeValue: () => convertAttributeValue,
@@ -1217,7 +1210,6 @@ var dooboostoreSimpleWebComponent = (() => {
     elementDefine: () => elementDefine,
     emit: () => emit,
     emitCustomEvent: () => emitCustomEvent,
-    emitCustomEventThis: () => emitCustomEventThis,
     ensureInit: () => ensureInit,
     event: () => event,
     eventDelegate: () => eventDelegate,
@@ -1260,15 +1252,17 @@ var dooboostoreSimpleWebComponent = (() => {
     htmlSectionElement: () => htmlSectionElement,
     htmlSpanElement: () => htmlSpanElement,
     htmlUlElement: () => htmlUlElement,
-    innerHtmlLightNode: () => innerHtmlLightNode,
-    innerHtmlLightNodeThis: () => innerHtmlLightNodeThis,
-    innerHtmlNode: () => innerHtmlNode,
-    innerHtmlNodeThis: () => innerHtmlNodeThis,
-    innerHtmlShadowNode: () => innerHtmlShadowNode,
-    innerTextLightNode: () => innerTextLightNode,
-    innerTextNode: () => innerTextNode,
-    innerTextNodeThis: () => innerTextNodeThis,
-    innerTextShadowNode: () => innerTextShadowNode,
+    innerHtml: () => innerHtml,
+    innerHtmlLight: () => innerHtmlLight,
+    innerHtmlShadow: () => innerHtmlShadow,
+    innerText: () => innerText,
+    innerTextLight: () => innerTextLight,
+    innerTextShadow: () => innerTextShadow,
+    insertAfterBegin: () => insertAfterBegin,
+    insertAfterBeginLight: () => insertAfterBeginLight,
+    insertBeforeEnd: () => insertBeforeEnd,
+    insertBeforeEndLight: () => insertBeforeEndLight,
+    insertBeforeEndShadow: () => insertBeforeEndShadow,
     isSSR: () => isSSR,
     onAdopted: () => onAdopted,
     onAdoptedAfter: () => onAdoptedAfter,
@@ -1288,39 +1282,26 @@ var dooboostoreSimpleWebComponent = (() => {
     prependSlot: () => prependSlot,
     prependTextSlot: () => prependTextSlot,
     property: () => property,
-    propertyThis: () => propertyThis,
-    publish: () => publish,
+    publishMessage: () => publishMessage,
     publishSwcAppMessage: () => publishSwcAppMessage,
     query: () => query,
     queryAll: () => queryAll,
-    queryAllThis: () => queryAllThis,
-    queryAppHost: () => queryAppHost,
-    queryDocument: () => queryDocument,
-    queryHost: () => queryHost,
-    queryThis: () => queryThis,
-    queryWindow: () => queryWindow,
+    receiveMessage: () => receiveMessage,
     removeClass: () => removeClass,
-    removeClassThis: () => removeClassThis,
     removeSSRAttribute: () => removeSSRAttribute,
     removeStyle: () => removeStyle,
-    removeStyleThis: () => removeStyleThis,
+    replaceChildren: () => replaceChildren,
     replaceChildrenHtmlSlot: () => replaceChildrenHtmlSlot,
-    replaceChildrenLightNodeThis: () => replaceChildrenLightNodeThis,
-    replaceChildrenNode: () => replaceChildrenNode,
-    replaceChildrenNodeThis: () => replaceChildrenNodeThis,
+    replaceChildrenLight: () => replaceChildrenLight,
     replaceChildrenSlot: () => replaceChildrenSlot,
     replaceChildrenTextSlot: () => replaceChildrenTextSlot,
     resolveAttributeTargets: () => resolveAttributeTargets,
     resolvePropertyTargets: () => resolvePropertyTargets,
     setAttribute: () => setAttribute,
-    setAttributeThis: () => setAttributeThis,
     setClass: () => setClass,
-    setClassThis: () => setClassThis,
     setProperty: () => setProperty,
-    setPropertyThis: () => setPropertyThis,
     setSSRAttribute: () => setSSRAttribute,
     setStyle: () => setStyle,
-    setStyleThis: () => setStyleThis,
     state: () => state,
     subscribeSwcAppMessageWhileConnected: () => subscribeSwcAppMessageWhileConnected,
     subscribeSwcAppRouteChangeWhileConnected: () => subscribeSwcAppRouteChangeWhileConnected,
@@ -1337,11 +1318,8 @@ var dooboostoreSimpleWebComponent = (() => {
     swcAppTagName: () => swcAppTagName,
     textNode: () => textNode,
     toggleClass: () => toggleClass,
-    toggleClassThis: () => toggleClassThis,
     updateClass: () => updateClass,
-    updateClassThis: () => updateClassThis,
-    updateStyle: () => updateStyle,
-    updateStyleThis: () => updateStyleThis
+    updateStyle: () => updateStyle
   });
   var import_reflect_metadata3 = __toESM(require_Reflect(), 1);
 
@@ -6573,6 +6551,155 @@ var dooboostoreSimpleWebComponent = (() => {
     return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
   };
 
+  // ../core/dist/esm/message/operators/debounceTime.js
+  function debounceTime(duration, config) {
+    return (source) => {
+      return new Observable((subscriber) => {
+        const setTimeoutFn = config?.setTimeout || setTimeout;
+        const clearTimeoutFn = config?.clearTimeout || clearTimeout;
+        let timeoutId = null;
+        let lastValue;
+        let hasValue = false;
+        const subscription = source.subscribe({
+          next: (value) => {
+            clearTimeoutFn(timeoutId);
+            lastValue = value;
+            hasValue = true;
+            timeoutId = setTimeoutFn(() => {
+              if (hasValue) {
+                subscriber.next(lastValue);
+                hasValue = false;
+              }
+            }, duration);
+          },
+          error: (err) => {
+            clearTimeoutFn(timeoutId);
+            subscriber.error(err);
+          },
+          complete: () => {
+            clearTimeoutFn(timeoutId);
+            if (hasValue) {
+              subscriber.next(lastValue);
+            }
+            subscriber.complete();
+          }
+        });
+        return subscription;
+      });
+    };
+  }
+
+  // ../core/dist/esm/message/operators/distinctUntilChanged.js
+  function distinctUntilChanged(comparator) {
+    return (source) => {
+      return new Observable((subscriber) => {
+        let hasValue = false;
+        let previousValue;
+        const subscription = source.subscribe({
+          next: (value) => {
+            const areEqual = hasValue ? comparator ? comparator(previousValue, value) : previousValue === value : false;
+            if (!areEqual) {
+              hasValue = true;
+              previousValue = value;
+              subscriber.next(value);
+            }
+          },
+          error: (err) => {
+            subscriber.error(err);
+          },
+          complete: () => {
+            subscriber.complete();
+          }
+        });
+        return subscription;
+      });
+    };
+  }
+
+  // ../core/dist/esm/message/operators/throttleTime.js
+  function throttleTime(duration, config) {
+    const leading = config?.leading ?? true;
+    const trailing = config?.trailing ?? false;
+    const setTimeoutFn = config?.setTimeout || setTimeout;
+    const clearTimeoutFn = config?.clearTimeout || clearTimeout;
+    return (source) => {
+      return new Observable((subscriber) => {
+        let throttled = false;
+        let trailingValue;
+        let hasTrailingValue = false;
+        let timeoutId = null;
+        const endThrottle = () => {
+          if (timeoutId !== null) {
+            clearTimeoutFn(timeoutId);
+            timeoutId = null;
+          }
+          throttled = false;
+          if (trailing && hasTrailingValue) {
+            const valueToEmit = trailingValue;
+            hasTrailingValue = false;
+            trailingValue = void 0;
+            Promise.resolve().then(() => {
+              if (!subscriber.closed) {
+                subscriber.next(valueToEmit);
+                startThrottle();
+              }
+            });
+          }
+        };
+        const startThrottle = () => {
+          if (throttled) {
+            return;
+          }
+          throttled = true;
+          timeoutId = setTimeoutFn(() => {
+            endThrottle();
+          }, duration);
+        };
+        const subscription = source.subscribe({
+          next: (value) => {
+            if (!throttled) {
+              if (leading) {
+                subscriber.next(value);
+              } else if (trailing) {
+                trailingValue = value;
+                hasTrailingValue = true;
+              }
+              startThrottle();
+            } else if (trailing) {
+              trailingValue = value;
+              hasTrailingValue = true;
+            }
+          },
+          error: (err) => {
+            if (timeoutId !== null) {
+              clearTimeoutFn(timeoutId);
+              timeoutId = null;
+            }
+            throttled = false;
+            subscriber.error(err);
+          },
+          complete: () => {
+            if (timeoutId !== null) {
+              clearTimeoutFn(timeoutId);
+              timeoutId = null;
+            }
+            if (trailing && hasTrailingValue) {
+              subscriber.next(trailingValue);
+            }
+            subscriber.complete();
+          }
+        });
+        return () => {
+          subscription.unsubscribe();
+          if (timeoutId !== null) {
+            clearTimeoutFn(timeoutId);
+            timeoutId = null;
+          }
+        };
+      });
+    };
+  }
+
   // src/decorators/lifecycles.ts
   var ON_INITIALIZE_METADATA_KEY = Symbol.for("simple-web-component:on-constructor");
   var ON_BEFORE_CONNECTED_METADATA_KEY = Symbol.for("simple-web-component:on-before-connected");
@@ -7077,7 +7204,7 @@ var dooboostoreSimpleWebComponent = (() => {
               if (!config?.targetVariableName || config?.targetVariableName && tit.variables.find((v) => v === config?.targetVariableName)) {
                 const data = new Function("ctx", `
                   with(ctx) {
-                    return function(){
+                    return function(event){
                       return (${this.stripWrap(tit.script)});
                     }
                   }
@@ -9031,18 +9158,32 @@ var dooboostoreSimpleWebComponent = (() => {
 
   // src/decorators/emitCustomEvent.ts
   var EMIT_CUSTOM_EVENT_METADATA_KEY = Symbol.for("simple-web-component:emit-custom-event");
-  function emitCustomEvent(selectorOrTarget, type, options = {}) {
+  function emitCustomEvent(selectorOrTarget, typeOrPropertyKey, optionsOrDescriptor) {
+    if (typeof selectorOrTarget === "object" && typeof typeOrPropertyKey === "string" && typeof optionsOrDescriptor === "object" && "value" in optionsOrDescriptor) {
+      throw new Error(`@emitCustomEvent decorator cannot be used on properties. (Property: ${String(typeOrPropertyKey)})`);
+    }
+    if ((typeof selectorOrTarget === "string" || typeof selectorOrTarget === "function") && typeof typeOrPropertyKey === "string") {
+      return createEmitDecorator(selectorOrTarget, typeOrPropertyKey, optionsOrDescriptor);
+    }
+    if (typeof selectorOrTarget === "string" && typeOrPropertyKey !== "string") {
+      return createEmitDecorator("$this", selectorOrTarget, typeOrPropertyKey);
+    }
+    throw new Error("Invalid @emitCustomEvent usage");
+  }
+  function createEmitDecorator(selector, type, options) {
     return (targetObj, propertyKey, descriptor) => {
       const constructor = targetObj.constructor;
-      const fullOptions = { ...options, type };
-      if (fullOptions.bubbles === void 0) fullOptions.bubbles = true;
-      if (fullOptions.composed === void 0) fullOptions.composed = true;
+      const fullOptions = { ...options || {}, type };
+      if (fullOptions.bubbles === void 0)
+        fullOptions.bubbles = true;
+      if (fullOptions.composed === void 0)
+        fullOptions.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, selector: selectorOrTarget, type, options: fullOptions });
+      list.push({ propertyKey, selector, type, options: fullOptions });
       const original = descriptor.value;
       descriptor.value = function(...args) {
         ensureInit(this);
@@ -9054,45 +9195,72 @@ var dooboostoreSimpleWebComponent = (() => {
             composed: fullOptions.composed,
             cancelable: fullOptions.cancelable
           });
-          const hostSet = SwcUtils.getHostSet(this);
           const conf = getElementConfig(this);
           const currentWin = this._resolveWindow?.(conf) || (typeof window !== "undefined" ? window : void 0);
+          const hostSet = SwcUtils.getHelperAndHostSet(currentWin, this);
           const eventTargets = [];
-          if (selectorOrTarget === "$window") eventTargets.push(currentWin);
-          else if (selectorOrTarget === "$document") eventTargets.push(currentWin.document);
-          else if (selectorOrTarget === "$host") {
-            if (hostSet.$host) eventTargets.push(hostSet.$host);
-          } else if (selectorOrTarget === "$parentHost") {
-            if (hostSet.$parentHost) eventTargets.push(hostSet.$parentHost);
-          } else if (selectorOrTarget === "$appHost") {
-            if (hostSet.$appHost) eventTargets.push(hostSet.$appHost);
-          } else if (selectorOrTarget === "$firstHost") {
-            if (hostSet.$firstHost) eventTargets.push(hostSet.$firstHost);
-          } else if (selectorOrTarget === "$lastHost") {
-            if (hostSet.$lastHost) eventTargets.push(hostSet.$lastHost);
-          } else if (selectorOrTarget === "$firstAppHost") {
-            if (hostSet.$firstAppHost) eventTargets.push(hostSet.$firstAppHost);
-          } else if (selectorOrTarget === "$lastAppHost") {
-            if (hostSet.$lastAppHost) eventTargets.push(hostSet.$lastAppHost);
-          } else if (selectorOrTarget === "$hosts") {
-            hostSet.$hosts.forEach((h) => eventTargets.push(h));
-          } else if (selectorOrTarget === "$appHosts") {
-            hostSet.$appHosts.forEach((h) => eventTargets.push(h));
-          } else if (selectorOrTarget === "$this" || !selectorOrTarget) {
-            eventTargets.push(this);
+          let resolvedSelector = selector;
+          if (typeof selector === "function") {
+            resolvedSelector = selector(this, hostSet);
+          }
+          if (resolvedSelector instanceof currentWin.Element) {
+            eventTargets.push(resolvedSelector);
+          } else if (resolvedSelector instanceof currentWin.NodeList) {
+            eventTargets.push(...Array.from(resolvedSelector));
+          } else if (Array.isArray(resolvedSelector)) {
+            eventTargets.push(...resolvedSelector);
+          } else if (resolvedSelector === null) {
           } else {
-            const r = fullOptions.root || "auto";
-            const searchRoots = [];
-            if (r === "auto") searchRoots.push(this.shadowRoot || this);
-            else if (r === "light") searchRoots.push(this);
-            else if (r === "shadow" && this.shadowRoot) searchRoots.push(this.shadowRoot);
-            else if (r === "all") {
-              searchRoots.push(this);
-              if (this.shadowRoot) searchRoots.push(this.shadowRoot);
+            const stringSelector = resolvedSelector;
+            if (stringSelector === "$window")
+              eventTargets.push(currentWin);
+            else if (stringSelector === "$document")
+              eventTargets.push(currentWin.document);
+            else if (stringSelector === "$host") {
+              if (hostSet.$host)
+                eventTargets.push(hostSet.$host);
+            } else if (stringSelector === "$parentHost") {
+              if (hostSet.$parentHost)
+                eventTargets.push(hostSet.$parentHost);
+            } else if (stringSelector === "$appHost") {
+              if (hostSet.$appHost)
+                eventTargets.push(hostSet.$appHost);
+            } else if (stringSelector === "$firstHost") {
+              if (hostSet.$firstHost)
+                eventTargets.push(hostSet.$firstHost);
+            } else if (stringSelector === "$lastHost") {
+              if (hostSet.$lastHost)
+                eventTargets.push(hostSet.$lastHost);
+            } else if (stringSelector === "$firstAppHost") {
+              if (hostSet.$firstAppHost)
+                eventTargets.push(hostSet.$firstAppHost);
+            } else if (stringSelector === "$lastAppHost") {
+              if (hostSet.$lastAppHost)
+                eventTargets.push(hostSet.$lastAppHost);
+            } else if (stringSelector === "$hosts") {
+              hostSet.$hosts.forEach((h) => eventTargets.push(h));
+            } else if (stringSelector === "$appHosts") {
+              hostSet.$appHosts.forEach((h) => eventTargets.push(h));
+            } else if (stringSelector === "$this" || !stringSelector) {
+              eventTargets.push(this);
+            } else {
+              const r = fullOptions.root || "auto";
+              const searchRoots = [];
+              if (r === "auto")
+                searchRoots.push(this.shadowRoot || this);
+              else if (r === "light")
+                searchRoots.push(this);
+              else if (r === "shadow" && this.shadowRoot)
+                searchRoots.push(this.shadowRoot);
+              else if (r === "all") {
+                searchRoots.push(this);
+                if (this.shadowRoot)
+                  searchRoots.push(this.shadowRoot);
+              }
+              searchRoots.forEach((sr) => {
+                sr.querySelectorAll(stringSelector).forEach((el) => eventTargets.push(el));
+              });
             }
-            searchRoots.forEach((sr) => {
-              sr.querySelectorAll(selectorOrTarget).forEach((el) => eventTargets.push(el));
-            });
           }
           eventTargets.forEach((t) => {
             if (fullOptions.filter && !fullOptions.filter(t, detail, { currentThis: this, helper: hostSet })) {
@@ -9115,20 +9283,8 @@ var dooboostoreSimpleWebComponent = (() => {
     return ReflectUtils.getMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, constructor);
   };
   var emit = emitCustomEvent;
-  function emitCustomEventThis(type, optionsOrAttributeaName) {
-    if (optionsOrAttributeaName && typeof optionsOrAttributeaName === "string") {
-      return emitCustomEventThis(type, { attributeName: optionsOrAttributeaName });
-    } else if (optionsOrAttributeaName && typeof optionsOrAttributeaName === "object") {
-      if (!optionsOrAttributeaName.attributeName) {
-        optionsOrAttributeaName.attributeName = `on-emit-${type}`;
-      }
-      return emitCustomEvent("$this", type, optionsOrAttributeaName);
-    } else {
-      return emitCustomEvent("$this", type, { attributeName: `on-emit-${type}` });
-    }
-  }
 
-  // src/decorators/changedAttributeThis.ts
+  // src/decorators/changedAttribute.ts
   var ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol.for("simple-web-component:on-attribute-changed");
   var convertValue = (val, type) => {
     if (val === null || val === void 0) return val;
@@ -9136,7 +9292,7 @@ var dooboostoreSimpleWebComponent = (() => {
     if (type === Boolean) return val === "false" || val === "0" ? false : true;
     return val;
   };
-  function changedAttributeThis(attributeName, options = {}) {
+  function changedAttribute(attributeName, options = {}) {
     return (target, propertyKey) => {
       const constructor = target.constructor;
       let metaList = ReflectUtils.getOwnMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
@@ -9176,150 +9332,141 @@ var dooboostoreSimpleWebComponent = (() => {
 
   // src/decorators/query.ts
   var QUERY_METADATA_KEY = Symbol.for("simple-web-component:query");
-  function query(selectorOrTarget, options = {}) {
-    return (targetObj, propertyKey, descriptor) => {
-      if (descriptor !== void 0) {
-        throw new Error(`@query decorator cannot be used on methods. (Method: ${String(propertyKey)})`);
-      }
-      const constructor = targetObj.constructor;
-      let queries = ReflectUtils.getMetadata(QUERY_METADATA_KEY, constructor);
-      if (!queries) {
-        queries = [];
-        ReflectUtils.defineMetadata(QUERY_METADATA_KEY, queries, constructor);
-      }
-      queries.push({ propertyKey, selector: selectorOrTarget, options });
-      Object.defineProperty(targetObj, propertyKey, {
-        get() {
-          ensureInit(this);
-          const selector = selectorOrTarget;
-          const r = options.root || "auto";
-          const applyRoot = (t) => {
-            if (!t || !(t instanceof HTMLElement))
-              return t;
-            if (r === "auto")
-              return t.shadowRoot || t;
-            if (r === "shadow")
-              return t.shadowRoot;
-            if (r === "light")
-              return t;
-            if (r === "all")
-              return t.shadowRoot || t;
-            return t;
-          };
-          const hostSet = SwcUtils.getHostSet(this);
-          if (selector === "$this")
-            return applyRoot(this);
-          if (selector === "$host")
-            return applyRoot(hostSet.$host);
-          if (selector === "$parentHost")
-            return applyRoot(hostSet.$parentHost);
-          if (selector === "$appHost")
-            return applyRoot(hostSet.$appHost);
-          if (selector === "$firstHost")
-            return applyRoot(hostSet.$firstHost);
-          if (selector === "$lastHost")
-            return applyRoot(hostSet.$lastHost);
-          if (selector === "$firstAppHost")
-            return applyRoot(hostSet.$firstAppHost);
-          if (selector === "$lastAppHost")
-            return applyRoot(hostSet.$lastAppHost);
-          const config = getElementConfig(this);
-          const win = config?.window || window;
-          if (selector === "$window")
-            return win;
-          if (selector === "$document")
-            return win.document;
-          if (r === "shadow")
-            return this.shadowRoot ? this.shadowRoot.querySelector(selector) : null;
-          if (r === "light")
-            return this.querySelector(selector);
-          if (r === "all") {
-            const shadowMatch = this.shadowRoot ? this.shadowRoot.querySelector(selector) : null;
-            return shadowMatch || this.querySelector(selector);
-          }
-          return (this.shadowRoot || this).querySelector(selector);
-        },
-        set(nv) {
-          ensureInit(this);
-          if (nv === null || nv === void 0) {
-            const selector = selectorOrTarget;
-            if (selector.startsWith("$") && selector !== "$this")
-              return;
-            const r = options.root || "auto";
-            const targets = [];
-            if (r === "shadow") {
-              if (this.shadowRoot?.querySelector(selector))
-                targets.push(this.shadowRoot.querySelector(selector));
-            } else if (r === "light") {
-              if (this.querySelector(selector))
-                targets.push(this.querySelector(selector));
-            } else if (r === "all") {
-              if (this.shadowRoot?.querySelector(selector))
-                targets.push(this.shadowRoot.querySelector(selector));
-              if (this.querySelector(selector))
-                targets.push(this.querySelector(selector));
+  function query(selectorOrTarget, optionsOrPropertyKey, descriptor) {
+    if (descriptor !== void 0 && (typeof optionsOrPropertyKey === "string" || typeof optionsOrPropertyKey === "symbol")) {
+      throw new Error(`@query decorator cannot be used on methods. (Method: ${String(optionsOrPropertyKey)})`);
+    }
+    if (typeof selectorOrTarget === "string" || typeof selectorOrTarget === "function") {
+      return (targetObj, propertyKey, descriptor2) => {
+        if (descriptor2 !== void 0) {
+          throw new Error(`@query decorator cannot be used on methods. (Method: ${String(propertyKey)})`);
+        }
+        const constructor = targetObj.constructor;
+        let queries = ReflectUtils.getMetadata(QUERY_METADATA_KEY, constructor);
+        if (!queries) {
+          queries = [];
+          ReflectUtils.defineMetadata(QUERY_METADATA_KEY, queries, constructor);
+        }
+        queries.push({ propertyKey, selector: selectorOrTarget, options: optionsOrPropertyKey || {} });
+        Object.defineProperty(targetObj, propertyKey, {
+          get() {
+            ensureInit(this);
+            const config = getElementConfig(this);
+            const win = config?.window || window;
+            const hostSet = SwcUtils.getHelperAndHostSet(win, this);
+            let resolvedSelector;
+            let resolvedElement = null;
+            if (typeof selectorOrTarget === "function") {
+              const result = selectorOrTarget(this, hostSet);
+              if (result instanceof win.Node || result instanceof win.Element) {
+                resolvedElement = result instanceof win.HTMLElement ? result : null;
+              } else if (result instanceof win.NodeList || Array.isArray(result)) {
+                resolvedElement = result.length > 0 && result[0] instanceof win.HTMLElement ? result[0] : null;
+              }
             } else {
-              const el = (this.shadowRoot || this).querySelector(selector);
-              if (el)
-                targets.push(el);
+              resolvedSelector = selectorOrTarget;
+              const r = optionsOrPropertyKey?.root || "auto";
+              const applyRoot = (t) => {
+                if (!t || !(t instanceof HTMLElement))
+                  return t;
+                if (r === "auto")
+                  return t.shadowRoot || t;
+                if (r === "shadow")
+                  return t.shadowRoot;
+                if (r === "light")
+                  return t;
+                if (r === "all")
+                  return t.shadowRoot || t;
+                return t;
+              };
+              if (resolvedSelector === "$this")
+                resolvedElement = applyRoot(this);
+              else if (resolvedSelector === "$host")
+                resolvedElement = applyRoot(hostSet.$host);
+              else if (resolvedSelector === "$parentHost")
+                resolvedElement = applyRoot(hostSet.$parentHost);
+              else if (resolvedSelector === "$appHost")
+                resolvedElement = applyRoot(hostSet.$appHost);
+              else if (resolvedSelector === "$firstHost")
+                resolvedElement = applyRoot(hostSet.$firstHost);
+              else if (resolvedSelector === "$lastHost")
+                resolvedElement = applyRoot(hostSet.$lastHost);
+              else if (resolvedSelector === "$firstAppHost")
+                resolvedElement = applyRoot(hostSet.$firstAppHost);
+              else if (resolvedSelector === "$lastAppHost")
+                resolvedElement = applyRoot(hostSet.$lastAppHost);
+              else if (resolvedSelector === "$window")
+                return win;
+              else if (resolvedSelector === "$document")
+                return win.document;
+              else {
+                if (r === "shadow")
+                  resolvedElement = this.shadowRoot ? this.shadowRoot.querySelector(resolvedSelector) : null;
+                else if (r === "light")
+                  resolvedElement = this.querySelector(resolvedSelector);
+                else if (r === "all") {
+                  const shadowMatch = this.shadowRoot ? this.shadowRoot.querySelector(resolvedSelector) : null;
+                  resolvedElement = shadowMatch || this.querySelector(resolvedSelector);
+                } else
+                  resolvedElement = (this.shadowRoot || this).querySelector(resolvedSelector);
+              }
             }
-            targets.forEach((t) => t.remove());
-          }
-        },
-        enumerable: true,
-        configurable: true
-      });
-    };
-  }
-  function queryThis(targetOrOptions, propertyKey) {
-    if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
-      return query("$this", {})(targetOrOptions, propertyKey);
-    }
-    if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
-      return query("$this", targetOrOptions);
-    } else {
-      return query("$this", {});
-    }
-  }
-  function queryWindow(targetOrOptions, propertyKey) {
-    if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
-      return query("$window", {})(targetOrOptions, propertyKey);
-    }
-    if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
-      return query("$window", targetOrOptions);
-    } else {
-      return query("$window", {});
-    }
-  }
-  function queryDocument(targetOrOptions, propertyKey) {
-    if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
-      return query("$document", {})(targetOrOptions, propertyKey);
-    }
-    if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
-      return query("$document", targetOrOptions);
-    } else {
-      return query("$document", {});
-    }
-  }
-  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", {});
-    }
-  }
-  function queryAppHost(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", {});
+            if (resolvedElement instanceof win.HTMLElement && optionsOrPropertyKey?.filter) {
+              const shouldInclude = optionsOrPropertyKey.filter(resolvedElement, { currentThis: this, helper: hostSet });
+              if (!shouldInclude) {
+                return null;
+              }
+            }
+            return resolvedElement;
+          },
+          set(nv) {
+            ensureInit(this);
+            if (nv === null || nv === void 0) {
+              const config = getElementConfig(this);
+              const win = config?.window || window;
+              const hostSet = SwcUtils.getHelperAndHostSet(win, this);
+              if (typeof selectorOrTarget === "function") {
+                const result = selectorOrTarget(this, hostSet);
+                if (result instanceof win.Element) {
+                  result.remove();
+                } else if (result instanceof win.NodeList || Array.isArray(result)) {
+                  const el = result.length > 0 ? result[0] : null;
+                  if (el instanceof win.Element) {
+                    el.remove();
+                  }
+                }
+                return;
+              }
+              const resolvedSelector = selectorOrTarget;
+              if (resolvedSelector.startsWith("$") && resolvedSelector !== "$this")
+                return;
+              const r = optionsOrPropertyKey?.root || "auto";
+              const targets = [];
+              if (r === "shadow") {
+                if (this.shadowRoot?.querySelector(resolvedSelector))
+                  targets.push(this.shadowRoot.querySelector(resolvedSelector));
+              } else if (r === "light") {
+                if (this.querySelector(resolvedSelector))
+                  targets.push(this.querySelector(resolvedSelector));
+              } else if (r === "all") {
+                if (this.shadowRoot?.querySelector(resolvedSelector))
+                  targets.push(this.shadowRoot.querySelector(resolvedSelector));
+                if (this.querySelector(resolvedSelector))
+                  targets.push(this.querySelector(resolvedSelector));
+              } else {
+                const el = (this.shadowRoot || this).querySelector(resolvedSelector);
+                if (el)
+                  targets.push(el);
+              }
+              targets.forEach((t) => t.remove());
+            }
+          },
+          enumerable: true,
+          configurable: true
+        });
+      };
     }
+    return query("$this", selectorOrTarget);
   }
   var getQueryMetadata = (target) => {
     const constructor = target instanceof Function ? target : target.constructor;
@@ -9328,139 +9475,153 @@ var dooboostoreSimpleWebComponent = (() => {
 
   // src/decorators/queryAll.ts
   var QUERY_ALL_METADATA_KEY = Symbol.for("simple-web-component:query-all");
-  function queryAll(selectorOrTarget, options = {}) {
-    return (targetObj, propertyKey, descriptor) => {
-      if (descriptor !== void 0) {
-        throw new Error(`@queryAll decorator cannot be used on methods. (Method: ${String(propertyKey)})`);
-      }
-      const constructor = targetObj.constructor;
-      let queries = ReflectUtils.getMetadata(QUERY_ALL_METADATA_KEY, constructor);
-      if (!queries) {
-        queries = [];
-        ReflectUtils.defineMetadata(QUERY_ALL_METADATA_KEY, queries, constructor);
-      }
-      queries.push({ propertyKey, selector: selectorOrTarget, options });
-      Object.defineProperty(targetObj, propertyKey, {
-        get() {
-          ensureInit(this);
-          const selector = selectorOrTarget;
-          const r = options.root || "auto";
-          const applyRoot = (t) => {
-            if (!t)
-              return [];
-            const items = Array.isArray(t) ? t : [t];
-            const results = [];
-            items.forEach((it) => {
-              if (!(it instanceof HTMLElement)) {
-                results.push(it);
-                return;
+  function queryAll(selectorOrTarget, optionsOrPropertyKey, descriptor) {
+    if (descriptor !== void 0 && (typeof optionsOrPropertyKey === "string" || typeof optionsOrPropertyKey === "symbol")) {
+      throw new Error(`@queryAll decorator cannot be used on methods. (Method: ${String(optionsOrPropertyKey)})`);
+    }
+    if (typeof selectorOrTarget === "string" || typeof selectorOrTarget === "function") {
+      return (targetObj, propertyKey, descriptor2) => {
+        if (descriptor2 !== void 0) {
+          throw new Error(`@queryAll decorator cannot be used on methods. (Method: ${String(propertyKey)})`);
+        }
+        const constructor = targetObj.constructor;
+        let queries = ReflectUtils.getMetadata(QUERY_ALL_METADATA_KEY, constructor);
+        if (!queries) {
+          queries = [];
+          ReflectUtils.defineMetadata(QUERY_ALL_METADATA_KEY, queries, constructor);
+        }
+        queries.push({ propertyKey, selector: selectorOrTarget, options: optionsOrPropertyKey || {} });
+        Object.defineProperty(targetObj, propertyKey, {
+          get() {
+            ensureInit(this);
+            const config = getElementConfig(this);
+            const win = config?.window || window;
+            const hostSet = SwcUtils.getHelperAndHostSet(win, this);
+            let resolvedSelector;
+            let resolvedElements = [];
+            if (typeof selectorOrTarget === "function") {
+              const result = selectorOrTarget(this, hostSet);
+              if (result instanceof win.NodeList) {
+                resolvedElements = Array.from(result).filter((el) => el instanceof win.HTMLElement);
+              } else if (Array.isArray(result)) {
+                resolvedElements = result.filter((el) => el instanceof win.HTMLElement);
               }
-              if (r === "auto")
-                results.push(it.shadowRoot || it);
+            } else {
+              resolvedSelector = selectorOrTarget;
+              const r = optionsOrPropertyKey?.root || "auto";
+              const applyRoot = (t) => {
+                if (!t)
+                  return [];
+                const items = Array.isArray(t) ? t : [t];
+                const results = [];
+                items.forEach((it) => {
+                  if (!(it instanceof HTMLElement)) {
+                    results.push(it);
+                    return;
+                  }
+                  if (r === "auto")
+                    results.push(it.shadowRoot || it);
+                  else {
+                    if (r === "light" || r === "all")
+                      results.push(it);
+                    if ((r === "shadow" || r === "all") && it.shadowRoot)
+                      results.push(it.shadowRoot);
+                  }
+                });
+                return results;
+              };
+              if (resolvedSelector === "$hosts")
+                resolvedElements = applyRoot(hostSet.$hosts).filter((el) => el instanceof HTMLElement);
+              else if (resolvedSelector === "$appHosts")
+                resolvedElements = applyRoot(hostSet.$appHosts).filter((el) => el instanceof HTMLElement);
+              else if (resolvedSelector === "$host")
+                resolvedElements = applyRoot(hostSet.$host).filter((el) => el instanceof HTMLElement);
+              else if (resolvedSelector === "$parentHost")
+                resolvedElements = applyRoot(hostSet.$parentHost).filter((el) => el instanceof HTMLElement);
+              else if (resolvedSelector === "$appHost")
+                resolvedElements = applyRoot(hostSet.$appHost).filter((el) => el instanceof HTMLElement);
+              else if (resolvedSelector === "$firstHost")
+                resolvedElements = applyRoot(hostSet.$firstHost).filter((el) => el instanceof HTMLElement);
+              else if (resolvedSelector === "$lastHost")
+                resolvedElements = applyRoot(hostSet.$lastHost).filter((el) => el instanceof HTMLElement);
+              else if (resolvedSelector === "$firstAppHost")
+                resolvedElements = applyRoot(hostSet.$firstAppHost).filter((el) => el instanceof HTMLElement);
+              else if (resolvedSelector === "$lastAppHost")
+                resolvedElements = applyRoot(hostSet.$lastAppHost).filter((el) => el instanceof HTMLElement);
+              else if (resolvedSelector === "$window")
+                return [win];
+              else if (resolvedSelector === "$document")
+                return [win.document];
+              else if (resolvedSelector === "$this")
+                resolvedElements = applyRoot(this).filter((el) => el instanceof HTMLElement);
               else {
-                if (r === "light" || r === "all")
-                  results.push(it);
-                if ((r === "shadow" || r === "all") && it.shadowRoot)
-                  results.push(it.shadowRoot);
+                if (r === "shadow")
+                  resolvedElements = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(resolvedSelector)) : [];
+                else if (r === "light")
+                  resolvedElements = Array.from(this.querySelectorAll(resolvedSelector));
+                else if (r === "all") {
+                  const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(resolvedSelector)) : [];
+                  const lNodes = Array.from(this.querySelectorAll(resolvedSelector));
+                  resolvedElements = [...sNodes, ...lNodes];
+                } else
+                  resolvedElements = Array.from((this.shadowRoot || this).querySelectorAll(resolvedSelector));
               }
-            });
-            return results;
-          };
-          const hostSet = SwcUtils.getHostSet(this);
-          if (selector === "$hosts")
-            return applyRoot(hostSet.$hosts);
-          if (selector === "$appHosts")
-            return applyRoot(hostSet.$appHosts);
-          if (selector === "$host")
-            return applyRoot(hostSet.$host);
-          if (selector === "$parentHost")
-            return applyRoot(hostSet.$parentHost);
-          if (selector === "$appHost")
-            return applyRoot(hostSet.$appHost);
-          if (selector === "$firstHost")
-            return applyRoot(hostSet.$firstHost);
-          if (selector === "$lastHost")
-            return applyRoot(hostSet.$lastHost);
-          if (selector === "$firstAppHost")
-            return applyRoot(hostSet.$firstAppHost);
-          if (selector === "$lastAppHost")
-            return applyRoot(hostSet.$lastAppHost);
-          const config = getElementConfig(this);
-          const win = config?.window || window;
-          if (selector === "$window")
-            return [win];
-          if (selector === "$document")
-            return [win.document];
-          if (selector === "$this")
-            return applyRoot(this);
-          if (r === "shadow")
-            return this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
-          if (r === "light")
-            return Array.from(this.querySelectorAll(selector));
-          if (r === "all") {
-            const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
-            const lNodes = Array.from(this.querySelectorAll(selector));
-            return [...sNodes, ...lNodes];
-          }
-          const root = this.shadowRoot || this;
-          return Array.from(root.querySelectorAll(selector));
-        },
-        set(nv) {
-          ensureInit(this);
-          if (nv === null || nv === void 0 || Array.isArray(nv) && nv.length === 0) {
-            const selector = selectorOrTarget;
-            if (selector.startsWith("$") && selector !== "$this")
-              return;
-            const r = options.root || "auto";
-            let targets = [];
-            if (r === "shadow")
-              targets = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
-            else if (r === "light")
-              targets = Array.from(this.querySelectorAll(selector));
-            else if (r === "all") {
-              const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
-              const lNodes = Array.from(this.querySelectorAll(selector));
-              targets = [...sNodes, ...lNodes];
-            } else {
-              targets = Array.from((this.shadowRoot || this).querySelectorAll(selector));
             }
-            targets.forEach((t) => t.remove());
-          }
-        },
-        enumerable: true,
-        configurable: true
-      });
-    };
-  }
-  function queryAllThis(targetOrOptions, propertyKey) {
-    if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
-      return queryAll("$this", {})(targetOrOptions, propertyKey);
-    }
-    if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
-      return queryAll("$this", targetOrOptions);
-    } else {
-      return queryAll("$this", {});
-    }
-  }
-  function allParentHost(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", {});
-    }
-  }
-  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", {});
+            if (optionsOrPropertyKey?.filter) {
+              resolvedElements = resolvedElements.filter((el) => {
+                if (!(el instanceof win.HTMLElement))
+                  return true;
+                return optionsOrPropertyKey.filter(el, { currentThis: this, helper: hostSet });
+              });
+            }
+            return resolvedElements;
+          },
+          set(nv) {
+            ensureInit(this);
+            if (nv === null || nv === void 0 || Array.isArray(nv) && nv.length === 0) {
+              const config = getElementConfig(this);
+              const win = config?.window || window;
+              const hostSet = SwcUtils.getHelperAndHostSet(win, this);
+              if (typeof selectorOrTarget === "function") {
+                const result = selectorOrTarget(this, hostSet);
+                if (result instanceof win.NodeList) {
+                  Array.from(result).forEach((el) => {
+                    if (el instanceof win.Element)
+                      el.remove();
+                  });
+                } else if (Array.isArray(result)) {
+                  result.forEach((el) => {
+                    if (el instanceof win.Element)
+                      el.remove();
+                  });
+                }
+                return;
+              }
+              const resolvedSelector = selectorOrTarget;
+              if (resolvedSelector.startsWith("$") && resolvedSelector !== "$this")
+                return;
+              const r = optionsOrPropertyKey?.root || "auto";
+              let targets = [];
+              if (r === "shadow")
+                targets = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(resolvedSelector)) : [];
+              else if (r === "light")
+                targets = Array.from(this.querySelectorAll(resolvedSelector));
+              else if (r === "all") {
+                const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(resolvedSelector)) : [];
+                const lNodes = Array.from(this.querySelectorAll(resolvedSelector));
+                targets = [...sNodes, ...lNodes];
+              } else {
+                targets = Array.from((this.shadowRoot || this).querySelectorAll(resolvedSelector));
+              }
+              targets.forEach((t) => t.remove());
+            }
+          },
+          enumerable: true,
+          configurable: true
+        });
+      };
     }
+    return queryAll("$this", selectorOrTarget);
   }
   var getQueryAllMetadata = (target) => {
     const constructor = target instanceof Function ? target : target.constructor;
@@ -9650,6 +9811,27 @@ var dooboostoreSimpleWebComponent = (() => {
     const currentWin = conf.window;
     const r = options.root || "auto";
     const results = [];
+    let resolvedSelector = selector;
+    if (typeof selector === "function") {
+      const hostSet = SwcUtils.getHelperAndHostSet(currentWin, inst);
+      resolvedSelector = selector(inst, hostSet);
+    }
+    if (resolvedSelector instanceof currentWin.Element) {
+      results.push(resolvedSelector);
+      return results;
+    }
+    if (resolvedSelector instanceof currentWin.NodeList) {
+      results.push(...Array.from(resolvedSelector));
+      return results;
+    }
+    if (Array.isArray(resolvedSelector)) {
+      results.push(...resolvedSelector);
+      return results;
+    }
+    if (resolvedSelector === null) {
+      return results;
+    }
+    const stringSelector = resolvedSelector;
     const applyRoot = (target) => {
       if (!target) return;
       if (r === "auto") {
@@ -9659,37 +9841,37 @@ var dooboostoreSimpleWebComponent = (() => {
         if ((r === "shadow" || r === "all") && target.shadowRoot) results.push(target.shadowRoot);
       }
     };
-    if (selector === "$this" || !selector) {
+    if (stringSelector === "$this" || !stringSelector) {
       applyRoot(inst);
-    } else if (selector === "$window") {
+    } else if (stringSelector === "$window") {
       results.push(currentWin);
-    } else if (selector === "$document") {
+    } else if (stringSelector === "$document") {
       results.push(currentWin.document);
     } else {
       const hostSet = SwcUtils.getHostSet(inst);
-      if (selector === "$host") applyRoot(hostSet.$host);
-      else 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);
+      if (stringSelector === "$host") applyRoot(hostSet.$host);
+      else if (stringSelector === "$parentHost") applyRoot(hostSet.$parentHost);
+      else if (stringSelector === "$appHost") applyRoot(hostSet.$appHost);
+      else if (stringSelector === "$firstHost") applyRoot(hostSet.$firstHost);
+      else if (stringSelector === "$lastHost") applyRoot(hostSet.$lastHost);
+      else if (stringSelector === "$firstAppHost") applyRoot(hostSet.$firstAppHost);
+      else if (stringSelector === "$lastAppHost") applyRoot(hostSet.$lastAppHost);
+      else if (stringSelector === "$hosts") hostSet.$hosts.forEach(applyRoot);
+      else if (stringSelector === "$appHosts") hostSet.$appHosts.forEach(applyRoot);
       else {
         if (r === "shadow") {
-          const found = inst.shadowRoot?.querySelectorAll(selector);
+          const found = inst.shadowRoot?.querySelectorAll(stringSelector);
           if (found) results.push(...found);
         } else if (r === "light") {
-          const found = inst.querySelectorAll(selector);
+          const found = inst.querySelectorAll(stringSelector);
           if (found) results.push(...found);
         } else if (r === "all") {
-          const sMatch = inst.shadowRoot?.querySelectorAll(selector);
-          const lMatch = inst.querySelectorAll(selector);
+          const sMatch = inst.shadowRoot?.querySelectorAll(stringSelector);
+          const lMatch = inst.querySelectorAll(stringSelector);
           if (sMatch) results.push(...sMatch);
           if (lMatch) results.push(...lMatch);
         } else {
-          const found = (inst.shadowRoot || inst).querySelectorAll(selector);
+          const found = (inst.shadowRoot || inst).querySelectorAll(stringSelector);
           if (found) results.push(...found);
         }
       }
@@ -9788,35 +9970,20 @@ var dooboostoreSimpleWebComponent = (() => {
       });
     };
   }
-  function property(selector, targetPropertyKeyOrOptions, options) {
-    return applyProperty(selector, targetPropertyKeyOrOptions, options);
-  }
-  function propertyThis(targetOrOptions, propertyKeyOrOptions, descriptor) {
-    if (typeof targetOrOptions === "object" && targetOrOptions !== null && !Array.isArray(targetOrOptions) && (typeof propertyKeyOrOptions === "string" || typeof propertyKeyOrOptions === "symbol")) {
-      return applyProperty("$this", void 0, {})(targetOrOptions, propertyKeyOrOptions, descriptor);
+  function property(selectorOrTarget, targetPropertyKeyOrOptions, optionsOrDescriptor) {
+    if (optionsOrDescriptor !== void 0 && (typeof targetPropertyKeyOrOptions === "string" || typeof targetPropertyKeyOrOptions === "symbol")) {
+      return applyProperty("$this", void 0, {})(selectorOrTarget, targetPropertyKeyOrOptions, optionsOrDescriptor);
     }
-    if (typeof targetOrOptions === "string" || typeof targetOrOptions === "symbol") {
-      return applyProperty("$this", targetOrOptions, propertyKeyOrOptions);
-    } else if (targetOrOptions && typeof targetOrOptions === "object") {
-      return applyProperty("$this", void 0, targetOrOptions);
-    } else {
-      return applyProperty("$this", void 0, {});
+    if (typeof selectorOrTarget === "string") {
+      return applyProperty(selectorOrTarget, targetPropertyKeyOrOptions, optionsOrDescriptor);
     }
+    return applyProperty("$this", void 0, selectorOrTarget);
   }
-  function setProperty(selector, targetPropertyKeyOrOptions, options) {
-    return applyProperty(selector, targetPropertyKeyOrOptions, options);
-  }
-  function setPropertyThis(targetOrOptions, propertyKeyOrOptions, descriptor) {
-    if (typeof targetOrOptions === "object" && targetOrOptions !== null && !Array.isArray(targetOrOptions) && (typeof propertyKeyOrOptions === "string" || typeof propertyKeyOrOptions === "symbol")) {
-      return applyProperty("$this", void 0, {})(targetOrOptions, propertyKeyOrOptions, descriptor);
-    }
-    if (typeof targetOrOptions === "string" || typeof targetOrOptions === "symbol") {
-      return applyProperty("$this", targetOrOptions, propertyKeyOrOptions);
-    } else if (targetOrOptions && typeof targetOrOptions === "object") {
-      return applyProperty("$this", void 0, targetOrOptions);
-    } else {
-      return applyProperty("$this", void 0, {});
+  function setProperty(selectorOrOptions, targetPropertyKeyOrOptions, optionsOrUndefined) {
+    if (typeof selectorOrOptions === "string") {
+      return applyProperty(selectorOrOptions, targetPropertyKeyOrOptions, optionsOrUndefined);
     }
+    return applyProperty("$this", void 0, selectorOrOptions);
   }
   var findAllPropertyMetadata = (target) => {
     const actualTarget = target instanceof Function ? target : target.constructor;
@@ -10129,7 +10296,8 @@ var dooboostoreSimpleWebComponent = (() => {
         const delegateListeners = [];
         const nonDelegateListeners = [];
         addEventListenerList.forEach((meta) => {
-          if (meta.options.delegate && meta.selector !== "$window" && meta.selector !== "$document" && meta.selector !== "$host" && meta.selector !== "$appHost" && meta.selector !== "$firstHost" && meta.selector !== "$lastHost" && meta.selector !== "$firstAppHost" && meta.selector !== "$lastAppHost" && meta.selector !== "$hosts" && meta.selector !== "$appHosts" && meta.selector !== "$this" && meta.selector !== "") {
+          const isStringSelector = typeof meta.selector === "string";
+          if (meta.options.delegate && isStringSelector && meta.selector !== "$window" && meta.selector !== "$document" && meta.selector !== "$host" && meta.selector !== "$appHost" && meta.selector !== "$firstHost" && meta.selector !== "$lastHost" && meta.selector !== "$firstAppHost" && meta.selector !== "$lastAppHost" && meta.selector !== "$hosts" && meta.selector !== "$appHosts" && meta.selector !== "$this" && meta.selector !== "") {
             delegateListeners.push(meta);
           } else {
             nonDelegateListeners.push(meta);
@@ -10192,6 +10360,22 @@ var dooboostoreSimpleWebComponent = (() => {
           const opts = { capture: options.capture, once: options.once, passive: options.passive };
           const bindTargets = [];
           const r = options.root || "auto";
+          let resolvedSelector = null;
+          if (typeof selector === "function") {
+            const hostSet = SwcUtils.getHelperAndHostSet(currentWin, this);
+            const result = selector(this, hostSet);
+            if (typeof result === "string") {
+              resolvedSelector = result;
+            } else if (result instanceof currentWin.Element) {
+              bindTargets.push(result);
+            } else if (result instanceof currentWin.NodeList) {
+              bindTargets.push(...Array.from(result));
+            } else if (Array.isArray(result)) {
+              bindTargets.push(...result);
+            }
+          } else {
+            resolvedSelector = selector;
+          }
           const applyRootOption = (target) => {
             if (!target) return;
             if (r === "auto") {
@@ -10201,30 +10385,32 @@ var dooboostoreSimpleWebComponent = (() => {
               if ((r === "shadow" || r === "all") && target.shadowRoot) bindTargets.push(target.shadowRoot);
             }
           };
-          if (selector === "$window") bindTargets.push(currentWin);
-          else if (selector === "$document") bindTargets.push(currentWin.document);
-          else if (selector === "$host") applyRootOption(helperHostSet.$host);
-          else if (selector === "$parentHost") applyRootOption(helperHostSet.$parentHost);
-          else if (selector === "$appHost") applyRootOption(helperHostSet.$appHost);
-          else if (selector === "$firstHost") applyRootOption(helperHostSet.$firstHost);
-          else if (selector === "$lastHost") applyRootOption(helperHostSet.$lastHost);
-          else if (selector === "$firstAppHost") applyRootOption(helperHostSet.$firstAppHost);
-          else if (selector === "$lastAppHost") applyRootOption(helperHostSet.$lastAppHost);
-          else if (selector === "$hosts") helperHostSet.$hosts.forEach(applyRootOption);
-          else if (selector === "$appHosts") helperHostSet.$appHosts.forEach(applyRootOption);
-          else if (selector === "$this" || !selector) applyRootOption(this);
-          else {
-            const searchRoots = [];
-            if (r === "auto") searchRoots.push(this.shadowRoot || this);
-            else if (r === "light") searchRoots.push(this);
-            else if (r === "shadow" && this.shadowRoot) searchRoots.push(this.shadowRoot);
-            else if (r === "all") {
-              searchRoots.push(this);
-              if (this.shadowRoot) searchRoots.push(this.shadowRoot);
+          if (resolvedSelector) {
+            if (resolvedSelector === "$window") bindTargets.push(currentWin);
+            else if (resolvedSelector === "$document") bindTargets.push(currentWin.document);
+            else if (resolvedSelector === "$host") applyRootOption(helperHostSet.$host);
+            else if (resolvedSelector === "$parentHost") applyRootOption(helperHostSet.$parentHost);
+            else if (resolvedSelector === "$appHost") applyRootOption(helperHostSet.$appHost);
+            else if (resolvedSelector === "$firstHost") applyRootOption(helperHostSet.$firstHost);
+            else if (resolvedSelector === "$lastHost") applyRootOption(helperHostSet.$lastHost);
+            else if (resolvedSelector === "$firstAppHost") applyRootOption(helperHostSet.$firstAppHost);
+            else if (resolvedSelector === "$lastAppHost") applyRootOption(helperHostSet.$lastAppHost);
+            else if (resolvedSelector === "$hosts") helperHostSet.$hosts.forEach(applyRootOption);
+            else if (resolvedSelector === "$appHosts") helperHostSet.$appHosts.forEach(applyRootOption);
+            else if (resolvedSelector === "$this" || !resolvedSelector) applyRootOption(this);
+            else {
+              const searchRoots = [];
+              if (r === "auto") searchRoots.push(this.shadowRoot || this);
+              else if (r === "light") searchRoots.push(this);
+              else if (r === "shadow" && this.shadowRoot) searchRoots.push(this.shadowRoot);
+              else if (r === "all") {
+                searchRoots.push(this);
+                if (this.shadowRoot) searchRoots.push(this.shadowRoot);
+              }
+              searchRoots.forEach((sr) => {
+                sr.querySelectorAll(resolvedSelector).forEach((el) => bindTargets.push(el));
+              });
             }
-            searchRoots.forEach((sr) => {
-              sr.querySelectorAll(selector).forEach((el) => bindTargets.push(el));
-            });
           }
           bindTargets.forEach((t) => {
             const handler = async (event2) => {
@@ -10239,10 +10425,34 @@ var dooboostoreSimpleWebComponent = (() => {
               if (options.preventDefault) event2.preventDefault();
               const currentHostSet = SwcUtils.getHostSet(this);
               const args = { event: event2, ...currentHostSet, $el: t, $root: t };
-              await this[meta.propertyKey](event2, { currentHostSet, $$matchedElement: event2.currentTarget }, args);
+              await this[meta.propertyKey](event2, { currentHostSet, $matchedElement: event2.currentTarget }, args);
+            };
+            const eventSubject = new Subject();
+            let eventStream = eventSubject;
+            if (options.debounceTime !== void 0 && options.debounceTime > 0) {
+              eventStream = eventStream.pipe(debounceTime(options.debounceTime));
+            }
+            if (options.throttleTime !== void 0 && options.throttleTime > 0) {
+              eventStream = eventStream.pipe(throttleTime(options.throttleTime));
+            }
+            if (options.distinctUntilChanged !== void 0 && options.distinctUntilChanged !== false) {
+              if (typeof options.distinctUntilChanged === "function") {
+                eventStream = eventStream.pipe(distinctUntilChanged(options.distinctUntilChanged));
+              } else {
+                eventStream = eventStream.pipe(distinctUntilChanged());
+              }
+            }
+            const subscription = eventStream.subscribe({
+              next: (event2) => {
+                handler(event2).catch((err) => console.error("Event handler error:", err));
+              },
+              error: (err) => console.error("Event stream error:", err)
+            });
+            const wrappedHandler = (event2) => {
+              eventSubject.next(event2);
             };
-            t.addEventListener(type, handler, opts);
-            this._boundListeners.push({ target: t, type, handler, options: opts });
+            t.addEventListener(type, wrappedHandler, opts);
+            this._boundListeners.push({ target: t, type, handler: wrappedHandler, options: opts, subscription });
           });
         });
         if (originalConnected) await originalConnected.apply(this);
@@ -10282,7 +10492,12 @@ var dooboostoreSimpleWebComponent = (() => {
       const bMethods = findAllLifecycleMetadata(this, ON_BEFORE_DISCONNECTED_METADATA_KEY);
       for (const m of bMethods) this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
       if (this._boundListeners) {
-        this._boundListeners.forEach((l) => l.target.removeEventListener(l.type, l.handler, l.options));
+        this._boundListeners.forEach((l) => {
+          l.target.removeEventListener(l.type, l.handler, l.options);
+          if (l.subscription && typeof l.subscription.unsubscribe === "function") {
+            l.subscription.unsubscribe();
+          }
+        });
         this._boundListeners = [];
       }
       new ElementApply(this, { id: this._swcId }).removeAllEventListener();
@@ -10365,6 +10580,13 @@ var dooboostoreSimpleWebComponent = (() => {
 
   // src/decorators/applyAttribute.ts
   var ATTRIBUTE_METADATA_KEY = Symbol.for("simple-web-component:attribute");
+  var isCssSelector = (str) => {
+    if (!str) return false;
+    if (str.startsWith("$")) return true;
+    if (/^[#.\[\:>+~]/.test(str)) return true;
+    if (/[>+~:\[\]]/.test(str)) return true;
+    return false;
+  };
   var convertValue2 = (val, type) => {
     if (val === null || val === void 0) return val;
     if (type === Number) return Number(val);
@@ -10402,6 +10624,27 @@ var dooboostoreSimpleWebComponent = (() => {
     const currentWin = conf.window;
     const r = options.root || "auto";
     const results = [];
+    let resolvedSelector = selector;
+    if (typeof selector === "function") {
+      const hostSet = SwcUtils.getHelperAndHostSet(currentWin, inst);
+      resolvedSelector = selector(inst, hostSet);
+    }
+    if (resolvedSelector instanceof currentWin.Element) {
+      results.push(resolvedSelector);
+      return results;
+    }
+    if (resolvedSelector instanceof currentWin.NodeList) {
+      results.push(...Array.from(resolvedSelector));
+      return results;
+    }
+    if (Array.isArray(resolvedSelector)) {
+      results.push(...resolvedSelector);
+      return results;
+    }
+    if (resolvedSelector === null) {
+      return results;
+    }
+    const stringSelector = resolvedSelector;
     const applyRoot = (target) => {
       if (!target) return;
       if (r === "auto") {
@@ -10411,33 +10654,33 @@ var dooboostoreSimpleWebComponent = (() => {
         if ((r === "shadow" || r === "all") && target.shadowRoot) results.push(target.shadowRoot);
       }
     };
-    if (selector === "$this" || !selector) {
+    if (stringSelector === "$this" || !stringSelector) {
       applyRoot(inst);
     } else {
       const hostSet = SwcUtils.getHostSet(inst);
-      if (selector === "$host") applyRoot(hostSet.$host);
-      else 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);
+      if (stringSelector === "$host") applyRoot(hostSet.$host);
+      else if (stringSelector === "$parentHost") applyRoot(hostSet.$parentHost);
+      else if (stringSelector === "$appHost") applyRoot(hostSet.$appHost);
+      else if (stringSelector === "$firstHost") applyRoot(hostSet.$firstHost);
+      else if (stringSelector === "$lastHost") applyRoot(hostSet.$lastHost);
+      else if (stringSelector === "$firstAppHost") applyRoot(hostSet.$firstAppHost);
+      else if (stringSelector === "$lastAppHost") applyRoot(hostSet.$lastAppHost);
+      else if (stringSelector === "$hosts") hostSet.$hosts.forEach(applyRoot);
+      else if (stringSelector === "$appHosts") hostSet.$appHosts.forEach(applyRoot);
       else {
         if (r === "shadow") {
-          const found = inst.shadowRoot?.querySelectorAll(selector);
+          const found = inst.shadowRoot?.querySelectorAll(stringSelector);
           if (found) results.push(...found);
         } else if (r === "light") {
-          const found = inst.querySelectorAll(selector);
+          const found = inst.querySelectorAll(stringSelector);
           if (found) results.push(...found);
         } else if (r === "all") {
-          const sMatch = inst.shadowRoot?.querySelectorAll(selector);
-          const lMatch = inst.querySelectorAll(selector);
+          const sMatch = inst.shadowRoot?.querySelectorAll(stringSelector);
+          const lMatch = inst.querySelectorAll(stringSelector);
           if (sMatch) results.push(...sMatch);
           if (lMatch) results.push(...lMatch);
         } else {
-          const found = (inst.shadowRoot || inst).querySelectorAll(selector);
+          const found = (inst.shadowRoot || inst).querySelectorAll(stringSelector);
           if (found) results.push(...found);
         }
       }
@@ -10535,35 +10778,32 @@ var dooboostoreSimpleWebComponent = (() => {
       });
     };
   }
-  function attribute(selector, targetAttributeNameOrOptions, options) {
-    return applyAttribute(selector, targetAttributeNameOrOptions, options);
-  }
-  function attributeThis(targetOrOptions, propertyKeyOrOptions, descriptor) {
-    if (typeof targetOrOptions === "object" && targetOrOptions !== null && !Array.isArray(targetOrOptions) && typeof propertyKeyOrOptions === "string" || typeof propertyKeyOrOptions === "symbol") {
-      return applyAttribute("$this", void 0, {})(targetOrOptions, propertyKeyOrOptions, descriptor);
-    }
-    if (typeof targetOrOptions === "string") {
-      return applyAttribute("$this", targetOrOptions, propertyKeyOrOptions);
-    } else if (targetOrOptions && typeof targetOrOptions === "object") {
-      return applyAttribute("$this", void 0, targetOrOptions);
-    } else {
-      return applyAttribute("$this", void 0, {});
+  function attribute(selectorOrAttributeOrTarget, attributeNameOrOptions, optionsOrDescriptor) {
+    if (optionsOrDescriptor !== void 0 && (typeof attributeNameOrOptions === "string" || typeof attributeNameOrOptions === "symbol")) {
+      return applyAttribute("$this", void 0, {})(selectorOrAttributeOrTarget, attributeNameOrOptions, optionsOrDescriptor);
+    }
+    if (typeof selectorOrAttributeOrTarget === "string") {
+      const isSelector = isCssSelector(selectorOrAttributeOrTarget);
+      if (isSelector) {
+        return applyAttribute(selectorOrAttributeOrTarget, attributeNameOrOptions, optionsOrDescriptor);
+      } else {
+        const options = typeof attributeNameOrOptions === "object" && attributeNameOrOptions !== null ? attributeNameOrOptions : {};
+        return applyAttribute("$this", selectorOrAttributeOrTarget, options);
+      }
     }
+    return applyAttribute("$this", void 0, selectorOrAttributeOrTarget);
   }
-  function setAttribute(selector, targetAttributeNameOrOptions, options) {
-    return applyAttribute(selector, targetAttributeNameOrOptions, options);
-  }
-  function setAttributeThis(targetOrOptions, propertyKeyOrOptions, descriptor) {
-    if (typeof targetOrOptions === "object" && targetOrOptions !== null && !Array.isArray(targetOrOptions) && (typeof propertyKeyOrOptions === "string" || typeof propertyKeyOrOptions === "symbol")) {
-      return applyAttribute("$this", void 0, {})(targetOrOptions, propertyKeyOrOptions, descriptor);
-    }
-    if (typeof targetOrOptions === "string") {
-      return applyAttribute("$this", targetOrOptions, propertyKeyOrOptions);
-    } else if (targetOrOptions && typeof targetOrOptions === "object") {
-      return applyAttribute("$this", void 0, targetOrOptions);
-    } else {
-      return applyAttribute("$this", void 0, {});
+  function setAttribute(selectorOrAttributeOrOptions, attributeNameOrOptions, optionsOrUndefined) {
+    if (typeof selectorOrAttributeOrOptions === "string") {
+      const isSelector = isCssSelector(selectorOrAttributeOrOptions);
+      if (isSelector) {
+        return applyAttribute(selectorOrAttributeOrOptions, attributeNameOrOptions, optionsOrUndefined);
+      } else {
+        const options = typeof attributeNameOrOptions === "object" && attributeNameOrOptions !== null ? attributeNameOrOptions : {};
+        return applyAttribute("$this", selectorOrAttributeOrOptions, options);
+      }
     }
+    return applyAttribute("$this", void 0, selectorOrAttributeOrOptions);
   }
   var findAllAttributeMetadata = (target) => {
     const actualTarget = target instanceof Function ? target : target.constructor;
@@ -10579,8 +10819,32 @@ var dooboostoreSimpleWebComponent = (() => {
 
   // src/decorators/applyNode.ts
   var APPLY_NODE_METADATA_KEY = Symbol.for("simple-web-component:apply-node");
+  var resolveSelector = (selector, inst, win) => {
+    if (typeof selector === "function") {
+      const hostSet = SwcUtils.getHelperAndHostSet(win, inst);
+      const result = selector(inst, hostSet);
+      if (result instanceof win.Element) {
+        return result;
+      }
+      if (result instanceof win.NodeList) {
+        return result.length > 0 ? result[0] : null;
+      }
+      if (Array.isArray(result)) {
+        return result.length > 0 ? result[0] : null;
+      }
+      if (result === null) {
+        return null;
+      }
+      return result;
+    }
+    return selector;
+  };
   var applyToDom = (currentThis, targetEl, res, pos, win, host) => {
     if (!targetEl) return;
+    if (pos === "clearChildren") {
+      targetEl.replaceChildren();
+      return [];
+    }
     const doc = win.document;
     const hostSet = SwcUtils.getHelperAndHostSet(win, currentThis);
     const id = currentThis._swcId;
@@ -10616,7 +10880,16 @@ var dooboostoreSimpleWebComponent = (() => {
     new ElementApply(targetEl, { id }).apply({ target: "noInitialized", context: stateContext, bind: currentThis });
     return nodes;
   };
-  function applyNode(selector, options = { position: "replaceChildren" }) {
+  function applyNode(selectorOrOptions, maybeOptions) {
+    let selector;
+    let options;
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      selector = selectorOrOptions;
+      options = maybeOptions || { position: "replaceChildren" };
+    } else {
+      selector = "$this";
+      options = selectorOrOptions || { position: "replaceChildren" };
+    }
     return (targetObj, propertyKey, descriptor) => {
       const constructor = targetObj.constructor;
       let metaList = ReflectUtils.getOwnMetadata(APPLY_NODE_METADATA_KEY, constructor);
@@ -10642,14 +10915,22 @@ var dooboostoreSimpleWebComponent = (() => {
             if (r === "all") return t.shadowRoot || t;
             return t;
           };
-          if (selector === "$this") return applyRoot(this);
-          if (selector === "$host") return applyRoot(hostSet.$host);
-          if (selector === "$parentHost") return applyRoot(hostSet.$parentHost);
-          if (selector === "$appHost") return applyRoot(hostSet.$appHost);
-          if (selector === "$firstHost") return applyRoot(hostSet.$firstHost);
-          if (selector === "$lastHost") return applyRoot(hostSet.$lastHost);
+          const resolved = resolveSelector(selector, this, currentWin);
+          if (resolved instanceof currentWin.Element) {
+            return applyRoot(resolved);
+          }
+          if (resolved === null) {
+            return null;
+          }
+          const stringSelector = resolved;
+          if (stringSelector === "$this") return applyRoot(this);
+          if (stringSelector === "$host") return applyRoot(hostSet.$host);
+          if (stringSelector === "$parentHost") return applyRoot(hostSet.$parentHost);
+          if (stringSelector === "$appHost") return applyRoot(hostSet.$appHost);
+          if (stringSelector === "$firstHost") return applyRoot(hostSet.$firstHost);
+          if (stringSelector === "$lastHost") return applyRoot(hostSet.$lastHost);
           const targetRoot = applyRoot(this);
-          return targetRoot ? targetRoot.querySelector(selector) : null;
+          return targetRoot ? targetRoot.querySelector(stringSelector) : null;
         };
         const targetEl = getTarget();
         const res = original.apply(this, args);
@@ -10687,92 +10968,141 @@ var dooboostoreSimpleWebComponent = (() => {
       };
     };
   }
-  function applyNodeThis(targetOrOptions, propertyKey, descriptor) {
-    const option = { position: "replaceChildren" };
-    if (propertyKey !== void 0) return applyNode("$this", option)(targetOrOptions, propertyKey, descriptor);
-    const opt = targetOrOptions || {};
-    return applyNode("$this", { ...option, ...opt });
-  }
-  function replaceChildrenNodeThis(targetOrOptions, propertyKey, descriptor) {
-    const option = { position: "replaceChildren" };
-    if (propertyKey !== void 0) return applyNode("$this", option)(targetOrOptions, propertyKey, descriptor);
-    const opt = targetOrOptions || {};
-    return applyNode("$this", { ...opt, ...option });
-  }
-  function beforeEndNodeThis(targetOrOptions, propertyKey, descriptor) {
-    const options = { position: "beforeEnd" };
-    if (propertyKey !== void 0) return applyNode("$this", options)(targetOrOptions, propertyKey, descriptor);
-    const opt = targetOrOptions || {};
-    return applyNode("$this", { ...opt, ...options });
-  }
-  function beforeEndLightNodeThis(targetOrOptions, propertyKey, descriptor) {
-    const option = { position: "beforeEnd", root: "light" };
-    if (propertyKey !== void 0) return applyNode("$this", option)(targetOrOptions, propertyKey, descriptor);
-    const opt = targetOrOptions || {};
-    return applyNode("$this", { ...opt, ...option });
+  function replaceChildren(selectorOrOptions, maybeOptions, descriptor) {
+    if (descriptor !== void 0 && (typeof maybeOptions === "symbol" || typeof maybeOptions === "string")) {
+      return applyNode({ position: "replaceChildren" })(selectorOrOptions, maybeOptions, descriptor);
+    }
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return applyNode(selectorOrOptions, { ...maybeOptions, position: "replaceChildren" });
+    }
+    return applyNode({ ...selectorOrOptions, position: "replaceChildren" });
   }
-  function beforeEndShadowNodeThis(targetOrOptions, propertyKey, descriptor) {
-    const option = { position: "beforeEnd", root: "shadow" };
-    if (propertyKey !== void 0) return applyNode("$this", option)(targetOrOptions, propertyKey, descriptor);
-    const opt = targetOrOptions || {};
-    return applyNode("$this", { ...opt, ...option });
+  function clearChildrenNode(selectorOrOptions, maybeOptions, descriptor) {
+    if (descriptor !== void 0 && (typeof maybeOptions === "symbol" || typeof maybeOptions === "string")) {
+      return applyNode({ position: "clearChildren" })(selectorOrOptions, maybeOptions, descriptor);
+    }
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return applyNode(selectorOrOptions, { ...maybeOptions, position: "clearChildren" });
+    }
+    return applyNode({ ...selectorOrOptions, position: "clearChildren" });
   }
-  function afterBeginNodeThis(targetOrOptions, propertyKey, descriptor) {
-    const option = { position: "afterBegin" };
-    if (propertyKey !== void 0) return applyNode("$this", option)(targetOrOptions, propertyKey, descriptor);
-    const opt = targetOrOptions || {};
-    return applyNode("$this", { ...opt, ...option });
+  var clearNode = clearChildrenNode;
+  function innerHtml(selectorOrOptions, maybeOptions, descriptor) {
+    if (descriptor !== void 0 && (typeof maybeOptions === "symbol" || typeof maybeOptions === "string")) {
+      return applyNode({ position: "innerHtml" })(selectorOrOptions, maybeOptions, descriptor);
+    }
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return applyNode(selectorOrOptions, { ...maybeOptions, position: "innerHtml" });
+    }
+    return applyNode({ ...selectorOrOptions, position: "innerHtml" });
   }
-  function afterBeginLightNodeThis(targetOrOptions, propertyKey, descriptor) {
-    const option = { position: "afterBegin", root: "light" };
-    if (propertyKey !== void 0) return applyNode("$this", option)(targetOrOptions, propertyKey, descriptor);
-    const opt = targetOrOptions || {};
-    return applyNode("$this", { ...opt, ...option });
+  function innerHtmlLight(selectorOrOptions, maybeOptions, descriptor) {
+    if (descriptor !== void 0 && (typeof maybeOptions === "symbol" || typeof maybeOptions === "string")) {
+      return applyNode({ position: "innerHtml", root: "light" })(selectorOrOptions, maybeOptions, descriptor);
+    }
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return applyNode(selectorOrOptions, { ...maybeOptions, position: "innerHtml", root: "light" });
+    }
+    return applyNode({ ...selectorOrOptions, position: "innerHtml", root: "light" });
   }
-  function innerHtmlNodeThis(targetOrOptions, propertyKey, descriptor) {
-    const option = { position: "innerHtml" };
-    if (propertyKey !== void 0) return applyNode("$this", option)(targetOrOptions, propertyKey, descriptor);
-    const opt = targetOrOptions || {};
-    return applyNode("$this", { ...opt, ...option });
+  function innerHtmlShadow(selectorOrOptions, maybeOptions, descriptor) {
+    if (descriptor !== void 0 && (typeof maybeOptions === "symbol" || typeof maybeOptions === "string")) {
+      return applyNode({ position: "innerHtml", root: "shadow" })(selectorOrOptions, maybeOptions, descriptor);
+    }
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return applyNode(selectorOrOptions, { ...maybeOptions, position: "innerHtml", root: "shadow" });
+    }
+    return applyNode({ ...selectorOrOptions, position: "innerHtml", root: "shadow" });
   }
-  function innerTextNodeThis(targetOrOptions, propertyKey, descriptor) {
-    const option = { position: "innerText" };
-    if (propertyKey !== void 0) return applyNode("$this", option)(targetOrOptions, propertyKey, descriptor);
-    const opt = targetOrOptions || {};
-    return applyNode("$this", { ...opt, ...option });
+  function innerText(selectorOrOptions, maybeOptions, descriptor) {
+    if (descriptor !== void 0 && (typeof maybeOptions === "symbol" || typeof maybeOptions === "string")) {
+      return applyNode({ position: "innerText" })(selectorOrOptions, maybeOptions, descriptor);
+    }
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return applyNode(selectorOrOptions, { ...maybeOptions, position: "innerText" });
+    }
+    return applyNode({ ...selectorOrOptions, position: "innerText" });
   }
-  function innerHtmlLightNodeThis(targetOrOptions, propertyKey, descriptor) {
-    const option = { position: "innerHtml", root: "light" };
-    if (propertyKey !== void 0) return applyNode("$this", option)(targetOrOptions, propertyKey, descriptor);
-    const opt = targetOrOptions || {};
-    return applyNode("$this", { ...opt, ...option });
+  function innerTextLight(selectorOrOptions, maybeOptions, descriptor) {
+    if (descriptor !== void 0 && (typeof maybeOptions === "symbol" || typeof maybeOptions === "string")) {
+      return applyNode({ position: "innerText", root: "light" })(selectorOrOptions, maybeOptions, descriptor);
+    }
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return applyNode(selectorOrOptions, { ...maybeOptions, position: "innerText", root: "light" });
+    }
+    return applyNode({ ...selectorOrOptions, position: "innerText", root: "light" });
   }
-  function replaceChildrenLightNodeThis(targetOrOptions, propertyKey, descriptor) {
-    const option = { position: "replaceChildren", root: "light" };
-    if (propertyKey !== void 0) return applyNode("$this", option)(targetOrOptions, propertyKey, descriptor);
-    const opt = targetOrOptions || {};
-    return applyNode("$this", { ...opt, ...option });
+  function innerTextShadow(selectorOrOptions, maybeOptions, descriptor) {
+    if (descriptor !== void 0 && (typeof maybeOptions === "symbol" || typeof maybeOptions === "string")) {
+      return applyNode({ position: "innerText", root: "shadow" })(selectorOrOptions, maybeOptions, descriptor);
+    }
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return applyNode(selectorOrOptions, { ...maybeOptions, position: "innerText", root: "shadow" });
+    }
+    return applyNode({ ...selectorOrOptions, position: "innerText", root: "shadow" });
   }
-  function replaceChildrenNode(selector, options = {}) {
-    return applyNode(selector, { ...options, position: "replaceChildren" });
+  function insertBeforeEnd(selectorOrOptions, maybeOptions, descriptor) {
+    if (descriptor !== void 0 && (typeof maybeOptions === "symbol" || typeof maybeOptions === "string")) {
+      return applyNode({ position: "beforeEnd" })(selectorOrOptions, maybeOptions, descriptor);
+    }
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return applyNode(selectorOrOptions, { ...maybeOptions, position: "beforeEnd" });
+    }
+    return applyNode({ ...selectorOrOptions, position: "beforeEnd" });
   }
-  function innerHtmlNode(selector, options = {}) {
-    return applyNode(selector, { ...options, position: "innerHtml" });
+  function insertBeforeEndLight(selectorOrOptions, maybeOptions, descriptor) {
+    if (descriptor !== void 0 && (typeof maybeOptions === "symbol" || typeof maybeOptions === "string")) {
+      return applyNode({ position: "beforeEnd", root: "light" })(selectorOrOptions, maybeOptions, descriptor);
+    }
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return applyNode(selectorOrOptions, { ...maybeOptions, position: "beforeEnd", root: "light" });
+    }
+    return applyNode({ ...selectorOrOptions, position: "beforeEnd", root: "light" });
   }
-  function innerHtmlLightNode(selector, options = {}) {
-    return applyNode(selector, { ...options, position: "innerHtml", root: "light" });
+  function insertBeforeEndShadow(selectorOrOptions, maybeOptions, descriptor) {
+    if (descriptor !== void 0 && (typeof maybeOptions === "symbol" || typeof maybeOptions === "string")) {
+      return applyNode({ position: "beforeEnd", root: "shadow" })(selectorOrOptions, maybeOptions, descriptor);
+    }
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return applyNode(selectorOrOptions, { ...maybeOptions, position: "beforeEnd", root: "shadow" });
+    }
+    return applyNode({ ...selectorOrOptions, position: "beforeEnd", root: "shadow" });
   }
-  function innerHtmlShadowNode(selector, options = {}) {
-    return applyNode(selector, { ...options, position: "innerHtml", root: "shadow" });
+  function insertAfterBegin(selectorOrOptions, maybeOptions, descriptor) {
+    if (descriptor !== void 0 && (typeof maybeOptions === "symbol" || typeof maybeOptions === "string")) {
+      return applyNode({ position: "afterBegin" })(selectorOrOptions, maybeOptions, descriptor);
+    }
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return applyNode(selectorOrOptions, { ...maybeOptions, position: "afterBegin" });
+    }
+    return applyNode({ ...selectorOrOptions, position: "afterBegin" });
   }
-  function innerTextNode(selector, options = {}) {
-    return applyNode(selector, { ...options, position: "innerText" });
+  function insertAfterBeginLight(selectorOrOptions, maybeOptions, descriptor) {
+    if (descriptor !== void 0 && (typeof maybeOptions === "symbol" || typeof maybeOptions === "string")) {
+      return applyNode({ position: "afterBegin", root: "light" })(selectorOrOptions, maybeOptions, descriptor);
+    }
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return applyNode(selectorOrOptions, { ...maybeOptions, position: "afterBegin", root: "light" });
+    }
+    return applyNode({ ...selectorOrOptions, position: "afterBegin", root: "light" });
   }
-  function innerTextLightNode(selector, options = {}) {
-    return applyNode(selector, { ...options, position: "innerText", root: "light" });
+  function replaceChildrenLight(selectorOrOptions, maybeOptions, descriptor) {
+    if (descriptor !== void 0 && (typeof maybeOptions === "symbol" || typeof maybeOptions === "string")) {
+      return applyNode({ position: "replaceChildren", root: "light" })(selectorOrOptions, maybeOptions, descriptor);
+    }
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return applyNode(selectorOrOptions, { ...maybeOptions, position: "replaceChildren", root: "light" });
+    }
+    return applyNode({ ...selectorOrOptions, position: "replaceChildren", root: "light" });
   }
-  function innerTextShadowNode(selector, options = {}) {
-    return applyNode(selector, { ...options, position: "innerText", root: "shadow" });
+  function clearChildrenLight(selectorOrOptions, maybeOptions, descriptor) {
+    if (descriptor !== void 0 && (typeof maybeOptions === "symbol" || typeof maybeOptions === "string")) {
+      return applyNode({ position: "clearChildren", root: "light" })(selectorOrOptions, maybeOptions, descriptor);
+    }
+    if (typeof selectorOrOptions === "string" || typeof selectorOrOptions === "function") {
+      return applyNode(selectorOrOptions, { ...maybeOptions, position: "clearChildren", root: "light" });
+    }
+    return applyNode({ ...selectorOrOptions, position: "clearChildren", root: "light" });
   }
   var findAllApplyNodeMetadata = (target) => {
     const result = /* @__PURE__ */ new Map();
@@ -10787,6 +11117,58 @@ var dooboostoreSimpleWebComponent = (() => {
 
   // src/decorators/applyClass.ts
   var CLASS_METADATA_KEY = Symbol.for("simple-web-component:class");
+  var resolveSelector2 = (selector, inst, win) => {
+    if (typeof selector === "function") {
+      const hostSet = SwcUtils.getHelperAndHostSet(win, inst);
+      const result = selector(inst, hostSet);
+      if (result instanceof win.Element) {
+        return [result];
+      }
+      if (result instanceof win.NodeList) {
+        return Array.from(result);
+      }
+      if (Array.isArray(result)) {
+        return result;
+      }
+      if (result === null) {
+        return [];
+      }
+      return result;
+    }
+    return selector;
+  };
+  var getTargetElements = (selector, inst, win, root) => {
+    const resolved = resolveSelector2(selector, inst, win);
+    if (Array.isArray(resolved)) {
+      return resolved;
+    }
+    const stringSelector = resolved;
+    const targetEls = [];
+    const host = inst;
+    const hostSet = SwcUtils.getHelperAndHostSet(win, inst);
+    const applyRoot = (t) => {
+      if (!t || !(t instanceof win.HTMLElement)) return;
+      targetEls.push(t);
+    };
+    if (stringSelector === "$this" || !stringSelector) applyRoot(host);
+    else if (stringSelector === "$host") applyRoot(hostSet.$host);
+    else if (stringSelector === "$parentHost") applyRoot(hostSet.$parentHost);
+    else if (stringSelector === "$appHost") applyRoot(hostSet.$appHost);
+    else if (stringSelector === "$firstHost") applyRoot(hostSet.$firstHost);
+    else if (stringSelector === "$lastHost") applyRoot(hostSet.$lastHost);
+    else if (stringSelector === "$firstAppHost") applyRoot(hostSet.$firstAppHost);
+    else if (stringSelector === "$lastAppHost") applyRoot(hostSet.$lastAppHost);
+    else if (stringSelector === "$hosts") hostSet.$hosts.forEach(applyRoot);
+    else if (stringSelector === "$appHosts") hostSet.$appHosts.forEach(applyRoot);
+    else {
+      const targetRoot = root === "auto" ? host.shadowRoot || host : root === "shadow" ? host.shadowRoot : host;
+      if (targetRoot) {
+        const found = targetRoot.querySelectorAll(stringSelector);
+        if (found) targetEls.push(...Array.from(found));
+      }
+    }
+    return targetEls;
+  };
   function createClassDecorator(action) {
     return (selector, classMapOrOptions, options = {}) => {
       return (target, propertyKey, descriptor) => {
@@ -10821,28 +11203,7 @@ var dooboostoreSimpleWebComponent = (() => {
               const host = this;
               const hostSet = { ...SwcUtils.getHelperAndHostSet(win, host), $this: this };
               const r = finalOptions.root || "auto";
-              const targetEls = [];
-              const applyRoot = (t) => {
-                if (!t || !(t instanceof win.HTMLElement)) return;
-                targetEls.push(t);
-              };
-              if (selector === "$this" || !selector) applyRoot(host);
-              else if (selector === "$host") applyRoot(hostSet.$host);
-              else 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 {
-                const targetRoot = r === "auto" ? host.shadowRoot || host : r === "shadow" ? host.shadowRoot : host;
-                if (targetRoot) {
-                  const found = targetRoot.querySelectorAll(selector);
-                  if (found) targetEls.push(...Array.from(found));
-                }
-              }
+              const targetEls = getTargetElements(selector, this, win, r);
               targetEls.forEach((targetEl) => {
                 if (finalOptions.filter && !finalOptions.filter(targetEl, resolvedValue, { currentThis: this, helper: hostSet })) {
                   return;
@@ -10903,22 +11264,64 @@ var dooboostoreSimpleWebComponent = (() => {
       };
     };
   }
-  function applyClass(selector, action = "update", options = {}) {
-    return createClassDecorator(action)(selector, options);
-  }
-  var setClass = (selector, classMapOrOptions, options = {}) => createClassDecorator("set")(selector, classMapOrOptions, options);
-  var updateClass = (selector, classMapOrOptions, options = {}) => createClassDecorator("update")(selector, classMapOrOptions, options);
-  var addClass = (selector, classMapOrOptions, options = {}) => createClassDecorator("add")(selector, classMapOrOptions, options);
-  var removeClass = (selector, classMapOrOptions, options = {}) => createClassDecorator("remove")(selector, classMapOrOptions, options);
-  var toggleClass = (selector, classMapOrOptions, options = {}) => createClassDecorator("toggle")(selector, classMapOrOptions, options);
-  function applyClassThis(action = "update", options = {}) {
+  function applyClass(selectorOrTarget, actionOrPropertyKey, optionsOrDescriptor) {
+    if (optionsOrDescriptor !== void 0 && (typeof actionOrPropertyKey === "string" || typeof actionOrPropertyKey === "symbol")) {
+      return createClassDecorator("update")("$this", {})(selectorOrTarget, actionOrPropertyKey, optionsOrDescriptor);
+    }
+    if (typeof selectorOrTarget === "string") {
+      const action2 = typeof actionOrPropertyKey === "string" ? actionOrPropertyKey : "update";
+      const options2 = typeof actionOrPropertyKey === "object" ? actionOrPropertyKey : optionsOrDescriptor;
+      return createClassDecorator(action2)(selectorOrTarget, options2);
+    }
+    const action = typeof selectorOrTarget === "string" ? selectorOrTarget : "update";
+    const options = typeof selectorOrTarget === "object" ? selectorOrTarget : actionOrPropertyKey;
     return createClassDecorator(action)("$this", options);
   }
-  var setClassThis = (classMapOrOptions, options = {}) => createClassDecorator("set")("$this", classMapOrOptions, options);
-  var updateClassThis = (classMapOrOptions, options = {}) => createClassDecorator("update")("$this", classMapOrOptions, options);
-  var addClassThis = (classMapOrOptions, options = {}) => createClassDecorator("add")("$this", classMapOrOptions, options);
-  var removeClassThis = (classMapOrOptions, options = {}) => createClassDecorator("remove")("$this", classMapOrOptions, options);
-  var toggleClassThis = (classMapOrOptions, options = {}) => createClassDecorator("toggle")("$this", classMapOrOptions, options);
+  function setClass(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor) {
+    if (optionsOrDescriptor !== void 0 && (typeof classMapOrOptionsOrPropertyKey === "string" || typeof classMapOrOptionsOrPropertyKey === "symbol")) {
+      return createClassDecorator("set")("$this", {})(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor);
+    }
+    if (typeof selectorOrTarget === "string") {
+      return createClassDecorator("set")(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor);
+    }
+    return createClassDecorator("set")("$this", selectorOrTarget);
+  }
+  function updateClass(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor) {
+    if (optionsOrDescriptor !== void 0 && (typeof classMapOrOptionsOrPropertyKey === "string" || typeof classMapOrOptionsOrPropertyKey === "symbol")) {
+      return createClassDecorator("update")("$this", {})(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor);
+    }
+    if (typeof selectorOrTarget === "string") {
+      return createClassDecorator("update")(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor);
+    }
+    return createClassDecorator("update")("$this", selectorOrTarget);
+  }
+  function addClass(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor) {
+    if (optionsOrDescriptor !== void 0 && (typeof classMapOrOptionsOrPropertyKey === "string" || typeof classMapOrOptionsOrPropertyKey === "symbol")) {
+      return createClassDecorator("add")("$this", {})(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor);
+    }
+    if (typeof selectorOrTarget === "string") {
+      return createClassDecorator("add")(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor);
+    }
+    return createClassDecorator("add")("$this", selectorOrTarget);
+  }
+  function removeClass(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor) {
+    if (optionsOrDescriptor !== void 0 && (typeof classMapOrOptionsOrPropertyKey === "string" || typeof classMapOrOptionsOrPropertyKey === "symbol")) {
+      return createClassDecorator("remove")("$this", {})(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor);
+    }
+    if (typeof selectorOrTarget === "string") {
+      return createClassDecorator("remove")(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor);
+    }
+    return createClassDecorator("remove")("$this", selectorOrTarget);
+  }
+  function toggleClass(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor) {
+    if (optionsOrDescriptor !== void 0 && (typeof classMapOrOptionsOrPropertyKey === "string" || typeof classMapOrOptionsOrPropertyKey === "symbol")) {
+      return createClassDecorator("toggle")("$this", {})(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor);
+    }
+    if (typeof selectorOrTarget === "string") {
+      return createClassDecorator("toggle")(selectorOrTarget, classMapOrOptionsOrPropertyKey, optionsOrDescriptor);
+    }
+    return createClassDecorator("toggle")("$this", selectorOrTarget);
+  }
   var findAllClassMetadata = (target) => {
     const result = /* @__PURE__ */ new Map();
     const maps = ReflectUtils.findAllMetadata(CLASS_METADATA_KEY, target);
@@ -10932,6 +11335,58 @@ var dooboostoreSimpleWebComponent = (() => {
 
   // src/decorators/applyStyle.ts
   var STYLE_METADATA_KEY = Symbol.for("simple-web-component:style");
+  var resolveSelector3 = (selector, inst, win) => {
+    if (typeof selector === "function") {
+      const hostSet = SwcUtils.getHelperAndHostSet(win, inst);
+      const result = selector(inst, hostSet);
+      if (result instanceof win.Element) {
+        return [result];
+      }
+      if (result instanceof win.NodeList) {
+        return Array.from(result);
+      }
+      if (Array.isArray(result)) {
+        return result;
+      }
+      if (result === null) {
+        return [];
+      }
+      return result;
+    }
+    return selector;
+  };
+  var getTargetElements2 = (selector, inst, win, root) => {
+    const resolved = resolveSelector3(selector, inst, win);
+    if (Array.isArray(resolved)) {
+      return resolved;
+    }
+    const stringSelector = resolved;
+    const targetEls = [];
+    const host = inst;
+    const hostSet = SwcUtils.getHelperAndHostSet(win, inst);
+    const applyRoot = (t) => {
+      if (!t || !(t instanceof win.HTMLElement)) return;
+      targetEls.push(t);
+    };
+    if (stringSelector === "$this" || !stringSelector) applyRoot(host);
+    else if (stringSelector === "$host") applyRoot(hostSet.$host);
+    else if (stringSelector === "$parentHost") applyRoot(hostSet.$parentHost);
+    else if (stringSelector === "$appHost") applyRoot(hostSet.$appHost);
+    else if (stringSelector === "$firstHost") applyRoot(hostSet.$firstHost);
+    else if (stringSelector === "$lastHost") applyRoot(hostSet.$lastHost);
+    else if (stringSelector === "$firstAppHost") applyRoot(hostSet.$firstAppHost);
+    else if (stringSelector === "$lastAppHost") applyRoot(hostSet.$lastAppHost);
+    else if (stringSelector === "$hosts") hostSet.$hosts.forEach(applyRoot);
+    else if (stringSelector === "$appHosts") hostSet.$appHosts.forEach(applyRoot);
+    else {
+      const targetRoot = root === "auto" ? host.shadowRoot || host : root === "shadow" ? host.shadowRoot : host;
+      if (targetRoot) {
+        const found = targetRoot.querySelectorAll(stringSelector);
+        if (found) targetEls.push(...Array.from(found));
+      }
+    }
+    return targetEls;
+  };
   function createStyleDecorator(action) {
     return (selector, options = {}) => {
       return (target, propertyKey, descriptor) => {
@@ -10959,28 +11414,7 @@ var dooboostoreSimpleWebComponent = (() => {
               const host = this;
               const hostSet = { ...SwcUtils.getHelperAndHostSet(win, host), $this: this };
               const r = options.root || "auto";
-              const targetEls = [];
-              const applyRoot = (t) => {
-                if (!t || !(t instanceof win.HTMLElement)) return;
-                targetEls.push(t);
-              };
-              if (selector === "$this" || !selector) applyRoot(host);
-              else if (selector === "$host") applyRoot(hostSet.$host);
-              else 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 {
-                const targetRoot = r === "auto" ? host.shadowRoot || host : r === "shadow" ? host.shadowRoot : host;
-                if (targetRoot) {
-                  const found = targetRoot.querySelectorAll(selector);
-                  if (found) targetEls.push(...Array.from(found));
-                }
-              }
+              const targetEls = getTargetElements2(selector, this, win, r);
               targetEls.forEach((targetEl) => {
                 if (options.filter && !options.filter(targetEl, resolvedValue, { currentThis: this, helper: hostSet })) {
                   return;
@@ -11027,18 +11461,46 @@ var dooboostoreSimpleWebComponent = (() => {
       };
     };
   }
-  function applyStyle(selector, action = "update", options = {}) {
-    return createStyleDecorator(action)(selector, options);
-  }
-  var setStyle = (selector, options = {}) => createStyleDecorator("set")(selector, options);
-  var updateStyle = (selector, options = {}) => createStyleDecorator("update")(selector, options);
-  var removeStyle = (selector, options = {}) => createStyleDecorator("remove")(selector, options);
-  function applyStyleThis(action = "update", options = {}) {
+  function applyStyle(selectorOrTarget, actionOrPropertyKey, optionsOrDescriptor) {
+    if (optionsOrDescriptor !== void 0 && (typeof actionOrPropertyKey === "string" || typeof actionOrPropertyKey === "symbol")) {
+      return createStyleDecorator("update")("$this", {})(selectorOrTarget, actionOrPropertyKey, optionsOrDescriptor);
+    }
+    if (typeof selectorOrTarget === "string") {
+      const action2 = typeof actionOrPropertyKey === "string" ? actionOrPropertyKey : "update";
+      const options2 = typeof actionOrPropertyKey === "object" ? actionOrPropertyKey : optionsOrDescriptor;
+      return createStyleDecorator(action2)(selectorOrTarget, options2);
+    }
+    const action = typeof selectorOrTarget === "string" ? selectorOrTarget : "update";
+    const options = typeof selectorOrTarget === "object" ? selectorOrTarget : actionOrPropertyKey;
     return createStyleDecorator(action)("$this", options);
   }
-  var setStyleThis = (options = {}) => createStyleDecorator("set")("$this", options);
-  var updateStyleThis = (options = {}) => createStyleDecorator("update")("$this", options);
-  var removeStyleThis = (options = {}) => createStyleDecorator("remove")("$this", options);
+  function setStyle(selectorOrTarget, optionsOrPropertyKey, descriptor) {
+    if (descriptor !== void 0 && (typeof optionsOrPropertyKey === "string" || typeof optionsOrPropertyKey === "symbol")) {
+      return createStyleDecorator("set")("$this", {})(selectorOrTarget, optionsOrPropertyKey, descriptor);
+    }
+    if (typeof selectorOrTarget === "string") {
+      return createStyleDecorator("set")(selectorOrTarget, optionsOrPropertyKey);
+    }
+    return createStyleDecorator("set")("$this", selectorOrTarget);
+  }
+  function updateStyle(selectorOrTarget, optionsOrPropertyKey, descriptor) {
+    if (descriptor !== void 0 && (typeof optionsOrPropertyKey === "string" || typeof optionsOrPropertyKey === "symbol")) {
+      return createStyleDecorator("update")("$this", {})(selectorOrTarget, optionsOrPropertyKey, descriptor);
+    }
+    if (typeof selectorOrTarget === "string") {
+      return createStyleDecorator("update")(selectorOrTarget, optionsOrPropertyKey);
+    }
+    return createStyleDecorator("update")("$this", selectorOrTarget);
+  }
+  function removeStyle(selectorOrTarget, optionsOrPropertyKey, descriptor) {
+    if (descriptor !== void 0 && (typeof optionsOrPropertyKey === "string" || typeof optionsOrPropertyKey === "symbol")) {
+      return createStyleDecorator("remove")("$this", {})(selectorOrTarget, optionsOrPropertyKey, descriptor);
+    }
+    if (typeof selectorOrTarget === "string") {
+      return createStyleDecorator("remove")(selectorOrTarget, optionsOrPropertyKey);
+    }
+    return createStyleDecorator("remove")("$this", selectorOrTarget);
+  }
   var findAllStyleMetadata = (target) => {
     const result = /* @__PURE__ */ new Map();
     const maps = ReflectUtils.findAllMetadata(STYLE_METADATA_KEY, target);
@@ -11086,6 +11548,7 @@ var dooboostoreSimpleWebComponent = (() => {
     }
     return createSubscribeSwcAppRouteChangeWhileConnected(options);
   }
+  var changedRoute = subscribeSwcAppRouteChangeWhileConnected;
   var getSubscribeSwcAppRouteChangeWhileConnectedMetadata = (target) => {
     const constructor = target instanceof Function ? target : target.constructor;
     const results = ReflectUtils.getOwnMetadata(SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY, constructor);
@@ -11126,6 +11589,7 @@ var dooboostoreSimpleWebComponent = (() => {
     }
     return createSubscribeSwcAppMessageWhileConnected(options, messageType);
   }
+  var receiveMessage = subscribeSwcAppMessageWhileConnected;
   var getSubscribeSwcAppMessageWhileConnectedMetadata = (target) => {
     const constructor = target instanceof Function ? target : target.constructor;
     return ReflectUtils.getOwnMetadata(SUBSCRIBE_SWC_APP_MESSAGE_WHILE_CONNECTED_METADATA_KEY, constructor);
@@ -11155,7 +11619,7 @@ var dooboostoreSimpleWebComponent = (() => {
           }
           return v;
         };
-        const publishMessage = (data) => {
+        const publishMessage2 = (data) => {
           const appHost = SwcUtils.getAppHost(this);
           if (appHost) {
             appHost.publishMessage({
@@ -11168,13 +11632,13 @@ var dooboostoreSimpleWebComponent = (() => {
         if (result instanceof Promise) {
           result.then((data) => {
             const extracted = extractValue(data);
-            publishMessage(extracted);
+            publishMessage2(extracted);
           }).catch((err) => {
             console.warn("publishSwcAppMessage async error:", err);
           });
         } else {
           const extracted = extractValue(result);
-          publishMessage(extracted);
+          publishMessage2(extracted);
         }
         return result;
       };
@@ -11199,7 +11663,7 @@ var dooboostoreSimpleWebComponent = (() => {
     }
     return createPublishSwcAppMessage(messageType, options);
   }
-  var publish = publishSwcAppMessage;
+  var publishMessage = publishSwcAppMessage;
   var getPublishSwcAppMessageMetadata = (target) => {
     const constructor = target instanceof Function ? target : target.constructor;
     return ReflectUtils.getOwnMetadata(PUBLISH_SWC_APP_MESSAGE_METADATA_KEY, constructor);
@@ -13316,6 +13780,10 @@ var dooboostoreSimpleWebComponent = (() => {
       super(config);
       __publicField(this, "_history", []);
       __publicField(this, "_currentIndex", -1);
+      if (config.firstUrl) {
+        this._history.push({ url: config.firstUrl, data: null, title: void 0 });
+        this._currentIndex = 0;
+      }
     }
     // Override pushState to manage internal history
     pushState(data, title, path, config) {
@@ -13487,7 +13955,9 @@ var dooboostoreSimpleWebComponent = (() => {
         if (this.router) otherInstanceSim.set(Router, this.router);
         this.simpleApplication.run(otherInstanceSim);
         if (this._config.onStartedLazyDefineComponent) {
-          await Promise.all(this._config.onStartedLazyDefineComponent.map((it) => it(this._config.window)));
+          await Promise.all(this._config.onStartedLazyDefineComponent.map((it) => {
+            it(this._config.window);
+          }));
         }
         if (this._config.onEngineStarted) {
           await this._config.onEngineStarted(this.simpleApplication, this.host);
@@ -13564,6 +14034,13 @@ var dooboostoreSimpleWebComponent = (() => {
               const methodName = metadata.propertyKey;
               let pathPattern = metadata.options?.path;
               const filter = metadata.options?.filter;
+              const extractValue = (v) => {
+                const keyToUse = metadata.options?.valueKey ?? SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY;
+                if (v && typeof v === "object" && keyToUse in v) {
+                  return v[keyToUse];
+                }
+                return v;
+              };
               if (typeof pathPattern === "function") {
                 pathPattern = pathPattern(instance);
               }
@@ -13588,7 +14065,7 @@ var dooboostoreSimpleWebComponent = (() => {
               const hostSet = SwcUtils.getHelperAndHostSet(this.config.window, this);
               const filterPassed = !filter || filter(this.router, { helper: hostSet, currentThis: instance });
               if (pathMatched && filterPassed && instance[methodName]) {
-                const result = await instance[methodName]({ ...re, pathData });
+                const result = extractValue(await instance[methodName]({ ...re, pathData }));
                 if (result !== void 0 && result !== null) {
                   break;
                 }
@@ -13703,7 +14180,15 @@ var dooboostoreSimpleWebComponent = (() => {
               context: this,
               args: SwcUtils.getHelperAndHostSet(win, this)
             });
-            this.connect(userConfig);
+            if (userConfig instanceof Promise) {
+              userConfig.then((resolvedConfig) => {
+                this.connect(resolvedConfig);
+              }).catch((e) => {
+                console.error("[SWC-MIXIN] Script execution failed:", e);
+              });
+            } else {
+              this.connect(userConfig);
+            }
           } catch (e) {
             console.error("[SWC-MIXIN] Script execution failed:", e);
           }