@vanduo-oss/framework 1.4.5 → 1.5.0

package/dist/vanduo.js

@@ -1,4 +1,4 @@
-/*! Vanduo v1.4.5 | Built: 2026-06-11T18:11:31.153Z | git:70ed923 | development */
+/*! Vanduo v1.5.0 | Built: 2026-06-18T19:13:58.613Z | git:8f0e1b5 | development */
 (() => {
   // js/utils/lifecycle.js
   (function() {
@@ -176,7 +176,7 @@
   // js/vanduo.js
   (function() {
     "use strict";
-    const VANDUO_VERSION = true ? "1.4.5" : "0.0.0-dev";
+    const VANDUO_VERSION = true ? "1.5.0" : "0.0.0-dev";
     const hasOwn = Object.prototype.hasOwnProperty;
     const Vanduo2 = {
       version: VANDUO_VERSION,
@@ -3079,13 +3079,13 @@
        */
       initParallax: function(element) {
         element.dataset.parallaxInitialized = "true";
-        const disableMobile = element.classList.contains("parallax-disable-mobile");
+        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),
           speed,
@@ -3100,9 +3100,9 @@
        * @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;
@@ -3149,7 +3149,8 @@
         ));
         const offset = (scrollProgress - 0.5) * config.speed * 100;
         config.layers.forEach((layer, _index) => {
-          const layerSpeed = layer.dataset.parallaxSpeed ? parseFloat(layer.dataset.parallaxSpeed) : 1;
+          const layerSpeedAttr = layer.dataset.parallaxSpeed || layer.dataset.speed;
+          const layerSpeed = layerSpeedAttr ? parseFloat(layerSpeedAttr) : 1;
           const layerOffset = offset * layerSpeed;
           if (config.direction === "horizontal") {
             layer.style.transform = `translateX(${layerOffset}px)`;
@@ -10415,6 +10416,7 @@
       _cleanup: [],
       _boundTriggers: /* @__PURE__ */ new WeakMap(),
       _triggerElement: null,
+      _currentTarget: null,
       init: function(root) {
         const triggers = window.Vanduo.queryAll(root, "[data-vd-spotlight]");
         triggers.forEach((trigger) => {
@@ -10483,8 +10485,29 @@
         document.addEventListener("keydown", escHandler);
         this._cleanup.push(() => document.removeEventListener("keydown", escHandler));
         overlay.addEventListener("click", () => this.stop());
+        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;
+        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;
@@ -10557,19 +10580,15 @@
         footer.appendChild(counter);
         footer.appendChild(actions);
         tooltip.appendChild(footer);
+        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;
-            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", {
           detail: { index, step: index, total, data: step }
@@ -10610,6 +10629,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();
         }