@vanduo-oss/framework 1.3.8 → 1.4.0

package/dist/vanduo.esm.js

@@ -1,192 +1,400 @@
-/*! Vanduo v1.3.8 | Built: 2026-05-06T18:32:43.703Z | git:6042eac | development */
+/*! Vanduo v1.4.0 | Built: 2026-05-20T14:51:00.085Z | git:46420b0 | development */
 
 // js/utils/lifecycle.js
 (function() {
   "use strict";
+  function normalizeCallbacks(value) {
+    if (!value) return [];
+    if (Array.isArray(value)) {
+      return value.filter(function(fn) {
+        return typeof fn === "function";
+      });
+    }
+    return typeof value === "function" ? [value] : [];
+  }
+  function normalizeOptions(options) {
+    if (typeof options === "function") {
+      return { onDestroy: [options] };
+    }
+    return options || {};
+  }
+  function callSafely(label, fn) {
+    try {
+      fn();
+    } catch (error) {
+      console.warn("[Vanduo Lifecycle] " + label + " error:", error);
+    }
+  }
   const Lifecycle = {
-    // Map of element -> { componentName, cleanupFunctions }
+    // Map<Element, Map<componentName, { cleanup, onDestroy, registeredAt }>>
     instances: /* @__PURE__ */ new Map(),
-    /**
-     * Register a component instance
-     * @param {HTMLElement} element - The DOM element
-     * @param {string} componentName - Name of the component
-     * @param {Array<Function>} cleanupFns - Functions to call on destroy
-     */
-    register: function(element, componentName, cleanupFns = []) {
-      if (this.instances.has(element)) {
-        const existing = this.instances.get(element);
-        existing.cleanup = existing.cleanup.concat(cleanupFns);
+    isRoot: function(root) {
+      return !!root && (root === document || root.nodeType === 1 || root.nodeType === 9 || root.nodeType === 11);
+    },
+    normalizeRoot: function(root) {
+      return this.isRoot(root) ? root : document;
+    },
+    isInRoot: function(root, element) {
+      const scope = this.normalizeRoot(root);
+      if (!(element instanceof Element)) return false;
+      if (scope === document) {
+        return document.documentElement ? document.documentElement.contains(element) : document.contains(element);
+      }
+      if (scope === element) return true;
+      return typeof scope.contains === "function" && scope.contains(element);
+    },
+    queryAll: function(root, selector) {
+      const scope = this.normalizeRoot(root);
+      const matches = [];
+      if (scope instanceof Element && typeof scope.matches === "function" && scope.matches(selector)) {
+        matches.push(scope);
+      }
+      if (typeof scope.querySelectorAll === "function") {
+        const descendants = scope.querySelectorAll(selector);
+        for (let i = 0; i < descendants.length; i++) {
+          matches.push(descendants[i]);
+        }
+      }
+      return matches;
+    },
+    queryOne: function(root, selector) {
+      const matches = this.queryAll(root, selector);
+      return matches.length ? matches[0] : null;
+    },
+    runInRoot: function(root, fn) {
+      const scope = this.normalizeRoot(root);
+      return fn(scope);
+    },
+    register: function(element, componentName, cleanupFns, options) {
+      if (!(element instanceof Element) || !componentName) return;
+      const optionBag = normalizeOptions(options);
+      const cleanup = normalizeCallbacks(cleanupFns);
+      const onDestroy = normalizeCallbacks(optionBag.onDestroy);
+      const componentEntries = this.instances.get(element) || /* @__PURE__ */ new Map();
+      const existing = componentEntries.get(componentName);
+      if (existing) {
+        existing.cleanup = existing.cleanup.concat(cleanup);
+        existing.onDestroy = existing.onDestroy.concat(onDestroy);
         return;
       }
-      this.instances.set(element, {
+      componentEntries.set(componentName, {
         component: componentName,
-        cleanup: cleanupFns,
+        cleanup,
+        onDestroy,
         registeredAt: Date.now()
       });
+      this.instances.set(element, componentEntries);
     },
-    /**
-     * Unregister a single element and run its cleanup
-     * @param {HTMLElement} element - The element to unregister
-     */
-    unregister: function(element) {
-      const instance = this.instances.get(element);
-      if (!instance) return;
-      instance.cleanup.forEach(function(fn) {
-        try {
-          fn();
-        } catch (e) {
-          console.warn("[Vanduo Lifecycle] Cleanup error:", e);
+    unregister: function(element, componentName) {
+      const componentEntries = this.instances.get(element);
+      if (!componentEntries) return;
+      if (componentName) {
+        const entry = componentEntries.get(componentName);
+        if (!entry) return;
+        componentEntries.delete(componentName);
+        if (!componentEntries.size) {
+          this.instances.delete(element);
         }
-      });
+        entry.cleanup.forEach(function(fn) {
+          callSafely("Cleanup", fn);
+        });
+        entry.onDestroy.forEach(function(fn) {
+          callSafely("Destroy", fn);
+        });
+        return;
+      }
+      const entries = Array.from(componentEntries.values());
       this.instances.delete(element);
+      entries.forEach(function(entry) {
+        entry.cleanup.forEach(function(fn) {
+          callSafely("Cleanup", fn);
+        });
+        entry.onDestroy.forEach(function(fn) {
+          callSafely("Destroy", fn);
+        });
+      });
     },
-    /**
-     * Destroy all instances of a specific component
-     * @param {string} componentName - Optional component name filter
-     */
     destroyAll: function(componentName) {
       const toRemove = [];
-      this.instances.forEach(function(instance, element) {
-        if (!componentName || instance.component === componentName) {
-          toRemove.push(element);
+      this.instances.forEach(function(componentEntries, element) {
+        if (!componentName) {
+          toRemove.push([element, null]);
+          return;
+        }
+        if (componentEntries.has(componentName)) {
+          toRemove.push([element, componentName]);
         }
       });
-      toRemove.forEach(function(element) {
-        Lifecycle.unregister(element);
+      toRemove.forEach(function(entry) {
+        Lifecycle.unregister(entry[0], entry[1] || void 0);
       });
+      return toRemove.length;
     },
-    /**
-     * Destroy all instances within a specific container
-     * Useful for SPAs when navigating between pages
-     * @param {HTMLElement} container - Container element
-     */
-    destroyAllInContainer: function(container) {
+    destroyAllInContainer: function(container, componentName) {
+      const scope = this.normalizeRoot(container);
       const toRemove = [];
-      this.instances.forEach(function(instance, element) {
-        if (container.contains(element)) {
-          toRemove.push(element);
+      this.instances.forEach(function(componentEntries, element) {
+        if (!Lifecycle.isInRoot(scope, element)) return;
+        if (!componentName) {
+          toRemove.push([element, null]);
+          return;
+        }
+        if (componentEntries.has(componentName)) {
+          toRemove.push([element, componentName]);
         }
       });
-      toRemove.forEach(function(element) {
-        Lifecycle.unregister(element);
+      toRemove.forEach(function(entry) {
+        Lifecycle.unregister(entry[0], entry[1] || void 0);
       });
+      return toRemove.length;
     },
-    /**
-     * Get all registered instances (for debugging)
-     * @returns {Array} Array of instance info objects
-     */
     getAll: function() {
       const result = [];
-      this.instances.forEach(function(instance, element) {
-        result.push({
-          element,
-          component: instance.component,
-          registeredAt: instance.registeredAt
+      this.instances.forEach(function(componentEntries, element) {
+        componentEntries.forEach(function(entry) {
+          result.push({
+            element,
+            component: entry.component,
+            registeredAt: entry.registeredAt
+          });
         });
       });
       return result;
     },
-    /**
-     * Check if an element is registered
-     * @param {HTMLElement} element - The element to check
-     * @returns {boolean}
-     */
-    has: function(element) {
-      return this.instances.has(element);
+    has: function(element, componentName) {
+      const componentEntries = this.instances.get(element);
+      if (!componentEntries) return false;
+      return componentName ? componentEntries.has(componentName) : componentEntries.size > 0;
     }
   };
   window.addEventListener("beforeunload", function() {
     Lifecycle.destroyAll();
   });
   window.VanduoLifecycle = Lifecycle;
-  if (typeof window.Vanduo !== "undefined") {
-    window.Vanduo.register("lifecycle", Lifecycle);
-  }
 })();
 
 // js/vanduo.js
 (function() {
   "use strict";
-  const VANDUO_VERSION = true ? "1.3.8" : "0.0.0-dev";
+  const VANDUO_VERSION = true ? "1.4.0" : "0.0.0-dev";
+  const hasOwn = Object.prototype.hasOwnProperty;
   const Vanduo2 = {
     version: VANDUO_VERSION,
     components: {},
+    aliases: {},
+    _decoratedComponents: /* @__PURE__ */ new WeakSet(),
+    resolveComponentName: function(name) {
+      return this.aliases[name] || name;
+    },
+    _isRoot: function(root) {
+      if (typeof window.VanduoLifecycle !== "undefined" && typeof window.VanduoLifecycle.isRoot === "function") {
+        return window.VanduoLifecycle.isRoot(root);
+      }
+      return !!root && (root === document || root.nodeType === 1 || root.nodeType === 9 || root.nodeType === 11);
+    },
+    _normalizeRoot: function(root) {
+      return this._isRoot(root) ? root : document;
+    },
+    _queryAll: function(root, selector) {
+      const scope = this._normalizeRoot(root);
+      const matches = [];
+      if (scope instanceof Element && typeof scope.matches === "function" && scope.matches(selector)) {
+        matches.push(scope);
+      }
+      if (typeof scope.querySelectorAll === "function") {
+        const descendants = scope.querySelectorAll(selector);
+        for (let i = 0; i < descendants.length; i++) {
+          matches.push(descendants[i]);
+        }
+      }
+      return matches;
+    },
+    queryAll: function(root, selector) {
+      if (typeof selector === "undefined") {
+        selector = root;
+        root = document;
+      }
+      return this._queryAll(root, selector);
+    },
+    queryOne: function(root, selector) {
+      const matches = this.queryAll(root, selector);
+      return matches.length ? matches[0] : null;
+    },
+    _isLifecycleManagedComponent: function(component) {
+      if (!component || typeof component !== "object") return false;
+      for (const key in component) {
+        if (hasOwn.call(component, key) && component[key] instanceof Map) {
+          return true;
+        }
+      }
+      return false;
+    },
+    _syncComponentLifecycle: function(name, component, root) {
+      const lifecycle = window.VanduoLifecycle;
+      if (!lifecycle || !this._isLifecycleManagedComponent(component)) return;
+      const componentName = this.resolveComponentName(name);
+      const scope = this._normalizeRoot(root);
+      for (const key in component) {
+        if (!hasOwn.call(component, key) || !(component[key] instanceof Map)) {
+          continue;
+        }
+        component[key].forEach(function(instance, element) {
+          if (!(element instanceof Element) || !lifecycle.isInRoot(scope, element) || lifecycle.has(element, componentName)) {
+            return;
+          }
+          if (typeof component.destroy === "function") {
+            lifecycle.register(element, componentName, [], function() {
+              component.destroy(element);
+            });
+            return;
+          }
+          const cleanup = instance && Array.isArray(instance.cleanup) ? instance.cleanup : [];
+          lifecycle.register(element, componentName, cleanup, function() {
+            component[key].delete(element);
+          });
+        });
+      }
+    },
+    _decorateComponent: function(name, component) {
+      const framework = this;
+      const lifecycle = window.VanduoLifecycle;
+      if (!component || typeof component !== "object" || this._decoratedComponents.has(component)) {
+        return;
+      }
+      const originalInit = typeof component.init === "function" ? component.init : null;
+      if (originalInit) {
+        component.init = function(...args) {
+          const scopedRoot = framework._isRoot(args[0]) ? args[0] : null;
+          const result = originalInit.apply(this, args);
+          if (window.Vanduo) {
+            const syncRoot = scopedRoot || document;
+            window.Vanduo._syncComponentLifecycle(name, this, syncRoot);
+          }
+          return result;
+        };
+      }
+      const originalDestroyAll = typeof component.destroyAll === "function" ? component.destroyAll : null;
+      if (originalDestroyAll) {
+        component.destroyAll = function(...args) {
+          const scopedRoot = framework._isRoot(args[0]) ? args[0] : null;
+          const componentName = window.Vanduo ? window.Vanduo.resolveComponentName(name) : name;
+          if (lifecycle && window.Vanduo && window.Vanduo._isLifecycleManagedComponent(this)) {
+            if (scopedRoot && scopedRoot !== document) {
+              lifecycle.destroyAllInContainer(scopedRoot, componentName);
+              if (this.__vanduoScopedDestroyAll === true) {
+                return originalDestroyAll.apply(this, args);
+              }
+              return;
+            }
+            lifecycle.destroyAll(componentName);
+          }
+          return originalDestroyAll.apply(this, args);
+        };
+      }
+      this._decoratedComponents.add(component);
+    },
     /**
      * Initialize framework
      * Call this after DOM is ready and all components are loaded
      */
-    init: function() {
+    init: function(root) {
+      const scope = this._normalizeRoot(root);
+      if (scope !== document) {
+        this.initComponents(scope);
+        return;
+      }
       if (typeof ready !== "undefined") {
         ready(() => {
-          this.initComponents();
+          this.initComponents(document);
         });
-      } else {
-        if (document.readyState === "loading") {
-          document.addEventListener("DOMContentLoaded", () => {
-            this.initComponents();
-          });
-        } else {
-          this.initComponents();
-        }
+        return;
       }
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", () => {
+          this.initComponents(document);
+        });
+        return;
+      }
+      this.initComponents(document);
     },
     /**
      * Initialize all components
      */
-    initComponents: function() {
+    initComponents: function(root) {
+      const scope = this._normalizeRoot(root);
       Object.keys(this.components).forEach((name) => {
         const component = this.components[name];
         if (component.init && typeof component.init === "function") {
           try {
-            component.init();
+            component.init(scope);
           } catch (e) {
             console.warn('[Vanduo] Failed to initialize component "' + name + '":', e);
           }
         }
       });
-      console.log("Vanduo Framework v" + this.version + " initialized");
     },
     /**
      * Register a component
      * @param {string} name - Component name
      * @param {Object} component - Component object with init method
      */
-    register: function(name, component) {
+    register: function(name, component, options) {
+      const opts = options || {};
+      this._decorateComponent(name, component);
       this.components[name] = component;
+      if (Array.isArray(opts.aliases)) {
+        opts.aliases.forEach((alias) => {
+          this.aliases[alias] = name;
+        });
+      }
+    },
+    registerAlias: function(alias, name) {
+      const canonicalName = this.resolveComponentName(name);
+      if (this.components[canonicalName]) {
+        this.aliases[alias] = canonicalName;
+      }
     },
     /**
      * Re-initialize a component (useful after dynamic DOM changes)
      * @param {string} name - Component name
      */
-    reinit: function(name) {
-      const component = this.components[name];
+    reinit: function(name, root) {
+      const scope = this._normalizeRoot(root);
+      const componentName = this.resolveComponentName(name);
+      const component = this.components[componentName];
       if (component && component.init && typeof component.init === "function") {
         try {
-          component.init();
+          if (component.destroyAll && typeof component.destroyAll === "function") {
+            component.destroyAll(scope);
+          }
+          component.init(scope);
         } catch (e) {
-          console.warn('[Vanduo] Failed to reinitialize component "' + name + '":', e);
+          console.warn('[Vanduo] Failed to reinitialize component "' + componentName + '":', e);
         }
       }
     },
     /**
-     * Destroy all component instances and clean up event listeners
-     * Uses lifecycle manager for memory leak prevention
+     * Destroy component instances within the provided root.
      */
-    destroyAll: function() {
+    destroy: function(root) {
+      const scope = this._normalizeRoot(root);
       const names = Object.keys(this.components);
       for (let i = 0; i < names.length; i++) {
         const component = this.components[names[i]];
         if (component && component.destroyAll && typeof component.destroyAll === "function") {
           try {
-            component.destroyAll();
+            component.destroyAll(scope);
           } catch (e) {
             console.warn('[Vanduo] Failed to destroy component "' + names[i] + '":', e);
           }
         }
       }
-      if (typeof window.VanduoLifecycle !== "undefined") {
-        window.VanduoLifecycle.destroyAll();
-      }
+    },
+    /**
+     * Destroy all component instances and clean up event listeners.
+     */
+    destroyAll: function() {
+      this.destroy(document);
     },
     /**
      * Get component instance
@@ -194,7 +402,8 @@
      * @returns {Object|null}
      */
     getComponent: function(name) {
-      return this.components[name] || null;
+      const componentName = this.resolveComponentName(name);
+      return this.components[componentName] || null;
     }
   };
   window.Vanduo = Vanduo2;
@@ -205,6 +414,26 @@
   "use strict";
   const CodeSnippet = {
     _snippetIdCounter: 0,
+    resolveRoot: function(root) {
+      if (root && (root.nodeType === 1 || root.nodeType === 9 || root.nodeType === 11)) {
+        return root;
+      }
+      return document;
+    },
+    queryWithin: function(root, selector) {
+      const scope = this.resolveRoot(root);
+      const matches = [];
+      if (scope instanceof Element && typeof scope.matches === "function" && scope.matches(selector)) {
+        matches.push(scope);
+      }
+      if (typeof scope.querySelectorAll === "function") {
+        const descendants = scope.querySelectorAll(selector);
+        for (let i = 0; i < descendants.length; i++) {
+          matches.push(descendants[i]);
+        }
+      }
+      return matches;
+    },
     getSnippetInstanceId: function(snippet) {
       if (snippet.dataset.codeSnippetId) {
         return snippet.dataset.codeSnippetId;
@@ -229,8 +458,8 @@
     /**
      * Initialize all code snippet components
      */
-    init: function() {
-      const snippets = document.querySelectorAll(".vd-code-snippet");
+    init: function(root) {
+      const snippets = this.queryWithin(root, ".vd-code-snippet");
       snippets.forEach((snippet) => {
         if (!snippet.dataset.initialized) {
           this.initSnippet(snippet);
@@ -262,6 +491,10 @@
       extractPanes.forEach((pane) => {
         this.extractHtml(pane);
       });
+      const panesToHighlight = snippet.querySelectorAll(".vd-code-snippet-pane:not([data-extract])");
+      panesToHighlight.forEach((pane) => {
+        this.applyPaneHighlighting(pane);
+      });
       const lineNumberPanes = snippet.querySelectorAll(".has-line-numbers");
       lineNumberPanes.forEach((pane) => {
         this.addLineNumbers(pane);
@@ -497,6 +730,7 @@
       codeEl.innerHTML = html;
       pane.replaceChildren(codeEl);
       pane.dataset.extracted = "true";
+      pane.dataset.highlighted = "true";
     },
     /**
      * Format HTML with proper indentation
@@ -538,6 +772,77 @@
       div.textContent = html;
       return div.innerHTML;
     },
+    needsHighlighting: function(pane, codeEl) {
+      if (!codeEl) return false;
+      if (pane.dataset.highlighted === "true") return false;
+      if (codeEl.querySelector('[class^="code-"], [class*=" code-"]')) return false;
+      return true;
+    },
+    getHighlightMode: function(lang) {
+      const normalized = String(lang || "").trim().toLowerCase();
+      if ([
+        "html",
+        "xml",
+        "svg",
+        "vue",
+        "svelte",
+        "astro"
+      ].includes(normalized)) {
+        return "html";
+      }
+      if ([
+        "css",
+        "scss",
+        "sass",
+        "less"
+      ].includes(normalized)) {
+        return "css";
+      }
+      if ([
+        "js",
+        "mjs",
+        "cjs",
+        "ts",
+        "jsx",
+        "tsx",
+        "json",
+        "bash",
+        "sh"
+      ].includes(normalized)) {
+        return "js";
+      }
+      return "plain";
+    },
+    highlightCodeByLang: function(rawCode, lang) {
+      const escaped = this.escapeHtml(rawCode);
+      const mode = this.getHighlightMode(lang);
+      if (mode === "html") {
+        return this.highlightHtml(escaped);
+      }
+      if (mode === "css") {
+        return this.highlightCss(escaped);
+      }
+      if (mode === "js") {
+        return this.highlightJs(escaped);
+      }
+      return escaped;
+    },
+    applyPaneHighlighting: function(pane) {
+      if (!pane) return;
+      const codeEl = pane.querySelector("code") || pane;
+      if (!this.needsHighlighting(pane, codeEl)) {
+        pane.dataset.highlighted = "true";
+        return;
+      }
+      const rawCode = codeEl.textContent || "";
+      const highlighted = this.highlightCodeByLang(rawCode, pane.dataset.lang);
+      const nextCodeEl = codeEl.tagName === "CODE" ? codeEl : document.createElement("code");
+      nextCodeEl.innerHTML = highlighted;
+      if (nextCodeEl !== codeEl) {
+        pane.replaceChildren(nextCodeEl);
+      }
+      pane.dataset.highlighted = "true";
+    },
     /**
      * Apply syntax highlighting to HTML
      * @param {string} html - Escaped HTML string
@@ -545,7 +850,9 @@
      */
     highlightHtml: function(html) {
       html = html.replace(/(&lt;\/?)([\w-]+)/g, '$1<span class="code-tag">$2</span>');
+      html = html.replace(/([\w-]+)(=)(["'])/g, '<span class="code-attr">$1</span>$2$3');
       html = html.replace(/([\w-]+)(=)(&quot;|&#39;)/g, '<span class="code-attr">$1</span>$2$3');
+      html = html.replace(/(["'])([^"']*)(["'])/g, '$1<span class="code-string">$2</span>$3');
       html = html.replace(/(&quot;|&#39;)([^&]*)(&quot;|&#39;)/g, '$1<span class="code-string">$2</span>$3');
       html = html.replace(/(&lt;!--)(.*?)(--&gt;)/g, '<span class="code-comment">$1$2$3</span>');
       return html;
@@ -670,9 +977,12 @@
     /**
      * Destroy all code snippet instances
      */
-    destroyAll: function() {
-      const snippets = document.querySelectorAll('.vd-code-snippet[data-initialized="true"]');
-      snippets.forEach((snippet) => this.destroy(snippet));
+    destroyAll: function(root) {
+      const scope = this.resolveRoot(root);
+      const snippets = this.queryWithin(scope, '.vd-code-snippet[data-initialized="true"]');
+      snippets.forEach((snippet) => {
+        this.destroy(snippet);
+      });
     }
   };
   if (typeof window.Vanduo !== "undefined") {
@@ -690,8 +1000,8 @@
     /**
      * Initialize collapsible components
      */
-    init: function() {
-      const collapsibles = document.querySelectorAll(".vd-collapsible, .accordion");
+    init: function(root) {
+      const collapsibles = window.Vanduo.queryAll(root, ".vd-collapsible, .accordion");
       collapsibles.forEach((container) => {
         if (this.instances.has(container)) {
           return;
@@ -868,8 +1178,8 @@
     /**
      * Initialize dropdown components
      */
-    init: function() {
-      const dropdowns = document.querySelectorAll(".vd-dropdown");
+    init: function(root) {
+      const dropdowns = window.Vanduo.queryAll(root, ".vd-dropdown");
       dropdowns.forEach((dropdown) => {
         if (this.instances.has(dropdown)) {
           return;
@@ -1187,31 +1497,36 @@
         description: "Friendly, rounded sans-serif"
       }
     },
-    init: function() {
+    getToggles: function(root) {
+      if (window.Vanduo && typeof window.Vanduo.queryAll === "function") {
+        return window.Vanduo.queryAll(root, '[data-toggle="font"]');
+      }
+      return Array.from(document.querySelectorAll('[data-toggle="font"]'));
+    },
+    init: function(root) {
       this.state = {
         preference: this.getPreference()
       };
       if (!this.fonts[this.state.preference]) {
-        this.state.preference = "lato";
+        this.state.preference = "ubuntu";
         this.setStorageValue(this.STORAGE_KEY, this.state.preference);
       }
       if (this.isInitialized) {
         this.applyFont();
-        this.renderUI();
-        this.updateUI();
+        this.renderUI(root);
+        this.updateUI(root);
         return;
       }
       this.isInitialized = true;
       this.applyFont();
-      this.renderUI();
-      console.log("Vanduo Font Switcher initialized");
+      this.renderUI(root);
     },
     /**
      * Get saved font preference from localStorage
-     * @returns {string} Font key or 'lato' (default)
+     * @returns {string} Font key or 'ubuntu' (default)
      */
     getPreference: function() {
-      return this.getStorageValue(this.STORAGE_KEY, "lato");
+      return this.getStorageValue(this.STORAGE_KEY, "ubuntu");
     },
     /**
      * Set font preference and apply it
@@ -1246,8 +1561,8 @@
     /**
      * Initialize UI elements with data-toggle="font"
      */
-    renderUI: function() {
-      const toggles = document.querySelectorAll('[data-toggle="font"]');
+    renderUI: function(root) {
+      const toggles = this.getToggles(root);
       toggles.forEach((toggle) => {
         if (toggle.getAttribute("data-font-initialized") === "true") {
           if (toggle.tagName === "SELECT") {
@@ -1278,8 +1593,8 @@
     /**
      * Update all UI elements to reflect current state
      */
-    updateUI: function() {
-      const toggles = document.querySelectorAll('[data-toggle="font"]');
+    updateUI: function(root) {
+      const toggles = this.getToggles(root);
       toggles.forEach((toggle) => {
         if (toggle.tagName === "SELECT") {
           toggle.value = this.state.preference;
@@ -1306,8 +1621,10 @@
     getFontData: function(fontKey) {
       return this.fonts[fontKey] || null;
     },
-    destroyAll: function() {
-      const toggles = document.querySelectorAll('[data-toggle="font"][data-font-initialized="true"]');
+    destroyAll: function(root) {
+      const toggles = this.getToggles(root || document).filter(function(toggle) {
+        return toggle.getAttribute("data-font-initialized") === "true";
+      });
       toggles.forEach((toggle) => {
         if (toggle._fontToggleHandler) {
           const eventName = toggle.tagName === "SELECT" ? "change" : "click";
@@ -1316,7 +1633,9 @@
         }
         toggle.removeAttribute("data-font-initialized");
       });
-      this.isInitialized = false;
+      if (!root || root === document) {
+        this.isInitialized = false;
+      }
     },
     getStorageValue: function(key, fallback) {
       if (typeof window.safeStorageGet === "function") {
@@ -1359,18 +1678,19 @@
   })();
   const GridLayout = {
     instances: /* @__PURE__ */ new Map(),
+    __vanduoScopedDestroyAll: true,
     /**
      * Initialize all grid layout containers
      */
-    init: function() {
-      const containers = document.querySelectorAll("[data-layout-mode]");
+    init: function(root) {
+      const containers = window.Vanduo.queryAll(root, "[data-layout-mode]");
       containers.forEach(function(container) {
         if (this.instances.has(container)) {
           return;
         }
         this.initContainer(container);
       }.bind(this));
-      this.initToggleButtons();
+      this.initToggleButtons(root);
     },
     /**
      * Initialize a single grid container
@@ -1390,8 +1710,8 @@
     /**
      * Initialize toggle buttons that target grid containers
      */
-    initToggleButtons: function() {
-      const toggleButtons = document.querySelectorAll("[data-grid-toggle]");
+    initToggleButtons: function(root) {
+      const toggleButtons = window.Vanduo && typeof window.Vanduo.queryAll === "function" ? window.Vanduo.queryAll(root, "[data-grid-toggle]") : document.querySelectorAll("[data-grid-toggle]");
       toggleButtons.forEach(function(button) {
         if (button.getAttribute("data-grid-initialized") === "true") {
           return;
@@ -1559,11 +1879,14 @@
     /**
      * Destroy all grid layout instances and clean up toggle buttons
      */
-    destroyAll: function() {
+    destroyAll: function(root) {
+      const scope = window.Vanduo && typeof window.Vanduo._normalizeRoot === "function" ? window.Vanduo._normalizeRoot(root) : root || document;
       this.instances.forEach(function(instance, container) {
-        this.destroy(container);
+        if (scope === document || scope === container || typeof scope.contains === "function" && scope.contains(container)) {
+          this.destroy(container);
+        }
       }.bind(this));
-      const toggleButtons = document.querySelectorAll('[data-grid-initialized="true"]');
+      const toggleButtons = window.Vanduo && typeof window.Vanduo.queryAll === "function" ? window.Vanduo.queryAll(scope, '[data-grid-toggle][data-grid-initialized="true"]') : document.querySelectorAll('[data-grid-initialized="true"]');
       toggleButtons.forEach(function(button) {
         if (button._gridCleanup) {
           button._gridCleanup();
@@ -1593,12 +1916,18 @@
     isOpen: false,
     // Store cleanup functions for event listeners
     _cleanupFunctions: [],
+    getTriggers: function(root) {
+      if (window.Vanduo && typeof window.Vanduo.queryAll === "function") {
+        return window.Vanduo.queryAll(root, "[data-image-box]");
+      }
+      return Array.from(document.querySelectorAll("[data-image-box]"));
+    },
     /**
      * Initialize Image Box component
      */
-    init: function() {
+    init: function(root) {
       this.createBackdrop();
-      this.bindTriggers();
+      this.bindTriggers(root);
     },
     /**
      * Create backdrop elements
@@ -1682,9 +2011,9 @@
     /**
      * Bind triggers to all images with data-image-box attribute
      */
-    bindTriggers: function() {
+    bindTriggers: function(root) {
       const self = this;
-      const triggers = document.querySelectorAll("[data-image-box]");
+      const triggers = this.getTriggers(root);
       triggers.forEach(function(trigger) {
         if (trigger.dataset.imageBoxInitialized) return;
         trigger.dataset.imageBoxInitialized = "true";
@@ -1701,6 +2030,8 @@
             trigger.classList.remove("is-broken");
           };
           trigger.addEventListener("load", loadHandler);
+          trigger._imageBoxErrorHandler = errorHandler;
+          trigger._imageBoxLoadHandler = loadHandler;
         }
         const clickHandler = function(e) {
           e.preventDefault();
@@ -1719,12 +2050,24 @@
             }
           };
           trigger.addEventListener("keydown", keyHandler);
-          const originalCleanup = trigger._imageBoxCleanup;
+          const originalCleanup2 = trigger._imageBoxCleanup;
           trigger._imageBoxCleanup = () => {
-            originalCleanup();
+            originalCleanup2();
             trigger.removeEventListener("keydown", keyHandler);
           };
         }
+        const originalCleanup = trigger._imageBoxCleanup;
+        trigger._imageBoxCleanup = () => {
+          originalCleanup();
+          if (trigger._imageBoxErrorHandler) {
+            trigger.removeEventListener("error", trigger._imageBoxErrorHandler);
+            delete trigger._imageBoxErrorHandler;
+          }
+          if (trigger._imageBoxLoadHandler) {
+            trigger.removeEventListener("load", trigger._imageBoxLoadHandler);
+            delete trigger._imageBoxLoadHandler;
+          }
+        };
       });
     },
     /**
@@ -1795,13 +2138,25 @@
     /**
      * Reinitialize - useful after dynamic DOM changes
      */
-    reinit: function() {
-      this.bindTriggers();
+    reinit: function(root) {
+      this.bindTriggers(root);
     },
     /**
      * Destroy component and clean up
      */
-    destroy: function() {
+    destroy: function(root) {
+      if (root && root !== document) {
+        const triggersInRoot = this.getTriggers(root);
+        triggersInRoot.forEach((trigger) => {
+          trigger.classList.remove("vd-image-box-trigger");
+          if (trigger._imageBoxCleanup) {
+            trigger._imageBoxCleanup();
+            delete trigger._imageBoxCleanup;
+          }
+          delete trigger.dataset.imageBoxInitialized;
+        });
+        return;
+      }
       if (this.isOpen) {
         this.close();
       }
@@ -1810,7 +2165,7 @@
       }
       this._cleanupFunctions.forEach((fn) => fn());
       this._cleanupFunctions = [];
-      const triggers = document.querySelectorAll("[data-image-box-initialized]");
+      const triggers = window.Vanduo && typeof window.Vanduo.queryAll === "function" ? window.Vanduo.queryAll(root, "[data-image-box-initialized]") : document.querySelectorAll("[data-image-box-initialized]");
       triggers.forEach((trigger) => {
         trigger.classList.remove("vd-image-box-trigger");
         if (trigger._imageBoxCleanup) {
@@ -1827,8 +2182,8 @@
       this.currentTrigger = null;
       this.isOpen = false;
     },
-    destroyAll: function() {
-      this.destroy();
+    destroyAll: function(root) {
+      this.destroy(root);
     }
   };
   if (typeof window.Vanduo !== "undefined") {
@@ -1844,6 +2199,7 @@
     modals: /* @__PURE__ */ new Map(),
     openModals: [],
     zIndexCounter: 1050,
+    __vanduoScopedDestroyAll: true,
     // Store trigger cleanup functions
     _triggerCleanups: [],
     // Shared ESC key handler (installed once)
@@ -1899,15 +2255,15 @@
     /**
      * Initialize modals
      */
-    init: function() {
-      const modals = document.querySelectorAll(".vd-modal");
+    init: function(root) {
+      const modals = window.Vanduo.queryAll(root, ".vd-modal");
       modals.forEach((modal) => {
         if (this.modals.has(modal)) {
           return;
         }
         this.initModal(modal);
       });
-      const triggers = document.querySelectorAll("[data-modal]");
+      const triggers = window.Vanduo && typeof window.Vanduo.queryAll === "function" ? window.Vanduo.queryAll(root, "[data-modal]") : document.querySelectorAll("[data-modal]");
       triggers.forEach((trigger) => {
         if (trigger.dataset.modalTriggerInitialized) return;
         trigger.dataset.modalTriggerInitialized = "true";
@@ -1920,7 +2276,7 @@
           }
         };
         trigger.addEventListener("click", triggerClickHandler);
-        this._triggerCleanups.push(() => trigger.removeEventListener("click", triggerClickHandler));
+        trigger._modalTriggerCleanup = () => trigger.removeEventListener("click", triggerClickHandler);
       });
     },
     /**
@@ -2158,13 +2514,22 @@
     /**
      * Destroy all modal instances
      */
-    destroyAll: function() {
+    destroyAll: function(root) {
+      const scope = window.Vanduo && typeof window.Vanduo._normalizeRoot === "function" ? window.Vanduo._normalizeRoot(root) : root || document;
       this.modals.forEach((data, modal) => {
-        this.destroy(modal);
+        if (scope === document || scope === modal || typeof scope.contains === "function" && scope.contains(modal)) {
+          this.destroy(modal);
+        }
       });
-      this._triggerCleanups.forEach((fn) => fn());
-      this._triggerCleanups = [];
-      if (this._sharedEscHandler) {
+      const triggers = window.Vanduo && typeof window.Vanduo.queryAll === "function" ? window.Vanduo.queryAll(scope, "[data-modal][data-modal-trigger-initialized]") : document.querySelectorAll("[data-modal][data-modal-trigger-initialized]");
+      triggers.forEach((trigger) => {
+        if (trigger._modalTriggerCleanup) {
+          trigger._modalTriggerCleanup();
+          delete trigger._modalTriggerCleanup;
+        }
+        delete trigger.dataset.modalTriggerInitialized;
+      });
+      if (scope === document && this._sharedEscHandler) {
         document.removeEventListener("keydown", this._sharedEscHandler);
         this._sharedEscHandler = null;
       }
@@ -2195,8 +2560,8 @@
     /**
      * Initialize navbar component
      */
-    init: function() {
-      const navbars = document.querySelectorAll(".vd-navbar");
+    init: function(root) {
+      const navbars = window.Vanduo.queryAll(root, ".vd-navbar");
       navbars.forEach((navbar) => {
         if (this.instances.has(navbar)) {
           return;
@@ -2417,8 +2782,8 @@
     /**
      * Initialize pagination components
      */
-    init: function() {
-      const paginations = document.querySelectorAll(".vd-pagination[data-pagination]");
+    init: function(root) {
+      const paginations = window.Vanduo.queryAll(root, ".vd-pagination[data-pagination]");
       paginations.forEach((pagination) => {
         if (this.instances.has(pagination)) {
           return;
@@ -2641,21 +3006,21 @@
     /**
      * Initialize parallax components
      */
-    init: function() {
-      if (this.isInitialized) {
-        this.refresh();
-        return;
-      }
-      this.isInitialized = true;
+    init: function(root) {
       if (this.reducedMotion) {
         return;
       }
-      const parallaxElements = document.querySelectorAll(".vd-parallax");
+      const parallaxElements = window.Vanduo.queryAll(root, ".vd-parallax");
       parallaxElements.forEach((element) => {
         if (!element.dataset.parallaxInitialized) {
           this.initParallax(element);
         }
       });
+      if (this.isInitialized) {
+        this.refresh();
+        return;
+      }
+      this.isInitialized = true;
       this.handleScroll();
       this._onScroll = () => {
         this.handleScroll();
@@ -2798,11 +3163,17 @@
 (function() {
   "use strict";
   const Preloader = {
+    getProgressBars: function(root) {
+      if (window.Vanduo && typeof window.Vanduo.queryAll === "function") {
+        return window.Vanduo.queryAll(root, ".vd-progress-bar[data-progress], .progress-bar[data-progress]");
+      }
+      return Array.from(document.querySelectorAll(".vd-progress-bar[data-progress], .progress-bar[data-progress]"));
+    },
     /**
      * Initialize preloader components
      */
-    init: function() {
-      const progressBars = document.querySelectorAll(".vd-progress-bar[data-progress], .progress-bar[data-progress]");
+    init: function(root) {
+      const progressBars = this.getProgressBars(root);
       progressBars.forEach((bar) => {
         if (!bar.dataset.progressInitialized) {
           this.initProgressBar(bar);
@@ -2922,8 +3293,10 @@
     /**
      * Destroy all progress bar instances
      */
-    destroyAll: function() {
-      const progressBars = document.querySelectorAll('.vd-progress-bar[data-progress-initialized="true"], .progress-bar[data-progress-initialized="true"]');
+    destroyAll: function(root) {
+      const progressBars = this.getProgressBars(root || document).filter(function(bar) {
+        return bar.dataset.progressInitialized === "true";
+      });
       progressBars.forEach((bar) => {
         delete bar.dataset.progressInitialized;
       });
@@ -2944,8 +3317,8 @@
     /**
      * Initialize select components
      */
-    init: function() {
-      const selects = document.querySelectorAll("select.vd-custom-select-input, select[data-custom-select]");
+    init: function(root) {
+      const selects = window.Vanduo.queryAll(root, "select.vd-custom-select-input, select[data-custom-select]");
       selects.forEach((select) => {
         if (this.instances.has(select)) {
           return;
@@ -3306,8 +3679,10 @@
     breakpoint: 992,
     // Desktop breakpoint
     restoreDelayMs: 450,
+    __vanduoScopedDestroyAll: true,
     // Global cleanup functions (toggles, resize)
     _globalCleanups: [],
+    _resizeCleanup: null,
     isFixedVariant: function(sidenav) {
       return sidenav.classList.contains("vd-sidenav-fixed") || sidenav.classList.contains("sidenav-fixed");
     },
@@ -3408,15 +3783,15 @@
     /**
      * Initialize sidenav components
      */
-    init: function() {
-      const sidenavs = document.querySelectorAll(".vd-sidenav, .vd-offcanvas");
+    init: function(root) {
+      const sidenavs = window.Vanduo.queryAll(root, ".vd-sidenav, .vd-offcanvas");
       sidenavs.forEach((sidenav) => {
         if (this.sidenavs.has(sidenav)) {
           return;
         }
         this.initSidenav(sidenav);
       });
-      const toggles = document.querySelectorAll("[data-sidenav-toggle]");
+      const toggles = window.Vanduo && typeof window.Vanduo.queryAll === "function" ? window.Vanduo.queryAll(root, "[data-sidenav-toggle]") : document.querySelectorAll("[data-sidenav-toggle]");
       toggles.forEach((toggle) => {
         if (toggle.dataset.sidenavToggleInitialized) return;
         toggle.dataset.sidenavToggleInitialized = "true";
@@ -3429,14 +3804,16 @@
           }
         };
         toggle.addEventListener("click", toggleClickHandler);
-        this._globalCleanups.push(() => toggle.removeEventListener("click", toggleClickHandler));
+        toggle._sidenavToggleCleanup = () => toggle.removeEventListener("click", toggleClickHandler);
       });
       this.handleResize();
-      const resizeHandler = () => {
-        this.handleResize();
-      };
-      window.addEventListener("resize", resizeHandler);
-      this._globalCleanups.push(() => window.removeEventListener("resize", resizeHandler));
+      if (!this._resizeCleanup) {
+        const resizeHandler = () => {
+          this.handleResize();
+        };
+        window.addEventListener("resize", resizeHandler);
+        this._resizeCleanup = () => window.removeEventListener("resize", resizeHandler);
+      }
     },
     /**
      * Initialize a single sidenav
@@ -3609,12 +3986,29 @@
     /**
      * Destroy all sidenav instances
      */
-    destroyAll: function() {
+    destroyAll: function(root) {
+      const scope = window.Vanduo && typeof window.Vanduo._normalizeRoot === "function" ? window.Vanduo._normalizeRoot(root) : root || document;
       this.sidenavs.forEach((data, sidenav) => {
-        this.destroy(sidenav);
+        if (scope === document || scope === sidenav || typeof scope.contains === "function" && scope.contains(sidenav)) {
+          this.destroy(sidenav);
+        }
       });
-      this._globalCleanups.forEach((fn) => fn());
-      this._globalCleanups = [];
+      const toggles = window.Vanduo && typeof window.Vanduo.queryAll === "function" ? window.Vanduo.queryAll(scope, "[data-sidenav-toggle][data-sidenav-toggle-initialized]") : document.querySelectorAll("[data-sidenav-toggle][data-sidenav-toggle-initialized]");
+      toggles.forEach((toggle) => {
+        if (toggle._sidenavToggleCleanup) {
+          toggle._sidenavToggleCleanup();
+          delete toggle._sidenavToggleCleanup;
+        }
+        delete toggle.dataset.sidenavToggleInitialized;
+      });
+      if (scope === document) {
+        if (this._resizeCleanup) {
+          this._resizeCleanup();
+          this._resizeCleanup = null;
+        }
+        this._globalCleanups.forEach((fn) => fn());
+        this._globalCleanups = [];
+      }
     }
   };
   if (typeof window.Vanduo !== "undefined") {
@@ -3632,8 +4026,8 @@
     /**
      * Initialize all tab components
      */
-    init: function() {
-      const tabContainers = document.querySelectorAll(".vd-tabs, [data-tabs]");
+    init: function(root) {
+      const tabContainers = window.Vanduo.queryAll(root, ".vd-tabs, [data-tabs]");
       tabContainers.forEach((container) => {
         if (this.instances.has(container)) {
           return;
@@ -3879,9 +4273,9 @@
     DEFAULTS: {
       PRIMARY_LIGHT: "black",
       PRIMARY_DARK: "amber",
-      NEUTRAL: "neutral",
+      NEUTRAL: "charcoal",
       RADIUS: "0.5",
-      FONT: "lato",
+      FONT: "ubuntu",
       THEME: "system"
     },
     // Primary color definitions (Open Color based)
@@ -3907,6 +4301,7 @@
     },
     // Neutral color definitions
     NEUTRAL_COLORS: {
+      "charcoal": { name: "Charcoal", color: "#0d1117" },
       "slate": { name: "Slate", color: "#64748b" },
       "gray": { name: "Gray", color: "#6b7280" },
       "zinc": { name: "Zinc", color: "#71717a" },
@@ -3936,21 +4331,65 @@
     },
     isInitialized: false,
     _cleanup: [],
+    _ownsDynamicPanel: false,
     // DOM references
     elements: {
       customizer: null,
       trigger: null,
+      activeTrigger: null,
       triggers: [],
       panel: null,
       overlay: null
     },
+    isRoot: function(root) {
+      return !!root && (root === document || root.nodeType === 1 || root.nodeType === 9 || root.nodeType === 11);
+    },
+    normalizeRoot: function(root) {
+      return this.isRoot(root) ? root : document;
+    },
+    queryAll: function(root, selector) {
+      const scope = this.normalizeRoot(root);
+      if (typeof window.VanduoLifecycle !== "undefined" && typeof window.VanduoLifecycle.queryAll === "function") {
+        return window.VanduoLifecycle.queryAll(scope, selector);
+      }
+      const matches = [];
+      if (scope instanceof Element && typeof scope.matches === "function" && scope.matches(selector)) {
+        matches.push(scope);
+      }
+      if (typeof scope.querySelectorAll === "function") {
+        const descendants = scope.querySelectorAll(selector);
+        for (let i = 0; i < descendants.length; i++) {
+          matches.push(descendants[i]);
+        }
+      }
+      return matches;
+    },
+    queryOne: function(root, selector) {
+      const matches = this.queryAll(root, selector);
+      return matches.length ? matches[0] : null;
+    },
+    getTriggers: function(root) {
+      return this.queryAll(root, "[data-theme-customizer-trigger]");
+    },
+    pruneTriggers: function() {
+      this.elements.triggers = this.elements.triggers.filter(function(trigger) {
+        return trigger && trigger.isConnected;
+      });
+      if (this.elements.trigger && !this.elements.trigger.isConnected) {
+        this.elements.trigger = null;
+      }
+      if (this.elements.activeTrigger && !this.elements.activeTrigger.isConnected) {
+        this.elements.activeTrigger = null;
+      }
+    },
     /**
      * Initialize the Theme Customizer
      */
-    init: function() {
+    init: function(root) {
+      const scope = this.normalizeRoot(root);
       if (this.isInitialized) {
-        this.bindExistingElements();
-        this.bindTriggerEvents();
+        this.bindExistingElements(scope);
+        this.bindTriggerEvents(scope);
         this.bindPanelEvents();
         this.updateUI();
         return;
@@ -3959,9 +4398,8 @@
       this._cleanup = [];
       this.loadPreferences();
       this.applyAllPreferences();
-      this.bindExistingElements();
-      this.bindEvents();
-      console.log("Vanduo Theme Customizer initialized");
+      this.bindExistingElements(scope);
+      this.bindEvents(scope);
     },
     addListener: function(target, event, handler, options) {
       if (!target) return;
@@ -4122,18 +4560,26 @@
     /**
      * Bind to existing DOM elements or create them dynamically
      */
-    bindExistingElements: function() {
-      this.elements.customizer = document.querySelector(".vd-theme-customizer");
-      this.elements.triggers = Array.from(document.querySelectorAll("[data-theme-customizer-trigger]"));
+    bindExistingElements: function(root) {
+      const scope = this.normalizeRoot(root);
+      this.pruneTriggers();
+      const scopedTriggers = this.getTriggers(scope);
+      scopedTriggers.forEach((trigger) => {
+        if (!this.elements.triggers.includes(trigger)) {
+          this.elements.triggers.push(trigger);
+        }
+      });
       if (!this.elements.trigger && this.elements.triggers.length) {
         this.elements.trigger = this.elements.triggers[0];
       }
-      if (this.elements.customizer) {
+      const existingCustomizer = this.queryOne(scope, ".vd-theme-customizer") || (this.elements.customizer && typeof this.elements.customizer.contains === "function" ? this.elements.customizer : null) || document.querySelector(".vd-theme-customizer");
+      if (existingCustomizer instanceof Element) {
+        this.elements.customizer = existingCustomizer;
         this.elements.trigger = this.elements.customizer.querySelector(".vd-theme-customizer-trigger") || this.elements.trigger;
         this.elements.panel = this.elements.customizer.querySelector(".vd-theme-customizer-panel");
         this.elements.overlay = this.elements.customizer.querySelector(".vd-theme-customizer-overlay");
       } else {
-        if (this.elements.triggers.length) {
+        if (scopedTriggers.length && !this.elements.panel) {
           this.createDynamicPanel();
         }
       }
@@ -4143,7 +4589,7 @@
      * Create the panel dynamically when only a trigger button exists
      */
     createDynamicPanel: function() {
-      if (!this.elements.triggers.length) {
+      if (!this.elements.triggers.length || this.elements.panel && this.elements.panel.isConnected) {
         return;
       }
       this.elements.trigger = this.elements.triggers[0];
@@ -4156,6 +4602,7 @@
       document.body.appendChild(panel);
       this.elements.panel = panel;
       this.elements.overlay = overlay;
+      this._ownsDynamicPanel = true;
       this.elements.customizer = {
         contains: (el) => panel.contains(el) || this.elements.triggers.some((trigger) => trigger.contains(el))
       };
@@ -4338,8 +4785,8 @@
         this.state.primary = expected;
       }
     },
-    bindEvents: function() {
-      this.bindTriggerEvents();
+    bindEvents: function(root) {
+      this.bindTriggerEvents(root);
       this.bindPanelEvents();
       if (window.matchMedia) {
         const mq = window.matchMedia("(prefers-color-scheme: dark)");
@@ -4366,21 +4813,44 @@
         }
       });
     },
-    bindTriggerEvents: function() {
-      this.elements.triggers.forEach((trigger) => {
+    bindTriggerEvents: function(root) {
+      const triggers = root ? this.getTriggers(root) : this.elements.triggers;
+      triggers.forEach((trigger) => {
         if (trigger.getAttribute("data-customizer-trigger-initialized") === "true") {
           return;
         }
-        this.addListener(trigger, "click", (e) => {
+        const onClick = (e) => {
           e.preventDefault();
           e.stopPropagation();
           this.elements.activeTrigger = trigger;
           this.elements.trigger = trigger;
           this.toggle();
-        });
+        };
+        trigger.addEventListener("click", onClick);
+        trigger._themeCustomizerTriggerHandler = onClick;
         trigger.setAttribute("data-customizer-trigger-initialized", "true");
       });
     },
+    cleanupTrigger: function(trigger) {
+      if (!trigger || trigger.getAttribute("data-customizer-trigger-initialized") !== "true") {
+        return;
+      }
+      if (trigger._themeCustomizerTriggerHandler) {
+        trigger.removeEventListener("click", trigger._themeCustomizerTriggerHandler);
+        delete trigger._themeCustomizerTriggerHandler;
+      }
+      trigger.setAttribute("aria-expanded", "false");
+      trigger.removeAttribute("data-customizer-trigger-initialized");
+      if (this.elements.activeTrigger === trigger) {
+        this.elements.activeTrigger = null;
+      }
+      this.elements.triggers = this.elements.triggers.filter(function(candidate) {
+        return candidate !== trigger;
+      });
+      if (this.elements.trigger === trigger) {
+        this.elements.trigger = this.elements.triggers[0] || null;
+      }
+    },
     /**
      * Toggle panel open/close
      */
@@ -4491,13 +4961,42 @@
         return false;
       }
     },
-    destroyAll: function() {
+    destroyAll: function(root) {
+      const scope = this.normalizeRoot(root);
+      if (scope !== document) {
+        this.getTriggers(scope).forEach((trigger) => {
+          this.cleanupTrigger(trigger);
+        });
+        this.pruneTriggers();
+        if (!this.elements.triggers.length) {
+          this.destroyAll(document);
+        }
+        return;
+      }
       this._cleanup.forEach((fn) => fn());
       this._cleanup = [];
       if (this.elements.panel) {
         this.elements.panel.removeAttribute("data-customizer-initialized");
       }
+      this.elements.triggers.slice().forEach((trigger) => {
+        this.cleanupTrigger(trigger);
+      });
+      if (this._ownsDynamicPanel) {
+        if (this.elements.panel && this.elements.panel.parentNode) {
+          this.elements.panel.parentNode.removeChild(this.elements.panel);
+        }
+        if (this.elements.overlay && this.elements.overlay.parentNode) {
+          this.elements.overlay.parentNode.removeChild(this.elements.overlay);
+        }
+        this._ownsDynamicPanel = false;
+      }
       this.close();
+      this.elements.customizer = null;
+      this.elements.trigger = null;
+      this.elements.activeTrigger = null;
+      this.elements.triggers = [];
+      this.elements.panel = null;
+      this.elements.overlay = null;
       this.isInitialized = false;
     }
   };
@@ -4514,7 +5013,13 @@
     isInitialized: false,
     _mediaQuery: null,
     _onMediaChange: null,
-    init: function() {
+    getToggles: function(root) {
+      if (window.Vanduo && typeof window.Vanduo.queryAll === "function") {
+        return window.Vanduo.queryAll(root, '[data-toggle="theme"]');
+      }
+      return Array.from(document.querySelectorAll('[data-toggle="theme"]'));
+    },
+    init: function(root) {
       this.STORAGE_KEY = "vanduo-theme-preference";
       this.state = {
         preference: this.getPreference()
@@ -4522,15 +5027,14 @@
       };
       if (this.isInitialized) {
         this.applyTheme();
-        this.renderUI();
-        this.updateUI();
+        this.renderUI(root);
+        this.updateUI(root);
         return;
       }
       this.isInitialized = true;
       this.applyTheme();
       this.listenForSystemChanges();
-      this.renderUI();
-      console.log("Vanduo Theme Switcher initialized");
+      this.renderUI(root);
     },
     getPreference: function() {
       return this.getStorageValue(this.STORAGE_KEY, "system");
@@ -4590,8 +5094,8 @@
       this._mediaQuery.addEventListener("change", this._onMediaChange);
     },
     // Helper to facilitate UI creation if needed, though often UI is in HTML
-    renderUI: function() {
-      const toggles = document.querySelectorAll('[data-toggle="theme"]');
+    renderUI: function(root) {
+      const toggles = this.getToggles(root);
       toggles.forEach((toggle) => {
         if (toggle.getAttribute("data-theme-initialized") === "true") {
           if (toggle.tagName === "SELECT") {
@@ -4618,8 +5122,8 @@
         toggle.setAttribute("data-theme-initialized", "true");
       });
     },
-    updateUI: function() {
-      const toggles = document.querySelectorAll('[data-toggle="theme"]');
+    updateUI: function(root) {
+      const toggles = this.getToggles(root);
       toggles.forEach((toggle) => {
         if (toggle.tagName === "SELECT") {
           toggle.value = this.state.preference;
@@ -4631,8 +5135,11 @@
         }
       });
     },
-    destroyAll: function() {
-      const toggles = document.querySelectorAll('[data-toggle="theme"][data-theme-initialized="true"]');
+    destroyAll: function(root) {
+      const scope = root || document;
+      const toggles = this.getToggles(scope).filter(function(toggle) {
+        return toggle.getAttribute("data-theme-initialized") === "true";
+      });
       toggles.forEach((toggle) => {
         if (toggle._themeToggleHandler) {
           const eventName = toggle.tagName === "SELECT" ? "change" : "click";
@@ -4641,12 +5148,14 @@
         }
         toggle.removeAttribute("data-theme-initialized");
       });
-      if (this._mediaQuery && this._onMediaChange) {
+      if (scope === document && this._mediaQuery && this._onMediaChange) {
         this._mediaQuery.removeEventListener("change", this._onMediaChange);
       }
-      this._mediaQuery = null;
-      this._onMediaChange = null;
-      this.isInitialized = false;
+      if (scope === document) {
+        this._mediaQuery = null;
+        this._onMediaChange = null;
+        this.isInitialized = false;
+      }
     }
   };
   if (window.Vanduo) {
@@ -4723,7 +5232,7 @@
       let html = "";
       if (config.icon) {
         const allowSvg = config.iconAllowSvg === true;
-        const safeIcon = typeof sanitizeHtml === "function" ? sanitizeHtml(config.icon, { allowSvg }) : escapeHtml(config.icon);
+        const safeIcon = typeof sanitizeHtml === "function" ? sanitizeHtml(config.icon, { allowSvg, allowStyle: false }) : escapeHtml(config.icon);
         html += `<span class="vd-toast-icon">${safeIcon}</span>`;
       } else if (config.type) {
         html += `<span class="vd-toast-icon">${this.getDefaultIcon(config.type)}</span>`;
@@ -4943,8 +5452,8 @@
     /**
      * Initialize tooltips
      */
-    init: function() {
-      const elements = document.querySelectorAll("[data-tooltip], [data-tooltip-html]");
+    init: function(root) {
+      const elements = window.Vanduo.queryAll(root, "[data-tooltip], [data-tooltip-html]");
       elements.forEach((element) => {
         if (this.tooltips.has(element)) {
           return;
@@ -5000,7 +5509,7 @@
       const textContent = element.dataset.tooltip;
       if (htmlContent) {
         const allowSvg = element.hasAttribute("data-tooltip-allow-svg");
-        tooltip.innerHTML = this.sanitizeHtml(htmlContent, { allowSvg });
+        tooltip.innerHTML = this.sanitizeHtml(htmlContent, { allowSvg, allowStyle: false });
         tooltip.classList.add("vd-tooltip-html");
       } else if (textContent) {
         tooltip.textContent = textContent;
@@ -5133,7 +5642,7 @@
         const { tooltip } = this.tooltips.get(el);
         if (isHtml) {
           const allowSvg = el.hasAttribute("data-tooltip-allow-svg");
-          tooltip.innerHTML = this.sanitizeHtml(content, { allowSvg });
+          tooltip.innerHTML = this.sanitizeHtml(content, { allowSvg, allowStyle: false });
           tooltip.classList.add("vd-tooltip-html");
         } else {
           tooltip.textContent = content;
@@ -5223,8 +5732,26 @@
     emptyText: "Try different keywords or check spelling",
     placeholder: "Search..."
   };
+  const ALLOWED_HIGHLIGHT_TAGS = {
+    mark: true,
+    span: true,
+    strong: true,
+    em: true
+  };
+  function isRoot(value) {
+    return typeof window.VanduoLifecycle !== "undefined" && window.VanduoLifecycle.isRoot(value);
+  }
+  function normalizeRoot(root) {
+    return isRoot(root) ? root : document;
+  }
+  function normalizeHighlightTag(tagName) {
+    const normalized = typeof tagName === "string" ? tagName.toLowerCase() : "mark";
+    return ALLOWED_HIGHLIGHT_TAGS[normalized] ? normalized : "mark";
+  }
   function createSearch(options) {
     const config = Object.assign({}, DEFAULTS, options || {});
+    config.root = normalizeRoot(config.root);
+    config.highlightTag = normalizeHighlightTag(config.highlightTag);
     const state = {
       initialized: false,
       index: [],
@@ -5238,6 +5765,24 @@
       debounceTimer: null,
       boundHandlers: {}
     };
+    function queryAll(selector) {
+      if (window.Vanduo && typeof window.Vanduo.queryAll === "function") {
+        return window.Vanduo.queryAll(config.root, selector);
+      }
+      const scope = normalizeRoot(config.root);
+      if (scope === document) {
+        return Array.from(document.querySelectorAll(selector));
+      }
+      const matches = [];
+      if (scope instanceof Element && scope.matches(selector)) {
+        matches.push(scope);
+      }
+      return matches.concat(Array.from(scope.querySelectorAll(selector)));
+    }
+    function queryOne(selector) {
+      const matches = queryAll(selector);
+      return matches.length ? matches[0] : null;
+    }
     function safeInvokeCallback(name, fn, ...args) {
       try {
         fn(...args);
@@ -5257,7 +5802,7 @@
       if (state.initialized) {
         return instance;
       }
-      state.container = document.querySelector(config.containerSelector);
+      state.container = queryOne(config.containerSelector);
       if (!state.container) {
         state.initialized = false;
         return null;
@@ -5294,7 +5839,7 @@
         });
         return;
       }
-      const sections = document.querySelectorAll(config.contentSelector);
+      const sections = queryAll(config.contentSelector);
       const categoryMap = buildCategoryMap();
       sections.forEach(function(section) {
         const id = section.id;
@@ -5329,7 +5874,7 @@
     function buildCategoryMap() {
       const map = {};
       let currentCategory = "Documentation";
-      const navItems = document.querySelectorAll(config.navSelector + ", " + config.sectionSelector);
+      const navItems = queryAll(config.navSelector + ", " + config.sectionSelector);
       navItems.forEach(function(item) {
         if (item.classList.contains("doc-nav-section")) {
           currentCategory = item.textContent.trim();
@@ -5658,7 +6203,7 @@
         safeInvokeCallback("onSelect", config.onSelect, result);
         return;
       }
-      const section = document.querySelector(result.url);
+      const section = queryOne(result.url) || document.querySelector(result.url);
       if (section) {
         section.scrollIntoView({ behavior: "smooth", block: "start" });
         window.history.pushState(null, "", result.url);
@@ -5666,7 +6211,7 @@
       }
     }
     function updateSidebarActive(sectionId) {
-      const navLinks = document.querySelectorAll(config.navSelector);
+      const navLinks = queryAll(config.navSelector);
       navLinks.forEach(function(link) {
         link.classList.remove("active");
         if (link.getAttribute("href") === "#" + sectionId) {
@@ -5713,6 +6258,8 @@
     }
     function setConfig(newConfig) {
       Object.assign(config, newConfig);
+      config.root = normalizeRoot(config.root);
+      config.highlightTag = normalizeHighlightTag(config.highlightTag);
     }
     function getConfig() {
       return Object.assign({}, config);
@@ -5729,7 +6276,10 @@
       close,
       setConfig,
       getConfig,
-      getIndex
+      getIndex,
+      getContainer: function() {
+        return state.container;
+      }
     };
     return instance;
   }
@@ -5751,27 +6301,34 @@
     /**
      * Initialize the default search instance
      */
-    init: function(options) {
+    init: function(rootOrOptions, maybeOptions) {
+      const root = isRoot(rootOrOptions) ? rootOrOptions : null;
+      const options = root ? maybeOptions : rootOrOptions;
       if (this._instance) {
         this._instance.destroy();
       }
       if (options) {
         Object.assign(this.config, options);
       }
-      this._instance = createSearch(this.config);
+      this._instance = createSearch(Object.assign({}, this.config, root ? { root } : {}));
       return this._instance ? this._instance.init() : null;
     },
     /**
      * Destroy the default instance
      */
-    destroy: function() {
+    destroy: function(root) {
+      if (root && this._instance && this._instance.getContainer() && typeof window.VanduoLifecycle !== "undefined") {
+        if (!window.VanduoLifecycle.isInRoot(root, this._instance.getContainer())) {
+          return;
+        }
+      }
       if (this._instance) {
         this._instance.destroy();
         this._instance = null;
       }
     },
-    destroyAll: function() {
-      this.destroy();
+    destroyAll: function(root) {
+      this.destroy(root);
     },
     /**
      * Rebuild the default instance index
@@ -5829,21 +6386,21 @@
     /**
      * Initialize draggable components
      */
-    init: function() {
-      const draggables = document.querySelectorAll(".vd-draggable, [data-draggable]");
+    init: function(root) {
+      const draggables = window.Vanduo.queryAll(root, ".vd-draggable, [data-draggable]");
       draggables.forEach((element) => {
         if (this.instances.has(element)) {
           return;
         }
         this.initDraggable(element);
       });
-      const containers = document.querySelectorAll(this.containerSelector);
+      const containers = window.Vanduo.queryAll(root, this.containerSelector);
       containers.forEach((container) => {
         if (!this.instances.has(container)) {
           this.initContainer(container);
         }
       });
-      const dropZones = document.querySelectorAll(".vd-drop-zone");
+      const dropZones = window.Vanduo.queryAll(root, ".vd-drop-zone");
       dropZones.forEach((zone) => {
         if (!this.instances.has(zone)) {
           this.initDropZone(zone);
@@ -6453,6 +7010,35 @@
 (function() {
   "use strict";
   const _observerMap = /* @__PURE__ */ new Map();
+  function _isRoot(root) {
+    return !!root && (root === document || root.nodeType === 1 || root.nodeType === 9 || root.nodeType === 11);
+  }
+  function _normalizeRoot(root) {
+    return _isRoot(root) ? root : document;
+  }
+  function _isInRoot(root, element) {
+    const scope = _normalizeRoot(root);
+    if (!(element instanceof Element)) return false;
+    if (scope === document) {
+      return document.documentElement ? document.documentElement.contains(element) : document.contains(element);
+    }
+    if (scope === element) return true;
+    return typeof scope.contains === "function" && scope.contains(element);
+  }
+  function _queryAll(root, selector) {
+    const scope = _normalizeRoot(root);
+    const matches = [];
+    if (scope instanceof Element && typeof scope.matches === "function" && scope.matches(selector)) {
+      matches.push(scope);
+    }
+    if (typeof scope.querySelectorAll === "function") {
+      const descendants = scope.querySelectorAll(selector);
+      for (let i = 0; i < descendants.length; i++) {
+        matches.push(descendants[i]);
+      }
+    }
+    return matches;
+  }
   function _isSafeUrl(url) {
     try {
       const resolved = new URL(url, window.location.href);
@@ -6540,6 +7126,9 @@
           if (entry.isIntersecting) {
             obs.unobserve(entry.target);
             _observerMap.delete(entry.target);
+            if (typeof window.VanduoLifecycle !== "undefined" && window.VanduoLifecycle.has(entry.target, "lazyLoad")) {
+              window.VanduoLifecycle.unregister(entry.target, "lazyLoad");
+            }
             try {
               callback(entry.target);
             } catch (e) {
@@ -6549,27 +7138,39 @@
         });
       }, { threshold, rootMargin });
       _observerMap.set(element, observer);
+      if (typeof window.VanduoLifecycle !== "undefined" && !window.VanduoLifecycle.has(element, "lazyLoad")) {
+        window.VanduoLifecycle.register(element, "lazyLoad", [() => {
+          VanduoLazyLoad.unobserve(element, { skipLifecycle: true });
+        }]);
+      }
       observer.observe(element);
     },
     /**
      * Stop observing an element that was previously passed to observe().
      * @param {Element} element
      */
-    unobserve: function(element) {
+    unobserve: function(element, options) {
+      const opts = options || {};
       const observer = _observerMap.get(element);
       if (observer) {
         observer.unobserve(element);
+        if (typeof observer.disconnect === "function") {
+          observer.disconnect();
+        }
         _observerMap.delete(element);
       }
+      if (!opts.skipLifecycle && typeof window.VanduoLifecycle !== "undefined" && window.VanduoLifecycle.has(element, "lazyLoad")) {
+        window.VanduoLifecycle.unregister(element, "lazyLoad");
+      }
     },
     /**
      * Stop observing ALL currently observed elements.
      */
     unobserveAll: function() {
-      _observerMap.forEach(function(observer, element) {
-        observer.unobserve(element);
+      const observed = Array.from(_observerMap.keys());
+      observed.forEach(function(element) {
+        VanduoLazyLoad.unobserve(element);
       });
-      _observerMap.clear();
     },
     /* ─────────────────────────────────────────────────
      * HIGH-LEVEL API
@@ -6618,7 +7219,7 @@
           _safeInjectHtml(containerEl, html);
           _dispatch(containerEl, "lazysection:loaded", { url });
           if (typeof window.Vanduo !== "undefined") {
-            window.Vanduo.init();
+            window.Vanduo.init(containerEl);
           }
           if (typeof opts.onLoaded === "function") {
             opts.onLoaded(containerEl);
@@ -6653,9 +7254,9 @@
      * Scan the DOM for [data-vd-lazy] elements and wire them up.
      * Safe to call multiple times — already-observed elements are skipped.
      */
-    init: function() {
+    init: function(root) {
       const self = this;
-      const elements = document.querySelectorAll("[data-vd-lazy]");
+      const elements = _queryAll(root, "[data-vd-lazy]");
       elements.forEach(function(el) {
         if (_observerMap.has(el) || el.dataset.vdLazyState === "loading" || el.dataset.vdLazyState === "loaded") return;
         const url = el.getAttribute("data-vd-lazy");
@@ -6672,10 +7273,26 @@
           }
         });
       });
+    },
+    destroy: function(element) {
+      this.unobserve(element);
+    },
+    destroyAll: function(root) {
+      const scope = _normalizeRoot(root);
+      if (scope === document) {
+        this.unobserveAll();
+        return;
+      }
+      const observed = Array.from(_observerMap.keys());
+      observed.forEach((element) => {
+        if (_isInRoot(scope, element)) {
+          this.unobserve(element);
+        }
+      });
     }
   };
   if (typeof window.Vanduo !== "undefined") {
-    window.Vanduo.register("LazyLoad", VanduoLazyLoad);
+    window.Vanduo.register("lazyLoad", VanduoLazyLoad, { aliases: ["LazyLoad"] });
   }
   window.VanduoLazyLoad = VanduoLazyLoad;
 })();
@@ -6686,8 +7303,8 @@
   const GlassScroll = {
     /** @type {Map<Element, IntersectionObserver>} */
     observers: /* @__PURE__ */ new Map(),
-    init: function() {
-      document.querySelectorAll("[data-glass-scroll]").forEach((el) => {
+    init: function(root) {
+      window.Vanduo.queryAll(root, "[data-glass-scroll]").forEach((el) => {
         if (this.observers.has(el)) return;
         this.initElement(el);
       });
@@ -6747,8 +7364,8 @@
   const MORPH_DURATION_MS = 750;
   const Morph = {
     instances: /* @__PURE__ */ new Map(),
-    init: function() {
-      const elements = document.querySelectorAll(".vd-morph, [data-vd-morph]");
+    init: function(root) {
+      const elements = window.Vanduo.queryAll(root, ".vd-morph, [data-vd-morph]");
       elements.forEach(function(el) {
         if (Morph.instances.has(el)) return;
         if (el.getAttribute("data-vd-morph") === "manual") return;
@@ -6853,8 +7470,8 @@
   "use strict";
   const ExpandingCards = {
     instances: /* @__PURE__ */ new Map(),
-    init: function() {
-      document.querySelectorAll(".vd-expanding-cards").forEach(function(el) {
+    init: function(root) {
+      window.Vanduo.queryAll(root, ".vd-expanding-cards").forEach(function(el) {
         if (el.getAttribute("data-vd-expanding-cards") === "manual") return;
         if (ExpandingCards.instances.has(el)) return;
         ExpandingCards.initContainer(el);
@@ -6986,6 +7603,8 @@
     const playBtn = scope.querySelector("[data-vd-timeline-play]");
     const pauseBtn = scope.querySelector("[data-vd-timeline-pause]");
     let playTimer = null;
+    let isPlaying = false;
+    let playToken = 0;
     function updateNavButtons() {
       const k = countRevealedPrefix(items);
       const n = items.length;
@@ -7000,10 +7619,10 @@
         nextBtn.setAttribute("aria-disabled", atEnd ? "true" : "false");
       }
       if (playBtn) {
-        playBtn.setAttribute("aria-pressed", playTimer ? "true" : "false");
+        playBtn.setAttribute("aria-pressed", isPlaying ? "true" : "false");
       }
       if (pauseBtn) {
-        pauseBtn.disabled = !playTimer;
+        pauseBtn.disabled = !isPlaying;
       }
     }
     function stepNext() {
@@ -7020,20 +7639,36 @@
       }
       updateNavButtons();
     }
-    function play() {
-      if (playTimer) return;
-      playTimer = setInterval(function() {
+    function scheduleNext() {
+      const token = ++playToken;
+      playTimer = setTimeout(function() {
+        playTimer = null;
+        if (!isPlaying || token !== playToken) {
+          return;
+        }
         if (countRevealedPrefix(items) >= items.length) {
           pause();
           return;
         }
         stepNext();
+        if (countRevealedPrefix(items) >= items.length) {
+          pause();
+          return;
+        }
+        scheduleNext();
       }, PLAY_INTERVAL_MS);
+    }
+    function play() {
+      if (isPlaying) return;
+      isPlaying = true;
+      scheduleNext();
       updateNavButtons();
     }
     function pause() {
+      isPlaying = false;
+      playToken++;
       if (playTimer) {
-        clearInterval(playTimer);
+        clearTimeout(playTimer);
         playTimer = null;
       }
       updateNavButtons();
@@ -7066,15 +7701,15 @@
   }
   const Timeline = {
     instances: /* @__PURE__ */ new Map(),
-    init: function() {
-      document.querySelectorAll(".vd-timeline.vd-timeline-animated").forEach(function(el) {
+    init: function(root) {
+      window.Vanduo.queryAll(root, ".vd-timeline.vd-timeline-animated").forEach(function(el) {
         if (Timeline.instances.has(el)) return;
         Timeline.initInstance(el);
       });
     },
-    reinit: function() {
-      Timeline.destroyAll();
-      Timeline.init();
+    reinit: function(root) {
+      Timeline.destroyAll(root);
+      Timeline.init(root);
     },
     initInstance: function(container) {
       const cleanup = [];
@@ -7133,8 +7768,10 @@
       });
       this.instances.delete(container);
     },
-    destroyAll: function() {
+    destroyAll: function(root) {
+      const scope = window.Vanduo && typeof window.Vanduo._normalizeRoot === "function" ? window.Vanduo._normalizeRoot(root) : document;
       this.instances.forEach(function(_, el) {
+        if (scope !== document && scope !== el && (!scope.contains || !scope.contains(el))) return;
         Timeline.destroy(el);
       });
     }
@@ -7150,8 +7787,8 @@
   "use strict";
   const Flow = {
     instances: /* @__PURE__ */ new Map(),
-    init: function() {
-      const carousels = document.querySelectorAll(".vd-flow, .vd-carousel");
+    init: function(root) {
+      const carousels = window.Vanduo.queryAll(root, ".vd-flow, .vd-carousel");
       carousels.forEach((el) => {
         if (this.instances.has(el)) return;
         this.initInstance(el);
@@ -7368,8 +8005,8 @@
   const Bubble = {
     instances: /* @__PURE__ */ new Map(),
     _globalCleanups: [],
-    init: function() {
-      const triggers = document.querySelectorAll("[data-vd-bubble], [data-vd-popover]");
+    init: function(root) {
+      const triggers = window.Vanduo.queryAll(root, "[data-vd-bubble], [data-vd-popover]");
       triggers.forEach((el) => {
         if (this.instances.has(el)) return;
         this.initInstance(el);
@@ -7430,7 +8067,7 @@
       body.className = "vd-bubble-body";
       if (htmlContent) {
         if (typeof sanitizeHtml === "function") {
-          body.innerHTML = sanitizeHtml(htmlContent, { allowSvg });
+          body.innerHTML = sanitizeHtml(htmlContent, { allowSvg, allowStyle: false });
         } else {
           body.textContent = htmlContent;
         }
@@ -7541,8 +8178,8 @@
   "use strict";
   const Waypoint = {
     instances: /* @__PURE__ */ new Map(),
-    init: function() {
-      const navs = document.querySelectorAll("[data-vd-waypoint-nav], [data-vd-scrollspy-nav]");
+    init: function(root) {
+      const navs = window.Vanduo.queryAll(root, "[data-vd-waypoint-nav], [data-vd-scrollspy-nav]");
       navs.forEach((nav) => {
         if (this.instances.has(nav)) return;
         this.initInstance(nav);
@@ -7635,8 +8272,8 @@
   "use strict";
   const Ripple = {
     instances: /* @__PURE__ */ new Map(),
-    init: function() {
-      const elements = document.querySelectorAll(".vd-ripple, [data-vd-ripple]");
+    init: function(root) {
+      const elements = window.Vanduo.queryAll(root, ".vd-ripple, [data-vd-ripple]");
       elements.forEach((el) => {
         if (this.instances.has(el)) return;
         this.initInstance(el);
@@ -7707,8 +8344,8 @@
   }
   const Affix = {
     instances: /* @__PURE__ */ new Map(),
-    init: function() {
-      const elements = document.querySelectorAll(".vd-affix, .vd-sticky, [data-vd-affix]");
+    init: function(root) {
+      const elements = window.Vanduo.queryAll(root, ".vd-affix, .vd-sticky, [data-vd-affix]");
       elements.forEach((el) => {
         if (this.instances.has(el)) return;
         this.initInstance(el);
@@ -7810,8 +8447,8 @@
   }
   const Suggest = {
     instances: /* @__PURE__ */ new Map(),
-    init: function() {
-      const inputs = document.querySelectorAll("[data-vd-suggest], [data-vd-autocomplete]");
+    init: function(root) {
+      const inputs = window.Vanduo.queryAll(root, "[data-vd-suggest], [data-vd-autocomplete]");
       inputs.forEach((el) => {
         if (this.instances.has(el)) return;
         this.initInstance(el);
@@ -7973,16 +8610,20 @@
       const blurHandler = () => {
         setTimeout(close, 200);
       };
+      const focusHandler = () => {
+        if (input.value.length >= minChars) {
+          doSearch(input.value);
+        }
+      };
       input.addEventListener("input", inputHandler);
       input.addEventListener("keydown", keyHandler);
       input.addEventListener("blur", blurHandler);
-      input.addEventListener("focus", () => {
-        if (input.value.length >= minChars) doSearch(input.value);
-      });
+      input.addEventListener("focus", focusHandler);
       cleanup.push(
         () => input.removeEventListener("input", inputHandler),
         () => input.removeEventListener("keydown", keyHandler),
         () => input.removeEventListener("blur", blurHandler),
+        () => input.removeEventListener("focus", focusHandler),
         () => clearTimeout(debounceTimer),
         () => {
           if (list.parentNode) list.parentNode.removeChild(list);
@@ -8057,8 +8698,8 @@
       pattern: "Invalid format",
       match: "Fields do not match"
     },
-    init: function() {
-      const forms = document.querySelectorAll("[data-vd-validate], .vd-validate");
+    init: function(root) {
+      const forms = window.Vanduo.queryAll(root, "[data-vd-validate], .vd-validate");
       forms.forEach((form) => {
         if (this.instances.has(form)) return;
         this.initInstance(form);
@@ -8295,8 +8936,8 @@
   }
   const Datepicker = {
     instances: /* @__PURE__ */ new Map(),
-    init: function() {
-      const inputs = document.querySelectorAll("[data-vd-datepicker]");
+    init: function(root) {
+      const inputs = window.Vanduo.queryAll(root, "[data-vd-datepicker]");
       inputs.forEach((el) => {
         if (this.instances.has(el)) return;
         this.initInstance(el);
@@ -8748,8 +9389,8 @@
   "use strict";
   const Timepicker = {
     instances: /* @__PURE__ */ new Map(),
-    init: function() {
-      const inputs = document.querySelectorAll("[data-vd-timepicker]");
+    init: function(root) {
+      const inputs = window.Vanduo.queryAll(root, "[data-vd-timepicker]");
       inputs.forEach((el) => {
         if (this.instances.has(el)) return;
         this.initInstance(el);
@@ -8863,8 +9504,8 @@
   "use strict";
   const Stepper = {
     instances: /* @__PURE__ */ new Map(),
-    init: function() {
-      const steppers = document.querySelectorAll(".vd-stepper");
+    init: function(root) {
+      const steppers = window.Vanduo.queryAll(root, ".vd-stepper");
       steppers.forEach((el) => {
         if (this.instances.has(el)) return;
         this.initInstance(el);
@@ -8939,8 +9580,8 @@
   "use strict";
   const Rating = {
     instances: /* @__PURE__ */ new Map(),
-    init: function() {
-      const ratings = document.querySelectorAll("[data-vd-rating]");
+    init: function(root) {
+      const ratings = window.Vanduo.queryAll(root, "[data-vd-rating]");
       ratings.forEach((el) => {
         if (this.instances.has(el)) return;
         this.initInstance(el);
@@ -9074,8 +9715,8 @@
   "use strict";
   const Transfer = {
     instances: /* @__PURE__ */ new Map(),
-    init: function() {
-      const transfers = document.querySelectorAll("[data-vd-transfer]");
+    init: function(root) {
+      const transfers = window.Vanduo.queryAll(root, "[data-vd-transfer]");
       transfers.forEach((el) => {
         if (this.instances.has(el)) return;
         this.initInstance(el);
@@ -9238,8 +9879,8 @@
   "use strict";
   const Tree = {
     instances: /* @__PURE__ */ new Map(),
-    init: function() {
-      const trees = document.querySelectorAll("[data-vd-tree]");
+    init: function(root) {
+      const trees = window.Vanduo.queryAll(root, "[data-vd-tree]");
       trees.forEach((el) => {
         if (this.instances.has(el)) return;
         this.initInstance(el);
@@ -9403,8 +10044,8 @@
     _cleanup: [],
     _boundTriggers: /* @__PURE__ */ new WeakMap(),
     _triggerElement: null,
-    init: function() {
-      const triggers = document.querySelectorAll("[data-vd-spotlight]");
+    init: function(root) {
+      const triggers = window.Vanduo.queryAll(root, "[data-vd-spotlight]");
       triggers.forEach((trigger) => {
         if (this._boundTriggers.has(trigger)) return;
         const clickHandler = (event) => {
@@ -9677,8 +10318,8 @@
      * Auto-initialize all .vd-music-player / [data-music-player] elements.
      * Options can be provided via data-music-player-options (JSON string).
      */
-    init: function() {
-      document.querySelectorAll(".vd-music-player, [data-music-player]").forEach((el) => {
+    init: function(root) {
+      window.Vanduo.queryAll(root, ".vd-music-player, [data-music-player]").forEach((el) => {
         if (this.instances.has(el)) return;
         let opts = {};
         const attr = el.getAttribute("data-music-player-options");