@vanduo-oss/framework 1.4.0 → 1.4.1

package/js/components/affix.js

@@ -51,7 +51,7 @@
       sentinel.style.cssText = 'display:block;height:1px;margin-bottom:-1px;visibility:hidden;pointer-events:none;';
       el.parentNode.insertBefore(sentinel, el);
 
-      el.style.setProperty('--affix-top-offset', offset + 'px');
+      el.style.setProperty('--vd-affix-top-offset', offset + 'px');
 
       function stick() {
         if (isStuck) return;
@@ -100,7 +100,7 @@
         () => { if (sentinel.parentNode) sentinel.parentNode.removeChild(sentinel); },
         () => {
           el.classList.remove('is-stuck');
-          el.style.removeProperty('--affix-top-offset');
+          el.style.removeProperty('--vd-affix-top-offset');
         }
       );
 

package/js/components/image-box.js

@@ -280,7 +280,7 @@
 
       // Calculate scrollbar width and lock body scroll
       const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-      document.body.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);
+      document.body.style.setProperty('--vd-scrollbar-width', `${scrollbarWidth}px`);
       document.body.classList.add('body-image-box-open');
 
       // Show backdrop
@@ -318,7 +318,7 @@
 
       // Unlock body scroll
       document.body.classList.remove('body-image-box-open');
-      document.body.style.removeProperty('--scrollbar-width');
+      document.body.style.removeProperty('--vd-scrollbar-width');
 
       // Return focus to trigger
       if (this.currentTrigger) {

package/js/components/morph.js

@@ -102,7 +102,7 @@
       el.classList.add('is-morphing');
 
       let duration = MORPH_DURATION_MS;
-      const custom = getComputedStyle(el).getPropertyValue('--morph-duration');
+      const custom = getComputedStyle(el).getPropertyValue('--vd-morph-duration');
       if (custom) {
         const parsed = parseFloat(custom);
         if (!isNaN(parsed)) duration = parsed * (custom.indexOf('ms') !== -1 ? 1 : 1000);

package/js/components/music-player.js

@@ -101,13 +101,13 @@
     const max = parseFloat(input.max) || 1;
     const val = parseFloat(input.value) || 0;
     const pct = ((val - min) / (max - min)) * 100;
-    input.style.setProperty('--fill', pct + '%');
+    input.style.setProperty('--vd-fill', pct + '%');
     // Fallback inline gradient for browsers without ::-moz-range-progress
     input.style.backgroundImage =
-      'linear-gradient(to right, var(--music-player-track-fill, currentColor) 0%, ' +
-      'var(--music-player-track-fill, currentColor) ' + pct + '%, ' +
-      'var(--music-player-track-bg, #ccc) ' + pct + '%, ' +
-      'var(--music-player-track-bg, #ccc) 100%)';
+      'linear-gradient(to right, var(--vd-music-player-track-fill, currentColor) 0%, ' +
+      'var(--vd-music-player-track-fill, currentColor) ' + pct + '%, ' +
+      'var(--vd-music-player-track-bg, #ccc) ' + pct + '%, ' +
+      'var(--vd-music-player-track-bg, #ccc) 100%)';
   }
 
   /* ─── Phosphor icon helper (matches framework icon style) ─ */
@@ -911,8 +911,8 @@
         'vd-music-player-floating-bottom-right',
         'is-position-custom'
       );
-      container.style.removeProperty('--music-player-floating-top');
-      container.style.removeProperty('--music-player-floating-left');
+      container.style.removeProperty('--vd-music-player-floating-top');
+      container.style.removeProperty('--vd-music-player-floating-left');
       if (r && r.parent && r.parent.isConnected) {
         r.parent.insertBefore(container, r.next);
       }
