@vanduo-oss/framework 1.3.0 → 1.3.2

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/index.js

@@ -62,6 +62,7 @@ import './components/rating.js';
 import './components/transfer.js';
 import './components/tree.js';
 import './components/spotlight.js';
+import './components/music-player.js';
 
 // Re-export for ESM / CJS consumers
 const Vanduo = window.Vanduo;

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.2",
   "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": {