@dooboostore/simple-web-component 1.0.43 → 1.0.45

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

@@ -6342,6 +6342,155 @@ var getAddEventListenerMetadata = (target) => {
   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");
@@ -6846,7 +6995,7 @@ var ElementApply = class _ElementApply {
             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)});
                     }
                   }
@@ -8800,18 +8949,32 @@ var SwcUtils;
 
 // 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);
@@ -8823,45 +8986,72 @@ function emitCustomEvent(selectorOrTarget, type, options = {}) {
           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 })) {
@@ -8884,20 +9074,8 @@ var getEmitCustomEventMetadataList = (target) => {
   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;
@@ -8905,7 +9083,7 @@ var convertValue = (val, type) => {
   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);
@@ -8945,150 +9123,141 @@ var convertAttributeValue = (val, type) => {
 
 // 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;
@@ -9097,139 +9266,153 @@ var getQueryMetadata = (target) => {
 
 // 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;
@@ -9419,6 +9602,27 @@ var resolvePropertyTargets = (inst, selector, options) => {
   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") {
@@ -9428,37 +9632,37 @@ var resolvePropertyTargets = (inst, selector, options) => {
       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);
       }
     }
@@ -9557,35 +9761,20 @@ function applyProperty(selector, targetPropertyKeyOrOptions, options) {
     });
   };
 }
-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;
@@ -9898,7 +10087,8 @@ var elementDefine = (name, config = {}) => (constructor) => {
       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);
@@ -9961,6 +10151,22 @@ var elementDefine = (name, config = {}) => (constructor) => {
         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") {
@@ -9970,30 +10176,32 @@ var elementDefine = (name, config = {}) => (constructor) => {
             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) => {
@@ -10008,10 +10216,34 @@ var elementDefine = (name, config = {}) => (constructor) => {
             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);
@@ -10051,7 +10283,12 @@ var elementDefine = (name, config = {}) => (constructor) => {
     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();
@@ -10134,6 +10371,13 @@ var elementDefine = (name, config = {}) => (constructor) => {
 
 // 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);
@@ -10171,6 +10415,27 @@ var resolveAttributeTargets = (inst, selector, options) => {
   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") {
@@ -10180,33 +10445,33 @@ var resolveAttributeTargets = (inst, selector, options) => {
       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);
       }
     }
@@ -10304,35 +10569,32 @@ function applyAttribute(selector, targetAttributeNameOrOptions, options) {
     });
   };
 }
-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;
@@ -10348,8 +10610,32 @@ var findAllAttributeApplyMetadata = (target) => {
 
 // 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;
@@ -10385,7 +10671,16 @@ var applyToDom = (currentThis, targetEl, res, pos, win, host) => {
   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);
@@ -10411,14 +10706,22 @@ function applyNode(selector, options = { position: "replaceChildren" }) {
           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);
@@ -10456,92 +10759,141 @@ function applyNode(selector, options = { position: "replaceChildren" }) {
     };
   };
 }
-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();
@@ -10556,6 +10908,58 @@ var findAllApplyNodeMetadata = (target) => {
 
 // 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) => {
@@ -10590,28 +10994,7 @@ function createClassDecorator(action) {
             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;
@@ -10672,22 +11055,64 @@ function createClassDecorator(action) {
     };
   };
 }
-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);
@@ -10701,6 +11126,58 @@ var findAllClassMetadata = (target) => {
 
 // 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) => {
@@ -10728,28 +11205,7 @@ function createStyleDecorator(action) {
             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;
@@ -10796,18 +11252,46 @@ function createStyleDecorator(action) {
     };
   };
 }
-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);
@@ -10855,6 +11339,7 @@ function subscribeSwcAppRouteChangeWhileConnected(targetOrOptions, propertyKeyOr
   }
   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);
@@ -10895,6 +11380,7 @@ function subscribeSwcAppMessageWhileConnected(targetOrMessageTypeOrOptions, opti
   }
   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);
@@ -10924,7 +11410,7 @@ function createPublishSwcAppMessage(messageType, options) {
         }
         return v;
       };
