@vanduo-oss/framework 1.4.5 → 1.5.0

package/js/components/parallax.js

@@ -64,15 +64,17 @@
     initParallax: function (element) {
       element.dataset.parallaxInitialized = 'true';
 
-      // Check if disabled on mobile
-      const disableMobile = element.classList.contains('parallax-disable-mobile');
+      // Check if disabled on mobile (vd- prefixed; unprefixed kept for back-compat)
+      const disableMobile = element.classList.contains('vd-parallax-disable-mobile')
+        || element.classList.contains('parallax-disable-mobile');
       if (disableMobile && this.isMobile) {
         return;
       }
 
       const layers = element.querySelectorAll('.vd-parallax-layer, .vd-parallax-bg');
       const speed = this.getSpeed(element);
-      const direction = element.classList.contains('parallax-horizontal') ? 'horizontal' : 'vertical';
+      const direction = (element.classList.contains('vd-parallax-horizontal')
+        || element.classList.contains('parallax-horizontal')) ? 'horizontal' : 'vertical';
 
       this.parallaxElements.set(element, {
         layers: Array.from(layers),
@@ -91,9 +93,11 @@
      * @returns {number} Speed multiplier
      */
     getSpeed: function (element) {
-      if (element.classList.contains('parallax-slow')) {
+      if (element.classList.contains('vd-parallax-slow')
+        || element.classList.contains('parallax-slow')) {
         return 0.5;
-      } else if (element.classList.contains('parallax-fast')) {
+      } else if (element.classList.contains('vd-parallax-fast')
+        || element.classList.contains('parallax-fast')) {
         return 1.5;
       }
       return 1; // Default medium speed
@@ -150,8 +154,10 @@
       const offset = (scrollProgress - 0.5) * config.speed * 100;
 
       config.layers.forEach((layer, _index) => {
-        // Different layers can have different speeds
-        const layerSpeed = layer.dataset.parallaxSpeed ? parseFloat(layer.dataset.parallaxSpeed) : 1;
+        // Different layers can have different speeds. Accept data-parallax-speed
+        // (canonical) or data-speed (back-compat).
+        const layerSpeedAttr = layer.dataset.parallaxSpeed || layer.dataset.speed;
+        const layerSpeed = layerSpeedAttr ? parseFloat(layerSpeedAttr) : 1;
         const layerOffset = offset * layerSpeed;
 
         if (config.direction === 'horizontal') {

package/js/components/spotlight.js

@@ -14,6 +14,7 @@
     _cleanup: [],
     _boundTriggers: new WeakMap(),
     _triggerElement: null,
+    _currentTarget: null,
 
     init: function (root) {
       const triggers = window.Vanduo.queryAll(root, '[data-vd-spotlight]');
@@ -113,9 +114,39 @@
       // Overlay click to close
       overlay.addEventListener('click', () => this.stop());
 
+      // Keep the tooltip glued to its target while active — through the smooth
+      // scrollIntoView and any late layout (e.g. content-visibility sections that
+      // only render their real geometry once scrolled into view).
+      const reposition = () => {
+        if (this._active && this._currentTarget) this._positionTooltip(this._currentTarget);
+      };
+      window.addEventListener('scroll', reposition, { passive: true });
+      window.addEventListener('resize', reposition);
+      this._cleanup.push(() => window.removeEventListener('scroll', reposition));
+      this._cleanup.push(() => window.removeEventListener('resize', reposition));
+
       this._showStep(this._currentStep);
     },
 
+    _positionTooltip: function (target) {
+      const tooltip = this._elements.tooltip;
+      if (!tooltip || !target || !target.isConnected) return;
+
+      const rect = target.getBoundingClientRect();
+      const tRect = tooltip.getBoundingClientRect();
+      let top = rect.bottom + 12 + window.scrollY;
+      let left = rect.left + (rect.width - tRect.width) / 2 + window.scrollX;
+
+      // Keep in viewport
+      left = Math.max(8, Math.min(left, window.innerWidth - tRect.width - 8));
+      if (top + tRect.height > window.innerHeight + window.scrollY) {
+        top = rect.top - tRect.height - 12 + window.scrollY;
+      }
+
+      tooltip.style.top = top + 'px';
+      tooltip.style.left = left + 'px';
+    },
+
     _showStep: function (index) {
       const step = this._steps[index];
       if (!step) return;
@@ -206,23 +237,21 @@
       footer.appendChild(actions);
       tooltip.appendChild(footer);
 
-      // Position tooltip near target
+      // Position the tooltip near the target. A single measurement right after a
+      // smooth scrollIntoView is unreliable: the scroll is still animating and the
+      // target's final geometry may not exist yet (content-visibility sections only
+      // render once scrolled into view). Re-position across the settle window so the
+      // tooltip converges on the correct spot; the scroll/resize listeners keep it
+      // there afterward.
+      this._currentTarget = target || null;
       if (target) {
-        requestAnimationFrame(() => {
-          const rect = target.getBoundingClientRect();
-          const tRect = tooltip.getBoundingClientRect();
-          let top = rect.bottom + 12 + window.scrollY;
-          let left = rect.left + (rect.width - tRect.width) / 2 + window.scrollX;
-
-          // Keep in viewport
-          left = Math.max(8, Math.min(left, window.innerWidth - tRect.width - 8));
-          if (top + tRect.height > window.innerHeight + window.scrollY) {
-            top = rect.top - tRect.height - 12 + window.scrollY;
-          }
-
-          tooltip.style.top = top + 'px';
-          tooltip.style.left = left + 'px';
-        });
+        let frames = 0;
+        const settle = () => {
+          if (!this._active || this._currentTarget !== target) return;
+          this._positionTooltip(target);
+          if (frames++ < 30) requestAnimationFrame(settle);
+        };
+        requestAnimationFrame(settle);
       }
 
       document.dispatchEvent(new CustomEvent('spotlight:step', {
@@ -272,6 +301,7 @@
       this._elements = {};
       this._steps = [];
       this._currentStep = 0;
+      this._currentTarget = null;
 
       if (this._triggerElement && this._triggerElement.isConnected && typeof this._triggerElement.focus === 'function') {
         this._triggerElement.focus();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanduo-oss/framework",
-  "version": "1.4.5",
+  "version": "1.5.0",
   "description": "Zero-dependency CSS/JS framework built on Fibonacci/Golden Ratio design system with Open Color integration",
   "keywords": [
     "css",
@@ -21,13 +21,16 @@
   "type": "module",
   "main": "dist/vanduo.cjs.js",
   "module": "dist/vanduo.esm.js",
+  "types": "./dist/vanduo.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/vanduo.d.ts",
       "import": "./dist/vanduo.esm.js",
       "require": "./dist/vanduo.cjs.js",
       "default": "./dist/vanduo.esm.js"
     },
     "./css": "./dist/vanduo.min.css",
+    "./css/core": "./dist/vanduo-core.min.css",
     "./iife": "./dist/vanduo.min.js",
     "./package.json": "./package.json"
   },
@@ -36,12 +39,13 @@
     "css/",
     "js/",
     "fonts/",
-    "icons/"
+    "icons/",
+    "CHANGELOG.md"
   ],
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@playwright/test": "^1.60.0",
-    "esbuild": "^0.28.0",
+    "esbuild": "^0.28.1",
     "eslint": "^10.4.1",
     "husky": "^9.1.7",
     "lightningcss": "^1.32.0",

package/css/components/doc-tabs.css

@@ -1,38 +0,0 @@
-/**
- * Vanduo Documentation Tabs Component
- * Provides styled tab navigation for documentation sections
- */
-
-.doc-tabs {
-    display: flex;
-    gap: 0.5rem;
-    margin: 1rem 0 1.5rem;
-    flex-wrap: wrap;
-}
-
-.doc-tab {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.4rem;
-    padding: 0.6rem 1rem;
-    border: 1px solid var(--vd-border-color);
-    border-radius: var(--vd-btn-border-radius);
-    background: var(--vd-bg-secondary);
-    color: var(--vd-text-primary);
-    text-decoration: none;
-    font-weight: 500;
-    transition: all 0.2s ease;
-}
-
-.doc-tab:hover {
-    border-color: var(--vd-color-primary);
-    color: var(--vd-color-primary);
-    background: var(--vd-color-primary-alpha-08);
-}
-
-.doc-tab.active {
-    border-color: var(--vd-color-primary);
-    color: var(--vd-text-on-primary);
-    background: var(--vd-color-primary);
-    box-shadow: 0 0 0 1px var(--vd-color-primary-alpha-20);
-}