@vanduo-oss/framework 1.3.8 → 1.4.0

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

@@ -21,9 +21,9 @@
     DEFAULTS: {
       PRIMARY_LIGHT: 'black',
       PRIMARY_DARK: 'amber',
-      NEUTRAL: 'neutral',
+      NEUTRAL: 'charcoal',
       RADIUS: '0.5',
-      FONT: 'lato',
+      FONT: 'ubuntu',
       THEME: 'system'
     },
 
@@ -51,6 +51,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' },
@@ -85,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;
@@ -112,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) {
@@ -314,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();
         }
       }
@@ -341,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];
@@ -362,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))
       };
@@ -594,8 +660,8 @@
       }
     },
 
-    bindEvents: function () {
-      this.bindTriggerEvents();
+    bindEvents: function (root) {
+      this.bindTriggerEvents(root);
 
       this.bindPanelEvents();
 
@@ -630,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
      */
@@ -781,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 = [];
 
@@ -789,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);

package/js/components/toast.js

@@ -94,7 +94,7 @@
       if (config.icon) {
         const allowSvg = config.iconAllowSvg === true;
         const safeIcon = typeof sanitizeHtml === 'function'
-          ? sanitizeHtml(config.icon, { allowSvg })
+          ? sanitizeHtml(config.icon, { allowSvg, allowStyle: false })
           : escapeHtml(config.icon);
         html += `<span class="vd-toast-icon">${safeIcon}</span>`;
       } else if (config.type) {

package/js/components/tooltips.js

@@ -31,8 +31,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)) {
@@ -93,7 +93,7 @@
 
       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;
@@ -253,7 +253,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;

package/js/components/transfer.js

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

package/js/components/tree.js

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

package/js/components/validate.js

@@ -49,8 +49,8 @@
       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);

package/js/components/vd-hex.js

@@ -90,13 +90,19 @@ export class VdHexGrid {
         const root = document.documentElement;
         const style = getComputedStyle(root);
         
+        const readToken = (canonical, fallback, defaultValue) => {
+            return style.getPropertyValue(canonical).trim()
+                || style.getPropertyValue(fallback).trim()
+                || defaultValue;
+        };
+
         return {
-            bgPrimary: style.getPropertyValue('--bg-primary').trim() || '#ffffff',
-            bgSecondary: style.getPropertyValue('--bg-secondary').trim() || '#f5f5f5',
-            borderColor: style.getPropertyValue('--border-color').trim() || '#e0e0e0',
-            colorPrimary: style.getPropertyValue('--color-primary').trim() || '#3b82f6',
-            textColor: style.getPropertyValue('--text-primary').trim() || '#1f2937',
-            textMuted: style.getPropertyValue('--text-muted').trim() || '#6b7280'
+            bgPrimary: readToken('--vd-bg-primary', '--bg-primary', '#ffffff'),
+            bgSecondary: readToken('--vd-bg-secondary', '--bg-secondary', '#f5f5f5'),
+            borderColor: readToken('--vd-border-color', '--border-color', '#e0e0e0'),
+            colorPrimary: readToken('--vd-color-primary', '--color-primary', '#3b82f6'),
+            textColor: readToken('--vd-text-primary', '--text-primary', '#1f2937'),
+            textMuted: readToken('--vd-text-muted', '--text-muted', '#6b7280')
         };
     }
     

package/js/components/waypoint.js

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