-      const publishMessage = (data) => {
+      const publishMessage2 = (data) => {
         const appHost = SwcUtils.getAppHost(this);
         if (appHost) {
           appHost.publishMessage({
@@ -10937,13 +11423,13 @@ function createPublishSwcAppMessage(messageType, options) {
       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;
     };
@@ -10968,7 +11454,7 @@ function publishSwcAppMessage(targetOrMessageTypeOrOptions, propertyKeyOrOptions
   }
   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);
@@ -13085,6 +13571,10 @@ var ElementRouter = class extends Router {
     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) {
@@ -13256,7 +13746,9 @@ var SwcAppEngine = class {
       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);
@@ -13333,6 +13825,13 @@ function SwcAppMixin(Base) {
             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);
             }
@@ -13357,7 +13856,7 @@ function SwcAppMixin(Base) {
             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;
               }
@@ -13472,7 +13971,15 @@ function SwcAppMixin(Base) {
             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);
         }
@@ -13745,6 +14252,7 @@ export {
   SwcAppAside,
   SwcAppBody,
   SwcAppDiv,
+  SwcAppEngine,
   SwcAppFooter,
   SwcAppHeader,
   SwcAppMain,
@@ -13753,7 +14261,6 @@ export {
   SwcAppSection,
   SwcUtils,
   addClass,
-  addClassThis,
   addEventListener,
   addEventListenerAppHost,
   addEventListenerDelegate,
@@ -13763,28 +14270,21 @@ export {
   addEventListenerDocument,
   addEventListenerThis,
   addEventListenerWindow,
-  afterBeginLightNodeThis,
-  afterBeginNodeThis,
-  allAppHost,
-  allParentHost,
   appendHtmlSlot,
   appendSlot,
   appendTextSlot,
   applyAttribute,
   applyClass,
-  applyClassThis,
   applyNode,
-  applyNodeThis,
   applyProperty,
   applySlot,
   applyStyle,
-  applyStyleThis,
   attribute,
-  attributeThis,
-  beforeEndLightNodeThis,
-  beforeEndNodeThis,
-  beforeEndShadowNodeThis,
-  changedAttributeThis,
+  changedAttribute,
+  changedRoute,
+  clearChildrenLight,
+  clearChildrenNode,
+  clearNode,
   clearSlot,
   commentNode,
   convertAttributeValue,
@@ -13804,7 +14304,6 @@ export {
   elementDefine,
   emit,
   emitCustomEvent,
-  emitCustomEventThis,
   ensureInit,
   event,
   eventDelegate,
@@ -13847,15 +14346,17 @@ export {
   htmlSectionElement,
   htmlSpanElement,
   htmlUlElement,
-  innerHtmlLightNode,
-  innerHtmlLightNodeThis,
-  innerHtmlNode,
-  innerHtmlNodeThis,
-  innerHtmlShadowNode,
-  innerTextLightNode,
-  innerTextNode,
-  innerTextNodeThis,
-  innerTextShadowNode,
+  innerHtml,
+  innerHtmlLight,
+  innerHtmlShadow,
+  innerText,
+  innerTextLight,
+  innerTextShadow,
+  insertAfterBegin,
+  insertAfterBeginLight,
+  insertBeforeEnd,
+  insertBeforeEndLight,
+  insertBeforeEndShadow,
   isSSR,
   onAdopted,
   onAdoptedAfter,
@@ -13875,39 +14376,26 @@ export {
   prependSlot,
   prependTextSlot,
   property,
-  propertyThis,
-  publish,
+  publishMessage,
   publishSwcAppMessage,
   query,
   queryAll,
-  queryAllThis,
-  queryAppHost,
-  queryDocument,
-  queryHost,
-  queryThis,
-  queryWindow,
+  receiveMessage,
   removeClass,
-  removeClassThis,
   removeSSRAttribute,
   removeStyle,
-  removeStyleThis,
+  replaceChildren,
   replaceChildrenHtmlSlot,
-  replaceChildrenLightNodeThis,
-  replaceChildrenNode,
-  replaceChildrenNodeThis,
+  replaceChildrenLight,
   replaceChildrenSlot,
   replaceChildrenTextSlot,
   resolveAttributeTargets,
   resolvePropertyTargets,
   setAttribute,
-  setAttributeThis,
   setClass,
-  setClassThis,
   setProperty,
-  setPropertyThis,
   setSSRAttribute,
   setStyle,
-  setStyleThis,
   state,
   subscribeSwcAppMessageWhileConnected,
   subscribeSwcAppRouteChangeWhileConnected,
@@ -13924,11 +14412,8 @@ export {
   swcAppTagName,
   textNode,
   toggleClass,
-  toggleClassThis,
   updateClass,
-  updateClassThis,
-  updateStyle,
-  updateStyleThis
+  updateStyle
 };
 /*! Bundled license information: