@vanduo-oss/framework 1.3.0 → 1.3.1

package/js/components/code-snippet.js

@@ -282,19 +282,20 @@
       const codeElement = activePane.querySelector('code') || activePane;
       const code = codeElement.textContent;
 
+      let copySuccess;
       try {
         await navigator.clipboard.writeText(code);
-        this.showCopyFeedback(copyBtn, true);
+        copySuccess = true;
       } catch (_err) {
         // Fallback for older browsers
-        const success = this.fallbackCopy(code);
-        this.showCopyFeedback(copyBtn, success);
+        copySuccess = this.fallbackCopy(code);
       }
+      this.showCopyFeedback(copyBtn, copySuccess);
 
       // Dispatch event
       const event = new CustomEvent('codesnippet:copy', {
         bubbles: true,
-        detail: { snippet, code, success: true }
+        detail: { snippet, code, success: copySuccess }
       });
       snippet.dispatchEvent(event);
     },

package/js/components/dropdown.js

@@ -12,9 +12,6 @@
   const Dropdown = {
     // Store initialized dropdowns and their cleanup functions
     instances: new Map(),
-    // Typeahead state
-    _typeaheadBuffer: '',
-    _typeaheadTimer: null,
 
     /**
      * Initialize dropdown components
@@ -95,7 +92,7 @@
         cleanupFunctions.push(() => item.removeEventListener('keydown', itemKeydownHandler));
       });
 
-      this.instances.set(dropdown, { toggle, menu, cleanup: cleanupFunctions });
+      this.instances.set(dropdown, { toggle, menu, cleanup: cleanupFunctions, typeaheadBuffer: '', typeaheadTimer: null });
     },
     
     /**
@@ -249,18 +246,21 @@
         default:
           // Typeahead: jump to matching item when typing printable characters
           if (isOpen && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
-            clearTimeout(this._typeaheadTimer);
-            this._typeaheadBuffer += e.key.toLowerCase();
+            // Per-instance typeahead state to avoid cross-instance corruption
+            const instance = this.instances.get(dropdown);
+            if (!instance) break;
+            clearTimeout(instance.typeaheadTimer);
+            instance.typeaheadBuffer += e.key.toLowerCase();
 
             const match = items.find(item =>
-              item.textContent.trim().toLowerCase().startsWith(this._typeaheadBuffer)
+              item.textContent.trim().toLowerCase().startsWith(instance.typeaheadBuffer)
             );
             if (match) {
               match.focus();
             }
 
-            this._typeaheadTimer = setTimeout(() => {
-              this._typeaheadBuffer = '';
+            instance.typeaheadTimer = setTimeout(() => {
+              instance.typeaheadBuffer = '';
             }, 500);
           }
           break;

package/js/components/image-box.js

@@ -274,9 +274,10 @@
       // Handle image load
       if (!this.img.complete) {
         this.img.style.opacity = '0';
-        this.img.onload = () => {
+        this._imgLoadHandler = () => {
           this.img.style.opacity = '';
         };
+        this.img.addEventListener('load', this._imgLoadHandler, { once: true });
       }
     },
 
@@ -305,6 +306,11 @@
       // Clear image after transition
       setTimeout(() => {
         if (!this.isOpen) {
+          // Clean up load handler if still pending
+          if (this._imgLoadHandler) {
+            this.img.removeEventListener('load', this._imgLoadHandler);
+            this._imgLoadHandler = null;
+          }
           this.img.src = '';
           this.img.alt = '';
         }

package/js/components/modals.js

@@ -16,6 +16,8 @@
 
     // Store trigger cleanup functions
     _triggerCleanups: [],
+    // Shared ESC key handler (installed once)
+    _sharedEscHandler: null,
 
     /**
      * Initialize modals
@@ -99,17 +101,18 @@
       backdrop.addEventListener('click', backdropClickHandler);
       cleanupFunctions.push(() => backdrop.removeEventListener('click', backdropClickHandler));
 
-      // ESC key handler
-      const escKeyHandler = (e) => {
-        if (e.key === 'Escape' && this.openModals.length > 0) {
-          const topModal = this.openModals[this.openModals.length - 1];
-          if (topModal === modal && topModal.dataset.keyboard !== 'false') {
-            this.close(topModal);
+      // ESC key handler — use a single shared handler instead of one-per-modal
+      if (!this._sharedEscHandler) {
+        this._sharedEscHandler = (e) => {
+          if (e.key === 'Escape' && this.openModals.length > 0) {
+            const topModal = this.openModals[this.openModals.length - 1];
+            if (topModal.dataset.keyboard !== 'false') {
+              this.close(topModal);
+            }
           }
-        }
-      };
-      document.addEventListener('keydown', escKeyHandler);
-      cleanupFunctions.push(() => document.removeEventListener('keydown', escKeyHandler));
+        };
+        document.addEventListener('keydown', this._sharedEscHandler);
+      }
 
       this.modals.set(modal, { backdrop, dialog, trapHandler: null, cleanup: cleanupFunctions });
     },
@@ -352,6 +355,11 @@
       // Clean up trigger listeners
       this._triggerCleanups.forEach(fn => fn());
       this._triggerCleanups = [];
+      // Remove shared ESC handler
+      if (this._sharedEscHandler) {
+        document.removeEventListener('keydown', this._sharedEscHandler);
+        this._sharedEscHandler = null;
+      }
     }
   };
 

package/js/components/navbar.js

@@ -203,8 +203,8 @@
         overlay.classList.add('is-active');
       }
 
-      // Prevent body scroll when menu is open
-      document.body.style.overflow = 'hidden';
+      // Prevent body scroll when menu is open (use class to avoid conflicts with modals)
+      document.body.classList.add('body-navbar-open');
 
       // Set ARIA attributes
       toggle.setAttribute('aria-expanded', 'true');
@@ -227,7 +227,7 @@
       }
 
       // Restore body scroll
-      document.body.style.overflow = '';
+      document.body.classList.remove('body-navbar-open');
 
       // Close all dropdown menus
       const dropdownMenus = menu.querySelectorAll('.vd-navbar-dropdown-menu.is-open');

package/js/components/select.js

@@ -12,9 +12,6 @@
   const Select = {
     // Store initialized selects and their cleanup functions
     instances: new Map(),
-    // Typeahead state
-    _typeaheadBuffer: '',
-    _typeaheadTimer: null,
 
     /**
      * Initialize select components
@@ -123,7 +120,7 @@
       select.addEventListener('change', changeHandler);
       cleanupFunctions.push(() => select.removeEventListener('change', changeHandler));
 
-      this.instances.set(select, { wrapper, button, dropdown, cleanup: cleanupFunctions });
+      this.instances.set(select, { wrapper, button, dropdown, cleanup: cleanupFunctions, typeaheadBuffer: '', typeaheadTimer: null });
     },
 
     /**
@@ -233,7 +230,7 @@
      * @param {HTMLElement} dropdown - Dropdown container
      */
     updateSelectedOptions: function (select, dropdown) {
-      const options = dropdown.querySelectorAll('.vd-custom-select-option');
+      const options = dropdown.querySelectorAll('.custom-select-option');
       const selectedValues = Array.from(select.selectedOptions).map(opt => opt.value);
 
       options.forEach(optionEl => {
@@ -273,7 +270,7 @@
       button.setAttribute('aria-expanded', 'true');
 
       // Focus first option
-      const firstOption = dropdown.querySelector('.vd-custom-select-option:not(.is-disabled)');
+      const firstOption = dropdown.querySelector('.custom-select-option:not(.is-disabled)');
       if (firstOption) {
         firstOption.focus();
       }
@@ -298,7 +295,7 @@
      */
     handleKeydown: function (e, select, button, dropdown) {
       const isOpen = dropdown.classList.contains('is-open');
-      const options = Array.from(dropdown.querySelectorAll('.vd-custom-select-option:not(.is-disabled)'));
+      const options = Array.from(dropdown.querySelectorAll('.custom-select-option:not(.is-disabled)'));
       const currentIndex = options.findIndex(opt => opt === document.activeElement);
 
       switch (e.key) {
@@ -357,18 +354,21 @@
         default:
           // Typeahead: jump to matching option when typing printable characters
           if (isOpen && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
-            clearTimeout(this._typeaheadTimer);
-            this._typeaheadBuffer += e.key.toLowerCase();
+            // Per-instance typeahead state to avoid cross-instance corruption
+            const instance = this.instances.get(select);
+            if (!instance) break;
+            clearTimeout(instance.typeaheadTimer);
+            instance.typeaheadBuffer += e.key.toLowerCase();
 
             const match = options.find(opt =>
-              opt.textContent.trim().toLowerCase().startsWith(this._typeaheadBuffer)
+              opt.textContent.trim().toLowerCase().startsWith(instance.typeaheadBuffer)
             );
             if (match) {
               match.focus();
             }
 
-            this._typeaheadTimer = setTimeout(() => {
-              this._typeaheadBuffer = '';
+            instance.typeaheadTimer = setTimeout(() => {
+              instance.typeaheadBuffer = '';
             }, 500);
           }
           break;
@@ -403,7 +403,9 @@
       if (element.id) {
         return element.id;
       }
-      return 'select-' + Math.random().toString(36).substr(2, 9);
+      const id = 'select-' + Math.random().toString(36).substr(2, 9);
+      element.id = id;
+      return id;
     },
 
     /**

package/js/components/suggest.js

@@ -6,6 +6,17 @@
 (function () {
   'use strict';
 
+  /**
+   * Escape HTML entities to prevent XSS when inserting into innerHTML
+   * @param {string} text
+   * @returns {string}
+   */
+  function _escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
   const Suggest = {
     instances: new Map(),
 
@@ -77,8 +88,10 @@
 
           const text = typeof item === 'object' ? (item.label || item.text || String(item)) : String(item);
           if (query) {
+            // Escape HTML first to prevent XSS, then highlight matches in the safe string
+            const escaped = _escapeHtml(text);
             const re = new RegExp('(' + query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')', 'gi');
-            li.innerHTML = text.replace(re, '<span class="vd-suggest-match">$1</span>');
+            li.innerHTML = escaped.replace(re, '<span class="vd-suggest-match">$1</span>');
           } else {
             li.textContent = text;
           }

package/js/components/theme-customizer.js

@@ -714,7 +714,6 @@
       this.applyNeutral(this.DEFAULTS.NEUTRAL);
       this.applyRadius(this.DEFAULTS.RADIUS);
       this.applyFont(this.DEFAULTS.FONT);
-      this.applyTheme(this.DEFAULTS.THEME);
       this.updateUI();
 
       this.dispatchEvent('reset', { state: { ...this.state } });

package/js/components/validate.js

@@ -18,10 +18,21 @@
       max: (value, param) => value.length <= parseInt(param, 10),
       minVal: (value, param) => parseFloat(value) >= parseFloat(param),
       maxVal: (value, param) => parseFloat(value) <= parseFloat(param),
-      pattern: (value, param) => { try { return new RegExp(param).test(value); } catch (_e) { return false; } },
+      pattern: (value, param) => {
+        try {
+          // Cap regex length to prevent ReDoS from excessively complex patterns
+          if (param.length > 100) return false;
+          return new RegExp(param).test(value);
+        } catch (_e) { return false; }
+      },
       match: (value, param) => {
-        const other = document.querySelector('[name="' + param + '"]');
-        return other ? value === other.value : false;
+        try {
+          const escaped = typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(param) : param;
+          const other = document.querySelector('[name="' + escaped + '"]');
+          return other ? value === other.value : false;
+        } catch (_e) {
+          return false;
+        }
       }
     },
 

package/js/utils/helpers.js

@@ -74,6 +74,7 @@ function safeStorageSet(key, value) {
  * @param {string} event - Event type
  * @param {string|Function} handlerOrSelector - Event handler or selector for delegation
  * @param {Function} handler - Event handler (if using delegation)
+ * @returns {Function|undefined} The actual bound handler (use this with off() to remove delegation listeners)
  */
 function on(target, event, handlerOrSelector, handler) {
   const element = typeof target === 'string' ? $(target) : target;
@@ -83,9 +84,10 @@ function on(target, event, handlerOrSelector, handler) {
   if (typeof handlerOrSelector === 'function') {
     // Direct event binding
     element.addEventListener(event, handlerOrSelector);
+    return handlerOrSelector;
   } else {
-    // Event delegation
-    element.addEventListener(event, function (e) {
+    // Event delegation — return the wrapper so callers can remove it via off()
+    const wrapper = function (e) {
       const delegateTarget = e.target.closest(handlerOrSelector);
       if (delegateTarget && element.contains(delegateTarget)) {
         try {
@@ -94,7 +96,9 @@ function on(target, event, handlerOrSelector, handler) {
           console.warn('[Vanduo Helpers] Delegated handler error:', error);
         }
       }
-    });
+    };
+    element.addEventListener(event, wrapper);
+    return wrapper;
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanduo-oss/framework",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Zero-dependency CSS/JS framework built on Fibonacci/Golden Ratio design system with Open Color integration",
   "keywords": [
     "css",
@@ -45,7 +45,7 @@
     "eslint": "^10.0.3",
     "husky": "^9.1.7",
     "lightningcss": "^1.32.0",
-    "stylelint": "^17.4.0",
+    "stylelint": "^17.5.0",
     "stylelint-config-standard": "^40.0.0"
   },
   "engines": {