@vanduo-oss/framework 1.4.0 → 1.4.2

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

@@ -128,6 +128,32 @@
     return x;
   }
 
+  function positionAnchoredPopup(anchor, popup, gap) {
+    const padding = 8;
+    const offset = gap != null ? gap : 4;
+    const rect = anchor.getBoundingClientRect();
+
+    popup.style.minWidth = Math.max(rect.width, 0) + 'px';
+
+    let top = rect.bottom + offset;
+    let left = rect.left;
+    popup.style.top = top + 'px';
+    popup.style.left = left + 'px';
+
+    const popRect = popup.getBoundingClientRect();
+    if (popRect.bottom > window.innerHeight - padding && rect.top - popRect.height > padding) {
+      top = rect.top - popRect.height - offset;
+      popup.style.top = top + 'px';
+    }
+
+    const alignedRect = popup.getBoundingClientRect();
+    left = rect.left;
+    if (left + alignedRect.width > window.innerWidth - padding) {
+      left = window.innerWidth - alignedRect.width - padding;
+    }
+    popup.style.left = Math.max(padding, left) + 'px';
+  }
+
   const Datepicker = {
     instances: new Map(),
 
@@ -221,7 +247,7 @@
       wrapper.style.display = 'inline-block';
       input.parentNode.insertBefore(wrapper, input);
       wrapper.appendChild(input);
-      wrapper.appendChild(popup);
+      document.body.appendChild(popup);
 
       const isSameDay = (a, b) => a && b &&
         a.getFullYear() === b.getFullYear() &&
@@ -442,6 +468,10 @@
           }
           popup.appendChild(grid);
         }
+
+        if (popup.classList.contains('is-open')) {
+          requestAnimationFrame(positionPopup);
+        }
       };
 
       const handleGridKeydown = (e) => {
@@ -523,6 +553,15 @@
         requestAnimationFrame(focusFocusedDay);
       };
 
+      const positionPopup = () => {
+        if (!popup.classList.contains('is-open')) return;
+        positionAnchoredPopup(input, popup);
+      };
+
+      const repositionHandler = () => {
+        positionPopup();
+      };
+
       const open = () => {
         viewMode = 'days';
         if (selectedDate) {
@@ -542,7 +581,10 @@
         render();
         popup.classList.add('is-open');
         input.setAttribute('aria-expanded', 'true');
-        requestAnimationFrame(focusFocusedDay);
+        requestAnimationFrame(() => {
+          positionPopup();
+          focusFocusedDay();
+        });
       };
 
       const close = () => {
@@ -559,7 +601,7 @@
         open();
       };
       const outsideHandler = (e) => {
-        if (!wrapper.contains(e.target)) close();
+        if (!input.contains(e.target) && !popup.contains(e.target)) close();
       };
       const escHandler = (e) => {
         if (e.key === 'Escape' && popup.classList.contains('is-open')) {
@@ -573,6 +615,8 @@
       document.addEventListener('click', outsideHandler, true);
       document.addEventListener('keydown', escHandler);
       popup.addEventListener('keydown', handleGridKeydown);
+      window.addEventListener('resize', repositionHandler);
+      window.addEventListener('scroll', repositionHandler, true);
 
       input.setAttribute('aria-haspopup', 'dialog');
       input.setAttribute('aria-expanded', 'false');
@@ -582,7 +626,10 @@
         () => input.removeEventListener('focus', focusHandler),
         () => document.removeEventListener('click', outsideHandler, true),
         () => document.removeEventListener('keydown', escHandler),
-        () => popup.removeEventListener('keydown', handleGridKeydown)
+        () => popup.removeEventListener('keydown', handleGridKeydown),
+        () => window.removeEventListener('resize', repositionHandler),
+        () => window.removeEventListener('scroll', repositionHandler, true),
+        () => popup.remove()
       );
 
       this.instances.set(input, { cleanup: cleanup, open: open, close: close, popup: popup });

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

@@ -6,6 +6,32 @@
 (function () {
   'use strict';
 
+  function positionAnchoredPopup(anchor, popup, gap) {
+    const padding = 8;
+    const offset = gap != null ? gap : 4;
+    const rect = anchor.getBoundingClientRect();
+
+    popup.style.minWidth = Math.max(rect.width, 0) + 'px';
+
+    let top = rect.bottom + offset;
+    let left = rect.left;
+    popup.style.top = top + 'px';
+    popup.style.left = left + 'px';
+
+    const popRect = popup.getBoundingClientRect();
+    if (popRect.bottom > window.innerHeight - padding && rect.top - popRect.height > padding) {
+      top = rect.top - popRect.height - offset;
+      popup.style.top = top + 'px';
+    }
+
+    const alignedRect = popup.getBoundingClientRect();
+    left = rect.left;
+    if (left + alignedRect.width > window.innerWidth - padding) {
+      left = window.innerWidth - alignedRect.width - padding;
+    }
+    popup.style.left = Math.max(padding, left) + 'px';
+  }
+
   const Timepicker = {
     instances: new Map(),
 
@@ -36,7 +62,7 @@
       const popup = document.createElement('div');
       popup.className = 'vd-timepicker-popup';
       popup.setAttribute('role', 'listbox');
-      wrapper.appendChild(popup);
+      document.body.appendChild(popup);
 
       // Generate time slots
       const times = [];
@@ -84,13 +110,24 @@
         });
       };
 
+      const positionPopup = () => {
+        if (!popup.classList.contains('is-open')) return;
+        positionAnchoredPopup(input, popup);
+      };
+
+      const repositionHandler = () => {
+        positionPopup();
+      };
+
       const open = () => {
         render();
         popup.classList.add('is-open');
         input.setAttribute('aria-expanded', 'true');
-        // Scroll to selected
-        const selected = popup.querySelector('.is-selected');
-        if (selected) selected.scrollIntoView({ block: 'center' });
+        requestAnimationFrame(() => {
+          positionPopup();
+          const selected = popup.querySelector('.is-selected');
+          if (selected) selected.scrollIntoView({ block: 'center' });
+        });
       };
 
       const close = () => {
@@ -100,13 +137,15 @@
 
       const focusHandler = () => open();
       const outsideHandler = (e) => {
-        if (!wrapper.contains(e.target)) close();
+        if (!input.contains(e.target) && !popup.contains(e.target)) close();
       };
       const escHandler = (e) => { if (e.key === 'Escape') close(); };
 
       input.addEventListener('focus', focusHandler);
       document.addEventListener('click', outsideHandler, true);
       document.addEventListener('keydown', escHandler);
+      window.addEventListener('resize', repositionHandler);
+      window.addEventListener('scroll', repositionHandler, true);
       input.setAttribute('aria-haspopup', 'listbox');
       input.setAttribute('aria-expanded', 'false');
       input.setAttribute('autocomplete', 'off');
@@ -115,7 +154,10 @@
       cleanup.push(
         () => input.removeEventListener('focus', focusHandler),
         () => document.removeEventListener('click', outsideHandler, true),
-        () => document.removeEventListener('keydown', escHandler)
+        () => document.removeEventListener('keydown', escHandler),
+        () => window.removeEventListener('resize', repositionHandler),
+        () => window.removeEventListener('scroll', repositionHandler, true),
+        () => popup.remove()
       );
 
       this.instances.set(input, { cleanup, open, close });

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.2",
   "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);
-}