@@ -1014,8 +1014,8 @@
      */
     _setCornerPosition: function (container, which) {
       container.classList.remove('is-position-custom', 'vd-music-player-floating-bottom-left', 'vd-music-player-floating-bottom-right');
-      container.style.removeProperty('--music-player-floating-top');
-      container.style.removeProperty('--music-player-floating-left');
+      container.style.removeProperty('--vd-music-player-floating-top');
+      container.style.removeProperty('--vd-music-player-floating-left');
       if (which === 'bottom-left') {
         container.classList.add('vd-music-player-floating-bottom-left');
       } else {
@@ -1031,8 +1031,8 @@
     _setCustomPositionFromRect: function (container, left, top) {
       container.classList.remove('vd-music-player-floating-bottom-left', 'vd-music-player-floating-bottom-right');
       container.classList.add('is-position-custom');
-      container.style.setProperty('--music-player-floating-left', left + 'px');
-      container.style.setProperty('--music-player-floating-top', top + 'px');
+      container.style.setProperty('--vd-music-player-floating-left', left + 'px');
+      container.style.setProperty('--vd-music-player-floating-top', top + 'px');
     },
 
     /**

package/js/components/navbar.js

@@ -19,7 +19,7 @@
      */
     getBreakpoint: function () {
       const root = getComputedStyle(document.documentElement);
-      const breakpointValue = root.getPropertyValue('--breakpoint-lg').trim();
+      const breakpointValue = root.getPropertyValue('--vd-breakpoint-lg').trim();
 
       // Parse the value (could be "992px" or just "992")
       const parsed = parseInt(breakpointValue, 10);

package/js/components/preloader.js

@@ -60,7 +60,7 @@
       
       // Update width
       if (animate) {
-        el.style.transition = 'width var(--transition-duration-slow) var(--transition-ease)';
+        el.style.transition = 'width var(--vd-transition-duration-slow) var(--vd-transition-ease)';
       } else {
         el.style.transition = 'none';
         setTimeout(() => {

package/js/components/theme-customizer.js

@@ -260,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 });
@@ -461,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
@@ -572,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

package/js/components/vd-hex.js

@@ -90,19 +90,17 @@ 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;
+        const readToken = (token, defaultValue) => {
+            return style.getPropertyValue(token).trim() || defaultValue;
         };
 
         return {
-            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')
+            bgPrimary: readToken('--vd-bg-primary', '#ffffff'),
+            bgSecondary: readToken('--vd-bg-secondary', '#f5f5f5'),
+            borderColor: readToken('--vd-border-color', '#e0e0e0'),
+            colorPrimary: readToken('--vd-color-primary', '#3b82f6'),
+            textColor: readToken('--vd-text-primary', '#1f2937'),
+            textMuted: readToken('--vd-text-muted', '#6b7280')
         };
     }
     

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanduo-oss/framework",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Zero-dependency CSS/JS framework built on Fibonacci/Golden Ratio design system with Open Color integration",
   "keywords": [
     "css",

package/css/core/vd-aliases.css

@@ -1,108 +0,0 @@
-/**
- * Vanduo Framework - Semantic Compatibility Aliases
- * Maps legacy unprefixed semantic tokens to the canonical `--vd-*` API.
- */
-
-:root {
-  /* Colors */
-  --color-primary: var(--vd-color-primary);
-  --color-primary-light: var(--vd-color-primary-light);
-  --color-primary-dark: var(--vd-color-primary-dark);
-  --color-primary-hover: var(--vd-color-primary-hover);
-  --color-primary-active: var(--vd-color-primary-active);
-  --color-primary-rgb: var(--vd-color-primary-rgb);
-  --color-primary-alpha-5: var(--vd-color-primary-alpha-5);
-  --color-primary-alpha-08: var(--vd-color-primary-alpha-08);
-  --color-primary-alpha-10: var(--vd-color-primary-alpha-10);
-  --color-primary-alpha-15: var(--vd-color-primary-alpha-15);
-  --color-primary-alpha-20: var(--vd-color-primary-alpha-20);
-  --color-primary-alpha-30: var(--vd-color-primary-alpha-30);
-  --color-primary-alpha-40: var(--vd-color-primary-alpha-40);
-  --color-primary-alpha-50: var(--vd-color-primary-alpha-50);
-
-  --color-secondary: var(--vd-color-secondary);
-  --color-secondary-light: var(--vd-color-secondary-light);
-  --color-secondary-dark: var(--vd-color-secondary-dark);
-  --color-secondary-hover: var(--vd-color-secondary-hover);
-  --color-secondary-active: var(--vd-color-secondary-active);
-  --color-secondary-alpha-10: var(--vd-color-secondary-alpha-10);
-  --color-secondary-alpha-20: var(--vd-color-secondary-alpha-20);
-
-  --color-accent: var(--vd-color-accent);
-  --color-accent-light: var(--vd-color-accent-light);
-  --color-accent-dark: var(--vd-color-accent-dark);
-
-  --color-success: var(--vd-color-success);
-  --color-success-light: var(--vd-color-success-light);
-  --color-success-dark: var(--vd-color-success-dark);
-  --color-success-hover: var(--vd-color-success-hover);
-  --color-success-active: var(--vd-color-success-active);
-  --color-success-alpha-10: var(--vd-color-success-alpha-10);
-  --color-success-alpha-20: var(--vd-color-success-alpha-20);
-
-  --color-warning: var(--vd-color-warning);
-  --color-warning-light: var(--vd-color-warning-light);
-  --color-warning-dark: var(--vd-color-warning-dark);
-  --color-warning-hover: var(--vd-color-warning-hover);
-  --color-warning-active: var(--vd-color-warning-active);
-  --color-warning-alpha-10: var(--vd-color-warning-alpha-10);
-  --color-warning-alpha-20: var(--vd-color-warning-alpha-20);
-  --color-warning-alpha-30: var(--vd-color-warning-alpha-30);
-
-  --color-error: var(--vd-color-error);
-  --color-error-light: var(--vd-color-error-light);
-  --color-error-dark: var(--vd-color-error-dark);
-  --color-error-hover: var(--vd-color-error-hover);
-  --color-error-active: var(--vd-color-error-active);
-  --color-error-alpha-10: var(--vd-color-error-alpha-10);
-  --color-error-alpha-20: var(--vd-color-error-alpha-20);
-
-  --color-danger: var(--vd-color-danger);
-  --color-danger-light: var(--vd-color-danger-light);
-  --color-danger-dark: var(--vd-color-danger-dark);
-  --color-danger-hover: var(--vd-color-danger-hover);
-  --color-danger-active: var(--vd-color-danger-active);
-
-  --color-info: var(--vd-color-info);
-  --color-info-light: var(--vd-color-info-light);
-  --color-info-dark: var(--vd-color-info-dark);
-  --color-info-hover: var(--vd-color-info-hover);
-  --color-info-active: var(--vd-color-info-active);
-  --color-info-alpha-10: var(--vd-color-info-alpha-10);
-  --color-info-alpha-20: var(--vd-color-info-alpha-20);
-
-  --color-white: var(--vd-color-white);
-  --color-black: var(--vd-color-black);
-  --color-gray-50: var(--vd-color-gray-50);
-  --color-gray-100: var(--vd-color-gray-100);
-  --color-gray-200: var(--vd-color-gray-200);
-  --color-gray-300: var(--vd-color-gray-300);
-  --color-gray-400: var(--vd-color-gray-400);
-  --color-gray-500: var(--vd-color-gray-500);
-  --color-gray-600: var(--vd-color-gray-600);
-  --color-gray-700: var(--vd-color-gray-700);
-  --color-gray-800: var(--vd-color-gray-800);
-  --color-gray-900: var(--vd-color-gray-900);
-
-  /* Backgrounds */
-  --bg-primary: var(--vd-bg-primary);
-  --bg-secondary: var(--vd-bg-secondary);
-  --bg-tertiary: var(--vd-bg-tertiary);
-  --bg-dark: var(--vd-bg-dark);
-  --bg-darker: var(--vd-bg-darker);
-
-  /* Text */
-  --text-primary: var(--vd-text-primary);
-  --text-secondary: var(--vd-text-secondary);
-  --text-tertiary: var(--vd-text-tertiary);
-  --text-muted: var(--vd-text-muted);
-  --text-light: var(--vd-text-light);
-  --text-disabled: var(--vd-text-disabled);
-  --text-on-primary: var(--vd-text-on-primary);
-  --text-inverse: var(--vd-text-inverse);
-
-  /* Borders */
-  --border-color: var(--vd-border-color);
-  --border-color-light: var(--vd-border-color-light);
-  --border-color-dark: var(--vd-border-color-dark);
-}