@vanduo-oss/framework 1.3.9 → 1.4.1

package/js/components/sidenav.js

@@ -13,9 +13,11 @@
     sidenavs: new Map(),
     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');
@@ -140,8 +142,8 @@
     /**
      * 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)) {
@@ -151,7 +153,9 @@
       });
 
       // Handle toggle buttons
-      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';
@@ -165,16 +169,18 @@
           }
         };
         toggle.addEventListener('click', toggleClickHandler);
-        this._globalCleanups.push(() => toggle.removeEventListener('click', toggleClickHandler));
+        toggle._sidenavToggleCleanup = () => toggle.removeEventListener('click', toggleClickHandler);
       });
 
       // Handle responsive behavior
       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);
+      }
     },
 
     /**
@@ -406,12 +412,36 @@
     /**
      * 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 = [];
+      }
     }
   };
   
@@ -424,4 +454,3 @@
   window.VanduoSidenav = Sidenav;
   
 })();
-

package/js/components/spotlight.js

@@ -15,8 +15,8 @@
     _boundTriggers: 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;

package/js/components/stepper.js

@@ -9,8 +9,8 @@
   const Stepper = {
     instances: 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);

package/js/components/suggest.js

@@ -36,8 +36,8 @@
   const Suggest = {
     instances: 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);
@@ -220,16 +220,22 @@
       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); }
       );

package/js/components/tabs.js

@@ -16,8 +16,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)) {

package/js/components/theme-customizer.js

@@ -86,23 +86,77 @@
 
     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;
@@ -113,10 +167,8 @@
 
       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) {
@@ -208,7 +260,7 @@
 
       this.state.radius = radius;
       document.documentElement.setAttribute('data-radius', radius);
-      document.documentElement.style.setProperty('--radius-scale', radius);
+      document.documentElement.style.setProperty('--vd-radius-scale', radius);
       this.savePreference(this.STORAGE_KEYS.RADIUS, radius);
 
       this.dispatchEvent('radius-change', { radius: radius });
@@ -315,21 +367,33 @@
     /**
      * Bind to existing DOM elements or create them dynamically
      */
-    bindExistingElements: function () {
-      // First check for existing full structure
-      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 {
         // Look for standalone trigger buttons with data attribute
-        if (this.elements.triggers.length) {
+        if (scopedTriggers.length && !this.elements.panel) {
           this.createDynamicPanel();
         }
       }
@@ -342,7 +406,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];
@@ -363,6 +427,7 @@
       // Store references
       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))
       };
@@ -396,7 +461,7 @@
       } else {
         // Desktop: position directly below the trigger button, aligned to its right edge
         const triggerRect = anchorTrigger.getBoundingClientRect();
-        const panelWidth = 320; // --customizer-width
+        const panelWidth = 320; // --vd-customizer-width
         const panelTop = triggerRect.bottom + 8;
 
         // Calculate right position: align panel's right edge with trigger's right edge
@@ -507,13 +572,13 @@
       // Generate primary color swatches
       let primarySwatches = '';
       for (const [key, value] of Object.entries(this.PRIMARY_COLORS)) {
-        primarySwatches += `<button class="tc-color-swatch${key === this.state.primary ? ' is-active' : ''}" data-color="${esc(key)}" style="--swatch-color: ${safeColor(value.color)}" title="${esc(value.name)}"></button>`;
+        primarySwatches += `<button class="tc-color-swatch${key === this.state.primary ? ' is-active' : ''}" data-color="${esc(key)}" style="--vd-swatch-color: ${safeColor(value.color)}" title="${esc(value.name)}"></button>`;
       }
 
       // Generate neutral color swatches
       let neutralSwatches = '';
       for (const [key, value] of Object.entries(this.NEUTRAL_COLORS)) {
-        neutralSwatches += `<button class="tc-neutral-swatch${key === this.state.neutral ? ' is-active' : ''}" data-neutral="${esc(key)}" style="--swatch-color: ${safeColor(value.color)}" title="${esc(value.name)}"><span>${esc(value.name)}</span></button>`;
+        neutralSwatches += `<button class="tc-neutral-swatch${key === this.state.neutral ? ' is-active' : ''}" data-neutral="${esc(key)}" style="--vd-swatch-color: ${safeColor(value.color)}" title="${esc(value.name)}"><span>${esc(value.name)}</span></button>`;
       }
 
       // Generate radius buttons
@@ -595,8 +660,8 @@
       }
     },
 
-    bindEvents: function () {
-      this.bindTriggerEvents();
+    bindEvents: function (root) {
+      this.bindTriggerEvents(root);
 
       this.bindPanelEvents();
 
@@ -631,22 +696,53 @@
       });
     },
 
-    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
      */
@@ -782,7 +878,21 @@
       }
     },
 
-    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 = [];
 
@@ -790,7 +900,27 @@
         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;
     }
   };

package/js/components/theme-switcher.js

@@ -11,7 +11,15 @@
     _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() // 'light', 'dark', or 'system'
@@ -19,8 +27,8 @@
 
       if (this.isInitialized) {
         this.applyTheme();
-        this.renderUI();
-        this.updateUI();
+        this.renderUI(root);
+        this.updateUI(root);
         return;
       }
 
@@ -28,9 +36,7 @@
 
       this.applyTheme();
       this.listenForSystemChanges();
-      this.renderUI();
-
-      console.log('Vanduo Theme Switcher initialized');
+      this.renderUI(root);
     },
 
     getPreference: function () {
@@ -113,9 +119,9 @@
     },
 
     // Helper to facilitate UI creation if needed, though often UI is in HTML
-    renderUI: function () {
+    renderUI: function (root) {
       // Look for any uninitialized theme toggles
-      const toggles = document.querySelectorAll('[data-toggle="theme"]');
+      const toggles = this.getToggles(root);
       toggles.forEach(toggle => {
         if (toggle.getAttribute('data-theme-initialized') === 'true') {
           if (toggle.tagName === 'SELECT') {
@@ -147,8 +153,8 @@
       });
     },
 
-    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;
@@ -166,8 +172,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';
@@ -177,13 +186,15 @@
         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;
+      }
     }
   };
 

package/js/components/timeline.js

@@ -37,6 +37,8 @@
     const pauseBtn = scope.querySelector('[data-vd-timeline-pause]');
 
     let playTimer = null;
+    let isPlaying = false;
+    let playToken = 0;
 
     function updateNavButtons() {
       const k = countRevealedPrefix(items);
@@ -52,10 +54,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;
       }
     }
 
@@ -75,21 +77,43 @@
       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();
@@ -129,16 +153,16 @@
   const Timeline = {
     instances: 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) {
@@ -211,8 +235,13 @@
       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);
       });
     }

package/js/components/timepicker.js

@@ -9,8 +9,8 @@
   const Timepicker = {
     instances: 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);